@datalayer/icons-react 1.0.9 → 1.0.10

package/data1/esm/PythonIcon.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);
 }
 
@@ -51,23 +64,25 @@ function PythonIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "-10 -10 131.161 132.389",
-    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))))")),
     height: 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("path", {
-    fill: colored ? '#306998' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#306998" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M54.919 0c-4.584.022-8.961.413-12.813 1.095C30.76 3.099 28.7 7.295 28.7 15.032v10.219h26.813v3.406H18.638c-7.793 0-14.616 4.684-16.75 13.594-2.462 10.213-2.571 16.586 0 27.25 1.905 7.938 6.457 13.594 14.25 13.594h9.218v-12.25c0-8.85 7.657-16.657 16.75-16.657h26.782c7.454 0 13.406-6.138 13.406-13.625v-25.53c0-7.267-6.13-12.726-13.406-13.938C64.282.328 59.502-.02 54.918 0zm-14.5 8.22c2.77 0 5.031 2.298 5.031 5.125 0 2.816-2.262 5.093-5.031 5.093-2.78 0-5.031-2.277-5.031-5.093 0-2.827 2.251-5.125 5.03-5.125z",
     className: "prefix__jp-icon-selectable"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#ffd43b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#ffd43b" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 81%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 53%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 81%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 53%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 81%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M85.638 28.657v11.906c0 9.231-7.826 17-16.75 17H42.106c-7.336 0-13.406 6.279-13.406 13.625V96.72c0 7.266 6.319 11.54 13.406 13.625 8.488 2.495 16.627 2.946 26.782 0 6.75-1.955 13.406-5.888 13.406-13.625V86.5H55.513v-3.405H95.7c7.793 0 10.696-5.436 13.406-13.594 2.8-8.399 2.68-16.476 0-27.25-1.925-7.758-5.604-13.594-13.406-13.594zM70.575 93.313c2.78 0 5.031 2.278 5.031 5.094 0 2.827-2.251 5.125-5.031 5.125-2.77 0-5.031-2.298-5.031-5.125 0-2.816 2.261-5.094 5.031-5.094z",
     className: "prefix__jp-icon-selectable"
   }));

package/data1/esm/PythonNameIcon.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);
 }
 
@@ -53,15 +66,17 @@ function PythonNameIcon({
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     viewBox: "0 0 330 330",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-    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))))")),
     "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", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "prefix__c"
