@transferwise/components 0.0.0-experimental-47ae02a → 0.0.0-experimental-da6dbbf

package/build/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var reactId = require('@radix-ui/react-id');
 var classNames = require('classnames');
 var jsxRuntime = require('react/jsx-runtime');
 var icons = require('@transferwise/icons');
@@ -11,6 +12,7 @@ var componentsTheming = require('@wise/components-theming');
 var reactTransitionGroup = require('react-transition-group');
 var focus = require('@react-aria/focus');
 var reactDom = require('react-dom');
+var index_js = require('use-sync-external-store/shim/index.js');
 var neptuneValidation = require('@transferwise/neptune-validation');
 var formatting = require('@transferwise/formatting');
 var react$1 = require('@headlessui/react');
@@ -563,7 +565,7 @@ const AccordionItem = ({
   const iconElement = icon ? /*#__PURE__*/React.cloneElement(icon, {
     size: 24
   }) : null;
-  const fallbackId = React.useId();
+  const fallbackId = reactId.useId();
   const accordionId = id ?? fallbackId;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     id: accordionId,
@@ -1266,67 +1268,68 @@ const radius = {
 };
 const ANIMATION_DURATION_IN_MS = 1500;
 class ProcessIndicator extends React.Component {
-  static defaultProps = {
-    status: 'processing',
-    size: 'sm'
-  };
-  interval = 0;
-  timeout = 0;
   constructor(props) {
     super(props);
     this.state = {
       status: props.status,
       size: props.size
     };
+    this.interval = null;
+    this.timeout = null;
   }
+
   /**
    * Create interval for animation duration (1500ms)
    * Update state only at the end of every interval
    * (end of animation loop) if props changed before end of animation
    */
   componentDidMount() {
-    this.interval = window.setInterval(() => {
-      const {
-        status: targetStatus,
-        size: targetSize,
-        onAnimationCompleted
-      } = this.props;
-      const {
-        status: currentStatus,
-        size: currentSize
-      } = this.state;
-      if (currentStatus !== targetStatus) {
+    this.interval = setInterval(() => {
+      const statusFromState = this.state.status;
+      const sizeFromState = this.state.size;
+      const statusFromProps = this.props.status;
+      const sizeFromProps = this.props.size;
+      if (statusFromState !== statusFromProps) {
         this.setState({
-          status: targetStatus
-        }, () => {
-          if (onAnimationCompleted) {
-            this.timeout = window.setTimeout(() => {
-              onAnimationCompleted(targetStatus);
-            }, ANIMATION_DURATION_IN_MS);
-          }
-        });
+          status: statusFromProps
+        }, this.runCallBack(statusFromProps));
       }
-      if (currentSize !== targetSize) {
+      if (sizeFromState !== sizeFromProps) {
         this.setState({
-          size: targetSize
+          size: sizeFromProps
         });
       }
     }, ANIMATION_DURATION_IN_MS);
   }
+
   /**
    * Only trigger render if comopnent's state got
    * updated from interval callback
+   *
+   * @param nextProps
+   * @param nextState
    */
   shouldComponentUpdate(nextProps, nextState) {
     const isSameStatus = nextProps.status === nextState.status;
     const isSameSize = nextProps.size === nextState.size;
     return isSameStatus && isSameSize;
   }
+
   // Clear interval before destroying component
   componentWillUnmount() {
-    window.clearInterval(this.interval);
-    window.clearTimeout(this.timeout);
+    clearInterval(this.interval);
+    clearTimeout(this.timeout);
   }
+  runCallBack = statusFromProps => {
+    const {
+      onAnimationCompleted
+    } = this.props;
+    if (onAnimationCompleted) {
+      this.timeouts = setTimeout(() => {
+        onAnimationCompleted(statusFromProps);
+      }, ANIMATION_DURATION_IN_MS);
+    }
+  };
   render() {
     const {
       className,
@@ -1357,13 +1360,28 @@ class ProcessIndicator extends React.Component {
           className: "process-circle",
           cx: "50%",
           cy: "50%",
-          r: radius[size],
+          r: radius[this.state.size],
           fillOpacity: "0.0"
         })
       })]
     });
   }
 }
