@datalayer/icons-react 1.0.7 → 1.0.9

package/data1/PydataIcon.js

@@ -6,768 +6,770 @@ const sizeMap = {
   "large": 64
 };
 
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  React.useLayoutEffect(() => {
+    if (typeof mode === "string") {
+      setResolved(mode);
+      return;
+    }
+    if (typeof document === "undefined") return;
+    let cur = null;
+    let el = ref.current && ref.current.parentElement;
+    while (el) {
+      const m = el.getAttribute && el.getAttribute("data-color-mode");
+      if (m) { cur = m; break; }
+      el = el.parentElement;
+    }
+    if (!cur || cur === "auto") {
+      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setResolved(cur === "dark" ? "light" : "dark");
+  }, [mode]);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    "data-color-mode": resolved || "light",
+    "data-light-theme": "light",
+    "data-dark-theme": "dark",
+    style: { display: "inline-flex", lineHeight: 0 }
+  }, children);
+}
+
 function PydataIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormode,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     fillRule: "evenodd",
     strokeLinejoin: "round",
-    strokeMiterlimit: 2,
     height: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-    className: "align-center",
+    strokeMiterlimit: 2,
+    className: "prefix__align-center",
     clipRule: "evenodd",
     viewBox: "0 0 120 220",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#fff' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#fff') ? 'white' : 'currentColor'),
+    fill: colored ? '#fff' : 'white',
     stroke: "#fff",
     d: "M0 0h50v50H0z",
     transform: "translate(60 10) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.2,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(60 10) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(60 20) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(60 30) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.2,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(60 40) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(60 50) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(70 15.774) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(70 25.774) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.2,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(70 35.774) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.2,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(70 45.774) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.8,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(70 55.774) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.2,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(80 21.547) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.8,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(80 31.547) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(80 41.547) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(80 51.547) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(80 61.547) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.8,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(90 27.32) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.2,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(90 37.32) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.8,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(90 47.32) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(90 57.32) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(90 67.32) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(100 33.094) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(100 43.094) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.2,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(100 53.094) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.8,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(100 63.094) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(100 73.094) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#fff' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#fff') ? 'white' : 'currentColor'),
+    fill: colored ? '#fff' : 'white',
     stroke: "#fff",
     d: "M0 0h50v50H0z",
     transform: "matrix(1 .57735 -1 .57735 60 60)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "matrix(1 .57735 -1 .57735 60 60)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "matrix(1 .57735 -1 .57735 50 65.774)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "matrix(1 .57735 -1 .57735 40 71.547)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "matrix(1 .57735 -1 .57735 30 77.32)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "matrix(1 .57735 -1 .57735 20 83.094)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "matrix(1 .57735 -1 .57735 70 65.774)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.2,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "matrix(1 .57735 -1 .57735 60 71.547)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "matrix(1 .57735 -1 .57735 50 77.32)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.8,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "matrix(1 .57735 -1 .57735 40 83.094)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.8,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "matrix(1 .57735 -1 .57735 30 88.868)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.2,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "matrix(1 .57735 -1 .57735 80 71.547)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.8,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "matrix(1 .57735 -1 .57735 70 77.32)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "matrix(1 .57735 -1 .57735 60 83.094)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "matrix(1 .57735 -1 .57735 50 88.868)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "matrix(1 .57735 -1 .57735 40 94.641)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "matrix(1 .57735 -1 .57735 90 77.32)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "matrix(1 .57735 -1 .57735 80 83.094)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "matrix(1 .57735 -1 .57735 70 88.868)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "matrix(1 .57735 -1 .57735 60 94.641)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "matrix(1 .57735 -1 .57735 50 100.415)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.2,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "matrix(1 .57735 -1 .57735 100 83.094)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
+    fill: colored ? '#f18d3b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "matrix(1 .57735 -1 .57735 90 88.868)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "matrix(1 .57735 -1 .57735 80 94.641)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "matrix(1 .57735 -1 .57735 70 100.415)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f18d3b' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f18d3b') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "matrix(1 .57735 -1 .57735 60 106.188)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#fff' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#fff') ? 'white' : 'currentColor'),
+    fill: colored ? '#fff' : 'white',
     stroke: "#fff",
     d: "M0 0h50v50H0z",
     transform: "translate(10 88.868) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(10 88.868) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.8,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(10 98.868) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(10 108.868) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(10 118.868) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.2,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(10 128.868) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(20 94.641) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.8,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(20 104.641) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(20 114.641) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.8,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(20 124.641) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.8,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(20 134.641) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(30 100.415) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.2,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(30 110.415) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.8,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(30 120.415) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.2,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(30 130.415) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(30 140.415) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.8,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(40 106.188) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.8,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(40 116.188) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.8,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(40 126.188) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(40 136.188) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.8,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(40 146.188) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(50 111.962) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(50 121.962) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(50 131.962) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(50 141.962) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.2,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(50 151.962) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#fff' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#fff') ? 'white' : 'currentColor'),
