@datalayer/icons-react 1.0.9 → 1.0.10

package/data1/IdentityCard2Icon.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,22 +64,22 @@ function IdentityCard2Icon({
   const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 64.96 46.71",
-    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
+    fill: (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-hidden": "true",
     ref: svgRef,
     "aria-labelledby": titleId
   }, props, {
+    "data-datalayer-icon": "",
     style: props && props.color != null ? Object.assign({}, props.style, {
-      "--datalayer-icon-fg": props.color
+      "--datalayer-icon-color": props.color,
+      color: props.color
     }) : props && props.style
-  }), title ? /*#__PURE__*/React.createElement("title", {
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("style", null, ".prefix__cls-1{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke:#386a99;stroke-width:2px}")), /*#__PURE__*/React.createElement("g", {
-    id: "prefix__Layer_2",
+  }, title) : null, /*#__PURE__*/React.createElement("g", {
     "data-name": "Layer 2"
   }, /*#__PURE__*/React.createElement("g", {
-    id: "prefix__Layer_1-2",
     "data-name": "Layer 1"
   }, /*#__PURE__*/React.createElement("rect", {
     width: 44.71,
@@ -76,28 +89,48 @@ function IdentityCard2Icon({
     className: "prefix__cls-1",
     rx: 6.32,
     ry: 6.32,
-    transform: "rotate(-90 32.485 23.355)"
+    transform: "rotate(-90 32.485 23.355)",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: colored ? "#386a99" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    strokeWidth: 2
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    stroke: "#386a99",
+    fill: "none",
+    stroke: colored ? "#386a99" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2.12,
     d: "M8.64 37.41V9.81h24.22v27.6z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M39.95 27.49h17.11m-17.11 7.76h17.11",
-    className: "prefix__cls-1"
+    className: "prefix__cls-1",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: colored ? "#386a99" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    strokeWidth: 2
   }), /*#__PURE__*/React.createElement("circle", {
     cx: 20.76,
     cy: 19.51,
     r: 4.74,
-    className: "prefix__cls-1"
+    className: "prefix__cls-1",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: colored ? "#386a99" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    strokeWidth: 2
   }), /*#__PURE__*/React.createElement("path", {
     d: "M12.5 36.15v-4.6a6.28 6.28 0 016.26-6.26h4A6.28 6.28 0 0129 31.55v4.6",
-    className: "prefix__cls-1"
+    className: "prefix__cls-1",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: colored ? "#386a99" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 85%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 49%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    strokeWidth: 2
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
-    stroke: "#6cc04a",
+    fill: "none",
+    stroke: colored ? "#6cc04a" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,

package/data1/IpyWidgetsIcon.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 IpyWidgetsIcon({
 }, 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/Iso27001Icon.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 Iso27001Icon({
   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.02zm-148.93-17.73c.33.14.68.24 1.03.32a6.274 6.274 0 016.36 6.18c0 .21 0 .42-.02.62a8.076 8.076 0 01-6.44 8.49c-1.37.23-2.77.3-4.16.21-4.38-.1-7.97-3.5-8.32-7.87a16.88 16.88 0 015.53-15.05c4.5-4 10.22-6.36 16.23-6.7 7.25-1 14.63.46 20.96 4.14 6.99 4 10.41 12.21 8.32 19.99a14.978 14.978 0 01-7.27 9.42c-4.13 2.4-8.55 4.25-13.15 5.53-3.32 1.02-6.69 1.92-9.94 3.14-3.05.86-5.67 2.84-7.34 5.54.65-.16 1.29-.35 1.92-.58a25.096 25.096 0 0117.14-1.55c1.82.5 3.67.9 5.53 1.21 4.03.6 5.64-.73 6.12-4.87.07-.59.1-1.18.19-2.15 3.09-.21 6.19-.2 9.28.04.36 5.41.36 10.6-2.29 15.42-2.47 4.51-6.73 5.96-11.46 6.37-4.57.3-9.16-.25-13.53-1.63-2.86-.82-5.71-1.74-8.62-2.34-2.87-.59-5.84-.96-7.63 2.2h-9.87c-.43-4.5.41-9.04 2.45-13.08 2.56-4.64 6.26-8.55 10.75-11.36 3.35-2.31 6.87-4.38 10.29-6.58 1.27-.78 2.5-1.63 3.67-2.55a9.975 9.975 0 003.84-8.34c.06-2.97-1.7-5.68-4.44-6.84a13.417 13.417 0 00-15.13 2.67zm64.02-12.29c.12 1.91.21 3.43.32 5.33.39-.31.77-.66 1.11-1.03 3.68-5.03 8.82-6.21 14.56-5.21 2.9.64 5.76 1.47 8.56 2.47 1.7.52 3.39 1.11 5.07 1.7 1.39.56 2.97.23 4.03-.82l1-2.32h7.52c.53 1.64.45 3.41-.23 4.99-1.75 3.99-3.48 8-5.52 11.84-2.61 4.9-5.61 9.6-8.28 14.47-3.8 7.36-5.81 15.5-5.89 23.78-.04.97-.1 1.94-.16 3.08h-19.23c-.47-2.23-.54-4.53-.21-6.79.57-8.52 4.26-16.53 10.38-22.49 4.04-3.97 8.24-7.77 12.35-11.66.92-.88 1.77-1.83 3.16-3.27-1.18.27-1.68.33-2.15.49a25.858 25.858 0 01-12.66.54c-2.24-.43-4.5-.74-6.77-.91a5.683 5.683 0 00-6.33 4.96c0 .03-.01.06-.01.08-.28 1.46-.46 2.93-.54 4.42-.09.96-.09 1.94-.15 3.06h-10.3v-26.59c1.71-.04 3.36-.1 5.01-.13 1.66 0 3.36.01 5.36.01zm183.52 7.6c5.53-.88 11.03-1.71 13.84-7.47h14.92c.05 1.1.12 2.15.13 3.21.01 13.5.01 27.01 0 40.51 0 .7-.02 1.39 0 2.09.1 3.04 1.04 4.05 4.14 4.24 1.47.09 2.95.02 4.58.02.32 2.59.4 5.2.25 7.8-2.37.59-32.92.79-37.81.27v-7.71c2.74-.88 5.92.44 9.02-1.59.4-1.06.66-2.16.78-3.28.08-9.43.05-18.87.04-28.3-.06-.49-.16-.97-.31-1.44H528l.01-8.35zM419.26 50.5l4.38 17.87.64-.01 4.85-17.58h11.98v30.38h-7.43V59.65c-2.7 6.95-4.33 14.19-6.54 21.41h-6.84l-5.29-21.86-.63.02c-.03 1.77-.07 3.54-.09 5.31-.02 1.77-.03 3.58-.05 5.37-.02 1.89.01 3.78-.07 5.67-.08 1.76-.28 3.52-.45 5.55l-6.61-.36c-.65-2.17-.63-25.68.01-30.26h12.14zm155.02 95.54l-6.5-5.82 2.65-19.77-.52-.22-10.94 11.98-6.42-5.92 20.66-22.78 6.41 5.98-2.75 19.8.49.27 11.07-12.08 6.52 5.84-20.67 22.72zm-282.76-38.91l-9.46-12.88 7-5.25 18.25 24.68-7.02 5.28-19.56-6.79c3.34 5.05 6.75 9.21 9.97 13.8l-6.99 5.22-18.28-24.68 7.02-5.2 18.56 6.43.51-.61zm354.64 198.83c-3.5 3.95-6.63 5.89-13.87 8.53V304.4l9.73-4.98a5.031 5.031 0 003.14-3.35c.05-.6.06-1.2.01-1.81h-12.12c-.32-3.12-.33-6.26-.04-9.38 10.23-.36 20.27.64 30.52.51 0 3 .05 5.66-.01 8.32-.08 3.28-.26 6.55-.41 9.82-.03.59-.04 1.19-.13 1.78-.65 4.46-3.03 7.05-6.84 7.45-4.2.89-8.37-1.6-9.59-5.71-.11-.33-.23-.68-.39-1.09zm9.68-2.88c1.65-2.39 1.88-4.13 1.11-8.29l-5.6-.37a9.714 9.714 0 00-.39 5.57c.63 3.19 1.38 3.69 4.88 3.09zM368.38 55.9c5.41-.9 10.47-1.76 15.55-2.56 1.66-.3 3.34-.47 5.02-.51a7.526 7.526 0 017.85 5.57c1.22 3.61-.1 7.59-3.23 9.76-.54.38-1.1.72-1.74 1.13 4.52 2.58 6.52 4.76 10.98 11.93-1.71.32-3.32.64-4.94.92-1.66.29-3.32.54-5.17.84-2.29-2.94-4.61-5.9-6.91-8.87a3.994 3.994 0 00-5.14-1.63l1.86 12.15-9.14 1.53-4.99-30.26zm19.69 7.09c-.28-2.44-1.37-3.74-3.32-3.61-2.12-.07-4.23.37-6.15 1.28l1.11 5.93c3.39-.52 6.7-.21 8.36-3.6zm-56.51 13.73c.05-10.4 9.56-14.77 17.5-14.97 9.89-.25 14.69 8.59 14.97 17.42.3 9.8-8.19 14.63-17.74 14.95-9.14.31-14.27-8.31-14.73-17.4zm23.35 3.74a16.71 16.71 0 00-2.99-8.87 6.06 6.06 0 00-7.18-1.99 5.927 5.927 0 00-4.13 5.92 15.84 15.84 0 003.29 9.06 5.71 5.71 0 006.95 1.75 5.595 5.595 0 004.06-5.87zm204.6 20.16a19.239 19.239 0 01-9.99 15.88c-3.04 1.6-6.61 1.85-9.84.7a21.692 21.692 0 01-9.7-6.15 12.783 12.783 0 01-3.08-12.19c.96-4.1 3.19-7.78 6.37-10.54 3.66-3.42 8.95-4.45 13.62-2.65 3.8 1.25 7.16 3.56 9.69 6.66 1.97 2.31 3.01 5.26 2.93 8.29zm-8.68-1.18c0-4.32-5.02-8.55-9.22-5.94a13.025 13.025 0 00-6.32 9.94c-.44 4.36 4.77 8.07 8.55 6.07 3.72-2.13 6.29-5.83 6.99-10.07zm-355.25 239.6c-7.85 0-12.87-3.75-14.59-11.02-.66-2.59-.88-5.27-.65-7.94.75-6.77 4.22-10.49 10.84-12.16 2.78-.76 5.68-.97 8.54-.62 5.2.51 9.58 4.09 11.1 9.09 1.14 3.2 1.54 6.61 1.16 9.99-.4 4.78-3.41 8.94-7.81 10.83a18.498 18.498 0 01-8.59 1.83zm2.29-22.69c-2.69-.07-5.36.54-7.75 1.78a6.173 6.173 0 00-2.79 6.42 5.69 5.69 0 004.79 5.03c3.15.6 6.4.21 9.32-1.1 2.4-.94 3.88-3.37 3.62-5.94-.18-4.03-2.65-6.17-7.19-6.19zm465.24-42.94c-2.19.37-4.11.72-6.04 1-4.12.6-8.25 1.23-12.38 1.74-5.96.75-12.35-1.94-13.83-9.29a42.4 42.4 0 01-.93-8.84 9.885 9.885 0 016.9-9.81c3.12-.96 6.32-1.65 9.56-2.06 4.01-.66 8.05-1.11 12.08-1.65 1.16 2.88 1.64 5.99 1.39 9.08-4.24.62-8.54 1.23-12.85 1.86-1.87.27-3.76.41-5.59.82a5.26 5.26 0 00-3.94 7.72c.67 1.96 2.62 3.2 4.68 2.96 2.57-.21 5.12-.56 7.68-.91 3.24-.44 6.48-.96 9.72-1.4.73-.05 1.46-.05 2.2-.01l1.35 8.79zm-35.13-69.33l-6.64-13.31-5.63 2.78 7.23 14.66-5.86 2.99c-.28-.34-.53-.71-.76-1.08-3.58-7.21-7.14-14.42-10.9-22l27.6-13.6 11.19 22.72-5.63 2.85-7.2-14.28-4.56 2.21 6.51 13.32-5.35 2.74zm-7.46-34.13l-5.02-6.37c1.65-3.94 1.23-6.55-1.19-7.96-1.34-.78-1.94-.56-3.53 1.44l1.33 4.03c.81 2.45 1.77 4.86 2.39 7.35 1 3.13.05 6.55-2.41 8.73a9.402 9.402 0 01-9.72 2.02c-1.31-.45-2.53-1.13-3.61-2a22.69 22.69 0 01-7.36-10.98 9.72 9.72 0 014-10.93l5.2 6.55c-1.39 2.01-2.76 4.04-1.6 6.56a5.224 5.224 0 004.15 3.45c2.67-1.03 3.35-2.11 2.69-4.66-.4-1.53-1.19-2.96-1.56-4.49-.68-2.47-1.15-5-1.41-7.55-.36-5.08 5.09-8.51 9.64-7.28 1.07.24 2.08.67 3 1.26 4.47 3.08 7.56 7.79 8.6 13.12.51 2.67-.69 5.07-3.59 7.71zM193.46 348.28l2.94 7.98c-2.23 1.67-3.44 3.66-2.17 6.43.74 1.62 1.29 1.94 3.51 1.87 1.6-1.23 1.16-2.97 1.14-4.64-.14-3.06-.1-6.13.09-9.18.7-7.31 9.46-9.54 14.68-5.55 1.12.83 2.07 1.86 2.82 3.03 2.7 4.22 3.89 9.24 3.37 14.23-.48 3.96-3.23 6.11-6.87 7.81l-3.02-7.97c4.83-4.17 4.77-8.35-.05-10.49-2.65.78-3.16 1.3-3.25 3.82-.07 1.98.14 3.98.05 5.96-.02 1.88-.23 3.76-.64 5.6a7.79 7.79 0 01-9.4 5.72c-.97-.24-1.88-.66-2.7-1.24-1.08-.71-2-1.63-2.73-2.7a20.977 20.977 0 01-3.54-13.87c.43-3.2 2.68-5.87 5.77-6.81zM477.2 88l-9.34-1.8c-.3-1.96-.54-3.59-.8-5.3l-10.59-2.02-2.8 4.67-9.11-1.8 17.03-27.94 9.99 1.9c2.03 10.59 3.81 21.18 5.62 32.29zm-10.85-13.76c-.04-3.74-.64-7.45-1.77-11.02l-5.05 9.6 6.82 1.42zM225.48 198.99c-1.63-.38-3.3-.63-4.89-1.16-3.86-1.3-7.46-3.29-10.61-5.87-4.13-2.8-5.59-8.21-3.42-12.71.68-1.75 1.6-3.41 2.73-4.91a9.472 9.472 0 019.97-3.81c5.38 1.1 10.35 3.63 14.41 7.33a9.713 9.713 0 012.61 12.59c-.84 1.79-1.89 3.47-3.13 5.01a9.826 9.826 0 01-7.67 3.53zm1.16-7.81c2.19.08 3.39-.51 3.96-1.89.67-1.52.22-3.3-1.1-4.31a32.618 32.618 0 00-12.96-6.97 3.44 3.44 0 00-4.11 1.65c-.73 1.24-.6 2.8.33 3.89.28.41.62.77 1.01 1.08 3.44 2.68 7.29 4.8 11.39 6.28.48.14.98.23 1.48.27zm410.17 41.35v7.65a10.77 10.77 0 01-12.43-5.84 23.065 23.065 0 01-2.52-9.12c-.46-5.11 2.16-9.99 6.67-12.43 3.48-2.17 7.53-3.27 11.64-3.15 3.43 0 6.7 1.46 8.98 4.02 3.36 3.75 5.11 8.67 4.88 13.7-.2 3.94-2.37 7.51-5.76 9.52l-4.09-7.07c.38-.43.72-.78 1.03-1.15a5.942 5.942 0 00-5.17-9.89c-2.82.53-5.55 1.44-8.13 2.7a4.94 4.94 0 00-2.74 6 5.688 5.688 0 004.75 4.72c.85.16 1.74.2 2.89.34zm-424.85-6.27a31.67 31.67 0 01-15.44-5.99 8.902 8.902 0 01-3.57-9.46c.43-2.13 1.1-4.2 2-6.17a9.474 9.474 0 0110.24-5.58c5.26.48 10.31 2.31 14.66 5.31a9.737 9.737 0 014.32 11.87c-.37 1.33-.86 2.64-1.44 3.89-1.96 4.25-5.38 6.16-10.77 6.13zm2.05-7.72c2.4-.02 3.67-.82 4.22-2.34.55-1.45.02-3.09-1.27-3.95-.9-.78-1.9-1.43-2.97-1.94-2.36-1.01-4.79-1.9-7.22-2.75-1.13-.38-2.29-.64-3.47-.8-1.82-.34-3.64.63-4.37 2.33-.58 1.47-.14 2.79 1.5 4.13a8.68 8.68 0 002.25 1.43c3.04 1.19 6.1 2.32 9.18 3.41.71.21 1.44.36 2.18.46l-.03.02zm-24.99 58.21l-1.41 7.79c-6.05-1.24-8.75-4.51-8.6-10.53.06-2.48.41-4.94 1.05-7.34 1.09-4.63 5.73-7.51 10.36-6.42 1.24.29 2.4.85 3.39 1.64 2.25 1.81 4.1 4.06 5.44 6.62 1.15 1.83 2.3 3.66 3.63 5.79 1.44-2.24.79-4.37 1.11-6.33.33-2.04.46-4.11.72-6.55l6.66.36c-.78 8.64-1.52 16.91-2.28 25.5a15.21 15.21 0 01-7.74-4.22c-1.98-2.21-3.7-4.66-5.46-7.05-1.06-1.44-1.98-2.98-2.98-4.45-.33-.49-.71-.96-1.12-1.39a4.393 4.393 0 00-4.55-1.51 3.742 3.742 0 00-2.49 3.4 4.008 4.008 0 002.67 3.92c.45.18.88.41 1.6.77zm134.32-192.7l2.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.97zM188.7 252.6l-6.64-1.58 5.43-24.11 5.39 1.18a37.527 37.527 0 0022.05 16.6l-1.78 7.93a40.697 40.697 0 01-20.72-14.81c-1.68 5.04-2.17 9.86-3.73 14.79zm44.57-95.66c-.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.32z"

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);
 }
 
@@ -50,25 +63,27 @@ function Iso27001SensibaIcon({
 }, 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,7 +202,7 @@ 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,