@datalayer/icons-react 1.0.7 → 1.0.8

package/data1/GoogleIcon.js

@@ -6,37 +6,80 @@ const sizeMap = {
   "large": 64
 };
 
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  React.useLayoutEffect(() => {
+    if (typeof mode === "string") {
+      setResolved(mode);
+      return;
+    }
+    if (typeof document === "undefined") return;
+    let cur = null;
+    let el = ref.current && ref.current.parentElement;
+    while (el) {
+      const m = el.getAttribute && el.getAttribute("data-color-mode");
+      if (m) { cur = m; break; }
+      el = el.parentElement;
+    }
+    if (!cur || cur === "auto") {
+      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setResolved(cur === "dark" ? "light" : "dark");
+  }, [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 }
+  }, children);
+}
+
 function GoogleIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormoded,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     preserveAspectRatio: "xMidYMid",
     viewBox: "0 0 256 262",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
     height: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#4285F4' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#4285F4') ? 'white' : 'currentColor'),
+    fill: colored ? '#4285F4' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#34A853' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#34A853') ? 'white' : 'currentColor'),
+    fill: colored ? '#34A853' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#FBBC05' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#FBBC05') ? 'white' : 'currentColor'),
+    fill: colored ? '#FBBC05' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#EB4335' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#EB4335') ? 'white' : 'currentColor'),
+    fill: colored ? '#EB4335' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(GoogleIcon);
 module.exports = ForwardRef;

package/data1/GpuCardIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const GpuCardIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean } & React.RefAttributes<SVGSVGElement>>;
+declare const GpuCardIcon: 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>>;
 export default GpuCardIcon;

package/data1/GpuCardIcon.js

@@ -6,32 +6,73 @@ const sizeMap = {
   "large": 64
 };
 
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  React.useLayoutEffect(() => {
+    if (typeof mode === "string") {
+      setResolved(mode);
+      return;
+    }
+    if (typeof document === "undefined") return;
+    let cur = null;
+    let el = ref.current && ref.current.parentElement;
+    while (el) {
+      const m = el.getAttribute && el.getAttribute("data-color-mode");
+      if (m) { cur = m; break; }
+      el = el.parentElement;
+    }
+    if (!cur || cur === "auto") {
+      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setResolved(cur === "dark" ? "light" : "dark");
+  }, [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 }
+  }, children);
+}
+
 function GpuCardIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormoded,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 16 16",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
-    "aria-hidden": "true",
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("g", {
-    fill: "currentColor"
-  }, /*#__PURE__*/React.createElement("path", {
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
     d: "M4 8a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm7.5-1.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M0 1.5A.5.5 0 01.5 1h1a.5.5 0 01.5.5V4h13.5a.5.5 0 01.5.5v7a.5.5 0 01-.5.5H2v2.5a.5.5 0 01-1 0V2H.5a.5.5 0 01-.5-.5zm5.5 4a2.5 2.5 0 100 5 2.5 2.5 0 000-5zM9 8a2.5 2.5 0 105 0 2.5 2.5 0 00-5 0z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M3 12.5h3.5v1a.5.5 0 01-.5.5H3.5a.5.5 0 01-.5-.5v-1zm4 1v-1h4v1a.5.5 0 01-.5.5h-3a.5.5 0 01-.5-.5z"
-  })));
+  }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(GpuCardIcon);
 module.exports = ForwardRef;

package/data1/GpuIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const GpuIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean } & React.RefAttributes<SVGSVGElement>>;
+declare const GpuIcon: 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>>;
 export default GpuIcon;

package/data1/GpuIcon.js

@@ -6,32 +6,75 @@ const sizeMap = {
   "large": 64
 };
 
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  React.useLayoutEffect(() => {
+    if (typeof mode === "string") {
+      setResolved(mode);
+      return;
+    }
+    if (typeof document === "undefined") return;
+    let cur = null;
+    let el = ref.current && ref.current.parentElement;
+    while (el) {
+      const m = el.getAttribute && el.getAttribute("data-color-mode");
+      if (m) { cur = m; break; }
+      el = el.parentElement;
+    }
+    if (!cur || cur === "auto") {
+      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setResolved(cur === "dark" ? "light" : "dark");
+  }, [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 }
+  }, children);
+}
+
 function GpuIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormoded,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
