@datalayer/icons-react 1.0.14 → 1.0.15

package/data2/esm/FileCabinetIcon.js

@@ -6,51 +6,109 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const FileCabinetIcon = ({
+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 FileCabinetIcon({
   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 72 72",
+    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 72 72",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#3f3f3f" : (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: "M18 55h36V13H18z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#d0cfce" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M22.27 17.011v14h27.499v-14h-27.5zM49.769 50.83v-14h-27.5v14z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#9B9B9A" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M29.947 19.677H41.93v4.357H29.947zm-.352 20.116h12.679v4.067H29.595z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#d0cfce" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M17.009 60.003H55"
-}), /*#__PURE__*/React.createElement("g", {
-  fill: "none",
-  stroke: colored ? "#000" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeMiterlimit: 10,
-  strokeWidth: 2
-}, /*#__PURE__*/React.createElement("path", {
-  d: "M17 12h38v44H17zm.009 48.003H55"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M21.269 35.829h29.5v16h-29.5z"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M29.735 39.713h12.399v4.116H29.735zm12.399 8.116H29.735m-8.466-31.818h29.5v16h-29.5z"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M29.735 19.895h12.399v4.116H29.735zm12.399 8.116H29.735"
-})));
-const ForwardRef = forwardRef(FileCabinetIcon);
+    "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 ? "#3f3f3f" : (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: "M18 55h36V13H18v42z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#d0cfce" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M22.27 17.011v14h27.499v-14h-27.5zM49.769 50.83v-14h-27.5v14h27.5z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#9B9B9A" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M29.947 19.677H41.93v4.357H29.947zm-.352 20.116h12.679v4.067H29.595z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#d0cfce" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M17.009 60.003H55"
+  }), /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    stroke: colored ? "#000" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeMiterlimit: 10,
+    strokeWidth: 2
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M17 12h38v44H17zm.009 48.003H55"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M21.269 35.829h29.5v16h-29.5z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M29.735 39.713h12.399v4.116H29.735zm12.399 8.116H29.735m-8.466-31.818h29.5v16h-29.5z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M29.735 19.895h12.399v4.116H29.735zm12.399 8.116H29.735"
+  })));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(FileCabinetIcon);
 export default ForwardRef;

package/data2/esm/FileCardBoxIcon.js

