@postal-music/icons 0.1.10 → 0.1.12

package/dist/index.js

@@ -27,7 +27,8 @@ var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
 var CheckIcon = ({
   size = 24,
   color = "currentColor",
-  strokeWidth = 2
+  strokeWidth = 2,
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -35,6 +36,7 @@ var CheckIcon = ({
     height: size,
     viewBox: "0 0 24 24",
     fill: "none",
+    ...props,
     xmlns: "http://www.w3.org/2000/svg",
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
@@ -111,7 +113,7 @@ function Copy06Icon({
     }
   );
 }
-var CopyIcon = ({ size = 16, color = "currentColor", strokeWidth = 1.5, className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: /* @__PURE__ */ jsxRuntime.jsx(
+var CopyIcon = ({ size = 16, color = "currentColor", strokeWidth = 1.5, className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", ...props, xmlns: "http://www.w3.org/2000/svg", className, children: /* @__PURE__ */ jsxRuntime.jsx(
   "path",
   {
     d: "M6.67018 8.65794C6.95624 9.04037 7.32121 9.35681 7.74032 9.58579C8.15943 9.81477 8.62289 9.95094 9.09925 9.98505C9.57561 10.0192 10.0537 9.95044 10.5012 9.78352C10.9487 9.6166 11.355 9.35541 11.6926 9.01764L13.691 7.01931C14.2977 6.39117 14.6334 5.54986 14.6258 4.6766C14.6182 3.80335 14.2679 2.968 13.6504 2.35049C13.0329 1.73298 12.1975 1.38271 11.3243 1.37513C10.451 1.36754 9.60973 1.70324 8.98158 2.30992L7.83587 3.44897M9.33462 7.32572C9.04856 6.94329 8.68359 6.62685 8.26448 6.39787C7.84537 6.16889 7.38192 6.03273 6.90555 5.99861C6.42919 5.9645 5.95106 6.03323 5.5036 6.20015C5.05613 6.36706 4.6498 6.62826 4.31216 6.96603L2.31383 8.96435C1.70714 9.5925 1.37144 10.4338 1.37903 11.3071C1.38662 12.1803 1.73689 13.0157 2.3544 13.6332C2.97191 14.2507 3.80725 14.601 4.68051 14.6085C5.55377 14.6161 6.39507 14.2804 7.02322 13.6737L8.16227 12.5347",
@@ -152,7 +154,8 @@ var Expand01Icon_web_default = Expand01Icon;
 var LogoutIcon = ({
   size = 18,
   color = "currentColor",
-  strokeWidth = 1.5
+  strokeWidth = 1.5,
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -160,6 +163,7 @@ var LogoutIcon = ({
     height: size,
     viewBox: "0 0 18 18",
     fill: "none",
+    ...props,
     xmlns: "http://www.w3.org/2000/svg",
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
@@ -227,13 +231,14 @@ var MinimiseIcon = ({
   }
 );
 var MinimiseIcon_web_default = MinimiseIcon;
-var MinusIcon = ({ size = 18, color = "currentColor" }) => /* @__PURE__ */ jsxRuntime.jsx(
+var MinusIcon = ({ size = 18, color = "currentColor", ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     width: size,
     height: size,
     viewBox: "0 0 18 18",
     fill: "none",
+    ...props,
     xmlns: "http://www.w3.org/2000/svg",
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
@@ -370,7 +375,8 @@ var PencilIcon_web_default = PencilIcon;
 var PlusCircleIcon = ({
   size = 28,
   color = "currentColor",
-  strokeWidth = 2
+  strokeWidth = 2,
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -378,6 +384,7 @@ var PlusCircleIcon = ({
     height: size,
     viewBox: "0 0 28 28",
     fill: "none",
+    ...props,
     xmlns: "http://www.w3.org/2000/svg",
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
@@ -392,7 +399,7 @@ var PlusCircleIcon = ({
   }
 );
 var PlusCircleIcon_web_default = PlusCircleIcon;
-var PlusIcon = ({ size = 16, color = "currentColor", strokeWidth = "1.25" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
+var PlusIcon = ({ size = 16, color = "currentColor", strokeWidth = "1.25", ...props }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", ...props, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
   "path",
   {
     d: "M8.00065 3.33203V12.6654M3.33398 7.9987H12.6673",
@@ -434,7 +441,8 @@ var RefreshIcon = ({
 var ResetIcon = ({
   size = 18,
   color = "currentColor",
-  className = ""
+  className = "",
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -442,6 +450,7 @@ var ResetIcon = ({
     height: size,
     viewBox: "0 0 18 18",
     fill: "none",
+    ...props,
     className,
     xmlns: "http://www.w3.org/2000/svg",
     children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -457,13 +466,14 @@ var ResetIcon = ({
   }
 );
 var ResetIcon_web_default = React6__namespace.default.memo(ResetIcon);
-var SettingsIcon = ({ size = 18, color = "currentColor" }) => /* @__PURE__ */ jsxRuntime.jsxs(
+var SettingsIcon = ({ size = 18, color = "currentColor", ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
     width: size,
     height: size,
     viewBox: "0 0 18 18",
     fill: "none",
+    ...props,
     xmlns: "http://www.w3.org/2000/svg",
     children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -492,7 +502,8 @@ var SettingsIcon = ({ size = 18, color = "currentColor" }) => /* @__PURE__ */ js
 var SettingsIcon_web_default = SettingsIcon;
 var SlidersIcon = ({
   size = 18,
-  color = "currentColor"
+  color = "currentColor",
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -500,6 +511,7 @@ var SlidersIcon = ({
     height: size,
     viewBox: "0 0 18 18",
     fill: "none",
+    ...props,
     xmlns: "http://www.w3.org/2000/svg",
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
@@ -518,7 +530,8 @@ var SmallMagnifyIcon = ({
   size = 14,
   color = "currentColor",
   strokeWidth = 1.5,
-  className
+  className,
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -526,6 +539,7 @@ var SmallMagnifyIcon = ({
     height: size,
     viewBox: "0 0 14 14",
     fill: "none",
+    ...props,
     className,
     xmlns: "http://www.w3.org/2000/svg",
     children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -569,7 +583,7 @@ var Trash02Icon = ({
   }
 );
 var Trash02Icon_web_default = Trash02Icon;
-var TrashIcon = ({ size = 20, color = "currentColor" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
+var TrashIcon = ({ size = 20, color = "currentColor", ...props }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", ...props, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
   "path",
   {
     d: "M13.3333 5.0013V4.33464C13.3333 3.40121 13.3333 2.9345 13.1517 2.57798C12.9919 2.26438 12.7369 2.00941 12.4233 1.84962C12.0668 1.66797 11.6001 1.66797 10.6667 1.66797H9.33333C8.39991 1.66797 7.9332 1.66797 7.57668 1.84962C7.26308 2.00941 7.00811 2.26438 6.84832 2.57798C6.66667 2.9345 6.66667 3.40121 6.66667 4.33464V5.0013M8.33333 9.58464V13.7513M11.6667 9.58464V13.7513M2.5 5.0013H17.5M15.8333 5.0013V14.3346C15.8333 15.7348 15.8333 16.4348 15.5608 16.9696C15.3212 17.44 14.9387 17.8225 14.4683 18.0622C13.9335 18.3346 13.2335 18.3346 11.8333 18.3346H8.16667C6.76654 18.3346 6.06647 18.3346 5.53169 18.0622C5.06129 17.8225 4.67883 17.44 4.43915 16.9696C4.16667 16.4348 4.16667 15.7348 4.16667 14.3346V5.0013",
@@ -581,7 +595,7 @@ var TrashIcon = ({ size = 20, color = "currentColor" }) => /* @__PURE__ */ jsxRu
   }
 ) });
 var TrashIcon_web_default = TrashIcon;
-var XIcon = ({ size = 16, strokeWidth = 1, color = "currentColor" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
+var XIcon = ({ size = 16, strokeWidth = 1, color = "currentColor", ...props }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", ...props, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
   "path",
   {
     d: "M11.3327 4.66797L4.66602 11.3346M4.66602 4.66797L11.3327 11.3346",
@@ -626,7 +640,7 @@ var AlertTriangleIcon = React6__namespace.forwardRef(
 );
 AlertTriangleIcon.displayName = "AlertTriangleIcon";
 var AlertTriangleIcon_web_default = AlertTriangleIcon;
-function BellIcon({ size = 18, className }) {
+function BellIcon({ size = 18, className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
@@ -635,6 +649,7 @@ function BellIcon({ size = 18, className }) {
       height: size,
       viewBox: "0 0 18 18",
       fill: "none",
+      ...props,
       xmlns: "http://www.w3.org/2000/svg",
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "path",
@@ -714,13 +729,14 @@ var InfoCircleIcon = ({
   }
 );
 var InfoCircleIcon_web_default = InfoCircleIcon;
-var InfoIcon = ({ size = 18, color = "currentColor", strokeWidth = 1.5 }) => /* @__PURE__ */ jsxRuntime.jsxs(
+var InfoIcon = ({ size = 18, color = "currentColor", strokeWidth = 1.5, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
     width: size,
     height: size,
     viewBox: "0 0 18 18",
     fill: "none",
+    ...props,
     xmlns: "http://www.w3.org/2000/svg",
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_info)", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -867,7 +883,8 @@ var ArrowDownIcon = ({
 var ArrowLeftIcon = ({
   size = 16,
   color = "currentColor",
-  strokeWidth = 1.5
+  strokeWidth = 1.5,
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -875,6 +892,7 @@ var ArrowLeftIcon = ({
     height: size,
     viewBox: "0 0 16 16",
     fill: "none",
+    ...props,
     xmlns: "http://www.w3.org/2000/svg",
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
@@ -990,7 +1008,8 @@ function ArrowUpIcon({
 var ChevronLeftIcon = ({
   size = 16,
   color = "currentColor",
-  strokeWidth = 1.25
+  strokeWidth = 1.25,
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -998,6 +1017,7 @@ var ChevronLeftIcon = ({
     height: size,
     viewBox: "0 0 16 16",
     fill: "none",
+    ...props,
     xmlns: "http://www.w3.org/2000/svg",
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
@@ -1015,7 +1035,8 @@ var ChevronLeftIcon_web_default = ChevronLeftIcon;
 var ChevronSelectorIcon = ({
   size = 24,
   color = "currentColor",
-  strokeWidth = 2
+  strokeWidth = 2,
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -1023,6 +1044,7 @@ var ChevronSelectorIcon = ({
     height: size,
     viewBox: "0 0 20 20",
     fill: "none",
+    ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
@@ -1156,6 +1178,7 @@ var PostalIcon = ({
     height: size,
     className,
     fill: "none",
+    ...props,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 236.46 236.32",
     children: [
@@ -1222,7 +1245,8 @@ var InstagramWhiteIcon_web_default = InstagramWhiteIcon;
 var BarChart01Icon = ({
   size = 18,
   color = "currentColor",
-  className
+  className,
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -1230,6 +1254,7 @@ var BarChart01Icon = ({
     height: size,
     viewBox: "0 0 18 18",
     fill: "none",
+    ...props,
     xmlns: "http://www.w3.org/2000/svg",
     className,
     role: "img",
@@ -1467,7 +1492,8 @@ var MessageSquareTextIcon_web_default = MessageSquareTextIcon;
 var MessageTextCircle01Icon = ({
   size = 18,
   color = "currentColor",
-  className
+  className,
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -1475,6 +1501,7 @@ var MessageTextCircle01Icon = ({
     height: size,
     viewBox: "0 0 18 18",
     fill: "none",
+    ...props,
     xmlns: "http://www.w3.org/2000/svg",
     className,
     role: "img",
@@ -1638,7 +1665,8 @@ var Download04Icon = ({
   ariaLabel,
   tabIndex,
   onClick,
-  onKeyDown
+  onKeyDown,
+  ...props
 }) => {
   const isInteractive = Boolean(onClick || onKeyDown);
   const computedTabIndex = tabIndex ?? (isInteractive ? 0 : -1);
@@ -1650,6 +1678,7 @@ var Download04Icon = ({
       height: size,
       viewBox: "0 0 24 24",
       fill: "none",
+      ...props,
       role: "img",
       "aria-label": ariaLabel || title || "Download",
       focusable: false,
@@ -1699,13 +1728,14 @@ var DownloadCircleIcon = ({
     ]
   }
 );
-var DownloadIcon = ({ size = 18, color = "currentColor", strokeWidth = 1.5, className }) => /* @__PURE__ */ jsxRuntime.jsx(
+var DownloadIcon = ({ size = 18, color = "currentColor", strokeWidth = 1.5, className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     width: size,
     height: size,
     viewBox: "0 0 18 18",
     fill: "none",
+    ...props,
     xmlns: "http://www.w3.org/2000/svg",
     className,
     children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2063,7 +2093,8 @@ var CoinsStacked03Icon = React6__namespace.forwardRef(
     stroke = "currentColor",
     className,
     title,
-    onClick
+    onClick,
+    ...props
   }, ref) => {
     const isInteractive = Boolean(onClick);
     const handleKeyDown2 = (event) => {
@@ -2081,6 +2112,7 @@ var CoinsStacked03Icon = React6__namespace.forwardRef(
         height: size,
         viewBox: "0 0 20 20",
         fill: "none",
+        ...props,
         xmlns: "http://www.w3.org/2000/svg",
         className,
         stroke,
@@ -2103,13 +2135,14 @@ var CoinsStacked03Icon = React6__namespace.forwardRef(
 );
 CoinsStacked03Icon.displayName = "CoinsStacked03Icon";
 var CoinsStacked03Icon_web_default = CoinsStacked03Icon;
-var CreditCardIcon = ({ size = 18, color = "currentColor" }) => /* @__PURE__ */ jsxRuntime.jsx(
+var CreditCardIcon = ({ size = 18, color = "currentColor", ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     width: size,
     height: size,
     viewBox: "0 0 18 18",
     fill: "none",
+    ...props,
     xmlns: "http://www.w3.org/2000/svg",
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
@@ -2124,13 +2157,14 @@ var CreditCardIcon = ({ size = 18, color = "currentColor" }) => /* @__PURE__ */
   }
 );
 var CreditCardIcon_web_default = CreditCardIcon;
-var Wallet01Icon = ({ size = 18, color = "currentColor" }) => /* @__PURE__ */ jsxRuntime.jsx(
+var Wallet01Icon = ({ size = 18, color = "currentColor", ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     width: size,
     height: size,
     viewBox: "0 0 18 18",
     fill: "none",
+    ...props,
     xmlns: "http://www.w3.org/2000/svg",
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
@@ -2169,7 +2203,7 @@ var ActivityIcon = ({ size = 18, ...props }) => {
   );
 };
 var ActivityIcon_web_default = ActivityIcon;
-var BookIcon = ({ size = 18, color = "currentColor" }) => /* @__PURE__ */ jsxRuntime.jsx(
+var BookIcon = ({ size = 18, color = "currentColor", ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     width: size,
@@ -2177,6 +2211,7 @@ var BookIcon = ({ size = 18, color = "currentColor" }) => /* @__PURE__ */ jsxRun
     viewBox: "0 0 18 18",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
@@ -2192,7 +2227,8 @@ var BookIcon = ({ size = 18, color = "currentColor" }) => /* @__PURE__ */ jsxRun
 var BookIcon_web_default = BookIcon;
 var Briefcase01Icon = ({
   size = 24,
-  color = "currentColor"
+  color = "currentColor",
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -2201,6 +2237,7 @@ var Briefcase01Icon = ({
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
@@ -2216,7 +2253,8 @@ var Briefcase01Icon = ({
 var Briefcase01Icon_web_default = Briefcase01Icon;
 var Building03Icon = ({
   size = 24,
-  color = "currentColor"
+  color = "currentColor",
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -2225,6 +2263,7 @@ var Building03Icon = ({
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
@@ -2270,7 +2309,8 @@ var BookmarkIcon_web_default = BookmarkIcon;
 var CollaborativeIcon = ({
   size = 18,
   color = "currentColor",
-  strokeWidth = 1.5
+  strokeWidth = 1.5,
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -2279,6 +2319,7 @@ var CollaborativeIcon = ({
     viewBox: "0 0 18 18",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
@@ -2516,7 +2557,8 @@ var FaceSmileIcon_web_default = FaceSmileIcon;
 var Flag01Icon = ({
   size = 18,
   color = "currentColor",
-  className
+  className,
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -2526,6 +2568,7 @@ var Flag01Icon = ({
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     className,
+    ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
@@ -2853,7 +2896,7 @@ var Image03Icon = ({
   );
 };
 var Image03Icon_web_default = Image03Icon;
-var LandingCollaborativeIcon = ({ size = 24, currentColor = "currentColor" }) => /* @__PURE__ */ jsxRuntime.jsx(
+var LandingCollaborativeIcon = ({ size = 24, currentColor = "currentColor", ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     width: size,
@@ -2861,6 +2904,7 @@ var LandingCollaborativeIcon = ({ size = 24, currentColor = "currentColor" }) =>
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
@@ -2874,7 +2918,7 @@ var LandingCollaborativeIcon = ({ size = 24, currentColor = "currentColor" }) =>
   }
 );
 var LandingCollaborativeIcon_web_default = LandingCollaborativeIcon;
-var LandingControlsIcon = ({ size = 24, currentColor = "currentColor" }) => /* @__PURE__ */ jsxRuntime.jsx(
+var LandingControlsIcon = ({ size = 24, currentColor = "currentColor", ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     width: size,
@@ -2882,6 +2926,7 @@ var LandingControlsIcon = ({ size = 24, currentColor = "currentColor" }) => /* @
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
@@ -2898,7 +2943,8 @@ var LandingControlsIcon_web_default = LandingControlsIcon;
 var LandingMusicIcon = ({
   size = 24,
   color = "currentColor",
-  strokeWidth = 1.5
+  strokeWidth = 1.5,
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -2907,6 +2953,7 @@ var LandingMusicIcon = ({
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
@@ -2920,7 +2967,7 @@ var LandingMusicIcon = ({
   }
 );
 var LandingMusicIcon_web_default = LandingMusicIcon;
-var LandingShareIcon = ({ size = 24, color = "#020202" }) => /* @__PURE__ */ jsxRuntime.jsx(
+var LandingShareIcon = ({ size = 24, color = "#020202", ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     width: size,
@@ -2928,6 +2975,7 @@ var LandingShareIcon = ({ size = 24, color = "#020202" }) => /* @__PURE__ */ jsx
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
@@ -2941,7 +2989,7 @@ var LandingShareIcon = ({ size = 24, color = "#020202" }) => /* @__PURE__ */ jsx
   }
 );
 var LandingShareIcon_web_default = LandingShareIcon;
-var LandingUploadIcon = ({ size = 24, color = "#020202" }) => /* @__PURE__ */ jsxRuntime.jsx(
+var LandingUploadIcon = ({ size = 24, color = "#020202", ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     width: size,
@@ -2949,6 +2997,7 @@ var LandingUploadIcon = ({ size = 24, color = "#020202" }) => /* @__PURE__ */ js
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
@@ -3021,7 +3070,7 @@ var LyricsIcon = (props) => {
   );
 };
 var LyricsIcon_web_default = LyricsIcon;
-var MoonIcon = ({ size = 18, color = "currentColor" }) => /* @__PURE__ */ jsxRuntime.jsxs(
+var MoonIcon = ({ size = 18, color = "currentColor", ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
     width: size,
@@ -3029,6 +3078,7 @@ var MoonIcon = ({ size = 18, color = "currentColor" }) => /* @__PURE__ */ jsxRun
     viewBox: "0 0 18 18",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_moonIcon)", children: /* @__PURE__ */ jsxRuntime.jsx(
         "path",
@@ -3152,7 +3202,7 @@ var PinIcon = React6__namespace.forwardRef(
 );
 PinIcon.displayName = "PinIcon";
 var PinIcon_web_default = PinIcon;
-var QuestionCircleIcon = ({ size = 18, color = "currentColor" }) => /* @__PURE__ */ jsxRuntime.jsxs(
+var QuestionCircleIcon = ({ size = 18, color = "currentColor", ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
     width: size,
@@ -3160,6 +3210,7 @@ var QuestionCircleIcon = ({ size = 18, color = "currentColor" }) => /* @__PURE__
     viewBox: "0 0 18 18",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_questionCircle)", children: /* @__PURE__ */ jsxRuntime.jsx(
         "path",
@@ -3245,7 +3296,8 @@ var Recording02_web_default = Recording02Icon;
 var Share01Icon = ({
   size = 18,
   color = "currentColor",
-  className
+  className,
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -3257,6 +3309,7 @@ var Share01Icon = ({
     className,
     role: "img",
     "aria-hidden": "true",
+    ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
@@ -3329,7 +3382,8 @@ function StarIcon({
 }
 var Star01Icon = ({
   size = 24,
-  color = "currentColor"
+  color = "currentColor",
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -3338,6 +3392,7 @@ var Star01Icon = ({
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
@@ -3430,7 +3485,8 @@ var Stars01Icon = ({
   className,
   currentColor,
   fill,
-  title
+  title,
+  ...props
 }) => {
   const ariaProps = title ? { role: "img", "aria-label": title } : { "aria-hidden": true };
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3443,6 +3499,7 @@ var Stars01Icon = ({
       className,
       fill: currentColor || "currentColor",
       ...ariaProps,
+      ...props,
       children: [
         title ? /* @__PURE__ */ jsxRuntime.jsx("title", { children: title }) : null,
         /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#clip0_878_14485)", children: [
@@ -3531,7 +3588,8 @@ var Stars02Icon_web_default = StarsIcon02;
 var Star04Icon2 = ({
   size = 18,
   color = "currentColor",
-  className
+  className,
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
@@ -3541,6 +3599,7 @@ var Star04Icon2 = ({
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     className,
+    ...props,
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_10870_4507)", children: /* @__PURE__ */ jsxRuntime.jsx(
         "path",
@@ -3749,7 +3808,8 @@ TenSecondsBackIcon.displayName = "TenSecondsBackIcon";
 var SecondsBackIcon_web_default = TenSecondsBackIcon;
 function EqualizerIcon({
   className,
-  size = 18
+  size = 18,
+  ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
@@ -3758,6 +3818,7 @@ function EqualizerIcon({
       height: size,
       viewBox: "0 0 18 18",
       fill: "none",
+      ...props,
       xmlns: "http://www.w3.org/2000/svg",
       className,
       "aria-label": "Equalizer icon",
@@ -3776,7 +3837,8 @@ function EqualizerIcon({
 }
 var Film01Icon = ({
   size = 24,
-  color = "currentColor"
+  color = "currentColor",
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -3784,6 +3846,7 @@ var Film01Icon = ({
     height: size,
     viewBox: "0 0 24 24",
     fill: "none",
+    ...props,
     xmlns: "http://www.w3.org/2000/svg",
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
@@ -3800,7 +3863,8 @@ var Film01Icon = ({
 var Film01Icon_web_default = Film01Icon;
 var Film03Icon = ({
   size = 24,
-  color = "currentColor"
+  color = "currentColor",
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -3808,6 +3872,7 @@ var Film03Icon = ({
     height: size,
     viewBox: "0 0 24 24",
     fill: "none",
+    ...props,
     xmlns: "http://www.w3.org/2000/svg",
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
@@ -3824,7 +3889,8 @@ var Film03Icon = ({
 var Film03Icon_web_default = Film03Icon;
 var Microphone01Icon = ({
   size = 24,
-  color = "currentColor"
+  color = "currentColor",
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
@@ -3832,6 +3898,7 @@ var Microphone01Icon = ({
     height: size,
     viewBox: "0 0 24 24",
     fill: "none",
+    ...props,
     xmlns: "http://www.w3.org/2000/svg",
     children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -3962,13 +4029,14 @@ var NextTrackIcon = React6__namespace.forwardRef(
 );
 NextTrackIcon.displayName = "NextTrackIcon";
 var NextTrackIcon_web_default = NextTrackIcon;
-var PauseIcon = ({ size = 20, color = "currentColor" }) => /* @__PURE__ */ jsxRuntime.jsxs(
+var PauseIcon = ({ size = 20, color = "currentColor", ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
     width: size,
     height: size,
     viewBox: "0 0 20 20",
     fill: "none",
+    ...props,
     xmlns: "http://www.w3.org/2000/svg",
     children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -3995,13 +4063,14 @@ var PauseIcon = ({ size = 20, color = "currentColor" }) => /* @__PURE__ */ jsxRu
   }
 );
 var PauseIcon_web_default = PauseIcon;
-var PlayIcon = ({ size = 20, color = "currentColor" }) => /* @__PURE__ */ jsxRuntime.jsx(
+var PlayIcon = ({ size = 20, color = "currentColor", ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     width: size,
     height: size,
     viewBox: "0 0 22 20",
     fill: "none",
+    ...props,
     xmlns: "http://www.w3.org/2000/svg",
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
@@ -4090,7 +4159,8 @@ PreviousTrackIcon.displayName = "PreviousTrackIcon";
 var PreviousTrackIcon_web_default = PreviousTrackIcon;
 var Recording03Icon = ({
   size = 24,
-  color = "currentColor"
+  color = "currentColor",
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -4098,6 +4168,7 @@ var Recording03Icon = ({
     height: size,
     viewBox: "0 0 24 24",
     fill: "none",
+    ...props,
     xmlns: "http://www.w3.org/2000/svg",
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
@@ -4115,7 +4186,8 @@ var Recording03Icon_web_default = Recording03Icon;
 var Repeat01Icon = ({
   size = 18,
   color = "currentColor",
-  className
+  className,
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -4123,6 +4195,7 @@ var Repeat01Icon = ({
     height: size,
     viewBox: "0 0 18 18",
     fill: "none",
+    ...props,
     xmlns: "http://www.w3.org/2000/svg",
     className,
     role: "img",
@@ -4291,7 +4364,8 @@ TenSecondsForwardIcon.displayName = "TenSecondsForwardIcon";
 var TenSecondsForwardIcon_web_default = TenSecondsForwardIcon;
 var VideoRecorderIcon = ({
   size = 24,
-  color = "currentColor"
+  color = "currentColor",
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
@@ -4299,6 +4373,7 @@ var VideoRecorderIcon = ({
     height: size,
     viewBox: "0 0 24 24",
     fill: "none",
+    ...props,
     xmlns: "http://www.w3.org/2000/svg",
     children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -4477,7 +4552,7 @@ function DotgridIcon({
     }
   );
 }
-var FilterIcon = ({ size = 18, color = "currentColor" }) => /* @__PURE__ */ jsxRuntime.jsx(
+var FilterIcon = ({ size = 18, color = "currentColor", ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     width: size,
@@ -4485,6 +4560,7 @@ var FilterIcon = ({ size = 18, color = "currentColor" }) => /* @__PURE__ */ jsxR
     viewBox: "0 0 18 18",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
@@ -4812,6 +4888,32 @@ var ListIcon = React6__namespace.forwardRef(
     }
   )
 );
+var Menu02Icon = React6__namespace.forwardRef(
+  ({ width = 18, height = 18, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      ref,
+      width,
+      height,
+      viewBox: "0 0 28 28",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M3.5 14H17.5M3.5 7H24.5M3.5 21H24.5",
+          stroke: "currentColor",
+          strokeWidth: "2.25",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  )
+);
+Menu02Icon.displayName = "Menu02Icon";
+var Menu02Icon_web_default = Menu02Icon;
 var Menu03Icon = React6__namespace.forwardRef(
   ({ width = 18, height = 18, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
@@ -4905,7 +5007,8 @@ var Rows01Icon_web_default = Rows01Icon;
 var Rows03Icon = ({
   className,
   size = 24,
-  strokeWidth = 2
+  strokeWidth = 2,
+  ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
@@ -4915,6 +5018,7 @@ var Rows03Icon = ({
       height: size,
       viewBox: "0 0 24 24",
       fill: "none",
+      ...props,
       stroke: "currentColor",
       strokeWidth,
       strokeLinecap: "round",
@@ -4927,7 +5031,7 @@ var Rows03Icon = ({
   );
 };
 var Rows03Icon_web_default = Rows03Icon;
-var SearchIcon = ({ size = 18, color = "currentColor", strokeWidth = "1.5" }) => /* @__PURE__ */ jsxRuntime.jsx(
+var SearchIcon = ({ size = 18, color = "currentColor", strokeWidth = "1.5", ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     width: size,
@@ -4935,6 +5039,7 @@ var SearchIcon = ({ size = 18, color = "currentColor", strokeWidth = "1.5" }) =>
     viewBox: "0 0 18 18",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
@@ -4948,7 +5053,7 @@ var SearchIcon = ({ size = 18, color = "currentColor", strokeWidth = "1.5" }) =>
   }
 );
 var SearchIcon_web_default = SearchIcon;
-var SidebarMenuIcon = ({ size = 24, color = "currentColor" }) => /* @__PURE__ */ jsxRuntime.jsx(
+var SidebarMenuIcon = ({ size = 24, color = "currentColor", ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     width: size,
@@ -4956,6 +5061,7 @@ var SidebarMenuIcon = ({ size = 24, color = "currentColor" }) => /* @__PURE__ */
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
@@ -5095,7 +5201,7 @@ var Lock03FilledIcon = ({
   }
 );
 var Lock03FilledIcon_web_default = Lock03FilledIcon;
-var LockIcon = ({ size = 18, color = "currentColor" }) => /* @__PURE__ */ jsxRuntime.jsx(
+var LockIcon = ({ size = 18, color = "currentColor", ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     width: size,
@@ -5103,6 +5209,7 @@ var LockIcon = ({ size = 18, color = "currentColor" }) => /* @__PURE__ */ jsxRun
     viewBox: "0 0 18 18",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
@@ -5169,7 +5276,7 @@ var PasswordInputIcon = ({
     )
   }
 );
-function AppleMusicIcon({ size = 28, title = "Apple Music", className }) {
+function AppleMusicIcon({ size = 28, title = "Apple Music", className, ...props }) {
   const gid = React6__namespace.useId();
   const gradId = `am-grad-${gid}`;
   const clipId = `am-clip-${gid}`;
@@ -5180,6 +5287,7 @@ function AppleMusicIcon({ size = 28, title = "Apple Music", className }) {
       height: size,
       viewBox: "0 0 28 28",
       fill: "none",
+      ...props,
       xmlns: "http://www.w3.org/2000/svg",
       "aria-label": title,
       role: "img",
@@ -5260,7 +5368,8 @@ var AudiomackIcon = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs
 var AudiomackIcon_web_default = AudiomackIcon;
 var GeniusIcon = ({
   size = 24,
-  color = "currentColor"
+  color = "currentColor",
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -5269,6 +5378,7 @@ var GeniusIcon = ({
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
@@ -5281,7 +5391,8 @@ var GeniusIcon = ({
 var GeniusIcon_web_default = GeniusIcon;
 var ImdbIcon = ({
   size = 24,
-  color = "#000000"
+  color = "#000000",
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
@@ -5290,6 +5401,7 @@ var ImdbIcon = ({
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "path",
@@ -5380,7 +5492,8 @@ var InstagramShortsIcon = ({ className, ...props }) => /* @__PURE__ */ jsxRuntim
 var InstagramShortsIcon_web_default = InstagramShortsIcon;
 var LinkedinIcon = ({
   size = 24,
-  color = "currentColor"
+  color = "currentColor",
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -5389,6 +5502,7 @@ var LinkedinIcon = ({
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
@@ -5401,7 +5515,8 @@ var LinkedinIcon = ({
 var LinkedinIcon_web_default = LinkedinIcon;
 var MusoIcon = ({
   size = 24,
-  color = "currentColor"
+  color = "currentColor",
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -5410,6 +5525,7 @@ var MusoIcon = ({
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
@@ -5527,7 +5643,8 @@ var SpotifyIcon = ({ className, size = 18, ...props }) => /* @__PURE__ */ jsxRun
 var SpotifyIcon_web_default = SpotifyIcon;
 var Spotify02Icon = ({
   size = 24,
-  color = "currentColor"
+  color = "currentColor",
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -5536,6 +5653,7 @@ var Spotify02Icon = ({
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
@@ -5761,7 +5879,7 @@ function AccountIcon({ size = 16, ...props }) {
     }
   );
 }
-var UserApproveIcon = ({ size = 18, color = "currentColor" }) => /* @__PURE__ */ jsxRuntime.jsx(
+var UserApproveIcon = ({ size = 18, color = "currentColor", ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     width: size,
@@ -5769,6 +5887,7 @@ var UserApproveIcon = ({ size = 18, color = "currentColor" }) => /* @__PURE__ */
     viewBox: "0 0 18 18",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
@@ -5785,7 +5904,8 @@ var UserApproveIcon_web_default = UserApproveIcon;
 var UserIcon = ({
   size = 18,
   color = "currentColor",
-  strokeWidth = 1.5
+  strokeWidth = 1.5,
+  ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -5794,6 +5914,7 @@ var UserIcon = ({
     viewBox: "0 0 18 18",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
@@ -5931,7 +6052,7 @@ function Users03Icon({
     }
   );
 }
-var UsersIcon = ({ size = 20, color = "currentColor", strokeWidth = 1.5 }) => /* @__PURE__ */ jsxRuntime.jsx(
+var UsersIcon = ({ size = 20, color = "currentColor", strokeWidth = 1.5, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     width: size,
@@ -5939,6 +6060,7 @@ var UsersIcon = ({ size = 20, color = "currentColor", strokeWidth = 1.5 }) => /*
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
@@ -5954,7 +6076,8 @@ var UsersIcon = ({ size = 20, color = "currentColor", strokeWidth = 1.5 }) => /*
 var UsersIcon_web_default = UsersIcon;
 var UsersPlusIcon = ({
   className,
-  size = 16
+  size = 16,
+  ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
@@ -5963,6 +6086,7 @@ var UsersPlusIcon = ({
       height: size,
       viewBox: "0 0 16 16",
       fill: "none",
+      ...props,
       xmlns: "http://www.w3.org/2000/svg",
       className,
       "aria-label": "Users plus icon",
@@ -6190,6 +6314,7 @@ exports.LogoutIcon = LogoutIcon_web_default;
 exports.LyricsIcon = LyricsIcon_web_default;
 exports.MailIcon = MailIcon_web_default;
 exports.MediaUploadIcon = MediaUploadIcon_web_default;
+exports.Menu02Icon = Menu02Icon_web_default;
 exports.Menu03Icon = Menu03Icon_web_default;
 exports.MenuIcon = MenuIcon_web_default;
 exports.MessageSquareTextIcon = MessageSquareTextIcon_web_default;