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

package/lib/svg/docs/SVG__errorstate.docs.js

@@ -0,0 +1,129 @@
+"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 _ErrorInconvenience = _interopRequireDefault(require("../ErrorInconvenience"));
+
+var _ErrorOopsSomethingMiss = _interopRequireDefault(require("../ErrorOopsSomethingMiss"));
+
+var _ErrorUnableToProcessRequest = _interopRequireDefault(require("../ErrorUnableToProcessRequest"));
+
+var _ErrorUnauthorizedLogin = _interopRequireDefault(require("../ErrorUnauthorizedLogin"));
+
+var _ErrorUrlNotFound = _interopRequireDefault(require("../ErrorUrlNotFound"));
+
+var _ErrorWillBeRightBack = _interopRequireDefault(require("../ErrorWillBeRightBack"));
+
+require("./SVGdocstyle.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"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || 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 : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var SVG__errorstate = /*#__PURE__*/function (_React$Component) {
+  _inherits(SVG__errorstate, _React$Component);
+
+  var _super = _createSuper(SVG__errorstate);
+
+  function SVG__errorstate() {
+    _classCallCheck(this, SVG__errorstate);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(SVG__errorstate, [{
+    key: "render",
+    value: function render() {
+      var boxStyle = {
+        minWidth: '65%',
+        border: '1px solid #dcdcdc',
+        padding: '5px',
+        margin: '5px',
+        flex: '1',
+        maxWidth: '25%',
+        justifyContent: 'space-between'
+      };
+      var textStyle = {
+        textAlign: 'center',
+        padding: '10px 0',
+        background: ' #f9f9f9',
+        marginTop: '10px',
+        color: '#000'
+      };
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          paddingBottom: '50px'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexWrap: 'wrap',
+          maxWidth: '600px',
+          margin: '0 auto'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: boxStyle
+      }, /*#__PURE__*/_react["default"].createElement(_ErrorInconvenience["default"], null), /*#__PURE__*/_react["default"].createElement("div", {
+        style: textStyle
+      }, "Inconvenience")), /*#__PURE__*/_react["default"].createElement("div", {
+        style: boxStyle
+      }, /*#__PURE__*/_react["default"].createElement(_ErrorOopsSomethingMiss["default"], null), /*#__PURE__*/_react["default"].createElement("div", {
+        style: textStyle
+      }, "OopsSomethingMiss")), /*#__PURE__*/_react["default"].createElement("div", {
+        style: boxStyle
+      }, /*#__PURE__*/_react["default"].createElement(_ErrorUnableToProcessRequest["default"], null), /*#__PURE__*/_react["default"].createElement("div", {
+        style: textStyle
+      }, "UnableToProcessRequest")), /*#__PURE__*/_react["default"].createElement("div", {
+        style: boxStyle
+      }, /*#__PURE__*/_react["default"].createElement(_ErrorUnauthorizedLogin["default"], null), /*#__PURE__*/_react["default"].createElement("div", {
+        style: textStyle
+      }, "UnathorizedLogin")), /*#__PURE__*/_react["default"].createElement("div", {
+        style: boxStyle
+      }, /*#__PURE__*/_react["default"].createElement(_ErrorUrlNotFound["default"], null), /*#__PURE__*/_react["default"].createElement("div", {
+        style: textStyle
+      }, "UrlNotFound")), /*#__PURE__*/_react["default"].createElement("div", {
+        style: boxStyle
+      }, /*#__PURE__*/_react["default"].createElement(_ErrorWillBeRightBack["default"], null), /*#__PURE__*/_react["default"].createElement("div", {
+        style: textStyle
+      }, "WillBeRightBack"))));
+    }
+  }]);
+
+  return SVG__errorstate;
+}(_react["default"].Component);
+
+exports["default"] = SVG__errorstate;
+
+if (false) {
+  SVG__errorstate.docs = {
+    componentGroup: 'SVG'
+  };
+}

package/lib/svg/docs/SVGdocstyle.module.css

@@ -0,0 +1,8 @@
+[data-mode='default'] {
+  background: #fff;
+  color: #000;
+}
+[data-mode='dark'] {
+  background: #232B38;
+  color: #E2E4E6;
+}

package/lib/svg/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/lib/svg/images/EmptySkills.svg

@@ -1,75 +1,83 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!-- 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 194.4 139.3" style="enable-background:new 0 0 194.4 139.3;" xml:space="preserve">
+	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
 <style type="text/css">
