@transferwise/components 0.0.0-experimental-335b83d → 0.0.0-experimental-fd2ddc2

package/build/index.esm.js

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { forwardRef, cloneElement, useState, useRef, useMemo, useEffect, useLayoutEffect, createContext, useContext, useCallback, PureComponent, createRef, Component, Children, Fragment as Fragment$1 } from 'react';
-import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1, Alert as Alert$2, ClockBorderless, CheckCircle, InfoCircle, Warning, CrossCircle, Clock, Briefcase, Person, ArrowLeft, QuestionMarkCircle, AlertCircle, Search, ChevronDown, CheckCircleFill, ArrowRight, Download, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle, AlertCircleFill } from '@transferwise/icons';
+import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1, Alert as Alert$2, ClockBorderless, CheckCircle, InfoCircle, Warning, CrossCircle, Clock, Briefcase, Person, ArrowLeft, QuestionMarkCircle, AlertCircle, CheckCircleFill, Search, ArrowRight, Download, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle, AlertCircleFill } from '@transferwise/icons';
 import PropTypes from 'prop-types';
 import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
 import { useTheme, ThemeProvider } from '@wise/components-theming';
@@ -13,11 +13,6 @@ import { createPortal } from 'react-dom';
 import { isUndefined, isKey, isNumber, isEmpty, isNull, isArray } from '@transferwise/neptune-validation';
 import mergeRefs from 'react-merge-refs';
 import { usePopper } from 'react-popper';
-import { Transition, Listbox } from '@headlessui/react';
-import { useId } from '@radix-ui/react-id';
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
-import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingFocusManager, offset, flip, shift, size, autoUpdate } from '@floating-ui/react';
-import { usePreventScroll } from '@react-aria/overlays';
 import { Illustration } from '@wise/art';
 import clamp$2 from 'lodash.clamp';
 import debounce from 'lodash.debounce';
@@ -1974,7 +1969,7 @@ const MOVE_OFFSET_THRESHOLD = 50;
  * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet
  *
  */
-const BottomSheet$1 = props => {
+const BottomSheet = props => {
   const bottomSheetReference = useRef(null);
   const topBarReference = useRef(null);
   const contentReference = useRef(null);
@@ -2128,7 +2123,7 @@ const BottomSheet$1 = props => {
     })
   });
 };
