@datalayer/icons-react 1.0.6 → 1.0.8

package/data2/esm/MusicalNotesIcon.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 MusicalNotesIcon({
   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 MusicalNotesIcon({
     ref: svgRef,
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("g", {
     fill: "#3f3f3f"
@@ -56,8 +94,12 @@ function MusicalNotesIcon({
     cy: 45.71,
     r: 5
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M56.73 17.155h-5.97l.38 28.555M40.036 29.375h-5.969l.379 28.555M25.795 17.155h-5.969l.379 28.555"
+    d: "M56.73 17.155h-5.97l.38 28.555M40.036 29.375h-5.969l.379 28.555m-8.651-40.775h-5.969l.379 28.555"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(MusicalNotesIcon);
 export default ForwardRef;

package/data2/esm/MusicalScoreIcon.d.ts

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

package/data2/esm/MusicalScoreIcon.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 MusicalScoreIcon({
   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 MusicalScoreIcon({
     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",
@@ -35,6 +73,10 @@ function MusicalScoreIcon({
     cy: 57.146,
     r: 2
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(MusicalScoreIcon);
 export default ForwardRef;

package/data2/esm/NinjaIcon.d.ts

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

package/data2/esm/NinjaIcon.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 NinjaIcon({
   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,23 +54,27 @@ function NinjaIcon({
     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: "#3f3f3f",
     d: "M53.745 45.422c-1.934-1.958-4.658-2.951-8.094-2.951h-2.415a.14.14 0 01-.138-.12l-.154-.919c5.456-2.689 9.277-8.76 9.277-15.812 0-9.537-6.976-17.295-15.551-17.295S21.12 16.083 21.12 25.62c0 7.051 3.818 13.12 9.271 15.81l-.154.923a.14.14 0 01-.138.118h-2.415c-3.436 0-6.16.993-8.094 2.951-2.844 2.878-3.222 7.14-3.194 9.413v5.081a1 1 0 001 1h38.543a1 1 0 001-1v-5.07c.028-2.283-.35-6.546-3.194-9.424z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M36.667 19.097c7.66 0 14.105 1.427 15.381 9.545a19.146 19.146 0 00.248-3.022c0-9.537-6.975-17.295-15.55-17.295S21.194 16.083 21.194 25.62a19.133 19.133 0 00.248 3.022c1.276-8.118 7.565-9.545 15.224-9.545zM53.734 45.745a1.676 1.676 0 00-.11-.362.979.979 0 00-.124-.171.927.927 0 00-.077-.105c-.022-.02-.047-.037-.069-.057l-.01-.009a11.14 11.14 0 00-7.687-2.57H43.33a.96.96 0 00-.227.046c-.028.007-.056.007-.083.016a.97.97 0 00-.281.152c-.016.012-.034.02-.05.033a.979.979 0 00-.182.216.6.6 0 00-.132.314.94.94 0 00-.04.127c-.005.043-.496 4.175-5.614 9.393-5.118-5.228-5.616-9.336-5.62-9.387a.92.92 0 00-.043-.143.992.992 0 00-.06-.198.96.96 0 00-.093-.138.991.991 0 00-.14-.17 1.014 1.014 0 00-.126-.085.678.678 0 00-.378-.145.946.946 0 00-.156-.031H27.69a11.162 11.162 0 00-7.687 2.562.94.94 0 00-.09.122.98.98 0 00-.114.151 1.83 1.83 0 00-.114.363.984.984 0 00.008.216.927.927 0 00.006.134 26.376 26.376 0 0010.266 14.699.995.995 0 00.596.198H44.28a1 1 0 00.963-.729.99.99 0 00-.122-.789 25.995 25.995 0 008.599-13.312.959.959 0 00.006-.137.977.977 0 00.009-.204z"
+    d: "M36.667 19.097c7.66 0 14.105 1.427 15.381 9.545a19.146 19.146 0 00.248-3.022c0-9.537-6.975-17.295-15.55-17.295S21.194 16.083 21.194 25.62a19.133 19.133 0 00.248 3.022c1.276-8.118 7.565-9.545 15.224-9.545zm17.067 26.648a1.676 1.676 0 00-.11-.362.979.979 0 00-.124-.171.927.927 0 00-.077-.105c-.022-.02-.047-.037-.069-.057l-.01-.009a11.14 11.14 0 00-7.687-2.57H43.33a.96.96 0 00-.227.046c-.028.007-.056.007-.083.016a.97.97 0 00-.281.152c-.016.012-.034.02-.05.033a.979.979 0 00-.182.216.6.6 0 00-.132.314.94.94 0 00-.04.127c-.005.043-.496 4.175-5.614 9.393-5.118-5.228-5.616-9.336-5.62-9.387a.92.92 0 00-.043-.143.992.992 0 00-.06-.198.96.96 0 00-.093-.138.991.991 0 00-.14-.17 1.014 1.014 0 00-.126-.085.678.678 0 00-.378-.145.946.946 0 00-.156-.031H27.69a11.162 11.162 0 00-7.687 2.562.94.94 0 00-.09.122.98.98 0 00-.114.151 1.83 1.83 0 00-.114.363.984.984 0 00.008.216.927.927 0 00.006.134 26.376 26.376 0 0010.266 14.699.995.995 0 00.596.198H44.28a1 1 0 00.963-.729.99.99 0 00-.122-.789 25.995 25.995 0 008.599-13.312.959.959 0 00.006-.137.977.977 0 00.009-.204z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#3f3f3f",
     d: "M17.748 44.983a.999.999 0 00.857.487.968.968 0 00.21-.023 1 1 0 00.783-.861l.768-6.566a1 1 0 00-.821-1.101l-5.25-.915c-.018-.003-.035.001-.053-.001a.981.981 0 00.066-.217L15.73 25.75a1 1 0 00-1.52-.989L8.8 28.137a1 1 0 00-.328 1.362z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#d0cfce",
     d: "M26.736 43.013l-11.147-17.93a1 1 0 00-1.843.41l-1.232 10.35a1 1 0 00.819 1.102l6.048 1.065-.919 7.724a1 1 0 00.819 1.103 12.231 12.231 0 017.455-3.824z"
-  }), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     fill: "#fcea2b",
     d: "M50.286 22.777c-2.352-2.849-6.937-4.294-13.628-4.294-6.38 0-10.861 1.41-13.315 4.192a7.144 7.144 0 00-1.87 5.193 18.494 18.494 0 001.271 4.99l.064.104-.193.162.232-.096a.781.781 0 00.115.112l.052.048a.76.76 0 00.154.076l-.064.245.124-.217a.774.774 0 00.174.03l.044-.001a.72.72 0 00.225-.037c.079-.025 8.122-2.623 12.987-2.623 5.593 0 13.086 2.219 13.161 2.241a.75.75 0 00.922-.472l.052-.119a18.709 18.709 0 001.05-4.44v-.016a6.68 6.68 0 00-1.557-5.078z"
-  })), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "#000",
     strokeLinecap: "round",
@@ -49,16 +87,16 @@ function NinjaIcon({
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    d: "M14.206 30.088l-.698 5.873 8.621 1.532M20.07 40.625l-.623 5.233"
+    d: "M14.206 30.088l-.698 5.873 8.621 1.532m-2.059 3.132l-.623 5.233"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M42.745 24.944a2 2 0 11-2-2 2 2 0 012 2M34.745 24.944a2 2 0 11-2-2 2 2 0 012 2"
+    d: "M42.745 24.944a2 2 0 11-2-2 2 2 0 012 2m-8 0a2 2 0 11-2-2 2 2 0 012 2"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "#000",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    d: "M17.393 59.916v-5.081c-.044-3.635.96-11.365 10.288-11.365h2.415a1.14 1.14 0 001.125-.953l.277-1.661M55.937 59.916v-5.081c.044-3.635-.96-11.365-10.288-11.365h-2.415a1.14 1.14 0 01-1.125-.953l-.277-1.661"
+    d: "M17.393 59.916v-5.081c-.044-3.635.96-11.365 10.288-11.365h2.415a1.14 1.14 0 001.125-.953l.277-1.661m24.439 19.06v-5.081c.044-3.635-.96-11.365-10.288-11.365h-2.415a1.14 1.14 0 01-1.125-.953l-.277-1.661"
   }), /*#__PURE__*/React.createElement("ellipse", {
     cx: 36.667,
     cy: 25.62,
@@ -75,8 +113,12 @@ function NinjaIcon({
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    d: "M23.448 32.435s8.196-2.66 13.22-2.66c5.752 0 13.374 2.273 13.374 2.273M22.229 27.652s-1.07-8.555 14.439-8.555c16.087 0 14.436 8.555 14.436 8.555M30.096 43.47s.743 8.223 14.174 16.446M20.662 45.78c.78 3.177 3.091 9.074 9.89 14.137M43.32 43.47s-.432 4.792-6.611 10.717M52.74 45.843a25.17 25.17 0 01-9.244 13.59"
-  })));
+    d: "M23.448 32.435s8.196-2.66 13.22-2.66c5.752 0 13.374 2.273 13.374 2.273m-27.813-4.396s-1.07-8.555 14.439-8.555c16.087 0 14.436 8.555 14.436 8.555M30.096 43.47s.743 8.223 14.174 16.446M20.662 45.78c.78 3.177 3.091 9.074 9.89 14.137M43.32 43.47s-.432 4.792-6.611 10.717m16.031-8.344a25.17 25.17 0 01-9.244 13.59"
+  }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(NinjaIcon);
 export default ForwardRef;

package/data2/esm/NotebookIcon.d.ts

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

package/data2/esm/NotebookIcon.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 NotebookIcon({
   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,17 +54,17 @@ function NotebookIcon({
     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: "#FFF",
     d: "M11 57.697h49V11.909H15.998l-4 4z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#9b9b9a",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeMiterlimit: 10,
-    strokeWidth: 2,
     d: "M55.002 60.91H11.998a.999.999 0 01-.998-1V16.909c0-.552.447-.999.999-.999H55c.552 0 .999.447.999.999V59.91a.999.999 0 01-.998.998z"
   }), /*#__PURE__*/React.createElement("g", {
     fill: "none",
@@ -44,8 +78,12 @@ function NotebookIcon({
   }), /*#__PURE__*/React.createElement("path", {
     d: "M55.002 60.91H11.998a.999.999 0 01-.998-1V16.909c0-.552.447-.999.999-.999H55c.552 0 .999.447.999.999V59.91a.999.999 0 01-.998.998z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M47.358 29.799h-4v7h4M43.358 33.298h3M19.642 36.798v-7l5 7v-7M30.858 36.798h0a2.5 2.5 0 01-2.5-2.5v-2a2.5 2.5 0 012.5-2.5h0a2.5 2.5 0 012.5 2.5v2a2.5 2.5 0 01-2.5 2.5zM36.358 29.829h4M38.358 29.829v7"
+    d: "M47.358 29.799h-4v7h4m-4-3.501h3m-26.716 3.5v-7l5 7v-7m6.216 7h0a2.5 2.5 0 01-2.5-2.5v-2a2.5 2.5 0 012.5-2.5h0a2.5 2.5 0 012.5 2.5v2a2.5 2.5 0 01-2.5 2.5zm5.5-6.969h4m-2 0v7"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(NotebookIcon);
 export default ForwardRef;

package/data2/esm/OnPremiseIcon.d.ts

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

package/data2/esm/OnPremiseIcon.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 OnPremiseIcon({
   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 OnPremiseIcon({
     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",
@@ -40,6 +78,10 @@ function OnPremiseIcon({
     d: "M15.934 30.255a.905.905 0 01-.802.813C9.97 31.618 6 36.7 6 42.885c0 6.553 4.545 11.865 10.15 11.865h38.698C61.008 54.75 66 49.136 66 42.211c0-6.637-4.587-12.07-10.392-12.51a.964.964 0 01-.885-.78c-1.297-6.656-7.276-11.658-14.346-11.658-4.597 0-8.691 2.082-11.349 5.393-.258.322-.69.47-1.07.31-1.025-.431-2.107-.64-3.318-.64-4.567 0-8.316 3.486-8.705 7.93z",
     transform: "matrix(.9581 0 0 1.01006 1.698 7.725)"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(OnPremiseIcon);
 export default ForwardRef;

package/data2/esm/OpenHandsIcon.d.ts

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

package/data2/esm/OpenHandsIcon.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 OpenHandsIcon({
   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,21 +54,27 @@ function OpenHandsIcon({
     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: "M6.523 24.298a2.51 2.51 0 10-3.565 3.47l9.417 9.675.894.885-5.153-5.343a2.51 2.51 0 10-3.564 3.47l6.443 6.62 5.094 5.04c4.389 3.963 10.743 2.954 14.705-1.434a13.94 13.94 0 003.553-9.238c-.087-3.02-.729-10.864-.729-10.864-.35-1.82-2.595-2.925-2.75-1.946l-2.625 7.3-2.733-2.694 2.733 2.694-2.733-2.694-10.96-11a2.51 2.51 0 10-3.564 3.47l3.47 3.565 4.77 4.941L8.74 19.376a2.51 2.51 0 10-3.565 3.47l9.552 9.718m51.097-8.266a2.51 2.51 0 113.564 3.47l-9.417 9.675-.893.885 5.152-5.343a2.51 2.51 0 113.565 3.47l-6.443 6.62-5.094 5.04c-4.39 3.963-10.744 2.954-14.705-1.434A13.94 13.94 0 0138 37.443c.087-3.02.729-10.864.729-10.864.349-1.82 2.595-2.925 2.75-1.946l2.625 7.3 2.733-2.694-2.733 2.694 2.733-2.694 10.96-11a2.51 2.51 0 113.564 3.47l-3.47 3.565-4.771 4.942 10.487-10.84a2.51 2.51 0 113.565 3.47l-9.553 9.718",
     fill: "#fcea2b"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M6.523 24.298a2.51 2.51 0 10-3.565 3.47l9.417 9.675.894.885-5.153-5.343a2.51 2.51 0 10-3.564 3.47l6.443 6.62 5.094 5.04c4.389 3.963 10.743 2.954 14.705-1.434a13.94 13.94 0 003.553-9.238c-.087-3.02-.729-10.864-.729-10.864-.35-1.82-2.595-2.925-2.75-1.946l-2.625 7.3-2.733-2.694 2.733 2.694-2.733-2.694-10.96-11a2.51 2.51 0 10-3.564 3.47l3.47 3.565 4.77 4.941L8.74 19.376a2.51 2.51 0 10-3.565 3.47l9.552 9.718M65.824 24.298a2.51 2.51 0 113.564 3.47l-9.417 9.675-.893.885 5.152-5.343a2.51 2.51 0 113.565 3.47l-6.443 6.62-5.094 5.04c-4.39 3.963-10.744 2.954-14.705-1.434A13.94 13.94 0 0138 37.443c.087-3.02.729-10.864.729-10.864.349-1.82 2.595-2.925 2.75-1.946l2.625 7.3 2.733-2.694-2.733 2.694 2.733-2.694 10.96-11a2.51 2.51 0 113.564 3.47l-3.47 3.565-4.771 4.942 10.487-10.84a2.51 2.51 0 113.565 3.47l-9.553 9.718"
-  })), /*#__PURE__*/React.createElement("g", {
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6.523 24.298a2.51 2.51 0 10-3.565 3.47l9.417 9.675.894.885-5.153-5.343a2.51 2.51 0 10-3.564 3.47l6.443 6.62 5.094 5.04c4.389 3.963 10.743 2.954 14.705-1.434a13.94 13.94 0 003.553-9.238c-.087-3.02-.729-10.864-.729-10.864-.35-1.82-2.595-2.925-2.75-1.946l-2.625 7.3-2.733-2.694 2.733 2.694-2.733-2.694-10.96-11a2.51 2.51 0 10-3.564 3.47l3.47 3.565 4.77 4.941L8.74 19.376a2.51 2.51 0 10-3.565 3.47l9.552 9.718m51.097-8.266a2.51 2.51 0 113.564 3.47l-9.417 9.675-.893.885 5.152-5.343a2.51 2.51 0 113.565 3.47l-6.443 6.62-5.094 5.04c-4.39 3.963-10.744 2.954-14.705-1.434A13.94 13.94 0 0138 37.443c.087-3.02.729-10.864.729-10.864.349-1.82 2.595-2.925 2.75-1.946l2.625 7.3 2.733-2.694-2.733 2.694 2.733-2.694 10.96-11a2.51 2.51 0 113.564 3.47l-3.47 3.565-4.771 4.942 10.487-10.84a2.51 2.51 0 113.565 3.47l-9.553 9.718",
     fill: "none",
     stroke: "#000",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M6.523 24.298a2.51 2.51 0 10-3.565 3.47l9.417 9.675.894.885-5.153-5.343a2.51 2.51 0 10-3.564 3.47l6.443 6.62 5.094 5.04c4.389 3.963 10.743 2.954 14.705-1.434a13.94 13.94 0 003.553-9.238c-.087-3.02-.729-10.864-.729-10.864-.35-1.82-2.595-2.925-2.75-1.946l-2.625 7.3-2.733-2.694 2.733 2.694-2.733-2.694-10.96-11a2.51 2.51 0 10-3.564 3.47l3.47 3.565 4.77 4.941L8.74 19.376a2.51 2.51 0 10-3.565 3.47l9.552 9.718M65.824 24.298a2.51 2.51 0 113.564 3.47l-9.417 9.675-.893.885 5.152-5.343a2.51 2.51 0 113.565 3.47l-6.443 6.62-5.094 5.04c-4.39 3.963-10.744 2.954-14.705-1.434A13.94 13.94 0 0138 37.443c.087-3.02.729-10.864.729-10.864.349-1.82 2.595-2.925 2.75-1.946l2.625 7.3 2.733-2.694-2.733 2.694 2.733-2.694 10.96-11a2.51 2.51 0 113.564 3.47l-3.47 3.565-4.771 4.942 10.487-10.84a2.51 2.51 0 113.565 3.47l-9.553 9.718"
-  })));
+  }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(OpenHandsIcon);
 export default ForwardRef;

package/data2/esm/OpenfoodfactIcon.d.ts

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

package/data2/esm/OpenfoodfactIcon.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 OpenfoodfactIcon({
   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 OpenfoodfactIcon({
     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",
@@ -39,7 +77,7 @@ function OpenfoodfactIcon({
     stroke: "#FCEA2B",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    d: "M37 37h5v21h-5zM36 23h8v14h-8z"
+    d: "M37 37h5v21h-5zm-1-14h8v14h-8z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#B1CC33",
     stroke: "#B1CC33",
@@ -76,7 +114,7 @@ function OpenfoodfactIcon({
     d: "M47 19.5V30"
   }), /*#__PURE__*/React.createElement("path", {
     strokeLinejoin: "round",
-    d: "M37 41v17h5V41M45 40.653V58h8V36M57 30h3v28h-4V33"
+    d: "M37 41v17h5V41m3-.347V58h8V36m4-6h3v28h-4V33"
   }), /*#__PURE__*/React.createElement("path", {
     strokeLinejoin: "round",
     strokeMiterlimit: 10,
@@ -84,10 +122,14 @@ function OpenfoodfactIcon({
   }), /*#__PURE__*/React.createElement("path", {
     strokeLinejoin: "round",
     strokeMiterlimit: 10,
-    d: "M49.639 30.267c3.285-5.01 1.774-11.663-3.374-14.86-5.15-3.196-11.986-1.726-15.271 3.284-3.286 5.01-1.775 11.662 3.373 14.859 5.15 3.197 11.986 1.727 15.272-3.283zM27.777 38.444l4.364 2.709-10.396 15.853c-.743 1.133-2.322 1.444-3.526.696-1.205-.748-1.58-2.272-.838-3.405l10.396-15.853z"
+    d: "M49.639 30.267c3.285-5.01 1.774-11.663-3.374-14.86-5.15-3.196-11.986-1.726-15.271 3.284-3.286 5.01-1.775 11.662 3.373 14.859 5.15 3.197 11.986 1.727 15.272-3.283zm-21.862 8.177l4.364 2.709-10.396 15.853c-.743 1.133-2.322 1.444-3.526.696-1.205-.748-1.58-2.272-.838-3.405l10.396-15.853z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M33 21v8"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(OpenfoodfactIcon);
 export default ForwardRef;

package/data2/esm/OpenstreetmapIcon.d.ts

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