@datalayer/icons-react 1.0.9 → 1.0.10

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);
 }
 
@@ -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", {

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);
 }
 
@@ -51,16 +64,18 @@ function ApacheFeatherHorizontalIcon({
   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,73 +275,73 @@ 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)"
   }));

package/data1/ApacheFeatherVerticalIcon.js

@@ -11,31 +11,44 @@ function _DlIconInverseColormode({
   children
 }) {
   const ref = React.useRef(null);
-  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
   React.useLayoutEffect(() => {
-    if (typeof mode === "string") {
-      setResolved(mode);
-      return;
-    }
     if (typeof document === "undefined") return;
-    let cur = null;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
     let el = ref.current && ref.current.parentElement;
-    while (el) {
-      const m = el.getAttribute && el.getAttribute("data-color-mode");
-      if (m) { cur = m; break; }
+    while (el && (!currentMode || !lightTheme || !darkTheme)) {
+      if (el.getAttribute) {
+        currentMode = currentMode || el.getAttribute("data-color-mode");
+        lightTheme = lightTheme || el.getAttribute("data-light-theme");
+        darkTheme = darkTheme || el.getAttribute("data-dark-theme");
+      }
       el = el.parentElement;
     }
-    if (!cur || cur === "auto") {
-      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    if (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
     }
-    setResolved(cur === "dark" ? "light" : "dark");
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
   }, [mode]);
   return /*#__PURE__*/React.createElement("span", {
     ref: ref,
-    "data-color-mode": resolved || "light",
-    "data-light-theme": "light",
-    "data-dark-theme": "dark",
-    style: { display: "inline-flex", lineHeight: 0 }
+    "data-color-mode": appearance.mode || "light",
+    "data-light-theme": appearance.lightTheme || undefined,
+    "data-dark-theme": appearance.darkTheme || undefined,
+    style: {
+      display: "inline-flex",
+      lineHeight: 0,
+      color: "var(--fgColor-default, var(--color-fg-default, currentColor))"
+    }
   }, children);
 }
 
@@ -51,16 +64,18 @@ function ApacheFeatherVerticalIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 4266.6 4226.6",
-    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("linearGradient", {
     id: "prefix__a",
@@ -80,23 +95,23 @@ function ApacheFeatherVerticalIcon({
     offset: 0.838,
     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) 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: "M2861.487 25.85c-66.3 39.1-176.4 149.9-307.9 310.4l120.8 228c84.8-121.3 170.9-230.4 257.8-323.6 6.7-7.4 10.2-10.9 10.2-10.9-3.4 3.6-6.8 7.3-10.2 10.9-28.1 31-113.4 130.5-242.1 328.1 123.9-6.2 314.3-31.5 469.6-58.1 46.2-258.8-45.3-377.3-45.3-377.3s-116.3-188.2-252.9-107.5z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: "none",
     d: "M2656.987 1326.45c.9-.2 1.8-.3 2.7-.5l-17.4 1.9c-1.1.5-2 1-3.1 1.4 6-.9 11.9-1.9 17.8-2.8zm-123.3 408.4c-9.9 2.2-20 3.9-30.2 5.4 10.2-1.5 20.3-3.3 30.2-5.4zm-838 916.1c1.3-3.4 2.6-6.8 3.8-10.2 26.6-70.2 52.9-138.4 79-204.9 29.3-74.6 58.2-146.8 86.8-216.8 30.1-73.8 59.8-145.1 89.1-214 30.7-72.3 61-141.9 90.7-208.9 24.2-54.5 48-107.3 71.5-158.4 7.8-17 15.6-33.9 23.4-50.6 15.4-33.1 30.7-65.6 45.7-97.3 13.9-29.3 27.7-57.9 41.4-86 4.5-9.4 9.1-18.6 13.6-27.9.7-1.5 1.5-3 2.2-4.5l-14.8 1.6-11.8-23.2c-1.1 2.3-2.3 4.5-3.5 6.8-21.2 42.1-42.2 84.6-63 127.5-12 24.8-24 49.7-35.9 74.7-33 69.3-65.5 139.2-97.4 209.6-32.3 71.1-63.9 142.6-94.9 214.2-30.5 70.3-60.3 140.7-89.6 210.9-29.2 70.1-57.7 140-85.6 209.4-29.1 72.5-57.4 144.3-84.8 215.3-6.2 16-12.4 32-18.5 48-22 57.3-43.4 113.8-64.3 169.6l18.6 36.7 16.6-1.8c.6-1.7 1.2-3.4 1.8-5 26.9-73.5 53.5-145.1 79.9-214.8zm800.1-909.5c.1 0 .1-.1.2-.1 0 0-.1 0-.2.1z"
   }), /*#__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: "M2455.787 1940.55c-15.4 2.8-31.3 5.5-47.6 8.3-.1 0-.2.1-.3.1 8.2-1.2 16.3-2.4 24.3-3.8s15.8-2.9 23.6-4.6z"
   }), /*#__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: "M2455.787 1940.55c-15.4 2.8-31.3 5.5-47.6 8.3-.1 0-.2.1-.3.1 8.2-1.2 16.3-2.4 24.3-3.8s15.8-2.9 23.6-4.6z",
     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: "M2496.187 1741.25s-.1 0-.1.1c-.1 0-.1.1-.2.1 2.6-.3 5.1-.8 7.6-1.1 10.3-1.5 20.4-3.3 30.2-5.4-12.3 2-24.8 4.2-37.5 6.3z"
   }), /*#__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: "M2496.187 1741.25s-.1 0-.1.1c-.1 0-.1.1-.2.1 2.6-.3 5.1-.8 7.6-1.1 10.3-1.5 20.4-3.3 30.2-5.4-12.3 2-24.8 4.2-37.5 6.3z",
     opacity: 0.35
   }), /*#__PURE__*/React.createElement("linearGradient", {
@@ -120,7 +135,7 @@ function ApacheFeatherVerticalIcon({
     offset: 1,
     stopColor: "#e97826"
   })), /*#__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) 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: "M2318.287 1153.35c36.7-68.6 73.9-135.7 111.5-201 39-67.8 78.5-133.6 118.4-197 2.3-3.7 4.7-7.5 7-11.3 39.4-62.4 79.2-122.4 119.3-179.8l-120.8-228c-9.1 11.1-18.2 22.4-27.5 33.9-34.8 43.4-71 90.1-108.1 139.6-41.8 55.8-84.8 115.4-128.5 177.9-40.3 57.8-81.2 118.3-122.1 180.9-34.8 53.3-69.8 108.2-104.5 164.5l-3.9 6.3 157.2 310.5c33.6-66.5 67.6-132.1 102-196.5z"
   }), /*#__PURE__*/React.createElement("linearGradient", {
     id: "prefix__c",
@@ -143,7 +158,7 @@ function ApacheFeatherVerticalIcon({
     offset: 0.949,
     stopColor: "#cd2032"
   })), /*#__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) 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: "M1602.287 2902.85c-20.8 57.2-41.7 115.4-62.7 174.9-.3.9-.6 1.7-.9 2.6-3 8.4-5.9 16.8-8.9 25.2-14.1 40.1-26.4 76.2-54.5 158.3 46.3 21.1 83.5 76.7 118.7 139.8-3.7-65.3-30.8-126.7-82.1-174.2 228.3 10.3 425-47.4 526.7-214.3 9.1-14.9 17.4-30.5 24.9-47.2-46.2 58.6-103.5 83.5-211.4 77.4-.2.1-.5.2-.7.3.2-.1.5-.2.7-.3 158.8-71.1 238.5-139.3 308.9-252.4 16.7-26.8 32.9-56.1 49.5-88.6-138.9 142.6-299.8 183.2-469.3 152.4l-127.1 13.9c-4 10.7-7.9 21.4-11.8 32.2z"
   }), /*#__PURE__*/React.createElement("linearGradient", {
     id: "prefix__d",
@@ -166,7 +181,7 @@ function ApacheFeatherVerticalIcon({
     offset: 1,
     stopColor: "#e97826"
   })), /*#__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: "M1661.587 2618.15c27.5-71 55.8-142.8 84.8-215.3 27.8-69.4 56.4-139.2 85.6-209.4 29.2-70.2 59.1-140.5 89.6-210.9 31-71.6 62.7-143.1 94.9-214.2 31.9-70.3 64.4-140.3 97.4-209.6 11.9-25 23.9-49.9 35.9-74.7 20.8-42.9 41.8-85.4 63-127.5 1.1-2.3 2.3-4.5 3.5-6.8l-157.2-310.5c-2.6 4.2-5.1 8.4-7.7 12.6-36.6 59.8-73.1 121-108.9 183.5-36.2 63.1-71.7 127.4-106.4 192.6-29.3 55-57.9 110.5-85.7 166.5-5.6 11.4-11.1 22.6-16.6 33.9-34.3 70.5-65.2 138.6-93.2 204.1-31.7 74.2-59.6 145.1-84 212.3-16.1 44.2-30.7 86.9-44.1 127.9-11 35-21.5 70.1-31.4 105-23.5 82.3-43.7 164.4-60.3 246.2l158 311.9c20.9-55.8 42.3-112.3 64.3-169.6 6.1-15.9 12.3-32 18.5-48z"
   }), /*#__PURE__*/React.createElement("linearGradient", {
     id: "prefix__e",
@@ -189,7 +204,7 @@ function ApacheFeatherVerticalIcon({
     offset: 0.949,
     stopColor: "#cd2032"
   })), /*#__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) 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: "M1418.687 2534.95c-19.8 99.8-33.9 199.2-41 298-.2 3.5-.6 6.9-.8 10.4-49.3-79-181.3-156.1-181-155.4 94.5 137 166.2 273 176.9 406.5-50.6 10.4-119.9-4.6-200-34.1 83.5 76.7 146.2 97.9 170.6 103.6-76.7 4.8-156.6 57.5-237.1 118.2 117.7-48 212.8-67 280.9-51.6-108 305.8-216.3 643.4-324.6 1001.8 33.2-9.8 53-32.1 64.1-62.3 19.3-64.9 147.4-490.7 348.1-1050.4 5.7-15.9 11.5-31.9 17.3-48 1.6-4.5 3.3-9 4.9-13.4 21.2-58.7 43.2-118.6 65.9-179.7 5.2-13.9 10.4-27.8 15.6-41.8.1-.3.2-.6.3-.8l-157.8-311.8c-.7 3.5-1.6 7.1-2.3 10.8z"
   }), /*#__PURE__*/React.createElement("linearGradient", {
     id: "prefix__f",
@@ -212,7 +227,7 @@ function ApacheFeatherVerticalIcon({
     offset: 1,
     stopColor: "#e97826"
   })), /*#__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: "M2240.687 1376.05c-4.5 9.2-9 18.5-13.6 27.9-13.6 28.1-27.4 56.7-41.4 86-15.1 31.7-30.3 64.1-45.7 97.3-7.8 16.7-15.5 33.5-23.4 50.6-23.5 51.1-47.3 103.9-71.5 158.4-29.7 67-60 136.6-90.7 208.9-29.3 68.9-59 140.2-89.1 214-28.6 70-57.5 142.3-86.8 216.8-26.1 66.5-52.4 134.7-79 204.9-1.3 3.4-2.6 6.8-3.8 10.2-26.4 69.7-53 141.3-79.8 214.7-.6 1.7-1.2 3.4-1.8 5l127.1-13.9c-2.5-.5-5.1-.8-7.6-1.3 152-18.9 354-132.5 484.6-272.7 60.2-64.6 114.8-140.8 165.3-230 37.6-66.4 72.9-140 106.5-221.5 29.4-71.2 57.6-148.3 84.8-231.9-34.9 18.4-74.9 31.9-119 41.3-7.7 1.6-15.6 3.2-23.6 4.6-8 1.4-16.1 2.7-24.3 3.8.1 0 .2-.1.3-.1 141.7-54.5 231.1-159.8 296.1-288.7-37.3 25.4-97.9 58.7-170.5 74.7-9.9 2.2-20 3.9-30.2 5.4-2.6.4-5.1.8-7.6 1.1.1 0 .1-.1.2-.1 0 0 .1 0 .1-.1 49.2-20.6 90.7-43.6 126.7-70.8 7.7-5.8 15.2-11.8 22.4-18.1 11-9.5 21.4-19.5 31.4-30 6.4-6.7 12.6-13.6 18.6-20.8 14.1-16.8 27.3-34.9 39.7-54.6 3.8-6 7.5-12.1 11.2-18.4 4.7-9.1 9.2-18 13.6-26.8 19.8-39.8 35.6-75.3 48.2-106.5 6.3-15.6 11.8-30 16.5-43.4 1.9-5.3 3.7-10.5 5.4-15.5 5-15 9.1-28.3 12.3-40 4.8-17.5 7.7-31.4 9.3-41.5-4.8 3.8-10.3 7.6-16.5 11.3-42.8 25.6-116.2 48.8-175.4 59.7l116.7-12.8-116.7 12.8c-.9.2-1.8.3-2.7.5-5.9 1-11.9 1.9-17.9 2.9 1.1-.5 2-1 3.1-1.4l-399.3 43.8c-.7 1.4-1.4 2.8-2.2 4.3z"
   }), /*#__PURE__*/React.createElement("linearGradient", {
     id: "prefix__g",
@@ -235,13 +250,13 @@ function ApacheFeatherVerticalIcon({
     offset: 1,
     stopColor: "#e97826"
   })), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#prefix__g)",
+    fill: colored ? "url(#prefix__g)" : (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: "M2690.187 568.85c-35.5 54.5-74.3 116.4-116 186.5-2.2 3.6-4.4 7.4-6.6 11.1-36 60.7-74.3 127.3-114.5 200.3-34.8 63-71 130.6-108.6 203.3-32.8 63.3-66.7 130.5-101.5 201.6l399.3-43.8c116.3-53.5 168.3-101.9 218.8-171.9 13.4-19.3 26.9-39.5 40.3-60.4 41-64 81.2-134.5 117.2-204.6 34.7-67.7 65.3-134.8 88.8-195.3 14.9-38.5 26.9-74.3 35.2-105.7 7.3-27.7 13-54 17.4-79.1-155.5 26.5-345.9 51.9-469.8 58z"
   }), /*#__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: "M2432.187 1945.15c-8 1.4-16.1 2.7-24.3 3.8 8.2-1.1 16.3-2.4 24.3-3.8z"
   }), /*#__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: "M2432.187 1945.15c-8 1.4-16.1 2.7-24.3 3.8 8.2-1.1 16.3-2.4 24.3-3.8z",
     opacity: 0.35
   }), /*#__PURE__*/React.createElement("linearGradient", {
@@ -265,13 +280,13 @@ function ApacheFeatherVerticalIcon({
     offset: 1,
     stopColor: "#e97826"
   })), /*#__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: "M2432.187 1945.15c-8 1.4-16.1 2.7-24.3 3.8 8.2-1.1 16.3-2.4 24.3-3.8z"
   }), /*#__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: "M2495.787 1741.45c2.6-.3 5.1-.8 7.6-1.1-2.5.3-5 .7-7.6 1.1z"
   }), /*#__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: "M2495.787 1741.45c2.6-.3 5.1-.8 7.6-1.1-2.5.3-5 .7-7.6 1.1z",
     opacity: 0.35
   }), /*#__PURE__*/React.createElement("linearGradient", {
@@ -295,13 +310,13 @@ function ApacheFeatherVerticalIcon({
     offset: 1,
     stopColor: "#e97826"
   })), /*#__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: "M2495.787 1741.45c2.6-.3 5.1-.8 7.6-1.1-2.5.3-5 .7-7.6 1.1z"
   }), /*#__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: "M2496.087 1741.35s.1 0 .1-.1c0 0-.1 0-.1.1z"
   }), /*#__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: "M2496.087 1741.35s.1 0 .1-.1c0 0-.1 0-.1.1z",
     opacity: 0.35
   }), /*#__PURE__*/React.createElement("linearGradient", {
@@ -325,10 +340,10 @@ function ApacheFeatherVerticalIcon({
     offset: 1,
     stopColor: "#e97826"
   })), /*#__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) 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: "M2496.087 1741.35s.1 0 .1-.1c0 0-.1 0-.1.1z"
   }), /*#__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: "M3281.287 392.75v11.7h27.4v77.4h12.7v-77.4h27.6v-11.7zm158.3 0l-30.6 62.2-30.8-62.2h-15.3v89.1h11.7v-70.7l30.3 61.3h8.1l30.3-61.3v70.7h11.7v-89.1z"
   }));
   if (!colormode) return _svgEl;