@zendeskgarden/react-notifications 9.0.0-next.2 → 9.0.0-next.21

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,89 +39,270 @@ 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.2'
+var _g$2, _circle$2;
+function _extends$4() { return _extends$4 = 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$4.apply(null, arguments); }
+var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
+    fill: "none",
+    stroke: "currentColor"
+  }, /*#__PURE__*/React__namespace.createElement("circle", {
+    cx: 7.5,
+    cy: 8.5,
+    r: 7
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    strokeLinecap: "round",
+    d: "M7.5 4.5V9"
+  }))), _circle$2 || (_circle$2 = /*#__PURE__*/React__namespace.createElement("circle", {
+    cx: 7.5,
+    cy: 12,
+    r: 1,
+    fill: "currentColor"
+  })));
+};
+
+var _g$1;
+function _extends$3() { return _extends$3 = 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$3.apply(null, arguments); }
+var SvgCheckCircleStroke = function SvgCheckCircleStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
+    fill: "none",
+    stroke: "currentColor"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M4 9l2.5 2.5 5-5"
+  }), /*#__PURE__*/React__namespace.createElement("circle", {
+    cx: 7.5,
+    cy: 8.5,
+    r: 7
+  }))));
+};
+
+var _path$1, _circle$1;
+function _extends$2() { return _extends$2 = 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$2.apply(null, arguments); }
+var SvgAlertWarningStroke = function SvgAlertWarningStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    d: "M.88 13.77L7.06 1.86c.19-.36.7-.36.89 0l6.18 11.91c.17.33-.07.73-.44.73H1.32c-.37 0-.61-.4-.44-.73zM7.5 6v3.5"
+  })), _circle$1 || (_circle$1 = /*#__PURE__*/React__namespace.createElement("circle", {
+    cx: 7.5,
+    cy: 12,
+    r: 1,
+    fill: "currentColor"
+  })));
+};
+
+var _g, _circle;
+function _extends$1() { return _extends$1 = 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$1.apply(null, arguments); }
+var SvgInfoStroke = function SvgInfoStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true"
+  }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
+    stroke: "currentColor"
+  }, /*#__PURE__*/React__namespace.createElement("circle", {
+    cx: 7.5,
+    cy: 8.5,
+    r: 7,
+    fill: "none"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    strokeLinecap: "round",
+    d: "M7.5 12.5V8"
+  }))), _circle || (_circle = /*#__PURE__*/React__namespace.createElement("circle", {
+    cx: 7.5,
+    cy: 5,
+    r: 1,
+    fill: "currentColor"
+  })));
+};
+
+const validationIcons = {
+  success: SvgCheckCircleStroke,
+  error: SvgAlertErrorStroke,
+  warning: SvgAlertWarningStroke,
+  info: SvgInfoStroke
+};
+const validationTypes = {
+  success: 'success',
+  error: 'error',
+  warning: 'warning',
+  info: 'info'
+};
+
+const COMPONENT_ID$d = 'notifications.close';
+const colorStyles$a = _ref => {
+  let {
+    theme,
+    $type
+  } = _ref;
+  let variable;
+  switch ($type) {
+    case validationTypes.warning:
+      variable = 'foreground.warning';
+      break;
+    case validationTypes.error:
+      variable = 'foreground.danger';
+      break;
+    case validationTypes.success:
+      variable = 'foreground.success';
+      break;
+    default:
+      variable = 'foreground.subtle';
+      break;
+  }
+  const color = reactTheming.getColor({
+    variable,
+    theme
+  });
+  const hoverColor = reactTheming.getColor({
+    variable,
+    light: {
+      offset: 100
+    },
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const activeColor = reactTheming.getColor({
+    variable,
+    light: {
+      offset: 200
+    },
+    dark: {
+      offset: -200
+    },
+    theme
+  });
+  return styled.css(["color:", ";&:hover{background-color:transparent;color:", ";}&:active{background-color:transparent;color:", ";}"], color, hoverColor, activeColor);
+};
+const StyledClose = styled__default.default(reactButtons.IconButton).attrs({
+  'data-garden-id': COMPONENT_ID$d,
+  'data-garden-version': '9.0.0-next.21'
 }).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({
-  theme: props.theme,
-  inset: true
-}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
+})(["position:absolute;top:", "px;right:", ";left:", ";", " ", ";"], props => props.theme.space.base, p => !p.theme.rtl && `${p.theme.space.base}px`, p => p.theme.rtl && `${p.theme.space.base}px`, colorStyles$a, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
 StyledClose.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$a = 'notifications.paragraph';
+const COMPONENT_ID$c = 'notifications.paragraph';
 const StyledParagraph = styled__default.default.p.attrs({
-  'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$c,
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-12tmd6p-0"
-})(["margin:", "px 0 0;", ";"], props => props.theme.space.base * 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
+})(["margin:", "px 0 0;", ";"], props => props.theme.space.base * 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
 StyledParagraph.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$9 = 'notifications.title';
+const COMPONENT_ID$b = 'notifications.title';
 const StyledTitle = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$b,
+  'data-garden-version': '9.0.0-next.21'
 }).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:", ";", ";"], p => reactTheming.getColor({
