@datalayer/icons-react 1.0.13 → 1.0.15

package/data1/OutputIcon.js

@@ -6,32 +6,90 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const OutputIcon = ({
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
+  React.useLayoutEffect(() => {
+    if (typeof document === "undefined") return;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
+    let el = ref.current && ref.current.parentElement;
+    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 (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
+  }, [mode]);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    "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);
+}
+
+function OutputIcon({
   title,
+  titleId,
   size,
   colored,
   themed,
-  titleId,
+  colormode,
   ...props
-}, ref) => /*#__PURE__*/React.createElement("svg", Object.assign({
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: (themed ? "var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor))" : "var(--datalayer-icon-color, currentColor)"),
-  "aria-hidden": "true",
+}, svgRef) {
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    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",
-  viewBox: "0 0 20 20",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  d: "M18 3.534H2a.5.5 0 0 0-.5.5v12a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5m-16-1.5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-12a2 2 0 0 0-2-2z",
-  clipRule: "evenodd"
-}), /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  d: "M3.5 10a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.5-.5m8 0a.5.5 0 0 1 .5-.5h2.046a.5.5 0 1 1 0 1H12a.5.5 0 0 1-.5-.5m-8 2a.5.5 0 0 1 .5-.5h3.52a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.5-.5m5.279 0a.5.5 0 0 1 .5-.5h6.584a.5.5 0 1 1 0 1H9.279a.5.5 0 0 1-.5-.5M3.5 14a.5.5 0 0 1 .5-.5h9.026a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.5-.5m-2-7.75h17v1.5h-17z",
-  clipRule: "evenodd"
-}));
-const ForwardRef = forwardRef(OutputIcon);
+    "aria-hidden": "true",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props, {
+    "data-datalayer-icon": "",
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-color": props.color,
+      color: props.color
+    }) : props && props.style
+  }), /*#__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",
+    d: "M18 3.534H2a.5.5 0 00-.5.5v12a.5.5 0 00.5.5h16a.5.5 0 00.5-.5v-12a.5.5 0 00-.5-.5zm-16-1.5a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2v-12a2 2 0 00-2-2H2z",
+    clipRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M3.5 10a.5.5 0 01.5-.5h6a.5.5 0 010 1H4a.5.5 0 01-.5-.5zm8 0a.5.5 0 01.5-.5h2.046a.5.5 0 110 1H12a.5.5 0 01-.5-.5zm-8 2a.5.5 0 01.5-.5h3.52a.5.5 0 010 1H4a.5.5 0 01-.5-.5zm5.279 0a.5.5 0 01.5-.5h6.584a.5.5 0 110 1H9.279a.5.5 0 01-.5-.5zM3.5 14a.5.5 0 01.5-.5h9.026a.5.5 0 010 1H4a.5.5 0 01-.5-.5zm-2-7.75h17v1.5h-17v-1.5z",
+    clipRule: "evenodd"
+  }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(OutputIcon);
 module.exports = ForwardRef;

package/data1/OvhCloudIcon.js

@@ -6,28 +6,86 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const OvhCloudIcon = ({
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
+  React.useLayoutEffect(() => {
+    if (typeof document === "undefined") return;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
+    let el = ref.current && ref.current.parentElement;
+    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 (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
+  }, [mode]);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    "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);
+}
+
+function OvhCloudIcon({
   title,
+  titleId,
   size,
   colored,
   themed,
-  titleId,
+  colormode,
   ...props
-}, ref) => /*#__PURE__*/React.createElement("svg", Object.assign({
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  "aria-hidden": "true",
+}, svgRef) {
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 350 350",
+    fill: (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-  viewBox: "0 0 350 350",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#000e9c" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  fillRule: "evenodd",
-  d: "M327.457 76.043a179.53 179.53 0 0 1-16.744 199.182h-95.987l29.548-52.246H205.19l46.068-81.169h39.308l36.89-65.677zM137.9 275.225H40.033a177.245 177.245 0 0 1-16.968-199.63l63.484 110.27L156.524 64h102.972L137.945 275.136z"
-}));
-const ForwardRef = forwardRef(OvhCloudIcon);
+    "aria-hidden": "true",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props, {
+    "data-datalayer-icon": "",
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-color": props.color,
+      color: props.color
+    }) : props && props.style
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#000e9c" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    fillRule: "evenodd",
+    d: "M327.457 76.043a179.528 179.528 0 01-16.744 199.182h-95.987l29.548-52.246H205.19l46.068-81.169h39.308l36.89-65.677zM137.9 275.225H40.033a177.245 177.245 0 01-16.968-199.63l63.484 110.27L156.524 64h102.972L137.945 275.136z"
+  }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(OvhCloudIcon);
 module.exports = ForwardRef;

package/data1/OvhCloudNameIcon.js

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

package/data1/PandasIcon.js

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

package/data1/PauseIcon.js

@@ -6,28 +6,86 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const PauseIcon = ({
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [appearance, setAppearance] = React.useState({
+    mode: typeof mode === "string" ? mode : null,
+    lightTheme: null,
+    darkTheme: null
+  });
+  React.useLayoutEffect(() => {
+    if (typeof document === "undefined") return;
+    let currentMode = null;
+    let lightTheme = null;
+    let darkTheme = null;
+    let el = ref.current && ref.current.parentElement;
+    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 (!currentMode || currentMode === "auto") {
+      currentMode = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setAppearance({
+      mode: typeof mode === "string" ? mode : (currentMode === "dark" ? "light" : "dark"),
+      lightTheme,
+      darkTheme
+    });
+  }, [mode]);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    "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);
+}
+
+function PauseIcon({
   title,
+  titleId,
   size,
   colored,
   themed,
-  titleId,
+  colormode,
   ...props
-}, ref) => /*#__PURE__*/React.createElement("svg", Object.assign({
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: (themed ? "var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor))" : "var(--datalayer-icon-color, currentColor)"),
-  "aria-hidden": "true",
+}, svgRef) {
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 32 32",
+    fill: (themed ? "var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor))" : "var(--datalayer-icon-color, currentColor)"),
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-  viewBox: "0 0 32 32",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("path", {
-  d: "M14 10h-2v12h2zm6 0h-2v12h2z"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M16 4A12 12 0 1 1 4 16 12 12 0 0 1 16 4m0-2a14 14 0 1 0 14 14A14 14 0 0 0 16 2"
-}));
-const ForwardRef = forwardRef(PauseIcon);
+    "aria-hidden": "true",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props, {
+    "data-datalayer-icon": "",
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-color": props.color,
+      color: props.color
+    }) : props && props.style
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    d: "M14 10h-2v12h2V10zm6 0h-2v12h2V10z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M16 4A12 12 0 114 16 12 12 0 0116 4m0-2a14 14 0 1014 14A14 14 0 0016 2z"
+  }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(PauseIcon);
 module.exports = ForwardRef;