@redheadphone/react-json-grid - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

dist/index.es.js

@@ -1,3 +0,58 @@
-import React, { useState, Fragment, useEffect, useRef } from 'react';
+import React, { useState, Fragment, useRef, useEffect } from 'react';
 
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
 function styleInject(css, ref) {
@@ -7,3 +62,3 @@ if ( ref === void 0 ) ref = {};
 
-  if (!css || typeof document === 'undefined') { return; }
+  if (typeof document === 'undefined') { return; }
 
@@ -31,8 +86,8 @@ var head = document.head || document.getElementsByTagName('head')[0];
 
-var css = ".styles_json-grid-container__1do2c {\n  --jg-bg-color: #222;\n  --jg-table-border-color: #b5b5b5;\n  --jg-highlight-bg-color: #3b3b3b;\n  --jg-cell-border-color: #474747;\n\n  --jg-key-name-color: #ffffff;\n  --jg-index-color: #949494;\n  --jg-number-color: #6c99bb;\n  --jg-boolean-color: #6c99bb;\n  --jg-string-color: #a5c261;\n  --jg-object-color: #ffffff;\n\n  --jg-table-header-bg-color: #444;\n  --jg-table-header-color: #ffffff;\n\n  --jg-search-highlight-bg-color: #565a36;\n\n  display: inline-block;\n  margin: 0;\n  font-family: \"Segoe UI\", Roboto, Arial, sans-serif;\n  line-height: 1.5;\n  text-align: left;\n  background-color: var(--jg-bg-color);\n}\n\n.styles_json-grid-table__3KxDK {\n  border-collapse: separate;\n  border-spacing: 0;\n  border: solid var(--jg-table-border-color) 1px;\n}\n\n.styles_json-grid-container__1do2c, .styles_json-grid-table__3KxDK{\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.styles_highlight__1bpMD {\n  background-color: var(--jg-highlight-bg-color);\n  font-weight: bold;\n}\n\n.styles_obj__dFKgt {\n  border: 1px solid var(--jg-cell-border-color);\n  padding: 3px 10px;\n  padding-bottom: 4px;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.styles_obj__dFKgt, .styles_obj__dFKgt .styles_name__13yyl {\n  color: var(--jg-key-name-color);\n}\n\n.styles_obj__dFKgt .styles_index__2HDDg {\n  color: var(--jg-index-color);\n}\n\n.styles_obj__dFKgt .styles_number__2AHSW{\n  color: var(--jg-number-color);\n}\n\n.styles_obj__dFKgt .styles_boolean__1BANa {\n  color: var(--jg-boolean-color);\n}\n\n.styles_obj__dFKgt .styles_string__rq61g {\n  color: var(--jg-string-color);\n}\n\n.styles_obj__dFKgt .styles_object__3BV4k {\n  color: var(--jg-object-color);\n}\n\n.styles_order__3lWKM {\n  background-color: var(--jg-table-header-bg-color);\n  color: var(--jg-table-header-color);\n}\n\n.styles_key__2l8qn {\n  vertical-align: top;\n}\n\n.styles_title__1cca0 {\n  font-weight: bold;\n}\n\n.styles_plusminus__3UVy2 {\n  font-size: 15px;\n  cursor: pointer;\n  margin-right: 2px;\n}\n\n.styles_search-highlight__PcqVt {\n  background-color: var(--jg-search-highlight-bg-color);\n  padding: 1px 5px;\n  padding-top: 0px;\n  border-radius: 2px;\n}\n\n.styles_glyphicon__3VdjK {\n  position: relative;\n  top: 3px;\n  display: inline-block;\n}\n";
-var styles = { "json-grid-container": "styles_json-grid-container__1do2c", "json-grid-table": "styles_json-grid-table__3KxDK", "highlight": "styles_highlight__1bpMD", "obj": "styles_obj__dFKgt", "name": "styles_name__13yyl", "index": "styles_index__2HDDg", "number": "styles_number__2AHSW", "boolean": "styles_boolean__1BANa", "string": "styles_string__rq61g", "object": "styles_object__3BV4k", "order": "styles_order__3lWKM", "key": "styles_key__2l8qn", "title": "styles_title__1cca0", "plusminus": "styles_plusminus__3UVy2", "search-highlight": "styles_search-highlight__PcqVt", "glyphicon": "styles_glyphicon__3VdjK" };
-styleInject(css);
+var css_248z = ".styles_json-grid-container__JQTup {\n  --jg-bg-color: #222;\n  --jg-table-border-color: #b5b5b5;\n  --jg-highlight-bg-color: #3b3b3b;\n  --jg-cell-border-color: #474747;\n\n  --jg-key-name-color: #ffffff;\n  --jg-index-color: #949494;\n  --jg-number-color: #6c99bb;\n  --jg-boolean-color: #6c99bb;\n  --jg-string-color: #a5c261;\n  --jg-object-color: #ffffff;\n\n  --jg-table-header-bg-color: #444;\n  --jg-table-header-color: #ffffff;\n\n  --jg-search-highlight-bg-color: #565a36;\n\n  display: inline-block;\n  margin: 0;\n  font-family: \"Segoe UI\", Roboto, Arial, sans-serif;\n  line-height: 1.5;\n  text-align: left;\n  background-color: var(--jg-bg-color);\n}\n\n.styles_json-grid-table__7XqiH {\n  border-collapse: separate;\n  border-spacing: 0;\n  border: solid var(--jg-table-border-color) 1px;\n}\n\n.styles_json-grid-container__JQTup, .styles_json-grid-table__7XqiH{\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.styles_highlight__W5FrO {\n  background-color: var(--jg-highlight-bg-color);\n  font-weight: bold;\n}\n\n.styles_obj__8WJ2U {\n  border: 1px solid var(--jg-cell-border-color);\n  padding: 3px 10px;\n  padding-bottom: 4px;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.styles_obj__8WJ2U, .styles_obj__8WJ2U .styles_name__dNGS- {\n  color: var(--jg-key-name-color);\n}\n\n.styles_obj__8WJ2U .styles_index__3uqHe {\n  color: var(--jg-index-color);\n}\n\n.styles_obj__8WJ2U .styles_number__lu5-j{\n  color: var(--jg-number-color);\n}\n\n.styles_obj__8WJ2U .styles_boolean__6Idt- {\n  color: var(--jg-boolean-color);\n}\n\n.styles_obj__8WJ2U .styles_string__2W6pT {\n  color: var(--jg-string-color);\n}\n\n.styles_obj__8WJ2U .styles_object__8wy4B {\n  color: var(--jg-object-color);\n}\n\n.styles_order__5p9g8 {\n  background-color: var(--jg-table-header-bg-color);\n  color: var(--jg-table-header-color);\n}\n\n.styles_key__VouZ7 {\n  vertical-align: top;\n}\n\n.styles_title__Q-nZR {\n  font-weight: bold;\n}\n\n.styles_plusminus__ZPLfJ {\n  font-size: 15px;\n  cursor: pointer;\n  margin-right: 2px;\n}\n\n.styles_search-highlight__co5ee {\n  background-color: var(--jg-search-highlight-bg-color);\n  padding: 1px 5px;\n  padding-top: 0px;\n  border-radius: 2px;\n}\n\n.styles_glyphicon__XsYc0 {\n  position: relative;\n  top: 3px;\n  display: inline-block;\n}\n";
+var styles = {"json-grid-container":"styles_json-grid-container__JQTup","json-grid-table":"styles_json-grid-table__7XqiH","highlight":"styles_highlight__W5FrO","obj":"styles_obj__8WJ2U","name":"styles_name__dNGS-","index":"styles_index__3uqHe","number":"styles_number__lu5-j","boolean":"styles_boolean__6Idt-","string":"styles_string__2W6pT","object":"styles_object__8wy4B","order":"styles_order__5p9g8","key":"styles_key__VouZ7","title":"styles_title__Q-nZR","plusminus":"styles_plusminus__ZPLfJ","search-highlight":"styles_search-highlight__co5ee","glyphicon":"styles_glyphicon__XsYc0"};
+styleInject(css_248z);
 
 var themes = {
-  default: {
+  "default": {
     bgColor: "#222",
@@ -52,46 +107,16 @@ tableBorderColor: "#b5b5b5",
   },
-  radical: {
-    bgColor: "#1e1e3f",
-    tableBorderColor: "#3a3a5e",
-    highlightBgColor: "#452a4e",
-    cellBorderColor: "#ff79c6",
-    keyNameColor: "#e1efff",
-    indexColor: "#b7b7ce",
-    numberColor: "#ffcc66",
-    booleanColor: "#f18e4f",
-    stringColor: "#a8ff60",
-    objectColor: "#ffcc66",
-    tableHeaderBgColor: "#2b265c",
-    tableHeaderColor: "#e1efff",
-    searchHighlightColor: "#b77ee0"
-  },
-  cobalt: {
-    bgColor: "#002240",
-    tableBorderColor: "#003c60",
-    highlightBgColor: "#003c60",
-    cellBorderColor: "#007acc",
-    keyNameColor: "#ffffff",
-    indexColor: "#007acc",
-    numberColor: "#8be9fd",
-    booleanColor: "#ff79c6",
-    stringColor: "#ff79c6",
-    objectColor: "#8be9fd",
-    tableHeaderBgColor: "#003c60",
-    tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#0f5078"
-  },
   dracula: {
-    bgColor: "#282a36",
+    bgColor: "#2b2e3b",
     tableBorderColor: "#44475a",
-    highlightBgColor: "#44475a",
-    cellBorderColor: "#6272a4",
-    keyNameColor: "#bd93f9",
+    highlightBgColor: "#363949",
+    cellBorderColor: "#44475a",
+    keyNameColor: "#F8F8F2",
     indexColor: "#6272a4",
-    numberColor: "#8be9fd",
+    numberColor: "#f1fa8c",
     booleanColor: "#ff79c6",
-    stringColor: "#f1fa8c",
+    stringColor: "#50FA7B",
     objectColor: "#ff79c6",
-    tableHeaderBgColor: "#44475a",
+    tableHeaderBgColor: "#363949",
     tableHeaderColor: "#f8f8f2",
-    searchHighlightBgColor: "#ff96d2"
+    searchHighlightBgColor: "#4c4f67"
   },
@@ -102,67 +127,22 @@ monokai: {
     highlightBgColor: "#49483e",
-    cellBorderColor: "#75715e",
-    keyNameColor: "#f92672",
+    cellBorderColor: "#373a2c",
+    keyNameColor: "#c1c1bd",
     indexColor: "#75715e",
-    numberColor: "#ae81ff",
+    numberColor: "#a3e8f5",
     booleanColor: "#ae81ff",
-    stringColor: "#e6db74",
+    stringColor: "#ece393",
     objectColor: "#a6e22e",
     tableHeaderBgColor: "#414434",
     tableHeaderColor: "#f8f8f2",
-    searchHighlightBgColor: "#797760"
+    searchHighlightBgColor: "#72705a"
   },
-  solarizedLight: {
-    bgColor: "#fdf6e3",
-    tableBorderColor: "#839496",
-    highlightBgColor: "#eee8d5",
-    cellBorderColor: "#d0d0d0",
-    keyNameColor: "#268bd2",
-    indexColor: "#657b83",
-    numberColor: "#2aa198",
-    booleanColor: "#2aa198",
-    stringColor: "#859900",
-    objectColor: "#2aa198",
-    tableHeaderBgColor: "#eee8d5",
-    tableHeaderColor: "#657b83",
-    searchHighlightBgColor: "#ddd1ab"
-  },
-  solarizedDark: {
-    bgColor: "#002b36",
-    tableBorderColor: "#586e75",
-    highlightBgColor: "#073642",
-    cellBorderColor: "#073642",
-    keyNameColor: "#268bd2",
-    indexColor: "#839496",
-    numberColor: "#b58900",
-    booleanColor: "#b58900",
-    stringColor: "#859900",
-    objectColor: "#b58900",
-    tableHeaderBgColor: "#073642",
-    tableHeaderColor: "#93a1a1",
-    searchHighlightBgColor: "#185e70"
-  },
-  materialDark: {
-    bgColor: "#263238",
-    tableBorderColor: "#37474f",
-    highlightBgColor: "#37474f",
-    cellBorderColor: "#546e7a",
-    keyNameColor: "#80cbc4",
-    indexColor: "#90a4ae",
-    numberColor: "#82b1ff",
-    booleanColor: "#82b1ff",
-    stringColor: "#c3e88d",
-    objectColor: "#ffcb6b",
-    tableHeaderBgColor: "#455a64",
-    tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#ff5370"
-  },
-  oceanicNext: {
-    bgColor: "#1b2b34",
+  oceanicPark: {
+    bgColor: "#17242B",
     tableBorderColor: "#2c3e50",
-    highlightBgColor: "#343d46",
-    cellBorderColor: "#34495e",
-    keyNameColor: "#82b1ff",
+    highlightBgColor: "#345365",
+    cellBorderColor: "#2b4554",
+    keyNameColor: "#89adc2",
     indexColor: "#546e7a",
     numberColor: "#89ddff",
-    booleanColor: "#89ddff",
+    booleanColor: "#35A6B3",
     stringColor: "#c3e88d",
@@ -172,18 +152,18 @@ objectColor: "#ffcb6b",
     tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#ff5370"
+    searchHighlightBgColor: "#185e70"
   },
   panda: {
-    bgColor: "#292a2b",
+    bgColor: "#292A2B",
     tableBorderColor: "#4d4e50",
-    highlightBgColor: "#434547",
-    cellBorderColor: "#5f6062",
-    keyNameColor: "#ff6b72",
+    highlightBgColor: "#3e4042",
+    cellBorderColor: "#4c4c4d",
+    keyNameColor: "#b4fdf2",
     indexColor: "#9aedfe",
-    numberColor: "#f5d76e",
-    booleanColor: "#f5d76e",
-    stringColor: "#a5ef63",
+    numberColor: "#35dcfd",
+    booleanColor: "#FF9AA4",
+    stringColor: "#FFB857",
     objectColor: "#ff6b72",
     tableHeaderBgColor: "#3b3c3d",
     tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#ff5370"
+    searchHighlightBgColor: "#4a4d4f"
   },
@@ -205,29 +185,14 @@ gruvboxMaterial: {
   },
-  merko: {
-    bgColor: "#f6f8fa",
-    tableBorderColor: "#e1e4e8",
-    highlightBgColor: "#e1e4e8",
-    cellBorderColor: "#c9d1d9",
-    keyNameColor: "#0366d6",
-    indexColor: "#586069",
-    numberColor: "#22863a",
-    booleanColor: "#22863a",
-    stringColor: "#cb2431",
-    objectColor: "#0366d6",
-    tableHeaderBgColor: "#e1e4e8",
-    tableHeaderColor: "#0366d6",
-    searchHighlightBgColor: "#ffd33d"
-  },
   tokyoNight: {
-    bgColor: "#1a1b26",
+    bgColor: "#1A1B26",
     tableBorderColor: "#272a36",
     highlightBgColor: "#34374c",
     cellBorderColor: "#272a36",
-    keyNameColor: "#9d88f5",
+    keyNameColor: "#C0CAF5",
     indexColor: "#89b8ff",
-    numberColor: "#46d9ff",
-    booleanColor: "#46d9ff",
-    stringColor: "#ff75b5",
+    numberColor: "#7CCE6A",
+    booleanColor: "#7AA2F7",
+    stringColor: "#AC94F7",
     objectColor: "#9d88f5",
-    tableHeaderBgColor: "#3a3e54",
+    tableHeaderBgColor: "#363a4a",
     tableHeaderColor: "#f3f3f3",
@@ -249,39 +214,9 @@ searchHighlightBgColor: "#53577b"
     tableHeaderColor: "#6e5494",
-    searchHighlightBgColor: "#e2cd8f"
+    searchHighlightBgColor: "#FCEED1"
   },
-  minimal: {
-    bgColor: "#f5f5f5",
-    tableBorderColor: "#e0e0e0",
-    highlightBgColor: "#eeeeee",
-    cellBorderColor: "#c0c0c0",
-    keyNameColor: "#333333",
-    indexColor: "#666666",
-    numberColor: "#007acc",
-    booleanColor: "#007acc",
-    stringColor: "#2ca22c",
-    objectColor: "#333333",
-    tableHeaderBgColor: "#f0f0f0",
-    tableHeaderColor: "#333333",
-    searchHighlightBgColor: "#e0e073"
-  },
-  auroraX: {
-    bgColor: "#2b313a",
-    tableBorderColor: "#343c47",
-    highlightBgColor: "#343c47",
-    cellBorderColor: "#3d4752",
-    keyNameColor: "#b4be82",
-    indexColor: "#5c6773",
-    numberColor: "#7aa2f7",
-    booleanColor: "#7aa2f7",
-    stringColor: "#c3a6ff",
-    objectColor: "#b4be82",
-    tableHeaderBgColor: "#343c47",
-    tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#e06c75"
-  },
   atlanticNight: {
-    bgColor: "#2a394f",
-    tableBorderColor: "#344b63",
-    highlightBgColor: "#344b63",
-    cellBorderColor: "#4d5c71",
+    bgColor: "#000720",
+    tableBorderColor: "#000b33",
+    highlightBgColor: "#1f2647",
+    cellBorderColor: "#00114d",
     keyNameColor: "#6cb6ff",
@@ -291,24 +226,9 @@ indexColor: "#6cb6ff",
     booleanColor: "#a2d6ff",
-    stringColor: "#e2e9fd",
+    stringColor: "#BF90C9",
     objectColor: "#6cb6ff",
-    tableHeaderBgColor: "#344b63",
+    tableHeaderBgColor: "#001666",
     tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#ff8f40"
+    searchHighlightBgColor: "#1C2341"
   },
-  aTouchOfLilac: {
-    bgColor: "#f3f0ff",
-    tableBorderColor: "#d2cef4",
-    highlightBgColor: "#e1dcff",
-    cellBorderColor: "#b8b0e8",
-    keyNameColor: "#a26bff",
-    indexColor: "#8664b3",
-    numberColor: "#6772e5",
-    booleanColor: "#6772e5",
-    stringColor: "#528bff",
-    objectColor: "#a26bff",
-    tableHeaderBgColor: "#d2cef4",
-    tableHeaderColor: "#44337a",
-    searchHighlightBgColor: "#edc8bc"
-  },
-  glassUI: {
+  defaultLight: {
     bgColor: "#f5f5f5",
@@ -326,23 +246,8 @@ tableBorderColor: "#d3d3d3",
     tableHeaderColor: "#333333",
-    searchHighlightBgColor: "#e2e29c"
+    searchHighlightBgColor: "#cccccc"
   },
-  fireflyPro: {
-    bgColor: "#292d3e",
-    tableBorderColor: "#414863",
-    highlightBgColor: "#414863",
-    cellBorderColor: "#252938",
-    keyNameColor: "#c3a6ff",
-    indexColor: "#b8bdff",
-    numberColor: "#ffd580",
-    booleanColor: "#ffd580",
-    stringColor: "#9ece6a",
-    objectColor: "#ff9e64",
-    tableHeaderBgColor: "#414863",
-    tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#ff7272"
-  },
-  reUI: {
+  defaultLight2: {
     bgColor: "#fafafa",
     tableBorderColor: "#e0e0e0",
-    highlightBgColor: "#f0f0f0",
+    highlightBgColor: "#e6e6e6",
     cellBorderColor: "#c7c7c7",
@@ -357,104 +262,44 @@ keyNameColor: "#4caf50",
     tableHeaderColor: "#333333",
-    searchHighlightBgColor: "#ffeb3b"
+    searchHighlightBgColor: "#cccccc"
   },
   slime: {
-    bgColor: "#222222",
+    bgColor: "#1E2324",
     tableBorderColor: "#333333",
     highlightBgColor: "#333333",
     cellBorderColor: "#444444",
-    keyNameColor: "#5fd7ff",
+    keyNameColor: "#8EC199",
     indexColor: "#999999",
-    numberColor: "#b8d68c",
-    booleanColor: "#b8d68c",
-    stringColor: "#ce9178",
+    numberColor: "#BE9287",
+    booleanColor: "#B081B9",
+    stringColor: "#D88F56",
     objectColor: "#dcdcaa",
     tableHeaderBgColor: "#333333",
     tableHeaderColor: "#cccccc",
-    searchHighlightBgColor: "#fa4949"
+    searchHighlightBgColor: "#404040"
   },
-  signedDarkPro: {
-    bgColor: "#1e1e1e",
-    tableBorderColor: "#2a2a2a",
-    highlightBgColor: "#2a2a2a",
-    cellBorderColor: "#3a3a3a",
-    keyNameColor: "#8da6ce",
-    indexColor: "#848484",
-    numberColor: "#b5bd68",
-    booleanColor: "#b5bd68",
-    stringColor: "#cc7832",
-    objectColor: "#b294bb",
-    tableHeaderBgColor: "#2a2a2a",
-    tableHeaderColor: "#d4d4d4",
-    searchHighlightBgColor: "#eab09e"
-  },
-  ariakeDark: {
-    bgColor: "#1c1e26",
-    tableBorderColor: "#2a2c33",
-    highlightBgColor: "#2a2c33",
-    cellBorderColor: "#3a3c47",
-    keyNameColor: "#82aaff",
-    indexColor: "#6b7089",
-    numberColor: "#c3e88d",
-    booleanColor: "#c3e88d",
-    stringColor: "#f78c6c",
-    objectColor: "#c792ea",
-    tableHeaderBgColor: "#2a2c33",
-    tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#efd096"
-  },
-  snazzyLight: {
-    bgColor: "#fafafa",
-    tableBorderColor: "#d0d0d0",
-    highlightBgColor: "#f0f0f0",
-    cellBorderColor: "#b0b0b0",
-    keyNameColor: "#6ab0f3",
-    indexColor: "#787878",
-    numberColor: "#bd93f9",
-    booleanColor: "#bd93f9",
-    stringColor: "#50fa7b",
-    objectColor: "#ffb86c",
-    tableHeaderBgColor: "#d0d0d0",
-    tableHeaderColor: "#2e2e2e",
-    searchHighlightBgColor: "#ff5555"
-  },
   spacegray: {
-    bgColor: "#202328",
+    bgColor: "#212835",
     tableBorderColor: "#2c313a",
     highlightBgColor: "#2c313a",
     cellBorderColor: "#394147",
-    keyNameColor: "#a9b1d6",
+    keyNameColor: "#9ec7fa",
     indexColor: "#768390",
-    numberColor: "#f29718",
-    booleanColor: "#f29718",
-    stringColor: "#98c379",
+    numberColor: "#E9B672",
+    booleanColor: "#D49FF4",
+    stringColor: "#63F49C",
     objectColor: "#61afef",
     tableHeaderBgColor: "#2c313a",
     tableHeaderColor: "#e0e0e0",
-    searchHighlightBgColor: "#ff6c6b"
+    searchHighlightBgColor: "#303b4f"
   },
-  celestial: {
-    bgColor: "#0f1419",
-    tableBorderColor: "#1c232b",
-    highlightBgColor: "#1c232b",
-    cellBorderColor: "#2c3848",
-    keyNameColor: "#79b8ff",
-    indexColor: "#abb2bf",
-    numberColor: "#56d364",
-    booleanColor: "#56d364",
-    stringColor: "#d19a66",
-    objectColor: "#c678dd",
-    tableHeaderBgColor: "#1c232b",
-    tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#30435a"
-  },
   blueberryDark: {
-    bgColor: "#242b38",
+    bgColor: "#242938",
     tableBorderColor: "#343d4a",
     highlightBgColor: "#343d4a",
     cellBorderColor: "#444f5c",
-    keyNameColor: "#82aaff",
+    keyNameColor: "#ADD7FF",
     indexColor: "#8c98a6",
-    numberColor: "#c3e88d",
+    numberColor: "#38B0B2",
     booleanColor: "#c3e88d",
-    stringColor: "#f78c6c",
+    stringColor: "#27E8A7",
     objectColor: "#c792ea",
@@ -465,62 +310,17 @@ tableHeaderBgColor: "#343d4a",
   },
-  bear: {
-    bgColor: "#e6e6e6",
-    tableBorderColor: "#d3d3d3",
-    highlightBgColor: "#d5d5d5",
-    cellBorderColor: "#c0c0c0",
-    keyNameColor: "#4e5a65",
-    indexColor: "#888888",
-    numberColor: "#4078f2",
-    booleanColor: "#4078f2",
-    stringColor: "#50a14f",
-    objectColor: "#a626a4",
-    tableHeaderBgColor: "#d3d3d3",
-    tableHeaderColor: "#333333",
-    searchHighlightBgColor: "#ffcc00"
-  },
-  oneDarkPro: {
-    bgColor: "#282c34",
-    tableBorderColor: "#2c313a",
-    highlightBgColor: "#2c313a",
-    cellBorderColor: "#3e4451",
-    keyNameColor: "#abb2bf",
-    indexColor: "#5c6370",
-    numberColor: "#d19a66",
-    booleanColor: "#d19a66",
-    stringColor: "#98c379",
-    objectColor: "#61afef",
-    tableHeaderBgColor: "#2c313a",
-    tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#e06c75"
-  },
   nord: {
     bgColor: "#2e3440",
     tableBorderColor: "#3b4252",
-    highlightBgColor: "#3b4252",
+    highlightBgColor: "#363c4a",
     cellBorderColor: "#434c5e",
     keyNameColor: "#81a1c1",
-    indexColor: "#a3be8c",
-    numberColor: "#8fbcbb",
+    indexColor: "#D8DEE9",
+    numberColor: "#88C0D0",
     booleanColor: "#8fbcbb",
-    stringColor: "#ebcb8b",
+    stringColor: "#A3BE8C",
     objectColor: "#b48ead",
     tableHeaderBgColor: "#3b4252",
     tableHeaderColor: "#e5e9f0",
-    searchHighlightBgColor: "#bf616a"
+    searchHighlightBgColor: "#404859"
   },
-  palenight: {
-    bgColor: "#292d3e",
-    tableBorderColor: "#414863",
-    highlightBgColor: "#414863",
-    cellBorderColor: "#2c3042",
-    keyNameColor: "#c3a6ff",
-    indexColor: "#b8bdff",
-    numberColor: "#ffd580",
-    booleanColor: "#ffd580",
-    stringColor: "#9ece6a",
-    objectColor: "#ff9e64",
-    tableHeaderBgColor: "#414863",
-    tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#ff8b8b"
-  },
   nightOwl: {
@@ -531,13 +331,13 @@ bgColor: "#011627",
     cellBorderColor: "#03314b",
-    keyNameColor: "#addb67",
+    keyNameColor: "#dbb8e0",
     indexColor: "#dcdcaa",
-    numberColor: "#82aaff",
+    numberColor: "#F77D48",
     booleanColor: "#82aaff",
-    stringColor: "#c792ea",
+    stringColor: "#ECC48D",
     objectColor: "#ffcb6b",
     tableHeaderBgColor: "#02233d",
     tableHeaderColor: "#e0e0e0",
-    searchHighlightBgColor: "#ff5370"
+    searchHighlightBgColor: "#033963"
   },
-  andromeda: {
+  oneMonokai: {
     bgColor: "#282c34",
@@ -550,3 +350,3 @@ tableBorderColor: "#2c313a",
     numberColor: "#d19a66",
-    booleanColor: "#d19a66",
+    booleanColor: "#61AFEF",
     stringColor: "#98c379",
@@ -556,94 +356,19 @@ objectColor: "#61afef",
     tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#e06c75"
+    searchHighlightBgColor: "#383E4A"
   },
-  horizon: {
-    bgColor: "#1c1e26",
-    tableBorderColor: "#2a2c33",
-    highlightBgColor: "#2a2c33",
-    cellBorderColor: "#3a3c47",
-    keyNameColor: "#82aaff",
-    indexColor: "#6b7089",
-    numberColor: "#c3e88d",
-    booleanColor: "#c3e88d",
-    stringColor: "#f78c6c",
-    objectColor: "#c792ea",
-    tableHeaderBgColor: "#2a2c33",
-    tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#f2d6a3"
-  },
-  cobalt2: {
-    bgColor: "#193549",
+  cobaltNext: {
+    bgColor: "#1B2B34",
     tableBorderColor: "#234666",
-    highlightBgColor: "#234666",
+    highlightBgColor: "#2b333b",
     cellBorderColor: "#29546a",
-    keyNameColor: "#6699cc",
-    indexColor: "#9cdcfe",
-    numberColor: "#b5cea8",
-    booleanColor: "#b5cea8",
-    stringColor: "#ce9178",
+    keyNameColor: "#dcd0e2",
+    indexColor: "#dcd0e2",
+    numberColor: "#5A9BCF",
+    booleanColor: "#ce9178",
+    stringColor: "#89C794",
     objectColor: "#d1d2d3",
     tableHeaderBgColor: "#234666",
     tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#ff5370"
+    searchHighlightBgColor: "#343D46"
   },
-  atomOneLight: {
-    bgColor: "#fafafa",
-    tableBorderColor: "#e0e0e0",
-    highlightBgColor: "#f5f5f5",
-    cellBorderColor: "#c0c0c0",
-    keyNameColor: "#4e5a65",
-    indexColor: "#888888",
-    numberColor: "#4078f2",
-    booleanColor: "#4078f2",
-    stringColor: "#50a14f",
-    objectColor: "#a626a4",
-    tableHeaderBgColor: "#d3d3d3",
-    tableHeaderColor: "#333333",
-    searchHighlightBgColor: "#ffcc00"
-  },
-  ysgrifennwr: {
-    bgColor: "#f8f8f8",
-    tableBorderColor: "#eaeaea",
-    highlightBgColor: "#f2f2f2",
-    cellBorderColor: "#d9d9d9",
-    keyNameColor: "#2b91af",
-    indexColor: "#888888",
-    numberColor: "#6a5acd",
-    booleanColor: "#6a5acd",
-    stringColor: "#cd5c5c",
-    objectColor: "#008b8b",
-    tableHeaderBgColor: "#eaeaea",
-    tableHeaderColor: "#333333",
-    searchHighlightBgColor: "#ff9900"
-  },
-  notepadPlusPlusRemixed: {
-    bgColor: "#262626",
-    tableBorderColor: "#333333",
-    highlightBgColor: "#333333",
-    cellBorderColor: "#4d4d4d",
-    keyNameColor: "#ffffff",
-    indexColor: "#aaaaaa",
-    numberColor: "#ffcc66",
-    booleanColor: "#ffcc66",
-    stringColor: "#a6e22e",
-    objectColor: "#66d9ef",
-    tableHeaderBgColor: "#333333",
-    tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#ff6666"
-  },
-  githubLight: {
-    bgColor: "#ffffff",
-    tableBorderColor: "#eaecef",
-    highlightBgColor: "#f6f8fa",
-    cellBorderColor: "#d1d5da",
-    keyNameColor: "#0366d6",
-    indexColor: "#6a737d",
-    numberColor: "#0366d6",
-    booleanColor: "#0366d6",
-    stringColor: "#032f62",
-    objectColor: "#6f42c1",
-    tableHeaderBgColor: "#f6f8fa",
-    tableHeaderColor: "#24292e",
-    searchHighlightBgColor: "#fffbdd"
-  },
   shadesOfPurple: {
@@ -658,29 +383,14 @@ bgColor: "#2d2b55",
     booleanColor: "#ff6188",
-    stringColor: "#a9b9ce",
+    stringColor: "#A5FF90",
     objectColor: "#fad000",
     tableHeaderBgColor: "#463d69",
     tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#ff6188"
+    searchHighlightBgColor: "#554a82"
   },
-  synthWave: {
-    bgColor: "#2a2139",
-    tableBorderColor: "#3c3359",
-    highlightBgColor: "#3c3359",
-    cellBorderColor: "#524772",
-    keyNameColor: "#f92aad",
-    indexColor: "#4df0ff",
-    numberColor: "#fff",
-    booleanColor: "#fff",
-    stringColor: "#00f9f9",
-    objectColor: "#ff8d00",
-    tableHeaderBgColor: "#3c3359",
-    tableHeaderColor: "#fff",
-    searchHighlightBgColor: "#ff8d00"
-  },
   codeBlue: {
-    bgColor: "#0e1b29",
+    bgColor: "#081620",
     tableBorderColor: "#233544",
     highlightBgColor: "#233544",
-    cellBorderColor: "#345a7d",
-    keyNameColor: "#5a9bcf",
+    cellBorderColor: "#194666",
+    keyNameColor: "#B2A8B4",
     indexColor: "#96b5b4",
@@ -695,152 +405,74 @@ numberColor: "#99cc99",
   },
-  cyberpunk: {
-    bgColor: "#1b2b34",
-    tableBorderColor: "#405c79",
-    highlightBgColor: "#405c79",
-    cellBorderColor: "#52676d",
-    keyNameColor: "#82b1ff",
-    indexColor: "#c792ea",
-    numberColor: "#89ddff",
-    booleanColor: "#89ddff",
-    stringColor: "#c3e88d",
-    objectColor: "#ffcb6b",
-    tableHeaderBgColor: "#405c79",
-    tableHeaderColor: "#d8dee9",
-    searchHighlightBgColor: "#405c79"
-  },
-  laserWave: {
-    bgColor: "#0a1e24",
-    tableBorderColor: "#0f2a35",
-    highlightBgColor: "#0f2a35",
-    cellBorderColor: "#153e50",
-    keyNameColor: "#f5ef19",
-    indexColor: "#33ccff",
-    numberColor: "#19f9d8",
-    booleanColor: "#19f9d8",
-    stringColor: "#f4eeff",
-    objectColor: "#ff66d8",
-    tableHeaderBgColor: "#0f2a35",
-    tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#f76d47"
-  },
-  hipster: {
-    bgColor: "#0f0f0f",
-    tableBorderColor: "#181818",
-    highlightBgColor: "#181818",
-    cellBorderColor: "#303030",
-    keyNameColor: "#74b0df",
-    indexColor: "#999999",
-    numberColor: "#8cdcfe",
-    booleanColor: "#8cdcfe",
-    stringColor: "#ff8a65",
-    objectColor: "#b0bec5",
-    tableHeaderBgColor: "#181818",
-    tableHeaderColor: "#f8f8f0",
-    searchHighlightBgColor: "#d2cd87"
-  },
-  wildberry: {
-    bgColor: "#1b1725",
-    tableBorderColor: "#272030",
-    highlightBgColor: "#272030",
-    cellBorderColor: "#312742",
-    keyNameColor: "#ee82ee",
-    indexColor: "#ff79c6",
-    numberColor: "#bd93f9",
-    booleanColor: "#bd93f9",
-    stringColor: "#ff5555",
-    objectColor: "#f8f8f2",
-    tableHeaderBgColor: "#272030",
-    tableHeaderColor: "#ffb86c",
-    searchHighlightBgColor: "#f1fa8c"
-  },
-  qiita: {
-    bgColor: "#f6f6f6",
-    tableBorderColor: "#d1d1d1",
-    highlightBgColor: "#f9f9f9",
-    cellBorderColor: "#e6e6e6",
-    keyNameColor: "#55c5db",
-    indexColor: "#666666",
-    numberColor: "#55c5db",
-    booleanColor: "#55c5db",
-    stringColor: "#d54e53",
-    objectColor: "#55c5db",
-    tableHeaderBgColor: "#e6e6e6",
-    tableHeaderColor: "#24292e",
-    searchHighlightBgColor: "#ffc107"
-  },
   softEra: {
-    bgColor: "#f5f5f5",
+    bgColor: "#F9F5F5",
     tableBorderColor: "#d3d3d3",
-    highlightBgColor: "#eaeaea",
+    highlightBgColor: "#E3E6ED",
     cellBorderColor: "#c0c0c0",
-    keyNameColor: "#4e5a65",
+    keyNameColor: "#696462",
     indexColor: "#888888",
-    numberColor: "#4078f2",
-    booleanColor: "#4078f2",
-    stringColor: "#50a14f",
-    objectColor: "#a626a4",
-    tableHeaderBgColor: "#d3d3d3",
+    numberColor: "#82B4E3",
+    booleanColor: "#DA8FBD",
+    stringColor: "#87B6BE",
+    objectColor: "#C1AFDF",
+    tableHeaderBgColor: "#E3E6ED",
     tableHeaderColor: "#333333",
-    searchHighlightBgColor: "#ffcc00"
+    searchHighlightBgColor: "#d0d5e1"
+  },
+  atomMaterial: {
+    bgColor: "#263238",
+    tableBorderColor: "#37474f",
+    highlightBgColor: "#37474f",
+    cellBorderColor: "#546e7a",
+    keyNameColor: "#EEFFFF",
+    indexColor: "#90a4ae",
+    numberColor: "#F78150",
+    booleanColor: "#82b1ff",
+    stringColor: "#C3E88D",
+    objectColor: "#ffcb6b",
+    tableHeaderBgColor: "#455a64",
+    tableHeaderColor: "#ffffff",
+    searchHighlightBgColor: "#4F6875"
+  },
+  evaDark: {
+    bgColor: "#282C34",
+    tableBorderColor: "#343c47",
+    highlightBgColor: "#343c47",
+    cellBorderColor: "#3d4752",
+    keyNameColor: "#B0B7C3",
+    indexColor: "#5c6773",
+    numberColor: "#FF9070",
+    booleanColor: "#56B7C3",
+    stringColor: "#82BE79",
+    objectColor: "#b4be82",
+    tableHeaderBgColor: "#343c47",
+    tableHeaderColor: "#ffffff",
+    searchHighlightBgColor: "#4e5765"
+  },
+  moonLight: {
+    bgColor: "#222436",
+    tableBorderColor: "#343c47",
+    highlightBgColor: "#31344e",
+    cellBorderColor: "#3d4752",
+    keyNameColor: "#C8D3F5",
+    indexColor: "#C8D3F5",
+    numberColor: "#7CAFFF",
+    booleanColor: "#FF6F78",
+    stringColor: "#7AF8CA",
+    objectColor: "#ff9e64",
+    tableHeaderBgColor: "#31344e",
+    tableHeaderColor: "#C8D3F5",
+    searchHighlightBgColor: "#4e5765"
   }
 };
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
-  return typeof obj;
-} : function (obj) {
-  return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-};
-
-var slicedToArray = function () {
-  function sliceIterator(arr, i) {
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _e = undefined;
-
-    try {
-      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-        _arr.push(_s.value);
-
-        if (i && _arr.length === i) break;
-      }
-    } catch (err) {
-      _d = true;
-      _e = err;
-    } finally {
-      try {
-        if (!_n && _i["return"]) _i["return"]();
-      } finally {
-        if (_d) throw _e;
-      }
-    }
-
-    return _arr;
-  }
-
-  return function (arr, i) {
-    if (Array.isArray(arr)) {
-      return arr;
-    } else if (Symbol.iterator in Object(arr)) {
-      return sliceIterator(arr, i);
-    } else {
-      throw new TypeError("Invalid attempt to destructure non-iterable instance");
-    }
-  };
-}();
-
 function classnames() {
-  for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
   }
-
   return args.filter(Boolean).join(" ");
 }
-
 function lookup(obj, searchText) {
   var keyTree = {};
   var matchesInKey = false;
-
-  if ((typeof obj === "undefined" ? "undefined" : _typeof(obj)) !== "object") return null;
-
+  if (_typeof(obj) !== "object") return null;
   for (var key in obj) {
@@ -850,3 +482,2 @@ if (!Array.isArray(obj) && matchesText(key, searchText)) {
     }
-
     if (_typeof(obj[key]) === "object") {
@@ -863,6 +494,4 @@ var nestedKeyTree = lookup(obj[key], searchText);
   }
-
   if (Object.keys(keyTree).length !== 0) return keyTree;else if (matchesInKey) return true;else return null;
 }
-
 function matchesText(obj, searchText) {
@@ -872,3 +501,2 @@ if (searchText == null) return false;
 }
-
 function mergeKeyTrees(keyTree1, keyTree2) {
@@ -879,3 +507,2 @@ if (keyTree1 == null) return keyTree2;
   if (keyTree2 === true) return keyTree1;
-
   var mergedKeyTree = {};
@@ -892,8 +519,7 @@ for (var key in keyTree1) {
 }
-
 function checkAllObjects(data) {
   var allObjects = false;
-  var keys = void 0;
+  var keys = [];
   if (Array.isArray(data)) {
-    allObjects = true;
+    allObjects = data.length > 0;
     keys = new Set();
@@ -917,3 +543,2 @@ for (var i = 0; i < data.length; i++) {
       };
-
       for (var _i = 0; _i < data.length; _i++) {
@@ -924,19 +549,20 @@ _loop(_i);
   }
-  return { allObjects: allObjects, keys: keys };
+  return {
+    allObjects: allObjects,
+    keys: keys
+  };
 }
 
-var NestedJSONGrid = function NestedJSONGrid(props) {
+var _NestedJSONGrid = function NestedJSONGrid(props) {
   var level = props.level,
-      keyPath = props.keyPath,
-      data = props.data,
-      dataKey = props.dataKey,
-      highlightedElement = props.highlightedElement,
-      highlightSelected = props.highlightSelected,
-      onSelect = props.onSelect,
-      setHighlightedElement = props.setHighlightedElement,
-      defaultExpandDepth = props.defaultExpandDepth,
-      defaultExpandKeyTree = props.defaultExpandKeyTree,
-      searchText = props.searchText;
-
-
+    keyPath = props.keyPath,
+    data = props.data,
+    dataKey = props.dataKey,
+    highlightedElement = props.highlightedElement,
+    highlightSelected = props.highlightSelected,
+    onSelect = props.onSelect,
+    setHighlightedElement = props.setHighlightedElement,
+    defaultExpandDepth = props.defaultExpandDepth,
+    defaultExpandKeyTree = props.defaultExpandKeyTree,
+    searchText = props.searchText;
   var highlight = function highlight(e) {
@@ -973,187 +599,101 @@ if (e.target !== e.currentTarget && e.target.hasAttribute("clickable") || e.target.parentElement !== e.currentTarget && e.target.parentElement.hasAttribute("clickable")) return;
   };
-
   var renderValue = function renderValue(key, value, level, keyTree, nextKeyPath) {
-    if (value && (typeof value === "undefined" ? "undefined" : _typeof(value)) === "object") return React.createElement(
-      "td",
-      {
-        className: classnames(styles.obj, styles.value),
+    if (value && _typeof(value) === "object") return /*#__PURE__*/React.createElement("td", {
+      className: classnames(styles.obj, styles.value),
+      onClick: highlight,
+      clickable: "true",
+      key: key
+    }, /*#__PURE__*/React.createElement(_NestedJSONGrid, {
+      level: level + 1,
+      keyPath: keyPath.concat(nextKeyPath),
+      dataKey: key,
+      data: value,
+      highlightedElement: highlightedElement,
+      highlightSelected: highlightSelected,
+      onSelect: onSelect,
+      setHighlightedElement: setHighlightedElement,
+      defaultExpandDepth: defaultExpandDepth,
+      defaultExpandKeyTree: keyTree && keyTree[key],
+      searchText: searchText
+    }));
+    return /*#__PURE__*/React.createElement("td", {
+      className: classnames(styles.obj, styles.value),
+      onClick: highlight,
+      clickable: "true",
+      key: key
+    }, /*#__PURE__*/React.createElement("span", {
+      className: classnames(styles[_typeof(value)], matchesText(value, searchText) && styles["search-highlight"])
+    }, String(value)));
+  };
+  var renderTable = function renderTable(data, level, allObjects, keys) {
+    return /*#__PURE__*/React.createElement("table", {
+      className: styles["json-grid-table"]
+    }, allObjects && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("colgroup", null, /*#__PURE__*/React.createElement("col", null), keys.map(function (k) {
+      return /*#__PURE__*/React.createElement("col", {
+        key: k
+      });
+    })), /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+      className: classnames(styles.obj, styles.order),
+      clickable: "true"
+    }, /*#__PURE__*/React.createElement("svg", {
+      className: styles.glyphicon,
+      clickable: "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      height: "1em",
+      viewBox: "0 0 448 512"
+    }, /*#__PURE__*/React.createElement("path", {
+      fill: "currentColor",
+      d: "M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"
+    }))), keys.map(function (k) {
+      return /*#__PURE__*/React.createElement("th", {
+        className: classnames(styles.obj, styles.order, styles.name),
+        key: k,
         onClick: highlight,
         clickable: "true",
-        key: key
-      },
-      React.createElement(NestedJSONGrid, {
-        level: level + 1,
-        keyPath: keyPath.concat(nextKeyPath),
-        dataKey: key,
-        data: value,
-        highlightedElement: highlightedElement,
-        highlightSelected: highlightSelected,
-        onSelect: onSelect,
-        setHighlightedElement: setHighlightedElement,
-        defaultExpandDepth: defaultExpandDepth,
-        defaultExpandKeyTree: keyTree && keyTree[key],
-        searchText: searchText
-      })
-    );
-    return React.createElement(
-      "td",
-      {
-        className: classnames(styles.obj, styles.value),
+        colhighlight: "true"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: matchesText(k, searchText) ? styles["search-highlight"] : undefined
+      }, k.replace(/_/g, " ")));
+    })))), /*#__PURE__*/React.createElement("tbody", null, Object.keys(data).map(function (k) {
+      return /*#__PURE__*/React.createElement("tr", {
+        key: k
+      }, Array.isArray(data) ? /*#__PURE__*/React.createElement("td", {
+        className: classnames(styles.obj, styles.order, styles.index),
         onClick: highlight,
         clickable: "true",
-        key: key
-      },
-      React.createElement(
-        "span",
-        {
-          className: classnames(styles[typeof value === "undefined" ? "undefined" : _typeof(value)], matchesText(value, searchText) && styles["search-highlight"])
-        },
-        String(value)
-      )
-    );
+        rowhighlight: "true"
+      }, parseInt(k) + 1) : /*#__PURE__*/React.createElement("td", {
+        className: classnames(styles.obj, styles.key, styles.name),
+        onClick: highlight,
+        clickable: "true"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: matchesText(k, searchText) ? styles["search-highlight"] : undefined
+      }, k.replace(/_/g, " "))), allObjects ? Object.entries(data[k]).map(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+          kk = _ref2[0],
+          v = _ref2[1];
+        return renderValue(kk, v, level, defaultExpandKeyTree && defaultExpandKeyTree[k], [parseInt(k), kk]);
+      }) : renderValue(k, data[k], level, defaultExpandKeyTree, [k]));
+    })));
   };
-
-  var renderTable = function renderTable(data, level, allObjects, keys) {
-    return React.createElement(
-      "table",
-      { className: styles["json-grid-table"] },
-      allObjects && React.createElement(
-        Fragment,
-        null,
-        React.createElement(
-          "colgroup",
-          null,
-          React.createElement("col", null),
-          keys.map(function (k) {
-            return React.createElement("col", { key: k });
-          })
-        ),
-        React.createElement(
-          "thead",
-          null,
-          React.createElement(
-            "tr",
-            null,
-            React.createElement(
-              "th",
-              {
-                className: classnames(styles.obj, styles.order),
-                clickable: "true"
-              },
-              React.createElement(
-                "svg",
-                {
-                  className: styles.glyphicon,
-                  clickable: "true",
-                  xmlns: "http://www.w3.org/2000/svg",
-                  height: "1em",
-                  viewBox: "0 0 448 512"
-                },
-                React.createElement("path", {
-                  fill: "currentColor",
-                  d: "M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"
-                })
-              )
-            ),
-            keys.map(function (k) {
-              return React.createElement(
-                "th",
-                {
-                  className: classnames(styles.obj, styles.order, styles.name),
-                  key: k,
-                  onClick: highlight,
-                  clickable: "true",
-                  colhighlight: "true"
-                },
-                React.createElement(
-                  "span",
-                  {
-                    className: matchesText(k, searchText) ? styles["search-highlight"] : undefined
-                  },
-                  k.replace(/_/g, " ")
-                )
-              );
-            })
-          )
-        )
-      ),
-      React.createElement(
-        "tbody",
-        null,
-        Object.keys(data).map(function (k) {
-          return React.createElement(
-            "tr",
-            { key: k },
-            Array.isArray(data) ? React.createElement(
-              "td",
-              {
-                className: classnames(styles.obj, styles.order, styles.index),
-                onClick: highlight,
-                clickable: "true",
-                rowhighlight: "true"
-              },
-              parseInt(k) + 1
-            ) : React.createElement(
-              "td",
-              {
-                className: classnames(styles.obj, styles.key, styles.name),
-                onClick: highlight,
-                clickable: "true"
-              },
-              React.createElement(
-                "span",
-                {
-                  className: matchesText(k, searchText) ? styles["search-highlight"] : undefined
-                },
-                k.replace(/_/g, " ")
-              )
-            ),
-            allObjects ? Object.entries(data[k]).map(function (_ref) {
-              var _ref2 = slicedToArray(_ref, 2),
-                  kk = _ref2[0],
-                  v = _ref2[1];
-
-              return renderValue(kk, v, level, defaultExpandKeyTree && defaultExpandKeyTree[k], [parseInt(k), kk]);
-            }) : renderValue(k, data[k], level, defaultExpandKeyTree, [k])
-          );
-        })
-      )
-    );
-  };
-
   var _checkAllObjects = checkAllObjects(data),
-      allObjects = _checkAllObjects.allObjects,
-      keys = _checkAllObjects.keys;
-
+    allObjects = _checkAllObjects.allObjects,
+    keys = _checkAllObjects.keys;
   if (level !== 0) {
     var _useState = useState(level <= defaultExpandDepth || defaultExpandKeyTree),
-        _useState2 = slicedToArray(_useState, 2),
-        open = _useState2[0],
-        setOpen = _useState2[1];
-
-    return React.createElement(
-      "div",
-      { className: styles.box },
-      React.createElement(
-        "span",
-        {
-          className: styles.plusminus,
-          onClick: function onClick() {
-            return setOpen(!open);
-          },
-          clickable: "true"
-        },
-        open ? "[-]" : "[+]"
-      ),
-      React.createElement(
-        "span",
-        { className: styles.title },
-        dataKey,
-        "\xA0",
-        Array.isArray(data) ? "[" + data.length + "]" : "{}"
-      ),
-      open && renderTable(data, level, allObjects, keys)
-    );
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.box
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles.plusminus,
+      onClick: function onClick() {
+        return setOpen(!open);
+      },
+      clickable: "true"
+    }, open ? "[-]" : "[+]"), /*#__PURE__*/React.createElement("span", {
+      className: styles.title
+    }, dataKey, "\xA0", Array.isArray(data) ? "[".concat(data.length, "]") : "{}"), open && renderTable(data, level, allObjects, keys));
   }
