@transferwise/components 0.0.0-experimental-06df8d2 → 0.0.0-experimental-3b13cb3

package/build/index.mjs

@@ -1,25 +1,25 @@
 import * as React from 'react';
-import React__default, { forwardRef, cloneElement, useState, useEffect, useRef, useMemo, Component, useCallback, createContext, useContext, useImperativeHandle, createElement, PureComponent, createRef, isValidElement, Children, Fragment as Fragment$1 } from 'react';
+import React__default, { forwardRef, cloneElement, useState, useRef, useEffect, useCallback, Component, createContext, useContext, useImperativeHandle, createElement, useMemo, PureComponent, createRef, isValidElement, Children, Fragment as Fragment$1 } from 'react';
 import { useId } from '@radix-ui/react-id';
 import classNames from 'classnames';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1, Alert as Alert$1, ClockBorderless, Briefcase, Person, AlertCircleFill, ArrowLeft, AlertCircle, QuestionMarkCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ArrowRight, Download, 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, Card as Card$3, Bank, BankTransfer, Check, Info as Info$1, Alert as Alert$1, ClockBorderless, Briefcase, Person, AlertCircleFill, ArrowLeft, AlertCircle, QuestionMarkCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ArrowRight, Download, 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 PropTypes from 'prop-types';
+import { Flag, Illustration } from '@wise/art';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 import { isUndefined, isNumber, isEmpty, isNull } from '@transferwise/neptune-validation';
+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';
 import requiredIf from 'react-required-if';
@@ -670,565 +670,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
-    })
-  });
-});
-
-var messages$c = defineMessages({
-  opensInNewTab: {
-    id: "neptune.Link.opensInNewTab"
-  }
-});
-
-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)
-    })]
-  });
-};
-
-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 (['development', 'test'].includes(process?.env?.NODE_ENV)) {
-    // 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 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;
+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();
   }
