@transferwise/components 45.14.2 → 45.15.0

package/build/index.js

@@ -14,6 +14,11 @@ var reactDom = require('react-dom');
 var neptuneValidation = require('@transferwise/neptune-validation');
 var mergeRefs = require('react-merge-refs');
 var reactPopper = require('react-popper');
+var react$1 = require('@headlessui/react');
+var reactId = require('@radix-ui/react-id');
+var shim = require('use-sync-external-store/shim');
+var react = require('@floating-ui/react');
+var overlays = require('@react-aria/overlays');
 var art = require('@wise/art');
 var clamp$2 = require('lodash.clamp');
 var debounce = require('lodash.debounce');
@@ -2013,7 +2018,7 @@ const MOVE_OFFSET_THRESHOLD = 50;
  * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet
  *
  */
-const BottomSheet = props => {
+const BottomSheet$1 = props => {
   const bottomSheetReference = React.useRef(null);
   const topBarReference = React.useRef(null);
   const contentReference = React.useRef(null);
@@ -2167,7 +2172,7 @@ const BottomSheet = props => {
     })
   });
 };
-var BottomSheet$1 = BottomSheet;
+var BottomSheet$2 = BottomSheet$1;
 
 const typeClassMap$1 = {
   [exports.ControlType.ACCENT]: 'btn-accent',
@@ -3194,7 +3199,7 @@ const ResponsivePanel = /*#__PURE__*/React.forwardRef(({
     isMobile
   } = useLayout();
   if (isMobile) {
-    return /*#__PURE__*/jsxRuntime.jsx(BottomSheet$1, {
+    return /*#__PURE__*/jsxRuntime.jsx(BottomSheet$2, {
       open: open,
       className: className,
       onClose: onClose,
@@ -4275,21 +4280,14 @@ const Tile = ({
   title
 }) => {
   const isSmall = size === exports.Size.SMALL;
-  const {
-    isModern
-  } = componentsTheming.useTheme();
   const Element = href ? 'a' : 'button';
   return /*#__PURE__*/jsxRuntime.jsxs(Element, {
     className: classNames__default.default('decision', 'flex-column', 'np-tile', 'text-no-decoration', 'text-xs-center', className, {
-      'p-a-3': !isSmall && isModern,
-      'p-y-5 p-x-4': !isSmall && !isModern,
-      'p-a-2': isSmall,
-      'np-tile--small': isSmall,
-      disabled
-    }),
+      'p-a-3': !isSmall,
+      'p-a-2 np-tile--small': isSmall
+    }, disabled && 'disabled'),
     href: href,
     target: target,
-    "aria-label": title,
     onClick: disabled ? null : onClick,
     onKeyDown: disabled ? null : ({
       key
@@ -4305,15 +4303,12 @@ const Tile = ({
       type: exports.Typography.TITLE_SUBSECTION,
       className: classNames__default.default(isSmall ? 'm-t-1' : 'm-t-2'),
       children: title
-    }), isModern && description && /*#__PURE__*/jsxRuntime.jsx(Body, {
+    }), description ? /*#__PURE__*/jsxRuntime.jsx(Body, {
       as: "span",
       type: exports.Typography.BODY_DEFAULT,
       className: "m-t-1",
       children: description
-    }), !isModern && description && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "np-tile__description",
-      children: description
-    })]
+    }) : null]
   });
 };
 Tile.propTypes = {
@@ -5326,14 +5321,6 @@ LogoWise.defaultProps = {
   height: "24",
   fill: "none"
 };
-const baseUrl = 'https://wise.com/public-resources/assets/logos/wise/';
-const logoPaths = {
-  WISE: 'brand_logo.svg',
-  WISE_BUSINESS: 'brand_logo_business.svg',
-  WISE_INVERSE: 'brand_logo_inverse.svg',
-  WISE_BUSINESS_INVERSE: 'brand_logo_business_inverse.svg',
-  WISE_FLAG: 'brand_flag.svg'
-};
 const svgPaths = {
   WISE: LogoWise,
   WISE_BUSINESS: LogoWise,
@@ -5347,21 +5334,14 @@ const Logo = ({
   inverse,
   type
 }) => {
-  const {
-    isModern
-  } = componentsTheming.useTheme();
   const [clientWidth] = useClientWidth({
     ref: isServerSide() ? undefined : window
   });
   const isSmall = clientWidth < exports.Breakpoint.SMALL;
-  const path = isSmall ? logoPaths['WISE_FLAG'] : logoPaths[`${type}${inverse ? '_INVERSE' : ''}`];
   const LogoSvg = isSmall ? svgPaths[`WISE_FLAG${inverse ? '_INVERSE' : ''}`] : svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
-  return isModern ? /*#__PURE__*/jsxRuntime.jsx(LogoSvg, {
-    className: "np-logo-svg"
-  }) : /*#__PURE__*/jsxRuntime.jsx("img", {
-    className: classNames__default.default('np-logo', className),
-    alt: type === exports.LogoType.WISE ? 'Wise' : 'Wise business',
-    src: `${baseUrl}${path}`
+  return /*#__PURE__*/jsxRuntime.jsx(LogoSvg, {
+    className: classNames__default.default('np-logo-svg', className),
+    alt: type === exports.LogoType.WISE ? 'Wise' : 'Wise business'
   });
 };
 Logo.propTypes = {
@@ -5533,13 +5513,12 @@ const Stepper = ({
       children: /*#__PURE__*/jsxRuntime.jsx("small", {
         children: step.label
       })
-    }) : /*#__PURE__*/jsxRuntime.jsx(Body, {
-      as: "span",
-      className: "tw-stepper__step-label small",
+    }) : /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "tw-stepper__step-label",
       children: step.label
     });
     return /*#__PURE__*/jsxRuntime.jsx("li", {
-      className: classNames__default.default('hidden-xs', 'tw-stepper__step', active && 'tw-stepper__step--active', clickable && 'tw-stepper__step--clickable', step.hoverLabel && 'tw-stepper__step--has-tooltip'),
+      className: classNames__default.default('hidden-xs', 'tw-stepper__step', active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default', clickable && 'tw-stepper__step--clickable', step.hoverLabel && 'tw-stepper__step--has-tooltip'),
       style: isRTL ? {
         right: `${index * stepPercentage * 100}%`
       } : {
@@ -5872,7 +5851,7 @@ const Modal = ({
   });
 };
 
-const Popover = ({
+const Popover$1 = ({
   children,
   className,
   content,
@@ -5926,12 +5905,12 @@ const logActionRequired = ({
 }) => {
   logActionRequiredIf(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${deprecatedPlacements[preferredPlacement]} instead.`, deprecatedPlacements[preferredPlacement]);
 };
-Popover.defaultProps = {
+Popover$1.defaultProps = {
   className: undefined,
   preferredPlacement: exports.Position.RIGHT,
   title: undefined
 };
-Popover.propTypes = {
+Popover$1.propTypes = {
   children: PropTypes__default.default.node.isRequired,
   className: PropTypes__default.default.string,
   content: PropTypes__default.default.node.isRequired,
@@ -5948,7 +5927,7 @@ const deprecatedPlacements = {
   [exports.Position.LEFT_TOP]: exports.Position.TOP,
   [exports.Position.RIGHT_TOP]: exports.Position.TOP
 };
-var Popover$1 = Popover;
+var Popover$2 = Popover$1;
 
 const Info = ({
   className = undefined,
@@ -5990,7 +5969,7 @@ const Info = ({
         title: title,
         onClose: () => setOpen(false)
       })]
-    }) : /*#__PURE__*/jsxRuntime.jsx(Popover$1, {
+    }) : /*#__PURE__*/jsxRuntime.jsx(Popover$2, {
       content: content,
       preferredPlacement: exports.Position.BOTTOM,
       title: title,
@@ -6179,11 +6158,12 @@ function formControlClassNameBase({
     '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--shape-rectangle');
+  });
 }
 
 const Input = /*#__PURE__*/React.forwardRef(function Input({
   size = 'auto',
+  shape = 'rectangle',
   className,
   ...restProps
 }, reference) {
@@ -6192,7 +6172,10 @@ const Input = /*#__PURE__*/React.forwardRef(function Input({
     ref: reference,
     className: classNames__default.default(className, formControlClassNameBase({
       size
-    }))
+    }), 'np-input', {
+      'np-input--shape-rectangle': shape === 'rectangle',
+      'np-input--shape-pill': shape === 'pill'
+    })
     // eslint-disable-next-line react/forbid-dom-props
     ,
     style: inputPaddings,
@@ -6200,6 +6183,653 @@ const Input = /*#__PURE__*/React.forwardRef(function Input({
   });
 });
 
+const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
+  shape = 'pill',
+  disabled,
+  className,
+  ...restProps
+}, ref) {
+  return /*#__PURE__*/jsxRuntime.jsx(InputGroup, {
+    addonStart: {
+      content: /*#__PURE__*/jsxRuntime.jsx(icons.Search, {
+        size: 24
+      }),
+      initialContentWidth: 24
+    },
+    disabled: disabled,
+    className: className,
+    children: /*#__PURE__*/jsxRuntime.jsx(Input, {
+      ref: ref,
+      role: "searchbox",
+      inputMode: "search",
+      shape: shape,
+      ...restProps
+    })
+  });
+});
+
+function useMedia(query) {
+  return shim.useSyncExternalStore(onStoreChange => {
+    const mediaQueryList = window.matchMedia(query);
+    mediaQueryList.addEventListener('change', onStoreChange);
+    return () => {
+      mediaQueryList.removeEventListener('change', onStoreChange);
+    };
+  }, () => typeof window !== 'undefined' ? window.matchMedia(query).matches : undefined, () => undefined);
+}
+
+function useScreenSize(size) {
+  return useMedia(`(min-width: ${size}px)`);
+}
+
+function wrapInFragment(value) {
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: value
+  });
+}
+
+function PreventScroll() {
+  overlays.usePreventScroll();
+  return null;
+}
+
+function BottomSheet({
+  open,
+  renderTrigger,
+  title,
+  initialFocusRef,
+  padding = 'md',
+  children,
+  onClose
+}) {
+  const {
+    refs,
+    context
+  } = react.useFloating({
+    open,
+    onOpenChange: value => {
+      if (!value) {
+        onClose?.();
+      }
+    }
+  });
+  const dismiss = react.useDismiss(context, {
+    outsidePressEvent: 'mousedown'
+  });
+  const role = react.useRole(context);
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = react.useInteractions([dismiss, role]);
+  const [floatingKey, setFloatingKey] = React.useState(0);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [open ? /*#__PURE__*/jsxRuntime.jsx(PreventScroll, {}) : null, renderTrigger?.({
+      ref: refs.setReference,
+      getInteractionProps: getReferenceProps
+    }), /*#__PURE__*/jsxRuntime.jsx(react.FloatingPortal, {
+      children: /*#__PURE__*/jsxRuntime.jsxs(react$1.Transition, {
+        show: open,
+        className: "np-bottom-sheet-v2-container",
+        beforeEnter: () => {
+          setFloatingKey(prev => prev + 1);
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx(react$1.Transition.Child, {
+          enter: "np-bottom-sheet-v2-backdrop-container--enter",
+          enterFrom: "np-bottom-sheet-v2-backdrop-container--enter-from",
+          leave: "np-bottom-sheet-v2-backdrop-container--leave",
+          leaveTo: "np-bottom-sheet-v2-backdrop-container--leave-to",
+          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
+                  })]
+                })]
+              }, floatingKey)
+            })
+          })
+        })]
+      })
+    })]
+  });
+}
+
+const ButtonInput = /*#__PURE__*/React.forwardRef(function ButtonInput({
+  size = 'md',
+  className,
+  style,
+  ...restProps
+}, ref) {
+  const inputPaddings = useInputPaddings();
+  return /*#__PURE__*/jsxRuntime.jsx("button", {
+    ref: ref,
+    type: "button",
+    className: classNames__default.default(className, formControlClassNameBase({
+      size
+    }), 'np-button-input')
+    // eslint-disable-next-line react/forbid-dom-props
+    ,
+    style: {
+      ...inputPaddings,
+      ...style
+    },
+    ...restProps
+  });
+});
+
+const floatingPadding = 16;
+function Popover({
+  placement,
+  open,
+  renderTrigger,
+  title,
+  padding = 'md',
+  children,
+  onClose
+}) {
+  const {
+    refs,
+    floatingStyles,
+    context
+  } = react.useFloating({
+    placement,
+    middleware: [react.offset(8), react.flip({
+      padding: floatingPadding,
+      crossAxis: false
+    }), react.shift(), react.size({
+      padding: floatingPadding,
+      apply: ({
+        elements,
+        rects,
+        availableHeight
+      }) => {
+        elements.floating.style.setProperty('--max-height', `${availableHeight}px`);
+        elements.floating.style.setProperty('--width', `${rects.reference.width}px`);
+      }
+    })],
+    whileElementsMounted: react.autoUpdate,
+    open,
+    onOpenChange: value => {
+      if (!value) {
+        onClose?.();
+      }
+    }
+  });
+  const dismiss = react.useDismiss(context, {
+    outsidePressEvent: 'mousedown'
+  });
+  const role = react.useRole(context);
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = react.useInteractions([role, dismiss]);
+  const [floatingKey, setFloatingKey] = React.useState(0);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [open ? /*#__PURE__*/jsxRuntime.jsx(PreventScroll, {}) : null, renderTrigger({
+      ref: refs.setReference,
+      getInteractionProps: getReferenceProps
+    }), /*#__PURE__*/jsxRuntime.jsx(react.FloatingPortal, {
+      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)
+        })
+      })
+    })]
+  });
+}
+
+function searchableString(value) {
+  return value.trim().replace(/\s+/gu, ' ').toLowerCase();
+}
+function inferSearchableStrings(value) {
+  if (typeof value === 'string') {
+    return [searchableString(value)];
+  }
+  if (typeof value === 'object' && value != null) {
+    return Object.values(value).filter(innerValue => typeof innerValue === 'string').map(innerValue => searchableString(innerValue));
+  }
+  return [];
+}
+const SelectInputHasValueContext = /*#__PURE__*/React.createContext(false);
+const SelectInputOptionContentCompactContext = /*#__PURE__*/React.createContext(false);
+function dedupeSelectInputOptionItem(item, existingValues) {
+  if (existingValues.has(item.value)) {
+    return {
+      ...item,
+      value: undefined
+    };
+  }
+  existingValues.add(item.value);
+  return item;
+}
+function dedupeSelectInputItems(items) {
+  const existingValues = new Set();
+  return items.map(item => {
+    switch (item.type) {
+      case 'option':
+        {
+          return dedupeSelectInputOptionItem(item, existingValues);
+        }
+      case 'group':
+        {
+          return {
+            ...item,
+            options: item.options.map(option => dedupeSelectInputOptionItem(option, existingValues))
+          };
+        }
+    }
+    return item;
+  });
+}
+function SelectInput({
+  name,
+  placeholder,
+  items,
+  defaultValue,
+  value: controlledValue,
+  renderValue = wrapInFragment,
+  compareValues,
+  filterable,
+  filterPlaceholder,
+  disabled,
+  className,
+  onChange,
+  onClear
+}) {
+  const intl = reactIntl.useIntl();
+  const [open, setOpen] = React.useState(false);
+  const triggerRef = React.useRef(null);
+  const screenSm = useScreenSize(exports.Breakpoint.SMALL);
+  const OptionsOverlay = screenSm ? Popover : BottomSheet;
+  const searchInputRef = React.useRef(null);
+  const listboxRef = React.useRef(null);
+  const controllerRef = filterable ? searchInputRef : listboxRef;
+  return /*#__PURE__*/jsxRuntime.jsx(react$1.Listbox, {
+    name: name,
+    defaultValue: defaultValue,
+    value: controlledValue
+    // TODO: Remove assertion when upgrading TypeScript to v5
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    ,
+    by: compareValues,
+    disabled: disabled,
+    onChange: value => {
+      setOpen(false);
+      onChange?.(value);
+    },
+    children: ({
+      disabled: uiDisabled,
+      value
+    }) => /*#__PURE__*/jsxRuntime.jsx(SelectInputHasValueContext.Provider, {
+      value: value != null,
+      children: /*#__PURE__*/jsxRuntime.jsx(InputGroup, {
+        addonEnd: {
+          content: /*#__PURE__*/jsxRuntime.jsxs("span", {
+            className: classNames__default.default('np-select-input-addon-container', uiDisabled && 'disabled'),
+            children: [onClear != null && value != null ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/jsxRuntime.jsx("button", {
+                type: "button",
+                "aria-label": intl.formatMessage(messages$4.ariaLabel),
+                disabled: uiDisabled,
+                className: "np-select-input-addon np-select-input-addon--interactive",
+                onClick: event => {
+                  event.preventDefault();
+                  onClear();
+                  triggerRef.current?.focus({
+                    preventScroll: true
+                  });
+                },
+                children: /*#__PURE__*/jsxRuntime.jsx(icons.Cross, {
+                  size: 16
+                })
+              }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "np-select-input-addon-separator"
+              })]
+            }) : null, /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "np-select-input-addon",
+              children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronDown, {
+                size: 16
+              })
+            })]
+          }),
+          padding: 'sm'
+        },
+        className: className,
+        children: /*#__PURE__*/jsxRuntime.jsx(OptionsOverlay, {
+          open: open,
+          renderTrigger: ({
+            ref,
+            getInteractionProps
+          }) => /*#__PURE__*/jsxRuntime.jsx(react$1.Listbox.Button, {
+            ref: mergeRefs__default.default([ref, triggerRef]),
+            as: SelectInputButton,
+            overrides: getInteractionProps(),
+            onClick: () => {
+              setOpen(prev => !prev);
+            },
+            children: value != null ? /*#__PURE__*/jsxRuntime.jsx(SelectInputOptionContentCompactContext.Provider, {
+              value: true,
+              children: renderValue(value, true)
+            }) : /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "np-select-input-placeholder",
+              children: placeholder
+            })
+          }),
+          initialFocusRef: controllerRef,
+          padding: "none",
+          onClose: () => {
+            setOpen(false);
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(SelectInputOptions, {
+            items: items,
+            renderValue: renderValue,
+            filterable: filterable,
+            filterPlaceholder: filterPlaceholder,
+            searchInputRef: searchInputRef,
+            listboxRef: listboxRef
+          })
+        })
+      })
+    })
+  });
+}
+const SelectInputButton = /*#__PURE__*/React.forwardRef(function SelectInputButton({
+  overrides,
+  ...restProps
+}, ref) {
+  return /*#__PURE__*/jsxRuntime.jsx(ButtonInput, {
+    ref: ref,
+    ...restProps,
+    ...overrides
+  });
+});
+const SelectInputOptionsContainer = /*#__PURE__*/React.forwardRef(function SelectInputOptionsContainer({
+  'aria-orientation': ariaOrientation,
+  'aria-activedescendant': ariaActiveDescendant,
+  role,
+  tabIndex,
+  onAriaActiveDescendantChange,
+  onKeyDown,
+  ...restProps
+}, ref) {
+  const handleAriaActiveDescendantChange = useEffectEvent(onAriaActiveDescendantChange);
+  React.useEffect(() => {
+    handleAriaActiveDescendantChange(ariaActiveDescendant);
+  }, [ariaActiveDescendant, handleAriaActiveDescendantChange]);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    jsxRuntime.jsx("div", {
+      ref: ref,
+      onKeyDown: event => {
+        // Prevent absorbing dismissal requests too early
+        if (event.key !== 'Escape') {
+          onKeyDown?.(event);
+        }
+      },
+      ...restProps
+    })
+  );
+});
+function SelectInputOptions({
+  items,
+  renderValue = wrapInFragment,
+  filterable,
+  filterPlaceholder,
+  searchInputRef,
+  listboxRef
+}) {
+  const [query, setQuery] = React.useState('');
+  const needle = React.useMemo(() => query ? searchableString(query) : null, [query]);
+  const listboxContainerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (listboxContainerRef.current != null) {
+      listboxContainerRef.current.style.setProperty('--initial-height', `${listboxContainerRef.current.offsetHeight}px`);
+    }
+  }, []);
+  const listboxId = reactId.useId();
+  const controllerRef = filterable ? searchInputRef : listboxRef;
+  return /*#__PURE__*/jsxRuntime.jsxs(react$1.Listbox.Options, {
+    as: SelectInputOptionsContainer,
+    static: true,
+    className: "np-select-input-options-container",
+    onAriaActiveDescendantChange: value => {
+      if (controllerRef.current != null) {
+        if (value != null) {
+          controllerRef.current.setAttribute('aria-activedescendant', value);
+        } else {
+          controllerRef.current.removeAttribute('aria-activedescendant');
+        }
+      }
+    },
+    children: [filterable ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "np-select-input-query-container",
+      children: /*#__PURE__*/jsxRuntime.jsx(SearchInput, {
+        ref: searchInputRef,
+        shape: "rectangle",
+        placeholder: filterPlaceholder,
+        value: query,
+        "aria-controls": listboxId,
+        onKeyDown: event => {
+          // Prevent interfering with the matcher of Headless UI
+          // https://mathiasbynens.be/notes/javascript-unicode#regex
+          if (/^.$/u.test(event.key)) {
+            event.stopPropagation();
+          }
+        },
+        onChange: event => {
+          setQuery(event.currentTarget.value);
+        }
+      })
+    }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: listboxContainerRef,
+      className: classNames__default.default('np-select-input-listbox-container', items.some(item => item.type === 'group') && 'np-select-input-listbox-container--has-group'),
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        ref: listboxRef,
+        id: listboxId,
+        role: "listbox",
+        "aria-orientation": "vertical",
+        tabIndex: 0,
+        className: "np-select-input-listbox",
+        children: (needle == null ? items : dedupeSelectInputItems(items)).map((item, index) => /*#__PURE__*/jsxRuntime.jsx(SelectInputItemView
+        // eslint-disable-next-line react/no-array-index-key
+        , {
+          item: item,
+          renderValue: renderValue,
+          needle: needle
+        }, index))
+      })
+    })]
+  });
+}
+function SelectInputItemView({
+  item,
+  renderValue,
+  needle
+}) {
+  switch (item.type) {
+    case 'option':
+      {
+        if (item.value != null && (!needle || inferSearchableStrings(item.filterMatchers ?? item.value).some(haystack => haystack.includes(needle)))) {
+          return /*#__PURE__*/jsxRuntime.jsx(SelectInputOption, {
+            value: item.value,
+            disabled: item.disabled,
+            children: renderValue(item.value, false)
+          });
+        }
+        break;
+      }
+    case 'group':
+      {
+        return /*#__PURE__*/jsxRuntime.jsx(SelectInputGroupItemView, {
+          item: item,
+          renderValue: renderValue,
+          needle: needle
+        });
+      }
+    case 'separator':
+      {
+        if (needle == null) {
+          return /*#__PURE__*/jsxRuntime.jsx("hr", {
+            className: "np-select-input-separator-item",
+            "aria-hidden": true
+          });
+        }
+        break;
+      }
+  }
+  return null;
+}
+function SelectInputGroupItemView({
+  item,
+  renderValue,
+  needle
+}) {
+  const headerId = reactId.useId();
+  return (
+    /*#__PURE__*/
+    // An empty container may be rendered when no options match `needle`
+    // However, pre-filtering would result in worse performance overall
+    jsxRuntime.jsxs("section", {
+      role: "group",
+      "aria-labelledby": headerId,
+      className: classNames__default.default(needle == null && 'np-select-input-group-item--without-needle'),
+      children: [needle == null ? /*#__PURE__*/jsxRuntime.jsx("header", {
+        id: headerId,
+        role: "presentation",
+        className: "np-select-input-group-item-header np-text-title-group",
+        children: item.label
+      }) : null, item.options.map((option, index) => /*#__PURE__*/jsxRuntime.jsx(SelectInputItemView
+      // eslint-disable-next-line react/no-array-index-key
+      , {
+        item: option,
+        renderValue: renderValue,
+        needle: needle
+      }, index))]
+    })
+  );
+}
+function SelectInputOption({
+  value,
+  disabled,
+  children
+}) {
+  const parentHasValue = React.useContext(SelectInputHasValueContext);
+  // Avoid flash during exit transition
+  const {
+    current: cachedParentHasValue
+  } = React.useRef(parentHasValue);
+  return /*#__PURE__*/jsxRuntime.jsx(react$1.Listbox.Option, {
+    as: "div",
+    value: value,
+    disabled: disabled,
+    className: ({
+      active,
+      disabled: uiDisabled
+    }) => classNames__default.default('np-select-input-option-container np-text-body-large', active && 'np-select-input-option-container--active', uiDisabled && 'np-select-input-option-container--disabled'),
+    children: ({
+      selected
+    }) => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [cachedParentHasValue ? /*#__PURE__*/jsxRuntime.jsx(icons.Check, {
+        size: 16,
+        className: classNames__default.default(!selected && 'np-select-input-option-check--not-selected')
+      }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "np-select-input-option",
+        children: children
+      })]
+    })
+  });
+}
+function SelectInputOptionContent({
+  title,
+  note,
+  description,
+  icon
+}) {
+  const compact = React.useContext(SelectInputOptionContentCompactContext);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "np-select-input-option-content-container np-text-body-large",
+    children: [icon ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classNames__default.default('np-select-input-option-content-icon', !compact && 'np-select-input-option-content-icon--not-compact'),
+      children: icon
+    }) : null, /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "np-select-input-option-content-text",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: classNames__default.default('np-select-input-option-content-text-line-1', compact && 'np-select-input-option-content-text-compact'),
+        children: [/*#__PURE__*/jsxRuntime.jsx("h4", {
+          className: "d-inline np-text-body-large",
+          children: title
+        }), note ? /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "np-select-input-option-content-text-secondary np-text-body-default",
+          children: note
+        }) : null]
+      }), description ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classNames__default.default('np-select-input-option-content-text-secondary np-text-body-default', compact && 'np-select-input-option-content-text-compact'),
+        children: description
+      }) : null]
+    })]
+  });
+}
+
 const TextArea = /*#__PURE__*/React.forwardRef(function TextArea({
   className,
   ...restProps
@@ -7315,7 +7945,7 @@ function Select({
       headerTitle: searchPlaceholder || formatMessage(messages$3.searchPlaceholder),
       onClose: handleCloseOptions,
       children: renderOptionsList()
-    }) : /*#__PURE__*/jsxRuntime.jsx(BottomSheet$1, {
+    }) : /*#__PURE__*/jsxRuntime.jsx(BottomSheet$2, {
       open: open,
       onClose: handleCloseOptions,
       children: renderOptionsList({
@@ -14439,7 +15069,7 @@ exports.AvatarWrapper = AvatarWrapper;
 exports.Badge = Badge;
 exports.BaseCard = Card;
 exports.Body = Body;
-exports.BottomSheet = BottomSheet$1;
+exports.BottomSheet = BottomSheet$2;
 exports.Button = Button;
 exports.Card = Card$2;
 exports.Checkbox = Checkbox$1;
@@ -14487,7 +15117,7 @@ exports.Nudge = Nudge;
 exports.Option = Option$2;
 exports.OverlayHeader = OverlayHeader$1;
 exports.PhoneNumberInput = PhoneNumberInput$1;
-exports.Popover = Popover$1;
+exports.Popover = Popover$2;
 exports.ProcessIndicator = ProcessIndicator$1;
 exports.Progress = Progress;
 exports.ProgressBar = ProgressBar;
@@ -14499,8 +15129,11 @@ exports.Radio = Radio$1;
 exports.RadioGroup = RadioGroup$1;
 exports.RadioOption = RadioOption$1;
 exports.SUPPORTED_LANGUAGES = SUPPORTED_LANGUAGES;
+exports.SearchInput = SearchInput;
 exports.Section = Section;
 exports.Select = Select;
+exports.SelectInput = SelectInput;
+exports.SelectInputOptionContent = SelectInputOptionContent;
 exports.SlidingPanel = SlidingPanel$1;
 exports.SnackbarConsumer = SnackbarConsumer;
 exports.SnackbarContext = SnackbarContext;