@zendeskgarden/react-notifications 9.0.0-next.8 → 9.0.0

package/dist/esm/elements/Close.js

@@ -0,0 +1,40 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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 React__default from 'react';
+import { StyledClose } from '../styled/content/StyledClose.js';
+import '../styled/content/StyledParagraph.js';
+import '../styled/content/StyledTitle.js';
+import '../styled/StyledAlert.js';
+import '../styled/StyledNotification.js';
+import '../styled/StyledWell.js';
+import '../styled/StyledIcon.js';
+import '../styled/StyledBase.js';
+import '../styled/global-alert/StyledGlobalAlert.js';
+import '../styled/global-alert/StyledGlobalAlertButton.js';
+import '../styled/global-alert/StyledGlobalAlertClose.js';
+import '../styled/global-alert/StyledGlobalAlertContent.js';
+import '../styled/global-alert/StyledGlobalAlertIcon.js';
+import '../styled/global-alert/StyledGlobalAlertTitle.js';
+import { useNotificationsContext } from '../utils/useNotificationsContext.js';
+import { useText } from '@zendeskgarden/react-theming';
+import SvgXStroke from '../node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js';
+
+const Close = React__default.forwardRef((props, ref) => {
+  const ariaLabel = useText(Close, props, 'aria-label', 'Close');
+  const type = useNotificationsContext();
+  return React__default.createElement(StyledClose, Object.assign({
+    ref: ref,
+    $type: type,
+    "aria-label": ariaLabel
+  }, props, {
+    focusInset: true,
+    size: "small"
+  }), React__default.createElement(SvgXStroke, null));
+});
+Close.displayName = 'Notification.Close';
+
+export { Close };

package/dist/esm/elements/Notification.js

@@ -22,27 +22,26 @@ import '../styled/global-alert/StyledGlobalAlertClose.js';
 import '../styled/global-alert/StyledGlobalAlertContent.js';
 import '../styled/global-alert/StyledGlobalAlertIcon.js';
 import '../styled/global-alert/StyledGlobalAlertTitle.js';
