@transferwise/components 45.14.2 → 45.15.1

package/build/index.js

@@ -11,9 +11,15 @@ var formatting = require('@transferwise/formatting');
 var throttle = require('lodash.throttle');
 var reactTransitionGroup = require('react-transition-group');
 var reactDom = require('react-dom');
-var neptuneValidation = require('@transferwise/neptune-validation');
+var focus = require('@react-aria/focus');
 var mergeRefs = require('react-merge-refs');
+var neptuneValidation = require('@transferwise/neptune-validation');
 var reactPopper = require('react-popper');
+var react$1 = require('@headlessui/react');
+var reactId = require('@radix-ui/react-id');
+var shim = require('use-sync-external-store/shim');
+var react = require('@floating-ui/react');
+var overlays = require('@react-aria/overlays');
 var art = require('@wise/art');
 var clamp$2 = require('lodash.clamp');
 var debounce = require('lodash.debounce');
@@ -639,10 +645,8 @@ const Option$2 = /*#__PURE__*/React.forwardRef(({
         })
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "media-body",
-        children: [/*#__PURE__*/jsxRuntime.jsx(Body, {
-          as: "span",
-          type: exports.Typography.BODY_LARGE_BOLD,
-          className: "text-primary np-option__title d-block",
+        children: [/*#__PURE__*/jsxRuntime.jsx("h4", {
+          className: "np-text-body-large-bold text-primary np-option__title",
           children: title
         }), content && /*#__PURE__*/jsxRuntime.jsx(Body, {
           className: "d-block np-option__body",
@@ -792,7 +796,7 @@ const ActionOption = ({
   });
 };
 
-var messages$8 = reactIntl.defineMessages({
+var messages$9 = reactIntl.defineMessages({
   ariaLabel: {
     id: "neptune.CloseButton.ariaLabel"
   }
@@ -808,7 +812,7 @@ const CloseButton = /*#__PURE__*/React.forwardRef(function CloseButton({
   testId
 }, reference) {
   const intl = reactIntl.useIntl();
-  ariaLabel ??= intl.formatMessage(messages$8.ariaLabel);
+  ariaLabel ??= intl.formatMessage(messages$9.ariaLabel);
   const Icon = filled ? icons.CrossCircleFill : icons.Cross;
   return /*#__PURE__*/jsxRuntime.jsx("button", {
     ref: reference,
@@ -828,7 +832,7 @@ const CloseButton = /*#__PURE__*/React.forwardRef(function CloseButton({
   });
 });
 
-var messages$7 = reactIntl.defineMessages({
+var messages$8 = reactIntl.defineMessages({
   opensInNewTab: {
     id: "neptune.Link.opensInNewTab"
   }
@@ -857,7 +861,7 @@ const Link = ({
     onClick: onClick,
     ...props,
     children: [children, " ", isBlank && /*#__PURE__*/jsxRuntime.jsx(icons.NavigateAway, {
-      title: formatMessage(messages$7.opensInNewTab)
+      title: formatMessage(messages$8.opensInNewTab)
     })]
   });
 };
@@ -1433,7 +1437,7 @@ const AvatarWrapper = ({
         type: exports.AvatarType.THUMBNAIL,
         children: /*#__PURE__*/jsxRuntime.jsx("img", {
           src: url,
-          alt: "avatar",
+          alt: "",
           onError: () => setImageLoadError(true)
         }),
         ...avatarProps
@@ -1487,268 +1491,23 @@ function getInitials(name) {
   return allInitials[0] + allInitials.slice(-1);
 }
 
-const THROTTLE_MS = 100;
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-const useClientWidth = ({
-  ref,
-  throttleMs = THROTTLE_MS
-}) => {
-  const [clientWidth, setClientWidth] = React.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__default.default(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
-}) => {
-  React.useEffect(() => {
-    if (attachListener && !neptuneValidation.isUndefined(parent)) {
-      parent.addEventListener(eventType, callback, true);
-    }
-    return () => {
-      if (!neptuneValidation.isUndefined(parent)) {
-        parent.removeEventListener(eventType, callback, true);
-      }
-    };
-  }, [attachListener, callback, eventType, parent]);
-};
-
-const DirectionContext = /*#__PURE__*/React.createContext(exports.Direction.LTR);
-const DirectionProvider = ({
-  direction,
-  children
-}) => {
-  return /*#__PURE__*/jsxRuntime.jsx(DirectionContext.Provider, {
-    value: direction,
-    children: children
-  });
-};
-
-const useDirection = () => {
-  const direction = React.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] = React.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);
-      }
-    });
-  };
-  React.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] = React.useState();
-  const [clientWidth] = useClientWidth({
-    ref: windowReference
-  });
-  React.useEffect(() => {
-    if (!clientWidth) {
-      return;
-    }
-    if (clientWidth <= exports.Breakpoint.EXTRA_SMALL) {
-      setBreakpoint(exports.Breakpoint.EXTRA_SMALL);
-      return;
-    }
-    if (exports.Breakpoint.EXTRA_SMALL < clientWidth && clientWidth <= exports.Breakpoint.SMALL) {
-      setBreakpoint(exports.Breakpoint.SMALL);
-      return;
-    }
-    if (exports.Breakpoint.SMALL < clientWidth && clientWidth <= exports.Breakpoint.MEDIUM) {
-      setBreakpoint(exports.Breakpoint.MEDIUM);
-      return;
-    }
-    if (exports.Breakpoint.MEDIUM < clientWidth && clientWidth <= exports.Breakpoint.LARGE) {
-      setBreakpoint(exports.Breakpoint.LARGE);
-      return;
-    }
-    if (exports.Breakpoint.LARGE < clientWidth) {
-      setBreakpoint(exports.Breakpoint.EXTRA_LARGE);
-    }
-  }, [clientWidth]);
-  return {
-    isMobile: !!breakpoint && [exports.Breakpoint.EXTRA_SMALL, exports.Breakpoint.SMALL].includes(breakpoint),
-    isExtraSmall: breakpoint === exports.Breakpoint.EXTRA_SMALL,
-    isSmall: breakpoint === exports.Breakpoint.SMALL,
-    isMedium: breakpoint === exports.Breakpoint.MEDIUM,
-    isLarge: breakpoint === exports.Breakpoint.LARGE,
-    isExtraLarge: breakpoint === exports.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 = React.useRef(null);
-  const parent = neptuneValidation.isUndefined(document) ? undefined : document;
-  const [focusableEls, setFocusableEls] = React.useState({});
+  const wrapperReference = React.useRef(null);
   React.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 (neptuneValidation.isKey({
-        keyType: TAB,
-        event
-      })) {
-        resetFocus({
-          event,
-          focusableEls
-        });
-      }
-    },
-    attachListener: true,
-    parent
-  });
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    ref: boundaryReference,
+    ref: wrapperReference,
     tabIndex: -1,
-    className: "np-focus-boundary outline-none",
-    children: children
+    children: /*#__PURE__*/jsxRuntime.jsx(focus.FocusScope, {
+      contain: true,
+      restoreFocus: true,
+      children: children
+    })
   });
 };
 var FocusBoundary$1 = FocusBoundary;
@@ -2004,6 +1763,176 @@ SlidingPanel.defaultProps = {
 };
 var SlidingPanel$1 = SlidingPanel;
 
+const THROTTLE_MS = 100;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+const useClientWidth = ({
+  ref,
+  throttleMs = THROTTLE_MS
+}) => {
+  const [clientWidth, setClientWidth] = React.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__default.default(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
+}) => {
+  React.useEffect(() => {
+    if (attachListener && !neptuneValidation.isUndefined(parent)) {
+      parent.addEventListener(eventType, callback, true);
+    }
+    return () => {
+      if (!neptuneValidation.isUndefined(parent)) {
+        parent.removeEventListener(eventType, callback, true);
+      }
+    };
+  }, [attachListener, callback, eventType, parent]);
+};
+
+const DirectionContext = /*#__PURE__*/React.createContext(exports.Direction.LTR);
+const DirectionProvider = ({
+  direction,
+  children
+}) => {
+  return /*#__PURE__*/jsxRuntime.jsx(DirectionContext.Provider, {
+    value: direction,
+    children: children
+  });
+};
+
+const useDirection = () => {
+  const direction = React.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] = React.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);
+      }
+    });
+  };
+  React.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] = React.useState();
+  const [clientWidth] = useClientWidth({
+    ref: windowReference
+  });
+  React.useEffect(() => {
+    if (!clientWidth) {
+      return;
+    }
+    if (clientWidth <= exports.Breakpoint.EXTRA_SMALL) {
+      setBreakpoint(exports.Breakpoint.EXTRA_SMALL);
+      return;
+    }
+    if (exports.Breakpoint.EXTRA_SMALL < clientWidth && clientWidth <= exports.Breakpoint.SMALL) {
+      setBreakpoint(exports.Breakpoint.SMALL);
+      return;
+    }
+    if (exports.Breakpoint.SMALL < clientWidth && clientWidth <= exports.Breakpoint.MEDIUM) {
+      setBreakpoint(exports.Breakpoint.MEDIUM);
+      return;
+    }
+    if (exports.Breakpoint.MEDIUM < clientWidth && clientWidth <= exports.Breakpoint.LARGE) {
+      setBreakpoint(exports.Breakpoint.LARGE);
+      return;
+    }
+    if (exports.Breakpoint.LARGE < clientWidth) {
+      setBreakpoint(exports.Breakpoint.EXTRA_LARGE);
+    }
+  }, [clientWidth]);
+  return {
+    isMobile: !!breakpoint && [exports.Breakpoint.EXTRA_SMALL, exports.Breakpoint.SMALL].includes(breakpoint),
+    isExtraSmall: breakpoint === exports.Breakpoint.EXTRA_SMALL,
+    isSmall: breakpoint === exports.Breakpoint.SMALL,
+    isMedium: breakpoint === exports.Breakpoint.MEDIUM,
+    isLarge: breakpoint === exports.Breakpoint.LARGE,
+    isExtraLarge: breakpoint === exports.Breakpoint.EXTRA_LARGE
+  };
+};
+
 const INITIAL_Y_POSITION = 0;
 const CONTENT_SCROLL_THRESHOLD = 1;
 const MOVE_OFFSET_THRESHOLD = 50;
