@activecollab/components 2.0.222 → 2.0.224

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

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

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component ThumbUpOutlineIcon
@@ -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 (
+ * <ThumbUpOutlineIcon 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 ThumbUpOutlineIcon = /*#__PURE__*/React.forwardRef((props, svgRef) => /*#__PURE__*/React.createElement("svg", _extends({
-  width: 14,
-  height: 14,
-  viewBox: "0 0 14 14",
-  xmlns: "http://www.w3.org/2000/svg",
-  "data-testid": "ThumbUpOutlineIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M8.647.034c.424.02.847.164 1.173.542.263.305.403.73.403 1.262l-.003.513-.015.658-.019.374-.028.33c-.033.312-.08.567-.148.796l-.022.065.069.091c.289.364.59.477 1.119.496l.15.003h.251c.682 0 1.239.08 1.679.286.37.175.624.435.726.876.07 2.43-.78 5.856-1.727 6.803a3.787 3.787 0 01-.494.433c-.39.278-.697.388-1.434.434l-.344.017-.405.01-.71.009c-1.71 0-2.668-.214-4.006-.754l-.393-.158a1.468 1.468 0 01-1.36.912H1.53c-.81 0-1.468-.657-1.468-1.468V7.5c0-.81.657-1.468 1.468-1.468h1.58c.443 0 .84.196 1.11.506.097-.236.216-.453.359-.635.21-.266.434-.459.881-.79l.286-.213c.973-.745 1.316-1.249 1.316-2.158l.005-.264c.028-.685.165-1.227.4-1.635.304-.526.745-.77 1.132-.808zM8.615.71l.027.003-.05.008c-.171.042-.377.18-.54.46-.199.347-.313.86-.313 1.56l-.005.202c-.054 1.114-.572 1.755-1.776 2.645l-.237.175-.23.182c-.168.138-.28.25-.381.377-.265.337-.448.94-.533 1.415v4.697l.539.216c1.172.473 2.01.675 3.414.702l.334.003.855-.012.335-.01.28-.016.122-.01.213-.025.177-.033a1.34 1.34 0 00.344-.126l.118-.072.06-.04c.12-.086.248-.2.406-.36.788-.787 1.597-4.044 1.54-6.234-.036-.148-.145-.259-.346-.354-.33-.154-.8-.222-1.39-.222h-.253c-.94-.005-1.484-.228-1.998-1.036l-.092-.145.062-.16c.11-.282.175-.626.21-1.134l.02-.363.012-.419.006-.746c0-.378-.087-.645-.238-.82C9.127.81 8.87.722 8.615.71zm-5.505 6H1.529a.79.79 0 00-.79.79v5.064c0 .437.354.79.79.79h1.58a.79.79 0 00.791-.79V7.5a.79.79 0 00-.79-.79z",
-  fillRule: "evenodd"
-})));
+const ThumbUpOutlineIcon = /*#__PURE__*/React.forwardRef((_ref, svgRef) => {
+  let {
+    gradient,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 14,
+    height: 14,
+    viewBox: "0 0 14 14",
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": "ThumbUpOutlineIcon",
+    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: "M8.647.034c.424.02.847.164 1.173.542.263.305.403.73.403 1.262l-.003.513-.015.658-.019.374-.028.33c-.033.312-.08.567-.148.796l-.022.065.069.091c.289.364.59.477 1.119.496l.15.003h.251c.682 0 1.239.08 1.679.286.37.175.624.435.726.876.07 2.43-.78 5.856-1.727 6.803a3.787 3.787 0 01-.494.433c-.39.278-.697.388-1.434.434l-.344.017-.405.01-.71.009c-1.71 0-2.668-.214-4.006-.754l-.393-.158a1.468 1.468 0 01-1.36.912H1.53c-.81 0-1.468-.657-1.468-1.468V7.5c0-.81.657-1.468 1.468-1.468h1.58c.443 0 .84.196 1.11.506.097-.236.216-.453.359-.635.21-.266.434-.459.881-.79l.286-.213c.973-.745 1.316-1.249 1.316-2.158l.005-.264c.028-.685.165-1.227.4-1.635.304-.526.745-.77 1.132-.808zM8.615.71l.027.003-.05.008c-.171.042-.377.18-.54.46-.199.347-.313.86-.313 1.56l-.005.202c-.054 1.114-.572 1.755-1.776 2.645l-.237.175-.23.182c-.168.138-.28.25-.381.377-.265.337-.448.94-.533 1.415v4.697l.539.216c1.172.473 2.01.675 3.414.702l.334.003.855-.012.335-.01.28-.016.122-.01.213-.025.177-.033a1.34 1.34 0 00.344-.126l.118-.072.06-.04c.12-.086.248-.2.406-.36.788-.787 1.597-4.044 1.54-6.234-.036-.148-.145-.259-.346-.354-.33-.154-.8-.222-1.39-.222h-.253c-.94-.005-1.484-.228-1.998-1.036l-.092-.145.062-.16c.11-.282.175-.626.21-1.134l.02-.363.012-.419.006-.746c0-.378-.087-.645-.238-.82C9.127.81 8.87.722 8.615.71zm-5.505 6H1.529a.79.79 0 00-.79.79v5.064c0 .437.354.79.79.79h1.58a.79.79 0 00.791-.79V7.5a.79.79 0 00-.79-.79z",
+    fillRule: "evenodd"
+  }));
+});
 ThumbUpOutlineIcon.displayName = "ThumbUpOutlineIcon";
 export default ThumbUpOutlineIcon;
 //# sourceMappingURL=ThumbUpOutline.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ThumbUpOutline.js","names":["React","ThumbUpOutlineIcon","forwardRef","props","svgRef","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/ThumbUpOutline.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component ThumbUpOutlineIcon\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 *   <ThumbUpOutlineIcon 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 ThumbUpOutlineIcon = React.forwardRef(\n  (props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>) => (\n    <svg\n      width={14}\n      height={14}\n      viewBox=\"0 0 14 14\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      data-testid=\"ThumbUpOutlineIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path\n        d=\"M8.647.034c.424.02.847.164 1.173.542.263.305.403.73.403 1.262l-.003.513-.015.658-.019.374-.028.33c-.033.312-.08.567-.148.796l-.022.065.069.091c.289.364.59.477 1.119.496l.15.003h.251c.682 0 1.239.08 1.679.286.37.175.624.435.726.876.07 2.43-.78 5.856-1.727 6.803a3.787 3.787 0 01-.494.433c-.39.278-.697.388-1.434.434l-.344.017-.405.01-.71.009c-1.71 0-2.668-.214-4.006-.754l-.393-.158a1.468 1.468 0 01-1.36.912H1.53c-.81 0-1.468-.657-1.468-1.468V7.5c0-.81.657-1.468 1.468-1.468h1.58c.443 0 .84.196 1.11.506.097-.236.216-.453.359-.635.21-.266.434-.459.881-.79l.286-.213c.973-.745 1.316-1.249 1.316-2.158l.005-.264c.028-.685.165-1.227.4-1.635.304-.526.745-.77 1.132-.808zM8.615.71l.027.003-.05.008c-.171.042-.377.18-.54.46-.199.347-.313.86-.313 1.56l-.005.202c-.054 1.114-.572 1.755-1.776 2.645l-.237.175-.23.182c-.168.138-.28.25-.381.377-.265.337-.448.94-.533 1.415v4.697l.539.216c1.172.473 2.01.675 3.414.702l.334.003.855-.012.335-.01.28-.016.122-.01.213-.025.177-.033a1.34 1.34 0 00.344-.126l.118-.072.06-.04c.12-.086.248-.2.406-.36.788-.787 1.597-4.044 1.54-6.234-.036-.148-.145-.259-.346-.354-.33-.154-.8-.222-1.39-.222h-.253c-.94-.005-1.484-.228-1.998-1.036l-.092-.145.062-.16c.11-.282.175-.626.21-1.134l.02-.363.012-.419.006-.746c0-.378-.087-.645-.238-.82C9.127.81 8.87.722 8.615.71zm-5.505 6H1.529a.79.79 0 00-.79.79v5.064c0 .437.354.79.79.79h1.58a.79.79 0 00.791-.79V7.5a.79.79 0 00-.79-.79z\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  )\n);\nThumbUpOutlineIcon.displayName = \"ThumbUpOutlineIcon\";\nexport default ThumbUpOutlineIcon;\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,CAAC,EAAC,q3CAAq3C;EACv3CC,QAAQ,EAAC;AAAS,CACnB,CACE,CAET,CAAC;AACDd,kBAAkB,CAACe,WAAW,GAAG,oBAAoB;AACrD,eAAef,kBAAkB"}
