@zohodesk/svg 1.0.0-beta.45 → 1.0.0-beta.48

package/README.md

@@ -2,6 +2,18 @@
 
 This Bundle Contains EmptyState Images.
 
+# 1.0.0-beta.48
+
+- errorstate, emptystate files separated , EmptyCrm dataId changed to EmptyCrm from EmptyFeed
+
+# 1.0.0-beta.47
+
+- PureDark mode implemented via preprocess
+
+# 1.0.0-beta.46
+
+- CustomModule SVG added
+
 # 1.0.0-beta.45
 
 - Delete, GCBot, GCConversation, KBBot, NetworkError, Variable & ReadRecipients SVG added

package/assets/Appearance/pureDark/mode/pureDarkEmptyStates.module.css

@@ -0,0 +1,37 @@
+[data-mode='pureDark'] {
+	/* default palette */
+	--zdt_svg_default_primary_fill: var(--zdt_cta_primary_fill);
+	--zdt_svg_default_primary_stroke: var(--zdt_cta_primary_stroke);
+	--zdt_svg_default_secondary_fill: var(--zdt_cta_secondary_fill);
+	--zdt_svg_default_secondary_plainfill: var(--zdt_cta_secondary_plainfill);
+	--zdt_svg_default_plus: #479dff;
+	--zdt_svg_default_cross: #5cc1a5;
+	--zdt_svg_default_medium_circle: #ff6b6b;
+	--zdt_svg_default_tiny_circle: #4ac064;
+	--zdt_svg_default_small_circle: #ff6b6b;
+	--zdt_svg_default_circle_fill: var(--dot_white);
+	
+	/* dark palette */
+	--zdt_svg_dark_primary_fill: var(--zdt_cta_primary_dark_fill);
+	--zdt_svg_dark_primary_stroke: var(--zdt_cta_primary_dark_stroke);
+	--zdt_svg_dark_secondary_fill: var(--zdt_cta_secondary_dark_fill);
+	--zdt_svg_dark_secondary_plainfill: var(--zdt_cta_secondary_dark_plainfill);
+	--zdt_svg_dark_plus: #479dff;
+	--zdt_svg_dark_cross: #5cc1a5;
+	--zdt_svg_dark_medium_circle: #ff6b6b;
+	--zdt_svg_dark_tiny_circle: #4ac064;
+	--zdt_svg_dark_small_circle: #ff6b6b;
+	--zdt_svg_dark_circle_fill: var(--dot_white);
+	
+	/* danger palette */
+	--zdt_svg_danger_primary_fill: #ff6f00;
+	--zdt_svg_danger_primary_stroke: #479dff;
+	--zdt_svg_danger_secondary_fill: #334b68;
+	--zdt_svg_danger_secondary_plainfill: #334b68;
+	--zdt_svg_danger_plus: #479dff;
+	--zdt_svg_danger_cross: #5cc1a5;
+	--zdt_svg_danger_medium_circle: #ff6b6b;
+	--zdt_svg_danger_tiny_circle: #4ac064;
+	--zdt_svg_danger_small_circle: #ff6b6b;
+	--zdt_svg_danger_circle_fill: var(--dot_white);
+}

package/assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css

@@ -0,0 +1,10 @@
+[data-mode='pureDark'][data-theme='blue'] {
+	--zdt_cta_primary_fill: #828994;
+	--zdt_cta_primary_stroke: #479dff;
+	--zdt_cta_secondary_fill: #334b68;
+	--zdt_cta_secondary_plainfill: #334b68;
+	--zdt_cta_primary_dark_fill: #828994;
+	--zdt_cta_primary_dark_stroke: #479dff;
+	--zdt_cta_secondary_dark_fill: #334b68;
+	--zdt_cta_secondary_dark_plainfill: #334b68
+}

package/assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css

@@ -0,0 +1,10 @@
+[data-mode='pureDark'][data-theme='green'] {
+	--zdt_cta_primary_fill: #45a159;
+	--zdt_cta_primary_stroke: #0e7c1c;
+	--zdt_cta_secondary_fill: rgba(69, 161, 89, 0.25);
+	--zdt_cta_secondary_plainfill: #45a159;
+	--zdt_cta_primary_dark_fill: #45a159;
+	--zdt_cta_primary_dark_stroke: #0e7526;
+	--zdt_cta_secondary_dark_fill: rgba(69, 161, 89, 0.25);
+	--zdt_cta_secondary_dark_plainfill: #45a159
+}

package/assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css

@@ -0,0 +1,10 @@
+[data-mode='pureDark'][data-theme='orange'] {
+	--zdt_cta_primary_fill: #ff801f;
+	--zdt_cta_primary_stroke: #a85100;
+	--zdt_cta_secondary_fill: rgba(255, 128, 31, 0.25);
+	--zdt_cta_secondary_plainfill: #ff801f;
+	--zdt_cta_primary_dark_fill: #ff801f;
+	--zdt_cta_primary_dark_stroke: #a85100;
+	--zdt_cta_secondary_dark_fill: rgba(255, 128, 31, 0.25);
+	--zdt_cta_secondary_dark_plainfill: #ff801f
+}

package/assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css

@@ -0,0 +1,10 @@
+[data-mode='pureDark'][data-theme='red'] {
+	--zdt_cta_primary_fill: #a81111;
+	--zdt_cta_primary_stroke: #e94f4f;
+	--zdt_cta_secondary_fill: rgba(233, 79, 79, 0.25);
+	--zdt_cta_secondary_plainfill: #e94f4f;
+	--zdt_cta_primary_dark_fill: #e94f4f;
+	--zdt_cta_primary_dark_stroke: #a81111;
+	--zdt_cta_secondary_dark_fill: rgba(233, 79, 79, 0.25);
+	--zdt_cta_secondary_dark_plainfill: #e94f4f
+}

package/assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css

@@ -0,0 +1,10 @@
+[data-mode='pureDark'][data-theme='yellow'] {
+	--zdt_cta_primary_fill: #d79835;
+	--zdt_cta_primary_stroke: #9b6808;
+	--zdt_cta_secondary_fill: rgba(215, 152, 53, 0.25);
+	--zdt_cta_secondary_plainfill: #d79835;
+	--zdt_cta_primary_dark_fill: #d79835;
+	--zdt_cta_primary_dark_stroke: #9b6808;
+	--zdt_cta_secondary_dark_fill: rgba(215, 152, 53, 0.25);
+	--zdt_cta_secondary_dark_plainfill: #d79835
+}

package/es/{svg → Loader}/Loader.js

@@ -1,20 +1,21 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import SVG from './SVG';
-import cssStyle from './SVG.module.css';
+import { LoaderDefaultProps } from './props/defaultProps';
+import { LoaderProps } from './props/propTypes';
+import SVG from './../_svg/SVG';
+import cssStyle from './../_svg/SVG.module.css';
 export default class Loader extends React.PureComponent {
   constructor(props) {
     super(props);
     this.viewBoxStyle = {
-      animation: "loaderone 2s linear infinite"
+      animation: 'loaderone 2s linear infinite'
     };
     this.defsStyle = {
-      animation: "circleAnimation_1 1.5s linear infinite",
-      transformOrigin: "center"
+      animation: 'circleAnimation_1 1.5s linear infinite',
+      transformOrigin: 'center'
     };
     this.circleStyle = {
-      animation: "circleAnimation_2 1.2s linear infinite",
-      transformOrigin: "center"
+      animation: 'circleAnimation_2 1.2s linear infinite',
+      transformOrigin: 'center'
     };
   }
 
@@ -30,7 +31,7 @@ export default class Loader extends React.PureComponent {
       className: `${cssStyle.loaderWrapper}`,
       dataId: dataId,
       styleName: this.viewBoxStyle
-    }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("style", null, "@keyframes circleAnimation_1{to{stroke-dashoffset:-82}}@keyframes circleAnimation_2{to{stroke-dashoffset:-50}}@keyframes loaderone{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}")), /*#__PURE__*/React.createElement("title", null, "loader"), /*#__PURE__*/React.createElement("circle", {
+    }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("style", null, '@keyframes circleAnimation_1{to{stroke-dashoffset:-82}}@keyframes circleAnimation_2{to{stroke-dashoffset:-50}}@keyframes loaderone{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}')), /*#__PURE__*/React.createElement("title", null, 'loader'), /*#__PURE__*/React.createElement("circle", {
       fill: "none",
       stroke: "#089949",
       strokeWidth: 2,
@@ -57,12 +58,8 @@ export default class Loader extends React.PureComponent {
   }
 
 }
-Loader.propTypes = {
-  dataId: PropTypes.string
-};
-Loader.defaultProps = {
-  dataId: 'loader'
-};
+Loader.propTypes = LoaderProps;
+Loader.defaultProps = LoaderDefaultProps;
 
 if (false) {
   Loader.docs = {

package/es/Loader/props/defaultProps.js

@@ -0,0 +1,3 @@
+export const LoaderDefaultProps = {
+  dataId: 'loader'
+};

package/es/Loader/props/propTypes.js

@@ -0,0 +1,4 @@
+import PropTypes from 'prop-types';
+export const LoaderProps = {
+  dataId: PropTypes.string
+};

package/es/Provider.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import AppContainer from '@zohodesk/components/lib/AppContainer/AppContainer';
 import { Container } from '@zohodesk/components/lib/Layout';
-import Switch from '@zohodesk/components/lib/Switch/Switch';
+import ThemeTool from '../../common/lib/ThemeTool/ThemeTool';
 import '@zohodesk/components/assets/Appearance/default/mode/defaultMode.module.css';
 import '@zohodesk/components/assets/Appearance/dark/mode/darkMode.module.css';
 /* default mode & themes */
@@ -20,6 +20,14 @@ import '../assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
 import '../assets/Appearance/dark/themes/red/redDarkCTATheme.module.css';
 import '../assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
 import '../assets/Appearance/dark/mode/darkEmptyStates.module.css';
+/* pure dark mode & themes */
+
+import '../assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css';
+import '../assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css';
+import '../assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css';
+import '../assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css';
+import '../assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css';
+import '../assets/Appearance/pureDark/mode/pureDarkEmptyStates.module.css';
 export default class Provider extends React.Component {
   constructor(props) {
     super(props);
@@ -27,22 +35,14 @@ export default class Provider extends React.Component {
       appearanceName: 'default',
       themeName: 'blue'
     };
-    this.switchMode = this.switchMode.bind(this);
     this.setTheme = this.setTheme.bind(this);
+    this.setAppearance = this.setAppearance.bind(this);
   }
 
-  switchMode() {
-    let appearanceName = this.state.appearanceName;
-
-    if (appearanceName == 'default') {
-      this.setState({
-        appearanceName: 'dark'
-      });
-    } else {
-      this.setState({
-        appearanceName: 'default'
-      });
-    }
+  setAppearance(mode) {
+    this.setState({
+      appearanceName: mode
+    });
   }
 
   setTheme(theme) {
@@ -56,28 +56,6 @@ export default class Provider extends React.Component {
       appearanceName,
       themeName
     } = this.state;
-    let themeClass = {
-      width: '20px',
-      height: '20px',
-      borderRadius: '3px',
-      display: 'flex',
-      border: '1px solid #ccc',
-      margin: '0 5px',
-      cursor: 'pointer',
-      backgroundColor: '#0a73eb'
-    };
-    let green = {
-      backgroundColor: '#26a942'
-    };
-    let red = {
-      backgroundColor: '#de3535'
-    };
-    let orange = {
-      backgroundColor: '#e57717'
-    };
-    let yellow = {
-      backgroundColor: '#e8b923'
-    };
     return /*#__PURE__*/React.createElement(AppContainer, {
       customProps: {
         ExtraProps: {
@@ -87,54 +65,10 @@ export default class Provider extends React.Component {
       }
     }, /*#__PURE__*/React.createElement(Container, {
       scroll: "vertical"
-    }, this.props.children), /*#__PURE__*/React.createElement("div", {
-      style: {
-        position: 'fixed',
-        bottom: '0',
-        backgroundColor: '#272727',
-        padding: '10px',
-        borderRadius: '15px 15px 0 0',
-        minWidth: '100px',
-        textAlign: 'center',
-        left: '50%',
-        transform: 'translate(-50%)',
-        boxShadow: '0 0 3px #000',
-        fontSize: '12px',
-        zIndex: '3',
-        display: 'flex',
-        alignItems: 'center'
-      }
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Switch, {
-      id: "switchMode",
-      text: "Light/Night Mode",
-      labelSize: "small",
-      onChange: this.switchMode,
-      checked: appearanceName == 'dark'
-    })), /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: 'flex'
-      }
-    }, /*#__PURE__*/React.createElement("span", {
-      title: "Blue Theme",
-      style: themeClass,
-      onClick: () => this.setTheme('blue')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Green Theme",
-      style: Object.assign({}, themeClass, green),
-      onClick: () => this.setTheme('green')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Red Theme",
-      style: Object.assign({}, themeClass, red),
-      onClick: () => this.setTheme('red')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Orange Theme",
-      style: Object.assign({}, themeClass, orange),
-      onClick: () => this.setTheme('orange')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Yellow Theme",
-      style: Object.assign({}, themeClass, yellow),
-      onClick: () => this.setTheme('yellow')
-    }))));
+    }, this.props.children), /*#__PURE__*/React.createElement(ThemeTool, {
+      onThemeChange: this.setTheme,
+      onAppearanceChange: this.setAppearance
+    }));
   }
 
 }

