@transferwise/components 0.0.0-experimental-a04dfbe → 0.0.0-experimental-57b6bbd

package/build/dimmer/Dimmer.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var componentsTheming = require('@wise/components-theming');
 var clsx = require('clsx');
 var React = require('react');
 var reactTransitionGroup = require('react-transition-group');
@@ -60,7 +59,6 @@ const Dimmer = ({
   onClose,
   onExited: handleExited
 }) => {
-  const [hasNotExited, setHasNotExited] = React.useState(false);
   const dimmerReference = React.useRef(null);
   const closeOnClick = event => {
     if (event.target === dimmerReference.current) {
@@ -83,13 +81,11 @@ const Dimmer = ({
     }
   }, [onClose]);
   const onEnter = () => {
-    setHasNotExited(true);
     if (dimmerReference.current) {
       dimmerManager.add(dimmerReference.current);
     }
   };
   const onExited = () => {
-    setHasNotExited(false);
     if (dimmerReference.current) {
       dimmerManager.remove(dimmerReference.current);
     }
@@ -108,76 +104,54 @@ const Dimmer = ({
       localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);
     };
   }, [handleKeyDown, open]);
-  return /*#__PURE__*/jsxRuntime.jsx(DimmerWrapper, {
-    open: open,
-    hasNotExited: hasNotExited,
-    children: /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
-      nodeRef: dimmerReference,
-      in: open,
-      appear: true
-      // Wait for animation to finish before unmount.
-      ,
-      timeout: {
-        enter: 0,
-        exit: EXIT_ANIMATION
-      },
-      classNames: {
-        enter: clsx.clsx({
-          'dimmer--enter-fade': fadeContentOnEnter
-        }),
-        enterDone: clsx.clsx('dimmer--enter-done', {
-          'dimmer--enter-fade': fadeContentOnEnter
-        }),
-        exit: clsx.clsx('dimmer--exit', {
-          'dimmer--exit-fade': fadeContentOnExit
-        })
-      },
-      unmountOnExit: true,
-      onEnter: onEnter,
-      onExited: onExited,
-      children: /*#__PURE__*/jsxRuntime.jsx(DimmerContentWrapper, {
-        scrollBody: !transparent,
-        children: /*#__PURE__*/jsxRuntime.jsx(FocusBoundary, {
+  return /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
+    nodeRef: dimmerReference,
+    in: open,
+    appear: true
+    // Wait for animation to finish before unmount.
+    ,
+    timeout: {
+      enter: 0,
+      exit: EXIT_ANIMATION
+    },
+    classNames: {
+      enter: clsx.clsx({
+        'dimmer--enter-fade': fadeContentOnEnter
+      }),
+      enterDone: clsx.clsx('dimmer--enter-done', {
+        'dimmer--enter-fade': fadeContentOnEnter
+      }),
+      exit: clsx.clsx('dimmer--exit', {
+        'dimmer--exit-fade': fadeContentOnExit
+      })
+    },
+    unmountOnExit: true,
+    onEnter: onEnter,
+    onExited: onExited,
+    children: /*#__PURE__*/jsxRuntime.jsx(DimmerContentWrapper, {
+      scrollBody: !transparent,
+      children: /*#__PURE__*/jsxRuntime.jsx(FocusBoundary, {
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          ref: dimmerReference,
+          className: clsx.clsx('dimmer', {
+            'dimmer--scrollable': scrollable,
+            'dimmer--transparent': transparent
+          }, className),
+          role: "presentation",
+          onClick: handleClick,
           children: /*#__PURE__*/jsxRuntime.jsx("div", {
-            ref: dimmerReference,
-            className: clsx.clsx('dimmer', {
-              'dimmer--scrollable': scrollable,
-              'dimmer--transparent': transparent
-            }, className),
-            role: "presentation",
-            onClick: handleClick,
-            children: /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: clsx.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: children
-            })
+            className: clsx.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: children
           })
         })
       })
     })
   });
 };