-var BottomSheet$2 = BottomSheet$1;
+var BottomSheet$1 = BottomSheet;
 
 const typeClassMap$1 = {
   [ControlType.ACCENT]: 'btn-accent',
@@ -2322,7 +2317,7 @@ var Card$2 = Card$1;
 
 const Card = ({
   className,
-  children,
+  children = null,
   id,
   isDisabled = false,
   isSmall = false,
@@ -3155,7 +3150,7 @@ const ResponsivePanel = /*#__PURE__*/forwardRef(({
     isMobile
   } = useLayout();
   if (isMobile) {
-    return /*#__PURE__*/jsx(BottomSheet$2, {
+    return /*#__PURE__*/jsx(BottomSheet$1, {
       open: open,
       className: className,
       onClose: onClose,
@@ -5833,7 +5828,7 @@ const Modal = ({
   });
 };
 
-const Popover$1 = ({
+const Popover = ({
   children,
   className,
   content,
@@ -5887,12 +5882,12 @@ const logActionRequired = ({
 }) => {
   logActionRequiredIf(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${deprecatedPlacements[preferredPlacement]} instead.`, deprecatedPlacements[preferredPlacement]);
 };
-Popover$1.defaultProps = {
+Popover.defaultProps = {
   className: undefined,
   preferredPlacement: Position.RIGHT,
   title: undefined
 };
-Popover$1.propTypes = {
+Popover.propTypes = {
   children: PropTypes.node.isRequired,
   className: PropTypes.string,
   content: PropTypes.node.isRequired,
@@ -5909,7 +5904,7 @@ const deprecatedPlacements = {
   [Position.LEFT_TOP]: Position.TOP,
   [Position.RIGHT_TOP]: Position.TOP
 };
-var Popover$2 = Popover$1;
+var Popover$1 = Popover;
 
 const Info = ({
   className = undefined,
@@ -5951,7 +5946,7 @@ const Info = ({
         title: title,
         onClose: () => setOpen(false)
       })]
-    }) : /*#__PURE__*/jsx(Popover$2, {
+    }) : /*#__PURE__*/jsx(Popover$1, {
       content: content,
       preferredPlacement: Position.BOTTOM,
       title: title,
@@ -6140,12 +6135,11 @@ function formControlClassNameBase({
     'np-form-control--size-sm np-text-body-default': size === 'sm',
     'np-form-control--size-md np-text-body-large': size === 'md',
     'np-form-control--size-lg np-text-title-subsection': size === 'lg'
-  });
+  }, 'np-form-control--shape-rectangle');
 }
 
 const Input = /*#__PURE__*/forwardRef(function Input({
   size = 'auto',
-  shape = 'rectangle',
   className,
   ...restProps
 }, reference) {
@@ -6154,10 +6148,7 @@ const Input = /*#__PURE__*/forwardRef(function Input({
     ref: reference,
     className: classNames(className, formControlClassNameBase({
       size
-    }), 'np-input', {
-      'np-input--shape-rectangle': shape === 'rectangle',
-      'np-input--shape-pill': shape === 'pill'
-    })
+    }))
     // eslint-disable-next-line react/forbid-dom-props
     ,
     style: inputPaddings,
@@ -6165,653 +6156,6 @@ const Input = /*#__PURE__*/forwardRef(function Input({
   });
 });
 
-const SearchInput = /*#__PURE__*/forwardRef(function SearchInput({
-  shape = 'pill',
-  disabled,
-  className,
-  ...restProps
-}, ref) {
-  return /*#__PURE__*/jsx(InputGroup, {
-    addonStart: {
-      content: /*#__PURE__*/jsx(Search, {
-        size: 24
-      }),
-      initialContentWidth: 24
-    },
-    disabled: disabled,
-    className: className,
-    children: /*#__PURE__*/jsx(Input, {
-      ref: ref,
-      role: "searchbox",
-      inputMode: "search",
-      shape: shape,
-      ...restProps
-    })
-  });
-});
-
-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)`);
-}
-
-function wrapInFragment(value) {
-  return /*#__PURE__*/jsx(Fragment, {
-    children: value
-  });
-}
-
-function PreventScroll() {
-  usePreventScroll();
-  return null;
-}
-
-function BottomSheet({
-  open,
-  renderTrigger,
-  title,
-  initialFocusRef,
-  padding = 'md',
-  children,
-  onClose
-}) {
-  const {
-    refs,
-    context
-  } = useFloating({
-    open,
-    onOpenChange: value => {
-      if (!value) {
-        onClose?.();
-      }
-    }
-  });
-  const dismiss = useDismiss(context, {
-    outsidePressEvent: 'mousedown'
-  });
-  const role = useRole(context);
-  const {
-    getReferenceProps,
-    getFloatingProps
-  } = useInteractions([dismiss, role]);
-  const [floatingKey, setFloatingKey] = useState(0);
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [open ? /*#__PURE__*/jsx(PreventScroll, {}) : null, renderTrigger?.({
-      ref: refs.setReference,
-      getInteractionProps: getReferenceProps
-    }), /*#__PURE__*/jsx(FloatingPortal, {
-      children: /*#__PURE__*/jsxs(Transition, {
-        show: open,
-        className: "np-bottom-sheet-v2-container",
-        beforeEnter: () => {
-          setFloatingKey(prev => prev + 1);
-        },
-        children: [/*#__PURE__*/jsx(Transition.Child, {
-          enter: "np-bottom-sheet-v2-backdrop-container--enter",
-          enterFrom: "np-bottom-sheet-v2-backdrop-container--enter-from",
-          leave: "np-bottom-sheet-v2-backdrop-container--leave",
-          leaveTo: "np-bottom-sheet-v2-backdrop-container--leave-to",
-          children: /*#__PURE__*/jsx("div", {
-            className: "np-bottom-sheet-v2-backdrop"
-          })
-        }), /*#__PURE__*/jsx(FloatingFocusManager, {
-          context: context,
-          initialFocus: initialFocusRef,
-          children: /*#__PURE__*/jsx("div", {
-            className: "np-bottom-sheet-v2",
-            children: /*#__PURE__*/jsx(Transition.Child, {
-              className: "np-bottom-sheet-v2-content",
-              enter: "np-bottom-sheet-v2-content--enter",
-              enterFrom: "np-bottom-sheet-v2-content--enter-from",
-              leave: "np-bottom-sheet-v2-content--leave",
-              leaveTo: "np-bottom-sheet-v2-content--leave-to",
-              children: /*#__PURE__*/jsxs("div", {
-                // Force inner state invalidation on open
-                ref: refs.setFloating,
-                className: "np-bottom-sheet-v2-content-inner-container",
-                ...getFloatingProps(),
-                children: [/*#__PURE__*/jsx("div", {
-                  className: "np-bottom-sheet-v2-header",
-                  children: /*#__PURE__*/jsx(CloseButton, {
-                    size: Size.SMALL,
-                    onClick: () => {
-                      onClose?.();
-                    }
-                  })
-                }), /*#__PURE__*/jsxs("div", {
-                  className: classNames('np-bottom-sheet-v2-content-inner', title && 'np-bottom-sheet-v2-content-inner--has-title', {
-                    'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md'
-                  }),
-                  children: [title ? /*#__PURE__*/jsx("h2", {
-                    className: "np-bottom-sheet-v2-title np-text-title-body",
-                    children: title
-                  }) : null, /*#__PURE__*/jsx("div", {
-                    className: "np-bottom-sheet-v2-body np-text-body-default",
-                    children: children
-                  })]
-                })]
-              }, floatingKey)
-            })
-          })
-        })]
-      })
-    })]
-  });
-}
-
-const ButtonInput = /*#__PURE__*/forwardRef(function ButtonInput({
-  size = 'md',
-  className,
-  style,
-  ...restProps
-}, ref) {
-  const inputPaddings = useInputPaddings();
-  return /*#__PURE__*/jsx("button", {
-    ref: ref,
-    type: "button",
-    className: classNames(className, formControlClassNameBase({
-      size
-    }), 'np-button-input')
-    // eslint-disable-next-line react/forbid-dom-props
-    ,
-    style: {
-      ...inputPaddings,
-      ...style
-    },
-    ...restProps
-  });
-});
-
-const floatingPadding = 16;
-function Popover({
-  placement,
-  open,
-  renderTrigger,
-  title,
-  padding = 'md',
-  children,
-  onClose
-}) {
-  const {
-    refs,
-    floatingStyles,
-    context
-  } = useFloating({
-    placement,
-    middleware: [offset(8), flip({
-      padding: floatingPadding,
-      crossAxis: false
-    }), shift(), size({
-      padding: floatingPadding,
-      apply: ({
-        elements,
-        rects,
-        availableHeight
-      }) => {
-        elements.floating.style.setProperty('--max-height', `${availableHeight}px`);
-        elements.floating.style.setProperty('--width', `${rects.reference.width}px`);
-      }
-    })],
-    whileElementsMounted: autoUpdate,
-    open,
-    onOpenChange: value => {
-      if (!value) {
-        onClose?.();
-      }
-    }
-  });
-  const dismiss = useDismiss(context, {
-    outsidePressEvent: 'mousedown'
-  });
-  const role = useRole(context);
-  const {
-    getReferenceProps,
-    getFloatingProps
-  } = useInteractions([role, dismiss]);
-  const [floatingKey, setFloatingKey] = useState(0);
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [open ? /*#__PURE__*/jsx(PreventScroll, {}) : null, renderTrigger({
-      ref: refs.setReference,
-      getInteractionProps: getReferenceProps
-    }), /*#__PURE__*/jsx(FloatingPortal, {
-      children: /*#__PURE__*/jsx(FloatingFocusManager, {
-        context: context,
-        children: /*#__PURE__*/jsx(Transition, {
-          show: open,
-          leave: "transition-opacity",
-          leaveTo: "opacity-0",
-          beforeEnter: () => {
-            setFloatingKey(prev => prev + 1);
-          },
-          children: /*#__PURE__*/jsx("div", {
-            // Force inner state invalidation on open
-            ref: refs.setFloating,
-            className: "np-popover-v2-container"
-            // eslint-disable-next-line react/forbid-dom-props
-            ,
-            style: floatingStyles,
-            ...getFloatingProps(),
-            children: /*#__PURE__*/jsxs("div", {
-              className: classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
-                'np-popover-v2--padding-md': padding === 'md'
-              }),
-              children: [title ? /*#__PURE__*/jsx("h2", {
-                className: "np-popover-v2-title np-text-title-body",
-                children: title
-              }) : null, /*#__PURE__*/jsx("div", {
-                className: "np-popover-v2-content np-text-body-default",
-                children: children
-              })]
-            })
-          }, floatingKey)
-        })
-      })
-    })]
-  });
-}
-
-function searchableString(value) {
-  return value.trim().replace(/\s+/gu, ' ').toLowerCase();
-}
-function inferSearchableStrings(value) {
-  if (typeof value === 'string') {
-    return [searchableString(value)];
-  }
-  if (typeof value === 'object' && value != null) {
-    return Object.values(value).filter(innerValue => typeof innerValue === 'string').map(innerValue => searchableString(innerValue));
-  }
-  return [];
-}
-const SelectInputHasValueContext = /*#__PURE__*/createContext(false);
-const SelectInputOptionContentCompactContext = /*#__PURE__*/createContext(false);
-function dedupeSelectInputOptionItem(item, existingValues) {
-  if (existingValues.has(item.value)) {
-    return {
-      ...item,
-      value: undefined
-    };
-  }
-  existingValues.add(item.value);
-  return item;
-}
-function dedupeSelectInputItems(items) {
-  const existingValues = new Set();
-  return items.map(item => {
-    switch (item.type) {
-      case 'option':
-        {
-          return dedupeSelectInputOptionItem(item, existingValues);
-        }
-      case 'group':
-        {
-          return {
-            ...item,
-            options: item.options.map(option => dedupeSelectInputOptionItem(option, existingValues))
-          };
-        }
-    }
-    return item;
-  });
-}
-function SelectInput({
-  name,
-  placeholder,
-  items,
-  defaultValue,
-  value: controlledValue,
-  renderValue = wrapInFragment,
-  compareValues,
-  filterable,
-  filterPlaceholder,
-  disabled,
-  className,
-  onChange,
-  onClear
-}) {
-  const intl = useIntl();
-  const [open, setOpen] = useState(false);
-  const triggerRef = useRef(null);
-  const screenSm = useScreenSize(Breakpoint.SMALL);
-  const OptionsOverlay = screenSm ? Popover : BottomSheet;
-  const searchInputRef = useRef(null);
-  const listboxRef = useRef(null);
-  const controllerRef = filterable ? searchInputRef : listboxRef;
-  return /*#__PURE__*/jsx(Listbox, {
-    name: name,
-    defaultValue: defaultValue,
-    value: controlledValue
-    // TODO: Remove assertion when upgrading TypeScript to v5
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    ,
-    by: compareValues,
-    disabled: disabled,
-    onChange: value => {
-      setOpen(false);
-      onChange?.(value);
-    },
-    children: ({
-      disabled: uiDisabled,
-      value
-    }) => /*#__PURE__*/jsx(SelectInputHasValueContext.Provider, {
-      value: value != null,
-      children: /*#__PURE__*/jsx(InputGroup, {
-        addonEnd: {
-          content: /*#__PURE__*/jsxs("span", {
-            className: classNames('np-select-input-addon-container', uiDisabled && 'disabled'),
-            children: [onClear != null && value != null ? /*#__PURE__*/jsxs(Fragment, {
-              children: [/*#__PURE__*/jsx("button", {
-                type: "button",
-                "aria-label": intl.formatMessage(messages$4.ariaLabel),
-                disabled: uiDisabled,
-                className: "np-select-input-addon np-select-input-addon--interactive",
-                onClick: event => {
-                  event.preventDefault();
-                  onClear();
-                  triggerRef.current?.focus({
-                    preventScroll: true
-                  });
-                },
-                children: /*#__PURE__*/jsx(Cross, {
-                  size: 16
-                })
-              }), /*#__PURE__*/jsx("span", {
-                className: "np-select-input-addon-separator"
-              })]
-            }) : null, /*#__PURE__*/jsx("span", {
-              className: "np-select-input-addon",
-              children: /*#__PURE__*/jsx(ChevronDown, {
-                size: 16
-              })
-            })]
-          }),
-          padding: 'sm'
-        },
-        className: className,
-        children: /*#__PURE__*/jsx(OptionsOverlay, {
-          open: open,
-          renderTrigger: ({
-            ref,
-            getInteractionProps
-          }) => /*#__PURE__*/jsx(Listbox.Button, {
-            ref: mergeRefs([ref, triggerRef]),
-            as: SelectInputButton,
-            overrides: getInteractionProps(),
-            onClick: () => {
-              setOpen(prev => !prev);
-            },
-            children: value != null ? /*#__PURE__*/jsx(SelectInputOptionContentCompactContext.Provider, {
-              value: true,
-              children: renderValue(value, true)
-            }) : /*#__PURE__*/jsx("span", {
-              className: "np-select-input-placeholder",
-              children: placeholder
-            })
-          }),
-          initialFocusRef: controllerRef,
-          padding: "none",
-          onClose: () => {
-            setOpen(false);
-          },
-          children: /*#__PURE__*/jsx(SelectInputOptions, {
-            items: items,
-            renderValue: renderValue,
-            filterable: filterable,
-            filterPlaceholder: filterPlaceholder,
-            searchInputRef: searchInputRef,
-            listboxRef: listboxRef
-          })
-        })
-      })
-    })
-  });
-}
-const SelectInputButton = /*#__PURE__*/forwardRef(function SelectInputButton({
-  overrides,
-  ...restProps
-}, ref) {
-  return /*#__PURE__*/jsx(ButtonInput, {
-    ref: ref,
-    ...restProps,
-    ...overrides
-  });
-});
-const SelectInputOptionsContainer = /*#__PURE__*/forwardRef(function SelectInputOptionsContainer({
-  'aria-orientation': ariaOrientation,
-  'aria-activedescendant': ariaActiveDescendant,
-  role,
-  tabIndex,
-  onAriaActiveDescendantChange,
-  onKeyDown,
-  ...restProps
-}, ref) {
-  const handleAriaActiveDescendantChange = useEffectEvent(onAriaActiveDescendantChange);
-  useEffect(() => {
-    handleAriaActiveDescendantChange(ariaActiveDescendant);
-  }, [ariaActiveDescendant, handleAriaActiveDescendantChange]);
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    jsx("div", {
-      ref: ref,
-      onKeyDown: event => {
-        // Prevent absorbing dismissal requests too early
-        if (event.key !== 'Escape') {
-          onKeyDown?.(event);
-        }
-      },
-      ...restProps
-    })
-  );
-});
-function SelectInputOptions({
-  items,
-  renderValue = wrapInFragment,
-  filterable,
-  filterPlaceholder,
-  searchInputRef,
-  listboxRef
-}) {
-  const [query, setQuery] = useState('');
-  const needle = useMemo(() => query ? searchableString(query) : null, [query]);
-  const listboxContainerRef = useRef(null);
-  useEffect(() => {
-    if (listboxContainerRef.current != null) {
-      listboxContainerRef.current.style.setProperty('--initial-height', `${listboxContainerRef.current.offsetHeight}px`);
-    }
-  }, []);
-  const listboxId = useId();
-  const controllerRef = filterable ? searchInputRef : listboxRef;
-  return /*#__PURE__*/jsxs(Listbox.Options, {
-    as: SelectInputOptionsContainer,
-    static: true,
-    className: "np-select-input-options-container",
-    onAriaActiveDescendantChange: value => {
-      if (controllerRef.current != null) {
-        if (value != null) {
-          controllerRef.current.setAttribute('aria-activedescendant', value);
-        } else {
-          controllerRef.current.removeAttribute('aria-activedescendant');
-        }
-      }
-    },
-    children: [filterable ? /*#__PURE__*/jsx("div", {
-      className: "np-select-input-query-container",
-      children: /*#__PURE__*/jsx(SearchInput, {
-        ref: searchInputRef,
-        shape: "rectangle",
-        placeholder: filterPlaceholder,
-        value: query,
-        "aria-controls": listboxId,
-        onKeyDown: event => {
-          // Prevent interfering with the matcher of Headless UI
-          // https://mathiasbynens.be/notes/javascript-unicode#regex
-          if (/^.$/u.test(event.key)) {
-            event.stopPropagation();
-          }
-        },
-        onChange: event => {
-          setQuery(event.currentTarget.value);
-        }
-      })
-    }) : null, /*#__PURE__*/jsx("div", {
-      ref: listboxContainerRef,
-      className: classNames('np-select-input-listbox-container', items.some(item => item.type === 'group') && 'np-select-input-listbox-container--has-group'),
-      children: /*#__PURE__*/jsx("div", {
-        ref: listboxRef,
-        id: listboxId,
-        role: "listbox",
-        "aria-orientation": "vertical",
-        tabIndex: 0,
-        className: "np-select-input-listbox",
-        children: (needle == null ? items : dedupeSelectInputItems(items)).map((item, index) => /*#__PURE__*/jsx(SelectInputItemView
-        // eslint-disable-next-line react/no-array-index-key
-        , {
-          item: item,
-          renderValue: renderValue,
-          needle: needle
-        }, index))
-      })
-    })]
-  });
-}
-function SelectInputItemView({
-  item,
-  renderValue,
-  needle
-}) {
-  switch (item.type) {
-    case 'option':
-      {
-        if (item.value != null && (!needle || inferSearchableStrings(item.filterMatchers ?? item.value).some(haystack => haystack.includes(needle)))) {
-          return /*#__PURE__*/jsx(SelectInputOption, {
-            value: item.value,
-            disabled: item.disabled,
-            children: renderValue(item.value, false)
-          });
-        }
-        break;
-      }
-    case 'group':
-      {
-        return /*#__PURE__*/jsx(SelectInputGroupItemView, {
-          item: item,
-          renderValue: renderValue,
-          needle: needle
-        });
-      }
-    case 'separator':
-      {
-        if (needle == null) {
-          return /*#__PURE__*/jsx("hr", {
-            className: "np-select-input-separator-item",
-            "aria-hidden": true
-          });
-        }
-        break;
-      }
-  }
-  return null;
-}
-function SelectInputGroupItemView({
-  item,
-  renderValue,
-  needle
-}) {
-  const headerId = useId();
-  return (
-    /*#__PURE__*/
-    // An empty container may be rendered when no options match `needle`
-    // However, pre-filtering would result in worse performance overall
-    jsxs("section", {
-      role: "group",
-      "aria-labelledby": headerId,
-      className: classNames(needle == null && 'np-select-input-group-item--without-needle'),
-      children: [needle == null ? /*#__PURE__*/jsx("header", {
-        id: headerId,
-        role: "presentation",
-        className: "np-select-input-group-item-header np-text-title-group",
-        children: item.label
-      }) : null, item.options.map((option, index) => /*#__PURE__*/jsx(SelectInputItemView
-      // eslint-disable-next-line react/no-array-index-key
-      , {
-        item: option,
-        renderValue: renderValue,
-        needle: needle
-      }, index))]
-    })
-  );
-}
-function SelectInputOption({
-  value,
-  disabled,
-  children
-}) {
-  const parentHasValue = useContext(SelectInputHasValueContext);
-  // Avoid flash during exit transition
-  const {
-    current: cachedParentHasValue
-  } = useRef(parentHasValue);
-  return /*#__PURE__*/jsx(Listbox.Option, {
-    as: "div",
-    value: value,
-    disabled: disabled,
-    className: ({
-      active,
-      disabled: uiDisabled
-    }) => classNames('np-select-input-option-container np-text-body-large', active && 'np-select-input-option-container--active', uiDisabled && 'np-select-input-option-container--disabled'),
-    children: ({
-      selected
-    }) => /*#__PURE__*/jsxs(Fragment, {
-      children: [cachedParentHasValue ? /*#__PURE__*/jsx(Check, {
-        size: 16,
-        className: classNames(!selected && 'np-select-input-option-check--not-selected')
-      }) : null, /*#__PURE__*/jsx("div", {
-        className: "np-select-input-option",
-        children: children
-      })]
-    })
-  });
-}
-function SelectInputOptionContent({
-  title,
-  note,
-  description,
-  icon
-}) {
-  const compact = useContext(SelectInputOptionContentCompactContext);
-  return /*#__PURE__*/jsxs("div", {
-    className: "np-select-input-option-content-container np-text-body-large",
-    children: [icon ? /*#__PURE__*/jsx("div", {
-      className: classNames('np-select-input-option-content-icon', !compact && 'np-select-input-option-content-icon--not-compact'),
-      children: icon
-    }) : null, /*#__PURE__*/jsxs("div", {
-      className: "np-select-input-option-content-text",
-      children: [/*#__PURE__*/jsxs("div", {
-        className: classNames('np-select-input-option-content-text-line-1', compact && 'np-select-input-option-content-text-compact'),
-        children: [/*#__PURE__*/jsx("h4", {
-          className: "d-inline np-text-body-large",
-          children: title
-        }), note ? /*#__PURE__*/jsx("span", {
-          className: "np-select-input-option-content-text-secondary np-text-body-default",
-          children: note
-        }) : null]
-      }), description ? /*#__PURE__*/jsx("div", {
-        className: classNames('np-select-input-option-content-text-secondary np-text-body-default', compact && 'np-select-input-option-content-text-compact'),
-        children: description
-      }) : null]
-    })]
-  });
-}
-
 const TextArea = /*#__PURE__*/forwardRef(function TextArea({
   className,
   ...restProps
@@ -7927,7 +7271,7 @@ function Select({
       headerTitle: searchPlaceholder || formatMessage(messages$3.searchPlaceholder),
       onClose: handleCloseOptions,
       children: renderOptionsList()
-    }) : /*#__PURE__*/jsx(BottomSheet$2, {
+    }) : /*#__PURE__*/jsx(BottomSheet$1, {
       open: open,
       onClose: handleCloseOptions,
       children: renderOptionsList({
@@ -10360,10 +9704,12 @@ const PromoCardIndicator = ({
   children,
   label,
   icon,
+  isSmall = false,
   testid,
   ...rest
 }) => {
-  const IconComponent = icon && {
+  const isIconString = icon && typeof icon === 'string';
+  const IconComponent = isIconString && {
     check: Check,
     arrow: ArrowRight,
     download: Download
@@ -10377,12 +9723,15 @@ const PromoCardIndicator = ({
       type: Typography.BODY_LARGE_BOLD,
       className: "np-Card-indicatorText",
       children: label
-    }), IconComponent && /*#__PURE__*/jsx("span", {
+    }), icon && /*#__PURE__*/jsx(Avatar, {
+      type: AvatarType.ICON,
+      size: isSmall ? 40 : 56,
+      backgroundColor: "var(--Card-indicator-icon-background-color)",
       className: "np-Card-indicatorIcon",
-      children: /*#__PURE__*/jsx(IconComponent, {
+      children: IconComponent ? /*#__PURE__*/jsx(IconComponent, {
         size: 24,
         "aria-hidden": "true"
-      })
+      }) : icon
     }), children]
   });
 };
@@ -10444,6 +9793,7 @@ const PromoCard = /*#__PURE__*/forwardRef(({
   imageClass,
   imageSource,
   indicatorLabel,
+  indicatorIcon,
   isChecked,
   isDisabled,
   onClick,
@@ -10454,6 +9804,8 @@ const PromoCard = /*#__PURE__*/forwardRef(({
   title,
   type,
   value,
+  isSmall,
+  useDisplayFont = true,
   ...props
 }, reference) => {
   // Set the `checked` state to the value of `defaultChecked` if it is truthy,
@@ -10477,7 +9829,19 @@ const PromoCard = /*#__PURE__*/forwardRef(({
   // 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`.
-  const icon = href && download ? 'download' : href ? 'arrow' : 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({
@@ -10494,7 +9858,8 @@ const PromoCard = /*#__PURE__*/forwardRef(({
     isDisabled: isDisabled || contextIsDisabled,
     onClick,
     ref: reference,
-    'data-testid': testId
+    '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`
@@ -10522,6 +9887,27 @@ const PromoCard = /*#__PURE__*/forwardRef(({
     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]);
@@ -10535,17 +9921,7 @@ const PromoCard = /*#__PURE__*/forwardRef(({
         size: 24,
         "aria-hidden": "true"
       })
-    }), /*#__PURE__*/jsx(Display, {
-      id: `${componentId}-title`,
-      as: headingLevel,
-      className: "np-Card-title",
-      type: Typography.DISPLAY_SMALL,
-      children: href && !type ? /*#__PURE__*/jsx("a", {
-        className: "np-Card-titleLink",
-        ...anchorProps,
-        children: title
-      }) : title
-    }), /*#__PURE__*/jsx(Body, {
+    }), getTitle(), /*#__PURE__*/jsx(Body, {
       className: "np-Card-description",
       children: description
     }), imageSource && /*#__PURE__*/jsx("div", {
@@ -10559,7 +9935,8 @@ const PromoCard = /*#__PURE__*/forwardRef(({
       })
     }), /*#__PURE__*/jsx(PromoCardIndicator, {
       label: indicatorLabel,
-      icon: icon
+      icon: getIconType(),
+      isSmall: isSmall
     })]
   });
 });
@@ -15041,5 +14418,5 @@ const translations = {
   zh
 };
 
-export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron$1 as Chevron, Chip, Chips, CircularButton$1 as CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput$1 as DateInput, DateLookup$1 as DateLookup, DateMode, Decision$1 as Decision, Presentation as DecisionPresentation, Type as DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat$1 as InputWithDisplayFormat, InstructionsList$1 as InstructionsList, LanguageProvider, Layout$1 as Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown$1 as Markdown, MarkdownNodeType, Modal, Money$1 as Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList$1 as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput$1 as PhoneNumberInput, Popover$2 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider$1 as Provider, RTL_LANGUAGES, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioOption$1 as RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, Select, SelectInput, SelectInputOptionContent, Sentiment, Size, SlidingPanel$1 as SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider$1 as SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat$1 as TextareaWithDisplayFormat, Theme, Title, Tooltip$1 as Tooltip, Type$1 as Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useSnackbar };
+export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$1 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron$1 as Chevron, Chip, Chips, CircularButton$1 as CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput$1 as DateInput, DateLookup$1 as DateLookup, DateMode, Decision$1 as Decision, Presentation as DecisionPresentation, Type as DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat$1 as InputWithDisplayFormat, InstructionsList$1 as InstructionsList, LanguageProvider, Layout$1 as Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown$1 as Markdown, MarkdownNodeType, Modal, Money$1 as Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList$1 as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput$1 as PhoneNumberInput, Popover$1 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider$1 as Provider, RTL_LANGUAGES, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioOption$1 as RadioOption, SUPPORTED_LANGUAGES, Scroll, Section, Select, Sentiment, Size, SlidingPanel$1 as SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider$1 as SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat$1 as TextareaWithDisplayFormat, Theme, Title, Tooltip$1 as Tooltip, Type$1 as Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useSnackbar };
 //# sourceMappingURL=index.esm.js.map