@datalayer/icons-react 1.0.8 → 1.0.10

package/data1/AnacondaIcon.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 AnacondaIcon({
   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 24 24",
-    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 ? '#43b038' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#43b038" : (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: "M12.045.033a12.181 12.182 0 00-1.361.078 17.512 17.513 0 011.813 1.433l.48.438-.465.45a15.047 15.048 0 00-1.126 1.205l-.178.215a8.527 8.527 0 01.86-.05 8.154 8.155 0 11-4.286 15.149 15.764 15.765 0 01-1.841.106h-.86a21.847 21.848 0 00.264 2.866 11.966 11.967 0 106.7-21.89zM8.17.678a12.181 12.182 0 00-2.624 1.275 15.506 15.507 0 011.813.43A18.551 18.552 0 018.17.678zM9.423.75a16.237 16.238 0 00-.995 1.998 16.15 16.152 0 011.605.66 6.98 6.98 0 01.43-.509c.234-.286.472-.559.716-.817A15.047 15.048 0 009.423.75zM4.68 2.949a14.969 14.97 0 000 2.336c.587-.065 1.196-.1 1.812-.107a16.617 16.617 0 01.48-1.748 16.48 16.481 0 00-2.292-.481zM3.62 3.5a11.938 11.938 0 00-1.858 2.38 17.004 17.004 0 011.877-.444A17.39 17.391 0 013.62 3.5zm4.406.287c-.143.437-.265.888-.38 1.347a8.255 8.255 0 011.67-.803c-.423-.2-.845-.38-1.29-.544zM6.3 6.216a14.051 14.052 0 00-1.555.108c.064.523.157 1.038.272 1.554A8.39 8.391 0 016.3 6.216zm-2.55.137a15.313 15.313 0 00-2.602.716H1.07v.079a17.104 17.105 0 001.267 2.544l.043.071.072-.049a16.309 16.31 0 011.734-1.083l.057-.035V8.54a16.867 16.868 0 01-.408-2.094v-.092zM.644 8.095l-.063.2A11.844 11.845 0 000 11.655v.209l.143-.152a17.706 17.707 0 011.584-1.447l.057-.043-.043-.064a16.18 16.18 0 01-1.025-1.87zm3.77 1.253l-.18.1c-.465.273-.93.573-1.375.889l-.065.05.05.064c.309.437.645.867.996 1.276l.137.165v-.208a8.176 8.176 0 01.364-2.15zM2.2 10.853l-.072.05a16.574 16.574 0 00-1.813 1.734l-.058.058.066.057a15.449 15.45 0 001.991 1.483l.072.05.043-.08a16.738 16.74 0 011.053-1.64v-.05l-.043-.05a16.99 16.99 0 01-1.19-1.54zm1.855 2.071l-.121.172a15.363 15.363 0 00-.917 1.433l-.043.072.071.043a16.61 16.61 0 001.562.766l.193.086-.086-.193a8.04 8.04 0 01-.66-2.172zm-3.976.48v.2a11.758 11.759 0 00.946 3.326l.078.186.072-.194a16.215 16.216 0 01.845-2l.057-.063-.064-.043a17.197 17.198 0 01-1.776-1.284zm2.543 1.805l-.035.08a15.764 15.765 0 00-.983 2.479v.08h.086a16.15 16.152 0 002.688.5l.072.007v-.086a17.562 17.563 0 01.164-2.056v-.065H4.55a16.266 16.266 0 01-1.849-.896zm2.544 1.169v.114a17.254 17.255 0 00-.151 1.828v.078h.931c.287 0 .624.014.946 0h.209l-.166-.129a8.011 8.011 0 01-1.64-1.834zm-3.29 2.1l.115.172a11.988 11.988 0 002.502 2.737l.157.129v-.201a22.578 22.58 0 01-.2-2.336v-.071h-.072a16.23 16.23 0 01-2.3-.387z"
   }));
