@datalayer/icons-react 1.0.9 → 1.0.10

package/data1/esm/OpensearchIcon.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,25 +64,27 @@ function OpensearchIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 64 64",
-    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 ? '#00a3e0' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#00a3e0" : (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: "M61.737 23.5a2.263 2.263 0 00-2.262 2.263c0 18.618-15.094 33.712-33.712 33.712a2.263 2.263 0 100 4.525C46.88 64 64 46.88 64 25.763a2.263 2.263 0 00-2.263-2.263z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#b9d9eb' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#b9d9eb" : (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))))")),
     d: "M48.081 38c2.176-3.55 4.28-8.282 3.866-14.908C51.09 9.367 38.66-1.045 26.922.084c-4.596.441-9.314 4.187-8.895 10.897.182 2.915 1.61 4.636 3.928 5.959 2.208 1.26 5.044 2.057 8.259 2.961 3.883 1.092 8.388 2.32 11.85 4.87 4.15 3.059 6.986 6.603 6.018 13.229z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#00a3e0' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#00a3e0" : (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: "M3.919 14C1.743 17.55-.361 22.282.052 28.908.91 42.633 13.342 53.045 25.08 51.916c4.596-.441 9.314-4.187 8.895-10.896-.182-2.916-1.61-4.637-3.928-5.96-2.208-1.26-5.044-2.057-8.259-2.961-3.883-1.092-8.388-2.32-11.85-4.87C5.787 24.17 2.951 20.625 3.919 14z"
   }));
   if (!colormode) return _svgEl;