+{"version":3,"file":"ThumbUpOutline.js","names":["React","GradientDefs","ThumbUpOutlineIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/ThumbUpOutline.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component ThumbUpOutlineIcon\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 * <ThumbUpOutlineIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <ThumbUpOutlineIcon 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 ThumbUpOutlineIcon = 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={14}\n      height={14}\n      viewBox=\"0 0 14 14\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      data-testid=\"ThumbUpOutlineIcon\"\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=\"M8.647.034c.424.02.847.164 1.173.542.263.305.403.73.403 1.262l-.003.513-.015.658-.019.374-.028.33c-.033.312-.08.567-.148.796l-.022.065.069.091c.289.364.59.477 1.119.496l.15.003h.251c.682 0 1.239.08 1.679.286.37.175.624.435.726.876.07 2.43-.78 5.856-1.727 6.803a3.787 3.787 0 01-.494.433c-.39.278-.697.388-1.434.434l-.344.017-.405.01-.71.009c-1.71 0-2.668-.214-4.006-.754l-.393-.158a1.468 1.468 0 01-1.36.912H1.53c-.81 0-1.468-.657-1.468-1.468V7.5c0-.81.657-1.468 1.468-1.468h1.58c.443 0 .84.196 1.11.506.097-.236.216-.453.359-.635.21-.266.434-.459.881-.79l.286-.213c.973-.745 1.316-1.249 1.316-2.158l.005-.264c.028-.685.165-1.227.4-1.635.304-.526.745-.77 1.132-.808zM8.615.71l.027.003-.05.008c-.171.042-.377.18-.54.46-.199.347-.313.86-.313 1.56l-.005.202c-.054 1.114-.572 1.755-1.776 2.645l-.237.175-.23.182c-.168.138-.28.25-.381.377-.265.337-.448.94-.533 1.415v4.697l.539.216c1.172.473 2.01.675 3.414.702l.334.003.855-.012.335-.01.28-.016.122-.01.213-.025.177-.033a1.34 1.34 0 00.344-.126l.118-.072.06-.04c.12-.086.248-.2.406-.36.788-.787 1.597-4.044 1.54-6.234-.036-.148-.145-.259-.346-.354-.33-.154-.8-.222-1.39-.222h-.253c-.94-.005-1.484-.228-1.998-1.036l-.092-.145.062-.16c.11-.282.175-.626.21-1.134l.02-.363.012-.419.006-.746c0-.378-.087-.645-.238-.82C9.127.81 8.87.722 8.615.71zm-5.505 6H1.529a.79.79 0 00-.79.79v5.064c0 .437.354.79.79.79h1.58a.79.79 0 00.791-.79V7.5a.79.79 0 00-.79-.79z\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  )\n);\nThumbUpOutlineIcon.displayName = \"ThumbUpOutlineIcon\";\nexport default ThumbUpOutlineIcon;\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,CAAC,EAAC,q3CAAq3C;IACv3CC,QAAQ,EAAC;EAAS,CACnB,CACE,CAAC;AAAA,CAEV,CAAC;AACDhB,kBAAkB,CAACiB,WAAW,GAAG,oBAAoB;AACrD,eAAejB,kBAAkB"}

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

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

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

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component TrashIcon
@@ -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 (
+ * <TrashIcon 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 TrashIcon = /*#__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": "TrashIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M8 4l1-2h6l1 2h4v2h-1v13a2 2 0 01-2 2H7a2 2 0 01-2-2V6H4V4h4zm3 2v13h2V6h-2zM7 6v13h2V6H7zm10 0h-2v13h2V6z"
-}), /*#__PURE__*/React.createElement("path", {
-  stroke: "#F4F5F7",
-  strokeWidth: 0.1,
-  opacity: 0.01,
-  d: "M.05.05h23.9v23.9H.05z"
-})));
+const TrashIcon = /*#__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": "TrashIcon",
+    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: "M8 4l1-2h6l1 2h4v2h-1v13a2 2 0 01-2 2H7a2 2 0 01-2-2V6H4V4h4zm3 2v13h2V6h-2zM7 6v13h2V6H7zm10 0h-2v13h2V6z"
+  }), /*#__PURE__*/React.createElement("path", {
+    stroke: "#F4F5F7",
+    strokeWidth: 0.1,
+    opacity: 0.01,
+    d: "M.05.05h23.9v23.9H.05z"
+  }));
+});
 TrashIcon.displayName = "TrashIcon";
 export default TrashIcon;
 //# sourceMappingURL=Trash.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Trash.js","names":["React","TrashIcon","forwardRef","props","svgRef","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","stroke","strokeWidth","opacity","displayName"],"sources":["../../../../../src/components/Icons/collection/Trash.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component TrashIcon\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 *   <TrashIcon 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 TrashIcon = 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=\"TrashIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path d=\"M8 4l1-2h6l1 2h4v2h-1v13a2 2 0 01-2 2H7a2 2 0 01-2-2V6H4V4h4zm3 2v13h2V6h-2zM7 6v13h2V6H7zm10 0h-2v13h2V6z\" />\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);\nTrashIcon.displayName = \"TrashIcon\";\nexport default TrashIcon;\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,SAAS,gBAAGD,KAAK,CAACE,UAAU,CAChC,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,WAAW;EACvBC,IAAI,EAAC,wBAAwB;EAC7BC,SAAS,EAAE,KAAM;EACjBC,GAAG,EAAET;AAAO,GACRD,KAAK,gBAETH,KAAA,CAAAK,aAAA;EAAMS,CAAC,EAAC;AAA4G,CAAE,CAAC,eACvHd,KAAA,CAAAK,aAAA;EACEU,MAAM,EAAC,SAAS;EAChBC,WAAW,EAAE,GAAI;EACjBC,OAAO,EAAE,IAAK;EACdH,CAAC,EAAC;AAAwB,CAC3B,CACE,CAET,CAAC;AACDb,SAAS,CAACiB,WAAW,GAAG,WAAW;AACnC,eAAejB,SAAS"}