-  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(AnacondaIcon);

package/data1/AndroidIcon.d.ts

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

package/data1/AndroidIcon.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 AndroidIcon({
   size,
   colored,
   themed,
-  colormoded,
+  colormode,
   ...props
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
@@ -53,23 +66,25 @@ function AndroidIcon({
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     viewBox: "-147 -70 345 345",
     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("g", {
-    fill: colored ? '#a4c639' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#a4c639" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 69%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 65%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 69%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 65%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 69%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     transform: "translate(28)"
   }, /*#__PURE__*/React.createElement("use", {
     width: "100%",
     height: "100%",
-    stroke: "#fff",
+    stroke: 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))))")),
     strokeWidth: 14.4,
     xlinkHref: "#prefix__a"
   }), /*#__PURE__*/React.createElement("use", {
@@ -79,7 +94,7 @@ function AndroidIcon({
     xlinkHref: "#prefix__b"
   }), /*#__PURE__*/React.createElement("g", {
     id: "prefix__b",
-    stroke: "#fff",
+    stroke: 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))))")),
     strokeWidth: 7.2
   }, /*#__PURE__*/React.createElement("rect", {
     width: 13,
@@ -114,8 +129,8 @@ function AndroidIcon({
     y: 20,
     rx: 22
   }))), /*#__PURE__*/React.createElement("g", {
-    fill: colored ? '#fff' : 'white',
-    stroke: "#fff",
+    fill: colored ? "#fff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    stroke: 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))))")),
     strokeWidth: 7.2,
     transform: "translate(28)"
   }, /*#__PURE__*/React.createElement("path", {
@@ -127,9 +142,9 @@ function AndroidIcon({
     cx: 42,
     r: 4
   })));
-  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(AndroidIcon);

package/data1/ApacheFeatherHorizontalIcon.d.ts

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

