@datalayer/icons-react 1.0.7 → 1.0.9

package/data1/esm/OrganisationIcon.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 OrganisationIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormode,
   ...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: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     "aria-hidden": "true",
-    viewBox: "0 0 20 20",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
+    viewBox: "0 0 20 20",
     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: "M5.208 10a.625.625 0 100 1.25h.417a.625.625 0 000-1.25h-.417zm-.625-2.292a.625.625 0 01.625-.625h.417a.625.625 0 010 1.25h-.417a.625.625 0 01-.625-.625zm.625-3.541a.625.625 0 000 1.25h.417a.625.625 0 100-1.25h-.417zM7.5 10.625A.625.625 0 018.125 10h.417a.625.625 0 110 1.25h-.417a.625.625 0 01-.625-.625zm.625-3.542a.625.625 0 000 1.25h.417a.625.625 0 000-1.25h-.417zM7.5 4.792a.625.625 0 01.625-.625h.417a.625.625 0 010 1.25h-.417a.625.625 0 01-.625-.625zM11.042 10a.625.625 0 100 1.25h.416a.625.625 0 000-1.25h-.416zm-.625-2.292a.625.625 0 01.625-.625h.416a.625.625 0 110 1.25h-.416a.625.625 0 01-.625-.625zm.625-3.541a.625.625 0 100 1.25h.416a.625.625 0 100-1.25h-.416z"
