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

package/preprocess/json/svgAppearanceVariableJson.js

@@ -1,151 +0,0 @@
-/* sample => 
-  {
-    "comment": "comment name",
-    "data": {
-      "--zdt_variable_name": {
-        'lightMode': ['green'],
-        'nightMode': ['red]
-      }
-    }
-  }
-*/
-
-const svgAppearanceVariables = [
-  {
-    "comment": "default palette",
-    "data": {
-        "default_primary_fill": {
-            'light': ['var(--zdt_cta_primary_fill)'],
-            'dark': ['var(--zdt_cta_primary_fill)']
-        },
-        "default_primary_stroke": {
-            'light': ['var(--zdt_cta_primary_stroke)'],
-            'dark': ['var(--zdt_cta_primary_stroke)']
-        },
-        "default_secondary_fill": {
-            'light': ['var(--zdt_cta_secondary_fill)'],
-            'dark': ['var(--zdt_cta_secondary_fill)']
-        },
-        "default_secondary_plainfill": {
-            'light': ['var(--zdt_cta_secondary_plainfill)'],
-            'dark': ['var(--zdt_cta_secondary_plainfill)']
-        },
-        "default_plus": {
-            'light': ['#3f70b7'],
-            'dark': ['#479dff']
-        },
-        "default_cross": {
-            'light': ['#5cc1a5'],
-            'dark': ['#5cc1a5']
-        },
-        "default_medium_circle": {
-            'light': ['#e56471'],
-            'dark': ['#ff6b6b']
-        },
-        "default_tiny_circle": {
-            'light': ['#5cc1a5'],
-            'dark': ['#4ac064']
-        },
-        "default_small_circle": {
-            'light': ['#010101'],
-            'dark': ['#ff6b6b']
-        },
-        "default_circle_fill": {
-            'light': ['var(--dot_white)'],
-            'dark': ['var(--dot_white)']
-        }
-    }
-  },
-  {
-    "comment": "dark palette",
-    "data": {
-        "dark_primary_fill": {
-          'light': ['var(--zdt_cta_primary_dark_fill)'],
-          'dark': ['var(--zdt_cta_primary_dark_fill)']
-        },
-        "dark_primary_stroke": {
-          'light': ['var(--zdt_cta_primary_dark_stroke)'],
-          'dark': ['var(--zdt_cta_primary_dark_stroke)']
-        },
-        "dark_secondary_fill": {
-          'light': ['var(--zdt_cta_secondary_dark_fill)'],
-          'dark': ['var(--zdt_cta_secondary_dark_fill)']
-        },
-        "dark_secondary_plainfill": {
-          'light': ['var(--zdt_cta_secondary_dark_plainfill)'],
-          'dark': ['var(--zdt_cta_secondary_dark_plainfill)']
-        },
-        "dark_plus": {
-          'light': ['#479dff'],
-          'dark': ['#479dff']
-        },
-        "dark_cross": {
-          'light': ['#5cc1a5'],
-          'dark': ['#5cc1a5']
-        },
-        "dark_medium_circle": {
-          'light': ['#e56471'],
-          'dark': ['#ff6b6b']
-        },
-        "dark_tiny_circle": {
-          'light': ['#5cc1a5'],
-          'dark': ['#4ac064']
-        },
-        "dark_small_circle": {
-          'light': ['#010101'],
-          'dark': ['#ff6b6b']
-        },
-        "dark_circle_fill": {
-          'light': ['var(--dot_white)'],
-          'dark': ['var(--dot_white)']
-        }
-    }
-  },
-  {
-    "comment": "danger palette",
-    "data": {
-        "danger_primary_fill": {
-          'light': ['#ff6f00'],
-          'dark': ['#ff6f00']
-        },
-        "danger_primary_stroke": {
-          'light': ['#010101'],
-          'dark': ['#479dff']
-        },
-        "danger_secondary_fill": {
-          'light': ['rgba(63, 112, 183, 0.25)'],
-          'dark': ['#334b68']
-        },
-        "danger_secondary_plainfill": {
-          'light': ['#3f70b7'],
-          'dark': ['#334b68']
-        },
-        "danger_plus": {
-          'light': ['#3f70b7'],
-          'dark': ['#479dff']
-        },
-        "danger_cross": {
-          'light': ['#5cc1a5'],
-          'dark': ['#5cc1a5']
-        },
-        "danger_medium_circle": {
-          'light': ['#e56471'],
-          'dark': ['#ff6b6b']
-        },
-        "danger_tiny_circle": {
-          'light': ['#5cc1a5'],
-          'dark': ['#4ac064']
-        },
-        "danger_small_circle": {
-          'light': ['#010101'],
-          'dark': ['#ff6b6b']
-        },
-        "danger_circle_fill": {
-          'light': ['var(--dot_white)'],
-          'dark': ['var(--dot_white)']
-        }
-    }
-  }
-];
-
-module.exports = { svgAppearanceVariables: svgAppearanceVariables };