-
   return renderTable(data, level, allObjects, keys);
@@ -1164,23 +704,20 @@ };
   var data = _ref.data,
-      _ref$defaultExpandDep = _ref.defaultExpandDepth,
-      defaultExpandDepth = _ref$defaultExpandDep === undefined ? 0 : _ref$defaultExpandDep,
-      _ref$defaultExpandKey = _ref.defaultExpandKeyTree,
-      defaultExpandKeyTree = _ref$defaultExpandKey === undefined ? {} : _ref$defaultExpandKey,
-      _ref$onSelect = _ref.onSelect,
-      onSelect = _ref$onSelect === undefined ? function (keyPath) {} : _ref$onSelect,
-      _ref$highlightSelecte = _ref.highlightSelected,
-      highlightSelected = _ref$highlightSelecte === undefined ? true : _ref$highlightSelecte,
-      searchText = _ref.searchText,
-      _ref$theme = _ref.theme,
-      theme = _ref$theme === undefined ? "default" : _ref$theme,
-      _ref$customTheme = _ref.customTheme,
-      customTheme = _ref$customTheme === undefined ? {} : _ref$customTheme;
-
+    _ref$defaultExpandDep = _ref.defaultExpandDepth,
+    defaultExpandDepth = _ref$defaultExpandDep === void 0 ? 0 : _ref$defaultExpandDep,
+    _ref$defaultExpandKey = _ref.defaultExpandKeyTree,
+    defaultExpandKeyTree = _ref$defaultExpandKey === void 0 ? {} : _ref$defaultExpandKey,
+    _ref$onSelect = _ref.onSelect,
+    onSelect = _ref$onSelect === void 0 ? function (keyPath) {} : _ref$onSelect,
+    _ref$highlightSelecte = _ref.highlightSelected,
+    highlightSelected = _ref$highlightSelecte === void 0 ? true : _ref$highlightSelecte,
+    searchText = _ref.searchText,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? "default" : _ref$theme,
+    _ref$customTheme = _ref.customTheme,
+    customTheme = _ref$customTheme === void 0 ? {} : _ref$customTheme;
   var _useState = useState(null),
