@zohodesk/svg 1.0.0-beta.37 → 1.0.0-beta.40

package/preprocess/svgThemeColors.js

@@ -0,0 +1,92 @@
+var { svgThemeVariables } = require('./json/svgThemeVariableJson');
+var { ensureDirectoryExistence } = require('../../common/pre_utils');
+let fs = require('fs');
+let path = require('path');
+let baseFolder = 'Appearance';
+let mode = ['default', 'dark'];
+let themes = ['blue', 'green', 'orange', 'red', 'yellow'];
+let themeFiles = [];
+let prefix=`\n\t--zdt_cta_`;
+mode.forEach(mode => {
+  themes.forEach(theme => {
+    let themeFilesString = `../assets/${baseFolder}/${mode}/themes/${theme}/${
+      theme + capitalizeFirstLetter(mode)
+    }CTATheme.module.css`;
+    themeFiles.push(path.join(__dirname, themeFilesString));
+  });
+});
+let files = themeFiles;
+
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+function generate(mode, theme) {
+  let exportVariables = [];
+
+  svgThemeVariables.forEach((element) => {
+    Object.entries(element).map(([key, value]) => {
+        if (mode == 'default') {
+          let svgDefaultColors = value.light;
+          let colorsResult = '';
+          if (theme == 'blue') {
+            colorsResult = [
+              `${prefix}${key}: ${svgDefaultColors[0]}`
+            ];
+          } else if (theme == 'green') {
+            colorsResult = [
+              `${prefix}${key}: ${svgDefaultColors[1]}`
+            ];
+          } else if (theme == 'orange') {
+            colorsResult = [
+              `${prefix}${key}: ${svgDefaultColors[2]}`
+            ];
+          } else if (theme == 'red') {
+            colorsResult = [
+              `${prefix}${key}: ${svgDefaultColors[3]}`
+            ];
+          } else if (theme == 'yellow') {
+            colorsResult = [
+              `${prefix}${key}: ${svgDefaultColors[4]}`
+            ];
+          }
+          exportVariables.push(colorsResult);
+        } else if (mode == 'dark') {
+          let svgDarkColors = value.dark;
+          let colorsResult = '';
+          if (theme == 'blue') {
+            colorsResult = [`${prefix}${key}: ${svgDarkColors[0]}`];
+          } else if (theme == 'green') {
+            colorsResult = [`${prefix}${key}: ${svgDarkColors[1]}`];
+          } else if (theme == 'orange') {
+            colorsResult = [`${prefix}${key}: ${svgDarkColors[2]}`];
+          } else if (theme == 'red') {
+            colorsResult = [`${prefix}${key}: ${svgDarkColors[3]}`];
+          } else if (theme == 'yellow') {
+            colorsResult = [`${prefix}${key}: ${svgDarkColors[4]}`];
+          }
+          exportVariables.push(colorsResult);
+        }
+    })
+  });
+  return exportVariables.join(';');
+}
+
+let arrayIndexCounter = 0;
+mode.forEach(mode => {
+  themes.forEach(theme => {
+    let fileString = files[arrayIndexCounter];
+    // let splitPath = fileString.split(/\\/g);
+    let getMode = mode;
+    let getTheme = theme;
+    ensureDirectoryExistence(fileString);
+    fs.writeFileSync(
+      fileString,
+      `[data-mode='${getMode}'][data-theme='${getTheme}'] {${generate(
+        getMode,
+        getTheme
+      )}\n}`
+    );
+    arrayIndexCounter++;
+  });
+});

package/src/Provider.js

@@ -2,22 +2,22 @@ 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 '@zohodesk/components/lib/Appearance/default/mode/defaultMode.module.css';
-import '@zohodesk/components/lib/Appearance/dark/mode/darkMode.module.css';
+import '@zohodesk/components/assets/Appearance/default/mode/defaultMode.module.css';
+import '@zohodesk/components/assets/Appearance/dark/mode/darkMode.module.css';
 /* default mode & themes */
-import './svg/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
-import './svg/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
-import './svg/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
-import './svg/Appearance/default/themes/red/redDefaultCTATheme.module.css';
-import './svg/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
-import './svg/Appearance/default/mode/defaultEmptyStates.module.css';
+import '../assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/red/redDefaultCTATheme.module.css';
+import '../assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
+import '../assets/Appearance/default/mode/defaultEmptyStates.module.css';
 /* dark mode & themes */