+  variable: 'foreground.default',
+  theme: p.theme
+}), props => props.$isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
 StyledTitle.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const boxShadow = props => {
-  const {
-    theme
-  } = props;
+const COMPONENT_ID$a = 'notifications.base_container';
+const colorStyles$9 = _ref => {
+  let {
+    theme,
+    $type,
+    $isFloating
+  } = _ref;
   const {
     space,
     shadows
   } = theme;
-  const offsetY = `${space.base * 5}px`;
-  const blurRadius = `${space.base * 7}px`;
-  const color = reactTheming.getColor('chromeHue', 600, theme, 0.15);
-  return shadows.lg(offsetY, blurRadius, color);
-};
-const colorStyles$6 = props => {
-  let backgroundColor;
-  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);
+  let bgVariable;
+  let borderVariable;
+  let fgVariable;
+  if (!$isFloating && $type && !!validationTypes[$type]) {
+    switch ($type) {
+      case validationTypes.success:
+        bgVariable = 'background.success';
+        borderVariable = 'border.success';
+        fgVariable = 'foreground.success';
+        break;
+      case validationTypes.error:
+        bgVariable = 'background.danger';
+        borderVariable = 'border.danger';
+        fgVariable = 'foreground.danger';
+        break;
+      case validationTypes.warning:
+        bgVariable = 'background.warning';
+        borderVariable = 'border.warning';
+        fgVariable = 'foreground.warning';
+        break;
+      case validationTypes.info:
+        bgVariable = 'background.subtle';
+        borderVariable = 'border.default';
+        fgVariable = 'foreground.subtle';
+        break;
+    }
   } else {
-    backgroundColor = props.theme.colors.background;
-    borderColor = reactTheming.getColor('neutralHue', 300, props.theme);
-    foregroundColor = reactTheming.getColor('neutralHue', 800, props.theme);
+    bgVariable = 'background.raised';
+    borderVariable = 'border.default';
+    fgVariable = 'foreground.default';
   }
-  return styled.css(["border-color:", ";background-color:", ";color:", ";"], borderColor, backgroundColor, foregroundColor);
+  const backgroundColor = reactTheming.getColor({
+    variable: bgVariable,
+    theme
+  });
+  const borderColor = reactTheming.getColor({
+    variable: borderVariable,
+    theme
+  });
+  const foregroundColor = reactTheming.getColor({
+    variable: fgVariable,
+    theme
+  });
+  const offsetY = `${space.base * 5}px`;
+  const blurRadius = `${space.base * 7}px`;
+  const boxShadow = $isFloating ? shadows.lg(offsetY, blurRadius, reactTheming.getColor({
+    variable: 'shadow.large',
+    theme
+  })) : undefined;
+  return styled.css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";"], borderColor, boxShadow, backgroundColor, foregroundColor);
 };
 const padding = props => {
   const {
@@ -132,149 +312,306 @@ const padding = props => {
   const paddingHorizontal = `${space.base * 10}px`;
   return `${paddingVertical} ${paddingHorizontal}`;
 };
-const StyledBase = styled__default.default.div.withConfig({
+const StyledBase = styled__default.default.div.attrs({
+  'data-garden-id': COMPONENT_ID$a,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
   displayName: "StyledBase",
   componentId: "sc-14syaqw-0"
-})(["position:relative;border:", ";border-radius:", ";box-shadow:", ";padding:", ";line-height:", ";font-size:", ";direction:", ";", ";"], props => props.theme.borders.sm, props => props.theme.borderRadii.md, props => props.isFloating && boxShadow, padding, props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', colorStyles$6);
+})(["position:relative;border:", ";border-radius:", ";padding:", ";line-height:", ";font-size:", ";direction:", ";", ";", ""], props => props.theme.borders.sm, props => props.theme.borderRadii.md, padding, props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', colorStyles$9, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
 StyledBase.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$8 = 'notifications.alert';
-const colorStyles$5 = props => styled.css(["", "{color:", ";}"], StyledTitle, props.hue && reactTheming.getColor(props.hue, 800, props.theme));
+const COMPONENT_ID$9 = 'notifications.alert';
+const colorStyles$8 = 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 ? reactTheming.getColor({
+    variable,
+    theme
+  }) : undefined;
+  return styled.css(["", "{color:", ";}"], StyledTitle, color);
+};
 const StyledAlert = styled__default.default(StyledBase).attrs({
-  'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$9,
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledAlert",
   componentId: "sc-fyn8jp-0"
-})(["", " ", ";"], colorStyles$5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
+})(["", " ", ";"], colorStyles$8, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledAlert.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$7 = 'notifications.notification';
-const colorStyles$4 = props => {
+const COMPONENT_ID$8 = 'notifications.notification';
+const colorStyles$7 = props => {
   const {
-    type,
+    $type,
     theme
   } = props;
-  const {
-    colors
-  } = theme;
-  const {
-    successHue,
-    dangerHue,
-    warningHue,
-    foreground
-  } = colors;
-  let color;
-  switch (type) {
-    case 'success':
-      color = reactTheming.getColor(successHue, 600, theme);
-      break;
-    case 'error':
-      color = reactTheming.getColor(dangerHue, 600, theme);
+  let variable;
+  switch ($type) {
+    case validationTypes.success:
+      variable = 'foreground.success';
       break;
-    case 'warning':
-      color = reactTheming.getColor(warningHue, 700, theme);
+    case validationTypes.error:
+      variable = 'foreground.danger';
       break;
-    case 'info':
-      color = foreground;
+    case validationTypes.warning:
+      variable = 'foreground.warning';
       break;
-    default:
-      color = 'inherit';
+    case validationTypes.info:
+      variable = 'foreground.default';
       break;
   }
+  const color = variable ? reactTheming.getColor({
+    variable,
+    theme
+  }) : 'inherit';
   return styled.css(["", "{color:", ";}"], StyledTitle, color);
 };
 const StyledNotification = styled__default.default(StyledBase).attrs({
-  'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledNotification",
   componentId: "sc-uf6jh-0"
-})(["", " ", ";"], colorStyles$4, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
+})(["", " ", ";"], colorStyles$7, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledNotification.propTypes = {
-  type: PropTypes__default.default.oneOf(TYPE)
+  $type: PropTypes__default.default.oneOf(TYPE)
 };
 StyledNotification.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$6 = 'notifications.well';
+const COMPONENT_ID$7 = 'notifications.well';
+const colorStyles$6 = _ref => {
+  let {
+    theme,
+    $isFloating,
+    $isRecessed
+  } = _ref;
+  let backgroundVariable;
+  if ($isRecessed) {
+    backgroundVariable = 'background.recessed';
+  } else if ($isFloating) {
+    backgroundVariable = 'background.raised';
+  } else {
+    backgroundVariable = 'background.default';
+  }
+  const foreground = reactTheming.getColor({
+    variable: 'foreground.subtle',
+    theme
+  });
+  const background = reactTheming.getColor({
+    variable: backgroundVariable,
+    theme
+  });
+  return styled.css(["background-color:", ";color:", ";"], background, foreground);
+};
 const StyledWell = styled__default.default(StyledBase).attrs({
-  'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-id': COMPONENT_ID$7,
+  'data-garden-version': '9.0.0-next.21'
 }).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));
+})(["", " ", ";"], colorStyles$6, p => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, p));
 StyledWell.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const StyledIcon = styled__default.default(_ref => {
+const COMPONENT_ID$6 = 'notifications.icon';
+const sizeStyles$4 = _ref => {
   let {
-    children,
-    ...props
+    theme: {
+      rtl,
+      space
+    }
   } = _ref;
-  return React__namespace.default.cloneElement(React.Children.only(children), props);
+  return styled.css(["right:", ";left:", ";margin-top:", "px;"], rtl && `${space.base * 4}px`, !rtl && `${space.base * 4}px`, space.base / 2);
+};
+const colorStyles$5 = _ref2 => {
+  let {
+    theme,
+    $type
+  } = _ref2;
+  let variable;
+  switch ($type) {
+    case validationTypes.success:
+      variable = 'foreground.success';
+      break;
+    case validationTypes.error:
+      variable = 'foreground.danger';
+      break;
+    case validationTypes.warning:
+      variable = 'foreground.warning';
+      break;
+    case validationTypes.info:
+      variable = 'foreground.subtle';
+      break;
+    default:
+      variable = 'foreground.default';
+      break;
+  }
+  const color = reactTheming.getColor({
+    variable,
+    theme
+  });
+  return styled.css(["color:", ";"], color);
+};
+const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '9.0.0-next.21'
 }).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;", " ", " ", ""], sizeStyles$4, colorStyles$5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$5 = 'notifications.global-alert';
