@threedddplus/logoeditor 0.0.147 → 0.0.149

package/dist/logoeditor.cjs.development.js

@@ -4037,10 +4037,13 @@ var optionpresets = {
 }; // End of optionpresets
 
 var converterSlice = function converterSlice(set, get) {
-  var processImage = function processImage(svgstr, colorValue, canvasToLoad) {
+  var processImage = function processImage(svgstr, colorValue, canvasToLoad, addCheckerBox) {
     if (canvasToLoad === void 0) {
       canvasToLoad = use3dddPlus.getState().popupCanv;
     }
+    if (addCheckerBox === void 0) {
+      addCheckerBox = true;
+    }
     fabric.fabric.loadSVGFromString(
     //@ts-ignore
     new String(svgstr), function (objects, options) {
@@ -4231,40 +4234,42 @@ var converterSlice = function converterSlice(set, get) {
         });
         return rect;
       }
-      // Create grid lines
-      for (var i = 0; i < numCols; i++) {
-        var x = i * gridSize;
-        canvas.add(new fabric.fabric.Line([x, 0, x, canvasHeight], {
-          stroke: '#dadadac7',
-          selectable: false,
-          lockMovementX: true,
-          lockMovementY: true,
-          lockScalingX: true,
-          lockScalingY: true,
-          type: 'line'
-        }));
-      }
-      for (var j = 0; j < numRows; j++) {
-        var y = j * gridSize;
-        canvas.add(new fabric.fabric.Line([0, y, canvasWidth, y], {
-          stroke: '#FFFFFF',
-          selectable: false,
-          lockMovementX: true,
-          lockMovementY: true,
-          lockScalingX: true,
-          lockScalingY: true,
-          type: 'line'
-        }));
-      }
-      // Fill grid with checkerboard pattern
-      for (var i = 0; i < numCols; i++) {
+      if (addCheckerBox) {
+        // Create grid lines
+        for (var i = 0; i < numCols; i++) {
+          var x = i * gridSize;
+          canvas.add(new fabric.fabric.Line([x, 0, x, canvasHeight], {
+            stroke: '#dadadac7',
+            selectable: false,
+            lockMovementX: true,
+            lockMovementY: true,
+            lockScalingX: true,
+            lockScalingY: true,
+            type: 'line'
+          }));
+        }
         for (var j = 0; j < numRows; j++) {
-          var _use3dddPlus$getState2, _use3dddPlus$getState3;
-          var left = i * gridSize;
-          var top = j * gridSize;
-          var isEvenRow = j % 2 === 0;
-          var rect = createCheckerboardRect(left, top, gridSize, gridSize, isEvenRow);
-          (_use3dddPlus$getState2 = use3dddPlus.getState()) == null ? void 0 : (_use3dddPlus$getState3 = _use3dddPlus$getState2.popupCanv) == null ? void 0 : _use3dddPlus$getState3.add(rect);
+          var y = j * gridSize;
+          canvas.add(new fabric.fabric.Line([0, y, canvasWidth, y], {
+            stroke: '#FFFFFF',
+            selectable: false,
+            lockMovementX: true,
+            lockMovementY: true,
+            lockScalingX: true,
+            lockScalingY: true,
+            type: 'line'
+          }));
+        }
+        // Fill grid with checkerboard pattern
+        for (var i = 0; i < numCols; i++) {
+          for (var j = 0; j < numRows; j++) {
+            var _use3dddPlus$getState2, _use3dddPlus$getState3;
+            var left = i * gridSize;
+            var top = j * gridSize;
+            var isEvenRow = j % 2 === 0;
+            var rect = createCheckerboardRect(left, top, gridSize, gridSize, isEvenRow);
+            (_use3dddPlus$getState2 = use3dddPlus.getState()) == null ? void 0 : (_use3dddPlus$getState3 = _use3dddPlus$getState2.popupCanv) == null ? void 0 : _use3dddPlus$getState3.add(rect);
+          }
         }
       }
       canvas.add(loadedObject).renderAll();
@@ -4279,7 +4284,7 @@ var converterSlice = function converterSlice(set, get) {
       use3dddPlus.getState().popUpCanvasUpdateModification(true);
       var _objects = canvas.getObjects();
       _objects.forEach(function (element) {
-        if (element.type !== "line") {
+        if (element.type !== 'line') {
           element.set({
             perPixelTargetFind: true
           });
@@ -4375,7 +4380,7 @@ var converterSlice = function converterSlice(set, get) {
       return aiConvert;
     }(),
     loadImageFromURL: function () {
-      var _loadImageFromURL = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(url, canvasToLoad) {
+      var _loadImageFromURL = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(url, canvasToLoad, createCheckerBox) {
         var response, blob;
         return _regeneratorRuntime().wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
@@ -4390,7 +4395,7 @@ var converterSlice = function converterSlice(set, get) {
               return response.text();
             case 6:
               blob = _context3.sent;
-              processImage(blob, 8, canvasToLoad);
+              processImage(blob, 8, canvasToLoad, createCheckerBox);
               //  return url;
             case 8:
             case "end":
@@ -4398,7 +4403,7 @@ var converterSlice = function converterSlice(set, get) {
           }
         }, _callee3);
       }));
-      function loadImageFromURL(_x3, _x4) {
+      function loadImageFromURL(_x3, _x4, _x5) {
         return _loadImageFromURL.apply(this, arguments);
       }
       return loadImageFromURL;
@@ -4415,7 +4420,7 @@ var converterSlice = function converterSlice(set, get) {
       });
       if (convert) {
         if (isSVG) {
-          if (ext === "vectorSVG") {
+          if (ext === 'vectorSVG') {
             use3dddPlus.setState({
               loading: true
             });
@@ -4434,7 +4439,7 @@ var converterSlice = function converterSlice(set, get) {
             reader.readAsText(data);
           }
         } else {
-          console.log("entering INTO ImageTracer-->");
+          console.log('entering INTO ImageTracer-->');
           ImageTracer.imageToSVG(data, function (svgstr) {
             use3dddPlus.setState({
               imageData: svgstr
@@ -4443,7 +4448,7 @@ var converterSlice = function converterSlice(set, get) {
           }, ext && (ext.toLowerCase() === 'jpg' || ext.toLowerCase() === 'jpeg') ? optionpresets.jpg : ext.toLowerCase() === 'png' ? optionpresets.png : optionpresets["default"]);
         }
       } else {
-        console.log("entering iINTO PROCESSIMAGE--->");
+        console.log('entering iINTO PROCESSIMAGE--->');
         processImage(data, 8);
       }
     },
@@ -4664,7 +4669,7 @@ var converterSlice = function converterSlice(set, get) {
           }
         }, _callee5);
       }));
-      function convertPdfToImages(_x5) {
+      function convertPdfToImages(_x6) {
         return _convertPdfToImages.apply(this, arguments);
       }
       return convertPdfToImages;
@@ -5629,6 +5634,7 @@ var initCanvas = function initCanvas() {
 };
 
 var ContextMenu = function ContextMenu() {
+  var _canvas$getActiveObje, _canvas$getActiveObje2;
   var _use3dddPlus = use3dddPlus(function (state) {
       return [state.activeSelection, state.fabricCanvas];
     }, shallow.shallow),
@@ -5756,10 +5762,38 @@ var ContextMenu = function ContextMenu() {
       showContextMenu: false
     });
   };
+  var ungroup = function ungroup() {
+    activeObj.toObject = function (toObject) {
+      return function () {
+        return fabric.fabric.util.object.extend(toObject.call(this), {
+          objects: this._objects.map(function (obj) {
+            return obj.toObject();
+          })
+        });
+      };
+    }(activeObj.toObject);
+    var items = activeObj._objects;
+    activeObj._restoreObjectsState();
+    use3dddPlus.getState().fabricCanvas.remove(activeObj);
+    items.forEach(function (item) {
+      use3dddPlus.getState().fabricCanvas.add(item);
+      // 'id', 'colorFill','shapeType','shapeSize','text','textAlign','stroke',
+      // 'strokeWidth','fontFamily','icon'
+      console.log();
+    });
+  };
+  var group = function group() {
+    var activeObject = use3dddPlus.getState().fabricCanvas.getActiveObject();
+    if (activeObject.type === 'activeSelection') {
+      activeObject.toGroup();
+      canvas.renderAll();
+    }
+  };
   var menu = [{
     id: 1,
     name: 'COPY / PASTE ',
     onclick: copy,
+    display: true,
     icon: React__default.createElement(Copy, null)
   },
   // {
@@ -5772,47 +5806,69 @@ var ContextMenu = function ContextMenu() {
     id: 3,
     name: 'Bring to front',
     onclick: bringForward,
+    display: true,
     icon: React__default.createElement(SendToFront, null)
   }, {
     id: 4,
     name: 'Send to back',
     onclick: sendBackwards,
+    display: true,
     icon: React__default.createElement(SendToBack, null)
   }, {
     id: 5,
     name: 'Bring above objects',
     onclick: bringToFront,
+    display: true,
     icon: React__default.createElement(SendAObject, null)
   }, {
     id: 6,
     name: 'Send under objects',
     onclick: sendToBack,
+    display: true,
     icon: React__default.createElement(SendUnderObject, null)
   }, {
     id: 7,
     name: 'Flip Horizontal',
     onclick: flipX,
+    display: true,
     icon: React__default.createElement(FlipH, null)
   }, {
     id: 8,
     name: 'Flip Vertical',
     onclick: flipY,
+    display: true,
     icon: React__default.createElement(FlipV, null)
   }, {
     id: 9,
     name: 'Snap to center',
+    display: true,
     onclick: snapToCenter,
     icon: React__default.createElement(SnapToCenter, null)
+  }, {
+    id: 10,
+    name: 'group',
+    onclick: group,
+    display: (canvas == null ? void 0 : (_canvas$getActiveObje = canvas.getActiveObject()) == null ? void 0 : _canvas$getActiveObje.type) === 'activeSelection',
+    icon: React__default.createElement(SnapToCenter, null)
+  }, {
+    id: 10,
+    name: 'ungroup',
+    onclick: ungroup,
+    display: (canvas == null ? void 0 : (_canvas$getActiveObje2 = canvas.getActiveObject()) == null ? void 0 : _canvas$getActiveObje2.type) === "group",
+    icon: React__default.createElement(SnapToCenter, null)
   }];
   return React__default.createElement("ul", null, menu.map(function (item, index) {
     return React__default.createElement("li", {
       className: "flex cursor-pointer hover:text-[#e11a38]  border border-b-[1px] border-[#EBEBEB] px-[30px] py-[14px] ",
       onClick: item.onclick,
-      key: index
+      key: index,
+      style: !item.display ? {
+        display: 'none'
+      } : {}
     }, React__default.createElement("span", null, React__default.createElement(IconButton, {
       label: "",
       icon: item.icon,
-      className: "pointer-events-auto cursor-pointer  m-auto",
+      className: "m-auto cursor-pointer pointer-events-auto",
       size: "1.125rem"
     })), React__default.createElement("span", {
       className: " pl-[20px] text-sm font-bold uppercase"
@@ -6071,365 +6127,365 @@ var css_248z$2 = ".positionClass:before{left:calc(var(--arrowPosition))}";
 styleInject(css_248z$2);
 
 var defaultColorNames = [{
-  color: '#040404',
-  name: 'Black'
+  color: 'transparent',
+  name: 'Transparent'
 }, {
-  color: '#0B162E',
-  name: 'Navy'
+  color: '#FFFFFF',
+  name: 'White'
 }, {
-  color: '#511318',
-  name: 'Maroon'
+  color: '#FAF7ED',
+  name: 'Cream'
 }, {
-  color: '#12242C',
-  name: 'Graphite'
+  color: '#EAE3DC',
+  name: 'Metallic Champagne'
 }, {
-  color: '#362519',
-  name: 'Mud'
+  color: '#D7DEE2',
+  name: 'Light Silver'
 }, {
-  color: '#332322',
-  name: 'Dark Walnut'
+  color: '#E9E7D9',
+  name: 'Eggshell'
 }, {
-  color: '#581C28',
-  name: 'Burgundy'
+  color: '#CFCDCD',
+  name: 'Metallic Silver'
 }, {
-  color: '#482925',
-  name: 'Walnut'
+  color: '#D6D1C3',
+  name: 'Stone'
 }, {
-  color: '#5E1B56',
-  name: 'Grape'
+  color: '#C6C8C8',
+  name: 'Heather Grey'
 }, {
-  color: '#48236E',
-  name: 'Purple'
+  color: '#E9D7B7',
+  name: 'Khaki'
 }, {
-  color: '#004125',
-  name: 'Dark Pine'
+  color: '#BDBDC0',
+  name: 'Silver'
 }, {
-  color: '#532D23',
-  name: 'Brown'
+  color: '#C2C2B8',
+  name: 'Dark Stone'
 }, {
-  color: '#163959',
-  name: 'Denim'
+  color: '#FFF9B7',
+  name: 'Mellow Yellow'
 }, {
-  color: '#063E44',
-  name: 'Forest Teal'
+  color: '#F5DDA2',
+  name: 'Vegas Gold'
 }, {
-  color: '#7D1523',
-  name: 'Cardinal'
+  color: '#CDE4B4',
+  name: 'Patina Green'
 }, {
-  color: '#39392A',
-  name: 'Sage'
+  color: '#AADAC9',
+  name: 'Light Mint'
 }, {
-  color: '#005028',
-  name: 'Dark Green'
+  color: '#AECBAC',
+  name: 'Willow'
 }, {
-  color: '#3D471F',
-  name: 'Olive'
+  color: '#BDA998',
+  name: 'Camo Stone'
 }, {
-  color: '#454126',
-  name: 'Army Olive'
+  color: '#8BD6D4',
+  name: 'Aruba Blue'
 }, {
-  color: '#8E2056',
-  name: 'Violet'
+  color: '#EFC78D',
+  name: 'Tan'
 }, {
-  color: '#0B5935',
-  name: 'Kelly'
+  color: '#7BBEE8',
+  name: 'Columbia Blue'
 }, {
-  color: '#3B4548',
-  name: 'Asphalt'
+  color: '#BFA881',
+  name: 'Beige'
 }, {
-  color: '#67451F',
-  name: 'Buck Mesh'
+  color: '#9BA997',
+  name: 'Spring Green'
 }, {
-  color: '#364D44',
-  name: 'Spruce'
+  color: '#84B5B2',
+  name: 'Smoke Blue'
 }, {
-  color: '#5F452F',
-  name: 'Bark'
+  color: '#F4AC96',
+  name: 'Peach'
 }, {
-  color: '#94321D',
-  name: 'Texas Orange'
+  color: '#6AC4CC',
+  name: 'Southern Mint'
 }, {
-  color: '#59501C',
-  name: 'Army Gold'
+  color: '#CE9F9F',
+  name: 'Light Rose'
 }, {
-  color: '#00643B',
-  name: 'Irish Green'
+  color: '#DEB66A',
+  name: 'Brass'
 }, {
-  color: '#824323',
-  name: 'Buck'
+  color: '#F6D75E',
+  name: 'Lt. Cal Gold'
 }, {
-  color: '#624B36',
-  name: 'Medium Brown'
+  color: '#FBB66E',
+  name: 'Honey'
 }, {
-  color: '#B82026',
-  name: 'Red'
+  color: '#C09B7B',
+  name: 'Taupe'
 }, {
-  color: '#8C4522',
-  name: 'Copper'
+  color: '#FCAE77',
+  name: 'Light Peach'
 }, {
-  color: '#4856A6',
-  name: 'Lilac'
+  color: '#EEBD5B',
+  name: 'Metallic Gold'
 }, {
-  color: '#0D5EA0',
-  name: 'Royal'
+  color: '#F5A2C6',
+  name: 'Cotton Candy'
 }, {
-  color: '#005F9C',
-  name: 'Air Force Blue'
+  color: '#F8ED4D',
+  name: 'Neon Yellow'
 }, {
-  color: '#3F7336',
-  name: 'Lime Green'
+  color: '#FFC937',
+  name: 'Gold'
 }, {
-  color: '#DD2825',
-  name: 'Red-Orange'
+  color: '#FDED00',
+  name: 'Lemon'
 }, {
-  color: '#DE1761',
-  name: 'Fuchsia'
+  color: '#CB9E59',
+  name: 'Old Gold'
 }, {
-  color: '#007189',
-  name: 'Surf Blue'
+  color: '#16B1D1',
+  name: 'Aqua'
 }, {
-  color: '#5F6162',
-  name: 'Charcoal'
+  color: '#FCC614',
+  name: 'Yellow'
 }, {
-  color: '#057F88',
-  name: 'Blue Teal'
+  color: '#C6FF19',
+  name: 'Optic Green'
 }, {
-  color: '#747C32',
-  name: 'Moss'
+  color: '#B790C2',
+  name: 'Pale Lilac'
 }, {
-  color: '#E45224',
-  name: 'Orange'
+  color: '#F4B716',
+  name: 'Dark Cal Gold'
 }, {
-  color: '#F04D30',
-  name: 'Blaze Orange'
+  color: '#72C164',
+  name: 'Key Lime'
 }, {
-  color: '#0080C1',
-  name: 'Bright Blue'
+  color: '#85C44B',
+  name: 'Neon Green'
 }, {
-  color: '#C16A27',
-  name: 'Toast'
+  color: '#89906D',
+  name: 'Light Olive'
 }, {
-  color: '#E64677',
-  name: 'Neon Pink'
+  color: '#F283B4',
+  name: 'Pink'
 }, {
-  color: '#766A5B',
-  name: 'Driftwood'
+  color: '#BEA82F',
+  name: 'Green Gold'
 }, {
-  color: '#667360',
-  name: 'Mute Green'
+  color: '#F37F95',
+  name: 'Optic Pink'
 }, {
-  color: '#AB6B6C',
-  name: 'Dark Rose'
+  color: '#F27D66',
+  name: 'Southern Peach'
 }, {
-  color: '#2481B3',
-  name: 'Baltic Blue'
+  color: '#867E72',
+  name: 'Putty'
 }, {
-  color: '#00A34A',
-  name: 'Emerald'
+  color: '#ED9717',
+  name: 'Dark Gold'
 }, {
-  color: '#E86432',
-  name: 'Salmon'
+  color: '#81A046',
+  name: 'D Sport Green'
 }, {
-  color: '#F26920',
-  name: 'Neon Orange'
+  color: '#F5831E',
+  name: 'Tenn. Orange'
 }, {
-  color: '#857262',
-  name: 'Desert Brown'
+  color: '#CE8A2D',
+  name: 'Mustard'
 }, {
-  color: '#93715B',
-  name: 'Light Brown'
-}, {
-  color: '#A276B3',
-  name: 'Lavender'
+  color: '#0A96BD',
+  name: 'Cyan'
 }, {
-  color: '#00A84E',
-  name: 'Emerald Maderia'
+  color: '#6C7A89',
+  name: 'Steel Grey'
 }, {
-  color: '#F3751F',
-  name: 'Gold Orange'
+  color: '#00A192',
+  name: 'Green Teal'
 }, {
-  color: '#05A17E',
-  name: 'Mint'
+  color: '#53878B',
+  name: 'Bahama Blue'
 }, {
   color: '#1B91D0',
   name: 'Sky Blue'
 }, {
-  color: '#53878B',
-  name: 'Bahama Blue'
+  color: '#05A17E',
+  name: 'Mint'
 }, {
-  color: '#00A192',
-  name: 'Green Teal'
+  color: '#F3751F',
+  name: 'Gold Orange'
 }, {
-  color: '#6C7A89',
-  name: 'Steel Grey'
+  color: '#00A84E',
+  name: 'Emerald Maderia'
 }, {
-  color: '#0A96BD',
-  name: 'Cyan'
+  color: '#A276B3',
+  name: 'Lavender'
 }, {
-  color: '#CE8A2D',
-  name: 'Mustard'
+  color: '#93715B',
+  name: 'Light Brown'
 }, {
-  color: '#F5831E',
-  name: 'Tenn. Orange'
+  color: '#857262',
+  name: 'Desert Brown'
 }, {
-  color: '#81A046',
-  name: 'D Sport Green'
+  color: '#F26920',
+  name: 'Neon Orange'
 }, {
-  color: '#ED9717',
-  name: 'Dark Gold'
+  color: '#E86432',
+  name: 'Salmon'
 }, {
-  color: '#867E72',
-  name: 'Putty'
+  color: '#00A34A',
+  name: 'Emerald'
 }, {
-  color: '#F27D66',
-  name: 'Southern Peach'
+  color: '#2481B3',
+  name: 'Baltic Blue'
 }, {
-  color: '#F37F95',
-  name: 'Optic Pink'
+  color: '#AB6B6C',
+  name: 'Dark Rose'
 }, {
-  color: '#BEA82F',
-  name: 'Green Gold'
+  color: '#667360',
+  name: 'Mute Green'
 }, {
-  color: '#F283B4',
-  name: 'Pink'
+  color: '#766A5B',
+  name: 'Driftwood'
 }, {
-  color: '#89906D',
-  name: 'Light Olive'
+  color: '#E64677',
+  name: 'Neon Pink'
 }, {
-  color: '#85C44B',
-  name: 'Neon Green'
+  color: '#C16A27',
+  name: 'Toast'
 }, {
-  color: '#72C164',
-  name: 'Key Lime'
+  color: '#0080C1',
+  name: 'Bright Blue'
 }, {
-  color: '#F4B716',
-  name: 'Dark Cal Gold'
+  color: '#F04D30',
+  name: 'Blaze Orange'
 }, {
-  color: '#B790C2',
-  name: 'Pale Lilac'
+  color: '#E45224',
+  name: 'Orange'
 }, {
-  color: '#C6FF19',
-  name: 'Optic Green'
+  color: '#747C32',
+  name: 'Moss'
 }, {
-  color: '#FCC614',
-  name: 'Yellow'
+  color: '#057F88',
+  name: 'Blue Teal'
 }, {
-  color: '#16B1D1',
-  name: 'Aqua'
+  color: '#5F6162',
+  name: 'Charcoal'
 }, {
-  color: '#CB9E59',
-  name: 'Old Gold'
+  color: '#007189',
+  name: 'Surf Blue'
 }, {
-  color: '#FDED00',
-  name: 'Lemon'
+  color: '#DE1761',
+  name: 'Fuchsia'
 }, {
-  color: '#FFC937',
-  name: 'Gold'
+  color: '#DD2825',
+  name: 'Red-Orange'
 }, {
-  color: '#F8ED4D',
-  name: 'Neon Yellow'
+  color: '#3F7336',
+  name: 'Lime Green'
 }, {
-  color: '#F5A2C6',
-  name: 'Cotton Candy'
+  color: '#005F9C',
+  name: 'Air Force Blue'
 }, {
-  color: '#EEBD5B',
-  name: 'Metallic Gold'
+  color: '#0D5EA0',
+  name: 'Royal'
 }, {
-  color: '#FCAE77',
-  name: 'Light Peach'
+  color: '#4856A6',
+  name: 'Lilac'
 }, {
-  color: '#C09B7B',
-  name: 'Taupe'
+  color: '#8C4522',
+  name: 'Copper'
 }, {
-  color: '#FBB66E',
-  name: 'Honey'
+  color: '#B82026',
+  name: 'Red'
 }, {
-  color: '#F6D75E',
-  name: 'Lt. Cal Gold'
+  color: '#624B36',
+  name: 'Medium Brown'
 }, {
-  color: '#DEB66A',
-  name: 'Brass'
+  color: '#824323',
+  name: 'Buck'
 }, {
-  color: '#CE9F9F',
-  name: 'Light Rose'
+  color: '#00643B',
+  name: 'Irish Green'
 }, {
-  color: '#6AC4CC',
-  name: 'Southern Mint'
+  color: '#59501C',
+  name: 'Army Gold'
 }, {
-  color: '#F4AC96',
-  name: 'Peach'
+  color: '#94321D',
+  name: 'Texas Orange'
 }, {
-  color: '#84B5B2',
-  name: 'Smoke Blue'
+  color: '#5F452F',
+  name: 'Bark'
 }, {
-  color: '#9BA997',
-  name: 'Spring Green'
+  color: '#364D44',
+  name: 'Spruce'
 }, {
-  color: '#BFA881',
-  name: 'Beige'
+  color: '#67451F',
+  name: 'Buck Mesh'
 }, {
-  color: '#7BBEE8',
-  name: 'Columbia Blue'
+  color: '#3B4548',
+  name: 'Asphalt'
 }, {
-  color: '#EFC78D',
-  name: 'Tan'
+  color: '#0B5935',
+  name: 'Kelly'
 }, {
-  color: '#8BD6D4',
-  name: 'Aruba Blue'
+  color: '#8E2056',
+  name: 'Violet'
 }, {
-  color: '#BDA998',
-  name: 'Camo Stone'
+  color: '#454126',
+  name: 'Army Olive'
 }, {
-  color: '#AECBAC',
-  name: 'Willow'
+  color: '#3D471F',
+  name: 'Olive'
 }, {
-  color: '#AADAC9',
-  name: 'Light Mint'
+  color: '#005028',
+  name: 'Dark Green'
 }, {
-  color: '#CDE4B4',
-  name: 'Patina Green'
+  color: '#39392A',
+  name: 'Sage'
 }, {
-  color: '#F5DDA2',
-  name: 'Vegas Gold'
+  color: '#7D1523',
+  name: 'Cardinal'
 }, {
-  color: '#FFF9B7',
-  name: 'Mellow Yellow'
+  color: '#063E44',
+  name: 'Forest Teal'
 }, {
-  color: '#C2C2B8',
-  name: 'Dark Stone'
+  color: '#163959',
+  name: 'Denim'
 }, {
-  color: '#BDBDC0',
-  name: 'Silver'
+  color: '#532D23',
+  name: 'Brown'
 }, {
-  color: '#E9D7B7',
-  name: 'Khaki'
+  color: '#004125',
+  name: 'Dark Pine'
 }, {
-  color: '#C6C8C8',
-  name: 'Heather Grey'
+  color: '#48236E',
+  name: 'Purple'
 }, {
-  color: '#D6D1C3',
-  name: 'Stone'
+  color: '#5E1B56',
+  name: 'Grape'
 }, {
-  color: '#CFCDCD',
-  name: 'Metallic Silver'
+  color: '#482925',
+  name: 'Walnut'
 }, {
-  color: '#E9E7D9',
-  name: 'Eggshell'
+  color: '#581C28',
+  name: 'Burgundy'
 }, {
-  color: '#D7DEE2',
-  name: 'Light Silver'
+  color: '#332322',
+  name: 'Dark Walnut'
 }, {
-  color: '#EAE3DC',
-  name: 'Metallic Champagne'
+  color: '#362519',
+  name: 'Mud'
 }, {
-  color: '#FAF7ED',
-  name: 'Cream'
+  color: '#12242C',
+  name: 'Graphite'
 }, {
-  color: '#FFFFFF',
-  name: 'White'
+  color: '#511318',
+  name: 'Maroon'
 }, {
-  color: 'transparent',
-  name: 'Transparent'
+  color: '#0B162E',
+  name: 'Navy'
+}, {
+  color: '#040404',
+  name: 'Black'
 }];
 
 var ColorPalette = function ColorPalette(_ref) {