@zendeskgarden/react-notifications 9.0.0-next.20 → 9.0.0-next.22

package/dist/esm/elements/Close.js

@@ -0,0 +1,40 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import { StyledClose } from '../styled/content/StyledClose.js';
+import '../styled/content/StyledParagraph.js';
+import '../styled/content/StyledTitle.js';
+import '../styled/StyledAlert.js';
+import '../styled/StyledNotification.js';
+import '../styled/StyledWell.js';
+import '../styled/StyledIcon.js';
+import '../styled/StyledBase.js';
+import '../styled/global-alert/StyledGlobalAlert.js';
+import '../styled/global-alert/StyledGlobalAlertButton.js';
+import '../styled/global-alert/StyledGlobalAlertClose.js';
+import '../styled/global-alert/StyledGlobalAlertContent.js';
+import '../styled/global-alert/StyledGlobalAlertIcon.js';
+import '../styled/global-alert/StyledGlobalAlertTitle.js';
+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 type = useNotificationsContext();
+  return React__default.createElement(StyledClose, Object.assign({
+    ref: ref,
+    $type: type,
+    "aria-label": ariaLabel
+  }, props, {
+    focusInset: true,
+    size: "small"
+  }), React__default.createElement(SvgXStroke, null));
+});
+Close.displayName = 'Notification.Close';
+
+export { Close };

package/dist/esm/elements/Notification.js

@@ -23,9 +23,9 @@ import '../styled/global-alert/StyledGlobalAlertContent.js';
 import '../styled/global-alert/StyledGlobalAlertIcon.js';
 import '../styled/global-alert/StyledGlobalAlertTitle.js';
 import { validationIcons } from '../utils/icons.js';
