@datalayer/icons-react 1.0.6 → 1.0.8

package/data2/WebRtcIcon.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 WebRtcIcon({
   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: "none",
     "aria-hidden": "true",
@@ -20,7 +54,11 @@ function WebRtcIcon({
     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: "#F60",
@@ -56,6 +94,10 @@ function WebRtcIcon({
     fill: "#fff",
     d: "M5.94 14.537h-.704c-.621 0-1.127-.492-1.127-1.097V7.218c0-.606.506-1.098 1.127-1.098h8.826c.621 0 1.126.492 1.126 1.098v6.222c0 .605-.505 1.097-1.126 1.097h-3.007l-6.032 2.888.917-2.888z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(WebRtcIcon);
 module.exports = ForwardRef;

package/data2/WhaleSpoutingIcon.d.ts

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

package/data2/WhaleSpoutingIcon.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 WhaleSpoutingIcon({
   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 WhaleSpoutingIcon({
     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",
@@ -31,7 +69,6 @@ function WhaleSpoutingIcon({
     d: "M22.3 44.828c.621 2.675 1.87 5.243 3.527 7.752.906 1.371 2.583.787 2.977-.809.34-.88.542-1.899.633-2.959"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#61b2e4",
-    strokeMiterlimit: 10,
     d: "M46.638 14.502c-.694.206-.997 3.416-.95 4.523.132 3.044 5.278 3.092 2.848 6.4-10.496 11.84-26.393-3.784-34.527 3.661C12.765 40.522 30.867 56.536 45 47c8.206-5.537 10.46-14.795 11.082-20.096.441-1.146 1.465-1.403 3.284-1.898 5.193-1.46 4.904-4.3 4.953-8.127-2.359 2.857-4.907 1.8-6.823 1.728-1.106-.004-2.181 1.244-2.857 1.795-.09-.63-.226-1.476-.832-2.178-1.505-1.744-4.947-.76-6.4-2.877-.232-.535-.44-.792-.623-.845a.252.252 0 00-.145 0z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#d0cfce",
@@ -45,17 +82,20 @@ function WhaleSpoutingIcon({
     strokeWidth: 2,
     color: "#000"
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M19.455 13.84a3.965 3.965 0 00-1.81.252c-1.172.452-2.235 1.38-3.231 2.69a1 1 0 101.592 1.208c.848-1.115 1.687-1.773 2.36-2.033.672-.26 1.146-.211 1.704.158 1.117.74 2.432 3.329 2.852 8a1 1 0 101.992-.177c-.445-4.944-1.64-8.1-3.738-9.49a3.767 3.767 0 00-1.721-.607zM31.482 12.607a4.3 4.3 0 00-1.738.229c-2.288.798-3.91 3.46-4.098 7.806a1 1 0 101.998.086c.168-3.897 1.521-5.571 2.76-6.004 1.239-.432 2.798.19 3.904 1.986a1 1 0 101.703-1.048c-1.095-1.78-2.787-2.928-4.529-3.054zM23.621 9.898a1 1 0 00-.938 1.309c.235.76.48 1.328.524 2.291a1 1 0 101.998-.092c-.06-1.28-.417-2.158-.611-2.789a1 1 0 00-.973-.718zM47.197 39.408a1 1 0 00-.453.102c-1.869.878-3.898 1.231-5.961 1.166a1 1 0 10-.063 2c2.335.074 4.69-.33 6.875-1.358a1 1 0 00-.398-1.91z"
+    d: "M19.455 13.84a3.965 3.965 0 00-1.81.252c-1.172.452-2.235 1.38-3.231 2.69a1 1 0 101.592 1.208c.848-1.115 1.687-1.773 2.36-2.033.672-.26 1.146-.211 1.704.158 1.117.74 2.432 3.329 2.852 8a1 1 0 101.992-.177c-.445-4.944-1.64-8.1-3.738-9.49a3.767 3.767 0 00-1.721-.607zm12.027-1.233a4.3 4.3 0 00-1.738.229c-2.288.798-3.91 3.46-4.098 7.806a1 1 0 101.998.086c.168-3.897 1.521-5.571 2.76-6.004 1.239-.432 2.798.19 3.904 1.986a1 1 0 101.703-1.048c-1.095-1.78-2.787-2.928-4.529-3.054zm-7.861-2.709a1 1 0 00-.938 1.309c.235.76.48 1.328.524 2.291a1 1 0 101.998-.092c-.06-1.28-.417-2.158-.611-2.789a1 1 0 00-.973-.718zm23.576 29.51a1 1 0 00-.453.102c-1.869.878-3.898 1.231-5.961 1.166a1 1 0 10-.063 2c2.335.074 4.69-.33 6.875-1.358a1 1 0 00-.398-1.91z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M35.881 39.812a1 1 0 00-.986 1.107c.55 5.926 3.774 10.351 8.386 13.94.924.718 2.183.746 3.012.158.82-.582 1.232-1.608 1.152-2.711.085-2.4-.605-5.13-1.738-7.38-.573-1.135-1.258-2.146-2.066-2.917-.809-.772-1.785-1.332-2.89-1.334a1 1 0 10-.005 2c.415 0 .938.23 1.514.78.576.549 1.163 1.388 1.66 2.374.994 1.972 1.621 4.536 1.537 6.479a1 1 0 00.002.127c.044.518-.164.839-.324.953s-.252.185-.625-.106c-4.35-3.384-7.13-7.236-7.623-12.548a1 1 0 00-1.006-.922z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M18.742 29.598c-1.31-.161-2.647.13-3.693.857s-1.775 2.066-1.465 3.526a1 1 0 101.957-.416c-.147-.69.085-1.075.648-1.467.563-.392 1.483-.617 2.309-.516 1.191.147 3.21 1.326 5.28 2.854s4.24 3.35 6.202 4.656a22.217 22.217 0 005.559 2.672 1 1 0 10.605-1.906 20.253 20.253 0 01-5.054-2.43c-1.812-1.205-3.986-3.02-6.125-4.6s-4.191-2.98-6.223-3.23z"
   }), /*#__PURE__*/React.createElement("path", {
-    strokeMiterlimit: 10,
     d: "M47.088 13.537a1.3 1.3 0 00-.709.002 1 1 0 00-.566.436c-.055.063-.178.107-.22.167-.147.217-.239.43-.32.653-.16.447-.267.946-.351 1.467-.168 1.04-.237 2.116-.207 2.802.045 1.042.554 1.876 1.117 2.465.564.59 1.183 1.003 1.637 1.37.454.365.681.655.726.82.044.158.033.433-.423 1.072-2.458 2.752-5.114 3.86-7.993 4.154-2.894.296-6.015-.279-9.136-1.02-3.122-.74-6.23-1.643-9.176-1.888-2.947-.245-5.828.218-8.11 2.307a1 1 0 00-.318.628c-.533 4.896 2.093 10.255 6.252 14.473s9.927 7.332 16.002 7.454a1 1 0 10.04-2c-5.412-.107-10.767-2.95-14.619-6.856-3.716-3.77-5.902-8.477-5.664-12.406 1.723-1.406 3.753-1.814 6.25-1.606 2.65.22 5.697 1.089 8.88 1.844 3.18.755 6.51 1.4 9.804 1.062 3.293-.337 6.544-1.716 9.324-4.851a1 1 0 00.059-.07c.707-.964.996-1.956.755-2.827-.24-.87-.853-1.405-1.398-1.845-.545-.44-1.085-.815-1.447-1.194-.363-.379-.544-.692-.565-1.172-.018-.42.04-1.503.184-2.396.024-.15.06-.234.088-.371.979 1.078 2.314 1.477 3.437 1.693 1.255.241 2.207.454 2.653.97.395.458.51 1.052.597 1.667a1 1 0 001.623.633c.424-.346.83-.768 1.246-1.09.416-.322.794-.478.971-.479.79.034 1.96.328 3.324.23.783-.055 1.619-.353 2.448-.831-.046.948-.138 1.795-.409 2.431-.459 1.08-1.326 1.923-3.756 2.606-.901.245-1.651.43-2.335.773-.687.344-1.307.937-1.612 1.729a1 1 0 00-.058.242c-.504 4.29-2.123 11.218-7.155 16.445a1 1 0 101.442 1.387c5.413-5.625 7.105-12.838 7.662-17.381.13-.325.24-.445.615-.633.39-.195 1.062-.388 1.975-.637a1 1 0 00.007-.002c2.764-.777 4.348-2.084 5.055-3.746.707-1.662.603-3.445.627-5.33a1 1 0 00-1.771-.649c-1.029 1.246-1.91 1.533-2.877 1.602-.967.07-2.013-.194-3.137-.236a1 1 0 00-.033-.002c-.93-.004-1.64.462-2.205.9-.064.05-.084.077-.145.127-.15-.356-.288-.717-.586-1.062-1.06-1.229-2.583-1.396-3.789-1.627-1.196-.23-2.05-.468-2.53-1.15-.236-.555-.442-1.037-1.18-1.253z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M22.281 43.816a1 1 0 00-.928 1.238c.656 2.826 1.963 5.498 3.666 8.077.646.976 1.828 1.407 2.803 1.115.96-.288 1.68-1.125 1.959-2.192.369-.98.585-2.053.68-3.156a1 1 0 10-1.994-.172c-.085.99-.274 1.921-.569 2.684a1 1 0 00-.039.12c-.125.506-.423.743-.611.8s-.298.093-.559-.301c-1.612-2.44-2.802-4.903-3.388-7.428a1 1 0 00-1.02-.785z"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(WhaleSpoutingIcon);
 module.exports = ForwardRef;

package/data2/WheelIcon.d.ts

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

package/data2/WheelIcon.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 WheelIcon({
   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 WheelIcon({
     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: "#3f3f3f"
@@ -43,7 +81,7 @@ function WheelIcon({
     r: 21.298
   }), /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
-    d: "M21.032 50.968l10.191-10.191M41.478 56.446l-3.729-13.92M56.446 41.478l-13.92-3.729M50.968 21.032L40.777 31.223M30.521 15.554l3.731 13.921M15.554 30.521l13.919 3.73"
+    d: "M21.032 50.968l10.191-10.191m10.255 15.669l-3.729-13.92m18.697-1.048l-13.92-3.729m8.442-16.717L40.777 31.223M30.521 15.554l3.731 13.921m-18.698 1.046l13.919 3.73"
   }), /*#__PURE__*/React.createElement("circle", {
     cx: 36,
     cy: 36,
@@ -53,6 +91,10 @@ function WheelIcon({
     cy: 36,
     r: 3
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(WheelIcon);
 module.exports = ForwardRef;

package/data2/WheelOfDharmaGreyIcon.d.ts

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

package/data2/WheelOfDharmaGreyIcon.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 WheelOfDharmaGreyIcon({
   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 WheelOfDharmaGreyIcon({
     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: "#d0cfce",
@@ -35,14 +73,18 @@ function WheelOfDharmaGreyIcon({
     d: "M51.01 35.99a15 15 0 11-15-15 15 15 0 0115 15z"
   }), /*#__PURE__*/React.createElement("path", {
     strokeWidth: 3,
-    d: "M41 36a5 5 0 11-5-5.001A5.001 5.001 0 0141 36zM36 31V19M36 53V41"
+    d: "M41 36a5 5 0 11-5-5.001A5.001 5.001 0 0141 36zm-5-5V19m0 34V41"
   }), /*#__PURE__*/React.createElement("path", {
     strokeWidth: 2,
     d: "M12 12h48v48H12z"
   }), /*#__PURE__*/React.createElement("path", {
     strokeWidth: 3,
-    d: "M41 36h12M19 36h12M39.54 32.46l8.48-8.48M23.98 48.02l8.48-8.48M32.46 32.46l-8.48-8.48M48.02 48.02l-8.48-8.48"
+    d: "M41 36h12m-34 0h12m8.54-3.54l8.48-8.48M23.98 48.02l8.48-8.48m0-7.08l-8.48-8.48m24.04 24.04l-8.48-8.48"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(WheelOfDharmaGreyIcon);
 module.exports = ForwardRef;

package/data2/WheelOfDharmaIcon.d.ts

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

package/data2/WheelOfDharmaIcon.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 WheelOfDharmaIcon({
   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 WheelOfDharmaIcon({
     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: "#b399c8",
@@ -35,14 +73,18 @@ function WheelOfDharmaIcon({
     d: "M51.01 35.99a15 15 0 11-15-15 15 15 0 0115 15z"
   }), /*#__PURE__*/React.createElement("path", {
     strokeWidth: 3,
-    d: "M41 36a5 5 0 11-5-5.001A5.001 5.001 0 0141 36zM36 31V19M36 53V41"
+    d: "M41 36a5 5 0 11-5-5.001A5.001 5.001 0 0141 36zm-5-5V19m0 34V41"
   }), /*#__PURE__*/React.createElement("path", {
     strokeWidth: 2,
     d: "M12 12h48v48H12z"
   }), /*#__PURE__*/React.createElement("path", {
     strokeWidth: 3,
-    d: "M41 36h12M19 36h12M39.54 32.46l8.48-8.48M23.98 48.02l8.48-8.48M32.46 32.46l-8.48-8.48M48.02 48.02l-8.48-8.48"
+    d: "M41 36h12m-34 0h12m8.54-3.54l8.48-8.48M23.98 48.02l8.48-8.48m0-7.08l-8.48-8.48m24.04 24.04l-8.48-8.48"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(WheelOfDharmaIcon);
 module.exports = ForwardRef;

package/data2/WifiIcon.d.ts

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

package/data2/WifiIcon.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 WifiIcon({
   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: "none",
     stroke: "currentColor",
@@ -20,16 +54,24 @@ function WifiIcon({
     strokeLinejoin: "round",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     strokeWidth: 2,
-    className: "feather feather-wifi",
+    className: "prefix__feather prefix__feather-wifi",
     viewBox: "0 0 24 24",
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
     d: "M5 12.55a11 11 0 0114.08 0M1.42 9a16 16 0 0121.16 0M8.53 16.11a6 6 0 016.95 0M12 20h.01"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(WifiIcon);
 module.exports = ForwardRef;

package/data2/WifiIcon.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-wifi" viewBox="0 0 24 24" aria-hidden="true">
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
   <path d="M5 12.55a11 11 0 0114.08 0M1.42 9a16 16 0 0121.16 0M8.53 16.11a6 6 0 016.95 0M12 20h.01"/>
 </svg>

package/data2/WikidataIcon.d.ts

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

package/data2/WikidataIcon.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 WikidataIcon({
   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,35 +54,43 @@ function WikidataIcon({
     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", {
-    d: "M8 20h3.027v32H8zM12.541 20h6.054v32h-6.054zM20.108 20h6.054v32h-6.054zM36.757 20h6.054v32h-6.054zM48.865 20h6.054v32h-6.054zM27.676 20h3.027v32h-3.027zM32.216 20h3.027v32h-3.027zM44.324 20h3.027v32h-3.027zM56.432 20h3.027v32h-3.027zM60.973 20H64v32h-3.027z"
-  }), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+    d: "M8 20h3.027v32H8zm4.541 0h6.054v32h-6.054zm7.567 0h6.054v32h-6.054zm16.649 0h6.054v32h-6.054zm12.108 0h6.054v32h-6.054zm-21.189 0h3.027v32h-3.027zm4.54 0h3.027v32h-3.027zm12.108 0h3.027v32h-3.027zm12.108 0h3.027v32h-3.027zm4.541 0H64v32h-3.027z"
+  }), /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     d: "M5 17h62v38H5z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#D22F27",
-    d: "M8 20h3.027v32H8zM12.541 20h6.054v32h-6.054zM20.108 20h6.054v32h-6.054z"
+    d: "M8 20h3.027v32H8zm4.541 0h6.054v32h-6.054zm7.567 0h6.054v32h-6.054z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#61B2E4",
-    d: "M36.757 20h6.054v32h-6.054zM48.865 20h6.054v32h-6.054z"
+    d: "M36.757 20h6.054v32h-6.054zm12.108 0h6.054v32h-6.054z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#5C9E31",
-    d: "M27.676 20h3.027v32h-3.027zM32.216 20h3.027v32h-3.027z"
+    d: "M27.676 20h3.027v32h-3.027zm4.54 0h3.027v32h-3.027z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#61B2E4",
     d: "M44.324 20h3.027v32h-3.027z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#5C9E31",
-    d: "M56.432 20h3.027v32h-3.027zM60.973 20H64v32h-3.027z"
-  })), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+    d: "M56.432 20h3.027v32h-3.027zm4.541 0H64v32h-3.027z"
+  }), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "#000",
     strokeLinejoin: "round",
     strokeWidth: 2,
     d: "M5 17h62v38H5z"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(WikidataIcon);
 module.exports = ForwardRef;

package/data2/WomanTechnologistIcon.d.ts

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