@datalayer/icons-react 1.0.9 → 1.0.10

package/eggs/FlexedBicepsIcon.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,19 +64,21 @@ function FlexedBicepsIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 72 72",
-    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", {
-    fill: "#FCEA2B"
+    fill: colored ? "#FCEA2B" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
   }, /*#__PURE__*/React.createElement("path", {
     d: "M63.11 54.165c-10.969 9.44-26.36 11.68-46.41 11.563 0 0-3.74 1.15-4.597-3.565 0 0-.77-20.887 3.809-35.548 0 0-.195-5.981.029-9.898a2.574 2.574 0 01.828-1.753c5.757-5.319 8.349-6.098 8.349-6.098l8.368-1.481c1.325.906 4.228 4.18 3.75 9.995l.107-.4 3.215.902c1.123.341 1.859 1.525 1.841 2.654-.01 1.17-2.805 2.046-2.805 2.046l-6.118 1.383c-1.831 2.874-5.594 3.176-7.279 3.098-.088-.243-.593-.02-.193 0 .594 1.5 1.289 5.115 1.922 11.807l.176 1.86c.048.527.316 4.73.384 7.477 1.812-4.413 6.636-12.561 15.735-13.847 13.463-1.92 20.165 8.495 20.165 8.495s.234.272.526.77c2.066 3.448 1.247 7.91-1.802 10.54z"
   }), /*#__PURE__*/React.createElement("path", {
@@ -71,14 +86,14 @@ function FlexedBicepsIcon({
   }), /*#__PURE__*/React.createElement("path", {
     d: "M26.508 26.81c-.41-.02-.74-.06-.94-.09l.64-.49c.11.14.21.33.3.58z"
   })), /*#__PURE__*/React.createElement("g", {
-    fill: "#F1B31C"
+    fill: colored ? "#F1B31C" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
   }, /*#__PURE__*/React.createElement("path", {
     d: "M21.922 26.23s5.344-4.986 1.615-6.38l12.76-.419.672-1.142.22-1.844c1.07.178 3.364.946 3.64 1.012 0 0 2.405 1.873.45 4.093l-7.78 2.235s-4.723 3.803-11.577 2.445z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M21.922 26.23c.794 9.218 2.56 25.641 2.07 27.745-.045.7.655.81 1.012.296.829-.667 2.767-2.597 3.818-5.195 0-5.762-.666-12.458-2.219-22.262-.57-1.585-2.939-1.566-4.681-.584zm26.277 7.87s10.239 6.972 3.106 16.42c0 0 2.132 8.516.155 9.85-1.977 1.334 20.619-5.545 12.136-18.563 0 0-5.158-7.573-15.397-7.708z"
   })), /*#__PURE__*/React.createElement("g", {
-    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    stroke: "#000",
+    fill: "none",
+    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",
     strokeLinejoin: "round",
     strokeMiterlimit: 10,

package/eggs/GoldorakNoopIcon.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);
 }
 
@@ -55,10 +68,12 @@ function GoldorakNoopIcon({
     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("g", {
     color: "#000"

package/eggs/PirateFlag2Icon.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,22 +64,24 @@ function PirateFlag2Icon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 750 470",
-    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", {
     d: "M0 0h750v470H0V0z"
   }), /*#__PURE__*/React.createElement("g", {
     fillRule: "evenodd",
-    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))))")),
     strokeOpacity: 0.991,
     strokeWidth: 0.869,
     fontSize: 12
@@ -78,13 +93,13 @@ function PirateFlag2Icon({
   }), /*#__PURE__*/React.createElement("path", {
     d: "M319.113 191.864c8.775-1.538 17.28-2.533 26.055-3.528 11.49-2.896 17.281 10.223 14.114 20.085-3.98 8.775-9.59 16.466-16.013 23.884-4.976 5.61-10.904 6.517-16.557 4.614-4.562-1.265-8.776-4.07-13.3-10.585-1.99-5.61-3.708-8.505-6.242-15.471-1.99-6.424 1.105-16.04 11.943-19zm112.197 0c-8.776-1.538-17.28-2.533-26.056-3.528-11.49-2.896-17.28 10.223-14.114 20.085 3.98 8.775 9.59 16.466 16.013 23.884 4.976 5.61 10.904 6.517 16.557 4.614 4.563-1.265 8.777-4.07 13.3-10.585 1.99-5.61 3.709-8.505 6.243-15.471 1.99-6.424-1.106-16.04-11.943-19z"
   })), /*#__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: "M353.874 290.768c-1.19-.22-4.19-.795-6.664-1.28l-4.5-.88-.575-4.061c-1.713-12.122-10.246-20.659-25.756-25.77-12.745-4.199-16.035-6.648-18.775-13.97-3.03-8.1-3.125-14.823-.4-28.43 1.918-9.576 2.434-14.594 2.489-24.203.065-11.526-.073-12.546-2.82-20.779-3.509-10.512-4.292-22.378-1.67-25.283 1.442-1.597 1.369-1.794-1.834-4.922l-3.336-3.257-1.843 2.342c-4.555 5.79-4.644 19.35-.218 33.397 1.406 4.462 2.821 10.17 3.145 12.686.694 5.378-.284 16.841-1.378 16.165-1.224-.756-6.77-11.09-8.981-16.732-6.128-15.636-7.788-35.426-4.1-48.886 6.3-22.992 22.2-40.413 44.948-49.246 20.138-7.82 51.971-11.316 73.744-8.1 19.343 2.858 39.411 9.21 48.203 15.26 15.154 10.426 27.188 28.857 30.777 47.139 1.666 8.488 1.43 26.248-.442 33.333-1.663 6.292-8.13 19.87-11.303 23.732l-2.07 2.519-.622-4.153c-.95-6.337.12-15.76 2.611-22.963 3.205-9.271 4.555-20.925 3.151-27.199-.603-2.695-2.011-5.958-3.13-7.25l-2.032-2.348-3.085 2.977c-2.905 2.802-3.01 3.092-1.795 4.948.89 1.357 1.292 4.267 1.292 9.35 0 6.015-.52 8.943-2.814 15.832-2.642 7.936-2.813 9.19-2.8 20.573.01 9.651.519 14.822 2.498 25.378 2.27 12.105 2.398 13.789 1.474 19.386-1.283 7.767-3.871 13.815-6.853 16.01-1.28.943-5.055 2.762-8.388 4.043-20.996 8.067-28.61 14.616-31.082 26.736l-1.084 5.315-4.697 1.204c-4.615 1.183-44.326 2.301-49.285 1.387zm11.082-17.119c1.286-.665 3.59-2.766 5.119-4.67l2.78-3.46.25-18.708c.17-12.676-.044-18.707-.661-18.707-2.177.002-10.05 9.132-12.97 15.037-2.62 5.304-3.169 7.449-3.598 14.071-.527 8.13.41 13.162 3.004 16.131 1.6 1.831 2.992 1.902 6.076.306zm27.36-1.67c1.594-2.144 1.818-3.644 1.818-12.167 0-9.47-.083-9.888-3.214-16.223-2.876-5.818-10.993-15.484-13.004-15.484-.366 0-.665 8.403-.665 18.673v18.672l2.374 3.113c2.82 3.696 6.938 6.416 9.228 6.094.904-.127 2.463-1.332 3.463-2.678zm-54.637-34.653c5.22-2.18 17.145-17.171 21.51-27.04 3.58-8.093.422-19.273-6.223-22.025-2.315-.96-4.531-.97-12.85-.058-17.024 1.865-23.558 3.282-27.278 5.913-7.43 5.258-8.379 12.132-3.404 24.676 3.416 8.614 5.673 11.914 10.583 15.471 5.758 4.172 12.295 5.306 17.662 3.063zm91.006-1.768c2.097-1.23 4.992-3.723 6.433-5.543 2.637-3.328 9.67-19.702 9.66-22.49-.02-6.266-4.785-13.115-10.64-15.293-4.124-1.534-17.61-3.653-28.644-4.501l-7.416-.57-3.404 3.404c-3.898 3.898-5.747 9.301-4.93 14.41 1.402 8.765 15.56 29.011 22.572 32.276 3.92 1.826 11.746 1.016 16.369-1.693z"
   }), /*#__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: "M357.435 352.309c-12.719-2.76-18.716-6.119-25.977-14.55-8.19-9.511-10.914-18.637-10.245-34.325.536-12.537-.234-18.435-3.706-28.417-3.085-8.865-1.448-9.158 1.943-.348 3.694 9.598 6.662 20.59 7.994 29.605l1.218 8.247 4.452 4.029c10.02 9.066 20.875 12.226 42.405 12.343 16.216.089 21.921-.992 32.668-6.19 8.278-4.003 12.877-8.927 13.67-14.636 2.316-16.667 9.15-38.9 12.268-39.91.622-.202.029 2.608-1.5 7.103-3.457 10.162-4.181 15.627-3.646 27.487.807 17.855-2.373 26.923-13.178 37.581-5.262 5.19-7.328 6.579-13.092 8.796-3.764 1.449-9.155 3.059-11.98 3.578-7.051 1.296-26.57 1.066-33.294-.393zm-81.246-72.842c-38.857-18.924-37.326-18.466-54.875-16.448-7.352.846-13.585.006-17.118-2.307-2.134-1.398.63-5.809 8.393-13.394 7.168-7.004 7.257-7.2 8.205-18.156.342-3.952 1.175-8.36 1.85-9.795 3.01-6.39 10.201-2.181 16.677 9.763 2.46 4.536 5.92 9.77 7.688 11.629 2.134 2.244 12.869 8.224 31.915 17.78l28.699 14.398 2.575 8.564c2.515 8.366 3.337 15.216 1.812 15.1-.42-.032-16.539-7.742-35.821-17.134zm218.004 109.394c-2.708-2.02-5.424-5.552-7.806-10.153-6.261-12.088-8.927-14.24-33.43-26.987-12.15-6.32-22.299-11.834-22.554-12.252-.255-.42.654-3.885 2.02-7.702 1.365-3.818 2.483-7.848 2.483-8.956 0-1.108.162-2.015.36-2.015.2 0 11.06 5.033 24.136 11.185 29.232 13.753 30.09 14.05 37.385 12.98 3.133-.46 9.194-.866 13.468-.902 6.276-.053 8.181.312 9.908 1.898 1.175 1.08 2.137 2.419 2.137 2.974 0 .556-3.874 4.776-8.608 9.377l-8.609 8.367-.995 9.548c-.978 9.372-2.602 14.703-4.69 15.39-.58.19-2.922-1.048-5.205-2.752zm-244.955-.171c-.524-.983-1.53-6.373-2.236-11.98l-1.282-10.193-8.598-8.929c-5.376-5.582-8.472-9.59-8.259-10.693.64-3.323 4.822-4.523 13.087-3.758 4.213.39 10.876.743 14.807.784 8.512.09 14.316-2.092 40.616-15.26 9.421-4.716 17.348-8.576 17.616-8.576.268 0 .487.892.487 1.982 0 1.09 1.209 5.239 2.686 9.22 1.476 3.98 2.51 7.379 2.297 7.553-.213.174-10.96 5.876-23.883 12.671l-23.495 12.354-7.463 11.243c-9.532 14.36-13.99 18.057-16.38 13.581zm188.239-96.217c.33-2.777 1.676-8.185 2.993-12.02l2.394-6.97 29.134-14.426c32.298-15.993 32.123-15.86 39.062-29.667 4.644-9.239 12.201-15.375 14.914-12.11 1.425 1.716 4.09 14.139 4.113 19.177.016 3.367 1.042 4.925 8.658 13.147 9.616 10.38 9.966 12.12 2.836 14.097-4.995 1.386-9.839 1.345-18.615-.159-5.455-.934-8.227-.948-11.556-.059-2.408.644-17.684 7.453-33.945 15.132-16.262 7.678-32.046 15.074-35.076 16.434l-5.51 2.472.598-5.048z"
   }), /*#__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: "M334.49 311.788c-1.613-1.768-1.526-1.516-2.127-6.185-.652-5.059-1.708-10.61-2.913-15.313-1.068-4.165-3.888-12.926-5.417-16.83-.444-1.132-.764-2.105-.71-2.162.2-.217 4.63 3.179 5.64 4.325 2.934 3.329 4.33 6.512 4.564 10.404l.153 2.545 1.279.696 1.278.696-.096 11.174c-.053 6.146-.122 11.412-.153 11.702-.043.414-.367.187-1.497-1.052zm9.543-8.082a83.561 83.561 0 01-2.678-1.389l-1.716-.927v-4.936c0-4.568.036-4.926.481-4.803l2.746.762 2.265.628v5.586c0 3.072-.031 5.575-.069 5.563-.038-.012-.5-.23-1.03-.484zm-1.373 14.322c-.982-.55-2.083-1.231-2.447-1.511l-.662-.51.065-5.14c.036-2.827.097-5.173.137-5.212.04-.04 1.202.453 2.582 1.096l2.51 1.168.006 5.56c.003 3.058-.087 5.558-.2 5.556-.114-.003-1.01-.455-1.991-1.007zm9.335 3.912c-1.133-.347-2.4-.768-2.814-.936l-.755-.304v-5.635c0-3.1.079-5.636.176-5.636.097 0 .993.239 1.99.53.998.292 2.34.667 2.982.835l1.167.304v3.654c0 3.983-.258 7.867-.521 7.838-.091-.01-1.092-.303-2.225-.65zm2.059-14.63c-.302-.074-1.708-.503-3.125-.954l-2.576-.82.127-5.74c.07-3.158.184-5.798.252-5.866.069-.069 1.448.076 3.067.321l2.942.446v6.405c0 3.523-.031 6.39-.069 6.373a8.589 8.589 0 00-.618-.165zm6.864 1.259c-1.057-.133-2.076-.299-2.265-.369-.261-.096-.343-1.67-.343-6.587v-6.461h2.174c1.196 0 2.37.075 2.608.166.38.146.435 1.01.435 6.865 0 5.193-.077 6.69-.343 6.662-.19-.019-1.209-.143-2.266-.276zm-.206 15.201l-2.677-.42v-4.175c0-2.296.077-4.905.17-5.798l.17-1.623 1.958.235c1.077.13 2.236.288 2.576.353l.618.118v5.898c0 3.244-.031 5.883-.069 5.866-.038-.018-1.273-.222-2.746-.454zm7.688.833l-1.304-.103v-11.776h6.59v12.08l-1.99-.049a77.019 77.019 0 01-3.296-.152zm-1.304-22.313v-6.864h6.59v13.729h-6.59v-6.865zm9.884.04v-6.904h6.041v13.454h-.92c-.505 0-1.864.08-3.02.178l-2.1.177v-6.904zm.206 22.596c-.113-.117-.205-2.895-.205-6.173v-5.96l.858-.172c.471-.094 1.812-.172 2.978-.172h2.12l.18 3.338c.098 1.836.179 4.616.179 6.178v2.84l-1.167.002c-.642 0-1.97.076-2.952.167-.981.09-1.877.07-1.99-.048zm14.696-4.514c0-.68.053-.958.119-.618.065.34.065.896 0 1.236-.066.34-.12.061-.12-.618zm-5.292-18.472v-6.713l2.363-.192c1.3-.105 2.402-.152 2.45-.105.047.047.175 3.004.284 6.57l.198 6.483-1.618.182c-.89.1-2.08.251-2.647.335l-1.03.154v-6.714zm8.653 4.703c-.088-.355-.124-3.234-.081-6.396l.077-5.751 3.09-.433 3.088-.433v1.653c.001.91.082 3.588.18 5.953l.178 4.299-2.176.687c-1.197.378-2.631.773-3.187.877-.907.17-1.027.124-1.17-.456zm.134 10.117v-5.85l2.605-.628c1.433-.346 2.856-.694 3.163-.774.55-.144.557-.058.484 5.57l-.075 5.716-2.608.888c-1.435.49-2.825.897-3.089.908-.443.017-.48-.436-.48-5.83zm9.883.288c0-1.094-.08-3.54-.177-5.435l-.176-3.444 2.717-1.35 2.922-1.452c.114-.056.206 2.348.206 5.343v5.446l-1.167.734c-1.252.788-3.885 2.149-4.158 2.149-.091 0-.167-.896-.167-1.99zm-.274-18.531v-5.704l2.266-.591c1.245-.325 2.48-.677 2.745-.782.447-.178.48.156.48 4.777v4.968l-1.04.657c-.571.36-1.807 1.044-2.745 1.517l-1.706.861v-5.703zm9.241 11.143c-.1-1.835-.18-7.055-.179-11.6l.001-8.262 1.49-.804c1.609-.868 1.793-1.204 1.8-3.275.008-3.32 1.84-7.442 4.509-10.15 2.083-2.113 4.453-3.835 4.198-3.05-.095.292-1.161 3.434-2.369 6.982-3.3 9.698-5.25 18.177-6.368 27.69-.31 2.65-.408 2.942-1.432 4.325-.604.815-1.182 1.483-1.285 1.483-.102 0-.267-1.503-.365-3.338zm-27.621 8.413c0-5.61.05-6.019.722-6.019.398 0 1.534-.111 2.524-.247l1.802-.247v12.041l-1.456.24c-.801.133-1.937.244-2.524.246l-1.068.004v-6.018z"
   }));
   if (!colormode) return _svgEl;

package/eggs/PirateSkull2Icon.js

@@ -11,31 +11,44 @@ function _DlIconInverseColormode({
   children
 }) {
   const ref = React.useRef(null);
-  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
   React.useLayoutEffect(() => {
-    if (typeof mode === "string") {
-      setResolved(mode);
-      return;
-    }
     if (typeof document === "undefined") return;
-    let cur = null;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
     let el = ref.current && ref.current.parentElement;
-    while (el) {
-      const m = el.getAttribute && el.getAttribute("data-color-mode");
-      if (m) { cur = m; break; }
+    while (el && (!currentMode || !lightTheme || !darkTheme)) {
+      if (el.getAttribute) {
+        currentMode = currentMode || el.getAttribute("data-color-mode");
+        lightTheme = lightTheme || el.getAttribute("data-light-theme");
+        darkTheme = darkTheme || el.getAttribute("data-dark-theme");
+      }
       el = el.parentElement;
     }
-    if (!cur || cur === "auto") {
-      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    if (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
     }
-    setResolved(cur === "dark" ? "light" : "dark");
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
   }, [mode]);
   return /*#__PURE__*/React.createElement("span", {
     ref: ref,
-    "data-color-mode": resolved || "light",
-    "data-light-theme": "light",
-    "data-dark-theme": "dark",
-    style: { display: "inline-flex", lineHeight: 0 }
+    "data-color-mode": appearance.mode || "light",
+    "data-light-theme": appearance.lightTheme || undefined,
+    "data-dark-theme": appearance.darkTheme || undefined,
+    style: {
+      display: "inline-flex",
+      lineHeight: 0,
+      color: "var(--fgColor-default, var(--color-fg-default, currentColor))"
+    }
   }, children);
 }
 
