@transferwise/components 46.35.0 → 46.36.0

package/build/index.mjs

@@ -2,7 +2,7 @@ import * as React from 'react';
 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, AlertCircle, ArrowLeft, QuestionMarkCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle } from '@transferwise/icons';
+import { ChevronUp, CrossCircleFill, Cross, Check, Info as Info$1, Alert as Alert$1, ClockBorderless, NavigateAway, 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';
@@ -18,7 +18,6 @@ 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';
@@ -701,40 +700,6 @@ const CloseButton = /*#__PURE__*/forwardRef(function CloseButton({
   });
 });
 
-var messages$c = defineMessages({
-  opensInNewTab: {
-    id: "neptune.Link.opensInNewTab"
-  }
-});
-
-const Link = ({
-  className,
-  children,
-  href,
-  target,
-  type,
-  'aria-label': ariaLabel,
-  onClick,
-  ...props
-}) => {
-  const isBlank = target === '_blank';
-  const {
-    formatMessage
-  } = useIntl();
-  return /*#__PURE__*/jsxs("a", {
-    href: href,
-    target: target,
-    className: classNames('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className),
-    "aria-label": ariaLabel,
-    rel: isBlank ? 'noreferrer' : undefined,
-    onClick: onClick,
-    ...props,
-    children: [children, " ", isBlank && /*#__PURE__*/jsx(NavigateAway, {
-      title: formatMessage(messages$c.opensInNewTab)
-    })]
-  });
-};
-
 const iconTypeMap = {
   positive: Check,
   neutral: Info$1,
@@ -881,6 +846,64 @@ InlineMarkdown.defaultProps = {
   className: undefined
 };
 
+var messages$c = defineMessages({
+  opensInNewTab: {
+    id: "neptune.Link.opensInNewTab"
+  }
+});
+
+const Link = ({
+  className,
+  children,
+  href,
+  target,
+  type,
+  'aria-label': ariaLabel,
+  onClick,
+  ...props
+}) => {
+  const isBlank = target === '_blank';
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/jsxs("a", {
+    href: href,
+    target: target,
+    className: classNames('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className),
+    "aria-label": ariaLabel,
+    rel: isBlank ? 'noreferrer' : undefined,
+    onClick: onClick,
+    ...props,
+    children: [children, " ", isBlank && /*#__PURE__*/jsx(NavigateAway, {
+      title: formatMessage(messages$c.opensInNewTab)
+    })]
+  });
+};
+
+function Action({
+  action,
+  className
+}) {
+  if ('href' in action) {
+    return /*#__PURE__*/jsx(Link, {
+      href: action.href,
+      className: className,
+      "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: classNames('btn-unstyled np-text-link-large', className),
+    onClick: action.onClick,
+    children: action.text
+  });
+}
+
 var AlertArrowPosition;
 (function (AlertArrowPosition) {
   AlertArrowPosition["TOP_LEFT"] = "up-left";
@@ -987,7 +1010,8 @@ function Alert({
             })
           })]
         }), action && /*#__PURE__*/jsx(Action, {
-          action: action
+          action: action,
+          className: "m-t-1"
         })]
       })]
     }), onDismiss && /*#__PURE__*/jsx(CloseButton, {
@@ -1014,28 +1038,6 @@ 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;
@@ -7797,7 +7799,8 @@ const Nudge = ({
   persistDismissal,
   isPreviouslyDismissed,
   id,
-  className
+  className,
+  action
 }) => {
   const [isDismissed, setIsDismissed] = useState(false);
   const [isMounted, setIsMounted] = useState(false);
@@ -7858,6 +7861,9 @@ const Nudge = ({
           className: "wds-nudge-link",
           onClick: onClick,
           children: link
+        }), action && /*#__PURE__*/jsx(Action, {
+          action: action,
+          className: "m-t-1"
         })]
       }), onDismiss || persistDismissal ? /*#__PURE__*/jsx(CloseButton, {
         className: "wds-nudge-control",
@@ -10120,7 +10126,7 @@ function Select({
   }, [defaultOptions, search, searchValue]);
   const selectableOptions = useMemo(() => options.filter(isActionableOption), [options]);
   const focusedOption = selectableOptions[keyboardFocusedOptionIndex];
-  const fallbackButtonId = useId$1();
+  const fallbackButtonId = useId();
   const computedId = id || inputAttributes.id || fallbackButtonId;
   const listboxId = `${computedId}-listbox`;
   const searchBoxId = `${computedId}-searchbox`;
@@ -10831,13 +10837,9 @@ const Summary = ({
         type: Typography.BODY_DEFAULT,
         className: "d-block np-summary__description",
         children: description
-      }), action && /*#__PURE__*/jsx(Link, {
-        href: action.href,
-        target: action.target,
-        className: "np-summary__action",
-        "aria-label": action['aria-label'],
-        onClick: action.onClick,
-        children: action.text
+      }), action && /*#__PURE__*/jsx(Action, {
+        action: action,
+        className: "np-summary__action"
       })]
     }), info && /*#__PURE__*/jsx(Info, {
       "aria-label": info['aria-label'],