+{"version":3,"file":"Trash.js","names":["React","GradientDefs","TrashIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","stroke","strokeWidth","opacity","displayName"],"sources":["../../../../../src/components/Icons/collection/Trash.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component TrashIcon\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 * <TrashIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <TrashIcon 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 TrashIcon = 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=\"TrashIcon\"\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=\"M8 4l1-2h6l1 2h4v2h-1v13a2 2 0 01-2 2H7a2 2 0 01-2-2V6H4V4h4zm3 2v13h2V6h-2zM7 6v13h2V6H7zm10 0h-2v13h2V6z\" />\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);\nTrashIcon.displayName = \"TrashIcon\";\nexport default TrashIcon;\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,SAAS,gBAAGF,KAAK,CAACG,UAAU,CAChC,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,WAAW;IACvBC,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;EAA4G,CAAE,CAAC,eACvHjB,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,SAAS,CAACmB,WAAW,GAAG,WAAW;AACnC,eAAenB,SAAS"}

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

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

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

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component TreeDotsIcon
@@ -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 (
+ * <TreeDotsIcon 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 TreeDotsIcon = /*#__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": "TreeDotsIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M6 10a2 2 0 110 4 2 2 0 010-4zm6 0a2 2 0 110 4 2 2 0 010-4zm6 0a2 2 0 110 4 2 2 0 010-4z",
-  fillRule: "nonzero"
-})));
+const TreeDotsIcon = /*#__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": "TreeDotsIcon",
+    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: "M6 10a2 2 0 110 4 2 2 0 010-4zm6 0a2 2 0 110 4 2 2 0 010-4zm6 0a2 2 0 110 4 2 2 0 010-4z",
+    fillRule: "nonzero"
+  }));
+});
 TreeDotsIcon.displayName = "TreeDotsIcon";
 export default TreeDotsIcon;
 //# sourceMappingURL=TreeDots.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TreeDots.js","names":["React","TreeDotsIcon","forwardRef","props","svgRef","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/TreeDots.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component TreeDotsIcon\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 *   <TreeDotsIcon 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 TreeDotsIcon = 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=\"TreeDotsIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path\n        d=\"M6 10a2 2 0 110 4 2 2 0 010-4zm6 0a2 2 0 110 4 2 2 0 010-4zm6 0a2 2 0 110 4 2 2 0 010-4z\"\n        fillRule=\"nonzero\"\n      />\n    </svg>\n  )\n);\nTreeDotsIcon.displayName = \"TreeDotsIcon\";\nexport default TreeDotsIcon;\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,YAAY,gBAAGD,KAAK,CAACE,UAAU,CACnC,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,cAAc;EAC1BC,IAAI,EAAC,wBAAwB;EAC7BC,SAAS,EAAE,KAAM;EACjBC,GAAG,EAAET;AAAO,GACRD,KAAK,gBAETH,KAAA,CAAAK,aAAA;EACES,CAAC,EAAC,0FAA0F;EAC5FC,QAAQ,EAAC;AAAS,CACnB,CACE,CAET,CAAC;AACDd,YAAY,CAACe,WAAW,GAAG,cAAc;AACzC,eAAef,YAAY"}
+{"version":3,"file":"TreeDots.js","names":["React","GradientDefs","TreeDotsIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/TreeDots.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component TreeDotsIcon\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 * <TreeDotsIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <TreeDotsIcon 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 TreeDotsIcon = 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=\"TreeDotsIcon\"\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=\"M6 10a2 2 0 110 4 2 2 0 010-4zm6 0a2 2 0 110 4 2 2 0 010-4zm6 0a2 2 0 110 4 2 2 0 010-4z\"\n        fillRule=\"nonzero\"\n      />\n    </svg>\n  )\n);\nTreeDotsIcon.displayName = \"TreeDotsIcon\";\nexport default TreeDotsIcon;\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,YAAY,gBAAGF,KAAK,CAACG,UAAU,CACnC,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,cAAc;IAC1BC,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,0FAA0F;IAC5FC,QAAQ,EAAC;EAAS,CACnB,CACE,CAAC;AAAA,CAEV,CAAC;AACDhB,YAAY,CAACiB,WAAW,GAAG,cAAc;AACzC,eAAejB,YAAY"}

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

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

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

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component UploadIcon
@@ -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 (
+ * <UploadIcon 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 UploadIcon = /*#__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": "UploadIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M6 18v-4h2v1.999h8V14h2v4H6zm6-14l4.95 4.95-1.414 1.414L13 7.829V14h-2V7.827l-2.536 2.537L7.05 8.95 12 4z",
-  fillRule: "evenodd"
-})));
+const UploadIcon = /*#__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": "UploadIcon",
+    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: "M6 18v-4h2v1.999h8V14h2v4H6zm6-14l4.95 4.95-1.414 1.414L13 7.829V14h-2V7.827l-2.536 2.537L7.05 8.95 12 4z",
+    fillRule: "evenodd"
+  }));
+});
 UploadIcon.displayName = "UploadIcon";
 export default UploadIcon;
 //# sourceMappingURL=Upload.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Upload.js","names":["React","UploadIcon","forwardRef","props","svgRef","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/Upload.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component UploadIcon\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 *   <UploadIcon 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 UploadIcon = 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=\"UploadIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path\n        d=\"M6 18v-4h2v1.999h8V14h2v4H6zm6-14l4.95 4.95-1.414 1.414L13 7.829V14h-2V7.827l-2.536 2.537L7.05 8.95 12 4z\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  )\n);\nUploadIcon.displayName = \"UploadIcon\";\nexport default UploadIcon;\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;EACES,CAAC,EAAC,2GAA2G;EAC7GC,QAAQ,EAAC;AAAS,CACnB,CACE,CAET,CAAC;AACDd,UAAU,CAACe,WAAW,GAAG,YAAY;AACrC,eAAef,UAAU"}
+{"version":3,"file":"Upload.js","names":["React","GradientDefs","UploadIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/Upload.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component UploadIcon\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 * <UploadIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <UploadIcon 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 UploadIcon = 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=\"UploadIcon\"\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=\"M6 18v-4h2v1.999h8V14h2v4H6zm6-14l4.95 4.95-1.414 1.414L13 7.829V14h-2V7.827l-2.536 2.537L7.05 8.95 12 4z\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  )\n);\nUploadIcon.displayName = \"UploadIcon\";\nexport default UploadIcon;\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;IACES,CAAC,EAAC,2GAA2G;IAC7GC,QAAQ,EAAC;EAAS,CACnB,CACE,CAAC;AAAA,CAEV,CAAC;AACDhB,UAAU,CAACiB,WAAW,GAAG,YAAY;AACrC,eAAejB,UAAU"}

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

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

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

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component ViewDayIcon
@@ -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 (
+ * <ViewDayIcon 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 ViewDayIcon = /*#__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": "ViewDayIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M9 6a1 1 0 011-1h9a1 1 0 110 2h-9a1 1 0 01-1-1zM9 12a1 1 0 011-1h9a1 1 0 110 2h-9a1 1 0 01-1-1zM9 18a1 1 0 011-1h9a1 1 0 110 2h-9a1 1 0 01-1-1zM5 4a1 1 0 011 1v14a1 1 0 11-2 0V5a1 1 0 011-1z"
-})));
+const ViewDayIcon = /*#__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": "ViewDayIcon",
+    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: "M9 6a1 1 0 011-1h9a1 1 0 110 2h-9a1 1 0 01-1-1zM9 12a1 1 0 011-1h9a1 1 0 110 2h-9a1 1 0 01-1-1zM9 18a1 1 0 011-1h9a1 1 0 110 2h-9a1 1 0 01-1-1zM5 4a1 1 0 011 1v14a1 1 0 11-2 0V5a1 1 0 011-1z"
+  }));
+});
 ViewDayIcon.displayName = "ViewDayIcon";
 export default ViewDayIcon;
 //# sourceMappingURL=ViewDay.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ViewDay.js","names":["React","ViewDayIcon","forwardRef","props","svgRef","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","displayName"],"sources":["../../../../../src/components/Icons/collection/ViewDay.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component ViewDayIcon\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 *   <ViewDayIcon 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 ViewDayIcon = 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=\"ViewDayIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path d=\"M9 6a1 1 0 011-1h9a1 1 0 110 2h-9a1 1 0 01-1-1zM9 12a1 1 0 011-1h9a1 1 0 110 2h-9a1 1 0 01-1-1zM9 18a1 1 0 011-1h9a1 1 0 110 2h-9a1 1 0 01-1-1zM5 4a1 1 0 011 1v14a1 1 0 11-2 0V5a1 1 0 011-1z\" />\n    </svg>\n  )\n);\nViewDayIcon.displayName = \"ViewDayIcon\";\nexport default ViewDayIcon;\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;AAAgM,CAAE,CACvM,CAET,CAAC;AACDb,WAAW,CAACc,WAAW,GAAG,aAAa;AACvC,eAAed,WAAW"}
+{"version":3,"file":"ViewDay.js","names":["React","GradientDefs","ViewDayIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","displayName"],"sources":["../../../../../src/components/Icons/collection/ViewDay.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component ViewDayIcon\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 * <ViewDayIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <ViewDayIcon 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 ViewDayIcon = 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=\"ViewDayIcon\"\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=\"M9 6a1 1 0 011-1h9a1 1 0 110 2h-9a1 1 0 01-1-1zM9 12a1 1 0 011-1h9a1 1 0 110 2h-9a1 1 0 01-1-1zM9 18a1 1 0 011-1h9a1 1 0 110 2h-9a1 1 0 01-1-1zM5 4a1 1 0 011 1v14a1 1 0 11-2 0V5a1 1 0 011-1z\" />\n    </svg>\n  )\n);\nViewDayIcon.displayName = \"ViewDayIcon\";\nexport default ViewDayIcon;\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;EAAgM,CAAE,CACvM,CAAC;AAAA,CAEV,CAAC;AACDf,WAAW,CAACgB,WAAW,GAAG,aAAa;AACvC,eAAehB,WAAW"}

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

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

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