@threedddplus/logoeditor 0.0.211 → 0.0.213

package/dist/logoeditor.esm.js

@@ -1764,15 +1764,7 @@ var SnapToCenter = function SnapToCenter(props) {
   })(props);
 };
 
-function CustomToast(type, message, toastId, style, containerId) {
-  if (containerId === void 0) {
-    containerId = "logoEditor";
-  }
-  var _C = toast.isActive(toastId);
-  console.log(containerId);
-  if (_C) {
-    return React.createElement(React.Fragment, null);
-  }
+function CustomToast(type, message, toastId, style) {
   switch (type) {
     case 'info':
       return toast.info(toastGen({
@@ -1780,8 +1772,7 @@ function CustomToast(type, message, toastId, style, containerId) {
         message: message
       }), {
         toastId: toastId,
-        style: style,
-        containerId: containerId
+        style: style
       });
     case 'error':
       return toast.error(toastGen({
@@ -1790,8 +1781,7 @@ function CustomToast(type, message, toastId, style, containerId) {
       }), {
         toastId: toastId,
         icon: Error$1,
-        style: style,
-        containerId: containerId
+        style: style
       });
     case 'success':
       return toast.success(toastGen({
@@ -1799,8 +1789,7 @@ function CustomToast(type, message, toastId, style, containerId) {
         message: message
       }), {
         toastId: toastId,
-        style: style,
-        containerId: containerId
+        style: style
       });
     case 'warning':
       return toast.warning(toastGen({
@@ -1808,8 +1797,7 @@ function CustomToast(type, message, toastId, style, containerId) {
         message: message
       }), {
         toastId: toastId,
-        style: style,
-        containerId: containerId
+        style: style
       });
   }
 }
@@ -1871,7 +1859,7 @@ var toastMessages =
     return CustomToast('info', 'Please select the IMAGE / TEXT to delete', 14);
   },
   pleaseSelectTheImageDulpicate: function pleaseSelectTheImageDulpicate() {
-    return CustomToast('info', 'Please select the IMAGE / TEXT to duplicate', 150);
+    return CustomToast('info', 'Please select the IMAGE / TEXT to duplicate', 15);
   },
   applyLogoColorNotAvailable: function applyLogoColorNotAvailable(decType) {
     return CustomToast('error', "A few of the colors associated with decoration \"" + decType + "\" are not supported. Please use the \"Edit\" option to update them with supported colors and proceed!", 16);
@@ -3871,6 +3859,52 @@ TIFFParser.prototype = {
   }
 };
 
+var prepocessSvgData = function prepocessSvgData(svgData, objects) {
+  svgData.forEach(function (resItem) {
+    var path;
+    var node;
+    objects == null ? void 0 : objects.forEach(function (item) {
+      //@ts-ignore
+      if (item.id === resItem.path) {
+        path = item;
+        //@ts-ignore
+      } else if (item.id === resItem.element) {
+        node = item;
+      }
+    });
+    if (node && path) {
+      var _resItem$node$childre, _resItem$node$childre2;
+      var fontSize = (_resItem$node$childre = resItem.node.children[0]) == null ? void 0 : (_resItem$node$childre2 = _resItem$node$childre.getAttribute('font-size')) == null ? void 0 : _resItem$node$childre2.replace('px', '');
+      node.set({
+        path: path,
+        top: path.top,
+        left: path.left,
+        textAlign: 'center',
+        pathStartOffset: path.width * parseFloat(resItem.node.startOffset.baseVal.valueAsString) / 100,
+        // fontFamily: resItem.node.children[0].getAttribute("font-family"),
+        fontSize: fontSize || 25
+      });
+      node.setCoords();
+    }
+  });
+};
+var setDimensions = function setDimensions(loadedObject, canvasWidth, canvasHeight) {
+  var val = 300;
+  if ((loadedObject.width <= 200 || loadedObject.height <= 200) && (loadedObject.minX === -0 || loadedObject.minX)) {
+    val = 600;
+  }
+  if (Math.ceil(loadedObject.width + loadedObject.left + 45) >= Math.floor(canvasWidth)) {
+    loadedObject.scaleToWidth(val);
+  } else if (Math.ceil(loadedObject.height + loadedObject.top + 10) >= Math.floor(canvasHeight)) {
+    loadedObject.scaleToHeight(val);
+  } else if (Math.ceil(loadedObject.left) < 0) {
+    loadedObject.scaleToWidth(val);
+  } else if (Math.ceil(loadedObject.top) < 0) {
+    loadedObject.scaleToHeight(val);
+  } else if (loadedObject.width < 200 || loadedObject.height < 200) {
+    loadedObject.scaleToWidth(val);
+  }
+};
 var converterSlice = function converterSlice(set, get) {
   var processImage = function processImage(svgstr, colorValue, canvasToLoad, addCheckerBox) {
     if (canvasToLoad === void 0) {
@@ -3885,52 +3919,11 @@ var converterSlice = function converterSlice(set, get) {
       var _canvasToLoad, _use3dddPlus$getState;
       var svgData = getDesignConceptSVGData(svgstr);
       var loadedObject = fabric.util.groupSVGElements(objects, options);
-      console.log("SVG DATA--->", svgData);
-      svgData.forEach(function (resItem) {
-        var path;
-        var node;
-        objects == null ? void 0 : objects.forEach(function (item) {
-          //@ts-ignore
-          if (item.id === resItem.path) {
-            path = item;
-            //@ts-ignore
-          } else if (item.id === resItem.element) {
-            node = item;
-          }
-        });
-        if (node && path) {
-          var _resItem$node$childre, _resItem$node$childre2;
-          var fontSize = (_resItem$node$childre = resItem.node.children[0]) == null ? void 0 : (_resItem$node$childre2 = _resItem$node$childre.getAttribute('font-size')) == null ? void 0 : _resItem$node$childre2.replace('px', '');
-          node.set({
-            path: path,
-            top: path.top,
-            left: path.left,
-            textAlign: 'center',
-            pathStartOffset: path.width * parseFloat(resItem.node.startOffset.baseVal.valueAsString) / 100,
-            // fontFamily: resItem.node.children[0].getAttribute("font-family"),
-            fontSize: fontSize || 25
-          });
-          node.setCoords();
-        }
-      });
+      prepocessSvgData(svgData, objects);
       var canvas = (_canvasToLoad = canvasToLoad) != null ? _canvasToLoad : use3dddPlus.getState().popupCanv;
       var canvasWidth = canvas.width;
       var canvasHeight = canvas.height;
-      var val = 300;
-      if ((loadedObject.width <= 200 || loadedObject.height <= 200) && (loadedObject.minX === -0 || loadedObject.minX)) {
-        val = 600;
-      }
-      if (Math.ceil(loadedObject.width + loadedObject.left + 45) >= Math.floor(canvasWidth)) {
-        loadedObject.scaleToWidth(val);
-      } else if (Math.ceil(loadedObject.height + loadedObject.top + 10) >= Math.floor(canvasHeight)) {
-        loadedObject.scaleToHeight(val);
-      } else if (Math.ceil(loadedObject.left) < 0) {
-        loadedObject.scaleToWidth(val);
-      } else if (Math.ceil(loadedObject.top) < 0) {
-        loadedObject.scaleToHeight(val);
-      } else if (loadedObject.width < 200 || loadedObject.height < 200) {
-        loadedObject.scaleToWidth(val);
-      }
+      setDimensions(loadedObject, canvasWidth, canvasHeight);
       //@ts-ignore
       var objImage = loadedObject == null ? void 0 : loadedObject._objects;
       if (!objImage) {
@@ -3939,6 +3932,7 @@ var converterSlice = function converterSlice(set, get) {
       var _Fills = [];
       var fillCounts = {};
       var colorObjects = {};
+      // Identify and Count Fill Colors
       if (objImage) {
         objImage.forEach(function (ele) {
           var _ele$id;
@@ -3968,10 +3962,57 @@ var converterSlice = function converterSlice(set, get) {
       use3dddPlus.setState({
         loadedObject: objImage
       });
+      // Extract Top Colors
       var sortedFillColors = Object.keys(fillCounts).sort(function (a, b) {
         return fillCounts[b] - fillCounts[a];
       });
       var topColors = sortedFillColors.slice(0, colorValue);
+      // Map Colors to Their Closest Dominant Colors
+      var colorMap = {};
+      sortedFillColors.forEach(function (color) {
+        var closestColor = topColors.reduce(function (prev, curr) {
+          var prevDiff = euclideanDistance(color, prev);
+          var currDiff = euclideanDistance(color, curr);
+          return prevDiff < currDiff ? prev : curr;
+        });
+        colorMap[color] = closestColor;
+      });
+      // Apply Updated Colors to Objects
+      if (objImage) {
+        objImage.forEach(function (ele) {
+          ele.set({
+            fill: colorMap[ele.fill.toString()]
+          });
+        });
+      }
+      // Re-calculate colorObjects
+      if (objImage) {
+        objImage.forEach(function (ele) {
+          var _ele$id2;
+          ele.set({
+            strokeWidth: 0
+          });
+          ele.set({
+            id: (_ele$id2 = ele.id) != null ? _ele$id2 : use3dddPlus.getState().guid()
+          });
+          if (typeof ele.fill === 'string' && ele.fill !== '') {
+            set({
+              fillColor: [].concat(ele.fill)
+            });
+            var fillColor = ele.fill.toString();
+            var pixelCount = ele.width * ele.height;
+            fillCounts[fillColor] = (fillCounts[fillColor] || 0) + pixelCount;
+            if (colorObjects[fillColor]) {
+              colorObjects[fillColor].objects.push(ele.get('id'));
+            } else {
+              colorObjects[fillColor] = {
+                objects: [ele.get('id')]
+              };
+            }
+          }
+        });
+      }
+      // Convert Colors to Hex & Store
       var colorObjectsHex = {};
       topColors.map(function (e) {
         if (e.search('#') === -1) {
@@ -3985,6 +4026,7 @@ var converterSlice = function converterSlice(set, get) {
           colorObjectsHex[e] = colorObjects[e];
         }
       });
+      // Store Colors in State
       //@ts-ignore
       set({
         fillColor: get().removeDuplicates(_Fills)
@@ -4014,6 +4056,7 @@ var converterSlice = function converterSlice(set, get) {
       use3dddPlus.setState({
         defaultColorFillCopy: defaultCF
       });
+      // Step 5: Assign Closest Colors to Objects
       function euclideanDistance(color1, color2) {
         var c1 = new fabric.Color(color1).getSource();
         var c2 = new fabric.Color(color2).getSource();
@@ -4022,22 +4065,7 @@ var converterSlice = function converterSlice(set, get) {
         var diffB = c1[2] - c2[2];
         return Math.sqrt(Math.pow(diffR, 2) + Math.pow(diffG, 2) + Math.pow(diffB, 2));
       }
-      var colorMap = {};
-      sortedFillColors.forEach(function (color) {
-        var closestColor = topColors.reduce(function (prev, curr) {
-          var prevDiff = euclideanDistance(color, prev);
-          var currDiff = euclideanDistance(color, curr);
-          return prevDiff < currDiff ? prev : curr;
-        });
-        colorMap[color] = closestColor;
-      });
-      if (objImage) {
-        objImage.forEach(function (ele) {
-          ele.set({
-            fill: colorMap[ele.fill.toString()]
-          });
-        });
-      }
+      // Step 6: Add Checkerboard Background (Optional)
       if (addCheckerBox) {
         loadedObject.set({
           colorFill: fillColors,
@@ -4112,6 +4140,7 @@ var converterSlice = function converterSlice(set, get) {
           }
         }
       }
+      // Step 7: Finalize the Canvas
       canvas.add(loadedObject).renderAll();
       canvas.centerObject(loadedObject);
       canvas.setActiveObject(loadedObject);
@@ -4183,7 +4212,7 @@ var converterSlice = function converterSlice(set, get) {
         });
       }
     });
-    // return { href, availableFonts }; 
+    // return { href, availableFonts };
     return href;
   };
   return {
@@ -4434,6 +4463,7 @@ var converterSlice = function converterSlice(set, get) {
       }
     },
     refreshColor: function refreshColor(colorValue) {
+      console.log('colorValue---->', colorValue);
       processImage(use3dddPlus.getState().imageData, colorValue);
     },
     removeDuplicates: function removeDuplicates(arr) {
@@ -4462,10 +4492,10 @@ var converterSlice = function converterSlice(set, get) {
       }
     },
     changeSVGColor: function changeSVGColor(property, color) {
+      console.log('-->', property, color);
       use3dddPlus.getState().popUpCanvasUpdateModification(true);
       var fillColor = _extends({}, use3dddPlus.getState().colorFill);
       if (use3dddPlus.getState().loadedObject) {
-        // let objImage1 = use3dddPlus.getState().popupCanv.getObjects();
         var objImage = use3dddPlus.getState().popupCanv.getObjects();
         if (objImage.length > 0) {
           objImage.forEach(function (ele) {
@@ -4476,30 +4506,13 @@ var converterSlice = function converterSlice(set, get) {
               });
             }
             if (ele.id && defaultColorObject && defaultColorObject.objects && defaultColorObject.objects.includes(ele.id) && typeof ele.fill === 'string' && ele.fill !== '') {
-              // const _C = (ele.fill === 'transparent' || (typeof ele.fill === 'string' && ele.fill.includes('#')) ? ele.fill : get().RGBToHex(ele.fill));
-              // if (_C === previousColor) {
               ele.set({
                 fill: color
               });
-              // }
             }
-            //   if(typeof ele.fill === "string" && ele.fill !== ""){
-            //   const _C = (ele.fill === 'transparent' || (typeof ele.fill === 'string' && ele.fill.includes('#')) ? ele.fill : get().RGBToHex(ele.fill));
-            //   if (_C === previousColor) {
-            //     ele.set({
-            //       fill: color,
-            //     });
-            //   }
-            // }
           });
-
           use3dddPlus.getState().popupCanv.renderAll();
           fillColor[property] = color;
-          // Object.keys(fillColor).forEach((fc: any) => {
-          //   if(fillColor[fc] === previousColor){
-          //     fillColor[fc] = color;
-          //   }
-          // });
           use3dddPlus.setState({
             colorFill: fillColor
           });
@@ -8073,31 +8086,276 @@ var LeftMenu = function LeftMenu() {
   })));
 };
 
-var css_248z$3 = "#ls{background-color:#fff;background:radial-gradient(#eee,#ccc);height:100%;left:0;opacity:1;position:relative;transition:opacity 1s;width:100%;z-index:10000!important}#ls.fade-out{opacity:0}#l{animation:spin 2s linear infinite;border:3px solid transparent;border-radius:50%;border-top-color:#b16b6b;display:block;height:100px;left:50%;margin:-50px 0 0 -50px;position:relative;top:50%;width:100px}#l:before{animation:spin 3s linear infinite;border:3px solid transparent;border-radius:50%;border-top-color:#c10909;bottom:5px;left:5px;right:5px;top:5px}#l:after,#l:before{content:\"\";position:absolute}#l:after{animation:spin 1.5s linear infinite;border:3px solid transparent;border-radius:50%;border-top-color:#bb4646;bottom:15px;left:15px;right:15px;top:15px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}";
+var css_248z$3 = "#ls{background-color:#fff;background:radial-gradient(#eee,#ccc);height:100%;left:0;opacity:1;position:relative;transition:opacity 1s;width:100%;z-index:10000!important}#ls.fade-out{opacity:0}#l{animation:spin 2s linear infinite;border:3px solid transparent;border-radius:50%;border-top-color:#b16b6b;display:block;height:100px;left:50%;margin:-50px 0 0 -50px;position:relative;top:50%;width:100px}#l:before{animation:spin 3s linear infinite;border:3px solid transparent;border-radius:50%;border-top-color:#c10909;bottom:5px;left:5px;right:5px;top:5px}#l:after,#l:before{content:\"\";position:absolute}#l:after{animation:spin 1.5s linear infinite;border:3px solid transparent;border-radius:50%;border-top-color:#bb4646;bottom:15px;left:15px;right:15px;top:15px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.loader-progress{z-index:999999999999999}.loader-progress-overlay-logoeditor{align-items:center;background:hsla(40,16%,93%,.6);border-radius:8px;bottom:0;display:none;height:88%;justify-content:center;left:10%;pointer-events:none;position:fixed;right:50%;top:6%;transition:opacity .3s ease-in-out;width:80%;z-index:999999999999999}body .loader-progress-overlay-logoeditor svg.rs-logo-letters{height:25px}.loader-progress .loader-progress-overlay-logoeditor{display:flex;pointer-events:all}svg.rs-logo-letters{height:auto;width:100%}svg.rs-logo-letters g{opacity:1;transform:translateX(0)}@media (prefers-reduced-motion){svg.rs-logo-letters g{opacity:1;transform:translateX(0)}}svg.rs-logo-letters g.animate{animation:fadeInSlideIn .15s cubic-bezier(.12,.03,.35,.98) forwards}@keyframes fadeInSlideIn{0%{opacity:0;transform:translateX(-3%)}to{opacity:1;transform:translateX(0)}}";
 styleInject(css_248z$3);
 
-var Loader = function Loader(_ref) {
-  var _ref$position = _ref.position,
-    position = _ref$position === void 0 ? 'overlay' : _ref$position,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? '100%' : _ref$height;
-  var loaderRef = React.useRef();
+var Loader = function Loader() {
+  var rootRef = React.useRef(null);
+  var intervalRef = React.useRef(null);
+  var delay = 80;
+  var animate = true;
+  // Function to start looping animation
+  var startAnimationLoop = function startAnimationLoop() {
+    var _rootRef$current;
+    document.body.classList.add('loader-progress');
+    singleAnimationLoop();
+    intervalRef.current = setInterval(function () {
+      singleAnimationLoop();
+    }, delay * (((_rootRef$current = rootRef.current) == null ? void 0 : _rootRef$current.querySelectorAll('svg.rs-logo-letters g').length) || 0) + 800);
+  };
+  // Function to handle a single animation loop
+  var singleAnimationLoop = function singleAnimationLoop() {
+    var _rootRef$current2;
+    addAnimateClassToLetters();
+    var logoSvgLetters = (_rootRef$current2 = rootRef.current) == null ? void 0 : _rootRef$current2.querySelectorAll('svg.rs-logo-letters g');
+    logoSvgLetters == null ? void 0 : logoSvgLetters.forEach(function (letter) {
+      letter.classList.remove('animate');
+    });
+  };
+  // Function to animate class to letters
+  var addAnimateClassToLetters = function addAnimateClassToLetters() {
+    var _rootRef$current3;
+    var logoSvgLetters = (_rootRef$current3 = rootRef.current) == null ? void 0 : _rootRef$current3.querySelectorAll('svg.rs-logo-letters g');
+    logoSvgLetters == null ? void 0 : logoSvgLetters.forEach(function (letter, index) {
+      setTimeout(function () {
+        letter.classList.add('animate');
+      }, index * delay);
+    });
+  };
+  // Function to stop animation loop
+  var stopAnimationLoop = function stopAnimationLoop() {
+    var _rootRef$current4;
+    document.body.classList.remove('loader-progress');
+    var logoSvgLetters = (_rootRef$current4 = rootRef.current) == null ? void 0 : _rootRef$current4.querySelectorAll('svg.rs-logo-letters g');
+    logoSvgLetters == null ? void 0 : logoSvgLetters.forEach(function (letter) {
+      letter.classList.remove('animate');
+    });
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+  };
+  // Effect to handle animation start/stop based on `animate` prop
   React.useEffect(function () {
-    if (!loaderRef) return;
-    loaderRef.current.style.height = height;
-  }, [loaderRef]);
-  return React.createElement("section", {
-    ref: loaderRef,
-    id: "ls",
-    style: position === 'overlay' ? {
-      position: 'absolute',
-      opacity: 0.8,
-      top: 0
-    } : {},
-    className: "w-full h-full"
-  }, React.createElement("div", {
-    id: "l"
-  }));
+    {
+      startAnimationLoop();
+    }
+    // Cleanup on unmount
+    return function () {
+      stopAnimationLoop();
+    };
+  }, [animate]);
+  return React.createElement("div", {
+    ref: rootRef,
+    className: "loader-progress-overlay-logoeditor"
+  }, React.createElement("svg", {
+    className: "rs-logo-letters",
+    width: "1621",
+    height: "244",
+    viewBox: "0 0 1621 244",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true"
+  }, React.createElement("g", {
+    className: "R",
+    "clip-path": "url(#clip0_3639_29751)"
+  }, React.createElement("path", {
+    d: "M186.973 73.1564C182.326 109.658 159.826 130.946 132.395 137.888L149.114 178.265L173.881 239.236H116.582L93.2883 181.909L77.0791 143.672L65.4605 198.049L56.8458 239.236H0L46.7575 4.78086H51.2915C63.5902 4.83871 76.6823 4.72301 90.0011 4.78086H90.1145H118.736C161.356 5.0701 191.451 36.7126 186.803 73.2142M105.19 97.1052C117.376 97.1052 132.451 92.7666 134.775 72.4622C137.099 52.1578 118.509 49.4968 106.324 49.439C105.927 49.439 103.547 49.3233 103.547 49.3233C103.547 49.3233 100.146 49.3233 94.8186 49.3812L84.1635 97.1052C84.1635 97.1052 101.846 97.2787 103.377 97.1052H105.19Z",
+    fill: "#CE0E2D"
+  })), React.createElement("g", {
+    className: "I",
+    "clip-path": "url(#clip2_3639_29751)"
+  }, React.createElement("path", {
+    d: "M230.146 228.005C231.563 220.601 273.617 4.77246 273.617 4.77246C273.617 4.77246 238.931 4.77246 214.9 4.77246L175.794 205.387L169.276 239.228H227.936L230.146 228.063V228.005Z",
+    fill: "#CE0E2D"
+  })), React.createElement("g", {
+    className: "C",
+    "clip-path": "url(#clip4_3639_29751)"
+  }, React.createElement("path", {
+    d: "M424.94 10.4125C415.702 5.66903 403.29 0 380.79 0C353.245 0 328.988 8.38786 309.038 24.8165C277.64 49.9801 259.673 92.7293 259.617 141.957C259.617 203.912 294.246 243.942 348.088 244C368.888 244 391.388 237.405 395.185 234.629C395.582 232.431 406.804 175.393 406.804 175.393C406.804 175.393 400.229 179.558 390.878 182.566C381.413 186.153 370.248 187.772 358.233 187.772C322.073 187.772 316.689 155.783 316.689 136.751C316.689 109.852 325.134 85.9611 339.813 71.21C349.561 61.5495 362.597 56.1697 376.936 56.1697C391.785 56.1697 400.003 59.2935 406.804 62.5329C414.455 66.0616 425.11 74.8544 425.11 74.8544L437.012 19.0318C437.012 19.0318 434.235 15.156 424.997 10.4125",
+    fill: "#CE0E2D"
+  })), React.createElement("g", {
+    className: "H",
+    "clip-path": "url(#clip6_3639_29751)"
+  }, React.createElement("path", {
+    d: "M554.264 4.62769L548.596 32.8572L537.431 90.126H493.621L510.227 4.62769H451.511L406 239.372H464.66L481.719 150.808H525.473L508.357 239.372H571.777C571.777 239.372 567.583 236.017 568.716 229.48C569.85 222.943 612.64 4.62769 612.64 4.62769H554.264Z",
+    fill: "#CE0E2D"
+  })), React.createElement("g", {
+    className: "A",
+    "clip-path": "url(#clip8_3639_29751)"
+  }, React.createElement("path", {
+    d: "M662.652 152.221L689.233 87.7217L694.618 152.279H662.709L662.652 152.221ZM753.447 231.125C752.427 224.068 726.753 5 726.753 5H684.019L565 239.744H623.263L643.213 197.053H695.695L699.492 229.563L700.455 239.744H754.694L753.447 231.183V231.125Z",
+    fill: "#CE0E2D"
+  })), React.createElement("g", {
+    className: "R",
+    "clip-path": "url(#clip10_3639_29751)"
+  }, React.createElement("path", {
+    d: "M938.974 73.1564C934.326 109.658 911.826 130.946 884.395 137.888L901.114 178.265L925.881 239.236H868.582L845.288 181.909L829.079 143.672L817.461 198.049L808.846 239.236H752L798.758 4.78086H803.348C815.647 4.83871 828.739 4.72301 842.058 4.78086H842.171H870.792C913.413 5.0701 943.508 36.7126 938.86 73.2142M857.247 97.1052C869.376 97.1052 884.508 92.7666 886.775 72.4622C889.099 52.1578 870.509 49.4968 858.324 49.439C857.927 49.439 855.547 49.3233 855.547 49.3233C855.547 49.3233 852.146 49.3233 846.819 49.3812L836.22 97.1052C836.22 97.1052 853.903 97.2787 855.377 97.1052H857.19H857.247Z",
+    fill: "#CE0E2D"
+  })), React.createElement("g", {
+    className: "D",
+    "clip-path": "url(#clip12_3639_29751)"
+  }, React.createElement("path", {
+    d: "M1049.6 128.103C1047.5 137.763 1043.87 146.788 1039 155.002C1034.41 162.869 1028.23 169.522 1020.58 174.786C1013.61 179.703 1004.65 182.19 994.169 182.19H990.258L1013.04 65.2807C1013.04 65.2807 1013.38 65.2807 1013.61 65.2807C1017.41 65.1072 1021.15 64.9915 1024.55 64.9915C1035.26 64.9915 1042.68 67.5367 1046.48 72.5116C1050.73 78.1228 1053.05 87.4941 1053.05 100.336C1053.05 108.782 1051.92 118.211 1049.6 128.161M1106.9 55.2731C1102.7 43.6458 1096.7 33.9274 1088.87 26.2916C1081.22 18.8293 1071.98 13.2181 1061.33 9.63157C1051.18 6.21858 1039.85 4.48315 1027.66 4.48315C1023.92 4.48315 969.401 4.541 969.401 4.541H965.887L926.498 211.229L921 239.517H984.023C986.687 239.517 1020.81 238.938 1029.82 235.699C1043.08 230.955 1054.58 224.534 1064.28 216.667C1073.91 208.742 1082.02 199.486 1088.42 189.132C1094.71 179.066 1099.7 168.365 1103.21 157.316C1106.78 146.614 1109.33 135.739 1110.75 124.921C1112.17 114.393 1112.96 104.328 1112.96 95.0721C1112.96 79.9739 1110.98 66.6112 1106.9 55.331V55.2731Z",
+    fill: "#CE0E2D"
+  })), React.createElement("g", {
+    className: "S",
+    "clip-path": "url(#clip14_3639_29751)"
+  }, React.createElement("path", {
+    d: "M1198.3 96.6051C1184.36 87.176 1175.23 80.3501 1175.23 72.0779C1175.23 63.0537 1183.34 57.2111 1195.98 57.2111H1197.05C1208.95 57.2111 1220.01 61.6654 1225.73 65.4833L1233.55 70.6317L1250.5 16.1395L1245.34 12.9579C1232.65 5.03284 1217.4 1.15706 1198.92 1.15706C1152.56 1.09921 1120.14 33.5516 1120.09 80.1187C1120.09 114.306 1143.55 133.454 1161.01 144.792C1178.75 156.188 1181.98 161.973 1181.98 169.261C1181.98 182.161 1170.36 186.731 1160.38 186.731C1146.84 186.731 1132.61 182.046 1121.62 174.063L1113.91 168.509L1096 221.902L1100.02 225.431C1112.21 236.017 1133.29 242.496 1156.47 242.843H1156.59C1205.16 242.843 1237.86 210.102 1237.92 161.221C1237.92 134.206 1224.94 112.976 1198.41 96.6051",
+    fill: "#CE0E2D"
+  })), React.createElement("g", {
+    className: "O",
+    "clip-path": "url(#clip16_3639_29751)"
+  }, React.createElement("path", {
+    d: "M1364.97 129.318C1362.59 140.02 1359.13 149.564 1354.82 157.663C1350.63 165.415 1345.75 171.546 1340.2 175.943C1335.21 179.818 1329.88 181.727 1323.99 181.727C1314.01 181.727 1310.5 177.62 1308.63 174.554C1304.83 168.075 1302.96 158.82 1302.96 146.961C1302.96 134.987 1304.21 123.475 1306.82 112.773C1309.42 102.187 1312.94 92.9318 1317.36 85.2381C1321.44 77.8915 1326.43 72.1068 1331.98 67.9417C1336.97 64.1817 1342.3 62.3884 1348.19 62.3884C1354.76 62.3884 1359.41 64.4709 1362.98 68.8673C1366.72 73.6108 1368.71 82.6928 1368.71 95.0722C1368.71 107.451 1367.46 118.385 1365.02 129.318M1428.56 94.5515C1428.56 79.4534 1426.86 66.0906 1423.34 54.8104C1419.83 43.1253 1414.67 33.1755 1408.1 25.3661C1401.35 17.2675 1393.02 11.2514 1383.39 7.3756C1374.26 3.73122 1363.95 1.82227 1352.89 1.82227C1336.12 1.82227 1320.65 5.81373 1306.93 13.7388C1293.38 21.606 1281.77 32.3656 1272.3 45.8441C1262.95 59.0333 1255.7 74.7099 1250.59 92.3533C1245.61 109.765 1243.06 128.566 1243 148.118C1243.23 178.199 1250.03 201.569 1263.4 217.535C1277.01 233.906 1296.45 242.178 1321.27 242.178C1337.37 242.178 1352.27 238.129 1365.7 230.03C1378.85 222.047 1390.24 211.172 1399.6 197.462C1408.83 183.984 1416.14 168.249 1421.13 150.606C1426.06 133.078 1428.56 114.22 1428.61 94.4937L1428.56 94.5515Z",
+    fill: "#CE0E2D"
+  })), React.createElement("g", {
+    className: "N",
+    "clip-path": "url(#clip18_3639_29751)"
+  }, React.createElement("path", {
+    d: "M1563.55 4.59888L1557.88 35.5472L1543.43 108.435L1499.39 4.59888H1458.47C1458.47 4.59888 1458.47 4.71457 1458.42 4.88811H1457.62L1418.52 205.503L1412 239.343H1470.66L1472.87 228.179C1473.38 225.576 1481.99 181.38 1490.44 137.706L1533.51 239.401H1574.32L1620.4 4.65673H1563.55V4.59888Z",
+    fill: "#CE0E2D"
+  })), React.createElement("defs", null, React.createElement("clipPath", {
+    id: "clip0_3639_29751"
+  }, React.createElement("rect", {
+    width: "187.277",
+    height: "234.472",
+    fill: "white",
+    transform: "translate(0 4.76416)"
+  })), React.createElement("clipPath", {
+    id: "clip1_3639_29751"
+  }, React.createElement("rect", {
+    width: "187.277",
+    height: "234.472",
+    fill: "white",
+    transform: "translate(0 4.76416)"
+  })), React.createElement("clipPath", {
+    id: "clip2_3639_29751"
+  }, React.createElement("rect", {
+    width: "104.34",
+    height: "234.455",
+    fill: "white",
+    transform: "translate(169.276 4.77246)"
+  })), React.createElement("clipPath", {
+    id: "clip3_3639_29751"
+  }, React.createElement("rect", {
+    width: "104.34",
+    height: "234.455",
+    fill: "white",
+    transform: "translate(169.276 4.77246)"
+  })), React.createElement("clipPath", {
+    id: "clip4_3639_29751"
+  }, React.createElement("rect", {
+    width: "177.395",
+    height: "244",
+    fill: "white",
+    transform: "translate(259.617)"
+  })), React.createElement("clipPath", {
+    id: "clip5_3639_29751"
+  }, React.createElement("rect", {
+    width: "177.395",
+    height: "244",
+    fill: "white",
+    transform: "translate(259.617)"
+  })), React.createElement("clipPath", {
+    id: "clip6_3639_29751"
+  }, React.createElement("rect", {
+    width: "206.64",
+    height: "234.744",
+    fill: "white",
+    transform: "translate(406 4.62769)"
+  })), React.createElement("clipPath", {
+    id: "clip7_3639_29751"
+  }, React.createElement("rect", {
+    width: "206.64",
+    height: "234.744",
+    fill: "white",
+    transform: "translate(406 4.62769)"
+  })), React.createElement("clipPath", {
+    id: "clip8_3639_29751"
+  }, React.createElement("rect", {
+    width: "189.694",
+    height: "234.744",
+    fill: "white",
+    transform: "translate(565 5)"
+  })), React.createElement("clipPath", {
+    id: "clip9_3639_29751"
+  }, React.createElement("rect", {
+    width: "189.694",
+    height: "234.744",
+    fill: "white",
+    transform: "translate(565 5)"
+  })), React.createElement("clipPath", {
+    id: "clip10_3639_29751"
+  }, React.createElement("rect", {
+    width: "187.333",
+    height: "234.472",
+    fill: "white",
+    transform: "translate(752 4.76416)"
+  })), React.createElement("clipPath", {
+    id: "clip11_3639_29751"
+  }, React.createElement("rect", {
+    width: "187.333",
+    height: "234.472",
+    fill: "white",
+    transform: "translate(752 4.76416)"
+  })), React.createElement("clipPath", {
+    id: "clip12_3639_29751"
+  }, React.createElement("rect", {
+    width: "191.961",
+    height: "235.034",
+    fill: "white",
+    transform: "translate(921 4.48315)"
+  })), React.createElement("clipPath", {
+    id: "clip13_3639_29751"
+  }, React.createElement("rect", {
+    width: "191.961",
+    height: "235.034",
+    fill: "white",
+    transform: "translate(921 4.48315)"
+  })), React.createElement("clipPath", {
+    id: "clip14_3639_29751"
+  }, React.createElement("rect", {
+    width: "154.498",
+    height: "241.686",
+    fill: "white",
+    transform: "translate(1096 1.15698)"
+  })), React.createElement("clipPath", {
+    id: "clip15_3639_29751"
+  }, React.createElement("rect", {
+    width: "154.498",
+    height: "241.686",
+    fill: "white",
+    transform: "translate(1096 1.15698)"
+  })), React.createElement("clipPath", {
+    id: "clip16_3639_29751"
+  }, React.createElement("rect", {
+    width: "185.613",
+    height: "240.356",
+    fill: "white",
+    transform: "translate(1243 1.82227)"
+  })), React.createElement("clipPath", {
+    id: "clip17_3639_29751"
+  }, React.createElement("rect", {
+    width: "185.613",
+    height: "240.356",
+    fill: "white",
+    transform: "translate(1243 1.82227)"
+  })), React.createElement("clipPath", {
+    id: "clip18_3639_29751"
+  }, React.createElement("rect", {
+    width: "208.397",
+    height: "234.802",
+    fill: "white",
+    transform: "translate(1412 4.59888)"
+  })), React.createElement("clipPath", {
+    id: "clip19_3639_29751"
+  }, React.createElement("rect", {
+    width: "208.397",
+    height: "234.802",
+    fill: "white",
+    transform: "translate(1412 4.59888)"
+  })))));
 };
 
 var UpIcon = function UpIcon(_ref) {