contentoh-components-library 21.2.72 → 21.2.73

package/.env.development

@@ -21,8 +21,11 @@ REACT_APP_READ_REQUIRED_ORDERS=https://fc069ovhuk.execute-api.us-east-1.amazonaw
 REACT_APP_CATEGORY_ENDPOINT=https://fc069ovhuk.execute-api.us-east-1.amazonaws.com/dev/categories
 REACT_APP_READ_PROVIDERS=https://fc069ovhuk.execute-api.us-east-1.amazonaws.com/dev/providers
 REACT_APP_PENDING_INVITATIONS=https://fc069ovhuk.execute-api.us-east-1.amazonaws.com/dev/pending-invitations
-
+REACT_APP_POST_MESSAGE=https://fc069ovhuk.execute-api.us-east-1.amazonaws.com/dev/products-chat
+REACT_APP_KEY_UPLOAD_TO_S3=AKIA5CPHLQTT46EQ5TIK
+REACT_APP_ACCESS_KEY_UPLOAD_TO_S3=tZDdrmvwxM1cScspfxFM3XpU4HSYrCNPazyHd0BL
 REACT_APP_IMAGES_BUCKET=content-management-images
+
 REACT_APP_KEY_UPLOAD_TO_S3=AKIA5CPHLQTT46EQ5TIK
 REACT_APP_IMAGES_PROFILE_BUCKET=content-management-profile
 REACT_APP_ACCESS_KEY_UPLOAD_TO_S3=tZDdrmvwxM1cScspfxFM3XpU4HSYrCNPazyHd0BL

package/dist/components/molecules/CustomSelect/CustomSelect.stories.js

@@ -11,6 +11,8 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/
 
 var _index = require("./index");
 
+var _starIcon = _interopRequireDefault(require("../../../assets/images/customSelect/starIcon.svg"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _default = {
@@ -26,29 +28,26 @@ var Template = function Template(args) {
 var CustomSelectDefault = Template.bind({});
 exports.CustomSelectDefault = CustomSelectDefault;
 CustomSelectDefault.args = {
-  selectLabel: "Todos los departamentos",
+  // selectLabel: "Todos los departamentos",
   defaultOption: "Todos los departamentos",
   options: [{
-    id: 1,
-    value: "Decoración",
-    subOptions: [{
-      id: 1,
-      value: "Espejos"
-    }, {
-      id: 2,
-      value: "Persianas"
-    }]
-  }, {
-    id: 2,
-    value: "Eléctrico"
-  }, {
-    id: 3,
-    value: "Ferretería"
-  }, {
-    id: 4,
-    value: "Herramientas"
+    id: 47,
+    name: "Enero 2023",
+    isSelected: true
   }, {
-    id: 5,
-    value: "Iluminación"
-  }]
+    id: 49,
+    name: "Mis Favoritos"
+  }],
+  onClickItem: function onClickItem(v, id) {
+    if (v) {
+      console.log("Agregar a la lista", id);
+    } else {
+      console.log("Eliminar a la lista", id);
+    }
+  },
+  icon: _starIcon.default,
+  showSearchBar: true,
+  customOptions: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+    children: "Esto es un customOptions"
+  })
 };

package/dist/components/molecules/CustomSelect/SelectItem.js

