@zendeskgarden/react-notifications 8.57.1 → 8.58.0

package/dist/index.esm.js

@@ -14,256 +14,76 @@ import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { uid } from 'react-uid';
 import { hideVisually } from 'polished';
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-
-  return target;
-}
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
 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);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
+const TYPE = ['success', 'warning', 'error', 'info'];
 
-var TYPE = ['success', 'warning', 'error', 'info'];
-
-var COMPONENT_ID$5 = 'notifications.close';
-var StyledClose = styled.button.attrs({
+const COMPONENT_ID$5 = 'notifications.close';
+const StyledClose = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.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;}}", ";"], function (props) {
-  return props.theme.space.base;
-}, function (props) {
-  return props.theme.rtl ? 'left' : 'right';
-}, function (props) {
-  return "".concat(props.theme.space.base, "px");
-}, function (props) {
-  return props.theme.space.base * 7;
-}, function (props) {
-  return props.theme.space.base * 7;
-}, function (props) {
-  return props.hue ? getColor(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme) : getColor('neutralHue', 600, props.theme);
-}, function (props) {
-  return props.hue ? getColor(props.hue, 800, props.theme) : getColor('neutralHue', 800, props.theme);
-}, function (props) {
-  return props.hue ? getColor(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme, 0.15) : getColor('neutralHue', 600, props.theme, 0.15);
-}, function (props) {
-  return props.hue ? getColor(props.hue, 800, props.theme) : getColor('neutralHue', 800, props.theme);
-}, function (props) {
-  return 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$5, props));
 StyledClose.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$4 = 'notifications.paragraph';
