@datalayer/icons-react 1.0.13 → 1.0.15

package/data1/esm/ScikitLearnIcon.js

@@ -6,51 +6,109 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const ScikitLearnIcon = ({
+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 ScikitLearnIcon({
   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 277.319 149.559",
+    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 277.319 149.559",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#f89939" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 68%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 66%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 68%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 66%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 68%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M212.711 127.088c33.87-33.867 39.498-83.146 12.572-110.07C198.361-9.903 149.084-4.275 115.217 29.59c-33.867 33.866-24.07 98.568-12.57 110.07 9.293 9.293 76.2 21.293 110.064-12.572"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#3499cd" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 59%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M73.741 78.15C54.093 58.504 25.5 55.233 9.874 70.857c-15.62 15.622-12.355 44.22 7.297 63.865 19.652 19.654 57.195 13.969 63.863 7.295 5.396-5.387 12.361-44.215-7.293-63.865z"
-}), /*#__PURE__*/React.createElement("g", {
-  fill: colored ? "#010101" : (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))))"))
-}, /*#__PURE__*/React.createElement("path", {
-  d: "M141.534 118.787q-5.206 4.794-9.133 7.068-3.925 2.28-7.488 2.279-4.1 0-6.607-3.178c-1.674-2.121-2.508-4.965-2.508-8.543q0-8.043 3.486-19.301c2.32-7.51 5.145-14.43 8.463-20.761l9.73-3.602q.458-.154.69-.154c.738 0 1.348.544 1.816 1.627q.71 1.631.711 4.388.001 7.813-3.602 15.129-3.602 7.317-11.26 15.627-.307 3.983-.307 5.477c0 2.223.408 3.982 1.225 5.285.818 1.305 1.902 1.953 3.256 1.953 1.381 0 2.848-.494 4.406-1.49 1.555-.998 3.93-3.064 7.121-6.207v4.403zm-14.668-14.973a46.7 46.7 0 0 0 7.891-12.121q3.023-6.712 3.023-11.55c0-.94-.139-1.703-.418-2.277q-.421-.863-1.074-.864c-.94 0-2.316 2.352-4.117 7.057q-2.7 7.057-5.305 19.755"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M170.186 118.787q-4.862 4.794-8.732 7.068c-2.58 1.52-5.424 2.279-8.54 2.279q-5.21 0-8.41-3.33c-2.132-2.225-3.196-5.146-3.196-8.773 0-5.412 1.875-10.31 5.633-14.688q5.627-6.57 12.484-6.57 3.56.001 5.707 1.84 2.145 1.84 2.145 4.826c0 5.287-5.617 9.574-16.852 12.869q1.53 7.467 8.004 7.469 2.528 0 4.824-1.357 2.3-1.364 6.934-6.035v4.402zm-20.07-7.084q9.804-2.758 9.805-10.188-.001-3.676-2.68-3.676c-1.686 0-3.293 1.28-4.824 3.85-1.536 2.565-2.3 5.9-2.3 10.014z"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M211.092 118.787c-4.086 3.88-7.01 6.412-8.77 7.588q-2.642 1.76-5.057 1.76-6.051 0-5.707-10.686-3.83 5.474-7.068 8.084-3.233 2.603-6.684 2.602-3.366.001-5.725-3.158c-1.573-2.107-2.354-4.691-2.354-7.758q0-5.742 3.156-10.955 3.165-5.209 8.102-8.424c3.293-2.145 6.207-3.22 8.732-3.22q4.79.001 6.705 4.405l7.828-4.326h2.148l-3.38 11.22q-2.607 8.469-2.608 11.608-.001 3.293 2.336 3.293 1.489 0 3.291-1.59 1.8-1.591 5.053-4.846v4.403zm-28.037 2.109q3.829 0 7.223-6.53 3.39-6.532 3.39-12.048c0-1.428-.323-2.547-.958-3.35q-.96-1.209-2.566-1.207c-2.555 0-4.977 2.17-7.258 6.512q-3.429 6.513-3.43 11.986.001 2.07 1.016 3.354c.676.856 1.534 1.283 2.583 1.283"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M239.705 118.787c-6.41 6.28-11.352 9.424-14.824 9.424q-2.34-.001-3.945-1.97c-1.07-1.315-1.609-2.944-1.609-4.886q.001-5.399 5.785-14.477-2.834 1.454-6.205 2.029-2.491 4.597-7.814 9.879h-.879v-3.443a50 50 0 0 0 5.4-6.666q-3.297-1.457-3.295-4.326c0-1.97.668-4.068 2.012-6.305q2.01-3.348 5.535-3.348 2.987-.002 2.986 3.062 0 2.412-1.725 6.895c4.238-.461 7.941-3.701 11.11-9.73l3.483-.153-3.562 9.805q-2.221 6.207-2.87 8.447c-.434 1.492-.653 2.816-.653 3.963 0 1.074.25 1.932.746 2.566.498.643 1.17.959 2.012.959q1.379-.001 2.643-.936 1.263-.945 5.67-5.193v4.404z"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M277.32 118.787c-5.899 6.234-10.958 9.348-15.169 9.348q-2.566 0-4.137-1.801-1.573-1.8-1.572-4.824 0-4.1 3.373-12.523c1.2-3.014 1.801-4.932 1.801-5.746 0-.818-.322-1.227-.957-1.227q-.537.001-1.418.535c-.539.357-1.164.859-1.879 1.496a43 43 0 0 0-2.145 2.14 61 61 0 0 0-2.219 2.454l-2.148 2.492q-1.415 1.721-1.76 3.637-.576 3.256-.768 5.979-.116 2.024-.115 5.477l-8.465 1.988q-.42-5.171-.422-7.697 0-6.167 1.438-11.682c.957-3.68 2.494-7.814 4.615-12.412l9.344-1.8q-2.948 7.93-3.867 12.485c4.188-4.672 7.508-7.906 9.97-9.71 2.456-1.8 4.644-2.696 6.556-2.696q1.951 0 3.25 1.47c.87.983 1.301 2.216 1.301 3.69q-.001 3.674-3.29 12.104-2.263 5.78-2.263 7.51 0 2.305 1.881 2.305c1.867 0 4.891-2.465 9.064-7.393z"
-})), /*#__PURE__*/React.createElement("text", {
-  x: 153.333,
-  y: 81.946,
-  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))))")),
-  fontFamily: "Helvetica",
-  fontSize: 23.08,
-  style: {
-    lineHeight: "0%"
-  }
-}, "\n    scikit\n  "));
-const ForwardRef = forwardRef(ScikitLearnIcon);
+    "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 ? "#f89939" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 68%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 66%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 68%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 66%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 68%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M212.711 127.088c33.87-33.867 39.498-83.146 12.572-110.07C198.361-9.903 149.084-4.275 115.217 29.59c-33.867 33.866-24.07 98.568-12.57 110.07 9.293 9.293 76.2 21.293 110.064-12.572z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#3499cd" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 59%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M73.741 78.15C54.093 58.504 25.5 55.233 9.874 70.857c-15.62 15.622-12.355 44.22 7.297 63.865 19.652 19.654 57.195 13.969 63.863 7.295 5.396-5.387 12.361-44.215-7.293-63.865z"
+  }), /*#__PURE__*/React.createElement("g", {
+    fill: colored ? "#010101" : (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))))"))
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M141.534 118.787c-3.47 3.195-6.516 5.553-9.133 7.068-2.617 1.52-5.113 2.279-7.488 2.279-2.732 0-4.936-1.06-6.607-3.178-1.674-2.121-2.508-4.965-2.508-8.543 0-5.361 1.162-11.797 3.486-19.301 2.32-7.51 5.145-14.43 8.463-20.761l9.73-3.602c.304-.102.536-.154.69-.154.738 0 1.348.544 1.816 1.627.473 1.088.711 2.55.711 4.388 0 5.209-1.199 10.252-3.602 15.129-2.402 4.879-6.154 10.086-11.26 15.627-.205 2.656-.307 4.48-.307 5.477 0 2.223.408 3.982 1.225 5.285.818 1.305 1.902 1.953 3.256 1.953 1.381 0 2.848-.494 4.406-1.49 1.555-.998 3.93-3.064 7.121-6.207v4.403zm-14.668-14.973a46.735 46.735 0 007.891-12.121c2.016-4.475 3.023-8.324 3.023-11.55 0-.94-.139-1.703-.418-2.277-.28-.575-.64-.864-1.074-.864-.94 0-2.316 2.352-4.117 7.057-1.8 4.704-3.569 11.29-5.305 19.755z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M170.186 118.787c-3.242 3.195-6.152 5.553-8.732 7.068-2.58 1.52-5.424 2.279-8.54 2.279-3.474 0-6.276-1.111-8.41-3.33-2.132-2.225-3.196-5.146-3.196-8.773 0-5.412 1.875-10.31 5.633-14.688 3.75-4.381 7.914-6.57 12.484-6.57 2.375 0 4.275.615 5.707 1.84 1.43 1.227 2.145 2.834 2.145 4.826 0 5.287-5.617 9.574-16.852 12.869 1.02 4.977 3.688 7.469 8.004 7.469 1.686 0 3.293-.453 4.824-1.357 1.535-.908 3.844-2.922 6.934-6.035v4.402zm-20.07-7.084c6.535-1.84 9.805-5.234 9.805-10.188 0-2.451-.895-3.676-2.68-3.676-1.686 0-3.293 1.28-4.824 3.85-1.536 2.565-2.3 5.9-2.3 10.014z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M211.092 118.787c-4.086 3.88-7.01 6.412-8.77 7.588-1.762 1.174-3.447 1.76-5.057 1.76-4.035 0-5.936-3.561-5.707-10.686-2.553 3.65-4.91 6.344-7.068 8.084-2.156 1.736-4.383 2.602-6.684 2.602-2.244 0-4.152-1.051-5.725-3.158-1.573-2.107-2.354-4.691-2.354-7.758 0-3.828 1.051-7.48 3.156-10.955 2.11-3.473 4.81-6.28 8.102-8.424 3.293-2.145 6.207-3.22 8.732-3.22 3.193 0 5.428 1.47 6.705 4.405l7.828-4.326h2.148l-3.38 11.22c-1.737 5.646-2.608 9.515-2.608 11.608 0 2.195.777 3.293 2.336 3.293.992 0 2.09-.53 3.291-1.59 1.201-1.061 2.883-2.676 5.053-4.846v4.403zm-28.037 2.109c2.553 0 4.96-2.176 7.223-6.53 2.26-4.354 3.39-8.372 3.39-12.048 0-1.428-.323-2.547-.958-3.35-.64-.807-1.496-1.207-2.566-1.207-2.555 0-4.977 2.17-7.258 6.512-2.285 4.342-3.43 8.338-3.43 11.986 0 1.38.34 2.498 1.016 3.354.676.856 1.534 1.283 2.583 1.283z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M239.705 118.787c-6.41 6.28-11.352 9.424-14.824 9.424-1.559 0-2.875-.658-3.945-1.97-1.07-1.315-1.609-2.944-1.609-4.886 0-3.6 1.93-8.424 5.785-14.477-1.89.97-3.957 1.645-6.205 2.029-1.66 3.064-4.266 6.359-7.814 9.879h-.879v-3.443a50.229 50.229 0 005.4-6.666c-2.199-.971-3.295-2.414-3.295-4.326 0-1.97.668-4.068 2.012-6.305 1.34-2.232 3.184-3.348 5.535-3.348 1.992 0 2.986 1.018 2.986 3.062 0 1.609-.574 3.906-1.725 6.895 4.238-.461 7.941-3.701 11.11-9.73l3.483-.153-3.562 9.805c-1.48 4.137-2.438 6.955-2.87 8.447-.434 1.492-.653 2.816-.653 3.963 0 1.074.25 1.932.746 2.566.498.643 1.17.959 2.012.959.918 0 1.801-.314 2.643-.936.842-.631 2.732-2.36 5.67-5.193v4.404z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M277.32 118.787c-5.899 6.234-10.958 9.348-15.169 9.348-1.71 0-3.09-.6-4.137-1.801-1.049-1.2-1.572-2.807-1.572-4.824 0-2.732 1.125-6.908 3.373-12.523 1.2-3.014 1.801-4.932 1.801-5.746 0-.818-.322-1.227-.957-1.227-.357 0-.832.18-1.418.535-.539.357-1.164.859-1.879 1.496a42.928 42.928 0 00-2.145 2.14 61.043 61.043 0 00-2.219 2.454l-2.148 2.492c-.943 1.148-1.53 2.359-1.76 3.637-.385 2.17-.639 4.164-.768 5.979-.078 1.35-.115 3.174-.115 5.477l-8.465 1.988c-.279-3.447-.422-6.014-.422-7.697 0-4.111.48-8.006 1.438-11.682.957-3.68 2.494-7.814 4.615-12.412l9.344-1.8c-1.965 5.288-3.254 9.448-3.867 12.485 4.188-4.672 7.508-7.906 9.97-9.71 2.456-1.8 4.644-2.696 6.556-2.696 1.3 0 2.385.49 3.25 1.47.87.983 1.301 2.216 1.301 3.69 0 2.449-1.098 6.484-3.29 12.104-1.509 3.854-2.263 6.355-2.263 7.51 0 1.537.627 2.305 1.881 2.305 1.867 0 4.891-2.465 9.064-7.393z"
+  })), /*#__PURE__*/React.createElement("text", {
+    fontSize: 23.08,
+    style: {
+      lineHeight: "0%"
+    },
+    x: 153.333,
+    y: 81.946,
+    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))))")),
+    fontFamily: "Helvetica"
+  }, "scikit"));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(ScikitLearnIcon);
 export default ForwardRef;

