@datalayer/icons-react 1.0.14 → 1.0.15

package/data1/JupiterIcon.js

@@ -6,38 +6,96 @@ const sizeMap = {
   "large": 64
 };
 
-const { forwardRef } = require("react");
-const JupiterIcon = ({
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
+  React.useLayoutEffect(() => {
+    if (typeof document === "undefined") return;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
+    let el = ref.current && ref.current.parentElement;
+    while (el && (!currentMode || !lightTheme || !darkTheme)) {
+      if (el.getAttribute) {
+        currentMode = currentMode || el.getAttribute("data-color-mode");
+        lightTheme = lightTheme || el.getAttribute("data-light-theme");
+        darkTheme = darkTheme || el.getAttribute("data-dark-theme");
+      }
+      el = el.parentElement;
+    }
+    if (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
+  }, [mode]);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    "data-color-mode": appearance.mode || "light",
+    "data-light-theme": appearance.lightTheme || undefined,
+    "data-dark-theme": appearance.darkTheme || undefined,
+    style: {
+      display: "inline-flex",
+      lineHeight: 0,
+      color: "var(--fgColor-default, var(--color-fg-default, currentColor))"
+    }
+  }, children);
+}
+
+function JupiterIcon({
   title,
+  titleId,
   size,
   colored,
   themed,
-  titleId,
+  colormode,
   ...props
-}, ref) => /*#__PURE__*/React.createElement("svg", Object.assign({
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  "aria-hidden": "true",
+}, svgRef) {
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 512 512",
+    fill: (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-  viewBox: "0 0 512 512",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("circle", {
-  cx: 255.997,
-  cy: 255.995,
-  r: 255.995,
-  fill: colored ? "#ffac12" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 74%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#d89210" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M256.001 0c141.383 0 255.997 114.616 255.997 255.998S397.384 511.993 256.001 511.993z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#f9d026" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M489.914 151.847c-120.859-1.816-180.247-25.321-233.912-47.879-47.372-19.911-90.285-39.086-167.085-41.946a259 259 0 0 0-13.944 12.95C38.16 111.785 14.92 157.024 5.218 204.479c70.274 16.41 157.675 78.401 250.548 85.056q.119.008.238.014c83.363 5.863 171.123-46.303 254.844-57.877a255.8 255.8 0 0 0-20.934-79.825M308.147 381.73c-18.717 0-36.016.981-52.145 2.659-83.794 8.722-135.809 36.396-188.674 44.629a259 259 0 0 0 7.643 8c49.99 49.99 115.511 74.984 181.031 74.982 65.515-.002 131.029-24.996 181.016-74.982a259 259 0 0 0 11.915-12.77c-21.362-17.518-65.101-42.518-140.786-42.518"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#e7c224" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 75%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M256.002 289.549c83.363 5.863 171.123-46.303 254.844-57.877a255.8 255.8 0 0 0-20.933-79.825c-120.859-1.816-180.247-25.321-233.912-47.879v185.581zm0 94.84V512c65.515-.002 131.029-24.996 181.016-74.982a259 259 0 0 0 11.915-12.77c-21.362-17.518-65.102-42.519-140.786-42.519-18.717.001-36.017.981-52.145 2.66"
-}));
-const ForwardRef = forwardRef(JupiterIcon);
+    "aria-hidden": "true",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props, {
+    "data-datalayer-icon": "",
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-color": props.color,
+      color: props.color
+    }) : props && props.style
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("circle", {
+    cx: 255.997,
+    cy: 255.995,
+    r: 255.995,
+    fill: colored ? "#ffac12" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 74%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#d89210" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M256.001 0c141.383 0 255.997 114.616 255.997 255.998S397.384 511.993 256.001 511.993V0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M489.914 151.847c-120.859-1.816-180.247-25.321-233.912-47.879-47.372-19.911-90.285-39.086-167.085-41.946a259.241 259.241 0 00-13.944 12.95C38.16 111.785 14.92 157.024 5.218 204.479c70.274 16.41 157.675 78.401 250.548 85.056.079.006.159.009.238.014 83.363 5.863 171.123-46.303 254.844-57.877a255.797 255.797 0 00-20.934-79.825zM308.147 381.73c-18.717 0-36.016.981-52.145 2.659-83.794 8.722-135.809 36.396-188.674 44.629a258.603 258.603 0 007.643 8c49.99 49.99 115.511 74.984 181.031 74.982 65.515-.002 131.029-24.996 181.016-74.982a259.39 259.39 0 0011.915-12.77c-21.362-17.518-65.101-42.518-140.786-42.518z",
+    fill: colored ? "#f9d026" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M256.002 289.549c83.363 5.863 171.123-46.303 254.844-57.877a255.782 255.782 0 00-20.933-79.825c-120.859-1.816-180.247-25.321-233.912-47.879v185.581zm0 94.84V512c65.515-.002 131.029-24.996 181.016-74.982a259.39 259.39 0 0011.915-12.77c-21.362-17.518-65.102-42.519-140.786-42.519-18.717.001-36.017.981-52.145 2.66z",
+    fill: colored ? "#e7c224" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 75%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
+  }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(JupiterIcon);
 module.exports = ForwardRef;

package/data1/JupyterBaseIcon.js

@@ -6,27 +6,85 @@ const sizeMap = {
   "large": 64
 };
 
-const { forwardRef } = require("react");
-const JupyterBaseIcon = ({
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
+  React.useLayoutEffect(() => {
+    if (typeof document === "undefined") return;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
+    let el = ref.current && ref.current.parentElement;
+    while (el && (!currentMode || !lightTheme || !darkTheme)) {
+      if (el.getAttribute) {
+        currentMode = currentMode || el.getAttribute("data-color-mode");
+        lightTheme = lightTheme || el.getAttribute("data-light-theme");
+        darkTheme = darkTheme || el.getAttribute("data-dark-theme");
+      }
+      el = el.parentElement;
+    }
+    if (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
+  }, [mode]);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    "data-color-mode": appearance.mode || "light",
+    "data-light-theme": appearance.lightTheme || undefined,
+    "data-dark-theme": appearance.darkTheme || undefined,
+    style: {
+      display: "inline-flex",
+      lineHeight: 0,
+      color: "var(--fgColor-default, var(--color-fg-default, currentColor))"
+    }
+  }, children);
+}
+
+function JupyterBaseIcon({
   title,
+  titleId,
   size,
   colored,
   themed,
-  titleId,
+  colormode,
   ...props
-}, ref) => /*#__PURE__*/React.createElement("svg", Object.assign({
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "none",
-  "aria-hidden": "true",
+}, svgRef) {
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 21 21",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-  viewBox: "0 0 21 21",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#F37726" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M10.385 16.574c-3.755 0-7.055-1.348-8.761-3.338a9.34 9.34 0 0 0 17.522 0c-1.702 1.99-4.99 3.338-8.761 3.338m0-12.941c3.755 0 7.054 1.348 8.76 3.338a9.342 9.342 0 0 0-17.521 0c1.706-1.994 4.99-3.338 8.76-3.338z"
-}));
-const ForwardRef = forwardRef(JupyterBaseIcon);
+    "aria-hidden": "true",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props, {
+    "data-datalayer-icon": "",
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-color": props.color,
+      color: props.color
+    }) : props && props.style
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#F37726" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M10.385 16.574c-3.755 0-7.055-1.348-8.761-3.338a9.34 9.34 0 0017.522 0c-1.702 1.99-4.99 3.338-8.761 3.338zm0-12.941c3.755 0 7.054 1.348 8.76 3.338a9.342 9.342 0 00-17.521 0c1.706-1.994 4.99-3.338 8.76-3.338z"
+  }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(JupyterBaseIcon);
 module.exports = ForwardRef;

