@datalayer/icons-react 1.0.7 → 1.0.9

package/data1/esm/ConsoleIcon.js

@@ -6,22 +6,61 @@ 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 ConsoleIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormode,
   ...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 ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     viewBox: "0 0 20 20",
-    "aria-hidden": "true",
     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", {
     fillRule: "evenodd",
@@ -36,6 +75,10 @@ function ConsoleIcon({
     d: "M1.5 6.25h17v1.5h-17v-1.5z",
     clipRule: "evenodd"
   }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(ConsoleIcon);
 export default ForwardRef;

package/data1/esm/ConsulIcon.d.ts

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

package/data1/esm/ConsulIcon.js

@@ -6,30 +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 ConsulIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormode,
   ...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: "64.74 19 64 64",
-    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", {
-    fill: colored ? '#961d59' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#961d59') ? 'white' : 'currentColor'),
+    fill: colored ? '#961d59' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M95.84 57.577c-3.656.004-6.625-2.95-6.635-6.602s2.942-6.623 6.6-6.64 6.634 2.93 6.656 6.58a6.56 6.56 0 01-1.92 4.7 6.62 6.62 0 01-4.7 1.95"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#d62783' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#d62783') ? 'white' : 'currentColor'),
-    d: "M108.738 53.977c-1.687 0-3.056-1.367-3.056-3.053s1.368-3.053 3.056-3.053 3.056 1.367 3.056 3.053a3.04 3.04 0 01-.893 2.161 3.05 3.05 0 01-2.163.892m11.183 2.878a2.93 2.93 0 01-3.61 1.939 2.93 2.93 0 01-2.016-3.565 2.93 2.93 0 013.524-2.09 2.934 2.934 0 012.165 3.477c0 .08 0 .15-.063.238m-2.16-7.865c-1.206.3-2.475-.155-3.2-1.155s-.795-2.345-.15-3.405 1.87-1.625 3.1-1.43a3.06 3.06 0 012.5 2.322 3.17 3.17 0 010 1.197A2.943 2.943 0 01117.709 49m10.937 7.524c-.292 1.66-1.876 2.77-3.538 2.478a3.054 3.054 0 111.053-6.015 3.07 3.07 0 012.58 3.259.8.8 0 00-.063.27m-2.524-7.658a3.05 3.05 0 01-3.505-2.506 3.042 3.042 0 012.507-3.5 3.05 3.05 0 013.507 2.502 3.31 3.31 0 010 .793 3.03 3.03 0 01-2.508 2.712m-2.127 18.236a3.1 3.1 0 01-3.913 1.342 3.093 3.093 0 01-1.754-3.746 3.1 3.1 0 016.048 1.162 2.753 2.753 0 01-.38 1.253m-1.103-28.052a3.063 3.063 0 01-4.172-1.166 3.06 3.06 0 011.167-4.167 3.072 3.072 0 014.172 1.163c.315.534.45 1.154.38 1.768a3.06 3.06 0 01-1.54 2.379M95.96 81.688a30.735 30.735 0 01-27.02-15.2 30.66 30.66 0 010-30.978 30.737 30.737 0 0127.02-15.2 30.45 30.45 0 0118.652 6.343l-3.754 4.892c-7.413-5.67-17.405-6.644-25.776-2.515S71.4 41.678 71.4 51.004s5.304 17.844 13.673 21.98a24.59 24.59 0 0025.783-2.49l3.746 4.9a30.47 30.47 0 01-18.652 6.295z"
+    fill: colored ? '#d62783' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    d: "M108.738 53.977c-1.687 0-3.056-1.367-3.056-3.053s1.368-3.053 3.056-3.053 3.056 1.367 3.056 3.053a3.04 3.04 0 01-.893 2.161 3.05 3.05 0 01-2.163.892m11.183 2.878a2.93 2.93 0 01-3.61 1.939 2.93 2.93 0 01-2.016-3.565 2.93 2.93 0 013.524-2.09 2.934 2.934 0 012.165 3.477c0 .08 0 .15-.063.238m-2.16-7.865c-1.206.3-2.475-.155-3.2-1.155s-.795-2.345-.15-3.405 1.87-1.625 3.1-1.43a3.06 3.06 0 012.5 2.322 3.17 3.17 0 010 1.197A2.943 2.943 0 01117.709 49m10.937 7.524a3.055 3.055 0 01-3.538 2.478 3.054 3.054 0 111.053-6.015 3.07 3.07 0 012.58 3.259.8.8 0 00-.063.27m-2.524-7.658a3.05 3.05 0 01-3.505-2.506 3.042 3.042 0 012.507-3.5 3.05 3.05 0 013.507 2.502 3.31 3.31 0 010 .793 3.03 3.03 0 01-2.508 2.712m-2.127 18.236a3.1 3.1 0 01-3.913 1.342 3.093 3.093 0 01-1.754-3.746 3.1 3.1 0 016.048 1.162 2.753 2.753 0 01-.38 1.253m-1.103-28.052a3.063 3.063 0 01-4.172-1.166 3.06 3.06 0 011.167-4.167 3.072 3.072 0 014.172 1.163c.315.534.45 1.154.38 1.768a3.06 3.06 0 01-1.54 2.379M95.96 81.688a30.735 30.735 0 01-27.02-15.2 30.66 30.66 0 010-30.978 30.737 30.737 0 0127.02-15.2 30.45 30.45 0 0118.652 6.343l-3.754 4.892c-7.413-5.67-17.405-6.644-25.776-2.515S71.4 41.678 71.4 51.004s5.304 17.844 13.673 21.98a24.59 24.59 0 0025.783-2.49l3.746 4.9a30.47 30.47 0 01-18.652 6.295z"
   }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(ConsulIcon);
 export default ForwardRef;

