@datalayer/icons-react 1.0.9 → 1.0.10

package/data1/esm/DatalayerCourseIcon.js

@@ -11,31 +11,44 @@ function _DlIconInverseColormode({
   children
 }) {
   const ref = React.useRef(null);
-  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
   React.useLayoutEffect(() => {
-    if (typeof mode === "string") {
-      setResolved(mode);
-      return;
-    }
     if (typeof document === "undefined") return;
-    let cur = null;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
     let el = ref.current && ref.current.parentElement;
-    while (el) {
-      const m = el.getAttribute && el.getAttribute("data-color-mode");
-      if (m) { cur = m; break; }
+    while (el && (!currentMode || !lightTheme || !darkTheme)) {
+      if (el.getAttribute) {
+        currentMode = currentMode || el.getAttribute("data-color-mode");
+        lightTheme = lightTheme || el.getAttribute("data-light-theme");
+        darkTheme = darkTheme || el.getAttribute("data-dark-theme");
+      }
       el = el.parentElement;
     }
-    if (!cur || cur === "auto") {
-      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    if (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
     }
-    setResolved(cur === "dark" ? "light" : "dark");
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
   }, [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 }
+    "data-color-mode": appearance.mode || "light",
+    "data-light-theme": appearance.lightTheme || undefined,
+    "data-dark-theme": appearance.darkTheme || undefined,
+    style: {
+      display: "inline-flex",
+      lineHeight: 0,
+      color: "var(--fgColor-default, var(--color-fg-default, currentColor))"
+    }
   }, children);
 }
 
@@ -50,674 +63,22 @@ function DatalayerCourseIcon({
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
-    id: "prefix__svg2",
-    width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     viewBox: "0 0 93.75 93.75",
-    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
+    fill: (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
   }, props, {
+    "data-datalayer-icon": "",
     style: props && props.color != null ? Object.assign({}, props.style, {
-      "--datalayer-icon-fg": props.color
+      "--datalayer-icon-color": props.color,
+      color: props.color
     }) : props && props.style
-  }), title ? /*#__PURE__*/React.createElement("title", {
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("defs", {
-    id: "prefix__defs4"
-  }, /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__Arrow1Lend",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path5982",
-    fill: colored ? '#000' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#000",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M-10 0l-4 4L0 0l-14-4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__marker26280",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path26282",
-    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#221f1d",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M10 0l4-4L0 0l14 4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__marker26280-3",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path26282-9",
-    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#221f1d",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M10 0l4-4L0 0l14 4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__Arrow1Send",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path6174",
-    fill: colored ? '#fff' : 'white',
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#fff",
-    strokeOpacity: 1,
-    strokeWidth: ".2pt",
-    d: "M-1.2 0l-1 1 3.5-1-3.5-1z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__marker26280-3-3",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path26282-9-5",
-    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#221f1d",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M10 0l4-4L0 0l14 4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__marker4371",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path4373",
-    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#221f1d",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M10 0l4-4L0 0l14 4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__marker26280-2",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path26282-91",
-    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#221f1d",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M10 0l4-4L0 0l14 4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__marker26280-3-6",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path26282-9-0",
-    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#221f1d",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M10 0l4-4L0 0l14 4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__Arrow1Send-6",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path6174-2",
-    fill: colored ? '#fff' : 'white',
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#fff",
-    strokeOpacity: 1,
-    strokeWidth: ".2pt",
-    d: "M-1.2 0l-1 1 3.5-1-3.5-1z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__marker26280-3-3-9",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path26282-9-5-2",
-    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#221f1d",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M10 0l4-4L0 0l14 4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__marker4371-0",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path4373-2",
-    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#221f1d",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M10 0l4-4L0 0l14 4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__marker26280-6",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path26282-1",
-    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#221f1d",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M10 0l4-4L0 0l14 4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__marker26280-3-8",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path26282-9-4",
-    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#221f1d",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M10 0l4-4L0 0l14 4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__Arrow1Send-5",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path6174-0",
-    fill: colored ? '#fff' : 'white',
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#fff",
-    strokeOpacity: 1,
-    strokeWidth: ".2pt",
-    d: "M-1.2 0l-1 1 3.5-1-3.5-1z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__marker26280-3-3-6",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path26282-9-5-3",
-    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#221f1d",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M10 0l4-4L0 0l14 4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__marker4371-2",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path4373-0",
-    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#221f1d",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M10 0l4-4L0 0l14 4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__marker26280-3-3-3",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path26282-9-5-6",
-    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#221f1d",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M10 0l4-4L0 0l14 4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__marker4437",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path4439",
-    fill: colored ? '#221f1d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#221f1d",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M10 0l4-4L0 0l14 4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__marker6271",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path6273",
-    fill: colored ? '#000' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#000",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M10 0l4-4L0 0l14 4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__Arrow1Lstart",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path4240",
-    fill: colored ? '#000' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#000",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M10 0l4-4L0 0l14 4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__Arrow1Lend-6",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path5982-0",
-    fill: colored ? '#000' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#000",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M-10 0l-4 4L0 0l-14-4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__Arrow1Lend-6-2",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path5982-0-6",
-    fill: colored ? '#000' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#000",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M-10 0l-4 4L0 0l-14-4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__Arrow1Lend-6-8",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path5982-0-7",
-    fill: colored ? '#000' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#000",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M-10 0l-4 4L0 0l-14-4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__Arrow1Lend-6-8-0",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path5982-0-7-2",
-    fill: colored ? '#000' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#000",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M-10 0l-4 4L0 0l-14-4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__Arrow1Lend-6-2-7",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path5982-0-6-5",
-    fill: colored ? '#000' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#000",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M-10 0l-4 4L0 0l-14-4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__Arrow1Lend-6-2-2",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path5982-0-6-2",
-    fill: colored ? '#000' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#000",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M-10 0l-4 4L0 0l-14-4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__Arrow1Mend",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path3877",
-    fillRule: "evenodd",
-    stroke: "#000",
-    strokeWidth: ".4pt",
-    d: "M-4 0l-2 2 7-2-7-2z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__marker1333",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path1331",
-    fill: colored ? '#fff' : 'white',
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#2ecc71",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M10 0l4-4L0 0l14 4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__marker1281",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path1279",
-    fill: colored ? '#fff' : 'white',
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#2ecc71",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M10 0l4-4L0 0l14 4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__marker1235",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path1233",
-    fill: colored ? '#fff' : 'white',
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#2ecc71",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M10 0l4-4L0 0l14 4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__marker1195",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path1193",
-    fill: colored ? '#fff' : 'white',
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#2ecc71",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M10 0l4-4L0 0l14 4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__marker1161",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path1159",
-    fill: colored ? '#fff' : 'white',
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#2ecc71",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M10 0l4-4L0 0l14 4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__marker1133",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path1131",
-    fill: colored ? '#fff' : 'white',
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#2ecc71",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M10 0l4-4L0 0l14 4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__marker1111",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path1109",
-    fill: colored ? '#fff' : 'white',
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#2ecc71",
-    strokeOpacity: 1,
-    strokeWidth: ".8pt",
-    d: "M10 0l4-4L0 0l14 4z"
-  })), /*#__PURE__*/React.createElement("marker", {
-    id: "prefix__Arrow1Lstart-9",
-    orient: "auto",
-    overflow: "visible",
-    refX: 0,
-    refY: 0
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path833",
-    fill: colored ? '#fff' : 'white',
-    fillOpacity: 1,
-    fillRule: "evenodd",
-    stroke: "#16a085",
-    strokeOpacity: 0,
-    strokeWidth: ".8pt",
-    d: "M10 0l4-4L0 0l14 4z"
-  })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__SVGID_6_",
-    x1: -5652.281,
-    x2: -5635.271,
-    y1: 55.275,
-    y2: 55.275,
-    gradientTransform: "translate(5162.52 263.829)",
-    gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop68",
-    offset: 0,
-    stopColor: "#03594a"
-  }), /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop70",
-    offset: 1,
-    stopColor: "#128570"
-  })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__SVGID_5_",
-    x1: -5691.965,
-    x2: -5652.281,
-    y1: 55.275,
-    y2: 55.275,
-    gradientTransform: "translate(5162.52 263.829)",
-    gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop61",
-    offset: 0,
-    stopColor: "#28b899"
-  }), /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop63",
-    offset: 1,
-    stopColor: "#1b937b"
-  })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__SVGID_4_",
-    x1: -5663.62,
-    x2: -5635.273,
-    y1: 34.014,
-    y2: 34.014,
-    gradientTransform: "translate(5162.52 263.829)",
-    gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop54",
-    offset: 0,
-    stopColor: "#03594a"
-  }), /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop56",
-    offset: 1,
-    stopColor: "#128570"
-  })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__SVGID_3_",
-    x1: -5691.965,
-    x2: -5663.62,
-    y1: 34.015,
-    y2: 34.015,
-    gradientTransform: "translate(5162.52 263.829)",
-    gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop47",
-    offset: 0,
-    stopColor: "#28b899"
-  }), /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop49",
-    offset: 1,
-    stopColor: "#1b937b"
-  })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__SVGID_2_",
-    x1: -5674.958,
-    x2: -5635.273,
-    y1: 12.756,
-    y2: 12.756,
-    gradientTransform: "translate(5162.52 263.829)",
-    gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop40",
-    offset: 0,
-    stopColor: "#03594a"
-  }), /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop42",
-    offset: 1,
-    stopColor: "#128570"
-  })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__SVGID_1_",
-    x1: -5691.965,
-    x2: -5674.958,
-    y1: 12.756,
-    y2: 12.756,
-    gradientTransform: "translate(5162.52 263.829)",
-    gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop33",
-    offset: 0,
-    stopColor: "#28b899"
-  }), /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop35",
-    offset: 1,
-    stopColor: "#1b937b"
-  })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__SVGID_3_-2",
-    x1: 390.517,
-    x2: 517.711,
-    y1: 77.335,
-    y2: 179.93,
-    gradientTransform: "translate(-337.439 -6.817)",
-    gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop52",
-    offset: 0,
-    stopColor: "#326de6"
-  }), /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop54-5",
-    offset: 1,
-    stopColor: "#10ffc6"
-  })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__SVGID_3_-4",
-    x1: 390.517,
-    x2: 517.711,
-    y1: 77.335,
-    y2: 179.93,
-    gradientTransform: "translate(11.05 11)",
-    gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop52-7",
-    offset: 0,
-    stopColor: "#326de6"
-  }), /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop54-4",
-    offset: 1,
-    stopColor: "#10ffc6"
-  })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__SVGID_2_-4",
+  }, title) : null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+    id: "prefix__a",
     x1: 238.286,
     x2: 347.551,
     y1: 127.509,
