@datalayer/icons-react 1.0.9 → 1.0.10

package/data1/BookIcon.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 BookIcon({
   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: "M0 3.75A.75.75 0 01.75 3h7.497c1.566 0 2.945.8 3.751 2.014A4.495 4.495 0 0115.75 3h7.5a.75.75 0 01.75.75v15.063a.752.752 0 01-.755.75l-7.682-.052a3 3 0 00-2.142.878l-.89.891a.75.75 0 01-1.061 0l-.902-.901a2.996 2.996 0 00-2.121-.879H.75a.75.75 0 01-.75-.75zm12.75 15.232a4.503 4.503 0 012.823-.971l6.927.047V4.5h-6.75a3 3 0 00-3 3zM11.247 7.497a3 3 0 00-3-2.997H1.5V18h6.947c1.018 0 2.006.346 2.803.98z"

package/data1/BrowserIcon.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 BrowserIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512",
-    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: "M256 0C114.62 0 0 114.62 0 256s114.62 256 256 256 256-114.62 256-256S397.38 0 256 0zm-83.789 41.609c-24.934 27.119-44.68 66.125-56.755 111.992H49.749c25.43-50.86 69.12-91.077 122.462-111.992zM25.6 256c0-26.999 5.077-52.727 13.662-76.8h70.494c-4.608 24.294-7.356 49.963-7.356 76.8s2.748 52.506 7.347 76.8H39.262C30.677 308.727 25.6 283 25.6 256zm24.149 102.4h65.707c12.083 45.867 31.821 84.872 56.755 111.991-53.342-20.915-97.032-61.132-122.462-111.991zM243.2 485.188c-43.81-8.252-81.877-58.24-101.359-126.788H243.2v126.788zm0-152.388H135.74c-4.924-24.166-7.74-49.997-7.74-76.8s2.816-52.634 7.74-76.8H243.2v153.6zm0-179.2H141.841C161.323 85.052 199.39 35.063 243.2 26.812V153.6zm219.051 0h-65.707c-12.083-45.867-31.821-84.873-56.755-111.992 53.342 20.916 97.032 61.133 122.462 111.992zM268.8 26.812c43.81 8.252 81.877 58.24 101.359 126.788H268.8V26.812zm0 152.388h107.46c4.924 24.166 7.74 49.997 7.74 76.8s-2.816 52.634-7.74 76.8H268.8V179.2zm0 305.988V358.4h101.359C350.677 426.948 312.61 476.937 268.8 485.188zm70.989-14.797c24.934-27.127 44.672-66.125 56.755-111.991h65.707c-25.43 50.859-69.12 91.076-122.462 111.991zM402.244 332.8c4.608-24.294 7.356-49.963 7.356-76.8s-2.748-52.506-7.347-76.8h70.494c8.576 24.073 13.653 49.801 13.653 76.8 0 27-5.077 52.727-13.662 76.8h-70.494z"

package/data1/BrowserMouseIcon.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 BrowserMouseIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 122.88 115.33",
-    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: "M76.98 97.89c-3.62 4.01-7.79 7.99-12.51 11.94 1.28-.17 2.56-.38 3.81-.62 3.42-.69 6.71-1.7 9.89-3.08.82-.35 1.62-.72 2.41-1.1.59.76 1.25 1.42 1.96 1.98.77.61 1.59 1.09 2.45 1.45-1.58.85-3.2 1.62-4.86 2.34a55.262 55.262 0 01-10.9 3.39c-3.74.76-7.61 1.14-11.59 1.14-3.98 0-7.82-.38-11.59-1.14-3.7-.73-7.26-1.83-10.76-3.32-.03 0-.1-.03-.14-.07a62.287 62.287 0 01-9.82-5.33 54.495 54.495 0 01-8.51-6.99 52.856 52.856 0 01-6.99-8.51c-2.08-3.08-3.84-6.37-5.33-9.82a55.262 55.262 0 01-3.39-10.9A60.34 60.34 0 010 57.66c0-3.98.38-7.82 1.14-11.59.73-3.7 1.83-7.26 3.32-10.76 0-.03.03-.1.07-.14 1.49-3.49 3.29-6.75 5.33-9.82 2.04-3.08 4.39-5.92 6.99-8.51 2.59-2.63 5.43-4.95 8.51-6.99 3.08-2.08 6.36-3.84 9.82-5.33 3.53-1.52 7.16-2.63 10.9-3.39C49.81.38 53.69 0 57.66 0c3.98 0 7.82.38 11.59 1.14 3.7.73 7.26 1.83 10.76 3.32.03 0 .1.03.14.07 3.46 1.49 6.75 3.29 9.82 5.33 3.08 2.04 5.92 4.39 8.51 6.99 2.63 2.59 4.95 5.43 6.99 8.51 2.08 3.08 3.84 6.37 5.33 9.82 1.52 3.53 2.63 7.16 3.39 10.9.43 2.12.74 4.28.93 6.48l-5.23-1.39c-.16-1.38-.37-2.74-.64-4.09-.69-3.42-1.7-6.71-3.08-9.89-.86-2.04-1.83-3.98-2.91-5.85H86.38c3 5.13 5.16 10.23 6.47 15.32l-5.68-1.51c-1.48-4.56-3.71-9.16-6.71-13.81H60.19v9.39c-.36.21-.72.46-1.07.74a8.25 8.25 0 00-1.73 1.83 9.07 9.07 0 00-1.06 2.11c-.27.77-.43 1.54-.49 2.29-.05.64-.03 1.3.07 1.95.08.54.2 1.07.38 1.59l.05.14c.04.11.08.22.12.32.06.17.11.27.13.32l.02-.01 3.63 8.17h-.06v23.8H70.8l2.24 5.05H60.19v17.78c5.65-4.64 10.5-9.32 14.54-14.01l2.25 5.09zm38.16.08c-.34.34-.74.6-1.16.79-.44.2-.91.32-1.38.36a3.99 3.99 0 01-1.53-.17c-.48-.15-.94-.4-1.35-.74L98.63 88.8l-3.81 9.35c-.32.78-.7 1.5-1.13 2.15a8.62 8.62 0 01-1.44 1.68c-.41.36-.86.67-1.33.9-.47.23-.95.38-1.45.45-.58.08-1.16.04-1.72-.12-.54-.16-1.06-.42-1.56-.81-.4-.31-.77-.71-1.12-1.19-.32-.44-.61-.96-.88-1.56-7.22-16.27-15.83-33.78-22.27-50.16a3.137 3.137 0 01-.02-2.15c.09-.25.21-.5.36-.72.08-.11.16-.22.26-.31.08-.08.17-.16.27-.23.18-.14.37-.26.57-.36l.05-.02c.19-.09.39-.16.58-.2l.09-.02c.18-.04.36-.06.54-.07.21-.01.41.01.61.04l.21.03c17.64 4.38 35.38 9.38 52.98 14.05.63.17 1.19.38 1.68.62.53.27.98.57 1.35.91.46.42.81.9 1.05 1.41.25.53.38 1.1.39 1.69v.01c.01.5-.06 1-.21 1.5s-.38.98-.68 1.45c-.37.58-.85 1.16-1.43 1.69-.56.52-1.22 1.01-1.95 1.46-2.89 1.7-5.77 3.5-8.64 5.24l11.05 9.47c.4.35.72.76.94 1.21l.03.08c.21.45.34.92.38 1.41.04.49-.01 1-.16 1.5-.14.47-.37.93-.69 1.34-1.69 2.08-4.52 5.72-6.39 7.45zm-2.9-3.63l5.35-6.28-13-11.14-.07-.07c-.06-.06-.13-.13-.18-.19a1.61 1.61 0 01-.21-.3c-.33-.54-.4-1.16-.26-1.73.14-.57.5-1.09 1.04-1.41 3.76-2.07 7.64-4.66 11.35-6.89.43-.26.81-.55 1.13-.84.3-.28.55-.56.72-.83.07-.11.12-.2.15-.29-.08-.06-.17-.11-.3-.17-.19-.09-.44-.17-.73-.25L67.51 50.77 88.39 97.8c.12.26.24.49.37.68l.03.05c.07.09.13.17.18.22.08-.04.16-.11.26-.2.24-.21.48-.5.7-.84.24-.36.46-.79.65-1.27l5-12.28.05-.1c.04-.08.08-.16.12-.23l.03-.05c.05-.08.11-.16.18-.24a2.293 2.293 0 013.23-.26l13.05 11.06zm-61.35 15.49c-8.16-6.85-14.7-13.77-19.54-20.79H15.39c1.52 2.08 3.22 4.01 5.05 5.85 2.39 2.39 4.95 4.5 7.75 6.36 2.77 1.87 5.78 3.49 9.03 4.88.03.03.07.03.1.07 3.15 1.31 6.4 2.35 9.79 3.01 1.25.24 2.53.45 3.8.62h-.02zM12.07 83.99h16.05c-4.46-7.82-6.88-15.77-7.16-23.8H5.12c.14 2.77.45 5.43.97 8.06.69 3.42 1.69 6.71 3.08 9.89.86 2.04 1.83 3.98 2.9 5.85zM5.12 55.14h15.95c.59-7.89 3.22-15.81 7.89-23.8H12.07c-1.07 1.87-2.04 3.8-2.91 5.85-.03.03-.03.07-.07.1-1.31 3.15-2.35 6.4-3.01 9.79-.51 2.63-.86 5.29-.96 8.06zm10.24-28.85h16.85c4.81-6.92 11.14-13.87 19.03-20.86-1.42.17-2.8.38-4.15.66-3.42.69-6.71 1.7-9.89 3.08a55.79 55.79 0 00-9.03 4.88c-2.8 1.87-5.36 3.98-7.75 6.36-1.83 1.83-3.53 3.77-5.05 5.85l-.01.03zM64.1 5.43c7.92 6.99 14.25 13.94 19.03 20.86h16.85c-1.52-2.08-3.22-4.01-5.05-5.85-2.39-2.39-4.95-4.5-7.75-6.37-2.77-1.87-5.78-3.49-9.03-4.88-.03-.03-.07-.03-.1-.07-3.15-1.31-6.4-2.35-9.79-3.01-1.38-.28-2.77-.48-4.15-.66v-.02h-.01zm-3.91 3.29v17.57h16.74c-4.39-5.81-9.96-11.66-16.74-17.57zm-5.05 98.1V89.04H37.53c4.53 5.95 10.41 11.9 17.61 17.78zm0-22.83v-23.8H26.01c.31 7.99 3.01 15.91 7.99 23.8h21.14zm0-28.85v-23.8H34.87c-5.19 8.06-8.09 15.98-8.75 23.8h29.02zm0-28.85V8.72c-6.78 5.92-12.35 11.76-16.74 17.57h16.74z"

package/data1/CameraIcon.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 CameraIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 -2 18 18",
-    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", {
     fillRule: "evenodd",

package/data1/CassandraIcon.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 CassandraIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 280 280",
-    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("clipPath", {
     id: "prefix__b"
@@ -118,13 +133,13 @@ function CassandraIcon({
     clipPath: "url(#prefix__a)",
     transform: "matrix(1.25 0 0 -1.25 -43.538 957.313)"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#373535' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#373535" : (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))))")),
     d: "M61.491 609.137c1.824 0 3.552-.432 4.417-1.296.144-1.345-1.057-3.505-1.825-3.505-.912.336-1.776.53-2.832.53-4.368 0-6.529-4.514-6.529-8.978 0-2.784.96-4.465 3.17-4.465 2.351 0 4.751 1.584 6.095 2.784.336-.239.768-1.008.768-1.872 0-.96-.288-1.872-1.152-2.736-1.536-1.536-4.128-2.832-7.873-2.832-4.32 0-7.296 2.448-7.296 8.161 0 7.488 4.944 14.21 13.01 14.21zm14.111-17.473c2.352 0 6.625 4.129 7.825 12 .048.48.096.625.192 1.105a6.019 6.019 0 01-1.969.336c-1.776 0-3.6-.528-5.232-2.736-1.68-2.352-2.4-5.28-2.4-7.633 0-2.015.576-3.072 1.536-3.072zm-7.729 2.16c0 2.832.96 7.777 4.561 11.377 3.072 3.168 6.816 3.937 10.225 3.937 2.256 0 5.328-.72 7.248-1.105-.48-2.112-1.632-10.08-2.16-14.688-.24-1.97-.336-4.705-.24-5.713-1.584-.672-4.56-.864-5.377-.864-.43 0-.528 1.968-.383 3.84.047.624.144 1.536.191 1.92-1.872-3.12-5.568-5.76-9.456-5.76-2.784 0-4.609 2.304-4.609 7.008zm33.985 15.313c1.968 0 3.84-.72 4.705-1.632-.048-1.345-1.104-3.6-2.785-2.976-.72.24-1.44.431-2.4.431-1.296 0-2.4-.576-2.4-1.775 0-.912.672-1.585 3.888-3.84 2.305-1.68 3.217-3.169 3.217-5.28 0-3.506-3.313-7.298-9.073-7.298-2.352 0-4.417.912-5.09 1.872-.863 1.44-.191 4.272.77 3.793 1.248-.624 3.312-1.297 4.992-1.297 1.584 0 2.592.721 2.592 1.681 0 .815-.72 1.536-3.648 3.6-2.45 1.824-3.217 3.504-3.217 5.424 0 3.984 3.409 7.297 8.4 7.297zm16.559 0c1.969 0 3.841-.72 4.705-1.632-.048-1.345-1.103-3.6-2.784-2.976-.72.24-1.441.431-2.4.431-1.296 0-2.4-.576-2.4-1.775 0-.912.672-1.585 3.888-3.84 2.304-1.68 3.216-3.169 3.216-5.28 0-3.506-3.313-7.298-9.073-7.298-2.352 0-4.416.912-5.088 1.872-.864 1.44-.192 4.272.768 3.793 1.248-.624 3.312-1.297 4.992-1.297 1.584 0 2.592.721 2.592 1.681 0 .815-.72 1.536-3.648 3.6-2.448 1.824-3.216 3.504-3.216 5.424 0 3.984 3.408 7.297 8.401 7.297zm15.119-17.473c2.353 0 6.625 4.129 7.825 12 .048.48.097.625.193 1.105a6.024 6.024 0 01-1.969.336c-1.776 0-3.6-.528-5.233-2.736-1.679-2.352-2.4-5.28-2.4-7.633 0-2.015.576-3.072 1.537-3.072zm-7.729 2.16c0 2.832.961 7.777 4.561 11.377 3.072 3.168 6.816 3.937 10.225 3.937 2.256 0 5.33-.72 7.25-1.105-.48-2.112-1.633-10.08-2.16-14.688-.242-1.97-.337-4.705-.242-5.713-1.584-.672-4.559-.864-5.376-.864-.43 0-.528 1.968-.384 3.84.048.624.144 1.536.192 1.92-1.872-3.12-5.568-5.76-9.456-5.76-2.785 0-4.61 2.304-4.61 7.008zm32.881 9.073c2.209 3.552 5.088 6.24 9.121 6.24 3.408 0 4.512-3.168 3.889-7.68-.336-2.113-.912-5.137-1.297-7.921-.336-2.353-.576-4.464-.527-5.905-1.248-.624-4.897-.864-5.713-.864-.336 0-.385 2.641.048 5.425.383 2.304 1.2 6.48 1.584 8.881.241 1.391.192 3.072-1.152 3.072-1.777 0-6-2.833-8.113-14.449-.145-.96-.528-1.536-1.057-1.872-.719-.433-2.256-.817-5.375-.865.576 2.928 1.488 8.929 2.16 13.345.623 4.032.864 6.625.719 7.633.817.288 5.09 1.2 5.568 1.2.53 0 .625-1.488.145-5.089-.047-.336-.096-.863-.145-1.151zm24.385-11.186c2.11 0 6.385 3.937 7.584 10.897.049.384.193 1.104.289 1.537-.625.576-1.441.96-2.736.96-4.85 0-7.01-5.809-7.01-9.986 0-2.256.769-3.408 1.824-3.408zm-3.168-4.944c-3.072 0-4.992 2.736-4.992 7.44 0 7.777 4.847 14.93 13.008 14.93 1.44 0 2.736-.384 3.552-.864.432 2.208 1.44 9.025 1.489 11.041 1.343.24 4.224.671 5.519.671.53 0 .674-.527.48-1.727-1.152-7.2-3.214-21.026-3.6-24.099-.288-2.592-.335-5.136-.288-6.576-1.535-.672-4.656-.816-5.471-.816-.338 0-.53 2.208-.433 4.176.049.624.144 1.537.144 1.68-2.4-3.936-5.713-5.856-9.361-5.856zm28.127 15.457c2.545 5.665 5.568 6.913 7.537 6.913.625 0 1.584-.384 2.016-.864.193-1.584-1.055-4.752-2.16-5.952-.577.288-1.295.576-2.112.576-1.633 0-4.85-2.545-6.865-13.489-.145-.913-.432-1.297-.96-1.537-.815-.48-4.032-.864-5.567-.912.718 3.937 1.966 11.953 2.447 16.658.144 1.2.19 3.408.096 4.272.912.432 4.513 1.248 5.328 1.248.433 0 .769-2.64.095-6.913zm16.943-10.56c2.354 0 6.625 4.129 7.826 12 .047.48.096.625.192 1.105a6.019 6.019 0 01-1.969.336c-1.776 0-3.6-.528-5.233-2.736-1.679-2.352-2.4-5.28-2.4-7.633 0-2.015.576-3.072 1.537-3.072zm-7.729 2.16c0 2.832.961 7.777 4.561 11.377 3.072 3.168 6.816 3.937 10.225 3.937 2.256 0 5.328-.72 7.25-1.105-.48-2.112-1.633-10.08-2.16-14.688-.24-1.97-.338-4.705-.24-5.713-1.585-.672-4.56-.864-5.378-.864-.43 0-.527 1.968-.384 3.84.048.624.144 1.536.193 1.92-1.873-3.12-5.568-5.76-9.457-5.76-2.785 0-4.61 2.304-4.61 7.008z"
   })), /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#prefix__b)",
     transform: "matrix(1.25 0 0 -1.25 -43.538 957.313)"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#bbe6fb' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#bbe6fb" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 79%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M210.878 690.483c1.584-18.452-27.455-36.014-64.859-39.223-37.404-3.209-69.01 9.151-70.592 27.602-1.584 18.455 27.455 36.016 64.86 39.225 37.403 3.208 69.01-9.149 70.591-27.604"
   })), /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#prefix__c)",
