@zendeskgarden/react-notifications 9.0.0-next.0 → 9.0.0-next.10

package/dist/index.cjs.js

@@ -1,10 +1,9 @@
 /**
- * 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.
- */
-
+* 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.
+*/
 'use strict';
 
 var React = require('react');
@@ -40,31 +39,16 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-function _extends$6() {
-  _extends$6 = 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$6.apply(this, arguments);
-}
-
 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.0'
+  'data-garden-version': '9.0.0-next.10'
 }).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 +59,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.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-12tmd6p-0"
@@ -87,11 +71,11 @@ 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.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledTitle",
   componentId: "sc-xx4jsv-0"
-})(["margin:0;color:", ";font-weight:", ";", ";"], props => props.theme.colors.foreground, props => props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
+})(["margin:0;color:", ";font-weight:", ";", ";"], props => reactTheming.getColorV8('foreground', 600 , props.theme), props => props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledTitle.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -106,7 +90,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 +98,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);
+    backgroundColor = reactTheming.getColorV8('background', 600 , 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 +125,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.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledAlert",
   componentId: "sc-fyn8jp-0"
@@ -165,22 +149,21 @@ const colorStyles$4 = props => {
   const {
     successHue,
     dangerHue,
-    warningHue,
-    foreground
+    warningHue
   } = colors;
   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;
+      color = reactTheming.getColorV8('foreground', 600 , theme);
       break;
     default:
       color = 'inherit';
@@ -190,7 +173,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.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledNotification",
   componentId: "sc-uf6jh-0"
@@ -205,25 +188,19 @@ 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.0'
+  'data-garden-version': '9.0.0-next.10'
 }).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
 };
 
