@zohodesk/svg 1.0.0-temp.57 → 1.0.0-temp.59

package/es/v1/emptystate/version3/Webhook.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import { EmptyStateProps } from "../props/propTypes";
+import { EmptyStateDefaultProps } from "../props/defaultProps";
+import SVG from "../../SVG/SVG";
+export default function Webhook(props) {
+  return /*#__PURE__*/React.createElement(SVG, {
+    viewBox: "0 0 500 500",
+    name: "emptyWebhook",
+    styleName: {
+      fill: 'none'
+    },
+    ...props
+  }, /*#__PURE__*/React.createElement("g", {
+    "clip-path": "url(#clip0_8054_29250)"
+  }, /*#__PURE__*/React.createElement("path", {
+    opacity: "0.1",
+    d: "M200.502 140.5C200.502 140.5 317.252 62.5004 376.252 86.0004C435.252 109.5 475.502 306.75 311.502 395.25C147.502 483.75 73.0016 291.25 72.2516 257.25C71.7516 224 72.2516 145.5 200.502 140.5Z",
+    fill: "var(--zd_emptysvg_primary_fill)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M35 293.249C34.75 293.249 35 293.249 35 293.249C34.25 293.249 33.75 292.499 33.75 291.999L34.75 273.249C34.75 272.499 35.25 271.999 36 271.999C36.75 271.999 37.25 272.499 37.25 273.249L36.25 291.999C36 292.749 35.5 293.249 35 293.249Z",
+    fill: "var(--zd_emptysvg_plus)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M44.501 284.498L26.001 283.498C25.251 283.498 24.751 282.748 24.751 282.248C24.751 281.498 25.501 280.998 26.001 280.998L44.251 281.998C45.001 281.998 45.501 282.748 45.501 283.248C45.751 283.998 45.251 284.498 44.501 284.498Z",
+    fill: "var(--zd_emptysvg_plus)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M428 51.999C421.5 51.999 416.25 57.249 416.25 63.749C416.25 70.249 421.5 75.499 428 75.499C434.5 75.499 439.75 70.249 439.75 63.749C439.75 57.249 434.25 51.999 428 51.999ZM428 73.249C423 73.249 418.75 68.999 418.75 63.749C418.75 58.499 423 54.249 428 54.249C433 54.249 437.25 58.499 437.25 63.749C437.25 68.999 433 73.249 428 73.249Z",
+    fill: "var(--zd_emptysvg_medium_circle)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M311 432.748C306.25 432.748 302.5 436.498 302.5 441.248C302.5 445.998 306.25 449.748 311 449.748C315.75 449.748 319.5 445.998 319.5 441.248C319.5 436.748 315.75 432.748 311 432.748ZM311 447.498C307.75 447.498 305 444.748 305 441.248C305 437.748 307.75 434.998 311 434.998C314.25 434.998 317 437.748 317 441.248C317 444.748 314.25 447.498 311 447.498Z",
+    fill: "var(--zd_emptysvg_medium_circle)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M202.251 50C198.001 50 194.751 53.5 194.751 57.5C194.751 61.5 198.001 65 202.251 65C206.501 65 209.751 61.5 209.751 57.5C209.751 53.5 206.501 50 202.251 50ZM202.251 62.75C199.501 62.75 197.251 60.5 197.251 57.75C197.251 55 199.501 52.75 202.251 52.75C205.001 52.75 207.251 55 207.251 57.75C207.251 60.5 205.001 62.75 202.251 62.75Z",
+    fill: "var(--zd_emptysvg_tiny_circle)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M474.5 324.5C474 324 473.25 324 472.75 324.5L466.75 330L461.5 324C461 323.5 460.25 323.5 459.75 324C459.25 324.5 459.25 325.25 459.75 325.75L465 331.75L459 337.25C458.5 337.75 458.5 338.5 459 339C459.25 339.25 459.5 339.5 460 339.5C460.25 339.5 460.5 339.5 460.75 339.25L466.75 333.75L472 339.75C472.25 340 472.5 340.25 473 340.25C473.25 340.25 473.5 340.25 473.75 340C474.25 339.5 474.25 338.75 473.75 338.25L468.5 332.25L474.5 326.75C475 326 475 325 474.5 324.5Z",
+    fill: "var(--zd_emptysvg_tiny_circle)"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.1",
+    d: "M289.502 162.499C289.502 162.499 196.252 100.249 149.002 118.999C101.752 137.749 69.5017 295.499 200.752 366.249C332.002 436.999 391.502 282.999 392.002 255.749C392.502 229.249 392.002 166.249 289.502 162.499Z",
+    fill: "var(--zd_emptysvg_primary_fill)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M75.6232 188.152C75.6232 188.152 116.626 217.696 136.186 209.095C155.747 200.493 164.775 187.031 192.612 187.031C220.448 187.031 285.149 216.948 305.462 213.208C326.151 209.469 383.329 217.696 386.714 211.339C389.724 204.981 390.852 163.096 381.448 162.723C372.044 162.349 79.7611 161.601 75.6232 166.088C71.4854 170.576 75.6232 188.152 75.6232 188.152Z",
+    fill: "var(--zd_emptysvg_secondary_fill)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M137.691 118.221C137.691 118.221 178.693 147.764 198.254 139.163C217.814 130.562 226.842 117.099 254.679 117.099C282.515 117.099 347.216 147.016 367.529 143.277C387.842 139.537 445.396 147.764 448.782 141.407C451.791 135.049 452.92 93.1648 443.515 92.7909C434.111 92.4169 141.828 91.669 137.691 96.1566C133.553 100.644 137.691 118.221 137.691 118.221Z",
+    fill: "var(--zd_emptysvg_secondary_fill)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M390.476 348.212C390.476 348.212 395.743 397.95 388.219 399.82C388.219 399.82 73.3664 417.396 63.9622 401.69C54.558 385.983 48.1632 169.455 56.0627 168.333C63.9622 166.837 115.121 164.967 115.121 164.967C115.121 164.967 109.102 99.1484 124.901 96.9046C140.701 94.6608 448.03 94.2868 449.535 99.8963C451.039 105.88 451.039 143.277 451.039 143.277H121.516L121.14 164.219C121.14 164.219 385.962 163.097 390.1 169.081C394.238 175.064 390.1 213.209 390.1 213.209L71.1094 212.835L388.972 225.55L390.852 332.879C390.852 332.879 448.406 335.123 449.911 329.14C451.415 322.782 450.287 159.357 450.287 159.357",
+    stroke: "var(--zd_emptysvg_primary_stroke)",
+    "stroke-width": "2.5",
+    "stroke-miterlimit": "10",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M199.007 317.547C199.007 317.547 173.052 322.408 176.061 344.099C179.071 365.789 215.559 384.113 228.725 343.725L260.699 343.351",
+    stroke: "var(--zd_emptysvg_primary_stroke)",
+    "stroke-width": "2.5",
+    "stroke-miterlimit": "10",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M201.265 343.351L220.825 310.816C220.825 310.816 194.87 294.361 214.807 272.671C234.744 250.607 264.461 274.541 259.195 293.987",
+    stroke: "var(--zd_emptysvg_primary_stroke)",
+    "stroke-width": "2.5",
+    "stroke-miterlimit": "10",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M233.237 289.873L251.67 320.539C251.67 320.539 264.459 314.181 276.497 320.912C288.158 327.644 291.543 342.229 286.277 354.196C281.763 363.919 271.606 372.52 247.532 362.049",
+    stroke: "var(--zd_emptysvg_primary_stroke)",
+    "stroke-width": "2.5",
+    "stroke-miterlimit": "10",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M232.486 295.855C236.225 295.855 239.257 292.842 239.257 289.124C239.257 285.406 236.225 282.393 232.486 282.393C228.746 282.393 225.715 285.406 225.715 289.124C225.715 292.842 228.746 295.855 232.486 295.855Z",
+    fill: "var(--zd_emptysvg_primary_stroke)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M201.639 348.959C205.379 348.959 208.41 345.945 208.41 342.228C208.41 338.51 205.379 335.496 201.639 335.496C197.9 335.496 194.868 338.51 194.868 342.228C194.868 345.945 197.9 348.959 201.639 348.959Z",
+    fill: "var(--zd_emptysvg_primary_stroke)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M262.955 349.334C266.694 349.334 269.726 346.32 269.726 342.603C269.726 338.885 266.694 335.871 262.955 335.871C259.215 335.871 256.184 338.885 256.184 342.603C256.184 346.32 259.215 349.334 262.955 349.334Z",
+    fill: "var(--zd_emptysvg_primary_stroke)"
+  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "clip0_8054_29250"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "450",
+    height: "400",
+    fill: "white",
+    transform: "translate(25 50)"
+  }))));
+}
+Webhook.propTypes = EmptyStateProps;
+Webhook.defaultProps = { ...EmptyStateDefaultProps,
+  dataId: 'emptyWebhook'
+};

