@activecollab/components 2.0.222 → 2.0.223

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component ReportsIcon
@@ -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 (
+ * <ReportsIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
+ * )
  *
  * @example
  * return (
@@ -20,23 +28,31 @@ import React from "react";
  * @see
  * https://design.activecollab.com/docs/foundations/icons
  */
-const ReportsIcon = /*#__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": "ReportsIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M17 6v2H7V6H6v15h12V6h-1zm0-2h1a2 2 0 012 2v15a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h1V3h2c.336-2 1.336-3 3-3s2.664 1 3 3h2v1zM8 16h2v3H8v-3zm3-3h2v6h-2v-6zm3-3h2v9h-2v-9zm-1-5V3.332C13 2.327 12.61 2 12 2s-1 .303-1 1.332V5H9v1h6V5h-2z"
-}), /*#__PURE__*/React.createElement("path", {
-  stroke: "#F4F5F7",
-  strokeWidth: 0.1,
-  opacity: 0.01,
-  d: "M.05.05h23.9v23.9H.05z"
-})));
+const ReportsIcon = /*#__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": "ReportsIcon",
+    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: "M17 6v2H7V6H6v15h12V6h-1zm0-2h1a2 2 0 012 2v15a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h1V3h2c.336-2 1.336-3 3-3s2.664 1 3 3h2v1zM8 16h2v3H8v-3zm3-3h2v6h-2v-6zm3-3h2v9h-2v-9zm-1-5V3.332C13 2.327 12.61 2 12 2s-1 .303-1 1.332V5H9v1h6V5h-2z"
+  }), /*#__PURE__*/React.createElement("path", {
+    stroke: "#F4F5F7",
+    strokeWidth: 0.1,
+    opacity: 0.01,
+    d: "M.05.05h23.9v23.9H.05z"
+  }));
+});
 ReportsIcon.displayName = "ReportsIcon";
 export default ReportsIcon;
 //# sourceMappingURL=Reports.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Reports.js","names":["React","ReportsIcon","forwardRef","props","svgRef","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","stroke","strokeWidth","opacity","displayName"],"sources":["../../../../../src/components/Icons/collection/Reports.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component ReportsIcon\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 *   <ReportsIcon 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 ReportsIcon = 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=\"ReportsIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path d=\"M17 6v2H7V6H6v15h12V6h-1zm0-2h1a2 2 0 012 2v15a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h1V3h2c.336-2 1.336-3 3-3s2.664 1 3 3h2v1zM8 16h2v3H8v-3zm3-3h2v6h-2v-6zm3-3h2v9h-2v-9zm-1-5V3.332C13 2.327 12.61 2 12 2s-1 .303-1 1.332V5H9v1h6V5h-2z\" />\n      <path\n        stroke=\"#F4F5F7\"\n        strokeWidth={0.1}\n        opacity={0.01}\n        d=\"M.05.05h23.9v23.9H.05z\"\n      />\n    </svg>\n  )\n);\nReportsIcon.displayName = \"ReportsIcon\";\nexport default ReportsIcon;\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,WAAW,gBAAGD,KAAK,CAACE,UAAU,CAClC,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,aAAa;EACzBC,IAAI,EAAC,wBAAwB;EAC7BC,SAAS,EAAE,KAAM;EACjBC,GAAG,EAAET;AAAO,GACRD,KAAK,gBAETH,KAAA,CAAAK,aAAA;EAAMS,CAAC,EAAC;AAAgP,CAAE,CAAC,eAC3Pd,KAAA,CAAAK,aAAA;EACEU,MAAM,EAAC,SAAS;EAChBC,WAAW,EAAE,GAAI;EACjBC,OAAO,EAAE,IAAK;EACdH,CAAC,EAAC;AAAwB,CAC3B,CACE,CAET,CAAC;AACDb,WAAW,CAACiB,WAAW,GAAG,aAAa;AACvC,eAAejB,WAAW"}