package/es/{svg → _svg}/SVG.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { SvgProps } from './props/propTypes';
+import { SvgDefaultProps } from './props/defaultProps';
 import style from './SVG.module.css';
-import styles from './EmptyStateVariables.module.css';
+import styles from './../css/EmptyStateVariables.module.css';
 export default class SVG extends React.Component {
   render() {
     let {
@@ -45,31 +46,8 @@ export default class SVG extends React.Component {
   }
 
 }
-SVG.propTypes = {
-  alignHorizontal: PropTypes.bool,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  isFluid: PropTypes.bool,
-  isRender: PropTypes.bool,
-  isSymbol: PropTypes.bool,
-  name: PropTypes.string,
-  size: PropTypes.oneOf(['small', 'large']),
-  viewBox: PropTypes.string,
-  palette: PropTypes.oneOf(['default', 'dark']),
-  styleName: PropTypes.node
-};
-SVG.defaultProps = {
-  alignHorizontal: true,
-  isRender: true,
-  className: '',
-  dataId: 'SVG',
-  name: '',
-  viewBox: '',
-  isSymbol: false,
-  isFluid: false,
-  palette: 'default'
-};
+SVG.propTypes = SvgProps;
+SVG.defaultProps = SvgDefaultProps;
 
 if (false) {
   SVG.docs = {

package/es/{svg → _svg}/SvgLoader.js

@@ -1,9 +1,9 @@
-function _extends() { _extends = Object.assign || 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); }
+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); }
 
 import React, { useEffect, useState } from 'react';
 export default function SvgLoader(props) {
   let uiProps = {};
-  Object.keys(props).filter(prop => prop != "imageUrl").map(prop => {
+  Object.keys(props).filter(prop => prop != 'imageUrl').map(prop => {
     uiProps[prop] = props[prop];
   });
 
@@ -16,7 +16,7 @@ export default function SvgLoader(props) {
 export function StaticSvg(props) {
   let uiProps = {},
       [image, setImage] = useState(null);
-  Object.keys(props).filter(prop => prop != "getImage").map(prop => {
+  Object.keys(props).filter(prop => prop != 'getImage').map(prop => {
     uiProps[prop] = props[prop];
   });
   useEffect(() => {

package/es/_svg/props/defaultProps.js

@@ -0,0 +1,11 @@
+export const SvgDefaultProps = {
+  alignHorizontal: true,
+  isRender: true,
+  className: '',
+  dataId: 'SVG',
+  name: '',
+  viewBox: '',
+  isSymbol: false,
+  isFluid: false,
+  palette: 'default'
+};

package/es/_svg/props/propTypes.js

@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+export const SvgProps = {
+  alignHorizontal: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  isFluid: PropTypes.bool,
+  isRender: PropTypes.bool,
+  isSymbol: PropTypes.bool,
+  name: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'large']),
+  viewBox: PropTypes.string,
+  palette: PropTypes.oneOf(['default', 'dark']),
+  styleName: PropTypes.node
+};

package/es/docs/Emptystate__version1.docs.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import EmptyCustomDomain from '../emptystate/version1/EmptyCustomDomain';
+import style from './SVGdocstyle.module.css';
+export default class Emptystate__version1 extends React.Component {
+  render() {
+    let allSvg = {
+      EmptyCustomDomain: /*#__PURE__*/React.createElement(EmptyCustomDomain, null)
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.parent
+    }, Object.keys(allSvg).map(item => {
+      let filterDarkPalettes = item.endsWith('DarkPalette');
+      return /*#__PURE__*/React.createElement("div", {
+        className: filterDarkPalettes ? style.darkPalette : style.defaultPalette
+      }, /*#__PURE__*/React.createElement("div", {
+        className: style.box
+      }, allSvg[item]), /*#__PURE__*/React.createElement("div", {
+        className: style.textStyle
+      }, item));
+    }));
+  }
+
+}
+
+if (false) {
+  Emptystate__version1.docs = {
+    componentGroup: 'Emptystate'
+  };
+}

package/es/docs/Emptystate__version2.docs.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import EmptyBusinessHoliday from '../emptystate/version2/EmptyBusinessHoliday';
+import EmptyBusinessHour from '../emptystate/version2/EmptyBusinessHour';
+import EmptyImportHistory from '../emptystate/version2/EmptyImportHistory';
+import EmptyRecycleBin from '../emptystate/version2/EmptyRecycleBin';
+import EmptyRoles from '../emptystate/version2/EmptyRoles';
+import EmptyNetwork from '../emptystate/version2/EmptyNetwork';
+import FailureLog from '../emptystate/version2/FailureLog';
+import EmptyFromAddress from '../emptystate/version2/EmptyFromAddress';
+import EmptyWebhook from '../emptystate/version2/EmptyWebhook';
+import style from './SVGdocstyle.module.css';
+export default class Emptystate__version2 extends React.Component {
+  render() {
+    let allSvg = {
+      EmptyBusinessHoliday: /*#__PURE__*/React.createElement(EmptyBusinessHoliday, null),
+      EmptyBusinessHour: /*#__PURE__*/React.createElement(EmptyBusinessHour, null),
+      EmptyImportHistory: /*#__PURE__*/React.createElement(EmptyImportHistory, null),
+      EmptyRecycleBin: /*#__PURE__*/React.createElement(EmptyRecycleBin, null),
+      EmptyRoles: /*#__PURE__*/React.createElement(EmptyRoles, null),
+      EmptyNetwork: /*#__PURE__*/React.createElement(EmptyNetwork, null),
+      FailureLog: /*#__PURE__*/React.createElement(FailureLog, null),
+      EmptyFromAddress: /*#__PURE__*/React.createElement(EmptyFromAddress, null),
+      EmptyWebhook: /*#__PURE__*/React.createElement(EmptyWebhook, null)
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.parent
+    }, Object.keys(allSvg).map(item => {
+      let filterDarkPalettes = item.endsWith('DarkPalette');
+      return /*#__PURE__*/React.createElement("div", {
+        className: filterDarkPalettes ? style.darkPalette : style.defaultPalette
+      }, /*#__PURE__*/React.createElement("div", {
+        className: style.box
+      }, allSvg[item]), /*#__PURE__*/React.createElement("div", {
+        className: style.textStyle
+      }, item));
+    }));
+  }
+
+}
+
+if (false) {
+  Emptystate__version2.docs = {
+    componentGroup: 'Emptystate'
+  };
+}

package/es/docs/Emptystate__version3.docs.js

@@ -0,0 +1,148 @@
+import React from 'react';
+import EmptyActivity from '../emptystate/version3/EmptyActivity';
+import EmptyAccounts from '../emptystate/version3/EmptyAccounts';
+import EmptyAgent from '../emptystate/version3/EmptyAgent';
+import EmptyArchived from '../emptystate/version3/EmptyArchived';
+import EmptyBlueprint from '../emptystate/version3/EmptyBlueprint';
+import EmptyFrame from '../emptystate/version3/EmptyFrame';
+import EmptyContact from '../emptystate/version3/EmptyContact';
+import EmptyDashboard from '../emptystate/version3/EmptyDashboard';
+import EmptyInvoice from '../emptystate/version3/EmptyInvoice';
+import EmptyProducts from '../emptystate/version3/EmptyProducts';
+import EmptyReports from '../emptystate/version3/EmptyReports';
+import EmptySearch from '../emptystate/version3/EmptySearch';
+import EmptyTag from '../emptystate/version3/EmptyTag';
+import EmptyTask from '../emptystate/version3/EmptyTask';
+import EmptyTicket from '../emptystate/version3/EmptyTicket';
+import EmptyAttach from '../emptystate/version3/EmptyAttach';
+import EmptyHappiness from '../emptystate/version3/EmptyHappiness';
+import EmptyConversation from '../emptystate/version3/EmptyConversation';
+import EmptyNotification from '../emptystate/version3/EmptyNotification';
+import EmptyTimeEntry from '../emptystate/version3/EmptyTimeEntry';
+import EmptyTeams from '../emptystate/version3/EmptyTeams';
+import EmptyTopic from '../emptystate/version3/EmptyTopic';
+import EmptyActiveCalls from '../emptystate/version3/EmptyActiveCalls';
+import EmptyCallHistory from '../emptystate/version3/EmptyCallHistory';
+import EmptyHistory from '../emptystate/version3/EmptyHistory';
+import EmptyTemplate from '../emptystate/version3/EmptyTemplate';
+import EmptySkills from '../emptystate/version3/EmptySkills';
+import EmptySnippet from '../emptystate/version3/EmptySnippet';
+import EmptyCrm from '../emptystate/version3/EmptyCrm';
+import EmptyFollowers from '../emptystate/version3/EmptyFollowers';
+import EmptyFeed from '../emptystate/version3/EmptyFeed';
+import EmptySchedule from '../emptystate/version3/EmptySchedule';
+import EmptyColumn from '../emptystate/version3/EmptyColumn';
+import EmptyApproval from '../emptystate/version3/EmptyApproval';
+import EmptyCollision from '../emptystate/version3/EmptyCollision';
+import EmptyCrmNotes from '../emptystate/version3/EmptyCrmNotes';
+import EmptyCrmPotential from '../emptystate/version3/EmptyCrmPotential';
+import EmptyTimeline from '../emptystate/version3/EmptyTimeline';
+import EmptyReply from '../emptystate/version3/EmptyReply';
+import EmptyContract from '../emptystate/version3/EmptyContract';
+import EmptySla from '../emptystate/version3/EmptySla';
+import EmptyAgentQueue from '../emptystate/version3/EmptyAgentQueue';
+import EmptyDepartment from '../emptystate/version3/EmptyDepartment';
+import ZiaAnamoly from '../emptystate/version3/ZiaAnamoly';
+import Predictor from '../emptystate/version3/Predictor';
+import Extractor from '../emptystate/version3/Extractor';
+import EmptyError from '../emptystate/version3/EmptyError';
+import Import from '../emptystate/version3/Import';
+import Export from '../emptystate/version3/Export';
+import Extensions from '../emptystate/version3/Extensions';
+import Multilingual from '../emptystate/version3/Multilingual';
+import EmptyDelete from '../emptystate/version3/EmptyDelete';
+import GCBot from '../emptystate/version3/GCBot';
+import GCConversation from '../emptystate/version3/GCConversation';
+import KBBot from '../emptystate/version3/KBBot';
+import NetworkError from '../emptystate/version3/NetworkError';
+import Variable from '../emptystate/version3/Variable';
+import ReadRecipients from '../emptystate/version3/ReadRecipients';
+import CustomModule from '../emptystate/version3/CustomModule';
+import style from './SVGdocstyle.module.css';
+export default class Emptystate__version3 extends React.Component {
+  render() {
+    let allSvg = {
+      EmptyAccounts: /*#__PURE__*/React.createElement(EmptyAccounts, null),
+      EmptyActiveCalls: /*#__PURE__*/React.createElement(EmptyActiveCalls, null),
+      EmptyActivity: /*#__PURE__*/React.createElement(EmptyActivity, null),
+      EmptyAgent: /*#__PURE__*/React.createElement(EmptyAgent, null),
+      EmptyApproval: /*#__PURE__*/React.createElement(EmptyApproval, null),
+      EmptyArchived: /*#__PURE__*/React.createElement(EmptyArchived, null),
+      EmptyAttach: /*#__PURE__*/React.createElement(EmptyAttach, null),
+      EmptyCallHistory: /*#__PURE__*/React.createElement(EmptyCallHistory, null),
+      EmptyCollision: /*#__PURE__*/React.createElement(EmptyCollision, null),
+      EmptyColumn: /*#__PURE__*/React.createElement(EmptyColumn, null),
+      EmptyContact: /*#__PURE__*/React.createElement(EmptyContact, null),
+      EmptyConversation: /*#__PURE__*/React.createElement(EmptyConversation, null),
+      EmptyCrm: /*#__PURE__*/React.createElement(EmptyCrm, null),
+      EmptyCrmNotes: /*#__PURE__*/React.createElement(EmptyCrmNotes, null),
+      EmptyCrmPotential: /*#__PURE__*/React.createElement(EmptyCrmPotential, null),
+      EmptyDashboard: /*#__PURE__*/React.createElement(EmptyDashboard, null),
+      EmptyInvoice: /*#__PURE__*/React.createElement(EmptyInvoice, null),
+      EmptyProducts: /*#__PURE__*/React.createElement(EmptyProducts, null),
+      EmptyReports: /*#__PURE__*/React.createElement(EmptyReports, null),
+      EmptySearch: /*#__PURE__*/React.createElement(EmptySearch, null),
+      EmptyTag: /*#__PURE__*/React.createElement(EmptyTag, null),
+      EmptyTask: /*#__PURE__*/React.createElement(EmptyTask, null),
+      EmptyTicket: /*#__PURE__*/React.createElement(EmptyTicket, null),
+      EmptyHappiness: /*#__PURE__*/React.createElement(EmptyHappiness, null),
+      EmptyNotification: /*#__PURE__*/React.createElement(EmptyNotification, null),
+      EmptyTimeEntry: /*#__PURE__*/React.createElement(EmptyTimeEntry, null),
+      EmptyTeams: /*#__PURE__*/React.createElement(EmptyTeams, null),
+      EmptyTopic: /*#__PURE__*/React.createElement(EmptyTopic, null),
+      EmptySnippet: /*#__PURE__*/React.createElement(EmptySnippet, null),
+      EmptyFollowers: /*#__PURE__*/React.createElement(EmptyFollowers, null),
+      EmptyFeed: /*#__PURE__*/React.createElement(EmptyFeed, null),
+      EmptySchedule: /*#__PURE__*/React.createElement(EmptySchedule, null),
+      EmptyHistory: /*#__PURE__*/React.createElement(EmptyHistory, null),
+      EmptyTimeline: /*#__PURE__*/React.createElement(EmptyTimeline, null),
+      EmptyTemplate: /*#__PURE__*/React.createElement(EmptyTemplate, null),
+      EmptyBlueprint: /*#__PURE__*/React.createElement(EmptyBlueprint, null),
+      EmptyContract: /*#__PURE__*/React.createElement(EmptyContract, null),
+      EmptySla: /*#__PURE__*/React.createElement(EmptySla, null),
+      EmptyReply: /*#__PURE__*/React.createElement(EmptyReply, null),
+      EmptyAgentQueue: /*#__PURE__*/React.createElement(EmptyAgentQueue, null),
+      EmptySkills: /*#__PURE__*/React.createElement(EmptySkills, null),
+      EmptyDepartment: /*#__PURE__*/React.createElement(EmptyDepartment, null),
+      ZiaAnamoly: /*#__PURE__*/React.createElement(ZiaAnamoly, null),
+      Predictor: /*#__PURE__*/React.createElement(Predictor, null),
+      Extractor: /*#__PURE__*/React.createElement(Extractor, null),
+      Import: /*#__PURE__*/React.createElement(Import, null),
+      Export: /*#__PURE__*/React.createElement(Export, null),
+      Extensions: /*#__PURE__*/React.createElement(Extensions, null),
+      Multilingual: /*#__PURE__*/React.createElement(Multilingual, null),
+      EmptyDelete: /*#__PURE__*/React.createElement(EmptyDelete, null),
+      GCBot: /*#__PURE__*/React.createElement(GCBot, null),
+      GCConversation: /*#__PURE__*/React.createElement(GCConversation, null),
+      KBBot: /*#__PURE__*/React.createElement(KBBot, null),
+      NetworkError: /*#__PURE__*/React.createElement(NetworkError, null),
+      Variable: /*#__PURE__*/React.createElement(Variable, null),
+      ReadRecipients: /*#__PURE__*/React.createElement(ReadRecipients, null),
+      CustomModule: /*#__PURE__*/React.createElement(CustomModule, null),
+      EmptyFrame: /*#__PURE__*/React.createElement(EmptyFrame, null),
+      EmptyFrameDangerPalette: /*#__PURE__*/React.createElement(EmptyFrame, {
+        palette: "danger"
+      }),
+      EmptyError: /*#__PURE__*/React.createElement(EmptyError, null)
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.parent
+    }, Object.keys(allSvg).map(item => {
+      let filterDarkPalettes = item.endsWith('DarkPalette');
+      return /*#__PURE__*/React.createElement("div", {
+        className: filterDarkPalettes ? style.darkPalette : style.defaultPalette
+      }, /*#__PURE__*/React.createElement("div", {
+        className: style.box
+      }, allSvg[item]), /*#__PURE__*/React.createElement("div", {
+        className: style.textStyle
+      }, item));
+    }));
+  }
+
+}
+
+if (false) {
+  Emptystate__version3.docs = {
+    componentGroup: 'Emptystate'
+  };
+}