-    "aria-hidden": "true",
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("style", null, "\n      .cls-1{fill:#4285f4}\n    ")), /*#__PURE__*/React.createElement("g", {
+  }, title) : null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("style", null, ".prefix__cls-1{fill:#4285f4}")), /*#__PURE__*/React.createElement("g", {
     "data-name": "Product Icons"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M15.33 2v2.38h-2.16V2h-2.34v2.38H8.67V2H6.29v2.38a2 2 0 00-1.91 1.91H2v2.38h2.38v2.14H2v2.38h2.38v2.14H2v2.38h2.38a2 2 0 001.91 1.91V22h2.38v-2.38h2.16V22h2.34v-2.38h2.16V22h2.38v-2.38a2 2 0 001.91-1.91H22v-2.38h-2.38v-2.14H22v-2.38h-2.38V8.67H22V6.29h-2.38a2 2 0 00-1.91-1.91V2zm1.53 15.24H7.14a.38.38 0 01-.38-.38V7.14a.38.38 0 01.38-.38h9.72a.38.38 0 01.38.38v9.72a.38.38 0 01-.38.38z",
-    className: "cls-1"
+    className: "prefix__cls-1"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M12.83 7.54v3.58h1.96l-3.5 4.86v-3.63H9.22l3.61-4.81z",
-    className: "cls-1"
+    className: "prefix__cls-1"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(GpuIcon);
 module.exports = ForwardRef;

package/data1/GrafanaIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const GrafanaIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean } & React.RefAttributes<SVGSVGElement>>;
+declare const GrafanaIcon: 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>>;
 export default GrafanaIcon;

package/data1/GrafanaIcon.js

@@ -6,31 +6,67 @@ const sizeMap = {
   "large": 64
 };
 
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  React.useLayoutEffect(() => {
+    if (typeof mode === "string") {
+      setResolved(mode);
+      return;
+    }
+    if (typeof document === "undefined") return;
+    let cur = null;
+    let el = ref.current && ref.current.parentElement;
+    while (el) {
+      const m = el.getAttribute && el.getAttribute("data-color-mode");
+      if (m) { cur = m; break; }
+      el = el.parentElement;
+    }
+    if (!cur || cur === "auto") {
+      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setResolved(cur === "dark" ? "light" : "dark");
+  }, [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 }
+  }, children);
+}
+
 function GrafanaIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormoded,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
