@datalayer/icons-react 1.0.14 → 1.0.15

package/data2/VsIcon.js

@@ -6,38 +6,96 @@ const sizeMap = {
   "large": 64
 };
 
-const { forwardRef } = require("react");
-const VsIcon = ({
+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 VsIcon({
   title,
+  titleId,
   size,
   colored,
   themed,
-  titleId,
+  colormode,
   ...props
-}, ref) => /*#__PURE__*/React.createElement("svg", Object.assign({
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  "aria-hidden": "true",
+}, svgRef) {
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 72 72",
+    fill: (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-  viewBox: "0 0 72 72",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#d0cfce" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M59.035 60h-46.07a.97.97 0 0 1-.965-.965v-46.07c0-.53.434-.965.965-.965h46.07c.53 0 .965.434.965.965v46.07c0 .53-.434.965-.965.965"
-}), /*#__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))))")),
-  strokeLinejoin: "round",
-  strokeMiterlimit: 10,
-  strokeWidth: 2
-}, /*#__PURE__*/React.createElement("path", {
-  d: "M59.035 60h-46.07a.97.97 0 0 1-.965-.965v-46.07c0-.53.434-.965.965-.965h46.07c.53 0 .965.434.965.965v46.07c0 .53-.434.965-.965.965z"
-}), /*#__PURE__*/React.createElement("path", {
-  strokeLinecap: "round",
-  d: "M44.168 33.244c-.293-1.138-1.557-1.994-3.073-1.994h0c-1.733 0-3.137 1.118-3.137 2.497s1.404 2.498 3.137 2.498l-.064.01c1.733 0 3.137 1.117 3.137 2.497s-1.404 2.498-3.137 2.498h0c-1.516 0-2.78-.856-3.073-1.995m-2.726-7.996-2.854 9.99-2.855-9.99"
-})));
-const ForwardRef = forwardRef(VsIcon);
+    "aria-hidden": "true",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props, {
+    "data-datalayer-icon": "",
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-color": props.color,
+      color: props.color
+    }) : props && props.style
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#d0cfce" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 63%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 71%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M59.035 60h-46.07a.968.968 0 01-.965-.965v-46.07c0-.53.434-.965.965-.965h46.07c.53 0 .965.434.965.965v46.07c0 .53-.434.965-.965.965z"
+  }), /*#__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))))")),
+    strokeLinejoin: "round",
+    strokeMiterlimit: 10,
+    strokeWidth: 2
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M59.035 60h-46.07a.968.968 0 01-.965-.965v-46.07c0-.53.434-.965.965-.965h46.07c.53 0 .965.434.965.965v46.07c0 .53-.434.965-.965.965z"
+  }), /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    d: "M44.168 33.244c-.293-1.138-1.557-1.994-3.073-1.994h0c-1.733 0-3.137 1.118-3.137 2.497s1.404 2.498 3.137 2.498l-.064.01c1.733 0 3.137 1.117 3.137 2.497s-1.404 2.498-3.137 2.498h0c-1.516 0-2.78-.856-3.073-1.995m-2.726-7.996l-2.854 9.99-2.855-9.99"
+  })));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(VsIcon);
 module.exports = ForwardRef;

package/data2/WavingHandIcon.js

@@ -6,38 +6,96 @@ const sizeMap = {
   "large": 64
 };
 
-const { forwardRef } = require("react");
-const WavingHandIcon = ({
+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 WavingHandIcon({
   title,
+  titleId,
   size,
   colored,
   themed,
-  titleId,
+  colormode,
   ...props
-}, ref) => /*#__PURE__*/React.createElement("svg", Object.assign({
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  "aria-hidden": "true",
+}, svgRef) {
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 72 72",
+    fill: (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-  viewBox: "0 0 72 72",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#FCEA2B" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 46%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 88%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M18.657 19.24a3.531 3.531 0 1 0-5.563 4.25l11.533 15.1 2.688 3.387-7.89-10.331a3.531 3.531 0 1 0-5.564 4.249l7.891 10.331 6.27 7.899c5.468 6.273 14.515 5.93 20.787.465a19.62 19.62 0 0 0 6.515-12.31c.386-4.233.807-15.301.807-15.301-.182-2.601-3.135-4.524-3.515-3.18l-4.894 9.757-3.366-4.223 3.366 4.223-3.366-4.223-13.465-17.208a3.531 3.531 0 1 0-5.563 4.249l4.249 5.563L36 30.417l-13.419-17.68a3.531 3.531 0 1 0-5.563 4.248L31.689 36"
-}), /*#__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",
-  strokeWidth: 2
-}, /*#__PURE__*/React.createElement("path", {
-  d: "M18.657 19.24a3.531 3.531 0 1 0-5.563 4.25l11.533 15.1 2.688 3.387-7.89-10.331a3.531 3.531 0 1 0-5.564 4.249l7.891 10.331 6.27 7.899c5.468 6.273 14.515 5.93 20.787.465a19.62 19.62 0 0 0 6.515-12.31c.386-4.233.807-15.301.807-15.301-.182-2.601-3.135-4.524-3.515-3.18l-4.894 9.757-3.366-4.223 3.366 4.223-3.366-4.223-13.465-17.208a3.531 3.531 0 1 0-5.563 4.249l4.249 5.563L36 30.417l-13.419-17.68a3.531 3.531 0 1 0-5.563 4.248L31.689 36"
-}), /*#__PURE__*/React.createElement("path", {
-  strokeMiterlimit: 10,
-  d: "M11.673 42.872c0 2.566 1.747 4.643 3.905 4.643m-8.517-5.078c0 5.596 3.81 10.124 8.517 10.124m29.684-31.323c0-2.567-1.747-4.643-3.906-4.643m8.517 5.078c0-5.596-3.81-10.124-8.517-10.124"
-})));
-const ForwardRef = forwardRef(WavingHandIcon);
+    "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: "M18.657 19.24a3.531 3.531 0 10-5.563 4.25l11.533 15.1 2.688 3.387-7.89-10.331a3.531 3.531 0 10-5.564 4.249l7.891 10.331 6.27 7.899c5.468 6.273 14.515 5.93 20.787.465a19.617 19.617 0 006.515-12.31c.386-4.233.807-15.301.807-15.301-.182-2.601-3.135-4.524-3.515-3.18l-4.894 9.757-3.366-4.223 3.366 4.223-3.366-4.223-13.465-17.208a3.531 3.531 0 10-5.563 4.249l4.249 5.563L36 30.417l-13.419-17.68a3.531 3.531 0 10-5.563 4.248L31.689 36"
+  }), /*#__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",
+    strokeWidth: 2
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M18.657 19.24a3.531 3.531 0 10-5.563 4.25l11.533 15.1 2.688 3.387-7.89-10.331a3.531 3.531 0 10-5.564 4.249l7.891 10.331 6.27 7.899c5.468 6.273 14.515 5.93 20.787.465a19.617 19.617 0 006.515-12.31c.386-4.233.807-15.301.807-15.301-.182-2.601-3.135-4.524-3.515-3.18l-4.894 9.757-3.366-4.223 3.366 4.223-3.366-4.223-13.465-17.208a3.531 3.531 0 10-5.563 4.249l4.249 5.563L36 30.417l-13.419-17.68a3.531 3.531 0 10-5.563 4.248L31.689 36"
+  }), /*#__PURE__*/React.createElement("path", {
+    strokeMiterlimit: 10,
+    d: "M11.673 42.872c0 2.566 1.747 4.643 3.905 4.643m-8.517-5.078c0 5.596 3.81 10.124 8.517 10.124m29.684-31.323c0-2.567-1.747-4.643-3.906-4.643m8.517 5.078c0-5.596-3.81-10.124-8.517-10.124"
+  })));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(WavingHandIcon);
 module.exports = ForwardRef;