-import { validationIcons, validationHues } from '../utils/icons.js';
-import { Title } from './content/Title.js';
-import { Paragraph } from './content/Paragraph.js';
-import { Close } from './content/Close.js';
+import { validationIcons } from '../utils/icons.js';
+import { Title } from './Title.js';
+import { Paragraph } from './Paragraph.js';
+import { Close } from './Close.js';
 
 const NotificationComponent = forwardRef((_ref, ref) => {
   let {
-    role,
+    children,
+    type,
     ...props
   } = _ref;
-  const Icon = props.type ? validationIcons[props.type] : SvgInfoStroke;
-  const hue = props.type && validationHues[props.type];
+  const Icon = type ? validationIcons[type] : SvgInfoStroke;
   return React__default.createElement(StyledNotification, Object.assign({
     ref: ref,
-    type: props.type,
-    isFloating: true
-  }, props, {
-    role: role === undefined ? 'status' : role
-  }), props.type && React__default.createElement(StyledIcon, {
-    hue: hue
-  }, React__default.createElement(Icon, null)), props.children);
+    $type: type,
+    $isFloating: true,
+    role: "alert"
+  }, props), !!type && React__default.createElement(StyledIcon, {
+    $type: type
+  }, React__default.createElement(Icon, null)), children);
 });
 NotificationComponent.displayName = 'Notification';
 NotificationComponent.propTypes = {

package/dist/esm/elements/{Well.js → Paragraph.js}

@@ -5,13 +5,12 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import React__default from 'react';
-import PropTypes from 'prop-types';
 import '../styled/content/StyledClose.js';
-import '../styled/content/StyledParagraph.js';
+import { StyledParagraph } from '../styled/content/StyledParagraph.js';
 import '../styled/content/StyledTitle.js';
 import '../styled/StyledAlert.js';
 import '../styled/StyledNotification.js';
-import { StyledWell } from '../styled/StyledWell.js';
+import '../styled/StyledWell.js';
 import '../styled/StyledIcon.js';
 import '../styled/StyledBase.js';
 import '../styled/global-alert/StyledGlobalAlert.js';
@@ -20,19 +19,10 @@ import '../styled/global-alert/StyledGlobalAlertClose.js';
 import '../styled/global-alert/StyledGlobalAlertContent.js';
 import '../styled/global-alert/StyledGlobalAlertIcon.js';
 import '../styled/global-alert/StyledGlobalAlertTitle.js';
-import { Title } from './content/Title.js';
-import { Paragraph } from './content/Paragraph.js';
 
-const WellComponent = React__default.forwardRef((props, ref) => React__default.createElement(StyledWell, Object.assign({
+const Paragraph = React__default.forwardRef((props, ref) => React__default.createElement(StyledParagraph, Object.assign({
   ref: ref
 }, props)));
-WellComponent.displayName = 'Well';
-WellComponent.propTypes = {
-  isRecessed: PropTypes.bool,
-  isFloating: PropTypes.bool
-};
-const Well = WellComponent;
-Well.Paragraph = Paragraph;
-Well.Title = Title;
+Paragraph.displayName = 'Notification.Paragraph';
 
-export { Well, WellComponent };
+export { Paragraph };

package/dist/esm/elements/Title.js

@@ -0,0 +1,35 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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 React__default from 'react';
+import '../styled/content/StyledClose.js';
+import '../styled/content/StyledParagraph.js';
+import { StyledTitle } from '../styled/content/StyledTitle.js';
+import '../styled/StyledAlert.js';
+import '../styled/StyledNotification.js';
+import '../styled/StyledWell.js';
+import '../styled/StyledIcon.js';
+import '../styled/StyledBase.js';
+import '../styled/global-alert/StyledGlobalAlert.js';
+import '../styled/global-alert/StyledGlobalAlertButton.js';
+import '../styled/global-alert/StyledGlobalAlertClose.js';
+import '../styled/global-alert/StyledGlobalAlertContent.js';
+import '../styled/global-alert/StyledGlobalAlertIcon.js';
+import '../styled/global-alert/StyledGlobalAlertTitle.js';
+
+const Title = React__default.forwardRef((_ref, ref) => {
+  let {
+    isRegular,
+    ...props
+  } = _ref;
+  return React__default.createElement(StyledTitle, Object.assign({
+    ref: ref,
+    $isRegular: isRegular
+  }, props));
+});
+Title.displayName = 'Notification.Title';
+
+export { Title };

package/dist/esm/elements/alert/Alert.js

@@ -0,0 +1,56 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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 React__default from 'react';
+import PropTypes from 'prop-types';
+import { TYPE } from '../../types/index.js';
+import '../../styled/content/StyledClose.js';
+import '../../styled/content/StyledParagraph.js';
+import '../../styled/content/StyledTitle.js';
+import { StyledAlert } from '../../styled/StyledAlert.js';
+import '../../styled/StyledNotification.js';
+import '../../styled/StyledWell.js';
+import { StyledIcon } from '../../styled/StyledIcon.js';
+import '../../styled/StyledBase.js';
+import '../../styled/global-alert/StyledGlobalAlert.js';
+import '../../styled/global-alert/StyledGlobalAlertButton.js';
+import '../../styled/global-alert/StyledGlobalAlertClose.js';
+import '../../styled/global-alert/StyledGlobalAlertContent.js';
+import '../../styled/global-alert/StyledGlobalAlertIcon.js';
+import '../../styled/global-alert/StyledGlobalAlertTitle.js';
+import { validationIcons } from '../../utils/icons.js';
+import { NotificationsContext } from '../../utils/useNotificationsContext.js';
+import { Title } from './Title.js';
+import { Paragraph } from './Paragraph.js';
+import { Close } from './Close.js';
+
+const AlertComponent = React__default.forwardRef((_ref, ref) => {
+  let {
+    role,
+    type,
+    ...props
+  } = _ref;
+  const Icon = validationIcons[type];
+  return React__default.createElement(NotificationsContext.Provider, {
+    value: type
+  }, React__default.createElement(StyledAlert, Object.assign({
+    ref: ref,
+    $type: type,
+    role: role === undefined ? 'alert' : role
+  }, props), React__default.createElement(StyledIcon, {
+    $type: type
+  }, React__default.createElement(Icon, null)), props.children));
+});
+AlertComponent.displayName = 'Alert';
+AlertComponent.propTypes = {
+  type: PropTypes.oneOf(TYPE).isRequired
+};
+const Alert = AlertComponent;
+Alert.Close = Close;
+Alert.Paragraph = Paragraph;
+Alert.Title = Title;
+
+export { Alert, AlertComponent };

package/dist/esm/elements/{content → alert}/Close.js

@@ -21,17 +21,20 @@ import '../../styled/global-alert/StyledGlobalAlertIcon.js';
 import '../../styled/global-alert/StyledGlobalAlertTitle.js';
 import { useNotificationsContext } from '../../utils/useNotificationsContext.js';
 import { useText } from '@zendeskgarden/react-theming';
-import SvgXStroke from '../../node_modules/@zendeskgarden/svg-icons/src/12/x-stroke.svg.js';
+import SvgXStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js';
 
 const Close = React__default.forwardRef((props, ref) => {
   const ariaLabel = useText(Close, props, 'aria-label', 'Close');
-  const hue = useNotificationsContext();
+  const type = useNotificationsContext();
   return React__default.createElement(StyledClose, Object.assign({
     ref: ref,
-    hue: hue,
+    $type: type,
     "aria-label": ariaLabel
-  }, props), React__default.createElement(SvgXStroke, null));
+  }, props, {
+    focusInset: true,
+    size: "small"
+  }), React__default.createElement(SvgXStroke, null));
 });
-Close.displayName = 'Close';
+Close.displayName = 'Alert.Close';
 
 export { Close };

package/dist/esm/elements/{content → alert}/Paragraph.js

@@ -23,6 +23,6 @@ import '../../styled/global-alert/StyledGlobalAlertTitle.js';
 const Paragraph = React__default.forwardRef((props, ref) => React__default.createElement(StyledParagraph, Object.assign({
   ref: ref
 }, props)));
-Paragraph.displayName = 'Paragraph';
+Paragraph.displayName = 'Alert.Paragraph';
 
 export { Paragraph };

package/dist/esm/elements/{content → alert}/Title.js

@@ -20,9 +20,16 @@ import '../../styled/global-alert/StyledGlobalAlertContent.js';
 import '../../styled/global-alert/StyledGlobalAlertIcon.js';
 import '../../styled/global-alert/StyledGlobalAlertTitle.js';
 
-const Title = React__default.forwardRef((props, ref) => React__default.createElement(StyledTitle, Object.assign({
-  ref: ref
-}, props)));
-Title.displayName = 'Title';
+const Title = React__default.forwardRef((_ref, ref) => {
+  let {
+    isRegular,
+    ...props
+  } = _ref;
+  return React__default.createElement(StyledTitle, Object.assign({
+    ref: ref,
+    $isRegular: isRegular
+  }, props));
+});
+Title.displayName = 'Alert.Title';
 
 export { Title };

package/dist/esm/elements/global-alert/GlobalAlert.js

@@ -6,6 +6,7 @@
 */
 import React__default, { forwardRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { ThemeProvider } from 'styled-components';
 import SvgInfoStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/info-stroke.svg.js';
 import SvgAlertErrorStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg.js';
 import SvgAlertWarningStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/alert-warning-stroke.svg.js';
@@ -25,7 +26,7 @@ import '../../styled/global-alert/StyledGlobalAlertClose.js';
 import '../../styled/global-alert/StyledGlobalAlertContent.js';
 import { StyledGlobalAlertIcon } from '../../styled/global-alert/StyledGlobalAlertIcon.js';
 import '../../styled/global-alert/StyledGlobalAlertTitle.js';
-import { GlobalAlertContext } from './utility.js';
+import { GlobalAlertContext } from '../../utils/useGlobalAlertContext.js';
 import { GlobalAlertButton } from './GlobalAlertButton.js';
 import { GlobalAlertClose } from './GlobalAlertClose.js';
 import { GlobalAlertContent } from './GlobalAlertContent.js';
@@ -36,20 +37,33 @@ const GlobalAlertComponent = forwardRef((_ref, ref) => {
     type,
     ...props
   } = _ref;
-  return React__default.createElement(GlobalAlertContext.Provider, {
-    value: useMemo(() => ({
-      type
-    }), [type])
-  }, React__default.createElement(StyledGlobalAlert, Object.assign({
-    ref: ref,
-    role: "status",
-    alertType: type
-  }, props), {
-    success: React__default.createElement(StyledGlobalAlertIcon, null, React__default.createElement(SvgCheckCircleStroke, null)),
-    error: React__default.createElement(StyledGlobalAlertIcon, null, React__default.createElement(SvgAlertErrorStroke, null)),
-    warning: React__default.createElement(StyledGlobalAlertIcon, null, React__default.createElement(SvgAlertWarningStroke, null)),
-    info: React__default.createElement(StyledGlobalAlertIcon, null, React__default.createElement(SvgInfoStroke, null))
-  }[type], props.children));
+  const icon = {
+    success: React__default.createElement(SvgCheckCircleStroke, null),
+    error: React__default.createElement(SvgAlertErrorStroke, null),
+    warning: React__default.createElement(SvgAlertWarningStroke, null),
+    info: React__default.createElement(SvgInfoStroke, null)
+  }[type];
+  return (
+    React__default.createElement(ThemeProvider, {
+      theme: theme => ({
+        ...theme,
+        colors: {
+          ...theme.colors,
+          base: 'light'
+        }
+      })
+    }, React__default.createElement(GlobalAlertContext.Provider, {
+      value: useMemo(() => ({
+        type
+      }), [type])
+    }, React__default.createElement(StyledGlobalAlert, Object.assign({
+      ref: ref,
+      role: "status",
+      $alertType: type
+    }, props), React__default.createElement(StyledGlobalAlertIcon, {
+      $alertType: type
+    }, icon), props.children)))
+  );
 });
 GlobalAlertComponent.displayName = 'GlobalAlert';
 const GlobalAlert = GlobalAlertComponent;

package/dist/esm/elements/global-alert/GlobalAlertButton.js

@@ -20,7 +20,7 @@ import '../../styled/global-alert/StyledGlobalAlertClose.js';
 import '../../styled/global-alert/StyledGlobalAlertContent.js';
 import '../../styled/global-alert/StyledGlobalAlertIcon.js';
 import '../../styled/global-alert/StyledGlobalAlertTitle.js';
-import { useGlobalAlertContext } from './utility.js';
+import { useGlobalAlertContext } from '../../utils/useGlobalAlertContext.js';
 
 const GlobalAlertButton = forwardRef((_ref, ref) => {
   let {
@@ -32,8 +32,9 @@ const GlobalAlertButton = forwardRef((_ref, ref) => {
   } = useGlobalAlertContext();
   return React__default.createElement(StyledGlobalAlertButton, Object.assign({
     ref: ref,
-    alertType: type
+    $alertType: type
   }, props, {
+    size: "small",
     isPrimary: !isBasic,
     isBasic: isBasic
   }));

package/dist/esm/elements/global-alert/GlobalAlertClose.js

@@ -21,7 +21,7 @@ import { StyledGlobalAlertClose } from '../../styled/global-alert/StyledGlobalAl
 import '../../styled/global-alert/StyledGlobalAlertContent.js';
 import '../../styled/global-alert/StyledGlobalAlertIcon.js';
 import '../../styled/global-alert/StyledGlobalAlertTitle.js';
-import { useGlobalAlertContext } from './utility.js';
+import { useGlobalAlertContext } from '../../utils/useGlobalAlertContext.js';
 
 const GlobalAlertClose = forwardRef((props, ref) => {
   const {
@@ -30,8 +30,10 @@ const GlobalAlertClose = forwardRef((props, ref) => {
   const label = useText(GlobalAlertClose, props, 'aria-label', 'Close');
   return React__default.createElement(StyledGlobalAlertClose, Object.assign({
     ref: ref,
-    alertType: type
-  }, props), React__default.createElement(SvgXStroke, {
+    $alertType: type
+  }, props, {
+    size: "small"
+  }), React__default.createElement(SvgXStroke, {
     role: "img",
     "aria-label": label
   }));

package/dist/esm/elements/global-alert/GlobalAlertTitle.js

@@ -20,14 +20,19 @@ import '../../styled/global-alert/StyledGlobalAlertClose.js';
 import '../../styled/global-alert/StyledGlobalAlertContent.js';
 import '../../styled/global-alert/StyledGlobalAlertIcon.js';
 import { StyledGlobalAlertTitle } from '../../styled/global-alert/StyledGlobalAlertTitle.js';
-import { useGlobalAlertContext } from './utility.js';
+import { useGlobalAlertContext } from '../../utils/useGlobalAlertContext.js';
 
-const GlobalAlertTitle = forwardRef((props, ref) => {
+const GlobalAlertTitle = forwardRef((_ref, ref) => {
+  let {
+    isRegular,
+    ...props
+  } = _ref;
   const {
     type
   } = useGlobalAlertContext();
   return React__default.createElement(StyledGlobalAlertTitle, Object.assign({
-    alertType: type,
+    $alertType: type,
+    $isRegular: isRegular,
     ref: ref
   }, props));
 });

package/dist/esm/elements/toaster/styled.js

@@ -6,7 +6,6 @@
 */
 import styled, { css } from 'styled-components';
 import { hideVisually } from 'polished';
-import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const TRANSITION_CLASS = 'garden-toast-transition';
 const DEFAULT_DURATION = '400ms';
@@ -19,9 +18,6 @@ const StyledFadeInTransition = styled.div.withConfig({
   }
   return '-100px';
 }, TRANSITION_CLASS, DEFAULT_DURATION, DEFAULT_DURATION, DEFAULT_DURATION, TRANSITION_CLASS, TRANSITION_CLASS, DEFAULT_DURATION);
-StyledFadeInTransition.defaultProps = {
-  theme: DEFAULT_THEME
-};
 const placementStyles = props => {
   const verticalDistance = `${props.theme.space.base * 16}px`;
   const horizontalDistance = `${props.theme.space.base * 3}px`;
@@ -64,8 +60,5 @@ const StyledTransitionContainer = styled.div.withConfig({
   displayName: "styled__StyledTransitionContainer",
   componentId: "sc-nq0usb-1"
 })(["position:fixed;z-index:", ";", ";"], props => props.toastZIndex, placementStyles);
-StyledTransitionContainer.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledFadeInTransition, StyledTransitionContainer, TRANSITION_CLASS };

package/dist/esm/elements/well/Well.js

@@ -0,0 +1,47 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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 React__default from 'react';
+import PropTypes from 'prop-types';
+import '../../styled/content/StyledClose.js';
+import '../../styled/content/StyledParagraph.js';
+import '../../styled/content/StyledTitle.js';
+import '../../styled/StyledAlert.js';
+import '../../styled/StyledNotification.js';
+import { StyledWell } from '../../styled/StyledWell.js';
+import '../../styled/StyledIcon.js';
+import '../../styled/StyledBase.js';
+import '../../styled/global-alert/StyledGlobalAlert.js';
+import '../../styled/global-alert/StyledGlobalAlertButton.js';
+import '../../styled/global-alert/StyledGlobalAlertClose.js';
+import '../../styled/global-alert/StyledGlobalAlertContent.js';
+import '../../styled/global-alert/StyledGlobalAlertIcon.js';
+import '../../styled/global-alert/StyledGlobalAlertTitle.js';
+import { Title } from '../Title.js';
+import { Paragraph } from '../Paragraph.js';
+
+const WellComponent = React__default.forwardRef((_ref, ref) => {
+  let {
+    isFloating,
+    isRecessed,
+    ...props
+  } = _ref;
+  return React__default.createElement(StyledWell, Object.assign({
+    ref: ref,
+    $isFloating: isFloating,
+    $isRecessed: isRecessed
+  }, props));
+});
+WellComponent.displayName = 'Well';
+WellComponent.propTypes = {
+  isRecessed: PropTypes.bool,
+  isFloating: PropTypes.bool
+};
+const Well = WellComponent;
+Well.Paragraph = Paragraph;
+Well.Title = Title;
+
+export { Well, WellComponent };

package/dist/esm/index.js

@@ -4,12 +4,12 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-export { Alert } from './elements/Alert.js';
+export { Alert } from './elements/alert/Alert.js';
 export { Notification } from './elements/Notification.js';
-export { Well } from './elements/Well.js';
-export { Close } from './elements/content/Close.js';
-export { Paragraph } from './elements/content/Paragraph.js';
-export { Title } from './elements/content/Title.js';
+export { Well } from './elements/well/Well.js';
+export { Close } from './elements/Close.js';
+export { Paragraph } from './elements/Paragraph.js';
+export { Title } from './elements/Title.js';
 export { ToastProvider } from './elements/toaster/ToastProvider.js';
 export { useToast } from './elements/toaster/useToast.js';
 export { GlobalAlert } from './elements/global-alert/GlobalAlert.js';

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _g, _circle;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/alert-warning-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _path, _circle;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgAlertWarningStroke = function SvgAlertWarningStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/check-circle-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _g;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgCheckCircleStroke = function SvgCheckCircleStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/info-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _g, _circle;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgInfoStroke = function SvgInfoStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgXStroke = function SvgXStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/styled/StyledAlert.js

@@ -5,21 +5,44 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
 import { StyledTitle } from './content/StyledTitle.js';
 import { StyledBase } from './StyledBase.js';
+import { validationTypes } from '../utils/icons.js';
 
 const COMPONENT_ID = 'notifications.alert';
-const colorStyles = props => css(["", "{color:", ";}"], StyledTitle, props.hue && getColorV8(props.hue, 800, props.theme));
+const colorStyles = props => {
+  const {
+    $type,
+    theme
+  } = props;
+  let variable;
+  switch ($type) {
+    case validationTypes.success:
+      variable = 'foreground.successEmphasis';
+      break;
+    case validationTypes.error:
+      variable = 'foreground.dangerEmphasis';
+      break;
+    case validationTypes.warning:
+      variable = 'foreground.warningEmphasis';
+      break;
+    case validationTypes.info:
+      variable = 'foreground.default';
+      break;
+  }
+  const color = variable ? getColor({
+    variable,
+    theme
+  }) : undefined;
+  return css(["", "{color:", ";}"], StyledTitle, color);
+};
 const StyledAlert = styled(StyledBase).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.8'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledAlert",
   componentId: "sc-fyn8jp-0"
 })(["", " ", ";"], colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledAlert.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledAlert };