@datalayer/icons-react 1.0.9 → 1.0.10

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,6 +56,8 @@ function DocusaurusIcon({
   title,
   titleId,
   size,
+  colored,
+  themed,
   colormode,
   ...props
 }, svgRef) {
@@ -50,25 +65,27 @@ function DocusaurusIcon({
     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"

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,
+  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

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,29 +56,33 @@ function DollardHeavyIcon({
   title,
   titleId,
   size,
+  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"

package/data2/DollardIcon.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,30 +56,34 @@ function DollardIcon({
   title,
   titleId,
   size,
+  colored,
+  themed,
   colormode,
   ...props
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 500 500",
-    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: "#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))))")),
     strokeWidth: 42.553,
     d: "M146.282 315.957c-2.128 73.405 32.978 106.383 110.638 108.511 82.979 1.064 120.213-36.17 115.958-107.447-6.383-61.702-65.958-77.66-112.766-84.042-51.064-18.085-105.32-26.596-105.32-101.064 0-51.064 34.043-84.043 105.32-82.979 63.83 0 103.191 26.596 102.127 89.362"
   }), /*#__PURE__*/React.createElement("path", {
-    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))))")),
     strokeWidth: 31.915,
     d: "M257.984 0v500"
   }));