@datalayer/icons-react 1.0.7 → 1.0.8

package/data2/PersonSwimmingIcon.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 PersonSwimmingIcon({
   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 PersonSwimmingIcon({
     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",
@@ -45,7 +83,7 @@ function PersonSwimmingIcon({
   }), /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    d: "M5 36c3 0 9 3 15 3s10-3 16-3 11 3 16 3 7-3 15-3M46.006 43.964C48.045 44.53 50.023 45 52 45c2.744 0 4.585-.904 7.009-1.72M12.777 43.887C15.044 44.488 17.523 45 20 45c6 0 10-3 16-3M26.001 50.959c3.208-.883 6.203-2.084 9.999-2.084 4.406 0 8.273 1.618 11.997 2.478"
+    d: "M5 36c3 0 9 3 15 3s10-3 16-3 11 3 16 3 7-3 15-3m-20.994 7.964C48.045 44.53 50.023 45 52 45c2.744 0 4.585-.904 7.009-1.72m-46.232.607C15.044 44.488 17.523 45 20 45c6 0 10-3 16-3m-9.999 8.959c3.208-.883 6.203-2.084 9.999-2.084 4.406 0 8.273 1.618 11.997 2.478"
   }), /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
@@ -55,6 +93,10 @@ function PersonSwimmingIcon({
     strokeLinejoin: "round",
     d: "M43 37s-5.157-3.89-7-5c-1.916-1.153-2-2-2-2"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(PersonSwimmingIcon);
 module.exports = ForwardRef;

package/data2/PictureFramedIcon.d.ts

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

package/data2/PictureFramedIcon.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 PictureFramedIcon({
   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 PictureFramedIcon({
     ref: svgRef,
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("g", {
     strokeLinecap: "round",
@@ -62,6 +100,10 @@ function PictureFramedIcon({
   }), /*#__PURE__*/React.createElement("path", {
     d: "M22 43c.526-1.02.728-1.967 3-3 2.61-1.186 3-2 6-4 4.746-3.164 6.792-9.028 11-9 1.72.011 5 7 8 8"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(PictureFramedIcon);
 module.exports = ForwardRef;

package/data2/PictureIcon.d.ts

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

package/data2/PictureIcon.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 PictureIcon({
   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 PictureIcon({
     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: "#B1CC33",
@@ -50,8 +88,12 @@ function PictureIcon({
   }, /*#__PURE__*/React.createElement("path", {
     d: "M6 18h60v36H6z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M44 43H22l11-11 6.998 6.998M39.797 33.203L45 28l15 15H44"
+    d: "M44 43H22l11-11 6.998 6.998m-.201-5.795L45 28l15 15H44"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(PictureIcon);
 module.exports = ForwardRef;

package/data2/PirateFlagIcon.d.ts

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

package/data2/PirateFlagIcon.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 PirateFlagIcon({
   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,36 +54,43 @@ function PirateFlagIcon({
     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", {
     fillRule: "evenodd",
-    d: "M5 17h62v38H5V17zm17.724 1.83c.701.157 1.308.628 1.731 1.306.574.909.192 1.76-.21 2.28a3.754 3.754 0 01-.435.469c.314.304.762.748 1.278 1.307a.5.5 0 01.003.675l-2.22 2.449a.5.5 0 01-.725.018l-1.397-1.398a5.129 5.129 0 01-.449.28c-.445.245-1.148.537-1.83.342-.535-.15-.981-.435-1.271-.863-.291-.429-.389-.95-.321-1.508a.506.506 0 01.012-.064c.346-1.346 1.505-2.16 2.798-2.146-.076-.927.229-1.894.874-2.576a.498.498 0 01.058-.053c.653-.502 1.396-.677 2.104-.518zm26.665.006c.725-.134 1.488.053 2.14.555.021.016.04.034.059.053.648.685.92 1.622.836 2.528 1.284-.025 2.483.72 2.834 2.084.006.022.01.043.012.065.146 1.207-.627 2.15-1.724 2.458-.685.196-1.38-.106-1.816-.358a4.894 4.894 0 01-.426-.278l-1.32 1.32a.5.5 0 01-.739-.034l-2.117-2.55a.5.5 0 01.019-.66l1.069-1.149c-.141-.13-.3-.293-.444-.485-.394-.522-.757-1.368-.187-2.272.435-.694 1.08-1.142 1.804-1.277zM22.931 44.344a.5.5 0 01.372.246l1.747 3.029a.5.5 0 01-.079.603l-1.055 1.058c.355.38.544.788.622 1.192.1.52.007.994-.056 1.296a.502.502 0 01-.057.15c-.421.728-1.067 1.169-1.8 1.267-.724.096-1.472-.15-2.102-.67a.512.512 0 01-.045-.043c-.383-.405-.677-.855-.83-1.368a2.873 2.873 0 01-.116-1.002c-1.287-.051-2.414-.799-2.77-2.178a.489.489 0 01-.011-.065c-.069-.563.038-1.105.325-1.552.287-.448.734-.77 1.289-.927a2.53 2.53 0 012.589.72l1.557-1.608a.5.5 0 01.42-.148zm26.228.09a.5.5 0 01.402.13c.643.6 1.128 1.13 1.453 1.493.62-.675 1.554-.936 2.488-.658 1.139.323 1.819 1.381 1.678 2.544a.517.517 0 01-.012.065c-.357 1.39-1.603 2.049-2.879 2.004.083.898-.191 1.818-.836 2.5a.526.526 0 01-.045.043c-.636.525-1.393.757-2.122.647-.733-.11-1.381-.56-1.802-1.288a.536.536 0 01-.022-.043 2.16 2.16 0 01-.115-1.555c.124-.4.366-.78.725-1.133l-1.05-1.05a.5.5 0 01-.067-.626l1.845-2.849a.5.5 0 01.359-.224zM35.2 23.42c-10.3-.095-14.89 12.67-7.6 19.66l.068.068a4.497 4.497 0 011.433 2.593v2.866c.005.303-.917.642-1.22.638.713.51 1.81.945 3.119 1.266v-1.859a.5.5 0 011 0v2.074c.637.12 1.31.214 2 .28v-2.354a.5.5 0 011 0v2.427c.661.035 1.333.043 2 .021v-2.448a.5.5 0 011 0v2.393a18.29 18.29 0 002-.266v-2.127a.5.5 0 011 0v1.899c1.276-.34 2.406-.846 3.26-1.545a12.044 12.044 0 00-1.22-1.447c-.87-.912-1.058-1.109.57-2.55 9.337-8.94 1.888-21.5-8.415-21.59l.005.001zm-.88 16.12a3 3 0 11-6 0 3 3 0 016 0zm6.36 3a3 3 0 100-6 3 3 0 000 6zm-2.409 2.34c.34.574-.521 1.084-.861.51l-1.516-2.561-1.516 2.561c-.34.574-1.2.064-.86-.51l1.977-3.343c.09-.16.263-.256.4-.245.135-.01.309.084.398.245l1.978 3.343z",
+    d: "M5 17h62v38H5V17zm17.724 1.83c.701.157 1.308.628 1.731 1.306.574.909.192 1.76-.21 2.28a3.754 3.754 0 01-.435.469c.314.304.762.748 1.278 1.307a.5.5 0 01.003.675l-2.22 2.449a.5.5 0 01-.725.018l-1.397-1.398a5.129 5.129 0 01-.449.28c-.445.245-1.148.537-1.83.342-.535-.15-.981-.435-1.271-.863-.291-.429-.389-.95-.321-1.508a.506.506 0 01.012-.064c.346-1.346 1.505-2.16 2.798-2.146-.076-.927.229-1.894.874-2.576a.498.498 0 01.058-.053c.653-.502 1.396-.677 2.104-.518zm26.665.006c.725-.134 1.488.053 2.14.555.021.016.04.034.059.053.648.685.92 1.622.836 2.528 1.284-.025 2.483.72 2.834 2.084a.37.37 0 01.012.065c.146 1.207-.627 2.15-1.724 2.458-.685.196-1.38-.106-1.816-.358a4.894 4.894 0 01-.426-.278l-1.32 1.32a.5.5 0 01-.739-.034l-2.117-2.55a.5.5 0 01.019-.66l1.069-1.149c-.141-.13-.3-.293-.444-.485-.394-.522-.757-1.368-.187-2.272.435-.694 1.08-1.142 1.804-1.277zM22.931 44.344a.5.5 0 01.372.246l1.747 3.029a.5.5 0 01-.079.603l-1.055 1.058c.355.38.544.788.622 1.192.1.52.007.994-.056 1.296a.502.502 0 01-.057.15c-.421.728-1.067 1.169-1.8 1.267-.724.096-1.472-.15-2.102-.67a.512.512 0 01-.045-.043c-.383-.405-.677-.855-.83-1.368a2.873 2.873 0 01-.116-1.002c-1.287-.051-2.414-.799-2.77-2.178a.489.489 0 01-.011-.065c-.069-.563.038-1.105.325-1.552.287-.448.734-.77 1.289-.927a2.53 2.53 0 012.589.72l1.557-1.608a.5.5 0 01.42-.148zm26.228.09a.5.5 0 01.402.13c.643.6 1.128 1.13 1.453 1.493.62-.675 1.554-.936 2.488-.658 1.139.323 1.819 1.381 1.678 2.544a.517.517 0 01-.012.065c-.357 1.39-1.603 2.049-2.879 2.004.083.898-.191 1.818-.836 2.5a.526.526 0 01-.045.043c-.636.525-1.393.757-2.122.647-.733-.11-1.381-.56-1.802-1.288a.536.536 0 01-.022-.043 2.16 2.16 0 01-.115-1.555c.124-.4.366-.78.725-1.133l-1.05-1.05a.5.5 0 01-.067-.626l1.845-2.849a.5.5 0 01.359-.224zM35.2 23.42c-10.3-.095-14.89 12.67-7.6 19.66l.068.068a4.497 4.497 0 011.433 2.593v2.866c.005.303-.917.642-1.22.638.713.51 1.81.945 3.119 1.266v-1.859a.5.5 0 011 0v2.074c.637.12 1.31.214 2 .28v-2.354a.5.5 0 011 0v2.427a23.38 23.38 0 002 .021v-2.448a.5.5 0 011 0v2.393a18.29 18.29 0 002-.266v-2.127a.5.5 0 011 0v1.899c1.276-.34 2.406-.846 3.26-1.545a12.044 12.044 0 00-1.22-1.447c-.87-.912-1.058-1.109.57-2.55 9.337-8.94 1.888-21.5-8.415-21.59l.005.001zm-.88 16.12a3 3 0 11-6 0 3 3 0 016 0zm6.36 3a3 3 0 100-6 3 3 0 000 6zm-2.409 2.34c.34.574-.521 1.084-.861.51l-1.516-2.561-1.516 2.561c-.34.574-1.2.064-.86-.51l1.977-3.343c.09-.16.263-.256.4-.245.135-.01.309.084.398.245l1.978 3.343z",
     clipRule: "evenodd"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M43.36 51.61a1 1 0 01-.999-.975l-.073-4.865a4.328 4.328 0 011.61-2.757l.27-.276a10.43 10.43 0 002.94-7.407 11.08 11.08 0 00-11.12-11.03c-.752.001-1.502.065-2.242.191a10.94 10.94 0 00-5.866 18.25c.767.806 1.732 1.817 1.732 3.004v5.866a1 1 0 01-2 0v-5.866c0-.386-.782-1.208-1.116-1.558l-.073-.076a12.94 12.94 0 016.96-21.59 15.45 15.45 0 012.605-.224 13.08 13.08 0 0113.12 13.01 12.42 12.42 0 01-3.485 8.804l-.305.31c-.28.283-1.024 1.033-1.03 1.324l.073 4.84a1.001 1.001 0 01-.974 1.025h-.027z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#3F3F3F",
     d: "M67 17H5v38h62V17z"
-  }), /*#__PURE__*/React.createElement("g", {
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M49.63 26.91l1.637-1.637s1.188 1.098 2.143.825c.897-.252 1.476-.991 1.364-1.917-.34-1.318-1.661-1.96-2.979-1.622.31-.953.118-2.044-.57-2.772-1.096-.842-2.484-.58-3.217.593-.818 1.296.94 2.437.94 2.437l-1.435 1.543 2.117 2.55zM22.87 44.84l-1.978 2.043a2.029 2.029 0 00-2.388-1.023c-.898.252-1.369 1.013-1.257 1.939.34 1.319 1.531 1.961 2.872 1.774-.256 1.019.034 1.827.722 2.556 1.082.894 2.448.753 3.151-.462.125-.599.289-1.547-.803-2.366l1.428-1.432-1.747-3.029zm-.37-17.86l-1.706-1.706s-1.231 1.076-2.186.803c-.897-.252-1.346-.904-1.234-1.83.34-1.319 1.618-2.026 2.937-1.687-.31-.953-.075-2.087.614-2.816 1.095-.842 2.375-.514 3.107.658.819 1.296-.98 2.446-.98 2.446.205.204.85.796 1.668 1.683L22.5 26.98zm26.72 17.95c1.023.955 1.637 1.724 1.842 1.93.445-.874 1.363-1.26 2.301-.98.897.252 1.433 1.078 1.321 2.003-.339 1.32-1.705 1.875-3.024 1.535.31.954.118 2.023-.57 2.752-1.083.894-2.47.71-3.173-.506-.34-.75-.201-1.634.89-2.453l-1.433-1.432 1.846-2.849z",
     fill: "#fff",
     stroke: "#fff",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M49.63 26.91l1.637-1.637s1.188 1.098 2.143.825c.897-.252 1.476-.991 1.364-1.917-.34-1.318-1.661-1.96-2.979-1.622.31-.953.118-2.044-.57-2.772-1.096-.842-2.484-.58-3.217.593-.818 1.296.94 2.437.94 2.437l-1.435 1.543 2.117 2.55zM22.87 44.84l-1.978 2.043a2.029 2.029 0 00-2.388-1.023c-.898.252-1.369 1.013-1.257 1.939.34 1.319 1.531 1.961 2.872 1.774-.256 1.019.034 1.827.722 2.556 1.082.894 2.448.753 3.151-.462.125-.599.289-1.547-.803-2.366l1.428-1.432-1.747-3.029zM22.5 26.98l-1.706-1.706s-1.231 1.076-2.186.803c-.897-.252-1.346-.904-1.234-1.83.34-1.319 1.618-2.026 2.937-1.687-.31-.953-.075-2.087.614-2.816 1.095-.842 2.375-.514 3.107.658.819 1.296-.98 2.446-.98 2.446.205.204.85.796 1.668 1.683L22.5 26.98zM49.22 44.93c1.023.955 1.637 1.724 1.842 1.93.445-.874 1.363-1.26 2.301-.98.897.252 1.433 1.078 1.321 2.003-.339 1.32-1.705 1.875-3.024 1.535.31.954.118 2.023-.57 2.752-1.083.894-2.47.71-3.173-.506-.34-.75-.201-1.634.89-2.453l-1.433-1.432 1.846-2.849z"
-  })), /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     fillRule: "evenodd",
     d: "M27.6 43.08c-7.29-6.99-2.7-19.754 7.6-19.66h-.005c10.303.09 17.752 12.649 8.414 21.59-1.627 1.44-1.44 1.637-.569 2.549.33.345.757.792 1.22 1.447-.854.7-1.984 1.205-3.26 1.545v-1.899a.5.5 0 00-1 0v2.127a18.29 18.29 0 01-2 .266v-2.393a.5.5 0 00-1 0V51.1c-.667.022-1.339.014-2-.02v-2.428a.5.5 0 00-1 0v2.354a22.25 22.25 0 01-2-.28v-2.074a.5.5 0 00-1 0v1.859c-1.309-.321-2.406-.756-3.12-1.266.304.004 1.226-.335 1.221-.638v-2.866a4.497 4.497 0 00-1.433-2.593l-.068-.068z",
     clipRule: "evenodd"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M37.41 45.39c.34.574 1.201.064.861-.51l-1.978-3.343c-.09-.16-.263-.256-.399-.245-.136-.01-.31.084-.399.245l-1.978 3.343c-.34.574.521 1.084.861.51l1.516-2.561 1.516 2.561zM31.32 42.54a3 3 0 100-6 3 3 0 000 6zM40.68 42.54a3 3 0 100-6 3 3 0 000 6z"
+    d: "M37.41 45.39c.34.574 1.201.064.861-.51l-1.978-3.343c-.09-.16-.263-.256-.399-.245-.136-.01-.31.084-.399.245l-1.978 3.343c-.34.574.521 1.084.861.51l1.516-2.561 1.516 2.561zm-6.09-2.85a3 3 0 100-6 3 3 0 000 6zm9.36 0a3 3 0 100-6 3 3 0 000 6z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M43.36 49.61a1 1 0 01-.999-.975l-.073-2.865a4.328 4.328 0 011.61-2.757l.27-.276a10.43 10.43 0 002.94-7.407 11.08 11.08 0 00-11.12-11.03c-.752.001-1.502.065-2.242.191a10.94 10.94 0 00-5.866 18.25c.767.806 1.732 1.817 1.732 3.004v2.866a1 1 0 01-2 0v-2.866c0-.386-.782-1.208-1.116-1.558l-.073-.076a12.94 12.94 0 016.96-21.59 15.45 15.45 0 012.605-.224 13.08 13.08 0 0113.12 13.01 12.42 12.42 0 01-3.485 8.804l-.305.31c-.28.283-1.024 1.033-1.03 1.324l.073 2.84a1.001 1.001 0 01-.974 1.025h-.027zm-21.22 3.71a2.616 2.616 0 01-1.744-.651 3.056 3.056 0 01-.885-2.558 3.264 3.264 0 01-1.881-.621 2.464 2.464 0 01-1.015-1.638 2.371 2.371 0 011.723-2.588 2.513 2.513 0 012.591.732l1.56-1.56a.5.5 0 01.707.707l-1.978 1.978a.495.495 0 01-.64.056.502.502 0 01-.154-.172 1.525 1.525 0 00-1.81-.78 1.4 1.4 0 00-1.008 1.483 1.476 1.476 0 00.62.978 2.36 2.36 0 001.802.386.486.486 0 01.455.155.5.5 0 01.114.467 2.266 2.266 0 00.465 2.228 1.774 1.774 0 002.624-.453c.097-.214.398-.877-.802-1.776a.501.501 0 01-.053-.753l1.433-1.433a.5.5 0 01.707.707l-1.048 1.048a2.187 2.187 0 01.672 2.626 2.64 2.64 0 01-1.867 1.37 2.86 2.86 0 01-.586.062h-.002zm.36-25.83a.499.499 0 01-.354-.146l-1.381-1.382a2.956 2.956 0 01-2.358.759 2.378 2.378 0 01-1.723-2.61 2.46 2.46 0 011.014-1.618 3.264 3.264 0 011.88-.62 3.052 3.052 0 01.882-2.554 2.521 2.521 0 012.047-.612 3.123 3.123 0 012.12 1.327 2.204 2.204 0 01-.747 2.834c.306.293.733.71 1.238 1.26a.5.5 0 11-.734.677c-.611-.663-1.106-1.129-1.4-1.408l-.224-.215a.5.5 0 01.082-.773c.015-.01 1.483-.977.94-1.837a2.105 2.105 0 00-1.413-.874 1.51 1.51 0 00-1.244.368 2.235 2.235 0 00-.462 2.226.5.5 0 01-.569.62 2.352 2.352 0 00-1.8.385 1.468 1.468 0 00-.62.959 1.404 1.404 0 001.007 1.504c.508.149 1.413-.502 1.77-.838a.5.5 0 01.697.01l1.706 1.706a.5.5 0 01-.353.854l-.001-.002zm27.29 25.83c-.197 0-.394-.02-.587-.061a2.642 2.642 0 01-1.865-1.367 2.19 2.19 0 01.67-2.63l-1.048-1.048a.5.5 0 01.707-.707l1.434 1.434a.5.5 0 01-.055.752c-1.199.9-.898 1.562-.8 1.78a1.774 1.774 0 002.626.446 2.262 2.262 0 00.461-2.225.5.5 0 01.57-.621 2.374 2.374 0 001.802-.386 1.47 1.47 0 00.618-.958 1.402 1.402 0 00-1.006-1.504 1.526 1.526 0 00-1.81.78.5.5 0 01-.794.117l-.219-.227c-.292-.308-.837-.88-1.61-1.605a.5.5 0 11.682-.73 36 36 0 011.444 1.425 2.506 2.506 0 012.58-.723 2.375 2.375 0 011.722 2.61 2.458 2.458 0 01-1.013 1.617 3.272 3.272 0 01-1.88.62 3.054 3.054 0 01-.882 2.555 2.63 2.63 0 01-1.747.655v.001zm-.16-25.9a.5.5 0 01-.354-.854l1.636-1.636a.501.501 0 01.699-.012c.356.337 1.253.988 1.772.839a1.4 1.4 0 001.008-1.483 1.475 1.475 0 00-.622-.98 2.36 2.36 0 00-1.801-.384.5.5 0 01-.57-.622 2.264 2.264 0 00-.465-2.228 1.512 1.512 0 00-1.24-.363 2.108 2.108 0 00-1.415.877c-.541.856.927 1.823.942 1.833a.5.5 0 01.082.774l-1.501 1.5a.5.5 0 01-.707-.706l1.097-1.098a2.208 2.208 0 01-.758-2.84 3.121 3.121 0 012.122-1.33 2.522 2.522 0 012.043.608 3.058 3.058 0 01.886 2.559 3.264 3.264 0 011.88.619 2.468 2.468 0 011.016 1.638 2.371 2.371 0 01-1.723 2.59 2.962 2.962 0 01-2.36-.759l-1.312 1.314a.498.498 0 01-.354.146l-.001-.002z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M43.36 49.61a1 1 0 01-.999-.975l-.073-2.865a4.328 4.328 0 011.61-2.757l.27-.276a10.43 10.43 0 002.94-7.407 11.08 11.08 0 00-11.12-11.03c-.752.001-1.502.065-2.242.191a10.94 10.94 0 00-5.866 18.25c.767.806 1.732 1.817 1.732 3.004v2.866a1 1 0 01-2 0v-2.866c0-.386-.782-1.208-1.116-1.558l-.073-.076a12.94 12.94 0 016.96-21.59 15.45 15.45 0 012.605-.224 13.08 13.08 0 0113.12 13.01 12.42 12.42 0 01-3.485 8.804l-.305.31c-.28.283-1.024 1.033-1.03 1.324l.073 2.84a1.001 1.001 0 01-.974 1.025h-.027zM22.14 53.32a2.616 2.616 0 01-1.744-.651 3.056 3.056 0 01-.885-2.558 3.264 3.264 0 01-1.881-.621 2.464 2.464 0 01-1.015-1.638 2.371 2.371 0 011.723-2.588 2.513 2.513 0 012.591.732l1.56-1.56a.5.5 0 01.707.707l-1.978 1.978a.495.495 0 01-.64.056.502.502 0 01-.154-.172 1.525 1.525 0 00-1.81-.78 1.4 1.4 0 00-1.008 1.483 1.476 1.476 0 00.62.978 2.36 2.36 0 001.802.386.486.486 0 01.455.155.5.5 0 01.114.467 2.266 2.266 0 00.465 2.228 1.774 1.774 0 002.624-.453c.097-.214.398-.877-.802-1.776a.501.501 0 01-.053-.753l1.433-1.433a.5.5 0 01.707.707l-1.048 1.048a2.187 2.187 0 01.672 2.626 2.64 2.64 0 01-1.867 1.37 2.86 2.86 0 01-.586.062h-.002zM22.5 27.49a.499.499 0 01-.354-.146l-1.381-1.382a2.956 2.956 0 01-2.358.759 2.378 2.378 0 01-1.723-2.61 2.46 2.46 0 011.014-1.618 3.264 3.264 0 011.88-.62 3.052 3.052 0 01.882-2.554 2.521 2.521 0 012.047-.612 3.123 3.123 0 012.12 1.327 2.204 2.204 0 01-.747 2.834c.306.293.733.71 1.238 1.26a.5.5 0 11-.734.677c-.611-.663-1.106-1.129-1.4-1.408l-.224-.215a.5.5 0 01.082-.773c.015-.01 1.483-.977.94-1.837a2.105 2.105 0 00-1.413-.874 1.51 1.51 0 00-1.244.368 2.235 2.235 0 00-.462 2.226.5.5 0 01-.569.62 2.352 2.352 0 00-1.8.385 1.468 1.468 0 00-.62.959 1.404 1.404 0 001.007 1.504c.508.149 1.413-.502 1.77-.838a.5.5 0 01.697.01l1.706 1.706a.5.5 0 01-.353.854l-.001-.002zM49.79 53.32c-.197 0-.394-.02-.587-.061a2.642 2.642 0 01-1.865-1.367 2.19 2.19 0 01.67-2.63l-1.048-1.048a.5.5 0 01.707-.707l1.434 1.434a.5.5 0 01-.055.752c-1.199.9-.898 1.562-.8 1.78a1.774 1.774 0 002.626.446 2.262 2.262 0 00.461-2.225.5.5 0 01.57-.621 2.374 2.374 0 001.802-.386 1.47 1.47 0 00.618-.958 1.402 1.402 0 00-1.006-1.504 1.526 1.526 0 00-1.81.78.5.5 0 01-.794.117l-.219-.227c-.292-.308-.837-.88-1.61-1.605a.5.5 0 11.682-.73 36 36 0 011.444 1.425 2.506 2.506 0 012.58-.723 2.375 2.375 0 011.722 2.61 2.458 2.458 0 01-1.013 1.617 3.272 3.272 0 01-1.88.62 3.054 3.054 0 01-.882 2.555 2.63 2.63 0 01-1.747.655v.001zM49.63 27.42a.5.5 0 01-.354-.854l1.636-1.636a.501.501 0 01.699-.012c.356.337 1.253.988 1.772.839a1.4 1.4 0 001.008-1.483 1.475 1.475 0 00-.622-.98 2.36 2.36 0 00-1.801-.384.5.5 0 01-.57-.622 2.264 2.264 0 00-.465-2.228 1.512 1.512 0 00-1.24-.363 2.108 2.108 0 00-1.415.877c-.541.856.927 1.823.942 1.833a.5.5 0 01.082.774l-1.501 1.5a.5.5 0 01-.707-.706l1.097-1.098a2.208 2.208 0 01-.758-2.84 3.121 3.121 0 012.122-1.33 2.522 2.522 0 012.043.608 3.058 3.058 0 01.886 2.559 3.264 3.264 0 011.88.619 2.468 2.468 0 011.016 1.638 2.371 2.371 0 01-1.723 2.59 2.962 2.962 0 01-2.36-.759l-1.312 1.314a.498.498 0 01-.354.146l-.001-.002z"
-  }), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
     d: "M67 56H5a1 1 0 01-1-1V17a1 1 0 011-1h62a1 1 0 011 1v38a1 1 0 01-1 1zM6 54h60V18H6v36z"
-  })));
+  }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(PirateFlagIcon);
 module.exports = ForwardRef;

package/data2/PlaneDepartureIcon.d.ts

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

package/data2/PlaneDepartureIcon.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 PlaneDepartureIcon({
   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 PlaneDepartureIcon({
     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: "#9b9b9a",
@@ -39,10 +77,14 @@ function PlaneDepartureIcon({
     strokeMiterlimit: 10,
     strokeWidth: 1.56
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M19.974 39.14L7.542 34.735 4.475 35.81l8.169 7.322M47.05 34.693l-24.605-2.052-2.093 1.493 16.754 5.979"
+    d: "M19.974 39.14L7.542 34.735 4.475 35.81l8.169 7.322m34.406-8.439l-24.605-2.052-2.093 1.493 16.754 5.979"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M43.174 31.323l11.15-4.486a10.312 10.312 0 014.172-.74c3.7.113 10.39.667 8.057 3.23-3.17 3.484-25.425 12.196-32.001 14.651s-14.712 3.75-20.337 3.86c-4.924.094.59-2.892.59-2.892s6.255-3.55 9.024-4.757l2.784-1.213"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(PlaneDepartureIcon);
 module.exports = ForwardRef;

package/data2/PlayIcon.d.ts

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

package/data2/PlayIcon.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 PlayIcon({
   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 PlayIcon({
     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",
@@ -30,6 +68,10 @@ function PlayIcon({
     strokeWidth: 2,
     d: "M19.582 55.606c.484.178 1.03.297 1.575.297.849 0 1.697-.297 2.425-.772l30-15.98.303-.296c.788-.772 1.212-1.723 1.212-2.792 0-1.07-.425-2.08-1.212-2.792l-.303-.297-30-16.098c-1.091-.832-2.667-1.01-4-.475-1.516.594-2.485 2.079-2.485 3.683v31.84c0 1.603.97 3.088 2.485 3.682z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(PlayIcon);
 module.exports = ForwardRef;

package/data2/PlayOrPauseIcon.d.ts

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

package/data2/PlayOrPauseIcon.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 PlayOrPauseIcon({
   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,18 +54,25 @@ function PlayOrPauseIcon({
     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: "M14.158 54.717c.42.17.895.283 1.368.283.737 0 1.474-.283 2.106-.737l26.052-15.254.263-.284C44.632 37.988 45 37.081 45 36.06s-.368-1.985-1.053-2.665l-.263-.284-26.052-15.367c-.948-.794-2.316-.964-3.474-.454-1.316.567-2.158 1.985-2.158 3.516V51.2c0 1.53.842 2.948 2.158 3.516zM60 17v38m-8-38v38",
     fill: "none",
     stroke: "#000",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeMiterlimit: 10,
     strokeWidth: 2
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M14.158 54.717c.42.17.895.283 1.368.283.737 0 1.474-.283 2.106-.737l26.052-15.254.263-.284C44.632 37.988 45 37.081 45 36.06s-.368-1.985-1.053-2.665l-.263-.284-26.052-15.367c-.948-.794-2.316-.964-3.474-.454-1.316.567-2.158 1.985-2.158 3.516V51.2c0 1.53.842 2.948 2.158 3.516zM60 17v38M52 17v38"
-  })));
+  }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(PlayOrPauseIcon);
 module.exports = ForwardRef;

package/data2/PlusIcon.d.ts

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