@datalayer/icons-react 1.0.6 → 1.0.8

package/data1/esm/JupyterBookIcon.js

@@ -6,31 +6,74 @@ 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 JupyterBookIcon({
   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",
     "data-name": "Layer 1",
     viewBox: "0 0 81.78 71.15",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f37726' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f37726') ? 'white' : 'currentColor'),
+    fill: colored ? '#f37726' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M4.8 45.87q2.7 8.46 13.78 8.75h9.17q9.63 0 13.13 7.53Q44.3 54.62 54 54.62h8.45q11.76 0 14.55-8.72l4.78 1.6Q79.71 54.88 75 58.58t-12.37 3.75h-8.75q-10 0-10 8.82h-6q0-8.82-10.13-8.82h-8.42q-7.83 0-12.53-3.78T0 47.5z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#616161' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#616161') ? 'white' : 'currentColor'),
+    fill: colored ? '#616161' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M20.39 41.34A13.88 13.88 0 0114.23 40a10.59 10.59 0 01-4.42-4.06A14.17 14.17 0 018 29.14V29h5.3c.07 2.74.7 4.75 1.88 6.05a6.58 6.58 0 005.09 1.92 6.73 6.73 0 003.8-1 5.9 5.9 0 002.2-2.75 10.43 10.43 0 00.72-4V4.33l-5.44-.72V0h15.56v3.55l-4.57.78v24.86a14 14 0 01-1.39 6.39 9.92 9.92 0 01-4.09 4.25 13.43 13.43 0 01-6.67 1.51zm20.91-.59v-3.53l4.56-.78V4.33l-4.56-.78V0h17.58q6.39 0 10 2.75c2.4 1.83 3.59 4.59 3.59 8.27a7.59 7.59 0 01-1.71 4.86 10.37 10.37 0 01-4.55 3.18 9.53 9.53 0 014.22 2 10 10 0 012.73 3.58 10.92 10.92 0 011 4.64q0 5.59-3.64 8.55t-9.86 3zm10.08-4.31h9.23a8.5 8.5 0 005.86-1.86 6.68 6.68 0 002.09-5.28 10 10 0 00-.76-4.11 5.64 5.64 0 00-2.36-2.63 7.65 7.65 0 00-4-.93H51.38zm0-19.11h8.93a6.7 6.7 0 004.79-1.72 6.17 6.17 0 001.84-4.7A5.89 5.89 0 0064.86 6a9.38 9.38 0 00-6-1.64h-7.5z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(JupyterBookIcon);
 export default ForwardRef;

package/data1/esm/JupyterContentIcon.d.ts

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

package/data1/esm/JupyterContentIcon.js

@@ -6,39 +6,82 @@ 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 JupyterContentIcon({
   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 21 21",
-    "aria-hidden": "true",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#F37726' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#F37726') ? 'white' : 'currentColor'),
-    d: "M10.395 17.398c-4.066 0-7.64-1.46-9.488-3.615a10.116 10.116 0 0018.976 0c-1.843 2.155-5.404 3.615-9.488 3.615zM10.395 3.383c4.066 0 7.64 1.46 9.488 3.615a10.117 10.117 0 00-18.976 0c1.848-2.16 5.403-3.615 9.488-3.615z"
+    fill: colored ? '#F37726' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    d: "M10.395 17.398c-4.066 0-7.64-1.46-9.488-3.615a10.116 10.116 0 0018.976 0c-1.843 2.155-5.404 3.615-9.488 3.615zm0-14.015c4.066 0 7.64 1.46 9.488 3.615a10.117 10.117 0 00-18.976 0c1.848-2.16 5.403-3.615 9.488-3.615z"
   }), /*#__PURE__*/React.createElement("text", {
     style: {
       lineHeight: 1.25
     },
     x: 4.555,
     y: 16.197,
-    fill: colored ? '#4e4e4e' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#4e4e4e') ? 'white' : 'currentColor'),
+    fill: colored ? '#4e4e4e' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fontFamily: "sans-serif",
     fontSize: 16
   }, /*#__PURE__*/React.createElement("tspan", {
     x: 4.555,
     y: 16.197
   }, "C")));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(JupyterContentIcon);
 export default ForwardRef;

package/data1/esm/JupyterHubIcon.d.ts

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

package/data1/esm/JupyterHubIcon.js