@@ -118,7 +133,7 @@ function PythonNameIcon({
     gradientUnits: "userSpaceOnUse",
     xlinkHref: "#prefix__c"
   })), /*#__PURE__*/React.createElement("g", {
-    fill: "#646464"
+    fill: colored ? "#646464" : (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))))"))
   }, /*#__PURE__*/React.createElement("path", {
     d: "M36.113 274.399c0-14.562-4.152-22.038-12.457-22.448a23.4 23.4 0 00-9.669 1.589c-2.505.897-4.191 1.784-5.078 2.68v34.758c5.312 3.334 10.03 4.884 14.143 4.64 8.704-.575 13.061-7.642 13.061-21.22zm10.244.604c0 7.398-1.735 13.539-5.224 18.422-3.89 5.527-9.28 8.373-16.17 8.529-5.196.165-10.547-1.462-16.054-4.874v31.59L0 325.493v-70.12c1.462-1.794 3.343-3.334 5.624-4.64 5.302-3.09 11.745-4.679 19.329-4.757l.126.127c6.93-.088 12.272 2.758 16.024 8.529 3.5 5.292 5.254 12.076 5.254 20.371zm54.447 20.732c0 9.923-.994 16.794-2.982 20.615-1.998 3.821-5.8 6.872-11.414 9.143-4.552 1.793-9.474 2.768-14.757 2.934l-1.472-5.615c5.37-.73 9.153-1.462 11.346-2.193 4.318-1.462 7.28-3.704 8.908-6.706 1.307-2.446 1.95-7.115 1.95-14.026v-2.32c-6.092 2.769-12.476 4.143-19.153 4.143-4.386 0-8.256-1.374-11.59-4.142-3.742-3.012-5.614-6.833-5.614-11.463v-37.078l8.91-3.05v37.32c0 3.987 1.286 7.058 3.859 9.212s5.907 3.187 9.99 3.11c4.085-.089 8.461-1.668 13.11-4.757v-43.54h8.91zm34.778 5.731a35.662 35.662 0 01-2.934.127c-5.04 0-8.967-1.199-11.774-3.606-2.798-2.408-4.201-5.732-4.201-9.972v-35.09h-6.102v-5.604h6.102v-14.884l8.899-3.167v18.051h10.01v5.605h-10.01v34.846c0 3.343.896 5.711 2.69 7.096 1.54 1.14 3.987 1.793 7.32 1.959zm53.94-.731h-8.908v-34.387c0-3.5-.82-6.511-2.447-9.026-1.881-2.846-4.493-4.27-7.846-4.27-4.084 0-9.192 2.155-15.323 6.463v41.22h-8.909v-82.197l8.91-2.807v37.439c5.692-4.143 11.91-6.22 18.665-6.22 4.717 0 8.538 1.59 11.462 4.757 2.934 3.168 4.396 7.116 4.396 11.833zm47.352-27.74c0-5.595-1.063-10.215-3.178-13.87-2.515-4.454-6.423-6.803-11.706-7.047-9.767.565-14.64 7.564-14.64 20.976 0 6.15 1.014 11.287 3.06 15.41 2.613 5.253 6.531 7.846 11.755 7.758 9.806-.078 14.709-7.817 14.709-23.227zm9.757.059c0 7.963-2.038 14.591-6.102 19.884-4.474 5.926-10.654 8.899-18.539 8.899-7.817 0-13.91-2.973-18.305-8.9-3.987-5.292-5.975-11.92-5.975-19.883 0-7.486 2.154-13.783 6.462-18.91 4.552-5.439 10.537-8.168 17.935-8.168 7.398 0 13.422 2.73 18.061 8.168 4.308 5.127 6.463 11.424 6.463 18.91zm51.074 27.681h-8.908v-36.337c0-3.986-1.2-7.096-3.597-9.338-2.398-2.232-5.595-3.314-9.582-3.226-4.23.078-8.255 1.462-12.076 4.143v44.758h-8.909v-45.86c5.127-3.733 9.845-6.17 14.153-7.31 4.064-1.062 7.651-1.589 10.741-1.589 2.115 0 4.104.205 5.975.614 3.5.81 6.345 2.31 8.538 4.513 2.447 2.437 3.665 5.361 3.665 8.782z"
   }), /*#__PURE__*/React.createElement("path", {
@@ -130,15 +145,15 @@ function PythonNameIcon({
     fontSize: 15.165,
     fontWeight: 400
   })), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#prefix__d)",
+    fill: colored ? "url(#prefix__d)" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 53%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 81%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 53%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 81%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 53%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M60.51 6.398c-4.583.021-8.96.412-12.812 1.094-11.347 2.004-13.407 6.2-13.407 13.937v10.219h26.813v3.406H24.229c-7.793 0-14.616 4.684-16.75 13.594-2.462 10.213-2.571 16.586 0 27.25 1.906 7.938 6.457 13.594 14.25 13.594h9.219v-12.25c0-8.85 7.657-16.657 16.75-16.657h26.78c7.456 0 13.407-6.138 13.407-13.625V21.43c0-7.267-6.13-12.726-13.406-13.938-4.606-.767-9.385-1.115-13.969-1.094zm-14.5 8.219c2.77 0 5.031 2.298 5.031 5.125 0 2.816-2.261 5.093-5.03 5.093-2.78 0-5.032-2.277-5.032-5.093 0-2.827 2.252-5.125 5.031-5.125z",
     transform: "translate(68.17 -10.225) scale(1.59837)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#prefix__e)",
+    fill: colored ? "url(#prefix__e)" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 83%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 51%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 83%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 51%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 83%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M91.229 35.054V46.96c0 9.231-7.826 17-16.75 17H47.698c-7.336 0-13.407 6.279-13.407 13.625v25.532c0 7.266 6.319 11.54 13.407 13.625 8.487 2.495 16.626 2.946 26.78 0 6.751-1.955 13.407-5.888 13.407-13.625V92.898H61.104v-3.406h40.187c7.793 0 10.697-5.436 13.407-13.594 2.799-8.399 2.68-16.476 0-27.25-1.926-7.757-5.604-13.594-13.407-13.594zM76.166 99.71c2.78 0 5.032 2.278 5.032 5.094 0 2.827-2.252 5.125-5.032 5.125-2.77 0-5.03-2.298-5.03-5.125 0-2.816 2.26-5.094 5.03-5.094z",
     transform: "translate(68.17 -10.225) scale(1.59837)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#prefix__f)",
+    fill: colored ? "url(#prefix__f)" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M97.34 134.098a35.931 6.967 0 11-71.863 0 35.931 6.967 0 1171.862 0z",
     opacity: 0.444,
     transform: "translate(68.17 -10.225) scale(1.59837)"

package/data1/esm/QuansightIcon.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);
 }
 