package/data1/esm/SettingsIcon.js

@@ -6,26 +6,84 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const SettingsIcon = ({
+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 SettingsIcon({
   title,
+  titleId,
   size,
   colored,
   themed,
-  titleId,
+  colormode,
   ...props
-}, ref) => /*#__PURE__*/React.createElement("svg", Object.assign({
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: (themed ? "var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor))" : "var(--datalayer-icon-color, currentColor)"),
-  "aria-hidden": "true",
+}, svgRef) {
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: (themed ? "var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor))" : "var(--datalayer-icon-color, currentColor)"),
+    viewBox: "0 0 20 20",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-  viewBox: "0 0 20 20",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("path", {
-  d: "M10 0q.44 0 .876.039c.929.08 1.612.767 1.824 1.573l.36 1.384c.022.083.099.198.265.28q.434.214.835.483c.154.102.291.112.374.089l1.378-.38c.806-.22 1.74.027 2.275.788q.508.723.88 1.523c.394.843.14 1.777-.454 2.364L17.595 9.15c-.061.06-.122.184-.11.367q.03.483 0 .966c-.012.183.047.307.11.367l1.018 1.008c.593.586.848 1.52.454 2.363a10 10 0 0 1-.88 1.521c-.535.763-1.47 1.01-2.275.788l-1.377-.378c-.084-.023-.221-.013-.375.09q-.402.268-.835.482c-.166.082-.242.197-.264.28l-.362 1.382c-.21.808-.894 1.495-1.823 1.575a10 10 0 0 1-1.752 0c-.929-.08-1.611-.767-1.823-1.575l-.361-1.382c-.022-.083-.099-.198-.265-.28a7 7 0 0 1-.835-.483c-.154-.102-.291-.112-.374-.088l-1.378.378c-.805.22-1.74-.026-2.275-.787q-.507-.722-.88-1.523c-.394-.844-.14-1.777.453-2.364l1.019-1.007c.063-.06.123-.184.11-.367a8 8 0 0 1 0-.966c.013-.183-.047-.307-.11-.367L1.386 8.142C.794 7.556.54 6.623.933 5.78a10 10 0 0 1 .88-1.521c.535-.763 1.47-1.01 2.275-.788l1.377.377c.084.024.221.014.375-.088a7.5 7.5 0 0 1 .835-.483c.166-.082.243-.197.264-.28L7.3 1.614C7.511.806 8.195.119 9.124.037Q9.558.001 10 0m-.714 1.906c-.045.004-.135.045-.171.183L8.754 3.47c-.184.701-.686 1.209-1.248 1.486a6 6 0 0 0-.625.363c-.521.347-1.212.529-1.911.337l-1.379-.378c-.136-.038-.218.02-.243.056q-.413.587-.717 1.237c-.017.039-.026.138.074.238l1.019 1.007c.514.508.702 1.196.662 1.82a6 6 0 0 0 0 .728c.04.623-.148 1.312-.662 1.82L2.705 13.19c-.101.1-.091.199-.074.238q.305.65.717 1.236c.025.038.106.095.243.058l1.378-.38c.7-.19 1.391-.01 1.912.338q.302.201.627.363c.558.277 1.062.786 1.246 1.486l.361 1.381c.036.136.126.179.171.183a8.3 8.3 0 0 0 1.428 0c.045-.004.135-.045.171-.183l.361-1.381c.184-.701.686-1.209 1.248-1.486q.325-.162.625-.363c.521-.347 1.212-.528 1.911-.337l1.379.379c.136.036.219-.02.244-.057a8.3 8.3 0 0 0 .716-1.237c.017-.039.026-.138-.074-.238l-1.019-1.007c-.514-.508-.702-1.196-.662-1.82a6 6 0 0 0 0-.728c-.04-.623.148-1.312.662-1.82l1.019-1.007c.101-.1.091-.199.074-.238a8 8 0 0 0-.716-1.236c-.025-.037-.107-.095-.244-.058l-1.378.38c-.7.19-1.391.01-1.912-.338q-.3-.202-.627-.363c-.558-.277-1.062-.786-1.246-1.486l-.361-1.381c-.036-.138-.126-.179-.171-.183a8 8 0 0 0-1.428 0zM13.75 10a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0m-1.875 0a1.875 1.875 0 1 0-3.75 0 1.875 1.875 0 0 0 3.75 0"
-}));
-const ForwardRef = forwardRef(SettingsIcon);
+    "aria-hidden": "true",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props, {
+    "data-datalayer-icon": "",
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-color": props.color,
+      color: props.color
+    }) : props && props.style
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    d: "M10 0c.293 0 .585.013.876.039.929.08 1.612.767 1.824 1.573l.36 1.384c.022.083.099.198.265.28.289.143.568.304.835.483.154.102.291.112.374.089l1.378-.38c.806-.22 1.74.027 2.275.788.338.481.633.99.88 1.523.394.843.14 1.777-.454 2.364L17.595 9.15c-.061.06-.122.184-.11.367.02.322.02.644 0 .966-.012.183.047.307.11.367l1.018 1.008c.593.586.848 1.52.454 2.363a9.967 9.967 0 01-.88 1.521c-.535.763-1.47 1.01-2.275.788l-1.377-.378c-.084-.023-.221-.013-.375.09-.268.178-.546.34-.835.482-.166.082-.242.197-.264.28l-.362 1.382c-.21.808-.894 1.495-1.823 1.575a9.998 9.998 0 01-1.752 0c-.929-.08-1.611-.767-1.823-1.575l-.361-1.382c-.022-.083-.099-.198-.265-.28a7.181 7.181 0 01-.835-.483c-.154-.102-.291-.112-.374-.088l-1.378.378c-.805.22-1.74-.026-2.275-.787-.337-.481-.632-.99-.88-1.523-.394-.844-.14-1.777.453-2.364l1.019-1.007c.063-.06.123-.184.11-.367a7.768 7.768 0 010-.966c.013-.183-.047-.307-.11-.367L1.386 8.142C.794 7.556.54 6.623.933 5.78a9.9 9.9 0 01.88-1.521c.535-.763 1.47-1.01 2.275-.788l1.377.377c.084.024.221.014.375-.088a7.45 7.45 0 01.835-.483c.166-.082.243-.197.264-.28L7.3 1.614C7.511.806 8.195.119 9.124.037 9.413.014 9.705 0 10 0zm-.714 1.906c-.045.004-.135.045-.171.183L8.754 3.47c-.184.701-.686 1.209-1.248 1.486a5.644 5.644 0 00-.625.363c-.521.347-1.212.529-1.911.337l-1.379-.378c-.136-.038-.218.02-.243.056-.275.39-.515.805-.717 1.237-.017.039-.026.138.074.238l1.019 1.007c.514.508.702 1.196.662 1.82a5.887 5.887 0 000 .728c.04.623-.148 1.312-.662 1.82L2.705 13.19c-.101.1-.091.199-.074.238.203.432.442.846.717 1.236.025.038.106.095.243.058l1.378-.38c.7-.19 1.391-.01 1.912.338.202.134.41.255.627.363.558.277 1.062.786 1.246 1.486l.361 1.381c.036.136.126.179.171.183a8.26 8.26 0 001.428 0c.045-.004.135-.045.171-.183l.361-1.381c.184-.701.686-1.209 1.248-1.486.216-.108.425-.229.625-.363.521-.347 1.212-.528 1.911-.337l1.379.379c.136.036.219-.02.244-.057a8.32 8.32 0 00.716-1.237c.017-.039.026-.138-.074-.238l-1.019-1.007c-.514-.508-.702-1.196-.662-1.82a5.887 5.887 0 000-.728c-.04-.623.148-1.312.662-1.82l1.019-1.007c.101-.1.091-.199.074-.238a8.082 8.082 0 00-.716-1.236c-.025-.037-.107-.095-.244-.058l-1.378.38c-.7.19-1.391.01-1.912-.338-.2-.135-.41-.256-.627-.363-.558-.277-1.062-.786-1.246-1.486l-.361-1.381c-.036-.138-.126-.179-.171-.183a8.251 8.251 0 00-1.428 0zM13.75 10a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zm-1.875 0a1.875 1.875 0 10-3.75 0 1.875 1.875 0 003.75 0z"
+  }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(SettingsIcon);
 export default ForwardRef;

package/data1/esm/ShuffleIcon.js

@@ -6,33 +6,91 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const ShuffleIcon = ({
+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 ShuffleIcon({
   title,
+  titleId,
   size,
   colored,
   themed,
-  titleId,
+  colormode,
   ...props
-}, ref) => /*#__PURE__*/React.createElement("svg", Object.assign({
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: (themed ? "var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor))" : "var(--datalayer-icon-color, currentColor)"),
-  "aria-hidden": "true",
+}, svgRef) {
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 48 48",
+    fill: (themed ? "var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor))" : "var(--datalayer-icon-color, currentColor)"),
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-  viewBox: "0 0 48 48",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("g", {
-  "data-name": "Layer 2"
-}, /*#__PURE__*/React.createElement("path", {
-  fill: "none",
-  d: "M0 0h48v48H0z",
-  "data-name": "invisible box"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M44 33h-8a2 2 0 0 0-2 2v2c-4.7-.4-7.9-3.5-7.9-7.9v-9A13 13 0 0 0 14 7.1V5a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-1.9a9 9 0 0 1 8.1 9v9c0 6.6 5 11.4 11.9 11.9v2a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2M10 11H6V7h4zm32 30h-4v-4h4zm2-38h-8a2 2 0 0 0-2 2v2a14 14 0 0 0-7.2 2.9 12 12 0 0 1 2.1 3.4 9.1 9.1 0 0 1 5.1-2.2V13a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2m-2 8h-4V7h4zM19.1 34.6a8.6 8.6 0 0 1-5.1 2.3V35a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-2a13.4 13.4 0 0 0 7.3-3.1 14.6 14.6 0 0 1-2.2-3.3M10 41H6v-4h4z",
-  "data-name": "icons Q2"
-})));
-const ForwardRef = forwardRef(ShuffleIcon);
+    "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("g", {
+    "data-name": "Layer 2"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    d: "M0 0h48v48H0z",
+    "data-name": "invisible box"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M44 33h-8a2 2 0 00-2 2v2c-4.7-.4-7.9-3.5-7.9-7.9v-9A13 13 0 0014 7.1V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-1.9a9 9 0 018.1 9v9c0 6.6 5 11.4 11.9 11.9v2a2 2 0 002 2h8a2 2 0 002-2v-8a2 2 0 00-2-2zM10 11H6V7h4zm32 30h-4v-4h4zm2-38h-8a2 2 0 00-2 2v2a14 14 0 00-7.2 2.9 12 12 0 012.1 3.4 9.1 9.1 0 015.1-2.2V13a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2zm-2 8h-4V7h4zM19.1 34.6a8.6 8.6 0 01-5.1 2.3V35a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-2a13.4 13.4 0 007.3-3.1 14.6 14.6 0 01-2.2-3.3zM10 41H6v-4h4z",
+    "data-name": "icons Q2"
+  })));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(ShuffleIcon);
 export default ForwardRef;

