@datalayer/icons-react 1.0.8 → 1.0.10

package/eggs/esm/SpaceInvadersAlien3Icon.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);
 }
 
@@ -45,34 +58,36 @@ function SpaceInvadersAlien3Icon({
   size,
   colored,
   themed,
-  colormoded,
+  colormode,
   ...props
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 32 32",
-    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", {
     style: {
       marker: "none"
     },
-    fill: colored ? '#204a87' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#204a87" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M12.345 6.243V8.71H6.938v2.385h-1.78v7.327h21.684v-7.327h-1.848V8.71h-5.339V6.243h-7.31zm-1.78 7.41h3.56v2.385h-3.56v-2.385zm7.31 0h3.56v2.385h-3.56v-2.385zm-7.316 4.652v2.593H8.718v2.384h-3.56v2.475H8.78v-2.392h3.559v-2.467h1.847v-2.593H10.56zm3.627 2.593v2.467h3.622v-2.467h-3.622zm3.622 0h1.785v2.384h3.622v-2.468h-1.78v-2.51h-3.627v2.594zm5.407 2.384v2.475h3.627v-2.475h-3.627z",
     overflow: "visible"
   }));
-  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(SpaceInvadersAlien3Icon);

package/eggs/esm/SpaceInvadersAlien4Icon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const SpaceInvadersAlien4Icon: 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 SpaceInvadersAlien4Icon: 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 SpaceInvadersAlien4Icon;

package/eggs/esm/SpaceInvadersAlien4Icon.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);
 }
 
@@ -45,33 +58,35 @@ function SpaceInvadersAlien4Icon({
   size,
   colored,
   themed,
-  colormoded,
+  colormode,
   ...props
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 937.422 286.883",
-    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
+    fill: (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
   }, props, {
+    "data-datalayer-icon": "",
     style: props && props.color != null ? Object.assign({}, props.style, {
-      "--datalayer-icon-fg": props.color
+      "--datalayer-icon-color": props.color,
+      color: props.color
     }) : props && props.style
-  }), title ? /*#__PURE__*/React.createElement("title", {
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#304c2e' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#304c2e" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 42%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 92%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 42%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 92%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 42%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M0 0h937.422v286.883H0z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#00d700' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#00d700" : (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))))")),
     d: "M119.355 63.442v20h20v-20h-20zm20 20v20h-20v20h-20v20h-20v60h20v-40h20v40h20v-20h100v20h20v-40h20v40h20v-60h-20v-20h-20v-20h-20v-20h-20v20h-60v-20h-20zm100 0h20v-20h-20v20zm0 120h-40v20h40v-20zm-100 0v20h40v-20h-40zm0-80h20v20h-20v-20zm80 0h20v20h-20v-20zm239.355-60v20h-60v20h-20v60h60v20h-20v20h40v-20h20v-20h40v20h20v20h40v-20h-20v-20h60v-60h-20v-20h-60v-20h-80zm120 140v20h40v-20h-40zm-60-20h-40v20h40v-20zm-100 20h-40v20h40v-20zm20-80h40v20h-40v-20zm80 0h40v20h-40v-20zm239.356-60v20h-20v20h-20v20h-20v40h40v20h20v-20h40v20h20v-20h40v-40h-20v-20h-20v-20h-20v-20h-40zm60 120v20h20v-20h-20zm20 20v20h20v-20h-20zm-20 0h-20v20h20v-20zm-20 0v-20h-40v20h40zm-40 0h-20v20h20v-20zm-20 0v-20h-20v20h20zm-20 0h-20v20h20v-20zm20-80h20v20h-20v-20zm60 0h20v20h-20v-20z"
   }));
-  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(SpaceInvadersAlien4Icon);

package/eggs/esm/SpaceInvadersIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const SpaceInvadersIcon: 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 SpaceInvadersIcon: 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 SpaceInvadersIcon;

package/eggs/esm/SpaceInvadersIcon.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);
 }
 