@@ -725,647 +86,56 @@ function DatalayerCourseIcon({
     gradientTransform: "translate(-195.606 -31.557)",
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop45",
-    offset: 0,
-    stopColor: "#326de6"
-  }), /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop47-3",
-    offset: 1,
-    stopColor: "#10ffc6"
-  })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__SVGID_1_-0",
-    x1: 122.188,
-    x2: 204.137,
-    y1: 127.509,
-    y2: 127.509,
-    gradientTransform: "translate(11.05 11)",
-    gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop38",
     offset: 0,
     stopColor: "#326de6"
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop40-7",
     offset: 1,
     stopColor: "#10ffc6"
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__linearGradient6886",
-    x1: 238.286,
-    x2: 347.551,
-    y1: 127.509,
-    y2: 127.509,
-    gradientTransform: "translate(-195.606 -31.557)",
-    gradientUnits: "userSpaceOnUse",
-    xlinkHref: "#prefix__SVGID_2_-4"
-  }), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__linearGradient6888",
-    x1: 238.286,
-    x2: 347.551,
-    y1: 127.509,
-    y2: 127.509,
-    gradientTransform: "translate(-195.606 -31.557)",
-    gradientUnits: "userSpaceOnUse",
-    xlinkHref: "#prefix__SVGID_2_-4"
-  }), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__linearGradient6890",
-    x1: 238.286,
-    x2: 347.551,
-    y1: 127.509,
-    y2: 127.509,
-    gradientTransform: "translate(-195.606 -31.557)",
-    gradientUnits: "userSpaceOnUse",
-    xlinkHref: "#prefix__SVGID_2_-4"
-  }), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__linearGradient12512"
+    id: "prefix__b"
   }, /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop12513",
     offset: 0,