+ProcessIndicator.propTypes = {
+  status: PropTypes__default.default.oneOf(['processing', 'failed', 'succeeded', 'hidden']),
+  size: PropTypes__default.default.oneOf(['xxs', 'xs', 'sm', 'xl']),
+  onAnimationCompleted: PropTypes__default.default.func,
+  className: PropTypes__default.default.string,
+  'data-testid': PropTypes__default.default.string
+};
+ProcessIndicator.defaultProps = {
+  status: exports.Status.PROCESSING,
+  size: exports.Size.SMALL,
+  onAnimationCompleted: null,
+  className: undefined,
+  'data-testid': null
+};
+var ProcessIndicator$1 = ProcessIndicator;
 
 var messages$b = reactIntl.defineMessages({
   loadingAriaLabel: {
@@ -1485,14 +1503,724 @@ const Button = /*#__PURE__*/React.forwardRef(({
     ...props,
     "aria-live": loading ? 'polite' : 'off',
     "aria-label": loading ? intl.formatMessage(messages$b.loadingAriaLabel) : rest['aria-label'],
-    children: [children, loading && /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator, {
+    children: [children, loading && /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator$1, {
       size: processIndicatorSize(),
       className: "btn-loader"
     })]
   });
 });
 
-const Card$1 = /*#__PURE__*/React.forwardRef((props, reference) => {
+const Card$2 = /*#__PURE__*/React.forwardRef(({
+  className,
+  children = null,
+  id,
+  isDisabled = false,
+  isSmall = false,
+  onDismiss,
+  testId,
+  ...props
+}, ref) => {
+  const closeButtonReference = React.useRef(null);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    ref: ref,
+    className: classNames__default.default('np-Card', {
+      'np-Card--small': !!isSmall,
+      'is-disabled': !!isDisabled
+    }, className),
+    id: id,
+    "data-testid": testId,
+    ...props,
+    children: [onDismiss && /*#__PURE__*/jsxRuntime.jsx(CloseButton, {
+      ref: closeButtonReference,
+      className: "np-Card-closeButton",
+      size: isSmall ? 'sm' : 'md',
+      isDisabled: isDisabled,
+      testId: "close-button",
+      onClick: e => {
+        stopPropagation$1(e);
+        onDismiss();
+      }
+    }), children]
+  });
+});
+Card$2.displayName = 'Card';
+
+function Display({
+  as: Heading = 'h1',
+  type = exports.Typography.DISPLAY_LARGE,
+  children,
+  className,
+  id
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Heading, {
+    id: id,
+    className: classNames__default.default(`np-text-${type}`, 'text-primary', className),
+    children: children
+  });
+}
+
+const useConditionalListener = ({
+  attachListener,
+  callback,
+  eventType,
+  parent
+}) => {
+  React.useEffect(() => {
+    if (attachListener && !neptuneValidation.isUndefined(parent)) {
+      parent.addEventListener(eventType, callback, true);
+    }
+    return () => {
+      if (!neptuneValidation.isUndefined(parent)) {
+        parent.removeEventListener(eventType, callback, true);
+      }
+    };
+  }, [attachListener, callback, eventType, parent]);
+};
+
+const DirectionContext = /*#__PURE__*/React.createContext(exports.Direction.LTR);
+const DirectionProvider = ({
+  direction,
+  children
+}) => {
+  return /*#__PURE__*/jsxRuntime.jsx(DirectionContext.Provider, {
+    value: direction,
+    children: children
+  });
+};
+
+const useDirection = () => {
+  const direction = React.useContext(DirectionContext);
+  return {
+    direction,
+    isRTL: direction === 'rtl'
+  };
+};
+
+const ObserverParams = {
+  threshold: 0.1
+};
+
+/**
+ * useHasIntersected.
+ * Use this custom hook to detect when an element has became visible inside the viewport. This hook checks only if the intersection happend.
+ * Once the intersection has happened the hook will not return false even if the element gets out of the viewport.
+ *
+ * @param elRef.elRef
+ * @param {object} [elRef] - node object that contains a react reference to the element that needs to be observed.
+ * @param {strimng} [loading = 'eager'] - string that contains the type of loading.
+ * @param elRef.loading
+ * @usage `const [hasIntersected] = useHasIntersected({imageRef,loading});`
+ */
+const useHasIntersected = ({
+  elRef,
+  loading
+}) => {
+  const [hasIntersected, setHasIntersected] = React.useState(false);
+  const {
+    current
+  } = elRef || {};
+  const isValidReference = () => {
+    return elRef && current;
+  };
+  const handleOnIntersect = (entries, observer) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        setHasIntersected(true);
+        observer.unobserve(current);
+      }
+    });
+  };
+  React.useEffect(() => {
+    let observer;
+    let didCancel = false;
+
+    // Check if window is define for SSR and Old browsers fallback
+    if (typeof window === 'undefined' || !window.IntersectionObserver || !isValidReference()) {
+      setHasIntersected(true);
+    } else if (!didCancel) {
+      observer = new IntersectionObserver(handleOnIntersect, ObserverParams);
+      observer.observe(current);
+    }
+    return () => {
+      didCancel = true;
+      if (observer) {
+        observer.unobserve(current);
+      }
+    };
+  }, [elRef]);
+  if (loading === 'eager') {
+    return [false];
+  }
+  return [hasIntersected];
+};
+
+// eslint-disable-next-line import/extensions
+function useMedia(query) {
+  return index_js.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(exports.Breakpoint.EXTRA_SMALL);
+  const screenSm = useScreenSize(exports.Breakpoint.SMALL);
+  const screenMd = useScreenSize(exports.Breakpoint.MEDIUM);
+  const screenLg = useScreenSize(exports.Breakpoint.LARGE);
+  const screenXl = useScreenSize(exports.Breakpoint.EXTRA_LARGE);
+  return {
+    isMobile: screenSm != null ? !screenSm : undefined,
+    isExtraSmall: screenXs,
+    isSmall: screenSm,
+    isMedium: screenMd,
+    isLarge: screenLg,
+    isExtraLarge: screenXl
+  };
+};
+
+const EmptyTransparentImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+const Image = ({
+  id,
+  src,
+  alt,
+  onLoad,
+  onError,
+  className,
+  loading,
+  stretch = true,
+  role,
+  shrink = true
+}) => {
+  const elementReference = React.useRef(null);
+  const [hasIntersected] = useHasIntersected({
+    elRef: elementReference,
+    loading
+  });
+  let imageSource = src;
+  let imageOnLoad = onLoad;
+  if (loading === 'lazy' && !hasIntersected) {
+    imageSource = EmptyTransparentImage;
+    imageOnLoad = undefined;
+  }
+  return /*#__PURE__*/jsxRuntime.jsx("img", {
+    ref: elementReference,
+    id: id,
+    alt: alt,
+    src: imageSource,
+    className: classNames__default.default(['tw-image', {
+      'tw-image__stretch': stretch,
+      'tw-image__shrink': shrink
+    }, className]),
+    role: role,
+    onLoad: imageOnLoad,
+    onError: onError
+  });
+};
+
+const defaultPromoCardContext = {
+  state: '',
+  isDisabled: false,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onChange: () => {}
+};
+/**
+ * The PromoCard context object.
+ */
+const PromoCardContext = /*#__PURE__*/React.createContext(defaultPromoCardContext);
+/**
+ * A custom hook for accessing the PromoCard context object.
+ *
+ * The `usePromoCardContext` hook is used to access the PromoCard context object
+ * from within a child PromoCard component. It throws an error if the context
+ * object is not available, which can help with debugging and development.
+ *
+ * @returns {PromoCardContextType} - The PromoCard context object.
+ */
+const usePromoCardContext = () => {
+  return React.useContext(PromoCardContext);
+};
+
+const PromoCardIndicator = ({
+  className,
+  children,
+  label,
+  icon,
+  isSmall = false,
+  testid,
+  ...rest
+}) => {
+  const isIconString = icon && typeof icon === 'string';
+  const IconComponent = isIconString && {
+    check: icons.Check,
+    arrow: icons.ArrowRight,
+    download: icons.Download
+  }[icon];
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: classNames__default.default('np-Card-indicator', className),
+    "data-testid": testid,
+    ...rest,
+    children: [label && /*#__PURE__*/jsxRuntime.jsx(Body, {
+      as: "span",
+      type: exports.Typography.BODY_LARGE_BOLD,
+      className: "np-Card-indicatorText",
+      children: label
+    }), icon && /*#__PURE__*/jsxRuntime.jsx(Avatar, {
+      type: exports.AvatarType.ICON,
+      size: isSmall ? 40 : 56,
+      backgroundColor: "var(--Card-indicator-icon-background-color)",
+      className: "np-Card-indicatorIcon",
+      children: IconComponent ? /*#__PURE__*/jsxRuntime.jsx(IconComponent, {
+        size: 24,
+        "aria-hidden": "true"
+      }) : icon
+    }), children]
+  });
+};
+
+const PromoCard = /*#__PURE__*/React.forwardRef(({
+  className,
+  description,
+  defaultChecked,
+  download,
+  href,
+  hrefLang,
+  id,
+  headingLevel = 'h3',
+  imageAlt,
+  imageClass,
+  imageSource,
+  indicatorLabel,
+  indicatorIcon,
+  isChecked,
+  isDisabled,
+  onClick,
+  onKeyDown,
+  rel,
+  tabIndex,
+  target,
+  testId,
+  title,
+  type,
+  value,
+  isSmall,
+  useDisplayFont = true,
+  anchorRef,
+  anchorId,
+  ...props
+}, ref) => {
+  // Set the `checked` state to the value of `defaultChecked` if it is truthy,
+  // or the value of `isChecked` if it is truthy, or `false` if neither
+  // is truthy.
+  const {
+    state,
+    onChange,
+    isDisabled: contextIsDisabled
+  } = usePromoCardContext();
+  const [checked, setChecked] = React.useState(type === 'checkbox' ? defaultChecked ?? isChecked ?? false : false);
+  const handleClick = () => {
+    if (type === 'radio') {
+      onChange(value || ''); // Update the context state for radio
+    } else if (type === 'checkbox') {
+      setChecked(!checked); // Update local state for checkbox
+    }
+  };
+  const fallbackId = reactId.useId();
+  const componentId = id || fallbackId;
+  // Set the icon to `'arrow'` if `href` is truthy and `type` is falsy, or
+  // `'download'` if `download` is truthy. If neither condition is true, set
+  // `icon` to `undefined`.
+  // Create a function to get icon type
+  const getIconType = () => {
+    if (indicatorIcon) {
+      return indicatorIcon;
+    }
+    if (download) {
+      return 'download';
+    }
+    if (href && !type) {
+      return 'arrow';
+    }
+    return undefined;
+  };
+  // Define all class names string based on the values of the `href`, `type`,
+  // `checked`, and `className` props.
+  const commonClasses = classNames__default.default({
+    'np-Card--promoCard': true,
+    'np-Card--checked': !href && type,
+    'np-Card--link': href && !type,
+    'is-checked': type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined
+  }, className);
+  // Object with common props that will be passed to the `Card` components
+  const commonProps = {
+    className: commonClasses,
+    id: componentId,
+    isDisabled: isDisabled || contextIsDisabled,
+    onClick,
+    onKeyDown,
+    ref,
+    'data-testid': testId,
+    isSmall
+  };
+  // Object with Anchor props that will be passed to the `a` element. These
+  // won't be refurned if set to `isDisabled`
+  const anchorProps = href && !isDisabled ? {
+    download,
+    href: href || undefined,
+    hrefLang,
+    rel,
+    target,
+    ref: anchorRef,
+    id: anchorId
+  } : {};
+  // Object of all Checked props that will be passed to the root `Card` component
+  const checkedProps = (type === 'checkbox' || type === 'radio') && !href ? {
+    ...commonProps,
+    'aria-checked': type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,
+    'aria-describedby': `${componentId}-title`,
+    'aria-disabled': isDisabled,
+    'data-value': value ?? undefined,
+    role: type === 'checkbox' || type === 'radio' ? type : undefined,
+    onClick: handleClick,
+    onKeyDown: event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        handleClick();
+      }
+    },
+    ref,
+    tabIndex: 0
+  } : {};
+  const getTitle = () => {
+    const titleContent = href && !type ? /*#__PURE__*/jsxRuntime.jsx("a", {
+      className: "np-Card-titleLink",
+      ...anchorProps,
+      children: title
+    }) : title;
+    const titleProps = {
+      id: `${componentId}-title`,
+      as: headingLevel,
+      className: 'np-Card-title'
+    };
+    return useDisplayFont ? /*#__PURE__*/jsxRuntime.jsx(Display, {
+      type: exports.Typography.DISPLAY_SMALL,
+      ...titleProps,
+      children: titleContent
+    }) : /*#__PURE__*/jsxRuntime.jsx(Title, {
+      type: exports.Typography.TITLE_SUBSECTION,
+      ...titleProps,
+      children: titleContent
+    });
+  };
+  React.useEffect(() => {
+    setChecked(defaultChecked ?? isChecked ?? false);
+  }, [defaultChecked, isChecked]);
+  return /*#__PURE__*/jsxRuntime.jsxs(Card$2, {
+    ...commonProps,
+    ...checkedProps,
+    ...props,
+    children: [(value === state || checked) && /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "np-Card-check",
+      children: /*#__PURE__*/jsxRuntime.jsx(icons.Check, {
+        size: 24,
+        "aria-hidden": "true"
+      })
+    }), getTitle(), /*#__PURE__*/jsxRuntime.jsx(Body, {
+      className: "np-Card-description",
+      children: description
+    }), imageSource && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classNames__default.default('np-Card-image', {
+        imageClass
+      }),
+      children: /*#__PURE__*/jsxRuntime.jsx(Image, {
+        src: imageSource,
+        alt: imageAlt || '',
+        loading: "lazy"
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(PromoCardIndicator, {
+      label: indicatorLabel,
+      icon: getIconType(),
+      isSmall: isSmall
+    })]
+  });
+});
+var PromoCard$1 = /*#__PURE__*/React__namespace.default.memo(PromoCard);
+
+const LEFT_SCROLL_OFFSET = 8;
+const Carousel = ({
+  header,
+  className,
+  cards,
+  onClick
+}) => {
+  const [scrollPosition, setScrollPosition] = React.useState(0);
+  const [previousScrollPosition, setPreviousScrollPosition] = React.useState(0);
+  const [scrollIsAtEnd, setScrollIsAtEnd] = React.useState(false);
+  const [visibleCardOnMobileView, setVisibleCardOnMobileView] = React.useState('');
+  const carouselElementRef = React.useRef(null);
+  const carouselCardsRef = React.useRef([]);
+  const isLeftActionButtonEnabled = scrollPosition > LEFT_SCROLL_OFFSET;
+  const areActionButtonsEnabled = isLeftActionButtonEnabled || !scrollIsAtEnd;
+  const [focusedCard, setFocusedCard] = React.useState(cards?.[0]?.id);
+  const updateScrollButtonsState = () => {
+    if (carouselElementRef.current) {
+      const {
+        scrollWidth,
+        offsetWidth
+      } = carouselElementRef.current;
+      const scrollAtEnd = scrollWidth - offsetWidth <= scrollPosition + LEFT_SCROLL_OFFSET;
+      setScrollIsAtEnd(scrollAtEnd);
+    }
+    const scrollDirecton = scrollPosition > previousScrollPosition ? 'right' : 'left';
+    const cardsInFullViewIds = [];
+    carouselCardsRef.current.forEach(card => {
+      if (isVisible(carouselElementRef.current, card.cardElement)) {
+        // eslint-disable-next-line functional/immutable-data
+        cardsInFullViewIds.push(card.cardElement.getAttribute('id') ?? '');
+      }
+    });
+    if (cardsInFullViewIds.length >= 1) {
+      const visibleCardIndex = scrollDirecton === 'right' ? cardsInFullViewIds.length - 1 : 0;
+      const visibleCardId = cardsInFullViewIds[visibleCardIndex];
+      setVisibleCardOnMobileView(visibleCardId);
+      setFocusedCard(visibleCardId);
+    }
+    setPreviousScrollPosition(scrollPosition);
+  };
+  const scrollCarousel = (direction = 'right') => {
+    if (carouselElementRef.current) {
+      const {
+        scrollWidth
+      } = carouselElementRef.current;
+      const cardWidth = scrollWidth / carouselCardsRef.current.length;
+      const res = Math.floor(cardWidth - cardWidth * 0.05);
+      carouselElementRef.current.scrollBy({
+        left: direction === 'right' ? res : -res,
+        behavior: 'smooth'
+      });
+    }
+  };
+  const handleOnKeyDown = (event, index) => {
+    if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+      const nextIndex = event.key === 'ArrowRight' ? index + 1 : index - 1;
+      const nextCard = cards[nextIndex];
+      if (nextCard) {
+        const ref = carouselCardsRef.current[nextIndex];
+        if (ref.type === 'promo') {
+          ref.anchorElement?.focus();
+        } else {
+          ref.cardElement?.focus();
+        }
+        scrollCardIntoView(carouselCardsRef.current[nextIndex].cardElement, nextCard);
+        event.preventDefault();
+      }
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.currentTarget.click();
+    }
+  };
+  const scrollCardIntoView = (element, card) => {
+    element.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'center'
+    });
+    setFocusedCard(card.id);
+  };
+  React.useEffect(() => {
+    updateScrollButtonsState();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [scrollPosition]);
+  React.useEffect(() => {
+    window.addEventListener('resize', updateScrollButtonsState);
+    return () => {
+      window.removeEventListener('resize', updateScrollButtonsState);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const addElementToCardsRefArray = (index, ref) => {
+    if (ref) {
+      // eslint-disable-next-line functional/immutable-data
+      carouselCardsRef.current[index] = {
+        type: ref.type ?? carouselCardsRef.current?.[index]?.type,
+        cardElement: ref.cardElement ?? carouselCardsRef.current?.[index]?.cardElement,
+        anchorElement: ref.anchorElement ?? carouselCardsRef.current?.[index]?.anchorElement
+      };
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: classNames__default.default('carousel-wrapper', className),
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "d-flex justify-content-between carousel__header",
+      children: [typeof header === 'string' ? /*#__PURE__*/jsxRuntime.jsx(Title, {
+        as: "span",
+        type: "title-body",
+        children: header
+      }) : header, areActionButtonsEnabled ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "hidden-xs",
+        children: [/*#__PURE__*/jsxRuntime.jsx(ActionButton, {
+          className: "carousel__scroll-button",
+          tabIndex: -1,
+          priority: "secondary",
+          disabled: !isLeftActionButtonEnabled,
+          "aria-hidden": "true",
+          "data-testid": "scroll-carousel-left",
+          onClick: () => scrollCarousel('left'),
+          children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronLeft, {})
+        }), /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
+          tabIndex: -1,
+          className: "carousel__scroll-button m-l-1",
+          priority: "secondary",
+          "aria-hidden": "true",
+          "data-testid": "scroll-carousel-right",
+          disabled: scrollIsAtEnd,
+          onClick: () => scrollCarousel(),
+          children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronRight, {})
+        })]
+      }) : null]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: carouselElementRef,
+      tabIndex: -1,
+      role: "list",
+      className: "carousel",
+      onScroll: event => {
+        const target = event.target;
+        setScrollPosition(target.scrollLeft);
+      },
+      children: cards?.map((card, index) => {
+        const sharedProps = {
+          id: card.id,
+          className: classNames__default.default('carousel__card', {
+            'carousel__card--focused': card.id === focusedCard
+          }),
+          onClick: () => {
+            card.onClick?.();
+            onClick?.(card.id);
+          },
+          onFocus: event => {
+            scrollCardIntoView(event.currentTarget, card);
+          }
+        };
+        const cardContent = card.type !== 'promo' ? /*#__PURE__*/jsxRuntime.jsx("div", {
+          id: `${card.id}-content`,
+          className: classNames__default.default('carousel__card-content', {
+            [card.className ?? '']: !!card.className
+          })
+          // eslint-disable-next-line react/forbid-dom-props
+          ,
+          style: card.styles,
+          children: card.content
+        }) : null;
+        if (card.type === 'button') {
+          return /*#__PURE__*/jsxRuntime.jsx("div", {
+            "aria-labelledby": `${card.id}-content`,
+            role: "listitem",
+            children: /*#__PURE__*/jsxRuntime.jsx("div", {
+              ...sharedProps,
+              ref: el => {
+                if (el) {
+                  // eslint-disable-next-line functional/immutable-data
+                  carouselCardsRef.current[index] = {
+                    type: 'default',
+                    cardElement: el
+                  };
+                }
+              },
+              role: "button",
+              tabIndex: 0,
+              onKeyDown: event => handleOnKeyDown(event, index),
+              children: cardContent
+            })
+          }, card.id);
+        }
+        if (card.type === 'promo') {
+          return /*#__PURE__*/jsxRuntime.jsx("div", {
+            id: card.id,
+            role: "listitem",
+            "aria-labelledby": `${card.id}-anchor`,
+            children: /*#__PURE__*/jsxRuntime.jsx(PromoCard$1, {
+              ...card,
+              type: undefined,
+              ...sharedProps,
+              ref: el => {
+                if (el) {
+                  addElementToCardsRefArray(index, {
+                    type: 'promo',
+                    cardElement: el
+                  });
+                }
+              },
+              anchorRef: el => {
+                if (el) {
+                  addElementToCardsRefArray(index, {
+                    type: 'promo',
+                    anchorElement: el
+                  });
+                }
+              },
+              anchorId: `${card.id}-anchor`,
+              onKeyDown: event => handleOnKeyDown(event, index)
+            })
+          }, card.id);
+        }
+        return /*#__PURE__*/jsxRuntime.jsx("div", {
+          "aria-labelledby": `${card.id}-content`,
+          role: "listitem",
+          children: /*#__PURE__*/jsxRuntime.jsx("a", {
+            ...sharedProps,
+            ref: el => {
+              if (el) {
+                // eslint-disable-next-line functional/immutable-data
+                carouselCardsRef.current[index] = {
+                  type: 'default',
+                  cardElement: el
+                };
+              }
+            },
+            href: card.href,
+            rel: "noreferrer",
+            onKeyDown: event => handleOnKeyDown(event, index),
+            children: cardContent
+          })
+        }, card.id);
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "visible-xs",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "carousel__indicators",
+        children: cards?.map((card, index) => /*#__PURE__*/jsxRuntime.jsx("button", {
+          "data-testid": `${card.id}-indicator`,
+          tabIndex: -1,
+          "aria-hidden": true,
+          type: "button",
+          className: classNames__default.default('carousel__indicator', {
+            'carousel__indicator--selected': card.id === visibleCardOnMobileView
+          }),
+          onClick: () => {
+            scrollCardIntoView(carouselCardsRef.current[index].cardElement, card);
+          }
+        }, `${card.id}-indicator`))
+      })
+    })]
+  });
+};
+const isVisible = (container, el) => {
+  const cWidth = container.offsetWidth;
+  const cScrollOffset = container.scrollLeft;
+  const elemLeft = el.offsetLeft - container.offsetLeft;
+  const elemRight = elemLeft + el.offsetWidth;
+  return elemLeft >= cScrollOffset && elemRight <= cScrollOffset + cWidth;
+};
+
+const Card = /*#__PURE__*/React.forwardRef((props, reference) => {
   const {
     'aria-label': ariaLabel,
     as: Element,
@@ -1543,7 +2271,7 @@ const Card$1 = /*#__PURE__*/React.forwardRef((props, reference) => {
 const hasChildren = ({
   children
 }) => children;
-Card$1.propTypes = {
+Card.propTypes = {
   'aria-label': PropTypes__default.default.string,
   as: PropTypes__default.default.string,
   isExpanded: requiredIf__default.default(PropTypes__default.default.bool, hasChildren),
@@ -1556,7 +2284,7 @@ Card$1.propTypes = {
   className: PropTypes__default.default.string,
   'data-testid': PropTypes__default.default.string
 };
-Card$1.defaultProps = {
+Card.defaultProps = {
   'aria-label': undefined,
   as: 'div',
   children: null,
@@ -1564,7 +2292,7 @@ Card$1.defaultProps = {
   className: null,
   'data-testid': null
 };
-var Card$2 = Card$1;
+var Card$1 = Card;
 
 const CheckboxButton = /*#__PURE__*/React.forwardRef(({
   checked,
@@ -2050,134 +2778,6 @@ const DimmerContentWrapper = ({
 };
 var Dimmer$1 = withNextPortalWrapper(Dimmer);
 
-const useConditionalListener = ({
-  attachListener,
-  callback,
-  eventType,
-  parent
-}) => {
-  React.useEffect(() => {
-    if (attachListener && !neptuneValidation.isUndefined(parent)) {
-      parent.addEventListener(eventType, callback, true);
-    }
-    return () => {
-      if (!neptuneValidation.isUndefined(parent)) {
-        parent.removeEventListener(eventType, callback, true);
-      }
-    };
-  }, [attachListener, callback, eventType, parent]);
-};
-
-const DirectionContext = /*#__PURE__*/React.createContext(exports.Direction.LTR);
-const DirectionProvider = ({
-  direction,
-  children
-}) => {
-  return /*#__PURE__*/jsxRuntime.jsx(DirectionContext.Provider, {
-    value: direction,
-    children: children
-  });
-};
-
-const useDirection = () => {
-  const direction = React.useContext(DirectionContext);
-  return {
-    direction,
-    isRTL: direction === 'rtl'
-  };
-};
-
-const ObserverParams = {
-  threshold: 0.1
-};
-
-/**
- * useHasIntersected.
- * Use this custom hook to detect when an element has became visible inside the viewport. This hook checks only if the intersection happend.
- * Once the intersection has happened the hook will not return false even if the element gets out of the viewport.
- *
- * @param elRef.elRef
- * @param {object} [elRef] - node object that contains a react reference to the element that needs to be observed.
- * @param {strimng} [loading = 'eager'] - string that contains the type of loading.
- * @param elRef.loading
- * @usage `const [hasIntersected] = useHasIntersected({imageRef,loading});`
- */
-const useHasIntersected = ({
-  elRef,
-  loading
-}) => {
-  const [hasIntersected, setHasIntersected] = React.useState(false);
-  const {
-    current
-  } = elRef || {};
-  const isValidReference = () => {
-    return elRef && current;
-  };
-  const handleOnIntersect = (entries, observer) => {
-    entries.forEach(entry => {
-      if (entry.isIntersecting) {
-        setHasIntersected(true);
-        observer.unobserve(current);
-      }
-    });
-  };
-  React.useEffect(() => {
-    let observer;
-    let didCancel = false;
-
-    // Check if window is define for SSR and Old browsers fallback
-    if (typeof window === 'undefined' || !window.IntersectionObserver || !isValidReference()) {
-      setHasIntersected(true);
-    } else if (!didCancel) {
-      observer = new IntersectionObserver(handleOnIntersect, ObserverParams);
-      observer.observe(current);
-    }
-    return () => {
-      didCancel = true;
-      if (observer) {
-        observer.unobserve(current);
-      }
-    };
-  }, [elRef]);
-  if (loading === 'eager') {
-    return [false];
-  }
-  return [hasIntersected];
-};
-
-function useMedia(query) {
-  return React.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(exports.Breakpoint.EXTRA_SMALL);
-  const screenSm = useScreenSize(exports.Breakpoint.SMALL);
-  const screenMd = useScreenSize(exports.Breakpoint.MEDIUM);
-  const screenLg = useScreenSize(exports.Breakpoint.LARGE);
-  const screenXl = useScreenSize(exports.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__*/React.forwardRef(({
   position = 'left',
@@ -2224,7 +2824,7 @@ const Drawer = ({
   const {
     isMobile
   } = useLayout();
-  const titleId = React.useId();
+  const titleId = reactId.useId();
   return /*#__PURE__*/jsxRuntime.jsx(Dimmer$1, {
     open: open,
     onClose: onClose,
@@ -2266,12 +2866,12 @@ Drawer.propTypes = {
   footerContent: PropTypes__default.default.node,
   /** The content to appear in the drawer header. */
   headerTitle: PropTypes__default.default.node,
+  /** The action to perform on close click. */
+  onClose: PropTypes__default.default.func,
   /** The status of Drawer either open or not. */
   open: PropTypes__default.default.bool,
   /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */
-  position: PropTypes__default.default.oneOf(['left', 'right', 'bottom']),
-  /** The action to perform on close click. */
-  onClose: PropTypes__default.default.func
+  position: PropTypes__default.default.oneOf(['left', 'right', 'bottom'])
 };
 Drawer.defaultProps = {
   children: null,
@@ -2444,49 +3044,16 @@ const BottomSheet$1 = props => {
           }), /*#__PURE__*/jsxRuntime.jsx(CloseButton, {
             size: "sm",
             className: "sr-only np-bottom-sheet--close-btn",
-            onClick: close
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsx("div", {
-          ref: contentReference,
-          style: setContentMaxHeight(),
-          className: "np-bottom-sheet--content",
-          children: props.children
-        })]
-      })
-    })
-  });
-};
-
-const Card = ({
-  className,
-  children = null,
-  id,
-  isDisabled = false,
-  isSmall = false,
-  onDismiss,
-  testId,
-  ...props
-}) => {
-  const closeButtonReference = React.useRef(null);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classNames__default.default('np-Card', {
-      'np-Card--small': !!isSmall,
-      'is-disabled': !!isDisabled
-    }, className),
-    id: id,
-    "data-testid": testId,
-    ...props,
-    children: [onDismiss && /*#__PURE__*/jsxRuntime.jsx(CloseButton, {
-      ref: closeButtonReference,
-      className: "np-Card-closeButton",
-      size: isSmall ? 'sm' : 'md',
-      isDisabled: isDisabled,
-      testId: "close-button",
-      onClick: e => {
-        stopPropagation$1(e);
-        onDismiss();
-      }
-    }), children]
+            onClick: close
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          ref: contentReference,
+          style: setContentMaxHeight(),
+          className: "np-bottom-sheet--content",
+          children: props.children
+        })]
+      })
+    })
   });
 };
 
@@ -2979,7 +3546,7 @@ const fallbackPlacements = {
   [exports.Position.LEFT]: [exports.Position.RIGHT, exports.Position.TOP, exports.Position.BOTTOM],
   [exports.Position.RIGHT]: [exports.Position.LEFT, exports.Position.TOP, exports.Position.BOTTOM]
 };
-const Panel = /*#__PURE__*/React.forwardRef(function Panel({
+const Panel = /*#__PURE__*/React.forwardRef(({
   arrow = false,
   flip = true,
   altAxis = false,
@@ -2990,7 +3557,7 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
   anchorRef,
   anchorWidth = false,
   ...rest
-}, reference) {
+}, reference) => {
   const [arrowElement, setArrowElement] = React.useState(null);
   const [popperElement, setPopperElement] = React.useState(null);
   const modifiers = [];
@@ -3068,7 +3635,7 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
       ...attributes.popper,
       className: classNames__default.default('np-panel', {
         'np-panel--open': open
-      }, rest.className),
+      }, rest['className']),
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         ref: reference
         /* eslint-disable-next-line react/forbid-dom-props */,
@@ -3087,7 +3654,7 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
 });
 var Panel$1 = Panel;
 
-const ResponsivePanel = /*#__PURE__*/React.forwardRef(function ResponsivePanel({
+const ResponsivePanel = /*#__PURE__*/React.forwardRef(({
   anchorRef,
   arrow = false,
   flip = true,
@@ -3096,7 +3663,7 @@ const ResponsivePanel = /*#__PURE__*/React.forwardRef(function ResponsivePanel({
   onClose,
   open = false,
   position = exports.Position.BOTTOM
-}, reference) {
+}, reference) => {
   const {
     isMobile
   } = useLayout();
@@ -4347,20 +4914,6 @@ DefinitionList.defaultProps = {
 };
 var DefinitionList$1 = DefinitionList;
 
-function Display({
-  as: Heading = 'h1',
-  type = exports.Typography.DISPLAY_LARGE,
-  children,
-  className,
-  id
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(Heading, {
-    id: id,
-    className: classNames__default.default(`np-text-${type}`, 'text-primary', className),
-    children: children
-  });
-}
-
 const DropFade = ({
   children,
   show
@@ -4449,84 +5002,6 @@ const Emphasis = ({
   }) : null;
 };
 
-function InlineAlert({
-  id,
-  type = 'neutral',
-  className,
-  children
-}) {
-  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 Label = ({
-  id,
-  htmlFor,
-  className,
-  children
-}) => {
-  return /*#__PURE__*/jsxRuntime.jsx("label", {
-    id: id,
-    htmlFor: htmlFor,
-    className: classNames__default.default('control-label d-flex flex-column gap-y-1 m-b-0', className),
-    children: children
-  });
-};
-
-const Field = ({
-  id,
-  label,
-  hint,
-  error,
-  className,
-  children
-}) => {
-  const hasError = Boolean(error);
-  const hasHint = Boolean(hint) && !hasError;
-  const labelId = React.useId();
-  const fallbackInputId = React.useId();
-  const inputId = id !== null ? id ?? fallbackInputId : undefined;
-  const descriptionId = React.useId();
-  return /*#__PURE__*/jsxRuntime.jsx(FieldLabelIdContextProvider, {
-    value: labelId,
-    children: /*#__PURE__*/jsxRuntime.jsx(InputIdContextProvider, {
-      value: inputId,
-      children: /*#__PURE__*/jsxRuntime.jsx(InputDescribedByProvider, {
-        value: hasError || hasHint ? descriptionId : undefined,
-        children: /*#__PURE__*/jsxRuntime.jsx(InputInvalidProvider, {
-          value: hasError,
-          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: classNames__default.default('form-group d-block', {
-              'has-error': hasError,
-              'has-info': hasHint
-            }, className),
-            children: [/*#__PURE__*/jsxRuntime.jsxs(Label, {
-              id: labelId,
-              htmlFor: inputId,
-              children: [label, children]
-            }), hasHint && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
-              type: exports.Sentiment.NEUTRAL,
-              id: descriptionId,
-              children: hint
-            }), hasError && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
-              type: exports.Sentiment.NEGATIVE,
-              id: descriptionId,
-              children: error
-            })]
-          })
-        })
-      })
-    })
-  });
-};
-
 const FlowHeader = /*#__PURE__*/React__namespace.forwardRef(({
   bottomContent,
   className,
@@ -4733,7 +5208,7 @@ const Tooltip = ({
   const anchorReference = React.useRef(null);
   const [arrowElement, setArrowElement] = React.useState(null);
   const [popperElement, setPopperElement] = React.useState(null);
-  const fallbackId = React.useId();
+  const fallbackId = reactId.useId();
   const tooltipId = id ?? fallbackId;
   const modifiers = [];
   modifiers.push({
@@ -4773,40 +5248,42 @@ const Tooltip = ({
       forceUpdate();
     }
   }, [open]);
-  return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    ref: anchorReference,
-    className: "tw-tooltip-container",
-    onMouseOver: () => setOpen(true),
-    onFocus: () => setOpen(true),
-    onMouseOut: () => setOpen(false),
-    onBlur: () => setOpen(false),
-    children: [children ? /*#__PURE__*/React.cloneElement(children, {
-      'aria-describedby': `${tooltipId}-tooltip`
-    }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
-      // @ts-expect-error
-      ref: setPopperElement,
-      className: classNames__default.default('np-tooltip', 'np-panel', open ? `np-panel--open np-tooltip--open` : null, className)
-      // eslint-disable-next-line react/forbid-dom-props
-      ,
-      style: {
-        ...styles.popper
-      },
-      ...attributes.popper,
-      "aria-hidden": !open,
-      role: "tooltip",
-      id: `${tooltipId}-tooltip`,
-      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "np-panel__content tooltip-inner",
-        children: [label, /*#__PURE__*/jsxRuntime.jsx("div", {
-          // @ts-expect-error
-          ref: setArrowElement,
-          className: classNames__default.default('np-panel__arrow')
-          // eslint-disable-next-line react/forbid-dom-props
-          ,
-          style: styles.arrow
-        })]
-      })
-    })]
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: /*#__PURE__*/jsxRuntime.jsxs("span", {
+      ref: anchorReference,
+      className: "tw-tooltip-container",
+      onMouseOver: () => setOpen(true),
+      onFocus: () => setOpen(true),
+      onMouseOut: () => setOpen(false),
+      onBlur: () => setOpen(false),
+      children: [children ? /*#__PURE__*/React.cloneElement(children, {
+        'aria-describedby': `${tooltipId}-tooltip`
+      }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
+        // @ts-expect-error
+        ref: setPopperElement,
+        className: classNames__default.default('np-tooltip', 'np-panel', open ? `np-panel--open np-tooltip--open` : null, className)
+        // eslint-disable-next-line react/forbid-dom-props
+        ,
+        style: {
+          ...styles.popper
+        },
+        ...attributes.popper,
+        "aria-hidden": !open,
+        role: "tooltip",
+        id: `${tooltipId}-tooltip`,
+        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "np-panel__content tooltip-inner",
+          children: [label, /*#__PURE__*/jsxRuntime.jsx("div", {
+            // @ts-expect-error
+            ref: setArrowElement,
+            className: classNames__default.default('np-panel__arrow')
+            // eslint-disable-next-line react/forbid-dom-props
+            ,
+            style: styles.arrow
+          })]
+        })
+      })]
+    })
   });
 };
 
@@ -5004,6 +5481,84 @@ const FlowNavigation = ({
   });
 };
 
+function InlineAlert({
+  id,
+  type = 'neutral',
+  className,
+  children
+}) {
+  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 Label = ({
+  id,
+  htmlFor,
+  className,
+  children
+}) => {
+  return /*#__PURE__*/jsxRuntime.jsx("label", {
+    id: id,
+    htmlFor: htmlFor,
+    className: classNames__default.default('control-label d-flex flex-column gap-y-1 m-b-0', className),
+    children: children
+  });
+};
+
+const Field = ({
+  id,
+  label,
+  hint,
+  error,
+  className,
+  children
+}) => {
+  const hasError = Boolean(error);
+  const hasHint = Boolean(hint) && !hasError;
+  const labelId = reactId.useId();
+  const fallbackInputId = reactId.useId(); // TODO: Use `React.useId()` when react>=18
+  const inputId = id !== null ? id ?? fallbackInputId : undefined;
+  const descriptionId = reactId.useId(); // TODO: Use `React.useId()` when react>=18
+  return /*#__PURE__*/jsxRuntime.jsx(FieldLabelIdContextProvider, {
+    value: labelId,
+    children: /*#__PURE__*/jsxRuntime.jsx(InputIdContextProvider, {
+      value: inputId,
+      children: /*#__PURE__*/jsxRuntime.jsx(InputDescribedByProvider, {
+        value: hasError || hasHint ? descriptionId : undefined,
+        children: /*#__PURE__*/jsxRuntime.jsx(InputInvalidProvider, {
+          value: hasError,
+          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: classNames__default.default('form-group d-block', {
+              'has-error': hasError,
+              'has-info': hasHint
+            }, className),
+            children: [/*#__PURE__*/jsxRuntime.jsxs(Label, {
+              id: labelId,
+              htmlFor: inputId,
+              children: [label, children]
+            }), hasHint && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
+              type: exports.Sentiment.NEUTRAL,
+              id: descriptionId,
+              children: hint
+            }), hasError && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
+              type: exports.Sentiment.NEGATIVE,
+              id: descriptionId,
+              children: error
+            })]
+          })
+        })
+      })
+    })
+  });
+};
+
 const HeaderAction = ({
   action
 }) => {
@@ -5043,70 +5598,31 @@ const HeaderAction = ({
 const Header = ({
   action,
   as = 'h5',
-  title,
-  className
-}) => {
-  if (!action) {
-    return /*#__PURE__*/jsxRuntime.jsx(Title, {
-      as: as,
-      type: exports.Typography.TITLE_GROUP,
-      className: classNames__default.default('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__*/jsxRuntime.jsxs("div", {
-    className: classNames__default.default('np-header', className),
-    children: [/*#__PURE__*/jsxRuntime.jsx(Title, {
-      as: as,
-      type: exports.Typography.TITLE_GROUP,
-      className: "np-header__title",
-      children: title
-    }), /*#__PURE__*/jsxRuntime.jsx(HeaderAction, {
-      action: action
-    })]
-  });
-};
-
-const EmptyTransparentImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
-const Image = ({
-  id,
-  src,
-  alt,
-  onLoad,
-  onError,
-  className,
-  loading,
-  stretch = true,
-  role,
-  shrink = true
-}) => {
-  const elementReference = React.useRef(null);
-  const [hasIntersected] = useHasIntersected({
-    elRef: elementReference,
-    loading
-  });
-  let imageSource = src;
-  let imageOnLoad = onLoad;
-  if (loading === 'lazy' && !hasIntersected) {
-    imageSource = EmptyTransparentImage;
-    imageOnLoad = undefined;
+  title,
+  className
+}) => {
+  if (!action) {
+    return /*#__PURE__*/jsxRuntime.jsx(Title, {
+      as: as,
+      type: exports.Typography.TITLE_GROUP,
+      className: classNames__default.default('np-header', 'np-header__title', className),
+      children: title
+    });
   }
-  return /*#__PURE__*/jsxRuntime.jsx("img", {
-    ref: elementReference,
-    id: id,
-    alt: alt,
-    src: imageSource,
-    className: classNames__default.default(['tw-image', {
-      'tw-image__stretch': stretch,
-      'tw-image__shrink': shrink
-    }, className]),
-    role: role,
-    onLoad: imageOnLoad,
-    onError: onError
+  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__*/jsxRuntime.jsxs("div", {
+    className: classNames__default.default('np-header', className),
+    children: [/*#__PURE__*/jsxRuntime.jsx(Title, {
+      as: as,
+      type: exports.Typography.TITLE_GROUP,
+      className: "np-header__title",
+      children: title
+    }), /*#__PURE__*/jsxRuntime.jsx(HeaderAction, {
+      action: action
+    })]
   });
 };
 
@@ -5139,7 +5655,7 @@ const Modal = ({
   const isCompact = checkSpecialClasses('compact');
   const noDivider = checkSpecialClasses('no-divider');
   const contentReference = React.useRef(null);
-  const titleId = React.useId();
+  const titleId = reactId.useId();
   return !isMedium ? /*#__PURE__*/jsxRuntime.jsx(Drawer$1, {
     open: open,
     headerTitle: title,
@@ -5652,9 +6168,10 @@ class WithDisplayFormat extends React.Component {
         return 'Backspace';
       }
       return triggerEvent.key;
+    } else {
+      // triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
+      return 'Paste';
     }
-    // triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
-    return 'Paste';
   };
   resetEvent = () => {
     this.setState({
@@ -5807,10 +6324,11 @@ class WithDisplayFormat extends React.Component {
       selectionEnd,
       pastedLength
     } = this.state;
-    const target = triggerEvent?.currentTarget;
     const cursorPosition = getCursorPositionAfterActionStroke(action, selectionStart, selectionEnd, displayPattern, pastedLength);
     setTimeout(() => {
-      target?.setSelectionRange(cursorPosition, cursorPosition);
+      if (triggerEvent) {
+        triggerEvent.target.setSelectionRange(cursorPosition, cursorPosition);
+      }
       this.setState({
         selectionStart: cursorPosition,
         selectionEnd: cursorPosition
@@ -6490,8 +7008,8 @@ function SelectInputOptions({
     }
   }, []);
   const showStatus = resultsEmpty;
-  const statusId = React.useId();
-  const listboxId = React.useId();
+  const statusId = reactId.useId();
+  const listboxId = reactId.useId();
   return /*#__PURE__*/jsxRuntime.jsxs(react$1.Listbox.Options, {
     as: SelectInputOptionsContainer,
     static: true,
@@ -6618,7 +7136,7 @@ function SelectInputGroupItemView({
   renderValue,
   needle
 }) {
-  const headerId = React.useId();
+  const headerId = reactId.useId();
   return (
     /*#__PURE__*/
     // An empty container may be rendered when no options match `needle`
@@ -8977,227 +9495,6 @@ const ProgressBar = ({
   });
 };
 
-const defaultPromoCardContext = {
-  state: '',
-  isDisabled: false,
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onChange: () => {}
-};
-/**
- * The PromoCard context object.
- */
-const PromoCardContext = /*#__PURE__*/React.createContext(defaultPromoCardContext);
-/**
- * A custom hook for accessing the PromoCard context object.
- *
- * The `usePromoCardContext` hook is used to access the PromoCard context object
- * from within a child PromoCard component. It throws an error if the context
- * object is not available, which can help with debugging and development.
- *
- * @returns {PromoCardContextType} - The PromoCard context object.
- */
-const usePromoCardContext = () => {
-  return React.useContext(PromoCardContext);
-};
-
-const PromoCardIndicator = ({
-  className,
-  children,
-  label,
-  icon,
-  isSmall = false,
-  testid,
-  ...rest
-}) => {
-  const isIconString = icon && typeof icon === 'string';
-  const IconComponent = isIconString && {
-    check: icons.Check,
-    arrow: icons.ArrowRight,
-    download: icons.Download
-  }[icon];
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classNames__default.default('np-Card-indicator', className),
-    "data-testid": testid,
-    ...rest,
-    children: [label && /*#__PURE__*/jsxRuntime.jsx(Body, {
-      as: "span",
-      type: exports.Typography.BODY_LARGE_BOLD,
-      className: "np-Card-indicatorText",
-      children: label
-    }), icon && /*#__PURE__*/jsxRuntime.jsx(Avatar, {
-      type: exports.AvatarType.ICON,
-      size: isSmall ? 40 : 56,
-      backgroundColor: "var(--Card-indicator-icon-background-color)",
-      className: "np-Card-indicatorIcon",
-      children: IconComponent ? /*#__PURE__*/jsxRuntime.jsx(IconComponent, {
-        size: 24,
-        "aria-hidden": "true"
-      }) : icon
-    }), children]
-  });
-};
-
-const PromoCard = /*#__PURE__*/React.forwardRef(({
-  className,
-  description,
-  defaultChecked,
-  download,
-  href,
-  hrefLang,
-  id,
-  headingLevel = 'h3',
-  imageAlt,
-  imageClass,
-  imageSource,
-  indicatorLabel,
-  indicatorIcon,
-  isChecked,
-  isDisabled,
-  onClick,
-  rel,
-  tabIndex,
-  target,
-  testId,
-  title,
-  type,
-  value,
-  isSmall,
-  useDisplayFont = true,
-  ...props
-}, reference) => {
-  // Set the `checked` state to the value of `defaultChecked` if it is truthy,
-  // or the value of `isChecked` if it is truthy, or `false` if neither
-  // is truthy.
-  const {
-    state,
-    onChange,
-    isDisabled: contextIsDisabled
-  } = usePromoCardContext();
-  const [checked, setChecked] = React.useState(type === 'checkbox' ? defaultChecked ?? isChecked ?? false : false);
-  const handleClick = () => {
-    if (type === 'radio') {
-      onChange(value || ''); // Update the context state for radio
-    } else if (type === 'checkbox') {
-      setChecked(!checked); // Update local state for checkbox
-    }
-  };
-  const fallbackId = React.useId();
-  const componentId = id || fallbackId;
-  // Set the icon to `'arrow'` if `href` is truthy and `type` is falsy, or
-  // `'download'` if `download` is truthy. If neither condition is true, set
-  // `icon` to `undefined`.
-  // Create a function to get icon type
-  const getIconType = () => {
-    if (indicatorIcon) {
-      return indicatorIcon;
-    }
-    if (download) {
-      return 'download';
-    }
-    if (href && !type) {
-      return 'arrow';
-    }
-    return undefined;
-  };
-  // Define all class names string based on the values of the `href`, `type`,
-  // `checked`, and `className` props.
-  const commonClasses = classNames__default.default({
-    'np-Card--promoCard': true,
-    'np-Card--checked': !href && type,
-    'np-Card--link': href && !type,
-    'is-checked': type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined
-  }, className);
-  // Object with common props that will be passed to the `Card` components
-  const commonProps = {
-    className: commonClasses,
-    id: componentId,
-    isDisabled: isDisabled || contextIsDisabled,
-    onClick,
-    ref: reference,
-    'data-testid': testId,
-    isSmall
-  };
-  // Object with Anchor props that will be passed to the `a` element. These
-  // won't be refurned if set to `isDisabled`
-  const anchorProps = href && !isDisabled ? {
-    download,
-    href: href || undefined,
-    hrefLang,
-    rel,
-    target
-  } : {};
-  // Object of all Checked props that will be passed to the root `Card` component
-  const checkedProps = (type === 'checkbox' || type === 'radio') && !href ? {
-    ...commonProps,
-    'aria-checked': type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,
-    'aria-describedby': `${componentId}-title`,
-    'aria-disabled': isDisabled,
-    'data-value': value ?? undefined,
-    role: type === 'checkbox' || type === 'radio' ? type : undefined,
-    onClick: handleClick,
-    onKeyDown: event => {
-      if (event.key === 'Enter' || event.key === ' ') {
-        handleClick();
-      }
-    },
-    ref: reference,
-    tabIndex: 0
-  } : {};
-  const getTitle = () => {
-    const titleContent = href && !type ? /*#__PURE__*/jsxRuntime.jsx("a", {
-      className: "np-Card-titleLink",
-      ...anchorProps,
-      children: title
-    }) : title;
-    const titleProps = {
-      id: `${componentId}-title`,
-      as: headingLevel,
-      className: 'np-Card-title'
-    };
-    return useDisplayFont ? /*#__PURE__*/jsxRuntime.jsx(Display, {
-      type: exports.Typography.DISPLAY_SMALL,
-      ...titleProps,
-      children: titleContent
-    }) : /*#__PURE__*/jsxRuntime.jsx(Title, {
-      type: exports.Typography.TITLE_SUBSECTION,
-      ...titleProps,
-      children: titleContent
-    });
-  };
-  React.useEffect(() => {
-    setChecked(defaultChecked ?? isChecked ?? false);
-  }, [defaultChecked, isChecked]);
-  return /*#__PURE__*/jsxRuntime.jsxs(Card, {
-    ...commonProps,
-    ...checkedProps,
-    ...props,
-    children: [(value === state || checked) && /*#__PURE__*/jsxRuntime.jsx("span", {
-      className: "np-Card-check",
-      children: /*#__PURE__*/jsxRuntime.jsx(icons.Check, {
-        size: 24,
-        "aria-hidden": "true"
-      })
-    }), getTitle(), /*#__PURE__*/jsxRuntime.jsx(Body, {
-      className: "np-Card-description",
-      children: description
-    }), imageSource && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames__default.default('np-Card-image', {
-        imageClass
-      }),
-      children: /*#__PURE__*/jsxRuntime.jsx(Image, {
-        src: imageSource,
-        alt: imageAlt || '',
-        loading: "lazy"
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx(PromoCardIndicator, {
-      label: indicatorLabel,
-      icon: getIconType(),
-      isSmall: isSmall
-    })]
-  });
-});
-var PromoCard$1 = /*#__PURE__*/React__namespace.default.memo(PromoCard);
-
 const PromoCardGroup = ({
   children,
   className,
@@ -12305,7 +12602,7 @@ const ProcessingStep = props => {
     "aria-hidden": isComplete,
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "droppable-card-content",
-      children: [/*#__PURE__*/jsxRuntime.jsx(ProcessIndicator, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(ProcessIndicator$1, {
         size: exports.Size.Small,
         status: processStatus,
         onAnimationCompleted: status => onAnimationCompleted(status)
@@ -13128,7 +13425,7 @@ const UploadItem = ({
     switch (status) {
       case exports.Status.PROCESSING:
       case exports.Status.PENDING:
-        processIndicator = /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator, {
+        processIndicator = /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator$1, {
           size: exports.Size.EXTRA_SMALL,
           status: exports.Status.PROCESSING
         });
@@ -13139,7 +13436,7 @@ const UploadItem = ({
         processIndicator = isModern ? /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
           size: exports.Size.SMALL,
           sentiment: exports.Sentiment.POSITIVE
-        }) : /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator, {
+        }) : /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator$1, {
           size: exports.Size.EXTRA_SMALL,
           status: exports.Status.SUCCEEDED
         });
@@ -13154,7 +13451,7 @@ const UploadItem = ({
       children: processIndicator
     }); // Scale down ProcessIndicator to be 20px*20px to match `icons`
   };
-  const getErrorMessage = () => typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);
+  const getErrorMessage = () => typeof error === 'object' && error.message || error || formatMessage(MESSAGES.uploadingFailed);
   const getDescription = () => {
     if (error || status === exports.Status.FAILED) {
       return /*#__PURE__*/jsxRuntime.jsx(Body, {
@@ -14498,11 +14795,12 @@ exports.Alert = Alert;
 exports.Avatar = Avatar;
 exports.AvatarWrapper = AvatarWrapper;
 exports.Badge = Badge;
-exports.BaseCard = Card;
+exports.BaseCard = Card$2;
 exports.Body = Body;
 exports.BottomSheet = BottomSheet$1;
 exports.Button = Button;
-exports.Card = Card$2;
+exports.Card = Card$1;
+exports.Carousel = Carousel;
 exports.Checkbox = Checkbox;
 exports.CheckboxButton = CheckboxButton$1;
 exports.CheckboxOption = CheckboxOption;
@@ -14550,7 +14848,7 @@ exports.Option = Option$2;
 exports.OverlayHeader = OverlayHeader$1;
 exports.PhoneNumberInput = PhoneNumberInput;
 exports.Popover = Popover$1;
-exports.ProcessIndicator = ProcessIndicator;
+exports.ProcessIndicator = ProcessIndicator$1;
 exports.Progress = Progress;
 exports.ProgressBar = ProgressBar;
 exports.PromoCard = PromoCard$1;