@zendeskgarden/react-notifications 9.0.0-next.2 → 9.0.0-next.21

package/README.md

@@ -14,16 +14,18 @@ npm install react react-dom styled-components @zendeskgarden/react-theming
 
 ## Usage
 
+## Notifications
+
 ```jsx
 import { ThemeProvider } from '@zendeskgarden/react-theming';
-import { Notification, Title } from '@zendeskgarden/react-notifications';
+import { Notification } from '@zendeskgarden/react-notifications';
 
 /**
  * Place a `ThemeProvider` at the root of your React application
  */
 <ThemeProvider>
   <Notification>
-    <Title>Example Title</Title>
+    <Notification.Title>Example Title</Notification.Title>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit...
   </Notification>
 </ThemeProvider>;
@@ -34,7 +36,7 @@ import { Notification, Title } from '@zendeskgarden/react-notifications';
 ```jsx
 import { ThemeProvider } from '@zendeskgarden/react-theming';
 import { Button } from '@zendeskgarden/react-buttons';
-import { Notification, Close, ToastProvider, useToast } from '@zendeskgarden/react-notifications';
+import { Notification, ToastProvider, useToast } from '@zendeskgarden/react-notifications';
 
 const ToastExample = () => {
   const { addToast } = useToast();
@@ -45,7 +47,7 @@ const ToastExample = () => {
         addToast(({ close }) => (
           <Notification>
             Example notification
-            <Close onClick={close} aria-label="Close" />
+            <Notification.Close onClick={close} aria-label="Close" />
           </Notification>
         ))
       }

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

@@ -0,0 +1,55 @@
+/**
+* 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, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import SvgInfoStroke from '../node_modules/@zendeskgarden/svg-icons/src/16/info-stroke.svg.js';
+import { TYPE } from '../types/index.js';
+import '../styled/content/StyledClose.js';
+import '../styled/content/StyledParagraph.js';
+import '../styled/content/StyledTitle.js';
+import '../styled/StyledAlert.js';
+import { StyledNotification } from '../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 { 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 Icon = type ? validationIcons[type] : SvgInfoStroke;
+  return React__default.createElement(StyledNotification, Object.assign({
+    ref: ref,
+    $type: type,
+    $isFloating: true,
+    role: "alert"
+  }, props), type && React__default.createElement(StyledIcon, {
+    $type: type
+  }, React__default.createElement(Icon, null)), children);
+});
+NotificationComponent.displayName = 'Notification';
+NotificationComponent.propTypes = {
+  type: PropTypes.oneOf(TYPE)
+};
+const Notification = NotificationComponent;
+Notification.Close = Close;
+Notification.Paragraph = Paragraph;
+Notification.Title = Title;
+
+export { Notification, NotificationComponent };

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/Title.js

@@ -0,0 +1,35 @@
+/**
+* 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 '../styled/content/StyledParagraph.js';
+import { StyledTitle } from '../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 Title = React__default.forwardRef((_ref, ref) => {
+  let {
+    isRegular,
+    ...props
+  } = _ref;
+  return React__default.createElement(StyledTitle, Object.assign({
+    ref: ref,
+    $isRegular: isRegular
+  }, props));
+});
+Title.displayName = 'Notification.Title';
+
+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/alert/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 = 'Alert.Close';
+
+export { Close };

package/dist/esm/elements/alert/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 = 'Alert.Paragraph';
+
+export { Paragraph };

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

@@ -0,0 +1,35 @@
+/**
+* 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 '../../styled/content/StyledParagraph.js';
+import { StyledTitle } from '../../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 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';
+
+export { Title };

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

@@ -0,0 +1,78 @@
+/**
+* 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, { forwardRef, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { ThemeProvider } from 'styled-components';
+import SvgInfoStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/info-stroke.svg.js';
+import SvgAlertErrorStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg.js';
+import SvgAlertWarningStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/alert-warning-stroke.svg.js';
+import SvgCheckCircleStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/check-circle-stroke.svg.js';
+import { TYPE } from '../../types/index.js';
+import '../../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 { StyledGlobalAlert } from '../../styled/global-alert/StyledGlobalAlert.js';
+import '../../styled/global-alert/StyledGlobalAlertButton.js';
+import '../../styled/global-alert/StyledGlobalAlertClose.js';
+import '../../styled/global-alert/StyledGlobalAlertContent.js';
+import { StyledGlobalAlertIcon } from '../../styled/global-alert/StyledGlobalAlertIcon.js';
+import '../../styled/global-alert/StyledGlobalAlertTitle.js';
+import { GlobalAlertContext } from '../../utils/useGlobalAlertContext.js';
+import { GlobalAlertButton } from './GlobalAlertButton.js';
+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 icon = {
+    success: React__default.createElement(SvgCheckCircleStroke, null),
+    error: React__default.createElement(SvgAlertErrorStroke, null),
+    warning: React__default.createElement(SvgAlertWarningStroke, null),
+    info: React__default.createElement(SvgInfoStroke, null)
+  }[type];
+  return (
+    React__default.createElement(ThemeProvider, {
+      theme: theme => ({
+        ...theme,
+        colors: {
+          ...theme.colors,
+          base: 'light'
+        }
+      })
+    }, React__default.createElement(GlobalAlertContext.Provider, {
+      value: useMemo(() => ({
+        type
+      }), [type])
+    }, React__default.createElement(StyledGlobalAlert, Object.assign({
+      ref: ref,
+      role: "status",
+      $alertType: type
+    }, props), React__default.createElement(StyledGlobalAlertIcon, {
+      $alertType: type
+    }, icon), props.children)))
+  );
+});
+GlobalAlertComponent.displayName = 'GlobalAlert';
+const GlobalAlert = GlobalAlertComponent;
+GlobalAlert.Button = GlobalAlertButton;
+GlobalAlert.Close = GlobalAlertClose;
+GlobalAlert.Content = GlobalAlertContent;
+GlobalAlert.Title = GlobalAlertTitle;
+GlobalAlert.propTypes = {
+  type: PropTypes.oneOf(TYPE).isRequired
+};
+
+export { GlobalAlert };

package/dist/esm/elements/global-alert/GlobalAlertButton.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, { forwardRef } 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 '../../styled/StyledWell.js';
+import '../../styled/StyledIcon.js';
+import '../../styled/StyledBase.js';
+import '../../styled/global-alert/StyledGlobalAlert.js';
+import { StyledGlobalAlertButton } from '../../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 { useGlobalAlertContext } from '../../utils/useGlobalAlertContext.js';
+
+const GlobalAlertButton = forwardRef((_ref, ref) => {
+  let {
+    isBasic,
+    ...props
+  } = _ref;
+  const {
+    type
+  } = useGlobalAlertContext();
+  return React__default.createElement(StyledGlobalAlertButton, Object.assign({
+    ref: ref,
+    $alertType: type
+  }, props, {
+    size: "small",
+    isPrimary: !isBasic,
+    isBasic: isBasic
+  }));
+});
+GlobalAlertButton.displayName = 'GlobalAlert.Button';
+GlobalAlertButton.propTypes = {
+  isBasic: PropTypes.bool
+};
+
+export { GlobalAlertButton };

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

@@ -0,0 +1,43 @@
+/**
+* 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, { forwardRef } from 'react';
+import { useText } from '@zendeskgarden/react-theming';
+import SvgXStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/x-stroke.svg.js';
+import '../../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 { StyledGlobalAlertClose } from '../../styled/global-alert/StyledGlobalAlertClose.js';
+import '../../styled/global-alert/StyledGlobalAlertContent.js';
+import '../../styled/global-alert/StyledGlobalAlertIcon.js';
+import '../../styled/global-alert/StyledGlobalAlertTitle.js';
+import { useGlobalAlertContext } from '../../utils/useGlobalAlertContext.js';
+
+const GlobalAlertClose = forwardRef((props, ref) => {
+  const {
+    type
+  } = useGlobalAlertContext();
+  const label = useText(GlobalAlertClose, props, 'aria-label', 'Close');
+  return React__default.createElement(StyledGlobalAlertClose, Object.assign({
+    ref: ref,
+    $alertType: type
+  }, props, {
+    size: "small"
+  }), React__default.createElement(SvgXStroke, {
+    role: "img",
+    "aria-label": label
+  }));
+});
+GlobalAlertClose.displayName = 'GlobalAlert.Close';
+
+export { GlobalAlertClose };

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

@@ -0,0 +1,30 @@
+/**
+* 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, { forwardRef } from 'react';
+import '../../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 { StyledGlobalAlertContent } from '../../styled/global-alert/StyledGlobalAlertContent.js';
+import '../../styled/global-alert/StyledGlobalAlertIcon.js';
+import '../../styled/global-alert/StyledGlobalAlertTitle.js';
+
+const GlobalAlertContent = forwardRef((props, ref) => {
+  return React__default.createElement(StyledGlobalAlertContent, Object.assign({
+    ref: ref
+  }, props));
+});
+GlobalAlertContent.displayName = 'GlobalAlert.Content';
+
+export { GlobalAlertContent };

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

@@ -0,0 +1,44 @@
+/**
+* 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, { forwardRef } 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 '../../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 { StyledGlobalAlertTitle } from '../../styled/global-alert/StyledGlobalAlertTitle.js';
+import { useGlobalAlertContext } from '../../utils/useGlobalAlertContext.js';
+
+const GlobalAlertTitle = forwardRef((_ref, ref) => {
+  let {
+    isRegular,
+    ...props
+  } = _ref;
+  const {
+    type
+  } = useGlobalAlertContext();
+  return React__default.createElement(StyledGlobalAlertTitle, Object.assign({
+    $alertType: type,
+    $isRegular: isRegular,
+    ref: ref
+  }, props));
+});
+GlobalAlertTitle.displayName = 'GlobalAlert.Title';
+GlobalAlertTitle.propTypes = {
+  isRegular: PropTypes.bool
+};
+
+export { GlobalAlertTitle };