-import './svg/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
-import './svg/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
-import './svg/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
-import './svg/Appearance/dark/themes/red/redDarkCTATheme.module.css';
-import './svg/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
-import './svg/Appearance/dark/mode/darkEmptyStates.module.css';
+import '../assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
+import '../assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
+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';
 
 export default class Provider extends React.Component {
   constructor(props) {

package/src/index.js

@@ -1,7 +1,7 @@
 export { default as React } from 'react';
 export { default as ReactDOM } from 'react-dom';
 export { renderToStaticMarkup } from 'react-dom/server';
-import '@zohodesk/variables/lib/sizeVariables.module.css';
+import '@zohodesk/variables/assets/sizeVariables.module.css';
 
 export { default as _provider } from './Provider';
 export { default as SVG } from './svg/SVG';

package/build/Unusedfiles.json

@@ -1 +0,0 @@
-["/Users/bharathi-zt93/git/library/jsapps/svg/src/svg/SvgLoader.js","/Users/bharathi-zt93/git/library/jsapps/svg/src/svg/images/EmptyContactInfo.svg","/Users/bharathi-zt93/git/library/jsapps/svg/src/svg/images/EmptyFilter.svg","/Users/bharathi-zt93/git/library/jsapps/svg/src/svg/utils.js"]

package/es/Provider.js

@@ -1,140 +0,0 @@
-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 '@zohodesk/components/lib/Appearance/default/mode/defaultMode.module.css';
-import '@zohodesk/components/lib/Appearance/dark/mode/darkMode.module.css';
-/* default mode & themes */
-
-import './svg/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
-import './svg/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
-import './svg/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
-import './svg/Appearance/default/themes/red/redDefaultCTATheme.module.css';
-import './svg/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
-import './svg/Appearance/default/mode/defaultEmptyStates.module.css';
-/* dark mode & themes */
-
-import './svg/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
-import './svg/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
-import './svg/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
-import './svg/Appearance/dark/themes/red/redDarkCTATheme.module.css';
-import './svg/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
-import './svg/Appearance/dark/mode/darkEmptyStates.module.css';
-export default class Provider extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      appearanceName: 'default',
-      themeName: 'blue'
-    };
-    this.switchMode = this.switchMode.bind(this);
-    this.setTheme = this.setTheme.bind(this);
-  }
-
-  switchMode() {
-    let appearanceName = this.state.appearanceName;
-
-    if (appearanceName == 'default') {
-      this.setState({
-        appearanceName: 'dark'
-      });
-    } else {
-      this.setState({
-        appearanceName: 'default'
-      });
-    }
-  }
-
-  setTheme(theme) {
-    this.setState({
-      themeName: theme
-    });
-  }
-
-  render() {
-    let {
-      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: {
-          'data-mode': appearanceName,
-          'data-theme': themeName
-        }
-      }
-    }, /*#__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')
-    }))));
-  }
-
-}

package/es/index.js

@@ -1,9 +0,0 @@
-export { default as React } from 'react';
-export { default as ReactDOM } from 'react-dom';
-export { renderToStaticMarkup } from 'react-dom/server';
-import '@zohodesk/variables/lib/sizeVariables.module.css';
-export { default as _provider } from './Provider';
-export { default as SVG } from './svg/SVG';
-export { default as SVG__emptystate } from './svg/docs/SVG__default.docs';
-export { default as SVG__common } from './svg/docs/SVG__common.docs';
-export { default as SVG__errorstate } from './svg/docs/SVG__errorstate.docs';

package/es/svg/Appearance/dark/mode/darkEmptyStates.module.css

@@ -1,37 +0,0 @@
-[data-mode='dark'] {
-  /* 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: #fff;
-
-  /* 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: #fff;
-
-  /* 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: #fff;
-}

package/es/svg/Appearance/dark/themes/blue/blueDarkCTATheme.module.css

@@ -1,10 +0,0 @@
-[data-mode='dark'][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/es/svg/Appearance/dark/themes/green/greenDarkCTATheme.module.css

@@ -1,10 +0,0 @@
-[data-mode='dark'][data-theme='green'] {
-    --zdt_cta_primary_fill: #45a159;
-    --zdt_cta_primary_stroke: #45a159;
-    --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: #45a159;
-    --zdt_cta_secondary_dark_fill: rgba(69, 161, 89, 0.25);
-    --zdt_cta_secondary_dark_plainfill: #45a159;
-}

package/es/svg/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css

@@ -1,10 +0,0 @@
-[data-mode='dark'][data-theme='orange'] {
-    --zdt_cta_primary_fill: #ff801f;
-    --zdt_cta_primary_stroke: #ff801f;
-    --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: #ff801f;
-    --zdt_cta_secondary_dark_fill: rgba(255, 128, 31, 0.25);
-    --zdt_cta_secondary_dark_plainfill: #ff801f;
-}

package/es/svg/Appearance/dark/themes/red/redDarkCTATheme.module.css

@@ -1,10 +0,0 @@
-[data-mode='dark'][data-theme='red'] {
-    --zdt_cta_primary_fill: #e94f4f;
-    --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: #e94f4f;
-    --zdt_cta_secondary_dark_fill: rgba(233, 79, 79, 0.25);
-    --zdt_cta_secondary_dark_plainfill: #e94f4f;
-}

package/es/svg/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css

@@ -1,10 +0,0 @@
-[data-mode='dark'][data-theme='yellow'] {
-    --zdt_cta_primary_fill: #d79835;
-    --zdt_cta_primary_stroke: #d79835;
-    --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: #d79835;
-    --zdt_cta_secondary_dark_fill: rgba(215, 152, 53, 0.25);
-    --zdt_cta_secondary_dark_plainfill: #d79835;
-}

package/es/svg/Appearance/default/mode/defaultEmptyStates.module.css

@@ -1,37 +0,0 @@
-[data-mode='default'] {
-  /* 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: #3f70b7;
-  --zdt_svg_default_cross: #5cc1a5;
-  --zdt_svg_default_medium_circle: #e56471;
-  --zdt_svg_default_tiny_circle: #5cc1a5;
-  --zdt_svg_default_small_circle: #010101;
-  --zdt_svg_default_circle_fill: #fff;
-
-  /* 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: #e56471;
-  --zdt_svg_dark_tiny_circle: #5cc1a5;
-  --zdt_svg_dark_small_circle: #010101;
-  --zdt_svg_dark_circle_fill: #fff;
-
-  /* danger palette */
-  --zdt_svg_danger_primary_fill: #ff6f00;
-  --zdt_svg_danger_primary_stroke: #010101;
-  --zdt_svg_danger_secondary_fill: rgba(63, 112, 183, 0.25);
-  --zdt_svg_danger_secondary_plainfill: #3f70b7;
-  --zdt_svg_danger_plus: #3f70b7;
-  --zdt_svg_danger_cross: #5cc1a5;
-  --zdt_svg_danger_medium_circle: #e56471;
-  --zdt_svg_danger_tiny_circle: #5cc1a5;
-  --zdt_svg_danger_small_circle: #010101;
-  --zdt_svg_danger_circle_fill: #fff;
-}