-import { Title } from './content/Title.js';
-import { Paragraph } from './content/Paragraph.js';
-import { Close } from './content/Close.js';
+import { Title } from './Title.js';
+import { Paragraph } from './Paragraph.js';
+import { Close } from './Close.js';
 
 const NotificationComponent = forwardRef((_ref, ref) => {
   let {

package/dist/esm/elements/Paragraph.js

@@ -0,0 +1,28 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import '../styled/content/StyledClose.js';
+import { StyledParagraph } from '../styled/content/StyledParagraph.js';
+import '../styled/content/StyledTitle.js';
+import '../styled/StyledAlert.js';
+import '../styled/StyledNotification.js';
+import '../styled/StyledWell.js';
+import '../styled/StyledIcon.js';
+import '../styled/StyledBase.js';
+import '../styled/global-alert/StyledGlobalAlert.js';
+import '../styled/global-alert/StyledGlobalAlertButton.js';
+import '../styled/global-alert/StyledGlobalAlertClose.js';
+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({
+  ref: ref
+}, props)));
+Paragraph.displayName = 'Notification.Paragraph';
+
+export { Paragraph };

package/dist/esm/elements/{Well.js → Title.js}

@@ -5,13 +5,12 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import React__default from 'react';
-import PropTypes from 'prop-types';
 import '../styled/content/StyledClose.js';
 import '../styled/content/StyledParagraph.js';
-import '../styled/content/StyledTitle.js';
+import { StyledTitle } from '../styled/content/StyledTitle.js';
 import '../styled/StyledAlert.js';
 import '../styled/StyledNotification.js';
-import { StyledWell } from '../styled/StyledWell.js';
+import '../styled/StyledWell.js';
 import '../styled/StyledIcon.js';
 import '../styled/StyledBase.js';
 import '../styled/global-alert/StyledGlobalAlert.js';
@@ -20,28 +19,17 @@ import '../styled/global-alert/StyledGlobalAlertClose.js';
 import '../styled/global-alert/StyledGlobalAlertContent.js';
 import '../styled/global-alert/StyledGlobalAlertIcon.js';
 import '../styled/global-alert/StyledGlobalAlertTitle.js';
-import { Title } from './content/Title.js';
-import { Paragraph } from './content/Paragraph.js';
 
-const WellComponent = React__default.forwardRef((_ref, ref) => {
+const Title = React__default.forwardRef((_ref, ref) => {
   let {
-    isFloating,
-    isRecessed,
+    isRegular,
     ...props
   } = _ref;
-  return React__default.createElement(StyledWell, Object.assign({
+  return React__default.createElement(StyledTitle, Object.assign({
     ref: ref,
-    $isFloating: isFloating,
-    $isRecessed: isRecessed
+    $isRegular: isRegular
   }, props));
 });
-WellComponent.displayName = 'Well';
-WellComponent.propTypes = {
-  isRecessed: PropTypes.bool,
-  isFloating: PropTypes.bool
-};
-const Well = WellComponent;
-Well.Paragraph = Paragraph;
-Well.Title = Title;
+Title.displayName = 'Notification.Title';
 
-export { Well, WellComponent };
+export { Title };

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

@@ -0,0 +1,56 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { TYPE } from '../../types/index.js';
+import '../../styled/content/StyledClose.js';
+import '../../styled/content/StyledParagraph.js';
+import '../../styled/content/StyledTitle.js';
+import { StyledAlert } from '../../styled/StyledAlert.js';
+import '../../styled/StyledNotification.js';
+import '../../styled/StyledWell.js';
+import { StyledIcon } from '../../styled/StyledIcon.js';
+import '../../styled/StyledBase.js';
+import '../../styled/global-alert/StyledGlobalAlert.js';
+import '../../styled/global-alert/StyledGlobalAlertButton.js';
+import '../../styled/global-alert/StyledGlobalAlertClose.js';
+import '../../styled/global-alert/StyledGlobalAlertContent.js';
+import '../../styled/global-alert/StyledGlobalAlertIcon.js';
+import '../../styled/global-alert/StyledGlobalAlertTitle.js';
+import { validationIcons } from '../../utils/icons.js';
+import { NotificationsContext } from '../../utils/useNotificationsContext.js';
+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 Icon = validationIcons[type];
+  return React__default.createElement(NotificationsContext.Provider, {
+    value: type
+  }, React__default.createElement(StyledAlert, Object.assign({
+    ref: ref,
+    $type: type,
+    role: role === undefined ? 'alert' : role
+  }, props), React__default.createElement(StyledIcon, {
+    $type: type
+  }, React__default.createElement(Icon, null)), props.children));
+});
+AlertComponent.displayName = 'Alert';
+AlertComponent.propTypes = {
+  type: PropTypes.oneOf(TYPE).isRequired
+};
+const Alert = AlertComponent;
+Alert.Close = Close;
+Alert.Paragraph = Paragraph;
+Alert.Title = Title;
+
+export { Alert, AlertComponent };

package/dist/esm/elements/{content → alert}/Close.js

@@ -35,6 +35,6 @@ const Close = React__default.forwardRef((props, ref) => {
     size: "small"
   }), React__default.createElement(SvgXStroke, null));
 });
-Close.displayName = 'Close';
+Close.displayName = 'Alert.Close';
 
 export { Close };

package/dist/esm/elements/{content → alert}/Paragraph.js

@@ -23,6 +23,6 @@ import '../../styled/global-alert/StyledGlobalAlertTitle.js';
 const Paragraph = React__default.forwardRef((props, ref) => React__default.createElement(StyledParagraph, Object.assign({
   ref: ref
 }, props)));
-Paragraph.displayName = 'Paragraph';
+Paragraph.displayName = 'Alert.Paragraph';
 
 export { Paragraph };

package/dist/esm/elements/{content → alert}/Title.js

@@ -30,6 +30,6 @@ const Title = React__default.forwardRef((_ref, ref) => {
     $isRegular: isRegular
   }, props));
 });
-Title.displayName = 'Title';
+Title.displayName = 'Alert.Title';
 
 export { Title };

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

@@ -0,0 +1,47 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import '../../styled/content/StyledClose.js';
+import '../../styled/content/StyledParagraph.js';
+import '../../styled/content/StyledTitle.js';
+import '../../styled/StyledAlert.js';
+import '../../styled/StyledNotification.js';
+import { StyledWell } from '../../styled/StyledWell.js';
+import '../../styled/StyledIcon.js';
+import '../../styled/StyledBase.js';
+import '../../styled/global-alert/StyledGlobalAlert.js';
+import '../../styled/global-alert/StyledGlobalAlertButton.js';
+import '../../styled/global-alert/StyledGlobalAlertClose.js';
+import '../../styled/global-alert/StyledGlobalAlertContent.js';
+import '../../styled/global-alert/StyledGlobalAlertIcon.js';
+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));
+});
+WellComponent.displayName = 'Well';
+WellComponent.propTypes = {
+  isRecessed: PropTypes.bool,
+  isFloating: PropTypes.bool
+};
+const Well = WellComponent;
+Well.Paragraph = Paragraph;
+Well.Title = Title;
+
+export { Well, WellComponent };

package/dist/esm/index.js

@@ -4,12 +4,12 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-export { Alert } from './elements/Alert.js';
+export { Alert } from './elements/alert/Alert.js';
 export { Notification } from './elements/Notification.js';
-export { Well } from './elements/Well.js';
-export { Close } from './elements/content/Close.js';
-export { Paragraph } from './elements/content/Paragraph.js';
-export { Title } from './elements/content/Title.js';
+export { Well } from './elements/well/Well.js';
+export { Close } from './elements/Close.js';
+export { Paragraph } from './elements/Paragraph.js';
+export { Title } from './elements/Title.js';
 export { ToastProvider } from './elements/toaster/ToastProvider.js';
 export { useToast } from './elements/toaster/useToast.js';
 export { GlobalAlert } from './elements/global-alert/GlobalAlert.js';

package/dist/esm/styled/StyledAlert.js

@@ -39,7 +39,7 @@ const colorStyles = props => {
 };
 const StyledAlert = styled(StyledBase).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledAlert",
   componentId: "sc-fyn8jp-0"

package/dist/esm/styled/StyledBase.js

@@ -80,7 +80,7 @@ const padding = props => {
 };
 const StyledBase = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledBase",
   componentId: "sc-14syaqw-0"

package/dist/esm/styled/StyledIcon.js

@@ -49,7 +49,7 @@ const colorStyles = _ref2 => {
 };
 const StyledIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-msklws-0"

package/dist/esm/styled/StyledNotification.js

@@ -41,7 +41,7 @@ const colorStyles = props => {
 };
 const StyledNotification = styled(StyledBase).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledNotification",
   componentId: "sc-uf6jh-0"

package/dist/esm/styled/StyledWell.js

@@ -35,7 +35,7 @@ const colorStyles = _ref => {
 };
 const StyledWell = styled(StyledBase).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledWell",
   componentId: "sc-a5831c-0"

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

@@ -58,7 +58,7 @@ const colorStyles = _ref => {
 };
 const StyledClose = styled(IconButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-1mr9nx1-0"

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

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'notifications.paragraph';
 const StyledParagraph = styled.p.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-12tmd6p-0"

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

@@ -10,7 +10,7 @@ import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden
 const COMPONENT_ID = 'notifications.title';
 const StyledTitle = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledTitle",
   componentId: "sc-xx4jsv-0"

package/dist/esm/styled/global-alert/StyledGlobalAlert.js

@@ -148,7 +148,7 @@ const sizeStyles = props => {
 };
 const StyledGlobalAlert = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledGlobalAlert",
   componentId: "sc-k6rimt-0"

package/dist/esm/styled/global-alert/StyledGlobalAlertButton.js

@@ -106,7 +106,7 @@ function sizeStyles(props) {
 }
 const StyledGlobalAlertButton = styled(Button).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledGlobalAlertButton",
   componentId: "sc-1txe91a-0"

package/dist/esm/styled/global-alert/StyledGlobalAlertClose.js

@@ -91,7 +91,7 @@ const sizeStyles = props => {
 };
 const StyledGlobalAlertClose = styled(IconButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledGlobalAlertClose",
   componentId: "sc-1g5s93s-0"

package/dist/esm/styled/global-alert/StyledGlobalAlertContent.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'notifications.global_alert.content';
 const StyledGlobalAlertContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledGlobalAlertContent",
   componentId: "sc-rept0u-0"

package/dist/esm/styled/global-alert/StyledGlobalAlertIcon.js

@@ -53,7 +53,7 @@ const colorStyles = _ref => {
 };
 const StyledGlobalAlertIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledGlobalAlertIcon",
   componentId: "sc-84ne9k-0"

package/dist/esm/styled/global-alert/StyledGlobalAlertTitle.js

@@ -37,7 +37,7 @@ const colorStyles = _ref => {
 };
 const StyledGlobalAlertTitle = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledGlobalAlertTitle",
   componentId: "sc-10clqbo-0"

package/dist/index.cjs.js

@@ -206,7 +206,7 @@ const colorStyles$a = _ref => {
 };
 const StyledClose = styled__default.default(reactButtons.IconButton).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledClose",
   componentId: "sc-1mr9nx1-0"
@@ -218,7 +218,7 @@ StyledClose.defaultProps = {
 const COMPONENT_ID$c = 'notifications.paragraph';
 const StyledParagraph = styled__default.default.p.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-12tmd6p-0"
@@ -230,7 +230,7 @@ StyledParagraph.defaultProps = {
 const COMPONENT_ID$b = 'notifications.title';
 const StyledTitle = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledTitle",
   componentId: "sc-xx4jsv-0"
@@ -314,7 +314,7 @@ const padding = props => {
 };
 const StyledBase = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledBase",
   componentId: "sc-14syaqw-0"
@@ -352,7 +352,7 @@ const colorStyles$8 = props => {
 };
 const StyledAlert = styled__default.default(StyledBase).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledAlert",
   componentId: "sc-fyn8jp-0"
@@ -390,7 +390,7 @@ const colorStyles$7 = props => {
 };
 const StyledNotification = styled__default.default(StyledBase).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledNotification",
   componentId: "sc-uf6jh-0"
@@ -429,7 +429,7 @@ const colorStyles$6 = _ref => {
 };
 const StyledWell = styled__default.default(StyledBase).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledWell",
   componentId: "sc-a5831c-0"
@@ -479,7 +479,7 @@ const colorStyles$5 = _ref2 => {
 };
 const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-msklws-0"
@@ -629,7 +629,7 @@ const sizeStyles$3 = props => {
 };
 const StyledGlobalAlert = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledGlobalAlert",
   componentId: "sc-k6rimt-0"
@@ -721,7 +721,7 @@ const sizeStyles$2 = props => {
 };
 const StyledGlobalAlertClose = styled__default.default(reactButtons.IconButton).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledGlobalAlertClose",
   componentId: "sc-1g5s93s-0"
@@ -827,7 +827,7 @@ function sizeStyles$1(props) {
 }
 const StyledGlobalAlertButton = styled__default.default(reactButtons.Button).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledGlobalAlertButton",
   componentId: "sc-1txe91a-0"
@@ -839,7 +839,7 @@ StyledGlobalAlertButton.defaultProps = {
 const COMPONENT_ID$2 = 'notifications.global_alert.content';
 const StyledGlobalAlertContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledGlobalAlertContent",
   componentId: "sc-rept0u-0"
@@ -893,7 +893,7 @@ const colorStyles$1 = _ref => {
 };
 const StyledGlobalAlertIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledGlobalAlertIcon",
   componentId: "sc-84ne9k-0"
@@ -932,7 +932,7 @@ const colorStyles = _ref => {
 };
 const StyledGlobalAlertTitle = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.22'
 }).withConfig({
   displayName: "StyledGlobalAlertTitle",
   componentId: "sc-10clqbo-0"
@@ -946,7 +946,7 @@ const useNotificationsContext = () => {
   return React.useContext(NotificationsContext);
 };
 
-const Title = React__namespace.default.forwardRef((_ref, ref) => {
+const Title$1 = React__namespace.default.forwardRef((_ref, ref) => {
   let {
     isRegular,
     ...props
@@ -956,12 +956,12 @@ const Title = React__namespace.default.forwardRef((_ref, ref) => {
     $isRegular: isRegular
   }, props));
 });
-Title.displayName = 'Title';
+Title$1.displayName = 'Alert.Title';
 
-const Paragraph = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledParagraph, Object.assign({
+const Paragraph$1 = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledParagraph, Object.assign({
   ref: ref
 }, props)));
-Paragraph.displayName = 'Paragraph';
+Paragraph$1.displayName = 'Alert.Paragraph';
 
 var _path;
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -980,8 +980,8 @@ var SvgXStroke = function SvgXStroke(props) {
   })));
 };
 
-const Close = React__namespace.default.forwardRef((props, ref) => {
-  const ariaLabel = reactTheming.useText(Close, props, 'aria-label', 'Close');
+const Close$1 = React__namespace.default.forwardRef((props, ref) => {
+  const ariaLabel = reactTheming.useText(Close$1, props, 'aria-label', 'Close');
   const type = useNotificationsContext();
   return React__namespace.default.createElement(StyledClose, Object.assign({
     ref: ref,
@@ -992,7 +992,7 @@ const Close = React__namespace.default.forwardRef((props, ref) => {
     size: "small"
   }), React__namespace.default.createElement(SvgXStroke, null));
 });
-Close.displayName = 'Close';
+Close$1.displayName = 'Alert.Close';
 
 const AlertComponent = React__namespace.default.forwardRef((_ref, ref) => {
   let {
@@ -1016,9 +1016,40 @@ AlertComponent.propTypes = {
   type: PropTypes__default.default.oneOf(TYPE).isRequired
 };
 const Alert = AlertComponent;
-Alert.Close = Close;
-Alert.Paragraph = Paragraph;
-Alert.Title = Title;
+Alert.Close = Close$1;
+Alert.Paragraph = Paragraph$1;
+Alert.Title = Title$1;
+
+const Title = React__namespace.default.forwardRef((_ref, ref) => {
+  let {
+    isRegular,
+    ...props
+  } = _ref;
+  return React__namespace.default.createElement(StyledTitle, Object.assign({
+    ref: ref,
+    $isRegular: isRegular
+  }, props));
+});
+Title.displayName = 'Notification.Title';
+
+const Paragraph = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledParagraph, Object.assign({
+  ref: ref
+}, props)));
+Paragraph.displayName = 'Notification.Paragraph';
+
+const Close = React__namespace.default.forwardRef((props, ref) => {
+  const ariaLabel = reactTheming.useText(Close, props, 'aria-label', 'Close');
+  const type = useNotificationsContext();
+  return React__namespace.default.createElement(StyledClose, Object.assign({
+    ref: ref,
+    $type: type,
+    "aria-label": ariaLabel
+  }, props, {
+    focusInset: true,
+    size: "small"
+  }), React__namespace.default.createElement(SvgXStroke, null));
+});
+Close.displayName = 'Notification.Close';
 
 const NotificationComponent = React.forwardRef((_ref, ref) => {
   let {

package/dist/typings/elements/Notification.d.ts

@@ -6,9 +6,9 @@
  */
 import React from 'react';
 import { INotificationProps } from '../types';
-import { Title } from './content/Title';
-import { Paragraph } from './content/Paragraph';
-import { Close } from './content/Close';
+import { Title } from './Title';
+import { Paragraph } from './Paragraph';
+import { Close } from './Close';
 export declare const NotificationComponent: React.ForwardRefExoticComponent<INotificationProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * @extends HTMLAttributes<HTMLDivElement>

package/dist/typings/elements/{content/Title.d.ts → Title.d.ts}

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React from 'react';
-import { ITitleProps } from '../../types';
+import { ITitleProps } from '../types';
 /**
  * @deprecated use `Alert.Title`, `Notification.Title`, or `Well.Title` instead
  *

package/dist/typings/elements/{Alert.d.ts → alert/Alert.d.ts}

@@ -5,10 +5,10 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React from 'react';
-import { IAlertProps } from '../types';
-import { Title } from './content/Title';
-import { Paragraph } from './content/Paragraph';
-import { Close } from './content/Close';
+import { IAlertProps } from '../../types';
+import { Title } from './Title';
+import { Paragraph } from './Paragraph';
+import { Close } from './Close';
 export declare const AlertComponent: React.ForwardRefExoticComponent<IAlertProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * @extends HTMLAttributes<HTMLDivElement>

package/dist/typings/elements/alert/Close.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import React from 'react';
+/**
+ * @extends ButtonHTMLAttributes<HTMLButtonElement>
+ */
+export declare const Close: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

package/dist/typings/elements/alert/Paragraph.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import React from 'react';
+/**
+ * @extends HTMLAttributes<HTMLParagraphElement>
+ */
+export declare const Paragraph: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/typings/elements/alert/Title.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import React from 'react';
+import { ITitleProps } from '../../types';
+/**
+ * @extends HTMLAttributes<HTMLDivElement>
+ */
+export declare const Title: React.ForwardRefExoticComponent<ITitleProps & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/well/Paragraph.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import React from 'react';
+/**
+ * @extends HTMLAttributes<HTMLParagraphElement>
+ */
+export declare const Paragraph: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/typings/elements/well/Title.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import React from 'react';
+import { ITitleProps } from '../../types';
+/**
+ * @extends HTMLAttributes<HTMLDivElement>
+ */
+export declare const Title: React.ForwardRefExoticComponent<ITitleProps & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/{Well.d.ts → well/Well.d.ts}

@@ -5,9 +5,9 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React from 'react';
-import { IWellProps } from '../types';
-import { Title } from './content/Title';
-import { Paragraph } from './content/Paragraph';
+import { IWellProps } from '../../types';
+import { Title } from '../Title';
+import { Paragraph } from '../Paragraph';
 export declare const WellComponent: React.ForwardRefExoticComponent<IWellProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * @extends HTMLAttributes<HTMLDivElement>

package/dist/typings/index.d.ts

@@ -4,12 +4,12 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-export { Alert } from './elements/Alert';
+export { Alert } from './elements/alert/Alert';
 export { Notification } from './elements/Notification';
-export { Well } from './elements/Well';
-export { Close } from './elements/content/Close';
-export { Paragraph } from './elements/content/Paragraph';
-export { Title } from './elements/content/Title';
+export { Well } from './elements/well/Well';
+export { Close } from './elements/Close';
+export { Paragraph } from './elements/Paragraph';
+export { Title } from './elements/Title';
 export { ToastProvider } from './elements/toaster/ToastProvider';
 export { useToast, type IToastOptions, type IToast } from './elements/toaster/useToast';
 export { GlobalAlert } from './elements/global-alert/GlobalAlert';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-notifications",
-  "version": "9.0.0-next.20",
+  "version": "9.0.0-next.22",
   "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": "^9.0.0-next.20",
+    "@zendeskgarden/react-buttons": "^9.0.0-next.22",
     "polished": "^4.3.1",
     "prop-types": "^15.5.7",
     "react-transition-group": "^4.4.2",
@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@types/react-transition-group": "4.4.10",
-    "@zendeskgarden/react-theming": "^9.0.0-next.20",
+    "@zendeskgarden/react-theming": "^9.0.0-next.22",
     "@zendeskgarden/svg-icons": "7.1.1"
   },
   "keywords": [
@@ -48,5 +48,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "eab087ac0d6e74b3a4489d37d067baf7a225e7a8"
+  "gitHead": "46309385a1495c2297da23409f4196f662fe418b"
 }

package/dist/esm/elements/Alert.js

@@ -1,56 +0,0 @@
-/**
-* Copyright Zendesk, Inc.
-*
-* Use of this source code is governed under the Apache License, Version 2.0
-* found at http://www.apache.org/licenses/LICENSE-2.0.
-*/
-import React__default from 'react';
-import PropTypes from 'prop-types';
-import { TYPE } from '../types/index.js';
-import '../styled/content/StyledClose.js';
-import '../styled/content/StyledParagraph.js';
-import '../styled/content/StyledTitle.js';
-import { StyledAlert } from '../styled/StyledAlert.js';
-import '../styled/StyledNotification.js';
-import '../styled/StyledWell.js';
-import { StyledIcon } from '../styled/StyledIcon.js';
-import '../styled/StyledBase.js';
-import '../styled/global-alert/StyledGlobalAlert.js';
-import '../styled/global-alert/StyledGlobalAlertButton.js';
-import '../styled/global-alert/StyledGlobalAlertClose.js';
-import '../styled/global-alert/StyledGlobalAlertContent.js';
-import '../styled/global-alert/StyledGlobalAlertIcon.js';
-import '../styled/global-alert/StyledGlobalAlertTitle.js';
-import { validationIcons } from '../utils/icons.js';
-import { NotificationsContext } from '../utils/useNotificationsContext.js';
-import { Title } from './content/Title.js';
-import { Paragraph } from './content/Paragraph.js';
-import { Close } from './content/Close.js';
-
-const AlertComponent = React__default.forwardRef((_ref, ref) => {
-  let {
-    role,
-    type,
-    ...props
-  } = _ref;
-  const Icon = validationIcons[type];
-  return React__default.createElement(NotificationsContext.Provider, {
-    value: type
-  }, React__default.createElement(StyledAlert, Object.assign({
-    ref: ref,
-    $type: type,
-    role: role === undefined ? 'alert' : role
-  }, props), React__default.createElement(StyledIcon, {
-    $type: type
-  }, React__default.createElement(Icon, null)), props.children));
-});
-AlertComponent.displayName = 'Alert';
-AlertComponent.propTypes = {
-  type: PropTypes.oneOf(TYPE).isRequired
-};
-const Alert = AlertComponent;
-Alert.Close = Close;
-Alert.Paragraph = Paragraph;
-Alert.Title = Title;
-
-export { Alert, AlertComponent };