package/data1/JupyterBaseNameIcon.js

@@ -6,30 +6,88 @@ const sizeMap = {
   "large": 64
 };
 
-const { forwardRef } = require("react");
-const JupyterBaseNameIcon = ({
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
+  React.useLayoutEffect(() => {
+    if (typeof document === "undefined") return;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
+    let el = ref.current && ref.current.parentElement;
+    while (el && (!currentMode || !lightTheme || !darkTheme)) {
+      if (el.getAttribute) {
+        currentMode = currentMode || el.getAttribute("data-color-mode");
+        lightTheme = lightTheme || el.getAttribute("data-light-theme");
+        darkTheme = darkTheme || el.getAttribute("data-dark-theme");
+      }
+      el = el.parentElement;
+    }
+    if (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
+  }, [mode]);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    "data-color-mode": appearance.mode || "light",
+    "data-light-theme": appearance.lightTheme || undefined,
+    "data-dark-theme": appearance.darkTheme || undefined,
+    style: {
+      display: "inline-flex",
+      lineHeight: 0,
+      color: "var(--fgColor-default, var(--color-fg-default, currentColor))"
+    }
+  }, children);
+}
+
+function JupyterBaseNameIcon({
   title,
+  titleId,
   size,
   colored,
   themed,
-  titleId,
+  colormode,
   ...props
-}, ref) => /*#__PURE__*/React.createElement("svg", Object.assign({
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "none",
-  "aria-hidden": "true",
+}, svgRef) {
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 21 21",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-  viewBox: "0 0 21 21",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#4E4E4E" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 42%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 92%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 42%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 92%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 42%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M1.19 11.158c0 .73-.058.968-.208 1.143a.9.9 0 0 1-.61.234l.06.417c.348.005.686-.118.95-.346a1.67 1.67 0 0 0 .367-1.252V8.592H1.19zm4.17-.329c0 .313 0 .592.025.834h-.497l-.033-.496a1.16 1.16 0 0 1-1.014.567c-.484 0-1.06-.262-1.06-1.335V8.618h.56v1.669c0 .58.179.967.684.967a.78.78 0 0 0 .788-.788V8.597h.56v2.215zM6.42 9.61c0-.388 0-.705-.026-.992h.5l.026.521a1.21 1.21 0 0 1 1.093-.592c.742 0 1.301.621 1.301 1.547 0 1.093-.671 1.636-1.397 1.636a1.08 1.08 0 0 1-.947-.48v1.669h-.55zm.55.814q.002.114.025.225a.86.86 0 0 0 .834.647c.589 0 .935-.48.935-1.177 0-.609-.326-1.13-.914-1.13a.96.96 0 0 0-.88.913zm3.34-1.809.672 1.798c.071.2.146.442.196.621.059-.183.121-.417.196-.634l.61-1.785h.588l-.835 2.17c-.417 1.042-.671 1.58-1.055 1.906-.194.176-.43.3-.684.358l-.138-.467a1.5 1.5 0 0 0 .488-.271c.204-.166.365-.377.471-.617a.4.4 0 0 0 .046-.134.5.5 0 0 0-.037-.146L9.693 8.606h.61zm3.746-.875v.876h.8v.417h-.8v1.644c0 .375.108.592.417.592q.165.004.325-.038l.025.418q-.241.082-.496.075a.78.78 0 0 1-.605-.234 1.12 1.12 0 0 1-.217-.793V9.03h-.476v-.42h.484v-.74zm1.83 2.497a.98.98 0 0 0 1.056 1.055c.286.007.57-.047.834-.158l.096.417a2.5 2.5 0 0 1-1.022.188 1.42 1.42 0 0 1-1.51-1.536c0-.918.546-1.643 1.44-1.643 1 0 1.25.876 1.25 1.435q.009.129 0 .258h-2.156zm1.636-.418a.79.79 0 0 0-.776-.9.92.92 0 0 0-.855.9h1.63zm1.358-.256c0-.358 0-.667-.026-.95h.5v.596h.026a.92.92 0 0 1 .834-.668.6.6 0 0 1 .159 0v.522a1 1 0 0 0-.192 0 .78.78 0 0 0-.747.709 1.5 1.5 0 0 0-.025.259v1.622h-.55V9.569l.02-.005z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#F37726" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M10.385 16.574c-3.755 0-7.055-1.348-8.761-3.338a9.34 9.34 0 0 0 17.522 0c-1.702 1.99-4.99 3.338-8.761 3.338m0-12.941c3.755 0 7.054 1.348 8.76 3.338a9.342 9.342 0 0 0-17.521 0c1.706-1.994 4.99-3.338 8.76-3.338z"
-}));
-const ForwardRef = forwardRef(JupyterBaseNameIcon);
+    "aria-hidden": "true",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props, {
+    "data-datalayer-icon": "",
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-color": props.color,
+      color: props.color
+    }) : props && props.style
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#4E4E4E" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 42%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 92%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 42%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 92%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 42%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M1.19 11.158c0 .73-.058.968-.208 1.143a.91.91 0 01-.61.234l.06.417c.348.005.686-.118.95-.346a1.668 1.668 0 00.367-1.252V8.592H1.19v2.566zm4.17-.329c0 .313 0 .592.025.834h-.497l-.033-.496a1.156 1.156 0 01-1.014.567c-.484 0-1.06-.262-1.06-1.335V8.618h.56v1.669c0 .58.179.967.684.967a.78.78 0 00.788-.788V8.597h.56v2.215l-.013.017zM6.42 9.61c0-.388 0-.705-.026-.992h.5l.026.521a1.21 1.21 0 011.093-.592c.742 0 1.301.621 1.301 1.547 0 1.093-.671 1.636-1.397 1.636a1.08 1.08 0 01-.947-.48v1.669h-.55V9.61zm.55.814c.001.076.01.151.025.225a.86.86 0 00.834.647c.589 0 .935-.48.935-1.177 0-.609-.326-1.13-.914-1.13a.96.96 0 00-.88.913v.522zm3.34-1.809l.672 1.798c.071.2.146.442.196.621.059-.183.121-.417.196-.634l.61-1.785h.588l-.835 2.17c-.417 1.042-.671 1.58-1.055 1.906-.194.176-.43.3-.684.358l-.138-.467a1.48 1.48 0 00.488-.271c.204-.166.365-.377.471-.617a.418.418 0 00.046-.134.483.483 0 00-.037-.146L9.693 8.606h.61l.007.009zm3.746-.875v.876h.8v.417h-.8v1.644c0 .375.108.592.417.592.11.002.219-.01.325-.038l.025.418c-.16.055-.327.08-.496.075a.776.776 0 01-.605-.234 1.122 1.122 0 01-.217-.793V9.03h-.476v-.42h.484v-.74l.543-.13zm1.83 2.497a.98.98 0 001.056 1.055c.286.007.57-.047.834-.158l.096.417a2.503 2.503 0 01-1.022.188 1.419 1.419 0 01-1.51-1.536c0-.918.546-1.643 1.44-1.643 1 0 1.25.876 1.25 1.435.006.086.006.172 0 .258h-2.156l.012-.016zm1.636-.418a.79.79 0 00-.776-.9.922.922 0 00-.855.9h1.63zm1.358-.256c0-.358 0-.667-.026-.95h.5v.596h.026a.922.922 0 01.834-.668.61.61 0 01.159 0v.522a.834.834 0 00-.192 0 .78.78 0 00-.747.709 1.537 1.537 0 00-.025.259v1.622h-.55V9.569l.02-.005z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#F37726" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M10.385 16.574c-3.755 0-7.055-1.348-8.761-3.338a9.34 9.34 0 0017.522 0c-1.702 1.99-4.99 3.338-8.761 3.338zm0-12.941c3.755 0 7.054 1.348 8.76 3.338a9.342 9.342 0 00-17.521 0c1.706-1.994 4.99-3.338 8.76-3.338z"
+  }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(JupyterBaseNameIcon);
 module.exports = ForwardRef;