@@ -51,16 +64,18 @@ function PirateSkull2Icon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512",
-    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
+    fill: (themed ? "var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor))" : "var(--datalayer-icon-color, currentColor)"),
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
   }, props, {
+    "data-datalayer-icon": "",
     style: props && props.color != null ? Object.assign({}, props.style, {
-      "--datalayer-icon-fg": props.color
+      "--datalayer-icon-color": props.color,
+      color: props.color
     }) : props && props.style
-  }), title ? /*#__PURE__*/React.createElement("title", {
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
     d: "M256 31.203c-96 .797-117.377 76.692-79.434 135.133-6.397 6.534-10.344 15.886-.566 25.664 16 16 32 16 39.852 32.42h80.296C304 208 320 208 336 192c9.778-9.778 5.831-19.13-.566-25.664C373.377 107.896 352 32 256 31.203zm-42.146 101.049c.426-.003.862.007 1.306.03 28.404 1.442 40.84 59.718-10.83 51.095-10.412-1.738-17.355-50.963 9.524-51.125zm84.292 0c26.88.162 19.936 49.387 9.524 51.125C256 192 268.436 133.724 296.84 132.28c.444-.022.88-.032 1.306-.03zM32 144c7.406 88.586 64.475 175.544 156.623 236.797 17.959-7.251 35.767-15.322 50.424-23.877C180.254 319.737 104.939 255.465 32 144zm448 0C359.2 328.605 231.863 383.797 183.908 400.797c3.177 5.374 5.997 10.98 8.711 16.432 3.878 7.789 7.581 15.251 11.184 20.986A517.457 517.457 0 00256 417.973l.168.076a884.617 884.617 0 009.652-4.65C391.488 353.263 471.156 249.79 480 144zm-224 27.725l20.074 40.15L256 199.328l-20.074 12.547L256 171.725zm-65.604 57.11l15.76 51.042s31.268 24.92 49.844 24.92 49.844-24.92 49.844-24.92l15.76-51.041-27.086 19.236-8.063 16.248S267.35 279.547 256 279.547c-11.35 0-30.455-15.227-30.455-15.227l-8.063-16.248-27.086-19.236zm-59.984 152.976a32.548 32.548 0 00-2.375.027l.856 17.978c6.36-.302 10.814 2.416 16.11 8.64 5.298 6.222 10.32 15.707 15.24 25.589 4.918 9.882 9.707 20.12 16.122 28.45 6.415 8.327 16.202 15.446 27.969 13.89l-2.36-17.844c-4.094.541-6.78-1.099-11.349-7.031-4.57-5.933-9.275-15.46-14.268-25.489-4.992-10.029-10.297-20.604-17.644-29.234-6.888-8.09-16.556-14.686-28.3-14.976zm251.176 0c-11.745.29-21.413 6.885-28.3 14.976-7.348 8.63-12.653 19.205-17.645 29.234-4.993 10.03-9.698 19.556-14.268 25.489-4.57 5.932-7.255 7.572-11.35 7.031l-2.359 17.844c11.767 1.556 21.554-5.563 27.969-13.89 6.415-8.33 11.204-18.568 16.123-28.45 4.919-9.882 9.94-19.367 15.238-25.59 5.297-6.223 9.75-8.941 16.111-8.639l.856-17.978a32.853 32.853 0 00-2.375-.027zm-55.928 18.107c-13.97 10.003-30.13 18.92-47.424 27.478a524.868 524.868 0 0029.961 10.819c3.603-5.735 7.306-13.197 11.184-20.986 2.714-5.453 5.534-11.058 8.71-16.432-.77-.273-1.62-.586-2.43-.879zm-191.808 23.371l-27.67 10.352 7.904 31.771 36.424-11.707c-1.418-2.814-2.81-5.649-4.207-8.457-4.048-8.131-8.169-15.961-12.451-21.959zm244.296 0c-4.282 5.998-8.403 13.828-12.45 21.959-1.399 2.808-2.79 5.643-4.208 8.457l36.424 11.707 7.904-31.771-27.67-10.352zM78.271 435.438a9.632 9.632 0 00-1.32.12 6.824 6.824 0 00-1.217.313c-11.544 4.201-25.105 18.04-21.648 29.828 3.07 10.472 19.675 13.359 30.492 11.916 3.828-.51 8.415-3.761 12.234-7.086l-8.124-32.648c-3.238-1.285-7.214-2.528-10.417-2.443zm355.458 0c-3.203-.085-7.179 1.158-10.416 2.443l-8.125 32.648c3.819 3.325 8.406 6.576 12.234 7.086 10.817 1.443 27.422-1.444 30.492-11.916 3.457-11.788-10.104-25.627-21.648-29.828a6.824 6.824 0 00-1.217-.312 9.632 9.632 0 00-1.32-.122z"

package/eggs/PirateSkullIcon.js

@@ -11,31 +11,44 @@ function _DlIconInverseColormode({
   children
 }) {
   const ref = React.useRef(null);
-  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
   React.useLayoutEffect(() => {
-    if (typeof mode === "string") {
-      setResolved(mode);
-      return;
-    }
     if (typeof document === "undefined") return;
-    let cur = null;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
     let el = ref.current && ref.current.parentElement;
-    while (el) {
-      const m = el.getAttribute && el.getAttribute("data-color-mode");
-      if (m) { cur = m; break; }
+    while (el && (!currentMode || !lightTheme || !darkTheme)) {
+      if (el.getAttribute) {
+        currentMode = currentMode || el.getAttribute("data-color-mode");
+        lightTheme = lightTheme || el.getAttribute("data-light-theme");
+        darkTheme = darkTheme || el.getAttribute("data-dark-theme");
+      }
       el = el.parentElement;
     }
-    if (!cur || cur === "auto") {
-      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    if (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
     }
-    setResolved(cur === "dark" ? "light" : "dark");
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
   }, [mode]);
   return /*#__PURE__*/React.createElement("span", {
     ref: ref,
-    "data-color-mode": resolved || "light",
-    "data-light-theme": "light",
-    "data-dark-theme": "dark",
-    style: { display: "inline-flex", lineHeight: 0 }
+    "data-color-mode": appearance.mode || "light",
+    "data-light-theme": appearance.lightTheme || undefined,
+    "data-dark-theme": appearance.darkTheme || undefined,
+    style: {
+      display: "inline-flex",
+      lineHeight: 0,
+      color: "var(--fgColor-default, var(--color-fg-default, currentColor))"
+    }
   }, children);
 }
 
@@ -51,16 +64,18 @@ function PirateSkullIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1280 960",
-    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
+    fill: (themed ? "var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor))" : "var(--datalayer-icon-color, currentColor)"),
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
   }, props, {
+    "data-datalayer-icon": "",
     style: props && props.color != null ? Object.assign({}, props.style, {
-      "--datalayer-icon-fg": props.color
+      "--datalayer-icon-color": props.color,
+      color: props.color
     }) : props && props.style
-  }), title ? /*#__PURE__*/React.createElement("title", {
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
     d: "M617.5.6c-23.9 1.9-38.6 4.2-59.1 9.4-41 10.4-75.6 29.8-96.2 54.1-12.1 14.2-18.5 26.8-25.1 49.4-1.8 6-6.2 18.8-9.8 28.4-7.5 20.1-9.8 30-11.4 50.1-1.7 21 .3 79.7 3.2 96.4 1.6 8.8 4.7 16.4 8.7 20.8 6 6.6 11.5 8.4 16.1 5.2 5.1-3.6 5.4-6.2 6.2-44.9.8-40.8 1.6-46.5 9.9-68.1 8.6-22 12.1-33.4 14-45l1.9-11.9-.2 13.5-.3 13.5-7.1 15.5c-15 32.9-16.5 44-13.9 101.6l.9 20.1-2.5 5.4c-3 6.6-6.9 10.7-14.2 14.8-7.2 4-9 7.4-8.4 15.5 1.2 14.7 17.9 39.2 30.4 44.8 6.3 2.8 11.3 2.1 25.9-3.6 12.5-4.9 21.7-7.6 25.9-7.6 3.7 0 9.9 3.3 13 7.1 3.7 4.4 5.1 8.2 7.6 20.6 4.4 21.8 7.9 30.1 16.6 39.1l5.4 5.6-4.6 6.9c-2.6 3.8-5.6 9.6-6.7 12.8-1.9 5.6-1.9 6.2-.5 9.3 2 4.1 7 6.6 13.3 6.6 5.9 0 9.9-2.1 11.5-6.1 1.3-3.1 1.2-4.8-1.7-21.6l-.5-3.1 4.4.5c2.3.3 4.4.7 4.6.8.2.2-.8 4-2.2 8.5-3.4 10.7-3.5 17.8-.1 21.8 3.7 4.4 7.3 5.5 16.9 5 9.5-.5 13-2.1 15.1-7.1l1.4-3.2.1 2.7c0 3.2 2.9 6.5 6.4 7.4 1.4.3 7.1.4 12.6.2 9.8-.3 10.3-.4 12.7-3.2 2.3-2.7 2.5-3.6 2-8.5-.4-3.1-1.5-8.8-2.5-12.7l-1.8-7.2 4.6-.5c2.5-.3 4.6-.4 4.7-.4.1.1-.5 2.7-1.3 5.7s-1.7 9.1-2.1 13.6c-.6 7.9-.5 8.1 2.2 10.2 4 3.2 10.1 4.5 17.2 3.9 7.4-.7 12-2.8 13.5-6.3 1.4-2.9 0-15-2.6-22.4-.8-2.4-1.4-4.5-1.3-4.6.1-.1 3.5-.5 7.6-.9l7.4-.7-.7 3.8c-1.2 7.5-1.9 18.2-1.2 20.8 1.5 6 10.5 8.1 21 5.1 12.1-3.5 14.4-11.1 8.1-26.5-1.9-4.6-3.5-9.5-3.5-10.8 0-1.7 3.3-5.8 11.1-14.1 15.4-16 17.7-19.7 20.6-32.9 2.8-12.8 5.6-17.4 12.8-21.1 7-3.7 14.2-3.4 26.6.7 16.7 5.8 28.9 4.6 37.9-3.5 14-12.6 21.8-39.8 15-52.3-2.2-4-3.6-5.1-12.7-9.5-15.7-7.8-18-10.7-18.8-24.2l-.4-7.8 1.2 6.5c2.9 14.2 9.9 20.1 18.7 15.5 6.2-3.2 12.6-15.4 18.4-35 5.9-19.9 7-28.4 7-51.5 0-22.7-.9-28.5-7.9-51.5-2-6.6-5.4-18.1-7.5-25.5-6.2-21.5-13.6-37.7-25.7-56-9-13.5-13.7-19.4-24.8-30.9-32.6-33.9-62-49.2-106-55.1-8.3-1.1-48.2-2.1-57-1.4zM479.7 126.2c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm-2 9c-.3.8-.6.5-.6-.6-.1-1.1.2-1.7.5-1.3.3.3.4 1.2.1 1.9zm-1 8c-.3.7-.5.2-.5-1.2s.2-1.9.5-1.3c.2.7.2 1.9 0 2.5zm64.6 81.8c24.8 2.4 41.1 8.5 46.7 17.6 4.7 7.5 4.6 27.4-.2 40.2-1.7 4.7-3.8 7.4-11.7 15.2-5.4 5.2-13.8 12.4-18.9 16-18.6 13.1-26.5 15.4-36.2 10.5-6.1-3.1-14.4-11.1-18.2-17.6-6.2-10.6-10.2-32.1-9.6-51.7.3-11.9.5-13 3.3-18.1 6.2-11.2 18.6-14.6 44.8-12.1zm195.7 3.8c13.6 4.4 23.3 13.9 24.6 23.9 1.6 12.7-2.9 50.4-6.7 57.4-1.4 2.4-4 4.7-7.3 6.6-4.7 2.6-5.9 2.8-16.1 2.8-10.3 0-11.4-.2-17.8-3.2-20.5-9.7-44.9-33.1-49.8-47.8-1.9-5.9-1.6-18.2.6-22.8 4.1-8.7 17.7-15.7 37.5-19.1 1.4-.2 8.4-.3 15.5-.2 9.9.3 14.5.8 19.5 2.4zm65.2 12.2c.4 8 .4 18.5 0 23.5l-.6 9-.7-12c-.5-9.6-1.2-13.5-3.4-19.5-4-10.8-4.2-13.4-1.3-14.8 5-2.4 5.2-1.8 6 13.8zm-172.9 53.7c5 6.8 22.4 38.3 26.4 47.8 1.9 4.4 4.1 10.7 4.9 14 1.7 7.3 1.8 19 .2 23.6-1.8 5.3-6.6 11.7-10.1 13.5l-3.1 1.7-3.2-3.7c-1.8-2.1-5.8-8.1-9-13.4-6.7-11.4-9.9-15.2-13-15.2-3.7 0-8 4.6-12.1 12.6-4.3 8.7-6.5 10.5-9.5 7.7-1.8-1.6-2-2.6-1.5-9.8.4-5 2.1-13.3 4.7-22 2.2-7.7 5.2-19.4 6.6-26 1.4-6.6 3.8-15.2 5.4-19.2 3.1-8 7.6-16.3 9-16.3.4 0 2.4 2.1 4.3 4.7zM607.9 460c1.8 0 2.2.4 1.6 1.7-.4 1-1.1 4.5-1.7 7.8l-1.1 6-1.2-5c-.6-2.8-1.9-6.5-2.9-8.4l-1.8-3.4 2.4.6c1.2.4 3.4.7 4.7.7z"

package/eggs/SpaceInvadersAlien1Icon.js

@@ -11,31 +11,44 @@ function _DlIconInverseColormode({
   children
 }) {
   const ref = React.useRef(null);
-  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
   React.useLayoutEffect(() => {
-    if (typeof mode === "string") {
-      setResolved(mode);
-      return;
-    }
     if (typeof document === "undefined") return;
-    let cur = null;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
     let el = ref.current && ref.current.parentElement;
-    while (el) {
-      const m = el.getAttribute && el.getAttribute("data-color-mode");
-      if (m) { cur = m; break; }
+    while (el && (!currentMode || !lightTheme || !darkTheme)) {
+      if (el.getAttribute) {
+        currentMode = currentMode || el.getAttribute("data-color-mode");
+        lightTheme = lightTheme || el.getAttribute("data-light-theme");
+        darkTheme = darkTheme || el.getAttribute("data-dark-theme");
+      }
       el = el.parentElement;
     }
-    if (!cur || cur === "auto") {
-      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    if (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
     }
-    setResolved(cur === "dark" ? "light" : "dark");
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
   }, [mode]);
   return /*#__PURE__*/React.createElement("span", {
     ref: ref,
-    "data-color-mode": resolved || "light",
-    "data-light-theme": "light",
-    "data-dark-theme": "dark",
-    style: { display: "inline-flex", lineHeight: 0 }
+    "data-color-mode": appearance.mode || "light",
+    "data-light-theme": appearance.lightTheme || undefined,
+    "data-dark-theme": appearance.darkTheme || undefined,
+    style: {
+      display: "inline-flex",
+      lineHeight: 0,
+      color: "var(--fgColor-default, var(--color-fg-default, currentColor))"
+    }
   }, children);
 }
 
@@ -51,16 +64,18 @@ function SpaceInvadersAlien1Icon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1000 1000",
-    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
+    fill: (themed ? "var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor))" : "var(--datalayer-icon-color, currentColor)"),
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
   }, props, {
+    "data-datalayer-icon": "",
     style: props && props.color != null ? Object.assign({}, props.style, {
-      "--datalayer-icon-fg": props.color
+      "--datalayer-icon-color": props.color,
+      color: props.color
     }) : props && props.style
-  }), title ? /*#__PURE__*/React.createElement("title", {
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
     d: "M899.3 766.6V590.1h-86.4v177.2h-90.1v87.6H513.6v-88.3h209.2v-88.2H277.9v88.2l179 .6v88.2H277.2v-87.6h-90.1V589.5h-86.4V766H10V498.8h88.9V413h88.2v-90.7h90.7v-88.9h88.9v89.1l266.6.7v-89.8h88.9v90.1h90.7v88.3h87.6V500H990v266.6h-90.7zM366.7 411.1h-88.9V500h88.9v-88.9zm355.5 0h-88.9V500h88.9v-88.9zM187.1 144.5h90.7v88.9h-90.7v-88.9zm625.8 0v88.9h-90.7v-88.9h90.7z"