@datalayer/icons-react 1.0.7 → 1.0.8

package/data1/esm/BashIcon.js

@@ -6,28 +6,67 @@ 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 BashIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  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",
     overflow: "visible",
     viewBox: "0 0 300 300",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     "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("g", {
     transform: "translate(24.032 24.032) scale(5.24866)"
   }, /*#__PURE__*/React.createElement("linearGradient", {
-    id: "a",
+    id: "prefix__a",
     x1: 24,
     x2: 24,
     y1: 2.757,
@@ -43,10 +82,10 @@ function BashIcon({
     offset: 1,
     stopColor: "#d4ccbf"
   })), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#a)",
+    fill: "url(#prefix__a)",
     d: "M41.465 8.281H6.534a2.107 2.107 0 00-2.109 2.106v31.72h39.15v-31.72a2.108 2.108 0 00-2.11-2.106z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#fff' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#fff') ? 'white' : 'currentColor'),
+    fill: colored ? '#fff' : 'white',
     d: "M3.645 5.385V40.8h40.709V5.385H3.645z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M5.864 5.705a3.01 3.01 0 00-3.009 3.004v34.71H46.27V8.709a3.009 3.009 0 00-3.008-3.004z",
@@ -55,7 +94,7 @@ function BashIcon({
     d: "M5.489 5.518A3.01 3.01 0 002.48 8.522v34.71h43.415V8.522a3.009 3.009 0 00-3.008-3.004H5.489z",
     opacity: 0.2
   }), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "b",
+    id: "prefix__b",
     x1: 24,
     x2: 24,
     y1: -0.021,
@@ -71,10 +110,10 @@ function BashIcon({
     offset: 1,
     stopColor: "#585868"
   })), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#b)",
+    fill: "url(#prefix__b)",
     d: "M5.301 5.143a3.01 3.01 0 00-3.009 3.004v34.71h43.415V8.147a3.009 3.009 0 00-3.008-3.004z"
   }), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "c",
+    id: "prefix__c",
     x1: 24,
     x2: 24,
     y1: -0.022,
@@ -90,10 +129,10 @@ function BashIcon({
     offset: 1,
     stopColor: "#d0cabe"
   })), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#c)",
+    fill: "url(#prefix__c)",
     d: "M42.699 5.893H5.301a2.256 2.256 0 00-2.259 2.254v33.961h41.915V8.147a2.256 2.256 0 00-2.258-2.254z"
   }), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "d",
+    id: "prefix__d",
     x1: 24,
     x2: 24,
     y1: 0.154,
@@ -121,10 +160,10 @@ function BashIcon({
     offset: 0.949,
     stopColor: "#e8e3da"
   })), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#d)",
+    fill: "url(#prefix__d)",
     d: "M42.145 5.893H5.856A2.19 2.19 0 003.664 8.08v32.952h40.671V8.08a2.188 2.188 0 00-2.19-2.187z"
   }), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "e",
+    id: "prefix__e",
     x1: 24,
     x2: 24,
     y1: 5.807,
@@ -137,10 +176,10 @@ function BashIcon({
     offset: 1,
     stopColor: "#dfdfdf"
   })), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#e)",
+    fill: "url(#prefix__e)",
     d: "M42.699 6.067H5.301c-.851 0-1.542.593-1.542 1.321v.924c0-.729.692-1.321 1.542-1.321h37.398c.851 0 1.542.593 1.542 1.321v-.924c0-.728-.691-1.321-1.542-1.321z"
   }), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "f",
+    id: "prefix__f",
     x1: 28.181,
     x2: 2.744,
     y1: 27.127,
@@ -153,10 +192,10 @@ function BashIcon({
     offset: 1,
     stopColor: "#666"
   })), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#f)",
+    fill: "url(#prefix__f)",
     d: "M39.729 34.715a.73.73 0 01-.729.73H7.722a.73.73 0 01-.73-.73V10.131a.73.73 0 01.73-.73H39c.403 0 .729.326.729.73z"
   }), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "g",
+    id: "prefix__g",
     x1: 23.887,
     x2: 23.887,
     y1: 37.922,
@@ -175,12 +214,12 @@ function BashIcon({
     offset: 1,
     stopColor: "#dadada"
   })), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#g)",