@@ -51,16 +64,18 @@ function QuansightIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
-    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
+    fill: (themed ? "var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor))" : "var(--datalayer-icon-color, currentColor)"),
     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("path", {
     d: "M5.791 11.1c0-3.574 1.92-7.18 6.21-7.18 4.288 0 6.208 3.606 6.208 7.18 0 1.55-.362 3.106-1.121 4.371l-4.906-.005 1.507 2.601A6.607 6.607 0 0112 18.28c-4.29 0-6.209-3.606-6.209-7.18m9.96 10.53L17.124 24h4.911l-2.607-4.496c2.36-2.14 3.57-5.283 3.57-8.404C22.998 5.584 19.221 0 12 0 4.78 0 1.002 5.584 1.002 11.1c0 5.515 3.778 11.1 10.998 11.1 1.377 0 2.627-.205 3.75-.572z"

package/data1/esm/RIcon.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);
 }
 
@@ -53,15 +66,17 @@ function RIcon({
     preserveAspectRatio: "xMidYMid",
     viewBox: "0 0 724 724",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-    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))))")),
     "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", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "prefix__a",
@@ -94,11 +109,11 @@ function RIcon({
     offset: 1,
     stopColor: "#165CAA"
   }))), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#prefix__a)",
+    fill: colored ? "url(#prefix__a)" : (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))))")),
     fillRule: "evenodd",
     d: "M359.677 565.644C160.553 565.644-.87 457.535-.87 324.176c0-133.36 161.423-241.469 360.547-241.469 199.125 0 360.547 108.11 360.547 241.47 0 133.358-161.422 241.467-360.547 241.467zm55.188-388.53c-151.352 0-274.047 73.907-274.047 165.077S263.513 507.27 414.865 507.27c151.351 0 263.046-50.529 263.046-165.078 0-114.513-111.695-165.078-263.046-165.078z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#prefix__b)",
+    fill: colored ? "url(#prefix__b)" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 51%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 83%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 51%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 83%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 51%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     fillRule: "evenodd",
     d: "M548.224 456.707s21.822 6.585 34.5 13c4.4 2.226 12.01 6.668 17.5 12.5 5.378 5.712 8 11.5 8 11.5l86 145-139 .062-65-122.062s-13.31-22.869-21.5-29.5c-6.832-5.53-9.745-7.5-16.5-7.5h-33.026l.026 158.974-123 .052V232.645h247s112.5 2.03 112.5 109.062c0 107.033-107.5 115-107.5 115zm-53.5-135.976l-74.463-.048-.037 69.05 74.5-.024s34.5-.107 34.5-35.125c0-35.722-34.5-33.853-34.5-33.853z"
   }));

package/data1/esm/RapidsAiIcon.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);
 }
 
