@transferwise/components 45.14.2 → 45.15.1

package/build/index.esm.js

@@ -1,8 +1,8 @@
 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 React__default, { forwardRef, cloneElement, useState, useRef, useMemo, useEffect, useCallback, useLayoutEffect, createContext, useContext, 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, 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';
@@ -10,9 +10,15 @@ import { formatDate, formatNumber, formatMoney, formatAmount } from '@transferwi
 import throttle from 'lodash.throttle';
 import { CSSTransition } from 'react-transition-group';
 import { createPortal } from 'react-dom';
-import { isUndefined, isKey, isNumber, isEmpty, isNull, isArray } from '@transferwise/neptune-validation';
+import { FocusScope } from '@react-aria/focus';
 import mergeRefs from 'react-merge-refs';
+import { isUndefined, isKey, isNumber, isEmpty, isNull, isArray } from '@transferwise/neptune-validation';
 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';
@@ -606,10 +612,8 @@ const Option$2 = /*#__PURE__*/forwardRef(({
         })
       }), /*#__PURE__*/jsxs("div", {
         className: "media-body",
-        children: [/*#__PURE__*/jsx(Body, {
-          as: "span",
-          type: Typography.BODY_LARGE_BOLD,
-          className: "text-primary np-option__title d-block",
+        children: [/*#__PURE__*/jsx("h4", {
+          className: "np-text-body-large-bold text-primary np-option__title",
           children: title
         }), content && /*#__PURE__*/jsx(Body, {
           className: "d-block np-option__body",
@@ -759,7 +763,7 @@ const ActionOption = ({
   });
 };
 
-var messages$8 = defineMessages({
+var messages$9 = defineMessages({
   ariaLabel: {
     id: "neptune.CloseButton.ariaLabel"
   }
@@ -775,7 +779,7 @@ const CloseButton = /*#__PURE__*/forwardRef(function CloseButton({
   testId
 }, reference) {
   const intl = useIntl();
-  ariaLabel ??= intl.formatMessage(messages$8.ariaLabel);
+  ariaLabel ??= intl.formatMessage(messages$9.ariaLabel);
   const Icon = filled ? CrossCircleFill : Cross;
   return /*#__PURE__*/jsx("button", {
     ref: reference,
@@ -795,7 +799,7 @@ const CloseButton = /*#__PURE__*/forwardRef(function CloseButton({
   });
 });
 
-var messages$7 = defineMessages({
+var messages$8 = defineMessages({
   opensInNewTab: {
     id: "neptune.Link.opensInNewTab"
   }
@@ -824,7 +828,7 @@ const Link = ({
     onClick: onClick,
     ...props,
     children: [children, " ", isBlank && /*#__PURE__*/jsx(NavigateAway, {
-      title: formatMessage(messages$7.opensInNewTab)
+      title: formatMessage(messages$8.opensInNewTab)
     })]
   });
 };
@@ -1400,7 +1404,7 @@ const AvatarWrapper = ({
         type: AvatarType.THUMBNAIL,
         children: /*#__PURE__*/jsx("img", {
           src: url,
-          alt: "avatar",
+          alt: "",
           onError: () => setImageLoadError(true)
         }),
         ...avatarProps
@@ -1454,268 +1458,23 @@ function getInitials(name) {
   return allInitials[0] + allInitials.slice(-1);
 }
 
-const THROTTLE_MS = 100;
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-const useClientWidth = ({
-  ref,
-  throttleMs = THROTTLE_MS
-}) => {
-  const [clientWidth, setClientWidth] = useState(null);
-  useIsomorphicLayoutEffect(() => {
-    // eslint-disable-next-line unicorn/consistent-function-scoping
-    const updateClientWidth = () => {
-      if (ref) {
-        // when `ref` is a window
-        if ('innerWidth' in ref) {
-          setClientWidth(ref.innerWidth);
-        }
-        // when `ref` is an element
-        else if (ref.current) {
-          setClientWidth(ref.current.clientWidth);
-        }
-      }
-    };
-    // This assignment saves a reference to the function so it will be the same passed to both addEventListener removeEventListener.
-    // If throttle gets passed directly to both add and removeEventListenet the results will be that the event
-    // won't get removed even if the component is unmounted.
-    const attachedFunction = throttle(updateClientWidth, throttleMs);
-    window.addEventListener('resize', attachedFunction, true);
-    // using requestAnimationFrame to perform the calculation before the next repaint
-    // getting width earlier causes issues in animations when used with react-transition-group
-    window.requestAnimationFrame(updateClientWidth);
-    return () => window.removeEventListener('resize', attachedFunction, true);
-  }, []);
-  return [clientWidth];
-};
-useClientWidth.THROTTLE_MS = THROTTLE_MS;
-
-const useConditionalListener = ({
-  attachListener,
-  callback,
-  eventType,
-  parent
-}) => {
-  useEffect(() => {
-    if (attachListener && !isUndefined(parent)) {
-      parent.addEventListener(eventType, callback, true);
-    }
-    return () => {
-      if (!isUndefined(parent)) {
-        parent.removeEventListener(eventType, callback, true);
-      }
-    };
-  }, [attachListener, callback, eventType, parent]);
-};
-
-const DirectionContext = /*#__PURE__*/createContext(Direction.LTR);
-const DirectionProvider = ({
-  direction,
-  children
-}) => {
-  return /*#__PURE__*/jsx(DirectionContext.Provider, {
-    value: direction,
-    children: children
-  });
-};
-
-const useDirection = () => {
-  const direction = useContext(DirectionContext);
-  return {
-    direction,
-    isRTL: direction === 'rtl'
-  };
-};
-
-const ObserverParams = {
-  threshold: 0.1
-};
-
-/**
- * useHasIntersected.
- * Use this custom hook to detect when an element has became visible inside the viewport. This hook checks only if the intersection happend.
- * Once the intersection has happened the hook will not return false even if the element gets out of the viewport.
- *
- * @param elRef.elRef
- * @param {object} [elRef] - node object that contains a react reference to the element that needs to be observed.
- * @param {strimng} [loading = 'eager'] - string that contains the type of loading.
- * @param elRef.loading
- * @usage `const [hasIntersected] = useHasIntersected({imageRef,loading});`
- */
-const useHasIntersected = ({
-  elRef,
-  loading
-}) => {
-  const [hasIntersected, setHasIntersected] = useState(false);
-  const {
-    current
-  } = elRef || {};
-  const isValidReference = () => {
-    return elRef && current;
-  };
-  const handleOnIntersect = (entries, observer) => {
-    entries.forEach(entry => {
-      if (entry.isIntersecting) {
-        setHasIntersected(true);
-        observer.unobserve(current);
-      }
-    });
-  };
-  useEffect(() => {
-    let observer;
-    let didCancel = false;
-
-    // Check if window is define for SSR and Old browsers fallback
-    if (typeof window === 'undefined' || !window.IntersectionObserver || !isValidReference()) {
-      setHasIntersected(true);
-    } else if (!didCancel) {
-      observer = new IntersectionObserver(handleOnIntersect, ObserverParams);
-      observer.observe(current);
-    }
-    return () => {
-      didCancel = true;
-      if (observer) {
-        observer.unobserve(current);
-      }
-    };
-  }, [elRef]);
-  if (loading === 'eager') {
-    return [false];
-  }
-  return [hasIntersected];
-};
-
-const useLayout = () => {
-  const windowReference = typeof window === 'undefined' ? undefined : window;
-  const [breakpoint, setBreakpoint] = useState();
-  const [clientWidth] = useClientWidth({
-    ref: windowReference
-  });
-  useEffect(() => {
-    if (!clientWidth) {
-      return;
-    }
-    if (clientWidth <= Breakpoint.EXTRA_SMALL) {
-      setBreakpoint(Breakpoint.EXTRA_SMALL);
-      return;
-    }
-    if (Breakpoint.EXTRA_SMALL < clientWidth && clientWidth <= Breakpoint.SMALL) {
-      setBreakpoint(Breakpoint.SMALL);
-      return;
-    }
-    if (Breakpoint.SMALL < clientWidth && clientWidth <= Breakpoint.MEDIUM) {
-      setBreakpoint(Breakpoint.MEDIUM);
-      return;
-    }
-    if (Breakpoint.MEDIUM < clientWidth && clientWidth <= Breakpoint.LARGE) {
-      setBreakpoint(Breakpoint.LARGE);
-      return;
-    }
-    if (Breakpoint.LARGE < clientWidth) {
-      setBreakpoint(Breakpoint.EXTRA_LARGE);
-    }
-  }, [clientWidth]);
-  return {
-    isMobile: !!breakpoint && [Breakpoint.EXTRA_SMALL, Breakpoint.SMALL].includes(breakpoint),
-    isExtraSmall: breakpoint === Breakpoint.EXTRA_SMALL,
-    isSmall: breakpoint === Breakpoint.SMALL,
-    isMedium: breakpoint === Breakpoint.MEDIUM,
-    isLarge: breakpoint === Breakpoint.LARGE,
-    isExtraLarge: breakpoint === Breakpoint.EXTRA_LARGE
-  };
-};
-
-/**
- * This function returns the first and the last focusable elements within a node.
- *
- * @param {Node} focusBoundaryContainer - the area that contains focused elements.
- * @returns {object} focusableEls - which contains the first focusable element and the last focusable element. First and last can be the same element if area contains one or none focusable element.
- */
-
-const getFocusableElements = focusBoundaryContainer => {
-  const focusableEls = {
-    first: focusBoundaryContainer,
-    last: focusBoundaryContainer
-  };
-  if (focusBoundaryContainer?.querySelectorAll) {
-    const allEls = [...focusBoundaryContainer.querySelectorAll('a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])')].filter(element => !element.hasAttribute('disabled'));
-    if (allEls.length > 0) {
-      [focusableEls.first] = allEls;
-      focusableEls.last = allEls[allEls.length - 1];
-    }
-  }
-  return focusableEls;
-};
-
-/**
- * This function resets the focus to either last of first focusable elements within a node.
- *
- * @param {object} focusableEls - contains the first last of first focusable elements within a node.
- * @param {object} event - the triggered event
- */
-
-const resetFocus = ({
-  focusableEls: {
-    first,
-    last
-  },
-  event
-}) => {
-  const {
-    activeElement
-  } = document;
-  if (event.shiftKey && activeElement === first) {
-    if (last) {
-      last.focus();
-    }
-    event.preventDefault();
-  }
-  if (!event.shiftKey && activeElement === last) {
-    if (first) {
-      first.focus();
-    }
-    event.preventDefault();
-  }
-};
-
-const {
-  TAB
-} = Key;
 const FocusBoundary = ({
   children
 }) => {
-  const boundaryReference = useRef(null);
-  const parent = isUndefined(document) ? undefined : document;
-  const [focusableEls, setFocusableEls] = useState({});
+  const wrapperReference = useRef(null);
   useEffect(() => {
-    if (boundaryReference?.current) {
-      boundaryReference.current.focus({
-        preventScroll: true
-      });
-      setFocusableEls(getFocusableElements(boundaryReference.current));
-    }
+    wrapperReference.current?.focus({
+      preventScroll: true
+    });
   }, []);
-  // If event type is Tab the resetFocus will force the focus to either the first focusable or last in boundaryRef .
-  useConditionalListener({
-    eventType: 'keydown',
-    callback: event => {
-      if (isKey({
-        keyType: TAB,
-        event
-      })) {
-        resetFocus({
-          event,
-          focusableEls
-        });
-      }
-    },
-    attachListener: true,
-    parent
-  });
   return /*#__PURE__*/jsx("div", {
-    ref: boundaryReference,
+    ref: wrapperReference,
     tabIndex: -1,
-    className: "np-focus-boundary outline-none",
-    children: children
+    children: /*#__PURE__*/jsx(FocusScope, {
+      contain: true,
+      restoreFocus: true,
+      children: children
+    })
   });
 };
 var FocusBoundary$1 = FocusBoundary;
@@ -1971,6 +1730,176 @@ SlidingPanel.defaultProps = {
 };
 var SlidingPanel$1 = SlidingPanel;
 
+const THROTTLE_MS = 100;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+const useClientWidth = ({
+  ref,
+  throttleMs = THROTTLE_MS
+}) => {
+  const [clientWidth, setClientWidth] = useState(null);
+  useIsomorphicLayoutEffect(() => {
+    // eslint-disable-next-line unicorn/consistent-function-scoping
+    const updateClientWidth = () => {
+      if (ref) {
+        // when `ref` is a window
+        if ('innerWidth' in ref) {
+          setClientWidth(ref.innerWidth);
+        }
+        // when `ref` is an element
+        else if (ref.current) {
+          setClientWidth(ref.current.clientWidth);
+        }
+      }
+    };
+    // This assignment saves a reference to the function so it will be the same passed to both addEventListener removeEventListener.
+    // If throttle gets passed directly to both add and removeEventListenet the results will be that the event
+    // won't get removed even if the component is unmounted.
+    const attachedFunction = throttle(updateClientWidth, throttleMs);
+    window.addEventListener('resize', attachedFunction, true);
+    // using requestAnimationFrame to perform the calculation before the next repaint
+    // getting width earlier causes issues in animations when used with react-transition-group
+    window.requestAnimationFrame(updateClientWidth);
+    return () => window.removeEventListener('resize', attachedFunction, true);
+  }, []);
+  return [clientWidth];
+};
+useClientWidth.THROTTLE_MS = THROTTLE_MS;
+
+const useConditionalListener = ({
+  attachListener,
+  callback,
+  eventType,
+  parent
+}) => {
+  useEffect(() => {
+    if (attachListener && !isUndefined(parent)) {
+      parent.addEventListener(eventType, callback, true);
+    }
+    return () => {
+      if (!isUndefined(parent)) {
+        parent.removeEventListener(eventType, callback, true);
+      }
+    };
+  }, [attachListener, callback, eventType, parent]);
+};
+
+const DirectionContext = /*#__PURE__*/createContext(Direction.LTR);
+const DirectionProvider = ({
+  direction,
+  children
+}) => {
+  return /*#__PURE__*/jsx(DirectionContext.Provider, {
+    value: direction,
+    children: children
+  });
+};
+
+const useDirection = () => {
+  const direction = useContext(DirectionContext);
+  return {
+    direction,
+    isRTL: direction === 'rtl'
+  };
+};
+
+const ObserverParams = {
+  threshold: 0.1
+};
+
+/**
+ * useHasIntersected.
+ * Use this custom hook to detect when an element has became visible inside the viewport. This hook checks only if the intersection happend.
+ * Once the intersection has happened the hook will not return false even if the element gets out of the viewport.
+ *
+ * @param elRef.elRef
+ * @param {object} [elRef] - node object that contains a react reference to the element that needs to be observed.
+ * @param {strimng} [loading = 'eager'] - string that contains the type of loading.
+ * @param elRef.loading
+ * @usage `const [hasIntersected] = useHasIntersected({imageRef,loading});`
+ */
+const useHasIntersected = ({
+  elRef,
+  loading
+}) => {
+  const [hasIntersected, setHasIntersected] = useState(false);
+  const {
+    current
+  } = elRef || {};
+  const isValidReference = () => {
+    return elRef && current;
+  };
+  const handleOnIntersect = (entries, observer) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        setHasIntersected(true);
+        observer.unobserve(current);
+      }
+    });
+  };
+  useEffect(() => {
+    let observer;
+    let didCancel = false;
+
+    // Check if window is define for SSR and Old browsers fallback
+    if (typeof window === 'undefined' || !window.IntersectionObserver || !isValidReference()) {
+      setHasIntersected(true);
+    } else if (!didCancel) {
+      observer = new IntersectionObserver(handleOnIntersect, ObserverParams);
+      observer.observe(current);
+    }
+    return () => {
+      didCancel = true;
+      if (observer) {
+        observer.unobserve(current);
+      }
+    };
+  }, [elRef]);
+  if (loading === 'eager') {
+    return [false];
+  }
+  return [hasIntersected];
+};
+
+const useLayout = () => {
+  const windowReference = typeof window === 'undefined' ? undefined : window;
+  const [breakpoint, setBreakpoint] = useState();
+  const [clientWidth] = useClientWidth({
+    ref: windowReference
+  });
+  useEffect(() => {
+    if (!clientWidth) {
+      return;
+    }
+    if (clientWidth <= Breakpoint.EXTRA_SMALL) {
+      setBreakpoint(Breakpoint.EXTRA_SMALL);
+      return;
+    }
+    if (Breakpoint.EXTRA_SMALL < clientWidth && clientWidth <= Breakpoint.SMALL) {
+      setBreakpoint(Breakpoint.SMALL);
+      return;
+    }
+    if (Breakpoint.SMALL < clientWidth && clientWidth <= Breakpoint.MEDIUM) {
+      setBreakpoint(Breakpoint.MEDIUM);
+      return;
+    }
+    if (Breakpoint.MEDIUM < clientWidth && clientWidth <= Breakpoint.LARGE) {
+      setBreakpoint(Breakpoint.LARGE);
+      return;
+    }
+    if (Breakpoint.LARGE < clientWidth) {
+      setBreakpoint(Breakpoint.EXTRA_LARGE);
+    }
+  }, [clientWidth]);
+  return {
+    isMobile: !!breakpoint && [Breakpoint.EXTRA_SMALL, Breakpoint.SMALL].includes(breakpoint),
+    isExtraSmall: breakpoint === Breakpoint.EXTRA_SMALL,
+    isSmall: breakpoint === Breakpoint.SMALL,
+    isMedium: breakpoint === Breakpoint.MEDIUM,
+    isLarge: breakpoint === Breakpoint.LARGE,
+    isExtraLarge: breakpoint === Breakpoint.EXTRA_LARGE
+  };
+};
+
 const INITIAL_Y_POSITION = 0;
 const CONTENT_SCROLL_THRESHOLD = 1;
 const MOVE_OFFSET_THRESHOLD = 50;
@@ -1980,7 +1909,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 +2063,7 @@ const BottomSheet = props => {
     })
   });
 };
-var BottomSheet$1 = BottomSheet;
+var BottomSheet$2 = BottomSheet$1;
 
 const typeClassMap$1 = {
   [ControlType.ACCENT]: 'btn-accent',
@@ -2534,7 +2463,7 @@ const Chip = ({
   }, value);
 };
 
-var messages$6 = defineMessages({
+var messages$7 = defineMessages({
   ariaLabel: {
     id: "neptune.Chips.ariaLabel"
   }
@@ -2566,7 +2495,7 @@ const Chips = ({
         value: chip.value,
         label: chip.label,
         closeButton: {
-          'aria-label': intl.formatMessage(messages$6.ariaLabel, {
+          'aria-label': intl.formatMessage(messages$7.ariaLabel, {
             choice: chip.label
           })
         },
@@ -2674,7 +2603,7 @@ const validDateObject = dateObject => dateObject instanceof Date && !isNaN(dateO
 
 const isMonthAndYearFormat = dateString => validDateString(dateString) && dateString.split('-').length < 3;
 
-var messages$5 = defineMessages({
+var messages$6 = defineMessages({
   monthLabel: {
     id: "neptune.DateInput.month.label"
   },
@@ -2714,8 +2643,10 @@ const DateInput = ({
   size,
   value,
   dayLabel,
+  dayAutoComplete,
   monthLabel,
   yearLabel,
+  yearAutoComplete,
   monthFormat,
   mode,
   onChange,
@@ -2750,12 +2681,12 @@ const DateInput = ({
   const [month, setMonth] = useState(() => getExplodedDate('month'));
   const [year, setYear] = useState(() => getExplodedDate('year'));
   const [lastBroadcastedValue, setLastBroadcastedValue] = useState(getDateObject);
-  dayLabel = dayLabel || formatMessage(messages$5.dayLabel);
-  monthLabel = monthLabel || formatMessage(messages$5.monthLabel);
-  yearLabel = yearLabel || formatMessage(messages$5.yearLabel);
+  dayLabel = dayLabel || formatMessage(messages$6.dayLabel);
+  monthLabel = monthLabel || formatMessage(messages$6.monthLabel);
+  yearLabel = yearLabel || formatMessage(messages$6.yearLabel);
   placeholders = {
     day: placeholders?.day || 'DD',
-    month: placeholders?.month || formatMessage(messages$5.monthLabel),
+    month: placeholders?.month || formatMessage(messages$6.monthLabel),
     year: placeholders?.year || 'YYYY'
   };
   const getDateAsString = date => {
@@ -2913,6 +2844,7 @@ const DateInput = ({
             children: /*#__PURE__*/jsx(Input, {
               type: "number",
               name: "day",
+              autoComplete: dayAutoComplete,
               value: day || '',
               placeholder: placeholders.day,
               disabled: disabled,
@@ -2935,6 +2867,7 @@ const DateInput = ({
             children: /*#__PURE__*/jsx(Input, {
               type: "number",
               name: "year",
+              autoComplete: yearAutoComplete,
               placeholder: placeholders.year,
               value: year || '',
               disabled: disabled,
@@ -2982,8 +2915,10 @@ DateInput.propTypes = {
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
   dayLabel: PropTypes.string,
+  dayAutoComplete: PropTypes.string,
   monthLabel: PropTypes.string,
   yearLabel: PropTypes.string,
+  yearAutoComplete: PropTypes.string,
   monthFormat: PropTypes.oneOf(['long', 'short']),
   mode: PropTypes.oneOf(['day-month-year', 'month-year']),
   placeholders: PropTypes.shape({
@@ -3161,7 +3096,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,
@@ -3182,7 +3117,7 @@ const ResponsivePanel = /*#__PURE__*/forwardRef(({
 });
 var ResponsivePanel$1 = ResponsivePanel;
 
-var messages$4 = defineMessages({
+var messages$5 = defineMessages({
   ariaLabel: {
     id: "neptune.ClearButton.ariaLabel"
   }
@@ -3245,7 +3180,7 @@ const DateTrigger = ({
         className: "input-group-addon",
         children: /*#__PURE__*/jsx(CloseButton, {
           className: `clear-btn clear-btn--${size}`,
-          "aria-label": formatMessage(messages$4.ariaLabel),
+          "aria-label": formatMessage(messages$5.ariaLabel),
           size: Size.SMALL,
           onClick: event => {
             event.stopPropagation();
@@ -3275,50 +3210,85 @@ DateTrigger.defaultProps = {
 };
 var DateTrigger$1 = DateTrigger;
 
+var messages$4 = defineMessages({
+  next: {
+    id: "neptune.DateLookup.next"
+  },
+  previous: {
+    id: "neptune.DateLookup.previous"
+  },
+  day: {
+    id: "neptune.DateLookup.day"
+  },
+  month: {
+    id: "neptune.DateLookup.month"
+  },
+  year: {
+    id: "neptune.DateLookup.year"
+  },
+  twentyYears: {
+    id: "neptune.DateLookup.twentyYears"
+  },
+  selected: {
+    id: "neptune.DateLookup.selected"
+  },
+  goTo20YearView: {
+    id: "neptune.DateLookup.goTo20YearView"
+  }
+});
+
 const buttonClasses = 'btn-link p-a-0 text-no-decoration np-text-body-large-bold rounded-sm';
 const DateHeader = ({
   label,
   onLabelClick,
   onPreviousClick,
-  onNextClick
-}) => /*#__PURE__*/jsxs("div", {
-  className: "text-xs-center p-t-1 p-b-2 clearfix",
-  children: [/*#__PURE__*/jsx("div", {
-    className: "pull-left-single-direction",
-    children: /*#__PURE__*/jsx("button", {
-      type: "button",
-      className: `d-inline-flex ${buttonClasses}`,
-      onClick: onPreviousClick,
-      children: /*#__PURE__*/jsx(Chevron$1, {
-        orientation: Position.LEFT,
-        className: "left-single-direction",
-        size: Size.MEDIUM
+  onNextClick,
+  dateMode
+}) => {
+  const intl = useIntl();
+  return /*#__PURE__*/jsxs("div", {
+    className: "text-xs-center p-t-1 p-b-2 clearfix",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "pull-left-single-direction",
+      children: /*#__PURE__*/jsx("button", {
+        type: "button",
+        className: `d-inline-flex ${buttonClasses}`,
+        "aria-label": `${intl.formatMessage(messages$4.previous)} ${dateMode}`,
+        onClick: onPreviousClick,
+        children: /*#__PURE__*/jsx(Chevron$1, {
+          orientation: Position.LEFT,
+          className: "left-single-direction",
+          size: Size.MEDIUM
+        })
       })
-    })
-  }), label && /*#__PURE__*/jsx("button", {
-    type: "button",
-    className: `tw-date-lookup-header-current ${buttonClasses}`,
-    onClick: onLabelClick,
-    children: label
-  }), /*#__PURE__*/jsx("div", {
-    className: "pull-right-single-direction",
-    children: /*#__PURE__*/jsx("button", {
+    }), label && /*#__PURE__*/jsx("button", {
       type: "button",
-      className: `d-inline-flex ${buttonClasses}`,
-      onClick: onNextClick,
-      children: /*#__PURE__*/jsx(Chevron$1, {
-        orientation: Position.RIGHT,
-        className: "right-single-direction",
-        size: Size.MEDIUM
+      className: `tw-date-lookup-header-current ${buttonClasses}`,
+      "aria-label": intl.formatMessage(messages$4.goTo20YearView),
+      onClick: onLabelClick,
+      children: label
+    }), /*#__PURE__*/jsx("div", {
+      className: "pull-right-single-direction",
+      children: /*#__PURE__*/jsx("button", {
+        type: "button",
+        className: `d-inline-flex ${buttonClasses}`,
+        "aria-label": `${useIntl().formatMessage(messages$4.next)} ${dateMode}`,
+        onClick: onNextClick,
+        children: /*#__PURE__*/jsx(Chevron$1, {
+          orientation: Position.RIGHT,
+          className: "right-single-direction",
+          size: Size.MEDIUM
+        })
       })
-    })
-  })]
-});
+    })]
+  });
+};
 DateHeader.propTypes = {
   label: PropTypes.string,
   onLabelClick: PropTypes.func,
   onPreviousClick: PropTypes.func.isRequired,
-  onNextClick: PropTypes.func.isRequired
+  onNextClick: PropTypes.func.isRequired,
+  dateMode: PropTypes.string
 };
 DateHeader.defaultProps = {
   label: null,
@@ -3344,6 +3314,12 @@ class TableLink extends PureComponent {
       this.props.onClick(this.props.item);
     }
   };
+  calculateAriaLabel = (longTitle, title, active, type, formatMessage) => {
+    if (active) {
+      return `${longTitle || title}, ${formatMessage(messages$4.selected)} ${formatMessage(messages$4[type])}`;
+    }
+    return longTitle || title;
+  };
   render() {
     const {
       item,
@@ -3352,14 +3328,17 @@ class TableLink extends PureComponent {
       longTitle,
       active,
       disabled,
-      today
+      today,
+      intl: {
+        formatMessage
+      }
     } = this.props;
     return /*#__PURE__*/jsx(Fragment, {
       children: /*#__PURE__*/jsx("button", {
         type: "button",
         className: `tw-date-lookup-${type}-option ${active ? 'active' : ''} ${today ? 'today' : ''} np-text-body-default-bold`,
         disabled: disabled,
-        "aria-label": longTitle,
+        "aria-label": this.calculateAriaLabel(longTitle, title, active, type, formatMessage),
         onClick: this.onClick,
         children: title || item
       })
@@ -3381,7 +3360,7 @@ TableLink.defaultProps = {
   title: null,
   longTitle: null
 };
-var TableLink$1 = TableLink;
+var TableLink$1 = injectIntl(TableLink);
 
 const SHORT_DAY_FORMAT = {
   day: 'numeric'
@@ -3425,6 +3404,7 @@ class DayCalendarTable extends PureComponent {
   };
   days = getDayNames(this.props.intl.locale, 'short');
   daysShort = getDayNames(this.props.intl.locale, 'narrow');
+  daysLong = getDayNames(this.props.intl.locale, 'long');
   selectDay = day => {
     const {
       viewMonth,
@@ -3468,10 +3448,16 @@ class DayCalendarTable extends PureComponent {
             className: "text-xs-center np-text-body-default-bold",
             children: [/*#__PURE__*/jsx("span", {
               className: "hidden-xs",
-              children: day.slice(0, 3)
+              children: /*#__PURE__*/jsx("abbr", {
+                title: this.daysLong[index],
+                children: day.slice(0, 3)
+              })
             }), /*#__PURE__*/jsx("span", {
               className: "visible-xs-inline-block",
-              children: this.daysShort[index].slice(0, 2)
+              children: /*#__PURE__*/jsx("abbr", {
+                title: this.daysLong[index],
+                children: this.daysShort[index].slice(0, 2)
+              })
             })]
           }, day))
         })
@@ -3539,7 +3525,8 @@ class DayCalendar extends PureComponent {
       viewMonth,
       viewYear,
       intl: {
-        locale
+        locale,
+        formatMessage
       },
       monthFormat,
       onLabelClick,
@@ -3551,6 +3538,7 @@ class DayCalendar extends PureComponent {
           month: monthFormat,
           year: 'numeric'
         }),
+        dateMode: formatMessage(messages$4.month),
         onLabelClick: onLabelClick,
         onPreviousClick: this.selectPreviousMonth,
         onNextClick: this.selectNextMonth
@@ -3670,13 +3658,15 @@ class MonthCalendar extends PureComponent {
       max,
       viewYear,
       intl: {
-        locale
+        locale,
+        formatMessage
       },
       placeholder,
       onLabelClick
     } = this.props;
     return /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(DateHeader$1, {
+        dateMode: formatMessage(messages$4.year),
         label: formatDate(new Date(viewYear, 0), locale, {
           year: 'numeric'
         }),
@@ -3794,10 +3784,14 @@ class YearCalendar extends PureComponent {
       min,
       max,
       viewYear,
-      placeholder
+      placeholder,
+      intl: {
+        formatMessage
+      }
     } = this.props;
     return /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(DateHeader$1, {
+        dateMode: formatMessage(messages$4.twentyYears),
         onPreviousClick: this.selectPreviousYears,
         onNextClick: this.selectNextYears
       }), /*#__PURE__*/jsx(YearCalendarTable$1, {
@@ -3825,7 +3819,7 @@ YearCalendar.defaultProps = {
   min: null,
   max: null
 };
-var YearCalendar$1 = YearCalendar;
+var YearCalendar$1 = injectIntl(YearCalendar);
 
 const MODE = {
   DAY: 'day',
@@ -4242,21 +4236,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 +4259,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 +5277,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 +5290,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 +5469,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 +5807,7 @@ const Modal = ({
   });
 };
 
-const Popover = ({
+const Popover$1 = ({
   children,
   className,
   content,
@@ -5893,12 +5861,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 +5883,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 +5925,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 +6114,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 +6128,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 +6139,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$5.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 +7901,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({
@@ -9464,6 +10083,7 @@ const PhoneNumberInput = props => {
         className: `input-group input-group-${size}`,
         children: /*#__PURE__*/jsx("input", {
           id: id,
+          autoComplete: "tel-national",
           name: "phoneNumber",
           inputMode: "numeric",
           value: internalValue.suffix,
@@ -9938,6 +10558,14 @@ var en = {
 	"neptune.DateInput.day.label": "Day",
 	"neptune.DateInput.month.label": "Month",
 	"neptune.DateInput.year.label": "Year",
+	"neptune.DateLookup.day": "day",
+	"neptune.DateLookup.goTo20YearView": "Go to 20 year view",
+	"neptune.DateLookup.month": "month",
+	"neptune.DateLookup.next": "next",
+	"neptune.DateLookup.previous": "previous",
+	"neptune.DateLookup.selected": "selected",
+	"neptune.DateLookup.twentyYears": "20 years",
+	"neptune.DateLookup.year": "year",
 	"neptune.Link.opensInNewTab": "(opens in new tab)",
 	"neptune.MoneyInput.Select.placeholder": "Select an option...",
 	"neptune.Select.searchPlaceholder": "Search...",
@@ -10399,6 +11027,7 @@ class Snackbar extends Component {
           ref: this.bodyRef,
           as: "span",
           className: `snackbar__text snackbar__text--${theme}`,
+          "aria-live": "polite",
           children: [text, action ? /*#__PURE__*/jsx(ActionButton, {
             className: "snackbar__text__action",
             onClick: action.onClick,
@@ -11298,7 +11927,8 @@ class Tabs extends Component {
                 children: title
               }, title);
             }), translateLineX ? /*#__PURE__*/jsx("li", {
-              className: classNames('tabs__line'),
+              role: "none",
+              className: "tabs__line",
               style: {
                 width: this.getTabLineWidth(),
                 transform: isRTL ? `translateX(-${translateLineX})` : `translateX(${translateLineX})`
@@ -12445,6 +13075,7 @@ const ProcessingStep = props => {
           'm-b-2': isModern
         }),
         type: Typography.TITLE_BODY,
+        "aria-live": "polite",
         children: psProcessingText
       }), psButtonText && /*#__PURE__*/jsx(Button, {
         disabled: psButtonDisabled,
@@ -12488,6 +13119,7 @@ const CompleteStep = props => {
       className: "droppable-card-content",
       children: [/*#__PURE__*/jsx("div", {
         className: "droppable-card-content d-flex flex-column align-items-center",
+        "aria-live": "polite",
         children: isError ? /*#__PURE__*/jsxs(Fragment, {
           children: [isModern ? /*#__PURE__*/jsx(StatusIcon, {
             size: Size.LARGE,
@@ -12856,6 +13488,7 @@ class Upload extends Component {
         onClear: event => this.handleOnClear(event)
       }), !isProcessing && /*#__PURE__*/jsx("div", {
         className: "droppable-dropping-card droppable-card",
+        "aria-live": "polite",
         children: /*#__PURE__*/jsxs("div", {
           className: "droppable-card-content",
           children: [/*#__PURE__*/jsx("div", {
@@ -13330,6 +13963,7 @@ const UploadItem = ({
         onDownload: onDownloadFile,
         children: /*#__PURE__*/jsx("div", {
           className: "np-upload-button",
+          "aria-live": "polite",
           children: /*#__PURE__*/jsxs("div", {
             className: "media",
             children: [/*#__PURE__*/jsx("div", {
@@ -14397,5 +15031,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