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

package/dist/esm/elements/toaster/Toast.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 { useState, useRef, useEffect, useCallback } from 'react';
+import { useToast } from './useToast.js';
+
+const Toast = _ref => {
+  let {
+    toast,
+    pauseTimers
+  } = _ref;
+  const {
+    removeToast
+  } = useToast();
+  const {
+    id
+  } = toast;
+  const {
+    autoDismiss
+  } = toast.options;
+  const [remainingTime, setRemainingTime] = useState(NaN);
+  const startTimeRef = useRef(Date.now());
+  const previousRemainingTimeRef = useRef(remainingTime);
+  useEffect(() => {
+    if (typeof autoDismiss === 'number') {
+      setRemainingTime(autoDismiss);
+    } else {
+      setRemainingTime(NaN);
+    }
+  }, [autoDismiss]);
+  useEffect(() => {
+    if (pauseTimers && !isNaN(remainingTime)) {
+      previousRemainingTimeRef.current = remainingTime - (Date.now() - startTimeRef.current);
+      setRemainingTime(NaN);
+    } else if (!pauseTimers && isNaN(remainingTime) && !isNaN(previousRemainingTimeRef.current)) {
+      setRemainingTime(previousRemainingTimeRef.current);
+    }
+  }, [pauseTimers, remainingTime]);
+  useEffect(() => {
+    let timeout;
+    if (!isNaN(remainingTime)) {
+      startTimeRef.current = Date.now();
+      timeout = setTimeout(() => {
+        removeToast(id);
+      }, remainingTime);
+    }
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [id, pauseTimers, remainingTime, removeToast]);
+  const close = useCallback(() => {
+    removeToast(toast.id);
+  }, [removeToast, toast.id]);
+  return toast.content({
+    close
+  });
+};
+
+export { Toast };

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

@@ -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 { createContext } from 'react';
+
+const ToastContext = createContext(undefined);
+
+export { ToastContext };

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

@@ -0,0 +1,51 @@
+/**
+* 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, { useReducer, useMemo, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { toasterReducer, getInitialState } from './reducer.js';
+import { ToastContext } from './ToastContext.js';
+import { ToastSlot } from './ToastSlot.js';
+
+const ToastProvider = _ref => {
+  let {
+    limit,
+    zIndex,
+    placementProps = {},
+    children
+  } = _ref;
+  const [state, dispatch] = useReducer(toasterReducer, getInitialState());
+  const contextValue = useMemo(() => ({
+    state,
+    dispatch
+  }), [state, dispatch]);
+  const toastsByPlacement = useCallback(placement => {
+    let matchingToasts = state.toasts.filter(toast => toast.options.placement === placement);
+    if (placement === 'bottom' || placement === 'bottom-start' || placement === 'bottom-end') {
+      matchingToasts = matchingToasts.reverse();
+    }
+    return React__default.createElement(ToastSlot, Object.assign({
+      placement: placement,
+      toasts: matchingToasts,
+      zIndex: zIndex,
+      limit: limit
+    }, placementProps[placement]));
+  }, [limit, state.toasts, zIndex, placementProps]);
+  return React__default.createElement(ToastContext.Provider, {
+    value: contextValue
+  }, toastsByPlacement('top-start'), toastsByPlacement('top'), toastsByPlacement('top-end'), children, toastsByPlacement('bottom-start'), toastsByPlacement('bottom'), toastsByPlacement('bottom-end'));
+};
+ToastProvider.displayName = 'ToastProvider';
+ToastProvider.defaultProps = {
+  limit: 4
+};
+ToastProvider.propTypes = {
+  limit: PropTypes.number,
+  zIndex: PropTypes.number,
+  placementProps: PropTypes.object
+};
+
+export { ToastProvider };

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/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

@@ -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/Alert.js';
+export { Notification } from './elements/Notification.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/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() { 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 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() { 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 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() { 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 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() { 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 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() { 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 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 };