-}
-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 &&
-      // 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(Link, {
-          href: action.href,
-          className: "m-t-1",
-          "aria-label": action['aria-label'],
-          target: action.target,
-          type: Typography.LINK_LARGE,
-          children: action.text
-        })]
-      })]
-    }), 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(({
+  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, {
+  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 Section = ({
+  children,
+  className,
+  withHorizontalPadding = false
+}) => {
+  return /*#__PURE__*/jsx("div", {
+    className: classNames('np-section', className, {
+      'np-section--with-horizontal-padding': withHorizontalPadding
+    }),
     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 radius = {
   xxs: 6,
@@ -1353,7 +1146,7 @@ ProcessIndicator.defaultProps = {
 };
 var ProcessIndicator$1 = ProcessIndicator;
 
-var messages$b = defineMessages({
+var messages$d = defineMessages({
   loadingAriaLabel: {
     id: "neptune.Button.loadingAriaLabel"
   }
@@ -1370,6 +1163,18 @@ const priorityClassMap = {
   [Priority.TERTIARY]: 'btn-priority-3'
 };
 
+function logActionRequired(message) {
+  if (['development', 'test'].includes(process?.env?.NODE_ENV)) {
+    // 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,
@@ -1472,7 +1277,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$d.loadingAriaLabel) : rest['aria-label'],
     children: [children, loading && /*#__PURE__*/jsx(ProcessIndicator$1, {
       size: processIndicatorSize(),
       className: "btn-loader"
@@ -1480,806 +1285,415 @@ const Button = /*#__PURE__*/forwardRef(({
   });
 });
 
-const Card$1 = /*#__PURE__*/forwardRef((props, reference) => {
+var messages$c = defineMessages({
+  opensInNewTab: {
+    id: "neptune.Link.opensInNewTab"
+  }
+});
+
+const Link = ({
+  className,
+  children,
+  href,
+  target,
+  type,
+  'aria-label': ariaLabel,
+  onClick,
+  ...props
+}) => {
+  const isBlank = target === '_blank';
   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
+    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)
     })]
   });
-});
-const hasChildren = ({
-  children
-}) => children;
-Card$1.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$1.defaultProps = {
-  'aria-label': undefined,
-  as: 'div',
-  children: null,
-  id: null,
-  className: null,
-  'data-testid': null
 };
-var Card$2 = Card$1;
 
-const CheckboxButton = /*#__PURE__*/forwardRef(({
-  checked,
+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,
-  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;
+  ...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)
+  });
+}
 
-const Checkbox = ({
-  id,
-  checked,
-  required,
-  disabled,
-  readOnly,
-  label,
-  className,
-  secondary,
-  onChange,
-  onFocus,
-  onBlur
+const HeaderAction = ({
+  action
 }) => {
   const {
     isModern
   } = useTheme();
-  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 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
   });
 };
-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
-};
-
-const CheckboxOption = /*#__PURE__*/forwardRef(({
-  checked,
-  disabled,
-  onChange,
-  ...rest
-}, reference) => {
-  return /*#__PURE__*/jsx(Option$2, {
-    ...rest,
-    ref: reference,
-    disabled: disabled,
-    button: /*#__PURE__*/jsx(CheckboxButton$1, {
-      checked: checked,
-      disabled: disabled,
-      onChange: () => onChange?.(!checked)
-    })
+/**
+ *
+ * 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 Chip = ({
-  label,
-  value,
-  onRemove,
-  onClick,
-  onKeyPress,
-  className = undefined,
-  'aria-label': ariaLabel,
-  'aria-checked': ariaChecked,
-  role,
-  closeButton
+const useConditionalListener = ({
+  attachListener,
+  callback,
+  eventType,
+  parent
 }) => {
-  const isActionable = onClick || onKeyPress;
-  const defaultRole = isActionable ? 'button' : undefined;
-  const tabIndex = isActionable ? 0 : -1;
-  const {
-    isModern
-  } = useTheme();
-  const closeButtonReference = useRef(null);
-  const previousCloseButtonShown = useRef();
   useEffect(() => {
-    if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {
-      closeButtonReference.current?.focus();
+    if (attachListener && !isUndefined(parent)) {
+      parent.addEventListener(eventType, callback, true);
     }
-    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 && closeButton['aria-label'],
-      size: "sm",
-      filled: isModern,
-      onClick: onRemove
-    }) : null]
-  }, value);
+    return () => {
+      if (!isUndefined(parent)) {
+        parent.removeEventListener(eventType, callback, true);
+      }
+    };
+  }, [attachListener, callback, eventType, parent]);
 };
 
-var messages$a = defineMessages({
-  ariaLabel: {
-    id: "neptune.Chips.ariaLabel"
-  }
-});
-
-const Chips = ({
-  chips,
-  onChange,
-  selected,
-  'aria-label': ariaLabel,
-  className,
-  multiple
+const DirectionContext = /*#__PURE__*/createContext(Direction.LTR);
+const DirectionProvider = ({
+  direction,
+  children
 }) => {
-  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);
-    })
+  return /*#__PURE__*/jsx(DirectionContext.Provider, {
+    value: direction,
+    children: children
   });
 };
 
-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
-    })]
-  });
+const useDirection = () => {
+  const direction = useContext(DirectionContext);
+  return {
+    direction,
+    isRTL: direction === 'rtl'
+  };
 };
 
-const FocusBoundary = ({
-  children
+const ObserverParams = {
+  threshold: 0.1
+};
+
+/**
+ * useHasIntersected.
+ * Use this custom hook to detect when an element has became visible inside the viewport. This hook checks only if the intersection happend.
+ * Once the intersection has happened the hook will not return false even if the element gets out of the viewport.
+ *
+ * @param elRef.elRef
+ * @param {object} [elRef] - node object that contains a react reference to the element that needs to be observed.
+ * @param {strimng} [loading = 'eager'] - string that contains the type of loading.
+ * @param elRef.loading
+ * @usage `const [hasIntersected] = useHasIntersected({imageRef,loading});`
+ */
+const useHasIntersected = ({
+  elRef,
+  loading
 }) => {
-  const wrapperReference = useRef(null);
-  useEffect(() => {
-    wrapperReference.current?.focus({
-      preventScroll: true
+  const [hasIntersected, setHasIntersected] = useState(false);
+  const {
+    current
+  } = elRef || {};
+  const isValidReference = () => {
+    return elRef && current;
+  };
+  const handleOnIntersect = (entries, observer) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        setHasIntersected(true);
+        observer.unobserve(current);
+      }
     });
-  }, []);
-  return /*#__PURE__*/jsx(FocusScope, {
-    contain: true,
-    restoreFocus: true,
-    children: /*#__PURE__*/jsx("div", {
-      ref: wrapperReference,
-      tabIndex: -1,
-      children: children
-    })
-  });
+  };
+  useEffect(() => {
+    let observer;
+    let didCancel = false;
+
+    // Check if window is define for SSR and Old browsers fallback
+    if (typeof window === 'undefined' || !window.IntersectionObserver || !isValidReference()) {
+      setHasIntersected(true);
+    } else if (!didCancel) {
+      observer = new IntersectionObserver(handleOnIntersect, ObserverParams);
+      observer.observe(current);
+    }
+    return () => {
+      didCancel = true;
+      if (observer) {
+        observer.unobserve(current);
+      }
+    };
+  }, [elRef]);
+  if (loading === 'eager') {
+    return [false];
+  }
+  return [hasIntersected];
 };
 
-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;
-  };
+// eslint-disable-next-line import/extensions
+function useMedia(query) {
+  return useSyncExternalStore(onStoreChange => {
+    const mediaQueryList = window.matchMedia(query);
+    mediaQueryList.addEventListener('change', onStoreChange);
+    return () => {
+      mediaQueryList.removeEventListener('change', onStoreChange);
+    };
+  }, () => typeof window !== 'undefined' ? window.matchMedia(query).matches : undefined, () => undefined);
+}
+
+function useScreenSize(size) {
+  return useMedia(`(min-width: ${size}px)`);
 }
 
 /**
- * Dimmer state management inspired by Material UI's ModalManager (https://github.com/mui-org/material-ui)
+ * @deprecated Prefer `useScreenSize` instead.
  */
-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;
-  }
-}
+const useLayout = () => {
+  const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);
+  const screenSm = useScreenSize(Breakpoint.SMALL);
+  const screenMd = useScreenSize(Breakpoint.MEDIUM);
+  const screenLg = useScreenSize(Breakpoint.LARGE);
+  const screenXl = useScreenSize(Breakpoint.EXTRA_LARGE);
+  return {
+    isMobile: screenSm != null ? !screenSm : undefined,
+    isExtraSmall: screenXs,
+    isSmall: screenSm,
+    isMedium: screenMd,
+    isLarge: screenLg,
+    isExtraLarge: screenXl
+  };
+};
 