package/data1/esm/ConsulNameIcon.d.ts

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

package/data1/esm/ConsulNameIcon.js

@@ -6,35 +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 ConsulNameIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormode,
   ...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: "64.74 19 60 60",
-    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", {
-    strokeWidth: 0.942,
     d: "M64.968 63.645c0-2.869 1.671-4.531 5.573-4.531a17.746 17.746 0 014.26.515l-.329 2.563a23.08 23.08 0 00-3.834-.402c-2.045 0-2.686.706-2.686 2.377v6.007c0 1.668.657 2.37 2.7 2.37a23.311 23.311 0 003.836-.402l.328 2.563a17.783 17.783 0 01-4.26.515c-3.9 0-5.572-1.668-5.572-4.531zm16.181 11.58c-3.924 0-4.983-2.16-4.983-4.508v-2.891c0-2.356 1.06-4.509 4.983-4.509 3.925 0 4.984 2.161 4.984 4.509v2.891c0 2.356-1.022 4.509-4.984 4.509zm0-9.464c-1.491 0-2.118.678-2.118 1.975v3.08c0 1.288.589 1.974 2.118 1.974 1.53 0 2.119-.678 2.119-1.975v-3.078c0-1.29-.589-1.975-2.119-1.975zm13.705 9.234v-7.99c0-.61-.261-.916-.918-.916a7.892 7.892 0 00-2.984.961v7.937h-2.857V63.556h2.186l.283.96a11.479 11.479 0 014.588-1.199c1.904 0 2.589 1.341 2.589 3.393v8.293zm8.765.23a13.477 13.477 0 01-3.954-.655l.402-2.184a12.807 12.807 0 003.41.492c1.269 0 1.492-.283 1.492-1.148 0-.707-.141-1.058-1.998-1.49-2.797-.68-3.126-1.386-3.126-3.582 0-2.196 1.015-3.298 4.282-3.298a15.088 15.088 0 013.432.402l-.283 2.28a20.177 20.177 0 00-3.148-.327c-1.245 0-1.491.282-1.491.984 0 .917.066.983 1.626 1.385 3.2.842 3.506 1.267 3.506 3.614-.01 2.22-.694 3.547-4.147 3.547zm8.885-11.67v7.99c0 .61.26.916.918.916a7.892 7.892 0 002.983-.96v-7.945h2.892v11.439h-2.187l-.283-.962a11.479 11.479 0 01-4.587 1.2c-1.904 0-2.59-1.341-2.59-3.393v-8.293zm9.243 11.44v-16.12l2.893-.396v16.514z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#961d59' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#961d59') ? 'white' : 'currentColor'),
-    strokeWidth: 0.942,
+    fill: colored ? '#961d59' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M93.91 41.97a3.662 3.662 0 01-3.669-3.65 3.662 3.662 0 013.648-3.671 3.662 3.662 0 012.619 6.241 3.65 3.65 0 01-2.599 1.078"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#d62783' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#d62783') ? 'white' : 'currentColor'),
-    strokeWidth: 0.942,
+    fill: colored ? '#d62783' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M101.031 39.98c-.942 0-1.69-.756-1.69-1.696 0-.941.757-1.697 1.69-1.697a1.687 1.687 0 011.69 1.688 1.677 1.677 0 01-.494 1.194 1.687 1.687 0 01-1.197.493m6.183 1.59a1.621 1.621 0 01-1.997 1.072 1.621 1.621 0 01-1.114-1.97 1.621 1.621 0 011.948-1.156 1.624 1.624 0 011.196 1.923c0 .044 0 .083-.034.132m-1.194-4.349a1.696 1.696 0 01-1.775-.638 1.69 1.69 0 01-.083-1.882 1.696 1.696 0 013.095.491 1.734 1.734 0 010 .662 1.63 1.63 0 01-1.272 1.372m6.046 4.16a1.689 1.689 0 01-1.955 1.37 1.688 1.688 0 11.582-3.325 1.696 1.696 0 011.426 1.802.443.443 0 00-.035.15m-1.395-4.234a1.687 1.687 0 01-1.937-1.385 1.683 1.683 0 011.385-1.936 1.687 1.687 0 011.938 1.383 1.706 1.706 0 010 .439 1.694 1.694 0 01-1.385 1.507m-1.176 10.082a1.715 1.715 0 01-2.163.742 1.706 1.706 0 01-.97-2.07 1.702 1.702 0 011.958-1.182 1.71 1.71 0 011.385 1.819 1.508 1.508 0 01-.21.692m-.61-15.508a1.696 1.696 0 01-2.306-.645 1.691 1.691 0 01.645-2.304 1.696 1.696 0 012.306.643 1.574 1.574 0 01.21.977 1.69 1.69 0 01-.851 1.315M93.976 55.289a16.992 16.992 0 01-14.938-8.403 16.954 16.954 0 010-17.127 16.992 16.992 0 0114.938-8.403 16.832 16.832 0 0110.312 3.507l-2.075 2.704a13.57 13.57 0 00-14.25-1.39 13.537 13.537 0 00-7.557 12.157 13.561 13.561 0 007.559 12.151 13.599 13.599 0 0014.254-1.376l2.071 2.71a16.844 16.844 0 01-10.312 3.48z"
   }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(ConsulNameIcon);
 export default ForwardRef;