-    stopColor: "#fff",
-    stopOpacity: 1
+    stopColor: "#fff"
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop12517",
     offset: 0.5,
     stopColor: "#fff520",
     stopOpacity: 0.891
   }), /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop12514",
     offset: 1,
     stopColor: "#fff300",
     stopOpacity: 0
-  })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__linearGradient2094"
-  }, /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop2096",
-    offset: 0,
-    stopColor: "#d6e3f0",
-    stopOpacity: 1
-  }), /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop2098",
-    offset: 1,
-    stopColor: "#95b1cf",
-    stopOpacity: 1
-  })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__linearGradient2803"
-  }, /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop2805",
-    offset: 0,
-    stopColor: "#fff",
-    stopOpacity: 1
-  }), /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop2807",
-    offset: 1,
-    stopColor: "#cbcbcb",
-    stopOpacity: 1
-  })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__linearGradient2795"
-  }, /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop2797",
-    offset: 0,
-    stopColor: "#000",
-    stopOpacity: 0.069
-  }), /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop2799",
-    offset: 1,
-    stopColor: "#fff",
-    stopOpacity: 1
-  })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__SVGID_1_-6",
-    x1: -5691.965,
-    x2: -5674.958,
-    y1: 12.756,
-    y2: 12.756,
-    gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop33-75",
-    offset: 0,
-    stopColor: "#28b899"
-  }), /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop35-3",
-    offset: 1,
-    stopColor: "#1b937b"
-  })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__SVGID_2_-5",
-    x1: -5674.958,
-    x2: -5635.273,
-    y1: 12.756,
-    y2: 12.756,
-    gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop40-6",
-    offset: 0,
-    stopColor: "#03594a"
-  }), /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop42-2",
-    offset: 1,
-    stopColor: "#128570"
-  })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__SVGID_3_-9",
-    x1: -5691.965,
-    x2: -5663.62,
-    y1: 34.015,
-    y2: 34.015,
-    gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop47-1",
-    offset: 0,
-    stopColor: "#28b899"
-  }), /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop49-2",
-    offset: 1,
-    stopColor: "#1b937b"
-  })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__SVGID_4_-7",
-    x1: -5663.62,
-    x2: -5635.273,
-    y1: 34.014,
-    y2: 34.014,
-    gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop54-0",
-    offset: 0,
-    stopColor: "#03594a"
-  }), /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop56-9",
-    offset: 1,
-    stopColor: "#128570"
-  })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__SVGID_5_-3",
-    x1: -5691.965,
-    x2: -5652.281,
-    y1: 55.275,
-    y2: 55.275,
-    gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop61-6",
-    offset: 0,
-    stopColor: "#28b899"
-  }), /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop63-0",
-    offset: 1,
-    stopColor: "#1b937b"
-  })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__SVGID_6_-6",
-    x1: -5652.281,
-    x2: -5635.271,
-    y1: 55.275,
-    y2: 55.275,
-    gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop68-2",
-    offset: 0,
-    stopColor: "#03594a"
-  }), /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop70-6",
-    offset: 1,
-    stopColor: "#128570"
-  })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__SVGID_6_-5",
-    x1: -5652.281,
-    x2: -5635.271,
-    y1: 55.275,
-    y2: 55.275,
-    gradientTransform: "translate(-176.352 -361.643)",
-    gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop68-1",
-    offset: 0,
-    stopColor: "#03594a"
-  }), /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop70-0",
-    offset: 1,
-    stopColor: "#128570"
-  })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__SVGID_5_-7",
-    x1: -5691.965,
-    x2: -5652.281,
-    y1: 55.275,
-    y2: 55.275,
-    gradientTransform: "translate(-176.352 -361.643)",
-    gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop61-8",
-    offset: 0,
-    stopColor: "#28b899"
-  }), /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop63-8",
-    offset: 1,
-    stopColor: "#1b937b"
-  })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__SVGID_4_-6",
-    x1: -5663.62,
-    x2: -5635.273,
-    y1: 34.014,
-    y2: 34.014,
-    gradientTransform: "translate(-176.352 -361.643)",
-    gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop54-3",
-    offset: 0,
-    stopColor: "#03594a"
-  }), /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop56-5",
-    offset: 1,
-    stopColor: "#128570"
-  })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__SVGID_3_-7",
-    x1: -5691.965,
-    x2: -5663.62,
-    y1: 34.015,
-    y2: 34.015,
-    gradientTransform: "translate(-176.352 -361.643)",
-    gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop47-3-1",
-    offset: 0,
-    stopColor: "#28b899"
-  }), /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop49-0",
-    offset: 1,
-    stopColor: "#1b937b"
-  })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__SVGID_2_-3",
-    x1: -5674.958,
-    x2: -5635.273,
-    y1: 12.756,
-    y2: 12.756,
-    gradientTransform: "translate(-176.352 -361.643)",
-    gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop40-2",
-    offset: 0,
-    stopColor: "#03594a"
-  }), /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop42-3",
-    offset: 1,
-    stopColor: "#128570"
-  })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "prefix__SVGID_1_-3",
-    x1: -5691.965,
-    x2: -5674.958,
-    y1: 12.756,
-    y2: 12.756,
-    gradientTransform: "translate(-176.352 -361.643)",
-    gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop33-7",
-    offset: 0,
-    stopColor: "#28b899"
-  }), /*#__PURE__*/React.createElement("stop", {
-    id: "prefix__stop35-6",
-    offset: 1,
-    stopColor: "#1b937b"
-  })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "prefix__clipPath5328",
-    clipPathUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("ellipse", {
-    id: "prefix__ellipse5330",
-    cx: 363.605,
-    cy: 272.598,
-    fill: colored ? '#ddecef' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "nonzero",
-    stroke: "none",
-    strokeDasharray: "none",
-    strokeDashoffset: 0,
-    strokeLinejoin: "round",
-    strokeMiterlimit: 4,
-    strokeOpacity: 1,
-    strokeWidth: 3.339,
-    opacity: 1,
-    rx: 209.94,
-    ry: 209.833
-  })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "prefix__clipPath5125",
-    clipPathUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("rect", {
-    id: "prefix__rect5127",
-    width: 150.409,
-    height: 133.628,
-    x: 379.131,
-    y: 155.501,
-    fill: colored ? '#649a9c' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "nonzero",
-    stroke: "none",
-    strokeDasharray: "none",
-    strokeDashoffset: 0,
-    strokeLinejoin: "round",
-    strokeMiterlimit: 4,
-    strokeOpacity: 1,
-    strokeWidth: 2,
-    opacity: 1,
-    ry: 0.826
-  })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "prefix__clipPath5328-3",
-    clipPathUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("ellipse", {
-    id: "prefix__ellipse5330-6",
-    cx: 363.605,
-    cy: 272.598,
-    fill: colored ? '#ddecef' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "nonzero",
-    stroke: "none",
-    strokeDasharray: "none",
-    strokeDashoffset: 0,
-    strokeLinejoin: "round",
-    strokeMiterlimit: 4,
-    strokeOpacity: 1,
-    strokeWidth: 3.339,
-    opacity: 1,
-    rx: 209.94,
-    ry: 209.833
-  })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "prefix__clipPath5125-7",
-    clipPathUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("rect", {
-    id: "prefix__rect5127-5",
-    width: 150.409,
-    height: 133.628,
-    x: 379.131,
-    y: 155.501,
-    fill: colored ? '#649a9c' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "nonzero",
-    stroke: "none",
-    strokeDasharray: "none",
-    strokeDashoffset: 0,
-    strokeLinejoin: "round",
-    strokeMiterlimit: 4,
-    strokeOpacity: 1,
-    strokeWidth: 2,
-    opacity: 1,
-    ry: 0.826
-  })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "prefix__clipPath5328-7",
-    clipPathUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("ellipse", {
-    id: "prefix__ellipse5330-0",
-    cx: 363.605,
-    cy: 272.598,
-    fill: colored ? '#ddecef' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "nonzero",
-    stroke: "none",
-    strokeDasharray: "none",
-    strokeDashoffset: 0,
-    strokeLinejoin: "round",
-    strokeMiterlimit: 4,
-    strokeOpacity: 1,
-    strokeWidth: 3.339,
-    opacity: 1,
-    rx: 209.94,
-    ry: 209.833
-  })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "prefix__clipPath5125-9",
-    clipPathUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("rect", {
-    id: "prefix__rect5127-3",
-    width: 150.409,
-    height: 133.628,
-    x: 379.131,
-    y: 155.501,
-    fill: colored ? '#649a9c' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "nonzero",
-    stroke: "none",
-    strokeDasharray: "none",
-    strokeDashoffset: 0,
-    strokeLinejoin: "round",
-    strokeMiterlimit: 4,
-    strokeOpacity: 1,
-    strokeWidth: 2,
-    opacity: 1,
-    ry: 0.826
-  })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "prefix__clipPath5328-3-6",
-    clipPathUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("ellipse", {
-    id: "prefix__ellipse5330-6-1",
-    cx: 363.605,
-    cy: 272.598,
-    fill: colored ? '#ddecef' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "nonzero",
-    stroke: "none",
-    strokeDasharray: "none",
-    strokeDashoffset: 0,
-    strokeLinejoin: "round",
-    strokeMiterlimit: 4,
-    strokeOpacity: 1,
-    strokeWidth: 3.339,
-    opacity: 1,
-    rx: 209.94,
-    ry: 209.833
-  })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "prefix__clipPath5125-7-8",
-    clipPathUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("rect", {
-    id: "prefix__rect5127-5-7",
-    width: 150.409,
-    height: 133.628,
-    x: 379.131,
-    y: 155.501,
-    fill: colored ? '#649a9c' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "nonzero",
-    stroke: "none",
-    strokeDasharray: "none",
-    strokeDashoffset: 0,
-    strokeLinejoin: "round",
-    strokeMiterlimit: 4,
-    strokeOpacity: 1,
-    strokeWidth: 2,
-    opacity: 1,
-    ry: 0.826
-  })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "prefix__clipPath5328-31",
-    clipPathUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("ellipse", {
-    id: "prefix__ellipse5330-9",
-    cx: 363.605,
-    cy: 272.598,
-    fill: colored ? '#ddecef' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "nonzero",
-    stroke: "none",
-    strokeDasharray: "none",
-    strokeDashoffset: 0,
-    strokeLinejoin: "round",
-    strokeMiterlimit: 4,
-    strokeOpacity: 1,
-    strokeWidth: 3.339,
-    opacity: 1,
-    rx: 209.94,
-    ry: 209.833
-  })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "prefix__clipPath5125-4",
-    clipPathUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("rect", {
-    id: "prefix__rect5127-7",
-    width: 150.409,
-    height: 133.628,
-    x: 379.131,
-    y: 155.501,
-    fill: colored ? '#649a9c' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "nonzero",
-    stroke: "none",
-    strokeDasharray: "none",
-    strokeDashoffset: 0,
-    strokeLinejoin: "round",
-    strokeMiterlimit: 4,
-    strokeOpacity: 1,
-    strokeWidth: 2,
-    opacity: 1,
-    ry: 0.826
-  })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "prefix__clipPath5328-3-3",
-    clipPathUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("ellipse", {
-    id: "prefix__ellipse5330-6-6",
-    cx: 363.605,
-    cy: 272.598,
-    fill: colored ? '#ddecef' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "nonzero",
-    stroke: "none",
-    strokeDasharray: "none",
-    strokeDashoffset: 0,
-    strokeLinejoin: "round",
-    strokeMiterlimit: 4,
-    strokeOpacity: 1,
-    strokeWidth: 3.339,
-    opacity: 1,
-    rx: 209.94,
-    ry: 209.833
-  })), /*#__PURE__*/React.createElement("clipPath", {
-    id: "prefix__clipPath5125-7-1",
-    clipPathUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("rect", {
-    id: "prefix__rect5127-5-0",
-    width: 150.409,
-    height: 133.628,
-    x: 379.131,
-    y: 155.501,
-    fill: colored ? '#649a9c' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "nonzero",
-    stroke: "none",
-    strokeDasharray: "none",
-    strokeDashoffset: 0,
-    strokeLinejoin: "round",
-    strokeMiterlimit: 4,
-    strokeOpacity: 1,
-    strokeWidth: 2,
-    opacity: 1,
-    ry: 0.826
-  })), /*#__PURE__*/React.createElement("radialGradient", {
-    id: "prefix__radialGradient278",
-    cx: 55,
-    cy: 125,
-    r: 14.375,
-    fx: 55,
-    fy: 125,
-    gradientUnits: "userSpaceOnUse",
-    xlinkHref: "#prefix__linearGradient12512"
-  })), /*#__PURE__*/React.createElement("g", {
-    id: "prefix__layer1",
-    transform: "translate(0 -609.449)"
-  }, /*#__PURE__*/React.createElement("g", {
-    id: "prefix__g4219",
-    transform: "translate(0 609.449) scale(.3125)"
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path4195",
-    fill: colored ? '#666' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    fillRule: "nonzero",
-    stroke: "none",
-    strokeDasharray: "none",
-    strokeDashoffset: 0,
-    strokeLinejoin: "round",
-    strokeMiterlimit: 4,
-    strokeOpacity: 1,
-    strokeWidth: 1,
-    d: "M5.75 108.866A150 150 0 01191.09 5.738a150 150 0 01103.184 185.31 150 150 0 01-185.278 103.239A150 150 0 015.701 109.04",
-    opacity: 1
+  }))), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#666" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 45%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 89%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 45%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 89%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 45%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M1.797 34.02A46.875 46.875 0 0159.716 1.794a46.875 46.875 0 0132.245 57.91 46.875 46.875 0 01-57.9 32.262 46.875 46.875 0 01-32.28-57.89"
   }), /*#__PURE__*/React.createElement("g", {
-    id: "prefix__g4217",
-    transform: "translate(-506.358 -112.711) scale(.57736)"
-  }, /*#__PURE__*/React.createElement("g", {
-    id: "prefix__g4215",
-    fillRule: "evenodd",
-    strokeLinecap: "butt",
-    strokeLinejoin: "miter",
-    strokeOpacity: 1,
-    strokeWidth: 1,
-    transform: "matrix(.87334 0 0 1 804.659 -247.933)"
+    fillRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path4197",
-    fill: colored ? '#f8ffff' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    stroke: "none",
-    d: "M207.226 644.842l-39.373 30.926c79.198 4.054 152.58 22.437 211.351 76.815 69.633-65.678 140.555-67.395 211.351-75.319l-38.92-31.923c-71.433-1.93-131.136 15.788-172.43 64.345-54.122-64.709-125.331-63.426-171.979-64.844z"
-  }), /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path4199",
-    fill: colored ? '#f2f2f2' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    stroke: "none",
-    d: "M187.766 676.267l-27.607 29.429c39.132-3.885 56.095-17.075 157.948 2.494-41.898-20.578-87.238-29.95-130.341-31.923z"
+    fill: colored ? "#f8ffff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M19.597 36.39l-6.204 5.58c12.48.731 24.042 4.048 33.303 13.86 10.972-11.85 22.147-12.16 33.303-13.59l-6.133-5.76c-11.256-.348-20.663 2.849-27.17 11.61-8.528-11.676-19.749-11.444-27.1-11.7z"
   }), /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path4201",