-    id: "Layer_1",
-    x: 0,
-    y: 0,
-    height: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     viewBox: "0 0 142.5 145.6",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
+    height: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("style", null, "\n    .st0{fill:#565656}\n  "), /*#__PURE__*/React.createElement("path", {
-    d: "M28.7 131.5c-.3 7.9-6.6 14.1-14.4 14.1C6.1 145.6 0 139 0 130.9s6.6-14.7 14.7-14.7c3.6 0 7.2 1.6 10.2 4.4l-2.3 2.9c-2.3-2-5.1-3.4-7.9-3.4-5.9 0-10.8 4.8-10.8 10.8 0 6.1 4.6 10.8 10.4 10.8 5.2 0 9.3-3.8 10.2-8.8H12.6v-3.5h16.1v2.1zM42.3 129.5h-2.2c-2.4 0-4.4 2-4.4 4.4v11.4h-3.9v-19.6H35v1.6c1.1-1.1 2.7-1.6 4.6-1.6h4.2l-1.5 3.8zM63.7 145.3h-3.4v-2.5c-2.6 2.5-6.6 3.7-10.7 1.9-3-1.3-5.3-4.1-5.9-7.4-1.2-6.3 3.7-11.9 9.9-11.9 2.6 0 5 1.1 6.7 2.8v-2.5h3.4v19.6zm-4-8.3c.9-4-2.1-7.6-6-7.6-3.4 0-6.1 2.8-6.1 6.1 0 3.8 3.3 6.7 7.2 6.1 2.3-.4 4.3-2.3 4.9-4.6zM71.5 124.7v1.1h6.2v3.4h-6.2v16.1h-3.8v-20.5c0-4.3 3.1-6.8 7-6.8h4.7l-1.6 3.7h-3.1c-1.8-.1-3.2 1.3-3.2 3zM98.5 145.3h-3.3v-2.5c-2.6 2.5-6.6 3.7-10.7 1.9-3-1.3-5.3-4.1-5.9-7.4-1.2-6.3 3.7-11.9 9.9-11.9 2.6 0 5 1.1 6.7 2.8v-2.5h3.4v19.6h-.1zm-4-8.3c.9-4-2.1-7.6-6-7.6-3.4 0-6.1 2.8-6.1 6.1 0 3.8 3.3 6.7 7.2 6.1 2.4-.4 4.3-2.3 4.9-4.6zM119.4 133.8v11.5h-3.9v-11.6c0-2.4-2-4.4-4.4-4.4-2.5 0-4.4 2-4.4 4.4v11.6h-3.9v-19.6h3.2v1.7c1.4-1.3 3.3-2 5.2-2 4.6.1 8.2 3.8 8.2 8.4zM142.4 145.3h-3.3v-2.5c-2.6 2.5-6.6 3.7-10.7 1.9-3-1.3-5.3-4.1-5.9-7.4-1.2-6.3 3.7-11.9 9.9-11.9 2.6 0 5 1.1 6.7 2.8v-2.5h3.4v19.6h-.1zm-4-8.3c.9-4-2.1-7.6-6-7.6-3.4 0-6.1 2.8-6.1 6.1 0 3.8 3.3 6.7 7.2 6.1 2.4-.4 4.3-2.3 4.9-4.6z",
-    className: "st0"
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    d: "M28.7 131.5c-.3 7.9-6.6 14.1-14.4 14.1C6.1 145.6 0 139 0 130.9s6.6-14.7 14.7-14.7c3.6 0 7.2 1.6 10.2 4.4l-2.3 2.9c-2.3-2-5.1-3.4-7.9-3.4-5.9 0-10.8 4.8-10.8 10.8 0 6.1 4.6 10.8 10.4 10.8 5.2 0 9.3-3.8 10.2-8.8H12.6v-3.5h16.1v2.1zm13.6-2h-2.2c-2.4 0-4.4 2-4.4 4.4v11.4h-3.9v-19.6H35v1.6c1.1-1.1 2.7-1.6 4.6-1.6h4.2l-1.5 3.8zm21.4 15.8h-3.4v-2.5c-2.6 2.5-6.6 3.7-10.7 1.9-3-1.3-5.3-4.1-5.9-7.4-1.2-6.3 3.7-11.9 9.9-11.9 2.6 0 5 1.1 6.7 2.8v-2.5h3.4v19.6zm-4-8.3c.9-4-2.1-7.6-6-7.6-3.4 0-6.1 2.8-6.1 6.1 0 3.8 3.3 6.7 7.2 6.1 2.3-.4 4.3-2.3 4.9-4.6zm11.8-12.3v1.1h6.2v3.4h-6.2v16.1h-3.8v-20.5c0-4.3 3.1-6.8 7-6.8h4.7l-1.6 3.7h-3.1c-1.8-.1-3.2 1.3-3.2 3zm27 20.6h-3.3v-2.5c-2.6 2.5-6.6 3.7-10.7 1.9-3-1.3-5.3-4.1-5.9-7.4-1.2-6.3 3.7-11.9 9.9-11.9 2.6 0 5 1.1 6.7 2.8v-2.5h3.4v19.6h-.1zm-4-8.3c.9-4-2.1-7.6-6-7.6-3.4 0-6.1 2.8-6.1 6.1 0 3.8 3.3 6.7 7.2 6.1 2.4-.4 4.3-2.3 4.9-4.6zm24.9-3.2v11.5h-3.9v-11.6c0-2.4-2-4.4-4.4-4.4-2.5 0-4.4 2-4.4 4.4v11.6h-3.9v-19.6h3.2v1.7c1.4-1.3 3.3-2 5.2-2 4.6.1 8.2 3.8 8.2 8.4zm23 11.5h-3.3v-2.5c-2.6 2.5-6.6 3.7-10.7 1.9-3-1.3-5.3-4.1-5.9-7.4-1.2-6.3 3.7-11.9 9.9-11.9 2.6 0 5 1.1 6.7 2.8v-2.5h3.4v19.6h-.1zm-4-8.3c.9-4-2.1-7.6-6-7.6-3.4 0-6.1 2.8-6.1 6.1 0 3.8 3.3 6.7 7.2 6.1 2.4-.4 4.3-2.3 4.9-4.6z",
+    fill: "#565656"
   }), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "SVGID_1_",
+    id: "prefix__a",
     x1: 71.25,
     x2: 71.25,
     y1: 10.489,
@@ -44,9 +80,13 @@ function GrafanaIcon({
     offset: 1,
     stopColor: "#f15b2a"
   })), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#SVGID_1_)",