@@ -29,6 +68,10 @@ function OrganisationIcon({
     fillRule: "evenodd",
     d: "M1.667 16.667a1.667 1.667 0 001.666 1.666h3.125a.625.625 0 00.625-.625v-1.875h2.5v1.875c0 .345.28.625.625.625h3.125c.077 0 .153-.005.227-.015.045.01.092.015.138.015h2.969a1.667 1.667 0 001.666-1.666V10a1.667 1.667 0 00-.666-1.333l-.417-.313a.625.625 0 00-.75 1l.417.313a.417.417 0 01.166.333v6.667a.417.417 0 01-.416.416h-1.72a1.63 1.63 0 00.053-.416V2.5A1.667 1.667 0 0013.333.833h-10A1.667 1.667 0 001.667 2.5v14.167zm1.666.416a.417.417 0 01-.416-.416V2.5a.417.417 0 01.416-.417h10a.417.417 0 01.417.417v14.167a.417.417 0 01-.417.416h-2.5v-1.875a.625.625 0 00-.625-.625h-3.75a.625.625 0 00-.625.625v1.875h-2.5z"
   }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(OrganisationIcon);
 export default ForwardRef;

package/data1/esm/OutputIcon.d.ts

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

package/data1/esm/OutputIcon.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 OutputIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormode,
   ...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: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
+    fill: themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor',
     viewBox: "0 0 20 20",
-    "aria-hidden": "true",
     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", {
     fillRule: "evenodd",
@@ -29,9 +68,13 @@ function OutputIcon({
     clipRule: "evenodd"
   }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
-    d: "M3.5 10a.5.5 0 01.5-.5h6a.5.5 0 010 1H4a.5.5 0 01-.5-.5zm8 0a.5.5 0 01.5-.5h2.046a.5.5 0 110 1H12a.5.5 0 01-.5-.5zm-8 2a.5.5 0 01.5-.5h3.52a.5.5 0 010 1H4a.5.5 0 01-.5-.5zm5.279 0a.5.5 0 01.5-.5h6.584a.5.5 0 110 1H9.279a.5.5 0 01-.5-.5zM3.5 14a.5.5 0 01.5-.5h9.026a.5.5 0 010 1H4a.5.5 0 01-.5-.5zM1.5 6.25h17v1.5h-17v-1.5z",
+    d: "M3.5 10a.5.5 0 01.5-.5h6a.5.5 0 010 1H4a.5.5 0 01-.5-.5zm8 0a.5.5 0 01.5-.5h2.046a.5.5 0 110 1H12a.5.5 0 01-.5-.5zm-8 2a.5.5 0 01.5-.5h3.52a.5.5 0 010 1H4a.5.5 0 01-.5-.5zm5.279 0a.5.5 0 01.5-.5h6.584a.5.5 0 110 1H9.279a.5.5 0 01-.5-.5zM3.5 14a.5.5 0 01.5-.5h9.026a.5.5 0 010 1H4a.5.5 0 01-.5-.5zm-2-7.75h17v1.5h-17v-1.5z",
     clipRule: "evenodd"
   }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(OutputIcon);
 export default ForwardRef;

package/data1/esm/OvhCloudIcon.d.ts

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

package/data1/esm/OvhCloudIcon.js

@@ -6,36 +6,79 @@ 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 OvhCloudIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormode,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
-    id: "Layer_1",
+    id: "prefix__Layer_1",
     viewBox: "0 0 350 350",
-    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("defs", {
-    id: "defs835"
+    id: "prefix__defs835"
   }, /*#__PURE__*/React.createElement("style", {
     id: "style833",
     type: "text/css"
   })), /*#__PURE__*/React.createElement("path", {
-    id: "path839",
-    fill: colored ? '#000e9c' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#000e9c') ? 'white' : 'currentColor'),
+    id: "prefix__path839",
+    fill: colored ? '#000e9c' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillRule: "evenodd",
     strokeWidth: 4.477,
     d: "M327.457 76.043a179.528 179.528 0 01-16.744 199.182h-95.987l29.548-52.246H205.19l46.068-81.169h39.308l36.89-65.677zM137.9 275.225H40.033a177.245 177.245 0 01-16.968-199.63l63.484 110.27L156.524 64h102.972L137.945 275.136z"
   }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(OvhCloudIcon);
 export default ForwardRef;

package/data1/esm/OvhCloudNameIcon.d.ts

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

package/data1/esm/OvhCloudNameIcon.js

@@ -6,79 +6,122 @@ 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 OvhCloudNameIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormode,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
-    id: "Layer_1",
+    id: "prefix__Layer_1",
     viewBox: "0 0 500 500",
-    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("defs", {
-    id: "defs835"
+    id: "prefix__defs835"
   }, /*#__PURE__*/React.createElement("style", {
     id: "style833",
     type: "text/css"
-  }, "\n      .cls-2{fill:#000e9c}\n    ")), /*#__PURE__*/React.createElement("path", {
-    id: "path839",
-    fill: colored ? '#000e9c' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#000e9c') ? 'white' : 'currentColor'),
+  }, ".prefix__cls-2{fill:#000e9c}")), /*#__PURE__*/React.createElement("path", {
+    id: "prefix__path839",
+    fill: colored ? '#000e9c' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     fillRule: "evenodd",
     strokeWidth: 6.396,
     d: "M467.796 53.205a256.47 256.47 0 01-23.92 284.546H306.751l42.212-74.638H293.13l65.812-115.955h56.154l52.701-93.826zM197.001 337.75H57.19A253.207 253.207 0 0132.95 52.565l90.691 157.527L223.607 36h147.102L197.065 337.623z"
   }), /*#__PURE__*/React.createElement("g", {
-    id: "g870",
-    transform: "matrix(2.41757 0 0 2.41757 -220.506 361.64)"
+    id: "prefix__g870",
+    transform: "translate(-220.506 361.64) scale(2.41757)"
   }, /*#__PURE__*/React.createElement("path", {
-    id: "path841",
+    id: "prefix__path841",
     d: "M128.18 62.9c0-12.59 6.27-18.64 16.57-18.64s16.56 6.05 16.56 18.64-6.31 18.57-16.56 18.57-16.57-6.1-16.57-18.57zm3.72 0c0 10.35 4.72 15.28 12.85 15.28 8.13 0 12.84-4.93 12.84-15.28s-4.72-15.35-12.84-15.35c-8.12 0-12.85 4.94-12.85 15.35z",
-    className: "cls-2",
+    className: "prefix__cls-2",
     transform: "translate(-36.97 -37.62)"
   }), /*#__PURE__*/React.createElement("path", {
-    id: "path843",
+    id: "prefix__path843",
     d: "M188.38 45.75a1.82 1.82 0 011.7-1.17 1.79 1.79 0 011.8 1.81 2.42 2.42 0 01-.16.79L179.3 79.93a1.78 1.78 0 01-3.39 0l-12.42-32.75a2.42 2.42 0 01-.16-.79 1.79 1.79 0 011.8-1.81 1.82 1.82 0 011.7 1.17l10.77 28.56z",
-    className: "cls-2",
+    className: "prefix__cls-2",
     transform: "translate(-36.97 -37.62)"
   }), /*#__PURE__*/React.createElement("path", {
-    id: "path845",
+    id: "prefix__path845",
     d: "M199.42 64.06v15.29a1.81 1.81 0 11-3.61 0v-33a1.81 1.81 0 113.61 0v14.42h18.48V46.39a1.81 1.81 0 113.61 0v33a1.81 1.81 0 11-3.61 0V64.06z",
-    className: "cls-2",
+    className: "prefix__cls-2",
     transform: "translate(-36.97 -37.62)"
   }), /*#__PURE__*/React.createElement("path", {
-    id: "path847",
+    id: "prefix__path847",
     d: "M238.55 55.89a10 10 0 018.17 3.66 1.56 1.56 0 01.37 1 1.51 1.51 0 01-1.54 1.54 1.56 1.56 0 01-1.27-.64 6.8 6.8 0 00-5.73-2.45c-4.89 0-7.49 3.13-7.49 9.66s2.6 9.71 7.49 9.71a9.68 9.68 0 006.15-2.28 1.56 1.56 0 011-.37 1.54 1.54 0 011.54 1.54 1.63 1.63 0 01-.69 1.32 12.06 12.06 0 01-8 2.87c-6.85 0-10.94-4.09-10.94-12.79s4.09-12.77 10.94-12.77z",
-    className: "cls-2",
+    className: "prefix__cls-2",
     transform: "translate(-36.97 -37.62)"
   }), /*#__PURE__*/React.createElement("path", {
-    id: "path849",
+    id: "prefix__path849",
     d: "M255.48 44.63V75c0 2.12.69 3 2.12 3a1.6 1.6 0 110 3.19c-3.55 0-5.52-2.13-5.52-6.21V44.63a1.74 1.74 0 011.7-1.69 1.7 1.7 0 011.7 1.69z",
-    className: "cls-2",
+    className: "prefix__cls-2",
     transform: "translate(-36.97 -37.62)"
   }), /*#__PURE__*/React.createElement("path", {
-    id: "path851",
+    id: "prefix__path851",
     d: "M284.41 68.63c0 8.7-4.25 12.79-11.15 12.79s-11.14-4.09-11.14-12.79 4.3-12.74 11.14-12.74c6.84 0 11.15 4.03 11.15 12.74zm-3.45 0c0-6.69-2.81-9.66-7.7-9.66-4.89 0-7.69 3-7.69 9.66s2.81 9.71 7.69 9.71c4.88 0 7.74-2.92 7.74-9.71z",
-    className: "cls-2",
+    className: "prefix__cls-2",
     transform: "translate(-36.97 -37.62)"
   }), /*#__PURE__*/React.createElement("path", {
-    id: "path853",
+    id: "prefix__path853",
     d: "M292.59 57.91v13.85c0 3.45 1.11 6.42 6.47 6.42 5.36 0 6.48-3 6.48-6.42V57.91a1.72 1.72 0 011.75-1.7 1.67 1.67 0 011.65 1.7v13.85c0 5-1.65 9.66-9.88 9.66s-9.87-4.62-9.87-9.66V57.91a1.67 1.67 0 011.7-1.7 1.71 1.71 0 011.7 1.7z",
-    className: "cls-2",
+    className: "prefix__cls-2",
     transform: "translate(-36.97 -37.62)"
   }), /*#__PURE__*/React.createElement("path", {
-    id: "path855",
+    id: "prefix__path855",
     d: "M331.6 59.34V44.63a1.7 1.7 0 013.4 0V71c0 7-4.35 10.46-10.4 10.46-6.85 0-10.89-4.09-10.89-12.79s3.83-12.74 10.67-12.74a9 9 0 017.22 3.41zm0 4.3s-2-4.67-7-4.67-7.49 3.13-7.49 9.66 2.6 9.71 7.49 9.71c4.08 0 7-2.33 7-7.38z",
-    className: "cls-2",
+    className: "prefix__cls-2",
     transform: "translate(-36.97 -37.62)"
   })));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(OvhCloudNameIcon);
 export default ForwardRef;