@@ -6,73 +6,131 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const FileCardBoxIcon = ({
+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 FileCardBoxIcon({
   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 72 72",
+    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 72 72",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#d0cfce" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M11.88 59.884h47.654V42.679H11.88z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#9B9B9A" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "m59.681 21.834-47.744-.096v18.511l5.2-.23c1.24-.843.42-5.67.487-5.803-.002-.842-.083-4.857.06-5.195.287-.677 9.94-.079 9.936-.06l1.397 4.131c.122-.164 10.088-1.839 10.088-1.839.134 0 2.858 5.56 2.858 5.56.05-.055 12.542 2.733 12.509 2.832l1.707.168 3.43.055z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#d0cfce" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M55.76 38.822c-.026.076-3.952-.878-6.284-.899-9.489-.086-32.114.803-32.52.699-.418-.107-1.81.3-1.884.152.004.546-.117 1.535-.091 2.491l40.703.037z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#3f3f3f" : (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: "M16.346 38.82c-.026-.051-.04-.105-.057-.16l-4.286.053-.091 2.977 4.497.487c-.025-.928-.058-2.79-.063-3.357"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#d0cfce" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M16.498 33.866c.033-.036.07-.064.109-.095a1 1 0 0 1 .175-.118q.053-.029.108-.05a1 1 0 0 1 .342-.07H28.52v-.273c0-.448.114-.866.3-1.242q.017-.035.037-.069c.044-.084.084-.171.136-.25l-.084.133c-.005.013-.014.026-.016.04h-.009c-.041.07-2.212-1.397-2.226-1.36 0 0-4.015-1.191-8.534.255-.165.053-1.219 1.238-1.361 1.16q-.024-.014-.046-.03a1 1 0 0 1-.336-.344c-.013-.023-.032-.042-.044-.066v2.619q.065-.132.162-.24zm.117 3.745a1 1 0 0 1 .166-.112q.054-.029.111-.052a1 1 0 0 1 .34-.068h24.135v-.152q.002-.256.054-.498c.02-.103.058-.2.09-.3.018-.048.03-.1.05-.147q.081-.194.194-.374l.016-.026q.123-.194.279-.365l.008-.013-1.36-1.988-8.38.556-2.808 1.467a.9.9 0 0 0 .317-.068c-.025.008-.053.01-.078.016-.076.018-.149.046-.23.046H17.232a.94.94 0 0 1-.452-.121 1 1 0 0 1-.152-.102 1 1 0 0 1-.273-.321v-.001c.009.79-.007 2.107-.012 2.953q.062-.125.154-.228c.036-.04.077-.069.118-.102"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#9B9B9A" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M28.589 47.449H42.81v6.431H28.589z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#d0cfce" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M28.865 28.1q-.017-.023-.035-.045c-.017-.02-.041-.038-.061-.057q.022.021.043.046.028.027.053.056m.061 1.203a1 1 0 0 0 .15-.333v-.023a.995.995 0 0 1-.809.76 1 1 0 0 0 .659-.404"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#fcea2b" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M54.142 39.379c-.47 0 .455-2.098.455-2.098 0-.355-1.142-1.713-1.591-1.713l-8.872.055c-.224 0-1.477 1.482-1.477 1.658l-.944 1.101c0 .452-.253.593-.664.717l1.558.27z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#92d3f5" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "m42.021 35.505-.055-3.132c-.007-.014-.02-.032-.027-.047.012.087-1.165.308-1.408-.187-.14-.288-.895-.766-1.216-.766l-7.857-.135c-.457 0-1.689.714-1.689 1.17l-.495 2.162c0 .553-1.114.968-1.666.968z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#3f3f3f" : (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: "m59.411 38.663-4.47.027.022 3.24 4.402-.08z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#d0cfce" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M11.742 15.113h47.916v6.522H11.742zm5.884 16.866c.02-.009.035-.026.054-.036-.02.01-.033.027-.054.036m1.446-2.599h7.968-7.979zm-.593.241c-.022.021-.033.05-.052.074.02-.023.03-.053.052-.074"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#ea5a47" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 58%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 76%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 58%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 76%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 58%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "m29.072 31.576.013-2.628c-.029.124-.947-.373-1.398-.693-.14-.1-8.566-.038-8.566-.038-.457 0-2.076 2.058-2.076 2.058s.609 1.777.056 1.777l11.689-.007c.042-.111.282-.469.282-.469"
-}), /*#__PURE__*/React.createElement("g", {
-  fill: "none",
-  stroke: colored ? "#000" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeMiterlimit: 10,
-  strokeWidth: 2
-}, /*#__PURE__*/React.createElement("path", {
-  d: "m11.751 21.62.012 20.692H59.75l-.012-20.693"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M11.726 15.003h48.011v6.617H11.726zm.037 27.309h47.986v17.362H11.763z"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M28.61 47.061h14.426v6.848H28.61zm-.507-18.341c-.3-.214-.667-.34-1.064-.34h-7.977a1.83 1.83 0 0 0-1.83 1.829v.852m23.738 1.396a1.83 1.83 0 0 0-1.645-1.027h-7.977a1.83 1.83 0 0 0-1.83 1.83v1.273H17.234m36.769 3.846v-1.153c0-.914-.819-1.655-1.829-1.655h-7.977c-1.01 0-1.83.741-1.83 1.655v1.153H17.233"
-})));
-const ForwardRef = forwardRef(FileCardBoxIcon);
+    "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 ? "#d0cfce" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M11.88 59.884h47.654V42.679H11.88v17.205z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#9B9B9A" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M59.681 21.834l-47.744-.096v18.511l5.2-.23c1.24-.843.42-5.67.487-5.803-.002-.842-.083-4.857.06-5.195.287-.677 9.94-.079 9.936-.06l1.397 4.131c.122-.164 10.088-1.839 10.088-1.839.134 0 2.858 5.56 2.858 5.56.05-.055 12.542 2.733 12.509 2.832l1.707.168 3.43.055.072-18.034z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#d0cfce" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M55.76 38.822c-.026.076-3.952-.878-6.284-.899-9.489-.086-32.114.803-32.52.699-.418-.107-1.81.3-1.884.152.004.546-.117 1.535-.091 2.491l40.703.037.075-2.48z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#3f3f3f" : (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: "M16.346 38.82c-.026-.051-.04-.105-.057-.16l-4.286.053-.091 2.977 4.497.487c-.025-.928-.058-2.79-.063-3.357z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#d0cfce" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M16.498 33.866c.033-.036.07-.064.109-.095a.98.98 0 01.175-.118c.036-.018.07-.037.108-.05a.949.949 0 01.342-.07H28.52v-.273c0-.448.114-.866.3-1.242.011-.024.024-.046.037-.069.044-.084.084-.171.136-.25a7.285 7.285 0 00-.084.133c-.005.013-.014.026-.016.04h-.009c-.041.07-2.212-1.397-2.226-1.36 0 0-4.015-1.191-8.534.255-.165.053-1.219 1.238-1.361 1.16-.017-.009-.03-.02-.046-.03a.979.979 0 01-.336-.344c-.013-.023-.032-.042-.044-.066v2.619c.043-.088.098-.168.162-.24zm.117 3.745a.979.979 0 01.166-.112c.037-.019.072-.037.111-.052a.955.955 0 01.34-.068h24.135v-.152c0-.171.02-.337.054-.498.02-.103.058-.2.09-.3.018-.048.03-.1.05-.147.053-.13.12-.254.194-.374l.016-.026c.082-.13.175-.25.279-.365a.742.742 0 01.008-.013l-1.36-1.988-8.38.556-2.808 1.467a.855.855 0 00.317-.068c-.025.008-.053.01-.078.016-.076.018-.149.046-.23.046H17.232a.944.944 0 01-.452-.121.967.967 0 01-.152-.102.98.98 0 01-.273-.321v-.001c.009.79-.007 2.107-.012 2.953.041-.083.093-.16.154-.228.036-.04.077-.069.118-.102z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#9B9B9A" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M28.589 47.449H42.81v6.431H28.589z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#d0cfce" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M28.865 28.1c-.012-.015-.022-.03-.035-.045-.017-.02-.041-.038-.061-.057.016.014.028.03.043.046.018.018.037.036.053.056zm.061 1.203a.988.988 0 00.15-.333v-.023a.995.995 0 01-.809.76.995.995 0 00.659-.404z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#fcea2b" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M54.142 39.379c-.47 0 .455-2.098.455-2.098 0-.355-1.142-1.713-1.591-1.713l-8.872.055c-.224 0-1.477 1.482-1.477 1.658l-.944 1.101c0 .452-.253.593-.664.717l1.558.27 11.535.01z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#92d3f5" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M42.021 35.505l-.055-3.132c-.007-.014-.02-.032-.027-.047.012.087-1.165.308-1.408-.187-.14-.288-.895-.766-1.216-.766l-7.857-.135c-.457 0-1.689.714-1.689 1.17l-.495 2.162c0 .553-1.114.968-1.666.968l14.413-.033z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#3f3f3f" : (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: "M59.411 38.663l-4.47.027.022 3.24 4.402-.08z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#d0cfce" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M11.742 15.113h47.916v6.522H11.742zm5.884 16.866c.02-.009.035-.026.054-.036-.02.01-.033.027-.054.036zm1.446-2.599h7.968-7.979a.813.813 0 00.01 0zm-.593.241c-.022.021-.033.05-.052.074.02-.023.03-.053.052-.074z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#ea5a47" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 58%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 76%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 58%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 76%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 58%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M29.072 31.576l.013-2.628c-.029.124-.947-.373-1.398-.693-.14-.1-8.566-.038-8.566-.038-.457 0-2.076 2.058-2.076 2.058s.609 1.777.056 1.777l11.689-.007c.042-.111.282-.469.282-.469z"
+  }), /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    stroke: colored ? "#000" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeMiterlimit: 10,
+    strokeWidth: 2
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M11.751 21.62l.012 20.692H59.75l-.012-20.693"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M11.726 15.003h48.011v6.617H11.726zm.037 27.309h47.986v17.362H11.763z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M28.61 47.061h14.426v6.848H28.61zm-.507-18.341c-.3-.214-.667-.34-1.064-.34h-7.977a1.83 1.83 0 00-1.83 1.829v.852m23.738 1.396a1.83 1.83 0 00-1.645-1.027h-7.977a1.83 1.83 0 00-1.83 1.83v1.273H17.234m36.769 3.846v-1.153c0-.914-.819-1.655-1.829-1.655h-7.977c-1.01 0-1.83.741-1.83 1.655v1.153H17.233"
+  })));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(FileCardBoxIcon);
 export default ForwardRef;

