@datalayer/icons-react 1.0.6 → 1.0.8

package/data1/NotebookOutlineIcon.js

@@ -6,27 +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 NotebookOutlineIcon({
   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 256 256",
-    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 ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
     d: "M184 112a8 8 0 01-8 8h-64a8 8 0 010-16h64a8 8 0 018 8zm-8 24h-64a8 8 0 000 16h64a8 8 0 000-16zm48-88v160a16 16 0 01-16 16H48a16 16 0 01-16-16V48a16 16 0 0116-16h160a16 16 0 0116 16zM48 208h24V48H48zm160 0V48H88v160h120z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(NotebookOutlineIcon);
 module.exports = ForwardRef;

package/data1/Null1Icon.d.ts

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

package/data1/Null1Icon.js

@@ -6,22 +6,61 @@ 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 Null1Icon({
   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 512 512",
-    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("circle", {
     cx: 256,
@@ -33,6 +72,10 @@ function Null1Icon({
   }), /*#__PURE__*/React.createElement("path", {
     d: "M37.29 422.38L422.377 37.295l52.325 52.326L89.616 474.706z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(Null1Icon);
 module.exports = ForwardRef;

package/data1/Null2Icon.d.ts

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

package/data1/Null2Icon.js

@@ -6,28 +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 Null2Icon({
   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",
     baseProfile: "full",
     viewBox: "0 0 76 76",
-    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("path", {
-    strokeLinejoin: "round",
     d: "M37.608 57c-2.945 0-5.379-.973-7.302-2.92L28.5 57H24l3.925-6.347c-1.461-2.997-2.192-6.967-2.192-11.91 0-6.494 1.09-11.407 3.271-14.742C31.184 20.668 34.334 19 38.45 19c3.025 0 5.469.926 7.332 2.778L47.5 19H52l-3.861 6.244c1.418 3.069 2.127 7.268 2.127 12.6 0 6.223-1.112 10.971-3.337 14.245C44.704 55.363 41.597 57 37.609 57zm.609-34.305C32.739 22.695 30 27.969 30 38.52c0 2.98.245 5.509.736 7.588l12.716-20.563c-1.27-1.9-3.015-2.85-5.235-2.85zm-.167 30.61c5.3 0 7.95-5.013 7.95-15.041 0-3.287-.26-6.053-.78-8.3L32.54 50.466c1.322 1.893 3.158 2.84 5.51 2.84z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(Null2Icon);
 module.exports = ForwardRef;

package/data1/Null3Icon.d.ts

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

package/data1/Null3Icon.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 Null3Icon({
   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",
-    className: "cf-icon-svg",
+    className: "prefix__cf-icon-svg",
     viewBox: "-1 0 19 19",
-    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("path", {
     d: "M10.59 1.957a8.103 8.103 0 011.895.795 7.808 7.808 0 011.608 1.237 8.05 8.05 0 011.241 1.6 7.909 7.909 0 010 7.992 7.96 7.96 0 01-4.744 3.644 7.873 7.873 0 01-6.093-.8 8.039 8.039 0 01-1.599-1.241 7.848 7.848 0 01-1.237-1.604 8 8 0 01-.795-1.895 7.86 7.86 0 01-.283-2.111 7.782 7.782 0 01.283-2.099 7.902 7.902 0 015.518-5.518 7.956 7.956 0 014.206 0zM6.682 3.025a6.793 6.793 0 00-4.749 4.748 6.688 6.688 0 00-.241 1.8 6.764 6.764 0 00.242 1.815 6.915 6.915 0 00.685 1.634 6.775 6.775 0 001.063 1.379 6.987 6.987 0 001.38 1.07 6.81 6.81 0 005.229.687 6.937 6.937 0 001.634-.69 6.818 6.818 0 003.14-4.08 6.775 6.775 0 00.243-1.814 6.687 6.687 0 00-.242-1.8 6.76 6.76 0 00-.686-1.622 6.967 6.967 0 00-1.07-1.379 6.72 6.72 0 00-1.381-1.062 7.038 7.038 0 00-1.637-.686 6.848 6.848 0 00-3.61 0zm4.244 5.478a3.285 3.285 0 00-.444-1.093 2.29 2.29 0 00-.792-.745 2.344 2.344 0 00-1.18-.278 2.37 2.37 0 00-1.186.278 2.318 2.318 0 00-.802.745 3.22 3.22 0 00-.449 1.093 6.364 6.364 0 000 2.644 3.314 3.314 0 00.45 1.107 2.238 2.238 0 001.986 1.042 2.207 2.207 0 001.973-1.042 3.382 3.382 0 00.444-1.107 6.14 6.14 0 00.14-1.324 6.082 6.082 0 00-.14-1.32zm-1.49 2.01a3.39 3.39 0 01-.14.695 1.504 1.504 0 01-.291.537.626.626 0 01-.496.218.64.64 0 01-.5-.218 1.509 1.509 0 01-.301-.537 3.175 3.175 0 01-.144-.695q-.037-.375-.037-.69 0-.305.037-.676a3.174 3.174 0 01.144-.69 1.509 1.509 0 01.3-.537.64.64 0 01.501-.218.626.626 0 01.495.218 1.504 1.504 0 01.292.537 3.39 3.39 0 01.14.69q.036.37.036.676 0 .315-.037.69z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(Null3Icon);
 module.exports = ForwardRef;

package/data1/Null3Icon.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="-1 0 19 19" fill="currentColor" aria-hidden="true">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 0 19 19" fill="currentColor" aria-hidden="true">
   <path d="M10.59 1.957a8.103 8.103 0 011.895.795 7.808 7.808 0 011.608 1.237 8.05 8.05 0 011.241 1.6 7.909 7.909 0 010 7.992 7.96 7.96 0 01-4.744 3.644 7.873 7.873 0 01-6.093-.8 8.039 8.039 0 01-1.599-1.241 7.848 7.848 0 01-1.237-1.604 8 8 0 01-.795-1.895 7.86 7.86 0 01-.283-2.111 7.782 7.782 0 01.283-2.099 7.902 7.902 0 015.518-5.518 7.956 7.956 0 014.206 0zM6.682 3.025a6.793 6.793 0 00-4.749 4.748 6.688 6.688 0 00-.241 1.8 6.764 6.764 0 00.242 1.815 6.915 6.915 0 00.685 1.634 6.775 6.775 0 001.063 1.379 6.987 6.987 0 001.38 1.07 6.81 6.81 0 005.229.687 6.937 6.937 0 001.634-.69 6.818 6.818 0 003.14-4.08 6.775 6.775 0 00.243-1.814 6.687 6.687 0 00-.242-1.8 6.76 6.76 0 00-.686-1.622 6.967 6.967 0 00-1.07-1.379 6.72 6.72 0 00-1.381-1.062 7.038 7.038 0 00-1.637-.686 6.848 6.848 0 00-3.61 0zm4.244 5.478a3.285 3.285 0 00-.444-1.093 2.29 2.29 0 00-.792-.745 2.344 2.344 0 00-1.18-.278 2.37 2.37 0 00-1.186.278 2.318 2.318 0 00-.802.745 3.22 3.22 0 00-.449 1.093 6.364 6.364 0 000 2.644 3.314 3.314 0 00.45 1.107 2.238 2.238 0 001.986 1.042 2.207 2.207 0 001.973-1.042 3.382 3.382 0 00.444-1.107 6.14 6.14 0 00.14-1.324 6.082 6.082 0 00-.14-1.32zm-1.49 2.01a3.39 3.39 0 01-.14.695 1.504 1.504 0 01-.291.537.626.626 0 01-.496.218.64.64 0 01-.5-.218 1.509 1.509 0 01-.301-.537 3.175 3.175 0 01-.144-.695q-.037-.375-.037-.69 0-.305.037-.676a3.174 3.174 0 01.144-.69 1.509 1.509 0 01.3-.537.64.64 0 01.501-.218.626.626 0 01.495.218 1.504 1.504 0 01.292.537 3.39 3.39 0 01.14.69q.036.37.036.676 0 .315-.037.69z"/>
 </svg>

package/data1/Null4Icon.d.ts

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

package/data1/Null4Icon.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 Null4Icon({
   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",
-    className: "cf-icon-svg",
+    className: "prefix__cf-icon-svg",
     viewBox: "-1 0 19 19",
-    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("path", {
     d: "M10.59 1.957a8.103 8.103 0 011.895.795 7.808 7.808 0 011.608 1.237 8.05 8.05 0 011.241 1.6 7.909 7.909 0 010 7.992 7.96 7.96 0 01-4.744 3.644 7.873 7.873 0 01-6.093-.8 8.039 8.039 0 01-1.599-1.241 7.848 7.848 0 01-1.237-1.604 8 8 0 01-.795-1.895 7.86 7.86 0 01-.283-2.111 7.782 7.782 0 01.283-2.099 7.902 7.902 0 015.518-5.518 7.956 7.956 0 014.206 0zM6.682 3.025a6.793 6.793 0 00-4.749 4.748 6.688 6.688 0 00-.241 1.8 6.764 6.764 0 00.242 1.815 6.915 6.915 0 00.685 1.634 6.775 6.775 0 001.063 1.379 6.987 6.987 0 001.38 1.07 6.81 6.81 0 005.229.687 6.937 6.937 0 001.634-.69 6.818 6.818 0 003.14-4.08 6.775 6.775 0 00.243-1.814 6.687 6.687 0 00-.242-1.8 6.76 6.76 0 00-.686-1.622 6.967 6.967 0 00-1.07-1.379 6.72 6.72 0 00-1.381-1.062 7.038 7.038 0 00-1.637-.686 6.848 6.848 0 00-3.61 0zm4.244 5.478a3.285 3.285 0 00-.444-1.093 2.29 2.29 0 00-.792-.745 2.344 2.344 0 00-1.18-.278 2.37 2.37 0 00-1.186.278 2.318 2.318 0 00-.802.745 3.22 3.22 0 00-.449 1.093 6.364 6.364 0 000 2.644 3.314 3.314 0 00.45 1.107 2.238 2.238 0 001.986 1.042 2.207 2.207 0 001.973-1.042 3.382 3.382 0 00.444-1.107 6.14 6.14 0 00.14-1.324 6.082 6.082 0 00-.14-1.32zm-1.49 2.01a3.39 3.39 0 01-.14.695 1.504 1.504 0 01-.291.537.626.626 0 01-.496.218.64.64 0 01-.5-.218 1.509 1.509 0 01-.301-.537 3.175 3.175 0 01-.144-.695q-.037-.375-.037-.69 0-.305.037-.676a3.174 3.174 0 01.144-.69 1.509 1.509 0 01.3-.537.64.64 0 01.501-.218.626.626 0 01.495.218 1.504 1.504 0 01.292.537 3.39 3.39 0 01.14.69q.036.37.036.676 0 .315-.037.69z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(Null4Icon);
 module.exports = ForwardRef;

package/data1/Null4Icon.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg" viewBox="-1 0 19 19" fill="currentColor" aria-hidden="true">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 0 19 19" fill="currentColor" aria-hidden="true">
   <path d="M10.59 1.957a8.103 8.103 0 011.895.795 7.808 7.808 0 011.608 1.237 8.05 8.05 0 011.241 1.6 7.909 7.909 0 010 7.992 7.96 7.96 0 01-4.744 3.644 7.873 7.873 0 01-6.093-.8 8.039 8.039 0 01-1.599-1.241 7.848 7.848 0 01-1.237-1.604 8 8 0 01-.795-1.895 7.86 7.86 0 01-.283-2.111 7.782 7.782 0 01.283-2.099 7.902 7.902 0 015.518-5.518 7.956 7.956 0 014.206 0zM6.682 3.025a6.793 6.793 0 00-4.749 4.748 6.688 6.688 0 00-.241 1.8 6.764 6.764 0 00.242 1.815 6.915 6.915 0 00.685 1.634 6.775 6.775 0 001.063 1.379 6.987 6.987 0 001.38 1.07 6.81 6.81 0 005.229.687 6.937 6.937 0 001.634-.69 6.818 6.818 0 003.14-4.08 6.775 6.775 0 00.243-1.814 6.687 6.687 0 00-.242-1.8 6.76 6.76 0 00-.686-1.622 6.967 6.967 0 00-1.07-1.379 6.72 6.72 0 00-1.381-1.062 7.038 7.038 0 00-1.637-.686 6.848 6.848 0 00-3.61 0zm4.244 5.478a3.285 3.285 0 00-.444-1.093 2.29 2.29 0 00-.792-.745 2.344 2.344 0 00-1.18-.278 2.37 2.37 0 00-1.186.278 2.318 2.318 0 00-.802.745 3.22 3.22 0 00-.449 1.093 6.364 6.364 0 000 2.644 3.314 3.314 0 00.45 1.107 2.238 2.238 0 001.986 1.042 2.207 2.207 0 001.973-1.042 3.382 3.382 0 00.444-1.107 6.14 6.14 0 00.14-1.324 6.082 6.082 0 00-.14-1.32zm-1.49 2.01a3.39 3.39 0 01-.14.695 1.504 1.504 0 01-.291.537.626.626 0 01-.496.218.64.64 0 01-.5-.218 1.509 1.509 0 01-.301-.537 3.175 3.175 0 01-.144-.695q-.037-.375-.037-.69 0-.305.037-.676a3.174 3.174 0 01.144-.69 1.509 1.509 0 01.3-.537.64.64 0 01.501-.218.626.626 0 01.495.218 1.504 1.504 0 01.292.537 3.39 3.39 0 01.14.69q.036.37.036.676 0 .315-.037.69z"/>
 </svg>

package/data1/Null5Icon.d.ts

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

package/data1/Null5Icon.js

@@ -6,54 +6,92 @@ 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 Null5Icon({
   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 72 72",
-    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("circle", {
     cx: 36,
     cy: 36,
     r: 26.68,
-    fill: colored ? '#fff' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#fff') ? 'white' : 'currentColor'),
+    fill: colored ? '#fff' : 'white',
     fillRule: "evenodd"
   }), /*#__PURE__*/React.createElement("g", {
-    strokeLinejoin: "round"
+    strokeLinejoin: "round",
+    fill: colored ? 'none' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
+    stroke: "#000"
   }, /*#__PURE__*/React.createElement("circle", {
     cx: 36,
     cy: 36,
     r: 26.68,
-    fill: colored ? 'none' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('none') ? 'white' : 'currentColor'),
-    stroke: "#000",
     strokeLinecap: "round",
     strokeWidth: 4.74
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? 'none' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('none') ? 'white' : 'currentColor'),
-    stroke: "#000",
     strokeWidth: 4.74,
     d: "M43.24 22.41l-15.01 26-.327-.189"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? 'none' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('none') ? 'white' : 'currentColor'),
-    fillRule: "evenodd",
-    stroke: "#000",
     strokeLinecap: "round",
     strokeMiterlimit: 10,
-    strokeWidth: 7.998480000000001,
-    d: "M36 51.209a8.327 8.327 0 01-8.329-8.329V29.11a8.33 8.33 0 0116.658 0V42.88A8.327 8.327 0 0136 51.21z",
+    strokeWidth: 7.998,
+    d: "M36 51.209a8.327 8.327 0 01-8.329-8.329V29.11a8.33 8.33 0 0116.658 0v13.77A8.327 8.327 0 0136 51.21z",
     clipRule: "evenodd"
   })));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(Null5Icon);
 module.exports = ForwardRef;

package/data1/Null6Icon.d.ts

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

package/data1/Null6Icon.js

@@ -6,28 +6,71 @@ 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 Null6Icon({
   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 512.001 512.001",
-    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: "M256.001 172.523c-22.352 0-43.334 8.669-59.073 24.402-28.522 28.527-32.058 72.724-10.621 105.142l115.761-115.761c-13.532-8.959-29.415-13.783-46.067-13.783zM325.695 209.929L209.934 325.69c13.531 8.959 29.414 13.783 46.067 13.783 22.352 0 43.334-8.669 59.073-24.402 28.522-28.527 32.06-72.723 10.621-105.142z"
+    d: "M256.001 172.523c-22.352 0-43.334 8.669-59.073 24.402-28.522 28.527-32.058 72.724-10.621 105.142l115.761-115.761c-13.532-8.959-29.415-13.783-46.067-13.783zm69.694 37.406L209.934 325.69c13.531 8.959 29.414 13.783 46.067 13.783 22.352 0 43.334-8.669 59.073-24.402 28.522-28.527 32.06-72.723 10.621-105.142z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M437.108 74.898c-99.869-99.858-262.345-99.858-362.214 0-99.858 99.858-99.858 262.339 0 362.203 49.934 49.929 115.521 74.896 181.107 74.896s131.173-24.967 181.107-74.896c99.857-99.858 99.857-262.34 0-362.203zm-51.159 74.779l-36.381 36.381c34.244 45.773 30.709 111.06-10.868 152.639-22.048 22.048-51.416 34.192-82.698 34.192-25.615 0-49.871-8.261-69.95-23.315l-36.372 36.372c-3.263 3.263-7.538 4.895-11.812 4.895s-8.55-1.632-11.812-4.895c-6.526-6.52-6.526-17.104 0-23.625l36.381-36.381c-34.244-45.773-30.709-111.06 10.869-152.639 22.048-22.048 51.416-34.192 82.698-34.192 25.615 0 49.871 8.261 69.95 23.315l36.372-36.372c6.526-6.526 17.099-6.526 23.625 0 6.523 6.52 6.523 17.103-.002 23.625z"
   }));
+  if (!colormoded) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormoded === "string" ? colormoded : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(Null6Icon);
 module.exports = ForwardRef;

package/data1/NvidiaCudaIcon.d.ts

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