@datalayer/icons-react 1.0.13 → 1.0.15

package/data1/CellIcon.js

@@ -6,32 +6,90 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const CellIcon = ({
+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 CellIcon({
   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: "M1.5 7.25h17v1.5h-17z",
-  clipRule: "evenodd"
-}));
-const ForwardRef = forwardRef(CellIcon);
+    "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: "M1.5 7.25h17v1.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(CellIcon);
 module.exports = ForwardRef;

package/data1/CephIcon.js

@@ -6,26 +6,84 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const CephIcon = ({
+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 CephIcon({
   title,
+  titleId,
   size,
   colored,
   themed,
-  titleId,
+  colormode,
   ...props
-}, ref) => /*#__PURE__*/React.createElement("svg", Object.assign({
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: colored ? "#f0424d" : (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))))")),
-  "aria-hidden": "true",
+}, svgRef) {
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: colored ? "#f0424d" : (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))))")),
+    viewBox: "-3.22 -4.4 66.773 66.338",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-  viewBox: "-3.22 -4.4 66.773 66.338",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("path", {
-  d: "M51.727 55.793c-2.427-1.3-3.813-2.746-4.12-4.326-.296-1.53.387-3.232 2.088-5.204a25.68 25.68 0 0 0 6.307-16.88C56.002 15.2 44.462 3.66 30.28 3.66h-.23C15.866 3.66 4.33 15.2 4.33 29.383a25.68 25.68 0 0 0 6.308 16.881c1.715 1.985 2.38 3.618 2.096 5.134-.295 1.578-1.684 3.054-4.132 4.392-3.754-3.13-7.073-7.308-9.12-11.5a34.6 34.6 0 0 1-2.542-7.14 34 34 0 0 1-.9-7.765 33.8 33.8 0 0 1 2.67-13.237A33.9 33.9 0 0 1 6.008 5.341a33.9 33.9 0 0 1 10.806-7.286A33.8 33.8 0 0 1 30.05-4.618h.23a33.8 33.8 0 0 1 13.238 2.673A33.9 33.9 0 0 1 54.324 5.34a33.9 33.9 0 0 1 7.287 10.806 33.8 33.8 0 0 1 2.673 13.237 34.2 34.2 0 0 1-.892 7.765 33.7 33.7 0 0 1-2.543 7.14c-2.047 4.194-5.364 8.373-9.123 11.503M39.18 62.155c-.395-.25-1.745-1.253-3.06-3.076-1.262-1.742-2.748-4.632-2.67-8.502.05-2.33.516-4.597 1.4-6.74a19.2 19.2 0 0 1 3.7-5.78l.01-.013.35-.405c.6-.695 1.218-1.412 1.712-2.252a11.7 11.7 0 0 0 1.315-3.226 12.1 12.1 0 0 0 .066-5.257c-.335-1.586-1-3.123-1.95-4.448a12.1 12.1 0 0 0-3.438-3.238 12 12 0 0 0-4.626-1.685 12 12 0 0 0-1.693-.12h-.244a12 12 0 0 0-1.691.12 12 12 0 0 0-4.626 1.685 12.1 12.1 0 0 0-3.44 3.238 12.1 12.1 0 0 0-1.95 4.448 12.1 12.1 0 0 0 .068 5.257c.262 1.1.706 2.194 1.313 3.226.496.84 1.114 1.557 1.713 2.252l.352.405.007.013a19.1 19.1 0 0 1 3.703 5.78c.875 2.14 1.343 4.4 1.4 6.74.08 3.87-1.407 6.76-2.668 8.502-1.32 1.823-2.667 2.827-3.063 3.076l-1.97-.593a34 34 0 0 1-5.665-2.497 9.67 9.67 0 0 0 5.084-8.496c0-2.355-.915-4.613-2.72-6.7-.027-.032-.055-.058-.075-.08l-.54-.592-1.448-1.696a20.3 20.3 0 0 1-3.469-7.414 20.4 20.4 0 0 1-.112-8.882 20.4 20.4 0 0 1 3.301-7.537 20.5 20.5 0 0 1 5.807-5.469 20.3 20.3 0 0 1 7.84-2.856 20 20 0 0 1 2.853-.2h.256a20 20 0 0 1 2.854.2 20.35 20.35 0 0 1 7.841 2.856 20.5 20.5 0 0 1 5.808 5.47 20.4 20.4 0 0 1 3.303 7.537 20.5 20.5 0 0 1-.113 8.882 20.3 20.3 0 0 1-3.472 7.414c-.44.6-.93 1.127-1.45 1.696l-.523.577-.016.014c-.02.02-.05.048-.075.083-1.83 2.2-2.72 4.383-2.72 6.706a9.67 9.67 0 0 0 5.088 8.496 34 34 0 0 1-5.666 2.497l-1.973.593M30.165 36.42c-3.7 0-6.713-3.012-6.713-6.713s3.012-6.714 6.713-6.714 6.712 3.012 6.712 6.714a6.72 6.72 0 0 1-6.712 6.713"
-}));
-const ForwardRef = forwardRef(CephIcon);
+    "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: "M51.727 55.793c-2.427-1.3-3.813-2.746-4.12-4.326-.296-1.53.387-3.232 2.088-5.204a25.678 25.678 0 006.307-16.88C56.002 15.2 44.462 3.66 30.28 3.66h-.23C15.866 3.66 4.33 15.2 4.33 29.383a25.68 25.68 0 006.308 16.881c1.715 1.985 2.38 3.618 2.096 5.134-.295 1.578-1.684 3.054-4.132 4.392-3.754-3.13-7.073-7.308-9.12-11.5a34.577 34.577 0 01-2.542-7.14 34.106 34.106 0 01-.9-7.765 33.82 33.82 0 012.67-13.237A33.89 33.89 0 016.008 5.341a33.85 33.85 0 0110.806-7.286A33.768 33.768 0 0130.05-4.618h.23a33.78 33.78 0 0113.238 2.673A33.918 33.918 0 0154.324 5.34a33.91 33.91 0 017.287 10.806 33.81 33.81 0 012.673 13.237 34.18 34.18 0 01-.892 7.765 33.743 33.743 0 01-2.543 7.14c-2.047 4.194-5.364 8.373-9.123 11.503M39.18 62.155c-.395-.25-1.745-1.253-3.06-3.076-1.262-1.742-2.748-4.632-2.67-8.502.05-2.33.516-4.597 1.4-6.74a19.193 19.193 0 013.7-5.78l.01-.013.35-.405c.6-.695 1.218-1.412 1.712-2.252a11.66 11.66 0 001.315-3.226 12.14 12.14 0 00.066-5.257c-.335-1.586-1-3.123-1.95-4.448a12.115 12.115 0 00-3.438-3.238 12 12 0 00-4.626-1.685 11.83 11.83 0 00-1.693-.12h-.244a11.93 11.93 0 00-1.691.12 11.99 11.99 0 00-4.626 1.685 12.135 12.135 0 00-3.44 3.238 12.08 12.08 0 00-1.95 4.448 12.11 12.11 0 00.068 5.257c.262 1.1.706 2.194 1.313 3.226.496.84 1.114 1.557 1.713 2.252l.352.405.007.013a19.1 19.1 0 013.703 5.78c.875 2.14 1.343 4.4 1.4 6.74.08 3.87-1.407 6.76-2.668 8.502-1.32 1.823-2.667 2.827-3.063 3.076l-1.97-.593a33.91 33.91 0 01-5.665-2.497 9.67 9.67 0 005.084-8.496c0-2.355-.915-4.613-2.72-6.7-.027-.032-.055-.058-.075-.08l-.54-.592-1.448-1.696a20.3 20.3 0 01-3.469-7.414 20.43 20.43 0 01-.112-8.882 20.37 20.37 0 013.301-7.537 20.47 20.47 0 015.807-5.469 20.342 20.342 0 017.84-2.856 20.09 20.09 0 012.853-.2h.256a20.1 20.1 0 012.854.2 20.35 20.35 0 017.841 2.856 20.475 20.475 0 015.808 5.47 20.433 20.433 0 013.303 7.537 20.5 20.5 0 01-.113 8.882 20.3 20.3 0 01-3.472 7.414c-.44.6-.93 1.127-1.45 1.696l-.523.577-.016.014c-.02.02-.05.048-.075.083-1.83 2.2-2.72 4.383-2.72 6.706a9.667 9.667 0 005.088 8.496 33.95 33.95 0 01-5.666 2.497l-1.973.593M30.165 36.42c-3.7 0-6.713-3.012-6.713-6.713s3.012-6.714 6.713-6.714 6.712 3.012 6.712 6.714a6.72 6.72 0 01-6.712 6.713"
+  }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(CephIcon);
 module.exports = ForwardRef;

