@transferwise/components 0.0.0-experimental-e95c8a5 → 0.0.0-experimental-39ab3ec

package/build/index.js

@@ -14,11 +14,6 @@ var reactDom = require('react-dom');
 var neptuneValidation = require('@transferwise/neptune-validation');
 var mergeRefs = require('react-merge-refs');
 var reactPopper = require('react-popper');
-var react$1 = require('@headlessui/react');
-var reactId = require('@radix-ui/react-id');
-var shim = require('use-sync-external-store/shim');
-var react = require('@floating-ui/react');
-var overlays = require('@react-aria/overlays');
 var art = require('@wise/art');
 var clamp$2 = require('lodash.clamp');
 var debounce = require('lodash.debounce');
@@ -2007,7 +2002,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 = React.useRef(null);
   const topBarReference = React.useRef(null);
   const contentReference = React.useRef(null);
@@ -2161,7 +2156,7 @@ const BottomSheet$1 = props => {
     })
   });
 };
-var BottomSheet$2 = BottomSheet$1;
+var BottomSheet$1 = BottomSheet;
 
 const typeClassMap$1 = {
   [exports.ControlType.ACCENT]: 'btn-accent',
@@ -2355,7 +2350,7 @@ var Card$2 = Card$1;
 
 const Card = ({
   className,
-  children,
+  children = null,
   id,
   isDisabled = false,
   isSmall = false,
@@ -3188,7 +3183,7 @@ const ResponsivePanel = /*#__PURE__*/React.forwardRef(({
     isMobile
   } = useLayout();
   if (isMobile) {
-    return /*#__PURE__*/jsxRuntime.jsx(BottomSheet$2, {
+    return /*#__PURE__*/jsxRuntime.jsx(BottomSheet$1, {
       open: open,
       className: className,
       onClose: onClose,
@@ -5866,7 +5861,7 @@ const Modal = ({
   });
 };
 
-const Popover$1 = ({
+const Popover = ({
   children,
   className,
   content,
@@ -5920,12 +5915,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: exports.Position.RIGHT,
   title: undefined
 };
-Popover$1.propTypes = {
+Popover.propTypes = {
   children: PropTypes__default.default.node.isRequired,
   className: PropTypes__default.default.string,
   content: PropTypes__default.default.node.isRequired,
@@ -5942,7 +5937,7 @@ const deprecatedPlacements = {
   [exports.Position.LEFT_TOP]: exports.Position.TOP,
   [exports.Position.RIGHT_TOP]: exports.Position.TOP
 };
-var Popover$2 = Popover$1;
+var Popover$1 = Popover;
 
 const Info = ({
   className = undefined,
@@ -5984,7 +5979,7 @@ const Info = ({
         title: title,
         onClose: () => setOpen(false)
       })]
-    }) : /*#__PURE__*/jsxRuntime.jsx(Popover$2, {
+    }) : /*#__PURE__*/jsxRuntime.jsx(Popover$1, {
       content: content,
       preferredPlacement: exports.Position.BOTTOM,
       title: title,
@@ -6173,12 +6168,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__*/React.forwardRef(function Input({
   size = 'auto',
-  shape = 'rectangle',
   className,
   ...restProps
 }, reference) {
@@ -6187,10 +6181,7 @@ const Input = /*#__PURE__*/React.forwardRef(function Input({
     ref: reference,
     className: classNames__default.default(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,
@@ -6198,653 +6189,6 @@ const Input = /*#__PURE__*/React.forwardRef(function Input({
   });
 });
 
-const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
-  shape = 'pill',
-  disabled,
-  className,
-  ...restProps
-}, ref) {
-  return /*#__PURE__*/jsxRuntime.jsx(InputGroup, {
-    addonStart: {
-      content: /*#__PURE__*/jsxRuntime.jsx(icons.Search, {
-        size: 24
-      }),
-      initialContentWidth: 24
-    },
-    disabled: disabled,
-    className: className,
-    children: /*#__PURE__*/jsxRuntime.jsx(Input, {
-      ref: ref,
-      role: "searchbox",
-      inputMode: "search",
-      shape: shape,
-      ...restProps
-    })
-  });
-});
-
-function useMedia(query) {
-  return shim.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__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: value
-  });
-}
-
-function PreventScroll() {
-  overlays.usePreventScroll();
-  return null;
-}
-
-function BottomSheet({
-  open,
-  renderTrigger,
-  title,
-  initialFocusRef,
-  padding = 'md',
-  children,
-  onClose
-}) {
-  const {
-    refs,
-    context
-  } = react.useFloating({
-    open,
-    onOpenChange: value => {
-      if (!value) {
-        onClose?.();
-      }
-    }
-  });
-  const dismiss = react.useDismiss(context, {
-    outsidePressEvent: 'mousedown'
-  });
-  const role = react.useRole(context);
-  const {
-    getReferenceProps,
-    getFloatingProps
-  } = react.useInteractions([dismiss, role]);
-  const [floatingKey, setFloatingKey] = React.useState(0);
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [open ? /*#__PURE__*/jsxRuntime.jsx(PreventScroll, {}) : null, renderTrigger?.({
-      ref: refs.setReference,
-      getInteractionProps: getReferenceProps
-    }), /*#__PURE__*/jsxRuntime.jsx(react.FloatingPortal, {
-      children: /*#__PURE__*/jsxRuntime.jsxs(react$1.Transition, {
-        show: open,
-        className: "np-bottom-sheet-v2-container",
-        beforeEnter: () => {
-          setFloatingKey(prev => prev + 1);
-        },
-        children: [/*#__PURE__*/jsxRuntime.jsx(react$1.Transition.Child, {
-          enter: "np-bottom-sheet-v2-backdrop-container--enter",
-          enterFrom: "np-bottom-sheet-v2-backdrop-container--enter-from",
-          leave: "np-bottom-sheet-v2-backdrop-container--leave",
-          leaveTo: "np-bottom-sheet-v2-backdrop-container--leave-to",
-          children: /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "np-bottom-sheet-v2-backdrop"
-          })
-        }), /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
-          context: context,
-          initialFocus: initialFocusRef,
-          children: /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "np-bottom-sheet-v2",
-            children: /*#__PURE__*/jsxRuntime.jsx(react$1.Transition.Child, {
-              className: "np-bottom-sheet-v2-content",
-              enter: "np-bottom-sheet-v2-content--enter",
-              enterFrom: "np-bottom-sheet-v2-content--enter-from",
-              leave: "np-bottom-sheet-v2-content--leave",
-              leaveTo: "np-bottom-sheet-v2-content--leave-to",
-              children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-                // Force inner state invalidation on open
-                ref: refs.setFloating,
-                className: "np-bottom-sheet-v2-content-inner-container",
-                ...getFloatingProps(),
-                children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-                  className: "np-bottom-sheet-v2-header",
-                  children: /*#__PURE__*/jsxRuntime.jsx(CloseButton, {
-                    size: exports.Size.SMALL,
-                    onClick: () => {
-                      onClose?.();
-                    }
-                  })
-                }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-                  className: classNames__default.default('np-bottom-sheet-v2-content-inner', title && 'np-bottom-sheet-v2-content-inner--has-title', {
-                    'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md'
-                  }),
-                  children: [title ? /*#__PURE__*/jsxRuntime.jsx("h2", {
-                    className: "np-bottom-sheet-v2-title np-text-title-body",
-                    children: title
-                  }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
-                    className: "np-bottom-sheet-v2-body np-text-body-default",
-                    children: children
-                  })]
-                })]
-              }, floatingKey)
-            })
-          })
-        })]
-      })
-    })]
-  });
-}
-
-const ButtonInput = /*#__PURE__*/React.forwardRef(function ButtonInput({
-  size = 'md',
-  className,
-  style,
-  ...restProps
-}, ref) {
-  const inputPaddings = useInputPaddings();
-  return /*#__PURE__*/jsxRuntime.jsx("button", {
-    ref: ref,
-    type: "button",
-    className: classNames__default.default(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
-  } = react.useFloating({
-    placement,
-    middleware: [react.offset(8), react.flip({
-      padding: floatingPadding,
-      crossAxis: false
-    }), react.shift(), react.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: react.autoUpdate,
-    open,
-    onOpenChange: value => {
-      if (!value) {
-        onClose?.();
-      }
-    }
-  });
-  const dismiss = react.useDismiss(context, {
-    outsidePressEvent: 'mousedown'
-  });
-  const role = react.useRole(context);
-  const {
-    getReferenceProps,
-    getFloatingProps
-  } = react.useInteractions([role, dismiss]);
-  const [floatingKey, setFloatingKey] = React.useState(0);
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [open ? /*#__PURE__*/jsxRuntime.jsx(PreventScroll, {}) : null, renderTrigger({
-      ref: refs.setReference,
-      getInteractionProps: getReferenceProps
-    }), /*#__PURE__*/jsxRuntime.jsx(react.FloatingPortal, {
-      children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
-        context: context,
-        children: /*#__PURE__*/jsxRuntime.jsx(react$1.Transition, {
-          show: open,
-          leave: "transition-opacity",
-          leaveTo: "opacity-0",
-          beforeEnter: () => {
-            setFloatingKey(prev => prev + 1);
-          },
-          children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs("div", {
-              className: classNames__default.default('np-popover-v2', title && 'np-popover-v2--has-title', {
-                'np-popover-v2--padding-md': padding === 'md'
-              }),
-              children: [title ? /*#__PURE__*/jsxRuntime.jsx("h2", {
-                className: "np-popover-v2-title np-text-title-body",
-                children: title
-              }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
-                className: "np-popover-v2-content np-text-body-default",
-                children: children
-              })]
-            })
-          }, floatingKey)
-        })
-      })
-    })]
-  });
-}
-
-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__*/React.createContext(false);
-const SelectInputOptionContentCompactContext = /*#__PURE__*/React.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 = reactIntl.useIntl();
-  const [open, setOpen] = React.useState(false);
-  const triggerRef = React.useRef(null);
-  const screenSm = useScreenSize(exports.Breakpoint.SMALL);
-  const OptionsOverlay = screenSm ? Popover : BottomSheet;
-  const searchInputRef = React.useRef(null);
-  const listboxRef = React.useRef(null);
-  const controllerRef = filterable ? searchInputRef : listboxRef;
-  return /*#__PURE__*/jsxRuntime.jsx(react$1.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__*/jsxRuntime.jsx(SelectInputHasValueContext.Provider, {
-      value: value != null,
-      children: /*#__PURE__*/jsxRuntime.jsx(InputGroup, {
-        addonEnd: {
-          content: /*#__PURE__*/jsxRuntime.jsxs("span", {
-            className: classNames__default.default('np-select-input-addon-container', uiDisabled && 'disabled'),
-            children: [onClear != null && value != null ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(icons.Cross, {
-                  size: 16
-                })
-              }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                className: "np-select-input-addon-separator"
-              })]
-            }) : null, /*#__PURE__*/jsxRuntime.jsx("span", {
-              className: "np-select-input-addon",
-              children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronDown, {
-                size: 16
-              })
-            })]
-          }),
-          padding: 'sm'
-        },
-        className: className,
-        children: /*#__PURE__*/jsxRuntime.jsx(OptionsOverlay, {
-          open: open,
-          renderTrigger: ({
-            ref,
-            getInteractionProps
-          }) => /*#__PURE__*/jsxRuntime.jsx(react$1.Listbox.Button, {
-            ref: mergeRefs__default.default([ref, triggerRef]),
-            as: SelectInputButton,
-            overrides: getInteractionProps(),
-            onClick: () => {
-              setOpen(prev => !prev);
-            },
-            children: value != null ? /*#__PURE__*/jsxRuntime.jsx(SelectInputOptionContentCompactContext.Provider, {
-              value: true,
-              children: renderValue(value, true)
-            }) : /*#__PURE__*/jsxRuntime.jsx("span", {
-              className: "np-select-input-placeholder",
-              children: placeholder
-            })
-          }),
-          initialFocusRef: controllerRef,
-          padding: "none",
-          onClose: () => {
-            setOpen(false);
-          },
-          children: /*#__PURE__*/jsxRuntime.jsx(SelectInputOptions, {
-            items: items,
-            renderValue: renderValue,
-            filterable: filterable,
-            filterPlaceholder: filterPlaceholder,
-            searchInputRef: searchInputRef,
-            listboxRef: listboxRef
-          })
-        })
-      })
-    })
-  });
-}
-const SelectInputButton = /*#__PURE__*/React.forwardRef(function SelectInputButton({
-  overrides,
-  ...restProps
-}, ref) {
-  return /*#__PURE__*/jsxRuntime.jsx(ButtonInput, {
-    ref: ref,
-    ...restProps,
-    ...overrides
-  });
-});
-const SelectInputOptionsContainer = /*#__PURE__*/React.forwardRef(function SelectInputOptionsContainer({
-  'aria-orientation': ariaOrientation,
-  'aria-activedescendant': ariaActiveDescendant,
-  role,
-  tabIndex,
-  onAriaActiveDescendantChange,
-  onKeyDown,
-  ...restProps
-}, ref) {
-  const handleAriaActiveDescendantChange = useEffectEvent(onAriaActiveDescendantChange);
-  React.useEffect(() => {
-    handleAriaActiveDescendantChange(ariaActiveDescendant);
-  }, [ariaActiveDescendant, handleAriaActiveDescendantChange]);
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    jsxRuntime.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] = React.useState('');
-  const needle = React.useMemo(() => query ? searchableString(query) : null, [query]);
-  const listboxContainerRef = React.useRef(null);
-  React.useEffect(() => {
-    if (listboxContainerRef.current != null) {
-      listboxContainerRef.current.style.setProperty('--initial-height', `${listboxContainerRef.current.offsetHeight}px`);
-    }
-  }, []);
-  const listboxId = reactId.useId();
-  const controllerRef = filterable ? searchInputRef : listboxRef;
-  return /*#__PURE__*/jsxRuntime.jsxs(react$1.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__*/jsxRuntime.jsx("div", {
-      className: "np-select-input-query-container",
-      children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
-      ref: listboxContainerRef,
-      className: classNames__default.default('np-select-input-listbox-container', items.some(item => item.type === 'group') && 'np-select-input-listbox-container--has-group'),
-      children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.jsx(SelectInputOption, {
-            value: item.value,
-            disabled: item.disabled,
-            children: renderValue(item.value, false)
-          });
-        }
-        break;
-      }
-    case 'group':
-      {
-        return /*#__PURE__*/jsxRuntime.jsx(SelectInputGroupItemView, {
-          item: item,
-          renderValue: renderValue,
-          needle: needle
-        });
-      }
-    case 'separator':
-      {
-        if (needle == null) {
-          return /*#__PURE__*/jsxRuntime.jsx("hr", {
-            className: "np-select-input-separator-item",
-            "aria-hidden": true
-          });
-        }
-        break;
-      }
-  }
-  return null;
-}
-function SelectInputGroupItemView({
-  item,
-  renderValue,
-  needle
-}) {
-  const headerId = reactId.useId();
-  return (
-    /*#__PURE__*/
-    // An empty container may be rendered when no options match `needle`
-    // However, pre-filtering would result in worse performance overall
-    jsxRuntime.jsxs("section", {
-      role: "group",
-      "aria-labelledby": headerId,
-      className: classNames__default.default(needle == null && 'np-select-input-group-item--without-needle'),
-      children: [needle == null ? /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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 = React.useContext(SelectInputHasValueContext);
-  // Avoid flash during exit transition
-  const {
-    current: cachedParentHasValue
-  } = React.useRef(parentHasValue);
-  return /*#__PURE__*/jsxRuntime.jsx(react$1.Listbox.Option, {
-    as: "div",
-    value: value,
-    disabled: disabled,
-    className: ({
-      active,
-      disabled: uiDisabled
-    }) => classNames__default.default('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__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [cachedParentHasValue ? /*#__PURE__*/jsxRuntime.jsx(icons.Check, {
-        size: 16,
-        className: classNames__default.default(!selected && 'np-select-input-option-check--not-selected')
-      }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "np-select-input-option",
-        children: children
-      })]
-    })
-  });
-}
-function SelectInputOptionContent({
-  title,
-  note,
-  description,
-  icon
-}) {
-  const compact = React.useContext(SelectInputOptionContentCompactContext);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "np-select-input-option-content-container np-text-body-large",
-    children: [icon ? /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames__default.default('np-select-input-option-content-icon', !compact && 'np-select-input-option-content-icon--not-compact'),
-      children: icon
-    }) : null, /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "np-select-input-option-content-text",
-      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: classNames__default.default('np-select-input-option-content-text-line-1', compact && 'np-select-input-option-content-text-compact'),
-        children: [/*#__PURE__*/jsxRuntime.jsx("h4", {
-          className: "d-inline np-text-body-large",
-          children: title
-        }), note ? /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "np-select-input-option-content-text-secondary np-text-body-default",
-          children: note
-        }) : null]
-      }), description ? /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames__default.default('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__*/React.forwardRef(function TextArea({
   className,
   ...restProps
@@ -7960,7 +7304,7 @@ function Select({
       headerTitle: searchPlaceholder || formatMessage(messages$3.searchPlaceholder),
       onClose: handleCloseOptions,
       children: renderOptionsList()
-    }) : /*#__PURE__*/jsxRuntime.jsx(BottomSheet$2, {
+    }) : /*#__PURE__*/jsxRuntime.jsx(BottomSheet$1, {
       open: open,
       onClose: handleCloseOptions,
       children: renderOptionsList({
@@ -10393,10 +9737,12 @@ const PromoCardIndicator = ({
   children,
   label,
   icon,
+  isSmall = false,
   testid,
   ...rest
 }) => {
-  const IconComponent = icon && {
+  const isIconString = icon && typeof icon === 'string';
+  const IconComponent = isIconString && {
     check: icons.Check,
     arrow: icons.ArrowRight,
     download: icons.Download
@@ -10410,12 +9756,15 @@ const PromoCardIndicator = ({
       type: exports.Typography.BODY_LARGE_BOLD,
       className: "np-Card-indicatorText",
       children: label
-    }), IconComponent && /*#__PURE__*/jsxRuntime.jsx("span", {
+    }), 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: /*#__PURE__*/jsxRuntime.jsx(IconComponent, {
+      children: IconComponent ? /*#__PURE__*/jsxRuntime.jsx(IconComponent, {
         size: 24,
         "aria-hidden": "true"
-      })
+      }) : icon
     }), children]
   });
 };
@@ -10477,6 +9826,7 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
   imageClass,
   imageSource,
   indicatorLabel,
+  indicatorIcon,
   isChecked,
   isDisabled,
   onClick,
@@ -10487,6 +9837,8 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
   title,
   type,
   value,
+  isSmall,
+  useDisplayFont = true,
   ...props
 }, reference) => {
   // Set the `checked` state to the value of `defaultChecked` if it is truthy,
@@ -10510,7 +9862,19 @@ const PromoCard = /*#__PURE__*/React.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__default.default({
@@ -10527,7 +9891,8 @@ const PromoCard = /*#__PURE__*/React.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`
@@ -10555,6 +9920,27 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
     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]);
@@ -10568,17 +9954,7 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
         size: 24,
         "aria-hidden": "true"
       })
-    }), /*#__PURE__*/jsxRuntime.jsx(Display, {
-      id: `${componentId}-title`,
-      as: headingLevel,
-      className: "np-Card-title",
-      type: exports.Typography.DISPLAY_SMALL,
-      children: href && !type ? /*#__PURE__*/jsxRuntime.jsx("a", {
-        className: "np-Card-titleLink",
-        ...anchorProps,
-        children: title
-      }) : title
-    }), /*#__PURE__*/jsxRuntime.jsx(Body, {
+    }), getTitle(), /*#__PURE__*/jsxRuntime.jsx(Body, {
       className: "np-Card-description",
       children: description
     }), imageSource && /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -10592,7 +9968,8 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
       })
     }), /*#__PURE__*/jsxRuntime.jsx(PromoCardIndicator, {
       label: indicatorLabel,
-      icon: icon
+      icon: getIconType(),
+      isSmall: isSmall
     })]
   });
 });
@@ -15083,7 +14460,7 @@ exports.AvatarWrapper = AvatarWrapper;
 exports.Badge = Badge;
 exports.BaseCard = Card;
 exports.Body = Body;
-exports.BottomSheet = BottomSheet$2;
+exports.BottomSheet = BottomSheet$1;
 exports.Button = Button;
 exports.Card = Card$2;
 exports.Checkbox = Checkbox$1;
@@ -15131,7 +14508,7 @@ exports.Nudge = Nudge;
 exports.Option = Option$2;
 exports.OverlayHeader = OverlayHeader$1;
 exports.PhoneNumberInput = PhoneNumberInput$1;
-exports.Popover = Popover$2;
+exports.Popover = Popover$1;
 exports.ProcessIndicator = ProcessIndicator$1;
 exports.Progress = Progress;
 exports.ProgressBar = ProgressBar;
@@ -15143,11 +14520,8 @@ exports.Radio = Radio$1;
 exports.RadioGroup = RadioGroup$1;
 exports.RadioOption = RadioOption$1;
 exports.SUPPORTED_LANGUAGES = SUPPORTED_LANGUAGES;
-exports.SearchInput = SearchInput;
 exports.Section = Section;
 exports.Select = Select;
-exports.SelectInput = SelectInput;
-exports.SelectInputOptionContent = SelectInputOptionContent;
 exports.SlidingPanel = SlidingPanel$1;
 exports.SnackbarConsumer = SnackbarConsumer;
 exports.SnackbarContext = SnackbarContext;