@@ -133,18 +148,18 @@ function CassandraIcon({
     clipPath: "url(#prefix__d)",
     opacity: 0.35
   }, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#fff' : 'white',
+    fill: colored ? "#fff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M141.384 715.923c-14.268.232-30.964-5.433-43.387-10.738a35.89 35.89 0 01-1.989-11.797c0-21.888 19.764-39.634 44.145-39.634 24.381 0 44.145 17.746 44.145 39.634 0 6.927-1.984 13.435-5.463 19.101-9.939 1.545-23.609 3.21-37.45 3.434"
   }))), /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#prefix__e)",
     transform: "matrix(1.25 0 0 -1.25 -43.538 957.313)"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#fff' : 'white',
+    fill: colored ? "#fff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M140.153 715.928c-7.9.482-21.514-3.64-32.867-7.75a33.739 33.739 0 01-2.683-13.201c0-19.178 17.388-34.725 35.782-34.725 18.273 0 34.44 15.572 35.782 34.725.436 6.237-1.711 12.114-4.692 17.18-11.77 2.074-24.261 3.34-31.322 3.77"
   })), /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#prefix__f)",
     transform: "matrix(1.25 0 0 -1.25 -43.538 957.313)",
-    fill: "#373535"
+    fill: colored ? "#373535" : (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))))"))
   }, /*#__PURE__*/React.createElement("path", {
     d: "M119.882 697.495c.969 2.146 2.437 3.197 3.859 4.996-.158.426-.504 1.819-.504 2.302a3.907 3.907 0 003.906 3.906 3.89 3.89 0 001.44-.278c6.465 4.927 14.976 7.075 23.529 5.163a29.763 29.763 0 002.299-.623c-8.453 1.172-17.981-1.822-24.462-7.053.198-.467.747-1.802.747-2.34 0-2.156-1.396-2.681-3.553-2.681-.49 0-.958.094-1.391.259-1.464-1.966-3.258-5.711-4.136-8.052 3.584-3.206 6.822-4.368 11.042-5.945-.011.2.145.387.145.592 0 6.503 5.725 11.788 12.229 11.788 5.828 0 10.654-4.238 11.596-9.798 2.908 1.85 5.72 3.268 7.863 6.01-.5.61-1.04 2.337-1.04 3.187a3.545 3.545 0 003.546 3.544c.277 0 .543-.04.802-.1a31.013 31.013 0 012.434 7.05c-10.17 7.529-29.847 6.502-29.847 6.502s-15.658.817-26.258-4.35c.707-5.11 2.746-9.97 5.754-14.08"
   }), /*#__PURE__*/React.createElement("path", {
@@ -154,7 +169,7 @@ function CassandraIcon({
   })), /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#prefix__g)",
     transform: "matrix(1.25 0 0 -1.25 -43.538 957.313)",
-    fill: "#1287b1"
+    fill: colored ? "#1287b1" : (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))))"))
   }, /*#__PURE__*/React.createElement("path", {
     d: "M119.56 695.794a28.451 28.451 0 003.605 5.931c-.158.425-.25.884-.25 1.367a3.907 3.907 0 003.906 3.906 3.89 3.89 0 001.44-.278c6.465 4.927 14.976 7.075 23.529 5.163a29.763 29.763 0 002.299-.623c-8.453 1.172-17.187-1.419-23.668-6.65a3.906 3.906 0 00-3.6-5.423c-.49 0-.958.093-1.391.258a26.294 26.294 0 01-3.54-6.48c3.079-3.317 6.857-5.94 11.076-7.517-.01.201-.031.4-.031.605 0 6.503 5.27 11.775 11.775 11.775 5.828 0 10.654-4.238 11.596-9.798 2.908 1.85 5.492 4.226 7.634 6.968a3.5 3.5 0 00-.81 2.23 3.545 3.545 0 003.545 3.543c.277 0 .543-.04.802-.1a31.013 31.013 0 012.434 7.05c-10.17 7.53-29.847 6.502-29.847 6.502s-15.658.817-26.258-4.349c.707-5.11 2.746-9.97 5.754-14.08"
   }), /*#__PURE__*/React.createElement("path", {
@@ -167,7 +182,7 @@ function CassandraIcon({
   }, /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#prefix__i)"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#fff' : 'white',
+    fill: colored ? "#fff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M156.222 685.187l10.88 2.595-10.92.557 8.886 6.792-10.084-3.615 6.853 9.497-9.465-6.291 3.31 11.117-6.5-9.163-.149 11.579-4.277-10.314-3.566 10.437.193-12.295-6.163 11.021 3.335-11.702-9.997 7.27 7.831-9.84-12.41 4.564 9.794-7.247-12.56-.386 12.842-3.314-12.853-2.779 12.687-.92-10.699-6.851 11.017 3.994-7.644-9.681 9.66 7.79-3.479-12.991 7.457 10.572-1.045-12.486 4.233 11.319 3.603-11.897.876 11.933 5.348-10.181-3.16 11.645 9.793-7.586-6.322 9.672 10.744-4.186-8.215 8.073 11.016-.866z"
   }))), /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#prefix__j)",
