@zendeskgarden/react-notifications 8.75.1 → 8.76.0

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

@@ -0,0 +1,82 @@
+/**
+* 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, { useState, useContext, useCallback, useEffect } from 'react';
+import { ThemeContext } from 'styled-components';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+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 [pauseTimers, setPauseTimers] = useState(false);
+  const theme = useContext(ThemeContext);
+  const environment = useDocument(theme);
+  const handleVisibilityChange = useCallback(e => {
+    if (e.target.visibilityState === 'visible') {
+      setPauseTimers(false);
+    } else {
+      setPauseTimers(true);
+    }
+  }, []);
+  useEffect(() => {
+    if (environment) {
+      environment.addEventListener('visibilitychange', handleVisibilityChange);
+    }
+    return () => {
+      if (environment) {
+        environment.removeEventListener('visibilitychange', handleVisibilityChange);
+      }
+    };
+  }, [environment, handleVisibilityChange]);
+  const handleMouseEnter = useCallback(() => {
+    setPauseTimers(true);
+  }, []);
+  const handleMouseLeave = useCallback(() => {
+    setPauseTimers(false);
+  }, []);
+  const isHidden = useCallback(index => {
+    if (placement === 'bottom' || placement === 'bottom-start' || placement === 'bottom-end') {
+      return index < toasts.length - limit;
+    }
+    return index >= limit;
+  }, [limit, placement, toasts.length]);
+  return React__default.createElement(StyledTransitionContainer, Object.assign({
+    key: placement,
+    toastPlacement: placement,
+    toastZIndex: zIndex,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, props), React__default.createElement(TransitionGroup, null, toasts.map((toast, index) => {
+    const transitionRef = React__default.createRef();
+    return React__default.createElement(CSSTransition, {
+      key: toast.id,
+      timeout: {
+        enter: 400,
+        exit: 550
+      },
+      unmountOnExit: true,
+      classNames: TRANSITION_CLASS,
+      nodeRef: transitionRef
+    }, React__default.createElement(StyledFadeInTransition, {
+      ref: transitionRef,
+      placement: placement,
+      isHidden: isHidden(index)
+    }, React__default.createElement(Toast, {
+      toast: toast,
+      pauseTimers: pauseTimers || isHidden(index)
+    })));
+  })));
+};
+
+export { ToastSlot };

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

@@ -0,0 +1,66 @@
+/**
+* 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.
+*/
+const getInitialState = () => {
+  return {
+    toasts: []
+  };
+};
+const toasterReducer = (state, action) => {
+  switch (action.type) {
+    case 'ADD_TOAST':
+      {
+        return {
+          ...state,
+          toasts: [...state.toasts, action.payload]
+        };
+      }
+    case 'REMOVE_TOAST':
+      {
+        const filteredToasts = state.toasts.filter(toast => toast.id !== action.payload);
+        return {
+          ...state,
+          toasts: filteredToasts
+        };
+      }
+    case 'UPDATE_TOAST':
+      {
+        const updatedToasts = state.toasts.map(toast => {
+          if (toast.id !== action.payload.id) {
+            return toast;
+          }
+          const updatedToast = toast;
+          const {
+            content,
+            ...newOptions
+          } = action.payload.options;
+          if (content) {
+            updatedToast.content = content;
+          }
+          updatedToast.options = {
+            ...updatedToast.options,
+            ...newOptions
+          };
+          return updatedToast;
+        });
+        return {
+          ...state,
+          toasts: updatedToasts
+        };
+      }
+    case 'REMOVE_ALL_TOASTS':
+      {
+        return {
+          ...state,
+          toasts: []
+        };
+      }
+    default:
+      throw new Error('Invalid toaster reducer action');
+  }
+};
+
+export { getInitialState, toasterReducer };

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

