@transferwise/components 0.0.0-experimental-6c73115 → 0.0.0-experimental-322d55c

package/build/index.js

@@ -7,20 +7,20 @@ var reactId = require('@radix-ui/react-id');
 var icons = require('@transferwise/icons');
 var reactIntl = require('react-intl');
 var PropTypes = require('prop-types');
+var commonmark = require('commonmark');
 var componentsTheming = require('@wise/components-theming');
 var formatting = require('@transferwise/formatting');
 var react$1 = require('@headlessui/react');
 var mergeProps = require('merge-props');
 var index_js = require('use-sync-external-store/shim/index.js');
 var react = require('@floating-ui/react');
+var focus = require('@react-aria/focus');
 var overlays = require('@react-aria/overlays');
 var reactTransitionGroup = require('react-transition-group');
 var reactPopper = require('react-popper');
 var throttle = require('lodash.throttle');
 var reactDom = require('react-dom');
-var focus = require('@react-aria/focus');
 var neptuneValidation = require('@transferwise/neptune-validation');
-var commonmark = require('commonmark');
 var art = require('@wise/art');
 var clamp$2 = require('lodash.clamp');
 var debounce = require('lodash.debounce');
@@ -51,9 +51,9 @@ function _interopNamespace(e) {
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var commonmark__default = /*#__PURE__*/_interopDefault(commonmark);
 var mergeProps__default = /*#__PURE__*/_interopDefault(mergeProps);
 var throttle__default = /*#__PURE__*/_interopDefault(throttle);
-var commonmark__default = /*#__PURE__*/_interopDefault(commonmark);
 var clamp__default = /*#__PURE__*/_interopDefault(clamp$2);
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
 var requiredIf__default = /*#__PURE__*/_interopDefault(requiredIf);
@@ -807,22 +807,22 @@ const Link = ({
   });
 };
 