@@ -45,7 +58,7 @@ function SpaceInvadersIcon({
   size,
   colored,
   themed,
-  colormoded,
+  colormode,
   ...props
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
@@ -53,15 +66,17 @@ function SpaceInvadersIcon({
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     viewBox: "0 0 180 180",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-    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))))")),
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
   }, props, {
+    "data-datalayer-icon": "",
     style: props && props.color != null ? Object.assign({}, props.style, {
-      "--datalayer-icon-fg": props.color
+      "--datalayer-icon-color": props.color,
+      color: props.color
     }) : props && props.style
-  }), title ? /*#__PURE__*/React.createElement("title", {
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", {
     id: "prefix__a",
@@ -2014,14 +2029,14 @@ function SpaceInvadersIcon({
     transform: "matrix(.48 0 0 -.48 48.319 65.353)",
     xlinkHref: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAXCAYAAAB0zH1SAAAACXBIWXMAABcRAAAXEQHKJvM/AAAA GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJRJREFUeNpiYBgFo4AowAhjHNPR EQBSBoPYrR+srly5AOOwwBj/mBlBjt4/iB1+AIgdMRz+k4d5SCUVuMN/cA5Rh/9kYx2iDmcdqiHO wjJEHc40VEOckWnU4fQtDhmGrMMZh6bDv/4bqg7/+3+IOvzX36Hp8A/ffg5Nhz999WZoOvzhk6cf oG3ewQoujPb7BhIABBgAIj8kyNa1I/MAAAAASUVORK5CYII="
   })))), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f3d83c' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#f3d83c" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 81%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 53%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 81%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 53%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 81%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     fillRule: "evenodd",
     d: "M23.635 70.91l2.897-6.67H38.91l6.014 5.822 1.559 5.627h-7.747l-1.383-4.992h-4.627l2.27 7.149h8.597l4.822 4.812 2.345 8.462-4.062 5.476h-8.569l-6.448-4.943-2.008-5.179h8.063l1.475 4.646h3.802l-1.837-6.629h-7.959l-6.298-5.116-3.284-8.465zm56.87-6.671h9.844l8.26 32.356h-7.828l-1.883-7.377h-5.851l-1.538 7.377h-7.748l6.744-32.356zm7.187 20.252L85.677 76.6l-1.645 7.892h3.66v-.001zm14.32-13.78l6.25-6.472h11.535l3.955 6.472-.971 7.135h-8.662l.621-7.135h-4.146l-1.445 20.409h3.816l.576-6.629h8.334l-.902 6.629-6.014 5.476h-10.027l-4.193-5.476 1.273-20.409zm29.582-6.472h20.686l-1.467 6.472h-12.27l-1.617 7.135h7.121l-1.541 6.803h-7.121l-1.465 6.472h9.715l-1.24 5.476H124.7l6.894-32.358zm-82.134 0h17.195l6.121 6.472.983 11.947-3.463 4.812h-7.689l1.509 9.126H56.57l-7.11-32.357zm10.375 6.472h4.019l1.672 11.947h-3.715l-1.976-11.947z",
     clipRule: "evenodd"
   }));
-  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(SpaceInvadersIcon);

package/eggs/esm/StarWarsIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const StarWarsIcon: 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 StarWarsIcon: 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 StarWarsIcon;

package/eggs/esm/StarWarsIcon.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);
 }
 
