@zendeskgarden/react-notifications 9.0.0-next.3 → 9.0.0-next.5

package/README.md

@@ -14,16 +14,18 @@ npm install react react-dom styled-components @zendeskgarden/react-theming
 
 ## Usage
 
+## Notifications
+
 ```jsx
 import { ThemeProvider } from '@zendeskgarden/react-theming';
-import { Notification, Title } from '@zendeskgarden/react-notifications';
+import { Notification } from '@zendeskgarden/react-notifications';
 
 /**
  * Place a `ThemeProvider` at the root of your React application
  */
 <ThemeProvider>
   <Notification>
-    <Title>Example Title</Title>
+    <Notification.Title>Example Title</Notification.Title>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit...
   </Notification>
 </ThemeProvider>;
@@ -34,7 +36,7 @@ import { Notification, Title } from '@zendeskgarden/react-notifications';
 ```jsx
 import { ThemeProvider } from '@zendeskgarden/react-theming';
 import { Button } from '@zendeskgarden/react-buttons';
-import { Notification, Close, ToastProvider, useToast } from '@zendeskgarden/react-notifications';
+import { Notification, ToastProvider, useToast } from '@zendeskgarden/react-notifications';
 
 const ToastExample = () => {
   const { addToast } = useToast();
@@ -45,7 +47,7 @@ const ToastExample = () => {
         addToast(({ close }) => (
           <Notification>
             Example notification
-            <Close onClick={close} aria-label="Close" />
+            <Notification.Close onClick={close} aria-label="Close" />
           </Notification>
         ))
       }

package/dist/index.cjs.js

@@ -60,11 +60,11 @@ const TYPE = ['success', 'warning', 'error', 'info'];
 const COMPONENT_ID$b = 'notifications.close';
 const StyledClose = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).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 ? reactTheming.getColor(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme) : reactTheming.getColor('neutralHue', 600, props.theme), props => props.hue ? reactTheming.getColor(props.hue, 800, props.theme) : reactTheming.getColor('neutralHue', 800, props.theme), props => reactTheming.focusStyles({
+})(["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 ? reactTheming.getColorV8(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme) : reactTheming.getColorV8('neutralHue', 600, props.theme), props => props.hue ? reactTheming.getColorV8(props.hue, 800, props.theme) : reactTheming.getColorV8('neutralHue', 800, props.theme), props => reactTheming.focusStyles({
   theme: props.theme,
   inset: true
 }), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