package/es/svg/Appearance/default/themes/blue/blueDefaultCTATheme.module.css

@@ -1,10 +0,0 @@
-[data-mode='default'][data-theme='blue'] {
-    --zdt_cta_primary_fill: #0a73eb;
-    --zdt_cta_primary_stroke: #221f1f;
-    --zdt_cta_secondary_fill: rgba(10, 115, 235, 0.25);
-    --zdt_cta_secondary_plainfill: #0a73eb;
-    --zdt_cta_primary_dark_fill: #a6add7;
-    --zdt_cta_primary_dark_stroke: #fff;
-    --zdt_cta_secondary_dark_fill: #3f70b7;
-    --zdt_cta_secondary_dark_plainfill: #3f70b7;
-}

package/es/svg/Appearance/default/themes/green/greenDefaultCTATheme.module.css

@@ -1,10 +0,0 @@
-[data-mode='default'][data-theme='green'] {
-    --zdt_cta_primary_fill: #26a942;
-    --zdt_cta_primary_stroke: #010101;
-    --zdt_cta_secondary_fill: rgba(38, 169, 66, 0.25);
-    --zdt_cta_secondary_plainfill: #26a942;
-    --zdt_cta_primary_dark_fill: #26a942;
-    --zdt_cta_primary_dark_stroke: #fff;
-    --zdt_cta_secondary_dark_fill: rgba(38, 169, 66, 0.25);
-    --zdt_cta_secondary_dark_plainfill: #26a942;
-}