-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();
+var messages$b = defineMessages({
+  ariaLabel: {
+    id: "neptune.CloseButton.ariaLabel"
   }
-};
-const Dimmer = ({
+});
+
+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$b.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 EXIT_ANIMATION = 350;
+const SlidingPanel = /*#__PURE__*/forwardRef(({
+  position = 'left',
+  open,
+  showSlidingPanelBorder,
+  slidingPanelPositionFixed,
+  className,
+  children,
+  ...rest
+}, reference) => {
+  const localReference = useRef(null);
+  useImperativeHandle(reference, () => localReference.current, []);
+  return /*#__PURE__*/createElement(CSSTransition, {
+    ...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
+  }));
+});
+
+const Drawer = ({
   children,
   className,
-  disableClickToClose = false,
-  contentPosition,
-  fadeContentOnEnter = false,
-  fadeContentOnExit = false,
-  open = false,
-  scrollable = false,
-  transparent = false,
-  onClose
+  footerContent,
+  headerTitle,
+  onClose,
+  open,
+  position
 }) => {
-  const [hasNotExited, setHasNotExited] = useState(false);
-  const dimmerReference = useRef(null);
-  const closeOnClick = event => {
-    if (event.target === dimmerReference.current) {
-      onClose?.(event);
-    }
-  };
-  const handleClick = event => {
-    if (disableClickToClose || !onClose) {
-      return;
-    }
-    closeOnClick(event);
-  };
-  const handleKeyDown = useCallback(event => {
-    if (event.key !== 'Escape') {
-      return;
-    }
-    event.stopPropagation();
-    if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {
-      onClose(event);
-    }
-  }, [onClose]);
-  const onEnter = () => {
-    setHasNotExited(true);
-    if (dimmerReference.current) {
-      dimmerManager.add(dimmerReference.current);
-    }
-  };
-  const onExited = () => {
-    setHasNotExited(false);
-    if (dimmerReference.current) {
-      dimmerManager.remove(dimmerReference.current);
-    }
-  };
-  useEffect(() => {
-    const localReferenceCopy = dimmerReference.current;
-    if (open) {
-      document.addEventListener('keydown', handleKeyDown);
-      localReferenceCopy?.addEventListener('touchmove', handleTouchMove, {
-        passive: true
-      });
-    }
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-      localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);
-    };
-  }, [handleKeyDown, open]);
-  return /*#__PURE__*/jsx(DimmerWrapper, {
+  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,
-    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
-            })
-          })
-        })
+    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
+        })]
       })
     })
   });
 };
