@datalayer/icons-react 1.0.9 → 1.0.10

package/data1/Iso42001Icon.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 Iso42001Icon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 841.89 595.28",
-    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: "M421.25 122.51c94.81.09 171.59 77.02 171.5 171.83-.09 94.81-77.02 171.59-171.83 171.5-94.69-.09-171.43-76.84-171.5-171.54-.09-94.79 76.67-171.7 171.46-171.79h.37zm-57.71 259.81a171.916 171.916 0 01115.1-.02l5.35-20.13c2.47 0 4.73-.06 7.01.02 2.35-.19 4.71-.06 7.02.41-1.61 8.35-3.64 16.62-6.1 24.76 6.34 3.5 12.64 6.67 18.63 10.35 5.99 3.67 11.66 7.81 17.45 11.74 69.6-63.78 65.26-172.26-.27-230.7a178.517 178.517 0 01-35.9 21.94c2.43 8.61 4.75 16.86 6.28 25.37h-14.25c-.87-3.43-1.66-6.71-2.53-9.96-.75-3.4-1.74-6.73-2.98-9.98a171.626 171.626 0 01-114.81-.06l-5.37 20.19c-2.47 0-4.75.01-7.02 0-2.32-.02-4.64-.06-7.4-.1l6.47-25.53a175.227 175.227 0 01-35.78-21.92c-69.16 63.07-66.25 171.54 0 230.89a180.15 180.15 0 0135.96-21.98c-2.57-8.33-4.7-16.8-6.37-25.35h14.21l5.3 20.06zm110.17-189.6c-.08-.56-.2-1.11-.35-1.66a135.172 135.172 0 00-17.75-32.93 62.875 62.875 0 00-17.72-16.6 30.742 30.742 0 00-32.02-.88 56.943 56.943 0 00-16.69 14.2 121.368 121.368 0 00-17.86 30.12c-1.05 2.43-2.01 4.9-3.13 7.64a156.625 156.625 0 00105.52.11zM368.36 395.63c.24.82.34 1.3.51 1.74a137.19 137.19 0 0016.19 30.76 71.745 71.745 0 0015.85 16.45c12.87 9.39 26.83 9.51 39.83.36 4.45-3.18 8.47-6.93 11.96-11.14a127.888 127.888 0 0020.71-36.66c.14-.51.23-1.03.28-1.55a156.986 156.986 0 00-105.33.04zm92.88 50.5a150.74 150.74 0 0055.52-27.01 151.317 151.317 0 00-29.2-17.8c-3.94 8.03-7.56 15.86-11.58 23.48-4.15 7.6-9.09 14.75-14.74 21.33zm-80.15.06c-5.7-6.5-10.67-13.62-14.81-21.22-4.1-7.68-7.71-15.61-11.65-23.66a151.708 151.708 0 00-29.22 17.81 151.719 151.719 0 0055.68 27.07zm105.95-259.22c7.59-2.56 26.63-14.36 29.28-18.12a150.42 150.42 0 00-55.2-26.71c11.57 13.25 19.5 28.5 25.92 44.83zm-106.23-44.72a150.225 150.225 0 00-55.24 26.83c5.88 5.47 24.08 16.39 29.64 17.77 5.96-16.2 14.61-31.28 25.6-44.6zm131.74 371.27c.03 5.2-1.08 10.34-3.25 15.07a26.331 26.331 0 01-22.98 15.55c-3.57.33-7.17.04-10.63-.87a26.108 26.108 0 01-18.64-17.67 37.996 37.996 0 01-.12-24.3 26.686 26.686 0 0123.98-18.89c5.97-.65 12 .55 17.27 3.43a26.994 26.994 0 0113.33 18.84c.58 2.89.71 5.89 1.04 8.84zm-37.22-.33l.5.04c0 2.28-.15 4.57.03 6.84.03 3.98.88 7.9 2.49 11.54a5.855 5.855 0 005.18 3.45 5.6 5.6 0 005.51-3.36c.8-1.59 1.38-3.28 1.72-5.03a80.07 80.07 0 00.44-23.99c-.35-2.54-1.02-5.04-1.98-7.42a5.412 5.412 0 00-5.23-3.72 5.945 5.945 0 00-5.68 3.59c-.67 1.22-1.13 2.54-1.36 3.91-.64 4.71-1.1 9.43-1.62 14.15zm-25.77.31c.33 5.28-.71 10.55-3.01 15.31a26.376 26.376 0 01-23.72 15.37c-4.57.34-9.16-.39-13.41-2.12a26.11 26.11 0 01-15.01-16.4 38.24 38.24 0 01-.24-24.02c3.22-11.17 13.31-18.96 24.93-19.26 9.09-.45 17.07 2.04 23.27 9.06a29.677 29.677 0 017.15 17.61c.14 1.46.04 2.96.04 4.45zm-20.16.54c-.27-4.2-.28-7.4-.73-10.52-.38-2.74-1.04-5.44-1.97-8.04a5.59 5.59 0 00-5.4-3.98 5.825 5.825 0 00-5.76 3.95c-.91 1.98-1.5 4.1-1.74 6.26-.37 6.42-.59 12.87-.5 19.3-.07 3.69.77 7.35 2.43 10.65a5.832 5.832 0 0010.54.26c.95-1.63 1.58-3.42 1.85-5.29.61-4.52.93-9.06 1.26-12.59h.02z"