package/data1/esm/CpuIcon.d.ts

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

package/data1/esm/CpuIcon.js

@@ -6,27 +6,66 @@ 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 CpuIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormode,
   ...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: "feather feather-cpu",
+    className: "prefix__feather prefix__feather-cpu",
     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("rect", {
     width: 16,
@@ -36,8 +75,12 @@ function CpuIcon({
     rx: 2,
     ry: 2
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M9 9h6v6H9zM9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3"
+    d: "M9 9h6v6H9zm0-8v3m6-3v3M9 20v3m6-3v3m5-14h3m-3 5h3M1 9h3m-3 5h3"
   }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(CpuIcon);
 export default ForwardRef;

package/data1/esm/CpuIcon.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-cpu" 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">
   <rect width="16" height="16" x="4" y="4" rx="2" ry="2"/>
   <path d="M9 9h6v6H9zM9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3"/>
 </svg>

package/data1/esm/DashboardBlueIcon.d.ts

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

package/data1/esm/DashboardBlueIcon.js

@@ -6,27 +6,70 @@ 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 DashboardBlueIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormode,
   ...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'),
     viewBox: "0 0 24 24",
-    "aria-hidden": "true",
     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", {
-    fill: colored ? '#2196F3' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#2196F3') ? 'white' : 'currentColor'),
-    d: "M2 22h6v-9H2zM10 22h12v-9H10zM16 11h6V2h-6zM2 11h12V2H2z"
+    fill: colored ? '#2196F3' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    d: "M2 22h6v-9H2zm8 0h12v-9H10zm6-11h6V2h-6zM2 11h12V2H2z"
   }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(DashboardBlueIcon);
 export default ForwardRef;

package/data1/esm/DashboardGreenIcon.d.ts

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

package/data1/esm/DashboardGreenIcon.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 DashboardGreenIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormode,
   ...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'),
     viewBox: "0 0 24 24",
-    "aria-hidden": "true",
     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", {
-    fill: colored ? '#2ecc71' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#2ecc71') ? 'white' : 'currentColor'),
-    d: "M2 14a1 1 0 011-1h5v8a1 1 0 01-1 1H3a1 1 0 01-1-1v-7zM10 13h11a1 1 0 011 1v7a1 1 0 01-1 1H11a1 1 0 01-1-1v-8zM16 3a1 1 0 011-1h4a1 1 0 011 1v7a1 1 0 01-1 1h-5V3zM2 3a1 1 0 011-1h10a1 1 0 011 1v8H3a1 1 0 01-1-1V3z",
-    className: "jp-icon-selectable"
+    fill: colored ? '#2ecc71' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    d: "M2 14a1 1 0 011-1h5v8a1 1 0 01-1 1H3a1 1 0 01-1-1v-7zm8-1h11a1 1 0 011 1v7a1 1 0 01-1 1H11a1 1 0 01-1-1v-8zm6-10a1 1 0 011-1h4a1 1 0 011 1v7a1 1 0 01-1 1h-5V3zM2 3a1 1 0 011-1h10a1 1 0 011 1v8H3a1 1 0 01-1-1V3z",
+    className: "prefix__jp-icon-selectable"
   }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(DashboardGreenIcon);
 export default ForwardRef;

package/data1/esm/DashboardGreyIcon.d.ts

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

package/data1/esm/DashboardGreyIcon.js

@@ -6,27 +6,70 @@ 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 DashboardGreyIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormode,
   ...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'),
     viewBox: "0 0 24 24",
-    "aria-hidden": "true",
     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", {
-    fill: colored ? '#d0cfce' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#d0cfce') ? 'white' : 'currentColor'),
-    d: "M2 22h6v-9H2zM10 22h12v-9H10zM16 11h6V2h-6zM2 11h12V2H2z"
+    fill: colored ? '#d0cfce' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    d: "M2 22h6v-9H2zm8 0h12v-9H10zm6-11h6V2h-6zM2 11h12V2H2z"
   }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(DashboardGreyIcon);
 export default ForwardRef;

package/data1/esm/DashboardOutlineGreyIcon.d.ts

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