package/data1/JupyterBookIcon.js

@@ -6,31 +6,89 @@ const sizeMap = {
   "large": 64
 };
 
-const { forwardRef } = require("react");
-const JupyterBookIcon = ({
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
+  React.useLayoutEffect(() => {
+    if (typeof document === "undefined") return;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
+    let el = ref.current && ref.current.parentElement;
+    while (el && (!currentMode || !lightTheme || !darkTheme)) {
+      if (el.getAttribute) {
+        currentMode = currentMode || el.getAttribute("data-color-mode");
+        lightTheme = lightTheme || el.getAttribute("data-light-theme");
+        darkTheme = darkTheme || el.getAttribute("data-dark-theme");
+      }
+      el = el.parentElement;
+    }
+    if (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
+  }, [mode]);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    "data-color-mode": appearance.mode || "light",
+    "data-light-theme": appearance.lightTheme || undefined,
+    "data-dark-theme": appearance.darkTheme || undefined,
+    style: {
+      display: "inline-flex",
+      lineHeight: 0,
+      color: "var(--fgColor-default, var(--color-fg-default, currentColor))"
+    }
+  }, children);
+}
+
+function JupyterBookIcon({
   title,
+  titleId,
   size,
   colored,
   themed,
-  titleId,
+  colormode,
   ...props
-}, ref) => /*#__PURE__*/React.createElement("svg", Object.assign({
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  "aria-hidden": "true",
+}, svgRef) {
+  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",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-  "data-name": "Layer 1",
-  viewBox: "0 0 81.78 71.15",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#f37726" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  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" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M20.39 41.34A13.9 13.9 0 0 1 14.23 40a10.6 10.6 0 0 1-4.42-4.06A14.2 14.2 0 0 1 8 29.14V29h5.3c.07 2.74.7 4.75 1.88 6.05a6.58 6.58 0 0 0 5.09 1.92 6.73 6.73 0 0 0 3.8-1 5.9 5.9 0 0 0 2.2-2.75 10.4 10.4 0 0 0 .72-4V4.33l-5.44-.72V0h15.56v3.55l-4.57.78v24.86a14 14 0 0 1-1.39 6.39 9.9 9.9 0 0 1-4.09 4.25 13.43 13.43 0 0 1-6.67 1.51m20.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.6 7.6 0 0 1-1.71 4.86 10.37 10.37 0 0 1-4.55 3.18 9.5 9.5 0 0 1 4.22 2 10 10 0 0 1 2.73 3.58 10.9 10.9 0 0 1 1 4.64q0 5.59-3.64 8.55t-9.86 3zm10.08-4.31h9.23a8.5 8.5 0 0 0 5.86-1.86 6.68 6.68 0 0 0 2.09-5.28 10 10 0 0 0-.76-4.11 5.64 5.64 0 0 0-2.36-2.63 7.65 7.65 0 0 0-4-.93H51.38zm0-19.11h8.93a6.7 6.7 0 0 0 4.79-1.72 6.17 6.17 0 0 0 1.84-4.7A5.89 5.89 0 0 0 64.86 6a9.38 9.38 0 0 0-6-1.64h-7.5z"
-}));
-const ForwardRef = forwardRef(JupyterBookIcon);
+    fill: (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    "aria-hidden": "true",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props, {
+    "data-datalayer-icon": "",
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-color": props.color,
+      color: props.color
+    }) : props && props.style
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#f37726" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    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" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    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 (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(JupyterBookIcon);
 module.exports = ForwardRef;

