@datalayer/icons-react 1.0.14 → 1.0.15

package/data1/esm/JupyterKernelGatewayIcon.js

@@ -6,33 +6,91 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const JupyterKernelGatewayIcon = ({
+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 JupyterKernelGatewayIcon({
   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: "M5.124 13.404V5.316h1.044v3.9h.036c.216-.312.432-.6.636-.864l2.472-3.036h1.296L7.68 8.748l3.156 4.656H9.6L6.948 9.432l-.78.888v3.084z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#8F8F8F" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M16.56 9.18v3.372c0 1.344-.276 2.148-.828 2.664-.576.516-1.393.696-2.124.696-.697 0-1.465-.168-1.933-.48l.264-.816c.384.252.985.468 1.704.468 1.08 0 1.872-.564 1.872-2.04v-.636h-.024c-.311.54-.947.972-1.848.972-1.44 0-2.472-1.224-2.472-2.832 0-1.968 1.285-3.072 2.629-3.072 1.007 0 1.547.516 1.811.996h.024l.037-.876h.936c-.037.408-.049.888-.049 1.584zm-1.056 1.752V9.888c0-.18-.012-.336-.06-.468-.193-.624-.697-1.128-1.477-1.128-1.008 0-1.728.852-1.728 2.196 0 1.14.588 2.088 1.716 2.088.66 0 1.248-.408 1.464-1.08.06-.18.085-.384.085-.564"
-}), /*#__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.36 17.018c-4.066 0-7.64-1.46-9.488-3.614a10.116 10.116 0 0 0 18.976 0c-1.843 2.155-5.403 3.614-9.488 3.614m0-14.014c4.067 0 7.64 1.46 9.488 3.614a10.116 10.116 0 0 0-18.976 0c1.848-2.16 5.404-3.614 9.488-3.614"
-}));
-const ForwardRef = forwardRef(JupyterKernelGatewayIcon);
+    "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: "M5.124 13.404V5.316h1.044v3.9h.036c.216-.312.432-.6.636-.864l2.472-3.036h1.296L7.68 8.748l3.156 4.656H9.6L6.948 9.432l-.78.888v3.084H5.124z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#8F8F8F" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M16.56 9.18v3.372c0 1.344-.276 2.148-.828 2.664-.576.516-1.393.696-2.124.696-.697 0-1.465-.168-1.933-.48l.264-.816c.384.252.985.468 1.704.468 1.08 0 1.872-.564 1.872-2.04v-.636h-.024c-.311.54-.947.972-1.848.972-1.44 0-2.472-1.224-2.472-2.832 0-1.968 1.285-3.072 2.629-3.072 1.007 0 1.547.516 1.811.996h.024l.037-.876h.936c-.037.408-.049.888-.049 1.584zm-1.056 1.752V9.888c0-.18-.012-.336-.06-.468-.193-.624-.697-1.128-1.477-1.128-1.008 0-1.728.852-1.728 2.196 0 1.14.588 2.088 1.716 2.088.66 0 1.248-.408 1.464-1.08.06-.18.085-.384.085-.564z"
+  }), /*#__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.36 17.018c-4.066 0-7.64-1.46-9.488-3.614a10.116 10.116 0 0018.976 0c-1.843 2.155-5.403 3.614-9.488 3.614zm0-14.014c4.067 0 7.64 1.46 9.488 3.614a10.116 10.116 0 00-18.976 0c1.848-2.16 5.404-3.614 9.488-3.614z"
+  }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(JupyterKernelGatewayIcon);
 export default ForwardRef;

package/data1/esm/JupyterKernelIcon.js

@@ -6,30 +6,88 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const JupyterKernelIcon = ({
+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 JupyterKernelIcon({
   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: "M6.768 15.628V4.426h1.446v5.402h.05c.299-.432.598-.831.88-1.197l3.424-4.205h1.795l-4.055 4.753 4.371 6.45h-1.712l-3.673-5.502-1.08 1.23v4.271z"
-}), /*#__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.36 17.018c-4.066 0-7.64-1.46-9.488-3.614a10.116 10.116 0 0 0 18.976 0c-1.843 2.155-5.403 3.614-9.488 3.614m0-14.014c4.067 0 7.64 1.46 9.488 3.614a10.116 10.116 0 0 0-18.976 0c1.848-2.16 5.404-3.614 9.488-3.614"
-}));
-const ForwardRef = forwardRef(JupyterKernelIcon);
+    "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: "M6.768 15.628V4.426h1.446v5.402h.05c.299-.432.598-.831.88-1.197l3.424-4.205h1.795l-4.055 4.753 4.371 6.45h-1.712l-3.673-5.502-1.08 1.23v4.271z"
+  }), /*#__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.36 17.018c-4.066 0-7.64-1.46-9.488-3.614a10.116 10.116 0 0018.976 0c-1.843 2.155-5.403 3.614-9.488 3.614zm0-14.014c4.067 0 7.64 1.46 9.488 3.614a10.116 10.116 0 00-18.976 0c1.848-2.16 5.404-3.614 9.488-3.614z"
+  }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(JupyterKernelIcon);
 export default ForwardRef;

package/data1/esm/JupyterKernelProvisionerIcon.js

@@ -6,33 +6,91 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const JupyterKernelProvisionerIcon = ({
+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 JupyterKernelProvisionerIcon({
   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.4 17.64c-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.614-9.488 3.614zm0-14.015c4.066 0 7.64 1.46 9.488 3.614a10.117 10.117 0 0 0-18.976 0C2.76 5.08 6.316 3.625 10.4 3.625"
-}), /*#__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: "M4.514 14.025V5.937h1.044v3.9h.036c.216-.312.432-.6.636-.864l2.472-3.036h1.296L7.07 9.369l3.156 4.656H8.99l-2.652-3.972-.78.888v3.084z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#8F8F8F" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M10.982 16.4v-6.287c0-.744-.024-1.344-.048-1.896h.936l.06.996h.024c.42-.708 1.116-1.116 2.064-1.116 1.416 0 2.472 1.188 2.472 2.94 0 2.088-1.284 3.12-2.652 3.12-.768 0-1.44-.336-1.788-.912h-.024V16.4zm1.044-5.747v1.008a1.63 1.63 0 0 0 1.632 1.668c1.116 0 1.764-.912 1.764-2.244 0-1.152-.612-2.148-1.728-2.148-.72 0-1.404.504-1.596 1.296a1.7 1.7 0 0 0-.072.42"
-}));
-const ForwardRef = forwardRef(JupyterKernelProvisionerIcon);
+    "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.4 17.64c-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.614-9.488 3.614zm0-14.015c4.066 0 7.64 1.46 9.488 3.614a10.117 10.117 0 00-18.976 0C2.76 5.08 6.316 3.625 10.4 3.625z"
+  }), /*#__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: "M4.514 14.025V5.937h1.044v3.9h.036c.216-.312.432-.6.636-.864l2.472-3.036h1.296L7.07 9.369l3.156 4.656H8.99l-2.652-3.972-.78.888v3.084H4.514z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#8F8F8F" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M10.982 16.4v-6.287c0-.744-.024-1.344-.048-1.896h.936l.06.996h.024c.42-.708 1.116-1.116 2.064-1.116 1.416 0 2.472 1.188 2.472 2.94 0 2.088-1.284 3.12-2.652 3.12-.768 0-1.44-.336-1.788-.912h-.024V16.4h-1.044zm1.044-5.747v1.008a1.63 1.63 0 001.632 1.668c1.116 0 1.764-.912 1.764-2.244 0-1.152-.612-2.148-1.728-2.148-.72 0-1.404.504-1.596 1.296a1.712 1.712 0 00-.072.42z"
+  }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(JupyterKernelProvisionerIcon);
 export default ForwardRef;

package/data1/esm/JupyterLabIcon.js

@@ -6,68 +6,134 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const JupyterLabIcon = ({
+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 JupyterLabIcon({
   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",
+    "aria-hidden": "true",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-  viewBox: "0 0 20 20",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("g", {
-  clipPath: "url(#prefix__a)",
-  transform: "translate(0 -.93)"
-}, /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "url(#prefix__b)" : (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))))")),
-  d: "M10 20.93c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "url(#prefix__c)" : (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))))")),
-  d: "M10 20.227a9.297 9.297 0 1 0 0-18.593 9.297 9.297 0 0 0 0 18.593"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#fff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M5.144 13.556h1.274v-5.95H5.144zm5.719-2.422c0-.972-.427-1.776-1.793-1.776-.746 0-1.308.21-1.593.368l.235.822c.268-.168.713-.31 1.132-.31.628 0 .745.31.745.536v.05c-1.45 0-2.405.503-2.405 1.568 0 .653.495 1.257 1.324 1.257.486 0 .905-.176 1.174-.503h.025l.075.41h1.148c-.05-.226-.067-.603-.067-.988zm-1.232.93a1 1 0 0 1-.025.219.7.7 0 0 1-.662.469c-.285 0-.503-.16-.503-.486 0-.486.52-.646 1.19-.646zm2.241.269c0 .46-.017.955-.034 1.223h1.082l.05-.57h.017c.284.487.754.663 1.232.663.938 0 1.868-.738 1.868-2.213.009-1.257-.704-2.07-1.684-2.07-.57 0-.997.226-1.24.578h-.017V7.606h-1.274zm1.274-1.123q0-.124.025-.235c.084-.369.402-.628.746-.628.595 0 .88.502.88 1.14 0 .737-.335 1.156-.88 1.156a.78.78 0 0 1-.746-.604 1 1 0 0 1-.025-.226z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#f37626" : (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 2.658A8.27 8.27 0 0 0 2.969 6.59c.88-.697 1.962-1.256 3.174-1.639A12.9 12.9 0 0 1 10 4.37a12.9 12.9 0 0 1 3.867.587c1.214.386 2.297.948 3.177 1.649A8.27 8.27 0 0 0 10 2.658M2.956 15.256A8.27 8.27 0 0 0 10 19.203a8.27 8.27 0 0 0 7.031-3.934c-.88.697-1.962 1.256-3.174 1.64A12.9 12.9 0 0 1 10 17.49a12.9 12.9 0 0 1-3.867-.587c-1.214-.386-2.297-.947-3.177-1.648z"
-})), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("radialGradient", {
-  id: "prefix__c",
-  cx: 0,
-  cy: 0,
-  r: 1,
-  gradientTransform: "translate(10 10.93)scale(7.20004)",
-  gradientUnits: "userSpaceOnUse"
-}, /*#__PURE__*/React.createElement("stop", {
-  stopColor: "#545454"
-}), /*#__PURE__*/React.createElement("stop", {
-  offset: 1,
-  stopColor: "#212121"
-})), /*#__PURE__*/React.createElement("linearGradient", {
-  id: "prefix__b",
-  x1: 9.84,
-  x2: 9.84,
-  y1: 0.931,
-  y2: 20.936,
-  gradientUnits: "userSpaceOnUse"
-}, /*#__PURE__*/React.createElement("stop", {
-  stopColor: "#fff"
-}), /*#__PURE__*/React.createElement("stop", {
-  offset: 1,
-  stopColor: "#BEBEBE"
-})), /*#__PURE__*/React.createElement("clipPath", {
-  id: "prefix__a"
-}, /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#fff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M0 .93h20v20H0z"
-}))));
-const ForwardRef = forwardRef(JupyterLabIcon);
+    viewBox: "0 0 20 20",
+    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("g", {
+    clipPath: "url(#prefix__clip0_14_55)",
+    transform: "translate(0 -.93)"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "url(#prefix__paint0_linear_14_55)" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 76%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 58%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 76%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 58%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 76%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M10 20.93c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "url(#prefix__paint1_radial_14_55)" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 40%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 94%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 40%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 94%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 40%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M10 20.227a9.297 9.297 0 100-18.593 9.297 9.297 0 000 18.593z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#fff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M5.144 13.556h1.274v-5.95H5.144zm5.719-2.422c0-.972-.427-1.776-1.793-1.776-.746 0-1.308.21-1.593.368l.235.822c.268-.168.713-.31 1.132-.31.628 0 .745.31.745.536v.05c-1.45 0-2.405.503-2.405 1.568 0 .653.495 1.257 1.324 1.257.486 0 .905-.176 1.174-.503h.025l.075.41h1.148c-.05-.226-.067-.603-.067-.988zm-1.232.93a.907.907 0 01-.025.219.704.704 0 01-.662.469c-.285 0-.503-.16-.503-.486 0-.486.52-.646 1.19-.646v.445zm2.241.269c0 .46-.017.955-.034 1.223h1.082l.05-.57h.017c.284.487.754.663 1.232.663.938 0 1.868-.738 1.868-2.213.009-1.257-.704-2.07-1.684-2.07-.57 0-.997.226-1.24.578h-.017V7.606h-1.274zm1.274-1.123c0-.084.008-.16.025-.235.084-.369.402-.628.746-.628.595 0 .88.502.88 1.14 0 .737-.335 1.156-.88 1.156a.78.78 0 01-.746-.604.933.933 0 01-.025-.226z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#f37626" : (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 2.658A8.272 8.272 0 002.969 6.59c.88-.697 1.962-1.256 3.174-1.639A12.905 12.905 0 0110 4.37a12.9 12.9 0 013.867.587c1.214.386 2.297.948 3.177 1.649A8.272 8.272 0 0010 2.658zM2.956 15.256A8.273 8.273 0 0010 19.203a8.273 8.273 0 007.031-3.934c-.88.697-1.962 1.256-3.174 1.64A12.903 12.903 0 0110 17.49a12.897 12.897 0 01-3.867-.587c-1.214-.386-2.297-.947-3.177-1.648z"
+  })), /*#__PURE__*/React.createElement("defs", {
+    id: "prefix__defs856"
+  }, /*#__PURE__*/React.createElement("radialGradient", {
+    id: "prefix__paint1_radial_14_55",
+    cx: 0,
+    cy: 0,
+    r: 1,
+    gradientTransform: "translate(10 10.93) scale(7.20004)",
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    id: "prefix__stop843",
+    stopColor: "#545454"
+  }), /*#__PURE__*/React.createElement("stop", {
+    id: "prefix__stop845",
+    offset: 1,
+    stopColor: "#212121"
+  })), /*#__PURE__*/React.createElement("linearGradient", {
+    id: "prefix__paint0_linear_14_55",
+    x1: 9.84,
+    x2: 9.84,
+    y1: 0.931,
+    y2: 20.936,
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    id: "prefix__stop848",
+    stopColor: "#fff"
+  }), /*#__PURE__*/React.createElement("stop", {
+    id: "prefix__stop850",
+    offset: 1,
+    stopColor: "#BEBEBE"
+  })), /*#__PURE__*/React.createElement("clipPath", {
+    id: "prefix__clip0_14_55"
+  }, /*#__PURE__*/React.createElement("path", {
+    id: "prefix__path853",
+    fill: colored ? "#fff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M0 0h20v20H0z",
+    transform: "translate(0 .93)"
+  }))));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(JupyterLabIcon);
 export default ForwardRef;