@transferwise/components 45.18.0 → 45.19.0

package/build/index.js

@@ -1540,7 +1540,6 @@ const FocusBoundary = ({
     })
   });
 };
-var FocusBoundary$1 = FocusBoundary;
 
 function withNextPortalWrapper(Component) {
   return function (props) {
@@ -1682,7 +1681,7 @@ const Dimmer = ({
       onExited: onExited,
       children: /*#__PURE__*/jsxRuntime.jsx(DimmerContentWrapper, {
         scrollBody: !transparent,
-        children: /*#__PURE__*/jsxRuntime.jsx(FocusBoundary$1, {
+        children: /*#__PURE__*/jsxRuntime.jsx(FocusBoundary, {
           children: /*#__PURE__*/jsxRuntime.jsx("div", {
             ref: dimmerReference,
             className: classNames__default.default('dimmer', {
@@ -6296,10 +6295,10 @@ function formControlClassNameBase({
   return classNames__default.default('form-control',
   // TODO: Deprecate
   'np-form-control', {
-    'np-form-control--size-auto np-text-body-large': size === 'auto',
-    'np-form-control--size-sm np-text-body-default': size === 'sm',
-    'np-form-control--size-md np-text-body-large': size === 'md',
-    'np-form-control--size-lg np-text-title-subsection': size === 'lg'
+    'np-form-control--size-auto': size === 'auto',
+    'np-form-control--size-sm': size === 'sm',
+    'np-form-control--size-md': size === 'md',
+    'np-form-control--size-lg': size === 'lg'
   });
 }
 
@@ -6445,43 +6444,47 @@ function BottomSheet({
             children: /*#__PURE__*/jsxRuntime.jsx("div", {
               className: "np-bottom-sheet-v2-backdrop"
             })
-          }), /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
-            context: context,
-            initialFocus: initialFocusRef,
-            children: /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "np-bottom-sheet-v2",
-              children: /*#__PURE__*/jsxRuntime.jsx(react$1.Transition.Child, {
-                className: "np-bottom-sheet-v2-content",
-                enter: "np-bottom-sheet-v2-content--enter",
-                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__*/jsxRuntime.jsxs("div", {
-                  // Force inner state invalidation on open
-                  ref: refs.setFloating,
-                  className: "np-bottom-sheet-v2-content-inner-container",
-                  ...getFloatingProps(),
-                  children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-                    className: "np-bottom-sheet-v2-header",
-                    children: /*#__PURE__*/jsxRuntime.jsx(CloseButton, {
-                      size: exports.Size.SMALL,
-                      onClick: () => {
-                        onClose?.();
-                      }
-                    })
-                  }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-                    className: classNames__default.default('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__*/jsxRuntime.jsx("h2", {
-                      className: "np-bottom-sheet-v2-title np-text-title-body",
-                      children: title
-                    }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
-                      className: "np-bottom-sheet-v2-body np-text-body-default",
-                      children: children
+          }), /*#__PURE__*/jsxRuntime.jsx(FocusBoundary, {
+            children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
+              context: context,
+              initialFocus: initialFocusRef,
+              guards: false,
+              modal: false,
+              children: /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "np-bottom-sheet-v2",
+                children: /*#__PURE__*/jsxRuntime.jsx(react$1.Transition.Child, {
+                  className: "np-bottom-sheet-v2-content",
+                  enter: "np-bottom-sheet-v2-content--enter",
+                  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__*/jsxRuntime.jsxs("div", {
+                    // Force inner state invalidation on open
+                    ref: refs.setFloating,
+                    className: "np-bottom-sheet-v2-content-inner-container",
+                    ...getFloatingProps(),
+                    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                      className: "np-bottom-sheet-v2-header",
+                      children: /*#__PURE__*/jsxRuntime.jsx(CloseButton, {
+                        size: exports.Size.SMALL,
+                        onClick: () => {
+                          onClose?.();
+                        }
+                      })
+                    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                      className: classNames__default.default('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__*/jsxRuntime.jsx("h2", {
+                        className: "np-bottom-sheet-v2-title np-text-title-body",
+                        children: title
+                      }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
+                        className: "np-bottom-sheet-v2-body np-text-body-default",
+                        children: children
+                      })]
                     })]
-                  })]
-                }, floatingKey)
+                  }, floatingKey)
+                })
               })
             })
           })]
@@ -6574,36 +6577,40 @@ function Popover({
         theme: theme,
         screenMode: screenMode,
         isNotRootProvider: true,
-        children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
-          context: context,
-          children: /*#__PURE__*/jsxRuntime.jsx(react$1.Transition, {
-            show: open,
-            leave: "transition-opacity",
-            leaveTo: "opacity-0",
-            beforeEnter: () => {
-              setFloatingKey(prev => prev + 1);
-            },
-            children: /*#__PURE__*/jsxRuntime.jsx("div", {
-              // Force inner state invalidation on open
-              ref: refs.setFloating,
-              className: "np-popover-v2-container"
-              // eslint-disable-next-line react/forbid-dom-props
-              ,
-              style: floatingStyles,
-              ...getFloatingProps(),
-              children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-                className: classNames__default.default('np-popover-v2', title && 'np-popover-v2--has-title', {
-                  'np-popover-v2--padding-md': padding === 'md'
-                }),
-                children: [title ? /*#__PURE__*/jsxRuntime.jsx("h2", {
-                  className: "np-popover-v2-title np-text-title-body",
-                  children: title
-                }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
-                  className: "np-popover-v2-content np-text-body-default",
-                  children: children
-                })]
-              })
-            }, floatingKey)
+        children: /*#__PURE__*/jsxRuntime.jsx(react$1.Transition, {
+          show: open,
+          leave: "transition-opacity",
+          leaveTo: "opacity-0",
+          beforeEnter: () => {
+            setFloatingKey(prev => prev + 1);
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(FocusBoundary, {
+            children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
+              context: context,
+              guards: false,
+              modal: false,
+              children: /*#__PURE__*/jsxRuntime.jsx("div", {
+                // Force inner state invalidation on open
+                ref: refs.setFloating,
+                className: "np-popover-v2-container"
+                // eslint-disable-next-line react/forbid-dom-props
+                ,
+                style: floatingStyles,
+                ...getFloatingProps(),
+                children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: classNames__default.default('np-popover-v2', title && 'np-popover-v2--has-title', {
+                    'np-popover-v2--padding-md': padding === 'md'
+                  }),
+                  children: [title ? /*#__PURE__*/jsxRuntime.jsx("h2", {
+                    className: "np-popover-v2-title np-text-title-body",
+                    children: title
+                  }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
+                    className: "np-popover-v2-content np-text-body-default",
+                    children: children
+                  })]
+                })
+              }, floatingKey)
+            })
           })
         })
       })
@@ -6660,6 +6667,7 @@ const defaultRenderTrigger = ({
   placeholderShown,
   clear,
   disabled,
+  size,
   className
 }) => /*#__PURE__*/jsxRuntime.jsx(InputGroup, {
   addonEnd: {
@@ -6687,6 +6695,7 @@ const defaultRenderTrigger = ({
   className: className,
   children: /*#__PURE__*/jsxRuntime.jsx(SelectInputTriggerButton, {
     as: ButtonInput,
+    size: size,
     children: placeholderShown ? /*#__PURE__*/jsxRuntime.jsxs("span", {
       className: "np-select-input-placeholder",
       children: [" ", content]
@@ -6720,6 +6729,7 @@ function SelectInput({
   filterable,
   filterPlaceholder,
   disabled,
+  size = 'md',
   className,
   onChange,
   onClear
@@ -6777,7 +6787,8 @@ function SelectInput({
               });
             } : undefined,
             disabled: uiDisabled,
-            className: classNames__default.default(className, 'np-text-body-large')
+            size,
+            className
           })
         }),
         initialFocusRef: controllerRef,
@@ -7023,7 +7034,7 @@ function SelectInputOptionContent({
 }) {
   const withinTrigger = React.useContext(SelectInputOptionContentWithinTriggerContext);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "np-select-input-option-content-container np-text-body-large",
+    className: classNames__default.default('np-select-input-option-content-container', (note || description) && 'np-text-body-large'),
     children: [icon ? /*#__PURE__*/jsxRuntime.jsx("div", {
       className: classNames__default.default('np-select-input-option-content-icon', !withinTrigger && 'np-select-input-option-content-icon--not-within-trigger'),
       children: icon
@@ -7032,7 +7043,7 @@ function SelectInputOptionContent({
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: classNames__default.default('np-select-input-option-content-text-line-1', withinTrigger && 'np-select-input-option-content-text-within-trigger'),
         children: [/*#__PURE__*/jsxRuntime.jsx("h4", {
-          className: "d-inline np-text-body-large",
+          className: "np-select-input-option-content-text-primary d-inline",
           children: title
         }), note ? /*#__PURE__*/jsxRuntime.jsx("span", {
           className: "np-select-input-option-content-text-secondary np-text-body-default",
@@ -15238,6 +15249,7 @@ exports.Section = Section;
 exports.Select = Select;
 exports.SelectInput = SelectInput;
 exports.SelectInputOptionContent = SelectInputOptionContent;
+exports.SelectInputTriggerButton = SelectInputTriggerButton;
 exports.SlidingPanel = SlidingPanel$1;
 exports.SnackbarConsumer = SnackbarConsumer;
 exports.SnackbarContext = SnackbarContext;