@datalayer/icons-react 1.0.9 → 1.0.11

package/data2/GlobeIcon.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);
 }
 
@@ -43,31 +56,35 @@ function GlobeIcon({
   title,
   titleId,
   size,
+  colored,
+  themed,
   colormode,
   ...props
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 72 72",
-    fill: "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,
-    width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "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("circle", {
     cx: 36,
     cy: 36,
     r: 28,
-    fill: "#92D3F5"
+    fill: colored ? "#92D3F5" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
   }), /*#__PURE__*/React.createElement("g", {
     fill: "none",
-    stroke: "#000",
+    stroke: colored ? "#000" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeMiterlimit: 10,

package/data2/GlobeIcon.svg

@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" fill="currentColor" aria-hidden="true">
-  <circle cx="36" cy="36" r="28" fill="#92D3F5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" fill="currentColor" aria-hidden="true">
+  <circle cx="36" cy="36" r="28" fill="#92D3F5"/>
   <g fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2">
     <circle cx="36" cy="36" r="28"/>
     <path d="M36 8v56c-8.56 0-15.5-12.536-15.5-28S27.44 8 36 8c8.56 0 15.5 12.536 15.5 28S44.56 64 36 64M64 36H8M60 22H12M60 50H12"/>

package/data2/GlobeIconJupyterLab.d.ts

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

package/data2/GlobeIconJupyterLab.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 GlobeIconSvgStr from './GlobeIcon.svg';
 const globeIconJupyterLab = new LabIcon({
     name: '@datalayer/icons:globe',

package/data2/GremlinIcon.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);
 }
 
@@ -43,96 +56,118 @@ function GremlinIcon({
   title,
   titleId,
   size,
+  colored,
+  themed,
   colormode,
   ...props
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
-    id: "prefix__Icons",
     viewBox: "0 0 80 80",
-    fill: "currentColor",
-    "aria-hidden": "true",
+    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("defs", null, /*#__PURE__*/React.createElement("style", null, ".prefix__cls-1{fill:#007315}.prefix__cls-2{fill:#f8ed30}.prefix__cls-4{fill:#67c166}.prefix__cls-5{fill:#fff}")), /*#__PURE__*/React.createElement("path", {
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
     d: "M28.47 14.8A30.26 30.26 0 0128 8.23s5.52 1.49 7.11 3.87v2.69l.16 3-1.73-1.09-3.19-1.29z",
-    className: "prefix__cls-1"
+    className: "prefix__cls-1",
+    fill: colored ? "#007315" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
   }), /*#__PURE__*/React.createElement("path", {
     d: "M30 15.25a20.49 20.49 0 01-.59-5s4.71 1.36 5.66 3.46l.29 3.92-.18.09-2.56-1.43z",
-    className: "prefix__cls-2"
+    className: "prefix__cls-2",
+    fill: colored ? "#f8ed30" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
   }), /*#__PURE__*/React.createElement("path", {
     d: "M55.56 12.76a8.5 8.5 0 015.73-3.15s.61 4.26-.54 6.32l-3.24.91L55.07 18l-.41.31.09-2.82z",
-    className: "prefix__cls-1"
+    className: "prefix__cls-1",
+    fill: colored ? "#007315" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
   }), /*#__PURE__*/React.createElement("path", {
     d: "M54.67 15.63a7.11 7.11 0 015.17-4s.23 3.83-.61 4.64l-3.17 1.25-1.4.78z",
-    className: "prefix__cls-2"
+    className: "prefix__cls-2",
+    fill: colored ? "#f8ed30" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "#a8e54d",
+    fill: colored ? "#a8e54d" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 78%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M52.74 78.47a5 5 0 01-1.94-.35c-1.75-.74-1.59-1.86-1.14-3.94.39-1.78.83-3.79-.65-5.63-1.28-1.58-4.77-2.49-9.58-2.49a25.44 25.44 0 00-4.88.4c-2 .45-2.36.75-2.65 1.71a3.79 3.79 0 01-.38.91c-1.1 1.92-2.76 3.63-7.52 3.83h-.14c-2.25 0-4.59-2.2-5.74-3.44a6.06 6.06 0 01-5.7 4 9.1 9.1 0 01-2.49-.38 3.26 3.26 0 01-2.24-2.34 7.42 7.42 0 011.17-6.15c4-4.68 7.72-5.37 9.59-5.37a5.81 5.81 0 013 .72c1.91 1.15.93 3.29.34 4.57a7.24 7.24 0 00-.37.9h.14a2.94 2.94 0 00.9-.2c1.27-1.3 3.76-4.47 3.48-6.13-.2-1.2 1.12-2.52 3.94-3.92 2.66-1.33 3.31-6.86 3.38-7.49v-.66l-6.74-.26-.82.47.78.58c.12.09 2.95 2.23 1.91 5.08a6 6 0 01-5.87 3.82 8 8 0 01-1.94-.24A6.31 6.31 0 0116.35 53c-.92-2.05-.67-4.54.72-7.2 1.3-2.49 3.75-3.75 7.27-3.75a17.17 17.17 0 014.71.7l3.14 1-.19-.41.3-.21a19.49 19.49 0 01-6.3-5.78 10.65 10.65 0 01-2.2-6.53l-1 .47a3.43 3.43 0 01-1.87.53c-4.47 0-9.84-7.1-11.37-9.28a17.14 17.14 0 01-3.15-8.74v-.63h3.63c17.24 0 24 4.27 24.81 4.82l1.27.5-.13-.8a25 25 0 01.25-11.79l.39-1.32 5 8.2.12-1.93c.2-3.1 5.28-7.07 7.45-8.63l1.19-.86-.24 1.45a84.21 84.21 0 00-.79 9.76v1.44l1.06-1a6.4 6.4 0 014.21-1.2h1.07l-.41.86A16.17 16.17 0 0054 18.3v1.16l1-.63c5.26-3.4 15.23-3.77 19.27-3.77h2.26l-.31.81C69.24 34 59.88 34.38 59.78 34.38h-1l.43.87c.24.47.83 2.25-1.62 5-2 2.3-8.4 5-8.46 5.07l-1.63.51 1 1.25c.46.29 2.66 1.67 5.06 3.51a11.22 11.22 0 01.79-4.2 4.36 4.36 0 013.85-2.1 6.25 6.25 0 014.59 2.2A6.55 6.55 0 0163.7 53a5.49 5.49 0 01-4.42 3.71 8.83 8.83 0 01-1 .06c-4 0-8.87-2.26-8.92-2.29l-1.28-.6.45 1.34c.72 2.17-.26 3.29-.46 3.49l-1 .78 1.23.24c4.75 1.06 6.07 5.69 6.21 6.26l.26.66a7.65 7.65 0 014.23-1.5h.39a10.92 10.92 0 014.21 1 2.91 2.91 0 011.53 2.11c.25 1.51-.51 3.42-2 5.12-2.23 2.47-6.92 5.09-10.39 5.09z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M32.35 66.71s15.76-3.7 14.19-21c0 .04 9.46 18.1-14.19 21z",
-    className: "prefix__cls-4"
+    className: "prefix__cls-4",
+    fill: colored ? "#67c166" : (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))))"))
   }), /*#__PURE__*/React.createElement("path", {
     d: "M77.36 14.53s-15.42-.91-22.7 3.79c0 0 .17-5.38 2.3-6.9 0 0-4.77-.91-7 1.17 0 0 .2-9.16 1.47-12.59 0 0-10 6-10.3 10.81l-4.48-7.36c0-.3-3.17 4.9-1.4 14.19 0 0-7.59-5.91-29.47-5.05A17.14 17.14 0 009 22.89c3.65 5.18 9.85 11.62 14.11 8.88 1 6.22 2.56 7.62 7.57 10.84l-1.47-.49s-9.36-3-12.71 3.35.22 10.66 3.88 11.57 7.31-.61 8.53-4-2.13-5.79-2.13-5.79l5.79.3s-.61 5.79-3 7-4.57 2.81-4.29 4.64S23 63.58 23 63.58s1.44-5.46-5.56-4.75c-4.59.46-6.69 2.11-9.46 5.88-1.37 1.87-2.54 7.84 1.89 9.22 2.73.85 7.37-.37 8.28-3.42 0 0 3 3.66 6.94 3s5.64-2 6.91-4.16c.89-1.54-.1-1.73 2.64-2.34s11.67-.82 13.86 1.88c2.79 3.45-2.26 7.93 2 9.75 3.74 1.58 10.25-1.83 13-4.87s3.09-6.65.35-8.17-7.31-1.47-8.78.36c0 0-1.19-5.57-6.67-6.78a5.37 5.37 0 001.09-3.91s5.51 2.55 9.79 2.06c5.28-.61 7-7.86 3.93-11.21s-7.58-3.05-9.41 0c-1.34 2.23-1.1 3-1 3.43a9.35 9.35 0 00-4.8-3.22l1.39-.39s6.55-2.79 8.68-5.23 2.32-4.5 1.71-5.72c0 .01 10.27.01 17.58-20.46zm-18 19.66A1.61 1.61 0 0158 33.3l-.81.61 1.52 1.62c.4.81.21 2.38-1.53 4.38-1.6 1.83-6.49 4.16-8.24 4.91l-2.47.77.5 1.39a3.41 3.41 0 011.33.45 65.08 65.08 0 015.89 4.45s0-3.88.74-5.11a3.76 3.76 0 013.3-1.77 5.65 5.65 0 014.14 2 5.93 5.93 0 01.76 5.86 4.9 4.9 0 01-3.92 3.32 8.25 8.25 0 01-.94.05c-3.82 0-10.16-3-9.81-2.81l-.12 1.8a10.9 10.9 0 01-2 5.1l1.88.12c4.66 1 5.74 5.8 5.75 5.85l.58 1.46s2.34-2.15 4.83-1.94a10.34 10.34 0 014 .93 2.29 2.29 0 011.22 1.68c.22 1.33-.48 3-1.89 4.61-2.12 2.35-6.6 4.87-9.91 4.87a4.39 4.39 0 01-1.7-.3c-1.24-.52-1.25-1.08-.78-3.25.4-1.82.89-4.08-.78-6.14-1.91-2.36-7.12-2.72-10.06-2.72a26 26 0 00-5 .42c-2 .45-2.7.8-3.1 2.13a3.18 3.18 0 01-.33.78c-1 1.64-2.41 3.33-7 3.52-2.84.12-6.09-4-6.09-4s-1.28 6.1-7.79 4.23c-2.94-.84-2.25-5.84-.78-7.52 5.57-6.36 9.82-5.71 11.77-4.53 2.17 1.32-.67 4.44-.3 5.21s2 .07 2 .07c.5-.5 4.13-4.42 3.74-6.75-.08-.51.27-1.61 3.61-3.28 2.89-1.44 3.6-6.89 3.71-8l.08-1.31a57.8 57.8 0 00-7.54-.29c-1.93.24-1.78 1-1.78 1l1.52 1.14c.1.08 2.59 2 1.7 4.39a5.39 5.39 0 01-5.4 3.4 7.4 7.4 0 01-1.79-.22 5.69 5.69 0 01-3.8-3.16c-.84-1.88-.6-4.18.71-6.67 1.19-2.27 3.45-3.42 6.73-3.42a16.59 16.59 0 014.52.67l4.41 1.39-.48-1.13.37-.53A23 23 0 0126 37a8.91 8.91 0 01-1.46-7.16 24.21 24.21 0 01-3.66 1.41c-3.32 0-7.8-4.66-10.87-9a16.54 16.54 0 01-3-8.42h3c17.9 0 26.6 6 26.6 6l-.05-2.15a24.59 24.59 0 01.29-11.46l4.83 7.67s.41-5.58 7.89-11a85 85 0 00-.8 9.85l-.06 2.88 2.11-2a5.85 5.85 0 013.79-1h.11a16.66 16.66 0 00-1.25 5.84l-.07 2.32 2-1.26c5.12-3.31 15-3.67 18.94-3.67h1.37C68.82 33.41 60.42 34.18 59.4 34.18z",
-    className: "prefix__cls-1"
+    className: "prefix__cls-1",
+    fill: colored ? "#007315" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
   }), /*#__PURE__*/React.createElement("path", {
     d: "M25.59 26.22s2.25-8.38-16.18-11.8c0 0 6.51 2.21 10.43 5.79a49.28 49.28 0 015.75 6.01z",
-    className: "prefix__cls-4"
+    className: "prefix__cls-4",
+    fill: colored ? "#67c166" : (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))))"))
   }), /*#__PURE__*/React.createElement("path", {
     d: "M31.56 30.9s-.56-6.24 4-8.07c9.21-3.69 11 8.13 11.23 10.47.01.15-7.38 2.32-15.23-2.4z",
-    className: "prefix__cls-1"
+    className: "prefix__cls-1",
+    fill: colored ? "#007315" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
   }), /*#__PURE__*/React.createElement("path", {
     d: "M42.31 32.89a20.85 20.85 0 01-9.8-2.66c0-1.44.35-7 6.31-7.3 4.71-.23 6.64 7.08 7 9.61a20.59 20.59 0 01-3.51.35z",
-    className: "prefix__cls-5"
+    className: "prefix__cls-5",
+    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))))"))
   }), /*#__PURE__*/React.createElement("ellipse", {
     cx: 38.61,
     cy: 28.12,
     className: "prefix__cls-1",
     rx: 2.74,
-    ry: 3.2
+    ry: 3.2,
+    fill: colored ? "#007315" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
   }), /*#__PURE__*/React.createElement("path", {
     d: "M56.49 33.34a25.65 25.65 0 01-3.29-.27l-.36-.07-.12-.35c-1.2-3.51-.74-5.46-.14-6.47a3.4 3.4 0 01.41-.56l.28-.31 1.13.43c4.33 1.6 3.75 5.82 3.47 7.07l-.1.43h-.44a8.19 8.19 0 01-.84.1z",
-    className: "prefix__cls-5"
+    className: "prefix__cls-5",
+    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))))"))
   }), /*#__PURE__*/React.createElement("path", {
     d: "M54.6 25.19s.61-1-.15-1-5 1.6-2.06 9.4c0 0 4.49.76 5.86.15.01-.03 2.21-6.38-3.65-8.55zM57.78 33a12.37 12.37 0 01-4.71-.29c-1.25-3.56-.8-5.47-.19-6.46a6.77 6.77 0 01.84-.83l1.08.58a5.72 5.72 0 012.98 7z",
-    className: "prefix__cls-1"
+    className: "prefix__cls-1",
+    fill: colored ? "#007315" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
   }), /*#__PURE__*/React.createElement("ellipse", {
     cx: 39.29,
     cy: 27.04,
     className: "prefix__cls-5",
     rx: 1.31,
-    ry: 1.5
+    ry: 1.5,
+    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))))"))
   }), /*#__PURE__*/React.createElement("ellipse", {
     cx: 54.11,
     cy: 29.44,
     className: "prefix__cls-1",
     rx: 2,
-    ry: 2.53
+    ry: 2.53,
+    fill: colored ? "#007315" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
   }), /*#__PURE__*/React.createElement("ellipse", {
     cx: 54.59,
     cy: 28.36,
     className: "prefix__cls-5",
     rx: 0.8,
-    ry: 1.07
+    ry: 1.07,
+    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))))"))
   }), /*#__PURE__*/React.createElement("path", {
     d: "M58.89 27.61s-2-8.15 14.72-11.12c0 .01-9.04 3.41-14.72 11.12z",
-    className: "prefix__cls-4"
+    className: "prefix__cls-4",
+    fill: colored ? "#67c166" : (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))))"))
   }), /*#__PURE__*/React.createElement("path", {
     d: "M35.46 38.74l3.99 1.45-2.03 2.26-1.96-3.71z",
-    className: "prefix__cls-5"
+    className: "prefix__cls-5",
+    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))))"))
   }), /*#__PURE__*/React.createElement("path", {
     d: "M32.82 35.11s-1.43 1.81-1 2.19a24.14 24.14 0 0013 3.9c8-.11 9.9-1.41 12.54-3 0 0-.19-.76-.52-.62s-4.86 3.3-13 2.77c-7.59-.5-11.13-3.48-11.13-3.48s1.35-1.96.11-1.76z",
-    className: "prefix__cls-1"
+    className: "prefix__cls-1",
+    fill: colored ? "#007315" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
   }), /*#__PURE__*/React.createElement("path", {
     d: "M34.75 38.64l2.5 4.39 3.03-2.51-1.14-.38-1.71 1.52-1.39-2.6-1.29-.42zm-2.98-8.7s-1.8-.29-1.8.29 2.14.93 2.14.93z",
-    className: "prefix__cls-1"
+    className: "prefix__cls-1",
+    fill: colored ? "#007315" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
   }));
   if (!colormode) return _svgEl;
   return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {

package/data2/GremlinIcon.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="Icons" viewBox="0 0 80 80" fill="currentColor" aria-hidden="true">
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" id="Icons" viewBox="0 0 80 80" fill="currentColor" aria-hidden="true">
   <defs>
     <style>
       .cls-1{fill:#007315}.cls-2{fill:#f8ed30}.cls-4{fill:#67c166}.cls-5{fill:#fff}

package/data2/GremlinIconJupyterLab.d.ts

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

package/data2/GremlinIconJupyterLab.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 GremlinIconSvgStr from './GremlinIcon.svg';
 const gremlinIconJupyterLab = new LabIcon({
     name: '@datalayer/icons:gremlin',

package/data2/GrinningFaceIcon.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);
 }
 
@@ -43,53 +56,57 @@ function GrinningFaceIcon({
   title,
   titleId,
   size,
+  colored,
+  themed,
   colormode,
   ...props
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 72 72",
-    fill: "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,
-    width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "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("circle", {
     cx: 36,
     cy: 36,
     r: 23,
-    fill: "#FCEA2B"
+    fill: colored ? "#FCEA2B" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "#FFF",
+    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: "M50.595 41.64a11.557 11.557 0 01-.87 4.49c-12.49 3.03-25.43.34-27.49-.13a11.435 11.435 0 01-.83-4.36h.11s14.8 3.59 28.89.07l.19-.07z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: "#EA5A47",
+    fill: colored ? "#EA5A47" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 58%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 76%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 58%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 76%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 58%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M49.725 46.13c-1.79 4.27-6.35 7.23-13.69 7.23-7.41 0-12.03-3.03-13.8-7.36 2.06.47 15 3.16 27.49.13z"
   }), /*#__PURE__*/React.createElement("circle", {
     cx: 36,
     cy: 36,
     r: 23,
     fill: "none",
-    stroke: "#000",
+    stroke: colored ? "#000" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2
   }), /*#__PURE__*/React.createElement("path", {
     fill: "none",
-    stroke: "#000",
+    stroke: colored ? "#000" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
     d: "M50.595 41.64a11.557 11.557 0 01-.87 4.49c-12.49 3.03-25.43.34-27.49-.13a11.435 11.435 0 01-.83-4.36h.11s14.8 3.59 28.89.07l.19-.07z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "none",
-    stroke: "#000",
+    stroke: colored ? "#000" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,

package/data2/GrinningFaceIcon.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" fill="currentColor" aria-hidden="true">
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" fill="currentColor" aria-hidden="true">
   <circle cx="36" cy="36" r="23" fill="#FCEA2B"/>
   <path fill="#FFF" d="M50.595 41.64a11.557 11.557 0 01-.87 4.49c-12.49 3.03-25.43.34-27.49-.13a11.435 11.435 0 01-.83-4.36h.11s14.8 3.59 28.89.07l.19-.07z"/>
   <path fill="#EA5A47" d="M49.725 46.13c-1.79 4.27-6.35 7.23-13.69 7.23-7.41 0-12.03-3.03-13.8-7.36 2.06.47 15 3.16 27.49.13z"/>

package/data2/GrinningFaceIconJupyterLab.d.ts

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

package/data2/GrinningFaceIconJupyterLab.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 GrinningFaceIconSvgStr from './GrinningFaceIcon.svg';
 const grinningFaceIconJupyterLab = new LabIcon({
     name: '@datalayer/icons:grinning-face',