@datalayer/icons-react 1.0.8 → 1.0.10

package/data1/Jupiter2Icon.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);
 }
 
@@ -45,72 +58,74 @@ function Jupiter2Icon({
   size,
   colored,
   themed,
-  colormoded,
+  colormode,
   ...props
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 480 480",
-    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", {
-    fill: colored ? '#ffd042' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#ffd042" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M412.665 73.326zm10.363 11.448zm-7.387-8.305zm-33.506-29.855zm22.471 18.746zm-18.482-15.742zm41.514 40.753zM391.07 53.522zm8.569 7.29zm-3.463-3.037zm24.173 23.893zm-140.59 395.035zm-14.436 1.968c-.855.09-1.714.167-2.571.248.857-.08 1.716-.158 2.571-.248zm19.822-2.93zm-25.548 3.458zm-5.833.399c-.767.043-1.534.087-2.303.123.769-.036 1.536-.08 2.303-.123zm36.785-4.949zm188.59-254.929c.065.767.135 1.533.192 2.303-.057-.77-.128-1.535-.192-2.303zm.507 7.275c.033.622.059 1.245.088 1.868-.029-.623-.055-1.246-.088-1.868zm.235 5.753c.017.576.035 1.152.049 1.729-.013-.577-.032-1.153-.049-1.729zm-1.31-18.945zM363.255 34.04zM299.498 7.438c.455.116.907.237 1.36.355-.453-.118-.905-.239-1.36-.355zm-6.135-1.475c.421.095.843.188 1.263.286-.42-.097-.842-.19-1.263-.286zm17.416 4.652c.504.156 1.006.315 1.509.474-.503-.159-1.005-.319-1.509-.474zm-22.79-5.812c.399.081.796.167 1.194.25-.399-.083-.796-.169-1.194-.25zm89.552 38.511zm-61.499-31.007c.422.141.847.278 1.268.421-.421-.143-.846-.28-1.268-.421zM264.355 1.223c.25.025.5.055.75.081-.25-.026-.5-.056-.75-.081zM252.258.309c.147.007.293.018.44.025-.147-.007-.293-.018-.44-.025zm24.01 2.417c.334.051.666.106 1 .158-.334-.052-.666-.107-1-.158zm5.414.89c.426.075.853.147 1.278.224-.425-.077-.852-.15-1.278-.224zm23.138 5.25c.42.117.842.231 1.261.351-.419-.12-.841-.234-1.261-.351zm16.997 5.45c.55.199 1.097.403 1.645.606a178.82 178.82 0 00-1.645-.606zm26.346 11.394zm5.168 2.694zm19.53 11.712zm-4.766-3.094zm-9.806-5.88zm-31.266-14.867c.422.164.846.323 1.267.49-.42-.166-.845-.326-1.267-.49zm16.087 6.953zm-10.511-4.703zm5.127 2.22zm74.643 52.277zm24.889 30.268a246.474 246.474 0 013.387 5.004 239.504 239.504 0 00-6.13-8.881 236.26 236.26 0 012.724 3.85l.019.027zM240 325.714c-32.794 0-64.094-2.195-92.75-6.175a238.243 238.243 0 008.68 35.37c-58.301-7.231-106.556-21.722-135.394-40.346l-.135-.089a117.524 117.524 0 01-2.691-1.797l-.366-.25a108.985 108.985 0 01-2.669-1.905l-.249-.187a100.422 100.422 0 01-2.198-1.682l-.58-.459a89.707 89.707 0 01-2.296-1.891 238.91 238.91 0 0034.63 72.091c11.966 5.287 25.682 10.079 40.849 14.272a410.97 410.97 0 0016.386 4.167 454.63 454.63 0 009.488 2.1l-.042-.088a50.095 50.095 0 01-.312-.67 93.535 93.535 0 01-2.614-6.346 82.794 82.794 0 01-.908-2.584 70.02 70.02 0 01-.858-2.761 56.172 56.172 0 01-.673-2.565c-.589-2.478-.983-4.962-.982-7.189 0-.428.015-.847.046-1.254a11.92 11.92 0 01.341-2.091 7.819 7.819 0 01.65-1.692c.127-.242.267-.473.421-.69 1.1-1.553 2.891-2.488 5.655-2.434a48.63 48.63 0 011.7.063c.158.008.317.023.475.033.411.026.822.051 1.235.086.218.019.438.045.656.066.354.034.706.067 1.061.108.254.03.509.066.763.099.323.042.646.081.971.128.265.038.532.084.798.126.315.05.629.097.946.152.275.048.552.102.828.153.31.057.619.113.93.175.283.056.567.119.851.179.305.064.609.127.915.195.291.065.583.136.875.205.302.071.603.141.906.216.297.074.596.153.894.231.298.077.595.153.893.234.301.082.604.168.906.253.3.084.599.167.899.255.299.087.598.179.897.269.306.092.611.183.918.279.299.093.598.19.897.287.309.099.618.198.928.3.3.099.6.202.901.304.312.106.624.211.936.32.297.103.595.21.893.317.32.114.639.227.959.344.293.107.586.217.88.326.327.122.653.243.981.368.289.11.578.222.867.334.336.13.671.26 1.008.393.282.111.565.225.848.338.345.138.69.277 1.036.418.276.112.552.227.828.341.358.148.716.296 1.074.447.263.11.527.223.79.334.374.159.749.318 1.124.48l.752.326a233.532 233.532 0 011.885.829c.408.182.818.364 1.228.549l.67.303a354.271 354.271 0 015.295 2.451l.358.169a616.99 616.99 0 011.885.895c4.173 1.991 8.405 4.067 12.69 6.152-5.662-11.023-10.579-22.491-14.502-34.423C182.21 358.228 210.505 360 240 360c26.929 0 52.859-1.477 77.145-4.208l31.322-4.361c55.284-9.26 99.103-25.38 122.187-45.147a238.91 238.91 0 01-34.614 72.081c-45.489 20.111-116.356 34.271-196.04 33.064-24.076-.365-47.591-11.348-69.693-22.104a240.644 240.644 0 0039.454 55.686l.124.006.071.073c9.848.411 19.873.625 30.044.625 55.516 0 106.705-6.311 148.079-16.917-27.933 21.94-60.836 37.837-96.751 45.683C399.21 450.972 480 354.929 480 240c0 8.019-.411 15.942-1.18 23.759-29.883 35.776-125.454 61.955-238.82 61.955zM246.833.103zM432.7 96.938c.076.103.148.209.224.312.426.575.853 1.149 1.274 1.728a241.009 241.009 0 00-4.237-5.651 234.33 234.33 0 012.734 3.613l.005-.002zM259.048.751c-.308-.024-.616-.05-.925-.073.171.013.341.029.512.042l.413.031zm185.805 114.265a249.765 249.765 0 014.79 8.167C405.504 147.032 328.129 162.857 240 162.857c-22.083 0-43.49-.994-63.869-2.859a238.454 238.454 0 00-23.856 57.346l.053.007-.003.012a628.587 628.587 0 0025.646 2.803l-.002-.007c45.638 3.093 75.471 22.415 103.657 27.463 7.535 1.35 13.04-6.918 8.744-13.254l-8.622-12.716c85.209-4.969 155.603-24.903 187.844-51.677a239.562 239.562 0 018.751 41.824c-4.413-37.698-17.558-72.721-37.365-103.001a239.49 239.49 0 013.927 6.206l-.052.012zM252 224c-6.627 0-12-3.582-12-8s5.373-8 12-8 12 3.582 12 8-5.373 8-12 8zM271.09 2.001c-.428-.055-.857-.107-1.286-.16a229.668 229.668 0 011.286.16zm-25.342 477.926c.644-.015 1.285-.042 1.928-.062-.643.02-1.284.047-1.928.062z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#ff9300' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#ff9300" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M193.571 475.495zm40.68 4.432c-.644-.015-1.285-.042-1.928-.062.643.02 1.284.047 1.928.062zm-35.512-3.473zm13.016 1.883zm11.112 1.047zm-5.611-.464c-.862-.081-1.724-.159-2.583-.249.859.09 1.722.168 2.583.249zm11.283.801c-.769-.036-1.536-.08-2.303-.123.767.043 1.534.087 2.303.123zm-119.213-38.473a241.913 241.913 0 01-12.249-8.525 240.002 240.002 0 01-5.151-3.922l-.006-.004.004.001c1.931.495 3.89.978 5.863 1.453.303.073.605.147.91.219a430.585 430.585 0 006.198 1.434c30.904 6.91 66.55 11.491 104.865 13.105a240.644 240.644 0 01-39.454-55.686c-4.232-2.06-8.412-4.111-12.534-6.077l-.212-.101a616.99 616.99 0 00-1.673-.794l-.358-.169c-.514-.243-1.028-.483-1.54-.722l-.464-.217c-.472-.22-.943-.437-1.413-.654a281.287 281.287 0 00-1.878-.858l-.67-.303c-.41-.185-.819-.367-1.228-.549l-.71-.315-1.175-.514c-.251-.109-.502-.219-.752-.326-.375-.162-.75-.321-1.124-.48-.264-.112-.527-.224-.79-.334-.359-.151-.717-.299-1.074-.447-.276-.114-.553-.229-.828-.341-.346-.141-.691-.28-1.036-.418-.283-.113-.566-.227-.848-.338-.337-.133-.672-.263-1.008-.393-.289-.112-.578-.224-.867-.334-.328-.125-.654-.246-.981-.368-.293-.109-.587-.219-.88-.326-.32-.117-.64-.23-.959-.344-.298-.106-.596-.213-.893-.317-.313-.109-.624-.214-.936-.32-.3-.102-.601-.205-.901-.304-.31-.103-.619-.201-.928-.3-.299-.096-.599-.193-.897-.287-.306-.096-.612-.187-.918-.279-.299-.09-.599-.182-.897-.269-.301-.088-.6-.171-.899-.255-.302-.085-.605-.172-.906-.253-.299-.081-.596-.156-.893-.234-.298-.077-.597-.157-.894-.231-.303-.075-.604-.144-.906-.216-.292-.069-.584-.14-.875-.205-.306-.069-.61-.131-.915-.195-.284-.06-.568-.123-.851-.179-.311-.062-.62-.117-.93-.175-.276-.051-.553-.106-.828-.153-.316-.055-.631-.102-.946-.152-.266-.042-.533-.088-.798-.126-.325-.047-.647-.086-.971-.128-.254-.033-.51-.07-.763-.099-.355-.041-.708-.073-1.061-.108-.219-.021-.438-.047-.656-.066a51.936 51.936 0 00-1.235-.086c-.158-.01-.317-.024-.475-.033a51.31 51.31 0 00-1.7-.063c-2.764-.054-4.555.881-5.655 2.434a6.379 6.379 0 00-.421.69 7.85 7.85 0 00-.65 1.692c-.169.654-.285 1.35-.341 2.091-.031.407-.045.826-.046 1.254-.001 2.226.393 4.71.982 7.189.204.859.429 1.718.673 2.565.271.94.56 1.865.858 2.761.298.896.604 1.762.908 2.584a93.535 93.535 0 002.614 6.346 57.136 57.136 0 00.354.758 461.132 461.132 0 01-9.488-2.1 410.534 410.534 0 01-16.386-4.167c-15.167-4.193-28.883-8.985-40.849-14.271a238.903 238.903 0 01-34.63-72.092v-.001a89.707 89.707 0 002.296 1.891l.58.459a97.381 97.381 0 002.198 1.682l.249.187c.867.64 1.758 1.274 2.669 1.905.121.084.244.167.366.25.878.603 1.773 1.202 2.691 1.797l.135.089c28.838 18.624 77.093 33.115 135.394 40.346a238.243 238.243 0 01-8.68-35.37C85.725 310.992 36.409 294.2 10.775 273.131c-.091-.075-.179-.15-.27-.224a86.016 86.016 0 01-2.247-1.927c-.118-.104-.238-.208-.355-.313a76.433 76.433 0 01-2.269-2.122c-.106-.103-.205-.207-.31-.311a68.693 68.693 0 01-2.274-2.358 61.773 61.773 0 01-1.864-2.115l-.003-.004A241.564 241.564 0 010 240c0 114.932 80.795 210.977 188.681 234.482-28.529-6.231-55.151-17.551-78.897-32.937l-.458-.297zM152 392c9.667 5.667 16.5 12.5 16 24s-46.5-12-48-24 19.792-7.157 32 0zM254.409.434zM240 0zm-17.432.631zM240 0c-1.409 0-2.815.015-4.219.039.198-.003.397-.002.596-.006A207.93 207.93 0 01240 0zm204.853 115.016l.052-.01a242.951 242.951 0 00-3.927-6.206c-.11-.169-.222-.337-.333-.505a237.115 237.115 0 00-3.387-5.004 239.28 239.28 0 017.595 11.725zm-97.526-89.673l.336.167c.802.404 1.6.813 2.396 1.225a177.756 177.756 0 012.96 1.555 238.626 238.626 0 013.233 1.759c.552.306 1.108.607 1.657.918.195.11.399.205.594.316a240.206 240.206 0 0114.362 8.864c.063.042.123.089.186.131-6.821.306-13.564.908-20.225 1.773-4.947.873-9.987 1.69-15.118 2.45-55.544 10.855-104.212 40.877-138.881 82.884l.031.002-.007.008a717.027 717.027 0 0041.148 1.176c17.369 0 34.322-.614 50.686-1.783 3.126-.223 6.23-.467 9.312-.73l29.238-3.176c40.795-5.412 76.311-14.455 103.459-25.942a246.138 246.138 0 00-2.734-3.613l-.095-.124c-.736-.95-1.479-1.894-2.228-2.832l-.324-.403a242.36 242.36 0 00-4.285-5.193l-.378-.447a233.177 233.177 0 00-2.302-2.659c-.105-.12-.212-.238-.317-.357a242.592 242.592 0 00-4.391-4.843c-.208-.223-.415-.448-.624-.67-.778-.83-1.561-1.655-2.351-2.473-.098-.102-.198-.202-.296-.303a243.511 243.511 0 00-4.535-4.556c-.286-.28-.572-.561-.86-.84a241.05 241.05 0 00-2.368-2.267c-.097-.092-.196-.181-.293-.272a245.512 245.512 0 00-5.783-5.26 218.82 218.82 0 00-2.355-2.052l-.12-.102a240.79 240.79 0 00-9.931-8.055c-.577-.444-1.152-.89-1.733-1.328a248.617 248.617 0 00-3.913-2.883 243.89 243.89 0 00-5.45-3.834c-.719-.491-1.444-.974-2.169-1.457a253.781 253.781 0 00-7.526-4.817 251.214 251.214 0 00-12.004-6.896 242.585 242.585 0 00-5.168-2.693 240.117 240.117 0 00-8.462-4.075 248.717 248.717 0 00-5.334-2.361 231.36 231.36 0 00-6.076-2.51c-.42-.167-.845-.326-1.267-.49-1.183-.46-2.37-.912-3.561-1.354-.548-.203-1.095-.406-1.645-.606a247.708 247.708 0 00-4.507-1.588c-.421-.143-.846-.28-1.268-.421a238.187 238.187 0 00-3.754-1.219c-.503-.159-1.005-.318-1.509-.474-1.56-.481-3.125-.948-4.698-1.397-.419-.12-.841-.234-1.261-.351a235.475 235.475 0 00-3.962-1.072c-.453-.119-.906-.24-1.36-.355-1.618-.413-3.242-.81-4.872-1.189-.42-.098-.842-.191-1.263-.286a240.498 240.498 0 00-4.18-.91c-.398-.083-.795-.169-1.194-.25-1.67-.339-3.346-.659-5.028-.963-.425-.077-.852-.149-1.278-.224a236.133 236.133 0 00-4.415-.731c-.333-.052-.666-.108-1-.158-1.718-.261-3.443-.5-5.173-.724a238.17 238.17 0 0176.233 23.34zm89.912 77.92a236.26 236.26 0 00-2.724-3.85c-.105-.146-.211-.29-.317-.435-.421-.579-.848-1.153-1.274-1.728a233.03 233.03 0 014.315 6.013zM252.92.347l-.222-.013c-.147-.008-.293-.018-.44-.025-.717-.036-1.436-.062-2.154-.092.94.039 1.879.08 2.816.13zm8.742.625c-.87-.078-1.741-.152-2.614-.221l-.412-.031c1.01.079 2.019.162 3.026.252zM271 1.99c-.398-.051-.797-.1-1.196-.149A242.05 242.05 0 01271 1.99zm-4.817-.57l-1.078-.117c-.25-.026-.5-.056-.75-.081-.512-.052-1.026-.096-1.539-.145 1.125.107 2.247.221 3.367.343zM248.606.155c-.59-.021-1.182-.036-1.774-.053a240.225 240.225 0 001.774.053zM234.539.068l-.075.002-1.155.027a210.704 210.704 0 001.23-.029zm-4.352.137c-.738.03-1.476.059-2.212.095-.297.015-.594.032-.89.048a227.59 227.59 0 013.102-.143z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#ff7400' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#ff7400" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 66%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 68%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 66%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 68%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 66%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M240 0zm115.922 29.866zm17.13 10.412c-.063-.042-.123-.089-.186-.131a240.206 240.206 0 00-14.362-8.864c-.195-.111-.399-.206-.594-.316-.55-.311-1.105-.612-1.657-.918a240.644 240.644 0 0114.26 8.576 509.769 509.769 0 01-17.686 3.426 240.762 240.762 0 0120.225-1.773zM347.663 25.51a52.405 52.405 0 00-.336-.167l.336.167zm4.135 2.13a259.68 259.68 0 00-1.739-.905c.581.301 1.161.6 1.739.905zM52.578 99.137a251.794 251.794 0 007.105 2.694c.55.2 1.098.4 1.653.598.968.345 1.948.686 2.932 1.025.493.17.979.342 1.476.51 1.41.478 2.837.951 4.28 1.417.616.199 1.244.394 1.865.591.879.279 1.759.557 2.65.832.766.236 1.54.468 2.314.701a369.317 369.317 0 004.818 1.413c.68.194 1.366.385 2.053.577.931.26 1.861.52 2.803.775.477.129.962.255 1.442.384 3.741.999 7.565 1.963 11.472 2.888.344.082.686.164 1.032.245a495.065 495.065 0 009.005 2.015l.047.01c26.81 5.712 57.003 9.716 89.304 11.574 34.669-42.007 83.337-72.029 138.881-82.884-29.992 4.443-62.991 6.927-97.709 6.927-47.862 0-92.492-4.7-130.421-12.783a240.01 240.01 0 0151.298-25.214 221.788 221.788 0 00-6.45 2.336c-1.229.469-2.448.957-3.667 1.445a237.003 237.003 0 00-9.279 3.954c-1.046.472-2.099.932-3.137 1.418a238.464 238.464 0 00-11.336 5.663c-.173.092-.352.175-.524.268a240.001 240.001 0 00-12.138 7.004c-.315.194-.621.403-.935.599a241.142 241.142 0 00-10.32 6.807c-.724.504-1.438 1.021-2.156 1.533a241.612 241.612 0 00-9.037 6.763c-.625.491-1.254.976-1.874 1.472A241.61 241.61 0 0060.19 81.122c-.348.394-.687.795-1.033 1.192a240.233 240.233 0 00-7.819 9.437c-.375.477-.752.951-1.124 1.43-.976 1.26-1.928 2.541-2.883 3.818 1.295.547 2.613 1.088 3.946 1.624.429.172.867.342 1.301.514zM181.505 7.213c-.359.09-.727.159-1.086.25a238.001 238.001 0 00-13.159 3.791c-1.019.324-2.019.689-3.032 1.026-.1.033-.198.069-.297.102a237.997 237.997 0 0118.594-5.41c-.338.083-.681.156-1.02.241z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#ffedb9' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#ffedb9" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 85%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M449.643 123.183a249.765 249.765 0 00-4.79-8.167 240.27 240.27 0 00-7.595-11.726l-.019-.027a234.777 234.777 0 00-4.315-6.013c-.076-.103-.147-.209-.224-.312l-.005.002c-27.148 11.487-62.664 20.53-103.459 25.942l-29.238 3.176c-3.082.264-6.186.507-9.312.73A712.453 712.453 0 01240 128.571c-14.02 0-27.762-.406-41.148-1.176-8.421 10.201-16.035 21.088-22.699 32.604-.222-.02-.441-.043-.663-.063l.641.062c20.379 1.865 41.786 2.859 63.869 2.859 88.129 0 165.504-15.825 209.643-39.674zm-400.354 8.902c-.457-.189-.917-.377-1.369-.567.452.19.912.378 1.369.567zm-5.539-2.361l-.183-.081c.06.028.122.054.183.081zm-4.258-1.948c-.415-.195-.823-.392-1.234-.589.41.197.818.394 1.234.589zm93.885 26.805c-.541-.089-1.083-.177-1.622-.267.539.09 1.081.178 1.622.267zm-79.445-20.633c-.474-.184-.941-.371-1.41-.557.469.186.936.373 1.41.557zm72.359 19.422c-.743-.132-1.48-.268-2.219-.402.738.135 1.475.27 2.219.402zm-6.256-1.155c-.729-.139-1.46-.277-2.185-.419.725.142 1.455.28 2.185.419zm-89.678-29.032l.07.036-.07-.036zm75.877 26.201c-.67-.148-1.334-.299-2-.449.666.15 1.33.301 2 .449zm-12.805-3.025c-.302-.076-.605-.151-.906-.228.3.077.604.152.906.228zm6.899 1.677c-.66-.155-1.322-.31-1.978-.467.656.157 1.318.312 1.978.467zm12.476 2.749l-1.256-.259 1.256.259zm-25.385-5.992c-.604-.163-1.202-.328-1.802-.492.6.164 1.198.329 1.802.492zm53.468 10.966c-.793-.119-1.587-.238-2.375-.36.788.122 1.582.241 2.375.36zm-82.125-19.98l-.317-.115.317.115zm6.074 2.15c-.519-.178-1.04-.355-1.555-.535.515.179 1.036.356 1.555.535zm5.108 1.705c-.536-.174-1.065-.349-1.596-.524.532.174 1.061.35 1.596.524zm11.944 3.626c-.587-.167-1.176-.334-1.758-.503.582.169 1.171.335 1.758.503zm-6.525-1.92l-.566-.172.566.172zM35.35 125.766c-.399-.199-.8-.398-1.193-.598.394.2.794.398 1.193.598zm2.458-14.992c.377-.59.751-1.182 1.134-1.769 2.653-4.079 5.404-8.089 8.301-11.987.011-.014.02-.029.03-.043a240.689 240.689 0 00.056.022l-.057-.023c-6.193 8.331-11.827 17.095-16.916 26.207l.006-.009c2.356-4.214 4.856-8.339 7.446-12.398zm124.957 47.854c-.844-.095-1.688-.19-2.527-.288.839.098 1.683.193 2.527.288zm-15.316-1.919c-.798-.111-1.591-.225-2.385-.338.794.113 1.587.227 2.385.338zm22.161 2.655c-.847-.086-1.689-.176-2.532-.265.843.089 1.685.179 2.532.265zm-14.635-1.662c-.619-.078-1.24-.155-1.856-.234.617.079 1.237.156 1.856.234zm-49.706-42.82l-.925-.207.925.207zm-41-11.428zm5.755 1.928zm-10.34-3.551zm28.285 8.822c-.48-.128-.965-.254-1.442-.384.477.13.962.256 1.442.384zm-32.571-10.418zm45.074 13.551l-1.032-.245 1.032.245zm-25.932-6.982zm4.585 1.375zm4.599 1.315c-.686-.192-1.373-.383-2.053-.577.681.194 1.367.386 2.053.577zm25.8 6.317l-.047-.01.047.01z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#d55a00' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#d55a00" : (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: "M182.526 6.972a237.437 237.437 0 00-21.648 6.459 240.01 240.01 0 00-51.298 25.214c37.928 8.083 82.558 12.783 130.42 12.783 34.718 0 67.717-2.484 97.709-6.927 5.13-.76 10.171-1.578 15.118-2.45a507.422 507.422 0 0017.686-3.426 240.968 240.968 0 00-14.26-8.576l-.33-.183a238.626 238.626 0 00-4.124-2.226c-.578-.305-1.158-.604-1.739-.905-.796-.412-1.594-.822-2.396-1.225l-.336-.167a238.224 238.224 0 00-76.231-23.34l-.005-.001-.09-.011a240.901 240.901 0 00-4.03-.485l-.787-.085a247.458 247.458 0 00-4.521-.448c-1.007-.09-2.016-.174-3.026-.252-.171-.013-.341-.03-.512-.042-.287-.021-.576-.04-.864-.06-.949-.068-1.9-.128-2.852-.184-.496-.029-.992-.06-1.489-.086-.937-.05-1.876-.091-2.816-.13-.499-.021-.998-.044-1.498-.062-.989-.035-1.981-.06-2.973-.083l-.101-.003c-.411-.01-.821-.023-1.232-.031C242.869.014 241.436 0 240 0c-1.21 0-2.417.016-3.623.033-.198.003-.397.002-.596.006-.415.007-.828.02-1.242.029-1.005.022-2.01.049-3.012.083-.447.016-.893.035-1.339.053a226.84 226.84 0 00-4.171.203 245.27 245.27 0 00-3.448.224l-.578.04a238.426 238.426 0 00-39.465 6.301z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#ff9300' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#ff9300" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M281.748 221.653l8.622 12.716c4.296 6.336-1.208 14.604-8.744 13.254-28.186-5.048-58.019-24.37-103.657-27.463l.002.007a630.362 630.362 0 01-25.646-2.803 240.265 240.265 0 00-8.234 56.311l.063.009-.001.024c29.732 3.964 62.044 6.14 95.845 6.14 105.42 0 196.406-21.144 239.553-51.787.199 3.968.449 7.922.449 11.939a241.341 241.341 0 00-.119-7.251 237.515 237.515 0 00-.148-3.885c-.029-.623-.054-1.247-.088-1.868a240.246 240.246 0 00-.315-4.972c-.058-.77-.127-1.536-.192-2.303a243.57 243.57 0 00-.265-2.987 257.08 257.08 0 00-.302-2.93 239.543 239.543 0 00-8.98-43.827c-32.24 26.773-102.634 46.707-187.843 51.676zM.606 223.781c.087-1.299.188-2.593.296-3.886.438-5.25.986-10.468 1.757-15.616.007-.051.012-.103.02-.153.822-5.459 1.864-10.844 3.047-16.177.184-.833.382-1.661.575-2.49 1.218-5.225 2.561-10.404 4.111-15.493 26.222 21.782 77.701 39.023 141.864 47.378a238.454 238.454 0 0123.856-57.346l-.641-.062c-1.97-.182-3.93-.373-5.88-.572-.847-.086-1.689-.176-2.532-.265a618.739 618.739 0 01-4.313-.471c-.844-.095-1.688-.189-2.527-.288a583.114 583.114 0 01-5.263-.639c-.619-.078-1.239-.155-1.856-.234a608.85 608.85 0 01-5.67-.758c-.798-.111-1.591-.225-2.385-.338-1.399-.2-2.791-.403-4.177-.612-.793-.119-1.587-.238-2.375-.36a525.848 525.848 0 01-5.134-.819c-.541-.089-1.083-.177-1.622-.267a538.568 538.568 0 01-5.465-.944c-.743-.132-1.48-.268-2.219-.402a529.697 529.697 0 01-4.037-.752c-.729-.139-1.46-.277-2.185-.419a505.572 505.572 0 01-5.046-1.011l-1.256-.259a492.403 492.403 0 01-5.313-1.142c-.67-.148-1.334-.299-2-.449a425.55 425.55 0 01-3.906-.899c-.66-.155-1.322-.31-1.978-.467a432.8 432.8 0 01-4.922-1.21c-.302-.076-.605-.151-.906-.228a401.028 401.028 0 01-5.103-1.338c-.604-.163-1.202-.328-1.802-.492-1.253-.343-2.496-.69-3.729-1.042-.587-.167-1.176-.334-1.758-.503a367.482 367.482 0 01-4.767-1.417l-.566-.172a331.385 331.385 0 01-4.853-1.534c-.536-.174-1.065-.349-1.596-.524-1.182-.39-2.353-.783-3.513-1.181-.519-.178-1.04-.355-1.555-.535a284.51 284.51 0 01-4.519-1.615l-.317-.115a267.244 267.244 0 01-4.513-1.715c-.474-.184-.94-.371-1.41-.557-1.09-.432-2.168-.868-3.233-1.307-.457-.189-.917-.377-1.369-.567a228.05 228.05 0 01-4.17-1.794l-.183-.081a204.662 204.662 0 01-4.075-1.868c-.415-.195-.823-.392-1.234-.589-.983-.47-1.952-.944-2.908-1.422-.399-.199-.8-.398-1.193-.598a174.717 174.717 0 01-3.73-1.948l-.07-.036c5.088-9.112 10.723-17.877 16.916-26.207l.057.023c.954-1.278 1.906-2.558 2.883-3.818.372-.479.75-.954 1.124-1.43a242.614 242.614 0 017.819-9.437c.346-.396.685-.798 1.033-1.192a241.606 241.606 0 0129.835-28.428c.62-.497 1.249-.981 1.874-1.472a241.612 241.612 0 019.037-6.763c.718-.512 1.432-1.029 2.156-1.533a240.515 240.515 0 0110.32-6.807c.314-.196.62-.405.935-.599a240.001 240.001 0 0112.138-7.004c.172-.093.352-.176.524-.268a239.418 239.418 0 0111.336-5.663c1.039-.486 2.091-.946 3.137-1.418a239.196 239.196 0 019.279-3.954 232.49 232.49 0 013.667-1.445 225.878 225.878 0 016.45-2.336c1.015-.356 2.033-.707 3.054-1.049l.297-.102c1.013-.337 2.013-.702 3.032-1.026a238.622 238.622 0 0113.159-3.791c.359-.092.727-.16 1.086-.25.338-.085.681-.157 1.021-.241A238.431 238.431 0 01221.991.67c-.231.017-.463.032-.694.05-1.748.135-3.489.292-5.225.464-.43.042-.859.087-1.288.132-1.731.181-3.458.375-5.178.592-.246.031-.49.066-.735.098-1.537.199-3.069.415-4.597.643-.446.067-.893.132-1.338.201-1.63.253-3.254.522-4.873.807-.485.085-.968.176-1.452.264-1.374.251-2.745.513-4.111.787-.382.077-.766.149-1.147.227-1.552.32-3.097.66-4.638 1.01a252.133 252.133 0 00-6.215 1.492c-.573.146-1.143.301-1.714.451a243.37 243.37 0 00-3.203.867c-.65.181-1.302.359-1.95.546a231.436 231.436 0 00-8.921 2.76c-1.181.39-2.357.789-3.53 1.197a226.119 226.119 0 00-4.83 1.733c-.653.243-1.303.494-1.954.742a237.067 237.067 0 00-11.466 4.723l-.212.093c-1.069.475-2.134.958-3.195 1.448l-.261.122a239.906 239.906 0 00-6.258 3.01l-.072.036C62.125 60.524 11.255 129.844 1.659 211.791a221.562 221.562 0 00-.798 7.938c-.064.763-.134 1.524-.191 2.288a240.29 240.29 0 00-.315 4.977c-.033.622-.059 1.246-.088 1.869a226.84 226.84 0 00-.147 3.885c-.017.576-.036 1.151-.049 1.729A235.752 235.752 0 000 240c0-5.457.246-10.854.606-16.219z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#ff7400' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#ff7400" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 66%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 68%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 66%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 68%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 66%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M240 279.848c-33.801 0-66.114-2.177-95.845-6.14-.055 2.096-.155 4.182-.155 6.292 0 13.463 1.22 26.629 3.352 39.488-61.537-8.544-110.926-25.295-136.581-46.354 25.634 21.069 74.95 37.861 136.478 46.406 28.657 3.98 59.956 6.175 92.75 6.175 113.366 0 208.937-26.179 238.82-61.955.769-7.818 1.18-15.74 1.18-23.759 0-4.017-.25-7.971-.446-11.939C436.406 258.703 345.42 279.848 240 279.848zM1.18 263.76l-.015-.189a247.492 247.492 0 01-.863-11.601 242.604 242.604 0 00.878 11.79c0-.001 0-.001 0 0zm1.867 2.118zm4.854 4.79zm-2.579-2.432zm5.18 4.673z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#ffedb9' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#ffedb9" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 85%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M436.04 378.364a238.91 238.91 0 0034.614-72.081c-23.084 19.768-66.904 35.888-122.187 45.147l-31.322 4.361C292.859 358.523 266.929 360 240 360c-29.495 0-57.79-1.772-84.039-5.023 3.923 11.931 8.84 23.4 14.502 34.423-4.285-2.085-8.517-4.161-12.69-6.152 4.122 1.967 8.303 4.018 12.534 6.077 22.102 10.756 45.617 21.739 69.693 22.104 79.685 1.207 150.552-12.954 196.04-33.065zm-292.256-1.453c-.359-.151-.717-.299-1.074-.447.357.148.715.296 1.074.447zm-1.903-.787zm-3.759-1.483c-.328-.125-.654-.246-.981-.368.327.122.653.243.981.368zm7.577 3.085c-.375-.162-.75-.321-1.124-.48.374.158.748.318 1.124.48zm-5.702-2.359c-.337-.133-.673-.263-1.008-.393l1.008.393zm7.629 3.199zm3.901 1.755zm-1.963-.891zm-24.225-8.875c-.303-.075-.604-.144-.906-.216.302.072.603.141.906.216zm-1.78-.421c-.306-.069-.61-.131-.915-.195.305.064.609.126.915.195zm3.567.885c-.299-.081-.596-.156-.893-.234.298.078.595.154.893.234zm26.399 10.225c-.472-.22-.943-.437-1.413-.654.47.217.941.434 1.413.654zm-24.593-9.716c-.301-.088-.6-.171-.899-.255.299.084.599.167.899.255zm5.477 1.759c-.313-.109-.624-.214-.936-.32.312.106.624.211.936.32zm1.852.66c-.32-.117-.64-.23-.959-.344.319.114.639.227.959.344zm-5.514-1.871c-.307-.096-.612-.187-.918-.279.306.092.612.183.918.279zm1.826.587c-.31-.103-.619-.201-.928-.3.309.099.617.197.928.3zm-26.8-1.658c1.1-1.553 2.891-2.488 5.655-2.434-2.763-.054-4.554.881-5.655 2.434zm.198 15.481zm-91.545-76.15l.249.187-.249-.187zm2.918 2.092c.121.084.244.167.366.25-.121-.083-.245-.166-.366-.25zm93.007 85.749zm-98.703-89.982l.58.459-.58-.459zm-2.296-1.891a238.903 238.903 0 0034.63 72.092c11.966 5.287 25.682 10.078 40.849 14.271-15.167-4.193-28.883-8.985-40.849-14.272a238.91 238.91 0 01-34.63-72.091zm11.049 8.171l.135.089-.135-.089zm101.392 55.285c-.311-.062-.62-.117-.93-.175.31.057.619.113.93.175zm-16.495 14.161zm50.231-1.738zm-35.493-12.751c-.316-.055-.631-.102-.946-.152.315.05.629.097.946.152zm37.524 13.714zm-39.268-13.992c-.325-.047-.647-.086-.971-.128.323.041.646.08.971.128zm-1.735-.227c-.355-.041-.708-.073-1.061-.108.354.034.706.066 1.061.108zm-11.204 2.768zm9.487-2.942z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#ff7400' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#ff7400" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 66%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 68%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 66%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 68%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 66%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M251.461 479.721c.769-.036 1.536-.08 2.303-.123a234.318 234.318 0 008.987-.679c.858-.081 1.716-.158 2.571-.248.982-.103 1.959-.221 2.938-.336 3.862-.454 7.696-.997 11.499-1.633.501-.084 1.004-.162 1.505-.249 1.298-.225 2.59-.466 3.881-.712.43-.082.861-.163 1.291-.247a234.08 234.08 0 004.893-1.015c35.915-7.845 68.818-23.743 96.751-45.683-41.374 10.607-92.563 16.917-148.079 16.917-10.172 0-20.197-.214-30.044-.625 12.254 12.911 25.871 24.517 40.716 34.455-3.558.158-7.077.457-10.673.457 1.922 0 3.837-.028 5.748-.073.644-.015 1.285-.042 1.928-.062 1.264-.04 2.526-.084 3.785-.144zm-30.263-.524c-1.052-.082-2.109-.145-3.157-.24a239.109 239.109 0 01-17.773-2.291c-.97-.162-1.932-.344-2.897-.518-12.471-2.243-24.615-5.417-36.335-9.509-.373-.129-.751-.248-1.123-.38a238.472 238.472 0 01-17.437-6.976c-.362-.161-.722-.327-1.083-.49a240.882 240.882 0 01-31.61-17.249c23.747 15.386 50.369 26.706 78.897 32.937l.762.166c1.372.295 2.748.577 4.128.848.424.083.848.163 1.273.244a249.7 249.7 0 003.895.715c.495.086.993.164 1.489.247 3.813.638 7.656 1.181 11.527 1.636.972.114 1.943.231 2.918.334.859.09 1.721.168 2.583.249 1.046.099 2.093.194 3.143.279a248.939 248.939 0 005.837.399c.767.043 1.534.087 2.303.123 1.259.059 2.521.104 3.785.144.643.02 1.284.047 1.928.062 1.911.045 3.826.073 5.749.073-6.335 0-12.592-.321-18.802-.803zM98.697 430.47l-.91-.219.91.219zm6.198 1.435l-.02-.004.02.004zm-12.975-3.109l.004.001-.004-.001zm6.345 4.803zm-6.339-4.798zm52.166-155.127a240.273 240.273 0 018.234-56.311l.003-.012-.053-.007c-64.163-8.355-115.642-25.597-141.864-47.378-1.55 5.089-2.893 10.267-4.111 15.493-.193.83-.391 1.657-.575 2.49-1.183 5.333-2.225 10.718-3.047 16.177-.007.051-.012.103-.02.153-.771 5.148-1.319 10.367-1.757 15.616a248.209 248.209 0 00-.296 3.886C.246 229.146 0 234.543 0 240c0-4.017.25-7.971.447-11.938 29.299 20.806 80.689 37.21 143.645 45.612z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#d55a00' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#d55a00" : (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: "M1.166 263.571c.006.063.008.126.015.189l.003.004c.593.709 1.22 1.413 1.864 2.115.171.186.345.371.519.557a68.693 68.693 0 001.755 1.801c.104.103.204.207.31.311a75.213 75.213 0 002.269 2.122c.116.105.237.209.355.313a84.135 84.135 0 002.247 1.927c.09.075.178.15.27.224 25.655 21.06 75.044 37.81 136.581 46.354C145.22 306.629 144 293.463 144 280c0-2.11.1-4.196.155-6.292l.001-.024-.063-.009C81.138 265.273 29.747 248.869.448 228.062.25 232.029 0 235.983 0 240c0 4.015.108 8.004.303 11.97.195 3.892.488 7.758.863 11.601z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#ffd042' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#ffd042" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M176.153 160c6.664-11.516 14.278-22.403 22.699-32.604a.027.027 0 01.007-.008l-.031-.002c-32.302-1.859-62.495-5.863-89.304-11.574l-.047-.01a481.363 481.363 0 01-4.208-.919l-.925-.207a411.016 411.016 0 01-3.872-.889l-1.032-.245a416.342 416.342 0 01-11.472-2.888c-.48-.128-.965-.254-1.442-.384-.942-.255-1.872-.515-2.803-.775a336.01 336.01 0 01-4.6-1.315c-.761-.223-1.517-.448-2.271-.675a316.98 316.98 0 01-2.314-.701c-.891-.274-1.771-.553-2.65-.832-.622-.197-1.25-.391-1.865-.591a330.505 330.505 0 01-4.28-1.417c-.497-.168-.983-.341-1.476-.51-.984-.339-1.965-.68-2.932-1.025-.555-.198-1.103-.398-1.653-.598a308.654 308.654 0 01-4.285-1.595c-.95-.363-1.888-.73-2.82-1.099-.434-.172-.872-.342-1.302-.515a240.689 240.689 0 01-4.002-1.646c-.011.014-.02.029-.03.043-2.897 3.898-5.648 7.908-8.301 11.987-.383.586-.756 1.179-1.134 1.769-2.59 4.06-5.09 8.184-7.445 12.399l-.006.009.07.037c1.216.656 2.464 1.304 3.73 1.948.394.2.795.399 1.193.598.956.477 1.925.951 2.908 1.422.411.197.819.394 1.234.589 1.337.629 2.69 1.252 4.075 1.868.061.027.123.053.183.081a228.05 228.05 0 004.17 1.794c.453.19.912.378 1.369.567 1.065.439 2.143.875 3.233 1.307.469.186.936.372 1.41.557 1.484.578 2.984 1.151 4.513 1.715l.317.115c1.485.546 2.994 1.083 4.519 1.615.515.18 1.036.357 1.555.535 1.16.397 2.331.791 3.513 1.181.531.175 1.06.351 1.596.524 1.6.518 3.214 1.031 4.853 1.534l.566.172c1.571.479 3.162.951 4.767 1.417.583.169 1.171.336 1.758.503 1.233.351 2.476.698 3.729 1.042.6.164 1.198.329 1.802.492 1.685.453 3.384.9 5.103 1.338.301.077.604.152.906.228a432.8 432.8 0 004.922 1.21c.656.157 1.317.312 1.978.467 1.293.304 2.595.603 3.906.899.666.15 1.33.301 2 .449 1.757.388 3.527.77 5.313 1.142l1.256.259c1.669.344 3.352.681 5.046 1.011.725.142 1.456.28 2.185.419 1.338.255 2.684.506 4.037.752.739.135 1.476.27 2.219.402 1.809.322 3.63.637 5.465.944.539.09 1.081.178 1.622.267 1.701.279 3.412.552 5.134.819.789.122 1.583.24 2.375.36 1.386.208 2.778.412 4.177.612.794.113 1.587.228 2.385.338 1.879.26 3.768.513 5.67.758.617.079 1.237.156 1.856.234 1.745.219 3.499.432 5.263.639.839.098 1.684.193 2.527.288 1.432.162 2.87.318 4.313.471.843.089 1.685.179 2.532.265 1.95.198 3.91.389 5.88.572.222.018.441.04.663.061z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#d55a00' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#d55a00" : (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: "M250.672 479.544c-14.845-9.939-28.462-21.544-40.716-34.455l-.071-.073-.124-.006c-38.315-1.614-73.961-6.195-104.865-13.105l-.02-.004a459.335 459.335 0 01-6.178-1.43l-.91-.219a422.498 422.498 0 01-5.863-1.453l-.004-.001.006.004a239.222 239.222 0 006.339 4.798 240.328 240.328 0 0011.061 7.649l.458.297a240.946 240.946 0 0031.61 17.249c.361.163.72.329 1.083.49a238.113 238.113 0 0017.437 6.976c.372.132.75.25 1.123.38 11.721 4.092 23.865 7.266 36.335 9.509.965.173 1.927.356 2.897.518a239.64 239.64 0 0017.773 2.291c1.048.095 2.104.158 3.157.24 6.208.48 12.465.801 18.8.801 3.596 0 7.115-.299 10.672-.456z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#ffd042' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#ffd042" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M168 416c.5-11.5-6.333-18.333-16-24-12.208-7.156-33.5-12-32 0s47.5 35.5 48 24z"
   }), /*#__PURE__*/React.createElement("ellipse", {
     cx: 252,
     cy: 216,
-    fill: colored ? '#ff9300' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#ff9300" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     rx: 12,
     ry: 8
   }));
