@datalayer/icons-react 1.0.13 → 1.0.15

package/data2/esm/PassportControlIcon.js

@@ -6,100 +6,158 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const PassportControlIcon = ({
+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 PassportControlIcon({
   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 ? "#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: "M16.274 61.9s-1.8-13.9 10.2-13.9c3.2 2.1 5.9 3.6 9 3.6h-.1c3.1 0 6.3-1.6 9.5-3.7 11.6 0 9.6 13.9 9.8 14"
-}), /*#__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: "M44.844 47.285a18.3 18.3 0 0 1-8.87 3.514c13.1.4 13.1 7.1 13.8 11.1h5.1s1.97-14.614-10.03-14.614"
-}), /*#__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: "M50.074 19.5c1.2.3.4 2.5-.4 3.5l-2.2 2.7h-.1a8.6 8.6 0 0 0-1.9-2l-.6-.4a15 15 0 0 0 1.3-1.2h-21.1a10 10 0 0 0 1.5 1.2l-.8.5a8.3 8.3 0 0 0-1.8 1.8l-.1-.1-2-2.4c-.8-1-1.6-3.2-.4-3.5 5.7-1.5 6-7.9 14.3-7.9s8.6 6.3 14.3 7.8m-14.2.4c2.1 0 2.5-3.9 2.5-3.9a4.31 4.31 0 0 0-5-.1c-.1 0 .3 4 2.5 4"
-}), /*#__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: "M35.874 19.9c-2.1 0-2.5-3.9-2.5-3.9a4.01 4.01 0 0 1 5 .1c0-.1-.4 3.8-2.5 3.8"
-}), /*#__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: "M42.674 13.8s.9 8.2-2.6 8.2l5.3.3 1.7 3s3.7-1.9 3.6-5.2c.1 0-7.2-4.2-8-6.3"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#3f3f3f" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 41%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 93%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 41%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 93%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 41%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "M33.774 25.6a16.2 16.2 0 0 1-7.2-2.4c-.6-.4-1-.8-1.5-1.2h21.1a4.9 4.9 0 0 1-1.3 1.2 11.6 11.6 0 0 1-3.7 1.8 18.3 18.3 0 0 1-7.4.6"
-}), /*#__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: "m44.474 48.1-3.7 8.8-2.6-2.7-2.5-2.6h.1c2.9-.1 5.6-1.5 8.7-3.5m-8.9 3.5-2.6 2.7-2.6 2.6-3.6-8.9c3.1 2.1 5.8 3.5 8.8 3.6"
-}), /*#__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: "M47.03 48.169 41.547 62h5.477l5.169-11.645s-2.768-2.698-5.163-2.186"
-}), /*#__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: "M11.822 39.203h10.557v14.976H11.822z"
-}), /*#__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: "m46.874 33.3.1-.1c-.7 7-5.5 12.5-11.3 12.5-5.9 0-10.6-5.5-11.3-12.6a12.56 12.56 0 0 1 9.3-7.4 18.3 18.3 0 0 0 7.4-.6c3.1.3 5.8 8.2 5.8 8.2m-5.1-3.2a2 2 0 1 0-2 2 2.006 2.006 0 0 0 2-2m-8 0a2 2 0 1 0-2 2 2.006 2.006 0 0 0 2-2"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: colored ? "#f4aa41" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  d: "m46.974 33.2-.1.1s-2.7-8-5.8-8.2a10.6 10.6 0 0 0 3.7-1.8l.7.5a8.6 8.6 0 0 1 1.9 2c1.2 1.7 2 4.3-.4 7.4m-22.5-.2a.8.8 0 0 0-.1.3c-2.6-3.3-1.6-6-.3-7.7a8.6 8.6 0 0 1 1.8-1.8l.8-.6a16.2 16.2 0 0 0 7.2 2.4 12.57 12.57 0 0 0-9.4 7.4"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: "none",
-  stroke: colored ? "#000" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: 2,
-  d: "m46.99 48.521-5.216 12.45m9.837-10.29-4.549 10.316"
-}), /*#__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: "M22.378 48.744a12 12 0 0 1 4.396-.745c3.2 2.1 5.9 3.5 8.9 3.6h.1c3 0 5.6-1.4 8.7-3.5.1 0 .1-.1.2-.1 12 0 10 13 10 13m-37.9.001a16.2 16.2 0 0 1 .603-6.819"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "m26.774 47.999 3.7 8.9 2.6-2.7 2.5-2.6m2.6 2.6-2.6-2.6m8.9-3.6v.1l-3.7 8.8-2.6-2.7"
-})), /*#__PURE__*/React.createElement("path", {
-  d: "M26.774 60.4h-5.8a1 1 0 1 1 0-2h5.8a.945.945 0 0 1 1 1 1 1 0 0 1-1 1m9-20.3a6.9 6.9 0 0 1-3.4-.9.962.962 0 0 1 .9-1.7 5.15 5.15 0 0 0 5.1 0 .962.962 0 1 1 .9 1.7 7.6 7.6 0 0 1-3.5.9m6-10a2 2 0 1 1-2-2 2.006 2.006 0 0 1 2 2m-8 0a2 2 0 1 1-2-2 2.006 2.006 0 0 1 2 2"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M35.774 46.7c-6.4 0-11.7-5.9-12.3-13.8l2-.2c.5 6.7 5 11.9 10.3 11.9s9.7-5 10.3-11.7c0-.5.1-1 .1-1.5h2a9.7 9.7 0 0 1-.1 1.7c-.7 7.8-6 13.6-12.3 13.6"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M24.374 34.3a.91.91 0 0 1-.8-.4 7.23 7.23 0 0 1-1.8-5.7 8.3 8.3 0 0 1 3.4-5.2l.7-.5a1 1 0 0 1 1.2 1.6l-.8.6a6.16 6.16 0 0 0-2.6 3.9 4.37 4.37 0 0 0 .5 2.7 13.12 13.12 0 0 1 9.5-6.6.903.903 0 0 1 1.1.9.945.945 0 0 1-.9 1.1 10.85 10.85 0 0 0-8.7 7 .87.87 0 0 1-.8.6"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M36.074 26.8c-4.7 0-9.2-1.5-11.7-4a.91.91 0 0 1-.2-1.1.96.96 0 0 1 .9-.6h21.1a.96.96 0 0 1 .9.6 1.07 1.07 0 0 1-.1 1.1c-2 2.4-5.7 3.9-10 4zm-7.8-3.7a17.9 17.9 0 0 0 8.6 1.7 13.84 13.84 0 0 0 6.5-1.7z"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M47.474 26.8a1.4 1.4 0 0 1-.6-.2.97.97 0 0 1-.1-1.4l2.2-2.7a4.06 4.06 0 0 0 .8-1.9c-2.6-.7-4.1-2.3-5.6-3.8-2-2-3.9-4-8.3-4-4.5 0-6.3 1.9-8.3 4-1.5 1.5-3 3.1-5.6 3.8a3.7 3.7 0 0 0 .8 1.9l2 2.4a.993.993 0 0 1-1.5 1.3l-2-2.4c-.7-.8-1.6-2.6-1.2-3.9a1.76 1.76 0 0 1 1.3-1.2 10.9 10.9 0 0 0 4.8-3.3c2.1-2.1 4.4-4.6 9.7-4.6s7.7 2.4 9.7 4.6c1.4 1.4 2.7 2.8 4.8 3.3a1.95 1.95 0 0 1 1.3 1.2c.4 1.3-.5 3.1-1.2 3.9l-2.2 2.7a1.9 1.9 0 0 1-.8.3"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M46.974 34.3h-.2a.97.97 0 0 1-.8-.7c-1-3-3.3-7.4-4.9-7.5a.903.903 0 0 1-.9-1.1.955.955 0 0 1 1.1-.9c2.7.2 4.8 4.3 5.9 7a4.4 4.4 0 0 0 .4-2.5 6.16 6.16 0 0 0-2.6-3.9l-.7-.6a.993.993 0 0 1 1.3-1.5l.7.5a7.95 7.95 0 0 1 3.3 5.2 7.23 7.23 0 0 1-1.8 5.7 1.14 1.14 0 0 1-.8.3m-11.1-13.4c-2.9 0-3.5-4.3-3.5-4.8a1.09 1.09 0 0 1 .4-.9c2-1.5 5-1.2 6.3.1a1.14 1.14 0 0 1 .3.8c-.1.5-.6 4.8-3.5 4.8m0-2c.8 0 1.2-1.5 1.4-2.4a3.4 3.4 0 0 0-2.8 0c.2 1 .7 2.4 1.4 2.4m3.9 9.2a2 2 0 1 1-2 2 2.006 2.006 0 0 1 2-2m-8 0a2 2 0 1 1-2 2 2.006 2.006 0 0 1 2-2"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: "none",
-  stroke: colored ? "#000" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: 2,
-  d: "M22.379 48.744v-9.541H11.822v14.976h5.549"
-}), /*#__PURE__*/React.createElement("path", {
-  fill: "none",
-  stroke: colored ? "#000" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  strokeWidth: 2,
-  d: "M17.371 54.179h5.008v-5.435"
-}));
-const ForwardRef = forwardRef(PassportControlIcon);
+    "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 ? "#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: "M16.274 61.9s-1.8-13.9 10.2-13.9c3.2 2.1 5.9 3.6 9 3.6h-.1c3.1 0 6.3-1.6 9.5-3.7 11.6 0 9.6 13.9 9.8 14"
+  }), /*#__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: "M44.844 47.285a18.274 18.274 0 01-8.87 3.514c13.1.4 13.1 7.1 13.8 11.1h5.1s1.97-14.614-10.03-14.614z"
+  }), /*#__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: "M50.074 19.5c1.2.3.4 2.5-.4 3.5l-2.2 2.7h-.1a8.625 8.625 0 00-1.9-2l-.6-.4a15.38 15.38 0 001.3-1.2h-21.1a9.832 9.832 0 001.5 1.2l-.8.5a8.292 8.292 0 00-1.8 1.8l-.1-.1-2-2.4c-.8-1-1.6-3.2-.4-3.5 5.7-1.5 6-7.9 14.3-7.9s8.6 6.3 14.3 7.8zm-14.2.4c2.1 0 2.5-3.9 2.5-3.9a4.31 4.31 0 00-5-.1c-.1 0 .3 4 2.5 4z"
+  }), /*#__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: "M35.874 19.9c-2.1 0-2.5-3.9-2.5-3.9a4.01 4.01 0 015 .1c0-.1-.4 3.8-2.5 3.8z"
+  }), /*#__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: "M42.674 13.8s.9 8.2-2.6 8.2l5.3.3 1.7 3s3.7-1.9 3.6-5.2c.1 0-7.2-4.2-8-6.3z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: colored ? "#3f3f3f" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 41%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 93%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 41%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 93%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 41%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    d: "M33.774 25.6a16.173 16.173 0 01-7.2-2.4c-.6-.4-1-.8-1.5-1.2h21.1a4.894 4.894 0 01-1.3 1.2 11.584 11.584 0 01-3.7 1.8 18.327 18.327 0 01-7.4.6z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M44.474 48.1l-3.7 8.8-2.6-2.7-2.5-2.6h.1c2.9-.1 5.6-1.5 8.7-3.5zm-8.9 3.5l-2.6 2.7-2.6 2.6-3.6-8.9c3.1 2.1 5.8 3.5 8.8 3.6z",
+    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))))"))
+  }), /*#__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: "M47.03 48.169L41.547 62h5.477l5.169-11.645s-2.768-2.698-5.163-2.186"
+  }), /*#__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: "M11.822 39.203h10.557v14.976H11.822z"
+  }), /*#__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: "M46.874 33.3l.1-.1c-.7 7-5.5 12.5-11.3 12.5-5.9 0-10.6-5.5-11.3-12.6a12.562 12.562 0 019.3-7.4 18.327 18.327 0 007.4-.6c3.1.3 5.8 8.2 5.8 8.2zm-5.1-3.2a2 2 0 10-2 2 2.006 2.006 0 002-2zm-8 0a2 2 0 10-2 2 2.006 2.006 0 002-2z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M46.974 33.2l-.1.1s-2.7-8-5.8-8.2a10.643 10.643 0 003.7-1.8l.7.5a8.625 8.625 0 011.9 2c1.2 1.7 2 4.3-.4 7.4zm-22.5-.2a.774.774 0 00-.1.3c-2.6-3.3-1.6-6-.3-7.7a8.641 8.641 0 011.8-1.8l.8-.6a16.173 16.173 0 007.2 2.4 12.573 12.573 0 00-9.4 7.4z",
+    fill: colored ? "#f4aa41" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 64%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 70%, var(--bgColor-default, var(--color-canvas-default, Canvas))))"))
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: colored ? "#000" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M46.99 48.521l-5.216 12.45m9.837-10.29l-4.549 10.316"
+  }), /*#__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: "M22.378 48.744a11.998 11.998 0 014.396-.745c3.2 2.1 5.9 3.5 8.9 3.6h.1c3 0 5.6-1.4 8.7-3.5.1 0 .1-.1.2-.1 12 0 10 13 10 13m-37.9.001a16.229 16.229 0 01.603-6.819"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M26.774 47.999l3.7 8.9 2.6-2.7 2.5-2.6m2.6 2.6l-2.6-2.6m8.9-3.6v.1l-3.7 8.8-2.6-2.7"
+  })), /*#__PURE__*/React.createElement("path", {
+    d: "M26.774 60.4h-5.8a1 1 0 110-2h5.8a.945.945 0 011 1 1.002 1.002 0 01-1 1zm9-20.3a6.921 6.921 0 01-3.4-.9.962.962 0 01.9-1.7 5.154 5.154 0 005.1 0 .962.962 0 11.9 1.7 7.594 7.594 0 01-3.5.9zm6-10a2 2 0 11-2-2 2.006 2.006 0 012 2zm-8 0a2 2 0 11-2-2 2.006 2.006 0 012 2z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M35.774 46.7c-6.4 0-11.7-5.9-12.3-13.8l2-.2c.5 6.7 5 11.9 10.3 11.9s9.7-5 10.3-11.7c0-.5.1-1 .1-1.5h2a9.702 9.702 0 01-.1 1.7c-.7 7.8-6 13.6-12.3 13.6z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M24.374 34.3a.91.91 0 01-.8-.4 7.231 7.231 0 01-1.8-5.7 8.31 8.31 0 013.4-5.2l.7-.5a1 1 0 011.2 1.6l-.8.6a6.163 6.163 0 00-2.6 3.9 4.367 4.367 0 00.5 2.7 13.119 13.119 0 019.5-6.6.903.903 0 011.1.9.945.945 0 01-.9 1.1 10.854 10.854 0 00-8.7 7 .871.871 0 01-.8.6z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M36.074 26.8c-4.7 0-9.2-1.5-11.7-4a.913.913 0 01-.2-1.1.961.961 0 01.9-.6h21.1a.961.961 0 01.9.6 1.073 1.073 0 01-.1 1.1c-2 2.4-5.7 3.9-10 4zm-7.8-3.7a17.89 17.89 0 008.6 1.7 13.836 13.836 0 006.5-1.7z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M47.474 26.8a1.421 1.421 0 01-.6-.2.972.972 0 01-.1-1.4l2.2-2.7a4.061 4.061 0 00.8-1.9c-2.6-.7-4.1-2.3-5.6-3.8-2-2-3.9-4-8.3-4-4.5 0-6.3 1.9-8.3 4-1.5 1.5-3 3.1-5.6 3.8a3.701 3.701 0 00.8 1.9l2 2.4a.993.993 0 01-1.5 1.3l-2-2.4c-.7-.8-1.6-2.6-1.2-3.9a1.764 1.764 0 011.3-1.2 10.908 10.908 0 004.8-3.3c2.1-2.1 4.4-4.6 9.7-4.6s7.7 2.4 9.7 4.6c1.4 1.4 2.7 2.8 4.8 3.3a1.952 1.952 0 011.3 1.2c.4 1.3-.5 3.1-1.2 3.9l-2.2 2.7a1.91 1.91 0 01-.8.3z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M46.974 34.3h-.2a.969.969 0 01-.8-.7c-1-3-3.3-7.4-4.9-7.5a.903.903 0 01-.9-1.1.955.955 0 011.1-.9c2.7.2 4.8 4.3 5.9 7a4.418 4.418 0 00.4-2.5 6.163 6.163 0 00-2.6-3.9l-.7-.6a.993.993 0 011.3-1.5l.7.5a7.947 7.947 0 013.3 5.2 7.231 7.231 0 01-1.8 5.7 1.135 1.135 0 01-.8.3zm-11.1-13.4c-2.9 0-3.5-4.3-3.5-4.8a1.086 1.086 0 01.4-.9c2-1.5 5-1.2 6.3.1a1.135 1.135 0 01.3.8c-.1.5-.6 4.8-3.5 4.8zm0-2c.8 0 1.2-1.5 1.4-2.4a3.397 3.397 0 00-2.8 0c.2 1 .7 2.4 1.4 2.4zm3.9 9.2a2 2 0 11-2 2 2.006 2.006 0 012-2zm-8 0a2 2 0 11-2 2 2.006 2.006 0 012-2z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: colored ? "#000" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M22.379 48.744v-9.541H11.822v14.976h5.549"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    stroke: colored ? "#000" : (props.color != null ? "color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, black)" : (themed ? "light-dark(color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, var(--datalayer-icon-fg, currentColor)) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))" : "light-dark(color-mix(in srgb, var(--datalayer-icon-color, currentColor) 96%, var(--bgColor-default, var(--color-canvas-default, Canvas))), color-mix(in srgb, var(--datalayer-icon-color, currentColor) 38%, var(--bgColor-default, var(--color-canvas-default, Canvas))))")),
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M17.371 54.179h5.008v-5.435"
+  }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(PassportControlIcon);
 export default ForwardRef;

package/data2/esm/PenIcon.js

@@ -6,44 +6,102 @@ const sizeMap = {
   "large": 64
 };
 
-import { forwardRef } from "react";
-const PenIcon = ({
+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 PenIcon({
   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 ? "#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: "m18.637 51.107 5.036 5.036-5.36 2.042-1.698-1.8z"
-}), /*#__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))))")),
-  stroke: 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))))")),
-  strokeMiterlimit: 10,
-  strokeWidth: 2,
-  d: "M18.033 59.07c7.31-1.718 14.455-7.194 18.033-10.1 5.284-4.29 15.682-15.02 22.025-21.693 2.98-3.137 3.175-7.81.442-10.544l-.488-.487c-2.733-2.733-7.406-2.54-10.543.442-6.674 6.343-17.402 16.74-21.693 22.024-2.763 3.403-7.85 10.03-9.82 16.958-.189.662.02 1.375.506 1.862l1.538 1.538"
-}), /*#__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"
-}, /*#__PURE__*/React.createElement("path", {
-  strokeWidth: 2,
-  d: "m16.887 57.924-2.422 2.423m33.45-43.194 9.651 9.65M44.751 14.022c-1.156-1.156-3.143-1.044-4.438.25L27.81 26.777M18.033 59.07c7.31-1.718 14.455-7.194 18.033-10.1 5.284-4.29 15.682-15.02 22.025-21.693 2.98-3.137 3.175-7.81.442-10.544h0l-.488-.487h0c-2.733-2.733-7.406-2.54-10.543.442-6.674 6.343-17.402 16.74-21.693 22.024-2.906 3.578-8.382 10.723-10.1 18.034z"
-}), /*#__PURE__*/React.createElement("path", {
-  strokeWidth: 1.961,
-  d: "m24.474 55.747-5.686-5.686"
-})));
-const ForwardRef = forwardRef(PenIcon);
+    "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 ? "#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: "M18.637 51.107l5.036 5.036-5.36 2.042-1.698-1.8 2.022-5.278z"
+  }), /*#__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))))")),
+    stroke: 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))))")),
+    strokeMiterlimit: 10,
+    strokeWidth: 2,
+    d: "M18.033 59.07c7.31-1.718 14.455-7.194 18.033-10.1 5.284-4.29 15.682-15.02 22.025-21.693 2.98-3.137 3.175-7.81.442-10.544h0l-.488-.487h0c-2.733-2.733-7.406-2.54-10.543.442-6.674 6.343-17.402 16.74-21.693 22.024-2.763 3.403-7.85 10.03-9.82 16.958-.189.662.02 1.375.506 1.862l1.538 1.538"
+  }), /*#__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"
+  }, /*#__PURE__*/React.createElement("path", {
+    strokeWidth: 2,
+    d: "M16.887 57.924l-2.422 2.423m33.45-43.194l9.651 9.65M44.751 14.022h0c-1.156-1.156-3.143-1.044-4.438.25L27.81 26.777M18.033 59.07c7.31-1.718 14.455-7.194 18.033-10.1 5.284-4.29 15.682-15.02 22.025-21.693 2.98-3.137 3.175-7.81.442-10.544h0l-.488-.487h0c-2.733-2.733-7.406-2.54-10.543.442-6.674 6.343-17.402 16.74-21.693 22.024-2.906 3.578-8.382 10.723-10.1 18.034l2.324 2.324"
+  }), /*#__PURE__*/React.createElement("path", {
+    strokeWidth: 1.961,
+    d: "M24.474 55.747l-5.686-5.686"
+  })));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
+}
+const ForwardRef = React.forwardRef(PenIcon);
 export default ForwardRef;