@transferwise/components 45.14.2 → 45.15.0

package/build/index.esm.js

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { forwardRef, cloneElement, useState, useRef, useMemo, useEffect, useLayoutEffect, createContext, useContext, useCallback, PureComponent, createRef, Component, Children, Fragment as Fragment$1 } from 'react';
-import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1, Alert as Alert$2, ClockBorderless, CheckCircle, InfoCircle, Warning, CrossCircle, Clock, Briefcase, Person, ArrowLeft, QuestionMarkCircle, AlertCircle, CheckCircleFill, Search, ArrowRight, Download, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle, AlertCircleFill } from '@transferwise/icons';
+import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1, Alert as Alert$2, ClockBorderless, CheckCircle, InfoCircle, Warning, CrossCircle, Clock, Briefcase, Person, ArrowLeft, QuestionMarkCircle, AlertCircle, Search, ChevronDown, CheckCircleFill, ArrowRight, Download, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle, AlertCircleFill } from '@transferwise/icons';
 import PropTypes from 'prop-types';
 import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
 import { useTheme, ThemeProvider } from '@wise/components-theming';
@@ -13,6 +13,11 @@ import { createPortal } from 'react-dom';
 import { isUndefined, isKey, isNumber, isEmpty, isNull, isArray } from '@transferwise/neptune-validation';
 import mergeRefs from 'react-merge-refs';
 import { usePopper } from 'react-popper';
+import { Transition, Listbox } from '@headlessui/react';
+import { useId } from '@radix-ui/react-id';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingFocusManager, offset, flip, shift, size, autoUpdate } from '@floating-ui/react';
+import { usePreventScroll } from '@react-aria/overlays';
 import { Illustration } from '@wise/art';
 import clamp$2 from 'lodash.clamp';
 import debounce from 'lodash.debounce';
@@ -1980,7 +1985,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 = useRef(null);
   const topBarReference = useRef(null);
   const contentReference = useRef(null);
@@ -2134,7 +2139,7 @@ const BottomSheet = props => {
     })
   });
 };
