@zohodesk/svg 1.0.0-temp-9 → 1.0.0-temp.42

package/README.md

@@ -2,6 +2,25 @@
 
 This Bundle Contains EmptyState Images.
 
+# 1.0.0-beta.42
+
+- Extensions SVG added
+
+# 1.0.0-beta.39 , # 1.0.0-beta.40, # 1.0.0-beta.41
+
+- Appearance css moved to assets
+# 1.0.0-beta.38
+
+- bg,shadow,text,border based variables removed and renamed.
+
+# 1.0.0-beta.37
+
+- Loader =>  Converted to Pure Component 
+
+# 1.0.0-beta.36
+
+- Night mode SVG CTA primary stroke color value changed
+
 # 1.0.0-beta.35
 
 - EmptyError added

package/assets/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: var(--dot_white);
+	
+	/* dark palette */
+	--zdt_svg_dark_primary_fill: var(--zdt_cta_primary_dark_fill);
+	--zdt_svg_dark_primary_stroke: var(--zdt_cta_primary_dark_stroke);
+	--zdt_svg_dark_secondary_fill: var(--zdt_cta_secondary_dark_fill);
+	--zdt_svg_dark_secondary_plainfill: var(--zdt_cta_secondary_dark_plainfill);
+	--zdt_svg_dark_plus: #479dff;
+	--zdt_svg_dark_cross: #5cc1a5;
+	--zdt_svg_dark_medium_circle: #ff6b6b;
+	--zdt_svg_dark_tiny_circle: #4ac064;
+	--zdt_svg_dark_small_circle: #ff6b6b;
+	--zdt_svg_dark_circle_fill: var(--dot_white);
+	
+	/* danger palette */
+	--zdt_svg_danger_primary_fill: #ff6f00;
+	--zdt_svg_danger_primary_stroke: #479dff;
+	--zdt_svg_danger_secondary_fill: #334b68;
+	--zdt_svg_danger_secondary_plainfill: #334b68;
+	--zdt_svg_danger_plus: #479dff;
+	--zdt_svg_danger_cross: #5cc1a5;
+	--zdt_svg_danger_medium_circle: #ff6b6b;
+	--zdt_svg_danger_tiny_circle: #4ac064;
+	--zdt_svg_danger_small_circle: #ff6b6b;
+	--zdt_svg_danger_circle_fill: var(--dot_white);
+}

package/assets/Appearance/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/assets/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: #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/assets/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: #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/assets/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: #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/assets/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: #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/assets/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: 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/assets/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/assets/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/assets/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/assets/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/assets/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/assets/Appearance/pureDark/mode/pureDarkEmptyStates.module.css

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

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

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

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

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

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

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

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

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

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

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

package/es/Provider.js

@@ -1,25 +1,32 @@
 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';