package/es/v1/emptystate/version3/ZiaAgent.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { EmptyStateProps } from "../props/propTypes";
+import { EmptyStateDefaultProps } from "../props/defaultProps";
+import SVG from "../../SVG/SVG";
+export default function ZiaAgent(props) {
+  return /*#__PURE__*/React.createElement(SVG, {
+    viewBox: "0 0 148 148",
+    name: "ziaAgent",
+    styleName: {
+      fill: 'none'
+    },
+    ...props
+  }, /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#a)"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "var(--zd_emptysvg_primary_fill)",
+    d: "M59.348 41.588S93.906 18.5 111.37 25.456c17.464 6.956 29.378 65.342-19.166 91.538C43.66 143.19 21.608 86.21 21.386 76.146c-.148-9.842 0-33.078 37.962-34.558Z",
+    opacity: 0.1
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "var(--zd_emptysvg_plus)",
+    d: "M10.36 35.002s-.074 0 0 0c-.222 0-.37-.222-.37-.37l.296-5.55c0-.222.148-.37.37-.37s.37.148.37.37l-.296 5.55c-.074.222-.222.37-.37.37Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "var(--zd_emptysvg_plus)",
+    d: "m13.172 32.412-5.476-.296c-.222 0-.37-.222-.37-.37 0-.222.222-.37.37-.37l5.402.296c.222 0 .37.222.37.37.074.222-.074.37-.296.37Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "var(--zd_emptysvg_medium_circle)",
+    d: "M126.688 15.392a3.474 3.474 0 0 0-3.478 3.478 3.474 3.474 0 0 0 3.478 3.478 3.474 3.474 0 0 0 3.478-3.478c0-1.924-1.628-3.478-3.478-3.478Zm0 6.29c-1.48 0-2.738-1.258-2.738-2.812 0-1.554 1.258-2.812 2.738-2.812s2.738 1.258 2.738 2.812c0 1.554-1.258 2.812-2.738 2.812ZM92.056 128.094a2.495 2.495 0 0 0-2.516 2.516 2.495 2.495 0 0 0 2.516 2.516 2.495 2.495 0 0 0 2.516-2.516c0-1.332-1.11-2.516-2.516-2.516Zm0 4.366c-.962 0-1.776-.814-1.776-1.85s.814-1.85 1.776-1.85c.962 0 1.776.814 1.776 1.85s-.814 1.85-1.776 1.85Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "var(--zd_emptysvg_tiny_circle)",
+    d: "M59.866 14.8a2.226 2.226 0 0 0-2.22 2.22c0 1.184.962 2.22 2.22 2.22a2.226 2.226 0 0 0 2.22-2.22c0-1.184-.962-2.22-2.22-2.22Zm0 3.774c-.814 0-1.48-.666-1.48-1.48s.666-1.48 1.48-1.48 1.48.666 1.48 1.48-.666 1.48-1.48 1.48ZM134.939 111.999a.358.358 0 0 0-.518 0l-1.776 1.628-1.554-1.776a.358.358 0 0 0-.518 0 .358.358 0 0 0 0 .518l1.554 1.776-1.776 1.628a.358.358 0 0 0 0 .518c.074.074.148.148.296.148.074 0 .148 0 .222-.074l1.776-1.628 1.554 1.776c.074.074.148.148.296.148.074 0 .148 0 .222-.074a.358.358 0 0 0 0-.518l-1.554-1.776 1.776-1.628c.148-.222.148-.518 0-.666Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "var(--zd_emptysvg_primary_fill)",
+    d: "M85.692 48.1S58.09 29.674 44.104 35.224c-13.986 5.55-23.532 52.244 15.318 73.186 38.85 20.942 56.462-24.642 56.61-32.708.148-7.844 0-26.492-30.34-27.602Z",
+    opacity: 0.1
+  })), /*#__PURE__*/React.createElement("path", {
+    stroke: "var(--zd_emptysvg_primary_stroke)",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.012,
+    d: "M38.175 127.437s15.017-10.578 15.446-11.15c.43-.572.573-11.579.573-11.579s.286 11.436 1.86 11.293c1.575-.143 11.873 12.295 13.59 12.581 1.717.286-6.866-7.435-7.153-8.576-.286-1.144-1.288-9.147-.799-9.332.489-.185 9.341 6.663 9.341 6.663s4.161.29 4.423 0c.262-.289.43-13.494 0-13.836-.43-.342-6.776-.213-7.163-.213-.388 0-1.501-2.1-1.93-2.271-.43-.171-4.846.087-5.146.087-.3 0-.08 8.139-.08 8.139-9.355-4.856-10.797-21.128-10.797-21.128 6.479 2.52 10.277 11.6 10.277 11.6-1.327-12.137-9.827-13.128-10.909-14.297-1.079-1.168-2.52-14.206-2.52-14.206s2.43 1.978 4.587 0c2.157-1.978 4.587-22.656-1.26-22.838-5.848-.18-3.778 13.038-3.778 13.038.831 8.614 8.368 10.428 8.546 2.16.181-8.272-1.351-16.276-3.777-17.894-2.43-1.62-3.959.718-3.959.718.091-5.753 2.643-10.368 2.643-10.368 6.322-12.958 24.662-9.804 24.662-9.804l.87 72.909s1.63-1.734 3.221-1.734c1.592 0 1.055 1.64.185 1.605-.869-.035.97-.168 1.875-.367.904-.198 1.822-3.014-1.162-5.885-2.989-2.871-1.78-14.182-1.323-15.79.46-1.609 4.768-5.167 8.618-6.66 3.85-1.494 7.18-2.181 8.043-1.84.862.343 2.241 2.813 1.895 2.813-.345 0-4.367-1.78-9.19.115-4.825 1.894-5.342 2.756-5.342 2.756s1.435 4.305 7.01 4.19c5.571-.115 5.34-3.328 5.34-3.328s-3.675-2.927-7.927-.576c0 0 0 2.67 2.528 2.798 2.527.13 3.218-2.683 3.218-2.683s4.137.89 4.94 2.683c.802 1.793-.803 5.066 0 4.379.802-.688 4.597-11.384.743-17.308-3.854-5.928-5.93-5.335-5.732-9.78.2-4.444-7.805-10.863-13.045-7.406-5.236 3.457-4.35-17.283-2.866-20.542 1.484-3.258 27.179.234 29.644 11.946 2.468 11.712-6.273 6.918-6.273 5.85 0-1.067 5.861-4.368 7.568-.959 1.707 3.409 3.658 4.748 0 17.032-3.658 12.284-2.349 13.31-2.349 13.31s-4.957 1.818-4.957 3.245c0 1.426 4.21-2.031 5.051-.908.841 1.12.094 17.197-4.583 18.037-4.675.841.562-14.485 1.497-14.3.936.188-.747 11.869-3.274 15.794-2.524 3.924-11.914 20.189-21.769 22.22 0 0 5.303-1.734 14.672-9.357l.646 9.657 9.373 9.688"
+  }), /*#__PURE__*/React.createElement("path", {
+    stroke: "var(--zd_emptysvg_primary_stroke)",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.012,
+    d: "M54.515 74.633s.066 1.874.534 2.143c.468.268 13.656.335 14.127 0 .471-.335.401-1.807.401-1.807l-15.062-.335ZM52.97 50.328s-3.271-1.399-3.39 1.961c-.118 3.36-.698 17.964 3.718 14.639M70.702 108.552l1.026 1.302h3.99"
+  }), /*#__PURE__*/React.createElement("path", {
+    stroke: "var(--zd_emptysvg_primary_stroke)",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.012,
+    d: "M75.695 106.571s3.303.475 4.249 1.423c0 0-1.303.311-1.833 1.211-.789 1.34-2.391 1.211-2.391 1.211"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "var(--zd_emptysvg_secondary_fill)",
+    d: "m73.158 70.744-16.434 1.264c-.404.844-.815.591-1.075.082l1.075-.082c.432-.905.857-3.068 1.08-7.522.538-10.768-2.964-19.651-4.445-23.016-1.482-3.365 17.779-18.844 17.779-9.422 0 7.537 1.346 28.938 2.02 38.696ZM84.853 82.325c-6.789-.216-2.829 7.806 0 11.844 0 2.961-3.637 8.479-3.098 12.248.538 3.769 6.869-1.48 9.293-2.019 2.425-.538 4.984-13.46 5.522-16.555.54-3.096-3.232-5.25-11.717-5.518Z"
+  }), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "a"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M7.4 14.8h133.2v118.4H7.4z"
+  }))));
+}
+ZiaAgent.propTypes = EmptyStateProps;
+ZiaAgent.defaultProps = { ...EmptyStateDefaultProps,
+  dataId: 'ziaAgent'
+};

