@activecollab/components 2.0.221 → 2.0.223

package/dist/esm/components/GradientDefs/GradientDefs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientDefs.d.ts","sourceRoot":"","sources":["../../../../src/components/GradientDefs/GradientDefs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,YAAY;;8BAgCxB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/esm/components/GradientDefs/GradientDefs.js

@@ -0,0 +1,26 @@
+import React from "react";
+export const GradientDefs = _ref => {
+  var _match$1$match, _parts$find;
+  let {
+    gradient
+  } = _ref;
+  if (!gradient) return null;
+  const match = gradient.match(/linear-gradient\((.*)\)$/);
+  if (!match) return null;
+  const parts = (_match$1$match = match[1].match(/(#[0-9a-fA-F]{3,6}|rgba?\([^)]*\)|[0-9.]+deg)/g)) != null ? _match$1$match : [];
+  const anglePart = (_parts$find = parts.find(p => /\d+deg/.test(p))) != null ? _parts$find : "0deg";
+  const angle = Number(anglePart.replace("deg", "")) || 0;
+  const colors = parts.filter(p => /^#|rgb/.test(p));
+  if (colors.length < 2) return null;
+  return /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+    id: "icon-gradient",
+    "data-testid": "icon-gradient",
+    gradientTransform: "rotate(" + angle + ")"
+  }, colors.map((color, i) => /*#__PURE__*/React.createElement("stop", {
+    key: i,
+    offset: i / (colors.length - 1) * 100 + "%",
+    stopColor: color
+  }))));
+};
+export default GradientDefs;
+//# sourceMappingURL=GradientDefs.js.map

package/dist/esm/components/GradientDefs/GradientDefs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientDefs.js","names":["React","GradientDefs","_ref","_match$1$match","_parts$find","gradient","match","parts","anglePart","find","p","test","angle","Number","replace","colors","filter","length","createElement","id","gradientTransform","map","color","i","key","offset","stopColor"],"sources":["../../../../src/components/GradientDefs/GradientDefs.tsx"],"sourcesContent":["import React from \"react\";\n\nexport const GradientDefs = ({ gradient }: { gradient?: string }) => {\n  if (!gradient) return null;\n\n  const match = gradient.match(/linear-gradient\\((.*)\\)$/);\n  if (!match) return null;\n\n  const parts =\n    match[1].match(/(#[0-9a-fA-F]{3,6}|rgba?\\([^)]*\\)|[0-9.]+deg)/g) ?? [];\n  const anglePart = parts.find((p) => /\\d+deg/.test(p)) ?? \"0deg\";\n  const angle = Number(anglePart.replace(\"deg\", \"\")) || 0;\n\n  const colors = parts.filter((p) => /^#|rgb/.test(p));\n\n  if (colors.length < 2) return null;\n\n  return (\n    <defs>\n      <linearGradient\n        id=\"icon-gradient\"\n        data-testid=\"icon-gradient\"\n        gradientTransform={`rotate(${angle})`}\n      >\n        {colors.map((color, i) => (\n          <stop\n            key={i}\n            offset={`${(i / (colors.length - 1)) * 100}%`}\n            stopColor={color}\n          />\n        ))}\n      </linearGradient>\n    </defs>\n  );\n};\n\nexport default GradientDefs;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAO,MAAMC,YAAY,GAAGC,IAAA,IAAyC;EAAA,IAAAC,cAAA,EAAAC,WAAA;EAAA,IAAxC;IAAEC;EAAgC,CAAC,GAAAH,IAAA;EAC9D,IAAI,CAACG,QAAQ,EAAE,OAAO,IAAI;EAE1B,MAAMC,KAAK,GAAGD,QAAQ,CAACC,KAAK,CAAC,0BAA0B,CAAC;EACxD,IAAI,CAACA,KAAK,EAAE,OAAO,IAAI;EAEvB,MAAMC,KAAK,IAAAJ,cAAA,GACTG,KAAK,CAAC,CAAC,CAAC,CAACA,KAAK,CAAC,gDAAgD,CAAC,YAAAH,cAAA,GAAI,EAAE;EACxE,MAAMK,SAAS,IAAAJ,WAAA,GAAGG,KAAK,CAACE,IAAI,CAAEC,CAAC,IAAK,QAAQ,CAACC,IAAI,CAACD,CAAC,CAAC,CAAC,YAAAN,WAAA,GAAI,MAAM;EAC/D,MAAMQ,KAAK,GAAGC,MAAM,CAACL,SAAS,CAACM,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC;EAEvD,MAAMC,MAAM,GAAGR,KAAK,CAACS,MAAM,CAAEN,CAAC,IAAK,QAAQ,CAACC,IAAI,CAACD,CAAC,CAAC,CAAC;EAEpD,IAAIK,MAAM,CAACE,MAAM,GAAG,CAAC,EAAE,OAAO,IAAI;EAElC,oBACEjB,KAAA,CAAAkB,aAAA,4BACElB,KAAA,CAAAkB,aAAA;IACEC,EAAE,EAAC,eAAe;IAClB,eAAY,eAAe;IAC3BC,iBAAiB,cAAYR,KAAK;EAAI,GAErCG,MAAM,CAACM,GAAG,CAAC,CAACC,KAAK,EAAEC,CAAC,kBACnBvB,KAAA,CAAAkB,aAAA;IACEM,GAAG,EAAED,CAAE;IACPE,MAAM,EAAMF,CAAC,IAAIR,MAAM,CAACE,MAAM,GAAG,CAAC,CAAC,GAAI,GAAG,MAAI;IAC9CS,SAAS,EAAEJ;EAAM,CAClB,CACF,CACa,CACZ,CAAC;AAEX,CAAC;AAED,eAAerB,YAAY"}