-  if (!colormoded) return _svgEl;
+  if (!colormode) return _svgEl;
   return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
-    mode: typeof colormoded === "string" ? colormoded : undefined
+    mode: typeof colormode === "string" ? colormode : undefined
   }, _svgEl);
 }
 const ForwardRef = React.forwardRef(Jupiter2Icon);

package/data1/JupiterIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const JupiterIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormoded?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
+declare const JupiterIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormode?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default JupiterIcon;

package/data1/JupiterIcon.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);
 }
 
@@ -45,41 +58,43 @@ function JupiterIcon({
   size,
   colored,
   themed,
-  colormoded,
+  colormode,
   ...props
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512",
-    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("circle", {
     cx: 255.997,
     cy: 255.995,
     r: 255.995,
-    fill: "#ffac12"
+    fill: colored ? "#ffac12" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 74%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#d89210' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#d89210" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M256.001 0c141.383 0 255.997 114.616 255.997 255.998S397.384 511.993 256.001 511.993V0z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M489.914 151.847c-120.859-1.816-180.247-25.321-233.912-47.879-47.372-19.911-90.285-39.086-167.085-41.946a259.241 259.241 0 00-13.944 12.95C38.16 111.785 14.92 157.024 5.218 204.479c70.274 16.41 157.675 78.401 250.548 85.056.079.006.159.009.238.014 83.363 5.863 171.123-46.303 254.844-57.877a255.797 255.797 0 00-20.934-79.825zM308.147 381.73c-18.717 0-36.016.981-52.145 2.659-83.794 8.722-135.809 36.396-188.674 44.629a258.603 258.603 0 007.643 8c49.99 49.99 115.511 74.984 181.031 74.982 65.515-.002 131.029-24.996 181.016-74.982a259.39 259.39 0 0011.915-12.77c-21.362-17.518-65.101-42.518-140.786-42.518z",
-    fill: "#f9d026"
+    fill: colored ? "#f9d026" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
   }), /*#__PURE__*/React.createElement("path", {
     d: "M256.002 289.549c83.363 5.863 171.123-46.303 254.844-57.877a255.782 255.782 0 00-20.933-79.825c-120.859-1.816-180.247-25.321-233.912-47.879v185.581zm0 94.84V512c65.515-.002 131.029-24.996 181.016-74.982a259.39 259.39 0 0011.915-12.77c-21.362-17.518-65.102-42.519-140.786-42.519-18.717.001-36.017.981-52.145 2.66z",
-    fill: "#e7c224"
+    fill: colored ? "#e7c224" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 75%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
   }));
-  if (!colormoded) return _svgEl;
+  if (!colormode) return _svgEl;
   return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
-    mode: typeof colormoded === "string" ? colormoded : undefined
+    mode: typeof colormode === "string" ? colormode : undefined
   }, _svgEl);
 }
 const ForwardRef = React.forwardRef(JupiterIcon);