-      _useState2 = slicedToArray(_useState, 2),
-      highlightedElement = _useState2[0],
-      setHighlightedElement = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    highlightedElement = _useState2[0],
+    setHighlightedElement = _useState2[1];
   var wrapperRef = useRef(null);
-
   useEffect(function () {
@@ -1193,36 +730,28 @@ function handleClickOutside(event) {
     }
-    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("click", handleClickOutside);
     return function () {
-      return document.removeEventListener("mousedown", handleClickOutside);
+      return document.removeEventListener("click", handleClickOutside);
     };
   }, [highlightedElement]);
-
   if (!data) {
     throw new Error("JSONGrid: data prop cannot be null or undefined");
   }
-
-  if (!Array.isArray(data) && (typeof data === "undefined" ? "undefined" : _typeof(data)) !== "object") {
+  if (!Array.isArray(data) && _typeof(data) !== "object") {
     throw new Error("JSONGrid: data prop must be an object or an array");
   }
-
   if (defaultExpandDepth < 0) {
     throw new Error("JSONGrid: defaultExpandDepth prop must not be a negative number");
   }
-
   if (onSelect && typeof onSelect !== "function") {
     throw new Error("JSONGrid: onSelect prop must be a function");
   }
-
   if (highlightSelected && typeof highlightSelected !== "boolean") {
     throw new Error("JSONGrid: highlightSelected prop must be a boolean");
   }
-
   if (searchText && typeof searchText !== "string") {
     throw new Error("JSONGrid: searchText prop must be a string");
   }
-
   if (!themes[theme]) {
-    throw new Error("JSONGrid: theme prop must be one of " + Object.keys(themes).join(", "));
+    throw new Error("JSONGrid: theme prop must be one of ".concat(Object.keys(themes).join(", ")));
   }
-
   var themeDetails = themes[theme];
@@ -1244,24 +773,22 @@ var themeStyles = {
   };
-
   var mergedKeyTree = searchText ? mergeKeyTrees(defaultExpandKeyTree, lookup(data, searchText)) : defaultExpandKeyTree;
-
-  return React.createElement(
-    "div",
-    { className: styles["json-grid-container"], style: themeStyles, ref: wrapperRef },
-    React.createElement(NestedJSONGrid, {
-      level: 0,
-      keyPath: [],
-      data: data,
-      highlightedElement: highlightedElement,
-      highlightSelected: highlightSelected,
-      onSelect: onSelect,
-      setHighlightedElement: setHighlightedElement,
-      defaultExpandDepth: defaultExpandDepth,
-      defaultExpandKeyTree: mergedKeyTree,
-      searchText: searchText
-    })
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles["json-grid-container"],
+    style: themeStyles,
+    ref: wrapperRef
+  }, /*#__PURE__*/React.createElement(_NestedJSONGrid, {
+    level: 0,
+    keyPath: [],
+    data: data,
+    highlightedElement: highlightedElement,
+    highlightSelected: highlightSelected,
+    onSelect: onSelect,
+    setHighlightedElement: setHighlightedElement,
+    defaultExpandDepth: defaultExpandDepth,
+    defaultExpandKeyTree: mergedKeyTree,
+    searchText: searchText
+  }));
 };
 
-export default JSONGrid;
+export { JSONGrid as default };
 //# sourceMappingURL=index.es.js.map

dist/index.js

 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
 var React = require('react');