package/dist/esm/components/GradientDefs/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./GradientDefs";
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/GradientDefs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/GradientDefs/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/esm/components/GradientDefs/index.js

@@ -0,0 +1,2 @@
+export * from "./GradientDefs";
+//# sourceMappingURL=index.js.map

package/dist/esm/components/GradientDefs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/GradientDefs/index.ts"],"sourcesContent":["export * from \"./GradientDefs\";\n"],"mappings":"AAAA,cAAc,gBAAgB"}

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

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

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

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component AccessLogIcon
@@ -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 (
+ * <AccessLogIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
+ * )
  *
  * @example
  * return (
@@ -20,27 +28,35 @@ import React from "react";
  * @see
  * https://design.activecollab.com/docs/foundations/icons
  */
-const AccessLogIcon = /*#__PURE__*/React.forwardRef((props, svgRef) => /*#__PURE__*/React.createElement("svg", _extends({
-  width: 24,
-  height: 24,
-  xmlns: "http://www.w3.org/2000/svg",
-  "data-testid": "AccessLogIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M8.127 13.646a.5.5 0 01.146.354v3H9.37a.5.5 0 010 1H7.773a.5.5 0 01-.5-.5V14a.5.5 0 01.854-.354z"
-}), /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M10.42 13.646a.5.5 0 01.353-.146h2a.5.5 0 01.5.5v3.5a.5.5 0 01-.5.5h-2a.5.5 0 01-.5-.5V14a.5.5 0 01.146-.354zm.853.854V17h1v-2.5h-1z"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M14.5 13.5a.5.5 0 00-.5.5v3.5a.5.5 0 00.5.5h2a.5.5 0 00.5-.5V16a.5.5 0 00-.5-.5H16a.5.5 0 000 1v.5h-1v-2.5h1.5a.5.5 0 000-1h-2z"
-}), /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M5 2h11.03L21 7.075V20a2 2 0 01-2 2H5a2 2 0 01-2-2V4a2 2 0 012-2zm10.19 2H5v16h14V7.891L15.19 4z"
-})));
+const AccessLogIcon = /*#__PURE__*/React.forwardRef((_ref, svgRef) => {
+  let {
+    gradient,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 24,
+    height: 24,
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": "AccessLogIcon",
+    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.127 13.646a.5.5 0 01.146.354v3H9.37a.5.5 0 010 1H7.773a.5.5 0 01-.5-.5V14a.5.5 0 01.854-.354z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10.42 13.646a.5.5 0 01.353-.146h2a.5.5 0 01.5.5v3.5a.5.5 0 01-.5.5h-2a.5.5 0 01-.5-.5V14a.5.5 0 01.146-.354zm.853.854V17h1v-2.5h-1z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M14.5 13.5a.5.5 0 00-.5.5v3.5a.5.5 0 00.5.5h2a.5.5 0 00.5-.5V16a.5.5 0 00-.5-.5H16a.5.5 0 000 1v.5h-1v-2.5h1.5a.5.5 0 000-1h-2z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5 2h11.03L21 7.075V20a2 2 0 01-2 2H5a2 2 0 01-2-2V4a2 2 0 012-2zm10.19 2H5v16h14V7.891L15.19 4z"
+  }));
+});
 AccessLogIcon.displayName = "AccessLogIcon";
 export default AccessLogIcon;
 //# sourceMappingURL=AccessLog.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AccessLog.js","names":["React","AccessLogIcon","forwardRef","props","svgRef","createElement","_extends","width","height","xmlns","fill","focusable","ref","d","fillRule","clipRule","displayName"],"sources":["../../../../../src/components/Icons/collection/AccessLog.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component AccessLogIcon\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 *   <AccessLogIcon 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 AccessLogIcon = React.forwardRef(\n  (props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>) => (\n    <svg\n      width={24}\n      height={24}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      data-testid=\"AccessLogIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path d=\"M8.127 13.646a.5.5 0 01.146.354v3H9.37a.5.5 0 010 1H7.773a.5.5 0 01-.5-.5V14a.5.5 0 01.854-.354z\" />\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M10.42 13.646a.5.5 0 01.353-.146h2a.5.5 0 01.5.5v3.5a.5.5 0 01-.5.5h-2a.5.5 0 01-.5-.5V14a.5.5 0 01.146-.354zm.853.854V17h1v-2.5h-1z\"\n      />\n      <path d=\"M14.5 13.5a.5.5 0 00-.5.5v3.5a.5.5 0 00.5.5h2a.5.5 0 00.5-.5V16a.5.5 0 00-.5-.5H16a.5.5 0 000 1v.5h-1v-2.5h1.5a.5.5 0 000-1h-2z\" />\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M5 2h11.03L21 7.075V20a2 2 0 01-2 2H5a2 2 0 01-2-2V4a2 2 0 012-2zm10.19 2H5v16h14V7.891L15.19 4z\"\n      />\n    </svg>\n  )\n);\nAccessLogIcon.displayName = \"AccessLogIcon\";\nexport default AccessLogIcon;\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,aAAa,gBAAGD,KAAK,CAACE,UAAU,CACpC,CAACC,KAAoC,EAAEC,MAAiC,kBACtEJ,KAAA,CAAAK,aAAA,QAAAC,QAAA;EACEC,KAAK,EAAE,EAAG;EACVC,MAAM,EAAE,EAAG;EACXC,KAAK,EAAC,4BAA4B;EAClC,eAAY,eAAe;EAC3BC,IAAI,EAAC,wBAAwB;EAC7BC,SAAS,EAAE,KAAM;EACjBC,GAAG,EAAER;AAAO,GACRD,KAAK,gBAETH,KAAA,CAAAK,aAAA;EAAMQ,CAAC,EAAC;AAAkG,CAAE,CAAC,eAC7Gb,KAAA,CAAAK,aAAA;EACES,QAAQ,EAAC,SAAS;EAClBC,QAAQ,EAAC,SAAS;EAClBF,CAAC,EAAC;AAAsI,CACzI,CAAC,eACFb,KAAA,CAAAK,aAAA;EAAMQ,CAAC,EAAC;AAAiI,CAAE,CAAC,eAC5Ib,KAAA,CAAAK,aAAA;EACES,QAAQ,EAAC,SAAS;EAClBC,QAAQ,EAAC,SAAS;EAClBF,CAAC,EAAC;AAAkG,CACrG,CACE,CAET,CAAC;AACDZ,aAAa,CAACe,WAAW,GAAG,eAAe;AAC3C,eAAef,aAAa"}