package/data2/WhaleSpoutingIcon.js

@@ -6,55 +6,113 @@ const sizeMap = {
   "large": 64
 };
 
-const { forwardRef } = require("react");
-const WhaleSpoutingIcon = ({
+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 WhaleSpoutingIcon({
   title,
+  titleId,
   size,
   colored,
   themed,
-  titleId,
+  colormode,
   ...props
-}, ref) => /*#__PURE__*/React.createElement("svg", Object.assign({
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  "aria-hidden": "true",
+}, svgRef) {
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 72 72",
+    fill: (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 62%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 72%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-  viewBox: "0 0 72 72",
-  ref: ref,
-  "aria-labelledby": titleId
-}, props), title ? /*#__PURE__*/React.createElement("title", {
-  id: titleId
-}, title) : null, /*#__PURE__*/React.createElement("g", {
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: 2
-}, /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#61b2e4" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M22.3 44.828c.621 2.675 1.87 5.243 3.527 7.752.906 1.371 2.583.787 2.977-.809.34-.88.542-1.899.633-2.959"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#61b2e4" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M46.638 14.502c-.694.206-.997 3.416-.95 4.523.132 3.044 5.278 3.092 2.848 6.4-10.496 11.84-26.393-3.784-34.527 3.661C12.765 40.522 30.867 56.536 45 47c8.206-5.537 10.46-14.795 11.082-20.096.441-1.146 1.465-1.403 3.284-1.898 5.193-1.46 4.904-4.3 4.953-8.127-2.359 2.857-4.907 1.8-6.823 1.728-1.106-.004-2.181 1.244-2.857 1.795-.09-.63-.226-1.476-.832-2.178-1.505-1.744-4.947-.76-6.4-2.877-.232-.535-.44-.792-.623-.845a.25.25 0 0 0-.145 0z"
-}), /*#__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: "m57 26.054-.21.065-.81 1.47c.005-.04.015-.09.02-.129v-.04c-.019.083-.042.16-.06.243l-1.438 2.616a32.5 32.5 0 0 1-1.428 4.705c-5.536 8.899-15.765 7.784-22.539 3.277-3.774-2.511-8.69-7.273-11.914-7.67-2.12-.26-4.48 1.017-4.064 3.139l-.733 1.29c1.532 4.412 5.001 8.68 9.372 11.7 6.375 4.406 14.943 6.121 22.389 1.098C53.865 42.23 56.272 33.136 57 27.617z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#61b2e4" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M35.89 40.827c.522 5.619 3.525 9.756 8.005 13.242 1.298 1.01 2.697-.082 2.56-1.72.188-4.36-2.664-10.671-5.707-10.676"
-})), /*#__PURE__*/React.createElement("g", {
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: 2,
-  color: colored ? "#000" : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'inherit')
-}, /*#__PURE__*/React.createElement("path", {
-  d: "M19.455 13.84a4 4 0 0 0-1.81.252c-1.172.452-2.235 1.38-3.231 2.69a1 1 0 1 0 1.592 1.208c.848-1.115 1.687-1.773 2.36-2.033s1.146-.211 1.704.158c1.117.74 2.432 3.329 2.852 8a1 1 0 1 0 1.992-.177c-.445-4.944-1.64-8.1-3.738-9.49a3.77 3.77 0 0 0-1.721-.607zm12.027-1.233a4.3 4.3 0 0 0-1.738.229c-2.288.798-3.91 3.46-4.098 7.806a1 1 0 1 0 1.998.086c.168-3.897 1.521-5.571 2.76-6.004s2.798.19 3.904 1.986a1 1 0 1 0 1.703-1.048c-1.095-1.78-2.787-2.928-4.529-3.054zm-7.861-2.709a1 1 0 0 0-.938 1.309c.235.76.48 1.328.524 2.291a1 1 0 1 0 1.998-.092c-.06-1.28-.417-2.158-.611-2.789a1 1 0 0 0-.973-.718zm23.576 29.51a1 1 0 0 0-.453.102c-1.869.878-3.898 1.231-5.961 1.166a1 1 0 1 0-.063 2c2.335.074 4.69-.33 6.875-1.358a1 1 0 0 0-.398-1.91"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M35.881 39.812a1 1 0 0 0-.986 1.107c.55 5.926 3.774 10.351 8.386 13.94.924.718 2.183.746 3.012.158.82-.582 1.232-1.608 1.152-2.711.085-2.4-.605-5.13-1.738-7.38-.573-1.135-1.258-2.146-2.066-2.917-.809-.772-1.785-1.332-2.89-1.334a1 1 0 1 0-.005 2c.415 0 .938.23 1.514.78.576.549 1.163 1.388 1.66 2.374.994 1.972 1.621 4.536 1.537 6.479a1 1 0 0 0 .002.127c.044.518-.164.839-.324.953s-.252.185-.625-.106c-4.35-3.384-7.13-7.236-7.623-12.548a1 1 0 0 0-1.006-.922"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M18.742 29.598c-1.31-.161-2.647.13-3.693.857s-1.775 2.066-1.465 3.526a1 1 0 1 0 1.957-.416c-.147-.69.085-1.075.648-1.467s1.483-.617 2.309-.516c1.191.147 3.21 1.326 5.28 2.854s4.24 3.35 6.202 4.656a22.2 22.2 0 0 0 5.559 2.672 1 1 0 1 0 .605-1.906 20.3 20.3 0 0 1-5.054-2.43c-1.812-1.205-3.986-3.02-6.125-4.6s-4.191-2.98-6.223-3.23"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M47.088 13.537a1.3 1.3 0 0 0-.709.002 1 1 0 0 0-.566.436c-.055.063-.178.107-.22.167-.147.217-.239.43-.32.653-.16.447-.267.946-.351 1.467-.168 1.04-.237 2.116-.207 2.802.045 1.042.554 1.876 1.117 2.465.564.59 1.183 1.003 1.637 1.37.454.365.681.655.726.82.044.158.033.433-.423 1.072-2.458 2.752-5.114 3.86-7.993 4.154-2.894.296-6.015-.279-9.136-1.02-3.122-.74-6.23-1.643-9.176-1.888-2.947-.245-5.828.218-8.11 2.307a1 1 0 0 0-.318.628c-.533 4.896 2.093 10.255 6.252 14.473s9.927 7.332 16.002 7.454a1 1 0 1 0 .04-2c-5.412-.107-10.767-2.95-14.619-6.856-3.716-3.77-5.902-8.477-5.664-12.406 1.723-1.406 3.753-1.814 6.25-1.606 2.65.22 5.697 1.089 8.88 1.844 3.18.755 6.51 1.4 9.804 1.062 3.293-.337 6.544-1.716 9.324-4.851a1 1 0 0 0 .059-.07c.707-.964.996-1.956.755-2.827-.24-.87-.853-1.405-1.398-1.845s-1.085-.815-1.447-1.194-.544-.692-.565-1.172c-.018-.42.04-1.503.184-2.396.024-.15.06-.234.088-.371.979 1.078 2.314 1.477 3.437 1.693 1.255.241 2.207.454 2.653.97.395.458.51 1.052.597 1.667a1 1 0 0 0 1.623.633c.424-.346.83-.768 1.246-1.09s.794-.478.971-.479c.79.034 1.96.328 3.324.23.783-.055 1.619-.353 2.448-.831-.046.948-.138 1.795-.409 2.431-.459 1.08-1.326 1.923-3.756 2.606-.901.245-1.651.43-2.335.773-.687.344-1.307.937-1.612 1.729a1 1 0 0 0-.058.242c-.504 4.29-2.123 11.218-7.155 16.445a1 1 0 1 0 1.442 1.387c5.413-5.625 7.105-12.838 7.662-17.381.13-.325.24-.445.615-.633.39-.195 1.062-.388 1.975-.637l.007-.002c2.764-.777 4.348-2.084 5.055-3.746s.603-3.445.627-5.33a1 1 0 0 0-1.771-.649c-1.029 1.246-1.91 1.533-2.877 1.602s-2.013-.194-3.137-.236l-.033-.002c-.93-.004-1.64.462-2.205.9-.064.05-.084.077-.145.127-.15-.356-.288-.717-.586-1.062-1.06-1.229-2.583-1.396-3.789-1.627-1.196-.23-2.05-.468-2.53-1.15-.236-.555-.442-1.037-1.18-1.253z"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M22.281 43.816a1 1 0 0 0-.928 1.238c.656 2.826 1.963 5.498 3.666 8.077.646.976 1.828 1.407 2.803 1.115.96-.288 1.68-1.125 1.959-2.192.369-.98.585-2.053.68-3.156a1 1 0 1 0-1.994-.172c-.085.99-.274 1.921-.569 2.684a1 1 0 0 0-.039.12c-.125.506-.423.743-.611.8s-.298.093-.559-.301c-1.612-2.44-2.802-4.903-3.388-7.428a1 1 0 0 0-1.02-.785"
-})));
-const ForwardRef = forwardRef(WhaleSpoutingIcon);
+    "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", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#61b2e4" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M22.3 44.828c.621 2.675 1.87 5.243 3.527 7.752.906 1.371 2.583.787 2.977-.809.34-.88.542-1.899.633-2.959"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#61b2e4" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M46.638 14.502c-.694.206-.997 3.416-.95 4.523.132 3.044 5.278 3.092 2.848 6.4-10.496 11.84-26.393-3.784-34.527 3.661C12.765 40.522 30.867 56.536 45 47c8.206-5.537 10.46-14.795 11.082-20.096.441-1.146 1.465-1.403 3.284-1.898 5.193-1.46 4.904-4.3 4.953-8.127-2.359 2.857-4.907 1.8-6.823 1.728-1.106-.004-2.181 1.244-2.857 1.795-.09-.63-.226-1.476-.832-2.178-1.505-1.744-4.947-.76-6.4-2.877-.232-.535-.44-.792-.623-.845a.252.252 0 00-.145 0z"
+  }), /*#__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: "M57 26.054l-.21.065-.81 1.47c.005-.04.015-.09.02-.129v-.04c-.019.083-.042.16-.06.243l-1.438 2.616a32.465 32.465 0 01-1.428 4.705c-5.536 8.899-15.765 7.784-22.539 3.277-3.774-2.511-8.69-7.273-11.914-7.67-2.12-.26-4.48 1.017-4.064 3.139l-.733 1.29c1.532 4.412 5.001 8.68 9.372 11.7 6.375 4.406 14.943 6.121 22.389 1.098C53.865 42.23 56.272 33.136 57 27.617v-1.563z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#61b2e4" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M35.89 40.827c.522 5.619 3.525 9.756 8.005 13.242 1.298 1.01 2.697-.082 2.56-1.72.188-4.36-2.664-10.671-5.707-10.676"
+  })), /*#__PURE__*/React.createElement("g", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    color: colored ? "#000" : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'inherit')
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M19.455 13.84a3.965 3.965 0 00-1.81.252c-1.172.452-2.235 1.38-3.231 2.69a1 1 0 101.592 1.208c.848-1.115 1.687-1.773 2.36-2.033.672-.26 1.146-.211 1.704.158 1.117.74 2.432 3.329 2.852 8a1 1 0 101.992-.177c-.445-4.944-1.64-8.1-3.738-9.49a3.767 3.767 0 00-1.721-.607zm12.027-1.233a4.3 4.3 0 00-1.738.229c-2.288.798-3.91 3.46-4.098 7.806a1 1 0 101.998.086c.168-3.897 1.521-5.571 2.76-6.004 1.239-.432 2.798.19 3.904 1.986a1 1 0 101.703-1.048c-1.095-1.78-2.787-2.928-4.529-3.054zm-7.861-2.709a1 1 0 00-.938 1.309c.235.76.48 1.328.524 2.291a1 1 0 101.998-.092c-.06-1.28-.417-2.158-.611-2.789a1 1 0 00-.973-.718zm23.576 29.51a1 1 0 00-.453.102c-1.869.878-3.898 1.231-5.961 1.166a1 1 0 10-.063 2c2.335.074 4.69-.33 6.875-1.358a1 1 0 00-.398-1.91z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M35.881 39.812a1 1 0 00-.986 1.107c.55 5.926 3.774 10.351 8.386 13.94.924.718 2.183.746 3.012.158.82-.582 1.232-1.608 1.152-2.711.085-2.4-.605-5.13-1.738-7.38-.573-1.135-1.258-2.146-2.066-2.917-.809-.772-1.785-1.332-2.89-1.334a1 1 0 10-.005 2c.415 0 .938.23 1.514.78.576.549 1.163 1.388 1.66 2.374.994 1.972 1.621 4.536 1.537 6.479a1 1 0 00.002.127c.044.518-.164.839-.324.953s-.252.185-.625-.106c-4.35-3.384-7.13-7.236-7.623-12.548a1 1 0 00-1.006-.922z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M18.742 29.598c-1.31-.161-2.647.13-3.693.857s-1.775 2.066-1.465 3.526a1 1 0 101.957-.416c-.147-.69.085-1.075.648-1.467.563-.392 1.483-.617 2.309-.516 1.191.147 3.21 1.326 5.28 2.854s4.24 3.35 6.202 4.656a22.217 22.217 0 005.559 2.672 1 1 0 10.605-1.906 20.253 20.253 0 01-5.054-2.43c-1.812-1.205-3.986-3.02-6.125-4.6s-4.191-2.98-6.223-3.23z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M47.088 13.537a1.3 1.3 0 00-.709.002 1 1 0 00-.566.436c-.055.063-.178.107-.22.167-.147.217-.239.43-.32.653-.16.447-.267.946-.351 1.467-.168 1.04-.237 2.116-.207 2.802.045 1.042.554 1.876 1.117 2.465.564.59 1.183 1.003 1.637 1.37.454.365.681.655.726.82.044.158.033.433-.423 1.072-2.458 2.752-5.114 3.86-7.993 4.154-2.894.296-6.015-.279-9.136-1.02-3.122-.74-6.23-1.643-9.176-1.888-2.947-.245-5.828.218-8.11 2.307a1 1 0 00-.318.628c-.533 4.896 2.093 10.255 6.252 14.473s9.927 7.332 16.002 7.454a1 1 0 10.04-2c-5.412-.107-10.767-2.95-14.619-6.856-3.716-3.77-5.902-8.477-5.664-12.406 1.723-1.406 3.753-1.814 6.25-1.606 2.65.22 5.697 1.089 8.88 1.844 3.18.755 6.51 1.4 9.804 1.062 3.293-.337 6.544-1.716 9.324-4.851a1 1 0 00.059-.07c.707-.964.996-1.956.755-2.827-.24-.87-.853-1.405-1.398-1.845-.545-.44-1.085-.815-1.447-1.194-.363-.379-.544-.692-.565-1.172-.018-.42.04-1.503.184-2.396.024-.15.06-.234.088-.371.979 1.078 2.314 1.477 3.437 1.693 1.255.241 2.207.454 2.653.97.395.458.51 1.052.597 1.667a1 1 0 001.623.633c.424-.346.83-.768 1.246-1.09.416-.322.794-.478.971-.479.79.034 1.96.328 3.324.23.783-.055 1.619-.353 2.448-.831-.046.948-.138 1.795-.409 2.431-.459 1.08-1.326 1.923-3.756 2.606-.901.245-1.651.43-2.335.773-.687.344-1.307.937-1.612 1.729a1 1 0 00-.058.242c-.504 4.29-2.123 11.218-7.155 16.445a1 1 0 101.442 1.387c5.413-5.625 7.105-12.838 7.662-17.381.13-.325.24-.445.615-.633.39-.195 1.062-.388 1.975-.637a1 1 0 00.007-.002c2.764-.777 4.348-2.084 5.055-3.746.707-1.662.603-3.445.627-5.33a1 1 0 00-1.771-.649c-1.029 1.246-1.91 1.533-2.877 1.602-.967.07-2.013-.194-3.137-.236a1 1 0 00-.033-.002c-.93-.004-1.64.462-2.205.9-.064.05-.084.077-.145.127-.15-.356-.288-.717-.586-1.062-1.06-1.229-2.583-1.396-3.789-1.627-1.196-.23-2.05-.468-2.53-1.15-.236-.555-.442-1.037-1.18-1.253z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M22.281 43.816a1 1 0 00-.928 1.238c.656 2.826 1.963 5.498 3.666 8.077.646.976 1.828 1.407 2.803 1.115.96-.288 1.68-1.125 1.959-2.192.369-.98.585-2.053.68-3.156a1 1 0 10-1.994-.172c-.085.99-.274 1.921-.569 2.684a1 1 0 00-.039.12c-.125.506-.423.743-.611.8s-.298.093-.559-.301c-1.612-2.44-2.802-4.903-3.388-7.428a1 1 0 00-1.02-.785z"
+  })));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(WhaleSpoutingIcon);
 module.exports = ForwardRef;