-const StyledIcon = styled__default.default(_ref => {
-  let {
-    children,
-    ...props
-  } = _ref;
-  return React__namespace.default.cloneElement(React.Children.only(children), props);
-}).withConfig({
+const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).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,43 +215,45 @@ 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;
   }
   const boxShadow = `0 ${props.theme.borderWidths.sm} ${props.theme.borderWidths.sm} ${borderColor}`;
   return styled.css(["box-shadow:", ";background-color:", ";color:", ";& a{color:inherit;", " &:hover{color:", ";}&:active{color:", ";}}"], boxShadow, backgroundColor, foregroundColor, reactTheming.focusStyles({
     theme: props.theme,
-    hue: focusColor,
-    shade: props.alertType === 'info' ? 600 : 800,
+    color: {
+      hue: focusColor,
+      shade: props.alertType === 'info' ? 600 : 800
+    },
     styles: {
       color: 'inherit'
     }
@@ -292,7 +271,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.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledGlobalAlert",
   componentId: "sc-k6rimt-0"
@@ -310,38 +289,40 @@ 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;
   }
   return styled.css(["color:inherit;&:hover{background-color:", ";color:", ";}", " &:active{background-color:", ";color:", ";}"], hoverBackgroundColor, hoverForegroundColor, reactTheming.focusStyles({
     theme: props.theme,
-    hue: focusColor,
-    shade: props.alertType === 'info' ? 600 : 800
+    color: {
+      hue: focusColor,
+      shade: props.alertType === 'info' ? 600 : 800
+    }
   }), activeBackgroundColor, activeForegroundColor);
 };
 const sizeStyles$2 = props => {
@@ -352,7 +333,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.0',
+  'data-garden-version': '9.0.0-next.10',
   size: 'small'
 }).withConfig({
   displayName: "StyledGlobalAlertClose",
@@ -373,21 +354,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':
@@ -396,8 +377,10 @@ function colorStyles$1(props) {
   }
   return styled.css(["background-color:", ";&:hover{background-color:", ";}", " &:active{background-color:", ";}"], backgroundColor, hoverBackgroundColor, reactTheming.focusStyles({
     theme: props.theme,
-    hue: focusColor,
-    shade: props.alertType === 'info' ? 600 : 800
+    color: {
+      hue: focusColor,
+      shade: props.alertType === 'info' ? 600 : 800
+    }
   }), activeBackgroundColor);
 }
 function sizeStyles$1(props) {
@@ -407,7 +390,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.0',
+  'data-garden-version': '9.0.0-next.10',
   focusInset: false,
   isDanger: false,
   isLink: false,
@@ -426,7 +409,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.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledGlobalAlertContent",
   componentId: "sc-rept0u-0"
@@ -442,15 +425,9 @@ const sizeStyles = props => {
   const marginHorizontal = `${props.theme.space.base * 2}px`;
   return styled.css(["margin-top:", ";margin-", ":", ";width:", ";height:", ";"], marginTop, props.theme.rtl ? 'left' : 'right', marginHorizontal, size, size);
 };
-const StyledGlobalAlertIcon = styled__default.default(_ref => {
-  let {
-    children,
-    ...props
-  } = _ref;
-  return React__namespace.default.cloneElement(React.Children.only(children), props);
-}).attrs({
+const StyledGlobalAlertIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledGlobalAlertIcon",
   componentId: "sc-84ne9k-0"
@@ -468,17 +445,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.0'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledGlobalAlertTitle",
   componentId: "sc-10clqbo-0"
@@ -608,58 +585,15 @@ const useNotificationsContext = () => {
   return React.useContext(NotificationsContext);
 };
 
-const Alert = React__namespace.default.forwardRef((_ref, ref) => {
-  let {
-    role,
-    ...props
-  } = _ref;
-  const hue = validationHues[props.type];
-  const Icon = validationIcons[props.type];
-  return React__namespace.default.createElement(NotificationsContext.Provider, {
-    value: hue
-  }, React__namespace.default.createElement(StyledAlert, _extends$6({
-    ref: ref,
-    hue: hue,
-    role: role === undefined ? 'alert' : role
-  }, props), React__namespace.default.createElement(StyledIcon, {
-    hue: hue
-  }, React__namespace.default.createElement(Icon, null)), props.children));
-});
-Alert.displayName = 'Alert';
-Alert.propTypes = {
-  type: PropTypes__default.default.oneOf(TYPE).isRequired
-};
-
-const Notification = React.forwardRef((_ref, ref) => {
-  let {
-    role,
-    ...props
-  } = _ref;
-  const Icon = props.type ? validationIcons[props.type] : SvgInfoStroke;
-  const hue = props.type && validationHues[props.type];
-  return React__namespace.default.createElement(StyledNotification, _extends$6({
-    ref: ref,
-    type: props.type,
-    isFloating: true
-  }, props, {
-    role: role === undefined ? 'status' : role
-  }), props.type && React__namespace.default.createElement(StyledIcon, {
-    hue: hue
-  }, React__namespace.default.createElement(Icon, null)), props.children);
-});
-Notification.displayName = 'Notification';
-Notification.propTypes = {
-  type: PropTypes__default.default.oneOf(TYPE)
-};
+const Title = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledTitle, Object.assign({
+  ref: ref
+}, props)));
+Title.displayName = 'Title';
 
-const Well = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledWell, _extends$6({
+const Paragraph = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledParagraph, Object.assign({
   ref: ref
 }, props)));
-Well.displayName = 'Well';
-Well.propTypes = {
-  isRecessed: PropTypes__default.default.bool,
-  isFloating: PropTypes__default.default.bool
-};
+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); }
@@ -681,7 +615,7 @@ var SvgXStroke$1 = function SvgXStroke(props) {
 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({
+  return React__namespace.default.createElement(StyledClose, Object.assign({
     ref: ref,
     hue: hue,
     "aria-label": ariaLabel
@@ -689,15 +623,69 @@ const Close = React__namespace.default.forwardRef((props, ref) => {
 });
 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 AlertComponent = React__namespace.default.forwardRef((_ref, ref) => {
+  let {
+    role,
+    ...props
+  } = _ref;
+  const hue = validationHues[props.type];
+  const Icon = validationIcons[props.type];
+  return React__namespace.default.createElement(NotificationsContext.Provider, {
+    value: hue
+  }, React__namespace.default.createElement(StyledAlert, Object.assign({
+    ref: ref,
+    hue: hue,
+    role: role === undefined ? 'alert' : role
+  }, props), React__namespace.default.createElement(StyledIcon, {
+    $hue: hue
+  }, React__namespace.default.createElement(Icon, null)), props.children));
+});
+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 NotificationComponent = React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    type,
+    ...props
+  } = _ref;
+  const Icon = type ? validationIcons[type] : SvgInfoStroke;
+  const hue = type && validationHues[type];
+  return React__namespace.default.createElement(StyledNotification, Object.assign({
+    ref: ref,
+    type: type,
+    isFloating: true,
+    role: "alert"
+  }, props), type && React__namespace.default.createElement(StyledIcon, {
+    $hue: hue
+  }, React__namespace.default.createElement(Icon, null)), children);
+});
+NotificationComponent.displayName = 'Notification';
+NotificationComponent.propTypes = {
+  type: PropTypes__default.default.oneOf(TYPE)
+};
+const Notification = NotificationComponent;
+Notification.Close = Close;
+Notification.Paragraph = Paragraph;
+Notification.Title = Title;
 
-const Title = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledTitle, _extends$6({
+const WellComponent = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledWell, Object.assign({
   ref: ref
 }, props)));
-Title.displayName = 'Title';
+WellComponent.displayName = 'Well';
+WellComponent.propTypes = {
+  isRecessed: PropTypes__default.default.bool,
+  isFloating: PropTypes__default.default.bool
+};
+const Well = WellComponent;
+Well.Paragraph = Paragraph;
+Well.Title = Title;
 
 const getInitialState = () => {
   return {
@@ -971,7 +959,7 @@ const ToastSlot = _ref => {
     }
     return index >= limit;
   }, [limit, placement, toasts.length]);
-  return React__namespace.default.createElement(StyledTransitionContainer, _extends$6({
+  return React__namespace.default.createElement(StyledTransitionContainer, Object.assign({
     key: placement,
     toastPlacement: placement,
     toastZIndex: zIndex,
@@ -1016,7 +1004,7 @@ const ToastProvider = _ref => {
     if (placement === 'bottom' || placement === 'bottom-start' || placement === 'bottom-end') {
       matchingToasts = matchingToasts.reverse();
     }
-    return React__namespace.default.createElement(ToastSlot, _extends$6({
+    return React__namespace.default.createElement(ToastSlot, Object.assign({
       placement: placement,
       toasts: matchingToasts,
       zIndex: zIndex,
@@ -1050,7 +1038,7 @@ const GlobalAlertButton = React.forwardRef((_ref, ref) => {
   const {
     type
   } = useGlobalAlertContext();
-  return React__namespace.default.createElement(StyledGlobalAlertButton, _extends$6({
+  return React__namespace.default.createElement(StyledGlobalAlertButton, Object.assign({
     ref: ref,
     alertType: type
   }, props, {
@@ -1085,7 +1073,7 @@ const GlobalAlertClose = React.forwardRef((props, ref) => {
     type
   } = useGlobalAlertContext();
   const label = reactTheming.useText(GlobalAlertClose, props, 'aria-label', 'Close');
-  return React__namespace.default.createElement(StyledGlobalAlertClose, _extends$6({
+  return React__namespace.default.createElement(StyledGlobalAlertClose, Object.assign({
     ref: ref,
     alertType: type
   }, props), React__namespace.default.createElement(SvgXStroke, {
@@ -1096,7 +1084,7 @@ const GlobalAlertClose = React.forwardRef((props, ref) => {
 GlobalAlertClose.displayName = 'GlobalAlert.Close';
 
 const GlobalAlertContent = React.forwardRef((props, ref) => {
-  return React__namespace.default.createElement(StyledGlobalAlertContent, _extends$6({
+  return React__namespace.default.createElement(StyledGlobalAlertContent, Object.assign({
     ref: ref
   }, props));
 });
@@ -1106,7 +1094,7 @@ const GlobalAlertTitle = React.forwardRef((props, ref) => {
   const {
     type
   } = useGlobalAlertContext();
-  return React__namespace.default.createElement(StyledGlobalAlertTitle, _extends$6({
+  return React__namespace.default.createElement(StyledGlobalAlertTitle, Object.assign({
     alertType: type,
     ref: ref
   }, props));
@@ -1121,20 +1109,21 @@ const GlobalAlertComponent = React.forwardRef((_ref, ref) => {
     type,
     ...props
   } = _ref;
+  const icon = {
+    success: React__namespace.default.createElement(SvgCheckCircleStroke, null),
+    error: React__namespace.default.createElement(SvgAlertErrorStroke, null),
+    warning: React__namespace.default.createElement(SvgAlertWarningStroke, null),
+    info: React__namespace.default.createElement(SvgInfoStroke, null)
+  }[type];
   return React__namespace.default.createElement(GlobalAlertContext.Provider, {
     value: React.useMemo(() => ({
       type
     }), [type])
-  }, React__namespace.default.createElement(StyledGlobalAlert, _extends$6({
+  }, React__namespace.default.createElement(StyledGlobalAlert, Object.assign({
     ref: ref,
     role: "status",
     alertType: type
-  }, props), {
-    success: React__namespace.default.createElement(StyledGlobalAlertIcon, null, React__namespace.default.createElement(SvgCheckCircleStroke, null)),
-    error: React__namespace.default.createElement(StyledGlobalAlertIcon, null, React__namespace.default.createElement(SvgAlertErrorStroke, null)),
-    warning: React__namespace.default.createElement(StyledGlobalAlertIcon, null, React__namespace.default.createElement(SvgAlertWarningStroke, null)),
-    info: React__namespace.default.createElement(StyledGlobalAlertIcon, null, React__namespace.default.createElement(SvgInfoStroke, null))
-  }[type], props.children));
+  }, props), React__namespace.default.createElement(StyledGlobalAlertIcon, null, icon), props.children));
 });
 GlobalAlertComponent.displayName = 'GlobalAlert';
 const GlobalAlert = GlobalAlertComponent;

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;
+};