-const colorStyles$3 = props => {
+const COMPONENT_ID$5 = 'notifications.global_alert';
+const colorStyles$4 = _ref => {
+  let {
+    theme,
+    $alertType
+  } = _ref;
   let borderColor;
   let backgroundColor;
   let foregroundColor;
   let anchorHoverColor;
   let anchorActiveColor;
-  let focusColor;
-  switch (props.alertType) {
+  let focusVariable;
+  switch ($alertType) {
     case 'success':
-      borderColor = reactTheming.getColor('successHue', 700, props.theme);
-      backgroundColor = reactTheming.getColor('successHue', 600, props.theme);
-      foregroundColor = reactTheming.getColor('successHue', 100, props.theme);
-      anchorHoverColor = props.theme.palette.white;
-      anchorActiveColor = props.theme.palette.white;
-      focusColor = 'successHue';
-      break;
+      {
+        borderColor = reactTheming.getColor({
+          variable: 'border.successEmphasis',
+          offset: 100,
+          theme
+        });
+        backgroundColor = reactTheming.getColor({
+          variable: 'background.successEmphasis',
+          theme
+        });
+        foregroundColor = reactTheming.getColor({
+          variable: 'foreground.success',
+          offset: -600,
+          theme
+        });
+        anchorHoverColor = theme.palette.white;
+        anchorActiveColor = theme.palette.white;
+        focusVariable = 'foreground.successEmphasis';
+        break;
+      }
     case 'error':
-      borderColor = reactTheming.getColor('dangerHue', 700, props.theme);
-      backgroundColor = reactTheming.getColor('dangerHue', 600, props.theme);
-      foregroundColor = reactTheming.getColor('dangerHue', 100, props.theme);
-      anchorHoverColor = props.theme.palette.white;
-      anchorActiveColor = props.theme.palette.white;
-      focusColor = 'dangerHue';
-      break;
+      {
+        borderColor = reactTheming.getColor({
+          variable: 'border.dangerEmphasis',
+          offset: 100,
+          theme
+        });
+        backgroundColor = reactTheming.getColor({
+          variable: 'background.dangerEmphasis',
+          theme
+        });
+        foregroundColor = reactTheming.getColor({
+          variable: 'foreground.danger',
+          offset: -600,
+          theme
+        });
+        anchorActiveColor = theme.palette.white;
+        anchorHoverColor = theme.palette.white;
+        focusVariable = 'foreground.dangerEmphasis';
+        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);
-      focusColor = 'warningHue';
-      break;
+      {
+        borderColor = reactTheming.getColor({
+          variable: 'border.warningEmphasis',
+          offset: -300,
+          theme
+        });
+        backgroundColor = reactTheming.getColor({
+          variable: 'background.warningEmphasis',
+          offset: -400,
+          theme
+        });
+        const fgVariable = 'foreground.warning';
+        foregroundColor = reactTheming.getColor({
+          variable: fgVariable,
+          offset: 100,
+          theme
+        });
+        anchorHoverColor = reactTheming.getColor({
+          variable: fgVariable,
+          offset: 200,
+          theme
+        });
+        anchorActiveColor = reactTheming.getColor({
+          variable: fgVariable,
+          offset: 300,
+          theme
+        });
+        focusVariable = fgVariable;
+        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);
-      focusColor = 'primaryHue';
-      break;
+      {
+        borderColor = reactTheming.getColor({
+          variable: 'border.primaryEmphasis',
+          offset: -300,
+          theme
+        });
+        backgroundColor = reactTheming.getColor({
+          variable: 'background.primaryEmphasis',
+          offset: -400,
+          theme
+        });
+        const fgVariable = 'foreground.primary';
+        foregroundColor = reactTheming.getColor({
+          variable: fgVariable,
+          offset: 100,
+          theme
+        });
+        anchorHoverColor = reactTheming.getColor({
+          variable: fgVariable,
+          offset: 200,
+          theme
+        });
+        anchorActiveColor = reactTheming.getColor({
+          variable: fgVariable,
+          offset: 300,
+          theme
+        });
+        focusVariable = fgVariable;
+        break;
+      }
   }
-  const boxShadow = `0 ${props.theme.borderWidths.sm} ${props.theme.borderWidths.sm} ${borderColor}`;
+  const boxShadow = `0 ${theme.borderWidths.sm} ${theme.borderWidths.sm} ${borderColor}`;
   return 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,
+    theme,
+    color: {
+      variable: focusVariable
+    },
     styles: {
       color: 'inherit'
     }
@@ -292,56 +629,88 @@ const sizeStyles$3 = props => {
 };
 const StyledGlobalAlert = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledGlobalAlert",
   componentId: "sc-k6rimt-0"
-})(["display:flex;flex-wrap:nowrap;overflow:auto;overflow-x:hidden;box-sizing:border-box;direction:", ";", " ", " && a{border-radius:", ";text-decoration:underline;}", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', sizeStyles$3, colorStyles$3, props => props.theme.borderRadii.sm, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
+})(["display:flex;flex-wrap:nowrap;overflow:auto;overflow-x:hidden;box-sizing:border-box;direction:", ";", " ", " && a{border-radius:", ";text-decoration:underline;}", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', sizeStyles$3, colorStyles$4, props => props.theme.borderRadii.sm, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledGlobalAlert.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$4 = 'notifications.global-alert.close';
-const colorStyles$2 = props => {
+const COMPONENT_ID$4 = 'notifications.global_alert.close';
+const colorStyles$3 = props => {
+  const {
+    $alertType,
+    theme
+  } = props;
   let hoverBackgroundColor;
   let hoverForegroundColor;
   let activeBackgroundColor;
   let activeForegroundColor;
-  let focusColor;
-  switch (props.alertType) {
+  let focusVariable;
+  switch ($alertType) {
     case 'success':
-      hoverBackgroundColor = reactTheming.getColor('successHue', 100, props.theme, 0.08);
-      hoverForegroundColor = props.theme.palette.white;
-      activeBackgroundColor = reactTheming.getColor('successHue', 100, props.theme, 0.2);
-      activeForegroundColor = props.theme.palette.white;
-      focusColor = 'successHue';
+      hoverBackgroundColor = reactTheming.getColor({
+        variable: 'background.success',
+        theme,
+        transparency: theme.opacity[100]
+      });
+      hoverForegroundColor = theme.palette.white;
+      activeBackgroundColor = reactTheming.getColor({
+        variable: 'background.success',
+        theme,
+        transparency: theme.opacity[200]
+      });
+      activeForegroundColor = theme.palette.white;
+      focusVariable = 'foreground.successEmphasis';
       break;
     case 'error':
-      hoverBackgroundColor = reactTheming.getColor('dangerHue', 100, props.theme, 0.08);
-      hoverForegroundColor = props.theme.palette.white;
-      activeBackgroundColor = reactTheming.getColor('dangerHue', 100, props.theme, 0.2);
-      activeForegroundColor = props.theme.palette.white;
-      focusColor = 'dangerHue';
+      hoverBackgroundColor = reactTheming.getColor({
+        variable: 'background.danger',
+        theme,
+        transparency: theme.opacity[100]
+      });
+      hoverForegroundColor = theme.palette.white;
+      activeBackgroundColor = reactTheming.getColor({
+        variable: 'background.danger',
+        theme,
+        transparency: theme.opacity[200]
+      });
+      activeForegroundColor = theme.palette.white;
+      focusVariable = 'foreground.dangerEmphasis';
       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);
-      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);
-      focusColor = 'primaryHue';
+      hoverBackgroundColor = reactTheming.getColor({
+        variable: 'background.warningEmphasis',
+        transparency: theme.opacity[100],
+        theme
+      });
+      hoverForegroundColor = reactTheming.getColor({
+        variable: 'foreground.warningEmphasis',
+        offset: 200,
+        theme
+      });
+      activeBackgroundColor = reactTheming.getColor({
+        variable: 'background.warningEmphasis',
+        transparency: theme.opacity[200],
+        theme
+      });
+      activeForegroundColor = reactTheming.getColor({
+        variable: 'foreground.warningEmphasis',
+        offset: 300,
+        theme
+      });
+      focusVariable = 'foreground.warning';
       break;
+    default:
+      focusVariable = 'foreground.primary';
   }
   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
+    theme,
+    color: {
+      variable: focusVariable
+    }
   }), activeBackgroundColor, activeForegroundColor);
 };
 const sizeStyles$2 = props => {
@@ -352,52 +721,103 @@ 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.2',
-  size: 'small'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledGlobalAlertClose",
   componentId: "sc-1g5s93s-0"
-})(["", ";", ";", ";"], sizeStyles$2, colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
+})(["", ";", ";", ";"], sizeStyles$2, colorStyles$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledGlobalAlertClose.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$3 = 'notifications.global-alert.button';
-function colorStyles$1(props) {
-  if (props.isBasic) {
-    return colorStyles$2(props);
+const COMPONENT_ID$3 = 'notifications.global_alert.button';
+function colorStyles$2(props) {
+  const {
+    $alertType,
+    isBasic,
+    theme
+  } = props;
+  if (isBasic) {
+    return colorStyles$3(props);
   }
-  let backgroundColor;
-  let hoverBackgroundColor;
-  let activeBackgroundColor;
-  let focusColor;
-  switch (props.alertType) {
+  let bgVariable;
+  let offsetOptions;
+  let offsetHoverOptions;
+  let offsetActiveOptions;
+  let focusVariable;
+  switch ($alertType) {
     case 'success':
-      backgroundColor = reactTheming.getColor('successHue', 800, props.theme);
-      hoverBackgroundColor = reactTheming.getColor('successHue', 900, props.theme);
-      activeBackgroundColor = reactTheming.getColor('successHue', 1000, props.theme);
-      focusColor = 'successHue';
+      bgVariable = 'background.successEmphasis';
+      offsetOptions = {
+        offset: 200
+      };
+      offsetHoverOptions = {
+        offset: 300
+      };
+      offsetActiveOptions = {
+        offset: 400
+      };
+      focusVariable = 'foreground.successEmphasis';
       break;
     case 'error':
-      backgroundColor = reactTheming.getColor('dangerHue', 800, props.theme);
-      hoverBackgroundColor = reactTheming.getColor('dangerHue', 900, props.theme);
-      activeBackgroundColor = reactTheming.getColor('dangerHue', 1000, props.theme);
-      focusColor = 'dangerHue';
+      bgVariable = 'background.dangerEmphasis';
+      offsetOptions = {
+        offset: 200
+      };
+      offsetHoverOptions = {
+        offset: 300
+      };
+      offsetActiveOptions = {
+        offset: 400
+      };
+      focusVariable = 'foreground.dangerEmphasis';
       break;
     case 'warning':
-      backgroundColor = reactTheming.getColor('warningHue', 800, props.theme);
-      hoverBackgroundColor = reactTheming.getColor('warningHue', 900, props.theme);
-      activeBackgroundColor = reactTheming.getColor('warningHue', 1000, props.theme);
-      focusColor = 'warningHue';
+      bgVariable = 'background.warningEmphasis';
+      offsetOptions = {};
+      offsetHoverOptions = {
+        offset: 100
+      };
+      offsetActiveOptions = {
+        offset: 200
+      };
+      focusVariable = 'foreground.warning';
       break;
     case 'info':
-      focusColor = 'primaryHue';
+      bgVariable = 'background.primaryEmphasis';
+      offsetOptions = {};
+      offsetHoverOptions = {
+        offset: 100
+      };
+      offsetActiveOptions = {
+        offset: 200
+      };
+      focusVariable = 'foreground.primary';
       break;
   }
-  return 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
+  const backgroundColor = reactTheming.getColor({
+    variable: bgVariable,
+    ...offsetOptions,
+    theme
+  });
+  const hoverBackgroundColor = reactTheming.getColor({
+    variable: bgVariable,
+    ...offsetHoverOptions,
+    theme
+  });
+  const activeBackgroundColor = reactTheming.getColor({
+    variable: bgVariable,
+    ...offsetActiveOptions,
+    theme
+  });
+  return styled.css(["background-color:", ";color:", ";&:hover{background-color:", ";}", " &:active{background-color:", ";}"], backgroundColor, reactTheming.getColor({
+    hue: 'white',
+    theme
+  }), hoverBackgroundColor, reactTheming.focusStyles({
+    theme,
+    color: {
+      variable: focusVariable
+    }
   }), activeBackgroundColor);
 }
 function sizeStyles$1(props) {
@@ -407,26 +827,19 @@ 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.2',
-  focusInset: false,
-  isDanger: false,
-  isLink: false,
-  isNeutral: false,
-  isPill: false,
-  isStretched: false,
-  size: 'small'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledGlobalAlertButton",
   componentId: "sc-1txe91a-0"
-})(["flex-shrink:0;", ";", ";", ";"], sizeStyles$1, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["flex-shrink:0;", ";", ";", ";"], sizeStyles$1, colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledGlobalAlertButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$2 = 'notifications.global-alert.content';
+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.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledGlobalAlertContent",
   componentId: "sc-rept0u-0"
@@ -435,269 +848,254 @@ StyledGlobalAlertContent.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID$1 = 'notifications.global-alert.icon';
+const COMPONENT_ID$1 = 'notifications.global_alert.icon';
 const sizeStyles = props => {
   const size = props.theme.iconSizes.md;
   const marginTop = polished.math(`(${props.theme.space.base * 5} - ${size}) / 2`);
   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 => {
+const colorStyles$1 = _ref => {
   let {
-    children,
-    ...props
+    theme,
+    $alertType
   } = _ref;
-  return React__namespace.default.cloneElement(React.Children.only(children), props);
-}).attrs({
+  let color;
+  switch ($alertType) {
+    case 'success':
+      color = reactTheming.getColor({
+        variable: 'foreground.success',
+        offset: -400,
+        theme
+      });
+      break;
+    case 'error':
+      color = reactTheming.getColor({
+        variable: 'foreground.danger',
+        offset: -400,
+        theme
+      });
+      break;
+    case 'warning':
+      color = reactTheming.getColor({
+        variable: 'foreground.warning',
+        theme
+      });
+      break;
+    case 'info':
+      color = reactTheming.getColor({
+        variable: 'foreground.primary',
+        theme
+      });
+      break;
+  }
+  return styled.css(["color:", ";"], color);
+};
+const StyledGlobalAlertIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledGlobalAlertIcon",
   componentId: "sc-84ne9k-0"
-})(["flex-shrink:0;", ";", ";"], sizeStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
+})(["flex-shrink:0;", ";", ";", ";"], sizeStyles, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledGlobalAlertIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const COMPONENT_ID = 'notifications.global-alert.title';
-const colorStyles = props => {
+const COMPONENT_ID = 'notifications.global_alert.title';
+const colorStyles = _ref => {
+  let {
+    theme,
+    $alertType
+  } = _ref;
   let color;
-  switch (props.alertType) {
+  switch ($alertType) {
     case 'success':
     case 'error':
-      color = props.theme.palette.white;
+      color = theme.palette.white;
       break;
     case 'warning':
-      color = reactTheming.getColor('warningHue', 900, props.theme);
+      color = reactTheming.getColor({
+        variable: 'foreground.warningEmphasis',
+        theme
+      });
       break;
     case 'info':
-      color = reactTheming.getColor('primaryHue', 800, props.theme);
+      color = reactTheming.getColor({
+        variable: 'foreground.primary',
+        offset: 200,
+        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.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledGlobalAlertTitle",
   componentId: "sc-10clqbo-0"
-})(["display:inline;margin-", ":", "px;font-weight:", ";", ";", ";"], props => props.theme.rtl ? 'left' : 'right', props => props.theme.space.base * 2, props => props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:inline;margin-", ":", "px;font-weight:", ";", ";", ";"], props => props.theme.rtl ? 'left' : 'right', props => props.theme.space.base * 2, props => props.$isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 StyledGlobalAlertTitle.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-var _g$2, _circle$2;
-function _extends$5() { _extends$5 = 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$5.apply(this, arguments); }
-var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
-    fill: "none",
-    stroke: "currentColor"
-  }, /*#__PURE__*/React__namespace.createElement("circle", {
-    cx: 7.5,
-    cy: 8.5,
-    r: 7
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    strokeLinecap: "round",
-    d: "M7.5 4.5V9"
-  }))), _circle$2 || (_circle$2 = /*#__PURE__*/React__namespace.createElement("circle", {
-    cx: 7.5,
-    cy: 12,
-    r: 1,
-    fill: "currentColor"
-  })));
+const NotificationsContext = React.createContext(undefined);
+const useNotificationsContext = () => {
+  return React.useContext(NotificationsContext);
 };
 
-var _g$1;
-function _extends$4() { _extends$4 = 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$4.apply(this, arguments); }
-var SvgCheckCircleStroke = function SvgCheckCircleStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
-    fill: "none",
-    stroke: "currentColor"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    d: "M4 9l2.5 2.5 5-5"
-  }), /*#__PURE__*/React__namespace.createElement("circle", {
-    cx: 7.5,
-    cy: 8.5,
-    r: 7
-  }))));
-};
+const Title$1 = React__namespace.default.forwardRef((_ref, ref) => {
+  let {
+    isRegular,
+    ...props
+  } = _ref;
+  return React__namespace.default.createElement(StyledTitle, Object.assign({
+    ref: ref,
+    $isRegular: isRegular
+  }, props));
+});
+Title$1.displayName = 'Alert.Title';
 
