@transferwise/components 46.33.0 → 46.35.0

package/build/index.mjs

@@ -1,9 +1,8 @@
 import * as React 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 React__default, { forwardRef, useId, cloneElement, useState, useEffect, useRef, useMemo, Component, createContext, useContext, useSyncExternalStore, useCallback, useImperativeHandle, createElement, PureComponent, createRef, isValidElement, Children, Fragment as Fragment$1 } from 'react';
 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, ArrowRight, Download, ChevronLeft, ChevronRight, AlertCircleFill, ArrowLeft, AlertCircle, QuestionMarkCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, 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, AlertCircle, ArrowLeft, 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';
@@ -11,7 +10,6 @@ import { useTheme, ThemeProvider } from '@wise/components-theming';
 import { CSSTransition } from 'react-transition-group';
 import { FocusScope } from '@react-aria/focus';
 import { createPortal } from 'react-dom';
-import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 import { isUndefined, isNumber, isEmpty, isNull } from '@transferwise/neptune-validation';
 import { formatDate, formatMoney, formatAmount } from '@transferwise/formatting';
 import { Transition, Listbox } from '@headlessui/react';
@@ -20,6 +18,7 @@ import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, Floa
 import { usePreventScroll } from '@react-aria/overlays';
 import { usePopper } from 'react-popper';
 import { Flag, Illustration } from '@wise/art';
+import { useId as useId$1 } from '@radix-ui/react-id';
 import clamp$2 from 'lodash.clamp';
 import debounce from 'lodash.debounce';
 import requiredIf from 'react-required-if';
@@ -950,7 +949,7 @@ function Alert({
     "data-testid": "alert",
     onTouchStart: () => setShouldFire(true),
     onTouchEnd: event => {
-      if (shouldFire && action &&
+      if (shouldFire && action?.href &&
       // Check if current event is triggered from closeButton
       event.target instanceof Node && closeButtonReference.current && !closeButtonReference.current.contains(event.target)) {
         if (action.target === '_blank') {
@@ -987,13 +986,8 @@ function Alert({
               children: message
             })
           })]
-        }), action && /*#__PURE__*/jsx(Link, {
-          href: action.href,
-          className: "m-t-1",
-          "aria-label": action['aria-label'],
-          target: action.target,
-          type: Typography.LINK_LARGE,
-          children: action.text
+        }), action && /*#__PURE__*/jsx(Action, {
+          action: action
         })]
       })]
     }), onDismiss && /*#__PURE__*/jsx(CloseButton, {
@@ -1020,6 +1014,28 @@ function alertArrowClassNames(arrow) {
       return 'arrow';
   }
 }
+function Action({
+  action
+}) {
+  if ('href' in action) {
+    return /*#__PURE__*/jsx(Link, {
+      href: action.href,
+      className: "m-t-1",
+      "aria-label": action['aria-label'],
+      target: action.target,
+      type: Typography.LINK_LARGE,
+      onClick: action.onClick,
+      children: action.text
+    });
+  }
+  return /*#__PURE__*/jsx("button", {
+    type: "button",
+    "aria-label": action['aria-label'],
+    className: "btn-unstyled np-text-link-large m-t-1",
+    onClick: action.onClick,
+    children: action.text
+  });
+}
 
 // TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
 var AvatarType;
@@ -1234,68 +1250,67 @@ const radius = {
 };
 const ANIMATION_DURATION_IN_MS = 1500;
 class ProcessIndicator extends Component {
+  static defaultProps = {
+    status: 'processing',
+    size: 'sm'
+  };
+  interval = 0;
+  timeout = 0;
   constructor(props) {
     super(props);
     this.state = {
       status: props.status,
       size: props.size
     };
-    this.interval = null;
-    this.timeout = null;
   }
-
   /**
    * Create interval for animation duration (1500ms)
    * Update state only at the end of every interval
    * (end of animation loop) if props changed before end of animation
    */
   componentDidMount() {
-    this.interval = setInterval(() => {
-      const statusFromState = this.state.status;
-      const sizeFromState = this.state.size;
-      const statusFromProps = this.props.status;
-      const sizeFromProps = this.props.size;
-      if (statusFromState !== statusFromProps) {
+    this.interval = window.setInterval(() => {
+      const {
+        status: targetStatus,
+        size: targetSize,
+        onAnimationCompleted
+      } = this.props;
+      const {
+        status: currentStatus,
+        size: currentSize
+      } = this.state;
+      if (currentStatus !== targetStatus) {
         this.setState({
-          status: statusFromProps
-        }, this.runCallBack(statusFromProps));
+          status: targetStatus
+        }, () => {
+          if (onAnimationCompleted) {
+            this.timeout = window.setTimeout(() => {
+              onAnimationCompleted(targetStatus);
+            }, ANIMATION_DURATION_IN_MS);
+          }
+        });
       }
-      if (sizeFromState !== sizeFromProps) {
+      if (currentSize !== targetSize) {
         this.setState({
-          size: sizeFromProps
+          size: targetSize
         });
       }
     }, ANIMATION_DURATION_IN_MS);
   }
-
   /**
    * Only trigger render if comopnent's state got
    * updated from interval callback
-   *
-   * @param nextProps
-   * @param nextState
    */
   shouldComponentUpdate(nextProps, nextState) {
     const isSameStatus = nextProps.status === nextState.status;
     const isSameSize = nextProps.size === nextState.size;
     return isSameStatus && isSameSize;
   }
-
   // Clear interval before destroying component
   componentWillUnmount() {
-    clearInterval(this.interval);
-    clearTimeout(this.timeout);
+    window.clearInterval(this.interval);
+    window.clearTimeout(this.timeout);
   }
-  runCallBack = statusFromProps => {
-    const {
-      onAnimationCompleted
-    } = this.props;
-    if (onAnimationCompleted) {
-      this.timeouts = setTimeout(() => {
-        onAnimationCompleted(statusFromProps);
-      }, ANIMATION_DURATION_IN_MS);
-    }
-  };
   render() {
     const {
       className,
@@ -1326,28 +1341,13 @@ class ProcessIndicator extends Component {
           className: "process-circle",
           cx: "50%",
           cy: "50%",
-          r: radius[this.state.size],
+          r: radius[size],
           fillOpacity: "0.0"
         })
       })]
     });
   }
 }