@@ -2013,7 +1942,7 @@ const MOVE_OFFSET_THRESHOLD = 50;
  * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet
  *
  */
-const BottomSheet = props => {
+const BottomSheet$1 = props => {
   const bottomSheetReference = React.useRef(null);
   const topBarReference = React.useRef(null);
   const contentReference = React.useRef(null);
@@ -2167,7 +2096,7 @@ const BottomSheet = props => {
     })
   });
 };
-var BottomSheet$1 = BottomSheet;
+var BottomSheet$2 = BottomSheet$1;
 
 const typeClassMap$1 = {
   [exports.ControlType.ACCENT]: 'btn-accent',
@@ -2567,7 +2496,7 @@ const Chip = ({
   }, value);
 };
 
-var messages$6 = reactIntl.defineMessages({
+var messages$7 = reactIntl.defineMessages({
   ariaLabel: {
     id: "neptune.Chips.ariaLabel"
   }
@@ -2599,7 +2528,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
           })
         },
@@ -2707,7 +2636,7 @@ const validDateObject = dateObject => dateObject instanceof Date && !isNaN(dateO
 
 const isMonthAndYearFormat = dateString => validDateString(dateString) && dateString.split('-').length < 3;
 
-var messages$5 = reactIntl.defineMessages({
+var messages$6 = reactIntl.defineMessages({
   monthLabel: {
     id: "neptune.DateInput.month.label"
   },
@@ -2747,8 +2676,10 @@ const DateInput = ({
   size,
   value,
   dayLabel,
+  dayAutoComplete,
   monthLabel,
   yearLabel,
+  yearAutoComplete,
   monthFormat,
   mode,
   onChange,
@@ -2783,12 +2714,12 @@ const DateInput = ({
   const [month, setMonth] = React.useState(() => getExplodedDate('month'));
   const [year, setYear] = React.useState(() => getExplodedDate('year'));
   const [lastBroadcastedValue, setLastBroadcastedValue] = React.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 => {
@@ -2946,6 +2877,7 @@ const DateInput = ({
             children: /*#__PURE__*/jsxRuntime.jsx(Input, {
               type: "number",
               name: "day",
+              autoComplete: dayAutoComplete,
               value: day || '',
               placeholder: placeholders.day,
               disabled: disabled,
@@ -2968,6 +2900,7 @@ const DateInput = ({
             children: /*#__PURE__*/jsxRuntime.jsx(Input, {
               type: "number",
               name: "year",
+              autoComplete: yearAutoComplete,
               placeholder: placeholders.year,
               value: year || '',
               disabled: disabled,
@@ -3015,8 +2948,10 @@ DateInput.propTypes = {
   onFocus: PropTypes__default.default.func,
   onBlur: PropTypes__default.default.func,
   dayLabel: PropTypes__default.default.string,
+  dayAutoComplete: PropTypes__default.default.string,
   monthLabel: PropTypes__default.default.string,
   yearLabel: PropTypes__default.default.string,
+  yearAutoComplete: PropTypes__default.default.string,
   monthFormat: PropTypes__default.default.oneOf(['long', 'short']),
   mode: PropTypes__default.default.oneOf(['day-month-year', 'month-year']),
   placeholders: PropTypes__default.default.shape({
@@ -3194,7 +3129,7 @@ const ResponsivePanel = /*#__PURE__*/React.forwardRef(({
     isMobile
   } = useLayout();
   if (isMobile) {
-    return /*#__PURE__*/jsxRuntime.jsx(BottomSheet$1, {
+    return /*#__PURE__*/jsxRuntime.jsx(BottomSheet$2, {
       open: open,
       className: className,
       onClose: onClose,
@@ -3215,7 +3150,7 @@ const ResponsivePanel = /*#__PURE__*/React.forwardRef(({
 });
 var ResponsivePanel$1 = ResponsivePanel;
 
-var messages$4 = reactIntl.defineMessages({
+var messages$5 = reactIntl.defineMessages({
   ariaLabel: {
     id: "neptune.ClearButton.ariaLabel"
   }
@@ -3278,7 +3213,7 @@ const DateTrigger = ({
         className: "input-group-addon",
         children: /*#__PURE__*/jsxRuntime.jsx(CloseButton, {
           className: `clear-btn clear-btn--${size}`,
-          "aria-label": formatMessage(messages$4.ariaLabel),
+          "aria-label": formatMessage(messages$5.ariaLabel),
           size: exports.Size.SMALL,
           onClick: event => {
             event.stopPropagation();
@@ -3308,50 +3243,85 @@ DateTrigger.defaultProps = {
 };
 var DateTrigger$1 = DateTrigger;
 
+var messages$4 = reactIntl.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__*/jsxRuntime.jsxs("div", {
-  className: "text-xs-center p-t-1 p-b-2 clearfix",
-  children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "pull-left-single-direction",
-    children: /*#__PURE__*/jsxRuntime.jsx("button", {
-      type: "button",
-      className: `d-inline-flex ${buttonClasses}`,
-      onClick: onPreviousClick,
-      children: /*#__PURE__*/jsxRuntime.jsx(Chevron$1, {
-        orientation: exports.Position.LEFT,
-        className: "left-single-direction",
-        size: exports.Size.MEDIUM
+  onNextClick,
+  dateMode
+}) => {
+  const intl = reactIntl.useIntl();
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "text-xs-center p-t-1 p-b-2 clearfix",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "pull-left-single-direction",
+      children: /*#__PURE__*/jsxRuntime.jsx("button", {
+        type: "button",
+        className: `d-inline-flex ${buttonClasses}`,
+        "aria-label": `${intl.formatMessage(messages$4.previous)} ${dateMode}`,
+        onClick: onPreviousClick,
+        children: /*#__PURE__*/jsxRuntime.jsx(Chevron$1, {
+          orientation: exports.Position.LEFT,
+          className: "left-single-direction",
+          size: exports.Size.MEDIUM
+        })
       })
-    })
-  }), label && /*#__PURE__*/jsxRuntime.jsx("button", {
-    type: "button",
-    className: `tw-date-lookup-header-current ${buttonClasses}`,
-    onClick: onLabelClick,
-    children: label
-  }), /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "pull-right-single-direction",
-    children: /*#__PURE__*/jsxRuntime.jsx("button", {
+    }), label && /*#__PURE__*/jsxRuntime.jsx("button", {
       type: "button",
-      className: `d-inline-flex ${buttonClasses}`,
-      onClick: onNextClick,
-      children: /*#__PURE__*/jsxRuntime.jsx(Chevron$1, {
-        orientation: exports.Position.RIGHT,
-        className: "right-single-direction",
-        size: exports.Size.MEDIUM
+      className: `tw-date-lookup-header-current ${buttonClasses}`,
+      "aria-label": intl.formatMessage(messages$4.goTo20YearView),
+      onClick: onLabelClick,
+      children: label
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "pull-right-single-direction",
+      children: /*#__PURE__*/jsxRuntime.jsx("button", {
+        type: "button",
+        className: `d-inline-flex ${buttonClasses}`,
+        "aria-label": `${reactIntl.useIntl().formatMessage(messages$4.next)} ${dateMode}`,
+        onClick: onNextClick,
+        children: /*#__PURE__*/jsxRuntime.jsx(Chevron$1, {
+          orientation: exports.Position.RIGHT,
+          className: "right-single-direction",
+          size: exports.Size.MEDIUM
+        })
       })
-    })
-  })]
-});
+    })]
+  });
+};
 DateHeader.propTypes = {
   label: PropTypes__default.default.string,
   onLabelClick: PropTypes__default.default.func,
   onPreviousClick: PropTypes__default.default.func.isRequired,
-  onNextClick: PropTypes__default.default.func.isRequired
+  onNextClick: PropTypes__default.default.func.isRequired,
+  dateMode: PropTypes__default.default.string
 };
 DateHeader.defaultProps = {
   label: null,
@@ -3377,6 +3347,12 @@ class TableLink extends React.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,
@@ -3385,14 +3361,17 @@ class TableLink extends React.PureComponent {
       longTitle,
       active,
       disabled,
-      today
+      today,
+      intl: {
+        formatMessage
+      }
     } = this.props;
     return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
       children: /*#__PURE__*/jsxRuntime.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
       })
@@ -3414,7 +3393,7 @@ TableLink.defaultProps = {
   title: null,
   longTitle: null
 };
-var TableLink$1 = TableLink;
+var TableLink$1 = reactIntl.injectIntl(TableLink);
 
 const SHORT_DAY_FORMAT = {
   day: 'numeric'
@@ -3458,6 +3437,7 @@ class DayCalendarTable extends React.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,
@@ -3501,10 +3481,16 @@ class DayCalendarTable extends React.PureComponent {
             className: "text-xs-center np-text-body-default-bold",
             children: [/*#__PURE__*/jsxRuntime.jsx("span", {
               className: "hidden-xs",
-              children: day.slice(0, 3)
+              children: /*#__PURE__*/jsxRuntime.jsx("abbr", {
+                title: this.daysLong[index],
+                children: day.slice(0, 3)
+              })
             }), /*#__PURE__*/jsxRuntime.jsx("span", {
               className: "visible-xs-inline-block",
-              children: this.daysShort[index].slice(0, 2)
+              children: /*#__PURE__*/jsxRuntime.jsx("abbr", {
+                title: this.daysLong[index],
+                children: this.daysShort[index].slice(0, 2)
+              })
             })]
           }, day))
         })
@@ -3572,7 +3558,8 @@ class DayCalendar extends React.PureComponent {
       viewMonth,
       viewYear,
       intl: {
-        locale
+        locale,
+        formatMessage
       },
       monthFormat,
       onLabelClick,
@@ -3584,6 +3571,7 @@ class DayCalendar extends React.PureComponent {
           month: monthFormat,
           year: 'numeric'
         }),
+        dateMode: formatMessage(messages$4.month),
         onLabelClick: onLabelClick,
         onPreviousClick: this.selectPreviousMonth,
         onNextClick: this.selectNextMonth
@@ -3703,13 +3691,15 @@ class MonthCalendar extends React.PureComponent {
       max,
       viewYear,
       intl: {
-        locale
+        locale,
+        formatMessage
       },
       placeholder,
       onLabelClick
     } = this.props;
     return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx(DateHeader$1, {
+        dateMode: formatMessage(messages$4.year),
         label: formatting.formatDate(new Date(viewYear, 0), locale, {
           year: 'numeric'
         }),
@@ -3827,10 +3817,14 @@ class YearCalendar extends React.PureComponent {
       min,
       max,
       viewYear,
-      placeholder
+      placeholder,
+      intl: {
+        formatMessage
+      }
     } = this.props;
     return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx(DateHeader$1, {
+        dateMode: formatMessage(messages$4.twentyYears),
         onPreviousClick: this.selectPreviousYears,
         onNextClick: this.selectNextYears
       }), /*#__PURE__*/jsxRuntime.jsx(YearCalendarTable$1, {
@@ -3858,7 +3852,7 @@ YearCalendar.defaultProps = {
   min: null,
   max: null
 };
-var YearCalendar$1 = YearCalendar;
+var YearCalendar$1 = reactIntl.injectIntl(YearCalendar);
 
 const MODE = {
   DAY: 'day',
@@ -4275,21 +4269,14 @@ const Tile = ({
   title
 }) => {
   const isSmall = size === exports.Size.SMALL;
-  const {
-    isModern
-  } = componentsTheming.useTheme();
   const Element = href ? 'a' : 'button';
   return /*#__PURE__*/jsxRuntime.jsxs(Element, {
     className: classNames__default.default('decision', 'flex-column', 'np-tile', 'text-no-decoration', 'text-xs-center', className, {
-      'p-a-3': !isSmall && isModern,
-      'p-y-5 p-x-4': !isSmall && !isModern,
-      'p-a-2': isSmall,
-      'np-tile--small': isSmall,
-      disabled
-    }),
+      'p-a-3': !isSmall,
+      'p-a-2 np-tile--small': isSmall
+    }, disabled && 'disabled'),
     href: href,
     target: target,
-    "aria-label": title,
     onClick: disabled ? null : onClick,
     onKeyDown: disabled ? null : ({
       key
@@ -4305,15 +4292,12 @@ const Tile = ({
       type: exports.Typography.TITLE_SUBSECTION,
       className: classNames__default.default(isSmall ? 'm-t-1' : 'm-t-2'),
       children: title
-    }), isModern && description && /*#__PURE__*/jsxRuntime.jsx(Body, {
+    }), description ? /*#__PURE__*/jsxRuntime.jsx(Body, {
       as: "span",
       type: exports.Typography.BODY_DEFAULT,
       className: "m-t-1",
       children: description
-    }), !isModern && description && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "np-tile__description",
-      children: description
-    })]
+    }) : null]
   });
 };
 Tile.propTypes = {
@@ -5326,14 +5310,6 @@ LogoWise.defaultProps = {
   height: "24",
   fill: "none"
 };
-const baseUrl = 'https://wise.com/public-resources/assets/logos/wise/';
-const logoPaths = {
-  WISE: 'brand_logo.svg',
-  WISE_BUSINESS: 'brand_logo_business.svg',
-  WISE_INVERSE: 'brand_logo_inverse.svg',
-  WISE_BUSINESS_INVERSE: 'brand_logo_business_inverse.svg',
-  WISE_FLAG: 'brand_flag.svg'
-};
 const svgPaths = {
   WISE: LogoWise,
   WISE_BUSINESS: LogoWise,
@@ -5347,21 +5323,14 @@ const Logo = ({
   inverse,
   type
 }) => {
-  const {
-    isModern
-  } = componentsTheming.useTheme();
   const [clientWidth] = useClientWidth({
     ref: isServerSide() ? undefined : window
   });
   const isSmall = clientWidth < exports.Breakpoint.SMALL;
-  const path = isSmall ? logoPaths['WISE_FLAG'] : logoPaths[`${type}${inverse ? '_INVERSE' : ''}`];
   const LogoSvg = isSmall ? svgPaths[`WISE_FLAG${inverse ? '_INVERSE' : ''}`] : svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
-  return isModern ? /*#__PURE__*/jsxRuntime.jsx(LogoSvg, {
-    className: "np-logo-svg"
-  }) : /*#__PURE__*/jsxRuntime.jsx("img", {
-    className: classNames__default.default('np-logo', className),
-    alt: type === exports.LogoType.WISE ? 'Wise' : 'Wise business',
-    src: `${baseUrl}${path}`
+  return /*#__PURE__*/jsxRuntime.jsx(LogoSvg, {
+    className: classNames__default.default('np-logo-svg', className),
+    alt: type === exports.LogoType.WISE ? 'Wise' : 'Wise business'
   });
 };
 Logo.propTypes = {
@@ -5533,13 +5502,12 @@ const Stepper = ({
       children: /*#__PURE__*/jsxRuntime.jsx("small", {
         children: step.label
       })
-    }) : /*#__PURE__*/jsxRuntime.jsx(Body, {
-      as: "span",
-      className: "tw-stepper__step-label small",
+    }) : /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "tw-stepper__step-label",
       children: step.label
     });
     return /*#__PURE__*/jsxRuntime.jsx("li", {
-      className: classNames__default.default('hidden-xs', 'tw-stepper__step', active && 'tw-stepper__step--active', clickable && 'tw-stepper__step--clickable', step.hoverLabel && 'tw-stepper__step--has-tooltip'),
+      className: classNames__default.default('hidden-xs', 'tw-stepper__step', active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default', clickable && 'tw-stepper__step--clickable', step.hoverLabel && 'tw-stepper__step--has-tooltip'),
       style: isRTL ? {
         right: `${index * stepPercentage * 100}%`
       } : {
@@ -5872,7 +5840,7 @@ const Modal = ({
   });
 };
 
-const Popover = ({
+const Popover$1 = ({
   children,
   className,
   content,
@@ -5926,12 +5894,12 @@ const logActionRequired = ({
 }) => {
   logActionRequiredIf(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${deprecatedPlacements[preferredPlacement]} instead.`, deprecatedPlacements[preferredPlacement]);
 };
-Popover.defaultProps = {
+Popover$1.defaultProps = {
   className: undefined,
   preferredPlacement: exports.Position.RIGHT,
   title: undefined
 };
-Popover.propTypes = {
+Popover$1.propTypes = {
   children: PropTypes__default.default.node.isRequired,
   className: PropTypes__default.default.string,
   content: PropTypes__default.default.node.isRequired,
@@ -5948,7 +5916,7 @@ const deprecatedPlacements = {
   [exports.Position.LEFT_TOP]: exports.Position.TOP,
   [exports.Position.RIGHT_TOP]: exports.Position.TOP
 };
-var Popover$1 = Popover;
+var Popover$2 = Popover$1;
 
 const Info = ({
   className = undefined,
@@ -5990,7 +5958,7 @@ const Info = ({
         title: title,
         onClose: () => setOpen(false)
       })]
-    }) : /*#__PURE__*/jsxRuntime.jsx(Popover$1, {
+    }) : /*#__PURE__*/jsxRuntime.jsx(Popover$2, {
       content: content,
       preferredPlacement: exports.Position.BOTTOM,
       title: title,
@@ -6179,11 +6147,12 @@ function formControlClassNameBase({
     'np-form-control--size-sm np-text-body-default': size === 'sm',
     'np-form-control--size-md np-text-body-large': size === 'md',
     'np-form-control--size-lg np-text-title-subsection': size === 'lg'
-  }, 'np-form-control--shape-rectangle');
+  });
 }
 
 const Input = /*#__PURE__*/React.forwardRef(function Input({
   size = 'auto',
+  shape = 'rectangle',
   className,
   ...restProps
 }, reference) {
@@ -6192,7 +6161,10 @@ const Input = /*#__PURE__*/React.forwardRef(function Input({
     ref: reference,
     className: classNames__default.default(className, formControlClassNameBase({
       size
-    }))
+    }), 'np-input', {
+      'np-input--shape-rectangle': shape === 'rectangle',
+      'np-input--shape-pill': shape === 'pill'
+    })
     // eslint-disable-next-line react/forbid-dom-props
     ,
     style: inputPaddings,
@@ -6200,6 +6172,653 @@ const Input = /*#__PURE__*/React.forwardRef(function Input({
   });
 });
 
+const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
+  shape = 'pill',
+  disabled,
+  className,
+  ...restProps
+}, ref) {
+  return /*#__PURE__*/jsxRuntime.jsx(InputGroup, {
+    addonStart: {
+      content: /*#__PURE__*/jsxRuntime.jsx(icons.Search, {
+        size: 24
+      }),
+      initialContentWidth: 24
+    },
+    disabled: disabled,
+    className: className,
+    children: /*#__PURE__*/jsxRuntime.jsx(Input, {
+      ref: ref,
+      role: "searchbox",
+      inputMode: "search",
+      shape: shape,
+      ...restProps
+    })
+  });
+});
+
+function useMedia(query) {
+  return shim.useSyncExternalStore(onStoreChange => {
+    const mediaQueryList = window.matchMedia(query);
+    mediaQueryList.addEventListener('change', onStoreChange);
+    return () => {
+      mediaQueryList.removeEventListener('change', onStoreChange);
+    };
+  }, () => typeof window !== 'undefined' ? window.matchMedia(query).matches : undefined, () => undefined);
+}
+
+function useScreenSize(size) {
+  return useMedia(`(min-width: ${size}px)`);
+}
+
+function wrapInFragment(value) {
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: value
+  });
+}
+
+function PreventScroll() {
+  overlays.usePreventScroll();
+  return null;
+}
+
+function BottomSheet({
+  open,
+  renderTrigger,
+  title,
+  initialFocusRef,
+  padding = 'md',
+  children,
+  onClose
+}) {
+  const {
+    refs,
+    context
+  } = react.useFloating({
+    open,
+    onOpenChange: value => {
+      if (!value) {
+        onClose?.();
+      }
+    }
+  });
+  const dismiss = react.useDismiss(context, {
+    outsidePressEvent: 'mousedown'
+  });
+  const role = react.useRole(context);
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = react.useInteractions([dismiss, role]);
+  const [floatingKey, setFloatingKey] = React.useState(0);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [open ? /*#__PURE__*/jsxRuntime.jsx(PreventScroll, {}) : null, renderTrigger?.({
+      ref: refs.setReference,
+      getInteractionProps: getReferenceProps
+    }), /*#__PURE__*/jsxRuntime.jsx(react.FloatingPortal, {
+      children: /*#__PURE__*/jsxRuntime.jsxs(react$1.Transition, {
+        show: open,
+        className: "np-bottom-sheet-v2-container",
+        beforeEnter: () => {
+          setFloatingKey(prev => prev + 1);
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx(react$1.Transition.Child, {
+          enter: "np-bottom-sheet-v2-backdrop-container--enter",
+          enterFrom: "np-bottom-sheet-v2-backdrop-container--enter-from",
+          leave: "np-bottom-sheet-v2-backdrop-container--leave",
+          leaveTo: "np-bottom-sheet-v2-backdrop-container--leave-to",
+          children: /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "np-bottom-sheet-v2-backdrop"
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
+          context: context,
+          initialFocus: initialFocusRef,
+          children: /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "np-bottom-sheet-v2",
+            children: /*#__PURE__*/jsxRuntime.jsx(react$1.Transition.Child, {
+              className: "np-bottom-sheet-v2-content",
+              enter: "np-bottom-sheet-v2-content--enter",
+              enterFrom: "np-bottom-sheet-v2-content--enter-from",
+              leave: "np-bottom-sheet-v2-content--leave",
+              leaveTo: "np-bottom-sheet-v2-content--leave-to",
+              children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+                // Force inner state invalidation on open
+                ref: refs.setFloating,
+                className: "np-bottom-sheet-v2-content-inner-container",
+                ...getFloatingProps(),
+                children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                  className: "np-bottom-sheet-v2-header",
+                  children: /*#__PURE__*/jsxRuntime.jsx(CloseButton, {
+                    size: exports.Size.SMALL,
+                    onClick: () => {
+                      onClose?.();
+                    }
+                  })
+                }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: classNames__default.default('np-bottom-sheet-v2-content-inner', title && 'np-bottom-sheet-v2-content-inner--has-title', {
+                    'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md'
+                  }),
+                  children: [title ? /*#__PURE__*/jsxRuntime.jsx("h2", {
+                    className: "np-bottom-sheet-v2-title np-text-title-body",
+                    children: title
+                  }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
+                    className: "np-bottom-sheet-v2-body np-text-body-default",
+                    children: children
+                  })]
+                })]
+              }, floatingKey)
+            })
+          })
+        })]
+      })
+    })]
+  });
+}
+
+const ButtonInput = /*#__PURE__*/React.forwardRef(function ButtonInput({
+  size = 'md',
+  className,
+  style,
+  ...restProps
+}, ref) {
+  const inputPaddings = useInputPaddings();
+  return /*#__PURE__*/jsxRuntime.jsx("button", {
+    ref: ref,
+    type: "button",
+    className: classNames__default.default(className, formControlClassNameBase({
+      size
+    }), 'np-button-input')
+    // eslint-disable-next-line react/forbid-dom-props
+    ,
+    style: {
+      ...inputPaddings,
+      ...style
+    },
+    ...restProps
+  });
+});
+
+const floatingPadding = 16;
+function Popover({
+  placement,
+  open,
+  renderTrigger,
+  title,
+  padding = 'md',
+  children,
+  onClose
+}) {
+  const {
+    refs,
+    floatingStyles,
+    context
+  } = react.useFloating({
+    placement,
+    middleware: [react.offset(8), react.flip({
+      padding: floatingPadding,
+      crossAxis: false
+    }), react.shift(), react.size({
+      padding: floatingPadding,
+      apply: ({
+        elements,
+        rects,
+        availableHeight
+      }) => {
+        elements.floating.style.setProperty('--max-height', `${availableHeight}px`);
+        elements.floating.style.setProperty('--width', `${rects.reference.width}px`);
+      }
+    })],
+    whileElementsMounted: react.autoUpdate,
+    open,
+    onOpenChange: value => {
+      if (!value) {
+        onClose?.();
+      }
+    }
+  });
+  const dismiss = react.useDismiss(context, {
+    outsidePressEvent: 'mousedown'
+  });
+  const role = react.useRole(context);
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = react.useInteractions([role, dismiss]);
+  const [floatingKey, setFloatingKey] = React.useState(0);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [open ? /*#__PURE__*/jsxRuntime.jsx(PreventScroll, {}) : null, renderTrigger({
+      ref: refs.setReference,
+      getInteractionProps: getReferenceProps
+    }), /*#__PURE__*/jsxRuntime.jsx(react.FloatingPortal, {
+      children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
+        context: context,
+        children: /*#__PURE__*/jsxRuntime.jsx(react$1.Transition, {
+          show: open,
+          leave: "transition-opacity",
+          leaveTo: "opacity-0",
+          beforeEnter: () => {
+            setFloatingKey(prev => prev + 1);
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx("div", {
+            // Force inner state invalidation on open
+            ref: refs.setFloating,
+            className: "np-popover-v2-container"
+            // eslint-disable-next-line react/forbid-dom-props
+            ,
+            style: floatingStyles,
+            ...getFloatingProps(),
+            children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: classNames__default.default('np-popover-v2', title && 'np-popover-v2--has-title', {
+                'np-popover-v2--padding-md': padding === 'md'
+              }),
+              children: [title ? /*#__PURE__*/jsxRuntime.jsx("h2", {
+                className: "np-popover-v2-title np-text-title-body",
+                children: title
+              }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "np-popover-v2-content np-text-body-default",
+                children: children
+              })]
+            })
+          }, floatingKey)
+        })
+      })
+    })]
+  });
+}
+
+function searchableString(value) {
+  return value.trim().replace(/\s+/gu, ' ').toLowerCase();
+}
+function inferSearchableStrings(value) {
+  if (typeof value === 'string') {
+    return [searchableString(value)];
+  }
+  if (typeof value === 'object' && value != null) {
+    return Object.values(value).filter(innerValue => typeof innerValue === 'string').map(innerValue => searchableString(innerValue));
+  }
+  return [];
+}
+const SelectInputHasValueContext = /*#__PURE__*/React.createContext(false);
+const SelectInputOptionContentCompactContext = /*#__PURE__*/React.createContext(false);
+function dedupeSelectInputOptionItem(item, existingValues) {
+  if (existingValues.has(item.value)) {
+    return {
+      ...item,
+      value: undefined
+    };
+  }
+  existingValues.add(item.value);
+  return item;
+}
+function dedupeSelectInputItems(items) {
+  const existingValues = new Set();
+  return items.map(item => {
+    switch (item.type) {
+      case 'option':
+        {
+          return dedupeSelectInputOptionItem(item, existingValues);
+        }
+      case 'group':
+        {
+          return {
+            ...item,
+            options: item.options.map(option => dedupeSelectInputOptionItem(option, existingValues))
+          };
+        }
+    }
+    return item;
+  });
+}
+function SelectInput({
+  name,
+  placeholder,
+  items,
+  defaultValue,
+  value: controlledValue,
+  renderValue = wrapInFragment,
+  compareValues,
+  filterable,
+  filterPlaceholder,
+  disabled,
+  className,
+  onChange,
+  onClear
+}) {
+  const intl = reactIntl.useIntl();
+  const [open, setOpen] = React.useState(false);
+  const triggerRef = React.useRef(null);
+  const screenSm = useScreenSize(exports.Breakpoint.SMALL);
+  const OptionsOverlay = screenSm ? Popover : BottomSheet;
+  const searchInputRef = React.useRef(null);
+  const listboxRef = React.useRef(null);
+  const controllerRef = filterable ? searchInputRef : listboxRef;
+  return /*#__PURE__*/jsxRuntime.jsx(react$1.Listbox, {
+    name: name,
+    defaultValue: defaultValue,
+    value: controlledValue
+    // TODO: Remove assertion when upgrading TypeScript to v5
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    ,
+    by: compareValues,
+    disabled: disabled,
+    onChange: value => {
+      setOpen(false);
+      onChange?.(value);
+    },
+    children: ({
+      disabled: uiDisabled,
+      value
+    }) => /*#__PURE__*/jsxRuntime.jsx(SelectInputHasValueContext.Provider, {
+      value: value != null,
+      children: /*#__PURE__*/jsxRuntime.jsx(InputGroup, {
+        addonEnd: {
+          content: /*#__PURE__*/jsxRuntime.jsxs("span", {
+            className: classNames__default.default('np-select-input-addon-container', uiDisabled && 'disabled'),
+            children: [onClear != null && value != null ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/jsxRuntime.jsx("button", {
+                type: "button",
+                "aria-label": intl.formatMessage(messages$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__*/jsxRuntime.jsx(icons.Cross, {
+                  size: 16
+                })
+              }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "np-select-input-addon-separator"
+              })]
+            }) : null, /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "np-select-input-addon",
+              children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronDown, {
+                size: 16
+              })
+            })]
+          }),
+          padding: 'sm'
+        },
+        className: className,
+        children: /*#__PURE__*/jsxRuntime.jsx(OptionsOverlay, {
+          open: open,
+          renderTrigger: ({
+            ref,
+            getInteractionProps
+          }) => /*#__PURE__*/jsxRuntime.jsx(react$1.Listbox.Button, {
+            ref: mergeRefs__default.default([ref, triggerRef]),
+            as: SelectInputButton,
+            overrides: getInteractionProps(),
+            onClick: () => {
+              setOpen(prev => !prev);
+            },
+            children: value != null ? /*#__PURE__*/jsxRuntime.jsx(SelectInputOptionContentCompactContext.Provider, {
+              value: true,
+              children: renderValue(value, true)
+            }) : /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "np-select-input-placeholder",
+              children: placeholder
+            })
+          }),
+          initialFocusRef: controllerRef,
+          padding: "none",
+          onClose: () => {
+            setOpen(false);
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(SelectInputOptions, {
+            items: items,
+            renderValue: renderValue,
+            filterable: filterable,
+            filterPlaceholder: filterPlaceholder,
+            searchInputRef: searchInputRef,
+            listboxRef: listboxRef
+          })
+        })
+      })
+    })
+  });
+}
+const SelectInputButton = /*#__PURE__*/React.forwardRef(function SelectInputButton({
+  overrides,
+  ...restProps
+}, ref) {
+  return /*#__PURE__*/jsxRuntime.jsx(ButtonInput, {
+    ref: ref,
+    ...restProps,
+    ...overrides
+  });
+});
+const SelectInputOptionsContainer = /*#__PURE__*/React.forwardRef(function SelectInputOptionsContainer({
+  'aria-orientation': ariaOrientation,
+  'aria-activedescendant': ariaActiveDescendant,
+  role,
+  tabIndex,
+  onAriaActiveDescendantChange,
+  onKeyDown,
+  ...restProps
+}, ref) {
+  const handleAriaActiveDescendantChange = useEffectEvent(onAriaActiveDescendantChange);
+  React.useEffect(() => {
+    handleAriaActiveDescendantChange(ariaActiveDescendant);
+  }, [ariaActiveDescendant, handleAriaActiveDescendantChange]);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    jsxRuntime.jsx("div", {
+      ref: ref,
+      onKeyDown: event => {
+        // Prevent absorbing dismissal requests too early
+        if (event.key !== 'Escape') {
+          onKeyDown?.(event);
+        }
+      },
+      ...restProps
+    })
+  );
+});
+function SelectInputOptions({
+  items,
+  renderValue = wrapInFragment,
+  filterable,
+  filterPlaceholder,
+  searchInputRef,
+  listboxRef
+}) {
+  const [query, setQuery] = React.useState('');
+  const needle = React.useMemo(() => query ? searchableString(query) : null, [query]);
+  const listboxContainerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (listboxContainerRef.current != null) {
+      listboxContainerRef.current.style.setProperty('--initial-height', `${listboxContainerRef.current.offsetHeight}px`);
+    }
+  }, []);
+  const listboxId = reactId.useId();
+  const controllerRef = filterable ? searchInputRef : listboxRef;
+  return /*#__PURE__*/jsxRuntime.jsxs(react$1.Listbox.Options, {
+    as: SelectInputOptionsContainer,
+    static: true,
+    className: "np-select-input-options-container",
+    onAriaActiveDescendantChange: value => {
+      if (controllerRef.current != null) {
+        if (value != null) {
+          controllerRef.current.setAttribute('aria-activedescendant', value);
+        } else {
+          controllerRef.current.removeAttribute('aria-activedescendant');
+        }
+      }
+    },
+    children: [filterable ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "np-select-input-query-container",
+      children: /*#__PURE__*/jsxRuntime.jsx(SearchInput, {
+        ref: searchInputRef,
+        shape: "rectangle",
+        placeholder: filterPlaceholder,
+        value: query,
+        "aria-controls": listboxId,
+        onKeyDown: event => {
+          // Prevent interfering with the matcher of Headless UI
+          // https://mathiasbynens.be/notes/javascript-unicode#regex
+          if (/^.$/u.test(event.key)) {
+            event.stopPropagation();
+          }
+        },
+        onChange: event => {
+          setQuery(event.currentTarget.value);
+        }
+      })
+    }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: listboxContainerRef,
+      className: classNames__default.default('np-select-input-listbox-container', items.some(item => item.type === 'group') && 'np-select-input-listbox-container--has-group'),
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        ref: listboxRef,
+        id: listboxId,
+        role: "listbox",
+        "aria-orientation": "vertical",
+        tabIndex: 0,
+        className: "np-select-input-listbox",
+        children: (needle == null ? items : dedupeSelectInputItems(items)).map((item, index) => /*#__PURE__*/jsxRuntime.jsx(SelectInputItemView
+        // eslint-disable-next-line react/no-array-index-key
+        , {
+          item: item,
+          renderValue: renderValue,
+          needle: needle
+        }, index))
+      })
+    })]
+  });
+}
+function SelectInputItemView({
+  item,
+  renderValue,
+  needle
+}) {
+  switch (item.type) {
+    case 'option':
+      {
+        if (item.value != null && (!needle || inferSearchableStrings(item.filterMatchers ?? item.value).some(haystack => haystack.includes(needle)))) {
+          return /*#__PURE__*/jsxRuntime.jsx(SelectInputOption, {
+            value: item.value,
+            disabled: item.disabled,
+            children: renderValue(item.value, false)
+          });
+        }
+        break;
+      }
+    case 'group':
+      {
+        return /*#__PURE__*/jsxRuntime.jsx(SelectInputGroupItemView, {
+          item: item,
+          renderValue: renderValue,
+          needle: needle
+        });
+      }
+    case 'separator':
+      {
+        if (needle == null) {
+          return /*#__PURE__*/jsxRuntime.jsx("hr", {
+            className: "np-select-input-separator-item",
+            "aria-hidden": true
+          });
+        }
+        break;
+      }
+  }
+  return null;
+}
+function SelectInputGroupItemView({
+  item,
+  renderValue,
+  needle
+}) {
+  const headerId = reactId.useId();
+  return (
+    /*#__PURE__*/
+    // An empty container may be rendered when no options match `needle`
+    // However, pre-filtering would result in worse performance overall
+    jsxRuntime.jsxs("section", {
+      role: "group",
+      "aria-labelledby": headerId,
+      className: classNames__default.default(needle == null && 'np-select-input-group-item--without-needle'),
+      children: [needle == null ? /*#__PURE__*/jsxRuntime.jsx("header", {
+        id: headerId,
+        role: "presentation",
+        className: "np-select-input-group-item-header np-text-title-group",
+        children: item.label
+      }) : null, item.options.map((option, index) => /*#__PURE__*/jsxRuntime.jsx(SelectInputItemView
+      // eslint-disable-next-line react/no-array-index-key
+      , {
+        item: option,
+        renderValue: renderValue,
+        needle: needle
+      }, index))]
+    })
+  );
+}
+function SelectInputOption({
+  value,
+  disabled,
+  children
+}) {
+  const parentHasValue = React.useContext(SelectInputHasValueContext);
+  // Avoid flash during exit transition
+  const {
+    current: cachedParentHasValue
+  } = React.useRef(parentHasValue);
+  return /*#__PURE__*/jsxRuntime.jsx(react$1.Listbox.Option, {
+    as: "div",
+    value: value,
+    disabled: disabled,
+    className: ({
+      active,
+      disabled: uiDisabled
+    }) => classNames__default.default('np-select-input-option-container np-text-body-large', active && 'np-select-input-option-container--active', uiDisabled && 'np-select-input-option-container--disabled'),
+    children: ({
+      selected
+    }) => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [cachedParentHasValue ? /*#__PURE__*/jsxRuntime.jsx(icons.Check, {
+        size: 16,
+        className: classNames__default.default(!selected && 'np-select-input-option-check--not-selected')
+      }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "np-select-input-option",
+        children: children
+      })]
+    })
+  });
+}
+function SelectInputOptionContent({
+  title,
+  note,
+  description,
+  icon
+}) {
+  const compact = React.useContext(SelectInputOptionContentCompactContext);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "np-select-input-option-content-container np-text-body-large",
+    children: [icon ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classNames__default.default('np-select-input-option-content-icon', !compact && 'np-select-input-option-content-icon--not-compact'),
+      children: icon
+    }) : null, /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "np-select-input-option-content-text",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: classNames__default.default('np-select-input-option-content-text-line-1', compact && 'np-select-input-option-content-text-compact'),
+        children: [/*#__PURE__*/jsxRuntime.jsx("h4", {
+          className: "d-inline np-text-body-large",
+          children: title
+        }), note ? /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "np-select-input-option-content-text-secondary np-text-body-default",
+          children: note
+        }) : null]
+      }), description ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classNames__default.default('np-select-input-option-content-text-secondary np-text-body-default', compact && 'np-select-input-option-content-text-compact'),
+        children: description
+      }) : null]
+    })]
+  });
+}
+
 const TextArea = /*#__PURE__*/React.forwardRef(function TextArea({
   className,
   ...restProps
@@ -7315,7 +7934,7 @@ function Select({
       headerTitle: searchPlaceholder || formatMessage(messages$3.searchPlaceholder),
       onClose: handleCloseOptions,
       children: renderOptionsList()
-    }) : /*#__PURE__*/jsxRuntime.jsx(BottomSheet$1, {
+    }) : /*#__PURE__*/jsxRuntime.jsx(BottomSheet$2, {
       open: open,
       onClose: handleCloseOptions,
       children: renderOptionsList({
@@ -9497,6 +10116,7 @@ const PhoneNumberInput = props => {
         className: `input-group input-group-${size}`,
         children: /*#__PURE__*/jsxRuntime.jsx("input", {
           id: id,
+          autoComplete: "tel-national",
           name: "phoneNumber",
           inputMode: "numeric",
           value: internalValue.suffix,
@@ -9971,6 +10591,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...",
@@ -10432,6 +11060,7 @@ class Snackbar extends React.Component {
           ref: this.bodyRef,
           as: "span",
           className: `snackbar__text snackbar__text--${theme}`,
+          "aria-live": "polite",
           children: [text, action ? /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
             className: "snackbar__text__action",
             onClick: action.onClick,
@@ -11331,7 +11960,8 @@ class Tabs extends React.Component {
                 children: title
               }, title);
             }), translateLineX ? /*#__PURE__*/jsxRuntime.jsx("li", {
-              className: classNames__default.default('tabs__line'),
+              role: "none",
+              className: "tabs__line",
               style: {
                 width: this.getTabLineWidth(),
                 transform: isRTL ? `translateX(-${translateLineX})` : `translateX(${translateLineX})`
@@ -12478,6 +13108,7 @@ const ProcessingStep = props => {
           'm-b-2': isModern
         }),
         type: exports.Typography.TITLE_BODY,
+        "aria-live": "polite",
         children: psProcessingText
       }), psButtonText && /*#__PURE__*/jsxRuntime.jsx(Button, {
         disabled: psButtonDisabled,
@@ -12521,6 +13152,7 @@ const CompleteStep = props => {
       className: "droppable-card-content",
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
         className: "droppable-card-content d-flex flex-column align-items-center",
+        "aria-live": "polite",
         children: isError ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [isModern ? /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
             size: exports.Size.LARGE,
@@ -12889,6 +13521,7 @@ class Upload extends React.Component {
         onClear: event => this.handleOnClear(event)
       }), !isProcessing && /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "droppable-dropping-card droppable-card",
+        "aria-live": "polite",
         children: /*#__PURE__*/jsxRuntime.jsxs("div", {
           className: "droppable-card-content",
           children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -13363,6 +13996,7 @@ const UploadItem = ({
         onDownload: onDownloadFile,
         children: /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "np-upload-button",
+          "aria-live": "polite",
           children: /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "media",
             children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -14439,7 +15073,7 @@ exports.AvatarWrapper = AvatarWrapper;
 exports.Badge = Badge;
 exports.BaseCard = Card;
 exports.Body = Body;
-exports.BottomSheet = BottomSheet$1;
+exports.BottomSheet = BottomSheet$2;
 exports.Button = Button;
 exports.Card = Card$2;
 exports.Checkbox = Checkbox$1;
@@ -14487,7 +15121,7 @@ exports.Nudge = Nudge;
 exports.Option = Option$2;
 exports.OverlayHeader = OverlayHeader$1;
 exports.PhoneNumberInput = PhoneNumberInput$1;
-exports.Popover = Popover$1;
+exports.Popover = Popover$2;
 exports.ProcessIndicator = ProcessIndicator$1;
 exports.Progress = Progress;
 exports.ProgressBar = ProgressBar;
@@ -14499,8 +15133,11 @@ exports.Radio = Radio$1;
 exports.RadioGroup = RadioGroup$1;
 exports.RadioOption = RadioOption$1;
 exports.SUPPORTED_LANGUAGES = SUPPORTED_LANGUAGES;
+exports.SearchInput = SearchInput;
 exports.Section = Section;
 exports.Select = Select;
+exports.SelectInput = SelectInput;
+exports.SelectInputOptionContent = SelectInputOptionContent;
 exports.SlidingPanel = SlidingPanel$1;
 exports.SnackbarConsumer = SnackbarConsumer;
 exports.SnackbarContext = SnackbarContext;