@datalayer/icons-react 1.0.12 → 1.0.14

package/data2/esm/StudioMicrophoneIcon.js

@@ -6,111 +6,53 @@ const sizeMap = {
   "large": 64
 };
 
-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 StudioMicrophoneIcon({
+import { forwardRef } from "react";
+const StudioMicrophoneIcon = ({
   title,
-  titleId,
   size,
   colored,
   themed,
-  colormode,
+  titleId,
   ...props
-}, 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))))")),
+}, 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",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-    "aria-hidden": "true",
-    ref: svgRef,
-    "aria-labelledby": titleId
-  }, props, {
-    "data-datalayer-icon": "",
-    style: props && props.color != null ? Object.assign({}, props.style, {
-      "--datalayer-icon-color": props.color,
-      color: props.color
-    }) : props && props.style
-  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
-    id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? "#3F3F3F" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 41%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 93%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 41%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 93%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 41%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-    d: "M48.11 28.54l-4.38 4.39-4.35 4.35-5.81 5.47s-1.276 1.393-3.19 1.92c-1.915.526-4.79-.15-6.57-1.92l-3.58-3.58c-2.77-2.78-2.77-7.32 0-10.1l4.31-4.3 5.51-5.51 4.39-4.39c2.78-2.78 7.32-2.78 10.09 0l.6.6 2.98 2.98c2.78 2.77 2.78 7.32 0 10.09z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? "#9B9B9A" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-    d: "M43.832 24.262l-4.38 4.39c-.925.928-4.35 2.456-5.278 3.33-.928.874-3.27 5.187-4.882 6.49-1.612 1.302-1.072 1.414-3.19 1.92s-4.79-.15-6.57-1.92l-.6-.6c-2.77-2.78-2.77-7.32 0-10.1l4.31-4.3 5.51-5.51 4.39-4.39c2.78-2.78 7.32-2.78 10.09 0l.6.6c2.78 2.78 2.78 7.32 0 10.09z"
-  }), /*#__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: "M21.902 54.688h27.843v5.297H21.902z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? "#3F3F3F" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 41%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 93%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 41%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 93%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 41%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-    d: "M47.051 54.688h2.694v5.297h-2.694z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? "#9B9B9A" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-    d: "M36.364 30.595l-.543-1.362c-.69 0-2.25.923-2.25 1.612v24.092l2.929-.25-.136-24.092z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? "#3F3F3F" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 41%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 93%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 41%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 93%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 41%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-    d: "M38.12 54.688l-.219-23.82c0-.689-.847-1.059-1.537-1.059l.136 24.879h1.62z"
-  }), /*#__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: "M32.42 28.088a.997.997 0 01-.707-.293l-7.598-7.597a1 1 0 010-1.414c.019-.019.044-.025.063-.042l-.026-.027s-.388.367-.779.758a1 1 0 000 1.414l7.495 7.57a.997.997 0 001.415 0 4.62 4.62 0 01.63-.52.992.992 0 01-.493.15zm8.607 7.57l-1.202 1.18a.982.982 0 00.263.86l.609.592a.994.994 0 00.708.294c.255 0 .51-.097.706-.292.39-.39.822-.792.822-.792l-1.906-1.842z"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M29.392 18.596l4.387-4.386c2.776-2.777 7.32-2.777 10.096 0l3.578 3.577c2.776 2.777 2.776 7.32 0 10.097l-4.387 4.386M29.72 44.009a7.15 7.15 0 01-6.568-1.92l-3.578-3.578c-2.777-2.777-2.777-7.32 0-10.096l4.303-4.304m9.693 30.577V31.845a2.25 2.25 0 012.251-2.25h.543a2.25 2.25 0 012.25 2.25v22.843m-16.174 0h27.305v5.297H22.44zm-1.444-14.189l-2.423 2.469m23.063-6.664l.534.534M24.823 19.491l7.597 7.597",
-    fill: "none",
-    stroke: colored ? "#000" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeMiterlimit: 10,
-    strokeWidth: 2
-  }));
-  if (!colormode) return _svgEl;
-  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
-    mode: typeof colormode === "string" ? colormode : undefined
-  }, _svgEl);
-}
-const ForwardRef = React.forwardRef(StudioMicrophoneIcon);
+  viewBox: "0 0 72 72",
+  ref: ref,
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.createElement("path", {
+  fill: colored ? "#3F3F3F" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 41%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 93%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 41%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 93%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 41%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+  d: "m48.11 28.54-4.38 4.39-4.35 4.35-5.81 5.47s-1.276 1.393-3.19 1.92c-1.915.526-4.79-.15-6.57-1.92l-3.58-3.58c-2.77-2.78-2.77-7.32 0-10.1l4.31-4.3 5.51-5.51 4.39-4.39c2.78-2.78 7.32-2.78 10.09 0l.6.6 2.98 2.98c2.78 2.77 2.78 7.32 0 10.09"
+}), /*#__PURE__*/React.createElement("path", {
+  fill: colored ? "#9B9B9A" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+  d: "m43.832 24.262-4.38 4.39c-.925.928-4.35 2.456-5.278 3.33s-3.27 5.187-4.882 6.49-1.072 1.414-3.19 1.92-4.79-.15-6.57-1.92l-.6-.6c-2.77-2.78-2.77-7.32 0-10.1l4.31-4.3 5.51-5.51 4.39-4.39c2.78-2.78 7.32-2.78 10.09 0l.6.6c2.78 2.78 2.78 7.32 0 10.09"
+}), /*#__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: "M21.902 54.688h27.843v5.297H21.902z"
+}), /*#__PURE__*/React.createElement("path", {
+  fill: colored ? "#3F3F3F" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 41%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 93%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 41%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 93%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 41%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+  d: "M47.051 54.688h2.694v5.297h-2.694z"
+}), /*#__PURE__*/React.createElement("path", {
+  fill: colored ? "#9B9B9A" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 79%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 55%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+  d: "m36.364 30.595-.543-1.362c-.69 0-2.25.923-2.25 1.612v24.092l2.929-.25z"
+}), /*#__PURE__*/React.createElement("path", {
+  fill: colored ? "#3F3F3F" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 41%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 93%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 41%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 93%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 41%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+  d: "m38.12 54.688-.219-23.82c0-.689-.847-1.059-1.537-1.059l.136 24.879z"
+}), /*#__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: "M32.42 28.088a1 1 0 0 1-.707-.293l-7.598-7.597a1 1 0 0 1 0-1.414c.019-.019.044-.025.063-.042l-.026-.027s-.388.367-.779.758a1 1 0 0 0 0 1.414l7.495 7.57a.997.997 0 0 0 1.415 0 4.6 4.6 0 0 1 .63-.52 1 1 0 0 1-.493.15zm8.607 7.57-1.202 1.18a.98.98 0 0 0 .263.86l.609.592a1 1 0 0 0 .708.294c.255 0 .51-.097.706-.292.39-.39.822-.792.822-.792z"
+}), /*#__PURE__*/React.createElement("path", {
+  fill: "none",
+  stroke: colored ? "#000" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeMiterlimit: 10,
+  strokeWidth: 2,
+  d: "m29.392 18.596 4.387-4.386c2.776-2.777 7.32-2.777 10.096 0l3.578 3.577c2.776 2.777 2.776 7.32 0 10.097l-4.387 4.386M29.72 44.009a7.15 7.15 0 0 1-6.568-1.92l-3.578-3.578c-2.777-2.777-2.777-7.32 0-10.096l4.303-4.304m9.693 30.577V31.845a2.25 2.25 0 0 1 2.251-2.25h.543a2.25 2.25 0 0 1 2.25 2.25v22.843m-16.174 0h27.305v5.297H22.44zm-1.444-14.189-2.423 2.469m23.063-6.664.534.534M24.823 19.491l7.597 7.597"
+}));
+const ForwardRef = forwardRef(StudioMicrophoneIcon);
 export default ForwardRef;

