@datalayer/icons-react 1.0.8 → 1.0.10

package/data1/SettingsIcon.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,29 +58,31 @@ function SettingsIcon({
   size,
   colored,
   themed,
-  colormoded,
+  colormode,
   ...props
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
-    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
+    fill: (themed ? "var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor))" : "var(--datalayer-icon-color, currentColor)"),
     viewBox: "0 0 20 20",
     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: "M10 0c.293 0 .585.013.876.039.929.08 1.612.767 1.824 1.573l.36 1.384c.022.083.099.198.265.28.289.143.568.304.835.483.154.102.291.112.374.089l1.378-.38c.806-.22 1.74.027 2.275.788.338.481.633.99.88 1.523.394.843.14 1.777-.454 2.364L17.595 9.15c-.061.06-.122.184-.11.367.02.322.02.644 0 .966-.012.183.047.307.11.367l1.018 1.008c.593.586.848 1.52.454 2.363a9.967 9.967 0 01-.88 1.521c-.535.763-1.47 1.01-2.275.788l-1.377-.378c-.084-.023-.221-.013-.375.09-.268.178-.546.34-.835.482-.166.082-.242.197-.264.28l-.362 1.382c-.21.808-.894 1.495-1.823 1.575a9.998 9.998 0 01-1.752 0c-.929-.08-1.611-.767-1.823-1.575l-.361-1.382c-.022-.083-.099-.198-.265-.28a7.181 7.181 0 01-.835-.483c-.154-.102-.291-.112-.374-.088l-1.378.378c-.805.22-1.74-.026-2.275-.787-.337-.481-.632-.99-.88-1.523-.394-.844-.14-1.777.453-2.364l1.019-1.007c.063-.06.123-.184.11-.367a7.768 7.768 0 010-.966c.013-.183-.047-.307-.11-.367L1.386 8.142C.794 7.556.54 6.623.933 5.78a9.9 9.9 0 01.88-1.521c.535-.763 1.47-1.01 2.275-.788l1.377.377c.084.024.221.014.375-.088a7.45 7.45 0 01.835-.483c.166-.082.243-.197.264-.28L7.3 1.614C7.511.806 8.195.119 9.124.037 9.413.014 9.705 0 10 0zm-.714 1.906c-.045.004-.135.045-.171.183L8.754 3.47c-.184.701-.686 1.209-1.248 1.486a5.644 5.644 0 00-.625.363c-.521.347-1.212.529-1.911.337l-1.379-.378c-.136-.038-.218.02-.243.056-.275.39-.515.805-.717 1.237-.017.039-.026.138.074.238l1.019 1.007c.514.508.702 1.196.662 1.82a5.887 5.887 0 000 .728c.04.623-.148 1.312-.662 1.82L2.705 13.19c-.101.1-.091.199-.074.238.203.432.442.846.717 1.236.025.038.106.095.243.058l1.378-.38c.7-.19 1.391-.01 1.912.338.202.134.41.255.627.363.558.277 1.062.786 1.246 1.486l.361 1.381c.036.136.126.179.171.183a8.26 8.26 0 001.428 0c.045-.004.135-.045.171-.183l.361-1.381c.184-.701.686-1.209 1.248-1.486.216-.108.425-.229.625-.363.521-.347 1.212-.528 1.911-.337l1.379.379c.136.036.219-.02.244-.057a8.32 8.32 0 00.716-1.237c.017-.039.026-.138-.074-.238l-1.019-1.007c-.514-.508-.702-1.196-.662-1.82a5.887 5.887 0 000-.728c-.04-.623.148-1.312.662-1.82l1.019-1.007c.101-.1.091-.199.074-.238a8.082 8.082 0 00-.716-1.236c-.025-.037-.107-.095-.244-.058l-1.378.38c-.7.19-1.391.01-1.912-.338-.2-.135-.41-.256-.627-.363-.558-.277-1.062-.786-1.246-1.486l-.361-1.381c-.036-.138-.126-.179-.171-.183a8.251 8.251 0 00-1.428 0zM13.75 10a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zm-1.875 0a1.875 1.875 0 10-3.75 0 1.875 1.875 0 003.75 0z"
   }));
-  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(SettingsIcon);

package/data1/SlackIcon.d.ts

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

