@transferwise/components 0.0.0-experimental-ffd4b26 → 0.0.0-experimental-dfa8310

package/build/index.js

@@ -746,7 +746,7 @@ const StatusIcon = ({
   const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
   return /*#__PURE__*/jsxRuntime.jsx("span", {
     "data-testid": "status-icon",
-    className: classNames__default.default('status-circle', 'status-circle-' + size, sentiment),
+    className: classNames__default.default('status-circle', `status-circle-${size}`, sentiment),
     children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
       className: classNames__default.default('status-icon', iconColor)
     })
@@ -4866,14 +4866,20 @@ function InlineAlert({
   className,
   children
 }) {
-  const danger = type === 'negative' || type === 'error';
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     role: "alert",
     id: id,
-    className: classNames__default.default('alert alert-detach', `alert-${danger ? 'danger' : type}`, className),
-    children: [danger && /*#__PURE__*/jsxRuntime.jsx(icons.AlertCircle, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
-      children: children
-    })]
+    className: classNames__default.default('alert alert-detach', `alert-${type === exports.Sentiment.NEGATIVE || type === exports.Sentiment.ERROR ? 'danger' : type}`, className),
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "d-inline-flex",
+      children: [type !== exports.Sentiment.NEUTRAL && type !== exports.Sentiment.PENDING && /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
+        sentiment: type,
+        size: exports.Size.SMALL
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "np-text-body-default",
+        children: children
+      })]
+    })
   });
 }
 
@@ -4894,13 +4900,15 @@ const Label = ({
 const Field = ({
   id,
   label,
-  hint,
-  error,
+  message: propMessage,
+  sentiment: propType = exports.Sentiment.NEUTRAL,
   className,
-  children
+  children,
+  ...props
 }) => {
-  const hasError = Boolean(error);
-  const hasHint = Boolean(hint) && !hasError;
+  const sentiment = props.error ? exports.Sentiment.NEGATIVE : propType;
+  const message = props.error || props.hint || propMessage;
+  const hasError = sentiment === exports.Sentiment.NEGATIVE;
   const labelId = React.useId();
   const fallbackInputId = React.useId();
   const inputId = id !== null ? id ?? fallbackInputId : undefined;
@@ -4910,26 +4918,24 @@ const Field = ({
     children: /*#__PURE__*/jsxRuntime.jsx(InputIdContextProvider, {
       value: inputId,
       children: /*#__PURE__*/jsxRuntime.jsx(InputDescribedByProvider, {
-        value: hasError || hasHint ? descriptionId : undefined,
+        value: message ? descriptionId : undefined,
         children: /*#__PURE__*/jsxRuntime.jsx(InputInvalidProvider, {
           value: hasError,
           children: /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: classNames__default.default('form-group d-block', {
+              'has-success': sentiment === exports.Sentiment.POSITIVE,
+              'has-warning': sentiment === exports.Sentiment.WARNING,
               'has-error': hasError,
-              'has-info': hasHint
+              'has-info': sentiment === exports.Sentiment.NEUTRAL
             }, className),
             children: [/*#__PURE__*/jsxRuntime.jsxs(Label, {
               id: labelId,
               htmlFor: inputId,
               children: [label, children]
-            }), hasHint && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
-              type: exports.Sentiment.NEUTRAL,
+            }), message && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
+              type: sentiment,
               id: descriptionId,
-              children: hint
-            }), hasError && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
-              type: exports.Sentiment.NEGATIVE,
-              id: descriptionId,
-              children: error
+              children: message
             })]
           })
         })
@@ -6259,6 +6265,11 @@ const PolymorphicWithOverrides = /*#__PURE__*/React.forwardRef(function Polymorp
   });
 });
 
+/**
+ * This progressive enhancement uses an experimental API, it might change,
+ * and at the time of authoring is not supported on iOS or mobile Firefox.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard
+ */
 function useVirtualKeyboard() {
   React.useEffect(() => {
     /* eslint-disable @typescript-eslint/no-unsafe-member-access, functional/immutable-data */