@datalayer/icons-react 1.0.7 → 1.0.8

package/data2/RunIcon.js

@@ -6,13 +6,47 @@ 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 RunIcon({
   title,
   titleId,
   size,
+  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 72 72",
     fill: "currentColor",
@@ -20,7 +54,11 @@ function RunIcon({
     ref: svgRef,
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "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: "#fcea2b"
@@ -29,9 +67,9 @@ function RunIcon({
     cy: 13.094,
     r: 3
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M26.665 22.585s.304 3.708 3.304 9.042c.244.435 1.031 1.708 1.031 1.708L25 45l-.25 18h3.424L30 48l6-6 6-5v-4l-6-11"
+    d: "M26.665 22.585s.304 3.708 3.304 9.042A80.486 80.486 0 0031 33.335L25 45l-.25 18h3.424L30 48l6-6 6-5v-4l-6-11"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M42 36l7 10 10.167 6-1 3L46 50l-9-8M36 22c-2-4-4.36-4.233-6.031-3.583A4.108 4.108 0 0028 24"
+    d: "M42 36l7 10 10.167 6-1 3L46 50l-9-8m-1-20c-2-4-4.36-4.233-6.031-3.583A4.108 4.108 0 0028 24"
   })), /*#__PURE__*/React.createElement("g", {
     fill: "none",
     stroke: "#000",
@@ -48,12 +86,16 @@ function RunIcon({
   }), /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    d: "M30.848 31.36l.576 1.32a3.731 3.731 0 01-.498 3.007l-4.852 7.625A8.323 8.323 0 0024.973 47l-.196 14a1.849 1.849 0 001.685 2 2.175 2.175 0 001.954-1.985l1.342-11.03a6.789 6.789 0 011.656-3.4l3.172-3.17a53.68 53.68 0 012.95-2.695l2.928-2.44A4.864 4.864 0 0042 35h0a9.309 9.309 0 00-.958-3.756L36 22M36 22c-2-4-4.36-4.233-6.031-3.583a3.859 3.859 0 00-2.369 3.834"
+    d: "M30.848 31.36l.576 1.32a3.731 3.731 0 01-.498 3.007l-4.852 7.625A8.323 8.323 0 0024.973 47l-.196 14a1.849 1.849 0 001.685 2 2.175 2.175 0 001.954-1.985l1.342-11.03a6.789 6.789 0 011.656-3.4l3.172-3.17a53.68 53.68 0 012.95-2.695l2.928-2.44A4.864 4.864 0 0042 35h0a9.309 9.309 0 00-.958-3.756L36 22m0 0c-2-4-4.36-4.233-6.031-3.583a3.859 3.859 0 00-2.369 3.834"
   }), /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     d: "M30.938 22l-1.42 5.077A2.776 2.776 0 0127 29h-7"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(RunIcon);
 module.exports = ForwardRef;

package/data2/SantaClausIcon.d.ts

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

package/data2/SantaClausIcon.js

@@ -6,13 +6,47 @@ 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 SantaClausIcon({
   title,
   titleId,
   size,
+  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 72 72",
     fill: "currentColor",
@@ -20,7 +54,11 @@ function SantaClausIcon({
     ref: svgRef,
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "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("ellipse", {
     cx: 35.921,
@@ -61,19 +99,19 @@ function SantaClausIcon({
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#A57939",
     d: "M12.6 51c0-4.503 3.989-7.646 7.63-8.653 1.374-.38 2.84.032 3.78 1.102 2.198 2.502 6.047 7.996 4.59 14.551 0 0-9-9-11-9"
-  }), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     fill: "#FCEA2B",
     d: "M46.54 25.32c.465 1.55.72 3.228.72 4.98 0 1.79-.339 5-.75 5.077-5.589-3.077-12.715-4.752-21.152.085-.437-1.162-.776-3.34-.776-5.162 0-1.476.18-2.899.516-4.236"
-  })), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "#000",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeMiterlimit: 10,
     strokeWidth: 2,
-    d: "M46.941 35.785a2.824 2.824 0 01-1.844 4.962 2.824 2.824 0 01-2.823 2.824 2.798 2.798 0 01-1.452-.413 2.81 2.81 0 01-.787 2.41 2.823 2.823 0 01-3.993 0c-.046-.047-.078-.1-.12-.148a2.805 2.805 0 01-2.119.974 2.824 2.824 0 01-2.823-2.823c0-.142.021-.278.042-.415-.426.258-.92.415-1.454.415a2.824 2.824 0 01-2.823-2.824 2.823 2.823 0 01-1.996-4.82M16.054 58.56A9.977 9.977 0 0112.6 51c0-4.503 3.989-7.646 7.63-8.653 1.374-.38 2.84.032 3.78 1.102 2.198 2.502 6.047 7.996 4.59 14.551M46.54 25.32c.465 1.55.72 3.228.72 4.98 0 1.79-.339 5-.75 5.077-5.589-3.077-12.715-4.752-21.152.085-.437-1.162-.776-3.34-.776-5.162 0-1.476.18-2.899.516-4.236"
+    d: "M46.941 35.785a2.824 2.824 0 01-1.844 4.962 2.824 2.824 0 01-2.823 2.824 2.798 2.798 0 01-1.452-.413 2.81 2.81 0 01-.787 2.41 2.823 2.823 0 01-3.993 0c-.046-.047-.078-.1-.12-.148a2.805 2.805 0 01-2.119.974 2.824 2.824 0 01-2.823-2.823c0-.142.021-.278.042-.415-.426.258-.92.415-1.454.415a2.824 2.824 0 01-2.823-2.824 2.823 2.823 0 01-1.996-4.82M16.054 58.56A9.977 9.977 0 0112.6 51c0-4.503 3.989-7.646 7.63-8.653 1.374-.38 2.84.032 3.78 1.102 2.198 2.502 6.047 7.996 4.59 14.551m17.94-32.68c.465 1.55.72 3.228.72 4.98 0 1.79-.339 5-.75 5.077-5.589-3.077-12.715-4.752-21.152.085-.437-1.162-.776-3.34-.776-5.162 0-1.476.18-2.899.516-4.236"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M29.92 28.94a2 2 0 104.002-.002 2 2 0 00-4.001.001M37.92 28.94a2 2 0 104.002-.002 2 2 0 00-4.001.001M35.921 38.942c1.152 0 2.304-.286 3.447-.858a1 1 0 10-.894-1.79c-1.718.86-3.388.86-5.106 0a1 1 0 00-.894 1.79c1.143.572 2.295.858 3.447.858z"
+    d: "M29.92 28.94a2 2 0 104.002-.002 2 2 0 00-4.001.001m7.999.001a2 2 0 104.002-.002 2 2 0 00-4.001.001m-2 10.003c1.152 0 2.304-.286 3.447-.858a1 1 0 10-.894-1.79c-1.718.86-3.388.86-5.106 0a1 1 0 00-.894 1.79c1.143.572 2.295.858 3.447.858z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "#000",
@@ -81,7 +119,7 @@ function SantaClausIcon({
     strokeLinejoin: "round",
     strokeMiterlimit: 10,
     strokeWidth: 2,
-    d: "M46.818 20.32a23.783 23.783 0 00-.36-2.75M46.743 20.3H25.1c-.65 0-1.178.417-1.178.932v3.136c0 .515.527.932 1.178.932h21.644c.65 0 1.178-.417 1.178-.932v-3.135c0-.515-.527-.933-1.178-.933z"
+    d: "M46.818 20.32a23.783 23.783 0 00-.36-2.75m.285 2.73H25.1c-.65 0-1.178.417-1.178.932v3.136c0 .515.527.932 1.178.932h21.644c.65 0 1.178-.417 1.178-.932v-3.135c0-.515-.527-.933-1.178-.933z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "#000",
@@ -97,7 +135,7 @@ function SantaClausIcon({
     strokeLinejoin: "round",
     strokeMiterlimit: 10,
     strokeWidth: 2,
-    d: "M25.024 20.32C25.53 13.676 30.922 9.3 35.922 9.3c6 0 9.002 1.39 10.882 2.38 10.492 5.523 8.78 17.344 7.972 22.64.05-.004.095-.02.146-.02.742 0 1.382.409 1.727 1.008.692 0 1.366.35 1.737.992.37.642.337 1.401-.01 2 .347.599.38 1.357.01 2a1.991 1.991 0 01-1.737.992c-.345.6-.985 1.008-1.727 1.008s-1.382-.409-1.727-1.008c-.693 0-1.366-.35-1.737-.992a1.991 1.991 0 01.01-2 1.991 1.991 0 01-.01-2c.054-.094.127-.168.193-.25l-1.031-.483M16.92 59.998s-.97-6.3 2.49-10.13M54.8 59.998s1.36-8.85-4.9-11.93l-.51-.24c-.18-.07-.36-.14-.55-.21-.19-.06-.38-.12-.58-.18-.4-.11-.82-.2-1.26-.28-.68-.1-1.41-.16-2.2-.16-.6.4-1.18.78-1.75 1.12-.2.12-.39.24-.59.35l-.54.3c-.18.11-.36.21-.54.3-.37.19-.74.36-1.11.52s-.73.3-1.1.42c-.18.06-.36.12-.55.17-.14.04-.28.08-.42.11-.2.05-.39.09-.58.13l-.19.03c-.32.06-.65.1-.98.12-.19.01-.39.02-.59.02h-.14c-.18 0-.35-.01-.53-.03-.12 0-.24-.02-.36-.03-.18-.02-.36-.04-.54-.08-.09-.01-.19-.03-.28-.05-.18-.03-.35-.07-.53-.11l-.1-.03c-.1-.02-.2-.05-.3-.08-.18-.05-.36-.11-.53-.17-.37-.12-.73-.26-1.1-.42-1.47-.63-2.94-1.53-4.53-2.59-.12 0-.24 0-.35.01M28.88 53.988c1.24.48 2.59.81 4.04.98v5.03"
+    d: "M25.024 20.32C25.53 13.676 30.922 9.3 35.922 9.3c6 0 9.002 1.39 10.882 2.38 10.492 5.523 8.78 17.344 7.972 22.64.05-.004.095-.02.146-.02.742 0 1.382.409 1.727 1.008.692 0 1.366.35 1.737.992.37.642.337 1.401-.01 2 .347.599.38 1.357.01 2a1.991 1.991 0 01-1.737.992c-.345.6-.985 1.008-1.727 1.008s-1.382-.409-1.727-1.008c-.693 0-1.366-.35-1.737-.992a1.991 1.991 0 01.01-2 1.991 1.991 0 01-.01-2c.054-.094.127-.168.193-.25l-1.031-.483m-33.7 24.431s-.97-6.3 2.49-10.13m35.39 10.13s1.36-8.85-4.9-11.93l-.51-.24c-.18-.07-.36-.14-.55-.21-.19-.06-.38-.12-.58-.18-.4-.11-.82-.2-1.26-.28-.68-.1-1.41-.16-2.2-.16-.6.4-1.18.78-1.75 1.12-.2.12-.39.24-.59.35l-.54.3c-.18.11-.36.21-.54.3-.37.19-.74.36-1.11.52s-.73.3-1.1.42c-.18.06-.36.12-.55.17-.14.04-.28.08-.42.11-.2.05-.39.09-.58.13l-.19.03c-.32.06-.65.1-.98.12-.19.01-.39.02-.59.02h-.14c-.18 0-.35-.01-.53-.03-.12 0-.24-.02-.36-.03-.18-.02-.36-.04-.54-.08-.09-.01-.19-.03-.28-.05-.18-.03-.35-.07-.53-.11l-.1-.03c-.1-.02-.2-.05-.3-.08-.18-.05-.36-.11-.53-.17-.37-.12-.73-.26-1.1-.42-1.47-.63-2.94-1.53-4.53-2.59-.12 0-.24 0-.35.01m2.31 6.98c1.24.48 2.59.81 4.04.98v5.03"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "#000",
@@ -114,7 +152,11 @@ function SantaClausIcon({
     strokeMiterlimit: 10,
     strokeWidth: 2,
     d: "M12.6 51c0-4.503 3.989-7.646 7.63-8.653 1.374-.38 2.84.032 3.78 1.102 2.198 2.502 6.047 7.996 4.59 14.551 0 0-9-9-11-9"
-  })));
+  }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(SantaClausIcon);
 module.exports = ForwardRef;

package/data2/SatelliteIcon.d.ts

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

package/data2/SatelliteIcon.js

@@ -6,13 +6,47 @@ 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 SatelliteIcon({
   title,
   titleId,
   size,
+  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 72 72",
     fill: "currentColor",
@@ -20,7 +54,11 @@ function SatelliteIcon({
     ref: svgRef,
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "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", {
     strokeLinecap: "round",
@@ -32,13 +70,13 @@ function SatelliteIcon({
     d: "M24.281 24.405c3.633-3.633 3.934-9.413.87-13.4a1.01 1.01 0 00-1.511-.1L11 23.544a1.01 1.01 0 00.074 1.49 9.788 9.788 0 0013.207-.63z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#3f3f3f",
-    d: "M15.728 67.728L4.414 56.414a1 1 0 010-1.414l15.1-15.1a1 1 0 011.415 0l11.314 11.313a1 1 0 010 1.414l-15.1 15.1a1 1 0 01-1.415 0zM51.213 32.243L39.9 20.929a1 1 0 010-1.414L55 4.415a1 1 0 011.415 0l11.314 11.313a1 1 0 010 1.414l-15.1 15.1a1 1 0 01-1.415 0z"
+    d: "M15.728 67.728L4.414 56.414a1 1 0 010-1.414l15.1-15.1a1 1 0 011.415 0l11.314 11.313a1 1 0 010 1.414l-15.1 15.1a1 1 0 01-1.415 0zm35.485-35.485L39.9 20.929a1 1 0 010-1.414L55 4.415a1 1 0 011.415 0l11.314 11.313a1 1 0 010 1.414l-15.1 15.1a1 1 0 01-1.415 0z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#d0cfce",
     d: "M51.92 39.192L39.192 51.92a1 1 0 01-1.414 0L23.636 37.778a1 1 0 010-1.414l12.728-12.728a1 1 0 011.414 0L51.92 37.778a1 1 0 010 1.414z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#9b9b9a",
-    d: "M36.364 23.636L23.636 36.364a1 1 0 01-1.414 0l-4.243-4.243a1 1 0 010-1.414L30.707 17.98a1 1 0 011.414 0l4.243 4.243a1 1 0 010 1.414zM53.334 44.85l-8.485 8.485a1 1 0 01-1.414 0l-2.121-2.122a1 1 0 010-1.414l8.485-8.485a1 1 0 011.414 0l2.121 2.121a1 1 0 010 1.414z"
+    d: "M36.364 23.636L23.636 36.364a1 1 0 01-1.414 0l-4.243-4.243a1 1 0 010-1.414L30.707 17.98a1 1 0 011.414 0l4.243 4.243a1 1 0 010 1.414zm16.97 21.214l-8.485 8.485a1 1 0 01-1.414 0l-2.121-2.122a1 1 0 010-1.414l8.485-8.485a1 1 0 011.414 0l2.121 2.121a1 1 0 010 1.414z"
   }), /*#__PURE__*/React.createElement("circle", {
     cx: 12.322,
     cy: 12.322,
@@ -51,15 +89,15 @@ function SatelliteIcon({
     strokeMiterlimit: 10,
     strokeWidth: 2
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M45.5 26.5l-2.43 2.43M28.93 43.07l-2.41 2.42L26 46M12 14v8M23 12h-9"
+    d: "M45.5 26.5l-2.43 2.43M28.93 43.07l-2.41 2.42L26 46M12 14v8m11-10h-9"
   }), /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    d: "M24.281 24.405c3.633-3.633 3.934-9.413.87-13.4a1.01 1.01 0 00-1.511-.1L11 23.544a1.01 1.01 0 00.074 1.49 9.788 9.788 0 0013.207-.63zM15.728 67.728L4.414 56.414a1 1 0 010-1.414l15.1-15.1a1 1 0 011.415 0l11.314 11.313a1 1 0 010 1.414l-15.1 15.1a1 1 0 01-1.415 0zM51.213 32.243L39.9 20.929a1 1 0 010-1.414L55 4.415a1 1 0 011.415 0l11.314 11.313a1 1 0 010 1.414l-15.1 15.1a1 1 0 01-1.415 0zM51.92 39.192L39.192 51.92a1 1 0 01-1.414 0L23.636 37.778a1 1 0 010-1.414l12.728-12.728a1 1 0 011.414 0L51.92 37.778a1 1 0 010 1.414z"
+    d: "M24.281 24.405c3.633-3.633 3.934-9.413.87-13.4a1.01 1.01 0 00-1.511-.1L11 23.544a1.01 1.01 0 00.074 1.49 9.788 9.788 0 0013.207-.63zm-8.553 43.323L4.414 56.414a1 1 0 010-1.414l15.1-15.1a1 1 0 011.415 0l11.314 11.313a1 1 0 010 1.414l-15.1 15.1a1 1 0 01-1.415 0zm35.485-35.485L39.9 20.929a1 1 0 010-1.414L55 4.415a1 1 0 011.415 0l11.314 11.313a1 1 0 010 1.414l-15.1 15.1a1 1 0 01-1.415 0zm.707 6.949L39.192 51.92a1 1 0 01-1.414 0L23.636 37.778a1 1 0 010-1.414l12.728-12.728a1 1 0 011.414 0L51.92 37.778a1 1 0 010 1.414z"
   }), /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    d: "M36.364 23.636L23.636 36.364a1 1 0 01-1.414 0l-4.243-4.243a1 1 0 010-1.414L30.707 17.98a1 1 0 011.414 0l4.243 4.243a1 1 0 010 1.414zM53.334 44.85l-8.485 8.485a1 1 0 01-1.414 0l-2.121-2.122a1 1 0 010-1.414l8.485-8.485a1 1 0 011.414 0l2.121 2.121a1 1 0 010 1.414z"
+    d: "M36.364 23.636L23.636 36.364a1 1 0 01-1.414 0l-4.243-4.243a1 1 0 010-1.414L30.707 17.98a1 1 0 011.414 0l4.243 4.243a1 1 0 010 1.414zm16.97 21.214l-8.485 8.485a1 1 0 01-1.414 0l-2.121-2.122a1 1 0 010-1.414l8.485-8.485a1 1 0 011.414 0l2.121 2.121a1 1 0 010 1.414z"
   }), /*#__PURE__*/React.createElement("circle", {
     cx: 12.322,
     cy: 12.322,
@@ -68,6 +106,10 @@ function SatelliteIcon({
     strokeLinejoin: "round",
     transform: "rotate(-45.001 12.322 12.323)"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(SatelliteIcon);
 module.exports = ForwardRef;

package/data2/SchoolIcon.d.ts

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

package/data2/SchoolIcon.js

@@ -6,13 +6,47 @@ 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 SchoolIcon({
   title,
   titleId,
   size,
+  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: "currentColor",
     "aria-hidden": "true",
@@ -20,7 +54,11 @@ function SchoolIcon({
     ref: svgRef,
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "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: "none",
@@ -37,6 +75,10 @@ function SchoolIcon({
     strokeLinejoin: "round",
     d: "M11.818 19.09v-5.908H8.182v5.909m-.91 0h5.455m2.727-14.546V1.818s-.681 1.364-2.727 0c-2.045-1.363-2.727 0-2.727 0v2.727s.682-1.363 2.727 0c2.046 1.364 2.727 0 2.727 0z"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(SchoolIcon);
 module.exports = ForwardRef;

package/data2/ScientistIcon.d.ts

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

package/data2/ScientistIcon.js

@@ -6,13 +6,47 @@ 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 ScientistIcon({
   title,
   titleId,
   size,
+  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 72 72",
     fill: "currentColor",
@@ -20,7 +54,11 @@ function ScientistIcon({
     ref: svgRef,
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "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: "#FFF",
@@ -40,21 +78,20 @@ function ScientistIcon({
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#92D3F5",
     d: "M23.149 25.003s12.703-7.023 26.25.802l-3.884 6.025s-6.71.933-9.241-1.6c-2.592 2.592-8.49 1.6-8.49 1.6l-4.635-6.827z"
-  }), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     fill: "#E27022",
     d: "M36 9.58c-10 0-14 7-14 14s0 13 4 13h20c4 0 4-6 4-13s-4-14-14-14zm9.515 22.25s-6.71.933-9.241-1.6c-2.592 2.592-8.49 1.6-8.49 1.6l-4.635-6.827s12.703-7.023 26.25.802l-3.884 6.025z"
-  })), /*#__PURE__*/React.createElement("g", {
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M47.187 24.659c-.514-.34-1.015-.682-1.187-1.078-3-3-7-8-7-8-4 3-7 6-13 7 0 0-1.253.55-1.92 1.97 2.953-1.325 12.569-4.814 23.107.108zm-1.672 7.171s-6.71.933-9.241-1.6c-2.592 2.592-8.49 1.6-8.49 1.6l-4.082-6.012c-.1.797 1.235 1.513 1.235 2.763 0 9 4.936 14 11 14 5.71 0 10.657-4.637 11.027-12.999l-1.449 2.248z",
     fill: "#FCEA2B"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M47.187 24.659c-.514-.34-1.015-.682-1.187-1.078-3-3-7-8-7-8-4 3-7 6-13 7 0 0-1.253.55-1.92 1.97 2.953-1.325 12.569-4.814 23.107.108zM45.515 31.83s-6.71.933-9.241-1.6c-2.592 2.592-8.49 1.6-8.49 1.6l-4.082-6.012c-.1.797 1.235 1.513 1.235 2.763 0 9 4.936 14 11 14 5.71 0 10.657-4.637 11.027-12.999l-1.449 2.248z"
-  })), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     d: "M37.562 58.953a1 1 0 01-1-1v-4.425c-6.164-1.165-10.689-7.72-10.888-8.012a1 1 0 011.653-1.126c.046.067 4.65 6.722 10.332 7.278a1 1 0 01.902.995v5.29a1 1 0 01-1 1z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M16.993 58.952a1 1 0 01-.986-.846c-.041-.27-.973-6.633 2.58-10.776 1.924-2.241 4.752-3.377 8.408-3.377a1 1 0 01.555.168c3.153 2.103 5.66 3.41 8.383 3.424 2.722-.013 5.23-1.321 8.382-3.424.164-.11.358-.168.555-.168 1.907 0 3.61.316 5.06.937a.999.999 0 01.525 1.312.998.998 0 01-1.312.526c-1.127-.483-2.463-.742-3.976-.772-3.31 2.186-6.027 3.546-9.128 3.588-.015 0-.031.003-.044 0h-.125c-.018.003-.03 0-.044 0-3.1-.042-5.817-1.402-9.128-3.588-2.896.057-5.11.954-6.586 2.669-2.956 3.437-2.137 9.12-2.129 9.178a1 1 0 01-.99 1.15z"
+    d: "M16.993 58.952a1 1 0 01-.986-.846c-.041-.27-.973-6.633 2.58-10.776 1.924-2.241 4.752-3.377 8.408-3.377a1 1 0 01.555.168c3.153 2.103 5.66 3.41 8.383 3.424 2.722-.013 5.23-1.321 8.382-3.424a.997.997 0 01.555-.168c1.907 0 3.61.316 5.06.937a.999.999 0 01.525 1.312.998.998 0 01-1.312.526c-1.127-.483-2.463-.742-3.976-.772-3.31 2.186-6.027 3.546-9.128 3.588-.015 0-.031.003-.044 0h-.125c-.018.003-.03 0-.044 0-3.1-.042-5.817-1.402-9.128-3.588-2.896.057-5.11.954-6.586 2.669-2.956 3.437-2.137 9.12-2.129 9.178a1 1 0 01-.99 1.15z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M49.982 60.808c-.58 0-1.08-.227-1.41-.64-.593-.737-.402-1.762-.357-1.959a1.01 1.01 0 01.06-.184l3.782-8.635v-5.291h-.086a1 1 0 110-2h1.086a1 1 0 011 1v6.5a1 1 0 01-.084.401l-3.817 8.714c-.003.03-.005.061-.006.093l10.05-.011a1.037 1.037 0 00-.007-.095l-3.815-8.723a.992.992 0 01-.084-.4v-6.48a1 1 0 011-1h1.18a1 1 0 110 2h-.18v5.27l3.782 8.647c.027.058.046.119.06.182.045.197.235 1.221-.357 1.96-.33.412-.832.639-1.412.639l-10.385.012z"
+    d: "M49.982 60.808c-.58 0-1.08-.227-1.41-.64-.593-.737-.402-1.762-.357-1.959a1.01 1.01 0 01.06-.184l3.782-8.635v-5.291h-.086a1 1 0 110-2h1.086a1 1 0 011 1v6.5a1 1 0 01-.084.401l-3.817 8.714c-.003.03-.005.061-.006.093l10.05-.011a1.037 1.037 0 00-.007-.095l-3.815-8.723a.992.992 0 01-.084-.4v-6.48a1 1 0 011-1h1.18a1 1 0 110 2h-.18v5.27l3.782 8.647a.883.883 0 01.06.182c.045.197.235 1.221-.357 1.96-.33.412-.832.639-1.412.639l-10.385.012z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M57.294 44.099h-4.237a1 1 0 110-2h4.237a1 1 0 110 2zM41.953 27.047a2 2 0 11-4 0 2 2 0 014 0M33.953 27.047a2 2 0 11-4 0 2 2 0 014 0M35.953 37.05a7.652 7.652 0 01-3.448-.859 1 1 0 01.895-1.789c1.593.86 3.512.86 5.106 0a1 1 0 01.894 1.79 7.653 7.653 0 01-3.447.857z"
+    d: "M57.294 44.099h-4.237a1 1 0 110-2h4.237a1 1 0 110 2zM41.953 27.047a2 2 0 11-4 0 2 2 0 014 0m-8 0a2 2 0 11-4 0 2 2 0 014 0m2 10.003a7.652 7.652 0 01-3.448-.859 1 1 0 01.895-1.789c1.593.86 3.512.86 5.106 0a1 1 0 01.894 1.79 7.653 7.653 0 01-3.447.857z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "#000",
@@ -69,7 +106,7 @@ function ScientistIcon({
     stroke: "#000",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    d: "M24.948 27.69c-.007.281-.012.578-.012.89 0 9 4.937 14 11 14 5.726 0 10.7-4.65 11.045-13.056"
+    d: "M24.948 27.69a35.58 35.58 0 00-.012.89c0 9 4.937 14 11 14 5.726 0 10.7-4.65 11.045-13.056"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "#000",
@@ -77,7 +114,11 @@ function ScientistIcon({
     strokeLinejoin: "round",
     strokeWidth: 2,
     d: "M46 23.58c-3-3-7-8-7-8-4 3-7 6-13 7.001 0 0-.266.25-.532 1.125"
-  })));
+  }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(ScientistIcon);
 module.exports = ForwardRef;

package/data2/ScrollIcon.d.ts

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

package/data2/ScrollIcon.js

@@ -6,13 +6,47 @@ 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 ScrollIcon({
   title,
   titleId,
   size,
+  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 72 72",
     fill: "currentColor",
@@ -20,18 +54,18 @@ function ScrollIcon({
     ref: svgRef,
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "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: "#F4AA41",
     d: "M15.023 16.283h41.954V57.26H15.023z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#E27022",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeMiterlimit: 10,
-    strokeWidth: 2,
-    d: "M16 55.748l-5 .2v5.042h50v-7.042l-5 .2M56 16.283l5-.2v-5.041H11v7.041l5-.2"
+    d: "M16 55.748l-5 .2v5.042h50v-7.042l-5 .2m0-37.865l5-.2v-5.041H11v7.041l5-.2"
   }), /*#__PURE__*/React.createElement("g", {
     fill: "none",
     stroke: "#000",
@@ -40,10 +74,14 @@ function ScrollIcon({
     strokeMiterlimit: 10,
     strokeWidth: 2
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M16 55.748l-5 .2v5.042h50v-7.042l-5 .2M56 16.283l5-.2v-5.041H11v7.041l5-.2"
+    d: "M16 55.748l-5 .2v5.042h50v-7.042l-5 .2m0-37.865l5-.2v-5.041H11v7.041l5-.2"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M56 16.283l-21.374.855L16 17.883M16 55.748l40-1.6M16 22.002V50.06M56 22.002V50.06M20.852 24.903h11.009M20.852 30.151h31.167M20.852 35.4h31.167M20.852 40.648h31.167M20.852 45.896h31.167"
+    d: "M56 16.283l-21.374.855L16 17.883m0 37.865l40-1.6M16 22.002V50.06m40-28.058V50.06M20.852 24.903h11.009m-11.009 5.248h31.167M20.852 35.4h31.167m-31.167 5.248h31.167m-31.167 5.248h31.167"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(ScrollIcon);
 module.exports = ForwardRef;

package/data2/SharkIcon.d.ts

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