+const iconTypeMap = {
+  positive: icons.Check,
+  neutral: icons.Info,
+  warning: icons.Alert,
+  negative: icons.Cross,
+  pending: icons.ClockBorderless,
+  info: icons.Info,
+  error: icons.Cross,
+  success: icons.Check
+};
 const StatusIcon = ({
-  sentiment = exports.Sentiment.NEUTRAL,
-  size = exports.Size.MEDIUM
+  sentiment = 'neutral',
+  size = 'md'
 }) => {
-  const iconTypeMap = {
-    [exports.Sentiment.POSITIVE]: icons.Check,
-    [exports.Sentiment.NEUTRAL]: icons.Info,
-    [exports.Sentiment.WARNING]: icons.Alert,
-    [exports.Sentiment.NEGATIVE]: icons.Cross,
-    [exports.Sentiment.PENDING]: icons.ClockBorderless,
-    [exports.Sentiment.INFO]: icons.Info,
-    [exports.Sentiment.ERROR]: icons.Cross,
-    [exports.Sentiment.SUCCESS]: icons.Check
-  };
-  const iconColor = [exports.Sentiment.WARNING, exports.Sentiment.PENDING].includes(sentiment) ? 'dark' : 'light';
   const Icon = iconTypeMap[sentiment];
+  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
   return /*#__PURE__*/jsxRuntime.jsx("span", {
     "data-testid": "status-icon",
     className: classNames__default.default('status-circle', 'status-circle-' + size, sentiment),
@@ -832,7 +832,7 @@ const StatusIcon = ({
   });
 };
 
-function logActionRequired$1(message) {
+function logActionRequired(message) {
   if (['development', 'test'].includes(process?.env?.NODE_ENV)) {
     // eslint-disable-next-line no-console
     console.warn(message);
@@ -840,48 +840,10 @@ function logActionRequired$1(message) {
 }
 function logActionRequiredIf(message, conditional) {
   if (conditional) {
-    logActionRequired$1(message);
+    logActionRequired(message);
   }
 }
 
-const deprecatedMessage = ({
-  component,
-  propName,
-  message,
-  expiryDate
-}) => {
-  const messages = [`${component} has deprecated the use of ${propName}.`];
-  if (message) {
-    messages.push(message);
-  }
-  if (expiryDate) {
-    messages.push(`${propName} will be removed on or after ${expiryDate.toLocaleString('en-GB', {
-      year: 'numeric',
-      month: 'numeric',
-      day: 'numeric'
-    })}`);
-  }
-  return messages.join(' ');
-};
-const deprecated = (validator, {
-  component,
-  message = '',
-  newProp: newProperty = null,
-  expiryDate = null
-}) => (props, propertyName, ...rest) => {
-  const newPropertyMessage = newProperty ? `Please use ${newProperty} instead.` : message;
-  if (props[propertyName] != null && typeof props[propertyName] !== 'undefined') {
-    logActionRequired$1(deprecatedMessage({
-      component,
-      propName: propertyName,
-      message: newPropertyMessage,
-      expiryDate
-    }));
-  }
-  return validator(props, propertyName, ...rest);
-};
-var deprecated$1 = deprecated;
-
 const reader = new commonmark__default.default.Parser();
 const writer = new commonmark__default.default.HtmlRenderer({
   safe: true
@@ -901,7 +863,7 @@ function Markdown({
   const linkTarget = config?.link?.target ?? '_self';
   const paragraphClass = config?.paragraph?.className ?? '';
   if (allowList != null && blockList != null) {
-    logActionRequired$1('Markdown supports only one of `allowList` or `blockList` to be used at a time. `blockList` will be ignored.');
+    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);
@@ -962,146 +924,98 @@ InlineMarkdown.defaultProps = {
 };
 var InlineMarkdown$1 = InlineMarkdown;
 
-// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
-exports.AlertArrowPosition = void 0;
-(function (ArrowPosition) {
-  ArrowPosition["TOP_LEFT"] = "up-left";
-  ArrowPosition["TOP"] = "up-center";
-  ArrowPosition["TOP_RIGHT"] = "up-right";
-  ArrowPosition["BOTTOM_LEFT"] = "down-left";
-  ArrowPosition["BOTTOM"] = "down-center";
-  ArrowPosition["BOTTOM_RIGHT"] = "down-right";
-})(exports.AlertArrowPosition || (exports.AlertArrowPosition = {}));
-
-function withArrow(Alert, arrow) {
-  const AlertWithArrow = props => /*#__PURE__*/jsxRuntime.jsx(Alert, {
-    ...props,
-    className: classNames__default.default(props.className, arrowClasses(arrow)),
-    arrow: undefined
-  });
-  AlertWithArrow.propTypes = {
-    className: PropTypes__default.default.string
-  };
-  AlertWithArrow.defaultProps = {
-    className: undefined
-  };
-  return AlertWithArrow;
+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';
+  }
+  return type;
 }
-function arrowClasses(arrow) {
-  if (arrow) {
-    const classes = ['arrow'];
-    const {
-      BOTTOM,
-      BOTTOM_LEFT,
-      BOTTOM_RIGHT,
-      TOP,
-      TOP_RIGHT,
-      TOP_LEFT
-    } = exports.AlertArrowPosition;
-    switch (arrow) {
-      case BOTTOM:
-        return classes.concat('arrow-bottom', 'arrow-center');
-      case BOTTOM_LEFT:
-        return classes.concat('arrow-bottom', 'arrow-left');
-      case BOTTOM_RIGHT:
-        return classes.concat('arrow-bottom', 'arrow-right');
-      case TOP:
-        return classes.concat('arrow-center');
-      case TOP_RIGHT:
-        return classes.concat('arrow-right');
-      case TOP_LEFT:
-      default:
-        return classes;
+function Alert({
+  arrow,
+  action,
+  children,
+  className,
+  dismissible,
+  icon,
+  onDismiss,
+  message,
+  size,
+  title,
+  type = 'neutral',
+  variant = 'desktop'
+}) {
+  React.useEffect(() => {
+    if (arrow !== undefined) {
+      logActionRequired("Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.");
     }
-  }
-  return '';
-}
-
-const deprecatedTypeMap$1 = {
-  [exports.Sentiment.SUCCESS]: exports.Sentiment.POSITIVE,
-  [exports.Sentiment.INFO]: exports.Sentiment.NEUTRAL,
-  [exports.Sentiment.ERROR]: exports.Sentiment.NEGATIVE
-};
-const Alert = props => {
-  const {
-    isModern
-  } = componentsTheming.useTheme();
-  const iconTypeMap = {
-    [exports.Sentiment.POSITIVE]: icons.CheckCircle,
-    [exports.Sentiment.NEUTRAL]: icons.InfoCircle,
-    [exports.Sentiment.WARNING]: icons.Warning,
-    [exports.Sentiment.NEGATIVE]: icons.CrossCircle,
-    [exports.Sentiment.PENDING]: icons.Clock
-  };
-  const [shouldFire, setShouldFire] = React.useState(false);
-  const {
-    arrow,
-    action,
-    children,
-    className,
-    icon,
-    onDismiss,
-    message,
-    title,
-    type,
-    variant
-  } = props;
-  const closeButtonReference = React.useRef(null);
-  if (arrow) {
-    const AlertWithArrow = withArrow(Alert, arrow);
-    return /*#__PURE__*/jsxRuntime.jsx(AlertWithArrow, {
-      ...props
-    });
-  }
-  logActionRequired(props);
-  const mappedType = deprecatedTypeMap$1[type] || type;
-  const Icon = iconTypeMap[mappedType];
-  function generateIcon() {
-    if (icon) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "alert__icon",
-        children: icon
-      });
+  }, [arrow]);
+  React.useEffect(() => {
+    if (children !== undefined) {
+      logActionRequired("Alert component doesn't support 'children' anymore, use 'message' instead.");
     }
-    if (isModern) {
-      return /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
-        size: exports.Size.LARGE,
-        sentiment: mappedType
-      });
-    } else {
-      return /*#__PURE__*/jsxRuntime.jsx(Icon, {
-        size: 24
-      });
+  }, [children]);
+  React.useEffect(() => {
+    if (dismissible !== undefined) {
+      logActionRequired("Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.");
     }
-  }
-  const handleTouchStart = () => setShouldFire(true);
-  const handleTouchMove = () => setShouldFire(false);
-  const handleTouchEnd = event => {
-    if (shouldFire && action) {
+  }, [dismissible]);
+  React.useEffect(() => {
+    if (size !== undefined) {
+      logActionRequired("Alert component doesn't support 'size' anymore, please remove that prop.");
+    }
+  }, [size]);
+  const resolvedType = resolveType(type);
+  React.useEffect(() => {
+    if (resolvedType !== type) {
+      logActionRequired(`Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`);
+    }
+  }, [resolvedType, type]);
+  const [shouldFire, setShouldFire] = React.useState(false);
+  const closeButtonReference = React.useRef(null);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: classNames__default.default('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
-      if (closeButtonReference?.current && !closeButtonReference.current.contains(event.target)) {
-        if (action?.target === '_blank') {
-          window.top.open(action.href);
+      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);
+          window.top?.location.assign(action.href);
         }
       }
-    }
-    setShouldFire(false);
-  };
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classNames__default.default('alert d-flex', `alert-${mappedType}`, className),
-    "data-testid": "alert",
-    onTouchStart: handleTouchStart,
-    onTouchEnd: handleTouchEnd,
-    onTouchMove: handleTouchMove,
+      setShouldFire(false);
+    },
+    onTouchMove: () => setShouldFire(false),
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: classNames__default.default('alert__content', 'd-flex', 'flex-grow-1', variant),
       "data-testid": variant,
-      children: [generateIcon(), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      children: [icon ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "alert__icon",
+        children: icon
+      }) : /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
+        size: exports.Size.LARGE,
+        sentiment: resolvedType
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "alert__message",
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-          role: exports.Sentiment.NEGATIVE === mappedType ? 'alert' : 'status',
+          role: exports.Sentiment.NEGATIVE === resolvedType ? 'alert' : 'status',
           children: [title && /*#__PURE__*/jsxRuntime.jsx(Title, {
             className: "m-b-1",
             type: exports.Typography.TITLE_BODY,
@@ -1129,72 +1043,24 @@ const Alert = props => {
       onClick: onDismiss
     })]
   });
-};
-const deprecatedTypeMapMessage$1 = {
-  [exports.Sentiment.SUCCESS]: 'Sentiment.POSITIVE',
-  [exports.Sentiment.INFO]: 'Sentiment.NEUTRAL',
-  [exports.Sentiment.ERROR]: 'Sentiment.NEGATIVE'
-};
-const deprecatedTypes$1 = Object.keys(deprecatedTypeMap$1);
-function logActionRequired({
-  size,
-  type
-}) {
-  logActionRequiredIf('Alert no longer supports any possible variations in size. Please remove the `size` prop.', !!size);
-  logActionRequiredIf(`Alert has deprecated the ${type} value for the \`type\` prop. Please update to ${deprecatedTypeMapMessage$1[type]}.`, deprecatedTypes$1.includes(type));
 }
-Alert.propTypes = {
-  /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */
-  action: PropTypes__default.default.shape({
-    'aria-label': PropTypes__default.default.string,
-    href: PropTypes__default.default.string.isRequired,
-    target: PropTypes__default.default.string,
-    text: PropTypes__default.default.node.isRequired
-  }),
-  className: PropTypes__default.default.string,
-  /** An optional icon. If not provided, we will default the icon to something appropriate for the type */
-  icon: PropTypes__default.default.element,
-  /** Title for the alert component */
-  title: PropTypes__default.default.string,
-  /** The main body of the alert. Accepts plain text and bold words specified with **double stars*/
-  message: requiredIf__default.default(PropTypes__default.default.node, ({
-    children
-  }) => !children),
-  /** The presence of the onDismiss handler will trigger the visibility of the close button */
-  onDismiss: PropTypes__default.default.func,
-  /** The type dictates which icon and colour will be used */
-  type: PropTypes__default.default.oneOf(['negative', 'neutral', 'positive', 'warning', 'info', 'error', 'success']),
-  variant: PropTypes__default.default.oneOf(['desktop', 'mobile']),
-  /** @deprecated no arrow for `Alert` component anymore, consider to use [`InlineAlert`](https://transferwise.github.io/neptune-web/components/alerts/InlineAlert) component */
-  arrow: deprecated$1(PropTypes__default.default.oneOf(['up-left', 'up-center', 'up-right', 'down-left', 'down-center', 'down-right']), {
-    component: 'Alert',
-    expiryDate: new Date('03-01-2021')
-  }),
-  /** @deprecated use `message` property instead */
-  children: deprecated$1(requiredIf__default.default(PropTypes__default.default.node, ({
-    message
-  }) => !message), {
-    component: 'Alert',
-    message: 'You should now use the `message` prop. Be aware `message` only accepts plain text or text with **bold** markdown.',
-    expiryDate: new Date('03-01-2021')
-  }),
-  /** @deprecated use `onDismiss` instead */
-  dismissible: deprecated$1(PropTypes__default.default.bool, {
-    component: 'Alert',
-    message: 'The Alert will now be considered dismissible if an `onDismiss` hander is present.',
-    expiryDate: new Date('03-01-2021')
-  })
-};
-Alert.defaultProps = {
-  action: undefined,
-  arrow: undefined,
-  className: undefined,
-  dismissible: undefined,
-  icon: undefined,
-  type: exports.Sentiment.NEUTRAL,
-  variant: exports.Variant.DESKTOP
-};
-var Alert$1 = Alert;
+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
 exports.AvatarType = void 0;
@@ -1420,7 +1286,6 @@ const FocusBoundary = ({
     })
   });
 };
-var FocusBoundary$1 = FocusBoundary;
 
 function withNextPortalWrapper(Component) {
   return function (props) {
@@ -1562,7 +1427,7 @@ const Dimmer = ({
       onExited: onExited,
       children: /*#__PURE__*/jsxRuntime.jsx(DimmerContentWrapper, {
         scrollBody: !transparent,
-        children: /*#__PURE__*/jsxRuntime.jsx(FocusBoundary$1, {
+        children: /*#__PURE__*/jsxRuntime.jsx(FocusBoundary, {
           children: /*#__PURE__*/jsxRuntime.jsx("div", {
             ref: dimmerReference,
             className: classNames__default.default('dimmer', {
@@ -2194,7 +2059,7 @@ var messages$b = reactIntl.defineMessages({
   }
 });
 
-const typeClassMap$1 = {
+const typeClassMap = {
   [exports.ControlType.ACCENT]: 'btn-accent',
   [exports.ControlType.POSITIVE]: 'btn-positive',
   [exports.ControlType.NEGATIVE]: 'btn-negative'
@@ -2278,7 +2143,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
   },
   // @ts-expect-error fix when refactor `typeClassMap` to TypeScript
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeClassMap$1[newType],
+  typeClassMap[newType],
   // @ts-expect-error fix when refactor `typeClassMap` to TypeScript
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
   priorityClassMap[newPriority], className);
@@ -2663,7 +2528,7 @@ const CircularButton = ({
   type = exports.ControlType.ACCENT,
   ...rest
 }) => {
-  const classes = classNames__default.default('btn np-btn', typeClassMap$1[type], priorityClassMap[priority]);
+  const classes = classNames__default.default('btn np-btn', typeClassMap[type], priorityClassMap[priority]);
   const iconElement = Number(icon.props.size) !== 24 ? /*#__PURE__*/React.cloneElement(icon, {
     size: 24
   }) : icon;
@@ -5899,7 +5764,7 @@ function Popover$1({
   const resolvedPlacement = resolvePlacement(preferredPlacement);
   React.useEffect(() => {
     if (resolvedPlacement !== preferredPlacement) {
-      logActionRequired$1(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`);
+      logActionRequired(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`);
     }
   }, [preferredPlacement, resolvedPlacement]);
   const anchorReference = React.useRef(null);
@@ -6004,49 +5869,22 @@ const Info = ({
   });
 };
 
-const typeClassMap = {
-  [exports.Sentiment.ERROR]: 'danger',
-  [exports.Sentiment.NEGATIVE]: 'danger'
-};
-const InlineAlert = ({
+function InlineAlert({
   id,
-  type = exports.Sentiment.NEUTRAL,
+  type = 'neutral',
   className,
   children
-}) => {
-  const {
-    isModern
-  } = componentsTheming.useTheme();
-  const typeClass = `alert-${typeClassMap[type] || type}`;
-  if (isModern) {
-    return /*#__PURE__*/jsxRuntime.jsxs("div", {
-      role: "alert",
-      id: id,
-      className: classNames__default.default('alert alert-detach', typeClass, className),
-      children: [(type === 'error' || type === 'negative') && /*#__PURE__*/jsxRuntime.jsx(icons.AlertCircle, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
-        children: children
-      })]
-    });
-  }
-  const getAlertContents = ({
-    children,
-    className
-  }) => {
-    return /*#__PURE__*/jsxRuntime.jsx("div", {
-      role: "alert",
-      id: id,
-      className: classNames__default.default('alert alert-detach p-x-2 p-y-1', typeClass, className),
+}) {
+  const danger = type === 'negative' || type === 'error';
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    role: "alert",
+    id: id,
+    className: classNames__default.default('alert alert-detach', `alert-${danger ? 'danger' : type}`, className),
+    children: [danger && /*#__PURE__*/jsxRuntime.jsx(icons.AlertCircle, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
       children: children
-    });
-  };
-  const AlertWithArrow = withArrow(getAlertContents, exports.AlertArrowPosition.TOP_LEFT);
-  return /*#__PURE__*/jsxRuntime.jsx(AlertWithArrow, {
-    id,
-    type,
-    className,
-    children
+    })]
   });
-};
+}
 
 /*
  * Inspired by:
@@ -6294,61 +6132,65 @@ function BottomSheet({
         theme: "personal",
         screenMode: theme === 'personal' ? screenMode : 'light',
         isNotRootProvider: true,
-        children: /*#__PURE__*/jsxRuntime.jsxs(react$1.Transition, {
+        children: /*#__PURE__*/jsxRuntime.jsx(react$1.Transition, {
           show: open,
           className: "np-bottom-sheet-v2-container",
           beforeEnter: () => {
             setFloatingKey(prev => prev + 1);
           },
           afterLeave: onCloseEnd,
-          children: [/*#__PURE__*/jsxRuntime.jsx(react$1.Transition.Child, {
-            enter: "np-bottom-sheet-v2-backdrop-container--enter",
-            enterFrom: "np-bottom-sheet-v2-backdrop-container--enter-from",
-            leave: "np-bottom-sheet-v2-backdrop-container--leave",
-            leaveTo: "np-bottom-sheet-v2-backdrop-container--leave-to",
-            children: /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "np-bottom-sheet-v2-backdrop"
-            })
-          }), /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "np-bottom-sheet-v2",
-            children: /*#__PURE__*/jsxRuntime.jsx(react$1.Transition.Child, {
-              className: "np-bottom-sheet-v2-content",
-              enter: "np-bottom-sheet-v2-content--enter",
-              enterFrom: "np-bottom-sheet-v2-content--enter-from",
-              leave: "np-bottom-sheet-v2-content--leave",
-              leaveTo: "np-bottom-sheet-v2-content--leave-to",
-              children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
-                context: context,
-                initialFocus: initialFocusRef,
-                children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-                  // Force inner state invalidation on open
-                  ref: refs.setFloating,
-                  className: "np-bottom-sheet-v2-content-inner-container",
-                  ...getFloatingProps(),
-                  children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-                    className: "np-bottom-sheet-v2-header",
-                    children: /*#__PURE__*/jsxRuntime.jsx(CloseButton, {
-                      size: exports.Size.SMALL,
-                      onClick: () => {
-                        onClose?.();
-                      }
-                    })
-                  }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-                    className: classNames__default.default('np-bottom-sheet-v2-content-inner', title && 'np-bottom-sheet-v2-content-inner--has-title', {
-                      'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md'
-                    }),
-                    children: [title ? /*#__PURE__*/jsxRuntime.jsx("h2", {
-                      className: "np-bottom-sheet-v2-title np-text-title-body",
-                      children: title
-                    }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
-                      className: "np-bottom-sheet-v2-body np-text-body-default",
-                      children: children
+          children: /*#__PURE__*/jsxRuntime.jsxs(FocusBoundary, {
+            children: [/*#__PURE__*/jsxRuntime.jsx(react$1.Transition.Child, {
+              enter: "np-bottom-sheet-v2-backdrop-container--enter",
+              enterFrom: "np-bottom-sheet-v2-backdrop-container--enter-from",
+              leave: "np-bottom-sheet-v2-backdrop-container--leave",
+              leaveTo: "np-bottom-sheet-v2-backdrop-container--leave-to",
+              children: /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "np-bottom-sheet-v2-backdrop"
+              })
+            }), /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "np-bottom-sheet-v2",
+              children: /*#__PURE__*/jsxRuntime.jsx(react$1.Transition.Child, {
+                className: "np-bottom-sheet-v2-content",
+                enter: "np-bottom-sheet-v2-content--enter",
+                enterFrom: "np-bottom-sheet-v2-content--enter-from",
+                leave: "np-bottom-sheet-v2-content--leave",
+                leaveTo: "np-bottom-sheet-v2-content--leave-to",
+                children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
+                  context: context,
+                  initialFocus: initialFocusRef,
+                  guards: false,
+                  modal: false,
+                  children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+                    // Force inner state invalidation on open
+                    ref: refs.setFloating,
+                    className: "np-bottom-sheet-v2-content-inner-container",
+                    ...getFloatingProps(),
+                    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                      className: "np-bottom-sheet-v2-header",
+                      children: /*#__PURE__*/jsxRuntime.jsx(CloseButton, {
+                        size: exports.Size.SMALL,
+                        onClick: () => {
+                          onClose?.();
+                        }
+                      })
+                    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                      className: classNames__default.default('np-bottom-sheet-v2-content-inner', title && 'np-bottom-sheet-v2-content-inner--has-title', {
+                        'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md'
+                      }),
+                      children: [title ? /*#__PURE__*/jsxRuntime.jsx("h2", {
+                        className: "np-bottom-sheet-v2-title np-text-title-body",
+                        children: title
+                      }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
+                        className: "np-bottom-sheet-v2-body np-text-body-default",
+                        children: children
+                      })]
                     })]
-                  })]
-                }, floatingKey)
+                  }, floatingKey)
+                })
               })
-            })
-          })]
+            })]
+          })
         })
       })
     })]
