@transferwise/components 45.18.0 → 45.19.1

package/build/index.esm.js

@@ -1506,7 +1506,6 @@ const FocusBoundary = ({
     })
   });
 };
-var FocusBoundary$1 = FocusBoundary;
 
 function withNextPortalWrapper(Component) {
   return function (props) {
@@ -1648,7 +1647,7 @@ const Dimmer = ({
       onExited: onExited,
       children: /*#__PURE__*/jsx(DimmerContentWrapper, {
         scrollBody: !transparent,
-        children: /*#__PURE__*/jsx(FocusBoundary$1, {
+        children: /*#__PURE__*/jsx(FocusBoundary, {
           children: /*#__PURE__*/jsx("div", {
             ref: dimmerReference,
             className: classNames('dimmer', {
@@ -6262,10 +6261,10 @@ function formControlClassNameBase({
   return classNames('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'
   });
 }
 
@@ -6411,43 +6410,47 @@ function BottomSheet({
             children: /*#__PURE__*/jsx("div", {
               className: "np-bottom-sheet-v2-backdrop"
             })
-          }), /*#__PURE__*/jsx(FloatingFocusManager, {
-            context: context,
-            initialFocus: initialFocusRef,
-            children: /*#__PURE__*/jsx("div", {
-              className: "np-bottom-sheet-v2",
-              children: /*#__PURE__*/jsx(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__*/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
+          }), /*#__PURE__*/jsx(FocusBoundary, {
+            children: /*#__PURE__*/jsx(FloatingFocusManager, {
+              context: context,
+              initialFocus: initialFocusRef,
+              guards: false,
+              modal: false,
+              children: /*#__PURE__*/jsx("div", {
+                className: "np-bottom-sheet-v2",
+                children: /*#__PURE__*/jsx(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__*/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)
+                })
               })
             })
           })]
@@ -6540,36 +6543,40 @@ function Popover({
         theme: theme,
         screenMode: screenMode,
         isNotRootProvider: true,
-        children: /*#__PURE__*/jsx(FloatingFocusManager, {
-          context: context,
-          children: /*#__PURE__*/jsx(Transition, {
-            show: open,
-            leave: "transition-opacity",
-            leaveTo: "opacity-0",
-            beforeEnter: () => {
-              setFloatingKey(prev => prev + 1);
-            },
-            children: /*#__PURE__*/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__*/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(Transition, {
+          show: open,
+          leave: "transition-opacity",
+          leaveTo: "opacity-0",
+          beforeEnter: () => {
+            setFloatingKey(prev => prev + 1);
+          },
+          children: /*#__PURE__*/jsx(FocusBoundary, {
+            children: /*#__PURE__*/jsx(FloatingFocusManager, {
+              context: context,
+              guards: false,
+              modal: false,
+              children: /*#__PURE__*/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__*/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)
+            })
           })
         })
       })
@@ -6626,6 +6633,7 @@ const defaultRenderTrigger = ({
   placeholderShown,
   clear,
   disabled,
+  size,
   className
 }) => /*#__PURE__*/jsx(InputGroup, {
   addonEnd: {
@@ -6653,6 +6661,7 @@ const defaultRenderTrigger = ({
   className: className,
   children: /*#__PURE__*/jsx(SelectInputTriggerButton, {
     as: ButtonInput,
+    size: size,
     children: placeholderShown ? /*#__PURE__*/jsxs("span", {
       className: "np-select-input-placeholder",
       children: [" ", content]
@@ -6686,6 +6695,7 @@ function SelectInput({
   filterable,
   filterPlaceholder,
   disabled,
+  size = 'md',
   className,
   onChange,
   onClear
@@ -6743,7 +6753,8 @@ function SelectInput({
               });
             } : undefined,
             disabled: uiDisabled,
-            className: classNames(className, 'np-text-body-large')
+            size,
+            className
           })
         }),
         initialFocusRef: controllerRef,
@@ -6989,7 +7000,7 @@ function SelectInputOptionContent({
 }) {
   const withinTrigger = useContext(SelectInputOptionContentWithinTriggerContext);
   return /*#__PURE__*/jsxs("div", {
-    className: "np-select-input-option-content-container np-text-body-large",
+    className: classNames('np-select-input-option-content-container', (note || description) && 'np-text-body-large'),
     children: [icon ? /*#__PURE__*/jsx("div", {
       className: classNames('np-select-input-option-content-icon', !withinTrigger && 'np-select-input-option-content-icon--not-within-trigger'),
       children: icon
@@ -6998,7 +7009,7 @@ function SelectInputOptionContent({
       children: [/*#__PURE__*/jsxs("div", {
         className: classNames('np-select-input-option-content-text-line-1', withinTrigger && 'np-select-input-option-content-text-within-trigger'),
         children: [/*#__PURE__*/jsx("h4", {
-          className: "d-inline np-text-body-large",
+          className: "np-select-input-option-content-text-primary d-inline",
           children: title
         }), note ? /*#__PURE__*/jsx("span", {
           className: "np-select-input-option-content-text-secondary np-text-body-default",
@@ -8109,7 +8120,6 @@ function Select({
       type: null,
       priority: null,
       disabled: disabled,
-      role: "combobox",
       "aria-controls": listboxId,
       "aria-expanded": open,
       "aria-autocomplete": "none",
@@ -15130,5 +15140,5 @@ const translations = {
   zh
 };
 
-export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron$1 as Chevron, Chip, Chips, CircularButton$1 as CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput$1 as DateInput, DateLookup$1 as DateLookup, DateMode, Decision$1 as Decision, Presentation as DecisionPresentation, Type as DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat$1 as InputWithDisplayFormat, InstructionsList$1 as InstructionsList, LanguageProvider, Layout$1 as Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown$1 as Markdown, MarkdownNodeType, Modal, Money$1 as Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList$1 as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput$1 as PhoneNumberInput, Popover$2 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider$1 as Provider, RTL_LANGUAGES, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioOption$1 as RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, Select, SelectInput, SelectInputOptionContent, Sentiment, Size, SlidingPanel$1 as SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider$1 as SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat$1 as TextareaWithDisplayFormat, Theme, Title, Tooltip$1 as Tooltip, Type$1 as Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useSnackbar };
+export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron$1 as Chevron, Chip, Chips, CircularButton$1 as CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput$1 as DateInput, DateLookup$1 as DateLookup, DateMode, Decision$1 as Decision, Presentation as DecisionPresentation, Type as DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat$1 as InputWithDisplayFormat, InstructionsList$1 as InstructionsList, LanguageProvider, Layout$1 as Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown$1 as Markdown, MarkdownNodeType, Modal, Money$1 as Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList$1 as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput$1 as PhoneNumberInput, Popover$2 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider$1 as Provider, RTL_LANGUAGES, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioOption$1 as RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel$1 as SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider$1 as SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat$1 as TextareaWithDisplayFormat, Theme, Title, Tooltip$1 as Tooltip, Type$1 as Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useSnackbar };
 //# sourceMappingURL=index.esm.js.map