@zendeskgarden/react-notifications 8.62.1 → 8.62.2

package/dist/index.cjs.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var PropTypes = require('prop-types');
 var styled = require('styled-components');
@@ -18,7 +16,7 @@ var polished = require('polished');
 var reactTransitionGroup = require('react-transition-group');
 var reactUid = require('react-uid');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -34,14 +32,13 @@ function _interopNamespace(e) {
       }
     });
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 function _extends$6() {
   _extends$6 = Object.assign ? Object.assign.bind() : function (target) {
@@ -61,9 +58,9 @@ function _extends$6() {
 const TYPE = ['success', 'warning', 'error', 'info'];
 
 const COMPONENT_ID$b = 'notifications.close';
-const StyledClose = styled__default["default"].button.attrs({
+const StyledClose = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-1mr9nx1-0"
@@ -73,9 +70,9 @@ StyledClose.defaultProps = {
 };
 
 const COMPONENT_ID$a = 'notifications.paragraph';
-const StyledParagraph = styled__default["default"].p.attrs({
+const StyledParagraph = styled__default.default.p.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-12tmd6p-0"
@@ -85,9 +82,9 @@ StyledParagraph.defaultProps = {
 };
 
 const COMPONENT_ID$9 = 'notifications.title';
-const StyledTitle = styled__default["default"].div.attrs({
+const StyledTitle = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledTitle",
   componentId: "sc-xx4jsv-0"
@@ -132,7 +129,7 @@ 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.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);
@@ -142,9 +139,9 @@ StyledBase.defaultProps = {
 
 const COMPONENT_ID$8 = 'notifications.alert';
 const colorStyles$5 = props => styled.css(["", "{color:", ";}"], StyledTitle, props.hue && reactTheming.getColor(props.hue, 800, props.theme));
-const StyledAlert = styled__default["default"](StyledBase).attrs(props => ({
+const StyledAlert = styled__default.default(StyledBase).attrs(props => ({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.62.2',
   role: props.role === undefined ? 'alert' : props.role
 })).withConfig({
   displayName: "StyledAlert",
@@ -189,25 +186,25 @@ const colorStyles$4 = props => {
   }
   return styled.css(["", "{color:", ";}"], StyledTitle, color);
 };
-const StyledNotification = styled__default["default"](StyledBase).attrs(props => ({
+const StyledNotification = styled__default.default(StyledBase).attrs(props => ({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.62.2',
   role: props.role === undefined ? 'status' : props.role
 })).withConfig({
   displayName: "StyledNotification",
   componentId: "sc-uf6jh-0"
 })(["", " ", ";"], colorStyles$4, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, 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 StyledWell = styled__default["default"](StyledBase).attrs({
+const StyledWell = styled__default.default(StyledBase).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledWell",
   componentId: "sc-a5831c-0"
@@ -216,12 +213,12 @@ StyledWell.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const StyledIcon = styled__default["default"](_ref => {
+const StyledIcon = styled__default.default(_ref => {
   let {
     children,
     ...props
   } = _ref;
-  return React__default["default"].cloneElement(React.Children.only(children), props);
+  return React__namespace.default.cloneElement(React.Children.only(children), props);
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-msklws-0"
@@ -285,9 +282,9 @@ const sizeStyles$3 = props => {
   const lineHeight = reactTheming.getLineHeight(space.base * 5, fontSizes.md);
   return styled.css(["padding:", "px;min-height:", "px;line-height:", ";font-size:", ";"], padding, minHeight, lineHeight, fontSizes.md);
 };
-const StyledGlobalAlert = styled__default["default"].div.attrs({
+const StyledGlobalAlert = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledGlobalAlert",
   componentId: "sc-k6rimt-0"
@@ -341,9 +338,9 @@ const sizeStyles$2 = props => {
   const marginEnd = `-${props.theme.space.base * 2}px`;
   return styled.css(["margin:", " ", " ", " ", ";"], marginVertical, props.theme.rtl ? marginStart : marginEnd, marginVertical, props.theme.rtl ? marginEnd : marginStart);
 };
-const StyledGlobalAlertClose = styled__default["default"](reactButtons.IconButton).attrs({
+const StyledGlobalAlertClose = styled__default.default(reactButtons.IconButton).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.62.2',
   size: 'small'
 }).withConfig({
   displayName: "StyledGlobalAlertClose",
@@ -392,9 +389,9 @@ function sizeStyles$1(props) {
   const marginStart = `${props.theme.space.base * 2}px`;
   return styled.css(["margin:", " ", " ", " ", ";"], marginVertical, props.theme.rtl ? marginStart : 0, marginVertical, props.theme.rtl ? 0 : marginStart);
 }
-const StyledGlobalAlertButton = styled__default["default"](reactButtons.Button).attrs({
+const StyledGlobalAlertButton = styled__default.default(reactButtons.Button).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.62.2',
   focusInset: false,
   isDanger: false,
   isLink: false,
@@ -411,9 +408,9 @@ StyledGlobalAlertButton.defaultProps = {
 };
 
 const COMPONENT_ID$2 = 'notifications.global-alert.content';
-const StyledGlobalAlertContent = styled__default["default"].div.attrs({
+const StyledGlobalAlertContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledGlobalAlertContent",
   componentId: "sc-rept0u-0"
@@ -429,15 +426,15 @@ const sizeStyles = props => {
   const marginHorizontal = `${props.theme.space.base * 2}px`;
   return styled.css(["margin-top:", ";margin-", ":", ";width:", ";height:", ";"], marginTop, props.theme.rtl ? 'left' : 'right', marginHorizontal, size, size);
 };
-const StyledGlobalAlertIcon = styled__default["default"](_ref => {
+const StyledGlobalAlertIcon = styled__default.default(_ref => {
   let {
     children,
     ...props
   } = _ref;
-  return React__default["default"].cloneElement(React.Children.only(children), props);
+  return React__namespace.default.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledGlobalAlertIcon",
   componentId: "sc-84ne9k-0"
@@ -463,9 +460,9 @@ const colorStyles = props => {
   }
   return styled.css(["color:", ";"], color);
 };
-const StyledGlobalAlertTitle = styled__default["default"].div.attrs({
+const StyledGlobalAlertTitle = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledGlobalAlertTitle",
   componentId: "sc-10clqbo-0"
@@ -607,46 +604,46 @@ const useNotificationsContext = () => {
   return React.useContext(NotificationsContext);
 };
 
-const Alert = React__default["default"].forwardRef((props, ref) => {
+const Alert = React__namespace.default.forwardRef((props, ref) => {
   const hue = validationHues[props.type];
   const Icon = validationIcons[props.type];
-  return React__default["default"].createElement(NotificationsContext.Provider, {
+  return React__namespace.default.createElement(NotificationsContext.Provider, {
     value: hue
-  }, React__default["default"].createElement(StyledAlert, _extends$6({
+  }, React__namespace.default.createElement(StyledAlert, _extends$6({
     ref: ref,
     hue: hue
-  }, props), React__default["default"].createElement(StyledIcon, {
+  }, props), React__namespace.default.createElement(StyledIcon, {
     hue: hue
-  }, React__default["default"].createElement(Icon, null)), props.children));
+  }, React__namespace.default.createElement(Icon, null)), props.children));
 });
 Alert.displayName = 'Alert';
 Alert.propTypes = {
-  type: PropTypes__default["default"].oneOf(TYPE).isRequired
+  type: PropTypes__default.default.oneOf(TYPE).isRequired
 };
 
-const Notification = React__default["default"].forwardRef((props, ref) => {
+const Notification = React__namespace.default.forwardRef((props, ref) => {
   const Icon = props.type ? validationIcons[props.type] : SvgInfoStroke;
   const hue = props.type && validationHues[props.type];
-  return React__default["default"].createElement(StyledNotification, _extends$6({
+  return React__namespace.default.createElement(StyledNotification, _extends$6({
     ref: ref,
     type: props.type,
     isFloating: true
-  }, props), props.type && React__default["default"].createElement(StyledIcon, {
+  }, props), props.type && React__namespace.default.createElement(StyledIcon, {
     hue: hue
-  }, React__default["default"].createElement(Icon, null)), props.children);
+  }, React__namespace.default.createElement(Icon, null)), props.children);
 });
 Notification.displayName = 'Notification';
 Notification.propTypes = {
-  type: PropTypes__default["default"].oneOf(TYPE)
+  type: PropTypes__default.default.oneOf(TYPE)
 };
 
-const Well = React__default["default"].forwardRef((props, ref) => React__default["default"].createElement(StyledWell, _extends$6({
+const Well = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledWell, _extends$6({
   ref: ref
 }, props)));
 Well.displayName = 'Well';
 Well.propTypes = {
-  isRecessed: PropTypes__default["default"].bool,
-  isFloating: PropTypes__default["default"].bool
+  isRecessed: PropTypes__default.default.bool,
+  isFloating: PropTypes__default.default.bool
 };
 
 var _path$1;
@@ -669,23 +666,23 @@ var SvgXStroke$1 = function SvgXStroke(props) {
   })));
 };
 
-const Close = React__default["default"].forwardRef((props, ref) => {
+const Close = React__namespace.default.forwardRef((props, ref) => {
   const ariaLabel = reactTheming.useText(Close, props, 'aria-label', 'Close');
   const hue = useNotificationsContext();
-  return React__default["default"].createElement(StyledClose, _extends$6({
+  return React__namespace.default.createElement(StyledClose, _extends$6({
     ref: ref,
     hue: hue,
     "aria-label": ariaLabel
-  }, props), React__default["default"].createElement(SvgXStroke$1, null));
+  }, props), React__namespace.default.createElement(SvgXStroke$1, null));
 });
 Close.displayName = 'Close';
 
-const Paragraph = React__default["default"].forwardRef((props, ref) => React__default["default"].createElement(StyledParagraph, _extends$6({
+const Paragraph = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledParagraph, _extends$6({
   ref: ref
 }, props)));
 Paragraph.displayName = 'Paragraph';
 
-const Title = React__default["default"].forwardRef((props, ref) => React__default["default"].createElement(StyledTitle, _extends$6({
+const Title = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledTitle, _extends$6({
   ref: ref
 }, props)));
 Title.displayName = 'Title';
@@ -864,7 +861,7 @@ const Toast = _ref => {
 
 const TRANSITION_CLASS = 'garden-toast-transition';
 const DEFAULT_DURATION = '400ms';
-const StyledFadeInTransition = styled__default["default"].div.withConfig({
+const StyledFadeInTransition = styled__default.default.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, p => p.isHidden ? '0 !important' : 1, p => p.theme.space.base * 2, p => p.isHidden && polished.hideVisually(), TRANSITION_CLASS, props => {
@@ -885,7 +882,7 @@ const placementStyles = props => {
   const bottomLeftStyles = styled.css(["bottom:", ";left:", ";"], verticalDistance, horizontalDistance);
   const bottomStyles = styled.css(["bottom:", ";left:50%;transform:translate(-50%,0);"], verticalDistance);
   const bottomRightStyles = styled.css(["right:", ";bottom:", ";"], horizontalDistance, verticalDistance);
-  switch (props.$placement) {
+  switch (props.toastPlacement) {
     case 'top-start':
       if (props.theme.rtl) {
         return topRightStyles;
@@ -914,11 +911,11 @@ const placementStyles = props => {
       return '';
   }
 };
-const StyledTransitionGroup = styled__default["default"](reactTransitionGroup.TransitionGroup).withConfig({
-  displayName: "styled__StyledTransitionGroup",
+const StyledTransitionContainer = styled__default.default.div.withConfig({
+  displayName: "styled__StyledTransitionContainer",
   componentId: "sc-nq0usb-1"
-})(["position:fixed;z-index:", ";", ";"], props => props.$zIndex, placementStyles);
-StyledTransitionGroup.defaultProps = {
+})(["position:fixed;z-index:", ";", ";"], props => props.toastZIndex, placementStyles);
+StyledTransitionContainer.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
@@ -962,15 +959,15 @@ const ToastSlot = _ref => {
     }
     return index >= limit;
   }, [limit, placement, toasts.length]);
-  return React__default["default"].createElement(StyledTransitionGroup, _extends$6({
+  return React__namespace.default.createElement(StyledTransitionContainer, _extends$6({
     key: placement,
-    $placement: placement,
-    $zIndex: zIndex,
+    toastPlacement: placement,
+    toastZIndex: zIndex,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
-  }, props), toasts.map((toast, index) => {
-    const transitionRef = React__default["default"].createRef();
-    return React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
+  }, props), React__namespace.default.createElement(reactTransitionGroup.TransitionGroup, null, toasts.map((toast, index) => {
+    const transitionRef = React__namespace.default.createRef();
+    return React__namespace.default.createElement(reactTransitionGroup.CSSTransition, {
       key: toast.id,
       timeout: {
         enter: 400,
@@ -979,15 +976,15 @@ const ToastSlot = _ref => {
       unmountOnExit: true,
       classNames: TRANSITION_CLASS,
       nodeRef: transitionRef
-    }, React__default["default"].createElement(StyledFadeInTransition, {
+    }, React__namespace.default.createElement(StyledFadeInTransition, {
       ref: transitionRef,
       placement: placement,
       isHidden: isHidden(index)
-    }, React__default["default"].createElement(Toast, {
+    }, React__namespace.default.createElement(Toast, {
       toast: toast,
       pauseTimers: pauseTimers || isHidden(index)
     })));
-  }));
+  })));
 };
 
 const ToastProvider = _ref => {
@@ -1007,14 +1004,14 @@ const ToastProvider = _ref => {
     if (placement === 'bottom' || placement === 'bottom-start' || placement === 'bottom-end') {
       matchingToasts = matchingToasts.reverse();
     }
-    return React__default["default"].createElement(ToastSlot, _extends$6({
+    return React__namespace.default.createElement(ToastSlot, _extends$6({
       placement: placement,
       toasts: matchingToasts,
       zIndex: zIndex,
       limit: limit
     }, placementProps[placement]));
   }, [limit, state.toasts, zIndex, placementProps]);
-  return React__default["default"].createElement(ToastContext.Provider, {
+  return React__namespace.default.createElement(ToastContext.Provider, {
     value: contextValue
   }, toastsByPlacement('top-start'), toastsByPlacement('top'), toastsByPlacement('top-end'), children, toastsByPlacement('bottom-start'), toastsByPlacement('bottom'), toastsByPlacement('bottom-end'));
 };
@@ -1023,9 +1020,9 @@ ToastProvider.defaultProps = {
   limit: 4
 };
 ToastProvider.propTypes = {
-  limit: PropTypes__default["default"].number,
-  zIndex: PropTypes__default["default"].number,
-  placementProps: PropTypes__default["default"].object
+  limit: PropTypes__default.default.number,
+  zIndex: PropTypes__default.default.number,
+  placementProps: PropTypes__default.default.object
 };
 
 const GlobalAlertContext = React.createContext({
@@ -1041,7 +1038,7 @@ const GlobalAlertButton = React.forwardRef((_ref, ref) => {
   const {
     type
   } = useGlobalAlertContext();
-  return React__default["default"].createElement(StyledGlobalAlertButton, _extends$6({
+  return React__namespace.default.createElement(StyledGlobalAlertButton, _extends$6({
     ref: ref,
     alertType: type
   }, props, {
@@ -1051,7 +1048,7 @@ const GlobalAlertButton = React.forwardRef((_ref, ref) => {
 });
 GlobalAlertButton.displayName = 'GlobalAlert.Button';
 GlobalAlertButton.propTypes = {
-  isBasic: PropTypes__default["default"].bool
+  isBasic: PropTypes__default.default.bool
 };
 
 var _path;
@@ -1079,10 +1076,10 @@ const GlobalAlertClose = React.forwardRef((props, ref) => {
     type
   } = useGlobalAlertContext();
   const label = reactTheming.useText(GlobalAlertClose, props, 'aria-label', 'Close');
-  return React__default["default"].createElement(StyledGlobalAlertClose, _extends$6({
+  return React__namespace.default.createElement(StyledGlobalAlertClose, _extends$6({
     ref: ref,
     alertType: type
-  }, props), React__default["default"].createElement(SvgXStroke, {
+  }, props), React__namespace.default.createElement(SvgXStroke, {
     role: "img",
     "aria-label": label
   }));
@@ -1090,7 +1087,7 @@ const GlobalAlertClose = React.forwardRef((props, ref) => {
 GlobalAlertClose.displayName = 'GlobalAlert.Close';
 
 const GlobalAlertContent = React.forwardRef((props, ref) => {
-  return React__default["default"].createElement(StyledGlobalAlertContent, _extends$6({
+  return React__namespace.default.createElement(StyledGlobalAlertContent, _extends$6({
     ref: ref
   }, props));
 });
@@ -1100,14 +1097,14 @@ const GlobalAlertTitle = React.forwardRef((props, ref) => {
   const {
     type
   } = useGlobalAlertContext();
-  return React__default["default"].createElement(StyledGlobalAlertTitle, _extends$6({
+  return React__namespace.default.createElement(StyledGlobalAlertTitle, _extends$6({
     alertType: type,
     ref: ref
   }, props));
 });
 GlobalAlertTitle.displayName = 'GlobalAlert.Title';
 GlobalAlertTitle.propTypes = {
-  isRegular: PropTypes__default["default"].bool
+  isRegular: PropTypes__default.default.bool
 };
 
 const GlobalAlertComponent = React.forwardRef((_ref, ref) => {
@@ -1115,19 +1112,19 @@ const GlobalAlertComponent = React.forwardRef((_ref, ref) => {
     type,
     ...props
   } = _ref;
-  return React__default["default"].createElement(GlobalAlertContext.Provider, {
+  return React__namespace.default.createElement(GlobalAlertContext.Provider, {
     value: React.useMemo(() => ({
       type
     }), [type])
-  }, React__default["default"].createElement(StyledGlobalAlert, _extends$6({
+  }, React__namespace.default.createElement(StyledGlobalAlert, _extends$6({
     ref: ref,
     role: "status",
     alertType: type
   }, props), {
-    success: React__default["default"].createElement(StyledGlobalAlertIcon, null, React__default["default"].createElement(SvgCheckCircleStroke, null)),
-    error: React__default["default"].createElement(StyledGlobalAlertIcon, null, React__default["default"].createElement(SvgAlertErrorStroke, null)),
-    warning: React__default["default"].createElement(StyledGlobalAlertIcon, null, React__default["default"].createElement(SvgAlertWarningStroke, null)),
-    info: React__default["default"].createElement(StyledGlobalAlertIcon, null, React__default["default"].createElement(SvgInfoStroke, null))
+    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));
 });
 GlobalAlertComponent.displayName = 'GlobalAlert';
@@ -1137,7 +1134,7 @@ GlobalAlert.Close = GlobalAlertClose;
 GlobalAlert.Content = GlobalAlertContent;
 GlobalAlert.Title = GlobalAlertTitle;
 GlobalAlert.propTypes = {
-  type: PropTypes__default["default"].oneOf(TYPE).isRequired
+  type: PropTypes__default.default.oneOf(TYPE).isRequired
 };
 
 exports.Alert = Alert;

package/dist/index.esm.js

@@ -35,7 +35,7 @@ const TYPE = ['success', 'warning', 'error', 'info'];
 const COMPONENT_ID$b = 'notifications.close';
 const StyledClose = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-1mr9nx1-0"
@@ -47,7 +47,7 @@ StyledClose.defaultProps = {
 const COMPONENT_ID$a = 'notifications.paragraph';
 const StyledParagraph = styled.p.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-12tmd6p-0"
@@ -59,7 +59,7 @@ StyledParagraph.defaultProps = {
 const COMPONENT_ID$9 = 'notifications.title';
 const StyledTitle = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledTitle",
   componentId: "sc-xx4jsv-0"
@@ -116,7 +116,7 @@ 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$8,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.62.2',
   role: props.role === undefined ? 'alert' : props.role
 })).withConfig({
   displayName: "StyledAlert",
@@ -163,7 +163,7 @@ const colorStyles$4 = props => {
 };
 const StyledNotification = styled(StyledBase).attrs(props => ({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.62.2',
   role: props.role === undefined ? 'status' : props.role
 })).withConfig({
   displayName: "StyledNotification",
@@ -179,7 +179,7 @@ StyledNotification.defaultProps = {
 const COMPONENT_ID$6 = 'notifications.well';
 const StyledWell = styled(StyledBase).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledWell",
   componentId: "sc-a5831c-0"
@@ -259,7 +259,7 @@ const sizeStyles$3 = props => {
 };
 const StyledGlobalAlert = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledGlobalAlert",
   componentId: "sc-k6rimt-0"
@@ -315,7 +315,7 @@ const sizeStyles$2 = props => {
 };
 const StyledGlobalAlertClose = styled(IconButton).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.62.2',
   size: 'small'
 }).withConfig({
   displayName: "StyledGlobalAlertClose",
@@ -366,7 +366,7 @@ function sizeStyles$1(props) {
 }
 const StyledGlobalAlertButton = styled(Button).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.62.2',
   focusInset: false,
   isDanger: false,
   isLink: false,
@@ -385,7 +385,7 @@ StyledGlobalAlertButton.defaultProps = {
 const COMPONENT_ID$2 = 'notifications.global-alert.content';
 const StyledGlobalAlertContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledGlobalAlertContent",
   componentId: "sc-rept0u-0"
@@ -409,7 +409,7 @@ const StyledGlobalAlertIcon = styled(_ref => {
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledGlobalAlertIcon",
   componentId: "sc-84ne9k-0"
@@ -437,7 +437,7 @@ const colorStyles = props => {
 };
 const StyledGlobalAlertTitle = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.62.2'
 }).withConfig({
   displayName: "StyledGlobalAlertTitle",
   componentId: "sc-10clqbo-0"
@@ -857,7 +857,7 @@ const placementStyles = props => {
   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) {
+  switch (props.toastPlacement) {
     case 'top-start':
       if (props.theme.rtl) {
         return topRightStyles;
@@ -886,11 +886,11 @@ const placementStyles = props => {
       return '';
   }
 };
-const StyledTransitionGroup = styled(TransitionGroup).withConfig({
-  displayName: "styled__StyledTransitionGroup",
+const StyledTransitionContainer = styled.div.withConfig({
+  displayName: "styled__StyledTransitionContainer",
   componentId: "sc-nq0usb-1"
-})(["position:fixed;z-index:", ";", ";"], props => props.$zIndex, placementStyles);
-StyledTransitionGroup.defaultProps = {
+})(["position:fixed;z-index:", ";", ";"], props => props.toastZIndex, placementStyles);
+StyledTransitionContainer.defaultProps = {
   theme: DEFAULT_THEME
 };
 
@@ -934,13 +934,13 @@ const ToastSlot = _ref => {
     }
     return index >= limit;
   }, [limit, placement, toasts.length]);
-  return React__default.createElement(StyledTransitionGroup, _extends$6({
+  return React__default.createElement(StyledTransitionContainer, _extends$6({
     key: placement,
-    $placement: placement,
-    $zIndex: zIndex,
+    toastPlacement: placement,
+    toastZIndex: zIndex,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
-  }, props), toasts.map((toast, index) => {
+  }, props), React__default.createElement(TransitionGroup, null, toasts.map((toast, index) => {
     const transitionRef = React__default.createRef();
     return React__default.createElement(CSSTransition, {
       key: toast.id,
@@ -959,7 +959,7 @@ const ToastSlot = _ref => {
       toast: toast,
       pauseTimers: pauseTimers || isHidden(index)
     })));
-  }));
+  })));
 };
 
 const ToastProvider = _ref => {

package/dist/typings/elements/toaster/styled.d.ts

@@ -5,16 +5,15 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import { DefaultTheme } from 'styled-components';
-import { TransitionGroup } from 'react-transition-group';
 import { Placement } from '../../types';
 export declare const TRANSITION_CLASS = "garden-toast-transition";
 export declare const StyledFadeInTransition: import("styled-components").StyledComponent<"div", DefaultTheme, {
     isHidden: boolean;
     placement: Placement;
 }, never>;
-interface IStyledTransitionGroupProps {
-    $placement: Placement;
-    $zIndex?: number;
+interface IStyledTransitionContainerProps {
+    toastPlacement: Placement;
+    toastZIndex?: number;
 }
-export declare const StyledTransitionGroup: import("styled-components").StyledComponent<typeof TransitionGroup, DefaultTheme, IStyledTransitionGroupProps, never>;
+export declare const StyledTransitionContainer: import("styled-components").StyledComponent<"div", DefaultTheme, IStyledTransitionContainerProps, never>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-notifications",
-  "version": "8.62.1",
+  "version": "8.62.2",
   "description": "Notification and Well components within the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,7 +21,7 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/react-buttons": "^8.62.1",
+    "@zendeskgarden/react-buttons": "^8.62.2",
     "polished": "^4.1.1",
     "prop-types": "^15.5.7",
     "react-transition-group": "^4.4.2",
@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@types/react-transition-group": "4.4.5",
-    "@zendeskgarden/react-theming": "^8.62.1",
+    "@zendeskgarden/react-theming": "^8.62.2",
     "@zendeskgarden/svg-icons": "6.33.0"
   },
   "keywords": [
@@ -48,5 +48,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "e84b3603c69975dc0ef30029364da15fc1e4fc03"
+  "gitHead": "27a7d6c021f3360396af60d51ecbf66e9076a405"
 }