-ProcessIndicator.propTypes = {
-  status: PropTypes.oneOf(['processing', 'failed', 'succeeded', 'hidden']),
-  size: PropTypes.oneOf(['xxs', 'xs', 'sm', 'xl']),
-  onAnimationCompleted: PropTypes.func,
-  className: PropTypes.string,
-  'data-testid': PropTypes.string
-};
-ProcessIndicator.defaultProps = {
-  status: Status.PROCESSING,
-  size: Size.SMALL,
-  onAnimationCompleted: null,
-  className: undefined,
-  'data-testid': null
-};
-var ProcessIndicator$1 = ProcessIndicator;
 
 var messages$b = defineMessages({
   loadingAriaLabel: {
@@ -1469,7 +1469,7 @@ const Button = /*#__PURE__*/forwardRef(({
     ...props,
     "aria-live": loading ? 'polite' : 'off',
     "aria-label": loading ? intl.formatMessage(messages$b.loadingAriaLabel) : rest['aria-label'],
-    children: [children, loading && /*#__PURE__*/jsx(ProcessIndicator$1, {
+    children: [children, loading && /*#__PURE__*/jsx(ProcessIndicator, {
       size: processIndicatorSize(),
       className: "btn-loader"
     })]
@@ -1620,7 +1620,6 @@ const useHasIntersected = ({
   return [hasIntersected];
 };
 
-// eslint-disable-next-line import/extensions
 function useMedia(query) {
   return useSyncExternalStore(onStoreChange => {
     const mediaQueryList = window.matchMedia(query);
@@ -2832,12 +2831,12 @@ Drawer.propTypes = {
   footerContent: PropTypes.node,
   /** The content to appear in the drawer header. */
   headerTitle: PropTypes.node,
-  /** The action to perform on close click. */
-  onClose: PropTypes.func,
   /** The status of Drawer either open or not. */
   open: PropTypes.bool,
   /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */
-  position: PropTypes.oneOf(['left', 'right', 'bottom'])
+  position: PropTypes.oneOf(['left', 'right', 'bottom']),
+  /** The action to perform on close click. */
+  onClose: PropTypes.func
 };
 Drawer.defaultProps = {
   children: null,
@@ -3512,7 +3511,7 @@ const fallbackPlacements = {
   [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],
   [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM]
 };
-const Panel = /*#__PURE__*/forwardRef(({
+const Panel = /*#__PURE__*/forwardRef(function Panel({
   arrow = false,
   flip = true,
   altAxis = false,
@@ -3523,7 +3522,7 @@ const Panel = /*#__PURE__*/forwardRef(({
   anchorRef,
   anchorWidth = false,
   ...rest
-}, reference) => {
+}, reference) {
   const [arrowElement, setArrowElement] = useState(null);
   const [popperElement, setPopperElement] = useState(null);
   const modifiers = [];
@@ -3601,7 +3600,7 @@ const Panel = /*#__PURE__*/forwardRef(({
       ...attributes.popper,
       className: classNames('np-panel', {
         'np-panel--open': open
-      }, rest['className']),
+      }, rest.className),
       children: /*#__PURE__*/jsxs("div", {
         ref: reference
         /* eslint-disable-next-line react/forbid-dom-props */,
@@ -3620,7 +3619,7 @@ const Panel = /*#__PURE__*/forwardRef(({
 });
 var Panel$1 = Panel;
 
-const ResponsivePanel = /*#__PURE__*/forwardRef(({
+const ResponsivePanel = /*#__PURE__*/forwardRef(function ResponsivePanel({
   anchorRef,
   arrow = false,
   flip = true,
@@ -3629,7 +3628,7 @@ const ResponsivePanel = /*#__PURE__*/forwardRef(({
   onClose,
   open = false,
   position = Position.BOTTOM
-}, reference) => {
+}, reference) {
   const {
     isMobile
   } = useLayout();
@@ -4968,6 +4967,84 @@ const Emphasis = ({
   }) : null;
 };
 
+function InlineAlert({
+  id,
+  type = 'neutral',
+  className,
+  children
+}) {
+  const danger = type === 'negative' || type === 'error';
+  return /*#__PURE__*/jsxs("div", {
+    role: "alert",
+    id: id,
+    className: classNames('alert alert-detach', `alert-${danger ? 'danger' : type}`, className),
+    children: [danger && /*#__PURE__*/jsx(AlertCircle, {}), /*#__PURE__*/jsx("div", {
+      children: children
+    })]
+  });
+}
+
+const Label = ({
+  id,
+  htmlFor,
+  className,
+  children
+}) => {
+  return /*#__PURE__*/jsx("label", {
+    id: id,
+    htmlFor: htmlFor,
+    className: classNames('control-label d-flex flex-column gap-y-1 m-b-0', className),
+    children: children
+  });
+};
+
+const Field = ({
+  id,
+  label,
+  hint,
+  error,
+  className,
+  children
+}) => {
+  const hasError = Boolean(error);
+  const hasHint = Boolean(hint) && !hasError;
+  const labelId = useId();
+  const fallbackInputId = useId();
+  const inputId = id !== null ? id ?? fallbackInputId : undefined;
+  const descriptionId = useId();
+  return /*#__PURE__*/jsx(FieldLabelIdContextProvider, {
+    value: labelId,
+    children: /*#__PURE__*/jsx(InputIdContextProvider, {
+      value: inputId,
+      children: /*#__PURE__*/jsx(InputDescribedByProvider, {
+        value: hasError || hasHint ? descriptionId : undefined,
+        children: /*#__PURE__*/jsx(InputInvalidProvider, {
+          value: hasError,
+          children: /*#__PURE__*/jsxs("div", {
+            className: classNames('form-group d-block', {
+              'has-error': hasError,
+              'has-info': hasHint
+            }, className),
+            children: [/*#__PURE__*/jsxs(Label, {
+              id: labelId,
+              htmlFor: inputId,
+              children: [label, children]
+            }), hasHint && /*#__PURE__*/jsx(InlineAlert, {
+              type: Sentiment.NEUTRAL,
+              id: descriptionId,
+              children: hint
+            }), hasError && /*#__PURE__*/jsx(InlineAlert, {
+              type: Sentiment.NEGATIVE,
+              id: descriptionId,
+              children: error
+            })]
+          })
+        })
+      })
+    })
+  });
+};
+
 const FlowHeader = /*#__PURE__*/React.forwardRef(({
   bottomContent,
   className,
@@ -5214,42 +5291,40 @@ const Tooltip = ({
       forceUpdate();
     }
   }, [open]);
-  return /*#__PURE__*/jsx(Fragment, {
-    children: /*#__PURE__*/jsxs("span", {
-      ref: anchorReference,
-      className: "tw-tooltip-container",
-      onMouseOver: () => setOpen(true),
-      onFocus: () => setOpen(true),
-      onMouseOut: () => setOpen(false),
-      onBlur: () => setOpen(false),
-      children: [children ? /*#__PURE__*/cloneElement(children, {
-        'aria-describedby': `${tooltipId}-tooltip`
-      }) : null, /*#__PURE__*/jsx("div", {
-        // @ts-expect-error
-        ref: setPopperElement,
-        className: classNames('np-tooltip', 'np-panel', open ? `np-panel--open np-tooltip--open` : null, className)
-        // eslint-disable-next-line react/forbid-dom-props
-        ,
-        style: {
-          ...styles.popper
-        },
-        ...attributes.popper,
-        "aria-hidden": !open,
-        role: "tooltip",
-        id: `${tooltipId}-tooltip`,
-        children: /*#__PURE__*/jsxs("div", {
-          className: "np-panel__content tooltip-inner",
-          children: [label, /*#__PURE__*/jsx("div", {
-            // @ts-expect-error
-            ref: setArrowElement,
-            className: classNames('np-panel__arrow')
-            // eslint-disable-next-line react/forbid-dom-props
-            ,
-            style: styles.arrow
-          })]
-        })
-      })]
-    })
+  return /*#__PURE__*/jsxs("span", {
+    ref: anchorReference,
+    className: "tw-tooltip-container",
+    onMouseOver: () => setOpen(true),
+    onFocus: () => setOpen(true),
+    onMouseOut: () => setOpen(false),
+    onBlur: () => setOpen(false),
+    children: [children ? /*#__PURE__*/cloneElement(children, {
+      'aria-describedby': `${tooltipId}-tooltip`
+    }) : null, /*#__PURE__*/jsx("div", {
+      // @ts-expect-error
+      ref: setPopperElement,
+      className: classNames('np-tooltip', 'np-panel', open ? `np-panel--open np-tooltip--open` : null, className)
+      // eslint-disable-next-line react/forbid-dom-props
+      ,
+      style: {
+        ...styles.popper
+      },
+      ...attributes.popper,
+      "aria-hidden": !open,
+      role: "tooltip",
+      id: `${tooltipId}-tooltip`,
+      children: /*#__PURE__*/jsxs("div", {
+        className: "np-panel__content tooltip-inner",
+        children: [label, /*#__PURE__*/jsx("div", {
+          // @ts-expect-error
+          ref: setArrowElement,
+          className: classNames('np-panel__arrow')
+          // eslint-disable-next-line react/forbid-dom-props
+          ,
+          style: styles.arrow
+        })]
+      })
+    })]
   });
 };
 
@@ -5447,84 +5522,6 @@ const FlowNavigation = ({
   });
 };
 
-function InlineAlert({
-  id,
-  type = 'neutral',
-  className,
-  children
-}) {
-  const danger = type === 'negative' || type === 'error';
-  return /*#__PURE__*/jsxs("div", {
-    role: "alert",
-    id: id,
-    className: classNames('alert alert-detach', `alert-${danger ? 'danger' : type}`, className),
-    children: [danger && /*#__PURE__*/jsx(AlertCircle, {}), /*#__PURE__*/jsx("div", {
-      children: children
-    })]
-  });
-}
-
-const Label = ({
-  id,
-  htmlFor,
-  className,
-  children
-}) => {
-  return /*#__PURE__*/jsx("label", {
-    id: id,
-    htmlFor: htmlFor,
-    className: classNames('control-label d-flex flex-column gap-y-1 m-b-0', className),
-    children: children
-  });
-};
-
-const Field = ({
-  id,
-  label,
-  hint,
-  error,
-  className,
-  children
-}) => {
-  const hasError = Boolean(error);
-  const hasHint = Boolean(hint) && !hasError;
-  const labelId = useId();
-  const fallbackInputId = useId(); // TODO: Use `React.useId()` when react>=18
-  const inputId = id !== null ? id ?? fallbackInputId : undefined;
-  const descriptionId = useId(); // TODO: Use `React.useId()` when react>=18
-  return /*#__PURE__*/jsx(FieldLabelIdContextProvider, {
-    value: labelId,
-    children: /*#__PURE__*/jsx(InputIdContextProvider, {
-      value: inputId,
-      children: /*#__PURE__*/jsx(InputDescribedByProvider, {
-        value: hasError || hasHint ? descriptionId : undefined,
-        children: /*#__PURE__*/jsx(InputInvalidProvider, {
-          value: hasError,
-          children: /*#__PURE__*/jsxs("div", {
-            className: classNames('form-group d-block', {
-              'has-error': hasError,
-              'has-info': hasHint
-            }, className),
-            children: [/*#__PURE__*/jsxs(Label, {
-              id: labelId,
-              htmlFor: inputId,
-              children: [label, children]
-            }), hasHint && /*#__PURE__*/jsx(InlineAlert, {
-              type: Sentiment.NEUTRAL,
-              id: descriptionId,
-              children: hint
-            }), hasError && /*#__PURE__*/jsx(InlineAlert, {
-              type: Sentiment.NEGATIVE,
-              id: descriptionId,
-              children: error
-            })]
-          })
-        })
-      })
-    })
-  });
-};
-
 const HeaderAction = ({
   action
 }) => {
@@ -6134,10 +6131,9 @@ class WithDisplayFormat extends Component {
         return 'Backspace';
       }
       return triggerEvent.key;
-    } else {
-      // triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
-      return 'Paste';
     }
+    // triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
+    return 'Paste';
   };
   resetEvent = () => {
     this.setState({
@@ -6290,11 +6286,10 @@ class WithDisplayFormat extends Component {
       selectionEnd,
       pastedLength
     } = this.state;
+    const target = triggerEvent?.currentTarget;
     const cursorPosition = getCursorPositionAfterActionStroke(action, selectionStart, selectionEnd, displayPattern, pastedLength);
     setTimeout(() => {
-      if (triggerEvent) {
-        triggerEvent.target.setSelectionRange(cursorPosition, cursorPosition);
-      }
+      target?.setSelectionRange(cursorPosition, cursorPosition);
       this.setState({
         selectionStart: cursorPosition,
         selectionEnd: cursorPosition
@@ -10125,7 +10120,7 @@ function Select({
   }, [defaultOptions, search, searchValue]);
   const selectableOptions = useMemo(() => options.filter(isActionableOption), [options]);
   const focusedOption = selectableOptions[keyboardFocusedOptionIndex];
-  const fallbackButtonId = useId();
+  const fallbackButtonId = useId$1();
   const computedId = id || inputAttributes.id || fallbackButtonId;
   const listboxId = `${computedId}-listbox`;
   const searchBoxId = `${computedId}-searchbox`;
@@ -12587,7 +12582,7 @@ const ProcessingStep = props => {
     "aria-hidden": isComplete,
     children: /*#__PURE__*/jsxs("div", {
       className: "droppable-card-content",
-      children: [/*#__PURE__*/jsx(ProcessIndicator$1, {
+      children: [/*#__PURE__*/jsx(ProcessIndicator, {
         size: Size.Small,
         status: processStatus,
         onAnimationCompleted: status => onAnimationCompleted(status)
@@ -13410,7 +13405,7 @@ const UploadItem = ({
     switch (status) {
       case Status.PROCESSING:
       case Status.PENDING:
-        processIndicator = /*#__PURE__*/jsx(ProcessIndicator$1, {
+        processIndicator = /*#__PURE__*/jsx(ProcessIndicator, {
           size: Size.EXTRA_SMALL,
           status: Status.PROCESSING
         });
@@ -13421,7 +13416,7 @@ const UploadItem = ({
         processIndicator = isModern ? /*#__PURE__*/jsx(StatusIcon, {
           size: Size.SMALL,
           sentiment: Sentiment.POSITIVE
-        }) : /*#__PURE__*/jsx(ProcessIndicator$1, {
+        }) : /*#__PURE__*/jsx(ProcessIndicator, {
           size: Size.EXTRA_SMALL,
           status: Status.SUCCEEDED
         });
@@ -13436,7 +13431,7 @@ const UploadItem = ({
       children: processIndicator
     }); // Scale down ProcessIndicator to be 20px*20px to match `icons`
   };
-  const getErrorMessage = () => typeof error === 'object' && error.message || error || formatMessage(MESSAGES.uploadingFailed);
+  const getErrorMessage = () => typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);
   const getDescription = () => {
     if (error || status === Status.FAILED) {
       return /*#__PURE__*/jsx(Body, {
@@ -14773,5 +14768,5 @@ const translations = {
   'zh-HK': zhHK
 };
 
-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 };
+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, 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