-    d: "M122.9 49.9c-.2-1.9-.5-4.1-1.1-6.5-.6-2.4-1.6-5-2.9-7.8-1.4-2.7-3.1-5.6-5.4-8.3-.9-1.1-1.9-2.1-2.9-3.2 1.6-6.3-1.9-11.8-1.9-11.8-6.1-.4-9.9 1.9-11.3 2.9-.2-.1-.5-.2-.7-.3-1-.4-2.1-.8-3.2-1.2-1.1-.3-2.2-.7-3.3-.9-1.1-.3-2.3-.5-3.5-.7-.2 0-.4-.1-.6-.1C83.5 3.6 75.9 0 75.9 0c-8.7 5.6-10.4 13.1-10.4 13.1s0 .2-.1.4c-.5.1-.9.3-1.4.4-.6.2-1.3.4-1.9.7-.6.3-1.3.5-1.9.8-1.3.6-2.5 1.2-3.8 1.9-1.2.7-2.4 1.4-3.5 2.2-.2-.1-.3-.2-.3-.2-11.7-4.5-22.1.9-22.1.9-.9 12.5 4.7 20.3 5.8 21.7-.3.8-.5 1.5-.8 2.3-.9 2.8-1.5 5.7-1.9 8.7-.1.4-.1.9-.2 1.3-10.8 5.3-14 16.3-14 16.3 9 10.4 19.6 11 19.6 11 1.3 2.4 2.9 4.7 4.6 6.8.7.9 1.5 1.7 2.3 2.6-3.3 9.4.5 17.3.5 17.3 10.1.4 16.7-4.4 18.1-5.5l3 .9c3.1.8 6.3 1.3 9.4 1.4H81c4.7 6.8 13.1 7.7 13.1 7.7 5.9-6.3 6.3-12.4 6.3-13.8v-.1-.2-.3c1.2-.9 2.4-1.8 3.6-2.8 2.4-2.1 4.4-4.6 6.2-7.2.2-.2.3-.5.5-.7 6.7.4 11.4-4.2 11.4-4.2-1.1-7-5.1-10.4-5.9-11l-.1-.1-.1-.1-.1-.1c0-.4.1-.8.1-1.3.1-.8.1-1.5.1-2.3V67.5 66.2v-.6c0-.2 0-.4-.1-.6l-.1-.6-.1-.6c-.1-.8-.3-1.5-.4-2.3-.7-3-1.9-5.9-3.4-8.4-1.6-2.6-3.5-4.8-5.7-6.8-2.2-1.9-4.6-3.5-7.2-4.6-2.6-1.2-5.2-1.9-7.9-2.2-1.3-.2-2.7-.2-4-.2h-2c-.7.1-1.4.2-2 .3-2.7.5-5.2 1.5-7.4 2.8-2.2 1.3-4.1 3-5.7 4.9s-2.8 3.9-3.6 6.1c-.8 2.1-1.3 4.4-1.4 6.5v2.4c0 .3 0 .5.1.8.1 1.1.3 2.1.6 3.1.6 2 1.5 3.8 2.7 5.4s2.5 2.8 4 3.8 3 1.7 4.6 2.2c1.6.5 3.1.7 4.5.6h2.1c.2 0 .4-.1.5-.1.2 0 .3-.1.5-.1.3-.1.7-.2 1-.3.6-.2 1.2-.5 1.8-.7.6-.3 1.1-.6 1.5-.9.1-.1.3-.2.4-.3.5-.4.6-1.1.2-1.6-.4-.4-1-.5-1.5-.3-.1.1-.2.1-.4.2-.4.2-.9.4-1.3.5-.5.1-1 .3-1.5.4-.3 0-.5.1-.8.1H82.4s-.1 0 0 0H82c-.1 0-.3 0-.4-.1-1.1-.2-2.3-.5-3.4-1s-2.2-1.2-3.1-2.1c-1-.9-1.8-1.9-2.5-3.1-.7-1.2-1.1-2.5-1.3-3.8-.1-.7-.2-1.4-.1-2.1v-.6c0 .1 0 0 0 0v-.2-.3c0-.4.1-.7.2-1.1.5-3 2-5.9 4.3-8.1.6-.6 1.2-1.1 1.9-1.5.7-.5 1.4-.9 2.1-1.2.7-.3 1.5-.6 2.3-.8s1.6-.4 2.4-.4c.4 0 .8-.1 1.2-.1h.8c.1 0 0 0 0 0h.4c.9.1 1.8.2 2.6.4 1.7.4 3.4 1 5 1.9 3.2 1.8 5.9 4.5 7.5 7.8.8 1.6 1.4 3.4 1.7 5.3.1.5.1.9.2 1.4V68c0 .5-.1 1-.1 1.5-.1.5-.1 1-.2 1.5l-.3 1.5c-.2 1-.6 1.9-.9 2.9-.7 1.9-1.7 3.7-2.9 5.3-2.4 3.3-5.7 6-9.4 7.7-1.9.8-3.8 1.5-5.8 1.8-1 .2-2 .3-3 .3h-1.5c.1 0 0 0 0 0h-.1c-.5 0-1.1 0-1.6-.1-2.2-.2-4.3-.6-6.4-1.2-2.1-.6-4.1-1.4-6-2.4-3.8-2-7.2-4.9-9.9-8.2-1.3-1.7-2.5-3.5-3.5-5.4s-1.7-3.9-2.3-5.9c-.6-2-.9-4.1-1-6.2V58.8 58c0-1 .1-2.1.3-3.2.1-1.1.3-2.1.5-3.2s.5-2.1.8-3.2c.6-2.1 1.3-4.1 2.2-6 1.8-3.8 4.1-7.2 6.8-9.9.7-.7 1.4-1.3 2.2-1.9.3-.3 1-.9 1.8-1.4.8-.5 1.6-1 2.5-1.4.4-.2.8-.4 1.3-.6.2-.1.4-.2.7-.3.2-.1.4-.2.7-.3.9-.4 1.8-.7 2.7-1 .2-.1.5-.1.7-.2.2-.1.5-.1.7-.2.5-.1.9-.2 1.4-.4.2-.1.5-.1.7-.2.2 0 .5-.1.7-.1.2 0 .5-.1.7-.1l.4-.1.4-.1c.2 0 .5-.1.7-.1.3 0 .5-.1.8-.1.2 0 .6-.1.8-.1.2 0 .3 0 .5-.1h.7c.3 0 .5 0 .8-.1h.4s.1 0 0 0h3.7c1.8.1 3.6.3 5.3.6 3.4.6 6.7 1.7 9.6 3.2 2.9 1.4 5.6 3.2 7.8 5.1.1.1.3.2.4.4.1.1.3.2.4.4.3.2.5.5.8.7.3.2.5.5.8.7.2.3.5.5.7.8 1 1 1.9 2.1 2.7 3.1 1.6 2.1 2.9 4.2 3.9 6.2.1.1.1.2.2.4.1.1.1.2.2.4s.2.5.4.7c.1.2.2.5.3.7.1.2.2.5.3.7.4.9.7 1.8 1 2.7.5 1.4.8 2.6 1.1 3.6.1.4.5.7.9.7.5 0 .8-.4.8-.9-.1-1.2-.1-2.5-.2-4z"
+    fill: "url(#prefix__a)",
+    d: "M122.9 49.9c-.2-1.9-.5-4.1-1.1-6.5-.6-2.4-1.6-5-2.9-7.8-1.4-2.7-3.1-5.6-5.4-8.3-.9-1.1-1.9-2.1-2.9-3.2 1.6-6.3-1.9-11.8-1.9-11.8-6.1-.4-9.9 1.9-11.3 2.9-.2-.1-.5-.2-.7-.3-1-.4-2.1-.8-3.2-1.2-1.1-.3-2.2-.7-3.3-.9-1.1-.3-2.3-.5-3.5-.7-.2 0-.4-.1-.6-.1C83.5 3.6 75.9 0 75.9 0c-8.7 5.6-10.4 13.1-10.4 13.1s0 .2-.1.4c-.5.1-.9.3-1.4.4-.6.2-1.3.4-1.9.7-.6.3-1.3.5-1.9.8-1.3.6-2.5 1.2-3.8 1.9-1.2.7-2.4 1.4-3.5 2.2-.2-.1-.3-.2-.3-.2-11.7-4.5-22.1.9-22.1.9-.9 12.5 4.7 20.3 5.8 21.7-.3.8-.5 1.5-.8 2.3-.9 2.8-1.5 5.7-1.9 8.7-.1.4-.1.9-.2 1.3-10.8 5.3-14 16.3-14 16.3 9 10.4 19.6 11 19.6 11 1.3 2.4 2.9 4.7 4.6 6.8.7.9 1.5 1.7 2.3 2.6-3.3 9.4.5 17.3.5 17.3 10.1.4 16.7-4.4 18.1-5.5l3 .9c3.1.8 6.3 1.3 9.4 1.4H81c4.7 6.8 13.1 7.7 13.1 7.7 5.9-6.3 6.3-12.4 6.3-13.8V98.3c1.2-.9 2.4-1.8 3.6-2.8 2.4-2.1 4.4-4.6 6.2-7.2.2-.2.3-.5.5-.7 6.7.4 11.4-4.2 11.4-4.2-1.1-7-5.1-10.4-5.9-11l-.1-.1-.1-.1-.1-.1c0-.4.1-.8.1-1.3.1-.8.1-1.5.1-2.3v-2.9c0-.2 0-.4-.1-.6l-.1-.6-.1-.6c-.1-.8-.3-1.5-.4-2.3-.7-3-1.9-5.9-3.4-8.4-1.6-2.6-3.5-4.8-5.7-6.8-2.2-1.9-4.6-3.5-7.2-4.6-2.6-1.2-5.2-1.9-7.9-2.2-1.3-.2-2.7-.2-4-.2h-2c-.7.1-1.4.2-2 .3-2.7.5-5.2 1.5-7.4 2.8-2.2 1.3-4.1 3-5.7 4.9s-2.8 3.9-3.6 6.1c-.8 2.1-1.3 4.4-1.4 6.5v2.4c0 .3 0 .5.1.8.1 1.1.3 2.1.6 3.1.6 2 1.5 3.8 2.7 5.4s2.5 2.8 4 3.8 3 1.7 4.6 2.2c1.6.5 3.1.7 4.5.6h2.1c.2 0 .4-.1.5-.1.2 0 .3-.1.5-.1.3-.1.7-.2 1-.3.6-.2 1.2-.5 1.8-.7.6-.3 1.1-.6 1.5-.9.1-.1.3-.2.4-.3.5-.4.6-1.1.2-1.6-.4-.4-1-.5-1.5-.3-.1.1-.2.1-.4.2-.4.2-.9.4-1.3.5-.5.1-1 .3-1.5.4-.3 0-.5.1-.8.1h-1.7s-.1 0 0 0H82c-.1 0-.3 0-.4-.1-1.1-.2-2.3-.5-3.4-1s-2.2-1.2-3.1-2.1c-1-.9-1.8-1.9-2.5-3.1-.7-1.2-1.1-2.5-1.3-3.8-.1-.7-.2-1.4-.1-2.1v-.6c0 .1 0 0 0 0v-.5c0-.4.1-.7.2-1.1.5-3 2-5.9 4.3-8.1.6-.6 1.2-1.1 1.9-1.5.7-.5 1.4-.9 2.1-1.2.7-.3 1.5-.6 2.3-.8s1.6-.4 2.4-.4c.4 0 .8-.1 1.2-.1h.8c.1 0 0 0 0 0h.4c.9.1 1.8.2 2.6.4 1.7.4 3.4 1 5 1.9 3.2 1.8 5.9 4.5 7.5 7.8.8 1.6 1.4 3.4 1.7 5.3.1.5.1.9.2 1.4V68c0 .5-.1 1-.1 1.5-.1.5-.1 1-.2 1.5l-.3 1.5c-.2 1-.6 1.9-.9 2.9-.7 1.9-1.7 3.7-2.9 5.3-2.4 3.3-5.7 6-9.4 7.7-1.9.8-3.8 1.5-5.8 1.8-1 .2-2 .3-3 .3h-1.5c.1 0 0 0 0 0h-.1c-.5 0-1.1 0-1.6-.1-2.2-.2-4.3-.6-6.4-1.2-2.1-.6-4.1-1.4-6-2.4-3.8-2-7.2-4.9-9.9-8.2-1.3-1.7-2.5-3.5-3.5-5.4s-1.7-3.9-2.3-5.9c-.6-2-.9-4.1-1-6.2V58c0-1 .1-2.1.3-3.2.1-1.1.3-2.1.5-3.2s.5-2.1.8-3.2c.6-2.1 1.3-4.1 2.2-6 1.8-3.8 4.1-7.2 6.8-9.9.7-.7 1.4-1.3 2.2-1.9.3-.3 1-.9 1.8-1.4.8-.5 1.6-1 2.5-1.4.4-.2.8-.4 1.3-.6.2-.1.4-.2.7-.3.2-.1.4-.2.7-.3.9-.4 1.8-.7 2.7-1 .2-.1.5-.1.7-.2.2-.1.5-.1.7-.2.5-.1.9-.2 1.4-.4.2-.1.5-.1.7-.2.2 0 .5-.1.7-.1.2 0 .5-.1.7-.1l.4-.1.4-.1c.2 0 .5-.1.7-.1.3 0 .5-.1.8-.1.2 0 .6-.1.8-.1.2 0 .3 0 .5-.1h.7c.3 0 .5 0 .8-.1h.4s.1 0 0 0h3.7c1.8.1 3.6.3 5.3.6 3.4.6 6.7 1.7 9.6 3.2 2.9 1.4 5.6 3.2 7.8 5.1.1.1.3.2.4.4.1.1.3.2.4.4.3.2.5.5.8.7.3.2.5.5.8.7.2.3.5.5.7.8 1 1 1.9 2.1 2.7 3.1 1.6 2.1 2.9 4.2 3.9 6.2.1.1.1.2.2.4.1.1.1.2.2.4s.2.5.4.7c.1.2.2.5.3.7.1.2.2.5.3.7.4.9.7 1.8 1 2.7.5 1.4.8 2.6 1.1 3.6.1.4.5.7.9.7.5 0 .8-.4.8-.9-.1-1.2-.1-2.5-.2-4z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(GrafanaIcon);
 module.exports = ForwardRef;