@@ -0,0 +1,71 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { hideVisually } from 'polished';
+import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const TRANSITION_CLASS = 'garden-toast-transition';
+const DEFAULT_DURATION = '400ms';
+const StyledFadeInTransition = styled.div.withConfig({
+  displayName: "styled__StyledFadeInTransition",
+  componentId: "sc-nq0usb-0"
+})(["transition:opacity ", " ease-in 300ms;opacity:", ";margin-bottom:", "px;", " &.", "-enter{transform:translateY( ", " );opacity:0;max-height:0;}&.", "-enter-active{transform:translateY(0);transition:opacity ", " ease-in,transform ", " cubic-bezier(0.15,0.85,0.35,1.2),max-height ", ";opacity:1;max-height:500px;}&.", "-exit{opacity:1;max-height:500px;}&.", "-exit-active{transition:opacity 550ms ease-out,max-height ", " linear 150ms;opacity:0;max-height:0;}"], DEFAULT_DURATION, p => p.isHidden ? '0 !important' : 1, p => p.theme.space.base * 2, p => p.isHidden && hideVisually(), TRANSITION_CLASS, props => {
+  if (props.placement === 'bottom-start' || props.placement === 'bottom' || props.placement === 'bottom-end') {
+    return '100px';
+  }
+  return '-100px';
+}, TRANSITION_CLASS, DEFAULT_DURATION, DEFAULT_DURATION, DEFAULT_DURATION, TRANSITION_CLASS, TRANSITION_CLASS, DEFAULT_DURATION);
+StyledFadeInTransition.defaultProps = {
+  theme: DEFAULT_THEME
+};
+const placementStyles = props => {
+  const verticalDistance = `${props.theme.space.base * 16}px`;
+  const horizontalDistance = `${props.theme.space.base * 3}px`;
+  const topLeftStyles = css(["top:", ";left:", ";"], verticalDistance, horizontalDistance);
+  const topStyles = css(["top:", ";left:50%;transform:translate(-50%,0);"], verticalDistance);
+  const topRightStyles = css(["top:", ";right:", ";"], verticalDistance, horizontalDistance);
+  const bottomLeftStyles = css(["bottom:", ";left:", ";"], verticalDistance, horizontalDistance);
+  const bottomStyles = css(["bottom:", ";left:50%;transform:translate(-50%,0);"], verticalDistance);
+  const bottomRightStyles = css(["right:", ";bottom:", ";"], horizontalDistance, verticalDistance);
+  switch (props.toastPlacement) {
+    case 'top-start':
+      if (props.theme.rtl) {
+        return topRightStyles;
+      }
+      return topLeftStyles;
+    case 'top':
+      return topStyles;
+    case 'top-end':
+      if (props.theme.rtl) {
+        return topLeftStyles;
+      }
+      return topRightStyles;
+    case 'bottom-start':
+      if (props.theme.rtl) {
+        return bottomRightStyles;
+      }
+      return bottomLeftStyles;
+    case 'bottom':
+      return bottomStyles;
+    case 'bottom-end':
+      if (props.theme.rtl) {
+        return bottomLeftStyles;
+      }
+      return bottomRightStyles;
+    default:
+      return '';
+  }
+};
+const StyledTransitionContainer = styled.div.withConfig({
+  displayName: "styled__StyledTransitionContainer",
+  componentId: "sc-nq0usb-1"
+})(["position:fixed;z-index:", ";", ";"], props => props.toastZIndex, placementStyles);
+StyledTransitionContainer.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledFadeInTransition, StyledTransitionContainer, TRANSITION_CLASS };

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