@@ -75,7 +75,7 @@ StyledClose.defaultProps = {
 const COMPONENT_ID$a = 'notifications.paragraph';
 const StyledParagraph = styled__default.default.p.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-12tmd6p-0"
@@ -87,7 +87,7 @@ StyledParagraph.defaultProps = {
 const COMPONENT_ID$9 = 'notifications.title';
 const StyledTitle = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledTitle",
   componentId: "sc-xx4jsv-0"
@@ -106,7 +106,7 @@ const boxShadow = props => {
   } = theme;
   const offsetY = `${space.base * 5}px`;
   const blurRadius = `${space.base * 7}px`;
-  const color = reactTheming.getColor('chromeHue', 600, theme, 0.15);
+  const color = reactTheming.getColorV8('chromeHue', 600, theme, 0.15);
   return shadows.lg(offsetY, blurRadius, color);
 };
 const colorStyles$6 = props => {
@@ -114,13 +114,13 @@ const colorStyles$6 = props => {
   let borderColor;
   let foregroundColor;
   if (props.hue) {
-    backgroundColor = reactTheming.getColor(props.hue, 100, props.theme);
-    borderColor = reactTheming.getColor(props.hue, 300, props.theme);
-    foregroundColor = reactTheming.getColor(props.hue, props.type === 'info' ? 600 : 700, props.theme);
+    backgroundColor = reactTheming.getColorV8(props.hue, 100, props.theme);
+    borderColor = reactTheming.getColorV8(props.hue, 300, props.theme);
+    foregroundColor = reactTheming.getColorV8(props.hue, props.type === 'info' ? 600 : 700, props.theme);
   } else {
     backgroundColor = props.theme.colors.background;
-    borderColor = reactTheming.getColor('neutralHue', 300, props.theme);
-    foregroundColor = reactTheming.getColor('neutralHue', 800, props.theme);
+    borderColor = reactTheming.getColorV8('neutralHue', 300, props.theme);
+    foregroundColor = reactTheming.getColorV8('neutralHue', 800, props.theme);
   }
   return styled.css(["border-color:", ";background-color:", ";color:", ";"], borderColor, backgroundColor, foregroundColor);
 };
@@ -141,10 +141,10 @@ StyledBase.defaultProps = {
 };
 
 const COMPONENT_ID$8 = 'notifications.alert';
-const colorStyles$5 = props => styled.css(["", "{color:", ";}"], StyledTitle, props.hue && reactTheming.getColor(props.hue, 800, props.theme));
+const colorStyles$5 = props => styled.css(["", "{color:", ";}"], StyledTitle, props.hue && reactTheming.getColorV8(props.hue, 800, props.theme));
 const StyledAlert = styled__default.default(StyledBase).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledAlert",
   componentId: "sc-fyn8jp-0"
@@ -171,13 +171,13 @@ const colorStyles$4 = props => {
   let color;
   switch (type) {
     case 'success':
-      color = reactTheming.getColor(successHue, 600, theme);
+      color = reactTheming.getColorV8(successHue, 600, theme);
       break;
     case 'error':
-      color = reactTheming.getColor(dangerHue, 600, theme);
+      color = reactTheming.getColorV8(dangerHue, 600, theme);
       break;
     case 'warning':
-      color = reactTheming.getColor(warningHue, 700, theme);
+      color = reactTheming.getColorV8(warningHue, 700, theme);
       break;
     case 'info':
       color = foreground;
@@ -190,7 +190,7 @@ const colorStyles$4 = props => {
 };
 const StyledNotification = styled__default.default(StyledBase).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledNotification",
   componentId: "sc-uf6jh-0"
@@ -205,11 +205,11 @@ StyledNotification.defaultProps = {
 const COMPONENT_ID$6 = 'notifications.well';
 const StyledWell = styled__default.default(StyledBase).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledWell",
   componentId: "sc-a5831c-0"
-})(["background-color:", ";color:", " ", ";"], props => props.isRecessed && reactTheming.getColor('neutralHue', 100, props.theme), props => reactTheming.getColor('neutralHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
+})(["background-color:", ";color:", " ", ";"], props => props.isRecessed && reactTheming.getColorV8('neutralHue', 100, props.theme), props => reactTheming.getColorV8('neutralHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledWell.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -223,7 +223,7 @@ const StyledIcon = styled__default.default(_ref => {
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-msklws-0"
-})(["position:absolute;right:", ";left:", ";margin-top:", "px;color:", ";"], props => props.theme.rtl && `${props.theme.space.base * 4}px`, props => !props.theme.rtl && `${props.theme.space.base * 4}px`, props => props.theme.space.base / 2, props => props.hue && reactTheming.getColor(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme));
+})(["position:absolute;right:", ";left:", ";margin-top:", "px;color:", ";"], props => props.theme.rtl && `${props.theme.space.base * 4}px`, props => !props.theme.rtl && `${props.theme.space.base * 4}px`, props => props.theme.space.base / 2, props => props.hue && reactTheming.getColorV8(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme));
 StyledIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -238,35 +238,35 @@ const colorStyles$3 = props => {
   let focusColor;
   switch (props.alertType) {
     case 'success':
-      borderColor = reactTheming.getColor('successHue', 700, props.theme);
-      backgroundColor = reactTheming.getColor('successHue', 600, props.theme);
-      foregroundColor = reactTheming.getColor('successHue', 100, props.theme);
+      borderColor = reactTheming.getColorV8('successHue', 700, props.theme);
+      backgroundColor = reactTheming.getColorV8('successHue', 600, props.theme);
+      foregroundColor = reactTheming.getColorV8('successHue', 100, props.theme);
       anchorHoverColor = props.theme.palette.white;
       anchorActiveColor = props.theme.palette.white;
       focusColor = 'successHue';
       break;
     case 'error':
-      borderColor = reactTheming.getColor('dangerHue', 700, props.theme);
-      backgroundColor = reactTheming.getColor('dangerHue', 600, props.theme);
-      foregroundColor = reactTheming.getColor('dangerHue', 100, props.theme);
+      borderColor = reactTheming.getColorV8('dangerHue', 700, props.theme);
+      backgroundColor = reactTheming.getColorV8('dangerHue', 600, props.theme);
+      foregroundColor = reactTheming.getColorV8('dangerHue', 100, props.theme);
       anchorHoverColor = props.theme.palette.white;
       anchorActiveColor = props.theme.palette.white;
       focusColor = 'dangerHue';
       break;
     case 'warning':
-      borderColor = reactTheming.getColor('warningHue', 400, props.theme);
-      backgroundColor = reactTheming.getColor('warningHue', 300, props.theme);
-      foregroundColor = reactTheming.getColor('warningHue', 800, props.theme);
-      anchorHoverColor = reactTheming.getColor('warningHue', 900, props.theme);
-      anchorActiveColor = reactTheming.getColor('warningHue', 1000, props.theme);
+      borderColor = reactTheming.getColorV8('warningHue', 400, props.theme);
+      backgroundColor = reactTheming.getColorV8('warningHue', 300, props.theme);
+      foregroundColor = reactTheming.getColorV8('warningHue', 800, props.theme);
+      anchorHoverColor = reactTheming.getColorV8('warningHue', 900, props.theme);
+      anchorActiveColor = reactTheming.getColorV8('warningHue', 1000, props.theme);
       focusColor = 'warningHue';
       break;
     case 'info':
-      borderColor = reactTheming.getColor('primaryHue', 300, props.theme);
-      backgroundColor = reactTheming.getColor('primaryHue', 200, props.theme);
-      foregroundColor = reactTheming.getColor('primaryHue', 700, props.theme);
-      anchorHoverColor = reactTheming.getColor('primaryHue', 800, props.theme);
-      anchorActiveColor = reactTheming.getColor('primaryHue', 900, props.theme);
+      borderColor = reactTheming.getColorV8('primaryHue', 300, props.theme);
+      backgroundColor = reactTheming.getColorV8('primaryHue', 200, props.theme);
+      foregroundColor = reactTheming.getColorV8('primaryHue', 700, props.theme);
+      anchorHoverColor = reactTheming.getColorV8('primaryHue', 800, props.theme);
+      anchorActiveColor = reactTheming.getColorV8('primaryHue', 900, props.theme);
       focusColor = 'primaryHue';
       break;
   }
@@ -292,7 +292,7 @@ const sizeStyles$3 = props => {
 };
 const StyledGlobalAlert = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledGlobalAlert",
   componentId: "sc-k6rimt-0"
@@ -310,31 +310,31 @@ const colorStyles$2 = props => {
   let focusColor;
   switch (props.alertType) {
     case 'success':
-      hoverBackgroundColor = reactTheming.getColor('successHue', 100, props.theme, 0.08);
+      hoverBackgroundColor = reactTheming.getColorV8('successHue', 100, props.theme, 0.08);
       hoverForegroundColor = props.theme.palette.white;
-      activeBackgroundColor = reactTheming.getColor('successHue', 100, props.theme, 0.2);
+      activeBackgroundColor = reactTheming.getColorV8('successHue', 100, props.theme, 0.2);
       activeForegroundColor = props.theme.palette.white;
       focusColor = 'successHue';
       break;
     case 'error':
-      hoverBackgroundColor = reactTheming.getColor('dangerHue', 100, props.theme, 0.08);
+      hoverBackgroundColor = reactTheming.getColorV8('dangerHue', 100, props.theme, 0.08);
       hoverForegroundColor = props.theme.palette.white;
-      activeBackgroundColor = reactTheming.getColor('dangerHue', 100, props.theme, 0.2);
+      activeBackgroundColor = reactTheming.getColorV8('dangerHue', 100, props.theme, 0.2);
       activeForegroundColor = props.theme.palette.white;
       focusColor = 'dangerHue';
       break;
     case 'warning':
-      hoverBackgroundColor = reactTheming.getColor('warningHue', 800, props.theme, 0.08);
-      hoverForegroundColor = reactTheming.getColor('warningHue', 900, props.theme);
-      activeBackgroundColor = reactTheming.getColor('warningHue', 800, props.theme, 0.2);
-      activeForegroundColor = reactTheming.getColor('warningHue', 1000, props.theme);
+      hoverBackgroundColor = reactTheming.getColorV8('warningHue', 800, props.theme, 0.08);
+      hoverForegroundColor = reactTheming.getColorV8('warningHue', 900, props.theme);
+      activeBackgroundColor = reactTheming.getColorV8('warningHue', 800, props.theme, 0.2);
+      activeForegroundColor = reactTheming.getColorV8('warningHue', 1000, props.theme);
       focusColor = 'warningHue';
       break;
     case 'info':
-      hoverBackgroundColor = reactTheming.getColor('primaryHue', 700, props.theme, 0.08);
-      hoverForegroundColor = reactTheming.getColor('primaryHue', 800, props.theme);
-      activeBackgroundColor = reactTheming.getColor('primaryHue', 700, props.theme, 0.2);
-      activeForegroundColor = reactTheming.getColor('primaryHue', 900, props.theme);
+      hoverBackgroundColor = reactTheming.getColorV8('primaryHue', 700, props.theme, 0.08);
+      hoverForegroundColor = reactTheming.getColorV8('primaryHue', 800, props.theme);
+      activeBackgroundColor = reactTheming.getColorV8('primaryHue', 700, props.theme, 0.2);
+      activeForegroundColor = reactTheming.getColorV8('primaryHue', 900, props.theme);
       focusColor = 'primaryHue';
       break;
   }
@@ -352,7 +352,7 @@ const sizeStyles$2 = props => {
 };
 const StyledGlobalAlertClose = styled__default.default(reactButtons.IconButton).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.3',
+  'data-garden-version': '9.0.0-next.5',
   size: 'small'
 }).withConfig({
   displayName: "StyledGlobalAlertClose",
@@ -373,21 +373,21 @@ function colorStyles$1(props) {
   let focusColor;
   switch (props.alertType) {
     case 'success':
-      backgroundColor = reactTheming.getColor('successHue', 800, props.theme);
-      hoverBackgroundColor = reactTheming.getColor('successHue', 900, props.theme);
-      activeBackgroundColor = reactTheming.getColor('successHue', 1000, props.theme);
+      backgroundColor = reactTheming.getColorV8('successHue', 800, props.theme);
+      hoverBackgroundColor = reactTheming.getColorV8('successHue', 900, props.theme);
+      activeBackgroundColor = reactTheming.getColorV8('successHue', 1000, props.theme);
       focusColor = 'successHue';
       break;
     case 'error':
-      backgroundColor = reactTheming.getColor('dangerHue', 800, props.theme);
-      hoverBackgroundColor = reactTheming.getColor('dangerHue', 900, props.theme);
-      activeBackgroundColor = reactTheming.getColor('dangerHue', 1000, props.theme);
+      backgroundColor = reactTheming.getColorV8('dangerHue', 800, props.theme);
+      hoverBackgroundColor = reactTheming.getColorV8('dangerHue', 900, props.theme);
+      activeBackgroundColor = reactTheming.getColorV8('dangerHue', 1000, props.theme);
       focusColor = 'dangerHue';
       break;
     case 'warning':
-      backgroundColor = reactTheming.getColor('warningHue', 800, props.theme);
-      hoverBackgroundColor = reactTheming.getColor('warningHue', 900, props.theme);
-      activeBackgroundColor = reactTheming.getColor('warningHue', 1000, props.theme);
+      backgroundColor = reactTheming.getColorV8('warningHue', 800, props.theme);
+      hoverBackgroundColor = reactTheming.getColorV8('warningHue', 900, props.theme);
+      activeBackgroundColor = reactTheming.getColorV8('warningHue', 1000, props.theme);
       focusColor = 'warningHue';
       break;
     case 'info':
@@ -407,7 +407,7 @@ function sizeStyles$1(props) {
 }
 const StyledGlobalAlertButton = styled__default.default(reactButtons.Button).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.3',
+  'data-garden-version': '9.0.0-next.5',
   focusInset: false,
   isDanger: false,
   isLink: false,
@@ -426,7 +426,7 @@ StyledGlobalAlertButton.defaultProps = {
 const COMPONENT_ID$2 = 'notifications.global-alert.content';
 const StyledGlobalAlertContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledGlobalAlertContent",
   componentId: "sc-rept0u-0"
@@ -450,7 +450,7 @@ const StyledGlobalAlertIcon = styled__default.default(_ref => {
   return React__namespace.default.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledGlobalAlertIcon",
   componentId: "sc-84ne9k-0"
@@ -468,17 +468,17 @@ const colorStyles = props => {
       color = props.theme.palette.white;
       break;
     case 'warning':
-      color = reactTheming.getColor('warningHue', 900, props.theme);
+      color = reactTheming.getColorV8('warningHue', 900, props.theme);
       break;
     case 'info':
-      color = reactTheming.getColor('primaryHue', 800, props.theme);
+      color = reactTheming.getColorV8('primaryHue', 800, props.theme);
       break;
   }
   return styled.css(["color:", ";"], color);
 };
 const StyledGlobalAlertTitle = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledGlobalAlertTitle",
   componentId: "sc-10clqbo-0"
@@ -608,7 +608,45 @@ const useNotificationsContext = () => {
   return React.useContext(NotificationsContext);
 };
 
-const Alert = React__namespace.default.forwardRef((_ref, ref) => {
+const Title = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledTitle, _extends$6({
+  ref: ref
+}, props)));
+Title.displayName = 'Title';
+
+const Paragraph = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledParagraph, _extends$6({
+  ref: ref
+}, props)));
+Paragraph.displayName = 'Paragraph';
+
+var _path$1;
+function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
+var SvgXStroke$1 = function SvgXStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    focusable: "false",
+    viewBox: "0 0 12 12",
+    "aria-hidden": "true"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    d: "M3 9l6-6m0 6L3 3"
+  })));
+};
+
+const Close = React__namespace.default.forwardRef((props, ref) => {
+  const ariaLabel = reactTheming.useText(Close, props, 'aria-label', 'Close');
+  const hue = useNotificationsContext();
+  return React__namespace.default.createElement(StyledClose, _extends$6({
+    ref: ref,
+    hue: hue,
+    "aria-label": ariaLabel
+  }, props), React__namespace.default.createElement(SvgXStroke$1, null));
+});
+Close.displayName = 'Close';
+
+const AlertComponent = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     role,
     ...props