package/data1/SlackIcon.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 SlackIcon({
   size,
   colored,
   themed,
-  colormoded,
+  colormode,
   ...props
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
@@ -53,44 +66,46 @@ function SlackIcon({
     preserveAspectRatio: "xMidYMid",
     viewBox: "0 0 256 256",
     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("path", {
-    fill: colored ? '#DFA22F' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#DFA22F" : (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: "M165.964 15.838c-3.89-11.975-16.752-18.528-28.725-14.636-11.975 3.89-18.528 16.752-14.636 28.725l58.947 181.365c4.048 11.187 16.132 17.473 27.732 14.135 12.1-3.483 19.475-16.334 15.614-28.217L165.964 15.838"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#3CB187' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#3CB187" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M74.626 45.516C70.734 33.542 57.873 26.989 45.9 30.879 33.924 34.77 27.37 47.631 31.263 59.606l58.948 181.366c4.047 11.186 16.132 17.473 27.732 14.132 12.099-3.481 19.474-16.332 15.613-28.217L74.626 45.516"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#CE1E5B' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#CE1E5B" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 53%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 81%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 53%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 81%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 53%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M240.162 166.045c11.975-3.89 18.526-16.75 14.636-28.726-3.89-11.973-16.752-18.527-28.725-14.636L44.708 181.632c-11.187 4.046-17.473 16.13-14.135 27.73 3.483 12.099 16.334 19.475 28.217 15.614l181.372-58.93"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#392538' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#392538" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 40%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 94%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 40%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 94%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 40%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M82.508 217.27l43.347-14.084-14.086-43.352-43.35 14.09 14.089 43.347"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#BB242A' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#BB242A" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 50%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 84%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 50%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 84%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 50%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M173.847 187.591c16.388-5.323 31.62-10.273 43.348-14.084l-14.088-43.36-43.35 14.09 14.09 43.354"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#72C5CD' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#72C5CD" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 66%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 68%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 66%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 68%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 66%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M210.484 74.706c11.974-3.89 18.527-16.751 14.637-28.727-3.89-11.973-16.752-18.526-28.727-14.636L15.028 90.293C3.842 94.337-2.445 106.422.896 118.022c3.481 12.098 16.332 19.474 28.217 15.613l181.371-58.93"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#248C73' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#248C73" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 53%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 81%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 53%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 81%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 53%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M52.822 125.933c11.805-3.836 27.025-8.782 43.354-14.086-5.323-16.39-10.273-31.622-14.084-43.352l-43.36 14.092 14.09 43.346"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#62803A' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#62803A" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 50%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 84%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 50%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 84%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 50%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M144.16 96.256l43.356-14.088a546179.21 546179.21 0 00-14.089-43.36L130.07 52.9l14.09 43.356"
   }));
-  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(SlackIcon);

package/data1/Soc2Icon.d.ts

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

package/data1/Soc2Icon.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,32 +58,34 @@ function Soc2Icon({
   size,
   colored,
   themed,
-  colormoded,
+  colormode,
   ...props
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
-    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: "none",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     viewBox: "0 0 325 325",
     "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 ? '#7f84ff' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#7f84ff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 58%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 76%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 58%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 76%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 58%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M324.996 169.569c-.056.437-.156.87-.164 1.311-.104 5.324-.745 10.597-1.511 15.861-.985 6.787-2.456 13.474-4.303 20.076-.128.457-.28.906-.448 1.447-12.621-3.979-25.181-7.937-37.753-11.899 8.441-31.235 5.989-61.419-8.658-90.318-10.914-21.527-26.996-38.338-47.853-50.493-41.315-24.075-93.355-21.82-132.358 5.785-21.342 15.104-36.531 34.992-45.257 59.652-8.71 24.62-9.231 49.568-2.331 74.821L6.254 206.697c-.288-1.029-.581-1.999-.833-2.977a163.64 163.64 0 01-3.65-18.161A167.77 167.77 0 01.28 169.113c-.032-.75-.184-1.491-.28-2.24v-8.65c.096-.781.228-1.562.284-2.344.225-3.033.385-6.065.65-9.094.604-6.96 1.754-13.839 3.313-20.646a160.497 160.497 0 0114.139-38.45c8.493-16.314 19.435-30.773 32.817-43.386 14.892-14.038 31.831-24.892 50.809-32.548a159.313 159.313 0 0136.319-9.868C145.563.813 152.826.16 160.142.14c.273 0 .549-.092.822-.14h3.461c.273.048.545.14.817.14 5.293 0 10.557.389 15.814.974 6.947.773 13.81 2.007 20.597 3.678 18.306 4.507 35.289 12.011 50.978 22.44a161.339 161.339 0 0128.342 23.959c14.003 14.892 24.848 31.807 32.488 50.765a159.03 159.03 0 019.848 36.235c.798 5.388 1.431 10.789 1.543 16.242.008.304.096.609.148.913v14.227z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#3838e7' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#3838e7" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 50%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 84%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 50%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 84%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 50%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M160.955 325.104c-.24-.048-.48-.136-.721-.14-5.124-.1-10.236-.429-15.332-.974a160.157 160.157 0 01-30.79-6.402c-14.359-4.487-27.829-10.865-40.413-19.103a162.55 162.55 0 01-22.881-18.101 162.843 162.843 0 01-22.725-26.755 161.592 161.592 0 01-19.03-37.917c-.702-2.027-1.327-4.079-1.98-6.122-.088-.273-.148-.549-.252-.942l38.053-10.869c10.321 31.703 29.772 55.918 58.927 72.076 19.127 10.597 39.776 15.489 61.624 14.956 26.342-.641 50.165-8.862 71.202-24.744 21.038-15.881 35.43-36.547 43.491-61.611.729.008 35.853 10.986 37.813 11.823-.081.313-.145.645-.249.966a160.846 160.846 0 01-8.277 21.07 161.98 161.98 0 01-20.958 33.013 162.815 162.815 0 01-34.792 31.771 161.235 161.235 0 01-37.661 18.898 160.948 160.948 0 01-24.684 6.435c-5.3.945-10.633 1.646-16.001 2.035-3.414.248-6.843.333-10.265.497-.276.012-.553.092-.825.14h-3.27zM69.281 157.169l17.596-39.479h9.024l17.653 39.479h-9.588l-14.438-34.854h3.609l-14.494 34.854zm8.798-8.46l2.425-6.937h20.304l2.481 6.937zm39.57 8.46V117.69h9.137v39.479zm37.4.676c-3.046 0-5.885-.488-8.517-1.466-2.594-1.015-4.85-2.444-6.767-4.286a20.105 20.105 0 01-4.512-6.486c-1.053-2.481-1.579-5.207-1.579-8.178 0-2.97.526-5.696 1.579-8.177a20.105 20.105 0 014.512-6.486c1.955-1.843 4.229-3.253 6.824-4.23 2.594-1.015 5.433-1.523 8.516-1.523 3.421 0 6.504.602 9.249 1.805 2.783 1.165 5.114 2.895 6.994 5.189l-5.866 5.414c-1.353-1.542-2.857-2.689-4.512-3.441-1.654-.789-3.459-1.184-5.414-1.184-1.842 0-3.534.301-5.076.902a11.518 11.518 0 00-4.004 2.595 12.209 12.209 0 00-2.651 4.004c-.601 1.542-.902 3.252-.902 5.132s.301 3.591.902 5.133a12.209 12.209 0 002.651 4.004 11.501 11.501 0 004.004 2.594c1.542.602 3.234.903 5.076.903 1.955 0 3.76-.376 5.414-1.128 1.655-.79 3.159-1.974 4.512-3.554l5.866 5.415c-1.88 2.293-4.211 4.042-6.994 5.245-2.745 1.203-5.846 1.804-9.305 1.804zm22.468-.676V117.69h17.089c3.534 0 6.58.583 9.137 1.748 2.556 1.128 4.53 2.764 5.921 4.907 1.392 2.143 2.087 4.7 2.087 7.67 0 2.933-.695 5.471-2.087 7.614-1.391 2.143-3.365 3.797-5.921 4.963-2.557 1.128-5.603 1.692-9.137 1.692h-12.013l4.061-4.117v15.002zm9.137-13.987l-4.061-4.343h11.506c2.819 0 4.925-.601 6.316-1.804 1.391-1.204 2.087-2.877 2.087-5.02 0-2.181-.696-3.873-2.087-5.076-1.391-1.203-3.497-1.805-6.316-1.805h-11.506l4.061-4.342zm24.449 13.987l17.596-39.479h9.024l17.652 39.479h-9.587l-14.438-34.854h3.609l-14.494 34.854zm8.798-8.46l2.425-6.937h20.303l2.482 6.937z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#7f84ff' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#7f84ff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 58%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 76%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 58%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 76%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 58%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M89.495 216.054c-3.333 0-6.527-.436-9.583-1.309-3.055-.913-5.516-2.084-7.381-3.512l3.274-7.262c1.786 1.27 3.889 2.321 6.309 3.155a24.13 24.13 0 007.441 1.19c1.905 0 3.432-.178 4.583-.535 1.191-.397 2.064-.933 2.619-1.608a3.544 3.544 0 00.834-2.321c0-1.111-.437-1.984-1.31-2.619-.873-.675-2.024-1.21-3.452-1.607a52.233 52.233 0 00-4.762-1.191 67.335 67.335 0 01-5.179-1.428 22.113 22.113 0 01-4.702-2.143 10.813 10.813 0 01-3.512-3.452c-.873-1.429-1.309-3.254-1.309-5.477 0-2.38.634-4.543 1.904-6.488 1.31-1.984 3.254-3.551 5.834-4.702 2.619-1.19 5.892-1.786 9.821-1.786 2.619 0 5.198.318 7.738.953 2.54.595 4.782 1.508 6.726 2.738l-2.976 7.321c-1.944-1.111-3.889-1.924-5.833-2.44-1.945-.556-3.85-.834-5.715-.834-1.865 0-3.392.219-4.583.655-1.19.437-2.044 1.012-2.559 1.726-.516.675-.774 1.469-.774 2.381 0 1.072.436 1.945 1.309 2.619.873.635 2.024 1.151 3.453 1.548 1.428.397 2.996.794 4.702 1.19 1.746.397 3.472.854 5.179 1.369 1.746.516 3.333 1.211 4.761 2.084a10.263 10.263 0 013.453 3.452c.912 1.429 1.369 3.234 1.369 5.417 0 2.341-.655 4.484-1.964 6.428-1.31 1.945-3.274 3.512-5.893 4.703-2.58 1.19-5.853 1.785-9.822 1.785zm44.506 0c-3.294 0-6.349-.535-9.167-1.607-2.778-1.071-5.198-2.579-7.262-4.524a21.235 21.235 0 01-4.762-6.845c-1.111-2.619-1.666-5.476-1.666-8.571 0-3.095.555-5.953 1.666-8.572a20.81 20.81 0 014.822-6.845c2.063-1.944 4.484-3.452 7.262-4.523 2.777-1.072 5.793-1.608 9.047-1.608 3.294 0 6.31.536 9.048 1.608 2.778 1.071 5.178 2.579 7.202 4.523a20.792 20.792 0 014.821 6.845c1.151 2.58 1.727 5.437 1.727 8.572 0 3.095-.576 5.972-1.727 8.631a20.792 20.792 0 01-4.821 6.845c-2.024 1.905-4.424 3.393-7.202 4.464-2.738 1.072-5.734 1.607-8.988 1.607zm-.06-8.214c1.865 0 3.572-.317 5.119-.952a12.16 12.16 0 006.905-6.965c.675-1.627 1.012-3.432 1.012-5.416 0-1.984-.337-3.79-1.012-5.417a12.156 12.156 0 00-2.738-4.226 11.673 11.673 0 00-4.107-2.738c-1.588-.635-3.314-.952-5.179-.952-1.865 0-3.591.317-5.178.952a12.422 12.422 0 00-4.107 2.738c-1.191 1.191-2.123 2.599-2.798 4.226-.635 1.627-.952 3.433-.952 5.417 0 1.944.317 3.75.952 5.416.675 1.627 1.587 3.036 2.738 4.227a12.281 12.281 0 004.167 2.738c1.587.635 3.313.952 5.178.952zm49.985 8.214c-3.214 0-6.21-.516-8.988-1.547-2.738-1.072-5.119-2.58-7.143-4.524a21.246 21.246 0 01-4.762-6.845c-1.111-2.619-1.666-5.496-1.666-8.631s.555-6.012 1.666-8.631a21.235 21.235 0 014.762-6.845c2.064-1.945 4.464-3.433 7.202-4.464 2.739-1.072 5.735-1.608 8.988-1.608 3.612 0 6.866.635 9.762 1.905 2.937 1.23 5.397 3.056 7.381 5.476l-6.19 5.715c-1.429-1.627-3.016-2.838-4.762-3.631-1.746-.834-3.651-1.25-5.714-1.25-1.945 0-3.73.317-5.357.952a12.16 12.16 0 00-4.227 2.738c-1.19 1.191-2.123 2.599-2.797 4.226-.635 1.627-.953 3.433-.953 5.417s.318 3.789.953 5.416c.674 1.627 1.607 3.036 2.797 4.227a12.16 12.16 0 004.227 2.738c1.627.635 3.412.952 5.357.952 2.063 0 3.968-.397 5.714-1.19 1.746-.834 3.333-2.084 4.762-3.75l6.19 5.714c-1.984 2.42-4.444 4.266-7.381 5.536-2.896 1.269-6.17 1.904-9.821 1.904zm37.595-.714v-6.25l16.071-15.178c1.27-1.151 2.203-2.183 2.798-3.096.595-.912.992-1.746 1.19-2.5.238-.754.358-1.448.358-2.083 0-1.667-.576-2.936-1.727-3.809-1.111-.913-2.758-1.369-4.94-1.369-1.746 0-3.373.337-4.881 1.011-1.468.675-2.718 1.727-3.75 3.155l-7.024-4.524c1.588-2.381 3.81-4.265 6.667-5.654 2.857-1.389 6.151-2.084 9.881-2.084 3.095 0 5.793.516 8.095 1.548 2.341.992 4.147 2.401 5.417 4.226 1.309 1.826 1.964 4.008 1.964 6.548 0 1.349-.179 2.698-.536 4.047-.317 1.31-.992 2.699-2.024 4.167-.992 1.468-2.46 3.115-4.404 4.94l-13.334 12.56-1.845-3.512h23.512v7.857z"
   }), /*#__PURE__*/React.createElement("defs", {
     id: "prefix__defs36"
@@ -99,7 +114,7 @@ function Soc2Icon({
     id: "prefix__clip0_6149_5"
   }, /*#__PURE__*/React.createElement("path", {
     id: "prefix__rect32",
-    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: "M0 0h720v460H0z"
   })), /*#__PURE__*/React.createElement("pattern", {
     id: "prefix__pattern0_6149_5",
@@ -116,9 +131,9 @@ function Soc2Icon({
     height: 243,
     xlinkHref: "data:image/png;base64,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"
   })));
-  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(Soc2Icon);

package/data1/SolrIcon.d.ts

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

package/data1/SolrIcon.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 SolrIcon({
   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 253.756 253.756",
-    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 ? '#241f2b' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#241f2b" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 39%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 95%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 39%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 95%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 39%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M50.95 128.614c-2.93-1.56-6.243-2.66-9.843-3.267a64.633 64.633 0 00-10.693-.896c-2.908 0-5.85-.251-8.747-.746-2.82-.48-5.374-1.365-7.595-2.63-2.161-1.23-3.949-2.951-5.315-5.119-1.348-2.132-2.03-4.96-2.03-8.371.065-3.013.765-5.59 2.082-7.661a15.69 15.69 0 015.184-5.084c2.158-1.301 4.648-2.258 7.401-2.843 4.69-.995 9.642-1.18 14.687-.477a28.02 28.02 0 015.787 1.46 20.864 20.864 0 015.133 2.771c1.545 1.144 2.91 2.579 4.057 4.264l.643.944 4.735-1.993-1.005-1.419a31.286 31.286 0 00-4.244-4.873c-1.559-1.44-3.39-2.663-5.445-3.633-2.029-.956-4.35-1.692-6.902-2.189-2.527-.49-5.472-.737-8.754-.737-3.149 0-6.4.36-9.663 1.072-3.311.725-6.382 1.923-9.126 3.562a20.739 20.739 0 00-6.866 6.632c-1.782 2.774-2.687 6.196-2.687 10.174 0 4.175.84 7.729 2.492 10.561 1.642 2.815 3.845 5.096 6.546 6.779 2.645 1.65 5.731 2.836 9.172 3.525a53.458 53.458 0 0010.46 1.014c2.845 0 5.858.215 8.955.643 3.014.417 5.82 1.257 8.337 2.497 2.452 1.21 4.496 2.895 6.071 5.006 1.524 2.044 2.297 4.804 2.297 8.202 0 3.053-.745 5.655-2.21 7.742-1.516 2.155-3.483 3.933-5.85 5.286-2.417 1.381-5.153 2.399-8.137 3.022-3.031.635-6.031.957-8.915.957-4.841 0-9.625-.925-14.218-2.75a33.975 33.975 0 01-12.05-8.103l-.918-.956-3.777 3.272 1.06 1.06c3.38 3.382 7.575 6.325 12.47 8.753 4.953 2.459 10.82 3.705 17.433 3.705 3.145 0 6.482-.36 9.922-1.069 3.488-.721 6.76-1.952 9.725-3.664 3.013-1.737 5.52-4.01 7.453-6.757 1.986-2.821 2.994-6.351 2.994-10.498 0-4.2-.944-7.758-2.807-10.573-1.838-2.775-4.293-4.995-7.298-6.595m44.536 34.722c-3.415 0-6.537-.705-9.282-2.095a23.935 23.935 0 01-7.299-5.695c-2.074-2.384-3.721-5.171-4.896-8.286a31.067 31.067 0 01-1.992-9.693c0-3.036.563-6.139 1.67-9.222a27.06 27.06 0 014.792-8.333c2.067-2.446 4.584-4.472 7.48-6.025 2.847-1.525 6.052-2.299 9.527-2.299 3.268 0 6.354.724 9.173 2.15a25.003 25.003 0 017.472 5.758c2.107 2.385 3.789 5.174 5.003 8.29a26.643 26.643 0 011.821 9.681c0 3.033-.562 6.136-1.669 9.221a27.05 27.05 0 01-4.792 8.335 24.766 24.766 0 01-7.469 5.963c-2.849 1.494-6.057 2.25-9.539 2.25m20.722-46.721c-2.478-2.895-5.49-5.29-8.953-7.118-3.511-1.852-7.471-2.79-11.769-2.79-3.915 0-7.655.839-11.116 2.491a29.002 29.002 0 00-9.031 6.73c-2.546 2.812-4.588 6.123-6.068 9.842-1.482 3.723-2.235 7.693-2.235 11.797 0 3.879.694 7.675 2.063 11.284a32.244 32.244 0 005.781 9.73c2.481 2.864 5.499 5.205 8.969 6.957 3.496 1.768 7.404 2.703 11.612 2.78h.053c3.982-.077 7.754-.973 11.209-2.66a29.704 29.704 0 009.02-6.78c2.547-2.813 4.57-6.088 6.013-9.735 1.447-3.655 2.18-7.55 2.18-11.576 0-3.646-.673-7.362-2-11.044-1.328-3.68-3.256-7.015-5.728-9.908m33.52 45.339a29.06 29.06 0 01-2.19.47 91.49 91.49 0 01-2.106.324c-.696.099-1.385.15-2.048.15-1.671 0-2.901-.554-3.762-1.694-.951-1.255-1.414-2.501-1.414-3.811V84.472h-4.981v72.921c0 2.736.864 5.158 2.569 7.192 1.766 2.114 4.282 3.184 7.478 3.184a25 25 0 002.959-.174 88.947 88.947 0 002.507-.333 35.83 35.83 0 002.625-.513l1.69-.39-2.218-4.682zm21.493-50.228c-2.59 1.821-4.88 4.133-6.838 6.902v-11.045h-4.982v59.639h4.982v-37.13c.69-2.433 1.64-4.714 2.826-6.783a21.567 21.567 0 014.422-5.452c1.738-1.533 3.76-2.776 6.014-3.698 2.248-.92 4.784-1.457 7.539-1.596l1.325-.066v-4.914h-1.395c-5.309 0-9.983 1.394-13.893 4.143"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#da3522' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#da3522" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 54%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M242.39 53.266l-41.25 44.596 51.84-23.918a41.85 41.85 0 00-10.59-20.678M211.783 40a41.823 41.823 0 00-16.125 3.216l-5.535 46.642 27.66-49.424a42.196 42.196 0 00-6-.433m41.609 36.513l-49.123 27.49 46.088-5.469a41.82 41.82 0 003.4-16.561c0-1.853-.133-3.671-.365-5.46m-18.112 40.244a42.184 42.184 0 0013.266-14.524l-43.199 8.579zM220.311 40.87l-24.046 52.118 44.607-41.258c-5.594-5.38-12.67-9.232-20.56-10.86m-5.02 82.92a41.712 41.712 0 0013.175-3.298l-24.198-2.87zm-41.769-59.071a41.706 41.706 0 00-3.536 13.49l6.519 11.65zm18.498-19.778a42.17 42.17 0 00-14.79 13.209l6.084 30.63z"
   }));
-  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(SolrIcon);

package/data1/SparkleOcticonsIcon.d.ts

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