+/* pure dark mode & themes */
+
+import '../assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css';
+import '../assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css';
+import '../assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css';
+import '../assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css';
+import '../assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css';
+import '../assets/Appearance/pureDark/mode/pureDarkEmptyStates.module.css';
 export default class Provider extends React.Component {
   constructor(props) {
     super(props);
@@ -27,22 +34,13 @@ export default class Provider extends React.Component {
       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'
-      });
-    }
+  setAppearance(mode) {
+    this.setState({
+      appearanceName: mode
+    });
   }
 
   setTheme(theme) {
@@ -78,6 +76,29 @@ export default class Provider extends React.Component {
     let yellow = {
       backgroundColor: '#e8b923'
     };
+    let light = {
+      backgroundColor: '#fff'
+    };
+    let night = {
+      backgroundColor: '#232b38'
+    };
+    let dark = {
+      backgroundColor: '#212121'
+    };
+    let fixedPosition = {
+      position: 'fixed',
+      bottom: '0',
+      backgroundColor: '#272727',
+      padding: '10px',
+      borderRadius: '15px 15px 0 0',
+      minWidth: '100px',
+      textAlign: 'center',
+      boxShadow: '0 0 3px #000',
+      fontSize: '12px',
+      zIndex: '3',
+      display: 'flex',
+      alignItems: 'center'
+    };
     return /*#__PURE__*/React.createElement(AppContainer, {
       customProps: {
         ExtraProps: {
@@ -88,29 +109,40 @@ export default class Provider extends React.Component {
     }, /*#__PURE__*/React.createElement(Container, {
       scroll: "vertical"
     }, this.props.children), /*#__PURE__*/React.createElement("div", {
+      style: Object.assign({}, fixedPosition, {
+        left: '20%',
+        transform: 'translate(-20%)'
+      })
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        color: '#fff'
+      }
+    }, "Appearance:"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex'
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      title: "Light Mode",
+      style: Object.assign({}, themeClass, light),
+      onClick: () => this.setAppearance('default')
+    }), /*#__PURE__*/React.createElement("span", {
+      title: "Night Mode",
+      style: Object.assign({}, themeClass, night),
+      onClick: () => this.setAppearance('dark')
+    }), /*#__PURE__*/React.createElement("span", {
+      title: "Dark Mode",
+      style: Object.assign({}, themeClass, dark),
+      onClick: () => this.setAppearance('pureDark')
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: Object.assign({}, fixedPosition, {
+        left: '80%',
+        transform: 'translate(-80%)'
+      })
+    }, /*#__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'
+        color: '#fff'
       }
-    }, /*#__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", {
+    }, "Themes:"), /*#__PURE__*/React.createElement("div", {
       style: {
         display: 'flex'
       }

package/es/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';
 export { default as SVG__emptystate } from './svg/docs/SVG__default.docs';

package/es/svg/Extensions.js

@@ -0,0 +1,73 @@
+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 Extensions extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement(SVG, _extends({
+      viewBox: "0 0 200 200",
+      name: "extensions"
+    }, this.props), /*#__PURE__*/React.createElement("style", null, ".Extensions_svg__st1{opacity:.1;fill:var(--zd_emptysvg_primary_fill)}.Extensions_svg__st2{fill:var(--zd_emptysvg_plus)}.Extensions_svg__st3{fill:var(--zd_emptysvg_medium_circle)}.Extensions_svg__st4{fill:var(--zd_emptysvg_cross)}.Extensions_svg__st5{fill:var(--zd_emptysvg_secondary_fill)}"), /*#__PURE__*/React.createElement("path", {
+      className: "Extensions_svg__st1",
+      d: "M80.1998 56.2C80.1998 56.2 126.9 25 150.5 34.4C174.1 43.8 190.2 122.7 124.6 158.1C58.9998 193.5 29.1998 116.5 28.8998 102.9C28.6998 89.6 28.8998 58.2 80.1998 56.2Z"
+    }), /*#__PURE__*/React.createElement("path", {
+      className: "Extensions_svg__st2",
+      d: "M14 117.3C14 117.3 13.9 117.3 14 117.3C13.7 117.3 13.5 117 13.5 116.8L13.9 109.3C13.9 109 14.1 108.8 14.4 108.8C14.7 108.8 14.9 109 14.9 109.3L14.5 116.8C14.4 117.1 14.2 117.3 14 117.3Z"
+    }), /*#__PURE__*/React.createElement("path", {
+      className: "Extensions_svg__st2",
+      d: "M17.7999 113.8L10.3999 113.4C10.0999 113.4 9.8999 113.1 9.8999 112.9C9.8999 112.6 10.1999 112.4 10.3999 112.4L17.6999 112.8C17.9999 112.8 18.1999 113.1 18.1999 113.3C18.2999 113.6 18.0999 113.8 17.7999 113.8Z"
+    }), /*#__PURE__*/React.createElement("path", {
+      className: "Extensions_svg__st3",
+      d: "M171.2 20.8C168.6 20.8 166.5 22.9 166.5 25.5C166.5 28.1 168.6 30.2 171.2 30.2C173.8 30.2 175.9 28.1 175.9 25.5C175.9 22.9 173.7 20.8 171.2 20.8ZM171.2 29.3C169.2 29.3 167.5 27.6 167.5 25.5C167.5 23.4 169.2 21.7 171.2 21.7C173.2 21.7 174.9 23.4 174.9 25.5C174.9 27.6 173.2 29.3 171.2 29.3Z"
+    }), /*#__PURE__*/React.createElement("path", {
+      className: "Extensions_svg__st3",
+      d: "M124.4 173.1C122.5 173.1 121 174.6 121 176.5C121 178.4 122.5 179.9 124.4 179.9C126.3 179.9 127.8 178.4 127.8 176.5C127.8 174.7 126.3 173.1 124.4 173.1ZM124.4 179C123.1 179 122 177.9 122 176.5C122 175.1 123.1 174 124.4 174C125.7 174 126.8 175.1 126.8 176.5C126.8 177.9 125.7 179 124.4 179Z"
+    }), /*#__PURE__*/React.createElement("path", {
+      className: "Extensions_svg__st3",
+      d: "M80.8999 20C79.1999 20 77.8999 21.4 77.8999 23C77.8999 24.6 79.1999 26 80.8999 26C82.5999 26 83.8999 24.6 83.8999 23C83.8999 21.4 82.5999 20 80.8999 20ZM80.8999 25.1C79.7999 25.1 78.8999 24.2 78.8999 23.1C78.8999 22 79.7999 21.1 80.8999 21.1C81.9999 21.1 82.8999 22 82.8999 23.1C82.8999 24.2 81.9999 25.1 80.8999 25.1Z"
+    }), /*#__PURE__*/React.createElement("path", {
+      className: "Extensions_svg__st4",
+      d: "M189.8 129.8C189.6 129.6 189.3 129.6 189.1 129.8L186.7 132L184.6 129.6C184.4 129.4 184.1 129.4 183.9 129.6C183.7 129.8 183.7 130.1 183.9 130.3L186 132.7L183.6 134.9C183.4 135.1 183.4 135.4 183.6 135.6C183.7 135.7 183.8 135.8 184 135.8C184.1 135.8 184.2 135.8 184.3 135.7L186.7 133.5L188.8 135.9C188.9 136 189 136.1 189.2 136.1C189.3 136.1 189.4 136.1 189.5 136C189.7 135.8 189.7 135.5 189.5 135.3L187.4 132.9L189.8 130.7C190 130.4 190 130 189.8 129.8Z"
+    }), /*#__PURE__*/React.createElement("path", {
+      className: "Extensions_svg__st1",
+      d: "M115.8 65C115.8 65 78.4999 40.1 59.5999 47.6C40.6999 55.1 27.7999 118.2 80.2999 146.5C132.8 174.8 156.6 113.2 156.8 102.3C157 91.7 156.8 66.5 115.8 65Z"
+    }), /*#__PURE__*/React.createElement("path", {
+      className: "Extensions_svg__st5",
+      d: "M38.5842 59.7596C38.5842 59.7596 63.4293 59.9909 69.3228 56.1749C75.2163 52.3588 78.1053 46.3456 86.6566 46.3456C95.2079 46.3456 115.2 59.8753 121.44 58.2563C127.795 56.6374 156.801 69.8201 157.841 66.9292C158.765 64.1539 147.672 35.7069 144.783 35.4756C142.009 35.2444 52.1046 34.8974 50.8334 36.8633C49.5623 38.9448 38.5842 59.7596 38.5842 59.7596Z"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M114.275 171.35C114.275 171.35 72.5582 169.5 73.0204 170.888C73.4826 172.276 82.6118 176.438 82.8429 167.65C83.074 158.746 80.9939 158.746 83.074 158.746C85.154 158.746 103.528 158.515 101.91 156.433C100.292 154.352 32.1127 159.44 30.4948 153.889C29.2237 149.379 29.3393 70.3983 29.3393 70.3983L168.818 71.5547C168.818 71.5547 178.988 95.0293 155.414 96.8795C131.955 98.7297 133.226 81.384 135.075 81.1527C136.924 80.9214 135.075 99.5391 115.893 98.7297C96.8255 98.0359 98.0966 80.1119 99.7144 80.6901C101.332 81.2683 100.523 98.8453 80.5317 97.8046C60.5401 96.7638 62.0423 79.3025 64.4691 79.0712C66.8958 78.8399 57.3044 98.614 39.8551 96.6482C22.4057 94.6823 23.7924 70.6296 23.7924 67.7387C23.7924 64.8477 166.738 70.514 169.512 67.7387C172.285 64.9634 152.178 31.5439 152.178 31.5439C152.178 31.5439 46.7886 32.3534 45.1708 31.8909C43.553 31.4283 29.4548 59.2971 29.4548 59.2971L26.9125 64.5008L35.9261 64.3852C35.9261 64.3852 36.1572 128.449 36.1572 135.503C36.1572 142.557 42.744 142.21 43.3218 142.325C44.0152 142.441 91.1631 143.944 95.5543 144.175C99.9455 144.407 100.061 150.882 97.5188 151.576C94.9765 152.154 92.0876 148.338 96.1321 146.026C100.177 143.713 105.377 152.501 108.15 154.236C110.924 155.971 160.845 158.861 164.196 154.352C166.97 150.536 165.121 98.3828 165.121 98.3828C165.121 98.3828 160.845 97.5733 160.383 102.083C158.996 114.11 161.423 142.441 158.534 144.291C154.605 146.835 107.572 144.869 107.572 144.869",
+      fill: "none",
+      stroke: "var(--zd_emptysvg_primary_stroke)",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/React.createElement("path", {
+      className: "Extensions_svg__st5",
+      d: "M59.8465 113.763C59.8465 113.763 56.842 134.924 61.811 136.89C66.78 138.856 132.071 137.353 132.071 137.353C132.071 137.353 115.43 115.035 97.7497 117.001C80.0692 118.966 62.6199 97.8046 59.8465 113.763Z"
+    }));
+  }
+
+}
+Extensions.propTypes = {
+  alignHorizontal: PropTypes.bool,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  isRender: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'large']),
+  palette: PropTypes.oneOf(['default', 'dark'])
+};
+Extensions.defaultProps = {
+  size: 'large',
+  alignHorizontal: true,
+  isRender: true,
+  className: '',
+  dataId: 'extensions',
+  palette: 'default'
+};
+
+if (false) {
+  Extensions.docs = {
+    componentGroup: 'SVG'
+  };
+}

package/es/svg/Loader.js

@@ -2,7 +2,22 @@ import React from 'react';
 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
@@ -14,9 +29,7 @@ export default class Loader extends React.Component {
       name: "Loader",
       className: `${cssStyle.loaderWrapper}`,
       dataId: dataId,
-      styleName: {
-        animation: "loaderone 2s linear infinite"
-      }
+      styleName: this.viewBoxStyle
     }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("style", null, "@keyframes circleAnimation_1{to{stroke-dashoffset:-82}}@keyframes circleAnimation_2{to{stroke-dashoffset:-50}}@keyframes loaderone{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}")), /*#__PURE__*/React.createElement("title", null, "loader"), /*#__PURE__*/React.createElement("circle", {
       fill: "none",
       stroke: "#089949",
@@ -26,10 +39,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
     }), /*#__PURE__*/React.createElement("circle", {
@@ -40,10 +50,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
     })));