@activecollab/components 2.0.222 → 2.0.223

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component LetterArrowRightIcon
@@ -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 (
+ * <LetterArrowRightIcon 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 LetterArrowRightIcon = /*#__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": "LetterArrowRightIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M2 17h4v-3l5 4.5L6 23v-3H2v-3zM4 4a2 2 0 00-2 2v9h2V8l8 5 8-5v10h-7v2h7a2 2 0 002-2V6a2 2 0 00-2-2H4zm8 7L4 6h16l-8 5z"
-})));
+const LetterArrowRightIcon = /*#__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": "LetterArrowRightIcon",
+    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: "M2 17h4v-3l5 4.5L6 23v-3H2v-3zM4 4a2 2 0 00-2 2v9h2V8l8 5 8-5v10h-7v2h7a2 2 0 002-2V6a2 2 0 00-2-2H4zm8 7L4 6h16l-8 5z"
+  }));
+});
 LetterArrowRightIcon.displayName = "LetterArrowRightIcon";
 export default LetterArrowRightIcon;
 //# sourceMappingURL=LetterArrowRight.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LetterArrowRight.js","names":["React","LetterArrowRightIcon","forwardRef","props","svgRef","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","fillRule","clipRule","d","displayName"],"sources":["../../../../../src/components/Icons/collection/LetterArrowRight.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component LetterArrowRightIcon\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 *   <LetterArrowRightIcon 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 LetterArrowRightIcon = 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=\"LetterArrowRightIcon\"\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=\"M2 17h4v-3l5 4.5L6 23v-3H2v-3zM4 4a2 2 0 00-2 2v9h2V8l8 5 8-5v10h-7v2h7a2 2 0 002-2V6a2 2 0 00-2-2H4zm8 7L4 6h16l-8 5z\"\n      />\n    </svg>\n  )\n);\nLetterArrowRightIcon.displayName = \"LetterArrowRightIcon\";\nexport default LetterArrowRightIcon;\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,oBAAoB,gBAAGD,KAAK,CAACE,UAAU,CAC3C,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,sBAAsB;EAClCC,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;AAAwH,CAC3H,CACE,CAET,CAAC;AACDf,oBAAoB,CAACgB,WAAW,GAAG,sBAAsB;AACzD,eAAehB,oBAAoB"}
+{"version":3,"file":"LetterArrowRight.js","names":["React","GradientDefs","LetterArrowRightIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","fillRule","clipRule","d","displayName"],"sources":["../../../../../src/components/Icons/collection/LetterArrowRight.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component LetterArrowRightIcon\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 * <LetterArrowRightIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <LetterArrowRightIcon 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 LetterArrowRightIcon = 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=\"LetterArrowRightIcon\"\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=\"M2 17h4v-3l5 4.5L6 23v-3H2v-3zM4 4a2 2 0 00-2 2v9h2V8l8 5 8-5v10h-7v2h7a2 2 0 002-2V6a2 2 0 00-2-2H4zm8 7L4 6h16l-8 5z\"\n      />\n    </svg>\n  )\n);\nLetterArrowRightIcon.displayName = \"LetterArrowRightIcon\";\nexport default LetterArrowRightIcon;\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,oBAAoB,gBAAGF,KAAK,CAACG,UAAU,CAC3C,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,sBAAsB;IAClCC,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;EAAwH,CAC3H,CACE,CAAC;AAAA,CAEV,CAAC;AACDjB,oBAAoB,CAACkB,WAAW,GAAG,sBAAsB;AACzD,eAAelB,oBAAoB"}

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

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

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

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component LetterFastIcon
@@ -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 (
+ * <LetterFastIcon 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 LetterFastIcon = /*#__PURE__*/React.forwardRef((props, svgRef) => /*#__PURE__*/React.createElement("svg", _extends({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  "data-testid": "LetterFastIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  fillRule: "evenodd",
-  d: "M8 6c-1.1 0-2 .9-2 2v9a2 2 0 002 2h13c1.11 0 2-.89 2-2V8a2 2 0 00-2-2H8zm0 11V9.67L14.5 13 21 9.67V17H8zm0-9h13l-6.5 3.31L8 8zm-4 9.5H1c-.552 0-1-.45-1-1s.448-1 1-1h3c-.013 1.22-.013 1.887 0 2zm0-10c-.013.113-.013.78 0 2H1c-.55 0-1-.45-1-1s.45-1 1-1h3zm-4 5c0-.55.45-1 1-1h3v2H1c-.55 0-1-.45-1-1z",
-  clipRule: "evenodd"
-})));
+const LetterFastIcon = /*#__PURE__*/React.forwardRef((_ref, svgRef) => {
+  let {
+    gradient,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    "data-testid": "LetterFastIcon",
+    fill: gradient ? "url(#icon-gradient)" : props != null && props.fill ? props.fill : "var(--color-theme-600)",
+    focusable: false,
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement(GradientDefs, {
+    gradient: gradient
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M8 6c-1.1 0-2 .9-2 2v9a2 2 0 002 2h13c1.11 0 2-.89 2-2V8a2 2 0 00-2-2H8zm0 11V9.67L14.5 13 21 9.67V17H8zm0-9h13l-6.5 3.31L8 8zm-4 9.5H1c-.552 0-1-.45-1-1s.448-1 1-1h3c-.013 1.22-.013 1.887 0 2zm0-10c-.013.113-.013.78 0 2H1c-.55 0-1-.45-1-1s.45-1 1-1h3zm-4 5c0-.55.45-1 1-1h3v2H1c-.55 0-1-.45-1-1z",
+    clipRule: "evenodd"
+  }));
+});
 LetterFastIcon.displayName = "LetterFastIcon";
 export default LetterFastIcon;
 //# sourceMappingURL=LetterFast.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LetterFast.js","names":["React","LetterFastIcon","forwardRef","props","svgRef","createElement","_extends","xmlns","width","height","fill","focusable","ref","fillRule","d","clipRule","displayName"],"sources":["../../../../../src/components/Icons/collection/LetterFast.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component LetterFastIcon\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 *   <LetterFastIcon 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 LetterFastIcon = React.forwardRef(\n  (props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>) => (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={24}\n      height={24}\n      data-testid=\"LetterFastIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path\n        fillRule=\"evenodd\"\n        d=\"M8 6c-1.1 0-2 .9-2 2v9a2 2 0 002 2h13c1.11 0 2-.89 2-2V8a2 2 0 00-2-2H8zm0 11V9.67L14.5 13 21 9.67V17H8zm0-9h13l-6.5 3.31L8 8zm-4 9.5H1c-.552 0-1-.45-1-1s.448-1 1-1h3c-.013 1.22-.013 1.887 0 2zm0-10c-.013.113-.013.78 0 2H1c-.55 0-1-.45-1-1s.45-1 1-1h3zm-4 5c0-.55.45-1 1-1h3v2H1c-.55 0-1-.45-1-1z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  )\n);\nLetterFastIcon.displayName = \"LetterFastIcon\";\nexport default LetterFastIcon;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,cAAc,gBAAGD,KAAK,CAACE,UAAU,CACrC,CAACC,KAAoC,EAAEC,MAAiC,kBACtEJ,KAAA,CAAAK,aAAA,QAAAC,QAAA;EACEC,KAAK,EAAC,4BAA4B;EAClCC,KAAK,EAAE,EAAG;EACVC,MAAM,EAAE,EAAG;EACX,eAAY,gBAAgB;EAC5BC,IAAI,EAAC,wBAAwB;EAC7BC,SAAS,EAAE,KAAM;EACjBC,GAAG,EAAER;AAAO,GACRD,KAAK,gBAETH,KAAA,CAAAK,aAAA;EACEQ,QAAQ,EAAC,SAAS;EAClBC,CAAC,EAAC,0SAA0S;EAC5SC,QAAQ,EAAC;AAAS,CACnB,CACE,CAET,CAAC;AACDd,cAAc,CAACe,WAAW,GAAG,gBAAgB;AAC7C,eAAef,cAAc"}
+{"version":3,"file":"LetterFast.js","names":["React","GradientDefs","LetterFastIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","xmlns","width","height","fill","focusable","ref","fillRule","d","clipRule","displayName"],"sources":["../../../../../src/components/Icons/collection/LetterFast.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component LetterFastIcon\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 * <LetterFastIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <LetterFastIcon 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 LetterFastIcon = React.forwardRef(\n  (\n    {\n      gradient,\n      ...props\n    }: React.SVGProps<SVGSVGElement> & {\n      gradient?: string;\n    },\n    svgRef?: React.Ref<SVGSVGElement>\n  ) => (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={24}\n      height={24}\n      data-testid=\"LetterFastIcon\"\n      fill={\n        gradient\n          ? \"url(#icon-gradient)\"\n          : props?.fill\n          ? props.fill\n          : \"var(--color-theme-600)\"\n      }\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <GradientDefs gradient={gradient} />\n      <path\n        fillRule=\"evenodd\"\n        d=\"M8 6c-1.1 0-2 .9-2 2v9a2 2 0 002 2h13c1.11 0 2-.89 2-2V8a2 2 0 00-2-2H8zm0 11V9.67L14.5 13 21 9.67V17H8zm0-9h13l-6.5 3.31L8 8zm-4 9.5H1c-.552 0-1-.45-1-1s.448-1 1-1h3c-.013 1.22-.013 1.887 0 2zm0-10c-.013.113-.013.78 0 2H1c-.55 0-1-.45-1-1s.45-1 1-1h3zm-4 5c0-.55.45-1 1-1h3v2H1c-.55 0-1-.45-1-1z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  )\n);\nLetterFastIcon.displayName = \"LetterFastIcon\";\nexport default LetterFastIcon;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,YAAY,QAAQ,oBAAoB;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,cAAc,gBAAGF,KAAK,CAACG,UAAU,CACrC,CAAAC,IAAA,EAOEC,MAAiC;EAAA,IANjC;IACEC,QAAQ;IACR,GAAGC;EAGL,CAAC,GAAAH,IAAA;EAAA,oBAGDJ,KAAA,CAAAQ,aAAA,QAAAC,QAAA;IACEC,KAAK,EAAC,4BAA4B;IAClCC,KAAK,EAAE,EAAG;IACVC,MAAM,EAAE,EAAG;IACX,eAAY,gBAAgB;IAC5BC,IAAI,EACFP,QAAQ,GACJ,qBAAqB,GACrBC,KAAK,YAALA,KAAK,CAAEM,IAAI,GACXN,KAAK,CAACM,IAAI,GACV,wBACL;IACDC,SAAS,EAAE,KAAM;IACjBC,GAAG,EAAEV;EAAO,GACRE,KAAK,gBAETP,KAAA,CAAAQ,aAAA,CAACP,YAAY;IAACK,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACpCN,KAAA,CAAAQ,aAAA;IACEQ,QAAQ,EAAC,SAAS;IAClBC,CAAC,EAAC,0SAA0S;IAC5SC,QAAQ,EAAC;EAAS,CACnB,CACE,CAAC;AAAA,CAEV,CAAC;AACDhB,cAAc,CAACiB,WAAW,GAAG,gBAAgB;AAC7C,eAAejB,cAAc"}

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

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

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component LockIcon
@@ -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 (
+ * <LockIcon 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 LockIcon = /*#__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": "LockIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M12 17a2 2 0 01-2-2c0-1.11.89-2 2-2a2 2 0 110 4m6 3V10H6v10h12m0-12a2 2 0 012 2v10a2 2 0 01-2 2H6a2 2 0 01-2-2V10c0-1.11.89-2 2-2h1V6a5 5 0 1110 0v2h1m-6-5a3 3 0 00-3 3v2h6V6a3 3 0 00-3-3z",
-  fillRule: "evenodd"
-})));
+const LockIcon = /*#__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": "LockIcon",
+    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 17a2 2 0 01-2-2c0-1.11.89-2 2-2a2 2 0 110 4m6 3V10H6v10h12m0-12a2 2 0 012 2v10a2 2 0 01-2 2H6a2 2 0 01-2-2V10c0-1.11.89-2 2-2h1V6a5 5 0 1110 0v2h1m-6-5a3 3 0 00-3 3v2h6V6a3 3 0 00-3-3z",
+    fillRule: "evenodd"
+  }));
+});
 LockIcon.displayName = "LockIcon";
 export default LockIcon;
 //# sourceMappingURL=Lock.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Lock.js","names":["React","LockIcon","forwardRef","props","svgRef","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/Lock.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component LockIcon\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 *   <LockIcon 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 LockIcon = 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=\"LockIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path\n        d=\"M12 17a2 2 0 01-2-2c0-1.11.89-2 2-2a2 2 0 110 4m6 3V10H6v10h12m0-12a2 2 0 012 2v10a2 2 0 01-2 2H6a2 2 0 01-2-2V10c0-1.11.89-2 2-2h1V6a5 5 0 1110 0v2h1m-6-5a3 3 0 00-3 3v2h6V6a3 3 0 00-3-3z\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  )\n);\nLockIcon.displayName = \"LockIcon\";\nexport default LockIcon;\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,8LAA8L;EAChMC,QAAQ,EAAC;AAAS,CACnB,CACE,CAET,CAAC;AACDd,QAAQ,CAACe,WAAW,GAAG,UAAU;AACjC,eAAef,QAAQ"}
+{"version":3,"file":"Lock.js","names":["React","GradientDefs","LockIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/Lock.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component LockIcon\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 * <LockIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <LockIcon 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 LockIcon = 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=\"LockIcon\"\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 17a2 2 0 01-2-2c0-1.11.89-2 2-2a2 2 0 110 4m6 3V10H6v10h12m0-12a2 2 0 012 2v10a2 2 0 01-2 2H6a2 2 0 01-2-2V10c0-1.11.89-2 2-2h1V6a5 5 0 1110 0v2h1m-6-5a3 3 0 00-3 3v2h6V6a3 3 0 00-3-3z\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  )\n);\nLockIcon.displayName = \"LockIcon\";\nexport default LockIcon;\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,8LAA8L;IAChMC,QAAQ,EAAC;EAAS,CACnB,CACE,CAAC;AAAA,CAEV,CAAC;AACDhB,QAAQ,CAACiB,WAAW,GAAG,UAAU;AACjC,eAAejB,QAAQ"}

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

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

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

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component LockSmallIcon
@@ -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 (
+ * <LockSmallIcon 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 LockSmallIcon = /*#__PURE__*/React.forwardRef((props, svgRef) => /*#__PURE__*/React.createElement("svg", _extends({
-  width: 12,
-  height: 12,
-  viewBox: "0 0 12 12",
-  xmlns: "http://www.w3.org/2000/svg",
-  "data-testid": "LockSmallIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M7 0a2 2 0 012 2v1h1a1 1 0 011 1v7a1 1 0 01-1 1H2a1 1 0 01-1-1V4c0-.555.445-1 1-1h1V2a2 2 0 012-2h2zm3 4H2v7h8V4zM7 6v3H5V6h2zm0-5H5a1 1 0 00-.993.883L4 2v1h4V2a1 1 0 00-.883-.993L7 1z",
-  fillRule: "evenodd"
-})));
+const LockSmallIcon = /*#__PURE__*/React.forwardRef((_ref, svgRef) => {
+  let {
+    gradient,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 12,
+    height: 12,
+    viewBox: "0 0 12 12",
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": "LockSmallIcon",
+    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: "M7 0a2 2 0 012 2v1h1a1 1 0 011 1v7a1 1 0 01-1 1H2a1 1 0 01-1-1V4c0-.555.445-1 1-1h1V2a2 2 0 012-2h2zm3 4H2v7h8V4zM7 6v3H5V6h2zm0-5H5a1 1 0 00-.993.883L4 2v1h4V2a1 1 0 00-.883-.993L7 1z",
+    fillRule: "evenodd"
+  }));
+});
 LockSmallIcon.displayName = "LockSmallIcon";
 export default LockSmallIcon;
 //# sourceMappingURL=LockSmall.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LockSmall.js","names":["React","LockSmallIcon","forwardRef","props","svgRef","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/LockSmall.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component LockSmallIcon\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 *   <LockSmallIcon 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 LockSmallIcon = React.forwardRef(\n  (props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>) => (\n    <svg\n      width={12}\n      height={12}\n      viewBox=\"0 0 12 12\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      data-testid=\"LockSmallIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path\n        d=\"M7 0a2 2 0 012 2v1h1a1 1 0 011 1v7a1 1 0 01-1 1H2a1 1 0 01-1-1V4c0-.555.445-1 1-1h1V2a2 2 0 012-2h2zm3 4H2v7h8V4zM7 6v3H5V6h2zm0-5H5a1 1 0 00-.993.883L4 2v1h4V2a1 1 0 00-.883-.993L7 1z\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  )\n);\nLockSmallIcon.displayName = \"LockSmallIcon\";\nexport default LockSmallIcon;\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,CAAC,EAAC,0LAA0L;EAC5LC,QAAQ,EAAC;AAAS,CACnB,CACE,CAET,CAAC;AACDd,aAAa,CAACe,WAAW,GAAG,eAAe;AAC3C,eAAef,aAAa"}
+{"version":3,"file":"LockSmall.js","names":["React","GradientDefs","LockSmallIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/LockSmall.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component LockSmallIcon\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 * <LockSmallIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <LockSmallIcon 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 LockSmallIcon = React.forwardRef(\n  (\n    {\n      gradient,\n      ...props\n    }: React.SVGProps<SVGSVGElement> & {\n      gradient?: string;\n    },\n    svgRef?: React.Ref<SVGSVGElement>\n  ) => (\n    <svg\n      width={12}\n      height={12}\n      viewBox=\"0 0 12 12\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      data-testid=\"LockSmallIcon\"\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=\"M7 0a2 2 0 012 2v1h1a1 1 0 011 1v7a1 1 0 01-1 1H2a1 1 0 01-1-1V4c0-.555.445-1 1-1h1V2a2 2 0 012-2h2zm3 4H2v7h8V4zM7 6v3H5V6h2zm0-5H5a1 1 0 00-.993.883L4 2v1h4V2a1 1 0 00-.883-.993L7 1z\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  )\n);\nLockSmallIcon.displayName = \"LockSmallIcon\";\nexport default LockSmallIcon;\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,CAAC,EAAC,0LAA0L;IAC5LC,QAAQ,EAAC;EAAS,CACnB,CACE,CAAC;AAAA,CAEV,CAAC;AACDhB,aAAa,CAACiB,WAAW,GAAG,eAAe;AAC3C,eAAejB,aAAa"}

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

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

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

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component MarkerIcon
@@ -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 (
+ * <MarkerIcon 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 MarkerIcon = /*#__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": "MarkerIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M12 17a1 1 0 010 2H4a1 1 0 010-2h8zm0-4a1 1 0 010 2H4a1 1 0 010-2h8zm10-1a1 1 0 01-.883.993l-5.25-.002c-.214 0-.442-.06-.626-.2L13.436 11H4a1 1 0 010-2h9.592l1.611-1.604A.998.998 0 0116 7h5a1 1 0 011 1v4zm-5.579-3.001l-1.079 1.079.921.921 3.736.001V9l-3.578-.001zM12 5a1 1 0 010 2H4a1 1 0 110-2h8z",
-  fillRule: "evenodd"
-})));
+const MarkerIcon = /*#__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": "MarkerIcon",
+    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 17a1 1 0 010 2H4a1 1 0 010-2h8zm0-4a1 1 0 010 2H4a1 1 0 010-2h8zm10-1a1 1 0 01-.883.993l-5.25-.002c-.214 0-.442-.06-.626-.2L13.436 11H4a1 1 0 010-2h9.592l1.611-1.604A.998.998 0 0116 7h5a1 1 0 011 1v4zm-5.579-3.001l-1.079 1.079.921.921 3.736.001V9l-3.578-.001zM12 5a1 1 0 010 2H4a1 1 0 110-2h8z",
+    fillRule: "evenodd"
+  }));
+});
 MarkerIcon.displayName = "MarkerIcon";
 export default MarkerIcon;
 //# sourceMappingURL=Marker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Marker.js","names":["React","MarkerIcon","forwardRef","props","svgRef","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/Marker.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * @component MarkerIcon\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 *   <MarkerIcon 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 MarkerIcon = 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=\"MarkerIcon\"\n      fill=\"var(--color-theme-600)\"\n      focusable={false}\n      ref={svgRef}\n      {...props}\n    >\n      <path\n        d=\"M12 17a1 1 0 010 2H4a1 1 0 010-2h8zm0-4a1 1 0 010 2H4a1 1 0 010-2h8zm10-1a1 1 0 01-.883.993l-5.25-.002c-.214 0-.442-.06-.626-.2L13.436 11H4a1 1 0 010-2h9.592l1.611-1.604A.998.998 0 0116 7h5a1 1 0 011 1v4zm-5.579-3.001l-1.079 1.079.921.921 3.736.001V9l-3.578-.001zM12 5a1 1 0 010 2H4a1 1 0 110-2h8z\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  )\n);\nMarkerIcon.displayName = \"MarkerIcon\";\nexport default MarkerIcon;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,UAAU,gBAAGD,KAAK,CAACE,UAAU,CACjC,CAACC,KAAoC,EAAEC,MAAiC,kBACtEJ,KAAA,CAAAK,aAAA,QAAAC,QAAA;EACEC,KAAK,EAAE,EAAG;EACVC,MAAM,EAAE,EAAG;EACXC,OAAO,EAAC,WAAW;EACnBC,KAAK,EAAC,4BAA4B;EAClC,eAAY,YAAY;EACxBC,IAAI,EAAC,wBAAwB;EAC7BC,SAAS,EAAE,KAAM;EACjBC,GAAG,EAAET;AAAO,GACRD,KAAK,gBAETH,KAAA,CAAAK,aAAA;EACES,CAAC,EAAC,2SAA2S;EAC7SC,QAAQ,EAAC;AAAS,CACnB,CACE,CAET,CAAC;AACDd,UAAU,CAACe,WAAW,GAAG,YAAY;AACrC,eAAef,UAAU"}
+{"version":3,"file":"Marker.js","names":["React","GradientDefs","MarkerIcon","forwardRef","_ref","svgRef","gradient","props","createElement","_extends","width","height","viewBox","xmlns","fill","focusable","ref","d","fillRule","displayName"],"sources":["../../../../../src/components/Icons/collection/Marker.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component MarkerIcon\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 * <MarkerIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <MarkerIcon 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 MarkerIcon = 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=\"MarkerIcon\"\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 17a1 1 0 010 2H4a1 1 0 010-2h8zm0-4a1 1 0 010 2H4a1 1 0 010-2h8zm10-1a1 1 0 01-.883.993l-5.25-.002c-.214 0-.442-.06-.626-.2L13.436 11H4a1 1 0 010-2h9.592l1.611-1.604A.998.998 0 0116 7h5a1 1 0 011 1v4zm-5.579-3.001l-1.079 1.079.921.921 3.736.001V9l-3.578-.001zM12 5a1 1 0 010 2H4a1 1 0 110-2h8z\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  )\n);\nMarkerIcon.displayName = \"MarkerIcon\";\nexport default MarkerIcon;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,YAAY,QAAQ,oBAAoB;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,UAAU,gBAAGF,KAAK,CAACG,UAAU,CACjC,CAAAC,IAAA,EAOEC,MAAiC;EAAA,IANjC;IACEC,QAAQ;IACR,GAAGC;EAGL,CAAC,GAAAH,IAAA;EAAA,oBAGDJ,KAAA,CAAAQ,aAAA,QAAAC,QAAA;IACEC,KAAK,EAAE,EAAG;IACVC,MAAM,EAAE,EAAG;IACXC,OAAO,EAAC,WAAW;IACnBC,KAAK,EAAC,4BAA4B;IAClC,eAAY,YAAY;IACxBC,IAAI,EACFR,QAAQ,GACJ,qBAAqB,GACrBC,KAAK,YAALA,KAAK,CAAEO,IAAI,GACXP,KAAK,CAACO,IAAI,GACV,wBACL;IACDC,SAAS,EAAE,KAAM;IACjBC,GAAG,EAAEX;EAAO,GACRE,KAAK,gBAETP,KAAA,CAAAQ,aAAA,CAACP,YAAY;IAACK,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACpCN,KAAA,CAAAQ,aAAA;IACES,CAAC,EAAC,2SAA2S;IAC7SC,QAAQ,EAAC;EAAS,CACnB,CACE,CAAC;AAAA,CAEV,CAAC;AACDhB,UAAU,CAACiB,WAAW,GAAG,YAAY;AACrC,eAAejB,UAAU"}

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

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

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

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from "react";
+import { GradientDefs } from "../../GradientDefs";
 
 /**
  * @component MessageIcon
@@ -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 (
+ * <MessageIcon 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 MessageIcon = /*#__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": "MessageIcon",
-  fill: "var(--color-theme-600)",
-  focusable: false,
-  ref: svgRef
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M22 4v12a2 2 0 01-2 2H7.995L2 22V4a2 2 0 012-2h16a2 2 0 012 2zm-2 0H4v14.26L7.39 16H20V4zm-8 6v2H6v-2h6zm6-4v2H6V6h12z",
-  fillRule: "evenodd"
-})));
+const MessageIcon = /*#__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": "MessageIcon",
+    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: "M22 4v12a2 2 0 01-2 2H7.995L2 22V4a2 2 0 012-2h16a2 2 0 012 2zm-2 0H4v14.26L7.39 16H20V4zm-8 6v2H6v-2h6zm6-4v2H6V6h12z",
+    fillRule: "evenodd"
+  }));
+});
 MessageIcon.displayName = "MessageIcon";
 export default MessageIcon;
 //# sourceMappingURL=Message.js.map