package/data1/GraphIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const GraphIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean } & React.RefAttributes<SVGSVGElement>>;
+declare const GraphIcon: 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>>;
 export default GraphIcon;

package/data1/GraphIcon.js

@@ -6,28 +6,71 @@ const sizeMap = {
   "large": 64
 };
 
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  React.useLayoutEffect(() => {
+    if (typeof mode === "string") {
+      setResolved(mode);
+      return;
+    }
+    if (typeof document === "undefined") return;
+    let cur = null;
+    let el = ref.current && ref.current.parentElement;
+    while (el) {
+      const m = el.getAttribute && el.getAttribute("data-color-mode");
+      if (m) { cur = m; break; }
+      el = el.parentElement;
+    }
+    if (!cur || cur === "auto") {
+      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setResolved(cur === "dark" ? "light" : "dark");
+  }, [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 }
+  }, children);
+}
+
 function GraphIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormoded,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
-    "aria-hidden": "true",
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
     d: "M2.5 2.75a.75.75 0 00-1.5 0v18.5c0 .414.336.75.75.75H20a.75.75 0 000-1.5H2.5V2.75z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M22.28 7.78a.75.75 0 00-1.06-1.06l-5.72 5.72-3.72-3.72a.75.75 0 00-1.06 0l-6 6a.75.75 0 101.06 1.06l5.47-5.47 3.72 3.72a.75.75 0 001.06 0l6.25-6.25z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(GraphIcon);
 module.exports = ForwardRef;

