@transferwise/components 0.0.0-experimental-5a9bfa5 → 0.0.0-experimental-0cfd3cc

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, 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, Bin } 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, CheckCircleFill, ArrowLeft, QuestionMarkCircle, Search, CrossCircle, ChevronDown, ClockFill, Upload as Upload$2, AlertCircle, Document, Plus, PlusCircle, Bin } from '@transferwise/icons';
 import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
 import commonmark from 'commonmark';
 import { useTheme, ThemeProvider } from '@wise/components-theming';
@@ -4854,7 +4854,10 @@ function InlineAlert({
     role: "alert",
     id: id,
     className: classNames('alert alert-detach', `alert-${danger ? 'danger' : type}`, className),
-    children: [danger && /*#__PURE__*/jsx(AlertCircle, {}), /*#__PURE__*/jsx("div", {
+    children: [type === 'positive' && /*#__PURE__*/jsx(CheckCircleFill, {}), type === 'warning' && /*#__PURE__*/jsx(StatusIcon, {
+      sentiment: Sentiment.WARNING,
+      size: Size.SMALL
+    }), danger && /*#__PURE__*/jsx(CrossCircleFill, {}), /*#__PURE__*/jsx("div", {
       children: children
     })]
   });
@@ -4878,10 +4881,14 @@ const Field = ({
   id,
   label,
   hint,
+  success,
+  warning,
   error,
   className,
   children
 }) => {
+  const hasSuccess = Boolean(success);
+  const hasWarning = Boolean(warning);
   const hasError = Boolean(error);
   const hasHint = Boolean(hint) && !hasError;
   const labelId = useId();
@@ -4898,6 +4905,8 @@ const Field = ({
           value: hasError,
           children: /*#__PURE__*/jsxs("div", {
             className: classNames('form-group d-block', {
+              'has-positive': hasSuccess,
+              'has-warning': hasWarning,
               'has-error': hasError,
               'has-info': hasHint
             }, className),
@@ -4909,6 +4918,14 @@ const Field = ({
               type: Sentiment.NEUTRAL,
               id: descriptionId,
               children: hint
+            }), hasSuccess && /*#__PURE__*/jsx(InlineAlert, {
+              type: Sentiment.POSITIVE,
+              id: descriptionId,
+              children: success
+            }), hasWarning && /*#__PURE__*/jsx(InlineAlert, {
+              type: Sentiment.WARNING,
+              id: descriptionId,
+              children: warning
             }), hasError && /*#__PURE__*/jsx(InlineAlert, {
               type: Sentiment.NEGATIVE,
               id: descriptionId,