package/lib/Loader/Loader.js

@@ -17,6 +17,8 @@ var _SVG = _interopRequireDefault(require("./../SVG/SVG"));
 
 var _SVGModule = _interopRequireDefault(require("./../SVG/SVG.module.css"));
 
+var _LoaderSvgModule = _interopRequireDefault(require("./LoaderSvg.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"); } }
@@ -45,23 +47,9 @@ var Loader = /*#__PURE__*/function (_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;
+    return _super.call(this, props);
   }
 
   _createClass(Loader, [{
@@ -73,10 +61,9 @@ var Loader = /*#__PURE__*/function (_React$PureComponent) {
       }, /*#__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("circle", {
+        className: "".concat(_SVGModule["default"].loaderWrapper, " ").concat(_LoaderSvgModule["default"].container),
+        dataId: dataId
+      }, /*#__PURE__*/_react["default"].createElement("circle", {
         fill: "none",
         stroke: "#089949",
         strokeWidth: 2,
@@ -85,7 +72,7 @@ var Loader = /*#__PURE__*/function (_React$PureComponent) {
         cx: 20,
         cy: 20,
         r: 13,
-        style: this.defsStyle,
+        className: _LoaderSvgModule["default"].outerCircle,
         strokeDasharray: 82,
         strokeDashoffset: 82
       }), /*#__PURE__*/_react["default"].createElement("circle", {
@@ -96,7 +83,7 @@ var Loader = /*#__PURE__*/function (_React$PureComponent) {
         cx: 20,
         cy: 20,
         r: 8,
-        style: this.circleStyle,
+        className: _LoaderSvgModule["default"].innerCircle,
         strokeDasharray: 50,
         strokeDashoffset: 50
       })));

package/lib/Loader/LoaderSvg.module.css

@@ -0,0 +1,30 @@
+@layer dot-svg.molecule {
+[dir=ltr] .container > svg{
+     animation:  loaderone-ltr 2s linear infinite;
+}[dir=rtl] .container > svg{
+     animation:  loaderone-rtl 2s linear infinite;
+}
+.outerCircle{
+    transform-origin: center;
+}
+[dir=ltr] .outerCircle{
+     animation: outerCircleAnimation 1.5s linear infinite;
+}
+[dir=rtl] .outerCircle{
+     animation: outerCircleAnimation 1.5s linear infinite;
+}
+.innerCircle{
+     transform-origin: center;
+}
+[dir=ltr] .innerCircle{
+     animation: innerCircleAnimation 1.2s linear infinite;
+}
+[dir=rtl] .innerCircle{
+     animation: innerCircleAnimation 1.2s linear infinite;
+}
+
+@keyframes outerCircleAnimation{to{stroke-dashoffset:-82}}
+@keyframes innerCircleAnimation{to{stroke-dashoffset:-50}}
+@keyframes loaderone-ltr{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}
+@keyframes loaderone-rtl{0%{transform:rotate(0deg)}to{transform:rotate(-359deg)}}
+}

package/lib/Loader/__tests__/__snapshots__/Loader.spec.js.snap

@@ -7,22 +7,17 @@ exports[`Loader componet sholud render the basic strucutr of Loader 1`] = `
   >
     <div
       aria-hidden="true"
-      class=" loaderWrapper default svgCenter "
+      class=" loaderWrapper container default svgCenter "
     >
       <svg
         data-id="loader"
         data-test-id="loader"
         height="100%"
-        style="animation: loaderone 2s linear infinite;"
         viewBox="0 0 40 40"
         width="100%"
       >
-        <defs>
-          <style>
-            @keyframes circleAnimation_1{to{stroke-dashoffset:-82}}@keyframes circleAnimation_2{to{stroke-dashoffset:-50}}@keyframes loaderone{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}
-          </style>
-        </defs>
         <circle
+          class="outerCircle"
           cx="20"
           cy="20"
           fill="none"
@@ -33,9 +28,9 @@ exports[`Loader componet sholud render the basic strucutr of Loader 1`] = `
           stroke-linecap="round"
           stroke-linejoin="round"
           stroke-width="2"
-          style="animation: circleAnimation_1 1.5s linear infinite; transform-origin: center;"
         />
         <circle
+          class="innerCircle"
           cx="20"
           cy="20"
           fill="none"
@@ -45,7 +40,6 @@ exports[`Loader componet sholud render the basic strucutr of Loader 1`] = `
           stroke-dashoffset="50"
           stroke-linecap="round"
           stroke-linejoin="round"
-          style="animation: circleAnimation_2 1.2s linear infinite; transform-origin: center;"
         />
       </svg>
     </div>

package/lib/SVG/SVG.module.css

@@ -1,3 +1,4 @@
+@layer dot-svg.base {
 .cover {
   height: 100% ;
 }
@@ -32,3 +33,4 @@
   height: 100% ;
   composes: loader
 }
+}

package/lib/css/EmptyStateVariables.module.css

@@ -1,3 +1,4 @@
+@layer dot-svg.variables {
 .default {
   /* empty svg default palette variables */
   --zd_emptysvg_primary_fill: var(--zdt_svg_default_primary_fill);
@@ -36,4 +37,5 @@
   --zd_emptysvg_tiny_circle: var(--zdt_svg_danger_tiny_circle);
   --zd_emptysvg_small_circle: var(--zdt_svg_danger_small_circle);
   --zd_emptysvg_circle_fill: var(--zdt_svg_danger_circle_fill);
-}
+}
+}

package/lib/svg_layer.module.css

@@ -0,0 +1 @@
+@layer dot-svg, dot-svg.theme, dot-svg.variables, dot-svg.base, dot-svg.molecule;

package/lib/v1/Loader/Loader.js

@@ -17,6 +17,8 @@ var _SVG = _interopRequireDefault(require("../SVG/SVG"));
 
 var _SVGModule = _interopRequireDefault(require("../../SVG/SVG.module.css"));
 
+var _V1_LoaderSvgModule = _interopRequireDefault(require("./V1_LoaderSvg.module.css"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -27,26 +29,14 @@ function Loader(props) {
   var dataId = props.dataId,
       isCover = props.isCover,
       className = props.className;
-  var viewBoxStyle = {
-    animation: 'loaderone 2s linear infinite'
-  };
-  var defsStyle = {
-    animation: 'circleAnimation_1 1.5s linear infinite',
-    transformOrigin: 'center'
-  };
-  var circleStyle = {
-    animation: 'circleAnimation_2 1.2s linear infinite',
-    transformOrigin: 'center'
-  };
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(isCover ? _SVGModule["default"].center : _SVGModule["default"].loader, " ").concat(className)
   }, /*#__PURE__*/_react["default"].createElement(_SVG["default"], {
     viewBox: "0 0 40 40",
     name: "Loader",
-    className: "".concat(_SVGModule["default"].loaderWrapper),
-    dataId: dataId,
-    styleName: 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("circle", {
+    className: "".concat(_SVGModule["default"].loaderWrapper, " ").concat(_V1_LoaderSvgModule["default"].container),
+    dataId: dataId
+  }, /*#__PURE__*/_react["default"].createElement("circle", {
     fill: "none",
     stroke: "#089949",
     strokeWidth: 2,
@@ -55,7 +45,7 @@ function Loader(props) {
     cx: 20,
     cy: 20,
     r: 13,
-    style: defsStyle,
+    className: _V1_LoaderSvgModule["default"].outerCircle,
     strokeDasharray: 82,
     strokeDashoffset: 82
   }), /*#__PURE__*/_react["default"].createElement("circle", {
@@ -66,7 +56,7 @@ function Loader(props) {
     cx: 20,
     cy: 20,
     r: 8,
-    style: circleStyle,
+    className: _V1_LoaderSvgModule["default"].innerCircle,
     strokeDasharray: 50,
     strokeDashoffset: 50
   })));

package/lib/v1/Loader/V1_LoaderSvg.module.css

@@ -0,0 +1,30 @@
+@layer dot-svg.molecule {
+[dir=ltr] .container > svg{
+     animation:  loaderone-ltr 2s linear infinite;
+}[dir=rtl] .container > svg{
+     animation:  loaderone-rtl 2s linear infinite;
+}
+.outerCircle{
+    transform-origin: center;
+}
+[dir=ltr] .outerCircle{
+     animation: outerCircleAnimation 1.5s linear infinite;
+}
+[dir=rtl] .outerCircle{
+     animation: outerCircleAnimation 1.5s linear infinite;
+}
+.innerCircle{
+     transform-origin: center;
+}
+[dir=ltr] .innerCircle{
+     animation: innerCircleAnimation 1.2s linear infinite;
+}
+[dir=rtl] .innerCircle{
+     animation: innerCircleAnimation 1.2s linear infinite;
+}
+
+@keyframes outerCircleAnimation{to{stroke-dashoffset:-82}}
+@keyframes innerCircleAnimation{to{stroke-dashoffset:-50}}
+@keyframes loaderone-ltr{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}
+@keyframes loaderone-rtl{0%{transform:rotate(0deg)}to{transform:rotate(-359deg)}}
+}

package/lib/v1/emptystate/version3/AgentRoom.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = AgentRoom;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = require("../props/propTypes");
+
+var _defaultProps = require("../props/defaultProps");
+
+var _SVG = _interopRequireDefault(require("../../SVG/SVG"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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); }
+
+function AgentRoom(props) {
+  return /*#__PURE__*/_react["default"].createElement(_SVG["default"], _extends({
+    viewBox: "0 0 500 500",
+    name: "AgentRoom",
+    styleName: {
+      fill: 'none'
+    }
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    opacity: 0.1,
+    d: "M200.502 140.5C200.502 140.5 317.252 62.5004 376.252 86.0004C435.252 109.5 475.502 306.75 311.502 395.25C147.502 483.75 73.002 291.25 72.252 257.25C71.752 224 72.252 145.5 200.502 140.5Z",
+    fill: "var(--zd_emptysvg_primary_fill)"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M35 293.252C35 293.252 34.75 293.252 35 293.252C34.25 293.252 33.75 292.502 33.75 292.002L34.75 273.252C34.75 272.502 35.25 272.002 36 272.002C36.75 272.002 37.25 272.502 37.25 273.252L36.25 292.002C36 292.752 35.5 293.252 35 293.252Z",
+    fill: "var(--zd_emptysvg_plus)"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M44.501 284.501L26.001 283.501C25.251 283.501 24.751 282.751 24.751 282.251C24.751 281.501 25.501 281.001 26.001 281.001L44.251 282.001C45.001 282.001 45.501 282.751 45.501 283.251C45.751 284.001 45.251 284.501 44.501 284.501Z",
+    fill: "var(--zd_emptysvg_plus)"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M428 52.002C421.5 52.002 416.25 57.252 416.25 63.752C416.25 70.252 421.5 75.502 428 75.502C434.5 75.502 439.75 70.252 439.75 63.752C439.75 57.252 434.25 52.002 428 52.002ZM428 73.252C423 73.252 418.75 69.002 418.75 63.752C418.75 58.502 423 54.252 428 54.252C433 54.252 437.25 58.502 437.25 63.752C437.25 69.002 433 73.252 428 73.252Z",
+    fill: "var(--zd_emptysvg_medium_circle)"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M311 432.754C306.25 432.754 302.5 436.504 302.5 441.254C302.5 446.004 306.25 449.754 311 449.754C315.75 449.754 319.5 446.004 319.5 441.254C319.5 436.754 315.75 432.754 311 432.754ZM311 447.504C307.75 447.504 305 444.754 305 441.254C305 437.754 307.75 435.004 311 435.004C314.25 435.004 317 437.754 317 441.254C317 444.754 314.25 447.504 311 447.504Z",
+    fill: "var(--zd_emptysvg_medium_circle)"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M202.251 50C198.001 50 194.751 53.5 194.751 57.5C194.751 61.5 198.001 65 202.251 65C206.501 65 209.751 61.5 209.751 57.5C209.751 53.5 206.501 50 202.251 50ZM202.251 62.75C199.501 62.75 197.251 60.5 197.251 57.75C197.251 55 199.501 52.75 202.251 52.75C205.001 52.75 207.251 55 207.251 57.75C207.251 60.5 205.001 62.75 202.251 62.75Z",
+    fill: "var(--zd_emptysvg_cross)"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M474.5 324.498C474 323.998 473.25 323.998 472.75 324.498L466.75 329.998L461.5 323.998C461 323.498 460.25 323.498 459.75 323.998C459.25 324.498 459.25 325.248 459.75 325.748L465 331.748L459 337.248C458.5 337.748 458.5 338.498 459 338.998C459.25 339.248 459.5 339.498 460 339.498C460.25 339.498 460.5 339.498 460.75 339.248L466.75 333.748L472 339.748C472.25 339.998 472.5 340.248 473 340.248C473.25 340.248 473.5 340.248 473.75 339.998C474.25 339.498 474.25 338.748 473.75 338.248L468.5 332.248L474.5 326.748C475 325.998 475 324.998 474.5 324.498Z",
+    fill: "var(--zd_emptysvg_cross)"
+  }), /*#__PURE__*/_react["default"].createElement("g", {
+    clipPath: "url(#clip0_7313_166659)"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M32.2414 112.764C32.2414 112.764 1.32955 154.345 37.0991 158.921C62.6965 162.196 178.47 166.109 223.2 155.919C240.975 151.87 225.962 123.018 222.441 119.894C210.059 108.912 32.2414 112.764 32.2414 112.764Z",
+    fill: "var(--zd_emptysvg_secondary_fill)"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M40.0973 242.979C40.0973 242.979 9.18551 284.56 44.9551 289.136C70.5524 292.411 186.326 296.324 231.056 286.134C248.831 282.085 233.818 253.232 230.297 250.109C217.915 239.126 40.0973 242.979 40.0973 242.979Z",
+    fill: "var(--zd_emptysvg_secondary_fill)"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M163.314 180.156C163.314 180.156 134.501 221.737 167.842 226.313C191.702 229.588 299.616 233.501 341.309 223.311C357.877 219.261 343.883 190.409 340.601 187.286C329.06 176.303 163.314 180.156 163.314 180.156Z",
+    fill: "var(--zd_emptysvg_secondary_fill)"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M437.74 404.444C437.74 404.444 425.852 380.849 396.775 374.707C367.697 368.564 341.346 346.096 338.711 331.338C336.076 316.58 336.673 301.721 339.878 302.573C343.083 303.424 364.479 340.441 360.658 341.289C356.836 342.137 299.754 228.231 302.551 223.159C305.349 218.087 311.998 215.937 317.204 223.543C325.557 235.743 311.562 237.58 310.12 236.22C308.678 234.86 320.331 229.405 322.416 231.278C324.501 233.151 348.032 262.021 343.015 265.183C337.999 268.345 329.721 270.592 329.721 270.592C329.721 270.592 342.421 260.524 347.017 264.494C351.613 268.465 372.069 296.015 369.905 296.436C367.74 296.857 349.31 265.198 350.657 262.593C352.004 259.988 362.484 252.91 371.438 263.727C380.391 274.544 382.898 279.098 382.898 279.098C382.898 279.098 367.833 267.103 374.162 263.242C377.465 261.227 382.216 257.89 386.841 259.603C397.306 263.479 408.159 277.385 408.308 280.039C408.694 286.917 395.641 267.999 396.298 267.296C396.955 266.594 407.812 257.364 418.559 278.4C429.306 299.437 438.122 323.959 444.941 329.107C451.759 334.255 459.092 341.108 464.71 353.212C470.328 365.316 491.45 381.004 491.45 381.004",
+    stroke: "var(--zd_emptysvg_primary_stroke)",
+    strokeWidth: 2.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M377.948 354.819C377.948 354.819 354.825 312.987 363.062 310.195C371.3 307.403 398.022 280.533 409.006 295.071C419.991 309.609 437.665 346.547 452.595 358.174C467.525 369.801 394.814 382.029 377.948 354.819Z",
+    fill: "var(--zd_emptysvg_secondary_fill)"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M129.358 168.907C129.358 168.907 16.0076 170.223 11.8329 165.192C7.65829 160.161 10.1631 98.9527 11.8329 98.1143C13.5028 97.2758 246.203 93.8656 246.203 100.935C246.203 108.005 251.519 169.078 245.674 170.755C239.83 172.432 150.431 175.681 151.266 173.165C152.101 170.65 351.648 162.131 357.493 173.87C363.337 185.608 365.007 229.709 362.502 233.773C359.997 237.837 175.479 240.377 167.964 235.346C160.45 230.315 236.852 231.301 240.621 233.683C244.389 236.064 245.394 294.854 244.386 297.504C241.457 305.21 23.605 304.443 23.1342 300.661C22.6635 296.879 21.8169 229.377 25.1121 230.795C28.4074 232.214 133.918 233.902 138.155 233.902C138.155 233.902 136.012 186.846 138.613 184.233",
+    stroke: "var(--zd_emptysvg_primary_stroke)",
+    strokeWidth: 2.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M22.1292 218.571L22.3628 212.354",
+    stroke: "var(--zd_emptysvg_primary_stroke)",
+    strokeWidth: 2.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M22.6978 203.477L23.1984 190.159",
+    stroke: "var(--zd_emptysvg_primary_stroke)",
+    strokeWidth: 2.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M23.3633 185.719L23.597 179.502",
+    stroke: "var(--zd_emptysvg_primary_stroke)",
+    strokeWidth: 2.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("clipPath", {
+    id: "clip0_7313_166659"
+  }, /*#__PURE__*/_react["default"].createElement("rect", {
+    width: 485,
+    height: 311,
+    transform: "translate(8 95)"
+  }))));
+}
+
+AgentRoom.propTypes = _propTypes.EmptyStateProps;
+AgentRoom.defaultProps = _objectSpread(_objectSpread({}, _defaultProps.EmptyStateDefaultProps), {}, {
+  dataId: 'agentRoom'
+});