@datalayer/icons-react 1.0.7 → 1.0.9

package/eggs/AcDcIcon.js

@@ -6,26 +6,69 @@ const sizeMap = {
   "large": 64
 };
 
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  React.useLayoutEffect(() => {
+    if (typeof mode === "string") {
+      setResolved(mode);
+      return;
+    }
+    if (typeof document === "undefined") return;
+    let cur = null;
+    let el = ref.current && ref.current.parentElement;
+    while (el) {
+      const m = el.getAttribute && el.getAttribute("data-color-mode");
+      if (m) { cur = m; break; }
+      el = el.parentElement;
+    }
+    if (!cur || cur === "auto") {
+      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setResolved(cur === "dark" ? "light" : "dark");
+  }, [mode]);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    "data-color-mode": resolved || "light",
+    "data-light-theme": "light",
+    "data-dark-theme": "dark",
+    style: { display: "inline-flex", lineHeight: 0 }
+  }, children);
+}
+
 function AcDcIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormode,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "52.5 5.5 497 497",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
-    "aria-hidden": "true",
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    d: "M158.704 298.322l-26.03 26.03-25.826-26.03 11.591-11.592v-23.793H93.426v23.793l11.592 11.592-26.03 26.03-25.827-26.03 11.591-11.592V181.797l42.91-42.502 39.45 39.451V286.73zm-40.265-65.279V195.83l-25.013-25.014v62.228zM248.993 180.983l-21.76 21.353-30.91-31.52v106.763l7.524 7.321 23.387-23.59 20.946 20.54-42.706 42.502-37.825-37.622V178.746l39.859-39.655zM345.181 225.52l-75.04 104.526 26.234-75.65H270.14l34.165-78.497h32.334l-18.302 49.62zM446.86 290.39l-33.555 33.96H374.87l-22.571-23.183 12.201-11.998v-114.49l-12.405-12.405 22.775-22.776h38.436l33.555 33.961zm-28.674-16.268v-84.394l-25.014-24.2v132.794zM548.742 180.983l-21.758 21.353-30.91-31.52v106.763l7.524 7.321 23.386-23.59 20.946 20.54-42.705 42.502L467.4 286.73V178.746l39.859-39.655z"
+    d: "M158.704 298.322l-26.03 26.03-25.826-26.03 11.591-11.592v-23.793H93.426v23.793l11.592 11.592-26.03 26.03-25.827-26.03 11.591-11.592V181.797l42.91-42.502 39.45 39.451V286.73zm-40.265-65.279V195.83l-25.013-25.014v62.228zm130.554-52.06l-21.76 21.353-30.91-31.52v106.763l7.524 7.321 23.387-23.59 20.946 20.54-42.706 42.502-37.825-37.622V178.746l39.859-39.655zm96.188 44.537l-75.04 104.526 26.234-75.65H270.14l34.165-78.497h32.334l-18.302 49.62zm101.679 64.87l-33.555 33.96H374.87l-22.571-23.183 12.201-11.998v-114.49l-12.405-12.405 22.775-22.776h38.436l33.555 33.961zm-28.674-16.268v-84.394l-25.014-24.2v132.794zm130.556-93.139l-21.758 21.353-30.91-31.52v106.763l7.524 7.321 23.386-23.59 20.946 20.54-42.705 42.502L467.4 286.73V178.746l39.859-39.655z"
   }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(AcDcIcon);
 module.exports = ForwardRef;

package/eggs/AcDcRedNoopIcon.d.ts

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

package/eggs/AcDcRedNoopIcon.js

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

package/eggs/ECharlesIcon.d.ts

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

package/eggs/ECharlesIcon.js