package/preprocess/json/svgThemeVariableJson.js

@@ -1,71 +0,0 @@
-/* sample => 
-  {
-    "--zdt_variable_name": {
-    'lightMode': ['blue', 'green', 'orange', 'red', 'yellow'],
-    'nightMode': ['blue', 'green', 'orange', 'red', 'yellow']
-    }
-  }
-*/
-
-const svgThemeVariables = [
-  {
-    "primary_fill": {
-        'light': ['#0a73eb', '#26a942', '#e57717', '#de3535', '#e8b923'],
-        'dark': ['#828994', '#45a159', '#ff801f', '#e94f4f', '#d79835']
-     },
-    "primary_stroke": {
-        'light': ['#221f1f', '#010101', '#010101', '#010101', '#010101'],
-        'dark': ['#479dff', '#45a159', '#ff801f', '#e94f4f', '#d79835']
-     },
-     "secondary_fill": {
-        'light': [
-            'rgba(10, 115, 235, 0.25)',
-            'rgba(38, 169, 66, 0.25)',
-            'rgba(229, 119, 23, 0.25)',
-            'rgba(222, 53, 53, 0.25)',
-            'rgba(232, 185, 35, 0.25)'
-        ],
-        'dark': [
-            '#334b68',
-            'rgba(69, 161, 89, 0.25)',
-            'rgba(255, 128, 31, 0.25)',
-            'rgba(233, 79, 79, 0.25)',
-            'rgba(215, 152, 53, 0.25)'
-        ]
-    },
-    "secondary_plainfill": {
-        'light': ['#0a73eb', '#26a942', '#e57717', '#de3535', '#e8b923'],
-        'dark': ['#334b68', '#45a159', '#ff801f', '#e94f4f', '#d79835']
-    },
-    "primary_dark_fill": {
-        'light': ['#a6add7', '#26a942', '#e57717', '#de3535', '#e8b923'],
-        'dark': ['#828994', '#45a159', '#ff801f', '#e94f4f', '#d79835']
-    },
-    "primary_dark_stroke": {
-        'light': ['#fff', '#fff', '#fff', '#fff', '#fff'],
-        'dark': ['#479dff', '#45a159', '#ff801f', '#e94f4f', '#d79835']
-    },
-    "secondary_dark_fill": {
-        'light': [
-            '#3f70b7',
-            'rgba(38, 169, 66, 0.25)',
-            'rgba(229, 119, 23, 0.25)',
-            'rgba(222, 53, 53, 0.25)',
-            'rgba(232, 185, 35, 0.25)'
-        ],
-        'dark': [
-            '#334b68',
-            'rgba(69, 161, 89, 0.25)',
-            'rgba(255, 128, 31, 0.25)',
-            'rgba(233, 79, 79, 0.25)',
-            'rgba(215, 152, 53, 0.25)'
-        ]
-    },
-    "secondary_dark_plainfill": {
-        'light': ['#3f70b7', '#26a942', '#e57717', '#de3535', '#e8b923'],
-        'dark': ['#334b68', '#45a159', '#ff801f', '#e94f4f', '#d79835']
-    }
-  }
-];
-
-module.exports = { svgThemeVariables: svgThemeVariables };

