@zohodesk/svg 1.0.0-beta.35

package/lib/svg/utils.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.emptyStateDefaultProps = exports.emptyStatePropTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var emptyStatePropTypes = {
+  size: _propTypes["default"].oneOf(['small', 'large']),
+  className: _propTypes["default"].string,
+  alignHorizontal: _propTypes["default"].bool,
+  dataId: _propTypes["default"].string,
+  isRender: _propTypes["default"].bool
+};
+exports.emptyStatePropTypes = emptyStatePropTypes;
+var emptyStateDefaultProps = {
+  size: 'large',
+  alignHorizontal: true,
+  isRender: true,
+  className: ''
+};
+exports.emptyStateDefaultProps = emptyStateDefaultProps;

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@zohodesk/svg",
+  "version": "1.0.0-beta.35",
+  "main": "lib/index",
+  "module": "es/index.js",
+  "jsnext:main": "es/index.js",
+  "private": false,
+  "umdVar": "Library",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vimalceg/fz-dnd.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/vimalceg/fz-dnd/issues"
+  },
+  "homepage": "https://github.com/vimalceg/fz-dnd#readme",
+  "scripts": {
+    "clean": "react-cli clean lib es coverage",
+    "build": "react-cli build:component:cmjs",
+    "build:es": "react-cli build:library:es",
+    "build:dev": "npm run clean && npm run build:es --module:mode=dev -- -w",
+    "prepare": "npm run init && npm run build && npm run build:es",
+    "init": "npm run clean",
+    "lint": "react-cli lint",
+    "docs": "react-cli docs",
+    "postpublish": "react-cli postpublish",
+    "download": "rm package-lock.json && rm -rf node_modules/ && npm install"
+  },
+  "devDependencies": {
+    "@zohodesk/variables": "1.0.0-beta.23",
+    "@zohodesk/components": "1.0.0-alpha-190",
+    "@svgr/cli": "5.5.0"
+  },
+  "peerDependencies": {
+    "@zohodesk/variables": "^1.0.0-beta.23",
+    "@zohodesk/components": "1.0.0-alpha-190"
+  },
+  "tags": [
+    "react",
+    "redux"
+  ],
+  "keywords": [
+    "react",
+    "redux",
+    "router"
+  ]
+}

package/src/Provider.js

@@ -0,0 +1,141 @@
+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 (
+      <AppContainer 
+        customProps={{ExtraProps:{'data-mode':appearanceName,'data-theme':themeName}}}
+      >
+        <Container scroll='vertical'>{this.props.children}</Container>
+        <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'
+          }}
+        >
+          <div>
+            <Switch
+              id='switchMode'
+              text='Light/Night Mode'
+              labelSize='small'
+              onChange={this.switchMode}
+              checked={appearanceName == 'dark'}
+            />
+          </div>
+          <div style={{display: 'flex'}}>
+            <span 
+              title='Blue Theme' 
+              style={themeClass}
+              onClick={() => this.setTheme('blue')}
+            ></span>
+            <span 
+              title='Green Theme' 
+              style={Object.assign({}, themeClass, green)}
+              onClick={() => this.setTheme('green')}
+            ></span>
+            <span 
+              title='Red Theme' 
+              style={Object.assign({}, themeClass, red)}
+              onClick={() => this.setTheme('red')}
+            ></span>
+            <span 
+              title='Orange Theme' 
+              style={Object.assign({}, themeClass, orange)}
+              onClick={() => this.setTheme('orange')}
+            ></span>
+            <span 
+              title='Yellow Theme' 
+              style={Object.assign({}, themeClass, yellow)}
+              onClick={() => this.setTheme('yellow')}
+            ></span>
+          </div>
+        </div>
+      </AppContainer>
+    );
+  }
+}

package/src/index.js

@@ -0,0 +1,10 @@
+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/src/svg/Appearance/dark/mode/darkEmptyStates.module.css

