@datalayer/icons-react 1.0.6 → 1.0.8

package/data2/esm/DocusaurusIcon.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 DocusaurusIcon({
   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",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     viewBox: "0 0 256 217.631",
@@ -21,7 +55,11 @@ function DocusaurusIcon({
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     ref: svgRef,
     "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("g", {
     fillRule: "evenodd",
@@ -45,29 +83,29 @@ function DocusaurusIcon({
     d: "M153 123h30v-20h-30z"
   }), /*#__PURE__*/React.createElement("use", {
     fill: "#44d860",
-    xlinkHref: "#A"
+    xlinkHref: "#prefix__A"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M63 55.5a2.5 2.5 0 01-2.5-2.5 7.51 7.51 0 00-7.5-7.5 7.51 7.51 0 00-7.5 7.5 2.5 2.5 0 11-5 0c0-6.893 5.607-12.5 12.5-12.5S65.5 46.107 65.5 53a2.5 2.5 0 01-2.5 2.5"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#ffff50",
     d: "M103 183h60c11.046 0 20-8.954 20-20V93h-60c-11.046 0-20 8.954-20 20v70z"
   }), /*#__PURE__*/React.createElement("use", {
-    xlinkHref: "#B"
+    xlinkHref: "#prefix__B"
   }), /*#__PURE__*/React.createElement("use", {
     y: 20,
-    xlinkHref: "#B"
+    xlinkHref: "#prefix__B"
   }), /*#__PURE__*/React.createElement("use", {
     y: 40,
-    xlinkHref: "#B"
+    xlinkHref: "#prefix__B"
   }), /*#__PURE__*/React.createElement("use", {
     y: -9.814,
-    xlinkHref: "#B"
+    xlinkHref: "#prefix__B"
   }), /*#__PURE__*/React.createElement("use", {
     y: 10,
-    xlinkHref: "#B"
+    xlinkHref: "#prefix__B"
   }), /*#__PURE__*/React.createElement("use", {
     y: 30,
-    xlinkHref: "#B"
+    xlinkHref: "#prefix__B"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M183 61.6c-.012 0-.022-.006-.034-.005-3.1.105-4.552 3.196-5.842 5.923-1.346 2.85-2.387 4.703-4.093 4.647-1.9-.068-2.97-2.202-4.113-4.46-1.314-2.593-2.814-5.535-5.963-5.425-3.046.104-4.513 2.794-5.807 5.167-1.377 2.528-2.314 4.065-4.12 3.994-1.927-.07-2.95-1.805-4.136-3.813-1.32-2.236-2.848-4.75-5.936-4.664-2.994.103-4.465 2.385-5.763 4.4-1.373 2.13-2.335 3.428-4.165 3.35-1.973-.07-2.992-1.5-4.17-3.177-1.324-1.873-2.816-3.993-5.895-3.9-2.928.1-4.4 1.97-5.696 3.618-1.232 1.564-2.194 2.802-4.23 2.724a1 1 0 10-.072 2c3.017.1 4.545-1.8 5.872-3.487 1.177-1.496 2.193-2.787 4.193-2.855 1.926-.082 2.83 1.115 4.195 3.045 1.297 1.834 2.77 3.914 5.73 4.02 3.103.104 4.596-2.215 5.918-4.267 1.182-1.834 2.202-3.417 4.15-3.484 1.793-.067 2.77 1.35 4.145 3.68 1.297 2.197 2.766 4.686 5.787 4.796 3.125.108 4.634-2.62 5.95-5.035 1.14-2.088 2.214-4.06 4.12-4.126 1.793-.042 2.728 1.595 4.1 4.33 1.292 2.553 2.757 5.445 5.825 5.556l.17.003c3.064 0 4.518-3.075 5.805-5.794 1.14-2.4 2.217-4.68 4.067-4.773v-2z"
   }), /*#__PURE__*/React.createElement("path", {
@@ -82,16 +120,20 @@ function DocusaurusIcon({
   }), /*#__PURE__*/React.createElement("use", {
     x: -60,
     fill: "#44d860",
-    xlinkHref: "#A"
+    xlinkHref: "#prefix__A"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M143 41.75a2.92 2.92 0 01-.5-.05 2.52 2.52 0 01-.47-.14c-.15-.06-.3-.14-.43-.23l-.38-.3c-.1-.12-.22-.24-.3-.38a2.63 2.63 0 01-.231-.43 2.62 2.62 0 01-.139-.47c-.03-.16-.05-.33-.05-.5s.02-.33.05-.5.08-.3.14-.47a2.63 2.63 0 01.231-.43l.3-.38c.12-.1.25-.22.38-.3a1.99 1.99 0 01.43-.23 2.52 2.52 0 01.47-.14c.32-.07.65-.07.98 0 .16.03.32.08.47.14s.3.14.43.23l.38.3a3.68 3.68 0 01.31.38 2.55 2.55 0 01.23.43c.06.16.1.3.14.47a2.81 2.81 0 01.05.49 2.55 2.55 0 01-.73 1.77c-.12.1-.25.22-.38.3a1.99 1.99 0 01-.43.23c-.15.06-.3.1-.47.14a2.07 2.07 0 01-.5.05M163 40.5a2.55 2.55 0 01-1.77-.73 3.68 3.68 0 01-.31-.38 2.63 2.63 0 01-.231-.43 2.62 2.62 0 01-.139-.47c-.03-.16-.05-.33-.05-.5a2.55 2.55 0 01.73-1.77c.12-.1.25-.22.38-.3a1.99 1.99 0 01.43-.23 2.52 2.52 0 01.47-.14c.32-.07.66-.07.98 0 .16.03.32.08.47.14s.3.14.43.23l.38.3a2.53 2.53 0 01.73 1.77 2.81 2.81 0 01-.05.49c-.03.16-.08.32-.14.47a3.55 3.55 0 01-.23.43 3.68 3.68 0 01-.31.38c-.12.1-.25.22-.38.3a1.99 1.99 0 01-.43.23c-.15.06-.3.1-.47.14a2.07 2.07 0 01-.5.05"
   })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", {
-    id: "A",
+    id: "prefix__A",
     d: "M193 115.5a2.5 2.5 0 100-5c-.1 0-.214.02-.32.032l-.058-.225a2.5 2.5 0 00-.963-4.807 2.47 2.47 0 00-1.508.518l-.168-.168a2.47 2.47 0 00.506-1.494 2.5 2.5 0 00-4.8-.979 9.965 9.965 0 00-2.7-.377c-5.522 0-10 4.478-10 10s4.478 10 10 10c.934 0 1.833-.138 2.7-.377a2.5 2.5 0 004.8-.979c0-.563-.192-1.077-.506-1.494.057-.055.113-.1.168-.168a2.48 2.48 0 001.508.518 2.5 2.5 0 00.963-4.807l.058-.225c.105.013.2.032.32.032"
   }), /*#__PURE__*/React.createElement("path", {
-    id: "B",
+    id: "prefix__B",
     d: "M168.02 124h-50.04a1 1 0 110-2h50.04a1 1 0 110 2"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(DocusaurusIcon);
 export default ForwardRef;

package/data2/esm/DollardBankNoteIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const DollardBankNoteIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean } & React.RefAttributes<SVGSVGElement>>;
+declare const DollardBankNoteIcon: 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 DollardBankNoteIcon;

package/data2/esm/DollardBankNoteIcon.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 DollardBankNoteIcon({
   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,14 +54,18 @@ function DollardBankNoteIcon({
     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: "#FFF",
     d: "M14.639 23.038h46.414v27.88H14.639z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#5C9E31",
-    d: "M22.285 48.715h31.11v2.938h-31.11zM19.777 22.336h31.11v2.938h-31.11z"
+    d: "M22.285 48.715h31.11v2.938h-31.11zm-2.508-26.379h31.11v2.938h-31.11z"
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#5C9E31",
     d: "M59.36 20.73v.61H56.3a1 1 0 00-.99-.92H23.4a1 1 0 00-.99.92h-8.89V22h-.58v30.62h9.46c0 .55.45 1 1 1h31.91c.55 0 1-.45 1-1h6V20.73h-2.95zm0 25.18c-.13-.01-.28-.01-.43-.01-2.15 0-3.95 1.68-4.05 3.81H20.33c-.09-2.13-1.88-3.81-4.05-3.81-.14 0-.27 0-.39.01V28c.12.01.25.01.39.01 2.16 0 3.94-1.65 4.05-3.76h34.55c.13 2.11 1.91 3.76 4.05 3.76.15 0 .3 0 .43-.01v17.91z"
@@ -54,16 +92,20 @@ function DollardBankNoteIcon({
     strokeWidth: 2
   }, /*#__PURE__*/React.createElement("path", {
     strokeLinejoin: "round",
-    d: "M50.028 24.25h4.852c.13 2.11 1.91 3.76 4.05 3.76.15 0 .3 0 .43-.01v17.91c-.13-.01-.28-.01-.43-.01-2.15 0-3.95 1.68-4.05 3.81h-4.853m-24.92 0H20.33c-.09-2.13-1.88-3.81-4.05-3.81-.14 0-.27 0-.39.01V28c.12.01.25.01.39.01 2.16 0 3.94-1.65 4.05-3.76h4.385M46.028 22.378v29.286c0 .105-.02.2-.05.297a1 1 0 01-.95.66h-15.34a1 1 0 01-.95-.66.975.975 0 01-.05-.297V22.378c0-.105.02-.201.05-.297a1 1 0 01.95-.66h15.34a1 1 0 01.95.66c.03.096.05.192.05.297z"
+    d: "M50.028 24.25h4.852c.13 2.11 1.91 3.76 4.05 3.76.15 0 .3 0 .43-.01v17.91c-.13-.01-.28-.01-.43-.01-2.15 0-3.95 1.68-4.05 3.81h-4.853m-24.92 0H20.33c-.09-2.13-1.88-3.81-4.05-3.81-.14 0-.27 0-.39.01V28c.12.01.25.01.39.01 2.16 0 3.94-1.65 4.05-3.76h4.385m21.313-1.872v29.286c0 .105-.02.2-.05.297a1 1 0 01-.95.66h-15.34a1 1 0 01-.95-.66.975.975 0 01-.05-.297V22.378c0-.105.02-.201.05-.297a1 1 0 01.95-.66h15.34a1 1 0 01.95.66c.03.096.05.192.05.297z"
   }), /*#__PURE__*/React.createElement("path", {
     strokeLinejoin: "round",
-    d: "M25.108 52.621H13.94a1 1 0 01-1-1v-29.2a1 1 0 011-1h10.838M49.772 21.42H61.31a1 1 0 011 1v29.201a1 1 0 01-1 1H49.772"
+    d: "M25.108 52.621H13.94a1 1 0 01-1-1v-29.2a1 1 0 011-1h10.838m24.994-.001H61.31a1 1 0 011 1v29.201a1 1 0 01-1 1H49.772"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M48.753 29.585c2.94 1.813 4.758 4.32 4.758 7.09 0 2.795-1.85 5.322-4.834 7.138M24.74 42.95c-2.234-1.717-3.571-3.899-3.571-6.274 0-2.57 1.565-4.915 4.139-6.687"
   }), /*#__PURE__*/React.createElement("path", {
     strokeLinejoin: "round",
-    d: "M39.663 34.22c-.219-.85-1.165-1.491-2.3-1.491h0c-1.295 0-2.346.836-2.346 1.868s1.05 1.869 2.347 1.869l-.048.007c1.296 0 2.347.836 2.347 1.868s-1.05 1.869-2.347 1.869h0c-1.134 0-2.08-.64-2.299-1.492M37.34 32.729v-1.781M37.34 41.991V40.21"
+    d: "M39.663 34.22c-.219-.85-1.165-1.491-2.3-1.491h0c-1.295 0-2.346.836-2.346 1.868s1.05 1.869 2.347 1.869l-.048.007c1.296 0 2.347.836 2.347 1.868s-1.05 1.869-2.347 1.869h0c-1.134 0-2.08-.64-2.299-1.492m2.323-5.989v-1.781m0 11.043V40.21"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(DollardBankNoteIcon);
 export default ForwardRef;

package/data2/esm/DollardHeavyIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const DollardHeavyIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean } & React.RefAttributes<SVGSVGElement>>;
+declare const DollardHeavyIcon: 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 DollardHeavyIcon;

package/data2/esm/DollardHeavyIcon.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 DollardHeavyIcon({
   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 DollardHeavyIcon({
     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",
@@ -32,6 +70,10 @@ function DollardHeavyIcon({
     strokeWidth: 2,
     d: "M35.5 33c-1.76 0-7.5-.397-7.5-5.5s5.74-5.5 7.5-5.5c8.5 0 8.5 3.996 8.5 5.5a3.5 3.5 0 007 0c0-6.68-4.23-11.05-11.5-12.192V12.5a4 4 0 00-8 0v2.904C25.088 16.719 21 21.244 21 27.5 21 34.977 26.827 40 35.5 40c2.94 0 8.5 1.15 8.5 5.5S38.44 51 35.5 51c-1.76 0-7.5-.397-7.5-5.5a3.5 3.5 0 00-7 0c0 6.255 4.088 10.78 10.5 12.096V59.5a4 4 0 008 0v-1.899C45.686 56.373 51 52.273 51 45.5 51 37.294 43.202 33 35.5 33z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(DollardHeavyIcon);
 export default ForwardRef;

package/data2/esm/DollardIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const DollardIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean } & React.RefAttributes<SVGSVGElement>>;
+declare const DollardIcon: 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 DollardIcon;

package/data2/esm/DollardIcon.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 DollardIcon({
   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 500 500",
     fill: "currentColor",
@@ -20,7 +54,11 @@ function DollardIcon({
     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",
@@ -32,6 +70,10 @@ function DollardIcon({
     strokeWidth: 31.915,
     d: "M257.984 0v500"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(DollardIcon);
 export default ForwardRef;

package/data2/esm/DragonFaceIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const DragonFaceIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean } & React.RefAttributes<SVGSVGElement>>;
+declare const DragonFaceIcon: 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 DragonFaceIcon;

package/data2/esm/DragonFaceIcon.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 DragonFaceIcon({
   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 DragonFaceIcon({
     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: "#5C9E31",
@@ -49,7 +87,7 @@ function DragonFaceIcon({
   }), /*#__PURE__*/React.createElement("path", {
     fill: "#FFF",
     d: "M31 46v4c-3-3-3-7-3-7s8 7 16 0c0 0 1 5-3 7v-4"
-  }), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "#000",
     strokeLinecap: "round",
@@ -88,8 +126,12 @@ function DragonFaceIcon({
     strokeLinejoin: "round",
     strokeMiterlimit: 10,
     strokeWidth: 2,
-    d: "M25 39s-1-3 5-2c0 0 6-5 12 0 0 0 5-1 5 2M29 40s-6-1-9 3-6 4-8 2M43 40s6-1 9 3 6 4 8 2M23.315 40.571S22 51 30 54M49.189 40.783S49 51 42 54M31 46v4c-3-3-3-7-3-7s8 7 16 0c0 0 1 5-3 7v-4"
-  })));
+    d: "M25 39s-1-3 5-2c0 0 6-5 12 0 0 0 5-1 5 2m-18 1s-6-1-9 3-6 4-8 2m31-5s6-1 9 3 6 4 8 2m-36.685-4.429S22 51 30 54m19.189-13.217S49 51 42 54m-11-8v4c-3-3-3-7-3-7s8 7 16 0c0 0 1 5-3 7v-4"
+  }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(DragonFaceIcon);
 export default ForwardRef;

package/data2/esm/DragonIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const DragonIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean } & React.RefAttributes<SVGSVGElement>>;
+declare const DragonIcon: 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 DragonIcon;

package/data2/esm/DragonIcon.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 DragonIcon({
   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 DragonIcon({
     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: "#B1CC33",
@@ -41,10 +79,14 @@ function DragonIcon({
     strokeMiterlimit: 10,
     strokeWidth: 2
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M52.663 45.684s-.856-4.926-4.326-7.368M52.694 38.309c-.28-.993-.997-3.9-4.889-5.45M48 30s-.273-1.093-5.77-2.29c-1.807-.393-3.478-1.345-4.63-2.792-.915-1.15-1.5-2.568-.6-3.918 0 0 1.167 2.167 3.083 2.083C42 23 44.917 23.417 46 24M46 24s3-2-1-4-3.75-1.417-3.75-1.417S42 17 44 17s6.583 1.5 6.583 1.5 1.584-3.333-1.5-3.917C46 14 43.833 10.5 42.917 8.75c-.917-1.75-3-.25-3-.25L36 5M24.167 26.167C14 23 10 29 10 29s6.167 0 7.583 2c0 0-7.916 4.833-7.25 5.917 0 0 9-4.25 10.834-3.084 0 0-2 3.334-1.584 4.75.417 1.417 4.75-6.416 14.084-1 0 0 8.333 11.75-.167 11.084l-3.75-1.417s.583 4.917 8.417 3.333c0 0 6-2.583 4.416-14.583 0 0 7.417 8-.583 15s-2.25 13.75-2.25 13.75S37.5 60.083 42 57s7.833-8 8-11"
+    d: "M52.663 45.684s-.856-4.926-4.326-7.368m4.357-.007c-.28-.993-.997-3.9-4.889-5.45M48 30s-.273-1.093-5.77-2.29c-1.807-.393-3.478-1.345-4.63-2.792-.915-1.15-1.5-2.568-.6-3.918 0 0 1.167 2.167 3.083 2.083C42 23 44.917 23.417 46 24m0 0s3-2-1-4-3.75-1.417-3.75-1.417S42 17 44 17s6.583 1.5 6.583 1.5 1.584-3.333-1.5-3.917C46 14 43.833 10.5 42.917 8.75c-.917-1.75-3-.25-3-.25L36 5M24.167 26.167C14 23 10 29 10 29s6.167 0 7.583 2c0 0-7.916 4.833-7.25 5.917 0 0 9-4.25 10.834-3.084 0 0-2 3.334-1.584 4.75.417 1.417 4.75-6.416 14.084-1 0 0 8.333 11.75-.167 11.084l-3.75-1.417s.583 4.917 8.417 3.333c0 0 6-2.583 4.416-14.583 0 0 7.417 8-.583 15s-2.25 13.75-2.25 13.75S37.5 60.083 42 57s7.833-8 8-11"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M31 14c.618-.493-3.28 2.808-2 8 1.263 5.124 8 12 8 12M34.47 8.55c-.457-.673-1.744-2.67-4.246-2.79M31.802 10.881c-.566-.432-2.19-1.735-4.133-1.213M50 21s4 2 3 4c0 0 3.333 0 4.167 2.5C58 30 63 28 63 28l-4.333-2.167s0-2.833-1.334-2.833C56 23 53 20 50 21z"
+    d: "M31 14c.618-.493-3.28 2.808-2 8 1.263 5.124 8 12 8 12M34.47 8.55c-.457-.673-1.744-2.67-4.246-2.79m1.578 5.121c-.566-.432-2.19-1.735-4.133-1.213M50 21s4 2 3 4c0 0 3.333 0 4.167 2.5C58 30 63 28 63 28l-4.333-2.167s0-2.833-1.334-2.833C56 23 53 20 50 21z"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(DragonIcon);
 export default ForwardRef;

package/data2/esm/EditorIcon.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const EditorIcon: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean } & React.RefAttributes<SVGSVGElement>>;
+declare const EditorIcon: 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 EditorIcon;

package/data2/esm/EditorIcon.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 EditorIcon({
   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",
     fill: "none",
     stroke: "currentColor",
@@ -20,16 +54,24 @@ function EditorIcon({
     strokeLinejoin: "round",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
     strokeWidth: 2,
-    className: "feather feather-edit-3",
+    className: "prefix__feather prefix__feather-edit-3",
     viewBox: "0 0 24 24",
     "aria-hidden": "true",
     ref: svgRef,
     "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", {
     d: "M12 20h9M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(EditorIcon);
 export default ForwardRef;

package/data2/esm/EditorIcon.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-edit-3" viewBox="0 0 24 24" aria-hidden="true">
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
   <path d="M12 20h9M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/>
 </svg>