-var React__default = _interopDefault(React);
 
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
 function styleInject(css, ref) {
@@ -12,3 +64,3 @@ if ( ref === void 0 ) ref = {};
 
-  if (!css || typeof document === 'undefined') { return; }
+  if (typeof document === 'undefined') { return; }
 
@@ -36,8 +88,8 @@ var head = document.head || document.getElementsByTagName('head')[0];
 
-var css = ".styles_json-grid-container__1do2c {\n  --jg-bg-color: #222;\n  --jg-table-border-color: #b5b5b5;\n  --jg-highlight-bg-color: #3b3b3b;\n  --jg-cell-border-color: #474747;\n\n  --jg-key-name-color: #ffffff;\n  --jg-index-color: #949494;\n  --jg-number-color: #6c99bb;\n  --jg-boolean-color: #6c99bb;\n  --jg-string-color: #a5c261;\n  --jg-object-color: #ffffff;\n\n  --jg-table-header-bg-color: #444;\n  --jg-table-header-color: #ffffff;\n\n  --jg-search-highlight-bg-color: #565a36;\n\n  display: inline-block;\n  margin: 0;\n  font-family: \"Segoe UI\", Roboto, Arial, sans-serif;\n  line-height: 1.5;\n  text-align: left;\n  background-color: var(--jg-bg-color);\n}\n\n.styles_json-grid-table__3KxDK {\n  border-collapse: separate;\n  border-spacing: 0;\n  border: solid var(--jg-table-border-color) 1px;\n}\n\n.styles_json-grid-container__1do2c, .styles_json-grid-table__3KxDK{\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.styles_highlight__1bpMD {\n  background-color: var(--jg-highlight-bg-color);\n  font-weight: bold;\n}\n\n.styles_obj__dFKgt {\n  border: 1px solid var(--jg-cell-border-color);\n  padding: 3px 10px;\n  padding-bottom: 4px;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.styles_obj__dFKgt, .styles_obj__dFKgt .styles_name__13yyl {\n  color: var(--jg-key-name-color);\n}\n\n.styles_obj__dFKgt .styles_index__2HDDg {\n  color: var(--jg-index-color);\n}\n\n.styles_obj__dFKgt .styles_number__2AHSW{\n  color: var(--jg-number-color);\n}\n\n.styles_obj__dFKgt .styles_boolean__1BANa {\n  color: var(--jg-boolean-color);\n}\n\n.styles_obj__dFKgt .styles_string__rq61g {\n  color: var(--jg-string-color);\n}\n\n.styles_obj__dFKgt .styles_object__3BV4k {\n  color: var(--jg-object-color);\n}\n\n.styles_order__3lWKM {\n  background-color: var(--jg-table-header-bg-color);\n  color: var(--jg-table-header-color);\n}\n\n.styles_key__2l8qn {\n  vertical-align: top;\n}\n\n.styles_title__1cca0 {\n  font-weight: bold;\n}\n\n.styles_plusminus__3UVy2 {\n  font-size: 15px;\n  cursor: pointer;\n  margin-right: 2px;\n}\n\n.styles_search-highlight__PcqVt {\n  background-color: var(--jg-search-highlight-bg-color);\n  padding: 1px 5px;\n  padding-top: 0px;\n  border-radius: 2px;\n}\n\n.styles_glyphicon__3VdjK {\n  position: relative;\n  top: 3px;\n  display: inline-block;\n}\n";
-var styles = { "json-grid-container": "styles_json-grid-container__1do2c", "json-grid-table": "styles_json-grid-table__3KxDK", "highlight": "styles_highlight__1bpMD", "obj": "styles_obj__dFKgt", "name": "styles_name__13yyl", "index": "styles_index__2HDDg", "number": "styles_number__2AHSW", "boolean": "styles_boolean__1BANa", "string": "styles_string__rq61g", "object": "styles_object__3BV4k", "order": "styles_order__3lWKM", "key": "styles_key__2l8qn", "title": "styles_title__1cca0", "plusminus": "styles_plusminus__3UVy2", "search-highlight": "styles_search-highlight__PcqVt", "glyphicon": "styles_glyphicon__3VdjK" };
-styleInject(css);
+var css_248z = ".styles_json-grid-container__JQTup {\n  --jg-bg-color: #222;\n  --jg-table-border-color: #b5b5b5;\n  --jg-highlight-bg-color: #3b3b3b;\n  --jg-cell-border-color: #474747;\n\n  --jg-key-name-color: #ffffff;\n  --jg-index-color: #949494;\n  --jg-number-color: #6c99bb;\n  --jg-boolean-color: #6c99bb;\n  --jg-string-color: #a5c261;\n  --jg-object-color: #ffffff;\n\n  --jg-table-header-bg-color: #444;\n  --jg-table-header-color: #ffffff;\n\n  --jg-search-highlight-bg-color: #565a36;\n\n  display: inline-block;\n  margin: 0;\n  font-family: \"Segoe UI\", Roboto, Arial, sans-serif;\n  line-height: 1.5;\n  text-align: left;\n  background-color: var(--jg-bg-color);\n}\n\n.styles_json-grid-table__7XqiH {\n  border-collapse: separate;\n  border-spacing: 0;\n  border: solid var(--jg-table-border-color) 1px;\n}\n\n.styles_json-grid-container__JQTup, .styles_json-grid-table__7XqiH{\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.styles_highlight__W5FrO {\n  background-color: var(--jg-highlight-bg-color);\n  font-weight: bold;\n}\n\n.styles_obj__8WJ2U {\n  border: 1px solid var(--jg-cell-border-color);\n  padding: 3px 10px;\n  padding-bottom: 4px;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.styles_obj__8WJ2U, .styles_obj__8WJ2U .styles_name__dNGS- {\n  color: var(--jg-key-name-color);\n}\n\n.styles_obj__8WJ2U .styles_index__3uqHe {\n  color: var(--jg-index-color);\n}\n\n.styles_obj__8WJ2U .styles_number__lu5-j{\n  color: var(--jg-number-color);\n}\n\n.styles_obj__8WJ2U .styles_boolean__6Idt- {\n  color: var(--jg-boolean-color);\n}\n\n.styles_obj__8WJ2U .styles_string__2W6pT {\n  color: var(--jg-string-color);\n}\n\n.styles_obj__8WJ2U .styles_object__8wy4B {\n  color: var(--jg-object-color);\n}\n\n.styles_order__5p9g8 {\n  background-color: var(--jg-table-header-bg-color);\n  color: var(--jg-table-header-color);\n}\n\n.styles_key__VouZ7 {\n  vertical-align: top;\n}\n\n.styles_title__Q-nZR {\n  font-weight: bold;\n}\n\n.styles_plusminus__ZPLfJ {\n  font-size: 15px;\n  cursor: pointer;\n  margin-right: 2px;\n}\n\n.styles_search-highlight__co5ee {\n  background-color: var(--jg-search-highlight-bg-color);\n  padding: 1px 5px;\n  padding-top: 0px;\n  border-radius: 2px;\n}\n\n.styles_glyphicon__XsYc0 {\n  position: relative;\n  top: 3px;\n  display: inline-block;\n}\n";
+var styles = {"json-grid-container":"styles_json-grid-container__JQTup","json-grid-table":"styles_json-grid-table__7XqiH","highlight":"styles_highlight__W5FrO","obj":"styles_obj__8WJ2U","name":"styles_name__dNGS-","index":"styles_index__3uqHe","number":"styles_number__lu5-j","boolean":"styles_boolean__6Idt-","string":"styles_string__2W6pT","object":"styles_object__8wy4B","order":"styles_order__5p9g8","key":"styles_key__VouZ7","title":"styles_title__Q-nZR","plusminus":"styles_plusminus__ZPLfJ","search-highlight":"styles_search-highlight__co5ee","glyphicon":"styles_glyphicon__XsYc0"};
+styleInject(css_248z);
 
 var themes = {
-  default: {
+  "default": {
     bgColor: "#222",
@@ -57,46 +109,16 @@ tableBorderColor: "#b5b5b5",
   },
-  radical: {
-    bgColor: "#1e1e3f",
-    tableBorderColor: "#3a3a5e",
-    highlightBgColor: "#452a4e",
-    cellBorderColor: "#ff79c6",
-    keyNameColor: "#e1efff",
-    indexColor: "#b7b7ce",
-    numberColor: "#ffcc66",
-    booleanColor: "#f18e4f",
-    stringColor: "#a8ff60",
-    objectColor: "#ffcc66",
-    tableHeaderBgColor: "#2b265c",
-    tableHeaderColor: "#e1efff",
-    searchHighlightColor: "#b77ee0"
-  },
-  cobalt: {
-    bgColor: "#002240",
-    tableBorderColor: "#003c60",
-    highlightBgColor: "#003c60",
-    cellBorderColor: "#007acc",
-    keyNameColor: "#ffffff",
-    indexColor: "#007acc",
-    numberColor: "#8be9fd",
-    booleanColor: "#ff79c6",
-    stringColor: "#ff79c6",
-    objectColor: "#8be9fd",
-    tableHeaderBgColor: "#003c60",
-    tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#0f5078"
-  },
   dracula: {
-    bgColor: "#282a36",
+    bgColor: "#2b2e3b",
     tableBorderColor: "#44475a",
-    highlightBgColor: "#44475a",
-    cellBorderColor: "#6272a4",
-    keyNameColor: "#bd93f9",
+    highlightBgColor: "#363949",
+    cellBorderColor: "#44475a",
+    keyNameColor: "#F8F8F2",
     indexColor: "#6272a4",
-    numberColor: "#8be9fd",
+    numberColor: "#f1fa8c",
     booleanColor: "#ff79c6",
-    stringColor: "#f1fa8c",
+    stringColor: "#50FA7B",
     objectColor: "#ff79c6",
-    tableHeaderBgColor: "#44475a",
+    tableHeaderBgColor: "#363949",
     tableHeaderColor: "#f8f8f2",
-    searchHighlightBgColor: "#ff96d2"
+    searchHighlightBgColor: "#4c4f67"
   },
@@ -107,67 +129,22 @@ monokai: {
     highlightBgColor: "#49483e",
-    cellBorderColor: "#75715e",
-    keyNameColor: "#f92672",
+    cellBorderColor: "#373a2c",
+    keyNameColor: "#c1c1bd",
     indexColor: "#75715e",
-    numberColor: "#ae81ff",
+    numberColor: "#a3e8f5",
     booleanColor: "#ae81ff",
-    stringColor: "#e6db74",
+    stringColor: "#ece393",
     objectColor: "#a6e22e",
     tableHeaderBgColor: "#414434",
     tableHeaderColor: "#f8f8f2",
-    searchHighlightBgColor: "#797760"
+    searchHighlightBgColor: "#72705a"
   },
-  solarizedLight: {
-    bgColor: "#fdf6e3",
-    tableBorderColor: "#839496",
-    highlightBgColor: "#eee8d5",
-    cellBorderColor: "#d0d0d0",
-    keyNameColor: "#268bd2",
-    indexColor: "#657b83",
-    numberColor: "#2aa198",
-    booleanColor: "#2aa198",
-    stringColor: "#859900",
-    objectColor: "#2aa198",
-    tableHeaderBgColor: "#eee8d5",
-    tableHeaderColor: "#657b83",
-    searchHighlightBgColor: "#ddd1ab"
-  },
-  solarizedDark: {
-    bgColor: "#002b36",
-    tableBorderColor: "#586e75",
-    highlightBgColor: "#073642",
-    cellBorderColor: "#073642",
-    keyNameColor: "#268bd2",
-    indexColor: "#839496",
-    numberColor: "#b58900",
-    booleanColor: "#b58900",
-    stringColor: "#859900",
-    objectColor: "#b58900",
-    tableHeaderBgColor: "#073642",
-    tableHeaderColor: "#93a1a1",
-    searchHighlightBgColor: "#185e70"
-  },
-  materialDark: {
-    bgColor: "#263238",
-    tableBorderColor: "#37474f",
-    highlightBgColor: "#37474f",
-    cellBorderColor: "#546e7a",
-    keyNameColor: "#80cbc4",
-    indexColor: "#90a4ae",
-    numberColor: "#82b1ff",
-    booleanColor: "#82b1ff",
-    stringColor: "#c3e88d",
-    objectColor: "#ffcb6b",
-    tableHeaderBgColor: "#455a64",
-    tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#ff5370"
-  },
-  oceanicNext: {
-    bgColor: "#1b2b34",
+  oceanicPark: {
+    bgColor: "#17242B",
     tableBorderColor: "#2c3e50",
-    highlightBgColor: "#343d46",
-    cellBorderColor: "#34495e",
-    keyNameColor: "#82b1ff",
+    highlightBgColor: "#345365",
+    cellBorderColor: "#2b4554",
+    keyNameColor: "#89adc2",
     indexColor: "#546e7a",
     numberColor: "#89ddff",
-    booleanColor: "#89ddff",
+    booleanColor: "#35A6B3",
     stringColor: "#c3e88d",
@@ -177,18 +154,18 @@ objectColor: "#ffcb6b",
     tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#ff5370"
+    searchHighlightBgColor: "#185e70"
   },
   panda: {
-    bgColor: "#292a2b",
+    bgColor: "#292A2B",
     tableBorderColor: "#4d4e50",
-    highlightBgColor: "#434547",
-    cellBorderColor: "#5f6062",
-    keyNameColor: "#ff6b72",
+    highlightBgColor: "#3e4042",
+    cellBorderColor: "#4c4c4d",
+    keyNameColor: "#b4fdf2",
     indexColor: "#9aedfe",
-    numberColor: "#f5d76e",
-    booleanColor: "#f5d76e",
-    stringColor: "#a5ef63",
+    numberColor: "#35dcfd",
+    booleanColor: "#FF9AA4",
+    stringColor: "#FFB857",
     objectColor: "#ff6b72",
     tableHeaderBgColor: "#3b3c3d",
     tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#ff5370"
+    searchHighlightBgColor: "#4a4d4f"
   },
@@ -210,29 +187,14 @@ gruvboxMaterial: {
   },
-  merko: {
-    bgColor: "#f6f8fa",
-    tableBorderColor: "#e1e4e8",
-    highlightBgColor: "#e1e4e8",
-    cellBorderColor: "#c9d1d9",
-    keyNameColor: "#0366d6",
-    indexColor: "#586069",
-    numberColor: "#22863a",
-    booleanColor: "#22863a",
-    stringColor: "#cb2431",
-    objectColor: "#0366d6",
-    tableHeaderBgColor: "#e1e4e8",
-    tableHeaderColor: "#0366d6",
-    searchHighlightBgColor: "#ffd33d"
-  },
   tokyoNight: {
-    bgColor: "#1a1b26",
+    bgColor: "#1A1B26",
     tableBorderColor: "#272a36",
     highlightBgColor: "#34374c",
     cellBorderColor: "#272a36",
-    keyNameColor: "#9d88f5",
+    keyNameColor: "#C0CAF5",
     indexColor: "#89b8ff",
-    numberColor: "#46d9ff",
-    booleanColor: "#46d9ff",
-    stringColor: "#ff75b5",
+    numberColor: "#7CCE6A",
+    booleanColor: "#7AA2F7",
+    stringColor: "#AC94F7",
     objectColor: "#9d88f5",
-    tableHeaderBgColor: "#3a3e54",
+    tableHeaderBgColor: "#363a4a",
     tableHeaderColor: "#f3f3f3",
@@ -254,39 +216,9 @@ searchHighlightBgColor: "#53577b"
     tableHeaderColor: "#6e5494",
-    searchHighlightBgColor: "#e2cd8f"
+    searchHighlightBgColor: "#FCEED1"
   },
-  minimal: {
-    bgColor: "#f5f5f5",
-    tableBorderColor: "#e0e0e0",
-    highlightBgColor: "#eeeeee",
-    cellBorderColor: "#c0c0c0",
-    keyNameColor: "#333333",
-    indexColor: "#666666",
-    numberColor: "#007acc",
-    booleanColor: "#007acc",
-    stringColor: "#2ca22c",
-    objectColor: "#333333",
-    tableHeaderBgColor: "#f0f0f0",
-    tableHeaderColor: "#333333",
-    searchHighlightBgColor: "#e0e073"
-  },
-  auroraX: {
-    bgColor: "#2b313a",
-    tableBorderColor: "#343c47",
-    highlightBgColor: "#343c47",
-    cellBorderColor: "#3d4752",
-    keyNameColor: "#b4be82",
-    indexColor: "#5c6773",
-    numberColor: "#7aa2f7",
-    booleanColor: "#7aa2f7",
-    stringColor: "#c3a6ff",
-    objectColor: "#b4be82",
-    tableHeaderBgColor: "#343c47",
-    tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#e06c75"
-  },
   atlanticNight: {
-    bgColor: "#2a394f",
-    tableBorderColor: "#344b63",
-    highlightBgColor: "#344b63",
-    cellBorderColor: "#4d5c71",
+    bgColor: "#000720",
+    tableBorderColor: "#000b33",
+    highlightBgColor: "#1f2647",
+    cellBorderColor: "#00114d",
     keyNameColor: "#6cb6ff",
@@ -296,24 +228,9 @@ indexColor: "#6cb6ff",
     booleanColor: "#a2d6ff",
-    stringColor: "#e2e9fd",
+    stringColor: "#BF90C9",
     objectColor: "#6cb6ff",
-    tableHeaderBgColor: "#344b63",
+    tableHeaderBgColor: "#001666",
     tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#ff8f40"
+    searchHighlightBgColor: "#1C2341"
   },
-  aTouchOfLilac: {
-    bgColor: "#f3f0ff",
-    tableBorderColor: "#d2cef4",
-    highlightBgColor: "#e1dcff",
-    cellBorderColor: "#b8b0e8",
-    keyNameColor: "#a26bff",
-    indexColor: "#8664b3",
-    numberColor: "#6772e5",
-    booleanColor: "#6772e5",
-    stringColor: "#528bff",
-    objectColor: "#a26bff",
-    tableHeaderBgColor: "#d2cef4",
-    tableHeaderColor: "#44337a",
-    searchHighlightBgColor: "#edc8bc"
-  },
-  glassUI: {
+  defaultLight: {
     bgColor: "#f5f5f5",
@@ -331,23 +248,8 @@ tableBorderColor: "#d3d3d3",
     tableHeaderColor: "#333333",
-    searchHighlightBgColor: "#e2e29c"
+    searchHighlightBgColor: "#cccccc"
   },
-  fireflyPro: {
-    bgColor: "#292d3e",
-    tableBorderColor: "#414863",
-    highlightBgColor: "#414863",
-    cellBorderColor: "#252938",
-    keyNameColor: "#c3a6ff",
-    indexColor: "#b8bdff",
-    numberColor: "#ffd580",
-    booleanColor: "#ffd580",
-    stringColor: "#9ece6a",
-    objectColor: "#ff9e64",
-    tableHeaderBgColor: "#414863",
-    tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#ff7272"
-  },
-  reUI: {
+  defaultLight2: {
     bgColor: "#fafafa",
     tableBorderColor: "#e0e0e0",
-    highlightBgColor: "#f0f0f0",
+    highlightBgColor: "#e6e6e6",
     cellBorderColor: "#c7c7c7",
@@ -362,104 +264,44 @@ keyNameColor: "#4caf50",
     tableHeaderColor: "#333333",
-    searchHighlightBgColor: "#ffeb3b"
+    searchHighlightBgColor: "#cccccc"
   },
   slime: {
-    bgColor: "#222222",
+    bgColor: "#1E2324",
     tableBorderColor: "#333333",
     highlightBgColor: "#333333",
     cellBorderColor: "#444444",
-    keyNameColor: "#5fd7ff",
+    keyNameColor: "#8EC199",
     indexColor: "#999999",
-    numberColor: "#b8d68c",
-    booleanColor: "#b8d68c",
-    stringColor: "#ce9178",
+    numberColor: "#BE9287",
+    booleanColor: "#B081B9",
+    stringColor: "#D88F56",
     objectColor: "#dcdcaa",
     tableHeaderBgColor: "#333333",
     tableHeaderColor: "#cccccc",
-    searchHighlightBgColor: "#fa4949"
+    searchHighlightBgColor: "#404040"
   },
-  signedDarkPro: {
-    bgColor: "#1e1e1e",
-    tableBorderColor: "#2a2a2a",
-    highlightBgColor: "#2a2a2a",
-    cellBorderColor: "#3a3a3a",
-    keyNameColor: "#8da6ce",
-    indexColor: "#848484",
-    numberColor: "#b5bd68",
-    booleanColor: "#b5bd68",
-    stringColor: "#cc7832",
-    objectColor: "#b294bb",
-    tableHeaderBgColor: "#2a2a2a",
-    tableHeaderColor: "#d4d4d4",
-    searchHighlightBgColor: "#eab09e"
-  },
-  ariakeDark: {
-    bgColor: "#1c1e26",
-    tableBorderColor: "#2a2c33",
-    highlightBgColor: "#2a2c33",
-    cellBorderColor: "#3a3c47",
-    keyNameColor: "#82aaff",
-    indexColor: "#6b7089",
-    numberColor: "#c3e88d",
-    booleanColor: "#c3e88d",
-    stringColor: "#f78c6c",
-    objectColor: "#c792ea",
-    tableHeaderBgColor: "#2a2c33",
-    tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#efd096"
-  },
-  snazzyLight: {
-    bgColor: "#fafafa",
-    tableBorderColor: "#d0d0d0",
-    highlightBgColor: "#f0f0f0",
-    cellBorderColor: "#b0b0b0",
-    keyNameColor: "#6ab0f3",
-    indexColor: "#787878",
-    numberColor: "#bd93f9",
-    booleanColor: "#bd93f9",
-    stringColor: "#50fa7b",
-    objectColor: "#ffb86c",
-    tableHeaderBgColor: "#d0d0d0",
-    tableHeaderColor: "#2e2e2e",
-    searchHighlightBgColor: "#ff5555"
-  },
   spacegray: {
-    bgColor: "#202328",
+    bgColor: "#212835",
     tableBorderColor: "#2c313a",
     highlightBgColor: "#2c313a",
     cellBorderColor: "#394147",
-    keyNameColor: "#a9b1d6",
+    keyNameColor: "#9ec7fa",
     indexColor: "#768390",
-    numberColor: "#f29718",
-    booleanColor: "#f29718",
-    stringColor: "#98c379",
+    numberColor: "#E9B672",
+    booleanColor: "#D49FF4",
+    stringColor: "#63F49C",
     objectColor: "#61afef",
     tableHeaderBgColor: "#2c313a",
     tableHeaderColor: "#e0e0e0",
-    searchHighlightBgColor: "#ff6c6b"
+    searchHighlightBgColor: "#303b4f"
   },
-  celestial: {
-    bgColor: "#0f1419",
-    tableBorderColor: "#1c232b",
-    highlightBgColor: "#1c232b",
-    cellBorderColor: "#2c3848",
-    keyNameColor: "#79b8ff",
-    indexColor: "#abb2bf",
-    numberColor: "#56d364",
-    booleanColor: "#56d364",
-    stringColor: "#d19a66",
-    objectColor: "#c678dd",
-    tableHeaderBgColor: "#1c232b",
-    tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#30435a"
-  },
   blueberryDark: {
-    bgColor: "#242b38",
+    bgColor: "#242938",
     tableBorderColor: "#343d4a",
     highlightBgColor: "#343d4a",
     cellBorderColor: "#444f5c",
-    keyNameColor: "#82aaff",
+    keyNameColor: "#ADD7FF",
     indexColor: "#8c98a6",
-    numberColor: "#c3e88d",
+    numberColor: "#38B0B2",
     booleanColor: "#c3e88d",
-    stringColor: "#f78c6c",
+    stringColor: "#27E8A7",
     objectColor: "#c792ea",
@@ -470,62 +312,17 @@ tableHeaderBgColor: "#343d4a",
   },
-  bear: {
-    bgColor: "#e6e6e6",
-    tableBorderColor: "#d3d3d3",
-    highlightBgColor: "#d5d5d5",
-    cellBorderColor: "#c0c0c0",
-    keyNameColor: "#4e5a65",
-    indexColor: "#888888",
-    numberColor: "#4078f2",
-    booleanColor: "#4078f2",
-    stringColor: "#50a14f",
-    objectColor: "#a626a4",
-    tableHeaderBgColor: "#d3d3d3",
-    tableHeaderColor: "#333333",
-    searchHighlightBgColor: "#ffcc00"
-  },
-  oneDarkPro: {
-    bgColor: "#282c34",
-    tableBorderColor: "#2c313a",
-    highlightBgColor: "#2c313a",
-    cellBorderColor: "#3e4451",
-    keyNameColor: "#abb2bf",
-    indexColor: "#5c6370",
-    numberColor: "#d19a66",
-    booleanColor: "#d19a66",
-    stringColor: "#98c379",
-    objectColor: "#61afef",
-    tableHeaderBgColor: "#2c313a",
-    tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#e06c75"
-  },
   nord: {
     bgColor: "#2e3440",
     tableBorderColor: "#3b4252",
-    highlightBgColor: "#3b4252",
+    highlightBgColor: "#363c4a",
     cellBorderColor: "#434c5e",
     keyNameColor: "#81a1c1",
-    indexColor: "#a3be8c",
-    numberColor: "#8fbcbb",
+    indexColor: "#D8DEE9",
+    numberColor: "#88C0D0",
     booleanColor: "#8fbcbb",
-    stringColor: "#ebcb8b",
+    stringColor: "#A3BE8C",
     objectColor: "#b48ead",
     tableHeaderBgColor: "#3b4252",
     tableHeaderColor: "#e5e9f0",
-    searchHighlightBgColor: "#bf616a"
+    searchHighlightBgColor: "#404859"
   },
-  palenight: {
-    bgColor: "#292d3e",
-    tableBorderColor: "#414863",
-    highlightBgColor: "#414863",
-    cellBorderColor: "#2c3042",
-    keyNameColor: "#c3a6ff",
-    indexColor: "#b8bdff",
-    numberColor: "#ffd580",
-    booleanColor: "#ffd580",
-    stringColor: "#9ece6a",
-    objectColor: "#ff9e64",
-    tableHeaderBgColor: "#414863",
-    tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#ff8b8b"
-  },
   nightOwl: {
@@ -536,13 +333,13 @@ bgColor: "#011627",
     cellBorderColor: "#03314b",
-    keyNameColor: "#addb67",
+    keyNameColor: "#dbb8e0",
     indexColor: "#dcdcaa",
-    numberColor: "#82aaff",
+    numberColor: "#F77D48",
     booleanColor: "#82aaff",
-    stringColor: "#c792ea",
+    stringColor: "#ECC48D",
     objectColor: "#ffcb6b",
     tableHeaderBgColor: "#02233d",
     tableHeaderColor: "#e0e0e0",
-    searchHighlightBgColor: "#ff5370"
+    searchHighlightBgColor: "#033963"
   },
-  andromeda: {
+  oneMonokai: {
     bgColor: "#282c34",
@@ -555,3 +352,3 @@ tableBorderColor: "#2c313a",
     numberColor: "#d19a66",
-    booleanColor: "#d19a66",
+    booleanColor: "#61AFEF",
     stringColor: "#98c379",
@@ -561,94 +358,19 @@ objectColor: "#61afef",
     tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#e06c75"
+    searchHighlightBgColor: "#383E4A"
   },
-  horizon: {
-    bgColor: "#1c1e26",
-    tableBorderColor: "#2a2c33",
-    highlightBgColor: "#2a2c33",
-    cellBorderColor: "#3a3c47",
-    keyNameColor: "#82aaff",
-    indexColor: "#6b7089",
-    numberColor: "#c3e88d",
-    booleanColor: "#c3e88d",
-    stringColor: "#f78c6c",
-    objectColor: "#c792ea",
-    tableHeaderBgColor: "#2a2c33",
-    tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#f2d6a3"
-  },
-  cobalt2: {
-    bgColor: "#193549",
+  cobaltNext: {
+    bgColor: "#1B2B34",
     tableBorderColor: "#234666",
-    highlightBgColor: "#234666",
+    highlightBgColor: "#2b333b",
     cellBorderColor: "#29546a",
-    keyNameColor: "#6699cc",
-    indexColor: "#9cdcfe",
-    numberColor: "#b5cea8",
-    booleanColor: "#b5cea8",
-    stringColor: "#ce9178",
+    keyNameColor: "#dcd0e2",
+    indexColor: "#dcd0e2",
+    numberColor: "#5A9BCF",
+    booleanColor: "#ce9178",
+    stringColor: "#89C794",
     objectColor: "#d1d2d3",
     tableHeaderBgColor: "#234666",
     tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#ff5370"
+    searchHighlightBgColor: "#343D46"
   },
-  atomOneLight: {
-    bgColor: "#fafafa",
-    tableBorderColor: "#e0e0e0",
-    highlightBgColor: "#f5f5f5",
-    cellBorderColor: "#c0c0c0",
-    keyNameColor: "#4e5a65",
-    indexColor: "#888888",
-    numberColor: "#4078f2",
-    booleanColor: "#4078f2",
-    stringColor: "#50a14f",
-    objectColor: "#a626a4",
-    tableHeaderBgColor: "#d3d3d3",
-    tableHeaderColor: "#333333",
-    searchHighlightBgColor: "#ffcc00"
-  },
-  ysgrifennwr: {
-    bgColor: "#f8f8f8",
-    tableBorderColor: "#eaeaea",
-    highlightBgColor: "#f2f2f2",
-    cellBorderColor: "#d9d9d9",
-    keyNameColor: "#2b91af",
-    indexColor: "#888888",
-    numberColor: "#6a5acd",
-    booleanColor: "#6a5acd",
-    stringColor: "#cd5c5c",
-    objectColor: "#008b8b",
-    tableHeaderBgColor: "#eaeaea",
-    tableHeaderColor: "#333333",
-    searchHighlightBgColor: "#ff9900"
-  },
-  notepadPlusPlusRemixed: {
-    bgColor: "#262626",
-    tableBorderColor: "#333333",
-    highlightBgColor: "#333333",
-    cellBorderColor: "#4d4d4d",
-    keyNameColor: "#ffffff",
-    indexColor: "#aaaaaa",
-    numberColor: "#ffcc66",
-    booleanColor: "#ffcc66",
-    stringColor: "#a6e22e",
-    objectColor: "#66d9ef",
-    tableHeaderBgColor: "#333333",
-    tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#ff6666"
-  },
-  githubLight: {
-    bgColor: "#ffffff",
-    tableBorderColor: "#eaecef",
-    highlightBgColor: "#f6f8fa",
-    cellBorderColor: "#d1d5da",
-    keyNameColor: "#0366d6",
-    indexColor: "#6a737d",
-    numberColor: "#0366d6",
-    booleanColor: "#0366d6",
-    stringColor: "#032f62",
-    objectColor: "#6f42c1",
-    tableHeaderBgColor: "#f6f8fa",
-    tableHeaderColor: "#24292e",
-    searchHighlightBgColor: "#fffbdd"
-  },
   shadesOfPurple: {
@@ -663,29 +385,14 @@ bgColor: "#2d2b55",
     booleanColor: "#ff6188",
-    stringColor: "#a9b9ce",
+    stringColor: "#A5FF90",
     objectColor: "#fad000",
     tableHeaderBgColor: "#463d69",
     tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#ff6188"
+    searchHighlightBgColor: "#554a82"
   },
-  synthWave: {
-    bgColor: "#2a2139",
-    tableBorderColor: "#3c3359",
-    highlightBgColor: "#3c3359",
-    cellBorderColor: "#524772",
-    keyNameColor: "#f92aad",
-    indexColor: "#4df0ff",
-    numberColor: "#fff",
-    booleanColor: "#fff",
-    stringColor: "#00f9f9",
-    objectColor: "#ff8d00",
-    tableHeaderBgColor: "#3c3359",
-    tableHeaderColor: "#fff",
-    searchHighlightBgColor: "#ff8d00"
-  },
   codeBlue: {
-    bgColor: "#0e1b29",
+    bgColor: "#081620",
     tableBorderColor: "#233544",
     highlightBgColor: "#233544",
-    cellBorderColor: "#345a7d",
-    keyNameColor: "#5a9bcf",
+    cellBorderColor: "#194666",
+    keyNameColor: "#B2A8B4",
     indexColor: "#96b5b4",
@@ -700,152 +407,74 @@ numberColor: "#99cc99",
   },
-  cyberpunk: {
-    bgColor: "#1b2b34",
-    tableBorderColor: "#405c79",
-    highlightBgColor: "#405c79",
-    cellBorderColor: "#52676d",
-    keyNameColor: "#82b1ff",
-    indexColor: "#c792ea",
-    numberColor: "#89ddff",
-    booleanColor: "#89ddff",
-    stringColor: "#c3e88d",
-    objectColor: "#ffcb6b",
-    tableHeaderBgColor: "#405c79",
-    tableHeaderColor: "#d8dee9",
-    searchHighlightBgColor: "#405c79"
-  },
-  laserWave: {
-    bgColor: "#0a1e24",
-    tableBorderColor: "#0f2a35",
-    highlightBgColor: "#0f2a35",
-    cellBorderColor: "#153e50",
-    keyNameColor: "#f5ef19",
-    indexColor: "#33ccff",
-    numberColor: "#19f9d8",
-    booleanColor: "#19f9d8",
-    stringColor: "#f4eeff",
-    objectColor: "#ff66d8",
-    tableHeaderBgColor: "#0f2a35",
-    tableHeaderColor: "#ffffff",
-    searchHighlightBgColor: "#f76d47"
-  },
-  hipster: {
-    bgColor: "#0f0f0f",
-    tableBorderColor: "#181818",
-    highlightBgColor: "#181818",
-    cellBorderColor: "#303030",
-    keyNameColor: "#74b0df",
-    indexColor: "#999999",
-    numberColor: "#8cdcfe",
-    booleanColor: "#8cdcfe",
-    stringColor: "#ff8a65",
-    objectColor: "#b0bec5",
-    tableHeaderBgColor: "#181818",
-    tableHeaderColor: "#f8f8f0",
-    searchHighlightBgColor: "#d2cd87"
-  },
-  wildberry: {
-    bgColor: "#1b1725",
-    tableBorderColor: "#272030",
-    highlightBgColor: "#272030",
-    cellBorderColor: "#312742",
-    keyNameColor: "#ee82ee",
-    indexColor: "#ff79c6",
-    numberColor: "#bd93f9",
-    booleanColor: "#bd93f9",
-    stringColor: "#ff5555",
-    objectColor: "#f8f8f2",
-    tableHeaderBgColor: "#272030",
-    tableHeaderColor: "#ffb86c",
-    searchHighlightBgColor: "#f1fa8c"
-  },
-  qiita: {
-    bgColor: "#f6f6f6",
-    tableBorderColor: "#d1d1d1",
-    highlightBgColor: "#f9f9f9",
-    cellBorderColor: "#e6e6e6",
-    keyNameColor: "#55c5db",
-    indexColor: "#666666",
-    numberColor: "#55c5db",
-    booleanColor: "#55c5db",
-    stringColor: "#d54e53",
-    objectColor: "#55c5db",
-    tableHeaderBgColor: "#e6e6e6",
-    tableHeaderColor: "#24292e",
-    searchHighlightBgColor: "#ffc107"
-  },
   softEra: {
-    bgColor: "#f5f5f5",
+    bgColor: "#F9F5F5",
     tableBorderColor: "#d3d3d3",
-    highlightBgColor: "#eaeaea",
+    highlightBgColor: "#E3E6ED",
     cellBorderColor: "#c0c0c0",
-    keyNameColor: "#4e5a65",
+    keyNameColor: "#696462",
     indexColor: "#888888",
-    numberColor: "#4078f2",
-    booleanColor: "#4078f2",
-    stringColor: "#50a14f",
-    objectColor: "#a626a4",
-    tableHeaderBgColor: "#d3d3d3",
+    numberColor: "#82B4E3",
+    booleanColor: "#DA8FBD",
+    stringColor: "#87B6BE",
+    objectColor: "#C1AFDF",
+    tableHeaderBgColor: "#E3E6ED",
     tableHeaderColor: "#333333",
-    searchHighlightBgColor: "#ffcc00"
+    searchHighlightBgColor: "#d0d5e1"
+  },
+  atomMaterial: {
+    bgColor: "#263238",
+    tableBorderColor: "#37474f",
+    highlightBgColor: "#37474f",
+    cellBorderColor: "#546e7a",
+    keyNameColor: "#EEFFFF",
+    indexColor: "#90a4ae",
+    numberColor: "#F78150",
+    booleanColor: "#82b1ff",
+    stringColor: "#C3E88D",
+    objectColor: "#ffcb6b",
+    tableHeaderBgColor: "#455a64",
+    tableHeaderColor: "#ffffff",
+    searchHighlightBgColor: "#4F6875"
+  },
+  evaDark: {
+    bgColor: "#282C34",
+    tableBorderColor: "#343c47",
+    highlightBgColor: "#343c47",
+    cellBorderColor: "#3d4752",
+    keyNameColor: "#B0B7C3",
+    indexColor: "#5c6773",
+    numberColor: "#FF9070",
+    booleanColor: "#56B7C3",
+    stringColor: "#82BE79",
+    objectColor: "#b4be82",
+    tableHeaderBgColor: "#343c47",
+    tableHeaderColor: "#ffffff",
+    searchHighlightBgColor: "#4e5765"
+  },
+  moonLight: {
+    bgColor: "#222436",
+    tableBorderColor: "#343c47",
+    highlightBgColor: "#31344e",
+    cellBorderColor: "#3d4752",
+    keyNameColor: "#C8D3F5",
+    indexColor: "#C8D3F5",
+    numberColor: "#7CAFFF",
+    booleanColor: "#FF6F78",
+    stringColor: "#7AF8CA",
+    objectColor: "#ff9e64",
+    tableHeaderBgColor: "#31344e",
+    tableHeaderColor: "#C8D3F5",
+    searchHighlightBgColor: "#4e5765"
   }
 };
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
-  return typeof obj;
-} : function (obj) {
-  return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-};
-
-var slicedToArray = function () {
-  function sliceIterator(arr, i) {
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _e = undefined;
-
-    try {
-      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-        _arr.push(_s.value);
-
-        if (i && _arr.length === i) break;
-      }
-    } catch (err) {
-      _d = true;
-      _e = err;
-    } finally {
-      try {
-        if (!_n && _i["return"]) _i["return"]();
-      } finally {
-        if (_d) throw _e;
-      }
-    }
-
-    return _arr;
-  }
-
-  return function (arr, i) {
-    if (Array.isArray(arr)) {
-      return arr;
-    } else if (Symbol.iterator in Object(arr)) {
-      return sliceIterator(arr, i);
-    } else {
-      throw new TypeError("Invalid attempt to destructure non-iterable instance");
-    }
-  };
-}();
-
 function classnames() {
-  for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
   }
-
   return args.filter(Boolean).join(" ");
 }
-
 function lookup(obj, searchText) {
   var keyTree = {};
   var matchesInKey = false;
-
-  if ((typeof obj === "undefined" ? "undefined" : _typeof(obj)) !== "object") return null;
-
+  if (_typeof(obj) !== "object") return null;
   for (var key in obj) {
@@ -855,3 +484,2 @@ if (!Array.isArray(obj) && matchesText(key, searchText)) {
     }
-
     if (_typeof(obj[key]) === "object") {
@@ -868,6 +496,4 @@ var nestedKeyTree = lookup(obj[key], searchText);
   }
-
   if (Object.keys(keyTree).length !== 0) return keyTree;else if (matchesInKey) return true;else return null;
 }
-
 function matchesText(obj, searchText) {
@@ -877,3 +503,2 @@ if (searchText == null) return false;
 }
-
 function mergeKeyTrees(keyTree1, keyTree2) {
@@ -884,3 +509,2 @@ if (keyTree1 == null) return keyTree2;
   if (keyTree2 === true) return keyTree1;
-
   var mergedKeyTree = {};
@@ -897,8 +521,7 @@ for (var key in keyTree1) {
 }
-
 function checkAllObjects(data) {
   var allObjects = false;
-  var keys = void 0;
+  var keys = [];
   if (Array.isArray(data)) {
-    allObjects = true;
+    allObjects = data.length > 0;
     keys = new Set();
@@ -922,3 +545,2 @@ for (var i = 0; i < data.length; i++) {
       };
-
       for (var _i = 0; _i < data.length; _i++) {
@@ -929,19 +551,20 @@ _loop(_i);
   }
-  return { allObjects: allObjects, keys: keys };
+  return {
+    allObjects: allObjects,
+    keys: keys
+  };
 }
 
-var NestedJSONGrid = function NestedJSONGrid(props) {
+var _NestedJSONGrid = function NestedJSONGrid(props) {
   var level = props.level,
-      keyPath = props.keyPath,
-      data = props.data,
-      dataKey = props.dataKey,
-      highlightedElement = props.highlightedElement,
-      highlightSelected = props.highlightSelected,
-      onSelect = props.onSelect,
-      setHighlightedElement = props.setHighlightedElement,
-      defaultExpandDepth = props.defaultExpandDepth,
-      defaultExpandKeyTree = props.defaultExpandKeyTree,
-      searchText = props.searchText;
-
-
+    keyPath = props.keyPath,
+    data = props.data,
+    dataKey = props.dataKey,
+    highlightedElement = props.highlightedElement,
+    highlightSelected = props.highlightSelected,
+    onSelect = props.onSelect,
+    setHighlightedElement = props.setHighlightedElement,
+    defaultExpandDepth = props.defaultExpandDepth,
+    defaultExpandKeyTree = props.defaultExpandKeyTree,
+    searchText = props.searchText;
   var highlight = function highlight(e) {
@@ -978,187 +601,101 @@ if (e.target !== e.currentTarget && e.target.hasAttribute("clickable") || e.target.parentElement !== e.currentTarget && e.target.parentElement.hasAttribute("clickable")) return;
   };
-
   var renderValue = function renderValue(key, value, level, keyTree, nextKeyPath) {
-    if (value && (typeof value === "undefined" ? "undefined" : _typeof(value)) === "object") return React__default.createElement(
-      "td",
-      {
-        className: classnames(styles.obj, styles.value),
+    if (value && _typeof(value) === "object") return /*#__PURE__*/React.createElement("td", {
+      className: classnames(styles.obj, styles.value),
+      onClick: highlight,
+      clickable: "true",
+      key: key
+    }, /*#__PURE__*/React.createElement(_NestedJSONGrid, {
+      level: level + 1,
+      keyPath: keyPath.concat(nextKeyPath),
+      dataKey: key,
+      data: value,
+      highlightedElement: highlightedElement,
+      highlightSelected: highlightSelected,
+      onSelect: onSelect,
+      setHighlightedElement: setHighlightedElement,
+      defaultExpandDepth: defaultExpandDepth,
+      defaultExpandKeyTree: keyTree && keyTree[key],
+      searchText: searchText
+    }));
+    return /*#__PURE__*/React.createElement("td", {
+      className: classnames(styles.obj, styles.value),
+      onClick: highlight,
+      clickable: "true",
+      key: key
+    }, /*#__PURE__*/React.createElement("span", {
+      className: classnames(styles[_typeof(value)], matchesText(value, searchText) && styles["search-highlight"])
+    }, String(value)));
+  };
+  var renderTable = function renderTable(data, level, allObjects, keys) {
+    return /*#__PURE__*/React.createElement("table", {
+      className: styles["json-grid-table"]
+    }, allObjects && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("colgroup", null, /*#__PURE__*/React.createElement("col", null), keys.map(function (k) {
+      return /*#__PURE__*/React.createElement("col", {
+        key: k
+      });
+    })), /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+      className: classnames(styles.obj, styles.order),
+      clickable: "true"
+    }, /*#__PURE__*/React.createElement("svg", {
+      className: styles.glyphicon,
+      clickable: "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      height: "1em",
+      viewBox: "0 0 448 512"
+    }, /*#__PURE__*/React.createElement("path", {
+      fill: "currentColor",
+      d: "M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"
+    }))), keys.map(function (k) {
+      return /*#__PURE__*/React.createElement("th", {
+        className: classnames(styles.obj, styles.order, styles.name),
+        key: k,
         onClick: highlight,
         clickable: "true",
-        key: key
-      },
-      React__default.createElement(NestedJSONGrid, {
-        level: level + 1,
-        keyPath: keyPath.concat(nextKeyPath),
-        dataKey: key,
-        data: value,
-        highlightedElement: highlightedElement,
-        highlightSelected: highlightSelected,
-        onSelect: onSelect,
-        setHighlightedElement: setHighlightedElement,
-        defaultExpandDepth: defaultExpandDepth,
-        defaultExpandKeyTree: keyTree && keyTree[key],
-        searchText: searchText
-      })
-    );
-    return React__default.createElement(
-      "td",
-      {
-        className: classnames(styles.obj, styles.value),
+        colhighlight: "true"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: matchesText(k, searchText) ? styles["search-highlight"] : undefined
+      }, k.replace(/_/g, " ")));
+    })))), /*#__PURE__*/React.createElement("tbody", null, Object.keys(data).map(function (k) {
+      return /*#__PURE__*/React.createElement("tr", {
+        key: k
+      }, Array.isArray(data) ? /*#__PURE__*/React.createElement("td", {
+        className: classnames(styles.obj, styles.order, styles.index),
         onClick: highlight,
         clickable: "true",
-        key: key
-      },
-      React__default.createElement(
-        "span",
-        {
-          className: classnames(styles[typeof value === "undefined" ? "undefined" : _typeof(value)], matchesText(value, searchText) && styles["search-highlight"])
-        },
-        String(value)
-      )
-    );
+        rowhighlight: "true"
+      }, parseInt(k) + 1) : /*#__PURE__*/React.createElement("td", {
+        className: classnames(styles.obj, styles.key, styles.name),
+        onClick: highlight,
+        clickable: "true"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: matchesText(k, searchText) ? styles["search-highlight"] : undefined
+      }, k.replace(/_/g, " "))), allObjects ? Object.entries(data[k]).map(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+          kk = _ref2[0],
+          v = _ref2[1];
+        return renderValue(kk, v, level, defaultExpandKeyTree && defaultExpandKeyTree[k], [parseInt(k), kk]);
+      }) : renderValue(k, data[k], level, defaultExpandKeyTree, [k]));
+    })));
   };
-
-  var renderTable = function renderTable(data, level, allObjects, keys) {
-    return React__default.createElement(
-      "table",
-      { className: styles["json-grid-table"] },
-      allObjects && React__default.createElement(
-        React.Fragment,
-        null,
-        React__default.createElement(
-          "colgroup",
-          null,
-          React__default.createElement("col", null),
-          keys.map(function (k) {
-            return React__default.createElement("col", { key: k });
-          })
-        ),
-        React__default.createElement(
-          "thead",
-          null,
-          React__default.createElement(
-            "tr",
-            null,
-            React__default.createElement(
-              "th",
-              {
-                className: classnames(styles.obj, styles.order),
-                clickable: "true"
-              },
-              React__default.createElement(
-                "svg",
-                {
-                  className: styles.glyphicon,
-                  clickable: "true",
-                  xmlns: "http://www.w3.org/2000/svg",
-                  height: "1em",
-                  viewBox: "0 0 448 512"
-                },
-                React__default.createElement("path", {
-                  fill: "currentColor",
-                  d: "M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"
-                })
-              )
-            ),
-            keys.map(function (k) {
-              return React__default.createElement(
-                "th",
-                {
-                  className: classnames(styles.obj, styles.order, styles.name),
-                  key: k,
-                  onClick: highlight,
-                  clickable: "true",
-                  colhighlight: "true"
-                },
-                React__default.createElement(
-                  "span",
-                  {
-                    className: matchesText(k, searchText) ? styles["search-highlight"] : undefined
-                  },
-                  k.replace(/_/g, " ")
-                )
-              );
-            })
-          )
-        )
-      ),
-      React__default.createElement(
-        "tbody",
-        null,
-        Object.keys(data).map(function (k) {
-          return React__default.createElement(
-            "tr",
-            { key: k },
-            Array.isArray(data) ? React__default.createElement(
-              "td",
-              {
-                className: classnames(styles.obj, styles.order, styles.index),
-                onClick: highlight,
-                clickable: "true",
-                rowhighlight: "true"
-              },
-              parseInt(k) + 1
-            ) : React__default.createElement(
-              "td",
-              {
-                className: classnames(styles.obj, styles.key, styles.name),
-                onClick: highlight,
-                clickable: "true"
-              },
-              React__default.createElement(
-                "span",
-                {
-                  className: matchesText(k, searchText) ? styles["search-highlight"] : undefined
-                },
-                k.replace(/_/g, " ")
-              )
-            ),
-            allObjects ? Object.entries(data[k]).map(function (_ref) {
-              var _ref2 = slicedToArray(_ref, 2),
-                  kk = _ref2[0],
-                  v = _ref2[1];
-
-              return renderValue(kk, v, level, defaultExpandKeyTree && defaultExpandKeyTree[k], [parseInt(k), kk]);
-            }) : renderValue(k, data[k], level, defaultExpandKeyTree, [k])
-          );
-        })
-      )
-    );
-  };
-
   var _checkAllObjects = checkAllObjects(data),
-      allObjects = _checkAllObjects.allObjects,
-      keys = _checkAllObjects.keys;
-
+    allObjects = _checkAllObjects.allObjects,
+    keys = _checkAllObjects.keys;
   if (level !== 0) {
     var _useState = React.useState(level <= defaultExpandDepth || defaultExpandKeyTree),
-        _useState2 = slicedToArray(_useState, 2),
-        open = _useState2[0],
-        setOpen = _useState2[1];
-
-    return React__default.createElement(
-      "div",
-      { className: styles.box },
-      React__default.createElement(
-        "span",
-        {
-          className: styles.plusminus,
-          onClick: function onClick() {
-            return setOpen(!open);
-          },
-          clickable: "true"
-        },
-        open ? "[-]" : "[+]"
-      ),
-      React__default.createElement(
-        "span",
-        { className: styles.title },
-        dataKey,
-        "\xA0",
-        Array.isArray(data) ? "[" + data.length + "]" : "{}"
-      ),
-      open && renderTable(data, level, allObjects, keys)
-    );
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.box
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles.plusminus,
+      onClick: function onClick() {
+        return setOpen(!open);
+      },
+      clickable: "true"
+    }, open ? "[-]" : "[+]"), /*#__PURE__*/React.createElement("span", {
+      className: styles.title
+    }, dataKey, "\xA0", Array.isArray(data) ? "[".concat(data.length, "]") : "{}"), open && renderTable(data, level, allObjects, keys));
   }