-    fill: colored ? '#d9d9d9' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    stroke: "none",
-    d: "M159.706 705.197l-7.24 36.412c83.267-30.396 134.41-7.89 229 10.974-40.364-37.182-48.363-35.125-66.527-45.39-51.744-11.51-103.489-16.328-155.233-1.996z"
+    fill: colored ? "#f2f2f2" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 84%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 50%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 84%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 50%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 84%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M16.53 42.06l-4.35 5.31c6.166-.701 8.84-3.081 24.889.45-6.602-3.713-13.747-5.404-20.539-5.76z"
   }), /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path4203",
-    fill: colored ? '#f2f2f2' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    stroke: "none",
-    d: "M407.264 728.142c52.526-22.333 107.123-33.435 195.51-10.974l-30.321-39.405c-90.411 7.475-130.996 25.766-165.19 50.379z"
+    fill: colored ? "#d9d9d9" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 74%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M12.109 47.28l-1.14 6.57c13.12-5.485 21.178-1.424 36.083 1.98-6.36-6.71-7.62-6.338-10.483-8.19-8.153-2.077-16.307-2.946-24.46-.36z"
   }), /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path4205",
-    fill: colored ? '#d9d9d9' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    stroke: "none",
-    d: "M602.26 715.55l5.166 25.56c-85.619-27.806-133.945-11.102-227.644 9.977 40.365-37.182 40.67-29.638 63.36-36.912 52.49-14.935 107.008-16.278 159.119 1.376z"
+    fill: colored ? "#f2f2f2" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 84%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 50%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 84%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 50%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 84%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M51.117 51.42c8.277-4.03 16.88-6.033 30.807-1.98l-4.777-7.11c-14.247 1.349-20.642 4.649-26.03 9.09z"
   }), /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path4207",
