@datalayer/icons-react 1.0.6 → 1.0.8

package/data2/esm/OpenstreetmapIcon.js

@@ -6,13 +6,47 @@ const sizeMap = {
   "large": 64
 };
 
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  React.useLayoutEffect(() => {
+    if (typeof mode === "string") {
+      setResolved(mode);
+      return;
+    }
+    if (typeof document === "undefined") return;
+    let cur = null;
+    let el = ref.current && ref.current.parentElement;
+    while (el) {
+      const m = el.getAttribute && el.getAttribute("data-color-mode");
+      if (m) { cur = m; break; }
+      el = el.parentElement;
+    }
+    if (!cur || cur === "auto") {
+      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setResolved(cur === "dark" ? "light" : "dark");
+  }, [mode]);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    "data-color-mode": resolved || "light",
+    "data-light-theme": "light",
+    "data-dark-theme": "dark",
+    style: { display: "inline-flex", lineHeight: 0 }
+  }, children);
+}
+
 function OpenstreetmapIcon({
   title,
   titleId,
   size,
+  colormoded,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 72 72",
     fill: "currentColor",
@@ -20,7 +54,11 @@ function OpenstreetmapIcon({
     ref: svgRef,
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
     fill: "none",
@@ -36,7 +74,7 @@ function OpenstreetmapIcon({
     d: "M25 13l-13-1v12l.997 11.04L12 47v12l13 1 11-1 12 1 12-1V47l-.997-11.96L60 24V12l-12 1-12-1-11 1z",
     clipRule: "evenodd"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M12 12l.077-.997A1 1 0 0011 12h1zm13 1l-.077.997c.056.004.112.004.168-.001L25 13zM12 24h-1a1 1 0 00.004.09L12 24zm.997 11.04l.996.083a.998.998 0 000-.173l-.996.09zM12 47l-.996-.083A1 1 0 0011 47h1zm0 12h-1a1 1 0 00.923.997L12 59zm13 1l-.077.997c.056.004.112.004.168-.001L25 60zm11-1l.083-.996a.995.995 0 00-.173 0L36 59zm12 1l-.083.996c.055.005.11.005.166 0L48 60zm12-1l.083.996A1 1 0 0061 59h-1zm0-12h1a1 1 0 00-.004-.083L60 47zm-.997-11.96l-.996-.09a.998.998 0 000 .173l.996-.083zM60 24l.996.09A1 1 0 0061 24h-1zm0-12h1a1 1 0 00-1.083-.996L60 12zm-12 1l-.083.996c.055.005.11.005.166 0L48 13zm-12-1l.083-.996a.995.995 0 00-.173 0L36 12zm-24.077.997l13 1 .154-1.994-13-1-.154 1.994zM13 24V12h-2v12h2zm.993 10.95l-.997-11.04-1.992.18.997 11.04 1.992-.18zm-.997 12.133l.997-11.96L12 34.957l-.996 11.96 1.992.166zM13 59V47h-2v12h2zm12.077.003l-13-1-.154 1.994 13 1 .154-1.994zm10.832-.999l-11 1 .181 1.992 11-1-.18-1.992zm12.174 1l-12-1-.166 1.992 12 1 .166-1.992zm11.834-1l-12 1 .166 1.992 12-1-.166-1.992zM59 47v12h2V47h-2zm-.993-11.877l.997 11.96 1.992-.166L60 34.957l-1.993.166zm.997-11.213l-.997 11.04 1.992.18.997-11.04-1.992-.18zM59 12v12h2V12h-2zm-10.917 1.996l12-1-.166-1.992-12 1 .166 1.992zm-12.166-1l12 1 .166-1.992-12-1-.166 1.992zm-10.827 1l11-1-.18-1.992-11 1 .18 1.992z"
+    d: "M12 12l.077-.997A1 1 0 0011 12h1zm13 1l-.077.997c.056.004.112.004.168-.001L25 13zM12 24h-1a1 1 0 00.004.09L12 24zm.997 11.04l.996.083a.998.998 0 000-.173l-.996.09zM12 47l-.996-.083A1 1 0 0011 47h1zm0 12h-1a1 1 0 00.923.997L12 59zm13 1l-.077.997c.056.004.112.004.168-.001L25 60zm11-1l.083-.996a.995.995 0 00-.173 0L36 59zm12 1l-.083.996a.92.92 0 00.166 0L48 60zm12-1l.083.996A1 1 0 0061 59h-1zm0-12h1a1 1 0 00-.004-.083L60 47zm-.997-11.96l-.996-.09a.998.998 0 000 .173l.996-.083zM60 24l.996.09A1 1 0 0061 24h-1zm0-12h1a1 1 0 00-1.083-.996L60 12zm-12 1l-.083.996a.92.92 0 00.166 0L48 13zm-12-1l.083-.996a.995.995 0 00-.173 0L36 12zm-24.077.997l13 1 .154-1.994-13-1-.154 1.994zM13 24V12h-2v12h2zm.993 10.95l-.997-11.04-1.992.18.997 11.04 1.992-.18zm-.997 12.133l.997-11.96L12 34.957l-.996 11.96 1.992.166zM13 59V47h-2v12h2zm12.077.003l-13-1-.154 1.994 13 1 .154-1.994zm10.832-.999l-11 1 .181 1.992 11-1-.18-1.992zm12.174 1l-12-1-.166 1.992 12 1 .166-1.992zm11.834-1l-12 1 .166 1.992 12-1-.166-1.992zM59 47v12h2V47h-2zm-.993-11.877l.997 11.96 1.992-.166L60 34.957l-1.993.166zm.997-11.213l-.997 11.04 1.992.18.997-11.04-1.992-.18zM59 12v12h2V12h-2zm-10.917 1.996l12-1-.166-1.992-12 1 .166 1.992zm-12.166-1l12 1 .166-1.992-12-1-.166 1.992zm-10.827 1l11-1-.18-1.992-11 1 .18 1.992z"
   })), /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "#EA5A47",
@@ -46,7 +84,7 @@ function OpenstreetmapIcon({
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#5C9E31",
     fillRule: "evenodd",
-    d: "M16 49a3 3 0 10-3-3v8a5.029 5.029 0 00-1 1v4h8.9a5 5 0 00-4.9-6 2 2 0 110-4zM57.25 53.9a2.55 2.55 0 102.55 2.55v-6.8c.322-.241.608-.528.85-.85v-5.1a4.25 4.25 0 10-3.4 6.8 1.7 1.7 0 110 3.4z",
+    d: "M16 49a3 3 0 10-3-3v8a5.029 5.029 0 00-1 1v4h8.9a5 5 0 00-4.9-6 2 2 0 110-4zm41.25 4.9a2.55 2.55 0 102.55 2.55v-6.8c.322-.241.608-.528.85-.85v-5.1a4.25 4.25 0 10-3.4 6.8 1.7 1.7 0 110 3.4z",
     clipRule: "evenodd"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#92D3F5",
@@ -60,7 +98,7 @@ function OpenstreetmapIcon({
     clipRule: "evenodd"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#B1CC33",
-    d: "M56.707 33.425c3.317-5.199 1.791-12.102-3.407-15.419S41.2 16.214 37.882 21.413c-3.318 5.198-1.792 12.101 3.406 15.418 5.199 3.317 12.102 1.792 15.419-3.406z"
+    d: "M56.707 33.425c3.317-5.199 1.791-12.102-3.407-15.419s-12.1-1.792-15.418 3.407c-3.318 5.198-1.792 12.101 3.406 15.418 5.199 3.317 12.102 1.792 15.419-3.406z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#92D3F5",
     fillRule: "evenodd",
@@ -76,7 +114,7 @@ function OpenstreetmapIcon({
     clipRule: "evenodd"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#D0CFCE",
-    d: "M55.101 15.185a14.432 14.432 0 00-10.937-1.937 14.424 14.424 0 00-9.104 6.365c-4.304 6.746-2.318 15.737 4.428 20.041 6.745 4.305 15.735 2.32 20.041-4.427a14.417 14.417 0 001.937-10.937 14.42 14.42 0 00-6.365-9.105zm1.836 18.388c-2.178 3.415-5.881 5.281-9.66 5.281a11.36 11.36 0 01-6.135-1.792c-5.317-3.393-6.882-10.48-3.49-15.795a11.361 11.361 0 017.175-5.016 11.363 11.363 0 018.621 1.527 11.36 11.36 0 015.016 7.174c.66 2.983.117 6.045-1.527 8.621z"
+    d: "M55.101 15.185a14.432 14.432 0 00-10.937-1.937 14.424 14.424 0 00-9.104 6.365c-4.304 6.746-2.318 15.737 4.428 20.041 6.745 4.305 15.735 2.32 20.041-4.427a14.417 14.417 0 001.937-10.937 14.42 14.42 0 00-6.365-9.105zm1.836 18.388c-2.178 3.415-5.881 5.281-9.66 5.281a11.36 11.36 0 01-6.135-1.792c-5.317-3.393-6.882-10.48-3.49-15.795a11.361 11.361 0 017.175-5.016 11.363 11.363 0 018.621 1.527 11.36 11.36 0 015.016 7.174 11.36 11.36 0 01-1.527 8.621z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#3F3F3F",
     d: "M34.767 41.21l-6.918 10.334-3.711 5.816c-.478.75.38 3.21 1.13 3.688.36.23 2.532.011 2.532.011l11.524-17.192-4.557-2.658z"
@@ -85,7 +123,7 @@ function OpenstreetmapIcon({
     stroke: "#fff",
     strokeLinecap: "round",
     strokeWidth: 2,
-    d: "M42.5 21H52M40 24h13M39 27h13"
+    d: "M42.5 21H52m-12 3h13m-14 3h13"
   }), /*#__PURE__*/React.createElement("g", {
     fill: "none",
     stroke: "#000",
@@ -97,10 +135,14 @@ function OpenstreetmapIcon({
     d: "M59.537 35.067c4.307-6.568 2.327-15.289-4.423-19.48-6.75-4.19-15.712-2.263-20.02 4.304-4.306 6.568-2.325 15.289 4.424 19.48 6.75 4.19 15.712 2.263 20.02-4.304z"
   }), /*#__PURE__*/React.createElement("path", {
     strokeMiterlimit: 10,
-    d: "M56.639 33.267c3.285-5.01 1.774-11.663-3.374-14.86-5.15-3.196-11.986-1.726-15.272 3.284-3.285 5.01-1.774 11.662 3.374 14.859 5.15 3.197 11.986 1.727 15.272-3.283zM34.777 41.444l4.364 2.709-10.396 15.853c-.743 1.133-2.322 1.444-3.526.696-1.205-.748-1.58-2.272-.838-3.405l10.396-15.853z"
+    d: "M56.639 33.267c3.285-5.01 1.774-11.663-3.374-14.86-5.15-3.196-11.986-1.726-15.272 3.284-3.285 5.01-1.774 11.662 3.374 14.859 5.15 3.197 11.986 1.727 15.272-3.283zm-21.862 8.177l4.364 2.709-10.396 15.853c-.743 1.133-2.322 1.444-3.526.696-1.205-.748-1.58-2.272-.838-3.405l10.396-15.853z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M40 12.333L36 12l-11 1-13-1v12l.997 11.04L12 47v12l9 .692m33.266-47.214L60 12v4.5m-.625 23L60 47v12l-12 1-12-1-3.5.318"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(OpenstreetmapIcon);
 export default ForwardRef;

package/data2/esm/PackageIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const PackageIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean } & React.RefAttributes<SVGSVGElement>>;
+declare const PackageIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormoded?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default PackageIcon;

package/data2/esm/PackageIcon.js

@@ -6,13 +6,47 @@ const sizeMap = {
   "large": 64
 };
 
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  React.useLayoutEffect(() => {
+    if (typeof mode === "string") {
+      setResolved(mode);
+      return;
+    }
+    if (typeof document === "undefined") return;
+    let cur = null;
+    let el = ref.current && ref.current.parentElement;
+    while (el) {
+      const m = el.getAttribute && el.getAttribute("data-color-mode");
+      if (m) { cur = m; break; }
+      el = el.parentElement;
+    }
+    if (!cur || cur === "auto") {
+      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setResolved(cur === "dark" ? "light" : "dark");
+  }, [mode]);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    "data-color-mode": resolved || "light",
+    "data-light-theme": "light",
+    "data-dark-theme": "dark",
+    style: { display: "inline-flex", lineHeight: 0 }
+  }, children);
+}
+
 function PackageIcon({
   title,
   titleId,
   size,
+  colormoded,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 72 72",
     fill: "currentColor",
@@ -20,7 +54,11 @@ function PackageIcon({
     ref: svgRef,
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
     fill: "#f4aa41",
@@ -30,7 +68,7 @@ function PackageIcon({
     d: "M35.572 65l25.69-14.168.176-29.515-26.236 14.716.37 28.967z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#d0cfce",
-    d: "M44.441 37.978a2.471 2.471 0 01-1.249-2.163v-4.172l-25.07-14.529a1 1 0 010-1.73l8.26-4.792a1.003 1.003 0 011.002-.001l25.638 14.801a1 1 0 01.5.867v6.024a3.29 3.29 0 01-1.64 2.84l-4.945 2.855a2.474 2.474 0 01-2.496 0zM45.338 60.341a1 1 0 01-.5-.866v-3.336a2.978 2.978 0 011.485-2.572l6.073-3.507a1.847 1.847 0 012.77 1.6v3.007a1 1 0 01-.5.866l-8.328 4.809a1.001 1.001 0 01-1 0z"
+    d: "M44.441 37.978a2.471 2.471 0 01-1.249-2.163v-4.172l-25.07-14.529a1 1 0 010-1.73l8.26-4.792a1.003 1.003 0 011.002-.001l25.638 14.801a1 1 0 01.5.867v6.024a3.29 3.29 0 01-1.64 2.84l-4.945 2.855a2.474 2.474 0 01-2.496 0zm.897 22.363a1 1 0 01-.5-.866v-3.336a2.978 2.978 0 011.485-2.572l6.073-3.507a1.847 1.847 0 012.77 1.6v3.007a1 1 0 01-.5.866l-8.328 4.809a1.001 1.001 0 01-1 0z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#3f3f3f",
     d: "M44.427 45.946v.869a1.497 1.497 0 002.245 1.296l6.805-3.76a2.28 2.28 0 001.14-1.975v-1.118a1.444 1.444 0 00-2.166-1.25l-6.745 3.724a2.557 2.557 0 00-1.279 2.214z"
@@ -44,10 +82,14 @@ function PackageIcon({
     strokeLinejoin: "round",
     strokeWidth: 2
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M61.262 21.168L35.572 6.336 9.882 21.168v29.664l25.69 14.832 25.69-14.832V21.168zM35.572 36.033v29.631M35.63 36.033L9.94 21.201M52.517 26.25l8.745-5.049M35.572 36.033l8.616-4.974"
+    d: "M61.262 21.168L35.572 6.336 9.882 21.168v29.664l25.69 14.832 25.69-14.832V21.168zm-25.69 14.865v29.631m.058-29.631L9.94 21.201m42.577 5.049l8.745-5.049m-25.69 14.832l8.616-4.974"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M26.884 11.457l25.638 14.801v6.025a2.28 2.28 0 01-1.14 1.975l-4.944 2.854a1.497 1.497 0 01-2.245-1.296v-4.749L18.623 16.25M31.083 38.917l-8.298-4.653v7.442l8.298 4.653v-7.442zM54.167 54.666V51.66a.847.847 0 00-1.271-.734l-6.073 3.506a1.97 1.97 0 00-.985 1.707v3.336M44.427 45.946v.869a1.497 1.497 0 002.245 1.296l6.805-3.76a2.28 2.28 0 001.14-1.975v-1.118a1.444 1.444 0 00-2.166-1.25l-6.745 3.724a2.557 2.557 0 00-1.279 2.214z"
+    d: "M26.884 11.457l25.638 14.801v6.025a2.28 2.28 0 01-1.14 1.975l-4.944 2.854a1.497 1.497 0 01-2.245-1.296v-4.749L18.623 16.25m12.46 22.667l-8.298-4.653v7.442l8.298 4.653v-7.442zm23.084 15.749V51.66a.847.847 0 00-1.271-.734l-6.073 3.506a1.97 1.97 0 00-.985 1.707v3.336m-1.411-13.529v.869a1.497 1.497 0 002.245 1.296l6.805-3.76a2.28 2.28 0 001.14-1.975v-1.118a1.444 1.444 0 00-2.166-1.25l-6.745 3.724a2.557 2.557 0 00-1.279 2.214z"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(PackageIcon);
 export default ForwardRef;

package/data2/esm/PartyPopperIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const PartyPopperIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean } & React.RefAttributes<SVGSVGElement>>;
+declare const PartyPopperIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormoded?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default PartyPopperIcon;

package/data2/esm/PartyPopperIcon.js

@@ -6,13 +6,47 @@ const sizeMap = {
   "large": 64
 };
 
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  React.useLayoutEffect(() => {
+    if (typeof mode === "string") {
+      setResolved(mode);
+      return;
+    }
+    if (typeof document === "undefined") return;
+    let cur = null;
+    let el = ref.current && ref.current.parentElement;
+    while (el) {
+      const m = el.getAttribute && el.getAttribute("data-color-mode");
+      if (m) { cur = m; break; }
+      el = el.parentElement;
+    }
+    if (!cur || cur === "auto") {
+      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setResolved(cur === "dark" ? "light" : "dark");
+  }, [mode]);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    "data-color-mode": resolved || "light",
+    "data-light-theme": "light",
+    "data-dark-theme": "dark",
+    style: { display: "inline-flex", lineHeight: 0 }
+  }, children);
+}
+
 function PartyPopperIcon({
   title,
   titleId,
   size,
+  colormoded,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 72 72",
     fill: "currentColor",
@@ -20,7 +54,11 @@ function PartyPopperIcon({
     ref: svgRef,
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
     fill: "#F1B31C",
@@ -66,12 +104,16 @@ function PartyPopperIcon({
     strokeMiterlimit: 10,
     strokeWidth: 2
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M50.663 45.64l.168.168-21.87 9.3L7.09 64.41l9.3-21.87 9.301-21.87M25.801 20.778l12.46 12.46L50.664 45.64M25.692 20.669l.109.109M46.49 7.367c.235.449.403.943.49 1.473.451 2.747-1.447 5.414-4.239 5.957"
+    d: "M50.663 45.64l.168.168-21.87 9.3L7.09 64.41l9.3-21.87 9.301-21.87m.11.108l12.46 12.46L50.664 45.64M25.692 20.669l.109.109M46.49 7.367c.235.449.403.943.49 1.473.451 2.747-1.447 5.414-4.239 5.957"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M42.933 14.776a4.875 4.875 0 00-1.51.364c-2.569 1.072-3.827 4.093-2.81 6.75M61.793 26.717a4.875 4.875 0 01-.543 1.454c-1.372 2.423-4.523 3.31-7.037 1.98"
+    d: "M42.933 14.776a4.875 4.875 0 00-1.51.364c-2.569 1.072-3.827 4.093-2.81 6.75m23.18 4.827a4.875 4.875 0 01-.543 1.454c-1.372 2.423-4.523 3.31-7.037 1.98"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M54.374 30.256a4.876 4.876 0 00-1.403-.663c-2.673-.778-5.549.787-6.422 3.493"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(PartyPopperIcon);
 export default ForwardRef;

package/data2/esm/PassportControlIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const PassportControlIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean } & React.RefAttributes<SVGSVGElement>>;
+declare const PassportControlIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormoded?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default PassportControlIcon;

package/data2/esm/PassportControlIcon.js

@@ -6,13 +6,47 @@ const sizeMap = {
   "large": 64
 };
 
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  React.useLayoutEffect(() => {
+    if (typeof mode === "string") {
+      setResolved(mode);
+      return;
+    }
+    if (typeof document === "undefined") return;
+    let cur = null;
+    let el = ref.current && ref.current.parentElement;
+    while (el) {
+      const m = el.getAttribute && el.getAttribute("data-color-mode");
+      if (m) { cur = m; break; }
+      el = el.parentElement;
+    }
+    if (!cur || cur === "auto") {
+      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setResolved(cur === "dark" ? "light" : "dark");
+  }, [mode]);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    "data-color-mode": resolved || "light",
+    "data-light-theme": "light",
+    "data-dark-theme": "dark",
+    style: { display: "inline-flex", lineHeight: 0 }
+  }, children);
+}
+
 function PassportControlIcon({
   title,
   titleId,
   size,
+  colormoded,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 72 72",
     fill: "currentColor",
@@ -20,7 +54,11 @@ function PassportControlIcon({
     ref: svgRef,
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
     fill: "#92d3f5",
@@ -40,30 +78,28 @@ function PassportControlIcon({
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#3f3f3f",
     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("g", {
+  }), /*#__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: "#92d3f5"
-  }, /*#__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.5zM35.574 51.6l-2.6 2.7-2.6 2.6-3.6-8.9c3.1 2.1 5.8 3.5 8.8 3.6z"
-  })), /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     fill: "#fcea2b",
     d: "M47.03 48.169L41.547 62h5.477l5.169-11.645s-2.768-2.698-5.163-2.186"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#d0cfce",
     d: "M11.822 39.203h10.557v14.976H11.822z"
-  }), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     fill: "#fcea2b",
     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("g", {
+  }), /*#__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: "#f4aa41"
-  }, /*#__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.4zM24.474 33a.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"
-  })), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "#000",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    d: "M46.99 48.521l-5.216 12.45M51.611 50.681l-4.549 10.316"
+    d: "M46.99 48.521l-5.216 12.45m9.837-10.29l-4.549 10.316"
   }), /*#__PURE__*/React.createElement("g", {
     fill: "none",
     stroke: "#000",
@@ -71,11 +107,11 @@ function PassportControlIcon({
     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 13M16.774 61a16.229 16.229 0 01.603-6.819"
+    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.6M38.174 54.199l-2.6-2.6M44.474 47.999v.1l-3.7 8.8-2.6-2.7"
+    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 1zM35.774 40.1a6.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.9zM41.774 30.1a2 2 0 11-2-2 2.006 2.006 0 012 2zM33.774 30.1a2 2 0 11-2-2 2.006 2.006 0 012 2z"
+    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", {
@@ -85,7 +121,7 @@ function PassportControlIcon({
   }), /*#__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.3zM35.874 20.9c-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.4zM39.774 28.1a2 2 0 11-2 2 2.006 2.006 0 012-2zM31.774 28.1a2 2 0 11-2 2 2.006 2.006 0 012-2z"
+    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: "#000",
@@ -100,7 +136,11 @@ function PassportControlIcon({
     strokeLinejoin: "round",
     strokeWidth: 2,
     d: "M17.371 54.179h5.008v-5.435"
-  })));
+  }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(PassportControlIcon);
 export default ForwardRef;

package/data2/esm/PenIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const PenIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean } & React.RefAttributes<SVGSVGElement>>;
+declare const PenIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormoded?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default PenIcon;

package/data2/esm/PenIcon.js

@@ -6,13 +6,47 @@ const sizeMap = {
   "large": 64
 };
 
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  React.useLayoutEffect(() => {
+    if (typeof mode === "string") {
+      setResolved(mode);
+      return;
+    }
+    if (typeof document === "undefined") return;
+    let cur = null;
+    let el = ref.current && ref.current.parentElement;
+    while (el) {
+      const m = el.getAttribute && el.getAttribute("data-color-mode");
+      if (m) { cur = m; break; }
+      el = el.parentElement;
+    }
+    if (!cur || cur === "auto") {
+      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setResolved(cur === "dark" ? "light" : "dark");
+  }, [mode]);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    "data-color-mode": resolved || "light",
+    "data-light-theme": "light",
+    "data-dark-theme": "dark",
+    style: { display: "inline-flex", lineHeight: 0 }
+  }, children);
+}
+
 function PenIcon({
   title,
   titleId,
   size,
+  colormoded,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 72 72",
     fill: "currentColor",
@@ -20,7 +54,11 @@ function PenIcon({
     ref: svgRef,
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
     fill: "#9b9b9a",
@@ -38,11 +76,15 @@ function PenIcon({
     strokeLinejoin: "round"
   }, /*#__PURE__*/React.createElement("path", {
     strokeWidth: 2,
-    d: "M16.887 57.924l-2.422 2.423M47.915 17.153l9.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"
+    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 (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(PenIcon);
 export default ForwardRef;

package/data2/esm/PencilIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const PencilIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean } & React.RefAttributes<SVGSVGElement>>;
+declare const PencilIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormoded?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default PencilIcon;

package/data2/esm/PencilIcon.js

@@ -6,13 +6,47 @@ const sizeMap = {
   "large": 64
 };
 
+function _DlIconInverseColormode({
+  mode,
+  children
+}) {
+  const ref = React.useRef(null);
+  const [resolved, setResolved] = React.useState(typeof mode === "string" ? mode : null);
+  React.useLayoutEffect(() => {
+    if (typeof mode === "string") {
+      setResolved(mode);
+      return;
+    }
+    if (typeof document === "undefined") return;
+    let cur = null;
+    let el = ref.current && ref.current.parentElement;
+    while (el) {
+      const m = el.getAttribute && el.getAttribute("data-color-mode");
+      if (m) { cur = m; break; }
+      el = el.parentElement;
+    }
+    if (!cur || cur === "auto") {
+      cur = (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+    }
+    setResolved(cur === "dark" ? "light" : "dark");
+  }, [mode]);
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    "data-color-mode": resolved || "light",
+    "data-light-theme": "light",
+    "data-dark-theme": "dark",
+    style: { display: "inline-flex", lineHeight: 0 }
+  }, children);
+}
+
 function PencilIcon({
   title,
   titleId,
   size,
+  colormoded,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 72 72",
     fill: "currentColor",
@@ -20,7 +54,11 @@ function PencilIcon({
     ref: svgRef,
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
+  }, props, {
+    style: props && props.color != null ? Object.assign({}, props.style, {
+      "--datalayer-icon-fg": props.color
+    }) : props && props.style
+  }), title ? /*#__PURE__*/React.createElement("title", {
     id: titleId
   }, title) : null, /*#__PURE__*/React.createElement("path", {
     fill: "#3F3F3F",
@@ -45,10 +83,14 @@ function PencilIcon({
     strokeMiterlimit: 10,
     strokeWidth: 2
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M18.63 56.82l9.198-3.526L53.82 27.3l-9.9-9.9-25.993 25.994-3.538 9.208zM47.335 13.987l3.504-3.503 9.9 9.9-3.474 3.473M18.556 42.767l9.9 9.899"
+    d: "M18.63 56.82l9.198-3.526L53.82 27.3l-9.9-9.9-25.993 25.994-3.538 9.208zm28.705-42.833l3.504-3.503 9.9 9.9-3.474 3.473m-38.709 18.91l9.9 9.899"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M14.398 52.582l-2.49 6.733 6.748-2.506M36.91 25.007l9.512 9.513"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(PencilIcon);
 export default ForwardRef;

package/data2/esm/PenguinIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const PenguinIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean } & React.RefAttributes<SVGSVGElement>>;
+declare const PenguinIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean, themed?: boolean, colormoded?: boolean | "light" | "dark" } & React.RefAttributes<SVGSVGElement>>;
 export default PenguinIcon;