@@ -625,12 +663,16 @@ const Alert = React__namespace.default.forwardRef((_ref, ref) => {
     hue: hue
   }, React__namespace.default.createElement(Icon, null)), props.children));
 });
-Alert.displayName = 'Alert';
-Alert.propTypes = {
+AlertComponent.displayName = 'Alert';
+AlertComponent.propTypes = {
   type: PropTypes__default.default.oneOf(TYPE).isRequired
 };
+const Alert = AlertComponent;
+Alert.Close = Close;
+Alert.Paragraph = Paragraph;
+Alert.Title = Title;
 
-const Notification = React.forwardRef((_ref, ref) => {
+const NotificationComponent = React.forwardRef((_ref, ref) => {
   let {
     role,
     ...props
@@ -647,57 +689,26 @@ const Notification = React.forwardRef((_ref, ref) => {
     hue: hue
   }, React__namespace.default.createElement(Icon, null)), props.children);
 });
-Notification.displayName = 'Notification';
-Notification.propTypes = {
+NotificationComponent.displayName = 'Notification';
+NotificationComponent.propTypes = {
   type: PropTypes__default.default.oneOf(TYPE)
 };
+const Notification = NotificationComponent;
+Notification.Close = Close;
+Notification.Paragraph = Paragraph;
+Notification.Title = Title;
 
-const Well = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledWell, _extends$6({
+const WellComponent = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledWell, _extends$6({
   ref: ref
 }, props)));
-Well.displayName = 'Well';
-Well.propTypes = {
+WellComponent.displayName = 'Well';
+WellComponent.propTypes = {
   isRecessed: PropTypes__default.default.bool,
   isFloating: PropTypes__default.default.bool
 };
-
-var _path$1;
-function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
-var SvgXStroke$1 = function SvgXStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    focusable: "false",
-    viewBox: "0 0 12 12",
-    "aria-hidden": "true"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    d: "M3 9l6-6m0 6L3 3"
-  })));
-};
-
-const Close = React__namespace.default.forwardRef((props, ref) => {
-  const ariaLabel = reactTheming.useText(Close, props, 'aria-label', 'Close');
-  const hue = useNotificationsContext();
-  return React__namespace.default.createElement(StyledClose, _extends$6({
-    ref: ref,
-    hue: hue,
-    "aria-label": ariaLabel
-  }, props), React__namespace.default.createElement(SvgXStroke$1, null));
-});
-Close.displayName = 'Close';
-
-const Paragraph = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledParagraph, _extends$6({
-  ref: ref
-}, props)));
-Paragraph.displayName = 'Paragraph';
-
-const Title = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledTitle, _extends$6({
-  ref: ref
-}, props)));
-Title.displayName = 'Title';
+const Well = WellComponent;
+Well.Paragraph = Paragraph;
+Well.Title = Title;
 
 const getInitialState = () => {
   return {

package/dist/index.esm.js

@@ -9,7 +9,7 @@ import * as React from 'react';
 import React__default, { Children, createContext, useContext, forwardRef, useCallback, useState, useRef, useEffect, useReducer, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css, ThemeContext } from 'styled-components';
-import { getColor, focusStyles, retrieveComponentStyles, DEFAULT_THEME, getLineHeight, useText, useDocument } from '@zendeskgarden/react-theming';
+import { getColorV8, focusStyles, retrieveComponentStyles, DEFAULT_THEME, getLineHeight, useText, useDocument } from '@zendeskgarden/react-theming';
 import { IconButton, Button } from '@zendeskgarden/react-buttons';
 import { math, hideVisually } from 'polished';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
@@ -35,11 +35,11 @@ const TYPE = ['success', 'warning', 'error', 'info'];
 const COMPONENT_ID$b = 'notifications.close';
 const StyledClose = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).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 ? getColor(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme) : getColor('neutralHue', 600, props.theme), props => props.hue ? getColor(props.hue, 800, props.theme) : getColor('neutralHue', 800, props.theme), props => focusStyles({
+})(["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$b, props));
@@ -50,7 +50,7 @@ StyledClose.defaultProps = {
 const COMPONENT_ID$a = 'notifications.paragraph';
 const StyledParagraph = styled.p.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-12tmd6p-0"
@@ -62,7 +62,7 @@ StyledParagraph.defaultProps = {
 const COMPONENT_ID$9 = 'notifications.title';
 const StyledTitle = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledTitle",
   componentId: "sc-xx4jsv-0"
@@ -81,7 +81,7 @@ const boxShadow = props => {
   } = theme;
   const offsetY = `${space.base * 5}px`;
   const blurRadius = `${space.base * 7}px`;
-  const color = getColor('chromeHue', 600, theme, 0.15);
+  const color = getColorV8('chromeHue', 600, theme, 0.15);
   return shadows.lg(offsetY, blurRadius, color);
 };
 const colorStyles$6 = props => {
@@ -89,13 +89,13 @@ const colorStyles$6 = props => {
   let borderColor;
   let foregroundColor;
   if (props.hue) {
-    backgroundColor = getColor(props.hue, 100, props.theme);
-    borderColor = getColor(props.hue, 300, props.theme);
-    foregroundColor = getColor(props.hue, props.type === 'info' ? 600 : 700, props.theme);
+    backgroundColor = getColorV8(props.hue, 100, props.theme);
+    borderColor = getColorV8(props.hue, 300, props.theme);
+    foregroundColor = getColorV8(props.hue, props.type === 'info' ? 600 : 700, props.theme);
   } else {
     backgroundColor = props.theme.colors.background;
-    borderColor = getColor('neutralHue', 300, props.theme);
-    foregroundColor = getColor('neutralHue', 800, props.theme);
+    borderColor = getColorV8('neutralHue', 300, props.theme);
+    foregroundColor = getColorV8('neutralHue', 800, props.theme);
   }
   return css(["border-color:", ";background-color:", ";color:", ";"], borderColor, backgroundColor, foregroundColor);
 };
@@ -116,10 +116,10 @@ StyledBase.defaultProps = {
 };
 
 const COMPONENT_ID$8 = 'notifications.alert';
-const colorStyles$5 = props => css(["", "{color:", ";}"], StyledTitle, props.hue && getColor(props.hue, 800, props.theme));
+const colorStyles$5 = props => css(["", "{color:", ";}"], StyledTitle, props.hue && getColorV8(props.hue, 800, props.theme));
 const StyledAlert = styled(StyledBase).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledAlert",
   componentId: "sc-fyn8jp-0"
@@ -146,13 +146,13 @@ const colorStyles$4 = props => {
   let color;
   switch (type) {
     case 'success':
-      color = getColor(successHue, 600, theme);
+      color = getColorV8(successHue, 600, theme);
       break;
     case 'error':
-      color = getColor(dangerHue, 600, theme);
+      color = getColorV8(dangerHue, 600, theme);
       break;
     case 'warning':
-      color = getColor(warningHue, 700, theme);
+      color = getColorV8(warningHue, 700, theme);
       break;
     case 'info':
       color = foreground;
@@ -165,7 +165,7 @@ const colorStyles$4 = props => {
 };
 const StyledNotification = styled(StyledBase).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledNotification",
   componentId: "sc-uf6jh-0"
@@ -180,11 +180,11 @@ StyledNotification.defaultProps = {
 const COMPONENT_ID$6 = 'notifications.well';
 const StyledWell = styled(StyledBase).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledWell",
   componentId: "sc-a5831c-0"
-})(["background-color:", ";color:", " ", ";"], props => props.isRecessed && getColor('neutralHue', 100, props.theme), props => getColor('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$6, props));
+})(["background-color:", ";color:", " ", ";"], props => props.isRecessed && getColorV8('neutralHue', 100, props.theme), props => getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledWell.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -198,7 +198,7 @@ const StyledIcon = styled(_ref => {
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-msklws-0"
-})(["position:absolute;right:", ";left:", ";margin-top:", "px;color:", ";"], props => props.theme.rtl && `${props.theme.space.base * 4}px`, props => !props.theme.rtl && `${props.theme.space.base * 4}px`, props => props.theme.space.base / 2, props => props.hue && getColor(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme));
+})(["position:absolute;right:", ";left:", ";margin-top:", "px;color:", ";"], props => props.theme.rtl && `${props.theme.space.base * 4}px`, props => !props.theme.rtl && `${props.theme.space.base * 4}px`, props => props.theme.space.base / 2, props => props.hue && getColorV8(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme));
 StyledIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -213,35 +213,35 @@ const colorStyles$3 = props => {
   let focusColor;
   switch (props.alertType) {
     case 'success':
-      borderColor = getColor('successHue', 700, props.theme);
-      backgroundColor = getColor('successHue', 600, props.theme);
-      foregroundColor = getColor('successHue', 100, props.theme);
+      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;
     case 'error':
-      borderColor = getColor('dangerHue', 700, props.theme);
-      backgroundColor = getColor('dangerHue', 600, props.theme);
-      foregroundColor = getColor('dangerHue', 100, props.theme);
+      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;
     case 'warning':
-      borderColor = getColor('warningHue', 400, props.theme);
-      backgroundColor = getColor('warningHue', 300, props.theme);
-      foregroundColor = getColor('warningHue', 800, props.theme);
-      anchorHoverColor = getColor('warningHue', 900, props.theme);
-      anchorActiveColor = getColor('warningHue', 1000, props.theme);
+      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;
     case 'info':
-      borderColor = getColor('primaryHue', 300, props.theme);
-      backgroundColor = getColor('primaryHue', 200, props.theme);
-      foregroundColor = getColor('primaryHue', 700, props.theme);
-      anchorHoverColor = getColor('primaryHue', 800, props.theme);
-      anchorActiveColor = getColor('primaryHue', 900, props.theme);
+      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;
   }
@@ -267,7 +267,7 @@ const sizeStyles$3 = props => {
 };
 const StyledGlobalAlert = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledGlobalAlert",
   componentId: "sc-k6rimt-0"
@@ -285,31 +285,31 @@ const colorStyles$2 = props => {
   let focusColor;
   switch (props.alertType) {
     case 'success':
-      hoverBackgroundColor = getColor('successHue', 100, props.theme, 0.08);
+      hoverBackgroundColor = getColorV8('successHue', 100, props.theme, 0.08);
       hoverForegroundColor = props.theme.palette.white;
-      activeBackgroundColor = getColor('successHue', 100, props.theme, 0.2);
+      activeBackgroundColor = getColorV8('successHue', 100, props.theme, 0.2);
       activeForegroundColor = props.theme.palette.white;
       focusColor = 'successHue';
       break;
     case 'error':
-      hoverBackgroundColor = getColor('dangerHue', 100, props.theme, 0.08);
+      hoverBackgroundColor = getColorV8('dangerHue', 100, props.theme, 0.08);
       hoverForegroundColor = props.theme.palette.white;
-      activeBackgroundColor = getColor('dangerHue', 100, props.theme, 0.2);
+      activeBackgroundColor = getColorV8('dangerHue', 100, props.theme, 0.2);
       activeForegroundColor = props.theme.palette.white;
       focusColor = 'dangerHue';
       break;
     case 'warning':
-      hoverBackgroundColor = getColor('warningHue', 800, props.theme, 0.08);
-      hoverForegroundColor = getColor('warningHue', 900, props.theme);
-      activeBackgroundColor = getColor('warningHue', 800, props.theme, 0.2);
-      activeForegroundColor = getColor('warningHue', 1000, props.theme);
+      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 = getColor('primaryHue', 700, props.theme, 0.08);
-      hoverForegroundColor = getColor('primaryHue', 800, props.theme);
-      activeBackgroundColor = getColor('primaryHue', 700, props.theme, 0.2);
-      activeForegroundColor = getColor('primaryHue', 900, props.theme);
+      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';
       break;
   }
@@ -327,7 +327,7 @@ const sizeStyles$2 = props => {
 };
 const StyledGlobalAlertClose = styled(IconButton).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.3',
+  'data-garden-version': '9.0.0-next.5',
   size: 'small'
 }).withConfig({
   displayName: "StyledGlobalAlertClose",
@@ -348,21 +348,21 @@ function colorStyles$1(props) {
   let focusColor;
   switch (props.alertType) {
     case 'success':
-      backgroundColor = getColor('successHue', 800, props.theme);
-      hoverBackgroundColor = getColor('successHue', 900, props.theme);
-      activeBackgroundColor = getColor('successHue', 1000, props.theme);
+      backgroundColor = getColorV8('successHue', 800, props.theme);
+      hoverBackgroundColor = getColorV8('successHue', 900, props.theme);
+      activeBackgroundColor = getColorV8('successHue', 1000, props.theme);
       focusColor = 'successHue';
       break;
     case 'error':
-      backgroundColor = getColor('dangerHue', 800, props.theme);
-      hoverBackgroundColor = getColor('dangerHue', 900, props.theme);
-      activeBackgroundColor = getColor('dangerHue', 1000, props.theme);
+      backgroundColor = getColorV8('dangerHue', 800, props.theme);
+      hoverBackgroundColor = getColorV8('dangerHue', 900, props.theme);
+      activeBackgroundColor = getColorV8('dangerHue', 1000, props.theme);
       focusColor = 'dangerHue';
       break;
     case 'warning':
-      backgroundColor = getColor('warningHue', 800, props.theme);
-      hoverBackgroundColor = getColor('warningHue', 900, props.theme);
-      activeBackgroundColor = getColor('warningHue', 1000, props.theme);
+      backgroundColor = getColorV8('warningHue', 800, props.theme);
+      hoverBackgroundColor = getColorV8('warningHue', 900, props.theme);
+      activeBackgroundColor = getColorV8('warningHue', 1000, props.theme);
       focusColor = 'warningHue';
       break;
     case 'info':
@@ -382,7 +382,7 @@ function sizeStyles$1(props) {
 }
 const StyledGlobalAlertButton = styled(Button).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.3',
+  'data-garden-version': '9.0.0-next.5',
   focusInset: false,
   isDanger: false,
   isLink: false,
@@ -401,7 +401,7 @@ StyledGlobalAlertButton.defaultProps = {
 const COMPONENT_ID$2 = 'notifications.global-alert.content';
 const StyledGlobalAlertContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledGlobalAlertContent",
   componentId: "sc-rept0u-0"
@@ -425,7 +425,7 @@ const StyledGlobalAlertIcon = styled(_ref => {
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledGlobalAlertIcon",
   componentId: "sc-84ne9k-0"
@@ -443,17 +443,17 @@ const colorStyles = props => {
       color = props.theme.palette.white;
       break;
     case 'warning':
-      color = getColor('warningHue', 900, props.theme);
+      color = getColorV8('warningHue', 900, props.theme);
       break;
     case 'info':
-      color = getColor('primaryHue', 800, props.theme);
+      color = getColorV8('primaryHue', 800, props.theme);
       break;
   }
   return css(["color:", ";"], color);
 };
 const StyledGlobalAlertTitle = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledGlobalAlertTitle",
   componentId: "sc-10clqbo-0"
@@ -583,7 +583,45 @@ const useNotificationsContext = () => {
   return useContext(NotificationsContext);
 };
 
-const Alert = React__default.forwardRef((_ref, ref) => {
+const Title = React__default.forwardRef((props, ref) => React__default.createElement(StyledTitle, _extends$6({
+  ref: ref
+}, props)));
+Title.displayName = 'Title';
+
+const Paragraph = React__default.forwardRef((props, ref) => React__default.createElement(StyledParagraph, _extends$6({
+  ref: ref
+}, props)));
+Paragraph.displayName = 'Paragraph';
+
+var _path$1;
+function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
+var SvgXStroke$1 = function SvgXStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    focusable: "false",
+    viewBox: "0 0 12 12",
+    "aria-hidden": "true"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    d: "M3 9l6-6m0 6L3 3"
+  })));
+};
+
+const Close = React__default.forwardRef((props, ref) => {
+  const ariaLabel = useText(Close, props, 'aria-label', 'Close');
+  const hue = useNotificationsContext();
+  return React__default.createElement(StyledClose, _extends$6({
+    ref: ref,
+    hue: hue,
+    "aria-label": ariaLabel
+  }, props), React__default.createElement(SvgXStroke$1, null));
+});
+Close.displayName = 'Close';
+
+const AlertComponent = React__default.forwardRef((_ref, ref) => {
   let {
     role,
     ...props
@@ -600,12 +638,16 @@ const Alert = React__default.forwardRef((_ref, ref) => {
     hue: hue
   }, React__default.createElement(Icon, null)), props.children));
 });
-Alert.displayName = 'Alert';
-Alert.propTypes = {
+AlertComponent.displayName = 'Alert';
+AlertComponent.propTypes = {
   type: PropTypes.oneOf(TYPE).isRequired
 };
+const Alert = AlertComponent;
+Alert.Close = Close;
+Alert.Paragraph = Paragraph;
+Alert.Title = Title;
 
-const Notification = forwardRef((_ref, ref) => {
+const NotificationComponent = forwardRef((_ref, ref) => {
   let {
     role,
     ...props
@@ -622,57 +664,26 @@ const Notification = forwardRef((_ref, ref) => {
     hue: hue
   }, React__default.createElement(Icon, null)), props.children);
 });
-Notification.displayName = 'Notification';
-Notification.propTypes = {
+NotificationComponent.displayName = 'Notification';
+NotificationComponent.propTypes = {
   type: PropTypes.oneOf(TYPE)
 };
+const Notification = NotificationComponent;
+Notification.Close = Close;
+Notification.Paragraph = Paragraph;
+Notification.Title = Title;
 
-const Well = React__default.forwardRef((props, ref) => React__default.createElement(StyledWell, _extends$6({
+const WellComponent = React__default.forwardRef((props, ref) => React__default.createElement(StyledWell, _extends$6({
   ref: ref
 }, props)));
-Well.displayName = 'Well';
-Well.propTypes = {
+WellComponent.displayName = 'Well';
+WellComponent.propTypes = {
   isRecessed: PropTypes.bool,
   isFloating: PropTypes.bool
 };
-
-var _path$1;
-function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
-var SvgXStroke$1 = function SvgXStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    focusable: "false",
-    viewBox: "0 0 12 12",
-    "aria-hidden": "true"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    d: "M3 9l6-6m0 6L3 3"
-  })));
-};
-
-const Close = React__default.forwardRef((props, ref) => {
-  const ariaLabel = useText(Close, props, 'aria-label', 'Close');
-  const hue = useNotificationsContext();
-  return React__default.createElement(StyledClose, _extends$6({
-    ref: ref,
-    hue: hue,
-    "aria-label": ariaLabel
-  }, props), React__default.createElement(SvgXStroke$1, null));
-});
-Close.displayName = 'Close';
-
-const Paragraph = React__default.forwardRef((props, ref) => React__default.createElement(StyledParagraph, _extends$6({
-  ref: ref
-}, props)));
-Paragraph.displayName = 'Paragraph';
-
-const Title = React__default.forwardRef((props, ref) => React__default.createElement(StyledTitle, _extends$6({
-  ref: ref
-}, props)));
-Title.displayName = 'Title';
+const Well = WellComponent;
+Well.Paragraph = Paragraph;
+Well.Title = Title;
 
 const getInitialState = () => {
   return {

package/dist/typings/elements/Alert.d.ts

@@ -6,7 +6,15 @@
  */
 import React from 'react';
 import { IAlertProps } from '../types';
+import { Title } from './content/Title';
+import { Paragraph } from './content/Paragraph';
+import { Close } from './content/Close';
+export declare const AlertComponent: React.ForwardRefExoticComponent<IAlertProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export declare const Alert: React.ForwardRefExoticComponent<IAlertProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Alert: React.ForwardRefExoticComponent<IAlertProps & React.RefAttributes<HTMLDivElement>> & {
+    Close: typeof Close;
+    Paragraph: typeof Paragraph;
+    Title: typeof Title;
+};

package/dist/typings/elements/Notification.d.ts

@@ -6,7 +6,15 @@
  */
 import React from 'react';
 import { INotificationProps } from '../types';
+import { Title } from './content/Title';
+import { Paragraph } from './content/Paragraph';
+import { Close } from './content/Close';
+export declare const NotificationComponent: React.ForwardRefExoticComponent<INotificationProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export declare const Notification: React.ForwardRefExoticComponent<INotificationProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Notification: React.ForwardRefExoticComponent<INotificationProps & React.RefAttributes<HTMLDivElement>> & {
+    Close: typeof Close;
+    Paragraph: typeof Paragraph;
+    Title: typeof Title;
+};

package/dist/typings/elements/Well.d.ts

@@ -6,7 +6,13 @@
  */
 import React from 'react';
 import { IWellProps } from '../types';
+import { Title } from './content/Title';
+import { Paragraph } from './content/Paragraph';
+export declare const WellComponent: React.ForwardRefExoticComponent<IWellProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export declare const Well: React.ForwardRefExoticComponent<IWellProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Well: React.ForwardRefExoticComponent<IWellProps & React.RefAttributes<HTMLDivElement>> & {
+    Paragraph: typeof Paragraph;
+    Title: typeof Title;
+};

package/dist/typings/elements/content/Close.d.ts

@@ -6,6 +6,8 @@
  */
 import React from 'react';
 /**
+ * @deprecated use `Alert.Close` or `Notification.Close` instead
+ *
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
 export declare const Close: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

package/dist/typings/elements/content/Paragraph.d.ts

@@ -6,6 +6,8 @@
  */
 import React from 'react';
 /**
+ * @deprecated use `Alert.Paragraph`, `Notification.Paragraph`, or `Well.Paragraph` instead
+ *
  * @extends HTMLAttributes<HTMLParagraphElement>
  */
 export declare const Paragraph: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/typings/elements/content/Title.d.ts

@@ -7,6 +7,8 @@
 import React from 'react';
 import { ITitleProps } from '../../types';
 /**
+ * @deprecated use `Alert.Title`, `Notification.Title`, or `Well.Title` instead
+ *
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export declare const Title: React.ForwardRefExoticComponent<ITitleProps & React.RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-notifications",
-  "version": "9.0.0-next.3",
+  "version": "9.0.0-next.5",
   "description": "Notification and Well components within the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,7 +21,7 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/react-buttons": "^9.0.0-next.3",
+    "@zendeskgarden/react-buttons": "^9.0.0-next.5",
     "polished": "^4.1.1",
     "prop-types": "^15.5.7",
     "react-transition-group": "^4.4.2",
@@ -31,11 +31,11 @@
     "@zendeskgarden/react-theming": "^8.67.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "styled-components": "^5.1.0"
+    "styled-components": "^5.3.1"
   },
   "devDependencies": {
     "@types/react-transition-group": "4.4.10",
-    "@zendeskgarden/react-theming": "^9.0.0-next.3",
+    "@zendeskgarden/react-theming": "^9.0.0-next.5",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -48,5 +48,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "d5086e8a3ae0c8608361966954bf434ef03005ec"
+  "gitHead": "806fa33feb06142c3f69b6a87b53628469117e4d"
 }