-
   return renderTable(data, level, allObjects, keys);
@@ -1169,23 +706,20 @@ };
   var data = _ref.data,
-      _ref$defaultExpandDep = _ref.defaultExpandDepth,
-      defaultExpandDepth = _ref$defaultExpandDep === undefined ? 0 : _ref$defaultExpandDep,
-      _ref$defaultExpandKey = _ref.defaultExpandKeyTree,
-      defaultExpandKeyTree = _ref$defaultExpandKey === undefined ? {} : _ref$defaultExpandKey,
-      _ref$onSelect = _ref.onSelect,
-      onSelect = _ref$onSelect === undefined ? function (keyPath) {} : _ref$onSelect,
-      _ref$highlightSelecte = _ref.highlightSelected,
-      highlightSelected = _ref$highlightSelecte === undefined ? true : _ref$highlightSelecte,
-      searchText = _ref.searchText,
-      _ref$theme = _ref.theme,
-      theme = _ref$theme === undefined ? "default" : _ref$theme,
-      _ref$customTheme = _ref.customTheme,
-      customTheme = _ref$customTheme === undefined ? {} : _ref$customTheme;
-
+    _ref$defaultExpandDep = _ref.defaultExpandDepth,
+    defaultExpandDepth = _ref$defaultExpandDep === void 0 ? 0 : _ref$defaultExpandDep,
+    _ref$defaultExpandKey = _ref.defaultExpandKeyTree,
+    defaultExpandKeyTree = _ref$defaultExpandKey === void 0 ? {} : _ref$defaultExpandKey,
+    _ref$onSelect = _ref.onSelect,
+    onSelect = _ref$onSelect === void 0 ? function (keyPath) {} : _ref$onSelect,
+    _ref$highlightSelecte = _ref.highlightSelected,
+    highlightSelected = _ref$highlightSelecte === void 0 ? true : _ref$highlightSelecte,
+    searchText = _ref.searchText,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? "default" : _ref$theme,
+    _ref$customTheme = _ref.customTheme,
+    customTheme = _ref$customTheme === void 0 ? {} : _ref$customTheme;
   var _useState = React.useState(null),
-      _useState2 = slicedToArray(_useState, 2),
-      highlightedElement = _useState2[0],
-      setHighlightedElement = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    highlightedElement = _useState2[0],
+    setHighlightedElement = _useState2[1];
   var wrapperRef = React.useRef(null);
-
   React.useEffect(function () {
@@ -1198,36 +732,28 @@ function handleClickOutside(event) {
     }
-    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("click", handleClickOutside);
     return function () {
-      return document.removeEventListener("mousedown", handleClickOutside);
+      return document.removeEventListener("click", handleClickOutside);
     };
   }, [highlightedElement]);
-
   if (!data) {
     throw new Error("JSONGrid: data prop cannot be null or undefined");
   }
-
-  if (!Array.isArray(data) && (typeof data === "undefined" ? "undefined" : _typeof(data)) !== "object") {
+  if (!Array.isArray(data) && _typeof(data) !== "object") {
     throw new Error("JSONGrid: data prop must be an object or an array");
   }
-
   if (defaultExpandDepth < 0) {
     throw new Error("JSONGrid: defaultExpandDepth prop must not be a negative number");
   }
-
   if (onSelect && typeof onSelect !== "function") {
     throw new Error("JSONGrid: onSelect prop must be a function");
   }
-
   if (highlightSelected && typeof highlightSelected !== "boolean") {
     throw new Error("JSONGrid: highlightSelected prop must be a boolean");
   }
-
   if (searchText && typeof searchText !== "string") {
     throw new Error("JSONGrid: searchText prop must be a string");
   }
-
   if (!themes[theme]) {
-    throw new Error("JSONGrid: theme prop must be one of " + Object.keys(themes).join(", "));
+    throw new Error("JSONGrid: theme prop must be one of ".concat(Object.keys(themes).join(", ")));
   }
-
   var themeDetails = themes[theme];
@@ -1249,21 +775,19 @@ var themeStyles = {
   };
-
   var mergedKeyTree = searchText ? mergeKeyTrees(defaultExpandKeyTree, lookup(data, searchText)) : defaultExpandKeyTree;
-
-  return React__default.createElement(
-    "div",
-    { className: styles["json-grid-container"], style: themeStyles, ref: wrapperRef },
-    React__default.createElement(NestedJSONGrid, {
-      level: 0,
-      keyPath: [],
-      data: data,
-      highlightedElement: highlightedElement,
-      highlightSelected: highlightSelected,
-      onSelect: onSelect,
-      setHighlightedElement: setHighlightedElement,
-      defaultExpandDepth: defaultExpandDepth,
-      defaultExpandKeyTree: mergedKeyTree,
-      searchText: searchText
-    })
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles["json-grid-container"],
+    style: themeStyles,
+    ref: wrapperRef
+  }, /*#__PURE__*/React.createElement(_NestedJSONGrid, {
+    level: 0,
+    keyPath: [],
+    data: data,
+    highlightedElement: highlightedElement,
+    highlightSelected: highlightSelected,
+    onSelect: onSelect,
+    setHighlightedElement: setHighlightedElement,
+    defaultExpandDepth: defaultExpandDepth,
+    defaultExpandKeyTree: mergedKeyTree,
+    searchText: searchText
+  }));
 };
