@datalayer/icons-react 1.0.8 → 1.0.10

package/data2/DockerNameIcon.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);
 }
 
@@ -43,37 +56,41 @@ function DockerNameIcon({
   title,
   titleId,
   size,
-  colormoded,
+  colored,
+  themed,
+  colormode,
   ...props
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 256 255.952",
-    fill: "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,
-    width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "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: "none",
-    stroke: "#394d54",
+    stroke: colored ? "#394d54" : (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))))")),
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 7.77,
     d: "M150.792 243.098l-.03-18.913-.093-33.785m19.131 14.56l-19.038 19.225 19.132 18.975M42.36 224.436c.092-4.056-1.087-8.2-3.476-11.554-3.441-4.833-9.012-8.133-15.123-8.204-.408 0-.811 0-1.221.03-2.416.15-4.756.486-6.826 1.347-13.617 5.666-16.03 24.574-4.54 33.128 9.948 7.409 24.42 4.384 29.433-6.92 1.059-2.388 1.753-5.4 1.753-7.828v-34.192m91.87 16.69c-2.819-1.823-6.108-2.48-9.362-2.475-.352 0-.715.018-1.033.031-9.407.405-18.13 7.053-18.13 19.946 0 15.244 16.345 23.471 28.557 16.283m54.858-1.66c9.622-8.242 28.901-24.768 28.901-24.768s-.703-1.33-1.158-1.941c-3.89-5.221-9.834-7.828-16.094-7.828-15.473 0-27.07 20.006-11.649 34.537 1.068 1.006 2.535 1.794 4.165 2.474 5.659 2.359 13.406 2.165 17.597-.94M73.981 204.584c-.439.008-.875.054-1.315.063-11.732.215-20.192 12.401-17.629 23.703 2.498 11.013 14.53 17.535 24.925 13.934 12.105-3.174 17.042-18.418 10.395-28.713-3.635-5.631-9.797-9.112-16.376-8.987zm178.134.376c-4.75.013-9.378 1.676-12.807 4.884-5.407 4.464-6.581 10.1-6.512 17.222l.156 16.188"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "#019bc6",
+    fill: colored ? "#019bc6" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M252.722 63.205c-8.81-5.123-20.49-5.738-30.325-2.87-1.228-10.654-8.196-19.874-16.392-26.43l-3.278-2.665-2.869 3.279c-5.532 6.352-7.171 17.006-6.351 25.202.614 5.942 2.458 12.09 6.146 17.007-2.868 1.639-5.942 3.893-8.81 4.917-5.737 2.05-12.09 4.098-18.236 4.098h-13.728v-28.89h-26.637V5.628h-30.735v24.588H50.283v26.637H23.646v28.685H.698l-.41 3.074c-1.025 13.113.614 25.817 6.146 37.906l2.254 4.508.204.41c16.187 27.456 44.463 38.93 75.403 38.93 59.83 0 109.21-26.841 131.75-83.188 15.162.82 30.734-3.689 38.11-18.236L256 65.253zM54.381 36.363h20.49v22.539H54.38zm26.841 90.565c0 3.483-2.868 6.352-6.351 6.352-3.484 0-6.352-2.869-6.352-6.352s2.868-6.352 6.352-6.352c3.483.205 6.351 2.869 6.351 6.352zM54.381 63h20.49v22.538H54.38zm-26.637 0h22.539v22.538H27.744zm56.757 102.858c-32.374-.205-49.79-11.064-64.133-25.407 4.303.205 8.4.41 12.089.41 3.278 0 6.556 0 9.63-.205 7.991-.41 14.957-1.434 20.695-3.074 4.712 10.86 13.318 20.9 28.685 28.276zm17.006-80.32H78.97V63h22.538zm0-26.636H78.97v-22.54h22.538zm26.637 26.636h-22.539V63h22.54zm0-26.636h-22.539v-22.54h22.54zm0-26.637h-22.539V9.726h22.54zm26.637 53.273h-22.539V63h22.539zM76.51 122.83c-.41-.205-1.025-.41-1.639-.41-2.459 0-4.508 2.049-4.508 4.508s2.05 4.508 4.508 4.508c2.459 0 4.508-2.05 4.508-4.508 0-.615-.204-1.23-.41-1.64-.41.615-.82 1.025-1.64 1.025a1.837 1.837 0 01-1.844-1.844c.204-.82.614-1.434 1.024-1.64z"
   }));
