@datalayer/icons-react 1.0.14 → 1.0.15

package/data2/SchoolIcon.js

@@ -6,38 +6,96 @@ const sizeMap = {
   "large": 64
 };
 
-const { forwardRef } = require("react");
-const SchoolIcon = ({
+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 SchoolIcon({
   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)"),
+    "aria-hidden": "true",
     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("g", {
-  fill: "none",
-  stroke: (themed ? "var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor))" : "var(--datalayer-icon-color, currentColor)"),
-  strokeWidth: 1.364
-}, /*#__PURE__*/React.createElement("path", {
-  strokeLinejoin: "round",
-  d: "M.91 14.09a.91.91 0 0 1 .908-.908h2.727V10L10 6.364 15.454 10v3.182h2.728a.91.91 0 0 1 .909.909v4.09a.91.91 0 0 1-.91.91H.91v-5z"
-}), /*#__PURE__*/React.createElement("path", {
-  strokeLinecap: "round",
-  d: "M10 1.818v4.546"
-}), /*#__PURE__*/React.createElement("path", {
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  d: "M11.818 19.09v-5.908H8.182v5.909m-.91 0h5.455m2.727-14.546V1.818s-.681 1.364-2.727 0c-2.045-1.363-2.727 0-2.727 0v2.727s.682-1.363 2.727 0c2.046 1.364 2.727 0 2.727 0"
-})));
-const ForwardRef = forwardRef(SchoolIcon);
+    viewBox: "0 0 20 20",
+    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("g", {
+    fill: "none",
+    stroke: (themed ? "var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor))" : "var(--datalayer-icon-color, currentColor)"),
+    strokeWidth: 1.364
+  }, /*#__PURE__*/React.createElement("path", {
+    strokeLinejoin: "round",
+    d: "M.91 14.09a.91.91 0 01.908-.908h2.727V10L10 6.364 15.454 10v3.182h2.728a.909.909 0 01.909.909v4.09a.909.909 0 01-.91.91H.91v-5z"
+  }), /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    d: "M10 1.818v4.546"
+  }), /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M11.818 19.09v-5.908H8.182v5.909m-.91 0h5.455m2.727-14.546V1.818s-.681 1.364-2.727 0c-2.045-1.363-2.727 0-2.727 0v2.727s.682-1.363 2.727 0c2.046 1.364 2.727 0 2.727 0z"
+  })));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(SchoolIcon);
 module.exports = ForwardRef;

package/data2/ScientistIcon.js

@@ -6,78 +6,136 @@ const sizeMap = {
   "large": 64
 };
 