@@ -1270,0 +794,0 @@

dist/index.umd.js

 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
   typeof define === 'function' && define.amd ? define(['react'], factory) :
-  (global['react-json-grid'] = factory(global.React));
-}(this, (function (React) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global["react-json-grid"] = factory(global.React));
+})(this, (function (React) { 'use strict';
 
-  var React__default = 'default' in React ? React['default'] : React;
+  function _arrayLikeToArray(r, a) {
+    (null == a || a > r.length) && (a = r.length);
+    for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+    return n;
+  }
+  function _arrayWithHoles(r) {
+    if (Array.isArray(r)) return r;
+  }
+  function _iterableToArrayLimit(r, l) {
+    var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+    if (null != t) {
+      var e,
+        n,
+        i,
+        u,
+        a = [],
+        f = !0,
+        o = !1;
+      try {
+        if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+      } catch (r) {
+        o = !0, n = r;
+      } finally {
+        try {
+          if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+        } finally {
+          if (o) throw n;
+        }
+      }
+      return a;
+    }
+  }
+  function _nonIterableRest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+  function _slicedToArray(r, e) {
+    return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+  }
+  function _typeof(o) {
+    "@babel/helpers - typeof";
 
+    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+      return typeof o;
+    } : function (o) {
+      return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+    }, _typeof(o);
+  }
+  function _unsupportedIterableToArray(r, a) {
+    if (r) {
+      if ("string" == typeof r) return _arrayLikeToArray(r, a);
+      var t = {}.toString.call(r).slice(8, -1);
+      return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+    }
+  }
+
   function styleInject(css, ref) {
@@ -13,3 +66,3 @@ if ( ref === void 0 ) ref = {};
 
-    if (!css || typeof document === 'undefined') { return; }
+    if (typeof document === 'undefined') { return; }
 
@@ -37,8 +90,8 @@ var head = document.head || document.getElementsByTagName('head')[0];
 
-  var css = ".styles_json-grid-container__1do2c {\n  --jg-bg-color: #222;\n  --jg-table-border-color: #b5b5b5;\n  --jg-highlight-bg-color: #3b3b3b;\n  --jg-cell-border-color: #474747;\n\n  --jg-key-name-color: #ffffff;\n  --jg-index-color: #949494;\n  --jg-number-color: #6c99bb;\n  --jg-boolean-color: #6c99bb;\n  --jg-string-color: #a5c261;\n  --jg-object-color: #ffffff;\n\n  --jg-table-header-bg-color: #444;\n  --jg-table-header-color: #ffffff;\n\n  --jg-search-highlight-bg-color: #565a36;\n\n  display: inline-block;\n  margin: 0;\n  font-family: \"Segoe UI\", Roboto, Arial, sans-serif;\n  line-height: 1.5;\n  text-align: left;\n  background-color: var(--jg-bg-color);\n}\n\n.styles_json-grid-table__3KxDK {\n  border-collapse: separate;\n  border-spacing: 0;\n  border: solid var(--jg-table-border-color) 1px;\n}\n\n.styles_json-grid-container__1do2c, .styles_json-grid-table__3KxDK{\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.styles_highlight__1bpMD {\n  background-color: var(--jg-highlight-bg-color);\n  font-weight: bold;\n}\n\n.styles_obj__dFKgt {\n  border: 1px solid var(--jg-cell-border-color);\n  padding: 3px 10px;\n  padding-bottom: 4px;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.styles_obj__dFKgt, .styles_obj__dFKgt .styles_name__13yyl {\n  color: var(--jg-key-name-color);\n}\n\n.styles_obj__dFKgt .styles_index__2HDDg {\n  color: var(--jg-index-color);\n}\n\n.styles_obj__dFKgt .styles_number__2AHSW{\n  color: var(--jg-number-color);\n}\n\n.styles_obj__dFKgt .styles_boolean__1BANa {\n  color: var(--jg-boolean-color);\n}\n\n.styles_obj__dFKgt .styles_string__rq61g {\n  color: var(--jg-string-color);\n}\n\n.styles_obj__dFKgt .styles_object__3BV4k {\n  color: var(--jg-object-color);\n}\n\n.styles_order__3lWKM {\n  background-color: var(--jg-table-header-bg-color);\n  color: var(--jg-table-header-color);\n}\n\n.styles_key__2l8qn {\n  vertical-align: top;\n}\n\n.styles_title__1cca0 {\n  font-weight: bold;\n}\n\n.styles_plusminus__3UVy2 {\n  font-size: 15px;\n  cursor: pointer;\n  margin-right: 2px;\n}\n\n.styles_search-highlight__PcqVt {\n  background-color: var(--jg-search-highlight-bg-color);\n  padding: 1px 5px;\n  padding-top: 0px;\n  border-radius: 2px;\n}\n\n.styles_glyphicon__3VdjK {\n  position: relative;\n  top: 3px;\n  display: inline-block;\n}\n";
-  var styles = { "json-grid-container": "styles_json-grid-container__1do2c", "json-grid-table": "styles_json-grid-table__3KxDK", "highlight": "styles_highlight__1bpMD", "obj": "styles_obj__dFKgt", "name": "styles_name__13yyl", "index": "styles_index__2HDDg", "number": "styles_number__2AHSW", "boolean": "styles_boolean__1BANa", "string": "styles_string__rq61g", "object": "styles_object__3BV4k", "order": "styles_order__3lWKM", "key": "styles_key__2l8qn", "title": "styles_title__1cca0", "plusminus": "styles_plusminus__3UVy2", "search-highlight": "styles_search-highlight__PcqVt", "glyphicon": "styles_glyphicon__3VdjK" };
-  styleInject(css);
+  var css_248z = ".styles_json-grid-container__JQTup {\n  --jg-bg-color: #222;\n  --jg-table-border-color: #b5b5b5;\n  --jg-highlight-bg-color: #3b3b3b;\n  --jg-cell-border-color: #474747;\n\n  --jg-key-name-color: #ffffff;\n  --jg-index-color: #949494;\n  --jg-number-color: #6c99bb;\n  --jg-boolean-color: #6c99bb;\n  --jg-string-color: #a5c261;\n  --jg-object-color: #ffffff;\n\n  --jg-table-header-bg-color: #444;\n  --jg-table-header-color: #ffffff;\n\n  --jg-search-highlight-bg-color: #565a36;\n\n  display: inline-block;\n  margin: 0;\n  font-family: \"Segoe UI\", Roboto, Arial, sans-serif;\n  line-height: 1.5;\n  text-align: left;\n  background-color: var(--jg-bg-color);\n}\n\n.styles_json-grid-table__7XqiH {\n  border-collapse: separate;\n  border-spacing: 0;\n  border: solid var(--jg-table-border-color) 1px;\n}\n\n.styles_json-grid-container__JQTup, .styles_json-grid-table__7XqiH{\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.styles_highlight__W5FrO {\n  background-color: var(--jg-highlight-bg-color);\n  font-weight: bold;\n}\n\n.styles_obj__8WJ2U {\n  border: 1px solid var(--jg-cell-border-color);\n  padding: 3px 10px;\n  padding-bottom: 4px;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.styles_obj__8WJ2U, .styles_obj__8WJ2U .styles_name__dNGS- {\n  color: var(--jg-key-name-color);\n}\n\n.styles_obj__8WJ2U .styles_index__3uqHe {\n  color: var(--jg-index-color);\n}\n\n.styles_obj__8WJ2U .styles_number__lu5-j{\n  color: var(--jg-number-color);\n}\n\n.styles_obj__8WJ2U .styles_boolean__6Idt- {\n  color: var(--jg-boolean-color);\n}\n\n.styles_obj__8WJ2U .styles_string__2W6pT {\n  color: var(--jg-string-color);\n}\n\n.styles_obj__8WJ2U .styles_object__8wy4B {\n  color: var(--jg-object-color);\n}\n\n.styles_order__5p9g8 {\n  background-color: var(--jg-table-header-bg-color);\n  color: var(--jg-table-header-color);\n}\n\n.styles_key__VouZ7 {\n  vertical-align: top;\n}\n\n.styles_title__Q-nZR {\n  font-weight: bold;\n}\n\n.styles_plusminus__ZPLfJ {\n  font-size: 15px;\n  cursor: pointer;\n  margin-right: 2px;\n}\n\n.styles_search-highlight__co5ee {\n  background-color: var(--jg-search-highlight-bg-color);\n  padding: 1px 5px;\n  padding-top: 0px;\n  border-radius: 2px;\n}\n\n.styles_glyphicon__XsYc0 {\n  position: relative;\n  top: 3px;\n  display: inline-block;\n}\n";
+  var styles = {"json-grid-container":"styles_json-grid-container__JQTup","json-grid-table":"styles_json-grid-table__7XqiH","highlight":"styles_highlight__W5FrO","obj":"styles_obj__8WJ2U","name":"styles_name__dNGS-","index":"styles_index__3uqHe","number":"styles_number__lu5-j","boolean":"styles_boolean__6Idt-","string":"styles_string__2W6pT","object":"styles_object__8wy4B","order":"styles_order__5p9g8","key":"styles_key__VouZ7","title":"styles_title__Q-nZR","plusminus":"styles_plusminus__ZPLfJ","search-highlight":"styles_search-highlight__co5ee","glyphicon":"styles_glyphicon__XsYc0"};
+  styleInject(css_248z);
 
   var themes = {
-    default: {
+    "default": {
       bgColor: "#222",
@@ -58,46 +111,16 @@ tableBorderColor: "#b5b5b5",
     },
-    radical: {
-      bgColor: "#1e1e3f",
-      tableBorderColor: "#3a3a5e",
-      highlightBgColor: "#452a4e",
-      cellBorderColor: "#ff79c6",
-      keyNameColor: "#e1efff",
-      indexColor: "#b7b7ce",
-      numberColor: "#ffcc66",
-      booleanColor: "#f18e4f",
-      stringColor: "#a8ff60",
-      objectColor: "#ffcc66",
-      tableHeaderBgColor: "#2b265c",
-      tableHeaderColor: "#e1efff",
-      searchHighlightColor: "#b77ee0"
-    },
-    cobalt: {
-      bgColor: "#002240",
-      tableBorderColor: "#003c60",
-      highlightBgColor: "#003c60",
-      cellBorderColor: "#007acc",
-      keyNameColor: "#ffffff",
-      indexColor: "#007acc",
-      numberColor: "#8be9fd",
-      booleanColor: "#ff79c6",
-      stringColor: "#ff79c6",
-      objectColor: "#8be9fd",
-      tableHeaderBgColor: "#003c60",
-      tableHeaderColor: "#ffffff",
-      searchHighlightBgColor: "#0f5078"
-    },
     dracula: {
-      bgColor: "#282a36",
+      bgColor: "#2b2e3b",
       tableBorderColor: "#44475a",
-      highlightBgColor: "#44475a",
-      cellBorderColor: "#6272a4",
-      keyNameColor: "#bd93f9",
+      highlightBgColor: "#363949",
+      cellBorderColor: "#44475a",
+      keyNameColor: "#F8F8F2",
       indexColor: "#6272a4",
-      numberColor: "#8be9fd",
+      numberColor: "#f1fa8c",
       booleanColor: "#ff79c6",
-      stringColor: "#f1fa8c",
+      stringColor: "#50FA7B",
       objectColor: "#ff79c6",
-      tableHeaderBgColor: "#44475a",
+      tableHeaderBgColor: "#363949",
       tableHeaderColor: "#f8f8f2",
-      searchHighlightBgColor: "#ff96d2"
+      searchHighlightBgColor: "#4c4f67"
     },
@@ -108,67 +131,22 @@ monokai: {
       highlightBgColor: "#49483e",
-      cellBorderColor: "#75715e",
-      keyNameColor: "#f92672",
+      cellBorderColor: "#373a2c",
+      keyNameColor: "#c1c1bd",
       indexColor: "#75715e",
-      numberColor: "#ae81ff",
+      numberColor: "#a3e8f5",
       booleanColor: "#ae81ff",
-      stringColor: "#e6db74",
+      stringColor: "#ece393",
       objectColor: "#a6e22e",
       tableHeaderBgColor: "#414434",
       tableHeaderColor: "#f8f8f2",
-      searchHighlightBgColor: "#797760"
+      searchHighlightBgColor: "#72705a"
     },
-    solarizedLight: {
-      bgColor: "#fdf6e3",
-      tableBorderColor: "#839496",
-      highlightBgColor: "#eee8d5",
-      cellBorderColor: "#d0d0d0",
-      keyNameColor: "#268bd2",
-      indexColor: "#657b83",
-      numberColor: "#2aa198",
-      booleanColor: "#2aa198",
-      stringColor: "#859900",
-      objectColor: "#2aa198",
-      tableHeaderBgColor: "#eee8d5",
-      tableHeaderColor: "#657b83",
-      searchHighlightBgColor: "#ddd1ab"
-    },
-    solarizedDark: {
-      bgColor: "#002b36",
-      tableBorderColor: "#586e75",
-      highlightBgColor: "#073642",
-      cellBorderColor: "#073642",
-      keyNameColor: "#268bd2",
-      indexColor: "#839496",
-      numberColor: "#b58900",
-      booleanColor: "#b58900",
-      stringColor: "#859900",
-      objectColor: "#b58900",
-      tableHeaderBgColor: "#073642",
-      tableHeaderColor: "#93a1a1",
-      searchHighlightBgColor: "#185e70"
-    },
-    materialDark: {
-      bgColor: "#263238",
-      tableBorderColor: "#37474f",
-      highlightBgColor: "#37474f",
-      cellBorderColor: "#546e7a",
-      keyNameColor: "#80cbc4",
-      indexColor: "#90a4ae",
-      numberColor: "#82b1ff",
-      booleanColor: "#82b1ff",
-      stringColor: "#c3e88d",
-      objectColor: "#ffcb6b",
-      tableHeaderBgColor: "#455a64",
-      tableHeaderColor: "#ffffff",
-      searchHighlightBgColor: "#ff5370"
-    },
-    oceanicNext: {
-      bgColor: "#1b2b34",
+    oceanicPark: {
+      bgColor: "#17242B",
       tableBorderColor: "#2c3e50",
-      highlightBgColor: "#343d46",
-      cellBorderColor: "#34495e",
-      keyNameColor: "#82b1ff",
+      highlightBgColor: "#345365",
+      cellBorderColor: "#2b4554",
+      keyNameColor: "#89adc2",
       indexColor: "#546e7a",
       numberColor: "#89ddff",
-      booleanColor: "#89ddff",
+      booleanColor: "#35A6B3",
       stringColor: "#c3e88d",
@@ -178,18 +156,18 @@ objectColor: "#ffcb6b",
       tableHeaderColor: "#ffffff",
-      searchHighlightBgColor: "#ff5370"
+      searchHighlightBgColor: "#185e70"
     },
     panda: {
-      bgColor: "#292a2b",
+      bgColor: "#292A2B",
       tableBorderColor: "#4d4e50",
-      highlightBgColor: "#434547",
-      cellBorderColor: "#5f6062",
-      keyNameColor: "#ff6b72",
+      highlightBgColor: "#3e4042",
+      cellBorderColor: "#4c4c4d",
+      keyNameColor: "#b4fdf2",
       indexColor: "#9aedfe",
-      numberColor: "#f5d76e",
-      booleanColor: "#f5d76e",
-      stringColor: "#a5ef63",
+      numberColor: "#35dcfd",
+      booleanColor: "#FF9AA4",
+      stringColor: "#FFB857",
       objectColor: "#ff6b72",
       tableHeaderBgColor: "#3b3c3d",
       tableHeaderColor: "#ffffff",
-      searchHighlightBgColor: "#ff5370"
+      searchHighlightBgColor: "#4a4d4f"
     },
@@ -211,29 +189,14 @@ gruvboxMaterial: {
     },
-    merko: {
-      bgColor: "#f6f8fa",
-      tableBorderColor: "#e1e4e8",
-      highlightBgColor: "#e1e4e8",
-      cellBorderColor: "#c9d1d9",
-      keyNameColor: "#0366d6",
-      indexColor: "#586069",
-      numberColor: "#22863a",
-      booleanColor: "#22863a",
-      stringColor: "#cb2431",
-      objectColor: "#0366d6",
-      tableHeaderBgColor: "#e1e4e8",
-      tableHeaderColor: "#0366d6",
-      searchHighlightBgColor: "#ffd33d"
-    },
     tokyoNight: {
-      bgColor: "#1a1b26",
+      bgColor: "#1A1B26",
       tableBorderColor: "#272a36",
       highlightBgColor: "#34374c",
       cellBorderColor: "#272a36",
-      keyNameColor: "#9d88f5",
+      keyNameColor: "#C0CAF5",
       indexColor: "#89b8ff",
-      numberColor: "#46d9ff",
-      booleanColor: "#46d9ff",
-      stringColor: "#ff75b5",
+      numberColor: "#7CCE6A",
+      booleanColor: "#7AA2F7",
+      stringColor: "#AC94F7",
       objectColor: "#9d88f5",
-      tableHeaderBgColor: "#3a3e54",
+      tableHeaderBgColor: "#363a4a",
       tableHeaderColor: "#f3f3f3",
@@ -255,39 +218,9 @@ searchHighlightBgColor: "#53577b"
       tableHeaderColor: "#6e5494",
-      searchHighlightBgColor: "#e2cd8f"
+      searchHighlightBgColor: "#FCEED1"
     },
-    minimal: {
-      bgColor: "#f5f5f5",
-      tableBorderColor: "#e0e0e0",
-      highlightBgColor: "#eeeeee",
-      cellBorderColor: "#c0c0c0",
-      keyNameColor: "#333333",
-      indexColor: "#666666",
-      numberColor: "#007acc",
-      booleanColor: "#007acc",
-      stringColor: "#2ca22c",
-      objectColor: "#333333",
-      tableHeaderBgColor: "#f0f0f0",
-      tableHeaderColor: "#333333",
-      searchHighlightBgColor: "#e0e073"
-    },
-    auroraX: {
-      bgColor: "#2b313a",
-      tableBorderColor: "#343c47",
-      highlightBgColor: "#343c47",
-      cellBorderColor: "#3d4752",
-      keyNameColor: "#b4be82",
-      indexColor: "#5c6773",
-      numberColor: "#7aa2f7",
-      booleanColor: "#7aa2f7",
-      stringColor: "#c3a6ff",
-      objectColor: "#b4be82",
-      tableHeaderBgColor: "#343c47",
-      tableHeaderColor: "#ffffff",
-      searchHighlightBgColor: "#e06c75"
-    },
     atlanticNight: {
-      bgColor: "#2a394f",
-      tableBorderColor: "#344b63",
-      highlightBgColor: "#344b63",
-      cellBorderColor: "#4d5c71",
+      bgColor: "#000720",
+      tableBorderColor: "#000b33",
+      highlightBgColor: "#1f2647",
+      cellBorderColor: "#00114d",
       keyNameColor: "#6cb6ff",
@@ -297,24 +230,9 @@ indexColor: "#6cb6ff",
       booleanColor: "#a2d6ff",
-      stringColor: "#e2e9fd",
+      stringColor: "#BF90C9",
       objectColor: "#6cb6ff",
-      tableHeaderBgColor: "#344b63",
+      tableHeaderBgColor: "#001666",
       tableHeaderColor: "#ffffff",
-      searchHighlightBgColor: "#ff8f40"
+      searchHighlightBgColor: "#1C2341"
     },
-    aTouchOfLilac: {
-      bgColor: "#f3f0ff",
-      tableBorderColor: "#d2cef4",
-      highlightBgColor: "#e1dcff",
-      cellBorderColor: "#b8b0e8",
-      keyNameColor: "#a26bff",
-      indexColor: "#8664b3",
-      numberColor: "#6772e5",
-      booleanColor: "#6772e5",
-      stringColor: "#528bff",
-      objectColor: "#a26bff",
-      tableHeaderBgColor: "#d2cef4",
-      tableHeaderColor: "#44337a",
-      searchHighlightBgColor: "#edc8bc"
-    },
-    glassUI: {
+    defaultLight: {
       bgColor: "#f5f5f5",
@@ -332,23 +250,8 @@ tableBorderColor: "#d3d3d3",
       tableHeaderColor: "#333333",
-      searchHighlightBgColor: "#e2e29c"
+      searchHighlightBgColor: "#cccccc"
     },
-    fireflyPro: {
-      bgColor: "#292d3e",
-      tableBorderColor: "#414863",
-      highlightBgColor: "#414863",
-      cellBorderColor: "#252938",
-      keyNameColor: "#c3a6ff",
-      indexColor: "#b8bdff",
-      numberColor: "#ffd580",
-      booleanColor: "#ffd580",
-      stringColor: "#9ece6a",
-      objectColor: "#ff9e64",
-      tableHeaderBgColor: "#414863",
-      tableHeaderColor: "#ffffff",
-      searchHighlightBgColor: "#ff7272"
-    },
-    reUI: {
+    defaultLight2: {
       bgColor: "#fafafa",
       tableBorderColor: "#e0e0e0",
-      highlightBgColor: "#f0f0f0",
+      highlightBgColor: "#e6e6e6",
       cellBorderColor: "#c7c7c7",
@@ -363,104 +266,44 @@ keyNameColor: "#4caf50",
       tableHeaderColor: "#333333",
-      searchHighlightBgColor: "#ffeb3b"
+      searchHighlightBgColor: "#cccccc"
     },
     slime: {
-      bgColor: "#222222",
+      bgColor: "#1E2324",
       tableBorderColor: "#333333",
       highlightBgColor: "#333333",
       cellBorderColor: "#444444",
-      keyNameColor: "#5fd7ff",
+      keyNameColor: "#8EC199",
       indexColor: "#999999",
-      numberColor: "#b8d68c",
-      booleanColor: "#b8d68c",
-      stringColor: "#ce9178",
+      numberColor: "#BE9287",
+      booleanColor: "#B081B9",
+      stringColor: "#D88F56",
       objectColor: "#dcdcaa",
       tableHeaderBgColor: "#333333",
       tableHeaderColor: "#cccccc",
-      searchHighlightBgColor: "#fa4949"
+      searchHighlightBgColor: "#404040"
     },
-    signedDarkPro: {
-      bgColor: "#1e1e1e",
-      tableBorderColor: "#2a2a2a",
-      highlightBgColor: "#2a2a2a",
-      cellBorderColor: "#3a3a3a",
-      keyNameColor: "#8da6ce",
-      indexColor: "#848484",
-      numberColor: "#b5bd68",
-      booleanColor: "#b5bd68",
-      stringColor: "#cc7832",
-      objectColor: "#b294bb",
-      tableHeaderBgColor: "#2a2a2a",
-      tableHeaderColor: "#d4d4d4",
-      searchHighlightBgColor: "#eab09e"
-    },
-    ariakeDark: {
-      bgColor: "#1c1e26",
-      tableBorderColor: "#2a2c33",
-      highlightBgColor: "#2a2c33",
-      cellBorderColor: "#3a3c47",
-      keyNameColor: "#82aaff",
-      indexColor: "#6b7089",
-      numberColor: "#c3e88d",
-      booleanColor: "#c3e88d",
-      stringColor: "#f78c6c",
-      objectColor: "#c792ea",
-      tableHeaderBgColor: "#2a2c33",
-      tableHeaderColor: "#ffffff",
-      searchHighlightBgColor: "#efd096"
-    },
-    snazzyLight: {
-      bgColor: "#fafafa",
-      tableBorderColor: "#d0d0d0",
-      highlightBgColor: "#f0f0f0",
-      cellBorderColor: "#b0b0b0",
-      keyNameColor: "#6ab0f3",
-      indexColor: "#787878",
-      numberColor: "#bd93f9",
-      booleanColor: "#bd93f9",
-      stringColor: "#50fa7b",
-      objectColor: "#ffb86c",
-      tableHeaderBgColor: "#d0d0d0",
-      tableHeaderColor: "#2e2e2e",
-      searchHighlightBgColor: "#ff5555"
-    },
     spacegray: {
-      bgColor: "#202328",
+      bgColor: "#212835",
       tableBorderColor: "#2c313a",
       highlightBgColor: "#2c313a",
       cellBorderColor: "#394147",
-      keyNameColor: "#a9b1d6",
+      keyNameColor: "#9ec7fa",
       indexColor: "#768390",
-      numberColor: "#f29718",
-      booleanColor: "#f29718",
-      stringColor: "#98c379",
+      numberColor: "#E9B672",
+      booleanColor: "#D49FF4",
+      stringColor: "#63F49C",
       objectColor: "#61afef",
       tableHeaderBgColor: "#2c313a",
       tableHeaderColor: "#e0e0e0",
-      searchHighlightBgColor: "#ff6c6b"
+      searchHighlightBgColor: "#303b4f"
     },
-    celestial: {
-      bgColor: "#0f1419",
-      tableBorderColor: "#1c232b",
-      highlightBgColor: "#1c232b",
-      cellBorderColor: "#2c3848",
-      keyNameColor: "#79b8ff",
-      indexColor: "#abb2bf",
-      numberColor: "#56d364",
-      booleanColor: "#56d364",
-      stringColor: "#d19a66",
-      objectColor: "#c678dd",
-      tableHeaderBgColor: "#1c232b",
-      tableHeaderColor: "#ffffff",
-      searchHighlightBgColor: "#30435a"
-    },
     blueberryDark: {
-      bgColor: "#242b38",
+      bgColor: "#242938",
       tableBorderColor: "#343d4a",
       highlightBgColor: "#343d4a",
       cellBorderColor: "#444f5c",
-      keyNameColor: "#82aaff",
+      keyNameColor: "#ADD7FF",
       indexColor: "#8c98a6",
-      numberColor: "#c3e88d",
+      numberColor: "#38B0B2",
       booleanColor: "#c3e88d",
-      stringColor: "#f78c6c",
+      stringColor: "#27E8A7",
       objectColor: "#c792ea",
@@ -471,62 +314,17 @@ tableHeaderBgColor: "#343d4a",
     },
-    bear: {
-      bgColor: "#e6e6e6",
-      tableBorderColor: "#d3d3d3",
-      highlightBgColor: "#d5d5d5",
-      cellBorderColor: "#c0c0c0",
-      keyNameColor: "#4e5a65",
-      indexColor: "#888888",
-      numberColor: "#4078f2",
-      booleanColor: "#4078f2",
-      stringColor: "#50a14f",
-      objectColor: "#a626a4",
-      tableHeaderBgColor: "#d3d3d3",
-      tableHeaderColor: "#333333",
-      searchHighlightBgColor: "#ffcc00"
-    },
-    oneDarkPro: {
-      bgColor: "#282c34",
-      tableBorderColor: "#2c313a",
-      highlightBgColor: "#2c313a",
-      cellBorderColor: "#3e4451",
-      keyNameColor: "#abb2bf",
-      indexColor: "#5c6370",
-      numberColor: "#d19a66",
-      booleanColor: "#d19a66",
-      stringColor: "#98c379",
-      objectColor: "#61afef",
-      tableHeaderBgColor: "#2c313a",
-      tableHeaderColor: "#ffffff",
-      searchHighlightBgColor: "#e06c75"
-    },
     nord: {
       bgColor: "#2e3440",
       tableBorderColor: "#3b4252",
-      highlightBgColor: "#3b4252",
+      highlightBgColor: "#363c4a",
       cellBorderColor: "#434c5e",
       keyNameColor: "#81a1c1",
-      indexColor: "#a3be8c",
-      numberColor: "#8fbcbb",
+      indexColor: "#D8DEE9",
+      numberColor: "#88C0D0",
       booleanColor: "#8fbcbb",
-      stringColor: "#ebcb8b",
+      stringColor: "#A3BE8C",
       objectColor: "#b48ead",
       tableHeaderBgColor: "#3b4252",
       tableHeaderColor: "#e5e9f0",
-      searchHighlightBgColor: "#bf616a"
+      searchHighlightBgColor: "#404859"
     },
-    palenight: {
-      bgColor: "#292d3e",
-      tableBorderColor: "#414863",
-      highlightBgColor: "#414863",
-      cellBorderColor: "#2c3042",
-      keyNameColor: "#c3a6ff",
-      indexColor: "#b8bdff",
-      numberColor: "#ffd580",
-      booleanColor: "#ffd580",
-      stringColor: "#9ece6a",
-      objectColor: "#ff9e64",
-      tableHeaderBgColor: "#414863",
-      tableHeaderColor: "#ffffff",
-      searchHighlightBgColor: "#ff8b8b"
-    },
     nightOwl: {
@@ -537,13 +335,13 @@ bgColor: "#011627",
       cellBorderColor: "#03314b",
-      keyNameColor: "#addb67",
+      keyNameColor: "#dbb8e0",
       indexColor: "#dcdcaa",
-      numberColor: "#82aaff",
+      numberColor: "#F77D48",
       booleanColor: "#82aaff",
-      stringColor: "#c792ea",
+      stringColor: "#ECC48D",
       objectColor: "#ffcb6b",
       tableHeaderBgColor: "#02233d",
       tableHeaderColor: "#e0e0e0",
-      searchHighlightBgColor: "#ff5370"
+      searchHighlightBgColor: "#033963"
     },
-    andromeda: {
+    oneMonokai: {
       bgColor: "#282c34",
@@ -556,3 +354,3 @@ tableBorderColor: "#2c313a",
       numberColor: "#d19a66",
-      booleanColor: "#d19a66",
+      booleanColor: "#61AFEF",
       stringColor: "#98c379",
@@ -562,94 +360,19 @@ objectColor: "#61afef",
       tableHeaderColor: "#ffffff",
-      searchHighlightBgColor: "#e06c75"
+      searchHighlightBgColor: "#383E4A"
     },
-    horizon: {
-      bgColor: "#1c1e26",
-      tableBorderColor: "#2a2c33",
-      highlightBgColor: "#2a2c33",
-      cellBorderColor: "#3a3c47",
-      keyNameColor: "#82aaff",
-      indexColor: "#6b7089",
-      numberColor: "#c3e88d",
-      booleanColor: "#c3e88d",
-      stringColor: "#f78c6c",
-      objectColor: "#c792ea",
-      tableHeaderBgColor: "#2a2c33",
-      tableHeaderColor: "#ffffff",
-      searchHighlightBgColor: "#f2d6a3"
-    },
-    cobalt2: {
-      bgColor: "#193549",
+    cobaltNext: {
+      bgColor: "#1B2B34",
       tableBorderColor: "#234666",
-      highlightBgColor: "#234666",
+      highlightBgColor: "#2b333b",
       cellBorderColor: "#29546a",
-      keyNameColor: "#6699cc",
-      indexColor: "#9cdcfe",
-      numberColor: "#b5cea8",
-      booleanColor: "#b5cea8",
-      stringColor: "#ce9178",
+      keyNameColor: "#dcd0e2",
+      indexColor: "#dcd0e2",
+      numberColor: "#5A9BCF",
+      booleanColor: "#ce9178",
+      stringColor: "#89C794",
       objectColor: "#d1d2d3",
       tableHeaderBgColor: "#234666",
       tableHeaderColor: "#ffffff",
-      searchHighlightBgColor: "#ff5370"
+      searchHighlightBgColor: "#343D46"
     },
-    atomOneLight: {
-      bgColor: "#fafafa",
-      tableBorderColor: "#e0e0e0",
-      highlightBgColor: "#f5f5f5",
-      cellBorderColor: "#c0c0c0",
-      keyNameColor: "#4e5a65",
-      indexColor: "#888888",
-      numberColor: "#4078f2",
-      booleanColor: "#4078f2",
-      stringColor: "#50a14f",
-      objectColor: "#a626a4",
-      tableHeaderBgColor: "#d3d3d3",
-      tableHeaderColor: "#333333",
-      searchHighlightBgColor: "#ffcc00"
-    },
-    ysgrifennwr: {
-      bgColor: "#f8f8f8",
-      tableBorderColor: "#eaeaea",
-      highlightBgColor: "#f2f2f2",
-      cellBorderColor: "#d9d9d9",
-      keyNameColor: "#2b91af",
-      indexColor: "#888888",
-      numberColor: "#6a5acd",
-      booleanColor: "#6a5acd",
-      stringColor: "#cd5c5c",
-      objectColor: "#008b8b",
-      tableHeaderBgColor: "#eaeaea",
-      tableHeaderColor: "#333333",
-      searchHighlightBgColor: "#ff9900"
-    },
-    notepadPlusPlusRemixed: {
-      bgColor: "#262626",
-      tableBorderColor: "#333333",
-      highlightBgColor: "#333333",
-      cellBorderColor: "#4d4d4d",
-      keyNameColor: "#ffffff",
-      indexColor: "#aaaaaa",
-      numberColor: "#ffcc66",
-      booleanColor: "#ffcc66",
-      stringColor: "#a6e22e",
-      objectColor: "#66d9ef",
-      tableHeaderBgColor: "#333333",
-      tableHeaderColor: "#ffffff",
-      searchHighlightBgColor: "#ff6666"
-    },
-    githubLight: {
-      bgColor: "#ffffff",
-      tableBorderColor: "#eaecef",
-      highlightBgColor: "#f6f8fa",
-      cellBorderColor: "#d1d5da",
-      keyNameColor: "#0366d6",
-      indexColor: "#6a737d",
-      numberColor: "#0366d6",
-      booleanColor: "#0366d6",
-      stringColor: "#032f62",
-      objectColor: "#6f42c1",
-      tableHeaderBgColor: "#f6f8fa",
-      tableHeaderColor: "#24292e",
-      searchHighlightBgColor: "#fffbdd"
-    },
     shadesOfPurple: {
@@ -664,29 +387,14 @@ bgColor: "#2d2b55",
       booleanColor: "#ff6188",
-      stringColor: "#a9b9ce",
+      stringColor: "#A5FF90",
       objectColor: "#fad000",
       tableHeaderBgColor: "#463d69",
       tableHeaderColor: "#ffffff",
-      searchHighlightBgColor: "#ff6188"
+      searchHighlightBgColor: "#554a82"
     },
-    synthWave: {
-      bgColor: "#2a2139",
-      tableBorderColor: "#3c3359",
-      highlightBgColor: "#3c3359",
-      cellBorderColor: "#524772",
-      keyNameColor: "#f92aad",
-      indexColor: "#4df0ff",
-      numberColor: "#fff",
-      booleanColor: "#fff",
-      stringColor: "#00f9f9",
-      objectColor: "#ff8d00",
-      tableHeaderBgColor: "#3c3359",
-      tableHeaderColor: "#fff",
-      searchHighlightBgColor: "#ff8d00"
-    },
     codeBlue: {
-      bgColor: "#0e1b29",
+      bgColor: "#081620",
       tableBorderColor: "#233544",
       highlightBgColor: "#233544",
-      cellBorderColor: "#345a7d",
-      keyNameColor: "#5a9bcf",
+      cellBorderColor: "#194666",
+      keyNameColor: "#B2A8B4",
       indexColor: "#96b5b4",
@@ -701,152 +409,74 @@ numberColor: "#99cc99",
     },
-    cyberpunk: {
-      bgColor: "#1b2b34",
-      tableBorderColor: "#405c79",
-      highlightBgColor: "#405c79",
-      cellBorderColor: "#52676d",
-      keyNameColor: "#82b1ff",
-      indexColor: "#c792ea",
-      numberColor: "#89ddff",
-      booleanColor: "#89ddff",
-      stringColor: "#c3e88d",
-      objectColor: "#ffcb6b",
-      tableHeaderBgColor: "#405c79",
-      tableHeaderColor: "#d8dee9",
-      searchHighlightBgColor: "#405c79"
-    },
-    laserWave: {
-      bgColor: "#0a1e24",
-      tableBorderColor: "#0f2a35",
-      highlightBgColor: "#0f2a35",
-      cellBorderColor: "#153e50",
-      keyNameColor: "#f5ef19",
-      indexColor: "#33ccff",
-      numberColor: "#19f9d8",
-      booleanColor: "#19f9d8",
-      stringColor: "#f4eeff",
-      objectColor: "#ff66d8",
-      tableHeaderBgColor: "#0f2a35",
-      tableHeaderColor: "#ffffff",
-      searchHighlightBgColor: "#f76d47"
-    },
-    hipster: {
-      bgColor: "#0f0f0f",
-      tableBorderColor: "#181818",
-      highlightBgColor: "#181818",
-      cellBorderColor: "#303030",
-      keyNameColor: "#74b0df",
-      indexColor: "#999999",
-      numberColor: "#8cdcfe",
-      booleanColor: "#8cdcfe",
-      stringColor: "#ff8a65",
-      objectColor: "#b0bec5",
-      tableHeaderBgColor: "#181818",
-      tableHeaderColor: "#f8f8f0",
-      searchHighlightBgColor: "#d2cd87"
-    },
-    wildberry: {
-      bgColor: "#1b1725",
-      tableBorderColor: "#272030",
-      highlightBgColor: "#272030",
-      cellBorderColor: "#312742",
-      keyNameColor: "#ee82ee",
-      indexColor: "#ff79c6",
-      numberColor: "#bd93f9",
-      booleanColor: "#bd93f9",
-      stringColor: "#ff5555",
-      objectColor: "#f8f8f2",
-      tableHeaderBgColor: "#272030",
-      tableHeaderColor: "#ffb86c",
-      searchHighlightBgColor: "#f1fa8c"
-    },
-    qiita: {
-      bgColor: "#f6f6f6",
-      tableBorderColor: "#d1d1d1",
-      highlightBgColor: "#f9f9f9",
-      cellBorderColor: "#e6e6e6",
-      keyNameColor: "#55c5db",
-      indexColor: "#666666",
-      numberColor: "#55c5db",
-      booleanColor: "#55c5db",
-      stringColor: "#d54e53",
-      objectColor: "#55c5db",
-      tableHeaderBgColor: "#e6e6e6",
-      tableHeaderColor: "#24292e",
-      searchHighlightBgColor: "#ffc107"
-    },
     softEra: {
-      bgColor: "#f5f5f5",
+      bgColor: "#F9F5F5",
       tableBorderColor: "#d3d3d3",
-      highlightBgColor: "#eaeaea",
+      highlightBgColor: "#E3E6ED",
       cellBorderColor: "#c0c0c0",
-      keyNameColor: "#4e5a65",
+      keyNameColor: "#696462",
       indexColor: "#888888",
-      numberColor: "#4078f2",
-      booleanColor: "#4078f2",
-      stringColor: "#50a14f",
-      objectColor: "#a626a4",
-      tableHeaderBgColor: "#d3d3d3",
+      numberColor: "#82B4E3",
+      booleanColor: "#DA8FBD",
+      stringColor: "#87B6BE",
+      objectColor: "#C1AFDF",
+      tableHeaderBgColor: "#E3E6ED",
       tableHeaderColor: "#333333",
-      searchHighlightBgColor: "#ffcc00"
+      searchHighlightBgColor: "#d0d5e1"
+    },
+    atomMaterial: {
+      bgColor: "#263238",
+      tableBorderColor: "#37474f",
+      highlightBgColor: "#37474f",
+      cellBorderColor: "#546e7a",
+      keyNameColor: "#EEFFFF",
+      indexColor: "#90a4ae",
+      numberColor: "#F78150",
+      booleanColor: "#82b1ff",
+      stringColor: "#C3E88D",
+      objectColor: "#ffcb6b",
+      tableHeaderBgColor: "#455a64",
+      tableHeaderColor: "#ffffff",
+      searchHighlightBgColor: "#4F6875"
+    },
+    evaDark: {
+      bgColor: "#282C34",
+      tableBorderColor: "#343c47",
+      highlightBgColor: "#343c47",
+      cellBorderColor: "#3d4752",
+      keyNameColor: "#B0B7C3",
+      indexColor: "#5c6773",
+      numberColor: "#FF9070",
+      booleanColor: "#56B7C3",
+      stringColor: "#82BE79",
+      objectColor: "#b4be82",
+      tableHeaderBgColor: "#343c47",
+      tableHeaderColor: "#ffffff",
+      searchHighlightBgColor: "#4e5765"
+    },
+    moonLight: {
+      bgColor: "#222436",
+      tableBorderColor: "#343c47",
+      highlightBgColor: "#31344e",
+      cellBorderColor: "#3d4752",
+      keyNameColor: "#C8D3F5",
+      indexColor: "#C8D3F5",
+      numberColor: "#7CAFFF",
+      booleanColor: "#FF6F78",
+      stringColor: "#7AF8CA",
+      objectColor: "#ff9e64",
+      tableHeaderBgColor: "#31344e",
+      tableHeaderColor: "#C8D3F5",
+      searchHighlightBgColor: "#4e5765"
     }
   };
 
-  var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  };
-
-  var slicedToArray = function () {
-    function sliceIterator(arr, i) {
-      var _arr = [];
-      var _n = true;
-      var _d = false;
-      var _e = undefined;
-
-      try {
-        for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-          _arr.push(_s.value);
-
-          if (i && _arr.length === i) break;
-        }
-      } catch (err) {
-        _d = true;
-        _e = err;
-      } finally {
-        try {
-          if (!_n && _i["return"]) _i["return"]();
-        } finally {
-          if (_d) throw _e;
-        }
-      }
-
-      return _arr;
-    }
-
-    return function (arr, i) {
-      if (Array.isArray(arr)) {
-        return arr;
-      } else if (Symbol.iterator in Object(arr)) {
-        return sliceIterator(arr, i);
-      } else {
-        throw new TypeError("Invalid attempt to destructure non-iterable instance");
-      }
-    };
-  }();
-
   function classnames() {
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     return args.filter(Boolean).join(" ");
   }
-
   function lookup(obj, searchText) {
     var keyTree = {};
     var matchesInKey = false;
-
-    if ((typeof obj === "undefined" ? "undefined" : _typeof(obj)) !== "object") return null;
-
+    if (_typeof(obj) !== "object") return null;
     for (var key in obj) {
@@ -856,3 +486,2 @@ if (!Array.isArray(obj) && matchesText(key, searchText)) {
       }
-
       if (_typeof(obj[key]) === "object") {
@@ -869,6 +498,4 @@ var nestedKeyTree = lookup(obj[key], searchText);
     }
-
     if (Object.keys(keyTree).length !== 0) return keyTree;else if (matchesInKey) return true;else return null;
   }
-
   function matchesText(obj, searchText) {
@@ -878,3 +505,2 @@ if (searchText == null) return false;
   }
-
   function mergeKeyTrees(keyTree1, keyTree2) {
@@ -885,3 +511,2 @@ if (keyTree1 == null) return keyTree2;
     if (keyTree2 === true) return keyTree1;
-
     var mergedKeyTree = {};
@@ -898,8 +523,7 @@ for (var key in keyTree1) {
   }
-
   function checkAllObjects(data) {
     var allObjects = false;
-    var keys = void 0;
+    var keys = [];
     if (Array.isArray(data)) {
-      allObjects = true;
+      allObjects = data.length > 0;
       keys = new Set();
@@ -923,3 +547,2 @@ for (var i = 0; i < data.length; i++) {
         };
-
         for (var _i = 0; _i < data.length; _i++) {
@@ -930,19 +553,20 @@ _loop(_i);
     }
-    return { allObjects: allObjects, keys: keys };
+    return {
+      allObjects: allObjects,
+      keys: keys
+    };
   }
 
-  var NestedJSONGrid = function NestedJSONGrid(props) {
+  var _NestedJSONGrid = function NestedJSONGrid(props) {
     var level = props.level,
-        keyPath = props.keyPath,
-        data = props.data,
-        dataKey = props.dataKey,
-        highlightedElement = props.highlightedElement,
-        highlightSelected = props.highlightSelected,
-        onSelect = props.onSelect,
-        setHighlightedElement = props.setHighlightedElement,
-        defaultExpandDepth = props.defaultExpandDepth,
-        defaultExpandKeyTree = props.defaultExpandKeyTree,
-        searchText = props.searchText;
-
-
+      keyPath = props.keyPath,
+      data = props.data,
+      dataKey = props.dataKey,
+      highlightedElement = props.highlightedElement,
+      highlightSelected = props.highlightSelected,
+      onSelect = props.onSelect,
+      setHighlightedElement = props.setHighlightedElement,
+      defaultExpandDepth = props.defaultExpandDepth,
+      defaultExpandKeyTree = props.defaultExpandKeyTree,
+      searchText = props.searchText;
     var highlight = function highlight(e) {
@@ -979,187 +603,101 @@ if (e.target !== e.currentTarget && e.target.hasAttribute("clickable") || e.target.parentElement !== e.currentTarget && e.target.parentElement.hasAttribute("clickable")) return;
     };
-
     var renderValue = function renderValue(key, value, level, keyTree, nextKeyPath) {
-      if (value && (typeof value === "undefined" ? "undefined" : _typeof(value)) === "object") return React__default.createElement(
-        "td",
-        {
-          className: classnames(styles.obj, styles.value),
+      if (value && _typeof(value) === "object") return /*#__PURE__*/React.createElement("td", {
+        className: classnames(styles.obj, styles.value),
+        onClick: highlight,
+        clickable: "true",
+        key: key
+      }, /*#__PURE__*/React.createElement(_NestedJSONGrid, {
+        level: level + 1,
+        keyPath: keyPath.concat(nextKeyPath),
+        dataKey: key,
+        data: value,
+        highlightedElement: highlightedElement,
+        highlightSelected: highlightSelected,
+        onSelect: onSelect,
+        setHighlightedElement: setHighlightedElement,
+        defaultExpandDepth: defaultExpandDepth,
+        defaultExpandKeyTree: keyTree && keyTree[key],
+        searchText: searchText
+      }));
+      return /*#__PURE__*/React.createElement("td", {
+        className: classnames(styles.obj, styles.value),
+        onClick: highlight,
+        clickable: "true",
+        key: key
+      }, /*#__PURE__*/React.createElement("span", {
+        className: classnames(styles[_typeof(value)], matchesText(value, searchText) && styles["search-highlight"])
+      }, String(value)));
+    };
+    var renderTable = function renderTable(data, level, allObjects, keys) {
+      return /*#__PURE__*/React.createElement("table", {
+        className: styles["json-grid-table"]
+      }, allObjects && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("colgroup", null, /*#__PURE__*/React.createElement("col", null), keys.map(function (k) {
+        return /*#__PURE__*/React.createElement("col", {
+          key: k
+        });
+      })), /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+        className: classnames(styles.obj, styles.order),
+        clickable: "true"
+      }, /*#__PURE__*/React.createElement("svg", {
+        className: styles.glyphicon,
+        clickable: "true",
+        xmlns: "http://www.w3.org/2000/svg",
+        height: "1em",
+        viewBox: "0 0 448 512"
+      }, /*#__PURE__*/React.createElement("path", {
+        fill: "currentColor",
+        d: "M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"
+      }))), keys.map(function (k) {
+        return /*#__PURE__*/React.createElement("th", {
+          className: classnames(styles.obj, styles.order, styles.name),
+          key: k,
           onClick: highlight,
           clickable: "true",
-          key: key
-        },
-        React__default.createElement(NestedJSONGrid, {
-          level: level + 1,
-          keyPath: keyPath.concat(nextKeyPath),
-          dataKey: key,
-          data: value,
-          highlightedElement: highlightedElement,
-          highlightSelected: highlightSelected,
-          onSelect: onSelect,
-          setHighlightedElement: setHighlightedElement,
-          defaultExpandDepth: defaultExpandDepth,
-          defaultExpandKeyTree: keyTree && keyTree[key],
-          searchText: searchText
-        })
-      );
-      return React__default.createElement(
-        "td",
-        {
-          className: classnames(styles.obj, styles.value),
+          colhighlight: "true"
+        }, /*#__PURE__*/React.createElement("span", {
+          className: matchesText(k, searchText) ? styles["search-highlight"] : undefined
+        }, k.replace(/_/g, " ")));
+      })))), /*#__PURE__*/React.createElement("tbody", null, Object.keys(data).map(function (k) {
+        return /*#__PURE__*/React.createElement("tr", {
+          key: k
+        }, Array.isArray(data) ? /*#__PURE__*/React.createElement("td", {
+          className: classnames(styles.obj, styles.order, styles.index),
           onClick: highlight,
           clickable: "true",
-          key: key
-        },
-        React__default.createElement(
-          "span",
-          {
-            className: classnames(styles[typeof value === "undefined" ? "undefined" : _typeof(value)], matchesText(value, searchText) && styles["search-highlight"])
-          },
-          String(value)
-        )
-      );
+          rowhighlight: "true"
+        }, parseInt(k) + 1) : /*#__PURE__*/React.createElement("td", {
+          className: classnames(styles.obj, styles.key, styles.name),
+          onClick: highlight,
+          clickable: "true"
+        }, /*#__PURE__*/React.createElement("span", {
+          className: matchesText(k, searchText) ? styles["search-highlight"] : undefined
+        }, k.replace(/_/g, " "))), allObjects ? Object.entries(data[k]).map(function (_ref) {
+          var _ref2 = _slicedToArray(_ref, 2),
+            kk = _ref2[0],
+            v = _ref2[1];
+          return renderValue(kk, v, level, defaultExpandKeyTree && defaultExpandKeyTree[k], [parseInt(k), kk]);
+        }) : renderValue(k, data[k], level, defaultExpandKeyTree, [k]));
+      })));
     };
-
-    var renderTable = function renderTable(data, level, allObjects, keys) {
-      return React__default.createElement(
-        "table",
-        { className: styles["json-grid-table"] },
-        allObjects && React__default.createElement(
-          React.Fragment,
-          null,
-          React__default.createElement(
-            "colgroup",
-            null,
-            React__default.createElement("col", null),
-            keys.map(function (k) {
-              return React__default.createElement("col", { key: k });
-            })
-          ),
-          React__default.createElement(
-            "thead",
-            null,
-            React__default.createElement(
-              "tr",
-              null,
-              React__default.createElement(
-                "th",
-                {
-                  className: classnames(styles.obj, styles.order),
-                  clickable: "true"
-                },
-                React__default.createElement(
-                  "svg",
-                  {
-                    className: styles.glyphicon,
-                    clickable: "true",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    height: "1em",
-                    viewBox: "0 0 448 512"
-                  },
-                  React__default.createElement("path", {
-                    fill: "currentColor",
-                    d: "M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"
-                  })
-                )
-              ),
-              keys.map(function (k) {
-                return React__default.createElement(
-                  "th",
-                  {
-                    className: classnames(styles.obj, styles.order, styles.name),
-                    key: k,
-                    onClick: highlight,
-                    clickable: "true",
-                    colhighlight: "true"
-                  },
-                  React__default.createElement(
-                    "span",
-                    {
-                      className: matchesText(k, searchText) ? styles["search-highlight"] : undefined
-                    },
-                    k.replace(/_/g, " ")
-                  )
-                );
-              })
-            )
-          )
-        ),
-        React__default.createElement(
-          "tbody",
-          null,
-          Object.keys(data).map(function (k) {
-            return React__default.createElement(
-              "tr",
-              { key: k },
-              Array.isArray(data) ? React__default.createElement(
-                "td",
-                {
-                  className: classnames(styles.obj, styles.order, styles.index),
-                  onClick: highlight,
-                  clickable: "true",
-                  rowhighlight: "true"
-                },
-                parseInt(k) + 1
-              ) : React__default.createElement(
-                "td",
-                {
-                  className: classnames(styles.obj, styles.key, styles.name),
-                  onClick: highlight,
-                  clickable: "true"
-                },
-                React__default.createElement(
-                  "span",
-                  {
-                    className: matchesText(k, searchText) ? styles["search-highlight"] : undefined
-                  },
-                  k.replace(/_/g, " ")
-                )
-              ),
-              allObjects ? Object.entries(data[k]).map(function (_ref) {
-                var _ref2 = slicedToArray(_ref, 2),
-                    kk = _ref2[0],
-                    v = _ref2[1];
-
-                return renderValue(kk, v, level, defaultExpandKeyTree && defaultExpandKeyTree[k], [parseInt(k), kk]);
-              }) : renderValue(k, data[k], level, defaultExpandKeyTree, [k])
-            );
-          })
-        )
-      );
-    };
-
     var _checkAllObjects = checkAllObjects(data),
-        allObjects = _checkAllObjects.allObjects,
-        keys = _checkAllObjects.keys;
-
+      allObjects = _checkAllObjects.allObjects,
+      keys = _checkAllObjects.keys;
     if (level !== 0) {
       var _useState = React.useState(level <= defaultExpandDepth || defaultExpandKeyTree),
-          _useState2 = slicedToArray(_useState, 2),
-          open = _useState2[0],
-          setOpen = _useState2[1];
-
-      return React__default.createElement(
-        "div",
-        { className: styles.box },
-        React__default.createElement(
-          "span",
-          {
-            className: styles.plusminus,
-            onClick: function onClick() {
-              return setOpen(!open);
-            },
-            clickable: "true"
-          },
-          open ? "[-]" : "[+]"
-        ),
-        React__default.createElement(
-          "span",
-          { className: styles.title },
-          dataKey,
-          "\xA0",
-          Array.isArray(data) ? "[" + data.length + "]" : "{}"
-        ),
-        open && renderTable(data, level, allObjects, keys)
-      );
+        _useState2 = _slicedToArray(_useState, 2),
+        open = _useState2[0],
+        setOpen = _useState2[1];
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.box
+      }, /*#__PURE__*/React.createElement("span", {
+        className: styles.plusminus,
+        onClick: function onClick() {
+          return setOpen(!open);
+        },
+        clickable: "true"
+      }, open ? "[-]" : "[+]"), /*#__PURE__*/React.createElement("span", {
+        className: styles.title
+      }, dataKey, "\xA0", Array.isArray(data) ? "[".concat(data.length, "]") : "{}"), open && renderTable(data, level, allObjects, keys));
     }
-
     return renderTable(data, level, allObjects, keys);
@@ -1170,23 +708,20 @@ };
     var data = _ref.data,
-        _ref$defaultExpandDep = _ref.defaultExpandDepth,
-        defaultExpandDepth = _ref$defaultExpandDep === undefined ? 0 : _ref$defaultExpandDep,
-        _ref$defaultExpandKey = _ref.defaultExpandKeyTree,
-        defaultExpandKeyTree = _ref$defaultExpandKey === undefined ? {} : _ref$defaultExpandKey,
-        _ref$onSelect = _ref.onSelect,
-        onSelect = _ref$onSelect === undefined ? function (keyPath) {} : _ref$onSelect,
-        _ref$highlightSelecte = _ref.highlightSelected,
-        highlightSelected = _ref$highlightSelecte === undefined ? true : _ref$highlightSelecte,
-        searchText = _ref.searchText,
-        _ref$theme = _ref.theme,
-        theme = _ref$theme === undefined ? "default" : _ref$theme,
-        _ref$customTheme = _ref.customTheme,
-        customTheme = _ref$customTheme === undefined ? {} : _ref$customTheme;
-
+      _ref$defaultExpandDep = _ref.defaultExpandDepth,
+      defaultExpandDepth = _ref$defaultExpandDep === void 0 ? 0 : _ref$defaultExpandDep,
+      _ref$defaultExpandKey = _ref.defaultExpandKeyTree,
+      defaultExpandKeyTree = _ref$defaultExpandKey === void 0 ? {} : _ref$defaultExpandKey,
+      _ref$onSelect = _ref.onSelect,
+      onSelect = _ref$onSelect === void 0 ? function (keyPath) {} : _ref$onSelect,
+      _ref$highlightSelecte = _ref.highlightSelected,
+      highlightSelected = _ref$highlightSelecte === void 0 ? true : _ref$highlightSelecte,
+      searchText = _ref.searchText,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? "default" : _ref$theme,
+      _ref$customTheme = _ref.customTheme,
+      customTheme = _ref$customTheme === void 0 ? {} : _ref$customTheme;
     var _useState = React.useState(null),
-        _useState2 = slicedToArray(_useState, 2),
-        highlightedElement = _useState2[0],
-        setHighlightedElement = _useState2[1];
-
+      _useState2 = _slicedToArray(_useState, 2),
+      highlightedElement = _useState2[0],
+      setHighlightedElement = _useState2[1];
     var wrapperRef = React.useRef(null);
-
     React.useEffect(function () {
@@ -1199,36 +734,28 @@ function handleClickOutside(event) {
       }
-      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("click", handleClickOutside);
       return function () {
-        return document.removeEventListener("mousedown", handleClickOutside);
+        return document.removeEventListener("click", handleClickOutside);
       };
     }, [highlightedElement]);
-
     if (!data) {
       throw new Error("JSONGrid: data prop cannot be null or undefined");
     }
-
-    if (!Array.isArray(data) && (typeof data === "undefined" ? "undefined" : _typeof(data)) !== "object") {
+    if (!Array.isArray(data) && _typeof(data) !== "object") {
       throw new Error("JSONGrid: data prop must be an object or an array");
     }
-
     if (defaultExpandDepth < 0) {
       throw new Error("JSONGrid: defaultExpandDepth prop must not be a negative number");
     }
-
     if (onSelect && typeof onSelect !== "function") {
       throw new Error("JSONGrid: onSelect prop must be a function");
     }
-
     if (highlightSelected && typeof highlightSelected !== "boolean") {
       throw new Error("JSONGrid: highlightSelected prop must be a boolean");
     }
-
     if (searchText && typeof searchText !== "string") {
       throw new Error("JSONGrid: searchText prop must be a string");
     }
-
     if (!themes[theme]) {
-      throw new Error("JSONGrid: theme prop must be one of " + Object.keys(themes).join(", "));
+      throw new Error("JSONGrid: theme prop must be one of ".concat(Object.keys(themes).join(", ")));
     }
-
     var themeDetails = themes[theme];
@@ -1250,21 +777,19 @@ var themeStyles = {
     };
-
     var mergedKeyTree = searchText ? mergeKeyTrees(defaultExpandKeyTree, lookup(data, searchText)) : defaultExpandKeyTree;
-
-    return React__default.createElement(
-      "div",
-      { className: styles["json-grid-container"], style: themeStyles, ref: wrapperRef },
-      React__default.createElement(NestedJSONGrid, {
-        level: 0,
-        keyPath: [],
-        data: data,
-        highlightedElement: highlightedElement,
-        highlightSelected: highlightSelected,
-        onSelect: onSelect,
-        setHighlightedElement: setHighlightedElement,
-        defaultExpandDepth: defaultExpandDepth,
-        defaultExpandKeyTree: mergedKeyTree,
-        searchText: searchText
-      })
-    );
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles["json-grid-container"],
+      style: themeStyles,
+      ref: wrapperRef
+    }, /*#__PURE__*/React.createElement(_NestedJSONGrid, {
+      level: 0,
+      keyPath: [],
+      data: data,
+      highlightedElement: highlightedElement,
+      highlightSelected: highlightSelected,
+      onSelect: onSelect,
+      setHighlightedElement: setHighlightedElement,
+      defaultExpandDepth: defaultExpandDepth,
+      defaultExpandKeyTree: mergedKeyTree,
+      searchText: searchText
+    }));
   };
@@ -1274,3 +799,3 @@
 
-})));
+}));
 //# sourceMappingURL=index.umd.js.map