package/data1/HardDriveIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const HardDriveIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean } & React.RefAttributes<SVGSVGElement>>;
+declare const HardDriveIcon: 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>>;
 export default HardDriveIcon;

package/data1/HardDriveIcon.js

@@ -6,31 +6,74 @@ const sizeMap = {
   "large": 64
 };
 
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  React.useLayoutEffect(() => {
+    if (typeof mode === "string") {
+      setResolved(mode);
+      return;
+    }
+    if (typeof document === "undefined") return;
+    let cur = null;
+    let el = ref.current && ref.current.parentElement;
+    while (el) {
+      const m = el.getAttribute && el.getAttribute("data-color-mode");
+      if (m) { cur = m; break; }
+      el = el.parentElement;
+    }
+    if (!cur || cur === "auto") {
+      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setResolved(cur === "dark" ? "light" : "dark");
+  }, [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 }
+  }, children);
+}
+
 function HardDriveIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormoded,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
-    fill: colored ? 'none' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('none') ? 'white' : 'currentColor'),
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "currentColor",
-    strokeLinecap: "round",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    className: "lucide lucide-hard-drive",
+    className: "prefix__lucide prefix__lucide-hard-drive",
     viewBox: "0 0 24 24",
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    d: "M22 12H2M5.45 5.11L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11zM6 16h.01M10 16h.01"
+    d: "M22 12H2m3.45-6.89L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11zM6 16h.01M10 16h.01"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(HardDriveIcon);
 module.exports = ForwardRef;

