@zendeskgarden/react-notifications 9.12.2 → 9.12.4

package/dist/esm/elements/Notification.js

@@ -27,12 +27,11 @@ import { Title } from './Title.js';
 import { Paragraph } from './Paragraph.js';
 import { Close } from './Close.js';
 
-const NotificationComponent = forwardRef((_ref, ref) => {
-  let {
-    children,
-    type,
-    ...props
-  } = _ref;
+const NotificationComponent = forwardRef(({
+  children,
+  type,
+  ...props
+}, ref) => {
   const Icon = type ? validationIcons[type] : SvgInfoStroke;
   return React__default.createElement(StyledNotification, Object.assign({
     ref: ref,

package/dist/esm/elements/Title.js

@@ -20,16 +20,13 @@ import '../styled/global-alert/StyledGlobalAlertContent.js';
 import '../styled/global-alert/StyledGlobalAlertIcon.js';
 import '../styled/global-alert/StyledGlobalAlertTitle.js';
 
-const Title = React__default.forwardRef((_ref, ref) => {
-  let {
-    isRegular,
-    ...props
-  } = _ref;
-  return React__default.createElement(StyledTitle, Object.assign({
-    ref: ref,
-    $isRegular: isRegular
-  }, props));
-});
+const Title = React__default.forwardRef(({
+  isRegular,
+  ...props
+}, ref) => React__default.createElement(StyledTitle, Object.assign({
+  ref: ref,
+  $isRegular: isRegular
+}, props)));
 Title.displayName = 'Notification.Title';
 
 export { Title };

package/dist/esm/elements/alert/Alert.js

@@ -27,12 +27,11 @@ import { Title } from './Title.js';
 import { Paragraph } from './Paragraph.js';
 import { Close } from './Close.js';
 
-const AlertComponent = React__default.forwardRef((_ref, ref) => {
-  let {
-    role,
-    type,
-    ...props
-  } = _ref;
+const AlertComponent = React__default.forwardRef(({
+  role,
+  type,
+  ...props
+}, ref) => {
   const Icon = validationIcons[type];
   return React__default.createElement(NotificationsContext.Provider, {
     value: type

package/dist/esm/elements/alert/Close.js

@@ -23,8 +23,8 @@ import { useNotificationsContext } from '../../utils/useNotificationsContext.js'
 import { useText } from '@zendeskgarden/react-theming';
 import SvgXStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js';
 
-const Close = React__default.forwardRef((props, ref) => {
-  const ariaLabel = useText(Close, props, 'aria-label', 'Close');
+const Close$1 = React__default.forwardRef((props, ref) => {
+  const ariaLabel = useText(Close$1, props, 'aria-label', 'Close');
   const type = useNotificationsContext();
   return React__default.createElement(StyledClose, Object.assign({
     ref: ref,
@@ -35,6 +35,6 @@ const Close = React__default.forwardRef((props, ref) => {
     size: "small"
   }), React__default.createElement(SvgXStroke, null));
 });
-Close.displayName = 'Alert.Close';
+Close$1.displayName = 'Alert.Close';
 
-export { Close };
+export { Close$1 as Close };

package/dist/esm/elements/alert/Paragraph.js

@@ -20,9 +20,9 @@ import '../../styled/global-alert/StyledGlobalAlertContent.js';
 import '../../styled/global-alert/StyledGlobalAlertIcon.js';
 import '../../styled/global-alert/StyledGlobalAlertTitle.js';
 
-const Paragraph = React__default.forwardRef((props, ref) => React__default.createElement(StyledParagraph, Object.assign({
+const Paragraph$1 = React__default.forwardRef((props, ref) => React__default.createElement(StyledParagraph, Object.assign({
   ref: ref
 }, props)));
-Paragraph.displayName = 'Alert.Paragraph';
+Paragraph$1.displayName = 'Alert.Paragraph';
 
-export { Paragraph };
+export { Paragraph$1 as Paragraph };

package/dist/esm/elements/alert/Title.js

@@ -20,16 +20,13 @@ import '../../styled/global-alert/StyledGlobalAlertContent.js';
 import '../../styled/global-alert/StyledGlobalAlertIcon.js';
 import '../../styled/global-alert/StyledGlobalAlertTitle.js';
 
-const Title = React__default.forwardRef((_ref, ref) => {
-  let {
-    isRegular,
-    ...props
-  } = _ref;
-  return React__default.createElement(StyledTitle, Object.assign({
-    ref: ref,
-    $isRegular: isRegular
-  }, props));
-});
-Title.displayName = 'Alert.Title';
+const Title$1 = React__default.forwardRef(({
+  isRegular,
+  ...props
+}, ref) => React__default.createElement(StyledTitle, Object.assign({
+  ref: ref,
+  $isRegular: isRegular
+}, props)));
+Title$1.displayName = 'Alert.Title';
 
-export { Title };
+export { Title$1 as Title };

package/dist/esm/elements/global-alert/GlobalAlert.js

@@ -32,11 +32,10 @@ import { GlobalAlertClose } from './GlobalAlertClose.js';
 import { GlobalAlertContent } from './GlobalAlertContent.js';
 import { GlobalAlertTitle } from './GlobalAlertTitle.js';
 
-const GlobalAlertComponent = forwardRef((_ref, ref) => {
-  let {
-    type,
-    ...props
-  } = _ref;
+const GlobalAlertComponent = forwardRef(({
+  type,
+  ...props
+}, ref) => {
   const icon = {
     success: React__default.createElement(SvgCheckCircleStroke, null),
     error: React__default.createElement(SvgAlertErrorStroke, null),

package/dist/esm/elements/global-alert/GlobalAlertButton.js

@@ -22,11 +22,10 @@ import '../../styled/global-alert/StyledGlobalAlertIcon.js';
 import '../../styled/global-alert/StyledGlobalAlertTitle.js';
 import { useGlobalAlertContext } from '../../utils/useGlobalAlertContext.js';
 
-const GlobalAlertButton = forwardRef((_ref, ref) => {
-  let {
-    isBasic,
-    ...props
-  } = _ref;
+const GlobalAlertButton = forwardRef(({
+  isBasic,
+  ...props
+}, ref) => {
   const {
     type
   } = useGlobalAlertContext();

package/dist/esm/elements/global-alert/GlobalAlertTitle.js

@@ -22,11 +22,10 @@ import '../../styled/global-alert/StyledGlobalAlertIcon.js';
 import { StyledGlobalAlertTitle } from '../../styled/global-alert/StyledGlobalAlertTitle.js';
 import { useGlobalAlertContext } from '../../utils/useGlobalAlertContext.js';
 
-const GlobalAlertTitle = forwardRef((_ref, ref) => {
-  let {
-    isRegular,
-    ...props
-  } = _ref;
+const GlobalAlertTitle = forwardRef(({
+  isRegular,
+  ...props
+}, ref) => {
   const {
     type
   } = useGlobalAlertContext();

package/dist/esm/elements/toaster/Toast.js

@@ -7,11 +7,10 @@
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { useToast } from './useToast.js';
 
-const Toast = _ref => {
-  let {
-    toast,
-    pauseTimers
-  } = _ref;
+const Toast = ({
+  toast,
+  pauseTimers
+}) => {
   const {
     removeToast
   } = useToast();

package/dist/esm/elements/toaster/ToastProvider.js

@@ -10,13 +10,12 @@ import { toasterReducer, getInitialState } from './reducer.js';
 import { ToastContext } from './ToastContext.js';
 import { ToastSlot } from './ToastSlot.js';
 
-const ToastProvider = _ref => {
-  let {
-    limit = 4,
-    zIndex,
-    placementProps = {},
-    children
-  } = _ref;
+const ToastProvider = ({
+  limit = 4,
+  zIndex,
+  placementProps = {},
+  children
+}) => {
   const [state, dispatch] = useReducer(toasterReducer, getInitialState());
   const contextValue = useMemo(() => ({
     state,

package/dist/esm/elements/toaster/ToastSlot.js

@@ -11,14 +11,13 @@ import { useDocument } from '@zendeskgarden/react-theming';
 import { Toast } from './Toast.js';
 import { StyledTransitionContainer, TRANSITION_CLASS, StyledFadeInTransition } from './styled.js';
 
-const ToastSlot = _ref => {
-  let {
-    toasts,
-    placement,
-    zIndex,
-    limit,
-    ...props
-  } = _ref;
+const ToastSlot = ({
+  toasts,
+  placement,
+  zIndex,
+  limit,
+  ...props
+}) => {
   const [pauseTimers, setPauseTimers] = useState(false);
   const theme = useContext(ThemeContext);
   const environment = useDocument(theme);

package/dist/esm/elements/toaster/useToast.js

@@ -21,8 +21,7 @@ const useToast = () => {
     dispatch,
     state
   } = context;
-  const addToast = useCallback(function (content) {
-    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const addToast = useCallback((content, options = {}) => {
     const mergedOptions = {
       ...DEFAULT_TOAST_OPTIONS,
       ...options

package/dist/esm/elements/well/Well.js

@@ -23,18 +23,15 @@ import '../../styled/global-alert/StyledGlobalAlertTitle.js';
 import { Title } from '../Title.js';
 import { Paragraph } from '../Paragraph.js';
 
-const WellComponent = React__default.forwardRef((_ref, ref) => {
-  let {
-    isFloating,
-    isRecessed,
-    ...props
-  } = _ref;
-  return React__default.createElement(StyledWell, Object.assign({
-    ref: ref,
-    $isFloating: isFloating,
-    $isRecessed: isRecessed
-  }, props));
-});
+const WellComponent = React__default.forwardRef(({
+  isFloating,
+  isRecessed,
+  ...props
+}, ref) => React__default.createElement(StyledWell, Object.assign({
+  ref: ref,
+  $isFloating: isFloating,
+  $isRecessed: isRecessed
+}, props)));
 WellComponent.displayName = 'Well';
 WellComponent.propTypes = {
   isRecessed: PropTypes.bool,

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg.js

@@ -6,17 +6,17 @@
 */
 import * as React from 'react';
 
-var _g, _circle;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _g$2, _circle$2;
+function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
 var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
     "aria-hidden": "true"
-  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$2 || (_g$2 = /*#__PURE__*/React.createElement("g", {
     fill: "none",
     stroke: "currentColor"
   }, /*#__PURE__*/React.createElement("circle", {
@@ -26,7 +26,7 @@ var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
   }), /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     d: "M7.5 4.5V9"
-  }))), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
+  }))), _circle$2 || (_circle$2 = /*#__PURE__*/React.createElement("circle", {
     cx: 7.5,
     cy: 12,
     r: 1,

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/alert-warning-stroke.svg.js

@@ -6,22 +6,22 @@
 */
 import * as React from 'react';
 
-var _path, _circle;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _path$1, _circle$1;
+function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
 var SvgAlertWarningStroke = function SvgAlertWarningStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
     "aria-hidden": "true"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "currentColor",
     strokeLinecap: "round",
     d: "M.88 13.77L7.06 1.86c.19-.36.7-.36.89 0l6.18 11.91c.17.33-.07.73-.44.73H1.32c-.37 0-.61-.4-.44-.73zM7.5 6v3.5"
-  })), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
+  })), _circle$1 || (_circle$1 = /*#__PURE__*/React.createElement("circle", {
     cx: 7.5,
     cy: 12,
     r: 1,

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/check-circle-stroke.svg.js

@@ -6,17 +6,17 @@
 */
 import * as React from 'react';
 
-var _g;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _g$1;
+function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
 var SvgCheckCircleStroke = function SvgCheckCircleStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
     "aria-hidden": "true"
-  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$1 || (_g$1 = /*#__PURE__*/React.createElement("g", {
     fill: "none",
     stroke: "currentColor"
   }, /*#__PURE__*/React.createElement("path", {

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/info-stroke.svg.js

@@ -7,9 +7,9 @@
 import * as React from 'react';
 
 var _g, _circle;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
 var SvgInfoStroke = function SvgInfoStroke(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,

package/dist/esm/styled/StyledAlert.js

@@ -10,8 +10,8 @@ import { StyledTitle } from './content/StyledTitle.js';
 import { StyledBase } from './StyledBase.js';
 import { validationTypes } from '../utils/icons.js';
 
-const COMPONENT_ID = 'notifications.alert';
-const colorStyles = props => {
+const COMPONENT_ID$9 = 'notifications.alert';
+const colorStyles$8 = props => {
   const {
     $type,
     theme
@@ -38,11 +38,11 @@ const colorStyles = props => {
   return css(["", "{color:", ";}"], StyledTitle, color);
 };
 const StyledAlert = styled(StyledBase).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$9,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledAlert",
   componentId: "sc-fyn8jp-0"
-})(["", " ", ";"], colorStyles, componentStyles);
+})(["", " ", ";"], colorStyles$8, componentStyles);
 
 export { StyledAlert };

package/dist/esm/styled/StyledBase.js

@@ -8,13 +8,12 @@ import styled, { css } from 'styled-components';
 import { getLineHeight, componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { validationTypes } from '../utils/icons.js';
 
-const COMPONENT_ID = 'notifications.base_container';
-const colorStyles = _ref => {
-  let {
-    theme,
-    $type,
-    $isFloating
-  } = _ref;
+const COMPONENT_ID$a = 'notifications.base_container';
+const colorStyles$9 = ({
+  theme,
+  $type,
+  $isFloating
+}) => {
   const {
     space,
     shadows
@@ -79,11 +78,11 @@ const padding = props => {
   return `${paddingVertical} ${paddingHorizontal}`;
 };
 const StyledBase = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$a,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledBase",
   componentId: "sc-14syaqw-0"
-})(["position:relative;border:", ";border-radius:", ";padding:", ";line-height:", ";font-size:", ";direction:", ";", ";", ""], props => props.theme.borders.sm, props => props.theme.borderRadii.md, padding, props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', colorStyles, componentStyles);
+})(["position:relative;border:", ";border-radius:", ";padding:", ";line-height:", ";font-size:", ";direction:", ";", ";", ""], props => props.theme.borders.sm, props => props.theme.borderRadii.md, padding, props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', colorStyles$9, componentStyles);
 
 export { StyledBase };

package/dist/esm/styled/StyledIcon.js

@@ -8,21 +8,19 @@ import styled, { css } from 'styled-components';
 import { StyledBaseIcon, componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { validationTypes } from '../utils/icons.js';
 
-const COMPONENT_ID = 'notifications.icon';
-const sizeStyles = _ref => {
-  let {
-    theme: {
-      rtl,
-      space
-    }
-  } = _ref;
+const COMPONENT_ID$6 = 'notifications.icon';
+const sizeStyles$4 = ({
+  theme: {
+    rtl,
+    space
+  }
+}) => {
   return css(["right:", ";left:", ";margin-top:", "px;"], rtl && `${space.base * 4}px`, !rtl && `${space.base * 4}px`, space.base / 2);
 };
-const colorStyles = _ref2 => {
-  let {
-    theme,
-    $type
-  } = _ref2;
+const colorStyles$5 = ({
+  theme,
+  $type
+}) => {
   let variable;
   switch ($type) {
     case validationTypes.success:
@@ -48,11 +46,11 @@ const colorStyles = _ref2 => {
   return css(["color:", ";"], color);
 };
 const StyledIcon = styled(StyledBaseIcon).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-msklws-0"
-})(["position:absolute;", " ", " ", ""], sizeStyles, colorStyles, componentStyles);
+})(["position:absolute;", " ", " ", ""], sizeStyles$4, colorStyles$5, componentStyles);
 
 export { StyledIcon };

package/dist/esm/styled/StyledNotification.js

@@ -12,8 +12,8 @@ import { StyledTitle } from './content/StyledTitle.js';
 import { StyledBase } from './StyledBase.js';
 import { validationTypes } from '../utils/icons.js';
 
-const COMPONENT_ID = 'notifications.notification';
-const colorStyles = props => {
+const COMPONENT_ID$8 = 'notifications.notification';
+const colorStyles$7 = props => {
   const {
     $type,
     theme
@@ -40,12 +40,12 @@ const colorStyles = props => {
   return css(["", "{color:", ";}"], StyledTitle, color);
 };
 const StyledNotification = styled(StyledBase).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledNotification",
   componentId: "sc-uf6jh-0"
-})(["", " ", ";"], colorStyles, componentStyles);
+})(["", " ", ";"], colorStyles$7, componentStyles);
 StyledNotification.propTypes = {
   $type: PropTypes.oneOf(TYPE)
 };

package/dist/esm/styled/StyledWell.js

@@ -8,13 +8,12 @@ import styled, { css } from 'styled-components';
 import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { StyledBase } from './StyledBase.js';
 
-const COMPONENT_ID = 'notifications.well';
-const colorStyles = _ref => {
-  let {
-    theme,
-    $isFloating,
-    $isRecessed
-  } = _ref;
+const COMPONENT_ID$7 = 'notifications.well';
+const colorStyles$6 = ({
+  theme,
+  $isFloating,
+  $isRecessed
+}) => {
   let backgroundVariable;
   if ($isRecessed) {
     backgroundVariable = 'background.recessed';
@@ -34,11 +33,11 @@ const colorStyles = _ref => {
   return css(["background-color:", ";color:", ";"], background, foreground);
 };
 const StyledWell = styled(StyledBase).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$7,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledWell",
   componentId: "sc-a5831c-0"
-})(["", " ", ";"], colorStyles, componentStyles);
+})(["", " ", ";"], colorStyles$6, componentStyles);
 
 export { StyledWell };

package/dist/esm/styled/content/StyledClose.js

@@ -9,12 +9,11 @@ import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { validationTypes } from '../../utils/icons.js';
 import { IconButton } from '@zendeskgarden/react-buttons';
 
-const COMPONENT_ID = 'notifications.close';
-const colorStyles = _ref => {
-  let {
-    theme,
-    $type
-  } = _ref;
+const COMPONENT_ID$d = 'notifications.close';
+const colorStyles$a = ({
+  theme,
+  $type
+}) => {
   let variable;
   switch ($type) {
     case validationTypes.warning:
@@ -57,11 +56,11 @@ const colorStyles = _ref => {
   return css(["color:", ";&:hover{background-color:transparent;color:", ";}&:active{background-color:transparent;color:", ";}"], color, hoverColor, activeColor);
 };
 const StyledClose = styled(IconButton).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$d,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-1mr9nx1-0"
-})(["position:absolute;top:", "px;right:", ";left:", ";", " ", ";"], props => props.theme.space.base, p => !p.theme.rtl && `${p.theme.space.base}px`, p => p.theme.rtl && `${p.theme.space.base}px`, colorStyles, componentStyles);
+})(["position:absolute;top:", "px;right:", ";left:", ";", " ", ";"], props => props.theme.space.base, p => !p.theme.rtl && `${p.theme.space.base}px`, p => p.theme.rtl && `${p.theme.space.base}px`, colorStyles$a, componentStyles);
 
 export { StyledClose };

package/dist/esm/styled/content/StyledParagraph.js

@@ -7,10 +7,10 @@
 import styled from 'styled-components';
 import { componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'notifications.paragraph';
+const COMPONENT_ID$c = 'notifications.paragraph';
 const StyledParagraph = styled.p.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$c,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-12tmd6p-0"

package/dist/esm/styled/content/StyledTitle.js

@@ -7,10 +7,10 @@
 import styled from 'styled-components';
 import { getColor, componentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'notifications.title';
+const COMPONENT_ID$b = 'notifications.title';
 const StyledTitle = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.12.2'
+  'data-garden-id': COMPONENT_ID$b,
+  'data-garden-version': '9.12.4'
 }).withConfig({
   displayName: "StyledTitle",
   componentId: "sc-xx4jsv-0"