@zohodesk/svg 1.0.0-beta.34 → 1.0.0-beta.38

package/preprocess/svgThemeColors.js

@@ -0,0 +1,90 @@
+var { svgThemeVariables } = require('./json/svgThemeVariableJson');
+let fs = require('fs');
+let path = require('path');
+let baseFolder = 'Appearance';
+let mode = ['default', 'dark'];
+let themes = ['blue', 'green', 'orange', 'red', 'yellow'];
+let themeFiles = [];
+mode.forEach(mode => {
+  themes.forEach(theme => {
+    let themeFilesString = `../src/svg/${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.map(svgVariable => {
+    if (mode == 'default') {
+      let svgDefaultColors = svgVariable[1][1];
+      let colorsResult = '';
+      if (theme == 'blue') {
+        colorsResult = [
+          `\n\t--zdt_cta_${svgVariable[0]}: ${svgDefaultColors[0]}`
+        ];
+      } else if (theme == 'green') {
+        colorsResult = [
+          `\n\t--zdt_cta_${svgVariable[0]}: ${svgDefaultColors[1]}`
+        ];
+      } else if (theme == 'orange') {
+        colorsResult = [
+          `\n\t--zdt_cta_${svgVariable[0]}: ${svgDefaultColors[2]}`
+        ];
+      } else if (theme == 'red') {
+        colorsResult = [
+          `\n\t--zdt_cta_${svgVariable[0]}: ${svgDefaultColors[3]}`
+        ];
+      } else if (theme == 'yellow') {
+        colorsResult = [
+          `\n\t--zdt_cta_${svgVariable[0]}: ${svgDefaultColors[4]}`
+        ];
+      }
+      exportVariables.push(colorsResult);
+    } else if (mode == 'dark') {
+      let svgDarkColors = svgVariable[2][1];
+      let colorsResult = '';
+      if (theme == 'blue') {
+        colorsResult = [`\n\t--zdt_cta_${svgVariable[0]}: ${svgDarkColors[0]}`];
+      } else if (theme == 'green') {
+        colorsResult = [`\n\t--zdt_cta_${svgVariable[0]}: ${svgDarkColors[1]}`];
+      } else if (theme == 'orange') {
+        colorsResult = [`\n\t--zdt_cta_${svgVariable[0]}: ${svgDarkColors[2]}`];
+      } else if (theme == 'red') {
+        colorsResult = [`\n\t--zdt_cta_${svgVariable[0]}: ${svgDarkColors[3]}`];
+      } else if (theme == 'yellow') {
+        colorsResult = [`\n\t--zdt_cta_${svgVariable[0]}: ${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;
+    fs.writeFileSync(
+      fileString,
+      `[data-mode='${getMode}'][data-theme='${getTheme}'] {${generate(
+        getMode,
+        getTheme
+      )}\n}`
+    );
+    arrayIndexCounter++;
+  });
+});
+
+// files.forEach(file => {
+
+// })

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

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

@@ -1,10 +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;
+	--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

@@ -1,10 +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;
+	--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/src/svg/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css

@@ -1,10 +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;
+	--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/src/svg/Appearance/dark/themes/red/redDarkCTATheme.module.css

@@ -1,10 +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;
+	--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/src/svg/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css

@@ -1,10 +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;
+	--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/src/svg/Appearance/default/mode/defaultEmptyStates.module.css

@@ -1,37 +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;
+	/* 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: 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: #e56471;
+	--zdt_svg_dark_tiny_circle: #5cc1a5;
+	--zdt_svg_dark_small_circle: #010101;
+	--zdt_svg_dark_circle_fill: var(--dot_white);
+	
+	/* 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: var(--dot_white);
 }

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

@@ -1,10 +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;
+	--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

@@ -1,10 +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;
+	--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

@@ -1,10 +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;
+	--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

@@ -1,10 +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;
+	--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

@@ -1,10 +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;
+	--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/EmptyError.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SVG from './SVG';
+
+export default class EmptyError extends React.Component {
+  render() {
+    return (
+      <SVG viewBox='0 0 500 500' name='EmptyError' {...this.props}>
+        <defs>
+          <style>
+            {
+              ".EmptyError_svg__cls-1{fill:var(--zd_emptysvg_primary_fill);opacity:.05}.EmptyError_svg__cls-3,.EmptyError_svg__cls-4,.EmptyError_svg__cls-5{fill:none}.EmptyError_svg__cls-3{stroke-miterlimit:10;stroke:var(--zd_emptysvg_tiny_circle)}.EmptyError_svg__cls-5{stroke-miterlimit:10;stroke:var(--zd_emptysvg_cross)}.EmptyError_svg__cls-4{stroke:var(--zd_emptysvg_plus);stroke-linecap:round;stroke-linejoin:round}.EmptyError_svg_fill{fill: #DE3535;opacity: 0.3}.EmptyError_svg_line{fill:none;stroke:var(--zd_emptysvg_primary_stroke);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}"
+            }
+          </style>
+        </defs>
+        <path class="EmptyError_svg__cls-1" d="M217.5,155.3c0,0,113.7-75.3,171.3-52.6s96.9,213.4-63.2,298.9S93.2,301,92.6,268  C92,236.1,92.6,160,217.5,155.3z"></path><path class="EmptyError_svg_line" d="M133.8,379.6c0,0-13.4-217.8,0-222.6c11.4-4.1,189-1.2,240.6-0.3c7.8,0.1,14,6.5,14,14.2V201l-235.8,2.3  l105.1-3.3c5.3-0.3,9.8-0.2,12.8,4.2c15.4,23.3,61.8,95.7,47.1,100.6c-17.5,5.8-114.1,8.3-116.2-2.6c-3.2-17.3,57-96.4,63.5-97.6  s122.2,3.2,123.6,6.6s10.3,168.7,2,173.6s-251,5.9-252.4-1.5s0-218.3,0-218.3"></path><path class="EmptyError_svg_fill" d="M330.7,289.8c-1.9-5.8-33.8-78.7-47.9-85.8s-65.2,83.6-69.2,93.4s17.9,10.6,17.9,10.6s82.7,0.6,91.9-1.8  S332.6,295.6,330.7,289.8z M274.7,249.9c0-1.4,1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5v23c0,1.4-1.1,2.5-2.5,2.5s-2.5-1.1-2.5-2.5V249.9z   M275.4,290.6c0,0-5.8-6.4,1-7c0,0,4.7,0.1,5,2.8S277.2,292.3,275.4,290.6L275.4,290.6z"></path><ellipse class="st1" cx="419.9" cy="378.9" rx="6" ry="5.9" stroke="var(--zd_emptysvg_small_circle)" stroke-linecap="round" stroke-linejoin="round" fill="none"></ellipse><line class="EmptyFrame_svg__cls-3" x1="162.2" y1="412.4" x2="172.3" y2="423.6"></line><line class="EmptyFrame_svg__cls-3" x1="161.6" y1="423" x2="172.9" y2="413"></line><ellipse class="st4" cx="396" cy="80" rx="8.6" ry="8.6" stroke-miterlimit="10" stroke="var(--zd_emptysvg_medium_circle)" fill="none"></ellipse><ellipse class="EmptyFrame_svg__cls-5" cx="210.8" cy="74.9" rx="5.1" ry="5.1"></ellipse><line class="EmptyFrame_svg__cls-4" x1="70.4" y1="274.5" x2="69.6" y2="289.6"></line><line class="EmptyFrame_svg__cls-4" x1="62.4" y1="281.6" x2="77.5" y2="282.5"></line>
+      </SVG>
+    );
+  }
+}
+EmptyError.propTypes = {
+  alignHorizontal: PropTypes.bool,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  isRender: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'large']),
+  palette: PropTypes.oneOf(['dark', 'danger'])
+};
+EmptyError.defaultProps = {
+  size: 'large',
+  alignHorizontal: true,
+  isRender: true,
+  className: '',
+  dataId: 'EmptyError',
+  palette: 'danger'
+};
+
+if (__DOCS__) {
+  EmptyError.docs = {
+    componentGroup: 'SVG'
+  };
+}

package/src/svg/Loader.js

@@ -3,7 +3,21 @@ import PropTypes from 'prop-types';
 import SVG from './SVG';
 import cssStyle from './SVG.module.css';
 
-export default class Loader extends React.Component {
+export default class Loader extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.viewBoxStyle = {
+      animation: "loaderone 2s linear infinite"
+    };
+    this.defsStyle = {
+      animation: "circleAnimation_1 1.5s linear infinite",
+      transformOrigin: "center"
+    };
+    this.circleStyle = {
+      animation: "circleAnimation_2 1.2s linear infinite",
+      transformOrigin: "center"
+    };
+  }
   render() {
     let { dataId } = this.props;
     return (
@@ -13,7 +27,7 @@ export default class Loader extends React.Component {
           name='Loader'
           className={`${cssStyle.loaderWrapper}`}
           dataId={dataId}
-          styleName={{animation: "loaderone 2s linear infinite"}}
+          styleName={this.viewBoxStyle}
         >
           <defs>
             <style>
@@ -32,10 +46,7 @@ export default class Loader extends React.Component {
             cx={20}
             cy={20}
             r={13}
-            style={{
-              animation: "circleAnimation_1 1.5s linear infinite",
-              transformOrigin: "center",
-            }}
+            style={this.defsStyle}
             strokeDasharray={82}
             strokeDashoffset={82}
           />
@@ -47,10 +58,7 @@ export default class Loader extends React.Component {
             cx={20}
             cy={20}
             r={8}
-            style={{
-              animation: "circleAnimation_2 1.2s linear infinite",
-              transformOrigin: "center",
-            }}
+            style={this.circleStyle}
             strokeDasharray={50}
             strokeDashoffset={50}
           />

package/src/svg/docs/SVG__default.docs.js

@@ -56,6 +56,7 @@ import EmptyDepartment from '../EmptyDepartment';
 import ZiaAnamoly from '../ZiaAnamoly';
 import Predictor from '../Predictor';
 import Extractor from '../Extractor';
+import EmptyError from '../EmptyError'
 import Import from '../Import';
 import './SVGdocstyle.module.css';
 
@@ -185,6 +186,8 @@ export default class SVG__default extends React.Component {
       EmptyFrameDefaultPalette: <EmptyFrame />,
       EmptyFrameDarkPalette: <EmptyFrame palette='dark' />,
       EmptyFrameDangerPalette: <EmptyFrame palette="danger" />,
+      EmptyErrorDangerPalette: <EmptyError />,
+      EmptyErrorDarkPalette: <EmptyError palette='dark' />,
       EmptyBusinessHoliday: <EmptyBusinessHoliday />,
       EmptyBusinessHour: <EmptyBusinessHour />,
       EmptyImportHistory: <EmptyImportHistory />,

package/es/svg/deprecated/21_07_2021/EmptyPageNotFound.js

@@ -1,40 +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 EmptyPageNotFound extends React.Component {
-  render() {
-    return /*#__PURE__*/React.createElement(SVG, _extends({
-      viewBox: "0 0 1326.83 1190.04",
-      name: "EmptyPageNotFound"
-    }, this.props), /*#__PURE__*/React.createElement("path", {
-      d: "M741.37 845.77a1.22 1.22 0 01-.46-.09c-301.74-122.77-415.29-104.4-456.12-82.53-16.8 9-27.33 21.86-30.45 37.18-12.22 60.07-211.64 31.1-220.12 29.84a1.2 1.2 0 11.36-2.38c2.05.3 205.63 29.91 217.4-27.94 3.26-16.05 14.22-29.47 31.67-38.82C324.83 739 439 720.33 741.31 843.25c79.58-40 197.42-100.12 209.38-108.67-5.18-1.7-28.07-4.54-57.61.32-37.53 6.19-89.76 25.27-125.43 81a1.2 1.2 0 01-1.37.5c-2.72-.85-272-84.24-321.73-84.24h-.35a1.2 1.2 0 01-.78-2.12c1.79-1.52 13.82-11.74 31.44-26-37.12-10.79-62.57-17.77-63.33-18a1.21 1.21 0 01-.43-2.11c66.79-53 159.59-74.65 211.32-84.74 14.68-7.52 26.73-11.65 34.22-10.52 5.1.78 6.65 1.47 6.68 2.94 0 2.21-3 2.92-23.81 6.8-4.84.9-10.36 1.92-16.46 3.11-41.16 21.35-104 70-143 101.49 75.26 22 194.19 58.4 256.09 86.58C745.22 781.83 856 689.85 952.7 712c.73-.08 3.85-.54 5.11-2.72 1-1.69.67-4.15-.91-7.3-5.11-10.22-117.6-92.81-287.18-111.06a1.21 1.21 0 01-1.08-1.21c0-.94 1.5-95.51 65.84-172.56a1.19 1.19 0 011.6-.22 1.21 1.21 0 01.38 1.57c-.16.28-15.08 27.83-6.39 42.79 3.63 6.25 11 9.5 21.93 9.68l17.91-2.25a1.2 1.2 0 011.14.5 1.24 1.24 0 01.08 1.25c-.06.11-4.58 9.09-4 18.21 20.63-16.92 38.58-28.45 52.82-36.24C853.58 434 873.81 432 874.66 432a1.07 1.07 0 01.47.05c78.74 25.49 148.81 58.76 200.76 86.73 18.73-51.53 54-100.87 126.28-114.7 18.88-3.21 49.08-1.77 78.4 0a1.21 1.21 0 011.13 1.27 1.18 1.18 0 01-1.28 1.13c-29.17-1.74-59.22-3.18-77.82 0-71.27 13.64-106.06 62.48-124.55 113.49 55.94 30.25 90.31 54 91 54.47a1.2 1.2 0 01-.57 2.18c-45.77 4.73-82.18 16.35-110.55 30-.44 2.74-.88 5.47-1.31 8.17-1 6.13-1.93 12.1-2.89 17.83 24.88-6.82 53.84-11.51 77.83-15.41 23.64-3.84 44-7.15 46.72-10.49 2.47-3.08 3.55-6 3.21-8.77a8.7 8.7 0 00-2.3-4.78l-.79-.72a1.21 1.21 0 011.54-1.85 9.5 9.5 0 011 .89l27 25.05a1.18 1.18 0 01.36 1.12 1.2 1.2 0 01-.77.89l-163.1 58.06c-4.16 13.31-9.31 22.08-16.62 24.16-6.1 1.75-10.74 1.27-13.8-1.41-4.8-4.21-3.68-12.18-3.63-12.51a1.2 1.2 0 01.79-1l31.29-11.14c3.19-10.57 5.8-24 8.33-38.8-17.49 5-32.55 11.15-41.76 18.85-23.4 19.57-18.32 25.74-11.28 34.28 3.56 4.32 7.59 9.22 8.16 16.45 1.68 21.42-38 29.61-39.73 29.95a1.21 1.21 0 01-1.39-.85 1.2 1.2 0 01.72-1.45c11-4.25 11.53-22.19 11.56-24.33C947.1 631 688.31 575.59 685.7 575a1.21 1.21 0 01-.69-1.93c29-36.18 56.13-62.92 79.83-82.62-1-7.79 1.72-15.58 3.23-19.16l-15.94 2c-12-.18-20.06-3.84-24.14-10.87-6.17-10.63-1.74-26.33 2.19-36.15-54.23 70.32-58.75 152-59.1 162.29 169.88 18.59 282.81 101.92 288 112.26 2 3.93 2.24 7.16.82 9.6-2.08 3.59-7 3.91-7.19 3.92a.79.79 0 01-.34 0C853 691.49 738.25 790.9 737.11 791.9a1.2 1.2 0 01-1.3.19c-62-28.37-182.69-65.29-258.07-87.25-14.7 11.9-25.69 21.09-30.34 25 55.29 2.71 299.21 77.95 318.72 84 60.18-93.08 167.48-86.75 184.77-81.69 1.42.42 2.93 1 2.93 2.24s0 3.27-106.28 57.68c-52.21 26.73-105.1 53.31-105.63 53.58a1.29 1.29 0 01-.54.12zm210.21-111.93zM688.11 573.1c11.32 2.48 71 15.94 133.08 37.2 92.32 31.65 145.52 64.56 158.13 97.83a1.14 1.14 0 01.07.41c0 .73 0 15-7.31 22.86 11.09-3.23 32.47-11.35 31.34-25.75-.51-6.48-4.12-10.86-7.62-15.11-3.64-4.42-7.08-8.59-6.31-14.49.82-6.27 6.51-13.64 17.9-23.17 9.67-8.08 25.49-14.45 43.75-19.61 1-6.12 2-12.46 3.07-18.93.35-2.15.69-4.32 1-6.5-58.63 29-81.9 66.29-82.24 66.84a1.2 1.2 0 01-2.13-.15c-.08-.19-8.12-18.86-19.24-18.86a17.44 17.44 0 01-12.76-5.85c-5.43-5.73-8.51-14.94-8-24.05l.14-2.65c.73-12.86 1.26-22.15-9.76-24.74-9.39-2.21-10-10.37-10.47-17.57-.25-3.55-.49-6.9-1.66-9.48-1.39-3.07-5.67-1.7-12.54.93-6.05 2.31-12.31 4.71-16.44 1.82-3.82-2.67-7.93-.89-12.27 1-3.28 1.43-6.67 2.92-9.9 2.19-7-1.54-8.8-22.87-9.19-28.95-4.7-1.73-24.83-9.4-28.45-14.47-3.16-4.42.36-12.06 2.44-15.79l-22.42 2.72a1.19 1.19 0 01-1.31-.92 6.33 6.33 0 00-3.55-4.7c-6.08-2.74-17.2 3.17-17.31 3.23a1.21 1.21 0 01-1.75-1.32l2-9.55c-6.11-2.52-10.25-6.5-12.32-11.85a21 21 0 01-.79-2.48c-22.94 19.24-49.15 45.14-77.18 79.91zM414.47 684.34c7.23 2 30.78 8.53 62.66 17.81 36.8-29.81 95.88-75.76 138-99.06-52.13 10.56-137.7 32.14-200.66 81.25zm598.13 3.49c-.13 1.86-.18 6.95 2.92 9.66 2.4 2.1 6.28 2.4 11.54.9 6.07-1.74 10.64-9.36 14.4-20.83zm40.67-52.67c-2.49 14.75-5 27.9-8.07 38.51l159.56-56.79-20.92-19.43v.09c.43 3.42-.82 7-3.72 10.62-3.1 3.88-18.67 6.56-48.22 11.36-24.26 3.94-53.68 8.71-78.63 15.64zm-147.16-68a5.16 5.16 0 015.19 3.16c1.36 3 1.62 6.69 1.87 10.3.49 7 1 13.59 8.62 15.39 13 3.06 12.35 14.26 11.62 27.23l-.15 2.64c-.44 8.46 2.38 17 7.38 22.26a15.1 15.1 0 0011 5.11c10.46 0 18 13.2 20.53 18.34 5.56-8 30.53-40.84 83.54-66.65 1.15-7.11 2.34-14.35 3.63-21.63 3.44-19.5 8.2-41 15.72-62.3-51.82-27.92-121.8-61.17-200.43-86.65-2.36.28-22.39 3.05-53.75 20.23-14.36 7.86-32.54 19.59-53.45 36.85a19.76 19.76 0 00.95 3.36c1.92 4.95 5.92 8.6 11.89 10.84A1.2 1.2 0 01781 507l-1.74 8.14c3.87-1.72 11.81-4.62 17.18-2.2a8.39 8.39 0 014.61 5.3l23.84-2.89a1.2 1.2 0 011.15 1.86c-2 3-6.48 11.44-3.79 15.21 2.91 4.07 21.24 11.4 28.06 13.88a1.21 1.21 0 01.79 1.07c.61 10.88 3.29 26.62 7.35 27.52 2.46.55 5.35-.71 8.42-2 4.54-2 9.68-4.22 14.61-.77 3.08 2.15 8.73 0 14.2-2.1 3.7-1.41 7.43-2.84 10.43-2.84zm171.12-45c-7.41 21-12.11 42.29-15.51 61.56-1.18 6.7-2.29 13.37-3.35 19.93 27.7-13.13 62.84-24.29 106.57-29.17-9.11-6.11-40.77-26.89-87.71-52.29zm-423.41 68.71c-5.62 0-13.35 2.42-22.54 6.62l7.79-1.46c9.27-1.73 17.5-3.25 20.7-4.32-.72-.18-1.82-.41-3.49-.67a16 16 0 00-2.46-.17z",
-      fill: "var(--zd_emptysvg_primary_stroke)"
-    }), /*#__PURE__*/React.createElement("path", {
-      d: "M669.85 589.67s5.81-98.56 65.55-171.79c0 0-39 57.7 18.39 71.23 0 0 11 20.56 16.2 20.21l4.44 15.92s13.8-8.49 18.05-3.89 12.75 3.74 21.57 1.41c0 0-14.15 14.86 29.36 30.42 0 0 2.83 33.61 16.63 31.48s14.5-8.49 24.05-3.89 15.57-5.66 19.1-2.83 1.42 22.29 13.09 24.41 10.61 18 11 39.62 25.11 14.5 30.77 21.58 5.66 23 5.66 23L958 701.39c1.65-6.3-135.91-103.17-288.15-111.72z",
-      fill: "var(--zd_emptysvg_secondary_fill)"
-    }));
-  }
-
-}
-EmptyPageNotFound.propTypes = {
-  alignHorizontal: PropTypes.bool,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  isRender: PropTypes.bool,
-  palette: PropTypes.oneOf(['default', 'dark'])
-};
-EmptyPageNotFound.defaultProps = {
-  alignHorizontal: true,
-  isRender: true,
-  className: '',
-  dataId: 'emptyPageNotFound',
-  palette: 'default'
-};
-
-if (false) {
-  EmptyPageNotFound.docs = {
-    componentGroup: 'SVG'
-  };
-}