-  if (!colormoded) return _svgEl;
+  if (!colormode) return _svgEl;
   return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
-    mode: typeof colormoded === "string" ? colormoded : undefined
+    mode: typeof colormode === "string" ? colormode : undefined
   }, _svgEl);
 }
 const ForwardRef = React.forwardRef(DockerNameIcon);

package/data2/DocusaurusIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const DocusaurusIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormoded?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
+declare const DocusaurusIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormode?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default DocusaurusIcon;

package/data2/DocusaurusIcon.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);
 }
 
@@ -43,32 +56,36 @@ function DocusaurusIcon({
   title,
   titleId,
   size,
-  colormoded,
+  colored,
+  themed,
+  colormode,
   ...props
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     viewBox: "0 0 256 217.631",
-    fill: "currentColor",
-    "aria-hidden": "true",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    fill: (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
   }, props, {
+    "data-datalayer-icon": "",
     style: props && props.color != null ? Object.assign({}, props.style, {
-      "--datalayer-icon-fg": props.color
+      "--datalayer-icon-color": props.color,
+      color: props.color
     }) : props && props.style
-  }), title ? /*#__PURE__*/React.createElement("title", {
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("g", {
     fillRule: "evenodd",
     transform: "translate(-3.938 -22.615) scale(1.31282)"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: "#fff",
+    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: "M99 52h84v34H99z"
   }), /*#__PURE__*/React.createElement("g", {
-    fill: "#3ecc5f"
+    fill: colored ? "#3ecc5f" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 67%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 67%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 67%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 67%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 67%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
   }, /*#__PURE__*/React.createElement("path", {
     d: "M23 163c-7.398 0-13.843-4.027-17.303-10A19.886 19.886 0 003 163c0 11.046 8.954 20 20 20h20v-20H23z"
   }), /*#__PURE__*/React.createElement("path", {
@@ -76,18 +93,18 @@ function DocusaurusIcon({
   }), /*#__PURE__*/React.createElement("path", {
     d: "M143 183h30v-40h-30z"
   })), /*#__PURE__*/React.createElement("path", {
-    fill: "#44d860",
+    fill: colored ? "#44d860" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M193 158c-.22 0-.428.037-.64.064l-.116-.45a4.997 4.997 0 003.075-4.613 5 5 0 00-5-5 4.96 4.96 0 00-3.016 1.036l-.335-.336c.627-.836 1-1.862 1-2.987a5 5 0 00-9.599-1.959l-.445-.115c.027-.2.064-.42.064-.64a5 5 0 10-10 0c0 .22.037.428.064.64l-.445.115a5 5 0 00-9.599 1.959 5.02 5.02 0 001 2.987A19.93 19.93 0 00153 163c0 11.046 8.954 20 20 20 9.34 0 17.16-6.4 19.36-15.064.2.027.42.064.64.064a5 5 0 100-10"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "#3ecc5f",
+    fill: colored ? "#3ecc5f" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 67%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 67%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 67%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 67%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 67%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M153 123h30v-20h-30z"
   }), /*#__PURE__*/React.createElement("use", {
-    fill: "#44d860",
+    fill: colored ? "#44d860" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     xlinkHref: "#prefix__A"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M63 55.5a2.5 2.5 0 01-2.5-2.5 7.51 7.51 0 00-7.5-7.5 7.51 7.51 0 00-7.5 7.5 2.5 2.5 0 11-5 0c0-6.893 5.607-12.5 12.5-12.5S65.5 46.107 65.5 53a2.5 2.5 0 01-2.5 2.5"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "#ffff50",
+    fill: colored ? "#ffff50" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 93%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 41%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 93%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 41%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 93%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M103 183h60c11.046 0 20-8.954 20-20V93h-60c-11.046 0-20 8.954-20 20v70z"
   }), /*#__PURE__*/React.createElement("use", {
     xlinkHref: "#prefix__B"
@@ -109,17 +126,17 @@ function DocusaurusIcon({
   }), /*#__PURE__*/React.createElement("path", {
     d: "M183 61.6c-.012 0-.022-.006-.034-.005-3.1.105-4.552 3.196-5.842 5.923-1.346 2.85-2.387 4.703-4.093 4.647-1.9-.068-2.97-2.202-4.113-4.46-1.314-2.593-2.814-5.535-5.963-5.425-3.046.104-4.513 2.794-5.807 5.167-1.377 2.528-2.314 4.065-4.12 3.994-1.927-.07-2.95-1.805-4.136-3.813-1.32-2.236-2.848-4.75-5.936-4.664-2.994.103-4.465 2.385-5.763 4.4-1.373 2.13-2.335 3.428-4.165 3.35-1.973-.07-2.992-1.5-4.17-3.177-1.324-1.873-2.816-3.993-5.895-3.9-2.928.1-4.4 1.97-5.696 3.618-1.232 1.564-2.194 2.802-4.23 2.724a1 1 0 10-.072 2c3.017.1 4.545-1.8 5.872-3.487 1.177-1.496 2.193-2.787 4.193-2.855 1.926-.082 2.83 1.115 4.195 3.045 1.297 1.834 2.77 3.914 5.73 4.02 3.103.104 4.596-2.215 5.918-4.267 1.182-1.834 2.202-3.417 4.15-3.484 1.793-.067 2.77 1.35 4.145 3.68 1.297 2.197 2.766 4.686 5.787 4.796 3.125.108 4.634-2.62 5.95-5.035 1.14-2.088 2.214-4.06 4.12-4.126 1.793-.042 2.728 1.595 4.1 4.33 1.292 2.553 2.757 5.445 5.825 5.556l.17.003c3.064 0 4.518-3.075 5.805-5.794 1.14-2.4 2.217-4.68 4.067-4.773v-2z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "#3ecc5f",
+    fill: colored ? "#3ecc5f" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 67%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 67%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 67%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 67%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 67%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M83 183h40v-40H83z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "#44d860",
+    fill: colored ? "#44d860" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M143 158c-.22 0-.428.037-.64.064l-.116-.45a4.997 4.997 0 003.075-4.613 5 5 0 00-5-5 4.96 4.96 0 00-3.016 1.036l-.335-.336c.627-.836 1-1.862 1-2.987a5 5 0 00-9.599-1.959l-.445-.115c.027-.2.064-.42.064-.64a5 5 0 10-10 0c0 .22.037.428.064.64l-.445.115a5 5 0 00-9.599 1.959 5.02 5.02 0 001 2.987A19.93 19.93 0 00103 163c0 11.046 8.954 20 20 20 9.34 0 17.16-6.4 19.36-15.064.2.027.42.064.64.064a5 5 0 100-10"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "#3ecc5f",
+    fill: colored ? "#3ecc5f" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 67%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 67%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 67%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 67%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 67%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M83 123h40v-20H83z"
   }), /*#__PURE__*/React.createElement("use", {
     x: -60,
-    fill: "#44d860",
+    fill: colored ? "#44d860" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     xlinkHref: "#prefix__A"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M143 41.75a2.92 2.92 0 01-.5-.05 2.52 2.52 0 01-.47-.14c-.15-.06-.3-.14-.43-.23l-.38-.3c-.1-.12-.22-.24-.3-.38a2.63 2.63 0 01-.231-.43 2.62 2.62 0 01-.139-.47c-.03-.16-.05-.33-.05-.5s.02-.33.05-.5.08-.3.14-.47a2.63 2.63 0 01.231-.43l.3-.38c.12-.1.25-.22.38-.3a1.99 1.99 0 01.43-.23 2.52 2.52 0 01.47-.14c.32-.07.65-.07.98 0 .16.03.32.08.47.14s.3.14.43.23l.38.3a3.68 3.68 0 01.31.38 2.55 2.55 0 01.23.43c.06.16.1.3.14.47a2.81 2.81 0 01.05.49 2.55 2.55 0 01-.73 1.77c-.12.1-.25.22-.38.3a1.99 1.99 0 01-.43.23c-.15.06-.3.1-.47.14a2.07 2.07 0 01-.5.05M163 40.5a2.55 2.55 0 01-1.77-.73 3.68 3.68 0 01-.31-.38 2.63 2.63 0 01-.231-.43 2.62 2.62 0 01-.139-.47c-.03-.16-.05-.33-.05-.5a2.55 2.55 0 01.73-1.77c.12-.1.25-.22.38-.3a1.99 1.99 0 01.43-.23 2.52 2.52 0 01.47-.14c.32-.07.66-.07.98 0 .16.03.32.08.47.14s.3.14.43.23l.38.3a2.53 2.53 0 01.73 1.77 2.81 2.81 0 01-.05.49c-.03.16-.08.32-.14.47a3.55 3.55 0 01-.23.43 3.68 3.68 0 01-.31.38c-.12.1-.25.22-.38.3a1.99 1.99 0 01-.43.23c-.15.06-.3.1-.47.14a2.07 2.07 0 01-.5.05"
@@ -130,9 +147,9 @@ function DocusaurusIcon({
     id: "prefix__B",
     d: "M168.02 124h-50.04a1 1 0 110-2h50.04a1 1 0 110 2"
   })));
-  if (!colormoded) return _svgEl;
+  if (!colormode) return _svgEl;
   return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
-    mode: typeof colormoded === "string" ? colormoded : undefined
+    mode: typeof colormode === "string" ? colormode : undefined
   }, _svgEl);
 }
 const ForwardRef = React.forwardRef(DocusaurusIcon);

package/data2/DollardBankNoteIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const DollardBankNoteIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormoded?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
+declare const DollardBankNoteIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormode?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default DollardBankNoteIcon;

package/data2/DollardBankNoteIcon.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);
 }
 
@@ -43,50 +56,54 @@ function DollardBankNoteIcon({
   title,
   titleId,
   size,
-  colormoded,
+  colored,
+  themed,
+  colormode,
   ...props
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 72 72",
-    fill: "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,
-    width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "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: "#FFF",
+    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: "M14.639 23.038h46.414v27.88H14.639z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "#5C9E31",
+    fill: colored ? "#5C9E31" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M22.285 48.715h31.11v2.938h-31.11zm-2.508-26.379h31.11v2.938h-31.11z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "#5C9E31",
+    fill: colored ? "#5C9E31" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M59.36 20.73v.61H56.3a1 1 0 00-.99-.92H23.4a1 1 0 00-.99.92h-8.89V22h-.58v30.62h9.46c0 .55.45 1 1 1h31.91c.55 0 1-.45 1-1h6V20.73h-2.95zm0 25.18c-.13-.01-.28-.01-.43-.01-2.15 0-3.95 1.68-4.05 3.81H20.33c-.09-2.13-1.88-3.81-4.05-3.81-.14 0-.27 0-.39.01V28c.12.01.25.01.39.01 2.16 0 3.94-1.65 4.05-3.76h34.55c.13 2.11 1.91 3.76 4.05 3.76.15 0 .3 0 .43-.01v17.91z"
   }), /*#__PURE__*/React.createElement("ellipse", {
     cx: 37.34,
     cy: 36.676,
-    fill: "#5C9E31",
-    stroke: "#5C9E31",
+    fill: colored ? "#5C9E31" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    stroke: colored ? "#5C9E31" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     strokeMiterlimit: 10,
     strokeWidth: 2,
     rx: 16.171,
     ry: 10.009
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "#D0CFCE",
+    fill: colored ? "#D0CFCE" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M46.028 22.378v29.286c0 .105-.02.2-.05.297a1 1 0 01-.95.66h-15.34a1 1 0 01-.95-.66.975.975 0 01-.05-.297V22.378c0-.105.02-.201.05-.297a1 1 0 01.95-.66h15.34a1 1 0 01.95.66c.03.096.05.192.05.297z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "#5C9E31",
+    fill: colored ? "#5C9E31" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M48.753 29.585c2.94 1.813 4.758 4.32 4.758 7.09 0 2.795-1.85 5.322-4.834 7.138M24.74 42.95c-2.234-1.717-3.571-3.899-3.571-6.274 0-2.57 1.565-4.915 4.139-6.687"
   }), /*#__PURE__*/React.createElement("g", {
     fill: "none",
-    stroke: "#000",
+    stroke: colored ? "#000" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     strokeLinecap: "round",
     strokeMiterlimit: 10,
     strokeWidth: 2
@@ -102,9 +119,9 @@ function DollardBankNoteIcon({
     strokeLinejoin: "round",
     d: "M39.663 34.22c-.219-.85-1.165-1.491-2.3-1.491h0c-1.295 0-2.346.836-2.346 1.868s1.05 1.869 2.347 1.869l-.048.007c1.296 0 2.347.836 2.347 1.868s-1.05 1.869-2.347 1.869h0c-1.134 0-2.08-.64-2.299-1.492m2.323-5.989v-1.781m0 11.043V40.21"
   })));
-  if (!colormoded) return _svgEl;
+  if (!colormode) return _svgEl;
   return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
-    mode: typeof colormoded === "string" ? colormoded : undefined
+    mode: typeof colormode === "string" ? colormode : undefined
   }, _svgEl);
 }
 const ForwardRef = React.forwardRef(DollardBankNoteIcon);

