@zohodesk/svg 1.0.0-beta.5 → 1.0.0-beta.51

package/es/errorstate/version3/ErrorWillBeRightBack.js

@@ -0,0 +1,106 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 { ErrorStateProps } from './../props/propTypes';
+import { ErrorStateDefaultProps } from './../props/defaultProps';
+import SVG from './../../SVG/SVG';
+export default class WillBeRightBack extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement(SVG, _extends({
+      viewBox: "0 0 695.38 500",
+      name: "WillBeRightBack"
+    }, this.props), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("style", null, '.ErrorWillBeRightBack_svg__cls-1,.ErrorWillBeRightBack_svg__cls-2{fill:var(--zd_emptysvg_primary_fill)}.ErrorWillBeRightBack_svg__cls-1{opacity:.05}.ErrorWillBeRightBack_svg__cls-2{opacity:.2}.ErrorWillBeRightBack_svg__cls-10,.ErrorWillBeRightBack_svg__cls-8{fill:none;stroke-linecap:round;stroke-linejoin:round}.ErrorWillBeRightBack_svg__cls-10{stroke:var(--zd_emptysvg_cross)}.ErrorWillBeRightBack_svg__cls-8{stroke:var(--zd_emptysvg_plus)}')), /*#__PURE__*/React.createElement("path", {
+      className: "ErrorWillBeRightBack_svg__cls-1",
+      d: "M138.24 163.53S172 108.75 193 152.58s32.87 82.16 94 33.77 86.73-55.69 109.55-25.56 44.28 286.67-178.94 233.72c.05 0-176.61-66.65-79.37-230.98z"
+    }), /*#__PURE__*/React.createElement("circle", {
+      className: "ErrorWillBeRightBack_svg__cls-1",
+      cx: 95.22,
+      cy: 371.55,
+      r: 25.39
+    }), /*#__PURE__*/React.createElement("circle", {
+      className: "ErrorWillBeRightBack_svg__cls-1",
+      cx: 78.54,
+      cy: 128,
+      r: 25.39
+    }), /*#__PURE__*/React.createElement("circle", {
+      className: "ErrorWillBeRightBack_svg__cls-1",
+      cx: 296,
+      cy: 80.64,
+      r: 12.74
+    }), /*#__PURE__*/React.createElement("circle", {
+      className: "ErrorWillBeRightBack_svg__cls-1",
+      cx: 144.49,
+      cy: 416.85,
+      r: 12.74
+    }), /*#__PURE__*/React.createElement("circle", {
+      className: "ErrorWillBeRightBack_svg__cls-1",
+      cx: 378.78,
+      cy: 404.83,
+      r: 12.74
+    }), /*#__PURE__*/React.createElement("path", {
+      className: "ErrorWillBeRightBack_svg__cls-2",
+      d: "M197.65 260.2s-37.79 13.9-26.82 41.53 35.49 2.54 38.75 54 31.65 15.7 31.65 15.7 10.64-19.9 13-20.31 11.67-25 11.22-32.18 19.17 3.75 26.77-12.33 9.16-17.33 7.1-31.18c-3.93-26.43-54.27-38.22-101.67-15.23zM514.22 175.75s20.76-5.5 39.38 4.1l71.4-23.68zM563.61 183.49s24.11 3.37 35.52 18.67l30.51-46z"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M197.52 185.74s-94.89 36.5-76.24 144.37 156.79 96.51 190.24 61.54c0 0 36.18-27.27 40.1-95.61h0c0-41.67-50.39-112.71-109.2-115.31a35.36 35.36 0 00-20.37 5c-7 4.39-13.45 12.08-6.06 24.33 13.14 21.78 31.17-5.26 30.42-9.39-.68-3.73-12.1-7.16-24 14.42a13.31 13.31 0 01-14 6.59c-4.57-.82-9.39-2.18-11.45-4.41-4.41-4.8-16.32 4.61-7.87 10.75s10.95 6.72 6.34 11.14-18 13.44-9.22 17.47 66.44 18.44 76.23 1.54-81.78-10.97-92.15 30.83c0 0-7.29 20.07 20.93 27.17s8.64 72.2 34.95 68c0 0 12.29-2.88 19.39-21.32 4.18-10.82 14.62-16.32 20.85-17.78a5.87 5.87 0 017.19 6.64c-.85 5.12-5.06 13-10.56 16.33-10 5.95-10.23-15.56-5.69-22.85s15.82-33.94 0-46.45-18-5.79-17.93-3.29c.19 8.84 23.62 29.57 38.21 23.43s21.32-22.08 19.2-29-18.05-14.21-20.93-9 11 12.86 26.89 9.22c14.34-3.29 30.86-1.13 32.34 15.44a19.31 19.31 0 0022.05 17.11c12.4-1.83 31.36-11.52 60-39.05h0s11.21-5.87 19.05-39.19 77.44-.66 108.15-23.85 75.34-57.78 75.34-57.78l-56.11 20.79s25.28 3.19 35.52 18.67l30.51-46L558.38 183l-3 20.26-1.82-23.45s-14.53-8.56-39.38-4.1L625 156.17l-77.77 27.55s16.92 22.63-8 34.15-75-30.34-100.53-22.46-27.81 29.21-27.81 29.21",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      stroke: "var(--zd_emptysvg_primary_stroke)",
+      strokeWidth: 1.5,
+      fill: "none"
+    }), /*#__PURE__*/React.createElement("ellipse", {
+      cx: 253.18,
+      cy: 132.09,
+      rx: 3.54,
+      ry: 3.51,
+      strokeMiterlimit: 10,
+      stroke: "var(--zd_emptysvg_medium_circle)",
+      fill: "none"
+    }), /*#__PURE__*/React.createElement("ellipse", {
+      cx: 258.45,
+      cy: 433.05,
+      rx: 3.54,
+      ry: 3.51,
+      fill: "var(--zd_emptysvg_medium_circle)"
+    }), /*#__PURE__*/React.createElement("ellipse", {
+      cx: 64.02,
+      cy: 283.08,
+      rx: 3.31,
+      ry: 3.28,
+      stroke: "var(--zd_emptysvg_tiny_circle)",
+      strokeMiterlimit: 10,
+      fill: "none"
+    }), /*#__PURE__*/React.createElement("ellipse", {
+      cx: 438.12,
+      cy: 288.35,
+      rx: 3.31,
+      ry: 3.28,
+      fill: "var(--zd_emptysvg_tiny_circle)"
+    }), /*#__PURE__*/React.createElement("path", {
+      className: "ErrorWillBeRightBack_svg__cls-8",
+      d: "M115.52 172.8l-.36 6.18M112.23 175.72l6.22.34"
+    }), /*#__PURE__*/React.createElement("ellipse", {
+      cx: 396.28,
+      cy: 390.22,
+      rx: 2.46,
+      ry: 2.44,
+      stroke: "var(--zd_emptysvg_small_circle)",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      fill: "none"
+    }), /*#__PURE__*/React.createElement("path", {
+      className: "ErrorWillBeRightBack_svg__cls-10",
+      d: "M395.35 128.36l4.15 4.61M395.1 132.72l4.65-4.12"
+    }));
+  }
+
+}
+WillBeRightBack.propTypes = ErrorStateProps;
+WillBeRightBack.defaultProps = { ...ErrorStateDefaultProps,
+  dataId: 'willberightback'
+};
+
+if (false) {
+  WillBeRightBack.docs = {
+    componentGroup: 'Emptystate'
+  };
+}