package.json

 {
   "name": "@redheadphone/react-json-grid",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "React Component that converts JSON to nested grid tables.",
@@ -13,3 +13,2 @@ "author": "Huzaifa Khilawala",
     "table",
-    "visualization",
     "data",
@@ -20,6 +19,3 @@ "display",
     "component",
-    "tree",
-    "layout",
     "library",
-    "render",
     "ui"
@@ -35,5 +31,5 @@ ],
     "demo": "cd demo && npm run start",
-    "test": "cross-env CI=1 react-scripts test --env=jsdom",
-    "build": "rollup -c",
-    "dev": "rollup -c -w",
+    "test": "jest --silent",
+    "build": "rollup -c --bundleConfigAsCjs",
+    "dev": "rollup -c -w --bundleConfigAsCjs",
     "prepublishOnly": "npm run build"
@@ -50,9 +46,14 @@ },
   "devDependencies": {
-    "babel-core": "^6.26.3",
+    "@babel/plugin-external-helpers": "^7.24.7",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-react": "^7.24.7",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^25.0.4",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-url": "^8.0.1",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^12.1.5",
+    "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^8.2.5",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
-    "cross-env": "^5.1.4",
+    "babel-jest": "^29.7.0",
     "eslint": "^5.0.1",
@@ -66,14 +67,10 @@ "eslint-config-standard": "^11.0.0",
     "eslint-plugin-standard": "^3.1.0",
-    "gh-pages": "^1.2.0",
+    "jest": "^29.7.0",
+    "jest-css-modules-transform": "^4.4.2",
+    "jest-environment-jsdom": "^29.7.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "react-scripts": "^1.1.4",
-    "rollup": "^0.64.1",
-    "rollup-plugin-babel": "^3.0.7",
-    "rollup-plugin-commonjs": "^9.1.3",
-    "rollup-plugin-node-resolve": "^3.3.0",
-    "rollup-plugin-peer-deps-external": "^2.2.0",
-    "rollup-plugin-postcss": "^1.6.2",
-    "rollup-plugin-url": "^1.4.0"
+    "rollup": "^4.21.0",
+    "rollup-plugin-postcss": "^4.0.2"
   }
 }

