@zendeskgarden/react-notifications 8.59.0 → 8.60.0

package/dist/index.esm.js

@@ -6,16 +6,17 @@
  */
 
 import * as React from 'react';
-import React__default, { Children, createContext, useContext, useCallback, useState, useRef, useEffect, useReducer, useMemo } from 'react';
+import React__default, { Children, createContext, useContext, useCallback, useState, useRef, useEffect, useReducer, useMemo, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css, ThemeContext } from 'styled-components';
-import { getColor, retrieveComponentStyles, DEFAULT_THEME, getLineHeight, useDocument } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles, DEFAULT_THEME, getLineHeight, useDocument, useText } from '@zendeskgarden/react-theming';
+import { IconButton, Button } from '@zendeskgarden/react-buttons';
+import { math, hideVisually } from 'polished';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { uid } from 'react-uid';
-import { hideVisually } from 'polished';
 
-function _extends$5() {
-  _extends$5 = Object.assign ? Object.assign.bind() : function (target) {
+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) {
@@ -26,43 +27,43 @@ function _extends$5() {
     }
     return target;
   };
-  return _extends$5.apply(this, arguments);
+  return _extends$6.apply(this, arguments);
 }
 
 const TYPE = ['success', 'warning', 'error', 'info'];
 
-const COMPONENT_ID$5 = 'notifications.close';
+const COMPONENT_ID$b = 'notifications.close';
 const StyledClose = styled.button.attrs({
-  'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.59.0'
+  'data-garden-id': COMPONENT_ID$b,
+  'data-garden-version': '8.60.0'
 }).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;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;&:hover{color:", ";}&:focus{outline:none;}&[data-garden-focus-visible]{background-color:", ";color:", ";&::-moz-focus-inner{border:0;}}", ";"], props => props.theme.space.base, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base}px`, props => props.theme.space.base * 7, props => props.theme.space.base * 7, props => props.hue ? getColor(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme) : getColor('neutralHue', 600, props.theme), props => props.hue ? getColor(props.hue, 800, props.theme) : getColor('neutralHue', 800, props.theme), props => props.hue ? getColor(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme, 0.15) : getColor('neutralHue', 600, props.theme, 0.15), props => props.hue ? getColor(props.hue, 800, props.theme) : getColor('neutralHue', 800, props.theme), props => retrieveComponentStyles(COMPONENT_ID$5, props));
