@datalayer/icons-react 1.0.7 → 1.0.9

package/data1/esm/DragIndicatorIcon.d.ts

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

package/data1/esm/DragIndicatorIcon.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 DragIndicatorIcon({
   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",
-    fill: colored ? 'none' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('none') ? 'white' : 'currentColor'),
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     viewBox: "0 0 24 24",
-    "aria-hidden": "true",
     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("circle", {
     cx: 18,
@@ -54,6 +93,10 @@ function DragIndicatorIcon({
     r: 2,
     fill: "#757575"
   }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(DragIndicatorIcon);
 export default ForwardRef;

package/data1/esm/DragIndicatorLinesIcon.d.ts

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

package/data1/esm/DragIndicatorLinesIcon.js

@@ -6,29 +6,72 @@ 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 DragIndicatorLinesIcon({
   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",
-    fill: colored ? 'none' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('none') ? 'white' : 'currentColor'),
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     viewBox: "0 0 20 20",
-    "aria-hidden": "true",
     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", {
-    fill: colored ? '#757575' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#757575') ? 'white' : 'currentColor'),
+    fill: colored ? '#757575' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#fff",
     strokeWidth: 0.5,
-    d: "M17.39 5.646l1.381 1.381L7.028 18.771 5.647 17.39zM17.811 14.991l1.381 1.381-2.804 2.804-1.381-1.38zM17.48 10.438l1.381 1.38-7.049 7.05-1.38-1.381z"
+    d: "M17.39 5.646l1.381 1.381L7.028 18.771 5.647 17.39zm.421 9.345l1.381 1.381-2.804 2.804-1.381-1.38zm-.331-4.553l1.381 1.38-7.049 7.05-1.38-1.381z"
   }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(DragIndicatorLinesIcon);
 export default ForwardRef;

package/data1/esm/EditIcon.d.ts

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

package/data1/esm/EditIcon.js

@@ -6,27 +6,70 @@ 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 EditIcon({
   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",
-    fill: colored ? 'none' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('none') ? 'white' : 'currentColor'),
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
     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", {
-    fill: colored ? '#757575' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#757575') ? 'white' : 'currentColor'),
+    fill: colored ? '#757575' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M0 12.667V16h3.333l9.83-9.83L9.83 2.837 0 12.667zm15.74-9.074a.885.885 0 000-1.253L13.66.26a.885.885 0 00-1.253 0l-1.626 1.626 3.333 3.333 1.626-1.626z"
   }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(EditIcon);
 export default ForwardRef;

package/data1/esm/ElectronIcon.d.ts

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

package/data1/esm/ElectronIcon.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 ElectronIcon({
   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 32 32",
-    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: "M10.409 24.405l-.023-.001a.402.402 0 00-.378.541l-.001-.003c1.342 3.747 3.537 6.053 6.005 6.053a5.892 5.892 0 004.749-3.352l.015-.036a.402.402 0 00-.688-.416l-.001.002a5.15 5.15 0 01-4.05 2.995l-.025.003c-2.05 0-4.008-2.058-5.248-5.521a.404.404 0 00-.355-.266h-.001zm17.501-1.709h.001a1.12 1.12 0 11-.735 1.965l.001.001-.008-.015a.41.41 0 00-.118-.113l-.002-.001a1.12 1.12 0 01.86-1.836zm-23.82 0a1.12 1.12 0 11-.967.555l-.003.005a1.12 1.12 0 01.97-.56zm2.578-5.02h-.019a.402.402 0 00-.297.673 25.278 25.278 0 005.87 4.666l.122.065c5.517 3.185 11.379 4.105 14.447 2.298a1.925 1.925 0 10-.547-.604l-.005-.009c-2.805 1.517-8.286.625-13.493-2.381a24.564 24.564 0 01-5.786-4.561l-.013-.014a.4.4 0 00-.277-.131h-.001zM16 15.369a1.393 1.393 0 101.372 1.089l.002.009a1.4 1.4 0 00-1.365-1.098H16zm3.598-7.794a.386.386 0 00-.084.01h.003c-2.709.626-5.099 1.604-7.277 2.902l.115-.064c-5.711 3.297-9.488 8.116-9.197 11.711a1.922 1.922 0 10.934-.242h-.001c-.047 0-.094.004-.141.007-.125-3.199 3.428-7.674 8.807-10.78a23.805 23.805 0 016.764-2.716l.164-.032a.403.403 0 00-.086-.795h-.002zm3.372-.365a.401.401 0 00-.011.804h.001a5.16 5.16 0 014.677 2.019l.009.013c1.024 1.773.225 4.492-2.147 7.294a.401.401 0 10.613.521l.001-.001c2.566-3.032 3.462-6.081 2.23-8.216a5.912 5.912 0 00-5.397-2.431l.025-.002zM9.158 7.188a5.967 5.967 0 00-5.472 2.418l-.012.017a5.875 5.875 0 00-.52 2.438c0 1.331.435 2.56 1.17 3.553l-.011-.016a.403.403 0 00.746-.208.393.393 0 00-.05-.193l.001.002a5.198 5.198 0 01-1.049-3.144c0-.733.151-1.43.422-2.063l-.013.034c1.026-1.777 3.79-2.443 7.413-1.783a.402.402 0 10.146-.79h-.002a14.793 14.793 0 00-2.767-.262h-.002zm6.856-5.38a1.12 1.12 0 11-.967.555l-.003.005a1.12 1.12 0 01.97-.56zm0-.804h-.001a1.924 1.924 0 101.703 2.819l.005-.011c2.775 1.584 4.807 6.839 4.807 12.949l.001.183a24.41 24.41 0 01-1.078 7.198l.046-.173a.402.402 0 00.767.242l.001-.003c.678-2.174 1.068-4.674 1.068-7.264l-.001-.194v.01c0-6.489-2.214-12.104-5.399-13.749.001-.028.004-.055.004-.084a1.923 1.923 0 00-1.924-1.923z"
   }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(ElectronIcon);
 export default ForwardRef;

package/data1/esm/EtcdIcon.d.ts

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

package/data1/esm/EtcdIcon.js

@@ -6,30 +6,73 @@ 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 EtcdIcon({
   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: "-6.31 3.69 510.12 493.62",
-    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("defs", null, /*#__PURE__*/React.createElement("style", null, "\n      .cls-1{fill:#419eda}\n    ")), /*#__PURE__*/React.createElement("path", {
+  }, title) : null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("style", null, ".prefix__cls-1{fill:#419eda}")), /*#__PURE__*/React.createElement("path", {
     d: "M228.175 224.684a31.994 31.994 0 11-32.007-31.986 32.011 32.011 0 0132.007 31.986zm41.37 0a32.007 32.007 0 1032.007-31.986 31.988 31.988 0 00-32.007 31.986z",
-    className: "cls-1"
+    className: "prefix__cls-1"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M487.371 259.399a87.82 87.82 0 01-7.07.267 92.362 92.362 0 01-40.621-9.455 377.209 377.209 0 005.47-71.86 371.808 371.808 0 00-46.507-55.11 92.396 92.396 0 0132.772-35.102l6.016-3.729-4.695-5.3a244.906 244.906 0 00-85.524-62.377l-6.507-2.828-1.654 6.862a92.144 92.144 0 01-23.19 42.096 371.928 371.928 0 00-67.006-27.602 370.624 370.624 0 00-66.908 27.558 91.915 91.915 0 01-23.098-42.003l-1.681-6.884-6.486 2.817a247.232 247.232 0 00-85.518 62.355l-4.689 5.3 6.005 3.724a92.249 92.249 0 0132.695 34.917 374.63 374.63 0 00-46.425 54.908 376.956 376.956 0 005.328 72.334 92.115 92.115 0 01-40.376 9.374 86.36 86.36 0 01-7.086-.268l-7.053-.551.655 7.042a243.413 243.413 0 0032.897 100.678l3.581 6.098 5.372-4.575a92.052 92.052 0 0143.592-20.406 373.97 373.97 0 0037.308 60.76 377.717 377.717 0 0070.69 17.382 91.87 91.87 0 01-5.885 48.232l-2.686 6.54 6.9 1.529a246.355 246.355 0 0052.966 5.857l52.954-5.857 6.906-1.529-2.675-6.54a91.755 91.755 0 01-5.869-48.286 377.784 377.784 0 0070.407-17.328 372.3 372.3 0 0037.335-60.815 92.233 92.233 0 0143.81 20.428l5.377 4.553 3.587-6.049a242.844 242.844 0 0032.859-100.672l.655-7.037zM324.644 345.45a285.884 285.884 0 01-151.628 0 290.124 290.124 0 01-46.141-143.385 288.675 288.675 0 0154.957-52.315 293.065 293.065 0 0167.028-36.462 293.976 293.976 0 0166.891 36.364 290.886 290.886 0 0155.198 52.675 292.253 292.253 0 01-13.817 74.682 293.726 293.726 0 01-32.488 68.441z",
-    className: "cls-1"
+    className: "prefix__cls-1"
   }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(EtcdIcon);
 export default ForwardRef;

package/data1/esm/EtcdNameIcon.d.ts

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

package/data1/esm/EtcdNameIcon.js

@@ -6,46 +6,89 @@ 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 EtcdNameIcon({
   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",
-    id: "svg843",
+    id: "prefix__svg843",
     viewBox: "-8.17 -10.17 300 300",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     "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("defs", {
-    id: "defs835"
+    id: "prefix__defs835"
   }, /*#__PURE__*/React.createElement("style", {
     id: "style833"
-  }, "\n      .cls-1{fill:#419eda}\n    ")), /*#__PURE__*/React.createElement("g", {
-    id: "g851",
-    transform: "matrix(1.22483 0 0 1.22483 51.582 -142.314)"
+  }, ".prefix__cls-1{fill:#419eda}")), /*#__PURE__*/React.createElement("g", {
+    id: "prefix__g851",
+    transform: "translate(51.582 -142.314) scale(1.22483)"
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path837",
+    id: "prefix__path837",
     strokeWidth: 0.631,
     d: "M64.584 167.059a8.448 8.448 0 11-8.451-8.446 8.453 8.453 0 018.451 8.446zm10.924 0a8.452 8.452 0 108.452-8.446 8.446 8.446 0 00-8.452 8.446z",
-    className: "cls-1"
+    className: "prefix__cls-1"
   }), /*#__PURE__*/React.createElement("path", {
-    id: "path839",
+    id: "prefix__path839",
     strokeWidth: 0.631,
     d: "M133.025 176.226a23.114 23.114 0 01-1.866.07 24.388 24.388 0 01-10.727-2.496 99.603 99.603 0 001.445-18.975 98.177 98.177 0 00-12.28-14.552 24.397 24.397 0 018.653-9.269l1.589-.985-1.24-1.4a64.668 64.668 0 00-22.583-16.47l-1.718-.746-.437 1.812a24.331 24.331 0 01-6.123 11.115 98.208 98.208 0 00-17.693-7.288 97.865 97.865 0 00-17.667 7.276 24.27 24.27 0 01-6.1-11.09l-.443-1.818-1.713.744a65.282 65.282 0 00-22.581 16.464l-1.239 1.4 1.586.984a24.359 24.359 0 018.634 9.219 98.922 98.922 0 00-12.26 14.499 99.537 99.537 0 001.408 19.1 24.323 24.323 0 01-10.662 2.475 22.85 22.85 0 01-1.87-.07l-1.863-.146.173 1.86a64.273 64.273 0 008.686 26.584l.946 1.61 1.419-1.208a24.306 24.306 0 0111.51-5.389 98.747 98.747 0 009.85 16.044 99.737 99.737 0 0018.667 4.59 24.259 24.259 0 01-1.554 12.736l-.709 1.727 1.822.403a65.05 65.05 0 0013.985 1.547l13.983-1.547 1.823-.403-.706-1.728a24.228 24.228 0 01-1.55-12.75 99.755 99.755 0 0018.592-4.575 98.307 98.307 0 009.859-16.058 24.354 24.354 0 0111.567 5.394l1.42 1.202.947-1.597a64.123 64.123 0 008.677-26.583l.173-1.858zm-42.968 22.722a75.489 75.489 0 01-40.038 0 76.608 76.608 0 01-12.184-37.861 76.226 76.226 0 0114.512-13.815 77.385 77.385 0 0117.699-9.627 77.625 77.625 0 0117.663 9.602 76.809 76.809 0 0114.575 13.91 77.17 77.17 0 01-3.649 19.72 77.56 77.56 0 01-8.578 18.071z",
-    className: "cls-1"
+    className: "prefix__cls-1"
   })), /*#__PURE__*/React.createElement("path", {
-    id: "path841",
+    id: "prefix__path841",
     strokeWidth: 0.631,
     d: "M38.974 177.536c21.227 0 33.21 15.236 33.21 39.028a49.645 49.645 0 01-.515 7.701H15.523c1.027 17.976 11.814 29.275 27.73 29.275 7.873 0 14.547-2.57 20.711-6.506l4.963 9.242c-7.189 4.623-16.09 8.56-27.385 8.56-22.253 0-39.884-16.261-39.884-43.481 0-27.212 18.313-43.819 37.316-43.819zm20.885 37.487c0-16.947-7.532-26.358-20.542-26.358-11.64 0-22.253 9.583-23.965 26.358zm28.24-23.964H75.776v-10.612l13.008-.856 1.714-23.28h11.807v23.279h22.425v11.47h-22.425v46.218c0 10.272 3.256 16.09 12.84 16.09 2.911 0 6.677-1.197 9.416-2.227l2.734 10.615c-4.62 1.54-10.268 3.082-15.406 3.082-17.799 0-23.793-11.297-23.793-27.73v-46.05zm82.51-13.523c10.955 0 18.656 4.623 24.303 9.93l-7.016 9.07c-4.965-4.276-10.099-7.359-16.776-7.359-15.06 0-26.02 13.008-26.02 32.18 0 19.002 10.443 31.84 25.679 31.84 7.873 0 14.552-3.937 19.514-8.387l6.333 9.243c-7.532 6.676-17.12 10.784-27.049 10.784-22.076 0-39.024-15.92-39.024-43.48.001-27.9 18.66-43.82 40.055-43.82zm65.732 0c9.585 0 15.917 3.595 23.279 9.588l-.686-14.208v-32.01h14.207V262.78h-11.636l-1.202-9.756h-.511c-6.506 6.334-15.404 11.812-25.164 11.812-20.882 0-34.404-15.75-34.404-43.481 0-27.042 17.116-43.819 36.117-43.819zm1.368 75.488c7.702 0 14.38-3.766 21.226-11.466v-43.482c-7.02-6.333-13.351-8.73-20.198-8.73-13.353 0-23.964 12.837-23.964 31.84 0 19.857 8.386 31.838 22.936 31.838z"
   }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(EtcdNameIcon);
 export default ForwardRef;

package/data1/esm/EuroIcon.d.ts

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

package/data1/esm/EuroIcon.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 EuroIcon({
   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: "-75 -60 120 120",
-    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: "M-69.843-15h102.02L28.02-5H-74zm0 20h93.706l-4.157 10H-74zM39.302-32.14a50 50 0 100 64.28v14.044a60 60 0 114.232-88.503z"
   }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(EuroIcon);
 export default ForwardRef;

package/data1/esm/FastForwardIcon.d.ts

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