package/data1/CephNameIcon.js

@@ -6,30 +6,88 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const CephNameIcon = ({
+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 CephNameIcon({
   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: "-3.22 -4.4 65.729 65.302",
+    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: "-3.22 -4.4 65.729 65.302",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#f0424d" : (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: "M43.413 35.93c-1.613-.863-2.548-1.835-2.754-2.894-.198-1.023.258-2.16 1.396-3.478a17.17 17.17 0 0 0 4.216-11.283A17.22 17.22 0 0 0 29.076 1.079L29 1.08h-.077a17.22 17.22 0 0 0-17.195 17.195 17.17 17.17 0 0 0 4.217 11.284c1.146 1.327 1.593 2.42 1.412 3.432-.198 1.055-1.127 2.041-2.763 2.936-2.52-2.092-4.738-4.886-6.097-7.688A22.7 22.7 0 0 1 6.8 23.465a22.8 22.8 0 0 1-.595-5.191 22.6 22.6 0 0 1 1.785-8.85 22.7 22.7 0 0 1 4.872-7.223 22.7 22.7 0 0 1 7.224-4.87 22.6 22.6 0 0 1 8.849-1.787h.154a22.6 22.6 0 0 1 8.85 1.786 22.6 22.6 0 0 1 7.223 4.871 22.7 22.7 0 0 1 4.871 7.223 22.6 22.6 0 0 1 1.788 8.85c0 1.752-.202 3.498-.605 5.191a22.6 22.6 0 0 1-1.7 4.774c-1.369 2.802-3.586 5.598-6.099 7.69m-8.4 4.254c-.265-.167-1.167-.837-2.047-2.057a9.3 9.3 0 0 1-1.784-5.683 12.6 12.6 0 0 1 .93-4.507 12.8 12.8 0 0 1 2.473-3.864l.006-.01.234-.272c.4-.464.815-.945 1.144-1.505.407-.69.703-1.416.88-2.157a8.1 8.1 0 0 0 .044-3.515 8.1 8.1 0 0 0-1.305-2.974 8.1 8.1 0 0 0-2.298-2.164 8 8 0 0 0-3.093-1.126 8 8 0 0 0-1.132-.08h-.164a8 8 0 0 0-1.13.079 8 8 0 0 0-3.093 1.126 8.1 8.1 0 0 0-2.3 2.164 8.1 8.1 0 0 0-1.303 2.974 8.1 8.1 0 0 0 .046 3.515c.175.741.472 1.466.877 2.157.333.561.746 1.04 1.145 1.505l.235.272.005.01a12.8 12.8 0 0 1 2.475 3.864 12.5 12.5 0 0 1 .928 4.506 9.3 9.3 0 0 1-1.784 5.683c-.881 1.21-1.784 1.89-2.047 2.057l-1.317-.396a23.5 23.5 0 0 1-3.787-1.67 6.45 6.45 0 0 0 3.397-5.68c0-1.572-.612-3.084-1.818-4.486l-.05-.052-.361-.395-.968-1.134a13.6 13.6 0 0 1-2.319-4.956 13.7 13.7 0 0 1-.074-5.938 13.5 13.5 0 0 1 2.218-5.038 13.7 13.7 0 0 1 3.88-3.656 13.6 13.6 0 0 1 5.243-1.91 13 13 0 0 1 1.907-.133h.172a13.4 13.4 0 0 1 1.908.134 13.6 13.6 0 0 1 5.242 1.91 13.7 13.7 0 0 1 3.884 3.655 13.8 13.8 0 0 1 2.217 5.038 13.75 13.75 0 0 1-.075 5.948 13.6 13.6 0 0 1-2.32 4.956c-.303.403-.622.753-.969 1.134l-.35.386c-.025.023-.044.04-.06.065-1.223 1.461-1.818 2.93-1.818 4.483a6.46 6.46 0 0 0 3.402 5.68 22.7 22.7 0 0 1-3.788 1.669l-1.31.396M29 22.979a4.496 4.496 0 0 1-4.488-4.488A4.496 4.496 0 0 1 29 14.003a4.496 4.496 0 0 1 4.487 4.488A4.496 4.496 0 0 1 29 22.98"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#333c46" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 41%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 93%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 41%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 93%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 41%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M13.755 52.214c0 3.155-.282 4.027-1.042 4.788-.45.451-1.156.76-2.48.76H5.595c-1.492 0-2.393-.254-3.024-.872-.985-.985-1.266-2.169-1.266-6.73 0-4.562.282-5.747 1.266-6.732.621-.62 1.512-.872 3.024-.872h4.62c1.379 0 1.998.28 2.478.76.731.732 1.014 1.746 1.014 4.59h-2.843c-.058-1.972-.17-2.32-.339-2.479-.17-.159-.403-.252-1.041-.252h-3.52c-.874 0-1.11.085-1.295.283-.282.282-.423.806-.423 4.702s.14 4.422.423 4.703c.197.198.423.282 1.294.282h3.549c.62 0 .903-.056 1.109-.252.206-.195.31-.76.31-2.675h2.845m4.935-3.44h6.928c0-2.562-.17-3.125-.422-3.379-.171-.168-.423-.282-1.295-.282h-3.493c-.873 0-1.11.084-1.324.31-.254.253-.365.76-.403 3.35zm0 2.339c.03 2.984.197 3.576.423 3.8.227.225.424.283 1.295.283h3.931c.649 0 .847-.113 1.016-.282.195-.198.252-.535.31-1.888h2.842c-.056 2.365-.282 3.211-1.042 3.972-.478.48-1.126.76-2.478.76h-4.94c-1.492 0-2.394-.254-3.024-.872-.988-.985-1.267-2.169-1.267-6.73 0-4.562.28-5.747 1.267-6.732.62-.62 1.512-.872 3.024-.872h4.167c1.494 0 2.45.28 3.025.844.985.986 1.266 2.17 1.266 6.62v.76c0 .223-.084.337-.339.337h-9.496m21.314 3.69c-.252.252-.62.366-1.548.366h-2.198c-.901 0-1.683-.254-2.76-.802l-.197-.099V45.99c1.127-.563 1.916-.845 2.845-.845h2.319c.927 0 1.295.113 1.548.366.424.423.535 1.238.535 4.637 0 3.4-.113 4.234-.535 4.638zm-.847-12.281h-2.054c-1.268 0-1.887.282-3.803 1.86v-1.83h-2.926v18.57h2.928v-5.157c1.916 1.549 2.535 1.83 3.803 1.83h2.054c1.636 0 2.452-.282 3.1-.928.806-.806 1.21-1.972 1.21-6.704s-.396-5.887-1.21-6.704c-.648-.647-1.464-.93-3.1-.93m18.393.875c-.564-.565-1.295-.874-2.619-.874h-2.393c-1.267 0-1.887.282-3.802 1.86v-5.797a10.6 10.6 0 0 0-2.908-1.09c-.007 0-.013.006-.02.008v20.249h2.929V45.989l.607-.288c.822-.368 1.484-.556 2.238-.556h1.972c.986 0 1.267.113 1.577.423.282.283.403.731.403 1.464v10.731h2.93V46.836c0-2.113-.31-2.845-.901-3.436"
-}));
-const ForwardRef = forwardRef(CephNameIcon);
+    "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 ? "#f0424d" : (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: "M43.413 35.93c-1.613-.863-2.548-1.835-2.754-2.894-.198-1.023.258-2.16 1.396-3.478a17.166 17.166 0 004.216-11.283A17.219 17.219 0 0029.076 1.079L29 1.08h-.077a17.219 17.219 0 00-17.195 17.195 17.168 17.168 0 004.217 11.284c1.146 1.327 1.593 2.42 1.412 3.432-.198 1.055-1.127 2.041-2.763 2.936-2.52-2.092-4.738-4.886-6.097-7.688A22.723 22.723 0 016.8 23.465a22.803 22.803 0 01-.595-5.191 22.602 22.602 0 011.785-8.85 22.658 22.658 0 014.872-7.223 22.693 22.693 0 017.224-4.87 22.592 22.592 0 018.849-1.787h.154a22.602 22.602 0 018.85 1.786 22.637 22.637 0 017.223 4.871 22.672 22.672 0 014.871 7.223 22.602 22.602 0 011.788 8.85c0 1.752-.202 3.498-.605 5.191a22.612 22.612 0 01-1.7 4.774c-1.369 2.802-3.586 5.598-6.099 7.69m-8.4 4.254c-.265-.167-1.167-.837-2.047-2.057a9.31 9.31 0 01-1.784-5.683 12.561 12.561 0 01.93-4.507 12.803 12.803 0 012.473-3.864l.006-.01.234-.272c.4-.464.815-.945 1.144-1.505.407-.69.703-1.416.88-2.157a8.115 8.115 0 00.044-3.515 8.058 8.058 0 00-1.305-2.974 8.105 8.105 0 00-2.298-2.164 8.004 8.004 0 00-3.093-1.126 8.065 8.065 0 00-1.132-.08h-.164a7.974 7.974 0 00-1.13.079 8.014 8.014 0 00-3.093 1.126 8.105 8.105 0 00-2.3 2.164 8.075 8.075 0 00-1.303 2.974 8.095 8.095 0 00.046 3.515c.175.741.472 1.466.877 2.157.333.561.746 1.04 1.145 1.505l.235.272.005.01a12.749 12.749 0 012.475 3.864 12.53 12.53 0 01.928 4.506 9.31 9.31 0 01-1.784 5.683c-.881 1.21-1.784 1.89-2.047 2.057l-1.317-.396a23.467 23.467 0 01-3.787-1.67 6.454 6.454 0 003.397-5.68c0-1.572-.612-3.084-1.818-4.486a1.369 1.369 0 00-.05-.052l-.361-.395-.968-1.134a13.57 13.57 0 01-2.319-4.956 13.66 13.66 0 01-.074-5.938 13.542 13.542 0 012.218-5.038 13.673 13.673 0 013.88-3.656 13.59 13.59 0 015.243-1.91 13.317 13.317 0 011.907-.133h.172a13.438 13.438 0 011.908.134 13.59 13.59 0 015.242 1.91 13.69 13.69 0 013.884 3.655 13.826 13.826 0 012.217 5.038 13.75 13.75 0 01-.075 5.948 13.57 13.57 0 01-2.32 4.956c-.303.403-.622.753-.969 1.134l-.35.386c-.025.023-.044.04-.06.065-1.223 1.461-1.818 2.93-1.818 4.483a6.462 6.462 0 003.402 5.68 22.693 22.693 0 01-3.788 1.669l-1.31.396M29 22.979a4.496 4.496 0 01-4.488-4.488A4.496 4.496 0 0129 14.003a4.496 4.496 0 014.487 4.488A4.496 4.496 0 0129 22.98"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#333c46" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 41%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 93%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 41%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 93%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 41%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M13.755 52.214c0 3.155-.282 4.027-1.042 4.788-.45.451-1.156.76-2.48.76H5.595c-1.492 0-2.393-.254-3.024-.872-.985-.985-1.266-2.169-1.266-6.73 0-4.562.282-5.747 1.266-6.732.621-.62 1.512-.872 3.024-.872h4.62c1.379 0 1.998.28 2.478.76.731.732 1.014 1.746 1.014 4.59h-2.843c-.058-1.972-.17-2.32-.339-2.479-.17-.159-.403-.252-1.041-.252h-3.52c-.874 0-1.11.085-1.295.283-.282.282-.423.806-.423 4.702 0 3.897.14 4.422.423 4.703.197.198.423.282 1.294.282h3.549c.62 0 .903-.056 1.109-.252.206-.195.31-.76.31-2.675h2.845m4.935-3.44h6.928c0-2.562-.17-3.125-.422-3.379-.171-.168-.423-.282-1.295-.282h-3.493c-.873 0-1.11.084-1.324.31-.254.253-.365.76-.403 3.35zm0 2.339c.03 2.984.197 3.576.423 3.8.227.225.424.283 1.295.283h3.931c.649 0 .847-.113 1.016-.282.195-.198.252-.535.31-1.888h2.842c-.056 2.365-.282 3.211-1.042 3.972-.478.48-1.126.76-2.478.76h-4.94c-1.492 0-2.394-.254-3.024-.872-.988-.985-1.267-2.169-1.267-6.73 0-4.562.28-5.747 1.267-6.732.62-.62 1.512-.872 3.024-.872h4.167c1.494 0 2.45.28 3.025.844.985.986 1.266 2.17 1.266 6.62v.76c0 .223-.084.337-.339.337h-9.496m21.314 3.69c-.252.252-.62.366-1.548.366h-2.198c-.901 0-1.683-.254-2.76-.802l-.197-.099V45.99c1.127-.563 1.916-.845 2.845-.845h2.319c.927 0 1.295.113 1.548.366.424.423.535 1.238.535 4.637 0 3.4-.113 4.234-.535 4.638zm-.847-12.281h-2.054c-1.268 0-1.887.282-3.803 1.86v-1.83h-2.926v18.57h2.928v-5.157c1.916 1.549 2.535 1.83 3.803 1.83h2.054c1.636 0 2.452-.282 3.1-.928.806-.806 1.21-1.972 1.21-6.704 0-4.732-.396-5.887-1.21-6.704-.648-.647-1.464-.93-3.1-.93m18.393.875c-.564-.565-1.295-.874-2.619-.874h-2.393c-1.267 0-1.887.282-3.802 1.86v-5.797a10.565 10.565 0 00-2.908-1.09c-.007 0-.013.006-.02.008v20.249h2.929V45.989l.607-.288c.822-.368 1.484-.556 2.238-.556h1.972c.986 0 1.267.113 1.577.423.282.283.403.731.403 1.464v10.731h2.93V46.836c0-2.113-.31-2.845-.901-3.436"
+  }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(CephNameIcon);
 module.exports = ForwardRef;