@@ -0,0 +1,37 @@
+[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/src/svg/Appearance/dark/themes/blue/blueDarkCTATheme.module.css

@@ -0,0 +1,10 @@
+[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/src/svg/Appearance/dark/themes/green/greenDarkCTATheme.module.css

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

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

@@ -0,0 +1,10 @@
+[data-mode='dark'][data-theme='red'] {
+    --zdt_cta_primary_fill: #e94f4f;
+    --zdt_cta_primary_stroke: #a81111;
+    --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/src/svg/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css

@@ -0,0 +1,10 @@
+[data-mode='dark'][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/src/svg/Appearance/default/mode/defaultEmptyStates.module.css

@@ -0,0 +1,37 @@
+[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/src/svg/Appearance/default/themes/blue/blueDefaultCTATheme.module.css

@@ -0,0 +1,10 @@
+[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/src/svg/Appearance/default/themes/green/greenDefaultCTATheme.module.css

@@ -0,0 +1,10 @@
+[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/src/svg/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css

@@ -0,0 +1,10 @@
+[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/src/svg/Appearance/default/themes/red/redDefaultCTATheme.module.css

@@ -0,0 +1,10 @@
+[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/src/svg/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css

@@ -0,0 +1,10 @@
+[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/src/svg/EmptyAccounts.js

@@ -0,0 +1,121 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SVG from './SVG';
+
+export default class EmptyAccounts extends React.Component {
+  render() {
+    return (
+      <SVG viewBox="0 0 200 200" name="accounts" {...this.props}>
+        <defs>
+          <style>
+            {
+              ".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}"
+            }
+          </style>
+        </defs>
+        <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)"
+        />
+        <ellipse
+          cx={156.04}
+          cy={31.69}
+          rx={3.54}
+          ry={3.51}
+          strokeMiterlimit={10}
+          stroke="var(--zd_emptysvg_medium_circle)"
+          fill="none"
+        />
+        <ellipse
+          className="EmptyAccounts_svg__cls-8"
+          cx={79.62}
+          cy={29.6}
+          rx={2.12}
+          ry={2.1}
+        />
+        <path
+          className="EmptyAccounts_svg__cls-4"
+          d="M23.28 100.86l-.35 6.16M20 103.76l6.22.35"
+        />
+        <ellipse
+          className="EmptyAccounts_svg__cls-6"
+          cx={165.88}
+          cy={154.09}
+          rx={2.45}
+          ry={2.43}
+        />
+        <path
+          className="EmptyAccounts_svg__cls-3"
+          d="M175.6 117.21l4.15 4.6M175.36 121.57l4.64-4.12"
+        />
+        <g opacity={0.3}>
+          <ellipse
+            className="EmptyAccounts_svg__cls-7"
+            cx={70.01}
+            cy={92.77}
+            rx={13.53}
+            ry={13.42}
+          />
+          <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"
+          />
+          <ellipse
+            className="EmptyAccounts_svg__cls-7"
+            cx={104.52}
+            cy={81.92}
+            rx={18.72}
+            ry={18.56}
+          />
+        </g>
+        <g>
+          <ellipse
+            className="EmptyAccounts_svg__cls-9"
+            cx={70.01}
+            cy={92.77}
+            rx={13.53}
+            ry={13.42}
+          />
+          <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"
+          />
+          <ellipse
+            className="EmptyAccounts_svg__cls-9"
+            cx={104.52}
+            cy={81.92}
+            rx={18.72}
+            ry={18.56}
+          />
+        </g>
+        <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"
+        />
+      </SVG>
+    );
+  }
+}
+
+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 (__DOCS__) {
+  EmptyAccounts.docs = {
+    componentGroup: 'SVG'
+  };
+}

package/src/svg/EmptyActiveCalls.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SVG from './SVG';
+
+export default class EmptyActiveCalls extends React.Component {
+  render() {
+    return (
+      <SVG viewBox='0 0 200 200' name='ActiveCalls' {...this.props}>
+        <defs>
+          <style>
+            {
+              ".EmptyActiveCalls_svg__cls-4,.EmptyActiveCalls_svg__cls-5,.EmptyActiveCalls_svg__cls-6,.EmptyActiveCalls_svg__cls-7,.EmptyActiveCalls_svg__cls-8{fill:none}.EmptyActiveCalls_svg__cls-4{stroke-miterlimit:10;stroke:var(--zd_emptysvg_cross)}.EmptyActiveCalls_svg__cls-7{stroke-miterlimit:10;stroke:var(--zd_emptysvg_tiny_circle)}.EmptyActiveCalls_svg__cls-5,.EmptyActiveCalls_svg__cls-6{stroke:var(--zd_emptysvg_plus);stroke-linecap:round;stroke-linejoin:round}.EmptyActiveCalls_svg__cls-6{stroke:var(--zd_emptysvg_primary_stroke)}.EmptyActiveCalls_svg__cls-8{stroke:var(--zd_emptysvg_small_circle);stroke-linecap:round;stroke-linejoin:round}"
+            }
+          </style>
+        </defs>
+        <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"
+          fill="var(--zd_emptysvg_primary_fill)"
+          opacity={0.05}
+        />
+        <ellipse
+          cx={156.04}
+          cy={31.69}
+          rx={3.54}
+          ry={3.51}
+          strokeMiterlimit={10}
+          stroke="var(--zd_emptysvg_medium_circle)"
+          fill="none"
+        />
+        <ellipse
+          className="EmptyActiveCalls_svg__cls-7"
+          cx={79.62}
+          cy={29.6}
+          rx={2.12}
+          ry={2.1}
+        />
+        <path
+          className="EmptyActiveCalls_svg__cls-5"
+          d="M23.28 100.86l-.35 6.16M20 103.76l6.22.35"
+        />
+        <ellipse
+          className="EmptyActiveCalls_svg__cls-8"
+          cx={165.88}
+          cy={154.09}
+          rx={2.45}
+          ry={2.43}
+        />
+        <path
+          className="EmptyActiveCalls_svg__cls-4"
+          d="M175.6 117.21l4.15 4.6M175.36 121.57l4.64-4.12"
+        />
+        <path
+          d="M79.93 53.67c6.28.38 9.53 13.52 8.06 18.09s-6.15 4.54-10.33-1.48-2-16.09-2-16.09c.53-.82 4.27-.52 4.27-.52zm15.35 57.76s3.88 8.57 9.94 10.57 8.88 3.58 10.12-.5c0 0-2.21-10.29-14.9-12.13 0-.02-2.16-.24-5.16 2.06z"
+          fill="var(--zd_emptysvg_secondary_fill)"
+        />
+        <path
+          className="EmptyActiveCalls_svg__cls-6"
+          d="M64.76 119.92h18.49S67.07 90.31 65.72 83.25s-3.66-20.63 3.86-26 13.67-4.2 15.79 0 6.75 22-4 17c0 0-7.13-4.2-6.55-17a3.4 3.4 0 00-3 2.82c-.61 2.7.49 12.49 6.46 16a7.05 7.05 0 01-4.77 1.67s6.92 21.53 19.17 36.42c0 0 5.39-8.09 13-3.32s11.51 8.81 9 15-12.39 9.25-19 6.65-10.5-9.69-10.5-9.69 12.1 12.72 24.34 3.76c0 0-12.09-2.75-13.84-10 0 0 .57-2.1 1.19-2.1a21.06 21.06 0 0016.49 9.68s-4.48 8-3.5 9.25 8.47 18.38 20.72 13.88 9.31-21.6 20.65-24.75 17.93-2.92 17.93-2.92"
+        />
+      </SVG>
+    );
+  }
+}
+EmptyActiveCalls.propTypes = {
+  alignHorizontal: PropTypes.bool,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  isRender: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'large']),
+  palette: PropTypes.oneOf(['default', 'dark'])
+};
+EmptyActiveCalls.defaultProps = {
+  size: 'large',
+  alignHorizontal: true,
+  isRender: true,
+  className: '',
+  dataId: 'emptyActiveCalls',
+  palette: 'default'
+};
+
+if (__DOCS__) {
+  EmptyActiveCalls.docs = {
+    componentGroup: 'SVG'
+  };
+}