@datalayer/icons-react 1.0.7 → 1.0.9

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,
+  colormode,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "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 (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : 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, colormode?: 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,
+  colormode,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "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 (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : 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, colormode?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default WomanTechnologistIcon;

package/data2/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,
+  colormode,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "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 (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(WomanTechnologistIcon);
 module.exports = ForwardRef;

package/data2/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, colormode?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default WrappedGiftIcon;

package/data2/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,
+  colormode,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "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 (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(WrappedGiftIcon);
 module.exports = ForwardRef;

package/data2/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, colormode?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default WritingHandIcon;

package/data2/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,
+  colormode,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "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 (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(WritingHandIcon);
 module.exports = ForwardRef;

package/data2/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, colormode?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default YinYangIcon;

package/data2/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,
+  colormode,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "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 (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(YinYangIcon);
 module.exports = ForwardRef;

package/data2/esm/AlienMaskIcon.d.ts

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