package/data1/esm/SlackIcon.js

@@ -6,49 +6,107 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const SlackIcon = ({
+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 SlackIcon({
   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",
+    preserveAspectRatio: "xMidYMid",
+    viewBox: "0 0 256 256",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-  preserveAspectRatio: "xMidYMid",
-  viewBox: "0 0 256 256",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#DFA22F" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 67%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 67%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 67%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 67%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 67%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M165.964 15.838c-3.89-11.975-16.752-18.528-28.725-14.636-11.975 3.89-18.528 16.752-14.636 28.725l58.947 181.365c4.048 11.187 16.132 17.473 27.732 14.135 12.1-3.483 19.475-16.334 15.614-28.217z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#3CB187" : (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: "M74.626 45.516C70.734 33.542 57.873 26.989 45.9 30.879 33.924 34.77 27.37 47.631 31.263 59.606l58.948 181.366c4.047 11.186 16.132 17.473 27.732 14.132 12.099-3.481 19.474-16.332 15.613-28.217z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#CE1E5B" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 53%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 81%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 53%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 81%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 53%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M240.162 166.045c11.975-3.89 18.526-16.75 14.636-28.726-3.89-11.973-16.752-18.527-28.725-14.636L44.708 181.632c-11.187 4.046-17.473 16.13-14.135 27.73 3.483 12.099 16.334 19.475 28.217 15.614l181.372-58.93"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#392538" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 40%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 94%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 40%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 94%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 40%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "m82.508 217.27 43.347-14.084-14.086-43.352-43.35 14.09 14.089 43.347"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#BB242A" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 50%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 84%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 50%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 84%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 50%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M173.847 187.591c16.388-5.323 31.62-10.273 43.348-14.084l-14.088-43.36-43.35 14.09z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#72C5CD" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 66%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 68%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 66%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 68%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 66%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M210.484 74.706c11.974-3.89 18.527-16.751 14.637-28.727-3.89-11.973-16.752-18.526-28.727-14.636L15.028 90.293C3.842 94.337-2.445 106.422.896 118.022c3.481 12.098 16.332 19.474 28.217 15.613l181.371-58.93"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#248C73" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 53%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 81%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 53%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 81%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 53%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M52.822 125.933c11.805-3.836 27.025-8.782 43.354-14.086-5.323-16.39-10.273-31.622-14.084-43.352l-43.36 14.092z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#62803A" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 50%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 84%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 50%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 84%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 50%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "m144.16 96.256 43.356-14.088-14.089-43.36L130.07 52.9z"
-}));
-const ForwardRef = forwardRef(SlackIcon);
+    fill: (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    "aria-hidden": "true",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props, {
+    "data-datalayer-icon": "",
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-color": props.color,
+      color: props.color
+    }) : props && props.style
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#DFA22F" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 67%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 67%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 67%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 67%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 67%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M165.964 15.838c-3.89-11.975-16.752-18.528-28.725-14.636-11.975 3.89-18.528 16.752-14.636 28.725l58.947 181.365c4.048 11.187 16.132 17.473 27.732 14.135 12.1-3.483 19.475-16.334 15.614-28.217L165.964 15.838"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#3CB187" : (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: "M74.626 45.516C70.734 33.542 57.873 26.989 45.9 30.879 33.924 34.77 27.37 47.631 31.263 59.606l58.948 181.366c4.047 11.186 16.132 17.473 27.732 14.132 12.099-3.481 19.474-16.332 15.613-28.217L74.626 45.516"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#CE1E5B" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 53%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 81%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 53%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 81%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 53%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M240.162 166.045c11.975-3.89 18.526-16.75 14.636-28.726-3.89-11.973-16.752-18.527-28.725-14.636L44.708 181.632c-11.187 4.046-17.473 16.13-14.135 27.73 3.483 12.099 16.334 19.475 28.217 15.614l181.372-58.93"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#392538" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 40%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 94%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 40%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 94%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 40%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M82.508 217.27l43.347-14.084-14.086-43.352-43.35 14.09 14.089 43.347"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#BB242A" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 50%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 84%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 50%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 84%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 50%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M173.847 187.591c16.388-5.323 31.62-10.273 43.348-14.084l-14.088-43.36-43.35 14.09 14.09 43.354"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#72C5CD" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 66%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 68%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 66%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 68%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 66%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M210.484 74.706c11.974-3.89 18.527-16.751 14.637-28.727-3.89-11.973-16.752-18.526-28.727-14.636L15.028 90.293C3.842 94.337-2.445 106.422.896 118.022c3.481 12.098 16.332 19.474 28.217 15.613l181.371-58.93"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#248C73" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 53%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 81%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 53%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 81%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 53%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M52.822 125.933c11.805-3.836 27.025-8.782 43.354-14.086-5.323-16.39-10.273-31.622-14.084-43.352l-43.36 14.092 14.09 43.346"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#62803A" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 50%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 84%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 50%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 84%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 50%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M144.16 96.256l43.356-14.088a546179.21 546179.21 0 00-14.089-43.36L130.07 52.9l14.09 43.356"
+  }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(SlackIcon);
 export default ForwardRef;