-	.st0{opacity:3.000000e-02;fill:#1E2633;enable-background:new    ;}
-	.st1{fill:#CED5DE;}
-	.st2{fill:#E7E9EC;}
-	.st3{fill:#788190;}
-	.st4{opacity:0.5;}
-	.st5{opacity:0.4;fill:#E7E9EC;enable-background:new    ;}
-	.st6{fill:#FFFFFF;}
+	.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>skills</title>
-<g>
-	<g id="Layer_1-2">
-		<circle class="st0" cx="113.1" cy="68.8" r="68.8"/>
-		<circle class="st0" cx="42.7" cy="56.4" r="42.7"/>
-		<circle class="st0" cx="35.9" cy="123.6" r="15.6"/>
-		<circle class="st1" cx="46.2" cy="68.8" r="5.1"/>
-		<path class="st1" d="M43.5,62c-11.4-20.5-13.8-39.3-4.5-48.7c3.9-3.9,9.5-5.8,16.1-5.8c10.5,0,23.6,4.6,37.2,12.9
-			c-9.2,6-17.7,12.9-25.4,20.7c-6.5,6.5-12.4,13.5-17.7,21c0.7,0.3,1.4,0.8,2,1.3c5.2-7.4,11-14.3,17.4-20.6
-			c7.9-7.9,16.6-15,25.9-21.1c9.4,6.1,18.1,13.1,25.9,21.1c6.4,6.4,12.2,13.2,17.4,20.6c0.6-0.6,1.3-1,2-1.3
-			c-5.3-7.5-11.2-14.5-17.7-20.9c-7.7-7.8-16.3-14.7-25.4-20.7c13.6-8.3,26.7-12.9,37.2-12.9c6.6,0,12.2,1.9,16.1,5.8
-			c9.3,9.3,6.9,28.2-4.4,48.7c0.7,0.3,1.4,0.7,2,1.2c11.8-21.5,14.2-41.5,4.1-51.5c-11-10.9-33.6-7.2-57.2,7.5
-			C71,4.4,48.3,0.7,37.4,11.6c-10.1,10-7.7,30.1,4.2,51.6C42.1,62.7,42.8,62.3,43.5,62z"/>
-		<path class="st1" d="M154.5,89.3c-1.9-5.2-4.2-10.2-6.8-14.9c-0.6,0.5-1.3,0.9-2.1,1.2c2.6,4.7,4.8,9.5,6.6,14.5
-			c5.4,15.2,4.7,27.4-2.1,34.2c-10.1,10-31.1,6.5-53.3-7.2c9.2-6,17.7-12.9,25.4-20.7c6.5-6.5,12.4-13.5,17.7-21
-			c-0.7-0.3-1.4-0.8-2-1.3c-5.2,7.3-11,14.2-17.4,20.6c-7.9,7.9-16.6,14.9-25.9,21c-9.4-6.1-18.1-13.1-25.9-21
-			c-6.4-6.4-12.2-13.3-17.4-20.6c-0.6,0.6-1.3,1-2,1.3c5.3,7.5,11.2,14.5,17.7,21c7.7,7.8,16.2,14.7,25.4,20.7
-			c-22.2,13.6-43.2,17.2-53.3,7.2c-6.8-6.8-7.6-19-2.2-34.2c1.8-5,4-9.8,6.6-14.5c-0.8-0.3-1.5-0.7-2.1-1.2c-2.7,4.8-5,9.8-6.8,14.9
-			c-5.8,16.2-4.8,29.2,2.7,36.7c4.3,4.3,10.4,6.3,17.6,6.3c11.2,0,25.2-4.9,39.6-13.8c14.3,8.9,28.3,13.8,39.6,13.8
-			c7.2,0,13.3-2,17.6-6.3C159.3,118.5,160.2,105.5,154.5,89.3z"/>
-		<circle class="st1" cx="142.9" cy="68.8" r="5.1"/>
-		<path class="st1" d="M98.9,45c-0.1,0-0.2,0.1-0.2,0.2l0,0L98.9,45z"/>
-		<path class="st2" d="M69,82.1c-3.2,0-3.9-2.6-3.9-5.7s0.7-5.7,3.9-5.7V82.1z M118.7,82.9c3.2,0,3.9-2.6,3.9-5.7s-0.7-5.7-3.9-5.7
-			V82.9z"/>
-		<path class="st2" d="M113.1,65.8v18.4c0,10.1-7.8,18.5-17.9,19.3c-0.5,0-1,0.1-1.4,0.1c-10.7,0-19.3-8.7-19.3-19.3V65.8H113.1z"/>
-		<circle class="st3" cx="86" cy="81.4" r="1.6"/>
-		<circle class="st3" cx="99.9" cy="81.4" r="1.6"/>
-		<path class="st3" d="M97.8,88.1c0,2.8-2.2,5-5,5s-5-2.2-5-5"/>
-		<path class="st1" d="M116.4,83.9c0-0.3-0.2-0.5-0.5-0.5c-0.2,0-0.5,0.2-0.5,0.4c0,0,0,0,0,0c-0.1,5.2-2.4,8.9-6.8,11
-			c-2,0.9-4.1,1.5-6.3,1.6c-0.3-2.1-2.2-3.6-4.3-3.4s-3.6,2.2-3.4,4.3s2.2,3.6,4.3,3.4c1.8-0.2,3.2-1.6,3.4-3.4
-			C104.7,97.3,116.2,96,116.4,83.9z"/>
-		<g class="st4">
-			<path class="st3" d="M113.1,73.9v8.9c0,0.8,0.6,1.4,1.4,1.4h2.7c0.8,0,1.4-0.6,1.4-1.4v-9.9"/>
-			<path class="st3" d="M70.4,68.5L70.4,68.5c-0.8,0-1.4,0.7-1.4,1.5v12.7c0,0.8,0.6,1.4,1.4,1.4h2.7c0.8,0,1.4-0.6,1.4-1.4V68.5
-				H70.4z"/>
+<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>
-		<path class="st1" d="M126.5,69.5C126.5,69.5,126.5,69.5,126.5,69.5c-0.6,3.9-4.2,6.6-8,6c-0.3,0-0.5-0.1-0.8-0.2
-			c-1.5,1.4-3.6,2.1-5.7,1.8c-3.3-0.5-5.8-3.4-5.9-6.7c-2.7,3.8-8.1,4.7-11.9,2c-1-0.7-1.9-1.7-2.5-2.8c-1.6,1.3-4,1.1-5.4-0.5
-			c-0.6-0.8-0.9-1.8-0.8-2.8c-1.9,2.9-5.4,4.5-8.9,4c-5.1-0.8-8.5-5.6-7.7-10.6c0.5-3.1,2.5-5.7,5.3-7c-0.8-3.3,1.2-6.7,4.5-7.5
-			c0.7-0.2,1.5-0.2,2.3-0.1c0.5,0.1,1,0.2,1.5,0.4c0.4-0.8,0.8-1.5,1.4-2.2c3.2-3.8,8.9-4.3,12.7-1.1c0.4,0.4,0.8,0.8,1.2,1.2
-			c0.7-0.9,1.5-1.8,2.4-2.4c1.9-1.3,4.1-1.8,6.4-1.5c5,0.8,8.4,5.5,7.7,10.5c0,0.1,0,0.2,0,0.2c0.6-0.1,1.2-0.1,1.9,0
-			c3.8,0.6,6.5,4.1,5.9,8c0,0,0,0,0,0c-0.1,0.4-0.2,0.8-0.3,1.2c-0.2,0.7-0.6,1.4-1,2C124.7,62.2,127.1,65.7,126.5,69.5z"/>
-		<path class="st5" d="M122.2,58.3c-0.1,0.4-0.2,0.8-0.3,1.2c-9.7-2.4-17.7-9.2-21.4-18.5c1.9-1.3,4.1-1.8,6.4-1.5
-			c5,0.8,8.4,5.5,7.7,10.5c0,0.1,0,0.2,0,0.2c0.6-0.1,1.2-0.1,1.9,0C120.2,50.9,122.8,54.4,122.2,58.3
-			C122.2,58.3,122.2,58.3,122.2,58.3z"/>
-		<path class="st1" d="M20.3,3c-4.2,0-7.5,3.4-7.6,7.6c0,0.6,0.1,1.2,0.2,1.8v0.1c0.9,3.8,7.3,11.9,7.3,11.9l0,0
-			c0,0,6.5-8.1,7.3-11.9v-0.1c0.1-0.6,0.2-1.2,0.2-1.8C27.8,6.4,24.4,3,20.3,3z M20.3,13c-1.5,0-2.8-1.2-2.8-2.8
-			c0-1.5,1.2-2.8,2.8-2.8c1.5,0,2.8,1.2,2.8,2.8c0,0,0,0,0,0c0.1,1.5-1.1,2.8-2.7,2.9C20.3,13.1,20.3,13.1,20.3,13L20.3,13z"/>
-		<path class="st1" d="M193.7,58h-14.8c-0.4,0-0.7,0.3-0.7,0.7v9.4h-9.4c-0.4,0-0.7,0.3-0.7,0.7v14.8c0,0.4,0.3,0.7,0.7,0.7h14.8
-			c0.4,0,0.7-0.3,0.7-0.7l0,0v-9.3h9.4c0.4,0,0.7-0.3,0.7-0.7l0,0V58.8C194.4,58.3,194.1,58,193.7,58C193.7,58,193.7,58,193.7,58z
-			 M193,72.8h-13.4V59.5H193V72.8z"/>
-		<path class="st6" d="M176,71L176,71c-0.3,0-0.6,0.2-0.7,0.5l-2.3,5.7l0,0l-1.4,3.5c-0.1,0.4,0,0.8,0.4,0.9c0.4,0.1,0.8,0,0.9-0.4
-			c0,0,0,0,0,0l1.2-3h3.3l1.1,3c0.1,0.3,0.4,0.5,0.7,0.5c0.1,0,0.2,0,0.2,0c0.4-0.1,0.6-0.5,0.4-0.9l-3.3-9.2
-			C176.5,71.2,176.3,71,176,71z M174.8,76.7l1.2-3l1.1,3H174.8z"/>
-		<path class="st1" d="M181.8,63.5h0.6c0.5,1.7,1.3,3.2,2.5,4.4c-0.6,0.3-1.2,0.6-1.9,0.8c-0.4,0.1-0.6,0.5-0.5,0.9
-			c0.1,0.3,0.4,0.5,0.7,0.5c0.1,0,0.1,0,0.2,0c0.9-0.3,1.7-0.7,2.5-1.1c1.3,1.1,2.7,2,4.2,2.6c0.1,0,0.2,0,0.3,0
-			c0.3,0,0.6-0.2,0.7-0.4c0.1-0.4,0-0.8-0.4-0.9c-1.3-0.5-2.5-1.2-3.5-2c1.1-0.8,2-1.9,2.6-3.2c0.1-0.4-0.1-0.8-0.4-0.9
-			c-0.4-0.1-0.8,0-0.9,0.4c0,0,0,0,0,0c-0.5,1.1-1.3,2-2.3,2.7c-1-1.1-1.8-2.3-2.2-3.7h6.9c0.4,0,0.7-0.3,0.7-0.7
-			c0-0.4-0.3-0.7-0.7-0.7h-9.1c-0.4,0-0.7,0.3-0.7,0.7C181,63.2,181.4,63.5,181.8,63.5L181.8,63.5z"/>
 	</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/svg/utils.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/svg",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.40",
   "main": "lib/index",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -20,14 +20,28 @@
     "clean": "react-cli clean lib es coverage",
     "build": "react-cli build:component:cmjs",
     "build:es": "react-cli build:library:es",
-    "build:dev": "npm run clean && npm run build --module:mode=dev -- -w",
+    "build:dev": "npm run clean && npm run build:es --module:mode=dev -- -w",
     "prepare": "npm run init && npm run build && npm run build:es",
-    "init": "npm run clean",
+    "init": "npm run clean && npm run build:variables",
+    "build:variables": "node ./preprocess/index",
     "lint": "react-cli lint",
-    "docs": "react-cli docs"
+    "docs": "react-cli docs",
+    "postpublish": "react-cli postpublish",
+    "download": "rm package-lock.json && rm -rf node_modules/ && npm install"
   },
-  "dependencies": {
-    "@zohodesk/variables": "1.0.0-beta.11"
+  "react-cli": {
+    "preprocessor": {
+      "runner": "preprocess/index.js"
+    }
+  },
+  "devDependencies": {
+    "@zohodesk/variables": "1.0.0-beta.29",
+    "@zohodesk/components": "1.0.0-alpha-225",
+    "@svgr/cli": "5.5.0"
+  },
+  "peerDependencies": {
+    "@zohodesk/variables": "1.0.0-beta.29",
+    "@zohodesk/components": "1.0.0-alpha-225"
   },
   "tags": [
     "react",

package/preprocess/index.js

@@ -0,0 +1,2 @@
+require('./svgThemeColors');
+require('./svgAppearanceColors');

package/preprocess/json/svgAppearanceVariableJson.js

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