@datalayer/icons-react 1.0.7 → 1.0.9

package/data2/esm/AtomSymbolIcon.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 AtomSymbolIcon({
   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 72 72",
     fill: "currentColor",
@@ -20,7 +54,11 @@ function AtomSymbolIcon({
     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: "#92D3F5",
@@ -29,10 +67,10 @@ function AtomSymbolIcon({
     strokeMiterlimit: 10
   }, /*#__PURE__*/React.createElement("path", {
     strokeWidth: 1.8,
-    d: "M28.127 22.764a69.81 69.81 0 00-.848 7.426c-3.347 1.87-6.345 3.846-8.867 5.81-6.16-4.8-9.46-9.53-8.077-12.435 1.57-3.3 8.693-3.405 17.792-.801zM62.642 48.435c-1.57 3.3-8.693 3.405-17.804.802a76.329 76.329 0 01-8.344-2.952 75.65 75.65 0 01-4.044-1.79 89.359 89.359 0 01-5.171-2.673 85.79 85.79 0 010-11.632 89.391 89.391 0 015.171-2.673 75.948 75.948 0 014.044-1.801 91.833 91.833 0 014.033 1.8 82.302 82.302 0 015.16 2.662 85.923 85.923 0 010 11.656c3.358-1.883 6.356-3.858 8.878-5.834 6.16 4.8 9.46 9.53 8.077 12.435z"
+    d: "M28.127 22.764a69.81 69.81 0 00-.848 7.426c-3.347 1.87-6.345 3.846-8.867 5.81-6.16-4.8-9.46-9.53-8.077-12.435 1.57-3.3 8.693-3.405 17.792-.801zm34.515 25.671c-1.57 3.3-8.693 3.405-17.804.802a76.329 76.329 0 01-8.344-2.952 75.65 75.65 0 01-4.044-1.79 89.359 89.359 0 01-5.171-2.673 85.79 85.79 0 010-11.632 89.391 89.391 0 015.171-2.673 75.948 75.948 0 014.044-1.801 91.833 91.833 0 014.033 1.8 82.302 82.302 0 015.16 2.662 85.923 85.923 0 010 11.656c3.358-1.883 6.356-3.858 8.878-5.834 6.16 4.8 9.46 9.53 8.077 12.435z"
   }), /*#__PURE__*/React.createElement("path", {
     strokeWidth: 1.8,
-    d: "M44.838 49.236c-1.545 9.344-4.706 15.724-8.355 15.724-3.65 0-6.81-6.38-8.356-15.724 2.65-.755 5.462-1.743 8.367-2.951a76.315 76.315 0 008.344 2.951zM44.838 22.764a76.329 76.329 0 00-8.344 2.951c-2.905-1.208-5.717-2.196-8.367-2.951C29.684 13.42 32.834 7.04 36.483 7.04s6.798 6.38 8.355 15.724z"
+    d: "M44.838 49.236c-1.545 9.344-4.706 15.724-8.355 15.724-3.65 0-6.81-6.38-8.356-15.724 2.65-.755 5.462-1.743 8.367-2.951a76.315 76.315 0 008.344 2.951zm0-26.472a76.329 76.329 0 00-8.344 2.951c-2.905-1.208-5.717-2.196-8.367-2.951C29.684 13.42 32.834 7.04 36.483 7.04s6.798 6.38 8.355 15.724z"
   }), /*#__PURE__*/React.createElement("path", {
     strokeWidth: 2,
     d: "M36.494 25.715a75.948 75.948 0 00-4.044 1.802 89.359 89.359 0 00-5.171 2.673 69.81 69.81 0 01.848-7.426c2.65.755 5.462 1.743 8.367 2.951z"
@@ -44,10 +82,10 @@ function AtomSymbolIcon({
     d: "M36.494 46.285c-2.905 1.208-5.717 2.196-8.367 2.951a69.582 69.582 0 01-.848-7.414 89.391 89.391 0 005.171 2.673c1.36.65 2.708 1.244 4.044 1.79z"
   }), /*#__PURE__*/React.createElement("path", {
     strokeWidth: 1.8,
-    d: "M28.127 49.236c-9.11 2.604-16.223 2.487-17.792-.801-1.383-2.906 1.918-7.636 8.077-12.435 2.522 1.976 5.52 3.951 8.867 5.822.162 2.615.453 5.113.848 7.414z"
+    d: "M28.127 49.236c-9.11 2.604-16.223 2.487-17.792-.801-1.383-2.906 1.918-7.636 8.077-12.435 2.522 1.976 5.52 3.951 8.867 5.822a69.47 69.47 0 00.848 7.414z"
   }), /*#__PURE__*/React.createElement("path", {
     strokeWidth: 2,
-    d: "M27.081 36c0 1.999.07 3.94.198 5.822-3.347-1.87-6.345-3.846-8.867-5.822 2.522-1.964 5.52-3.94 8.867-5.81A85.441 85.441 0 0027.08 36zM45.687 30.178a82.302 82.302 0 00-5.16-2.661 91.833 91.833 0 00-4.033-1.802 76.329 76.329 0 018.344-2.952c.395 2.302.686 4.8.849 7.415z"
+    d: "M27.081 36c0 1.999.07 3.94.198 5.822-3.347-1.87-6.345-3.846-8.867-5.822 2.522-1.964 5.52-3.94 8.867-5.81A85.441 85.441 0 0027.08 36zm18.606-5.822a82.302 82.302 0 00-5.16-2.661 91.833 91.833 0 00-4.033-1.802 76.329 76.329 0 018.344-2.952c.395 2.302.686 4.8.849 7.415z"
   }), /*#__PURE__*/React.createElement("path", {
     strokeWidth: 1.8,
     d: "M54.565 36c-2.522-1.964-5.52-3.94-8.878-5.822a69.64 69.64 0 00-.849-7.414c9.111-2.604 16.235-2.499 17.804.801 1.383 2.906-1.918 7.636-8.077 12.435z"
@@ -68,21 +106,21 @@ function AtomSymbolIcon({
   }), /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    d: "M44.092 53c-1.7 7.251-4.474 11.96-7.61 11.96-3.648 0-6.81-6.38-8.355-15.723l-.484-2.346M28.927 18.79c1.709-7.132 4.451-11.75 7.556-11.75 3.649 0 6.798 6.38 8.355 15.724"
+    d: "M44.092 53c-1.7 7.251-4.474 11.96-7.61 11.96-3.648 0-6.81-6.38-8.355-15.723l-.484-2.346m1.284-28.101c1.709-7.132 4.451-11.75 7.556-11.75 3.649 0 6.798 6.38 8.355 15.724"
   }), /*#__PURE__*/React.createElement("path", {
     strokeLinejoin: "round",
-    d: "M28.127 22.764c2.65.755 5.462 1.743 8.367 2.951M44.838 49.236a76.329 76.329 0 01-8.344-2.951 75.65 75.65 0 01-4.044-1.79 89.359 89.359 0 01-5.171-2.673"
+    d: "M28.127 22.764c2.65.755 5.462 1.743 8.367 2.951m8.344 23.521a76.329 76.329 0 01-8.344-2.951 75.65 75.65 0 01-4.044-1.79 89.359 89.359 0 01-5.171-2.673"
   }), /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    d: "M45.868 34.35a85.73 85.73 0 01-.181 7.484c-.054.857-.12 1.7-.2 2.528M23.718 50.317c-6.937 1.394-12.078.854-13.383-1.882-1.106-2.323.782-5.812 4.731-9.57"
+    d: "M45.868 34.35a85.73 85.73 0 01-.181 7.484c-.054.857-.12 1.7-.2 2.528m-21.769 5.955c-6.937 1.394-12.078.854-13.383-1.882-1.106-2.323.782-5.812 4.731-9.57"
   }), /*#__PURE__*/React.createElement("path", {
     strokeLinejoin: "round",
-    d: "M27.134 41.74c-3.289-1.846-6.237-3.793-8.722-5.74M27.279 41.822a94.588 94.588 0 01-.145-.081"
+    d: "M27.134 41.74c-3.289-1.846-6.237-3.793-8.722-5.74m8.867 5.822a94.588 94.588 0 01-.145-.081"
   }), /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    d: "M44.838 22.764c.138.803.263 1.63.375 2.477M49.13 21.706c7-1.426 12.2-.902 13.512 1.86 1.063 2.234-.644 5.549-4.292 9.144M54.565 36c-2.522-1.964-5.52-3.94-8.878-5.822"
+    d: "M44.838 22.764c.138.803.263 1.63.375 2.477m3.917-3.535c7-1.426 12.2-.902 13.512 1.86 1.063 2.234-.644 5.549-4.292 9.144M54.565 36c-2.522-1.964-5.52-3.94-8.878-5.822"
   }), /*#__PURE__*/React.createElement("path", {
     strokeLinejoin: "round",
     d: "M45.687 30.178c3.358 1.882 6.356 3.858 8.878 5.822"
@@ -107,8 +145,12 @@ function AtomSymbolIcon({
   }), /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    d: "M31.61 48.364s.338-.06.97-.329M49.702 39.967s1.404-.897 1.646-1.103M31.707 27.295c-.283.143-.566.291-.849.443M22.221 32.767s.228-.238.814-.589M39.752 23.202s1.615-.59 1.945-.661"
+    d: "M31.61 48.364s.338-.06.97-.329m17.122-8.068s1.404-.897 1.646-1.103M31.707 27.295c-.283.143-.566.291-.849.443m-8.637 5.029s.228-.238.814-.589m16.717-8.976s1.615-.59 1.945-.661"
   })));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(AtomSymbolIcon);
 export default ForwardRef;

package/data2/esm/BankIcon.d.ts

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

package/data2/esm/BankIcon.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 BankIcon({
   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 72 72",
     fill: "currentColor",
@@ -20,7 +54,11 @@ function BankIcon({
     ref: svgRef,
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
     fill: "#9B9B9A",
@@ -30,7 +68,7 @@ function BankIcon({
     d: "M14 22h44v4H14z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#FFF",
-    d: "M19.5 26h2.052v34H19.5M24.933 26h2.038v34h-2.038M47.067 60h-2.05V26h2.05M52.5 60h-2.018V26H52.5"
+    d: "M19.5 26h2.052v34H19.5m5.433-34h2.038v34h-2.038m22.134 0h-2.05V26h2.05M52.5 60h-2.018V26H52.5"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#D0CFCE",
     d: "M36 12L19 22h34z"
@@ -48,7 +86,7 @@ function BankIcon({
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeMiterlimit: 10,
-    d: "M36.948 34.262c-.098-.38-.52-.666-1.027-.666h0c-.579 0-1.048.373-1.048.834 0 .461.47.835 1.048.835l-.021.003c.579 0 1.048.374 1.048.835 0 .46-.469.835-1.048.835h0c-.507 0-.93-.287-1.027-.667M35.911 33.596V32.8M35.911 37.733v-.795"
+    d: "M36.948 34.262c-.098-.38-.52-.666-1.027-.666h0c-.579 0-1.048.373-1.048.834 0 .461.47.835 1.048.835l-.021.003c.579 0 1.048.374 1.048.835 0 .46-.469.835-1.048.835h0c-.507 0-.93-.287-1.027-.667m1.038-2.675V32.8m0 4.933v-.795"
   }), /*#__PURE__*/React.createElement("g", {
     fill: "none",
     stroke: "#000",
@@ -57,12 +95,12 @@ function BankIcon({
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    d: "M16 26h40v34H16zM14 22h44v4H14z"
+    d: "M16 26h40v34H16zm-2-4h44v4H14z"
   }), /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    d: "M19.5 26h3v34h-3M24.933 26h3v34h-3M47.067 60h-3V26h3M52.5 60h-3V26h3M36 12l-17 9.75h34zM31.5 50h9v10h-9zM36 60V50"
+    d: "M19.5 26h3v34h-3m5.433-34h3v34h-3m22.134 0h-3V26h3M52.5 60h-3V26h3M36 12l-17 9.75h34zm-4.5 38h9v10h-9zM36 60V50"
   }), /*#__PURE__*/React.createElement("circle", {
     cx: 36,
     cy: 35,
@@ -71,8 +109,12 @@ function BankIcon({
   }), /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    d: "M36.948 34.262c-.098-.38-.52-.666-1.027-.666h0c-.579 0-1.048.373-1.048.834 0 .461.47.835 1.048.835l-.021.003c.579 0 1.048.374 1.048.835 0 .46-.469.835-1.048.835h0c-.507 0-.93-.287-1.027-.667M35.911 33.596V32.8M35.911 37.733v-.795"
+    d: "M36.948 34.262c-.098-.38-.52-.666-1.027-.666h0c-.579 0-1.048.373-1.048.834 0 .461.47.835 1.048.835l-.021.003c.579 0 1.048.374 1.048.835 0 .46-.469.835-1.048.835h0c-.507 0-.93-.287-1.027-.667m1.038-2.675V32.8m0 4.933v-.795"
   })));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(BankIcon);
 export default ForwardRef;

package/data2/esm/BlackNibIcon.d.ts

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

package/data2/esm/BlackNibIcon.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 BlackNibIcon({
   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 72 72",
     fill: "currentColor",
@@ -20,7 +54,11 @@ function BlackNibIcon({
     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",
@@ -56,6 +94,10 @@ function BlackNibIcon({
     strokeWidth: 2,
     d: "M15.1 56.846l18.851-18.851M48.972 10.28l-9.557 9.557a1.745 1.745 0 00-.155 2.29l-1.134 1.131a.795.795 0 00.03 1.123l9.409 9.409a.795.795 0 001.123.03l1.13-1.135a1.745 1.745 0 002.29-.154l9.557-9.557"
   })));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(BlackNibIcon);
 export default ForwardRef;

package/data2/esm/BookOpenIcon.d.ts

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

package/data2/esm/BookOpenIcon.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 BookOpenIcon({
   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 72 72",
     fill: "currentColor",
@@ -20,7 +54,11 @@ function BookOpenIcon({
     ref: svgRef,
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
     fill: "#9b9b9a",
@@ -30,7 +68,7 @@ function BookOpenIcon({
     d: "M67.001 56H4.998A.998.998 0 014 55.002V16.998c0-.551.447-.998.998-.998h62.004c.551 0 .998.447.998.998v38.004a.998.998 0 01-.999.998z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#FFF",
-    d: "M64.001 51.625H7.998A.998.998 0 017 50.627V21.372c0-.55.447-.998.999-.998H64c.552 0 .999.447.999.998v29.253a.998.998 0 01-.999.999z"
+    d: "M64.001 51.625H7.998A.998.998 0 017 50.627V21.372a1 1 0 01.999-.998H64c.552 0 .999.447.999.998v29.253a.998.998 0 01-.999.999z"
   }), /*#__PURE__*/React.createElement("g", {
     fill: "none",
     stroke: "#000",
@@ -39,10 +77,14 @@ function BookOpenIcon({
     strokeMiterlimit: 10,
     strokeWidth: 2
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M41 56a5 5 0 01-10 0M67.001 56H4.998A.998.998 0 014 55.002V16.998c0-.551.447-.998.998-.998h62.004c.551 0 .998.447.998.998v38.004a.998.998 0 01-.999.998z"
+    d: "M41 56a5 5 0 01-10 0m36.001 0H4.998A.998.998 0 014 55.002V16.998c0-.551.447-.998.998-.998h62.004c.551 0 .998.447.998.998v38.004a.998.998 0 01-.999.998z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M64.001 51.625H7.998A.998.998 0 017 50.627V21.372c0-.55.447-.998.999-.998H64c.552 0 .999.447.999.998v29.253a.998.998 0 01-.999.999zM36 17v38M11 27h20M11 33h20M11 39h20M11 45h20M41 27h20M41 33h20M41 39h20M41 45h20"
+    d: "M64.001 51.625H7.998A.998.998 0 017 50.627V21.372a1 1 0 01.999-.998H64c.552 0 .999.447.999.998v29.253a.998.998 0 01-.999.999zM36 17v38M11 27h20m-20 6h20m-20 6h20m-20 6h20m10-18h20m-20 6h20m-20 6h20m-20 6h20"
   })));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(BookOpenIcon);
 export default ForwardRef;

package/data2/esm/BookmarkIcon.d.ts

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

package/data2/esm/BookmarkIcon.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 BookmarkIcon({
   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 72 72",
     fill: "currentColor",
@@ -20,7 +54,11 @@ function BookmarkIcon({
     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: "#EA5A47",
@@ -40,6 +78,10 @@ function BookmarkIcon({
   }), /*#__PURE__*/React.createElement("path", {
     d: "M46.5 56l-10-11.151L26.5 56V10.958h20z"
   })));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(BookmarkIcon);
 export default ForwardRef;

package/data2/esm/BooksIcon.d.ts

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

package/data2/esm/BooksIcon.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 BooksIcon({
   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 300 300",
     fill: "currentColor",
@@ -20,7 +54,11 @@ function BooksIcon({
     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: "#fcc309",
@@ -28,11 +66,10 @@ function BooksIcon({
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     d: "M9.768 258.262h14.579v-29.157H9.767z"
-  }), /*#__PURE__*/React.createElement("g", {
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M277.048 258.262h14.579v-29.157h-14.579zM167.22 229.105H38.926l5.345-9.234c4.86-9.233 4.86-20.896 0-30.13l-5.345-9.233H167.22c12.15 0 22.354 10.691 22.354 24.299 0 13.606-9.718 24.298-22.354 24.298",
     fill: "#fd9808"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M277.048 258.262h14.579v-29.157h-14.579zM167.22 229.105H38.926l5.345-9.234c4.86-9.233 4.86-20.896 0-30.13l-5.345-9.233H167.22c12.15 0 22.354 10.691 22.354 24.299 0 13.606-9.718 24.298-22.354 24.298"
-  })), /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     d: "M44.757 189.741l-4.86-9.233H25.32l5.831 9.233c5.346 9.234 5.346 20.897 0 30.13l-5.831 9.234h14.579l5.346-9.234c4.859-9.233 4.859-20.896-.487-30.13"
   }), /*#__PURE__*/React.createElement("path", {
@@ -55,7 +92,7 @@ function BooksIcon({
   }, /*#__PURE__*/React.createElement("path", {
     d: "M269.759 217.441L219.219 29.86l-10.206 2.916 50.54 187.582-36.446 9.72z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M232.34 75.54L185.2 88.174l-4.86-18.953 47.14-12.635zM262.47 188.284l-47.14 12.635-4.859-18.953 47.139-12.635z"
+    d: "M232.34 75.54L185.2 88.174l-4.86-18.953 47.14-12.635zm30.13 112.744l-47.14 12.635-4.859-18.953 47.139-12.635z"
   })), /*#__PURE__*/React.createElement("g", {
     fill: "#020101"
   }, /*#__PURE__*/React.createElement("path", {
@@ -63,14 +100,18 @@ function BooksIcon({
   }), /*#__PURE__*/React.createElement("path", {
     d: "M165.277 233.964H24.347c-1.944 0-3.402-.972-4.374-2.43a4.413 4.413 0 010-4.86l5.832-9.233c4.373-7.775 4.373-17.008 0-24.784l-5.832-9.233a4.413 4.413 0 010-4.86c.972-1.943 2.43-2.915 4.374-2.915h140.93c16.036 0 29.157 13.12 29.157 29.158 0 16.036-13.12 29.157-29.157 29.157zm-132.183-9.72h132.183c10.69 0 19.438-8.747 19.438-19.438 0-10.69-8.747-19.438-19.438-19.438H33.094l.972 1.943c6.318 10.691 6.318 24.299 0 34.99z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M165.277 209.666H58.364c-2.916 0-4.86-1.944-4.86-4.86 0-2.916 1.944-4.86 4.86-4.86h106.912c2.916 0 4.86 1.944 4.86 4.86 0 2.916-1.944 4.86-4.86 4.86zM150.698 185.368H9.768c-1.944 0-3.402-.972-4.374-2.43a4.413 4.413 0 010-4.86l5.832-9.233c4.373-7.775 4.373-17.009 0-24.784l-5.832-9.234a4.413 4.413 0 010-4.86c.972-1.943 2.43-2.915 4.374-2.915h140.93c16.036 0 29.158 13.121 29.158 29.158s-13.122 29.158-29.158 29.158zm-132.183-9.72h132.183c10.69 0 19.438-8.747 19.438-19.438 0-10.691-8.747-19.438-19.438-19.438H18.515l.972 1.943c6.318 10.691 6.318 24.299 0 34.99z"
+    d: "M165.277 209.666H58.364c-2.916 0-4.86-1.944-4.86-4.86 0-2.916 1.944-4.86 4.86-4.86h106.912c2.916 0 4.86 1.944 4.86 4.86 0 2.916-1.944 4.86-4.86 4.86zm-14.579-24.298H9.768c-1.944 0-3.402-.972-4.374-2.43a4.413 4.413 0 010-4.86l5.832-9.233c4.373-7.775 4.373-17.009 0-24.784l-5.832-9.234a4.413 4.413 0 010-4.86c.972-1.943 2.43-2.915 4.374-2.915h140.93c16.036 0 29.158 13.121 29.158 29.158s-13.122 29.158-29.158 29.158zm-132.183-9.72h132.183c10.69 0 19.438-8.747 19.438-19.438 0-10.691-8.747-19.438-19.438-19.438H18.515l.972 1.943c6.318 10.691 6.318 24.299 0 34.99z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M150.698 161.07H43.785c-2.916 0-4.86-1.944-4.86-4.86 0-2.916 1.944-4.86 4.86-4.86h106.912c2.916 0 4.86 1.944 4.86 4.86 0 2.916-1.944 4.86-4.86 4.86zM165.277 136.771H24.347c-1.944 0-3.402-.972-4.374-2.43a4.413 4.413 0 010-4.86l5.832-9.233c4.373-7.775 4.373-17.009 0-24.784l-5.832-9.233a4.413 4.413 0 010-4.86c.972-1.943 2.43-2.915 4.374-2.915h140.93c16.036 0 29.157 13.12 29.157 29.158 0 16.036-13.12 29.157-29.157 29.157zm-132.183-9.719h132.183c10.69 0 19.438-8.747 19.438-19.438 0-10.691-8.747-19.439-19.438-19.439H33.094l.972 1.944c6.318 10.691 6.318 24.298 0 34.99z"
+    d: "M150.698 161.07H43.785c-2.916 0-4.86-1.944-4.86-4.86 0-2.916 1.944-4.86 4.86-4.86h106.912c2.916 0 4.86 1.944 4.86 4.86 0 2.916-1.944 4.86-4.86 4.86zm14.579-24.299H24.347c-1.944 0-3.402-.972-4.374-2.43a4.413 4.413 0 010-4.86l5.832-9.233c4.373-7.775 4.373-17.009 0-24.784l-5.832-9.233a4.413 4.413 0 010-4.86c.972-1.943 2.43-2.915 4.374-2.915h140.93c16.036 0 29.157 13.12 29.157 29.158 0 16.036-13.12 29.157-29.157 29.157zm-132.183-9.719h132.183c10.69 0 19.438-8.747 19.438-19.438 0-10.691-8.747-19.439-19.438-19.439H33.094l.972 1.944c6.318 10.691 6.318 24.298 0 34.99z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M223.106 233.964c-1.944 0-3.888-1.458-4.86-3.402l-50.54-188.068c-.486-2.43.972-5.346 3.402-5.831l47.138-12.636c2.43-.485 5.346.972 5.832 3.402l50.54 187.582c.486 1.458 0 2.43-.486 3.888-.485 1.458-1.943 1.944-2.916 2.43l-47.138 12.636h-.972zm-44.708-189.04l47.624 178.348 37.42-10.205-47.14-178.349zM165.277 112.473H58.364c-2.916 0-4.86-1.944-4.86-4.86 0-2.915 1.944-4.859 4.86-4.859h106.912c2.916 0 4.86 1.944 4.86 4.86 0 2.915-1.944 4.86-4.86 4.86z"
+    d: "M223.106 233.964c-1.944 0-3.888-1.458-4.86-3.402l-50.54-188.068c-.486-2.43.972-5.346 3.402-5.831l47.138-12.636c2.43-.485 5.346.972 5.832 3.402l50.54 187.582c.486 1.458 0 2.43-.486 3.888-.485 1.458-1.943 1.944-2.916 2.43l-47.138 12.636h-.972zm-44.708-189.04l47.624 178.348 37.42-10.205-47.14-178.349zm-13.121 67.549H58.364c-2.916 0-4.86-1.944-4.86-4.86 0-2.915 1.944-4.859 4.86-4.859h106.912c2.916 0 4.86 1.944 4.86 4.86 0 2.915-1.944 4.86-4.86 4.86z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M185.2 93.034c-1.943 0-3.887-1.458-4.859-3.401l-4.86-18.953c-.485-1.458 0-2.43.487-3.888.485-.972 1.943-1.944 2.915-2.43l47.139-12.635c1.458-.486 2.43 0 3.888.486.972.485 1.943 1.943 2.43 2.915l4.86 18.953c.485 2.43-.973 5.346-3.402 5.832l-47.625 13.12-.972.001zm.973-19.924l2.43 9.233 37.42-10.205-2.43-9.233zM215.33 205.778c-1.943 0-3.887-1.458-4.859-3.401l-4.86-18.953c-.485-1.458 0-2.43.487-3.888.485-1.458 1.943-1.943 2.915-2.43l47.139-12.635c1.458-.486 2.43 0 3.888.486.972.485 1.943 1.943 2.43 2.915l4.86 18.953c.485 2.43-.973 5.346-3.402 5.832l-47.139 12.635c-.486.486-.972.486-1.458.486zm.973-20.41l2.43 9.72 37.42-10.206-2.43-9.233zM228.938 162.041c-1.944 0-3.888-1.457-4.86-3.401l-15.065-56.372c-.485-2.43.973-5.346 3.402-5.832 2.43-.486 5.346.972 5.832 3.402l15.064 55.886c.486 2.43-.972 5.345-3.401 5.831-.486.486-.972.486-.972.486z"
+    d: "M185.2 93.034c-1.943 0-3.887-1.458-4.859-3.401l-4.86-18.953c-.485-1.458 0-2.43.487-3.888.485-.972 1.943-1.944 2.915-2.43l47.139-12.635c1.458-.486 2.43 0 3.888.486.972.485 1.943 1.943 2.43 2.915l4.86 18.953c.485 2.43-.973 5.346-3.402 5.832l-47.625 13.12-.972.001zm.973-19.924l2.43 9.233 37.42-10.205-2.43-9.233zm29.157 132.668c-1.943 0-3.887-1.458-4.859-3.401l-4.86-18.953c-.485-1.458 0-2.43.487-3.888.485-1.458 1.943-1.943 2.915-2.43l47.139-12.635c1.458-.486 2.43 0 3.888.486.972.485 1.943 1.943 2.43 2.915l4.86 18.953c.485 2.43-.973 5.346-3.402 5.832l-47.139 12.635c-.486.486-.972.486-1.458.486zm.973-20.41l2.43 9.72 37.42-10.206-2.43-9.233zm12.635-23.327c-1.944 0-3.888-1.457-4.86-3.401l-15.065-56.372c-.485-2.43.973-5.346 3.402-5.832 2.43-.486 5.346.972 5.832 3.402l15.064 55.886c.486 2.43-.972 5.345-3.401 5.831-.486.486-.972.486-.972.486z"
   })));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(BooksIcon);
 export default ForwardRef;

package/data2/esm/BooksVerticalIcon.d.ts

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