+{"version":3,"file":"AccessLog.js","names":["React","GradientDefs","AccessLogIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","width","height","xmlns","fill","focusable","ref","d","fillRule","clipRule","displayName"],"sources":["../../../../../src/components/Icons/collection/AccessLog.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component AccessLogIcon\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 * <AccessLogIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <AccessLogIcon 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 AccessLogIcon = 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      xmlns=\"http://www.w3.org/2000/svg\"\n      data-testid=\"AccessLogIcon\"\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.127 13.646a.5.5 0 01.146.354v3H9.37a.5.5 0 010 1H7.773a.5.5 0 01-.5-.5V14a.5.5 0 01.854-.354z\" />\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M10.42 13.646a.5.5 0 01.353-.146h2a.5.5 0 01.5.5v3.5a.5.5 0 01-.5.5h-2a.5.5 0 01-.5-.5V14a.5.5 0 01.146-.354zm.853.854V17h1v-2.5h-1z\"\n      />\n      <path d=\"M14.5 13.5a.5.5 0 00-.5.5v3.5a.5.5 0 00.5.5h2a.5.5 0 00.5-.5V16a.5.5 0 00-.5-.5H16a.5.5 0 000 1v.5h-1v-2.5h1.5a.5.5 0 000-1h-2z\" />\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M5 2h11.03L21 7.075V20a2 2 0 01-2 2H5a2 2 0 01-2-2V4a2 2 0 012-2zm10.19 2H5v16h14V7.891L15.19 4z\"\n      />\n    </svg>\n  )\n);\nAccessLogIcon.displayName = \"AccessLogIcon\";\nexport default AccessLogIcon;\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,aAAa,gBAAGF,KAAK,CAACG,UAAU,CACpC,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,KAAK,EAAC,4BAA4B;IAClC,eAAY,eAAe;IAC3BC,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;EAAkG,CAAE,CAAC,eAC7GhB,KAAA,CAAAQ,aAAA;IACES,QAAQ,EAAC,SAAS;IAClBC,QAAQ,EAAC,SAAS;IAClBF,CAAC,EAAC;EAAsI,CACzI,CAAC,eACFhB,KAAA,CAAAQ,aAAA;IAAMQ,CAAC,EAAC;EAAiI,CAAE,CAAC,eAC5IhB,KAAA,CAAAQ,aAAA;IACES,QAAQ,EAAC,SAAS;IAClBC,QAAQ,EAAC,SAAS;IAClBF,CAAC,EAAC;EAAkG,CACrG,CACE,CAAC;AAAA,CAEV,CAAC;AACDd,aAAa,CAACiB,WAAW,GAAG,eAAe;AAC3C,eAAejB,aAAa"}

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

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

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

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component ActivityIcon
@@ -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 (
+ * <ActivityIcon 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 ActivityIcon = /*#__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": "ActivityIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M6 4a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H6zm0-2h12a4 4 0 014 4v12a4 4 0 01-4 4H6a4 4 0 01-4-4V6a4 4 0 014-4zm2.962 10.317a1 1 0 01-.949.684H5.76a1 1 0 010-2h1.532l1.772-5.317c.304-.912 1.594-.912 1.898 0l3.051 9.154 1.051-3.154a1 1 0 01.95-.684H18a1 1 0 010 2h-1.266l-1.772 5.316c-.304.912-1.594.912-1.898 0l-3.05-9.153-1.052 3.154z"
-}), /*#__PURE__*/React.createElement("path", {
-  stroke: "#F4F5F7",
-  strokeWidth: 0.1,
-  opacity: 0.01,
-  d: "M.05.05h23.9v23.9H.05z"
-})));
+const ActivityIcon = /*#__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": "ActivityIcon",
+    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 4a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H6zm0-2h12a4 4 0 014 4v12a4 4 0 01-4 4H6a4 4 0 01-4-4V6a4 4 0 014-4zm2.962 10.317a1 1 0 01-.949.684H5.76a1 1 0 010-2h1.532l1.772-5.317c.304-.912 1.594-.912 1.898 0l3.051 9.154 1.051-3.154a1 1 0 01.95-.684H18a1 1 0 010 2h-1.266l-1.772 5.316c-.304.912-1.594.912-1.898 0l-3.05-9.153-1.052 3.154z"
+  }), /*#__PURE__*/React.createElement("path", {
+    stroke: "#F4F5F7",
+    strokeWidth: 0.1,
+    opacity: 0.01,
+    d: "M.05.05h23.9v23.9H.05z"
+  }));
+});
 ActivityIcon.displayName = "ActivityIcon";
 export default ActivityIcon;
 //# sourceMappingURL=Activity.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Activity.js","names":["React","ActivityIcon","forwardRef","props","svgRef","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","stroke","strokeWidth","opacity","displayName"],"sources":["../../../../../src/components/Icons/collection/Activity.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component ActivityIcon\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 *   <ActivityIcon 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 ActivityIcon = 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=\"ActivityIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path d=\"M6 4a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H6zm0-2h12a4 4 0 014 4v12a4 4 0 01-4 4H6a4 4 0 01-4-4V6a4 4 0 014-4zm2.962 10.317a1 1 0 01-.949.684H5.76a1 1 0 010-2h1.532l1.772-5.317c.304-.912 1.594-.912 1.898 0l3.051 9.154 1.051-3.154a1 1 0 01.95-.684H18a1 1 0 010 2h-1.266l-1.772 5.316c-.304.912-1.594.912-1.898 0l-3.05-9.153-1.052 3.154z\" />\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);\nActivityIcon.displayName = \"ActivityIcon\";\nexport default ActivityIcon;\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;EAAMS,CAAC,EAAC;AAAoW,CAAE,CAAC,eAC/Wd,KAAA,CAAAK,aAAA;EACEU,MAAM,EAAC,SAAS;EAChBC,WAAW,EAAE,GAAI;EACjBC,OAAO,EAAE,IAAK;EACdH,CAAC,EAAC;AAAwB,CAC3B,CACE,CAET,CAAC;AACDb,YAAY,CAACiB,WAAW,GAAG,cAAc;AACzC,eAAejB,YAAY"}