@@ -6,25 +6,64 @@ 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 ECharlesIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormode,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 243.75 243.75",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
-    "aria-hidden": "true",
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("g", {
-    fill: colored ? '#fff' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#fff') ? 'white' : 'currentColor'),
+    fill: colored ? '#fff' : 'white',
     strokeWidth: 2.928,
     transform: "translate(0 -308.268)"
   }, /*#__PURE__*/React.createElement("circle", {
@@ -51,7 +90,7 @@ function ECharlesIcon({
   }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     stroke: "#f75c59",
-    d: "M125.32 482.957l-.306 32.361c1.317 11.059 11.072 8.629 10.99-.61v-31.751zM139.957 482.957l-.305 32.361c1.317 11.059 11.072 8.629 10.99-.61v-31.751z"
+    d: "M125.32 482.957l-.306 32.361c1.317 11.059 11.072 8.629 10.99-.61v-31.751zm14.637 0l-.305 32.361c1.317 11.059 11.072 8.629 10.99-.61v-31.751z"
   }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     stroke: "#f8d05b",
@@ -60,8 +99,12 @@ function ECharlesIcon({
     fillRule: "evenodd",
     stroke: "#f75c59",
     strokeLinejoin: "round",
-    d: "M131.627 399.814c1.778-4.471 12.628-9.482 19.487-14.062 7.117 3.213 17.741 13.145 12.804 25.555-1.265 4.901-28.05 4.544-30.224 2.137-4.481-4.606-3.115-10.024-2.067-13.63zM128.198 428.251c-.91 7.576-.577 13.909-.763 20.76 3.425.788 7.262.337 11.082-.062-2.75-6.95-5.704-13.748-10.319-20.698z"
+    d: "M131.627 399.814c1.778-4.471 12.628-9.482 19.487-14.062 7.117 3.213 17.741 13.145 12.804 25.555-1.265 4.901-28.05 4.544-30.224 2.137-4.481-4.606-3.115-10.024-2.067-13.63zm-3.429 28.437c-.91 7.576-.577 13.909-.763 20.76 3.425.788 7.262.337 11.082-.062-2.75-6.95-5.704-13.748-10.319-20.698z"
   })));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(ECharlesIcon);
 module.exports = ForwardRef;

package/eggs/FingersHornIcon.d.ts

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

package/eggs/FingersHornIcon.js

@@ -6,22 +6,61 @@ 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 FingersHornIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormode,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 72 72",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
-    "aria-hidden": "true",
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("g", {
     fill: "#fcea2b"
@@ -32,13 +71,13 @@ function FingersHornIcon({
   }), /*#__PURE__*/React.createElement("path", {
     d: "M33.44 29.64v-.94c.04.31.04.63 0 .94z"
   })), /*#__PURE__*/React.createElement("g", {
-    fill: colored ? 'none' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('none') ? 'white' : 'currentColor'),
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#000",
     strokeLinecap: "round",
     strokeWidth: 2
   }, /*#__PURE__*/React.createElement("path", {
     strokeMiterlimit: 10,
-    d: "M18.771 52.956c1.142 8.6 8.54 14.985 17.214 14.857 9.667 0 17.893-6.832 17.893-16.877v-.001l-.658-11.13a4.308 4.308 0 00-4.236-3.992h-10a3.786 3.786 0 00-4 3.5 4.327 4.327 0 003.976 3.942l1.05.117c2.186.242 3.975 1.342 3.975 2.442v2.44a12.445 12.445 0 00-5.777 2.958M18.771 52.956c-.39-2.89-1.063-7.873-1.063-14.873M17.708 38.083l-1.937-18.515M22 17.917l.944 8.69M43.5 8.25l-.458 14.91M51.875 8.458l.5 24.834M15.77 19.568c-.723-7.73 5.499-7.596 6.23-1.651M43.5 8.25c0-5.875 8.375-5.188 8.375.208"
+    d: "M18.771 52.956c1.142 8.6 8.54 14.985 17.214 14.857 9.667 0 17.893-6.832 17.893-16.877v-.001l-.658-11.13a4.308 4.308 0 00-4.236-3.992h-10a3.786 3.786 0 00-4 3.5 4.327 4.327 0 003.976 3.942l1.05.117c2.186.242 3.975 1.342 3.975 2.442v2.44a12.445 12.445 0 00-5.777 2.958m-19.437 1.744c-.39-2.89-1.063-7.873-1.063-14.873m0 0l-1.937-18.515M22 17.917l.944 8.69M43.5 8.25l-.458 14.91m8.833-14.702l.5 24.834M15.77 19.568c-.723-7.73 5.499-7.596 6.23-1.651M43.5 8.25c0-5.875 8.375-5.188 8.375.208"
   }), /*#__PURE__*/React.createElement("path", {
     strokeLinejoin: "round",
     d: "M31.318 40.639c-3.322 1.227-4.997-1.935-4.874-4v-7a3.531 3.531 0 117 0"
@@ -46,6 +85,10 @@ function FingersHornIcon({
     strokeLinejoin: "round",
     d: "M33.506 34.004v-5.318a3.531 3.531 0 117 0l.03 3.504"
   })));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(FingersHornIcon);
 module.exports = ForwardRef;

package/eggs/FlexedBicepsIcon.d.ts

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

package/eggs/FlexedBicepsIcon.js

@@ -6,22 +6,61 @@ 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 FlexedBicepsIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormode,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 72 72",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
-    "aria-hidden": "true",
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("g", {
     fill: "#FCEA2B"
@@ -36,21 +75,25 @@ function FlexedBicepsIcon({
   }, /*#__PURE__*/React.createElement("path", {
     d: "M21.922 26.23s5.344-4.986 1.615-6.38l12.76-.419.672-1.142.22-1.844c1.07.178 3.364.946 3.64 1.012 0 0 2.405 1.873.45 4.093l-7.78 2.235s-4.723 3.803-11.577 2.445z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M21.922 26.23c.794 9.218 2.56 25.641 2.07 27.745-.045.7.655.81 1.012.296.829-.667 2.767-2.597 3.818-5.195 0-5.762-.666-12.458-2.219-22.262-.57-1.585-2.939-1.566-4.681-.584zM48.199 34.1s10.239 6.972 3.106 16.42c0 0 2.132 8.516.155 9.85-1.977 1.334 20.619-5.545 12.136-18.563 0 0-5.158-7.573-15.397-7.708z"
+    d: "M21.922 26.23c.794 9.218 2.56 25.641 2.07 27.745-.045.7.655.81 1.012.296.829-.667 2.767-2.597 3.818-5.195 0-5.762-.666-12.458-2.219-22.262-.57-1.585-2.939-1.566-4.681-.584zm26.277 7.87s10.239 6.972 3.106 16.42c0 0 2.132 8.516.155 9.85-1.977 1.334 20.619-5.545 12.136-18.563 0 0-5.158-7.573-15.397-7.708z"
   })), /*#__PURE__*/React.createElement("g", {
-    fill: colored ? 'none' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('none') ? 'white' : 'currentColor'),
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#000",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeMiterlimit: 10,
     strokeWidth: 2
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M27.468 40.552c-.428-4.28-1.132-12.72-1.954-13.754 0 0 5.2 1.11 7.811-2.974M34.503 53.088s10.802 2.701 19.287-4.327"
+    d: "M27.468 40.552c-.428-4.28-1.132-12.72-1.954-13.754 0 0 5.2 1.11 7.811-2.974m1.178 29.264s10.802 2.701 19.287-4.327"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M27.72 50.631s2.868-14.473 16.368-16.393S64.3 42.753 64.3 42.753s.23.275.527.77c2.073 3.456 1.25 7.934-1.803 10.564-10.992 9.464-26.426 11.712-46.518 11.597 0 0-3.75 1.145-4.61-3.574 0 0-.769-20.94 3.818-35.627 0 0-.197-6 .03-9.928.04-.67.334-1.297.827-1.752 5.78-5.332 8.375-6.115 8.375-6.115l8.388-1.484c1.436.984 4.725 4.739 3.57 11.495"
+    d: "M27.72 50.631s2.868-14.473 16.368-16.393S64.3 42.753 64.3 42.753s.23.275.527.77c2.073 3.456 1.25 7.934-1.803 10.564-10.992 9.464-26.426 11.712-46.518 11.597 0 0-3.75 1.145-4.61-3.574 0 0-.769-20.94 3.818-35.627 0 0-.197-6 .03-9.928a2.59 2.59 0 01.827-1.752c5.78-5.332 8.375-6.115 8.375-6.115l8.388-1.484c1.436.984 4.725 4.739 3.57 11.495"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M25.589 19.295s1.816 2.59 3.632-.284V16l-.46-1.658-.36-.278M29.544 19.295s1.816 2.59 3.633-.284V16l-.873-2.125M36.82 19.011c-1.961 1.89-3.32 0-3.32 0M20.301 16.447a3.732 3.732 0 011.278 2.432c.033.288.131.57.336.774.595.594 1.959 1.517 3.323-.642V16l-.636-1.268M40.356 18.289c1.926.57 2.262 3.427-.702 4.1l-6.329 1.435"
+    d: "M25.589 19.295s1.816 2.59 3.632-.284V16l-.46-1.658-.36-.278m1.143 5.231s1.816 2.59 3.633-.284V16l-.873-2.125m4.516 5.136c-1.961 1.89-3.32 0-3.32 0m-13.199-2.564a3.732 3.732 0 011.278 2.432c.033.288.131.57.336.774.595.594 1.959 1.517 3.323-.642V16l-.636-1.268m15.754 3.557c1.926.57 2.262 3.427-.702 4.1l-6.329 1.435"
   })));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(FlexedBicepsIcon);
 module.exports = ForwardRef;

package/eggs/GoldorakNoopIcon.d.ts

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