@zendeskgarden/react-notifications 9.0.0-next.14 → 9.0.0-next.16

package/dist/esm/styled/content/StyledClose.js

@@ -4,20 +4,65 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import styled from 'styled-components';
-import { getColorV8, focusStyles, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { validationTypes } from '../../utils/icons.js';
+import { IconButton } from '@zendeskgarden/react-buttons';
 
 const COMPONENT_ID = 'notifications.close';
-const StyledClose = styled.button.attrs({
+const colorStyles = _ref => {
+  let {
+    theme,
+    $type
+  } = _ref;
+  let variable;
+  switch ($type) {
+    case validationTypes.warning:
+      variable = 'foreground.warning';
+      break;
+    case validationTypes.error:
+      variable = 'foreground.danger';
+      break;
+    case validationTypes.success:
+      variable = 'foreground.success';
+      break;
+    default:
+      variable = 'foreground.subtle';
+      break;
+  }
+  const color = getColor({
+    variable,
+    theme
+  });
+  const hoverColor = getColor({
+    variable,
+    light: {
+      offset: 100
+    },
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const activeColor = getColor({
+    variable,
+    light: {
+      offset: 200
+    },
+    dark: {
+      offset: -200
+    },
+    theme
+  });
+  return css(["color:", ";&:hover{background-color:transparent;color:", ";}&:active{background-color:transparent;color:", ";}"], color, hoverColor, activeColor);
+};
+const StyledClose = styled(IconButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.14'
+  'data-garden-version': '9.0.0-next.16'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-1mr9nx1-0"
-})(["display:block;position:absolute;top:", "px;", ":", ";transition:background-color 0.1s ease-in-out,color 0.25s ease-in-out,box-shadow 0.1s ease-in-out;border:none;border-radius:50%;background-color:transparent;cursor:pointer;padding:0;width:", "px;height:", "px;overflow:hidden;color:", ";font-size:0;user-select:none;&::-moz-focus-inner{border:0;}&:hover{color:", ";}", " ", ";"], props => props.theme.space.base, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base}px`, props => props.theme.space.base * 7, props => props.theme.space.base * 7, props => props.hue ? getColorV8(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme) : getColorV8('neutralHue', 600, props.theme), props => props.hue ? getColorV8(props.hue, 800, props.theme) : getColorV8('neutralHue', 800, props.theme), props => focusStyles({
-  theme: props.theme,
-  inset: true
-}), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["position:absolute;top:", "px;right:", ";left:", ";", " ", ";"], props => props.theme.space.base, p => !p.theme.rtl && `${p.theme.space.base}px`, p => p.theme.rtl && `${p.theme.space.base}px`, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledClose.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/content/StyledParagraph.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'notifications.paragraph';
 const StyledParagraph = styled.p.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.14'
+  'data-garden-version': '9.0.0-next.16'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-12tmd6p-0"

package/dist/esm/styled/content/StyledTitle.js

@@ -5,16 +5,19 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'notifications.title';
 const StyledTitle = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.14'
+  'data-garden-version': '9.0.0-next.16'
 }).withConfig({
   displayName: "StyledTitle",
   componentId: "sc-xx4jsv-0"
-})(["margin:0;color:", ";font-weight:", ";", ";"], props => getColorV8('foreground', 600 , props.theme), props => props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["margin:0;color:", ";font-weight:", ";", ";"], p => getColor({
+  variable: 'foreground.default',
+  theme: p.theme
+}), props => props.$isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledTitle.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/global-alert/StyledGlobalAlert.js

@@ -5,56 +5,131 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'notifications.global-alert';
-const colorStyles = props => {
+const COMPONENT_ID = 'notifications.global_alert';
+const colorStyles = _ref => {
+  let {
+    theme,
+    $alertType
+  } = _ref;
   let borderColor;
   let backgroundColor;
   let foregroundColor;
   let anchorHoverColor;
   let anchorActiveColor;
-  let focusColor;
-  switch (props.alertType) {
+  let focusVariable;
+  switch ($alertType) {
     case 'success':
-      borderColor = getColorV8('successHue', 700, props.theme);
-      backgroundColor = getColorV8('successHue', 600, props.theme);
-      foregroundColor = getColorV8('successHue', 100, props.theme);
-      anchorHoverColor = props.theme.palette.white;
-      anchorActiveColor = props.theme.palette.white;
-      focusColor = 'successHue';
-      break;
+      {
+        borderColor = getColor({
+          variable: 'border.successEmphasis',
+          offset: 100,
+          theme
+        });
+        backgroundColor = getColor({
+          variable: 'background.successEmphasis',
+          theme
+        });
+        foregroundColor = getColor({
+          variable: 'foreground.success',
+          offset: -600,
+          theme
+        });
+        anchorHoverColor = theme.palette.white;
+        anchorActiveColor = theme.palette.white;
+        focusVariable = 'foreground.successEmphasis';
+        break;
+      }
     case 'error':
-      borderColor = getColorV8('dangerHue', 700, props.theme);
-      backgroundColor = getColorV8('dangerHue', 600, props.theme);
-      foregroundColor = getColorV8('dangerHue', 100, props.theme);
-      anchorHoverColor = props.theme.palette.white;
-      anchorActiveColor = props.theme.palette.white;
-      focusColor = 'dangerHue';
-      break;
+      {
+        borderColor = getColor({
+          variable: 'border.dangerEmphasis',
+          offset: 100,
+          theme
+        });
+        backgroundColor = getColor({
+          variable: 'background.dangerEmphasis',
+          theme
+        });
+        foregroundColor = getColor({
+          variable: 'foreground.danger',
+          offset: -600,
+          theme
+        });
+        anchorActiveColor = theme.palette.white;
+        anchorHoverColor = theme.palette.white;
+        focusVariable = 'foreground.dangerEmphasis';
+        break;
+      }
     case 'warning':
-      borderColor = getColorV8('warningHue', 400, props.theme);
-      backgroundColor = getColorV8('warningHue', 300, props.theme);
-      foregroundColor = getColorV8('warningHue', 800, props.theme);
-      anchorHoverColor = getColorV8('warningHue', 900, props.theme);
-      anchorActiveColor = getColorV8('warningHue', 1000, props.theme);
-      focusColor = 'warningHue';
-      break;
+      {
+        borderColor = getColor({
+          variable: 'border.warningEmphasis',
+          offset: -300,
+          theme
+        });
+        backgroundColor = getColor({
+          variable: 'background.warningEmphasis',
+          offset: -400,
+          theme
+        });
+        const fgVariable = 'foreground.warning';
+        foregroundColor = getColor({
+          variable: fgVariable,
+          offset: 100,
+          theme
+        });
+        anchorHoverColor = getColor({
+          variable: fgVariable,
+          offset: 200,
+          theme
+        });
+        anchorActiveColor = getColor({
+          variable: fgVariable,
+          offset: 300,
+          theme
+        });
+        focusVariable = fgVariable;
+        break;
+      }
     case 'info':
-      borderColor = getColorV8('primaryHue', 300, props.theme);
-      backgroundColor = getColorV8('primaryHue', 200, props.theme);
-      foregroundColor = getColorV8('primaryHue', 700, props.theme);
-      anchorHoverColor = getColorV8('primaryHue', 800, props.theme);
-      anchorActiveColor = getColorV8('primaryHue', 900, props.theme);
-      focusColor = 'primaryHue';
-      break;
+      {
+        borderColor = getColor({
+          variable: 'border.primaryEmphasis',
+          offset: -300,
+          theme
+        });
+        backgroundColor = getColor({
+          variable: 'background.primaryEmphasis',
+          offset: -400,
+          theme
+        });
+        const fgVariable = 'foreground.primary';
+        foregroundColor = getColor({
+          variable: fgVariable,
+          offset: 100,
+          theme
+        });
+        anchorHoverColor = getColor({
+          variable: fgVariable,
+          offset: 200,
+          theme
+        });
+        anchorActiveColor = getColor({
+          variable: fgVariable,
+          offset: 300,
+          theme
+        });
+        focusVariable = fgVariable;
+        break;
+      }
   }
-  const boxShadow = `0 ${props.theme.borderWidths.sm} ${props.theme.borderWidths.sm} ${borderColor}`;
+  const boxShadow = `0 ${theme.borderWidths.sm} ${theme.borderWidths.sm} ${borderColor}`;
   return css(["box-shadow:", ";background-color:", ";color:", ";& a{color:inherit;", " &:hover{color:", ";}&:active{color:", ";}}"], boxShadow, backgroundColor, foregroundColor, focusStyles({
-    theme: props.theme,
+    theme,
     color: {
-      hue: focusColor,
-      shade: props.alertType === 'info' ? 600 : 800
+      variable: focusVariable
     },
     styles: {
       color: 'inherit'
@@ -73,7 +148,7 @@ const sizeStyles = props => {
 };
 const StyledGlobalAlert = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.14'
+  'data-garden-version': '9.0.0-next.16'
 }).withConfig({
   displayName: "StyledGlobalAlert",
   componentId: "sc-k6rimt-0"

package/dist/esm/styled/global-alert/StyledGlobalAlertButton.js

@@ -5,46 +5,97 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { DEFAULT_THEME, getColorV8, focusStyles } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles } from '@zendeskgarden/react-theming';
 import { Button } from '@zendeskgarden/react-buttons';
 import { colorStyles as colorStyles$1 } from './StyledGlobalAlertClose.js';
 
+const COMPONENT_ID = 'notifications.global_alert.button';
 function colorStyles(props) {
-  if (props.isBasic) {
+  const {
+    $alertType,
+    isBasic,
+    theme
+  } = props;
+  if (isBasic) {
     return colorStyles$1(props);
   }
-  let backgroundColor;
-  let hoverBackgroundColor;
-  let activeBackgroundColor;
-  let focusColor;
-  switch (props.alertType) {
+  let bgVariable;
+  let offsetOptions;
+  let offsetHoverOptions;
+  let offsetActiveOptions;
+  let focusVariable;
+  switch ($alertType) {
     case 'success':
-      backgroundColor = getColorV8('successHue', 800, props.theme);
-      hoverBackgroundColor = getColorV8('successHue', 900, props.theme);
-      activeBackgroundColor = getColorV8('successHue', 1000, props.theme);
-      focusColor = 'successHue';
+      bgVariable = 'background.successEmphasis';
+      offsetOptions = {
+        offset: 200
+      };
+      offsetHoverOptions = {
+        offset: 300
+      };
+      offsetActiveOptions = {
+        offset: 400
+      };
+      focusVariable = 'foreground.successEmphasis';
       break;
     case 'error':
-      backgroundColor = getColorV8('dangerHue', 800, props.theme);
-      hoverBackgroundColor = getColorV8('dangerHue', 900, props.theme);
-      activeBackgroundColor = getColorV8('dangerHue', 1000, props.theme);
-      focusColor = 'dangerHue';
+      bgVariable = 'background.dangerEmphasis';
+      offsetOptions = {
+        offset: 200
+      };
+      offsetHoverOptions = {
+        offset: 300
+      };
+      offsetActiveOptions = {
+        offset: 400
+      };
+      focusVariable = 'foreground.dangerEmphasis';
       break;
     case 'warning':
-      backgroundColor = getColorV8('warningHue', 800, props.theme);
-      hoverBackgroundColor = getColorV8('warningHue', 900, props.theme);
-      activeBackgroundColor = getColorV8('warningHue', 1000, props.theme);
-      focusColor = 'warningHue';
+      bgVariable = 'background.warningEmphasis';
+      offsetOptions = {};
+      offsetHoverOptions = {
+        offset: 100
+      };
+      offsetActiveOptions = {
+        offset: 200
+      };
+      focusVariable = 'foreground.warning';
       break;
     case 'info':
-      focusColor = 'primaryHue';
+      bgVariable = 'background.primaryEmphasis';
+      offsetOptions = {};
+      offsetHoverOptions = {
+        offset: 100
+      };
+      offsetActiveOptions = {
+        offset: 200
+      };
+      focusVariable = 'foreground.primary';
       break;
   }
-  return css(["background-color:", ";&:hover{background-color:", ";}", " &:active{background-color:", ";}"], backgroundColor, hoverBackgroundColor, focusStyles({
-    theme: props.theme,
+  const backgroundColor = getColor({
+    variable: bgVariable,
+    ...offsetOptions,
+    theme
+  });
+  const hoverBackgroundColor = getColor({
+    variable: bgVariable,
+    ...offsetHoverOptions,
+    theme
+  });
+  const activeBackgroundColor = getColor({
+    variable: bgVariable,
+    ...offsetActiveOptions,
+    theme
+  });
+  return css(["background-color:", ";color:", ";&:hover{background-color:", ";}", " &:active{background-color:", ";}"], backgroundColor, getColor({
+    hue: 'white',
+    theme
+  }), hoverBackgroundColor, focusStyles({
+    theme,
     color: {
-      hue: focusColor,
-      shade: props.alertType === 'info' ? 600 : 800
+      variable: focusVariable
     }
   }), activeBackgroundColor);
 }
@@ -54,18 +105,12 @@ function sizeStyles(props) {
   return css(["margin:", " ", " ", " ", ";"], marginVertical, props.theme.rtl ? marginStart : 0, marginVertical, props.theme.rtl ? 0 : marginStart);
 }
 const StyledGlobalAlertButton = styled(Button).attrs({
-  'data-garden-version': '9.0.0-next.14',
-  focusInset: false,
-  isDanger: false,
-  isLink: false,
-  isNeutral: false,
-  isPill: false,
-  isStretched: false,
-  size: 'small'
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.16'
 }).withConfig({
   displayName: "StyledGlobalAlertButton",
   componentId: "sc-1txe91a-0"
-})(["flex-shrink:0;", ";", ";"], sizeStyles, colorStyles);
+})(["flex-shrink:0;", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledGlobalAlertButton.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/global-alert/StyledGlobalAlertClose.js

@@ -5,50 +5,81 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { DEFAULT_THEME, getColorV8, focusStyles } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles } from '@zendeskgarden/react-theming';
 import { IconButton } from '@zendeskgarden/react-buttons';
 
+const COMPONENT_ID = 'notifications.global_alert.close';
 const colorStyles = props => {
+  const {
+    $alertType,
+    theme
+  } = props;
   let hoverBackgroundColor;
   let hoverForegroundColor;
   let activeBackgroundColor;
   let activeForegroundColor;
-  let focusColor;
-  switch (props.alertType) {
+  let focusVariable;
+  switch ($alertType) {
     case 'success':
-      hoverBackgroundColor = getColorV8('successHue', 100, props.theme, 0.08);
-      hoverForegroundColor = props.theme.palette.white;
-      activeBackgroundColor = getColorV8('successHue', 100, props.theme, 0.2);
-      activeForegroundColor = props.theme.palette.white;
-      focusColor = 'successHue';
+      hoverBackgroundColor = getColor({
+        variable: 'background.success',
+        theme,
+        transparency: theme.opacity[100]
+      });
+      hoverForegroundColor = theme.palette.white;
+      activeBackgroundColor = getColor({
+        variable: 'background.success',
+        theme,
+        transparency: theme.opacity[200]
+      });
+      activeForegroundColor = theme.palette.white;
+      focusVariable = 'foreground.successEmphasis';
       break;
     case 'error':
-      hoverBackgroundColor = getColorV8('dangerHue', 100, props.theme, 0.08);
-      hoverForegroundColor = props.theme.palette.white;
-      activeBackgroundColor = getColorV8('dangerHue', 100, props.theme, 0.2);
-      activeForegroundColor = props.theme.palette.white;
-      focusColor = 'dangerHue';
+      hoverBackgroundColor = getColor({
+        variable: 'background.danger',
+        theme,
+        transparency: theme.opacity[100]
+      });
+      hoverForegroundColor = theme.palette.white;
+      activeBackgroundColor = getColor({
+        variable: 'background.danger',
+        theme,
+        transparency: theme.opacity[200]
+      });
+      activeForegroundColor = theme.palette.white;
+      focusVariable = 'foreground.dangerEmphasis';
       break;
     case 'warning':
-      hoverBackgroundColor = getColorV8('warningHue', 800, props.theme, 0.08);
-      hoverForegroundColor = getColorV8('warningHue', 900, props.theme);
-      activeBackgroundColor = getColorV8('warningHue', 800, props.theme, 0.2);
-      activeForegroundColor = getColorV8('warningHue', 1000, props.theme);
-      focusColor = 'warningHue';
-      break;
-    case 'info':
-      hoverBackgroundColor = getColorV8('primaryHue', 700, props.theme, 0.08);
-      hoverForegroundColor = getColorV8('primaryHue', 800, props.theme);
-      activeBackgroundColor = getColorV8('primaryHue', 700, props.theme, 0.2);
-      activeForegroundColor = getColorV8('primaryHue', 900, props.theme);
-      focusColor = 'primaryHue';
+      hoverBackgroundColor = getColor({
+        variable: 'background.warningEmphasis',
+        transparency: theme.opacity[100],
+        theme
+      });
+      hoverForegroundColor = getColor({
+        variable: 'foreground.warningEmphasis',
+        offset: 200,
+        theme
+      });
+      activeBackgroundColor = getColor({
+        variable: 'background.warningEmphasis',
+        transparency: theme.opacity[200],
+        theme
+      });
+      activeForegroundColor = getColor({
+        variable: 'foreground.warningEmphasis',
+        offset: 300,
+        theme
+      });
+      focusVariable = 'foreground.warning';
       break;
+    default:
+      focusVariable = 'foreground.primary';
   }
   return css(["color:inherit;&:hover{background-color:", ";color:", ";}", " &:active{background-color:", ";color:", ";}"], hoverBackgroundColor, hoverForegroundColor, focusStyles({
-    theme: props.theme,
+    theme,
     color: {
-      hue: focusColor,
-      shade: props.alertType === 'info' ? 600 : 800
+      variable: focusVariable
     }
   }), activeBackgroundColor, activeForegroundColor);
 };
@@ -59,12 +90,12 @@ const sizeStyles = props => {
   return css(["margin:", " ", " ", " ", ";"], marginVertical, props.theme.rtl ? marginStart : marginEnd, marginVertical, props.theme.rtl ? marginEnd : marginStart);
 };
 const StyledGlobalAlertClose = styled(IconButton).attrs({
-  'data-garden-version': '9.0.0-next.14',
-  size: 'small'
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.16'
 }).withConfig({
   displayName: "StyledGlobalAlertClose",
   componentId: "sc-1g5s93s-0"
-})(["", ";", ";"], sizeStyles, colorStyles);
+})(["", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledGlobalAlertClose.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/global-alert/StyledGlobalAlertContent.js

@@ -7,10 +7,10 @@
 import styled from 'styled-components';
 import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'notifications.global-alert.content';
+const COMPONENT_ID = 'notifications.global_alert.content';
 const StyledGlobalAlertContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.14'
+  'data-garden-version': '9.0.0-next.16'
 }).withConfig({
   displayName: "StyledGlobalAlertContent",
   componentId: "sc-rept0u-0"

package/dist/esm/styled/global-alert/StyledGlobalAlertIcon.js

@@ -6,22 +6,58 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'notifications.global-alert.icon';
+const COMPONENT_ID = 'notifications.global_alert.icon';
 const sizeStyles = props => {
   const size = props.theme.iconSizes.md;
   const marginTop = math(`(${props.theme.space.base * 5} - ${size}) / 2`);
   const marginHorizontal = `${props.theme.space.base * 2}px`;
   return css(["margin-top:", ";margin-", ":", ";width:", ";height:", ";"], marginTop, props.theme.rtl ? 'left' : 'right', marginHorizontal, size, size);
 };
+const colorStyles = _ref => {
+  let {
+    theme,
+    $alertType
+  } = _ref;
+  let color;
+  switch ($alertType) {
+    case 'success':
+      color = getColor({
+        variable: 'foreground.success',
+        offset: -400,
+        theme
+      });
+      break;
+    case 'error':
+      color = getColor({
+        variable: 'foreground.danger',
+        offset: -400,
+        theme
+      });
+      break;
+    case 'warning':
+      color = getColor({
+        variable: 'foreground.warning',
+        theme
+      });
+      break;
+    case 'info':
+      color = getColor({
+        variable: 'foreground.primary',
+        theme
+      });
+      break;
+  }
+  return css(["color:", ";"], color);
+};
 const StyledGlobalAlertIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.14'
+  'data-garden-version': '9.0.0-next.16'
 }).withConfig({
   displayName: "StyledGlobalAlertIcon",
   componentId: "sc-84ne9k-0"
-})(["flex-shrink:0;", ";", ";"], sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["flex-shrink:0;", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledGlobalAlertIcon.defaultProps = {
   theme: DEFAULT_THEME
 };