@datalayer/icons-react 1.0.13 → 1.0.15

package/data1/EditorIcon.js

@@ -6,31 +6,89 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const EditorIcon = ({
+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 EditorIcon({
   title,
+  titleId,
   size,
   colored,
   themed,
-  titleId,
+  colormode,
   ...props
-}, ref) => /*#__PURE__*/React.createElement("svg", Object.assign({
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "none",
-  stroke: (themed ? "var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor))" : "var(--datalayer-icon-color, currentColor)"),
+}, svgRef) {
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    stroke: (themed ? "var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor))" : "var(--datalayer-icon-color, currentColor)"),
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: 2,
-  "aria-hidden": "true",
-  className: "prefix__feather prefix__feather-edit-3",
-  viewBox: "0 0 24 24",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("path", {
-  d: "M12 20h9M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4z"
-}));
-const ForwardRef = forwardRef(EditorIcon);
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    className: "prefix__feather prefix__feather-edit-3",
+    viewBox: "0 0 24 24",
+    "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: "M12 20h9M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"
+  }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(EditorIcon);
 module.exports = ForwardRef;

package/data1/ElectronIcon.js

@@ -6,26 +6,84 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const ElectronIcon = ({
+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 ElectronIcon({
   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 32 32",
     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: "m10.409 24.405-.023-.001a.402.402 0 0 0-.378.541l-.001-.003c1.342 3.747 3.537 6.053 6.005 6.053a5.89 5.89 0 0 0 4.749-3.352l.015-.036a.402.402 0 0 0-.688-.416l-.001.002a5.15 5.15 0 0 1-4.05 2.995l-.025.003c-2.05 0-4.008-2.058-5.248-5.521a.4.4 0 0 0-.355-.266h-.001zm17.501-1.709h.001a1.12 1.12 0 1 1-.735 1.965l.001.001-.008-.015a.4.4 0 0 0-.118-.113l-.002-.001a1.12 1.12 0 0 1 .86-1.836zm-23.82 0a1.12 1.12 0 1 1-.967.555l-.003.005a1.12 1.12 0 0 1 .97-.56m2.578-5.02h-.019a.402.402 0 0 0-.297.673 25.3 25.3 0 0 0 5.87 4.666l.122.065c5.517 3.185 11.379 4.105 14.447 2.298a1.925 1.925 0 1 0-.547-.604l-.005-.009c-2.805 1.517-8.286.625-13.493-2.381a24.6 24.6 0 0 1-5.786-4.561l-.013-.014a.4.4 0 0 0-.277-.131h-.001zM16 15.369a1.393 1.393 0 1 0 1.372 1.089l.002.009a1.4 1.4 0 0 0-1.365-1.098zm3.598-7.794a.4.4 0 0 0-.084.01h.003c-2.709.626-5.099 1.604-7.277 2.902l.115-.064c-5.711 3.297-9.488 8.116-9.197 11.711a1.922 1.922 0 1 0 .934-.242h-.001q-.07.001-.141.007c-.125-3.199 3.428-7.674 8.807-10.78a23.8 23.8 0 0 1 6.764-2.716l.164-.032a.403.403 0 0 0-.086-.795h-.002zm3.372-.365a.401.401 0 0 0-.011.804h.001a5.16 5.16 0 0 1 4.677 2.019l.009.013c1.024 1.773.225 4.492-2.147 7.294a.401.401 0 1 0 .613.521l.001-.001c2.566-3.032 3.462-6.081 2.23-8.216a5.91 5.91 0 0 0-5.397-2.431l.025-.002zM9.158 7.188a5.97 5.97 0 0 0-5.472 2.418l-.012.017a5.9 5.9 0 0 0-.52 2.438c0 1.331.435 2.56 1.17 3.553l-.011-.016a.403.403 0 0 0 .746-.208.4.4 0 0 0-.05-.193l.001.002a5.2 5.2 0 0 1-1.049-3.144c0-.733.151-1.43.422-2.063l-.013.034c1.026-1.777 3.79-2.443 7.413-1.783a.402.402 0 1 0 .146-.79h-.002a15 15 0 0 0-2.767-.262h-.002zm6.856-5.38a1.12 1.12 0 1 1-.967.555l-.003.005a1.12 1.12 0 0 1 .97-.56m0-.804h-.001a1.924 1.924 0 1 0 1.703 2.819l.005-.011c2.775 1.584 4.807 6.839 4.807 12.949l.001.183a24.4 24.4 0 0 1-1.078 7.198l.046-.173a.402.402 0 0 0 .767.242l.001-.003c.678-2.174 1.068-4.674 1.068-7.264l-.001-.194v.01c0-6.489-2.214-12.104-5.399-13.749q.003-.041.004-.084a1.923 1.923 0 0 0-1.924-1.923z"
-}));
-const ForwardRef = forwardRef(ElectronIcon);
+    "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: "M10.409 24.405l-.023-.001a.402.402 0 00-.378.541l-.001-.003c1.342 3.747 3.537 6.053 6.005 6.053a5.892 5.892 0 004.749-3.352l.015-.036a.402.402 0 00-.688-.416l-.001.002a5.15 5.15 0 01-4.05 2.995l-.025.003c-2.05 0-4.008-2.058-5.248-5.521a.404.404 0 00-.355-.266h-.001zm17.501-1.709h.001a1.12 1.12 0 11-.735 1.965l.001.001-.008-.015a.41.41 0 00-.118-.113l-.002-.001a1.12 1.12 0 01.86-1.836zm-23.82 0a1.12 1.12 0 11-.967.555l-.003.005a1.12 1.12 0 01.97-.56zm2.578-5.02h-.019a.402.402 0 00-.297.673 25.278 25.278 0 005.87 4.666l.122.065c5.517 3.185 11.379 4.105 14.447 2.298a1.925 1.925 0 10-.547-.604l-.005-.009c-2.805 1.517-8.286.625-13.493-2.381a24.564 24.564 0 01-5.786-4.561l-.013-.014a.4.4 0 00-.277-.131h-.001zM16 15.369a1.393 1.393 0 101.372 1.089l.002.009a1.4 1.4 0 00-1.365-1.098H16zm3.598-7.794a.386.386 0 00-.084.01h.003c-2.709.626-5.099 1.604-7.277 2.902l.115-.064c-5.711 3.297-9.488 8.116-9.197 11.711a1.922 1.922 0 10.934-.242h-.001c-.047 0-.094.004-.141.007-.125-3.199 3.428-7.674 8.807-10.78a23.805 23.805 0 016.764-2.716l.164-.032a.403.403 0 00-.086-.795h-.002zm3.372-.365a.401.401 0 00-.011.804h.001a5.16 5.16 0 014.677 2.019l.009.013c1.024 1.773.225 4.492-2.147 7.294a.401.401 0 10.613.521l.001-.001c2.566-3.032 3.462-6.081 2.23-8.216a5.912 5.912 0 00-5.397-2.431l.025-.002zM9.158 7.188a5.967 5.967 0 00-5.472 2.418l-.012.017a5.875 5.875 0 00-.52 2.438c0 1.331.435 2.56 1.17 3.553l-.011-.016a.403.403 0 00.746-.208.393.393 0 00-.05-.193l.001.002a5.198 5.198 0 01-1.049-3.144c0-.733.151-1.43.422-2.063l-.013.034c1.026-1.777 3.79-2.443 7.413-1.783a.402.402 0 10.146-.79h-.002a14.793 14.793 0 00-2.767-.262h-.002zm6.856-5.38a1.12 1.12 0 11-.967.555l-.003.005a1.12 1.12 0 01.97-.56zm0-.804h-.001a1.924 1.924 0 101.703 2.819l.005-.011c2.775 1.584 4.807 6.839 4.807 12.949l.001.183a24.41 24.41 0 01-1.078 7.198l.046-.173a.402.402 0 00.767.242l.001-.003c.678-2.174 1.068-4.674 1.068-7.264l-.001-.194v.01c0-6.489-2.214-12.104-5.399-13.749.001-.028.004-.055.004-.084a1.923 1.923 0 00-1.924-1.923z"
+  }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(ElectronIcon);
 module.exports = ForwardRef;

package/data1/EtcdIcon.js

@@ -6,36 +6,90 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const EtcdIcon = ({
+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 EtcdIcon({
   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: "-6.31 3.69 510.12 493.62",
+    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: "-6.31 3.69 510.12 493.62",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("path", {
-  d: "M228.175 224.684a31.994 31.994 0 1 1-32.007-31.986 32.01 32.01 0 0 1 32.007 31.986m41.37 0a32.007 32.007 0 1 0 32.007-31.986 31.99 31.99 0 0 0-32.007 31.986",
-  className: "prefix__cls-1",
-  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", {
+    d: "M228.175 224.684a31.994 31.994 0 11-32.007-31.986 32.011 32.011 0 0132.007 31.986zm41.37 0a32.007 32.007 0 1032.007-31.986 31.988 31.988 0 00-32.007 31.986z",
+    className: "prefix__cls-1",
     fill: colored ? "#419eda" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
-  }
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M487.371 259.399a88 88 0 0 1-7.07.267 92.36 92.36 0 0 1-40.621-9.455 377 377 0 0 0 5.47-71.86 372 372 0 0 0-46.507-55.11 92.4 92.4 0 0 1 32.772-35.102l6.016-3.729-4.695-5.3a244.9 244.9 0 0 0-85.524-62.377l-6.507-2.828-1.654 6.862a92.14 92.14 0 0 1-23.19 42.096 372 372 0 0 0-67.006-27.602 370.6 370.6 0 0 0-66.908 27.558 91.9 91.9 0 0 1-23.098-42.003l-1.681-6.884-6.486 2.817a247.2 247.2 0 0 0-85.518 62.355l-4.689 5.3 6.005 3.724a92.25 92.25 0 0 1 32.695 34.917 374.6 374.6 0 0 0-46.425 54.908 377 377 0 0 0 5.328 72.334 92.1 92.1 0 0 1-40.376 9.374 86 86 0 0 1-7.086-.268l-7.053-.551.655 7.042a243.4 243.4 0 0 0 32.897 100.678l3.581 6.098 5.372-4.575a92.05 92.05 0 0 1 43.592-20.406 374 374 0 0 0 37.308 60.76 377.7 377.7 0 0 0 70.69 17.382 91.87 91.87 0 0 1-5.885 48.232l-2.686 6.54 6.9 1.529a246.4 246.4 0 0 0 52.966 5.857l52.954-5.857 6.906-1.529-2.675-6.54a91.76 91.76 0 0 1-5.869-48.286 377.8 377.8 0 0 0 70.407-17.328 372.3 372.3 0 0 0 37.335-60.815 92.23 92.23 0 0 1 43.81 20.428l5.377 4.553 3.587-6.049a242.84 242.84 0 0 0 32.859-100.672l.655-7.037zM324.644 345.45a285.9 285.9 0 0 1-151.628 0 290.1 290.1 0 0 1-46.141-143.385 288.7 288.7 0 0 1 54.957-52.315 293 293 0 0 1 67.028-36.462 294 294 0 0 1 66.891 36.364 291 291 0 0 1 55.198 52.675 292.3 292.3 0 0 1-13.817 74.682 293.7 293.7 0 0 1-32.488 68.441",
-  className: "prefix__cls-1",
-  style: {
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M487.371 259.399a87.82 87.82 0 01-7.07.267 92.362 92.362 0 01-40.621-9.455 377.209 377.209 0 005.47-71.86 371.808 371.808 0 00-46.507-55.11 92.396 92.396 0 0132.772-35.102l6.016-3.729-4.695-5.3a244.906 244.906 0 00-85.524-62.377l-6.507-2.828-1.654 6.862a92.144 92.144 0 01-23.19 42.096 371.928 371.928 0 00-67.006-27.602 370.624 370.624 0 00-66.908 27.558 91.915 91.915 0 01-23.098-42.003l-1.681-6.884-6.486 2.817a247.232 247.232 0 00-85.518 62.355l-4.689 5.3 6.005 3.724a92.249 92.249 0 0132.695 34.917 374.63 374.63 0 00-46.425 54.908 376.956 376.956 0 005.328 72.334 92.115 92.115 0 01-40.376 9.374 86.36 86.36 0 01-7.086-.268l-7.053-.551.655 7.042a243.413 243.413 0 0032.897 100.678l3.581 6.098 5.372-4.575a92.052 92.052 0 0143.592-20.406 373.97 373.97 0 0037.308 60.76 377.717 377.717 0 0070.69 17.382 91.87 91.87 0 01-5.885 48.232l-2.686 6.54 6.9 1.529a246.355 246.355 0 0052.966 5.857l52.954-5.857 6.906-1.529-2.675-6.54a91.755 91.755 0 01-5.869-48.286 377.784 377.784 0 0070.407-17.328 372.3 372.3 0 0037.335-60.815 92.233 92.233 0 0143.81 20.428l5.377 4.553 3.587-6.049a242.844 242.844 0 0032.859-100.672l.655-7.037zM324.644 345.45a285.884 285.884 0 01-151.628 0 290.124 290.124 0 01-46.141-143.385 288.675 288.675 0 0154.957-52.315 293.065 293.065 0 0167.028-36.462 293.976 293.976 0 0166.891 36.364 290.886 290.886 0 0155.198 52.675 292.253 292.253 0 01-13.817 74.682 293.726 293.726 0 01-32.488 68.441z",
+    className: "prefix__cls-1",
     fill: colored ? "#419eda" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
-  }
-}));
-const ForwardRef = forwardRef(EtcdIcon);
+  }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(EtcdIcon);
 module.exports = ForwardRef;

package/data1/EtcdNameIcon.js

@@ -6,40 +6,92 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const EtcdNameIcon = ({
+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 EtcdNameIcon({
   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: "-8.17 -10.17 300 300",
+    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: "-8.17 -10.17 300 300",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("path", {
-  d: "M64.584 167.059a8.448 8.448 0 1 1-8.451-8.446 8.453 8.453 0 0 1 8.451 8.446m10.924 0a8.452 8.452 0 1 0 8.452-8.446 8.446 8.446 0 0 0-8.452 8.446",
-  className: "prefix__cls-1",
-  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", {
+    d: "M130.686 62.305a10.347 10.347 0 11-10.35-10.345 10.353 10.353 0 0110.35 10.345zm13.38 0A10.352 10.352 0 10154.42 51.96a10.345 10.345 0 00-10.353 10.345z",
+    className: "prefix__cls-1",
     fill: colored ? "#419eda" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
-  },
-  transform: "translate(51.582 -142.314)scale(1.22483)"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M133.025 176.226a23 23 0 0 1-1.866.07 24.4 24.4 0 0 1-10.727-2.496 99.6 99.6 0 0 0 1.445-18.975 98 98 0 0 0-12.28-14.552 24.4 24.4 0 0 1 8.653-9.269l1.589-.985-1.24-1.4a64.7 64.7 0 0 0-22.583-16.47l-1.718-.746-.437 1.812a24.33 24.33 0 0 1-6.123 11.115 98 98 0 0 0-17.693-7.288 98 98 0 0 0-17.667 7.276 24.27 24.27 0 0 1-6.1-11.09l-.443-1.818-1.713.744a65.3 65.3 0 0 0-22.581 16.464l-1.239 1.4 1.586.984a24.36 24.36 0 0 1 8.634 9.219 99 99 0 0 0-12.26 14.499 99.5 99.5 0 0 0 1.408 19.1 24.3 24.3 0 0 1-10.662 2.475 23 23 0 0 1-1.87-.07l-1.863-.146.173 1.86a64.3 64.3 0 0 0 8.686 26.584l.946 1.61 1.419-1.208a24.3 24.3 0 0 1 11.51-5.389 98.8 98.8 0 0 0 9.85 16.044 99.7 99.7 0 0 0 18.667 4.59 24.26 24.26 0 0 1-1.554 12.736l-.709 1.727 1.822.403a65 65 0 0 0 13.985 1.547l13.983-1.547 1.823-.403-.706-1.728a24.23 24.23 0 0 1-1.55-12.75 99.8 99.8 0 0 0 18.592-4.575 98.3 98.3 0 0 0 9.859-16.058 24.35 24.35 0 0 1 11.567 5.394l1.42 1.202.947-1.597a64.1 64.1 0 0 0 8.677-26.583l.173-1.858zm-42.968 22.722a75.5 75.5 0 0 1-40.038 0 76.6 76.6 0 0 1-12.184-37.861 76.2 76.2 0 0 1 14.512-13.815 77.4 77.4 0 0 1 17.699-9.627 77.6 77.6 0 0 1 17.663 9.602 76.8 76.8 0 0 1 14.575 13.91 77.2 77.2 0 0 1-3.649 19.72 77.6 77.6 0 0 1-8.578 18.071",
-  className: "prefix__cls-1",
-  style: {
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M214.515 73.533a28.31 28.31 0 01-2.286.086 29.871 29.871 0 01-13.138-3.058 121.997 121.997 0 001.77-23.24 120.25 120.25 0 00-15.041-17.824 29.882 29.882 0 0110.598-11.353l1.946-1.207-1.518-1.715a79.207 79.207 0 00-27.66-20.173l-2.105-.913-.535 2.22a29.801 29.801 0 01-7.5 13.613 120.288 120.288 0 00-21.67-8.926 119.868 119.868 0 00-21.64 8.911 29.727 29.727 0 01-7.471-13.583l-.543-2.227-2.098.912A79.96 79.96 0 0077.966 15.22l-1.518 1.715 1.943 1.205a29.836 29.836 0 0110.575 11.292A121.163 121.163 0 0073.95 47.192a121.916 121.916 0 001.724 23.394 29.792 29.792 0 01-13.059 3.031 27.987 27.987 0 01-2.29-.085l-2.282-.18.212 2.279a78.723 78.723 0 0010.639 32.56l1.158 1.973 1.738-1.48a29.77 29.77 0 0114.098-6.6 120.948 120.948 0 0012.065 19.65 122.16 122.16 0 0022.864 5.623 29.713 29.713 0 01-1.904 15.6l-.868 2.115 2.232.493a79.675 79.675 0 0017.129 1.895l17.127-1.895 2.233-.493-.865-2.117a29.675 29.675 0 01-1.899-15.617 122.183 122.183 0 0022.772-5.603 120.41 120.41 0 0012.076-19.668 29.83 29.83 0 0114.168 6.606l1.739 1.473 1.16-1.957a78.54 78.54 0 0010.628-32.56l.211-2.275zm-52.628 27.83a92.461 92.461 0 01-49.04 0A93.832 93.832 0 0197.923 54.99a93.364 93.364 0 0117.775-16.92 94.783 94.783 0 0121.678-11.792 95.077 95.077 0 0121.635 11.76 94.078 94.078 0 0117.852 17.038 94.52 94.52 0 01-4.47 24.154 94.998 94.998 0 01-10.506 22.133z",
+    className: "prefix__cls-1",
     fill: colored ? "#419eda" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
-  },
-  transform: "translate(51.582 -142.314)scale(1.22483)"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M38.974 177.536c21.227 0 33.21 15.236 33.21 39.028a49.7 49.7 0 0 1-.515 7.701H15.523c1.027 17.976 11.814 29.275 27.73 29.275 7.873 0 14.547-2.57 20.711-6.506l4.963 9.242c-7.189 4.623-16.09 8.56-27.385 8.56-22.253 0-39.884-16.261-39.884-43.481 0-27.212 18.313-43.819 37.316-43.819m20.885 37.487c0-16.947-7.532-26.358-20.542-26.358-11.64 0-22.253 9.583-23.965 26.358zm28.24-23.964H75.776v-10.612l13.008-.856 1.714-23.28h11.807v23.279h22.425v11.47h-22.425v46.218c0 10.272 3.256 16.09 12.84 16.09 2.911 0 6.677-1.197 9.416-2.227l2.734 10.615c-4.62 1.54-10.268 3.082-15.406 3.082-17.799 0-23.793-11.297-23.793-27.73v-46.05zm82.51-13.523c10.955 0 18.656 4.623 24.303 9.93l-7.016 9.07c-4.965-4.276-10.099-7.359-16.776-7.359-15.06 0-26.02 13.008-26.02 32.18 0 19.002 10.443 31.84 25.679 31.84 7.873 0 14.552-3.937 19.514-8.387l6.333 9.243c-7.532 6.676-17.12 10.784-27.049 10.784-22.076 0-39.024-15.92-39.024-43.48.001-27.9 18.66-43.82 40.055-43.82zm65.732 0c9.585 0 15.917 3.595 23.279 9.588l-.686-14.208v-32.01h14.207V262.78h-11.636l-1.202-9.756h-.511c-6.506 6.334-15.404 11.812-25.164 11.812-20.882 0-34.404-15.75-34.404-43.481 0-27.042 17.116-43.819 36.117-43.819m1.368 75.488c7.702 0 14.38-3.766 21.226-11.466v-43.482c-7.02-6.333-13.351-8.73-20.198-8.73-13.353 0-23.964 12.837-23.964 31.84 0 19.857 8.386 31.838 22.936 31.838"
-}));
-const ForwardRef = forwardRef(EtcdNameIcon);
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M38.974 177.536c21.227 0 33.21 15.236 33.21 39.028a49.645 49.645 0 01-.515 7.701H15.523c1.027 17.976 11.814 29.275 27.73 29.275 7.873 0 14.547-2.57 20.711-6.506l4.963 9.242c-7.189 4.623-16.09 8.56-27.385 8.56-22.253 0-39.884-16.261-39.884-43.481 0-27.212 18.313-43.819 37.316-43.819zm20.885 37.487c0-16.947-7.532-26.358-20.542-26.358-11.64 0-22.253 9.583-23.965 26.358zm28.24-23.964H75.776v-10.612l13.008-.856 1.714-23.28h11.807v23.279h22.425v11.47h-22.425v46.218c0 10.272 3.256 16.09 12.84 16.09 2.911 0 6.677-1.197 9.416-2.227l2.734 10.615c-4.62 1.54-10.268 3.082-15.406 3.082-17.799 0-23.793-11.297-23.793-27.73v-46.05zm82.51-13.523c10.955 0 18.656 4.623 24.303 9.93l-7.016 9.07c-4.965-4.276-10.099-7.359-16.776-7.359-15.06 0-26.02 13.008-26.02 32.18 0 19.002 10.443 31.84 25.679 31.84 7.873 0 14.552-3.937 19.514-8.387l6.333 9.243c-7.532 6.676-17.12 10.784-27.049 10.784-22.076 0-39.024-15.92-39.024-43.48.001-27.9 18.66-43.82 40.055-43.82zm65.732 0c9.585 0 15.917 3.595 23.279 9.588l-.686-14.208v-32.01h14.207V262.78h-11.636l-1.202-9.756h-.511c-6.506 6.334-15.404 11.812-25.164 11.812-20.882 0-34.404-15.75-34.404-43.481 0-27.042 17.116-43.819 36.117-43.819zm1.368 75.488c7.702 0 14.38-3.766 21.226-11.466v-43.482c-7.02-6.333-13.351-8.73-20.198-8.73-13.353 0-23.964 12.837-23.964 31.84 0 19.857 8.386 31.838 22.936 31.838z"
+  }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(EtcdNameIcon);
 module.exports = ForwardRef;

package/data1/EuroIcon.js

@@ -6,26 +6,84 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const EuroIcon = ({
+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 EuroIcon({
   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: "-75 -60 120 120",
+    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: "-75 -60 120 120",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("path", {
-  d: "M-69.843-15h102.02L28.02-5H-74zm0 20h93.706l-4.157 10H-74zM39.302-32.14a50 50 0 1 0 0 64.28v14.044a60 60 0 1 1 4.232-88.503z"
-}));
-const ForwardRef = forwardRef(EuroIcon);
+    "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: "M-69.843-15h102.02L28.02-5H-74zm0 20h93.706l-4.157 10H-74zM39.302-32.14a50 50 0 100 64.28v14.044a60 60 0 114.232-88.503z"
+  }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(EuroIcon);
 module.exports = ForwardRef;