package/es/svg/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css

@@ -1,10 +0,0 @@
-[data-mode='default'][data-theme='orange'] {
-    --zdt_cta_primary_fill: #e57717;
-    --zdt_cta_primary_stroke: #010101;
-    --zdt_cta_secondary_fill: rgba(229, 119, 23, 0.25);
-    --zdt_cta_secondary_plainfill: #e57717;
-    --zdt_cta_primary_dark_fill: #e57717;
-    --zdt_cta_primary_dark_stroke: #fff;
-    --zdt_cta_secondary_dark_fill: rgba(229, 119, 23, 0.25);
-    --zdt_cta_secondary_dark_plainfill: #e57717;
-}

package/es/svg/Appearance/default/themes/red/redDefaultCTATheme.module.css

@@ -1,10 +0,0 @@
-[data-mode='default'][data-theme='red'] {
-    --zdt_cta_primary_fill: #de3535;
-    --zdt_cta_primary_stroke: #010101;
-    --zdt_cta_secondary_fill: rgba(222, 53, 53, 0.25);
-    --zdt_cta_secondary_plainfill: #de3535;
-    --zdt_cta_primary_dark_fill: #de3535;
-    --zdt_cta_primary_dark_stroke: #fff;
-    --zdt_cta_secondary_dark_fill: rgba(222, 53, 53, 0.25);
-    --zdt_cta_secondary_dark_plainfill: #de3535;
-}

package/es/svg/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css

@@ -1,10 +0,0 @@
-[data-mode='default'][data-theme='yellow'] {
-    --zdt_cta_primary_fill: #e8b923;
-    --zdt_cta_primary_stroke: #010101;
-    --zdt_cta_secondary_fill: rgba(232, 185, 35, 0.25);
-    --zdt_cta_secondary_plainfill: #e8b923;
-    --zdt_cta_primary_dark_fill: #e8b923;
-    --zdt_cta_primary_dark_stroke: #fff;
-    --zdt_cta_secondary_dark_fill: rgba(232, 185, 35, 0.25);
-    --zdt_cta_secondary_dark_plainfill: #e8b923;
-}

package/es/svg/EmptyAccounts.js