package/es/index.js

@@ -1,7 +1,12 @@
 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 SVG } from './svg/SVG';
-export { default as SVG__default } from './svg/docs/SVG__default.docs';
+import '@zohodesk/variables/assets/sizeVariables.module.css';
+export { default as _provider } from './Provider';
+export { default as Emptystate__version1 } from './docs/Emptystate__version1.docs';
+export { default as Emptystate__version2 } from './docs/Emptystate__version2.docs';
+export { default as Emptystate__version3 } from './docs/Emptystate__version3.docs';
+export { default as Errorstate__version1 } from './docs/Errorstate__version1.docs';
+export { default as Errorstate__version2 } from './docs/Errorstate__version2.docs';
+export { default as Errorstate__version3 } from './docs/Errorstate__version3.docs';
+export { default as Svg__common } from './docs/SVG__common.docs';

package/images/EmptyCustomDomain.svg

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 298 123.5" style="enable-background:new 0 0 298 123.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.35;fill:#E5E5E5;enable-background:new    ;}
+	.st1{opacity:0.7;fill:none;stroke:#DADADA;stroke-width:0.75;stroke-miterlimit:10;enable-background:new    ;}
+	.st2{opacity:0.7;}
+	.st3{fill:none;stroke:#DADADA;stroke-width:0.75;stroke-miterlimit:10;stroke-dasharray:0.97,0.97;}
+	.st4{fill:none;stroke:#DADADA;stroke-width:0.75;stroke-miterlimit:10;stroke-dasharray:1.03,1.03;}
+	.st5{fill:none;stroke:#DADADA;stroke-width:0.75;stroke-miterlimit:10;stroke-dasharray:1.01,1.01;}
+	.st6{opacity:0.5;fill:#DCF6FF;enable-background:new    ;}
+	.st7{opacity:0.2;enable-background:new    ;}
+	.st8{fill:#FFFFFF;}
+	.st9{fill:#BBEAFF;}
+	.st10{fill:none;stroke:#5A5C5D;stroke-miterlimit:10;}
+	.st11{fill:#5A5C5D;}
+	.st12{opacity:5.000000e-02;enable-background:new    ;}
+	.st13{fill:#EB4A62;}
+</style>
+<g id="Layer_2_1_">
+	<g id="Layer_1-2">
+		<path class="st0" d="M288.2,78.1h-75.1c-1.5,0-2.9-1-3.4-2.4c-0.2-0.5-0.3-1-0.3-1.5c-0.1-2,1.4-3.7,3.4-3.7c0.1,0,0.1,0,0.2,0
+			h41.3c5.3,0,9.6-4.3,9.6-9.6l0,0c0-5.3-4.3-9.6-9.6-9.6l0,0H137.1c-1.8,0-3.3-1.3-3.6-3.1c-0.1-0.8,0-1.7,0.2-2.5
+			c0.5-1.5,1.9-2.6,3.5-2.5h38.5c5.3,0,9.6-4.3,9.6-9.6v0l0,0c0-5.3-4.3-9.6-9.6-9.6l0,0H9.6c-5.3,0-9.6,4.3-9.6,9.6l0,0
+			C0,38.7,4.3,43,9.6,43c0,0,0,0,0,0h57.3c1.8,0,3.3,1.3,3.6,3c0.1,0.6,0.1,1.3,0.1,1.9c-0.2,1.8-1.8,3.2-3.6,3.2H34.7
+			c-5.3,0-9.6,4.3-9.6,9.6c0,0,0,0,0,0l0,0c0,5.3,4.3,9.6,9.6,9.6H143c2,0,3.6,1.6,3.6,3.6c0,0.1,0,0.1,0,0.2c0,0.4-0.1,0.7-0.1,1.1
+			c-0.3,1.7-1.8,2.9-3.5,2.9H63c-5.3,0-9.6,4.3-9.6,9.6l0,0c0,5.3,4.3,9.6,9.6,9.6h69.2c2,0,3.6,1.5,3.6,3.5v0.1
+			c-0.1,2-1.7,3.5-3.6,3.5h-29.5c-5.1-0.1-9.5,3.8-9.9,8.9c-0.4,5.3,3.7,9.9,8.9,10.2c0.2,0,0.4,0,0.6,0h114.2
+			c5.2,0.1,9.5-3.9,9.9-9c0.3-5.3-3.7-9.9-9-10.2c-0.2,0-0.4,0-0.6,0h-14.6c-2,0-3.6-1.5-3.6-3.5v-0.1c0.1-1.9,1.7-3.5,3.6-3.4h86.1
+			c5.3,0,9.6-4.3,9.6-9.6c0,0,0,0,0,0l0,0C297.9,82.3,293.5,78,288.2,78.1z"/>
+		<polygon class="st1" points="76.5,70.5 79.3,70.8 77.4,72.8 77.9,75.5 75.4,74.3 73,75.7 73.4,73 71.4,71.1 74.1,70.6 75.2,68.1 
+					"/>
+		<g class="st2">
+			<circle class="st3" cx="66.6" cy="22.8" r="4.3"/>
+		</g>
+		<g class="st2">
+			<circle class="st4" cx="192.3" cy="117.8" r="4.3"/>
+		</g>
+		<polygon class="st1" points="139.2,17.3 141.2,17.5 139.8,18.9 140.2,20.9 138.5,20 136.7,21 137,19 135.6,17.7 137.5,17.4 
+			138.3,15.6 		"/>
+		<polygon class="st1" points="215.1,2.6 217.1,2.9 215.7,4.3 216.1,6.2 214.4,5.4 212.6,6.3 212.9,4.4 211.5,3 213.4,2.7 
+			214.2,0.9 		"/>
+		<g class="st2">
+			<circle class="st5" cx="260.9" cy="54.3" r="8"/>
+		</g>
+		<circle class="st6" cx="140.3" cy="72.2" r="45.1"/>
+		<path class="st7" d="M182.2,64.4L168,57.2c1.1-10.5-0.9-19.3-5.5-24.6c10.5,7.1,17.4,18.3,19.2,30.8c0,0.3,0.3,0.3,0.4,0.3
+			s0.3-0.3,0.3-0.4C178.9,38.4,155.9,21,131,24.5c-5.8,0.8-11.4,2.7-16.5,5.7c-0.1,0-0.1,0.1-0.1,0.1c-7.6,4.4-13.7,10.9-17.6,18.7
+			c-3.9,7.8-5.5,16.5-4.6,25.2v0.3c2.4,23.1,21.9,40.6,45.1,40.6h0.4c0.2,0,0.4-0.2,0.4-0.4s-0.2-0.4-0.4-0.4l0,0
+			c-5.2,0.1-10.4-0.8-15.3-2.6c0.6,0.1,1.1,0.2,1.7,0.2c2.2,0,4.3-0.3,6.3-1c0.1-0.1,0.3-0.3,0.3-0.4s-0.3-0.3-0.4-0.3
+			c-4.8,1.4-9.1,1.3-12.7-0.4l8.9-17.7l1,0.4c0.1,0,0.1,0.1,0.1,0.1c0,0,0,0,0,0c0.2,0,0.3-0.1,0.3-0.3c0.1-0.1,0.1-0.3,0-0.4
+			c0,0-0.1,0-0.1,0l-1-0.4l4.9-9.5c0.1-0.1,0.1-0.3-0.1-0.4c0,0,0,0-0.1,0c-0.1-0.1-0.4,0-0.4,0.1l-4.9,9.5l-18.6-9.5
+			c1-8,3.5-15.7,7.2-22.9l16,8.1c0.1,0,0.1,0.1,0.1,0.1c0.2,0,0.3-0.1,0.3-0.3c0.1-0.1,0.1-0.3-0.1-0.4c0,0-0.1,0-0.1,0l-16-8.1
+			c3.6-7.2,8.4-13.8,14.3-19.5l18.6,9.3l-3,5.9c-0.1,0.1-0.1,0.3,0.1,0.4c0,0,0.1,0,0.1,0c0.1,0,0.1,0.1,0.1,0.1
+			c0.2,0,0.3-0.1,0.3-0.3l3-5.9l18.6,9.4c-0.3,1.9-0.6,3.7-1,5.8c-0.1,0.3,0.1,0.4,0.3,0.4c0.3,0.2,0.4-0.1,0.4-0.3
+			c0.4-1.9,0.7-3.8,1-5.5l14,7.1c0.1,0,0.1,0.1,0.1,0.1c0,0,0,0,0,0c0.2,0,0.3-0.1,0.3-0.3C182.5,64.7,182.4,64.4,182.2,64.4z
+			 M93,75l13.8,6.9c-0.3,2.6-0.4,5.3-0.3,7.9c0.3,7.1,2.3,12.8,5.8,16.7C101.6,99.3,94.6,87.8,93,75z M125.8,91.7l-9.1,17.6
+			c-5.8-3.2-9.2-9.9-9.7-19.4c-0.1-2.6,0-5.1,0.3-7.6L125.8,91.7z M106.8,81.3l-14-7.1c-0.8-8.4,0.7-16.8,4.4-24.4l16.7,8.5
+			C110.4,65.6,108,73.4,106.8,81.3L106.8,81.3z M114.5,57.7l-16.7-8.5c3.9-7.5,9.8-13.7,17-18l4.9,2.5c0.1,0,0.1,0.1,0.1,0.1
+			c0.2,0,0.3-0.1,0.3-0.3c0.1-0.2,0-0.4-0.1-0.4l-4.5-2.3c11.2-6.4,24.6-7.5,36.7-3.2c-5.1-0.4-10.8,1.3-16.7,5.3
+			c-2.2,1.5-4.2,3.1-6.2,4.9l-3.3-1.6c-0.2-0.1-0.4,0-0.4,0.1c-0.1,0.2,0,0.4,0.1,0.4l2.9,1.6C122.8,44,118.1,50.5,114.5,57.7
+			L114.5,57.7z M130,38.1c1.8-1.7,3.8-3.3,6-4.6c7.9-5.3,15.4-6.5,21.3-3.8l-8.9,17.6L130,38.1z M149,47.6l9-17.6
+			c7.2,3.9,10.8,14.1,9.4,26.9L149,47.6z"/>
+		<path class="st7" d="M143.8,57.1c-0.1-0.1-0.3-0.1-0.4,0c0,0,0,0.1-0.1,0.1l-3,5.9c-0.1,0.2,0,0.4,0.1,0.4c0.1,0,0.1,0.1,0.1,0.1
+			c0,0,0,0,0,0c0.2,0,0.3-0.1,0.3-0.3l3-5.9C144,57.5,143.9,57.2,143.8,57.1z"/>
+		<rect x="134.2" y="74.7" class="st8" width="62.5" height="38.3"/>
+		<rect x="134.5" y="65.3" class="st9" width="62.2" height="8.4"/>
+		<polyline class="st10" points="195.5,106.1 195.5,65.8 132.5,65.8 132.5,114.7 195.5,114.7 195.5,112.1 		"/>
+		<line class="st10" x1="132.5" y1="74.7" x2="195.5" y2="74.7"/>
+		<circle class="st11" cx="137.8" cy="70.4" r="1.1"/>
+		<circle class="st11" cx="141.9" cy="70.4" r="1.1"/>
+		<path class="st12" d="M134.5,75.3L134.5,75.3V77l0.9-1.7L134.5,75.3z M134.1,108.8v0.9c4.4-2,8.5-4.8,12-8.2l9.6,4.9
+			c0.1,0,0.1,0.1,0.1,0.2c0.2,0,0.3-0.1,0.3-0.3c0.1-0.1,0.1-0.3-0.1-0.4c0,0-0.1,0-0.1,0l-9.4-4.8c5.7-5.6,10.4-12.1,14-19.2
+			l16.7,8.4c-5.8,11.3-16.1,19.5-28.4,22.8h2.6c11.5-3.8,21-12,26.5-22.8c2.4-4.7,4-9.9,4.6-15.1l-0.6,0.2l0,0
+			c-0.6,5-2.1,9.9-4.3,14.4L161,81.2c1-1.9,1.9-3.9,2.6-5.9h-0.9c-0.9,1.9-1.6,3.7-2.6,5.6l-10.9-5.6h-1.7l12.4,6.2
+			c-3.6,7.1-8.3,13.5-14,19l-11.7-5.9v0.9l11.2,5.6 M134.5,75.2L134.5,75.2V77l0.9-1.7L134.5,75.2z M134.5,75.2L134.5,75.2V77
+			l0.9-1.7L134.5,75.2z"/>
+		<path class="st13" d="M154.1,98.8l7.8-13.5c0.7-1.1,2.1-1.5,3.2-0.9c0.4,0.2,0.7,0.5,0.9,0.9l7.8,13.5c0.7,1.1,0.3,2.6-0.9,3.2
+			c-0.3,0.2-0.7,0.3-1.1,0.3h-15.6c-1.3,0-2.4-1-2.4-2.3C153.8,99.6,153.9,99.2,154.1,98.8z"/>
+		<path class="st8" d="M163.2,99.6c0-0.5,0.4-0.9,0.9-0.9s0.9,0.4,0.9,0.9s-0.4,0.9-0.9,0.9S163.2,100.1,163.2,99.6z M165,91
+			c0,0.6-0.2,2-0.4,4l-0.2,2.1h-0.5l-0.2-2.1c-0.2-2.1-0.4-3.5-0.4-4s0.3-0.9,0.8-0.9S165,90.4,165,91z"/>
+	</g>
+</g>
+</svg>

package/images/EmptySkills.svg

@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:5.000000e-02;fill:#3F70B7;enable-background:new    ;}
+	.st1{fill:none;stroke:#E56471;stroke-miterlimit:10;}
+	.st2{fill:none;stroke:#5CC1A5;stroke-miterlimit:10;}
+	.st3{fill:none;stroke:#3F70B7;stroke-linecap:round;stroke-linejoin:round;}
+	.st4{fill:none;stroke:#010101;stroke-linecap:round;stroke-linejoin:round;}
+	.st5{fill:none;stroke:#000000;stroke-miterlimit:10;}
+	.st6{opacity:0.25;fill:#3F70B7;enable-background:new    ;}
+	.st7{opacity:0.25;}
+	.st8{clip-path:url(#SVGID_2_);}
+	.st9{fill:none;stroke:#3F70B7;stroke-width:0.5;stroke-miterlimit:10;}
+	.st10{clip-path:url(#SVGID_4_);}
+</style>
+<title>ReactEmpty</title>
+<path class="st0" d="M86.5,62.5c0,0,46.9-30.9,70.7-21.5s40,87.4-26.1,122.4S35.2,122.2,35,108.7C34.7,95.6,35,64.4,86.5,62.5z"/>
+<ellipse class="st1" cx="156" cy="31.7" rx="3.5" ry="3.5"/>
+<ellipse class="st2" cx="79.6" cy="29.6" rx="2.1" ry="2.1"/>
+<line class="st3" x1="23.3" y1="100.9" x2="22.9" y2="107"/>
+<line class="st3" x1="20" y1="103.8" x2="26.2" y2="104.1"/>
+<ellipse class="st4" cx="165.9" cy="154.1" rx="2.4" ry="2.4"/>
+<line class="st2" x1="175.6" y1="117.2" x2="179.8" y2="121.8"/>
+<line class="st2" x1="175.4" y1="121.6" x2="180" y2="117.4"/>
+<path class="st5" d="M25.9,124.2c0,0,28.6-2.9,35.8-25.2s29.5-22.8,35.6-24.2l0.7-0.2c6.6-2.4,11.3-8.9,11.3-16.3
+	c0-9.5-7.7-17.2-17.2-17.2s-17.1,7.7-17.1,17.2c0,8.2,5.7,15,13.4,16.7l0,0c2.1,0.7,4.5,1.6,7.3,1.9c2.2,0.2,4.5,0.3,6.8,0.2
+	c5.3-0.2,18.5,2.2,23.3,13.8c6.3,15.4,16.9,30.2,36.4,30.2c0,0-44.3,6.3-51.1-23c0,0,3.2,1.1,0,15.1s-18.7,28.8-44.6,14.8
+	s-30.6,18.7-5,22.3s58.3-18.4,72.7-22s24.1,5,24.1,12.2c0,20.2-79.2,33.1-83.2-42.5"/>
+<circle class="st6" cx="97.2" cy="58.1" r="17.1"/>
+<g class="st7">
+	<g>
+		<defs>
+			<circle id="SVGID_1_" cx="147.6" cy="58.7" r="12.7"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st8">
+			<line class="st9" x1="162.5" y1="47.7" x2="158.4" y2="73.7"/>
+			<line class="st9" x1="160.9" y1="47.5" x2="156.8" y2="73.5"/>
+			<line class="st9" x1="159.3" y1="47.2" x2="155.2" y2="73.2"/>
+			<line class="st9" x1="157.7" y1="47" x2="153.6" y2="73"/>
+			<line class="st9" x1="156.1" y1="46.7" x2="151.9" y2="72.7"/>
+			<line class="st9" x1="154.5" y1="46.5" x2="150.4" y2="72.4"/>
+			<line class="st9" x1="152.9" y1="46.2" x2="148.7" y2="72.2"/>
+			<line class="st9" x1="151.3" y1="45.9" x2="147.1" y2="71.9"/>
+			<line class="st9" x1="149.7" y1="45.7" x2="145.5" y2="71.7"/>
+			<line class="st9" x1="148.1" y1="45.4" x2="143.9" y2="71.4"/>
+			<line class="st9" x1="146.5" y1="45.2" x2="142.3" y2="71.2"/>
+			<line class="st9" x1="144.9" y1="44.9" x2="140.7" y2="70.9"/>
+			<line class="st9" x1="143.2" y1="44.7" x2="139.1" y2="70.7"/>
+			<line class="st9" x1="141.6" y1="44.4" x2="137.5" y2="70.4"/>
+			<line class="st9" x1="140" y1="44.2" x2="135.9" y2="70.2"/>
+			<line class="st9" x1="138.4" y1="43.9" x2="134.3" y2="69.9"/>
+			<line class="st9" x1="136.8" y1="43.6" x2="132.7" y2="69.6"/>
+		</g>
+	</g>
+	<circle class="st9" cx="147.6" cy="58.7" r="12.7"/>
+</g>
+<g class="st7">
+	<g>
+		<defs>
+			<circle id="SVGID_3_" cx="34.3" cy="61.8" r="12.7"/>
+		</defs>
+		<clipPath id="SVGID_4_">
+			<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
+		</clipPath>
+		<g class="st10">
+			<line class="st9" x1="47.7" y1="50.6" x2="43.5" y2="76.6"/>
+			<line class="st9" x1="44.5" y1="50.1" x2="40.3" y2="76.1"/>
+			<line class="st9" x1="41.2" y1="49.6" x2="37.1" y2="75.6"/>
+			<line class="st9" x1="38" y1="49" x2="33.9" y2="75.1"/>
+			<line class="st9" x1="34.8" y1="48.5" x2="30.7" y2="74.5"/>
+			<line class="st9" x1="31.6" y1="48" x2="27.5" y2="74"/>
+			<line class="st9" x1="28.4" y1="47.5" x2="24.2" y2="73.5"/>
+			<line class="st9" x1="25.2" y1="47" x2="21" y2="73"/>
+		</g>
+	</g>
+	<circle class="st9" cx="34.3" cy="61.8" r="12.7"/>
+</g>
+</svg>

package/lib/Loader/Loader.js

@@ -0,0 +1,117 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
+
+var _SVG = _interopRequireDefault(require("./../SVG/SVG"));
+
+var _SVGModule = _interopRequireDefault(require("./../SVG/SVG.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var Loader = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(Loader, _React$PureComponent);
+
+  var _super = _createSuper(Loader);
+
+  function Loader(props) {
+    var _this;
+
+    _classCallCheck(this, Loader);
+
+    _this = _super.call(this, 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'
+    };
+    return _this;
+  }
+
+  _createClass(Loader, [{
+    key: "render",
+    value: function render() {
+      var dataId = this.props.dataId;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: _SVGModule["default"].center
+      }, /*#__PURE__*/_react["default"].createElement(_SVG["default"], {
+        viewBox: "0 0 40 40",
+        name: "Loader",
+        className: "".concat(_SVGModule["default"].loaderWrapper),
+        dataId: dataId,
+        styleName: this.viewBoxStyle
+      }, /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].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["default"].createElement("title", null, 'loader'), /*#__PURE__*/_react["default"].createElement("circle", {
+        fill: "none",
+        stroke: "#089949",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        cx: 20,
+        cy: 20,
+        r: 13,
+        style: this.defsStyle,
+        strokeDasharray: 82,
+        strokeDashoffset: 82
+      }), /*#__PURE__*/_react["default"].createElement("circle", {
+        fill: "none",
+        stroke: "#17c662",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        cx: 20,
+        cy: 20,
+        r: 8,
+        style: this.circleStyle,
+        strokeDasharray: 50,
+        strokeDashoffset: 50
+      })));
+    }
+  }]);
+
+  return Loader;
+}(_react["default"].PureComponent);
+
+exports["default"] = Loader;
+Loader.propTypes = _propTypes.LoaderProps;
+Loader.defaultProps = _defaultProps.LoaderDefaultProps;
+
+if (false) {
+  Loader.docs = {
+    componentGroup: 'SVG'
+  };
+}

package/lib/Loader/props/defaultProps.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LoaderDefaultProps = void 0;
+var LoaderDefaultProps = {
+  dataId: 'loader'
+};
+exports.LoaderDefaultProps = LoaderDefaultProps;

package/lib/Loader/props/propTypes.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LoaderProps = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var LoaderProps = {
+  dataId: _propTypes["default"].string
+};
+exports.LoaderProps = LoaderProps;

package/lib/Provider.js

@@ -0,0 +1,139 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _AppContainer = _interopRequireDefault(require("@zohodesk/components/lib/AppContainer/AppContainer"));
+
+var _Layout = require("@zohodesk/components/lib/Layout");
+
+var _ThemeTool = _interopRequireDefault(require("../../common/lib/ThemeTool/ThemeTool"));
+
+require("@zohodesk/components/assets/Appearance/default/mode/defaultMode.module.css");
+
+require("@zohodesk/components/assets/Appearance/dark/mode/darkMode.module.css");
+
+require("../assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
+
+require("../assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css");
+
+require("../assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css");
+
+require("../assets/Appearance/default/themes/red/redDefaultCTATheme.module.css");
+
+require("../assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css");
+
+require("../assets/Appearance/default/mode/defaultEmptyStates.module.css");
+
+require("../assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css");
+
+require("../assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css");
+
+require("../assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css");
+
+require("../assets/Appearance/dark/themes/red/redDarkCTATheme.module.css");
+
+require("../assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css");
+
+require("../assets/Appearance/dark/mode/darkEmptyStates.module.css");
+
+require("../assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css");
+
+require("../assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css");
+
+require("../assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css");
+
+require("../assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css");
+
+require("../assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css");
+
+require("../assets/Appearance/pureDark/mode/pureDarkEmptyStates.module.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var Provider = /*#__PURE__*/function (_React$Component) {
+  _inherits(Provider, _React$Component);
+
+  var _super = _createSuper(Provider);
+
+  function Provider(props) {
+    var _this;
+
+    _classCallCheck(this, Provider);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      appearanceName: 'default',
+      themeName: 'blue'
+    };
+    _this.setTheme = _this.setTheme.bind(_assertThisInitialized(_this));
+    _this.setAppearance = _this.setAppearance.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(Provider, [{
+    key: "setAppearance",
+    value: function setAppearance(mode) {
+      this.setState({
+        appearanceName: mode
+      });
+    }
+  }, {
+    key: "setTheme",
+    value: function setTheme(theme) {
+      this.setState({
+        themeName: theme
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state = this.state,
+          appearanceName = _this$state.appearanceName,
+          themeName = _this$state.themeName;
+      return /*#__PURE__*/_react["default"].createElement(_AppContainer["default"], {
+        customProps: {
+          ExtraProps: {
+            'data-mode': appearanceName,
+            'data-theme': themeName
+          }
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        scroll: "vertical"
+      }, this.props.children), /*#__PURE__*/_react["default"].createElement(_ThemeTool["default"], {
+        onThemeChange: this.setTheme,
+        onAppearanceChange: this.setAppearance
+      }));
+    }
+  }]);
+
+  return Provider;
+}(_react["default"].Component);
+
+exports["default"] = Provider;