package/data2/DollardHeavyIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const DollardHeavyIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormoded?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
+declare const DollardHeavyIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormode?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default DollardHeavyIcon;

package/data2/DollardHeavyIcon.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);
 }
 
@@ -43,36 +56,40 @@ function DollardHeavyIcon({
   title,
   titleId,
   size,
-  colormoded,
+  colored,
+  themed,
+  colormode,
   ...props
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 72 72",
-    fill: "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,
-    width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "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: "#9b9b9a",
+    fill: colored ? "#9b9b9a" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M35.5 33c-1.76 0-7.5-.397-7.5-5.5s5.74-5.5 7.5-5.5c8.5 0 8.5 3.996 8.5 5.5a3.5 3.5 0 007 0c0-6.68-4.23-11.05-11.5-12.192V12.5a4 4 0 00-8 0v2.904C25.088 16.719 21 21.244 21 27.5 21 34.977 26.827 40 35.5 40c2.94 0 8.5 1.15 8.5 5.5S38.44 51 35.5 51c-1.76 0-7.5-.397-7.5-5.5a3.5 3.5 0 00-7 0c0 6.255 4.088 10.78 10.5 12.096V59.5a4 4 0 008 0v-1.899C45.686 56.373 51 52.273 51 45.5 51 37.294 43.202 33 35.5 33z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "none",
-    stroke: "#000",
+    stroke: colored ? "#000" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     strokeMiterlimit: 10,
     strokeWidth: 2,
     d: "M35.5 33c-1.76 0-7.5-.397-7.5-5.5s5.74-5.5 7.5-5.5c8.5 0 8.5 3.996 8.5 5.5a3.5 3.5 0 007 0c0-6.68-4.23-11.05-11.5-12.192V12.5a4 4 0 00-8 0v2.904C25.088 16.719 21 21.244 21 27.5 21 34.977 26.827 40 35.5 40c2.94 0 8.5 1.15 8.5 5.5S38.44 51 35.5 51c-1.76 0-7.5-.397-7.5-5.5a3.5 3.5 0 00-7 0c0 6.255 4.088 10.78 10.5 12.096V59.5a4 4 0 008 0v-1.899C45.686 56.373 51 52.273 51 45.5 51 37.294 43.202 33 35.5 33z"
   }));
-  if (!colormoded) return _svgEl;
+  if (!colormode) return _svgEl;
   return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
-    mode: typeof colormoded === "string" ? colormoded : undefined
+    mode: typeof colormode === "string" ? colormode : undefined
   }, _svgEl);
 }
 const ForwardRef = React.forwardRef(DollardHeavyIcon);

package/data2/DollardIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const DollardIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormoded?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
+declare const DollardIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormode?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default DollardIcon;