@transferwise/components 0.0.0-experimental-5bcac43 → 0.0.0-experimental-14afc1f

package/build/index.mjs

@@ -13,11 +13,11 @@ import { Transition, Listbox } from '@headlessui/react';
 import mergeProps from 'merge-props';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingFocusManager, offset, flip, shift, size, autoUpdate } from '@floating-ui/react';
+import { FocusScope } from '@react-aria/focus';
 import { usePreventScroll } from '@react-aria/overlays';
 import { CSSTransition } from 'react-transition-group';
 import { isUndefined, isNumber, isEmpty, isNull } from '@transferwise/neptune-validation';
 import { createPortal } from 'react-dom';
-import { FocusScope } from '@react-aria/focus';
 import { usePopper } from 'react-popper';
 import throttle from 'lodash.throttle';
 import { Flag, Illustration } from '@wise/art';
@@ -4551,15 +4551,14 @@ const Logo = ({
 }) => {
   const LogoSm = svgPaths[`WISE_FLAG${type === LogoType.WISE_PLATFORM ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];
   const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
-  const screenMd = useScreenSize(Breakpoint.MEDIUM);
   return /*#__PURE__*/jsxs("span", {
     "aria-label": type === LogoType.WISE ? 'Wise' : 'Wise Business' | type === LogoType.WISE_PLATFORM ? 'Wise Platform' : 'Wise Business',
     role: "img",
     className: classNames(className, 'np-logo'),
-    children: [!screenMd && /*#__PURE__*/jsx(LogoSm, {
-      className: "np-logo-svg"
-    }), screenMd && /*#__PURE__*/jsx(LogoMd, {
-      className: "np-logo-svg"
+    children: [/*#__PURE__*/jsx(LogoSm, {
+      className: "np-logo-svg np-logo-svg--size-sm"
+    }), /*#__PURE__*/jsx(LogoMd, {
+      className: "np-logo-svg np-logo-svg--size-md"
     })]
   });
 };
@@ -5490,35 +5489,37 @@ function BottomSheet({
               enterFrom: "np-bottom-sheet-v2-content--enter-from",
               leave: "np-bottom-sheet-v2-content--leave",
               leaveTo: "np-bottom-sheet-v2-content--leave-to",
-              children: /*#__PURE__*/jsx(FloatingFocusManager, {
-                context: context,
-                initialFocus: initialFocusRef,
-                children: /*#__PURE__*/jsxs("div", {
-                  // Force inner state invalidation on open
-                  ref: refs.setFloating,
-                  className: "np-bottom-sheet-v2-content-inner-container",
-                  ...getFloatingProps(),
-                  children: [/*#__PURE__*/jsx("div", {
-                    className: "np-bottom-sheet-v2-header",
-                    children: /*#__PURE__*/jsx(CloseButton, {
-                      size: Size.SMALL,
-                      onClick: () => {
-                        onClose?.();
-                      }
-                    })
-                  }), /*#__PURE__*/jsxs("div", {
-                    className: classNames('np-bottom-sheet-v2-content-inner', title && 'np-bottom-sheet-v2-content-inner--has-title', {
-                      'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md'
-                    }),
-                    children: [title ? /*#__PURE__*/jsx("h2", {
-                      className: "np-bottom-sheet-v2-title np-text-title-body",
-                      children: title
-                    }) : null, /*#__PURE__*/jsx("div", {
-                      className: "np-bottom-sheet-v2-body np-text-body-default",
-                      children: children
+              children: /*#__PURE__*/jsx(FocusScope, {
+                children: /*#__PURE__*/jsx(FloatingFocusManager, {
+                  context: context,
+                  initialFocus: initialFocusRef,
+                  children: /*#__PURE__*/jsxs("div", {
+                    // Force inner state invalidation on open
+                    ref: refs.setFloating,
+                    className: "np-bottom-sheet-v2-content-inner-container",
+                    ...getFloatingProps(),
+                    children: [/*#__PURE__*/jsx("div", {
+                      className: "np-bottom-sheet-v2-header",
+                      children: /*#__PURE__*/jsx(CloseButton, {
+                        size: Size.SMALL,
+                        onClick: () => {
+                          onClose?.();
+                        }
+                      })
+                    }), /*#__PURE__*/jsxs("div", {
+                      className: classNames('np-bottom-sheet-v2-content-inner', title && 'np-bottom-sheet-v2-content-inner--has-title', {
+                        'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md'
+                      }),
+                      children: [title ? /*#__PURE__*/jsx("h2", {
+                        className: "np-bottom-sheet-v2-title np-text-title-body",
+                        children: title
+                      }) : null, /*#__PURE__*/jsx("div", {
+                        className: "np-bottom-sheet-v2-body np-text-body-default",
+                        children: children
+                      })]
                     })]
-                  })]
-                }, floatingKey)
+                  }, floatingKey)
+                })
               })
             })
           })]
@@ -5619,32 +5620,34 @@ function Popover({
             setFloatingKey(prev => prev + 1);
           },
           afterLeave: onCloseEnd,
-          children: /*#__PURE__*/jsx(FloatingFocusManager, {
-            context: context,
-            children: /*#__PURE__*/jsx("div", {
-              // Force inner state invalidation on open
-              ref: refs.setFloating,
-              className: classNames('np-popover-v2-container', {
-                'np-popover-v2-container--size-md': size$1 === 'md',
-                'np-popover-v2-container--size-lg': size$1 === 'lg'
-              })
-              // eslint-disable-next-line react/forbid-dom-props
-              ,
-              style: floatingStyles,
-              ...getFloatingProps(),
-              children: /*#__PURE__*/jsxs("div", {
-                className: classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
-                  'np-popover-v2--padding-md': padding === 'md'
-                }),
-                children: [title ? /*#__PURE__*/jsx("h2", {
-                  className: "np-popover-v2-title np-text-title-body",
-                  children: title
-                }) : null, /*#__PURE__*/jsx("div", {
-                  className: "np-popover-v2-content np-text-body-default",
-                  children: children
-                })]
-              })
-            }, floatingKey)
+          children: /*#__PURE__*/jsx(FocusScope, {
+            children: /*#__PURE__*/jsx(FloatingFocusManager, {
+              context: context,
+              children: /*#__PURE__*/jsx("div", {
+                // Force inner state invalidation on open
+                ref: refs.setFloating,
+                className: classNames('np-popover-v2-container', {
+                  'np-popover-v2-container--size-md': size$1 === 'md',
+                  'np-popover-v2-container--size-lg': size$1 === 'lg'
+                })
+                // eslint-disable-next-line react/forbid-dom-props
+                ,
+                style: floatingStyles,
+                ...getFloatingProps(),
+                children: /*#__PURE__*/jsxs("div", {
+                  className: classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
+                    'np-popover-v2--padding-md': padding === 'md'
+                  }),
+                  children: [title ? /*#__PURE__*/jsx("h2", {
+                    className: "np-popover-v2-title np-text-title-body",
+                    children: title
+                  }) : null, /*#__PURE__*/jsx("div", {
+                    className: "np-popover-v2-content np-text-body-default",
+                    children: children
+                  })]
+                })
+              }, floatingKey)
+            })
           })
         })
       })