@datalayer/icons-react 1.0.9 → 1.0.10

package/data1/esm/EditIcon.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 EditIcon({
 }, 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 16 16",
     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 ? '#757575' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#757575" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 47%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 87%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 47%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 87%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 47%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M0 12.667V16h3.333l9.83-9.83L9.83 2.837 0 12.667zm15.74-9.074a.885.885 0 000-1.253L13.66.26a.885.885 0 00-1.253 0l-1.626 1.626 3.333 3.333 1.626-1.626z"
   }));
   if (!colormode) return _svgEl;

package/data1/esm/ElectronIcon.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 ElectronIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 32 32",
-    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: "M10.409 24.405l-.023-.001a.402.402 0 00-.378.541l-.001-.003c1.342 3.747 3.537 6.053 6.005 6.053a5.892 5.892 0 004.749-3.352l.015-.036a.402.402 0 00-.688-.416l-.001.002a5.15 5.15 0 01-4.05 2.995l-.025.003c-2.05 0-4.008-2.058-5.248-5.521a.404.404 0 00-.355-.266h-.001zm17.501-1.709h.001a1.12 1.12 0 11-.735 1.965l.001.001-.008-.015a.41.41 0 00-.118-.113l-.002-.001a1.12 1.12 0 01.86-1.836zm-23.82 0a1.12 1.12 0 11-.967.555l-.003.005a1.12 1.12 0 01.97-.56zm2.578-5.02h-.019a.402.402 0 00-.297.673 25.278 25.278 0 005.87 4.666l.122.065c5.517 3.185 11.379 4.105 14.447 2.298a1.925 1.925 0 10-.547-.604l-.005-.009c-2.805 1.517-8.286.625-13.493-2.381a24.564 24.564 0 01-5.786-4.561l-.013-.014a.4.4 0 00-.277-.131h-.001zM16 15.369a1.393 1.393 0 101.372 1.089l.002.009a1.4 1.4 0 00-1.365-1.098H16zm3.598-7.794a.386.386 0 00-.084.01h.003c-2.709.626-5.099 1.604-7.277 2.902l.115-.064c-5.711 3.297-9.488 8.116-9.197 11.711a1.922 1.922 0 10.934-.242h-.001c-.047 0-.094.004-.141.007-.125-3.199 3.428-7.674 8.807-10.78a23.805 23.805 0 016.764-2.716l.164-.032a.403.403 0 00-.086-.795h-.002zm3.372-.365a.401.401 0 00-.011.804h.001a5.16 5.16 0 014.677 2.019l.009.013c1.024 1.773.225 4.492-2.147 7.294a.401.401 0 10.613.521l.001-.001c2.566-3.032 3.462-6.081 2.23-8.216a5.912 5.912 0 00-5.397-2.431l.025-.002zM9.158 7.188a5.967 5.967 0 00-5.472 2.418l-.012.017a5.875 5.875 0 00-.52 2.438c0 1.331.435 2.56 1.17 3.553l-.011-.016a.403.403 0 00.746-.208.393.393 0 00-.05-.193l.001.002a5.198 5.198 0 01-1.049-3.144c0-.733.151-1.43.422-2.063l-.013.034c1.026-1.777 3.79-2.443 7.413-1.783a.402.402 0 10.146-.79h-.002a14.793 14.793 0 00-2.767-.262h-.002zm6.856-5.38a1.12 1.12 0 11-.967.555l-.003.005a1.12 1.12 0 01.97-.56zm0-.804h-.001a1.924 1.924 0 101.703 2.819l.005-.011c2.775 1.584 4.807 6.839 4.807 12.949l.001.183a24.41 24.41 0 01-1.078 7.198l.046-.173a.402.402 0 00.767.242l.001-.003c.678-2.174 1.068-4.674 1.068-7.264l-.001-.194v.01c0-6.489-2.214-12.104-5.399-13.749.001-.028.004-.055.004-.084a1.923 1.923 0 00-1.924-1.923z"

