@hyphen/hyphen-components 2.10.0 → 2.11.0

package/dist/hyphen-components.esm.js

@@ -805,7 +805,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     display: "inline-flex",
     direction: "row",
     alignItems: "center",
-    gap: "xs"
+    gap: "md"
   }, isLoading && React.createElement(Spinner, {
     className: styles$r['spinner-wrapper']
   }), iconPrefix && React.createElement(Icon, {
@@ -4020,7 +4020,7 @@ var useTheme = function useTheme() {
   return context;
 };
 
-var styles = {"toast-notification":"ToastNotification-module_toast-notification__2xiTW","toast-dismiss":"ToastNotification-module_toast-dismiss__xxmkb","toast-notification-enter-top":"ToastNotification-module_toast-notification-enter-top__ZZDCr","toast-notification-exit-top":"ToastNotification-module_toast-notification-exit-top__fOIkZ","toast-notification-enter-bottom":"ToastNotification-module_toast-notification-enter-bottom__So3w7","toast-notification-exit-bottom":"ToastNotification-module_toast-notification-exit-bottom__DDthi","toast-notification-exit-left":"ToastNotification-module_toast-notification-exit-left__Fh1hC","toast-notification-exit-right":"ToastNotification-module_toast-notification-exit-right__C1jQ9","toast-notification-fade-in":"ToastNotification-module_toast-notification-fade-in__JlSGi","toast-notification-fade-out":"ToastNotification-module_toast-notification-fade-out__r6q4Q"};
+var styles = {"toast-notification":"ToastNotification-module_toast-notification__2xiTW","toast-error":"ToastNotification-module_toast-error__4ArAY","toast-dismiss":"ToastNotification-module_toast-dismiss__xxmkb","toast-notification-enter-top":"ToastNotification-module_toast-notification-enter-top__ZZDCr","toast-notification-exit-top":"ToastNotification-module_toast-notification-exit-top__fOIkZ","toast-notification-enter-bottom":"ToastNotification-module_toast-notification-enter-bottom__So3w7","toast-notification-exit-bottom":"ToastNotification-module_toast-notification-exit-bottom__DDthi","toast-notification-exit-left":"ToastNotification-module_toast-notification-exit-left__Fh1hC","toast-notification-exit-right":"ToastNotification-module_toast-notification-exit-right__C1jQ9","toast-notification-fade-in":"ToastNotification-module_toast-notification-fade-in__JlSGi","toast-notification-fade-out":"ToastNotification-module_toast-notification-fade-out__r6q4Q"};
 
 var getAnimationClass = function getAnimationClass(position, visible) {
   var verticalPosition = position.includes('top') ? 'top' : 'bottom';
@@ -4042,7 +4042,7 @@ var renderToastIcon = function renderToastIcon(toast) {
   }
   if (type === 'error') {
     iconName = 'c-warning';
-    iconColor = 'danger';
+    iconColor = 'white';
   }
   var icon = type !== 'loading' ? React.createElement(Icon, {
     name: iconName,
@@ -4059,7 +4059,7 @@ var renderDismissIcon = function renderDismissIcon(toast, onDismiss) {
   // eslint-disable-next-line consistent-return
   return React.createElement(Box, {
     as: "button",
-    borderWidth: "0 0 0 sm",
+    borderWidth: "0",
     className: styles['toast-dismiss'],
     padding: "0 0 0 sm",
     alignItems: "center",
@@ -4076,6 +4076,7 @@ var renderDismissIcon = function renderDismissIcon(toast, onDismiss) {
 };
 // eslint-disable-next-line import/prefer-default-export
 var ToastNotification = /*#__PURE__*/React.memo(function (_ref2) {
+  var _classNames;
   var toast = _ref2.toast,
     _ref2$position = _ref2.position,
     position = _ref2$position === void 0 ? 'top-center' : _ref2$position,
@@ -4090,9 +4091,9 @@ var ToastNotification = /*#__PURE__*/React.memo(function (_ref2) {
     }
   }, toast.ariaProps), resolveValue(toast.message, toast));
   var animationClass = toast != null && toast.height ? getAnimationClass(toast.position || position, toast.visible) : undefined;
-  var classes = classNames(toast.className, styles['toast-notification'], animationClass, {
+  var classes = classNames(toast.className, styles['toast-notification'], animationClass, (_classNames = {
     'toast-notification--not-visible': !toast.visible
-  });
+  }, _classNames[styles['toast-error']] = toast.type === 'error', _classNames));
   return React.createElement(Box, {
     alignItems: "center",
     maxWidth: "300px",