@transferwise/components 0.0.0-experimental-693e956 → 0.0.0-experimental-d729abf

package/build/index.mjs

@@ -1,22 +1,22 @@
 import * as React from 'react';
-import React__default, { forwardRef, useId, cloneElement, useState, useEffect, useRef, useMemo, Component, createContext, useContext, useSyncExternalStore, useCallback, useImperativeHandle, createElement, PureComponent, createRef, isValidElement, Children, Fragment as Fragment$1 } from 'react';
+import React__default, { forwardRef, useId, cloneElement, useState, useRef, useEffect, useCallback, Component, createContext, useContext, useSyncExternalStore, useImperativeHandle, createElement, Children, useMemo, PureComponent, createRef, isValidElement, Fragment as Fragment$1 } from 'react';
 import classNames from 'classnames';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ChevronUp, CrossCircleFill, Cross, Check, Info as Info$1, Alert as Alert$1, ClockBorderless, NavigateAway, Briefcase, Person, ArrowRight, Download, ChevronLeft, ChevronRight, AlertCircleFill, AlertCircle, ArrowLeft, QuestionMarkCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle } from '@transferwise/icons';
-import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
-import PropTypes from 'prop-types';
-import commonmark from 'commonmark';
+import { ChevronUp, NavigateAway, CrossCircleFill, Cross, Check, Info as Info$1, Alert as Alert$1, ClockBorderless, Briefcase, Person, ArrowRight, Download, ChevronLeft, ChevronRight, AlertCircleFill, AlertCircle, ArrowLeft, QuestionMarkCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle } from '@transferwise/icons';
+import { usePopper } from 'react-popper';
 import { useTheme, ThemeProvider } from '@wise/components-theming';
 import { CSSTransition } from 'react-transition-group';
 import { FocusScope } from '@react-aria/focus';
 import { createPortal } from 'react-dom';
+import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
 import { isUndefined, isNumber, isEmpty, isNull } from '@transferwise/neptune-validation';
+import PropTypes from 'prop-types';
+import commonmark from 'commonmark';
 import { formatDate, formatMoney, formatAmount } from '@transferwise/formatting';
 import { Transition, Listbox } from '@headlessui/react';
 import mergeProps from 'merge-props';
 import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingFocusManager, offset, flip, shift, size, autoUpdate } from '@floating-ui/react';
 import { usePreventScroll } from '@react-aria/overlays';
-import { usePopper } from 'react-popper';
 import { Flag, Illustration } from '@wise/art';
 import clamp$2 from 'lodash.clamp';
 import debounce from 'lodash.debounce';
@@ -664,585 +664,358 @@ const ActionOption = ({
   });
 };
 