package/data1/CloudIcon.js

@@ -6,27 +6,85 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const CloudIcon = ({
+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 CloudIcon({
   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",
+    className: "prefix__icon",
+    viewBox: "0 0 896 896",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-  className: "prefix__icon",
-  viewBox: "0 0 896 896",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("path", {
-  d: "M747.4 354.7C701.6 233.9 584.9 148 448.2 148S194.8 233.8 149 354.6C63.3 377.1 0 455.1 0 548c0 110.5 89.5 200 199.9 200h496.2C806.5 748 896 658.5 896 548c0-92.7-63.1-170.7-148.6-193.3m36.3 281a123.07 123.07 0 0 1-87.6 36.3H199.9c-33.1 0-64.2-12.9-87.6-36.3A123.3 123.3 0 0 1 76 548c0-28 9.1-54.3 26.2-76.3a125.7 125.7 0 0 1 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0 1 52.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10c54.3 14.5 92.1 63.8 92.1 120 0 33.1-12.9 64.3-36.3 87.7"
-}));
-const ForwardRef = forwardRef(CloudIcon);
+    fill: (themed ? "var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor))" : "var(--datalayer-icon-color, currentColor)"),
+    "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: "M747.4 354.7C701.6 233.9 584.9 148 448.2 148S194.8 233.8 149 354.6C63.3 377.1 0 455.1 0 548c0 110.5 89.5 200 199.9 200h496.2C806.5 748 896 658.5 896 548c0-92.7-63.1-170.7-148.6-193.3zm36.3 281a123.07 123.07 0 01-87.6 36.3H199.9c-33.1 0-64.2-12.9-87.6-36.3A123.3 123.3 0 0176 548c0-28 9.1-54.3 26.2-76.3a125.7 125.7 0 0166.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0152.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10c54.3 14.5 92.1 63.8 92.1 120 0 33.1-12.9 64.3-36.3 87.7z"
+  }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(CloudIcon);
 module.exports = ForwardRef;

package/data1/CloudUploadIcon.js

@@ -6,29 +6,87 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const CloudUploadIcon = ({
+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 CloudUploadIcon({
   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",
+    className: "prefix__icon",
+    viewBox: "0 0 1024 1024",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-  className: "prefix__icon",
-  viewBox: "0 0 1024 1024",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("path", {
-  d: "M518.3 459a8 8 0 0 0-12.6 0l-112 141.7a7.98 7.98 0 0 0 6.3 12.9h73.9V856c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V613.7H624c6.7 0 10.4-7.7 6.3-12.9z"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M811.4 366.7C765.6 245.9 648.9 160 512.2 160S258.8 245.8 213 366.6C127.3 389.1 64 467.2 64 560c0 110.5 89.5 200 199.9 200H304c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8h-40.1c-33.7 0-65.4-13.4-89-37.7-23.5-24.2-36-56.8-34.9-90.6.9-26.4 9.9-51.2 26.2-72.1 16.7-21.3 40.1-36.8 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0 1 52.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10C846.1 454.5 884 503.8 884 560c0 33.1-12.9 64.3-36.3 87.7a123.07 123.07 0 0 1-87.6 36.3H720c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h40.1C870.5 760 960 670.5 960 560c0-92.7-63.1-170.7-148.6-193.3"
-}));
-const ForwardRef = forwardRef(CloudUploadIcon);
+    fill: (themed ? "var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor))" : "var(--datalayer-icon-color, currentColor)"),
+    "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: "M518.3 459a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V856c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V613.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 459z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M811.4 366.7C765.6 245.9 648.9 160 512.2 160S258.8 245.8 213 366.6C127.3 389.1 64 467.2 64 560c0 110.5 89.5 200 199.9 200H304c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8h-40.1c-33.7 0-65.4-13.4-89-37.7-23.5-24.2-36-56.8-34.9-90.6.9-26.4 9.9-51.2 26.2-72.1 16.7-21.3 40.1-36.8 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0152.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10C846.1 454.5 884 503.8 884 560c0 33.1-12.9 64.3-36.3 87.7a123.07 123.07 0 01-87.6 36.3H720c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h40.1C870.5 760 960 670.5 960 560c0-92.7-63.1-170.7-148.6-193.3z"
+  }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(CloudUploadIcon);
 module.exports = ForwardRef;