package/data1/esm/OpensearchNameIcon.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,34 +64,36 @@ function OpensearchNameIcon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 350 350",
-    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 ? '#00a3e0' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#00a3e0" : (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: "M271.162 100.577a7.23 7.23 0 00-7.23 7.23c0 59.495-48.23 107.726-107.726 107.726a7.23 7.23 0 100 14.46c67.482 0 122.186-54.705 122.186-122.186a7.23 7.23 0 00-7.23-7.23z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#b9d9eb' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#b9d9eb" : (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))))")),
     d: "M227.525 146.91c6.953-11.341 13.677-26.465 12.354-47.637-2.74-43.857-42.463-77.128-79.972-73.522-14.685 1.412-29.762 13.38-28.423 34.82.582 9.317 5.142 14.816 12.553 19.043 7.054 4.024 16.116 6.573 26.39 9.463 12.409 3.49 26.803 7.41 37.867 15.563 13.259 9.772 22.323 21.099 19.231 42.27z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#00a3e0' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#00a3e0" : (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: "M86.405 70.22c-6.953 11.342-13.677 26.465-12.354 47.637 2.74 43.857 42.463 77.128 79.972 73.523 14.684-1.412 29.762-13.381 28.422-34.82-.582-9.317-5.142-14.816-12.553-19.044-7.053-4.024-16.116-6.573-26.389-9.462-12.41-3.49-26.804-7.41-37.867-15.564-13.26-9.771-22.324-21.098-19.231-42.27z"
   }), /*#__PURE__*/React.createElement("g", {
     fillRule: "evenodd",
     clipRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#b9d9eb' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#b9d9eb" : (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))))")),
     d: "M330.21 280.597v25.54h9.993v-27.76c0-5.116-1-8.981-3-11.603-2-2.647-5.015-3.943-8.937-3.943-4.255 0-7.665 2.488-9.716 6.662h-.556c.152-2.155.29-3.39.39-4.291.102-.93.166-1.506.166-2.371v-16.102h-9.994v59.408h10.549v-20.543c0-4.607.154-8.015 1.103-10.459.948-2.469 2.601-3.703 4.96-3.703 3.152 0 5.041 2.93 5.041 9.165zM185.133 303.06c2.7-2.792 4.051-6.813 4.051-12.063 0-3.279-.74-6.198-2.22-8.76-1.454-2.56-4.037-5.07-7.75-7.53-2.753-1.792-4.688-3.393-5.805-4.802-1.09-1.408-1.635-3.06-1.635-4.955 0-1.921.454-3.432 1.363-4.534.935-1.127 2.259-1.69 3.973-1.69 1.558 0 3.012.282 4.362.845a32.882 32.882 0 013.934 1.92l3.505-8.374c-4.024-2.408-8.217-3.612-12.58-3.612-4.57 0-8.218 1.41-10.945 4.226-2.7 2.818-4.05 6.634-4.05 11.45 0 2.509.337 4.712 1.012 6.607a18.031 18.031 0 002.922 5.148c1.271 1.511 3.128 3.099 5.569 4.764 2.805 1.895 4.817 3.624 6.037 5.186 1.22 1.537 1.831 3.24 1.831 5.11 0 1.895-.52 3.393-1.558 4.495-1.012 1.101-2.532 1.652-4.557 1.652-3.558 0-7.465-1.37-11.724-4.111v10.334c3.48 1.921 7.699 2.882 12.659 2.882 5.062 0 8.932-1.396 11.606-4.188zm10.907-1.504c3.116 3.795 7.364 5.692 12.745 5.692 4.61 0 8.562-.987 11.857-2.962v-8.421c-3.5 2.076-6.925 3.115-10.273 3.115-2.626 0-4.686-.923-6.18-2.77-1.493-1.87-2.157-4.575-2.235-8.395h20.543v-5.602c0-6.128-1.352-10.884-4.055-14.268-2.704-3.41-6.399-5.114-11.086-5.114-5.021 0-8.934 1.987-11.741 5.96-2.807 3.974-4.21 9.5-4.21 16.575 0 6.973 1.544 12.37 4.635 16.19zm7.608-28.496c.953-1.564 2.164-2.346 3.632-2.346 1.57 0 2.806.808 3.707 2.423.9 1.615 1.465 4.333 1.516 7.46h-10.55c.155-3.256.743-5.999 1.695-7.537zm43.833 33.077l-1.665-5.552h-.555c-1.53 2.508-3.004 4.295-4.638 5.242-1.634.947-3.697 1.42-6.187 1.42-3.191 0-5.707-1.177-7.55-3.531-1.815-2.355-2.724-5.63-2.724-9.828 0-4.504 1.245-7.844 3.736-10.02 2.516-2.2 6.265-3.416 11.246-3.647l5.759-.23v-3.071c0-3.993-1.751-5.99-5.253-5.99-2.594 0-5.578.999-8.95 2.995l-3.58-7.063c4.306-2.688 8.917-4.031 13.976-4.031 4.592 0 8.153 1.305 10.54 3.915 2.412 2.585 3.618 6.258 3.618 11.018v28.373zm-8.804-6.874c1.894 0 3.399-.832 4.514-2.496 1.141-1.689 1.712-3.928 1.712-6.718v-3.609l-3.19.154c-2.361.128-4.1.793-5.215 1.996-1.09 1.203-1.634 2.995-1.634 5.375 0 3.532 1.271 5.298 3.813 5.298zm42.117-35.6c-1.188-.383-2.957-.832-4.195-.832-1.744 0-3.275.574-4.59 1.723-1.314 1.15-2.317 2.258-3.43 4.94h-.555l-1.665-5.553h-7.773v42.196h10.508V283.93c0-3.729.236-6.134 1.55-8.075 1.316-1.966 3.199-2.95 5.65-2.95 1.139 0 2.127.22 2.835.476zm15.546 43.585c-5.06 0-8.934-1.69-11.578-5.408-2.645-3.717-3.968-9.178-3.968-16.382 0-7.538 1.246-13.165 3.738-16.883 2.518-3.717 6.275-5.744 11.514-5.744 1.576 0 3.35.399 5.079.86 1.729.462 3.835 1.044 5.209 1.916l-3.455 8.045c-2.11-1.257-3.98-1.885-5.606-1.885-2.162 0-3.726 1.141-4.693 3.423-.94 2.256-1.41 5.653-1.41 10.19 0 4.436.47 7.756 1.41 9.961.942 2.18 2.48 3.269 4.616 3.269 2.543 0 5.2-.898 7.972-2.692v8.999c-2.67 1.666-5.599 2.33-8.828 2.33z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#00a3e0' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#00a3e0" : (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: "M47.358 299.766c3.497-4.988 5.245-12.124 5.245-21.409 0-9.284-1.736-16.408-5.206-21.37-3.471-4.988-8.46-7.482-14.963-7.482-6.582 0-11.62 2.482-15.117 7.444-3.497 4.936-5.245 12.047-5.245 21.332 0 9.361 1.748 16.536 5.245 21.523 3.496 4.963 8.51 7.444 15.04 7.444 6.504 0 11.504-2.494 15.001-7.482zm-22.136-6.79c-1.62-3.352-2.43-8.224-2.43-14.619 0-6.42.81-11.292 2.43-14.617 1.62-3.351 4.024-5.026 7.212-5.026 6.273 0 9.41 6.547 9.41 19.643s-3.163 19.644-9.487 19.644c-3.137 0-5.515-1.675-7.135-5.026zm44.799 13.159c1.424.823 2.958 1.113 4.79 1.113 3.92 0 7.107-1.859 9.372-5.818 2.265-3.959 3.398-9.421 3.398-16.388 0-7.07-1.095-12.532-3.283-16.389-2.19-3.881-5.217-5.822-9.086-5.822-4.02 0-7.172 2.395-9.284 6.662h-.555l-1.666-5.552h-7.773v61.629h9.994v-18.322c0-.72-.148-3.167-.555-6.663h.555c.833 2.499 2.693 4.702 4.093 5.55zm-2.559-31.775c.892-1.876 2.329-2.815 4.314-2.815 1.858 0 3.22 1.106 4.086 3.317.89 2.21 1.335 5.553 1.335 10.026 0 9.1-1.78 13.65-5.344 13.65-2.062 0-3.538-1.08-4.428-3.239-.891-2.16-1.336-5.604-1.336-10.334v-1.35c.05-4.319.508-7.404 1.373-9.255zm39.72 32.888c-5.38 0-9.63-1.897-12.745-5.692-3.09-3.82-4.635-9.217-4.635-16.19 0-7.076 1.403-12.6 4.21-16.575 2.807-3.973 6.72-5.96 11.741-5.96 4.686 0 8.382 1.705 11.086 5.114 2.703 3.384 4.055 8.14 4.055 14.268v5.602H100.35c.078 3.82.742 6.524 2.235 8.396 1.494 1.846 3.554 2.769 6.18 2.769 3.348 0 6.772-1.039 10.273-3.115v8.421c-3.295 1.975-7.247 2.962-11.857 2.962zm-1.505-36.534c-1.468 0-2.679.782-3.632 2.346-.952 1.538-1.54 4.281-1.694 7.537H110.9c-.051-3.127-.615-5.845-1.516-7.46-.901-1.615-2.137-2.423-3.707-2.423zm40.201 9.883v25.54h9.994v-27.54c0-5.152-.974-9.068-2.922-11.747-1.923-2.68-4.833-4.02-8.73-4.02-2.306 0-4.319.567-6.037 1.701-1.717 1.108-3.041 2.978-3.964 4.962h-.555l-1.388-5.552h-8.05v42.196h10.548v-20.265c0-5.23.192-8.794 1.218-10.984 1.025-2.216 2.64-3.324 4.845-3.324 1.666 0 2.872.799 3.615 2.396.744 1.598 1.426 3.52 1.426 6.637z"
   })));
   if (!colormode) return _svgEl;