-var StyledParagraph = styled.p.attrs({
+const COMPONENT_ID$4 = 'notifications.paragraph';
+const StyledParagraph = styled.p.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-12tmd6p-0"
-})(["margin:", "px 0 0;", ";"], function (props) {
-  return props.theme.space.base * 2;
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$4, props);
-});
+})(["margin:", "px 0 0;", ";"], props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledParagraph.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$3 = 'notifications.title';
-var StyledTitle = styled.div.attrs({
+const COMPONENT_ID$3 = 'notifications.title';
+const StyledTitle = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledTitle",
   componentId: "sc-xx4jsv-0"
-})(["margin:0;color:", ";font-weight:", ";", ";"], function (props) {
-  return props.theme.colors.foreground;
-}, function (props) {
-  return props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold;
-}, function (props) {
-  return 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$3, props));
 StyledTitle.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var boxShadow = function boxShadow(props) {
-  var theme = props.theme;
-  var space = theme.space,
-      shadows = theme.shadows;
-  var offsetY = "".concat(space.base * 5, "px");
-  var blurRadius = "".concat(space.base * 7, "px");
-  var color = getColor('chromeHue', 600, theme, 0.15);
+const boxShadow = props => {
+  const {
+    theme
+  } = props;
+  const {
+    space,
+    shadows
+  } = theme;
+  const offsetY = `${space.base * 5}px`;
+  const blurRadius = `${space.base * 7}px`;
+  const color = getColor('chromeHue', 600, theme, 0.15);
   return shadows.lg(offsetY, blurRadius, color);
 };
-var colorStyles$2 = function colorStyles(props) {
-  var backgroundColor;
-  var borderColor;
-  var foregroundColor;
+const colorStyles$2 = props => {
+  let backgroundColor;
+  let borderColor;
+  let foregroundColor;
   if (props.hue) {
     backgroundColor = getColor(props.hue, 100, props.theme);
     borderColor = getColor(props.hue, 300, props.theme);
@@ -275,62 +95,52 @@ var colorStyles$2 = function colorStyles(props) {
   }
   return css(["border-color:", ";background-color:", ";color:", ";"], borderColor, backgroundColor, foregroundColor);
 };
-var padding = function padding(props) {
-  var space = props.theme.space;
-  var paddingVertical = "".concat(space.base * 5, "px");
-  var paddingHorizontal = "".concat(space.base * 10, "px");
-  return "".concat(paddingVertical, " ").concat(paddingHorizontal);
+const padding = props => {
+  const {
+    space
+  } = props.theme;
+  const paddingVertical = `${space.base * 5}px`;
+  const paddingHorizontal = `${space.base * 10}px`;
+  return `${paddingVertical} ${paddingHorizontal}`;
 };
-var StyledBase = styled.div.withConfig({
+const StyledBase = styled.div.withConfig({
   displayName: "StyledBase",
   componentId: "sc-14syaqw-0"
-})(["position:relative;border:", ";border-radius:", ";box-shadow:", ";padding:", ";line-height:", ";font-size:", ";direction:", ";", ";"], function (props) {
-  return props.theme.borders.sm;
-}, function (props) {
-  return props.theme.borderRadii.md;
-}, function (props) {
-  return props.isFloating && boxShadow;
-}, padding, function (props) {
-  return getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md);
-}, function (props) {
-  return props.theme.fontSizes.md;
-}, function (props) {
-  return 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$2);
 StyledBase.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$2 = 'notifications.alert';
-var colorStyles$1 = function colorStyles(props) {
-  return css(["", "{color:", ";}"], StyledTitle, props.hue && getColor(props.hue, 800, props.theme));
-};
-var StyledAlert = styled(StyledBase).attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$2,
-    'data-garden-version': '8.57.1',
-    role: props.role === undefined ? 'alert' : props.role
-  };
-}).withConfig({
+const COMPONENT_ID$2 = 'notifications.alert';
+const colorStyles$1 = 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.58.0',
+  role: props.role === undefined ? 'alert' : props.role
+})).withConfig({
   displayName: "StyledAlert",
   componentId: "sc-fyn8jp-0"
-})(["", " ", ";"], colorStyles$1, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$2, props);
-});
+})(["", " ", ";"], colorStyles$1, props => retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledAlert.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID$1 = 'notifications.notification';
-var colorStyles = function colorStyles(props) {
-  var type = props.type,
-      theme = props.theme;
-  var colors = theme.colors;
-  var successHue = colors.successHue,
-      dangerHue = colors.dangerHue,
-      warningHue = colors.warningHue,
-      foreground = colors.foreground;
-  var color;
+const COMPONENT_ID$1 = 'notifications.notification';
+const colorStyles = props => {
+  const {
+    type,
+    theme
+  } = props;
+  const {
+    colors
+  } = theme;
+  const {
+    successHue,
+    dangerHue,
+    warningHue,
+    foreground
+  } = colors;
+  let color;
   switch (type) {
     case 'success':
       color = getColor(successHue, 600, theme);
@@ -350,18 +160,14 @@ var colorStyles = function colorStyles(props) {
   }
   return css(["", "{color:", ";}"], StyledTitle, color);
 };
-var StyledNotification = styled(StyledBase).attrs(function (props) {
-  return {
-    'data-garden-id': COMPONENT_ID$1,
-    'data-garden-version': '8.57.1',
-    role: props.role === undefined ? 'status' : props.role
-  };
-}).withConfig({
+const StyledNotification = styled(StyledBase).attrs(props => ({
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '8.58.0',
+  role: props.role === undefined ? 'status' : props.role
+})).withConfig({
   displayName: "StyledNotification",
   componentId: "sc-uf6jh-0"
-})(["", " ", ";"], colorStyles, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$1, props);
-});
+})(["", " ", ";"], colorStyles, props => retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledNotification.propTypes = {
   type: PropTypes.oneOf(TYPE)
 };
@@ -369,41 +175,28 @@ StyledNotification.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var COMPONENT_ID = 'notifications.well';
-var StyledWell = styled(StyledBase).attrs({
+const COMPONENT_ID = 'notifications.well';
+const StyledWell = styled(StyledBase).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.57.1'
+  'data-garden-version': '8.58.0'
 }).withConfig({
   displayName: "StyledWell",
   componentId: "sc-a5831c-0"
-})(["background-color:", ";color:", " ", ";"], function (props) {
-  return props.isRecessed && getColor('neutralHue', 100, props.theme);
-}, function (props) {
-  return getColor('neutralHue', 600, props.theme);
-}, function (props) {
-  return 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, props));
 StyledWell.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var _excluded$2 = ["children"];
-var StyledIcon = styled(function (_ref) {
-  var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$2);
+const StyledIcon = styled(_ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
   return React__default.cloneElement(Children.only(children), props);
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-msklws-0"
-})(["position:absolute;right:", ";left:", ";margin-top:", "px;color:", ";"], function (props) {
-  return props.theme.rtl && "".concat(props.theme.space.base * 4, "px");
-}, function (props) {
-  return !props.theme.rtl && "".concat(props.theme.space.base * 4, "px");
-}, function (props) {
-  return props.theme.space.base / 2;
-}, function (props) {
-  return props.hue && getColor(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme);
-});
+})(["position:absolute;right:", ";left:", ";margin-top:", "px;color:", ";"], props => props.theme.rtl && `${props.theme.space.base * 4}px`, props => !props.theme.rtl && `${props.theme.space.base * 4}px`, props => props.theme.space.base / 2, props => props.hue && getColor(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme));
 StyledIcon.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -419,7 +212,8 @@ var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _g$2 || (_g$2 = /*#__PURE__*/React.createElement("g", {
     fill: "none",
     stroke: "currentColor"
@@ -449,7 +243,8 @@ var SvgCheckCircleStroke = function SvgCheckCircleStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _g$1 || (_g$1 = /*#__PURE__*/React.createElement("g", {
     fill: "none",
     stroke: "currentColor"
@@ -475,7 +270,8 @@ var SvgAlertWarningStroke = function SvgAlertWarningStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "currentColor",
@@ -500,7 +296,8 @@ var SvgInfoStroke = function SvgInfoStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
     stroke: "currentColor"
   }, /*#__PURE__*/React.createElement("circle", {
@@ -519,27 +316,27 @@ var SvgInfoStroke = function SvgInfoStroke(props) {
   })));
 };
 
-var validationIcons = {
+const validationIcons = {
   success: SvgCheckCircleStroke,
   error: SvgAlertErrorStroke,
   warning: SvgAlertWarningStroke,
   info: SvgInfoStroke
 };
-var validationHues = {
+const validationHues = {
   success: 'successHue',
   error: 'dangerHue',
   warning: 'warningHue',
   info: 'neutralHue'
 };
 
-var NotificationsContext = createContext(undefined);
-var useNotificationsContext = function useNotificationsContext() {
+const NotificationsContext = createContext(undefined);
+const useNotificationsContext = () => {
   return useContext(NotificationsContext);
 };
 
-var Alert = React__default.forwardRef(function (props, ref) {
-  var hue = validationHues[props.type];
-  var Icon = validationIcons[props.type];
+const Alert = React__default.forwardRef((props, ref) => {
+  const hue = validationHues[props.type];
+  const Icon = validationIcons[props.type];
   return React__default.createElement(NotificationsContext.Provider, {
     value: hue
   }, React__default.createElement(StyledAlert, _extends$5({
@@ -554,9 +351,9 @@ Alert.propTypes = {
   type: PropTypes.oneOf(TYPE).isRequired
 };
 
-var Notification = React__default.forwardRef(function (props, ref) {
-  var Icon = props.type ? validationIcons[props.type] : SvgInfoStroke;
-  var hue = props.type && validationHues[props.type];
+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({
     ref: ref,
     type: props.type,
@@ -570,11 +367,9 @@ Notification.propTypes = {
   type: PropTypes.oneOf(TYPE)
 };
 
-var Well = React__default.forwardRef(function (props, ref) {
-  return React__default.createElement(StyledWell, _extends$5({
-    ref: ref
-  }, props));
-});
+const Well = React__default.forwardRef((props, ref) => React__default.createElement(StyledWell, _extends$5({
+  ref: ref
+}, props)));
 Well.displayName = 'Well';
 Well.propTypes = {
   isRecessed: PropTypes.bool,
@@ -592,7 +387,8 @@ var SvgXStroke = function SvgXStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    role: "img"
   }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
     stroke: "currentColor",
     strokeLinecap: "round",
@@ -600,8 +396,8 @@ var SvgXStroke = function SvgXStroke(props) {
   })));
 };
 
-var Close = React__default.forwardRef(function (props, ref) {
-  var hue = useNotificationsContext();
+const Close = React__default.forwardRef((props, ref) => {
+  const hue = useNotificationsContext();
   return React__default.createElement(StyledClose, _extends$5({
     ref: ref,
     hue: hue
@@ -609,93 +405,99 @@ var Close = React__default.forwardRef(function (props, ref) {
 });
 Close.displayName = 'Close';
 
-var Paragraph = React__default.forwardRef(function (props, ref) {
-  return React__default.createElement(StyledParagraph, _extends$5({
-    ref: ref
-  }, props));
-});
+const Paragraph = React__default.forwardRef((props, ref) => React__default.createElement(StyledParagraph, _extends$5({
+  ref: ref
+}, props)));
 Paragraph.displayName = 'Paragraph';
 
-var Title = React__default.forwardRef(function (props, ref) {
-  return React__default.createElement(StyledTitle, _extends$5({
-    ref: ref
-  }, props));
-});
+const Title = React__default.forwardRef((props, ref) => React__default.createElement(StyledTitle, _extends$5({
+  ref: ref
+}, props)));
 Title.displayName = 'Title';
 
-var _excluded$1 = ["content"];
-var getInitialState = function getInitialState() {
+const getInitialState = () => {
   return {
     toasts: []
   };
 };
-var toasterReducer = function toasterReducer(state, action) {
+const toasterReducer = (state, action) => {
   switch (action.type) {
     case 'ADD_TOAST':
       {
-        return _objectSpread2(_objectSpread2({}, state), {}, {
-          toasts: [].concat(_toConsumableArray(state.toasts), [action.payload])
-        });
+        return {
+          ...state,
+          toasts: [...state.toasts, action.payload]
+        };
       }
     case 'REMOVE_TOAST':
       {
-        var filteredToasts = state.toasts.filter(function (toast) {
-          return toast.id !== action.payload;
-        });
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        const filteredToasts = state.toasts.filter(toast => toast.id !== action.payload);
+        return {
+          ...state,
           toasts: filteredToasts
-        });
+        };
       }
     case 'UPDATE_TOAST':
       {
-        var updatedToasts = state.toasts.map(function (toast) {
+        const updatedToasts = state.toasts.map(toast => {
           if (toast.id !== action.payload.id) {
             return toast;
           }
-          var updatedToast = toast;
-          var _action$payload$optio = action.payload.options,
-              content = _action$payload$optio.content,
-              newOptions = _objectWithoutProperties(_action$payload$optio, _excluded$1);
+          const updatedToast = toast;
+          const {
+            content,
+            ...newOptions
+          } = action.payload.options;
           if (content) {
             updatedToast.content = content;
           }
-          updatedToast.options = _objectSpread2(_objectSpread2({}, updatedToast.options), newOptions);
+          updatedToast.options = {
+            ...updatedToast.options,
+            ...newOptions
+          };
           return updatedToast;
         });
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        return {
+          ...state,
           toasts: updatedToasts
-        });
+        };
       }
     case 'REMOVE_ALL_TOASTS':
       {
-        return _objectSpread2(_objectSpread2({}, state), {}, {
+        return {
+          ...state,
           toasts: []
-        });
+        };
       }
     default:
       throw new Error('Invalid toaster reducer action');
   }
 };
 
-var ToastContext = createContext(undefined);
+const ToastContext = createContext(undefined);
 
-var DEFAULT_TOAST_OPTIONS = {
+const DEFAULT_TOAST_OPTIONS = {
   autoDismiss: 5000,
   placement: 'top-end'
 };
-var useToast = function useToast() {
-  var context = useContext(ToastContext);
+const useToast = () => {
+  const context = useContext(ToastContext);
   if (context === undefined) {
     throw new Error('useToast() must be used within a "ToastProvider"');
   }
-  var dispatch = context.dispatch,
-      state = context.state;
-  var addToast = useCallback(function (content) {
-    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var mergedOptions = _objectSpread2(_objectSpread2({}, DEFAULT_TOAST_OPTIONS), options);
-    var newToast = {
+  const {
+    dispatch,
+    state
+  } = context;
+  const addToast = useCallback(function (content) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const mergedOptions = {
+      ...DEFAULT_TOAST_OPTIONS,
+      ...options
+    };
+    const newToast = {
       id: mergedOptions.id || uid(content),
-      content: content,
+      content,
       options: mergedOptions
     };
     dispatch({
@@ -704,56 +506,60 @@ var useToast = function useToast() {
     });
     return newToast.id;
   }, [dispatch]);
-  var removeToast = useCallback(function (id) {
+  const removeToast = useCallback(id => {
     dispatch({
       type: 'REMOVE_TOAST',
       payload: id
     });
   }, [dispatch]);
-  var updateToast = useCallback(function (id, options) {
+  const updateToast = useCallback((id, options) => {
     dispatch({
       type: 'UPDATE_TOAST',
       payload: {
-        id: id,
-        options: options
+        id,
+        options
       }
     });
   }, [dispatch]);
-  var removeAllToasts = useCallback(function () {
+  const removeAllToasts = useCallback(() => {
     dispatch({
       type: 'REMOVE_ALL_TOASTS'
     });
   }, [dispatch]);
   return {
-    addToast: addToast,
-    removeToast: removeToast,
-    updateToast: updateToast,
-    removeAllToasts: removeAllToasts,
+    addToast,
+    removeToast,
+    updateToast,
+    removeAllToasts,
     toasts: state.toasts
   };
 };
 
-var Toast = function Toast(_ref) {
-  var toast = _ref.toast,
-      pauseTimers = _ref.pauseTimers;
-  var _useToast = useToast(),
-      removeToast = _useToast.removeToast;
-  var id = toast.id;
-  var autoDismiss = toast.options.autoDismiss;
-  var _useState = useState(NaN),
-      _useState2 = _slicedToArray(_useState, 2),
-      remainingTime = _useState2[0],
-      setRemainingTime = _useState2[1];
-  var startTimeRef = useRef(Date.now());
-  var previousRemainingTimeRef = useRef(remainingTime);
-  useEffect(function () {
+const Toast = _ref => {
+  let {
+    toast,
+    pauseTimers
+  } = _ref;
+  const {
+    removeToast
+  } = useToast();
+  const {
+    id
+  } = toast;
+  const {
+    autoDismiss
+  } = toast.options;
+  const [remainingTime, setRemainingTime] = useState(NaN);
+  const startTimeRef = useRef(Date.now());
+  const previousRemainingTimeRef = useRef(remainingTime);
+  useEffect(() => {
     if (typeof autoDismiss === 'number') {
       setRemainingTime(autoDismiss);
     } else {
       setRemainingTime(NaN);
     }
   }, [autoDismiss]);
-  useEffect(function () {
+  useEffect(() => {
     if (pauseTimers && !isNaN(remainingTime)) {
       previousRemainingTimeRef.current = remainingTime - (Date.now() - startTimeRef.current);
       setRemainingTime(NaN);
@@ -761,38 +567,32 @@ var Toast = function Toast(_ref) {
       setRemainingTime(previousRemainingTimeRef.current);
     }
   }, [pauseTimers, remainingTime]);
-  useEffect(function () {
-    var timeout;
+  useEffect(() => {
+    let timeout;
     if (!isNaN(remainingTime)) {
       startTimeRef.current = Date.now();
-      timeout = setTimeout(function () {
+      timeout = setTimeout(() => {
         removeToast(id);
       }, remainingTime);
     }
-    return function () {
+    return () => {
       clearTimeout(timeout);
     };
   }, [id, pauseTimers, remainingTime, removeToast]);
-  var close = useCallback(function () {
+  const close = useCallback(() => {
     removeToast(toast.id);
   }, [removeToast, toast.id]);
   return toast.content({
-    close: close
+    close
   });
 };
 
-var TRANSITION_CLASS = 'garden-toast-transition';
-var DEFAULT_DURATION = '400ms';
-var StyledFadeInTransition = styled.div.withConfig({
+const TRANSITION_CLASS = 'garden-toast-transition';
+const DEFAULT_DURATION = '400ms';
+const StyledFadeInTransition = styled.div.withConfig({
   displayName: "styled__StyledFadeInTransition",
   componentId: "sc-nq0usb-0"
-})(["transition:opacity ", " ease-in 300ms;opacity:", ";margin-bottom:", "px;", " &.", "-enter{transform:translateY( ", " );opacity:0;max-height:0;}&.", "-enter-active{transform:translateY(0);transition:opacity ", " ease-in,transform ", " cubic-bezier(0.15,0.85,0.35,1.2),max-height ", ";opacity:1;max-height:500px;}&.", "-exit{opacity:1;max-height:500px;}&.", "-exit-active{transition:opacity 550ms ease-out,max-height ", " linear 150ms;opacity:0;max-height:0;}"], DEFAULT_DURATION, function (p) {
-  return p.isHidden ? '0 !important' : 1;
-}, function (p) {
-  return p.theme.space.base * 2;
-}, function (p) {
-  return p.isHidden && hideVisually();
-}, TRANSITION_CLASS, function (props) {
+})(["transition:opacity ", " ease-in 300ms;opacity:", ";margin-bottom:", "px;", " &.", "-enter{transform:translateY( ", " );opacity:0;max-height:0;}&.", "-enter-active{transform:translateY(0);transition:opacity ", " ease-in,transform ", " cubic-bezier(0.15,0.85,0.35,1.2),max-height ", ";opacity:1;max-height:500px;}&.", "-exit{opacity:1;max-height:500px;}&.", "-exit-active{transition:opacity 550ms ease-out,max-height ", " linear 150ms;opacity:0;max-height:0;}"], DEFAULT_DURATION, p => p.isHidden ? '0 !important' : 1, p => p.theme.space.base * 2, p => p.isHidden && hideVisually(), TRANSITION_CLASS, props => {
   if (props.placement === 'bottom-start' || props.placement === 'bottom' || props.placement === 'bottom-end') {
     return '100px';
   }
@@ -801,15 +601,15 @@ var StyledFadeInTransition = styled.div.withConfig({
 StyledFadeInTransition.defaultProps = {
   theme: DEFAULT_THEME
 };
-var placementStyles = function placementStyles(props) {
-  var verticalDistance = "".concat(props.theme.space.base * 16, "px");
-  var horizontalDistance = "".concat(props.theme.space.base * 3, "px");
-  var topLeftStyles = css(["top:", ";left:", ";"], verticalDistance, horizontalDistance);
-  var topStyles = css(["top:", ";left:50%;transform:translate(-50%,0);"], verticalDistance);
-  var topRightStyles = css(["top:", ";right:", ";"], verticalDistance, horizontalDistance);
-  var bottomLeftStyles = css(["bottom:", ";left:", ";"], verticalDistance, horizontalDistance);
-  var bottomStyles = css(["bottom:", ";left:50%;transform:translate(-50%,0);"], verticalDistance);
-  var bottomRightStyles = css(["right:", ";bottom:", ";"], horizontalDistance, verticalDistance);
+const placementStyles = props => {
+  const verticalDistance = `${props.theme.space.base * 16}px`;
+  const horizontalDistance = `${props.theme.space.base * 3}px`;
+  const topLeftStyles = css(["top:", ";left:", ";"], verticalDistance, horizontalDistance);
+  const topStyles = css(["top:", ";left:50%;transform:translate(-50%,0);"], verticalDistance);
+  const topRightStyles = css(["top:", ";right:", ";"], verticalDistance, horizontalDistance);
+  const bottomLeftStyles = css(["bottom:", ";left:", ";"], verticalDistance, horizontalDistance);
+  const bottomStyles = css(["bottom:", ";left:50%;transform:translate(-50%,0);"], verticalDistance);
+  const bottomRightStyles = css(["right:", ";bottom:", ";"], horizontalDistance, verticalDistance);
   switch (props.$placement) {
     case 'top-start':
       if (props.theme.rtl) {
@@ -839,53 +639,49 @@ var placementStyles = function placementStyles(props) {
       return '';
   }
 };
-var StyledTransitionGroup = styled(TransitionGroup).withConfig({
+const StyledTransitionGroup = styled(TransitionGroup).withConfig({
   displayName: "styled__StyledTransitionGroup",
   componentId: "sc-nq0usb-1"
-})(["position:fixed;z-index:", ";", ";"], function (props) {
-  return props.$zIndex;
-}, placementStyles);
+})(["position:fixed;z-index:", ";", ";"], props => props.$zIndex, placementStyles);
 StyledTransitionGroup.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var _excluded = ["toasts", "placement", "zIndex", "limit"];
-var ToastSlot = function ToastSlot(_ref) {
-  var toasts = _ref.toasts,
-      placement = _ref.placement,
-      zIndex = _ref.zIndex,
-      limit = _ref.limit,
-      props = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      pauseTimers = _useState2[0],
-      setPauseTimers = _useState2[1];
-  var theme = useContext(ThemeContext);
-  var environment = useDocument(theme);
-  var handleVisibilityChange = useCallback(function (e) {
+const ToastSlot = _ref => {
+  let {
+    toasts,
+    placement,
+    zIndex,
+    limit,
+    ...props
+  } = _ref;
+  const [pauseTimers, setPauseTimers] = useState(false);
+  const theme = useContext(ThemeContext);
+  const environment = useDocument(theme);
+  const handleVisibilityChange = useCallback(e => {
     if (e.target.visibilityState === 'visible') {
       setPauseTimers(false);
     } else {
       setPauseTimers(true);
     }
   }, []);
-  useEffect(function () {
+  useEffect(() => {
     if (environment) {
       environment.addEventListener('visibilitychange', handleVisibilityChange);
     }
-    return function () {
+    return () => {
       if (environment) {
         environment.removeEventListener('visibilitychange', handleVisibilityChange);
       }
     };
   }, [environment, handleVisibilityChange]);
-  var handleMouseEnter = useCallback(function () {
+  const handleMouseEnter = useCallback(() => {
     setPauseTimers(true);
   }, []);
-  var handleMouseLeave = useCallback(function () {
+  const handleMouseLeave = useCallback(() => {
     setPauseTimers(false);
   }, []);
-  var isHidden = useCallback(function (index) {
+  const isHidden = useCallback(index => {
     if (placement === 'bottom' || placement === 'bottom-start' || placement === 'bottom-end') {
       return index < toasts.length - limit;
     }
@@ -897,8 +693,8 @@ var ToastSlot = function ToastSlot(_ref) {
     $zIndex: zIndex,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
-  }, props), toasts.map(function (toast, index) {
-    var transitionRef = React__default.createRef();
+  }, props), toasts.map((toast, index) => {
+    const transitionRef = React__default.createRef();
     return React__default.createElement(CSSTransition, {
       key: toast.id,
       timeout: {
@@ -919,26 +715,20 @@ var ToastSlot = function ToastSlot(_ref) {
   }));
 };
 
-var ToastProvider = function ToastProvider(_ref) {
-  var limit = _ref.limit,
-      zIndex = _ref.zIndex,
-      _ref$placementProps = _ref.placementProps,
-      placementProps = _ref$placementProps === void 0 ? {} : _ref$placementProps,
-      children = _ref.children;
-  var _useReducer = useReducer(toasterReducer, getInitialState()),
-      _useReducer2 = _slicedToArray(_useReducer, 2),
-      state = _useReducer2[0],
-      dispatch = _useReducer2[1];
-  var contextValue = useMemo(function () {
-    return {
-      state: state,
-      dispatch: dispatch
-    };
-  }, [state, dispatch]);
-  var toastsByPlacement = useCallback(function (placement) {
-    var matchingToasts = state.toasts.filter(function (toast) {
-      return toast.options.placement === placement;
-    });
+const ToastProvider = _ref => {
+  let {
+    limit,
+    zIndex,
+    placementProps = {},
+    children
+  } = _ref;
+  const [state, dispatch] = useReducer(toasterReducer, getInitialState());
+  const contextValue = useMemo(() => ({
+    state,
+    dispatch
+  }), [state, dispatch]);
+  const toastsByPlacement = useCallback(placement => {
+    let matchingToasts = state.toasts.filter(toast => toast.options.placement === placement);
     if (placement === 'bottom' || placement === 'bottom-start' || placement === 'bottom-end') {
       matchingToasts = matchingToasts.reverse();
     }