@datalayer/icons-react 1.0.6 → 1.0.8

package/data1/esm/CellIcon.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 CellIcon({
   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 ? '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",
@@ -32,6 +71,10 @@ function CellIcon({
     d: "M1.5 7.25h17v1.5h-17v-1.5z",
     clipRule: "evenodd"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(CellIcon);
 export default ForwardRef;

package/data1/esm/CephIcon.d.ts

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

package/data1/esm/CephIcon.js

@@ -6,26 +6,69 @@ 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 CephIcon({
   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 ? '#f0424d' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f0424d') ? 'white' : 'currentColor'),
+    fill: colored ? '#f0424d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     viewBox: "-3.22 -4.4 66.773 66.338",
-    "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", {
     d: "M51.727 55.793c-2.427-1.3-3.813-2.746-4.12-4.326-.296-1.53.387-3.232 2.088-5.204a25.678 25.678 0 006.307-16.88C56.002 15.2 44.462 3.66 30.28 3.66h-.23C15.866 3.66 4.33 15.2 4.33 29.383a25.68 25.68 0 006.308 16.881c1.715 1.985 2.38 3.618 2.096 5.134-.295 1.578-1.684 3.054-4.132 4.392-3.754-3.13-7.073-7.308-9.12-11.5a34.577 34.577 0 01-2.542-7.14 34.106 34.106 0 01-.9-7.765 33.82 33.82 0 012.67-13.237A33.89 33.89 0 016.008 5.341a33.85 33.85 0 0110.806-7.286A33.768 33.768 0 0130.05-4.618h.23a33.78 33.78 0 0113.238 2.673A33.918 33.918 0 0154.324 5.34a33.91 33.91 0 017.287 10.806 33.81 33.81 0 012.673 13.237 34.18 34.18 0 01-.892 7.765 33.743 33.743 0 01-2.543 7.14c-2.047 4.194-5.364 8.373-9.123 11.503M39.18 62.155c-.395-.25-1.745-1.253-3.06-3.076-1.262-1.742-2.748-4.632-2.67-8.502.05-2.33.516-4.597 1.4-6.74a19.193 19.193 0 013.7-5.78l.01-.013.35-.405c.6-.695 1.218-1.412 1.712-2.252a11.66 11.66 0 001.315-3.226 12.14 12.14 0 00.066-5.257c-.335-1.586-1-3.123-1.95-4.448a12.115 12.115 0 00-3.438-3.238 12 12 0 00-4.626-1.685 11.83 11.83 0 00-1.693-.12h-.244a11.93 11.93 0 00-1.691.12 11.99 11.99 0 00-4.626 1.685 12.135 12.135 0 00-3.44 3.238 12.08 12.08 0 00-1.95 4.448 12.11 12.11 0 00.068 5.257c.262 1.1.706 2.194 1.313 3.226.496.84 1.114 1.557 1.713 2.252l.352.405.007.013a19.1 19.1 0 013.703 5.78c.875 2.14 1.343 4.4 1.4 6.74.08 3.87-1.407 6.76-2.668 8.502-1.32 1.823-2.667 2.827-3.063 3.076l-1.97-.593a33.91 33.91 0 01-5.665-2.497 9.67 9.67 0 005.084-8.496c0-2.355-.915-4.613-2.72-6.7-.027-.032-.055-.058-.075-.08l-.54-.592-1.448-1.696a20.3 20.3 0 01-3.469-7.414 20.43 20.43 0 01-.112-8.882 20.37 20.37 0 013.301-7.537 20.47 20.47 0 015.807-5.469 20.342 20.342 0 017.84-2.856 20.09 20.09 0 012.853-.2h.256a20.1 20.1 0 012.854.2 20.35 20.35 0 017.841 2.856 20.475 20.475 0 015.808 5.47 20.433 20.433 0 013.303 7.537 20.5 20.5 0 01-.113 8.882 20.3 20.3 0 01-3.472 7.414c-.44.6-.93 1.127-1.45 1.696l-.523.577-.016.014c-.02.02-.05.048-.075.083-1.83 2.2-2.72 4.383-2.72 6.706a9.667 9.667 0 005.088 8.496 33.95 33.95 0 01-5.666 2.497l-1.973.593M30.165 36.42c-3.7 0-6.713-3.012-6.713-6.713s3.012-6.714 6.713-6.714 6.712 3.012 6.712 6.714a6.72 6.72 0 01-6.712 6.713"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(CephIcon);
 export default ForwardRef;

package/data1/esm/CephNameIcon.d.ts

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

package/data1/esm/CephNameIcon.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 CephNameIcon({
   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: "-3.22 -4.4 65.729 65.302",
-    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 ? '#f0424d' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f0424d') ? 'white' : 'currentColor'),
-    strokeWidth: 1.008,
-    d: "M43.413 35.93c-1.613-.863-2.548-1.835-2.754-2.894-.198-1.023.258-2.16 1.396-3.478a17.166 17.166 0 004.216-11.283A17.219 17.219 0 0029.076 1.079L29 1.08h-.077a17.219 17.219 0 00-17.195 17.195 17.168 17.168 0 004.217 11.284c1.146 1.327 1.593 2.42 1.412 3.432-.198 1.055-1.127 2.041-2.763 2.936-2.52-2.092-4.738-4.886-6.097-7.688A22.723 22.723 0 016.8 23.465a22.803 22.803 0 01-.595-5.191 22.602 22.602 0 011.785-8.85 22.658 22.658 0 014.872-7.223 22.693 22.693 0 017.224-4.87 22.592 22.592 0 018.849-1.787h.154a22.602 22.602 0 018.85 1.786 22.637 22.637 0 017.223 4.871 22.672 22.672 0 014.871 7.223 22.602 22.602 0 011.788 8.85c0 1.752-.202 3.498-.605 5.191a22.612 22.612 0 01-1.7 4.774c-1.369 2.802-3.586 5.598-6.099 7.69m-8.4 4.254c-.265-.167-1.167-.837-2.047-2.057a9.31 9.31 0 01-1.784-5.683 12.561 12.561 0 01.93-4.507 12.803 12.803 0 012.473-3.864l.006-.01.234-.272c.4-.464.815-.945 1.144-1.505.407-.69.703-1.416.88-2.157a8.115 8.115 0 00.044-3.515 8.058 8.058 0 00-1.305-2.974 8.105 8.105 0 00-2.298-2.164 8.004 8.004 0 00-3.093-1.126 8.065 8.065 0 00-1.132-.08h-.164a7.974 7.974 0 00-1.13.079 8.014 8.014 0 00-3.093 1.126 8.105 8.105 0 00-2.3 2.164 8.075 8.075 0 00-1.303 2.974 8.095 8.095 0 00.046 3.515c.175.741.472 1.466.877 2.157.333.561.746 1.04 1.145 1.505l.235.272.005.01a12.749 12.749 0 012.475 3.864 12.53 12.53 0 01.928 4.506 9.31 9.31 0 01-1.784 5.683c-.881 1.21-1.784 1.89-2.047 2.057l-1.317-.396a23.467 23.467 0 01-3.787-1.67 6.454 6.454 0 003.397-5.68c0-1.572-.612-3.084-1.818-4.486a1.369 1.369 0 00-.05-.052l-.361-.395-.968-1.134a13.57 13.57 0 01-2.319-4.956 13.66 13.66 0 01-.074-5.938 13.542 13.542 0 012.218-5.038 13.673 13.673 0 013.88-3.656 13.59 13.59 0 015.243-1.91 13.317 13.317 0 011.907-.133h.172a13.438 13.438 0 011.908.134 13.59 13.59 0 015.242 1.91 13.69 13.69 0 013.884 3.655 13.826 13.826 0 012.217 5.038 13.75 13.75 0 01-.075 5.948 13.57 13.57 0 01-2.32 4.956c-.303.403-.622.753-.969 1.134l-.35.386c-.025.023-.044.04-.06.065-1.223 1.461-1.818 2.93-1.818 4.483a6.462 6.462 0 003.402 5.68 22.693 22.693 0 01-3.788 1.669l-1.31.396m-6.045-17.212a4.496 4.496 0 01-4.488-4.488A4.496 4.496 0 0129 14.003a4.496 4.496 0 014.487 4.488A4.496 4.496 0 0129 22.98"
+    fill: colored ? '#f0424d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    d: "M43.413 35.93c-1.613-.863-2.548-1.835-2.754-2.894-.198-1.023.258-2.16 1.396-3.478a17.166 17.166 0 004.216-11.283A17.219 17.219 0 0029.076 1.079L29 1.08h-.077a17.219 17.219 0 00-17.195 17.195 17.168 17.168 0 004.217 11.284c1.146 1.327 1.593 2.42 1.412 3.432-.198 1.055-1.127 2.041-2.763 2.936-2.52-2.092-4.738-4.886-6.097-7.688A22.723 22.723 0 016.8 23.465a22.803 22.803 0 01-.595-5.191 22.602 22.602 0 011.785-8.85 22.658 22.658 0 014.872-7.223 22.693 22.693 0 017.224-4.87 22.592 22.592 0 018.849-1.787h.154a22.602 22.602 0 018.85 1.786 22.637 22.637 0 017.223 4.871 22.672 22.672 0 014.871 7.223 22.602 22.602 0 011.788 8.85c0 1.752-.202 3.498-.605 5.191a22.612 22.612 0 01-1.7 4.774c-1.369 2.802-3.586 5.598-6.099 7.69m-8.4 4.254c-.265-.167-1.167-.837-2.047-2.057a9.31 9.31 0 01-1.784-5.683 12.561 12.561 0 01.93-4.507 12.803 12.803 0 012.473-3.864l.006-.01.234-.272c.4-.464.815-.945 1.144-1.505.407-.69.703-1.416.88-2.157a8.115 8.115 0 00.044-3.515 8.058 8.058 0 00-1.305-2.974 8.105 8.105 0 00-2.298-2.164 8.004 8.004 0 00-3.093-1.126 8.065 8.065 0 00-1.132-.08h-.164a7.974 7.974 0 00-1.13.079 8.014 8.014 0 00-3.093 1.126 8.105 8.105 0 00-2.3 2.164 8.075 8.075 0 00-1.303 2.974 8.095 8.095 0 00.046 3.515c.175.741.472 1.466.877 2.157.333.561.746 1.04 1.145 1.505l.235.272.005.01a12.749 12.749 0 012.475 3.864 12.53 12.53 0 01.928 4.506 9.31 9.31 0 01-1.784 5.683c-.881 1.21-1.784 1.89-2.047 2.057l-1.317-.396a23.467 23.467 0 01-3.787-1.67 6.454 6.454 0 003.397-5.68c0-1.572-.612-3.084-1.818-4.486a1.369 1.369 0 00-.05-.052l-.361-.395-.968-1.134a13.57 13.57 0 01-2.319-4.956 13.66 13.66 0 01-.074-5.938 13.542 13.542 0 012.218-5.038 13.673 13.673 0 013.88-3.656 13.59 13.59 0 015.243-1.91 13.317 13.317 0 011.907-.133h.172a13.438 13.438 0 011.908.134 13.59 13.59 0 015.242 1.91 13.69 13.69 0 013.884 3.655 13.826 13.826 0 012.217 5.038 13.75 13.75 0 01-.075 5.948 13.57 13.57 0 01-2.32 4.956c-.303.403-.622.753-.969 1.134l-.35.386c-.025.023-.044.04-.06.065-1.223 1.461-1.818 2.93-1.818 4.483a6.462 6.462 0 003.402 5.68 22.693 22.693 0 01-3.788 1.669l-1.31.396M29 22.979a4.496 4.496 0 01-4.488-4.488A4.496 4.496 0 0129 14.003a4.496 4.496 0 014.487 4.488A4.496 4.496 0 0129 22.98"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#333c46' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#333c46') ? 'white' : 'currentColor'),
-    strokeWidth: 1.008,
+    fill: colored ? '#333c46' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M13.755 52.214c0 3.155-.282 4.027-1.042 4.788-.45.451-1.156.76-2.48.76H5.595c-1.492 0-2.393-.254-3.024-.872-.985-.985-1.266-2.169-1.266-6.73 0-4.562.282-5.747 1.266-6.732.621-.62 1.512-.872 3.024-.872h4.62c1.379 0 1.998.28 2.478.76.731.732 1.014 1.746 1.014 4.59h-2.843c-.058-1.972-.17-2.32-.339-2.479-.17-.159-.403-.252-1.041-.252h-3.52c-.874 0-1.11.085-1.295.283-.282.282-.423.806-.423 4.702 0 3.897.14 4.422.423 4.703.197.198.423.282 1.294.282h3.549c.62 0 .903-.056 1.109-.252.206-.195.31-.76.31-2.675h2.845m4.935-3.44h6.928c0-2.562-.17-3.125-.422-3.379-.171-.168-.423-.282-1.295-.282h-3.493c-.873 0-1.11.084-1.324.31-.254.253-.365.76-.403 3.35zm0 2.339c.03 2.984.197 3.576.423 3.8.227.225.424.283 1.295.283h3.931c.649 0 .847-.113 1.016-.282.195-.198.252-.535.31-1.888h2.842c-.056 2.365-.282 3.211-1.042 3.972-.478.48-1.126.76-2.478.76h-4.94c-1.492 0-2.394-.254-3.024-.872-.988-.985-1.267-2.169-1.267-6.73 0-4.562.28-5.747 1.267-6.732.62-.62 1.512-.872 3.024-.872h4.167c1.494 0 2.45.28 3.025.844.985.986 1.266 2.17 1.266 6.62v.76c0 .223-.084.337-.339.337h-9.496m21.314 3.69c-.252.252-.62.366-1.548.366h-2.198c-.901 0-1.683-.254-2.76-.802l-.197-.099V45.99c1.127-.563 1.916-.845 2.845-.845h2.319c.927 0 1.295.113 1.548.366.424.423.535 1.238.535 4.637 0 3.4-.113 4.234-.535 4.638zm-.847-12.281h-2.054c-1.268 0-1.887.282-3.803 1.86v-1.83h-2.926v18.57h2.928v-5.157c1.916 1.549 2.535 1.83 3.803 1.83h2.054c1.636 0 2.452-.282 3.1-.928.806-.806 1.21-1.972 1.21-6.704 0-4.732-.396-5.887-1.21-6.704-.648-.647-1.464-.93-3.1-.93m18.393.875c-.564-.565-1.295-.874-2.619-.874h-2.393c-1.267 0-1.887.282-3.802 1.86v-5.797a10.565 10.565 0 00-2.908-1.09c-.007 0-.013.006-.02.008v20.249h2.929V45.989l.607-.288c.822-.368 1.484-.556 2.238-.556h1.972c.986 0 1.267.113 1.577.423.282.283.403.731.403 1.464v10.731h2.93V46.836c0-2.113-.31-2.845-.901-3.436"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(CephNameIcon);
 export default ForwardRef;

package/data1/esm/CloudIcon.d.ts

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

package/data1/esm/CloudIcon.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 CloudIcon({
   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",
-    className: "icon",
+    className: "prefix__icon",
     viewBox: "0 0 896 896",
-    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", {
     d: "M747.4 354.7C701.6 233.9 584.9 148 448.2 148S194.8 233.8 149 354.6C63.3 377.1 0 455.1 0 548c0 110.5 89.5 200 199.9 200h496.2C806.5 748 896 658.5 896 548c0-92.7-63.1-170.7-148.6-193.3zm36.3 281a123.07 123.07 0 01-87.6 36.3H199.9c-33.1 0-64.2-12.9-87.6-36.3A123.3 123.3 0 0176 548c0-28 9.1-54.3 26.2-76.3a125.7 125.7 0 0166.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0152.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10c54.3 14.5 92.1 63.8 92.1 120 0 33.1-12.9 64.3-36.3 87.7z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(CloudIcon);
 export default ForwardRef;

package/data1/esm/CloudIcon.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 896 896" fill="currentColor" aria-hidden="true">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 896 896" fill="currentColor" aria-hidden="true">
   <path d="M747.4 354.7C701.6 233.9 584.9 148 448.2 148S194.8 233.8 149 354.6C63.3 377.1 0 455.1 0 548c0 110.5 89.5 200 199.9 200h496.2C806.5 748 896 658.5 896 548c0-92.7-63.1-170.7-148.6-193.3zm36.3 281a123.07 123.07 0 01-87.6 36.3H199.9c-33.1 0-64.2-12.9-87.6-36.3A123.3 123.3 0 0176 548c0-28 9.1-54.3 26.2-76.3a125.7 125.7 0 0166.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0152.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10c54.3 14.5 92.1 63.8 92.1 120 0 33.1-12.9 64.3-36.3 87.7z"/>
 </svg>

package/data1/esm/CloudUploadIcon.d.ts

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

package/data1/esm/CloudUploadIcon.js

@@ -6,29 +6,72 @@ 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 CloudUploadIcon({
   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",
-    className: "icon",
+    className: "prefix__icon",
     viewBox: "0 0 1024 1024",
-    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", {
     d: "M518.3 459a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V856c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V613.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 459z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M811.4 366.7C765.6 245.9 648.9 160 512.2 160S258.8 245.8 213 366.6C127.3 389.1 64 467.2 64 560c0 110.5 89.5 200 199.9 200H304c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8h-40.1c-33.7 0-65.4-13.4-89-37.7-23.5-24.2-36-56.8-34.9-90.6.9-26.4 9.9-51.2 26.2-72.1 16.7-21.3 40.1-36.8 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0152.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10C846.1 454.5 884 503.8 884 560c0 33.1-12.9 64.3-36.3 87.7a123.07 123.07 0 01-87.6 36.3H720c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h40.1C870.5 760 960 670.5 960 560c0-92.7-63.1-170.7-148.6-193.3z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(CloudUploadIcon);
 export default ForwardRef;

package/data1/esm/CloudUploadIcon.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024" fill="currentColor" aria-hidden="true">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor" aria-hidden="true">
   <path d="M518.3 459a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V856c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V613.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 459z"/>
   <path d="M811.4 366.7C765.6 245.9 648.9 160 512.2 160S258.8 245.8 213 366.6C127.3 389.1 64 467.2 64 560c0 110.5 89.5 200 199.9 200H304c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8h-40.1c-33.7 0-65.4-13.4-89-37.7-23.5-24.2-36-56.8-34.9-90.6.9-26.4 9.9-51.2 26.2-72.1 16.7-21.3 40.1-36.8 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0152.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10C846.1 454.5 884 503.8 884 560c0 33.1-12.9 64.3-36.3 87.7a123.07 123.07 0 01-87.6 36.3H720c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h40.1C870.5 760 960 670.5 960 560c0-92.7-63.1-170.7-148.6-193.3z"/>
 </svg>

package/data1/esm/CollaborateIcon.d.ts

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

package/data1/esm/CollaborateIcon.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 CollaborateIcon({
   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 ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     "aria-hidden": "true",
-    viewBox: "0 0 20 20",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    viewBox: "0 0 20 20",
     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: "M2.855 13.57v-.715H1.43v.715a5 5 0 005 5h2.14v-1.425H6.43a3.576 3.576 0 01-3.575-3.575zm12.86-7.14v.715h1.43V6.43c0-2.762-2.243-5-5-5H10v1.425h2.145a3.573 3.573 0 013.57 3.575zm-9.285 0H2.145A2.142 2.142 0 000 8.57V10h1.43V8.57c0-.394.32-.715.715-.715H6.43c.394 0 .715.32.715.715V10H8.57V8.57c0-1.183-.957-2.14-2.14-2.14zm-2.145-.715A2.857 2.857 0 104.29 0a2.857 2.857 0 00-.004 5.715zm0-4.285a1.427 1.427 0 110 2.855 1.427 1.427 0 110-2.855zm13.57 15H13.57c-1.183 0-2.14.957-2.14 2.14V20h1.425v-1.43c0-.394.32-.715.715-.715h4.285c.395 0 .715.32.715.715V20H20v-1.43c0-1.183-.96-2.14-2.145-2.14zm-5-3.575a2.857 2.857 0 105.715.004 2.857 2.857 0 00-5.715-.004zm4.29 0a1.43 1.43 0 01-2.86 0c0-.789.64-1.425 1.43-1.425.789 0 1.43.636 1.43 1.425zm0 0",
     clipRule: "evenodd"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(CollaborateIcon);
 export default ForwardRef;

package/data1/esm/CommandsIcon.d.ts

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

package/data1/esm/CommandsIcon.js

@@ -6,26 +6,69 @@ 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 CommandsIcon({
   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 ? '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", {
     d: "M7.942 10.05l-5.966 5.966a.938.938 0 101.327 1.325l6.628-6.629a.938.938 0 000-1.325l-6.628-6.63a.937.937 0 00-1.325 1.327l5.965 5.966zm2.995 4.325a.938.938 0 000 1.875h6.876a.938.938 0 000-1.875h-6.875z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(CommandsIcon);
 export default ForwardRef;

package/data1/esm/ConsoleIcon.d.ts

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