@datalayer/icons-react 1.0.7 → 1.0.8

package/data2/esm/SnowmanIcon.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 SnowmanIcon({
   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 SnowmanIcon({
     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,
@@ -41,14 +79,14 @@ function SnowmanIcon({
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#3f3f3f",
     d: "M29.47 7.719h13.06v10.64H29.47z"
-  }), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "#000",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeMiterlimit: 10,
     strokeWidth: 1.757,
-    d: "M42.59 40.04l21.52-7.12M57.96 34.95l2.74-7.28"
+    d: "M42.59 40.04l21.52-7.12m-6.15 2.03l2.74-7.28"
   }), /*#__PURE__*/React.createElement("circle", {
     cx: 36,
     cy: 47.93,
@@ -91,15 +129,19 @@ function SnowmanIcon({
     strokeLinejoin: "round",
     strokeMiterlimit: 10,
     strokeWidth: 1.757,
-    d: "M43.42 21.38a10.063 10.063 0 012.685 6.858c0 5.579-4.522 10.1-10.1 10.1s-10.1-4.522-10.1-10.1c0-2.648 1.019-5.059 2.687-6.86M29.41 40.04L7.894 32.92M14.04 34.96l-2.74-7.29M45.82 42.67a13.12 13.12 0 013.354 8.781c0 7.276-5.899 13.17-13.17 13.17s-13.17-5.899-13.17-13.17c0-3.373 1.268-6.45 3.353-8.781"
+    d: "M43.42 21.38a10.063 10.063 0 012.685 6.858c0 5.579-4.522 10.1-10.1 10.1s-10.1-4.522-10.1-10.1c0-2.648 1.019-5.059 2.687-6.86m.818 18.662L7.894 32.92m6.146 2.04l-2.74-7.29m34.52 15a13.12 13.12 0 013.354 8.781c0 7.276-5.899 13.17-13.17 13.17s-13.17-5.899-13.17-13.17c0-3.373 1.268-6.45 3.353-8.781"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "#000",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    d: "M9.213 42.346l5.393 5.394M15.43 43.589l-7.124 2.754M10.867 48.651l2.001-7.37M16.451 16.807l5.393 5.394M22.667 18.05l-7.123 2.754M18.105 23.112l2.001-7.371M51.319 8.747l5.393 5.393M57.535 9.989l-7.123 2.754M52.973 15.052l2.001-7.371M58.654 42.075l5.394 5.393M64.871 43.318l-7.123 2.754M60.309 48.38l2.001-7.371"
-  })));
+    d: "M9.213 42.346l5.393 5.394m.824-4.151l-7.124 2.754m2.561 2.308l2.001-7.37m3.583-24.474l5.393 5.394m.823-4.151l-7.123 2.754m2.561 2.308l2.001-7.371m31.213-6.994l5.393 5.393m.823-4.151l-7.123 2.754m2.561 2.309l2.001-7.371m3.68 34.394l5.394 5.393m.823-4.15l-7.123 2.754m2.561 2.308l2.001-7.371"
+  }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(SnowmanIcon);
 export default ForwardRef;

package/data2/esm/SosIcon.d.ts

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

package/data2/esm/SosIcon.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 SosIcon({
   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,12 +54,14 @@ function SosIcon({
     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",
-    strokeMiterlimit: 10,
-    strokeWidth: 2,
     d: "M59.035 60h-46.07a.968.968 0 01-.965-.965v-46.07c0-.53.434-.965.965-.965h46.07c.53 0 .965.434.965.965v46.07c0 .53-.434.965-.965.965z"
   }), /*#__PURE__*/React.createElement("g", {
     fill: "none",
@@ -38,8 +74,12 @@ function SosIcon({
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 3.004,
-    d: "M36 42.01v0a4.29 4.29 0 01-4.291-4.291v-3.433A4.29 4.29 0 0136 29.995v0a4.29 4.29 0 014.291 4.291v3.433A4.29 4.29 0 0136 42.01zM26.21 32.39c-.352-1.367-1.871-2.396-3.692-2.396v0c-2.082 0-3.769 1.344-3.769 3.001s1.687 3.001 3.769 3.001l-.077.011c2.082 0 3.77 1.344 3.77 3.001 0 1.657-1.688 3.001-3.77 3.001v0c-1.82 0-3.34-1.029-3.692-2.396M53.25 32.39c-.352-1.367-1.871-2.396-3.692-2.396v0c-2.082 0-3.769 1.344-3.769 3.001s1.687 3.001 3.769 3.001l-.077.011c2.082 0 3.77 1.344 3.77 3.001 0 1.657-1.688 3.001-3.77 3.001v0c-1.82 0-3.34-1.029-3.692-2.396"
+    d: "M36 42.01v0a4.29 4.29 0 01-4.291-4.291v-3.433A4.29 4.29 0 0136 29.995v0a4.29 4.29 0 014.291 4.291v3.433A4.29 4.29 0 0136 42.01zm-9.79-9.62c-.352-1.367-1.871-2.396-3.692-2.396v0c-2.082 0-3.769 1.344-3.769 3.001s1.687 3.001 3.769 3.001l-.077.011c2.082 0 3.77 1.344 3.77 3.001 0 1.657-1.688 3.001-3.77 3.001v0c-1.82 0-3.34-1.029-3.692-2.396M53.25 32.39c-.352-1.367-1.871-2.396-3.692-2.396v0c-2.082 0-3.769 1.344-3.769 3.001s1.687 3.001 3.769 3.001l-.077.011c2.082 0 3.77 1.344 3.77 3.001 0 1.657-1.688 3.001-3.77 3.001v0c-1.82 0-3.34-1.029-3.692-2.396"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(SosIcon);
 export default ForwardRef;

package/data2/esm/SosStencilIcon.d.ts

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

package/data2/esm/SosStencilIcon.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 SosStencilIcon({
   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 SosStencilIcon({
     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",
@@ -32,16 +70,18 @@ function SosStencilIcon({
     strokeWidth: 2,
     d: "M59 60H13a1.002 1.002 0 01-1-1V13a1.002 1.002 0 011-1h46c.55 0 .998.447 1 1v46a.945.945 0 01-1 1z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M26.597 32.837c.369.095.67.362.807.718a1.02 1.02 0 101.991-.442 3.305 3.305 0 00-2.798-2.386v2.11zM25.28 38.914a1.57 1.57 0 01-1.218-.909 1.02 1.02 0 10-1.936.644 3.65 3.65 0 003.153 2.333v-2.068z"
+    d: "M26.597 32.837c.369.095.67.362.807.718a1.02 1.02 0 101.991-.442 3.305 3.305 0 00-2.798-2.386v2.11zm-1.317 6.077a1.57 1.57 0 01-1.218-.909 1.02 1.02 0 10-1.936.644 3.65 3.65 0 003.153 2.333v-2.068z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M25.894 34.815a1.006 1.006 0 00-.096-.004c-.946 0-1.58-.549-1.58-1.06 0-.41.412-.84 1.06-.996v-2.062a3.254 3.254 0 00-3.1 3.057 3.32 3.32 0 003.421 3.097c.031.002.063.004.096.004.946 0 1.581.549 1.581 1.06a1.056 1.056 0 01-.678.866v2.131a3.186 3.186 0 002.718-2.996 3.32 3.32 0 00-3.422-3.097z"
-  }), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
-    d: "M45.97 38.907a1.554 1.554 0 01-1.163-.902 1.02 1.02 0 00-1.935.645 3.646 3.646 0 003.097 2.328v-2.072zM47.288 32.814c.393.088.716.366.862.741a1.02 1.02 0 101.991-.442 3.318 3.318 0 00-2.854-2.398v2.099z"
+    d: "M25.894 34.815a1.006 1.006 0 00-.096-.004c-.946 0-1.58-.549-1.58-1.06 0-.41.412-.84 1.06-.996v-2.062a3.254 3.254 0 00-3.1 3.057 3.32 3.32 0 003.421 3.097c.031.002.063.004.096.004.946 0 1.581.549 1.581 1.06a1.056 1.056 0 01-.678.866v2.131a3.186 3.186 0 002.718-2.996 3.32 3.32 0 00-3.422-3.097zM45.97 38.907a1.554 1.554 0 01-1.163-.902 1.02 1.02 0 00-1.935.645 3.646 3.646 0 003.097 2.328v-2.072zm1.318-6.093c.393.088.716.366.862.741a1.02 1.02 0 101.991-.442 3.318 3.318 0 00-2.854-2.398v2.099z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M46.64 34.815a1.006 1.006 0 00-.095-.004c-.946 0-1.581-.549-1.581-1.06 0-.4.388-.817 1.005-.984v-2.07a3.245 3.245 0 00-3.045 3.053 3.32 3.32 0 003.42 3.097 1.5 1.5 0 00.097.004c.945 0 1.58.549 1.58 1.06a1.08 1.08 0 01-.733.888v2.123a3.198 3.198 0 002.774-3.01 3.32 3.32 0 00-3.422-3.097z"
-  })), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
-    d: "M35.532 38.858a1.993 1.993 0 01-1.358-1.882v-2.394a1.993 1.993 0 011.358-1.883v-2.09a4.033 4.033 0 00-3.398 3.973v2.393a4.033 4.033 0 003.398 3.973v-2.09zM36.85 30.613v2.098a1.994 1.994 0 011.319 1.87v2.394a1.994 1.994 0 01-1.319 1.87v2.098a4.035 4.035 0 003.36-3.967v-2.394a4.035 4.035 0 00-3.36-3.969z"
+  }), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+    d: "M35.532 38.858a1.993 1.993 0 01-1.358-1.882v-2.394a1.993 1.993 0 011.358-1.883v-2.09a4.033 4.033 0 00-3.398 3.973v2.393a4.033 4.033 0 003.398 3.973v-2.09zm1.318-8.245v2.098a1.994 1.994 0 011.319 1.87v2.394a1.994 1.994 0 01-1.319 1.87v2.098a4.035 4.035 0 003.36-3.967v-2.394a4.035 4.035 0 00-3.36-3.969z"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(SosStencilIcon);
 export default ForwardRef;

package/data2/esm/SparkleIcon.d.ts

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

package/data2/esm/SparkleIcon.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 SparkleIcon({
   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 SparkleIcon({
     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: "none",
@@ -39,14 +77,18 @@ function SparkleIcon({
     strokeLinejoin: "round",
     strokeWidth: 2,
     d: "M35.106 18.857s-.754 16.324-16.128 16.37a.648.648 0 100 1.296h.004s16.324 1.1 16.37 16.474v.146a.648.648 0 001.296 0c.046-15.375 16.37-16.62 16.37-16.62h.005a.648.648 0 100-1.296c-15.375-.046-16.62-16.37-16.62-16.37a.648.648 0 00-1.297 0z"
-  }), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "#000",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
     d: "M60 60.958H12a.945.945 0 01-1-1v-48a.945.945 0 011-1h48a.945.945 0 011 1v48a.945.945 0 01-1 1z"
-  })));
+  }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(SparkleIcon);
 export default ForwardRef;

package/data2/esm/SparklerIcon.d.ts

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

package/data2/esm/SparklerIcon.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 SparklerIcon({
   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 SparklerIcon({
     ref: svgRef,
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("g", {
     fill: "none",
@@ -29,13 +67,13 @@ function SparklerIcon({
     strokeWidth: 2
   }, /*#__PURE__*/React.createElement("path", {
     strokeMiterlimit: 10,
-    d: "M27.612 16.11h0M55.898 44.382h0M55.882 16.1h0M27.593 16.128h0"
+    d: "M27.612 16.11h0m28.286 28.272h0M55.882 16.1h0m-28.289.028h0"
   }), /*#__PURE__*/React.createElement("path", {
     strokeLinejoin: "round",
-    d: "M41.75 10.25v14M47.75 30.25h14M41.75 50.25v-14M35.75 30.25h-14"
+    d: "M41.75 10.25v14m6 6h14m-20 20v-14m-6-6h-14"
   }), /*#__PURE__*/React.createElement("path", {
     strokeMiterlimit: 10,
-    d: "M37.507 26.007l-6.364-6.364M52.357 19.643l-6.364 6.364M52.357 40.857l-6.364-6.364M32.262 7.347l2.715 6.556M18.84 20.77l6.557 2.715M18.843 39.753l6.556-2.718M32.269 53.171l2.714-6.557M51.252 53.164l-2.718-6.555M64.667 39.735l-6.557-2.712M64.656 20.752l-6.555 2.72M51.218 7.348l-2.707 6.56M32.236 7.358l2.715 6.556M13 57l27.638-27.76a1.5 1.5 0 012.121 0h0a1.5 1.5 0 010 2.122L19 55"
+    d: "M37.507 26.007l-6.364-6.364m21.214 0l-6.364 6.364m6.364 14.85l-6.364-6.364M32.262 7.347l2.715 6.556M18.84 20.77l6.557 2.715m-6.554 16.268l6.556-2.718m6.87 16.136l2.714-6.557m16.269 6.55l-2.718-6.555m16.133-6.874l-6.557-2.712m6.546-16.271l-6.555 2.72M51.218 7.348l-2.707 6.56m-16.275-6.55l2.715 6.556M13 57l27.638-27.76a1.5 1.5 0 012.121 0h0a1.5 1.5 0 010 2.122L19 55"
   })), /*#__PURE__*/React.createElement("path", {
     fill: "#9b9b9a",
     d: "M11.293 57.172L39.93 28.534a2.5 2.5 0 013.535 0 2.5 2.5 0 010 3.535L14.828 60.707a1 1 0 01-1.414 0l-2.121-2.121a1 1 0 010-1.414z"
@@ -46,21 +84,25 @@ function SparklerIcon({
     strokeWidth: 2
   }, /*#__PURE__*/React.createElement("path", {
     strokeMiterlimit: 10,
-    d: "M27.612 16.11h0M55.898 44.382h0M55.882 16.1h0M27.593 16.128h0"
+    d: "M27.612 16.11h0m28.286 28.272h0M55.882 16.1h0m-28.289.028h0"
   }), /*#__PURE__*/React.createElement("path", {
     strokeLinejoin: "round",
-    d: "M41.75 10.25v14M47.75 30.25h14M41.75 50.25v-14M35.75 30.25h-14"
+    d: "M41.75 10.25v14m6 6h14m-20 20v-14m-6-6h-14"
   }), /*#__PURE__*/React.createElement("path", {
     strokeMiterlimit: 10,
-    d: "M37.507 26.007l-6.364-6.364M52.357 19.643l-6.364 6.364M52.357 40.857l-6.364-6.364M32.262 7.347l2.715 6.556M18.84 20.77l6.557 2.715M18.843 39.753l6.556-2.718M32.269 53.171l2.714-6.557M51.252 53.164l-2.718-6.555M64.667 39.735l-6.557-2.712M64.656 20.752l-6.555 2.72M51.218 7.348l-2.707 6.56M32.236 7.358l2.715 6.556"
-  })), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+    d: "M37.507 26.007l-6.364-6.364m21.214 0l-6.364 6.364m6.364 14.85l-6.364-6.364M32.262 7.347l2.715 6.556M18.84 20.77l6.557 2.715m-6.554 16.268l6.556-2.718m6.87 16.136l2.714-6.557m16.269 6.55l-2.718-6.555m16.133-6.874l-6.557-2.712m6.546-16.271l-6.555 2.72M51.218 7.348l-2.707 6.56m-16.275-6.55l2.715 6.556"
+  })), /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "#000",
     strokeLinecap: "round",
     strokeMiterlimit: 10,
     strokeWidth: 2,
     d: "M17 52.879L40.638 29.24a1.5 1.5 0 012.121 0h0a1.5 1.5 0 010 2.121L31.92 42.201"
-  })));
+  }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(SparklerIcon);
 export default ForwardRef;

package/data2/esm/SparklesIcon.d.ts

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

package/data2/esm/SparklesIcon.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 SparklesIcon({
   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 SparklesIcon({
     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",
@@ -40,16 +78,19 @@ function SparklesIcon({
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#F1B31C",
     d: "M55.231 63.978l1.054-8.87c-1.612-2.66-2.804-5.42-3.555-7.385l-.204 1.22c-.078.464-.491.841-1.049.955l-6.373 1.296c-.299.06-.299.404 0 .465l6.373 1.296c.558.113.97.491 1.049.954l2.12 10.07c.047.276.54.276.585 0z"
-  }), /*#__PURE__*/React.createElement("g", {
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M20 32l2.142-11.16.7 4.176 2.33 13.905c.26 1.56 1.643 2.816 3.52 3.198L40 44.419l-11.316 2.303c-1.872.381-3.251 1.636-3.513 3.197L22.142 68l-3.029-18.08c-.261-1.561-1.64-2.816-3.513-3.197L4.284 44.42 15.6 42.117c1.873-.38 3.139-2.557 3.4-4.117m23.556-24.55l1.547-8.06.505 3.016 1.682 10.043c.19 1.126 1.187 2.033 2.543 2.309L57 22.42l-8.173 1.663c-1.352.275-2.348 1.181-2.537 2.308L44.103 39.45l-2.188-13.058c-.189-1.127-1.185-2.034-2.537-2.309l-8.173-1.663 8.173-1.663c1.352-.275 2.267-1.847 2.455-2.974m12.015 26.484l1.234-6.428.403 2.406 1.341 8.008c.151.899.947 1.622 2.028 1.842l6.512 1.325-6.517 1.326c-1.078.22-1.872.942-2.023 1.84L55.082 65l-1.745-10.413c-.15-.899-.944-1.621-2.023-1.84l-6.517-1.327 6.517-1.326c1.079-.22 1.808-1.473 1.958-2.371",
     fill: "none",
     stroke: "#000",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeMiterlimit: 10,
     strokeWidth: 2
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M20 32l2.142-11.16.7 4.176 2.33 13.905c.26 1.56 1.643 2.816 3.52 3.198L40 44.419l-11.316 2.303c-1.872.381-3.251 1.636-3.513 3.197L22.142 68l-3.029-18.08c-.261-1.561-1.64-2.816-3.513-3.197L4.284 44.42 15.6 42.117C17.473 41.737 18.739 39.56 19 38M42.556 13.45l1.547-8.06.505 3.016 1.682 10.043c.19 1.126 1.187 2.033 2.543 2.309L57 22.42l-8.173 1.663c-1.352.275-2.348 1.181-2.537 2.308L44.103 39.45l-2.188-13.058c-.189-1.127-1.185-2.034-2.537-2.309l-8.173-1.663 8.173-1.663c1.352-.275 2.267-1.847 2.455-2.974M53.848 44.267l1.234-6.428.403 2.406 1.341 8.008c.151.899.947 1.622 2.028 1.842l6.512 1.325-6.517 1.326c-1.078.22-1.872.942-2.023 1.84L55.082 65l-1.745-10.413c-.15-.899-.944-1.621-2.023-1.84l-6.517-1.327 6.517-1.326c1.079-.22 1.808-1.473 1.958-2.371"
-  })));
+  }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(SparklesIcon);
 export default ForwardRef;

package/data2/esm/SpeechBalloonIcon.d.ts

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