-var messages$d = defineMessages({
-  ariaLabel: {
-    id: "neptune.CloseButton.ariaLabel"
-  }
-});
-
-const CloseButton = /*#__PURE__*/forwardRef(function CloseButton({
-  'aria-label': ariaLabel,
-  size = Size.MEDIUM,
-  filled = false,
-  className,
-  onClick,
-  isDisabled,
-  testId
-}, reference) {
-  const intl = useIntl();
-  ariaLabel ??= intl.formatMessage(messages$d.ariaLabel);
-  const Icon = filled ? CrossCircleFill : Cross;
-  return /*#__PURE__*/jsx("button", {
-    ref: reference,
-    type: "button",
-    className: classNames('np-close-button', 'close btn-link', 'text-no-decoration', {
-      'np-close-button--large': size === Size.MEDIUM,
-      'np-close-button--x-large': size === Size.LARGE
-    }, className),
-    "aria-label": ariaLabel,
-    "aria-disabled": isDisabled,
-    disabled: isDisabled,
-    "data-testid": testId,
-    onClick: onClick,
-    children: /*#__PURE__*/jsx(Icon, {
-      size: size === Size.SMALL ? 16 : 24
-    })
-  });
-});
-
-const iconTypeMap = {
-  positive: Check,
-  neutral: Info$1,
-  warning: Alert$1,
-  negative: Cross,
-  pending: ClockBorderless,
-  info: Info$1,
-  error: Cross,
-  success: Check
-};
-const StatusIcon = ({
-  sentiment = 'neutral',
-  size = 'md'
+const FocusBoundary = ({
+  children
 }) => {
-  const Icon = iconTypeMap[sentiment];
-  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
-  return /*#__PURE__*/jsx("span", {
-    "data-testid": "status-icon",
-    className: classNames('status-circle', 'status-circle-' + size, sentiment),
-    children: /*#__PURE__*/jsx(Icon, {
-      className: classNames('status-icon', iconColor)
+  const wrapperReference = useRef(null);
+  useEffect(() => {
+    wrapperReference.current?.focus({
+      preventScroll: true
+    });
+  }, []);
+  return /*#__PURE__*/jsx(FocusScope, {
+    contain: true,
+    restoreFocus: true,
+    children: /*#__PURE__*/jsx("div", {
+      ref: wrapperReference,
+      tabIndex: -1,
+      children: children
     })
   });
 };
 
-const DEFAULT_TYPE = Typography.TITLE_GROUP;
-const titleTypeMapping = {
-  [Typography.TITLE_SCREEN]: 'h1',
-  [Typography.TITLE_SECTION]: 'h2',
-  [Typography.TITLE_SUBSECTION]: 'h3',
-  [Typography.TITLE_BODY]: 'h4',
-  [Typography.TITLE_GROUP]: 'h5'
-};
-function Title({
-  as,
-  type = DEFAULT_TYPE,
-  className,
-  ...props
-}) {
-  const mapping = titleTypeMapping[type];
-  const isTypeSupported = mapping !== undefined;
-  if (isTypeSupported) {
-    const HeaderTag = as ?? mapping;
-    return /*#__PURE__*/jsx(HeaderTag, {
-      ...props,
-      className: classNames(`np-text-${type}`, className)
-    });
-  }
-  const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];
-  return /*#__PURE__*/jsx(HeaderTag, {
-    ...props,
-    className: classNames(`np-text-${DEFAULT_TYPE}`, className)
-  });
-}
-
-function logActionRequired(message) {
-  if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
-    // eslint-disable-next-line no-console
-    console.warn(message);
-  }
-}
-function logActionRequiredIf(message, conditional) {
-  if (conditional) {
-    logActionRequired(message);
-  }
+function withNextPortalWrapper(Component) {
+  return function (props) {
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+      setMounted(true);
+    }, [setMounted]);
+    return mounted ? /*#__PURE__*/createPortal( /*#__PURE__*/jsx(Component, {
+      ...props
+    }), document.body) : null;
+  };
 }
 
-const reader = new commonmark.Parser();
-const writer = new commonmark.HtmlRenderer({
-  safe: true
-});
-const NODE_TYPE_LIST = Object.values(MarkdownNodeType);
-function Markdown({
-  as: Element = 'div',
-  allowList,
-  blockList,
-  config,
-  className,
-  children
-}) {
-  if (!children) {
-    return null;
-  }
-  const linkTarget = config?.link?.target ?? '_self';
-  const paragraphClass = config?.paragraph?.className ?? '';
-  if (allowList != null && blockList != null) {
-    logActionRequired('Markdown supports only one of `allowList` or `blockList` to be used at a time. `blockList` will be ignored.');
+/**
+ * Dimmer state management inspired by Material UI's ModalManager (https://github.com/mui-org/material-ui)
+ */
+class DimmerManager {
+  /**
+   * Dimmer refs
+   */
+  dimmers;
+  constructor() {
+    this.dimmers = [];
   }
-  const parser = nodes => {
-    const parsed = reader.parse(nodes);
-    const toExclude = allowList != null ? NODE_TYPE_LIST.filter(type => !allowList.includes(type)) : blockList;
-    return toExclude != null ? stripNodes({
-      parsed,
-      blockList: toExclude
-    }) : parsed;
-  };
-  const createMarkup = () => {
-    const parsed = parser(children);
-    return writer.render(parsed).replace(/<a href="/g, `<a target="${linkTarget}" href="`).replace(/<p>/g, `<p class="${paragraphClass}">`);
-  };
-  return /*#__PURE__*/jsx(Element, {
-    className: className,
-    dangerouslySetInnerHTML: {
-      __html: createMarkup()
+  add(dimmer) {
+    let dimmerIndex = this.dimmers.indexOf(dimmer);
+    if (dimmerIndex !== -1) {
+      return dimmerIndex;
     }
-  });
-}
-function stripNodes({
-  blockList,
-  parsed
-}) {
-  if (!parsed) {
-    return parsed;
+    dimmerIndex = this.dimmers.length;
+    this.dimmers.push(dimmer);
+    return dimmerIndex;
   }
-  const walker = parsed.walker();
-  for (let event = walker.next(); event != null; event = walker.next()) {
-    const {
-      node
-    } = event;
-    if (blockList.includes(node.type) && !event.entering) {
-      while (node.firstChild != null) {
-        node.insertBefore(node.firstChild);
-      }
-      node.unlink();
+  remove(dimmer) {
+    const dimmerIndex = this.dimmers.indexOf(dimmer);
+    if (dimmerIndex !== -1) {
+      this.dimmers.splice(dimmerIndex, 1);
     }
+    return dimmerIndex;
+  }
+  isTop(dimmer) {
+    return this.dimmers.length > 0 && this.dimmers[this.dimmers.length - 1] === dimmer;
   }
-  return parsed;
 }
 
-const allowList = [MarkdownNodeType.STRONG];
-const InlineMarkdown = props => {
-  return /*#__PURE__*/jsx(Markdown, {
-    ...props,
-    as: "span",
-    allowList: allowList,
-    blockList: undefined
-  });
-};
-InlineMarkdown.propTypes = {
-  children: PropTypes.string.isRequired,
-  className: PropTypes.string
-};
-InlineMarkdown.defaultProps = {
-  className: undefined
-};
-
-var messages$c = defineMessages({
-  opensInNewTab: {
-    id: "neptune.Link.opensInNewTab"
+const EXIT_ANIMATION$1 = 350;
+const dimmerManager = new DimmerManager();
+const handleTouchMove = event => {
+  const isTouchedElementDimmer = event.target.classList.contains('dimmer');
+  // disable scroll on iOS devices for Dimmer area
+  // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908
+  // note: scrolling still works for children(s) as expected
+  if (isIosDevice() && isTouchedElementDimmer) {
+    event.stopPropagation();
+    event.preventDefault();
   }
-});
-
-const Link = ({
-  className,
-  children,
-  href,
-  target,
-  type,
-  'aria-label': ariaLabel,
-  onClick,
-  ...props
-}) => {
-  const isBlank = target === '_blank';
-  const {
-    formatMessage
-  } = useIntl();
-  return /*#__PURE__*/jsxs("a", {
-    href: href,
-    target: target,
-    className: classNames('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className),
-    "aria-label": ariaLabel,
-    rel: isBlank ? 'noreferrer' : undefined,
-    onClick: onClick,
-    ...props,
-    children: [children, " ", isBlank && /*#__PURE__*/jsx(NavigateAway, {
-      title: formatMessage(messages$c.opensInNewTab)
-    })]
-  });
-};
-
-function Action({
-  action,
-  className
-}) {
-  if ('href' in action) {
-    return /*#__PURE__*/jsx(Link, {
-      href: action.href,
-      className: className,
-      "aria-label": action['aria-label'],
-      target: action.target,
-      type: Typography.LINK_LARGE,
-      onClick: action.onClick,
-      children: action.text
-    });
-  }
-  return /*#__PURE__*/jsx("button", {
-    type: "button",
-    "aria-label": action['aria-label'],
-    className: classNames('btn-unstyled np-text-link-large', className),
-    onClick: action.onClick,
-    children: action.text
-  });
-}
-
-var AlertArrowPosition;
-(function (AlertArrowPosition) {
-  AlertArrowPosition["TOP_LEFT"] = "up-left";
-  AlertArrowPosition["TOP"] = "up-center";
-  AlertArrowPosition["TOP_RIGHT"] = "up-right";
-  AlertArrowPosition["BOTTOM_LEFT"] = "down-left";
-  AlertArrowPosition["BOTTOM"] = "down-center";
-  AlertArrowPosition["BOTTOM_RIGHT"] = "down-right";
-})(AlertArrowPosition || (AlertArrowPosition = {}));
-function resolveType(type) {
-  switch (type) {
-    case 'success':
-      return 'positive';
-    case 'info':
-      return 'neutral';
-    case 'error':
-      return 'negative';
-    default:
-      return type;
-  }
-}
-function Alert({
-  arrow,
-  action,
+};
+const Dimmer = ({
   children,
   className,
-  dismissible,
-  icon,
-  onDismiss,
-  message,
-  size,
-  title,
-  type = 'neutral',
-  variant = 'desktop'
-}) {
-  useEffect(() => {
-    if (arrow !== undefined) {
-      logActionRequired("Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.");
+  disableClickToClose = false,
+  contentPosition,
+  fadeContentOnEnter = false,
+  fadeContentOnExit = false,
+  open = false,
+  scrollable = false,
+  transparent = false,
+  onClose
+}) => {
+  const [hasNotExited, setHasNotExited] = useState(false);
+  const dimmerReference = useRef(null);
+  const closeOnClick = event => {
+    if (event.target === dimmerReference.current) {
+      onClose?.(event);
     }
-  }, [arrow]);
-  useEffect(() => {
-    if (children !== undefined) {
-      logActionRequired("Alert component doesn't support 'children' anymore, use 'message' instead.");
+  };
+  const handleClick = event => {
+    if (disableClickToClose || !onClose) {
+      return;
     }
-  }, [children]);
-  useEffect(() => {
-    if (dismissible !== undefined) {
-      logActionRequired("Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.");
+    closeOnClick(event);
+  };
+  const handleKeyDown = useCallback(event => {
+    if (event.key !== 'Escape') {
+      return;
     }
-  }, [dismissible]);
-  useEffect(() => {
-    if (size !== undefined) {
-      logActionRequired("Alert component doesn't support 'size' anymore, please remove that prop.");
+    event.stopPropagation();
+    if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {
+      onClose(event);
     }
-  }, [size]);
-  const resolvedType = resolveType(type);
+  }, [onClose]);
+  const onEnter = () => {
+    setHasNotExited(true);
+    if (dimmerReference.current) {
+      dimmerManager.add(dimmerReference.current);
+    }
+  };
+  const onExited = () => {
+    setHasNotExited(false);
+    if (dimmerReference.current) {
+      dimmerManager.remove(dimmerReference.current);
+    }
+  };
   useEffect(() => {
-    if (resolvedType !== type) {
-      logActionRequired(`Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`);
+    const localReferenceCopy = dimmerReference.current;
+    if (open) {
+      document.addEventListener('keydown', handleKeyDown);
+      localReferenceCopy?.addEventListener('touchmove', handleTouchMove, {
+        passive: true
+      });
     }
-  }, [resolvedType, type]);
-  const [shouldFire, setShouldFire] = useState(false);
-  const closeButtonReference = useRef(null);
-  return /*#__PURE__*/jsxs("div", {
-    className: classNames('alert d-flex', `alert-${resolvedType}`, arrow != null && alertArrowClassNames(arrow), className),
-    "data-testid": "alert",
-    onTouchStart: () => setShouldFire(true),
-    onTouchEnd: event => {
-      if (shouldFire && action?.href &&
-      // Check if current event is triggered from closeButton
-      event.target instanceof Node && closeButtonReference.current && !closeButtonReference.current.contains(event.target)) {
-        if (action.target === '_blank') {
-          window.top?.open(action.href);
-        } else {
-          window.top?.location.assign(action.href);
-        }
-      }
-      setShouldFire(false);
-    },
-    onTouchMove: () => setShouldFire(false),
-    children: [/*#__PURE__*/jsxs("div", {
-      className: classNames('alert__content', 'd-flex', 'flex-grow-1', variant),
-      "data-testid": variant,
-      children: [icon ? /*#__PURE__*/jsx("div", {
-        className: "alert__icon",
-        children: icon
-      }) : /*#__PURE__*/jsx(StatusIcon, {
-        size: Size.LARGE,
-        sentiment: resolvedType
-      }), /*#__PURE__*/jsxs("div", {
-        className: "alert__message",
-        children: [/*#__PURE__*/jsxs("div", {
-          role: Sentiment.NEGATIVE === resolvedType ? 'alert' : 'status',
-          children: [title && /*#__PURE__*/jsx(Title, {
-            className: "m-b-1",
-            type: Typography.TITLE_BODY,
-            children: title
-          }), /*#__PURE__*/jsx(Body, {
-            as: "span",
-            className: "d-block",
-            type: Typography.BODY_LARGE,
-            children: children || /*#__PURE__*/jsx(InlineMarkdown, {
-              children: message
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);
+    };
+  }, [handleKeyDown, open]);
+  return /*#__PURE__*/jsx(DimmerWrapper, {
+    open: open,
+    hasNotExited: hasNotExited,
+    children: /*#__PURE__*/jsx(CSSTransition, {
+      nodeRef: dimmerReference,
+      in: open,
+      appear: true
+      // Wait for animation to finish before unmount.
+      ,
+      timeout: {
+        enter: 0,
+        exit: EXIT_ANIMATION$1
+      },
+      classNames: {
+        enter: classNames({
+          'dimmer--enter-fade': fadeContentOnEnter
+        }),
+        enterDone: classNames('dimmer--enter-done', {
+          'dimmer--enter-fade': fadeContentOnEnter
+        }),
+        exit: classNames('dimmer--exit', {
+          'dimmer--exit-fade': fadeContentOnExit
+        })
+      },
+      unmountOnExit: true,
+      onEnter: onEnter,
+      onExited: onExited,
+      children: /*#__PURE__*/jsx(DimmerContentWrapper, {
+        scrollBody: !transparent,
+        children: /*#__PURE__*/jsx(FocusBoundary, {
+          children: /*#__PURE__*/jsx("div", {
+            ref: dimmerReference,
+            className: classNames('dimmer', {
+              'dimmer--scrollable': scrollable,
+              'dimmer--transparent': transparent
+            }, className),
+            role: "presentation",
+            onClick: handleClick,
+            children: /*#__PURE__*/jsx("div", {
+              className: classNames('dimmer-content-positioner', contentPosition != null && ['d-flex justify-content-center', {
+                'align-items-start': contentPosition === 'top',
+                'align-items-center': contentPosition === 'center',
+                'align-items-end': contentPosition === 'bottom'
+              }]),
+              children: children
             })
-          })]
-        }), action && /*#__PURE__*/jsx(Action, {
-          action: action,
-          className: "m-t-1"
-        })]
-      })]
-    }), onDismiss && /*#__PURE__*/jsx(CloseButton, {
-      ref: closeButtonReference,
-      className: "m-l-2",
-      onClick: onDismiss
-    })]
+          })
+        })
+      })
+    })
   });
-}
-function alertArrowClassNames(arrow) {
-  switch (arrow) {
-    case 'down-center':
-      return 'arrow arrow-bottom arrow-center';
-    case 'down-left':
-      return 'arrow arrow-bottom arrow-left';
-    case 'down-right':
-      return 'arrow arrow-bottom arrow-right';
-    case 'up-center':
-      return 'arrow arrow-center';
-    case 'up-right':
-      return 'arrow arrow-right';
-    case 'up-left':
-    default:
-      return 'arrow';
-  }
-}
-
-// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
-var AvatarType;
-(function (AvatarType) {
-  AvatarType["THUMBNAIL"] = "thumbnail";
-  AvatarType["ICON"] = "icon";
-  AvatarType["EMOJI"] = "emoji";
-  AvatarType["INITIALS"] = "initials";
-})(AvatarType || (AvatarType = {}));
-
-/*
- * The colors we support generating an Avatar background color from a "seed" for.
- * Changing this array will change the assignment between seeds.
- * Do not change this array.
- */
-const avatarColors = ['--color-bright-blue', '--color-bright-yellow', '--color-bright-pink', '--color-bright-orange'];
-/*
- * Takes in a "seed" string and spits out an index for the color we should use.
- * This implementation has been synced across all three clients so that we consistently
- * generate branded avatar colors when rendering a list of Avatars.
- * Do not change this implementation.
- */
-const hashSeed = seed => {
-  const base = 31;
-  const modulo = avatarColors.length;
-  let hashValue = 0;
-  let basePow = 1;
-  for (let i = 0; i < seed.length; i += 1) {
-    hashValue = (hashValue + seed.charCodeAt(i) * basePow) % modulo;
-    basePow = basePow * base % modulo;
-  }
-  return hashValue;
-};
-const getAvatarColorFromSeed = seed => {
-  return avatarColors[hashSeed(seed)];
-};
-
-const backwardsCompatibleSize = size => {
-  switch (size) {
-    case 'sm':
-      return 24;
-    case 'md':
-      return 48;
-    case 'lg':
-      return 72;
-    default:
-      return size;
-  }
 };
-const Avatar = ({
-  backgroundColor = null,
-  backgroundColorSeed = null,
-  children = null,
-  className,
-  outlined = false,
-  size: sizeFromProps = 48,
-  theme = Theme.LIGHT,
-  type = 'thumbnail'
+const DimmerWrapper = ({
+  open,
+  hasNotExited,
+  children
 }) => {
-  const backgroundColorFromSeed = useMemo(() => !backgroundColor && backgroundColorSeed ? `var(${getAvatarColorFromSeed(backgroundColorSeed)})` : undefined, [backgroundColor, backgroundColorSeed]);
-  const size = backwardsCompatibleSize(sizeFromProps);
-  return /*#__PURE__*/jsx("div", {
-    className: classNames('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
-      'tw-avatar--outlined': outlined,
-      'tw-avatar--branded': Boolean(backgroundColorFromSeed),
-      'np-text-title-body': type === 'initials'
-    }),
-    children: /*#__PURE__*/jsx("div", {
-      className: "tw-avatar__content",
-      style: {
-        backgroundColor: backgroundColor || backgroundColorFromSeed
-      },
-      children: children
-    })
+  const {
+    screenMode,
+    theme
+  } = useTheme();
+  return open || hasNotExited ? /*#__PURE__*/jsx(ThemeProvider, {
+    theme: "personal",
+    screenMode: theme === 'personal' ? screenMode : 'light',
+    isNotRootProvider: true,
+    children: children
+  }) : /*#__PURE__*/jsx(Fragment, {
+    children: children
   });
 };
-
-const Badge = ({
-  badge,
-  className = undefined,
-  size = Size.SMALL,
-  border = Theme.LIGHT,
-  children
+const DimmerContentWrapper = ({
+  children,
+  scrollBody
 }) => {
-  const classes = classNames('tw-badge', {
-    [`tw-badge-border-${border}`]: border,
-    [`tw-badge-${size}`]: size
-  }, className);
-  return /*#__PURE__*/jsxs("div", {
-    className: classes,
-    children: [/*#__PURE__*/jsx("div", {
-      className: "tw-badge__children",
-      children: children
-    }), /*#__PURE__*/jsx("div", {
-      className: "tw-badge__content",
-      children: badge
-    })]
-  });
+  useEffect(() => {
+    if (scrollBody) {
+      addNoScrollClass();
+    }
+    return () => {
+      if (scrollBody) {
+        removeNoScrollClass();
+      }
+    };
+  }, [scrollBody]);
+  return children;
 };
+var Dimmer$1 = withNextPortalWrapper(Dimmer);
 
-const OptionalBadge = ({
-  url,
-  altText,
-  statusIcon,
+const POPOVER_OFFSET = [0, 16];
+// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
+// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.
+// This mapping forces popover to try the four available positions before going back to the initial chosen one.
+const fallbackPlacements = {
+  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],
+  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],
+  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],
+  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM]
+};
+const Panel = /*#__PURE__*/forwardRef(function Panel({
+  arrow = false,
+  flip = true,
+  altAxis = false,
   children,
+  open = false,
+  onClose,
+  position = Position.BOTTOM,
+  anchorRef,
+  anchorWidth = false,
   ...rest
-}) => {
-  if (url) {
-    return /*#__PURE__*/jsx(Badge, {
-      badge: /*#__PURE__*/jsx("img", {
-        src: url,
-        alt: altText
-      }),
-      ...rest,
-      children: children
+}, reference) {
+  const [arrowElement, setArrowElement] = useState(null);
+  const [popperElement, setPopperElement] = useState(null);
+  const modifiers = [];
+  if (altAxis) {
+    modifiers.push({
+      // https://popper.js.org/docs/v2/modifiers/prevent-overflow
+      name: 'preventOverflow',
+      options: {
+        altAxis: true,
+        tether: false
+      }
     });
   }
-  if (statusIcon) {
-    return /*#__PURE__*/jsx(Badge, {
-      badge: /*#__PURE__*/jsx(StatusIcon, {
-        sentiment: statusIcon,
-        size: Size.SMALL
-      }),
-      ...rest,
-      children: children
+  if (arrow) {
+    modifiers.push({
+      name: 'arrow',
+      options: {
+        element: arrowElement,
+        options: {
+          padding: 8 // 8px from the edges of the popper
+        }
+      }
+    });
+    // This lets you displace a popper element from its reference element.
+    modifiers.push({
+      name: 'offset',
+      options: {
+        offset: POPOVER_OFFSET
+      }
     });
   }
-  return /*#__PURE__*/jsx(Fragment, {
-    children: children
+  if (flip && fallbackPlacements[position]) {
+    modifiers.push({
+      name: 'flip',
+      options: {
+        fallbackPlacements: fallbackPlacements[position]
+      }
+    });
+  }
+  const {
+    styles,
+    attributes,
+    forceUpdate
+  } = usePopper(anchorRef.current, popperElement, {
+    placement: position,
+    modifiers
   });
-};
-const AvatarWrapper = ({
-  url,
-  profileType,
-  profileId,
-  badgeUrl,
-  badgeAltText,
-  badgeStatusIcon,
-  name,
-  avatarProps,
-  badgeProps
-}) => {
-  const [hasImageLoadError, setImageLoadError] = useState(false);
-  const isBusinessProfile = profileType === ProfileType.BUSINESS;
-  // Reset the errored state when url changes
-  useEffect(() => setImageLoadError(false), [url]);
-  const getAvatarProps = () => {
-    if (url && !hasImageLoadError) {
-      return {
-        type: AvatarType.THUMBNAIL,
-        children: /*#__PURE__*/jsx("img", {
-          src: url,
-          alt: "",
-          onError: () => setImageLoadError(true)
-        }),
-        ...avatarProps
-      };
-    }
-    if (profileType) {
-      return {
-        type: AvatarType.ICON,
-        children: isBusinessProfile ? /*#__PURE__*/jsx(Briefcase, {
-          size: "24"
-        }) : /*#__PURE__*/jsx(Person, {
-          size: "24"
-        }),
-        ...avatarProps
-      };
+  // If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),
+  // it is most simple just to always position before opening
+  useEffect(() => {
+    if (open && forceUpdate) {
+      forceUpdate();
     }
-    if (name) {
-      return {
-        type: AvatarType.INITIALS,
-        children: /*#__PURE__*/jsx(Fragment, {
-          children: getInitials(name)
-        }),
-        backgroundColorSeed: profileId?.toString(),
-        ...avatarProps
-      };
-    }
-    return {
-      type: AvatarType.ICON,
-      children: /*#__PURE__*/jsx(Person, {
-        size: "24"
-      }),
-      ...avatarProps
-    };
+  }, [open]);
+  const contentStyle = {
+    ...(anchorWidth ? {
+      width: anchorRef.current?.clientWidth
+    } : undefined)
   };
-  return /*#__PURE__*/jsx(OptionalBadge, {
-    url: badgeUrl,
-    altText: badgeAltText,
-    statusIcon: badgeStatusIcon,
-    ...badgeProps,
-    children: /*#__PURE__*/jsx(Avatar, {
-      size: Size.MEDIUM,
-      ...getAvatarProps()
+  return /*#__PURE__*/jsx(Dimmer$1, {
+    open: open,
+    transparent: true,
+    fadeContentOnEnter: true,
+    fadeContentOnExit: true,
+    onClose: onClose,
+    children: /*#__PURE__*/jsx("div", {
+      ...rest,
+      ref: setPopperElement,
+      role: "dialog"
+      // eslint-disable-next-line react/forbid-dom-props
+      ,
+      style: {
+        ...styles.popper
+      },
+      ...attributes.popper,
+      className: classNames('np-panel', {
+        'np-panel--open': open
+      }, rest.className),
+      children: /*#__PURE__*/jsxs("div", {
+        ref: reference
+        /* eslint-disable-next-line react/forbid-dom-props */,
+        style: contentStyle,
+        className: classNames('np-panel__content'),
+        children: [children, arrow && /*#__PURE__*/jsx("div", {
+          ref: setArrowElement,
+          className: classNames('np-panel__arrow')
+          // eslint-disable-next-line react/forbid-dom-props
+          ,
+          style: styles.arrow
+        })]
+      })
     })
   });
+});
+
+const Section = ({
+  children,
+  className,
+  withHorizontalPadding = false
+}) => {
+  return /*#__PURE__*/jsx("div", {
+    className: classNames('np-section', className, {
+      'np-section--with-horizontal-padding': withHorizontalPadding
+    }),
+    children: children
+  });
 };
-function getInitials(name) {
-  const allInitials = name.split(' ').map(part => part[0]).join('').toUpperCase();
-  if (allInitials.length === 1) {
-    return allInitials[0];
-  }
-  return allInitials[0] + allInitials.slice(-1);
-}
 
 const radius = {
   xxs: 6,
@@ -1351,7 +1124,7 @@ class ProcessIndicator extends Component {
   }
 }
 
-var messages$b = defineMessages({
+var messages$e = defineMessages({
   loadingAriaLabel: {
     id: "neptune.Button.loadingAriaLabel"
   }
@@ -1368,6 +1141,18 @@ const priorityClassMap = {
   [Priority.TERTIARY]: 'btn-priority-3'
 };
 
+function logActionRequired(message) {
+  if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
+    // eslint-disable-next-line no-console
+    console.warn(message);
+  }
+}
+function logActionRequiredIf(message, conditional) {
+  if (conditional) {
+    logActionRequired(message);
+  }
+}
+
 const deprecatedTypeMap = {
   [Type.PRIMARY]: ControlType.ACCENT,
   [Type.SECONDARY]: ControlType.ACCENT,
@@ -1470,7 +1255,7 @@ const Button = /*#__PURE__*/forwardRef(({
     className: classes,
     ...props,
     "aria-live": loading ? 'polite' : 'off',
-    "aria-label": loading ? intl.formatMessage(messages$b.loadingAriaLabel) : rest['aria-label'],
+    "aria-label": loading ? intl.formatMessage(messages$e.loadingAriaLabel) : rest['aria-label'],
     children: [children, loading && /*#__PURE__*/jsx(ProcessIndicator, {
       size: processIndicatorSize(),
       className: "btn-loader"
@@ -1478,55 +1263,137 @@ const Button = /*#__PURE__*/forwardRef(({
   });
 });
 
-const Card$2 = /*#__PURE__*/forwardRef(({
+var messages$d = defineMessages({
+  opensInNewTab: {
+    id: "neptune.Link.opensInNewTab"
+  }
+});
+
+const Link = ({
   className,
-  children = null,
-  id,
-  isDisabled = false,
-  isSmall = false,
-  onDismiss,
-  testId,
+  children,
+  href,
+  target,
+  type,
+  'aria-label': ariaLabel,
+  onClick,
   ...props
-}, ref) => {
-  const closeButtonReference = useRef(null);
-  return /*#__PURE__*/jsxs("div", {
-    ref: ref,
-    className: classNames('np-Card', {
-      'np-Card--small': !!isSmall,
-      'is-disabled': !!isDisabled
-    }, className),
-    id: id,
-    "data-testid": testId,
+}) => {
+  const isBlank = target === '_blank';
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/jsxs("a", {
+    href: href,
+    target: target,
+    className: classNames('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className),
+    "aria-label": ariaLabel,
+    rel: isBlank ? 'noreferrer' : undefined,
+    onClick: onClick,
     ...props,
-    children: [onDismiss && /*#__PURE__*/jsx(CloseButton, {
-      ref: closeButtonReference,
-      className: "np-Card-closeButton",
-      size: isSmall ? 'sm' : 'md',
-      isDisabled: isDisabled,
-      testId: "close-button",
-      onClick: e => {
-        stopPropagation$1(e);
-        onDismiss();
-      }
-    }), children]
+    children: [children, " ", isBlank && /*#__PURE__*/jsx(NavigateAway, {
+      title: formatMessage(messages$d.opensInNewTab)
+    })]
   });
-});
-Card$2.displayName = 'Card';
+};
 
-function Display({
-  as: Heading = 'h1',
-  type = Typography.DISPLAY_LARGE,
-  children,
+const DEFAULT_TYPE = Typography.TITLE_GROUP;
+const titleTypeMapping = {
+  [Typography.TITLE_SCREEN]: 'h1',
+  [Typography.TITLE_SECTION]: 'h2',
+  [Typography.TITLE_SUBSECTION]: 'h3',
+  [Typography.TITLE_BODY]: 'h4',
+  [Typography.TITLE_GROUP]: 'h5'
+};
+function Title({
+  as,
+  type = DEFAULT_TYPE,
   className,
-  id
+  ...props
 }) {
-  return /*#__PURE__*/jsx(Heading, {
-    id: id,
-    className: classNames(`np-text-${type}`, 'text-primary', className),
-    children: children
+  const mapping = titleTypeMapping[type];
+  const isTypeSupported = mapping !== undefined;
+  if (isTypeSupported) {
+    const HeaderTag = as ?? mapping;
+    return /*#__PURE__*/jsx(HeaderTag, {
+      ...props,
+      className: classNames(`np-text-${type}`, className)
+    });
+  }
+  const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];
+  return /*#__PURE__*/jsx(HeaderTag, {
+    ...props,
+    className: classNames(`np-text-${DEFAULT_TYPE}`, className)
   });
 }
 
+const HeaderAction = ({
+  action
+}) => {
+  const {
+    isModern
+  } = useTheme();
+  const props = {
+    'aria-label': action['aria-label']
+  };
+  if ('href' in action) {
+    return /*#__PURE__*/jsx(Link, {
+      href: action.href,
+      target: action.target,
+      onClick: action.onClick,
+      ...props,
+      children: action.text
+    });
+  }
+  return isModern ? /*#__PURE__*/jsx(Button, {
+    className: "np-header__button",
+    priority: "tertiary",
+    size: "sm",
+    onClick: action.onClick,
+    ...props,
+    children: action.text
+  }) : /*#__PURE__*/jsx(ActionButton, {
+    onClick: action.onClick,
+    ...props,
+    children: action.text
+  });
+};
+/**
+ *
+ * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header
+ *
+ */
+const Header = ({
+  action,
+  as = 'h5',
+  title,
+  className
+}) => {
+  if (!action) {
+    return /*#__PURE__*/jsx(Title, {
+      as: as,
+      type: Typography.TITLE_GROUP,
+      className: classNames('np-header', 'np-header__title', className),
+      children: title
+    });
+  }
+  if (as === 'legend') {
+    // eslint-disable-next-line no-console
+    console.warn('Legends should be the first child in a fieldset, and this is not possible when including an action');
+  }
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames('np-header', className),
+    children: [/*#__PURE__*/jsx(Title, {
+      as: as,
+      type: Typography.TITLE_GROUP,
+      className: "np-header__title",
+      children: title
+    }), /*#__PURE__*/jsx(HeaderAction, {
+      action: action
+    })]
+  });
+};
+
 const useConditionalListener = ({
   attachListener,
   callback,
@@ -1655,1375 +1522,1881 @@ const useLayout = () => {
   };
 };
 
-const EmptyTransparentImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
-const Image = ({
-  id,
-  src,
-  alt,
-  onLoad,
-  onError,
-  className,
-  loading,
-  stretch = true,
-  role,
-  shrink = true
-}) => {
-  const elementReference = useRef(null);
-  const [hasIntersected] = useHasIntersected({
-    elRef: elementReference,
-    loading
-  });
-  let imageSource = src;
-  let imageOnLoad = onLoad;
-  if (loading === 'lazy' && !hasIntersected) {
-    imageSource = EmptyTransparentImage;
-    imageOnLoad = undefined;
+var messages$c = defineMessages({
+  ariaLabel: {
+    id: "neptune.CloseButton.ariaLabel"
   }
-  return /*#__PURE__*/jsx("img", {
-    ref: elementReference,
-    id: id,
-    alt: alt,
-    src: imageSource,
-    className: classNames(['tw-image', {
-      'tw-image__stretch': stretch,
-      'tw-image__shrink': shrink
-    }, className]),
-    role: role,
-    onLoad: imageOnLoad,
-    onError: onError
-  });
-};
+});
 
-const defaultPromoCardContext = {
-  state: '',
-  isDisabled: false,
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onChange: () => {}
-};
-/**
- * The PromoCard context object.
- */
-const PromoCardContext = /*#__PURE__*/createContext(defaultPromoCardContext);
-/**
- * A custom hook for accessing the PromoCard context object.
- *
- * The `usePromoCardContext` hook is used to access the PromoCard context object
- * from within a child PromoCard component. It throws an error if the context
- * object is not available, which can help with debugging and development.
- *
- * @returns {PromoCardContextType} - The PromoCard context object.
- */
-const usePromoCardContext = () => {
-  return useContext(PromoCardContext);
-};
+const CloseButton = /*#__PURE__*/forwardRef(function CloseButton({
+  'aria-label': ariaLabel,
+  size = Size.MEDIUM,
+  filled = false,
+  className,
+  onClick,
+  isDisabled,
+  testId
+}, reference) {
+  const intl = useIntl();
+  ariaLabel ??= intl.formatMessage(messages$c.ariaLabel);
+  const Icon = filled ? CrossCircleFill : Cross;
+  return /*#__PURE__*/jsx("button", {
+    ref: reference,
+    type: "button",
+    className: classNames('np-close-button', 'close btn-link', 'text-no-decoration', {
+      'np-close-button--large': size === Size.MEDIUM,
+      'np-close-button--x-large': size === Size.LARGE
+    }, className),
+    "aria-label": ariaLabel,
+    "aria-disabled": isDisabled,
+    disabled: isDisabled,
+    "data-testid": testId,
+    onClick: onClick,
+    children: /*#__PURE__*/jsx(Icon, {
+      size: size === Size.SMALL ? 16 : 24
+    })
+  });
+});
 
-const PromoCardIndicator = ({
+const EXIT_ANIMATION = 350;
+const SlidingPanel = /*#__PURE__*/forwardRef(({
+  position = 'left',
+  open,
+  showSlidingPanelBorder,
+  slidingPanelPositionFixed,
   className,
   children,
-  label,
-  icon,
-  isSmall = false,
-  testid,
+  testId,
   ...rest
-}) => {
-  const isIconString = icon && typeof icon === 'string';
-  const IconComponent = isIconString && {
-    check: Check,
-    arrow: ArrowRight,
-    download: Download
-  }[icon];
-  return /*#__PURE__*/jsxs("div", {
-    className: classNames('np-Card-indicator', className),
-    "data-testid": testid,
+}, reference) => {
+  const localReference = useRef(null);
+  useImperativeHandle(reference, () => localReference.current, []);
+  return /*#__PURE__*/createElement(CSSTransition, {
     ...rest,
-    children: [label && /*#__PURE__*/jsx(Body, {
-      as: "span",
-      type: Typography.BODY_LARGE_BOLD,
-      className: "np-Card-indicatorText",
-      children: label
-    }), icon && /*#__PURE__*/jsx(Avatar, {
-      type: AvatarType.ICON,
-      size: isSmall ? 40 : 56,
-      backgroundColor: "var(--Card-indicator-icon-background-color)",
-      className: "np-Card-indicatorIcon",
-      children: IconComponent ? /*#__PURE__*/jsx(IconComponent, {
-        size: 24,
-        "aria-hidden": "true"
-      }) : icon
-    }), children]
-  });
-};
+    key: `sliding-panel--open-${position}`,
+    nodeRef: localReference,
+    in: open
+    // Wait for animation to finish before unmount.
+    ,
+    timeout: {
+      enter: 0,
+      exit: EXIT_ANIMATION
+    },
+    classNames: "sliding-panel",
+    appear: true,
+    unmountOnExit: true
+  }, /*#__PURE__*/jsx("div", {
+    ref: localReference,
+    "data-testid": testId,
+    className: classNames('sliding-panel', `sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, slidingPanelPositionFixed && 'sliding-panel--fixed', className),
+    children: children
+  }));
+});
 
-const PromoCard = /*#__PURE__*/forwardRef(({
+const Drawer = ({
+  children,
   className,
-  description,
-  defaultChecked,
-  download,
-  href,
-  hrefLang,
-  id,
-  headingLevel = 'h3',
-  imageAlt,
-  imageClass,
-  imageSource,
-  indicatorLabel,
-  indicatorIcon,
-  isChecked,
-  isDisabled,
-  onClick,
-  onKeyDown,
-  rel,
-  tabIndex,
-  target,
-  testId,
-  title,
-  type,
-  value,
-  isSmall,
-  useDisplayFont = true,
-  anchorRef,
-  anchorId,
-  ...props
-}, ref) => {
-  // Set the `checked` state to the value of `defaultChecked` if it is truthy,
-  // or the value of `isChecked` if it is truthy, or `false` if neither
-  // is truthy.
+  footerContent,
+  headerTitle,
+  onClose,
+  open,
+  position
+}) => {
+  logActionRequiredIf('Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.', !onClose);
   const {
-    state,
-    onChange,
-    isDisabled: contextIsDisabled
-  } = usePromoCardContext();
-  const [checked, setChecked] = useState(type === 'checkbox' ? defaultChecked ?? isChecked ?? false : false);
-  const handleClick = () => {
-    if (type === 'radio') {
-      onChange(value || ''); // Update the context state for radio
-    } else if (type === 'checkbox') {
-      setChecked(!checked); // Update local state for checkbox
-    }
-  };
-  const fallbackId = useId();
-  const componentId = id || fallbackId;
-  // 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`.
-  // 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({
-    'np-Card--promoCard': true,
-    'np-Card--checked': !href && type,
-    'np-Card--link': href && !type,
-    'is-checked': type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined
-  }, className);
-  // Object with common props that will be passed to the `Card` components
-  const commonProps = {
-    className: commonClasses,
-    id: componentId,
-    isDisabled: isDisabled || contextIsDisabled,
-    onClick,
-    onKeyDown,
-    ref,
-    '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`
-  const anchorProps = href && !isDisabled ? {
-    download,
-    href: href || undefined,
-    hrefLang,
-    rel,
-    target,
-    ref: anchorRef,
-    id: anchorId
-  } : {};
-  // Object of all Checked props that will be passed to the root `Card` component
-  const checkedProps = (type === 'checkbox' || type === 'radio') && !href ? {
-    ...commonProps,
-    'aria-checked': type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,
-    'aria-describedby': `${componentId}-title`,
-    'aria-disabled': isDisabled,
-    'data-value': value ?? undefined,
-    role: type === 'checkbox' || type === 'radio' ? type : undefined,
-    onClick: handleClick,
-    onKeyDown: event => {
-      if (event.key === 'Enter' || event.key === ' ') {
-        handleClick();
-      }
-    },
-    ref,
-    tabIndex: 0
-  } : {};
-  const getTitle = () => {
-    const titleContent = href && !type ? /*#__PURE__*/jsx("a", {
-      className: "np-Card-titleLink",
-      ...anchorProps,
-      children: title
-    }) : title;
-    const titleProps = {
-      id: `${componentId}-title`,
-      as: headingLevel,
-      className: 'np-Card-title'
-    };
-    return useDisplayFont ? /*#__PURE__*/jsx(Display, {
-      type: Typography.DISPLAY_SMALL,
-      ...titleProps,
-      children: titleContent
-    }) : /*#__PURE__*/jsx(Title, {
-      type: Typography.TITLE_SUBSECTION,
-      ...titleProps,
-      children: titleContent
-    });
-  };
-  useEffect(() => {
-    setChecked(defaultChecked ?? isChecked ?? false);
-  }, [defaultChecked, isChecked]);
-  return /*#__PURE__*/jsxs(Card$2, {
-    ...commonProps,
-    ...checkedProps,
-    ...props,
-    children: [(value === state || checked) && /*#__PURE__*/jsx("span", {
-      className: "np-Card-check",
-      children: /*#__PURE__*/jsx(Check, {
-        size: 24,
-        "aria-hidden": "true"
-      })
-    }), getTitle(), /*#__PURE__*/jsx(Body, {
-      className: "np-Card-description",
-      children: description
-    }), imageSource && /*#__PURE__*/jsx("div", {
-      className: classNames('np-Card-image', {
-        imageClass
-      }),
-      children: /*#__PURE__*/jsx(Image, {
-        src: imageSource,
-        alt: imageAlt || '',
-        loading: "lazy"
+    isMobile
+  } = useLayout();
+  const titleId = useId();
+  return /*#__PURE__*/jsx(Dimmer$1, {
+    open: open,
+    onClose: onClose,
+    children: /*#__PURE__*/jsx(SlidingPanel, {
+      open: open,
+      position: isMobile ? Position.BOTTOM : position,
+      children: /*#__PURE__*/jsxs("div", {
+        role: "dialog",
+        "aria-modal": true,
+        "aria-labelledby": headerTitle ? titleId : undefined,
+        className: classNames('np-drawer', className),
+        children: [/*#__PURE__*/jsxs("div", {
+          className: classNames('np-drawer-header', {
+            'np-drawer-header--withborder': headerTitle
+          }),
+          children: [headerTitle && /*#__PURE__*/jsx(Title, {
+            id: titleId,
+            type: Typography.TITLE_BODY,
+            children: headerTitle
+          }), /*#__PURE__*/jsx(CloseButton, {
+            onClick: onClose
+          })]
+        }), children && /*#__PURE__*/jsx("div", {
+          className: classNames('np-drawer-content'),
+          children: children
+        }), footerContent && /*#__PURE__*/jsx("div", {
+          className: classNames('np-drawer-footer'),
+          children: footerContent
+        })]
       })
-    }), /*#__PURE__*/jsx(PromoCardIndicator, {
-      label: indicatorLabel,
-      icon: getIconType(),
-      isSmall: isSmall
-    })]
+    })
   });
-});
-var PromoCard$1 = /*#__PURE__*/React__default.memo(PromoCard);
+};
+Drawer.propTypes = {
+  /** The content to appear in the drawer body. */
+  children: PropTypes.node,
+  className: PropTypes.string,
+  /** The content to appear in the drawer footer. */
+  footerContent: PropTypes.node,
+  /** The content to appear in the drawer header. */
+  headerTitle: PropTypes.node,
+  /** The status of Drawer either open or not. */
+  open: PropTypes.bool,
+  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */
+  position: PropTypes.oneOf(['left', 'right', 'bottom']),
+  /** The action to perform on close click. */
+  onClose: PropTypes.func
+};
+Drawer.defaultProps = {
+  children: null,
+  className: undefined,
+  footerContent: null,
+  headerTitle: null,
+  onClose: null,
+  open: false,
+  position: Position.RIGHT
+};
+var Drawer$1 = Drawer;
 
-const LEFT_SCROLL_OFFSET = 8;
-const Carousel = ({
-  header,
-  className,
-  cards,
-  onClick
-}) => {
-  const [scrollPosition, setScrollPosition] = useState(0);
-  const [previousScrollPosition, setPreviousScrollPosition] = useState(0);
-  const [scrollIsAtEnd, setScrollIsAtEnd] = useState(false);
-  const [visibleCardOnMobileView, setVisibleCardOnMobileView] = useState('');
-  const carouselElementRef = useRef(null);
-  const carouselCardsRef = useRef([]);
-  const isLeftActionButtonEnabled = scrollPosition > LEFT_SCROLL_OFFSET;
-  const areActionButtonsEnabled = isLeftActionButtonEnabled || !scrollIsAtEnd;
-  const [focusedCard, setFocusedCard] = useState(cards?.[0]?.id);
-  const updateScrollButtonsState = () => {
-    if (carouselElementRef.current) {
-      const {
-        scrollWidth,
-        offsetWidth
-      } = carouselElementRef.current;
-      const scrollAtEnd = scrollWidth - offsetWidth <= scrollPosition + LEFT_SCROLL_OFFSET;
-      setScrollIsAtEnd(scrollAtEnd);
-    }
-    const scrollDirecton = scrollPosition > previousScrollPosition ? 'right' : 'left';
-    const cardsInFullViewIds = [];
-    carouselCardsRef.current.forEach(card => {
-      if (isVisible(carouselElementRef.current, card.cardElement)) {
-        // eslint-disable-next-line functional/immutable-data
-        cardsInFullViewIds.push(card.cardElement.getAttribute('id') ?? '');
-      }
-    });
-    if (cardsInFullViewIds.length >= 1) {
-      const visibleCardIndex = scrollDirecton === 'right' ? cardsInFullViewIds.length - 1 : 0;
-      const visibleCardId = cardsInFullViewIds[visibleCardIndex];
-      setVisibleCardOnMobileView(visibleCardId);
-      setFocusedCard(visibleCardId);
-    }
-    setPreviousScrollPosition(scrollPosition);
-  };
-  const scrollCarousel = (direction = 'right') => {
-    if (carouselElementRef.current) {
-      const {
-        scrollWidth
-      } = carouselElementRef.current;
-      const cardWidth = scrollWidth / carouselCardsRef.current.length;
-      const res = Math.floor(cardWidth - cardWidth * 0.05);
-      carouselElementRef.current.scrollBy({
-        left: direction === 'right' ? res : -res,
-        behavior: 'smooth'
-      });
-    }
-  };
-  const handleOnKeyDown = (event, index) => {
-    if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
-      const nextIndex = event.key === 'ArrowRight' ? index + 1 : index - 1;
-      const nextCard = cards[nextIndex];
-      if (nextCard) {
-        const ref = carouselCardsRef.current[nextIndex];
-        if (ref.type === 'promo') {
-          ref.anchorElement?.focus();
+const INITIAL_Y_POSITION = 0;
+const CONTENT_SCROLL_THRESHOLD = 1;
+const MOVE_OFFSET_THRESHOLD = 50;
+/**
+ * Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/
+ *
+ * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet
+ *
+ */
+const BottomSheet$1 = props => {
+  const bottomSheetReference = useRef(null);
+  const topBarReference = useRef(null);
+  const contentReference = useRef(null);
+  const [pressed, setPressed] = useState(false);
+  /**
+   * Used to track `requestAnimationFrame` requests
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value
+   */
+  const animationId = useRef(0);
+  /**
+   * Difference between initial coordinate ({@link initialYCoordinate})
+   * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events
+   *
+   * @see {@link calculateOffsetAfterMove}
+   */
+  const moveOffset = useRef(0);
+  const initialYCoordinate = useRef(0);
+  // apply shadow to the bottom of top-bar when scroll over content
+  useConditionalListener({
+    attachListener: props.open && !isServerSide(),
+    callback: () => {
+      if (topBarReference.current !== null) {
+        const {
+          classList
+        } = topBarReference.current;
+        if (!isContentScrollPositionAtTop()) {
+          classList.add('np-bottom-sheet--top-bar--shadow');
         } else {
-          ref.cardElement?.focus();
+          classList.remove('np-bottom-sheet--top-bar--shadow');
         }
-        scrollCardIntoView(carouselCardsRef.current[nextIndex].cardElement, nextCard);
-        event.preventDefault();
       }
+    },
+    eventType: 'scroll',
+    parent: isServerSide() ? undefined : document
+  });
+  function move(newHeight) {
+    if (bottomSheetReference.current !== null) {
+      bottomSheetReference.current.style.transform = `translateY(${newHeight}px)`;
     }
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.currentTarget.click();
+  }
+  function close(event) {
+    setPressed(false);
+    moveOffset.current = INITIAL_Y_POSITION;
+    if (bottomSheetReference.current !== null) {
+      bottomSheetReference.current.style.removeProperty('transform');
+    }
+    if (props.onClose) {
+      props.onClose(event);
     }
+  }
+  const onSwipeStart = event => {
+    initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;
+    setPressed(true);
   };
-  const scrollCardIntoView = (element, card) => {
-    element.scrollIntoView({
-      behavior: 'smooth',
-      block: 'nearest',
-      inline: 'center'
-    });
-    setFocusedCard(card.id);
+  const onSwipeMove = event => {
+    if (pressed) {
+      const {
+        clientY
+      } = 'touches' in event ? event.touches[0] : event;
+      const offset = calculateOffsetAfterMove(clientY);
+      // check whether move is to the bottom only and content scroll position is at the top
+      if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {
+        moveOffset.current = offset;
+        animationId.current = requestAnimationFrame(() => {
+          if (animationId.current !== undefined && bottomSheetReference.current !== null) {
+            move(offset);
+          }
+        });
+      }
+    }
   };
+  function onSwipeEnd(event) {
+    // stop moving component
+    cancelAnimationFrame(animationId.current);
+    setPressed(false);
+    // check whether move down is strong enough
+    // and content scroll position is at the top to close the component
+    if (moveOffset.current > MOVE_OFFSET_THRESHOLD && isContentScrollPositionAtTop()) {
+      close(event);
+    }
+    // otherwise move component back to default (initial) position
+    else {
+      move(INITIAL_Y_POSITION);
+    }
+    moveOffset.current = INITIAL_Y_POSITION;
+  }
+  function isContentScrollPositionAtTop() {
+    return contentReference?.current?.scrollTop !== undefined && contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD;
+  }
+  /**
+   * Calculates how hard user moves component,
+   * result value used to determine whether to hide component or re-position to default state
+   *
+   * @param afterMoveYCoordinate
+   */
+  function calculateOffsetAfterMove(afterMoveYCoordinate) {
+    return afterMoveYCoordinate - initialYCoordinate.current;
+  }
+  /**
+   * Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component
+   * and ensures space for safe zone (32px) at the top.
+   */
+  function setContentMaxHeight() {
+    const safeZoneHeight = '64px';
+    const topbarHeight = '32px';
+    const windowHight = isServerSide() ? 0 : window.innerHeight;
+    /**
+     * Calculate _real_ height of the screen (taking into account parts of browser interface).
+     *
+     * See https://css-tricks.com/the-trick-to-viewport-units-on-mobile for more details.
+     */
+    const screenHeight = `${windowHight * 0.01 * 100}px`;
+    return {
+      maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`
+    };
+  }
+  const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
+  return is400Zoom ? /*#__PURE__*/jsx(Drawer$1, {
+    open: props.open,
+    className: props.className,
+    onClose: close,
+    children: props.children
+  }) : /*#__PURE__*/jsx(Dimmer$1, {
+    open: props.open,
+    fadeContentOnEnter: true,
+    fadeContentOnExit: true,
+    onClose: close,
+    children: /*#__PURE__*/jsx(SlidingPanel, {
+      ref: bottomSheetReference,
+      open: props.open,
+      position: Position.BOTTOM,
+      className: classNames('np-bottom-sheet', props.className),
+      children: /*#__PURE__*/jsxs("div", {
+        role: "dialog",
+        "aria-modal": true,
+        onTouchStart: onSwipeStart,
+        onTouchMove: onSwipeMove,
+        onTouchEnd: onSwipeEnd,
+        onMouseDown: onSwipeStart,
+        onMouseMove: onSwipeMove,
+        onMouseUp: onSwipeEnd,
+        children: [/*#__PURE__*/jsxs("div", {
+          ref: topBarReference,
+          className: "np-bottom-sheet--top-bar",
+          children: [/*#__PURE__*/jsx("div", {
+            className: "np-bottom-sheet--handler"
+          }), /*#__PURE__*/jsx(CloseButton, {
+            size: "sm",
+            className: "sr-only np-bottom-sheet--close-btn",
+            onClick: close
+          })]
+        }), /*#__PURE__*/jsx("div", {
+          ref: contentReference,
+          style: setContentMaxHeight(),
+          className: "np-bottom-sheet--content",
+          children: props.children
+        })]
+      })
+    })
+  });
+};
+
+const NavigationOption = /*#__PURE__*/forwardRef(({
+  as: component = 'button',
+  disabled = false,
+  onClick,
+  className,
+  ...rest
+}, reference) => {
+  if ('href' in rest && rest.href) {
+    component = 'a';
+  }
+  return /*#__PURE__*/jsx(Option$2, {
+    ...rest,
+    ref: reference,
+    as: component,
+    className: classNames('np-navigation-option', className),
+    button: /*#__PURE__*/jsx(Chevron, {
+      orientation: Position.RIGHT,
+      disabled: disabled,
+      className: "d-block"
+    }),
+    disabled: disabled,
+    onClick: event => {
+      if (disabled) {
+        event.preventDefault();
+        return;
+      }
+      if (onClick) {
+        onClick(event);
+      }
+    }
+  });
+});
+
+const NavigationOptionList = ({
+  children
+}) => {
+  return /*#__PURE__*/jsx("ul", {
+    className: "np-navigation-options-list",
+    children: Children.map(children, child => /*#__PURE__*/jsx("li", {
+      className: "np-navigation-options-list__item",
+      children: child
+    }, child?.toString()))
+  });
+};
+
+const FieldLabelIdContext = /*#__PURE__*/createContext(undefined);
+const FieldLabelIdContextProvider = FieldLabelIdContext.Provider;
+const InputIdContext = /*#__PURE__*/createContext(undefined);
+const InputIdContextProvider = InputIdContext.Provider;
+const InputDescribedByContext = /*#__PURE__*/createContext(undefined);
+const InputDescribedByProvider = InputDescribedByContext.Provider;
+const InputInvalidContext = /*#__PURE__*/createContext(undefined);
+const InputInvalidProvider = InputInvalidContext.Provider;
+function useInputAttributes({
+  nonLabelable
+} = {}) {
+  const labelId = useContext(FieldLabelIdContext);
+  return {
+    id: useContext(InputIdContext),
+    'aria-labelledby': nonLabelable ? labelId : undefined,
+    'aria-describedby': useContext(InputDescribedByContext),
+    'aria-invalid': useContext(InputInvalidContext)
+  };
+}
+function withInputAttributes(Component, args) {
+  function ComponentWithInputAttributes(props) {
+    return /*#__PURE__*/jsx(Component, {
+      inputAttributes: useInputAttributes(args),
+      ...props
+    });
+  }
+  ComponentWithInputAttributes.displayName = `withInputAttributes(${Component.displayName || Component.name || 'Component'})`;
+  return ComponentWithInputAttributes;
+}
+
+var messages$b = defineMessages({
+  actionLabel: {
+    id: "neptune.SelectOption.action.label"
+  }
+});
+
+function SelectOption({
+  selected: selectedValueProp = undefined,
+  optionsTitle,
+  options,
+  onChange,
+  action,
+  ...props
+}) {
+  const intl = useIntl();
+  const rootRef = useRef(null);
+  const [selected, setSelected] = useState(selectedValueProp);
+  const [showOptions, setShowOptions] = useState(false);
+  const inputAttributes = useInputAttributes();
+  function handleOnClick(showOptionsStatus) {
+    return () => {
+      setShowOptions(showOptionsStatus);
+    };
+  }
+  function handleOnChange(data) {
+    return () => {
+      setShowOptions(false);
+      setSelected(data);
+      onChange(data);
+    };
+  }
+  const isSelected = selected !== undefined;
+  const {
+    isMobile
+  } = useLayout();
+  function getOptionsContent(isMobileView = false) {
+    return /*#__PURE__*/jsx("div", {
+      className: classNames('np-select-option-list'),
+      children: options.map(optionsGroup =>
+      /*#__PURE__*/
+      // eslint-disable-next-line react/jsx-key
+      jsxs(Section, {
+        className: classNames('np-select-option-group', {
+          'p-a-2': !isMobileView
+        }),
+        children: [optionsGroup.title && /*#__PURE__*/jsx(Header, {
+          title: optionsGroup.title
+        }), /*#__PURE__*/jsx(NavigationOptionList, {
+          children: optionsGroup.options.map(option =>
+          /*#__PURE__*/
+          // eslint-disable-next-line react/jsx-key
+          jsx(NavigationOption, {
+            isContainerAligned: isMobileView,
+            showMediaCircle: true,
+            showMediaAtAllSizes: true,
+            media: option.media,
+            title: option.title,
+            content: option.content,
+            onClick: handleOnChange(option)
+          }))
+        })]
+      }))
+    });
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Option$2, {
+      ref: rootRef,
+      ...props,
+      ...inputAttributes,
+      showMediaAtAllSizes: true,
+      media: (isSelected ? selected : props).media,
+      title: (isSelected ? selected : props).title,
+      content: (isSelected ? selected : props).content,
+      className: classNames('np-select-option', {
+        'np-select-option-selected': isSelected
+      }, props.className),
+      button: isSelected ? /*#__PURE__*/jsx(Chevron, {}) : /*#__PURE__*/jsx(ActionButton, {
+        disabled: props.disabled,
+        onClick: handleOnClick(true),
+        children: action?.label || intl.formatMessage(messages$b.actionLabel)
+      }),
+      onClick: isSelected ? handleOnClick(true) : undefined
+    }), isMobile ? /*#__PURE__*/jsx(BottomSheet$1, {
+      open: showOptions,
+      onClose: handleOnClick(false),
+      children: getOptionsContent(true)
+    }) : /*#__PURE__*/jsx(Panel, {
+      anchorWidth: true,
+      open: showOptions,
+      flip: false,
+      altAxis: false,
+      anchorRef: rootRef,
+      position: Position.BOTTOM,
+      onClose: handleOnClick(false),
+      children: getOptionsContent(false)
+    })]
+  });
+}
+
+const iconTypeMap = {
+  positive: Check,
+  neutral: Info$1,
+  warning: Alert$1,
+  negative: Cross,
+  pending: ClockBorderless,
+  info: Info$1,
+  error: Cross,
+  success: Check
+};
+const StatusIcon = ({
+  sentiment = 'neutral',
+  size = 'md'
+}) => {
+  const Icon = iconTypeMap[sentiment];
+  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
+  return /*#__PURE__*/jsx("span", {
+    "data-testid": "status-icon",
+    className: classNames('status-circle', 'status-circle-' + size, sentiment),
+    children: /*#__PURE__*/jsx(Icon, {
+      className: classNames('status-icon', iconColor)
+    })
+  });
+};
+
+const reader = new commonmark.Parser();
+const writer = new commonmark.HtmlRenderer({
+  safe: true
+});
+const NODE_TYPE_LIST = Object.values(MarkdownNodeType);
+function Markdown({
+  as: Element = 'div',
+  allowList,
+  blockList,
+  config,
+  className,
+  children
+}) {
+  if (!children) {
+    return null;
+  }
+  const linkTarget = config?.link?.target ?? '_self';
+  const paragraphClass = config?.paragraph?.className ?? '';
+  if (allowList != null && blockList != null) {
+    logActionRequired('Markdown supports only one of `allowList` or `blockList` to be used at a time. `blockList` will be ignored.');
+  }
+  const parser = nodes => {
+    const parsed = reader.parse(nodes);
+    const toExclude = allowList != null ? NODE_TYPE_LIST.filter(type => !allowList.includes(type)) : blockList;
+    return toExclude != null ? stripNodes({
+      parsed,
+      blockList: toExclude
+    }) : parsed;
+  };
+  const createMarkup = () => {
+    const parsed = parser(children);
+    return writer.render(parsed).replace(/<a href="/g, `<a target="${linkTarget}" href="`).replace(/<p>/g, `<p class="${paragraphClass}">`);
+  };
+  return /*#__PURE__*/jsx(Element, {
+    className: className,
+    dangerouslySetInnerHTML: {
+      __html: createMarkup()
+    }
+  });
+}
+function stripNodes({
+  blockList,
+  parsed
+}) {
+  if (!parsed) {
+    return parsed;
+  }
+  const walker = parsed.walker();
+  for (let event = walker.next(); event != null; event = walker.next()) {
+    const {
+      node
+    } = event;
+    if (blockList.includes(node.type) && !event.entering) {
+      while (node.firstChild != null) {
+        node.insertBefore(node.firstChild);
+      }
+      node.unlink();
+    }
+  }
+  return parsed;
+}
+
+const allowList = [MarkdownNodeType.STRONG];
+const InlineMarkdown = props => {
+  return /*#__PURE__*/jsx(Markdown, {
+    ...props,
+    as: "span",
+    allowList: allowList,
+    blockList: undefined
+  });
+};
+InlineMarkdown.propTypes = {
+  children: PropTypes.string.isRequired,
+  className: PropTypes.string
+};
+InlineMarkdown.defaultProps = {
+  className: undefined
+};
+
+function Action({
+  action,
+  className
+}) {
+  if ('href' in action) {
+    return /*#__PURE__*/jsx(Link, {
+      href: action.href,
+      className: className,
+      "aria-label": action['aria-label'],
+      target: action.target,
+      type: Typography.LINK_LARGE,
+      onClick: action.onClick,
+      children: action.text
+    });
+  }
+  return /*#__PURE__*/jsx("button", {
+    type: "button",
+    "aria-label": action['aria-label'],
+    className: classNames('btn-unstyled np-text-link-large', className),
+    onClick: action.onClick,
+    children: action.text
+  });
+}
+
+var AlertArrowPosition;
+(function (AlertArrowPosition) {
+  AlertArrowPosition["TOP_LEFT"] = "up-left";
+  AlertArrowPosition["TOP"] = "up-center";
+  AlertArrowPosition["TOP_RIGHT"] = "up-right";
+  AlertArrowPosition["BOTTOM_LEFT"] = "down-left";
+  AlertArrowPosition["BOTTOM"] = "down-center";
+  AlertArrowPosition["BOTTOM_RIGHT"] = "down-right";
+})(AlertArrowPosition || (AlertArrowPosition = {}));
+function resolveType(type) {
+  switch (type) {
+    case 'success':
+      return 'positive';
+    case 'info':
+      return 'neutral';
+    case 'error':
+      return 'negative';
+    default:
+      return type;
+  }
+}
+function Alert({
+  arrow,
+  action,
+  children,
+  className,
+  dismissible,
+  icon,
+  onDismiss,
+  message,
+  size,
+  title,
+  type = 'neutral',
+  variant = 'desktop'
+}) {
   useEffect(() => {
-    updateScrollButtonsState();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [scrollPosition]);
+    if (arrow !== undefined) {
+      logActionRequired("Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.");
+    }
+  }, [arrow]);
   useEffect(() => {
-    window.addEventListener('resize', updateScrollButtonsState);
-    return () => {
-      window.removeEventListener('resize', updateScrollButtonsState);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const addElementToCardsRefArray = (index, ref) => {
-    if (ref) {
-      // eslint-disable-next-line functional/immutable-data
-      carouselCardsRef.current[index] = {
-        type: ref.type ?? carouselCardsRef.current?.[index]?.type,
-        cardElement: ref.cardElement ?? carouselCardsRef.current?.[index]?.cardElement,
-        anchorElement: ref.anchorElement ?? carouselCardsRef.current?.[index]?.anchorElement
-      };
+    if (children !== undefined) {
+      logActionRequired("Alert component doesn't support 'children' anymore, use 'message' instead.");
     }
-  };
+  }, [children]);
+  useEffect(() => {
+    if (dismissible !== undefined) {
+      logActionRequired("Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.");
+    }
+  }, [dismissible]);
+  useEffect(() => {
+    if (size !== undefined) {
+      logActionRequired("Alert component doesn't support 'size' anymore, please remove that prop.");
+    }
+  }, [size]);
+  const resolvedType = resolveType(type);
+  useEffect(() => {
+    if (resolvedType !== type) {
+      logActionRequired(`Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`);
+    }
+  }, [resolvedType, type]);
+  const [shouldFire, setShouldFire] = useState(false);
+  const closeButtonReference = useRef(null);
   return /*#__PURE__*/jsxs("div", {
-    className: classNames('carousel-wrapper', className),
-    children: [/*#__PURE__*/jsxs("div", {
-      className: "d-flex justify-content-between carousel__header",
-      children: [typeof header === 'string' ? /*#__PURE__*/jsx(Title, {
-        as: "span",
-        type: "title-body",
-        children: header
-      }) : header, areActionButtonsEnabled ? /*#__PURE__*/jsxs("div", {
-        className: "hidden-xs",
-        children: [/*#__PURE__*/jsx(ActionButton, {
-          className: "carousel__scroll-button",
-          tabIndex: -1,
-          priority: "secondary",
-          disabled: !isLeftActionButtonEnabled,
-          "aria-hidden": "true",
-          "data-testid": "scroll-carousel-left",
-          onClick: () => scrollCarousel('left'),
-          children: /*#__PURE__*/jsx(ChevronLeft, {})
-        }), /*#__PURE__*/jsx(ActionButton, {
-          tabIndex: -1,
-          className: "carousel__scroll-button m-l-1",
-          priority: "secondary",
-          "aria-hidden": "true",
-          "data-testid": "scroll-carousel-right",
-          disabled: scrollIsAtEnd,
-          onClick: () => scrollCarousel(),
-          children: /*#__PURE__*/jsx(ChevronRight, {})
-        })]
-      }) : null]
-    }), /*#__PURE__*/jsx("div", {
-      ref: carouselElementRef,
-      tabIndex: -1,
-      role: "list",
-      className: "carousel",
-      onScroll: event => {
-        const target = event.target;
-        setScrollPosition(target.scrollLeft);
-      },
-      children: cards?.map((card, index) => {
-        const sharedProps = {
-          id: card.id,
-          className: classNames('carousel__card', {
-            'carousel__card--focused': card.id === focusedCard
-          }),
-          onClick: () => {
-            card.onClick?.();
-            onClick?.(card.id);
-          },
-          onFocus: event => {
-            scrollCardIntoView(event.currentTarget, card);
-          }
-        };
-        const cardContent = card.type !== 'promo' ? /*#__PURE__*/jsx("div", {
-          id: `${card.id}-content`,
-          className: classNames('carousel__card-content', {
-            [card.className ?? '']: !!card.className
-          })
-          // eslint-disable-next-line react/forbid-dom-props
-          ,
-          style: card.styles,
-          children: card.content
-        }) : null;
-        if (card.type === 'button') {
-          return /*#__PURE__*/jsx("div", {
-            "aria-labelledby": `${card.id}-content`,
-            role: "listitem",
-            children: /*#__PURE__*/jsx("div", {
-              ...sharedProps,
-              ref: el => {
-                if (el) {
-                  // eslint-disable-next-line functional/immutable-data
-                  carouselCardsRef.current[index] = {
-                    type: 'default',
-                    cardElement: el
-                  };
-                }
-              },
-              role: "button",
-              tabIndex: 0,
-              onKeyDown: event => handleOnKeyDown(event, index),
-              children: cardContent
-            })
-          }, card.id);
+    className: classNames('alert d-flex', `alert-${resolvedType}`, arrow != null && alertArrowClassNames(arrow), className),
+    "data-testid": "alert",
+    onTouchStart: () => setShouldFire(true),
+    onTouchEnd: event => {
+      if (shouldFire && action?.href &&
+      // Check if current event is triggered from closeButton
+      event.target instanceof Node && closeButtonReference.current && !closeButtonReference.current.contains(event.target)) {
+        if (action.target === '_blank') {
+          window.top?.open(action.href);
+        } else {
+          window.top?.location.assign(action.href);
         }
-        if (card.type === 'promo') {
-          return /*#__PURE__*/jsx("div", {
-            id: card.id,
-            role: "listitem",
-            "aria-labelledby": `${card.id}-anchor`,
-            children: /*#__PURE__*/jsx(PromoCard$1, {
-              ...card,
-              type: undefined,
-              ...sharedProps,
-              ref: el => {
-                if (el) {
-                  addElementToCardsRefArray(index, {
-                    type: 'promo',
-                    cardElement: el
-                  });
-                }
-              },
-              anchorRef: el => {
-                if (el) {
-                  addElementToCardsRefArray(index, {
-                    type: 'promo',
-                    anchorElement: el
-                  });
-                }
-              },
-              anchorId: `${card.id}-anchor`,
-              onKeyDown: event => handleOnKeyDown(event, index)
+      }
+      setShouldFire(false);
+    },
+    onTouchMove: () => setShouldFire(false),
+    children: [/*#__PURE__*/jsxs("div", {
+      className: classNames('alert__content', 'd-flex', 'flex-grow-1', variant),
+      "data-testid": variant,
+      children: [icon ? /*#__PURE__*/jsx("div", {
+        className: "alert__icon",
+        children: icon
+      }) : /*#__PURE__*/jsx(StatusIcon, {
+        size: Size.LARGE,
+        sentiment: resolvedType
+      }), /*#__PURE__*/jsxs("div", {
+        className: "alert__message",
+        children: [/*#__PURE__*/jsxs("div", {
+          role: Sentiment.NEGATIVE === resolvedType ? 'alert' : 'status',
+          children: [title && /*#__PURE__*/jsx(Title, {
+            className: "m-b-1",
+            type: Typography.TITLE_BODY,
+            children: title
+          }), /*#__PURE__*/jsx(Body, {
+            as: "span",
+            className: "d-block",
+            type: Typography.BODY_LARGE,
+            children: children || /*#__PURE__*/jsx(InlineMarkdown, {
+              children: message
             })
-          }, card.id);
-        }
-        return /*#__PURE__*/jsx("div", {
-          "aria-labelledby": `${card.id}-content`,
-          role: "listitem",
-          children: /*#__PURE__*/jsx("a", {
-            ...sharedProps,
-            ref: el => {
-              if (el) {
-                // eslint-disable-next-line functional/immutable-data
-                carouselCardsRef.current[index] = {
-                  type: 'default',
-                  cardElement: el
-                };
-              }
-            },
-            href: card.href,
-            rel: "noreferrer",
-            onKeyDown: event => handleOnKeyDown(event, index),
-            children: cardContent
-          })
-        }, card.id);
-      })
-    }), /*#__PURE__*/jsx("div", {
-      className: "visible-xs",
-      children: /*#__PURE__*/jsx("div", {
-        className: "carousel__indicators",
-        children: cards?.map((card, index) => /*#__PURE__*/jsx("button", {
-          "data-testid": `${card.id}-indicator`,
-          tabIndex: -1,
-          "aria-hidden": true,
-          type: "button",
-          className: classNames('carousel__indicator', {
-            'carousel__indicator--selected': card.id === visibleCardOnMobileView
-          }),
-          onClick: () => {
-            scrollCardIntoView(carouselCardsRef.current[index].cardElement, card);
-          }
-        }, `${card.id}-indicator`))
-      })
+          })]
+        }), action && /*#__PURE__*/jsx(Action, {
+          action: action,
+          className: "m-t-1"
+        })]
+      })]
+    }), onDismiss && /*#__PURE__*/jsx(CloseButton, {
+      ref: closeButtonReference,
+      className: "m-l-2",
+      onClick: onDismiss
     })]
   });
-};
-const isVisible = (container, el) => {
-  const cWidth = container.offsetWidth;
-  const cScrollOffset = container.scrollLeft;
-  const elemLeft = el.offsetLeft - container.offsetLeft;
-  const elemRight = elemLeft + el.offsetWidth;
-  return elemLeft >= cScrollOffset && elemRight <= cScrollOffset + cWidth;
-};
+}
+function alertArrowClassNames(arrow) {
+  switch (arrow) {
+    case 'down-center':
+      return 'arrow arrow-bottom arrow-center';
+    case 'down-left':
+      return 'arrow arrow-bottom arrow-left';
+    case 'down-right':
+      return 'arrow arrow-bottom arrow-right';
+    case 'up-center':
+      return 'arrow arrow-center';
+    case 'up-right':
+      return 'arrow arrow-right';
+    case 'up-left':
+    default:
+      return 'arrow';
+  }
+}
 
-const Card = /*#__PURE__*/forwardRef((props, reference) => {
-  const {
-    'aria-label': ariaLabel,
-    as: Element,
-    isExpanded,
-    title,
-    details,
-    children,
-    onClick,
-    icon,
-    id,
-    className,
-    ...rest
-  } = props;
-  const isOpen = !!(isExpanded && children);
-  return /*#__PURE__*/jsxs(Element, {
-    ref: reference,
-    className: classNames('np-card', className, {
-      'np-card--expanded': isOpen,
-      'np-card--inactive': !children,
-      'np-card--has-icon': !!icon
-    }),
-    id: id,
-    "data-testid": rest['data-testid'],
-    children: [/*#__PURE__*/jsx(Option$2, {
-      "aria-label": ariaLabel,
-      as: children ? 'button' : 'div',
-      className: classNames('np-card__button'),
-      media: icon,
-      title: title,
-      content: details,
-      showMediaAtAllSizes: true,
-      button: children && /*#__PURE__*/jsx(Chevron, {
-        orientation: isOpen ? Position.TOP : Position.BOTTOM
-      }),
-      onClick: () => children && onClick(!isExpanded)
-    }), /*#__PURE__*/jsx("div", {
-      className: classNames('np-card__divider', {
-        'np-card__divider--expanded': isOpen
-      })
-    }), isOpen && /*#__PURE__*/jsx(Body, {
-      as: "span",
-      type: Typography.BODY_LARGE,
-      className: "np-card__content d-block",
-      children: children
-    })]
-  });
-});
-const hasChildren = ({
-  children
-}) => children;
-Card.propTypes = {
-  'aria-label': PropTypes.string,
-  as: PropTypes.string,
-  isExpanded: requiredIf(PropTypes.bool, hasChildren),
-  title: PropTypes.node.isRequired,
-  details: PropTypes.node.isRequired,
-  onClick: requiredIf(PropTypes.func, hasChildren),
-  icon: PropTypes.node,
-  children: PropTypes.node,
-  id: PropTypes.string,
-  className: PropTypes.string,
-  'data-testid': PropTypes.string
+// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
+var AvatarType;
+(function (AvatarType) {
+  AvatarType["THUMBNAIL"] = "thumbnail";
+  AvatarType["ICON"] = "icon";
+  AvatarType["EMOJI"] = "emoji";
+  AvatarType["INITIALS"] = "initials";
+})(AvatarType || (AvatarType = {}));
+
+/*
+ * The colors we support generating an Avatar background color from a "seed" for.
+ * Changing this array will change the assignment between seeds.
+ * Do not change this array.
+ */
+const avatarColors = ['--color-bright-blue', '--color-bright-yellow', '--color-bright-pink', '--color-bright-orange'];
+/*
+ * Takes in a "seed" string and spits out an index for the color we should use.
+ * This implementation has been synced across all three clients so that we consistently
+ * generate branded avatar colors when rendering a list of Avatars.
+ * Do not change this implementation.
+ */
+const hashSeed = seed => {
+  const base = 31;
+  const modulo = avatarColors.length;
+  let hashValue = 0;
+  let basePow = 1;
+  for (let i = 0; i < seed.length; i += 1) {
+    hashValue = (hashValue + seed.charCodeAt(i) * basePow) % modulo;
+    basePow = basePow * base % modulo;
+  }
+  return hashValue;
 };
-Card.defaultProps = {
-  'aria-label': undefined,
-  as: 'div',
-  children: null,
-  id: null,
-  className: null,
-  'data-testid': null
+const getAvatarColorFromSeed = seed => {
+  return avatarColors[hashSeed(seed)];
 };
-var Card$1 = Card;
-
-const CheckboxButton = /*#__PURE__*/forwardRef(({
-  checked,
-  className,
-  disabled,
-  onChange,
-  ...rest
-}, reference) => /*#__PURE__*/jsxs("span", {
-  className: classNames('np-checkbox-button', className, disabled && 'disabled'),
-  children: [/*#__PURE__*/jsx("input", {
-    ...rest,
-    ref: reference,
-    type: "checkbox",
-    disabled: disabled,
-    checked: checked,
-    onChange: onChange
-  }), /*#__PURE__*/jsx("span", {
-    className: "tw-checkbox-button",
-    children: /*#__PURE__*/jsx("span", {
-      className: "tw-checkbox-check"
-    })
-  })]
-}));
-var CheckboxButton$1 = CheckboxButton;
 
-const Checkbox = ({
-  id,
-  checked,
-  required,
-  disabled,
-  readOnly,
-  label,
+const backwardsCompatibleSize = size => {
+  switch (size) {
+    case 'sm':
+      return 24;
+    case 'md':
+      return 48;
+    case 'lg':
+      return 72;
+    default:
+      return size;
+  }
+};
+const Avatar = ({
+  backgroundColor = null,
+  backgroundColorSeed = null,
+  children = null,
   className,
-  secondary,
-  onChange,
-  onFocus,
-  onBlur
+  outlined = false,
+  size: sizeFromProps = 48,
+  theme = Theme.LIGHT,
+  type = 'thumbnail'
 }) => {
-  const {
-    isModern
-  } = useTheme();
-  const classList = classNames('np-checkbox', {
-    checkbox: true,
-    'checkbox-lg': secondary,
-    disabled: isModern && disabled
-  }, className);
-  const innerDisabled = disabled || readOnly;
+  const backgroundColorFromSeed = useMemo(() => !backgroundColor && backgroundColorSeed ? `var(${getAvatarColorFromSeed(backgroundColorSeed)})` : undefined, [backgroundColor, backgroundColorSeed]);
+  const size = backwardsCompatibleSize(sizeFromProps);
   return /*#__PURE__*/jsx("div", {
-    id: id,
-    className: classList,
-    children: /*#__PURE__*/jsxs("label", {
-      className: classNames({
-        disabled
-      }),
-      children: [/*#__PURE__*/jsx(CheckboxButton$1, {
-        className: "p-r-2",
-        checked: checked,
-        disabled: innerDisabled,
-        required: !innerDisabled && required,
-        onFocus: onFocus,
-        onChange: () => onChange(!checked),
-        onBlur: onBlur
-      }), /*#__PURE__*/jsxs(Body, {
-        as: "span",
-        className: "np-checkbox__text",
-        type: secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE,
-        children: [/*#__PURE__*/jsx("span", {
-          className: required ? 'has-required' : undefined,
-          children: label
-        }), secondary && /*#__PURE__*/jsx(Body, {
-          as: "span",
-          className: classNames({
-            secondary: !isModern
-          }),
-          children: secondary
-        })]
-      })]
-    })
-  });
-};
-Checkbox.propTypes = {
-  id: PropTypes.string,
-  checked: PropTypes.bool,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  label: PropTypes.node.isRequired,
-  secondary: PropTypes.string,
-  onFocus: PropTypes.func,
-  onChange: PropTypes.func.isRequired,
-  onBlur: PropTypes.func,
-  className: PropTypes.string
+    className: classNames('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
+      'tw-avatar--outlined': outlined,
+      'tw-avatar--branded': Boolean(backgroundColorFromSeed),
+      'np-text-title-body': type === 'initials'
+    }),
+    children: /*#__PURE__*/jsx("div", {
+      className: "tw-avatar__content",
+      style: {
+        backgroundColor: backgroundColor || backgroundColorFromSeed
+      },
+      children: children
+    })
+  });
 };
-Checkbox.defaultProps = {
-  id: null,
-  checked: false,
-  required: false,
-  disabled: false,
-  readOnly: false,
-  secondary: null,
-  onFocus: null,
-  onBlur: null,
-  className: undefined
+
+const Badge = ({
+  badge,
+  className = undefined,
+  size = Size.SMALL,
+  border = Theme.LIGHT,
+  children
+}) => {
+  const classes = classNames('tw-badge', {
+    [`tw-badge-border-${border}`]: border,
+    [`tw-badge-${size}`]: size
+  }, className);
+  return /*#__PURE__*/jsxs("div", {
+    className: classes,
+    children: [/*#__PURE__*/jsx("div", {
+      className: "tw-badge__children",
+      children: children
+    }), /*#__PURE__*/jsx("div", {
+      className: "tw-badge__content",
+      children: badge
+    })]
+  });
 };
 
-const CheckboxOption = /*#__PURE__*/forwardRef(({
-  checked,
-  disabled,
-  onChange,
+const OptionalBadge = ({
+  url,
+  altText,
+  statusIcon,
+  children,
   ...rest
-}, reference) => {
-  return /*#__PURE__*/jsx(Option$2, {
-    ...rest,
-    ref: reference,
-    disabled: disabled,
-    button: /*#__PURE__*/jsx(CheckboxButton$1, {
-      checked: checked,
-      disabled: disabled,
-      onChange: () => onChange?.(!checked)
+}) => {
+  if (url) {
+    return /*#__PURE__*/jsx(Badge, {
+      badge: /*#__PURE__*/jsx("img", {
+        src: url,
+        alt: altText
+      }),
+      ...rest,
+      children: children
+    });
+  }
+  if (statusIcon) {
+    return /*#__PURE__*/jsx(Badge, {
+      badge: /*#__PURE__*/jsx(StatusIcon, {
+        sentiment: statusIcon,
+        size: Size.SMALL
+      }),
+      ...rest,
+      children: children
+    });
+  }
+  return /*#__PURE__*/jsx(Fragment, {
+    children: children
+  });
+};
+const AvatarWrapper = ({
+  url,
+  profileType,
+  profileId,
+  badgeUrl,
+  badgeAltText,
+  badgeStatusIcon,
+  name,
+  avatarProps,
+  badgeProps
+}) => {
+  const [hasImageLoadError, setImageLoadError] = useState(false);
+  const isBusinessProfile = profileType === ProfileType.BUSINESS;
+  // Reset the errored state when url changes
+  useEffect(() => setImageLoadError(false), [url]);
+  const getAvatarProps = () => {
+    if (url && !hasImageLoadError) {
+      return {
+        type: AvatarType.THUMBNAIL,
+        children: /*#__PURE__*/jsx("img", {
+          src: url,
+          alt: "",
+          onError: () => setImageLoadError(true)
+        }),
+        ...avatarProps
+      };
+    }
+    if (profileType) {
+      return {
+        type: AvatarType.ICON,
+        children: isBusinessProfile ? /*#__PURE__*/jsx(Briefcase, {
+          size: "24"
+        }) : /*#__PURE__*/jsx(Person, {
+          size: "24"
+        }),
+        ...avatarProps
+      };
+    }
+    if (name) {
+      return {
+        type: AvatarType.INITIALS,
+        children: /*#__PURE__*/jsx(Fragment, {
+          children: getInitials(name)
+        }),
+        backgroundColorSeed: profileId?.toString(),
+        ...avatarProps
+      };
+    }
+    return {
+      type: AvatarType.ICON,
+      children: /*#__PURE__*/jsx(Person, {
+        size: "24"
+      }),
+      ...avatarProps
+    };
+  };
+  return /*#__PURE__*/jsx(OptionalBadge, {
+    url: badgeUrl,
+    altText: badgeAltText,
+    statusIcon: badgeStatusIcon,
+    ...badgeProps,
+    children: /*#__PURE__*/jsx(Avatar, {
+      size: Size.MEDIUM,
+      ...getAvatarProps()
     })
   });
-});
+};
+function getInitials(name) {
+  const allInitials = name.split(' ').map(part => part[0]).join('').toUpperCase();
+  if (allInitials.length === 1) {
+    return allInitials[0];
+  }
+  return allInitials[0] + allInitials.slice(-1);
+}
 
-const Chip = ({
-  label,
-  value,
-  onRemove,
-  onClick,
-  onKeyPress,
-  className = undefined,
-  'aria-label': ariaLabel,
-  'aria-checked': ariaChecked,
-  role,
-  closeButton
-}) => {
-  const isActionable = onClick || onKeyPress;
-  const defaultRole = isActionable ? 'button' : undefined;
-  const tabIndex = isActionable ? 0 : -1;
-  const {
-    isModern
-  } = useTheme();
+const Card$2 = /*#__PURE__*/forwardRef(({
+  className,
+  children = null,
+  id,
+  isDisabled = false,
+  isSmall = false,
+  onDismiss,
+  testId,
+  ...props
+}, ref) => {
   const closeButtonReference = useRef(null);
-  const previousCloseButtonShown = useRef(undefined);
-  useEffect(() => {
-    if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {
-      closeButtonReference.current?.focus();
-    }
-    previousCloseButtonShown.current = closeButtonReference.current != null;
-  }, [onRemove]);
   return /*#__PURE__*/jsxs("div", {
-    role: role ?? defaultRole,
-    tabIndex: tabIndex,
-    "aria-label": ariaLabel,
-    "aria-checked": ariaChecked,
-    className: classNames('np-chip', 'd-flex', 'align-items-center', 'justify-content-between', onRemove ? 'np-chip--removable' : '', className),
-    ...(isActionable && {
-      onClick,
-      onKeyPress
-    }),
-    children: [isModern ? /*#__PURE__*/jsx(Body, {
-      "aria-hidden": !!onRemove,
-      type: Typography.BODY_DEFAULT_BOLD,
-      children: label
-    }) : /*#__PURE__*/jsx("span", {
-      "aria-hidden": "false",
-      className: "np-chip-label",
-      children: label
-    }), onRemove ? /*#__PURE__*/jsx(CloseButton, {
+    ref: ref,
+    className: classNames('np-Card', {
+      'np-Card--small': !!isSmall,
+      'is-disabled': !!isDisabled
+    }, className),
+    id: id,
+    "data-testid": testId,
+    ...props,
+    children: [onDismiss && /*#__PURE__*/jsx(CloseButton, {
       ref: closeButtonReference,
-      className: isModern ? `btn-unstyled` : `btn-unstyled m-l-1`,
-      "aria-label": closeButton?.['aria-label'],
-      size: "sm",
-      filled: isModern,
-      onClick: onRemove
-    }) : null]
-  }, value);
-};
-
-var messages$a = defineMessages({
-  ariaLabel: {
-    id: "neptune.Chips.ariaLabel"
-  }
+      className: "np-Card-closeButton",
+      size: isSmall ? 'sm' : 'md',
+      isDisabled: isDisabled,
+      testId: "close-button",
+      onClick: e => {
+        stopPropagation$1(e);
+        onDismiss();
+      }
+    }), children]
+  });
 });
+Card$2.displayName = 'Card';
 
-const Chips = ({
-  chips,
-  onChange,
-  selected,
-  'aria-label': ariaLabel,
+function Display({
+  as: Heading = 'h1',
+  type = Typography.DISPLAY_LARGE,
+  children,
+  className,
+  id
+}) {
+  return /*#__PURE__*/jsx(Heading, {
+    id: id,
+    className: classNames(`np-text-${type}`, 'text-primary', className),
+    children: children
+  });
+}
+
+const EmptyTransparentImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+const Image = ({
+  id,
+  src,
+  alt,
+  onLoad,
+  onError,
   className,
-  multiple
+  loading,
+  stretch = true,
+  role,
+  shrink = true
 }) => {
-  const intl = useIntl();
-  const isSelected = value => Array.isArray(selected) ? selected.includes(value) : selected === value;
-  const handleOnChange = (selectedValue, isCurrentlyEnabled) => {
-    onChange({
-      isEnabled: !isCurrentlyEnabled,
-      selectedValue
-    });
-  };
-  return /*#__PURE__*/jsx("div", {
-    className: classNames('np-chips d-flex', className),
-    "aria-label": ariaLabel,
-    role: !multiple ? 'radiogroup' : undefined,
-    children: chips.map(chip => {
-      const chipSelected = isSelected(chip.value);
-      return /*#__PURE__*/jsx(Chip, {
-        value: chip.value,
-        label: chip.label,
-        closeButton: {
-          'aria-label': intl.formatMessage(messages$a.ariaLabel, {
-            choice: chip.label
-          })
-        },
-        className: classNames('text-xs-nowrap', {
-          'np-chip--selected': chipSelected,
-          'p-r-1': multiple && chipSelected
-        }),
-        ...(multiple && chipSelected ? {
-          onRemove: () => handleOnChange(chip.value, chipSelected),
-          'aria-label': chip.label
-        } : {
-          onClick: () => handleOnChange(chip.value, chipSelected),
-          onKeyPress: () => handleOnChange(chip.value, chipSelected),
-          role: !multiple ? 'radio' : undefined,
-          'aria-checked': chipSelected
-        })
-      }, chip.value);
-    })
+  const elementReference = useRef(null);
+  const [hasIntersected] = useHasIntersected({
+    elRef: elementReference,
+    loading
+  });
+  let imageSource = src;
+  let imageOnLoad = onLoad;
+  if (loading === 'lazy' && !hasIntersected) {
+    imageSource = EmptyTransparentImage;
+    imageOnLoad = undefined;
+  }
+  return /*#__PURE__*/jsx("img", {
+    ref: elementReference,
+    id: id,
+    alt: alt,
+    src: imageSource,
+    className: classNames(['tw-image', {
+      'tw-image__stretch': stretch,
+      'tw-image__shrink': shrink
+    }, className]),
+    role: role,
+    onLoad: imageOnLoad,
+    onError: onError
   });
 };
 
-const CircularButton = ({
+const defaultPromoCardContext = {
+  state: '',
+  isDisabled: false,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onChange: () => {}
+};
+/**
+ * The PromoCard context object.
+ */
+const PromoCardContext = /*#__PURE__*/createContext(defaultPromoCardContext);
+/**
+ * A custom hook for accessing the PromoCard context object.
+ *
+ * The `usePromoCardContext` hook is used to access the PromoCard context object
+ * from within a child PromoCard component. It throws an error if the context
+ * object is not available, which can help with debugging and development.
+ *
+ * @returns {PromoCardContextType} - The PromoCard context object.
+ */
+const usePromoCardContext = () => {
+  return useContext(PromoCardContext);
+};
+
+const PromoCardIndicator = ({
   className,
   children,
-  disabled,
+  label,
   icon,
-  priority = Priority.PRIMARY,
-  type = ControlType.ACCENT,
+  isSmall = false,
+  testid,
   ...rest
 }) => {
-  const classes = classNames('btn np-btn', typeClassMap[type], priorityClassMap[priority]);
-  const iconElement = Number(icon.props.size) !== 24 ? /*#__PURE__*/cloneElement(icon, {
-    size: 24
-  }) : icon;
-  return /*#__PURE__*/jsxs("label", {
-    className: classNames('np-circular-btn', priority, type, disabled && 'disabled', className),
-    children: [/*#__PURE__*/jsx("input", {
-      type: "button",
-      "aria-label": children,
-      className: classes,
-      disabled: disabled,
-      ...rest
-    }), iconElement, /*#__PURE__*/jsx(Body, {
+  const isIconString = icon && typeof icon === 'string';
+  const IconComponent = isIconString && {
+    check: Check,
+    arrow: ArrowRight,
+    download: Download
+  }[icon];
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames('np-Card-indicator', className),
+    "data-testid": testid,
+    ...rest,
+    children: [label && /*#__PURE__*/jsx(Body, {
       as: "span",
-      className: "np-circular-btn__label",
-      type: Typography.BODY_DEFAULT_BOLD,
-      children: children
-    })]
+      type: Typography.BODY_LARGE_BOLD,
+      className: "np-Card-indicatorText",
+      children: label
+    }), icon && /*#__PURE__*/jsx(Avatar, {
+      type: AvatarType.ICON,
+      size: isSmall ? 40 : 56,
+      backgroundColor: "var(--Card-indicator-icon-background-color)",
+      className: "np-Card-indicatorIcon",
+      children: IconComponent ? /*#__PURE__*/jsx(IconComponent, {
+        size: 24,
+        "aria-hidden": "true"
+      }) : icon
+    }), children]
   });
 };
 
-const FocusBoundary = ({
-  children
-}) => {
-  const wrapperReference = useRef(null);
-  useEffect(() => {
-    wrapperReference.current?.focus({
-      preventScroll: true
+const PromoCard = /*#__PURE__*/forwardRef(({
+  className,
+  description,
+  defaultChecked,
+  download,
+  href,
+  hrefLang,
+  id,
+  headingLevel = 'h3',
+  imageAlt,
+  imageClass,
+  imageSource,
+  indicatorLabel,
+  indicatorIcon,
+  isChecked,
+  isDisabled,
+  onClick,
+  onKeyDown,
+  rel,
+  tabIndex,
+  target,
+  testId,
+  title,
+  type,
+  value,
+  isSmall,
+  useDisplayFont = true,
+  anchorRef,
+  anchorId,
+  ...props
+}, ref) => {
+  // Set the `checked` state to the value of `defaultChecked` if it is truthy,
+  // or the value of `isChecked` if it is truthy, or `false` if neither
+  // is truthy.
+  const {
+    state,
+    onChange,
+    isDisabled: contextIsDisabled
+  } = usePromoCardContext();
+  const [checked, setChecked] = useState(type === 'checkbox' ? defaultChecked ?? isChecked ?? false : false);
+  const handleClick = () => {
+    if (type === 'radio') {
+      onChange(value || ''); // Update the context state for radio
+    } else if (type === 'checkbox') {
+      setChecked(!checked); // Update local state for checkbox
+    }
+  };
+  const fallbackId = useId();
+  const componentId = id || fallbackId;
+  // 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`.
+  // 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({
+    'np-Card--promoCard': true,
+    'np-Card--checked': !href && type,
+    'np-Card--link': href && !type,
+    'is-checked': type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined
+  }, className);
+  // Object with common props that will be passed to the `Card` components
+  const commonProps = {
+    className: commonClasses,
+    id: componentId,
+    isDisabled: isDisabled || contextIsDisabled,
+    onClick,
+    onKeyDown,
+    ref,
+    '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`
+  const anchorProps = href && !isDisabled ? {
+    download,
+    href: href || undefined,
+    hrefLang,
+    rel,
+    target,
+    ref: anchorRef,
+    id: anchorId
+  } : {};
+  // Object of all Checked props that will be passed to the root `Card` component
+  const checkedProps = (type === 'checkbox' || type === 'radio') && !href ? {
+    ...commonProps,
+    'aria-checked': type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,
+    'aria-describedby': `${componentId}-title`,
+    'aria-disabled': isDisabled,
+    'data-value': value ?? undefined,
+    role: type === 'checkbox' || type === 'radio' ? type : undefined,
+    onClick: handleClick,
+    onKeyDown: event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        handleClick();
+      }
+    },
+    ref,
+    tabIndex: 0
+  } : {};
+  const getTitle = () => {
+    const titleContent = href && !type ? /*#__PURE__*/jsx("a", {
+      className: "np-Card-titleLink",
+      ...anchorProps,
+      children: title
+    }) : title;
+    const titleProps = {
+      id: `${componentId}-title`,
+      as: headingLevel,
+      className: 'np-Card-title'
+    };
+    return useDisplayFont ? /*#__PURE__*/jsx(Display, {
+      type: Typography.DISPLAY_SMALL,
+      ...titleProps,
+      children: titleContent
+    }) : /*#__PURE__*/jsx(Title, {
+      type: Typography.TITLE_SUBSECTION,
+      ...titleProps,
+      children: titleContent
     });
-  }, []);
-  return /*#__PURE__*/jsx(FocusScope, {
-    contain: true,
-    restoreFocus: true,
-    children: /*#__PURE__*/jsx("div", {
-      ref: wrapperReference,
-      tabIndex: -1,
-      children: children
-    })
-  });
-};
-
-function withNextPortalWrapper(Component) {
-  return function (props) {
-    const [mounted, setMounted] = useState(false);
-    useEffect(() => {
-      setMounted(true);
-    }, [setMounted]);
-    return mounted ? /*#__PURE__*/createPortal( /*#__PURE__*/jsx(Component, {
-      ...props
-    }), document.body) : null;
   };
-}
-
-/**
- * Dimmer state management inspired by Material UI's ModalManager (https://github.com/mui-org/material-ui)
- */
-class DimmerManager {
-  /**
-   * Dimmer refs
-   */
-  dimmers;
-  constructor() {
-    this.dimmers = [];
-  }
-  add(dimmer) {
-    let dimmerIndex = this.dimmers.indexOf(dimmer);
-    if (dimmerIndex !== -1) {
-      return dimmerIndex;
-    }
-    dimmerIndex = this.dimmers.length;
-    this.dimmers.push(dimmer);
-    return dimmerIndex;
-  }
-  remove(dimmer) {
-    const dimmerIndex = this.dimmers.indexOf(dimmer);
-    if (dimmerIndex !== -1) {
-      this.dimmers.splice(dimmerIndex, 1);
-    }
-    return dimmerIndex;
-  }
-  isTop(dimmer) {
-    return this.dimmers.length > 0 && this.dimmers[this.dimmers.length - 1] === dimmer;
-  }
-}
+  useEffect(() => {
+    setChecked(defaultChecked ?? isChecked ?? false);
+  }, [defaultChecked, isChecked]);
+  return /*#__PURE__*/jsxs(Card$2, {
+    ...commonProps,
+    ...checkedProps,
+    ...props,
+    children: [(value === state || checked) && /*#__PURE__*/jsx("span", {
+      className: "np-Card-check",
+      children: /*#__PURE__*/jsx(Check, {
+        size: 24,
+        "aria-hidden": "true"
+      })
+    }), getTitle(), /*#__PURE__*/jsx(Body, {
+      className: "np-Card-description",
+      children: description
+    }), imageSource && /*#__PURE__*/jsx("div", {
+      className: classNames('np-Card-image', {
+        imageClass
+      }),
+      children: /*#__PURE__*/jsx(Image, {
+        src: imageSource,
+        alt: imageAlt || '',
+        loading: "lazy"
+      })
+    }), /*#__PURE__*/jsx(PromoCardIndicator, {
+      label: indicatorLabel,
+      icon: getIconType(),
+      isSmall: isSmall
+    })]
+  });
+});
+var PromoCard$1 = /*#__PURE__*/React__default.memo(PromoCard);
 
-const EXIT_ANIMATION$1 = 350;
-const dimmerManager = new DimmerManager();
-const handleTouchMove = event => {
-  const isTouchedElementDimmer = event.target.classList.contains('dimmer');
-  // disable scroll on iOS devices for Dimmer area
-  // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908
-  // note: scrolling still works for children(s) as expected
-  if (isIosDevice() && isTouchedElementDimmer) {
-    event.stopPropagation();
-    event.preventDefault();
-  }
-};
-const Dimmer = ({
-  children,
+const LEFT_SCROLL_OFFSET = 8;
+const Carousel = ({
+  header,
   className,
-  disableClickToClose = false,
-  contentPosition,
-  fadeContentOnEnter = false,
-  fadeContentOnExit = false,
-  open = false,
-  scrollable = false,
-  transparent = false,
-  onClose
+  cards,
+  onClick
 }) => {
-  const [hasNotExited, setHasNotExited] = useState(false);
-  const dimmerReference = useRef(null);
-  const closeOnClick = event => {
-    if (event.target === dimmerReference.current) {
-      onClose?.(event);
+  const [scrollPosition, setScrollPosition] = useState(0);
+  const [previousScrollPosition, setPreviousScrollPosition] = useState(0);
+  const [scrollIsAtEnd, setScrollIsAtEnd] = useState(false);
+  const [visibleCardOnMobileView, setVisibleCardOnMobileView] = useState('');
+  const carouselElementRef = useRef(null);
+  const carouselCardsRef = useRef([]);
+  const isLeftActionButtonEnabled = scrollPosition > LEFT_SCROLL_OFFSET;
+  const areActionButtonsEnabled = isLeftActionButtonEnabled || !scrollIsAtEnd;
+  const [focusedCard, setFocusedCard] = useState(cards?.[0]?.id);
+  const updateScrollButtonsState = () => {
+    if (carouselElementRef.current) {
+      const {
+        scrollWidth,
+        offsetWidth
+      } = carouselElementRef.current;
+      const scrollAtEnd = scrollWidth - offsetWidth <= scrollPosition + LEFT_SCROLL_OFFSET;
+      setScrollIsAtEnd(scrollAtEnd);
     }
-  };
-  const handleClick = event => {
-    if (disableClickToClose || !onClose) {
-      return;
+    const scrollDirecton = scrollPosition > previousScrollPosition ? 'right' : 'left';
+    const cardsInFullViewIds = [];
+    carouselCardsRef.current.forEach(card => {
+      if (isVisible(carouselElementRef.current, card.cardElement)) {
+        // eslint-disable-next-line functional/immutable-data
+        cardsInFullViewIds.push(card.cardElement.getAttribute('id') ?? '');
+      }
+    });
+    if (cardsInFullViewIds.length >= 1) {
+      const visibleCardIndex = scrollDirecton === 'right' ? cardsInFullViewIds.length - 1 : 0;
+      const visibleCardId = cardsInFullViewIds[visibleCardIndex];
+      setVisibleCardOnMobileView(visibleCardId);
+      setFocusedCard(visibleCardId);
     }
-    closeOnClick(event);
+    setPreviousScrollPosition(scrollPosition);
   };
-  const handleKeyDown = useCallback(event => {
-    if (event.key !== 'Escape') {
-      return;
+  const scrollCarousel = (direction = 'right') => {
+    if (carouselElementRef.current) {
+      const {
+        scrollWidth
+      } = carouselElementRef.current;
+      const cardWidth = scrollWidth / carouselCardsRef.current.length;
+      const res = Math.floor(cardWidth - cardWidth * 0.05);
+      carouselElementRef.current.scrollBy({
+        left: direction === 'right' ? res : -res,
+        behavior: 'smooth'
+      });
     }
-    event.stopPropagation();
-    if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {
-      onClose(event);
+  };
+  const handleOnKeyDown = (event, index) => {
+    if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+      const nextIndex = event.key === 'ArrowRight' ? index + 1 : index - 1;
+      const nextCard = cards[nextIndex];
+      if (nextCard) {
+        const ref = carouselCardsRef.current[nextIndex];
+        if (ref.type === 'promo') {
+          ref.anchorElement?.focus();
+        } else {
+          ref.cardElement?.focus();
+        }
+        scrollCardIntoView(carouselCardsRef.current[nextIndex].cardElement, nextCard);
+        event.preventDefault();
+      }
     }
-  }, [onClose]);
-  const onEnter = () => {
-    setHasNotExited(true);
-    if (dimmerReference.current) {
-      dimmerManager.add(dimmerReference.current);
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.currentTarget.click();
     }
   };
-  const onExited = () => {
-    setHasNotExited(false);
-    if (dimmerReference.current) {
-      dimmerManager.remove(dimmerReference.current);
-    }
+  const scrollCardIntoView = (element, card) => {
+    element.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'center'
+    });
+    setFocusedCard(card.id);
   };
   useEffect(() => {
-    const localReferenceCopy = dimmerReference.current;
-    if (open) {
-      document.addEventListener('keydown', handleKeyDown);
-      localReferenceCopy?.addEventListener('touchmove', handleTouchMove, {
-        passive: true
-      });
+    updateScrollButtonsState();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [scrollPosition]);
+  useEffect(() => {
+    window.addEventListener('resize', updateScrollButtonsState);
+    return () => {
+      window.removeEventListener('resize', updateScrollButtonsState);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const addElementToCardsRefArray = (index, ref) => {
+    if (ref) {
+      // eslint-disable-next-line functional/immutable-data
+      carouselCardsRef.current[index] = {
+        type: ref.type ?? carouselCardsRef.current?.[index]?.type,
+        cardElement: ref.cardElement ?? carouselCardsRef.current?.[index]?.cardElement,
+        anchorElement: ref.anchorElement ?? carouselCardsRef.current?.[index]?.anchorElement
+      };
     }
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-      localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);
-    };
-  }, [handleKeyDown, open]);
-  return /*#__PURE__*/jsx(DimmerWrapper, {
-    open: open,
-    hasNotExited: hasNotExited,
-    children: /*#__PURE__*/jsx(CSSTransition, {
-      nodeRef: dimmerReference,
-      in: open,
-      appear: true
-      // Wait for animation to finish before unmount.
-      ,
-      timeout: {
-        enter: 0,
-        exit: EXIT_ANIMATION$1
-      },
-      classNames: {
-        enter: classNames({
-          'dimmer--enter-fade': fadeContentOnEnter
-        }),
-        enterDone: classNames('dimmer--enter-done', {
-          'dimmer--enter-fade': fadeContentOnEnter
-        }),
-        exit: classNames('dimmer--exit', {
-          'dimmer--exit-fade': fadeContentOnExit
-        })
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames('carousel-wrapper', className),
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "d-flex justify-content-between carousel__header",
+      children: [typeof header === 'string' ? /*#__PURE__*/jsx(Title, {
+        as: "span",
+        type: "title-body",
+        children: header
+      }) : header, areActionButtonsEnabled ? /*#__PURE__*/jsxs("div", {
+        className: "hidden-xs",
+        children: [/*#__PURE__*/jsx(ActionButton, {
+          className: "carousel__scroll-button",
+          tabIndex: -1,
+          priority: "secondary",
+          disabled: !isLeftActionButtonEnabled,
+          "aria-hidden": "true",
+          "data-testid": "scroll-carousel-left",
+          onClick: () => scrollCarousel('left'),
+          children: /*#__PURE__*/jsx(ChevronLeft, {})
+        }), /*#__PURE__*/jsx(ActionButton, {
+          tabIndex: -1,
+          className: "carousel__scroll-button m-l-1",
+          priority: "secondary",
+          "aria-hidden": "true",
+          "data-testid": "scroll-carousel-right",
+          disabled: scrollIsAtEnd,
+          onClick: () => scrollCarousel(),
+          children: /*#__PURE__*/jsx(ChevronRight, {})
+        })]
+      }) : null]
+    }), /*#__PURE__*/jsx("div", {
+      ref: carouselElementRef,
+      tabIndex: -1,
+      role: "list",
+      className: "carousel",
+      onScroll: event => {
+        const target = event.target;
+        setScrollPosition(target.scrollLeft);
       },
-      unmountOnExit: true,
-      onEnter: onEnter,
-      onExited: onExited,
-      children: /*#__PURE__*/jsx(DimmerContentWrapper, {
-        scrollBody: !transparent,
-        children: /*#__PURE__*/jsx(FocusBoundary, {
-          children: /*#__PURE__*/jsx("div", {
-            ref: dimmerReference,
-            className: classNames('dimmer', {
-              'dimmer--scrollable': scrollable,
-              'dimmer--transparent': transparent
-            }, className),
-            role: "presentation",
-            onClick: handleClick,
+      children: cards?.map((card, index) => {
+        const sharedProps = {
+          id: card.id,
+          className: classNames('carousel__card', {
+            'carousel__card--focused': card.id === focusedCard
+          }),
+          onClick: () => {
+            card.onClick?.();
+            onClick?.(card.id);
+          },
+          onFocus: event => {
+            scrollCardIntoView(event.currentTarget, card);
+          }
+        };
+        const cardContent = card.type !== 'promo' ? /*#__PURE__*/jsx("div", {
+          id: `${card.id}-content`,
+          className: classNames('carousel__card-content', {
+            [card.className ?? '']: !!card.className
+          })
+          // eslint-disable-next-line react/forbid-dom-props
+          ,
+          style: card.styles,
+          children: card.content
+        }) : null;
+        if (card.type === 'button') {
+          return /*#__PURE__*/jsx("div", {
+            "aria-labelledby": `${card.id}-content`,
+            role: "listitem",
             children: /*#__PURE__*/jsx("div", {
-              className: classNames('dimmer-content-positioner', contentPosition != null && ['d-flex justify-content-center', {
-                'align-items-start': contentPosition === 'top',
-                'align-items-center': contentPosition === 'center',
-                'align-items-end': contentPosition === 'bottom'
-              }]),
-              children: children
+              ...sharedProps,
+              ref: el => {
+                if (el) {
+                  // eslint-disable-next-line functional/immutable-data
+                  carouselCardsRef.current[index] = {
+                    type: 'default',
+                    cardElement: el
+                  };
+                }
+              },
+              role: "button",
+              tabIndex: 0,
+              onKeyDown: event => handleOnKeyDown(event, index),
+              children: cardContent
+            })
+          }, card.id);
+        }
+        if (card.type === 'promo') {
+          return /*#__PURE__*/jsx("div", {
+            id: card.id,
+            role: "listitem",
+            "aria-labelledby": `${card.id}-anchor`,
+            children: /*#__PURE__*/jsx(PromoCard$1, {
+              ...card,
+              type: undefined,
+              ...sharedProps,
+              ref: el => {
+                if (el) {
+                  addElementToCardsRefArray(index, {
+                    type: 'promo',
+                    cardElement: el
+                  });
+                }
+              },
+              anchorRef: el => {
+                if (el) {
+                  addElementToCardsRefArray(index, {
+                    type: 'promo',
+                    anchorElement: el
+                  });
+                }
+              },
+              anchorId: `${card.id}-anchor`,
+              onKeyDown: event => handleOnKeyDown(event, index)
             })
+          }, card.id);
+        }
+        return /*#__PURE__*/jsx("div", {
+          "aria-labelledby": `${card.id}-content`,
+          role: "listitem",
+          children: /*#__PURE__*/jsx("a", {
+            ...sharedProps,
+            ref: el => {
+              if (el) {
+                // eslint-disable-next-line functional/immutable-data
+                carouselCardsRef.current[index] = {
+                  type: 'default',
+                  cardElement: el
+                };
+              }
+            },
+            href: card.href,
+            rel: "noreferrer",
+            onKeyDown: event => handleOnKeyDown(event, index),
+            children: cardContent
           })
-        })
+        }, card.id);
       })
-    })
+    }), /*#__PURE__*/jsx("div", {
+      className: "visible-xs",
+      children: /*#__PURE__*/jsx("div", {
+        className: "carousel__indicators",
+        children: cards?.map((card, index) => /*#__PURE__*/jsx("button", {
+          "data-testid": `${card.id}-indicator`,
+          tabIndex: -1,
+          "aria-hidden": true,
+          type: "button",
+          className: classNames('carousel__indicator', {
+            'carousel__indicator--selected': card.id === visibleCardOnMobileView
+          }),
+          onClick: () => {
+            scrollCardIntoView(carouselCardsRef.current[index].cardElement, card);
+          }
+        }, `${card.id}-indicator`))
+      })
+    })]
+  });
+};
+const isVisible = (container, el) => {
+  const cWidth = container.offsetWidth;
+  const cScrollOffset = container.scrollLeft;
+  const elemLeft = el.offsetLeft - container.offsetLeft;
+  const elemRight = elemLeft + el.offsetWidth;
+  return elemLeft >= cScrollOffset && elemRight <= cScrollOffset + cWidth;
+};
+
+const Card = /*#__PURE__*/forwardRef((props, reference) => {
+  const {
+    'aria-label': ariaLabel,
+    as: Element,
+    isExpanded,
+    title,
+    details,
+    children,
+    onClick,
+    icon,
+    id,
+    className,
+    ...rest
+  } = props;
+  const isOpen = !!(isExpanded && children);
+  return /*#__PURE__*/jsxs(Element, {
+    ref: reference,
+    className: classNames('np-card', className, {
+      'np-card--expanded': isOpen,
+      'np-card--inactive': !children,
+      'np-card--has-icon': !!icon
+    }),
+    id: id,
+    "data-testid": rest['data-testid'],
+    children: [/*#__PURE__*/jsx(Option$2, {
+      "aria-label": ariaLabel,
+      as: children ? 'button' : 'div',
+      className: classNames('np-card__button'),
+      media: icon,
+      title: title,
+      content: details,
+      showMediaAtAllSizes: true,
+      button: children && /*#__PURE__*/jsx(Chevron, {
+        orientation: isOpen ? Position.TOP : Position.BOTTOM
+      }),
+      onClick: () => children && onClick(!isExpanded)
+    }), /*#__PURE__*/jsx("div", {
+      className: classNames('np-card__divider', {
+        'np-card__divider--expanded': isOpen
+      })
+    }), isOpen && /*#__PURE__*/jsx(Body, {
+      as: "span",
+      type: Typography.BODY_LARGE,
+      className: "np-card__content d-block",
+      children: children
+    })]
   });
-};
-const DimmerWrapper = ({
-  open,
-  hasNotExited,
+});
+const hasChildren = ({
   children
+}) => children;
+Card.propTypes = {
+  'aria-label': PropTypes.string,
+  as: PropTypes.string,
+  isExpanded: requiredIf(PropTypes.bool, hasChildren),
+  title: PropTypes.node.isRequired,
+  details: PropTypes.node.isRequired,
+  onClick: requiredIf(PropTypes.func, hasChildren),
+  icon: PropTypes.node,
+  children: PropTypes.node,
+  id: PropTypes.string,
+  className: PropTypes.string,
+  'data-testid': PropTypes.string
+};
+Card.defaultProps = {
+  'aria-label': undefined,
+  as: 'div',
+  children: null,
+  id: null,
+  className: null,
+  'data-testid': null
+};
+var Card$1 = Card;
+
+const CheckboxButton = /*#__PURE__*/forwardRef(({
+  checked,
+  className,
+  disabled,
+  onChange,
+  ...rest
+}, reference) => /*#__PURE__*/jsxs("span", {
+  className: classNames('np-checkbox-button', className, disabled && 'disabled'),
+  children: [/*#__PURE__*/jsx("input", {
+    ...rest,
+    ref: reference,
+    type: "checkbox",
+    disabled: disabled,
+    checked: checked,
+    onChange: onChange
+  }), /*#__PURE__*/jsx("span", {
+    className: "tw-checkbox-button",
+    children: /*#__PURE__*/jsx("span", {
+      className: "tw-checkbox-check"
+    })
+  })]
+}));
+var CheckboxButton$1 = CheckboxButton;
+
+const Checkbox = ({
+  id,
+  checked,
+  required,
+  disabled,
+  readOnly,
+  label,
+  className,
+  secondary,
+  onChange,
+  onFocus,
+  onBlur
 }) => {
   const {
-    screenMode,
-    theme
+    isModern
   } = useTheme();
-  return open || hasNotExited ? /*#__PURE__*/jsx(ThemeProvider, {
-    theme: "personal",
-    screenMode: theme === 'personal' ? screenMode : 'light',
-    isNotRootProvider: true,
-    children: children
-  }) : /*#__PURE__*/jsx(Fragment, {
-    children: children
+  const classList = classNames('np-checkbox', {
+    checkbox: true,
+    'checkbox-lg': secondary,
+    disabled: isModern && disabled
+  }, className);
+  const innerDisabled = disabled || readOnly;
+  return /*#__PURE__*/jsx("div", {
+    id: id,
+    className: classList,
+    children: /*#__PURE__*/jsxs("label", {
+      className: classNames({
+        disabled
+      }),
+      children: [/*#__PURE__*/jsx(CheckboxButton$1, {
+        className: "p-r-2",
+        checked: checked,
+        disabled: innerDisabled,
+        required: !innerDisabled && required,
+        onFocus: onFocus,
+        onChange: () => onChange(!checked),
+        onBlur: onBlur
+      }), /*#__PURE__*/jsxs(Body, {
+        as: "span",
+        className: "np-checkbox__text",
+        type: secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE,
+        children: [/*#__PURE__*/jsx("span", {
+          className: required ? 'has-required' : undefined,
+          children: label
+        }), secondary && /*#__PURE__*/jsx(Body, {
+          as: "span",
+          className: classNames({
+            secondary: !isModern
+          }),
+          children: secondary
+        })]
+      })]
+    })
   });
 };
-const DimmerContentWrapper = ({
-  children,
-  scrollBody
-}) => {
-  useEffect(() => {
-    if (scrollBody) {
-      addNoScrollClass();
-    }
-    return () => {
-      if (scrollBody) {
-        removeNoScrollClass();
-      }
-    };
-  }, [scrollBody]);
-  return children;
+Checkbox.propTypes = {
+  id: PropTypes.string,
+  checked: PropTypes.bool,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  label: PropTypes.node.isRequired,
+  secondary: PropTypes.string,
+  onFocus: PropTypes.func,
+  onChange: PropTypes.func.isRequired,
+  onBlur: PropTypes.func,
+  className: PropTypes.string
+};
+Checkbox.defaultProps = {
+  id: null,
+  checked: false,
+  required: false,
+  disabled: false,
+  readOnly: false,
+  secondary: null,
+  onFocus: null,
+  onBlur: null,
+  className: undefined
 };
-var Dimmer$1 = withNextPortalWrapper(Dimmer);
 
-const EXIT_ANIMATION = 350;
-const SlidingPanel = /*#__PURE__*/forwardRef(({
-  position = 'left',
-  open,
-  showSlidingPanelBorder,
-  slidingPanelPositionFixed,
-  className,
-  children,
+const CheckboxOption = /*#__PURE__*/forwardRef(({
+  checked,
+  disabled,
+  onChange,
   ...rest
 }, reference) => {
-  const localReference = useRef(null);
-  useImperativeHandle(reference, () => localReference.current, []);
-  return /*#__PURE__*/createElement(CSSTransition, {
+  return /*#__PURE__*/jsx(Option$2, {
     ...rest,
-    key: `sliding-panel--open-${position}`,
-    nodeRef: localReference,
-    in: open
-    // Wait for animation to finish before unmount.
-    ,
-    timeout: {
-      enter: 0,
-      exit: EXIT_ANIMATION
-    },
-    classNames: "sliding-panel",
-    appear: true,
-    unmountOnExit: true
-  }, /*#__PURE__*/jsx("div", {
-    ref: localReference,
-    className: classNames('sliding-panel', `sliding-panel--open-${position}`, showSlidingPanelBorder && `sliding-panel--border-${position}`, slidingPanelPositionFixed && 'sliding-panel--fixed', className),
-    children: children
-  }));
+    ref: reference,
+    disabled: disabled,
+    button: /*#__PURE__*/jsx(CheckboxButton$1, {
+      checked: checked,
+      disabled: disabled,
+      onChange: () => onChange?.(!checked)
+    })
+  });
+});
+
+const Chip = ({
+  label,
+  value,
+  onRemove,
+  onClick,
+  onKeyPress,
+  className = undefined,
+  'aria-label': ariaLabel,
+  'aria-checked': ariaChecked,
+  role,
+  closeButton
+}) => {
+  const isActionable = onClick || onKeyPress;
+  const defaultRole = isActionable ? 'button' : undefined;
+  const tabIndex = isActionable ? 0 : -1;
+  const {
+    isModern
+  } = useTheme();
+  const closeButtonReference = useRef(null);
+  const previousCloseButtonShown = useRef(undefined);
+  useEffect(() => {
+    if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {
+      closeButtonReference.current?.focus();
+    }
+    previousCloseButtonShown.current = closeButtonReference.current != null;
+  }, [onRemove]);
+  return /*#__PURE__*/jsxs("div", {
+    role: role ?? defaultRole,
+    tabIndex: tabIndex,
+    "aria-label": ariaLabel,
+    "aria-checked": ariaChecked,
+    className: classNames('np-chip', 'd-flex', 'align-items-center', 'justify-content-between', onRemove ? 'np-chip--removable' : '', className),
+    ...(isActionable && {
+      onClick,
+      onKeyPress
+    }),
+    children: [isModern ? /*#__PURE__*/jsx(Body, {
+      "aria-hidden": !!onRemove,
+      type: Typography.BODY_DEFAULT_BOLD,
+      children: label
+    }) : /*#__PURE__*/jsx("span", {
+      "aria-hidden": "false",
+      className: "np-chip-label",
+      children: label
+    }), onRemove ? /*#__PURE__*/jsx(CloseButton, {
+      ref: closeButtonReference,
+      className: isModern ? `btn-unstyled` : `btn-unstyled m-l-1`,
+      "aria-label": closeButton?.['aria-label'],
+      size: "sm",
+      filled: isModern,
+      onClick: onRemove
+    }) : null]
+  }, value);
+};
+
+var messages$a = defineMessages({
+  ariaLabel: {
+    id: "neptune.Chips.ariaLabel"
+  }
 });
 
-const Drawer = ({
-  children,
+const Chips = ({
+  chips,
+  onChange,
+  selected,
+  'aria-label': ariaLabel,
   className,
-  footerContent,
-  headerTitle,
-  onClose,
-  open,
-  position
+  multiple
 }) => {
-  logActionRequiredIf('Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.', !onClose);
-  const {
-    isMobile
-  } = useLayout();
-  const titleId = useId();
-  return /*#__PURE__*/jsx(Dimmer$1, {
-    open: open,
-    onClose: onClose,
-    children: /*#__PURE__*/jsx(SlidingPanel, {
-      open: open,
-      position: isMobile ? Position.BOTTOM : position,
-      children: /*#__PURE__*/jsxs("div", {
-        role: "dialog",
-        "aria-modal": true,
-        "aria-labelledby": headerTitle ? titleId : undefined,
-        className: classNames('np-drawer', className),
-        children: [/*#__PURE__*/jsxs("div", {
-          className: classNames('np-drawer-header', {
-            'np-drawer-header--withborder': headerTitle
-          }),
-          children: [headerTitle && /*#__PURE__*/jsx(Title, {
-            id: titleId,
-            type: Typography.TITLE_BODY,
-            children: headerTitle
-          }), /*#__PURE__*/jsx(CloseButton, {
-            onClick: onClose
-          })]
-        }), children && /*#__PURE__*/jsx("div", {
-          className: classNames('np-drawer-content'),
-          children: children
-        }), footerContent && /*#__PURE__*/jsx("div", {
-          className: classNames('np-drawer-footer'),
-          children: footerContent
-        })]
-      })
-    })
-  });
-};
-Drawer.propTypes = {
-  /** The content to appear in the drawer body. */
-  children: PropTypes.node,
-  className: PropTypes.string,
-  /** The content to appear in the drawer footer. */
-  footerContent: PropTypes.node,
-  /** The content to appear in the drawer header. */
-  headerTitle: PropTypes.node,
-  /** The status of Drawer either open or not. */
-  open: PropTypes.bool,
-  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */
-  position: PropTypes.oneOf(['left', 'right', 'bottom']),
-  /** The action to perform on close click. */
-  onClose: PropTypes.func
-};
-Drawer.defaultProps = {
-  children: null,
-  className: undefined,
-  footerContent: null,
-  headerTitle: null,
-  onClose: null,
-  open: false,
-  position: Position.RIGHT
-};
-var Drawer$1 = Drawer;
-
-const INITIAL_Y_POSITION = 0;
-const CONTENT_SCROLL_THRESHOLD = 1;
-const MOVE_OFFSET_THRESHOLD = 50;
-/**
- * Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/
- *
- * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet
- *
- */
-const BottomSheet$1 = props => {
-  const bottomSheetReference = useRef(null);
-  const topBarReference = useRef(null);
-  const contentReference = useRef(null);
-  const [pressed, setPressed] = useState(false);
-  /**
-   * Used to track `requestAnimationFrame` requests
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value
-   */
-  const animationId = useRef(0);
-  /**
-   * Difference between initial coordinate ({@link initialYCoordinate})
-   * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events
-   *
-   * @see {@link calculateOffsetAfterMove}
-   */
-  const moveOffset = useRef(0);
-  const initialYCoordinate = useRef(0);
-  // apply shadow to the bottom of top-bar when scroll over content
-  useConditionalListener({
-    attachListener: props.open && !isServerSide(),
-    callback: () => {
-      if (topBarReference.current !== null) {
-        const {
-          classList
-        } = topBarReference.current;
-        if (!isContentScrollPositionAtTop()) {
-          classList.add('np-bottom-sheet--top-bar--shadow');
-        } else {
-          classList.remove('np-bottom-sheet--top-bar--shadow');
-        }
-      }
-    },
-    eventType: 'scroll',
-    parent: isServerSide() ? undefined : document
-  });
-  function move(newHeight) {
-    if (bottomSheetReference.current !== null) {
-      bottomSheetReference.current.style.transform = `translateY(${newHeight}px)`;
-    }
-  }
-  function close(event) {
-    setPressed(false);
-    moveOffset.current = INITIAL_Y_POSITION;
-    if (bottomSheetReference.current !== null) {
-      bottomSheetReference.current.style.removeProperty('transform');
-    }
-    if (props.onClose) {
-      props.onClose(event);
-    }
-  }
-  const onSwipeStart = event => {
-    initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;
-    setPressed(true);
-  };
-  const onSwipeMove = event => {
-    if (pressed) {
-      const {
-        clientY
-      } = 'touches' in event ? event.touches[0] : event;
-      const offset = calculateOffsetAfterMove(clientY);
-      // check whether move is to the bottom only and content scroll position is at the top
-      if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {
-        moveOffset.current = offset;
-        animationId.current = requestAnimationFrame(() => {
-          if (animationId.current !== undefined && bottomSheetReference.current !== null) {
-            move(offset);
-          }
-        });
-      }
-    }
+  const intl = useIntl();
+  const isSelected = value => Array.isArray(selected) ? selected.includes(value) : selected === value;
+  const handleOnChange = (selectedValue, isCurrentlyEnabled) => {
+    onChange({
+      isEnabled: !isCurrentlyEnabled,
+      selectedValue
+    });
   };
-  function onSwipeEnd(event) {
-    // stop moving component
-    cancelAnimationFrame(animationId.current);
-    setPressed(false);
-    // check whether move down is strong enough
-    // and content scroll position is at the top to close the component
-    if (moveOffset.current > MOVE_OFFSET_THRESHOLD && isContentScrollPositionAtTop()) {
-      close(event);
-    }
-    // otherwise move component back to default (initial) position
-    else {
-      move(INITIAL_Y_POSITION);
-    }
-    moveOffset.current = INITIAL_Y_POSITION;
-  }
-  function isContentScrollPositionAtTop() {
-    return contentReference?.current?.scrollTop !== undefined && contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD;
-  }
-  /**
-   * Calculates how hard user moves component,
-   * result value used to determine whether to hide component or re-position to default state
-   *
-   * @param afterMoveYCoordinate
-   */
-  function calculateOffsetAfterMove(afterMoveYCoordinate) {
-    return afterMoveYCoordinate - initialYCoordinate.current;
-  }
-  /**
-   * Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component
-   * and ensures space for safe zone (32px) at the top.
-   */
-  function setContentMaxHeight() {
-    const safeZoneHeight = '64px';
-    const topbarHeight = '32px';
-    const windowHight = isServerSide() ? 0 : window.innerHeight;
-    /**
-     * Calculate _real_ height of the screen (taking into account parts of browser interface).
-     *
-     * See https://css-tricks.com/the-trick-to-viewport-units-on-mobile for more details.
-     */
-    const screenHeight = `${windowHight * 0.01 * 100}px`;
-    return {
-      maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`
-    };
-  }
-  const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
-  return is400Zoom ? /*#__PURE__*/jsx(Drawer$1, {
-    open: props.open,
-    className: props.className,
-    onClose: close,
-    children: props.children
-  }) : /*#__PURE__*/jsx(Dimmer$1, {
-    open: props.open,
-    fadeContentOnEnter: true,
-    fadeContentOnExit: true,
-    onClose: close,
-    children: /*#__PURE__*/jsx(SlidingPanel, {
-      ref: bottomSheetReference,
-      open: props.open,
-      position: Position.BOTTOM,
-      className: classNames('np-bottom-sheet', props.className),
-      children: /*#__PURE__*/jsxs("div", {
-        role: "dialog",
-        "aria-modal": true,
-        onTouchStart: onSwipeStart,
-        onTouchMove: onSwipeMove,
-        onTouchEnd: onSwipeEnd,
-        onMouseDown: onSwipeStart,
-        onMouseMove: onSwipeMove,
-        onMouseUp: onSwipeEnd,
-        children: [/*#__PURE__*/jsxs("div", {
-          ref: topBarReference,
-          className: "np-bottom-sheet--top-bar",
-          children: [/*#__PURE__*/jsx("div", {
-            className: "np-bottom-sheet--handler"
-          }), /*#__PURE__*/jsx(CloseButton, {
-            size: "sm",
-            className: "sr-only np-bottom-sheet--close-btn",
-            onClick: close
-          })]
-        }), /*#__PURE__*/jsx("div", {
-          ref: contentReference,
-          style: setContentMaxHeight(),
-          className: "np-bottom-sheet--content",
-          children: props.children
-        })]
-      })
+  return /*#__PURE__*/jsx("div", {
+    className: classNames('np-chips d-flex', className),
+    "aria-label": ariaLabel,
+    role: !multiple ? 'radiogroup' : undefined,
+    children: chips.map(chip => {
+      const chipSelected = isSelected(chip.value);
+      return /*#__PURE__*/jsx(Chip, {
+        value: chip.value,
+        label: chip.label,
+        closeButton: {
+          'aria-label': intl.formatMessage(messages$a.ariaLabel, {
+            choice: chip.label
+          })
+        },
+        className: classNames('text-xs-nowrap', {
+          'np-chip--selected': chipSelected,
+          'p-r-1': multiple && chipSelected
+        }),
+        ...(multiple && chipSelected ? {
+          onRemove: () => handleOnChange(chip.value, chipSelected),
+          'aria-label': chip.label
+        } : {
+          onClick: () => handleOnChange(chip.value, chipSelected),
+          onKeyPress: () => handleOnChange(chip.value, chipSelected),
+          role: !multiple ? 'radio' : undefined,
+          'aria-checked': chipSelected
+        })
+      }, chip.value);
     })
   });
 };
 
+const CircularButton = ({
+  className,
+  children,
+  disabled,
+  icon,
+  priority = Priority.PRIMARY,
+  type = ControlType.ACCENT,
+  ...rest
+}) => {
+  const classes = classNames('btn np-btn', typeClassMap[type], priorityClassMap[priority]);
+  const iconElement = Number(icon.props.size) !== 24 ? /*#__PURE__*/cloneElement(icon, {
+    size: 24
+  }) : icon;
+  return /*#__PURE__*/jsxs("label", {
+    className: classNames('np-circular-btn', priority, type, disabled && 'disabled', className),
+    children: [/*#__PURE__*/jsx("input", {
+      type: "button",
+      "aria-label": children,
+      className: classes,
+      disabled: disabled,
+      ...rest
+    }), iconElement, /*#__PURE__*/jsx(Body, {
+      as: "span",
+      className: "np-circular-btn__label",
+      type: Typography.BODY_DEFAULT_BOLD,
+      children: children
+    })]
+  });
+};
+
 function CriticalCommsBanner({
   title,
   subtitle,
@@ -3137,36 +3510,6 @@ const isMonthAndYearFormat = dateString => validDateString(dateString) && dateSt
 const MDY = new Set(['en-US']);
 const YMD = new Set(['hu', 'hu-HU', 'zh-HK', 'zh-CN', 'ja', 'ja-JP']);
 
-const FieldLabelIdContext = /*#__PURE__*/createContext(undefined);
-const FieldLabelIdContextProvider = FieldLabelIdContext.Provider;
-const InputIdContext = /*#__PURE__*/createContext(undefined);
-const InputIdContextProvider = InputIdContext.Provider;
-const InputDescribedByContext = /*#__PURE__*/createContext(undefined);
-const InputDescribedByProvider = InputDescribedByContext.Provider;
-const InputInvalidContext = /*#__PURE__*/createContext(undefined);
-const InputInvalidProvider = InputInvalidContext.Provider;
-function useInputAttributes({
-  nonLabelable
-} = {}) {
-  const labelId = useContext(FieldLabelIdContext);
-  return {
-    id: useContext(InputIdContext),
-    'aria-labelledby': nonLabelable ? labelId : undefined,
-    'aria-describedby': useContext(InputDescribedByContext),
-    'aria-invalid': useContext(InputInvalidContext)
-  };
-}
-function withInputAttributes(Component, args) {
-  function ComponentWithInputAttributes(props) {
-    return /*#__PURE__*/jsx(Component, {
-      inputAttributes: useInputAttributes(args),
-      ...props
-    });
-  }
-  ComponentWithInputAttributes.displayName = `withInputAttributes(${Component.displayName || Component.name || 'Component'})`;
-  return ComponentWithInputAttributes;
-}
-
 var messages$9 = defineMessages({
   monthLabel: {
     id: "neptune.DateInput.month.label"
@@ -3412,214 +3755,96 @@ const DateInput = ({
             onChange: event => handleDayChange(event)
           })
         })]
-      })
-    });
-  };
-  const getYear = () => {
-    return /*#__PURE__*/jsx("div", {
-      className: "col-sm-4",
-      children: /*#__PURE__*/jsxs("label", {
-        children: [/*#__PURE__*/jsx("span", {
-          className: "sr-only",
-          children: yearLabel
-        }), /*#__PURE__*/jsx("div", {
-          className: `input-group input-group-${size}`,
-          children: /*#__PURE__*/jsx(Input, {
-            type: "text",
-            inputMode: "numeric",
-            pattern: "[0-9]*",
-            name: "year",
-            autoComplete: yearAutoComplete,
-            placeholder: placeholders?.year,
-            value: year || '',
-            disabled: disabled,
-            min: 1,
-            onChange: event => handleYearChange(event)
-          })
-        })]
-      })
-    });
-  };
-  const monthBeforeDay = MDY.has(locale);
-  const yearFirst = YMD.has(locale);
-  return /*#__PURE__*/jsx("div", {
-    className: "tw-date",
-    ...inputAttributes,
-    id: id,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-label": ariaLabel,
-    role: "group" // Add role attribute to indicate container for interactive elements
-    ,
-    onFocus: event => shouldPropagateOnFocus(event) ? onFocus && onFocus(event) : event.stopPropagation(),
-    onBlur: event => shouldPropagateOnBlur(event) ? onBlur && onBlur(event) : event.stopPropagation(),
-    children: /*#__PURE__*/jsx("div", {
-      className: "row",
-      children: (() => {
-        if (monthYearOnly) {
-          return /*#__PURE__*/jsxs(Fragment, {
-            children: [!yearFirst && getMonth(), getYear(), yearFirst && getMonth()]
-          });
-        }
-        if (monthBeforeDay) {
-          return /*#__PURE__*/jsxs(Fragment, {
-            children: [getMonth(), getDay(), getYear()]
-          });
-        }
-        if (yearFirst) {
-          return /*#__PURE__*/jsxs(Fragment, {
-            children: [getYear(), getMonth(), getDay()]
-          });
-        }
-        return /*#__PURE__*/jsxs(Fragment, {
-          children: [getDay(), getMonth(), getYear()]
-        });
-      })()
-    })
-  });
-};
-// Should only propagate if the relatedTarget is not part of this DateInput component.
-function shouldPropagateOnFocus({
-  target,
-  relatedTarget
-}) {
-  const targetParent = target.closest('.tw-date');
-  const relatedParent = relatedTarget && relatedTarget.closest('.tw-date');
-  return targetParent !== relatedParent;
-}
-// Should only propagate if the relatedTarget or the activeElement is not part of this DateInput component.
-function shouldPropagateOnBlur({
-  target,
-  relatedTarget
-}) {
-  const blurElementParent = target.closest('.tw-date');
-  // Even though FocusEvent.relatedTarget is supported by IE
-  // (https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/relatedTarget)
-  // "IE11 sets document.activeElement to the next focused element before the blur event is called."
-  // (https://stackoverflow.com/a/49325196/986241)
-  // Therefore if the relatedTarget is null, we try the document.activeElement,
-  // which may contain the HTML element that is gaining focus
-  const focusElement = relatedTarget || (document.activeElement !== target ? document.activeElement : null);
-  const focusElementParent = focusElement && focusElement.closest('.tw-date');
-  return blurElementParent !== focusElementParent;
-}
-
-const POPOVER_OFFSET = [0, 16];
-// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
-// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.
-// This mapping forces popover to try the four available positions before going back to the initial chosen one.
-const fallbackPlacements = {
-  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],
-  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],
-  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],
-  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM]
-};
-const Panel = /*#__PURE__*/forwardRef(function Panel({
-  arrow = false,
-  flip = true,
-  altAxis = false,
-  children,
-  open = false,
-  onClose,
-  position = Position.BOTTOM,
-  anchorRef,
-  anchorWidth = false,
-  ...rest
-}, reference) {
-  const [arrowElement, setArrowElement] = useState(null);
-  const [popperElement, setPopperElement] = useState(null);
-  const modifiers = [];
-  if (altAxis) {
-    modifiers.push({
-      // https://popper.js.org/docs/v2/modifiers/prevent-overflow
-      name: 'preventOverflow',
-      options: {
-        altAxis: true,
-        tether: false
-      }
-    });
-  }
-  if (arrow) {
-    modifiers.push({
-      name: 'arrow',
-      options: {
-        element: arrowElement,
-        options: {
-          padding: 8 // 8px from the edges of the popper
-        }
-      }
-    });
-    // This lets you displace a popper element from its reference element.
-    modifiers.push({
-      name: 'offset',
-      options: {
-        offset: POPOVER_OFFSET
-      }
-    });
-  }
-  if (flip && fallbackPlacements[position]) {
-    modifiers.push({
-      name: 'flip',
-      options: {
-        fallbackPlacements: fallbackPlacements[position]
-      }
-    });
-  }
-  const {
-    styles,
-    attributes,
-    forceUpdate
-  } = usePopper(anchorRef.current, popperElement, {
-    placement: position,
-    modifiers
-  });
-  // If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),
-  // it is most simple just to always position before opening
-  useEffect(() => {
-    if (open && forceUpdate) {
-      forceUpdate();
-    }
-  }, [open]);
-  const contentStyle = {
-    ...(anchorWidth ? {
-      width: anchorRef.current?.clientWidth
-    } : undefined)
+      })
+    });
   };
-  return /*#__PURE__*/jsx(Dimmer$1, {
-    open: open,
-    transparent: true,
-    fadeContentOnEnter: true,
-    fadeContentOnExit: true,
-    onClose: onClose,
-    children: /*#__PURE__*/jsx("div", {
-      ...rest,
-      ref: setPopperElement,
-      role: "dialog"
-      // eslint-disable-next-line react/forbid-dom-props
-      ,
-      style: {
-        ...styles.popper
-      },
-      ...attributes.popper,
-      className: classNames('np-panel', {
-        'np-panel--open': open
-      }, rest.className),
-      children: /*#__PURE__*/jsxs("div", {
-        ref: reference
-        /* eslint-disable-next-line react/forbid-dom-props */,
-        style: contentStyle,
-        className: classNames('np-panel__content'),
-        children: [children, arrow && /*#__PURE__*/jsx("div", {
-          ref: setArrowElement,
-          className: classNames('np-panel__arrow')
-          // eslint-disable-next-line react/forbid-dom-props
-          ,
-          style: styles.arrow
+  const getYear = () => {
+    return /*#__PURE__*/jsx("div", {
+      className: "col-sm-4",
+      children: /*#__PURE__*/jsxs("label", {
+        children: [/*#__PURE__*/jsx("span", {
+          className: "sr-only",
+          children: yearLabel
+        }), /*#__PURE__*/jsx("div", {
+          className: `input-group input-group-${size}`,
+          children: /*#__PURE__*/jsx(Input, {
+            type: "text",
+            inputMode: "numeric",
+            pattern: "[0-9]*",
+            name: "year",
+            autoComplete: yearAutoComplete,
+            placeholder: placeholders?.year,
+            value: year || '',
+            disabled: disabled,
+            min: 1,
+            onChange: event => handleYearChange(event)
+          })
         })]
       })
+    });
+  };
+  const monthBeforeDay = MDY.has(locale);
+  const yearFirst = YMD.has(locale);
+  return /*#__PURE__*/jsx("div", {
+    className: "tw-date",
+    ...inputAttributes,
+    id: id,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel,
+    role: "group" // Add role attribute to indicate container for interactive elements
+    ,
+    onFocus: event => shouldPropagateOnFocus(event) ? onFocus && onFocus(event) : event.stopPropagation(),
+    onBlur: event => shouldPropagateOnBlur(event) ? onBlur && onBlur(event) : event.stopPropagation(),
+    children: /*#__PURE__*/jsx("div", {
+      className: "row",
+      children: (() => {
+        if (monthYearOnly) {
+          return /*#__PURE__*/jsxs(Fragment, {
+            children: [!yearFirst && getMonth(), getYear(), yearFirst && getMonth()]
+          });
+        }
+        if (monthBeforeDay) {
+          return /*#__PURE__*/jsxs(Fragment, {
+            children: [getMonth(), getDay(), getYear()]
+          });
+        }
+        if (yearFirst) {
+          return /*#__PURE__*/jsxs(Fragment, {
+            children: [getYear(), getMonth(), getDay()]
+          });
+        }
+        return /*#__PURE__*/jsxs(Fragment, {
+          children: [getDay(), getMonth(), getYear()]
+        });
+      })()
     })
   });
-});
-var Panel$1 = Panel;
+};
+// Should only propagate if the relatedTarget is not part of this DateInput component.
+function shouldPropagateOnFocus({
+  target,
+  relatedTarget
+}) {
+  const targetParent = target.closest('.tw-date');
+  const relatedParent = relatedTarget && relatedTarget.closest('.tw-date');
+  return targetParent !== relatedParent;
+}
+// Should only propagate if the relatedTarget or the activeElement is not part of this DateInput component.
+function shouldPropagateOnBlur({
+  target,
+  relatedTarget
+}) {
+  const blurElementParent = target.closest('.tw-date');
+  // Even though FocusEvent.relatedTarget is supported by IE
+  // (https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/relatedTarget)
+  // "IE11 sets document.activeElement to the next focused element before the blur event is called."
+  // (https://stackoverflow.com/a/49325196/986241)
+  // Therefore if the relatedTarget is null, we try the document.activeElement,
+  // which may contain the HTML element that is gaining focus
+  const focusElement = relatedTarget || (document.activeElement !== target ? document.activeElement : null);
+  const focusElementParent = focusElement && focusElement.closest('.tw-date');
+  return blurElementParent !== focusElementParent;
+}
 
 const ResponsivePanel = /*#__PURE__*/forwardRef(function ResponsivePanel({
   anchorRef,
@@ -3642,7 +3867,7 @@ const ResponsivePanel = /*#__PURE__*/forwardRef(function ResponsivePanel({
       children: children
     }, "bottomSheet");
   }
-  return /*#__PURE__*/jsx(Panel$1, {
+  return /*#__PURE__*/jsx(Panel, {
     ref: reference,
     flip: flip,
     arrow: arrow,
@@ -4617,39 +4842,6 @@ var DateLookup$1 = withInputAttributes(DateLookup, {
   nonLabelable: true
 });
 
-const NavigationOption = /*#__PURE__*/forwardRef(({
-  as: component = 'button',
-  disabled = false,
-  onClick,
-  className,
-  ...rest
-}, reference) => {
-  if ('href' in rest && rest.href) {
-    component = 'a';
-  }
-  return /*#__PURE__*/jsx(Option$2, {
-    ...rest,
-    ref: reference,
-    as: component,
-    className: classNames('np-navigation-option', className),
-    button: /*#__PURE__*/jsx(Chevron, {
-      orientation: Position.RIGHT,
-      disabled: disabled,
-      className: "d-block"
-    }),
-    disabled: disabled,
-    onClick: event => {
-      if (disabled) {
-        event.preventDefault();
-        return;
-      }
-      if (onClick) {
-        onClick(event);
-      }
-    }
-  });
-});
-
 const Tile = ({
   className,
   description,
@@ -5524,73 +5716,6 @@ const FlowNavigation = ({
   });
 };
 
-const HeaderAction = ({
-  action
-}) => {
-  const {
-    isModern
-  } = useTheme();
-  const props = {
-    'aria-label': action['aria-label']
-  };
-  if ('href' in action) {
-    return /*#__PURE__*/jsx(Link, {
-      href: action.href,
-      target: action.target,
-      onClick: action.onClick,
-      ...props,
-      children: action.text
-    });
-  }
-  return isModern ? /*#__PURE__*/jsx(Button, {
-    className: "np-header__button",
-    priority: "tertiary",
-    size: "sm",
-    onClick: action.onClick,
-    ...props,
-    children: action.text
-  }) : /*#__PURE__*/jsx(ActionButton, {
-    onClick: action.onClick,
-    ...props,
-    children: action.text
-  });
-};
-/**
- *
- * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header
- *
- */
-const Header = ({
-  action,
-  as = 'h5',
-  title,
-  className
-}) => {
-  if (!action) {
-    return /*#__PURE__*/jsx(Title, {
-      as: as,
-      type: Typography.TITLE_GROUP,
-      className: classNames('np-header', 'np-header__title', className),
-      children: title
-    });
-  }
-  if (as === 'legend') {
-    // eslint-disable-next-line no-console
-    console.warn('Legends should be the first child in a fieldset, and this is not possible when including an action');
-  }
-  return /*#__PURE__*/jsxs("div", {
-    className: classNames('np-header', className),
-    children: [/*#__PURE__*/jsx(Title, {
-      as: as,
-      type: Typography.TITLE_GROUP,
-      className: "np-header__title",
-      children: title
-    }), /*#__PURE__*/jsx(HeaderAction, {
-      action: action
-    })]
-  });
-};
-
 // TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
 var InfoPresentation;
 (function (InfoPresentation) {
@@ -7759,18 +7884,6 @@ var MoneyInput$1 = injectIntl(withInputAttributes(MoneyInput, {
   nonLabelable: true
 }));
 
-const NavigationOptionList = ({
-  children
-}) => {
-  return /*#__PURE__*/jsx("ul", {
-    className: "np-navigation-options-list",
-    children: Children.map(children, child => /*#__PURE__*/jsx("li", {
-      className: "np-navigation-options-list__item",
-      children: child
-    }, child?.toString()))
-  });
-};
-
 const STORAGE_NAME = 'dismissedNudges';
 const getLocalStorage = () => {
   try {
@@ -9567,6 +9680,7 @@ var en = {
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
 	"neptune.Select.searchPlaceholder": "Search...",
 	"neptune.SelectInput.noResultsFound": "No results found",
+	"neptune.SelectOption.action.label": "Choose",
 	"neptune.Summary.statusDone": "Item done",
 	"neptune.Summary.statusNotDone": "Item to do",
 	"neptune.Summary.statusPending": "Item pending",
@@ -9794,19 +9908,6 @@ function RadioOption({
   });
 }
 
-const Section = ({
-  children,
-  className,
-  withHorizontalPadding = false
-}) => {
-  return /*#__PURE__*/jsx("div", {
-    className: classNames('np-section', className, {
-      'np-section--with-horizontal-padding': withHorizontalPadding
-    }),
-    children: children
-  });
-};
-
 const SegmentedControl = ({
   name,
   value,
@@ -10460,7 +10561,7 @@ function Select({
       children: renderOptionsList({
         className: isModern ? '' : 'p-a-1'
       })
-    }) : /*#__PURE__*/jsx(Panel$1, {
+    }) : /*#__PURE__*/jsx(Panel, {
       open: open,
       flip: false,
       altAxis: true,
@@ -10710,19 +10811,21 @@ function SnackbarProvider({
   });
 }
 
-function Sticky({
+const Sticky = ({
   open = true,
-  position = 'bottom',
-  children
-}) {
+  position = Position.BOTTOM,
+  children,
+  testId
+}) => {
   return /*#__PURE__*/jsx(SlidingPanel, {
+    testId: testId,
     open: open,
     position: position,
     slidingPanelPositionFixed: true,
     showSlidingPanelBorder: true,
     children: children
   });
-}
+};
 
 var messages$1 = defineMessages({
   statusNotDone: {
@@ -13363,7 +13466,6 @@ const UploadItem = ({
     status,
     filename,
     error,
-    errors,
     url
   } = file;
   const {
@@ -13371,7 +13473,7 @@ const UploadItem = ({
   } = useTheme();
   const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;
   const getIcon = () => {
-    if (error || errors?.length || status === Status.FAILED) {
+    if (error || status === Status.FAILED) {
       return isModern ? /*#__PURE__*/jsx(StatusIcon, {
         size: Size.SMALL,
         sentiment: Sentiment.NEGATIVE
@@ -13410,30 +13512,13 @@ const UploadItem = ({
       children: processIndicator
     }); // Scale down ProcessIndicator to be 20px*20px to match `icons`
   };
-  const getErrorMessage = error => typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);
-  const getMultipleErrors = errors => {
-    if (!errors?.length) {
-      return null;
-    }
-    if (errors?.length === 1) {
-      return getErrorMessage(errors[0]);
-    }
-    return /*#__PURE__*/jsx("ul", {
-      className: "np-upload-input-errors m-b-0",
-      children: errors.map((error, index) => {
-        // eslint-disable-next-line react/no-array-index-key
-        return /*#__PURE__*/jsx("li", {
-          children: getErrorMessage(error)
-        }, index);
-      })
-    });
-  };
+  const getErrorMessage = () => typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);
   const getDescription = () => {
-    if (error || errors?.length || status === Status.FAILED) {
+    if (error || status === Status.FAILED) {
       return /*#__PURE__*/jsx(Body, {
         type: Typography.BODY_DEFAULT_BOLD,
         className: "text-negative",
-        children: errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)
+        children: getErrorMessage()
       });
     }
     switch (status) {
@@ -14764,5 +14849,5 @@ const translations = {
   'zh-HK': zhHK
 };
 
-export { Accordion, ActionButton, ActionOption, Alert, AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card$2 as BaseCard, Body, BottomSheet$1 as BottomSheet, Breakpoint, Button, Card$1 as Card, Carousel, Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup$1 as DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, Emphasis, Field, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, Label, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader, Logo$1 as Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$1 as Popover, Position, Priority, ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCardGroup$1 as PromoCardGroup, Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip, Type, Typeahead$1 as Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
+export { Accordion, ActionButton, ActionOption, Alert, AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card$2 as BaseCard, Body, BottomSheet$1 as BottomSheet, Breakpoint, Button, Card$1 as Card, Carousel, Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup$1 as DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, Emphasis, Field, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, Label, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader, Logo$1 as Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$1 as Popover, Position, Priority, ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCardGroup$1 as PromoCardGroup, Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, SelectOption, Sentiment, Size, SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip, Type, Typeahead$1 as Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
 //# sourceMappingURL=index.mjs.map