package/data1/esm/PandasIcon.d.ts

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

package/data1/esm/PandasIcon.js

@@ -6,41 +6,84 @@ 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 PandasIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormode,
   ...props
 }, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
+  const _svgEl = /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
-    id: "Layer_1",
+    id: "prefix__Layer_1",
     "data-name": "Layer 1",
-    viewBox: "0 0 818.63 331.21",
     width: size ? typeof size === "string" ? sizeMap[size] : size : "16px",
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
+    viewBox: "0 0 818.63 331.21",
+    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("defs", null, /*#__PURE__*/React.createElement("style", null, "\n      .cls-1{fill:#130754}\n    ")), /*#__PURE__*/React.createElement("path", {
-    d: "M290.85 199.21c-10.27 0-20.73-4.25-27.28-12.58v45H243V120.54h18.6l.71 12.22c6.38-9.39 17.71-14.35 28.52-14.35 20.73 0 36 17.37 36 40.4s-15.25 40.41-35.98 40.4zm-6.37-65.55c-12.05 0-21.79 9.39-21.79 25.16S272.43 184 284.48 184s21.79-9.39 21.79-25.16-9.74-25.18-21.79-25.18zM404.36 197.1l-.71-12.22c-6.38 9.39-17.72 14.35-28.53 14.34-20.73 0-36-17.36-36-40.39s15.24-40.4 36-40.39c10.81 0 22.15 5 28.53 14.35l.71-12.22H423v76.53zm-22.85-63.43c-12.05 0-21.79 9.39-21.8 25.16S369.45 184 381.5 184s21.8-9.39 21.8-25.16-9.74-25.17-21.79-25.17zM494.87 197.11v-42.34c0-14.88-5.13-19.84-14.52-19.84-9.75 0-20.38 8.85-20.38 19.48v42.7h-20.56v-76.54h18.79l.89 14.18c5.14-9.75 16.65-16.3 28.35-16.3 20.37 0 28 14.18 28 33.13v45.54zM590.77 197.13l-.71-12.23c-6.38 9.39-17.72 14.35-28.52 14.35-20.73 0-36-17.37-36-40.4s15.24-40.39 36-40.39c10.27 0 20.72 4.26 27.28 12.58V90.83h20.56v106.3zm-22.85-63.43c-12 0-21.79 9.39-21.79 25.15S555.87 184 567.92 184s21.79-9.38 21.79-25.15-9.71-25.15-21.79-25.15zM686.6 197.14l-.71-12.22c-6.38 9.39-17.72 14.34-28.53 14.34-20.73 0-36-17.36-36-40.4s15.24-40.39 36-40.39c10.81 0 22.15 5 28.53 14.36l.71-12.23h18.6v76.53zm-22.85-63.43c-12 0-21.79 9.39-21.8 25.16S651.7 184 663.74 184s21.8-9.39 21.8-25.16-9.74-25.13-21.79-25.13zM750.73 199.63a60.16 60.16 0 01-30.65-8.69l3.37-14.17c6.2 3.72 15.59 8.51 26.93 8.51 8.15 0 13.82-2.48 13.82-8.86 0-5.49-5.85-7.44-16.3-9.92-18.78-4.08-25.51-14-25.51-24.81 0-12.05 9.39-23.38 30.12-23.38 12.58 0 23.57 5.49 26 6.91l-3.37 13.47a44.59 44.59 0 00-22.14-6.38c-8.32 0-12.4 2.83-12.4 7.44 0 5.13 5.32 7.44 13.46 9.39 20.2 4.25 28.35 13.64 28.35 23.92.04 16.47-12.01 26.57-31.68 26.57zM74.88 68.42h24.09v50.02H74.88zM74.88 171.17h24.09v50.02H74.88z",
-    className: "cls-1"
+  }, title) : null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("style", null, ".prefix__cls-1{fill:#130754}")), /*#__PURE__*/React.createElement("path", {
+    d: "M290.85 199.21c-10.27 0-20.73-4.25-27.28-12.58v45H243V120.54h18.6l.71 12.22c6.38-9.39 17.71-14.35 28.52-14.35 20.73 0 36 17.37 36 40.4s-15.25 40.41-35.98 40.4zm-6.37-65.55c-12.05 0-21.79 9.39-21.79 25.16S272.43 184 284.48 184s21.79-9.39 21.79-25.16-9.74-25.18-21.79-25.18zm119.88 63.44l-.71-12.22c-6.38 9.39-17.72 14.35-28.53 14.34-20.73 0-36-17.36-36-40.39s15.24-40.4 36-40.39c10.81 0 22.15 5 28.53 14.35l.71-12.22H423v76.53zm-22.85-63.43c-12.05 0-21.79 9.39-21.8 25.16S369.45 184 381.5 184s21.8-9.39 21.8-25.16-9.74-25.17-21.79-25.17zm113.36 63.44v-42.34c0-14.88-5.13-19.84-14.52-19.84-9.75 0-20.38 8.85-20.38 19.48v42.7h-20.56v-76.54h18.79l.89 14.18c5.14-9.75 16.65-16.3 28.35-16.3 20.37 0 28 14.18 28 33.13v45.54zm95.9.02l-.71-12.23c-6.38 9.39-17.72 14.35-28.52 14.35-20.73 0-36-17.37-36-40.4s15.24-40.39 36-40.39c10.27 0 20.72 4.26 27.28 12.58V90.83h20.56v106.3zm-22.85-63.43c-12 0-21.79 9.39-21.79 25.15S555.87 184 567.92 184s21.79-9.38 21.79-25.15-9.71-25.15-21.79-25.15zm118.68 63.44l-.71-12.22c-6.38 9.39-17.72 14.34-28.53 14.34-20.73 0-36-17.36-36-40.4s15.24-40.39 36-40.39c10.81 0 22.15 5 28.53 14.36l.71-12.23h18.6v76.53zm-22.85-63.43c-12 0-21.79 9.39-21.8 25.16S651.7 184 663.74 184s21.8-9.39 21.8-25.16-9.74-25.13-21.79-25.13zm86.98 65.92a60.16 60.16 0 01-30.65-8.69l3.37-14.17c6.2 3.72 15.59 8.51 26.93 8.51 8.15 0 13.82-2.48 13.82-8.86 0-5.49-5.85-7.44-16.3-9.92-18.78-4.08-25.51-14-25.51-24.81 0-12.05 9.39-23.38 30.12-23.38 12.58 0 23.57 5.49 26 6.91l-3.37 13.47a44.59 44.59 0 00-22.14-6.38c-8.32 0-12.4 2.83-12.4 7.44 0 5.13 5.32 7.44 13.46 9.39 20.2 4.25 28.35 13.64 28.35 23.92.04 16.47-12.01 26.57-31.68 26.57zM74.88 68.42h24.09v50.02H74.88zm0 102.75h24.09v50.02H74.88z",
+    className: "prefix__cls-1"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#ffca00' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#ffca00') ? 'white' : 'currentColor'),
+    fill: colored ? '#ffca00' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M74.88 133.04h24.09v23.6H74.88z"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M36.19 109.55h24.09v166.27H36.19zM112.78 212.44h24.09v50.02h-24.09zM112.78 109.61h24.09v50.02h-24.09z",
-    className: "cls-1"
+    d: "M36.19 109.55h24.09v166.27H36.19zm76.59 102.89h24.09v50.02h-24.09zm0-102.83h24.09v50.02h-24.09z",
+    className: "prefix__cls-1"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? '#e70488' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('#e70488') ? 'white' : 'currentColor'),
+    fill: colored ? '#e70488' : (themed ? 'var(--datalayer-icon-fg, currentColor)' : 'currentColor'),
     d: "M112.78 174.23h24.09v23.6h-24.09z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M150.67 55.39h24.09v166.27h-24.09z",
-    className: "cls-1"
+    className: "prefix__cls-1"
   }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(PandasIcon);
 export default ForwardRef;

package/data1/esm/PauseIcon.d.ts

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

package/data1/esm/PauseIcon.js

@@ -6,30 +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 PauseIcon({
   title,
   titleId,
   size,
   colored,
+  themed,
+  colormode,
   ...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 32 32",
-    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: "M14 10h-2v12h2V10zm6 0h-2v12h2V10z"
   }), /*#__PURE__*/React.createElement("path", {
-    fill: colored ? 'currentColor' : (['#fff', '#fffff', 'white', '#FFF', '#FFFFFF'].includes('currentColor') ? 'white' : 'currentColor'),
     d: "M16 4A12 12 0 114 16 12 12 0 0116 4m0-2a14 14 0 1014 14A14 14 0 0016 2z"
   }));
+  if (!colormode) return _svgEl;
+  return /*#__PURE__*/React.createElement(_DlIconInverseColormode, {
+    mode: typeof colormode === "string" ? colormode : undefined
+  }, _svgEl);
 }
 const ForwardRef = React.forwardRef(PauseIcon);
 export default ForwardRef;

package/data1/esm/PlayRoundIcon.d.ts

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