package/data1/JupyterBaseIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const JupyterBaseIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormoded?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
+declare const JupyterBaseIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormode?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default JupyterBaseIcon;

package/data1/JupyterBaseIcon.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);
 }
 
@@ -45,30 +58,32 @@ function JupyterBaseIcon({
   size,
   colored,
   themed,
-  colormoded,
+  colormode,
   ...props
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
-    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: "none",
     viewBox: "0 0 21 21",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
   }, props, {
+    "data-datalayer-icon": "",
     style: props && props.color != null ? Object.assign({}, props.style, {
-      "--datalayer-icon-fg": props.color
+      "--datalayer-icon-color": props.color,
+      color: props.color
     }) : props && props.style
-  }), title ? /*#__PURE__*/React.createElement("title", {
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#F37726' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#F37726" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M10.385 16.574c-3.755 0-7.055-1.348-8.761-3.338a9.34 9.34 0 0017.522 0c-1.702 1.99-4.99 3.338-8.761 3.338zm0-12.941c3.755 0 7.054 1.348 8.76 3.338a9.342 9.342 0 00-17.521 0c1.706-1.994 4.99-3.338 8.76-3.338z"
   }));
-  if (!colormoded) return _svgEl;
+  if (!colormode) return _svgEl;
   return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
-    mode: typeof colormoded === "string" ? colormoded : undefined
+    mode: typeof colormode === "string" ? colormode : undefined
   }, _svgEl);
 }
 const ForwardRef = React.forwardRef(JupyterBaseIcon);

package/data1/JupyterBaseNameIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const JupyterBaseNameIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormoded?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
+declare const JupyterBaseNameIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormode?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default JupyterBaseNameIcon;

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

package/data1/JupyterBookIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const JupyterBookIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormoded?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
+declare const JupyterBookIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormode?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default JupyterBookIcon;