@@ -26,7 +26,8 @@ var SelecItem = function SelecItem(_ref) {
       customSelectId = _ref.customSelectId,
       setParameterArray = _ref.setParameterArray,
       activeFilters = _ref.activeFilters,
-      setActiveFilters = _ref.setActiveFilters;
+      setActiveFilters = _ref.setActiveFilters,
+      onClickItem = _ref.onClickItem;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -46,6 +47,10 @@ var SelecItem = function SelecItem(_ref) {
         id: "main-item-" + option.id,
         label: option.name,
         onChange: function onChange(e) {
+          if (onClickItem) {
+            onClickItem(e.target.checked, option.id);
+          }
+
           var subOptions = option.subOptions;
           var filtersCopy = (0, _objectSpread2.default)({}, activeFilters);
 
@@ -108,6 +113,10 @@ var SelecItem = function SelecItem(_ref) {
             label: sub.name,
             defaultChecked: activeFilters[option.name] && activeFilters[option.name][sub.name],
             onChange: function onChange(e) {
+              if (onClickItem) {
+                onClickItem(e.target.checked, sub.id);
+              }
+
               if (e.target.checked) {
                 setParameterArray(function (current) {
                   return [].concat((0, _toConsumableArray2.default)(current), [sub.id]).sort(function (a, b) {

package/dist/components/molecules/CustomSelect/index.js

@@ -23,8 +23,6 @@ var _searchIcon = _interopRequireDefault(require("../../../assets/images/customS
 
 var _customHooks = require("../../../global-files/customHooks");
 
-var _SelectItem = require("./SelectItem");
-
 var _Calendar = require("../../organisms/Calendar");
 
 var _CustomSelectItem = require("../../atoms/CustomSelectItem");
@@ -46,7 +44,8 @@ var CustomSelect = function CustomSelect(_ref) {
       onClickItem = _ref.onClickItem,
       icon = _ref.icon,
       customOptions = _ref.customOptions,
-      showFilterString = _ref.showFilterString;
+      _ref$isSingleSelect = _ref.isSingleSelect,
+      isSingleSelect = _ref$isSingleSelect === void 0 ? false : _ref$isSingleSelect;
 
   var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -223,7 +222,7 @@ var CustomSelect = function CustomSelect(_ref) {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "filters-container",
         children: filters === null || filters === void 0 ? void 0 : filters.map(function (option) {
-          return customSelectId === "dates-select" ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          return isSingleSelect ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: "dates-select-item",
             onClick: function onClick() {
               option.function ? option.function(setShowDatePicker) : setShowDatePicker(true);

package/dist/components/molecules/HeaderTop/index.js

@@ -13,6 +13,8 @@ var _index2 = require("../../atoms/GeneralButton/index");
 
 var _react = require("react");
 
+var _index3 = require("../../atoms/ChatPopUp/index");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var HeaderTop = function HeaderTop(_ref) {
@@ -25,11 +27,14 @@ var HeaderTop = function HeaderTop(_ref) {
     ref: headerTop,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
       text: "Edici\xF3n de producto"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Button, {
-      buttonType: "close-button",
-      onClick: function onClick() {
-        window.location.href = "/products";
-      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "buttons-top",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Button, {
+        buttonType: "close-button",
+        onClick: function onClick() {
+          window.location.href = "/products";
+        }
+      })
     })]
   });
 };

package/dist/components/molecules/HeaderTop/styles.js

@@ -13,6 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  .buttons-top {\n    display: flex;\n    align-items: center;\n  }\n"])));
 
 exports.Container = Container;

package/dist/components/pages/Dashboard/Dashboard.stories.js

@@ -59,5 +59,5 @@ DashboardDeafult.args = {
     },
     src: "https://content-management-profile-prod.s3.amazonaws.com/id-425/425.png?1666639556174"
   },
-  jwt: "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIyM2EzZjQ5Ni00ZTM4LTRlMTItOWJmNS03ZjkwYjc3YTJmMzUiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwiY29nbml0bzp1c2VybmFtZSI6IjIzYTNmNDk2LTRlMzgtNGUxMi05YmY1LTdmOTBiNzdhMmYzNSIsImF1ZCI6IjUyZDlza2tkY2c4cWpwODhvb2sxdXNlNm1rIiwiZXZlbnRfaWQiOiJiMTRhODNhNS05NDhjLTQyMDgtOTUzNi02NTBiZWFhYjI2MmYiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2NjYzOTU1NiwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY2NjY0MzE1NiwiaWF0IjoxNjY2NjM5NTU2LCJlbWFpbCI6ImxhZGlib2g3ODVAbWkxNjYuY29tIn0.orGhdg1rhoD52Y5hOfr1H2ZWcfx57O_xSu-i8rZaWqQG2FrdeaoNNZ4r207uhaZF-gyuQevMkb02b4GkpMX1WaPRoS6f0OR0zNrOMXiag262G6kog6YuwiAiRasgfpGOhvOMRpwnm9zV3avqaqEI7S1B4VUl688NmwiVd0Zv6U3yuU2uyOc8Sb0wFKaQAcREydK-xNEwDTXzbsAewl3dXMA6lROQDn5ZOumVbAcZVRw1_z8DwGlsLdho_WwXHiDR_fcnFKZAXm1Jf8wJmQgT6EnmRrOIBROLv0e1uaW78nnvLKL7aWUyLr_VUlOb66AiHw0WnDUbVsDKn1nemMF2_Q"
+  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI5YTIxMzEyOC02NDgyLTRjMTYtYTRiNi02ZTY0ZjIyNWIxYmQiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6IjlhMjEzMTI4LTY0ODItNGMxNi1hNGI2LTZlNjRmMjI1YjFiZCIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJkYWVmODU5ZC00ODQyLTRkNDQtYTNiNC02ODZlNmJhNTVkMjgiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2NzA3MjM5MCwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY2NzA3NTk5MCwiaWF0IjoxNjY3MDcyMzkwLCJlbWFpbCI6ImlzbWFlbDk3bG9wZXpAZ21haWwuY29tIn0.FbGtX1sC3b2c76hGcxkx-GSurEMKZSwNVEnuUOlV9Dhhqrre1VmtfjvodH_3Leipr4g38Sukb6Pr9lVgEy6DJ57MShpS63niXE7Y43FUJ4gVe4F6k8sYbXUaZYS2vw2_PibnycNsFrpD76fZ_ulTqlSuHNrnzf2mjcDFJ5Qlj8hcLlRnpu_DFVpIiXVyK9kvLE5jImHvo4oQZUSrnuIs-oUE7j8mX8-GH2e95Up2wnBMak6S6meMibKoUEFo2qdtDSFbS1JCMBq4vWw2DxToX-7AGXGp_CLxf-sjJ_UpLmFa0KyyxjhAE2cR9BGo8DM8LEUIqMvcz2KH-7e9QTgisA"
 };

package/dist/components/pages/Dashboard/index.js

@@ -438,7 +438,8 @@ var Dashboard = function Dashboard(_ref) {
         placeHolder: "Buscar fecha",
         customSelectId: "dates-select",
         parameterArray: datesRange,
-        setParameterArray: setDatesRange
+        setParameterArray: setDatesRange,
+        isSingleSelect: true
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomSelect.CustomSelect, {
         showFilterString: true,
         showSearchBar: true,
@@ -458,7 +459,7 @@ var Dashboard = function Dashboard(_ref) {
         customSelectId: "category-select",
         parameterArray: categoryId,
         setParameterArray: setCategoryId,
-        defaultOption: "Todas las categorías"
+        defaultOption: "Todas las categor\xEDas"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomSelect.CustomSelect, {
         showFilterString: true,
         showSearchBar: true,

package/dist/components/pages/ProviderProductEdition/index.js

@@ -1550,10 +1550,6 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
 
             case 8:
               evalResponse = _context13.sent;
-              console.log(evalResponse.map(function (_ref15) {
-                var data = _ref15.data;
-                return JSON.parse(data.body);
-              }));
               userType = user.is_retailer === 1 ? "CA" : "P";
               productTemp = product;
               productTemp.article_status = "".concat(result).concat(userType);
@@ -1582,24 +1578,24 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
                 idCategory: productTemp.article.id_category,
                 product: productTemp
               }));
-              _context13.next = 26;
+              _context13.next = 25;
               return loadData();
 
-            case 26:
-              _context13.next = 31;
+            case 25:
+              _context13.next = 30;
               break;
 
-            case 28:
-              _context13.prev = 28;
+            case 27:
+              _context13.prev = 27;
               _context13.t0 = _context13["catch"](0);
               console.log(_context13.t0);
 
-            case 31:
+            case 30:
             case "end":
               return _context13.stop();
           }
         }
-      }, _callee13, null, [[0, 28]]);
+      }, _callee13, null, [[0, 27]]);
     }));
 
     return function validateAll(_x8) {
@@ -1608,7 +1604,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
   }();
 
   var evaluationToRetailer = /*#__PURE__*/function () {
-    var _ref16 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee14(result) {
+    var _ref15 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee14(result) {
       var data, prod, statusComplete;
       return _regenerator.default.wrap(function _callee14$(_context14) {
         while (1) {
@@ -1650,7 +1646,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
     }));
 
     return function evaluationToRetailer(_x9) {
-      return _ref16.apply(this, arguments);
+      return _ref15.apply(this, arguments);
     };
   }();
 

package/dist/global-files/data.js

@@ -294,6 +294,7 @@ var getNewStatus = function getNewStatus(statusArray) {
   if (lookupString.includes("AP")) return "AP";
   if (lookupString.includes("R")) return "R";
   if (lookupString.includes("NA")) return "NA";
+  if (lookupString.includes("Ex")) return "EX";
   return new Error("Status not found");
 };
 

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.2.72",
+  "version": "21.2.73",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",
     "@aws-amplify/ui-react": "^2.17.0",
     "@babel/runtime": "^7.17.2",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@mui/material": "^5.10.8",
+    "@mui/styled-engine-sc": "^5.10.6",
     "@storybook/addon-postcss": "^2.0.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
@@ -19,6 +23,7 @@
     "draft-js": "^0.11.7",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.2",
+    "moment": "^2.29.4",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-chartjs-2": "^4.0.1",
@@ -77,10 +82,10 @@
   "devDependencies": {
     "@babel/cli": "^7.17.10",
     "@babel/core": "^7.16.0",
-    "@storybook/addon-actions": "^6.5.7",
-    "@storybook/addon-essentials": "^6.5.7",
-    "@storybook/addon-links": "^6.5.7",
-    "@storybook/react": "^6.5.7",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/react": "^6.5.13",
     "auth": "^0.0.9",
     "auto": "^10.36.5",
     "babel-loader": "^8.2.3",

package/src/assets/images/chatPopup/close.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+  <path id="close_FILL0_wght400_GRAD0_opsz48" d="M6.385,19.308,5.308,18.231l5.923-5.923L5.308,6.385,6.385,5.308l5.923,5.923,5.923-5.923,1.077,1.077-5.923,5.923,5.923,5.923-1.077,1.077-5.923-5.923Z" transform="translate(-5.308 -5.308)" fill="#fff"/>
+</svg>

package/src/assets/images/chatPopup/doc.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 51 65" fill="#fff" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round"><use xlink:href="#C" x=".5" y=".5"/><defs><filter id="A" x="-6%" y="-4.6875%" width="116%" height="112.5%"><feGaussianBlur in="SourceAlpha" stdDeviation="1"/><feOffset dx="2" dy="2" result="B"/><feFlood flood-color="#000" flood-opacity=".2"/><feComposite in2="B" operator="in" result="C"/><feMerge><feMergeNode in="C"/><feMergeNode in="SourceGraphic"/></feMerge></filter><filter id="B" x="-27.5%" y="-32.5%" width="160%" height="160%"><feGaussianBlur in="SourceAlpha" stdDeviation="2"/><feOffset dx="1" dy="-1" result="B"/><feFlood flood-color="#000" flood-opacity=".2"/><feComposite in2="B" operator="in" result="C"/><feMerge><feMergeNode in="C"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><symbol id="C" overflow="visible"><path d="M50 20L30 0H5a4.99 4.99 0 0 0-5 5v54a4.99 4.99 0 0 0 5 5h40a4.99 4.99 0 0 0 5-5z" fill="#2196f3" stroke="none" filter="url(#A)"/><defs/><g transform="matrix(-1 0 0 -1 50 20)"><path d="M20 20L0 0h15a4.99 4.99 0 0 1 5 5z" fill="#90caf9" stroke="none" filter="url(#B)"/><defs/></g><path d="M10 17.5h17.5V20H10zm0 10h27.5V30H10zm0 10h27.5V40H10zm0 10h27.5V50H10z" stroke="none"/></symbol></svg>

package/src/assets/images/chatPopup/document.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 66 81" fill="#fff" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round"><use xlink:href="#A" x=".5" y=".5"/><symbol id="A" overflow="visible"><path d="M44.674 0H0v79.977h65V20.012L44.674 0zM60.93 75.993H4.07V4.007h38.593v18.008h18.291v53.978zm-10.151-40H14.221v-3.984h36.558zm0 9.995H14.221v-3.984h36.558zm0 10.017H14.221v-4.007h36.558zm0 9.994H14.221v-4.007h36.558z" fill="#2a3282" stroke="none"/></symbol></svg>

package/src/assets/images/chatPopup/iconChat.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #707070;
+      }
+
+      .cls-2 {
+        clip-path: url(#clip-path);
+      }
+    </style>
+    <clipPath id="clip-path">
+      <rect id="Rectángulo_368" data-name="Rectángulo 368" class="cls-1" width="14" height="14" transform="translate(1737 869)"/>
+    </clipPath>
+  </defs>
+  <g id="Enmascarar_grupo_83" data-name="Enmascarar grupo 83" class="cls-2" transform="translate(-1737 -869)">
+    <path id="forum_FILL0_wght400_GRAD0_opsz48" class="cls-1" d="M1.4,11.9V2.135a.728.728,0,0,1,.228-.49A.651.651,0,0,1,2.1,1.4h9.082a.675.675,0,0,1,.49.236.714.714,0,0,1,.227.5v6.23a.728.728,0,0,1-.227.49.666.666,0,0,1-.49.245H4.2Zm3.518.7a.678.678,0,0,1-.481-.245.716.716,0,0,1-.236-.49V10.15h8.75V4.2H14.7a.651.651,0,0,1,.472.245.744.744,0,0,1,.227.508v10.43L12.617,12.6ZM10.85,2.45H2.45V9.363L3.763,8.05H10.85Zm-8.4,0v0Z" transform="translate(1735.6 867.609)"/>
+  </g>
+</svg>

package/src/assets/images/chatPopup/iconPlus.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <path id="Icono_cargar_más" data-name="Icono, cargar más" d="M18,28a9.64,9.64,0,0,1-7.078-2.922A9.64,9.64,0,0,1,8,18a9.64,9.64,0,0,1,2.922-7.078A9.64,9.64,0,0,1,18,8a9.665,9.665,0,0,1,4.656,1.078,11.027,11.027,0,0,1,3.469,2.953V8H28v7.938H20.063V14.063h5.25a9.572,9.572,0,0,0-3.031-3.031A7.888,7.888,0,0,0,18,9.875,8.056,8.056,0,0,0,9.875,18,8.056,8.056,0,0,0,18,26.125a8.2,8.2,0,0,0,4.75-1.484,7.72,7.72,0,0,0,3-3.922h1.937A9.576,9.576,0,0,1,24.094,26,9.947,9.947,0,0,1,18,28Z" transform="translate(-8 -8)" fill="#8a6caa"/>
+</svg>

package/src/assets/images/chatPopup/pdf.svg

@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, 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 303.188 303.188" style="enable-background:new 0 0 303.188 303.188;" xml:space="preserve">
+<g>
+	<polygon style="fill:#E8E8E8;" points="219.821,0 32.842,0 32.842,303.188 270.346,303.188 270.346,50.525 	"/>
+	<path style="fill:#FB3449;" d="M230.013,149.935c-3.643-6.493-16.231-8.533-22.006-9.451c-4.552-0.724-9.199-0.94-13.803-0.936
+		c-3.615-0.024-7.177,0.154-10.693,0.354c-1.296,0.087-2.579,0.199-3.861,0.31c-1.314-1.36-2.584-2.765-3.813-4.202
+		c-7.82-9.257-14.134-19.755-19.279-30.664c1.366-5.271,2.459-10.772,3.119-16.485c1.205-10.427,1.619-22.31-2.288-32.251
+		c-1.349-3.431-4.946-7.608-9.096-5.528c-4.771,2.392-6.113,9.169-6.502,13.973c-0.313,3.883-0.094,7.776,0.558,11.594
+		c0.664,3.844,1.733,7.494,2.897,11.139c1.086,3.342,2.283,6.658,3.588,9.943c-0.828,2.586-1.707,5.127-2.63,7.603
+		c-2.152,5.643-4.479,11.004-6.717,16.161c-1.18,2.557-2.335,5.06-3.465,7.507c-3.576,7.855-7.458,15.566-11.815,23.02
+		c-10.163,3.585-19.283,7.741-26.857,12.625c-4.063,2.625-7.652,5.476-10.641,8.603c-2.822,2.952-5.69,6.783-5.941,11.024
+		c-0.141,2.394,0.807,4.717,2.768,6.137c2.697,2.015,6.271,1.881,9.4,1.225c10.25-2.15,18.121-10.961,24.824-18.387
+		c4.617-5.115,9.872-11.61,15.369-19.465c0.012-0.018,0.024-0.036,0.037-0.054c9.428-2.923,19.689-5.391,30.579-7.205
+		c4.975-0.825,10.082-1.5,15.291-1.974c3.663,3.431,7.621,6.555,11.939,9.164c3.363,2.069,6.94,3.816,10.684,5.119
+		c3.786,1.237,7.595,2.247,11.528,2.886c1.986,0.284,4.017,0.413,6.092,0.335c4.631-0.175,11.278-1.951,11.714-7.57
+		C231.127,152.765,230.756,151.257,230.013,149.935z M119.144,160.245c-2.169,3.36-4.261,6.382-6.232,9.041
+		c-4.827,6.568-10.34,14.369-18.322,17.286c-1.516,0.554-3.512,1.126-5.616,1.002c-1.874-0.11-3.722-0.937-3.637-3.065
+		c0.042-1.114,0.587-2.535,1.423-3.931c0.915-1.531,2.048-2.935,3.275-4.226c2.629-2.762,5.953-5.439,9.777-7.918
+		c5.865-3.805,12.867-7.23,20.672-10.286C120.035,158.858,119.587,159.564,119.144,160.245z M146.366,75.985
+		c-0.602-3.514-0.693-7.077-0.323-10.503c0.184-1.713,0.533-3.385,1.038-4.952c0.428-1.33,1.352-4.576,2.826-4.993
+		c2.43-0.688,3.177,4.529,3.452,6.005c1.566,8.396,0.186,17.733-1.693,25.969c-0.299,1.31-0.632,2.599-0.973,3.883
+		c-0.582-1.601-1.137-3.207-1.648-4.821C147.945,83.048,146.939,79.482,146.366,75.985z M163.049,142.265
+		c-9.13,1.48-17.815,3.419-25.979,5.708c0.983-0.275,5.475-8.788,6.477-10.555c4.721-8.315,8.583-17.042,11.358-26.197
+		c4.9,9.691,10.847,18.962,18.153,27.214c0.673,0.749,1.357,1.489,2.053,2.22C171.017,141.096,166.988,141.633,163.049,142.265z
+		 M224.793,153.959c-0.334,1.805-4.189,2.837-5.988,3.121c-5.316,0.836-10.94,0.167-16.028-1.542
+		c-3.491-1.172-6.858-2.768-10.057-4.688c-3.18-1.921-6.155-4.181-8.936-6.673c3.429-0.206,6.9-0.341,10.388-0.275
+		c3.488,0.035,7.003,0.211,10.475,0.664c6.511,0.726,13.807,2.961,18.932,7.186C224.588,152.585,224.91,153.321,224.793,153.959z"/>
+	<polygon style="fill:#FB3449;" points="227.64,25.263 32.842,25.263 32.842,0 219.821,0 	"/>
+	<g>
+		<path style="fill:#A4A9AD;" d="M126.841,241.152c0,5.361-1.58,9.501-4.742,12.421c-3.162,2.921-7.652,4.381-13.472,4.381h-3.643
+			v15.917H92.022v-47.979h16.606c6.06,0,10.611,1.324,13.652,3.971C125.321,232.51,126.841,236.273,126.841,241.152z
+			 M104.985,247.387h2.363c1.947,0,3.495-0.546,4.644-1.641c1.149-1.094,1.723-2.604,1.723-4.529c0-3.238-1.794-4.857-5.382-4.857
+			h-3.348C104.985,236.36,104.985,247.387,104.985,247.387z"/>
+		<path style="fill:#A4A9AD;" d="M175.215,248.864c0,8.007-2.205,14.177-6.613,18.509s-10.606,6.498-18.591,6.498h-15.523v-47.979
+			h16.606c7.701,0,13.646,1.969,17.836,5.907C173.119,235.737,175.215,241.426,175.215,248.864z M161.76,249.324
+			c0-4.398-0.87-7.657-2.609-9.78c-1.739-2.122-4.381-3.183-7.926-3.183h-3.773v26.877h2.888c3.939,0,6.826-1.143,8.664-3.43
+			C160.841,257.523,161.76,254.028,161.76,249.324z"/>
+		<path style="fill:#A4A9AD;" d="M196.579,273.871h-12.766v-47.979h28.355v10.403h-15.589v9.156h14.374v10.403h-14.374
+			L196.579,273.871L196.579,273.871z"/>
+	</g>
+	<polygon style="fill:#D1D3D3;" points="219.821,50.525 270.346,50.525 219.821,0 	"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

package/src/assets/images/chatPopup/remove.svg

@@ -0,0 +1,4 @@
+<svg width="15" height="15" viewBox="0 0 30 31" fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg">
+<line x1="7.70711" y1="7.5" x2="23" y2="22.7929" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23 7.5L8 22.5" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/images/chatPopup/send.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11.124" height="11.008" viewBox="0 0 11.124 11.008">
+  <path id="arrow_upward_FILL1_wght400_GRAD0_opsz48" d="M9.18,14.829V6.34l-4,4L4.5,9.664,9.664,4.5l5.164,5.164-.678.678-4-4v8.489Z" transform="translate(-4.102 -4.102)" fill="#fff" stroke="#fff" stroke-width="0.563"/>
+</svg>

package/src/assets/images/chatPopup/svgIcon.svg

@@ -0,0 +1,109 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, 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 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<rect x="370.759" y="406.069" style="fill:#E4EAF6;" width="17.655" height="17.655"/>
+	<path style="fill:#E4EAF6;" d="M355.326,346.052c-0.255-0.582-0.491-1.174-0.704-1.777h-1.577
+		C353.815,344.855,354.575,345.449,355.326,346.052z"/>
+	<rect x="211.862" y="406.069" style="fill:#E4EAF6;" width="17.655" height="17.655"/>
+	<path style="fill:#E4EAF6;" d="M388.414,335.448c0-4.871-3.961-8.828-8.828-8.828s-8.828,3.957-8.828,8.828
+		c0,4.871,3.961,8.828,8.828,8.828S388.414,340.319,388.414,335.448z"/>
+	<path style="fill:#E4EAF6;" d="M245.654,344.276c-0.214,0.602-0.448,1.194-0.704,1.775c0.75-0.604,1.51-1.196,2.28-1.775H245.654z"
+		/>
+	<path style="fill:#E4EAF6;" d="M406.069,105.931c-14.626,0-26.483-11.857-26.483-26.483V0H141.241
+		c-14.626,0-26.483,11.857-26.483,26.483v61.793h220.69c9.751,0,17.655,7.905,17.655,17.655v123.586
+		c0,9.75-7.904,17.655-17.655,17.655h-220.69v238.345c0,14.626,11.857,26.483,26.483,26.483h317.793
+		c14.626,0,26.483-11.857,26.483-26.483V105.931H406.069z M384.351,388.414h12.886c4.875,0,8.828,3.948,8.828,8.828v35.31
+		c0,4.879-3.953,8.828-8.828,8.828h-35.31c-4.875,0-8.828-3.948-8.828-8.828v-35.31c0-4.879,3.953-8.828,8.828-8.828h3.677
+		c-7.17-17.661-21.325-31.817-38.983-38.988v3.678c0,4.879-3.953,8.828-8.828,8.828h-35.31c-4.875,0-8.828-3.948-8.828-8.828v-3.679
+		c-17.656,7.17-31.812,21.327-38.986,38.989h3.676c4.875,0,8.828,3.948,8.828,8.828v35.31c0,4.879-3.953,8.828-8.828,8.828h-35.31
+		c-4.875,0-8.828-3.948-8.828-8.828v-35.31c0-4.879,3.953-8.828,8.828-8.828h12.887c3.322-10.549,8.586-20.259,15.374-28.706
+		c-3.25,1.426-6.836,2.223-10.606,2.223c-14.603,0-26.483-11.88-26.483-26.483c0-14.603,11.88-26.483,26.483-26.483
+		c11.509,0,21.321,7.38,24.964,17.655h28.001v-8.828c0-4.879,3.953-8.828,8.828-8.828h35.31c4.875,0,8.828,3.948,8.828,8.828v8.828
+		h28.001c3.644-10.275,13.455-17.655,24.964-17.655c14.603,0,26.483,11.88,26.483,26.483c0,14.603-11.88,26.483-26.483,26.483
+		c-3.772,0-7.358-0.798-10.607-2.225C375.766,368.153,381.03,377.865,384.351,388.414z"/>
+	<rect x="291.31" y="326.621" style="fill:#E4EAF6;" width="17.655" height="17.655"/>
+	<path style="fill:#E4EAF6;" d="M220.69,326.621c-4.866,0-8.828,3.957-8.828,8.828c0,4.871,3.961,8.828,8.828,8.828
+		s8.828-3.957,8.828-8.828C229.517,330.578,225.556,326.621,220.69,326.621z"/>
+</g>
+<path style="fill:#D2DCF0;" d="M406.069,105.931h79.448L379.586,0v79.448C379.586,94.074,391.443,105.931,406.069,105.931z"/>
+<g>
+	<path style="fill:#464655;" d="M353.103,229.517V105.931c0-9.75-7.904-17.655-17.655-17.655h-220.69H44.138
+		c-9.751,0-17.655,7.905-17.655,17.655v123.586c0,9.75,7.904,17.655,17.655,17.655h70.621h220.69
+		C345.199,247.172,353.103,239.267,353.103,229.517z M114.759,211.862H70.621c-4.875,0-8.828-3.948-8.828-8.828
+		s3.953-8.828,8.828-8.828h44.138c4.866,0,8.828-3.957,8.828-8.828c0-4.871-3.961-8.828-8.828-8.828H88.276
+		c-14.603,0-26.483-11.88-26.483-26.483s11.88-26.483,26.483-26.483h35.31c4.875,0,8.828,3.948,8.828,8.828
+		c0,4.879-3.953,8.828-8.828,8.828h-35.31c-4.866,0-8.828,3.957-8.828,8.828s3.961,8.828,8.828,8.828h26.483
+		c14.603,0,26.483,11.88,26.483,26.483S129.362,211.862,114.759,211.862z M229.255,134.552l-14.444,57.775
+		c-2.876,11.5-13.164,19.534-25.017,19.534c-11.853,0-22.142-8.034-25.017-19.534l-14.444-57.775
+		c-1.181-4.724,1.694-9.517,6.422-10.698c4.724-1.19,9.522,1.681,10.707,6.422l14.444,57.775c0.905,3.62,4.151,6.155,7.887,6.155
+		s6.983-2.535,7.887-6.155l14.444-57.775c1.185-4.742,6.001-7.612,10.707-6.422C227.561,125.035,230.435,129.827,229.255,134.552z
+		 M317.793,176.552c0,19.474-15.84,35.31-35.31,35.31h-8.828c-19.47,0-35.31-15.837-35.31-35.31v-17.655
+		c0-19.474,15.84-35.31,35.31-35.31h8.828c10.035,0,19.629,4.294,26.319,11.767c3.25,3.638,2.935,9.216-0.698,12.466
+		c-3.634,3.258-9.207,2.94-12.466-0.69c-3.34-3.742-8.138-5.888-13.155-5.888h-8.828c-9.737,0-17.655,7.923-17.655,17.655v17.655
+		c0,9.732,7.918,17.655,17.655,17.655h8.828c9.737,0,17.655-7.923,17.655-17.655h-17.655c-4.875,0-8.828-3.948-8.828-8.828
+		s3.953-8.828,8.828-8.828h26.483c4.875,0,8.828,3.948,8.828,8.828V176.552z"/>
+	<path style="fill:#464655;" d="M406.069,335.448c0-14.603-11.88-26.483-26.483-26.483c-11.509,0-21.321,7.38-24.964,17.655h-28.001
+		v-8.828c0-4.879-3.953-8.828-8.828-8.828h-35.31c-4.875,0-8.828,3.948-8.828,8.828v8.828h-28.001
+		c-3.644-10.275-13.455-17.655-24.964-17.655c-14.603,0-26.483,11.88-26.483,26.483c0,14.603,11.88,26.483,26.483,26.483
+		c3.77,0,7.357-0.798,10.606-2.223c-6.788,8.447-12.052,18.157-15.374,28.706h-12.887c-4.875,0-8.828,3.948-8.828,8.828v35.31
+		c0,4.879,3.953,8.828,8.828,8.828h35.31c4.875,0,8.828-3.948,8.828-8.828v-35.31c0-4.879-3.953-8.828-8.828-8.828h-3.676
+		c7.172-17.662,21.329-31.819,38.986-38.989v3.679c0,4.879,3.953,8.828,8.828,8.828h35.31c4.875,0,8.828-3.948,8.828-8.828v-3.678
+		c17.657,7.171,31.812,21.327,38.983,38.988h-3.677c-4.875,0-8.828,3.948-8.828,8.828v35.31c0,4.879,3.953,8.828,8.828,8.828h35.31
+		c4.875,0,8.828-3.948,8.828-8.828v-35.31c0-4.879-3.953-8.828-8.828-8.828h-12.886c-3.321-10.549-8.585-20.26-15.373-28.707
+		c3.25,1.427,6.837,2.225,10.607,2.225C394.189,361.931,406.069,350.051,406.069,335.448z M229.517,423.724h-17.655v-17.655h17.655
+		V423.724z M388.409,423.724h-17.655v-17.655h17.655V423.724z M355.326,346.052c-0.751-0.604-1.511-1.197-2.282-1.777h1.577
+		C354.836,344.878,355.071,345.471,355.326,346.052z M245.654,344.276h1.576c-0.77,0.579-1.529,1.172-2.28,1.775
+		C245.206,345.47,245.44,344.878,245.654,344.276z M220.69,344.276c-4.866,0-8.828-3.957-8.828-8.828
+		c0-4.871,3.961-8.828,8.828-8.828s8.828,3.957,8.828,8.828C229.517,340.319,225.556,344.276,220.69,344.276z M308.966,344.276
+		H291.31v-17.655h17.655V344.276z M370.759,335.448c0-4.871,3.961-8.828,8.828-8.828s8.828,3.957,8.828,8.828
+		c0,4.871-3.961,8.828-8.828,8.828S370.759,340.319,370.759,335.448z"/>
+</g>
+<g>
+	<path style="fill:#FF9646;" d="M114.759,158.897H88.276c-4.866,0-8.828-3.957-8.828-8.828s3.961-8.828,8.828-8.828h35.31
+		c4.875,0,8.828-3.948,8.828-8.828c0-4.879-3.953-8.828-8.828-8.828h-35.31c-14.603,0-26.483,11.88-26.483,26.483
+		s11.88,26.483,26.483,26.483h26.483c4.866,0,8.828,3.957,8.828,8.828c0,4.871-3.961,8.828-8.828,8.828H70.621
+		c-4.875,0-8.828,3.948-8.828,8.828s3.953,8.828,8.828,8.828h44.138c14.603,0,26.483-11.88,26.483-26.483
+		S129.362,158.897,114.759,158.897z"/>
+	<path style="fill:#FF9646;" d="M308.966,158.897h-26.483c-4.875,0-8.828,3.948-8.828,8.828s3.953,8.828,8.828,8.828h17.655
+		c0,9.732-7.918,17.655-17.655,17.655h-8.828c-9.737,0-17.655-7.923-17.655-17.655v-17.655c0-9.732,7.918-17.655,17.655-17.655
+		h8.828c5.017,0,9.815,2.146,13.155,5.888c3.258,3.629,8.832,3.948,12.466,0.69c3.634-3.25,3.948-8.828,0.698-12.466
+		c-6.69-7.474-16.285-11.767-26.319-11.767h-8.828c-19.47,0-35.31,15.837-35.31,35.31v17.655c0,19.474,15.84,35.31,35.31,35.31
+		h8.828c19.47,0,35.31-15.837,35.31-35.31v-8.828C317.793,162.845,313.841,158.897,308.966,158.897z"/>
+	<path style="fill:#FF9646;" d="M222.831,123.853c-4.707-1.19-9.522,1.681-10.707,6.422l-14.444,57.775
+		c-0.905,3.62-4.151,6.155-7.887,6.155c-3.736,0-6.983-2.535-7.887-6.155l-14.444-57.775c-1.185-4.742-5.983-7.612-10.707-6.422
+		c-4.728,1.181-7.604,5.974-6.422,10.698l14.444,57.775c2.874,11.501,13.163,19.535,25.016,19.535
+		c11.853,0,22.142-8.034,25.017-19.534l14.444-57.775C230.435,129.827,227.561,125.035,222.831,123.853z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

package/src/assets/images/chatPopup/upload_file.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12.213" height="15.267" viewBox="0 0 12.213 15.267">
+  <path id="upload_file_FILL0_wght400_GRAD0_opsz48" d="M7.972,14.139H9.117V10.3l1.565,1.565.8-.8-2.977-2.9L5.568,11.1l.8.8,1.6-1.6ZM3.545,16.467a1.1,1.1,0,0,1-.8-.344,1.1,1.1,0,0,1-.344-.8V2.345a1.1,1.1,0,0,1,.344-.8,1.1,1.1,0,0,1,.8-.344h6.889l4.179,4.179v9.942a1.174,1.174,0,0,1-1.145,1.145ZM9.862,5.895V2.345H3.545V15.322h9.923V5.895ZM3.545,2.345v0Z" transform="translate(-2.4 -1.2)" fill="#707070"/>
+</svg>

package/src/assets/images/chatPopup/xls.svg

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, 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 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#E2E5E7;" d="M128,0c-17.6,0-32,14.4-32,32v448c0,17.6,14.4,32,32,32h320c17.6,0,32-14.4,32-32V128L352,0H128z"/>
+<path style="fill:#B0B7BD;" d="M384,128h96L352,0v96C352,113.6,366.4,128,384,128z"/>
+<polygon style="fill:#CAD1D8;" points="480,224 384,128 480,128 "/>
+<path style="fill:#84BD5A;" d="M416,416c0,8.8-7.2,16-16,16H48c-8.8,0-16-7.2-16-16V256c0-8.8,7.2-16,16-16h352c8.8,0,16,7.2,16,16
+	V416z"/>
+<g>
+	<path style="fill:#FFFFFF;" d="M144.336,326.192l22.256-27.888c6.656-8.704,19.584,2.416,12.288,10.736
+		c-7.664,9.088-15.728,18.944-23.408,29.04l26.096,32.496c7.04,9.6-7.024,18.8-13.936,9.328l-23.552-30.192l-23.152,30.848
+		c-6.528,9.328-20.992-1.152-13.696-9.856l25.712-32.624c-8.064-10.112-15.872-19.952-23.664-29.04
+		c-8.048-9.6,6.912-19.44,12.8-10.464L144.336,326.192z"/>
+	<path style="fill:#FFFFFF;" d="M197.36,303.152c0-4.224,3.584-7.808,8.064-7.808c4.096,0,7.552,3.6,7.552,7.808v64.096h34.8
+		c12.528,0,12.8,16.752,0,16.752H205.44c-4.48,0-8.064-3.184-8.064-7.792v-73.056H197.36z"/>
+	<path style="fill:#FFFFFF;" d="M272.032,314.672c2.944-24.832,40.416-29.296,58.08-15.728c8.704,7.024-0.512,18.16-8.192,12.528
+		c-9.472-6-30.96-8.816-33.648,4.464c-3.456,20.992,52.192,8.976,51.296,43.008c-0.896,32.496-47.968,33.248-65.632,18.672
+		c-4.24-3.456-4.096-9.072-1.792-12.544c3.328-3.312,7.024-4.464,11.392-0.88c10.48,7.152,37.488,12.528,39.392-5.648
+		C321.28,339.632,268.064,351.008,272.032,314.672z"/>
+</g>
+<path style="fill:#CAD1D8;" d="M400,432H96v16h304c8.8,0,16-7.2,16-16v-16C416,424.8,408.8,432,400,432z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>