@datalayer/icons-react 1.0.13 → 1.0.15

package/data2/esm/MirrorBallIcon.js

@@ -6,136 +6,194 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const MirrorBallIcon = ({
+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 MirrorBallIcon({
   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", {
-  d: "M40.388 15.005V12.08a.21.21 0 0 0-.212-.212H31.29a.21.21 0 0 0-.212.212v2.926c0 .152.153.249.292.19a11.05 11.05 0 0 1 8.725 0 .207.207 0 0 0 .292-.19z"
-}), /*#__PURE__*/React.createElement("ellipse", {
-  cx: 36,
-  cy: 40.097,
-  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,
-  rx: 7.759,
-  ry: 24.964
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M60.917 39.454c-.287-5.892-3.485-11.088-9.814-14.318a.2.2 0 0 1-.087-.087C47.674 18.428 42.19 14.097 36 14.097c-5.41 0-10.275 3.31-13.647 8.56-.077.12-.012.277.125.32a2.99 2.99 0 0 1 2.06 2.438c.018.134.144.218.271.173a32.7 32.7 0 0 1 11.173-1.913c4.66-.04 9.27.94 13.51 2.87a.23.23 0 0 1 .112.111c.89 1.94 1.57 3.971 2.025 6.056a.213.213 0 0 1-.255.252 69 69 0 0 0-15.356-1.627 68.8 68.8 0 0 0-15.384 1.634.213.213 0 0 1-.255-.253q.41-1.85 1.04-3.634c.046-.13-.041-.256-.177-.271a3 3 0 0 1-1.36-.516c-.119-.082-.281-.04-.33.095a33 33 0 0 0-1.374 5.12.2.2 0 0 1-.143.157 20.5 20.5 0 0 0-4.69 2.01c-.18.105-.391-.078-.304-.267a16.65 16.65 0 0 1 6.364-7.167c.117-.072.129-.224.033-.322a3 3 0 0 1-.73-1.226c-.042-.14-.2-.206-.322-.126-5.14 3.367-7.117 8.182-7.117 13.526 0 6.187 3.075 11.668 9.689 15.01a.2.2 0 0 1 .087.087c3.347 6.552 8.802 9.58 14.955 9.58 6.161 0 11.62-3.038 14.967-9.604a.2.2 0 0 1 .088-.087c6.355-3.228 9.574-8.435 9.862-14.343a3.2 3.2 0 0 0 0-1.286M35.982 21.675a34.6 34.6 0 0 0-11.423 1.889c-.192.066-.36-.148-.246-.316 2.98-4.41 7.118-7.15 11.687-7.15 4.575 0 8.717 2.746 11.698 7.166.113.168-.055.382-.247.316a34.6 34.6 0 0 0-11.469-1.905M58.596 35.62a21 21 0 0 0-4.633-1.962.2.2 0 0 1-.143-.158 33 33 0 0 0-1.266-4.807c-.066-.19.144-.36.313-.252a16.7 16.7 0 0 1 6.03 6.91c.089.187-.122.372-.301.269m-40.762.193a35.5 35.5 0 0 0-.031 8.238.214.214 0 0 1-.286.222c-3.471-1.227-5.462-2.738-5.462-4.175 0-1.481 2.112-3.038 5.778-4.285zm-4.489 8.703a20.5 20.5 0 0 0 4.703 2.015.2.2 0 0 1 .144.157 33 33 0 0 0 1.298 4.87c.066.19-.143.362-.312.254a16.7 16.7 0 0 1-6.137-7.029c-.087-.188.125-.371.304-.267M36 64.025c-4.537 0-8.648-2.703-11.623-7.059-.114-.167.053-.382.245-.317a35.44 35.44 0 0 0 22.767-.016c.192-.065.359.15.245.317-2.976 4.365-7.091 7.075-11.634 7.075M59.93 40.48c-.273 1.137-1.751 2.299-4.179 3.315a.208.208 0 0 0-.098.299c.242.422.362.903.347 1.389-.005.158.142.278.29.22a17.4 17.4 0 0 0 2.294-1.115c.18-.104.396.083.307.271a16.7 16.7 0 0 1-6.06 6.92c-.17.109-.38-.062-.315-.252q.467-1.366.81-2.77c.036-.143-.083-.268-.23-.26a2.7 2.7 0 0 1-1.399-.294c-.122-.064-.265-.008-.299.126a29.3 29.3 0 0 1-1.84 5.231.23.23 0 0 1-.112.111 32 32 0 0 1-13.464 2.848 32 32 0 0 1-13.417-2.825.23.23 0 0 1-.112-.11 29.6 29.6 0 0 1-2.066-6.106.213.213 0 0 1 .255-.253 68.8 68.8 0 0 0 15.376 1.632 70.4 70.4 0 0 0 14.338-1.406c.152-.031.213-.205.128-.334-.268-.41-.43-.88-.472-1.368-.011-.126-.12-.215-.244-.19a67.8 67.8 0 0 1-13.75 1.298 64 64 0 0 1-15.932-1.804.22.22 0 0 1-.165-.182 33.9 33.9 0 0 1-.011-9.542.22.22 0 0 1 .165-.183 64 64 0 0 1 15.943-1.808 64 64 0 0 1 15.904 1.798.22.22 0 0 1 .166.183c.22 1.571.331 3.156.334 4.743q0 1.143-.077 2.259c-.01.136.108.233.243.213a2.86 2.86 0 0 1 1.44.157c.137.051.286-.03.296-.176.058-.808.098-1.624.098-2.454a36 36 0 0 0-.218-3.929.213.213 0 0 1 .283-.222c3.184 1.122 5.125 2.48 5.443 3.805.005.127.015.254.015.383s-.01.254-.015.382"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M40.388 15.325v-3.458h-9.31v3.458a11.05 11.05 0 0 1 9.31 0"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#92d3f5" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M28.588 32.687v14.82l-9.549-1.722-.461-11.238zm1.722-9.558-1.722 9.558h14.824l-1.757-9.558z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#ffa7c0" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 69%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 65%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 69%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 65%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 69%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "m30.31 23.129-8.615 2.682-3.117 8.736 10.01-1.86zM12.248 43.61l6.791 2.175 2.193 8.368-5.599-4.785a10.24 10.24 0 0 1-3.385-5.758"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#b399c8" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 59%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "m28.588 47.507 1.722 9.558 10.867.454 2.199-9.662z"
-}), /*#__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.578 25.838 5.396-8.161-1.425.372a9.96 9.96 0 0 0-4.483 2.551l-4.514 4.46a2 2 0 0 0-.39.55l-2.184 4.655z"
-}), /*#__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: "m21.579 25.838-4.647 3-3.325 4.506a5.6 5.6 0 0 0-1.004 2.312l-.6 3.234c-.15.81-.056 1.648.273 2.405l1.05 2.423 5.713 2.066-.46-11.237z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#92d3f5" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "m45.214 17.961 1.667 2.607 3.437 5.27L56 29.687s1.525 1.012 1.96.562c.637-.659-1.115-2.983-1.115-2.983a13.1 13.1 0 0 0-3.258-4.487l-2.147-1.922a14.6 14.6 0 0 0-5.31-3.035l-.464.057z"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#b399c8" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 59%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "m39.742 63.373 2.255-6.365L50 54.514l-4.808 6.243a6.84 6.84 0 0 1-3.293 2.327l-2.028.514z"
-}), /*#__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: "M28.588 32.687v14.82l14.788.35.036-15.17z"
-}), /*#__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.408 16.026-2.885.076c-.26.007-.52.042-.771.107l-2.965 1.03a7.4 7.4 0 0 0-3.426 2.467l-4.27 5.54 8.219-2.117h11.345l-3.171-5.899a2.29 2.29 0 0 0-2.076-1.204m16.354 18.338-2.444-8.526-8.663-2.709 1.739 10.184.016.003-.034 14.541 9.582-2.061.012-11.395z"
-}), /*#__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: "m39.773 17.147 1.804 5.733a.5.5 0 0 0 .327.327l6.872 2.149a.5.5 0 0 0 .541-.787l-3.723-4.723a8.8 8.8 0 0 0-3.721-2.754l-1.442-.561a.5.5 0 0 0-.658.616m10.545 8.691 2.644 8.536a.2.2 0 0 1 .008.055l-.012 11.216a.19.19 0 0 1-.147.183l-9.309 2.002a.19.19 0 0 0-.145.155l-1.316 8.728a.187.187 0 0 0 .24.206l7.267-2.264a.187.187 0 0 1 .218.27l-3.936 6.908c-.085.15.06.325.224.269l1.49-.519a13.5 13.5 0 0 0 4.766-2.873l1.804-1.68a16.4 16.4 0 0 0 4.06-5.945l.616-1.552a22.7 22.7 0 0 0 1.6-8.368 25 25 0 0 0-.573-5.324.8.8 0 0 0-.07-.196l-.781-1.564a11.5 11.5 0 0 0-3.12-3.849zM13.857 49.66l1.787 3.732a15.1 15.1 0 0 0 5.91 6.464l4.839 2.876a11.6 11.6 0 0 0 3.967 1.46l5.47.188a3.57 3.57 0 0 0 3.276-1.897l2.891-5.475-11.687.057-1.722-9.558-9.549-1.722 2.193 8.368-7.375-4.492z"
-}), /*#__PURE__*/React.createElement("ellipse", {
-  cx: 36,
-  cy: 40.097,
-  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,
-  rx: 7.759,
-  ry: 24.964
-}), /*#__PURE__*/React.createElement("ellipse", {
-  cx: 36,
-  cy: 40.061,
-  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,
-  rx: 17.422,
-  ry: 24.964
-}), /*#__PURE__*/React.createElement("ellipse", {
-  cx: 36.018,
-  cy: 40.097,
-  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,
-  rx: 24.964,
-  ry: 7.759
-}), /*#__PURE__*/React.createElement("ellipse", {
-  cx: 35.982,
-  cy: 40.097,
-  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,
-  rx: 24.964,
-  ry: 17.422
-}), /*#__PURE__*/React.createElement("circle", {
-  cx: 21.578,
-  cy: 25.838,
-  r: 3,
-  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))))"))
-}), /*#__PURE__*/React.createElement("circle", {
-  cx: 53,
-  cy: 45.502,
-  r: 3,
-  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))))"))
-}), /*#__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",
-  strokeWidth: 2
-}, /*#__PURE__*/React.createElement("circle", {
-  cx: 36,
-  cy: 40.061,
-  r: 25,
-  strokeLinecap: "round"
-}), /*#__PURE__*/React.createElement("path", {
-  strokeLinecap: "round",
-  d: "M31.079 15.061v-3.194h9.089v3.194"
-}), /*#__PURE__*/React.createElement("path", {
-  strokeLinecap: "square",
-  d: "M35.874 11.867v-6.79"
-})));
-const ForwardRef = forwardRef(MirrorBallIcon);
+    "aria-hidden": "true",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props, {
+    "data-datalayer-icon": "",
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-color": props.color,
+      color: props.color
+    }) : props && props.style
+  }), /*#__PURE__*/React.createElement("style", null, "[data-color-mode=\"light\"]{--datalayer-icon-color-scheme:light}[data-color-mode=\"dark\"]{--datalayer-icon-color-scheme:dark}svg[data-datalayer-icon]{color-scheme:var(--datalayer-icon-color-scheme, light dark)}"), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    d: "M40.388 15.005V12.08a.212.212 0 00-.212-.212H31.29a.212.212 0 00-.212.212v2.926c0 .152.153.249.292.19a11.045 11.045 0 018.725 0 .207.207 0 00.292-.19z"
+  }), /*#__PURE__*/React.createElement("ellipse", {
+    cx: 36,
+    cy: 40.097,
+    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,
+    rx: 7.759,
+    ry: 24.964
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M60.917 39.454c-.287-5.892-3.485-11.088-9.814-14.318a.2.2 0 01-.087-.087C47.674 18.428 42.19 14.097 36 14.097c-5.41 0-10.275 3.31-13.647 8.56-.077.12-.012.277.125.32a2.994 2.994 0 012.06 2.438c.018.134.144.218.271.173a32.732 32.732 0 0111.173-1.913c4.66-.04 9.27.94 13.51 2.87a.226.226 0 01.112.111c.89 1.94 1.57 3.971 2.025 6.056a.213.213 0 01-.255.252 68.843 68.843 0 00-15.356-1.627 68.804 68.804 0 00-15.384 1.634.213.213 0 01-.255-.253c.273-1.232.62-2.445 1.04-3.634.046-.13-.041-.256-.177-.271a2.97 2.97 0 01-1.36-.516c-.119-.082-.281-.04-.33.095a33.018 33.018 0 00-1.374 5.12.201.201 0 01-.143.157 20.505 20.505 0 00-4.69 2.01c-.18.105-.391-.078-.304-.267a16.648 16.648 0 016.364-7.167c.117-.072.129-.224.033-.322a2.983 2.983 0 01-.73-1.226c-.042-.14-.2-.206-.322-.126-5.14 3.367-7.117 8.182-7.117 13.526 0 6.187 3.075 11.668 9.689 15.01a.2.2 0 01.087.087c3.347 6.552 8.802 9.58 14.955 9.58 6.161 0 11.62-3.038 14.967-9.604a.2.2 0 01.088-.087c6.355-3.228 9.574-8.435 9.862-14.343a3.212 3.212 0 000-1.286zM35.982 21.675a34.561 34.561 0 00-11.423 1.889c-.192.066-.36-.148-.246-.316 2.98-4.41 7.118-7.15 11.687-7.15 4.575 0 8.717 2.746 11.698 7.166.113.168-.055.382-.247.316a34.548 34.548 0 00-11.469-1.905zM58.596 35.62a20.888 20.888 0 00-4.633-1.962.201.201 0 01-.143-.158 33.034 33.034 0 00-1.266-4.807c-.066-.19.144-.36.313-.252a16.68 16.68 0 016.03 6.91c.089.187-.122.372-.301.269zm-40.762.193a35.52 35.52 0 00-.031 8.238.214.214 0 01-.286.222c-3.471-1.227-5.462-2.738-5.462-4.175 0-1.481 2.112-3.038 5.778-4.285zm-4.489 8.703a20.525 20.525 0 004.703 2.015.2.2 0 01.144.157 32.907 32.907 0 001.298 4.87c.066.19-.143.362-.312.254a16.68 16.68 0 01-6.137-7.029c-.087-.188.125-.371.304-.267zM36 64.025c-4.537 0-8.648-2.703-11.623-7.059-.114-.167.053-.382.245-.317a35.44 35.44 0 0022.767-.016c.192-.065.359.15.245.317-2.976 4.365-7.091 7.075-11.634 7.075zM59.93 40.48c-.273 1.137-1.751 2.299-4.179 3.315a.208.208 0 00-.098.299c.242.422.362.903.347 1.389-.005.158.142.278.29.22a17.393 17.393 0 002.294-1.115c.18-.104.396.083.307.271a16.698 16.698 0 01-6.06 6.92c-.17.109-.38-.062-.315-.252.311-.91.582-1.835.81-2.77.036-.143-.083-.268-.23-.26a2.682 2.682 0 01-1.399-.294c-.122-.064-.265-.008-.299.126a29.296 29.296 0 01-1.84 5.231.227.227 0 01-.112.111 31.96 31.96 0 01-13.464 2.848 31.983 31.983 0 01-13.417-2.825.227.227 0 01-.112-.11 29.629 29.629 0 01-2.066-6.106.213.213 0 01.255-.253 68.807 68.807 0 0015.376 1.632 70.41 70.41 0 0014.338-1.406c.152-.031.213-.205.128-.334-.268-.41-.43-.88-.472-1.368-.011-.126-.12-.215-.244-.19a67.806 67.806 0 01-13.75 1.298 63.962 63.962 0 01-15.932-1.804.22.22 0 01-.165-.182 33.886 33.886 0 01-.011-9.542.22.22 0 01.165-.183 63.94 63.94 0 0115.943-1.808 64.014 64.014 0 0115.904 1.798.222.222 0 01.166.183c.22 1.571.331 3.156.334 4.743 0 .762-.026 1.515-.077 2.259-.01.136.108.233.243.213a2.864 2.864 0 011.44.157c.137.051.286-.03.296-.176.058-.808.098-1.624.098-2.454a36.244 36.244 0 00-.218-3.929.213.213 0 01.283-.222c3.184 1.122 5.125 2.48 5.443 3.805.005.127.015.254.015.383s-.01.254-.015.382z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M40.388 15.325v-3.458h-9.31v3.458a11.045 11.045 0 019.31 0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#92d3f5" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M28.588 32.687v14.82l-9.549-1.722-.461-11.238 10.01-1.86zm1.722-9.558l-1.722 9.558h14.824l-1.757-9.558H30.31z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#ffa7c0" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 69%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 65%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 69%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 65%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 69%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M30.31 23.129l-8.615 2.682-3.117 8.736 10.01-1.86 1.722-9.558zM12.248 43.61l6.791 2.175 2.193 8.368-5.599-4.785a10.244 10.244 0 01-3.385-5.758z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#b399c8" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 59%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M28.588 47.507l1.722 9.558 10.867.454 2.199-9.662-14.788-.35z"
+  }), /*#__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.578 25.838l5.396-8.161-1.425.372a9.964 9.964 0 00-4.483 2.551l-4.514 4.46a1.937 1.937 0 00-.39.55l-2.184 4.655 7.6-4.427"
+  }), /*#__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: "M21.579 25.838l-4.647 3-3.325 4.506a5.619 5.619 0 00-1.004 2.312l-.6 3.234c-.15.81-.056 1.648.273 2.405l1.05 2.423 5.713 2.066-.46-11.237 3-8.71z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#92d3f5" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 61%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 73%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M45.214 17.961l1.667 2.607 3.437 5.27L56 29.687s1.525 1.012 1.96.562c.637-.659-1.115-2.983-1.115-2.983a13.142 13.142 0 00-3.258-4.487l-2.147-1.922a14.601 14.601 0 00-5.31-3.035l-.464.057-.452.082z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#b399c8" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 59%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 75%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 59%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M39.742 63.373l2.255-6.365L50 54.514l-4.808 6.243a6.84 6.84 0 01-3.293 2.327l-2.028.514-.13-.225z"
+  }), /*#__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: "M28.588 32.687v14.82l14.788.35.036-15.17H28.588"
+  }), /*#__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.408 16.026l-2.885.076c-.26.007-.52.042-.771.107l-2.965 1.03a7.387 7.387 0 00-3.426 2.467l-4.27 5.54 8.219-2.117h11.345l-3.171-5.899a2.289 2.289 0 00-2.076-1.204zm16.354 18.338l-2.444-8.526-8.663-2.709 1.739 10.184.016.003-.034 14.541 9.582-2.061.012-11.395-.208-.037z"
+  }), /*#__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: "M39.773 17.147l1.804 5.733a.5.5 0 00.327.327l6.872 2.149a.5.5 0 00.541-.787l-3.723-4.723a8.805 8.805 0 00-3.721-2.754l-1.442-.561a.5.5 0 00-.658.616zm10.545 8.691l2.644 8.536a.186.186 0 01.008.055l-.012 11.216a.187.187 0 01-.147.183l-9.309 2.002a.187.187 0 00-.145.155l-1.316 8.728a.187.187 0 00.24.206l7.267-2.264a.187.187 0 01.218.27l-3.936 6.908c-.085.15.06.325.224.269l1.49-.519a13.495 13.495 0 004.766-2.873l1.804-1.68a16.396 16.396 0 004.06-5.945l.616-1.552a22.68 22.68 0 001.6-8.368 25 25 0 00-.573-5.324.837.837 0 00-.07-.196l-.781-1.564a11.466 11.466 0 00-3.12-3.849l-5.528-4.394zM13.857 49.66l1.787 3.732a15.112 15.112 0 005.91 6.464l4.839 2.876a11.591 11.591 0 003.967 1.46l5.47.188a3.565 3.565 0 003.276-1.897l2.891-5.475-11.687.057-1.722-9.558-9.549-1.722 2.193 8.368-7.375-4.492z"
+  }), /*#__PURE__*/React.createElement("ellipse", {
+    cx: 36,
+    cy: 40.097,
+    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,
+    rx: 7.759,
+    ry: 24.964
+  }), /*#__PURE__*/React.createElement("ellipse", {
+    cx: 36,
+    cy: 40.061,
+    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,
+    rx: 17.422,
+    ry: 24.964
+  }), /*#__PURE__*/React.createElement("ellipse", {
+    cx: 36.018,
+    cy: 40.097,
+    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,
+    rx: 24.964,
+    ry: 7.759
+  }), /*#__PURE__*/React.createElement("ellipse", {
+    cx: 35.982,
+    cy: 40.097,
+    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,
+    rx: 24.964,
+    ry: 17.422
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: 21.578,
+    cy: 25.838,
+    r: 3,
+    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))))"))
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: 53,
+    cy: 45.502,
+    r: 3,
+    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))))"))
+  }), /*#__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",
+    strokeWidth: 2
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: 36,
+    cy: 40.061,
+    r: 25,
+    strokeLinecap: "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    d: "M31.079 15.061v-3.194h9.089v3.194"
+  }), /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "square",
+    d: "M35.874 11.867v-6.79"
+  })));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(MirrorBallIcon);
 export default ForwardRef;

package/data2/esm/MobilePhoneIcon.js

@@ -6,63 +6,121 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const MobilePhoneIcon = ({
+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 MobilePhoneIcon({
   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",
-  strokeMiterlimit: 10,
-  strokeWidth: 2
-}, /*#__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: "M52.5 64.764h-33a1 1 0 0 1-1-1v-56a1 1 0 0 1 1-1h33a1 1 0 0 1 1 1v56a1 1 0 0 1-1 1"
-}), /*#__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: "M48.034 55H23.966a.966.966 0 0 1-.966-.966V13.966c0-.534.433-.966.966-.966h24.068c.534 0 .966.432.966.966v40.068a.966.966 0 0 1-.966.966"
-}), /*#__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: "M31 10h10z"
-})), /*#__PURE__*/React.createElement("g", {
-  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))))")),
-  strokeMiterlimit: 10
-}, /*#__PURE__*/React.createElement("path", {
-  fill: "none",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: 2,
-  d: "M52.5 64.764h-33a1 1 0 0 1-1-1v-56a1 1 0 0 1 1-1h33a1 1 0 0 1 1 1v56a1 1 0 0 1-1 1"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: "none",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: 2,
-  d: "M48.034 55H23.966a.966.966 0 0 1-.966-.966V13.966c0-.534.433-.966.966-.966h24.068c.534 0 .966.432.966.966v40.068a.966.966 0 0 1-.966.966"
-}), /*#__PURE__*/React.createElement("circle", {
-  cx: 36,
-  cy: 60,
-  r: 2
-}), /*#__PURE__*/React.createElement("path", {
-  fill: "none",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: 2,
-  d: "M31 10h10z"
-})));
-const ForwardRef = forwardRef(MobilePhoneIcon);
+    "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",
+    strokeMiterlimit: 10,
+    strokeWidth: 2
+  }, /*#__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: "M52.5 64.764h-33a1 1 0 01-1-1v-56a1 1 0 011-1h33a1 1 0 011 1v56a1 1 0 01-1 1z"
+  }), /*#__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: "M48.034 55H23.966a.966.966 0 01-.966-.966V13.966c0-.534.433-.966.966-.966h24.068c.534 0 .966.432.966.966v40.068a.966.966 0 01-.966.966z"
+  }), /*#__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: "M31 10h10-10z"
+  })), /*#__PURE__*/React.createElement("g", {
+    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))))")),
+    strokeMiterlimit: 10
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M52.5 64.764h-33a1 1 0 01-1-1v-56a1 1 0 011-1h33a1 1 0 011 1v56a1 1 0 01-1 1z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M48.034 55H23.966a.966.966 0 01-.966-.966V13.966c0-.534.433-.966.966-.966h24.068c.534 0 .966.432.966.966v40.068a.966.966 0 01-.966.966z"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: 36,
+    cy: 60,
+    r: 2
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M31 10h10-10z"
+  })));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(MobilePhoneIcon);
 export default ForwardRef;