@datalayer/icons-react 1.0.8 → 1.0.10

package/data1/Iso27001SensibaIcon.js

@@ -11,31 +11,44 @@ function _DlIconInverseColormode({
   children
 }) {
   const ref = React.useRef(null);
-  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
   React.useLayoutEffect(() => {
-    if (typeof mode === "string") {
-      setResolved(mode);
-      return;
-    }
     if (typeof document === "undefined") return;
-    let cur = null;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
     let el = ref.current && ref.current.parentElement;
-    while (el) {
-      const m = el.getAttribute && el.getAttribute("data-color-mode");
-      if (m) { cur = m; break; }
+    while (el && (!currentMode || !lightTheme || !darkTheme)) {
+      if (el.getAttribute) {
+        currentMode = currentMode || el.getAttribute("data-color-mode");
+        lightTheme = lightTheme || el.getAttribute("data-light-theme");
+        darkTheme = darkTheme || el.getAttribute("data-dark-theme");
+      }
       el = el.parentElement;
     }
-    if (!cur || cur === "auto") {
-      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    if (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
     }
-    setResolved(cur === "dark" ? "light" : "dark");
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
   }, [mode]);
   return /*#__PURE__*/React.createElement("span", {
     ref: ref,
-    "data-color-mode": resolved || "light",
-    "data-light-theme": "light",
-    "data-dark-theme": "dark",
-    style: { display: "inline-flex", lineHeight: 0 }
+    "data-color-mode": appearance.mode || "light",
+    "data-light-theme": appearance.lightTheme || undefined,
+    "data-dark-theme": appearance.darkTheme || undefined,
+    style: {
+      display: "inline-flex",
+      lineHeight: 0,
+      color: "var(--fgColor-default, var(--color-fg-default, currentColor))"
+    }
   }, children);
 }
 
@@ -45,30 +58,32 @@ function Iso27001SensibaIcon({
   size,
   colored,
   themed,
-  colormoded,
+  colormode,
   ...props
 }, svgRef) {
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
-    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: "none",
     "aria-labelledby": titleId,
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     viewBox: "0 0 360 360",
     "aria-hidden": "true",
     ref: svgRef
   }, 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("rect", {
     width: 252,
     height: 320,
     x: 54,
     y: 20,
-    fill: colored ? '#FFF' : 'white',
-    stroke: "#1F2937",
+    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))))")),
+    stroke: colored ? "#1F2937" : (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))))")),
     strokeWidth: 2,
     rx: 14
   }), /*#__PURE__*/React.createElement("rect", {
@@ -76,34 +91,34 @@ function Iso27001SensibaIcon({
     height: 64,
     x: 54,
     y: 20,
-    fill: colored ? '#F6F7F9' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#F6F7F9" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 86%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 48%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 86%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 48%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 86%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     rx: 14
   }), /*#__PURE__*/React.createElement("path", {
-    stroke: "#D1D5DB",
+    stroke: colored ? "#D1D5DB" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M54 70h252"
   }), /*#__PURE__*/React.createElement("g", {
     transform: "translate(84 38)"
   }, /*#__PURE__*/React.createElement("rect", {
     width: 10,
     height: 18,
-    fill: colored ? '#D97706' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#D97706" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 61%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     rx: 2
   }), /*#__PURE__*/React.createElement("rect", {
     width: 10,
     height: 18,
     x: 14,
-    fill: colored ? '#F59E0B' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#F59E0B" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     rx: 2
   }), /*#__PURE__*/React.createElement("rect", {
     width: 10,
     height: 18,
     x: 28,
-    fill: colored ? '#FCD34D' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#FCD34D" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     rx: 2
   })), /*#__PURE__*/React.createElement("text", {
     x: 130,
     y: 50,
-    fill: colored ? '#111827' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#111827" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 39%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 95%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 39%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 95%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 39%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     fontFamily: "Arial, Helvetica, sans-serif",
     fontSize: 18,
     fontWeight: 700
@@ -112,17 +127,17 @@ function Iso27001SensibaIcon({
     height: 170,
     x: 74,
     y: 100,
-    fill: colored ? '#FFF' : 'white',
-    stroke: "#111827",
+    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))))")),
+    stroke: colored ? "#111827" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 39%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 95%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 39%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 95%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 39%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     strokeWidth: 1.5,
     rx: 10
   }), /*#__PURE__*/React.createElement("path", {
-    stroke: "#E5E7EB",
+    stroke: colored ? "#E5E7EB" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 54%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 80%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     d: "M74 170h212M74 214h212"
   }), /*#__PURE__*/React.createElement("text", {
     x: 180,
     y: 134,
-    fill: colored ? '#111827' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#111827" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 39%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 95%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 39%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 95%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 39%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     fontFamily: "Arial, Helvetica, sans-serif",
     fontSize: 23,
     fontWeight: 700,
@@ -130,7 +145,7 @@ function Iso27001SensibaIcon({
   }, "ISO/IEC"), /*#__PURE__*/React.createElement("text", {
     x: 180,
     y: 162,
-    fill: colored ? '#111827' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#111827" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 39%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 95%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 39%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 95%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 39%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     fontFamily: "Arial, Helvetica, sans-serif",
     fontSize: 34,
     fontWeight: 800,
@@ -138,7 +153,7 @@ function Iso27001SensibaIcon({
   }, "27001"), /*#__PURE__*/React.createElement("text", {
     x: 180,
     y: 188,
-    fill: colored ? '#374151' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#374151" : (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))))")),
     fontFamily: "Arial, Helvetica, sans-serif",
     fontSize: 16,
     fontWeight: 700,
@@ -146,7 +161,7 @@ function Iso27001SensibaIcon({
   }, ":2022"), /*#__PURE__*/React.createElement("text", {
     x: 180,
     y: 207,
-    fill: colored ? '#4B5563' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#4B5563" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     fontFamily: "Arial, Helvetica, sans-serif",
     fontSize: 10,
     fontWeight: 700,
@@ -154,7 +169,7 @@ function Iso27001SensibaIcon({
   }, "CERTIFIED"), /*#__PURE__*/React.createElement("text", {
     x: 180,
     y: 229,
-    fill: colored ? '#6B7280' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#6B7280" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 48%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 86%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 48%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 86%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 48%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     fontFamily: "Arial, Helvetica, sans-serif",
     fontSize: 9,
     fontWeight: 600,
@@ -162,7 +177,7 @@ function Iso27001SensibaIcon({
   }, "INFORMATION SECURITY"), /*#__PURE__*/React.createElement("text", {
     x: 180,
     y: 243,
-    fill: colored ? '#6B7280' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#6B7280" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 48%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 86%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 48%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 86%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 48%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     fontFamily: "Arial, Helvetica, sans-serif",
     fontSize: 9,
     fontWeight: 600,
@@ -171,15 +186,15 @@ function Iso27001SensibaIcon({
     transform: "translate(180 294)"
   }, /*#__PURE__*/React.createElement("circle", {
     r: 31,
-    fill: colored ? '#F9FAFB' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    stroke: "#1F2937",
+    fill: colored ? "#F9FAFB" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    stroke: colored ? "#1F2937" : (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))))")),
     strokeWidth: 1.5
   }), /*#__PURE__*/React.createElement("circle", {
     r: 23,
-    fill: colored ? '#FFF' : 'white',
-    stroke: "#9CA3AF"
+    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))))")),
+    stroke: colored ? "#9CA3AF" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 58%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 76%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 58%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 76%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 58%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
   }), /*#__PURE__*/React.createElement("path", {
-    stroke: "#111827",
+    stroke: colored ? "#111827" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 39%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 95%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 39%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 95%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 39%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 3,
@@ -187,15 +202,15 @@ function Iso27001SensibaIcon({
   })), /*#__PURE__*/React.createElement("text", {
     x: 180,
     y: 336,
-    fill: colored ? '#6B7280' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    fill: colored ? "#6B7280" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 48%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 86%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 48%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 86%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 48%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     fontFamily: "Arial, Helvetica, sans-serif",
     fontSize: 8,
     fontWeight: 600,
     textAnchor: "middle"
   }, "CERTIFICATION BODY: SENSIBA LLP"));
-  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(Iso27001SensibaIcon);

package/data1/Iso42001Icon.d.ts

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

package/data1/Iso42001Icon.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 Iso42001Icon({
   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 841.89 595.28",
-    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: "M421.25 122.51c94.81.09 171.59 77.02 171.5 171.83-.09 94.81-77.02 171.59-171.83 171.5-94.69-.09-171.43-76.84-171.5-171.54-.09-94.79 76.67-171.7 171.46-171.79h.37zm-57.71 259.81a171.916 171.916 0 01115.1-.02l5.35-20.13c2.47 0 4.73-.06 7.01.02 2.35-.19 4.71-.06 7.02.41-1.61 8.35-3.64 16.62-6.1 24.76 6.34 3.5 12.64 6.67 18.63 10.35 5.99 3.67 11.66 7.81 17.45 11.74 69.6-63.78 65.26-172.26-.27-230.7a178.517 178.517 0 01-35.9 21.94c2.43 8.61 4.75 16.86 6.28 25.37h-14.25c-.87-3.43-1.66-6.71-2.53-9.96-.75-3.4-1.74-6.73-2.98-9.98a171.626 171.626 0 01-114.81-.06l-5.37 20.19c-2.47 0-4.75.01-7.02 0-2.32-.02-4.64-.06-7.4-.1l6.47-25.53a175.227 175.227 0 01-35.78-21.92c-69.16 63.07-66.25 171.54 0 230.89a180.15 180.15 0 0135.96-21.98c-2.57-8.33-4.7-16.8-6.37-25.35h14.21l5.3 20.06zm110.17-189.6c-.08-.56-.2-1.11-.35-1.66a135.172 135.172 0 00-17.75-32.93 62.875 62.875 0 00-17.72-16.6 30.742 30.742 0 00-32.02-.88 56.943 56.943 0 00-16.69 14.2 121.368 121.368 0 00-17.86 30.12c-1.05 2.43-2.01 4.9-3.13 7.64a156.625 156.625 0 00105.52.11zM368.36 395.63c.24.82.34 1.3.51 1.74a137.19 137.19 0 0016.19 30.76 71.745 71.745 0 0015.85 16.45c12.87 9.39 26.83 9.51 39.83.36 4.45-3.18 8.47-6.93 11.96-11.14a127.888 127.888 0 0020.71-36.66c.14-.51.23-1.03.28-1.55a156.986 156.986 0 00-105.33.04zm92.88 50.5a150.74 150.74 0 0055.52-27.01 151.317 151.317 0 00-29.2-17.8c-3.94 8.03-7.56 15.86-11.58 23.48-4.15 7.6-9.09 14.75-14.74 21.33zm-80.15.06c-5.7-6.5-10.67-13.62-14.81-21.22-4.1-7.68-7.71-15.61-11.65-23.66a151.708 151.708 0 00-29.22 17.81 151.719 151.719 0 0055.68 27.07zm105.95-259.22c7.59-2.56 26.63-14.36 29.28-18.12a150.42 150.42 0 00-55.2-26.71c11.57 13.25 19.5 28.5 25.92 44.83zm-106.23-44.72a150.225 150.225 0 00-55.24 26.83c5.88 5.47 24.08 16.39 29.64 17.77 5.96-16.2 14.61-31.28 25.6-44.6zm131.74 371.27c.03 5.2-1.08 10.34-3.25 15.07a26.331 26.331 0 01-22.98 15.55c-3.57.33-7.17.04-10.63-.87a26.108 26.108 0 01-18.64-17.67 37.996 37.996 0 01-.12-24.3 26.686 26.686 0 0123.98-18.89c5.97-.65 12 .55 17.27 3.43a26.994 26.994 0 0113.33 18.84c.58 2.89.71 5.89 1.04 8.84zm-37.22-.33l.5.04c0 2.28-.15 4.57.03 6.84.03 3.98.88 7.9 2.49 11.54a5.855 5.855 0 005.18 3.45 5.6 5.6 0 005.51-3.36c.8-1.59 1.38-3.28 1.72-5.03a80.07 80.07 0 00.44-23.99c-.35-2.54-1.02-5.04-1.98-7.42a5.412 5.412 0 00-5.23-3.72 5.945 5.945 0 00-5.68 3.59c-.67 1.22-1.13 2.54-1.36 3.91-.64 4.71-1.1 9.43-1.62 14.15zm-25.77.31c.33 5.28-.71 10.55-3.01 15.31a26.376 26.376 0 01-23.72 15.37c-4.57.34-9.16-.39-13.41-2.12a26.11 26.11 0 01-15.01-16.4 38.24 38.24 0 01-.24-24.02c3.22-11.17 13.31-18.96 24.93-19.26 9.09-.45 17.07 2.04 23.27 9.06a29.677 29.677 0 017.15 17.61c.14 1.46.04 2.96.04 4.45zm-20.16.54c-.27-4.2-.28-7.4-.73-10.52-.38-2.74-1.04-5.44-1.97-8.04a5.59 5.59 0 00-5.4-3.98 5.825 5.825 0 00-5.76 3.95c-.91 1.98-1.5 4.1-1.74 6.26-.37 6.42-.59 12.87-.5 19.3-.07 3.69.77 7.35 2.43 10.65a5.832 5.832 0 0010.54.26c.95-1.63 1.58-3.42 1.85-5.29.61-4.52.93-9.06 1.26-12.59h.02z"
@@ -75,9 +90,9 @@ function Iso42001Icon({
   }), /*#__PURE__*/React.createElement("path", {
     d: "M323.34 84.05l2.75 5.21-10.54 5.7 5.74 11.12-8.2 4.38-14.29-27.2 20.66-10.84 3.06 5.55-12.3 6.58 2.5 4.98 10.62-5.48zm301.58 302.98l-11.75-5.14 3.7-8.48 11.9 5.05 21.06-3.73-4.11 9.33-12.13 1.66 7.03 9.98-4.06 9.43-11.64-18.1zM493.55 93.86l-8.75-2.98 7.34-21.72c-2.74-1.83-6.02-2.1-9.04-3.69l2.36-6.8 27.25 9.27-2.36 6.93-9.25-3-7.55 21.99zm133.4 248.37l22.49 5.88 2.62-9.35 7.05 1.85-7.25 27.75-7.15-1.74 2.4-9.43-22.46-5.99 2.3-8.97zm-437.164-97.745a2.73 2.73 0 00.242-.402 2.73 2.73 0 013.267-2.052c.088.022.177.044.26.073a3.513 3.513 0 012.924 3.596 7.873 7.873 0 01-.34 1.78 3.718 3.718 0 01-4.183 2.705 7.343 7.343 0 01-5.79-3.887 11.614 11.614 0 01-1.16-7.55 14.266 14.266 0 013.909-8.431 7.714 7.714 0 019.305-1.457 6.515 6.515 0 013.232 4.043c.59 1.993.916 4.051.983 6.127.089 1.508.122 3.025.303 4.524a5.519 5.519 0 001.585 3.673 8.02 8.02 0 00-.047-.871 10.917 10.917 0 011.11-7.403c.4-.718.759-1.459 1.081-2.213.67-1.641.273-2.459-1.427-3.088-.242-.09-.489-.164-.89-.302a27.83 27.83 0 01.974-3.918c2.323.406 4.517.94 6.28 2.557 1.652 1.508 1.826 3.458 1.512 5.5a16.055 16.055 0 01-2.083 5.55c-.64 1.124-1.323 2.233-1.877 3.401-.545 1.153-1.007 2.37.144 3.452l-1.017 4.171a10.425 10.425 0 01-5.275-2.383 13.553 13.553 0 01-3.694-5.714c-.631-1.653-1.143-3.354-1.72-5.026a16.847 16.847 0 00-.7-1.814 4.34 4.34 0 00-3.13-2.482 3.164 3.164 0 00-3.347 1.172 5.837 5.837 0 00-.43 6.669zm43.484-87.545c-.59 2.96-1.08 5.48-1.61 7.99-.17.51-.4 1.01-.67 1.48l-5.3-3.88c1.47-4.51 2.08-8.98-.41-13.37l4.13-5.63 25.11 18.51-4.94 6.82-16.31-11.92zm45.02-20.87l-6.41 6.86-21.12-22.21 6.47-6.73 21.06 22.08zm237.38-32.65l-8.4-4.04 13.09-27.72 8.48 3.94-13.17 27.82zM224.92 372.43l3.68 8.57-28.17 12.17-3.69-8.56 28.18-12.18zm404.99-44.76l1.33-9.01c10.12 1.22 20.02 2.74 30.27 4.28l-1.25 9.05c-10.23-1.26-20.17-2.72-30.35-4.32zm-75.67-33.34a51.5 51.5 0 01-5.18 23.08 40.334 40.334 0 01-21.18 19.2 62.83 62.83 0 01-20.88 4.37c-8.34.66-16.73-.25-24.73-2.67-17.31-5.55-27.68-17.22-30.32-35.4a57.068 57.068 0 011.55-24.79 40.208 40.208 0 0124.61-26.62 67.898 67.898 0 0132.22-3.95c6.26.42 12.4 1.91 18.16 4.39a40.659 40.659 0 0124.88 32.9c.46 3.14.59 6.33.87 9.49zm-34 0c-.28-4.25-.42-8.53-.89-12.76-.35-4.77-1.64-9.41-3.8-13.68a13.615 13.615 0 00-12.64-7.49 13.865 13.865 0 00-12.99 7.45c-1.76 3.35-2.9 6.98-3.38 10.73-1.4 9.24-1.57 18.62-.5 27.9.33 4.26 1.35 8.45 3.02 12.38 3.22 7.53 11.95 11.03 19.48 7.81a14.9 14.9 0 007.55-7.23 31.27 31.27 0 002.13-6.17 89.358 89.358 0 002.02-18.94zm-95.85-14.43c-.59-1.63-1.04-2.94-1.52-4.24-3.26-8.76-9.82-13.22-18.88-14.19-3.45-.53-6.98-.34-10.35.56-2.21.64-4.2 1.86-5.77 3.55-3.23 3.57-2.88 7.59 1.22 10.09 2.39 1.41 4.97 2.48 7.65 3.18 5.64 1.55 11.41 2.67 17.07 4.19a63.99 63.99 0 0118.62 7.77 22.699 22.699 0 0110.66 17.71 26.773 26.773 0 01-5.72 20.65 30.294 30.294 0 01-13.43 9.08 55.576 55.576 0 01-21.72 2.76 65.26 65.26 0 01-24.92-6.44c-.34-.16-.72-.26-1.3-.46l-3.32 4.67h-11.72v-32.41c2.02-.31 4.08-.39 6.12-.25 1.98-.05 3.96-.01 6.19-.01.41 1.07.77 2.07 1.18 3.05 4.08 9.72 10.93 16.23 21.5 18.26 3.51.81 7.16.73 10.63-.23 1.9-.56 3.67-1.46 5.24-2.67a6.753 6.753 0 00-.01-11 30.887 30.887 0 00-8.38-4.38c-5.81-2.02-11.8-3.5-17.66-5.37-4.09-1.23-8.11-2.68-12.04-4.34-7.47-3.32-12.94-8.72-14.6-16.93-2.65-13.11 2.86-24.51 14.88-30.85 5.15-2.63 10.82-4.1 16.59-4.33a64.79 64.79 0 0131.91 5.78c.36.17.74.29 1.39.54l2.43-4.06h12.34v30.25c-2.29.02-4.63.06-6.96.07-2.4.01-4.78 0-7.32 0zm-73.91 46.17v12.19h-52.13v-12.19c1.61 0 3.18.03 4.73-.01 1.09 0 2.18-.09 3.26-.27a3.532 3.532 0 003.16-3.11c.24-1.27.4-2.55.46-3.83.03-16.5.03-33.01 0-49.51-.01-5.84-1.4-7.17-7.24-7.27-1.38-.02-2.77 0-4.37 0v-12.13h51.77c.68 3.94.74 7.97.17 11.93-.72.07-1.48.16-2.25.21-.77.05-1.59 0-2.39.02-5.32.19-6.58 1.33-6.58 6.58-.05 16.9-.05 33.8 0 50.7.02 5.42 1.29 6.59 6.74 6.69 1.48.02 2.95 0 4.67 0z"
   }));
-  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(Iso42001Icon);

package/data1/Iso42001SensibaIcon.d.ts

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