@activecollab/components 2.0.222 → 2.0.223

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

@@ -1 +1 @@
-{"version":3,"file":"SortGeneral.js","names":["React","SortGeneralIcon","forwardRef","props","svgRef","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/SortGeneral.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component SortGeneralIcon\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 *   <SortGeneralIcon 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 SortGeneralIcon = 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=\"SortGeneralIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path\n        d=\"M17 6v11h3l-4 4-4-4h3V6h2zM8 3l4 4H9v11H7V7H4l4-4z\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  )\n);\nSortGeneralIcon.displayName = \"SortGeneralIcon\";\nexport default SortGeneralIcon;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,eAAe,gBAAGD,KAAK,CAACE,UAAU,CACtC,CAACC,KAAoC,EAAEC,MAAiC,kBACtEJ,KAAA,CAAAK,aAAA,QAAAC,QAAA;EACEC,KAAK,EAAE,EAAG;EACVC,MAAM,EAAE,EAAG;EACXC,OAAO,EAAC,WAAW;EACnBC,KAAK,EAAC,4BAA4B;EAClC,eAAY,iBAAiB;EAC7BC,IAAI,EAAC,wBAAwB;EAC7BC,SAAS,EAAE,KAAM;EACjBC,GAAG,EAAET;AAAO,GACRD,KAAK,gBAETH,KAAA,CAAAK,aAAA;EACES,CAAC,EAAC,oDAAoD;EACtDC,QAAQ,EAAC;AAAS,CACnB,CACE,CAET,CAAC;AACDd,eAAe,CAACe,WAAW,GAAG,iBAAiB;AAC/C,eAAef,eAAe"}
+{"version":3,"file":"SortGeneral.js","names":["React","GradientDefs","SortGeneralIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/SortGeneral.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component SortGeneralIcon\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 * <SortGeneralIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <SortGeneralIcon 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 SortGeneralIcon = 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=\"SortGeneralIcon\"\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=\"M17 6v11h3l-4 4-4-4h3V6h2zM8 3l4 4H9v11H7V7H4l4-4z\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  )\n);\nSortGeneralIcon.displayName = \"SortGeneralIcon\";\nexport default SortGeneralIcon;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,YAAY,QAAQ,oBAAoB;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,eAAe,gBAAGF,KAAK,CAACG,UAAU,CACtC,CAAAC,IAAA,EAOEC,MAAiC;EAAA,IANjC;IACEC,QAAQ;IACR,GAAGC;EAGL,CAAC,GAAAH,IAAA;EAAA,oBAGDJ,KAAA,CAAAQ,aAAA,QAAAC,QAAA;IACEC,KAAK,EAAE,EAAG;IACVC,MAAM,EAAE,EAAG;IACXC,OAAO,EAAC,WAAW;IACnBC,KAAK,EAAC,4BAA4B;IAClC,eAAY,iBAAiB;IAC7BC,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,oDAAoD;IACtDC,QAAQ,EAAC;EAAS,CACnB,CACE,CAAC;AAAA,CAEV,CAAC;AACDhB,eAAe,CAACiB,WAAW,GAAG,iBAAiB;AAC/C,eAAejB,eAAe"}

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

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

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

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component SortIcon
@@ -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 (
+ * <SortIcon 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 SortIcon = /*#__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": "SortIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M10 8v2H0V8h10zM7 4v2H0V4h7zM4 0v2H0V0h4z",
-  fillRule: "evenodd"
-})));
+const SortIcon = /*#__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": "SortIcon",
+    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: "M10 8v2H0V8h10zM7 4v2H0V4h7zM4 0v2H0V0h4z",
+    fillRule: "evenodd"
+  }));
+});
 SortIcon.displayName = "SortIcon";
 export default SortIcon;
 //# sourceMappingURL=SortIcon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SortIcon.js","names":["React","SortIcon","forwardRef","props","svgRef","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/SortIcon.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component SortIcon\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 *   <SortIcon 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 SortIcon = 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=\"SortIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path d=\"M10 8v2H0V8h10zM7 4v2H0V4h7zM4 0v2H0V0h4z\" fillRule=\"evenodd\" />\n    </svg>\n  )\n);\nSortIcon.displayName = \"SortIcon\";\nexport default SortIcon;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,QAAQ,gBAAGD,KAAK,CAACE,UAAU,CAC/B,CAACC,KAAoC,EAAEC,MAAiC,kBACtEJ,KAAA,CAAAK,aAAA,QAAAC,QAAA;EACEC,KAAK,EAAE,EAAG;EACVC,MAAM,EAAE,EAAG;EACXC,OAAO,EAAC,WAAW;EACnBC,KAAK,EAAC,4BAA4B;EAClC,eAAY,UAAU;EACtBC,IAAI,EAAC,wBAAwB;EAC7BC,SAAS,EAAE,KAAM;EACjBC,GAAG,EAAET;AAAO,GACRD,KAAK,gBAETH,KAAA,CAAAK,aAAA;EAAMS,CAAC,EAAC,2CAA2C;EAACC,QAAQ,EAAC;AAAS,CAAE,CACrE,CAET,CAAC;AACDd,QAAQ,CAACe,WAAW,GAAG,UAAU;AACjC,eAAef,QAAQ"}
+{"version":3,"file":"SortIcon.js","names":["React","GradientDefs","SortIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/SortIcon.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component SortIcon\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 * <SortIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <SortIcon 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 SortIcon = 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=\"SortIcon\"\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=\"M10 8v2H0V8h10zM7 4v2H0V4h7zM4 0v2H0V0h4z\" fillRule=\"evenodd\" />\n    </svg>\n  )\n);\nSortIcon.displayName = \"SortIcon\";\nexport default SortIcon;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,YAAY,QAAQ,oBAAoB;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,QAAQ,gBAAGF,KAAK,CAACG,UAAU,CAC/B,CAAAC,IAAA,EAOEC,MAAiC;EAAA,IANjC;IACEC,QAAQ;IACR,GAAGC;EAGL,CAAC,GAAAH,IAAA;EAAA,oBAGDJ,KAAA,CAAAQ,aAAA,QAAAC,QAAA;IACEC,KAAK,EAAE,EAAG;IACVC,MAAM,EAAE,EAAG;IACXC,OAAO,EAAC,WAAW;IACnBC,KAAK,EAAC,4BAA4B;IAClC,eAAY,UAAU;IACtBC,IAAI,EACFR,QAAQ,GACJ,qBAAqB,GACrBC,KAAK,YAALA,KAAK,CAAEO,IAAI,GACXP,KAAK,CAACO,IAAI,GACV,wBACL;IACDC,SAAS,EAAE,KAAM;IACjBC,GAAG,EAAEX;EAAO,GACRE,KAAK,gBAETP,KAAA,CAAAQ,aAAA,CAACP,YAAY;IAACK,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACpCN,KAAA,CAAAQ,aAAA;IAAMS,CAAC,EAAC,2CAA2C;IAACC,QAAQ,EAAC;EAAS,CAAE,CACrE,CAAC;AAAA,CAEV,CAAC;AACDhB,QAAQ,CAACiB,WAAW,GAAG,UAAU;AACjC,eAAejB,QAAQ"}

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

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

@@ -1 +1 @@
-{"version":3,"file":"SortList.d.ts","sourceRoot":"","sources":["../../../../../src/components/Icons/collection/SortList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,YAAY,kHAmBjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SortList.d.ts","sourceRoot":"","sources":["../../../../../src/components/Icons/collection/SortList.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/SortList.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component SortListIcon
@@ -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 (
+ * <SortListIcon 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 SortListIcon = /*#__PURE__*/React.forwardRef((props, svgRef) => /*#__PURE__*/React.createElement("svg", _extends({
-  width: 20,
-  height: 18,
-  xmlns: "http://www.w3.org/2000/svg",
-  "data-testid": "SortListIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M16 0l4 4h-3v10h3l-4 4-4-4h3V4h-3l4-4zM9 13a1 1 0 110 2H1a1 1 0 110-2h8zm3-5a1 1 0 110 2H4a1 1 0 010-2h8zM9 3a1 1 0 010 2H1a1 1 0 010-2h8z"
-})));
+const SortListIcon = /*#__PURE__*/React.forwardRef((_ref, svgRef) => {
+  let {
+    gradient,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 20,
+    height: 18,
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": "SortListIcon",
+    fill: gradient ? "url(#icon-gradient)" : props != null && props.fill ? props.fill : "var(--color-theme-600)",
+    focusable: false,
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement(GradientDefs, {
+    gradient: gradient
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16 0l4 4h-3v10h3l-4 4-4-4h3V4h-3l4-4zM9 13a1 1 0 110 2H1a1 1 0 110-2h8zm3-5a1 1 0 110 2H4a1 1 0 010-2h8zM9 3a1 1 0 010 2H1a1 1 0 010-2h8z"
+  }));
+});
 SortListIcon.displayName = "SortListIcon";
 export default SortListIcon;
 //# sourceMappingURL=SortList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SortList.js","names":["React","SortListIcon","forwardRef","props","svgRef","createElement","_extends","width","height","xmlns","fill","focusable","ref","fillRule","clipRule","d","displayName"],"sources":["../../../../../src/components/Icons/collection/SortList.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component SortListIcon\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 *   <SortListIcon 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 SortListIcon = React.forwardRef(\n  (props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>) => (\n    <svg\n      width={20}\n      height={18}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      data-testid=\"SortListIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M16 0l4 4h-3v10h3l-4 4-4-4h3V4h-3l4-4zM9 13a1 1 0 110 2H1a1 1 0 110-2h8zm3-5a1 1 0 110 2H4a1 1 0 010-2h8zM9 3a1 1 0 010 2H1a1 1 0 010-2h8z\"\n      />\n    </svg>\n  )\n);\nSortListIcon.displayName = \"SortListIcon\";\nexport default SortListIcon;\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,KAAK,EAAC,4BAA4B;EAClC,eAAY,cAAc;EAC1BC,IAAI,EAAC,wBAAwB;EAC7BC,SAAS,EAAE,KAAM;EACjBC,GAAG,EAAER;AAAO,GACRD,KAAK,gBAETH,KAAA,CAAAK,aAAA;EACEQ,QAAQ,EAAC,SAAS;EAClBC,QAAQ,EAAC,SAAS;EAClBC,CAAC,EAAC;AAA4I,CAC/I,CACE,CAET,CAAC;AACDd,YAAY,CAACe,WAAW,GAAG,cAAc;AACzC,eAAef,YAAY"}
+{"version":3,"file":"SortList.js","names":["React","GradientDefs","SortListIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","width","height","xmlns","fill","focusable","ref","fillRule","clipRule","d","displayName"],"sources":["../../../../../src/components/Icons/collection/SortList.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component SortListIcon\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 * <SortListIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <SortListIcon 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 SortListIcon = 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={20}\n      height={18}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      data-testid=\"SortListIcon\"\n      fill={\n        gradient\n          ? \"url(#icon-gradient)\"\n          : props?.fill\n          ? props.fill\n          : \"var(--color-theme-600)\"\n      }\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <GradientDefs gradient={gradient} />\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M16 0l4 4h-3v10h3l-4 4-4-4h3V4h-3l4-4zM9 13a1 1 0 110 2H1a1 1 0 110-2h8zm3-5a1 1 0 110 2H4a1 1 0 010-2h8zM9 3a1 1 0 010 2H1a1 1 0 010-2h8z\"\n      />\n    </svg>\n  )\n);\nSortListIcon.displayName = \"SortListIcon\";\nexport default SortListIcon;\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,KAAK,EAAC,4BAA4B;IAClC,eAAY,cAAc;IAC1BC,IAAI,EACFP,QAAQ,GACJ,qBAAqB,GACrBC,KAAK,YAALA,KAAK,CAAEM,IAAI,GACXN,KAAK,CAACM,IAAI,GACV,wBACL;IACDC,SAAS,EAAE,KAAM;IACjBC,GAAG,EAAEV;EAAO,GACRE,KAAK,gBAETP,KAAA,CAAAQ,aAAA,CAACP,YAAY;IAACK,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACpCN,KAAA,CAAAQ,aAAA;IACEQ,QAAQ,EAAC,SAAS;IAClBC,QAAQ,EAAC,SAAS;IAClBC,CAAC,EAAC;EAA4I,CAC/I,CACE,CAAC;AAAA,CAEV,CAAC;AACDhB,YAAY,CAACiB,WAAW,GAAG,cAAc;AACzC,eAAejB,YAAY"}

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

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

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

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component SortSmallIcon
@@ -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 (
+ * <SortSmallIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
+ * )
  *
  * @example
  * return (
@@ -20,20 +28,28 @@ import React from "react";
  * @see
  * https://design.activecollab.com/docs/foundations/icons
  */
-const SortSmallIcon = /*#__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": "SortSmallIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M10 1v2H0V1h10zM7 4v2H0V4h7zM4 7v2H0V7h4z"
-})));
+const SortSmallIcon = /*#__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": "SortSmallIcon",
+    fill: gradient ? "url(#icon-gradient)" : props != null && props.fill ? props.fill : "var(--color-theme-600)",
+    focusable: false,
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement(GradientDefs, {
+    gradient: gradient
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 1v2H0V1h10zM7 4v2H0V4h7zM4 7v2H0V7h4z"
+  }));
+});
 SortSmallIcon.displayName = "SortSmallIcon";
 export default SortSmallIcon;
 //# sourceMappingURL=SortSmall.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SortSmall.js","names":["React","SortSmallIcon","forwardRef","props","svgRef","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","fillRule","clipRule","d","displayName"],"sources":["../../../../../src/components/Icons/collection/SortSmall.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component SortSmallIcon\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 *   <SortSmallIcon 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 SortSmallIcon = 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=\"SortSmallIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M10 1v2H0V1h10zM7 4v2H0V4h7zM4 7v2H0V7h4z\"\n      />\n    </svg>\n  )\n);\nSortSmallIcon.displayName = \"SortSmallIcon\";\nexport default SortSmallIcon;\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,OAAO,EAAC,WAAW;EACnBC,KAAK,EAAC,4BAA4B;EAClC,eAAY,eAAe;EAC3BC,IAAI,EAAC,wBAAwB;EAC7BC,SAAS,EAAE,KAAM;EACjBC,GAAG,EAAET;AAAO,GACRD,KAAK,gBAETH,KAAA,CAAAK,aAAA;EACES,QAAQ,EAAC,SAAS;EAClBC,QAAQ,EAAC,SAAS;EAClBC,CAAC,EAAC;AAA2C,CAC9C,CACE,CAET,CAAC;AACDf,aAAa,CAACgB,WAAW,GAAG,eAAe;AAC3C,eAAehB,aAAa"}
+{"version":3,"file":"SortSmall.js","names":["React","GradientDefs","SortSmallIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","fillRule","clipRule","d","displayName"],"sources":["../../../../../src/components/Icons/collection/SortSmall.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component SortSmallIcon\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 * <SortSmallIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <SortSmallIcon 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 SortSmallIcon = 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=\"SortSmallIcon\"\n      fill={\n        gradient\n          ? \"url(#icon-gradient)\"\n          : props?.fill\n          ? props.fill\n          : \"var(--color-theme-600)\"\n      }\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <GradientDefs gradient={gradient} />\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M10 1v2H0V1h10zM7 4v2H0V4h7zM4 7v2H0V7h4z\"\n      />\n    </svg>\n  )\n);\nSortSmallIcon.displayName = \"SortSmallIcon\";\nexport default SortSmallIcon;\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,OAAO,EAAC,WAAW;IACnBC,KAAK,EAAC,4BAA4B;IAClC,eAAY,eAAe;IAC3BC,IAAI,EACFR,QAAQ,GACJ,qBAAqB,GACrBC,KAAK,YAALA,KAAK,CAAEO,IAAI,GACXP,KAAK,CAACO,IAAI,GACV,wBACL;IACDC,SAAS,EAAE,KAAM;IACjBC,GAAG,EAAEX;EAAO,GACRE,KAAK,gBAETP,KAAA,CAAAQ,aAAA,CAACP,YAAY;IAACK,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACpCN,KAAA,CAAAQ,aAAA;IACES,QAAQ,EAAC,SAAS;IAClBC,QAAQ,EAAC,SAAS;IAClBC,CAAC,EAAC;EAA2C,CAC9C,CACE,CAAC;AAAA,CAEV,CAAC;AACDjB,aAAa,CAACkB,WAAW,GAAG,eAAe;AAC3C,eAAelB,aAAa"}

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

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

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

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component StarIcon
@@ -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 (
+ * <StarIcon 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 StarIcon = /*#__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": "StarIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M12.264 18.74l-5.26 2.766a1 1 0 01-1.451-1.054l1.004-5.857-4.255-4.148a1 1 0 01.554-1.706l5.881-.854 2.63-5.33a1 1 0 011.793 0l2.63 5.33 5.881.854a1 1 0 01.554 1.706l-4.255 4.148 1.005 5.857a1 1 0 01-1.451 1.054l-5.26-2.765z",
-  fillRule: "nonzero"
-})));
+const StarIcon = /*#__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": "StarIcon",
+    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.264 18.74l-5.26 2.766a1 1 0 01-1.451-1.054l1.004-5.857-4.255-4.148a1 1 0 01.554-1.706l5.881-.854 2.63-5.33a1 1 0 011.793 0l2.63 5.33 5.881.854a1 1 0 01.554 1.706l-4.255 4.148 1.005 5.857a1 1 0 01-1.451 1.054l-5.26-2.765z",
+    fillRule: "nonzero"
+  }));
+});
 StarIcon.displayName = "StarIcon";
 export default StarIcon;
 //# sourceMappingURL=Star.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Star.js","names":["React","StarIcon","forwardRef","props","svgRef","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/Star.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component StarIcon\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 *   <StarIcon 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 StarIcon = 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=\"StarIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path\n        d=\"M12.264 18.74l-5.26 2.766a1 1 0 01-1.451-1.054l1.004-5.857-4.255-4.148a1 1 0 01.554-1.706l5.881-.854 2.63-5.33a1 1 0 011.793 0l2.63 5.33 5.881.854a1 1 0 01.554 1.706l-4.255 4.148 1.005 5.857a1 1 0 01-1.451 1.054l-5.26-2.765z\"\n        fillRule=\"nonzero\"\n      />\n    </svg>\n  )\n);\nStarIcon.displayName = \"StarIcon\";\nexport default StarIcon;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,QAAQ,gBAAGD,KAAK,CAACE,UAAU,CAC/B,CAACC,KAAoC,EAAEC,MAAiC,kBACtEJ,KAAA,CAAAK,aAAA,QAAAC,QAAA;EACEC,KAAK,EAAE,EAAG;EACVC,MAAM,EAAE,EAAG;EACXC,OAAO,EAAC,WAAW;EACnBC,KAAK,EAAC,4BAA4B;EAClC,eAAY,UAAU;EACtBC,IAAI,EAAC,wBAAwB;EAC7BC,SAAS,EAAE,KAAM;EACjBC,GAAG,EAAET;AAAO,GACRD,KAAK,gBAETH,KAAA,CAAAK,aAAA;EACES,CAAC,EAAC,kOAAkO;EACpOC,QAAQ,EAAC;AAAS,CACnB,CACE,CAET,CAAC;AACDd,QAAQ,CAACe,WAAW,GAAG,UAAU;AACjC,eAAef,QAAQ"}
+{"version":3,"file":"Star.js","names":["React","GradientDefs","StarIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/Star.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component StarIcon\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 * <StarIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <StarIcon 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 StarIcon = 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=\"StarIcon\"\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.264 18.74l-5.26 2.766a1 1 0 01-1.451-1.054l1.004-5.857-4.255-4.148a1 1 0 01.554-1.706l5.881-.854 2.63-5.33a1 1 0 011.793 0l2.63 5.33 5.881.854a1 1 0 01.554 1.706l-4.255 4.148 1.005 5.857a1 1 0 01-1.451 1.054l-5.26-2.765z\"\n        fillRule=\"nonzero\"\n      />\n    </svg>\n  )\n);\nStarIcon.displayName = \"StarIcon\";\nexport default StarIcon;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,YAAY,QAAQ,oBAAoB;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,QAAQ,gBAAGF,KAAK,CAACG,UAAU,CAC/B,CAAAC,IAAA,EAOEC,MAAiC;EAAA,IANjC;IACEC,QAAQ;IACR,GAAGC;EAGL,CAAC,GAAAH,IAAA;EAAA,oBAGDJ,KAAA,CAAAQ,aAAA,QAAAC,QAAA;IACEC,KAAK,EAAE,EAAG;IACVC,MAAM,EAAE,EAAG;IACXC,OAAO,EAAC,WAAW;IACnBC,KAAK,EAAC,4BAA4B;IAClC,eAAY,UAAU;IACtBC,IAAI,EACFR,QAAQ,GACJ,qBAAqB,GACrBC,KAAK,YAALA,KAAK,CAAEO,IAAI,GACXP,KAAK,CAACO,IAAI,GACV,wBACL;IACDC,SAAS,EAAE,KAAM;IACjBC,GAAG,EAAEX;EAAO,GACRE,KAAK,gBAETP,KAAA,CAAAQ,aAAA,CAACP,YAAY;IAACK,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACpCN,KAAA,CAAAQ,aAAA;IACES,CAAC,EAAC,kOAAkO;IACpOC,QAAQ,EAAC;EAAS,CACnB,CACE,CAAC;AAAA,CAEV,CAAC;AACDhB,QAAQ,CAACiB,WAAW,GAAG,UAAU;AACjC,eAAejB,QAAQ"}

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

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

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

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component StarOutlineIcon
@@ -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 (
+ * <StarOutlineIcon 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 StarOutlineIcon = /*#__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": "StarOutlineIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M12.706 2.103a1 1 0 01.454.455l2.63 5.329 5.881.854a1 1 0 01.554 1.706l-4.255 4.148 1.005 5.857a1 1 0 01-1.451 1.054l-5.26-2.765-5.26 2.765a1 1 0 01-1.451-1.054l1.004-5.857-4.255-4.148a1 1 0 01.554-1.706l5.881-.854 2.63-5.33a1 1 0 011.34-.454zm1.756 7.612L12.263 5.26l-2.198 4.455-4.916.713 3.557 3.469-.84 4.895 4.398-2.31 4.396 2.31-.839-4.895 3.557-3.468-4.916-.714z",
-  fillRule: "evenodd"
-})));
+const StarOutlineIcon = /*#__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": "StarOutlineIcon",
+    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.706 2.103a1 1 0 01.454.455l2.63 5.329 5.881.854a1 1 0 01.554 1.706l-4.255 4.148 1.005 5.857a1 1 0 01-1.451 1.054l-5.26-2.765-5.26 2.765a1 1 0 01-1.451-1.054l1.004-5.857-4.255-4.148a1 1 0 01.554-1.706l5.881-.854 2.63-5.33a1 1 0 011.34-.454zm1.756 7.612L12.263 5.26l-2.198 4.455-4.916.713 3.557 3.469-.84 4.895 4.398-2.31 4.396 2.31-.839-4.895 3.557-3.468-4.916-.714z",
+    fillRule: "evenodd"
+  }));
+});
 StarOutlineIcon.displayName = "StarOutlineIcon";
 export default StarOutlineIcon;
 //# sourceMappingURL=StarOutline.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StarOutline.js","names":["React","StarOutlineIcon","forwardRef","props","svgRef","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/StarOutline.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component StarOutlineIcon\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 *   <StarOutlineIcon 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 StarOutlineIcon = 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=\"StarOutlineIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path\n        d=\"M12.706 2.103a1 1 0 01.454.455l2.63 5.329 5.881.854a1 1 0 01.554 1.706l-4.255 4.148 1.005 5.857a1 1 0 01-1.451 1.054l-5.26-2.765-5.26 2.765a1 1 0 01-1.451-1.054l1.004-5.857-4.255-4.148a1 1 0 01.554-1.706l5.881-.854 2.63-5.33a1 1 0 011.34-.454zm1.756 7.612L12.263 5.26l-2.198 4.455-4.916.713 3.557 3.469-.84 4.895 4.398-2.31 4.396 2.31-.839-4.895 3.557-3.468-4.916-.714z\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  )\n);\nStarOutlineIcon.displayName = \"StarOutlineIcon\";\nexport default StarOutlineIcon;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,eAAe,gBAAGD,KAAK,CAACE,UAAU,CACtC,CAACC,KAAoC,EAAEC,MAAiC,kBACtEJ,KAAA,CAAAK,aAAA,QAAAC,QAAA;EACEC,KAAK,EAAE,EAAG;EACVC,MAAM,EAAE,EAAG;EACXC,OAAO,EAAC,WAAW;EACnBC,KAAK,EAAC,4BAA4B;EAClC,eAAY,iBAAiB;EAC7BC,IAAI,EAAC,wBAAwB;EAC7BC,SAAS,EAAE,KAAM;EACjBC,GAAG,EAAET;AAAO,GACRD,KAAK,gBAETH,KAAA,CAAAK,aAAA;EACES,CAAC,EAAC,mXAAmX;EACrXC,QAAQ,EAAC;AAAS,CACnB,CACE,CAET,CAAC;AACDd,eAAe,CAACe,WAAW,GAAG,iBAAiB;AAC/C,eAAef,eAAe"}
+{"version":3,"file":"StarOutline.js","names":["React","GradientDefs","StarOutlineIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/StarOutline.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component StarOutlineIcon\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 * <StarOutlineIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <StarOutlineIcon 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 StarOutlineIcon = 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=\"StarOutlineIcon\"\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.706 2.103a1 1 0 01.454.455l2.63 5.329 5.881.854a1 1 0 01.554 1.706l-4.255 4.148 1.005 5.857a1 1 0 01-1.451 1.054l-5.26-2.765-5.26 2.765a1 1 0 01-1.451-1.054l1.004-5.857-4.255-4.148a1 1 0 01.554-1.706l5.881-.854 2.63-5.33a1 1 0 011.34-.454zm1.756 7.612L12.263 5.26l-2.198 4.455-4.916.713 3.557 3.469-.84 4.895 4.398-2.31 4.396 2.31-.839-4.895 3.557-3.468-4.916-.714z\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  )\n);\nStarOutlineIcon.displayName = \"StarOutlineIcon\";\nexport default StarOutlineIcon;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,YAAY,QAAQ,oBAAoB;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,eAAe,gBAAGF,KAAK,CAACG,UAAU,CACtC,CAAAC,IAAA,EAOEC,MAAiC;EAAA,IANjC;IACEC,QAAQ;IACR,GAAGC;EAGL,CAAC,GAAAH,IAAA;EAAA,oBAGDJ,KAAA,CAAAQ,aAAA,QAAAC,QAAA;IACEC,KAAK,EAAE,EAAG;IACVC,MAAM,EAAE,EAAG;IACXC,OAAO,EAAC,WAAW;IACnBC,KAAK,EAAC,4BAA4B;IAClC,eAAY,iBAAiB;IAC7BC,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,mXAAmX;IACrXC,QAAQ,EAAC;EAAS,CACnB,CACE,CAAC;AAAA,CAEV,CAAC;AACDhB,eAAe,CAACiB,WAAW,GAAG,iBAAiB;AAC/C,eAAejB,eAAe"}

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

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

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