@datalayer/icons-react 1.0.9 → 1.0.10

package/data1/esm/DatalayerPaperIcon.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 DatalayerPaperIcon({
 }, 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,587 +86,30 @@ function DatalayerPaperIcon({
     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__g1816",
-    fillOpacity: 1,
-    strokeDasharray: "none",
-    strokeMiterlimit: 4,
-    transform: "translate(-201.711 -17.56) scale(.9375)"
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path1223",
-    fill: colored ? '#666' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    fillRule: "nonzero",
-    stroke: "none",
-    strokeDashoffset: 0,
-    strokeLinejoin: "round",
-    strokeOpacity: 1,
-    strokeWidth: 0.333,
-    d: "M217.076 705.098a50 50 0 0161.78-34.376 50 50 0 0134.394 61.77 50 50 0 01-61.76 34.413 50 50 0 01-34.43-61.75",
-    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.798 34.02A46.875 46.875 0 0159.716 1.793a46.875 46.875 0 0132.245 57.91 46.875 46.875 0 01-57.9 32.261 46.875 46.875 0 01-32.278-57.89"
   }), /*#__PURE__*/React.createElement("path", {
-    id: "prefix__rect1261",
-    fill: colored ? '#fff' : 'white',
-    strokeWidth: 5.496,
-    d: "M243.369 693.387h43.58v50.844h-43.58z"
-  }))), /*#__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 ? "#fff" : (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: "M26.447 23.041h40.857v47.667H26.447z"
   }));
   if (!colormode) return _svgEl;
   return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {