@transferwise/components 46.31.0 → 46.33.0

package/build/index.mjs

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import React__default, { forwardRef, cloneElement, useState, useEffect, useRef, useMemo, Component, useCallback, createContext, useContext, useImperativeHandle, createElement, PureComponent, createRef, isValidElement, Children, Fragment as Fragment$1 } from 'react';
+import React__default, { forwardRef, cloneElement, useState, useEffect, useRef, useMemo, Component, createContext, useContext, useCallback, useImperativeHandle, createElement, PureComponent, createRef, isValidElement, Children, Fragment as Fragment$1 } from 'react';
 import { useId } from '@radix-ui/react-id';
 import classNames from 'classnames';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1, Alert as Alert$1, ClockBorderless, Briefcase, Person, AlertCircleFill, ArrowLeft, AlertCircle, QuestionMarkCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ArrowRight, Download, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle } from '@transferwise/icons';
+import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1, Alert as Alert$1, ClockBorderless, Briefcase, Person, ArrowRight, Download, ChevronLeft, ChevronRight, AlertCircleFill, ArrowLeft, AlertCircle, QuestionMarkCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle } from '@transferwise/icons';
 import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
 import PropTypes from 'prop-types';
 import commonmark from 'commonmark';
@@ -136,10 +136,6 @@ function stopPropagation$1(event) {
     event.nativeEvent.stopImmediatePropagation();
   }
 }
-function getSimpleRandomId(prefix) {
-  const random = Math.ceil(Math.random() * 999999);
-  return `${prefix}${random}`;
-}
 
 /**
  * Defined in `Dimmer.less`
@@ -1478,9 +1474,719 @@ const Button = /*#__PURE__*/forwardRef(({
       className: "btn-loader"
     })]
   });