@@ -45,30 +58,32 @@ function StarWarsIcon({
   size,
   colored,
   themed,
-  colormoded,
+  colormode,
   ...props
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 634.105 634.03",
-    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
+    fill: (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
   }, props, {
+    "data-datalayer-icon": "",
     style: props && props.color != null ? Object.assign({}, props.style, {
-      "--datalayer-icon-fg": props.color
+      "--datalayer-icon-color": props.color,
+      color: props.color
     }) : props && props.style
-  }), title ? /*#__PURE__*/React.createElement("title", {
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#ffc500' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#ffc500" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M120.648 326.045l8.67 25.461c4.691 13.77 8.88 24.778 9.425 24.778a.037.037 0 00.024-.01c.6-.53 17.57-49.812 17.57-49.812h32.89l-39.68 115.62h-22.86s-24.4-70.473-24.3-70.74l-25.47 69.852h-22.63l-39.18-115.149 32.73.021s17.93 50.82 18.168 50.82l.002-.002 17.89-50.84 36.751.001M3.933 318.037l3.601 10.584 39.18 115.15 1.845 5.423h33.957l1.918-5.26 17.685-48.5c1.524 4.434 3.171 9.213 4.818 13.987a35089.138 35089.138 0 0012.191 35.276l1.864 5.384h34.268l1.854-5.402 39.68-115.618 3.637-10.599h-49.8l-1.858 5.396a6877.534 6877.534 0 01-10.296 29.676 743.773 743.773 0 01-1.587-4.61l-8.669-25.46-1.846-5.42H78.232l-1.88 5.345-10.454 29.706a13093.65 13093.65 0 01-10.516-29.69L53.5 318.07l-5.657-.004-32.73-.02zm623.254 7.56l-.074 30.305s-32.643-.108-49.238-.108c-5.52 0-9.268.014-9.445.045-2.857.521-4.68 6.603-3.869 9.271.398 1.351 3.393 5.76 6.631 9.811 3.23 4.052 8.541 10.682 11.78 14.73 8.317 10.38 9.458 12.43 10.23 18.39 1.25 9.683-3.329 20.16-11.829 27.07-8.52 6.93-8.146 6.98-71.383 6.98h-2.777c-38.46-.012-58.8-.33-61.762-.989-5.26-1.19-13.643-8.03-35.79-29.28-7.968-7.636-15.312-14.322-15.689-14.324-.01 0-.014.007-.014.018l-.262 44.578-35.898-.158-.222-114.98h80.062c24.13.871 40.46 24.91 37.21 40.24-.737 3.48-2.618 8.521-4.18 11.2-3.212 5.5-11.382 12.56-18.013 15.591-2.449 1.107-4.449 2.397-4.449 2.857 0 1.71 8.061 9.648 11.08 10.91 2.58 1.078 10.09 1.318 43.211 1.318l10.607.002c33.293 0 31.617-.24 34.19-5.74 1.8-3.83.431-6.12-12.239-20.39-16.05-15.972-14.37-23.622-14.48-29.272-.229-6.77 5.102-28.068 32.812-28.068l73.8-.007m-215.069 53.12c15.37 0 18.491-.239 21.761-1.66 11.041-4.8 11.631-18.979 1.041-25.27-2.32-1.382-5.3-1.609-21.96-1.7l-19.28-.102c.16.15-.06 27.57-.06 27.57s4.828 1.161 18.498 1.161m223.09-61.119h-81.82c-16.034 0-25.517 6.327-30.646 11.637-8.35 8.633-10.312 19.504-10.162 24.63.008.426.004.864-.002 1.321-.072 8.33 1.152 17.758 16.66 33.246 3.062 3.451 8.19 9.238 10.131 12.114-4.238.521-14.98.521-26.266.521h-4.79l-5.815-.002c-19.904 0-36.689-.058-40.127-.736-.482-.312-1.156-.854-1.898-1.498 6.877-4.233 13.83-10.799 17.104-16.41 1.986-3.414 4.178-9.244 5.098-13.568 2.041-9.625-1.324-21.236-9-31.068-8.957-11.47-21.986-18.334-35.746-18.83l-.145-.006h-88.223l.017 8.018.222 114.98.016 7.948 7.95.035 35.897.158 7.986.034.05-7.987.153-26.705c.732.695 1.49 1.42 2.27 2.164 24.23 23.24 32.357 29.68 39.562 31.31 1.98.44 5.254 1.171 63.523 1.187h2.777c31.55 0 47.383 0 56.801-.909 10.79-1.043 14.26-3.49 19.461-7.727l.174-.14c10.684-8.689 16.322-21.83 14.715-34.3-1.049-8.11-3.195-11.48-11.922-22.369l-2.594-3.24a12555.88 12555.88 0 01-9.178-11.475c-1.984-2.484-3.547-4.689-4.484-6.134 1.234-.003 2.84-.005 4.918-.005 16.395 0 48.887.107 49.213.11l8.008.024.02-8.008.076-30.307zM401.67 370.424l.037-6.558c.01-2 .02-4.004.021-5.84l11.188.06c6.43.033 16.104.087 17.99.622 2.406 1.461 3.75 3.721 3.604 6.061-.08 1.264-.682 3.588-3.822 4.95-1.75.761-4.539.997-18.568.997-4.452 0-7.885-.129-10.45-.292zm-116.832-45.299l40.291 115.92-32.83.15-5.45-17.41-58.7-.472-5.18 17.431-32.5-.34 39.78-115.23 54.59-.049m-26.402 16.995c-.083.333-5.144 14.22-10.222 28.104-5.12 14-10.257 28-10.328 28.108.136-.04 18.316-.08 29.968-.08 5.453 0 9.475.01 9.55.028l.001.005v-.005c-.205-.526-18.91-55.483-18.969-56.16l.001-.006v.006m32.087-25l-5.693.005-54.59.051-5.696.006-1.859 5.386-39.78 115.23-3.623 10.492 11.102.115 32.5.341 6.033.063 1.72-5.782 3.465-11.662 46.854.375 3.708 11.85 1.765 5.638 5.907-.026 32.83-.149 11.194-.053-3.677-10.573-40.29-115.92zm-41.123 73.143c1.515-4.13 3.556-9.71 6.327-17.289l2.393-6.545 2.17 6.396c.645 1.906 3.484 10.271 5.92 17.43-7.24 0-12.69 0-16.81.008zm49.016-203.497v28.6h-57.28v87.471h-34.15v-87.54l-66.86.19c-8.06 0-9.14 6.42-9.14 8.88 0 3.02 1.97 6.04 12.79 19.74 7.02 8.898 13.47 17.78 14.32 19.72 4.64 10.68-1.36 27.32-12.29 34.08-7.79 4.812-6.459 4.931-64.308 4.931H9.838v-32.13h97.9l2.89-2.01c1.95-1.36 3.08-3.23 3.51-5.79.6-3.68.29-4.16-11.8-17.78-14.29-16.1-15.8-19.04-15.06-29.319.84-11.73 11.3-28.77 29.58-28.77l181.56-.273m8-8.012l-8.013.013-181.56.27c-10.458 0-20.17 4.52-27.342 12.723-5.814 6.651-9.63 15.43-10.206 23.478-.973 13.511 2.137 18.394 17.056 35.202 4.33 4.877 8.447 9.516 9.821 11.485a1.286 1.286 0 01-.054.16l-.07.051-.822.571H1.838v48.131H81.5c28.522 0 42.6-.026 50.894-.636 9.49-.694 12.518-2.322 17.054-5.14l.566-.352c14.262-8.82 21.612-29.827 15.422-44.073-1.91-4.358-14.003-19.746-15.376-21.486-3.796-4.808-10.062-12.74-11.054-15.036.024-.192.071-.393.121-.53.165-.043.481-.1 1.001-.1l58.86-.167v87.518h50.15v-87.47h57.28zm85.06 8.941l40.18 116.22-32.77-.18-5.32-17.41-58.439-.26-5.22 16.771h-33.37l39.74-115.14h55.2m-46.812 73.62l39.802-.05v.001c.137 0-19.342-57.2-19.472-57.24-.142-.006-20.778 57.29-20.33 57.29m52.511-81.622H330.58l-1.859 5.391-39.74 115.142-3.663 10.61h50.485l1.75-5.624 3.461-11.12 46.633.206 3.6 11.773 1.721 5.63 5.887.032 32.771.181 11.297.062-3.69-10.676-40.18-116.222zm-41.397 73.608a4094.323 4094.323 0 019.014-25.312 9890.777 9890.777 0 018.588 25.29zm148.545-65.608c25.922 0 43.91.37 47.371.97 8 1.392 15.23 5.66 20.648 12.222 5.67 6.858 6.971 10.14 7.711 19.54 1.061 13.27-5.25 24.72-17.7 32.148-3.63 2.17-7.358 4.28-8.29 4.7-1.43.65-1.238 1.271 1.32 4.271 1.648 1.931 4.51 4.681 6.35 6.11l3.36 2.61 62.08.89.608 31.68h-38.062c-29.438 0-38.857-.27-41.62-1.199-4.13-1.4-14.067-9.82-34.27-29.04l-14.42-13.72.151 43.96h-37.045V187.694h41.808m-5.457 51.77h19.67c19.141 0 19.74-.06 22.471-2.109 4.881-3.66 6.61-7.43 6.09-13.22-.527-5.972-2.83-9.08-8.6-11.58-3.25-1.42-6.38-1.65-21.72-1.65h-17.91v28.56m5.456-59.77h-49.799v131.14h53.07l-.027-8.027-.09-25.217.842.8c24.984 23.771 32.355 29.173 37.217 30.82 3.732 1.26 9.982 1.624 44.188 1.624h46.216l-.156-8.153-.609-31.68-.146-7.734-7.734-.11-59.402-.852-1.244-.968c-.396-.31-.877-.718-1.389-1.18l1.207-.717c15.002-8.953 22.865-23.407 21.568-39.653-.863-10.959-2.82-15.896-9.52-24-6.585-7.969-15.622-13.298-25.448-15.005-5.463-.947-32.883-1.089-48.744-1.089zm2.543 39.21h9.91c14.025 0 16.805.232 18.518.98 3.25 1.407 3.58 2.091 3.834 4.956.256 2.85-.096 3.994-2.922 6.111l-.223.166c-1.865.346-8.785.346-17.447.346h-11.67z"
   }));
-  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(StarWarsIcon);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datalayer/icons-react",
   "license": "MIT",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "React.js and JupyterLab icons for data products.",
   "keywords": [
     "icons",