@datalayer/icons-react 1.0.6 → 1.0.8

package/data1/esm/DatalayerDashboardIcon.js

@@ -6,36 +6,75 @@ 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 DatalayerDashboardIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormoded,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
-    id: "svg2",
-    viewBox: "0 0 93.75 93.75",
+    id: "prefix__svg2",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
+    viewBox: "0 0 93.75 93.75",
+    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("defs", {
-    id: "defs4"
+    id: "prefix__defs4"
   }, /*#__PURE__*/React.createElement("marker", {
-    id: "Arrow1Lend",
+    id: "prefix__Arrow1Lend",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path5982",
-    fill: colored ? '#000' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#000') ? 'white' : 'currentColor'),
+    id: "prefix__path5982",
+    fill: colored ? '#000' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#000",
@@ -43,14 +82,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M-10 0l-4 4L0 0l-14-4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "marker26280",
+    id: "prefix__marker26280",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path26282",
-    fill: colored ? '#221f1d' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#221f1d') ? 'white' : 'currentColor'),
+    id: "prefix__path26282",
+    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#221f1d",
@@ -58,14 +97,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M10 0l4-4L0 0l14 4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "marker26280-3",
+    id: "prefix__marker26280-3",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path26282-9",
-    fill: colored ? '#221f1d' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#221f1d') ? 'white' : 'currentColor'),
+    id: "prefix__path26282-9",
+    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#221f1d",
@@ -73,14 +112,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M10 0l4-4L0 0l14 4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "Arrow1Send",
+    id: "prefix__Arrow1Send",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path6174",
-    fill: colored ? '#fff' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#fff') ? 'white' : 'currentColor'),
+    id: "prefix__path6174",
+    fill: colored ? '#fff' : 'white',
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#fff",
@@ -88,14 +127,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".2pt",
     d: "M-1.2 0l-1 1 3.5-1-3.5-1z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "marker26280-3-3",
+    id: "prefix__marker26280-3-3",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path26282-9-5",
-    fill: colored ? '#221f1d' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#221f1d') ? 'white' : 'currentColor'),
+    id: "prefix__path26282-9-5",
+    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#221f1d",
@@ -103,14 +142,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M10 0l4-4L0 0l14 4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "marker4371",
+    id: "prefix__marker4371",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path4373",
-    fill: colored ? '#221f1d' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#221f1d') ? 'white' : 'currentColor'),
+    id: "prefix__path4373",
+    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#221f1d",
@@ -118,14 +157,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M10 0l4-4L0 0l14 4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "marker26280-2",
+    id: "prefix__marker26280-2",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path26282-91",
-    fill: colored ? '#221f1d' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#221f1d') ? 'white' : 'currentColor'),
+    id: "prefix__path26282-91",
+    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#221f1d",
@@ -133,14 +172,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M10 0l4-4L0 0l14 4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "marker26280-3-6",
+    id: "prefix__marker26280-3-6",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path26282-9-0",
-    fill: colored ? '#221f1d' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#221f1d') ? 'white' : 'currentColor'),
+    id: "prefix__path26282-9-0",
+    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#221f1d",
@@ -148,14 +187,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M10 0l4-4L0 0l14 4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "Arrow1Send-6",
+    id: "prefix__Arrow1Send-6",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path6174-2",
-    fill: colored ? '#fff' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#fff') ? 'white' : 'currentColor'),
+    id: "prefix__path6174-2",
+    fill: colored ? '#fff' : 'white',
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#fff",
@@ -163,14 +202,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".2pt",
     d: "M-1.2 0l-1 1 3.5-1-3.5-1z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "marker26280-3-3-9",
+    id: "prefix__marker26280-3-3-9",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path26282-9-5-2",
-    fill: colored ? '#221f1d' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#221f1d') ? 'white' : 'currentColor'),
+    id: "prefix__path26282-9-5-2",
+    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#221f1d",
@@ -178,14 +217,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M10 0l4-4L0 0l14 4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "marker4371-0",
+    id: "prefix__marker4371-0",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path4373-2",
-    fill: colored ? '#221f1d' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#221f1d') ? 'white' : 'currentColor'),
+    id: "prefix__path4373-2",
+    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#221f1d",
@@ -193,14 +232,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M10 0l4-4L0 0l14 4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "marker26280-6",
+    id: "prefix__marker26280-6",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path26282-1",
-    fill: colored ? '#221f1d' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#221f1d') ? 'white' : 'currentColor'),
+    id: "prefix__path26282-1",
+    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#221f1d",
@@ -208,14 +247,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M10 0l4-4L0 0l14 4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "marker26280-3-8",
+    id: "prefix__marker26280-3-8",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path26282-9-4",
-    fill: colored ? '#221f1d' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#221f1d') ? 'white' : 'currentColor'),
+    id: "prefix__path26282-9-4",
+    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#221f1d",
@@ -223,14 +262,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M10 0l4-4L0 0l14 4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "Arrow1Send-5",
+    id: "prefix__Arrow1Send-5",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path6174-0",
-    fill: colored ? '#fff' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#fff') ? 'white' : 'currentColor'),
+    id: "prefix__path6174-0",
+    fill: colored ? '#fff' : 'white',
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#fff",
@@ -238,14 +277,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".2pt",
     d: "M-1.2 0l-1 1 3.5-1-3.5-1z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "marker26280-3-3-6",
+    id: "prefix__marker26280-3-3-6",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path26282-9-5-3",
-    fill: colored ? '#221f1d' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#221f1d') ? 'white' : 'currentColor'),
+    id: "prefix__path26282-9-5-3",
+    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#221f1d",
@@ -253,14 +292,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M10 0l4-4L0 0l14 4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "marker4371-2",
+    id: "prefix__marker4371-2",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path4373-0",
-    fill: colored ? '#221f1d' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#221f1d') ? 'white' : 'currentColor'),
+    id: "prefix__path4373-0",
+    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#221f1d",
@@ -268,14 +307,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M10 0l4-4L0 0l14 4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "marker26280-3-3-3",
+    id: "prefix__marker26280-3-3-3",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path26282-9-5-6",
-    fill: colored ? '#221f1d' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#221f1d') ? 'white' : 'currentColor'),
+    id: "prefix__path26282-9-5-6",
+    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#221f1d",
@@ -283,14 +322,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M10 0l4-4L0 0l14 4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "marker4437",
+    id: "prefix__marker4437",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path4439",
-    fill: colored ? '#221f1d' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#221f1d') ? 'white' : 'currentColor'),
+    id: "prefix__path4439",
+    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#221f1d",
@@ -298,14 +337,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M10 0l4-4L0 0l14 4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "marker6271",
+    id: "prefix__marker6271",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path6273",
-    fill: colored ? '#000' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#000') ? 'white' : 'currentColor'),
+    id: "prefix__path6273",
+    fill: colored ? '#000' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#000",
@@ -313,14 +352,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M10 0l4-4L0 0l14 4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "Arrow1Lstart",
+    id: "prefix__Arrow1Lstart",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path4240",
-    fill: colored ? '#000' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#000') ? 'white' : 'currentColor'),
+    id: "prefix__path4240",
+    fill: colored ? '#000' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#000",
@@ -328,14 +367,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M10 0l4-4L0 0l14 4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "Arrow1Lend-6",
+    id: "prefix__Arrow1Lend-6",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path5982-0",
-    fill: colored ? '#000' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#000') ? 'white' : 'currentColor'),
+    id: "prefix__path5982-0",
+    fill: colored ? '#000' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#000",
@@ -343,14 +382,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M-10 0l-4 4L0 0l-14-4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "Arrow1Lend-6-2",
+    id: "prefix__Arrow1Lend-6-2",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path5982-0-6",
-    fill: colored ? '#000' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#000') ? 'white' : 'currentColor'),
+    id: "prefix__path5982-0-6",
+    fill: colored ? '#000' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#000",
@@ -358,14 +397,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M-10 0l-4 4L0 0l-14-4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "Arrow1Lend-6-8",
+    id: "prefix__Arrow1Lend-6-8",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path5982-0-7",
-    fill: colored ? '#000' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#000') ? 'white' : 'currentColor'),
+    id: "prefix__path5982-0-7",
+    fill: colored ? '#000' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#000",
@@ -373,14 +412,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M-10 0l-4 4L0 0l-14-4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "Arrow1Lend-6-8-0",
+    id: "prefix__Arrow1Lend-6-8-0",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path5982-0-7-2",
-    fill: colored ? '#000' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#000') ? 'white' : 'currentColor'),
+    id: "prefix__path5982-0-7-2",
+    fill: colored ? '#000' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#000",
@@ -388,14 +427,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M-10 0l-4 4L0 0l-14-4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "Arrow1Lend-6-2-7",
+    id: "prefix__Arrow1Lend-6-2-7",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path5982-0-6-5",
-    fill: colored ? '#000' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#000') ? 'white' : 'currentColor'),
+    id: "prefix__path5982-0-6-5",
+    fill: colored ? '#000' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#000",
@@ -403,14 +442,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M-10 0l-4 4L0 0l-14-4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "Arrow1Lend-6-2-2",
+    id: "prefix__Arrow1Lend-6-2-2",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path5982-0-6-2",
-    fill: colored ? '#000' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#000') ? 'white' : 'currentColor'),
+    id: "prefix__path5982-0-6-2",
+    fill: colored ? '#000' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#000",
@@ -418,26 +457,26 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M-10 0l-4 4L0 0l-14-4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "Arrow1Mend",
+    id: "prefix__Arrow1Mend",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path3877",
+    id: "prefix__path3877",
     fillRule: "evenodd",
     stroke: "#000",
     strokeWidth: ".4pt",
     d: "M-4 0l-2 2 7-2-7-2z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "marker1333",
+    id: "prefix__marker1333",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path1331",
-    fill: colored ? '#fff' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#fff') ? 'white' : 'currentColor'),
+    id: "prefix__path1331",
+    fill: colored ? '#fff' : 'white',
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#2ecc71",
@@ -445,14 +484,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M10 0l4-4L0 0l14 4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "marker1281",
+    id: "prefix__marker1281",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path1279",
-    fill: colored ? '#fff' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#fff') ? 'white' : 'currentColor'),
+    id: "prefix__path1279",
+    fill: colored ? '#fff' : 'white',
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#2ecc71",
@@ -460,14 +499,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M10 0l4-4L0 0l14 4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "marker1235",
+    id: "prefix__marker1235",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path1233",
-    fill: colored ? '#fff' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#fff') ? 'white' : 'currentColor'),
+    id: "prefix__path1233",
+    fill: colored ? '#fff' : 'white',
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#2ecc71",
@@ -475,14 +514,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M10 0l4-4L0 0l14 4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "marker1195",
+    id: "prefix__marker1195",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path1193",
-    fill: colored ? '#fff' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#fff') ? 'white' : 'currentColor'),
+    id: "prefix__path1193",
+    fill: colored ? '#fff' : 'white',
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#2ecc71",
@@ -490,14 +529,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M10 0l4-4L0 0l14 4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "marker1161",
+    id: "prefix__marker1161",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path1159",
-    fill: colored ? '#fff' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#fff') ? 'white' : 'currentColor'),
+    id: "prefix__path1159",
+    fill: colored ? '#fff' : 'white',
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#2ecc71",
@@ -505,14 +544,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M10 0l4-4L0 0l14 4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "marker1133",
+    id: "prefix__marker1133",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path1131",
-    fill: colored ? '#fff' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#fff') ? 'white' : 'currentColor'),
+    id: "prefix__path1131",
+    fill: colored ? '#fff' : 'white',
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#2ecc71",
@@ -520,14 +559,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M10 0l4-4L0 0l14 4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "marker1111",
+    id: "prefix__marker1111",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path1109",
-    fill: colored ? '#fff' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#fff') ? 'white' : 'currentColor'),
+    id: "prefix__path1109",
+    fill: colored ? '#fff' : 'white',
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#2ecc71",
@@ -535,14 +574,14 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M10 0l4-4L0 0l14 4z"
   })), /*#__PURE__*/React.createElement("marker", {
-    id: "Arrow1Lstart-9",
+    id: "prefix__Arrow1Lstart-9",
     orient: "auto",
     overflow: "visible",
     refX: 0,
     refY: 0
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path833",
-    fill: colored ? '#fff' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#fff') ? 'white' : 'currentColor'),
+    id: "prefix__path833",
+    fill: colored ? '#fff' : 'white',
     fillOpacity: 1,
     fillRule: "evenodd",
     stroke: "#16a085",
@@ -550,7 +589,7 @@ function DatalayerDashboardIcon({
     strokeWidth: ".8pt",
     d: "M10 0l4-4L0 0l14 4z"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "SVGID_6_",
+    id: "prefix__SVGID_6_",
     x1: -5652.281,
     x2: -5635.271,
     y1: 55.275,
@@ -558,15 +597,15 @@ function DatalayerDashboardIcon({
     gradientTransform: "translate(5162.52 263.829)",
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop68",
+    id: "prefix__stop68",
     offset: 0,
     stopColor: "#03594a"
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop70",
+    id: "prefix__stop70",
     offset: 1,
     stopColor: "#128570"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "SVGID_5_",
+    id: "prefix__SVGID_5_",
     x1: -5691.965,
     x2: -5652.281,
     y1: 55.275,
@@ -574,15 +613,15 @@ function DatalayerDashboardIcon({
     gradientTransform: "translate(5162.52 263.829)",
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop61",
+    id: "prefix__stop61",
     offset: 0,
     stopColor: "#28b899"
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop63",
+    id: "prefix__stop63",
     offset: 1,
     stopColor: "#1b937b"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "SVGID_4_",
+    id: "prefix__SVGID_4_",
     x1: -5663.62,
     x2: -5635.273,
     y1: 34.014,
@@ -590,15 +629,15 @@ function DatalayerDashboardIcon({
     gradientTransform: "translate(5162.52 263.829)",
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop54",
+    id: "prefix__stop54",
     offset: 0,
     stopColor: "#03594a"
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop56",
+    id: "prefix__stop56",
     offset: 1,
     stopColor: "#128570"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "SVGID_3_",
+    id: "prefix__SVGID_3_",
     x1: -5691.965,
     x2: -5663.62,
     y1: 34.015,
@@ -606,15 +645,15 @@ function DatalayerDashboardIcon({
     gradientTransform: "translate(5162.52 263.829)",
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop47",
+    id: "prefix__stop47",
     offset: 0,
     stopColor: "#28b899"
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop49",
+    id: "prefix__stop49",
     offset: 1,
     stopColor: "#1b937b"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "SVGID_2_",
+    id: "prefix__SVGID_2_",
     x1: -5674.958,
     x2: -5635.273,
     y1: 12.756,
@@ -622,15 +661,15 @@ function DatalayerDashboardIcon({
     gradientTransform: "translate(5162.52 263.829)",
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop40",
+    id: "prefix__stop40",
     offset: 0,
     stopColor: "#03594a"
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop42",
+    id: "prefix__stop42",
     offset: 1,
     stopColor: "#128570"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "SVGID_1_",
+    id: "prefix__SVGID_1_",
     x1: -5691.965,
     x2: -5674.958,
     y1: 12.756,
@@ -638,15 +677,15 @@ function DatalayerDashboardIcon({
     gradientTransform: "translate(5162.52 263.829)",
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop33",
+    id: "prefix__stop33",
     offset: 0,
     stopColor: "#28b899"
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop35",
+    id: "prefix__stop35",
     offset: 1,
     stopColor: "#1b937b"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "SVGID_3_-2",
+    id: "prefix__SVGID_3_-2",
     x1: 390.517,
     x2: 517.711,
     y1: 77.335,
@@ -654,15 +693,15 @@ function DatalayerDashboardIcon({
     gradientTransform: "translate(-337.439 -6.817)",
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop52",
+    id: "prefix__stop52",
     offset: 0,
     stopColor: "#326de6"
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop54-5",
+    id: "prefix__stop54-5",
     offset: 1,
     stopColor: "#10ffc6"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "SVGID_3_-4",
+    id: "prefix__SVGID_3_-4",
     x1: 390.517,
     x2: 517.711,
     y1: 77.335,
@@ -670,15 +709,15 @@ function DatalayerDashboardIcon({
     gradientTransform: "translate(11.05 11)",
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop52-7",
+    id: "prefix__stop52-7",
     offset: 0,
     stopColor: "#326de6"
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop54-4",
+    id: "prefix__stop54-4",
     offset: 1,
     stopColor: "#10ffc6"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "SVGID_2_-4",
+    id: "prefix__SVGID_2_-4",
     x1: 238.286,
     x2: 347.551,
     y1: 127.509,
@@ -686,15 +725,15 @@ function DatalayerDashboardIcon({
     gradientTransform: "translate(-195.606 -31.557)",
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop45",
+    id: "prefix__stop45",
     offset: 0,
     stopColor: "#326de6"
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop47-3",
+    id: "prefix__stop47-3",
     offset: 1,
     stopColor: "#10ffc6"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "SVGID_1_-0",
+    id: "prefix__SVGID_1_-0",
     x1: 122.188,
     x2: 204.137,
     y1: 127.509,
@@ -702,185 +741,185 @@ function DatalayerDashboardIcon({
     gradientTransform: "translate(11.05 11)",
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop38",
+    id: "prefix__stop38",
     offset: 0,
     stopColor: "#326de6"
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop40-7",
+    id: "prefix__stop40-7",
     offset: 1,
     stopColor: "#10ffc6"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "linearGradient6886",
+    id: "prefix__linearGradient6886",
     x1: 238.286,
     x2: 347.551,
     y1: 127.509,
     y2: 127.509,
     gradientTransform: "translate(-195.606 -31.557)",
     gradientUnits: "userSpaceOnUse",
-    xlinkHref: "#SVGID_2_-4"
+    xlinkHref: "#prefix__SVGID_2_-4"
   }), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "linearGradient6888",
+    id: "prefix__linearGradient6888",
     x1: 238.286,
     x2: 347.551,
     y1: 127.509,
     y2: 127.509,
     gradientTransform: "translate(-195.606 -31.557)",
     gradientUnits: "userSpaceOnUse",
-    xlinkHref: "#SVGID_2_-4"
+    xlinkHref: "#prefix__SVGID_2_-4"
   }), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "linearGradient6890",
+    id: "prefix__linearGradient6890",
     x1: 238.286,
     x2: 347.551,
     y1: 127.509,
     y2: 127.509,
     gradientTransform: "translate(-195.606 -31.557)",
     gradientUnits: "userSpaceOnUse",
-    xlinkHref: "#SVGID_2_-4"
+    xlinkHref: "#prefix__SVGID_2_-4"
   }), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "linearGradient12512"
+    id: "prefix__linearGradient12512"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop12513",
+    id: "prefix__stop12513",
     offset: 0,
     stopColor: "#fff",
     stopOpacity: 1
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop12517",
+    id: "prefix__stop12517",
     offset: 0.5,
     stopColor: "#fff520",
     stopOpacity: 0.891
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop12514",
+    id: "prefix__stop12514",
     offset: 1,
     stopColor: "#fff300",
     stopOpacity: 0
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "linearGradient2094"
+    id: "prefix__linearGradient2094"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop2096",
+    id: "prefix__stop2096",
     offset: 0,
     stopColor: "#d6e3f0",
     stopOpacity: 1
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop2098",
+    id: "prefix__stop2098",
     offset: 1,
     stopColor: "#95b1cf",
     stopOpacity: 1
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "linearGradient2803"
+    id: "prefix__linearGradient2803"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop2805",
+    id: "prefix__stop2805",
     offset: 0,
     stopColor: "#fff",
     stopOpacity: 1
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop2807",
+    id: "prefix__stop2807",
     offset: 1,
     stopColor: "#cbcbcb",
     stopOpacity: 1
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "linearGradient2795"
+    id: "prefix__linearGradient2795"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop2797",
+    id: "prefix__stop2797",
     offset: 0,
     stopColor: "#000",
     stopOpacity: 0.069
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop2799",
+    id: "prefix__stop2799",
     offset: 1,
     stopColor: "#fff",
     stopOpacity: 1
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "SVGID_1_-6",
+    id: "prefix__SVGID_1_-6",
     x1: -5691.965,
     x2: -5674.958,
     y1: 12.756,
     y2: 12.756,
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop33-75",
+    id: "prefix__stop33-75",
     offset: 0,
     stopColor: "#28b899"
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop35-3",
+    id: "prefix__stop35-3",
     offset: 1,
     stopColor: "#1b937b"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "SVGID_2_-5",
+    id: "prefix__SVGID_2_-5",
     x1: -5674.958,
     x2: -5635.273,
     y1: 12.756,
     y2: 12.756,
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop40-6",
+    id: "prefix__stop40-6",
     offset: 0,
     stopColor: "#03594a"
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop42-2",
+    id: "prefix__stop42-2",
     offset: 1,
     stopColor: "#128570"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "SVGID_3_-9",
+    id: "prefix__SVGID_3_-9",
     x1: -5691.965,
     x2: -5663.62,
     y1: 34.015,
     y2: 34.015,
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop47-1",
+    id: "prefix__stop47-1",
     offset: 0,
     stopColor: "#28b899"
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop49-2",
+    id: "prefix__stop49-2",
     offset: 1,
     stopColor: "#1b937b"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "SVGID_4_-7",
+    id: "prefix__SVGID_4_-7",
     x1: -5663.62,
     x2: -5635.273,
     y1: 34.014,
     y2: 34.014,
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop54-0",
+    id: "prefix__stop54-0",
     offset: 0,
     stopColor: "#03594a"
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop56-9",
+    id: "prefix__stop56-9",
     offset: 1,
     stopColor: "#128570"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "SVGID_5_-3",
+    id: "prefix__SVGID_5_-3",
     x1: -5691.965,
     x2: -5652.281,
     y1: 55.275,
     y2: 55.275,
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop61-6",
+    id: "prefix__stop61-6",
     offset: 0,
     stopColor: "#28b899"
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop63-0",
+    id: "prefix__stop63-0",
     offset: 1,
     stopColor: "#1b937b"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "SVGID_6_-6",
+    id: "prefix__SVGID_6_-6",
     x1: -5652.281,
     x2: -5635.271,
     y1: 55.275,
     y2: 55.275,
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop68-2",
+    id: "prefix__stop68-2",
     offset: 0,
     stopColor: "#03594a"
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop70-6",
+    id: "prefix__stop70-6",
     offset: 1,
     stopColor: "#128570"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "SVGID_6_-5",
+    id: "prefix__SVGID_6_-5",
     x1: -5652.281,
     x2: -5635.271,
     y1: 55.275,
@@ -888,15 +927,15 @@ function DatalayerDashboardIcon({
     gradientTransform: "translate(-176.352 -361.643)",
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop68-1",
+    id: "prefix__stop68-1",
     offset: 0,
     stopColor: "#03594a"
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop70-0",
+    id: "prefix__stop70-0",
     offset: 1,
     stopColor: "#128570"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "SVGID_5_-7",
+    id: "prefix__SVGID_5_-7",
     x1: -5691.965,
     x2: -5652.281,
     y1: 55.275,
@@ -904,15 +943,15 @@ function DatalayerDashboardIcon({
     gradientTransform: "translate(-176.352 -361.643)",
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop61-8",
+    id: "prefix__stop61-8",
     offset: 0,
     stopColor: "#28b899"
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop63-8",
+    id: "prefix__stop63-8",
     offset: 1,
     stopColor: "#1b937b"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "SVGID_4_-6",
+    id: "prefix__SVGID_4_-6",
     x1: -5663.62,
     x2: -5635.273,
     y1: 34.014,
@@ -920,15 +959,15 @@ function DatalayerDashboardIcon({
     gradientTransform: "translate(-176.352 -361.643)",
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop54-3",
+    id: "prefix__stop54-3",
     offset: 0,
     stopColor: "#03594a"
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop56-5",
+    id: "prefix__stop56-5",
     offset: 1,
     stopColor: "#128570"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "SVGID_3_-7",
+    id: "prefix__SVGID_3_-7",
     x1: -5691.965,
     x2: -5663.62,
     y1: 34.015,
@@ -936,15 +975,15 @@ function DatalayerDashboardIcon({
     gradientTransform: "translate(-176.352 -361.643)",
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop47-3-1",
+    id: "prefix__stop47-3-1",
     offset: 0,
     stopColor: "#28b899"
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop49-0",
+    id: "prefix__stop49-0",
     offset: 1,
     stopColor: "#1b937b"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "SVGID_2_-3",
+    id: "prefix__SVGID_2_-3",
     x1: -5674.958,
     x2: -5635.273,
     y1: 12.756,
@@ -952,15 +991,15 @@ function DatalayerDashboardIcon({
     gradientTransform: "translate(-176.352 -361.643)",
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop40-2",
+    id: "prefix__stop40-2",
     offset: 0,
     stopColor: "#03594a"
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop42-3",
+    id: "prefix__stop42-3",
     offset: 1,
     stopColor: "#128570"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "SVGID_1_-3",
+    id: "prefix__SVGID_1_-3",
     x1: -5691.965,
     x2: -5674.958,
     y1: 12.756,
@@ -968,21 +1007,21 @@ function DatalayerDashboardIcon({
     gradientTransform: "translate(-176.352 -361.643)",
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "stop33-7",
+    id: "prefix__stop33-7",
     offset: 0,
     stopColor: "#28b899"
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "stop35-6",
+    id: "prefix__stop35-6",
     offset: 1,
     stopColor: "#1b937b"
   })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "clipPath5328",
+    id: "prefix__clipPath5328",
     clipPathUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("ellipse", {
-    id: "ellipse5330",
+    id: "prefix__ellipse5330",
     cx: 363.605,
     cy: 272.598,
-    fill: colored ? '#ddecef' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#ddecef') ? 'white' : 'currentColor'),
+    fill: colored ? '#ddecef' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "nonzero",
     stroke: "none",
@@ -996,15 +1035,15 @@ function DatalayerDashboardIcon({
     rx: 209.94,
     ry: 209.833
   })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "clipPath5125",
+    id: "prefix__clipPath5125",
     clipPathUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("rect", {
-    id: "rect5127",
+    id: "prefix__rect5127",
     width: 150.409,
     height: 133.628,
     x: 379.131,
     y: 155.501,
-    fill: colored ? '#649a9c' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#649a9c') ? 'white' : 'currentColor'),
+    fill: colored ? '#649a9c' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "nonzero",
     stroke: "none",
@@ -1017,13 +1056,13 @@ function DatalayerDashboardIcon({
     opacity: 1,
     ry: 0.826
   })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "clipPath5328-3",
+    id: "prefix__clipPath5328-3",
     clipPathUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("ellipse", {
-    id: "ellipse5330-6",
+    id: "prefix__ellipse5330-6",
     cx: 363.605,
     cy: 272.598,
-    fill: colored ? '#ddecef' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#ddecef') ? 'white' : 'currentColor'),
+    fill: colored ? '#ddecef' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "nonzero",
     stroke: "none",
@@ -1037,15 +1076,15 @@ function DatalayerDashboardIcon({
     rx: 209.94,
     ry: 209.833
   })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "clipPath5125-7",
+    id: "prefix__clipPath5125-7",
     clipPathUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("rect", {
-    id: "rect5127-5",
+    id: "prefix__rect5127-5",
     width: 150.409,
     height: 133.628,
     x: 379.131,
     y: 155.501,
-    fill: colored ? '#649a9c' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#649a9c') ? 'white' : 'currentColor'),
+    fill: colored ? '#649a9c' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "nonzero",
     stroke: "none",
@@ -1058,13 +1097,13 @@ function DatalayerDashboardIcon({
     opacity: 1,
     ry: 0.826
   })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "clipPath5328-7",
+    id: "prefix__clipPath5328-7",
     clipPathUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("ellipse", {
-    id: "ellipse5330-0",
+    id: "prefix__ellipse5330-0",
     cx: 363.605,
     cy: 272.598,
-    fill: colored ? '#ddecef' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#ddecef') ? 'white' : 'currentColor'),
+    fill: colored ? '#ddecef' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "nonzero",
     stroke: "none",
@@ -1078,15 +1117,15 @@ function DatalayerDashboardIcon({
     rx: 209.94,
     ry: 209.833
   })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "clipPath5125-9",
+    id: "prefix__clipPath5125-9",
     clipPathUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("rect", {
-    id: "rect5127-3",
+    id: "prefix__rect5127-3",
     width: 150.409,
     height: 133.628,
     x: 379.131,
     y: 155.501,
-    fill: colored ? '#649a9c' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#649a9c') ? 'white' : 'currentColor'),
+    fill: colored ? '#649a9c' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "nonzero",
     stroke: "none",
@@ -1099,13 +1138,13 @@ function DatalayerDashboardIcon({
     opacity: 1,
     ry: 0.826
   })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "clipPath5328-3-6",
+    id: "prefix__clipPath5328-3-6",
     clipPathUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("ellipse", {
-    id: "ellipse5330-6-1",
+    id: "prefix__ellipse5330-6-1",
     cx: 363.605,
     cy: 272.598,
-    fill: colored ? '#ddecef' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#ddecef') ? 'white' : 'currentColor'),
+    fill: colored ? '#ddecef' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "nonzero",
     stroke: "none",
@@ -1119,15 +1158,15 @@ function DatalayerDashboardIcon({
     rx: 209.94,
     ry: 209.833
   })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "clipPath5125-7-8",
+    id: "prefix__clipPath5125-7-8",
     clipPathUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("rect", {
-    id: "rect5127-5-7",
+    id: "prefix__rect5127-5-7",
     width: 150.409,
     height: 133.628,
     x: 379.131,
     y: 155.501,
-    fill: colored ? '#649a9c' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#649a9c') ? 'white' : 'currentColor'),
+    fill: colored ? '#649a9c' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "nonzero",
     stroke: "none",
@@ -1140,13 +1179,13 @@ function DatalayerDashboardIcon({
     opacity: 1,
     ry: 0.826
   })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "clipPath5328-31",
+    id: "prefix__clipPath5328-31",
     clipPathUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("ellipse", {
-    id: "ellipse5330-9",
+    id: "prefix__ellipse5330-9",
     cx: 363.605,
     cy: 272.598,
-    fill: colored ? '#ddecef' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#ddecef') ? 'white' : 'currentColor'),
+    fill: colored ? '#ddecef' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "nonzero",
     stroke: "none",
@@ -1160,15 +1199,15 @@ function DatalayerDashboardIcon({
     rx: 209.94,
     ry: 209.833
   })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "clipPath5125-4",
+    id: "prefix__clipPath5125-4",
     clipPathUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("rect", {
-    id: "rect5127-7",
+    id: "prefix__rect5127-7",
     width: 150.409,
     height: 133.628,
     x: 379.131,
     y: 155.501,
-    fill: colored ? '#649a9c' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#649a9c') ? 'white' : 'currentColor'),
+    fill: colored ? '#649a9c' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "nonzero",
     stroke: "none",
@@ -1181,13 +1220,13 @@ function DatalayerDashboardIcon({
     opacity: 1,
     ry: 0.826
   })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "clipPath5328-3-3",
+    id: "prefix__clipPath5328-3-3",
     clipPathUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("ellipse", {
-    id: "ellipse5330-6-6",
+    id: "prefix__ellipse5330-6-6",
     cx: 363.605,
     cy: 272.598,
-    fill: colored ? '#ddecef' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#ddecef') ? 'white' : 'currentColor'),
+    fill: colored ? '#ddecef' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "nonzero",
     stroke: "none",
@@ -1201,15 +1240,15 @@ function DatalayerDashboardIcon({
     rx: 209.94,
     ry: 209.833
   })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "clipPath5125-7-1",
+    id: "prefix__clipPath5125-7-1",
     clipPathUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("rect", {
-    id: "rect5127-5-0",
+    id: "prefix__rect5127-5-0",
     width: 150.409,
     height: 133.628,
     x: 379.131,
     y: 155.501,
-    fill: colored ? '#649a9c' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#649a9c') ? 'white' : 'currentColor'),
+    fill: colored ? '#649a9c' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     fillRule: "nonzero",
     stroke: "none",
@@ -1222,24 +1261,24 @@ function DatalayerDashboardIcon({
     opacity: 1,
     ry: 0.826
   })), /*#__PURE__*/React.createElement("radialGradient", {
-    id: "radialGradient278",
+    id: "prefix__radialGradient278",
     cx: 55,
     cy: 125,
     r: 14.375,
     fx: 55,
     fy: 125,
     gradientUnits: "userSpaceOnUse",
-    xlinkHref: "#linearGradient12512"
+    xlinkHref: "#prefix__linearGradient12512"
   })), /*#__PURE__*/React.createElement("g", {
-    id: "layer1",
+    id: "prefix__layer1",
     transform: "translate(0 -609.449)"
   }, /*#__PURE__*/React.createElement("rect", {
-    id: "rect1297",
+    id: "prefix__rect1297",
     width: 65.371,
     height: 84.256,
     x: 15.237,
     y: 614.866,
-    fill: colored ? '#c9ffff' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#c9ffff') ? 'white' : 'currentColor'),
+    fill: colored ? '#c9ffff' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillOpacity: 1,
     stroke: "#0c8502",
     strokeDasharray: "none",
@@ -1261,6 +1300,10 @@ function DatalayerDashboardIcon({
     id: "style5544",
     type: "text/css"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(DatalayerDashboardIcon);
 export default ForwardRef;