+{"version":3,"file":"Reports.js","names":["React","GradientDefs","ReportsIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","stroke","strokeWidth","opacity","displayName"],"sources":["../../../../../src/components/Icons/collection/Reports.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component ReportsIcon\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 * <ReportsIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <ReportsIcon 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 ReportsIcon = 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=\"ReportsIcon\"\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 d=\"M17 6v2H7V6H6v15h12V6h-1zm0-2h1a2 2 0 012 2v15a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h1V3h2c.336-2 1.336-3 3-3s2.664 1 3 3h2v1zM8 16h2v3H8v-3zm3-3h2v6h-2v-6zm3-3h2v9h-2v-9zm-1-5V3.332C13 2.327 12.61 2 12 2s-1 .303-1 1.332V5H9v1h6V5h-2z\" />\n      <path\n        stroke=\"#F4F5F7\"\n        strokeWidth={0.1}\n        opacity={0.01}\n        d=\"M.05.05h23.9v23.9H.05z\"\n      />\n    </svg>\n  )\n);\nReportsIcon.displayName = \"ReportsIcon\";\nexport default ReportsIcon;\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,WAAW,gBAAGF,KAAK,CAACG,UAAU,CAClC,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,aAAa;IACzBC,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;IAAMS,CAAC,EAAC;EAAgP,CAAE,CAAC,eAC3PjB,KAAA,CAAAQ,aAAA;IACEU,MAAM,EAAC,SAAS;IAChBC,WAAW,EAAE,GAAI;IACjBC,OAAO,EAAE,IAAK;IACdH,CAAC,EAAC;EAAwB,CAC3B,CACE,CAAC;AAAA,CAEV,CAAC;AACDf,WAAW,CAACmB,WAAW,GAAG,aAAa;AACvC,eAAenB,WAAW"}

package/dist/esm/components/Icons/collection/Rocket.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 (
+ * <RocketIcon 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 RocketIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const RocketIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & {
+    gradient?: string | undefined;
+}, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default RocketIcon;
 //# sourceMappingURL=Rocket.d.ts.map

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

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

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component RocketIcon
@@ -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 (
+ * <RocketIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
+ * )
  *
  * @example
  * return (
@@ -20,18 +28,26 @@ import React from "react";
  * @see
  * https://design.activecollab.com/docs/foundations/icons
  */
-const RocketIcon = /*#__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": "RocketIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M15.2 17.8H4v-4l2.437-3.046A17.833 17.833 0 016.4 9.637C6.4 6.772 8.8 3.36 12 1c3.2 2.36 5.6 5.772 5.6 8.637 0 .354-.012.73-.037 1.117L20 13.8v4h-4.8zm1.186-1.6H18.4v-1.839l-1.1-1.374c-.202 1.171-.507 2.312-.915 3.213zm-8.771 0c-.408-.901-.713-2.042-.916-3.213L5.6 14.361V16.2h2.015zm7.97 3.2L12 23.4l-3.585-4h7.17zM12 21l1.536-1.6h-3.072L12 21zM8 9.637c0 2.61.694 5.579 1.42 6.563h5.16c.726-.984 1.42-3.952 1.42-6.563 0-1.93-1.57-4.51-4-6.594-2.43 2.084-4 4.664-4 6.594zm4 .963a1.6 1.6 0 110-3.2 1.6 1.6 0 010 3.2z"
-})));
+const RocketIcon = /*#__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": "RocketIcon",
+    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.2 17.8H4v-4l2.437-3.046A17.833 17.833 0 016.4 9.637C6.4 6.772 8.8 3.36 12 1c3.2 2.36 5.6 5.772 5.6 8.637 0 .354-.012.73-.037 1.117L20 13.8v4h-4.8zm1.186-1.6H18.4v-1.839l-1.1-1.374c-.202 1.171-.507 2.312-.915 3.213zm-8.771 0c-.408-.901-.713-2.042-.916-3.213L5.6 14.361V16.2h2.015zm7.97 3.2L12 23.4l-3.585-4h7.17zM12 21l1.536-1.6h-3.072L12 21zM8 9.637c0 2.61.694 5.579 1.42 6.563h5.16c.726-.984 1.42-3.952 1.42-6.563 0-1.93-1.57-4.51-4-6.594-2.43 2.084-4 4.664-4 6.594zm4 .963a1.6 1.6 0 110-3.2 1.6 1.6 0 010 3.2z"
+  }));
+});
 RocketIcon.displayName = "RocketIcon";
 export default RocketIcon;
 //# sourceMappingURL=Rocket.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Rocket.js","names":["React","RocketIcon","forwardRef","props","svgRef","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","displayName"],"sources":["../../../../../src/components/Icons/collection/Rocket.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component RocketIcon\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 *   <RocketIcon 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 RocketIcon = 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=\"RocketIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path d=\"M15.2 17.8H4v-4l2.437-3.046A17.833 17.833 0 016.4 9.637C6.4 6.772 8.8 3.36 12 1c3.2 2.36 5.6 5.772 5.6 8.637 0 .354-.012.73-.037 1.117L20 13.8v4h-4.8zm1.186-1.6H18.4v-1.839l-1.1-1.374c-.202 1.171-.507 2.312-.915 3.213zm-8.771 0c-.408-.901-.713-2.042-.916-3.213L5.6 14.361V16.2h2.015zm7.97 3.2L12 23.4l-3.585-4h7.17zM12 21l1.536-1.6h-3.072L12 21zM8 9.637c0 2.61.694 5.579 1.42 6.563h5.16c.726-.984 1.42-3.952 1.42-6.563 0-1.93-1.57-4.51-4-6.594-2.43 2.084-4 4.664-4 6.594zm4 .963a1.6 1.6 0 110-3.2 1.6 1.6 0 010 3.2z\" />\n    </svg>\n  )\n);\nRocketIcon.displayName = \"RocketIcon\";\nexport default RocketIcon;\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,UAAU,gBAAGD,KAAK,CAACE,UAAU,CACjC,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,YAAY;EACxBC,IAAI,EAAC,wBAAwB;EAC7BC,SAAS,EAAE,KAAM;EACjBC,GAAG,EAAET;AAAO,GACRD,KAAK,gBAETH,KAAA,CAAAK,aAAA;EAAMS,CAAC,EAAC;AAAqgB,CAAE,CAC5gB,CAET,CAAC;AACDb,UAAU,CAACc,WAAW,GAAG,YAAY;AACrC,eAAed,UAAU"}
+{"version":3,"file":"Rocket.js","names":["React","GradientDefs","RocketIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","displayName"],"sources":["../../../../../src/components/Icons/collection/Rocket.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component RocketIcon\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 * <RocketIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <RocketIcon 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 RocketIcon = 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=\"RocketIcon\"\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 d=\"M15.2 17.8H4v-4l2.437-3.046A17.833 17.833 0 016.4 9.637C6.4 6.772 8.8 3.36 12 1c3.2 2.36 5.6 5.772 5.6 8.637 0 .354-.012.73-.037 1.117L20 13.8v4h-4.8zm1.186-1.6H18.4v-1.839l-1.1-1.374c-.202 1.171-.507 2.312-.915 3.213zm-8.771 0c-.408-.901-.713-2.042-.916-3.213L5.6 14.361V16.2h2.015zm7.97 3.2L12 23.4l-3.585-4h7.17zM12 21l1.536-1.6h-3.072L12 21zM8 9.637c0 2.61.694 5.579 1.42 6.563h5.16c.726-.984 1.42-3.952 1.42-6.563 0-1.93-1.57-4.51-4-6.594-2.43 2.084-4 4.664-4 6.594zm4 .963a1.6 1.6 0 110-3.2 1.6 1.6 0 010 3.2z\" />\n    </svg>\n  )\n);\nRocketIcon.displayName = \"RocketIcon\";\nexport default RocketIcon;\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,UAAU,gBAAGF,KAAK,CAACG,UAAU,CACjC,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,YAAY;IACxBC,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;IAAMS,CAAC,EAAC;EAAqgB,CAAE,CAC5gB,CAAC;AAAA,CAEV,CAAC;AACDf,UAAU,CAACgB,WAAW,GAAG,YAAY;AACrC,eAAehB,UAAU"}

package/dist/esm/components/Icons/collection/RocketSmall.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 (
+ * <RocketSmallIcon 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 RocketSmallIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const RocketSmallIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & {
+    gradient?: string | undefined;
+}, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default RocketSmallIcon;
 //# sourceMappingURL=RocketSmall.d.ts.map

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

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

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component RocketSmallIcon
@@ -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 (
+ * <RocketSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
+ * )
  *
  * @example
  * return (
@@ -20,17 +28,25 @@ import React from "react";
  * @see
  * https://design.activecollab.com/docs/foundations/icons
  */
-const RocketSmallIcon = /*#__PURE__*/React.forwardRef((props, svgRef) => /*#__PURE__*/React.createElement("svg", _extends({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 18,
-  height: 18,
-  "data-testid": "RocketSmallIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M11.4 13.35H3v-3l1.828-2.284a12.928 12.928 0 01-.028-.838C4.8 5.079 6.6 2.52 9 .75c2.4 1.77 4.2 4.33 4.2 6.478 0 .265-.01.547-.027.838L15 10.35v3h-3.6zm.89-1.2h1.51v-1.38l-.825-1.03c-.151.878-.38 1.734-.686 2.41zm-6.58 0c-.305-.676-.534-1.532-.685-2.41L4.2 10.77v1.38h1.51zm5.978 2.4L9 17.55l-2.688-3h5.376zM9 15.75l1.152-1.2H7.848L9 15.75zM6 7.228c0 1.958.52 4.184 1.065 4.922h3.87C11.48 11.412 12 9.186 12 7.228c0-1.448-1.178-3.383-3-4.945C7.178 3.845 6 5.78 6 7.228zm3 .722a1.2 1.2 0 110-2.4 1.2 1.2 0 010 2.4z"
-})));
+const RocketSmallIcon = /*#__PURE__*/React.forwardRef((_ref, svgRef) => {
+  let {
+    gradient,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    "data-testid": "RocketSmallIcon",
+    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: "M11.4 13.35H3v-3l1.828-2.284a12.928 12.928 0 01-.028-.838C4.8 5.079 6.6 2.52 9 .75c2.4 1.77 4.2 4.33 4.2 6.478 0 .265-.01.547-.027.838L15 10.35v3h-3.6zm.89-1.2h1.51v-1.38l-.825-1.03c-.151.878-.38 1.734-.686 2.41zm-6.58 0c-.305-.676-.534-1.532-.685-2.41L4.2 10.77v1.38h1.51zm5.978 2.4L9 17.55l-2.688-3h5.376zM9 15.75l1.152-1.2H7.848L9 15.75zM6 7.228c0 1.958.52 4.184 1.065 4.922h3.87C11.48 11.412 12 9.186 12 7.228c0-1.448-1.178-3.383-3-4.945C7.178 3.845 6 5.78 6 7.228zm3 .722a1.2 1.2 0 110-2.4 1.2 1.2 0 010 2.4z"
+  }));
+});
 RocketSmallIcon.displayName = "RocketSmallIcon";
 export default RocketSmallIcon;
 //# sourceMappingURL=RocketSmall.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RocketSmall.js","names":["React","RocketSmallIcon","forwardRef","props","svgRef","createElement","_extends","xmlns","width","height","fill","focusable","ref","d","displayName"],"sources":["../../../../../src/components/Icons/collection/RocketSmall.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component RocketSmallIcon\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 *   <RocketSmallIcon 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 RocketSmallIcon = React.forwardRef(\n  (props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>) => (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={18}\n      height={18}\n      data-testid=\"RocketSmallIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path d=\"M11.4 13.35H3v-3l1.828-2.284a12.928 12.928 0 01-.028-.838C4.8 5.079 6.6 2.52 9 .75c2.4 1.77 4.2 4.33 4.2 6.478 0 .265-.01.547-.027.838L15 10.35v3h-3.6zm.89-1.2h1.51v-1.38l-.825-1.03c-.151.878-.38 1.734-.686 2.41zm-6.58 0c-.305-.676-.534-1.532-.685-2.41L4.2 10.77v1.38h1.51zm5.978 2.4L9 17.55l-2.688-3h5.376zM9 15.75l1.152-1.2H7.848L9 15.75zM6 7.228c0 1.958.52 4.184 1.065 4.922h3.87C11.48 11.412 12 9.186 12 7.228c0-1.448-1.178-3.383-3-4.945C7.178 3.845 6 5.78 6 7.228zm3 .722a1.2 1.2 0 110-2.4 1.2 1.2 0 010 2.4z\" />\n    </svg>\n  )\n);\nRocketSmallIcon.displayName = \"RocketSmallIcon\";\nexport default RocketSmallIcon;\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,eAAe,gBAAGD,KAAK,CAACE,UAAU,CACtC,CAACC,KAAoC,EAAEC,MAAiC,kBACtEJ,KAAA,CAAAK,aAAA,QAAAC,QAAA;EACEC,KAAK,EAAC,4BAA4B;EAClCC,KAAK,EAAE,EAAG;EACVC,MAAM,EAAE,EAAG;EACX,eAAY,iBAAiB;EAC7BC,IAAI,EAAC,wBAAwB;EAC7BC,SAAS,EAAE,KAAM;EACjBC,GAAG,EAAER;AAAO,GACRD,KAAK,gBAETH,KAAA,CAAAK,aAAA;EAAMQ,CAAC,EAAC;AAAmgB,CAAE,CAC1gB,CAET,CAAC;AACDZ,eAAe,CAACa,WAAW,GAAG,iBAAiB;AAC/C,eAAeb,eAAe"}
+{"version":3,"file":"RocketSmall.js","names":["React","GradientDefs","RocketSmallIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","xmlns","width","height","fill","focusable","ref","d","displayName"],"sources":["../../../../../src/components/Icons/collection/RocketSmall.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component RocketSmallIcon\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 * <RocketSmallIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <RocketSmallIcon 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 RocketSmallIcon = 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={18}\n      height={18}\n      data-testid=\"RocketSmallIcon\"\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 d=\"M11.4 13.35H3v-3l1.828-2.284a12.928 12.928 0 01-.028-.838C4.8 5.079 6.6 2.52 9 .75c2.4 1.77 4.2 4.33 4.2 6.478 0 .265-.01.547-.027.838L15 10.35v3h-3.6zm.89-1.2h1.51v-1.38l-.825-1.03c-.151.878-.38 1.734-.686 2.41zm-6.58 0c-.305-.676-.534-1.532-.685-2.41L4.2 10.77v1.38h1.51zm5.978 2.4L9 17.55l-2.688-3h5.376zM9 15.75l1.152-1.2H7.848L9 15.75zM6 7.228c0 1.958.52 4.184 1.065 4.922h3.87C11.48 11.412 12 9.186 12 7.228c0-1.448-1.178-3.383-3-4.945C7.178 3.845 6 5.78 6 7.228zm3 .722a1.2 1.2 0 110-2.4 1.2 1.2 0 010 2.4z\" />\n    </svg>\n  )\n);\nRocketSmallIcon.displayName = \"RocketSmallIcon\";\nexport default RocketSmallIcon;\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,eAAe,gBAAGF,KAAK,CAACG,UAAU,CACtC,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,iBAAiB;IAC7BC,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;IAAMQ,CAAC,EAAC;EAAmgB,CAAE,CAC1gB,CAAC;AAAA,CAEV,CAAC;AACDd,eAAe,CAACe,WAAW,GAAG,iBAAiB;AAC/C,eAAef,eAAe"}

package/dist/esm/components/Icons/collection/Save.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 (
+ * <SaveIcon 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 SaveIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const SaveIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & {
+    gradient?: string | undefined;
+}, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default SaveIcon;
 //# sourceMappingURL=Save.d.ts.map

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

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

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component SaveIcon
@@ -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 (
+ * <SaveIcon 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 SaveIcon = /*#__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": "SaveIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M17 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14c1.1 0 2-.9 2-2V7l-4-4zm2 16H5V5h11.17L19 7.83V19zm-7-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zM7 7h8v2H7V7z"
-})));
+const SaveIcon = /*#__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": "SaveIcon",
+    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: "M17 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14c1.1 0 2-.9 2-2V7l-4-4zm2 16H5V5h11.17L19 7.83V19zm-7-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zM7 7h8v2H7V7z"
+  }));
+});
 SaveIcon.displayName = "SaveIcon";
 export default SaveIcon;
 //# sourceMappingURL=Save.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Save.js","names":["React","SaveIcon","forwardRef","props","svgRef","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","fillRule","clipRule","d","displayName"],"sources":["../../../../../src/components/Icons/collection/Save.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component SaveIcon\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 *   <SaveIcon 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 SaveIcon = 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=\"SaveIcon\"\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=\"M17 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14c1.1 0 2-.9 2-2V7l-4-4zm2 16H5V5h11.17L19 7.83V19zm-7-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zM7 7h8v2H7V7z\"\n      />\n    </svg>\n  )\n);\nSaveIcon.displayName = \"SaveIcon\";\nexport default SaveIcon;\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,QAAQ,gBAAGD,KAAK,CAACE,UAAU,CAC/B,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,UAAU;EACtBC,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;AAAiK,CACpK,CACE,CAET,CAAC;AACDf,QAAQ,CAACgB,WAAW,GAAG,UAAU;AACjC,eAAehB,QAAQ"}
+{"version":3,"file":"Save.js","names":["React","GradientDefs","SaveIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","fillRule","clipRule","d","displayName"],"sources":["../../../../../src/components/Icons/collection/Save.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component SaveIcon\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 * <SaveIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <SaveIcon 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 SaveIcon = 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=\"SaveIcon\"\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=\"M17 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14c1.1 0 2-.9 2-2V7l-4-4zm2 16H5V5h11.17L19 7.83V19zm-7-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zM7 7h8v2H7V7z\"\n      />\n    </svg>\n  )\n);\nSaveIcon.displayName = \"SaveIcon\";\nexport default SaveIcon;\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,QAAQ,gBAAGF,KAAK,CAACG,UAAU,CAC/B,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,UAAU;IACtBC,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;EAAiK,CACpK,CACE,CAAC;AAAA,CAEV,CAAC;AACDjB,QAAQ,CAACkB,WAAW,GAAG,UAAU;AACjC,eAAelB,QAAQ"}

package/dist/esm/components/Icons/collection/Search.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 (
+ * <SearchIcon 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 SearchIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const SearchIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & {
+    gradient?: string | undefined;
+}, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default SearchIcon;
 //# sourceMappingURL=Search.d.ts.map

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

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

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component SearchIcon
@@ -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 (
+ * <SearchIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
+ * )
  *
  * @example
  * return (
@@ -20,18 +28,26 @@ import React from "react";
  * @see
  * https://design.activecollab.com/docs/foundations/icons
  */
-const SearchIcon = /*#__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": "SearchIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M16.717 15.708a6 6 0 10-1.07 1.056l.602-.46.468-.596zm1.572 1.238l2.883 2.882a1 1 0 01-1.415 1.415l-2.891-2.892a8 8 0 111.423-1.405z"
-})));
+const SearchIcon = /*#__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": "SearchIcon",
+    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: "M16.717 15.708a6 6 0 10-1.07 1.056l.602-.46.468-.596zm1.572 1.238l2.883 2.882a1 1 0 01-1.415 1.415l-2.891-2.892a8 8 0 111.423-1.405z"
+  }));
+});
 SearchIcon.displayName = "SearchIcon";
 export default SearchIcon;
 //# sourceMappingURL=Search.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Search.js","names":["React","SearchIcon","forwardRef","props","svgRef","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","displayName"],"sources":["../../../../../src/components/Icons/collection/Search.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component SearchIcon\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 *   <SearchIcon 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 SearchIcon = 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=\"SearchIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path d=\"M16.717 15.708a6 6 0 10-1.07 1.056l.602-.46.468-.596zm1.572 1.238l2.883 2.882a1 1 0 01-1.415 1.415l-2.891-2.892a8 8 0 111.423-1.405z\" />\n    </svg>\n  )\n);\nSearchIcon.displayName = \"SearchIcon\";\nexport default SearchIcon;\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,UAAU,gBAAGD,KAAK,CAACE,UAAU,CACjC,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,YAAY;EACxBC,IAAI,EAAC,wBAAwB;EAC7BC,SAAS,EAAE,KAAM;EACjBC,GAAG,EAAET;AAAO,GACRD,KAAK,gBAETH,KAAA,CAAAK,aAAA;EAAMS,CAAC,EAAC;AAAsI,CAAE,CAC7I,CAET,CAAC;AACDb,UAAU,CAACc,WAAW,GAAG,YAAY;AACrC,eAAed,UAAU"}
+{"version":3,"file":"Search.js","names":["React","GradientDefs","SearchIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","displayName"],"sources":["../../../../../src/components/Icons/collection/Search.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component SearchIcon\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 * <SearchIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <SearchIcon 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 SearchIcon = 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=\"SearchIcon\"\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 d=\"M16.717 15.708a6 6 0 10-1.07 1.056l.602-.46.468-.596zm1.572 1.238l2.883 2.882a1 1 0 01-1.415 1.415l-2.891-2.892a8 8 0 111.423-1.405z\" />\n    </svg>\n  )\n);\nSearchIcon.displayName = \"SearchIcon\";\nexport default SearchIcon;\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,UAAU,gBAAGF,KAAK,CAACG,UAAU,CACjC,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,YAAY;IACxBC,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;IAAMS,CAAC,EAAC;EAAsI,CAAE,CAC7I,CAAC;AAAA,CAEV,CAAC;AACDf,UAAU,CAACgB,WAAW,GAAG,YAAY;AACrC,eAAehB,UAAU"}

package/dist/esm/components/Icons/collection/SearchLarge.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 (
+ * <SearchLargeIcon 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 SearchLargeIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const SearchLargeIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & {
+    gradient?: string | undefined;
+}, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default SearchLargeIcon;
 //# sourceMappingURL=SearchLarge.d.ts.map

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

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