+    fill: "url(#prefix__g)",
     d: "M42.686 37.083a.84.84 0 01-.838.839H5.928a.839.839 0 01-.839-.839V8.851c0-.463.375-.839.839-.839h35.92c.462 0 .838.375.838.839z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M42.157 36.627c0 .45-.364.815-.815.815H6.432a.815.815 0 01-.815-.815V9.188c0-.451.365-.815.815-.815h34.91c.451 0 .815.365.815.815z"
   }), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "h",
+    id: "prefix__h",
     x1: 6.352,
     x2: 41.422,
     y1: 22.907,
@@ -199,10 +238,10 @@ function BashIcon({
     offset: 1,
     stopColor: "#323232"
   })), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#h)",
+    fill: "url(#prefix__h)",
     d: "M6.432 9.107a.08.08 0 00-.08.08v27.439c0 .044.036.08.08.08h34.91a.08.08 0 00.08-.08V9.188a.079.079 0 00-.08-.08H6.432z"
   }), /*#__PURE__*/React.createElement("linearGradient", {
-    id: "i",
+    id: "prefix__i",
     x1: 23.887,
     x2: 23.887,
     y1: 25.687,
@@ -218,18 +257,22 @@ function BashIcon({
     offset: 1,
     stopColor: "#616161"
   })), /*#__PURE__*/React.createElement("path", {
-    fill: "url(#i)",
+    fill: "url(#prefix__i)",
     d: "M39.796 12.818c.545 0 1.087.01 1.626.025V9.188a.079.079 0 00-.08-.08H6.432a.08.08 0 00-.08.08v16.499c7.279-7.768 19.543-12.869 33.444-12.869z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#fff' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#fff') ? 'white' : 'currentColor'),
+    fill: colored ? '#fff' : 'white',
     d: "M12.021 32.488a5.021 5.021 0 01-2.422-.801l.735-1.777c.786.561 1.559.84 2.318.84 1.168 0 1.752-.402 1.752-1.208 0-.402-.149-.78-.448-1.135-.299-.354-.865-.74-1.7-1.158-.835-.418-1.403-.764-1.704-1.039a2.768 2.768 0 01-.693-.983 3.243 3.243 0 01-.242-1.274c0-.692.218-1.302.652-1.831.435-.528 1.019-.882 1.751-1.06v-1.387h1.747l-.008 1.309c.944.091 1.648.319 2.11.683l-.604 1.719c-.699-.508-1.435-.762-2.209-.762-.458 0-.814.124-1.066.371a1.258 1.258 0 00-.378.937c0 .643.71 1.31 2.131 2.002.748.366 1.288.704 1.619 1.012.331.308.583.666.756 1.076.173.409.26.866.26 1.37 0 .712-.231 1.334-.693 1.865-.462.532-1.104.897-1.925 1.096v1.759h-1.738v-1.624zm13.669-4.414l-6.095 2.949v-1.738l4.024-1.826-4.024-1.808v-1.737l6.095 2.93z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M23.609 38.412l-.538.051a.037.037 0 00-.033.036v2.217c0 .011.004.021.013.027.009.006.019.01.029.009l.533-.081a.036.036 0 00.031-.035v-.827l.65.95c.009.014.025.02.041.015l.561-.178a.037.037 0 00.023-.023l.002-.012a.033.033 0 00-.007-.021l-.717-.985.722-.929a.04.04 0 00.008-.022l-.002-.013a.034.034 0 00-.026-.022l-.573-.132a.036.036 0 00-.037.014l-.644.862.005-.864c0-.01-.004-.02-.012-.026a.033.033 0 00-.029-.011z",
     opacity: 0.2
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? 'none' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('none') ? 'white' : 'currentColor'),
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M0 48V0h48v48"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(BashIcon);
 export default ForwardRef;

package/data1/esm/BinderIcon.d.ts

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

package/data1/esm/BinderIcon.js

@@ -6,28 +6,67 @@ 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 BinderIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  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 40 40",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
-    "aria-hidden": "true",
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    "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("g", {
-    fill: colored ? 'none' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('none') ? 'white' : 'currentColor'),
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     strokeMiterlimit: 10,
     strokeWidth: 4.834,
-    transform: "matrix(.94164 0 0 .94164 -2.25 -11.28)"
+    transform: "translate(-2.25 -11.28) scale(.94164)"
   }, /*#__PURE__*/React.createElement("circle", {
     cx: 27.879,
     cy: 23.939,
@@ -50,6 +89,10 @@ function BinderIcon({
     stroke: "#f5a252",
     d: "M19.61 28.701c-2.63-4.566-1.061-10.401 3.507-13.032 4.567-2.63 10.401-1.059 13.031 3.508"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(BinderIcon);
 export default ForwardRef;

package/data1/esm/BinderNameIcon.d.ts

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

package/data1/esm/BinderNameIcon.js

@@ -6,32 +6,70 @@ 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 BinderNameIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  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 100 100",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
-    "aria-hidden": "true",
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    "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("g", {
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    d: "M18.959 99.783v-16.25h3.25v7.865c.844-1.04 2.036-1.387 3.271-1.387 2.708 0 4.745 2.361 4.745 5.005 0 2.643-2.036 4.983-4.744 4.983-1.235 0-2.622-.39-3.272-1.365v1.148h-3.25zm5.525-2.384c1.3 0 2.275-1.127 2.275-2.383s-.975-2.383-2.275-2.383c-1.3 0-2.275 1.127-2.275 2.383s.975 2.383 2.275 2.383zm9.534-12.349a1.91 1.91 0 011.907 1.906c0 1.04-.867 1.906-1.907 1.906a1.91 1.91 0 01-1.907-1.906c0-1.062.845-1.907 1.907-1.907zm-1.625 14.733v-9.555h3.25v9.555zm15.73 0h-3.25v-5.417c0-1.127-.433-1.733-1.452-1.733-1.018 0-1.82 1.083-1.82 2.383v4.767h-3.25v-9.555h3.25v1.17c.65-.824 1.668-1.387 2.925-1.387 2.557 0 3.597 1.755 3.597 4.355zm13.001 0h-3.25v-1.149c-.65.976-2.058 1.365-3.272 1.365-2.708 0-4.745-2.34-4.745-4.983s2.037-5.005 4.745-5.005c1.214 0 2.427.347 3.272 1.387v-7.865h3.25zm-5.525-7.15c-1.3 0-2.275 1.126-2.275 2.382 0 1.257.975 2.384 2.275 2.384 1.3 0 2.275-1.127 2.275-2.384 0-1.256-.976-2.383-2.275-2.383zm18.439 2.773h-7.41c0 1.105.78 2.274 2.058 2.274 1.149 0 1.864-.757 1.885-1.45h3.315c-.563 2.512-2.6 3.769-5.134 3.769-3.294 0-5.568-1.95-5.568-4.983 0-2.99 2.361-5.005 5.568-5.005 2.903 0 5.308 1.733 5.308 4.788 0 .195-.022.412-.022.607zm-3.099-1.538s-.151-1.777-2.122-1.777c-2.037 0-2.145 1.777-2.145 1.777zm8.429 1.148v4.767h-3.25v-9.555h3.25v1.17c.498-.715 1.322-1.387 2.513-1.387.282 0 .716.086.976.216v2.947h-.044c-.325-.39-.802-.542-1.3-.542-1.213 0-2.145 1.236-2.145 2.384z",
     fill: "#545454"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M18.959 99.783v-16.25h3.25v7.865c.844-1.04 2.036-1.387 3.271-1.387 2.708 0 4.745 2.361 4.745 5.005 0 2.643-2.036 4.983-4.744 4.983-1.235 0-2.622-.39-3.272-1.365v1.148h-3.25zm5.525-2.384c1.3 0 2.275-1.127 2.275-2.383s-.975-2.383-2.275-2.383c-1.3 0-2.275 1.127-2.275 2.383s.975 2.383 2.275 2.383zM34.018 85.05a1.91 1.91 0 011.907 1.906c0 1.04-.867 1.906-1.907 1.906a1.91 1.91 0 01-1.907-1.906c0-1.062.845-1.907 1.907-1.907zm-1.625 14.733v-9.555h3.25v9.555zM48.123 99.783h-3.25v-5.417c0-1.127-.433-1.733-1.452-1.733-1.018 0-1.82 1.083-1.82 2.383v4.767h-3.25v-9.555h3.25v1.17c.65-.824 1.668-1.387 2.925-1.387 2.557 0 3.597 1.755 3.597 4.355zM61.124 99.783h-3.25v-1.149c-.65.976-2.058 1.365-3.272 1.365-2.708 0-4.745-2.34-4.745-4.983s2.037-5.005 4.745-5.005c1.214 0 2.427.347 3.272 1.387v-7.865h3.25zm-5.525-7.15c-1.3 0-2.275 1.126-2.275 2.382 0 1.257.975 2.384 2.275 2.384 1.3 0 2.275-1.127 2.275-2.384 0-1.256-.976-2.383-2.275-2.383zM74.038 95.406h-7.41c0 1.105.78 2.274 2.058 2.274 1.149 0 1.864-.757 1.885-1.45h3.315c-.563 2.512-2.6 3.769-5.134 3.769-3.294 0-5.568-1.95-5.568-4.983 0-2.99 2.361-5.005 5.568-5.005 2.903 0 5.308 1.733 5.308 4.788 0 .195-.022.412-.022.607zm-3.099-1.538s-.151-1.777-2.122-1.777c-2.037 0-2.145 1.777-2.145 1.777zM79.368 95.016v4.767h-3.25v-9.555h3.25v1.17c.498-.715 1.322-1.387 2.513-1.387.282 0 .716.086.976.216v2.947h-.044c-.325-.39-.802-.542-1.3-.542-1.213 0-2.145 1.236-2.145 2.384z"
-  })), /*#__PURE__*/React.createElement("g", {
-    fill: colored ? 'none' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('none') ? 'white' : 'currentColor'),
+  }), /*#__PURE__*/React.createElement("g", {
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     strokeMiterlimit: 10,
     strokeWidth: 4.834,
-    transform: "matrix(1.92185 0 0 1.92185 6.292 -23.024)"
+    transform: "translate(6.292 -23.024) scale(1.92185)"
   }, /*#__PURE__*/React.createElement("circle", {
     cx: 27.879,
     cy: 23.939,
@@ -54,6 +92,10 @@ function BinderNameIcon({
     stroke: "#f5a252",
     d: "M19.61 28.701c-2.63-4.566-1.061-10.401 3.507-13.032 4.567-2.63 10.401-1.059 13.031 3.508"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(BinderNameIcon);
 export default ForwardRef;

package/data1/esm/BlueskyGreyIcon.d.ts

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

package/data1/esm/BlueskyGreyIcon.js

@@ -6,27 +6,70 @@ 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 BlueskyGreyIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  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 24 24",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
-    "aria-hidden": "true",
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    "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", {
-    fill: colored ? '#959DA5' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#959DA5') ? 'white' : 'currentColor'),
+    fill: colored ? '#959DA5' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 01-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(BlueskyGreyIcon);
 export default ForwardRef;

package/data1/esm/BlueskyIcon.d.ts

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

package/data1/esm/BlueskyIcon.js

@@ -6,27 +6,70 @@ 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 BlueskyIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  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 600 530",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
-    "aria-hidden": "true",
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    "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", {
-    fill: colored ? '#1185fe' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#1185fe') ? 'white' : 'currentColor'),
+    fill: colored ? '#1185fe' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M135.72 44.03C202.216 93.951 273.74 195.17 300 249.49c26.262-54.316 97.782-155.54 164.28-205.46C512.26 8.009 590-19.862 590 68.825c0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.38-3.69-10.832-3.708-7.896-.017-2.936-1.193.516-3.707 7.896-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.45-163.25-81.433C20.15 217.613 9.997 86.535 9.997 68.825c0-88.687 77.742-60.816 125.72-24.795z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(BlueskyIcon);
 export default ForwardRef;

package/data1/esm/BookIcon.d.ts

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

package/data1/esm/BookIcon.js

@@ -6,26 +6,69 @@ 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 BookIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  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 24 24",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
-    "aria-hidden": "true",
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    "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: "M0 3.75A.75.75 0 01.75 3h7.497c1.566 0 2.945.8 3.751 2.014A4.495 4.495 0 0115.75 3h7.5a.75.75 0 01.75.75v15.063a.752.752 0 01-.755.75l-7.682-.052a3 3 0 00-2.142.878l-.89.891a.75.75 0 01-1.061 0l-.902-.901a2.996 2.996 0 00-2.121-.879H.75a.75.75 0 01-.75-.75zm12.75 15.232a4.503 4.503 0 012.823-.971l6.927.047V4.5h-6.75a3 3 0 00-3 3zM11.247 7.497a3 3 0 00-3-2.997H1.5V18h6.947c1.018 0 2.006.346 2.803.98z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(BookIcon);
 export default ForwardRef;