package/data1/esm/EtcdIcon.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,27 @@ function EtcdIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "-6.31 3.69 510.12 493.62",
-    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", null, /*#__PURE__*/React.createElement("style", null, ".prefix__cls-1{fill:#419eda}")), /*#__PURE__*/React.createElement("path", {
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
     d: "M228.175 224.684a31.994 31.994 0 11-32.007-31.986 32.011 32.011 0 0132.007 31.986zm41.37 0a32.007 32.007 0 1032.007-31.986 31.988 31.988 0 00-32.007 31.986z",
-    className: "prefix__cls-1"
+    className: "prefix__cls-1",
+    fill: colored ? "#419eda" : (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))))"))
   }), /*#__PURE__*/React.createElement("path", {
     d: "M487.371 259.399a87.82 87.82 0 01-7.07.267 92.362 92.362 0 01-40.621-9.455 377.209 377.209 0 005.47-71.86 371.808 371.808 0 00-46.507-55.11 92.396 92.396 0 0132.772-35.102l6.016-3.729-4.695-5.3a244.906 244.906 0 00-85.524-62.377l-6.507-2.828-1.654 6.862a92.144 92.144 0 01-23.19 42.096 371.928 371.928 0 00-67.006-27.602 370.624 370.624 0 00-66.908 27.558 91.915 91.915 0 01-23.098-42.003l-1.681-6.884-6.486 2.817a247.232 247.232 0 00-85.518 62.355l-4.689 5.3 6.005 3.724a92.249 92.249 0 0132.695 34.917 374.63 374.63 0 00-46.425 54.908 376.956 376.956 0 005.328 72.334 92.115 92.115 0 01-40.376 9.374 86.36 86.36 0 01-7.086-.268l-7.053-.551.655 7.042a243.413 243.413 0 0032.897 100.678l3.581 6.098 5.372-4.575a92.052 92.052 0 0143.592-20.406 373.97 373.97 0 0037.308 60.76 377.717 377.717 0 0070.69 17.382 91.87 91.87 0 01-5.885 48.232l-2.686 6.54 6.9 1.529a246.355 246.355 0 0052.966 5.857l52.954-5.857 6.906-1.529-2.675-6.54a91.755 91.755 0 01-5.869-48.286 377.784 377.784 0 0070.407-17.328 372.3 372.3 0 0037.335-60.815 92.233 92.233 0 0143.81 20.428l5.377 4.553 3.587-6.049a242.844 242.844 0 0032.859-100.672l.655-7.037zM324.644 345.45a285.884 285.884 0 01-151.628 0 290.124 290.124 0 01-46.141-143.385 288.675 288.675 0 0154.957-52.315 293.065 293.065 0 0167.028-36.462 293.976 293.976 0 0166.891 36.364 290.886 290.886 0 0155.198 52.675 292.253 292.253 0 01-13.817 74.682 293.726 293.726 0 01-32.488 68.441z",
-    className: "prefix__cls-1"
+    className: "prefix__cls-1",
+    fill: colored ? "#419eda" : (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))))"))
   }));
   if (!colormode) return _svgEl;
   return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {

package/data1/esm/EtcdNameIcon.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,39 +63,29 @@ function EtcdNameIcon({
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
-    id: "prefix__svg843",
     viewBox: "-8.17 -10.17 300 300",
+    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",
-    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     "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__defs835"
-  }, /*#__PURE__*/React.createElement("style", {
-    id: "style833"
-  }, ".prefix__cls-1{fill:#419eda}")), /*#__PURE__*/React.createElement("g", {
-    id: "prefix__g851",
-    transform: "translate(51.582 -142.314) scale(1.22483)"
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path837",
-    strokeWidth: 0.631,
-    d: "M64.584 167.059a8.448 8.448 0 11-8.451-8.446 8.453 8.453 0 018.451 8.446zm10.924 0a8.452 8.452 0 108.452-8.446 8.446 8.446 0 00-8.452 8.446z",
-    className: "prefix__cls-1"
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    d: "M130.686 62.305a10.347 10.347 0 11-10.35-10.345 10.353 10.353 0 0110.35 10.345zm13.38 0A10.352 10.352 0 10154.42 51.96a10.345 10.345 0 00-10.353 10.345z",
+    className: "prefix__cls-1",
+    fill: colored ? "#419eda" : (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))))"))
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M214.515 73.533a28.31 28.31 0 01-2.286.086 29.871 29.871 0 01-13.138-3.058 121.997 121.997 0 001.77-23.24 120.25 120.25 0 00-15.041-17.824 29.882 29.882 0 0110.598-11.353l1.946-1.207-1.518-1.715a79.207 79.207 0 00-27.66-20.173l-2.105-.913-.535 2.22a29.801 29.801 0 01-7.5 13.613 120.288 120.288 0 00-21.67-8.926 119.868 119.868 0 00-21.64 8.911 29.727 29.727 0 01-7.471-13.583l-.543-2.227-2.098.912A79.96 79.96 0 0077.966 15.22l-1.518 1.715 1.943 1.205a29.836 29.836 0 0110.575 11.292A121.163 121.163 0 0073.95 47.192a121.916 121.916 0 001.724 23.394 29.792 29.792 0 01-13.059 3.031 27.987 27.987 0 01-2.29-.085l-2.282-.18.212 2.279a78.723 78.723 0 0010.639 32.56l1.158 1.973 1.738-1.48a29.77 29.77 0 0114.098-6.6 120.948 120.948 0 0012.065 19.65 122.16 122.16 0 0022.864 5.623 29.713 29.713 0 01-1.904 15.6l-.868 2.115 2.232.493a79.675 79.675 0 0017.129 1.895l17.127-1.895 2.233-.493-.865-2.117a29.675 29.675 0 01-1.899-15.617 122.183 122.183 0 0022.772-5.603 120.41 120.41 0 0012.076-19.668 29.83 29.83 0 0114.168 6.606l1.739 1.473 1.16-1.957a78.54 78.54 0 0010.628-32.56l.211-2.275zm-52.628 27.83a92.461 92.461 0 01-49.04 0A93.832 93.832 0 0197.923 54.99a93.364 93.364 0 0117.775-16.92 94.783 94.783 0 0121.678-11.792 95.077 95.077 0 0121.635 11.76 94.078 94.078 0 0117.852 17.038 94.52 94.52 0 01-4.47 24.154 94.998 94.998 0 01-10.506 22.133z",
+    className: "prefix__cls-1",
+    fill: colored ? "#419eda" : (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))))"))
   }), /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path839",
