@activecollab/components 2.0.222 → 2.0.223

package/dist/esm/components/Icons/collection/RecurringCheckmark.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component RecurringCheckmarkIcon
@@ -9,6 +10,13 @@ import React from "react";
  * The Icon component is
  * customizable, allowing for variations in size, color, and style to fit the needs of the application.
  *
+ * @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
+ * Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
+ *
+ * @example
+ * return (
+ * <RecurringCheckmarkIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
+ * )
  *
  * @example
  * return (
@@ -20,19 +28,27 @@ import React from "react";
  * @see
  * https://design.activecollab.com/docs/foundations/icons
  */
-const RecurringCheckmarkIcon = /*#__PURE__*/React.forwardRef((props, svgRef) => /*#__PURE__*/React.createElement("svg", _extends({
-  width: 24,
-  height: 24,
-  viewBox: "0 0 24 24",
-  xmlns: "http://www.w3.org/2000/svg",
-  "data-testid": "RecurringCheckmarkIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M5.014 12a6.944 6.944 0 001.826 4.73l.21.22a7 7 0 009.727.167l.173-.167-1.414-1.414 4.871-.63-.629 4.872-1.414-1.414a9 9 0 01-12.728 0 8.891 8.891 0 01-2.498-4.788A9.017 9.017 0 013 12.01h.006V12h2.008zm10.593-2.293a1 1 0 010 1.414l-3.657 3.657a1 1 0 01-1.414 0L8.707 12.95a1 1 0 011.414-1.414l1.12 1.12 2.951-2.949a1 1 0 011.415 0zm-3.246-6.7c2.1.084 4.175.898 5.813 2.444l.19.185.225.234.096.104.118.133a8.861 8.861 0 012.04 4.216l.043.25c.071.44.109.886.113 1.332h-.006l.001.095h-2.008a6.955 6.955 0 00-1.245-4.005l-.186-.254-.094-.12a7 7 0 00-10.238-.737l-.173.166 1.414 1.414-4.871.63.629-4.872 1.414 1.414a8.976 8.976 0 016.725-2.629z",
-  fillRule: "evenodd"
-})));
+const RecurringCheckmarkIcon = /*#__PURE__*/React.forwardRef((_ref, svgRef) => {
+  let {
+    gradient,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": "RecurringCheckmarkIcon",
+    fill: gradient ? "url(#icon-gradient)" : props != null && props.fill ? props.fill : "var(--color-theme-600)",
+    focusable: false,
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement(GradientDefs, {
+    gradient: gradient
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M5.014 12a6.944 6.944 0 001.826 4.73l.21.22a7 7 0 009.727.167l.173-.167-1.414-1.414 4.871-.63-.629 4.872-1.414-1.414a9 9 0 01-12.728 0 8.891 8.891 0 01-2.498-4.788A9.017 9.017 0 013 12.01h.006V12h2.008zm10.593-2.293a1 1 0 010 1.414l-3.657 3.657a1 1 0 01-1.414 0L8.707 12.95a1 1 0 011.414-1.414l1.12 1.12 2.951-2.949a1 1 0 011.415 0zm-3.246-6.7c2.1.084 4.175.898 5.813 2.444l.19.185.225.234.096.104.118.133a8.861 8.861 0 012.04 4.216l.043.25c.071.44.109.886.113 1.332h-.006l.001.095h-2.008a6.955 6.955 0 00-1.245-4.005l-.186-.254-.094-.12a7 7 0 00-10.238-.737l-.173.166 1.414 1.414-4.871.63.629-4.872 1.414 1.414a8.976 8.976 0 016.725-2.629z",
+    fillRule: "evenodd"
+  }));
+});
 RecurringCheckmarkIcon.displayName = "RecurringCheckmarkIcon";
 export default RecurringCheckmarkIcon;
 //# sourceMappingURL=RecurringCheckmark.js.map

package/dist/esm/components/Icons/collection/RecurringCheckmark.js.map

@@ -1 +1 @@
-{"version":3,"file":"RecurringCheckmark.js","names":["React","RecurringCheckmarkIcon","forwardRef","props","svgRef","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/RecurringCheckmark.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component RecurringCheckmarkIcon\n * @description\n *\n * The React Icon component is a visual element that displays an icon to represent a concept, object, or action.\n * The Icon component is\n * customizable, allowing for variations in size, color, and style to fit the needs of the application.\n *\n *\n * @example\n * return (\n *   <RecurringCheckmarkIcon className=\"mr-2\" />\n * )\n *\n * @see\n * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons\n * @see\n * https://design.activecollab.com/docs/foundations/icons\n */\nconst RecurringCheckmarkIcon = React.forwardRef(\n  (props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>) => (\n    <svg\n      width={24}\n      height={24}\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      data-testid=\"RecurringCheckmarkIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path\n        d=\"M5.014 12a6.944 6.944 0 001.826 4.73l.21.22a7 7 0 009.727.167l.173-.167-1.414-1.414 4.871-.63-.629 4.872-1.414-1.414a9 9 0 01-12.728 0 8.891 8.891 0 01-2.498-4.788A9.017 9.017 0 013 12.01h.006V12h2.008zm10.593-2.293a1 1 0 010 1.414l-3.657 3.657a1 1 0 01-1.414 0L8.707 12.95a1 1 0 011.414-1.414l1.12 1.12 2.951-2.949a1 1 0 011.415 0zm-3.246-6.7c2.1.084 4.175.898 5.813 2.444l.19.185.225.234.096.104.118.133a8.861 8.861 0 012.04 4.216l.043.25c.071.44.109.886.113 1.332h-.006l.001.095h-2.008a6.955 6.955 0 00-1.245-4.005l-.186-.254-.094-.12a7 7 0 00-10.238-.737l-.173.166 1.414 1.414-4.871.63.629-4.872 1.414 1.414a8.976 8.976 0 016.725-2.629z\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  )\n);\nRecurringCheckmarkIcon.displayName = \"RecurringCheckmarkIcon\";\nexport default RecurringCheckmarkIcon;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,sBAAsB,gBAAGD,KAAK,CAACE,UAAU,CAC7C,CAACC,KAAoC,EAAEC,MAAiC,kBACtEJ,KAAA,CAAAK,aAAA,QAAAC,QAAA;EACEC,KAAK,EAAE,EAAG;EACVC,MAAM,EAAE,EAAG;EACXC,OAAO,EAAC,WAAW;EACnBC,KAAK,EAAC,4BAA4B;EAClC,eAAY,wBAAwB;EACpCC,IAAI,EAAC,wBAAwB;EAC7BC,SAAS,EAAE,KAAM;EACjBC,GAAG,EAAET;AAAO,GACRD,KAAK,gBAETH,KAAA,CAAAK,aAAA;EACES,CAAC,EAAC,koBAAkoB;EACpoBC,QAAQ,EAAC;AAAS,CACnB,CACE,CAET,CAAC;AACDd,sBAAsB,CAACe,WAAW,GAAG,wBAAwB;AAC7D,eAAef,sBAAsB"}
+{"version":3,"file":"RecurringCheckmark.js","names":["React","GradientDefs","RecurringCheckmarkIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/RecurringCheckmark.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component RecurringCheckmarkIcon\n * @description\n *\n * The React Icon component is a visual element that displays an icon to represent a concept, object, or action.\n * The Icon component is\n * customizable, allowing for variations in size, color, and style to fit the needs of the application.\n *\n * @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.\n * Format: \"linear-gradient(<angle>deg, <color1>, <color2>, ...)\"\n *\n * @example\n * return (\n * <RecurringCheckmarkIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <RecurringCheckmarkIcon className=\"mr-2\" />\n * )\n *\n * @see\n * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons\n * @see\n * https://design.activecollab.com/docs/foundations/icons\n */\nconst RecurringCheckmarkIcon = React.forwardRef(\n  (\n    {\n      gradient,\n      ...props\n    }: React.SVGProps<SVGSVGElement> & {\n      gradient?: string;\n    },\n    svgRef?: React.Ref<SVGSVGElement>\n  ) => (\n    <svg\n      width={24}\n      height={24}\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      data-testid=\"RecurringCheckmarkIcon\"\n      fill={\n        gradient\n          ? \"url(#icon-gradient)\"\n          : props?.fill\n          ? props.fill\n          : \"var(--color-theme-600)\"\n      }\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <GradientDefs gradient={gradient} />\n      <path\n        d=\"M5.014 12a6.944 6.944 0 001.826 4.73l.21.22a7 7 0 009.727.167l.173-.167-1.414-1.414 4.871-.63-.629 4.872-1.414-1.414a9 9 0 01-12.728 0 8.891 8.891 0 01-2.498-4.788A9.017 9.017 0 013 12.01h.006V12h2.008zm10.593-2.293a1 1 0 010 1.414l-3.657 3.657a1 1 0 01-1.414 0L8.707 12.95a1 1 0 011.414-1.414l1.12 1.12 2.951-2.949a1 1 0 011.415 0zm-3.246-6.7c2.1.084 4.175.898 5.813 2.444l.19.185.225.234.096.104.118.133a8.861 8.861 0 012.04 4.216l.043.25c.071.44.109.886.113 1.332h-.006l.001.095h-2.008a6.955 6.955 0 00-1.245-4.005l-.186-.254-.094-.12a7 7 0 00-10.238-.737l-.173.166 1.414 1.414-4.871.63.629-4.872 1.414 1.414a8.976 8.976 0 016.725-2.629z\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  )\n);\nRecurringCheckmarkIcon.displayName = \"RecurringCheckmarkIcon\";\nexport default RecurringCheckmarkIcon;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,YAAY,QAAQ,oBAAoB;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,sBAAsB,gBAAGF,KAAK,CAACG,UAAU,CAC7C,CAAAC,IAAA,EAOEC,MAAiC;EAAA,IANjC;IACEC,QAAQ;IACR,GAAGC;EAGL,CAAC,GAAAH,IAAA;EAAA,oBAGDJ,KAAA,CAAAQ,aAAA,QAAAC,QAAA;IACEC,KAAK,EAAE,EAAG;IACVC,MAAM,EAAE,EAAG;IACXC,OAAO,EAAC,WAAW;IACnBC,KAAK,EAAC,4BAA4B;IAClC,eAAY,wBAAwB;IACpCC,IAAI,EACFR,QAAQ,GACJ,qBAAqB,GACrBC,KAAK,YAALA,KAAK,CAAEO,IAAI,GACXP,KAAK,CAACO,IAAI,GACV,wBACL;IACDC,SAAS,EAAE,KAAM;IACjBC,GAAG,EAAEX;EAAO,GACRE,KAAK,gBAETP,KAAA,CAAAQ,aAAA,CAACP,YAAY;IAACK,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACpCN,KAAA,CAAAQ,aAAA;IACES,CAAC,EAAC,koBAAkoB;IACpoBC,QAAQ,EAAC;EAAS,CACnB,CACE,CAAC;AAAA,CAEV,CAAC;AACDhB,sBAAsB,CAACiB,WAAW,GAAG,wBAAwB;AAC7D,eAAejB,sBAAsB"}

package/dist/esm/components/Icons/collection/RecurringCheckmarkSmall.d.ts

@@ -7,6 +7,13 @@ import React from "react";
  * The Icon component is
  * customizable, allowing for variations in size, color, and style to fit the needs of the application.
  *
+ * @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
+ * Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
+ *
+ * @example
+ * return (
+ * <RecurringCheckmarkSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
+ * )
  *
  * @example
  * return (
@@ -18,6 +25,8 @@ import React from "react";
  * @see
  * https://design.activecollab.com/docs/foundations/icons
  */
-declare const RecurringCheckmarkSmallIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const RecurringCheckmarkSmallIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & {
+    gradient?: string | undefined;
+}, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default RecurringCheckmarkSmallIcon;
 //# sourceMappingURL=RecurringCheckmarkSmall.d.ts.map

package/dist/esm/components/Icons/collection/RecurringCheckmarkSmall.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RecurringCheckmarkSmall.d.ts","sourceRoot":"","sources":["../../../../../src/components/Icons/collection/RecurringCheckmarkSmall.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,2BAA2B,kHAmBhC,CAAC;AAEF,eAAe,2BAA2B,CAAC"}
+{"version":3,"file":"RecurringCheckmarkSmall.d.ts","sourceRoot":"","sources":["../../../../../src/components/Icons/collection/RecurringCheckmarkSmall.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,2BAA2B;;+CAkChC,CAAC;AAEF,eAAe,2BAA2B,CAAC"}

package/dist/esm/components/Icons/collection/RecurringCheckmarkSmall.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component RecurringCheckmarkSmallIcon
@@ -9,6 +10,13 @@ import React from "react";
  * The Icon component is
  * customizable, allowing for variations in size, color, and style to fit the needs of the application.
  *
+ * @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
+ * Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
+ *
+ * @example
+ * return (
+ * <RecurringCheckmarkSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
+ * )
  *
  * @example
  * return (
@@ -20,19 +28,27 @@ import React from "react";
  * @see
  * https://design.activecollab.com/docs/foundations/icons
  */
-const RecurringCheckmarkSmallIcon = /*#__PURE__*/React.forwardRef((props, svgRef) => /*#__PURE__*/React.createElement("svg", _extends({
-  width: 12,
-  height: 12,
-  viewBox: "0 0 12 12",
-  xmlns: "http://www.w3.org/2000/svg",
-  "data-testid": "RecurringCheckmarkSmallIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M1 5.874a5.002 5.002 0 008.743 3.442l-.78-.45 2.3-.982.3 2.482-.939-.542A6.002 6.002 0 01.001 6.141l1-.267zm6.93-1.177a.5.5 0 010 .707L5.975 7.39a.5.5 0 01-.707 0l-.971-.975a.5.5 0 01.707-.708l.617.622 1.602-1.63a.5.5 0 01.707 0zM9 .804a5.996 5.996 0 013 5.052l-1.001.268.001-.043a5.002 5.002 0 00-8.743-3.398l.779.451-2.3.982-.298-2.482.938.54A6.002 6.002 0 019 .805z",
-  fillRule: "evenodd"
-})));
+const RecurringCheckmarkSmallIcon = /*#__PURE__*/React.forwardRef((_ref, svgRef) => {
+  let {
+    gradient,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 12,
+    height: 12,
+    viewBox: "0 0 12 12",
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": "RecurringCheckmarkSmallIcon",
+    fill: gradient ? "url(#icon-gradient)" : props != null && props.fill ? props.fill : "var(--color-theme-600)",
+    focusable: false,
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement(GradientDefs, {
+    gradient: gradient
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M1 5.874a5.002 5.002 0 008.743 3.442l-.78-.45 2.3-.982.3 2.482-.939-.542A6.002 6.002 0 01.001 6.141l1-.267zm6.93-1.177a.5.5 0 010 .707L5.975 7.39a.5.5 0 01-.707 0l-.971-.975a.5.5 0 01.707-.708l.617.622 1.602-1.63a.5.5 0 01.707 0zM9 .804a5.996 5.996 0 013 5.052l-1.001.268.001-.043a5.002 5.002 0 00-8.743-3.398l.779.451-2.3.982-.298-2.482.938.54A6.002 6.002 0 019 .805z",
+    fillRule: "evenodd"
+  }));
+});
 RecurringCheckmarkSmallIcon.displayName = "RecurringCheckmarkSmallIcon";
 export default RecurringCheckmarkSmallIcon;
 //# sourceMappingURL=RecurringCheckmarkSmall.js.map

package/dist/esm/components/Icons/collection/RecurringCheckmarkSmall.js.map

@@ -1 +1 @@
-{"version":3,"file":"RecurringCheckmarkSmall.js","names":["React","RecurringCheckmarkSmallIcon","forwardRef","props","svgRef","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/RecurringCheckmarkSmall.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component RecurringCheckmarkSmallIcon\n * @description\n *\n * The React Icon component is a visual element that displays an icon to represent a concept, object, or action.\n * The Icon component is\n * customizable, allowing for variations in size, color, and style to fit the needs of the application.\n *\n *\n * @example\n * return (\n *   <RecurringCheckmarkSmallIcon className=\"mr-2\" />\n * )\n *\n * @see\n * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons\n * @see\n * https://design.activecollab.com/docs/foundations/icons\n */\nconst RecurringCheckmarkSmallIcon = React.forwardRef(\n  (props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>) => (\n    <svg\n      width={12}\n      height={12}\n      viewBox=\"0 0 12 12\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      data-testid=\"RecurringCheckmarkSmallIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path\n        d=\"M1 5.874a5.002 5.002 0 008.743 3.442l-.78-.45 2.3-.982.3 2.482-.939-.542A6.002 6.002 0 01.001 6.141l1-.267zm6.93-1.177a.5.5 0 010 .707L5.975 7.39a.5.5 0 01-.707 0l-.971-.975a.5.5 0 01.707-.708l.617.622 1.602-1.63a.5.5 0 01.707 0zM9 .804a5.996 5.996 0 013 5.052l-1.001.268.001-.043a5.002 5.002 0 00-8.743-3.398l.779.451-2.3.982-.298-2.482.938.54A6.002 6.002 0 019 .805z\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  )\n);\nRecurringCheckmarkSmallIcon.displayName = \"RecurringCheckmarkSmallIcon\";\nexport default RecurringCheckmarkSmallIcon;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,2BAA2B,gBAAGD,KAAK,CAACE,UAAU,CAClD,CAACC,KAAoC,EAAEC,MAAiC,kBACtEJ,KAAA,CAAAK,aAAA,QAAAC,QAAA;EACEC,KAAK,EAAE,EAAG;EACVC,MAAM,EAAE,EAAG;EACXC,OAAO,EAAC,WAAW;EACnBC,KAAK,EAAC,4BAA4B;EAClC,eAAY,6BAA6B;EACzCC,IAAI,EAAC,wBAAwB;EAC7BC,SAAS,EAAE,KAAM;EACjBC,GAAG,EAAET;AAAO,GACRD,KAAK,gBAETH,KAAA,CAAAK,aAAA;EACES,CAAC,EAAC,kXAAkX;EACpXC,QAAQ,EAAC;AAAS,CACnB,CACE,CAET,CAAC;AACDd,2BAA2B,CAACe,WAAW,GAAG,6BAA6B;AACvE,eAAef,2BAA2B"}
+{"version":3,"file":"RecurringCheckmarkSmall.js","names":["React","GradientDefs","RecurringCheckmarkSmallIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/RecurringCheckmarkSmall.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component RecurringCheckmarkSmallIcon\n * @description\n *\n * The React Icon component is a visual element that displays an icon to represent a concept, object, or action.\n * The Icon component is\n * customizable, allowing for variations in size, color, and style to fit the needs of the application.\n *\n * @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.\n * Format: \"linear-gradient(<angle>deg, <color1>, <color2>, ...)\"\n *\n * @example\n * return (\n * <RecurringCheckmarkSmallIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <RecurringCheckmarkSmallIcon className=\"mr-2\" />\n * )\n *\n * @see\n * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons\n * @see\n * https://design.activecollab.com/docs/foundations/icons\n */\nconst RecurringCheckmarkSmallIcon = React.forwardRef(\n  (\n    {\n      gradient,\n      ...props\n    }: React.SVGProps<SVGSVGElement> & {\n      gradient?: string;\n    },\n    svgRef?: React.Ref<SVGSVGElement>\n  ) => (\n    <svg\n      width={12}\n      height={12}\n      viewBox=\"0 0 12 12\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      data-testid=\"RecurringCheckmarkSmallIcon\"\n      fill={\n        gradient\n          ? \"url(#icon-gradient)\"\n          : props?.fill\n          ? props.fill\n          : \"var(--color-theme-600)\"\n      }\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <GradientDefs gradient={gradient} />\n      <path\n        d=\"M1 5.874a5.002 5.002 0 008.743 3.442l-.78-.45 2.3-.982.3 2.482-.939-.542A6.002 6.002 0 01.001 6.141l1-.267zm6.93-1.177a.5.5 0 010 .707L5.975 7.39a.5.5 0 01-.707 0l-.971-.975a.5.5 0 01.707-.708l.617.622 1.602-1.63a.5.5 0 01.707 0zM9 .804a5.996 5.996 0 013 5.052l-1.001.268.001-.043a5.002 5.002 0 00-8.743-3.398l.779.451-2.3.982-.298-2.482.938.54A6.002 6.002 0 019 .805z\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  )\n);\nRecurringCheckmarkSmallIcon.displayName = \"RecurringCheckmarkSmallIcon\";\nexport default RecurringCheckmarkSmallIcon;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,YAAY,QAAQ,oBAAoB;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,2BAA2B,gBAAGF,KAAK,CAACG,UAAU,CAClD,CAAAC,IAAA,EAOEC,MAAiC;EAAA,IANjC;IACEC,QAAQ;IACR,GAAGC;EAGL,CAAC,GAAAH,IAAA;EAAA,oBAGDJ,KAAA,CAAAQ,aAAA,QAAAC,QAAA;IACEC,KAAK,EAAE,EAAG;IACVC,MAAM,EAAE,EAAG;IACXC,OAAO,EAAC,WAAW;IACnBC,KAAK,EAAC,4BAA4B;IAClC,eAAY,6BAA6B;IACzCC,IAAI,EACFR,QAAQ,GACJ,qBAAqB,GACrBC,KAAK,YAALA,KAAK,CAAEO,IAAI,GACXP,KAAK,CAACO,IAAI,GACV,wBACL;IACDC,SAAS,EAAE,KAAM;IACjBC,GAAG,EAAEX;EAAO,GACRE,KAAK,gBAETP,KAAA,CAAAQ,aAAA,CAACP,YAAY;IAACK,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACpCN,KAAA,CAAAQ,aAAA;IACES,CAAC,EAAC,kXAAkX;IACpXC,QAAQ,EAAC;EAAS,CACnB,CACE,CAAC;AAAA,CAEV,CAAC;AACDhB,2BAA2B,CAACiB,WAAW,GAAG,6BAA6B;AACvE,eAAejB,2BAA2B"}

package/dist/esm/components/Icons/collection/RecurringDollar.d.ts

@@ -7,6 +7,13 @@ import React from "react";
  * The Icon component is
  * customizable, allowing for variations in size, color, and style to fit the needs of the application.
  *
+ * @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
+ * Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
+ *
+ * @example
+ * return (
+ * <RecurringDollarIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
+ * )
  *
  * @example
  * return (
@@ -18,6 +25,8 @@ import React from "react";
  * @see
  * https://design.activecollab.com/docs/foundations/icons
  */
-declare const RecurringDollarIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const RecurringDollarIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & {
+    gradient?: string | undefined;
+}, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default RecurringDollarIcon;
 //# sourceMappingURL=RecurringDollar.d.ts.map

package/dist/esm/components/Icons/collection/RecurringDollar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RecurringDollar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Icons/collection/RecurringDollar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,mBAAmB,kHAoBxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"RecurringDollar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Icons/collection/RecurringDollar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,mBAAmB;;+CAmCxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/esm/components/Icons/collection/RecurringDollar.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component RecurringDollarIcon
@@ -9,6 +10,13 @@ import React from "react";
  * The Icon component is
  * customizable, allowing for variations in size, color, and style to fit the needs of the application.
  *
+ * @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
+ * Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
+ *
+ * @example
+ * return (
+ * <RecurringDollarIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
+ * )
  *
  * @example
  * return (
@@ -20,21 +28,29 @@ import React from "react";
  * @see
  * https://design.activecollab.com/docs/foundations/icons
  */
-const RecurringDollarIcon = /*#__PURE__*/React.forwardRef((props, svgRef) => /*#__PURE__*/React.createElement("svg", _extends({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  "data-testid": "RecurringDollarIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  d: "M5.014 12a6.944 6.944 0 001.826 4.73l.21.22a7 7 0 009.727.167l.173-.167-1.414-1.414 4.871-.63-.629 4.872-1.414-1.414a9 9 0 01-12.728 0 8.892 8.892 0 01-2.498-4.789A9.016 9.016 0 013 12.01h.006V12h2.008zm7.347-8.993c2.1.084 4.175.898 5.813 2.444l.19.185.225.234.096.104.118.133a8.862 8.862 0 012.04 4.216l.043.25c.071.44.109.886.114 1.332h-.007l.001.095h-2.008a6.955 6.955 0 00-1.245-4.005l-.186-.254-.094-.12a7 7 0 00-10.238-.737l-.173.166 1.414 1.414-4.872.63.63-4.872 1.414 1.414a8.976 8.976 0 016.725-2.629z",
-  clipRule: "evenodd"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M13 17h-2v-1H9v-2h4v-1h-3a1 1 0 01-1-1V9a1 1 0 011-1h1V7h2v1h2v2h-4v1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1v1z"
-})));
+const RecurringDollarIcon = /*#__PURE__*/React.forwardRef((_ref, svgRef) => {
+  let {
+    gradient,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    "data-testid": "RecurringDollarIcon",
+    fill: gradient ? "url(#icon-gradient)" : props != null && props.fill ? props.fill : "var(--color-theme-600)",
+    focusable: false,
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement(GradientDefs, {
+    gradient: gradient
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M5.014 12a6.944 6.944 0 001.826 4.73l.21.22a7 7 0 009.727.167l.173-.167-1.414-1.414 4.871-.63-.629 4.872-1.414-1.414a9 9 0 01-12.728 0 8.892 8.892 0 01-2.498-4.789A9.016 9.016 0 013 12.01h.006V12h2.008zm7.347-8.993c2.1.084 4.175.898 5.813 2.444l.19.185.225.234.096.104.118.133a8.862 8.862 0 012.04 4.216l.043.25c.071.44.109.886.114 1.332h-.007l.001.095h-2.008a6.955 6.955 0 00-1.245-4.005l-.186-.254-.094-.12a7 7 0 00-10.238-.737l-.173.166 1.414 1.414-4.872.63.63-4.872 1.414 1.414a8.976 8.976 0 016.725-2.629z",
+    clipRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M13 17h-2v-1H9v-2h4v-1h-3a1 1 0 01-1-1V9a1 1 0 011-1h1V7h2v1h2v2h-4v1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1v1z"
+  }));
+});
 RecurringDollarIcon.displayName = "RecurringDollarIcon";
 export default RecurringDollarIcon;
 //# sourceMappingURL=RecurringDollar.js.map

package/dist/esm/components/Icons/collection/RecurringDollar.js.map

@@ -1 +1 @@
-{"version":3,"file":"RecurringDollar.js","names":["React","RecurringDollarIcon","forwardRef","props","svgRef","createElement","_extends","xmlns","width","height","fill","focusable","ref","fillRule","d","clipRule","displayName"],"sources":["../../../../../src/components/Icons/collection/RecurringDollar.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component RecurringDollarIcon\n * @description\n *\n * The React Icon component is a visual element that displays an icon to represent a concept, object, or action.\n * The Icon component is\n * customizable, allowing for variations in size, color, and style to fit the needs of the application.\n *\n *\n * @example\n * return (\n *   <RecurringDollarIcon className=\"mr-2\" />\n * )\n *\n * @see\n * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons\n * @see\n * https://design.activecollab.com/docs/foundations/icons\n */\nconst RecurringDollarIcon = React.forwardRef(\n  (props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>) => (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={24}\n      height={24}\n      data-testid=\"RecurringDollarIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path\n        fillRule=\"evenodd\"\n        d=\"M5.014 12a6.944 6.944 0 001.826 4.73l.21.22a7 7 0 009.727.167l.173-.167-1.414-1.414 4.871-.63-.629 4.872-1.414-1.414a9 9 0 01-12.728 0 8.892 8.892 0 01-2.498-4.789A9.016 9.016 0 013 12.01h.006V12h2.008zm7.347-8.993c2.1.084 4.175.898 5.813 2.444l.19.185.225.234.096.104.118.133a8.862 8.862 0 012.04 4.216l.043.25c.071.44.109.886.114 1.332h-.007l.001.095h-2.008a6.955 6.955 0 00-1.245-4.005l-.186-.254-.094-.12a7 7 0 00-10.238-.737l-.173.166 1.414 1.414-4.872.63.63-4.872 1.414 1.414a8.976 8.976 0 016.725-2.629z\"\n        clipRule=\"evenodd\"\n      />\n      <path d=\"M13 17h-2v-1H9v-2h4v-1h-3a1 1 0 01-1-1V9a1 1 0 011-1h1V7h2v1h2v2h-4v1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1v1z\" />\n    </svg>\n  )\n);\nRecurringDollarIcon.displayName = \"RecurringDollarIcon\";\nexport default RecurringDollarIcon;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,mBAAmB,gBAAGD,KAAK,CAACE,UAAU,CAC1C,CAACC,KAAoC,EAAEC,MAAiC,kBACtEJ,KAAA,CAAAK,aAAA,QAAAC,QAAA;EACEC,KAAK,EAAC,4BAA4B;EAClCC,KAAK,EAAE,EAAG;EACVC,MAAM,EAAE,EAAG;EACX,eAAY,qBAAqB;EACjCC,IAAI,EAAC,wBAAwB;EAC7BC,SAAS,EAAE,KAAM;EACjBC,GAAG,EAAER;AAAO,GACRD,KAAK,gBAETH,KAAA,CAAAK,aAAA;EACEQ,QAAQ,EAAC,SAAS;EAClBC,CAAC,EAAC,ggBAAggB;EAClgBC,QAAQ,EAAC;AAAS,CACnB,CAAC,eACFf,KAAA,CAAAK,aAAA;EAAMS,CAAC,EAAC;AAA0G,CAAE,CACjH,CAET,CAAC;AACDb,mBAAmB,CAACe,WAAW,GAAG,qBAAqB;AACvD,eAAef,mBAAmB"}
+{"version":3,"file":"RecurringDollar.js","names":["React","GradientDefs","RecurringDollarIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","xmlns","width","height","fill","focusable","ref","fillRule","d","clipRule","displayName"],"sources":["../../../../../src/components/Icons/collection/RecurringDollar.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component RecurringDollarIcon\n * @description\n *\n * The React Icon component is a visual element that displays an icon to represent a concept, object, or action.\n * The Icon component is\n * customizable, allowing for variations in size, color, and style to fit the needs of the application.\n *\n * @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.\n * Format: \"linear-gradient(<angle>deg, <color1>, <color2>, ...)\"\n *\n * @example\n * return (\n * <RecurringDollarIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <RecurringDollarIcon className=\"mr-2\" />\n * )\n *\n * @see\n * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons\n * @see\n * https://design.activecollab.com/docs/foundations/icons\n */\nconst RecurringDollarIcon = React.forwardRef(\n  (\n    {\n      gradient,\n      ...props\n    }: React.SVGProps<SVGSVGElement> & {\n      gradient?: string;\n    },\n    svgRef?: React.Ref<SVGSVGElement>\n  ) => (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={24}\n      height={24}\n      data-testid=\"RecurringDollarIcon\"\n      fill={\n        gradient\n          ? \"url(#icon-gradient)\"\n          : props?.fill\n          ? props.fill\n          : \"var(--color-theme-600)\"\n      }\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <GradientDefs gradient={gradient} />\n      <path\n        fillRule=\"evenodd\"\n        d=\"M5.014 12a6.944 6.944 0 001.826 4.73l.21.22a7 7 0 009.727.167l.173-.167-1.414-1.414 4.871-.63-.629 4.872-1.414-1.414a9 9 0 01-12.728 0 8.892 8.892 0 01-2.498-4.789A9.016 9.016 0 013 12.01h.006V12h2.008zm7.347-8.993c2.1.084 4.175.898 5.813 2.444l.19.185.225.234.096.104.118.133a8.862 8.862 0 012.04 4.216l.043.25c.071.44.109.886.114 1.332h-.007l.001.095h-2.008a6.955 6.955 0 00-1.245-4.005l-.186-.254-.094-.12a7 7 0 00-10.238-.737l-.173.166 1.414 1.414-4.872.63.63-4.872 1.414 1.414a8.976 8.976 0 016.725-2.629z\"\n        clipRule=\"evenodd\"\n      />\n      <path d=\"M13 17h-2v-1H9v-2h4v-1h-3a1 1 0 01-1-1V9a1 1 0 011-1h1V7h2v1h2v2h-4v1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1v1z\" />\n    </svg>\n  )\n);\nRecurringDollarIcon.displayName = \"RecurringDollarIcon\";\nexport default RecurringDollarIcon;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,YAAY,QAAQ,oBAAoB;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,mBAAmB,gBAAGF,KAAK,CAACG,UAAU,CAC1C,CAAAC,IAAA,EAOEC,MAAiC;EAAA,IANjC;IACEC,QAAQ;IACR,GAAGC;EAGL,CAAC,GAAAH,IAAA;EAAA,oBAGDJ,KAAA,CAAAQ,aAAA,QAAAC,QAAA;IACEC,KAAK,EAAC,4BAA4B;IAClCC,KAAK,EAAE,EAAG;IACVC,MAAM,EAAE,EAAG;IACX,eAAY,qBAAqB;IACjCC,IAAI,EACFP,QAAQ,GACJ,qBAAqB,GACrBC,KAAK,YAALA,KAAK,CAAEM,IAAI,GACXN,KAAK,CAACM,IAAI,GACV,wBACL;IACDC,SAAS,EAAE,KAAM;IACjBC,GAAG,EAAEV;EAAO,GACRE,KAAK,gBAETP,KAAA,CAAAQ,aAAA,CAACP,YAAY;IAACK,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACpCN,KAAA,CAAAQ,aAAA;IACEQ,QAAQ,EAAC,SAAS;IAClBC,CAAC,EAAC,ggBAAggB;IAClgBC,QAAQ,EAAC;EAAS,CACnB,CAAC,eACFlB,KAAA,CAAAQ,aAAA;IAAMS,CAAC,EAAC;EAA0G,CAAE,CACjH,CAAC;AAAA,CAEV,CAAC;AACDf,mBAAmB,CAACiB,WAAW,GAAG,qBAAqB;AACvD,eAAejB,mBAAmB"}

package/dist/esm/components/Icons/collection/RecurringSmall.d.ts

@@ -7,6 +7,13 @@ import React from "react";
  * The Icon component is
  * customizable, allowing for variations in size, color, and style to fit the needs of the application.
  *
+ * @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
+ * Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
+ *
+ * @example
+ * return (
+ * <RecurringSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
+ * )
  *
  * @example
  * return (
@@ -18,6 +25,8 @@ import React from "react";
  * @see
  * https://design.activecollab.com/docs/foundations/icons
  */
-declare const RecurringSmallIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const RecurringSmallIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & {
+    gradient?: string | undefined;
+}, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default RecurringSmallIcon;
 //# sourceMappingURL=RecurringSmall.d.ts.map

package/dist/esm/components/Icons/collection/RecurringSmall.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RecurringSmall.d.ts","sourceRoot":"","sources":["../../../../../src/components/Icons/collection/RecurringSmall.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,kBAAkB,kHAoBvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"RecurringSmall.d.ts","sourceRoot":"","sources":["../../../../../src/components/Icons/collection/RecurringSmall.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,kBAAkB;;+CAmCvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/esm/components/Icons/collection/RecurringSmall.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component RecurringSmallIcon
@@ -9,6 +10,13 @@ import React from "react";
  * The Icon component is
  * customizable, allowing for variations in size, color, and style to fit the needs of the application.
  *
+ * @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
+ * Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
+ *
+ * @example
+ * return (
+ * <RecurringSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
+ * )
  *
  * @example
  * return (
@@ -20,20 +28,28 @@ import React from "react";
  * @see
  * https://design.activecollab.com/docs/foundations/icons
  */
-const RecurringSmallIcon = /*#__PURE__*/React.forwardRef((props, svgRef) => /*#__PURE__*/React.createElement("svg", _extends({
-  width: 12,
-  height: 12,
-  viewBox: "0 0 12 12",
-  xmlns: "http://www.w3.org/2000/svg",
-  "data-testid": "RecurringSmallIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M9.182 2.818l.113.117.107.119a4.43 4.43 0 011.02 2.107l.021.125c.036.22.054.444.057.666h-.004l.001.048H9.493a3.475 3.475 0 00-.715-2.13l-.047-.06a3.5 3.5 0 00-5.119-.369l-.087.084.707.707-2.436.315.315-2.436.707.707A4.488 4.488 0 016.18 1.504c1.05.041 2.088.449 2.907 1.222l.095.092zM2.818 9.182a4.446 4.446 0 01-1.249-2.394 4.508 4.508 0 01-.069-.783h.003V6h1.004a3.472 3.472 0 00.913 2.365l.105.11a3.5 3.5 0 004.863.084l.087-.084-.707-.707 2.436-.315-.315 2.436-.707-.707a4.5 4.5 0 01-6.364 0z"
-})));
+const RecurringSmallIcon = /*#__PURE__*/React.forwardRef((_ref, svgRef) => {
+  let {
+    gradient,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 12,
+    height: 12,
+    viewBox: "0 0 12 12",
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": "RecurringSmallIcon",
+    fill: gradient ? "url(#icon-gradient)" : props != null && props.fill ? props.fill : "var(--color-theme-600)",
+    focusable: false,
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement(GradientDefs, {
+    gradient: gradient
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.182 2.818l.113.117.107.119a4.43 4.43 0 011.02 2.107l.021.125c.036.22.054.444.057.666h-.004l.001.048H9.493a3.475 3.475 0 00-.715-2.13l-.047-.06a3.5 3.5 0 00-5.119-.369l-.087.084.707.707-2.436.315.315-2.436.707.707A4.488 4.488 0 016.18 1.504c1.05.041 2.088.449 2.907 1.222l.095.092zM2.818 9.182a4.446 4.446 0 01-1.249-2.394 4.508 4.508 0 01-.069-.783h.003V6h1.004a3.472 3.472 0 00.913 2.365l.105.11a3.5 3.5 0 004.863.084l.087-.084-.707-.707 2.436-.315-.315 2.436-.707-.707a4.5 4.5 0 01-6.364 0z"
+  }));
+});
 RecurringSmallIcon.displayName = "RecurringSmallIcon";
 export default RecurringSmallIcon;
 //# sourceMappingURL=RecurringSmall.js.map

package/dist/esm/components/Icons/collection/RecurringSmall.js.map

@@ -1 +1 @@
-{"version":3,"file":"RecurringSmall.js","names":["React","RecurringSmallIcon","forwardRef","props","svgRef","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","fillRule","clipRule","d","displayName"],"sources":["../../../../../src/components/Icons/collection/RecurringSmall.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component RecurringSmallIcon\n * @description\n *\n * The React Icon component is a visual element that displays an icon to represent a concept, object, or action.\n * The Icon component is\n * customizable, allowing for variations in size, color, and style to fit the needs of the application.\n *\n *\n * @example\n * return (\n *   <RecurringSmallIcon className=\"mr-2\" />\n * )\n *\n * @see\n * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons\n * @see\n * https://design.activecollab.com/docs/foundations/icons\n */\nconst RecurringSmallIcon = React.forwardRef(\n  (props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>) => (\n    <svg\n      width={12}\n      height={12}\n      viewBox=\"0 0 12 12\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      data-testid=\"RecurringSmallIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M9.182 2.818l.113.117.107.119a4.43 4.43 0 011.02 2.107l.021.125c.036.22.054.444.057.666h-.004l.001.048H9.493a3.475 3.475 0 00-.715-2.13l-.047-.06a3.5 3.5 0 00-5.119-.369l-.087.084.707.707-2.436.315.315-2.436.707.707A4.488 4.488 0 016.18 1.504c1.05.041 2.088.449 2.907 1.222l.095.092zM2.818 9.182a4.446 4.446 0 01-1.249-2.394 4.508 4.508 0 01-.069-.783h.003V6h1.004a3.472 3.472 0 00.913 2.365l.105.11a3.5 3.5 0 004.863.084l.087-.084-.707-.707 2.436-.315-.315 2.436-.707-.707a4.5 4.5 0 01-6.364 0z\"\n      />\n    </svg>\n  )\n);\nRecurringSmallIcon.displayName = \"RecurringSmallIcon\";\nexport default RecurringSmallIcon;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,kBAAkB,gBAAGD,KAAK,CAACE,UAAU,CACzC,CAACC,KAAoC,EAAEC,MAAiC,kBACtEJ,KAAA,CAAAK,aAAA,QAAAC,QAAA;EACEC,KAAK,EAAE,EAAG;EACVC,MAAM,EAAE,EAAG;EACXC,OAAO,EAAC,WAAW;EACnBC,KAAK,EAAC,4BAA4B;EAClC,eAAY,oBAAoB;EAChCC,IAAI,EAAC,wBAAwB;EAC7BC,SAAS,EAAE,KAAM;EACjBC,GAAG,EAAET;AAAO,GACRD,KAAK,gBAETH,KAAA,CAAAK,aAAA;EACES,QAAQ,EAAC,SAAS;EAClBC,QAAQ,EAAC,SAAS;EAClBC,CAAC,EAAC;AAAif,CACpf,CACE,CAET,CAAC;AACDf,kBAAkB,CAACgB,WAAW,GAAG,oBAAoB;AACrD,eAAehB,kBAAkB"}
+{"version":3,"file":"RecurringSmall.js","names":["React","GradientDefs","RecurringSmallIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","fillRule","clipRule","d","displayName"],"sources":["../../../../../src/components/Icons/collection/RecurringSmall.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component RecurringSmallIcon\n * @description\n *\n * The React Icon component is a visual element that displays an icon to represent a concept, object, or action.\n * The Icon component is\n * customizable, allowing for variations in size, color, and style to fit the needs of the application.\n *\n * @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.\n * Format: \"linear-gradient(<angle>deg, <color1>, <color2>, ...)\"\n *\n * @example\n * return (\n * <RecurringSmallIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <RecurringSmallIcon className=\"mr-2\" />\n * )\n *\n * @see\n * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons\n * @see\n * https://design.activecollab.com/docs/foundations/icons\n */\nconst RecurringSmallIcon = React.forwardRef(\n  (\n    {\n      gradient,\n      ...props\n    }: React.SVGProps<SVGSVGElement> & {\n      gradient?: string;\n    },\n    svgRef?: React.Ref<SVGSVGElement>\n  ) => (\n    <svg\n      width={12}\n      height={12}\n      viewBox=\"0 0 12 12\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      data-testid=\"RecurringSmallIcon\"\n      fill={\n        gradient\n          ? \"url(#icon-gradient)\"\n          : props?.fill\n          ? props.fill\n          : \"var(--color-theme-600)\"\n      }\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <GradientDefs gradient={gradient} />\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M9.182 2.818l.113.117.107.119a4.43 4.43 0 011.02 2.107l.021.125c.036.22.054.444.057.666h-.004l.001.048H9.493a3.475 3.475 0 00-.715-2.13l-.047-.06a3.5 3.5 0 00-5.119-.369l-.087.084.707.707-2.436.315.315-2.436.707.707A4.488 4.488 0 016.18 1.504c1.05.041 2.088.449 2.907 1.222l.095.092zM2.818 9.182a4.446 4.446 0 01-1.249-2.394 4.508 4.508 0 01-.069-.783h.003V6h1.004a3.472 3.472 0 00.913 2.365l.105.11a3.5 3.5 0 004.863.084l.087-.084-.707-.707 2.436-.315-.315 2.436-.707-.707a4.5 4.5 0 01-6.364 0z\"\n      />\n    </svg>\n  )\n);\nRecurringSmallIcon.displayName = \"RecurringSmallIcon\";\nexport default RecurringSmallIcon;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,YAAY,QAAQ,oBAAoB;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,kBAAkB,gBAAGF,KAAK,CAACG,UAAU,CACzC,CAAAC,IAAA,EAOEC,MAAiC;EAAA,IANjC;IACEC,QAAQ;IACR,GAAGC;EAGL,CAAC,GAAAH,IAAA;EAAA,oBAGDJ,KAAA,CAAAQ,aAAA,QAAAC,QAAA;IACEC,KAAK,EAAE,EAAG;IACVC,MAAM,EAAE,EAAG;IACXC,OAAO,EAAC,WAAW;IACnBC,KAAK,EAAC,4BAA4B;IAClC,eAAY,oBAAoB;IAChCC,IAAI,EACFR,QAAQ,GACJ,qBAAqB,GACrBC,KAAK,YAALA,KAAK,CAAEO,IAAI,GACXP,KAAK,CAACO,IAAI,GACV,wBACL;IACDC,SAAS,EAAE,KAAM;IACjBC,GAAG,EAAEX;EAAO,GACRE,KAAK,gBAETP,KAAA,CAAAQ,aAAA,CAACP,YAAY;IAACK,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACpCN,KAAA,CAAAQ,aAAA;IACES,QAAQ,EAAC,SAAS;IAClBC,QAAQ,EAAC,SAAS;IAClBC,CAAC,EAAC;EAAif,CACpf,CACE,CAAC;AAAA,CAEV,CAAC;AACDjB,kBAAkB,CAACkB,WAAW,GAAG,oBAAoB;AACrD,eAAelB,kBAAkB"}

package/dist/esm/components/Icons/collection/ReportTime.d.ts

@@ -7,6 +7,13 @@ import React from "react";
  * The Icon component is
  * customizable, allowing for variations in size, color, and style to fit the needs of the application.
  *
+ * @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
+ * Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
+ *
+ * @example
+ * return (
+ * <ReportTimeIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
+ * )
  *
  * @example
  * return (
@@ -18,6 +25,8 @@ import React from "react";
  * @see
  * https://design.activecollab.com/docs/foundations/icons
  */
-declare const ReportTimeIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const ReportTimeIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & {
+    gradient?: string | undefined;
+}, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default ReportTimeIcon;
 //# sourceMappingURL=ReportTime.d.ts.map

package/dist/esm/components/Icons/collection/ReportTime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReportTime.d.ts","sourceRoot":"","sources":["../../../../../src/components/Icons/collection/ReportTime.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,cAAc,kHAmBnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ReportTime.d.ts","sourceRoot":"","sources":["../../../../../src/components/Icons/collection/ReportTime.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,cAAc;;+CAkCnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/esm/components/Icons/collection/ReportTime.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component ReportTimeIcon
@@ -9,6 +10,13 @@ import React from "react";
  * The Icon component is
  * customizable, allowing for variations in size, color, and style to fit the needs of the application.
  *
+ * @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
+ * Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
+ *
+ * @example
+ * return (
+ * <ReportTimeIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
+ * )
  *
  * @example
  * return (
@@ -20,19 +28,27 @@ import React from "react";
  * @see
  * https://design.activecollab.com/docs/foundations/icons
  */
-const ReportTimeIcon = /*#__PURE__*/React.forwardRef((props, svgRef) => /*#__PURE__*/React.createElement("svg", _extends({
-  width: 24,
-  height: 24,
-  viewBox: "0 0 24 24",
-  xmlns: "http://www.w3.org/2000/svg",
-  "data-testid": "ReportTimeIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M15 9a7 7 0 110 14 7 7 0 010-14zm-3-9c1.235 0 2.29.758 2.752 1.828L14.82 2H19c1.05 0 1.918.82 1.994 1.851L21 4v5.292a9.017 9.017 0 00-1.999-1.356L19 4h-2v3H7V4H5v16l1.936.001c.362.728.82 1.4 1.356 2L5 22c-1.05 0-1.918-.82-1.994-1.851L3 20V4c0-1.05.82-1.918 1.851-1.994L5 2h4.18C9.6.84 10.7 0 12 0zm3 11a5 5 0 100 10 5 5 0 000-10zm1 2v1.999L19 15v2h-5v-4h2zM12 2c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z",
-  fillRule: "evenodd"
-})));
+const ReportTimeIcon = /*#__PURE__*/React.forwardRef((_ref, svgRef) => {
+  let {
+    gradient,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": "ReportTimeIcon",
+    fill: gradient ? "url(#icon-gradient)" : props != null && props.fill ? props.fill : "var(--color-theme-600)",
+    focusable: false,
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement(GradientDefs, {
+    gradient: gradient
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M15 9a7 7 0 110 14 7 7 0 010-14zm-3-9c1.235 0 2.29.758 2.752 1.828L14.82 2H19c1.05 0 1.918.82 1.994 1.851L21 4v5.292a9.017 9.017 0 00-1.999-1.356L19 4h-2v3H7V4H5v16l1.936.001c.362.728.82 1.4 1.356 2L5 22c-1.05 0-1.918-.82-1.994-1.851L3 20V4c0-1.05.82-1.918 1.851-1.994L5 2h4.18C9.6.84 10.7 0 12 0zm3 11a5 5 0 100 10 5 5 0 000-10zm1 2v1.999L19 15v2h-5v-4h2zM12 2c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z",
+    fillRule: "evenodd"
+  }));
+});
 ReportTimeIcon.displayName = "ReportTimeIcon";
 export default ReportTimeIcon;
 //# sourceMappingURL=ReportTime.js.map

package/dist/esm/components/Icons/collection/ReportTime.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReportTime.js","names":["React","ReportTimeIcon","forwardRef","props","svgRef","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/ReportTime.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component ReportTimeIcon\n * @description\n *\n * The React Icon component is a visual element that displays an icon to represent a concept, object, or action.\n * The Icon component is\n * customizable, allowing for variations in size, color, and style to fit the needs of the application.\n *\n *\n * @example\n * return (\n *   <ReportTimeIcon className=\"mr-2\" />\n * )\n *\n * @see\n * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons\n * @see\n * https://design.activecollab.com/docs/foundations/icons\n */\nconst ReportTimeIcon = React.forwardRef(\n  (props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>) => (\n    <svg\n      width={24}\n      height={24}\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      data-testid=\"ReportTimeIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path\n        d=\"M15 9a7 7 0 110 14 7 7 0 010-14zm-3-9c1.235 0 2.29.758 2.752 1.828L14.82 2H19c1.05 0 1.918.82 1.994 1.851L21 4v5.292a9.017 9.017 0 00-1.999-1.356L19 4h-2v3H7V4H5v16l1.936.001c.362.728.82 1.4 1.356 2L5 22c-1.05 0-1.918-.82-1.994-1.851L3 20V4c0-1.05.82-1.918 1.851-1.994L5 2h4.18C9.6.84 10.7 0 12 0zm3 11a5 5 0 100 10 5 5 0 000-10zm1 2v1.999L19 15v2h-5v-4h2zM12 2c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  )\n);\nReportTimeIcon.displayName = \"ReportTimeIcon\";\nexport default ReportTimeIcon;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,cAAc,gBAAGD,KAAK,CAACE,UAAU,CACrC,CAACC,KAAoC,EAAEC,MAAiC,kBACtEJ,KAAA,CAAAK,aAAA,QAAAC,QAAA;EACEC,KAAK,EAAE,EAAG;EACVC,MAAM,EAAE,EAAG;EACXC,OAAO,EAAC,WAAW;EACnBC,KAAK,EAAC,4BAA4B;EAClC,eAAY,gBAAgB;EAC5BC,IAAI,EAAC,wBAAwB;EAC7BC,SAAS,EAAE,KAAM;EACjBC,GAAG,EAAET;AAAO,GACRD,KAAK,gBAETH,KAAA,CAAAK,aAAA;EACES,CAAC,EAAC,2ZAA2Z;EAC7ZC,QAAQ,EAAC;AAAS,CACnB,CACE,CAET,CAAC;AACDd,cAAc,CAACe,WAAW,GAAG,gBAAgB;AAC7C,eAAef,cAAc"}
+{"version":3,"file":"ReportTime.js","names":["React","GradientDefs","ReportTimeIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/ReportTime.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component ReportTimeIcon\n * @description\n *\n * The React Icon component is a visual element that displays an icon to represent a concept, object, or action.\n * The Icon component is\n * customizable, allowing for variations in size, color, and style to fit the needs of the application.\n *\n * @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.\n * Format: \"linear-gradient(<angle>deg, <color1>, <color2>, ...)\"\n *\n * @example\n * return (\n * <ReportTimeIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <ReportTimeIcon className=\"mr-2\" />\n * )\n *\n * @see\n * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons\n * @see\n * https://design.activecollab.com/docs/foundations/icons\n */\nconst ReportTimeIcon = React.forwardRef(\n  (\n    {\n      gradient,\n      ...props\n    }: React.SVGProps<SVGSVGElement> & {\n      gradient?: string;\n    },\n    svgRef?: React.Ref<SVGSVGElement>\n  ) => (\n    <svg\n      width={24}\n      height={24}\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      data-testid=\"ReportTimeIcon\"\n      fill={\n        gradient\n          ? \"url(#icon-gradient)\"\n          : props?.fill\n          ? props.fill\n          : \"var(--color-theme-600)\"\n      }\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <GradientDefs gradient={gradient} />\n      <path\n        d=\"M15 9a7 7 0 110 14 7 7 0 010-14zm-3-9c1.235 0 2.29.758 2.752 1.828L14.82 2H19c1.05 0 1.918.82 1.994 1.851L21 4v5.292a9.017 9.017 0 00-1.999-1.356L19 4h-2v3H7V4H5v16l1.936.001c.362.728.82 1.4 1.356 2L5 22c-1.05 0-1.918-.82-1.994-1.851L3 20V4c0-1.05.82-1.918 1.851-1.994L5 2h4.18C9.6.84 10.7 0 12 0zm3 11a5 5 0 100 10 5 5 0 000-10zm1 2v1.999L19 15v2h-5v-4h2zM12 2c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  )\n);\nReportTimeIcon.displayName = \"ReportTimeIcon\";\nexport default ReportTimeIcon;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,YAAY,QAAQ,oBAAoB;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,cAAc,gBAAGF,KAAK,CAACG,UAAU,CACrC,CAAAC,IAAA,EAOEC,MAAiC;EAAA,IANjC;IACEC,QAAQ;IACR,GAAGC;EAGL,CAAC,GAAAH,IAAA;EAAA,oBAGDJ,KAAA,CAAAQ,aAAA,QAAAC,QAAA;IACEC,KAAK,EAAE,EAAG;IACVC,MAAM,EAAE,EAAG;IACXC,OAAO,EAAC,WAAW;IACnBC,KAAK,EAAC,4BAA4B;IAClC,eAAY,gBAAgB;IAC5BC,IAAI,EACFR,QAAQ,GACJ,qBAAqB,GACrBC,KAAK,YAALA,KAAK,CAAEO,IAAI,GACXP,KAAK,CAACO,IAAI,GACV,wBACL;IACDC,SAAS,EAAE,KAAM;IACjBC,GAAG,EAAEX;EAAO,GACRE,KAAK,gBAETP,KAAA,CAAAQ,aAAA,CAACP,YAAY;IAACK,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACpCN,KAAA,CAAAQ,aAAA;IACES,CAAC,EAAC,2ZAA2Z;IAC7ZC,QAAQ,EAAC;EAAS,CACnB,CACE,CAAC;AAAA,CAEV,CAAC;AACDhB,cAAc,CAACiB,WAAW,GAAG,gBAAgB;AAC7C,eAAejB,cAAc"}

package/dist/esm/components/Icons/collection/Reports.d.ts

@@ -7,6 +7,13 @@ import React from "react";
  * The Icon component is
  * customizable, allowing for variations in size, color, and style to fit the needs of the application.
  *
+ * @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
+ * Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
+ *
+ * @example
+ * return (
+ * <ReportsIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
+ * )
  *
  * @example
  * return (
@@ -18,6 +25,8 @@ import React from "react";
  * @see
  * https://design.activecollab.com/docs/foundations/icons
  */
-declare const ReportsIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const ReportsIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & {
+    gradient?: string | undefined;
+}, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default ReportsIcon;
 //# sourceMappingURL=Reports.d.ts.map

package/dist/esm/components/Icons/collection/Reports.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Reports.d.ts","sourceRoot":"","sources":["../../../../../src/components/Icons/collection/Reports.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,WAAW,kHAsBhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"Reports.d.ts","sourceRoot":"","sources":["../../../../../src/components/Icons/collection/Reports.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,WAAW;;+CAqChB,CAAC;AAEF,eAAe,WAAW,CAAC"}