package/data2/esm/SunIcon.js

@@ -6,98 +6,40 @@ const sizeMap = {
   "large": 64
 };
 
-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 SunIcon({
+import { forwardRef } from "react";
+const SunIcon = ({
   title,
-  titleId,
   size,
   colored,
   themed,
-  colormode,
+  titleId,
   ...props
-}, 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))))")),
+}, 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",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-    "aria-hidden": "true",
-    ref: svgRef,
-    "aria-labelledby": titleId
-  }, props, {
-    "data-datalayer-icon": "",
-    style: props && props.color != null ? Object.assign({}, props.style, {
-      "--datalayer-icon-color": props.color,
-      color: props.color
-    }) : props && props.style
-  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
-    id: titleId
-  }, title) : null, /*#__PURE__*/React.createElement("path", {
-    fill: colored ? "#FCEA2B" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-    d: "M66 36l-10.676 5.182 6.658 9.824-11.84-.864.864 11.84-9.825-6.658L36 66l-5.182-10.676-9.824 6.658.864-11.84-11.84.864 6.658-9.825L6 36l10.677-5.182-6.659-9.824 11.84.864-.864-11.84 9.825 6.658L36 6l5.182 10.677 9.824-6.659-.864 11.84 11.84-.864-6.658 9.825z"
-  }), /*#__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("circle", {
-    cx: 36,
-    cy: 35.95,
-    r: 19.828
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M66 36l-10.676 5.182 6.658 9.824-11.84-.864.864 11.84-9.825-6.658L36 66l-5.182-10.676-9.824 6.658.864-11.84-11.84.864 6.658-9.825L6 36l10.677-5.182-6.659-9.824 11.84.864-.864-11.84 9.825 6.658L36 6l5.182 10.677 9.824-6.659-.864 11.84 11.84-.864-6.658 9.825z"
-  })));
-  if (!colormode) return _svgEl;
-  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
-    mode: typeof colormode === "string" ? colormode : undefined
-  }, _svgEl);
-}
-const ForwardRef = React.forwardRef(SunIcon);
+  viewBox: "0 0 72 72",
+  ref: ref,
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.createElement("path", {
+  fill: colored ? "#FCEA2B" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+  d: "m66 36-10.676 5.182 6.658 9.824-11.84-.864.864 11.84-9.825-6.658L36 66l-5.182-10.676-9.824 6.658.864-11.84-11.84.864 6.658-9.825L6 36l10.677-5.182-6.659-9.824 11.84.864-.864-11.84 9.825 6.658L36 6l5.182 10.677 9.824-6.659-.864 11.84 11.84-.864-6.658 9.825z"
+}), /*#__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("circle", {
+  cx: 36,
+  cy: 35.95,
+  r: 19.828
+}), /*#__PURE__*/React.createElement("path", {
+  d: "m66 36-10.676 5.182 6.658 9.824-11.84-.864.864 11.84-9.825-6.658L36 66l-5.182-10.676-9.824 6.658.864-11.84-11.84.864 6.658-9.825L6 36l10.677-5.182-6.659-9.824 11.84.864-.864-11.84 9.825 6.658L36 6l5.182 10.677 9.824-6.659-.864 11.84 11.84-.864-6.658 9.825z"
+})));
+const ForwardRef = forwardRef(SunIcon);
 export default ForwardRef;