-const { forwardRef } = require("react");
-const ScientistIcon = ({
+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 ScientistIcon({
   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 ? "#FFF" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M17.254 58.726s-2-13.5 10-13.5c3.192 2.128 5.927 3.598 9 3.592h-.125c3.074.006 5.508-2.164 8.7-4.292 15.57 0 10.7 14.2 10.7 14.2"
-}), /*#__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: "M46.74 44.753c-3.17 2.113-4.876 3-8.938 3.589 13.062.411 13.062 5.411 13.824 9.411h5.113s2-13-10-13z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#FFF" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M58.474 43.099h-1.18v6.478l3.866 8.838s.308 1.381-.792 1.381l-10.385.012c-1.101 0-.793-1.38-.793-1.38l3.866-8.83v-6.5h-1.085"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: "none",
-  d: "M53.056 43.099h4.238"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#B1CC33" : (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: "m57.294 49.577 3.866 8.838s.308 1.381-.792 1.381l-10.385.012c-1.101 0-.793-1.38-.793-1.38l3.866-8.83"
-}), /*#__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: "M23.149 25.003s12.703-7.023 26.25.802l-3.884 6.025s-6.71.933-9.241-1.6c-2.592 2.592-8.49 1.6-8.49 1.6z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#E27022" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M36 9.58c-10 0-14 7-14 14s0 13 4 13h20c4 0 4-6 4-13s-4-14-14-14m9.515 22.25s-6.71.933-9.241-1.6c-2.592 2.592-8.49 1.6-8.49 1.6l-4.635-6.827s12.703-7.023 26.25.802z"
-}), /*#__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: "M47.187 24.659c-.514-.34-1.015-.682-1.187-1.078-3-3-7-8-7-8-4 3-7 6-13 7 0 0-1.253.55-1.92 1.97 2.953-1.325 12.569-4.814 23.107.108m-1.672 7.171s-6.71.933-9.241-1.6c-2.592 2.592-8.49 1.6-8.49 1.6l-4.082-6.012c-.1.797 1.235 1.513 1.235 2.763 0 9 4.936 14 11 14 5.71 0 10.657-4.637 11.027-12.999z"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M37.562 58.953a1 1 0 0 1-1-1v-4.425c-6.164-1.165-10.689-7.72-10.888-8.012a1 1 0 0 1 1.653-1.126c.046.067 4.65 6.722 10.332 7.278a1 1 0 0 1 .902.995v5.29a1 1 0 0 1-1 1z"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M16.993 58.952a1 1 0 0 1-.986-.846c-.041-.27-.973-6.633 2.58-10.776 1.924-2.241 4.752-3.377 8.408-3.377a1 1 0 0 1 .555.168c3.153 2.103 5.66 3.41 8.383 3.424 2.722-.013 5.23-1.321 8.382-3.424a1 1 0 0 1 .555-.168c1.907 0 3.61.316 5.06.937a1 1 0 0 1 .525 1.312 1 1 0 0 1-1.312.526c-1.127-.483-2.463-.742-3.976-.772-3.31 2.186-6.027 3.546-9.128 3.588-.015 0-.031.003-.044 0h-.125c-.018.003-.03 0-.044 0-3.1-.042-5.817-1.402-9.128-3.588-2.896.057-5.11.954-6.586 2.669-2.956 3.437-2.137 9.12-2.129 9.178a1 1 0 0 1-.99 1.15z"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M49.982 60.808c-.58 0-1.08-.227-1.41-.64-.593-.737-.402-1.762-.357-1.959a1 1 0 0 1 .06-.184l3.782-8.635v-5.291h-.086a1 1 0 1 1 0-2h1.086a1 1 0 0 1 1 1v6.5a1 1 0 0 1-.084.401l-3.817 8.714q-.005.045-.006.093l10.05-.011a1 1 0 0 0-.007-.095l-3.815-8.723a1 1 0 0 1-.084-.4v-6.48a1 1 0 0 1 1-1h1.18a1 1 0 1 1 0 2h-.18v5.27l3.782 8.647a1 1 0 0 1 .06.182c.045.197.235 1.221-.357 1.96-.33.412-.832.639-1.412.639z"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M57.294 44.099h-4.237a1 1 0 1 1 0-2h4.237a1 1 0 1 1 0 2M41.953 27.047a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-8 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0m2 10.003a7.65 7.65 0 0 1-3.448-.859 1 1 0 0 1 .895-1.789c1.593.86 3.512.86 5.106 0a1 1 0 0 1 .894 1.79 7.65 7.65 0 0 1-3.447.857z"
-}), /*#__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",
-  strokeWidth: 2,
-  d: "M26 36.58c-4 0-4-6-4-13s4-14 14-14 14 7 14 14 0 13-4 13"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M30.057 33.016c-1.485 0-2.605-.182-2.713-.2a1 1 0 0 1-.661-.424l-4.635-6.827a1 1 0 0 1 .344-1.437c.538-.298 13.355-7.205 27.233.811a1 1 0 0 1 .34 1.407l-3.882 6.026a1 1 0 0 1-.703.448c-.68.095-6.307.796-9.373-1.295-1.719 1.212-4.113 1.49-5.95 1.49zm-1.968-2.113c1.763.215 5.531.293 7.204-1.38a1 1 0 0 1 1.414 0c1.651 1.653 5.938 1.582 7.95 1.37l3.048-4.73c-10.415-5.5-20.253-2.1-23.348-.757z"
-}), /*#__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))))")),
-  strokeLinejoin: "round",
-  strokeWidth: 2,
-  d: "M24.948 27.69a36 36 0 0 0-.012.89c0 9 4.937 14 11 14 5.726 0 10.7-4.65 11.045-13.056"
-}), /*#__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",
-  strokeWidth: 2,
-  d: "M46 23.58c-3-3-7-8-7-8-4 3-7 6-13 7.001 0 0-.266.25-.532 1.125"
-}));
-const ForwardRef = forwardRef(ScientistIcon);
+    "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 ? "#FFF" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M17.254 58.726s-2-13.5 10-13.5c3.192 2.128 5.927 3.598 9 3.592h-.125c3.074.006 5.508-2.164 8.7-4.292 15.57 0 10.7 14.2 10.7 14.2"
+  }), /*#__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: "M46.74 44.753c-3.17 2.113-4.876 3-8.938 3.589 13.062.411 13.062 5.411 13.824 9.411h5.113s2-13-10-13z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#FFF" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M58.474 43.099h-1.18v6.478l3.866 8.838s.308 1.381-.792 1.381l-10.385.012c-1.101 0-.793-1.38-.793-1.38l3.866-8.83v-6.5h-1.085"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    d: "M53.056 43.099h4.238"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#B1CC33" : (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: "M57.294 49.577l3.866 8.838s.308 1.381-.792 1.381l-10.385.012c-1.101 0-.793-1.38-.793-1.38l3.866-8.83"
+  }), /*#__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: "M23.149 25.003s12.703-7.023 26.25.802l-3.884 6.025s-6.71.933-9.241-1.6c-2.592 2.592-8.49 1.6-8.49 1.6l-4.635-6.827z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#E27022" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M36 9.58c-10 0-14 7-14 14s0 13 4 13h20c4 0 4-6 4-13s-4-14-14-14zm9.515 22.25s-6.71.933-9.241-1.6c-2.592 2.592-8.49 1.6-8.49 1.6l-4.635-6.827s12.703-7.023 26.25.802l-3.884 6.025z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M47.187 24.659c-.514-.34-1.015-.682-1.187-1.078-3-3-7-8-7-8-4 3-7 6-13 7 0 0-1.253.55-1.92 1.97 2.953-1.325 12.569-4.814 23.107.108zm-1.672 7.171s-6.71.933-9.241-1.6c-2.592 2.592-8.49 1.6-8.49 1.6l-4.082-6.012c-.1.797 1.235 1.513 1.235 2.763 0 9 4.936 14 11 14 5.71 0 10.657-4.637 11.027-12.999l-1.449 2.248z",
+    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))))"))
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M37.562 58.953a1 1 0 01-1-1v-4.425c-6.164-1.165-10.689-7.72-10.888-8.012a1 1 0 011.653-1.126c.046.067 4.65 6.722 10.332 7.278a1 1 0 01.902.995v5.29a1 1 0 01-1 1z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M16.993 58.952a1 1 0 01-.986-.846c-.041-.27-.973-6.633 2.58-10.776 1.924-2.241 4.752-3.377 8.408-3.377a1 1 0 01.555.168c3.153 2.103 5.66 3.41 8.383 3.424 2.722-.013 5.23-1.321 8.382-3.424a.997.997 0 01.555-.168c1.907 0 3.61.316 5.06.937a.999.999 0 01.525 1.312.998.998 0 01-1.312.526c-1.127-.483-2.463-.742-3.976-.772-3.31 2.186-6.027 3.546-9.128 3.588-.015 0-.031.003-.044 0h-.125c-.018.003-.03 0-.044 0-3.1-.042-5.817-1.402-9.128-3.588-2.896.057-5.11.954-6.586 2.669-2.956 3.437-2.137 9.12-2.129 9.178a1 1 0 01-.99 1.15z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M49.982 60.808c-.58 0-1.08-.227-1.41-.64-.593-.737-.402-1.762-.357-1.959a1.01 1.01 0 01.06-.184l3.782-8.635v-5.291h-.086a1 1 0 110-2h1.086a1 1 0 011 1v6.5a1 1 0 01-.084.401l-3.817 8.714c-.003.03-.005.061-.006.093l10.05-.011a1.037 1.037 0 00-.007-.095l-3.815-8.723a.992.992 0 01-.084-.4v-6.48a1 1 0 011-1h1.18a1 1 0 110 2h-.18v5.27l3.782 8.647a.883.883 0 01.06.182c.045.197.235 1.221-.357 1.96-.33.412-.832.639-1.412.639l-10.385.012z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M57.294 44.099h-4.237a1 1 0 110-2h4.237a1 1 0 110 2zM41.953 27.047a2 2 0 11-4 0 2 2 0 014 0m-8 0a2 2 0 11-4 0 2 2 0 014 0m2 10.003a7.652 7.652 0 01-3.448-.859 1 1 0 01.895-1.789c1.593.86 3.512.86 5.106 0a1 1 0 01.894 1.79 7.653 7.653 0 01-3.447.857z"
+  }), /*#__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",
+    strokeWidth: 2,
+    d: "M26 36.58c-4 0-4-6-4-13s4-14 14-14 14 7 14 14 0 13-4 13"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M30.057 33.016c-1.485 0-2.605-.182-2.713-.2a1 1 0 01-.661-.424l-4.635-6.827a.998.998 0 01.344-1.437c.538-.298 13.355-7.205 27.233.811a.998.998 0 01.34 1.407l-3.882 6.026a1.003 1.003 0 01-.703.448c-.68.095-6.307.796-9.373-1.295-1.719 1.212-4.113 1.49-5.95 1.49zm-1.968-2.113c1.763.215 5.531.293 7.204-1.38a1 1 0 011.414 0c1.651 1.653 5.938 1.582 7.95 1.37l3.048-4.73c-10.415-5.5-20.253-2.1-23.348-.757l3.732 5.497z"
+  }), /*#__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))))")),
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M24.948 27.69a35.58 35.58 0 00-.012.89c0 9 4.937 14 11 14 5.726 0 10.7-4.65 11.045-13.056"
+  }), /*#__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",
+    strokeWidth: 2,
+    d: "M46 23.58c-3-3-7-8-7-8-4 3-7 6-13 7.001 0 0-.266.25-.532 1.125"
+  }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(ScientistIcon);
 module.exports = ForwardRef;

package/data2/ScrollIcon.js

@@ -6,41 +6,99 @@ const sizeMap = {
   "large": 64
 };
 
-const { forwardRef } = require("react");
-const ScrollIcon = ({
+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 ScrollIcon({
   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 ? "#F4AA41" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M15.023 16.283h41.954V57.26H15.023z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#E27022" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "m16 55.748-5 .2v5.042h50v-7.042l-5 .2m0-37.865 5-.2v-5.041H11v7.041l5-.2"
-}), /*#__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: "m16 55.748-5 .2v5.042h50v-7.042l-5 .2m0-37.865 5-.2v-5.041H11v7.041l5-.2"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "m56 16.283-21.374.855L16 17.883m0 37.865 40-1.6M16 22.002V50.06m40-28.058V50.06M20.852 24.903h11.009m-11.009 5.248h31.167M20.852 35.4h31.167m-31.167 5.248h31.167m-31.167 5.248h31.167"
-})));
-const ForwardRef = forwardRef(ScrollIcon);
+    "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 ? "#F4AA41" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M15.023 16.283h41.954V57.26H15.023z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#E27022" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 74%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 60%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M16 55.748l-5 .2v5.042h50v-7.042l-5 .2m0-37.865l5-.2v-5.041H11v7.041l5-.2"
+  }), /*#__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: "M16 55.748l-5 .2v5.042h50v-7.042l-5 .2m0-37.865l5-.2v-5.041H11v7.041l5-.2"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M56 16.283l-21.374.855L16 17.883m0 37.865l40-1.6M16 22.002V50.06m40-28.058V50.06M20.852 24.903h11.009m-11.009 5.248h31.167M20.852 35.4h31.167m-31.167 5.248h31.167m-31.167 5.248h31.167"
+  })));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(ScrollIcon);
 module.exports = ForwardRef;