package/data1/ApacheFeatherHorizontalIcon.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,22 +58,24 @@ function ApacheFeatherHorizontalIcon({
   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 1000 999.983",
-    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("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
     id: "prefix__b",
@@ -260,79 +275,79 @@ function ApacheFeatherHorizontalIcon({
     offset: 1,
     stopColor: "#e97826"
   }))), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#prefix__a)",
+    fill: colored ? "url(#prefix__a)" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 45%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 89%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 45%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 89%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 45%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M656.71-7.09c20.267-9.595 39.714-20.145 58.137-31.856.646-.424 1.3-.8 1.946-1.223-7.515 19.097-3.838 52.585-3.754 52.44 11.85-34.711 26.515-65.255 48.744-84.672 8.483 7.593 14.923 21.83 20.214 39.882 2.619-24.85-1.858-38.732-4.051-43.8 10.917 12.949 30.734 20.177 52.045 26.46-23.946-14.535-39.792-28.877-46.004-42.954 68.312-21.018 142.29-46.157 219.96-74.026-6.093-4.591-12.639-5.17-19.442-3.17-14.023 5.1-106.22 38.311-231.64 76.243-3.563 1.078-7.157 2.151-10.768 3.238-1.007.307-2.026.597-3.015.891a4626.008 4626.008 0 01-40.462 11.92c-3.144.904-6.287 1.808-9.448 2.725a1.504 1.504 0 01-.18.052L654.476-6.005c.712-.336 1.494-.724 2.24-1.086z",
     transform: "translate(-2.829 519.28)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#prefix__b)",
+    fill: colored ? "url(#prefix__b)" : (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: "M23.148 66.817c19.071 7.196 39.608 9.085 59.733 11.274 11.854 1.123 23.738 1.914 35.63 2.493l24.508-51.311c-31.491.856-63.087.176-94.393-3.54 30.943 3.102 62.137 1.849 93.129.17-22.37-26.67-46.909-51.428-71.93-75.588-23.519 11.839-46.291 28.35-58.634 52.244-6.3 14.546-9.95 31.534-4.821 46.98 2.756 7.895 9.065 14.16 16.773 17.278z",
     transform: "translate(-2.829 519.28)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: "none",
     d: "M277.411 451.591c-.153-.133-.289-.279-.443-.412l2.62 2.831c.233.13.44.223.655.365-.947-.944-1.898-1.857-2.832-2.784zm88.48-31.776c1.69 1.464 3.316 3.03 4.92 4.638a107.536 107.536 0 00-4.92-4.638zm272.17 28.111c-.772.216-1.545.433-2.304.666a4083.53 4083.53 0 01-46.643 12.908 3770.886 3770.886 0 01-49.773 13.09 3451.8 3451.8 0 01-49.58 12.314 3187.767 3187.767 0 01-48.886 11.362 2919.103 2919.103 0 01-37.426 8.133c-4.033.85-8.05 1.688-12.03 2.5a3646.142 3646.142 0 01-23.222 4.68 1964.999 1964.999 0 01-20.66 3.958c-2.254.438-4.486.83-6.723 1.255-.358.073-.728.128-1.086.201l2.226 2.41-2.558 5.134c.551-.107 1.098-.183 1.663-.273a2080.002 2080.002 0 0030.84-5.582c5.965-1.13 11.949-2.274 17.936-3.449 16.6-3.254 33.24-6.675 49.89-10.268a2901.203 2901.203 0 0050.376-11.314c16.449-3.828 32.823-7.792 49.096-11.819a4002.227 4002.227 0 0048.306-12.33 3804.489 3804.489 0 0049.245-13.248c3.646-1.002 7.292-2.005 10.926-3.025a4828.066 4828.066 0 0038.464-10.878l4.056-8.11-2.498-2.702c-.38.117-.76.234-1.121.337a4486.416 4486.416 0 01-48.514 14.048zm-266.03-22.268c-.012-.017-.03-.004-.044-.022 0 0 .012.018.044.022z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#be202e' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#be202e" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 51%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 83%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 51%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 83%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 51%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M412.531 406.61c2.517 2.36 5.082 4.82 7.717 7.338.012.017.044.022.057.04a194.246 194.246 0 00-3.862-3.803 127.698 127.698 0 00-3.912-3.575z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#be202e' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#be202e" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 51%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 83%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 51%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 83%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 51%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M412.531 406.61c2.517 2.36 5.082 4.82 7.717 7.338.012.017.044.022.057.04a194.246 194.246 0 00-3.862-3.803 127.698 127.698 0 00-3.912-3.575z",
     opacity: 0.35
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#be202e' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#be202e" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 51%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 83%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 51%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 83%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 51%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M371.941 425.614s.012.018.031.005c.012.018.031.004.044.022-.394-.42-.81-.798-1.192-1.2a101.927 101.927 0 00-4.92-4.639c1.969 1.915 3.999 3.84 6.038 5.812z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#be202e' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#be202e" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 51%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 83%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 51%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 83%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 51%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M371.941 425.614s.012.018.031.005c.012.018.031.004.044.022-.394-.42-.81-.798-1.192-1.2a101.927 101.927 0 00-4.92-4.639c1.969 1.915 3.999 3.84 6.038 5.812z",
     opacity: 0.35
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#prefix__c)",
+    fill: colored ? "url(#prefix__c)" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M294.05 14.992a1625.557 1625.557 0 01-50.218 6.643c-17.122 1.995-33.955 3.639-50.416 4.896-.957.079-1.945.153-2.92.244-16.217 1.216-32.063 2.045-47.488 2.48L118.5 80.566c3.16.154 6.354.282 9.61.419 12.252.464 25.27.743 38.903.814 15.365.076 31.56-.134 48.36-.602a1599.17 1599.17 0 0048.05-2.128 1648.152 1648.152 0 0042.839-3.091c.542-.046 1.068-.078 1.61-.124 13.32-22.17 22.89-45.722 34.335-68.583a2144.338 2144.338 0 01-48.157 7.721z",
     transform: "translate(-2.829 519.28)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#prefix__d)",
+    fill: colored ? "url(#prefix__d)" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M639.56-61.012a4661.144 4661.144 0 01-49.245 13.247 3794.2 3794.2 0 01-48.306 12.331 3443.71 3443.71 0 01-49.096 11.819 3099.875 3099.875 0 01-50.376 11.314 2765.171 2765.171 0 01-49.89 10.268 2857.01 2857.01 0 01-17.936 3.45 2087.335 2087.335 0 01-30.84 5.581c-.552.107-1.099.184-1.663.273l-34.33 68.583c1.085-.091 2.156-.2 3.241-.29 15.39-1.37 31.015-2.941 46.78-4.807a1527.85 1527.85 0 0048.061-6.443 1438.003 1438.003 0 0040.724-6.682 2411.53 2411.53 0 008.18-1.511 1011.13 1011.13 0 0048.365-10.29c17.296-4.127 33.51-8.494 48.61-12.995a890.285 890.285 0 0028.43-8.98 860.94 860.94 0 0022.71-8.223c17.654-6.642 34.84-13.842 51.5-21.64 11.64-22.613 23.67-45.588 34.514-68.935a4881.87 4881.87 0 01-38.5 10.904c-3.615 1.007-7.28 2.022-10.926 3.025z",
     transform: "translate(-2.829 519.28)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#prefix__e)",
+    fill: colored ? "url(#prefix__e)" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M343.66-.501c2.22-.41 4.456-.835 6.724-1.254 6.76-1.28 13.634-2.592 20.66-3.959 7.593-1.488 15.324-3.05 23.222-4.68 3.98-.812 7.965-1.654 12.03-2.5a2913.418 2913.418 0 0037.425-8.132 3195.24 3195.24 0 0048.887-11.362 3443.203 3443.203 0 0049.58-12.315 3922.714 3922.714 0 0049.772-13.09A4105.818 4105.818 0 00638.603-70.7a91.81 91.81 0 002.305-.666A4220.898 4220.898 0 00689.39-85.42c.38-.117.76-.234 1.121-.338l-19.143-20.676c.24.508.528 1.008.767 1.516-23.296-24.428-69.92-45.278-111.88-49.997-19.338-2.178-39.994-1.843-62.413.925-16.69 2.06-34.353 5.47-53.19 10.22-16.465 4.14-33.815 9.267-52.185 15.424 7.839 3.764 15.478 9.073 22.931 15.646a167.371 167.371 0 013.912 3.574 135.706 135.706 0 013.863 3.804c-.012-.018-.045-.023-.057-.04-28.247-17.932-58.622-19.938-89.973-14.526 9.392 3.269 23.242 9.626 35.603 20.379 1.689 1.463 3.315 3.028 4.92 4.637.412.408.81.798 1.192 1.201-.012-.017-.031-.004-.044-.022 0 0-.012-.018-.031-.004-10.105-6.007-19.623-10.334-29.164-13.137a86.651 86.651 0 00-6.145-1.59 98.061 98.061 0 00-9.432-1.621 90.597 90.597 0 00-6.124-.563 108.79 108.79 0 00-14.877.138c-1.56.115-3.126.26-4.727.432a517.93 517.93 0 00-6.53 1.11c-9.644 1.72-18.002 3.582-25.18 5.446-3.588.932-6.86 1.849-9.848 2.775-1.188.36-2.345.724-3.453 1.079-3.312 1.084-6.205 2.103-8.696 3.073-3.728 1.447-6.57 2.758-8.567 3.8a33.66 33.66 0 014.166 1.438c10.15 4.217 23.89 14.166 33.59 23.215l-17.582-18.98 17.583 18.98c.153.133.29.28.443.412.951.914 1.898 1.858 2.863 2.789-.233-.13-.44-.173-.655-.315l60.164 64.89c.34-.06.68-.12 1.05-.175z",
     transform: "translate(-2.829 519.28)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#prefix__f)",
+    fill: colored ? "url(#prefix__f)" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M141.76 25.871c14.308-.869 30.359-2.124 48.242-3.943.926-.083 1.888-.193 2.831-.289a1588.593 1588.593 0 0050.488-6.02 1856.4 1856.4 0 0050.245-7.458A2174.25 2174.25 0 00342.61-.327l-59.49-64.569c-24.736-13.566-40.82-16.793-59.84-16.546-5.176.16-10.524.422-15.983.793-16.71 1.142-34.469 3.279-51.604 6.106-16.54 2.743-32.435 6.133-46.23 9.914-8.771 2.415-16.684 4.99-23.332 7.642a211.858 211.858 0 00-16.287 7.301c25.101 24.05 54.59 54.423 71.931 75.557z",
     transform: "translate(-2.829 519.28)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#be202e' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#be202e" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 51%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 83%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 51%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 83%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 51%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M372.031 425.658c-.394-.42-.81-.798-1.192-1.2.381.402.78.793 1.192 1.2z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#be202e' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#be202e" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 51%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 83%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 51%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 83%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 51%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M372.031 425.658c-.394-.42-.81-.798-1.192-1.2.381.402.78.793 1.192 1.2z",
     opacity: 0.35
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#prefix__h)",
+    fill: colored ? "url(#prefix__h)" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M374.86-93.622c-.394-.42-.811-.798-1.192-1.201.381.403.78.793 1.192 1.201z",
     transform: "translate(-2.829 519.28)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#be202e' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#be202e" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 51%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 83%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 51%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 83%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 51%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M371.981 425.618s-.012-.017-.03-.004c0 0 .011.018.03.004z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#be202e' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#be202e" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 51%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 83%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 51%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 83%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 51%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M371.981 425.618s-.012-.017-.03-.004c0 0 .011.018.03.004z",
     opacity: 0.35
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#prefix__i)",
+    fill: colored ? "url(#prefix__i)" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M374.81-93.662s-.012-.018-.03-.004c0 0 .011.017.03.004z",
     transform: "translate(-2.829 519.28)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#6d6e71' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#6d6e71" : (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: "M960.931 579.42l.001 2.578 6.039-.003.009 17.057 2.799-.002-.01-17.057 6.083-.003-.002-2.578-14.92.007zm34.886-.019l-6.736 13.711-6.795-13.704-3.372.002.01 19.636 2.578-.001-.01-15.581 6.685 13.506 1.785-.001 6.67-13.513.01 15.58h2.58l-.01-19.637-3.395.002z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#prefix__j)",
+    fill: colored ? "url(#prefix__j)" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 45%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 89%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 45%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 89%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 45%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M697.74-87.882a4324.231 4324.231 0 0039.192-11.856c.199-.065.38-.117.578-.182 1.881-.571 3.749-1.16 5.63-1.732 8.95-2.767 16.955-5.328 35.178-11.129-2.342-10.966 2.618-24.849 9.169-39.363-11.075 9.226-18.387 22.082-20.063 37.4-28.142-41.769-64.174-69.018-107.07-65.116a92.84 92.84 0 00-11.624 1.787c16.438.488 28.367 7.363 41.449 27.265.044.022.1.062.145.085-.044-.023-.101-.063-.145-.085-33.43-18.78-55.964-23.938-85.227-21.557-6.936.561-14.25 1.54-22.182 2.866 43.476 5.873 71.79 29.037 88.586 63.086l.776 1.494 18.367 19.182c2.419-.696 4.825-1.41 7.249-2.137z",
     transform: "translate(-2.829 519.28)"
   }));
-  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(ApacheFeatherHorizontalIcon);

package/data1/ApacheFeatherVerticalIcon.d.ts

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