-const DimmerWrapper = ({
-  open,
-  hasNotExited,
-  children
-}) => {
-  const {
-    screenMode,
-    theme
-  } = componentsTheming.useTheme();
-  return open || hasNotExited ? /*#__PURE__*/jsxRuntime.jsx(componentsTheming.ThemeProvider, {
-    theme: "personal",
-    screenMode: theme === 'personal' ? screenMode : 'light',
-    isNotRootProvider: true,
-    children: children
-  }) : /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: children
-  });
-};
 const DimmerContentWrapper = ({
   children,
   scrollBody

package/build/dimmer/Dimmer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dimmer.js","sources":["../../src/dimmer/Dimmer.tsx"],"sourcesContent":["import { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  addNoScrollClass,\n  removeNoScrollClass,\n  type CommonProps,\n  type PositionBottom,\n  type PositionCenter,\n  type PositionTop,\n} from '../common';\nimport { isIosDevice } from '../common/deviceDetection';\nimport FocusBoundary from '../common/focusBoundary';\nimport withNextPortal from '../withNextPortal/withNextPortal';\n\nimport DimmerManager from './dimmerManager';\n\nexport const EXIT_ANIMATION = 350;\n\nconst dimmerManager = new DimmerManager();\n\nexport type DimmerProps = CommonProps & {\n  children?: ReactNode;\n  disableClickToClose?: boolean;\n  contentPosition?: PositionTop | PositionCenter | PositionBottom;\n  fadeContentOnEnter?: boolean;\n  fadeContentOnExit?: boolean;\n  open?: boolean;\n  scrollable?: boolean;\n  transparent?: boolean;\n  onClose?: (event: KeyboardEvent | MouseEvent) => void;\n  onExited?: () => void;\n};\n\nexport const handleTouchMove = (event: Event) => {\n  const isTouchedElementDimmer = (event.target as HTMLDivElement).classList.contains('dimmer');\n\n  // disable scroll on iOS devices for Dimmer area\n  // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908\n  // note: scrolling still works for children(s) as expected\n  if (isIosDevice() && isTouchedElementDimmer) {\n    event.stopPropagation();\n    event.preventDefault();\n  }\n};\n\nconst Dimmer = ({\n  children,\n  className,\n  disableClickToClose = false,\n  contentPosition,\n  fadeContentOnEnter = false,\n  fadeContentOnExit = false,\n  open = false,\n  scrollable = false,\n  transparent = false,\n  onClose,\n  onExited: handleExited,\n}: DimmerProps) => {\n  const [hasNotExited, setHasNotExited] = useState(false);\n  const dimmerReference = useRef<HTMLDivElement>(null);\n\n  const closeOnClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === dimmerReference.current) {\n      onClose?.(event);\n    }\n  };\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disableClickToClose || !onClose) {\n      return;\n    }\n\n    closeOnClick(event);\n  };\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') {\n        return;\n      }\n      event.stopPropagation();\n\n      if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {\n        onClose(event);\n      }\n    },\n    [onClose],\n  );\n\n  const onEnter = () => {\n    setHasNotExited(true);\n\n    if (dimmerReference.current) {\n      dimmerManager.add(dimmerReference.current);\n    }\n  };\n  const onExited = () => {\n    setHasNotExited(false);\n\n    if (dimmerReference.current) {\n      dimmerManager.remove(dimmerReference.current);\n    }\n\n    handleExited?.();\n  };\n\n  useEffect(() => {\n    const localReferenceCopy = dimmerReference.current;\n\n    if (open) {\n      document.addEventListener('keydown', handleKeyDown);\n      localReferenceCopy?.addEventListener('touchmove', handleTouchMove, { passive: true });\n    }\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n\n      localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);\n    };\n  }, [handleKeyDown, open]);\n\n  return (\n    <DimmerWrapper open={open} hasNotExited={hasNotExited}>\n      <CSSTransition\n        nodeRef={dimmerReference}\n        in={open}\n        appear\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames={{\n          enter: clsx({ 'dimmer--enter-fade': fadeContentOnEnter }),\n          enterDone: clsx('dimmer--enter-done', {\n            'dimmer--enter-fade': fadeContentOnEnter,\n          }),\n          exit: clsx('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),\n        }}\n        unmountOnExit\n        onEnter={onEnter}\n        onExited={onExited}\n      >\n        <DimmerContentWrapper scrollBody={!transparent}>\n          <FocusBoundary>\n            <div\n              ref={dimmerReference}\n              className={clsx(\n                'dimmer',\n                { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },\n                className,\n              )}\n              role=\"presentation\"\n              onClick={handleClick}\n            >\n              <div\n                className={clsx(\n                  'dimmer-content-positioner',\n                  contentPosition != null && [\n                    'd-flex justify-content-center',\n                    {\n                      'align-items-start': contentPosition === 'top',\n                      'align-items-center': contentPosition === 'center',\n                      'align-items-end': contentPosition === 'bottom',\n                    },\n                  ],\n                )}\n              >\n                {children}\n              </div>\n            </div>\n          </FocusBoundary>\n        </DimmerContentWrapper>\n      </CSSTransition>\n    </DimmerWrapper>\n  );\n};\n\nconst DimmerWrapper: React.ComponentType<{\n  open: boolean;\n  hasNotExited: boolean;\n  children: React.ReactNode;\n}> = ({ open, hasNotExited, children }) => {\n  const { screenMode, theme } = useTheme();\n\n  return open || hasNotExited ? (\n    <ThemeProvider\n      theme=\"personal\"\n      screenMode={theme === 'personal' ? screenMode : 'light'}\n      isNotRootProvider\n    >\n      {children}\n    </ThemeProvider>\n  ) : (\n    <>{children}</>\n  );\n};\n\nexport const DimmerContentWrapper = ({\n  children,\n  scrollBody,\n}: {\n  children: React.ReactElement;\n  scrollBody: boolean;\n}) => {\n  useEffect(() => {\n    if (scrollBody) {\n      addNoScrollClass();\n    }\n\n    return () => {\n      if (scrollBody) {\n        removeNoScrollClass();\n      }\n    };\n  }, [scrollBody]);\n\n  return children;\n};\n\n// Export without the Portal for tests only\nexport { Dimmer };\n\nexport default withNextPortal(Dimmer);\n"],"names":["EXIT_ANIMATION","dimmerManager","DimmerManager","handleTouchMove","event","isTouchedElementDimmer","target","classList","contains","isIosDevice","stopPropagation","preventDefault","Dimmer","children","className","disableClickToClose","contentPosition","fadeContentOnEnter","fadeContentOnExit","open","scrollable","transparent","onClose","onExited","handleExited","hasNotExited","setHasNotExited","useState","dimmerReference","useRef","closeOnClick","current","handleClick","handleKeyDown","useCallback","key","isTop","onEnter","add","remove","useEffect","localReferenceCopy","document","addEventListener","passive","removeEventListener","_jsx","DimmerWrapper","CSSTransition","nodeRef","in","appear","timeout","enter","exit","classNames","clsx","enterDone","unmountOnExit","DimmerContentWrapper","scrollBody","FocusBoundary","ref","role","onClick","screenMode","theme","useTheme","ThemeProvider","isNotRootProvider","_Fragment","addNoScrollClass","removeNoScrollClass","withNextPortal"],"mappings":"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"}
+{"version":3,"file":"Dimmer.js","sources":["../../src/dimmer/Dimmer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { MouseEvent, ReactNode, useCallback, useEffect, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  addNoScrollClass,\n  removeNoScrollClass,\n  type CommonProps,\n  type PositionBottom,\n  type PositionCenter,\n  type PositionTop,\n} from '../common';\nimport { isIosDevice } from '../common/deviceDetection';\nimport FocusBoundary from '../common/focusBoundary';\nimport withNextPortal from '../withNextPortal/withNextPortal';\n\nimport DimmerManager from './dimmerManager';\n\nexport const EXIT_ANIMATION = 350;\n\nconst dimmerManager = new DimmerManager();\n\nexport type DimmerProps = CommonProps & {\n  children?: ReactNode;\n  disableClickToClose?: boolean;\n  contentPosition?: PositionTop | PositionCenter | PositionBottom;\n  fadeContentOnEnter?: boolean;\n  fadeContentOnExit?: boolean;\n  open?: boolean;\n  scrollable?: boolean;\n  transparent?: boolean;\n  onClose?: (event: KeyboardEvent | MouseEvent) => void;\n  onExited?: () => void;\n};\n\nexport const handleTouchMove = (event: Event) => {\n  const isTouchedElementDimmer = (event.target as HTMLDivElement).classList.contains('dimmer');\n\n  // disable scroll on iOS devices for Dimmer area\n  // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908\n  // note: scrolling still works for children(s) as expected\n  if (isIosDevice() && isTouchedElementDimmer) {\n    event.stopPropagation();\n    event.preventDefault();\n  }\n};\n\nconst Dimmer = ({\n  children,\n  className,\n  disableClickToClose = false,\n  contentPosition,\n  fadeContentOnEnter = false,\n  fadeContentOnExit = false,\n  open = false,\n  scrollable = false,\n  transparent = false,\n  onClose,\n  onExited: handleExited,\n}: DimmerProps) => {\n  const dimmerReference = useRef<HTMLDivElement>(null);\n\n  const closeOnClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === dimmerReference.current) {\n      onClose?.(event);\n    }\n  };\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disableClickToClose || !onClose) {\n      return;\n    }\n\n    closeOnClick(event);\n  };\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') {\n        return;\n      }\n      event.stopPropagation();\n\n      if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {\n        onClose(event);\n      }\n    },\n    [onClose],\n  );\n\n  const onEnter = () => {\n    if (dimmerReference.current) {\n      dimmerManager.add(dimmerReference.current);\n    }\n  };\n  const onExited = () => {\n    if (dimmerReference.current) {\n      dimmerManager.remove(dimmerReference.current);\n    }\n\n    handleExited?.();\n  };\n\n  useEffect(() => {\n    const localReferenceCopy = dimmerReference.current;\n\n    if (open) {\n      document.addEventListener('keydown', handleKeyDown);\n      localReferenceCopy?.addEventListener('touchmove', handleTouchMove, { passive: true });\n    }\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n\n      localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);\n    };\n  }, [handleKeyDown, open]);\n\n  return (\n    <CSSTransition\n      nodeRef={dimmerReference}\n      in={open}\n      appear\n      // Wait for animation to finish before unmount.\n      timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n      classNames={{\n        enter: clsx({ 'dimmer--enter-fade': fadeContentOnEnter }),\n        enterDone: clsx('dimmer--enter-done', {\n          'dimmer--enter-fade': fadeContentOnEnter,\n        }),\n        exit: clsx('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),\n      }}\n      unmountOnExit\n      onEnter={onEnter}\n      onExited={onExited}\n    >\n      <DimmerContentWrapper scrollBody={!transparent}>\n        <FocusBoundary>\n          <div\n            ref={dimmerReference}\n            className={clsx(\n              'dimmer',\n              { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },\n              className,\n            )}\n            role=\"presentation\"\n            onClick={handleClick}\n          >\n            <div\n              className={clsx(\n                'dimmer-content-positioner',\n                contentPosition != null && [\n                  'd-flex justify-content-center',\n                  {\n                    'align-items-start': contentPosition === 'top',\n                    'align-items-center': contentPosition === 'center',\n                    'align-items-end': contentPosition === 'bottom',\n                  },\n                ],\n              )}\n            >\n              {children}\n            </div>\n          </div>\n        </FocusBoundary>\n      </DimmerContentWrapper>\n    </CSSTransition>\n  );\n};\n\nexport const DimmerContentWrapper = ({\n  children,\n  scrollBody,\n}: {\n  children: React.ReactElement;\n  scrollBody: boolean;\n}) => {\n  useEffect(() => {\n    if (scrollBody) {\n      addNoScrollClass();\n    }\n\n    return () => {\n      if (scrollBody) {\n        removeNoScrollClass();\n      }\n    };\n  }, [scrollBody]);\n\n  return children;\n};\n\n// Export without the Portal for tests only\nexport { Dimmer };\n\nexport default withNextPortal(Dimmer);\n"],"names":["EXIT_ANIMATION","dimmerManager","DimmerManager","handleTouchMove","event","isTouchedElementDimmer","target","classList","contains","isIosDevice","stopPropagation","preventDefault","Dimmer","children","className","disableClickToClose","contentPosition","fadeContentOnEnter","fadeContentOnExit","open","scrollable","transparent","onClose","onExited","handleExited","dimmerReference","useRef","closeOnClick","current","handleClick","handleKeyDown","useCallback","key","isTop","onEnter","add","remove","useEffect","localReferenceCopy","document","addEventListener","passive","removeEventListener","_jsx","CSSTransition","nodeRef","in","appear","timeout","enter","exit","classNames","clsx","enterDone","unmountOnExit","DimmerContentWrapper","scrollBody","FocusBoundary","ref","role","onClick","addNoScrollClass","removeNoScrollClass","withNextPortal"],"mappings":"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"}

package/build/dimmer/Dimmer.mjs

@@ -1,6 +1,5 @@
-import { useTheme, ThemeProvider } from '@wise/components-theming';
 import { clsx } from 'clsx';
-import { useState, useRef, useCallback, useEffect } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { isIosDevice } from '../common/deviceDetection/deviceDetection.mjs';
 import { addNoScrollClass, removeNoScrollClass } from '../common/DOMOperations/DOMOperations.mjs';
@@ -26,7 +25,7 @@ import '../common/fileType.mjs';
 import '@transferwise/icons';
 import 'react-intl';
 import '../common/closeButton/CloseButton.messages.mjs';
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import FocusBoundary from '../common/focusBoundary/FocusBoundary.mjs';
 import withNextPortalWrapper from '../withNextPortal/withNextPortal.mjs';
 import DimmerManager from './dimmerManager/DimmerManager.mjs';
@@ -56,7 +55,6 @@ const Dimmer = ({
   onClose,
   onExited: handleExited
 }) => {
-  const [hasNotExited, setHasNotExited] = useState(false);
   const dimmerReference = useRef(null);
   const closeOnClick = event => {
     if (event.target === dimmerReference.current) {
@@ -79,13 +77,11 @@ const Dimmer = ({
     }
   }, [onClose]);
   const onEnter = () => {
-    setHasNotExited(true);
     if (dimmerReference.current) {
       dimmerManager.add(dimmerReference.current);
     }
   };
   const onExited = () => {
-    setHasNotExited(false);
     if (dimmerReference.current) {
       dimmerManager.remove(dimmerReference.current);
     }
@@ -104,76 +100,54 @@ const Dimmer = ({
       localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);
     };
   }, [handleKeyDown, open]);
-  return /*#__PURE__*/jsx(DimmerWrapper, {
-    open: open,
-    hasNotExited: hasNotExited,
-    children: /*#__PURE__*/jsx(CSSTransition, {
-      nodeRef: dimmerReference,
-      in: open,
-      appear: true
-      // 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: true,
-      onEnter: onEnter,
-      onExited: onExited,
-      children: /*#__PURE__*/jsx(DimmerContentWrapper, {
-        scrollBody: !transparent,
-        children: /*#__PURE__*/jsx(FocusBoundary, {
+  return /*#__PURE__*/jsx(CSSTransition, {
+    nodeRef: dimmerReference,
+    in: open,
+    appear: true
+    // 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: true,
+    onEnter: onEnter,
+    onExited: onExited,
+    children: /*#__PURE__*/jsx(DimmerContentWrapper, {
+      scrollBody: !transparent,
+      children: /*#__PURE__*/jsx(FocusBoundary, {
+        children: /*#__PURE__*/jsx("div", {
+          ref: dimmerReference,
+          className: clsx('dimmer', {
+            'dimmer--scrollable': scrollable,
+            'dimmer--transparent': transparent
+          }, className),
+          role: "presentation",
+          onClick: handleClick,
           children: /*#__PURE__*/jsx("div", {
-            ref: dimmerReference,
-            className: clsx('dimmer', {
-              'dimmer--scrollable': scrollable,
-              'dimmer--transparent': transparent
-            }, className),
-            role: "presentation",
-            onClick: handleClick,
-            children: /*#__PURE__*/jsx("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: children
-            })
+            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: children
           })
         })
       })
     })
   });
 };
-const DimmerWrapper = ({
-  open,
-  hasNotExited,
-  children
-}) => {
-  const {
-    screenMode,
-    theme
-  } = useTheme();
-  return open || hasNotExited ? /*#__PURE__*/jsx(ThemeProvider, {
-    theme: "personal",
-    screenMode: theme === 'personal' ? screenMode : 'light',
-    isNotRootProvider: true,
-    children: children
-  }) : /*#__PURE__*/jsx(Fragment, {
-    children: children
-  });
-};
 const DimmerContentWrapper = ({
   children,
   scrollBody

package/build/dimmer/Dimmer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dimmer.mjs","sources":["../../src/dimmer/Dimmer.tsx"],"sourcesContent":["import { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  addNoScrollClass,\n  removeNoScrollClass,\n  type CommonProps,\n  type PositionBottom,\n  type PositionCenter,\n  type PositionTop,\n} from '../common';\nimport { isIosDevice } from '../common/deviceDetection';\nimport FocusBoundary from '../common/focusBoundary';\nimport withNextPortal from '../withNextPortal/withNextPortal';\n\nimport DimmerManager from './dimmerManager';\n\nexport const EXIT_ANIMATION = 350;\n\nconst dimmerManager = new DimmerManager();\n\nexport type DimmerProps = CommonProps & {\n  children?: ReactNode;\n  disableClickToClose?: boolean;\n  contentPosition?: PositionTop | PositionCenter | PositionBottom;\n  fadeContentOnEnter?: boolean;\n  fadeContentOnExit?: boolean;\n  open?: boolean;\n  scrollable?: boolean;\n  transparent?: boolean;\n  onClose?: (event: KeyboardEvent | MouseEvent) => void;\n  onExited?: () => void;\n};\n\nexport const handleTouchMove = (event: Event) => {\n  const isTouchedElementDimmer = (event.target as HTMLDivElement).classList.contains('dimmer');\n\n  // disable scroll on iOS devices for Dimmer area\n  // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908\n  // note: scrolling still works for children(s) as expected\n  if (isIosDevice() && isTouchedElementDimmer) {\n    event.stopPropagation();\n    event.preventDefault();\n  }\n};\n\nconst Dimmer = ({\n  children,\n  className,\n  disableClickToClose = false,\n  contentPosition,\n  fadeContentOnEnter = false,\n  fadeContentOnExit = false,\n  open = false,\n  scrollable = false,\n  transparent = false,\n  onClose,\n  onExited: handleExited,\n}: DimmerProps) => {\n  const [hasNotExited, setHasNotExited] = useState(false);\n  const dimmerReference = useRef<HTMLDivElement>(null);\n\n  const closeOnClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === dimmerReference.current) {\n      onClose?.(event);\n    }\n  };\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disableClickToClose || !onClose) {\n      return;\n    }\n\n    closeOnClick(event);\n  };\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') {\n        return;\n      }\n      event.stopPropagation();\n\n      if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {\n        onClose(event);\n      }\n    },\n    [onClose],\n  );\n\n  const onEnter = () => {\n    setHasNotExited(true);\n\n    if (dimmerReference.current) {\n      dimmerManager.add(dimmerReference.current);\n    }\n  };\n  const onExited = () => {\n    setHasNotExited(false);\n\n    if (dimmerReference.current) {\n      dimmerManager.remove(dimmerReference.current);\n    }\n\n    handleExited?.();\n  };\n\n  useEffect(() => {\n    const localReferenceCopy = dimmerReference.current;\n\n    if (open) {\n      document.addEventListener('keydown', handleKeyDown);\n      localReferenceCopy?.addEventListener('touchmove', handleTouchMove, { passive: true });\n    }\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n\n      localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);\n    };\n  }, [handleKeyDown, open]);\n\n  return (\n    <DimmerWrapper open={open} hasNotExited={hasNotExited}>\n      <CSSTransition\n        nodeRef={dimmerReference}\n        in={open}\n        appear\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames={{\n          enter: clsx({ 'dimmer--enter-fade': fadeContentOnEnter }),\n          enterDone: clsx('dimmer--enter-done', {\n            'dimmer--enter-fade': fadeContentOnEnter,\n          }),\n          exit: clsx('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),\n        }}\n        unmountOnExit\n        onEnter={onEnter}\n        onExited={onExited}\n      >\n        <DimmerContentWrapper scrollBody={!transparent}>\n          <FocusBoundary>\n            <div\n              ref={dimmerReference}\n              className={clsx(\n                'dimmer',\n                { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },\n                className,\n              )}\n              role=\"presentation\"\n              onClick={handleClick}\n            >\n              <div\n                className={clsx(\n                  'dimmer-content-positioner',\n                  contentPosition != null && [\n                    'd-flex justify-content-center',\n                    {\n                      'align-items-start': contentPosition === 'top',\n                      'align-items-center': contentPosition === 'center',\n                      'align-items-end': contentPosition === 'bottom',\n                    },\n                  ],\n                )}\n              >\n                {children}\n              </div>\n            </div>\n          </FocusBoundary>\n        </DimmerContentWrapper>\n      </CSSTransition>\n    </DimmerWrapper>\n  );\n};\n\nconst DimmerWrapper: React.ComponentType<{\n  open: boolean;\n  hasNotExited: boolean;\n  children: React.ReactNode;\n}> = ({ open, hasNotExited, children }) => {\n  const { screenMode, theme } = useTheme();\n\n  return open || hasNotExited ? (\n    <ThemeProvider\n      theme=\"personal\"\n      screenMode={theme === 'personal' ? screenMode : 'light'}\n      isNotRootProvider\n    >\n      {children}\n    </ThemeProvider>\n  ) : (\n    <>{children}</>\n  );\n};\n\nexport const DimmerContentWrapper = ({\n  children,\n  scrollBody,\n}: {\n  children: React.ReactElement;\n  scrollBody: boolean;\n}) => {\n  useEffect(() => {\n    if (scrollBody) {\n      addNoScrollClass();\n    }\n\n    return () => {\n      if (scrollBody) {\n        removeNoScrollClass();\n      }\n    };\n  }, [scrollBody]);\n\n  return children;\n};\n\n// Export without the Portal for tests only\nexport { Dimmer };\n\nexport default withNextPortal(Dimmer);\n"],"names":["EXIT_ANIMATION","dimmerManager","DimmerManager","handleTouchMove","event","isTouchedElementDimmer","target","classList","contains","isIosDevice","stopPropagation","preventDefault","Dimmer","children","className","disableClickToClose","contentPosition","fadeContentOnEnter","fadeContentOnExit","open","scrollable","transparent","onClose","onExited","handleExited","hasNotExited","setHasNotExited","useState","dimmerReference","useRef","closeOnClick","current","handleClick","handleKeyDown","useCallback","key","isTop","onEnter","add","remove","useEffect","localReferenceCopy","document","addEventListener","passive","removeEventListener","_jsx","DimmerWrapper","CSSTransition","nodeRef","in","appear","timeout","enter","exit","classNames","clsx","enterDone","unmountOnExit","DimmerContentWrapper","scrollBody","FocusBoundary","ref","role","onClick","screenMode","theme","useTheme","ThemeProvider","isNotRootProvider","_Fragment","addNoScrollClass","removeNoScrollClass","withNextPortal"],"mappings":"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"}
+{"version":3,"file":"Dimmer.mjs","sources":["../../src/dimmer/Dimmer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { MouseEvent, ReactNode, useCallback, useEffect, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  addNoScrollClass,\n  removeNoScrollClass,\n  type CommonProps,\n  type PositionBottom,\n  type PositionCenter,\n  type PositionTop,\n} from '../common';\nimport { isIosDevice } from '../common/deviceDetection';\nimport FocusBoundary from '../common/focusBoundary';\nimport withNextPortal from '../withNextPortal/withNextPortal';\n\nimport DimmerManager from './dimmerManager';\n\nexport const EXIT_ANIMATION = 350;\n\nconst dimmerManager = new DimmerManager();\n\nexport type DimmerProps = CommonProps & {\n  children?: ReactNode;\n  disableClickToClose?: boolean;\n  contentPosition?: PositionTop | PositionCenter | PositionBottom;\n  fadeContentOnEnter?: boolean;\n  fadeContentOnExit?: boolean;\n  open?: boolean;\n  scrollable?: boolean;\n  transparent?: boolean;\n  onClose?: (event: KeyboardEvent | MouseEvent) => void;\n  onExited?: () => void;\n};\n\nexport const handleTouchMove = (event: Event) => {\n  const isTouchedElementDimmer = (event.target as HTMLDivElement).classList.contains('dimmer');\n\n  // disable scroll on iOS devices for Dimmer area\n  // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908\n  // note: scrolling still works for children(s) as expected\n  if (isIosDevice() && isTouchedElementDimmer) {\n    event.stopPropagation();\n    event.preventDefault();\n  }\n};\n\nconst Dimmer = ({\n  children,\n  className,\n  disableClickToClose = false,\n  contentPosition,\n  fadeContentOnEnter = false,\n  fadeContentOnExit = false,\n  open = false,\n  scrollable = false,\n  transparent = false,\n  onClose,\n  onExited: handleExited,\n}: DimmerProps) => {\n  const dimmerReference = useRef<HTMLDivElement>(null);\n\n  const closeOnClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === dimmerReference.current) {\n      onClose?.(event);\n    }\n  };\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disableClickToClose || !onClose) {\n      return;\n    }\n\n    closeOnClick(event);\n  };\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') {\n        return;\n      }\n      event.stopPropagation();\n\n      if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {\n        onClose(event);\n      }\n    },\n    [onClose],\n  );\n\n  const onEnter = () => {\n    if (dimmerReference.current) {\n      dimmerManager.add(dimmerReference.current);\n    }\n  };\n  const onExited = () => {\n    if (dimmerReference.current) {\n      dimmerManager.remove(dimmerReference.current);\n    }\n\n    handleExited?.();\n  };\n\n  useEffect(() => {\n    const localReferenceCopy = dimmerReference.current;\n\n    if (open) {\n      document.addEventListener('keydown', handleKeyDown);\n      localReferenceCopy?.addEventListener('touchmove', handleTouchMove, { passive: true });\n    }\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n\n      localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);\n    };\n  }, [handleKeyDown, open]);\n\n  return (\n    <CSSTransition\n      nodeRef={dimmerReference}\n      in={open}\n      appear\n      // Wait for animation to finish before unmount.\n      timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n      classNames={{\n        enter: clsx({ 'dimmer--enter-fade': fadeContentOnEnter }),\n        enterDone: clsx('dimmer--enter-done', {\n          'dimmer--enter-fade': fadeContentOnEnter,\n        }),\n        exit: clsx('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),\n      }}\n      unmountOnExit\n      onEnter={onEnter}\n      onExited={onExited}\n    >\n      <DimmerContentWrapper scrollBody={!transparent}>\n        <FocusBoundary>\n          <div\n            ref={dimmerReference}\n            className={clsx(\n              'dimmer',\n              { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },\n              className,\n            )}\n            role=\"presentation\"\n            onClick={handleClick}\n          >\n            <div\n              className={clsx(\n                'dimmer-content-positioner',\n                contentPosition != null && [\n                  'd-flex justify-content-center',\n                  {\n                    'align-items-start': contentPosition === 'top',\n                    'align-items-center': contentPosition === 'center',\n                    'align-items-end': contentPosition === 'bottom',\n                  },\n                ],\n              )}\n            >\n              {children}\n            </div>\n          </div>\n        </FocusBoundary>\n      </DimmerContentWrapper>\n    </CSSTransition>\n  );\n};\n\nexport const DimmerContentWrapper = ({\n  children,\n  scrollBody,\n}: {\n  children: React.ReactElement;\n  scrollBody: boolean;\n}) => {\n  useEffect(() => {\n    if (scrollBody) {\n      addNoScrollClass();\n    }\n\n    return () => {\n      if (scrollBody) {\n        removeNoScrollClass();\n      }\n    };\n  }, [scrollBody]);\n\n  return children;\n};\n\n// Export without the Portal for tests only\nexport { Dimmer };\n\nexport default withNextPortal(Dimmer);\n"],"names":["EXIT_ANIMATION","dimmerManager","DimmerManager","handleTouchMove","event","isTouchedElementDimmer","target","classList","contains","isIosDevice","stopPropagation","preventDefault","Dimmer","children","className","disableClickToClose","contentPosition","fadeContentOnEnter","fadeContentOnExit","open","scrollable","transparent","onClose","onExited","handleExited","dimmerReference","useRef","closeOnClick","current","handleClick","handleKeyDown","useCallback","key","isTop","onEnter","add","remove","useEffect","localReferenceCopy","document","addEventListener","passive","removeEventListener","_jsx","CSSTransition","nodeRef","in","appear","timeout","enter","exit","classNames","clsx","enterDone","unmountOnExit","DimmerContentWrapper","scrollBody","FocusBoundary","ref","role","onClick","addNoScrollClass","removeNoScrollClass","withNextPortal"],"mappings":"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"}

package/build/inputs/_BottomSheet.js

@@ -41,19 +41,12 @@ function BottomSheet({
     getFloatingProps
   } = react.useInteractions([dismiss, role]);
   const [floatingKey, setFloatingKey] = React.useState(0);
-  const {
-    theme,
-    screenMode
-  } = componentsTheming.useTheme();
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [open ? /*#__PURE__*/jsxRuntime.jsx(PreventScroll.PreventScroll, {}) : null, renderTrigger?.({
       ref: refs.setReference,
       getInteractionProps: getReferenceProps
     }), /*#__PURE__*/jsxRuntime.jsx(react.FloatingPortal, {
-      children: /*#__PURE__*/jsxRuntime.jsx(componentsTheming.ThemeProvider, {
-        theme: "personal",
-        screenMode: theme === 'personal' ? screenMode : 'light',
-        isNotRootProvider: true,
+      children: /*#__PURE__*/jsxRuntime.jsx(componentsTheming.ThemedLayer, {
         children: /*#__PURE__*/jsxRuntime.jsxs(react$1.Transition, {
           show: open,
           className: "np-bottom-sheet-v2-container",

package/build/inputs/_BottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"_BottomSheet.js","sources":["../../src/inputs/_BottomSheet.tsx"],"sourcesContent":["import {\n  FloatingFocusManager,\n  FloatingPortal,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { Fragment, useState } from 'react';\n\nimport { CloseButton } from '../common/closeButton';\nimport { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\nimport { Size } from '../common/propsValues/size';\n\nexport interface BottomSheetProps {\n  open: boolean;\n  renderTrigger?: (args: {\n    ref: React.RefCallback<Element>;\n    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n      [key: string]: unknown;\n    };\n  }) => React.ReactNode;\n  title?: string;\n  initialFocusRef?: React.MutableRefObject<HTMLElement | null>;\n  padding?: 'none' | 'md';\n  children?: React.ReactNode;\n  onClose?: () => void;\n  onCloseEnd?: () => void;\n}\n\nexport function BottomSheet({\n  open,\n  renderTrigger,\n  title,\n  initialFocusRef,\n  padding = 'md',\n  children,\n  onClose,\n  onCloseEnd,\n}: BottomSheetProps) {\n  useVirtualKeyboard();\n\n  const { refs, context } = useFloating<Element>({\n    open,\n    onOpenChange: (value) => {\n      if (!value) {\n        onClose?.();\n      }\n    },\n  });\n\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);\n\n  const [floatingKey, setFloatingKey] = useState(0);\n\n  const { theme, screenMode } = useTheme();\n\n  return (\n    <>\n      {open ? <PreventScroll /> : null}\n      {renderTrigger?.({\n        ref: refs.setReference,\n        getInteractionProps: getReferenceProps,\n      })}\n\n      <FloatingPortal>\n        <ThemeProvider\n          theme=\"personal\"\n          screenMode={theme === 'personal' ? screenMode : 'light'}\n          isNotRootProvider\n        >\n          <Transition\n            show={open}\n            className=\"np-bottom-sheet-v2-container\"\n            beforeEnter={() => {\n              setFloatingKey((prev) => prev + 1);\n            }}\n            afterLeave={onCloseEnd}\n          >\n            <Transition.Child\n              className=\"np-bottom-sheet-v2-backdrop\"\n              enterFrom=\"np-bottom-sheet-v2-backdrop--closed\"\n              leaveTo=\"np-bottom-sheet-v2-backdrop--closed\"\n            />\n\n            <div className=\"np-bottom-sheet-v2\">\n              <FocusScope>\n                <FloatingFocusManager context={context} initialFocus={initialFocusRef}>\n                  <Fragment\n                    key={floatingKey} // Force inner state invalidation on open\n                  >\n                    <Transition.Child\n                      ref={refs.setFloating}\n                      className=\"np-bottom-sheet-v2-content\"\n                      enterFrom=\"np-bottom-sheet-v2-content--closed\"\n                      leaveTo=\"np-bottom-sheet-v2-content--closed\"\n                      {...getFloatingProps()}\n                    >\n                      <div className=\"np-bottom-sheet-v2-header\">\n                        <CloseButton\n                          size={Size.SMALL}\n                          onClick={() => {\n                            onClose?.();\n                          }}\n                        />\n                      </div>\n                      <div\n                        className={clsx(\n                          'np-bottom-sheet-v2-content-inner',\n                          title && 'np-bottom-sheet-v2-content-inner--has-title',\n                          padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md',\n                        )}\n                      >\n                        {title ? (\n                          <h2 className=\"np-bottom-sheet-v2-title np-text-title-body\">{title}</h2>\n                        ) : null}\n                        <div className=\"np-bottom-sheet-v2-body np-text-body-default\">\n                          {children}\n                        </div>\n                      </div>\n                    </Transition.Child>\n                  </Fragment>\n                </FloatingFocusManager>\n              </FocusScope>\n            </div>\n          </Transition>\n        </ThemeProvider>\n      </FloatingPortal>\n    </>\n  );\n}\n"],"names":["BottomSheet","open","renderTrigger","title","initialFocusRef","padding","children","onClose","onCloseEnd","useVirtualKeyboard","refs","context","useFloating","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","isNotRootProvider","Transition","show","className","beforeEnter","prev","afterLeave","Child","enterFrom","leaveTo","FocusScope","FloatingFocusManager","initialFocus","Fragment","setFloating","CloseButton","size","Size","SMALL","onClick","clsx"],"mappings":"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"}
+{"version":3,"file":"_BottomSheet.js","sources":["../../src/inputs/_BottomSheet.tsx"],"sourcesContent":["import {\n  FloatingFocusManager,\n  FloatingPortal,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemedLayer } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { Fragment, useState } from 'react';\n\nimport { CloseButton } from '../common/closeButton';\nimport { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\nimport { Size } from '../common/propsValues/size';\n\nexport interface BottomSheetProps {\n  open: boolean;\n  renderTrigger?: (args: {\n    ref: React.RefCallback<Element>;\n    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n      [key: string]: unknown;\n    };\n  }) => React.ReactNode;\n  title?: string;\n  initialFocusRef?: React.MutableRefObject<HTMLElement | null>;\n  padding?: 'none' | 'md';\n  children?: React.ReactNode;\n  onClose?: () => void;\n  onCloseEnd?: () => void;\n}\n\nexport function BottomSheet({\n  open,\n  renderTrigger,\n  title,\n  initialFocusRef,\n  padding = 'md',\n  children,\n  onClose,\n  onCloseEnd,\n}: BottomSheetProps) {\n  useVirtualKeyboard();\n\n  const { refs, context } = useFloating<Element>({\n    open,\n    onOpenChange: (value) => {\n      if (!value) {\n        onClose?.();\n      }\n    },\n  });\n\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);\n\n  const [floatingKey, setFloatingKey] = useState(0);\n\n  return (\n    <>\n      {open ? <PreventScroll /> : null}\n      {renderTrigger?.({\n        ref: refs.setReference,\n        getInteractionProps: getReferenceProps,\n      })}\n\n      <FloatingPortal>\n        <ThemedLayer>\n          <Transition\n            show={open}\n            className=\"np-bottom-sheet-v2-container\"\n            beforeEnter={() => {\n              setFloatingKey((prev) => prev + 1);\n            }}\n            afterLeave={onCloseEnd}\n          >\n            <Transition.Child\n              className=\"np-bottom-sheet-v2-backdrop\"\n              enterFrom=\"np-bottom-sheet-v2-backdrop--closed\"\n              leaveTo=\"np-bottom-sheet-v2-backdrop--closed\"\n            />\n\n            <div className=\"np-bottom-sheet-v2\">\n              <FocusScope>\n                <FloatingFocusManager context={context} initialFocus={initialFocusRef}>\n                  <Fragment\n                    key={floatingKey} // Force inner state invalidation on open\n                  >\n                    <Transition.Child\n                      ref={refs.setFloating}\n                      className=\"np-bottom-sheet-v2-content\"\n                      enterFrom=\"np-bottom-sheet-v2-content--closed\"\n                      leaveTo=\"np-bottom-sheet-v2-content--closed\"\n                      {...getFloatingProps()}\n                    >\n                      <div className=\"np-bottom-sheet-v2-header\">\n                        <CloseButton\n                          size={Size.SMALL}\n                          onClick={() => {\n                            onClose?.();\n                          }}\n                        />\n                      </div>\n                      <div\n                        className={clsx(\n                          'np-bottom-sheet-v2-content-inner',\n                          title && 'np-bottom-sheet-v2-content-inner--has-title',\n                          padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md',\n                        )}\n                      >\n                        {title ? (\n                          <h2 className=\"np-bottom-sheet-v2-title np-text-title-body\">{title}</h2>\n                        ) : null}\n                        <div className=\"np-bottom-sheet-v2-body np-text-body-default\">\n                          {children}\n                        </div>\n                      </div>\n                    </Transition.Child>\n                  </Fragment>\n                </FloatingFocusManager>\n              </FocusScope>\n            </div>\n          </Transition>\n        </ThemedLayer>\n      </FloatingPortal>\n    </>\n  );\n}\n"],"names":["BottomSheet","open","renderTrigger","title","initialFocusRef","padding","children","onClose","onCloseEnd","useVirtualKeyboard","refs","context","useFloating","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemedLayer","Transition","show","className","beforeEnter","prev","afterLeave","Child","enterFrom","leaveTo","FocusScope","FloatingFocusManager","initialFocus","Fragment","setFloating","CloseButton","size","Size","SMALL","onClick","clsx"],"mappings":"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"}

package/build/inputs/_BottomSheet.mjs

@@ -1,7 +1,7 @@
 import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 import { Transition } from '@headlessui/react';
 import { FocusScope } from '@react-aria/focus';
-import { useTheme, ThemeProvider } from '@wise/components-theming';
+import { ThemedLayer } from '@wise/components-theming';
 import { clsx } from 'clsx';
 import { useState, Fragment as Fragment$1 } from 'react';
 import { CloseButton } from '../common/closeButton/CloseButton.mjs';
@@ -39,19 +39,12 @@ function BottomSheet({
     getFloatingProps
   } = useInteractions([dismiss, role]);
   const [floatingKey, setFloatingKey] = useState(0);
-  const {
-    theme,
-    screenMode
-  } = useTheme();
   return /*#__PURE__*/jsxs(Fragment, {
     children: [open ? /*#__PURE__*/jsx(PreventScroll, {}) : null, renderTrigger?.({
       ref: refs.setReference,
       getInteractionProps: getReferenceProps
     }), /*#__PURE__*/jsx(FloatingPortal, {
-      children: /*#__PURE__*/jsx(ThemeProvider, {
-        theme: "personal",
-        screenMode: theme === 'personal' ? screenMode : 'light',
-        isNotRootProvider: true,
+      children: /*#__PURE__*/jsx(ThemedLayer, {
         children: /*#__PURE__*/jsxs(Transition, {
           show: open,
           className: "np-bottom-sheet-v2-container",

package/build/inputs/_BottomSheet.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"_BottomSheet.mjs","sources":["../../src/inputs/_BottomSheet.tsx"],"sourcesContent":["import {\n  FloatingFocusManager,\n  FloatingPortal,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { Fragment, useState } from 'react';\n\nimport { CloseButton } from '../common/closeButton';\nimport { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\nimport { Size } from '../common/propsValues/size';\n\nexport interface BottomSheetProps {\n  open: boolean;\n  renderTrigger?: (args: {\n    ref: React.RefCallback<Element>;\n    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n      [key: string]: unknown;\n    };\n  }) => React.ReactNode;\n  title?: string;\n  initialFocusRef?: React.MutableRefObject<HTMLElement | null>;\n  padding?: 'none' | 'md';\n  children?: React.ReactNode;\n  onClose?: () => void;\n  onCloseEnd?: () => void;\n}\n\nexport function BottomSheet({\n  open,\n  renderTrigger,\n  title,\n  initialFocusRef,\n  padding = 'md',\n  children,\n  onClose,\n  onCloseEnd,\n}: BottomSheetProps) {\n  useVirtualKeyboard();\n\n  const { refs, context } = useFloating<Element>({\n    open,\n    onOpenChange: (value) => {\n      if (!value) {\n        onClose?.();\n      }\n    },\n  });\n\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);\n\n  const [floatingKey, setFloatingKey] = useState(0);\n\n  const { theme, screenMode } = useTheme();\n\n  return (\n    <>\n      {open ? <PreventScroll /> : null}\n      {renderTrigger?.({\n        ref: refs.setReference,\n        getInteractionProps: getReferenceProps,\n      })}\n\n      <FloatingPortal>\n        <ThemeProvider\n          theme=\"personal\"\n          screenMode={theme === 'personal' ? screenMode : 'light'}\n          isNotRootProvider\n        >\n          <Transition\n            show={open}\n            className=\"np-bottom-sheet-v2-container\"\n            beforeEnter={() => {\n              setFloatingKey((prev) => prev + 1);\n            }}\n            afterLeave={onCloseEnd}\n          >\n            <Transition.Child\n              className=\"np-bottom-sheet-v2-backdrop\"\n              enterFrom=\"np-bottom-sheet-v2-backdrop--closed\"\n              leaveTo=\"np-bottom-sheet-v2-backdrop--closed\"\n            />\n\n            <div className=\"np-bottom-sheet-v2\">\n              <FocusScope>\n                <FloatingFocusManager context={context} initialFocus={initialFocusRef}>\n                  <Fragment\n                    key={floatingKey} // Force inner state invalidation on open\n                  >\n                    <Transition.Child\n                      ref={refs.setFloating}\n                      className=\"np-bottom-sheet-v2-content\"\n                      enterFrom=\"np-bottom-sheet-v2-content--closed\"\n                      leaveTo=\"np-bottom-sheet-v2-content--closed\"\n                      {...getFloatingProps()}\n                    >\n                      <div className=\"np-bottom-sheet-v2-header\">\n                        <CloseButton\n                          size={Size.SMALL}\n                          onClick={() => {\n                            onClose?.();\n                          }}\n                        />\n                      </div>\n                      <div\n                        className={clsx(\n                          'np-bottom-sheet-v2-content-inner',\n                          title && 'np-bottom-sheet-v2-content-inner--has-title',\n                          padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md',\n                        )}\n                      >\n                        {title ? (\n                          <h2 className=\"np-bottom-sheet-v2-title np-text-title-body\">{title}</h2>\n                        ) : null}\n                        <div className=\"np-bottom-sheet-v2-body np-text-body-default\">\n                          {children}\n                        </div>\n                      </div>\n                    </Transition.Child>\n                  </Fragment>\n                </FloatingFocusManager>\n              </FocusScope>\n            </div>\n          </Transition>\n        </ThemeProvider>\n      </FloatingPortal>\n    </>\n  );\n}\n"],"names":["BottomSheet","open","renderTrigger","title","initialFocusRef","padding","children","onClose","onCloseEnd","useVirtualKeyboard","refs","context","useFloating","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","isNotRootProvider","Transition","show","className","beforeEnter","prev","afterLeave","Child","enterFrom","leaveTo","FocusScope","FloatingFocusManager","initialFocus","Fragment","setFloating","CloseButton","size","Size","SMALL","onClick","clsx"],"mappings":"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"}
+{"version":3,"file":"_BottomSheet.mjs","sources":["../../src/inputs/_BottomSheet.tsx"],"sourcesContent":["import {\n  FloatingFocusManager,\n  FloatingPortal,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemedLayer } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { Fragment, useState } from 'react';\n\nimport { CloseButton } from '../common/closeButton';\nimport { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\nimport { Size } from '../common/propsValues/size';\n\nexport interface BottomSheetProps {\n  open: boolean;\n  renderTrigger?: (args: {\n    ref: React.RefCallback<Element>;\n    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n      [key: string]: unknown;\n    };\n  }) => React.ReactNode;\n  title?: string;\n  initialFocusRef?: React.MutableRefObject<HTMLElement | null>;\n  padding?: 'none' | 'md';\n  children?: React.ReactNode;\n  onClose?: () => void;\n  onCloseEnd?: () => void;\n}\n\nexport function BottomSheet({\n  open,\n  renderTrigger,\n  title,\n  initialFocusRef,\n  padding = 'md',\n  children,\n  onClose,\n  onCloseEnd,\n}: BottomSheetProps) {\n  useVirtualKeyboard();\n\n  const { refs, context } = useFloating<Element>({\n    open,\n    onOpenChange: (value) => {\n      if (!value) {\n        onClose?.();\n      }\n    },\n  });\n\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);\n\n  const [floatingKey, setFloatingKey] = useState(0);\n\n  return (\n    <>\n      {open ? <PreventScroll /> : null}\n      {renderTrigger?.({\n        ref: refs.setReference,\n        getInteractionProps: getReferenceProps,\n      })}\n\n      <FloatingPortal>\n        <ThemedLayer>\n          <Transition\n            show={open}\n            className=\"np-bottom-sheet-v2-container\"\n            beforeEnter={() => {\n              setFloatingKey((prev) => prev + 1);\n            }}\n            afterLeave={onCloseEnd}\n          >\n            <Transition.Child\n              className=\"np-bottom-sheet-v2-backdrop\"\n              enterFrom=\"np-bottom-sheet-v2-backdrop--closed\"\n              leaveTo=\"np-bottom-sheet-v2-backdrop--closed\"\n            />\n\n            <div className=\"np-bottom-sheet-v2\">\n              <FocusScope>\n                <FloatingFocusManager context={context} initialFocus={initialFocusRef}>\n                  <Fragment\n                    key={floatingKey} // Force inner state invalidation on open\n                  >\n                    <Transition.Child\n                      ref={refs.setFloating}\n                      className=\"np-bottom-sheet-v2-content\"\n                      enterFrom=\"np-bottom-sheet-v2-content--closed\"\n                      leaveTo=\"np-bottom-sheet-v2-content--closed\"\n                      {...getFloatingProps()}\n                    >\n                      <div className=\"np-bottom-sheet-v2-header\">\n                        <CloseButton\n                          size={Size.SMALL}\n                          onClick={() => {\n                            onClose?.();\n                          }}\n                        />\n                      </div>\n                      <div\n                        className={clsx(\n                          'np-bottom-sheet-v2-content-inner',\n                          title && 'np-bottom-sheet-v2-content-inner--has-title',\n                          padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md',\n                        )}\n                      >\n                        {title ? (\n                          <h2 className=\"np-bottom-sheet-v2-title np-text-title-body\">{title}</h2>\n                        ) : null}\n                        <div className=\"np-bottom-sheet-v2-body np-text-body-default\">\n                          {children}\n                        </div>\n                      </div>\n                    </Transition.Child>\n                  </Fragment>\n                </FloatingFocusManager>\n              </FocusScope>\n            </div>\n          </Transition>\n        </ThemedLayer>\n      </FloatingPortal>\n    </>\n  );\n}\n"],"names":["BottomSheet","open","renderTrigger","title","initialFocusRef","padding","children","onClose","onCloseEnd","useVirtualKeyboard","refs","context","useFloating","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemedLayer","Transition","show","className","beforeEnter","prev","afterLeave","Child","enterFrom","leaveTo","FocusScope","FloatingFocusManager","initialFocus","Fragment","setFloating","CloseButton","size","Size","SMALL","onClick","clsx"],"mappings":"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"}

package/build/inputs/_Popover.js

@@ -56,19 +56,12 @@ function Popover({
     getFloatingProps
   } = react.useInteractions([role, dismiss]);
   const [floatingKey, setFloatingKey] = React.useState(0);
-  const {
-    theme,
-    screenMode
-  } = componentsTheming.useTheme();
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [open ? /*#__PURE__*/jsxRuntime.jsx(PreventScroll.PreventScroll, {}) : null, renderTrigger({
       ref: refs.setReference,
       getInteractionProps: getReferenceProps
     }), /*#__PURE__*/jsxRuntime.jsx(react.FloatingPortal, {
-      children: /*#__PURE__*/jsxRuntime.jsx(componentsTheming.ThemeProvider, {
-        theme: "personal",
-        screenMode: theme === 'personal' ? screenMode : 'light',
-        isNotRootProvider: true,
+      children: /*#__PURE__*/jsxRuntime.jsx(componentsTheming.ThemedLayer, {
         children: /*#__PURE__*/jsxRuntime.jsx(react$1.Transition, {
           show: open,
           leave: "transition-opacity",

package/build/inputs/_Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"_Popover.js","sources":["../../src/inputs/_Popover.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  type Placement,\n  shift,\n  size as floatingSize,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\n\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\n\nexport interface PopoverProps {\n  placement?: Placement;\n  open: boolean;\n  renderTrigger: (args: {\n    ref: React.RefCallback<Element>;\n    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n      [key: string]: unknown;\n    };\n  }) => React.ReactNode;\n  title?: string;\n  size?: 'md' | 'lg';\n  padding?: 'none' | 'md';\n  children?: React.ReactNode;\n  onClose?: () => void;\n  onCloseEnd?: () => void;\n}\n\nconst floatingPadding = 16;\n\nexport function Popover({\n  placement,\n  open,\n  renderTrigger,\n  title,\n  size = 'md',\n  padding = 'md',\n  children,\n  onClose,\n  onCloseEnd,\n}: PopoverProps) {\n  const { refs, floatingStyles, context } = useFloating<Element>({\n    placement,\n    middleware: [\n      offset(8),\n      flip({ padding: floatingPadding, crossAxis: false }),\n      shift(),\n      floatingSize({\n        padding: floatingPadding,\n        apply: ({ elements, rects, availableHeight }) => {\n          elements.floating.style.setProperty('--max-height', `${availableHeight}px`);\n          elements.floating.style.setProperty('--width', `${rects.reference.width}px`);\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n    open,\n    onOpenChange: (value) => {\n      if (!value) {\n        onClose?.();\n      }\n    },\n  });\n\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n  const { getReferenceProps, getFloatingProps } = useInteractions([role, dismiss]);\n\n  const [floatingKey, setFloatingKey] = useState(0);\n\n  const { theme, screenMode } = useTheme();\n\n  return (\n    <>\n      {open ? <PreventScroll /> : null}\n      {renderTrigger({\n        ref: refs.setReference,\n        getInteractionProps: getReferenceProps,\n      })}\n\n      <FloatingPortal>\n        <ThemeProvider\n          theme=\"personal\"\n          screenMode={theme === 'personal' ? screenMode : 'light'}\n          isNotRootProvider\n        >\n          <Transition\n            show={open}\n            leave=\"transition-opacity\"\n            leaveTo=\"opacity-0\"\n            beforeEnter={() => {\n              setFloatingKey((prev) => prev + 1);\n            }}\n            afterLeave={onCloseEnd}\n          >\n            <FocusScope>\n              <FloatingFocusManager context={context}>\n                <div\n                  key={floatingKey} // Force inner state invalidation on open\n                  ref={refs.setFloating}\n                  className={clsx('np-popover-v2-container', {\n                    'np-popover-v2-container--size-md': size === 'md',\n                    'np-popover-v2-container--size-lg': size === 'lg',\n                  })}\n                  // eslint-disable-next-line react/forbid-dom-props\n                  style={floatingStyles}\n                  {...getFloatingProps()}\n                >\n                  <div\n                    className={clsx('np-popover-v2', title && 'np-popover-v2--has-title', {\n                      'np-popover-v2--padding-md': padding === 'md',\n                    })}\n                  >\n                    {title ? (\n                      <h2 className=\"np-popover-v2-title np-text-title-body\">{title}</h2>\n                    ) : null}\n                    <div className=\"np-popover-v2-content np-text-body-default\">{children}</div>\n                  </div>\n                </div>\n              </FloatingFocusManager>\n            </FocusScope>\n          </Transition>\n        </ThemeProvider>\n      </FloatingPortal>\n    </>\n  );\n}\n"],"names":["floatingPadding","Popover","placement","open","renderTrigger","title","size","padding","children","onClose","onCloseEnd","refs","floatingStyles","context","useFloating","middleware","offset","flip","crossAxis","shift","floatingSize","apply","elements","rects","availableHeight","floating","style","setProperty","reference","width","whileElementsMounted","autoUpdate","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","isNotRootProvider","Transition","show","leave","leaveTo","beforeEnter","prev","afterLeave","FocusScope","FloatingFocusManager","setFloating","className","clsx"],"mappings":";;;;;;;;;;;AAuCA,MAAMA,eAAe,GAAG,EAAE,CAAA;AAEpB,SAAUC,OAAOA,CAAC;EACtBC,SAAS;EACTC,IAAI;EACJC,aAAa;EACbC,KAAK;AACLC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,OAAO,GAAG,IAAI;EACdC,QAAQ;EACRC,OAAO;AACPC,EAAAA,UAAAA;AACa,CAAA,EAAA;EACb,MAAM;IAAEC,IAAI;IAAEC,cAAc;AAAEC,IAAAA,OAAAA;GAAS,GAAGC,iBAAW,CAAU;IAC7DZ,SAAS;IACTa,UAAU,EAAE,CACVC,YAAM,CAAC,CAAC,CAAC,EACTC,UAAI,CAAC;AAAEV,MAAAA,OAAO,EAAEP,eAAe;AAAEkB,MAAAA,SAAS,EAAE,KAAA;AAAK,KAAE,CAAC,EACpDC,WAAK,EAAE,EACPC,UAAY,CAAC;AACXb,MAAAA,OAAO,EAAEP,eAAe;AACxBqB,MAAAA,KAAK,EAAEA,CAAC;QAAEC,QAAQ;QAAEC,KAAK;AAAEC,QAAAA,eAAAA;AAAiB,OAAA,KAAI;AAC9CF,QAAAA,QAAQ,CAACG,QAAQ,CAACC,KAAK,CAACC,WAAW,CAAC,cAAc,EAAE,CAAA,EAAGH,eAAe,CAAA,EAAA,CAAI,CAAC,CAAA;AAC3EF,QAAAA,QAAQ,CAACG,QAAQ,CAACC,KAAK,CAACC,WAAW,CAAC,SAAS,EAAE,CAAA,EAAGJ,KAAK,CAACK,SAAS,CAACC,KAAK,IAAI,CAAC,CAAA;AAC9E,OAAA;KACD,CAAC,CACH;AACDC,IAAAA,oBAAoB,EAAEC,gBAAU;IAChC5B,IAAI;IACJ6B,YAAY,EAAGC,KAAK,IAAI;MACtB,IAAI,CAACA,KAAK,EAAE;AACVxB,QAAAA,OAAO,IAAI,CAAA;AACb,OAAA;AACF,KAAA;AACD,GAAA,CAAC,CAAA;AAEF,EAAA,MAAMyB,OAAO,GAAGC,gBAAU,CAACtB,OAAO,CAAC,CAAA;AACnC,EAAA,MAAMuB,IAAI,GAAGC,aAAO,CAACxB,OAAO,CAAC,CAAA;EAC7B,MAAM;IAAEyB,iBAAiB;AAAEC,IAAAA,gBAAAA;GAAkB,GAAGC,qBAAe,CAAC,CAACJ,IAAI,EAAEF,OAAO,CAAC,CAAC,CAAA;EAEhF,MAAM,CAACO,WAAW,EAAEC,cAAc,CAAC,GAAGC,cAAQ,CAAC,CAAC,CAAC,CAAA;EAEjD,MAAM;IAAEC,KAAK;AAAEC,IAAAA,UAAAA;GAAY,GAAGC,0BAAQ,EAAE,CAAA;EAExC,oBACEC,eAAA,CAAAC,mBAAA,EAAA;AAAAxC,IAAAA,QAAA,EACGL,CAAAA,IAAI,gBAAG8C,cAAA,CAACC,2BAAa,EAAG,EAAA,CAAA,GAAG,IAAI,EAC/B9C,aAAa,CAAC;MACb+C,GAAG,EAAExC,IAAI,CAACyC,YAAY;AACtBC,MAAAA,mBAAmB,EAAEf,iBAAAA;AACtB,KAAA,CAAC,eAEFW,cAAA,CAACK,oBAAc,EAAA;MAAA9C,QAAA,eACbyC,cAAA,CAACM,+BAAa,EAAA;AACZX,QAAAA,KAAK,EAAC,UAAU;AAChBC,QAAAA,UAAU,EAAED,KAAK,KAAK,UAAU,GAAGC,UAAU,GAAG,OAAQ;QACxDW,iBAAiB,EAAA,IAAA;QAAAhD,QAAA,eAEjByC,cAAA,CAACQ,kBAAU,EAAA;AACTC,UAAAA,IAAI,EAAEvD,IAAK;AACXwD,UAAAA,KAAK,EAAC,oBAAoB;AAC1BC,UAAAA,OAAO,EAAC,WAAW;UACnBC,WAAW,EAAEA,MAAK;AAChBnB,YAAAA,cAAc,CAAEoB,IAAI,IAAKA,IAAI,GAAG,CAAC,CAAC,CAAA;WAClC;AACFC,UAAAA,UAAU,EAAErD,UAAW;UAAAF,QAAA,eAEvByC,cAAA,CAACe,gBAAU,EAAA;YAAAxD,QAAA,eACTyC,cAAA,CAACgB,0BAAoB,EAAA;AAACpD,cAAAA,OAAO,EAAEA,OAAQ;AAAAL,cAAAA,QAAA,eACrCyC,cAAA,CAAA,KAAA,EAAA;AACoB;gBAClBE,GAAG,EAAExC,IAAI,CAACuD,WAAY;AACtBC,gBAAAA,SAAS,EAAEC,SAAI,CAAC,yBAAyB,EAAE;kBACzC,kCAAkC,EAAE9D,IAAI,KAAK,IAAI;kBACjD,kCAAkC,EAAEA,IAAI,KAAK,IAAA;iBAC9C,CAAA;AACD;AAAA;AACAoB,gBAAAA,KAAK,EAAEd,cAAe;gBAAA,GAClB2B,gBAAgB,EAAE;AAAA/B,gBAAAA,QAAA,eAEtBuC,eAAA,CAAA,KAAA,EAAA;kBACEoB,SAAS,EAAEC,SAAI,CAAC,eAAe,EAAE/D,KAAK,IAAI,0BAA0B,EAAE;oBACpE,2BAA2B,EAAEE,OAAO,KAAK,IAAA;AAC1C,mBAAA,CAAE;kBAAAC,QAAA,EAAA,CAEFH,KAAK,gBACJ4C,cAAA,CAAA,IAAA,EAAA;AAAIkB,oBAAAA,SAAS,EAAC,wCAAwC;AAAA3D,oBAAAA,QAAA,EAAEH,KAAAA;AAAK,mBAAK,CAAC,GACjE,IAAI,eACR4C,cAAA,CAAA,KAAA,EAAA;AAAKkB,oBAAAA,SAAS,EAAC,4CAA4C;AAAA3D,oBAAAA,QAAA,EAAEA,QAAAA;AAAQ,mBAAM,CAC7E,CAAA;iBAAK,CAAA;AACP,eAAA,EApBOiC,WAoBF,CAAA;aACe,CAAA;WACZ,CAAA;SACF,CAAA;OACC,CAAA;AACjB,KAAgB,CAClB,CAAA;AAAA,GAAA,CAAG,CAAA;AAEP;;;;"}
+{"version":3,"file":"_Popover.js","sources":["../../src/inputs/_Popover.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  size as floatingSize,\n  offset,\n  type Placement,\n  shift,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemedLayer } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\n\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\n\nexport interface PopoverProps {\n  placement?: Placement;\n  open: boolean;\n  renderTrigger: (args: {\n    ref: React.RefCallback<Element>;\n    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n      [key: string]: unknown;\n    };\n  }) => React.ReactNode;\n  title?: string;\n  size?: 'md' | 'lg';\n  padding?: 'none' | 'md';\n  children?: React.ReactNode;\n  onClose?: () => void;\n  onCloseEnd?: () => void;\n}\n\nconst floatingPadding = 16;\n\nexport function Popover({\n  placement,\n  open,\n  renderTrigger,\n  title,\n  size = 'md',\n  padding = 'md',\n  children,\n  onClose,\n  onCloseEnd,\n}: PopoverProps) {\n  const { refs, floatingStyles, context } = useFloating<Element>({\n    placement,\n    middleware: [\n      offset(8),\n      flip({ padding: floatingPadding, crossAxis: false }),\n      shift(),\n      floatingSize({\n        padding: floatingPadding,\n        apply: ({ elements, rects, availableHeight }) => {\n          elements.floating.style.setProperty('--max-height', `${availableHeight}px`);\n          elements.floating.style.setProperty('--width', `${rects.reference.width}px`);\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n    open,\n    onOpenChange: (value) => {\n      if (!value) {\n        onClose?.();\n      }\n    },\n  });\n\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n  const { getReferenceProps, getFloatingProps } = useInteractions([role, dismiss]);\n\n  const [floatingKey, setFloatingKey] = useState(0);\n\n  return (\n    <>\n      {open ? <PreventScroll /> : null}\n      {renderTrigger({\n        ref: refs.setReference,\n        getInteractionProps: getReferenceProps,\n      })}\n\n      <FloatingPortal>\n        <ThemedLayer>\n          <Transition\n            show={open}\n            leave=\"transition-opacity\"\n            leaveTo=\"opacity-0\"\n            beforeEnter={() => {\n              setFloatingKey((prev) => prev + 1);\n            }}\n            afterLeave={onCloseEnd}\n          >\n            <FocusScope>\n              <FloatingFocusManager context={context}>\n                <div\n                  key={floatingKey} // Force inner state invalidation on open\n                  ref={refs.setFloating}\n                  className={clsx('np-popover-v2-container', {\n                    'np-popover-v2-container--size-md': size === 'md',\n                    'np-popover-v2-container--size-lg': size === 'lg',\n                  })}\n                  // eslint-disable-next-line react/forbid-dom-props\n                  style={floatingStyles}\n                  {...getFloatingProps()}\n                >\n                  <div\n                    className={clsx('np-popover-v2', title && 'np-popover-v2--has-title', {\n                      'np-popover-v2--padding-md': padding === 'md',\n                    })}\n                  >\n                    {title ? (\n                      <h2 className=\"np-popover-v2-title np-text-title-body\">{title}</h2>\n                    ) : null}\n                    <div className=\"np-popover-v2-content np-text-body-default\">{children}</div>\n                  </div>\n                </div>\n              </FloatingFocusManager>\n            </FocusScope>\n          </Transition>\n        </ThemedLayer>\n      </FloatingPortal>\n    </>\n  );\n}\n"],"names":["floatingPadding","Popover","placement","open","renderTrigger","title","size","padding","children","onClose","onCloseEnd","refs","floatingStyles","context","useFloating","middleware","offset","flip","crossAxis","shift","floatingSize","apply","elements","rects","availableHeight","floating","style","setProperty","reference","width","whileElementsMounted","autoUpdate","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemedLayer","Transition","show","leave","leaveTo","beforeEnter","prev","afterLeave","FocusScope","FloatingFocusManager","setFloating","className","clsx"],"mappings":"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"}

package/build/inputs/_Popover.mjs

@@ -1,7 +1,7 @@
 import { useFloating, offset, flip, shift, size, autoUpdate, useDismiss, useRole, useInteractions, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 import { Transition } from '@headlessui/react';
 import { FocusScope } from '@react-aria/focus';
-import { useTheme, ThemeProvider } from '@wise/components-theming';
+import { ThemedLayer } from '@wise/components-theming';
 import { clsx } from 'clsx';
 import { useState } from 'react';
 import { PreventScroll } from '../common/preventScroll/PreventScroll.mjs';
@@ -54,19 +54,12 @@ function Popover({
     getFloatingProps
   } = useInteractions([role, dismiss]);
   const [floatingKey, setFloatingKey] = useState(0);
-  const {
-    theme,
-    screenMode
-  } = useTheme();
   return /*#__PURE__*/jsxs(Fragment, {
     children: [open ? /*#__PURE__*/jsx(PreventScroll, {}) : null, renderTrigger({
       ref: refs.setReference,
       getInteractionProps: getReferenceProps
     }), /*#__PURE__*/jsx(FloatingPortal, {
-      children: /*#__PURE__*/jsx(ThemeProvider, {
-        theme: "personal",
-        screenMode: theme === 'personal' ? screenMode : 'light',
-        isNotRootProvider: true,
+      children: /*#__PURE__*/jsx(ThemedLayer, {
         children: /*#__PURE__*/jsx(Transition, {
           show: open,
           leave: "transition-opacity",

package/build/inputs/_Popover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"_Popover.mjs","sources":["../../src/inputs/_Popover.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  type Placement,\n  shift,\n  size as floatingSize,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\n\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\n\nexport interface PopoverProps {\n  placement?: Placement;\n  open: boolean;\n  renderTrigger: (args: {\n    ref: React.RefCallback<Element>;\n    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n      [key: string]: unknown;\n    };\n  }) => React.ReactNode;\n  title?: string;\n  size?: 'md' | 'lg';\n  padding?: 'none' | 'md';\n  children?: React.ReactNode;\n  onClose?: () => void;\n  onCloseEnd?: () => void;\n}\n\nconst floatingPadding = 16;\n\nexport function Popover({\n  placement,\n  open,\n  renderTrigger,\n  title,\n  size = 'md',\n  padding = 'md',\n  children,\n  onClose,\n  onCloseEnd,\n}: PopoverProps) {\n  const { refs, floatingStyles, context } = useFloating<Element>({\n    placement,\n    middleware: [\n      offset(8),\n      flip({ padding: floatingPadding, crossAxis: false }),\n      shift(),\n      floatingSize({\n        padding: floatingPadding,\n        apply: ({ elements, rects, availableHeight }) => {\n          elements.floating.style.setProperty('--max-height', `${availableHeight}px`);\n          elements.floating.style.setProperty('--width', `${rects.reference.width}px`);\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n    open,\n    onOpenChange: (value) => {\n      if (!value) {\n        onClose?.();\n      }\n    },\n  });\n\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n  const { getReferenceProps, getFloatingProps } = useInteractions([role, dismiss]);\n\n  const [floatingKey, setFloatingKey] = useState(0);\n\n  const { theme, screenMode } = useTheme();\n\n  return (\n    <>\n      {open ? <PreventScroll /> : null}\n      {renderTrigger({\n        ref: refs.setReference,\n        getInteractionProps: getReferenceProps,\n      })}\n\n      <FloatingPortal>\n        <ThemeProvider\n          theme=\"personal\"\n          screenMode={theme === 'personal' ? screenMode : 'light'}\n          isNotRootProvider\n        >\n          <Transition\n            show={open}\n            leave=\"transition-opacity\"\n            leaveTo=\"opacity-0\"\n            beforeEnter={() => {\n              setFloatingKey((prev) => prev + 1);\n            }}\n            afterLeave={onCloseEnd}\n          >\n            <FocusScope>\n              <FloatingFocusManager context={context}>\n                <div\n                  key={floatingKey} // Force inner state invalidation on open\n                  ref={refs.setFloating}\n                  className={clsx('np-popover-v2-container', {\n                    'np-popover-v2-container--size-md': size === 'md',\n                    'np-popover-v2-container--size-lg': size === 'lg',\n                  })}\n                  // eslint-disable-next-line react/forbid-dom-props\n                  style={floatingStyles}\n                  {...getFloatingProps()}\n                >\n                  <div\n                    className={clsx('np-popover-v2', title && 'np-popover-v2--has-title', {\n                      'np-popover-v2--padding-md': padding === 'md',\n                    })}\n                  >\n                    {title ? (\n                      <h2 className=\"np-popover-v2-title np-text-title-body\">{title}</h2>\n                    ) : null}\n                    <div className=\"np-popover-v2-content np-text-body-default\">{children}</div>\n                  </div>\n                </div>\n              </FloatingFocusManager>\n            </FocusScope>\n          </Transition>\n        </ThemeProvider>\n      </FloatingPortal>\n    </>\n  );\n}\n"],"names":["floatingPadding","Popover","placement","open","renderTrigger","title","size","padding","children","onClose","onCloseEnd","refs","floatingStyles","context","useFloating","middleware","offset","flip","crossAxis","shift","floatingSize","apply","elements","rects","availableHeight","floating","style","setProperty","reference","width","whileElementsMounted","autoUpdate","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","isNotRootProvider","Transition","show","leave","leaveTo","beforeEnter","prev","afterLeave","FocusScope","FloatingFocusManager","setFloating","className","clsx"],"mappings":"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"}
+{"version":3,"file":"_Popover.mjs","sources":["../../src/inputs/_Popover.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  size as floatingSize,\n  offset,\n  type Placement,\n  shift,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemedLayer } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\n\nimport { PreventScroll } from '../common/preventScroll/PreventScroll';\n\nexport interface PopoverProps {\n  placement?: Placement;\n  open: boolean;\n  renderTrigger: (args: {\n    ref: React.RefCallback<Element>;\n    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n      [key: string]: unknown;\n    };\n  }) => React.ReactNode;\n  title?: string;\n  size?: 'md' | 'lg';\n  padding?: 'none' | 'md';\n  children?: React.ReactNode;\n  onClose?: () => void;\n  onCloseEnd?: () => void;\n}\n\nconst floatingPadding = 16;\n\nexport function Popover({\n  placement,\n  open,\n  renderTrigger,\n  title,\n  size = 'md',\n  padding = 'md',\n  children,\n  onClose,\n  onCloseEnd,\n}: PopoverProps) {\n  const { refs, floatingStyles, context } = useFloating<Element>({\n    placement,\n    middleware: [\n      offset(8),\n      flip({ padding: floatingPadding, crossAxis: false }),\n      shift(),\n      floatingSize({\n        padding: floatingPadding,\n        apply: ({ elements, rects, availableHeight }) => {\n          elements.floating.style.setProperty('--max-height', `${availableHeight}px`);\n          elements.floating.style.setProperty('--width', `${rects.reference.width}px`);\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n    open,\n    onOpenChange: (value) => {\n      if (!value) {\n        onClose?.();\n      }\n    },\n  });\n\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n  const { getReferenceProps, getFloatingProps } = useInteractions([role, dismiss]);\n\n  const [floatingKey, setFloatingKey] = useState(0);\n\n  return (\n    <>\n      {open ? <PreventScroll /> : null}\n      {renderTrigger({\n        ref: refs.setReference,\n        getInteractionProps: getReferenceProps,\n      })}\n\n      <FloatingPortal>\n        <ThemedLayer>\n          <Transition\n            show={open}\n            leave=\"transition-opacity\"\n            leaveTo=\"opacity-0\"\n            beforeEnter={() => {\n              setFloatingKey((prev) => prev + 1);\n            }}\n            afterLeave={onCloseEnd}\n          >\n            <FocusScope>\n              <FloatingFocusManager context={context}>\n                <div\n                  key={floatingKey} // Force inner state invalidation on open\n                  ref={refs.setFloating}\n                  className={clsx('np-popover-v2-container', {\n                    'np-popover-v2-container--size-md': size === 'md',\n                    'np-popover-v2-container--size-lg': size === 'lg',\n                  })}\n                  // eslint-disable-next-line react/forbid-dom-props\n                  style={floatingStyles}\n                  {...getFloatingProps()}\n                >\n                  <div\n                    className={clsx('np-popover-v2', title && 'np-popover-v2--has-title', {\n                      'np-popover-v2--padding-md': padding === 'md',\n                    })}\n                  >\n                    {title ? (\n                      <h2 className=\"np-popover-v2-title np-text-title-body\">{title}</h2>\n                    ) : null}\n                    <div className=\"np-popover-v2-content np-text-body-default\">{children}</div>\n                  </div>\n                </div>\n              </FloatingFocusManager>\n            </FocusScope>\n          </Transition>\n        </ThemedLayer>\n      </FloatingPortal>\n    </>\n  );\n}\n"],"names":["floatingPadding","Popover","placement","open","renderTrigger","title","size","padding","children","onClose","onCloseEnd","refs","floatingStyles","context","useFloating","middleware","offset","flip","crossAxis","shift","floatingSize","apply","elements","rects","availableHeight","floating","style","setProperty","reference","width","whileElementsMounted","autoUpdate","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemedLayer","Transition","show","leave","leaveTo","beforeEnter","prev","afterLeave","FocusScope","FloatingFocusManager","setFloating","className","clsx"],"mappings":"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"}

package/build/types/dimmer/Dimmer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dimmer.d.ts","sourceRoot":"","sources":["../../../src/dimmer/Dimmer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAC;AAGxF,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,WAAW,EACjB,MAAM,WAAW,CAAC;AAOnB,eAAO,MAAM,cAAc,MAAM,CAAC;AAIlC,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,WAAW,GAAG,cAAc,GAAG,cAAc,CAAC;IAChE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,UAAU,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,eAAe,UAAW,KAAK,SAU3C,CAAC;AAEF,QAAA,MAAM,MAAM,0KAYT,WAAW,gCAmHb,CAAC;AAsBF,eAAO,MAAM,oBAAoB,8BAG9B;IACD,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;CACrB,2FAcA,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,CAAC;;AAElB,wBAAsC"}
+{"version":3,"file":"Dimmer.d.ts","sourceRoot":"","sources":["../../../src/dimmer/Dimmer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAkC,MAAM,OAAO,CAAC;AAG9E,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,WAAW,EACjB,MAAM,WAAW,CAAC;AAOnB,eAAO,MAAM,cAAc,MAAM,CAAC;AAIlC,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,WAAW,GAAG,cAAc,GAAG,cAAc,CAAC;IAChE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,UAAU,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,eAAe,UAAW,KAAK,SAU3C,CAAC;AAEF,QAAA,MAAM,MAAM,0KAYT,WAAW,gCA4Gb,CAAC;AAEF,eAAO,MAAM,oBAAoB,8BAG9B;IACD,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;CACrB,2FAcA,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,CAAC;;AAElB,wBAAsC"}

package/build/types/inputs/_BottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,gBAAgB,+BA6FlB"}
+{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,gBAAgB,+BAuFlB"}

package/build/types/inputs/_Popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_Popover.d.ts","sourceRoot":"","sources":["../../../src/inputs/_Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EAOf,MAAM,oBAAoB,CAAC;AAS5B,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,EAAE,CAAC,IAAI,EAAE;QACpB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAID,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,IAAI,EACJ,aAAa,EACb,KAAK,EACL,IAAW,EACX,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,YAAY,+BAsFd"}
+{"version":3,"file":"_Popover.d.ts","sourceRoot":"","sources":["../../../src/inputs/_Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EAMf,MAAM,oBAAoB,CAAC;AAS5B,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,EAAE,CAAC,IAAI,EAAE;QACpB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAID,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,IAAI,EACJ,aAAa,EACb,KAAK,EACL,IAAW,EACX,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,YAAY,+BAgFd"}

package/build/types/withNextPortal/withNextPortal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withNextPortal.d.ts","sourceRoot":"","sources":["../../../src/withNextPortal/withNextPortal.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACzE,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,WAET,CAAC,wCAQ1B"}
+{"version":3,"file":"withNextPortal.d.ts","sourceRoot":"","sources":["../../../src/withNextPortal/withNextPortal.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACzE,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,WAET,CAAC,wCAgB1B"}

package/build/withNextPortal/withNextPortal.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var componentsTheming = require('@wise/components-theming');
 var React = require('react');
 var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
@@ -10,8 +11,10 @@ function withNextPortalWrapper(Component) {
     React.useEffect(() => {
       setMounted(true);
     }, [setMounted]);
-    return mounted ? /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/jsxRuntime.jsx(Component, {
-      ...props
+    return mounted ? /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/jsxRuntime.jsx(componentsTheming.ThemedLayer, {
+      children: /*#__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 { 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,CAAA;AAE7CC,IAAAA,eAAS,CAAC,MAAK;MACbF,UAAU,CAAC,IAAI,CAAC,CAAA;AAClB,KAAC,EAAE,CAACA,UAAU,CAAC,CAAC,CAAA;AAChB,IAAA,OAAOD,OAAO,gBAAGI,qBAAY,eAACC,cAAA,CAACP,SAAS,EAAA;MAAA,GAAKC,KAAAA;AAAK,KAAI,CAAA,EAAEO,QAAQ,CAACC,IAAI,CAAC,GAAG,IAAI,CAAA;GAC9E,CAAA;AACH;;;;"}
+{"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;;;;"}

package/build/withNextPortal/withNextPortal.mjs

@@ -1,3 +1,4 @@
+import { ThemedLayer } from '@wise/components-theming';
 import { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { jsx } from 'react/jsx-runtime';
@@ -8,8 +9,10 @@ function withNextPortalWrapper(Component) {
     useEffect(() => {
       setMounted(true);
     }, [setMounted]);
-    return mounted ? /*#__PURE__*/createPortal( /*#__PURE__*/jsx(Component, {
-      ...props
+    return mounted ? /*#__PURE__*/createPortal( /*#__PURE__*/jsx(ThemedLayer, {
+      children: /*#__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 { 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,CAAA;AAE7CC,IAAAA,SAAS,CAAC,MAAK;MACbF,UAAU,CAAC,IAAI,CAAC,CAAA;AAClB,KAAC,EAAE,CAACA,UAAU,CAAC,CAAC,CAAA;AAChB,IAAA,OAAOD,OAAO,gBAAGI,YAAY,eAACC,GAAA,CAACP,SAAS,EAAA;MAAA,GAAKC,KAAAA;AAAK,KAAI,CAAA,EAAEO,QAAQ,CAACC,IAAI,CAAC,GAAG,IAAI,CAAA;GAC9E,CAAA;AACH;;;;"}
+{"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;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-a04dfbe",
+  "version": "0.0.0-experimental-57b6bbd",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,14 +92,14 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-a04dfbe",
-    "@wise/components-theming": "1.6.1"
+    "@transferwise/neptune-css": "14.22.0",
+    "@wise/components-theming": "0.0.0-experimental-57b6bbd"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",
-    "@transferwise/neptune-css": "0.0.0-experimental-a04dfbe",
+    "@transferwise/neptune-css": "^14.9.6",
     "@wise/art": "^2.16",
-    "@wise/components-theming": "^1.0.0",
+    "@wise/components-theming": "0.0.0-experimental-57b6bbd",
     "react": ">=18",
     "react-dom": ">=18",
     "react-intl": "^5.10.0 || ^6"

package/src/button/Button.story.tsx

@@ -246,6 +246,13 @@ const meta: Meta<typeof Button> = {
         disable: true,
       },
     },
+    children: {
+      table: {
+        type: {
+          summary: 'ReactNode',
+        },
+      },
+    },
   },
   args: {
     v2: true,
@@ -302,6 +309,7 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
     onMouseLeave: { table: { disable: true } },
     ...previewArgTypes,
   },
+  tags: ['!autodocs'],
 };
 
 /**

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

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

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

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

package/src/dimmer/Dimmer.tsx

@@ -1,6 +1,5 @@
-import { ThemeProvider, useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
-import { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { MouseEvent, ReactNode, useCallback, useEffect, useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
 import {
@@ -59,7 +58,6 @@ const Dimmer = ({
   onClose,
   onExited: handleExited,
 }: DimmerProps) => {
-  const [hasNotExited, setHasNotExited] = useState(false);
   const dimmerReference = useRef<HTMLDivElement>(null);
 
   const closeOnClick = (event: MouseEvent<HTMLDivElement>) => {
@@ -91,15 +89,11 @@ const Dimmer = ({
   );
 
   const onEnter = () => {
-    setHasNotExited(true);
-
     if (dimmerReference.current) {
       dimmerManager.add(dimmerReference.current);
     }
   };
   const onExited = () => {
-    setHasNotExited(false);
-
     if (dimmerReference.current) {
       dimmerManager.remove(dimmerReference.current);
     }
@@ -122,76 +116,54 @@ const Dimmer = ({
   }, [handleKeyDown, open]);
 
   return (
-    <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>
+    <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}
+          >
             <div
-              ref={dimmerReference}
               className={clsx(
-                'dimmer',
-                { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },
-                className,
+                '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',
+                  },
+                ],
               )}
-              role="presentation"
-              onClick={handleClick}
             >
-              <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>
+              {children}
             </div>
-          </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}</>
+          </div>
+        </FocusBoundary>
+      </DimmerContentWrapper>
+    </CSSTransition>
   );
 };
 

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

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 { ThemeProvider, useTheme } from '@wise/components-theming';
+import { ThemedLayer } from '@wise/components-theming';
 import { clsx } from 'clsx';
 import { useState } from 'react';
 
@@ -79,8 +79,6 @@ export function Popover({
 
   const [floatingKey, setFloatingKey] = useState(0);
 
-  const { theme, screenMode } = useTheme();
-
   return (
     <>
       {open ? <PreventScroll /> : null}
@@ -90,11 +88,7 @@ export function Popover({
       })}
 
       <FloatingPortal>
-        <ThemeProvider
-          theme="personal"
-          screenMode={theme === 'personal' ? screenMode : 'light'}
-          isNotRootProvider
-        >
+        <ThemedLayer>
           <Transition
             show={open}
             leave="transition-opacity"
@@ -131,7 +125,7 @@ export function Popover({
               </FloatingFocusManager>
             </FocusScope>
           </Transition>
-        </ThemeProvider>
+        </ThemedLayer>
       </FloatingPortal>
     </>
   );

package/src/withNextPortal/withNextPortal.tsx

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