@@ -0,0 +1,70 @@
+/**
+* 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 { useContext, useCallback } from 'react';
+import { uid } from 'react-uid';
+import { ToastContext } from './ToastContext.js';
+
+const DEFAULT_TOAST_OPTIONS = {
+  autoDismiss: 5000,
+  placement: 'top-end'
+};
+const useToast = () => {
+  const context = useContext(ToastContext);
+  if (context === undefined) {
+    throw new Error('useToast() must be used within a "ToastProvider"');
+  }
+  const {
+    dispatch,
+    state
+  } = context;
+  const addToast = useCallback(function (content) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const mergedOptions = {
+      ...DEFAULT_TOAST_OPTIONS,
+      ...options
+    };
+    const newToast = {
+      id: mergedOptions.id || uid(content),
+      content,
+      options: mergedOptions
+    };
+    dispatch({
+      type: 'ADD_TOAST',
+      payload: newToast
+    });
+    return newToast.id;
+  }, [dispatch]);
+  const removeToast = useCallback(id => {
+    dispatch({
+      type: 'REMOVE_TOAST',
+      payload: id
+    });
+  }, [dispatch]);
+  const updateToast = useCallback((id, options) => {
+    dispatch({
+      type: 'UPDATE_TOAST',
+      payload: {
+        id,
+        options
+      }
+    });
+  }, [dispatch]);
+  const removeAllToasts = useCallback(() => {
+    dispatch({
+      type: 'REMOVE_ALL_TOASTS'
+    });
+  }, [dispatch]);
+  return {
+    addToast,
+    removeToast,
+    updateToast,
+    removeAllToasts,
+    toasts: state.toasts
+  };
+};
+
+export { useToast };

package/dist/esm/index.js

@@ -0,0 +1,15 @@
+/**
+* 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.
+*/
+export { Alert } from './elements/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 { ToastProvider } from './elements/toaster/ToastProvider.js';
+export { useToast } from './elements/toaster/useToast.js';
+export { GlobalAlert } from './elements/global-alert/GlobalAlert.js';

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/x-stroke.svg.js