+    fill: colored ? '#fff' : 'white',
     stroke: "#fff",
     d: "M0 0h50v50H0z",
     transform: "translate(10 138.868) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(10 138.868) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(10 148.868) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.2,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(10 158.868) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(10 168.868) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(10 178.868) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(20 144.641) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.8,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(20 154.641) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(20 164.641) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.2,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(20 174.641) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(20 184.641) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(30 150.415) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.2,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(30 160.415) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(30 170.415) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.8,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(30 180.415) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.8,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(30 190.415) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(40 156.188) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(40 166.188) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.2,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(40 176.188) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.8,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(40 186.188) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.2,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(40 196.188) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(50 161.962) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(50 171.962) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.8,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(50 181.962) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(50 191.962) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#459bb5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#459bb5') ? 'white' : 'currentColor'),
+    fill: colored ? '#459bb5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.8,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(50 201.962) skewY(30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#fff' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#fff') ? 'white' : 'currentColor'),
+    fill: colored ? '#fff' : 'white',
     stroke: "#fff",
     d: "M0 0h50v50H0z",
     transform: "translate(60 117.735) skewY(-30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#677c83' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#677c83') ? 'white' : 'currentColor'),
+    fill: colored ? '#677c83' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.2,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(60 117.735) skewY(-30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#677c83' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#677c83') ? 'white' : 'currentColor'),
+    fill: colored ? '#677c83' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.8,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(60 127.735) skewY(-30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#677c83' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#677c83') ? 'white' : 'currentColor'),
+    fill: colored ? '#677c83' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(60 137.735) skewY(-30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#677c83' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#677c83') ? 'white' : 'currentColor'),
+    fill: colored ? '#677c83' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.2,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(60 147.735) skewY(-30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#677c83' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#677c83') ? 'white' : 'currentColor'),
+    fill: colored ? '#677c83' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(60 157.735) skewY(-30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#677c83' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#677c83') ? 'white' : 'currentColor'),
+    fill: colored ? '#677c83' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.8,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(70 111.962) skewY(-30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#677c83' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#677c83') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(70 121.962) skewY(-30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#677c83' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#677c83') ? 'white' : 'currentColor'),
+    fill: colored ? '#677c83' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(70 131.962) skewY(-30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#677c83' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#677c83') ? 'white' : 'currentColor'),
+    fill: colored ? '#677c83' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.8,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(70 141.962) skewY(-30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#677c83' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#677c83') ? 'white' : 'currentColor'),
+    fill: colored ? '#677c83' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(70 151.962) skewY(-30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#677c83' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#677c83') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(80 106.188) skewY(-30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#677c83' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#677c83') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(80 116.188) skewY(-30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#677c83' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#677c83') ? 'white' : 'currentColor'),
+    fill: colored ? '#677c83' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(80 126.188) skewY(-30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#677c83' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#677c83') ? 'white' : 'currentColor'),
+    fill: colored ? '#677c83' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 0.8,
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(80 136.188) skewY(-30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#677c83' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#677c83') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(80 146.188) skewY(-30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#677c83' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#677c83') ? 'white' : 'currentColor'),
+    fill: colored ? '#677c83' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(90 100.415) skewY(-30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#677c83' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#677c83') ? 'white' : 'currentColor'),
+    fill: colored ? '#677c83' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(90 110.415) skewY(-30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#677c83' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#677c83') ? 'white' : 'currentColor'),
+    fill: colored ? '#677c83' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(90 120.415) skewY(-30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#677c83' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#677c83') ? 'white' : 'currentColor'),
+    fill: colored ? '#677c83' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(90 130.415) skewY(-30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#677c83' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#677c83') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(90 140.415) skewY(-30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#677c83' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#677c83') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(100 94.641) skewY(-30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#677c83' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#677c83') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(100 104.641) skewY(-30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#677c83' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#677c83') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(100 114.641) skewY(-30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#677c83' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#677c83') ? 'white' : 'currentColor'),
-    fillOpacity: 0,
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(100 124.641) skewY(-30)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#677c83' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#677c83') ? 'white' : 'currentColor'),
+    fill: colored ? '#677c83' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     d: "M0 0h10v10H0z",
     transform: "translate(100 134.641) skewY(-30)"
   }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(PydataIcon);
 module.exports = ForwardRef;