@datalayer/icons-react 1.0.7 → 1.0.8

package/data1/esm/HeartIcon.d.ts

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

package/data1/esm/HeartIcon.js

@@ -6,52 +6,91 @@ 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 HeartIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  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",
-    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("path", {
-    fill: "url(#paint0_radial)",
+    fill: "url(#prefix__paint0_radial)",
     d: "M16.131 3.714A5.005 5.005 0 0012 5.891a5.005 5.005 0 00-4.131-2.177 5.014 5.014 0 00-5.012 5.012c0 6.108 9.143 11.6 9.143 11.6s9.143-5.492 9.143-11.6a5.014 5.014 0 00-5.012-5.012z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#paint1_radial)",
+    fill: "url(#prefix__paint1_radial)",
     d: "M18.206 4.16c2.742 4.372.217 10.109-2.817 11.737-3.35 1.8-5.64.955-10.383-1.737C7.708 17.743 12 20.32 12 20.32s9.143-5.491 9.143-11.6a5.015 5.015 0 00-2.937-4.56z",
     opacity: 0.5
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#paint2_radial)",
+    fill: "url(#prefix__paint2_radial)",
     d: "M16.131 3.714A5.005 5.005 0 0012 5.891a5.005 5.005 0 00-4.131-2.177 5.014 5.014 0 00-5.012 5.012c0 6.108 9.143 11.6 9.143 11.6s9.143-5.492 9.143-11.6a5.014 5.014 0 00-5.012-5.012z",
     opacity: 0.5
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#paint3_radial)",
+    fill: "url(#prefix__paint3_radial)",
     d: "M16.131 3.714A5.005 5.005 0 0012 5.891a5.005 5.005 0 00-4.131-2.177 5.014 5.014 0 00-5.012 5.012c0 6.108 9.143 11.6 9.143 11.6s9.143-5.492 9.143-11.6a5.014 5.014 0 00-5.012-5.012z",
     opacity: 0.5
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#paint4_radial)",
+    fill: "url(#prefix__paint4_radial)",
     d: "M10.749 5.749c.502 1.183-.612 2.788-2.492 3.583-1.88.794-3.806.485-4.308-.692-.503-1.177.611-2.788 2.491-3.583 1.88-.794 3.806-.491 4.309.692z",
     opacity: 0.24
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#paint5_radial)",
+    fill: "url(#prefix__paint5_radial)",
     d: "M16.874 4.789c.715.788.274 2.348-.977 3.48-1.251 1.131-2.846 1.411-3.56.623-.714-.789-.274-2.349.977-3.48C14.566 4.28 16.16 4 16.874 4.789z",
     opacity: 0.24
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#paint6_linear)",
+    fill: "url(#prefix__paint6_linear)",
     d: "M16.223 5.046c2.514.857 4.914 4.571.857 9.2-2.428 2.771-5.08 4.171-8.451 3.623a30.45 30.45 0 003.377 2.457s9.143-5.492 9.143-11.6a5.023 5.023 0 00-5.018-5.012 5.005 5.005 0 00-4.13 2.177s2.382-1.474 4.222-.845z",
     opacity: 0.32
   }), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("radialGradient", {
-    id: "paint0_radial",
+    id: "prefix__paint0_radial",
     cx: 0,
     cy: 0,
     r: 1,
@@ -64,7 +103,7 @@ function HeartIcon({
     offset: 0.864,
     stopColor: "#C20000"
   })), /*#__PURE__*/React.createElement("radialGradient", {
-    id: "paint1_radial",
+    id: "prefix__paint1_radial",
     cx: 0,
     cy: 0,
     r: 1,
@@ -77,7 +116,7 @@ function HeartIcon({
     offset: 1,
     stopColor: "#C20000"
   })), /*#__PURE__*/React.createElement("radialGradient", {
-    id: "paint2_radial",
+    id: "prefix__paint2_radial",
     cx: 0,
     cy: 0,
     r: 1,
@@ -91,7 +130,7 @@ function HeartIcon({
     stopColor: "#fff",
     stopOpacity: 0
   })), /*#__PURE__*/React.createElement("radialGradient", {
-    id: "paint3_radial",
+    id: "prefix__paint3_radial",
     cx: 0,
     cy: 0,
     r: 1,
@@ -105,7 +144,7 @@ function HeartIcon({
     stopColor: "#BD2719",
     stopOpacity: 0
   })), /*#__PURE__*/React.createElement("radialGradient", {
-    id: "paint4_radial",
+    id: "prefix__paint4_radial",
     cx: 0,
     cy: 0,
     r: 1,
@@ -118,7 +157,7 @@ function HeartIcon({
     stopColor: "#fff",
     stopOpacity: 0
   })), /*#__PURE__*/React.createElement("radialGradient", {
-    id: "paint5_radial",
+    id: "prefix__paint5_radial",
     cx: 0,
     cy: 0,
     r: 1,
@@ -131,7 +170,7 @@ function HeartIcon({
     stopColor: "#fff",
     stopOpacity: 0
   })), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "paint6_linear",
+    id: "prefix__paint6_linear",
     x1: 13.887,
     x2: 15.658,
     y1: 26.85,
@@ -144,6 +183,10 @@ function HeartIcon({
     stopColor: "#BD2719",
     stopOpacity: 0
   }))));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(HeartIcon);
 export default ForwardRef;

package/data1/esm/HolovizPanelIcon.d.ts

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

package/data1/esm/HolovizPanelIcon.js

@@ -6,31 +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 HolovizPanelIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  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",
-    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 100 100",
-    "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("rect", {
     width: 100,
     height: 100,
-    fill: colored ? '#0072B5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#0072B5') ? 'white' : 'currentColor'),
+    fill: colored ? '#0072B5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     rx: 8
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#fff' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#fff') ? 'white' : 'currentColor'),
-    d: "M14.894 23.404h70.213v7.447H14.894zM14.894 46.809h70.213v7.447H14.894zM14.894 70.213h70.213v7.447H14.894z"
+    fill: colored ? '#fff' : 'white',
+    d: "M14.894 23.404h70.213v7.447H14.894zm0 23.405h70.213v7.447H14.894zm0 23.404h70.213v7.447H14.894z"
   }), /*#__PURE__*/React.createElement("circle", {
     cx: 33.511,
     cy: 27.128,
@@ -47,6 +86,10 @@ function HolovizPanelIcon({
     r: 7.979,
     fill: "#fff"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(HolovizPanelIcon);
 export default ForwardRef;

package/data1/esm/IPythonIcon.d.ts

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

package/data1/esm/IPythonIcon.js

@@ -6,58 +6,97 @@ 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 IPythonIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  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",
-    id: "Layer_1",
+    id: "prefix__Layer_1",
     "data-name": "Layer 1",
-    viewBox: "0 0 668.509 474.562",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
+    viewBox: "0 0 668.509 474.562",
+    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", null, /*#__PURE__*/React.createElement("style", null, "\n      .cls-1{isolation:isolate}.cls-2{fill:#020202}.cls-3{fill:#2a2a2a}.cls-4{fill:#3067ab}\n    ")), /*#__PURE__*/React.createElement("g", {
-    className: "cls-1"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M21.948 210.932h45.7V46.73h-45.7V24.05h114.95V46.73h-45.7v164.202h45.7v22.681H21.948zM192.129 24.049h55.512c40.653 0 68.129 15.653 68.129 61.655 0 44.405-27.756 64.85-68.129 64.85H215.68v83.06h-23.551zm52.708 104.782c31.962 0 47.382-13.417 47.382-43.127 0-30.029-15.7-39.932-47.382-39.932H215.68v83.059z",
-    className: "cls-2"
-  })), /*#__PURE__*/React.createElement("g", {
-    className: "cls-1"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M28.948 409.316h23.825V323.71H28.948v-11.825h59.927v11.825H65.051v85.606h23.824v11.826H28.948zM121.323 311.885h28.94c21.194 0 35.518 8.16 35.518 32.144 0 23.15-14.47 33.81-35.518 33.81h-16.662v43.303h-12.278zm27.479 54.629c16.662 0 24.701-6.995 24.701-22.485 0-15.656-8.185-20.819-24.701-20.819H133.6v43.304zM207.56 454.285l2.484-10.992a20.252 20.252 0 006.431 1.166c9.94 0 15.932-7.162 19.44-17.155l2.046-5.995-33.033-81.11h12.278l17.247 44.635c2.777 7.161 5.847 15.655 8.77 23.483h.585c2.484-7.66 5.262-16.155 7.6-23.483l15.347-44.636h11.694l-31.426 87.606c-5.262 15.988-13.885 28.146-30.11 28.146a26.598 26.598 0 01-9.354-1.665zM319.228 389.664v-38.307h-20.17v-10.326l20.608-.833 1.608-25.981h10.085v25.981h34.787v11.16H331.36v38.472c0 14.49 4.24 21.984 17.979 21.984a41.748 41.748 0 0016.955-3.664l2.63 10.16c-6.43 2.665-13.3 4.83-22.216 4.83-20.755 0-27.479-13.49-27.479-33.476zM394.063 302.559h12.131v32.31l-.73 19.153h.438c7.162-8.994 15.494-15.822 26.456-15.822 16.809 0 24.556 11.325 24.556 32.644v50.298h-12.132v-48.466c0-15.322-4.678-22.485-16.224-22.485-8.478 0-14.178 4.83-22.364 14.49v56.46h-12.131zM480.591 380.837c0-27.148 16.37-42.637 35.079-42.637s35.08 15.49 35.08 42.637c0 26.814-16.371 42.304-35.08 42.304s-35.079-15.49-35.079-42.304zm57.735 0c0-18.654-9.062-31.146-22.656-31.146-13.593 0-22.655 12.492-22.655 31.146 0 18.486 9.062 30.811 22.655 30.811 13.594 0 22.656-12.325 22.656-30.811zM576.767 340.198h9.939l1.023 13.657h.585c7.455-8.827 15.64-15.655 26.749-15.655 16.808 0 24.554 11.325 24.554 32.644v50.298h-12.13v-48.466c0-15.322-4.678-22.485-16.225-22.485-8.478 0-14.178 4.83-22.364 14.49v56.46h-12.131z",
-    className: "cls-3"
-  })), /*#__PURE__*/React.createElement("g", {
-    className: "cls-1"
+  }, title) : null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("style", null, ".prefix__cls-1{isolation:isolate}.prefix__cls-4{fill:#3067ab}")), /*#__PURE__*/React.createElement("path", {
+    d: "M21.948 210.932h45.7V46.73h-45.7V24.05h114.95v22.68h-45.7v164.202h45.7v22.681H21.948zM192.129 24.049h55.512c40.653 0 68.129 15.653 68.129 61.655 0 44.405-27.756 64.85-68.129 64.85H215.68v83.06h-23.551zm52.708 104.782c31.962 0 47.382-13.417 47.382-43.127 0-30.029-15.7-39.932-47.382-39.932H215.68v83.059z",
+    fill: "#020202"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M28.948 409.316h23.825V323.71H28.948v-11.825h59.927v11.825H65.051v85.606h23.824v11.826H28.948zm92.375-97.431h28.94c21.194 0 35.518 8.16 35.518 32.144 0 23.15-14.47 33.81-35.518 33.81h-16.662v43.303h-12.278zm27.479 54.629c16.662 0 24.701-6.995 24.701-22.485 0-15.656-8.185-20.819-24.701-20.819H133.6v43.304zm58.758 87.771l2.484-10.992a20.252 20.252 0 006.431 1.166c9.94 0 15.932-7.162 19.44-17.155l2.046-5.995-33.033-81.11h12.278l17.247 44.635c2.777 7.161 5.847 15.655 8.77 23.483h.585c2.484-7.66 5.262-16.155 7.6-23.483l15.347-44.636h11.694l-31.426 87.606c-5.262 15.988-13.885 28.146-30.11 28.146a26.598 26.598 0 01-9.354-1.665zm111.668-64.621v-38.307h-20.17v-10.326l20.608-.833 1.608-25.981h10.085v25.981h34.787v11.16H331.36v38.472c0 14.49 4.24 21.984 17.979 21.984a41.748 41.748 0 0016.955-3.664l2.63 10.16c-6.43 2.665-13.3 4.83-22.216 4.83-20.755 0-27.479-13.49-27.479-33.476zm74.835-87.105h12.131v32.31l-.73 19.153h.438c7.162-8.994 15.494-15.822 26.456-15.822 16.809 0 24.556 11.325 24.556 32.644v50.298h-12.132v-48.466c0-15.322-4.678-22.485-16.224-22.485-8.478 0-14.178 4.83-22.364 14.49v56.46h-12.131zm86.528 78.278c0-27.148 16.37-42.637 35.079-42.637s35.08 15.49 35.08 42.637c0 26.814-16.371 42.304-35.08 42.304s-35.079-15.49-35.079-42.304zm57.735 0c0-18.654-9.062-31.146-22.656-31.146-13.593 0-22.655 12.492-22.655 31.146 0 18.486 9.062 30.811 22.655 30.811 13.594 0 22.656-12.325 22.656-30.811zm38.441-40.639h9.939l1.023 13.657h.585c7.455-8.827 15.64-15.655 26.749-15.655 16.808 0 24.554 11.325 24.554 32.644v50.298h-12.13v-48.466c0-15.322-4.678-22.485-16.225-22.485-8.478 0-14.178 4.83-22.364 14.49v56.46h-12.131z",
+    fill: "#2a2a2a"
+  }), /*#__PURE__*/React.createElement("g", {
+    className: "prefix__cls-1"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M362.71 52.274h52.89v13.188h-36.393v154.27H415.6v13.187h-52.89z",
-    className: "cls-4"
+    className: "prefix__cls-4"
   })), /*#__PURE__*/React.createElement("path", {
     d: "M433.233 228.219l3.124-13.82a25.446 25.446 0 008.086 1.465c12.497 0 20.032-9.004 24.443-21.567l2.572-7.54-41.533-101.975h15.437l21.686 56.118c3.492 9.004 7.35 19.684 11.027 29.526h.735c3.124-9.633 6.616-20.312 9.556-29.526l19.297-56.118h14.702l-39.512 110.143c-6.616 20.101-17.459 35.387-37.858 35.387a33.448 33.448 0 01-11.762-2.093z"
   }), /*#__PURE__*/React.createElement("g", {
-    className: "cls-1"
+    className: "prefix__cls-1"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M579.916 231.467h-52.89v-13.188h36.393V64.01h-36.393V50.823h52.89z",
-    className: "cls-4"
+    className: "prefix__cls-4"
   })), /*#__PURE__*/React.createElement("circle", {
     cx: 630.875,
     cy: 96.601,
     r: 13.851,
-    className: "cls-4"
+    className: "prefix__cls-4"
   }), /*#__PURE__*/React.createElement("circle", {
     cx: 630.875,
     cy: 186.549,
     r: 13.851,
-    className: "cls-4"
+    className: "prefix__cls-4"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(IPythonIcon);
 export default ForwardRef;

package/data1/esm/IdentityCard2Icon.d.ts

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

package/data1/esm/IdentityCard2Icon.js

@@ -6,64 +6,107 @@ 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 IdentityCard2Icon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  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 64.96 46.71",
-    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:none;stroke-linecap:round;stroke-linejoin:round;stroke:#386a99;stroke-width:2px}\n    ")), /*#__PURE__*/React.createElement("g", {
-    id: "Layer_2",
+  }, title) : null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("style", null, ".prefix__cls-1{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke:#386a99;stroke-width:2px}")), /*#__PURE__*/React.createElement("g", {
+    id: "prefix__Layer_2",
     "data-name": "Layer 2"
   }, /*#__PURE__*/React.createElement("g", {
-    id: "Layer_1-2",
+    id: "prefix__Layer_1-2",
     "data-name": "Layer 1"
   }, /*#__PURE__*/React.createElement("rect", {
     width: 44.71,
     height: 62.96,
     x: 10.13,
     y: -8.13,
-    className: "cls-1",
+    className: "prefix__cls-1",
     rx: 6.32,
     ry: 6.32,
     transform: "rotate(-90 32.485 23.355)"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? 'none' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('none') ? 'white' : 'currentColor'),
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#386a99",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2.12,
     d: "M8.64 37.41V9.81h24.22v27.6z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M39.95 27.49h17.11M39.95 35.25h17.11",
-    className: "cls-1"
+    d: "M39.95 27.49h17.11m-17.11 7.76h17.11",
+    className: "prefix__cls-1"
   }), /*#__PURE__*/React.createElement("circle", {
     cx: 20.76,
     cy: 19.51,
     r: 4.74,
-    className: "cls-1"
+    className: "prefix__cls-1"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M12.5 36.15v-4.6a6.28 6.28 0 016.26-6.26h4A6.28 6.28 0 0129 31.55v4.6",
-    className: "cls-1"
+    className: "prefix__cls-1"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? 'none' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('none') ? 'white' : 'currentColor'),
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     stroke: "#6cc04a",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
     d: "M43.13 16.27l4.13 4.13 9.13-9.14"
   }))));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(IdentityCard2Icon);
 export default ForwardRef;

package/data1/esm/IpyWidgetsIcon.d.ts

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

package/data1/esm/IpyWidgetsIcon.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 IpyWidgetsIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  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",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
+    fill: 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", {
     fillRule: "evenodd",
@@ -32,6 +71,10 @@ function IpyWidgetsIcon({
     d: "M15 11h-4a.5.5 0 00-.5.5v1a.5.5 0 00.5.5h4a.5.5 0 00.5-.5v-1a.5.5 0 00-.5-.5zm-4-1.5a2 2 0 00-2 2v1a2 2 0 002 2h4a2 2 0 002-2v-1a2 2 0 00-2-2h-4zM5.5 13a1 1 0 100-2 1 1 0 000 2zm0 1.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5zM1.505 6.25h17v1.5h-17v-1.5z",
     clipRule: "evenodd"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(IpyWidgetsIcon);
 export default ForwardRef;

package/data1/esm/Iso27001Icon.d.ts

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