-var _path$2, _circle$1;
-function _extends$3() { _extends$3 = 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$3.apply(this, arguments); }
-var SvgAlertWarningStroke = function SvgAlertWarningStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    d: "M.88 13.77L7.06 1.86c.19-.36.7-.36.89 0l6.18 11.91c.17.33-.07.73-.44.73H1.32c-.37 0-.61-.4-.44-.73zM7.5 6v3.5"
-  })), _circle$1 || (_circle$1 = /*#__PURE__*/React__namespace.createElement("circle", {
-    cx: 7.5,
-    cy: 12,
-    r: 1,
-    fill: "currentColor"
-  })));
-};
+const Paragraph$1 = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledParagraph, Object.assign({
+  ref: ref
+}, props)));
+Paragraph$1.displayName = 'Alert.Paragraph';
 
-var _g, _circle;
-function _extends$2() { _extends$2 = 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$2.apply(this, arguments); }
-var SvgInfoStroke = function SvgInfoStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+var _path;
+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__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
     "aria-hidden": "true"
-  }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
-    stroke: "currentColor"
-  }, /*#__PURE__*/React__namespace.createElement("circle", {
-    cx: 7.5,
-    cy: 8.5,
-    r: 7,
-    fill: "none"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    stroke: "currentColor",
     strokeLinecap: "round",
-    d: "M7.5 12.5V8"
-  }))), _circle || (_circle = /*#__PURE__*/React__namespace.createElement("circle", {
-    cx: 7.5,
-    cy: 5,
-    r: 1,
-    fill: "currentColor"
+    d: "M3 13L13 3m0 10L3 3"
   })));
 };
 