@@ -51,20 +64,23 @@ function RapidsAiIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1920 704",
-    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("path", {
     d: "M389.7 337.5c15.5 0 27.1-3.4 34.9-10.3 7.8-6.8 11.6-16.9 11.6-30 0-13.2-3.9-23.3-11.6-30.4-7.8-7.1-19.4-10.7-34.9-10.7h-53.9v81.4h53.9zM284 481.2c-1.8-1.8-2.7-4-2.7-6.6V222.4c0-2.8.8-5.2 2.5-7 1.7-1.8 3.9-2.7 6.8-2.7H391c31.8 0 56.6 7.4 74.6 22.1 18 14.7 26.9 35.7 26.9 62.8 0 18.9-4.5 34.7-13.6 47.5-9 12.8-21.7 22-38 27.7l56.2 98.8c.8 1.5 1.2 3 1.2 4.3 0 2.3-.8 4.3-2.5 5.8s-3.6 2.3-5.6 2.3h-35.7c-4.1 0-7.4-1-9.7-2.9-2.3-1.9-4.4-4.5-6.2-7.6L389 381.7h-53.1v93c0 2.6-.9 4.8-2.7 6.6-1.8 1.8-4.1 2.7-7 2.7h-35.7c-2.5 0-4.7-.9-6.5-2.8m327.5-96.4h87.6l-43.8-119.4-43.8 119.4zm-82.9 96.8c-1.6-1.6-2.3-3.5-2.3-5.8l.8-3.5 93-249.9c2.6-6.5 7.2-9.7 13.9-9.7h42.6c6.7 0 11.4 3.2 14 9.7l93 249.9.8 3.5c0 2.3-.8 4.3-2.5 5.8s-3.6 2.3-5.6 2.3h-34.5c-5.4 0-9.2-2.5-11.2-7.4l-17.8-46.9H597.9l-17.8 46.9c-2.1 4.9-5.8 7.4-11.2 7.4h-34.5c-2.4.1-4.3-.7-5.8-2.3m394-141c15 0 26.4-3.5 34.3-10.7 7.9-7.1 11.8-17.5 11.8-31.2 0-13.4-3.8-23.9-11.4-31.4-7.6-7.5-19.2-11.2-34.7-11.2h-55.8v84.5h55.8zM814.1 481.2c-1.8-1.8-2.7-4-2.7-6.6V222.4c0-2.8.8-5.2 2.5-7 1.7-1.8 3.9-2.7 6.8-2.7h103.9c31.3 0 55.8 7.4 73.6 22.1 17.8 14.7 26.7 36.2 26.7 64.3 0 27.9-8.9 49-26.7 63.4-17.8 14.3-42.4 21.5-73.6 21.5h-57v90.7c0 2.8-.9 5.1-2.7 6.8-1.8 1.7-4.1 2.5-7 2.5h-37.2c-2.6 0-4.8-.9-6.6-2.8m655-3.8c-16.5-7-29.1-16.1-37.6-27.5-8.5-11.4-13-23.8-13.6-37.2 0-2.1.8-3.9 2.3-5.6 1.5-1.7 3.5-2.5 5.8-2.5h35.3c2.8 0 5.2.7 7 1.9 1.8 1.3 3.5 3.1 5 5.4 2.6 8.8 8.5 16.1 17.6 22.1 9.2 5.9 21.8 8.9 37.8 8.9 18.1 0 31.7-3 40.9-9.1s13.8-14.4 13.8-25c0-7-2.3-12.8-7-17.4-4.7-4.6-11.7-8.7-21.1-12.2-9.4-3.5-23.4-7.7-42-12.6-30.5-7.2-52.8-16.8-67-28.7-14.2-11.9-21.3-28.9-21.3-51.2 0-15 4.1-28.4 12.4-40.1 8.3-11.8 20.1-21 35.5-27.7 15.4-6.7 33.3-10.1 53.7-10.1 21.4 0 40 3.7 55.6 11.2 15.6 7.5 27.5 16.9 35.7 28.1 8.1 11.2 12.5 22.4 13 33.5 0 2.1-.8 3.9-2.3 5.6-1.6 1.7-3.5 2.5-5.8 2.5H1586c-5.7 0-9.6-2.3-11.6-7-1.3-8.3-6.3-15.2-15.1-20.7s-19.6-8.3-32.6-8.3c-14.2 0-25.4 2.7-33.5 8.1-8.1 5.4-12.2 13.3-12.2 23.6 0 7 2.1 12.8 6.2 17.4 4.1 4.6 10.6 8.7 19.4 12.2 8.8 3.5 21.6 7.4 38.4 11.8 23 5.2 41.3 11 54.8 17.4 13.6 6.5 23.6 14.6 30 24.4 6.5 9.8 9.7 22.3 9.7 37.6 0 16.8-4.6 31.3-13.8 43.6-9.2 12.3-22.1 21.6-38.7 28.1-16.7 6.5-36 9.7-57.9 9.7-23.6.2-43.4-3.3-60-10.2m-402-2.7c0 .4.1.8.1 28.8l55.7-55.7V256.3l-55.7-55.7c0 20.7-.1 21-.1 21.4v252.7zm319.5-156.6c-1.6-70.3-40.4-105.4-116.6-105.4h-94.6c-2.8 0-5.1.9-6.8 2.7-1.7 1.8-2.5 4.1-2.5 7v75.8l54.6 53.9v-94.4h47.3c21.7 0 37.6 5 47.7 14.9 10.1 9.9 15.4 25.5 15.9 46.7.5 15 .8 24.5.8 28.7 0 3.9-.3 13.6-.8 29.1-.5 22.2-5.6 38.1-15.1 47.7-9.6 9.6-25.1 14.3-46.5 14.3h-49.2v-87l-54.6 53.9v68.8c0 2.6.9 4.8 2.7 6.6 1.8 1.8 4 2.7 6.6 2.7h96.5c38.5 0 67-8.6 85.4-25.8 18.5-17.2 28.2-43.8 29.3-80 .5-15 .8-24.9.8-29.8-.1-5.3-.4-15.4-.9-30.4",
-    fill: "#7300ff"
+    className: "prefix__st0",
+    fill: colored ? "#7300ff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 54%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
   }));
   if (!colormode) return _svgEl;
   return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {

package/data1/esm/RayIoIcon.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,20 +63,22 @@ function RayIoIcon({
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
-    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: "none",
     viewBox: "0 0 1600 1600",
     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("path", {
-    fill: colored ? '#028cf0' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#028cf0" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M589.375 746.735a221.647 221.647 0 0157.209-100.852 216.744 216.744 0 01153.785-63.66c60.084 0 114.417 24.329 153.785 63.66a221.573 221.573 0 0157.209 100.852h160.198a211.805 211.805 0 0124.329-58.683L911.948 404.11a219.472 219.472 0 01-111.58 30.78 216.744 216.744 0 01-153.784-63.66 216.744 216.744 0 01-63.66-153.785c0-60.084 24.329-114.454 63.66-153.785A216.744 216.744 0 01800.369 0c60.084 0 114.417 24.329 153.785 63.66a216.744 216.744 0 0163.66 153.785 217.481 217.481 0 01-30.78 111.579l283.942 283.942a219.472 219.472 0 01111.616-30.743c60.084 0 114.417 24.329 153.748 63.66A216.744 216.744 0 011600 799.63a216.744 216.744 0 01-63.66 153.785 216.744 216.744 0 01-153.785 63.66 217.481 217.481 0 01-111.542-30.743l-283.979 284.68c19.315 32.88 30.78 70.773 30.78 111.542a216.744 216.744 0 01-63.66 153.785A216.744 216.744 0 01800.369 1600a216.744 216.744 0 01-153.785-63.66 216.744 216.744 0 01-63.66-153.785c0-60.084 24.329-114.418 63.66-153.749a216.744 216.744 0 01153.785-63.659 217.481 217.481 0 01111.579 30.742l283.942-283.942a211.805 211.805 0 01-24.328-58.646h-160.2a221.573 221.573 0 01-57.208 100.852 216.744 216.744 0 01-153.785 63.66 216.744 216.744 0 01-153.785-63.66 221.647 221.647 0 01-57.209-100.852H429.14a221.647 221.647 0 01-57.208 100.852 216.744 216.744 0 01-153.785 63.66 216.744 216.744 0 01-153.785-63.66A214.422 214.422 0 010 800.368c0-60.084 24.328-114.454 63.66-153.785a216.744 216.744 0 01153.784-63.66c60.084 0 114.418 24.33 153.785 63.66a221.683 221.683 0 0157.209 100.853h160.936v-.738zm132.332 714.518c20.016 20.016 47.92 32.88 78.662 32.88 30.742 0 58.61-12.164 78.662-32.88 20.015-20.015 32.917-47.92 32.917-78.698 0-30.743-12.164-58.61-32.917-78.662a111.395 111.395 0 00-78.662-32.88c-30.78 0-58.646 12.164-78.699 32.88a111.395 111.395 0 00-32.88 78.699c0 30.742 12.164 58.609 32.88 78.661zm739.547-582.223c20.016-20.015 32.88-47.92 32.88-78.662 0-30.779-12.164-58.646-32.88-78.698a111.395 111.395 0 00-78.699-32.88c-30.742 0-58.61 12.164-78.662 32.88a111.395 111.395 0 00-32.88 78.698c0 30.743 12.164 58.61 32.88 78.662 20.016 20.016 47.92 32.917 78.7 32.917a114.491 114.491 0 0078.661-32.917zM879.031 138.746a111.395 111.395 0 00-78.662-32.88c-30.78 0-58.646 12.164-78.699 32.88a111.395 111.395 0 00-32.88 78.699c0 30.742 12.164 58.61 32.88 78.662 20.053 20.015 47.92 32.917 78.699 32.917 30.742 0 58.61-12.165 78.662-32.917 20.015-20.016 32.917-47.92 32.917-78.662a114.491 114.491 0 00-32.917-78.699zM138.747 721.67a111.395 111.395 0 00-32.88 78.698c0 30.743 12.164 58.61 32.88 78.662 20.052 20.016 47.92 32.917 78.698 32.917 30.743 0 58.61-12.164 78.662-32.917 20.016-20.753 32.917-47.92 32.917-78.662 0-30.779-12.164-58.646-32.917-78.698-20.753-20.016-47.92-32.88-78.662-32.88-30.779 0-58.646 12.164-78.698 32.88zm582.923 0a111.395 111.395 0 00-32.88 78.698c0 30.743 12.164 58.61 32.88 78.662 20.053 20.016 47.92 32.917 78.699 32.917 30.742 0 58.61-12.164 78.662-32.917 20.015-20.015 32.917-47.92 32.917-78.662 0-30.779-12.164-58.646-32.917-78.698a111.395 111.395 0 00-78.662-32.88c-30.78 0-58.646 12.164-78.699 32.88z"
   }));
   if (!colormode) return _svgEl;