@transferwise/components 45.15.0 → 45.16.0

package/build/index.js

@@ -11,8 +11,9 @@ 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');
@@ -644,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",
@@ -797,7 +796,7 @@ const ActionOption = ({
   });
 };
 
-var messages$8 = reactIntl.defineMessages({
+var messages$9 = reactIntl.defineMessages({
   ariaLabel: {
     id: "neptune.CloseButton.ariaLabel"
   }
@@ -813,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,
@@ -833,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"
   }
@@ -862,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)
     })]
   });
 };
@@ -1184,8 +1183,8 @@ const Alert = props => {
     setShouldFire(false);
   };
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    role: "alert",
     className: classNames__default.default('alert d-flex', `alert-${mappedType}`, className),
+    "data-testid": "alert",
     onTouchStart: handleTouchStart,
     onTouchEnd: handleTouchEnd,
     onTouchMove: handleTouchMove,
@@ -1194,17 +1193,20 @@ const Alert = props => {
       "data-testid": variant,
       children: [generateIcon(), /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "alert__message",
-        children: [title && /*#__PURE__*/jsxRuntime.jsx(Title, {
-          className: "m-b-1",
-          type: exports.Typography.TITLE_BODY,
-          children: title
-        }), /*#__PURE__*/jsxRuntime.jsx(Body, {
-          as: "span",
-          className: "d-block",
-          type: exports.Typography.BODY_LARGE,
-          children: children || /*#__PURE__*/jsxRuntime.jsx(InlineMarkdown$1, {
-            children: message
-          })
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          role: exports.Sentiment.NEGATIVE === mappedType ? 'alert' : 'status',
+          children: [title && /*#__PURE__*/jsxRuntime.jsx(Title, {
+            className: "m-b-1",
+            type: exports.Typography.TITLE_BODY,
+            children: title
+          }), /*#__PURE__*/jsxRuntime.jsx(Body, {
+            as: "span",
+            className: "d-block",
+            type: exports.Typography.BODY_LARGE,
+            children: children || /*#__PURE__*/jsxRuntime.jsx(InlineMarkdown$1, {
+              children: message
+            })
+          })]
         }), action && /*#__PURE__*/jsxRuntime.jsx(Link, {
           href: action.href,
           className: "m-t-1",
@@ -1438,7 +1440,7 @@ const AvatarWrapper = ({
         type: exports.AvatarType.THUMBNAIL,
         children: /*#__PURE__*/jsxRuntime.jsx("img", {
           src: url,
-          alt: "avatar",
+          alt: "",
           onError: () => setImageLoadError(true)
         }),
         ...avatarProps
@@ -1492,268 +1494,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;
@@ -1944,70 +1701,240 @@ const DimmerContentWrapper = ({
   scrollBody
 }) => {
   React.useEffect(() => {
-    if (scrollBody) {
-      addNoScrollClass();
+    if (scrollBody) {
+      addNoScrollClass();
+    }
+    return () => {
+      if (scrollBody) {
+        removeNoScrollClass();
+      }
+    };
+  }, [scrollBody]);
+  return children;
+};
+var Dimmer$1 = withNextPortalWrapper(Dimmer);
+
+const EXIT_ANIMATION = 350;
+const SlidingPanel = /*#__PURE__*/React.forwardRef(({
+  children,
+  className,
+  open,
+  position,
+  showSlidingPanelBorder,
+  slidingPanelPositionFixed,
+  ...rest
+}, reference) => {
+  /** @type {RefObject<HTMLDivElement>} */
+  const localReference = React.useRef(null);
+  return /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
+    ...rest,
+    nodeRef: localReference,
+    in: open
+    // Wait for animation to finish before unmount.
+    ,
+    timeout: {
+      enter: 0,
+      exit: EXIT_ANIMATION
+    },
+    classNames: classNames__default.default(`sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, {
+      'sliding-panel--fixed': slidingPanelPositionFixed
+    }, 'sliding-panel'),
+    appear: true,
+    unmountOnExit: true,
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: mergeRefs__default.default([reference, localReference]),
+      className: classNames__default.default('sliding-panel', `sliding-panel--open-${position}`, className),
+      children: children
+    })
+  });
+});
+SlidingPanel.propTypes = {
+  children: PropTypes__default.default.node,
+  className: PropTypes__default.default.string,
+  open: PropTypes__default.default.bool,
+  position: PropTypes__default.default.oneOf(['top', 'bottom', 'left', 'right']),
+  showSlidingPanelBorder: PropTypes__default.default.bool,
+  slidingPanelPositionFixed: PropTypes__default.default.bool
+};
+SlidingPanel.defaultProps = {
+  children: null,
+  className: undefined,
+  open: false,
+  position: 'left',
+  showSlidingPanelBorder: false,
+  slidingPanelPositionFixed: false
+};
+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 () => {
-      if (scrollBody) {
-        removeNoScrollClass();
+      didCancel = true;
+      if (observer) {
+        observer.unobserve(current);
       }
     };
-  }, [scrollBody]);
-  return children;
+  }, [elRef]);
+  if (loading === 'eager') {
+    return [false];
+  }
+  return [hasIntersected];
 };
-var Dimmer$1 = withNextPortalWrapper(Dimmer);
 
-const EXIT_ANIMATION = 350;
-const SlidingPanel = /*#__PURE__*/React.forwardRef(({
-  children,
-  className,
-  open,
-  position,
-  showSlidingPanelBorder,
-  slidingPanelPositionFixed,
-  ...rest
-}, reference) => {
-  /** @type {RefObject<HTMLDivElement>} */
-  const localReference = React.useRef(null);
-  return /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
-    ...rest,
-    nodeRef: localReference,
-    in: open
-    // Wait for animation to finish before unmount.
-    ,
-    timeout: {
-      enter: 0,
-      exit: EXIT_ANIMATION
-    },
-    classNames: classNames__default.default(`sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, {
-      'sliding-panel--fixed': slidingPanelPositionFixed
-    }, 'sliding-panel'),
-    appear: true,
-    unmountOnExit: true,
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      ref: mergeRefs__default.default([reference, localReference]),
-      className: classNames__default.default('sliding-panel', `sliding-panel--open-${position}`, className),
-      children: children
-    })
+const useLayout = () => {
+  const windowReference = typeof window === 'undefined' ? undefined : window;
+  const [breakpoint, setBreakpoint] = React.useState();
+  const [clientWidth] = useClientWidth({
+    ref: windowReference
   });
-});
-SlidingPanel.propTypes = {
-  children: PropTypes__default.default.node,
-  className: PropTypes__default.default.string,
-  open: PropTypes__default.default.bool,
-  position: PropTypes__default.default.oneOf(['top', 'bottom', 'left', 'right']),
-  showSlidingPanelBorder: PropTypes__default.default.bool,
-  slidingPanelPositionFixed: PropTypes__default.default.bool
-};
-SlidingPanel.defaultProps = {
-  children: null,
-  className: undefined,
-  open: false,
-  position: 'left',
-  showSlidingPanelBorder: false,
-  slidingPanelPositionFixed: false
+  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
+  };
 };
-var SlidingPanel$1 = SlidingPanel;
 
 const INITIAL_Y_POSITION = 0;
 const CONTENT_SCROLL_THRESHOLD = 1;
@@ -2366,7 +2293,7 @@ var Card$2 = Card$1;
 
 const Card = ({
   className,
-  children,
+  children = null,
   id,
   isDisabled = false,
   isSmall = false,
@@ -2389,7 +2316,10 @@ const Card = ({
       size: isSmall ? 'sm' : 'md',
       isDisabled: isDisabled,
       testId: "close-button",
-      onClick: onDismiss
+      onClick: e => {
+        stopPropagation$1(e);
+        onDismiss();
+      }
     }), children]
   });
 };
@@ -2572,7 +2502,7 @@ const Chip = ({
   }, value);
 };
 
-var messages$6 = reactIntl.defineMessages({
+var messages$7 = reactIntl.defineMessages({
   ariaLabel: {
     id: "neptune.Chips.ariaLabel"
   }
@@ -2604,7 +2534,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
           })
         },
@@ -2712,7 +2642,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"
   },
@@ -2752,8 +2682,10 @@ const DateInput = ({
   size,
   value,
   dayLabel,
+  dayAutoComplete,
   monthLabel,
   yearLabel,
+  yearAutoComplete,
   monthFormat,
   mode,
   onChange,
@@ -2788,12 +2720,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 => {
@@ -2951,6 +2883,7 @@ const DateInput = ({
             children: /*#__PURE__*/jsxRuntime.jsx(Input, {
               type: "number",
               name: "day",
+              autoComplete: dayAutoComplete,
               value: day || '',
               placeholder: placeholders.day,
               disabled: disabled,
@@ -2973,6 +2906,7 @@ const DateInput = ({
             children: /*#__PURE__*/jsxRuntime.jsx(Input, {
               type: "number",
               name: "year",
+              autoComplete: yearAutoComplete,
               placeholder: placeholders.year,
               value: year || '',
               disabled: disabled,
@@ -3020,8 +2954,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({
@@ -3220,7 +3156,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"
   }
@@ -3283,7 +3219,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();
@@ -3313,50 +3249,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,
@@ -3382,6 +3353,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,
@@ -3390,14 +3367,18 @@ 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),
+        "aria-pressed": active,
         onClick: this.onClick,
         children: title || item
       })
@@ -3419,7 +3400,7 @@ TableLink.defaultProps = {
   title: null,
   longTitle: null
 };
-var TableLink$1 = TableLink;
+var TableLink$1 = reactIntl.injectIntl(TableLink);
 
 const SHORT_DAY_FORMAT = {
   day: 'numeric'
@@ -3463,6 +3444,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,
@@ -3506,10 +3488,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))
         })
@@ -3577,7 +3565,8 @@ class DayCalendar extends React.PureComponent {
       viewMonth,
       viewYear,
       intl: {
-        locale
+        locale,
+        formatMessage
       },
       monthFormat,
       onLabelClick,
@@ -3589,6 +3578,7 @@ class DayCalendar extends React.PureComponent {
           month: monthFormat,
           year: 'numeric'
         }),
+        dateMode: formatMessage(messages$4.month),
         onLabelClick: onLabelClick,
         onPreviousClick: this.selectPreviousMonth,
         onNextClick: this.selectNextMonth
@@ -3708,13 +3698,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'
         }),
@@ -3832,10 +3824,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, {
@@ -3863,7 +3859,7 @@ YearCalendar.defaultProps = {
   min: null,
   max: null
 };
-var YearCalendar$1 = YearCalendar;
+var YearCalendar$1 = reactIntl.injectIntl(YearCalendar);
 
 const MODE = {
   DAY: 'day',
@@ -6262,65 +6258,74 @@ function BottomSheet({
     getFloatingProps
   } = react.useInteractions([dismiss, role]);
   const [floatingKey, setFloatingKey] = React.useState(0);
+  const {
+    theme,
+    screenMode
+  } = componentsTheming.useTheme();
   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
+      children: /*#__PURE__*/jsxRuntime.jsx(componentsTheming.ThemeProvider, {
+        theme: theme,
+        screenMode: screenMode,
+        isNotRootProvider: true,
+        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)
+                }, floatingKey)
+              })
             })
-          })
-        })]
+          })]
+        })
       })
     })]
   });