-});
+});
+
+const Card$2 = /*#__PURE__*/forwardRef(({
+  className,
+  children = null,
+  id,
+  isDisabled = false,
+  isSmall = false,
+  onDismiss,
+  testId,
+  ...props
+}, ref) => {
+  const closeButtonReference = useRef(null);
+  return /*#__PURE__*/jsxs("div", {
+    ref: ref,
+    className: classNames('np-Card', {
+      'np-Card--small': !!isSmall,
+      'is-disabled': !!isDisabled
+    }, className),
+    id: id,
+    "data-testid": testId,
+    ...props,
+    children: [onDismiss && /*#__PURE__*/jsx(CloseButton, {
+      ref: closeButtonReference,
+      className: "np-Card-closeButton",
+      size: isSmall ? 'sm' : 'md',
+      isDisabled: isDisabled,
+      testId: "close-button",
+      onClick: e => {
+        stopPropagation$1(e);
+        onDismiss();
+      }
+    }), children]
+  });
+});
+Card$2.displayName = 'Card';
+
+function Display({
+  as: Heading = 'h1',
+  type = Typography.DISPLAY_LARGE,
+  children,
+  className,
+  id
+}) {
+  return /*#__PURE__*/jsx(Heading, {
+    id: id,
+    className: classNames(`np-text-${type}`, 'text-primary', className),
+    children: children
+  });
+}
+
+const useConditionalListener = ({
+  attachListener,
+  callback,
+  eventType,
+  parent
+}) => {
+  useEffect(() => {
+    if (attachListener && !isUndefined(parent)) {
+      parent.addEventListener(eventType, callback, true);
+    }
+    return () => {
+      if (!isUndefined(parent)) {
+        parent.removeEventListener(eventType, callback, true);
+      }
+    };
+  }, [attachListener, callback, eventType, parent]);
+};
+
+const DirectionContext = /*#__PURE__*/createContext(Direction.LTR);
+const DirectionProvider = ({
+  direction,
+  children
+}) => {
+  return /*#__PURE__*/jsx(DirectionContext.Provider, {
+    value: direction,
+    children: children
+  });
+};
+
+const useDirection = () => {
+  const direction = useContext(DirectionContext);
+  return {
+    direction,
+    isRTL: direction === 'rtl'
+  };
+};
+
+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] = useState(false);
+  const {
+    current
+  } = elRef || {};
+  const isValidReference = () => {
+    return elRef && current;
+  };
+  const handleOnIntersect = (entries, observer) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        setHasIntersected(true);
+        observer.unobserve(current);
+      }
+    });
+  };
+  useEffect(() => {
+    let observer;
+    let didCancel = false;
+
+    // Check if window is define for SSR and Old browsers fallback
+    if (typeof window === 'undefined' || !window.IntersectionObserver || !isValidReference()) {
+      setHasIntersected(true);
+    } else if (!didCancel) {
+      observer = new IntersectionObserver(handleOnIntersect, ObserverParams);
+      observer.observe(current);
+    }
+    return () => {
+      didCancel = true;
+      if (observer) {
+        observer.unobserve(current);
+      }
+    };
+  }, [elRef]);
+  if (loading === 'eager') {
+    return [false];
+  }
+  return [hasIntersected];
+};
+
+// eslint-disable-next-line import/extensions
+function useMedia(query) {
+  return useSyncExternalStore(onStoreChange => {
+    const mediaQueryList = window.matchMedia(query);
+    mediaQueryList.addEventListener('change', onStoreChange);
+    return () => {
+      mediaQueryList.removeEventListener('change', onStoreChange);
+    };
+  }, () => typeof window !== 'undefined' ? window.matchMedia(query).matches : undefined, () => undefined);
+}
+
+function useScreenSize(size) {
+  return useMedia(`(min-width: ${size}px)`);
+}
+
+/**
+ * @deprecated Prefer `useScreenSize` instead.
+ */
+const useLayout = () => {
+  const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);
+  const screenSm = useScreenSize(Breakpoint.SMALL);
+  const screenMd = useScreenSize(Breakpoint.MEDIUM);
+  const screenLg = useScreenSize(Breakpoint.LARGE);
+  const screenXl = useScreenSize(Breakpoint.EXTRA_LARGE);
+  return {
+    isMobile: screenSm != null ? !screenSm : undefined,
+    isExtraSmall: screenXs,
+    isSmall: screenSm,
+    isMedium: screenMd,
+    isLarge: screenLg,
+    isExtraLarge: screenXl
+  };
+};
+
+const EmptyTransparentImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+const Image = ({
+  id,
+  src,
+  alt,
+  onLoad,
+  onError,
+  className,
+  loading,
+  stretch = true,
+  role,
+  shrink = true
+}) => {
+  const elementReference = useRef(null);
+  const [hasIntersected] = useHasIntersected({
+    elRef: elementReference,
+    loading
+  });
+  let imageSource = src;
+  let imageOnLoad = onLoad;
+  if (loading === 'lazy' && !hasIntersected) {
+    imageSource = EmptyTransparentImage;
+    imageOnLoad = undefined;
+  }
+  return /*#__PURE__*/jsx("img", {
+    ref: elementReference,
+    id: id,
+    alt: alt,
+    src: imageSource,
+    className: classNames(['tw-image', {
+      'tw-image__stretch': stretch,
+      'tw-image__shrink': shrink
+    }, className]),
+    role: role,
+    onLoad: imageOnLoad,
+    onError: onError
+  });
+};
+
+const defaultPromoCardContext = {
+  state: '',
+  isDisabled: false,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onChange: () => {}
+};
+/**
+ * The PromoCard context object.
+ */
+const PromoCardContext = /*#__PURE__*/createContext(defaultPromoCardContext);
+/**
+ * A custom hook for accessing the PromoCard context object.
+ *
+ * The `usePromoCardContext` hook is used to access the PromoCard context object
+ * from within a child PromoCard component. It throws an error if the context
+ * object is not available, which can help with debugging and development.
+ *
+ * @returns {PromoCardContextType} - The PromoCard context object.
+ */
+const usePromoCardContext = () => {
+  return useContext(PromoCardContext);
+};
+
+const PromoCardIndicator = ({
+  className,
+  children,
+  label,
+  icon,
+  isSmall = false,
+  testid,
+  ...rest
+}) => {
+  const isIconString = icon && typeof icon === 'string';
+  const IconComponent = isIconString && {
+    check: Check,
+    arrow: ArrowRight,
+    download: Download
+  }[icon];
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames('np-Card-indicator', className),
+    "data-testid": testid,
+    ...rest,
+    children: [label && /*#__PURE__*/jsx(Body, {
+      as: "span",
+      type: Typography.BODY_LARGE_BOLD,
+      className: "np-Card-indicatorText",
+      children: label
+    }), icon && /*#__PURE__*/jsx(Avatar, {
+      type: AvatarType.ICON,
+      size: isSmall ? 40 : 56,
+      backgroundColor: "var(--Card-indicator-icon-background-color)",
+      className: "np-Card-indicatorIcon",
+      children: IconComponent ? /*#__PURE__*/jsx(IconComponent, {
+        size: 24,
+        "aria-hidden": "true"
+      }) : icon
+    }), children]
+  });
+};
+
+const PromoCard = /*#__PURE__*/forwardRef(({
+  className,
+  description,
+  defaultChecked,
+  download,
+  href,
+  hrefLang,
+  id,
+  headingLevel = 'h3',
+  imageAlt,
+  imageClass,
+  imageSource,
+  indicatorLabel,
+  indicatorIcon,
+  isChecked,
+  isDisabled,
+  onClick,
+  onKeyDown,
+  rel,
+  tabIndex,
+  target,
+  testId,
+  title,
+  type,
+  value,
+  isSmall,
+  useDisplayFont = true,
+  anchorRef,
+  anchorId,
+  ...props
+}, ref) => {
+  // Set the `checked` state to the value of `defaultChecked` if it is truthy,
+  // or the value of `isChecked` if it is truthy, or `false` if neither
+  // is truthy.
+  const {
+    state,
+    onChange,
+    isDisabled: contextIsDisabled
+  } = usePromoCardContext();
+  const [checked, setChecked] = useState(type === 'checkbox' ? defaultChecked ?? isChecked ?? false : false);
+  const handleClick = () => {
+    if (type === 'radio') {
+      onChange(value || ''); // Update the context state for radio
+    } else if (type === 'checkbox') {
+      setChecked(!checked); // Update local state for checkbox
+    }
+  };
+  const fallbackId = useId();
+  const componentId = id || fallbackId;
+  // Set the icon to `'arrow'` if `href` is truthy and `type` is falsy, or
+  // `'download'` if `download` is truthy. If neither condition is true, set
+  // `icon` to `undefined`.
+  // Create a function to get icon type
+  const getIconType = () => {
+    if (indicatorIcon) {
+      return indicatorIcon;
+    }
+    if (download) {
+      return 'download';
+    }
+    if (href && !type) {
+      return 'arrow';
+    }
+    return undefined;
+  };
+  // Define all class names string based on the values of the `href`, `type`,
+  // `checked`, and `className` props.
+  const commonClasses = classNames({
+    'np-Card--promoCard': true,
+    'np-Card--checked': !href && type,
+    'np-Card--link': href && !type,
+    'is-checked': type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined
+  }, className);
+  // Object with common props that will be passed to the `Card` components
+  const commonProps = {
+    className: commonClasses,
+    id: componentId,
+    isDisabled: isDisabled || contextIsDisabled,
+    onClick,
+    onKeyDown,
+    ref,
+    'data-testid': testId,
+    isSmall
+  };
+  // Object with Anchor props that will be passed to the `a` element. These
+  // won't be refurned if set to `isDisabled`
+  const anchorProps = href && !isDisabled ? {
+    download,
+    href: href || undefined,
+    hrefLang,
+    rel,
+    target,
+    ref: anchorRef,
+    id: anchorId
+  } : {};
+  // Object of all Checked props that will be passed to the root `Card` component
+  const checkedProps = (type === 'checkbox' || type === 'radio') && !href ? {
+    ...commonProps,
+    'aria-checked': type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,
+    'aria-describedby': `${componentId}-title`,
+    'aria-disabled': isDisabled,
+    'data-value': value ?? undefined,
+    role: type === 'checkbox' || type === 'radio' ? type : undefined,
+    onClick: handleClick,
+    onKeyDown: event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        handleClick();
+      }
+    },
+    ref,
+    tabIndex: 0
+  } : {};
+  const getTitle = () => {
+    const titleContent = href && !type ? /*#__PURE__*/jsx("a", {
+      className: "np-Card-titleLink",
+      ...anchorProps,
+      children: title
+    }) : title;
+    const titleProps = {
+      id: `${componentId}-title`,
+      as: headingLevel,
+      className: 'np-Card-title'
+    };
+    return useDisplayFont ? /*#__PURE__*/jsx(Display, {
+      type: Typography.DISPLAY_SMALL,
+      ...titleProps,
+      children: titleContent
+    }) : /*#__PURE__*/jsx(Title, {
+      type: Typography.TITLE_SUBSECTION,
+      ...titleProps,
+      children: titleContent
+    });
+  };
+  useEffect(() => {
+    setChecked(defaultChecked ?? isChecked ?? false);
+  }, [defaultChecked, isChecked]);
+  return /*#__PURE__*/jsxs(Card$2, {
+    ...commonProps,
+    ...checkedProps,
+    ...props,
+    children: [(value === state || checked) && /*#__PURE__*/jsx("span", {
+      className: "np-Card-check",
+      children: /*#__PURE__*/jsx(Check, {
+        size: 24,
+        "aria-hidden": "true"
+      })
+    }), getTitle(), /*#__PURE__*/jsx(Body, {
+      className: "np-Card-description",
+      children: description
+    }), imageSource && /*#__PURE__*/jsx("div", {
+      className: classNames('np-Card-image', {
+        imageClass
+      }),
+      children: /*#__PURE__*/jsx(Image, {
+        src: imageSource,
+        alt: imageAlt || '',
+        loading: "lazy"
+      })
+    }), /*#__PURE__*/jsx(PromoCardIndicator, {
+      label: indicatorLabel,
+      icon: getIconType(),
+      isSmall: isSmall
+    })]
+  });
+});
+var PromoCard$1 = /*#__PURE__*/React__default.memo(PromoCard);
+
+const LEFT_SCROLL_OFFSET = 8;
+const Carousel = ({
+  header,
+  className,
+  cards,
+  onClick
+}) => {
+  const [scrollPosition, setScrollPosition] = useState(0);
+  const [previousScrollPosition, setPreviousScrollPosition] = useState(0);
+  const [scrollIsAtEnd, setScrollIsAtEnd] = useState(false);
+  const [visibleCardOnMobileView, setVisibleCardOnMobileView] = useState('');
+  const carouselElementRef = useRef(null);
+  const carouselCardsRef = useRef([]);
+  const isLeftActionButtonEnabled = scrollPosition > LEFT_SCROLL_OFFSET;
+  const areActionButtonsEnabled = isLeftActionButtonEnabled || !scrollIsAtEnd;
+  const [focusedCard, setFocusedCard] = useState(cards?.[0]?.id);
+  const updateScrollButtonsState = () => {
+    if (carouselElementRef.current) {
+      const {
+        scrollWidth,
+        offsetWidth
+      } = carouselElementRef.current;
+      const scrollAtEnd = scrollWidth - offsetWidth <= scrollPosition + LEFT_SCROLL_OFFSET;
+      setScrollIsAtEnd(scrollAtEnd);
+    }
+    const scrollDirecton = scrollPosition > previousScrollPosition ? 'right' : 'left';
+    const cardsInFullViewIds = [];
+    carouselCardsRef.current.forEach(card => {
+      if (isVisible(carouselElementRef.current, card.cardElement)) {
+        // eslint-disable-next-line functional/immutable-data
+        cardsInFullViewIds.push(card.cardElement.getAttribute('id') ?? '');
+      }
+    });
+    if (cardsInFullViewIds.length >= 1) {
+      const visibleCardIndex = scrollDirecton === 'right' ? cardsInFullViewIds.length - 1 : 0;
+      const visibleCardId = cardsInFullViewIds[visibleCardIndex];
+      setVisibleCardOnMobileView(visibleCardId);
+      setFocusedCard(visibleCardId);
+    }
+    setPreviousScrollPosition(scrollPosition);
+  };
+  const scrollCarousel = (direction = 'right') => {
+    if (carouselElementRef.current) {
+      const {
+        scrollWidth
+      } = carouselElementRef.current;
+      const cardWidth = scrollWidth / carouselCardsRef.current.length;
+      const res = Math.floor(cardWidth - cardWidth * 0.05);
+      carouselElementRef.current.scrollBy({
+        left: direction === 'right' ? res : -res,
+        behavior: 'smooth'
+      });
+    }
+  };
+  const handleOnKeyDown = (event, index) => {
+    if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+      const nextIndex = event.key === 'ArrowRight' ? index + 1 : index - 1;
+      const nextCard = cards[nextIndex];
+      if (nextCard) {
+        const ref = carouselCardsRef.current[nextIndex];
+        if (ref.type === 'promo') {
+          ref.anchorElement?.focus();
+        } 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);
+  };
+  useEffect(() => {
+    updateScrollButtonsState();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [scrollPosition]);
+  useEffect(() => {
+    window.addEventListener('resize', updateScrollButtonsState);
+    return () => {
+      window.removeEventListener('resize', updateScrollButtonsState);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const addElementToCardsRefArray = (index, ref) => {
+    if (ref) {
+      // eslint-disable-next-line functional/immutable-data
+      carouselCardsRef.current[index] = {
+        type: ref.type ?? carouselCardsRef.current?.[index]?.type,
+        cardElement: ref.cardElement ?? carouselCardsRef.current?.[index]?.cardElement,
+        anchorElement: ref.anchorElement ?? carouselCardsRef.current?.[index]?.anchorElement
+      };
+    }
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames('carousel-wrapper', className),
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "d-flex justify-content-between carousel__header",
+      children: [typeof header === 'string' ? /*#__PURE__*/jsx(Title, {
+        as: "span",
+        type: "title-body",
+        children: header
+      }) : header, areActionButtonsEnabled ? /*#__PURE__*/jsxs("div", {
+        className: "hidden-xs",
+        children: [/*#__PURE__*/jsx(ActionButton, {
+          className: "carousel__scroll-button",
+          tabIndex: -1,
+          priority: "secondary",
+          disabled: !isLeftActionButtonEnabled,
+          "aria-hidden": "true",
+          "data-testid": "scroll-carousel-left",
+          onClick: () => scrollCarousel('left'),
+          children: /*#__PURE__*/jsx(ChevronLeft, {})
+        }), /*#__PURE__*/jsx(ActionButton, {
+          tabIndex: -1,
+          className: "carousel__scroll-button m-l-1",
+          priority: "secondary",
+          "aria-hidden": "true",
+          "data-testid": "scroll-carousel-right",
+          disabled: scrollIsAtEnd,
+          onClick: () => scrollCarousel(),
+          children: /*#__PURE__*/jsx(ChevronRight, {})
+        })]
+      }) : null]
+    }), /*#__PURE__*/jsx("div", {
+      ref: carouselElementRef,
+      tabIndex: -1,
+      role: "list",
+      className: "carousel",
+      onScroll: event => {
+        const target = event.target;
+        setScrollPosition(target.scrollLeft);
+      },
+      children: cards?.map((card, index) => {
+        const sharedProps = {
+          id: card.id,
+          className: classNames('carousel__card', {
+            'carousel__card--focused': card.id === focusedCard
+          }),
+          onClick: () => {
+            card.onClick?.();
+            onClick?.(card.id);
+          },
+          onFocus: event => {
+            scrollCardIntoView(event.currentTarget, card);
+          }
+        };
+        const cardContent = card.type !== 'promo' ? /*#__PURE__*/jsx("div", {
+          id: `${card.id}-content`,
+          className: classNames('carousel__card-content', {
+            [card.className ?? '']: !!card.className
+          })
+          // eslint-disable-next-line react/forbid-dom-props
+          ,
+          style: card.styles,
+          children: card.content
+        }) : null;
+        if (card.type === 'button') {
+          return /*#__PURE__*/jsx("div", {
+            "aria-labelledby": `${card.id}-content`,
+            role: "listitem",
+            children: /*#__PURE__*/jsx("div", {
+              ...sharedProps,
+              ref: el => {
+                if (el) {
+                  // eslint-disable-next-line functional/immutable-data
+                  carouselCardsRef.current[index] = {
+                    type: 'default',
+                    cardElement: el
+                  };
+                }
+              },
+              role: "button",
+              tabIndex: 0,
+              onKeyDown: event => handleOnKeyDown(event, index),
+              children: cardContent
+            })
+          }, card.id);
+        }
+        if (card.type === 'promo') {
+          return /*#__PURE__*/jsx("div", {
+            id: card.id,
+            role: "listitem",
+            "aria-labelledby": `${card.id}-anchor`,
+            children: /*#__PURE__*/jsx(PromoCard$1, {
+              ...card,
+              type: undefined,
+              ...sharedProps,
+              ref: el => {
+                if (el) {
+                  addElementToCardsRefArray(index, {
+                    type: 'promo',
+                    cardElement: el
+                  });
+                }
+              },
+              anchorRef: el => {
+                if (el) {
+                  addElementToCardsRefArray(index, {
+                    type: 'promo',
+                    anchorElement: el
+                  });
+                }
+              },
+              anchorId: `${card.id}-anchor`,
+              onKeyDown: event => handleOnKeyDown(event, index)
+            })
+          }, card.id);
+        }
+        return /*#__PURE__*/jsx("div", {
+          "aria-labelledby": `${card.id}-content`,
+          role: "listitem",
+          children: /*#__PURE__*/jsx("a", {
+            ...sharedProps,
+            ref: el => {
+              if (el) {
+                // eslint-disable-next-line functional/immutable-data
+                carouselCardsRef.current[index] = {
+                  type: 'default',
+                  cardElement: el
+                };
+              }
+            },
+            href: card.href,
+            rel: "noreferrer",
+            onKeyDown: event => handleOnKeyDown(event, index),
+            children: cardContent
+          })
+        }, card.id);
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: "visible-xs",
+      children: /*#__PURE__*/jsx("div", {
+        className: "carousel__indicators",
+        children: cards?.map((card, index) => /*#__PURE__*/jsx("button", {
+          "data-testid": `${card.id}-indicator`,
+          tabIndex: -1,
+          "aria-hidden": true,
+          type: "button",
+          className: classNames('carousel__indicator', {
+            'carousel__indicator--selected': card.id === visibleCardOnMobileView
+          }),
+          onClick: () => {
+            scrollCardIntoView(carouselCardsRef.current[index].cardElement, card);
+          }
+        }, `${card.id}-indicator`))
+      })
+    })]
+  });
+};
+const isVisible = (container, el) => {
+  const cWidth = container.offsetWidth;
+  const cScrollOffset = container.scrollLeft;
+  const elemLeft = el.offsetLeft - container.offsetLeft;
+  const elemRight = elemLeft + el.offsetWidth;
+  return elemLeft >= cScrollOffset && elemRight <= cScrollOffset + cWidth;
+};
 
-const Card$1 = /*#__PURE__*/forwardRef((props, reference) => {
+const Card = /*#__PURE__*/forwardRef((props, reference) => {
   const {
     'aria-label': ariaLabel,
     as: Element,
@@ -1531,7 +2237,7 @@ const Card$1 = /*#__PURE__*/forwardRef((props, reference) => {
 const hasChildren = ({
   children
 }) => children;
-Card$1.propTypes = {
+Card.propTypes = {
   'aria-label': PropTypes.string,
   as: PropTypes.string,
   isExpanded: requiredIf(PropTypes.bool, hasChildren),
@@ -1544,7 +2250,7 @@ Card$1.propTypes = {
   className: PropTypes.string,
   'data-testid': PropTypes.string
 };
-Card$1.defaultProps = {
+Card.defaultProps = {
   'aria-label': undefined,
   as: 'div',
   children: null,
@@ -1552,7 +2258,7 @@ Card$1.defaultProps = {
   className: null,
   'data-testid': null
 };
-var Card$2 = Card$1;
+var Card$1 = Card;
 
 const CheckboxButton = /*#__PURE__*/forwardRef(({
   checked,
@@ -2038,135 +2744,6 @@ const DimmerContentWrapper = ({
 };
 var Dimmer$1 = withNextPortalWrapper(Dimmer);
 
-const useConditionalListener = ({
-  attachListener,
-  callback,
-  eventType,
-  parent
-}) => {
-  useEffect(() => {
-    if (attachListener && !isUndefined(parent)) {
-      parent.addEventListener(eventType, callback, true);
-    }
-    return () => {
-      if (!isUndefined(parent)) {
-        parent.removeEventListener(eventType, callback, true);
-      }
-    };
-  }, [attachListener, callback, eventType, parent]);
-};
-
-const DirectionContext = /*#__PURE__*/createContext(Direction.LTR);
-const DirectionProvider = ({
-  direction,
-  children
-}) => {
-  return /*#__PURE__*/jsx(DirectionContext.Provider, {
-    value: direction,
-    children: children
-  });
-};
-
-const useDirection = () => {
-  const direction = useContext(DirectionContext);
-  return {
-    direction,
-    isRTL: direction === 'rtl'
-  };
-};
-
-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] = useState(false);
-  const {
-    current
-  } = elRef || {};
-  const isValidReference = () => {
-    return elRef && current;
-  };
-  const handleOnIntersect = (entries, observer) => {
-    entries.forEach(entry => {
-      if (entry.isIntersecting) {
-        setHasIntersected(true);
-        observer.unobserve(current);
-      }
-    });
-  };
-  useEffect(() => {
-    let observer;
-    let didCancel = false;
-
-    // Check if window is define for SSR and Old browsers fallback
-    if (typeof window === 'undefined' || !window.IntersectionObserver || !isValidReference()) {
-      setHasIntersected(true);
-    } else if (!didCancel) {
-      observer = new IntersectionObserver(handleOnIntersect, ObserverParams);
-      observer.observe(current);
-    }
-    return () => {
-      didCancel = true;
-      if (observer) {
-        observer.unobserve(current);
-      }
-    };
-  }, [elRef]);
-  if (loading === 'eager') {
-    return [false];
-  }
-  return [hasIntersected];
-};
-
-// eslint-disable-next-line import/extensions
-function useMedia(query) {
-  return useSyncExternalStore(onStoreChange => {
-    const mediaQueryList = window.matchMedia(query);
-    mediaQueryList.addEventListener('change', onStoreChange);
-    return () => {
-      mediaQueryList.removeEventListener('change', onStoreChange);
-    };
-  }, () => typeof window !== 'undefined' ? window.matchMedia(query).matches : undefined, () => undefined);
-}
-
-function useScreenSize(size) {
-  return useMedia(`(min-width: ${size}px)`);
-}
-
-/**
- * @deprecated Prefer `useScreenSize` instead.
- */
-const useLayout = () => {
-  const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);
-  const screenSm = useScreenSize(Breakpoint.SMALL);
-  const screenMd = useScreenSize(Breakpoint.MEDIUM);
-  const screenLg = useScreenSize(Breakpoint.LARGE);
-  const screenXl = useScreenSize(Breakpoint.EXTRA_LARGE);
-  return {
-    isMobile: screenSm != null ? !screenSm : undefined,
-    isExtraSmall: screenXs,
-    isSmall: screenSm,
-    isMedium: screenMd,
-    isLarge: screenLg,
-    isExtraLarge: screenXl
-  };
-};
-
 const EXIT_ANIMATION = 350;
 const SlidingPanel = /*#__PURE__*/forwardRef(({
   position = 'left',
@@ -2446,39 +3023,6 @@ const BottomSheet$1 = props => {
   });
 };
 
-const Card = ({
-  className,
-  children = null,
-  id,
-  isDisabled = false,
-  isSmall = false,
-  onDismiss,
-  testId,
-  ...props
-}) => {
-  const closeButtonReference = useRef(null);
-  return /*#__PURE__*/jsxs("div", {
-    className: classNames('np-Card', {
-      'np-Card--small': !!isSmall,
-      'is-disabled': !!isDisabled
-    }, className),
-    id: id,
-    "data-testid": testId,
-    ...props,
-    children: [onDismiss && /*#__PURE__*/jsx(CloseButton, {
-      ref: closeButtonReference,
-      className: "np-Card-closeButton",
-      size: isSmall ? 'sm' : 'md',
-      isDisabled: isDisabled,
-      testId: "close-button",
-      onClick: e => {
-        stopPropagation$1(e);
-        onDismiss();
-      }
-    }), children]
-  });
-};
-
 function CriticalCommsBanner({
   title,
   subtitle,
@@ -4336,20 +4880,6 @@ DefinitionList.defaultProps = {
 };
 var DefinitionList$1 = DefinitionList;
 
-function Display({
-  as: Heading = 'h1',
-  type = Typography.DISPLAY_LARGE,
-  children,
-  className,
-  id
-}) {
-  return /*#__PURE__*/jsx(Heading, {
-    id: id,
-    className: classNames(`np-text-${type}`, 'text-primary', className),
-    children: children
-  });
-}
-
 const DropFade = ({
   children,
   show
@@ -5062,45 +5592,6 @@ const Header = ({
   });
 };
 
-const EmptyTransparentImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
-const Image = ({
-  id,
-  src,
-  alt,
-  onLoad,
-  onError,
-  className,
-  loading,
-  stretch = true,
-  role,
-  shrink = true
-}) => {
-  const elementReference = useRef(null);
-  const [hasIntersected] = useHasIntersected({
-    elRef: elementReference,
-    loading
-  });
-  let imageSource = src;
-  let imageOnLoad = onLoad;
-  if (loading === 'lazy' && !hasIntersected) {
-    imageSource = EmptyTransparentImage;
-    imageOnLoad = undefined;
-  }
-  return /*#__PURE__*/jsx("img", {
-    ref: elementReference,
-    id: id,
-    alt: alt,
-    src: imageSource,
-    className: classNames(['tw-image', {
-      'tw-image__stretch': stretch,
-      'tw-image__shrink': shrink
-    }, className]),
-    role: role,
-    onLoad: imageOnLoad,
-    onError: onError
-  });
-};
-
 // TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
 var InfoPresentation;
 (function (InfoPresentation) {
@@ -6935,9 +7426,8 @@ const formatAmountIfSet = ({
 }) => {
   if (maxLengthOverride) {
     return amount != null ? String(amount) : '';
-  } else {
-    return typeof amount === 'number' ? formatAmount(amount, currency, locale) : '';
   }
+  return typeof amount === 'number' ? formatAmount(amount, currency, locale) : '';
 };
 const parseNumber = ({
   amount,
@@ -6995,7 +7485,7 @@ class MoneyInput extends Component {
       key,
       ctrlKey
     } = event;
-    const isNumberKey = isNumber(parseInt(key, 10));
+    const isNumberKey = isNumber(Number.parseInt(key, 10));
     return isNumberKey || metaKey || ctrlKey || allowedInputKeys.has(key);
   };
   handleKeyDown = event => {
@@ -7011,7 +7501,7 @@ class MoneyInput extends Component {
     const parsed = isEmpty(paste) ? null : parseNumber({
       amount: paste,
       currency: this.props.selectedCurrency.currency,
-      locale: locale,
+      locale,
       maxLengthOverride: this.props.maxLengthOverride
     });
     if (isNumberOrNull(parsed)) {
@@ -7019,7 +7509,7 @@ class MoneyInput extends Component {
         formattedAmount: formatAmountIfSet({
           amount: parsed,
           currency: this.props.selectedCurrency.currency,
-          locale: locale,
+          locale,
           maxLengthOverride: this.props.maxLengthOverride
         })
       });
@@ -7116,15 +7606,17 @@ class MoneyInput extends Component {
   style = className => this.props.classNames[className] || className;
   render() {
     const {
+      inputAttributes,
+      id: amountInputId,
+      'aria-labelledby': ariaLabelledByProp,
       selectedCurrency,
       onCurrencyChange,
       size,
       addon,
-      id,
-      'aria-labelledby': ariaLabelledBy,
       selectProps,
       maxLengthOverride
     } = this.props;
+    const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes?.['aria-labelledby'];
     const selectOptions = this.getSelectOptions();
     const hasSingleCurrency = () => {
       if (selectOptions.length !== 0) {
@@ -7145,10 +7637,12 @@ class MoneyInput extends Component {
     const isFixedCurrency = !this.state.searchQuery && hasSingleCurrency() || !onCurrencyChange;
     const disabled = !this.props.onAmountChange;
     return /*#__PURE__*/jsxs("div", {
+      role: "group",
+      ...inputAttributes,
       "aria-labelledby": ariaLabelledBy,
       className: classNames(this.style('tw-money-input'), this.style('input-group'), this.style(`input-group-${size}`)),
       children: [/*#__PURE__*/jsx(Input, {
-        id: id,
+        id: amountInputId,
         value: this.state.formattedAmount,
         inputMode: "decimal",
         disabled: disabled,
@@ -7249,7 +7743,7 @@ function currencyOptionFitsQuery(option, query) {
   return contains(option.label, query) || contains(option.searchable, query) || contains(option.note, query);
 }
 function contains(property, query) {
-  return property && property.toLowerCase().includes(query.toLowerCase());
+  return property?.toLowerCase().includes(query.toLowerCase());
 }
 function sortOptionsLabelsToFirst(options, query) {
   return [...options].sort((first, second) => {
@@ -7267,7 +7761,9 @@ function sortOptionsLabelsToFirst(options, query) {
     return 0;
   });
 }
-var MoneyInput$1 = injectIntl(MoneyInput);
+var MoneyInput$1 = injectIntl(withInputAttributes(MoneyInput, {
+  nonLabelable: true
+}));
 
 const NavigationOptionList = ({
   children
@@ -8788,7 +9284,7 @@ const defaultSelectProps = {};
 const defaultDisabledCountries = [];
 const PhoneNumberInput = ({
   id,
-  'aria-labelledby': ariaLabelledBy,
+  'aria-labelledby': ariaLabelledByProp,
   required,
   disabled,
   initialValue,
@@ -8802,6 +9298,10 @@ const PhoneNumberInput = ({
   selectProps = defaultSelectProps,
   disabledCountries = defaultDisabledCountries
 }) => {
+  const inputAttributes = useInputAttributes({
+    nonLabelable: true
+  });
+  const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];
   const {
     locale,
     formatMessage
@@ -8858,6 +9358,8 @@ const PhoneNumberInput = ({
     setBroadcastedValue(internalValue);
   }, [onChange, broadcastedValue, internalValue]);
   return /*#__PURE__*/jsxs("div", {
+    role: "group",
+    ...inputAttributes,
     "aria-labelledby": ariaLabelledBy,
     className: "tw-telephone",
     children: [/*#__PURE__*/jsx("div", {
@@ -8970,227 +9472,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__*/createContext(defaultPromoCardContext);
-/**
- * A custom hook for accessing the PromoCard context object.
- *
- * The `usePromoCardContext` hook is used to access the PromoCard context object
- * from within a child PromoCard component. It throws an error if the context
- * object is not available, which can help with debugging and development.
- *
- * @returns {PromoCardContextType} - The PromoCard context object.
- */
-const usePromoCardContext = () => {
-  return useContext(PromoCardContext);
-};
-
-const PromoCardIndicator = ({
-  className,
-  children,
-  label,
-  icon,
-  isSmall = false,
-  testid,
-  ...rest
-}) => {
-  const isIconString = icon && typeof icon === 'string';
-  const IconComponent = isIconString && {
-    check: Check,
-    arrow: ArrowRight,
-    download: Download
-  }[icon];
-  return /*#__PURE__*/jsxs("div", {
-    className: classNames('np-Card-indicator', className),
-    "data-testid": testid,
-    ...rest,
-    children: [label && /*#__PURE__*/jsx(Body, {
-      as: "span",
-      type: Typography.BODY_LARGE_BOLD,
-      className: "np-Card-indicatorText",
-      children: label
-    }), icon && /*#__PURE__*/jsx(Avatar, {
-      type: AvatarType.ICON,
-      size: isSmall ? 40 : 56,
-      backgroundColor: "var(--Card-indicator-icon-background-color)",
-      className: "np-Card-indicatorIcon",
-      children: IconComponent ? /*#__PURE__*/jsx(IconComponent, {
-        size: 24,
-        "aria-hidden": "true"
-      }) : icon
-    }), children]
-  });
-};
-
-const PromoCard = /*#__PURE__*/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] = useState(type === 'checkbox' ? defaultChecked ?? isChecked ?? false : false);
-  const handleClick = () => {
-    if (type === 'radio') {
-      onChange(value || ''); // Update the context state for radio
-    } else if (type === 'checkbox') {
-      setChecked(!checked); // Update local state for checkbox
-    }
-  };
-  const fallbackId = useId();
-  const componentId = id || fallbackId;
-  // Set the icon to `'arrow'` if `href` is truthy and `type` is falsy, or
-  // `'download'` if `download` is truthy. If neither condition is true, set
-  // `icon` to `undefined`.
-  // Create a function to get icon type
-  const getIconType = () => {
-    if (indicatorIcon) {
-      return indicatorIcon;
-    }
-    if (download) {
-      return 'download';
-    }
-    if (href && !type) {
-      return 'arrow';
-    }
-    return undefined;
-  };
-  // Define all class names string based on the values of the `href`, `type`,
-  // `checked`, and `className` props.
-  const commonClasses = classNames({
-    'np-Card--promoCard': true,
-    'np-Card--checked': !href && type,
-    'np-Card--link': href && !type,
-    'is-checked': type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined
-  }, className);
-  // Object with common props that will be passed to the `Card` components
-  const commonProps = {
-    className: commonClasses,
-    id: componentId,
-    isDisabled: isDisabled || contextIsDisabled,
-    onClick,
-    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__*/jsx("a", {
-      className: "np-Card-titleLink",
-      ...anchorProps,
-      children: title
-    }) : title;
-    const titleProps = {
-      id: `${componentId}-title`,
-      as: headingLevel,
-      className: 'np-Card-title'
-    };
-    return useDisplayFont ? /*#__PURE__*/jsx(Display, {
-      type: Typography.DISPLAY_SMALL,
-      ...titleProps,
-      children: titleContent
-    }) : /*#__PURE__*/jsx(Title, {
-      type: Typography.TITLE_SUBSECTION,
-      ...titleProps,
-      children: titleContent
-    });
-  };
-  useEffect(() => {
-    setChecked(defaultChecked ?? isChecked ?? false);
-  }, [defaultChecked, isChecked]);
-  return /*#__PURE__*/jsxs(Card, {
-    ...commonProps,
-    ...checkedProps,
-    ...props,
-    children: [(value === state || checked) && /*#__PURE__*/jsx("span", {
-      className: "np-Card-check",
-      children: /*#__PURE__*/jsx(Check, {
-        size: 24,
-        "aria-hidden": "true"
-      })
-    }), getTitle(), /*#__PURE__*/jsx(Body, {
-      className: "np-Card-description",
-      children: description
-    }), imageSource && /*#__PURE__*/jsx("div", {
-      className: classNames('np-Card-image', {
-        imageClass
-      }),
-      children: /*#__PURE__*/jsx(Image, {
-        src: imageSource,
-        alt: imageAlt || '',
-        loading: "lazy"
-      })
-    }), /*#__PURE__*/jsx(PromoCardIndicator, {
-      label: indicatorLabel,
-      icon: getIconType(),
-      isSmall: isSmall
-    })]
-  });
-});
-var PromoCard$1 = /*#__PURE__*/React__default.memo(PromoCard);
-
 const PromoCardGroup = ({
   children,
   className,
@@ -9811,6 +10092,7 @@ function Select({
   dropdownProps,
   buttonProps
 }) {
+  const inputAttributes = useInputAttributes();
   const {
     formatMessage
   } = useIntl();
@@ -9830,7 +10112,6 @@ function Select({
   const optionsListReference = useRef(null);
   const isSearchEnabled = !!onSearchChange || !!search;
   const isDropdownAutoWidth = dropdownWidth == null;
-  const fallbackButtonId = useMemo(() => getSimpleRandomId('np-select-'), []);
   const options = useMemo(() => {
     if (!search || !searchValue) {
       return defaultOptions;
@@ -9838,14 +10119,14 @@ function Select({
     return defaultOptions.filter(isSearchableOption).filter(option => {
       if (typeof search === 'function') {
         return search(option, searchValue);
-      } else {
-        return defaultFilterFunction(option, searchValue);
       }
+      return defaultFilterFunction(option, searchValue);
     });
   }, [defaultOptions, search, searchValue]);
   const selectableOptions = useMemo(() => options.filter(isActionableOption), [options]);
   const focusedOption = selectableOptions[keyboardFocusedOptionIndex];
-  const computedId = id || fallbackButtonId;
+  const fallbackButtonId = useId();
+  const computedId = id || inputAttributes.id || fallbackButtonId;
   const listboxId = `${computedId}-listbox`;
   const searchBoxId = `${computedId}-searchbox`;
   const {
@@ -9976,7 +10257,7 @@ function Select({
   useEffect(() => {
     if (open) {
       if (!isMobile || searchValue) {
-        if (isSearchEnabled && !!searchBoxReference.current) {
+        if (isSearchEnabled && searchBoxReference.current) {
           searchBoxReference.current.focus();
         }
         if (!isSearchEnabled && optionsListReference.current && (previousKeyboardFocusedOptionIndex.current == null || Number.isNaN(previousKeyboardFocusedOptionIndex.current))) {
@@ -10162,6 +10443,7 @@ function Select({
     onBlur: handleOnBlur,
     children: [/*#__PURE__*/jsxs(Button, {
       ref: dropdownButtonReference,
+      ...inputAttributes,
       id: computedId,
       block: block,
       size: size,
@@ -10237,9 +10519,6 @@ Select.propTypes = {
    * if `function` you can define your own search function to implement custom search experience. This search function used while filtering the options array. The custom search function takes two parameters. First is the option the second is the keyword.
    */
   search: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
-  onChange: PropTypes.func.isRequired,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
   options: PropTypes.arrayOf(PropTypes.shape({
     value: PropTypes.any,
     label: PropTypes.node,
@@ -10252,17 +10531,20 @@ Select.propTypes = {
     disabled: PropTypes.bool,
     searchStrings: PropTypes.arrayOf(PropTypes.string)
   })).isRequired,
-  /**
-   * To have full control of your search value and response use `onSearchChange` function combined with `searchValue` and custom filtering on the options array.
-   * DO NOT USE TOGETHER WITH `search` PROPERTY
-   */
-  onSearchChange: PropTypes.func,
   searchValue: PropTypes.string,
   searchPlaceholder: PropTypes.string,
   classNames: PropTypes.objectOf(PropTypes.string),
   dropdownUp: PropTypes.bool,
   buttonProps: PropTypes.object,
-  dropdownProps: PropTypes.object
+  dropdownProps: PropTypes.object,
+  onChange: PropTypes.func.isRequired,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  /**
+   * To have full control of your search value and response use `onSearchChange` function combined with `searchValue` and custom filtering on the options array.
+   * DO NOT USE TOGETHER WITH `search` PROPERTY
+   */
+  onSearchChange: PropTypes.func
 };
 Select.defaultProps = {
   id: undefined,
@@ -11858,7 +12140,8 @@ class Typeahead extends Component {
   };
   render() {
     const {
-      id,
+      inputAttributes,
+      id: idProp,
       placeholder,
       multiple,
       size,
@@ -11876,6 +12159,7 @@ class Typeahead extends Component {
       alert,
       inputAutoComplete
     } = this.props;
+    const id = idProp ?? inputAttributes?.id;
     const {
       errorState,
       query,
@@ -11901,6 +12185,8 @@ class Typeahead extends Component {
     const hasWarning = displayAlert && alertType === Sentiment.WARNING;
     const hasInfo = displayAlert && alertType === Sentiment.NEUTRAL;
     return /*#__PURE__*/jsx("div", {
+      role: "group",
+      ...inputAttributes,
       id: id,
       className: classNames('typeahead', `typeahead-${size}`, {
         'typeahead--has-value': selected.length > 0,
@@ -11956,6 +12242,9 @@ class Typeahead extends Component {
     });
   }
 }
+var Typeahead$1 = withInputAttributes(Typeahead, {
+  nonLabelable: true
+});
 
 // TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
 var UploadStep;
@@ -14484,5 +14773,5 @@ const translations = {
   'zh-HK': zhHK
 };
 
-export { Accordion, ActionButton, ActionOption, Alert, AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$1 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup$1 as DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, Emphasis, Field, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, Label, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader, Logo$1 as Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$1 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCardGroup$1 as PromoCardGroup, Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip, Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
+export { Accordion, ActionButton, ActionOption, Alert, AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card$2 as BaseCard, Body, BottomSheet$1 as BottomSheet, Breakpoint, Button, Card$1 as Card, Carousel, Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup$1 as DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, Emphasis, Field, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, Label, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader, Logo$1 as Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$1 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCardGroup$1 as PromoCardGroup, Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip, Type, Typeahead$1 as Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
 //# sourceMappingURL=index.mjs.map