package/data1/esm/OrganisationIcon.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,17 +63,19 @@ function OrganisationIcon({
 }, 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)"),
     "aria-hidden": "true",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     viewBox: "0 0 20 20",
     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: "M5.208 10a.625.625 0 100 1.25h.417a.625.625 0 000-1.25h-.417zm-.625-2.292a.625.625 0 01.625-.625h.417a.625.625 0 010 1.25h-.417a.625.625 0 01-.625-.625zm.625-3.541a.625.625 0 000 1.25h.417a.625.625 0 100-1.25h-.417zM7.5 10.625A.625.625 0 018.125 10h.417a.625.625 0 110 1.25h-.417a.625.625 0 01-.625-.625zm.625-3.542a.625.625 0 000 1.25h.417a.625.625 0 000-1.25h-.417zM7.5 4.792a.625.625 0 01.625-.625h.417a.625.625 0 010 1.25h-.417a.625.625 0 01-.625-.625zM11.042 10a.625.625 0 100 1.25h.416a.625.625 0 000-1.25h-.416zm-.625-2.292a.625.625 0 01.625-.625h.416a.625.625 0 110 1.25h-.416a.625.625 0 01-.625-.625zm.625-3.541a.625.625 0 100 1.25h.416a.625.625 0 100-1.25h-.416z"

package/data1/esm/OutputIcon.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,17 +63,19 @@ function OutputIcon({
 }, 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",

package/data1/esm/OvhCloudIcon.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,29 +63,23 @@ function OvhCloudIcon({
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
-    id: "prefix__Layer_1",
     viewBox: "0 0 350 350",
+    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"
-  })), /*#__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: 4.477,
     d: "M327.457 76.043a179.528 179.528 0 01-16.744 199.182h-95.987l29.548-52.246H205.19l46.068-81.169h39.308l36.89-65.677zM137.9 275.225H40.033a177.245 177.245 0 01-16.968-199.63l63.484 110.27L156.524 64h102.972L137.945 275.136z"
   }));
   if (!colormode) return _svgEl;