@@ -176,10 +191,10 @@ function CassandraIcon({
     clipPath: "url(#prefix__k)",
     opacity: 0.35
   }, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#373535' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#373535" : (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))))")),
     d: "M40.403 664.37c33.74 33.74 60.687 44.155 85.143 48.91 3.236.63 3.848 7.7 3.848 7.7s.453-5.208 2.718-5.887c2.264-.68 5.207 8.152 5.207 8.152s-2.717-7.926 0-8.379c2.718-.453 7.7 7.7 7.7 7.7s-2.038-7.02-.679-7.473c1.357-.453 8.15 10.19 8.15 10.19s-4.076-7.02-.226-7.7c3.851-.679 9.467 4.791 9.467 4.791s-4.416-5.005-2.448-5.696c8.38-2.945 15.16 7.945 15.16 7.945s-1.572-4.775-5.648-9.983c8.83-2.264 15.39 11.04 15.39 11.04l-6.56-13.304c3.397-1.813 16.985 13.812 16.985 13.812s-7.02-12.228-11.096-14.718c2.264-1.812 10.416 5.434 10.416 5.434s-6.567-8.15-4.076-8.604c3.623-2.944 16.982 15.171 16.982 15.171s-5.207-10.642-12.906-19.02c6.435-3.22 22.418 17.435 22.418 17.435s-.453-6.567-12.002-16.983c8.605 1.132 19.701 17.436 19.701 17.436s-4.076-12.228-13.814-20.832c8.45.88 21.964 21.738 21.964 21.738s-5.207-14.492-15.849-22.87c11.775-2.605 28.758 14.944 28.758 14.944s-6.68-12.455-15.399-17.549c9.738-3.736 23.098 11.662 23.098 11.662s-13.36-20.607-34.645-19.7c-6.984.296-28.109 21.187-73.368 19.473-59.78-2.265-72.46-27.626-104.389-44.835"
   })), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#373535' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#373535" : (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))))")),
     d: "M41.786 666.933c33.74 33.739 60.686 44.154 85.142 48.91 3.237.629 3.85 7.699 3.85 7.699s.451-5.21 2.717-5.887c2.264-.68 5.207 8.15 5.207 8.15s-2.717-7.925 0-8.377c2.718-.452 7.7 7.699 7.7 7.699s-2.038-7.02-.68-7.472c1.358-.453 8.151 10.19 8.151 10.19s-4.076-7.02-.226-7.7c3.85-.68 9.467 4.79 9.467 4.79s-4.416-5.004-2.448-5.695c8.38-2.944 15.157 7.945 15.157 7.945s-1.57-4.775-5.645-9.983c8.83-2.265 15.39 11.04 15.39 11.04l-6.56-13.305c3.397-1.811 16.983 13.812 16.983 13.812s-7.018-12.226-11.094-14.717c2.264-1.812 10.416 5.434 10.416 5.434s-6.567-8.152-4.076-8.604c3.623-2.945 16.982 15.17 16.982 15.17s-5.209-10.642-12.906-19.02c6.435-3.22 22.418 17.436 22.418 17.436s-.453-6.568-12.002-16.984c8.605 1.133 19.701 17.437 19.701 17.437s-4.076-12.228-13.814-20.833c8.45.879 21.964 21.738 21.964 21.738s-5.207-14.492-15.849-22.87c11.775-2.604 28.758 14.944 28.758 14.944s-6.68-12.453-15.399-17.548c9.738-3.736 23.098 11.662 23.098 11.662s-13.36-20.607-34.647-19.701c-6.982.298-28.107 21.189-73.367 19.474-59.779-2.264-72.46-27.625-104.388-44.834"
   })), /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#prefix__l)",