README.md

 # React JSON Grid
 
 <p align="center">
-  <img src="https://raw.githubusercontent.com/RedHeadphone/react-json-grid/master/assets/images/github-banner.png">
+  <img src="images/github-banner.png">
 </p>
@@ -19,7 +19,7 @@
 
-- **Ease of Integration**: Seamlessly incorporate the component into your React applications without any hassle and no dependencies.
-- **Nested JSON Support**: Handle deeply nested JSON structures with ease, creating nested structured grid tables that are collapsible and expandible.
-- **Highlight Magic**: Select and highlight specific cells, rows, or columns in the grid tables to enhance the user interface and facilitate interaction.
-- **Search Spotlight**: Enhance the visibility of your JSON data with a search feature that effectively highlights cells matching with the search text.
-- **Customizable Styling**: Tailor the appearance of the grid to match your application's design using custom theme.
+- 🛠️ **Ease of Integration**: Seamlessly incorporate the component into your React applications without any hassle and no dependencies.
+- 🗂️ **Nested JSON Support**: Handle deeply nested JSON structures with ease, creating nested structured grid tables that are collapsible and expandible.
+- ✨ **Highlight Magic**: Select and highlight specific cells, rows, or columns in the grid tables to enhance the user interface and facilitate interaction.
+- 🔍 **Search Spotlight**: Enhance the visibility of your JSON data with a search feature that effectively highlights cells matching with the search text.
+- 🎨 **Customizable Styling**: Tailor the appearance of the grid to match your application's design using custom theme.
 
@@ -38,2 +38,16 @@ ## Install
 
+### CDN
+
+You can also include the library directly via CDN:
+
+```html
+<script src="https://unpkg.com/@redheadphone/react-json-grid@{version}/dist/index.umd.js"></script>
+```
+
+Replace {version} with the desired version number, like 0.6.0. Then, use the component as follows:
+
+```jsx
+const JSONGrid = window['react-json-grid'];
+```
+
 ## Usage
@@ -44,37 +58,30 @@
 ```jsx
-import React, { Component } from 'react'
 import JSONGrid from '@redheadphone/react-json-grid'
 
-class Example extends Component {
-  render () {
-    const data = {
-      "id": "0001",
-      "type": "donut",
-      "name": "Cake",
-      "ppu": 0.55,
-      "batters":
-        {
-          "batter":
-            [
-              { "id": "1001", "type": "Regular" },
-              { "id": "1002", "type": "Chocolate" },
-              { "id": "1003", "type": "Blueberry" },
-              { "id": "1004", "type": "Devil's Food" }
-            ]
-        },
-      "topping":
-        [
-          { "id": "5001", "type": "None" },
-          { "id": "5002", "type": "Glazed" },
-          { "id": "5005", "type": "Sugar" },
-          { "id": "5007", "type": "Powdered Sugar" },
-          { "id": "5006", "type": "Chocolate with Sprinkles" },
-          { "id": "5003", "type": "Chocolate" },
-          { "id": "5004", "type": "Maple" }
-        ]
-    }
-    return (
-      <JSONGrid data={data}/>
-    )
+function ExampleComponent() {
+  const data = {
+    "id": "0001",
+    "type": "donut",
+    "name": "Cake",
+    "ppu": 0.55,
+    "batters": {
+      "batter": [
+        { "id": "1001", "type": "Regular" },
+        { "id": "1002", "type": "Chocolate" },
+        { "id": "1003", "type": "Blueberry" },
+        { "id": "1004", "type": "Devil's Food" }
+      ]
+    },
+    "topping": [
+      { "id": "5001", "type": "None" },
+      { "id": "5002", "type": "Glazed" },
+      { "id": "5005", "type": "Sugar" },
+      { "id": "5007", "type": "Powdered Sugar" },
+      { "id": "5006", "type": "Chocolate with Sprinkles" },
+      { "id": "5003", "type": "Chocolate" },
+      { "id": "5004", "type": "Maple" }
+    ]
   }
+
+  return <JSONGrid data={data} />
 }
@@ -103,52 +110,27 @@ ```
 - default
-- radical
-- cobalt
 - dracula
 - monokai
-- solarizedLight
-- solarizedDark
-- materialDark
-- oceanicNext
+- oceanicPark
 - panda
 - gruvboxMaterial
-- merko
 - tokyoNight
 - remedy
-- minimal
-- auroraX
 - atlanticNight
-- aTouchOfLilac
-- glassUI
-- fireflyPro
-- reUI
+- defaultLight
+- defaultLight2
 - slime
-- signedDarkPro
-- ariakeDark
-- snazzyLight
 - spacegray
-- celestial
 - blueberryDark
-- bear
-- oneDarkPro
 - nord
-- palenight
 - nightOwl
-- andromeda
-- horizon
-- cobalt2
-- atomOneLight
-- ysgrifennwr
-- notepadPlusPlusRemixed
-- githubLight
+- oneMonokai
+- cobaltNext
 - shadesOfPurple
-- synthWave
 - codeBlue
-- cyberpunk
-- laserWave
-- hipster
-- wildberry
-- qiita
 - softEra
+- atomMaterial
+- evaDark
+- moonLight
 
-Note: Pass one of above themes as a string in the theme prop. You can contribute your custom theme in [themes.js](src/themes.js)
+Note: Pass one of above themes as a string in the theme prop. You can contribute your custom theme in [themes.js](src/themes.js) if you want.
 
@@ -175,8 +157,4 @@ ### Custom Theme Object Format
 
-Note: All field values need to be strings that are accepted by CSS for color. All fields are not mandatory.
+Note: These fields override original theme fields, so all fields are not mandatory. All field values need to be strings that are accepted by CSS for color.
 
-## Contributing
-
-Please kindly follow [CONTRIBUTING.md](CONTRIBUTING.md) to get started.
-
 ## Acknowledgements
@@ -183,0 +161,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

261860

decreased by-15.25%

Dev dependency count

27

increased by3.85%

Lines of code

2298

decreased by-36.33%

Number of lines in readme file

158

decreased by-12.22%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes