@hyphen/hyphen-components 2.10.0 → 2.11.0

package/dist/css/index.css

@@ -29,4 +29,4 @@
 .TableRow-module_table-row__-Y9FQ.TableRow-module_hoverable__53-l9{background-color:var(--table-row-hover-background)}
 .TableBodyCell-module_table-cell__pKl29{border-bottom-style:solid;border-color:var(--color-border-default);border-width:0 0 var(--size-border-width-sm) 0;color:var(--color-font-base);padding:var(--size-spacing-md) var(--size-spacing-lg)}.TableBodyCell-module_table-cell__pKl29.TableBodyCell-module_borderless__qwKQA{border-width:0}.TableBodyCell-module_table-cell__pKl29.TableBodyCell-module_compact__zfdBf{padding:var(--size-spacing-sm) var(--size-spacing-md)}.TableBodyCell-module_table-cell__pKl29.TableBodyCell-module_truncated__4YtPF{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.TableBodyCell-module_table-cell__pKl29.TableBodyCell-module_sticky-column-left__tKIGW{background-color:var(--color-background-primary);left:0}.TableBodyCell-module_table-cell__pKl29.TableBodyCell-module_sticky-column-right__680hS{background-color:var(--color-background-primary);right:0}.TableBodyCell-module_table-cell__pKl29.TableBodyCell-module_sticky-column__QpEbV{background-color:var(--color-background-primary);box-shadow:5px 0 5px -2px rgba(0,0,0,.1),-5px 0 5px -2px rgba(0,0,0,.1);position:sticky;z-index:calc(var(--size-z-index-sticky) - 1)}.TableBodyCell-module_table-cell__pKl29.TableBodyCell-module_align-right__j-VqN{text-align:right}.TableBodyCell-module_table-cell__pKl29.TableBodyCell-module_align-center__saqzC{text-align:center}
 .TableHeaderCell-module_table-header-cell__aufSm{background-color:var(--color-background-primary);border-bottom-style:solid;border-color:var(--color-border-default);border-width:0 0 var(--size-border-width-sm) 0;color:var(--color-font-primary);font-size:var(--size-font-size-sm);font-weight:var(--size-font-weight-bold);letter-spacing:.05em;padding:var(--size-spacing-md) var(--size-spacing-lg);text-align:left;text-transform:uppercase;white-space:nowrap}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_sortable__qjrkY{cursor:pointer}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_borderless__uos2k{border-width:0}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_truncated__wmNfw{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_compact__ujtrZ{padding:var(--size-spacing-sm) var(--size-spacing-md)}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_sticky-header__PEP9t{position:sticky;top:0;z-index:var(--size-z-index-sticky)}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_sticky-column-left__t8qIz{left:0}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_sticky-column-right__6D8-X{right:0}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_sticky-column__g9ybV{background-color:var(--color-background-primary);box-shadow:5px 0 5px -2px rgba(0,0,0,.1),-5px 0 5px -2px rgba(0,0,0,.1);position:sticky;z-index:calc(var(--size-z-index-sticky) + 1)}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_align-right__Qw0YQ{text-align:right}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_align-center__1RmCS{text-align:center}.TableHeaderCell-module_table-header-cell__aufSm .TableHeaderCell-module_heading__fEcYT{white-space:nowrap}.TableHeaderCell-module_table-header-cell__aufSm .TableHeaderCell-module_heading__fEcYT .TableHeaderCell-module_sort-icon__SHgic{margin-left:var(--size-spacing-xs)}
-.ToastNotification-module_toast-notification__2xiTW{background-color:var(--color-background-primary);border:1px solid var(--color-border-subtle);border-radius:var(--size-border-radius-lg);box-shadow:var(--size-box-shadow-md);color:var(--color-font-primary);font-size:var(--size-font-size-sm);pointer-events:auto;will-change:transform}.ToastNotification-module_toast-dismiss__xxmkb{border-color:var(--color-border-default);color:var(--color-font-primary)}.ToastNotification-module_toast-notification-enter-top__ZZDCr{animation:enterTop .25s cubic-bezier(.21,1.02,.73,1) forwards}.ToastNotification-module_toast-notification-exit-top__fOIkZ{animation:exitTop .3s cubic-bezier(.06,.71,.55,1) forwards}.ToastNotification-module_toast-notification-enter-bottom__So3w7{animation:enterBottom .25s cubic-bezier(.21,1.02,.73,1) forwards}.ToastNotification-module_toast-notification-exit-bottom__DDthi{animation:exitBottom .3s cubic-bezier(.06,.71,.55,1) forwards}.ToastNotification-module_toast-notification-exit-left__Fh1hC{animation:exitLeft .3s cubic-bezier(.06,.71,.55,1) forwards}.ToastNotification-module_toast-notification-exit-right__C1jQ9{animation:exitRight .3s cubic-bezier(.06,.71,.55,1) forwards}.ToastNotification-module_toast-notification-fade-in__JlSGi{animation:fadeIn .25s cubic-bezier(.21,1.02,.73,1) forwards}.ToastNotification-module_toast-notification-fade-out__r6q4Q{animation:fadeOut .3s cubic-bezier(.06,.71,.55,1) forwards}
+.ToastNotification-module_toast-notification__2xiTW{background-color:var(--color-background-toast);border:1px solid var(--color-border-toast);border-radius:var(--size-border-radius-lg);box-shadow:var(--size-box-shadow-md);color:var(--color-font-toast);font-size:var(--size-font-size-sm);pointer-events:auto;will-change:transform}.ToastNotification-module_toast-error__4ArAY{background-color:var(--color-background-toast-error);border-color:var(--color-border-toast-error);color:var(--color-font-white)}.ToastNotification-module_toast-error__4ArAY .ToastNotification-module_toast-dismiss__xxmkb{color:var(--color-font-white)}.ToastNotification-module_toast-dismiss__xxmkb{color:var(--color-font-toast)}.ToastNotification-module_toast-notification-enter-top__ZZDCr{animation:enterTop .25s cubic-bezier(.21,1.02,.73,1) forwards}.ToastNotification-module_toast-notification-exit-top__fOIkZ{animation:exitTop .3s cubic-bezier(.06,.71,.55,1) forwards}.ToastNotification-module_toast-notification-enter-bottom__So3w7{animation:enterBottom .25s cubic-bezier(.21,1.02,.73,1) forwards}.ToastNotification-module_toast-notification-exit-bottom__DDthi{animation:exitBottom .3s cubic-bezier(.06,.71,.55,1) forwards}.ToastNotification-module_toast-notification-exit-left__Fh1hC{animation:exitLeft .3s cubic-bezier(.06,.71,.55,1) forwards}.ToastNotification-module_toast-notification-exit-right__C1jQ9{animation:exitRight .3s cubic-bezier(.06,.71,.55,1) forwards}.ToastNotification-module_toast-notification-fade-in__JlSGi{animation:fadeIn .25s cubic-bezier(.21,1.02,.73,1) forwards}.ToastNotification-module_toast-notification-fade-out__r6q4Q{animation:fadeOut .3s cubic-bezier(.06,.71,.55,1) forwards}

package/dist/css/utilities.css

@@ -3,7 +3,7 @@
   \***************************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Tue, 06 Aug 2024 00:21:00 GMT
+ * Generated on Thu, 15 Aug 2024 15:18:26 GMT
  */
 
 .font-family-monospace { font-family: var(--assets-font-family-monospace); }
@@ -144,6 +144,18 @@
 
 .focus\:background-color-button-danger-active:focus { background: var(--color-background-button-danger-active); }
 
+.background-color-toast { background: var(--color-background-toast); }
+
+.hover\:background-color-toast:hover { background: var(--color-background-toast); }
+
+.focus\:background-color-toast:focus { background: var(--color-background-toast); }
+
+.background-color-toast-error { background: var(--color-background-toast-error); }
+
+.hover\:background-color-toast-error:hover { background: var(--color-background-toast-error); }
+
+.focus\:background-color-toast-error:focus { background: var(--color-background-toast-error); }
+
 .background-color-brand-gradient { background: var(--color-background-brand-gradient); }
 
 .hover\:background-color-brand-gradient:hover { background: var(--color-background-brand-gradient); }
@@ -228,6 +240,12 @@
 
 .focus\:background-color-chart-2:focus { background: var(--color-background-chart-2); }
 
+.background-color-white { background: var(--color-background-white); }
+
+.hover\:background-color-white:hover { background: var(--color-background-white); }
+
+.focus\:background-color-white:focus { background: var(--color-background-white); }
+
 .border-color-default { border-color: var(--color-border-default); }
 
 .hover\:border-color-default:hover { border-color: var(--color-border-default); }
@@ -312,6 +330,18 @@
 
 .focus\:border-color-button-tertiary-active:focus { border-color: var(--color-border-button-tertiary-active); }
 
+.border-color-toast { border-color: var(--color-border-toast); }
+
+.hover\:border-color-toast:hover { border-color: var(--color-border-toast); }
+
+.focus\:border-color-toast:focus { border-color: var(--color-border-toast); }
+
+.border-color-toast-error { border-color: var(--color-border-toast-error); }
+
+.hover\:border-color-toast-error:hover { border-color: var(--color-border-toast-error); }
+
+.focus\:border-color-toast-error:focus { border-color: var(--color-border-toast-error); }
+
 .border-color-brand-yellow { border-color: var(--color-border-brand-yellow); }
 
 .hover\:border-color-brand-yellow:hover { border-color: var(--color-border-brand-yellow); }
@@ -576,6 +606,18 @@
 
 .focus\:font-color-button-danger-active:focus { color: var(--color-font-button-danger-active); }
 
+.font-color-toast { color: var(--color-font-toast); }
+
+.hover\:font-color-toast:hover { color: var(--color-font-toast); }
+
+.focus\:font-color-toast:focus { color: var(--color-font-toast); }
+
+.font-color-toast-error { color: var(--color-font-toast-error); }
+
+.hover\:font-color-toast-error:hover { color: var(--color-font-toast-error); }
+
+.focus\:font-color-toast-error:focus { color: var(--color-font-toast-error); }
+
 .font-color-placeholder { color: var(--color-font-placeholder); }
 
 .hover\:font-color-placeholder:hover { color: var(--color-font-placeholder); }

package/dist/css/variables.css

@@ -3,7 +3,7 @@
   \*********************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Tue, 06 Aug 2024 00:21:00 GMT
+ * Generated on Thu, 15 Aug 2024 15:18:26 GMT
  */
 
 :root {
@@ -32,6 +32,8 @@
   --color-background-button-danger: #ef4444;
   --color-background-button-danger-hover: #dc2626;
   --color-background-button-danger-active: #b91c1c;
+  --color-background-toast: #262626;
+  --color-background-toast-error: #ef4444;
   --color-background-brand-gradient: linear-gradient(60deg, #eab308 0%, #fa0a64 100%);
   --color-background-brand-gradient-purple: linear-gradient(60deg, #b47dff 0%, #4b32aa 100%);
   --color-background-brand-gradient-cyan: linear-gradient(60deg, #00b4ff 0%, #dc50ff 100%);
@@ -46,6 +48,7 @@
   --color-background-brand-dark-purple: #1e1e5a;
   --color-background-chart-1: #1d4ed8;
   --color-background-chart-2: #93c5fd;
+  --color-background-white: #ffffff;
   --color-base-black: #000000;
   --color-base-white: #ffffff;
   --color-base-magenta: #fa0a64;
@@ -133,6 +136,8 @@
   --color-border-button-tertiary: rgba(0, 0, 0, 0);
   --color-border-button-tertiary-hover: rgba(0, 0, 0, 0);
   --color-border-button-tertiary-active: rgba(0, 0, 0, 0);
+  --color-border-toast: #171717;
+  --color-border-toast-error: #dc2626;
   --color-border-brand-yellow: #ffd200;
   --color-border-brand-orange: #ff911e;
   --color-border-brand-magenta: #ff3278;
@@ -177,6 +182,8 @@
   --color-font-button-danger: #ffffff;
   --color-font-button-danger-hover: #ffffff;
   --color-font-button-danger-active: #ffffff;
+  --color-font-toast: #f5f5f5;
+  --color-font-toast-error: #ffffff;
   --color-font-placeholder: #a3a3a3; /* Placeholder color for input fields */
   --color-font-brand-yellow: #ffd200;
   --color-font-brand-orange: #ff911e;
@@ -298,7 +305,7 @@
   \*******************************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Tue, 06 Aug 2024 00:21:00 GMT
+ * Generated on Thu, 15 Aug 2024 15:18:26 GMT
  */
 
 :root.dark {
@@ -324,6 +331,7 @@
   --color-background-button-danger: #ef4444;
   --color-background-button-danger-hover: #dc2626;
   --color-background-button-danger-active: #b91c1c;
+  --color-background-toast: #f5f5f5;
   --color-border-default: #525252;
   --color-border-subtle: #404040;
   --color-border-hover: #404040;
@@ -338,9 +346,9 @@
   --color-border-button-tertiary: transparent;
   --color-border-button-tertiary-hover: transparent;
   --color-border-button-tertiary-active: transparent;
+  --color-border-toast: #e5e5e5;
   --color-font-base: #f5f5f5;
   --color-font-secondary: #d4d4d4;
-  --color-font-white: #ffffff;
   --color-font-inverse: #404040;
   --color-font-disabled: #525252;
   --color-font-success: #16a34a;
@@ -360,6 +368,7 @@
   --color-font-button-tertiary: #ffffff;
   --color-font-button-tertiary-hover: #ffffff;
   --color-font-button-tertiary-active: #ffffff;
+  --color-font-toast: #404040;
   --color-font-placeholder: #737373; /* Placeholder color for input fields */
 }
 

package/dist/hyphen-components.cjs.development.js

@@ -809,7 +809,7 @@ var Button = /*#__PURE__*/React.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, {
@@ -4024,7 +4024,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';
@@ -4046,7 +4046,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,
@@ -4063,7 +4063,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",
@@ -4080,6 +4080,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,
@@ -4094,9 +4095,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",