package/data2/esm/FireIcon.js

@@ -6,38 +6,96 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const FireIcon = ({
+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 FireIcon({
   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 72 72",
+    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 72 72",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#FCEA2B" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M51.334 58.302c7.563-9.79 4.032-21.872 2.446-25.569-.18-.42-.93-.557-.981-.1-.123 1.08-.407 2.36-2.005 1.973-.82-.199-1.347-.556-1.347-1.88.51-15.05-10.511-25.297-14.347-28.536-.51-.43-1.267.03-1.159.704 2.456 15.335-1.607 14.285-3.098 13.82a.56.56 0 0 0-.66.307c-4.589 9.701-3.412 14.265-3.52 17.445v.958c0 1.746-1.415 2.583-2.56 2.072-2.055-.917-2.405-6.373-2.414-7.824-.004-.683-.809-.879-1.202-.332-8.804 12.267-2.325 23.198-.082 26.317.646.899.903 2.075.536 3.13q-.062.177-.147.35c-.399.797.67 1.4.67 1.4 1.316 1.233 5.466 5.18 14.283 5.18 7.134 0 11.947-3.06 13.83-4.725.882-.781 1.275-.86 1.273-1.683-.004-.985-.026-2.502.484-3.007"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#F1B31C" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M36.294 32.558c-.295 1.46-1.32 4.002-4.207 8.35l-.177.317c-.309.689-1.355 3.341-1.062 7.051 0 .002-.573 4.337-2.977 3.976a3 3 0 0 1-1.254-.477c-.61-.416-1.423.108-1.349.852.32 3.192 1.604 8.082 6.153 11.672 0 0 1.283 1.06 1.442 1.975.005.03.029.05.059.05h5.274c.183 0 .208-.023.213-.059.036-.24.365-1.25 3.203-3.773 1.996-1.775 3.165-3.898 3.742-5.348.205-.515-.1-1.117-.639-1.207-.344-.057-.713-.36-1.013-1.184v-.002c-.007-.023-.218-.838.6-2.56.381-.8.425-1.664.36-2.365a.884.884 0 0 0-1.281-.716c-.784.397-1.87.53-2.6-1.075 0 0-.658-1.566-.085-5.451.437-2.966-1.01-7.862-2.828-10.375-.449-.62-1.422-.406-1.574.349"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: "none",
-  stroke: colored ? "#000" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeMiterlimit: 10,
-  strokeWidth: 2,
-  d: "M21.63 61.556c3.479 3.611 8.67 5.476 13.992 5.476 5.055 0 10.708-1.963 14.241-5.468M21.51 57.456s-10.531-11.201-.454-25.98c0 0 .197 4.06 1.255 6.582.484 1.036 1.212 1.957 2.349 1.957 1.335 0 2.418-.897 2.418-2.57v-.92c.105-3.099-.525-7.665 3.57-17.19 0 0 7.037 3.784 3.992-14.611 0 0 14.88 10.442 14.276 28.217 0 1.269.968 2.298 2.162 2.298s2.161-1.029 2.161-2.298c.075.134 6.322 13.078-2.514 24.515M22.82 22.973a5.7 5.7 0 0 1 1.923-3.319s1.902-1.635 1.595-3.83"
-}));
-const ForwardRef = forwardRef(FireIcon);
+    "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 ? "#FCEA2B" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M51.334 58.302c7.563-9.79 4.032-21.872 2.446-25.569-.18-.42-.93-.557-.981-.1-.123 1.08-.407 2.36-2.005 1.973-.82-.199-1.347-.556-1.347-1.88.51-15.05-10.511-25.297-14.347-28.536-.51-.43-1.267.03-1.159.704 2.456 15.335-1.607 14.285-3.098 13.82a.557.557 0 00-.66.307c-4.589 9.701-3.412 14.265-3.52 17.445v.958c0 1.746-1.415 2.583-2.56 2.072-2.055-.917-2.405-6.373-2.414-7.824-.004-.683-.809-.879-1.202-.332-8.804 12.267-2.325 23.198-.082 26.317.646.899.903 2.075.536 3.13-.042.118-.09.235-.147.35-.399.797.67 1.4.67 1.4 1.316 1.233 5.466 5.18 14.283 5.18 7.134 0 11.947-3.06 13.83-4.725.882-.781 1.275-.86 1.273-1.683-.004-.985-.026-2.502.484-3.007"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#F1B31C" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M36.294 32.558c-.295 1.46-1.32 4.002-4.207 8.35l-.177.317c-.309.689-1.355 3.341-1.062 7.051 0 .002-.573 4.337-2.977 3.976a2.982 2.982 0 01-1.254-.477c-.61-.416-1.423.108-1.349.852.32 3.192 1.604 8.082 6.153 11.672 0 0 1.283 1.06 1.442 1.975.005.03.029.05.059.05h5.274c.183 0 .208-.023.213-.059.036-.24.365-1.25 3.203-3.773 1.996-1.775 3.165-3.898 3.742-5.348.205-.515-.1-1.117-.639-1.207-.344-.057-.713-.36-1.013-1.184v-.002c-.007-.023-.218-.838.6-2.56.381-.8.425-1.664.36-2.365a.884.884 0 00-1.281-.716c-.784.397-1.87.53-2.6-1.075 0 0-.658-1.566-.085-5.451.437-2.966-1.01-7.862-2.828-10.375-.449-.62-1.422-.406-1.574.349z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M21.63 61.556c3.479 3.611 8.67 5.476 13.992 5.476 5.055 0 10.708-1.963 14.241-5.468M21.51 57.456s-10.531-11.201-.454-25.98c0 0 .197 4.06 1.255 6.582.484 1.036 1.212 1.957 2.349 1.957 1.335 0 2.418-.897 2.418-2.57v-.92c.105-3.099-.525-7.665 3.57-17.19 0 0 7.037 3.784 3.992-14.611 0 0 14.88 10.442 14.276 28.217 0 1.269.968 2.298 2.162 2.298s2.161-1.029 2.161-2.298c.075.134 6.322 13.078-2.514 24.515M22.82 22.973a5.694 5.694 0 011.923-3.319s1.902-1.635 1.595-3.83",
+    fill: "none",
+    stroke: colored ? "#000" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeMiterlimit: 10,
+    strokeWidth: 2
+  }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(FireIcon);
 export default ForwardRef;