@datalayer/icons-react 1.0.9 → 1.0.11

package/data1/esm/RapidsAiIcon.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);
 }
 
@@ -51,20 +64,23 @@ function RapidsAiIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1920 704",
-    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
+    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",
     "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", {
     d: "M389.7 337.5c15.5 0 27.1-3.4 34.9-10.3 7.8-6.8 11.6-16.9 11.6-30 0-13.2-3.9-23.3-11.6-30.4-7.8-7.1-19.4-10.7-34.9-10.7h-53.9v81.4h53.9zM284 481.2c-1.8-1.8-2.7-4-2.7-6.6V222.4c0-2.8.8-5.2 2.5-7 1.7-1.8 3.9-2.7 6.8-2.7H391c31.8 0 56.6 7.4 74.6 22.1 18 14.7 26.9 35.7 26.9 62.8 0 18.9-4.5 34.7-13.6 47.5-9 12.8-21.7 22-38 27.7l56.2 98.8c.8 1.5 1.2 3 1.2 4.3 0 2.3-.8 4.3-2.5 5.8s-3.6 2.3-5.6 2.3h-35.7c-4.1 0-7.4-1-9.7-2.9-2.3-1.9-4.4-4.5-6.2-7.6L389 381.7h-53.1v93c0 2.6-.9 4.8-2.7 6.6-1.8 1.8-4.1 2.7-7 2.7h-35.7c-2.5 0-4.7-.9-6.5-2.8m327.5-96.4h87.6l-43.8-119.4-43.8 119.4zm-82.9 96.8c-1.6-1.6-2.3-3.5-2.3-5.8l.8-3.5 93-249.9c2.6-6.5 7.2-9.7 13.9-9.7h42.6c6.7 0 11.4 3.2 14 9.7l93 249.9.8 3.5c0 2.3-.8 4.3-2.5 5.8s-3.6 2.3-5.6 2.3h-34.5c-5.4 0-9.2-2.5-11.2-7.4l-17.8-46.9H597.9l-17.8 46.9c-2.1 4.9-5.8 7.4-11.2 7.4h-34.5c-2.4.1-4.3-.7-5.8-2.3m394-141c15 0 26.4-3.5 34.3-10.7 7.9-7.1 11.8-17.5 11.8-31.2 0-13.4-3.8-23.9-11.4-31.4-7.6-7.5-19.2-11.2-34.7-11.2h-55.8v84.5h55.8zM814.1 481.2c-1.8-1.8-2.7-4-2.7-6.6V222.4c0-2.8.8-5.2 2.5-7 1.7-1.8 3.9-2.7 6.8-2.7h103.9c31.3 0 55.8 7.4 73.6 22.1 17.8 14.7 26.7 36.2 26.7 64.3 0 27.9-8.9 49-26.7 63.4-17.8 14.3-42.4 21.5-73.6 21.5h-57v90.7c0 2.8-.9 5.1-2.7 6.8-1.8 1.7-4.1 2.5-7 2.5h-37.2c-2.6 0-4.8-.9-6.6-2.8m655-3.8c-16.5-7-29.1-16.1-37.6-27.5-8.5-11.4-13-23.8-13.6-37.2 0-2.1.8-3.9 2.3-5.6 1.5-1.7 3.5-2.5 5.8-2.5h35.3c2.8 0 5.2.7 7 1.9 1.8 1.3 3.5 3.1 5 5.4 2.6 8.8 8.5 16.1 17.6 22.1 9.2 5.9 21.8 8.9 37.8 8.9 18.1 0 31.7-3 40.9-9.1s13.8-14.4 13.8-25c0-7-2.3-12.8-7-17.4-4.7-4.6-11.7-8.7-21.1-12.2-9.4-3.5-23.4-7.7-42-12.6-30.5-7.2-52.8-16.8-67-28.7-14.2-11.9-21.3-28.9-21.3-51.2 0-15 4.1-28.4 12.4-40.1 8.3-11.8 20.1-21 35.5-27.7 15.4-6.7 33.3-10.1 53.7-10.1 21.4 0 40 3.7 55.6 11.2 15.6 7.5 27.5 16.9 35.7 28.1 8.1 11.2 12.5 22.4 13 33.5 0 2.1-.8 3.9-2.3 5.6-1.6 1.7-3.5 2.5-5.8 2.5H1586c-5.7 0-9.6-2.3-11.6-7-1.3-8.3-6.3-15.2-15.1-20.7s-19.6-8.3-32.6-8.3c-14.2 0-25.4 2.7-33.5 8.1-8.1 5.4-12.2 13.3-12.2 23.6 0 7 2.1 12.8 6.2 17.4 4.1 4.6 10.6 8.7 19.4 12.2 8.8 3.5 21.6 7.4 38.4 11.8 23 5.2 41.3 11 54.8 17.4 13.6 6.5 23.6 14.6 30 24.4 6.5 9.8 9.7 22.3 9.7 37.6 0 16.8-4.6 31.3-13.8 43.6-9.2 12.3-22.1 21.6-38.7 28.1-16.7 6.5-36 9.7-57.9 9.7-23.6.2-43.4-3.3-60-10.2m-402-2.7c0 .4.1.8.1 28.8l55.7-55.7V256.3l-55.7-55.7c0 20.7-.1 21-.1 21.4v252.7zm319.5-156.6c-1.6-70.3-40.4-105.4-116.6-105.4h-94.6c-2.8 0-5.1.9-6.8 2.7-1.7 1.8-2.5 4.1-2.5 7v75.8l54.6 53.9v-94.4h47.3c21.7 0 37.6 5 47.7 14.9 10.1 9.9 15.4 25.5 15.9 46.7.5 15 .8 24.5.8 28.7 0 3.9-.3 13.6-.8 29.1-.5 22.2-5.6 38.1-15.1 47.7-9.6 9.6-25.1 14.3-46.5 14.3h-49.2v-87l-54.6 53.9v68.8c0 2.6.9 4.8 2.7 6.6 1.8 1.8 4 2.7 6.6 2.7h96.5c38.5 0 67-8.6 85.4-25.8 18.5-17.2 28.2-43.8 29.3-80 .5-15 .8-24.9.8-29.8-.1-5.3-.4-15.4-.9-30.4",
-    fill: "#7300ff"
+    className: "prefix__st0",
+    fill: colored ? "#7300ff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 54%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
   }));
   if (!colormode) return _svgEl;
   return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {

package/data1/esm/RapidsAiIcon.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" x="0" y="0" version="1.1" viewBox="0 0 1920 704" fill="currentColor" aria-hidden="true">
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" id="Layer_1" x="0" y="0" version="1.1" viewBox="0 0 1920 704" fill="currentColor" aria-hidden="true">
   <style>
     .st0{fill:#7300ff}
   </style>

package/data1/esm/RapidsAiIconJupyterLab.d.ts

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

package/data1/esm/RapidsAiIconJupyterLab.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 RapidsAiIconSvgStr from './RapidsAiIcon.svg';
 const rapidsAiIconJupyterLab = new LabIcon({
     name: '@datalayer/icons:rapids-ai',

package/data1/esm/RayIoIcon.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,20 +63,22 @@ function RayIoIcon({
 }, 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 1600 1600",
     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 ? '#028cf0' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#028cf0" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M589.375 746.735a221.647 221.647 0 0157.209-100.852 216.744 216.744 0 01153.785-63.66c60.084 0 114.417 24.329 153.785 63.66a221.573 221.573 0 0157.209 100.852h160.198a211.805 211.805 0 0124.329-58.683L911.948 404.11a219.472 219.472 0 01-111.58 30.78 216.744 216.744 0 01-153.784-63.66 216.744 216.744 0 01-63.66-153.785c0-60.084 24.329-114.454 63.66-153.785A216.744 216.744 0 01800.369 0c60.084 0 114.417 24.329 153.785 63.66a216.744 216.744 0 0163.66 153.785 217.481 217.481 0 01-30.78 111.579l283.942 283.942a219.472 219.472 0 01111.616-30.743c60.084 0 114.417 24.329 153.748 63.66A216.744 216.744 0 011600 799.63a216.744 216.744 0 01-63.66 153.785 216.744 216.744 0 01-153.785 63.66 217.481 217.481 0 01-111.542-30.743l-283.979 284.68c19.315 32.88 30.78 70.773 30.78 111.542a216.744 216.744 0 01-63.66 153.785A216.744 216.744 0 01800.369 1600a216.744 216.744 0 01-153.785-63.66 216.744 216.744 0 01-63.66-153.785c0-60.084 24.329-114.418 63.66-153.749a216.744 216.744 0 01153.785-63.659 217.481 217.481 0 01111.579 30.742l283.942-283.942a211.805 211.805 0 01-24.328-58.646h-160.2a221.573 221.573 0 01-57.208 100.852 216.744 216.744 0 01-153.785 63.66 216.744 216.744 0 01-153.785-63.66 221.647 221.647 0 01-57.209-100.852H429.14a221.647 221.647 0 01-57.208 100.852 216.744 216.744 0 01-153.785 63.66 216.744 216.744 0 01-153.785-63.66A214.422 214.422 0 010 800.368c0-60.084 24.328-114.454 63.66-153.785a216.744 216.744 0 01153.784-63.66c60.084 0 114.418 24.33 153.785 63.66a221.683 221.683 0 0157.209 100.853h160.936v-.738zm132.332 714.518c20.016 20.016 47.92 32.88 78.662 32.88 30.742 0 58.61-12.164 78.662-32.88 20.015-20.015 32.917-47.92 32.917-78.698 0-30.743-12.164-58.61-32.917-78.662a111.395 111.395 0 00-78.662-32.88c-30.78 0-58.646 12.164-78.699 32.88a111.395 111.395 0 00-32.88 78.699c0 30.742 12.164 58.609 32.88 78.661zm739.547-582.223c20.016-20.015 32.88-47.92 32.88-78.662 0-30.779-12.164-58.646-32.88-78.698a111.395 111.395 0 00-78.699-32.88c-30.742 0-58.61 12.164-78.662 32.88a111.395 111.395 0 00-32.88 78.698c0 30.743 12.164 58.61 32.88 78.662 20.016 20.016 47.92 32.917 78.7 32.917a114.491 114.491 0 0078.661-32.917zM879.031 138.746a111.395 111.395 0 00-78.662-32.88c-30.78 0-58.646 12.164-78.699 32.88a111.395 111.395 0 00-32.88 78.699c0 30.742 12.164 58.61 32.88 78.662 20.053 20.015 47.92 32.917 78.699 32.917 30.742 0 58.61-12.165 78.662-32.917 20.015-20.016 32.917-47.92 32.917-78.662a114.491 114.491 0 00-32.917-78.699zM138.747 721.67a111.395 111.395 0 00-32.88 78.698c0 30.743 12.164 58.61 32.88 78.662 20.052 20.016 47.92 32.917 78.698 32.917 30.743 0 58.61-12.164 78.662-32.917 20.016-20.753 32.917-47.92 32.917-78.662 0-30.779-12.164-58.646-32.917-78.698-20.753-20.016-47.92-32.88-78.662-32.88-30.779 0-58.646 12.164-78.698 32.88zm582.923 0a111.395 111.395 0 00-32.88 78.698c0 30.743 12.164 58.61 32.88 78.662 20.053 20.016 47.92 32.917 78.699 32.917 30.742 0 58.61-12.164 78.662-32.917 20.015-20.015 32.917-47.92 32.917-78.662 0-30.779-12.164-58.646-32.917-78.698a111.395 111.395 0 00-78.662-32.88c-30.78 0-58.646 12.164-78.699 32.88z"
   }));
   if (!colormode) return _svgEl;

package/data1/esm/RayIoIcon.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1600 1600" aria-hidden="true">
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1600 1600" aria-hidden="true">
   <path fill="#028cf0" stroke-width="36.861" d="M589.375 746.735a221.647 221.647 0 0157.209-100.852 216.744 216.744 0 01153.785-63.66c60.084 0 114.417 24.329 153.785 63.66a221.573 221.573 0 0157.209 100.852h160.198a211.805 211.805 0 0124.329-58.683L911.948 404.11a219.472 219.472 0 01-111.58 30.78 216.744 216.744 0 01-153.784-63.66 216.744 216.744 0 01-63.66-153.785c0-60.084 24.329-114.454 63.66-153.785A216.744 216.744 0 01800.369 0c60.084 0 114.417 24.329 153.785 63.66a216.744 216.744 0 0163.66 153.785 217.481 217.481 0 01-30.78 111.579l283.942 283.942a219.472 219.472 0 01111.616-30.743c60.084 0 114.417 24.329 153.748 63.66A216.744 216.744 0 011600 799.63a216.744 216.744 0 01-63.66 153.785 216.744 216.744 0 01-153.785 63.66 217.481 217.481 0 01-111.542-30.743l-283.979 284.68c19.315 32.88 30.78 70.773 30.78 111.542a216.744 216.744 0 01-63.66 153.785A216.744 216.744 0 01800.369 1600a216.744 216.744 0 01-153.785-63.66 216.744 216.744 0 01-63.66-153.785c0-60.084 24.329-114.418 63.66-153.749a216.744 216.744 0 01153.785-63.659 217.481 217.481 0 01111.579 30.742l283.942-283.942a211.805 211.805 0 01-24.328-58.646h-160.2a221.573 221.573 0 01-57.208 100.852 216.744 216.744 0 01-153.785 63.66 216.744 216.744 0 01-153.785-63.66 221.647 221.647 0 01-57.209-100.852H429.14a221.647 221.647 0 01-57.208 100.852 216.744 216.744 0 01-153.785 63.66 216.744 216.744 0 01-153.785-63.66A214.422 214.422 0 010 800.368c0-60.084 24.328-114.454 63.66-153.785a216.744 216.744 0 01153.784-63.66c60.084 0 114.418 24.33 153.785 63.66a221.683 221.683 0 0157.209 100.853h160.936v-.738zm132.332 714.518c20.016 20.016 47.92 32.88 78.662 32.88 30.742 0 58.61-12.164 78.662-32.88 20.015-20.015 32.917-47.92 32.917-78.698 0-30.743-12.164-58.61-32.917-78.662a111.395 111.395 0 00-78.662-32.88c-30.78 0-58.646 12.164-78.699 32.88a111.395 111.395 0 00-32.88 78.699c0 30.742 12.164 58.609 32.88 78.661zm739.547-582.223c20.016-20.015 32.88-47.92 32.88-78.662 0-30.779-12.164-58.646-32.88-78.698a111.395 111.395 0 00-78.699-32.88c-30.742 0-58.61 12.164-78.662 32.88a111.395 111.395 0 00-32.88 78.698c0 30.743 12.164 58.61 32.88 78.662 20.016 20.016 47.92 32.917 78.7 32.917a114.491 114.491 0 0078.661-32.917zM879.031 138.746a111.395 111.395 0 00-78.662-32.88c-30.78 0-58.646 12.164-78.699 32.88a111.395 111.395 0 00-32.88 78.699c0 30.742 12.164 58.61 32.88 78.662 20.053 20.015 47.92 32.917 78.699 32.917 30.742 0 58.61-12.165 78.662-32.917 20.015-20.016 32.917-47.92 32.917-78.662a114.491 114.491 0 00-32.917-78.699zM138.747 721.67a111.395 111.395 0 00-32.88 78.698c0 30.743 12.164 58.61 32.88 78.662 20.052 20.016 47.92 32.917 78.698 32.917 30.743 0 58.61-12.164 78.662-32.917 20.016-20.753 32.917-47.92 32.917-78.662 0-30.779-12.164-58.646-32.917-78.698-20.753-20.016-47.92-32.88-78.662-32.88-30.779 0-58.646 12.164-78.698 32.88zm582.923 0a111.395 111.395 0 00-32.88 78.698c0 30.743 12.164 58.61 32.88 78.662 20.053 20.016 47.92 32.917 78.699 32.917 30.742 0 58.61-12.164 78.662-32.917 20.015-20.015 32.917-47.92 32.917-78.662 0-30.779-12.164-58.646-32.917-78.698a111.395 111.395 0 00-78.662-32.88c-30.78 0-58.646 12.164-78.699 32.88z"/>
 </svg>

package/data1/esm/RayIoIconJupyterLab.d.ts

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

package/data1/esm/RayIoIconJupyterLab.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 RayIoIconSvgStr from './RayIoIcon.svg';
 const rayIoIconJupyterLab = new LabIcon({
     name: '@datalayer/icons:ray-io',

package/data1/esm/RayIoNameIcon.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 RayIoNameIcon({
 }, 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 60 60",
     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 ? '#2a2a2a' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#2a2a2a" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 39%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 95%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 39%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 95%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 39%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M18.262 60h2.043l-3.679-5.343c2.263-.744 3.519-2.481 3.519-5.08 0-3.342-2.263-5.254-6.175-5.254H8V60h1.796v-4.948h4.16c.365 0 .714-.03 1.05-.045zm-8.467-6.686v-7.27h4.16c2.846 0 4.452 1.212 4.452 3.576 0 2.438-1.606 3.694-4.452 3.694zm24.537 2.715l1.752 3.955h1.94L31.02 44.307h-1.855L22.13 59.984h1.897l1.752-3.955zm-.76-1.723h-7.035l3.504-7.955zm11.664.306l5.956-10.304h-1.84l-5.02 8.175-5.08-8.175h-1.854l6.072 10.364v5.313h1.766v-5.371z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#028cf0' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#028cf0" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M24.039 19.703a5.848 5.848 0 011.51-2.66 5.719 5.719 0 014.057-1.68c1.585 0 3.019.641 4.058 1.68a5.846 5.846 0 011.51 2.66H39.4a5.589 5.589 0 01.642-1.548l-7.492-7.492a5.79 5.79 0 01-2.944.812 5.719 5.719 0 01-4.058-1.68 5.719 5.719 0 01-1.68-4.058 5.72 5.72 0 011.68-4.057A5.719 5.719 0 0129.606 0c1.585 0 3.019.642 4.058 1.68a5.719 5.719 0 011.68 4.057 5.738 5.738 0 01-.813 2.945l7.492 7.492a5.79 5.79 0 012.945-.812c1.586 0 3.02.642 4.057 1.68a5.719 5.719 0 011.68 4.057 5.719 5.719 0 01-1.68 4.058 5.719 5.719 0 01-4.058 1.68 5.738 5.738 0 01-2.943-.812l-7.493 7.512c.51.867.812 1.867.812 2.943a5.719 5.719 0 01-1.68 4.058 5.719 5.719 0 01-4.057 1.68 5.719 5.719 0 01-4.058-1.68 5.719 5.719 0 01-1.68-4.058c0-1.586.642-3.02 1.68-4.057a5.719 5.719 0 014.058-1.68 5.738 5.738 0 012.944.812l7.492-7.493a5.589 5.589 0 01-.642-1.547h-4.227a5.846 5.846 0 01-1.51 2.661 5.719 5.719 0 01-4.057 1.68 5.719 5.719 0 01-4.058-1.68 5.848 5.848 0 01-1.51-2.661h-4.227a5.848 5.848 0 01-1.51 2.661 5.719 5.719 0 01-4.058 1.68 5.719 5.719 0 01-4.057-1.68 5.658 5.658 0 01-1.699-4.058 5.72 5.72 0 011.68-4.057 5.719 5.719 0 014.058-1.68c1.585 0 3.019.642 4.058 1.68a5.85 5.85 0 011.51 2.66h4.246v-.019zm3.491 18.853a2.94 2.94 0 002.076.868c.811 0 1.546-.321 2.075-.868a2.94 2.94 0 00.869-2.076c0-.811-.321-1.547-.869-2.076a2.94 2.94 0 00-2.075-.867c-.812 0-1.548.32-2.077.867a2.94 2.94 0 00-.867 2.077c0 .81.32 1.546.867 2.075zm19.514-15.362a2.94 2.94 0 00.867-2.076c0-.812-.32-1.547-.867-2.076a2.94 2.94 0 00-2.077-.868c-.81 0-1.546.321-2.075.868a2.94 2.94 0 00-.868 2.076c0 .812.321 1.547.868 2.076a2.94 2.94 0 002.076.868 3.02 3.02 0 002.076-.868zM31.68 3.66a2.94 2.94 0 00-2.075-.868c-.812 0-1.548.321-2.077.868a2.94 2.94 0 00-.867 2.076c0 .812.32 1.547.867 2.076.53.528 1.265.869 2.077.869a2.86 2.86 0 002.075-.869 2.94 2.94 0 00.869-2.076 3.02 3.02 0 00-.869-2.076zM12.148 19.04a2.94 2.94 0 00-.867 2.077c0 .812.32 1.547.867 2.076.53.528 1.265.868 2.077.868a2.86 2.86 0 002.075-.868c.529-.548.869-1.264.869-2.076s-.321-1.547-.869-2.076c-.547-.528-1.264-.868-2.075-.868-.812 0-1.548.321-2.077.868zm15.381 0a2.94 2.94 0 00-.867 2.077c0 .812.32 1.547.867 2.076.53.528 1.265.868 2.077.868a2.86 2.86 0 002.075-.868 2.94 2.94 0 00.869-2.076 2.86 2.86 0 00-.869-2.076 2.94 2.94 0 00-2.075-.868c-.812 0-1.548.321-2.077.868z"
   }));
   if (!colormode) return _svgEl;

package/data1/esm/RayIoNameIcon.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 60 60" aria-hidden="true">
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 60 60" aria-hidden="true">
   <path fill="#2a2a2a" stroke-width=".752" d="M18.262 60h2.043l-3.679-5.343c2.263-.744 3.519-2.481 3.519-5.08 0-3.342-2.263-5.254-6.175-5.254H8V60h1.796v-4.948h4.16c.365 0 .714-.03 1.05-.045zm-8.467-6.686v-7.27h4.16c2.846 0 4.452 1.212 4.452 3.576 0 2.438-1.606 3.694-4.452 3.694zm24.537 2.715l1.752 3.955h1.94L31.02 44.307h-1.855L22.13 59.984h1.897l1.752-3.955zm-.76-1.723h-7.035l3.504-7.955zm11.664.306l5.956-10.304h-1.84l-5.02 8.175-5.08-8.175h-1.854l6.072 10.364v5.313h1.766v-5.371z"/>
   <path fill="#028cf0" stroke-width=".973" d="M24.039 19.703a5.848 5.848 0 011.51-2.66 5.719 5.719 0 014.057-1.68c1.585 0 3.019.641 4.058 1.68a5.846 5.846 0 011.51 2.66H39.4a5.589 5.589 0 01.642-1.548l-7.492-7.492a5.79 5.79 0 01-2.944.812 5.719 5.719 0 01-4.058-1.68 5.719 5.719 0 01-1.68-4.058 5.72 5.72 0 011.68-4.057A5.719 5.719 0 0129.606 0c1.585 0 3.019.642 4.058 1.68a5.719 5.719 0 011.68 4.057 5.738 5.738 0 01-.813 2.945l7.492 7.492a5.79 5.79 0 012.945-.812c1.586 0 3.02.642 4.057 1.68a5.719 5.719 0 011.68 4.057 5.719 5.719 0 01-1.68 4.058 5.719 5.719 0 01-4.058 1.68 5.738 5.738 0 01-2.943-.812l-7.493 7.512c.51.867.812 1.867.812 2.943a5.719 5.719 0 01-1.68 4.058 5.719 5.719 0 01-4.057 1.68 5.719 5.719 0 01-4.058-1.68 5.719 5.719 0 01-1.68-4.058c0-1.586.642-3.02 1.68-4.057a5.719 5.719 0 014.058-1.68 5.738 5.738 0 012.944.812l7.492-7.493a5.589 5.589 0 01-.642-1.547h-4.227a5.846 5.846 0 01-1.51 2.661 5.719 5.719 0 01-4.057 1.68 5.719 5.719 0 01-4.058-1.68 5.848 5.848 0 01-1.51-2.661h-4.227a5.848 5.848 0 01-1.51 2.661 5.719 5.719 0 01-4.058 1.68 5.719 5.719 0 01-4.057-1.68 5.658 5.658 0 01-1.699-4.058 5.72 5.72 0 011.68-4.057 5.719 5.719 0 014.058-1.68c1.585 0 3.019.642 4.058 1.68a5.85 5.85 0 011.51 2.66h4.246v-.019zm3.491 18.853a2.94 2.94 0 002.076.868c.811 0 1.546-.321 2.075-.868a2.94 2.94 0 00.869-2.076c0-.811-.321-1.547-.869-2.076a2.94 2.94 0 00-2.075-.867c-.812 0-1.548.32-2.077.867a2.94 2.94 0 00-.867 2.077c0 .81.32 1.546.867 2.075zm19.514-15.362a2.94 2.94 0 00.867-2.076c0-.812-.32-1.547-.867-2.076a2.94 2.94 0 00-2.077-.868c-.81 0-1.546.321-2.075.868a2.94 2.94 0 00-.868 2.076c0 .812.321 1.547.868 2.076a2.94 2.94 0 002.076.868 3.02 3.02 0 002.076-.868zM31.68 3.66a2.94 2.94 0 00-2.075-.868c-.812 0-1.548.321-2.077.868a2.94 2.94 0 00-.867 2.076c0 .812.32 1.547.867 2.076.53.528 1.265.869 2.077.869.811 0 1.546-.321 2.075-.869a2.94 2.94 0 00.869-2.076 3.02 3.02 0 00-.869-2.076zM12.148 19.04a2.94 2.94 0 00-.867 2.077c0 .812.32 1.547.867 2.076.53.528 1.265.868 2.077.868.811 0 1.546-.32 2.075-.868.529-.548.869-1.264.869-2.076s-.321-1.547-.869-2.076c-.547-.528-1.264-.868-2.075-.868-.812 0-1.548.321-2.077.868zm15.381 0a2.94 2.94 0 00-.867 2.077c0 .812.32 1.547.867 2.076.53.528 1.265.868 2.077.868.811 0 1.546-.32 2.075-.868a2.94 2.94 0 00.869-2.076c0-.812-.321-1.547-.869-2.076a2.94 2.94 0 00-2.075-.868c-.812 0-1.548.321-2.077.868z"/>
 </svg>

package/data1/esm/RayIoNameIconJupyterLab.d.ts

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

package/data1/esm/RayIoNameIconJupyterLab.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 RayIoNameIconSvgStr from './RayIoNameIcon.svg';
 const rayIoNameIconJupyterLab = new LabIcon({
     name: '@datalayer/icons:ray-io-name',

package/data1/esm/ReactJsIcon.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 ReactJsIcon({
 }, 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 20 20",
     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 ? '#61DAFB' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#61DAFB" : (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: "M9.625 8.5a1.665 1.665 0 110 3.33 1.665 1.665 0 010-3.33z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#61DAFB' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#61DAFB" : (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: "M15.63 7.264a12.877 12.877 0 00-.6-.19c.034-.135.065-.271.094-.409.453-2.204.157-3.98-.858-4.566-.972-.56-2.562.025-4.169 1.423-.158.137-.312.28-.463.425a11.816 11.816 0 00-.309-.285C7.642 2.167 5.954 1.538 4.941 2.124c-.97.562-1.258 2.232-.85 4.322.041.207.087.412.138.617-.238.068-.47.14-.689.217C1.564 7.968.305 9.047.305 10.165c0 1.155 1.353 2.314 3.409 3.016.166.057.334.11.504.158-.055.22-.104.442-.147.665-.39 2.053-.085 3.684.883 4.243 1.001.577 2.68-.016 4.317-1.446.129-.113.259-.233.389-.359.163.159.33.312.503.46 1.584 1.364 3.149 1.914 4.117 1.354 1-.58 1.325-2.33.903-4.461a11.1 11.1 0 00-.112-.499c.118-.034.233-.07.347-.108 2.137-.708 3.527-1.852 3.527-3.023 0-1.123-1.301-2.208-3.315-2.9zm-5.01-3.142c1.376-1.198 2.662-1.67 3.249-1.332.624.36.867 1.811.474 3.715a9.184 9.184 0 01-.083.37 19.074 19.074 0 00-2.492-.394 18.7 18.7 0 00-1.576-1.966c.14-.135.282-.266.428-.393zM5.81 11.12a23.156 23.156 0 001.113 1.923 16.932 16.932 0 01-1.718-.277c.165-.531.368-1.085.605-1.646zm-.001-1.872a17.574 17.574 0 01-.592-1.612 17.861 17.861 0 011.69-.291 23.378 23.378 0 00-1.098 1.903zm.423.936a22.386 22.386 0 011.697-2.94 22.561 22.561 0 013.397 0 25.978 25.978 0 011.702 2.93 23.707 23.707 0 01-.8 1.508c-.283.49-.582.972-.895 1.443a25.77 25.77 0 01-3.394.007 22.337 22.337 0 01-1.707-2.948zm6.685 1.896c.188-.325.368-.655.54-.989.237.536.446 1.084.626 1.642a16.93 16.93 0 01-1.738.297c.197-.313.387-.629.572-.948v-.002zm.532-2.832a26.904 26.904 0 00-1.103-1.902c.595.076 1.165.175 1.7.298a17 17 0 01-.597 1.604zM9.634 5.084c.387.423.753.865 1.096 1.324a23.217 23.217 0 00-2.202 0 17.42 17.42 0 011.106-1.324zM5.34 2.813c.624-.362 2.002.154 3.456 1.444.093.082.186.168.28.257a19.08 19.08 0 00-1.59 1.966c-.836.075-1.667.204-2.486.386-.048-.19-.09-.381-.128-.574-.351-1.79-.119-3.14.467-3.48zm-.91 9.759a10.314 10.314 0 01-.46-.144 6.743 6.743 0 01-2.174-1.155 1.644 1.644 0 01-.695-1.108c0-.679 1.011-1.544 2.699-2.133.212-.074.426-.141.641-.202.251.804.555 1.59.909 2.354a19.393 19.393 0 00-.92 2.388zm4.316 3.63a6.744 6.744 0 01-2.087 1.306 1.645 1.645 0 01-1.307.049c-.588-.34-.833-1.648-.5-3.404.04-.208.086-.414.136-.619.829.178 1.668.3 2.513.364.49.693 1.024 1.354 1.6 1.977-.116.112-.234.22-.355.326zm.909-.9c-.396-.429-.77-.877-1.122-1.343a27.807 27.807 0 002.216-.003 17.04 17.04 0 01-1.094 1.346zm4.836 1.107a1.645 1.645 0 01-.61 1.157c-.588.34-1.844-.102-3.2-1.267a11.543 11.543 0 01-.468-.427 18.69 18.69 0 001.563-1.984 18.52 18.52 0 002.524-.39c.038.154.071.304.1.451a6.72 6.72 0 01.09 2.46zm.676-3.977a7.857 7.857 0 01-.314.098 18.694 18.694 0 00-.943-2.361 18.68 18.68 0 00.907-2.327c.19.055.376.113.554.175 1.724.593 2.777 1.472 2.777 2.148 0 .721-1.136 1.656-2.981 2.267z"
   }));
   if (!colormode) return _svgEl;

package/data1/esm/ReactJsIcon.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" aria-hidden="true">
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" aria-hidden="true">
   <path fill="#61DAFB" d="M9.625 8.5a1.665 1.665 0 110 3.33 1.665 1.665 0 010-3.33z"/>
   <path fill="#61DAFB" d="M15.63 7.264a12.877 12.877 0 00-.6-.19c.034-.135.065-.271.094-.409.453-2.204.157-3.98-.858-4.566-.972-.56-2.562.025-4.169 1.423-.158.137-.312.28-.463.425a11.816 11.816 0 00-.309-.285C7.642 2.167 5.954 1.538 4.941 2.124c-.97.562-1.258 2.232-.85 4.322.041.207.087.412.138.617-.238.068-.47.14-.689.217C1.564 7.968.305 9.047.305 10.165c0 1.155 1.353 2.314 3.409 3.016.166.057.334.11.504.158-.055.22-.104.442-.147.665-.39 2.053-.085 3.684.883 4.243 1.001.577 2.68-.016 4.317-1.446.129-.113.259-.233.389-.359.163.159.33.312.503.46 1.584 1.364 3.149 1.914 4.117 1.354 1-.58 1.325-2.33.903-4.461a11.1 11.1 0 00-.112-.499c.118-.034.233-.07.347-.108 2.137-.708 3.527-1.852 3.527-3.023 0-1.123-1.301-2.208-3.315-2.9zm-5.01-3.142c1.376-1.198 2.662-1.67 3.249-1.332.624.36.867 1.811.474 3.715a9.184 9.184 0 01-.083.37 19.074 19.074 0 00-2.492-.394 18.7 18.7 0 00-1.576-1.966c.14-.135.282-.266.428-.393zM5.81 11.12a23.156 23.156 0 001.113 1.923 16.932 16.932 0 01-1.718-.277c.165-.531.368-1.085.605-1.646zm-.001-1.872a17.574 17.574 0 01-.592-1.612 17.861 17.861 0 011.69-.291 23.378 23.378 0 00-1.098 1.903zm.423.936a22.386 22.386 0 011.697-2.94 22.561 22.561 0 013.397 0 25.978 25.978 0 011.702 2.93 23.707 23.707 0 01-.8 1.508c-.283.49-.582.972-.895 1.443a25.77 25.77 0 01-3.394.007 22.337 22.337 0 01-1.707-2.948zm6.685 1.896c.188-.325.368-.655.54-.989.237.536.446 1.084.626 1.642a16.93 16.93 0 01-1.738.297c.197-.313.387-.629.572-.948v-.002zm.532-2.832a26.904 26.904 0 00-1.103-1.902c.595.076 1.165.175 1.7.298a17 17 0 01-.597 1.604zM9.634 5.084c.387.423.753.865 1.096 1.324a23.217 23.217 0 00-2.202 0 17.42 17.42 0 011.106-1.324zM5.34 2.813c.624-.362 2.002.154 3.456 1.444.093.082.186.168.28.257a19.08 19.08 0 00-1.59 1.966c-.836.075-1.667.204-2.486.386-.048-.19-.09-.381-.128-.574-.351-1.79-.119-3.14.467-3.48zm-.91 9.759a10.314 10.314 0 01-.46-.144 6.743 6.743 0 01-2.174-1.155 1.644 1.644 0 01-.695-1.108c0-.679 1.011-1.544 2.699-2.133.212-.074.426-.141.641-.202.251.804.555 1.59.909 2.354a19.393 19.393 0 00-.92 2.388zm4.316 3.63a6.744 6.744 0 01-2.087 1.306 1.645 1.645 0 01-1.307.049c-.588-.34-.833-1.648-.5-3.404.04-.208.086-.414.136-.619.829.178 1.668.3 2.513.364.49.693 1.024 1.354 1.6 1.977-.116.112-.234.22-.355.326zm.909-.9c-.396-.429-.77-.877-1.122-1.343a27.807 27.807 0 002.216-.003 17.04 17.04 0 01-1.094 1.346zm4.836 1.107a1.645 1.645 0 01-.61 1.157c-.588.34-1.844-.102-3.2-1.267a11.543 11.543 0 01-.468-.427 18.69 18.69 0 001.563-1.984 18.52 18.52 0 002.524-.39c.038.154.071.304.1.451a6.72 6.72 0 01.09 2.46zm.676-3.977a7.857 7.857 0 01-.314.098 18.694 18.694 0 00-.943-2.361 18.68 18.68 0 00.907-2.327c.19.055.376.113.554.175 1.724.593 2.777 1.472 2.777 2.148 0 .721-1.136 1.656-2.981 2.267z"/>
 </svg>

package/data1/esm/ReactJsIconJupyterLab.d.ts

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

package/data1/esm/ReactJsIconJupyterLab.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 ReactJsIconSvgStr from './ReactJsIcon.svg';
 const reactJsIconJupyterLab = new LabIcon({
     name: '@datalayer/icons:react-js',