-    fill: colored ? '#bfbfbf' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    stroke: "none",
-    d: "M153.37 741.11l-8.599 10.475 235.338 1.497C274.7 721.764 201.8 715.448 153.37 741.11z"
+    fill: colored ? "#d9d9d9" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 74%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M81.843 49.148l.814 4.611c-13.49-5.017-21.106-2.003-35.87 1.8 6.36-6.708 6.408-5.347 9.984-6.66 8.27-2.694 16.861-2.936 25.072.249z"
   }), /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path4209",
-    fill: colored ? '#bfbfbf' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    stroke: "none",
-    d: "M617.71 751.087l-238.506.997c72.172-19.307 151.787-45.345 228.55-10.973z"
+    fill: colored ? "#bfbfbf" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 65%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 69%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 65%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 69%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 65%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M11.11 53.76l-1.354 1.89 37.082.27c-16.61-5.651-28.096-6.79-35.727-2.16zM84.278 55.56l-37.582.18c11.372-3.484 23.917-8.182 36.013-1.98z"
   }), /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path4211",
-    fill: colored ? '#ccc' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    stroke: "#d9d9d9",
-    d: "M379.158 709.533l.706 41.619"
+    fill: colored ? "#ccc" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 69%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 65%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 69%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 65%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 69%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    stroke: colored ? "#d9d9d9" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 74%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M379.158 709.533l.706 41.619",
+    transform: "matrix(.15757 0 0 .18043 -13.056 -79.955)"
   }), /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path4213",
-    fill: colored ? '#00a600' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillOpacity: 1,
-    stroke: "none",
-    d: "M145.224 750.588l-9.051 10.475h488.325l-7.693-9.976c-86.165 1.19-213.049.748-213.049.748-4.112-12.853-11.93-8.239-23.933-3.695-11.619-5.697-20.384-8.706-24.153 4.817z"
-  }))))), /*#__PURE__*/React.createElement("style", {
-    id: "style754",
-    type: "text/css"
-  }), /*#__PURE__*/React.createElement("style", {
-    id: "style379",
-    type: "text/css"
-  }), /*#__PURE__*/React.createElement("style", {
-    id: "style5786",
-    type: "text/css"
-  }), /*#__PURE__*/React.createElement("style", {
-    id: "style5544",
-    type: "text/css"
-  }));
+    fill: colored ? "#00a600" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 59%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M9.827 55.47l-1.426 1.89h76.946l-1.212-1.8c-13.577.214-33.57.134-33.57.134-.648-2.319-1.88-1.486-3.772-.666-1.83-1.028-3.212-1.571-3.806.869z"
+  })));
   if (!colormode) return _svgEl;
   return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
     mode: typeof colormode === "string" ? colormode : undefined