+{"version":3,"file":"Activity.js","names":["React","GradientDefs","ActivityIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","stroke","strokeWidth","opacity","displayName"],"sources":["../../../../../src/components/Icons/collection/Activity.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component ActivityIcon\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 * <ActivityIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <ActivityIcon 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 ActivityIcon = 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=\"ActivityIcon\"\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=\"M6 4a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H6zm0-2h12a4 4 0 014 4v12a4 4 0 01-4 4H6a4 4 0 01-4-4V6a4 4 0 014-4zm2.962 10.317a1 1 0 01-.949.684H5.76a1 1 0 010-2h1.532l1.772-5.317c.304-.912 1.594-.912 1.898 0l3.051 9.154 1.051-3.154a1 1 0 01.95-.684H18a1 1 0 010 2h-1.266l-1.772 5.316c-.304.912-1.594.912-1.898 0l-3.05-9.153-1.052 3.154z\" />\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);\nActivityIcon.displayName = \"ActivityIcon\";\nexport default ActivityIcon;\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;IAAMS,CAAC,EAAC;EAAoW,CAAE,CAAC,eAC/WjB,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,YAAY,CAACmB,WAAW,GAAG,cAAc;AACzC,eAAenB,YAAY"}

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

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

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

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component AddCrossIcon
@@ -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 (
+ * <AddCrossIcon 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 AddCrossIcon = /*#__PURE__*/React.forwardRef((props, svgRef) => /*#__PURE__*/React.createElement("svg", _extends({
-  width: 10,
-  height: 10,
-  viewBox: "0 0 10 10",
-  xmlns: "http://www.w3.org/2000/svg",
-  "data-testid": "AddCrossIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M6 0v4h4v2H6v4H4V6H0V4h4V0h2z",
-  fillRule: "nonzero"
-})));
+const AddCrossIcon = /*#__PURE__*/React.forwardRef((_ref, svgRef) => {
+  let {
+    gradient,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 10,
+    height: 10,
+    viewBox: "0 0 10 10",
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": "AddCrossIcon",
+    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 0v4h4v2H6v4H4V6H0V4h4V0h2z",
+    fillRule: "nonzero"
+  }));
+});
 AddCrossIcon.displayName = "AddCrossIcon";
 export default AddCrossIcon;
 //# sourceMappingURL=AddCross.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AddCross.js","names":["React","AddCrossIcon","forwardRef","props","svgRef","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/AddCross.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component AddCrossIcon\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 *   <AddCrossIcon 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 AddCrossIcon = React.forwardRef(\n  (props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>) => (\n    <svg\n      width={10}\n      height={10}\n      viewBox=\"0 0 10 10\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      data-testid=\"AddCrossIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path d=\"M6 0v4h4v2H6v4H4V6H0V4h4V0h2z\" fillRule=\"nonzero\" />\n    </svg>\n  )\n);\nAddCrossIcon.displayName = \"AddCrossIcon\";\nexport default AddCrossIcon;\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;EAAMS,CAAC,EAAC,+BAA+B;EAACC,QAAQ,EAAC;AAAS,CAAE,CACzD,CAET,CAAC;AACDd,YAAY,CAACe,WAAW,GAAG,cAAc;AACzC,eAAef,YAAY"}