@@ -1,101 +0,0 @@
-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); }
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import SVG from './SVG';
-export default class EmptyAccounts extends React.Component {
-  render() {
-    return /*#__PURE__*/React.createElement(SVG, _extends({
-      viewBox: "0 0 200 200",
-      name: "accounts"
-    }, this.props), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("style", null, ".EmptyAccounts_svg__cls-7,.EmptyAccounts_svg__cls-9{fill:var(--zd_emptysvg_secondary_fill)}.EmptyAccounts_svg__cls-3,.EmptyAccounts_svg__cls-4,.EmptyAccounts_svg__cls-5,.EmptyAccounts_svg__cls-6,.EmptyAccounts_svg__cls-8{fill:none}.EmptyAccounts_svg__cls-3{stroke-miterlimit:10;stroke:var(--zd_emptysvg_cross)}.EmptyAccounts_svg__cls-8{stroke-miterlimit:10;stroke:var(--zd_emptysvg_tiny_circle)}.EmptyAccounts_svg__cls-4,.EmptyAccounts_svg__cls-5{stroke:var(--zd_emptysvg_plus);stroke-linecap:round;stroke-linejoin:round}.EmptyAccounts_svg__cls-5{stroke:var(--zd_emptysvg_primary_stroke)}.EmptyAccounts_svg__cls-6{stroke:var(--zd_emptysvg_small_circle);stroke-linecap:round;stroke-linejoin:round}")), /*#__PURE__*/React.createElement("path", {
-      d: "M86.51 62.52S133.43 31.67 157.17 41s40 87.37-26.06 122.41S35.22 122.19 35 108.68c-.28-13.07 0-44.23 51.51-46.16z",
-      opacity: 0.05,
-      fill: "var(--zd_emptysvg_primary_fill)"
-    }), /*#__PURE__*/React.createElement("ellipse", {
-      cx: 156.04,
-      cy: 31.69,
-      rx: 3.54,
-      ry: 3.51,
-      strokeMiterlimit: 10,
-      stroke: "var(--zd_emptysvg_medium_circle)",
-      fill: "none"
-    }), /*#__PURE__*/React.createElement("ellipse", {
-      className: "EmptyAccounts_svg__cls-8",
-      cx: 79.62,
-      cy: 29.6,
-      rx: 2.12,
-      ry: 2.1
-    }), /*#__PURE__*/React.createElement("path", {
-      className: "EmptyAccounts_svg__cls-4",
-      d: "M23.28 100.86l-.35 6.16M20 103.76l6.22.35"
-    }), /*#__PURE__*/React.createElement("ellipse", {
-      className: "EmptyAccounts_svg__cls-6",
-      cx: 165.88,
-      cy: 154.09,
-      rx: 2.45,
-      ry: 2.43
-    }), /*#__PURE__*/React.createElement("path", {
-      className: "EmptyAccounts_svg__cls-3",
-      d: "M175.6 117.21l4.15 4.6M175.36 121.57l4.64-4.12"
-    }), /*#__PURE__*/React.createElement("g", {
-      opacity: 0.3
-    }, /*#__PURE__*/React.createElement("ellipse", {
-      className: "EmptyAccounts_svg__cls-7",
-      cx: 70.01,
-      cy: 92.77,
-      rx: 13.53,
-      ry: 13.42
-    }), /*#__PURE__*/React.createElement("path", {
-      className: "EmptyAccounts_svg__cls-7",
-      d: "M128.12 74.12s5.37-7.3 17.62-.47 3.25 28-11.37 26.24c0 0-4.75-.87-6.36-2-.01-.02 4.36-11.67.11-23.77z"
-    }), /*#__PURE__*/React.createElement("ellipse", {
-      className: "EmptyAccounts_svg__cls-7",
-      cx: 104.52,
-      cy: 81.92,
-      rx: 18.72,
-      ry: 18.56
-    })), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("ellipse", {
-      className: "EmptyAccounts_svg__cls-9",
-      cx: 70.01,
-      cy: 92.77,
-      rx: 13.53,
-      ry: 13.42
-    }), /*#__PURE__*/React.createElement("path", {
-      className: "EmptyAccounts_svg__cls-9",
-      d: "M128.12 74.12s5.37-7.3 17.62-.47 3.25 28-11.37 26.24c0 0-4.75-.87-6.36-2-.01-.02 4.36-11.67.11-23.77z"
-    }), /*#__PURE__*/React.createElement("ellipse", {
-      className: "EmptyAccounts_svg__cls-9",
-      cx: 104.52,
-      cy: 81.92,
-      rx: 18.72,
-      ry: 18.56
-    })), /*#__PURE__*/React.createElement("path", {
-      className: "EmptyAccounts_svg__cls-5",
-      d: "M43.12 137.27s26.19 17.89 43.6 1.66a6.4 6.4 0 002-4c.65-6.42 1-24.27-14.68-29.35a17.28 17.28 0 007.88-8.3c2.6-6.49 1.34-16.24-9-18.38-17.24-3.58-19.41 15-13 22.12l3.78 4.56s-18.89 12.48-16.32 23.95c0 0 13.38 12.34 30.06 7.68 0 0 23 28.3 52.82 2.18a7.2 7.2 0 002.43-5.47c-.07-8.11-1.8-29-17-36.76 0 0-13.62 12.11-26.54-3.49s3-32.37 14.56-31 23 5.12 19.49 30.5c0 0 7.75 12.35 20.9 3.5s5.17-20.73 1.65-23.06-13.1-5.77-17.62.47a35.44 35.44 0 01-7.18 35.44 29.18 29.18 0 00-6 10.41c-.88 2.75-1.33 5.66-.39 7.71 2.27 4.95 26.73 11 40.87-2.31a4.65 4.65 0 001.47-3.5c-.06-4.26-1.32-13.89-10.87-18.18 0 0 11.51 20.26 2.12 32.84"
-    }));
-  }
-
-}
-EmptyAccounts.propTypes = {
-  alignHorizontal: PropTypes.bool,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  isRender: PropTypes.bool,
-  size: PropTypes.oneOf(['small', 'large']),
-  palette: PropTypes.oneOf(['default', 'dark'])
-};
-EmptyAccounts.defaultProps = {
-  size: 'large',
-  alignHorizontal: true,
-  isRender: true,
-  className: '',
-  dataId: 'emptyAccounts',
-  palette: 'default'
-};
-
-if (false) {
-  EmptyAccounts.docs = {
-    componentGroup: 'SVG'
-  };
-}