@datalayer/icons-react 1.0.9 → 1.0.11

package/data1/JupyterKernelIcon.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 21" aria-hidden="true">
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 21" aria-hidden="true">
   <path fill="#4e4e4e" stroke-width="1.385" 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"/>
   <path fill="#F37726" 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.614zM10.36 3.004c4.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"/>
 </svg>

package/data1/JupyterKernelIconJupyterLab.d.ts

@@ -1,3 +1,3 @@
-import { LabIcon } from "@jupyterlab/ui-components/lib/icon/labicon";
+import { LabIcon } from "@jupyterlab/ui-components";
 declare const jupyterKernelIconJupyterLab: LabIcon;
 export default jupyterKernelIconJupyterLab;

package/data1/JupyterKernelIconJupyterLab.js

@@ -1,4 +1,8 @@
-import { LabIcon } from '@jupyterlab/ui-components/lib/icon/labicon';
+// The root import, not lib/icon/labicon: inside JupyterLab the root is a
+// federation singleton, so this LabIcon is the class the host recognises
+// with instanceof — a deep import bundles a private copy the host would
+// not style (the icon then renders unstyled, at its intrinsic size).
+import { LabIcon } from '@jupyterlab/ui-components';
 import JupyterKernelIconSvgStr from './JupyterKernelIcon.svg';
 const jupyterKernelIconJupyterLab = new LabIcon({
     name: '@datalayer/icons:jupyter-kernel',

package/data1/JupyterKernelProvisionerIcon.js

@@ -11,31 +11,44 @@ function _DlIconInverseColormode({
   children
 }) {
   const ref = React.useRef(null);
-  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
   React.useLayoutEffect(() => {
-    if (typeof mode === "string") {
-      setResolved(mode);
-      return;
-    }
     if (typeof document === "undefined") return;
-    let cur = null;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
     let el = ref.current && ref.current.parentElement;
-    while (el) {
-      const m = el.getAttribute && el.getAttribute("data-color-mode");
-      if (m) { cur = m; break; }
+    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 (!cur || cur === "auto") {
-      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    if (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
     }
-    setResolved(cur === "dark" ? "light" : "dark");
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
   }, [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 }
+    "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);
 }
 
@@ -50,26 +63,28 @@ function JupyterKernelProvisionerIcon({
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
-    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: "none",
     viewBox: "0 0 21 21",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
   }, props, {
+    "data-datalayer-icon": "",
     style: props && props.color != null ? Object.assign({}, props.style, {
-      "--datalayer-icon-fg": props.color
+      "--datalayer-icon-color": props.color,
+      color: props.color
     }) : props && props.style
-  }), title ? /*#__PURE__*/React.createElement("title", {
+  }), /*#__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' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    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' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    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' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    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;

package/data1/JupyterKernelProvisionerIcon.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 21" aria-hidden="true">
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 21" aria-hidden="true">
   <path fill="#F37726" 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.614zM10.4 3.625c4.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"/>
   <path fill="#4E4E4E" 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"/>
   <path fill="#8F8F8F" 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"/>

package/data1/JupyterKernelProvisionerIconJupyterLab.d.ts

@@ -1,3 +1,3 @@
-import { LabIcon } from "@jupyterlab/ui-components/lib/icon/labicon";
+import { LabIcon } from "@jupyterlab/ui-components";
 declare const jupyterKernelProvisionerIconJupyterLab: LabIcon;
 export default jupyterKernelProvisionerIconJupyterLab;

package/data1/JupyterKernelProvisionerIconJupyterLab.js

@@ -1,4 +1,8 @@
-import { LabIcon } from '@jupyterlab/ui-components/lib/icon/labicon';
+// The root import, not lib/icon/labicon: inside JupyterLab the root is a
+// federation singleton, so this LabIcon is the class the host recognises
+// with instanceof — a deep import bundles a private copy the host would
+// not style (the icon then renders unstyled, at its intrinsic size).
+import { LabIcon } from '@jupyterlab/ui-components';
 import JupyterKernelProvisionerIconSvgStr from './JupyterKernelProvisionerIcon.svg';
 const jupyterKernelProvisionerIconJupyterLab = new LabIcon({
     name: '@datalayer/icons:jupyter-kernel-provisioner',

package/data1/JupyterLabIcon.js

@@ -11,31 +11,44 @@ function _DlIconInverseColormode({
   children
 }) {
   const ref = React.useRef(null);
-  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
   React.useLayoutEffect(() => {
-    if (typeof mode === "string") {
-      setResolved(mode);
-      return;
-    }
     if (typeof document === "undefined") return;
-    let cur = null;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
     let el = ref.current && ref.current.parentElement;
-    while (el) {
-      const m = el.getAttribute && el.getAttribute("data-color-mode");
-      if (m) { cur = m; break; }
+    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 (!cur || cur === "auto") {
-      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    if (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
     }
-    setResolved(cur === "dark" ? "light" : "dark");
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
   }, [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 }
+    "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);
 }
 
@@ -50,32 +63,34 @@ function JupyterLabIcon({
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
-    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: "none",
     "aria-hidden": "true",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     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-fg": props.color
+      "--datalayer-icon-color": props.color,
+      color: props.color
     }) : props && props.style
-  }), title ? /*#__PURE__*/React.createElement("title", {
+  }), /*#__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: "url(#prefix__paint0_linear_14_55)",
+    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: "url(#prefix__paint1_radial_14_55)",
+    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' : 'white',
+    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' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    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"
@@ -111,7 +126,7 @@ function JupyterLabIcon({
     id: "prefix__clip0_14_55"
   }, /*#__PURE__*/React.createElement("path", {
     id: "prefix__path853",
-    fill: colored ? '#fff' : 'white',
+    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)"
   }))));

package/data1/JupyterLabIcon.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 20 20">
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 20 20">
   <g clip-path="url(#clip0_14_55)" transform="translate(0 -.93)">
     <path fill="url(#paint0_linear_14_55)" 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"/>
     <path fill="url(#paint1_radial_14_55)" d="M10 20.227a9.297 9.297 0 100-18.593 9.297 9.297 0 000 18.593z"/>

package/data1/JupyterLabIconJupyterLab.d.ts

@@ -1,3 +1,3 @@
-import { LabIcon } from "@jupyterlab/ui-components/lib/icon/labicon";
+import { LabIcon } from "@jupyterlab/ui-components";
 declare const jupyterLabIconJupyterLab: LabIcon;
 export default jupyterLabIconJupyterLab;

package/data1/JupyterLabIconJupyterLab.js

@@ -1,4 +1,8 @@
-import { LabIcon } from '@jupyterlab/ui-components/lib/icon/labicon';
+// The root import, not lib/icon/labicon: inside JupyterLab the root is a
+// federation singleton, so this LabIcon is the class the host recognises
+// with instanceof — a deep import bundles a private copy the host would
+// not style (the icon then renders unstyled, at its intrinsic size).
+import { LabIcon } from '@jupyterlab/ui-components';
 import JupyterLabIconSvgStr from './JupyterLabIcon.svg';
 const jupyterLabIconJupyterLab = new LabIcon({
     name: '@datalayer/icons:jupyter-lab',

package/data1/JupyterMystIcon.js

@@ -11,31 +11,44 @@ function _DlIconInverseColormode({
   children
 }) {
   const ref = React.useRef(null);
-  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
   React.useLayoutEffect(() => {
-    if (typeof mode === "string") {
-      setResolved(mode);
-      return;
-    }
     if (typeof document === "undefined") return;
-    let cur = null;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
     let el = ref.current && ref.current.parentElement;
-    while (el) {
-      const m = el.getAttribute && el.getAttribute("data-color-mode");
-      if (m) { cur = m; break; }
+    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 (!cur || cur === "auto") {
-      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    if (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
     }
-    setResolved(cur === "dark" ? "light" : "dark");
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
   }, [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 }
+    "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);
 }
 
@@ -50,23 +63,25 @@ function JupyterMystIcon({
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
-    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: "none",
     viewBox: "0 0 21 21",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
   }, props, {
+    "data-datalayer-icon": "",
     style: props && props.color != null ? Object.assign({}, props.style, {
-      "--datalayer-icon-fg": props.color
+      "--datalayer-icon-color": props.color,
+      color: props.color
     }) : props && props.style
-  }), title ? /*#__PURE__*/React.createElement("title", {
+  }), /*#__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' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    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.178 17.933c-4.066 0-7.64-1.46-9.488-3.614a10.116 10.116 0 0018.976 0c-1.843 2.155-5.404 3.614-9.488 3.614zm0-14.014c4.066 0 7.64 1.46 9.488 3.614a10.117 10.117 0 00-18.976 0c1.848-2.16 5.403-3.614 9.488-3.614z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#F37726' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    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: "M6.442 15.932c-.585-.193-1-.482-1.256-.892a2.92 2.92 0 01-.362-1.484v-1.05c0-.386-.074-.675-.234-.892-.16-.218-.383-.314-.702-.314v-.748c.32 0 .553-.109.702-.314.15-.205.234-.506.234-.892v-1.05c-.01-.53.117-1.05.373-1.484.245-.41.66-.7 1.245-.893l.181.604a1.2 1.2 0 00-.702.639c-.15.35-.224.748-.213 1.134v1.05c.01.325-.064.651-.192.94-.127.266-.32.495-.564.628.245.145.447.362.575.64.128.289.191.614.191.94v1.05c-.01.386.064.784.213 1.134.15.313.394.543.703.64l-.192.614zm7.514-.084l-.18-.591c.297-.097.542-.326.68-.627.15-.35.224-.724.213-1.11v-1.026c-.01-.325.064-.651.202-.94a1.3 1.3 0 01.618-.616 1.315 1.315 0 01-.618-.603 2.203 2.203 0 01-.202-.953V8.344a2.689 2.689 0 00-.213-1.122 1.145 1.145 0 00-.68-.627l.18-.591c.564.18.98.47 1.224.868.255.435.383.941.362 1.46V9.37c0 .374.074.675.223.88.15.205.384.314.703.314v.736c-.32 0-.554.108-.703.314-.149.205-.223.506-.223.88v1.026a2.86 2.86 0 01-.362 1.46c-.245.386-.66.675-1.224.868z"
   }));
   if (!colormode) return _svgEl;

package/data1/JupyterMystIcon.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 21" aria-hidden="true">
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 21" aria-hidden="true">
   <path fill="#F37726" d="M10.178 17.933c-4.066 0-7.64-1.46-9.488-3.614a10.116 10.116 0 0018.976 0c-1.843 2.155-5.404 3.614-9.488 3.614zM10.178 3.919c4.066 0 7.64 1.46 9.488 3.614a10.117 10.117 0 00-18.976 0c1.848-2.16 5.403-3.614 9.488-3.614z"/>
   <path fill="#F37726" d="M6.442 15.932c-.585-.193-1-.482-1.256-.892a2.92 2.92 0 01-.362-1.484v-1.05c0-.386-.074-.675-.234-.892-.16-.218-.383-.314-.702-.314v-.748c.32 0 .553-.109.702-.314.15-.205.234-.506.234-.892v-1.05c-.01-.53.117-1.05.373-1.484.245-.41.66-.7 1.245-.893l.181.604a1.2 1.2 0 00-.702.639c-.15.35-.224.748-.213 1.134v1.05c.01.325-.064.651-.192.94-.127.266-.32.495-.564.628.245.145.447.362.575.64.128.289.191.614.191.94v1.05c-.01.386.064.784.213 1.134.15.313.394.543.703.64l-.192.614zM13.956 15.848l-.18-.591c.297-.097.542-.326.68-.627.15-.35.224-.724.213-1.11v-1.026c-.01-.325.064-.651.202-.94.139-.278.352-.495.618-.616a1.315 1.315 0 01-.618-.603 2.203 2.203 0 01-.202-.953V8.344a2.689 2.689 0 00-.213-1.122 1.145 1.145 0 00-.68-.627l.18-.591c.564.18.98.47 1.224.868.255.435.383.941.362 1.46V9.37c0 .374.074.675.223.88.15.205.384.314.703.314v.736c-.32 0-.554.108-.703.314-.149.205-.223.506-.223.88v1.026a2.86 2.86 0 01-.362 1.46c-.245.386-.66.675-1.224.868z"/>
 </svg>

package/data1/JupyterMystIconJupyterLab.d.ts

@@ -1,3 +1,3 @@
-import { LabIcon } from "@jupyterlab/ui-components/lib/icon/labicon";
+import { LabIcon } from "@jupyterlab/ui-components";
 declare const jupyterMystIconJupyterLab: LabIcon;
 export default jupyterMystIconJupyterLab;

package/data1/JupyterMystIconJupyterLab.js

@@ -1,4 +1,8 @@
-import { LabIcon } from '@jupyterlab/ui-components/lib/icon/labicon';
+// The root import, not lib/icon/labicon: inside JupyterLab the root is a
+// federation singleton, so this LabIcon is the class the host recognises
+// with instanceof — a deep import bundles a private copy the host would
+// not style (the icon then renders unstyled, at its intrinsic size).
+import { LabIcon } from '@jupyterlab/ui-components';
 import JupyterMystIconSvgStr from './JupyterMystIcon.svg';
 const jupyterMystIconJupyterLab = new LabIcon({
     name: '@datalayer/icons:jupyter-myst',

package/data1/JupyterMystLetterIcon.js

@@ -11,31 +11,44 @@ function _DlIconInverseColormode({
   children
 }) {
   const ref = React.useRef(null);
-  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
   React.useLayoutEffect(() => {
-    if (typeof mode === "string") {
-      setResolved(mode);
-      return;
-    }
     if (typeof document === "undefined") return;
-    let cur = null;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
     let el = ref.current && ref.current.parentElement;
-    while (el) {
-      const m = el.getAttribute && el.getAttribute("data-color-mode");
-      if (m) { cur = m; break; }
+    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 (!cur || cur === "auto") {
-      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    if (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
     }
-    setResolved(cur === "dark" ? "light" : "dark");
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
   }, [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 }
+    "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);
 }
 
@@ -50,28 +63,30 @@ function JupyterMystLetterIcon({
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
-    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: "none",
     viewBox: "0 0 128 128",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
   }, props, {
+    "data-datalayer-icon": "",
     style: props && props.color != null ? Object.assign({}, props.style, {
-      "--datalayer-icon-fg": props.color
+      "--datalayer-icon-color": props.color,
+      color: props.color
     }) : props && props.style
-  }), title ? /*#__PURE__*/React.createElement("title", {
+  }), /*#__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("rect", {
     width: 128,
     height: 128,
-    fill: colored ? '#fff' : 'white',
+    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))))")),
     rx: 15
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#616161' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    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: "M28.023 72v-4.983l6.447-1.108V20.544l-6.447-1.107v-5.023h16.849L63.42 58.118h.237l17.956-43.704h17.363v5.023l-6.447 1.107V65.91l6.447 1.108V72H78.292v-4.983l6.803-1.108V25.053l-.198-.04-18.708 44.93h-5.18l-19.341-44.85-.198.04.277 24.086v16.69l6.961 1.108V72H28.023z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#F37726' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    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: "M7.56 81.762l6.627-2.246c1.347 4.043 3.706 6.944 7.075 8.704 3.331 1.76 7.468 2.639 12.41 2.639h11.51c4.006 0 7.506.842 10.501 2.527 2.995 1.684 5.297 4.286 6.907 7.805 1.535-3.519 3.8-6.12 6.794-7.805 2.995-1.685 6.533-2.527 10.613-2.527h11.567c4.942 0 9.097-.88 12.466-2.64 3.407-1.759 5.765-4.66 7.075-8.703l6.57 2.246c-2.059 7.263-5.334 12.429-9.826 15.498-4.455 3.107-9.883 4.661-16.285 4.661H79.998c-4.23 0-7.506.954-9.827 2.864-2.283 1.909-3.425 4.866-3.425 8.872h-8.254c0-4.006-1.18-6.963-3.538-8.872-2.32-1.91-5.578-2.864-9.77-2.864H33.67c-6.363 0-11.792-1.554-16.284-4.66-4.492-3.07-7.768-8.236-9.826-15.499z"
   }));
   if (!colormode) return _svgEl;

package/data1/JupyterMystLetterIcon.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128" aria-hidden="true">
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128" aria-hidden="true">
   <rect width="128" height="128" fill="#fff" rx="15"/>
   <path fill="#616161" d="M28.023 72v-4.983l6.447-1.108V20.544l-6.447-1.107v-5.023h16.849L63.42 58.118h.237l17.956-43.704h17.363v5.023l-6.447 1.107V65.91l6.447 1.108V72H78.292v-4.983l6.803-1.108V25.053l-.198-.04-18.708 44.93h-5.18l-19.341-44.85-.198.04.277 24.086v16.69l6.961 1.108V72H28.023z"/>
   <path fill="#F37726" d="M7.56 81.762l6.627-2.246c1.347 4.043 3.706 6.944 7.075 8.704 3.331 1.76 7.468 2.639 12.41 2.639h11.51c4.006 0 7.506.842 10.501 2.527 2.995 1.684 5.297 4.286 6.907 7.805 1.535-3.519 3.8-6.12 6.794-7.805 2.995-1.685 6.533-2.527 10.613-2.527h11.567c4.942 0 9.097-.88 12.466-2.64 3.407-1.759 5.765-4.66 7.075-8.703l6.57 2.246c-2.059 7.263-5.334 12.429-9.826 15.498-4.455 3.107-9.883 4.661-16.285 4.661H79.998c-4.23 0-7.506.954-9.827 2.864-2.283 1.909-3.425 4.866-3.425 8.872h-8.254c0-4.006-1.18-6.963-3.538-8.872-2.32-1.91-5.578-2.864-9.77-2.864H33.67c-6.363 0-11.792-1.554-16.284-4.66-4.492-3.07-7.768-8.236-9.826-15.499z"/>

package/data1/JupyterMystLetterIconJupyterLab.d.ts

@@ -1,3 +1,3 @@
-import { LabIcon } from "@jupyterlab/ui-components/lib/icon/labicon";
+import { LabIcon } from "@jupyterlab/ui-components";
 declare const jupyterMystLetterIconJupyterLab: LabIcon;
 export default jupyterMystLetterIconJupyterLab;

package/data1/JupyterMystLetterIconJupyterLab.js

@@ -1,4 +1,8 @@
-import { LabIcon } from '@jupyterlab/ui-components/lib/icon/labicon';
+// The root import, not lib/icon/labicon: inside JupyterLab the root is a
+// federation singleton, so this LabIcon is the class the host recognises
+// with instanceof — a deep import bundles a private copy the host would
+// not style (the icon then renders unstyled, at its intrinsic size).
+import { LabIcon } from '@jupyterlab/ui-components';
 import JupyterMystLetterIconSvgStr from './JupyterMystLetterIcon.svg';
 const jupyterMystLetterIconJupyterLab = new LabIcon({
     name: '@datalayer/icons:jupyter-myst-letter',