@datalayer/icons-react 1.0.14 → 1.0.15

package/data1/esm/BashIcon.js

@@ -6,230 +6,288 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const BashIcon = ({
+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 BashIcon({
   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",
+    overflow: "visible",
+    viewBox: "0 0 300 300",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-  overflow: "visible",
-  viewBox: "0 0 300 300",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("g", {
-  transform: "translate(24.032 24.032)scale(5.24866)"
-}, /*#__PURE__*/React.createElement("linearGradient", {
-  id: "prefix__a",
-  x1: 24,
-  x2: 24,
-  y1: 2.757,
-  y2: 46.072,
-  gradientUnits: "userSpaceOnUse"
-}, /*#__PURE__*/React.createElement("stop", {
-  offset: 0,
-  stopColor: "#c2baad"
-}), /*#__PURE__*/React.createElement("stop", {
-  offset: 0.702,
-  stopColor: "#e7e3da"
-}), /*#__PURE__*/React.createElement("stop", {
-  offset: 1,
-  stopColor: "#d4ccbf"
-})), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "url(#prefix__a)" : (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: "M41.465 8.281H6.534a2.107 2.107 0 0 0-2.109 2.106v31.72h39.15v-31.72a2.11 2.11 0 0 0-2.11-2.106"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#fff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M3.645 5.385V40.8h40.709V5.385z"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M5.864 5.705a3.01 3.01 0 0 0-3.009 3.004v34.71H46.27V8.709a3.01 3.01 0 0 0-3.008-3.004z",
-  opacity: 0.2
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M5.489 5.518A3.01 3.01 0 0 0 2.48 8.522v34.71h43.415V8.522a3.01 3.01 0 0 0-3.008-3.004z",
-  opacity: 0.2
-}), /*#__PURE__*/React.createElement("linearGradient", {
-  id: "prefix__b",
-  x1: 24,
-  x2: 24,
-  y1: -0.021,
-  y2: 46.354,
-  gradientUnits: "userSpaceOnUse"
-}, /*#__PURE__*/React.createElement("stop", {
-  offset: 0,
-  stopColor: "#494949"
-}), /*#__PURE__*/React.createElement("stop", {
-  offset: 0.702,
-  stopColor: "#616161"
-}), /*#__PURE__*/React.createElement("stop", {
-  offset: 1,
-  stopColor: "#585868"
-})), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "url(#prefix__b)" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M5.301 5.143a3.01 3.01 0 0 0-3.009 3.004v34.71h43.415V8.147a3.01 3.01 0 0 0-3.008-3.004z"
-}), /*#__PURE__*/React.createElement("linearGradient", {
-  id: "prefix__c",
-  x1: 24,
-  x2: 24,
-  y1: -0.022,
-  y2: 46.352,
-  gradientUnits: "userSpaceOnUse"
-}, /*#__PURE__*/React.createElement("stop", {
-  offset: 0,
-  stopColor: "#c2baad"
-}), /*#__PURE__*/React.createElement("stop", {
-  offset: 0.702,
-  stopColor: "#e7e3da"
-}), /*#__PURE__*/React.createElement("stop", {
-  offset: 1,
-  stopColor: "#d0cabe"
-})), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "url(#prefix__c)" : (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: "M42.699 5.893H5.301a2.256 2.256 0 0 0-2.259 2.254v33.961h41.915V8.147a2.256 2.256 0 0 0-2.258-2.254"
-}), /*#__PURE__*/React.createElement("linearGradient", {
-  id: "prefix__d",
-  x1: 24,
-  x2: 24,
-  y1: 0.154,
-  y2: 45.151,
-  gradientUnits: "userSpaceOnUse"
-}, /*#__PURE__*/React.createElement("stop", {
-  offset: 0,
-  stopColor: "#c2baad"
-}), /*#__PURE__*/React.createElement("stop", {
-  offset: 0.29,
-  stopColor: "#c4bdb0"
-}), /*#__PURE__*/React.createElement("stop", {
-  offset: 0.488,
-  stopColor: "#ccc5b9"
-}), /*#__PURE__*/React.createElement("stop", {
-  offset: 0.659,
-  stopColor: "#d9d3c8"
-}), /*#__PURE__*/React.createElement("stop", {
-  offset: 0.792,
-  stopColor: "#e8e3da"
-}), /*#__PURE__*/React.createElement("stop", {
-  offset: 0.921,
-  stopColor: "#f8f6f3"
-}), /*#__PURE__*/React.createElement("stop", {
-  offset: 0.949,
-  stopColor: "#e8e3da"
-})), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "url(#prefix__d)" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M42.145 5.893H5.856A2.19 2.19 0 0 0 3.664 8.08v32.952h40.671V8.08a2.19 2.19 0 0 0-2.19-2.187"
-}), /*#__PURE__*/React.createElement("linearGradient", {
-  id: "prefix__e",
-  x1: 24,
-  x2: 24,
-  y1: 5.807,
-  y2: 6.86,
-  gradientUnits: "userSpaceOnUse"
-}, /*#__PURE__*/React.createElement("stop", {
-  offset: 0,
-  stopColor: "#fff"
-}), /*#__PURE__*/React.createElement("stop", {
-  offset: 1,
-  stopColor: "#dfdfdf"
-})), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "url(#prefix__e)" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 83%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 51%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 83%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 51%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 83%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M42.699 6.067H5.301c-.851 0-1.542.593-1.542 1.321v.924c0-.729.692-1.321 1.542-1.321h37.398c.851 0 1.542.593 1.542 1.321v-.924c0-.728-.691-1.321-1.542-1.321"
-}), /*#__PURE__*/React.createElement("linearGradient", {
-  id: "prefix__f",
-  x1: 28.181,
-  x2: 2.744,
-  y1: 27.127,
-  y2: 2.3,
-  gradientUnits: "userSpaceOnUse"
-}, /*#__PURE__*/React.createElement("stop", {
-  offset: 0,
-  stopColor: "#fff"
-}), /*#__PURE__*/React.createElement("stop", {
-  offset: 1,
-  stopColor: "#666"
-})), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "url(#prefix__f)" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 61%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M39.729 34.715a.73.73 0 0 1-.729.73H7.722a.73.73 0 0 1-.73-.73V10.131a.73.73 0 0 1 .73-.73H39c.403 0 .729.326.729.73z"
-}), /*#__PURE__*/React.createElement("linearGradient", {
-  id: "prefix__g",
-  x1: 23.887,
-  x2: 23.887,
-  y1: 37.922,
-  y2: 8.013,
-  gradientUnits: "userSpaceOnUse"
-}, /*#__PURE__*/React.createElement("stop", {
-  offset: 0.006,
-  stopColor: "#fff"
-}), /*#__PURE__*/React.createElement("stop", {
-  offset: 0.141,
-  stopColor: "#f8f8f8"
-}), /*#__PURE__*/React.createElement("stop", {
-  offset: 0.664,
-  stopColor: "#e2e2e2"
-}), /*#__PURE__*/React.createElement("stop", {
-  offset: 1,
-  stopColor: "#dadada"
-})), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "url(#prefix__g)" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 82%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M42.686 37.083a.84.84 0 0 1-.838.839H5.928a.84.84 0 0 1-.839-.839V8.851c0-.463.375-.839.839-.839h35.92c.462 0 .838.375.838.839z"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M42.157 36.627c0 .45-.364.815-.815.815H6.432a.815.815 0 0 1-.815-.815V9.188c0-.451.365-.815.815-.815h34.91c.451 0 .815.365.815.815z"
-}), /*#__PURE__*/React.createElement("linearGradient", {
-  id: "prefix__h",
-  x1: 6.352,
-  x2: 41.422,
-  y1: 22.907,
-  y2: 22.907,
-  gradientUnits: "userSpaceOnUse"
-}, /*#__PURE__*/React.createElement("stop", {
-  offset: 0,
-  stopColor: "#555"
-}), /*#__PURE__*/React.createElement("stop", {
-  offset: 0.102,
-  stopColor: "#505050"
-}), /*#__PURE__*/React.createElement("stop", {
-  offset: 0.648,
-  stopColor: "#3a3a3a"
-}), /*#__PURE__*/React.createElement("stop", {
-  offset: 1,
-  stopColor: "#323232"
-})), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "url(#prefix__h)" : (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: "M6.432 9.107a.08.08 0 0 0-.08.08v27.439c0 .044.036.08.08.08h34.91a.08.08 0 0 0 .08-.08V9.188a.08.08 0 0 0-.08-.08H6.432z"
-}), /*#__PURE__*/React.createElement("linearGradient", {
-  id: "prefix__i",
-  x1: 23.887,
-  x2: 23.887,
-  y1: 25.687,
-  y2: 9.108,
-  gradientUnits: "userSpaceOnUse"
-}, /*#__PURE__*/React.createElement("stop", {
-  offset: 0.006,
-  stopColor: "#555"
-}), /*#__PURE__*/React.createElement("stop", {
-  offset: 0.251,
-  stopColor: "#595959"
-}), /*#__PURE__*/React.createElement("stop", {
-  offset: 1,
-  stopColor: "#616161"
-})), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "url(#prefix__i)" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M39.796 12.818q.818.001 1.626.025V9.188a.08.08 0 0 0-.08-.08H6.432a.08.08 0 0 0-.08.08v16.499c7.279-7.768 19.543-12.869 33.444-12.869"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#fff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M12.021 32.488a5 5 0 0 1-2.422-.801l.735-1.777q1.18.84 2.318.84 1.752 0 1.752-1.208 0-.603-.448-1.135-.448-.531-1.7-1.158t-1.704-1.039a2.8 2.8 0 0 1-.693-.983 3.2 3.2 0 0 1-.242-1.274q0-1.038.652-1.831.653-.793 1.751-1.06v-1.387h1.747l-.008 1.309q1.416.137 2.11.683l-.604 1.719q-1.048-.762-2.209-.762-.687 0-1.066.371a1.26 1.26 0 0 0-.378.937q0 .964 2.131 2.002 1.122.55 1.619 1.012t.756 1.076q.26.614.26 1.37 0 1.068-.693 1.865-.693.798-1.925 1.096v1.759h-1.738zm13.669-4.414-6.095 2.949v-1.738l4.024-1.826-4.024-1.808v-1.737l6.095 2.93z"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "m23.609 38.412-.538.051a.04.04 0 0 0-.033.036v2.217q0 .017.013.027.014.01.029.009l.533-.081a.036.036 0 0 0 .031-.035v-.827l.65.95q.015.022.041.015l.561-.178a.04.04 0 0 0 .023-.023l.002-.012a.03.03 0 0 0-.007-.021l-.717-.985.722-.929a.04.04 0 0 0 .008-.022l-.002-.013a.03.03 0 0 0-.026-.022l-.573-.132a.04.04 0 0 0-.037.014l-.644.862.005-.864q0-.016-.012-.026a.03.03 0 0 0-.029-.011",
-  opacity: 0.2
-}), /*#__PURE__*/React.createElement("path", {
-  fill: "none",
-  d: "M0 48V0h48v48"
-})));
-const ForwardRef = forwardRef(BashIcon);
+    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("g", {
+    transform: "translate(24.032 24.032) scale(5.24866)"
+  }, /*#__PURE__*/React.createElement("linearGradient", {
+    id: "prefix__a",
+    x1: 24,
+    x2: 24,
+    y1: 2.757,
+    y2: 46.072,
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: 0,
+    stopColor: "#c2baad"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 0.702,
+    stopColor: "#e7e3da"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 1,
+    stopColor: "#d4ccbf"
+  })), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "url(#prefix__a)" : (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: "M41.465 8.281H6.534a2.107 2.107 0 00-2.109 2.106v31.72h39.15v-31.72a2.108 2.108 0 00-2.11-2.106z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#fff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M3.645 5.385V40.8h40.709V5.385H3.645z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M5.864 5.705a3.01 3.01 0 00-3.009 3.004v34.71H46.27V8.709a3.009 3.009 0 00-3.008-3.004z",
+    opacity: 0.2
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M5.489 5.518A3.01 3.01 0 002.48 8.522v34.71h43.415V8.522a3.009 3.009 0 00-3.008-3.004H5.489z",
+    opacity: 0.2
+  }), /*#__PURE__*/React.createElement("linearGradient", {
+    id: "prefix__b",
+    x1: 24,
+    x2: 24,
+    y1: -0.021,
+    y2: 46.354,
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: 0,
+    stopColor: "#494949"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 0.702,
+    stopColor: "#616161"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 1,
+    stopColor: "#585868"
+  })), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "url(#prefix__b)" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M5.301 5.143a3.01 3.01 0 00-3.009 3.004v34.71h43.415V8.147a3.009 3.009 0 00-3.008-3.004z"
+  }), /*#__PURE__*/React.createElement("linearGradient", {
+    id: "prefix__c",
+    x1: 24,
+    x2: 24,
+    y1: -0.022,
+    y2: 46.352,
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: 0,
+    stopColor: "#c2baad"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 0.702,
+    stopColor: "#e7e3da"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 1,
+    stopColor: "#d0cabe"
+  })), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "url(#prefix__c)" : (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: "M42.699 5.893H5.301a2.256 2.256 0 00-2.259 2.254v33.961h41.915V8.147a2.256 2.256 0 00-2.258-2.254z"
+  }), /*#__PURE__*/React.createElement("linearGradient", {
+    id: "prefix__d",
+    x1: 24,
+    x2: 24,
+    y1: 0.154,
+    y2: 45.151,
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: 0,
+    stopColor: "#c2baad"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 0.29,
+    stopColor: "#c4bdb0"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 0.488,
+    stopColor: "#ccc5b9"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 0.659,
+    stopColor: "#d9d3c8"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 0.792,
+    stopColor: "#e8e3da"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 0.921,
+    stopColor: "#f8f6f3"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 0.949,
+    stopColor: "#e8e3da"
+  })), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "url(#prefix__d)" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M42.145 5.893H5.856A2.19 2.19 0 003.664 8.08v32.952h40.671V8.08a2.188 2.188 0 00-2.19-2.187z"
+  }), /*#__PURE__*/React.createElement("linearGradient", {
+    id: "prefix__e",
+    x1: 24,
+    x2: 24,
+    y1: 5.807,
+    y2: 6.86,
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: 0,
+    stopColor: "#fff"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 1,
+    stopColor: "#dfdfdf"
+  })), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "url(#prefix__e)" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 83%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 51%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 83%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 51%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 83%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M42.699 6.067H5.301c-.851 0-1.542.593-1.542 1.321v.924c0-.729.692-1.321 1.542-1.321h37.398c.851 0 1.542.593 1.542 1.321v-.924c0-.728-.691-1.321-1.542-1.321z"
+  }), /*#__PURE__*/React.createElement("linearGradient", {
+    id: "prefix__f",
+    x1: 28.181,
+    x2: 2.744,
+    y1: 27.127,
+    y2: 2.3,
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: 0,
+    stopColor: "#fff"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 1,
+    stopColor: "#666"
+  })), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "url(#prefix__f)" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 61%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M39.729 34.715a.73.73 0 01-.729.73H7.722a.73.73 0 01-.73-.73V10.131a.73.73 0 01.73-.73H39c.403 0 .729.326.729.73z"
+  }), /*#__PURE__*/React.createElement("linearGradient", {
+    id: "prefix__g",
+    x1: 23.887,
+    x2: 23.887,
+    y1: 37.922,
+    y2: 8.013,
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: 0.006,
+    stopColor: "#fff"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 0.141,
+    stopColor: "#f8f8f8"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 0.664,
+    stopColor: "#e2e2e2"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 1,
+    stopColor: "#dadada"
+  })), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "url(#prefix__g)" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 82%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 52%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 82%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M42.686 37.083a.84.84 0 01-.838.839H5.928a.839.839 0 01-.839-.839V8.851c0-.463.375-.839.839-.839h35.92c.462 0 .838.375.838.839z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M42.157 36.627c0 .45-.364.815-.815.815H6.432a.815.815 0 01-.815-.815V9.188c0-.451.365-.815.815-.815h34.91c.451 0 .815.365.815.815z"
+  }), /*#__PURE__*/React.createElement("linearGradient", {
+    id: "prefix__h",
+    x1: 6.352,
+    x2: 41.422,
+    y1: 22.907,
+    y2: 22.907,
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: 0,
+    stopColor: "#555"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 0.102,
+    stopColor: "#505050"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 0.648,
+    stopColor: "#3a3a3a"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 1,
+    stopColor: "#323232"
+  })), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "url(#prefix__h)" : (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: "M6.432 9.107a.08.08 0 00-.08.08v27.439c0 .044.036.08.08.08h34.91a.08.08 0 00.08-.08V9.188a.079.079 0 00-.08-.08H6.432z"
+  }), /*#__PURE__*/React.createElement("linearGradient", {
+    id: "prefix__i",
+    x1: 23.887,
+    x2: 23.887,
+    y1: 25.687,
+    y2: 9.108,
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: 0.006,
+    stopColor: "#555"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 0.251,
+    stopColor: "#595959"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 1,
+    stopColor: "#616161"
+  })), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "url(#prefix__i)" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 91%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 43%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M39.796 12.818c.545 0 1.087.01 1.626.025V9.188a.079.079 0 00-.08-.08H6.432a.08.08 0 00-.08.08v16.499c7.279-7.768 19.543-12.869 33.444-12.869z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#fff" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 44%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 90%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M12.021 32.488a5.021 5.021 0 01-2.422-.801l.735-1.777c.786.561 1.559.84 2.318.84 1.168 0 1.752-.402 1.752-1.208 0-.402-.149-.78-.448-1.135-.299-.354-.865-.74-1.7-1.158-.835-.418-1.403-.764-1.704-1.039a2.768 2.768 0 01-.693-.983 3.243 3.243 0 01-.242-1.274c0-.692.218-1.302.652-1.831.435-.528 1.019-.882 1.751-1.06v-1.387h1.747l-.008 1.309c.944.091 1.648.319 2.11.683l-.604 1.719c-.699-.508-1.435-.762-2.209-.762-.458 0-.814.124-1.066.371a1.258 1.258 0 00-.378.937c0 .643.71 1.31 2.131 2.002.748.366 1.288.704 1.619 1.012.331.308.583.666.756 1.076.173.409.26.866.26 1.37 0 .712-.231 1.334-.693 1.865-.462.532-1.104.897-1.925 1.096v1.759h-1.738v-1.624zm13.669-4.414l-6.095 2.949v-1.738l4.024-1.826-4.024-1.808v-1.737l6.095 2.93z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M23.609 38.412l-.538.051a.037.037 0 00-.033.036v2.217c0 .011.004.021.013.027.009.006.019.01.029.009l.533-.081a.036.036 0 00.031-.035v-.827l.65.95c.009.014.025.02.041.015l.561-.178a.037.037 0 00.023-.023l.002-.012a.033.033 0 00-.007-.021l-.717-.985.722-.929a.04.04 0 00.008-.022l-.002-.013a.034.034 0 00-.026-.022l-.573-.132a.036.036 0 00-.037.014l-.644.862.005-.864c0-.01-.004-.02-.012-.026a.033.033 0 00-.029-.011z",
+    opacity: 0.2
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    d: "M0 48V0h48v48"
+  })));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(BashIcon);
 export default ForwardRef;