package/data2/esm/TabanaTreeIcon.js

@@ -6,116 +6,58 @@ const sizeMap = {
   "large": 64
 };
 
-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 TabanaTreeIcon({
+import { forwardRef } from "react";
+const TabanaTreeIcon = ({
   title,
-  titleId,
   size,
   colored,
   themed,
-  colormode,
+  titleId,
   ...props
-}, 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))))")),
+}, 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",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-    "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 ? "#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.696 32.939a.782.782 0 01-.288-.056c-.58-.229-14.076-5.669-21.558-17.85-6.832 3.083-11.59 10.26-11.664 10.375-.333.512-.935.59-1.346.174-.41-.417-.472-1.169-.14-1.68.13-.199 13.106-19.758 27.8-9.851 7.869 5.306 8.144 17.168 8.153 17.67.005.385-.137.75-.384.98a.838.838 0 01-.573.238z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? "#5C9E31" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-    d: "M23.984 25.994c1.916-2.992 5.28-7.38 9.791-9.98.622-.39 1.26-.76 1.927-1.083.02.033.042.063.063.096 3.643-1.527 7.911-1.78 12.684.635 7.714 3.906 9.912 14.06 10.303 16.26.077-.186.124-.39.117-.606-.02-.509-.558-12.503-8.543-17.699-14.91-9.701-27.449 10.371-27.574 10.575-.321.525-.243 1.285.176 1.697.316.31.732.334 1.056.105z"
-  }), /*#__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: "M28.7 4.534H15.54c-1.533 0-2.694.583-2.372 1.206 1.038 2.004 1.683 4.784 1.683 7.862 0 3.756-.96 8.077-2.424 10.075v2.016c1.464 1.998 2.424 6.319 2.424 10.075 0 3.756-.96 8.077-2.424 10.076v2.015c1.464 1.998 2.424 6.319 2.424 10.075 0 3.078-.645 5.858-1.683 7.862-.323.623.84 1.206 2.373 1.206H28.7c1.533 0 2.695-.583 2.372-1.206-1.038-2.004-1.682-4.784-1.682-7.862 0-3.756.96-8.077 2.423-10.075v-2.015c-1.464-2-2.423-6.32-2.423-10.076s.96-8.077 2.423-10.075v-2.016c-1.464-1.998-2.423-6.319-2.423-10.075 0-3.078.644-5.858 1.682-7.862.323-.623-.84-1.206-2.372-1.206z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? "#5C9E31" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-    d: "M22.899 65.796c1.357-2.004 2.199-4.785 2.199-7.862 0-3.756-1.254-7.07-3.168-9.068v-4.03c1.914-2 3.168-5.312 3.168-9.068s-1.254-7.07-3.168-9.068v-4.03c1.914-2 3.168-5.312 3.168-9.068 0-3.078-.842-5.859-2.2-7.862-.421-.623 1.097-1.206 3.102-1.206h-9.503c-2.004 0-3.523.583-3.101 1.206 1.357 2.004 2.2 4.784 2.2 7.862 0 3.756-1.255 8.077-3.169 10.075v2.016c1.914 1.998 3.168 6.319 3.168 10.075 0 3.756-1.254 8.077-3.168 10.076v2.015c1.914 1.998 3.168 6.319 3.168 10.075 0 3.078-.842 5.858-2.199 7.862-.422.623 1.097 1.206 3.101 1.206H26c-2.005 0-3.523-.583-3.101-1.206z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? "#EA5A47" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 58%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 76%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 58%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 76%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 58%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-    d: "M40.445 27.99l-5.42 2.693c-.645.32-.979 1.086-.775 1.804 1.238 4.368 5.941 19.198 15.146 28.946.512.543 1.345.562 1.91.067l9.246-8.115c.705-.618.703-1.763-.014-2.349-3.125-2.553-10.873-9.648-18.287-22.467-.375-.649-1.15-.905-1.806-.58z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? "#D22F27" : (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: "M39.497 28.46l-4.273 2.123c-.645.32-.978 1.087-.775 1.804 1.238 4.368 5.942 19.198 15.146 28.946.513.543 1.346.563 1.91.067l2.568-2.253C45.247 48.782 40.748 33.316 39.497 28.46z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? "#5C9E31" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-    d: "M31.523 50.207H12.464A1.468 1.468 0 0111 48.743v-4.294c0-.805.659-1.464 1.464-1.464h19.06c.805 0 1.463.659 1.463 1.464v4.294c0 .805-.659 1.464-1.464 1.464zm0-22H12.464A1.468 1.468 0 0111 26.743v-4.294c0-.805.659-1.464 1.464-1.464h19.06c.805 0 1.463.659 1.463 1.464v4.294c0 .805-.659 1.464-1.464 1.464z"
-  }), /*#__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: "M31.523 20.985h-.207l-14.424 7.222h14.631c.805 0 1.464-.659 1.464-1.464v-4.294c0-.805-.659-1.464-1.464-1.464zm0 22h-.207l-14.424 7.222h14.631c.805 0 1.464-.659 1.464-1.464v-4.294c0-.805-.659-1.464-1.464-1.464z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: "none",
-    stroke: colored ? "#000" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeMiterlimit: 10,
-    strokeWidth: 2,
-    d: "M41 12c3.344-.501 6.746-.48 10.5 2.051 7.869 5.306 8.144 17.168 8.153 17.67.005.385-.138.75-.384.98a.838.838 0 01-.573.238.782.782 0 01-.288-.056C57.874 32.673 46.657 28.21 39 18m1.445 9.99l-5.42 2.693c-.645.32-.979 1.086-.775 1.804 1.238 4.368 5.941 19.198 15.146 28.946.512.543 1.345.562 1.91.067l9.246-8.115c.705-.618.703-1.763-.014-2.349-3.125-2.553-10.873-9.648-18.287-22.467-.375-.649-1.15-.905-1.806-.58z"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M15.95 13.574c.013-2.93-.532-5.707-1.54-7.885a3.511 3.511 0 011.266-.184l13.16.059c.574.002 1.003.099 1.265.195-1.029 2.17-1.598 4.941-1.611 7.871a26.646 26.646 0 00.315 4.115c.18 1.167.432 2.257.733 3.24h2.102a20.397 20.397 0 01-.858-3.546 24.586 24.586 0 01-.292-3.8c.012-2.819.582-5.445 1.603-7.394a1.43 1.43 0 00-.044-1.43c-.551-.915-2.016-1.246-3.204-1.252l-13.16-.058c-1.21.02-2.655.313-3.215 1.223a1.43 1.43 0 00-.057 1.428c1.003 1.96 1.55 4.59 1.537 7.41-.012 2.601-.511 5.39-1.254 7.419h2.118c.693-2.155 1.124-4.818 1.136-7.411zm-.1 22.166c.012-2.53-.4-5.312-1.102-7.533h-2.111c.037.103.076.199.113.306.7 2.072 1.112 4.77 1.1 7.218-.01 2.533-.485 5.24-1.195 7.254h2.118c.66-2.124 1.066-4.72 1.078-7.245zm14.54.065c.012-2.677.538-5.558 1.317-7.598h-2.12c-.727 2.186-1.185 4.922-1.196 7.589-.012 2.497.362 5.071.99 7.189h2.111c-.675-2.012-1.113-4.683-1.101-7.18zm-1.865 18.844a25.903 25.903 0 00-.234 3.312c-.013 2.93.532 5.708 1.541 7.886-.262.094-.69.18-1.267.184l-13.16-.06c-.573-.002-1.003-.099-1.264-.195 1.028-2.17 1.597-4.94 1.61-7.87.013-2.708-.434-5.491-1.162-7.699h-2.113c.776 2.051 1.288 4.979 1.275 7.689-.012 2.819-.582 5.445-1.603 7.394a1.43 1.43 0 00.044 1.43c.551.915 2.017 1.247 3.205 1.252l13.16.06h.028c1.182 0 2.63-.32 3.186-1.224a1.43 1.43 0 00.058-1.429c-1.004-1.959-1.55-4.59-1.538-7.41a24.02 24.02 0 01.217-3.055v-.002c.237-1.775.653-3.426 1.162-4.705h-2.133c-.442 1.29-.793 2.797-1.012 4.442z"
-  }));
-  if (!colormode) return _svgEl;
-  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
-    mode: typeof colormode === "string" ? colormode : undefined
-  }, _svgEl);
-}
-const ForwardRef = React.forwardRef(TabanaTreeIcon);
+  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 ? "#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.696 32.939a.8.8 0 0 1-.288-.056c-.58-.229-14.076-5.669-21.558-17.85-6.832 3.083-11.59 10.26-11.664 10.375-.333.512-.935.59-1.346.174-.41-.417-.472-1.169-.14-1.68.13-.199 13.106-19.758 27.8-9.851 7.869 5.306 8.144 17.168 8.153 17.67.005.385-.137.75-.384.98a.84.84 0 0 1-.573.238"
+}), /*#__PURE__*/React.createElement("path", {
+  fill: colored ? "#5C9E31" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+  d: "M23.984 25.994c1.916-2.992 5.28-7.38 9.791-9.98.622-.39 1.26-.76 1.927-1.083q.03.048.063.096c3.643-1.527 7.911-1.78 12.684.635 7.714 3.906 9.912 14.06 10.303 16.26.077-.186.124-.39.117-.606-.02-.509-.558-12.503-8.543-17.699-14.91-9.701-27.449 10.371-27.574 10.575-.321.525-.243 1.285.176 1.697.316.31.732.334 1.056.105"
+}), /*#__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: "M28.7 4.534H15.54c-1.533 0-2.694.583-2.372 1.206 1.038 2.004 1.683 4.784 1.683 7.862 0 3.756-.96 8.077-2.424 10.075v2.016c1.464 1.998 2.424 6.319 2.424 10.075s-.96 8.077-2.424 10.076v2.015c1.464 1.998 2.424 6.319 2.424 10.075 0 3.078-.645 5.858-1.683 7.862-.323.623.84 1.206 2.373 1.206H28.7c1.533 0 2.695-.583 2.372-1.206-1.038-2.004-1.682-4.784-1.682-7.862 0-3.756.96-8.077 2.423-10.075v-2.015c-1.464-2-2.423-6.32-2.423-10.076s.96-8.077 2.423-10.075v-2.016c-1.464-1.998-2.423-6.319-2.423-10.075 0-3.078.644-5.858 1.682-7.862.323-.623-.84-1.206-2.372-1.206"
+}), /*#__PURE__*/React.createElement("path", {
+  fill: colored ? "#5C9E31" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+  d: "M22.899 65.796c1.357-2.004 2.199-4.785 2.199-7.862 0-3.756-1.254-7.07-3.168-9.068v-4.03c1.914-2 3.168-5.312 3.168-9.068s-1.254-7.07-3.168-9.068v-4.03c1.914-2 3.168-5.312 3.168-9.068 0-3.078-.842-5.859-2.2-7.862-.421-.623 1.097-1.206 3.102-1.206h-9.503c-2.004 0-3.523.583-3.101 1.206 1.357 2.004 2.2 4.784 2.2 7.862 0 3.756-1.255 8.077-3.169 10.075v2.016c1.914 1.998 3.168 6.319 3.168 10.075s-1.254 8.077-3.168 10.076v2.015c1.914 1.998 3.168 6.319 3.168 10.075 0 3.078-.842 5.858-2.199 7.862-.422.623 1.097 1.206 3.101 1.206H26c-2.005 0-3.523-.583-3.101-1.206"
+}), /*#__PURE__*/React.createElement("path", {
+  fill: colored ? "#EA5A47" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 58%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 76%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 58%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 76%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 58%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+  d: "m40.445 27.99-5.42 2.693c-.645.32-.979 1.086-.775 1.804 1.238 4.368 5.941 19.198 15.146 28.946.512.543 1.345.562 1.91.067l9.246-8.115c.705-.618.703-1.763-.014-2.349-3.125-2.553-10.873-9.648-18.287-22.467-.375-.649-1.15-.905-1.806-.58z"
+}), /*#__PURE__*/React.createElement("path", {
+  fill: colored ? "#D22F27" : (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: "m39.497 28.46-4.273 2.123c-.645.32-.978 1.087-.775 1.804 1.238 4.368 5.942 19.198 15.146 28.946.513.543 1.346.563 1.91.067l2.568-2.253C45.247 48.782 40.748 33.316 39.497 28.46"
+}), /*#__PURE__*/React.createElement("path", {
+  fill: colored ? "#5C9E31" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 78%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 56%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+  d: "M31.523 50.207H12.464A1.47 1.47 0 0 1 11 48.743v-4.294c0-.805.659-1.464 1.464-1.464h19.06c.805 0 1.463.659 1.463 1.464v4.294c0 .805-.659 1.464-1.464 1.464m0-22H12.464A1.47 1.47 0 0 1 11 26.743v-4.294c0-.805.659-1.464 1.464-1.464h19.06c.805 0 1.463.659 1.463 1.464v4.294c0 .805-.659 1.464-1.464 1.464"
+}), /*#__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: "M31.523 20.985h-.207l-14.424 7.222h14.631c.805 0 1.464-.659 1.464-1.464v-4.294c0-.805-.659-1.464-1.464-1.464m0 22h-.207l-14.424 7.222h14.631c.805 0 1.464-.659 1.464-1.464v-4.294c0-.805-.659-1.464-1.464-1.464"
+}), /*#__PURE__*/React.createElement("path", {
+  fill: "none",
+  stroke: colored ? "#000" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeMiterlimit: 10,
+  strokeWidth: 2,
+  d: "M41 12c3.344-.501 6.746-.48 10.5 2.051 7.869 5.306 8.144 17.168 8.153 17.67.005.385-.138.75-.384.98a.84.84 0 0 1-.573.238.8.8 0 0 1-.288-.056C57.874 32.673 46.657 28.21 39 18m1.445 9.99-5.42 2.693c-.645.32-.979 1.086-.775 1.804 1.238 4.368 5.941 19.198 15.146 28.946.512.543 1.345.562 1.91.067l9.246-8.115c.705-.618.703-1.763-.014-2.349-3.125-2.553-10.873-9.648-18.287-22.467-.375-.649-1.15-.905-1.806-.58z"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M15.95 13.574c.013-2.93-.532-5.707-1.54-7.885a3.5 3.5 0 0 1 1.266-.184l13.16.059c.574.002 1.003.099 1.265.195-1.029 2.17-1.598 4.941-1.611 7.871a26.7 26.7 0 0 0 .315 4.115c.18 1.167.432 2.257.733 3.24h2.102a20.4 20.4 0 0 1-.858-3.546 24.6 24.6 0 0 1-.292-3.8c.012-2.819.582-5.445 1.603-7.394a1.43 1.43 0 0 0-.044-1.43c-.551-.915-2.016-1.246-3.204-1.252l-13.16-.058c-1.21.02-2.655.313-3.215 1.223a1.43 1.43 0 0 0-.057 1.428c1.003 1.96 1.55 4.59 1.537 7.41-.012 2.601-.511 5.39-1.254 7.419h2.118c.693-2.155 1.124-4.818 1.136-7.411m-.1 22.166c.012-2.53-.4-5.312-1.102-7.533h-2.111c.037.103.076.199.113.306.7 2.072 1.112 4.77 1.1 7.218-.01 2.533-.485 5.24-1.195 7.254h2.118c.66-2.124 1.066-4.72 1.078-7.245zm14.54.065c.012-2.677.538-5.558 1.317-7.598h-2.12c-.727 2.186-1.185 4.922-1.196 7.589-.012 2.497.362 5.071.99 7.189h2.111c-.675-2.012-1.113-4.683-1.101-7.18zm-1.865 18.844a26 26 0 0 0-.234 3.312c-.013 2.93.532 5.708 1.541 7.886-.262.094-.69.18-1.267.184l-13.16-.06c-.573-.002-1.003-.099-1.264-.195 1.028-2.17 1.597-4.94 1.61-7.87.013-2.708-.434-5.491-1.162-7.699h-2.113c.776 2.051 1.288 4.979 1.275 7.689-.012 2.819-.582 5.445-1.603 7.394a1.43 1.43 0 0 0 .044 1.43c.551.915 2.017 1.247 3.205 1.252l13.16.06h.028c1.182 0 2.63-.32 3.186-1.224a1.43 1.43 0 0 0 .058-1.429c-1.004-1.959-1.55-4.59-1.538-7.41a24 24 0 0 1 .217-3.055v-.002c.237-1.775.653-3.426 1.162-4.705h-2.133c-.442 1.29-.793 2.797-1.012 4.442"
+}));
+const ForwardRef = forwardRef(TabanaTreeIcon);
 export default ForwardRef;