@datalayer/icons-react 1.0.6 → 1.0.8

package/data2/esm/WomanTechnologistIcon.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 WomanTechnologistIcon({
   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 WomanTechnologistIcon({
     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: "#92D3F5",
@@ -37,14 +75,14 @@ function WomanTechnologistIcon({
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#9B9B9A",
     d: "M67.253 43.222l-6.95 16.35h-8.99l6.95-16.35h8.77z"
-  }), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     fill: "#A57939",
     d: "M40.404 47.087l1.643-3.865h16.282c2.094-4.752-4.327-5.14-4.327-5.14s.069-.166.081-.698c.035-1.553-.2-6.221-4.225-18.96-7.115-17.134-20.616-9.126-22.012-6.723-2.334-.86-3.306 0-5.244 5.687-1.414 5.354-4.183 16.175-3.97 20.361-.813-.428-7.473-.004-3.093 8.087a32.769 32.769 0 003.288 3.51c1.412-2.349 3.938-4.222 8.406-4.222 3.165 2.11 5.882 3.57 8.925 3.588 1.677-.01 2.93-.68 4.246-1.625z"
-  })), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     fill: "#FCEA2B",
     d: "M47.411 22.306c.222.677.405 1.38.546 2.103.22 1.13.336 2.311.336 3.526 0 8.212-5.325 14.868-11.894 14.868s-11.895-6.656-11.895-14.868c0-.482.018-.958.054-1.428l.051.384c2.02-.981 5.03-9.816 5.03-9.816s-.71 6.44 17.82 5.615"
-  })), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
-    d: "M42.019 26.867a2 2 0 11-4.002-.001 2 2 0 014.002.001M34.019 26.867a2 2 0 11-4.002-.001 2 2 0 014.002.001M36.018 36.87c-1.151 0-2.303-.286-3.447-.858a1 1 0 11.895-1.79c1.717.86 3.387.86 5.105 0a1 1 0 01.895 1.79c-1.144.572-2.296.858-3.448.858z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M42.019 26.867a2 2 0 11-4.002-.001 2 2 0 014.002.001m-8 0a2 2 0 11-4.002-.001 2 2 0 014.002.001m1.999 10.003c-1.151 0-2.303-.286-3.447-.858a1 1 0 11.895-1.79c1.717.86 3.387.86 5.105 0a1 1 0 01.895 1.79c-1.144.572-2.296.858-3.448.858z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M36.019 43.401c-6.804 0-12.34-6.806-12.34-15.173 0-.485.02-.964.055-1.437l1.994.152a16.92 16.92 0 00-.048 1.285c0 7.264 4.637 13.173 10.339 13.173 5.7 0 10.337-5.909 10.337-13.173 0-1.076-.101-2.142-.301-3.17-.124-.64-.29-1.273-.49-1.885l1.9-.623c.227.69.413 1.406.553 2.126.224 1.153.338 2.348.338 3.552 0 8.367-5.535 15.173-12.337 15.173z"
   }), /*#__PURE__*/React.createElement("path", {
@@ -52,7 +90,7 @@ function WomanTechnologistIcon({
   }), /*#__PURE__*/React.createElement("path", {
     d: "M24.733 27.867a.999.999 0 01-.437-1.9c.927-.45 2.964-4.903 4.285-8.78a1 1 0 011.94.432c.001 0-.016.686.808 1.51 1.222 1.219 4.821 3.197 15.139 2.735a1 1 0 11.09 1.998c-8.627.387-14.27-.78-16.78-3.462a4.896 4.896 0 01-.169-.188c-1.094 2.836-2.858 6.786-4.44 7.555a.992.992 0 01-.436.1z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M16.285 46.03c-.355 0-.7-.19-.88-.523-1.81-3.344-2.144-5.62-1.022-6.961.93-1.11 2.521-1.133 3.664-.968.179-3.4 1.56-9.954 4.193-19.921 1.37-4.027 2.255-5.569 3.529-6.176.718-.342 1.444-.302 2.082-.147 1.568-1.65 5.602-3.886 10.007-3.603 3.648.242 8.735 2.31 12.254 10.786 1.818 5.74 3.036 10.403 3.654 13.943.07.406.542 3.342.787 4.87.944.008 2.317.274 3.3 1.538a1 1 0 11-1.578 1.229c-.815-1.05-2.315-.725-2.33-.72a1 1 0 01-1.22-.813s-.834-5.211-.93-5.761c-.602-3.452-1.799-8.029-3.56-13.602-2.48-5.961-6.026-9.177-10.51-9.475-4.278-.278-8.102 2.316-8.655 3.267-.244.42-.755.601-1.21.436-.76-.28-1.048-.23-1.231-.142-.83.396-1.717 2.723-2.476 4.948-2.91 11.03-4.301 17.956-4.111 20.519a.997.997 0 01-1.311 1.023c-.913-.296-2.399-.445-2.816.054-.132.16-.695 1.134 1.25 4.723a1.002 1.002 0 01-.88 1.476z"
+    d: "M16.285 46.03a1 1 0 01-.88-.523c-1.81-3.344-2.144-5.62-1.022-6.961.93-1.11 2.521-1.133 3.664-.968.179-3.4 1.56-9.954 4.193-19.921 1.37-4.027 2.255-5.569 3.529-6.176.718-.342 1.444-.302 2.082-.147 1.568-1.65 5.602-3.886 10.007-3.603 3.648.242 8.735 2.31 12.254 10.786 1.818 5.74 3.036 10.403 3.654 13.943.07.406.542 3.342.787 4.87.944.008 2.317.274 3.3 1.538a1 1 0 11-1.578 1.229c-.815-1.05-2.315-.725-2.33-.72a1 1 0 01-1.22-.813s-.834-5.211-.93-5.761c-.602-3.452-1.799-8.029-3.56-13.602-2.48-5.961-6.026-9.177-10.51-9.475-4.278-.278-8.102 2.316-8.655 3.267-.244.42-.755.601-1.21.436-.76-.28-1.048-.23-1.231-.142-.83.396-1.717 2.723-2.476 4.948-2.91 11.03-4.301 17.956-4.111 20.519a.997.997 0 01-1.311 1.023c-.913-.296-2.399-.445-2.816.054-.132.16-.695 1.134 1.25 4.723a1.002 1.002 0 01-.88 1.476z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M16.867 58.719a.998.998 0 01-.986-.847c-.041-.27-.973-6.633 2.58-10.775 1.924-2.241 4.752-3.377 8.408-3.377a1 1 0 01.555.168c3.162 2.108 5.675 3.418 8.406 3.425h.04a1 1 0 011 .998.993.993 0 01-1.02 1.002h-.106c-.016 0-.03 0-.046-.002-3.1-.042-5.816-1.403-9.126-3.588-2.896.056-5.11.954-6.586 2.669-2.956 3.436-2.137 9.12-2.129 9.177a1 1 0 01-.99 1.15z"
   }), /*#__PURE__*/React.createElement("path", {
@@ -66,8 +104,12 @@ function WomanTechnologistIcon({
     strokeLinejoin: "round",
     strokeMiterlimit: 10,
     strokeWidth: 2,
-    d: "M35.097 59.572h24.99l6.95-16.35h-24.99zM24.127 59.572h10.97"
-  })));
+    d: "M35.097 59.572h24.99l6.95-16.35h-24.99zm-10.97 0h10.97"
+  }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(WomanTechnologistIcon);
 export default ForwardRef;

package/data2/esm/WrappedGiftIcon.d.ts

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

package/data2/esm/WrappedGiftIcon.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 WrappedGiftIcon({
   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 WrappedGiftIcon({
     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: "#D22F27",
@@ -51,10 +89,14 @@ function WrappedGiftIcon({
   }, /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    d: "M54.091 21.357H17.356M17.356 21.357H14V35.5h2.357v25.143h39.286V35.5H58V21.357h-3.909M16.357 35.5h40.072M50.961 18.25c.384-.98.492-2.393-.49-4.229-1.608-3.009-3.536-4.534-5.728-4.534-2.525 0-5.146 2.063-7.794 6.133a36.644 36.644 0 00-.95 1.545 36.02 36.02 0 00-.949-1.545c-2.647-4.07-5.269-6.133-7.793-6.133-2.193 0-4.12 1.525-5.73 4.534-.901 1.69-.883 3.021-.574 3.987"
+    d: "M54.091 21.357H17.356m0 0H14V35.5h2.357v25.143h39.286V35.5H58V21.357h-3.909M16.357 35.5h40.072m-5.468-17.25c.384-.98.492-2.393-.49-4.229-1.608-3.009-3.536-4.534-5.728-4.534-2.525 0-5.146 2.063-7.794 6.133a36.644 36.644 0 00-.95 1.545 36.02 36.02 0 00-.949-1.545c-2.647-4.07-5.269-6.133-7.793-6.133-2.193 0-4.12 1.525-5.73 4.534-.901 1.69-.883 3.021-.574 3.987"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M42.286 60V44.273M29.714 41.786V60M42.286 35V22M29.714 22v13M42.286 44.707V35.5l-12.572.02v7.354"
+    d: "M42.286 60V44.273m-12.572-2.487V60m12.572-25V22m-12.572 0v13m12.572 9.707V35.5l-12.572.02v7.354"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(WrappedGiftIcon);
 export default ForwardRef;

package/data2/esm/WritingHandIcon.d.ts

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

package/data2/esm/WritingHandIcon.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 WritingHandIcon({
   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,22 +54,25 @@ function WritingHandIcon({
     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", {
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    d: "M26.296 36.76L45.9 6.237l4.301 2.847-16.113 26.028M18.943 53.711l-3.391 4.824-5.812 4.338 2.008-7.065 3.804-5.537",
     fill: "#3F3F3F"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M26.296 36.76L45.9 6.237l4.301 2.847-16.113 26.028M18.943 53.711l-3.391 4.824-5.812 4.338 2.008-7.065 3.804-5.537"
-  })), /*#__PURE__*/React.createElement("g", {
+  }), /*#__PURE__*/React.createElement("g", {
     fill: "#FCEA2B"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M12.511 54.697c-1.182-1.345-2.334-3.046-2.244-4.012l2.688-18.46c0-.842.188-1.591 1.071-2.07l16.348-8.271c.52-.253-1.244-2.812 4.249-.458"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M20.542 40.496l.66-3.954c.066-.542.606-1.35.998-1.509l2.108-.844M21.943 53.139c2.377 7.027 10.894 6.74 5.042-2.169M23.427 51.97c4.874 8.567 15.571 8.711 6.307-4.299M28.121 49.28c13.31 17.748 14.103 4.407 5.07-1.306"
+    d: "M20.542 40.496l.66-3.954c.066-.542.606-1.35.998-1.509l2.108-.844m-2.365 18.95c2.377 7.027 10.894 6.74 5.042-2.169m-3.558 1c4.874 8.567 15.571 8.711 6.307-4.299m-1.613 1.609c13.31 17.748 14.103 4.407 5.07-1.306"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M56.797 52.239c-13.047 2.788-14.96-3.412-21.214-4.352-5.087-1.055-10.79 2.25-12.74 3.86-4.443 4.284-10.263-1.57-4.764-5.688l7.255-6.73 8.267-3.937 7.814-10.37 18.639 10.011c5.653 5.653 5.653 14.82 0 20.472-4.527.495-12.548 4.18-23.554 2.668"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M38.132 42.874H16.516l8.62-7.394.927 1.101 8.025-1.469 6.633-11.578 3.567 1.9zM32.059 45.907H53.54v11.268H32.059z"
+    d: "M38.132 42.874H16.516l8.62-7.394.927 1.101 8.025-1.469 6.633-11.578 3.567 1.9zm-6.073 3.033H53.54v11.268H32.059z"
   })), /*#__PURE__*/React.createElement("g", {
     fill: "none",
     stroke: "#000",
@@ -47,13 +84,17 @@ function WritingHandIcon({
     d: "M10.632 52.621l2.324-20.396c0-.842.187-1.591 1.07-2.07l17.179-8.72"
   }), /*#__PURE__*/React.createElement("path", {
     strokeMiterlimit: 10,
-    d: "M19.542 39.496l.66-3.954c.066-.542.606-1.35.998-1.509l2.108-.844M26.063 35.788L45.9 6.237l4.301 2.847-16.47 25.105M15.552 56.775l-2.036 2.764-4.776 5.334L11.494 58l2.04-3.039M43.704 26.252s12.626 6.014 16.35 8.781c6.417 4.77 5.653 14.82 0 20.472-4.527.495-8.148 2.034-18.217 2.034"
+    d: "M19.542 39.496l.66-3.954c.066-.542.606-1.35.998-1.509l2.108-.844m2.755 2.599L45.9 6.237l4.301 2.847-16.47 25.105M15.552 56.775l-2.036 2.764-4.776 5.334L11.494 58l2.04-3.039m30.17-28.709s12.626 6.014 16.35 8.781c6.417 4.77 5.653 14.82 0 20.472-4.527.495-8.148 2.034-18.217 2.034"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M29.078 55.939c.607 3.229-4.422 4.787-5.094.133M34.011 55.79c.639 3.215-4.287 4.133-4.933.149M39.05 55.395c.66 3.216-4.363 3.651-5.039.396"
+    d: "M29.078 55.939c.607 3.229-4.422 4.787-5.094.133m10.027-.282c.639 3.215-4.287 4.133-4.933.149m9.972-.544c.66 3.216-4.363 3.651-5.039.396"
   }), /*#__PURE__*/React.createElement("path", {
     strokeMiterlimit: 10,
-    d: "M39.05 55.395l-.594-2.782M34.011 55.791l-1.002-4.557M29.078 55.939l-.623-3.077M23.984 56.072l-.093-.677M56.797 52.239c-13.047 2.788-14.96-3.412-21.214-4.352-5.087-1.055-10.79 2.25-12.74 3.86-4.443 4.284-10.263-1.57-4.764-5.688 0 0 5.009-4.692 7.255-5.73 2.183-1.007 9.551-2.124 9.551-2.124"
+    d: "M39.05 55.395l-.594-2.782m-4.445 3.178l-1.002-4.557m-3.931 4.705l-.623-3.077m-4.471 3.21l-.093-.677m32.906-3.156c-13.047 2.788-14.96-3.412-21.214-4.352-5.087-1.055-10.79 2.25-12.74 3.86-4.443 4.284-10.263-1.57-4.764-5.688 0 0 5.009-4.692 7.255-5.73 2.183-1.007 9.551-2.124 9.551-2.124"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(WritingHandIcon);
 export default ForwardRef;

package/data2/esm/YinYangIcon.d.ts

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

package/data2/esm/YinYangIcon.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 YinYangIcon({
   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 YinYangIcon({
     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("circle", {
     cx: 36,
@@ -29,25 +67,17 @@ function YinYangIcon({
     fill: "#FFF"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#3F3F3F",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeMiterlimit: 10,
-    strokeWidth: 2,
     d: "M10.883 36.883c0 13.614 10.826 24.69 24.338 25.092-6.58-.402-11.78-5.865-11.78-12.533 0-6.933 5.614-12.559 12.559-12.559 6.932 0 12.558-5.626 12.558-12.558 0-6.668-5.211-12.131-11.792-12.533-.251-.013-.502-.025-.766-.025s-.527 0-.779.025c-13.512.402-24.338 11.478-24.338 25.091z"
   }), /*#__PURE__*/React.createElement("circle", {
     cx: 37.344,
     cy: 48.939,
     r: 4.019,
-    fill: "#3F3F3F",
-    strokeMiterlimit: 10,
-    strokeWidth: 2
+    fill: "#3F3F3F"
   }), /*#__PURE__*/React.createElement("circle", {
     cx: 37.344,
     cy: 23.823,
     r: 4.019,
-    fill: "#FFF",
-    strokeMiterlimit: 10,
-    strokeWidth: 2
+    fill: "#FFF"
   }), /*#__PURE__*/React.createElement("g", {
     fill: "none",
     stroke: "#000",
@@ -70,6 +100,10 @@ function YinYangIcon({
     cy: 23.823,
     r: 4.019
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(YinYangIcon);
 export default ForwardRef;

package/data2/esm/package.json

@@ -1,4 +1,7 @@
 {
   "type": "module",
-  "sideEffects": false
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": "*"
+  }
 }

package/eggs/AcDcIcon.d.ts

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

package/eggs/AcDcIcon.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 AcDcIcon({
   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: "52.5 5.5 497 497",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
-    "aria-hidden": "true",
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    d: "M158.704 298.322l-26.03 26.03-25.826-26.03 11.591-11.592v-23.793H93.426v23.793l11.592 11.592-26.03 26.03-25.827-26.03 11.591-11.592V181.797l42.91-42.502 39.45 39.451V286.73zm-40.265-65.279V195.83l-25.013-25.014v62.228zM248.993 180.983l-21.76 21.353-30.91-31.52v106.763l7.524 7.321 23.387-23.59 20.946 20.54-42.706 42.502-37.825-37.622V178.746l39.859-39.655zM345.181 225.52l-75.04 104.526 26.234-75.65H270.14l34.165-78.497h32.334l-18.302 49.62zM446.86 290.39l-33.555 33.96H374.87l-22.571-23.183 12.201-11.998v-114.49l-12.405-12.405 22.775-22.776h38.436l33.555 33.961zm-28.674-16.268v-84.394l-25.014-24.2v132.794zM548.742 180.983l-21.758 21.353-30.91-31.52v106.763l7.524 7.321 23.386-23.59 20.946 20.54-42.705 42.502L467.4 286.73V178.746l39.859-39.655z"
+    d: "M158.704 298.322l-26.03 26.03-25.826-26.03 11.591-11.592v-23.793H93.426v23.793l11.592 11.592-26.03 26.03-25.827-26.03 11.591-11.592V181.797l42.91-42.502 39.45 39.451V286.73zm-40.265-65.279V195.83l-25.013-25.014v62.228zm130.554-52.06l-21.76 21.353-30.91-31.52v106.763l7.524 7.321 23.387-23.59 20.946 20.54-42.706 42.502-37.825-37.622V178.746l39.859-39.655zm96.188 44.537l-75.04 104.526 26.234-75.65H270.14l34.165-78.497h32.334l-18.302 49.62zm101.679 64.87l-33.555 33.96H374.87l-22.571-23.183 12.201-11.998v-114.49l-12.405-12.405 22.775-22.776h38.436l33.555 33.961zm-28.674-16.268v-84.394l-25.014-24.2v132.794zm130.556-93.139l-21.758 21.353-30.91-31.52v106.763l7.524 7.321 23.386-23.59 20.946 20.54-42.705 42.502L467.4 286.73V178.746l39.859-39.655z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(AcDcIcon);
 module.exports = ForwardRef;

package/eggs/AcDcRedNoopIcon.d.ts

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

package/eggs/AcDcRedNoopIcon.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 AcDcRedNoopIcon({
   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 258.667 258.667",
     fill: "currentColor",
@@ -20,7 +54,11 @@ function AcDcRedNoopIcon({
     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", {
     fillRule: "evenodd"
@@ -29,7 +67,7 @@ function AcDcRedNoopIcon({
     d: "M.346.903h257.009V257.91H.346V.903"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#e22739",
-    d: "M93.913 90.217L77.43 106.612v46.434l15.64 15.55 17.332-17.33-7.83-7.67-10.242 10.243-4.2-4.08v-49.1l14.445 14.645 8.206-8.043-16.868-17.044M130.756 127.628l7.99-21.712h-12.218l-14.16 32.505h11.358l-9.842 28.32 28.064-39.113h-11.192M185.483 104.35l-14.14-14.32H155.27l-8.974 9.06 4.987 4.989v50.748l-4.901 4.902 8.896 9.239h16.064l14.14-14.32zm-23.499 56.267V98.395l12.799 12.252v37.61l-12.799 12.36M69.335 153.793v-47.184l-16.3-16.301-17.804 17.713v45.772l-4.704 4.705 10.011 10.094 10.096-10.096-4.702-4.703v-11.707h12.703v11.707l-4.705 4.705 10.012 10.094 10.096-10.096zm-23.403-22.877V100.68l12.703 12.703v17.533H45.932"
+    d: "M93.913 90.217L77.43 106.612v46.434l15.64 15.55 17.332-17.33-7.83-7.67-10.242 10.243-4.2-4.08v-49.1l14.445 14.645 8.206-8.043-16.868-17.044m36.843 37.411l7.99-21.712h-12.218l-14.16 32.505h11.358l-9.842 28.32 28.064-39.113h-11.192m54.727-23.278l-14.14-14.32H155.27l-8.974 9.06 4.987 4.989v50.748l-4.901 4.902 8.896 9.239h16.064l14.14-14.32zm-23.499 56.267V98.395l12.799 12.252v37.61l-12.799 12.36m-92.649-6.824v-47.184l-16.3-16.301-17.804 17.713v45.772l-4.704 4.705 10.011 10.094 10.096-10.096-4.702-4.703v-11.707h12.703v11.707l-4.705 4.705 10.012 10.094 10.096-10.096zm-23.403-22.877V100.68l12.703 12.703v17.533H45.932"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#fde6b8",
     d: "M55.934 128.216l2.701 2.7H45.932l2.701-2.7h7.3"
@@ -65,7 +103,7 @@ function AcDcRedNoopIcon({
     d: "M26.715 158.49l3.812.008 4.704-4.705-2.7-1.118-5.816 5.816"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#f89f76",
-    d: "M32.53 152.675l2.701 1.118V108.02l-2.7-1.122v45.776M69.335 153.793l2.701-1.118v-47.183l-2.701 1.117v47.184M164.685 154.253l-2.701 6.364 12.799-12.36-2.702-1.147-7.396 7.143"
+    d: "M32.53 152.675l2.701 1.118V108.02l-2.7-1.122v45.776m36.804 1.119l2.701-1.118v-47.183l-2.701 1.117v47.184m95.35.46l-2.701 6.364 12.799-12.36-2.702-1.147-7.396 7.143"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#f89f76",
     d: "M172.081 147.11l2.702 1.147v-37.61l-2.702 1.153v35.31"
@@ -74,7 +112,7 @@ function AcDcRedNoopIcon({
     d: "M172.081 111.8l2.702-1.153-12.799-12.252 2.701 6.325 7.396 7.08"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#f89f76",
-    d: "M164.685 154.253l-2.701 6.364V98.395l2.701 6.325v49.533M188.183 155.757l-2.7-1.11v-50.296l2.7-1.11v52.516"
+    d: "M164.685 154.253l-2.701 6.364V98.395l2.701 6.325v49.533m23.498 1.504l-2.7-1.11v-50.296l2.7-1.11v52.516"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#ed1b29",
     d: "M172.472 171.67l-1.13-2.702 14.14-14.32 2.7 1.11-15.71 15.911"
@@ -98,7 +136,7 @@ function AcDcRedNoopIcon({
     d: "M142.485 99.1l3.812-.01 8.974-9.06-1.126-2.7-11.66 11.77"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#fde6b8",
-    d: "M172.472 87.33l-1.13 2.7h-16.071l-1.126-2.7h18.327M188.183 103.241l-2.7 1.11-14.14-14.32 1.129-2.7 15.71 15.91M147.092 124.927l-5.144 2.7h-11.192l3.872-2.7h12.464"
+    d: "M172.472 87.33l-1.13 2.7h-16.071l-1.126-2.7h18.327m15.711 15.911l-2.7 1.11-14.14-14.32 1.129-2.7 15.71 15.91m-41.09 21.686l-5.144 2.7h-11.192l3.872-2.7h12.464"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#6e3407",
     d: "M119.928 141.122l3.798-2.7h-11.358l-4.123 2.7h11.683"
@@ -137,7 +175,7 @@ function AcDcRedNoopIcon({
     d: "M93.075 172.411l-.005-3.814-15.64-15.551-2.7 1.123 18.345 18.242"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#f89f76",
-    d: "M74.73 154.169l2.7-1.123v-46.434l-2.7-1.124v48.68M93.928 86.393l-.015 3.824-16.483 16.395-2.7-1.124 19.198-19.095"
+    d: "M74.73 154.169l2.7-1.123v-46.434l-2.7-1.124v48.68m19.198-67.775l-.015 3.824-16.483 16.395-2.7-1.124 19.198-19.095"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#e22739",
     d: "M210.288 90.217l-16.483 16.395v46.434l15.642 15.55 17.332-17.33-7.831-7.67-10.243 10.243-4.2-4.08v-49.1l14.447 14.645 8.205-8.043-16.869-17.044"
@@ -170,7 +208,7 @@ function AcDcRedNoopIcon({
     d: "M209.45 172.411l-.003-3.814-15.642-15.551-2.7 1.123 18.346 18.242"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#f89f76",
-    d: "M191.105 154.169l2.7-1.123v-46.434l-2.7-1.124v48.68M210.304 86.393l-.016 3.824-16.483 16.395-2.7-1.124 19.199-19.095M35.231 108.021l-2.7-1.122 20.508-20.404-.005 3.813-17.803 17.713"
+    d: "M191.105 154.169l2.7-1.123v-46.434l-2.7-1.124v48.68m19.199-67.775l-.016 3.824-16.483 16.395-2.7-1.124 19.199-19.095M35.231 108.021l-2.7-1.122 20.508-20.404-.005 3.813-17.803 17.713"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#fde6b8",
     d: "M69.335 106.61l2.701-1.118L53.04 86.495l-.005 3.813 16.3 16.301"
@@ -179,7 +217,7 @@ function AcDcRedNoopIcon({
     d: "M113.884 166.74l1.064 3.15 32.144-44.963-5.144 2.7-28.064 39.113"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#f89f76",
-    d: "M113.884 166.74l-3.955 3.15 9.999-28.768 3.798-2.7-9.842 28.318M112.368 138.421l-4.123 2.701 16.513-37.907 1.77 2.701-14.16 32.505"
+    d: "M113.884 166.74l-3.955 3.15 9.999-28.768 3.798-2.7-9.842 28.318m-1.516-28.319l-4.123 2.701 16.513-37.907 1.77 2.701-14.16 32.505"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#6e3407",
     d: "M109.93 169.89h5.018l-1.064-3.15z"
@@ -196,6 +234,10 @@ function AcDcRedNoopIcon({
     fill: "#ed1b29",
     d: "M40.538 168.592l-.008 3.828 11.75-11.75v-2.172l-1.646-.002-10.096 10.096"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(AcDcRedNoopIcon);
 module.exports = ForwardRef;