@datalayer/icons-react 1.0.6 → 1.0.8

package/data2/esm/GremlinIcon.js

@@ -6,96 +6,138 @@ 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 GremlinIcon({
   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",
-    id: "Icons",
+    id: "prefix__Icons",
     viewBox: "0 0 80 80",
     fill: "currentColor",
     "aria-hidden": "true",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     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("defs", null, /*#__PURE__*/React.createElement("style", null, "\n      .cls-1{fill:#007315}.cls-2{fill:#f8ed30}.cls-4{fill:#67c166}.cls-5{fill:#fff}\n    ")), /*#__PURE__*/React.createElement("path", {
+  }, title) : null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("style", null, ".prefix__cls-1{fill:#007315}.prefix__cls-2{fill:#f8ed30}.prefix__cls-4{fill:#67c166}.prefix__cls-5{fill:#fff}")), /*#__PURE__*/React.createElement("path", {
     d: "M28.47 14.8A30.26 30.26 0 0128 8.23s5.52 1.49 7.11 3.87v2.69l.16 3-1.73-1.09-3.19-1.29z",
-    className: "cls-1"
+    className: "prefix__cls-1"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M30 15.25a20.49 20.49 0 01-.59-5s4.71 1.36 5.66 3.46l.29 3.92-.18.09-2.56-1.43z",
-    className: "cls-2"
+    className: "prefix__cls-2"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M55.56 12.76a8.5 8.5 0 015.73-3.15s.61 4.26-.54 6.32l-3.24.91L55.07 18l-.41.31.09-2.82z",
-    className: "cls-1"
+    className: "prefix__cls-1"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M54.67 15.63a7.11 7.11 0 015.17-4s.23 3.83-.61 4.64l-3.17 1.25-1.4.78z",
-    className: "cls-2"
+    className: "prefix__cls-2"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#a8e54d",
     d: "M52.74 78.47a5 5 0 01-1.94-.35c-1.75-.74-1.59-1.86-1.14-3.94.39-1.78.83-3.79-.65-5.63-1.28-1.58-4.77-2.49-9.58-2.49a25.44 25.44 0 00-4.88.4c-2 .45-2.36.75-2.65 1.71a3.79 3.79 0 01-.38.91c-1.1 1.92-2.76 3.63-7.52 3.83h-.14c-2.25 0-4.59-2.2-5.74-3.44a6.06 6.06 0 01-5.7 4 9.1 9.1 0 01-2.49-.38 3.26 3.26 0 01-2.24-2.34 7.42 7.42 0 011.17-6.15c4-4.68 7.72-5.37 9.59-5.37a5.81 5.81 0 013 .72c1.91 1.15.93 3.29.34 4.57a7.24 7.24 0 00-.37.9h.14a2.94 2.94 0 00.9-.2c1.27-1.3 3.76-4.47 3.48-6.13-.2-1.2 1.12-2.52 3.94-3.92 2.66-1.33 3.31-6.86 3.38-7.49v-.66l-6.74-.26-.82.47.78.58c.12.09 2.95 2.23 1.91 5.08a6 6 0 01-5.87 3.82 8 8 0 01-1.94-.24A6.31 6.31 0 0116.35 53c-.92-2.05-.67-4.54.72-7.2 1.3-2.49 3.75-3.75 7.27-3.75a17.17 17.17 0 014.71.7l3.14 1-.19-.41.3-.21a19.49 19.49 0 01-6.3-5.78 10.65 10.65 0 01-2.2-6.53l-1 .47a3.43 3.43 0 01-1.87.53c-4.47 0-9.84-7.1-11.37-9.28a17.14 17.14 0 01-3.15-8.74v-.63h3.63c17.24 0 24 4.27 24.81 4.82l1.27.5-.13-.8a25 25 0 01.25-11.79l.39-1.32 5 8.2.12-1.93c.2-3.1 5.28-7.07 7.45-8.63l1.19-.86-.24 1.45a84.21 84.21 0 00-.79 9.76v1.44l1.06-1a6.4 6.4 0 014.21-1.2h1.07l-.41.86A16.17 16.17 0 0054 18.3v1.16l1-.63c5.26-3.4 15.23-3.77 19.27-3.77h2.26l-.31.81C69.24 34 59.88 34.38 59.78 34.38h-1l.43.87c.24.47.83 2.25-1.62 5-2 2.3-8.4 5-8.46 5.07l-1.63.51 1 1.25c.46.29 2.66 1.67 5.06 3.51a11.22 11.22 0 01.79-4.2 4.36 4.36 0 013.85-2.1 6.25 6.25 0 014.59 2.2A6.55 6.55 0 0163.7 53a5.49 5.49 0 01-4.42 3.71 8.83 8.83 0 01-1 .06c-4 0-8.87-2.26-8.92-2.29l-1.28-.6.45 1.34c.72 2.17-.26 3.29-.46 3.49l-1 .78 1.23.24c4.75 1.06 6.07 5.69 6.21 6.26l.26.66a7.65 7.65 0 014.23-1.5h.39a10.92 10.92 0 014.21 1 2.91 2.91 0 011.53 2.11c.25 1.51-.51 3.42-2 5.12-2.23 2.47-6.92 5.09-10.39 5.09z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M32.35 66.71s15.76-3.7 14.19-21c0 .04 9.46 18.1-14.19 21z",
-    className: "cls-4"
+    className: "prefix__cls-4"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M77.36 14.53s-15.42-.91-22.7 3.79c0 0 .17-5.38 2.3-6.9 0 0-4.77-.91-7 1.17 0 0 .2-9.16 1.47-12.59 0 0-10 6-10.3 10.81l-4.48-7.36c0-.3-3.17 4.9-1.4 14.19 0 0-7.59-5.91-29.47-5.05A17.14 17.14 0 009 22.89c3.65 5.18 9.85 11.62 14.11 8.88 1 6.22 2.56 7.62 7.57 10.84l-1.47-.49s-9.36-3-12.71 3.35.22 10.66 3.88 11.57 7.31-.61 8.53-4-2.13-5.79-2.13-5.79l5.79.3s-.61 5.79-3 7-4.57 2.81-4.29 4.64S23 63.58 23 63.58s1.44-5.46-5.56-4.75c-4.59.46-6.69 2.11-9.46 5.88-1.37 1.87-2.54 7.84 1.89 9.22 2.73.85 7.37-.37 8.28-3.42 0 0 3 3.66 6.94 3s5.64-2 6.91-4.16c.89-1.54-.1-1.73 2.64-2.34s11.67-.82 13.86 1.88c2.79 3.45-2.26 7.93 2 9.75 3.74 1.58 10.25-1.83 13-4.87s3.09-6.65.35-8.17-7.31-1.47-8.78.36c0 0-1.19-5.57-6.67-6.78a5.37 5.37 0 001.09-3.91s5.51 2.55 9.79 2.06c5.28-.61 7-7.86 3.93-11.21s-7.58-3.05-9.41 0c-1.34 2.23-1.1 3-1 3.43a9.35 9.35 0 00-4.8-3.22l1.39-.39s6.55-2.79 8.68-5.23 2.32-4.5 1.71-5.72c0 .01 10.27.01 17.58-20.46zm-18 19.66A1.61 1.61 0 0158 33.3l-.81.61 1.52 1.62c.4.81.21 2.38-1.53 4.38-1.6 1.83-6.49 4.16-8.24 4.91l-2.47.77.5 1.39a3.41 3.41 0 011.33.45 65.08 65.08 0 015.89 4.45s0-3.88.74-5.11a3.76 3.76 0 013.3-1.77 5.65 5.65 0 014.14 2 5.93 5.93 0 01.76 5.86 4.9 4.9 0 01-3.92 3.32 8.25 8.25 0 01-.94.05c-3.82 0-10.16-3-9.81-2.81l-.12 1.8a10.9 10.9 0 01-2 5.1l1.88.12c4.66 1 5.74 5.8 5.75 5.85l.58 1.46s2.34-2.15 4.83-1.94a10.34 10.34 0 014 .93 2.29 2.29 0 011.22 1.68c.22 1.33-.48 3-1.89 4.61-2.12 2.35-6.6 4.87-9.91 4.87a4.39 4.39 0 01-1.7-.3c-1.24-.52-1.25-1.08-.78-3.25.4-1.82.89-4.08-.78-6.14-1.91-2.36-7.12-2.72-10.06-2.72a26 26 0 00-5 .42c-2 .45-2.7.8-3.1 2.13a3.18 3.18 0 01-.33.78c-1 1.64-2.41 3.33-7 3.52-2.84.12-6.09-4-6.09-4s-1.28 6.1-7.79 4.23c-2.94-.84-2.25-5.84-.78-7.52 5.57-6.36 9.82-5.71 11.77-4.53 2.17 1.32-.67 4.44-.3 5.21s2 .07 2 .07c.5-.5 4.13-4.42 3.74-6.75-.08-.51.27-1.61 3.61-3.28 2.89-1.44 3.6-6.89 3.71-8l.08-1.31a57.8 57.8 0 00-7.54-.29c-1.93.24-1.78 1-1.78 1l1.52 1.14c.1.08 2.59 2 1.7 4.39a5.39 5.39 0 01-5.4 3.4 7.4 7.4 0 01-1.79-.22 5.69 5.69 0 01-3.8-3.16c-.84-1.88-.6-4.18.71-6.67 1.19-2.27 3.45-3.42 6.73-3.42a16.59 16.59 0 014.52.67l4.41 1.39-.48-1.13.37-.53A23 23 0 0126 37a8.91 8.91 0 01-1.46-7.16 24.21 24.21 0 01-3.66 1.41c-3.32 0-7.8-4.66-10.87-9a16.54 16.54 0 01-3-8.42h3c17.9 0 26.6 6 26.6 6l-.05-2.15a24.59 24.59 0 01.29-11.46l4.83 7.67s.41-5.58 7.89-11a85 85 0 00-.8 9.85l-.06 2.88 2.11-2a5.85 5.85 0 013.79-1h.11a16.66 16.66 0 00-1.25 5.84l-.07 2.32 2-1.26c5.12-3.31 15-3.67 18.94-3.67h1.37C68.82 33.41 60.42 34.18 59.4 34.18z",
-    className: "cls-1"
+    className: "prefix__cls-1"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M25.59 26.22s2.25-8.38-16.18-11.8c0 0 6.51 2.21 10.43 5.79a49.28 49.28 0 015.75 6.01z",
-    className: "cls-4"
+    className: "prefix__cls-4"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M31.56 30.9s-.56-6.24 4-8.07c9.21-3.69 11 8.13 11.23 10.47.01.15-7.38 2.32-15.23-2.4z",
-    className: "cls-1"
+    className: "prefix__cls-1"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M42.31 32.89a20.85 20.85 0 01-9.8-2.66c0-1.44.35-7 6.31-7.3 4.71-.23 6.64 7.08 7 9.61a20.59 20.59 0 01-3.51.35z",
-    className: "cls-5"
+    className: "prefix__cls-5"
   }), /*#__PURE__*/React.createElement("ellipse", {
     cx: 38.61,
     cy: 28.12,
-    className: "cls-1",
+    className: "prefix__cls-1",
     rx: 2.74,
     ry: 3.2
   }), /*#__PURE__*/React.createElement("path", {
     d: "M56.49 33.34a25.65 25.65 0 01-3.29-.27l-.36-.07-.12-.35c-1.2-3.51-.74-5.46-.14-6.47a3.4 3.4 0 01.41-.56l.28-.31 1.13.43c4.33 1.6 3.75 5.82 3.47 7.07l-.1.43h-.44a8.19 8.19 0 01-.84.1z",
-    className: "cls-5"
+    className: "prefix__cls-5"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M54.6 25.19s.61-1-.15-1-5 1.6-2.06 9.4c0 0 4.49.76 5.86.15.01-.03 2.21-6.38-3.65-8.55zM57.78 33a12.37 12.37 0 01-4.71-.29c-1.25-3.56-.8-5.47-.19-6.46a6.77 6.77 0 01.84-.83l1.08.58a5.72 5.72 0 012.98 7z",
-    className: "cls-1"
+    className: "prefix__cls-1"
   }), /*#__PURE__*/React.createElement("ellipse", {
     cx: 39.29,
     cy: 27.04,
-    className: "cls-5",
+    className: "prefix__cls-5",
     rx: 1.31,
     ry: 1.5
   }), /*#__PURE__*/React.createElement("ellipse", {
     cx: 54.11,
     cy: 29.44,
-    className: "cls-1",
+    className: "prefix__cls-1",
     rx: 2,
     ry: 2.53
   }), /*#__PURE__*/React.createElement("ellipse", {
     cx: 54.59,
     cy: 28.36,
-    className: "cls-5",
+    className: "prefix__cls-5",
     rx: 0.8,
     ry: 1.07
   }), /*#__PURE__*/React.createElement("path", {
     d: "M58.89 27.61s-2-8.15 14.72-11.12c0 .01-9.04 3.41-14.72 11.12z",
-    className: "cls-4"
+    className: "prefix__cls-4"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M35.46 38.74l3.99 1.45-2.03 2.26-1.96-3.71z",
-    className: "cls-5"
+    className: "prefix__cls-5"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M32.82 35.11s-1.43 1.81-1 2.19a24.14 24.14 0 0013 3.9c8-.11 9.9-1.41 12.54-3 0 0-.19-.76-.52-.62s-4.86 3.3-13 2.77c-7.59-.5-11.13-3.48-11.13-3.48s1.35-1.96.11-1.76z",
-    className: "cls-1"
+    className: "prefix__cls-1"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M34.75 38.64l2.5 4.39 3.03-2.51-1.14-.38-1.71 1.52-1.39-2.6-1.29-.42zm-2.98-8.7s-1.8-.29-1.8.29 2.14.93 2.14.93z",
-    className: "cls-1"
+    className: "prefix__cls-1"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(GremlinIcon);
 export default ForwardRef;

package/data2/esm/GrinningFaceIcon.d.ts

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

package/data2/esm/GrinningFaceIcon.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 GrinningFaceIcon({
   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 GrinningFaceIcon({
     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,
@@ -33,7 +71,7 @@ function GrinningFaceIcon({
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#EA5A47",
     d: "M49.725 46.13c-1.79 4.27-6.35 7.23-13.69 7.23-7.41 0-12.03-3.03-13.8-7.36 2.06.47 15 3.16 27.49.13z"
-  }), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("circle", {
+  }), /*#__PURE__*/React.createElement("circle", {
     cx: 36,
     cy: 36,
     r: 23,
@@ -57,8 +95,12 @@ function GrinningFaceIcon({
     strokeWidth: 2,
     d: "M49.725 46.13c-1.79 4.27-6.35 7.23-13.69 7.23-7.41 0-12.03-3.03-13.8-7.36 2.06.47 15 3.16 27.49.13z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M30 31a3.001 3.001 0 01-6 0c0-1.655 1.345-3 3-3s3 1.345 3 3M48 31a3.001 3.001 0 01-6 0c0-1.655 1.345-3 3-3s3 1.345 3 3"
-  })));
+    d: "M30 31a3.001 3.001 0 01-6 0c0-1.655 1.345-3 3-3s3 1.345 3 3m18 0a3.001 3.001 0 01-6 0c0-1.655 1.345-3 3-3s3 1.345 3 3"
+  }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(GrinningFaceIcon);
 export default ForwardRef;

package/data2/esm/HeartOutlineIcon.d.ts

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

package/data2/esm/HeartOutlineIcon.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 HeartOutlineIcon({
   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 HeartOutlineIcon({
     strokeLinejoin: "round",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     strokeWidth: 2,
-    className: "lucide lucide-heart",
+    className: "prefix__lucide prefix__lucide-heart",
     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: "M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0016.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 002 8.5c0 2.3 1.5 4.05 3 5.5l7 7z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(HeartOutlineIcon);
 export default ForwardRef;

package/data2/esm/HeartOutlineIcon.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="lucide lucide-heart" 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="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0016.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 002 8.5c0 2.3 1.5 4.05 3 5.5l7 7z"/>
 </svg>

package/data2/esm/HeartRedIcon.d.ts

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

package/data2/esm/HeartRedIcon.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 HeartRedIcon({
   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 HeartRedIcon({
     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: "#EA5A47",
@@ -33,6 +71,10 @@ function HeartRedIcon({
     strokeWidth: 2,
     d: "M59.5 25c0-6.904-5.596-12.5-12.5-12.5a12.497 12.497 0 00-11 6.56 12.497 12.497 0 00-11-6.56c-6.904 0-12.5 5.596-12.5 12.5 0 2.97 1.04 5.694 2.77 7.839l-.004.003L36 58.54l20.734-25.698-.004-.003A12.44 12.44 0 0059.5 25z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(HeartRedIcon);
 export default ForwardRef;

package/data2/esm/HexagonIcon.d.ts

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

package/data2/esm/HexagonIcon.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 HexagonIcon({
   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 HexagonIcon({
     strokeLinejoin: "round",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     strokeWidth: 2,
-    className: "lucide lucide-hexagon",
+    className: "prefix__lucide prefix__lucide-hexagon",
     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: "M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(HexagonIcon);
 export default ForwardRef;

package/data2/esm/HexagonIcon.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="lucide lucide-hexagon" 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="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/>
 </svg>

package/data2/esm/HighVoltageIcon.d.ts

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

package/data2/esm/HighVoltageIcon.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 HighVoltageIcon({
   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 HighVoltageIcon({
     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: "#FCEA2B",
@@ -34,6 +72,10 @@ function HighVoltageIcon({
     strokeWidth: 2,
     d: "M48.163 4.44l-31.84 33.342c-.618.646-.117 1.659.82 1.659h19.082L17.921 68.274l37.727-36.479c.66-.637.167-1.688-.79-1.688H36.384L48.163 4.441z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(HighVoltageIcon);
 export default ForwardRef;

package/data2/esm/HomeButtonIcon.d.ts

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