@datalayer/icons-react 1.0.8 → 1.0.10

package/data1/esm/CassandraIcon.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,22 +58,24 @@ function CassandraIcon({
   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 280 280",
-    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("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "prefix__b"
@@ -118,13 +133,13 @@ function CassandraIcon({
     clipPath: "url(#prefix__a)",
     transform: "matrix(1.25 0 0 -1.25 -43.538 957.313)"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#373535' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#373535" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 40%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 94%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 40%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 94%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 40%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M61.491 609.137c1.824 0 3.552-.432 4.417-1.296.144-1.345-1.057-3.505-1.825-3.505-.912.336-1.776.53-2.832.53-4.368 0-6.529-4.514-6.529-8.978 0-2.784.96-4.465 3.17-4.465 2.351 0 4.751 1.584 6.095 2.784.336-.239.768-1.008.768-1.872 0-.96-.288-1.872-1.152-2.736-1.536-1.536-4.128-2.832-7.873-2.832-4.32 0-7.296 2.448-7.296 8.161 0 7.488 4.944 14.21 13.01 14.21zm14.111-17.473c2.352 0 6.625 4.129 7.825 12 .048.48.096.625.192 1.105a6.019 6.019 0 01-1.969.336c-1.776 0-3.6-.528-5.232-2.736-1.68-2.352-2.4-5.28-2.4-7.633 0-2.015.576-3.072 1.536-3.072zm-7.729 2.16c0 2.832.96 7.777 4.561 11.377 3.072 3.168 6.816 3.937 10.225 3.937 2.256 0 5.328-.72 7.248-1.105-.48-2.112-1.632-10.08-2.16-14.688-.24-1.97-.336-4.705-.24-5.713-1.584-.672-4.56-.864-5.377-.864-.43 0-.528 1.968-.383 3.84.047.624.144 1.536.191 1.92-1.872-3.12-5.568-5.76-9.456-5.76-2.784 0-4.609 2.304-4.609 7.008zm33.985 15.313c1.968 0 3.84-.72 4.705-1.632-.048-1.345-1.104-3.6-2.785-2.976-.72.24-1.44.431-2.4.431-1.296 0-2.4-.576-2.4-1.775 0-.912.672-1.585 3.888-3.84 2.305-1.68 3.217-3.169 3.217-5.28 0-3.506-3.313-7.298-9.073-7.298-2.352 0-4.417.912-5.09 1.872-.863 1.44-.191 4.272.77 3.793 1.248-.624 3.312-1.297 4.992-1.297 1.584 0 2.592.721 2.592 1.681 0 .815-.72 1.536-3.648 3.6-2.45 1.824-3.217 3.504-3.217 5.424 0 3.984 3.409 7.297 8.4 7.297zm16.559 0c1.969 0 3.841-.72 4.705-1.632-.048-1.345-1.103-3.6-2.784-2.976-.72.24-1.441.431-2.4.431-1.296 0-2.4-.576-2.4-1.775 0-.912.672-1.585 3.888-3.84 2.304-1.68 3.216-3.169 3.216-5.28 0-3.506-3.313-7.298-9.073-7.298-2.352 0-4.416.912-5.088 1.872-.864 1.44-.192 4.272.768 3.793 1.248-.624 3.312-1.297 4.992-1.297 1.584 0 2.592.721 2.592 1.681 0 .815-.72 1.536-3.648 3.6-2.448 1.824-3.216 3.504-3.216 5.424 0 3.984 3.408 7.297 8.401 7.297zm15.119-17.473c2.353 0 6.625 4.129 7.825 12 .048.48.097.625.193 1.105a6.024 6.024 0 01-1.969.336c-1.776 0-3.6-.528-5.233-2.736-1.679-2.352-2.4-5.28-2.4-7.633 0-2.015.576-3.072 1.537-3.072zm-7.729 2.16c0 2.832.961 7.777 4.561 11.377 3.072 3.168 6.816 3.937 10.225 3.937 2.256 0 5.33-.72 7.25-1.105-.48-2.112-1.633-10.08-2.16-14.688-.242-1.97-.337-4.705-.242-5.713-1.584-.672-4.559-.864-5.376-.864-.43 0-.528 1.968-.384 3.84.048.624.144 1.536.192 1.92-1.872-3.12-5.568-5.76-9.456-5.76-2.785 0-4.61 2.304-4.61 7.008zm32.881 9.073c2.209 3.552 5.088 6.24 9.121 6.24 3.408 0 4.512-3.168 3.889-7.68-.336-2.113-.912-5.137-1.297-7.921-.336-2.353-.576-4.464-.527-5.905-1.248-.624-4.897-.864-5.713-.864-.336 0-.385 2.641.048 5.425.383 2.304 1.2 6.48 1.584 8.881.241 1.391.192 3.072-1.152 3.072-1.777 0-6-2.833-8.113-14.449-.145-.96-.528-1.536-1.057-1.872-.719-.433-2.256-.817-5.375-.865.576 2.928 1.488 8.929 2.16 13.345.623 4.032.864 6.625.719 7.633.817.288 5.09 1.2 5.568 1.2.53 0 .625-1.488.145-5.089-.047-.336-.096-.863-.145-1.151zm24.385-11.186c2.11 0 6.385 3.937 7.584 10.897.049.384.193 1.104.289 1.537-.625.576-1.441.96-2.736.96-4.85 0-7.01-5.809-7.01-9.986 0-2.256.769-3.408 1.824-3.408zm-3.168-4.944c-3.072 0-4.992 2.736-4.992 7.44 0 7.777 4.847 14.93 13.008 14.93 1.44 0 2.736-.384 3.552-.864.432 2.208 1.44 9.025 1.489 11.041 1.343.24 4.224.671 5.519.671.53 0 .674-.527.48-1.727-1.152-7.2-3.214-21.026-3.6-24.099-.288-2.592-.335-5.136-.288-6.576-1.535-.672-4.656-.816-5.471-.816-.338 0-.53 2.208-.433 4.176.049.624.144 1.537.144 1.68-2.4-3.936-5.713-5.856-9.361-5.856zm28.127 15.457c2.545 5.665 5.568 6.913 7.537 6.913.625 0 1.584-.384 2.016-.864.193-1.584-1.055-4.752-2.16-5.952-.577.288-1.295.576-2.112.576-1.633 0-4.85-2.545-6.865-13.489-.145-.913-.432-1.297-.96-1.537-.815-.48-4.032-.864-5.567-.912.718 3.937 1.966 11.953 2.447 16.658.144 1.2.19 3.408.096 4.272.912.432 4.513 1.248 5.328 1.248.433 0 .769-2.64.095-6.913zm16.943-10.56c2.354 0 6.625 4.129 7.826 12 .047.48.096.625.192 1.105a6.019 6.019 0 01-1.969.336c-1.776 0-3.6-.528-5.233-2.736-1.679-2.352-2.4-5.28-2.4-7.633 0-2.015.576-3.072 1.537-3.072zm-7.729 2.16c0 2.832.961 7.777 4.561 11.377 3.072 3.168 6.816 3.937 10.225 3.937 2.256 0 5.328-.72 7.25-1.105-.48-2.112-1.633-10.08-2.16-14.688-.24-1.97-.338-4.705-.24-5.713-1.585-.672-4.56-.864-5.378-.864-.43 0-.527 1.968-.384 3.84.048.624.144 1.536.193 1.92-1.873-3.12-5.568-5.76-9.457-5.76-2.785 0-4.61 2.304-4.61 7.008z"
   })), /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#prefix__b)",
     transform: "matrix(1.25 0 0 -1.25 -43.538 957.313)"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#bbe6fb' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#bbe6fb" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 79%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M210.878 690.483c1.584-18.452-27.455-36.014-64.859-39.223-37.404-3.209-69.01 9.151-70.592 27.602-1.584 18.455 27.455 36.016 64.86 39.225 37.403 3.208 69.01-9.149 70.591-27.604"
   })), /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#prefix__c)",
@@ -133,18 +148,18 @@ function CassandraIcon({
     clipPath: "url(#prefix__d)",
     opacity: 0.35
   }, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#fff' : 'white',
+    fill: colored ? "#fff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M141.384 715.923c-14.268.232-30.964-5.433-43.387-10.738a35.89 35.89 0 01-1.989-11.797c0-21.888 19.764-39.634 44.145-39.634 24.381 0 44.145 17.746 44.145 39.634 0 6.927-1.984 13.435-5.463 19.101-9.939 1.545-23.609 3.21-37.45 3.434"
   }))), /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#prefix__e)",
     transform: "matrix(1.25 0 0 -1.25 -43.538 957.313)"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#fff' : 'white',
+    fill: colored ? "#fff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M140.153 715.928c-7.9.482-21.514-3.64-32.867-7.75a33.739 33.739 0 01-2.683-13.201c0-19.178 17.388-34.725 35.782-34.725 18.273 0 34.44 15.572 35.782 34.725.436 6.237-1.711 12.114-4.692 17.18-11.77 2.074-24.261 3.34-31.322 3.77"
   })), /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#prefix__f)",
     transform: "matrix(1.25 0 0 -1.25 -43.538 957.313)",
-    fill: "#373535"
+    fill: colored ? "#373535" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 40%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 94%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 40%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 94%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 40%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
   }, /*#__PURE__*/React.createElement("path", {
     d: "M119.882 697.495c.969 2.146 2.437 3.197 3.859 4.996-.158.426-.504 1.819-.504 2.302a3.907 3.907 0 003.906 3.906 3.89 3.89 0 001.44-.278c6.465 4.927 14.976 7.075 23.529 5.163a29.763 29.763 0 002.299-.623c-8.453 1.172-17.981-1.822-24.462-7.053.198-.467.747-1.802.747-2.34 0-2.156-1.396-2.681-3.553-2.681-.49 0-.958.094-1.391.259-1.464-1.966-3.258-5.711-4.136-8.052 3.584-3.206 6.822-4.368 11.042-5.945-.011.2.145.387.145.592 0 6.503 5.725 11.788 12.229 11.788 5.828 0 10.654-4.238 11.596-9.798 2.908 1.85 5.72 3.268 7.863 6.01-.5.61-1.04 2.337-1.04 3.187a3.545 3.545 0 003.546 3.544c.277 0 .543-.04.802-.1a31.013 31.013 0 012.434 7.05c-10.17 7.529-29.847 6.502-29.847 6.502s-15.658.817-26.258-4.35c.707-5.11 2.746-9.97 5.754-14.08"
   }), /*#__PURE__*/React.createElement("path", {
@@ -154,7 +169,7 @@ function CassandraIcon({
   })), /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#prefix__g)",
     transform: "matrix(1.25 0 0 -1.25 -43.538 957.313)",
-    fill: "#1287b1"
+    fill: colored ? "#1287b1" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
   }, /*#__PURE__*/React.createElement("path", {
     d: "M119.56 695.794a28.451 28.451 0 003.605 5.931c-.158.425-.25.884-.25 1.367a3.907 3.907 0 003.906 3.906 3.89 3.89 0 001.44-.278c6.465 4.927 14.976 7.075 23.529 5.163a29.763 29.763 0 002.299-.623c-8.453 1.172-17.187-1.419-23.668-6.65a3.906 3.906 0 00-3.6-5.423c-.49 0-.958.093-1.391.258a26.294 26.294 0 01-3.54-6.48c3.079-3.317 6.857-5.94 11.076-7.517-.01.201-.031.4-.031.605 0 6.503 5.27 11.775 11.775 11.775 5.828 0 10.654-4.238 11.596-9.798 2.908 1.85 5.492 4.226 7.634 6.968a3.5 3.5 0 00-.81 2.23 3.545 3.545 0 003.545 3.543c.277 0 .543-.04.802-.1a31.013 31.013 0 012.434 7.05c-10.17 7.53-29.847 6.502-29.847 6.502s-15.658.817-26.258-4.349c.707-5.11 2.746-9.97 5.754-14.08"
   }), /*#__PURE__*/React.createElement("path", {
@@ -167,7 +182,7 @@ function CassandraIcon({
   }, /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#prefix__i)"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#fff' : 'white',
+    fill: colored ? "#fff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M156.222 685.187l10.88 2.595-10.92.557 8.886 6.792-10.084-3.615 6.853 9.497-9.465-6.291 3.31 11.117-6.5-9.163-.149 11.579-4.277-10.314-3.566 10.437.193-12.295-6.163 11.021 3.335-11.702-9.997 7.27 7.831-9.84-12.41 4.564 9.794-7.247-12.56-.386 12.842-3.314-12.853-2.779 12.687-.92-10.699-6.851 11.017 3.994-7.644-9.681 9.66 7.79-3.479-12.991 7.457 10.572-1.045-12.486 4.233 11.319 3.603-11.897.876 11.933 5.348-10.181-3.16 11.645 9.793-7.586-6.322 9.672 10.744-4.186-8.215 8.073 11.016-.866z"
   }))), /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#prefix__j)",
@@ -176,10 +191,10 @@ function CassandraIcon({
     clipPath: "url(#prefix__k)",
     opacity: 0.35
   }, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#373535' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#373535" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 40%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 94%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 40%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 94%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 40%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M40.403 664.37c33.74 33.74 60.687 44.155 85.143 48.91 3.236.63 3.848 7.7 3.848 7.7s.453-5.208 2.718-5.887c2.264-.68 5.207 8.152 5.207 8.152s-2.717-7.926 0-8.379c2.718-.453 7.7 7.7 7.7 7.7s-2.038-7.02-.679-7.473c1.357-.453 8.15 10.19 8.15 10.19s-4.076-7.02-.226-7.7c3.851-.679 9.467 4.791 9.467 4.791s-4.416-5.005-2.448-5.696c8.38-2.945 15.16 7.945 15.16 7.945s-1.572-4.775-5.648-9.983c8.83-2.264 15.39 11.04 15.39 11.04l-6.56-13.304c3.397-1.813 16.985 13.812 16.985 13.812s-7.02-12.228-11.096-14.718c2.264-1.812 10.416 5.434 10.416 5.434s-6.567-8.15-4.076-8.604c3.623-2.944 16.982 15.171 16.982 15.171s-5.207-10.642-12.906-19.02c6.435-3.22 22.418 17.435 22.418 17.435s-.453-6.567-12.002-16.983c8.605 1.132 19.701 17.436 19.701 17.436s-4.076-12.228-13.814-20.832c8.45.88 21.964 21.738 21.964 21.738s-5.207-14.492-15.849-22.87c11.775-2.605 28.758 14.944 28.758 14.944s-6.68-12.455-15.399-17.549c9.738-3.736 23.098 11.662 23.098 11.662s-13.36-20.607-34.645-19.7c-6.984.296-28.109 21.187-73.368 19.473-59.78-2.265-72.46-27.626-104.389-44.835"
   })), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#373535' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#373535" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 40%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 94%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 40%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 94%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 40%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M41.786 666.933c33.74 33.739 60.686 44.154 85.142 48.91 3.237.629 3.85 7.699 3.85 7.699s.451-5.21 2.717-5.887c2.264-.68 5.207 8.15 5.207 8.15s-2.717-7.925 0-8.377c2.718-.452 7.7 7.699 7.7 7.699s-2.038-7.02-.68-7.472c1.358-.453 8.151 10.19 8.151 10.19s-4.076-7.02-.226-7.7c3.85-.68 9.467 4.79 9.467 4.79s-4.416-5.004-2.448-5.695c8.38-2.944 15.157 7.945 15.157 7.945s-1.57-4.775-5.645-9.983c8.83-2.265 15.39 11.04 15.39 11.04l-6.56-13.305c3.397-1.811 16.983 13.812 16.983 13.812s-7.018-12.226-11.094-14.717c2.264-1.812 10.416 5.434 10.416 5.434s-6.567-8.152-4.076-8.604c3.623-2.945 16.982 15.17 16.982 15.17s-5.209-10.642-12.906-19.02c6.435-3.22 22.418 17.436 22.418 17.436s-.453-6.568-12.002-16.984c8.605 1.133 19.701 17.437 19.701 17.437s-4.076-12.228-13.814-20.833c8.45.879 21.964 21.738 21.964 21.738s-5.207-14.492-15.849-22.87c11.775-2.604 28.758 14.944 28.758 14.944s-6.68-12.453-15.399-17.548c9.738-3.736 23.098 11.662 23.098 11.662s-13.36-20.607-34.647-19.701c-6.982.298-28.107 21.189-73.367 19.474-59.779-2.264-72.46-27.625-104.388-44.834"
   })), /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#prefix__l)",
@@ -188,15 +203,15 @@ function CassandraIcon({
     clipPath: "url(#prefix__m)",
     opacity: 0.35
   }, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#373535' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#373535" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 40%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 94%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 40%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 94%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 40%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M39.52 660.68c17.831-8.945 34.136 1.358 54.685-4.433 15.624-4.404 34.646-9.833 60.459-6.096 25.814 3.735 47.893 14.944 58.424 34.985 3.283 8.943 16.642-2.039 16.642-2.039s-9.736 4.076-9.51 2.151c.227-1.924 14.606-8.604 14.606-8.604s-13.021 4.076-12.228 1.02c.792-3.058 16.301-15.286 16.301-15.286s-17.548 13.36-19.019 11.55c-1.473-1.813 7.472-9.173 7.472-9.173s-14.832 9.172-20.04 6.467c-3.747-1.943 15.398-14.506 15.398-14.506s-12.455 9.512-15.399 7.021c-2.943-2.492 14.04-22.87 14.04-22.87s-19.249 20.832-21.172 19.813c-1.926-1.019 5.32-10.983 5.32-10.983s-9.51 10.417-12.113 8.605c-2.604-1.812 13.586-28.87 13.586-28.87s-17.549 27.737-24.795 23.097c11.38-24.966 7.134-28.533 7.134-28.533s-1.452 25.47-15.625 24.796c-7.133-.34 3.396-19.02 3.396-19.02s-9.691 17.061-16.145 16.721c11.894-22.51 7.654-31.667 7.654-31.667s1.967 19.226-14.166 29.925c6.113-5.433-3.836-29.925-3.836-29.925s8.752 36.091-6.455 29.21c-2.403-1.085-.17-18.002-.17-18.002s-3.057 19.362-7.64 18.342c-2.674-.593-16.985-26.833-16.985-26.833s11.72 28.362 8.153 27.173c-2.598-.867-7.473-12.568-7.473-12.568s2.377 11.55 0 12.228c-2.377.68-15.625-12.228-15.625-12.228s9.851 11.55 8.152 13.927c-2.574 3.603-5.59 3.772-9.17 2.377-5.21-2.03-12.228-11.548-12.228-11.548s6.996 9.637 5.773 13.247c-1.963 5.8-22.077-11.209-22.077-11.209s11.888 11.21 9.171 13.587c-2.717 2.377-17.47 1.642-22.078 1.655-13.586.042-18.294 3.23-22.418 6.496"
   })), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#373535' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#373535" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 40%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 94%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 40%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 94%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 40%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M38.84 662.718c17.833-8.945 34.137 1.358 54.686-4.434 15.623-4.402 34.646-9.832 60.46-6.095 25.814 3.736 47.89 14.945 58.422 34.984 3.283 8.944 16.642-2.037 16.642-2.037s-9.736 4.075-9.51 2.15c.227-1.924 14.606-8.604 14.606-8.604s-13.021 4.075-12.228 1.018c.793-3.056 16.304-15.284 16.304-15.284s-17.55 13.361-19.021 11.548c-1.471-1.81 7.473-9.17 7.473-9.17s-14.833 9.17-20.041 6.467c-3.747-1.944 15.398-14.506 15.398-14.506s-12.455 9.511-15.398 7.02c-2.944-2.492 14.04-22.87 14.04-22.87s-19.25 20.832-21.173 19.813c-1.924-1.02 5.322-10.982 5.322-10.982s-9.512 10.416-12.115 8.604c-2.604-1.81 13.586-28.87 13.586-28.87s-17.55 27.738-24.795 23.096c11.379-24.965 7.133-28.532 7.133-28.532s-1.452 25.47-15.625 24.795c-7.133-.34 3.396-19.02 3.396-19.02s-9.691 17.063-16.144 16.723c11.896-22.512 7.654-31.668 7.654-31.668s1.967 19.227-14.166 29.926c6.113-5.434-3.836-29.926-3.836-29.926s8.754 36.091-6.453 29.21c-2.403-1.086-.17-18.002-.17-18.002s-3.06 19.361-7.642 18.342c-2.674-.593-16.985-26.833-16.985-26.833s11.719 28.362 8.153 27.172c-2.598-.865-7.473-12.566-7.473-12.566s2.378 11.548 0 12.227c-2.377.68-15.624-12.227-15.624-12.227s9.85 11.548 8.15 13.926c-2.573 3.603-5.59 3.771-9.17 2.376-5.21-2.029-12.227-11.547-12.227-11.547s6.996 9.638 5.774 13.247c-1.964 5.8-22.077-11.209-22.077-11.209s11.888 11.21 9.17 13.586c-2.717 2.378-17.471 1.642-22.078 1.656-13.586.043-18.293 3.23-22.417 6.496"
   })));
-  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(CassandraIcon);

package/data1/esm/CellIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const CellIcon: 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 CellIcon: 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 CellIcon;

package/data1/esm/CellIcon.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,22 +58,24 @@ function CellIcon({
   size,
   colored,
   themed,
-  colormoded,
+  colormode,
   ...props
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
-    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
+    fill: (themed ? "var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor))" : "var(--datalayer-icon-color, currentColor)"),
     viewBox: "0 0 20 20",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
   }, props, {
+    "data-datalayer-icon": "",
     style: props && props.color != null ? Object.assign({}, props.style, {
-      "--datalayer-icon-fg": props.color
+      "--datalayer-icon-color": props.color,
+      color: props.color
     }) : props && props.style
-  }), title ? /*#__PURE__*/React.createElement("title", {
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
@@ -71,9 +86,9 @@ function CellIcon({
     d: "M1.5 7.25h17v1.5h-17v-1.5z",
     clipRule: "evenodd"
   }));
-  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(CellIcon);

package/data1/esm/CephIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const CephIcon: 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 CephIcon: 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 CephIcon;

package/data1/esm/CephIcon.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,29 +58,31 @@ function CephIcon({
   size,
   colored,
   themed,
-  colormoded,
+  colormode,
   ...props
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
-    fill: colored ? '#f0424d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#f0424d" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 57%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 77%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 57%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 77%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 57%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     viewBox: "-3.22 -4.4 66.773 66.338",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
   }, props, {
+    "data-datalayer-icon": "",
     style: props && props.color != null ? Object.assign({}, props.style, {
-      "--datalayer-icon-fg": props.color
+      "--datalayer-icon-color": props.color,
+      color: props.color
     }) : props && props.style
-  }), title ? /*#__PURE__*/React.createElement("title", {
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
     d: "M51.727 55.793c-2.427-1.3-3.813-2.746-4.12-4.326-.296-1.53.387-3.232 2.088-5.204a25.678 25.678 0 006.307-16.88C56.002 15.2 44.462 3.66 30.28 3.66h-.23C15.866 3.66 4.33 15.2 4.33 29.383a25.68 25.68 0 006.308 16.881c1.715 1.985 2.38 3.618 2.096 5.134-.295 1.578-1.684 3.054-4.132 4.392-3.754-3.13-7.073-7.308-9.12-11.5a34.577 34.577 0 01-2.542-7.14 34.106 34.106 0 01-.9-7.765 33.82 33.82 0 012.67-13.237A33.89 33.89 0 016.008 5.341a33.85 33.85 0 0110.806-7.286A33.768 33.768 0 0130.05-4.618h.23a33.78 33.78 0 0113.238 2.673A33.918 33.918 0 0154.324 5.34a33.91 33.91 0 017.287 10.806 33.81 33.81 0 012.673 13.237 34.18 34.18 0 01-.892 7.765 33.743 33.743 0 01-2.543 7.14c-2.047 4.194-5.364 8.373-9.123 11.503M39.18 62.155c-.395-.25-1.745-1.253-3.06-3.076-1.262-1.742-2.748-4.632-2.67-8.502.05-2.33.516-4.597 1.4-6.74a19.193 19.193 0 013.7-5.78l.01-.013.35-.405c.6-.695 1.218-1.412 1.712-2.252a11.66 11.66 0 001.315-3.226 12.14 12.14 0 00.066-5.257c-.335-1.586-1-3.123-1.95-4.448a12.115 12.115 0 00-3.438-3.238 12 12 0 00-4.626-1.685 11.83 11.83 0 00-1.693-.12h-.244a11.93 11.93 0 00-1.691.12 11.99 11.99 0 00-4.626 1.685 12.135 12.135 0 00-3.44 3.238 12.08 12.08 0 00-1.95 4.448 12.11 12.11 0 00.068 5.257c.262 1.1.706 2.194 1.313 3.226.496.84 1.114 1.557 1.713 2.252l.352.405.007.013a19.1 19.1 0 013.703 5.78c.875 2.14 1.343 4.4 1.4 6.74.08 3.87-1.407 6.76-2.668 8.502-1.32 1.823-2.667 2.827-3.063 3.076l-1.97-.593a33.91 33.91 0 01-5.665-2.497 9.67 9.67 0 005.084-8.496c0-2.355-.915-4.613-2.72-6.7-.027-.032-.055-.058-.075-.08l-.54-.592-1.448-1.696a20.3 20.3 0 01-3.469-7.414 20.43 20.43 0 01-.112-8.882 20.37 20.37 0 013.301-7.537 20.47 20.47 0 015.807-5.469 20.342 20.342 0 017.84-2.856 20.09 20.09 0 012.853-.2h.256a20.1 20.1 0 012.854.2 20.35 20.35 0 017.841 2.856 20.475 20.475 0 015.808 5.47 20.433 20.433 0 013.303 7.537 20.5 20.5 0 01-.113 8.882 20.3 20.3 0 01-3.472 7.414c-.44.6-.93 1.127-1.45 1.696l-.523.577-.016.014c-.02.02-.05.048-.075.083-1.83 2.2-2.72 4.383-2.72 6.706a9.667 9.667 0 005.088 8.496 33.95 33.95 0 01-5.666 2.497l-1.973.593M30.165 36.42c-3.7 0-6.713-3.012-6.713-6.713s3.012-6.714 6.713-6.714 6.712 3.012 6.712 6.714a6.72 6.72 0 01-6.712 6.713"
   }));
-  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(CephIcon);

package/data1/esm/CephNameIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const CephNameIcon: 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 CephNameIcon: 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 CephNameIcon;

package/data1/esm/CephNameIcon.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 CephNameIcon({
   size,
   colored,
   themed,
-  colormoded,
+  colormode,
   ...props
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "-3.22 -4.4 65.729 65.302",
-    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 ? '#f0424d' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#f0424d" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 57%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 77%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 57%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 77%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 57%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M43.413 35.93c-1.613-.863-2.548-1.835-2.754-2.894-.198-1.023.258-2.16 1.396-3.478a17.166 17.166 0 004.216-11.283A17.219 17.219 0 0029.076 1.079L29 1.08h-.077a17.219 17.219 0 00-17.195 17.195 17.168 17.168 0 004.217 11.284c1.146 1.327 1.593 2.42 1.412 3.432-.198 1.055-1.127 2.041-2.763 2.936-2.52-2.092-4.738-4.886-6.097-7.688A22.723 22.723 0 016.8 23.465a22.803 22.803 0 01-.595-5.191 22.602 22.602 0 011.785-8.85 22.658 22.658 0 014.872-7.223 22.693 22.693 0 017.224-4.87 22.592 22.592 0 018.849-1.787h.154a22.602 22.602 0 018.85 1.786 22.637 22.637 0 017.223 4.871 22.672 22.672 0 014.871 7.223 22.602 22.602 0 011.788 8.85c0 1.752-.202 3.498-.605 5.191a22.612 22.612 0 01-1.7 4.774c-1.369 2.802-3.586 5.598-6.099 7.69m-8.4 4.254c-.265-.167-1.167-.837-2.047-2.057a9.31 9.31 0 01-1.784-5.683 12.561 12.561 0 01.93-4.507 12.803 12.803 0 012.473-3.864l.006-.01.234-.272c.4-.464.815-.945 1.144-1.505.407-.69.703-1.416.88-2.157a8.115 8.115 0 00.044-3.515 8.058 8.058 0 00-1.305-2.974 8.105 8.105 0 00-2.298-2.164 8.004 8.004 0 00-3.093-1.126 8.065 8.065 0 00-1.132-.08h-.164a7.974 7.974 0 00-1.13.079 8.014 8.014 0 00-3.093 1.126 8.105 8.105 0 00-2.3 2.164 8.075 8.075 0 00-1.303 2.974 8.095 8.095 0 00.046 3.515c.175.741.472 1.466.877 2.157.333.561.746 1.04 1.145 1.505l.235.272.005.01a12.749 12.749 0 012.475 3.864 12.53 12.53 0 01.928 4.506 9.31 9.31 0 01-1.784 5.683c-.881 1.21-1.784 1.89-2.047 2.057l-1.317-.396a23.467 23.467 0 01-3.787-1.67 6.454 6.454 0 003.397-5.68c0-1.572-.612-3.084-1.818-4.486a1.369 1.369 0 00-.05-.052l-.361-.395-.968-1.134a13.57 13.57 0 01-2.319-4.956 13.66 13.66 0 01-.074-5.938 13.542 13.542 0 012.218-5.038 13.673 13.673 0 013.88-3.656 13.59 13.59 0 015.243-1.91 13.317 13.317 0 011.907-.133h.172a13.438 13.438 0 011.908.134 13.59 13.59 0 015.242 1.91 13.69 13.69 0 013.884 3.655 13.826 13.826 0 012.217 5.038 13.75 13.75 0 01-.075 5.948 13.57 13.57 0 01-2.32 4.956c-.303.403-.622.753-.969 1.134l-.35.386c-.025.023-.044.04-.06.065-1.223 1.461-1.818 2.93-1.818 4.483a6.462 6.462 0 003.402 5.68 22.693 22.693 0 01-3.788 1.669l-1.31.396M29 22.979a4.496 4.496 0 01-4.488-4.488A4.496 4.496 0 0129 14.003a4.496 4.496 0 014.487 4.488A4.496 4.496 0 0129 22.98"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#333c46' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#333c46" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 41%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 93%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 41%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 93%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 41%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M13.755 52.214c0 3.155-.282 4.027-1.042 4.788-.45.451-1.156.76-2.48.76H5.595c-1.492 0-2.393-.254-3.024-.872-.985-.985-1.266-2.169-1.266-6.73 0-4.562.282-5.747 1.266-6.732.621-.62 1.512-.872 3.024-.872h4.62c1.379 0 1.998.28 2.478.76.731.732 1.014 1.746 1.014 4.59h-2.843c-.058-1.972-.17-2.32-.339-2.479-.17-.159-.403-.252-1.041-.252h-3.52c-.874 0-1.11.085-1.295.283-.282.282-.423.806-.423 4.702 0 3.897.14 4.422.423 4.703.197.198.423.282 1.294.282h3.549c.62 0 .903-.056 1.109-.252.206-.195.31-.76.31-2.675h2.845m4.935-3.44h6.928c0-2.562-.17-3.125-.422-3.379-.171-.168-.423-.282-1.295-.282h-3.493c-.873 0-1.11.084-1.324.31-.254.253-.365.76-.403 3.35zm0 2.339c.03 2.984.197 3.576.423 3.8.227.225.424.283 1.295.283h3.931c.649 0 .847-.113 1.016-.282.195-.198.252-.535.31-1.888h2.842c-.056 2.365-.282 3.211-1.042 3.972-.478.48-1.126.76-2.478.76h-4.94c-1.492 0-2.394-.254-3.024-.872-.988-.985-1.267-2.169-1.267-6.73 0-4.562.28-5.747 1.267-6.732.62-.62 1.512-.872 3.024-.872h4.167c1.494 0 2.45.28 3.025.844.985.986 1.266 2.17 1.266 6.62v.76c0 .223-.084.337-.339.337h-9.496m21.314 3.69c-.252.252-.62.366-1.548.366h-2.198c-.901 0-1.683-.254-2.76-.802l-.197-.099V45.99c1.127-.563 1.916-.845 2.845-.845h2.319c.927 0 1.295.113 1.548.366.424.423.535 1.238.535 4.637 0 3.4-.113 4.234-.535 4.638zm-.847-12.281h-2.054c-1.268 0-1.887.282-3.803 1.86v-1.83h-2.926v18.57h2.928v-5.157c1.916 1.549 2.535 1.83 3.803 1.83h2.054c1.636 0 2.452-.282 3.1-.928.806-.806 1.21-1.972 1.21-6.704 0-4.732-.396-5.887-1.21-6.704-.648-.647-1.464-.93-3.1-.93m18.393.875c-.564-.565-1.295-.874-2.619-.874h-2.393c-1.267 0-1.887.282-3.802 1.86v-5.797a10.565 10.565 0 00-2.908-1.09c-.007 0-.013.006-.02.008v20.249h2.929V45.989l.607-.288c.822-.368 1.484-.556 2.238-.556h1.972c.986 0 1.267.113 1.577.423.282.283.403.731.403 1.464v10.731h2.93V46.836c0-2.113-.31-2.845-.901-3.436"
   }));
-  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(CephNameIcon);

package/data1/esm/CloudIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const CloudIcon: 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 CloudIcon: 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 CloudIcon;