+{"version":3,"file":"AddCross.js","names":["React","GradientDefs","AddCrossIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/AddCross.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component AddCrossIcon\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 * <AddCrossIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <AddCrossIcon 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 AddCrossIcon = 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={10}\n      height={10}\n      viewBox=\"0 0 10 10\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      data-testid=\"AddCrossIcon\"\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=\"M6 0v4h4v2H6v4H4V6H0V4h4V0h2z\" fillRule=\"nonzero\" />\n    </svg>\n  )\n);\nAddCrossIcon.displayName = \"AddCrossIcon\";\nexport default AddCrossIcon;\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;IAAMS,CAAC,EAAC,+BAA+B;IAACC,QAAQ,EAAC;EAAS,CAAE,CACzD,CAAC;AAAA,CAEV,CAAC;AACDhB,YAAY,CAACiB,WAAW,GAAG,cAAc;AACzC,eAAejB,YAAY"}

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

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

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

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component AddCrossTinyIcon
@@ -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 (
+ * <AddCrossTinyIcon 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 AddCrossTinyIcon = /*#__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": "AddCrossTinyIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M12 4a1 1 0 011 1v6h6a1 1 0 010 2h-6v6a1 1 0 01-2 0l-.001-6H5a1 1 0 010-2h6V5a1 1 0 011-1z",
-  fillRule: "evenodd"
-})));
+const AddCrossTinyIcon = /*#__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": "AddCrossTinyIcon",
+    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: "M12 4a1 1 0 011 1v6h6a1 1 0 010 2h-6v6a1 1 0 01-2 0l-.001-6H5a1 1 0 010-2h6V5a1 1 0 011-1z",
+    fillRule: "evenodd"
+  }));
+});
 AddCrossTinyIcon.displayName = "AddCrossTinyIcon";
 export default AddCrossTinyIcon;
 //# sourceMappingURL=AddCrossTiny.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AddCrossTiny.js","names":["React","AddCrossTinyIcon","forwardRef","props","svgRef","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/AddCrossTiny.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component AddCrossTinyIcon\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 *   <AddCrossTinyIcon 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 AddCrossTinyIcon = 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=\"AddCrossTinyIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path\n        d=\"M12 4a1 1 0 011 1v6h6a1 1 0 010 2h-6v6a1 1 0 01-2 0l-.001-6H5a1 1 0 010-2h6V5a1 1 0 011-1z\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  )\n);\nAddCrossTinyIcon.displayName = \"AddCrossTinyIcon\";\nexport default AddCrossTinyIcon;\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,gBAAgB,gBAAGD,KAAK,CAACE,UAAU,CACvC,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,kBAAkB;EAC9BC,IAAI,EAAC,wBAAwB;EAC7BC,SAAS,EAAE,KAAM;EACjBC,GAAG,EAAET;AAAO,GACRD,KAAK,gBAETH,KAAA,CAAAK,aAAA;EACES,CAAC,EAAC,4FAA4F;EAC9FC,QAAQ,EAAC;AAAS,CACnB,CACE,CAET,CAAC;AACDd,gBAAgB,CAACe,WAAW,GAAG,kBAAkB;AACjD,eAAef,gBAAgB"}
+{"version":3,"file":"AddCrossTiny.js","names":["React","GradientDefs","AddCrossTinyIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/AddCrossTiny.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component AddCrossTinyIcon\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 * <AddCrossTinyIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <AddCrossTinyIcon 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 AddCrossTinyIcon = 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=\"AddCrossTinyIcon\"\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=\"M12 4a1 1 0 011 1v6h6a1 1 0 010 2h-6v6a1 1 0 01-2 0l-.001-6H5a1 1 0 010-2h6V5a1 1 0 011-1z\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  )\n);\nAddCrossTinyIcon.displayName = \"AddCrossTinyIcon\";\nexport default AddCrossTinyIcon;\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,gBAAgB,gBAAGF,KAAK,CAACG,UAAU,CACvC,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,kBAAkB;IAC9BC,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,4FAA4F;IAC9FC,QAAQ,EAAC;EAAS,CACnB,CACE,CAAC;AAAA,CAEV,CAAC;AACDhB,gBAAgB,CAACiB,WAAW,GAAG,kBAAkB;AACjD,eAAejB,gBAAgB"}

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

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

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