package/data1/HardDriveIcon.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-hard-drive" viewBox="0 0 24 24" aria-hidden="true">
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
   <path d="M22 12H2M5.45 5.11L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11zM6 16h.01M10 16h.01"/>
 </svg>

package/data1/HardDriveRetroIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const HardDriveRetroIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean } & React.RefAttributes<SVGSVGElement>>;
+declare const HardDriveRetroIcon: 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>>;
 export default HardDriveRetroIcon;

package/data1/HardDriveRetroIcon.js

@@ -6,28 +6,71 @@ const sizeMap = {
   "large": 64
 };
 
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  React.useLayoutEffect(() => {
+    if (typeof mode === "string") {
+      setResolved(mode);
+      return;
+    }
+    if (typeof document === "undefined") return;
+    let cur = null;
+    let el = ref.current && ref.current.parentElement;
+    while (el) {
+      const m = el.getAttribute && el.getAttribute("data-color-mode");
+      if (m) { cur = m; break; }
+      el = el.parentElement;
+    }
+    if (!cur || cur === "auto") {
+      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setResolved(cur === "dark" ? "light" : "dark");
+  }, [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 }
+  }, children);
+}
+
 function HardDriveRetroIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormoded,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     preserveAspectRatio: "xMidYMid",
     viewBox: "0 0 470 470",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M419.5 470h-360a7.5 7.5 0 01-7.5-7.5V7.5A7.5 7.5 0 0159.5 0h360a7.5 7.5 0 017.5 7.5v455a7.5 7.5 0 01-7.5 7.5zM67.001 455h160v-80.423a188.16 188.16 0 01-27.481-3.877c-19.324 24.134-19.65 24.463-19.864 24.677-7.082 7.083-16.499 10.983-26.517 10.983-10.017-.001-19.434-3.901-26.516-10.983-14.621-14.621-14.621-38.412 0-53.033.106-.106.244-.243 3.299-2.71C112.803 327.306 98.026 312.343 85.88 295H67.001zm226.611-202.025c-25.93 32.466-45.927 57.493-61.373 76.817 2.424.124 4.848.208 7.261.208 78.575 0 142.5-63.925 142.5-142.5S318.075 45 239.5 45 97 108.925 97 187.5c0 50.413 26.619 96.927 69.798 122.578a189333.28 189333.28 0 01102.225-81.688 17.554 17.554 0 0110.912-3.817c4.672 0 9.064 1.82 12.368 5.124a17.478 17.478 0 011.309 23.278zm-11.724-9.359a2.489 2.489 0 00-.192-3.313 2.484 2.484 0 00-1.762-.73c-.4 0-.995.094-1.553.54a218046.791 218046.791 0 00-106.185 84.857l-.065.052c-19.115 15.29-33.076 26.472-35.116 28.144-8.559 8.79-8.488 22.903.213 31.604a22.356 22.356 0 0015.913 6.59 22.343 22.343 0 0015.691-6.376c4.421-5.388 75.517-94.367 113.056-141.368zM412 15H67v265h22.835a7.5 7.5 0 016.232 3.328c12.333 18.422 27.804 34.049 46.028 46.527 3.318-2.66 7.358-5.896 12.275-9.832C109.468 291.149 82 241.338 82 187.5 82 100.654 152.654 30 239.5 30S397 100.654 397 187.5 326.346 345 239.5 345c-6.162 0-12.375-.385-18.532-1.109l-10.862 13.581a173.275 173.275 0 0024.599 2.451A7.5 7.5 0 01242 367.42V455h170zM264.5 425h95a7.5 7.5 0 010 15h-95a7.5 7.5 0 010-15zm125 0a7.5 7.5 0 110 15 7.5 7.5 0 010-15zm0-380a7.5 7.5 0 110-15 7.5 7.5 0 010 15zm-300 0a7.5 7.5 0 110-15 7.5 7.5 0 010 15zm150 180c-20.678 0-37.5-16.822-37.5-37.5s16.822-37.5 37.5-37.5 37.5 16.822 37.5 37.5-16.822 37.5-37.5 37.5zm0-60c-12.407 0-22.5 10.093-22.5 22.5s10.093 22.5 22.5 22.5 22.5-10.093 22.5-22.5-10.093-22.5-22.5-22.5zM97 432.5a7.5 7.5 0 11-15 0 7.5 7.5 0 0115 0z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(HardDriveRetroIcon);
 module.exports = ForwardRef;