-const DimmerWrapper = ({
-  open,
-  hasNotExited,
-  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 DimmerContentWrapper = ({
-  children,
-  scrollBody
-}) => {
-  useEffect(() => {
-    if (scrollBody) {
-      addNoScrollClass();
-    }
-    return () => {
-      if (scrollBody) {
-        removeNoScrollClass();
-      }
-    };
-  }, [scrollBody]);
-  return children;
-};
-var Dimmer$1 = withNextPortalWrapper(Dimmer);
-
-const useConditionalListener = ({
-  attachListener,
-  callback,
-  eventType,
-  parent
-}) => {
-  useEffect(() => {
-    if (attachListener && !isUndefined(parent)) {
-      parent.addEventListener(eventType, callback, true);
-    }
-    return () => {
-      if (!isUndefined(parent)) {
-        parent.removeEventListener(eventType, callback, true);
-      }
-    };
-  }, [attachListener, callback, eventType, parent]);
-};
-
-const DirectionContext = /*#__PURE__*/createContext(Direction.LTR);
-const DirectionProvider = ({
-  direction,
-  children
-}) => {
-  return /*#__PURE__*/jsx(DirectionContext.Provider, {
-    value: direction,
-    children: children
-  });
-};
-
-const useDirection = () => {
-  const direction = useContext(DirectionContext);
-  return {
-    direction,
-    isRTL: direction === 'rtl'
-  };
+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 action to perform on close click. */
+  onClose: PropTypes.func,
+  /** 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'])
 };
-
-const ObserverParams = {
-  threshold: 0.1
+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;
 /**
- * useHasIntersected.
- * Use this custom hook to detect when an element has became visible inside the viewport. This hook checks only if the intersection happend.
- * Once the intersection has happened the hook will not return false even if the element gets out of the viewport.
- *
- * @param elRef.elRef
- * @param {object} [elRef] - node object that contains a react reference to the element that needs to be observed.
- * @param {strimng} [loading = 'eager'] - string that contains the type of loading.
- * @param elRef.loading
- * @usage `const [hasIntersected] = useHasIntersected({imageRef,loading});`
- */
-const useHasIntersected = ({
-  elRef,
-  loading
-}) => {
-  const [hasIntersected, setHasIntersected] = useState(false);
-  const {
-    current
-  } = elRef || {};
-  const isValidReference = () => {
-    return elRef && current;
-  };
-  const handleOnIntersect = (entries, observer) => {
-    entries.forEach(entry => {
-      if (entry.isIntersecting) {
-        setHasIntersected(true);
-        observer.unobserve(current);
-      }
-    });
-  };
-  useEffect(() => {
-    let observer;
-    let didCancel = false;
-
-    // Check if window is define for SSR and Old browsers fallback
-    if (typeof window === 'undefined' || !window.IntersectionObserver || !isValidReference()) {
-      setHasIntersected(true);
-    } else if (!didCancel) {
-      observer = new IntersectionObserver(handleOnIntersect, ObserverParams);
-      observer.observe(current);
-    }
-    return () => {
-      didCancel = true;
-      if (observer) {
-        observer.unobserve(current);
-      }
-    };
-  }, [elRef]);
-  if (loading === 'eager') {
-    return [false];
-  }
-  return [hasIntersected];
-};
-
-// eslint-disable-next-line import/extensions
-function useMedia(query) {
-  return useSyncExternalStore(onStoreChange => {
-    const mediaQueryList = window.matchMedia(query);
-    mediaQueryList.addEventListener('change', onStoreChange);
-    return () => {
-      mediaQueryList.removeEventListener('change', onStoreChange);
-    };
-  }, () => typeof window !== 'undefined' ? window.matchMedia(query).matches : undefined, () => undefined);
-}
-
-function useScreenSize(size) {
-  return useMedia(`(min-width: ${size}px)`);
-}
-
-/**
- * @deprecated Prefer `useScreenSize` instead.
- */
-const useLayout = () => {
-  const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);
-  const screenSm = useScreenSize(Breakpoint.SMALL);
-  const screenMd = useScreenSize(Breakpoint.MEDIUM);
-  const screenLg = useScreenSize(Breakpoint.LARGE);
-  const screenXl = useScreenSize(Breakpoint.EXTRA_LARGE);
-  return {
-    isMobile: screenSm != null ? !screenSm : undefined,
-    isExtraSmall: screenXs,
-    isSmall: screenSm,
-    isMedium: screenMd,
-    isLarge: screenLg,
-    isExtraLarge: screenXl
-  };
-};
-
-const EXIT_ANIMATION = 350;
-const SlidingPanel = /*#__PURE__*/forwardRef(({
-  position = 'left',
-  open,
-  showSlidingPanelBorder,
-  slidingPanelPositionFixed,
-  className,
-  children,
-  ...rest
-}, reference) => {
-  const localReference = useRef(null);
-  useImperativeHandle(reference, () => localReference.current, []);
-  return /*#__PURE__*/createElement(CSSTransition, {
-    ...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
-  }));
-});
-
-const Drawer = ({
-  children,
-  className,
-  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 {
-    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 action to perform on close click. */
-  onClose: PropTypes.func,
-  /** 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'])
-};
-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
+ * Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/
+ *
+ * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet
  *
  */
 const BottomSheet$1 = props => {
@@ -2446,6 +1860,928 @@ const BottomSheet$1 = props => {
   });
 };
 
+function SelectOption({
+  selected: selectedValueProp = undefined,
+  ...props
+}) {
+  const rootRef = useRef(null);
+  const [selected, setSelected] = useState(selectedValueProp);
+  const [showMenu, setShowMenu] = useState(false);
+  function handleOnClick(status) {
+    return () => {
+      console.log('handleOnClick', status);
+      setShowMenu(status);
+    };
+  }
+  function handleOnSelect(data) {
+    return () => {
+      setShowMenu(false);
+      setSelected(data);
+    };
+  }
+  const isSelected = selected !== undefined;
+  const {
+    isMobile
+  } = useLayout();
+  const options = /*#__PURE__*/jsxs(Section, {
+    children: [/*#__PURE__*/jsx(Header, {
+      title: "Payment Methods"
+    }), /*#__PURE__*/jsx(Option$2, {
+      media: /*#__PURE__*/jsx(Flag, {
+        code: "gbp"
+      }),
+      title: "Wise GBP balance",
+      content: /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("span", {
+          children: "300 GBP available"
+        }), /*#__PURE__*/jsx("span", {
+          children: "0 GBP in fees, should arrive in seconds"
+        })]
+      }),
+      onClick: handleOnSelect({
+        media: /*#__PURE__*/jsx(Flag, {
+          code: "gbp"
+        }),
+        title: 'Wise GBP balance'
+      })
+    }), /*#__PURE__*/jsx(Option$2, {
+      media: /*#__PURE__*/jsx(Card$3, {}),
+      title: "Credit card",
+      content: /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("div", {
+          children: "Transfer the money to Wise using your bank account."
+        }), /*#__PURE__*/jsx("div", {
+          children: "0.32 GBP in fees, should arrive in seconds"
+        })]
+      }),
+      onClick: handleOnSelect({
+        media: /*#__PURE__*/jsx(Card$3, {}),
+        title: 'Credit card',
+        content: 'Pay with your credit card'
+      })
+    }), /*#__PURE__*/jsx(Option$2, {
+      media: /*#__PURE__*/jsx(Card$3, {}),
+      title: "Debit card",
+      content: /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("span", {
+          children: "Send from your Visa or Mastercard."
+        }), /*#__PURE__*/jsx("span", {
+          children: "0.74 GBP in fees, should arrive in seconds"
+        })]
+      }),
+      onClick: handleOnSelect({
+        media: /*#__PURE__*/jsx(Card$3, {}),
+        title: 'Debit card',
+        content: 'Pay with your debit card'
+      })
+    }), /*#__PURE__*/jsx(Option$2, {
+      media: /*#__PURE__*/jsx(Bank, {}),
+      title: "Swift Transfer",
+      content: /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("span", {
+          children: "Send money internationally. Your bank will charge you extra fees."
+        }), /*#__PURE__*/jsx("span", {
+          children: "0.32 GBP in fees, should arrive by Thursday"
+        })]
+      })
+    }), /*#__PURE__*/jsx(Option$2, {
+      media: /*#__PURE__*/jsx(BankTransfer, {}),
+      title: "Bank Transfer",
+      content: /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("span", {
+          children: "Transfer the money to Wise using your bank account."
+        }), /*#__PURE__*/jsx("span", {
+          children: "0.32 GBP in fees, should arrive in seconds"
+        })]
+      })
+    }), /*#__PURE__*/jsx(Option$2, {
+      media: /*#__PURE__*/jsx(Card$3, {}),
+      title: "Debit card"
+    }), /*#__PURE__*/jsx(Option$2, {
+      media: /*#__PURE__*/jsx(Bank, {}),
+      title: "Swift"
+    }), /*#__PURE__*/jsx(Option$2, {
+      media: /*#__PURE__*/jsx(BankTransfer, {}),
+      title: "Bank Transfer"
+    })]
+  });
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Option$2, {
+      ref: rootRef,
+      media: isSelected ? selected.media : props.media,
+      title: isSelected ? selected.title : props.title,
+      content: isSelected ? selected.content : props.content,
+      className: classNames('np-select-option', {
+        'np-select-option-selected': isSelected
+      }, props.className),
+      button: isSelected ? /*#__PURE__*/jsx(Chevron, {}) : /*#__PURE__*/jsx(ActionButton, {
+        onClick: handleOnClick(true),
+        children: "Choose"
+      }),
+      onClick: isSelected ? handleOnClick(true) : undefined
+    }), isMobile ? /*#__PURE__*/jsx(BottomSheet$1, {
+      open: showMenu,
+      onClose: handleOnClick(false),
+      children: options
+    }) : /*#__PURE__*/jsx(Panel, {
+      open: showMenu,
+      flip: false,
+      altAxis: true,
+      anchorRef: rootRef,
+      anchorWidth: false,
+      position: Position.BOTTOM,
+      onClose: handleOnClick(false),
+      children: /*#__PURE__*/jsx("div", {
+        className: "np-select-option-list p-a-2",
+        children: options
+      })
+    })]
+  });
+}
+
+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
+};
+
+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(() => {
+    if (arrow !== undefined) {
+      logActionRequired("Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.");
+    }
+  }, [arrow]);
+  useEffect(() => {
+    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('alert d-flex', `alert-${resolvedType}`, arrow != null && alertArrowClassNames(arrow), className),
+    "data-testid": "alert",
+    onTouchStart: () => setShouldFire(true),
+    onTouchEnd: event => {
+      if (shouldFire && action &&
+      // 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
+            })
+          })]
+        }), action && /*#__PURE__*/jsx(Link, {
+          href: action.href,
+          className: "m-t-1",
+          "aria-label": action['aria-label'],
+          target: action.target,
+          type: Typography.LINK_LARGE,
+          children: action.text
+        })]
+      })]
+    }), 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 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 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 OptionalBadge = ({
+  url,
+  altText,
+  statusIcon,
+  children,
+  ...rest
+}) => {
+  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 Card$1 = /*#__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$1.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$1.defaultProps = {
+  'aria-label': undefined,
+  as: 'div',
+  children: null,
+  id: null,
+  className: null,
+  'data-testid': null
+};
+var Card$2 = Card$1;
+
+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 {
+    isModern
+  } = useTheme();
+  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
+        })]
+      })]
+    })
+  });
+};
+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
+};
+
+const CheckboxOption = /*#__PURE__*/forwardRef(({
+  checked,
+  disabled,
+  onChange,
+  ...rest
+}, reference) => {
+  return /*#__PURE__*/jsx(Option$2, {
+    ...rest,
+    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();
+  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 && closeButton['aria-label'],
+      size: "sm",
+      filled: isModern,
+      onClick: onRemove
+    }) : null]
+  }, value);
+};
+
+var messages$a = defineMessages({
+  ariaLabel: {
+    id: "neptune.Chips.ariaLabel"
+  }
+});
+
+const Chips = ({
+  chips,
+  onChange,
+  selected,
+  'aria-label': ariaLabel,
+  className,
+  multiple
+}) => {
+  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 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
+    })]
+  });
+};
+
 const Card = ({
   className,
   children = null,
@@ -2958,124 +3294,6 @@ function shouldPropagateOnBlur({
   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(({
-  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
-        })]
-      })
-    })
-  });
-});
-var Panel$1 = Panel;
-
 const ResponsivePanel = /*#__PURE__*/forwardRef(({
   anchorRef,
   arrow = false,
@@ -3097,7 +3315,7 @@ const ResponsivePanel = /*#__PURE__*/forwardRef(({
       children: children
     }, "bottomSheet");
   }
-  return /*#__PURE__*/jsx(Panel$1, {
+  return /*#__PURE__*/jsx(Panel, {
     ref: reference,
     flip: flip,
     arrow: arrow,
@@ -4995,73 +5213,6 @@ const Field = ({
   });
 };
 
-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 EmptyTransparentImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
 const Image = ({
   id,
@@ -8880,7 +9031,6 @@ const PhoneNumberInput = ({
             format: country?.phoneFormat
           }));
         },
-        onClose: () => onBlur?.(),
         ...selectProps
       })
     }), /*#__PURE__*/jsx("div", {
@@ -8900,7 +9050,7 @@ const PhoneNumberInput = ({
           onChange: onSuffixChange,
           onPaste: onPaste,
           onFocus: onFocus,
-          onBlur: () => onBlur?.()
+          onBlur: onBlur
         })
       })
     })]
@@ -9510,19 +9660,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,
@@ -10189,7 +10326,7 @@ function Select({
       children: renderOptionsList({
         className: isModern ? '' : 'p-a-1'
       })
-    }) : /*#__PURE__*/jsx(Panel$1, {
+    }) : /*#__PURE__*/jsx(Panel, {
       open: open,
       flip: false,
       altAxis: true,
@@ -14474,5 +14611,5 @@ const translations = {
   'zh-HK': zhHK
 };
 
-export { Accordion, ActionButton, ActionOption, Alert, AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$1 as BottomSheet, Breakpoint, Button, Card$2 as Card, 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$1 as 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, 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 as BaseCard, Body, BottomSheet$1 as BottomSheet, Breakpoint, Button, Card$2 as Card, 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$1 as 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, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
 //# sourceMappingURL=index.mjs.map