@@ -6,34 +6,73 @@ const sizeMap = {
   "large": 64
 };
 
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  React.useLayoutEffect(() => {
+    if (typeof mode === "string") {
+      setResolved(mode);
+      return;
+    }
+    if (typeof document === "undefined") return;
+    let cur = null;
+    let el = ref.current && ref.current.parentElement;
+    while (el) {
+      const m = el.getAttribute && el.getAttribute("data-color-mode");
+      if (m) { cur = m; break; }
+      el = el.parentElement;
+    }
+    if (!cur || cur === "auto") {
+      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setResolved(cur === "dark" ? "light" : "dark");
+  }, [mode]);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    "data-color-mode": resolved || "light",
+    "data-light-theme": "light",
+    "data-dark-theme": "dark",
+    style: { display: "inline-flex", lineHeight: 0 }
+  }, children);
+}
+
 function JupyterHubIcon({
   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 21 21",
-    "aria-hidden": "true",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#767677' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#767677') ? 'white' : 'currentColor'),
+    fill: colored ? '#767677' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M17.734 1.61A1.207 1.207 0 1116.477.478a1.193 1.193 0 011.257 1.132z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#F37726' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#F37726') ? 'white' : 'currentColor'),
-    d: "M10.693 15.555c-3.205 0-6.021-1.15-7.478-2.848a7.973 7.973 0 0014.956 0c-1.453 1.698-4.259 2.848-7.478 2.848zM10.693 4.51c3.205 0 6.021 1.15 7.478 2.849a7.973 7.973 0 00-14.956 0c1.457-1.702 4.26-2.849 7.478-2.849z"
+    fill: colored ? '#F37726' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    d: "M10.693 15.555c-3.205 0-6.021-1.15-7.478-2.848a7.973 7.973 0 0014.956 0c-1.453 1.698-4.259 2.848-7.478 2.848zm0-11.045c3.205 0 6.021 1.15 7.478 2.849a7.973 7.973 0 00-14.956 0c1.457-1.702 4.26-2.849 7.478-2.849z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#9E9E9E' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#9E9E9E') ? 'white' : 'currentColor'),
+    fill: colored ? '#9E9E9E' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M6.281 18.86a1.52 1.52 0 11-1.584-1.424 1.505 1.505 0 011.584 1.425z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#616262' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#616262') ? 'white' : 'currentColor'),
+    fill: colored ? '#616262' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M3.58 4.123a.876.876 0 11.85-.911.887.887 0 01-.85.911z"
   }), /*#__PURE__*/React.createElement("text", {
     style: {
@@ -41,7 +80,7 @@ function JupyterHubIcon({
     },
     x: 6.404,
     y: 14.206,
-    fill: colored ? '#4e4e4e' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#4e4e4e') ? 'white' : 'currentColor'),
+    fill: colored ? '#4e4e4e' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     strokeWidth: 0.722,
     fontFamily: "sans-serif",
     fontSize: 11.552
@@ -49,6 +88,10 @@ function JupyterHubIcon({
     x: 6.404,
     y: 14.206
   }, "H")));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(JupyterHubIcon);
 export default ForwardRef;

package/data1/esm/JupyterHubServiceIcon.d.ts

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

package/data1/esm/JupyterHubServiceIcon.js

@@ -6,40 +6,82 @@ 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 JupyterHubServiceIcon({
   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 21 21",
-    "aria-hidden": "true",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#767677' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#767677') ? 'white' : 'currentColor'),
+    fill: colored ? '#767677' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M17.734 1.159A1.207 1.207 0 1116.477.027a1.193 1.193 0 011.257 1.132z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#F37726' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#F37726') ? 'white' : 'currentColor'),
-    d: "M10.693 15.104c-3.205 0-6.021-1.15-7.478-2.848a7.973 7.973 0 0014.956 0c-1.453 1.698-4.259 2.848-7.478 2.848zM10.693 4.06c3.205 0 6.021 1.15 7.478 2.848a7.973 7.973 0 00-14.956 0c1.457-1.702 4.26-2.849 7.478-2.849z"
+    fill: colored ? '#F37726' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    d: "M10.693 15.104c-3.205 0-6.021-1.15-7.478-2.848a7.973 7.973 0 0014.956 0c-1.453 1.698-4.259 2.848-7.478 2.848zm0-11.044c3.205 0 6.021 1.15 7.478 2.848a7.973 7.973 0 00-14.956 0c1.457-1.702 4.26-2.849 7.478-2.849z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#9E9E9E' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#9E9E9E') ? 'white' : 'currentColor'),
+    fill: colored ? '#9E9E9E' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M6.281 18.41a1.52 1.52 0 11-1.584-1.425A1.507 1.507 0 016.28 18.41z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#616262' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#616262') ? 'white' : 'currentColor'),
+    fill: colored ? '#616262' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M3.58 3.672a.876.876 0 11.85-.911.887.887 0 01-.85.911z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f37726' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f37726') ? 'white' : 'currentColor'),
-    strokeWidth: 1.725,
-    d: "M7.655 13.714l.399-1.252c.512.304 1.385.645 2.22.645 1.195 0 1.764-.588 1.764-1.366 0-.797-.474-1.214-1.688-1.67-1.67-.607-2.448-1.499-2.448-2.6 0-1.48 1.214-2.694 3.169-2.694.93 0 1.745.247 2.239.57L12.91 6.56a3.558 3.558 0 00-1.878-.55c-.987 0-1.518.569-1.518 1.252 0 .759.53 1.1 1.726 1.575 1.575.588 2.41 1.385 2.41 2.751 0 1.632-1.271 2.77-3.415 2.77-1.006 0-1.936-.265-2.58-.645z"
+    fill: colored ? '#f37726' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    d: "M7.655 13.714l.399-1.252c.512.304 1.385.645 2.22.645 1.195 0 1.764-.588 1.764-1.366 0-.797-.474-1.214-1.688-1.67-1.67-.607-2.448-1.499-2.448-2.6 0-1.48 1.214-2.694 3.169-2.694.93 0 1.745.247 2.239.57l-.4 1.213a3.558 3.558 0 00-1.878-.55c-.987 0-1.518.569-1.518 1.252 0 .759.53 1.1 1.726 1.575 1.575.588 2.41 1.385 2.41 2.751 0 1.632-1.271 2.77-3.415 2.77-1.006 0-1.936-.265-2.58-.645z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(JupyterHubServiceIcon);
 export default ForwardRef;

package/data1/esm/JupyterIcon.d.ts

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

package/data1/esm/JupyterIcon.js

@@ -6,36 +6,79 @@ 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 JupyterIcon({
   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 21 21",
-    "aria-hidden": "true",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#767677' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#767677') ? 'white' : 'currentColor'),
+    fill: colored ? '#767677' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M17.734 1.61A1.207 1.207 0 1116.477.478a1.193 1.193 0 011.257 1.132z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#F37726' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#F37726') ? 'white' : 'currentColor'),
-    d: "M10.693 15.555c-3.205 0-6.021-1.15-7.478-2.848a7.973 7.973 0 0014.956 0c-1.453 1.698-4.259 2.848-7.478 2.848zM10.693 4.51c3.205 0 6.021 1.15 7.478 2.849a7.973 7.973 0 00-14.956 0c1.457-1.702 4.26-2.849 7.478-2.849z"
+    fill: colored ? '#F37726' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    d: "M10.693 15.555c-3.205 0-6.021-1.15-7.478-2.848a7.973 7.973 0 0014.956 0c-1.453 1.698-4.259 2.848-7.478 2.848zm0-11.045c3.205 0 6.021 1.15 7.478 2.849a7.973 7.973 0 00-14.956 0c1.457-1.702 4.26-2.849 7.478-2.849z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#9E9E9E' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#9E9E9E') ? 'white' : 'currentColor'),
+    fill: colored ? '#9E9E9E' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M6.281 18.86a1.52 1.52 0 11-1.584-1.424 1.505 1.505 0 011.584 1.425z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#616262' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#616262') ? 'white' : 'currentColor'),
+    fill: colored ? '#616262' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M3.58 4.123a.876.876 0 11.85-.911.887.887 0 01-.85.911z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(JupyterIcon);
 export default ForwardRef;

package/data1/esm/JupyterKernelGalileoIcon.d.ts

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

package/data1/esm/JupyterKernelGalileoIcon.js

@@ -6,31 +6,73 @@ const sizeMap = {
   "large": 64
 };
 
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  React.useLayoutEffect(() => {
+    if (typeof mode === "string") {
+      setResolved(mode);
+      return;
+    }
+    if (typeof document === "undefined") return;
+    let cur = null;
+    let el = ref.current && ref.current.parentElement;
+    while (el) {
+      const m = el.getAttribute && el.getAttribute("data-color-mode");
+      if (m) { cur = m; break; }
+      el = el.parentElement;
+    }
+    if (!cur || cur === "auto") {
+      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setResolved(cur === "dark" ? "light" : "dark");
+  }, [mode]);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    "data-color-mode": resolved || "light",
+    "data-light-theme": "light",
+    "data-dark-theme": "dark",
+    style: { display: "inline-flex", lineHeight: 0 }
+  }, children);
+}
+
 function JupyterKernelGalileoIcon({
   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 20 20",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
-    "aria-hidden": "true",
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f37726' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f37726') ? 'white' : 'currentColor'),
-    strokeWidth: 0.008,
+    fill: colored ? '#f37726' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M9.813 13.52C7.707 13.52 6 11.853 6 9.798c0-2.055 1.707-3.721 3.813-3.721s3.813 1.666 3.813 3.721-1.707 3.722-3.813 3.722zm3.412-3.682c0-1.458-1.543-2.64-3.446-2.64-1.903 0-3.447 1.182-3.447 2.64 0 1.459 1.544 2.641 3.447 2.641s3.446-1.182 3.446-2.64z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#f37726' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#f37726') ? 'white' : 'currentColor'),
-    d: "M2.993 9.832c0-4.066 1.46-7.64 3.614-9.488a10.116 10.116 0 000 18.976c-2.155-1.843-3.614-5.403-3.614-9.488zM17.007 9.832c0 4.067-1.46 7.64-3.614 9.488a10.117 10.117 0 000-18.976c2.16 1.848 3.614 5.404 3.614 9.488z"
+    fill: colored ? '#f37726' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    d: "M2.993 9.832c0-4.066 1.46-7.64 3.614-9.488a10.116 10.116 0 000 18.976c-2.155-1.843-3.614-5.403-3.614-9.488zm14.014 0c0 4.067-1.46 7.64-3.614 9.488a10.117 10.117 0 000-18.976c2.16 1.848 3.614 5.404 3.614 9.488z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(JupyterKernelGalileoIcon);
 export default ForwardRef;

package/data1/esm/JupyterKernelGatewayIcon.d.ts

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