@@ -0,0 +1,26 @@
+/**
+* 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 * as React from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgXStroke = function SvgXStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    focusable: "false",
+    viewBox: "0 0 12 12",
+    "aria-hidden": "true"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    d: "M3 9l6-6m0 6L3 3"
+  })));
+};
+
+export { SvgXStroke as default };

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

@@ -0,0 +1,37 @@
+/**
+* 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 * as React from 'react';
+
+var _g, _circle;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgAlertErrorStroke = function SvgAlertErrorStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    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", {
+    fill: "none",
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: 7.5,
+    cy: 8.5,
+    r: 7
+  }), /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    d: "M7.5 4.5V9"
+  }))), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
+    cx: 7.5,
+    cy: 12,
+    r: 1,
+    fill: "currentColor"
+  })));
+};
+
+export { SvgAlertErrorStroke as default };

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

@@ -0,0 +1,32 @@
+/**
+* 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 * as React from 'react';
+
+var _path, _circle;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgAlertWarningStroke = function SvgAlertWarningStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    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", {
+    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", {
+    cx: 7.5,
+    cy: 12,
+    r: 1,
+    fill: "currentColor"
+  })));
+};
+
+export { SvgAlertWarningStroke as default };

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

@@ -0,0 +1,33 @@
+/**
+* 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 * as React from 'react';
+
+var _g;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgCheckCircleStroke = function SvgCheckCircleStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    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", {
+    fill: "none",
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M4 9l2.5 2.5 5-5"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: 7.5,
+    cy: 8.5,
+    r: 7
+  }))));
+};
+
+export { SvgCheckCircleStroke as default };

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

@@ -0,0 +1,37 @@
+/**
+* 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 * as React from 'react';
+
+var _g, _circle;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgInfoStroke = function SvgInfoStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    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", {
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: 7.5,
+    cy: 8.5,
+    r: 7,
+    fill: "none"
+  }), /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    d: "M7.5 12.5V8"
+  }))), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
+    cx: 7.5,
+    cy: 5,
+    r: 1,
+    fill: "currentColor"
+  })));
+};
+
+export { SvgInfoStroke as default };

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

@@ -0,0 +1,26 @@
+/**
+* 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 * as React from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgXStroke = function SvgXStroke(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    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", {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    d: "M3 13L13 3m0 10L3 3"
+  })));
+};
+
+export { SvgXStroke as default };

package/dist/esm/styled/StyledAlert.js

@@ -0,0 +1,25 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { StyledTitle } from './content/StyledTitle.js';
+import { StyledBase } from './StyledBase.js';
+
+const COMPONENT_ID = 'notifications.alert';
+const colorStyles = props => css(["", "{color:", ";}"], StyledTitle, props.hue && getColorV8(props.hue, 800, props.theme));
+const StyledAlert = styled(StyledBase).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledAlert",
+  componentId: "sc-fyn8jp-0"
+})(["", " ", ";"], colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledAlert.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledAlert };

package/dist/esm/styled/StyledBase.js

@@ -0,0 +1,54 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { getLineHeight, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+
+const boxShadow = props => {
+  const {
+    theme
+  } = props;
+  const {
+    space,
+    shadows
+  } = theme;
+  const offsetY = `${space.base * 5}px`;
+  const blurRadius = `${space.base * 7}px`;
+  const color = getColorV8('chromeHue', 600, theme, 0.15);
+  return shadows.lg(offsetY, blurRadius, color);
+};
+const colorStyles = props => {
+  let backgroundColor;
+  let borderColor;
+  let foregroundColor;
+  if (props.hue) {
+    backgroundColor = getColorV8(props.hue, 100, props.theme);
+    borderColor = getColorV8(props.hue, 300, props.theme);
+    foregroundColor = getColorV8(props.hue, props.type === 'info' ? 600 : 700, props.theme);
+  } else {
+    backgroundColor = getColorV8('background', 600 , props.theme);
+    borderColor = getColorV8('neutralHue', 300, props.theme);
+    foregroundColor = getColorV8('neutralHue', 800, props.theme);
+  }
+  return css(["border-color:", ";background-color:", ";color:", ";"], borderColor, backgroundColor, foregroundColor);
+};
+const padding = props => {
+  const {
+    space
+  } = props.theme;
+  const paddingVertical = `${space.base * 5}px`;
+  const paddingHorizontal = `${space.base * 10}px`;
+  return `${paddingVertical} ${paddingHorizontal}`;
+};
+const StyledBase = styled.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 => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', colorStyles);
+StyledBase.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledBase };

package/dist/esm/styled/StyledIcon.js

@@ -0,0 +1,25 @@
+/**
+* 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, { Children } from 'react';
+import styled from 'styled-components';
+import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const StyledIcon = styled(_ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  return React__default.cloneElement(Children.only(children), props);
+}).withConfig({
+  displayName: "StyledIcon",
+  componentId: "sc-msklws-0"
+})(["position:absolute;right:", ";left:", ";margin-top:", "px;color:", ";"], props => props.theme.rtl && `${props.theme.space.base * 4}px`, props => !props.theme.rtl && `${props.theme.space.base * 4}px`, props => props.theme.space.base / 2, props => props.hue && getColorV8(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme));
+StyledIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledIcon };

package/dist/esm/styled/StyledNotification.js

@@ -0,0 +1,62 @@
+/**
+* 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 PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { TYPE } from '../types/index.js';
+import { StyledTitle } from './content/StyledTitle.js';
+import { StyledBase } from './StyledBase.js';
+
+const COMPONENT_ID = 'notifications.notification';
+const colorStyles = props => {
+  const {
+    type,
+    theme
+  } = props;
+  const {
+    colors
+  } = theme;
+  const {
+    successHue,
+    dangerHue,
+    warningHue
+  } = colors;
+  let color;
+  switch (type) {
+    case 'success':
+      color = getColorV8(successHue, 600, theme);
+      break;
+    case 'error':
+      color = getColorV8(dangerHue, 600, theme);
+      break;
+    case 'warning':
+      color = getColorV8(warningHue, 700, theme);
+      break;
+    case 'info':
+      color = getColorV8('foreground', 600 , theme);
+      break;
+    default:
+      color = 'inherit';
+      break;
+  }
+  return css(["", "{color:", ";}"], StyledTitle, color);
+};
+const StyledNotification = styled(StyledBase).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '8.76.0'
+}).withConfig({
+  displayName: "StyledNotification",
+  componentId: "sc-uf6jh-0"
+})(["", " ", ";"], colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledNotification.propTypes = {
+  type: PropTypes.oneOf(TYPE)
+};
+StyledNotification.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledNotification };