@datalayer/icons-react 1.0.9 → 1.0.10

package/data1/esm/OvhCloudNameIcon.js

@@ -11,31 +11,44 @@ function _DlIconInverseColormode({
   children
 }) {
   const ref = React.useRef(null);
-  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
   React.useLayoutEffect(() => {
-    if (typeof mode === "string") {
-      setResolved(mode);
-      return;
-    }
     if (typeof document === "undefined") return;
-    let cur = null;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
     let el = ref.current && ref.current.parentElement;
-    while (el) {
-      const m = el.getAttribute && el.getAttribute("data-color-mode");
-      if (m) { cur = m; break; }
+    while (el && (!currentMode || !lightTheme || !darkTheme)) {
+      if (el.getAttribute) {
+        currentMode = currentMode || el.getAttribute("data-color-mode");
+        lightTheme = lightTheme || el.getAttribute("data-light-theme");
+        darkTheme = darkTheme || el.getAttribute("data-dark-theme");
+      }
       el = el.parentElement;
     }
-    if (!cur || cur === "auto") {
-      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    if (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
     }
-    setResolved(cur === "dark" ? "light" : "dark");
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
   }, [mode]);
   return /*#__PURE__*/React.createElement("span", {
     ref: ref,
-    "data-color-mode": resolved || "light",
-    "data-light-theme": "light",
-    "data-dark-theme": "dark",
-    style: { display: "inline-flex", lineHeight: 0 }
+    "data-color-mode": appearance.mode || "light",
+    "data-light-theme": appearance.lightTheme || undefined,
+    "data-dark-theme": appearance.darkTheme || undefined,
+    style: {
+      display: "inline-flex",
+      lineHeight: 0,
+      color: "var(--fgColor-default, var(--color-fg-default, currentColor))"
+    }
   }, children);
 }
 
@@ -50,74 +63,29 @@ function OvhCloudNameIcon({
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
-    id: "prefix__Layer_1",
     viewBox: "0 0 500 500",
+    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",
-    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     "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", {
-    id: "prefix__defs835"
-  }, /*#__PURE__*/React.createElement("style", {
-    id: "style833",
-    type: "text/css"
-  }, ".prefix__cls-2{fill:#000e9c}")), /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path839",
-    fill: colored ? '#000e9c' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#000e9c" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     fillRule: "evenodd",
-    strokeWidth: 6.396,
     d: "M467.796 53.205a256.47 256.47 0 01-23.92 284.546H306.751l42.212-74.638H293.13l65.812-115.955h56.154l52.701-93.826zM197.001 337.75H57.19A253.207 253.207 0 0132.95 52.565l90.691 157.527L223.607 36h147.102L197.065 337.623z"
-  }), /*#__PURE__*/React.createElement("g", {
-    id: "prefix__g870",
-    transform: "translate(-220.506 361.64) scale(2.41757)"
-  }, /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path841",
-    d: "M128.18 62.9c0-12.59 6.27-18.64 16.57-18.64s16.56 6.05 16.56 18.64-6.31 18.57-16.56 18.57-16.57-6.1-16.57-18.57zm3.72 0c0 10.35 4.72 15.28 12.85 15.28 8.13 0 12.84-4.93 12.84-15.28s-4.72-15.35-12.84-15.35c-8.12 0-12.85 4.94-12.85 15.35z",
-    className: "prefix__cls-2",
-    transform: "translate(-36.97 -37.62)"
-  }), /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path843",
-    d: "M188.38 45.75a1.82 1.82 0 011.7-1.17 1.79 1.79 0 011.8 1.81 2.42 2.42 0 01-.16.79L179.3 79.93a1.78 1.78 0 01-3.39 0l-12.42-32.75a2.42 2.42 0 01-.16-.79 1.79 1.79 0 011.8-1.81 1.82 1.82 0 011.7 1.17l10.77 28.56z",
-    className: "prefix__cls-2",
-    transform: "translate(-36.97 -37.62)"
-  }), /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path845",
-    d: "M199.42 64.06v15.29a1.81 1.81 0 11-3.61 0v-33a1.81 1.81 0 113.61 0v14.42h18.48V46.39a1.81 1.81 0 113.61 0v33a1.81 1.81 0 11-3.61 0V64.06z",
-    className: "prefix__cls-2",
-    transform: "translate(-36.97 -37.62)"
-  }), /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path847",
-    d: "M238.55 55.89a10 10 0 018.17 3.66 1.56 1.56 0 01.37 1 1.51 1.51 0 01-1.54 1.54 1.56 1.56 0 01-1.27-.64 6.8 6.8 0 00-5.73-2.45c-4.89 0-7.49 3.13-7.49 9.66s2.6 9.71 7.49 9.71a9.68 9.68 0 006.15-2.28 1.56 1.56 0 011-.37 1.54 1.54 0 011.54 1.54 1.63 1.63 0 01-.69 1.32 12.06 12.06 0 01-8 2.87c-6.85 0-10.94-4.09-10.94-12.79s4.09-12.77 10.94-12.77z",
-    className: "prefix__cls-2",
-    transform: "translate(-36.97 -37.62)"
-  }), /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path849",
-    d: "M255.48 44.63V75c0 2.12.69 3 2.12 3a1.6 1.6 0 110 3.19c-3.55 0-5.52-2.13-5.52-6.21V44.63a1.74 1.74 0 011.7-1.69 1.7 1.7 0 011.7 1.69z",
-    className: "prefix__cls-2",
-    transform: "translate(-36.97 -37.62)"
-  }), /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path851",
-    d: "M284.41 68.63c0 8.7-4.25 12.79-11.15 12.79s-11.14-4.09-11.14-12.79 4.3-12.74 11.14-12.74c6.84 0 11.15 4.03 11.15 12.74zm-3.45 0c0-6.69-2.81-9.66-7.7-9.66-4.89 0-7.69 3-7.69 9.66s2.81 9.71 7.69 9.71c4.88 0 7.74-2.92 7.74-9.71z",
-    className: "prefix__cls-2",
-    transform: "translate(-36.97 -37.62)"
-  }), /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path853",
-    d: "M292.59 57.91v13.85c0 3.45 1.11 6.42 6.47 6.42 5.36 0 6.48-3 6.48-6.42V57.91a1.72 1.72 0 011.75-1.7 1.67 1.67 0 011.65 1.7v13.85c0 5-1.65 9.66-9.88 9.66s-9.87-4.62-9.87-9.66V57.91a1.67 1.67 0 011.7-1.7 1.71 1.71 0 011.7 1.7z",
-    className: "prefix__cls-2",
-    transform: "translate(-36.97 -37.62)"
   }), /*#__PURE__*/React.createElement("path", {
-    id: "prefix__path855",
-    d: "M331.6 59.34V44.63a1.7 1.7 0 013.4 0V71c0 7-4.35 10.46-10.4 10.46-6.85 0-10.89-4.09-10.89-12.79s3.83-12.74 10.67-12.74a9 9 0 017.22 3.41zm0 4.3s-2-4.67-7-4.67-7.49 3.13-7.49 9.66 2.6 9.71 7.49 9.71c4.08 0 7-2.33 7-7.38z",
+    d: "M0 422.756c0-30.437 15.159-45.063 40.06-45.063s40.035 14.626 40.035 45.063S64.84 467.65 40.06 467.65 0 452.903 0 422.756zm8.994 0c0 25.022 11.41 36.94 31.066 36.94 19.655 0 31.041-11.918 31.041-36.94s-11.41-37.11-31.041-37.11-31.066 11.943-31.066 37.11zM145.538 381.295a4.4 4.4 0 014.11-2.829 4.327 4.327 0 014.352 4.376 5.85 5.85 0 01-.387 1.91l-30.026 79.175a4.303 4.303 0 01-8.196 0l-30.026-79.175a5.85 5.85 0 01-.387-1.91 4.327 4.327 0 014.352-4.376 4.4 4.4 0 014.11 2.829l26.037 69.046zM172.228 425.56v36.965a4.376 4.376 0 11-8.727 0v-79.78a4.376 4.376 0 118.727 0v34.862h44.677v-34.765a4.376 4.376 0 118.727 0v79.78a4.376 4.376 0 11-8.727 0V425.56zM266.828 405.809a24.176 24.176 0 0119.751 8.848 3.771 3.771 0 01.895 2.418 3.65 3.65 0 01-3.723 3.723 3.771 3.771 0 01-3.07-1.547 16.44 16.44 0 00-13.853-5.923c-11.822 0-18.108 7.567-18.108 23.353s6.286 23.475 18.108 23.475a23.402 23.402 0 0014.868-5.512 3.771 3.771 0 012.417-.895 3.723 3.723 0 013.723 3.723 3.94 3.94 0 01-1.668 3.192 29.156 29.156 0 01-19.34 6.938c-16.56 0-26.448-9.888-26.448-30.92s9.887-30.873 26.448-30.873zM307.757 378.587v73.422c0 5.125 1.668 7.252 5.125 7.252a3.868 3.868 0 110 7.713c-8.582 0-13.345-5.15-13.345-15.014v-73.373a4.207 4.207 0 014.11-4.086 4.11 4.11 0 014.11 4.086zM377.698 436.609c0 21.033-10.275 30.92-26.956 30.92s-26.932-9.887-26.932-30.92 10.395-30.8 26.932-30.8c16.536 0 26.956 9.743 26.956 30.8zm-8.341 0c0-16.174-6.793-23.354-18.615-23.354s-18.591 7.253-18.591 23.354 6.793 23.474 18.59 23.474c11.798 0 18.713-7.059 18.713-23.474zM397.473 410.692v33.484c0 8.34 2.684 15.52 15.642 15.52 12.958 0 15.666-7.252 15.666-15.52v-33.484a4.158 4.158 0 014.23-4.11 4.037 4.037 0 013.99 4.11v33.484c0 12.088-3.99 23.354-23.886 23.354s-23.861-11.17-23.861-23.354v-33.484a4.037 4.037 0 014.11-4.11 4.134 4.134 0 014.11 4.11zM491.783 414.15v-35.563a4.11 4.11 0 018.22 0v63.751c0 16.923-10.517 25.288-25.143 25.288-16.56 0-26.328-9.888-26.328-30.92s9.26-30.8 25.796-30.8a21.758 21.758 0 0117.455 8.244zm0 10.395s-4.835-11.29-16.923-11.29-18.108 7.567-18.108 23.354 6.286 23.474 18.108 23.474c9.863 0 16.923-5.632 16.923-17.841z",
     className: "prefix__cls-2",
-    transform: "translate(-36.97 -37.62)"
-  })));
+    fill: colored ? "#000e9c" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
+  }));
   if (!colormode) return _svgEl;
   return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
     mode: typeof colormode === "string" ? colormode : undefined

package/data1/esm/PandasIcon.js

@@ -11,31 +11,44 @@ function _DlIconInverseColormode({
   children
 }) {
   const ref = React.useRef(null);
-  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
   React.useLayoutEffect(() => {
-    if (typeof mode === "string") {
-      setResolved(mode);
-      return;
-    }
     if (typeof document === "undefined") return;
-    let cur = null;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
     let el = ref.current && ref.current.parentElement;
-    while (el) {
-      const m = el.getAttribute && el.getAttribute("data-color-mode");
-      if (m) { cur = m; break; }
+    while (el && (!currentMode || !lightTheme || !darkTheme)) {
+      if (el.getAttribute) {
+        currentMode = currentMode || el.getAttribute("data-color-mode");
+        lightTheme = lightTheme || el.getAttribute("data-light-theme");
+        darkTheme = darkTheme || el.getAttribute("data-dark-theme");
+      }
       el = el.parentElement;
     }
-    if (!cur || cur === "auto") {
-      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    if (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
     }
-    setResolved(cur === "dark" ? "light" : "dark");
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
   }, [mode]);
   return /*#__PURE__*/React.createElement("span", {
     ref: ref,
-    "data-color-mode": resolved || "light",
-    "data-light-theme": "light",
-    "data-dark-theme": "dark",
-    style: { display: "inline-flex", lineHeight: 0 }
+    "data-color-mode": appearance.mode || "light",
+    "data-light-theme": appearance.lightTheme || undefined,
+    "data-dark-theme": appearance.darkTheme || undefined,
+    style: {
+      display: "inline-flex",
+      lineHeight: 0,
+      color: "var(--fgColor-default, var(--color-fg-default, currentColor))"
+    }
   }, children);
 }
 
@@ -50,35 +63,39 @@ function PandasIcon({
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
-    id: "prefix__Layer_1",
     "data-name": "Layer 1",
-    width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     viewBox: "0 0 818.63 331.21",
-    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
+    width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    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))))")),
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
   }, props, {
+    "data-datalayer-icon": "",
     style: props && props.color != null ? Object.assign({}, props.style, {
-      "--datalayer-icon-fg": props.color
+      "--datalayer-icon-color": props.color,
+      color: props.color
     }) : props && props.style
-  }), title ? /*#__PURE__*/React.createElement("title", {
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("style", null, ".prefix__cls-1{fill:#130754}")), /*#__PURE__*/React.createElement("path", {
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
     d: "M290.85 199.21c-10.27 0-20.73-4.25-27.28-12.58v45H243V120.54h18.6l.71 12.22c6.38-9.39 17.71-14.35 28.52-14.35 20.73 0 36 17.37 36 40.4s-15.25 40.41-35.98 40.4zm-6.37-65.55c-12.05 0-21.79 9.39-21.79 25.16S272.43 184 284.48 184s21.79-9.39 21.79-25.16-9.74-25.18-21.79-25.18zm119.88 63.44l-.71-12.22c-6.38 9.39-17.72 14.35-28.53 14.34-20.73 0-36-17.36-36-40.39s15.24-40.4 36-40.39c10.81 0 22.15 5 28.53 14.35l.71-12.22H423v76.53zm-22.85-63.43c-12.05 0-21.79 9.39-21.8 25.16S369.45 184 381.5 184s21.8-9.39 21.8-25.16-9.74-25.17-21.79-25.17zm113.36 63.44v-42.34c0-14.88-5.13-19.84-14.52-19.84-9.75 0-20.38 8.85-20.38 19.48v42.7h-20.56v-76.54h18.79l.89 14.18c5.14-9.75 16.65-16.3 28.35-16.3 20.37 0 28 14.18 28 33.13v45.54zm95.9.02l-.71-12.23c-6.38 9.39-17.72 14.35-28.52 14.35-20.73 0-36-17.37-36-40.4s15.24-40.39 36-40.39c10.27 0 20.72 4.26 27.28 12.58V90.83h20.56v106.3zm-22.85-63.43c-12 0-21.79 9.39-21.79 25.15S555.87 184 567.92 184s21.79-9.38 21.79-25.15-9.71-25.15-21.79-25.15zm118.68 63.44l-.71-12.22c-6.38 9.39-17.72 14.34-28.53 14.34-20.73 0-36-17.36-36-40.4s15.24-40.39 36-40.39c10.81 0 22.15 5 28.53 14.36l.71-12.23h18.6v76.53zm-22.85-63.43c-12 0-21.79 9.39-21.8 25.16S651.7 184 663.74 184s21.8-9.39 21.8-25.16-9.74-25.13-21.79-25.13zm86.98 65.92a60.16 60.16 0 01-30.65-8.69l3.37-14.17c6.2 3.72 15.59 8.51 26.93 8.51 8.15 0 13.82-2.48 13.82-8.86 0-5.49-5.85-7.44-16.3-9.92-18.78-4.08-25.51-14-25.51-24.81 0-12.05 9.39-23.38 30.12-23.38 12.58 0 23.57 5.49 26 6.91l-3.37 13.47a44.59 44.59 0 00-22.14-6.38c-8.32 0-12.4 2.83-12.4 7.44 0 5.13 5.32 7.44 13.46 9.39 20.2 4.25 28.35 13.64 28.35 23.92.04 16.47-12.01 26.57-31.68 26.57zM74.88 68.42h24.09v50.02H74.88zm0 102.75h24.09v50.02H74.88z",
-    className: "prefix__cls-1"
+    className: "prefix__cls-1",
+    fill: colored ? "#130754" : (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))))"))
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#ffca00' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#ffca00" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 81%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 53%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 81%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 53%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 81%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M74.88 133.04h24.09v23.6H74.88z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M36.19 109.55h24.09v166.27H36.19zm76.59 102.89h24.09v50.02h-24.09zm0-102.83h24.09v50.02h-24.09z",
-    className: "prefix__cls-1"
+    className: "prefix__cls-1",
+    fill: colored ? "#130754" : (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))))"))
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#e70488' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#e70488" : (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: "M112.78 174.23h24.09v23.6h-24.09z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M150.67 55.39h24.09v166.27h-24.09z",
-    className: "prefix__cls-1"
+    className: "prefix__cls-1",
+    fill: colored ? "#130754" : (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))))"))
   }));
   if (!colormode) return _svgEl;
   return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {

package/data1/esm/PauseIcon.js

@@ -11,31 +11,44 @@ function _DlIconInverseColormode({
   children
 }) {
   const ref = React.useRef(null);
-  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
   React.useLayoutEffect(() => {
-    if (typeof mode === "string") {
-      setResolved(mode);
-      return;
-    }
     if (typeof document === "undefined") return;
-    let cur = null;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
     let el = ref.current && ref.current.parentElement;
-    while (el) {
-      const m = el.getAttribute && el.getAttribute("data-color-mode");
-      if (m) { cur = m; break; }
+    while (el && (!currentMode || !lightTheme || !darkTheme)) {
+      if (el.getAttribute) {
+        currentMode = currentMode || el.getAttribute("data-color-mode");
+        lightTheme = lightTheme || el.getAttribute("data-light-theme");
+        darkTheme = darkTheme || el.getAttribute("data-dark-theme");
+      }
       el = el.parentElement;
     }
-    if (!cur || cur === "auto") {
-      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    if (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
     }
-    setResolved(cur === "dark" ? "light" : "dark");
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
   }, [mode]);
   return /*#__PURE__*/React.createElement("span", {
     ref: ref,
-    "data-color-mode": resolved || "light",
-    "data-light-theme": "light",
-    "data-dark-theme": "dark",
-    style: { display: "inline-flex", lineHeight: 0 }
+    "data-color-mode": appearance.mode || "light",
+    "data-light-theme": appearance.lightTheme || undefined,
+    "data-dark-theme": appearance.darkTheme || undefined,
+    style: {
+      display: "inline-flex",
+      lineHeight: 0,
+      color: "var(--fgColor-default, var(--color-fg-default, currentColor))"
+    }
   }, children);
 }
 
@@ -51,16 +64,18 @@ function PauseIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 32 32",
-    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
+    fill: (themed ? "var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor))" : "var(--datalayer-icon-color, currentColor)"),
     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: "M14 10h-2v12h2V10zm6 0h-2v12h2V10z"

package/data1/esm/PlayRoundIcon.js

@@ -11,31 +11,44 @@ function _DlIconInverseColormode({
   children
 }) {
   const ref = React.useRef(null);
-  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
   React.useLayoutEffect(() => {
-    if (typeof mode === "string") {
-      setResolved(mode);
-      return;
-    }
     if (typeof document === "undefined") return;
-    let cur = null;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
     let el = ref.current && ref.current.parentElement;
-    while (el) {
-      const m = el.getAttribute && el.getAttribute("data-color-mode");
-      if (m) { cur = m; break; }
+    while (el && (!currentMode || !lightTheme || !darkTheme)) {
+      if (el.getAttribute) {
+        currentMode = currentMode || el.getAttribute("data-color-mode");
+        lightTheme = lightTheme || el.getAttribute("data-light-theme");
+        darkTheme = darkTheme || el.getAttribute("data-dark-theme");
+      }
       el = el.parentElement;
     }
-    if (!cur || cur === "auto") {
-      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    if (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
     }
-    setResolved(cur === "dark" ? "light" : "dark");
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
   }, [mode]);
   return /*#__PURE__*/React.createElement("span", {
     ref: ref,
-    "data-color-mode": resolved || "light",
-    "data-light-theme": "light",
-    "data-dark-theme": "dark",
-    style: { display: "inline-flex", lineHeight: 0 }
+    "data-color-mode": appearance.mode || "light",
+    "data-light-theme": appearance.lightTheme || undefined,
+    "data-dark-theme": appearance.darkTheme || undefined,
+    style: {
+      display: "inline-flex",
+      lineHeight: 0,
+      color: "var(--fgColor-default, var(--color-fg-default, currentColor))"
+    }
   }, children);
 }
 
@@ -51,16 +64,18 @@ function PlayRoundIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
-    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
+    fill: (themed ? "var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor))" : "var(--datalayer-icon-color, currentColor)"),
     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: "M9.5 15.584V8.416a.5.5 0 01.77-.42l5.576 3.583a.5.5 0 010 .842l-5.576 3.584a.5.5 0 01-.77-.42z"

package/data1/esm/PlusBaseIcon.js

@@ -11,31 +11,44 @@ function _DlIconInverseColormode({
   children
 }) {
   const ref = React.useRef(null);
-  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
   React.useLayoutEffect(() => {
-    if (typeof mode === "string") {
-      setResolved(mode);
-      return;
-    }
     if (typeof document === "undefined") return;
-    let cur = null;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
     let el = ref.current && ref.current.parentElement;
-    while (el) {
-      const m = el.getAttribute && el.getAttribute("data-color-mode");
-      if (m) { cur = m; break; }
+    while (el && (!currentMode || !lightTheme || !darkTheme)) {
+      if (el.getAttribute) {
+        currentMode = currentMode || el.getAttribute("data-color-mode");
+        lightTheme = lightTheme || el.getAttribute("data-light-theme");
+        darkTheme = darkTheme || el.getAttribute("data-dark-theme");
+      }
       el = el.parentElement;
     }
-    if (!cur || cur === "auto") {
-      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    if (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
     }
-    setResolved(cur === "dark" ? "light" : "dark");
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
   }, [mode]);
   return /*#__PURE__*/React.createElement("span", {
     ref: ref,
-    "data-color-mode": resolved || "light",
-    "data-light-theme": "light",
-    "data-dark-theme": "dark",
-    style: { display: "inline-flex", lineHeight: 0 }
+    "data-color-mode": appearance.mode || "light",
+    "data-light-theme": appearance.lightTheme || undefined,
+    "data-dark-theme": appearance.darkTheme || undefined,
+    style: {
+      display: "inline-flex",
+      lineHeight: 0,
+      color: "var(--fgColor-default, var(--color-fg-default, currentColor))"
+    }
   }, children);
 }
 
@@ -51,16 +64,18 @@ function PlusBaseIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
-    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
+    fill: (themed ? "var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor))" : "var(--datalayer-icon-color, currentColor)"),
     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: "M24 10H14V0h-4v10H0v4h10v10h4V14h10z"

package/data1/esm/PlusCircleIcon.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);
 }
 
@@ -54,15 +67,17 @@ function PlusCircleIcon({
     clipRule: "evenodd",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     viewBox: "0 0 24 24",
-    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
+    fill: (themed ? "var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor))" : "var(--datalayer-icon-color, currentColor)"),
     "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: "M11.5 0C17.847 0 23 5.153 23 11.5S17.847 23 11.5 23 0 17.847 0 11.5 5.153 0 11.5 0zm0 1C17.295 1 22 5.705 22 11.5S17.295 22 11.5 22 1 17.295 1 11.5 5.705 1 11.5 1zm.5 10h6v1h-6v6h-1v-6H5v-1h6V5h1v6z"