package/data1/JupyterContentIcon.js

@@ -6,39 +6,97 @@ const sizeMap = {
   "large": 64
 };
 
-const { forwardRef } = require("react");
-const JupyterContentIcon = ({
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
+  React.useLayoutEffect(() => {
+    if (typeof document === "undefined") return;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
+    let el = ref.current && ref.current.parentElement;
+    while (el && (!currentMode || !lightTheme || !darkTheme)) {
+      if (el.getAttribute) {
+        currentMode = currentMode || el.getAttribute("data-color-mode");
+        lightTheme = lightTheme || el.getAttribute("data-light-theme");
+        darkTheme = darkTheme || el.getAttribute("data-dark-theme");
+      }
+      el = el.parentElement;
+    }
+    if (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
+  }, [mode]);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    "data-color-mode": appearance.mode || "light",
+    "data-light-theme": appearance.lightTheme || undefined,
+    "data-dark-theme": appearance.darkTheme || undefined,
+    style: {
+      display: "inline-flex",
+      lineHeight: 0,
+      color: "var(--fgColor-default, var(--color-fg-default, currentColor))"
+    }
+  }, children);
+}
+
+function JupyterContentIcon({
   title,
+  titleId,
   size,
   colored,
   themed,
-  titleId,
+  colormode,
   ...props
-}, ref) => /*#__PURE__*/React.createElement("svg", Object.assign({
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "none",
-  "aria-hidden": "true",
+}, svgRef) {
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 21 21",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-  viewBox: "0 0 21 21",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#F37726" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M10.395 17.398c-4.066 0-7.64-1.46-9.488-3.615a10.116 10.116 0 0 0 18.976 0c-1.843 2.155-5.404 3.615-9.488 3.615m0-14.015c4.066 0 7.64 1.46 9.488 3.615a10.117 10.117 0 0 0-18.976 0c1.848-2.16 5.403-3.615 9.488-3.615"
-}), /*#__PURE__*/React.createElement("text", {
-  x: 4.555,
-  y: 16.197,
-  fill: colored ? "#4e4e4e" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 42%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 92%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 42%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 92%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 42%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  fontFamily: "sans-serif",
-  fontSize: 16,
-  style: {
-    lineHeight: 1.25
-  }
-}, /*#__PURE__*/React.createElement("tspan", {
-  x: 4.555,
-  y: 16.197
-}, "C")));
-const ForwardRef = forwardRef(JupyterContentIcon);
+    "aria-hidden": "true",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props, {
+    "data-datalayer-icon": "",
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-color": props.color,
+      color: props.color
+    }) : props && props.style
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#F37726" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    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" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 42%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 92%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 42%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 92%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 42%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    fontFamily: "sans-serif",
+    fontSize: 16
+  }, /*#__PURE__*/React.createElement("tspan", {
+    x: 4.555,
+    y: 16.197
+  }, "C")));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(JupyterContentIcon);
 module.exports = ForwardRef;