+})(["display:block;position:absolute;top:", "px;", ":", ";transition:background-color 0.1s ease-in-out,color 0.25s 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;&:hover{color:", ";}&:focus{outline:none;}&[data-garden-focus-visible]{background-color:", ";color:", ";&::-moz-focus-inner{border:0;}}", ";"], props => props.theme.space.base, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base}px`, props => props.theme.space.base * 7, props => props.theme.space.base * 7, props => props.hue ? getColor(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme) : getColor('neutralHue', 600, props.theme), props => props.hue ? getColor(props.hue, 800, props.theme) : getColor('neutralHue', 800, props.theme), props => props.hue ? getColor(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme, 0.15) : getColor('neutralHue', 600, props.theme, 0.15), props => props.hue ? getColor(props.hue, 800, props.theme) : getColor('neutralHue', 800, props.theme), props => retrieveComponentStyles(COMPONENT_ID$b, props));
 StyledClose.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$4 = 'notifications.paragraph';
+const COMPONENT_ID$a = 'notifications.paragraph';
 const StyledParagraph = styled.p.attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.59.0'
+  'data-garden-id': COMPONENT_ID$a,
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-12tmd6p-0"
-})(["margin:", "px 0 0;", ";"], props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID$4, props));
+})(["margin:", "px 0 0;", ";"], props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID$a, props));
 StyledParagraph.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$3 = 'notifications.title';
+const COMPONENT_ID$9 = 'notifications.title';
 const StyledTitle = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.59.0'
+  'data-garden-id': COMPONENT_ID$9,
+  'data-garden-version': '8.60.0'
 }).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 => retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["margin:0;color:", ";font-weight:", ";", ";"], props => props.theme.colors.foreground, props => props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledTitle.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -80,7 +81,7 @@ const boxShadow = props => {
   const color = getColor('chromeHue', 600, theme, 0.15);
   return shadows.lg(offsetY, blurRadius, color);
 };
-const colorStyles$2 = props => {
+const colorStyles$6 = props => {
   let backgroundColor;
   let borderColor;
   let foregroundColor;
@@ -106,27 +107,27 @@ const padding = props => {
 const StyledBase = styled.div.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 => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', colorStyles$2);
+})(["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 => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', colorStyles$6);
 StyledBase.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$2 = 'notifications.alert';
-const colorStyles$1 = props => css(["", "{color:", ";}"], StyledTitle, props.hue && getColor(props.hue, 800, props.theme));
+const COMPONENT_ID$8 = 'notifications.alert';
+const colorStyles$5 = props => css(["", "{color:", ";}"], StyledTitle, props.hue && getColor(props.hue, 800, props.theme));
 const StyledAlert = styled(StyledBase).attrs(props => ({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.59.0',
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '8.60.0',
   role: props.role === undefined ? 'alert' : props.role
 })).withConfig({
   displayName: "StyledAlert",
   componentId: "sc-fyn8jp-0"
-})(["", " ", ";"], colorStyles$1, props => retrieveComponentStyles(COMPONENT_ID$2, props));
+})(["", " ", ";"], colorStyles$5, props => retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledAlert.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID$1 = 'notifications.notification';
-const colorStyles = props => {
+const COMPONENT_ID$7 = 'notifications.notification';
+const colorStyles$4 = props => {
   const {
     type,
     theme
@@ -161,13 +162,13 @@ const colorStyles = props => {
   return css(["", "{color:", ";}"], StyledTitle, color);
 };
 const StyledNotification = styled(StyledBase).attrs(props => ({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.59.0',
+  'data-garden-id': COMPONENT_ID$7,
+  'data-garden-version': '8.60.0',
   role: props.role === undefined ? 'status' : props.role
 })).withConfig({
   displayName: "StyledNotification",
   componentId: "sc-uf6jh-0"
-})(["", " ", ";"], colorStyles, props => retrieveComponentStyles(COMPONENT_ID$1, props));
+})(["", " ", ";"], colorStyles$4, props => retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledNotification.propTypes = {
   type: PropTypes.oneOf(TYPE)
 };
@@ -175,14 +176,14 @@ StyledNotification.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const COMPONENT_ID = 'notifications.well';
+const COMPONENT_ID$6 = 'notifications.well';
 const StyledWell = styled(StyledBase).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.59.0'
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledWell",
   componentId: "sc-a5831c-0"
-})(["background-color:", ";color:", " ", ";"], props => props.isRecessed && getColor('neutralHue', 100, props.theme), props => getColor('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["background-color:", ";color:", " ", ";"], props => props.isRecessed && getColor('neutralHue', 100, props.theme), props => getColor('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledWell.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -201,12 +202,256 @@ StyledIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
 
+const COMPONENT_ID$5 = 'notifications.global-alert';
+const colorStyles$3 = props => {
+  let borderColor;
+  let backgroundColor;
+  let foregroundColor;
+  let anchorHoverColor;
+  let anchorActiveColor;
+  let anchorBoxShadowColor;
+  switch (props.alertType) {
+    case 'success':
+      borderColor = getColor('successHue', 700, props.theme);
+      backgroundColor = getColor('successHue', 600, props.theme);
+      foregroundColor = getColor('successHue', 100, props.theme);
+      anchorHoverColor = props.theme.palette.white;
+      anchorActiveColor = props.theme.palette.white;
+      anchorBoxShadowColor = getColor('successHue', 200, props.theme, 0.35);
+      break;
+    case 'error':
+      borderColor = getColor('dangerHue', 700, props.theme);
+      backgroundColor = getColor('dangerHue', 600, props.theme);
+      foregroundColor = getColor('dangerHue', 100, props.theme);
+      anchorHoverColor = props.theme.palette.white;
+      anchorActiveColor = props.theme.palette.white;
+      anchorBoxShadowColor = getColor('dangerHue', 100, props.theme, 0.35);
+      break;
+    case 'warning':
+      borderColor = getColor('warningHue', 400, props.theme);
+      backgroundColor = getColor('warningHue', 300, props.theme);
+      foregroundColor = getColor('warningHue', 800, props.theme);
+      anchorHoverColor = getColor('warningHue', 900, props.theme);
+      anchorActiveColor = getColor('warningHue', 1000, props.theme);
+      anchorBoxShadowColor = getColor('warningHue', 800, props.theme, 0.35);
+      break;
+    case 'info':
+      borderColor = getColor('primaryHue', 300, props.theme);
+      backgroundColor = getColor('primaryHue', 200, props.theme);
+      foregroundColor = getColor('primaryHue', 700, props.theme);
+      anchorHoverColor = getColor('primaryHue', 800, props.theme);
+      anchorActiveColor = getColor('primaryHue', 900, props.theme);
+      anchorBoxShadowColor = getColor('primaryHue', 700, props.theme, 0.35);
+      break;
+  }
+  const boxShadow = `0 ${props.theme.borderWidths.sm} ${props.theme.borderWidths.sm} ${borderColor}`;
+  return css(["box-shadow:", ";background-color:", ";color:", ";& a{color:inherit;&:focus{color:inherit;}&:hover,[data-garden-focus-visible]{color:", ";}&[data-garden-focus-visible]{box-shadow:", ";}&:active{color:", ";}}"], boxShadow, backgroundColor, foregroundColor, anchorHoverColor, props.theme.shadows.sm(anchorBoxShadowColor), anchorActiveColor);
+};
+const sizeStyles$3 = props => {
+  const {
+    fontSizes,
+    space
+  } = props.theme;
+  const minHeight = space.base * 13;
+  const padding = space.base * 4;
+  const lineHeight = getLineHeight(space.base * 5, fontSizes.md);
+  return css(["padding:", "px;min-height:", "px;line-height:", ";font-size:", ";"], padding, minHeight, lineHeight, fontSizes.md);
+};
+const StyledGlobalAlert = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '8.60.0'
+}).withConfig({
+  displayName: "StyledGlobalAlert",
+  componentId: "sc-k6rimt-0"
+})(["display:flex;flex-wrap:nowrap;overflow:auto;overflow-x:hidden;box-sizing:border-box;&& a{border-radius:", ";text-decoration:underline;&:focus{text-decoration:underline;}}", " ", " ", ";"], props => props.theme.borderRadii.sm, sizeStyles$3, colorStyles$3, props => retrieveComponentStyles(COMPONENT_ID$5, props));
+StyledGlobalAlert.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+const COMPONENT_ID$4 = 'notifications.global-alert.close';
+const colorStyles$2 = props => {
+  let hoverBackgroundColor;
+  let hoverForegroundColor;
+  let activeBackgroundColor;
+  let activeForegroundColor;
+  let boxShadowColor;
+  switch (props.alertType) {
+    case 'success':
+      hoverBackgroundColor = getColor('successHue', 100, props.theme, 0.08);
+      hoverForegroundColor = props.theme.palette.white;
+      activeBackgroundColor = getColor('successHue', 100, props.theme, 0.2);
+      activeForegroundColor = props.theme.palette.white;
+      boxShadowColor = getColor('successHue', 100, props.theme, 0.35);
+      break;
+    case 'error':
+      hoverBackgroundColor = getColor('dangerHue', 100, props.theme, 0.08);
+      hoverForegroundColor = props.theme.palette.white;
+      activeBackgroundColor = getColor('dangerHue', 100, props.theme, 0.2);
+      activeForegroundColor = props.theme.palette.white;
+      boxShadowColor = getColor('dangerHue', 100, props.theme, 0.35);
+      break;
+    case 'warning':
+      hoverBackgroundColor = getColor('warningHue', 800, props.theme, 0.08);
+      hoverForegroundColor = getColor('warningHue', 900, props.theme);
+      activeBackgroundColor = getColor('warningHue', 800, props.theme, 0.2);
+      activeForegroundColor = getColor('warningHue', 1000, props.theme);
+      boxShadowColor = getColor('warningHue', 800, props.theme, 0.35);
+      break;
+    case 'info':
+      hoverBackgroundColor = getColor('primaryHue', 700, props.theme, 0.08);
+      hoverForegroundColor = getColor('primaryHue', 800, props.theme);
+      activeBackgroundColor = getColor('primaryHue', 700, props.theme, 0.2);
+      activeForegroundColor = getColor('primaryHue', 900, props.theme);
+      boxShadowColor = getColor('primaryHue', 700, props.theme, 0.35);
+      break;
+  }
+  return css(["color:inherit;&:hover{background-color:", ";color:", ";}&[data-garden-focus-visible]{box-shadow:", ";}&:active{background-color:", ";color:", ";}"], hoverBackgroundColor, hoverForegroundColor, props.theme.shadows.md(boxShadowColor), activeBackgroundColor, activeForegroundColor);
+};
+const sizeStyles$2 = props => {
+  const marginVertical = `-${props.theme.space.base * 1.5}px`;
+  const marginStart = `${props.theme.space.base * 2}px`;
+  const marginEnd = `-${props.theme.space.base * 2}px`;
+  return css(["margin:", " ", " ", " ", ";"], marginVertical, props.theme.rtl ? marginStart : marginEnd, marginVertical, props.theme.rtl ? marginEnd : marginStart);
+};
+const StyledGlobalAlertClose = styled(IconButton).attrs({
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '8.60.0',
+  size: 'small'
+}).withConfig({
+  displayName: "StyledGlobalAlertClose",
+  componentId: "sc-1g5s93s-0"
+})(["", ";", ";", ";"], sizeStyles$2, colorStyles$2, props => retrieveComponentStyles(COMPONENT_ID$4, props));
+StyledGlobalAlertClose.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+const COMPONENT_ID$3 = 'notifications.global-alert.button';
+function colorStyles$1(props) {
+  if (props.isBasic) {
+    return colorStyles$2(props);
+  }
+  let backgroundColor;
+  let hoverBackgroundColor;
+  let activeBackgroundColor;
+  let boxShadowColor;
+  switch (props.alertType) {
+    case 'success':
+      backgroundColor = getColor('successHue', 800, props.theme);
+      hoverBackgroundColor = getColor('successHue', 900, props.theme);
+      activeBackgroundColor = getColor('successHue', 1000, props.theme);
+      boxShadowColor = getColor('successHue', 200, props.theme, 0.35);
+      break;
+    case 'error':
+      backgroundColor = getColor('dangerHue', 800, props.theme);
+      hoverBackgroundColor = getColor('dangerHue', 900, props.theme);
+      activeBackgroundColor = getColor('dangerHue', 1000, props.theme);
+      boxShadowColor = getColor('dangerHue', 100, props.theme, 0.35);
+      break;
+    case 'warning':
+      backgroundColor = getColor('warningHue', 800, props.theme);
+      hoverBackgroundColor = getColor('warningHue', 900, props.theme);
+      activeBackgroundColor = getColor('warningHue', 1000, props.theme);
+      boxShadowColor = getColor('warningHue', 800, props.theme, 0.35);
+      break;
+    case 'info':
+      boxShadowColor = getColor('primaryHue', 700, props.theme, 0.35);
+      break;
+  }
+  return css(["background-color:", ";&:hover{background-color:", ";}&[data-garden-focus-visible]{box-shadow:", ";}&:active{background-color:", ";}"], backgroundColor, hoverBackgroundColor, boxShadowColor && props.theme.shadows.md(boxShadowColor), activeBackgroundColor);
+}
+function sizeStyles$1(props) {
+  const marginVertical = `-${props.theme.space.base * 1.5}px`;
+  const marginStart = `${props.theme.space.base * 2}px`;
+  return css(["margin:", " ", " ", " ", ";"], marginVertical, props.theme.rtl ? marginStart : 0, marginVertical, props.theme.rtl ? 0 : marginStart);
+}
+const StyledGlobalAlertButton = styled(Button).attrs({
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '8.60.0',
+  focusInset: false,
+  isDanger: false,
+  isLink: false,
+  isNeutral: false,
+  isPill: false,
+  isStretched: false,
+  size: 'small'
+}).withConfig({
+  displayName: "StyledGlobalAlertButton",
+  componentId: "sc-1txe91a-0"
+})(["flex-shrink:0;", ";", ";", ";"], sizeStyles$1, colorStyles$1, props => retrieveComponentStyles(COMPONENT_ID$3, props));
+StyledGlobalAlertButton.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+const COMPONENT_ID$2 = 'notifications.global-alert.content';
+const StyledGlobalAlertContent = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '8.60.0'
+}).withConfig({
+  displayName: "StyledGlobalAlertContent",
+  componentId: "sc-rept0u-0"
+})(["flex-grow:1;", ";"], props => retrieveComponentStyles(COMPONENT_ID$2, props));
+StyledGlobalAlertContent.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+const COMPONENT_ID$1 = 'notifications.global-alert.icon';
+const sizeStyles = props => {
+  const size = props.theme.iconSizes.md;
+  const marginTop = math(`(${props.theme.space.base * 5} - ${size}) / 2`);
+  const marginHorizontal = `${props.theme.space.base * 2}px`;
+  return css(["margin-top:", ";margin-", ":", ";width:", ";height:", ";"], marginTop, props.theme.rtl ? 'left' : 'right', marginHorizontal, size, size);
+};
+const StyledGlobalAlertIcon = styled(_ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  return React__default.cloneElement(Children.only(children), props);
+}).attrs({
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '8.60.0'
+}).withConfig({
+  displayName: "StyledGlobalAlertIcon",
+  componentId: "sc-84ne9k-0"
+})(["flex-shrink:0;", ";", ";"], sizeStyles, props => retrieveComponentStyles(COMPONENT_ID$1, props));
+StyledGlobalAlertIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+const COMPONENT_ID = 'notifications.global-alert.title';
+const colorStyles = props => {
+  let color;
+  switch (props.alertType) {
+    case 'success':
+    case 'error':
+      color = props.theme.palette.white;
+      break;
+    case 'warning':
+      color = getColor('warningHue', 900, props.theme);
+      break;
+    case 'info':
+      color = getColor('primaryHue', 800, props.theme);
+      break;
+  }
+  return css(["color:", ";"], color);
+};
+const StyledGlobalAlertTitle = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.60.0'
+}).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 => retrieveComponentStyles(COMPONENT_ID, props));
+StyledGlobalAlertTitle.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
 var _g$2, _circle$2;
 
-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); }
+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.createElement("svg", _extends$4({
+  return /*#__PURE__*/React.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -234,10 +479,10 @@ var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
 
 var _g$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); }
+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.createElement("svg", _extends$3({
+  return /*#__PURE__*/React.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -259,12 +504,12 @@ var SvgCheckCircleStroke = function SvgCheckCircleStroke(props) {
   }))));
 };
 
-var _path$1, _circle$1;
+var _path$2, _circle$1;
 
-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); }
+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.createElement("svg", _extends$2({
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -272,7 +517,7 @@ var SvgAlertWarningStroke = function SvgAlertWarningStroke(props) {
     viewBox: "0 0 16 16",
     "aria-hidden": "true",
     role: "img"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -287,10 +532,10 @@ var SvgAlertWarningStroke = function SvgAlertWarningStroke(props) {
 
 var _g, _circle;
 
-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); }
+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.createElement("svg", _extends$1({
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -339,7 +584,7 @@ const Alert = React__default.forwardRef((props, ref) => {
   const Icon = validationIcons[props.type];
   return React__default.createElement(NotificationsContext.Provider, {
     value: hue
-  }, React__default.createElement(StyledAlert, _extends$5({
+  }, React__default.createElement(StyledAlert, _extends$6({
     ref: ref,
     hue: hue
   }, props), React__default.createElement(StyledIcon, {
@@ -354,7 +599,7 @@ Alert.propTypes = {
 const Notification = React__default.forwardRef((props, ref) => {
   const Icon = props.type ? validationIcons[props.type] : SvgInfoStroke;
   const hue = props.type && validationHues[props.type];
-  return React__default.createElement(StyledNotification, _extends$5({
+  return React__default.createElement(StyledNotification, _extends$6({
     ref: ref,
     type: props.type,
     isFloating: true
@@ -367,7 +612,7 @@ Notification.propTypes = {
   type: PropTypes.oneOf(TYPE)
 };
 
-const Well = React__default.forwardRef((props, ref) => React__default.createElement(StyledWell, _extends$5({
+const Well = React__default.forwardRef((props, ref) => React__default.createElement(StyledWell, _extends$6({
   ref: ref
 }, props)));
 Well.displayName = 'Well';
@@ -376,12 +621,12 @@ Well.propTypes = {
   isFloating: PropTypes.bool
 };
 
-var _path;
+var _path$1;
 
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends$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 = function SvgXStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+var SvgXStroke$1 = function SvgXStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
@@ -389,7 +634,7 @@ var SvgXStroke = function SvgXStroke(props) {
     viewBox: "0 0 12 12",
     "aria-hidden": "true",
     role: "img"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
     d: "M3 9l6-6m0 6L3 3"
@@ -398,19 +643,19 @@ var SvgXStroke = function SvgXStroke(props) {
 
 const Close = React__default.forwardRef((props, ref) => {
   const hue = useNotificationsContext();
-  return React__default.createElement(StyledClose, _extends$5({
+  return React__default.createElement(StyledClose, _extends$6({
     ref: ref,
     hue: hue
-  }, props), React__default.createElement(SvgXStroke, null));
+  }, props), React__default.createElement(SvgXStroke$1, null));
 });
 Close.displayName = 'Close';
 
-const Paragraph = React__default.forwardRef((props, ref) => React__default.createElement(StyledParagraph, _extends$5({
+const Paragraph = React__default.forwardRef((props, ref) => React__default.createElement(StyledParagraph, _extends$6({
   ref: ref
 }, props)));
 Paragraph.displayName = 'Paragraph';
 
-const Title = React__default.forwardRef((props, ref) => React__default.createElement(StyledTitle, _extends$5({
+const Title = React__default.forwardRef((props, ref) => React__default.createElement(StyledTitle, _extends$6({
   ref: ref
 }, props)));
 Title.displayName = 'Title';
@@ -687,7 +932,7 @@ const ToastSlot = _ref => {
     }
     return index >= limit;
   }, [limit, placement, toasts.length]);
-  return React__default.createElement(StyledTransitionGroup, _extends$5({
+  return React__default.createElement(StyledTransitionGroup, _extends$6({
     key: placement,
     $placement: placement,
     $zIndex: zIndex,
@@ -732,7 +977,7 @@ const ToastProvider = _ref => {
     if (placement === 'bottom' || placement === 'bottom-start' || placement === 'bottom-end') {
       matchingToasts = matchingToasts.reverse();
     }
-    return React__default.createElement(ToastSlot, _extends$5({
+    return React__default.createElement(ToastSlot, _extends$6({
       placement: placement,
       toasts: matchingToasts,
       zIndex: zIndex,
@@ -753,4 +998,116 @@ ToastProvider.propTypes = {
   placementProps: PropTypes.object
 };
 
-export { Alert, Close, Notification, Paragraph, Title, ToastProvider, Well, useToast };
+const GlobalAlertContext = createContext({
+  type: 'info'
+});
+const useGlobalAlertContext = () => useContext(GlobalAlertContext);
+
+const GlobalAlertButton = forwardRef((_ref, ref) => {
+  let {
+    isBasic,
+    ...props
+  } = _ref;
+  const {
+    type
+  } = useGlobalAlertContext();
+  return React__default.createElement(StyledGlobalAlertButton, _extends$6({
+    ref: ref,
+    alertType: type
+  }, props, {
+    isPrimary: !isBasic,
+    isBasic: isBasic
+  }));
+});
+GlobalAlertButton.displayName = 'GlobalAlert.Button';
+GlobalAlertButton.propTypes = {
+  isBasic: PropTypes.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.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true",
+    role: "img"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    d: "M3 13L13 3m0 10L3 3"
+  })));
+};
+
+const GlobalAlertClose = forwardRef((props, ref) => {
+  const {
+    type
+  } = useGlobalAlertContext();
+  const label = useText(GlobalAlertClose, props, 'aria-label', 'Close');
+  return React__default.createElement(StyledGlobalAlertClose, _extends$6({
+    ref: ref,
+    alertType: type
+  }, props), React__default.createElement(SvgXStroke, {
+    role: "img",
+    "aria-label": label
+  }));
+});
+GlobalAlertClose.displayName = 'GlobalAlert.Close';
+
+const GlobalAlertContent = forwardRef((props, ref) => {
+  return React__default.createElement(StyledGlobalAlertContent, _extends$6({
+    ref: ref
+  }, props));
+});
+GlobalAlertContent.displayName = 'GlobalAlert.Content';
+
+const GlobalAlertTitle = forwardRef((props, ref) => {
+  const {
+    type
+  } = useGlobalAlertContext();
+  return React__default.createElement(StyledGlobalAlertTitle, _extends$6({
+    alertType: type,
+    ref: ref
+  }, props));
+});
+GlobalAlertTitle.displayName = 'GlobalAlert.Title';
+GlobalAlertTitle.propTypes = {
+  isRegular: PropTypes.bool
+};
+
+const GlobalAlertComponent = forwardRef((_ref, ref) => {
+  let {
+    type,
+    ...props
+  } = _ref;
+  return React__default.createElement(GlobalAlertContext.Provider, {
+    value: useMemo(() => ({
+      type
+    }), [type])
+  }, React__default.createElement(StyledGlobalAlert, _extends$6({
+    ref: ref,
+    role: "status",
+    alertType: type
+  }, props), {
+    success: React__default.createElement(StyledGlobalAlertIcon, null, React__default.createElement(SvgCheckCircleStroke, null)),
+    error: React__default.createElement(StyledGlobalAlertIcon, null, React__default.createElement(SvgAlertErrorStroke, null)),
+    warning: React__default.createElement(StyledGlobalAlertIcon, null, React__default.createElement(SvgAlertWarningStroke, null)),
+    info: React__default.createElement(StyledGlobalAlertIcon, null, React__default.createElement(SvgInfoStroke, null))
+  }[type], props.children));
+});
+GlobalAlertComponent.displayName = 'GlobalAlert';
+const GlobalAlert = GlobalAlertComponent;
+GlobalAlert.Button = GlobalAlertButton;
+GlobalAlert.Close = GlobalAlertClose;
+GlobalAlert.Content = GlobalAlertContent;
+GlobalAlert.Title = GlobalAlertTitle;
+GlobalAlert.propTypes = {
+  type: PropTypes.oneOf(TYPE).isRequired
+};
+
+export { Alert, Close, GlobalAlert, Notification, Paragraph, Title, ToastProvider, Well, useToast };