package/data1/Iso42001SensibaIcon.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,25 +63,27 @@ function Iso42001SensibaIcon({
 }, 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",
     "aria-labelledby": titleId,
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     viewBox: "0 0 360 360",
     "aria-hidden": "true",
     ref: svgRef
   }, 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("rect", {
     width: 252,
     height: 320,
     x: 54,
     y: 20,
-    fill: colored ? '#FFF' : 'white',
-    stroke: "#1F2937",
+    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))))")),
+    stroke: colored ? "#1F2937" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 40%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 94%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 40%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 94%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 40%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     strokeWidth: 2,
     rx: 14
   }), /*#__PURE__*/React.createElement("rect", {
@@ -76,34 +91,34 @@ function Iso42001SensibaIcon({
     height: 64,
     x: 54,
     y: 20,
-    fill: colored ? '#F6F7F9' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#F6F7F9" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 86%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 48%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 86%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 48%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 86%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     rx: 14
   }), /*#__PURE__*/React.createElement("path", {
-    stroke: "#D1D5DB",
+    stroke: colored ? "#D1D5DB" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M54 70h252"
   }), /*#__PURE__*/React.createElement("g", {
     transform: "translate(84 38)"
   }, /*#__PURE__*/React.createElement("rect", {
     width: 10,
     height: 18,
-    fill: colored ? '#D97706' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#D97706" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 61%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     rx: 2
   }), /*#__PURE__*/React.createElement("rect", {
     width: 10,
     height: 18,
     x: 14,
-    fill: colored ? '#F59E0B' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#F59E0B" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     rx: 2
   }), /*#__PURE__*/React.createElement("rect", {
     width: 10,
     height: 18,
     x: 28,
-    fill: colored ? '#FCD34D' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#FCD34D" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     rx: 2
   })), /*#__PURE__*/React.createElement("text", {
     x: 130,
     y: 50,
-    fill: colored ? '#111827' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#111827" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 39%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 95%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 39%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 95%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 39%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     fontFamily: "Arial, Helvetica, sans-serif",
     fontSize: 18,
     fontWeight: 700
@@ -112,17 +127,17 @@ function Iso42001SensibaIcon({
     height: 170,
     x: 74,
     y: 100,
-    fill: colored ? '#FFF' : 'white',
-    stroke: "#111827",
+    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))))")),
+    stroke: colored ? "#111827" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 39%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 95%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 39%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 95%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 39%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     strokeWidth: 1.5,
     rx: 10
   }), /*#__PURE__*/React.createElement("path", {
-    stroke: "#E5E7EB",
+    stroke: colored ? "#E5E7EB" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M74 170h212M74 214h212"
   }), /*#__PURE__*/React.createElement("text", {
     x: 180,
     y: 134,
-    fill: colored ? '#111827' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#111827" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 39%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 95%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 39%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 95%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 39%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     fontFamily: "Arial, Helvetica, sans-serif",
     fontSize: 23,
     fontWeight: 700,
@@ -130,7 +145,7 @@ function Iso42001SensibaIcon({
   }, "ISO/IEC"), /*#__PURE__*/React.createElement("text", {
     x: 180,
     y: 162,
-    fill: colored ? '#111827' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#111827" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 39%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 95%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 39%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 95%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 39%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     fontFamily: "Arial, Helvetica, sans-serif",
     fontSize: 34,
     fontWeight: 800,
@@ -138,7 +153,7 @@ function Iso42001SensibaIcon({
   }, "42001"), /*#__PURE__*/React.createElement("text", {
     x: 180,
     y: 188,
-    fill: colored ? '#374151' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#374151" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 42%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 92%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 42%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 92%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 42%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     fontFamily: "Arial, Helvetica, sans-serif",
     fontSize: 16,
     fontWeight: 700,
@@ -146,7 +161,7 @@ function Iso42001SensibaIcon({
   }, ":2023"), /*#__PURE__*/React.createElement("text", {
     x: 180,
     y: 207,
-    fill: colored ? '#4B5563' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#4B5563" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     fontFamily: "Arial, Helvetica, sans-serif",
     fontSize: 10,
     fontWeight: 700,
@@ -154,7 +169,7 @@ function Iso42001SensibaIcon({
   }, "CERTIFIED"), /*#__PURE__*/React.createElement("text", {
     x: 180,
     y: 229,
-    fill: colored ? '#6B7280' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#6B7280" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 48%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 86%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 48%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 86%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 48%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     fontFamily: "Arial, Helvetica, sans-serif",
     fontSize: 9,
     fontWeight: 600,
@@ -162,7 +177,7 @@ function Iso42001SensibaIcon({
   }, "ARTIFICIAL INTELLIGENCE"), /*#__PURE__*/React.createElement("text", {
     x: 180,
     y: 243,
-    fill: colored ? '#6B7280' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#6B7280" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 48%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 86%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 48%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 86%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 48%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     fontFamily: "Arial, Helvetica, sans-serif",
     fontSize: 9,
     fontWeight: 600,
@@ -171,15 +186,15 @@ function Iso42001SensibaIcon({
     transform: "translate(180 294)"
   }, /*#__PURE__*/React.createElement("circle", {
     r: 31,
-    fill: colored ? '#F9FAFB' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    stroke: "#1F2937",
+    fill: colored ? "#F9FAFB" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    stroke: colored ? "#1F2937" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 40%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 94%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 40%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 94%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 40%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     strokeWidth: 1.5
   }), /*#__PURE__*/React.createElement("circle", {
     r: 23,
-    fill: colored ? '#FFF' : 'white',
-    stroke: "#9CA3AF"
+    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))))")),
+    stroke: colored ? "#9CA3AF" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 58%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 76%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 58%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 76%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 58%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
   }), /*#__PURE__*/React.createElement("path", {
-    stroke: "#111827",
+    stroke: colored ? "#111827" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 39%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 95%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 39%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 95%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 39%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 3,
@@ -187,7 +202,7 @@ function Iso42001SensibaIcon({
   })), /*#__PURE__*/React.createElement("text", {
     x: 180,
     y: 336,
-    fill: colored ? '#6B7280' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#6B7280" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 48%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 86%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 48%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 86%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 48%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     fontFamily: "Arial, Helvetica, sans-serif",
     fontSize: 8,
     fontWeight: 600,

package/data1/JavaIcon.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,37 +64,39 @@ function JavaIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "6.527 4.399 540.977 540.906",
-    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", {
-    fill: colored ? '#e76f00' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#e76f00" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M414.372 430.945h-2.037v-1.14h5.486v1.14h-2.025v5.688h-1.424zm10.942.297h-.032l-2.02 5.393h-.924l-2.006-5.393h-.024v5.393h-1.343v-6.828h1.976l1.86 4.835 1.854-4.835h1.969v6.828h-1.311z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#5382a1' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#5382a1" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M231.949 291.324s-14.178 8.245 10.09 11.035c29.4 3.354 44.426 2.873 76.825-3.259 0 0 8.518 5.341 20.414 9.967-72.63 31.128-164.376-1.803-107.33-17.743m-8.874-40.62s-15.902 11.771 8.384 14.283c31.406 3.24 56.208 3.505 99.125-4.759 0 0 5.937 6.018 15.27 9.309-87.814 25.678-185.623 2.025-122.78-18.833"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#e76f00' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#e76f00" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M297.893 181.799c17.896 20.604-4.701 39.146-4.701 39.146s45.439-23.458 24.57-52.833c-19.49-27.395-34.437-41.005 46.48-87.934 0-.001-127.013 31.721-66.35 101.621"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#5382a1' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#5382a1" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M393.952 321.369s10.492 8.646-11.555 15.333c-41.923 12.7-174.488 16.535-211.314.507-13.238-5.76 11.587-13.752 19.396-15.429 8.144-1.766 12.798-1.437 12.798-1.437-14.722-10.371-95.157 20.363-40.857 29.166 148.084 24.015 269.944-10.814 231.532-28.14M238.767 208.617s-67.431 16.016-23.88 21.832c18.39 2.462 55.048 1.905 89.193-.956 27.906-2.354 55.928-7.358 55.928-7.358s-9.84 4.214-16.96 9.074c-68.474 18.01-200.755 9.631-162.673-8.79 32.206-15.568 58.392-13.802 58.392-13.802m120.963 67.614c69.608-36.171 37.425-70.932 14.96-66.248-5.506 1.146-7.961 2.139-7.961 2.139s2.045-3.202 5.947-4.588c44.44-15.624 78.619 46.081-14.346 70.521 0 0 1.079-.962 1.4-1.824"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#e76f00' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#e76f00" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M317.763 4.399s38.55 38.562-36.563 97.862c-60.233 47.567-13.735 74.689-.025 105.678-35.158-31.723-60.96-59.647-43.65-85.637 25.406-38.151 95.792-56.648 80.238-117.903"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#5382a1' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#5382a1" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M245.607 374.246c66.815 4.277 169.417-2.373 171.846-33.987 0 0-4.67 11.984-55.22 21.503-57.026 10.731-127.363 9.479-169.08 2.601.002-.002 8.54 7.067 52.454 9.883"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#e76f00' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#e76f00" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M234.657 495.049c-6.303 5.467-12.96 8.536-18.934 8.536-8.527 0-13.134-5.113-13.134-13.314 0-8.871 4.937-15.357 24.739-15.357h7.328v20.135m17.393 19.623V453.93c0-15.518-8.85-25.756-30.188-25.756-12.457 0-23.37 3.076-32.238 6.999l2.56 10.752c6.983-2.563 16.022-4.949 24.894-4.949 12.292 0 17.58 4.949 17.58 15.181v7.678h-6.135c-29.865 0-43.337 11.593-43.337 28.993 0 15.018 8.878 23.554 25.594 23.554 10.745 0 18.766-4.437 26.264-10.929l1.36 9.221zm58.043 0H288.4l-26.106-84.96h18.944l16.198 52.199 3.6 15.699c8.196-22.698 13.993-45.726 16.892-67.898h18.427c-4.938 27.976-13.822 58.684-26.264 84.96m83.214-19.623c-6.315 5.467-12.983 8.536-18.958 8.536-8.512 0-13.131-5.113-13.131-13.314 0-8.871 4.947-15.357 24.748-15.357h7.34v20.135m17.39 19.623V453.93c0-15.518-8.87-25.756-30.185-25.756-12.465 0-23.381 3.076-32.246 6.999l2.557 10.752c6.985-2.563 16.04-4.949 24.906-4.949 12.283 0 17.579 4.949 17.579 15.181v7.678h-6.146c-29.873 0-43.34 11.593-43.34 28.993 0 15.018 8.87 23.554 25.584 23.554 10.752 0 18.77-4.437 26.28-10.929l1.366 9.221zm-244.58 14.427c-4.958 7.239-12.966 12.966-21.733 16.206l-8.587-10.105c6.673-3.424 12.396-8.954 15.055-14.104 2.3-4.581 3.252-10.485 3.252-24.604v-96.995h18.478v95.666c-.001 18.875-1.51 26.5-6.465 33.936"
   }));
   if (!colormode) return _svgEl;