-    strokeWidth: 0.631,
-    d: "M133.025 176.226a23.114 23.114 0 01-1.866.07 24.388 24.388 0 01-10.727-2.496 99.603 99.603 0 001.445-18.975 98.177 98.177 0 00-12.28-14.552 24.397 24.397 0 018.653-9.269l1.589-.985-1.24-1.4a64.668 64.668 0 00-22.583-16.47l-1.718-.746-.437 1.812a24.331 24.331 0 01-6.123 11.115 98.208 98.208 0 00-17.693-7.288 97.865 97.865 0 00-17.667 7.276 24.27 24.27 0 01-6.1-11.09l-.443-1.818-1.713.744a65.282 65.282 0 00-22.581 16.464l-1.239 1.4 1.586.984a24.359 24.359 0 018.634 9.219 98.922 98.922 0 00-12.26 14.499 99.537 99.537 0 001.408 19.1 24.323 24.323 0 01-10.662 2.475 22.85 22.85 0 01-1.87-.07l-1.863-.146.173 1.86a64.273 64.273 0 008.686 26.584l.946 1.61 1.419-1.208a24.306 24.306 0 0111.51-5.389 98.747 98.747 0 009.85 16.044 99.737 99.737 0 0018.667 4.59 24.259 24.259 0 01-1.554 12.736l-.709 1.727 1.822.403a65.05 65.05 0 0013.985 1.547l13.983-1.547 1.823-.403-.706-1.728a24.228 24.228 0 01-1.55-12.75 99.755 99.755 0 0018.592-4.575 98.307 98.307 0 009.859-16.058 24.354 24.354 0 0111.567 5.394l1.42 1.202.947-1.597a64.123 64.123 0 008.677-26.583l.173-1.858zm-42.968 22.722a75.489 75.489 0 01-40.038 0 76.608 76.608 0 01-12.184-37.861 76.226 76.226 0 0114.512-13.815 77.385 77.385 0 0117.699-9.627 77.625 77.625 0 0117.663 9.602 76.809 76.809 0 0114.575 13.91 77.17 77.17 0 01-3.649 19.72 77.56 77.56 0 01-8.578 18.071z",
-    className: "prefix__cls-1"
-  })), /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path841",
-    strokeWidth: 0.631,
     d: "M38.974 177.536c21.227 0 33.21 15.236 33.21 39.028a49.645 49.645 0 01-.515 7.701H15.523c1.027 17.976 11.814 29.275 27.73 29.275 7.873 0 14.547-2.57 20.711-6.506l4.963 9.242c-7.189 4.623-16.09 8.56-27.385 8.56-22.253 0-39.884-16.261-39.884-43.481 0-27.212 18.313-43.819 37.316-43.819zm20.885 37.487c0-16.947-7.532-26.358-20.542-26.358-11.64 0-22.253 9.583-23.965 26.358zm28.24-23.964H75.776v-10.612l13.008-.856 1.714-23.28h11.807v23.279h22.425v11.47h-22.425v46.218c0 10.272 3.256 16.09 12.84 16.09 2.911 0 6.677-1.197 9.416-2.227l2.734 10.615c-4.62 1.54-10.268 3.082-15.406 3.082-17.799 0-23.793-11.297-23.793-27.73v-46.05zm82.51-13.523c10.955 0 18.656 4.623 24.303 9.93l-7.016 9.07c-4.965-4.276-10.099-7.359-16.776-7.359-15.06 0-26.02 13.008-26.02 32.18 0 19.002 10.443 31.84 25.679 31.84 7.873 0 14.552-3.937 19.514-8.387l6.333 9.243c-7.532 6.676-17.12 10.784-27.049 10.784-22.076 0-39.024-15.92-39.024-43.48.001-27.9 18.66-43.82 40.055-43.82zm65.732 0c9.585 0 15.917 3.595 23.279 9.588l-.686-14.208v-32.01h14.207V262.78h-11.636l-1.202-9.756h-.511c-6.506 6.334-15.404 11.812-25.164 11.812-20.882 0-34.404-15.75-34.404-43.481 0-27.042 17.116-43.819 36.117-43.819zm1.368 75.488c7.702 0 14.38-3.766 21.226-11.466v-43.482c-7.02-6.333-13.351-8.73-20.198-8.73-13.353 0-23.964 12.837-23.964 31.84 0 19.857 8.386 31.838 22.936 31.838z"
   }));
   if (!colormode) return _svgEl;

package/data1/esm/EuroIcon.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 EuroIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "-75 -60 120 120",
-    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: "M-69.843-15h102.02L28.02-5H-74zm0 20h93.706l-4.157 10H-74zM39.302-32.14a50 50 0 100 64.28v14.044a60 60 0 114.232-88.503z"

package/data1/esm/FastForwardIcon.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,17 +63,19 @@ function FastForwardIcon({
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
-    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
+    fill: (themed ? "var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor))" : "var(--datalayer-icon-color, currentColor)"),
     viewBox: "0 0 16 16",
     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: "M2.845 3.229a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06l3.72-3.72-3.72-3.72a.75.75 0 010-1.06z"