-const validationIcons = {
-  success: SvgCheckCircleStroke,
-  error: SvgAlertErrorStroke,
-  warning: SvgAlertWarningStroke,
-  info: SvgInfoStroke
-};
-const validationHues = {
-  success: 'successHue',
-  error: 'dangerHue',
-  warning: 'warningHue',
-  info: 'neutralHue'
-};
-
-const NotificationsContext = React.createContext(undefined);
-const useNotificationsContext = () => {
-  return React.useContext(NotificationsContext);
-};
+const Close$1 = React__namespace.default.forwardRef((props, ref) => {
+  const ariaLabel = reactTheming.useText(Close$1, props, 'aria-label', 'Close');
+  const type = useNotificationsContext();
+  return React__namespace.default.createElement(StyledClose, Object.assign({
+    ref: ref,
+    $type: type,
+    "aria-label": ariaLabel
+  }, props, {
+    focusInset: true,
+    size: "small"
+  }), React__namespace.default.createElement(SvgXStroke, null));
+});
+Close$1.displayName = 'Alert.Close';
 
-const Alert = React__namespace.default.forwardRef((_ref, ref) => {
+const AlertComponent = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     role,
+    type,
     ...props
   } = _ref;
-  const hue = validationHues[props.type];
-  const Icon = validationIcons[props.type];
+  const Icon = validationIcons[type];
   return React__namespace.default.createElement(NotificationsContext.Provider, {
-    value: hue
-  }, React__namespace.default.createElement(StyledAlert, _extends$6({
+    value: type
+  }, React__namespace.default.createElement(StyledAlert, Object.assign({
     ref: ref,
-    hue: hue,
+    $type: type,
     role: role === undefined ? 'alert' : role
   }, props), React__namespace.default.createElement(StyledIcon, {
-    hue: hue
+    $type: type
   }, 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$1;
+Alert.Paragraph = Paragraph$1;
+Alert.Title = Title$1;
 
-const Notification = React.forwardRef((_ref, ref) => {
+const Title = React__namespace.default.forwardRef((_ref, ref) => {
   let {
-    role,
+    isRegular,
     ...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({
+  return React__namespace.default.createElement(StyledTitle, Object.assign({
     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);
+    $isRegular: isRegular
+  }, props));
 });
-Notification.displayName = 'Notification';
-Notification.propTypes = {
-  type: PropTypes__default.default.oneOf(TYPE)
-};
+Title.displayName = 'Notification.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
-};
-
-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"
-  })));
-};
+Paragraph.displayName = 'Notification.Paragraph';
 
 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({
+  const type = useNotificationsContext();
+  return React__namespace.default.createElement(StyledClose, Object.assign({
     ref: ref,
-    hue: hue,
+    $type: type,
     "aria-label": ariaLabel
-  }, props), React__namespace.default.createElement(SvgXStroke$1, null));
+  }, props, {
+    focusInset: true,
+    size: "small"
+  }), React__namespace.default.createElement(SvgXStroke, null));
 });
-Close.displayName = 'Close';
+Close.displayName = 'Notification.Close';
 
-const Paragraph = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledParagraph, _extends$6({
-  ref: ref
-}, props)));
-Paragraph.displayName = 'Paragraph';
+const NotificationComponent = React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    type,
+    ...props
+  } = _ref;
+  const Icon = type ? validationIcons[type] : SvgInfoStroke;
+  return React__namespace.default.createElement(StyledNotification, Object.assign({
+    ref: ref,
+    $type: type,
+    $isFloating: true,
+    role: "alert"
+  }, props), type && React__namespace.default.createElement(StyledIcon, {
+    $type: type
+  }, 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({
-  ref: ref
-}, props)));
-Title.displayName = 'Title';
+const WellComponent = React__namespace.default.forwardRef((_ref, ref) => {
+  let {
+    isFloating,
+    isRecessed,
+    ...props
+  } = _ref;
+  return React__namespace.default.createElement(StyledWell, Object.assign({
+    ref: ref,
+    $isFloating: isFloating,
+    $isRecessed: isRecessed
+  }, props));
+});
+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 +1369,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 +1414,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,10 +1448,11 @@ 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
+    $alertType: type
   }, props, {
+    size: "small",
     isPrimary: !isBasic,
     isBasic: isBasic
   }));
@@ -1063,32 +1462,17 @@ GlobalAlertButton.propTypes = {
   isBasic: PropTypes__default.default.bool
 };
 
-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); }
-var SvgXStroke = function SvgXStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true"
-  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    d: "M3 13L13 3m0 10L3 3"
-  })));
-};
-
 const GlobalAlertClose = React.forwardRef((props, ref) => {
   const {
     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, {
+    $alertType: type
+  }, props, {
+    size: "small"
+  }), React__namespace.default.createElement(SvgXStroke, {
     role: "img",
     "aria-label": label
   }));
@@ -1096,18 +1480,23 @@ 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));
 });
 GlobalAlertContent.displayName = 'GlobalAlert.Content';
 
-const GlobalAlertTitle = React.forwardRef((props, ref) => {
+const GlobalAlertTitle = React.forwardRef((_ref, ref) => {
+  let {
+    isRegular,
+    ...props
+  } = _ref;
   const {
     type
   } = useGlobalAlertContext();
-  return React__namespace.default.createElement(StyledGlobalAlertTitle, _extends$6({
-    alertType: type,
+  return React__namespace.default.createElement(StyledGlobalAlertTitle, Object.assign({
+    $alertType: type,
+    $isRegular: isRegular,
     ref: ref
   }, props));
 });
@@ -1121,20 +1510,33 @@ const GlobalAlertComponent = React.forwardRef((_ref, ref) => {
     type,
     ...props
   } = _ref;
-  return React__namespace.default.createElement(GlobalAlertContext.Provider, {
-    value: React.useMemo(() => ({
-      type
-    }), [type])
-  }, React__namespace.default.createElement(StyledGlobalAlert, _extends$6({
-    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));
+  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(styled.ThemeProvider, {
+      theme: theme => ({
+        ...theme,
+        colors: {
+          ...theme.colors,
+          base: 'light'
+        }
+      })
+    }, React__namespace.default.createElement(GlobalAlertContext.Provider, {
+      value: React.useMemo(() => ({
+        type
+      }), [type])
+    }, React__namespace.default.createElement(StyledGlobalAlert, Object.assign({
+      ref: ref,
+      role: "status",
+      $alertType: type
+    }, props), React__namespace.default.createElement(StyledGlobalAlertIcon, {
+      $alertType: type
+    }, icon), props.children)))
+  );
 });
 GlobalAlertComponent.displayName = 'GlobalAlert';
 const GlobalAlert = GlobalAlertComponent;