@@ -188,10 +203,10 @@ function CassandraIcon({
     clipPath: "url(#prefix__m)",
     opacity: 0.35
   }, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#373535' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#373535" : (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))))")),
     d: "M39.52 660.68c17.831-8.945 34.136 1.358 54.685-4.433 15.624-4.404 34.646-9.833 60.459-6.096 25.814 3.735 47.893 14.944 58.424 34.985 3.283 8.943 16.642-2.039 16.642-2.039s-9.736 4.076-9.51 2.151c.227-1.924 14.606-8.604 14.606-8.604s-13.021 4.076-12.228 1.02c.792-3.058 16.301-15.286 16.301-15.286s-17.548 13.36-19.019 11.55c-1.473-1.813 7.472-9.173 7.472-9.173s-14.832 9.172-20.04 6.467c-3.747-1.943 15.398-14.506 15.398-14.506s-12.455 9.512-15.399 7.021c-2.943-2.492 14.04-22.87 14.04-22.87s-19.249 20.832-21.172 19.813c-1.926-1.019 5.32-10.983 5.32-10.983s-9.51 10.417-12.113 8.605c-2.604-1.812 13.586-28.87 13.586-28.87s-17.549 27.737-24.795 23.097c11.38-24.966 7.134-28.533 7.134-28.533s-1.452 25.47-15.625 24.796c-7.133-.34 3.396-19.02 3.396-19.02s-9.691 17.061-16.145 16.721c11.894-22.51 7.654-31.667 7.654-31.667s1.967 19.226-14.166 29.925c6.113-5.433-3.836-29.925-3.836-29.925s8.752 36.091-6.455 29.21c-2.403-1.085-.17-18.002-.17-18.002s-3.057 19.362-7.64 18.342c-2.674-.593-16.985-26.833-16.985-26.833s11.72 28.362 8.153 27.173c-2.598-.867-7.473-12.568-7.473-12.568s2.377 11.55 0 12.228c-2.377.68-15.625-12.228-15.625-12.228s9.851 11.55 8.152 13.927c-2.574 3.603-5.59 3.772-9.17 2.377-5.21-2.03-12.228-11.548-12.228-11.548s6.996 9.637 5.773 13.247c-1.963 5.8-22.077-11.209-22.077-11.209s11.888 11.21 9.171 13.587c-2.717 2.377-17.47 1.642-22.078 1.655-13.586.042-18.294 3.23-22.418 6.496"
   })), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#373535' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#373535" : (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))))")),
     d: "M38.84 662.718c17.833-8.945 34.137 1.358 54.686-4.434 15.623-4.402 34.646-9.832 60.46-6.095 25.814 3.736 47.89 14.945 58.422 34.984 3.283 8.944 16.642-2.037 16.642-2.037s-9.736 4.075-9.51 2.15c.227-1.924 14.606-8.604 14.606-8.604s-13.021 4.075-12.228 1.018c.793-3.056 16.304-15.284 16.304-15.284s-17.55 13.361-19.021 11.548c-1.471-1.81 7.473-9.17 7.473-9.17s-14.833 9.17-20.041 6.467c-3.747-1.944 15.398-14.506 15.398-14.506s-12.455 9.511-15.398 7.02c-2.944-2.492 14.04-22.87 14.04-22.87s-19.25 20.832-21.173 19.813c-1.924-1.02 5.322-10.982 5.322-10.982s-9.512 10.416-12.115 8.604c-2.604-1.81 13.586-28.87 13.586-28.87s-17.55 27.738-24.795 23.096c11.379-24.965 7.133-28.532 7.133-28.532s-1.452 25.47-15.625 24.795c-7.133-.34 3.396-19.02 3.396-19.02s-9.691 17.063-16.144 16.723c11.896-22.512 7.654-31.668 7.654-31.668s1.967 19.227-14.166 29.926c6.113-5.434-3.836-29.926-3.836-29.926s8.754 36.091-6.453 29.21c-2.403-1.086-.17-18.002-.17-18.002s-3.06 19.361-7.642 18.342c-2.674-.593-16.985-26.833-16.985-26.833s11.719 28.362 8.153 27.172c-2.598-.865-7.473-12.566-7.473-12.566s2.378 11.548 0 12.227c-2.377.68-15.624-12.227-15.624-12.227s9.85 11.548 8.15 13.926c-2.573 3.603-5.59 3.771-9.17 2.376-5.21-2.029-12.227-11.547-12.227-11.547s6.996 9.638 5.774 13.247c-1.964 5.8-22.077-11.209-22.077-11.209s11.888 11.21 9.17 13.586c-2.717 2.378-17.471 1.642-22.078 1.656-13.586.043-18.293 3.23-22.417 6.496"
   })));
   if (!colormode) return _svgEl;

package/data1/CellIcon.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 CellIcon({
 }, 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 20 20",
     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", {
     fillRule: "evenodd",