@datalayer/icons-react 1.0.9 → 1.0.10

package/data1/esm/M3DbIcon.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,53 +64,55 @@ function M3DbIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 529.017 561.488",
-    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
+    fill: (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     height: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
   }, props, {
+    "data-datalayer-icon": "",
     style: props && props.color != null ? Object.assign({}, props.style, {
-      "--datalayer-icon-fg": props.color
+      "--datalayer-icon-color": props.color,
+      color: props.color
     }) : props && props.style
-  }), title ? /*#__PURE__*/React.createElement("title", {
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("g", {
     strokeWidth: 0.1
   }, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#78dbff' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#78dbff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 75%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M377.824 178.52c-13.035-24.88-40.897-28.154-86.473-33.018-25.19-2.698-48.24 4.525-64.991 1.697-24.73 27.597-17.31 52.953-14.328 79.381.77 6.8 2.39 12.704 4.708 17.875 10.63 6.456 19.976 15.533 27.687 26.74 33.22 16.008 83.17 14.108 108.633 36.377 19.855-10.1 51.08-69.354 24.764-129.053"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#ff7713' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#ff7713" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 65%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 69%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 65%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 69%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 65%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M258.403 212.846c2.849 25.246 25.616 43.398 50.84 40.545 25.244-2.839 43.393-25.608 40.556-50.853-2.862-25.22-25.616-43.378-50.851-40.53-25.243 2.838-43.395 25.61-40.545 50.838"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#c12000' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#c12000" : (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: "M309.032 251.512c-24.145 2.727-46.028-14.709-48.753-38.878-2.712-24.159 14.728-46.019 38.872-48.742 24.158-2.728 46.046 14.708 48.76 38.872 2.725 24.154-14.727 46.026-38.88 48.748zm-10.665-94.63c-28.022 3.156-48.251 28.526-45.086 56.545 3.15 28.033 28.52 48.248 56.548 45.096 28.027-3.172 48.248-28.533 45.09-56.557-3.166-28.016-28.527-48.247-56.552-45.084"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#ffde17' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#ffde17" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 85%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M272.079 211.3c1.986 17.68 17.946 30.412 35.626 28.424 17.69-2 30.399-17.962 28.398-35.636-1.98-17.689-17.935-30.402-35.614-28.412-17.681 1.991-30.41 17.951-28.41 35.624"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M287.53 209.564c1.026 9.158 9.285 15.732 18.44 14.708 9.147-1.025 15.729-9.289 14.691-18.44-1.024-9.158-9.276-15.75-18.43-14.72-9.158 1.035-15.736 9.3-14.702 18.452"
   }), /*#__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: "M283.993 201.886c.376 3.37 3.43 5.79 6.8 5.404 3.356-.363 5.79-3.404 5.412-6.768-.38-3.374-3.438-5.798-6.788-5.41a6.13 6.13 0 00-5.424 6.774m7.084 11.557a2.692 2.692 0 002.972 2.373 2.682 2.682 0 002.363-2.965 2.672 2.672 0 00-2.964-2.373 2.683 2.683 0 00-2.37 2.965"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#78dbff' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#78dbff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 75%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M380.213 368.483c.975-27.907-7.348-52.09-11.498-62.884-3.184 4.645-7.883 8.817-14.744 12.525-10.66-8.445-28.18-19.3-49.867-24.28 31.717 30.202 30.904 80.791 16.383 128.867-16.391 54.248-57.891 90.227-97.482 114.319 102.088-20.299 154.264-84.766 157.208-168.547"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#002c56' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#002c56" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M377.824 178.52c-29.639-68.492-118.35-76.134-157.67-32.444-19.638 21.822-26.191 61.558-16.627 91.111l9.338 5.056c14.52 7.723 26.839 20.215 36.147 36.227 21.313 7.637 32.873 8.04 49.264 20.204-29.981-37.18-33.77-30.216-45.735-47.086-27.348-38.596-12.18-81.464 34.738-85.084 26.705-2.056 58.84 34.59 74.716 65.931 14.733-15.123-3.167-36.1 15.829-53.916"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#002c56' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#002c56" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M342.343 182.45c11.337 2.874 45.573-6.97 31.326-37.564 27.203 32.128 20.51 60.617-.902 76.072 8.968 13.144 4.936 47.318-6.308 58.693-1.263-19.713-7.163-43.995-32.723-63.703-12.244-9.436-28.021-19.396-43.312-29.392-35.105-22.992-72.212-57.637-55.279-97.596 1.484 35.918 73.344 84.898 107.198 93.49m-84.055 76.396c-6.527-5.435-23.808-6.843-33.281-8.632 16.273 12.824 28.853 32.356 36.07 56.37 9.498 31.654 8.727 67.582-2.26 103.904-12.468 41.298-40.088 76.992-82.093 106.091l-5.804 4.03c-1.943 13.377-6.605 26.882-15.355 40.88 48.462-21.246 135.636-59.22 156.835-141.222 21.097-81.615.443-115.968-54.112-161.421"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#002c56' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#002c56" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M152.621 493.28s-1.25-.548-3.664-1.597c-1.21-.52-2.702-1.176-4.48-1.945-1.785-.779-3.866-1.636-6.13-2.843-2.283-1.163-4.84-2.46-7.652-3.895-2.855-1.409-5.747-3.238-9-5.066-1.614-.95-3.33-1.866-5.007-2.944a934.906 934.906 0 01-5.227-3.39c-1.79-1.188-3.656-2.374-5.524-3.673-1.837-1.353-3.741-2.743-5.676-4.177-7.865-5.63-15.946-12.698-24.498-20.724-2.054-2.096-4.16-4.228-6.291-6.404-1.07-1.103-2.139-2.208-3.23-3.33-1.025-1.176-2.066-2.353-3.1-3.55-2.08-2.404-4.237-4.828-6.345-7.359-2.034-2.596-4.096-5.253-6.193-7.94-8.172-10.927-16.095-23.235-23.099-36.999-6.97-13.829-12.924-28.877-17.734-45.46-.55-1.965-1.096-3.933-1.646-5.91-.264-1.008-.573-1.944-.812-3.024l-.708-3.248a1764.17 1764.17 0 00-1.444-6.582c-.226-1.092-.485-2.212-.688-3.308l-.55-3.289c-.671-4.399-1.58-8.819-1.998-13.344C1.44 288.763.793 284.207.6 279.58c-1.302-18.476-.487-37.796 2.5-57.384 2.914-19.608 8.62-39.348 16.506-58.702 3.848-9.724 8.614-19.184 13.736-28.57 5.39-9.233 11.04-18.476 17.602-27.198 6.384-8.856 13.524-17.275 21.12-25.383 3.918-3.919 7.72-8.02 11.924-11.719 2.072-1.889 4.122-3.808 6.218-5.67 2.156-1.804 4.324-3.603 6.492-5.406 17.36-14.426 37.092-26.426 58.09-35.993 2.59-1.277 5.32-2.248 7.972-3.395 2.688-1.066 5.324-2.266 8.054-3.217 5.476-1.89 10.892-4 16.498-5.541l4.182-1.242 2.09-.617 1.04-.312.53-.147c-.281.05.967-.264 1.012-.278l7.856-1.899 3.923-.95c1.364-.298 2.936-.565 4.405-.854l8.943-1.647C232.94 1.724 244.555.382 256.316.16c11.73-.46 23.501.116 35.201 1.227 46.79 4.914 91.994 22.553 129.242 49.778 37.332 27.134 66.598 63.707 84.608 103.511 2.209 5 4.44 9.96 6.269 15.045.945 2.536 1.955 5.042 2.841 7.578.81 2.561 1.646 5.112 2.476 7.662 1.76 5.05 2.944 10.243 4.36 15.334l.503 1.92.23.91.089.454.196.91.752 3.616c.484 2.408 1 4.803 1.496 7.202.846 5.233 1.792 10.652 2.438 15.816.276 2.57.54 5.125.806 7.681l.397 3.824.232 3.824c.27 5.09.627 10.143.556 15.177v7.522c-.121 2.49-.25 4.974-.364 7.45-1.087 19.791-4.263 38.872-9.33 56.683-5.14 17.804-11.882 34.408-19.847 49.495-15.954 30.19-36.23 54.344-56.811 72.254-1.283 1.118-2.52 2.278-3.808 3.344a872.995 872.995 0 00-3.885 3.127c-2.582 2.056-5.031 4.163-7.66 5.985-2.563 1.868-5.08 3.703-7.555 5.495-2.564 1.673-5.075 3.31-7.527 4.9-2.438 1.641-4.918 3.092-7.368 4.485-2.43 1.4-4.773 2.814-7.116 4.096-2.39 1.228-4.72 2.426-6.992 3.582-1.132.58-2.245 1.152-3.35 1.712-1.114.54-2.256 1.021-3.354 1.521-4.42 1.95-8.536 3.919-12.576 5.38-4.016 1.53-7.73 3.035-11.314 4.1-3.562 1.123-6.8 2.268-9.85 3.112-3.045.808-5.793 1.556-8.27 2.212-2.466.712-4.69 1.157-6.6 1.536-1.896.39-3.51.717-4.803.985l-3.899.794s1.266-.482 3.723-1.406c1.239-.465 2.761-1.045 4.577-1.726 1.81-.694 3.923-1.424 6.242-2.456 9.4-3.762 22.87-10.136 38.78-19.93.993-.613 2.012-1.208 3.02-1.854.989-.672 1.99-1.359 3.016-2.056 2.025-1.359 4.114-2.774 6.233-4.214 2.108-1.489 4.183-3.1 6.343-4.696 2.15-1.592 4.342-3.233 6.469-5.056 8.745-6.94 17.547-15.214 26.265-24.569 8.695-9.395 17.299-19.936 25.075-31.881 7.819-11.89 15.09-24.979 21.141-39.243 12.25-28.412 19.89-61.536 19.55-96.49-.023-2.175-.06-4.363-.075-6.554-.123-2.193-.265-4.384-.388-6.597-.143-4.404-.7-8.82-1.17-13.254l-.353-3.334-.53-3.314c-.344-2.22-.69-4.444-1.046-6.672-.784-4.394-1.738-8.526-2.642-12.91-.62-2.37-1.248-4.743-1.867-7.122l-.936-3.57-.232-.895-.112-.445c.167.717-.036-.035-.03.016l-.52-1.642c-1.425-4.369-2.611-8.84-4.326-13.153-.797-2.172-1.603-4.35-2.405-6.54-.854-2.163-1.814-4.284-2.716-6.436-1.744-4.333-3.856-8.527-5.92-12.744-.991-2.137-2.136-4.192-3.288-6.248-1.142-2.065-2.274-4.136-3.424-6.207-1.238-2.01-2.492-4.03-3.73-6.046-1.242-2.036-2.442-4.076-3.83-6.022-1.358-1.958-2.688-3.934-4.034-5.909-1.318-1.99-2.857-3.828-4.273-5.759-2.803-3.894-5.944-7.53-9.041-11.232-1.494-1.885-3.2-3.597-4.828-5.385-1.663-1.757-3.218-3.601-4.95-5.299-3.485-3.364-6.817-6.889-10.536-10.045-7.092-6.659-14.894-12.599-22.825-18.356-32.17-22.421-70.421-37.237-109.97-41.192-9.86-.97-19.791-1.545-29.718-1.192-9.896.107-19.83 1.228-29.543 2.601l-6.976 1.24c-1.185.22-2.282.362-3.548.644l-3.936.9-7.88 1.767-6.64 1.87c-4.805 1.202-9.402 2.945-14.09 4.454-2.343.753-4.59 1.753-6.883 2.623-2.28.928-4.619 1.692-6.819 2.753-4.456 2.05-8.976 3.924-13.265 6.257-2.165 1.132-4.364 2.178-6.485 3.368l-6.342 3.643c-2.14 1.152-4.184 2.465-6.21 3.779l-6.146 3.91-5.906 4.191-2.964 2.09-2.84 2.24c-15.248 11.773-28.931 25.283-40.614 40.049-5.982 7.282-11.144 15.088-16.168 22.896-4.713 7.97-9.288 15.972-13.084 24.264-7.761 16.486-13.494 33.554-17.172 50.617-3.741 17.063-5.397 34.119-5.452 50.667-.138 4.137.155 8.237.286 12.313.06 4.081.609 8.087.918 12.093l.274 2.995c.106.975.268 1.919.39 2.884.276 1.91.539 3.83.807 5.723l.396 2.85c.135.958.37 2.01.547 3.004.388 2.02.77 4.035 1.16 6.036l.557 2.984.153.75c.096.377-.046-.112 0 .07l.084.348.346 1.394c.462 1.865.902 3.722 1.353 5.566.453 1.855.904 3.683 1.345 5.511.55 1.797 1.088 3.587 1.63 5.368 2.026 7.179 4.64 13.967 7.108 20.65 5.21 13.265 11.57 25.27 18.072 36.297 1.689 2.712 3.357 5.4 4.986 8.03 1.743 2.566 3.523 5.042 5.228 7.516.867 1.228 1.726 2.446 2.583 3.654.9 1.161 1.805 2.312 2.688 3.458 1.788 2.294 3.537 4.536 5.248 6.74 7.208 8.53 14.173 16.162 20.996 22.546 13.576 12.845 25.472 21.82 33.863 27.437 4.166 2.899 7.565 4.873 9.757 6.328 2.213 1.41 3.361 2.148 3.361 2.148"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#002c56' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#002c56" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M205.237 252.688c-21.888 13.695-39.368 30.504-49.004 58.224 10.01-5.476 22.035-9.072 35.27-10.142 3.253-6.143 9.704-10.35 17.125-10.35 10.681 0 19.377 8.698 19.377 19.38 0 10.683-8.696 19.376-19.377 19.376-7.981 0-14.852-4.853-17.808-11.764-17.633 1.88-32.493 9.335-40.755 19.523-.966 6.703-1.608 13.88-1.884 21.632-.405 5.532-.4 11.335-.08 17.301 13.788-10.648 32.002-17.796 52.308-19.518 3.23-6.247 9.73-10.535 17.227-10.535 10.679 0 19.365 8.688 19.365 19.37 0 10.687-8.686 19.38-19.365 19.38-7.92 0-14.741-4.782-17.739-11.61-20.734 2.17-38.582 10.884-49.706 23.11 1.65 11.331 3.989 22.827 6.473 33.854 6.401-6.27 14.665-10.679 23.916-12.224 2.345-8.067 9.792-14.001 18.61-14.001 10.683 0 19.37 8.698 19.37 19.38 0 10.678-8.687 19.372-19.37 19.372-6.653 0-12.525-3.364-16.02-8.482-9.807 1.672-17.865 8.4-21.52 17.316 3.523 14.87 6.493 27.811 7.077 36.822.566 5.818.79 11.613.549 17.41 32.523-22.538 63.099-53.93 76.673-98.818 21.734-71.926-2.37-133.61-40.712-154.006"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#002c56' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#002c56" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M208.944 423.074c0-5.384-4.379-9.763-9.753-9.763-5.39 0-9.767 4.379-9.767 9.763 0 5.381 4.377 9.754 9.767 9.754 5.374 0 9.753-4.373 9.753-9.754m18.441-57.89c0-5.373-4.38-9.753-9.75-9.753-5.382 0-9.763 4.38-9.763 9.753 0 5.386 4.381 9.766 9.764 9.766 5.37 0 9.75-4.38 9.75-9.766M218.39 309.8c0-5.385-4.377-9.764-9.762-9.764-5.38 0-9.759 4.38-9.759 9.764 0 5.384 4.379 9.76 9.759 9.76 5.385 0 9.763-4.376 9.763-9.76"
   })));
   if (!colormode) return _svgEl;

package/data1/esm/M3DbNameIcon.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,56 +64,58 @@ function M3DbNameIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 392.572 392.572",
-    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("g", {
     strokeWidth: 0.1
   }, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#78dbff' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#78dbff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 75%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M245.946 78.233c-5.712-10.902-17.924-12.337-37.896-14.469-11.039-1.183-21.142 1.983-28.482.744-10.837 12.095-7.585 23.207-6.278 34.787.336 2.981 1.046 5.568 2.061 7.834 4.659 2.828 8.755 6.807 12.135 11.72 14.558 7.014 36.449 6.182 47.606 15.94 8.703-4.426 22.384-30.393 10.854-56.556"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#ff7713' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#ff7713" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 65%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 69%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 65%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 69%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 65%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M193.611 93.277c1.248 11.064 11.225 19.02 22.28 17.768 11.063-1.244 19.015-11.222 17.772-22.285-1.253-11.053-11.225-19.01-22.284-17.76-11.063 1.242-19.017 11.222-17.768 22.278"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#c12000' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#c12000" : (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: "M215.796 110.223c-10.58 1.194-20.168-6.447-21.364-17.039-1.189-10.587 6.455-20.168 17.035-21.36 10.587-1.196 20.179 6.445 21.37 17.035 1.193 10.585-6.454 20.17-17.04 21.364zm-4.673-41.472c-12.279 1.384-21.144 12.502-19.757 24.781 1.38 12.285 12.498 21.144 24.781 19.761 12.283-1.389 21.144-12.504 19.76-24.784-1.388-12.277-12.501-21.144-24.784-19.758"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#ffde17' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#ffde17" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 85%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M199.603 92.6c.872 7.747 7.864 13.328 15.612 12.456 7.753-.877 13.324-7.872 12.447-15.617-.867-7.752-7.86-13.323-15.607-12.45-7.75.871-13.328 7.866-12.452 15.611"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M206.374 91.839a7.306 7.306 0 1014.521-1.636 7.306 7.306 0 10-14.521 1.636"
   }), /*#__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: "M204.824 88.473a2.692 2.692 0 002.98 2.37 2.687 2.687 0 002.374-2.967 2.69 2.69 0 00-2.976-2.37 2.685 2.685 0 00-2.378 2.967m3.104 5.066a1.181 1.181 0 001.304 1.04 1.173 1.173 0 001.034-1.299 1.17 1.17 0 00-1.298-1.041 1.178 1.178 0 00-1.04 1.3"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#78dbff' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#78dbff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 75%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M246.992 161.483c.426-12.23-3.22-22.828-5.038-27.559-1.395 2.036-3.454 3.865-6.463 5.49-4.67-3.7-12.35-8.458-21.852-10.64 13.899 13.235 13.543 35.405 7.179 56.473-7.184 23.773-25.37 39.541-42.719 50.1 44.737-8.896 67.603-37.148 68.893-73.864"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#002c56' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#002c56" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M245.946 78.233C232.958 48.22 194.08 44.87 176.848 64.016c-8.606 9.563-11.477 26.977-7.286 39.928l4.092 2.216c6.364 3.384 11.762 8.859 15.84 15.876 9.341 3.347 14.409 3.524 21.59 8.855-13.138-16.295-14.798-13.243-20.042-20.636-11.984-16.914-5.338-35.699 15.224-37.287 11.702-.901 25.784 15.157 32.744 28.893 6.454-6.628-1.388-15.82 6.936-23.628"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#002c56' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#002c56" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M230.396 79.956c4.968 1.26 19.972-3.055 13.728-16.461 11.922 14.078 8.99 26.564-.396 33.337 3.931 5.76 2.163 20.736-2.764 25.721-.554-8.64-3.14-19.28-14.34-27.917-5.366-4.135-12.281-8.5-18.981-12.88-15.384-10.077-31.645-25.259-24.225-42.77.652 15.74 32.142 37.205 46.978 40.97m-36.836 33.48c-2.86-2.381-10.434-3-14.585-3.783 7.132 5.62 12.644 14.18 15.808 24.703 4.161 13.873 3.824 29.617-.99 45.535-5.466 18.098-17.569 33.741-35.977 46.493l-2.544 1.767c-.852 5.861-2.894 11.78-6.729 17.914 21.237-9.31 59.44-25.952 68.73-61.888 9.246-35.768.195-50.822-23.713-70.74"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#002c56' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#002c56" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M147.252 216.173l-1.604-.7c-.53-.228-1.186-.516-1.965-.852-.781-.34-1.693-.717-2.685-1.246-1-.51-2.122-1.079-3.355-1.706-1.25-.618-2.517-1.42-3.944-2.22-.705-.417-1.459-.818-2.193-1.29-.742-.48-1.506-.974-2.291-1.486-.784-.52-1.603-1.04-2.42-1.609-.805-.595-1.64-1.203-2.488-1.83-3.447-2.47-6.988-5.566-10.737-9.083-.899-.919-1.823-1.854-2.756-2.807-.47-.483-.936-.968-1.415-1.459-.45-.516-.908-1.032-1.359-1.556-.912-1.053-1.857-2.116-2.781-3.225-.892-1.139-1.795-2.303-2.713-3.48-3.582-4.787-7.055-10.181-10.126-16.215-3.052-6.06-5.661-12.654-7.769-19.92a1021.4 1021.4 0 01-.721-2.59c-.118-.444-.252-.852-.356-1.327l-.31-1.423c-.21-.96-.418-1.917-.634-2.885-.099-.477-.212-.97-.3-1.45l-.242-1.44c-.293-1.927-.692-3.865-.876-5.849-.213-1.978-.496-3.974-.581-6.002-.57-8.098-.215-16.564 1.097-25.148 1.275-8.594 3.776-17.244 7.234-25.726 1.684-4.26 3.774-8.408 6.018-12.52 2.363-4.046 4.839-8.097 7.714-11.92 2.798-3.88 5.926-7.57 9.256-11.124 1.717-1.717 3.384-3.514 5.226-5.134.907-.828 1.806-1.668 2.724-2.487.946-.79 1.895-1.577 2.844-2.368 7.608-6.321 16.258-11.581 25.458-15.773 1.137-.56 2.332-.984 3.493-1.488 1.177-.467 2.333-.994 3.532-1.41 2.399-.828 4.772-1.753 7.23-2.428l1.831-.545.914-.27.458-.137.234-.064c-.124.022.422-.116.442-.122l3.442-.832 1.72-.416c.597-.13 1.286-.248 1.93-.375l3.919-.721c5.107-.759 10.195-1.348 15.35-1.446 5.14-.2 10.298.052 15.426.54 20.505 2.152 40.316 9.882 56.637 21.812 16.362 11.892 29.187 27.92 37.078 45.363.969 2.19 1.946 4.365 2.749 6.593.415 1.112.857 2.21 1.244 3.322.356 1.121.721 2.24 1.084 3.358.772 2.214 1.29 4.488 1.913 6.72l.219.842.101.397.038.2.088.399.329 1.584c.212 1.056.439 2.105.655 3.156.372 2.293.786 4.668 1.069 6.932.12 1.125.237 2.245.353 3.365l.174 1.676.102 1.676c.119 2.23.275 4.445.243 6.652v3.296c-.053 1.09-.108 2.18-.159 3.265-.476 8.672-1.868 17.035-4.088 24.84-2.254 7.803-5.208 15.078-8.7 21.69-6.99 13.23-15.876 23.816-24.896 31.665-.561.49-1.104.999-1.669 1.465-.575.462-1.144.92-1.701 1.37-1.132.901-2.204 1.824-3.358 2.624-1.122.818-2.225 1.622-3.31 2.41-1.124.73-2.224 1.448-3.299 2.146-1.068.718-2.155 1.354-3.228 1.965-1.065.613-2.092 1.232-3.119 1.795a733.564 733.564 0 01-3.064 1.57l-1.468.751c-.489.235-.989.447-1.469.665-1.939.854-3.741 1.718-5.512 2.358-1.759.67-3.39 1.33-4.959 1.797-1.56.492-2.978.993-4.316 1.363-1.334.354-2.538.682-3.626.97-1.079.312-2.054.507-2.891.674-.832.17-1.537.313-2.104.43-1.128.231-1.71.348-1.71.348l1.631-.616c.544-.204 1.212-.457 2.006-.757.793-.303 1.72-.623 2.736-1.075 4.12-1.65 10.024-4.442 16.996-8.734.433-.268.881-.53 1.321-.812.435-.295.873-.596 1.323-.902a573.81 573.81 0 002.732-1.846c.924-.652 1.833-1.36 2.778-2.059.943-.696 1.904-1.416 2.836-2.216 3.831-3.041 7.69-6.667 11.511-10.765 3.81-4.118 7.581-8.738 10.987-13.974 3.428-5.21 6.614-10.945 9.268-17.196 5.366-12.452 8.716-26.968 8.566-42.285-.01-.955-.025-1.913-.034-2.873-.054-.962-.115-1.922-.171-2.89-.061-1.932-.304-3.866-.512-5.81l-.155-1.46-.232-1.452c-.15-.975-.3-1.948-.457-2.926-.343-1.925-.763-3.734-1.159-5.657-.272-1.037-.546-2.077-.818-3.121l-.411-1.566-.101-.39-.048-.195c.073.313-.016-.016-.014.007l-.226-.72c-.626-1.915-1.146-3.874-1.896-5.764l-1.056-2.867c-.372-.948-.795-1.877-1.188-2.82-.764-1.899-1.692-3.736-2.595-5.584-.433-.937-.936-1.837-1.441-2.739-.5-.905-.996-1.813-1.5-2.72-.544-.88-1.095-1.766-1.636-2.65-.543-.89-1.071-1.786-1.679-2.639-.593-.859-1.176-1.724-1.767-2.59-.576-.871-1.252-1.677-1.872-2.522-1.228-1.707-2.605-3.301-3.962-4.923-.655-.826-1.404-1.577-2.116-2.36-.728-.77-1.41-1.578-2.17-2.322-1.526-1.475-2.988-3.019-4.617-4.403-3.108-2.917-6.528-5.52-10.004-8.044-14.097-9.825-30.86-16.317-48.192-18.05-4.32-.426-8.673-.678-13.023-.523-4.338.045-8.689.537-12.946 1.14l-3.058.541c-.52.097-1 .16-1.556.284l-1.724.395-3.452.774-2.912.82c-2.105.526-4.12 1.29-6.173 1.951-1.027.33-2.013.768-3.017 1.148-1.002.408-2.023.743-2.988 1.208-1.954.897-3.934 1.72-5.814 2.741-.949.496-1.912.955-2.841 1.478l-2.781 1.596c-.936.504-1.832 1.078-2.72 1.654l-2.694 1.714-2.588 1.837-1.3.917-1.242.98c-6.684 5.16-12.68 11.082-17.8 17.551-2.622 3.193-4.883 6.612-7.086 10.035-2.065 3.493-4.07 7-5.733 10.633a103.245 103.245 0 00-7.527 22.183c-1.638 7.477-2.365 14.952-2.388 22.204-.061 1.813.067 3.61.124 5.396.028 1.79.268 3.544.404 5.3l.119 1.312c.047.426.117.841.17 1.264.123.836.237 1.678.354 2.508l.173 1.25c.06.42.164.88.242 1.315.17.885.337 1.77.506 2.645l.246 1.308.066.328c.042.167-.018-.048 0 .031l.039.153.15.611c.2.817.397 1.63.593 2.44.2.812.397 1.613.589 2.413l.716 2.355c.887 3.144 2.033 6.12 3.113 9.048 2.284 5.812 5.071 11.075 7.92 15.907.74 1.188 1.474 2.366 2.186 3.518.762 1.126 1.542 2.211 2.289 3.295.383.537.759 1.072 1.135 1.6.393.51.79 1.015 1.177 1.517.784 1.004 1.55 1.987 2.299 2.952 3.16 3.74 6.213 7.083 9.201 9.882 5.95 5.63 11.165 9.562 14.841 12.024 1.827 1.27 3.314 2.136 4.278 2.774.968.616 1.47.94 1.47.94"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#002c56' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#002c56" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M170.311 110.737c-9.593 6.002-17.252 13.368-21.475 25.516 4.387-2.4 9.658-3.974 15.458-4.445 1.425-2.69 4.25-4.535 7.502-4.535 4.682 0 8.495 3.811 8.495 8.494 0 4.681-3.813 8.49-8.495 8.49-3.497 0-6.506-2.128-7.802-5.154-7.73.822-14.24 4.09-17.862 8.554a88.368 88.368 0 00-.825 9.48c-.177 2.426-.175 4.968-.035 7.583 6.043-4.667 14.024-7.799 22.923-8.553 1.415-2.739 4.264-4.618 7.55-4.618 4.68 0 8.486 3.807 8.486 8.488 0 4.684-3.807 8.494-8.485 8.494-3.474 0-6.462-2.096-7.775-5.088-9.085.952-16.908 4.77-21.784 10.128.724 4.965 1.748 10.002 2.836 14.834 2.808-2.745 6.43-4.677 10.483-5.356 1.025-3.534 4.29-6.136 8.156-6.136 4.682 0 8.486 3.812 8.486 8.494 0 4.68-3.804 8.49-8.486 8.49a8.492 8.492 0 01-7.022-3.718c-4.298.733-7.829 3.681-9.429 7.59 1.543 6.516 2.844 12.186 3.1 16.135.25 2.55.347 5.09.24 7.63 14.252-9.877 27.653-23.634 33.601-43.305 9.526-31.52-1.037-58.553-17.841-67.492"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#002c56' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#002c56" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M171.936 185.407a4.283 4.283 0 00-4.274-4.279 4.284 4.284 0 00-4.282 4.279 4.281 4.281 0 004.282 4.274 4.28 4.28 0 004.274-4.274m8.082-25.37a4.28 4.28 0 00-4.272-4.274 4.283 4.283 0 00-4.28 4.274c0 2.36 1.92 4.28 4.28 4.28a4.281 4.281 0 004.272-4.28m-3.943-24.27a4.283 4.283 0 00-4.279-4.28 4.283 4.283 0 00-4.277 4.28 4.282 4.282 0 004.277 4.276 4.281 4.281 0 004.279-4.276"
   }), /*#__PURE__*/React.createElement("g", {
-    fill: "#002c56"
+    fill: colored ? "#002c56" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
   }, /*#__PURE__*/React.createElement("path", {
     d: "M101.239 391.243H86.565c-7.213 0-13.992-4.74-16.477-11.514l-34.652-94.424h-9.585v106.087H0V275.615c0-8.91 7.248-16.154 16.159-16.154h25.073c7.212 0 13.987 4.728 16.477 11.495l34.652 94.433h3.087l34.648-94.426c2.492-6.774 9.265-11.502 16.479-11.502h25.078c8.903 0 16.151 7.244 16.151 16.154v115.777h-25.848V285.305h-9.585l-34.655 94.424c-2.483 6.775-9.261 11.514-16.477 11.514m259.874-52.891h-82.032v-25.85h82.032a5.62 5.62 0 005.611-5.617V290.92a5.619 5.619 0 00-5.61-5.614H250.882a5.62 5.62 0 00-5.614 5.614v15.966h-25.846V290.92c0-17.35 14.112-31.458 31.46-31.458h110.23c17.348 0 31.459 14.108 31.459 31.458v15.966c0 17.35-14.11 31.467-31.459 31.467"
   }), /*#__PURE__*/React.createElement("path", {

package/data1/esm/McpIcon.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,7 +63,7 @@ function McpIcon({
 }, 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)"),
     fillRule: "evenodd",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     style: {
@@ -62,10 +75,12 @@ function McpIcon({
     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: "M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z"

package/data1/esm/MicrosoftIcon.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,28 +64,30 @@ function MicrosoftIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 50 50",
-    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 ? '#f25022' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#f25022" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 59%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M0 0h23.8v23.8H0z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#7fba00' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#7fba00" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 66%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 68%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 66%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 68%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 66%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M26.2 0H50v23.8H26.2z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#00a4ef' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#00a4ef" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M0 26.2h23.8V50H0z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#ffb900' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#ffb900" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 77%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 57%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 77%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 57%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 77%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M26.2 26.2H50V50H26.2z"
   }));
   if (!colormode) return _svgEl;