@@ -6396,41 +6401,50 @@ function Popover({
     getFloatingProps
   } = react.useInteractions([role, dismiss]);
   const [floatingKey, setFloatingKey] = React.useState(0);
+  const {
+    theme,
+    screenMode
+  } = componentsTheming.useTheme();
   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)
+      children: /*#__PURE__*/jsxRuntime.jsx(componentsTheming.ThemeProvider, {
+        theme: theme,
+        screenMode: screenMode,
+        isNotRootProvider: true,
+        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)
+          })
         })
       })
     })]
@@ -6528,7 +6542,7 @@ function SelectInput({
             children: [onClear != null && value != null ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
               children: [/*#__PURE__*/jsxRuntime.jsx("button", {
                 type: "button",
-                "aria-label": intl.formatMessage(messages$4.ariaLabel),
+                "aria-label": intl.formatMessage(messages$5.ariaLabel),
                 disabled: uiDisabled,
                 className: "np-select-input-addon np-select-input-addon--interactive",
                 onClick: event => {
@@ -10127,6 +10141,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,
@@ -10378,10 +10393,12 @@ const PromoCardIndicator = ({
   children,
   label,
   icon,
+  isSmall = false,
   testid,
   ...rest
 }) => {
-  const IconComponent = icon && {
+  const isIconString = icon && typeof icon === 'string';
+  const IconComponent = isIconString && {
     check: icons.Check,
     arrow: icons.ArrowRight,
     download: icons.Download
@@ -10395,12 +10412,15 @@ const PromoCardIndicator = ({
       type: exports.Typography.BODY_LARGE_BOLD,
       className: "np-Card-indicatorText",
       children: label
-    }), IconComponent && /*#__PURE__*/jsxRuntime.jsx("span", {
+    }), icon && /*#__PURE__*/jsxRuntime.jsx(Avatar, {
+      type: exports.AvatarType.ICON,
+      size: isSmall ? 40 : 56,
+      backgroundColor: "var(--Card-indicator-icon-background-color)",
       className: "np-Card-indicatorIcon",
-      children: /*#__PURE__*/jsxRuntime.jsx(IconComponent, {
+      children: IconComponent ? /*#__PURE__*/jsxRuntime.jsx(IconComponent, {
         size: 24,
         "aria-hidden": "true"
-      })
+      }) : icon
     }), children]
   });
 };
@@ -10462,6 +10482,7 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
   imageClass,
   imageSource,
   indicatorLabel,
+  indicatorIcon,
   isChecked,
   isDisabled,
   onClick,
@@ -10472,6 +10493,8 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
   title,
   type,
   value,
+  isSmall,
+  useDisplayFont = true,
   ...props
 }, reference) => {
   // Set the `checked` state to the value of `defaultChecked` if it is truthy,
@@ -10495,7 +10518,19 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
   // Set the icon to `'arrow'` if `href` is truthy and `type` is falsy, or
   // `'download'` if `download` is truthy. If neither condition is true, set
   // `icon` to `undefined`.
-  const icon = href && download ? 'download' : href ? 'arrow' : undefined;
+  // Create a function to get icon type
+  const getIconType = () => {
+    if (indicatorIcon) {
+      return indicatorIcon;
+    }
+    if (download) {
+      return 'download';
+    }
+    if (href && !type) {
+      return 'arrow';
+    }
+    return undefined;
+  };
   // Define all class names string based on the values of the `href`, `type`,
   // `checked`, and `className` props.
   const commonClasses = classNames__default.default({
@@ -10512,7 +10547,8 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
     isDisabled: isDisabled || contextIsDisabled,
     onClick,
     ref: reference,
-    'data-testid': testId
+    'data-testid': testId,
+    isSmall
   };
   // Object with Anchor props that will be passed to the `a` element. These
   // won't be refurned if set to `isDisabled`
@@ -10540,6 +10576,27 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
     ref: reference,
     tabIndex: 0
   } : {};
+  const getTitle = () => {
+    const titleContent = href && !type ? /*#__PURE__*/jsxRuntime.jsx("a", {
+      className: "np-Card-titleLink",
+      ...anchorProps,
+      children: title
+    }) : title;
+    const titleProps = {
+      id: `${componentId}-title`,
+      as: headingLevel,
+      className: 'np-Card-title'
+    };
+    return useDisplayFont ? /*#__PURE__*/jsxRuntime.jsx(Display, {
+      type: exports.Typography.DISPLAY_SMALL,
+      ...titleProps,
+      children: titleContent
+    }) : /*#__PURE__*/jsxRuntime.jsx(Title, {
+      type: exports.Typography.TITLE_SUBSECTION,
+      ...titleProps,
+      children: titleContent
+    });
+  };
   React.useEffect(() => {
     setChecked(defaultChecked ?? isChecked ?? false);
   }, [defaultChecked, isChecked]);
@@ -10553,17 +10610,7 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
         size: 24,
         "aria-hidden": "true"
       })
-    }), /*#__PURE__*/jsxRuntime.jsx(Display, {
-      id: `${componentId}-title`,
-      as: headingLevel,
-      className: "np-Card-title",
-      type: exports.Typography.DISPLAY_SMALL,
-      children: href && !type ? /*#__PURE__*/jsxRuntime.jsx("a", {
-        className: "np-Card-titleLink",
-        ...anchorProps,
-        children: title
-      }) : title
-    }), /*#__PURE__*/jsxRuntime.jsx(Body, {
+    }), getTitle(), /*#__PURE__*/jsxRuntime.jsx(Body, {
       className: "np-Card-description",
       children: description
     }), imageSource && /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -10577,7 +10624,8 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
       })
     }), /*#__PURE__*/jsxRuntime.jsx(PromoCardIndicator, {
       label: indicatorLabel,
-      icon: icon
+      icon: getIconType(),
+      isSmall: isSmall
     })]
   });
 });
@@ -10601,6 +10649,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...",
@@ -11062,6 +11118,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,
@@ -11961,7 +12018,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})`
@@ -13108,6 +13166,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,
@@ -13151,6 +13210,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,
@@ -13519,6 +13579,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", {
@@ -13993,6 +14054,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", {