-var BottomSheet$1 = BottomSheet;
+var BottomSheet$2 = BottomSheet$1;
 
 const typeClassMap$1 = {
   [ControlType.ACCENT]: 'btn-accent',
@@ -3161,7 +3166,7 @@ const ResponsivePanel = /*#__PURE__*/forwardRef(({
     isMobile
   } = useLayout();
   if (isMobile) {
-    return /*#__PURE__*/jsx(BottomSheet$1, {
+    return /*#__PURE__*/jsx(BottomSheet$2, {
       open: open,
       className: className,
       onClose: onClose,
@@ -4242,21 +4247,14 @@ const Tile = ({
   title
 }) => {
   const isSmall = size === Size.SMALL;
-  const {
-    isModern
-  } = useTheme();
   const Element = href ? 'a' : 'button';
   return /*#__PURE__*/jsxs(Element, {
     className: classNames('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
@@ -4272,15 +4270,12 @@ const Tile = ({
       type: Typography.TITLE_SUBSECTION,
       className: classNames(isSmall ? 'm-t-1' : 'm-t-2'),
       children: title
-    }), isModern && description && /*#__PURE__*/jsx(Body, {
+    }), description ? /*#__PURE__*/jsx(Body, {
       as: "span",
       type: Typography.BODY_DEFAULT,
       className: "m-t-1",
       children: description
-    }), !isModern && description && /*#__PURE__*/jsx("div", {
-      className: "np-tile__description",
-      children: description
-    })]
+    }) : null]
   });
 };
 Tile.propTypes = {
@@ -5293,14 +5288,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,
@@ -5314,21 +5301,14 @@ const Logo = ({
   inverse,
   type
 }) => {
-  const {
-    isModern
-  } = useTheme();
   const [clientWidth] = useClientWidth({
     ref: isServerSide() ? undefined : window
   });
   const isSmall = clientWidth < 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__*/jsx(LogoSvg, {
-    className: "np-logo-svg"
-  }) : /*#__PURE__*/jsx("img", {
-    className: classNames('np-logo', className),
-    alt: type === LogoType.WISE ? 'Wise' : 'Wise business',
-    src: `${baseUrl}${path}`
+  return /*#__PURE__*/jsx(LogoSvg, {
+    className: classNames('np-logo-svg', className),
+    alt: type === LogoType.WISE ? 'Wise' : 'Wise business'
   });
 };
 Logo.propTypes = {
@@ -5500,13 +5480,12 @@ const Stepper = ({
       children: /*#__PURE__*/jsx("small", {
         children: step.label
       })
-    }) : /*#__PURE__*/jsx(Body, {
-      as: "span",
-      className: "tw-stepper__step-label small",
+    }) : /*#__PURE__*/jsx("span", {
+      className: "tw-stepper__step-label",
       children: step.label
     });
     return /*#__PURE__*/jsx("li", {
-      className: classNames('hidden-xs', 'tw-stepper__step', active && 'tw-stepper__step--active', clickable && 'tw-stepper__step--clickable', step.hoverLabel && 'tw-stepper__step--has-tooltip'),
+      className: classNames('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}%`
       } : {
@@ -5839,7 +5818,7 @@ const Modal = ({
   });
 };
 
-const Popover = ({
+const Popover$1 = ({
   children,
   className,
   content,
@@ -5893,12 +5872,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: Position.RIGHT,
   title: undefined
 };
-Popover.propTypes = {
+Popover$1.propTypes = {
   children: PropTypes.node.isRequired,
   className: PropTypes.string,
   content: PropTypes.node.isRequired,
@@ -5915,7 +5894,7 @@ const deprecatedPlacements = {
   [Position.LEFT_TOP]: Position.TOP,
   [Position.RIGHT_TOP]: Position.TOP
 };
-var Popover$1 = Popover;
+var Popover$2 = Popover$1;
 
 const Info = ({
   className = undefined,
@@ -5957,7 +5936,7 @@ const Info = ({
         title: title,
         onClose: () => setOpen(false)
       })]
-    }) : /*#__PURE__*/jsx(Popover$1, {
+    }) : /*#__PURE__*/jsx(Popover$2, {
       content: content,
       preferredPlacement: Position.BOTTOM,
       title: title,
@@ -6146,11 +6125,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__*/forwardRef(function Input({
   size = 'auto',
+  shape = 'rectangle',
   className,
   ...restProps
 }, reference) {
@@ -6159,7 +6139,10 @@ const Input = /*#__PURE__*/forwardRef(function Input({
     ref: reference,
     className: classNames(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,
@@ -6167,6 +6150,653 @@ const Input = /*#__PURE__*/forwardRef(function Input({
   });
 });
 
+const SearchInput = /*#__PURE__*/forwardRef(function SearchInput({
+  shape = 'pill',
+  disabled,
+  className,
+  ...restProps
+}, ref) {
+  return /*#__PURE__*/jsx(InputGroup, {
+    addonStart: {
+      content: /*#__PURE__*/jsx(Search, {
+        size: 24
+      }),
+      initialContentWidth: 24
+    },
+    disabled: disabled,
+    className: className,
+    children: /*#__PURE__*/jsx(Input, {
+      ref: ref,
+      role: "searchbox",
+      inputMode: "search",
+      shape: shape,
+      ...restProps
+    })
+  });
+});
+
+function useMedia(query) {
+  return 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__*/jsx(Fragment, {
+    children: value
+  });
+}
+
+function PreventScroll() {
+  usePreventScroll();
+  return null;
+}
+
+function BottomSheet({
+  open,
+  renderTrigger,
+  title,
+  initialFocusRef,
+  padding = 'md',
+  children,
+  onClose
+}) {
+  const {
+    refs,
+    context
+  } = useFloating({
+    open,
+    onOpenChange: value => {
+      if (!value) {
+        onClose?.();
+      }
+    }
+  });
+  const dismiss = useDismiss(context, {
+    outsidePressEvent: 'mousedown'
+  });
+  const role = useRole(context);
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = useInteractions([dismiss, role]);
+  const [floatingKey, setFloatingKey] = useState(0);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [open ? /*#__PURE__*/jsx(PreventScroll, {}) : null, renderTrigger?.({
+      ref: refs.setReference,
+      getInteractionProps: getReferenceProps
+    }), /*#__PURE__*/jsx(FloatingPortal, {
+      children: /*#__PURE__*/jsxs(Transition, {
+        show: open,
+        className: "np-bottom-sheet-v2-container",
+        beforeEnter: () => {
+          setFloatingKey(prev => prev + 1);
+        },
+        children: [/*#__PURE__*/jsx(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__*/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
+                  })]
+                })]
+              }, floatingKey)
+            })
+          })
+        })]
+      })
+    })]
+  });
+}
+
+const ButtonInput = /*#__PURE__*/forwardRef(function ButtonInput({
+  size = 'md',
+  className,
+  style,
+  ...restProps
+}, ref) {
+  const inputPaddings = useInputPaddings();
+  return /*#__PURE__*/jsx("button", {
+    ref: ref,
+    type: "button",
+    className: classNames(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
+  } = useFloating({
+    placement,
+    middleware: [offset(8), flip({
+      padding: floatingPadding,
+      crossAxis: false
+    }), shift(), 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: autoUpdate,
+    open,
+    onOpenChange: value => {
+      if (!value) {
+        onClose?.();
+      }
+    }
+  });
+  const dismiss = useDismiss(context, {
+    outsidePressEvent: 'mousedown'
+  });
+  const role = useRole(context);
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = useInteractions([role, dismiss]);
+  const [floatingKey, setFloatingKey] = useState(0);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [open ? /*#__PURE__*/jsx(PreventScroll, {}) : null, renderTrigger({
+      ref: refs.setReference,
+      getInteractionProps: getReferenceProps
+    }), /*#__PURE__*/jsx(FloatingPortal, {
+      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)
+        })
+      })
+    })]
+  });
+}
+
+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__*/createContext(false);
+const SelectInputOptionContentCompactContext = /*#__PURE__*/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 = useIntl();
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef(null);
+  const screenSm = useScreenSize(Breakpoint.SMALL);
+  const OptionsOverlay = screenSm ? Popover : BottomSheet;
+  const searchInputRef = useRef(null);
+  const listboxRef = useRef(null);
+  const controllerRef = filterable ? searchInputRef : listboxRef;
+  return /*#__PURE__*/jsx(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__*/jsx(SelectInputHasValueContext.Provider, {
+      value: value != null,
+      children: /*#__PURE__*/jsx(InputGroup, {
+        addonEnd: {
+          content: /*#__PURE__*/jsxs("span", {
+            className: classNames('np-select-input-addon-container', uiDisabled && 'disabled'),
+            children: [onClear != null && value != null ? /*#__PURE__*/jsxs(Fragment, {
+              children: [/*#__PURE__*/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__*/jsx(Cross, {
+                  size: 16
+                })
+              }), /*#__PURE__*/jsx("span", {
+                className: "np-select-input-addon-separator"
+              })]
+            }) : null, /*#__PURE__*/jsx("span", {
+              className: "np-select-input-addon",
+              children: /*#__PURE__*/jsx(ChevronDown, {
+                size: 16
+              })
+            })]
+          }),
+          padding: 'sm'
+        },
+        className: className,
+        children: /*#__PURE__*/jsx(OptionsOverlay, {
+          open: open,
+          renderTrigger: ({
+            ref,
+            getInteractionProps
+          }) => /*#__PURE__*/jsx(Listbox.Button, {
+            ref: mergeRefs([ref, triggerRef]),
+            as: SelectInputButton,
+            overrides: getInteractionProps(),
+            onClick: () => {
+              setOpen(prev => !prev);
+            },
+            children: value != null ? /*#__PURE__*/jsx(SelectInputOptionContentCompactContext.Provider, {
+              value: true,
+              children: renderValue(value, true)
+            }) : /*#__PURE__*/jsx("span", {
+              className: "np-select-input-placeholder",
+              children: placeholder
+            })
+          }),
+          initialFocusRef: controllerRef,
+          padding: "none",
+          onClose: () => {
+            setOpen(false);
+          },
+          children: /*#__PURE__*/jsx(SelectInputOptions, {
+            items: items,
+            renderValue: renderValue,
+            filterable: filterable,
+            filterPlaceholder: filterPlaceholder,
+            searchInputRef: searchInputRef,
+            listboxRef: listboxRef
+          })
+        })
+      })
+    })
+  });
+}
+const SelectInputButton = /*#__PURE__*/forwardRef(function SelectInputButton({
+  overrides,
+  ...restProps
+}, ref) {
+  return /*#__PURE__*/jsx(ButtonInput, {
+    ref: ref,
+    ...restProps,
+    ...overrides
+  });
+});
+const SelectInputOptionsContainer = /*#__PURE__*/forwardRef(function SelectInputOptionsContainer({
+  'aria-orientation': ariaOrientation,
+  'aria-activedescendant': ariaActiveDescendant,
+  role,
+  tabIndex,
+  onAriaActiveDescendantChange,
+  onKeyDown,
+  ...restProps
+}, ref) {
+  const handleAriaActiveDescendantChange = useEffectEvent(onAriaActiveDescendantChange);
+  useEffect(() => {
+    handleAriaActiveDescendantChange(ariaActiveDescendant);
+  }, [ariaActiveDescendant, handleAriaActiveDescendantChange]);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    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] = useState('');
+  const needle = useMemo(() => query ? searchableString(query) : null, [query]);
+  const listboxContainerRef = useRef(null);
+  useEffect(() => {
+    if (listboxContainerRef.current != null) {
+      listboxContainerRef.current.style.setProperty('--initial-height', `${listboxContainerRef.current.offsetHeight}px`);
+    }
+  }, []);
+  const listboxId = useId();
+  const controllerRef = filterable ? searchInputRef : listboxRef;
+  return /*#__PURE__*/jsxs(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__*/jsx("div", {
+      className: "np-select-input-query-container",
+      children: /*#__PURE__*/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__*/jsx("div", {
+      ref: listboxContainerRef,
+      className: classNames('np-select-input-listbox-container', items.some(item => item.type === 'group') && 'np-select-input-listbox-container--has-group'),
+      children: /*#__PURE__*/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__*/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__*/jsx(SelectInputOption, {
+            value: item.value,
+            disabled: item.disabled,
+            children: renderValue(item.value, false)
+          });
+        }
+        break;
+      }
+    case 'group':
+      {
+        return /*#__PURE__*/jsx(SelectInputGroupItemView, {
+          item: item,
+          renderValue: renderValue,
+          needle: needle
+        });
+      }
+    case 'separator':
+      {
+        if (needle == null) {
+          return /*#__PURE__*/jsx("hr", {
+            className: "np-select-input-separator-item",
+            "aria-hidden": true
+          });
+        }
+        break;
+      }
+  }
+  return null;
+}
+function SelectInputGroupItemView({
+  item,
+  renderValue,
+  needle
+}) {
+  const headerId = useId();
+  return (
+    /*#__PURE__*/
+    // An empty container may be rendered when no options match `needle`
+    // However, pre-filtering would result in worse performance overall
+    jsxs("section", {
+      role: "group",
+      "aria-labelledby": headerId,
+      className: classNames(needle == null && 'np-select-input-group-item--without-needle'),
+      children: [needle == null ? /*#__PURE__*/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__*/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 = useContext(SelectInputHasValueContext);
+  // Avoid flash during exit transition
+  const {
+    current: cachedParentHasValue
+  } = useRef(parentHasValue);
+  return /*#__PURE__*/jsx(Listbox.Option, {
+    as: "div",
+    value: value,
+    disabled: disabled,
+    className: ({
+      active,
+      disabled: uiDisabled
+    }) => classNames('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__*/jsxs(Fragment, {
+      children: [cachedParentHasValue ? /*#__PURE__*/jsx(Check, {
+        size: 16,
+        className: classNames(!selected && 'np-select-input-option-check--not-selected')
+      }) : null, /*#__PURE__*/jsx("div", {
+        className: "np-select-input-option",
+        children: children
+      })]
+    })
+  });
+}
+function SelectInputOptionContent({
+  title,
+  note,
+  description,
+  icon
+}) {
+  const compact = useContext(SelectInputOptionContentCompactContext);
+  return /*#__PURE__*/jsxs("div", {
+    className: "np-select-input-option-content-container np-text-body-large",
+    children: [icon ? /*#__PURE__*/jsx("div", {
+      className: classNames('np-select-input-option-content-icon', !compact && 'np-select-input-option-content-icon--not-compact'),
+      children: icon
+    }) : null, /*#__PURE__*/jsxs("div", {
+      className: "np-select-input-option-content-text",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: classNames('np-select-input-option-content-text-line-1', compact && 'np-select-input-option-content-text-compact'),
+        children: [/*#__PURE__*/jsx("h4", {
+          className: "d-inline np-text-body-large",
+          children: title
+        }), note ? /*#__PURE__*/jsx("span", {
+          className: "np-select-input-option-content-text-secondary np-text-body-default",
+          children: note
+        }) : null]
+      }), description ? /*#__PURE__*/jsx("div", {
+        className: classNames('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__*/forwardRef(function TextArea({
   className,
   ...restProps
@@ -7282,7 +7912,7 @@ function Select({
       headerTitle: searchPlaceholder || formatMessage(messages$3.searchPlaceholder),
       onClose: handleCloseOptions,
       children: renderOptionsList()
-    }) : /*#__PURE__*/jsx(BottomSheet$1, {
+    }) : /*#__PURE__*/jsx(BottomSheet$2, {
       open: open,
       onClose: handleCloseOptions,
       children: renderOptionsList({
@@ -14397,5 +15027,5 @@ const translations = {
   zh
 };
 
-export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$1 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$1 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, Section, Select, 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, 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