@@ -6446,32 +6288,36 @@ function Popover({
             setFloatingKey(prev => prev + 1);
           },
           afterLeave: onCloseEnd,
-          children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
-            context: context,
-            children: /*#__PURE__*/jsxRuntime.jsx("div", {
-              // Force inner state invalidation on open
-              ref: refs.setFloating,
-              className: classNames__default.default('np-popover-v2-container', {
-                'np-popover-v2-container--size-md': size === 'md',
-                'np-popover-v2-container--size-lg': size === 'lg'
-              })
-              // eslint-disable-next-line react/forbid-dom-props
-              ,
-              style: floatingStyles,
-              ...getFloatingProps(),
-              children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-                className: classNames__default.default('np-popover-v2', title && 'np-popover-v2--has-title', {
-                  'np-popover-v2--padding-md': padding === 'md'
-                }),
-                children: [title ? /*#__PURE__*/jsxRuntime.jsx("h2", {
-                  className: "np-popover-v2-title np-text-title-body",
-                  children: title
-                }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
-                  className: "np-popover-v2-content np-text-body-default",
-                  children: children
-                })]
-              })
-            }, floatingKey)
+          children: /*#__PURE__*/jsxRuntime.jsx(FocusBoundary, {
+            children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
+              context: context,
+              guards: false,
+              modal: false,
+              children: /*#__PURE__*/jsxRuntime.jsx("div", {
+                // Force inner state invalidation on open
+                ref: refs.setFloating,
+                className: classNames__default.default('np-popover-v2-container', {
+                  'np-popover-v2-container--size-md': size === 'md',
+                  'np-popover-v2-container--size-lg': size === 'lg'
+                })
+                // eslint-disable-next-line react/forbid-dom-props
+                ,
+                style: floatingStyles,
+                ...getFloatingProps(),
+                children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: classNames__default.default('np-popover-v2', title && 'np-popover-v2--has-title', {
+                    'np-popover-v2--padding-md': padding === 'md'
+                  }),
+                  children: [title ? /*#__PURE__*/jsxRuntime.jsx("h2", {
+                    className: "np-popover-v2-title np-text-title-body",
+                    children: title
+                  }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
+                    className: "np-popover-v2-content np-text-body-default",
+                    children: children
+                  })]
+                })
+              }, floatingKey)
+            })
           })
         })
       })
@@ -6850,7 +6696,6 @@ function SelectInputOptions({
       })
     }) : null, /*#__PURE__*/jsxRuntime.jsxs("section", {
       ref: listboxContainerRef,
-      tabIndex: -1,
       className: classNames__default.default('np-select-input-listbox-container', items.some(item => item.type === 'group') && 'np-select-input-listbox-container--has-group'),
       children: [resultsEmpty ? /*#__PURE__*/jsxRuntime.jsxs("div", {
         id: statusId,
@@ -15168,7 +15013,7 @@ const translations = {
 exports.Accordion = Accordion;
 exports.ActionButton = ActionButton;
 exports.ActionOption = ActionOption;
-exports.Alert = Alert$1;
+exports.Alert = Alert;
 exports.Avatar = Avatar;
 exports.AvatarWrapper = AvatarWrapper;
 exports.Badge = Badge;