@transferwise/components 0.0.0-experimental-e477c03 → 0.0.0-experimental-7709e0e

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, CheckCircleFill, ArrowLeft, QuestionMarkCircle, Search, CrossCircle, ChevronDown, 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, ArrowLeft, QuestionMarkCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ClockFill, Upload as Upload$2, 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';
@@ -717,7 +717,7 @@ const StatusIcon = ({
   const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
   return /*#__PURE__*/jsx("span", {
     "data-testid": "status-icon",
-    className: classNames('status-circle', 'status-circle-' + size, sentiment),
+    className: classNames('status-circle', `status-circle-${size}`, sentiment),
     children: /*#__PURE__*/jsx(Icon, {
       className: classNames('status-icon', iconColor)
     })
@@ -4837,44 +4837,20 @@ function InlineAlert({
   className,
   children
 }) {
-  const getStatusIcon = sentiment => {
-    switch (sentiment) {
-      case Sentiment.POSITIVE:
-      case Sentiment.SUCCESS:
-        return /*#__PURE__*/jsx(CheckCircleFill, {});
-      case Sentiment.WARNING:
-        return /*#__PURE__*/jsx(AlertCircleFill, {});
-      case Sentiment.NEGATIVE:
-      case Sentiment.ERROR:
-        return /*#__PURE__*/jsx(CrossCircleFill, {});
-      default:
-        return null;
-    }
-  };
-  const hasTextChildren = content => {
-    let label = '';
-    const fillLabel = childrenNodes => {
-      React__default.Children.map(childrenNodes, child => {
-        if (typeof child === 'string') {
-          label += child;
-        }
-        if (typeof child === 'object' && /*#__PURE__*/React__default.isValidElement(child)) {
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-          fillLabel(child?.props?.children);
-        }
-      });
-    };
-    fillLabel(content);
-    return !!label.length;
-  };
-  return /*#__PURE__*/jsxs("div", {
+  return /*#__PURE__*/jsx("div", {
     role: "alert",
     id: id,
     className: classNames('alert alert-detach', `alert-${[Sentiment.NEGATIVE, Sentiment.ERROR].includes(type) ? 'danger' : type}`, className),
-    children: [hasTextChildren(children) && getStatusIcon(type), /*#__PURE__*/jsx("div", {
-      className: "np-text-body-default",
-      children: children
-    })]
+    children: /*#__PURE__*/jsxs("div", {
+      className: "d-inline-flex",
+      children: [type !== Sentiment.NEUTRAL && type !== Sentiment.PENDING && /*#__PURE__*/jsx(StatusIcon, {
+        sentiment: type,
+        size: Size.SMALL
+      }), /*#__PURE__*/jsx("div", {
+        className: "np-text-body-default",
+        children: children
+      })]
+    })
   });
 }
 
@@ -4887,7 +4863,7 @@ const Label = ({
   return /*#__PURE__*/jsx("label", {
     id: id,
     htmlFor: htmlFor,
-    className: classNames('control-label d-flex flex-column gap-y-xs m-b-0', className),
+    className: classNames('control-label d-flex flex-column gap-y-1 m-b-0', className),
     children: children
   });
 };