package/preprocess/svgAppearanceColors.js

@@ -1,63 +0,0 @@
-var { svgAppearanceVariables } = require('./json/svgAppearanceVariableJson');
-var { ensureDirectoryExistence } = require('../../common/pre_utils');
-let fs = require('fs');
-let path = require('path');
-let baseFolder = 'Appearance';
-let mode = ['default', 'dark'];
-let modeFiles = [];
-let prefix=`\n\t--zdt_svg_`;
-mode.forEach(mode => {
-  let modeFilesString = `../assets/${baseFolder}/${mode}/mode/${mode}EmptyStates.module.css`;
-  modeFiles.push(path.join(__dirname, modeFilesString));
-});
-let files = modeFiles;
-
-function generate(mode) {
-  let exportVariables = [];
-  let counter = 0;
-  let newLine = '';
-
-  svgAppearanceVariables.forEach((element) => {
-    let commentName = element.comment;
-    counting = counter++;
-    if (counting != 0) {
-      newLine = `\n\t`;
-    }
-
-    exportVariables.push(commentName ? `${newLine}\n\t/* ${commentName} */` : '');
-
-    Object.entries(element.data).map(([key, value]) => {
-      if (mode == 'default') {
-        let svgDefaultColors = value.light[0];
-
-        colorsResult = [
-          `${prefix}${key}: ${svgDefaultColors};`
-        ];
-        exportVariables.push(colorsResult);
-      } else if (mode == 'dark') {
-        let svgDarkColors = value.dark[0];
-
-        colorsResult = [
-          `${prefix}${key}: ${svgDarkColors};`
-        ];
-        exportVariables.push(colorsResult);
-      }
-    })
-  });
-  return exportVariables.join('');
-}
-
-let arrayIndexCounter = 0;
-mode.forEach(mode => {
-  let fileString = files[arrayIndexCounter];
-  // let splitPath = fileString.split(/\\/g);
-  let getMode = mode;
-  ensureDirectoryExistence(fileString);
-  fs.writeFileSync(
-    fileString,
-    `[data-mode='${getMode}'] {${generate(
-      getMode
-    )}\n}`
-  );
-  arrayIndexCounter++;
-});

package/preprocess/svgThemeColors.js

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

@@ -1,121 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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'
-  };
-}

package/src/svg/EmptyActivity.js

@@ -1,85 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import SVG from './SVG';
-
-export default class EmptyActivity extends React.Component {
-  render() {
-    return (
-      <SVG viewBox='0 0 200 200' name='EmptyActivity' {...this.props}>
-        <defs>
-          <style>
-            {
-              ".EmptyActivity_svg__cls-4,.EmptyActivity_svg__cls-5,.EmptyActivity_svg__cls-6,.EmptyActivity_svg__cls-7,.EmptyActivity_svg__cls-8{fill:none}.EmptyActivity_svg__cls-4,.EmptyActivity_svg__cls-7{stroke-miterlimit:10;stroke:var(--zd_emptysvg_tiny_circle)}.EmptyActivity_svg__cls-7{stroke:var(--zd_emptysvg_cross)}.EmptyActivity_svg__cls-5,.EmptyActivity_svg__cls-6{stroke:var(--zd_emptysvg_plus);stroke-linecap:round;stroke-linejoin:round}.EmptyActivity_svg__cls-6{stroke:var(--zd_emptysvg_primary_stroke)}.EmptyActivity_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="EmptyActivity_svg__cls-4"
-          cx={79.62}
-          cy={29.6}
-          rx={2.12}
-          ry={2.1}
-        />
-        <path
-          className="EmptyActivity_svg__cls-5"
-          d="M23.28 100.86l-.35 6.16M20 103.76l6.22.35"
-        />
-        <ellipse
-          className="EmptyActivity_svg__cls-8"
-          cx={165.88}
-          cy={154.09}
-          rx={2.45}
-          ry={2.43}
-        />
-        <path
-          className="EmptyActivity_svg__cls-7"
-          d="M175.6 117.21l4.15 4.6M175.36 121.57l4.64-4.12"
-        />
-        <path
-          d="M52.32 87.6s-.42-19.95 4.36-22.43 82.26.24 82.26.24 7.43-.07 8.34 6.9a37.49 37.49 0 010 11.36H62.64S53 83.55 52.32 87.6zm89.31 9.77c-.65.6 1.27 3.73 4.3 7s6 5.44 6.66 4.84-1.27-3.73-4.29-7-6.01-5.43-6.67-4.84zM110 108.52c.64.62 3.68-1.48 6.78-4.68s5.1-6.28 4.46-6.89-3.67 1.48-6.78 4.68-5.07 6.28-4.46 6.89z"
-          fill="var(--zd_emptysvg_secondary_fill)"
-        />
-        <path
-          className="EmptyActivity_svg__cls-6"
-          d="M122 123.76s12.07-.32 12.07 1-3.38 2.87-3.54-1.92-.16-14.52-.16-14.52 17.86.32 16.25 16.44-17.86 15.32-24 12.13-10.61-12.54-6.33-23.21c5-12.39 30.24-9.43 33.14 5.09s-7 25.49-22.51 22.64C112.5 138.71 110 125.7 112 117.22a17.58 17.58 0 016-10.89l.35-.35-.37-.55a1.59 1.59 0 00-2.43-.17c-1.28 1.34-3.74 3.7-5.07 3.5-1.86-.28-.29-3-.29-3s8.62-10.24 10.48-9.26-2.35 6-2.35 6l1.56 1.7c11.62-4 22.6.73 22.6.73l1.57-1.69s-4.21-5-2.35-6 10.47 9.26 10.47 9.26 1.57 2.68-.28 3-5.9-4.39-5.9-4.39c-.62-.18-1.31.55-2 1.61l.34.27a18.55 18.55 0 016.8 14.75l-.29 14.66c-.51 7.15-7.41 8.22-7.41 8.22s-74.65.31-81.77 0-8-7.22-8-7.22.56-38.08 0-46.42 9-7.31 9-7.31h83.61a3.73 3.73 0 013.43 2.28c3.69 8.88 2 14.37 1.2 14.4-1.06 0-.06-22.19-.06-22.19 0-1.56 0-3.48.06-5.81.11-8.23-12.84-7-12.84-7l-6.89.15s-2.09 8-6.13 8.17-2.1-16.48.45-17.67 4.34 8.46 2.54 9.2c-.9.38-3.79.4-8.6.31L88 65.45h-5.59s-2.09 8-6.13 8.17-2.08-16.46.46-17.62 4.35 8.46 2.55 9.2c-.9.38-5.32.38-10.13.28h-4.71c-4.81-.09-12.1-.6-13.45 1.16-1.53 2-1 2.19-1.28 5.58v41.65"
-        />
-      </SVG>
-    );
-  }
-}
-EmptyActivity.propTypes = {
-  alignHorizontal: PropTypes.bool,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  isRender: PropTypes.bool,
-  size: PropTypes.oneOf(['small', 'large']),
-  palette: PropTypes.oneOf(['default', 'dark'])
-};
-EmptyActivity.defaultProps = {
-  size: 'large',
-  alignHorizontal: true,
-  isRender: true,
-  className: '',
-  dataId: 'emptyActivity',
-  palette: 'default'
-};
-
-if (__DOCS__) {
-  EmptyActivity.docs = {
-    componentGroup: 'SVG'
-  };
-}