diff --git a/assets/web/icons/admin.cjs b/assets/web/icons/admin.cjs
index db877958..f0d52fc4 100644
--- a/assets/web/icons/admin.cjs
+++ b/assets/web/icons/admin.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function AdminIcon(props) {
+var React = require("react");
+function AdminIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       fillRule: "evenodd",
@@ -16,4 +18,4 @@ function AdminIcon(props) {
 }
 ;
 AdminIcon.displayName = "AdminIcon";
-module.exports = AdminIcon;
\ No newline at end of file
+module.exports = React.forwardRef(AdminIcon);
\ No newline at end of file
diff --git a/assets/web/icons/admin.d.ts b/assets/web/icons/admin.d.ts
index 2e16f0f9..67916d0a 100644
--- a/assets/web/icons/admin.d.ts
+++ b/assets/web/icons/admin.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * admin.svg
  */
-declare const AdminIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const AdminIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default AdminIcon;
diff --git a/assets/web/icons/admin.js b/assets/web/icons/admin.js
index e3173421..180afb2e 100644
--- a/assets/web/icons/admin.js
+++ b/assets/web/icons/admin.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function AdminIcon(props) {
+function AdminIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       fillRule: "evenodd",
@@ -16,4 +18,4 @@ function AdminIcon(props) {
 }
 ;
 AdminIcon.displayName = "AdminIcon";
-export default AdminIcon;
\ No newline at end of file
+export default forwardRef(AdminIcon);
\ No newline at end of file
diff --git a/assets/web/icons/arrow-down.cjs b/assets/web/icons/arrow-down.cjs
index dab3e50a..012550d5 100644
--- a/assets/web/icons/arrow-down.cjs
+++ b/assets/web/icons/arrow-down.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ArrowDownIcon(props) {
+var React = require("react");
+function ArrowDownIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12 4.5a1 1 0 0 1 1 1v10.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 1 1 1.414-1.414L11 16.086V5.5a1 1 0 0 1 1-1Z"
@@ -14,4 +16,4 @@ function ArrowDownIcon(props) {
 }
 ;
 ArrowDownIcon.displayName = "ArrowDownIcon";
-module.exports = ArrowDownIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ArrowDownIcon);
\ No newline at end of file
diff --git a/assets/web/icons/arrow-down.d.ts b/assets/web/icons/arrow-down.d.ts
index f1afcd3a..5b862ee4 100644
--- a/assets/web/icons/arrow-down.d.ts
+++ b/assets/web/icons/arrow-down.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * arrow-down.svg
  */
-declare const ArrowDownIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ArrowDownIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ArrowDownIcon;
diff --git a/assets/web/icons/arrow-down.js b/assets/web/icons/arrow-down.js
index dc0ea7b6..b129f008 100644
--- a/assets/web/icons/arrow-down.js
+++ b/assets/web/icons/arrow-down.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ArrowDownIcon(props) {
+function ArrowDownIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M12 4.5a1 1 0 0 1 1 1v10.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 1 1 1.414-1.414L11 16.086V5.5a1 1 0 0 1 1-1Z"
@@ -14,4 +16,4 @@ function ArrowDownIcon(props) {
 }
 ;
 ArrowDownIcon.displayName = "ArrowDownIcon";
-export default ArrowDownIcon;
\ No newline at end of file
+export default forwardRef(ArrowDownIcon);
\ No newline at end of file
diff --git a/assets/web/icons/arrow-left.cjs b/assets/web/icons/arrow-left.cjs
index 910f1978..93aad6fa 100644
--- a/assets/web/icons/arrow-left.cjs
+++ b/assets/web/icons/arrow-left.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ArrowLeftIcon(props) {
+var React = require("react");
+function ArrowLeftIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12.207 5.293a1 1 0 0 1 0 1.414L7.914 11H18.5a1 1 0 1 1 0 2H7.914l4.293 4.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 0Z"
@@ -14,4 +16,4 @@ function ArrowLeftIcon(props) {
 }
 ;
 ArrowLeftIcon.displayName = "ArrowLeftIcon";
-module.exports = ArrowLeftIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ArrowLeftIcon);
\ No newline at end of file
diff --git a/assets/web/icons/arrow-left.d.ts b/assets/web/icons/arrow-left.d.ts
index df219fba..d5e61792 100644
--- a/assets/web/icons/arrow-left.d.ts
+++ b/assets/web/icons/arrow-left.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * arrow-left.svg
  */
-declare const ArrowLeftIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ArrowLeftIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ArrowLeftIcon;
diff --git a/assets/web/icons/arrow-left.js b/assets/web/icons/arrow-left.js
index 05808df0..37315a52 100644
--- a/assets/web/icons/arrow-left.js
+++ b/assets/web/icons/arrow-left.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ArrowLeftIcon(props) {
+function ArrowLeftIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M12.207 5.293a1 1 0 0 1 0 1.414L7.914 11H18.5a1 1 0 1 1 0 2H7.914l4.293 4.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 0Z"
@@ -14,4 +16,4 @@ function ArrowLeftIcon(props) {
 }
 ;
 ArrowLeftIcon.displayName = "ArrowLeftIcon";
-export default ArrowLeftIcon;
\ No newline at end of file
+export default forwardRef(ArrowLeftIcon);
\ No newline at end of file
diff --git a/assets/web/icons/arrow-right.cjs b/assets/web/icons/arrow-right.cjs
index b1404bfe..9ff494f3 100644
--- a/assets/web/icons/arrow-right.cjs
+++ b/assets/web/icons/arrow-right.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ArrowRightIcon(props) {
+var React = require("react");
+function ArrowRightIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M11.793 5.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414-1.414L16.086 13H5.5a1 1 0 1 1 0-2h10.586l-4.293-4.293a1 1 0 0 1 0-1.414Z"
@@ -14,4 +16,4 @@ function ArrowRightIcon(props) {
 }
 ;
 ArrowRightIcon.displayName = "ArrowRightIcon";
-module.exports = ArrowRightIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ArrowRightIcon);
\ No newline at end of file
diff --git a/assets/web/icons/arrow-right.d.ts b/assets/web/icons/arrow-right.d.ts
index 7b8bee88..c56b0fea 100644
--- a/assets/web/icons/arrow-right.d.ts
+++ b/assets/web/icons/arrow-right.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * arrow-right.svg
  */
-declare const ArrowRightIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ArrowRightIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ArrowRightIcon;
diff --git a/assets/web/icons/arrow-right.js b/assets/web/icons/arrow-right.js
index 947a2091..7896364e 100644
--- a/assets/web/icons/arrow-right.js
+++ b/assets/web/icons/arrow-right.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ArrowRightIcon(props) {
+function ArrowRightIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M11.793 5.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414-1.414L16.086 13H5.5a1 1 0 1 1 0-2h10.586l-4.293-4.293a1 1 0 0 1 0-1.414Z"
@@ -14,4 +16,4 @@ function ArrowRightIcon(props) {
 }
 ;
 ArrowRightIcon.displayName = "ArrowRightIcon";
-export default ArrowRightIcon;
\ No newline at end of file
+export default forwardRef(ArrowRightIcon);
\ No newline at end of file
diff --git a/assets/web/icons/arrow-up-right.cjs b/assets/web/icons/arrow-up-right.cjs
index 249ac734..ca837c70 100644
--- a/assets/web/icons/arrow-up-right.cjs
+++ b/assets/web/icons/arrow-up-right.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ArrowUpRightIcon(props) {
+var React = require("react");
+function ArrowUpRightIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M17.924 6.617a.996.996 0 0 1 .076.38V15a1 1 0 1 1-2 0V9.414l-8.293 8.293a1 1 0 0 1-1.414-1.414L14.586 8H9a1 1 0 0 1 0-2h8a.997.997 0 0 1 .924.617Z"
@@ -14,4 +16,4 @@ function ArrowUpRightIcon(props) {
 }
 ;
 ArrowUpRightIcon.displayName = "ArrowUpRightIcon";
-module.exports = ArrowUpRightIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ArrowUpRightIcon);
\ No newline at end of file
diff --git a/assets/web/icons/arrow-up-right.d.ts b/assets/web/icons/arrow-up-right.d.ts
index b46522d2..96fed5f4 100644
--- a/assets/web/icons/arrow-up-right.d.ts
+++ b/assets/web/icons/arrow-up-right.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * arrow-up-right.svg
  */
-declare const ArrowUpRightIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ArrowUpRightIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ArrowUpRightIcon;
diff --git a/assets/web/icons/arrow-up-right.js b/assets/web/icons/arrow-up-right.js
index 5e178c7a..9cc5eba6 100644
--- a/assets/web/icons/arrow-up-right.js
+++ b/assets/web/icons/arrow-up-right.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ArrowUpRightIcon(props) {
+function ArrowUpRightIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M17.924 6.617a.996.996 0 0 1 .076.38V15a1 1 0 1 1-2 0V9.414l-8.293 8.293a1 1 0 0 1-1.414-1.414L14.586 8H9a1 1 0 0 1 0-2h8a.997.997 0 0 1 .924.617Z"
@@ -14,4 +16,4 @@ function ArrowUpRightIcon(props) {
 }
 ;
 ArrowUpRightIcon.displayName = "ArrowUpRightIcon";
-export default ArrowUpRightIcon;
\ No newline at end of file
+export default forwardRef(ArrowUpRightIcon);
\ No newline at end of file
diff --git a/assets/web/icons/arrow-up.cjs b/assets/web/icons/arrow-up.cjs
index d6a6587a..28d97c02 100644
--- a/assets/web/icons/arrow-up.cjs
+++ b/assets/web/icons/arrow-up.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ArrowUpIcon(props) {
+var React = require("react");
+function ArrowUpIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12 19.5a1 1 0 0 0 1-1V7.914l4.293 4.293a1 1 0 0 0 1.414-1.414l-6-6a1 1 0 0 0-1.414 0l-6 6a1 1 0 1 0 1.414 1.414L11 7.914V18.5a1 1 0 0 0 1 1Z"
@@ -14,4 +16,4 @@ function ArrowUpIcon(props) {
 }
 ;
 ArrowUpIcon.displayName = "ArrowUpIcon";
-module.exports = ArrowUpIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ArrowUpIcon);
\ No newline at end of file
diff --git a/assets/web/icons/arrow-up.d.ts b/assets/web/icons/arrow-up.d.ts
index dbc9942c..688ed70c 100644
--- a/assets/web/icons/arrow-up.d.ts
+++ b/assets/web/icons/arrow-up.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * arrow-up.svg
  */
-declare const ArrowUpIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ArrowUpIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ArrowUpIcon;
diff --git a/assets/web/icons/arrow-up.js b/assets/web/icons/arrow-up.js
index 77c06ac6..2f49bb55 100644
--- a/assets/web/icons/arrow-up.js
+++ b/assets/web/icons/arrow-up.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ArrowUpIcon(props) {
+function ArrowUpIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M12 19.5a1 1 0 0 0 1-1V7.914l4.293 4.293a1 1 0 0 0 1.414-1.414l-6-6a1 1 0 0 0-1.414 0l-6 6a1 1 0 1 0 1.414 1.414L11 7.914V18.5a1 1 0 0 0 1 1Z"
@@ -14,4 +16,4 @@ function ArrowUpIcon(props) {
 }
 ;
 ArrowUpIcon.displayName = "ArrowUpIcon";
-export default ArrowUpIcon;
\ No newline at end of file
+export default forwardRef(ArrowUpIcon);
\ No newline at end of file
diff --git a/assets/web/icons/attachment.cjs b/assets/web/icons/attachment.cjs
index 1113718e..e84e3476 100644
--- a/assets/web/icons/attachment.cjs
+++ b/assets/web/icons/attachment.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function AttachmentIcon(props) {
+var React = require("react");
+function AttachmentIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M11.5 22c-1.533 0-2.833-.533-3.9-1.6C6.533 19.333 6 18.033 6 16.5V6c0-1.1.392-2.042 1.175-2.825C7.958 2.392 8.9 2 10 2s2.042.392 2.825 1.175C13.608 3.958 14 4.9 14 6v9.5c0 .7-.242 1.292-.725 1.775-.483.483-1.075.725-1.775.725s-1.292-.242-1.775-.725C9.242 16.792 9 16.2 9 15.5V6.75A.728.728 0 0 1 9.75 6a.729.729 0 0 1 .75.75v8.75c0 .283.096.52.287.712.192.192.43.288.713.288s.52-.096.713-.288a.968.968 0 0 0 .287-.712V6c0-.7-.242-1.292-.725-1.775C11.292 3.742 10.7 3.5 10 3.5s-1.292.242-1.775.725C7.742 4.708 7.5 5.3 7.5 6v10.5c0 1.1.392 2.042 1.175 2.825.783.783 1.725 1.175 2.825 1.175s2.042-.392 2.825-1.175c.783-.783 1.175-1.725 1.175-2.825V6.75a.728.728 0 0 1 .75-.75.728.728 0 0 1 .75.75v9.75c0 1.533-.533 2.833-1.6 3.9-1.067 1.067-2.367 1.6-3.9 1.6Z"
@@ -14,4 +16,4 @@ function AttachmentIcon(props) {
 }
 ;
 AttachmentIcon.displayName = "AttachmentIcon";
-module.exports = AttachmentIcon;
\ No newline at end of file
+module.exports = React.forwardRef(AttachmentIcon);
\ No newline at end of file
diff --git a/assets/web/icons/attachment.d.ts b/assets/web/icons/attachment.d.ts
index 30956766..9902e56c 100644
--- a/assets/web/icons/attachment.d.ts
+++ b/assets/web/icons/attachment.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * attachment.svg
  */
-declare const AttachmentIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const AttachmentIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default AttachmentIcon;
diff --git a/assets/web/icons/attachment.js b/assets/web/icons/attachment.js
index 65eb3706..a9894c61 100644
--- a/assets/web/icons/attachment.js
+++ b/assets/web/icons/attachment.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function AttachmentIcon(props) {
+function AttachmentIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M11.5 22c-1.533 0-2.833-.533-3.9-1.6C6.533 19.333 6 18.033 6 16.5V6c0-1.1.392-2.042 1.175-2.825C7.958 2.392 8.9 2 10 2s2.042.392 2.825 1.175C13.608 3.958 14 4.9 14 6v9.5c0 .7-.242 1.292-.725 1.775-.483.483-1.075.725-1.775.725s-1.292-.242-1.775-.725C9.242 16.792 9 16.2 9 15.5V6.75A.728.728 0 0 1 9.75 6a.729.729 0 0 1 .75.75v8.75c0 .283.096.52.287.712.192.192.43.288.713.288s.52-.096.713-.288a.968.968 0 0 0 .287-.712V6c0-.7-.242-1.292-.725-1.775C11.292 3.742 10.7 3.5 10 3.5s-1.292.242-1.775.725C7.742 4.708 7.5 5.3 7.5 6v10.5c0 1.1.392 2.042 1.175 2.825.783.783 1.725 1.175 2.825 1.175s2.042-.392 2.825-1.175c.783-.783 1.175-1.725 1.175-2.825V6.75a.728.728 0 0 1 .75-.75.728.728 0 0 1 .75.75v9.75c0 1.533-.533 2.833-1.6 3.9-1.067 1.067-2.367 1.6-3.9 1.6Z"
@@ -14,4 +16,4 @@ function AttachmentIcon(props) {
 }
 ;
 AttachmentIcon.displayName = "AttachmentIcon";
-export default AttachmentIcon;
\ No newline at end of file
+export default forwardRef(AttachmentIcon);
\ No newline at end of file
diff --git a/assets/web/icons/block.cjs b/assets/web/icons/block.cjs
index 42763192..ba62988a 100644
--- a/assets/web/icons/block.cjs
+++ b/assets/web/icons/block.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function BlockIcon(props) {
+var React = require("react");
+function BlockIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12 22a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-.9-.146-1.767-.438-2.6A7.951 7.951 0 0 0 18.3 7.1L7.1 18.3c.7.55 1.467.97 2.3 1.262.833.292 1.7.438 2.6.438Zm-6.3-3.1L16.9 5.7a7.95 7.95 0 0 0-2.3-1.263A7.813 7.813 0 0 0 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 .9.146 1.767.438 2.6A7.95 7.95 0 0 0 5.7 16.9Z"
@@ -14,4 +16,4 @@ function BlockIcon(props) {
 }
 ;
 BlockIcon.displayName = "BlockIcon";
-module.exports = BlockIcon;
\ No newline at end of file
+module.exports = React.forwardRef(BlockIcon);
\ No newline at end of file
diff --git a/assets/web/icons/block.d.ts b/assets/web/icons/block.d.ts
index 62b10e71..2ce57b93 100644
--- a/assets/web/icons/block.d.ts
+++ b/assets/web/icons/block.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * block.svg
  */
-declare const BlockIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const BlockIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default BlockIcon;
diff --git a/assets/web/icons/block.js b/assets/web/icons/block.js
index 4d2b3e0c..3c7fb6a6 100644
--- a/assets/web/icons/block.js
+++ b/assets/web/icons/block.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function BlockIcon(props) {
+function BlockIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M12 22a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-.9-.146-1.767-.438-2.6A7.951 7.951 0 0 0 18.3 7.1L7.1 18.3c.7.55 1.467.97 2.3 1.262.833.292 1.7.438 2.6.438Zm-6.3-3.1L16.9 5.7a7.95 7.95 0 0 0-2.3-1.263A7.813 7.813 0 0 0 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 .9.146 1.767.438 2.6A7.95 7.95 0 0 0 5.7 16.9Z"
@@ -14,4 +16,4 @@ function BlockIcon(props) {
 }
 ;
 BlockIcon.displayName = "BlockIcon";
-export default BlockIcon;
\ No newline at end of file
+export default forwardRef(BlockIcon);
\ No newline at end of file
diff --git a/assets/web/icons/bold.cjs b/assets/web/icons/bold.cjs
index 6018c52c..b986467f 100644
--- a/assets/web/icons/bold.cjs
+++ b/assets/web/icons/bold.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function BoldIcon(props) {
+var React = require("react");
+function BoldIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M8.8 19c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 6.8 17V7c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 8.8 5h3.525c1.083 0 2.083.333 3 1 .917.667 1.375 1.592 1.375 2.775 0 .85-.192 1.504-.575 1.963-.383.458-.742.787-1.075.987.417.183.88.525 1.387 1.025.509.5.763 1.25.763 2.25 0 1.483-.542 2.52-1.625 3.113-1.083.591-2.1.887-3.05.887H8.8Zm1.025-2.8h2.6c.8 0 1.287-.204 1.462-.612.175-.409.263-.705.263-.888 0-.183-.088-.48-.263-.887-.175-.409-.687-.613-1.537-.613H9.825v3Zm0-5.7h2.325c.55 0 .95-.142 1.2-.425a1.4 1.4 0 0 0 .375-.95c0-.4-.142-.725-.425-.975-.283-.25-.65-.375-1.1-.375H9.825V10.5Z"
@@ -14,4 +16,4 @@ function BoldIcon(props) {
 }
 ;
 BoldIcon.displayName = "BoldIcon";
-module.exports = BoldIcon;
\ No newline at end of file
+module.exports = React.forwardRef(BoldIcon);
\ No newline at end of file
diff --git a/assets/web/icons/bold.d.ts b/assets/web/icons/bold.d.ts
index cfeb8b45..0a8828af 100644
--- a/assets/web/icons/bold.d.ts
+++ b/assets/web/icons/bold.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * bold.svg
  */
-declare const BoldIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const BoldIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default BoldIcon;
diff --git a/assets/web/icons/bold.js b/assets/web/icons/bold.js
index 59d97928..8576b4a9 100644
--- a/assets/web/icons/bold.js
+++ b/assets/web/icons/bold.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function BoldIcon(props) {
+function BoldIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M8.8 19c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 6.8 17V7c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 8.8 5h3.525c1.083 0 2.083.333 3 1 .917.667 1.375 1.592 1.375 2.775 0 .85-.192 1.504-.575 1.963-.383.458-.742.787-1.075.987.417.183.88.525 1.387 1.025.509.5.763 1.25.763 2.25 0 1.483-.542 2.52-1.625 3.113-1.083.591-2.1.887-3.05.887H8.8Zm1.025-2.8h2.6c.8 0 1.287-.204 1.462-.612.175-.409.263-.705.263-.888 0-.183-.088-.48-.263-.887-.175-.409-.687-.613-1.537-.613H9.825v3Zm0-5.7h2.325c.55 0 .95-.142 1.2-.425a1.4 1.4 0 0 0 .375-.95c0-.4-.142-.725-.425-.975-.283-.25-.65-.375-1.1-.375H9.825V10.5Z"
@@ -14,4 +16,4 @@ function BoldIcon(props) {
 }
 ;
 BoldIcon.displayName = "BoldIcon";
-export default BoldIcon;
\ No newline at end of file
+export default forwardRef(BoldIcon);
\ No newline at end of file
diff --git a/assets/web/icons/chart.cjs b/assets/web/icons/chart.cjs
index 0c209bcb..68cdb9f5 100644
--- a/assets/web/icons/chart.cjs
+++ b/assets/web/icons/chart.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ChartIcon(props) {
+var React = require("react");
+function ChartIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M8 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 9 16v-5a.968.968 0 0 0-.287-.713A.967.967 0 0 0 8 10a.967.967 0 0 0-.713.287A.968.968 0 0 0 7 11v5c0 .283.096.52.287.712.192.192.43.288.713.288Zm4 0a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16V8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8v8c0 .283.096.52.287.712.192.192.43.288.713.288Zm4 0c.283 0 .52-.096.712-.288A.968.968 0 0 0 17 16v-2a.968.968 0 0 0-.288-.713A.968.968 0 0 0 16 13a.968.968 0 0 0-.713.287A.968.968 0 0 0 15 14v2c0 .283.096.52.287.712.192.192.43.288.713.288ZM5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h14c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm0-2h14V5H5v14Z"
@@ -14,4 +16,4 @@ function ChartIcon(props) {
 }
 ;
 ChartIcon.displayName = "ChartIcon";
-module.exports = ChartIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ChartIcon);
\ No newline at end of file
diff --git a/assets/web/icons/chart.d.ts b/assets/web/icons/chart.d.ts
index 1b2fbd97..00a25210 100644
--- a/assets/web/icons/chart.d.ts
+++ b/assets/web/icons/chart.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * chart.svg
  */
-declare const ChartIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ChartIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ChartIcon;
diff --git a/assets/web/icons/chart.js b/assets/web/icons/chart.js
index 76489df7..8ac3e192 100644
--- a/assets/web/icons/chart.js
+++ b/assets/web/icons/chart.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ChartIcon(props) {
+function ChartIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M8 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 9 16v-5a.968.968 0 0 0-.287-.713A.967.967 0 0 0 8 10a.967.967 0 0 0-.713.287A.968.968 0 0 0 7 11v5c0 .283.096.52.287.712.192.192.43.288.713.288Zm4 0a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16V8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8v8c0 .283.096.52.287.712.192.192.43.288.713.288Zm4 0c.283 0 .52-.096.712-.288A.968.968 0 0 0 17 16v-2a.968.968 0 0 0-.288-.713A.968.968 0 0 0 16 13a.968.968 0 0 0-.713.287A.968.968 0 0 0 15 14v2c0 .283.096.52.287.712.192.192.43.288.713.288ZM5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h14c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm0-2h14V5H5v14Z"
@@ -14,4 +16,4 @@ function ChartIcon(props) {
 }
 ;
 ChartIcon.displayName = "ChartIcon";
-export default ChartIcon;
\ No newline at end of file
+export default forwardRef(ChartIcon);
\ No newline at end of file
diff --git a/assets/web/icons/chat-new.cjs b/assets/web/icons/chat-new.cjs
index 573e8760..bf8ce766 100644
--- a/assets/web/icons/chat-new.cjs
+++ b/assets/web/icons/chat-new.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ChatNewIcon(props) {
+var React = require("react");
+function ChatNewIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M19 6h-2a.968.968 0 0 1-.712-.287A.967.967 0 0 1 16 5a.97.97 0 0 1 .288-.713A.968.968 0 0 1 17 4h2V2c0-.283.096-.52.288-.712A.968.968 0 0 1 20 1c.283 0 .52.096.712.288A.965.965 0 0 1 21 2v2h2a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 23 6h-2v2a.97.97 0 0 1-.288.713A.968.968 0 0 1 20 9a.968.968 0 0 1-.712-.287A.967.967 0 0 1 19 8V6Z"
@@ -16,4 +18,4 @@ function ChatNewIcon(props) {
 }
 ;
 ChatNewIcon.displayName = "ChatNewIcon";
-module.exports = ChatNewIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ChatNewIcon);
\ No newline at end of file
diff --git a/assets/web/icons/chat-new.d.ts b/assets/web/icons/chat-new.d.ts
index a0ba7f7e..0143829c 100644
--- a/assets/web/icons/chat-new.d.ts
+++ b/assets/web/icons/chat-new.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * chat-new.svg
  */
-declare const ChatNewIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ChatNewIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ChatNewIcon;
diff --git a/assets/web/icons/chat-new.js b/assets/web/icons/chat-new.js
index a2bf0b14..1f1a6fc9 100644
--- a/assets/web/icons/chat-new.js
+++ b/assets/web/icons/chat-new.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function ChatNewIcon(props) {
+function ChatNewIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M19 6h-2a.968.968 0 0 1-.712-.287A.967.967 0 0 1 16 5a.97.97 0 0 1 .288-.713A.968.968 0 0 1 17 4h2V2c0-.283.096-.52.288-.712A.968.968 0 0 1 20 1c.283 0 .52.096.712.288A.965.965 0 0 1 21 2v2h2a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 23 6h-2v2a.97.97 0 0 1-.288.713A.968.968 0 0 1 20 9a.968.968 0 0 1-.712-.287A.967.967 0 0 1 19 8V6Z"
@@ -16,4 +18,4 @@ function ChatNewIcon(props) {
 }
 ;
 ChatNewIcon.displayName = "ChatNewIcon";
-export default ChatNewIcon;
\ No newline at end of file
+export default forwardRef(ChatNewIcon);
\ No newline at end of file
diff --git a/assets/web/icons/chat-problem.cjs b/assets/web/icons/chat-problem.cjs
index 365c708d..b9ebf3f3 100644
--- a/assets/web/icons/chat-problem.cjs
+++ b/assets/web/icons/chat-problem.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ChatProblemIcon(props) {
+var React = require("react");
+function ChatProblemIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12.712 16.712A.968.968 0 0 1 12 17a.967.967 0 0 1-.713-.288A.968.968 0 0 1 11 16c0-.283.096-.52.287-.713A.967.967 0 0 1 12 15a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.712Zm0-3.999A.968.968 0 0 1 12 13a.967.967 0 0 1-.713-.287A.968.968 0 0 1 11 12V8c0-.283.096-.52.287-.713A.967.967 0 0 1 12 7a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v4a.97.97 0 0 1-.288.713Z"
@@ -16,4 +18,4 @@ function ChatProblemIcon(props) {
 }
 ;
 ChatProblemIcon.displayName = "ChatProblemIcon";
-module.exports = ChatProblemIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ChatProblemIcon);
\ No newline at end of file
diff --git a/assets/web/icons/chat-problem.d.ts b/assets/web/icons/chat-problem.d.ts
index a2728b8c..bb4a682c 100644
--- a/assets/web/icons/chat-problem.d.ts
+++ b/assets/web/icons/chat-problem.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * chat-problem.svg
  */
-declare const ChatProblemIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ChatProblemIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ChatProblemIcon;
diff --git a/assets/web/icons/chat-problem.js b/assets/web/icons/chat-problem.js
index d1ab1a1a..5220c3de 100644
--- a/assets/web/icons/chat-problem.js
+++ b/assets/web/icons/chat-problem.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function ChatProblemIcon(props) {
+function ChatProblemIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M12.712 16.712A.968.968 0 0 1 12 17a.967.967 0 0 1-.713-.288A.968.968 0 0 1 11 16c0-.283.096-.52.287-.713A.967.967 0 0 1 12 15a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.712Zm0-3.999A.968.968 0 0 1 12 13a.967.967 0 0 1-.713-.287A.968.968 0 0 1 11 12V8c0-.283.096-.52.287-.713A.967.967 0 0 1 12 7a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v4a.97.97 0 0 1-.288.713Z"
@@ -16,4 +18,4 @@ function ChatProblemIcon(props) {
 }
 ;
 ChatProblemIcon.displayName = "ChatProblemIcon";
-export default ChatProblemIcon;
\ No newline at end of file
+export default forwardRef(ChatProblemIcon);
\ No newline at end of file
diff --git a/assets/web/icons/chat-solid.cjs b/assets/web/icons/chat-solid.cjs
index 30a5291d..611466ef 100644
--- a/assets/web/icons/chat-solid.cjs
+++ b/assets/web/icons/chat-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ChatSolidIcon(props) {
+var React = require("react");
+function ChatSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M2.95 16.3 1.5 21.25a.936.936 0 0 0 .25 1 .936.936 0 0 0 1 .25l4.95-1.45a10.23 10.23 0 0 0 2.1.712c.717.159 1.45.238 2.2.238a9.738 9.738 0 0 0 3.9-.788 10.098 10.098 0 0 0 3.175-2.137c.9-.9 1.613-1.958 2.137-3.175A9.738 9.738 0 0 0 22 12a9.738 9.738 0 0 0-.788-3.9 10.099 10.099 0 0 0-2.137-3.175c-.9-.9-1.958-1.612-3.175-2.137A9.738 9.738 0 0 0 12 2a9.738 9.738 0 0 0-3.9.788 10.099 10.099 0 0 0-3.175 2.137c-.9.9-1.612 1.958-2.137 3.175A9.738 9.738 0 0 0 2 12a10.179 10.179 0 0 0 .95 4.3Z"
@@ -14,4 +16,4 @@ function ChatSolidIcon(props) {
 }
 ;
 ChatSolidIcon.displayName = "ChatSolidIcon";
-module.exports = ChatSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ChatSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/chat-solid.d.ts b/assets/web/icons/chat-solid.d.ts
index 5c273892..cae49041 100644
--- a/assets/web/icons/chat-solid.d.ts
+++ b/assets/web/icons/chat-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * chat-solid.svg
  */
-declare const ChatSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ChatSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ChatSolidIcon;
diff --git a/assets/web/icons/chat-solid.js b/assets/web/icons/chat-solid.js
index e6e0c268..2f68cdb6 100644
--- a/assets/web/icons/chat-solid.js
+++ b/assets/web/icons/chat-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ChatSolidIcon(props) {
+function ChatSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M2.95 16.3 1.5 21.25a.936.936 0 0 0 .25 1 .936.936 0 0 0 1 .25l4.95-1.45a10.23 10.23 0 0 0 2.1.712c.717.159 1.45.238 2.2.238a9.738 9.738 0 0 0 3.9-.788 10.098 10.098 0 0 0 3.175-2.137c.9-.9 1.613-1.958 2.137-3.175A9.738 9.738 0 0 0 22 12a9.738 9.738 0 0 0-.788-3.9 10.099 10.099 0 0 0-2.137-3.175c-.9-.9-1.958-1.612-3.175-2.137A9.738 9.738 0 0 0 12 2a9.738 9.738 0 0 0-3.9.788 10.099 10.099 0 0 0-3.175 2.137c-.9.9-1.612 1.958-2.137 3.175A9.738 9.738 0 0 0 2 12a10.179 10.179 0 0 0 .95 4.3Z"
@@ -14,4 +16,4 @@ function ChatSolidIcon(props) {
 }
 ;
 ChatSolidIcon.displayName = "ChatSolidIcon";
-export default ChatSolidIcon;
\ No newline at end of file
+export default forwardRef(ChatSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/chat.cjs b/assets/web/icons/chat.cjs
index 9e258e48..e8ee67b4 100644
--- a/assets/web/icons/chat.cjs
+++ b/assets/web/icons/chat.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ChatIcon(props) {
+var React = require("react");
+function ChatIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "m1.5 21.25 1.45-4.95a10.232 10.232 0 0 1-.712-2.1A10.167 10.167 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.737 9.737 0 0 1 12 22c-.75 0-1.483-.08-2.2-.238a10.23 10.23 0 0 1-2.1-.712L2.75 22.5a.936.936 0 0 1-1-.25.936.936 0 0 1-.25-1Zm2.45-1.2 3.2-.95a.949.949 0 0 1 .275-.063c.1-.008.192-.012.275-.012.15 0 .296.013.438.038.141.024.279.07.412.137a7.434 7.434 0 0 0 1.675.6c.583.133 1.175.2 1.775.2 2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 .6.067 1.192.2 1.775s.333 1.142.6 1.675c.117.217.18.446.188.688a2.29 2.29 0 0 1-.088.712l-.95 3.2Z"
@@ -14,4 +16,4 @@ function ChatIcon(props) {
 }
 ;
 ChatIcon.displayName = "ChatIcon";
-module.exports = ChatIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ChatIcon);
\ No newline at end of file
diff --git a/assets/web/icons/chat.d.ts b/assets/web/icons/chat.d.ts
index f9075f82..6ceec16b 100644
--- a/assets/web/icons/chat.d.ts
+++ b/assets/web/icons/chat.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * chat.svg
  */
-declare const ChatIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ChatIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ChatIcon;
diff --git a/assets/web/icons/chat.js b/assets/web/icons/chat.js
index 9109250e..5a392909 100644
--- a/assets/web/icons/chat.js
+++ b/assets/web/icons/chat.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ChatIcon(props) {
+function ChatIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "m1.5 21.25 1.45-4.95a10.232 10.232 0 0 1-.712-2.1A10.167 10.167 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.737 9.737 0 0 1 12 22c-.75 0-1.483-.08-2.2-.238a10.23 10.23 0 0 1-2.1-.712L2.75 22.5a.936.936 0 0 1-1-.25.936.936 0 0 1-.25-1Zm2.45-1.2 3.2-.95a.949.949 0 0 1 .275-.063c.1-.008.192-.012.275-.012.15 0 .296.013.438.038.141.024.279.07.412.137a7.434 7.434 0 0 0 1.675.6c.583.133 1.175.2 1.775.2 2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 .6.067 1.192.2 1.775s.333 1.142.6 1.675c.117.217.18.446.188.688a2.29 2.29 0 0 1-.088.712l-.95 3.2Z"
@@ -14,4 +16,4 @@ function ChatIcon(props) {
 }
 ;
 ChatIcon.displayName = "ChatIcon";
-export default ChatIcon;
\ No newline at end of file
+export default forwardRef(ChatIcon);
\ No newline at end of file
diff --git a/assets/web/icons/check-circle-solid.cjs b/assets/web/icons/check-circle-solid.cjs
index 54102a2b..876176e3 100644
--- a/assets/web/icons/check-circle-solid.cjs
+++ b/assets/web/icons/check-circle-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function CheckCircleSolidIcon(props) {
+var React = require("react");
+function CheckCircleSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "m10.6 13.8-2.15-2.15a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7L9.9 15.9c.2.2.433.3.7.3.267 0 .5-.1.7-.3l5.65-5.65a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275L10.6 13.8ZM12 22a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
@@ -14,4 +16,4 @@ function CheckCircleSolidIcon(props) {
 }
 ;
 CheckCircleSolidIcon.displayName = "CheckCircleSolidIcon";
-module.exports = CheckCircleSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(CheckCircleSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/check-circle-solid.d.ts b/assets/web/icons/check-circle-solid.d.ts
index 402c6d99..e3804aa2 100644
--- a/assets/web/icons/check-circle-solid.d.ts
+++ b/assets/web/icons/check-circle-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * check-circle-solid.svg
  */
-declare const CheckCircleSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const CheckCircleSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default CheckCircleSolidIcon;
diff --git a/assets/web/icons/check-circle-solid.js b/assets/web/icons/check-circle-solid.js
index 61a1272b..96e9dae3 100644
--- a/assets/web/icons/check-circle-solid.js
+++ b/assets/web/icons/check-circle-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function CheckCircleSolidIcon(props) {
+function CheckCircleSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "m10.6 13.8-2.15-2.15a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7L9.9 15.9c.2.2.433.3.7.3.267 0 .5-.1.7-.3l5.65-5.65a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275L10.6 13.8ZM12 22a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
@@ -14,4 +16,4 @@ function CheckCircleSolidIcon(props) {
 }
 ;
 CheckCircleSolidIcon.displayName = "CheckCircleSolidIcon";
-export default CheckCircleSolidIcon;
\ No newline at end of file
+export default forwardRef(CheckCircleSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/check-circle.cjs b/assets/web/icons/check-circle.cjs
index ac2e8a2f..07c754f9 100644
--- a/assets/web/icons/check-circle.cjs
+++ b/assets/web/icons/check-circle.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function CheckCircleIcon(props) {
+var React = require("react");
+function CheckCircleIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "m10.6 13.8-2.15-2.15a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7L9.9 15.9c.2.2.433.3.7.3.267 0 .5-.1.7-.3l5.65-5.65a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275L10.6 13.8ZM12 22a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 2.233.775 4.125 2.325 5.675C7.875 19.225 9.767 20 12 20Z"
@@ -14,4 +16,4 @@ function CheckCircleIcon(props) {
 }
 ;
 CheckCircleIcon.displayName = "CheckCircleIcon";
-module.exports = CheckCircleIcon;
\ No newline at end of file
+module.exports = React.forwardRef(CheckCircleIcon);
\ No newline at end of file
diff --git a/assets/web/icons/check-circle.d.ts b/assets/web/icons/check-circle.d.ts
index 964b2d29..4f080222 100644
--- a/assets/web/icons/check-circle.d.ts
+++ b/assets/web/icons/check-circle.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * check-circle.svg
  */
-declare const CheckCircleIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const CheckCircleIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default CheckCircleIcon;
diff --git a/assets/web/icons/check-circle.js b/assets/web/icons/check-circle.js
index a7fc25b8..8642b4cf 100644
--- a/assets/web/icons/check-circle.js
+++ b/assets/web/icons/check-circle.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function CheckCircleIcon(props) {
+function CheckCircleIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "m10.6 13.8-2.15-2.15a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7L9.9 15.9c.2.2.433.3.7.3.267 0 .5-.1.7-.3l5.65-5.65a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275L10.6 13.8ZM12 22a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 2.233.775 4.125 2.325 5.675C7.875 19.225 9.767 20 12 20Z"
@@ -14,4 +16,4 @@ function CheckCircleIcon(props) {
 }
 ;
 CheckCircleIcon.displayName = "CheckCircleIcon";
-export default CheckCircleIcon;
\ No newline at end of file
+export default forwardRef(CheckCircleIcon);
\ No newline at end of file
diff --git a/assets/web/icons/check.cjs b/assets/web/icons/check.cjs
index a751d10f..50e470d3 100644
--- a/assets/web/icons/check.cjs
+++ b/assets/web/icons/check.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function CheckIcon(props) {
+var React = require("react");
+function CheckIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M9.55 17.575c-.133 0-.258-.02-.375-.063a.878.878 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.712-.275s.53.092.713.275c.183.183.275.42.275.712s-.092.53-.275.713l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
@@ -14,4 +16,4 @@ function CheckIcon(props) {
 }
 ;
 CheckIcon.displayName = "CheckIcon";
-module.exports = CheckIcon;
\ No newline at end of file
+module.exports = React.forwardRef(CheckIcon);
\ No newline at end of file
diff --git a/assets/web/icons/check.d.ts b/assets/web/icons/check.d.ts
index f435ad2f..9168a1bc 100644
--- a/assets/web/icons/check.d.ts
+++ b/assets/web/icons/check.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * check.svg
  */
-declare const CheckIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const CheckIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default CheckIcon;
diff --git a/assets/web/icons/check.js b/assets/web/icons/check.js
index e88588e4..9f2c0a48 100644
--- a/assets/web/icons/check.js
+++ b/assets/web/icons/check.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function CheckIcon(props) {
+function CheckIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M9.55 17.575c-.133 0-.258-.02-.375-.063a.878.878 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.712-.275s.53.092.713.275c.183.183.275.42.275.712s-.092.53-.275.713l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
@@ -14,4 +16,4 @@ function CheckIcon(props) {
 }
 ;
 CheckIcon.displayName = "CheckIcon";
-export default CheckIcon;
\ No newline at end of file
+export default forwardRef(CheckIcon);
\ No newline at end of file
diff --git a/assets/web/icons/chevron-down.cjs b/assets/web/icons/chevron-down.cjs
index 5d509bb0..be1aa6dd 100644
--- a/assets/web/icons/chevron-down.cjs
+++ b/assets/web/icons/chevron-down.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ChevronDownIcon(props) {
+var React = require("react");
+function ChevronDownIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12 14.95c-.133 0-.258-.02-.375-.063a.878.878 0 0 1-.325-.212l-4.6-4.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.9-3.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.105 1.105 0 0 1-.375.063Z"
@@ -14,4 +16,4 @@ function ChevronDownIcon(props) {
 }
 ;
 ChevronDownIcon.displayName = "ChevronDownIcon";
-module.exports = ChevronDownIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ChevronDownIcon);
\ No newline at end of file
diff --git a/assets/web/icons/chevron-down.d.ts b/assets/web/icons/chevron-down.d.ts
index cc281353..97336298 100644
--- a/assets/web/icons/chevron-down.d.ts
+++ b/assets/web/icons/chevron-down.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * chevron-down.svg
  */
-declare const ChevronDownIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ChevronDownIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ChevronDownIcon;
diff --git a/assets/web/icons/chevron-down.js b/assets/web/icons/chevron-down.js
index 33b29e55..1b6875de 100644
--- a/assets/web/icons/chevron-down.js
+++ b/assets/web/icons/chevron-down.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ChevronDownIcon(props) {
+function ChevronDownIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M12 14.95c-.133 0-.258-.02-.375-.063a.878.878 0 0 1-.325-.212l-4.6-4.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.9-3.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.105 1.105 0 0 1-.375.063Z"
@@ -14,4 +16,4 @@ function ChevronDownIcon(props) {
 }
 ;
 ChevronDownIcon.displayName = "ChevronDownIcon";
-export default ChevronDownIcon;
\ No newline at end of file
+export default forwardRef(ChevronDownIcon);
\ No newline at end of file
diff --git a/assets/web/icons/chevron-left.cjs b/assets/web/icons/chevron-left.cjs
index d0045fb6..fd7d0a62 100644
--- a/assets/web/icons/chevron-left.cjs
+++ b/assets/web/icons/chevron-left.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ChevronLeftIcon(props) {
+var React = require("react");
+function ChevronLeftIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "m13.3 17.3-4.6-4.6a.877.877 0 0 1-.212-.325A1.107 1.107 0 0 1 8.425 12c0-.133.02-.258.063-.375A.877.877 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.949.949 0 0 1-.7-.275Z"
@@ -14,4 +16,4 @@ function ChevronLeftIcon(props) {
 }
 ;
 ChevronLeftIcon.displayName = "ChevronLeftIcon";
-module.exports = ChevronLeftIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ChevronLeftIcon);
\ No newline at end of file
diff --git a/assets/web/icons/chevron-left.d.ts b/assets/web/icons/chevron-left.d.ts
index 3c7ed1c4..fc240139 100644
--- a/assets/web/icons/chevron-left.d.ts
+++ b/assets/web/icons/chevron-left.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * chevron-left.svg
  */
-declare const ChevronLeftIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ChevronLeftIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ChevronLeftIcon;
diff --git a/assets/web/icons/chevron-left.js b/assets/web/icons/chevron-left.js
index b3b10dc1..f98d778e 100644
--- a/assets/web/icons/chevron-left.js
+++ b/assets/web/icons/chevron-left.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ChevronLeftIcon(props) {
+function ChevronLeftIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "m13.3 17.3-4.6-4.6a.877.877 0 0 1-.212-.325A1.107 1.107 0 0 1 8.425 12c0-.133.02-.258.063-.375A.877.877 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.949.949 0 0 1-.7-.275Z"
@@ -14,4 +16,4 @@ function ChevronLeftIcon(props) {
 }
 ;
 ChevronLeftIcon.displayName = "ChevronLeftIcon";
-export default ChevronLeftIcon;
\ No newline at end of file
+export default forwardRef(ChevronLeftIcon);
\ No newline at end of file
diff --git a/assets/web/icons/chevron-right.cjs b/assets/web/icons/chevron-right.cjs
index 1ec09f15..b6ae51bb 100644
--- a/assets/web/icons/chevron-right.cjs
+++ b/assets/web/icons/chevron-right.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ChevronRightIcon(props) {
+var React = require("react");
+function ChevronRightIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
@@ -14,4 +16,4 @@ function ChevronRightIcon(props) {
 }
 ;
 ChevronRightIcon.displayName = "ChevronRightIcon";
-module.exports = ChevronRightIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ChevronRightIcon);
\ No newline at end of file
diff --git a/assets/web/icons/chevron-right.d.ts b/assets/web/icons/chevron-right.d.ts
index aa28b3a3..62b81cbc 100644
--- a/assets/web/icons/chevron-right.d.ts
+++ b/assets/web/icons/chevron-right.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * chevron-right.svg
  */
-declare const ChevronRightIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ChevronRightIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ChevronRightIcon;
diff --git a/assets/web/icons/chevron-right.js b/assets/web/icons/chevron-right.js
index 894ad7fd..0ea94500 100644
--- a/assets/web/icons/chevron-right.js
+++ b/assets/web/icons/chevron-right.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ChevronRightIcon(props) {
+function ChevronRightIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
@@ -14,4 +16,4 @@ function ChevronRightIcon(props) {
 }
 ;
 ChevronRightIcon.displayName = "ChevronRightIcon";
-export default ChevronRightIcon;
\ No newline at end of file
+export default forwardRef(ChevronRightIcon);
\ No newline at end of file
diff --git a/assets/web/icons/chevron-up-down.cjs b/assets/web/icons/chevron-up-down.cjs
index e5092dcc..55a85855 100644
--- a/assets/web/icons/chevron-up-down.cjs
+++ b/assets/web/icons/chevron-up-down.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ChevronUpDownIcon(props) {
+var React = require("react");
+function ChevronUpDownIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M8.225 8.325C8.042 8.142 7.95 7.9 7.95 7.6s.092-.542.275-.725L11.3 3.8c.1-.1.208-.17.325-.213a1.218 1.218 0 0 1 .762 0 .68.68 0 0 1 .313.213l3.1 3.1c.183.183.27.42.262.712-.008.292-.104.53-.287.713-.183.183-.425.275-.725.275s-.542-.092-.725-.275L12 6 9.65 8.35c-.183.183-.42.27-.713.262a1.007 1.007 0 0 1-.712-.287ZM12 20.575a.941.941 0 0 1-.375-.075 1.315 1.315 0 0 1-.325-.2l-3.075-3.075c-.183-.183-.275-.425-.275-.725s.092-.542.275-.725c.183-.183.425-.275.725-.275s.542.092.725.275L12 18.1l2.35-2.35c.183-.183.42-.27.713-.262.291.008.529.104.712.287.183.183.275.425.275.725s-.092.542-.275.725L12.7 20.3a1.034 1.034 0 0 1-.7.275Z"
@@ -14,4 +16,4 @@ function ChevronUpDownIcon(props) {
 }
 ;
 ChevronUpDownIcon.displayName = "ChevronUpDownIcon";
-module.exports = ChevronUpDownIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ChevronUpDownIcon);
\ No newline at end of file
diff --git a/assets/web/icons/chevron-up-down.d.ts b/assets/web/icons/chevron-up-down.d.ts
index 462eb68c..3e0f0466 100644
--- a/assets/web/icons/chevron-up-down.d.ts
+++ b/assets/web/icons/chevron-up-down.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * chevron-up-down.svg
  */
-declare const ChevronUpDownIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ChevronUpDownIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ChevronUpDownIcon;
diff --git a/assets/web/icons/chevron-up-down.js b/assets/web/icons/chevron-up-down.js
index 849e4bae..3d60d302 100644
--- a/assets/web/icons/chevron-up-down.js
+++ b/assets/web/icons/chevron-up-down.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ChevronUpDownIcon(props) {
+function ChevronUpDownIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M8.225 8.325C8.042 8.142 7.95 7.9 7.95 7.6s.092-.542.275-.725L11.3 3.8c.1-.1.208-.17.325-.213a1.218 1.218 0 0 1 .762 0 .68.68 0 0 1 .313.213l3.1 3.1c.183.183.27.42.262.712-.008.292-.104.53-.287.713-.183.183-.425.275-.725.275s-.542-.092-.725-.275L12 6 9.65 8.35c-.183.183-.42.27-.713.262a1.007 1.007 0 0 1-.712-.287ZM12 20.575a.941.941 0 0 1-.375-.075 1.315 1.315 0 0 1-.325-.2l-3.075-3.075c-.183-.183-.275-.425-.275-.725s.092-.542.275-.725c.183-.183.425-.275.725-.275s.542.092.725.275L12 18.1l2.35-2.35c.183-.183.42-.27.713-.262.291.008.529.104.712.287.183.183.275.425.275.725s-.092.542-.275.725L12.7 20.3a1.034 1.034 0 0 1-.7.275Z"
@@ -14,4 +16,4 @@ function ChevronUpDownIcon(props) {
 }
 ;
 ChevronUpDownIcon.displayName = "ChevronUpDownIcon";
-export default ChevronUpDownIcon;
\ No newline at end of file
+export default forwardRef(ChevronUpDownIcon);
\ No newline at end of file
diff --git a/assets/web/icons/chevron-up.cjs b/assets/web/icons/chevron-up.cjs
index 12c60c4b..c38bba5f 100644
--- a/assets/web/icons/chevron-up.cjs
+++ b/assets/web/icons/chevron-up.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ChevronUpIcon(props) {
+var React = require("react");
+function ChevronUpIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "m12 10.775-3.9 3.9a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l4.6-4.6c.1-.1.208-.17.325-.213.117-.041.242-.062.375-.062s.258.02.375.062a.878.878 0 0 1 .325.213l4.6 4.6a.948.948 0 0 1 .275.7.949.949 0 0 1-.275.7.949.949 0 0 1-.7.275.948.948 0 0 1-.7-.275l-3.9-3.9Z"
@@ -14,4 +16,4 @@ function ChevronUpIcon(props) {
 }
 ;
 ChevronUpIcon.displayName = "ChevronUpIcon";
-module.exports = ChevronUpIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ChevronUpIcon);
\ No newline at end of file
diff --git a/assets/web/icons/chevron-up.d.ts b/assets/web/icons/chevron-up.d.ts
index 67c22aa0..c1034fa5 100644
--- a/assets/web/icons/chevron-up.d.ts
+++ b/assets/web/icons/chevron-up.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * chevron-up.svg
  */
-declare const ChevronUpIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ChevronUpIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ChevronUpIcon;
diff --git a/assets/web/icons/chevron-up.js b/assets/web/icons/chevron-up.js
index f66f5a2b..25bd5e20 100644
--- a/assets/web/icons/chevron-up.js
+++ b/assets/web/icons/chevron-up.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ChevronUpIcon(props) {
+function ChevronUpIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "m12 10.775-3.9 3.9a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l4.6-4.6c.1-.1.208-.17.325-.213.117-.041.242-.062.375-.062s.258.02.375.062a.878.878 0 0 1 .325.213l4.6 4.6a.948.948 0 0 1 .275.7.949.949 0 0 1-.275.7.949.949 0 0 1-.7.275.948.948 0 0 1-.7-.275l-3.9-3.9Z"
@@ -14,4 +16,4 @@ function ChevronUpIcon(props) {
 }
 ;
 ChevronUpIcon.displayName = "ChevronUpIcon";
-export default ChevronUpIcon;
\ No newline at end of file
+export default forwardRef(ChevronUpIcon);
\ No newline at end of file
diff --git a/assets/web/icons/circle.cjs b/assets/web/icons/circle.cjs
index 40da9cc6..c55e9825 100644
--- a/assets/web/icons/circle.cjs
+++ b/assets/web/icons/circle.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function CircleIcon(props) {
+var React = require("react");
+function CircleIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12 22a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137A10.1 10.1 0 0 1 2.788 15.9 9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.787 10.098 10.098 0 0 1 3.175 2.138c.9.9 1.613 1.958 2.137 3.175A9.737 9.737 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 2.233.775 4.125 2.325 5.675C7.875 19.225 9.767 20 12 20Z"
@@ -14,4 +16,4 @@ function CircleIcon(props) {
 }
 ;
 CircleIcon.displayName = "CircleIcon";
-module.exports = CircleIcon;
\ No newline at end of file
+module.exports = React.forwardRef(CircleIcon);
\ No newline at end of file
diff --git a/assets/web/icons/circle.d.ts b/assets/web/icons/circle.d.ts
index 53841b45..7d2f3703 100644
--- a/assets/web/icons/circle.d.ts
+++ b/assets/web/icons/circle.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * circle.svg
  */
-declare const CircleIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const CircleIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default CircleIcon;
diff --git a/assets/web/icons/circle.js b/assets/web/icons/circle.js
index 5f21d863..12b2f911 100644
--- a/assets/web/icons/circle.js
+++ b/assets/web/icons/circle.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function CircleIcon(props) {
+function CircleIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M12 22a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137A10.1 10.1 0 0 1 2.788 15.9 9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.787 10.098 10.098 0 0 1 3.175 2.138c.9.9 1.613 1.958 2.137 3.175A9.737 9.737 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 2.233.775 4.125 2.325 5.675C7.875 19.225 9.767 20 12 20Z"
@@ -14,4 +16,4 @@ function CircleIcon(props) {
 }
 ;
 CircleIcon.displayName = "CircleIcon";
-export default CircleIcon;
\ No newline at end of file
+export default forwardRef(CircleIcon);
\ No newline at end of file
diff --git a/assets/web/icons/close.cjs b/assets/web/icons/close.cjs
index 4d462c85..d776cd31 100644
--- a/assets/web/icons/close.cjs
+++ b/assets/web/icons/close.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function CloseIcon(props) {
+var React = require("react");
+function CloseIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
@@ -14,4 +16,4 @@ function CloseIcon(props) {
 }
 ;
 CloseIcon.displayName = "CloseIcon";
-module.exports = CloseIcon;
\ No newline at end of file
+module.exports = React.forwardRef(CloseIcon);
\ No newline at end of file
diff --git a/assets/web/icons/close.d.ts b/assets/web/icons/close.d.ts
index 5c14613c..605ad32a 100644
--- a/assets/web/icons/close.d.ts
+++ b/assets/web/icons/close.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * close.svg
  */
-declare const CloseIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const CloseIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default CloseIcon;
diff --git a/assets/web/icons/close.js b/assets/web/icons/close.js
index 6c09443d..0cfcae8b 100644
--- a/assets/web/icons/close.js
+++ b/assets/web/icons/close.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function CloseIcon(props) {
+function CloseIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
@@ -14,4 +16,4 @@ function CloseIcon(props) {
 }
 ;
 CloseIcon.displayName = "CloseIcon";
-export default CloseIcon;
\ No newline at end of file
+export default forwardRef(CloseIcon);
\ No newline at end of file
diff --git a/assets/web/icons/cloud-solid.cjs b/assets/web/icons/cloud-solid.cjs
index 7c035e94..50d1d352 100644
--- a/assets/web/icons/cloud-solid.cjs
+++ b/assets/web/icons/cloud-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function CloudSolidIcon(props) {
+var React = require("react");
+function CloudSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M7 20a5 5 0 0 1-.985-9.903 5.5 5.5 0 0 1 9.734-3.09 4 4 0 0 1 4.187 4.708A4.5 4.5 0 0 1 18 19.973V20H7Z"
@@ -14,4 +16,4 @@ function CloudSolidIcon(props) {
 }
 ;
 CloudSolidIcon.displayName = "CloudSolidIcon";
-module.exports = CloudSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(CloudSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/cloud-solid.d.ts b/assets/web/icons/cloud-solid.d.ts
index 6777e327..37c8c721 100644
--- a/assets/web/icons/cloud-solid.d.ts
+++ b/assets/web/icons/cloud-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * cloud-solid.svg
  */
-declare const CloudSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const CloudSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default CloudSolidIcon;
diff --git a/assets/web/icons/cloud-solid.js b/assets/web/icons/cloud-solid.js
index 74b420cb..dfb79ca2 100644
--- a/assets/web/icons/cloud-solid.js
+++ b/assets/web/icons/cloud-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function CloudSolidIcon(props) {
+function CloudSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M7 20a5 5 0 0 1-.985-9.903 5.5 5.5 0 0 1 9.734-3.09 4 4 0 0 1 4.187 4.708A4.5 4.5 0 0 1 18 19.973V20H7Z"
@@ -14,4 +16,4 @@ function CloudSolidIcon(props) {
 }
 ;
 CloudSolidIcon.displayName = "CloudSolidIcon";
-export default CloudSolidIcon;
\ No newline at end of file
+export default forwardRef(CloudSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/cloud.cjs b/assets/web/icons/cloud.cjs
index 637959fc..edbdaa37 100644
--- a/assets/web/icons/cloud.cjs
+++ b/assets/web/icons/cloud.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function CloudIcon(props) {
+var React = require("react");
+function CloudIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       fillRule: "evenodd",
@@ -16,4 +18,4 @@ function CloudIcon(props) {
 }
 ;
 CloudIcon.displayName = "CloudIcon";
-module.exports = CloudIcon;
\ No newline at end of file
+module.exports = React.forwardRef(CloudIcon);
\ No newline at end of file
diff --git a/assets/web/icons/cloud.d.ts b/assets/web/icons/cloud.d.ts
index c0e5f60a..7d20a823 100644
--- a/assets/web/icons/cloud.d.ts
+++ b/assets/web/icons/cloud.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * cloud.svg
  */
-declare const CloudIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const CloudIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default CloudIcon;
diff --git a/assets/web/icons/cloud.js b/assets/web/icons/cloud.js
index d6df6bee..a2c3ea86 100644
--- a/assets/web/icons/cloud.js
+++ b/assets/web/icons/cloud.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function CloudIcon(props) {
+function CloudIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       fillRule: "evenodd",
@@ -16,4 +18,4 @@ function CloudIcon(props) {
 }
 ;
 CloudIcon.displayName = "CloudIcon";
-export default CloudIcon;
\ No newline at end of file
+export default forwardRef(CloudIcon);
\ No newline at end of file
diff --git a/assets/web/icons/code.cjs b/assets/web/icons/code.cjs
index 9163aefb..bdaf9a9c 100644
--- a/assets/web/icons/code.cjs
+++ b/assets/web/icons/code.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function CodeIcon(props) {
+var React = require("react");
+function CodeIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "m8.825 12 1.475-1.475c.2-.2.3-.433.3-.7 0-.267-.1-.5-.3-.7-.2-.2-.438-.3-.713-.3-.274 0-.512.1-.712.3L6.7 11.3c-.1.1-.17.208-.213.325a1.107 1.107 0 0 0-.062.375c0 .133.02.258.063.375a.877.877 0 0 0 .212.325l2.175 2.175c.2.2.438.3.713.3.275 0 .512-.1.712-.3.2-.2.3-.433.3-.7 0-.267-.1-.5-.3-.7L8.825 12Zm6.35 0L13.7 13.475c-.2.2-.3.433-.3.7 0 .267.1.5.3.7.2.2.438.3.713.3.274 0 .512-.1.712-.3L17.3 12.7c.1-.1.17-.208.212-.325.042-.117.063-.242.063-.375s-.02-.258-.063-.375a.877.877 0 0 0-.212-.325l-2.175-2.175a.999.999 0 0 0-1.425 0c-.2.2-.3.433-.3.7 0 .267.1.5.3.7L15.175 12ZM5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h14c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm0-2h14V5H5v14Z"
@@ -14,4 +16,4 @@ function CodeIcon(props) {
 }
 ;
 CodeIcon.displayName = "CodeIcon";
-module.exports = CodeIcon;
\ No newline at end of file
+module.exports = React.forwardRef(CodeIcon);
\ No newline at end of file
diff --git a/assets/web/icons/code.d.ts b/assets/web/icons/code.d.ts
index ae451a51..77e53873 100644
--- a/assets/web/icons/code.d.ts
+++ b/assets/web/icons/code.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * code.svg
  */
-declare const CodeIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const CodeIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default CodeIcon;
diff --git a/assets/web/icons/code.js b/assets/web/icons/code.js
index 92b8f75a..09239f20 100644
--- a/assets/web/icons/code.js
+++ b/assets/web/icons/code.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function CodeIcon(props) {
+function CodeIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "m8.825 12 1.475-1.475c.2-.2.3-.433.3-.7 0-.267-.1-.5-.3-.7-.2-.2-.438-.3-.713-.3-.274 0-.512.1-.712.3L6.7 11.3c-.1.1-.17.208-.213.325a1.107 1.107 0 0 0-.062.375c0 .133.02.258.063.375a.877.877 0 0 0 .212.325l2.175 2.175c.2.2.438.3.713.3.275 0 .512-.1.712-.3.2-.2.3-.433.3-.7 0-.267-.1-.5-.3-.7L8.825 12Zm6.35 0L13.7 13.475c-.2.2-.3.433-.3.7 0 .267.1.5.3.7.2.2.438.3.713.3.274 0 .512-.1.712-.3L17.3 12.7c.1-.1.17-.208.212-.325.042-.117.063-.242.063-.375s-.02-.258-.063-.375a.877.877 0 0 0-.212-.325l-2.175-2.175a.999.999 0 0 0-1.425 0c-.2.2-.3.433-.3.7 0 .267.1.5.3.7L15.175 12ZM5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h14c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm0-2h14V5H5v14Z"
@@ -14,4 +16,4 @@ function CodeIcon(props) {
 }
 ;
 CodeIcon.displayName = "CodeIcon";
-export default CodeIcon;
\ No newline at end of file
+export default forwardRef(CodeIcon);
\ No newline at end of file
diff --git a/assets/web/icons/collapse.cjs b/assets/web/icons/collapse.cjs
index aeea607a..c5562b76 100644
--- a/assets/web/icons/collapse.cjs
+++ b/assets/web/icons/collapse.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function CollapseIcon(props) {
+var React = require("react");
+function CollapseIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12 11.034a.996.996 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0v8.003Zm0 1.963a.997.997 0 0 0-.29-.702l-.005-.004A.997.997 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0v-8.003Z"
@@ -14,4 +16,4 @@ function CollapseIcon(props) {
 }
 ;
 CollapseIcon.displayName = "CollapseIcon";
-module.exports = CollapseIcon;
\ No newline at end of file
+module.exports = React.forwardRef(CollapseIcon);
\ No newline at end of file
diff --git a/assets/web/icons/collapse.d.ts b/assets/web/icons/collapse.d.ts
index c86e144d..ad6da7dd 100644
--- a/assets/web/icons/collapse.d.ts
+++ b/assets/web/icons/collapse.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * collapse.svg
  */
-declare const CollapseIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const CollapseIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default CollapseIcon;
diff --git a/assets/web/icons/collapse.js b/assets/web/icons/collapse.js
index 8c3df7fe..3f860585 100644
--- a/assets/web/icons/collapse.js
+++ b/assets/web/icons/collapse.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function CollapseIcon(props) {
+function CollapseIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M12 11.034a.996.996 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0v8.003Zm0 1.963a.997.997 0 0 0-.29-.702l-.005-.004A.997.997 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0v-8.003Z"
@@ -14,4 +16,4 @@ function CollapseIcon(props) {
 }
 ;
 CollapseIcon.displayName = "CollapseIcon";
-export default CollapseIcon;
\ No newline at end of file
+export default forwardRef(CollapseIcon);
\ No newline at end of file
diff --git a/assets/web/icons/company.cjs b/assets/web/icons/company.cjs
index aea7edea..37309f57 100644
--- a/assets/web/icons/company.cjs
+++ b/assets/web/icons/company.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function CompanyIcon(props) {
+var React = require("react");
+function CompanyIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M14 7h5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v2Zm-2-2H5v2h3a1 1 0 0 1 0 2H5v2h3a1 1 0 1 1 0 2H5v2h3a1 1 0 1 1 0 2H5v2h7V5Zm2 4v2h2a1 1 0 1 1 0 2h-2v2h2a1 1 0 1 1 0 2h-2v2h5V9h-5Z"
@@ -14,4 +16,4 @@ function CompanyIcon(props) {
 }
 ;
 CompanyIcon.displayName = "CompanyIcon";
-module.exports = CompanyIcon;
\ No newline at end of file
+module.exports = React.forwardRef(CompanyIcon);
\ No newline at end of file
diff --git a/assets/web/icons/company.d.ts b/assets/web/icons/company.d.ts
index a07b14c7..f3d9c816 100644
--- a/assets/web/icons/company.d.ts
+++ b/assets/web/icons/company.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * company.svg
  */
-declare const CompanyIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const CompanyIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default CompanyIcon;
diff --git a/assets/web/icons/company.js b/assets/web/icons/company.js
index 7692256a..8b76173e 100644
--- a/assets/web/icons/company.js
+++ b/assets/web/icons/company.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function CompanyIcon(props) {
+function CompanyIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M14 7h5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v2Zm-2-2H5v2h3a1 1 0 0 1 0 2H5v2h3a1 1 0 1 1 0 2H5v2h3a1 1 0 1 1 0 2H5v2h7V5Zm2 4v2h2a1 1 0 1 1 0 2h-2v2h2a1 1 0 1 1 0 2h-2v2h5V9h-5Z"
@@ -14,4 +16,4 @@ function CompanyIcon(props) {
 }
 ;
 CompanyIcon.displayName = "CompanyIcon";
-export default CompanyIcon;
\ No newline at end of file
+export default forwardRef(CompanyIcon);
\ No newline at end of file
diff --git a/assets/web/icons/compose.cjs b/assets/web/icons/compose.cjs
index 60ff4e9a..33c90566 100644
--- a/assets/web/icons/compose.cjs
+++ b/assets/web/icons/compose.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ComposeIcon(props) {
+var React = require("react");
+function ComposeIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       fillRule: "evenodd",
@@ -22,4 +24,4 @@ function ComposeIcon(props) {
 }
 ;
 ComposeIcon.displayName = "ComposeIcon";
-module.exports = ComposeIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ComposeIcon);
\ No newline at end of file
diff --git a/assets/web/icons/compose.d.ts b/assets/web/icons/compose.d.ts
index 7b17c7d8..18867219 100644
--- a/assets/web/icons/compose.d.ts
+++ b/assets/web/icons/compose.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * compose.svg
  */
-declare const ComposeIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ComposeIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ComposeIcon;
diff --git a/assets/web/icons/compose.js b/assets/web/icons/compose.js
index 58c479d8..02a0f87e 100644
--- a/assets/web/icons/compose.js
+++ b/assets/web/icons/compose.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function ComposeIcon(props) {
+function ComposeIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       fillRule: "evenodd",
@@ -22,4 +24,4 @@ function ComposeIcon(props) {
 }
 ;
 ComposeIcon.displayName = "ComposeIcon";
-export default ComposeIcon;
\ No newline at end of file
+export default forwardRef(ComposeIcon);
\ No newline at end of file
diff --git a/assets/web/icons/computer.cjs b/assets/web/icons/computer.cjs
index 925c851a..65a6a0ec 100644
--- a/assets/web/icons/computer.cjs
+++ b/assets/web/icons/computer.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ComputerIcon(props) {
+var React = require("react");
+function ComputerIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M4 18c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 16V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 4 3h16c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v11c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 18H4Zm0-2h16V5H4v11Zm-2 5a.967.967 0 0 1-.712-.288A.968.968 0 0 1 1 20c0-.283.096-.52.288-.712A.967.967 0 0 1 2 19h20c.283 0 .52.096.712.288.192.191.288.429.288.712s-.096.52-.288.712A.968.968 0 0 1 22 21H2Z"
@@ -14,4 +16,4 @@ function ComputerIcon(props) {
 }
 ;
 ComputerIcon.displayName = "ComputerIcon";
-module.exports = ComputerIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ComputerIcon);
\ No newline at end of file
diff --git a/assets/web/icons/computer.d.ts b/assets/web/icons/computer.d.ts
index a60b826f..6703d6de 100644
--- a/assets/web/icons/computer.d.ts
+++ b/assets/web/icons/computer.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * computer.svg
  */
-declare const ComputerIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ComputerIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ComputerIcon;
diff --git a/assets/web/icons/computer.js b/assets/web/icons/computer.js
index 15f79e18..c2edf9e5 100644
--- a/assets/web/icons/computer.js
+++ b/assets/web/icons/computer.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ComputerIcon(props) {
+function ComputerIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M4 18c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 16V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 4 3h16c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v11c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 18H4Zm0-2h16V5H4v11Zm-2 5a.967.967 0 0 1-.712-.288A.968.968 0 0 1 1 20c0-.283.096-.52.288-.712A.967.967 0 0 1 2 19h20c.283 0 .52.096.712.288.192.191.288.429.288.712s-.096.52-.288.712A.968.968 0 0 1 22 21H2Z"
@@ -14,4 +16,4 @@ function ComputerIcon(props) {
 }
 ;
 ComputerIcon.displayName = "ComputerIcon";
-export default ComputerIcon;
\ No newline at end of file
+export default forwardRef(ComputerIcon);
\ No newline at end of file
diff --git a/assets/web/icons/copy.cjs b/assets/web/icons/copy.cjs
index 7aa344d4..6e134dc1 100644
--- a/assets/web/icons/copy.cjs
+++ b/assets/web/icons/copy.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function CopyIcon(props) {
+var React = require("react");
+function CopyIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0V5Z"
@@ -16,4 +18,4 @@ function CopyIcon(props) {
 }
 ;
 CopyIcon.displayName = "CopyIcon";
-module.exports = CopyIcon;
\ No newline at end of file
+module.exports = React.forwardRef(CopyIcon);
\ No newline at end of file
diff --git a/assets/web/icons/copy.d.ts b/assets/web/icons/copy.d.ts
index ab4afe62..e05050b7 100644
--- a/assets/web/icons/copy.d.ts
+++ b/assets/web/icons/copy.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * copy.svg
  */
-declare const CopyIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const CopyIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default CopyIcon;
diff --git a/assets/web/icons/copy.js b/assets/web/icons/copy.js
index a2716e50..5cfc03af 100644
--- a/assets/web/icons/copy.js
+++ b/assets/web/icons/copy.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function CopyIcon(props) {
+function CopyIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0V5Z"
@@ -16,4 +18,4 @@ function CopyIcon(props) {
 }
 ;
 CopyIcon.displayName = "CopyIcon";
-export default CopyIcon;
\ No newline at end of file
+export default forwardRef(CopyIcon);
\ No newline at end of file
diff --git a/assets/web/icons/dark-mode.cjs b/assets/web/icons/dark-mode.cjs
index bd89eea0..135affc3 100644
--- a/assets/web/icons/dark-mode.cjs
+++ b/assets/web/icons/dark-mode.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function DarkModeIcon(props) {
+var React = require("react");
+function DarkModeIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       fillRule: "evenodd",
@@ -16,4 +18,4 @@ function DarkModeIcon(props) {
 }
 ;
 DarkModeIcon.displayName = "DarkModeIcon";
-module.exports = DarkModeIcon;
\ No newline at end of file
+module.exports = React.forwardRef(DarkModeIcon);
\ No newline at end of file
diff --git a/assets/web/icons/dark-mode.d.ts b/assets/web/icons/dark-mode.d.ts
index f339d081..c128f868 100644
--- a/assets/web/icons/dark-mode.d.ts
+++ b/assets/web/icons/dark-mode.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * dark-mode.svg
  */
-declare const DarkModeIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const DarkModeIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default DarkModeIcon;
diff --git a/assets/web/icons/dark-mode.js b/assets/web/icons/dark-mode.js
index cf98afcb..6288f799 100644
--- a/assets/web/icons/dark-mode.js
+++ b/assets/web/icons/dark-mode.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function DarkModeIcon(props) {
+function DarkModeIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       fillRule: "evenodd",
@@ -16,4 +18,4 @@ function DarkModeIcon(props) {
 }
 ;
 DarkModeIcon.displayName = "DarkModeIcon";
-export default DarkModeIcon;
\ No newline at end of file
+export default forwardRef(DarkModeIcon);
\ No newline at end of file
diff --git a/assets/web/icons/delete.cjs b/assets/web/icons/delete.cjs
index 8dd0ccb2..fb9bd5f7 100644
--- a/assets/web/icons/delete.cjs
+++ b/assets/web/icons/delete.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function DeleteIcon(props) {
+var React = require("react");
+function DeleteIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M7 21c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 5 19V6a.968.968 0 0 1-.713-.287A.968.968 0 0 1 4 5c0-.283.096-.52.287-.713A.968.968 0 0 1 5 4h4a.97.97 0 0 1 .287-.712A.968.968 0 0 1 10 3h4a.97.97 0 0 1 .713.288A.968.968 0 0 1 15 4h4a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 19 6v13c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 17 21H7ZM7 6v13h10V6H7Zm2 10c0 .283.096.52.287.712.192.192.43.288.713.288s.52-.096.713-.288A.968.968 0 0 0 11 16V9a.967.967 0 0 0-.287-.713A.968.968 0 0 0 10 8a.968.968 0 0 0-.713.287A.968.968 0 0 0 9 9v7Zm4 0c0 .283.096.52.287.712.192.192.43.288.713.288s.52-.096.713-.288A.968.968 0 0 0 15 16V9a.967.967 0 0 0-.287-.713A.968.968 0 0 0 14 8a.968.968 0 0 0-.713.287A.967.967 0 0 0 13 9v7Z"
@@ -14,4 +16,4 @@ function DeleteIcon(props) {
 }
 ;
 DeleteIcon.displayName = "DeleteIcon";
-module.exports = DeleteIcon;
\ No newline at end of file
+module.exports = React.forwardRef(DeleteIcon);
\ No newline at end of file
diff --git a/assets/web/icons/delete.d.ts b/assets/web/icons/delete.d.ts
index 5faaae43..1abea436 100644
--- a/assets/web/icons/delete.d.ts
+++ b/assets/web/icons/delete.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * delete.svg
  */
-declare const DeleteIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const DeleteIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default DeleteIcon;
diff --git a/assets/web/icons/delete.js b/assets/web/icons/delete.js
index e7920510..df7ef56f 100644
--- a/assets/web/icons/delete.js
+++ b/assets/web/icons/delete.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function DeleteIcon(props) {
+function DeleteIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M7 21c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 5 19V6a.968.968 0 0 1-.713-.287A.968.968 0 0 1 4 5c0-.283.096-.52.287-.713A.968.968 0 0 1 5 4h4a.97.97 0 0 1 .287-.712A.968.968 0 0 1 10 3h4a.97.97 0 0 1 .713.288A.968.968 0 0 1 15 4h4a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 19 6v13c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 17 21H7ZM7 6v13h10V6H7Zm2 10c0 .283.096.52.287.712.192.192.43.288.713.288s.52-.096.713-.288A.968.968 0 0 0 11 16V9a.967.967 0 0 0-.287-.713A.968.968 0 0 0 10 8a.968.968 0 0 0-.713.287A.968.968 0 0 0 9 9v7Zm4 0c0 .283.096.52.287.712.192.192.43.288.713.288s.52-.096.713-.288A.968.968 0 0 0 15 16V9a.967.967 0 0 0-.287-.713A.968.968 0 0 0 14 8a.968.968 0 0 0-.713.287A.967.967 0 0 0 13 9v7Z"
@@ -14,4 +16,4 @@ function DeleteIcon(props) {
 }
 ;
 DeleteIcon.displayName = "DeleteIcon";
-export default DeleteIcon;
\ No newline at end of file
+export default forwardRef(DeleteIcon);
\ No newline at end of file
diff --git a/assets/web/icons/devices.cjs b/assets/web/icons/devices.cjs
index 441b90e0..8ee5f493 100644
--- a/assets/web/icons/devices.cjs
+++ b/assets/web/icons/devices.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function DevicesIcon(props) {
+var React = require("react");
+function DevicesIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M3.5 20c-.417 0-.77-.146-1.063-.438A1.447 1.447 0 0 1 2 18.5c0-.417.146-.77.438-1.063A1.446 1.446 0 0 1 3.5 17H4V6c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 4h14a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 20 6H6v11h4.5c.417 0 .77.146 1.063.438.291.291.437.645.437 1.062 0 .417-.146.77-.438 1.063A1.446 1.446 0 0 1 10.5 20h-7ZM15 20a.968.968 0 0 1-.713-.288A.968.968 0 0 1 14 19V9c0-.283.096-.52.287-.713A.968.968 0 0 1 15 8h6a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v10c0 .283-.096.52-.288.712A.968.968 0 0 1 21 20h-6Zm1-3h4v-7h-4v7Z"
@@ -14,4 +16,4 @@ function DevicesIcon(props) {
 }
 ;
 DevicesIcon.displayName = "DevicesIcon";
-module.exports = DevicesIcon;
\ No newline at end of file
+module.exports = React.forwardRef(DevicesIcon);
\ No newline at end of file
diff --git a/assets/web/icons/devices.d.ts b/assets/web/icons/devices.d.ts
index 5eee22a7..f52aff51 100644
--- a/assets/web/icons/devices.d.ts
+++ b/assets/web/icons/devices.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * devices.svg
  */
-declare const DevicesIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const DevicesIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default DevicesIcon;
diff --git a/assets/web/icons/devices.js b/assets/web/icons/devices.js
index 2bb3882d..94daeca5 100644
--- a/assets/web/icons/devices.js
+++ b/assets/web/icons/devices.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function DevicesIcon(props) {
+function DevicesIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M3.5 20c-.417 0-.77-.146-1.063-.438A1.447 1.447 0 0 1 2 18.5c0-.417.146-.77.438-1.063A1.446 1.446 0 0 1 3.5 17H4V6c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 4h14a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 20 6H6v11h4.5c.417 0 .77.146 1.063.438.291.291.437.645.437 1.062 0 .417-.146.77-.438 1.063A1.446 1.446 0 0 1 10.5 20h-7ZM15 20a.968.968 0 0 1-.713-.288A.968.968 0 0 1 14 19V9c0-.283.096-.52.287-.713A.968.968 0 0 1 15 8h6a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v10c0 .283-.096.52-.288.712A.968.968 0 0 1 21 20h-6Zm1-3h4v-7h-4v7Z"
@@ -14,4 +16,4 @@ function DevicesIcon(props) {
 }
 ;
 DevicesIcon.displayName = "DevicesIcon";
-export default DevicesIcon;
\ No newline at end of file
+export default forwardRef(DevicesIcon);
\ No newline at end of file
diff --git a/assets/web/icons/document.cjs b/assets/web/icons/document.cjs
index 75a56cd6..782ea3c9 100644
--- a/assets/web/icons/document.cjs
+++ b/assets/web/icons/document.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function DocumentIcon(props) {
+var React = require("react");
+function DocumentIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M9 18h6a.97.97 0 0 0 .713-.288A.968.968 0 0 0 16 17a.968.968 0 0 0-.287-.712A.968.968 0 0 0 15 16H9a.967.967 0 0 0-.713.288A.968.968 0 0 0 8 17c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 16 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 15 12H9a.967.967 0 0 0-.713.287A.968.968 0 0 0 8 13c0 .283.096.52.287.713.192.191.43.287.713.287Zm-3 8c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 20V4c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 6 2h7.175a1.975 1.975 0 0 1 1.4.575l4.85 4.85a1.975 1.975 0 0 1 .575 1.4V20c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 22H6Zm7-14V4H6v16h12V9h-4a.968.968 0 0 1-.713-.287A.967.967 0 0 1 13 8Z"
@@ -14,4 +16,4 @@ function DocumentIcon(props) {
 }
 ;
 DocumentIcon.displayName = "DocumentIcon";
-module.exports = DocumentIcon;
\ No newline at end of file
+module.exports = React.forwardRef(DocumentIcon);
\ No newline at end of file
diff --git a/assets/web/icons/document.d.ts b/assets/web/icons/document.d.ts
index 6555dfeb..62c9eb25 100644
--- a/assets/web/icons/document.d.ts
+++ b/assets/web/icons/document.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * document.svg
  */
-declare const DocumentIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const DocumentIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default DocumentIcon;
diff --git a/assets/web/icons/document.js b/assets/web/icons/document.js
index beed309a..6ce19391 100644
--- a/assets/web/icons/document.js
+++ b/assets/web/icons/document.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function DocumentIcon(props) {
+function DocumentIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M9 18h6a.97.97 0 0 0 .713-.288A.968.968 0 0 0 16 17a.968.968 0 0 0-.287-.712A.968.968 0 0 0 15 16H9a.967.967 0 0 0-.713.288A.968.968 0 0 0 8 17c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 16 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 15 12H9a.967.967 0 0 0-.713.287A.968.968 0 0 0 8 13c0 .283.096.52.287.713.192.191.43.287.713.287Zm-3 8c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 20V4c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 6 2h7.175a1.975 1.975 0 0 1 1.4.575l4.85 4.85a1.975 1.975 0 0 1 .575 1.4V20c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 22H6Zm7-14V4H6v16h12V9h-4a.968.968 0 0 1-.713-.287A.967.967 0 0 1 13 8Z"
@@ -14,4 +16,4 @@ function DocumentIcon(props) {
 }
 ;
 DocumentIcon.displayName = "DocumentIcon";
-export default DocumentIcon;
\ No newline at end of file
+export default forwardRef(DocumentIcon);
\ No newline at end of file
diff --git a/assets/web/icons/download.cjs b/assets/web/icons/download.cjs
index 134d4a81..0298d970 100644
--- a/assets/web/icons/download.cjs
+++ b/assets/web/icons/download.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function DownloadIcon(props) {
+var React = require("react");
+function DownloadIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12 15.575c-.133 0-.258-.02-.375-.063a.877.877 0 0 1-.325-.212l-3.6-3.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7c.183-.183.42-.28.712-.288.292-.008.53.08.713.263L11 12.15V5c0-.283.096-.52.287-.713A.968.968 0 0 1 12 4c.283 0 .52.096.713.287.191.192.287.43.287.713v7.15l1.875-1.875c.183-.183.42-.27.713-.263.291.009.529.105.712.288a.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-3.6 3.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063ZM6 20c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 18v-2c0-.283.096-.52.287-.713A.967.967 0 0 1 5 15c.283 0 .52.096.713.287.191.192.287.43.287.713v2h12v-2a.97.97 0 0 1 .288-.713A.968.968 0 0 1 19 15a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v2c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 20H6Z"
@@ -14,4 +16,4 @@ function DownloadIcon(props) {
 }
 ;
 DownloadIcon.displayName = "DownloadIcon";
-module.exports = DownloadIcon;
\ No newline at end of file
+module.exports = React.forwardRef(DownloadIcon);
\ No newline at end of file
diff --git a/assets/web/icons/download.d.ts b/assets/web/icons/download.d.ts
index ab62628c..b6bf758c 100644
--- a/assets/web/icons/download.d.ts
+++ b/assets/web/icons/download.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * download.svg
  */
-declare const DownloadIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const DownloadIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default DownloadIcon;
diff --git a/assets/web/icons/download.js b/assets/web/icons/download.js
index 48d7d0e3..cb108850 100644
--- a/assets/web/icons/download.js
+++ b/assets/web/icons/download.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function DownloadIcon(props) {
+function DownloadIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M12 15.575c-.133 0-.258-.02-.375-.063a.877.877 0 0 1-.325-.212l-3.6-3.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7c.183-.183.42-.28.712-.288.292-.008.53.08.713.263L11 12.15V5c0-.283.096-.52.287-.713A.968.968 0 0 1 12 4c.283 0 .52.096.713.287.191.192.287.43.287.713v7.15l1.875-1.875c.183-.183.42-.27.713-.263.291.009.529.105.712.288a.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-3.6 3.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063ZM6 20c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 18v-2c0-.283.096-.52.287-.713A.967.967 0 0 1 5 15c.283 0 .52.096.713.287.191.192.287.43.287.713v2h12v-2a.97.97 0 0 1 .288-.713A.968.968 0 0 1 19 15a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v2c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 20H6Z"
@@ -14,4 +16,4 @@ function DownloadIcon(props) {
 }
 ;
 DownloadIcon.displayName = "DownloadIcon";
-export default DownloadIcon;
\ No newline at end of file
+export default forwardRef(DownloadIcon);
\ No newline at end of file
diff --git a/assets/web/icons/drag-grid.cjs b/assets/web/icons/drag-grid.cjs
index 343e1f7b..7eabce75 100644
--- a/assets/web/icons/drag-grid.cjs
+++ b/assets/web/icons/drag-grid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function DragGridIcon(props) {
+var React = require("react");
+function DragGridIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M9 20c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 7 18c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 9 16c.55 0 1.02.196 1.412.587.392.392.588.863.588 1.413s-.196 1.02-.588 1.413A1.926 1.926 0 0 1 9 20Zm6 0c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 13 18c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 15 16c.55 0 1.02.196 1.413.587.391.392.587.863.587 1.413s-.196 1.02-.587 1.413A1.926 1.926 0 0 1 15 20Zm-6-6c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 7 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 9 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 9 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 13 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 15 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 15 14ZM9 8c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 7 6c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 9 4c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 9 8Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 13 6c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 15 4c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 15 8Z"
@@ -14,4 +16,4 @@ function DragGridIcon(props) {
 }
 ;
 DragGridIcon.displayName = "DragGridIcon";
-module.exports = DragGridIcon;
\ No newline at end of file
+module.exports = React.forwardRef(DragGridIcon);
\ No newline at end of file
diff --git a/assets/web/icons/drag-grid.d.ts b/assets/web/icons/drag-grid.d.ts
index c7161d12..c69e5508 100644
--- a/assets/web/icons/drag-grid.d.ts
+++ b/assets/web/icons/drag-grid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * drag-grid.svg
  */
-declare const DragGridIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const DragGridIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default DragGridIcon;
diff --git a/assets/web/icons/drag-grid.js b/assets/web/icons/drag-grid.js
index 94f1ee5d..b0306092 100644
--- a/assets/web/icons/drag-grid.js
+++ b/assets/web/icons/drag-grid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function DragGridIcon(props) {
+function DragGridIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M9 20c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 7 18c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 9 16c.55 0 1.02.196 1.412.587.392.392.588.863.588 1.413s-.196 1.02-.588 1.413A1.926 1.926 0 0 1 9 20Zm6 0c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 13 18c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 15 16c.55 0 1.02.196 1.413.587.391.392.587.863.587 1.413s-.196 1.02-.587 1.413A1.926 1.926 0 0 1 15 20Zm-6-6c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 7 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 9 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 9 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 13 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 15 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 15 14ZM9 8c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 7 6c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 9 4c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 9 8Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 13 6c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 15 4c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 15 8Z"
@@ -14,4 +16,4 @@ function DragGridIcon(props) {
 }
 ;
 DragGridIcon.displayName = "DragGridIcon";
-export default DragGridIcon;
\ No newline at end of file
+export default forwardRef(DragGridIcon);
\ No newline at end of file
diff --git a/assets/web/icons/drag-list.cjs b/assets/web/icons/drag-list.cjs
index e3884668..31e182df 100644
--- a/assets/web/icons/drag-list.cjs
+++ b/assets/web/icons/drag-list.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function DragListIcon(props) {
+var React = require("react");
+function DragListIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M5 15a.967.967 0 0 1-.713-.287A.968.968 0 0 1 4 14c0-.283.096-.52.287-.713A.967.967 0 0 1 5 13h14a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 19 15H5Zm0-4a.967.967 0 0 1-.713-.287A.968.968 0 0 1 4 10c0-.283.096-.52.287-.713A.968.968 0 0 1 5 9h14a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 19 11H5Z"
@@ -14,4 +16,4 @@ function DragListIcon(props) {
 }
 ;
 DragListIcon.displayName = "DragListIcon";
-module.exports = DragListIcon;
\ No newline at end of file
+module.exports = React.forwardRef(DragListIcon);
\ No newline at end of file
diff --git a/assets/web/icons/drag-list.d.ts b/assets/web/icons/drag-list.d.ts
index bff24c1b..3f35733e 100644
--- a/assets/web/icons/drag-list.d.ts
+++ b/assets/web/icons/drag-list.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * drag-list.svg
  */
-declare const DragListIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const DragListIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default DragListIcon;
diff --git a/assets/web/icons/drag-list.js b/assets/web/icons/drag-list.js
index 97ee6475..a1423533 100644
--- a/assets/web/icons/drag-list.js
+++ b/assets/web/icons/drag-list.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function DragListIcon(props) {
+function DragListIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M5 15a.967.967 0 0 1-.713-.287A.968.968 0 0 1 4 14c0-.283.096-.52.287-.713A.967.967 0 0 1 5 13h14a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 19 15H5Zm0-4a.967.967 0 0 1-.713-.287A.968.968 0 0 1 4 10c0-.283.096-.52.287-.713A.968.968 0 0 1 5 9h14a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 19 11H5Z"
@@ -14,4 +16,4 @@ function DragListIcon(props) {
 }
 ;
 DragListIcon.displayName = "DragListIcon";
-export default DragListIcon;
\ No newline at end of file
+export default forwardRef(DragListIcon);
\ No newline at end of file
diff --git a/assets/web/icons/edit-solid.cjs b/assets/web/icons/edit-solid.cjs
index 5724ecd5..3331926e 100644
--- a/assets/web/icons/edit-solid.cjs
+++ b/assets/web/icons/edit-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function EditSolidIcon(props) {
+var React = require("react");
+function EditSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("mask", {
       id: "a",
@@ -26,4 +28,4 @@ function EditSolidIcon(props) {
 }
 ;
 EditSolidIcon.displayName = "EditSolidIcon";
-module.exports = EditSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(EditSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/edit-solid.d.ts b/assets/web/icons/edit-solid.d.ts
index a640a7bf..153b331d 100644
--- a/assets/web/icons/edit-solid.d.ts
+++ b/assets/web/icons/edit-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * edit-solid.svg
  */
-declare const EditSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const EditSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default EditSolidIcon;
diff --git a/assets/web/icons/edit-solid.js b/assets/web/icons/edit-solid.js
index 3e964f92..c9c31b8f 100644
--- a/assets/web/icons/edit-solid.js
+++ b/assets/web/icons/edit-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function EditSolidIcon(props) {
+function EditSolidIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("mask", {
       id: "a",
@@ -26,4 +28,4 @@ function EditSolidIcon(props) {
 }
 ;
 EditSolidIcon.displayName = "EditSolidIcon";
-export default EditSolidIcon;
\ No newline at end of file
+export default forwardRef(EditSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/edit.cjs b/assets/web/icons/edit.cjs
index d01f3cf7..f4e19539 100644
--- a/assets/web/icons/edit.cjs
+++ b/assets/web/icons/edit.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function EditIcon(props) {
+var React = require("react");
+function EditIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       fillRule: "evenodd",
@@ -16,4 +18,4 @@ function EditIcon(props) {
 }
 ;
 EditIcon.displayName = "EditIcon";
-module.exports = EditIcon;
\ No newline at end of file
+module.exports = React.forwardRef(EditIcon);
\ No newline at end of file
diff --git a/assets/web/icons/edit.d.ts b/assets/web/icons/edit.d.ts
index 04489bb8..767e4b77 100644
--- a/assets/web/icons/edit.d.ts
+++ b/assets/web/icons/edit.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * edit.svg
  */
-declare const EditIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const EditIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default EditIcon;
diff --git a/assets/web/icons/edit.js b/assets/web/icons/edit.js
index 7dd01ccc..a73bd64a 100644
--- a/assets/web/icons/edit.js
+++ b/assets/web/icons/edit.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function EditIcon(props) {
+function EditIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       fillRule: "evenodd",
@@ -16,4 +18,4 @@ function EditIcon(props) {
 }
 ;
 EditIcon.displayName = "EditIcon";
-export default EditIcon;
\ No newline at end of file
+export default forwardRef(EditIcon);
\ No newline at end of file
diff --git a/assets/web/icons/email-solid.cjs b/assets/web/icons/email-solid.cjs
index 42f2c2f3..ea3fdee9 100644
--- a/assets/web/icons/email-solid.cjs
+++ b/assets/web/icons/email-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function EmailSolidIcon(props) {
+var React = require("react");
+function EmailSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm0 5.111a1 1 0 0 0 .514.874l7 3.89a1 1 0 0 0 .972 0l7-3.89a1 1 0 1 0-.972-1.748L12 11.856 5.486 8.237A1 1 0 0 0 4 9.111Z"
@@ -14,4 +16,4 @@ function EmailSolidIcon(props) {
 }
 ;
 EmailSolidIcon.displayName = "EmailSolidIcon";
-module.exports = EmailSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(EmailSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/email-solid.d.ts b/assets/web/icons/email-solid.d.ts
index db2a2897..ffa6e658 100644
--- a/assets/web/icons/email-solid.d.ts
+++ b/assets/web/icons/email-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * email-solid.svg
  */
-declare const EmailSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const EmailSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default EmailSolidIcon;
diff --git a/assets/web/icons/email-solid.js b/assets/web/icons/email-solid.js
index 35542584..836ed75b 100644
--- a/assets/web/icons/email-solid.js
+++ b/assets/web/icons/email-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function EmailSolidIcon(props) {
+function EmailSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm0 5.111a1 1 0 0 0 .514.874l7 3.89a1 1 0 0 0 .972 0l7-3.89a1 1 0 1 0-.972-1.748L12 11.856 5.486 8.237A1 1 0 0 0 4 9.111Z"
@@ -14,4 +16,4 @@ function EmailSolidIcon(props) {
 }
 ;
 EmailSolidIcon.displayName = "EmailSolidIcon";
-export default EmailSolidIcon;
\ No newline at end of file
+export default forwardRef(EmailSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/email.cjs b/assets/web/icons/email.cjs
index 0d5a431b..a2852ebc 100644
--- a/assets/web/icons/email.cjs
+++ b/assets/web/icons/email.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function EmailIcon(props) {
+var React = require("react");
+function EmailIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6Zm2 0v1.412l8 4.444 8-4.444V6H4Zm0 3.7V18h16V9.7l-7.514 4.174a1 1 0 0 1-.972 0L4 9.7Z"
@@ -14,4 +16,4 @@ function EmailIcon(props) {
 }
 ;
 EmailIcon.displayName = "EmailIcon";
-module.exports = EmailIcon;
\ No newline at end of file
+module.exports = React.forwardRef(EmailIcon);
\ No newline at end of file
diff --git a/assets/web/icons/email.d.ts b/assets/web/icons/email.d.ts
index d0a8d31a..480626e2 100644
--- a/assets/web/icons/email.d.ts
+++ b/assets/web/icons/email.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * email.svg
  */
-declare const EmailIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const EmailIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default EmailIcon;
diff --git a/assets/web/icons/email.js b/assets/web/icons/email.js
index 953b101c..478899b8 100644
--- a/assets/web/icons/email.js
+++ b/assets/web/icons/email.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function EmailIcon(props) {
+function EmailIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6Zm2 0v1.412l8 4.444 8-4.444V6H4Zm0 3.7V18h16V9.7l-7.514 4.174a1 1 0 0 1-.972 0L4 9.7Z"
@@ -14,4 +16,4 @@ function EmailIcon(props) {
 }
 ;
 EmailIcon.displayName = "EmailIcon";
-export default EmailIcon;
\ No newline at end of file
+export default forwardRef(EmailIcon);
\ No newline at end of file
diff --git a/assets/web/icons/end-call.cjs b/assets/web/icons/end-call.cjs
index 77f20094..b943d823 100644
--- a/assets/web/icons/end-call.cjs
+++ b/assets/web/icons/end-call.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function EndCallIcon(props) {
+var React = require("react");
+function EndCallIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "m2.765 16.02-2.47-2.416A1.018 1.018 0 0 1 0 12.852c0-.304.098-.555.295-.751a15.64 15.64 0 0 1 5.316-3.786A15.89 15.89 0 0 1 12 7c2.237 0 4.367.443 6.39 1.329a15.977 15.977 0 0 1 5.315 3.772c.197.196.295.447.295.751 0 .305-.098.555-.295.752l-2.47 2.416a1.047 1.047 0 0 1-1.396.108l-3.114-2.363a1.067 1.067 0 0 1-.322-.376 1.066 1.066 0 0 1-.108-.483v-2.27a13.593 13.593 0 0 0-2.12-.524C13.459 9.996 12 9.937 12 9.937s-1.459.059-2.175.175c-.715.116-1.422.29-2.12.523v2.271c0 .179-.036.34-.108.483a1.066 1.066 0 0 1-.322.376l-3.114 2.363a1.047 1.047 0 0 1-1.396-.107Z"
@@ -14,4 +16,4 @@ function EndCallIcon(props) {
 }
 ;
 EndCallIcon.displayName = "EndCallIcon";
-module.exports = EndCallIcon;
\ No newline at end of file
+module.exports = React.forwardRef(EndCallIcon);
\ No newline at end of file
diff --git a/assets/web/icons/end-call.d.ts b/assets/web/icons/end-call.d.ts
index ed7a409a..acad2b09 100644
--- a/assets/web/icons/end-call.d.ts
+++ b/assets/web/icons/end-call.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * end-call.svg
  */
-declare const EndCallIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const EndCallIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default EndCallIcon;
diff --git a/assets/web/icons/end-call.js b/assets/web/icons/end-call.js
index 9ceb3b74..15c39144 100644
--- a/assets/web/icons/end-call.js
+++ b/assets/web/icons/end-call.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function EndCallIcon(props) {
+function EndCallIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "m2.765 16.02-2.47-2.416A1.018 1.018 0 0 1 0 12.852c0-.304.098-.555.295-.751a15.64 15.64 0 0 1 5.316-3.786A15.89 15.89 0 0 1 12 7c2.237 0 4.367.443 6.39 1.329a15.977 15.977 0 0 1 5.315 3.772c.197.196.295.447.295.751 0 .305-.098.555-.295.752l-2.47 2.416a1.047 1.047 0 0 1-1.396.108l-3.114-2.363a1.067 1.067 0 0 1-.322-.376 1.066 1.066 0 0 1-.108-.483v-2.27a13.593 13.593 0 0 0-2.12-.524C13.459 9.996 12 9.937 12 9.937s-1.459.059-2.175.175c-.715.116-1.422.29-2.12.523v2.271c0 .179-.036.34-.108.483a1.066 1.066 0 0 1-.322.376l-3.114 2.363a1.047 1.047 0 0 1-1.396-.107Z"
@@ -14,4 +16,4 @@ function EndCallIcon(props) {
 }
 ;
 EndCallIcon.displayName = "EndCallIcon";
-export default EndCallIcon;
\ No newline at end of file
+export default forwardRef(EndCallIcon);
\ No newline at end of file
diff --git a/assets/web/icons/error.cjs b/assets/web/icons/error.cjs
index 2c1b99d1..f32bd635 100644
--- a/assets/web/icons/error.cjs
+++ b/assets/web/icons/error.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ErrorIcon(props) {
+var React = require("react");
+function ErrorIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 15a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 16c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-4c.283 0 .52-.096.713-.287A.968.968 0 0 0 13 12V8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8v4c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 9a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
@@ -14,4 +16,4 @@ function ErrorIcon(props) {
 }
 ;
 ErrorIcon.displayName = "ErrorIcon";
-module.exports = ErrorIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ErrorIcon);
\ No newline at end of file
diff --git a/assets/web/icons/error.d.ts b/assets/web/icons/error.d.ts
index 5f4b6be0..d486b57b 100644
--- a/assets/web/icons/error.d.ts
+++ b/assets/web/icons/error.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * error.svg
  */
-declare const ErrorIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ErrorIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ErrorIcon;
diff --git a/assets/web/icons/error.js b/assets/web/icons/error.js
index 35d62f01..0e60af2f 100644
--- a/assets/web/icons/error.js
+++ b/assets/web/icons/error.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ErrorIcon(props) {
+function ErrorIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 15a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 16c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-4c.283 0 .52-.096.713-.287A.968.968 0 0 0 13 12V8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8v4c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 9a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
@@ -14,4 +16,4 @@ function ErrorIcon(props) {
 }
 ;
 ErrorIcon.displayName = "ErrorIcon";
-export default ErrorIcon;
\ No newline at end of file
+export default forwardRef(ErrorIcon);
\ No newline at end of file
diff --git a/assets/web/icons/expand.cjs b/assets/web/icons/expand.cjs
index e3d0570e..cbca73e6 100644
--- a/assets/web/icons/expand.cjs
+++ b/assets/web/icons/expand.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ExpandIcon(props) {
+var React = require("react");
+function ExpandIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M21 3.997a.996.996 0 0 0-.29-.702l-.005-.004A.997.997 0 0 0 20 3h-8a1 1 0 1 0 0 2h5.586L5 17.586V12a1 1 0 1 0-2 0v8.003a.997.997 0 0 0 .29.702l.005.004c.18.18.43.291.705.291h8a1 1 0 1 0 0-2H6.414L19 6.414V12a1 1 0 1 0 2 0V3.997Z"
@@ -14,4 +16,4 @@ function ExpandIcon(props) {
 }
 ;
 ExpandIcon.displayName = "ExpandIcon";
-module.exports = ExpandIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ExpandIcon);
\ No newline at end of file
diff --git a/assets/web/icons/expand.d.ts b/assets/web/icons/expand.d.ts
index f59c8f89..456a21d8 100644
--- a/assets/web/icons/expand.d.ts
+++ b/assets/web/icons/expand.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * expand.svg
  */
-declare const ExpandIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ExpandIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ExpandIcon;
diff --git a/assets/web/icons/expand.js b/assets/web/icons/expand.js
index 2dd55877..c926549d 100644
--- a/assets/web/icons/expand.js
+++ b/assets/web/icons/expand.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ExpandIcon(props) {
+function ExpandIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M21 3.997a.996.996 0 0 0-.29-.702l-.005-.004A.997.997 0 0 0 20 3h-8a1 1 0 1 0 0 2h5.586L5 17.586V12a1 1 0 1 0-2 0v8.003a.997.997 0 0 0 .29.702l.005.004c.18.18.43.291.705.291h8a1 1 0 1 0 0-2H6.414L19 6.414V12a1 1 0 1 0 2 0V3.997Z"
@@ -14,4 +16,4 @@ function ExpandIcon(props) {
 }
 ;
 ExpandIcon.displayName = "ExpandIcon";
-export default ExpandIcon;
\ No newline at end of file
+export default forwardRef(ExpandIcon);
\ No newline at end of file
diff --git a/assets/web/icons/export-archive.cjs b/assets/web/icons/export-archive.cjs
index d176e18e..c5393de5 100644
--- a/assets/web/icons/export-archive.cjs
+++ b/assets/web/icons/export-archive.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ExportArchiveIcon(props) {
+var React = require("react");
+function ExportArchiveIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V6.5c0-.25.042-.475.125-.675.083-.2.192-.392.325-.575l1.4-1.7c.133-.183.3-.32.5-.412C5.55 3.046 5.767 3 6 3h12c.233 0 .45.046.65.138.2.091.367.229.5.412l1.4 1.7c.133.183.242.375.325.575.083.2.125.425.125.675V19c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm.4-15h13.2l-.85-1H6.25L5.4 6ZM5 19h14V8H5v11Zm7-1.425c.133 0 .258-.02.375-.063a.877.877 0 0 0 .325-.212l2.6-2.6a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275l-.9.9V11a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 10a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 11v3.2l-.9-.9a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7l2.6 2.6c.1.1.208.17.325.212.117.042.242.063.375.063Z"
@@ -14,4 +16,4 @@ function ExportArchiveIcon(props) {
 }
 ;
 ExportArchiveIcon.displayName = "ExportArchiveIcon";
-module.exports = ExportArchiveIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ExportArchiveIcon);
\ No newline at end of file
diff --git a/assets/web/icons/export-archive.d.ts b/assets/web/icons/export-archive.d.ts
index bf2a05ef..d07d149a 100644
--- a/assets/web/icons/export-archive.d.ts
+++ b/assets/web/icons/export-archive.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * export-archive.svg
  */
-declare const ExportArchiveIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ExportArchiveIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ExportArchiveIcon;
diff --git a/assets/web/icons/export-archive.js b/assets/web/icons/export-archive.js
index 4aa6d38d..e2850ddb 100644
--- a/assets/web/icons/export-archive.js
+++ b/assets/web/icons/export-archive.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ExportArchiveIcon(props) {
+function ExportArchiveIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V6.5c0-.25.042-.475.125-.675.083-.2.192-.392.325-.575l1.4-1.7c.133-.183.3-.32.5-.412C5.55 3.046 5.767 3 6 3h12c.233 0 .45.046.65.138.2.091.367.229.5.412l1.4 1.7c.133.183.242.375.325.575.083.2.125.425.125.675V19c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm.4-15h13.2l-.85-1H6.25L5.4 6ZM5 19h14V8H5v11Zm7-1.425c.133 0 .258-.02.375-.063a.877.877 0 0 0 .325-.212l2.6-2.6a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275l-.9.9V11a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 10a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 11v3.2l-.9-.9a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7l2.6 2.6c.1.1.208.17.325.212.117.042.242.063.375.063Z"
@@ -14,4 +16,4 @@ function ExportArchiveIcon(props) {
 }
 ;
 ExportArchiveIcon.displayName = "ExportArchiveIcon";
-export default ExportArchiveIcon;
\ No newline at end of file
+export default forwardRef(ExportArchiveIcon);
\ No newline at end of file
diff --git a/assets/web/icons/extensions-solid.cjs b/assets/web/icons/extensions-solid.cjs
index ed77e34f..2cf7065b 100644
--- a/assets/web/icons/extensions-solid.cjs
+++ b/assets/web/icons/extensions-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ExtensionsSolidIcon(props) {
+var React = require("react");
+function ExtensionsSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M17.913 11.39a.907.907 0 0 1-.663.282.907.907 0 0 1-.663-.282L12.61 7.413a.907.907 0 0 1-.282-.663c0-.254.094-.475.282-.663l3.977-3.977a.907.907 0 0 1 .663-.282c.254 0 .475.094.663.282l3.977 3.977a.907.907 0 0 1 .282.663.907.907 0 0 1-.282.663l-3.977 3.977Zm-14.625-.677A.968.968 0 0 0 4 11h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 11 10V4a.967.967 0 0 0-.287-.712A.968.968 0 0 0 10 3H4a.968.968 0 0 0-.712.288A.968.968 0 0 0 3 4v6c0 .283.096.52.288.713Zm9.999 9.999c.192.192.43.288.713.288h6c.283 0 .52-.096.712-.288A.968.968 0 0 0 21 20v-6a.968.968 0 0 0-.288-.713A.968.968 0 0 0 20 13h-6a.968.968 0 0 0-.713.287A.968.968 0 0 0 13 14v6c0 .283.096.52.287.712Zm-9.999 0A.965.965 0 0 0 4 21h6a.97.97 0 0 0 .713-.288A.968.968 0 0 0 11 20v-6a.968.968 0 0 0-.287-.713A.968.968 0 0 0 10 13H4a.967.967 0 0 0-.712.287A.968.968 0 0 0 3 14v6c0 .283.096.52.288.712Z"
@@ -14,4 +16,4 @@ function ExtensionsSolidIcon(props) {
 }
 ;
 ExtensionsSolidIcon.displayName = "ExtensionsSolidIcon";
-module.exports = ExtensionsSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ExtensionsSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/extensions-solid.d.ts b/assets/web/icons/extensions-solid.d.ts
index 087a20b2..c53fb0e9 100644
--- a/assets/web/icons/extensions-solid.d.ts
+++ b/assets/web/icons/extensions-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * extensions-solid.svg
  */
-declare const ExtensionsSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ExtensionsSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ExtensionsSolidIcon;
diff --git a/assets/web/icons/extensions-solid.js b/assets/web/icons/extensions-solid.js
index 39164728..bd5bd345 100644
--- a/assets/web/icons/extensions-solid.js
+++ b/assets/web/icons/extensions-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ExtensionsSolidIcon(props) {
+function ExtensionsSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M17.913 11.39a.907.907 0 0 1-.663.282.907.907 0 0 1-.663-.282L12.61 7.413a.907.907 0 0 1-.282-.663c0-.254.094-.475.282-.663l3.977-3.977a.907.907 0 0 1 .663-.282c.254 0 .475.094.663.282l3.977 3.977a.907.907 0 0 1 .282.663.907.907 0 0 1-.282.663l-3.977 3.977Zm-14.625-.677A.968.968 0 0 0 4 11h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 11 10V4a.967.967 0 0 0-.287-.712A.968.968 0 0 0 10 3H4a.968.968 0 0 0-.712.288A.968.968 0 0 0 3 4v6c0 .283.096.52.288.713Zm9.999 9.999c.192.192.43.288.713.288h6c.283 0 .52-.096.712-.288A.968.968 0 0 0 21 20v-6a.968.968 0 0 0-.288-.713A.968.968 0 0 0 20 13h-6a.968.968 0 0 0-.713.287A.968.968 0 0 0 13 14v6c0 .283.096.52.287.712Zm-9.999 0A.965.965 0 0 0 4 21h6a.97.97 0 0 0 .713-.288A.968.968 0 0 0 11 20v-6a.968.968 0 0 0-.287-.713A.968.968 0 0 0 10 13H4a.967.967 0 0 0-.712.287A.968.968 0 0 0 3 14v6c0 .283.096.52.288.712Z"
@@ -14,4 +16,4 @@ function ExtensionsSolidIcon(props) {
 }
 ;
 ExtensionsSolidIcon.displayName = "ExtensionsSolidIcon";
-export default ExtensionsSolidIcon;
\ No newline at end of file
+export default forwardRef(ExtensionsSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/extensions.cjs b/assets/web/icons/extensions.cjs
index a845a24b..00104f7f 100644
--- a/assets/web/icons/extensions.cjs
+++ b/assets/web/icons/extensions.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ExtensionsIcon(props) {
+var React = require("react");
+function ExtensionsIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M17.25 11.672a.907.907 0 0 1-.663-.282L12.61 7.413a.907.907 0 0 1-.282-.663c0-.254.094-.475.282-.663l3.977-3.977a.907.907 0 0 1 .663-.282c.254 0 .475.094.663.282l3.977 3.977a.907.907 0 0 1 .282.663.907.907 0 0 1-.282.663l-3.977 3.977a.907.907 0 0 1-.663.282Zm2.475-4.922L17.25 4.275 14.775 6.75l2.475 2.475 2.475-2.475ZM4 11a.967.967 0 0 1-.712-.287A.968.968 0 0 1 3 10V4c0-.283.096-.52.288-.712A.968.968 0 0 1 4 3h6a.97.97 0 0 1 .713.288A.968.968 0 0 1 11 4v6c0 .283-.096.52-.287.713A.968.968 0 0 1 10 11H4Zm5-2V5H5v4h4Zm5 12a.968.968 0 0 1-.713-.288A.968.968 0 0 1 13 20v-6c0-.283.096-.52.287-.713A.968.968 0 0 1 14 13h6a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v6c0 .283-.096.52-.288.712A.968.968 0 0 1 20 21h-6Zm5-2v-4h-4v4h4ZM4 21a.967.967 0 0 1-.712-.288A.968.968 0 0 1 3 20v-6a.97.97 0 0 1 .288-.713A.967.967 0 0 1 4 13h6c.283 0 .52.096.713.287.191.192.287.43.287.713v6a.97.97 0 0 1-.287.712A.968.968 0 0 1 10 21H4Zm5-2v-4H5v4h4Z"
@@ -14,4 +16,4 @@ function ExtensionsIcon(props) {
 }
 ;
 ExtensionsIcon.displayName = "ExtensionsIcon";
-module.exports = ExtensionsIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ExtensionsIcon);
\ No newline at end of file
diff --git a/assets/web/icons/extensions.d.ts b/assets/web/icons/extensions.d.ts
index 5b5711f4..a3538594 100644
--- a/assets/web/icons/extensions.d.ts
+++ b/assets/web/icons/extensions.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * extensions.svg
  */
-declare const ExtensionsIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ExtensionsIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ExtensionsIcon;
diff --git a/assets/web/icons/extensions.js b/assets/web/icons/extensions.js
index 1d679ade..355b9285 100644
--- a/assets/web/icons/extensions.js
+++ b/assets/web/icons/extensions.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ExtensionsIcon(props) {
+function ExtensionsIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M17.25 11.672a.907.907 0 0 1-.663-.282L12.61 7.413a.907.907 0 0 1-.282-.663c0-.254.094-.475.282-.663l3.977-3.977a.907.907 0 0 1 .663-.282c.254 0 .475.094.663.282l3.977 3.977a.907.907 0 0 1 .282.663.907.907 0 0 1-.282.663l-3.977 3.977a.907.907 0 0 1-.663.282Zm2.475-4.922L17.25 4.275 14.775 6.75l2.475 2.475 2.475-2.475ZM4 11a.967.967 0 0 1-.712-.287A.968.968 0 0 1 3 10V4c0-.283.096-.52.288-.712A.968.968 0 0 1 4 3h6a.97.97 0 0 1 .713.288A.968.968 0 0 1 11 4v6c0 .283-.096.52-.287.713A.968.968 0 0 1 10 11H4Zm5-2V5H5v4h4Zm5 12a.968.968 0 0 1-.713-.288A.968.968 0 0 1 13 20v-6c0-.283.096-.52.287-.713A.968.968 0 0 1 14 13h6a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v6c0 .283-.096.52-.288.712A.968.968 0 0 1 20 21h-6Zm5-2v-4h-4v4h4ZM4 21a.967.967 0 0 1-.712-.288A.968.968 0 0 1 3 20v-6a.97.97 0 0 1 .288-.713A.967.967 0 0 1 4 13h6c.283 0 .52.096.713.287.191.192.287.43.287.713v6a.97.97 0 0 1-.287.712A.968.968 0 0 1 10 21H4Zm5-2v-4H5v4h4Z"
@@ -14,4 +16,4 @@ function ExtensionsIcon(props) {
 }
 ;
 ExtensionsIcon.displayName = "ExtensionsIcon";
-export default ExtensionsIcon;
\ No newline at end of file
+export default forwardRef(ExtensionsIcon);
\ No newline at end of file
diff --git a/assets/web/icons/favourite-solid.cjs b/assets/web/icons/favourite-solid.cjs
index 6117bb11..980f8f14 100644
--- a/assets/web/icons/favourite-solid.cjs
+++ b/assets/web/icons/favourite-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function FavouriteSolidIcon(props) {
+var React = require("react");
+function FavouriteSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "m12.897 2.817 2.336 4.733 5.223.76a1 1 0 0 1 .555 1.705L17.23 13.7l.892 5.202a1 1 0 0 1-1.45 1.054L12 17.5l-4.672 2.456a1 1 0 0 1-1.451-1.054l.892-5.202-3.78-3.685a1 1 0 0 1 .555-1.706l5.223-.759 2.336-4.733a1 1 0 0 1 1.794 0Z"
@@ -14,4 +16,4 @@ function FavouriteSolidIcon(props) {
 }
 ;
 FavouriteSolidIcon.displayName = "FavouriteSolidIcon";
-module.exports = FavouriteSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(FavouriteSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/favourite-solid.d.ts b/assets/web/icons/favourite-solid.d.ts
index 73950e66..e64ef164 100644
--- a/assets/web/icons/favourite-solid.d.ts
+++ b/assets/web/icons/favourite-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * favourite-solid.svg
  */
-declare const FavouriteSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const FavouriteSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default FavouriteSolidIcon;
diff --git a/assets/web/icons/favourite-solid.js b/assets/web/icons/favourite-solid.js
index 63fe1b03..26604bb0 100644
--- a/assets/web/icons/favourite-solid.js
+++ b/assets/web/icons/favourite-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function FavouriteSolidIcon(props) {
+function FavouriteSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "m12.897 2.817 2.336 4.733 5.223.76a1 1 0 0 1 .555 1.705L17.23 13.7l.892 5.202a1 1 0 0 1-1.45 1.054L12 17.5l-4.672 2.456a1 1 0 0 1-1.451-1.054l.892-5.202-3.78-3.685a1 1 0 0 1 .555-1.706l5.223-.759 2.336-4.733a1 1 0 0 1 1.794 0Z"
@@ -14,4 +16,4 @@ function FavouriteSolidIcon(props) {
 }
 ;
 FavouriteSolidIcon.displayName = "FavouriteSolidIcon";
-export default FavouriteSolidIcon;
\ No newline at end of file
+export default forwardRef(FavouriteSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/favourite.cjs b/assets/web/icons/favourite.cjs
index 21928bce..f34827b4 100644
--- a/assets/web/icons/favourite.cjs
+++ b/assets/web/icons/favourite.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function FavouriteIcon(props) {
+var React = require("react");
+function FavouriteIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M13.905 9.378 12 5.52l-1.905 3.86-4.259.618 3.082 3.004-.727 4.242L12 15.24l3.81 2.003-.728-4.242 3.082-3.004-4.26-.619ZM8.767 7.55l2.336-4.733a1 1 0 0 1 1.794 0l2.336 4.733 5.223.76a1 1 0 0 1 .555 1.705L17.23 13.7l.892 5.202a1 1 0 0 1-1.45 1.054L12 17.5l-4.672 2.456a1 1 0 0 1-1.451-1.054l.892-5.202-3.78-3.685a1 1 0 0 1 .555-1.706l5.223-.759Z"
@@ -14,4 +16,4 @@ function FavouriteIcon(props) {
 }
 ;
 FavouriteIcon.displayName = "FavouriteIcon";
-module.exports = FavouriteIcon;
\ No newline at end of file
+module.exports = React.forwardRef(FavouriteIcon);
\ No newline at end of file
diff --git a/assets/web/icons/favourite.d.ts b/assets/web/icons/favourite.d.ts
index 64f18391..62f2d359 100644
--- a/assets/web/icons/favourite.d.ts
+++ b/assets/web/icons/favourite.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * favourite.svg
  */
-declare const FavouriteIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const FavouriteIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default FavouriteIcon;
diff --git a/assets/web/icons/favourite.js b/assets/web/icons/favourite.js
index 3169ebf9..152b5645 100644
--- a/assets/web/icons/favourite.js
+++ b/assets/web/icons/favourite.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function FavouriteIcon(props) {
+function FavouriteIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M13.905 9.378 12 5.52l-1.905 3.86-4.259.618 3.082 3.004-.727 4.242L12 15.24l3.81 2.003-.728-4.242 3.082-3.004-4.26-.619ZM8.767 7.55l2.336-4.733a1 1 0 0 1 1.794 0l2.336 4.733 5.223.76a1 1 0 0 1 .555 1.705L17.23 13.7l.892 5.202a1 1 0 0 1-1.45 1.054L12 17.5l-4.672 2.456a1 1 0 0 1-1.451-1.054l.892-5.202-3.78-3.685a1 1 0 0 1 .555-1.706l5.223-.759Z"
@@ -14,4 +16,4 @@ function FavouriteIcon(props) {
 }
 ;
 FavouriteIcon.displayName = "FavouriteIcon";
-export default FavouriteIcon;
\ No newline at end of file
+export default forwardRef(FavouriteIcon);
\ No newline at end of file
diff --git a/assets/web/icons/file-error.cjs b/assets/web/icons/file-error.cjs
index c5d00a03..9e8b8dda 100644
--- a/assets/web/icons/file-error.cjs
+++ b/assets/web/icons/file-error.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function FileErrorIcon(props) {
+var React = require("react");
+function FileErrorIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M6 22c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 20V4c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 6 2h7.175a1.975 1.975 0 0 1 1.4.575l4.85 4.85a1.975 1.975 0 0 1 .575 1.4v3.516A5.99 5.99 0 0 0 18 12V9h-4a.968.968 0 0 1-.713-.287A.967.967 0 0 1 13 8V4H6v16h6.341c.264.745.67 1.423 1.187 2H6Z"
@@ -16,4 +18,4 @@ function FileErrorIcon(props) {
 }
 ;
 FileErrorIcon.displayName = "FileErrorIcon";
-module.exports = FileErrorIcon;
\ No newline at end of file
+module.exports = React.forwardRef(FileErrorIcon);
\ No newline at end of file
diff --git a/assets/web/icons/file-error.d.ts b/assets/web/icons/file-error.d.ts
index 1af3f7ed..fd432ce1 100644
--- a/assets/web/icons/file-error.d.ts
+++ b/assets/web/icons/file-error.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * file-error.svg
  */
-declare const FileErrorIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const FileErrorIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default FileErrorIcon;
diff --git a/assets/web/icons/file-error.js b/assets/web/icons/file-error.js
index ee798cee..58f65ee7 100644
--- a/assets/web/icons/file-error.js
+++ b/assets/web/icons/file-error.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function FileErrorIcon(props) {
+function FileErrorIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M6 22c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 20V4c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 6 2h7.175a1.975 1.975 0 0 1 1.4.575l4.85 4.85a1.975 1.975 0 0 1 .575 1.4v3.516A5.99 5.99 0 0 0 18 12V9h-4a.968.968 0 0 1-.713-.287A.967.967 0 0 1 13 8V4H6v16h6.341c.264.745.67 1.423 1.187 2H6Z"
@@ -16,4 +18,4 @@ function FileErrorIcon(props) {
 }
 ;
 FileErrorIcon.displayName = "FileErrorIcon";
-export default FileErrorIcon;
\ No newline at end of file
+export default forwardRef(FileErrorIcon);
\ No newline at end of file
diff --git a/assets/web/icons/files.cjs b/assets/web/icons/files.cjs
index 1670380c..156e0e2c 100644
--- a/assets/web/icons/files.cjs
+++ b/assets/web/icons/files.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function FilesIcon(props) {
+var React = require("react");
+function FilesIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M6 22c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 20V4c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 6 2h7.175a1.975 1.975 0 0 1 1.4.575l4.85 4.85a1.975 1.975 0 0 1 .575 1.4V20c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 22H6Zm7-14V4H6v16h12V9h-4a.968.968 0 0 1-.713-.287A.967.967 0 0 1 13 8Z"
@@ -14,4 +16,4 @@ function FilesIcon(props) {
 }
 ;
 FilesIcon.displayName = "FilesIcon";
-module.exports = FilesIcon;
\ No newline at end of file
+module.exports = React.forwardRef(FilesIcon);
\ No newline at end of file
diff --git a/assets/web/icons/files.d.ts b/assets/web/icons/files.d.ts
index 45c62f62..5c20104a 100644
--- a/assets/web/icons/files.d.ts
+++ b/assets/web/icons/files.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * files.svg
  */
-declare const FilesIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const FilesIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default FilesIcon;
diff --git a/assets/web/icons/files.js b/assets/web/icons/files.js
index f7d463eb..b34370ea 100644
--- a/assets/web/icons/files.js
+++ b/assets/web/icons/files.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function FilesIcon(props) {
+function FilesIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M6 22c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 20V4c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 6 2h7.175a1.975 1.975 0 0 1 1.4.575l4.85 4.85a1.975 1.975 0 0 1 .575 1.4V20c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 22H6Zm7-14V4H6v16h12V9h-4a.968.968 0 0 1-.713-.287A.967.967 0 0 1 13 8Z"
@@ -14,4 +16,4 @@ function FilesIcon(props) {
 }
 ;
 FilesIcon.displayName = "FilesIcon";
-export default FilesIcon;
\ No newline at end of file
+export default forwardRef(FilesIcon);
\ No newline at end of file
diff --git a/assets/web/icons/filter.cjs b/assets/web/icons/filter.cjs
index 6835cd32..4aed3edf 100644
--- a/assets/web/icons/filter.cjs
+++ b/assets/web/icons/filter.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function FilterIcon(props) {
+var React = require("react");
+function FilterIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M5 7a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2H5Zm3 4a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2H8Zm2 5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1Z"
@@ -14,4 +16,4 @@ function FilterIcon(props) {
 }
 ;
 FilterIcon.displayName = "FilterIcon";
-module.exports = FilterIcon;
\ No newline at end of file
+module.exports = React.forwardRef(FilterIcon);
\ No newline at end of file
diff --git a/assets/web/icons/filter.d.ts b/assets/web/icons/filter.d.ts
index d20c4764..381396a7 100644
--- a/assets/web/icons/filter.d.ts
+++ b/assets/web/icons/filter.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * filter.svg
  */
-declare const FilterIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const FilterIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default FilterIcon;
diff --git a/assets/web/icons/filter.js b/assets/web/icons/filter.js
index 4151cdb4..7312b7bd 100644
--- a/assets/web/icons/filter.js
+++ b/assets/web/icons/filter.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function FilterIcon(props) {
+function FilterIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M5 7a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2H5Zm3 4a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2H8Zm2 5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1Z"
@@ -14,4 +16,4 @@ function FilterIcon(props) {
 }
 ;
 FilterIcon.displayName = "FilterIcon";
-export default FilterIcon;
\ No newline at end of file
+export default forwardRef(FilterIcon);
\ No newline at end of file
diff --git a/assets/web/icons/forward.cjs b/assets/web/icons/forward.cjs
index a09146d3..aac1ea2b 100644
--- a/assets/web/icons/forward.cjs
+++ b/assets/web/icons/forward.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ForwardIcon(props) {
+var React = require("react");
+function ForwardIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M14.597 5.708a1.004 1.004 0 0 1 0-1.416.996.996 0 0 1 1.412 0l4.698 4.714c.39.391.39 1.025 0 1.416l-4.698 4.714a.996.996 0 0 1-1.412 0 1.004 1.004 0 0 1 0-1.416l3.043-3.053H8.487C6.599 10.667 5 12.27 5 14.333 5.001 16.396 6.6 18 8.487 18h2.093a1 1 0 1 1 0 2H8.487C5.42 20 3 17.425 3 14.333c0-3.091 2.42-5.666 5.486-5.666h9.059l-2.95-2.959Z"
@@ -14,4 +16,4 @@ function ForwardIcon(props) {
 }
 ;
 ForwardIcon.displayName = "ForwardIcon";
-module.exports = ForwardIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ForwardIcon);
\ No newline at end of file
diff --git a/assets/web/icons/forward.d.ts b/assets/web/icons/forward.d.ts
index 160842f8..62763e95 100644
--- a/assets/web/icons/forward.d.ts
+++ b/assets/web/icons/forward.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * forward.svg
  */
-declare const ForwardIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ForwardIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ForwardIcon;
diff --git a/assets/web/icons/forward.js b/assets/web/icons/forward.js
index f0826d76..1027726e 100644
--- a/assets/web/icons/forward.js
+++ b/assets/web/icons/forward.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ForwardIcon(props) {
+function ForwardIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M14.597 5.708a1.004 1.004 0 0 1 0-1.416.996.996 0 0 1 1.412 0l4.698 4.714c.39.391.39 1.025 0 1.416l-4.698 4.714a.996.996 0 0 1-1.412 0 1.004 1.004 0 0 1 0-1.416l3.043-3.053H8.487C6.599 10.667 5 12.27 5 14.333 5.001 16.396 6.6 18 8.487 18h2.093a1 1 0 1 1 0 2H8.487C5.42 20 3 17.425 3 14.333c0-3.091 2.42-5.666 5.486-5.666h9.059l-2.95-2.959Z"
@@ -14,4 +16,4 @@ function ForwardIcon(props) {
 }
 ;
 ForwardIcon.displayName = "ForwardIcon";
-export default ForwardIcon;
\ No newline at end of file
+export default forwardRef(ForwardIcon);
\ No newline at end of file
diff --git a/assets/web/icons/grid.cjs b/assets/web/icons/grid.cjs
index fdf67df0..9aab1ae6 100644
--- a/assets/web/icons/grid.cjs
+++ b/assets/web/icons/grid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function GridIcon(props) {
+var React = require("react");
+function GridIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M4 11a.967.967 0 0 1-.712-.287A.968.968 0 0 1 3 10V4c0-.283.096-.52.288-.712A.968.968 0 0 1 4 3h6a.97.97 0 0 1 .713.288A.968.968 0 0 1 11 4v6c0 .283-.096.52-.287.713A.968.968 0 0 1 10 11H4Zm5-2V5H5v4h4Zm5 12a.968.968 0 0 1-.713-.288A.968.968 0 0 1 13 20v-6c0-.283.096-.52.287-.713A.968.968 0 0 1 14 13h6a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v6c0 .283-.096.52-.288.712A.968.968 0 0 1 20 21h-6Zm5-2v-4h-4v4h4ZM4 21a.967.967 0 0 1-.712-.288A.968.968 0 0 1 3 20v-6a.97.97 0 0 1 .288-.713A.967.967 0 0 1 4 13h6c.283 0 .52.096.713.287.191.192.287.43.287.713v6a.97.97 0 0 1-.287.712A.968.968 0 0 1 10 21H4Zm5-2v-4H5v4h4Zm5-8a.968.968 0 0 1-.713-.287A.968.968 0 0 1 13 10V4a.97.97 0 0 1 .287-.712A.968.968 0 0 1 14 3h6c.283 0 .52.096.712.288A.965.965 0 0 1 21 4v6a.97.97 0 0 1-.288.713A.968.968 0 0 1 20 11h-6Zm5-2V5h-4v4h4Z"
@@ -14,4 +16,4 @@ function GridIcon(props) {
 }
 ;
 GridIcon.displayName = "GridIcon";
-module.exports = GridIcon;
\ No newline at end of file
+module.exports = React.forwardRef(GridIcon);
\ No newline at end of file
diff --git a/assets/web/icons/grid.d.ts b/assets/web/icons/grid.d.ts
index c9f4f082..73c10344 100644
--- a/assets/web/icons/grid.d.ts
+++ b/assets/web/icons/grid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * grid.svg
  */
-declare const GridIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const GridIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default GridIcon;
diff --git a/assets/web/icons/grid.js b/assets/web/icons/grid.js
index ae982c4b..f8dfda95 100644
--- a/assets/web/icons/grid.js
+++ b/assets/web/icons/grid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function GridIcon(props) {
+function GridIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M4 11a.967.967 0 0 1-.712-.287A.968.968 0 0 1 3 10V4c0-.283.096-.52.288-.712A.968.968 0 0 1 4 3h6a.97.97 0 0 1 .713.288A.968.968 0 0 1 11 4v6c0 .283-.096.52-.287.713A.968.968 0 0 1 10 11H4Zm5-2V5H5v4h4Zm5 12a.968.968 0 0 1-.713-.288A.968.968 0 0 1 13 20v-6c0-.283.096-.52.287-.713A.968.968 0 0 1 14 13h6a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v6c0 .283-.096.52-.288.712A.968.968 0 0 1 20 21h-6Zm5-2v-4h-4v4h4ZM4 21a.967.967 0 0 1-.712-.288A.968.968 0 0 1 3 20v-6a.97.97 0 0 1 .288-.713A.967.967 0 0 1 4 13h6c.283 0 .52.096.713.287.191.192.287.43.287.713v6a.97.97 0 0 1-.287.712A.968.968 0 0 1 10 21H4Zm5-2v-4H5v4h4Zm5-8a.968.968 0 0 1-.713-.287A.968.968 0 0 1 13 10V4a.97.97 0 0 1 .287-.712A.968.968 0 0 1 14 3h6c.283 0 .52.096.712.288A.965.965 0 0 1 21 4v6a.97.97 0 0 1-.288.713A.968.968 0 0 1 20 11h-6Zm5-2V5h-4v4h4Z"
@@ -14,4 +16,4 @@ function GridIcon(props) {
 }
 ;
 GridIcon.displayName = "GridIcon";
-export default GridIcon;
\ No newline at end of file
+export default forwardRef(GridIcon);
\ No newline at end of file
diff --git a/assets/web/icons/help-solid.cjs b/assets/web/icons/help-solid.cjs
index b5751542..9c15f92e 100644
--- a/assets/web/icons/help-solid.cjs
+++ b/assets/web/icons/help-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function HelpSolidIcon(props) {
+var React = require("react");
+function HelpSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12 22a9.738 9.738 0 0 0 3.9-.788 10.098 10.098 0 0 0 3.175-2.137c.9-.9 1.613-1.958 2.137-3.175A9.738 9.738 0 0 0 22 12a9.738 9.738 0 0 0-.788-3.9 10.099 10.099 0 0 0-2.137-3.175c-.9-.9-1.958-1.612-3.175-2.137A9.738 9.738 0 0 0 12 2a9.738 9.738 0 0 0-3.9.788 10.099 10.099 0 0 0-3.175 2.137c-.9.9-1.612 1.958-2.137 3.175A9.738 9.738 0 0 0 2 12a9.74 9.74 0 0 0 .788 3.9 10.098 10.098 0 0 0 2.137 3.175c.9.9 1.958 1.613 3.175 2.137A9.738 9.738 0 0 0 12 22Zm0-14a1.5 1.5 0 0 0-1.5 1.5 1 1 0 1 1-2 0 3.5 3.5 0 1 1 6.01 2.439c-.122.126-.24.243-.352.355-.287.288-.54.54-.76.824-.293.375-.398.651-.398.882a1 1 0 1 1-2 0c0-.874.407-1.58.819-2.11.305-.392.688-.775 1-1.085l.257-.26A1.5 1.5 0 0 0 12 8Zm1 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
@@ -14,4 +16,4 @@ function HelpSolidIcon(props) {
 }
 ;
 HelpSolidIcon.displayName = "HelpSolidIcon";
-module.exports = HelpSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(HelpSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/help-solid.d.ts b/assets/web/icons/help-solid.d.ts
index 0c96f03a..60fad6e3 100644
--- a/assets/web/icons/help-solid.d.ts
+++ b/assets/web/icons/help-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * help-solid.svg
  */
-declare const HelpSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const HelpSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default HelpSolidIcon;
diff --git a/assets/web/icons/help-solid.js b/assets/web/icons/help-solid.js
index fa785263..8acb757d 100644
--- a/assets/web/icons/help-solid.js
+++ b/assets/web/icons/help-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function HelpSolidIcon(props) {
+function HelpSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M12 22a9.738 9.738 0 0 0 3.9-.788 10.098 10.098 0 0 0 3.175-2.137c.9-.9 1.613-1.958 2.137-3.175A9.738 9.738 0 0 0 22 12a9.738 9.738 0 0 0-.788-3.9 10.099 10.099 0 0 0-2.137-3.175c-.9-.9-1.958-1.612-3.175-2.137A9.738 9.738 0 0 0 12 2a9.738 9.738 0 0 0-3.9.788 10.099 10.099 0 0 0-3.175 2.137c-.9.9-1.612 1.958-2.137 3.175A9.738 9.738 0 0 0 2 12a9.74 9.74 0 0 0 .788 3.9 10.098 10.098 0 0 0 2.137 3.175c.9.9 1.958 1.613 3.175 2.137A9.738 9.738 0 0 0 12 22Zm0-14a1.5 1.5 0 0 0-1.5 1.5 1 1 0 1 1-2 0 3.5 3.5 0 1 1 6.01 2.439c-.122.126-.24.243-.352.355-.287.288-.54.54-.76.824-.293.375-.398.651-.398.882a1 1 0 1 1-2 0c0-.874.407-1.58.819-2.11.305-.392.688-.775 1-1.085l.257-.26A1.5 1.5 0 0 0 12 8Zm1 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
@@ -14,4 +16,4 @@ function HelpSolidIcon(props) {
 }
 ;
 HelpSolidIcon.displayName = "HelpSolidIcon";
-export default HelpSolidIcon;
\ No newline at end of file
+export default forwardRef(HelpSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/help.cjs b/assets/web/icons/help.cjs
index 1b2a8cbf..4ed03a1c 100644
--- a/assets/web/icons/help.cjs
+++ b/assets/web/icons/help.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function HelpIcon(props) {
+var React = require("react");
+function HelpIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12 8a1.5 1.5 0 0 0-1.5 1.5 1 1 0 1 1-2 0 3.5 3.5 0 1 1 6.01 2.439c-.122.126-.24.243-.352.355-.287.288-.54.54-.76.824-.293.375-.398.651-.398.882a1 1 0 1 1-2 0c0-.874.407-1.58.819-2.11.305-.392.688-.775 1-1.085l.257-.26A1.5 1.5 0 0 0 12 8Zm1 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
@@ -16,4 +18,4 @@ function HelpIcon(props) {
 }
 ;
 HelpIcon.displayName = "HelpIcon";
-module.exports = HelpIcon;
\ No newline at end of file
+module.exports = React.forwardRef(HelpIcon);
\ No newline at end of file
diff --git a/assets/web/icons/help.d.ts b/assets/web/icons/help.d.ts
index 3aea8e21..86f33863 100644
--- a/assets/web/icons/help.d.ts
+++ b/assets/web/icons/help.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * help.svg
  */
-declare const HelpIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const HelpIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default HelpIcon;
diff --git a/assets/web/icons/help.js b/assets/web/icons/help.js
index f5edc5e2..b9f5d1f7 100644
--- a/assets/web/icons/help.js
+++ b/assets/web/icons/help.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function HelpIcon(props) {
+function HelpIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M12 8a1.5 1.5 0 0 0-1.5 1.5 1 1 0 1 1-2 0 3.5 3.5 0 1 1 6.01 2.439c-.122.126-.24.243-.352.355-.287.288-.54.54-.76.824-.293.375-.398.651-.398.882a1 1 0 1 1-2 0c0-.874.407-1.58.819-2.11.305-.392.688-.775 1-1.085l.257-.26A1.5 1.5 0 0 0 12 8Zm1 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
@@ -16,4 +18,4 @@ function HelpIcon(props) {
 }
 ;
 HelpIcon.displayName = "HelpIcon";
-export default HelpIcon;
\ No newline at end of file
+export default forwardRef(HelpIcon);
\ No newline at end of file
diff --git a/assets/web/icons/history.cjs b/assets/web/icons/history.cjs
index d91c6018..ce091b47 100644
--- a/assets/web/icons/history.cjs
+++ b/assets/web/icons/history.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function HistoryIcon(props) {
+var React = require("react");
+function HistoryIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M18.93 8A8 8 0 1 1 4 12a1 1 0 1 0-2 0c0 5.523 4.477 10 10 10s10-4.477 10-10a9.966 9.966 0 0 0-.832-4A10.002 10.002 0 0 0 12 2a9.985 9.985 0 0 0-8 3.999V4a1 1 0 0 0-2 0v4a1 1 0 0 0 1 1h4a1 1 0 0 0 0-2H5.755A7.985 7.985 0 0 1 12 4a7.997 7.997 0 0 1 6.93 4Z"
@@ -16,4 +18,4 @@ function HistoryIcon(props) {
 }
 ;
 HistoryIcon.displayName = "HistoryIcon";
-module.exports = HistoryIcon;
\ No newline at end of file
+module.exports = React.forwardRef(HistoryIcon);
\ No newline at end of file
diff --git a/assets/web/icons/history.d.ts b/assets/web/icons/history.d.ts
index 64ea2671..3b481f34 100644
--- a/assets/web/icons/history.d.ts
+++ b/assets/web/icons/history.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * history.svg
  */
-declare const HistoryIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const HistoryIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default HistoryIcon;
diff --git a/assets/web/icons/history.js b/assets/web/icons/history.js
index 1d548875..6b81f813 100644
--- a/assets/web/icons/history.js
+++ b/assets/web/icons/history.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function HistoryIcon(props) {
+function HistoryIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M18.93 8A8 8 0 1 1 4 12a1 1 0 1 0-2 0c0 5.523 4.477 10 10 10s10-4.477 10-10a9.966 9.966 0 0 0-.832-4A10.002 10.002 0 0 0 12 2a9.985 9.985 0 0 0-8 3.999V4a1 1 0 0 0-2 0v4a1 1 0 0 0 1 1h4a1 1 0 0 0 0-2H5.755A7.985 7.985 0 0 1 12 4a7.997 7.997 0 0 1 6.93 4Z"
@@ -16,4 +18,4 @@ function HistoryIcon(props) {
 }
 ;
 HistoryIcon.displayName = "HistoryIcon";
-export default HistoryIcon;
\ No newline at end of file
+export default forwardRef(HistoryIcon);
\ No newline at end of file
diff --git a/assets/web/icons/home-solid.cjs b/assets/web/icons/home-solid.cjs
index 0efbab88..d55ac336 100644
--- a/assets/web/icons/home-solid.cjs
+++ b/assets/web/icons/home-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function HomeSolidIcon(props) {
+var React = require("react");
+function HomeSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "m12.971 3.54 7 3.889A2 2 0 0 1 21 9.177V19a2 2 0 0 1-2 2h-4v-9H9v9H5a2 2 0 0 1-2-2V9.177a2 2 0 0 1 1.029-1.748l7-3.89a2 2 0 0 1 1.942 0Z"
@@ -14,4 +16,4 @@ function HomeSolidIcon(props) {
 }
 ;
 HomeSolidIcon.displayName = "HomeSolidIcon";
-module.exports = HomeSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(HomeSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/home-solid.d.ts b/assets/web/icons/home-solid.d.ts
index 200d653b..2a8a9682 100644
--- a/assets/web/icons/home-solid.d.ts
+++ b/assets/web/icons/home-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * home-solid.svg
  */
-declare const HomeSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const HomeSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default HomeSolidIcon;
diff --git a/assets/web/icons/home-solid.js b/assets/web/icons/home-solid.js
index 5cd8f779..a618b1ac 100644
--- a/assets/web/icons/home-solid.js
+++ b/assets/web/icons/home-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function HomeSolidIcon(props) {
+function HomeSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "m12.971 3.54 7 3.889A2 2 0 0 1 21 9.177V19a2 2 0 0 1-2 2h-4v-9H9v9H5a2 2 0 0 1-2-2V9.177a2 2 0 0 1 1.029-1.748l7-3.89a2 2 0 0 1 1.942 0Z"
@@ -14,4 +16,4 @@ function HomeSolidIcon(props) {
 }
 ;
 HomeSolidIcon.displayName = "HomeSolidIcon";
-export default HomeSolidIcon;
\ No newline at end of file
+export default forwardRef(HomeSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/home.cjs b/assets/web/icons/home.cjs
index c29b0847..30943332 100644
--- a/assets/web/icons/home.cjs
+++ b/assets/web/icons/home.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function HomeIcon(props) {
+var React = require("react");
+function HomeIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       fillRule: "evenodd",
@@ -16,4 +18,4 @@ function HomeIcon(props) {
 }
 ;
 HomeIcon.displayName = "HomeIcon";
-module.exports = HomeIcon;
\ No newline at end of file
+module.exports = React.forwardRef(HomeIcon);
\ No newline at end of file
diff --git a/assets/web/icons/home.d.ts b/assets/web/icons/home.d.ts
index 070c5a58..300aaeec 100644
--- a/assets/web/icons/home.d.ts
+++ b/assets/web/icons/home.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * home.svg
  */
-declare const HomeIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const HomeIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default HomeIcon;
diff --git a/assets/web/icons/home.js b/assets/web/icons/home.js
index 657a2f65..346eec8d 100644
--- a/assets/web/icons/home.js
+++ b/assets/web/icons/home.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function HomeIcon(props) {
+function HomeIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       fillRule: "evenodd",
@@ -16,4 +18,4 @@ function HomeIcon(props) {
 }
 ;
 HomeIcon.displayName = "HomeIcon";
-export default HomeIcon;
\ No newline at end of file
+export default forwardRef(HomeIcon);
\ No newline at end of file
diff --git a/assets/web/icons/host.cjs b/assets/web/icons/host.cjs
index 1241773b..1259b052 100644
--- a/assets/web/icons/host.cjs
+++ b/assets/web/icons/host.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function HostIcon(props) {
+var React = require("react");
+function HostIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M16.712 6.713A.968.968 0 0 1 16 7a.968.968 0 0 1-.713-.287A.967.967 0 0 1 15 6c0-.283.096-.52.287-.713A.968.968 0 0 1 16 5a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713Z"
@@ -18,4 +20,4 @@ function HostIcon(props) {
 }
 ;
 HostIcon.displayName = "HostIcon";
-module.exports = HostIcon;
\ No newline at end of file
+module.exports = React.forwardRef(HostIcon);
\ No newline at end of file
diff --git a/assets/web/icons/host.d.ts b/assets/web/icons/host.d.ts
index 8690e60b..ad7025fe 100644
--- a/assets/web/icons/host.d.ts
+++ b/assets/web/icons/host.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * host.svg
  */
-declare const HostIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const HostIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default HostIcon;
diff --git a/assets/web/icons/host.js b/assets/web/icons/host.js
index 09e83066..0153a337 100644
--- a/assets/web/icons/host.js
+++ b/assets/web/icons/host.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function HostIcon(props) {
+function HostIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M16.712 6.713A.968.968 0 0 1 16 7a.968.968 0 0 1-.713-.287A.967.967 0 0 1 15 6c0-.283.096-.52.287-.713A.968.968 0 0 1 16 5a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713Z"
@@ -18,4 +20,4 @@ function HostIcon(props) {
 }
 ;
 HostIcon.displayName = "HostIcon";
-export default HostIcon;
\ No newline at end of file
+export default forwardRef(HostIcon);
\ No newline at end of file
diff --git a/assets/web/icons/image-error.cjs b/assets/web/icons/image-error.cjs
index 958498e1..cdb3890f 100644
--- a/assets/web/icons/image-error.cjs
+++ b/assets/web/icons/image-error.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ImageErrorIcon(props) {
+var React = require("react");
+function ImageErrorIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7.803a5.958 5.958 0 0 1-.72-2H5v-3.172l4-4 3.585 3.585a6.015 6.015 0 0 1 1.172-1.656l-3.343-3.343a2 2 0 0 0-2.828 0L5 13V5h14v7.083c.718.12 1.393.368 2 .72V5a2 2 0 0 0-2-2H5Z"
@@ -16,4 +18,4 @@ function ImageErrorIcon(props) {
 }
 ;
 ImageErrorIcon.displayName = "ImageErrorIcon";
-module.exports = ImageErrorIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ImageErrorIcon);
\ No newline at end of file
diff --git a/assets/web/icons/image-error.d.ts b/assets/web/icons/image-error.d.ts
index aa6189f2..7e72154c 100644
--- a/assets/web/icons/image-error.d.ts
+++ b/assets/web/icons/image-error.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * image-error.svg
  */
-declare const ImageErrorIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ImageErrorIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ImageErrorIcon;
diff --git a/assets/web/icons/image-error.js b/assets/web/icons/image-error.js
index d79ddd8f..18f55be6 100644
--- a/assets/web/icons/image-error.js
+++ b/assets/web/icons/image-error.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function ImageErrorIcon(props) {
+function ImageErrorIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7.803a5.958 5.958 0 0 1-.72-2H5v-3.172l4-4 3.585 3.585a6.015 6.015 0 0 1 1.172-1.656l-3.343-3.343a2 2 0 0 0-2.828 0L5 13V5h14v7.083c.718.12 1.393.368 2 .72V5a2 2 0 0 0-2-2H5Z"
@@ -16,4 +18,4 @@ function ImageErrorIcon(props) {
 }
 ;
 ImageErrorIcon.displayName = "ImageErrorIcon";
-export default ImageErrorIcon;
\ No newline at end of file
+export default forwardRef(ImageErrorIcon);
\ No newline at end of file
diff --git a/assets/web/icons/image.cjs b/assets/web/icons/image.cjs
index 56bd0c06..76a5a80c 100644
--- a/assets/web/icons/image.cjs
+++ b/assets/web/icons/image.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ImageIcon(props) {
+var React = require("react");
+function ImageIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M17 9a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"
@@ -16,4 +18,4 @@ function ImageIcon(props) {
 }
 ;
 ImageIcon.displayName = "ImageIcon";
-module.exports = ImageIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ImageIcon);
\ No newline at end of file
diff --git a/assets/web/icons/image.d.ts b/assets/web/icons/image.d.ts
index 53b5719b..0fabeecc 100644
--- a/assets/web/icons/image.d.ts
+++ b/assets/web/icons/image.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * image.svg
  */
-declare const ImageIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ImageIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ImageIcon;
diff --git a/assets/web/icons/image.js b/assets/web/icons/image.js
index b02e325d..cd81341f 100644
--- a/assets/web/icons/image.js
+++ b/assets/web/icons/image.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function ImageIcon(props) {
+function ImageIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M17 9a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"
@@ -16,4 +18,4 @@ function ImageIcon(props) {
 }
 ;
 ImageIcon.displayName = "ImageIcon";
-export default ImageIcon;
\ No newline at end of file
+export default forwardRef(ImageIcon);
\ No newline at end of file
diff --git a/assets/web/icons/indent-decrease.cjs b/assets/web/icons/indent-decrease.cjs
index fa530814..ba6df257 100644
--- a/assets/web/icons/indent-decrease.cjs
+++ b/assets/web/icons/indent-decrease.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function IndentDecreaseIcon(props) {
+var React = require("react");
+function IndentDecreaseIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M3.288 18.712A.965.965 0 0 0 4 19h16c.283 0 .52-.096.712-.288A.968.968 0 0 0 21 18a.968.968 0 0 0-.288-.712A.968.968 0 0 0 20 17H4a.967.967 0 0 0-.712.288A.968.968 0 0 0 3 18c0 .283.096.52.288.712Zm7.999-3.999c.192.191.43.287.713.287h8a.97.97 0 0 0 .712-.287A.968.968 0 0 0 21 14a.968.968 0 0 0-.288-.713A.968.968 0 0 0 20 13h-8a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 14c0 .283.096.52.287.713Zm0-4c.192.191.43.287.713.287h8a.97.97 0 0 0 .712-.287A.968.968 0 0 0 21 10a.967.967 0 0 0-.288-.713A.968.968 0 0 0 20 9h-8a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 10c0 .283.096.52.287.713Zm0-4c.192.191.43.287.713.287h8a.97.97 0 0 0 .712-.287A.967.967 0 0 0 21 6a.967.967 0 0 0-.288-.713A.968.968 0 0 0 20 5h-8a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 6c0 .283.096.52.287.713ZM6.15 13.15l-2.8-2.8a.48.48 0 0 1 0-.7l2.8-2.8c.167-.167.35-.208.55-.125.2.083.3.242.3.475v5.6c0 .233-.1.392-.3.475-.2.083-.383.042-.55-.125Z"
@@ -14,4 +16,4 @@ function IndentDecreaseIcon(props) {
 }
 ;
 IndentDecreaseIcon.displayName = "IndentDecreaseIcon";
-module.exports = IndentDecreaseIcon;
\ No newline at end of file
+module.exports = React.forwardRef(IndentDecreaseIcon);
\ No newline at end of file
diff --git a/assets/web/icons/indent-decrease.d.ts b/assets/web/icons/indent-decrease.d.ts
index f85a3810..e9c91062 100644
--- a/assets/web/icons/indent-decrease.d.ts
+++ b/assets/web/icons/indent-decrease.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * indent-decrease.svg
  */
-declare const IndentDecreaseIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const IndentDecreaseIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default IndentDecreaseIcon;
diff --git a/assets/web/icons/indent-decrease.js b/assets/web/icons/indent-decrease.js
index 5f2f05f8..82399b3d 100644
--- a/assets/web/icons/indent-decrease.js
+++ b/assets/web/icons/indent-decrease.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function IndentDecreaseIcon(props) {
+function IndentDecreaseIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M3.288 18.712A.965.965 0 0 0 4 19h16c.283 0 .52-.096.712-.288A.968.968 0 0 0 21 18a.968.968 0 0 0-.288-.712A.968.968 0 0 0 20 17H4a.967.967 0 0 0-.712.288A.968.968 0 0 0 3 18c0 .283.096.52.288.712Zm7.999-3.999c.192.191.43.287.713.287h8a.97.97 0 0 0 .712-.287A.968.968 0 0 0 21 14a.968.968 0 0 0-.288-.713A.968.968 0 0 0 20 13h-8a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 14c0 .283.096.52.287.713Zm0-4c.192.191.43.287.713.287h8a.97.97 0 0 0 .712-.287A.968.968 0 0 0 21 10a.967.967 0 0 0-.288-.713A.968.968 0 0 0 20 9h-8a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 10c0 .283.096.52.287.713Zm0-4c.192.191.43.287.713.287h8a.97.97 0 0 0 .712-.287A.967.967 0 0 0 21 6a.967.967 0 0 0-.288-.713A.968.968 0 0 0 20 5h-8a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 6c0 .283.096.52.287.713ZM6.15 13.15l-2.8-2.8a.48.48 0 0 1 0-.7l2.8-2.8c.167-.167.35-.208.55-.125.2.083.3.242.3.475v5.6c0 .233-.1.392-.3.475-.2.083-.383.042-.55-.125Z"
@@ -14,4 +16,4 @@ function IndentDecreaseIcon(props) {
 }
 ;
 IndentDecreaseIcon.displayName = "IndentDecreaseIcon";
-export default IndentDecreaseIcon;
\ No newline at end of file
+export default forwardRef(IndentDecreaseIcon);
\ No newline at end of file
diff --git a/assets/web/icons/indent-increase.cjs b/assets/web/icons/indent-increase.cjs
index 945f5ea3..450f6b0f 100644
--- a/assets/web/icons/indent-increase.cjs
+++ b/assets/web/icons/indent-increase.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function IndentIncreaseIcon(props) {
+var React = require("react");
+function IndentIncreaseIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M4 19a.967.967 0 0 1-.712-.288A.968.968 0 0 1 3 18c0-.283.096-.52.288-.712A.967.967 0 0 1 4 17h16c.283 0 .52.096.712.288.192.191.288.429.288.712s-.096.52-.288.712A.968.968 0 0 1 20 19H4Zm8-4a.968.968 0 0 1-.713-.287A.968.968 0 0 1 11 14c0-.283.096-.52.287-.713A.968.968 0 0 1 12 13h8a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 20 15h-8Zm0-4a.968.968 0 0 1-.713-.287A.968.968 0 0 1 11 10c0-.283.096-.52.287-.713A.968.968 0 0 1 12 9h8a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 20 11h-8Zm0-4a.968.968 0 0 1-.713-.287A.967.967 0 0 1 11 6c0-.283.096-.52.287-.713A.968.968 0 0 1 12 5h8a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 20 7h-8Zm-8.15 6.15c-.167.167-.35.208-.55.125-.2-.083-.3-.242-.3-.475V7.2c0-.233.1-.392.3-.475.2-.083.383-.042.55.125l2.8 2.8a.48.48 0 0 1 0 .7l-2.8 2.8Z"
@@ -14,4 +16,4 @@ function IndentIncreaseIcon(props) {
 }
 ;
 IndentIncreaseIcon.displayName = "IndentIncreaseIcon";
-module.exports = IndentIncreaseIcon;
\ No newline at end of file
+module.exports = React.forwardRef(IndentIncreaseIcon);
\ No newline at end of file
diff --git a/assets/web/icons/indent-increase.d.ts b/assets/web/icons/indent-increase.d.ts
index 98fafd61..3b2d2758 100644
--- a/assets/web/icons/indent-increase.d.ts
+++ b/assets/web/icons/indent-increase.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * indent-increase.svg
  */
-declare const IndentIncreaseIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const IndentIncreaseIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default IndentIncreaseIcon;
diff --git a/assets/web/icons/indent-increase.js b/assets/web/icons/indent-increase.js
index 5b741d98..c18d53ee 100644
--- a/assets/web/icons/indent-increase.js
+++ b/assets/web/icons/indent-increase.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function IndentIncreaseIcon(props) {
+function IndentIncreaseIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M4 19a.967.967 0 0 1-.712-.288A.968.968 0 0 1 3 18c0-.283.096-.52.288-.712A.967.967 0 0 1 4 17h16c.283 0 .52.096.712.288.192.191.288.429.288.712s-.096.52-.288.712A.968.968 0 0 1 20 19H4Zm8-4a.968.968 0 0 1-.713-.287A.968.968 0 0 1 11 14c0-.283.096-.52.287-.713A.968.968 0 0 1 12 13h8a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 20 15h-8Zm0-4a.968.968 0 0 1-.713-.287A.968.968 0 0 1 11 10c0-.283.096-.52.287-.713A.968.968 0 0 1 12 9h8a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 20 11h-8Zm0-4a.968.968 0 0 1-.713-.287A.967.967 0 0 1 11 6c0-.283.096-.52.287-.713A.968.968 0 0 1 12 5h8a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 20 7h-8Zm-8.15 6.15c-.167.167-.35.208-.55.125-.2-.083-.3-.242-.3-.475V7.2c0-.233.1-.392.3-.475.2-.083.383-.042.55.125l2.8 2.8a.48.48 0 0 1 0 .7l-2.8 2.8Z"
@@ -14,4 +16,4 @@ function IndentIncreaseIcon(props) {
 }
 ;
 IndentIncreaseIcon.displayName = "IndentIncreaseIcon";
-export default IndentIncreaseIcon;
\ No newline at end of file
+export default forwardRef(IndentIncreaseIcon);
\ No newline at end of file
diff --git a/assets/web/icons/info-solid.cjs b/assets/web/icons/info-solid.cjs
index 953a9c50..48d0e018 100644
--- a/assets/web/icons/info-solid.cjs
+++ b/assets/web/icons/info-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function InfoSolidIcon(props) {
+var React = require("react");
+function InfoSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
@@ -14,4 +16,4 @@ function InfoSolidIcon(props) {
 }
 ;
 InfoSolidIcon.displayName = "InfoSolidIcon";
-module.exports = InfoSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(InfoSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/info-solid.d.ts b/assets/web/icons/info-solid.d.ts
index dada47ea..540f9f35 100644
--- a/assets/web/icons/info-solid.d.ts
+++ b/assets/web/icons/info-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * info-solid.svg
  */
-declare const InfoSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const InfoSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default InfoSolidIcon;
diff --git a/assets/web/icons/info-solid.js b/assets/web/icons/info-solid.js
index 28342aa6..27f69a28 100644
--- a/assets/web/icons/info-solid.js
+++ b/assets/web/icons/info-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function InfoSolidIcon(props) {
+function InfoSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
@@ -14,4 +16,4 @@ function InfoSolidIcon(props) {
 }
 ;
 InfoSolidIcon.displayName = "InfoSolidIcon";
-export default InfoSolidIcon;
\ No newline at end of file
+export default forwardRef(InfoSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/info.cjs b/assets/web/icons/info.cjs
index c23f182e..f7e8c327 100644
--- a/assets/web/icons/info.cjs
+++ b/assets/web/icons/info.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function InfoIcon(props) {
+var React = require("react");
+function InfoIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M11.287 7.287A.968.968 0 0 1 12 7c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0 1 12 9a.968.968 0 0 1-.713-.287A.967.967 0 0 1 11 8c0-.283.096-.52.287-.713Zm0 4A.968.968 0 0 1 12 11c.283 0 .52.096.713.287.191.192.287.43.287.713v4a.97.97 0 0 1-.287.712A.968.968 0 0 1 12 17a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 16v-4c0-.283.096-.52.287-.713Z"
@@ -18,4 +20,4 @@ function InfoIcon(props) {
 }
 ;
 InfoIcon.displayName = "InfoIcon";
-module.exports = InfoIcon;
\ No newline at end of file
+module.exports = React.forwardRef(InfoIcon);
\ No newline at end of file
diff --git a/assets/web/icons/info.d.ts b/assets/web/icons/info.d.ts
index 0e4f4fe6..2ec634aa 100644
--- a/assets/web/icons/info.d.ts
+++ b/assets/web/icons/info.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * info.svg
  */
-declare const InfoIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const InfoIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default InfoIcon;
diff --git a/assets/web/icons/info.js b/assets/web/icons/info.js
index 93684d0e..89fe1c6f 100644
--- a/assets/web/icons/info.js
+++ b/assets/web/icons/info.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function InfoIcon(props) {
+function InfoIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M11.287 7.287A.968.968 0 0 1 12 7c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0 1 12 9a.968.968 0 0 1-.713-.287A.967.967 0 0 1 11 8c0-.283.096-.52.287-.713Zm0 4A.968.968 0 0 1 12 11c.283 0 .52.096.713.287.191.192.287.43.287.713v4a.97.97 0 0 1-.287.712A.968.968 0 0 1 12 17a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 16v-4c0-.283.096-.52.287-.713Z"
@@ -18,4 +20,4 @@ function InfoIcon(props) {
 }
 ;
 InfoIcon.displayName = "InfoIcon";
-export default InfoIcon;
\ No newline at end of file
+export default forwardRef(InfoIcon);
\ No newline at end of file
diff --git a/assets/web/icons/inline-code.cjs b/assets/web/icons/inline-code.cjs
index ad1eda8d..9cc128ca 100644
--- a/assets/web/icons/inline-code.cjs
+++ b/assets/web/icons/inline-code.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function InlineCodeIcon(props) {
+var React = require("react");
+function InlineCodeIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M14.958 5.62a1 1 0 0 0-1.916-.574l-4 13.333a1 1 0 0 0 1.916.575l4-13.333ZM5.974 7.232a1 1 0 0 0-1.409.128l-3.333 4a1 1 0 0 0 0 1.28l3.333 4a1 1 0 0 0 1.537-1.28L3.302 12l2.8-3.36a1 1 0 0 0-.128-1.408Zm12.052 0a1 1 0 0 1 1.409.128l3.333 4a1 1 0 0 1 0 1.28l-3.333 4a1 1 0 0 1-1.537-1.28l2.8-3.36-2.8-3.36a1 1 0 0 1 .128-1.408Z"
@@ -14,4 +16,4 @@ function InlineCodeIcon(props) {
 }
 ;
 InlineCodeIcon.displayName = "InlineCodeIcon";
-module.exports = InlineCodeIcon;
\ No newline at end of file
+module.exports = React.forwardRef(InlineCodeIcon);
\ No newline at end of file
diff --git a/assets/web/icons/inline-code.d.ts b/assets/web/icons/inline-code.d.ts
index cf3eeca5..fc514d1b 100644
--- a/assets/web/icons/inline-code.d.ts
+++ b/assets/web/icons/inline-code.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * inline-code.svg
  */
-declare const InlineCodeIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const InlineCodeIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default InlineCodeIcon;
diff --git a/assets/web/icons/inline-code.js b/assets/web/icons/inline-code.js
index 00d43c67..d9efff31 100644
--- a/assets/web/icons/inline-code.js
+++ b/assets/web/icons/inline-code.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function InlineCodeIcon(props) {
+function InlineCodeIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M14.958 5.62a1 1 0 0 0-1.916-.574l-4 13.333a1 1 0 0 0 1.916.575l4-13.333ZM5.974 7.232a1 1 0 0 0-1.409.128l-3.333 4a1 1 0 0 0 0 1.28l3.333 4a1 1 0 0 0 1.537-1.28L3.302 12l2.8-3.36a1 1 0 0 0-.128-1.408Zm12.052 0a1 1 0 0 1 1.409.128l3.333 4a1 1 0 0 1 0 1.28l-3.333 4a1 1 0 0 1-1.537-1.28l2.8-3.36-2.8-3.36a1 1 0 0 1 .128-1.408Z"
@@ -14,4 +16,4 @@ function InlineCodeIcon(props) {
 }
 ;
 InlineCodeIcon.displayName = "InlineCodeIcon";
-export default InlineCodeIcon;
\ No newline at end of file
+export default forwardRef(InlineCodeIcon);
\ No newline at end of file
diff --git a/assets/web/icons/italic.cjs b/assets/web/icons/italic.cjs
index 524dee0a..629d5931 100644
--- a/assets/web/icons/italic.cjs
+++ b/assets/web/icons/italic.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ItalicIcon(props) {
+var React = require("react");
+function ItalicIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M6.25 19c-.35 0-.646-.12-.888-.363A1.207 1.207 0 0 1 5 17.75c0-.35.12-.646.362-.887.242-.242.538-.363.888-.363H9l3-9H9.25c-.35 0-.646-.12-.887-.362A1.207 1.207 0 0 1 8 6.25c0-.35.12-.646.363-.888A1.21 1.21 0 0 1 9.25 5h7.5c.35 0 .646.12.887.362.242.242.363.538.363.888s-.12.646-.363.888a1.207 1.207 0 0 1-.887.362H14.5l-3 9h2.25c.35 0 .646.12.887.363.242.241.363.537.363.887s-.12.646-.363.887a1.207 1.207 0 0 1-.887.363h-7.5Z"
@@ -14,4 +16,4 @@ function ItalicIcon(props) {
 }
 ;
 ItalicIcon.displayName = "ItalicIcon";
-module.exports = ItalicIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ItalicIcon);
\ No newline at end of file
diff --git a/assets/web/icons/italic.d.ts b/assets/web/icons/italic.d.ts
index f83a3222..264782cb 100644
--- a/assets/web/icons/italic.d.ts
+++ b/assets/web/icons/italic.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * italic.svg
  */
-declare const ItalicIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ItalicIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ItalicIcon;
diff --git a/assets/web/icons/italic.js b/assets/web/icons/italic.js
index b71c3e93..d5573253 100644
--- a/assets/web/icons/italic.js
+++ b/assets/web/icons/italic.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ItalicIcon(props) {
+function ItalicIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M6.25 19c-.35 0-.646-.12-.888-.363A1.207 1.207 0 0 1 5 17.75c0-.35.12-.646.362-.887.242-.242.538-.363.888-.363H9l3-9H9.25c-.35 0-.646-.12-.887-.362A1.207 1.207 0 0 1 8 6.25c0-.35.12-.646.363-.888A1.21 1.21 0 0 1 9.25 5h7.5c.35 0 .646.12.887.362.242.242.363.538.363.888s-.12.646-.363.888a1.207 1.207 0 0 1-.887.362H14.5l-3 9h2.25c.35 0 .646.12.887.363.242.241.363.537.363.887s-.12.646-.363.887a1.207 1.207 0 0 1-.887.363h-7.5Z"
@@ -14,4 +16,4 @@ function ItalicIcon(props) {
 }
 ;
 ItalicIcon.displayName = "ItalicIcon";
-export default ItalicIcon;
\ No newline at end of file
+export default forwardRef(ItalicIcon);
\ No newline at end of file
diff --git a/assets/web/icons/key-off-solid.cjs b/assets/web/icons/key-off-solid.cjs
index 887b4644..7f54972b 100644
--- a/assets/web/icons/key-off-solid.cjs
+++ b/assets/web/icons/key-off-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function KeyOffSolidIcon(props) {
+var React = require("react");
+function KeyOffSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M4.917 2.083a1 1 0 0 0-1.414 1.414L6.07 6.064c-1.27.18-2.377.743-3.32 1.686C1.583 8.917 1 10.333 1 12c0 1.667.583 3.083 1.75 4.25C3.917 17.417 5.333 18 7 18a5.863 5.863 0 0 0 3.475-1.1A5.81 5.81 0 0 0 12.65 14H13l1.3 1.3c.1.1.208.17.325.213.117.041.242.062.375.062s.258-.02.375-.062a.782.782 0 0 0 .1-.044l5.028 5.028a1 1 0 0 0 1.414-1.414l-17-17Zm.67 11.33A1.926 1.926 0 0 1 5 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 7 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.413A1.926 1.926 0 0 1 7 14c-.55 0-1.02-.196-1.412-.587Zm14.9 1.423L15.65 10h4.95a1.033 1.033 0 0 1 .725.3l1.025 1.025c.083.083.15.18.2.288.05.108.075.229.075.362a1.067 1.067 0 0 1-.25.7l-1.888 2.16Z"
@@ -14,4 +16,4 @@ function KeyOffSolidIcon(props) {
 }
 ;
 KeyOffSolidIcon.displayName = "KeyOffSolidIcon";
-module.exports = KeyOffSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(KeyOffSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/key-off-solid.d.ts b/assets/web/icons/key-off-solid.d.ts
index 746cc239..5ae7fdf8 100644
--- a/assets/web/icons/key-off-solid.d.ts
+++ b/assets/web/icons/key-off-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * key-off-solid.svg
  */
-declare const KeyOffSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const KeyOffSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default KeyOffSolidIcon;
diff --git a/assets/web/icons/key-off-solid.js b/assets/web/icons/key-off-solid.js
index 63ba6527..7ad7b8fc 100644
--- a/assets/web/icons/key-off-solid.js
+++ b/assets/web/icons/key-off-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function KeyOffSolidIcon(props) {
+function KeyOffSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M4.917 2.083a1 1 0 0 0-1.414 1.414L6.07 6.064c-1.27.18-2.377.743-3.32 1.686C1.583 8.917 1 10.333 1 12c0 1.667.583 3.083 1.75 4.25C3.917 17.417 5.333 18 7 18a5.863 5.863 0 0 0 3.475-1.1A5.81 5.81 0 0 0 12.65 14H13l1.3 1.3c.1.1.208.17.325.213.117.041.242.062.375.062s.258-.02.375-.062a.782.782 0 0 0 .1-.044l5.028 5.028a1 1 0 0 0 1.414-1.414l-17-17Zm.67 11.33A1.926 1.926 0 0 1 5 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 7 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.413A1.926 1.926 0 0 1 7 14c-.55 0-1.02-.196-1.412-.587Zm14.9 1.423L15.65 10h4.95a1.033 1.033 0 0 1 .725.3l1.025 1.025c.083.083.15.18.2.288.05.108.075.229.075.362a1.067 1.067 0 0 1-.25.7l-1.888 2.16Z"
@@ -14,4 +16,4 @@ function KeyOffSolidIcon(props) {
 }
 ;
 KeyOffSolidIcon.displayName = "KeyOffSolidIcon";
-export default KeyOffSolidIcon;
\ No newline at end of file
+export default forwardRef(KeyOffSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/key-off.cjs b/assets/web/icons/key-off.cjs
index de300e0d..c15e3c9a 100644
--- a/assets/web/icons/key-off.cjs
+++ b/assets/web/icons/key-off.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function KeyOffIcon(props) {
+var React = require("react");
+function KeyOffIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M7 14c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 5 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 7 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.413A1.926 1.926 0 0 1 7 14Z"
@@ -16,4 +18,4 @@ function KeyOffIcon(props) {
 }
 ;
 KeyOffIcon.displayName = "KeyOffIcon";
-module.exports = KeyOffIcon;
\ No newline at end of file
+module.exports = React.forwardRef(KeyOffIcon);
\ No newline at end of file
diff --git a/assets/web/icons/key-off.d.ts b/assets/web/icons/key-off.d.ts
index d7578389..4f0a91c3 100644
--- a/assets/web/icons/key-off.d.ts
+++ b/assets/web/icons/key-off.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * key-off.svg
  */
-declare const KeyOffIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const KeyOffIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default KeyOffIcon;
diff --git a/assets/web/icons/key-off.js b/assets/web/icons/key-off.js
index 7f2e981f..6892e1f1 100644
--- a/assets/web/icons/key-off.js
+++ b/assets/web/icons/key-off.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function KeyOffIcon(props) {
+function KeyOffIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M7 14c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 5 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 7 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.413A1.926 1.926 0 0 1 7 14Z"
@@ -16,4 +18,4 @@ function KeyOffIcon(props) {
 }
 ;
 KeyOffIcon.displayName = "KeyOffIcon";
-export default KeyOffIcon;
\ No newline at end of file
+export default forwardRef(KeyOffIcon);
\ No newline at end of file
diff --git a/assets/web/icons/key-solid.cjs b/assets/web/icons/key-solid.cjs
index bf4b6f05..872038ca 100644
--- a/assets/web/icons/key-solid.cjs
+++ b/assets/web/icons/key-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function KeySolidIcon(props) {
+var React = require("react");
+function KeySolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M10.475 16.9A5.863 5.863 0 0 1 7 18c-1.667 0-3.083-.583-4.25-1.75C1.583 15.083 1 13.667 1 12c0-1.667.583-3.083 1.75-4.25C3.917 6.583 5.333 6 7 6c1.35 0 2.53.383 3.537 1.15 1.009.767 1.713 1.717 2.113 2.85h7.95a1.033 1.033 0 0 1 .725.3l1.025 1.025a.99.99 0 0 1 .2.288c.05.108.075.229.075.362a1.066 1.066 0 0 1-.25.7l-2.25 2.575a.973.973 0 0 1-1.038.313 1.033 1.033 0 0 1-.337-.188L17 14l-1.3 1.3c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063c-.133 0-.258-.02-.375-.063a.877.877 0 0 1-.325-.212L13 14h-.35a5.81 5.81 0 0 1-2.175 2.9Zm-4.887-3.487c.391.39.862.587 1.412.587.55 0 1.02-.196 1.412-.588C8.804 13.021 9 12.55 9 12c0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 7 10c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 5 12c0 .55.196 1.02.588 1.412Z"
@@ -14,4 +16,4 @@ function KeySolidIcon(props) {
 }
 ;
 KeySolidIcon.displayName = "KeySolidIcon";
-module.exports = KeySolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(KeySolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/key-solid.d.ts b/assets/web/icons/key-solid.d.ts
index 1003fa7c..96e1ce93 100644
--- a/assets/web/icons/key-solid.d.ts
+++ b/assets/web/icons/key-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * key-solid.svg
  */
-declare const KeySolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const KeySolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default KeySolidIcon;
diff --git a/assets/web/icons/key-solid.js b/assets/web/icons/key-solid.js
index 308d13c9..8b30917f 100644
--- a/assets/web/icons/key-solid.js
+++ b/assets/web/icons/key-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function KeySolidIcon(props) {
+function KeySolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M10.475 16.9A5.863 5.863 0 0 1 7 18c-1.667 0-3.083-.583-4.25-1.75C1.583 15.083 1 13.667 1 12c0-1.667.583-3.083 1.75-4.25C3.917 6.583 5.333 6 7 6c1.35 0 2.53.383 3.537 1.15 1.009.767 1.713 1.717 2.113 2.85h7.95a1.033 1.033 0 0 1 .725.3l1.025 1.025a.99.99 0 0 1 .2.288c.05.108.075.229.075.362a1.066 1.066 0 0 1-.25.7l-2.25 2.575a.973.973 0 0 1-1.038.313 1.033 1.033 0 0 1-.337-.188L17 14l-1.3 1.3c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063c-.133 0-.258-.02-.375-.063a.877.877 0 0 1-.325-.212L13 14h-.35a5.81 5.81 0 0 1-2.175 2.9Zm-4.887-3.487c.391.39.862.587 1.412.587.55 0 1.02-.196 1.412-.588C8.804 13.021 9 12.55 9 12c0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 7 10c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 5 12c0 .55.196 1.02.588 1.412Z"
@@ -14,4 +16,4 @@ function KeySolidIcon(props) {
 }
 ;
 KeySolidIcon.displayName = "KeySolidIcon";
-export default KeySolidIcon;
\ No newline at end of file
+export default forwardRef(KeySolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/key.cjs b/assets/web/icons/key.cjs
index ab60df04..ded2580d 100644
--- a/assets/web/icons/key.cjs
+++ b/assets/web/icons/key.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function KeyIcon(props) {
+var React = require("react");
+function KeyIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M7 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 5 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 7 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 7 14Zm0 4c-1.667 0-3.083-.583-4.25-1.75C1.583 15.083 1 13.667 1 12c0-1.667.583-3.083 1.75-4.25C3.917 6.583 5.333 6 7 6c1.117 0 2.13.275 3.037.825A6.212 6.212 0 0 1 12.2 9h8.375a1.033 1.033 0 0 1 .725.3l2 2c.1.1.17.208.212.325.042.117.063.242.063.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-3.175 3.175a.946.946 0 0 1-.3.2c-.117.05-.233.083-.35.1a.832.832 0 0 1-.35-.025.884.884 0 0 1-.325-.175L17.5 15l-1.425 1.075a.945.945 0 0 1-.887.15.859.859 0 0 1-.288-.15L13.375 15H12.2a6.212 6.212 0 0 1-2.162 2.175C9.128 17.725 8.117 18 7 18Zm0-2c.933 0 1.754-.283 2.463-.85A4.032 4.032 0 0 0 10.875 13H14l1.45 1.025L17.5 12.5l1.775 1.375L21.15 12l-1-1h-9.275a4.032 4.032 0 0 0-1.412-2.15C8.754 8.283 7.933 8 7 8c-1.1 0-2.042.392-2.825 1.175C3.392 9.958 3 10.9 3 12s.392 2.042 1.175 2.825C4.958 15.608 5.9 16 7 16Z"
@@ -14,4 +16,4 @@ function KeyIcon(props) {
 }
 ;
 KeyIcon.displayName = "KeyIcon";
-module.exports = KeyIcon;
\ No newline at end of file
+module.exports = React.forwardRef(KeyIcon);
\ No newline at end of file
diff --git a/assets/web/icons/key.d.ts b/assets/web/icons/key.d.ts
index 45e2ed11..68fc5cd4 100644
--- a/assets/web/icons/key.d.ts
+++ b/assets/web/icons/key.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * key.svg
  */
-declare const KeyIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const KeyIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default KeyIcon;
diff --git a/assets/web/icons/key.js b/assets/web/icons/key.js
index ea3424ac..b01950e4 100644
--- a/assets/web/icons/key.js
+++ b/assets/web/icons/key.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function KeyIcon(props) {
+function KeyIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M7 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 5 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 7 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 7 14Zm0 4c-1.667 0-3.083-.583-4.25-1.75C1.583 15.083 1 13.667 1 12c0-1.667.583-3.083 1.75-4.25C3.917 6.583 5.333 6 7 6c1.117 0 2.13.275 3.037.825A6.212 6.212 0 0 1 12.2 9h8.375a1.033 1.033 0 0 1 .725.3l2 2c.1.1.17.208.212.325.042.117.063.242.063.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-3.175 3.175a.946.946 0 0 1-.3.2c-.117.05-.233.083-.35.1a.832.832 0 0 1-.35-.025.884.884 0 0 1-.325-.175L17.5 15l-1.425 1.075a.945.945 0 0 1-.887.15.859.859 0 0 1-.288-.15L13.375 15H12.2a6.212 6.212 0 0 1-2.162 2.175C9.128 17.725 8.117 18 7 18Zm0-2c.933 0 1.754-.283 2.463-.85A4.032 4.032 0 0 0 10.875 13H14l1.45 1.025L17.5 12.5l1.775 1.375L21.15 12l-1-1h-9.275a4.032 4.032 0 0 0-1.412-2.15C8.754 8.283 7.933 8 7 8c-1.1 0-2.042.392-2.825 1.175C3.392 9.958 3 10.9 3 12s.392 2.042 1.175 2.825C4.958 15.608 5.9 16 7 16Z"
@@ -14,4 +16,4 @@ function KeyIcon(props) {
 }
 ;
 KeyIcon.displayName = "KeyIcon";
-export default KeyIcon;
\ No newline at end of file
+export default forwardRef(KeyIcon);
\ No newline at end of file
diff --git a/assets/web/icons/keyboard.cjs b/assets/web/icons/keyboard.cjs
index c006bc38..5de02477 100644
--- a/assets/web/icons/keyboard.cjs
+++ b/assets/web/icons/keyboard.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function KeyboardIcon(props) {
+var React = require("react");
+function KeyboardIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M5.188 8v2h2V8h-2Zm3.875 0v2h2V8h-2Zm3.875 0v2h2V8h-2Zm3.875 0v2h2V8h-2ZM5.188 11.531v2h2v-2h-2Zm3.875 0v2h2v-2h-2Zm3.875 0v2h2v-2h-2Zm3.875 0v2h2v-2h-2ZM9 15a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2H9Z"
@@ -18,4 +20,4 @@ function KeyboardIcon(props) {
 }
 ;
 KeyboardIcon.displayName = "KeyboardIcon";
-module.exports = KeyboardIcon;
\ No newline at end of file
+module.exports = React.forwardRef(KeyboardIcon);
\ No newline at end of file
diff --git a/assets/web/icons/keyboard.d.ts b/assets/web/icons/keyboard.d.ts
index 5e77618e..c83a7650 100644
--- a/assets/web/icons/keyboard.d.ts
+++ b/assets/web/icons/keyboard.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * keyboard.svg
  */
-declare const KeyboardIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const KeyboardIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default KeyboardIcon;
diff --git a/assets/web/icons/keyboard.js b/assets/web/icons/keyboard.js
index 7c2e30fa..60616ffe 100644
--- a/assets/web/icons/keyboard.js
+++ b/assets/web/icons/keyboard.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function KeyboardIcon(props) {
+function KeyboardIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M5.188 8v2h2V8h-2Zm3.875 0v2h2V8h-2Zm3.875 0v2h2V8h-2Zm3.875 0v2h2V8h-2ZM5.188 11.531v2h2v-2h-2Zm3.875 0v2h2v-2h-2Zm3.875 0v2h2v-2h-2Zm3.875 0v2h2v-2h-2ZM9 15a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2H9Z"
@@ -18,4 +20,4 @@ function KeyboardIcon(props) {
 }
 ;
 KeyboardIcon.displayName = "KeyboardIcon";
-export default KeyboardIcon;
\ No newline at end of file
+export default forwardRef(KeyboardIcon);
\ No newline at end of file
diff --git a/assets/web/icons/labs.cjs b/assets/web/icons/labs.cjs
index bb9f6c49..39167614 100644
--- a/assets/web/icons/labs.cjs
+++ b/assets/web/icons/labs.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function LabsIcon(props) {
+var React = require("react");
+function LabsIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12 5a1 1 0 0 1-1-1V3a1 1 0 1 1 2 0v1a1 1 0 0 1-1 1Zm-7.071-.071a1 1 0 0 1 1.414 0l.707.707A1 1 0 0 1 5.636 7.05l-.707-.707a1 1 0 0 1 0-1.414Z"
@@ -20,4 +22,4 @@ function LabsIcon(props) {
 }
 ;
 LabsIcon.displayName = "LabsIcon";
-module.exports = LabsIcon;
\ No newline at end of file
+module.exports = React.forwardRef(LabsIcon);
\ No newline at end of file
diff --git a/assets/web/icons/labs.d.ts b/assets/web/icons/labs.d.ts
index 8094fab4..c4b11c81 100644
--- a/assets/web/icons/labs.d.ts
+++ b/assets/web/icons/labs.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * labs.svg
  */
-declare const LabsIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const LabsIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default LabsIcon;
diff --git a/assets/web/icons/labs.js b/assets/web/icons/labs.js
index c9256de5..282586c7 100644
--- a/assets/web/icons/labs.js
+++ b/assets/web/icons/labs.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function LabsIcon(props) {
+function LabsIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M12 5a1 1 0 0 1-1-1V3a1 1 0 1 1 2 0v1a1 1 0 0 1-1 1Zm-7.071-.071a1 1 0 0 1 1.414 0l.707.707A1 1 0 0 1 5.636 7.05l-.707-.707a1 1 0 0 1 0-1.414Z"
@@ -20,4 +22,4 @@ function LabsIcon(props) {
 }
 ;
 LabsIcon.displayName = "LabsIcon";
-export default LabsIcon;
\ No newline at end of file
+export default forwardRef(LabsIcon);
\ No newline at end of file
diff --git a/assets/web/icons/leave.cjs b/assets/web/icons/leave.cjs
index a6c97112..dfc55bcd 100644
--- a/assets/web/icons/leave.cjs
+++ b/assets/web/icons/leave.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function LeaveIcon(props) {
+var React = require("react");
+function LeaveIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M14 13c.283 0 .52-.096.713-.287A.968.968 0 0 0 15 12a.968.968 0 0 0-.287-.713A.968.968 0 0 0 14 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 13 12c0 .283.096.52.287.713.192.191.43.287.713.287Z"
@@ -16,4 +18,4 @@ function LeaveIcon(props) {
 }
 ;
 LeaveIcon.displayName = "LeaveIcon";
-module.exports = LeaveIcon;
\ No newline at end of file
+module.exports = React.forwardRef(LeaveIcon);
\ No newline at end of file
diff --git a/assets/web/icons/leave.d.ts b/assets/web/icons/leave.d.ts
index 5776b94e..380d995e 100644
--- a/assets/web/icons/leave.d.ts
+++ b/assets/web/icons/leave.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * leave.svg
  */
-declare const LeaveIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const LeaveIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default LeaveIcon;
diff --git a/assets/web/icons/leave.js b/assets/web/icons/leave.js
index 1eec25ca..9cb62030 100644
--- a/assets/web/icons/leave.js
+++ b/assets/web/icons/leave.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function LeaveIcon(props) {
+function LeaveIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M14 13c.283 0 .52-.096.713-.287A.968.968 0 0 0 15 12a.968.968 0 0 0-.287-.713A.968.968 0 0 0 14 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 13 12c0 .283.096.52.287.713.192.191.43.287.713.287Z"
@@ -16,4 +18,4 @@ function LeaveIcon(props) {
 }
 ;
 LeaveIcon.displayName = "LeaveIcon";
-export default LeaveIcon;
\ No newline at end of file
+export default forwardRef(LeaveIcon);
\ No newline at end of file
diff --git a/assets/web/icons/link.cjs b/assets/web/icons/link.cjs
index a6763b13..3f3ff706 100644
--- a/assets/web/icons/link.cjs
+++ b/assets/web/icons/link.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function LinkIcon(props) {
+var React = require("react");
+function LinkIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12 19.071c-.978.978-2.157 1.467-3.536 1.467-1.378 0-2.557-.489-3.535-1.467-.978-.978-1.467-2.157-1.467-3.535 0-1.38.489-2.558 1.467-3.536L7.05 9.879c.2-.2.436-.3.707-.3.271 0 .507.1.707.3.2.2.301.436.301.707 0 .27-.1.507-.3.707l-2.122 2.121a2.893 2.893 0 0 0-.884 2.122c0 .824.295 1.532.884 2.12.59.59 1.296.885 2.121.885s1.533-.295 2.122-.884l2.121-2.121c.2-.2.436-.3.707-.3.271 0 .507.1.707.3.2.2.3.436.3.707 0 .27-.1.506-.3.707L12 19.07Zm-1.414-4.243c-.2.2-.436.301-.707.301a.968.968 0 0 1-.707-.3.97.97 0 0 1-.301-.708c0-.27.1-.506.3-.707l4.243-4.242c.2-.2.436-.3.707-.3.271 0 .507.1.707.3.2.2.3.436.3.707 0 .27-.1.507-.3.707l-4.242 4.242Zm6.364-.707c-.2.2-.436.3-.707.3a.968.968 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.506.3-.707l2.122-2.121c.59-.59.884-1.297.884-2.121 0-.825-.295-1.533-.884-2.122a2.893 2.893 0 0 0-2.121-.884c-.825 0-1.532.295-2.122.884l-2.121 2.122c-.2.2-.436.3-.707.3a.968.968 0 0 1-.707-.3.97.97 0 0 1-.3-.708c0-.27.1-.506.3-.707L12 4.93c.978-.978 2.157-1.467 3.536-1.467 1.378 0 2.557.489 3.535 1.467.978.978 1.467 2.157 1.467 3.536 0 1.378-.489 2.557-1.467 3.535l-2.121 2.121Z"
@@ -14,4 +16,4 @@ function LinkIcon(props) {
 }
 ;
 LinkIcon.displayName = "LinkIcon";
-module.exports = LinkIcon;
\ No newline at end of file
+module.exports = React.forwardRef(LinkIcon);
\ No newline at end of file
diff --git a/assets/web/icons/link.d.ts b/assets/web/icons/link.d.ts
index f7d1689e..b79043ec 100644
--- a/assets/web/icons/link.d.ts
+++ b/assets/web/icons/link.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * link.svg
  */
-declare const LinkIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const LinkIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default LinkIcon;
diff --git a/assets/web/icons/link.js b/assets/web/icons/link.js
index 794a68d7..cd53e5e3 100644
--- a/assets/web/icons/link.js
+++ b/assets/web/icons/link.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function LinkIcon(props) {
+function LinkIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M12 19.071c-.978.978-2.157 1.467-3.536 1.467-1.378 0-2.557-.489-3.535-1.467-.978-.978-1.467-2.157-1.467-3.535 0-1.38.489-2.558 1.467-3.536L7.05 9.879c.2-.2.436-.3.707-.3.271 0 .507.1.707.3.2.2.301.436.301.707 0 .27-.1.507-.3.707l-2.122 2.121a2.893 2.893 0 0 0-.884 2.122c0 .824.295 1.532.884 2.12.59.59 1.296.885 2.121.885s1.533-.295 2.122-.884l2.121-2.121c.2-.2.436-.3.707-.3.271 0 .507.1.707.3.2.2.3.436.3.707 0 .27-.1.506-.3.707L12 19.07Zm-1.414-4.243c-.2.2-.436.301-.707.301a.968.968 0 0 1-.707-.3.97.97 0 0 1-.301-.708c0-.27.1-.506.3-.707l4.243-4.242c.2-.2.436-.3.707-.3.271 0 .507.1.707.3.2.2.3.436.3.707 0 .27-.1.507-.3.707l-4.242 4.242Zm6.364-.707c-.2.2-.436.3-.707.3a.968.968 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.506.3-.707l2.122-2.121c.59-.59.884-1.297.884-2.121 0-.825-.295-1.533-.884-2.122a2.893 2.893 0 0 0-2.121-.884c-.825 0-1.532.295-2.122.884l-2.121 2.122c-.2.2-.436.3-.707.3a.968.968 0 0 1-.707-.3.97.97 0 0 1-.3-.708c0-.27.1-.506.3-.707L12 4.93c.978-.978 2.157-1.467 3.536-1.467 1.378 0 2.557.489 3.535 1.467.978.978 1.467 2.157 1.467 3.536 0 1.378-.489 2.557-1.467 3.535l-2.121 2.121Z"
@@ -14,4 +16,4 @@ function LinkIcon(props) {
 }
 ;
 LinkIcon.displayName = "LinkIcon";
-export default LinkIcon;
\ No newline at end of file
+export default forwardRef(LinkIcon);
\ No newline at end of file
diff --git a/assets/web/icons/list-bulleted.cjs b/assets/web/icons/list-bulleted.cjs
index dbf2a6ac..dedff5c7 100644
--- a/assets/web/icons/list-bulleted.cjs
+++ b/assets/web/icons/list-bulleted.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ListBulletedIcon(props) {
+var React = require("react");
+function ListBulletedIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M4.5 7.5a1.45 1.45 0 0 1-1.06-.44A1.444 1.444 0 0 1 3 6c0-.412.147-.766.44-1.06A1.45 1.45 0 0 1 4.5 4.5c.412 0 .766.147 1.06.44.293.294.44.647.44 1.06 0 .412-.147.766-.44 1.06-.294.293-.647.44-1.06.44Zm4.787 11.212c.192.192.43.288.713.288h10c.283 0 .52-.096.712-.288A.968.968 0 0 0 21 18a.968.968 0 0 0-.288-.712A.968.968 0 0 0 20 17H10a.967.967 0 0 0-.713.288A.968.968 0 0 0 9 18c0 .283.096.52.287.712Zm0-5.999c.192.191.43.287.713.287h10a.97.97 0 0 0 .712-.287A.968.968 0 0 0 21 12a.968.968 0 0 0-.288-.713A.968.968 0 0 0 20 11H10a.967.967 0 0 0-.713.287A.968.968 0 0 0 9 12c0 .283.096.52.287.713Zm0-6c.192.191.43.287.713.287h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 21 6a.967.967 0 0 0-.288-.713A.968.968 0 0 0 20 5H10a.968.968 0 0 0-.713.287A.968.968 0 0 0 9 6c0 .283.096.52.287.713ZM3.44 19.06c.294.293.648.44 1.06.44a1.45 1.45 0 0 0 1.06-.44c.293-.294.44-.647.44-1.06 0-.413-.147-.766-.44-1.06a1.445 1.445 0 0 0-1.06-.44 1.45 1.45 0 0 0-1.06.44c-.293.294-.44.647-.44 1.06 0 .413.147.766.44 1.06ZM4.5 13.5a1.45 1.45 0 0 1-1.06-.44A1.445 1.445 0 0 1 3 12c0-.412.147-.766.44-1.06a1.45 1.45 0 0 1 1.06-.44c.412 0 .766.147 1.06.44.293.294.44.648.44 1.06 0 .412-.147.766-.44 1.06-.294.293-.647.44-1.06.44Z"
@@ -14,4 +16,4 @@ function ListBulletedIcon(props) {
 }
 ;
 ListBulletedIcon.displayName = "ListBulletedIcon";
-module.exports = ListBulletedIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ListBulletedIcon);
\ No newline at end of file
diff --git a/assets/web/icons/list-bulleted.d.ts b/assets/web/icons/list-bulleted.d.ts
index 6df2b5ef..d748603c 100644
--- a/assets/web/icons/list-bulleted.d.ts
+++ b/assets/web/icons/list-bulleted.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * list-bulleted.svg
  */
-declare const ListBulletedIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ListBulletedIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ListBulletedIcon;
diff --git a/assets/web/icons/list-bulleted.js b/assets/web/icons/list-bulleted.js
index 95596c9c..f9705e77 100644
--- a/assets/web/icons/list-bulleted.js
+++ b/assets/web/icons/list-bulleted.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ListBulletedIcon(props) {
+function ListBulletedIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M4.5 7.5a1.45 1.45 0 0 1-1.06-.44A1.444 1.444 0 0 1 3 6c0-.412.147-.766.44-1.06A1.45 1.45 0 0 1 4.5 4.5c.412 0 .766.147 1.06.44.293.294.44.647.44 1.06 0 .412-.147.766-.44 1.06-.294.293-.647.44-1.06.44Zm4.787 11.212c.192.192.43.288.713.288h10c.283 0 .52-.096.712-.288A.968.968 0 0 0 21 18a.968.968 0 0 0-.288-.712A.968.968 0 0 0 20 17H10a.967.967 0 0 0-.713.288A.968.968 0 0 0 9 18c0 .283.096.52.287.712Zm0-5.999c.192.191.43.287.713.287h10a.97.97 0 0 0 .712-.287A.968.968 0 0 0 21 12a.968.968 0 0 0-.288-.713A.968.968 0 0 0 20 11H10a.967.967 0 0 0-.713.287A.968.968 0 0 0 9 12c0 .283.096.52.287.713Zm0-6c.192.191.43.287.713.287h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 21 6a.967.967 0 0 0-.288-.713A.968.968 0 0 0 20 5H10a.968.968 0 0 0-.713.287A.968.968 0 0 0 9 6c0 .283.096.52.287.713ZM3.44 19.06c.294.293.648.44 1.06.44a1.45 1.45 0 0 0 1.06-.44c.293-.294.44-.647.44-1.06 0-.413-.147-.766-.44-1.06a1.445 1.445 0 0 0-1.06-.44 1.45 1.45 0 0 0-1.06.44c-.293.294-.44.647-.44 1.06 0 .413.147.766.44 1.06ZM4.5 13.5a1.45 1.45 0 0 1-1.06-.44A1.445 1.445 0 0 1 3 12c0-.412.147-.766.44-1.06a1.45 1.45 0 0 1 1.06-.44c.412 0 .766.147 1.06.44.293.294.44.648.44 1.06 0 .412-.147.766-.44 1.06-.294.293-.647.44-1.06.44Z"
@@ -14,4 +16,4 @@ function ListBulletedIcon(props) {
 }
 ;
 ListBulletedIcon.displayName = "ListBulletedIcon";
-export default ListBulletedIcon;
\ No newline at end of file
+export default forwardRef(ListBulletedIcon);
\ No newline at end of file
diff --git a/assets/web/icons/list-numbered.cjs b/assets/web/icons/list-numbered.cjs
index 47b552ea..797a19e1 100644
--- a/assets/web/icons/list-numbered.cjs
+++ b/assets/web/icons/list-numbered.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ListNumberedIcon(props) {
+var React = require("react");
+function ListNumberedIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M9 6a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H10a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H10a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H10a1 1 0 0 1-1-1ZM5.604 5.089A.75.75 0 0 1 6 5.75v4.5a.75.75 0 0 1-1.5 0V7.151l-.334.223a.75.75 0 0 1-.832-1.248l1.5-1a.75.75 0 0 1 .77-.037ZM5 13a2.02 2.02 0 0 0-1.139.321 1.846 1.846 0 0 0-.626.719 2.286 2.286 0 0 0-.234.921v.023l-.001.01v.005l.75.001H3a.75.75 0 0 0 1.5.01V15a.789.789 0 0 1 .077-.29.35.35 0 0 1 .116-.14c.04-.027.126-.07.307-.07s.267.043.307.07a.35.35 0 0 1 .116.14.788.788 0 0 1 .076.29v.008a.532.532 0 0 1-.14.352l-2.161 2.351a.748.748 0 0 0-.198.523v.016c0 .414.336.75.75.75h2.5a.75.75 0 0 0 0-1.5h-.82l1.034-1.124C6.809 16 7 15.51 7 15h-.75H7v-.039l-.004-.068a2.285 2.285 0 0 0-.231-.853 1.846 1.846 0 0 0-.626-.719A2.02 2.02 0 0 0 5 13Zm-.5 2.003V15v.01-.008Z"
@@ -14,4 +16,4 @@ function ListNumberedIcon(props) {
 }
 ;
 ListNumberedIcon.displayName = "ListNumberedIcon";
-module.exports = ListNumberedIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ListNumberedIcon);
\ No newline at end of file
diff --git a/assets/web/icons/list-numbered.d.ts b/assets/web/icons/list-numbered.d.ts
index bd600372..2f42bf91 100644
--- a/assets/web/icons/list-numbered.d.ts
+++ b/assets/web/icons/list-numbered.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * list-numbered.svg
  */
-declare const ListNumberedIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ListNumberedIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ListNumberedIcon;
diff --git a/assets/web/icons/list-numbered.js b/assets/web/icons/list-numbered.js
index cf940d76..fe3d96a8 100644
--- a/assets/web/icons/list-numbered.js
+++ b/assets/web/icons/list-numbered.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ListNumberedIcon(props) {
+function ListNumberedIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M9 6a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H10a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H10a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H10a1 1 0 0 1-1-1ZM5.604 5.089A.75.75 0 0 1 6 5.75v4.5a.75.75 0 0 1-1.5 0V7.151l-.334.223a.75.75 0 0 1-.832-1.248l1.5-1a.75.75 0 0 1 .77-.037ZM5 13a2.02 2.02 0 0 0-1.139.321 1.846 1.846 0 0 0-.626.719 2.286 2.286 0 0 0-.234.921v.023l-.001.01v.005l.75.001H3a.75.75 0 0 0 1.5.01V15a.789.789 0 0 1 .077-.29.35.35 0 0 1 .116-.14c.04-.027.126-.07.307-.07s.267.043.307.07a.35.35 0 0 1 .116.14.788.788 0 0 1 .076.29v.008a.532.532 0 0 1-.14.352l-2.161 2.351a.748.748 0 0 0-.198.523v.016c0 .414.336.75.75.75h2.5a.75.75 0 0 0 0-1.5h-.82l1.034-1.124C6.809 16 7 15.51 7 15h-.75H7v-.039l-.004-.068a2.285 2.285 0 0 0-.231-.853 1.846 1.846 0 0 0-.626-.719A2.02 2.02 0 0 0 5 13Zm-.5 2.003V15v.01-.008Z"
@@ -14,4 +16,4 @@ function ListNumberedIcon(props) {
 }
 ;
 ListNumberedIcon.displayName = "ListNumberedIcon";
-export default ListNumberedIcon;
\ No newline at end of file
+export default forwardRef(ListNumberedIcon);
\ No newline at end of file
diff --git a/assets/web/icons/location-navigator-centred.cjs b/assets/web/icons/location-navigator-centred.cjs
index 6bcc68d6..810f4ef6 100644
--- a/assets/web/icons/location-navigator-centred.cjs
+++ b/assets/web/icons/location-navigator-centred.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function LocationNavigatorCentredIcon(props) {
+var React = require("react");
+function LocationNavigatorCentredIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M11 21.95v-1c-2.084-.233-3.871-1.096-5.363-2.587C4.146 16.87 3.283 15.083 3.05 13h-1a.967.967 0 0 1-.713-.287A.968.968 0 0 1 1.05 12c0-.283.096-.52.287-.713A.967.967 0 0 1 2.05 11h1c.233-2.083 1.096-3.87 2.587-5.363C7.13 4.146 8.917 3.283 11 3.05v-1c0-.283.096-.52.287-.713A.968.968 0 0 1 12 1.05a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v1c2.083.233 3.87 1.096 5.362 2.587C19.854 7.13 20.717 8.917 20.95 11h1a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713a.968.968 0 0 1-.712.287h-1c-.233 2.083-1.096 3.87-2.588 5.363-1.491 1.491-3.279 2.354-5.362 2.587v1a.97.97 0 0 1-.288.713.968.968 0 0 1-.712.287.968.968 0 0 1-.713-.287.968.968 0 0 1-.287-.713ZM12 19c1.933 0 3.583-.683 4.95-2.05C18.317 15.583 19 13.933 19 12c0-1.933-.683-3.583-2.05-4.95C15.583 5.683 13.933 5 12 5c-1.934 0-3.584.683-4.95 2.05C5.683 8.417 5 10.067 5 12c0 1.933.683 3.583 2.05 4.95C8.416 18.317 10.066 19 12 19Zm0-3c-1.1 0-2.042-.392-2.825-1.175C8.39 14.042 8 13.1 8 12s.391-2.042 1.175-2.825C9.958 8.392 10.9 8 12 8s2.041.392 2.825 1.175C15.608 9.958 16 10.9 16 12s-.392 2.042-1.175 2.825C14.04 15.608 13.1 16 12 16Z"
@@ -14,4 +16,4 @@ function LocationNavigatorCentredIcon(props) {
 }
 ;
 LocationNavigatorCentredIcon.displayName = "LocationNavigatorCentredIcon";
-module.exports = LocationNavigatorCentredIcon;
\ No newline at end of file
+module.exports = React.forwardRef(LocationNavigatorCentredIcon);
\ No newline at end of file
diff --git a/assets/web/icons/location-navigator-centred.d.ts b/assets/web/icons/location-navigator-centred.d.ts
index 9ecdd541..18c41f51 100644
--- a/assets/web/icons/location-navigator-centred.d.ts
+++ b/assets/web/icons/location-navigator-centred.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * location-navigator-centred.svg
  */
-declare const LocationNavigatorCentredIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const LocationNavigatorCentredIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default LocationNavigatorCentredIcon;
diff --git a/assets/web/icons/location-navigator-centred.js b/assets/web/icons/location-navigator-centred.js
index 50c7cf88..a746d41c 100644
--- a/assets/web/icons/location-navigator-centred.js
+++ b/assets/web/icons/location-navigator-centred.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function LocationNavigatorCentredIcon(props) {
+function LocationNavigatorCentredIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M11 21.95v-1c-2.084-.233-3.871-1.096-5.363-2.587C4.146 16.87 3.283 15.083 3.05 13h-1a.967.967 0 0 1-.713-.287A.968.968 0 0 1 1.05 12c0-.283.096-.52.287-.713A.967.967 0 0 1 2.05 11h1c.233-2.083 1.096-3.87 2.587-5.363C7.13 4.146 8.917 3.283 11 3.05v-1c0-.283.096-.52.287-.713A.968.968 0 0 1 12 1.05a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v1c2.083.233 3.87 1.096 5.362 2.587C19.854 7.13 20.717 8.917 20.95 11h1a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713a.968.968 0 0 1-.712.287h-1c-.233 2.083-1.096 3.87-2.588 5.363-1.491 1.491-3.279 2.354-5.362 2.587v1a.97.97 0 0 1-.288.713.968.968 0 0 1-.712.287.968.968 0 0 1-.713-.287.968.968 0 0 1-.287-.713ZM12 19c1.933 0 3.583-.683 4.95-2.05C18.317 15.583 19 13.933 19 12c0-1.933-.683-3.583-2.05-4.95C15.583 5.683 13.933 5 12 5c-1.934 0-3.584.683-4.95 2.05C5.683 8.417 5 10.067 5 12c0 1.933.683 3.583 2.05 4.95C8.416 18.317 10.066 19 12 19Zm0-3c-1.1 0-2.042-.392-2.825-1.175C8.39 14.042 8 13.1 8 12s.391-2.042 1.175-2.825C9.958 8.392 10.9 8 12 8s2.041.392 2.825 1.175C15.608 9.958 16 10.9 16 12s-.392 2.042-1.175 2.825C14.04 15.608 13.1 16 12 16Z"
@@ -14,4 +16,4 @@ function LocationNavigatorCentredIcon(props) {
 }
 ;
 LocationNavigatorCentredIcon.displayName = "LocationNavigatorCentredIcon";
-export default LocationNavigatorCentredIcon;
\ No newline at end of file
+export default forwardRef(LocationNavigatorCentredIcon);
\ No newline at end of file
diff --git a/assets/web/icons/location-navigator.cjs b/assets/web/icons/location-navigator.cjs
index e0e422f3..850cbe8a 100644
--- a/assets/web/icons/location-navigator.cjs
+++ b/assets/web/icons/location-navigator.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function LocationNavigatorIcon(props) {
+var React = require("react");
+function LocationNavigatorIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M11 22v-1c-2.084-.233-3.871-1.096-5.363-2.587-1.491-1.492-2.354-3.28-2.587-5.363h-1a.968.968 0 0 1-.713-.288.968.968 0 0 1-.287-.712c0-.283.096-.52.287-.713a.967.967 0 0 1 .713-.287h1c.233-2.083 1.096-3.87 2.587-5.363C7.13 4.196 8.917 3.333 11 3.1v-1c0-.283.096-.52.287-.713A.968.968 0 0 1 12 1.1a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v1c2.083.233 3.87 1.096 5.362 2.587 1.492 1.492 2.355 3.28 2.588 5.363h1a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.712a.968.968 0 0 1-.712.288h-1c-.233 2.083-1.096 3.87-2.588 5.363C16.871 19.904 15.083 20.767 13 21v1c0 .283-.096.52-.288.712A.968.968 0 0 1 12 23a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 22Zm1-2.95c1.933 0 3.583-.683 4.95-2.05 1.367-1.367 2.05-3.017 2.05-4.95 0-1.933-.683-3.583-2.05-4.95-1.367-1.367-3.017-2.05-4.95-2.05-1.934 0-3.584.683-4.95 2.05C5.683 8.467 5 10.117 5 12.05c0 1.933.683 3.583 2.05 4.95 1.366 1.367 3.016 2.05 4.95 2.05Z"
@@ -14,4 +16,4 @@ function LocationNavigatorIcon(props) {
 }
 ;
 LocationNavigatorIcon.displayName = "LocationNavigatorIcon";
-module.exports = LocationNavigatorIcon;
\ No newline at end of file
+module.exports = React.forwardRef(LocationNavigatorIcon);
\ No newline at end of file
diff --git a/assets/web/icons/location-navigator.d.ts b/assets/web/icons/location-navigator.d.ts
index c25a327d..13c63c64 100644
--- a/assets/web/icons/location-navigator.d.ts
+++ b/assets/web/icons/location-navigator.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * location-navigator.svg
  */
-declare const LocationNavigatorIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const LocationNavigatorIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default LocationNavigatorIcon;
diff --git a/assets/web/icons/location-navigator.js b/assets/web/icons/location-navigator.js
index 2b90a921..6b4d69ae 100644
--- a/assets/web/icons/location-navigator.js
+++ b/assets/web/icons/location-navigator.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function LocationNavigatorIcon(props) {
+function LocationNavigatorIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M11 22v-1c-2.084-.233-3.871-1.096-5.363-2.587-1.491-1.492-2.354-3.28-2.587-5.363h-1a.968.968 0 0 1-.713-.288.968.968 0 0 1-.287-.712c0-.283.096-.52.287-.713a.967.967 0 0 1 .713-.287h1c.233-2.083 1.096-3.87 2.587-5.363C7.13 4.196 8.917 3.333 11 3.1v-1c0-.283.096-.52.287-.713A.968.968 0 0 1 12 1.1a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v1c2.083.233 3.87 1.096 5.362 2.587 1.492 1.492 2.355 3.28 2.588 5.363h1a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.712a.968.968 0 0 1-.712.288h-1c-.233 2.083-1.096 3.87-2.588 5.363C16.871 19.904 15.083 20.767 13 21v1c0 .283-.096.52-.288.712A.968.968 0 0 1 12 23a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 22Zm1-2.95c1.933 0 3.583-.683 4.95-2.05 1.367-1.367 2.05-3.017 2.05-4.95 0-1.933-.683-3.583-2.05-4.95-1.367-1.367-3.017-2.05-4.95-2.05-1.934 0-3.584.683-4.95 2.05C5.683 8.467 5 10.117 5 12.05c0 1.933.683 3.583 2.05 4.95 1.366 1.367 3.016 2.05 4.95 2.05Z"
@@ -14,4 +16,4 @@ function LocationNavigatorIcon(props) {
 }
 ;
 LocationNavigatorIcon.displayName = "LocationNavigatorIcon";
-export default LocationNavigatorIcon;
\ No newline at end of file
+export default forwardRef(LocationNavigatorIcon);
\ No newline at end of file
diff --git a/assets/web/icons/location-pin-solid.cjs b/assets/web/icons/location-pin-solid.cjs
index afbda4cf..ba60ad50 100644
--- a/assets/web/icons/location-pin-solid.cjs
+++ b/assets/web/icons/location-pin-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function LocationPinSolidIcon(props) {
+var React = require("react");
+function LocationPinSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12 21.325a2.07 2.07 0 0 1-.7-.125 1.84 1.84 0 0 1-.625-.375A39.112 39.112 0 0 1 7.8 17.9c-.833-.95-1.53-1.87-2.087-2.762-.559-.892-.984-1.75-1.276-2.575C4.146 11.738 4 10.95 4 10.2c0-2.5.804-4.492 2.412-5.975C8.021 2.742 9.883 2 12 2s3.98.742 5.587 2.225C19.197 5.708 20 7.7 20 10.2c0 .75-.146 1.538-.438 2.363-.291.824-.716 1.683-1.274 2.574A21.678 21.678 0 0 1 16.2 17.9a39.112 39.112 0 0 1-2.875 2.925 1.84 1.84 0 0 1-.625.375 2.07 2.07 0 0 1-.7.125ZM12 12c.55 0 1.02-.196 1.412-.588.392-.391.588-.862.588-1.412 0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 12 8c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 10 10c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z"
@@ -14,4 +16,4 @@ function LocationPinSolidIcon(props) {
 }
 ;
 LocationPinSolidIcon.displayName = "LocationPinSolidIcon";
-module.exports = LocationPinSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(LocationPinSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/location-pin-solid.d.ts b/assets/web/icons/location-pin-solid.d.ts
index fbbac971..8131797e 100644
--- a/assets/web/icons/location-pin-solid.d.ts
+++ b/assets/web/icons/location-pin-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * location-pin-solid.svg
  */
-declare const LocationPinSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const LocationPinSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default LocationPinSolidIcon;
diff --git a/assets/web/icons/location-pin-solid.js b/assets/web/icons/location-pin-solid.js
index 1cb218bf..85f137fe 100644
--- a/assets/web/icons/location-pin-solid.js
+++ b/assets/web/icons/location-pin-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function LocationPinSolidIcon(props) {
+function LocationPinSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M12 21.325a2.07 2.07 0 0 1-.7-.125 1.84 1.84 0 0 1-.625-.375A39.112 39.112 0 0 1 7.8 17.9c-.833-.95-1.53-1.87-2.087-2.762-.559-.892-.984-1.75-1.276-2.575C4.146 11.738 4 10.95 4 10.2c0-2.5.804-4.492 2.412-5.975C8.021 2.742 9.883 2 12 2s3.98.742 5.587 2.225C19.197 5.708 20 7.7 20 10.2c0 .75-.146 1.538-.438 2.363-.291.824-.716 1.683-1.274 2.574A21.678 21.678 0 0 1 16.2 17.9a39.112 39.112 0 0 1-2.875 2.925 1.84 1.84 0 0 1-.625.375 2.07 2.07 0 0 1-.7.125ZM12 12c.55 0 1.02-.196 1.412-.588.392-.391.588-.862.588-1.412 0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 12 8c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 10 10c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z"
@@ -14,4 +16,4 @@ function LocationPinSolidIcon(props) {
 }
 ;
 LocationPinSolidIcon.displayName = "LocationPinSolidIcon";
-export default LocationPinSolidIcon;
\ No newline at end of file
+export default forwardRef(LocationPinSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/location-pin.cjs b/assets/web/icons/location-pin.cjs
index febdc715..2f4cf171 100644
--- a/assets/web/icons/location-pin.cjs
+++ b/assets/web/icons/location-pin.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function LocationPinIcon(props) {
+var React = require("react");
+function LocationPinIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12 19.35c2.033-1.867 3.542-3.563 4.525-5.088C17.508 12.738 18 11.383 18 10.2c0-1.817-.58-3.304-1.738-4.462C15.104 4.579 13.683 4 12 4c-1.683 0-3.104.58-4.263 1.737C6.58 6.896 6 8.383 6 10.2c0 1.183.492 2.538 1.475 4.063.983 1.524 2.492 3.22 4.525 5.087Zm0 1.975a2.07 2.07 0 0 1-.7-.125 1.84 1.84 0 0 1-.625-.375A39.112 39.112 0 0 1 7.8 17.9c-.833-.95-1.53-1.87-2.087-2.762-.559-.892-.984-1.75-1.276-2.575C4.146 11.738 4 10.95 4 10.2c0-2.5.804-4.492 2.412-5.975C8.021 2.742 9.883 2 12 2s3.98.742 5.587 2.225C19.197 5.708 20 7.7 20 10.2c0 .75-.146 1.538-.438 2.363-.291.824-.716 1.683-1.274 2.574A21.678 21.678 0 0 1 16.2 17.9a39.112 39.112 0 0 1-2.875 2.925 1.84 1.84 0 0 1-.625.375 2.07 2.07 0 0 1-.7.125ZM12 12c.55 0 1.02-.196 1.412-.588.392-.391.588-.862.588-1.412 0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 12 8c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 10 10c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z"
@@ -14,4 +16,4 @@ function LocationPinIcon(props) {
 }
 ;
 LocationPinIcon.displayName = "LocationPinIcon";
-module.exports = LocationPinIcon;
\ No newline at end of file
+module.exports = React.forwardRef(LocationPinIcon);
\ No newline at end of file
diff --git a/assets/web/icons/location-pin.d.ts b/assets/web/icons/location-pin.d.ts
index b0d9c734..351f10ab 100644
--- a/assets/web/icons/location-pin.d.ts
+++ b/assets/web/icons/location-pin.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * location-pin.svg
  */
-declare const LocationPinIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const LocationPinIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default LocationPinIcon;
diff --git a/assets/web/icons/location-pin.js b/assets/web/icons/location-pin.js
index 6ae750b4..71ce3779 100644
--- a/assets/web/icons/location-pin.js
+++ b/assets/web/icons/location-pin.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function LocationPinIcon(props) {
+function LocationPinIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M12 19.35c2.033-1.867 3.542-3.563 4.525-5.088C17.508 12.738 18 11.383 18 10.2c0-1.817-.58-3.304-1.738-4.462C15.104 4.579 13.683 4 12 4c-1.683 0-3.104.58-4.263 1.737C6.58 6.896 6 8.383 6 10.2c0 1.183.492 2.538 1.475 4.063.983 1.524 2.492 3.22 4.525 5.087Zm0 1.975a2.07 2.07 0 0 1-.7-.125 1.84 1.84 0 0 1-.625-.375A39.112 39.112 0 0 1 7.8 17.9c-.833-.95-1.53-1.87-2.087-2.762-.559-.892-.984-1.75-1.276-2.575C4.146 11.738 4 10.95 4 10.2c0-2.5.804-4.492 2.412-5.975C8.021 2.742 9.883 2 12 2s3.98.742 5.587 2.225C19.197 5.708 20 7.7 20 10.2c0 .75-.146 1.538-.438 2.363-.291.824-.716 1.683-1.274 2.574A21.678 21.678 0 0 1 16.2 17.9a39.112 39.112 0 0 1-2.875 2.925 1.84 1.84 0 0 1-.625.375 2.07 2.07 0 0 1-.7.125ZM12 12c.55 0 1.02-.196 1.412-.588.392-.391.588-.862.588-1.412 0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 12 8c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 10 10c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z"
@@ -14,4 +16,4 @@ function LocationPinIcon(props) {
 }
 ;
 LocationPinIcon.displayName = "LocationPinIcon";
-export default LocationPinIcon;
\ No newline at end of file
+export default forwardRef(LocationPinIcon);
\ No newline at end of file
diff --git a/assets/web/icons/lock-off.cjs b/assets/web/icons/lock-off.cjs
index c990fbf9..abc41775 100644
--- a/assets/web/icons/lock-off.cjs
+++ b/assets/web/icons/lock-off.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function LockOffIcon(props) {
+var React = require("react");
+function LockOffIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M6 22c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 20V10c0-.55.196-1.02.588-1.412a1.98 1.98 0 0 1 .702-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 1 1-1.414 1.414l-.896-.896A1.935 1.935 0 0 1 18 22H6Zm14-4.834V10c0-.55-.196-1.02-.587-1.412A1.926 1.926 0 0 0 18 8h-1V6c0-1.383-.488-2.563-1.463-3.538C14.563 1.487 13.383 1 12 1s-2.562.488-3.537 1.462a4.876 4.876 0 0 0-1.22 1.947L9 6.166V6c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 12 3c.833 0 1.542.292 2.125.875S15 5.167 15 6v2h-4.166L20 17.166Z"
@@ -14,4 +16,4 @@ function LockOffIcon(props) {
 }
 ;
 LockOffIcon.displayName = "LockOffIcon";
-module.exports = LockOffIcon;
\ No newline at end of file
+module.exports = React.forwardRef(LockOffIcon);
\ No newline at end of file
diff --git a/assets/web/icons/lock-off.d.ts b/assets/web/icons/lock-off.d.ts
index d0c04269..431a12ab 100644
--- a/assets/web/icons/lock-off.d.ts
+++ b/assets/web/icons/lock-off.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * lock-off.svg
  */
-declare const LockOffIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const LockOffIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default LockOffIcon;
diff --git a/assets/web/icons/lock-off.js b/assets/web/icons/lock-off.js
index 14d55cad..22dfdeb8 100644
--- a/assets/web/icons/lock-off.js
+++ b/assets/web/icons/lock-off.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function LockOffIcon(props) {
+function LockOffIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M6 22c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 20V10c0-.55.196-1.02.588-1.412a1.98 1.98 0 0 1 .702-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 1 1-1.414 1.414l-.896-.896A1.935 1.935 0 0 1 18 22H6Zm14-4.834V10c0-.55-.196-1.02-.587-1.412A1.926 1.926 0 0 0 18 8h-1V6c0-1.383-.488-2.563-1.463-3.538C14.563 1.487 13.383 1 12 1s-2.562.488-3.537 1.462a4.876 4.876 0 0 0-1.22 1.947L9 6.166V6c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 12 3c.833 0 1.542.292 2.125.875S15 5.167 15 6v2h-4.166L20 17.166Z"
@@ -14,4 +16,4 @@ function LockOffIcon(props) {
 }
 ;
 LockOffIcon.displayName = "LockOffIcon";
-export default LockOffIcon;
\ No newline at end of file
+export default forwardRef(LockOffIcon);
\ No newline at end of file
diff --git a/assets/web/icons/lock-solid.cjs b/assets/web/icons/lock-solid.cjs
index 5d4be560..7a035dc6 100644
--- a/assets/web/icons/lock-solid.cjs
+++ b/assets/web/icons/lock-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function LockSolidIcon(props) {
+var React = require("react");
+function LockSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M6 22c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 20V10c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 8h1V6c0-1.383.487-2.563 1.463-3.538C9.438 1.487 10.617 1 12 1s2.563.488 3.537 1.462C16.512 3.438 17 4.617 17 6v2h1c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412v10c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 22H6ZM9 8h6V6c0-.833-.292-1.542-.875-2.125A2.893 2.893 0 0 0 12 3c-.833 0-1.542.292-2.125.875A2.893 2.893 0 0 0 9 6v2Z"
@@ -14,4 +16,4 @@ function LockSolidIcon(props) {
 }
 ;
 LockSolidIcon.displayName = "LockSolidIcon";
-module.exports = LockSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(LockSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/lock-solid.d.ts b/assets/web/icons/lock-solid.d.ts
index 1febe7c5..0b6b1285 100644
--- a/assets/web/icons/lock-solid.d.ts
+++ b/assets/web/icons/lock-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * lock-solid.svg
  */
-declare const LockSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const LockSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default LockSolidIcon;
diff --git a/assets/web/icons/lock-solid.js b/assets/web/icons/lock-solid.js
index 90ea58d0..fdf47406 100644
--- a/assets/web/icons/lock-solid.js
+++ b/assets/web/icons/lock-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function LockSolidIcon(props) {
+function LockSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M6 22c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 20V10c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 8h1V6c0-1.383.487-2.563 1.463-3.538C9.438 1.487 10.617 1 12 1s2.563.488 3.537 1.462C16.512 3.438 17 4.617 17 6v2h1c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412v10c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 22H6ZM9 8h6V6c0-.833-.292-1.542-.875-2.125A2.893 2.893 0 0 0 12 3c-.833 0-1.542.292-2.125.875A2.893 2.893 0 0 0 9 6v2Z"
@@ -14,4 +16,4 @@ function LockSolidIcon(props) {
 }
 ;
 LockSolidIcon.displayName = "LockSolidIcon";
-export default LockSolidIcon;
\ No newline at end of file
+export default forwardRef(LockSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/lock.cjs b/assets/web/icons/lock.cjs
index 7a784439..cebeda2e 100644
--- a/assets/web/icons/lock.cjs
+++ b/assets/web/icons/lock.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function LockIcon(props) {
+var React = require("react");
+function LockIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M6 22c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 20V10c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 8h1V6c0-1.383.487-2.563 1.463-3.538C9.438 1.487 10.617 1 12 1s2.563.488 3.537 1.462C16.512 3.438 17 4.617 17 6v2h1c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412v10c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 22H6Zm0-2h12V10H6v10ZM9 8h6V6c0-.833-.292-1.542-.875-2.125A2.893 2.893 0 0 0 12 3c-.833 0-1.542.292-2.125.875A2.893 2.893 0 0 0 9 6v2Z"
@@ -14,4 +16,4 @@ function LockIcon(props) {
 }
 ;
 LockIcon.displayName = "LockIcon";
-module.exports = LockIcon;
\ No newline at end of file
+module.exports = React.forwardRef(LockIcon);
\ No newline at end of file
diff --git a/assets/web/icons/lock.d.ts b/assets/web/icons/lock.d.ts
index bdc2a496..6e19939c 100644
--- a/assets/web/icons/lock.d.ts
+++ b/assets/web/icons/lock.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * lock.svg
  */
-declare const LockIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const LockIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default LockIcon;
diff --git a/assets/web/icons/lock.js b/assets/web/icons/lock.js
index 4d76e006..f21d8568 100644
--- a/assets/web/icons/lock.js
+++ b/assets/web/icons/lock.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function LockIcon(props) {
+function LockIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M6 22c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 20V10c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 8h1V6c0-1.383.487-2.563 1.463-3.538C9.438 1.487 10.617 1 12 1s2.563.488 3.537 1.462C16.512 3.438 17 4.617 17 6v2h1c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412v10c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 22H6Zm0-2h12V10H6v10ZM9 8h6V6c0-.833-.292-1.542-.875-2.125A2.893 2.893 0 0 0 12 3c-.833 0-1.542.292-2.125.875A2.893 2.893 0 0 0 9 6v2Z"
@@ -14,4 +16,4 @@ function LockIcon(props) {
 }
 ;
 LockIcon.displayName = "LockIcon";
-export default LockIcon;
\ No newline at end of file
+export default forwardRef(LockIcon);
\ No newline at end of file
diff --git a/assets/web/icons/mark-as-read.cjs b/assets/web/icons/mark-as-read.cjs
index 8239c49b..249892cd 100644
--- a/assets/web/icons/mark-as-read.cjs
+++ b/assets/web/icons/mark-as-read.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function MarkAsReadIcon(props) {
+var React = require("react");
+function MarkAsReadIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M21.324 9.13c0-.66-.339-1.237-.862-1.558l-7.37-4.318a1.812 1.812 0 0 0-1.851 0L3.87 7.572C3.348 7.892 3 8.47 3 9.13v9.167c0 1.008.825 1.833 1.833 1.833H19.5a1.839 1.839 0 0 0 1.833-1.833l-.009-9.167Zm-10.129 3.978-6.6-4.124 6.646-3.896a1.812 1.812 0 0 1 1.851 0l6.646 3.896-6.6 4.124a1.854 1.854 0 0 1-1.943 0Z"
@@ -14,4 +16,4 @@ function MarkAsReadIcon(props) {
 }
 ;
 MarkAsReadIcon.displayName = "MarkAsReadIcon";
-module.exports = MarkAsReadIcon;
\ No newline at end of file
+module.exports = React.forwardRef(MarkAsReadIcon);
\ No newline at end of file
diff --git a/assets/web/icons/mark-as-read.d.ts b/assets/web/icons/mark-as-read.d.ts
index 04f6c202..99efc612 100644
--- a/assets/web/icons/mark-as-read.d.ts
+++ b/assets/web/icons/mark-as-read.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * mark-as-read.svg
  */
-declare const MarkAsReadIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const MarkAsReadIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default MarkAsReadIcon;
diff --git a/assets/web/icons/mark-as-read.js b/assets/web/icons/mark-as-read.js
index 7c62960c..9326a08b 100644
--- a/assets/web/icons/mark-as-read.js
+++ b/assets/web/icons/mark-as-read.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function MarkAsReadIcon(props) {
+function MarkAsReadIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M21.324 9.13c0-.66-.339-1.237-.862-1.558l-7.37-4.318a1.812 1.812 0 0 0-1.851 0L3.87 7.572C3.348 7.892 3 8.47 3 9.13v9.167c0 1.008.825 1.833 1.833 1.833H19.5a1.839 1.839 0 0 0 1.833-1.833l-.009-9.167Zm-10.129 3.978-6.6-4.124 6.646-3.896a1.812 1.812 0 0 1 1.851 0l6.646 3.896-6.6 4.124a1.854 1.854 0 0 1-1.943 0Z"
@@ -14,4 +16,4 @@ function MarkAsReadIcon(props) {
 }
 ;
 MarkAsReadIcon.displayName = "MarkAsReadIcon";
-export default MarkAsReadIcon;
\ No newline at end of file
+export default forwardRef(MarkAsReadIcon);
\ No newline at end of file
diff --git a/assets/web/icons/mark-as-unread.cjs b/assets/web/icons/mark-as-unread.cjs
index 7cce368a..1464f351 100644
--- a/assets/web/icons/mark-as-unread.cjs
+++ b/assets/web/icons/mark-as-unread.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function MarkAsUnreadIcon(props) {
+var React = require("react");
+function MarkAsUnreadIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M20 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
@@ -18,4 +20,4 @@ function MarkAsUnreadIcon(props) {
 }
 ;
 MarkAsUnreadIcon.displayName = "MarkAsUnreadIcon";
-module.exports = MarkAsUnreadIcon;
\ No newline at end of file
+module.exports = React.forwardRef(MarkAsUnreadIcon);
\ No newline at end of file
diff --git a/assets/web/icons/mark-as-unread.d.ts b/assets/web/icons/mark-as-unread.d.ts
index ecb463da..d7b839a0 100644
--- a/assets/web/icons/mark-as-unread.d.ts
+++ b/assets/web/icons/mark-as-unread.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * mark-as-unread.svg
  */
-declare const MarkAsUnreadIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const MarkAsUnreadIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default MarkAsUnreadIcon;
diff --git a/assets/web/icons/mark-as-unread.js b/assets/web/icons/mark-as-unread.js
index 53ea54df..c4927947 100644
--- a/assets/web/icons/mark-as-unread.js
+++ b/assets/web/icons/mark-as-unread.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function MarkAsUnreadIcon(props) {
+function MarkAsUnreadIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M20 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
@@ -18,4 +20,4 @@ function MarkAsUnreadIcon(props) {
 }
 ;
 MarkAsUnreadIcon.displayName = "MarkAsUnreadIcon";
-export default MarkAsUnreadIcon;
\ No newline at end of file
+export default forwardRef(MarkAsUnreadIcon);
\ No newline at end of file
diff --git a/assets/web/icons/marker-read-receipts.cjs b/assets/web/icons/marker-read-receipts.cjs
index 48b79190..21607366 100644
--- a/assets/web/icons/marker-read-receipts.cjs
+++ b/assets/web/icons/marker-read-receipts.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function MarkerReadReceiptsIcon(props) {
+var React = require("react");
+function MarkerReadReceiptsIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M14.707 10.707a1 1 0 0 0-1.414-1.414L10 12.586l-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4Z"
@@ -16,4 +18,4 @@ function MarkerReadReceiptsIcon(props) {
 }
 ;
 MarkerReadReceiptsIcon.displayName = "MarkerReadReceiptsIcon";
-module.exports = MarkerReadReceiptsIcon;
\ No newline at end of file
+module.exports = React.forwardRef(MarkerReadReceiptsIcon);
\ No newline at end of file
diff --git a/assets/web/icons/marker-read-receipts.d.ts b/assets/web/icons/marker-read-receipts.d.ts
index 8b619cec..4024301e 100644
--- a/assets/web/icons/marker-read-receipts.d.ts
+++ b/assets/web/icons/marker-read-receipts.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * marker-read-receipts.svg
  */
-declare const MarkerReadReceiptsIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const MarkerReadReceiptsIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default MarkerReadReceiptsIcon;
diff --git a/assets/web/icons/marker-read-receipts.js b/assets/web/icons/marker-read-receipts.js
index f80332dd..acc8ee34 100644
--- a/assets/web/icons/marker-read-receipts.js
+++ b/assets/web/icons/marker-read-receipts.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function MarkerReadReceiptsIcon(props) {
+function MarkerReadReceiptsIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M14.707 10.707a1 1 0 0 0-1.414-1.414L10 12.586l-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4Z"
@@ -16,4 +18,4 @@ function MarkerReadReceiptsIcon(props) {
 }
 ;
 MarkerReadReceiptsIcon.displayName = "MarkerReadReceiptsIcon";
-export default MarkerReadReceiptsIcon;
\ No newline at end of file
+export default forwardRef(MarkerReadReceiptsIcon);
\ No newline at end of file
diff --git a/assets/web/icons/mention.cjs b/assets/web/icons/mention.cjs
index 6a858daf..703d5ded 100644
--- a/assets/web/icons/mention.cjs
+++ b/assets/web/icons/mention.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function MentionIcon(props) {
+var React = require("react");
+function MentionIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8Zm3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0Z"
@@ -14,4 +16,4 @@ function MentionIcon(props) {
 }
 ;
 MentionIcon.displayName = "MentionIcon";
-module.exports = MentionIcon;
\ No newline at end of file
+module.exports = React.forwardRef(MentionIcon);
\ No newline at end of file
diff --git a/assets/web/icons/mention.d.ts b/assets/web/icons/mention.d.ts
index e0d1dd31..7ba138fe 100644
--- a/assets/web/icons/mention.d.ts
+++ b/assets/web/icons/mention.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * mention.svg
  */
-declare const MentionIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const MentionIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default MentionIcon;
diff --git a/assets/web/icons/mention.js b/assets/web/icons/mention.js
index 406fdca1..25139260 100644
--- a/assets/web/icons/mention.js
+++ b/assets/web/icons/mention.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function MentionIcon(props) {
+function MentionIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8Zm3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0Z"
@@ -14,4 +16,4 @@ function MentionIcon(props) {
 }
 ;
 MentionIcon.displayName = "MentionIcon";
-export default MentionIcon;
\ No newline at end of file
+export default forwardRef(MentionIcon);
\ No newline at end of file
diff --git a/assets/web/icons/menu.cjs b/assets/web/icons/menu.cjs
index 665b3647..c1b13ab9 100644
--- a/assets/web/icons/menu.cjs
+++ b/assets/web/icons/menu.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function MenuIcon(props) {
+var React = require("react");
+function MenuIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M4 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Zm1 3a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2H5Z"
@@ -14,4 +16,4 @@ function MenuIcon(props) {
 }
 ;
 MenuIcon.displayName = "MenuIcon";
-module.exports = MenuIcon;
\ No newline at end of file
+module.exports = React.forwardRef(MenuIcon);
\ No newline at end of file
diff --git a/assets/web/icons/menu.d.ts b/assets/web/icons/menu.d.ts
index cbe0cae9..87c9d18a 100644
--- a/assets/web/icons/menu.d.ts
+++ b/assets/web/icons/menu.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * menu.svg
  */
-declare const MenuIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const MenuIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default MenuIcon;
diff --git a/assets/web/icons/menu.js b/assets/web/icons/menu.js
index 96a396ab..205c341f 100644
--- a/assets/web/icons/menu.js
+++ b/assets/web/icons/menu.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function MenuIcon(props) {
+function MenuIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M4 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Zm1 3a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2H5Z"
@@ -14,4 +16,4 @@ function MenuIcon(props) {
 }
 ;
 MenuIcon.displayName = "MenuIcon";
-export default MenuIcon;
\ No newline at end of file
+export default forwardRef(MenuIcon);
\ No newline at end of file
diff --git a/assets/web/icons/mic-off-solid.cjs b/assets/web/icons/mic-off-solid.cjs
index efdb288f..a83be06f 100644
--- a/assets/web/icons/mic-off-solid.cjs
+++ b/assets/web/icons/mic-off-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function MicOffSolidIcon(props) {
+var React = require("react");
+function MicOffSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M8 8v-.006l6.831 6.832-.002.002 1.414 1.415.003-.003 1.414 1.414-.003.003L20.5 20.5a1 1 0 0 1-1.414 1.414l-3.022-3.022A7.949 7.949 0 0 1 13 19.938V21a1 1 0 0 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 1 1 2 0 6 6 0 0 0 8.587 5.415l-1.55-1.55A4.005 4.005 0 0 1 8 12v-1.172L2.086 4.914A1 1 0 0 1 3.5 3.5L8 8Zm9.417 6.583 1.478 1.477A7.963 7.963 0 0 0 20 12a1 1 0 0 0-2 0c0 .925-.21 1.8-.583 2.583ZM8.073 5.238l7.793 7.793c.087-.329.134-.674.134-1.031V6a4 4 0 0 0-7.927-.762Z"
@@ -14,4 +16,4 @@ function MicOffSolidIcon(props) {
 }
 ;
 MicOffSolidIcon.displayName = "MicOffSolidIcon";
-module.exports = MicOffSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(MicOffSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/mic-off-solid.d.ts b/assets/web/icons/mic-off-solid.d.ts
index ecf79b54..a20aae3c 100644
--- a/assets/web/icons/mic-off-solid.d.ts
+++ b/assets/web/icons/mic-off-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * mic-off-solid.svg
  */
-declare const MicOffSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const MicOffSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default MicOffSolidIcon;
diff --git a/assets/web/icons/mic-off-solid.js b/assets/web/icons/mic-off-solid.js
index b0414723..a583a4a2 100644
--- a/assets/web/icons/mic-off-solid.js
+++ b/assets/web/icons/mic-off-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function MicOffSolidIcon(props) {
+function MicOffSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M8 8v-.006l6.831 6.832-.002.002 1.414 1.415.003-.003 1.414 1.414-.003.003L20.5 20.5a1 1 0 0 1-1.414 1.414l-3.022-3.022A7.949 7.949 0 0 1 13 19.938V21a1 1 0 0 1-2 0v-1.062A8.001 8.001 0 0 1 4 12a1 1 0 1 1 2 0 6 6 0 0 0 8.587 5.415l-1.55-1.55A4.005 4.005 0 0 1 8 12v-1.172L2.086 4.914A1 1 0 0 1 3.5 3.5L8 8Zm9.417 6.583 1.478 1.477A7.963 7.963 0 0 0 20 12a1 1 0 0 0-2 0c0 .925-.21 1.8-.583 2.583ZM8.073 5.238l7.793 7.793c.087-.329.134-.674.134-1.031V6a4 4 0 0 0-7.927-.762Z"
@@ -14,4 +16,4 @@ function MicOffSolidIcon(props) {
 }
 ;
 MicOffSolidIcon.displayName = "MicOffSolidIcon";
-export default MicOffSolidIcon;
\ No newline at end of file
+export default forwardRef(MicOffSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/mic-off.cjs b/assets/web/icons/mic-off.cjs
index a0f51f26..4c2e1d94 100644
--- a/assets/web/icons/mic-off.cjs
+++ b/assets/web/icons/mic-off.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function MicOffIcon(props) {
+var React = require("react");
+function MicOffIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       fillRule: "evenodd",
@@ -18,4 +20,4 @@ function MicOffIcon(props) {
 }
 ;
 MicOffIcon.displayName = "MicOffIcon";
-module.exports = MicOffIcon;
\ No newline at end of file
+module.exports = React.forwardRef(MicOffIcon);
\ No newline at end of file
diff --git a/assets/web/icons/mic-off.d.ts b/assets/web/icons/mic-off.d.ts
index 0f713cc0..34f9c137 100644
--- a/assets/web/icons/mic-off.d.ts
+++ b/assets/web/icons/mic-off.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * mic-off.svg
  */
-declare const MicOffIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const MicOffIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default MicOffIcon;
diff --git a/assets/web/icons/mic-off.js b/assets/web/icons/mic-off.js
index 6242929a..c1c66452 100644
--- a/assets/web/icons/mic-off.js
+++ b/assets/web/icons/mic-off.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function MicOffIcon(props) {
+function MicOffIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       fillRule: "evenodd",
@@ -18,4 +20,4 @@ function MicOffIcon(props) {
 }
 ;
 MicOffIcon.displayName = "MicOffIcon";
-export default MicOffIcon;
\ No newline at end of file
+export default forwardRef(MicOffIcon);
\ No newline at end of file
diff --git a/assets/web/icons/mic-on-solid.cjs b/assets/web/icons/mic-on-solid.cjs
index 0c82fb60..8ecf4ea6 100644
--- a/assets/web/icons/mic-on-solid.cjs
+++ b/assets/web/icons/mic-on-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function MicOnSolidIcon(props) {
+var React = require("react");
+function MicOnSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
@@ -16,4 +18,4 @@ function MicOnSolidIcon(props) {
 }
 ;
 MicOnSolidIcon.displayName = "MicOnSolidIcon";
-module.exports = MicOnSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(MicOnSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/mic-on-solid.d.ts b/assets/web/icons/mic-on-solid.d.ts
index 45b0d590..49967f02 100644
--- a/assets/web/icons/mic-on-solid.d.ts
+++ b/assets/web/icons/mic-on-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * mic-on-solid.svg
  */
-declare const MicOnSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const MicOnSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default MicOnSolidIcon;
diff --git a/assets/web/icons/mic-on-solid.js b/assets/web/icons/mic-on-solid.js
index 138bd192..8cb394dc 100644
--- a/assets/web/icons/mic-on-solid.js
+++ b/assets/web/icons/mic-on-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function MicOnSolidIcon(props) {
+function MicOnSolidIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M8 6a4 4 0 1 1 8 0v6a4 4 0 0 1-8 0V6Z"
@@ -16,4 +18,4 @@ function MicOnSolidIcon(props) {
 }
 ;
 MicOnSolidIcon.displayName = "MicOnSolidIcon";
-export default MicOnSolidIcon;
\ No newline at end of file
+export default forwardRef(MicOnSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/mic-on.cjs b/assets/web/icons/mic-on.cjs
index cc639ab3..2557139e 100644
--- a/assets/web/icons/mic-on.cjs
+++ b/assets/web/icons/mic-on.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function MicOnIcon(props) {
+var React = require("react");
+function MicOnIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M6 12a1 1 0 1 0-2 0 8.001 8.001 0 0 0 7 7.938V21a1 1 0 1 0 2 0v-1.062A8.001 8.001 0 0 0 20 12a1 1 0 1 0-2 0 6 6 0 0 1-12 0Z"
@@ -18,4 +20,4 @@ function MicOnIcon(props) {
 }
 ;
 MicOnIcon.displayName = "MicOnIcon";
-module.exports = MicOnIcon;
\ No newline at end of file
+module.exports = React.forwardRef(MicOnIcon);
\ No newline at end of file
diff --git a/assets/web/icons/mic-on.d.ts b/assets/web/icons/mic-on.d.ts
index d5d7bbaf..c948f102 100644
--- a/assets/web/icons/mic-on.d.ts
+++ b/assets/web/icons/mic-on.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * mic-on.svg
  */
-declare const MicOnIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const MicOnIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default MicOnIcon;
diff --git a/assets/web/icons/mic-on.js b/assets/web/icons/mic-on.js
index fbdf1668..22ee5ec4 100644
--- a/assets/web/icons/mic-on.js
+++ b/assets/web/icons/mic-on.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function MicOnIcon(props) {
+function MicOnIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M6 12a1 1 0 1 0-2 0 8.001 8.001 0 0 0 7 7.938V21a1 1 0 1 0 2 0v-1.062A8.001 8.001 0 0 0 20 12a1 1 0 1 0-2 0 6 6 0 0 1-12 0Z"
@@ -18,4 +20,4 @@ function MicOnIcon(props) {
 }
 ;
 MicOnIcon.displayName = "MicOnIcon";
-export default MicOnIcon;
\ No newline at end of file
+export default forwardRef(MicOnIcon);
\ No newline at end of file
diff --git a/assets/web/icons/minus.cjs b/assets/web/icons/minus.cjs
index ed56efbd..b1717c28 100644
--- a/assets/web/icons/minus.cjs
+++ b/assets/web/icons/minus.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function MinusIcon(props) {
+var React = require("react");
+function MinusIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M6 13a.967.967 0 0 1-.713-.287A.968.968 0 0 1 5 12c0-.283.096-.52.287-.713A.967.967 0 0 1 6 11h12a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 18 13H6Z"
@@ -14,4 +16,4 @@ function MinusIcon(props) {
 }
 ;
 MinusIcon.displayName = "MinusIcon";
-module.exports = MinusIcon;
\ No newline at end of file
+module.exports = React.forwardRef(MinusIcon);
\ No newline at end of file
diff --git a/assets/web/icons/minus.d.ts b/assets/web/icons/minus.d.ts
index af7d6308..b6128114 100644
--- a/assets/web/icons/minus.d.ts
+++ b/assets/web/icons/minus.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * minus.svg
  */
-declare const MinusIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const MinusIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default MinusIcon;
diff --git a/assets/web/icons/minus.js b/assets/web/icons/minus.js
index 73e6cbd4..4d5e5ad8 100644
--- a/assets/web/icons/minus.js
+++ b/assets/web/icons/minus.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function MinusIcon(props) {
+function MinusIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M6 13a.967.967 0 0 1-.713-.287A.968.968 0 0 1 5 12c0-.283.096-.52.287-.713A.967.967 0 0 1 6 11h12a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 18 13H6Z"
@@ -14,4 +16,4 @@ function MinusIcon(props) {
 }
 ;
 MinusIcon.displayName = "MinusIcon";
-export default MinusIcon;
\ No newline at end of file
+export default forwardRef(MinusIcon);
\ No newline at end of file
diff --git a/assets/web/icons/mobile.cjs b/assets/web/icons/mobile.cjs
index 3d23c265..68edab49 100644
--- a/assets/web/icons/mobile.cjs
+++ b/assets/web/icons/mobile.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function MobileIcon(props) {
+var React = require("react");
+function MobileIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M7 23c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 5 21V3c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 7 1h10c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v18c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 17 23H7Zm0-5h10V6H7v12Z"
@@ -14,4 +16,4 @@ function MobileIcon(props) {
 }
 ;
 MobileIcon.displayName = "MobileIcon";
-module.exports = MobileIcon;
\ No newline at end of file
+module.exports = React.forwardRef(MobileIcon);
\ No newline at end of file
diff --git a/assets/web/icons/mobile.d.ts b/assets/web/icons/mobile.d.ts
index faa7f81e..447eda04 100644
--- a/assets/web/icons/mobile.d.ts
+++ b/assets/web/icons/mobile.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * mobile.svg
  */
-declare const MobileIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const MobileIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default MobileIcon;
diff --git a/assets/web/icons/mobile.js b/assets/web/icons/mobile.js
index 955dc295..01e54968 100644
--- a/assets/web/icons/mobile.js
+++ b/assets/web/icons/mobile.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function MobileIcon(props) {
+function MobileIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M7 23c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 5 21V3c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 7 1h10c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v18c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 17 23H7Zm0-5h10V6H7v12Z"
@@ -14,4 +16,4 @@ function MobileIcon(props) {
 }
 ;
 MobileIcon.displayName = "MobileIcon";
-export default MobileIcon;
\ No newline at end of file
+export default forwardRef(MobileIcon);
\ No newline at end of file
diff --git a/assets/web/icons/notifications-off-solid.cjs b/assets/web/icons/notifications-off-solid.cjs
index 0507892f..0414cd8e 100644
--- a/assets/web/icons/notifications-off-solid.cjs
+++ b/assets/web/icons/notifications-off-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function NotificationsOffSolidIcon(props) {
+var React = require("react");
+function NotificationsOffSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "m4.917 2.083 17 17a1 1 0 0 1-1.414 1.414L19.006 19H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-2.034 1.096-3.91L3.503 3.498a1 1 0 0 1 1.414-1.414ZM19 13.349 9.136 3.485C9.93 3.181 10.874 3 12 3c7 0 7 7 7 7v3.349Z"
@@ -16,4 +18,4 @@ function NotificationsOffSolidIcon(props) {
 }
 ;
 NotificationsOffSolidIcon.displayName = "NotificationsOffSolidIcon";
-module.exports = NotificationsOffSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(NotificationsOffSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/notifications-off-solid.d.ts b/assets/web/icons/notifications-off-solid.d.ts
index f012b228..ca6e8e27 100644
--- a/assets/web/icons/notifications-off-solid.d.ts
+++ b/assets/web/icons/notifications-off-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * notifications-off-solid.svg
  */
-declare const NotificationsOffSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const NotificationsOffSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default NotificationsOffSolidIcon;
diff --git a/assets/web/icons/notifications-off-solid.js b/assets/web/icons/notifications-off-solid.js
index 8a2850ef..a33bf7cc 100644
--- a/assets/web/icons/notifications-off-solid.js
+++ b/assets/web/icons/notifications-off-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function NotificationsOffSolidIcon(props) {
+function NotificationsOffSolidIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "m4.917 2.083 17 17a1 1 0 0 1-1.414 1.414L19.006 19H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-2.034 1.096-3.91L3.503 3.498a1 1 0 0 1 1.414-1.414ZM19 13.349 9.136 3.485C9.93 3.181 10.874 3 12 3c7 0 7 7 7 7v3.349Z"
@@ -16,4 +18,4 @@ function NotificationsOffSolidIcon(props) {
 }
 ;
 NotificationsOffSolidIcon.displayName = "NotificationsOffSolidIcon";
-export default NotificationsOffSolidIcon;
\ No newline at end of file
+export default forwardRef(NotificationsOffSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/notifications-off.cjs b/assets/web/icons/notifications-off.cjs
index 54826802..cdb90c36 100644
--- a/assets/web/icons/notifications-off.cjs
+++ b/assets/web/icons/notifications-off.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function NotificationsOffIcon(props) {
+var React = require("react");
+function NotificationsOffIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "m4.917 2.083 17 17a1 1 0 0 1-1.414 1.414L19.006 19H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-2.034 1.096-3.91L3.503 3.498a1 1 0 0 1 1.414-1.414ZM17.006 17 7.579 7.573a6.731 6.731 0 0 0-.497 1.662 6.596 6.596 0 0 0-.081.753L7 10.01v6.818L6.828 17h10.178ZM17 11.349V9.988l-.009-.146a6.591 6.591 0 0 0-.073-.607 6.608 6.608 0 0 0-.582-1.84c-.319-.638-.766-1.215-1.398-1.637C14.318 5.344 13.4 5 12 5c-.466 0-.879.038-1.245.104L9.136 3.485C9.93 3.181 10.874 3 12 3c7 0 7 7 7 7v3.349l-2-2Z"
@@ -16,4 +18,4 @@ function NotificationsOffIcon(props) {
 }
 ;
 NotificationsOffIcon.displayName = "NotificationsOffIcon";
-module.exports = NotificationsOffIcon;
\ No newline at end of file
+module.exports = React.forwardRef(NotificationsOffIcon);
\ No newline at end of file
diff --git a/assets/web/icons/notifications-off.d.ts b/assets/web/icons/notifications-off.d.ts
index b744f8d6..abef398e 100644
--- a/assets/web/icons/notifications-off.d.ts
+++ b/assets/web/icons/notifications-off.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * notifications-off.svg
  */
-declare const NotificationsOffIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const NotificationsOffIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default NotificationsOffIcon;
diff --git a/assets/web/icons/notifications-off.js b/assets/web/icons/notifications-off.js
index ec24544f..9083594c 100644
--- a/assets/web/icons/notifications-off.js
+++ b/assets/web/icons/notifications-off.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function NotificationsOffIcon(props) {
+function NotificationsOffIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "m4.917 2.083 17 17a1 1 0 0 1-1.414 1.414L19.006 19H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-2.034 1.096-3.91L3.503 3.498a1 1 0 0 1 1.414-1.414ZM17.006 17 7.579 7.573a6.731 6.731 0 0 0-.497 1.662 6.596 6.596 0 0 0-.081.753L7 10.01v6.818L6.828 17h10.178ZM17 11.349V9.988l-.009-.146a6.591 6.591 0 0 0-.073-.607 6.608 6.608 0 0 0-.582-1.84c-.319-.638-.766-1.215-1.398-1.637C14.318 5.344 13.4 5 12 5c-.466 0-.879.038-1.245.104L9.136 3.485C9.93 3.181 10.874 3 12 3c7 0 7 7 7 7v3.349l-2-2Z"
@@ -16,4 +18,4 @@ function NotificationsOffIcon(props) {
 }
 ;
 NotificationsOffIcon.displayName = "NotificationsOffIcon";
-export default NotificationsOffIcon;
\ No newline at end of file
+export default forwardRef(NotificationsOffIcon);
\ No newline at end of file
diff --git a/assets/web/icons/notifications-solid.cjs b/assets/web/icons/notifications-solid.cjs
index c04d3769..fbeae062 100644
--- a/assets/web/icons/notifications-solid.cjs
+++ b/assets/web/icons/notifications-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function NotificationsSolidIcon(props) {
+var React = require("react");
+function NotificationsSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6l1.293 1.293ZM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2Z"
@@ -14,4 +16,4 @@ function NotificationsSolidIcon(props) {
 }
 ;
 NotificationsSolidIcon.displayName = "NotificationsSolidIcon";
-module.exports = NotificationsSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(NotificationsSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/notifications-solid.d.ts b/assets/web/icons/notifications-solid.d.ts
index f863d88d..2a4c701e 100644
--- a/assets/web/icons/notifications-solid.d.ts
+++ b/assets/web/icons/notifications-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * notifications-solid.svg
  */
-declare const NotificationsSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const NotificationsSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default NotificationsSolidIcon;
diff --git a/assets/web/icons/notifications-solid.js b/assets/web/icons/notifications-solid.js
index aac796a7..077d1426 100644
--- a/assets/web/icons/notifications-solid.js
+++ b/assets/web/icons/notifications-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function NotificationsSolidIcon(props) {
+function NotificationsSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6l1.293 1.293ZM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2Z"
@@ -14,4 +16,4 @@ function NotificationsSolidIcon(props) {
 }
 ;
 NotificationsSolidIcon.displayName = "NotificationsSolidIcon";
-export default NotificationsSolidIcon;
\ No newline at end of file
+export default forwardRef(NotificationsSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/notifications.cjs b/assets/web/icons/notifications.cjs
index 5352e390..ef1fd696 100644
--- a/assets/web/icons/notifications.cjs
+++ b/assets/web/icons/notifications.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function NotificationsIcon(props) {
+var React = require("react");
+function NotificationsIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12 3c7 0 7 7 7 7v6l1.293 1.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7Zm5 7.01v-.022l-.009-.146a6.598 6.598 0 0 0-.073-.607 6.604 6.604 0 0 0-.582-1.84c-.319-.638-.766-1.215-1.399-1.637C14.317 5.344 13.4 5 12 5s-2.317.344-2.938.758c-.632.422-1.08.999-1.398 1.636a6.607 6.607 0 0 0-.582 1.841A6.593 6.593 0 0 0 7 9.988v6.84L6.828 17h10.344L17 16.828V10.01ZM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2Z"
@@ -14,4 +16,4 @@ function NotificationsIcon(props) {
 }
 ;
 NotificationsIcon.displayName = "NotificationsIcon";
-module.exports = NotificationsIcon;
\ No newline at end of file
+module.exports = React.forwardRef(NotificationsIcon);
\ No newline at end of file
diff --git a/assets/web/icons/notifications.d.ts b/assets/web/icons/notifications.d.ts
index 3b0c3283..f7f701f7 100644
--- a/assets/web/icons/notifications.d.ts
+++ b/assets/web/icons/notifications.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * notifications.svg
  */
-declare const NotificationsIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const NotificationsIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default NotificationsIcon;
diff --git a/assets/web/icons/notifications.js b/assets/web/icons/notifications.js
index 5738d582..03168a9b 100644
--- a/assets/web/icons/notifications.js
+++ b/assets/web/icons/notifications.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function NotificationsIcon(props) {
+function NotificationsIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M12 3c7 0 7 7 7 7v6l1.293 1.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7Zm5 7.01v-.022l-.009-.146a6.598 6.598 0 0 0-.073-.607 6.604 6.604 0 0 0-.582-1.84c-.319-.638-.766-1.215-1.399-1.637C14.317 5.344 13.4 5 12 5s-2.317.344-2.938.758c-.632.422-1.08.999-1.398 1.636a6.607 6.607 0 0 0-.582 1.841A6.593 6.593 0 0 0 7 9.988v6.84L6.828 17h10.344L17 16.828V10.01ZM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2Z"
@@ -14,4 +16,4 @@ function NotificationsIcon(props) {
 }
 ;
 NotificationsIcon.displayName = "NotificationsIcon";
-export default NotificationsIcon;
\ No newline at end of file
+export default forwardRef(NotificationsIcon);
\ No newline at end of file
diff --git a/assets/web/icons/offline.cjs b/assets/web/icons/offline.cjs
index 00b6170f..6530eadd 100644
--- a/assets/web/icons/offline.cjs
+++ b/assets/web/icons/offline.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function OfflineIcon(props) {
+var React = require("react");
+function OfflineIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M3.5 3.5a1 1 0 1 0-1.414 1.414l4.113 4.114a5.484 5.484 0 0 0-.184 1.07A5.002 5.002 0 0 0 7 20h10.172l1.914 1.914A1 1 0 1 0 20.5 20.5l-.979-.979.004-.001L7.145 7.14l-.002.003L3.5 3.5Zm18.5 12a4.48 4.48 0 0 1-.928 2.738L8.637 5.803A5.474 5.474 0 0 1 11.5 5a5.49 5.49 0 0 1 4.25 2.008 4 4 0 0 1 4.187 4.708A4.496 4.496 0 0 1 22 15.5Z"
@@ -14,4 +16,4 @@ function OfflineIcon(props) {
 }
 ;
 OfflineIcon.displayName = "OfflineIcon";
-module.exports = OfflineIcon;
\ No newline at end of file
+module.exports = React.forwardRef(OfflineIcon);
\ No newline at end of file
diff --git a/assets/web/icons/offline.d.ts b/assets/web/icons/offline.d.ts
index 7dec8861..8e16bb28 100644
--- a/assets/web/icons/offline.d.ts
+++ b/assets/web/icons/offline.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * offline.svg
  */
-declare const OfflineIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const OfflineIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default OfflineIcon;
diff --git a/assets/web/icons/offline.js b/assets/web/icons/offline.js
index a4d39659..fa44a59f 100644
--- a/assets/web/icons/offline.js
+++ b/assets/web/icons/offline.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function OfflineIcon(props) {
+function OfflineIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M3.5 3.5a1 1 0 1 0-1.414 1.414l4.113 4.114a5.484 5.484 0 0 0-.184 1.07A5.002 5.002 0 0 0 7 20h10.172l1.914 1.914A1 1 0 1 0 20.5 20.5l-.979-.979.004-.001L7.145 7.14l-.002.003L3.5 3.5Zm18.5 12a4.48 4.48 0 0 1-.928 2.738L8.637 5.803A5.474 5.474 0 0 1 11.5 5a5.49 5.49 0 0 1 4.25 2.008 4 4 0 0 1 4.187 4.708A4.496 4.496 0 0 1 22 15.5Z"
@@ -14,4 +16,4 @@ function OfflineIcon(props) {
 }
 ;
 OfflineIcon.displayName = "OfflineIcon";
-export default OfflineIcon;
\ No newline at end of file
+export default forwardRef(OfflineIcon);
\ No newline at end of file
diff --git a/assets/web/icons/overflow-horizontal.cjs b/assets/web/icons/overflow-horizontal.cjs
index db326b31..783f99ba 100644
--- a/assets/web/icons/overflow-horizontal.cjs
+++ b/assets/web/icons/overflow-horizontal.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function OverflowHorizontalIcon(props) {
+var React = require("react");
+function OverflowHorizontalIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
@@ -14,4 +16,4 @@ function OverflowHorizontalIcon(props) {
 }
 ;
 OverflowHorizontalIcon.displayName = "OverflowHorizontalIcon";
-module.exports = OverflowHorizontalIcon;
\ No newline at end of file
+module.exports = React.forwardRef(OverflowHorizontalIcon);
\ No newline at end of file
diff --git a/assets/web/icons/overflow-horizontal.d.ts b/assets/web/icons/overflow-horizontal.d.ts
index c093f386..49ddc763 100644
--- a/assets/web/icons/overflow-horizontal.d.ts
+++ b/assets/web/icons/overflow-horizontal.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * overflow-horizontal.svg
  */
-declare const OverflowHorizontalIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const OverflowHorizontalIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default OverflowHorizontalIcon;
diff --git a/assets/web/icons/overflow-horizontal.js b/assets/web/icons/overflow-horizontal.js
index 309ef873..6a0eee83 100644
--- a/assets/web/icons/overflow-horizontal.js
+++ b/assets/web/icons/overflow-horizontal.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function OverflowHorizontalIcon(props) {
+function OverflowHorizontalIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
@@ -14,4 +16,4 @@ function OverflowHorizontalIcon(props) {
 }
 ;
 OverflowHorizontalIcon.displayName = "OverflowHorizontalIcon";
-export default OverflowHorizontalIcon;
\ No newline at end of file
+export default forwardRef(OverflowHorizontalIcon);
\ No newline at end of file
diff --git a/assets/web/icons/overflow-vertical.cjs b/assets/web/icons/overflow-vertical.cjs
index 3a6d23f9..7379c4cc 100644
--- a/assets/web/icons/overflow-vertical.cjs
+++ b/assets/web/icons/overflow-vertical.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function OverflowVerticalIcon(props) {
+var React = require("react");
+function OverflowVerticalIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12 20c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 10 18c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 12 16c.55 0 1.02.196 1.412.587.392.392.588.863.588 1.413s-.196 1.02-.588 1.413A1.926 1.926 0 0 1 12 20Zm0-6c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm0-6c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 6c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 4c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 8Z"
@@ -14,4 +16,4 @@ function OverflowVerticalIcon(props) {
 }
 ;
 OverflowVerticalIcon.displayName = "OverflowVerticalIcon";
-module.exports = OverflowVerticalIcon;
\ No newline at end of file
+module.exports = React.forwardRef(OverflowVerticalIcon);
\ No newline at end of file
diff --git a/assets/web/icons/overflow-vertical.d.ts b/assets/web/icons/overflow-vertical.d.ts
index 0cefd8af..46396019 100644
--- a/assets/web/icons/overflow-vertical.d.ts
+++ b/assets/web/icons/overflow-vertical.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * overflow-vertical.svg
  */
-declare const OverflowVerticalIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const OverflowVerticalIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default OverflowVerticalIcon;
diff --git a/assets/web/icons/overflow-vertical.js b/assets/web/icons/overflow-vertical.js
index 8126b0af..ad14d35a 100644
--- a/assets/web/icons/overflow-vertical.js
+++ b/assets/web/icons/overflow-vertical.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function OverflowVerticalIcon(props) {
+function OverflowVerticalIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M12 20c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 10 18c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 12 16c.55 0 1.02.196 1.412.587.392.392.588.863.588 1.413s-.196 1.02-.588 1.413A1.926 1.926 0 0 1 12 20Zm0-6c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm0-6c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 6c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 4c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 8Z"
@@ -14,4 +16,4 @@ function OverflowVerticalIcon(props) {
 }
 ;
 OverflowVerticalIcon.displayName = "OverflowVerticalIcon";
-export default OverflowVerticalIcon;
\ No newline at end of file
+export default forwardRef(OverflowVerticalIcon);
\ No newline at end of file
diff --git a/assets/web/icons/pause-solid.cjs b/assets/web/icons/pause-solid.cjs
index 98dcd81f..a682056f 100644
--- a/assets/web/icons/pause-solid.cjs
+++ b/assets/web/icons/pause-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function PauseSolidIcon(props) {
+var React = require("react");
+function PauseSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
@@ -14,4 +16,4 @@ function PauseSolidIcon(props) {
 }
 ;
 PauseSolidIcon.displayName = "PauseSolidIcon";
-module.exports = PauseSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(PauseSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/pause-solid.d.ts b/assets/web/icons/pause-solid.d.ts
index 8c9e4bd5..a199c23b 100644
--- a/assets/web/icons/pause-solid.d.ts
+++ b/assets/web/icons/pause-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * pause-solid.svg
  */
-declare const PauseSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const PauseSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default PauseSolidIcon;
diff --git a/assets/web/icons/pause-solid.js b/assets/web/icons/pause-solid.js
index 0f3ae7ae..a204f0d9 100644
--- a/assets/web/icons/pause-solid.js
+++ b/assets/web/icons/pause-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function PauseSolidIcon(props) {
+function PauseSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M8 4a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm8 0a2 2 0 0 0-2 2v12a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Z"
@@ -14,4 +16,4 @@ function PauseSolidIcon(props) {
 }
 ;
 PauseSolidIcon.displayName = "PauseSolidIcon";
-export default PauseSolidIcon;
\ No newline at end of file
+export default forwardRef(PauseSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/pause.cjs b/assets/web/icons/pause.cjs
index c8f1a387..73e18b04 100644
--- a/assets/web/icons/pause.cjs
+++ b/assets/web/icons/pause.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function PauseIcon(props) {
+var React = require("react");
+function PauseIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M5 6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6Zm2 0v12h2V6H7Zm6 0a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2V6Zm2 0v12h2V6h-2Z"
@@ -14,4 +16,4 @@ function PauseIcon(props) {
 }
 ;
 PauseIcon.displayName = "PauseIcon";
-module.exports = PauseIcon;
\ No newline at end of file
+module.exports = React.forwardRef(PauseIcon);
\ No newline at end of file
diff --git a/assets/web/icons/pause.d.ts b/assets/web/icons/pause.d.ts
index 6a5d4053..abbcb5b5 100644
--- a/assets/web/icons/pause.d.ts
+++ b/assets/web/icons/pause.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * pause.svg
  */
-declare const PauseIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const PauseIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default PauseIcon;
diff --git a/assets/web/icons/pause.js b/assets/web/icons/pause.js
index 35fd705e..3c2faecd 100644
--- a/assets/web/icons/pause.js
+++ b/assets/web/icons/pause.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function PauseIcon(props) {
+function PauseIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M5 6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6Zm2 0v12h2V6H7Zm6 0a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2V6Zm2 0v12h2V6h-2Z"
@@ -14,4 +16,4 @@ function PauseIcon(props) {
 }
 ;
 PauseIcon.displayName = "PauseIcon";
-export default PauseIcon;
\ No newline at end of file
+export default forwardRef(PauseIcon);
\ No newline at end of file
diff --git a/assets/web/icons/pin-solid.cjs b/assets/web/icons/pin-solid.cjs
index 2ea06050..56626fc5 100644
--- a/assets/web/icons/pin-solid.cjs
+++ b/assets/web/icons/pin-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function PinSolidIcon(props) {
+var React = require("react");
+function PinSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
@@ -14,4 +16,4 @@ function PinSolidIcon(props) {
 }
 ;
 PinSolidIcon.displayName = "PinSolidIcon";
-module.exports = PinSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(PinSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/pin-solid.d.ts b/assets/web/icons/pin-solid.d.ts
index a211cc0f..c535e5bc 100644
--- a/assets/web/icons/pin-solid.d.ts
+++ b/assets/web/icons/pin-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * pin-solid.svg
  */
-declare const PinSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const PinSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default PinSolidIcon;
diff --git a/assets/web/icons/pin-solid.js b/assets/web/icons/pin-solid.js
index a70b51ab..78a8c50e 100644
--- a/assets/web/icons/pin-solid.js
+++ b/assets/web/icons/pin-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function PinSolidIcon(props) {
+function PinSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
@@ -14,4 +16,4 @@ function PinSolidIcon(props) {
 }
 ;
 PinSolidIcon.displayName = "PinSolidIcon";
-export default PinSolidIcon;
\ No newline at end of file
+export default forwardRef(PinSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/pin.cjs b/assets/web/icons/pin.cjs
index e23a92a0..97d1f4b0 100644
--- a/assets/web/icons/pin.cjs
+++ b/assets/web/icons/pin.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function PinIcon(props) {
+var React = require("react");
+function PinIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       fillRule: "evenodd",
@@ -16,4 +18,4 @@ function PinIcon(props) {
 }
 ;
 PinIcon.displayName = "PinIcon";
-module.exports = PinIcon;
\ No newline at end of file
+module.exports = React.forwardRef(PinIcon);
\ No newline at end of file
diff --git a/assets/web/icons/pin.d.ts b/assets/web/icons/pin.d.ts
index f56bfcea..66f8937f 100644
--- a/assets/web/icons/pin.d.ts
+++ b/assets/web/icons/pin.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * pin.svg
  */
-declare const PinIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const PinIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default PinIcon;
diff --git a/assets/web/icons/pin.js b/assets/web/icons/pin.js
index ce608c12..6484536b 100644
--- a/assets/web/icons/pin.js
+++ b/assets/web/icons/pin.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function PinIcon(props) {
+function PinIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       fillRule: "evenodd",
@@ -16,4 +18,4 @@ function PinIcon(props) {
 }
 ;
 PinIcon.displayName = "PinIcon";
-export default PinIcon;
\ No newline at end of file
+export default forwardRef(PinIcon);
\ No newline at end of file
diff --git a/assets/web/icons/play-solid.cjs b/assets/web/icons/play-solid.cjs
index 6efcfabc..28c95246 100644
--- a/assets/web/icons/play-solid.cjs
+++ b/assets/web/icons/play-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function PlaySolidIcon(props) {
+var React = require("react");
+function PlaySolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743Z"
@@ -14,4 +16,4 @@ function PlaySolidIcon(props) {
 }
 ;
 PlaySolidIcon.displayName = "PlaySolidIcon";
-module.exports = PlaySolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(PlaySolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/play-solid.d.ts b/assets/web/icons/play-solid.d.ts
index 5e7a25d3..18d283ae 100644
--- a/assets/web/icons/play-solid.d.ts
+++ b/assets/web/icons/play-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * play-solid.svg
  */
-declare const PlaySolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const PlaySolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default PlaySolidIcon;
diff --git a/assets/web/icons/play-solid.js b/assets/web/icons/play-solid.js
index 8d253889..1c60014c 100644
--- a/assets/web/icons/play-solid.js
+++ b/assets/web/icons/play-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function PlaySolidIcon(props) {
+function PlaySolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743Z"
@@ -14,4 +16,4 @@ function PlaySolidIcon(props) {
 }
 ;
 PlaySolidIcon.displayName = "PlaySolidIcon";
-export default PlaySolidIcon;
\ No newline at end of file
+export default forwardRef(PlaySolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/play.cjs b/assets/web/icons/play.cjs
index 1e395750..497c07cc 100644
--- a/assets/web/icons/play.cjs
+++ b/assets/web/icons/play.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function PlayIcon(props) {
+var React = require("react");
+function PlayIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M17.92 12 8 17.58V6.42L17.92 12Zm.981-1.743-9.92-5.58C7.647 3.927 6 4.89 6 6.42v11.16c0 1.53 1.647 2.493 2.98 1.743l9.921-5.58c1.36-.764 1.36-2.722 0-3.486Z"
@@ -14,4 +16,4 @@ function PlayIcon(props) {
 }
 ;
 PlayIcon.displayName = "PlayIcon";
-module.exports = PlayIcon;
\ No newline at end of file
+module.exports = React.forwardRef(PlayIcon);
\ No newline at end of file
diff --git a/assets/web/icons/play.d.ts b/assets/web/icons/play.d.ts
index a06141b3..85b940aa 100644
--- a/assets/web/icons/play.d.ts
+++ b/assets/web/icons/play.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * play.svg
  */
-declare const PlayIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const PlayIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default PlayIcon;
diff --git a/assets/web/icons/play.js b/assets/web/icons/play.js
index 79ce8773..9ac5fe61 100644
--- a/assets/web/icons/play.js
+++ b/assets/web/icons/play.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function PlayIcon(props) {
+function PlayIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M17.92 12 8 17.58V6.42L17.92 12Zm.981-1.743-9.92-5.58C7.647 3.927 6 4.89 6 6.42v11.16c0 1.53 1.647 2.493 2.98 1.743l9.921-5.58c1.36-.764 1.36-2.722 0-3.486Z"
@@ -14,4 +16,4 @@ function PlayIcon(props) {
 }
 ;
 PlayIcon.displayName = "PlayIcon";
-export default PlayIcon;
\ No newline at end of file
+export default forwardRef(PlayIcon);
\ No newline at end of file
diff --git a/assets/web/icons/plus.cjs b/assets/web/icons/plus.cjs
index f7d0e80a..b79b6b11 100644
--- a/assets/web/icons/plus.cjs
+++ b/assets/web/icons/plus.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function PlusIcon(props) {
+var React = require("react");
+function PlusIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M11 13H6a.967.967 0 0 1-.713-.287A.968.968 0 0 1 5 12c0-.283.096-.52.287-.713A.967.967 0 0 1 6 11h5V6c0-.283.096-.52.287-.713A.968.968 0 0 1 12 5c.283 0 .52.096.713.287.191.192.287.43.287.713v5h5a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 18 13h-5v5a.97.97 0 0 1-.287.712A.968.968 0 0 1 12 19a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 18v-5Z"
@@ -14,4 +16,4 @@ function PlusIcon(props) {
 }
 ;
 PlusIcon.displayName = "PlusIcon";
-module.exports = PlusIcon;
\ No newline at end of file
+module.exports = React.forwardRef(PlusIcon);
\ No newline at end of file
diff --git a/assets/web/icons/plus.d.ts b/assets/web/icons/plus.d.ts
index 37939bae..7e0429c5 100644
--- a/assets/web/icons/plus.d.ts
+++ b/assets/web/icons/plus.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * plus.svg
  */
-declare const PlusIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const PlusIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default PlusIcon;
diff --git a/assets/web/icons/plus.js b/assets/web/icons/plus.js
index 104c0983..3c036c0e 100644
--- a/assets/web/icons/plus.js
+++ b/assets/web/icons/plus.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function PlusIcon(props) {
+function PlusIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M11 13H6a.967.967 0 0 1-.713-.287A.968.968 0 0 1 5 12c0-.283.096-.52.287-.713A.967.967 0 0 1 6 11h5V6c0-.283.096-.52.287-.713A.968.968 0 0 1 12 5c.283 0 .52.096.713.287.191.192.287.43.287.713v5h5a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 18 13h-5v5a.97.97 0 0 1-.287.712A.968.968 0 0 1 12 19a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 18v-5Z"
@@ -14,4 +16,4 @@ function PlusIcon(props) {
 }
 ;
 PlusIcon.displayName = "PlusIcon";
-export default PlusIcon;
\ No newline at end of file
+export default forwardRef(PlusIcon);
\ No newline at end of file
diff --git a/assets/web/icons/polls-end.cjs b/assets/web/icons/polls-end.cjs
index a295d7c6..c26a0b0e 100644
--- a/assets/web/icons/polls-end.cjs
+++ b/assets/web/icons/polls-end.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function PollsEndIcon(props) {
+var React = require("react");
+function PollsEndIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M21 10.659V19c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h8.341A5.99 5.99 0 0 0 13 5H5v14h14v-8a5.99 5.99 0 0 0 2-.341Z"
@@ -16,4 +18,4 @@ function PollsEndIcon(props) {
 }
 ;
 PollsEndIcon.displayName = "PollsEndIcon";
-module.exports = PollsEndIcon;
\ No newline at end of file
+module.exports = React.forwardRef(PollsEndIcon);
\ No newline at end of file
diff --git a/assets/web/icons/polls-end.d.ts b/assets/web/icons/polls-end.d.ts
index cdde711c..9cfcb79d 100644
--- a/assets/web/icons/polls-end.d.ts
+++ b/assets/web/icons/polls-end.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * polls-end.svg
  */
-declare const PollsEndIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const PollsEndIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default PollsEndIcon;
diff --git a/assets/web/icons/polls-end.js b/assets/web/icons/polls-end.js
index 5ab52a85..c7c5d420 100644
--- a/assets/web/icons/polls-end.js
+++ b/assets/web/icons/polls-end.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function PollsEndIcon(props) {
+function PollsEndIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M21 10.659V19c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h8.341A5.99 5.99 0 0 0 13 5H5v14h14v-8a5.99 5.99 0 0 0 2-.341Z"
@@ -16,4 +18,4 @@ function PollsEndIcon(props) {
 }
 ;
 PollsEndIcon.displayName = "PollsEndIcon";
-export default PollsEndIcon;
\ No newline at end of file
+export default forwardRef(PollsEndIcon);
\ No newline at end of file
diff --git a/assets/web/icons/polls.cjs b/assets/web/icons/polls.cjs
index ad380edb..114d6553 100644
--- a/assets/web/icons/polls.cjs
+++ b/assets/web/icons/polls.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function PollsIcon(props) {
+var React = require("react");
+function PollsIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M16 10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 17 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 16 8h-3a.968.968 0 0 0-.713.287A.967.967 0 0 0 12 9c0 .283.096.52.287.713.192.191.43.287.713.287h3Zm0 6a.97.97 0 0 0 .712-.287A.968.968 0 0 0 17 15a.968.968 0 0 0-.288-.713A.968.968 0 0 0 16 14h-3a.968.968 0 0 0-.713.287A.968.968 0 0 0 12 15c0 .283.096.52.287.713.192.191.43.287.713.287h3Zm-7-5c.55 0 1.02-.196 1.412-.588C10.804 10.021 11 9.55 11 9c0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 9 7c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 7 9c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Zm0 6c.55 0 1.02-.196 1.412-.587.392-.392.588-.863.588-1.413s-.196-1.02-.588-1.412A1.926 1.926 0 0 0 9 13c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 7 15c0 .55.196 1.02.588 1.413.391.391.862.587 1.412.587Zm-4 4c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h14c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm0-2h14V5H5v14Z"
@@ -14,4 +16,4 @@ function PollsIcon(props) {
 }
 ;
 PollsIcon.displayName = "PollsIcon";
-module.exports = PollsIcon;
\ No newline at end of file
+module.exports = React.forwardRef(PollsIcon);
\ No newline at end of file
diff --git a/assets/web/icons/polls.d.ts b/assets/web/icons/polls.d.ts
index d3d00511..a01f71da 100644
--- a/assets/web/icons/polls.d.ts
+++ b/assets/web/icons/polls.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * polls.svg
  */
-declare const PollsIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const PollsIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default PollsIcon;
diff --git a/assets/web/icons/polls.js b/assets/web/icons/polls.js
index 49d18cca..c9c0d127 100644
--- a/assets/web/icons/polls.js
+++ b/assets/web/icons/polls.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function PollsIcon(props) {
+function PollsIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M16 10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 17 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 16 8h-3a.968.968 0 0 0-.713.287A.967.967 0 0 0 12 9c0 .283.096.52.287.713.192.191.43.287.713.287h3Zm0 6a.97.97 0 0 0 .712-.287A.968.968 0 0 0 17 15a.968.968 0 0 0-.288-.713A.968.968 0 0 0 16 14h-3a.968.968 0 0 0-.713.287A.968.968 0 0 0 12 15c0 .283.096.52.287.713.192.191.43.287.713.287h3Zm-7-5c.55 0 1.02-.196 1.412-.588C10.804 10.021 11 9.55 11 9c0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 9 7c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 7 9c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Zm0 6c.55 0 1.02-.196 1.412-.587.392-.392.588-.863.588-1.413s-.196-1.02-.588-1.412A1.926 1.926 0 0 0 9 13c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 7 15c0 .55.196 1.02.588 1.413.391.391.862.587 1.412.587Zm-4 4c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h14c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm0-2h14V5H5v14Z"
@@ -14,4 +16,4 @@ function PollsIcon(props) {
 }
 ;
 PollsIcon.displayName = "PollsIcon";
-export default PollsIcon;
\ No newline at end of file
+export default forwardRef(PollsIcon);
\ No newline at end of file
diff --git a/assets/web/icons/pop-out.cjs b/assets/web/icons/pop-out.cjs
index b6d22101..28b1f642 100644
--- a/assets/web/icons/pop-out.cjs
+++ b/assets/web/icons/pop-out.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function PopOutIcon(props) {
+var React = require("react");
+function PopOutIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M5 3h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z"
@@ -16,4 +18,4 @@ function PopOutIcon(props) {
 }
 ;
 PopOutIcon.displayName = "PopOutIcon";
-module.exports = PopOutIcon;
\ No newline at end of file
+module.exports = React.forwardRef(PopOutIcon);
\ No newline at end of file
diff --git a/assets/web/icons/pop-out.d.ts b/assets/web/icons/pop-out.d.ts
index 16272e67..4848f66e 100644
--- a/assets/web/icons/pop-out.d.ts
+++ b/assets/web/icons/pop-out.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * pop-out.svg
  */
-declare const PopOutIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const PopOutIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default PopOutIcon;
diff --git a/assets/web/icons/pop-out.js b/assets/web/icons/pop-out.js
index 2ac945d3..3c3b2360 100644
--- a/assets/web/icons/pop-out.js
+++ b/assets/web/icons/pop-out.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function PopOutIcon(props) {
+function PopOutIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M5 3h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z"
@@ -16,4 +18,4 @@ function PopOutIcon(props) {
 }
 ;
 PopOutIcon.displayName = "PopOutIcon";
-export default PopOutIcon;
\ No newline at end of file
+export default forwardRef(PopOutIcon);
\ No newline at end of file
diff --git a/assets/web/icons/preferences.cjs b/assets/web/icons/preferences.cjs
index 657370da..bd736e6a 100644
--- a/assets/web/icons/preferences.cjs
+++ b/assets/web/icons/preferences.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function PreferencesIcon(props) {
+var React = require("react");
+function PreferencesIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       fillRule: "evenodd",
@@ -16,4 +18,4 @@ function PreferencesIcon(props) {
 }
 ;
 PreferencesIcon.displayName = "PreferencesIcon";
-module.exports = PreferencesIcon;
\ No newline at end of file
+module.exports = React.forwardRef(PreferencesIcon);
\ No newline at end of file
diff --git a/assets/web/icons/preferences.d.ts b/assets/web/icons/preferences.d.ts
index a55f8fa6..3fe16a12 100644
--- a/assets/web/icons/preferences.d.ts
+++ b/assets/web/icons/preferences.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * preferences.svg
  */
-declare const PreferencesIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const PreferencesIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default PreferencesIcon;
diff --git a/assets/web/icons/preferences.js b/assets/web/icons/preferences.js
index ff3ffd36..a0d849ff 100644
--- a/assets/web/icons/preferences.js
+++ b/assets/web/icons/preferences.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function PreferencesIcon(props) {
+function PreferencesIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       fillRule: "evenodd",
@@ -16,4 +18,4 @@ function PreferencesIcon(props) {
 }
 ;
 PreferencesIcon.displayName = "PreferencesIcon";
-export default PreferencesIcon;
\ No newline at end of file
+export default forwardRef(PreferencesIcon);
\ No newline at end of file
diff --git a/assets/web/icons/public.cjs b/assets/web/icons/public.cjs
index 44775f4c..bd33d2e9 100644
--- a/assets/web/icons/public.cjs
+++ b/assets/web/icons/public.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function PublicIcon(props) {
+var React = require("react");
+function PublicIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12 22a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Zm-1-2.05V18c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 9 16v-1l-4.8-4.8c-.05.3-.096.6-.138.9-.041.3-.062.6-.062.9 0 2.017.662 3.783 1.987 5.3 1.325 1.517 2.996 2.4 5.013 2.65Zm6.9-2.55c.333-.367.633-.762.9-1.188a7.45 7.45 0 0 0 .662-1.325c.175-.458.309-.929.4-1.412.092-.483.138-.975.138-1.475a7.845 7.845 0 0 0-1.363-4.475A7.701 7.701 0 0 0 15 4.6V5c0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 13 7h-2v2c0 .283-.096.52-.287.713A.968.968 0 0 1 10 10H8v2h6c.283 0 .52.096.713.287.191.192.287.43.287.713v3h1c.433 0 .825.13 1.175.387.35.259.592.596.725 1.013Z"
@@ -14,4 +16,4 @@ function PublicIcon(props) {
 }
 ;
 PublicIcon.displayName = "PublicIcon";
-module.exports = PublicIcon;
\ No newline at end of file
+module.exports = React.forwardRef(PublicIcon);
\ No newline at end of file
diff --git a/assets/web/icons/public.d.ts b/assets/web/icons/public.d.ts
index 2cbd4e28..93b2484d 100644
--- a/assets/web/icons/public.d.ts
+++ b/assets/web/icons/public.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * public.svg
  */
-declare const PublicIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const PublicIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default PublicIcon;
diff --git a/assets/web/icons/public.js b/assets/web/icons/public.js
index ea93df42..84e96117 100644
--- a/assets/web/icons/public.js
+++ b/assets/web/icons/public.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function PublicIcon(props) {
+function PublicIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M12 22a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Zm-1-2.05V18c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 9 16v-1l-4.8-4.8c-.05.3-.096.6-.138.9-.041.3-.062.6-.062.9 0 2.017.662 3.783 1.987 5.3 1.325 1.517 2.996 2.4 5.013 2.65Zm6.9-2.55c.333-.367.633-.762.9-1.188a7.45 7.45 0 0 0 .662-1.325c.175-.458.309-.929.4-1.412.092-.483.138-.975.138-1.475a7.845 7.845 0 0 0-1.363-4.475A7.701 7.701 0 0 0 15 4.6V5c0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 13 7h-2v2c0 .283-.096.52-.287.713A.968.968 0 0 1 10 10H8v2h6c.283 0 .52.096.713.287.191.192.287.43.287.713v3h1c.433 0 .825.13 1.175.387.35.259.592.596.725 1.013Z"
@@ -14,4 +16,4 @@ function PublicIcon(props) {
 }
 ;
 PublicIcon.displayName = "PublicIcon";
-export default PublicIcon;
\ No newline at end of file
+export default forwardRef(PublicIcon);
\ No newline at end of file
diff --git a/assets/web/icons/qr-code.cjs b/assets/web/icons/qr-code.cjs
index 99693ecb..28ad7052 100644
--- a/assets/web/icons/qr-code.cjs
+++ b/assets/web/icons/qr-code.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function QrCodeIcon(props) {
+var React = require("react");
+function QrCodeIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       fillRule: "evenodd",
@@ -20,4 +22,4 @@ function QrCodeIcon(props) {
 }
 ;
 QrCodeIcon.displayName = "QrCodeIcon";
-module.exports = QrCodeIcon;
\ No newline at end of file
+module.exports = React.forwardRef(QrCodeIcon);
\ No newline at end of file
diff --git a/assets/web/icons/qr-code.d.ts b/assets/web/icons/qr-code.d.ts
index 5318ef44..11fe6af7 100644
--- a/assets/web/icons/qr-code.d.ts
+++ b/assets/web/icons/qr-code.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * qr-code.svg
  */
-declare const QrCodeIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const QrCodeIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default QrCodeIcon;
diff --git a/assets/web/icons/qr-code.js b/assets/web/icons/qr-code.js
index 8ccac9e9..13804944 100644
--- a/assets/web/icons/qr-code.js
+++ b/assets/web/icons/qr-code.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function QrCodeIcon(props) {
+function QrCodeIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       fillRule: "evenodd",
@@ -20,4 +22,4 @@ function QrCodeIcon(props) {
 }
 ;
 QrCodeIcon.displayName = "QrCodeIcon";
-export default QrCodeIcon;
\ No newline at end of file
+export default forwardRef(QrCodeIcon);
\ No newline at end of file
diff --git a/assets/web/icons/quote.cjs b/assets/web/icons/quote.cjs
index 1fa3d77d..6c8c2303 100644
--- a/assets/web/icons/quote.cjs
+++ b/assets/web/icons/quote.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function QuoteIcon(props) {
+var React = require("react");
+function QuoteIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M4.719 4.34c.094-.642-.366-1.236-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.237 1.028 1.328.663.092 1.276-.354 1.371-.996l.808-5.478Zm12.115 10.174c.095-.642-.366-1.237-1.028-1.328-.662-.092-1.276.354-1.37.996l-.809 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.277-.354 1.371-.996l.808-5.478ZM9.318 3.009c.665.077 1.138.662 1.058 1.306l-.022.175a220.467 220.467 0 0 1-.266 2.006c-.161 1.171-.368 2.579-.535 3.386-.13.636-.769 1.049-1.425.921-.656-.127-1.082-.745-.95-1.381.148-.72.345-2.052.509-3.237a190.652 190.652 0 0 0 .262-1.981l.021-.17c.08-.644.684-1.103 1.348-1.025Zm13.17 11.505c.094-.642-.366-1.237-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.276-.354 1.371-.996l.808-5.478Z"
@@ -14,4 +16,4 @@ function QuoteIcon(props) {
 }
 ;
 QuoteIcon.displayName = "QuoteIcon";
-module.exports = QuoteIcon;
\ No newline at end of file
+module.exports = React.forwardRef(QuoteIcon);
\ No newline at end of file
diff --git a/assets/web/icons/quote.d.ts b/assets/web/icons/quote.d.ts
index f2da57b2..8d1901d5 100644
--- a/assets/web/icons/quote.d.ts
+++ b/assets/web/icons/quote.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * quote.svg
  */
-declare const QuoteIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const QuoteIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default QuoteIcon;
diff --git a/assets/web/icons/quote.js b/assets/web/icons/quote.js
index ac62468b..9be6fe39 100644
--- a/assets/web/icons/quote.js
+++ b/assets/web/icons/quote.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function QuoteIcon(props) {
+function QuoteIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M4.719 4.34c.094-.642-.366-1.236-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.237 1.028 1.328.663.092 1.276-.354 1.371-.996l.808-5.478Zm12.115 10.174c.095-.642-.366-1.237-1.028-1.328-.662-.092-1.276.354-1.37.996l-.809 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.277-.354 1.371-.996l.808-5.478ZM9.318 3.009c.665.077 1.138.662 1.058 1.306l-.022.175a220.467 220.467 0 0 1-.266 2.006c-.161 1.171-.368 2.579-.535 3.386-.13.636-.769 1.049-1.425.921-.656-.127-1.082-.745-.95-1.381.148-.72.345-2.052.509-3.237a190.652 190.652 0 0 0 .262-1.981l.021-.17c.08-.644.684-1.103 1.348-1.025Zm13.17 11.505c.094-.642-.366-1.237-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.276-.354 1.371-.996l.808-5.478Z"
@@ -14,4 +16,4 @@ function QuoteIcon(props) {
 }
 ;
 QuoteIcon.displayName = "QuoteIcon";
-export default QuoteIcon;
\ No newline at end of file
+export default forwardRef(QuoteIcon);
\ No newline at end of file
diff --git a/assets/web/icons/reaction-add.cjs b/assets/web/icons/reaction-add.cjs
index 85437962..31827aee 100644
--- a/assets/web/icons/reaction-add.cjs
+++ b/assets/web/icons/reaction-add.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ReactionAddIcon(props) {
+var React = require("react");
+function ReactionAddIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M14.74 2.38C13.87 2.133 12.95 2 12 2 6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10c0-.95-.133-1.87-.38-2.74a4.969 4.969 0 0 1-1.886.687 8 8 0 1 1-5.68-5.68c.1-.684.339-1.323.687-1.887Z"
@@ -16,4 +18,4 @@ function ReactionAddIcon(props) {
 }
 ;
 ReactionAddIcon.displayName = "ReactionAddIcon";
-module.exports = ReactionAddIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ReactionAddIcon);
\ No newline at end of file
diff --git a/assets/web/icons/reaction-add.d.ts b/assets/web/icons/reaction-add.d.ts
index 6c99d200..6cbd5cfa 100644
--- a/assets/web/icons/reaction-add.d.ts
+++ b/assets/web/icons/reaction-add.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * reaction-add.svg
  */
-declare const ReactionAddIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ReactionAddIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ReactionAddIcon;
diff --git a/assets/web/icons/reaction-add.js b/assets/web/icons/reaction-add.js
index fd9dcca5..15b9d00f 100644
--- a/assets/web/icons/reaction-add.js
+++ b/assets/web/icons/reaction-add.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function ReactionAddIcon(props) {
+function ReactionAddIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M14.74 2.38C13.87 2.133 12.95 2 12 2 6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10c0-.95-.133-1.87-.38-2.74a4.969 4.969 0 0 1-1.886.687 8 8 0 1 1-5.68-5.68c.1-.684.339-1.323.687-1.887Z"
@@ -16,4 +18,4 @@ function ReactionAddIcon(props) {
 }
 ;
 ReactionAddIcon.displayName = "ReactionAddIcon";
-export default ReactionAddIcon;
\ No newline at end of file
+export default forwardRef(ReactionAddIcon);
\ No newline at end of file
diff --git a/assets/web/icons/reaction.cjs b/assets/web/icons/reaction.cjs
index feea7790..7303dbbd 100644
--- a/assets/web/icons/reaction.cjs
+++ b/assets/web/icons/reaction.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ReactionIcon(props) {
+var React = require("react");
+function ReactionIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
@@ -16,4 +18,4 @@ function ReactionIcon(props) {
 }
 ;
 ReactionIcon.displayName = "ReactionIcon";
-module.exports = ReactionIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ReactionIcon);
\ No newline at end of file
diff --git a/assets/web/icons/reaction.d.ts b/assets/web/icons/reaction.d.ts
index b0aab08b..12375545 100644
--- a/assets/web/icons/reaction.d.ts
+++ b/assets/web/icons/reaction.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * reaction.svg
  */
-declare const ReactionIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ReactionIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ReactionIcon;
diff --git a/assets/web/icons/reaction.js b/assets/web/icons/reaction.js
index 009c0f5a..36f3f907 100644
--- a/assets/web/icons/reaction.js
+++ b/assets/web/icons/reaction.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function ReactionIcon(props) {
+function ReactionIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
@@ -16,4 +18,4 @@ function ReactionIcon(props) {
 }
 ;
 ReactionIcon.displayName = "ReactionIcon";
-export default ReactionIcon;
\ No newline at end of file
+export default forwardRef(ReactionIcon);
\ No newline at end of file
diff --git a/assets/web/icons/reply.cjs b/assets/web/icons/reply.cjs
index 0e99f689..97d60a1c 100644
--- a/assets/web/icons/reply.cjs
+++ b/assets/web/icons/reply.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ReplyIcon(props) {
+var React = require("react");
+function ReplyIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M9.405 5.708c.39-.39.39-1.025 0-1.416a.996.996 0 0 0-1.412 0L3.294 9.006a1.004 1.004 0 0 0 0 1.416l4.699 4.714a.996.996 0 0 0 1.412 0c.39-.39.39-1.025 0-1.416l-3.043-3.053h9.153c1.887 0 3.485 1.604 3.485 3.666C19 16.396 17.402 18 15.515 18h-2.093a1 1 0 1 0 0 2h2.093C18.58 20 21 17.425 21 14.333c0-3.091-2.419-5.666-5.485-5.666H6.456l2.949-2.959Z"
@@ -14,4 +16,4 @@ function ReplyIcon(props) {
 }
 ;
 ReplyIcon.displayName = "ReplyIcon";
-module.exports = ReplyIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ReplyIcon);
\ No newline at end of file
diff --git a/assets/web/icons/reply.d.ts b/assets/web/icons/reply.d.ts
index f338e784..56b92d79 100644
--- a/assets/web/icons/reply.d.ts
+++ b/assets/web/icons/reply.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * reply.svg
  */
-declare const ReplyIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ReplyIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ReplyIcon;
diff --git a/assets/web/icons/reply.js b/assets/web/icons/reply.js
index b32e4ba8..68302820 100644
--- a/assets/web/icons/reply.js
+++ b/assets/web/icons/reply.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ReplyIcon(props) {
+function ReplyIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M9.405 5.708c.39-.39.39-1.025 0-1.416a.996.996 0 0 0-1.412 0L3.294 9.006a1.004 1.004 0 0 0 0 1.416l4.699 4.714a.996.996 0 0 0 1.412 0c.39-.39.39-1.025 0-1.416l-3.043-3.053h9.153c1.887 0 3.485 1.604 3.485 3.666C19 16.396 17.402 18 15.515 18h-2.093a1 1 0 1 0 0 2h2.093C18.58 20 21 17.425 21 14.333c0-3.091-2.419-5.666-5.485-5.666H6.456l2.949-2.959Z"
@@ -14,4 +16,4 @@ function ReplyIcon(props) {
 }
 ;
 ReplyIcon.displayName = "ReplyIcon";
-export default ReplyIcon;
\ No newline at end of file
+export default forwardRef(ReplyIcon);
\ No newline at end of file
diff --git a/assets/web/icons/restart.cjs b/assets/web/icons/restart.cjs
index f395bfc3..bd6358ed 100644
--- a/assets/web/icons/restart.cjs
+++ b/assets/web/icons/restart.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function RestartIcon(props) {
+var React = require("react");
+function RestartIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M18.93 8A8 8 0 1 1 4 12a1 1 0 1 0-2 0c0 5.523 4.477 10 10 10s10-4.477 10-10a9.966 9.966 0 0 0-.832-4A10.002 10.002 0 0 0 12 2a9.985 9.985 0 0 0-8 3.999V4a1 1 0 0 0-2 0v4a1 1 0 0 0 1 1h4a1 1 0 0 0 0-2H5.755A7.985 7.985 0 0 1 12 4a7.997 7.997 0 0 1 6.93 4Z"
@@ -14,4 +16,4 @@ function RestartIcon(props) {
 }
 ;
 RestartIcon.displayName = "RestartIcon";
-module.exports = RestartIcon;
\ No newline at end of file
+module.exports = React.forwardRef(RestartIcon);
\ No newline at end of file
diff --git a/assets/web/icons/restart.d.ts b/assets/web/icons/restart.d.ts
index e8e784c5..138cb426 100644
--- a/assets/web/icons/restart.d.ts
+++ b/assets/web/icons/restart.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * restart.svg
  */
-declare const RestartIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const RestartIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default RestartIcon;
diff --git a/assets/web/icons/restart.js b/assets/web/icons/restart.js
index 60d7a7a0..d9ea29b6 100644
--- a/assets/web/icons/restart.js
+++ b/assets/web/icons/restart.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function RestartIcon(props) {
+function RestartIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M18.93 8A8 8 0 1 1 4 12a1 1 0 1 0-2 0c0 5.523 4.477 10 10 10s10-4.477 10-10a9.966 9.966 0 0 0-.832-4A10.002 10.002 0 0 0 12 2a9.985 9.985 0 0 0-8 3.999V4a1 1 0 0 0-2 0v4a1 1 0 0 0 1 1h4a1 1 0 0 0 0-2H5.755A7.985 7.985 0 0 1 12 4a7.997 7.997 0 0 1 6.93 4Z"
@@ -14,4 +16,4 @@ function RestartIcon(props) {
 }
 ;
 RestartIcon.displayName = "RestartIcon";
-export default RestartIcon;
\ No newline at end of file
+export default forwardRef(RestartIcon);
\ No newline at end of file
diff --git a/assets/web/icons/search.cjs b/assets/web/icons/search.cjs
index f7390669..5479e0a8 100644
--- a/assets/web/icons/search.cjs
+++ b/assets/web/icons/search.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function SearchIcon(props) {
+var React = require("react");
+function SearchIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M15.05 16.463a7.5 7.5 0 1 1 1.414-1.414l3.243 3.244a1 1 0 0 1-1.414 1.414l-3.244-3.244ZM16 10.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0Z"
@@ -14,4 +16,4 @@ function SearchIcon(props) {
 }
 ;
 SearchIcon.displayName = "SearchIcon";
-module.exports = SearchIcon;
\ No newline at end of file
+module.exports = React.forwardRef(SearchIcon);
\ No newline at end of file
diff --git a/assets/web/icons/search.d.ts b/assets/web/icons/search.d.ts
index 1df21a95..9cdbf90d 100644
--- a/assets/web/icons/search.d.ts
+++ b/assets/web/icons/search.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * search.svg
  */
-declare const SearchIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const SearchIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default SearchIcon;
diff --git a/assets/web/icons/search.js b/assets/web/icons/search.js
index db984937..fc4b01a1 100644
--- a/assets/web/icons/search.js
+++ b/assets/web/icons/search.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function SearchIcon(props) {
+function SearchIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M15.05 16.463a7.5 7.5 0 1 1 1.414-1.414l3.243 3.244a1 1 0 0 1-1.414 1.414l-3.244-3.244ZM16 10.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0Z"
@@ -14,4 +16,4 @@ function SearchIcon(props) {
 }
 ;
 SearchIcon.displayName = "SearchIcon";
-export default SearchIcon;
\ No newline at end of file
+export default forwardRef(SearchIcon);
\ No newline at end of file
diff --git a/assets/web/icons/send-solid.cjs b/assets/web/icons/send-solid.cjs
index 19e4f267..330414b9 100644
--- a/assets/web/icons/send-solid.cjs
+++ b/assets/web/icons/send-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function SendSolidIcon(props) {
+var React = require("react");
+function SendSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "m21.211 12.895-16.14 8.07c-.785.392-1.658-.342-1.406-1.182L5.7 13h6.55a1 1 0 1 0 0-2H5.7L3.665 4.217c-.252-.84.621-1.574 1.405-1.182l16.141 8.07a1 1 0 0 1 0 1.79Z"
@@ -14,4 +16,4 @@ function SendSolidIcon(props) {
 }
 ;
 SendSolidIcon.displayName = "SendSolidIcon";
-module.exports = SendSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(SendSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/send-solid.d.ts b/assets/web/icons/send-solid.d.ts
index 35e9058a..593bf818 100644
--- a/assets/web/icons/send-solid.d.ts
+++ b/assets/web/icons/send-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * send-solid.svg
  */
-declare const SendSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const SendSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default SendSolidIcon;
diff --git a/assets/web/icons/send-solid.js b/assets/web/icons/send-solid.js
index 75406086..85aa6013 100644
--- a/assets/web/icons/send-solid.js
+++ b/assets/web/icons/send-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function SendSolidIcon(props) {
+function SendSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "m21.211 12.895-16.14 8.07c-.785.392-1.658-.342-1.406-1.182L5.7 13h6.55a1 1 0 1 0 0-2H5.7L3.665 4.217c-.252-.84.621-1.574 1.405-1.182l16.141 8.07a1 1 0 0 1 0 1.79Z"
@@ -14,4 +16,4 @@ function SendSolidIcon(props) {
 }
 ;
 SendSolidIcon.displayName = "SendSolidIcon";
-export default SendSolidIcon;
\ No newline at end of file
+export default forwardRef(SendSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/send.cjs b/assets/web/icons/send.cjs
index b60d6b71..b68a9723 100644
--- a/assets/web/icons/send.cjs
+++ b/assets/web/icons/send.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function SendIcon(props) {
+var React = require("react");
+function SendIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       fillRule: "evenodd",
@@ -16,4 +18,4 @@ function SendIcon(props) {
 }
 ;
 SendIcon.displayName = "SendIcon";
-module.exports = SendIcon;
\ No newline at end of file
+module.exports = React.forwardRef(SendIcon);
\ No newline at end of file
diff --git a/assets/web/icons/send.d.ts b/assets/web/icons/send.d.ts
index 30450f7c..d9f2be95 100644
--- a/assets/web/icons/send.d.ts
+++ b/assets/web/icons/send.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * send.svg
  */
-declare const SendIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const SendIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default SendIcon;
diff --git a/assets/web/icons/send.js b/assets/web/icons/send.js
index f5dad41d..3d5932e0 100644
--- a/assets/web/icons/send.js
+++ b/assets/web/icons/send.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function SendIcon(props) {
+function SendIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       fillRule: "evenodd",
@@ -16,4 +18,4 @@ function SendIcon(props) {
 }
 ;
 SendIcon.displayName = "SendIcon";
-export default SendIcon;
\ No newline at end of file
+export default forwardRef(SendIcon);
\ No newline at end of file
diff --git a/assets/web/icons/settings-solid.cjs b/assets/web/icons/settings-solid.cjs
index d6e838b7..3f79b98e 100644
--- a/assets/web/icons/settings-solid.cjs
+++ b/assets/web/icons/settings-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function SettingsSolidIcon(props) {
+var React = require("react");
+function SettingsSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12.731 2C13.432 2 14 2.568 14 3.269c0 .578.396 1.074.935 1.286.085.034.17.07.253.106.531.23 1.162.16 1.572-.25a1.269 1.269 0 0 1 1.794 0l1.034 1.035a1.269 1.269 0 0 1 0 1.794c-.41.41-.48 1.04-.248 1.572.036.084.07.168.105.253.212.539.708.935 1.286.935.701 0 1.269.568 1.269 1.269v1.462c0 .701-.568 1.269-1.269 1.269-.578 0-1.074.396-1.287.935-.033.085-.068.17-.104.253-.232.531-.161 1.162.248 1.572a1.269 1.269 0 0 1 0 1.794l-1.034 1.034a1.269 1.269 0 0 1-1.794 0c-.41-.41-1.04-.48-1.572-.248a7.935 7.935 0 0 1-.253.105c-.539.212-.935.708-.935 1.286 0 .701-.568 1.269-1.269 1.269H11.27c-.702 0-1.27-.568-1.27-1.269 0-.578-.396-1.074-.935-1.287a7.975 7.975 0 0 1-.253-.104c-.531-.232-1.162-.161-1.572.248a1.269 1.269 0 0 1-1.794 0l-1.034-1.034a1.269 1.269 0 0 1 0-1.794c.41-.41.48-1.04.249-1.572a7.89 7.89 0 0 1-.106-.253C4.343 14.396 3.847 14 3.27 14 2.568 14 2 13.432 2 12.731V11.27c0-.702.568-1.27 1.269-1.27.578 0 1.074-.396 1.286-.935.034-.085.07-.17.106-.253.23-.531.16-1.162-.25-1.572a1.269 1.269 0 0 1 0-1.794l1.035-1.034a1.269 1.269 0 0 1 1.794 0c.41.41 1.04.48 1.572.249a7.93 7.93 0 0 1 .253-.106c.539-.212.935-.708.935-1.286C10 2.568 10.568 2 11.269 2h1.462ZM12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"
@@ -14,4 +16,4 @@ function SettingsSolidIcon(props) {
 }
 ;
 SettingsSolidIcon.displayName = "SettingsSolidIcon";
-module.exports = SettingsSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(SettingsSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/settings-solid.d.ts b/assets/web/icons/settings-solid.d.ts
index 11843e41..896b4296 100644
--- a/assets/web/icons/settings-solid.d.ts
+++ b/assets/web/icons/settings-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * settings-solid.svg
  */
-declare const SettingsSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const SettingsSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default SettingsSolidIcon;
diff --git a/assets/web/icons/settings-solid.js b/assets/web/icons/settings-solid.js
index 926642cb..4c7a1579 100644
--- a/assets/web/icons/settings-solid.js
+++ b/assets/web/icons/settings-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function SettingsSolidIcon(props) {
+function SettingsSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M12.731 2C13.432 2 14 2.568 14 3.269c0 .578.396 1.074.935 1.286.085.034.17.07.253.106.531.23 1.162.16 1.572-.25a1.269 1.269 0 0 1 1.794 0l1.034 1.035a1.269 1.269 0 0 1 0 1.794c-.41.41-.48 1.04-.248 1.572.036.084.07.168.105.253.212.539.708.935 1.286.935.701 0 1.269.568 1.269 1.269v1.462c0 .701-.568 1.269-1.269 1.269-.578 0-1.074.396-1.287.935-.033.085-.068.17-.104.253-.232.531-.161 1.162.248 1.572a1.269 1.269 0 0 1 0 1.794l-1.034 1.034a1.269 1.269 0 0 1-1.794 0c-.41-.41-1.04-.48-1.572-.248a7.935 7.935 0 0 1-.253.105c-.539.212-.935.708-.935 1.286 0 .701-.568 1.269-1.269 1.269H11.27c-.702 0-1.27-.568-1.27-1.269 0-.578-.396-1.074-.935-1.287a7.975 7.975 0 0 1-.253-.104c-.531-.232-1.162-.161-1.572.248a1.269 1.269 0 0 1-1.794 0l-1.034-1.034a1.269 1.269 0 0 1 0-1.794c.41-.41.48-1.04.249-1.572a7.89 7.89 0 0 1-.106-.253C4.343 14.396 3.847 14 3.27 14 2.568 14 2 13.432 2 12.731V11.27c0-.702.568-1.27 1.269-1.27.578 0 1.074-.396 1.286-.935.034-.085.07-.17.106-.253.23-.531.16-1.162-.25-1.572a1.269 1.269 0 0 1 0-1.794l1.035-1.034a1.269 1.269 0 0 1 1.794 0c.41.41 1.04.48 1.572.249a7.93 7.93 0 0 1 .253-.106c.539-.212.935-.708.935-1.286C10 2.568 10.568 2 11.269 2h1.462ZM12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"
@@ -14,4 +16,4 @@ function SettingsSolidIcon(props) {
 }
 ;
 SettingsSolidIcon.displayName = "SettingsSolidIcon";
-export default SettingsSolidIcon;
\ No newline at end of file
+export default forwardRef(SettingsSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/settings.cjs b/assets/web/icons/settings.cjs
index 0ca0f358..ce3bf205 100644
--- a/assets/web/icons/settings.cjs
+++ b/assets/web/icons/settings.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function SettingsIcon(props) {
+var React = require("react");
+function SettingsIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Zm-2 0a2 2 0 1 0-4 0 2 2 0 0 0 4 0Z"
@@ -16,4 +18,4 @@ function SettingsIcon(props) {
 }
 ;
 SettingsIcon.displayName = "SettingsIcon";
-module.exports = SettingsIcon;
\ No newline at end of file
+module.exports = React.forwardRef(SettingsIcon);
\ No newline at end of file
diff --git a/assets/web/icons/settings.d.ts b/assets/web/icons/settings.d.ts
index 200b3823..36f15388 100644
--- a/assets/web/icons/settings.d.ts
+++ b/assets/web/icons/settings.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * settings.svg
  */
-declare const SettingsIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const SettingsIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default SettingsIcon;
diff --git a/assets/web/icons/settings.js b/assets/web/icons/settings.js
index 71d44117..14de0182 100644
--- a/assets/web/icons/settings.js
+++ b/assets/web/icons/settings.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function SettingsIcon(props) {
+function SettingsIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Zm-2 0a2 2 0 1 0-4 0 2 2 0 0 0 4 0Z"
@@ -16,4 +18,4 @@ function SettingsIcon(props) {
 }
 ;
 SettingsIcon.displayName = "SettingsIcon";
-export default SettingsIcon;
\ No newline at end of file
+export default forwardRef(SettingsIcon);
\ No newline at end of file
diff --git a/assets/web/icons/share-android.cjs b/assets/web/icons/share-android.cjs
index 263a76a5..4fb54b4f 100644
--- a/assets/web/icons/share-android.cjs
+++ b/assets/web/icons/share-android.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ShareAndroidIcon(props) {
+var React = require("react");
+function ShareAndroidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M13 5a4 4 0 1 1 1.4 3.04l-3.653 2.558a3.998 3.998 0 0 1 0 2.804L14.4 15.96a4 4 0 1 1-1.148 1.638L9.6 15.04a4 4 0 1 1 0-6.08l3.654-2.558A3.992 3.992 0 0 1 13 5Zm4-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM7 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm10 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"
@@ -14,4 +16,4 @@ function ShareAndroidIcon(props) {
 }
 ;
 ShareAndroidIcon.displayName = "ShareAndroidIcon";
-module.exports = ShareAndroidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ShareAndroidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/share-android.d.ts b/assets/web/icons/share-android.d.ts
index 1473416f..aab71859 100644
--- a/assets/web/icons/share-android.d.ts
+++ b/assets/web/icons/share-android.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * share-android.svg
  */
-declare const ShareAndroidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ShareAndroidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ShareAndroidIcon;
diff --git a/assets/web/icons/share-android.js b/assets/web/icons/share-android.js
index d507bd9f..b9e3e1a5 100644
--- a/assets/web/icons/share-android.js
+++ b/assets/web/icons/share-android.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ShareAndroidIcon(props) {
+function ShareAndroidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M13 5a4 4 0 1 1 1.4 3.04l-3.653 2.558a3.998 3.998 0 0 1 0 2.804L14.4 15.96a4 4 0 1 1-1.148 1.638L9.6 15.04a4 4 0 1 1 0-6.08l3.654-2.558A3.992 3.992 0 0 1 13 5Zm4-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM7 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm10 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"
@@ -14,4 +16,4 @@ function ShareAndroidIcon(props) {
 }
 ;
 ShareAndroidIcon.displayName = "ShareAndroidIcon";
-export default ShareAndroidIcon;
\ No newline at end of file
+export default forwardRef(ShareAndroidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/share-ios.cjs b/assets/web/icons/share-ios.cjs
index 148c20ad..c576c91e 100644
--- a/assets/web/icons/share-ios.cjs
+++ b/assets/web/icons/share-ios.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ShareIosIcon(props) {
+var React = require("react");
+function ShareIosIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12.707 2.293a1 1 0 0 0-1.414 0l-2.5 2.5a1 1 0 0 0 1.414 1.414L11 5.414V14a1 1 0 1 0 2 0V5.414l.793.793a1 1 0 1 0 1.414-1.414l-2.5-2.5Z"
@@ -16,4 +18,4 @@ function ShareIosIcon(props) {
 }
 ;
 ShareIosIcon.displayName = "ShareIosIcon";
-module.exports = ShareIosIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ShareIosIcon);
\ No newline at end of file
diff --git a/assets/web/icons/share-ios.d.ts b/assets/web/icons/share-ios.d.ts
index a67bf3ae..50a8ea93 100644
--- a/assets/web/icons/share-ios.d.ts
+++ b/assets/web/icons/share-ios.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * share-ios.svg
  */
-declare const ShareIosIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ShareIosIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ShareIosIcon;
diff --git a/assets/web/icons/share-ios.js b/assets/web/icons/share-ios.js
index ce6ab703..3da49a10 100644
--- a/assets/web/icons/share-ios.js
+++ b/assets/web/icons/share-ios.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function ShareIosIcon(props) {
+function ShareIosIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M12.707 2.293a1 1 0 0 0-1.414 0l-2.5 2.5a1 1 0 0 0 1.414 1.414L11 5.414V14a1 1 0 1 0 2 0V5.414l.793.793a1 1 0 1 0 1.414-1.414l-2.5-2.5Z"
@@ -16,4 +18,4 @@ function ShareIosIcon(props) {
 }
 ;
 ShareIosIcon.displayName = "ShareIosIcon";
-export default ShareIosIcon;
\ No newline at end of file
+export default forwardRef(ShareIosIcon);
\ No newline at end of file
diff --git a/assets/web/icons/share-screen-solid.cjs b/assets/web/icons/share-screen-solid.cjs
index b6afd438..a5537bb8 100644
--- a/assets/web/icons/share-screen-solid.cjs
+++ b/assets/web/icons/share-screen-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ShareScreenSolidIcon(props) {
+var React = require("react");
+function ShareScreenSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M1.288 20.712A.965.965 0 0 0 2 21h20c.283 0 .52-.096.712-.288A.968.968 0 0 0 23 20a.968.968 0 0 0-.288-.712A.968.968 0 0 0 22 19H2a.967.967 0 0 0-.712.288A.968.968 0 0 0 1 20c0 .283.096.52.288.712Zm1.299-3.299A1.926 1.926 0 0 1 2 16V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 4 3h16c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v11c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 18H4c-.55 0-1.02-.196-1.413-.587Zm10.12-10.12a1 1 0 0 0-1.414 0l-2.5 2.5a1 1 0 0 0 1.414 1.414l.793-.793V13a1 1 0 1 0 2 0v-2.586l.793.793a1 1 0 0 0 1.414-1.414l-2.5-2.5Z"
@@ -14,4 +16,4 @@ function ShareScreenSolidIcon(props) {
 }
 ;
 ShareScreenSolidIcon.displayName = "ShareScreenSolidIcon";
-module.exports = ShareScreenSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ShareScreenSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/share-screen-solid.d.ts b/assets/web/icons/share-screen-solid.d.ts
index 1c4ce860..58e47883 100644
--- a/assets/web/icons/share-screen-solid.d.ts
+++ b/assets/web/icons/share-screen-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * share-screen-solid.svg
  */
-declare const ShareScreenSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ShareScreenSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ShareScreenSolidIcon;
diff --git a/assets/web/icons/share-screen-solid.js b/assets/web/icons/share-screen-solid.js
index 720df3c3..2d1db087 100644
--- a/assets/web/icons/share-screen-solid.js
+++ b/assets/web/icons/share-screen-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ShareScreenSolidIcon(props) {
+function ShareScreenSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M1.288 20.712A.965.965 0 0 0 2 21h20c.283 0 .52-.096.712-.288A.968.968 0 0 0 23 20a.968.968 0 0 0-.288-.712A.968.968 0 0 0 22 19H2a.967.967 0 0 0-.712.288A.968.968 0 0 0 1 20c0 .283.096.52.288.712Zm1.299-3.299A1.926 1.926 0 0 1 2 16V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 4 3h16c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v11c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 18H4c-.55 0-1.02-.196-1.413-.587Zm10.12-10.12a1 1 0 0 0-1.414 0l-2.5 2.5a1 1 0 0 0 1.414 1.414l.793-.793V13a1 1 0 1 0 2 0v-2.586l.793.793a1 1 0 0 0 1.414-1.414l-2.5-2.5Z"
@@ -14,4 +16,4 @@ function ShareScreenSolidIcon(props) {
 }
 ;
 ShareScreenSolidIcon.displayName = "ShareScreenSolidIcon";
-export default ShareScreenSolidIcon;
\ No newline at end of file
+export default forwardRef(ShareScreenSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/share-screen.cjs b/assets/web/icons/share-screen.cjs
index d9ebfb1e..c5b877e1 100644
--- a/assets/web/icons/share-screen.cjs
+++ b/assets/web/icons/share-screen.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ShareScreenIcon(props) {
+var React = require("react");
+function ShareScreenIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M1.288 20.712A.965.965 0 0 0 2 21h20c.283 0 .52-.096.712-.288A.968.968 0 0 0 23 20a.968.968 0 0 0-.288-.712A.968.968 0 0 0 22 19H2a.967.967 0 0 0-.712.288A.968.968 0 0 0 1 20c0 .283.096.52.288.712ZM12.707 7.293a1 1 0 0 0-1.414 0l-2.5 2.5a1 1 0 0 0 1.414 1.414l.793-.793V13a1 1 0 1 0 2 0v-2.586l.793.793a1 1 0 0 0 1.414-1.414l-2.5-2.5Z"
@@ -16,4 +18,4 @@ function ShareScreenIcon(props) {
 }
 ;
 ShareScreenIcon.displayName = "ShareScreenIcon";
-module.exports = ShareScreenIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ShareScreenIcon);
\ No newline at end of file
diff --git a/assets/web/icons/share-screen.d.ts b/assets/web/icons/share-screen.d.ts
index e4bd4060..36dadbd1 100644
--- a/assets/web/icons/share-screen.d.ts
+++ b/assets/web/icons/share-screen.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * share-screen.svg
  */
-declare const ShareScreenIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ShareScreenIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ShareScreenIcon;
diff --git a/assets/web/icons/share-screen.js b/assets/web/icons/share-screen.js
index 954a386d..f68a4f14 100644
--- a/assets/web/icons/share-screen.js
+++ b/assets/web/icons/share-screen.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function ShareScreenIcon(props) {
+function ShareScreenIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M1.288 20.712A.965.965 0 0 0 2 21h20c.283 0 .52-.096.712-.288A.968.968 0 0 0 23 20a.968.968 0 0 0-.288-.712A.968.968 0 0 0 22 19H2a.967.967 0 0 0-.712.288A.968.968 0 0 0 1 20c0 .283.096.52.288.712ZM12.707 7.293a1 1 0 0 0-1.414 0l-2.5 2.5a1 1 0 0 0 1.414 1.414l.793-.793V13a1 1 0 1 0 2 0v-2.586l.793.793a1 1 0 0 0 1.414-1.414l-2.5-2.5Z"
@@ -16,4 +18,4 @@ function ShareScreenIcon(props) {
 }
 ;
 ShareScreenIcon.displayName = "ShareScreenIcon";
-export default ShareScreenIcon;
\ No newline at end of file
+export default forwardRef(ShareScreenIcon);
\ No newline at end of file
diff --git a/assets/web/icons/share.cjs b/assets/web/icons/share.cjs
index 0b2db18a..7e7f8294 100644
--- a/assets/web/icons/share.cjs
+++ b/assets/web/icons/share.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ShareIcon(props) {
+var React = require("react");
+function ShareIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12 16a.968.968 0 0 1-.713-.287A.968.968 0 0 1 11 15V7.85L9.125 9.725c-.2.2-.433.3-.7.3-.267 0-.508-.108-.725-.325a.93.93 0 0 1-.288-.713A.977.977 0 0 1 7.7 8.3l3.6-3.6c.1-.1.208-.17.325-.213.117-.041.242-.062.375-.062s.258.02.375.062a.877.877 0 0 1 .325.213l3.6 3.6c.2.2.296.437.287.712a.977.977 0 0 1-.287.688c-.2.2-.438.304-.713.313a.93.93 0 0 1-.712-.288L13 7.85V15c0 .283-.096.52-.287.713A.968.968 0 0 1 12 16Zm-6 4c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 18v-2c0-.283.096-.52.287-.713A.967.967 0 0 1 5 15c.283 0 .52.096.713.287.191.192.287.43.287.713v2h12v-2a.97.97 0 0 1 .288-.713A.968.968 0 0 1 19 15a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v2c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 20H6Z"
@@ -14,4 +16,4 @@ function ShareIcon(props) {
 }
 ;
 ShareIcon.displayName = "ShareIcon";
-module.exports = ShareIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ShareIcon);
\ No newline at end of file
diff --git a/assets/web/icons/share.d.ts b/assets/web/icons/share.d.ts
index 000cfff3..e3fab21f 100644
--- a/assets/web/icons/share.d.ts
+++ b/assets/web/icons/share.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * share.svg
  */
-declare const ShareIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ShareIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ShareIcon;
diff --git a/assets/web/icons/share.js b/assets/web/icons/share.js
index e4466891..d4145c06 100644
--- a/assets/web/icons/share.js
+++ b/assets/web/icons/share.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ShareIcon(props) {
+function ShareIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M12 16a.968.968 0 0 1-.713-.287A.968.968 0 0 1 11 15V7.85L9.125 9.725c-.2.2-.433.3-.7.3-.267 0-.508-.108-.725-.325a.93.93 0 0 1-.288-.713A.977.977 0 0 1 7.7 8.3l3.6-3.6c.1-.1.208-.17.325-.213.117-.041.242-.062.375-.062s.258.02.375.062a.877.877 0 0 1 .325.213l3.6 3.6c.2.2.296.437.287.712a.977.977 0 0 1-.287.688c-.2.2-.438.304-.713.313a.93.93 0 0 1-.712-.288L13 7.85V15c0 .283-.096.52-.287.713A.968.968 0 0 1 12 16Zm-6 4c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 18v-2c0-.283.096-.52.287-.713A.967.967 0 0 1 5 15c.283 0 .52.096.713.287.191.192.287.43.287.713v2h12v-2a.97.97 0 0 1 .288-.713A.968.968 0 0 1 19 15a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v2c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 20H6Z"
@@ -14,4 +16,4 @@ function ShareIcon(props) {
 }
 ;
 ShareIcon.displayName = "ShareIcon";
-export default ShareIcon;
\ No newline at end of file
+export default forwardRef(ShareIcon);
\ No newline at end of file
diff --git a/assets/web/icons/sidebar.cjs b/assets/web/icons/sidebar.cjs
index 28264b3a..91a975fe 100644
--- a/assets/web/icons/sidebar.cjs
+++ b/assets/web/icons/sidebar.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function SidebarIcon(props) {
+var React = require("react");
+function SidebarIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       fillRule: "evenodd",
@@ -16,4 +18,4 @@ function SidebarIcon(props) {
 }
 ;
 SidebarIcon.displayName = "SidebarIcon";
-module.exports = SidebarIcon;
\ No newline at end of file
+module.exports = React.forwardRef(SidebarIcon);
\ No newline at end of file
diff --git a/assets/web/icons/sidebar.d.ts b/assets/web/icons/sidebar.d.ts
index 63abbd1a..c227bedf 100644
--- a/assets/web/icons/sidebar.d.ts
+++ b/assets/web/icons/sidebar.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * sidebar.svg
  */
-declare const SidebarIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const SidebarIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default SidebarIcon;
diff --git a/assets/web/icons/sidebar.js b/assets/web/icons/sidebar.js
index f4952f5b..21229663 100644
--- a/assets/web/icons/sidebar.js
+++ b/assets/web/icons/sidebar.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function SidebarIcon(props) {
+function SidebarIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       fillRule: "evenodd",
@@ -16,4 +18,4 @@ function SidebarIcon(props) {
 }
 ;
 SidebarIcon.displayName = "SidebarIcon";
-export default SidebarIcon;
\ No newline at end of file
+export default forwardRef(SidebarIcon);
\ No newline at end of file
diff --git a/assets/web/icons/sign-out.cjs b/assets/web/icons/sign-out.cjs
index ebd86aeb..5e49d3dd 100644
--- a/assets/web/icons/sign-out.cjs
+++ b/assets/web/icons/sign-out.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function SignOutIcon(props) {
+var React = require("react");
+function SignOutIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M9 12.031a.97.97 0 0 1 .287-.712.968.968 0 0 1 .713-.289h7.15l-1.875-1.875a.96.96 0 0 1-.3-.7c0-.266.108-.508.325-.725a.93.93 0 0 1 .712-.287.977.977 0 0 1 .688.287l3.6 3.6c.1.1.17.209.212.325.042.117.063.242.063.375 0 .134-.02.259-.063.375a.877.877 0 0 1-.212.325l-3.6 3.6a.93.93 0 0 1-.712.288.977.977 0 0 1-.688-.288 1.02 1.02 0 0 1-.313-.712.93.93 0 0 1 .288-.713l1.875-1.875H10a.968.968 0 0 1-.713-.287A.968.968 0 0 1 9 12.03Zm-6-7c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 5 3.03h6a.97.97 0 0 1 .713.288.968.968 0 0 1 .287.712.97.97 0 0 1-.287.713.968.968 0 0 1-.713.287H5v14h6a.97.97 0 0 1 .713.288.968.968 0 0 1 .287.712.97.97 0 0 1-.287.713.968.968 0 0 1-.713.287H5c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19.03v-14Z"
@@ -14,4 +16,4 @@ function SignOutIcon(props) {
 }
 ;
 SignOutIcon.displayName = "SignOutIcon";
-module.exports = SignOutIcon;
\ No newline at end of file
+module.exports = React.forwardRef(SignOutIcon);
\ No newline at end of file
diff --git a/assets/web/icons/sign-out.d.ts b/assets/web/icons/sign-out.d.ts
index 34d30f46..789ef723 100644
--- a/assets/web/icons/sign-out.d.ts
+++ b/assets/web/icons/sign-out.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * sign-out.svg
  */
-declare const SignOutIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const SignOutIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default SignOutIcon;
diff --git a/assets/web/icons/sign-out.js b/assets/web/icons/sign-out.js
index ee836a45..1f8e4fa1 100644
--- a/assets/web/icons/sign-out.js
+++ b/assets/web/icons/sign-out.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function SignOutIcon(props) {
+function SignOutIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M9 12.031a.97.97 0 0 1 .287-.712.968.968 0 0 1 .713-.289h7.15l-1.875-1.875a.96.96 0 0 1-.3-.7c0-.266.108-.508.325-.725a.93.93 0 0 1 .712-.287.977.977 0 0 1 .688.287l3.6 3.6c.1.1.17.209.212.325.042.117.063.242.063.375 0 .134-.02.259-.063.375a.877.877 0 0 1-.212.325l-3.6 3.6a.93.93 0 0 1-.712.288.977.977 0 0 1-.688-.288 1.02 1.02 0 0 1-.313-.712.93.93 0 0 1 .288-.713l1.875-1.875H10a.968.968 0 0 1-.713-.287A.968.968 0 0 1 9 12.03Zm-6-7c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 5 3.03h6a.97.97 0 0 1 .713.288.968.968 0 0 1 .287.712.97.97 0 0 1-.287.713.968.968 0 0 1-.713.287H5v14h6a.97.97 0 0 1 .713.288.968.968 0 0 1 .287.712.97.97 0 0 1-.287.713.968.968 0 0 1-.713.287H5c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19.03v-14Z"
@@ -14,4 +16,4 @@ function SignOutIcon(props) {
 }
 ;
 SignOutIcon.displayName = "SignOutIcon";
-export default SignOutIcon;
\ No newline at end of file
+export default forwardRef(SignOutIcon);
\ No newline at end of file
diff --git a/assets/web/icons/spinner.cjs b/assets/web/icons/spinner.cjs
index 9548fec9..30415bab 100644
--- a/assets/web/icons/spinner.cjs
+++ b/assets/web/icons/spinner.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function SpinnerIcon(props) {
+var React = require("react");
+function SpinnerIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       fillRule: "evenodd",
@@ -16,4 +18,4 @@ function SpinnerIcon(props) {
 }
 ;
 SpinnerIcon.displayName = "SpinnerIcon";
-module.exports = SpinnerIcon;
\ No newline at end of file
+module.exports = React.forwardRef(SpinnerIcon);
\ No newline at end of file
diff --git a/assets/web/icons/spinner.d.ts b/assets/web/icons/spinner.d.ts
index 5315356f..dabd80c4 100644
--- a/assets/web/icons/spinner.d.ts
+++ b/assets/web/icons/spinner.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * spinner.svg
  */
-declare const SpinnerIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const SpinnerIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default SpinnerIcon;
diff --git a/assets/web/icons/spinner.js b/assets/web/icons/spinner.js
index 1ff441d8..7d369359 100644
--- a/assets/web/icons/spinner.js
+++ b/assets/web/icons/spinner.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function SpinnerIcon(props) {
+function SpinnerIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       fillRule: "evenodd",
@@ -16,4 +18,4 @@ function SpinnerIcon(props) {
 }
 ;
 SpinnerIcon.displayName = "SpinnerIcon";
-export default SpinnerIcon;
\ No newline at end of file
+export default forwardRef(SpinnerIcon);
\ No newline at end of file
diff --git a/assets/web/icons/spotlight.cjs b/assets/web/icons/spotlight.cjs
index 9aa76e74..8e208fe6 100644
--- a/assets/web/icons/spotlight.cjs
+++ b/assets/web/icons/spotlight.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function SpotlightIcon(props) {
+var React = require("react");
+function SpotlightIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M5 5h14v8h-5a1 1 0 0 0-1 1v5H5V5Zm10 14v-4h4v4h-4ZM5 21h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2Z"
@@ -14,4 +16,4 @@ function SpotlightIcon(props) {
 }
 ;
 SpotlightIcon.displayName = "SpotlightIcon";
-module.exports = SpotlightIcon;
\ No newline at end of file
+module.exports = React.forwardRef(SpotlightIcon);
\ No newline at end of file
diff --git a/assets/web/icons/spotlight.d.ts b/assets/web/icons/spotlight.d.ts
index 2105ad4d..0bad3dc9 100644
--- a/assets/web/icons/spotlight.d.ts
+++ b/assets/web/icons/spotlight.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * spotlight.svg
  */
-declare const SpotlightIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const SpotlightIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default SpotlightIcon;
diff --git a/assets/web/icons/spotlight.js b/assets/web/icons/spotlight.js
index 6cd52610..8726f302 100644
--- a/assets/web/icons/spotlight.js
+++ b/assets/web/icons/spotlight.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function SpotlightIcon(props) {
+function SpotlightIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M5 5h14v8h-5a1 1 0 0 0-1 1v5H5V5Zm10 14v-4h4v4h-4ZM5 21h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2Z"
@@ -14,4 +16,4 @@ function SpotlightIcon(props) {
 }
 ;
 SpotlightIcon.displayName = "SpotlightIcon";
-export default SpotlightIcon;
\ No newline at end of file
+export default forwardRef(SpotlightIcon);
\ No newline at end of file
diff --git a/assets/web/icons/strikethrough.cjs b/assets/web/icons/strikethrough.cjs
index 5d04d76e..e97c95ee 100644
--- a/assets/web/icons/strikethrough.cjs
+++ b/assets/web/icons/strikethrough.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function StrikethroughIcon(props) {
+var React = require("react");
+function StrikethroughIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12.15 20c-1.267 0-2.392-.375-3.375-1.125-.983-.75-1.692-1.775-2.125-3.075l2.2-.95c.233.8.638 1.458 1.213 1.975.574.517 1.287.775 2.137.775.7 0 1.333-.167 1.9-.5.567-.333.85-.867.85-1.6 0-.3-.058-.575-.175-.825A2.362 2.362 0 0 0 14.3 14h2.8a4.279 4.279 0 0 1 .25 1.5c0 1.433-.513 2.542-1.538 3.325C14.788 19.608 13.567 20 12.15 20ZM3 12a.968.968 0 0 1-.712-.287A.968.968 0 0 1 2 11a.97.97 0 0 1 .288-.713A.967.967 0 0 1 3 10h18a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 21 12H3Zm9.05-8.15c1.1 0 2.063.27 2.887.812.825.542 1.463 1.371 1.913 2.488l-2.2.975a2.987 2.987 0 0 0-.838-1.3c-.408-.383-.979-.575-1.712-.575-.683 0-1.25.154-1.7.462-.45.309-.7.738-.75 1.288h-2.4c.033-1.15.487-2.13 1.363-2.938.875-.808 2.02-1.212 3.437-1.212Z"
@@ -14,4 +16,4 @@ function StrikethroughIcon(props) {
 }
 ;
 StrikethroughIcon.displayName = "StrikethroughIcon";
-module.exports = StrikethroughIcon;
\ No newline at end of file
+module.exports = React.forwardRef(StrikethroughIcon);
\ No newline at end of file
diff --git a/assets/web/icons/strikethrough.d.ts b/assets/web/icons/strikethrough.d.ts
index 2fbf90a7..97c454ac 100644
--- a/assets/web/icons/strikethrough.d.ts
+++ b/assets/web/icons/strikethrough.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * strikethrough.svg
  */
-declare const StrikethroughIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const StrikethroughIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default StrikethroughIcon;
diff --git a/assets/web/icons/strikethrough.js b/assets/web/icons/strikethrough.js
index acae78a3..d9a09b44 100644
--- a/assets/web/icons/strikethrough.js
+++ b/assets/web/icons/strikethrough.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function StrikethroughIcon(props) {
+function StrikethroughIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M12.15 20c-1.267 0-2.392-.375-3.375-1.125-.983-.75-1.692-1.775-2.125-3.075l2.2-.95c.233.8.638 1.458 1.213 1.975.574.517 1.287.775 2.137.775.7 0 1.333-.167 1.9-.5.567-.333.85-.867.85-1.6 0-.3-.058-.575-.175-.825A2.362 2.362 0 0 0 14.3 14h2.8a4.279 4.279 0 0 1 .25 1.5c0 1.433-.513 2.542-1.538 3.325C14.788 19.608 13.567 20 12.15 20ZM3 12a.968.968 0 0 1-.712-.287A.968.968 0 0 1 2 11a.97.97 0 0 1 .288-.713A.967.967 0 0 1 3 10h18a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 21 12H3Zm9.05-8.15c1.1 0 2.063.27 2.887.812.825.542 1.463 1.371 1.913 2.488l-2.2.975a2.987 2.987 0 0 0-.838-1.3c-.408-.383-.979-.575-1.712-.575-.683 0-1.25.154-1.7.462-.45.309-.7.738-.75 1.288h-2.4c.033-1.15.487-2.13 1.363-2.938.875-.808 2.02-1.212 3.437-1.212Z"
@@ -14,4 +16,4 @@ function StrikethroughIcon(props) {
 }
 ;
 StrikethroughIcon.displayName = "StrikethroughIcon";
-export default StrikethroughIcon;
\ No newline at end of file
+export default forwardRef(StrikethroughIcon);
\ No newline at end of file
diff --git a/assets/web/icons/switch-camera-solid.cjs b/assets/web/icons/switch-camera-solid.cjs
index caae19c2..724c35dd 100644
--- a/assets/web/icons/switch-camera-solid.cjs
+++ b/assets/web/icons/switch-camera-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function SwitchCameraSolidIcon(props) {
+var React = require("react");
+function SwitchCameraSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M15.793 2.293a1 1 0 0 1 1.414 0l2 2a1 1 0 0 1 0 1.414l-2 2a1 1 0 1 1-1.414-1.414L16.086 6H5.5a2 2 0 0 0-2 2v7a1 1 0 1 1-2 0V8a4 4 0 0 1 4-4h10.586l-.293-.293a1 1 0 0 1 0-1.414ZM17.5 18H6.914l.293-.293a1 1 0 1 0-1.414-1.414l-2 2a1 1 0 0 0 0 1.414l2 2a1 1 0 1 0 1.414-1.414L6.914 20H17.5a4 4 0 0 0 4-4V9a1 1 0 1 0-2 0v7a2 2 0 0 1-2 2Z"
@@ -16,4 +18,4 @@ function SwitchCameraSolidIcon(props) {
 }
 ;
 SwitchCameraSolidIcon.displayName = "SwitchCameraSolidIcon";
-module.exports = SwitchCameraSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(SwitchCameraSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/switch-camera-solid.d.ts b/assets/web/icons/switch-camera-solid.d.ts
index df5a37ed..234cda42 100644
--- a/assets/web/icons/switch-camera-solid.d.ts
+++ b/assets/web/icons/switch-camera-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * switch-camera-solid.svg
  */
-declare const SwitchCameraSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const SwitchCameraSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default SwitchCameraSolidIcon;
diff --git a/assets/web/icons/switch-camera-solid.js b/assets/web/icons/switch-camera-solid.js
index be67a72c..fb90f2ef 100644
--- a/assets/web/icons/switch-camera-solid.js
+++ b/assets/web/icons/switch-camera-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function SwitchCameraSolidIcon(props) {
+function SwitchCameraSolidIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M15.793 2.293a1 1 0 0 1 1.414 0l2 2a1 1 0 0 1 0 1.414l-2 2a1 1 0 1 1-1.414-1.414L16.086 6H5.5a2 2 0 0 0-2 2v7a1 1 0 1 1-2 0V8a4 4 0 0 1 4-4h10.586l-.293-.293a1 1 0 0 1 0-1.414ZM17.5 18H6.914l.293-.293a1 1 0 1 0-1.414-1.414l-2 2a1 1 0 0 0 0 1.414l2 2a1 1 0 1 0 1.414-1.414L6.914 20H17.5a4 4 0 0 0 4-4V9a1 1 0 1 0-2 0v7a2 2 0 0 1-2 2Z"
@@ -16,4 +18,4 @@ function SwitchCameraSolidIcon(props) {
 }
 ;
 SwitchCameraSolidIcon.displayName = "SwitchCameraSolidIcon";
-export default SwitchCameraSolidIcon;
\ No newline at end of file
+export default forwardRef(SwitchCameraSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/take-photo-solid.cjs b/assets/web/icons/take-photo-solid.cjs
index 2d47fe47..18a9f471 100644
--- a/assets/web/icons/take-photo-solid.cjs
+++ b/assets/web/icons/take-photo-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function TakePhotoSolidIcon(props) {
+var React = require("react");
+function TakePhotoSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       fillRule: "evenodd",
@@ -16,4 +18,4 @@ function TakePhotoSolidIcon(props) {
 }
 ;
 TakePhotoSolidIcon.displayName = "TakePhotoSolidIcon";
-module.exports = TakePhotoSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(TakePhotoSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/take-photo-solid.d.ts b/assets/web/icons/take-photo-solid.d.ts
index f1d3d26f..49eac3af 100644
--- a/assets/web/icons/take-photo-solid.d.ts
+++ b/assets/web/icons/take-photo-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * take-photo-solid.svg
  */
-declare const TakePhotoSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const TakePhotoSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default TakePhotoSolidIcon;
diff --git a/assets/web/icons/take-photo-solid.js b/assets/web/icons/take-photo-solid.js
index a40e8ae0..acc3791d 100644
--- a/assets/web/icons/take-photo-solid.js
+++ b/assets/web/icons/take-photo-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function TakePhotoSolidIcon(props) {
+function TakePhotoSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       fillRule: "evenodd",
@@ -16,4 +18,4 @@ function TakePhotoSolidIcon(props) {
 }
 ;
 TakePhotoSolidIcon.displayName = "TakePhotoSolidIcon";
-export default TakePhotoSolidIcon;
\ No newline at end of file
+export default forwardRef(TakePhotoSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/take-photo.cjs b/assets/web/icons/take-photo.cjs
index f2a93433..67e6014b 100644
--- a/assets/web/icons/take-photo.cjs
+++ b/assets/web/icons/take-photo.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function TakePhotoIcon(props) {
+var React = require("react");
+function TakePhotoIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12 17.5c1.25 0 2.313-.438 3.188-1.313.874-.875 1.312-1.937 1.312-3.187 0-1.25-.438-2.313-1.313-3.188C14.313 8.938 13.25 8.5 12 8.5c-1.25 0-2.313.438-3.188 1.313C7.939 10.687 7.5 11.75 7.5 13c0 1.25.438 2.313 1.313 3.188.874.875 1.937 1.312 3.187 1.312Zm0-2c-.7 0-1.292-.242-1.775-.725C9.742 14.292 9.5 13.7 9.5 13s.242-1.292.725-1.775c.483-.483 1.075-.725 1.775-.725s1.292.242 1.775.725c.483.483.725 1.075.725 1.775s-.242 1.292-.725 1.775c-.483.483-1.075.725-1.775.725ZM4 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 19V7c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 4 5h3.15L8.4 3.65A2.011 2.011 0 0 1 9.875 3h4.25a2.011 2.011 0 0 1 1.475.65L16.85 5H20c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412v12c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 21H4Zm0-2h16V7h-4.05l-1.825-2h-4.25L8.05 7H4v12Z"
@@ -14,4 +16,4 @@ function TakePhotoIcon(props) {
 }
 ;
 TakePhotoIcon.displayName = "TakePhotoIcon";
-module.exports = TakePhotoIcon;
\ No newline at end of file
+module.exports = React.forwardRef(TakePhotoIcon);
\ No newline at end of file
diff --git a/assets/web/icons/take-photo.d.ts b/assets/web/icons/take-photo.d.ts
index 521e76e8..1aa3fa6a 100644
--- a/assets/web/icons/take-photo.d.ts
+++ b/assets/web/icons/take-photo.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * take-photo.svg
  */
-declare const TakePhotoIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const TakePhotoIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default TakePhotoIcon;
diff --git a/assets/web/icons/take-photo.js b/assets/web/icons/take-photo.js
index 125b5bf9..f5246bf6 100644
--- a/assets/web/icons/take-photo.js
+++ b/assets/web/icons/take-photo.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function TakePhotoIcon(props) {
+function TakePhotoIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M12 17.5c1.25 0 2.313-.438 3.188-1.313.874-.875 1.312-1.937 1.312-3.187 0-1.25-.438-2.313-1.313-3.188C14.313 8.938 13.25 8.5 12 8.5c-1.25 0-2.313.438-3.188 1.313C7.939 10.687 7.5 11.75 7.5 13c0 1.25.438 2.313 1.313 3.188.874.875 1.937 1.312 3.187 1.312Zm0-2c-.7 0-1.292-.242-1.775-.725C9.742 14.292 9.5 13.7 9.5 13s.242-1.292.725-1.775c.483-.483 1.075-.725 1.775-.725s1.292.242 1.775.725c.483.483.725 1.075.725 1.775s-.242 1.292-.725 1.775c-.483.483-1.075.725-1.775.725ZM4 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 19V7c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 4 5h3.15L8.4 3.65A2.011 2.011 0 0 1 9.875 3h4.25a2.011 2.011 0 0 1 1.475.65L16.85 5H20c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412v12c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 21H4Zm0-2h16V7h-4.05l-1.825-2h-4.25L8.05 7H4v12Z"
@@ -14,4 +16,4 @@ function TakePhotoIcon(props) {
 }
 ;
 TakePhotoIcon.displayName = "TakePhotoIcon";
-export default TakePhotoIcon;
\ No newline at end of file
+export default forwardRef(TakePhotoIcon);
\ No newline at end of file
diff --git a/assets/web/icons/text-formatting.cjs b/assets/web/icons/text-formatting.cjs
index eeef5ca3..718a971f 100644
--- a/assets/web/icons/text-formatting.cjs
+++ b/assets/web/icons/text-formatting.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function TextFormattingIcon(props) {
+var React = require("react");
+function TextFormattingIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M6 19a.967.967 0 0 1-.713-.288A.968.968 0 0 1 5 18a.97.97 0 0 1 .287-.712A.967.967 0 0 1 6 17h12c.283 0 .52.096.712.288.192.191.288.429.288.712s-.096.52-.288.712A.968.968 0 0 1 18 19H6Zm1.35-5.2 3.425-9.2a.882.882 0 0 1 .338-.438A.93.93 0 0 1 11.65 4h.7c.2 0 .38.054.537.162a.886.886 0 0 1 .338.438l3.425 9.225c.1.283.067.55-.1.8a.795.795 0 0 1-.7.375.89.89 0 0 1-.512-.162A.882.882 0 0 1 15 14.4l-.75-2.2H9.8L9 14.425a.838.838 0 0 1-.325.425c-.15.1-.317.15-.5.15a.84.84 0 0 1-.738-.387.815.815 0 0 1-.087-.813Zm3-3.2h3.3l-1.6-4.55h-.1l-1.6 4.55Z"
@@ -14,4 +16,4 @@ function TextFormattingIcon(props) {
 }
 ;
 TextFormattingIcon.displayName = "TextFormattingIcon";
-module.exports = TextFormattingIcon;
\ No newline at end of file
+module.exports = React.forwardRef(TextFormattingIcon);
\ No newline at end of file
diff --git a/assets/web/icons/text-formatting.d.ts b/assets/web/icons/text-formatting.d.ts
index c306d406..94d3bbaa 100644
--- a/assets/web/icons/text-formatting.d.ts
+++ b/assets/web/icons/text-formatting.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * text-formatting.svg
  */
-declare const TextFormattingIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const TextFormattingIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default TextFormattingIcon;
diff --git a/assets/web/icons/text-formatting.js b/assets/web/icons/text-formatting.js
index adc7f472..1fb2cbd2 100644
--- a/assets/web/icons/text-formatting.js
+++ b/assets/web/icons/text-formatting.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function TextFormattingIcon(props) {
+function TextFormattingIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M6 19a.967.967 0 0 1-.713-.288A.968.968 0 0 1 5 18a.97.97 0 0 1 .287-.712A.967.967 0 0 1 6 17h12c.283 0 .52.096.712.288.192.191.288.429.288.712s-.096.52-.288.712A.968.968 0 0 1 18 19H6Zm1.35-5.2 3.425-9.2a.882.882 0 0 1 .338-.438A.93.93 0 0 1 11.65 4h.7c.2 0 .38.054.537.162a.886.886 0 0 1 .338.438l3.425 9.225c.1.283.067.55-.1.8a.795.795 0 0 1-.7.375.89.89 0 0 1-.512-.162A.882.882 0 0 1 15 14.4l-.75-2.2H9.8L9 14.425a.838.838 0 0 1-.325.425c-.15.1-.317.15-.5.15a.84.84 0 0 1-.738-.387.815.815 0 0 1-.087-.813Zm3-3.2h3.3l-1.6-4.55h-.1l-1.6 4.55Z"
@@ -14,4 +16,4 @@ function TextFormattingIcon(props) {
 }
 ;
 TextFormattingIcon.displayName = "TextFormattingIcon";
-export default TextFormattingIcon;
\ No newline at end of file
+export default forwardRef(TextFormattingIcon);
\ No newline at end of file
diff --git a/assets/web/icons/threads-solid.cjs b/assets/web/icons/threads-solid.cjs
index dce2a96f..9fd1e55d 100644
--- a/assets/web/icons/threads-solid.cjs
+++ b/assets/web/icons/threads-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ThreadsSolidIcon(props) {
+var React = require("react");
+function ThreadsSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
@@ -14,4 +16,4 @@ function ThreadsSolidIcon(props) {
 }
 ;
 ThreadsSolidIcon.displayName = "ThreadsSolidIcon";
-module.exports = ThreadsSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ThreadsSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/threads-solid.d.ts b/assets/web/icons/threads-solid.d.ts
index 080fc558..cef83983 100644
--- a/assets/web/icons/threads-solid.d.ts
+++ b/assets/web/icons/threads-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * threads-solid.svg
  */
-declare const ThreadsSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ThreadsSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ThreadsSolidIcon;
diff --git a/assets/web/icons/threads-solid.js b/assets/web/icons/threads-solid.js
index fe6fea56..5243b8db 100644
--- a/assets/web/icons/threads-solid.js
+++ b/assets/web/icons/threads-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ThreadsSolidIcon(props) {
+function ThreadsSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
@@ -14,4 +16,4 @@ function ThreadsSolidIcon(props) {
 }
 ;
 ThreadsSolidIcon.displayName = "ThreadsSolidIcon";
-export default ThreadsSolidIcon;
\ No newline at end of file
+export default forwardRef(ThreadsSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/threads.cjs b/assets/web/icons/threads.cjs
index 9b5298e7..079126e3 100644
--- a/assets/web/icons/threads.cjs
+++ b/assets/web/icons/threads.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ThreadsIcon(props) {
+var React = require("react");
+function ThreadsIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M7 10a.968.968 0 0 1-.713-.287A.968.968 0 0 1 6 9c0-.283.096-.52.287-.713A.968.968 0 0 1 7 8h10a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 17 10H7Zm0 4a.967.967 0 0 1-.713-.287A.968.968 0 0 1 6 13c0-.283.096-.52.287-.713A.967.967 0 0 1 7 12h6c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0 1 13 14H7Z"
@@ -16,4 +18,4 @@ function ThreadsIcon(props) {
 }
 ;
 ThreadsIcon.displayName = "ThreadsIcon";
-module.exports = ThreadsIcon;
\ No newline at end of file
+module.exports = React.forwardRef(ThreadsIcon);
\ No newline at end of file
diff --git a/assets/web/icons/threads.d.ts b/assets/web/icons/threads.d.ts
index 1ffa4168..a19635ce 100644
--- a/assets/web/icons/threads.d.ts
+++ b/assets/web/icons/threads.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * threads.svg
  */
-declare const ThreadsIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ThreadsIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ThreadsIcon;
diff --git a/assets/web/icons/threads.js b/assets/web/icons/threads.js
index 0e5c9ff2..4f9b00ff 100644
--- a/assets/web/icons/threads.js
+++ b/assets/web/icons/threads.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function ThreadsIcon(props) {
+function ThreadsIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M7 10a.968.968 0 0 1-.713-.287A.968.968 0 0 1 6 9c0-.283.096-.52.287-.713A.968.968 0 0 1 7 8h10a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 17 10H7Zm0 4a.967.967 0 0 1-.713-.287A.968.968 0 0 1 6 13c0-.283.096-.52.287-.713A.967.967 0 0 1 7 12h6c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0 1 13 14H7Z"
@@ -16,4 +18,4 @@ function ThreadsIcon(props) {
 }
 ;
 ThreadsIcon.displayName = "ThreadsIcon";
-export default ThreadsIcon;
\ No newline at end of file
+export default forwardRef(ThreadsIcon);
\ No newline at end of file
diff --git a/assets/web/icons/time.cjs b/assets/web/icons/time.cjs
index 0e60715d..c2aa0f49 100644
--- a/assets/web/icons/time.cjs
+++ b/assets/web/icons/time.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function TimeIcon(props) {
+var React = require("react");
+function TimeIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M13 8a1 1 0 1 0-2 0v4a1 1 0 0 0 .293.707l2.83 2.83a1 1 0 0 0 1.414-1.414L13 11.586V8Z"
@@ -18,4 +20,4 @@ function TimeIcon(props) {
 }
 ;
 TimeIcon.displayName = "TimeIcon";
-module.exports = TimeIcon;
\ No newline at end of file
+module.exports = React.forwardRef(TimeIcon);
\ No newline at end of file
diff --git a/assets/web/icons/time.d.ts b/assets/web/icons/time.d.ts
index 041bae8d..f901622e 100644
--- a/assets/web/icons/time.d.ts
+++ b/assets/web/icons/time.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * time.svg
  */
-declare const TimeIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const TimeIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default TimeIcon;
diff --git a/assets/web/icons/time.js b/assets/web/icons/time.js
index dd7f94de..7e732583 100644
--- a/assets/web/icons/time.js
+++ b/assets/web/icons/time.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function TimeIcon(props) {
+function TimeIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M13 8a1 1 0 1 0-2 0v4a1 1 0 0 0 .293.707l2.83 2.83a1 1 0 0 0 1.414-1.414L13 11.586V8Z"
@@ -18,4 +20,4 @@ function TimeIcon(props) {
 }
 ;
 TimeIcon.displayName = "TimeIcon";
-export default TimeIcon;
\ No newline at end of file
+export default forwardRef(TimeIcon);
\ No newline at end of file
diff --git a/assets/web/icons/underline.cjs b/assets/web/icons/underline.cjs
index a2c5a357..bd2c50c3 100644
--- a/assets/web/icons/underline.cjs
+++ b/assets/web/icons/underline.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function UnderlineIcon(props) {
+var React = require("react");
+function UnderlineIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M6 21a.967.967 0 0 1-.713-.288A.968.968 0 0 1 5 20a.97.97 0 0 1 .287-.712A.967.967 0 0 1 6 19h12c.283 0 .52.096.712.288.192.191.288.429.288.712s-.096.52-.288.712A.968.968 0 0 1 18 21H6Zm6-4c-1.683 0-2.992-.525-3.925-1.575-.933-1.05-1.4-2.442-1.4-4.175V4.275c0-.35.13-.65.388-.9A1.27 1.27 0 0 1 7.974 3c.35 0 .65.125.9.375s.375.55.375.9V11.4c0 .933.233 1.692.7 2.275.467.583 1.15.875 2.05.875.9 0 1.583-.292 2.05-.875.467-.583.7-1.342.7-2.275V4.275c0-.35.13-.65.387-.9A1.27 1.27 0 0 1 16.05 3c.35 0 .65.125.9.375s.375.55.375.9v6.975c0 1.733-.467 3.125-1.4 4.175C14.992 16.475 13.683 17 12 17Z"
@@ -14,4 +16,4 @@ function UnderlineIcon(props) {
 }
 ;
 UnderlineIcon.displayName = "UnderlineIcon";
-module.exports = UnderlineIcon;
\ No newline at end of file
+module.exports = React.forwardRef(UnderlineIcon);
\ No newline at end of file
diff --git a/assets/web/icons/underline.d.ts b/assets/web/icons/underline.d.ts
index cd773a80..ccab3a92 100644
--- a/assets/web/icons/underline.d.ts
+++ b/assets/web/icons/underline.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * underline.svg
  */
-declare const UnderlineIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const UnderlineIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default UnderlineIcon;
diff --git a/assets/web/icons/underline.js b/assets/web/icons/underline.js
index 7d40961c..482ba4b1 100644
--- a/assets/web/icons/underline.js
+++ b/assets/web/icons/underline.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function UnderlineIcon(props) {
+function UnderlineIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M6 21a.967.967 0 0 1-.713-.288A.968.968 0 0 1 5 20a.97.97 0 0 1 .287-.712A.967.967 0 0 1 6 19h12c.283 0 .52.096.712.288.192.191.288.429.288.712s-.096.52-.288.712A.968.968 0 0 1 18 21H6Zm6-4c-1.683 0-2.992-.525-3.925-1.575-.933-1.05-1.4-2.442-1.4-4.175V4.275c0-.35.13-.65.388-.9A1.27 1.27 0 0 1 7.974 3c.35 0 .65.125.9.375s.375.55.375.9V11.4c0 .933.233 1.692.7 2.275.467.583 1.15.875 2.05.875.9 0 1.583-.292 2.05-.875.467-.583.7-1.342.7-2.275V4.275c0-.35.13-.65.387-.9A1.27 1.27 0 0 1 16.05 3c.35 0 .65.125.9.375s.375.55.375.9v6.975c0 1.733-.467 3.125-1.4 4.175C14.992 16.475 13.683 17 12 17Z"
@@ -14,4 +16,4 @@ function UnderlineIcon(props) {
 }
 ;
 UnderlineIcon.displayName = "UnderlineIcon";
-export default UnderlineIcon;
\ No newline at end of file
+export default forwardRef(UnderlineIcon);
\ No newline at end of file
diff --git a/assets/web/icons/unknown-solid.cjs b/assets/web/icons/unknown-solid.cjs
index f6d50dc0..34b0c3f6 100644
--- a/assets/web/icons/unknown-solid.cjs
+++ b/assets/web/icons/unknown-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function UnknownSolidIcon(props) {
+var React = require("react");
+function UnknownSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12.999 13.011v-.004.005Zm-9.412 7.402C3.98 20.803 4.45 21 5 21h14c.55 0 1.02-.196 1.413-.587A1.93 1.93 0 0 0 21 19V5c0-.55-.196-1.02-.587-1.413A1.926 1.926 0 0 0 19 3H5c-.55 0-1.02.196-1.413.587A1.926 1.926 0 0 0 3 5v14c0 .55.196 1.02.587 1.413ZM12 9a1 1 0 0 0-1 1 1 1 0 1 1-2 0 3 3 0 1 1 4.44 2.633 1.404 1.404 0 0 0-.383.288.3.3 0 0 0-.057.085A1 1 0 0 1 11 13c0-.58.253-1.047.539-1.38.281-.33.63-.572.94-.742A1 1 0 0 0 12 9Zm1 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
@@ -14,4 +16,4 @@ function UnknownSolidIcon(props) {
 }
 ;
 UnknownSolidIcon.displayName = "UnknownSolidIcon";
-module.exports = UnknownSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(UnknownSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/unknown-solid.d.ts b/assets/web/icons/unknown-solid.d.ts
index c0e02bf7..3720e105 100644
--- a/assets/web/icons/unknown-solid.d.ts
+++ b/assets/web/icons/unknown-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * unknown-solid.svg
  */
-declare const UnknownSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const UnknownSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default UnknownSolidIcon;
diff --git a/assets/web/icons/unknown-solid.js b/assets/web/icons/unknown-solid.js
index 3f47887b..a96a724a 100644
--- a/assets/web/icons/unknown-solid.js
+++ b/assets/web/icons/unknown-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function UnknownSolidIcon(props) {
+function UnknownSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M12.999 13.011v-.004.005Zm-9.412 7.402C3.98 20.803 4.45 21 5 21h14c.55 0 1.02-.196 1.413-.587A1.93 1.93 0 0 0 21 19V5c0-.55-.196-1.02-.587-1.413A1.926 1.926 0 0 0 19 3H5c-.55 0-1.02.196-1.413.587A1.926 1.926 0 0 0 3 5v14c0 .55.196 1.02.587 1.413ZM12 9a1 1 0 0 0-1 1 1 1 0 1 1-2 0 3 3 0 1 1 4.44 2.633 1.404 1.404 0 0 0-.383.288.3.3 0 0 0-.057.085A1 1 0 0 1 11 13c0-.58.253-1.047.539-1.38.281-.33.63-.572.94-.742A1 1 0 0 0 12 9Zm1 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
@@ -14,4 +16,4 @@ function UnknownSolidIcon(props) {
 }
 ;
 UnknownSolidIcon.displayName = "UnknownSolidIcon";
-export default UnknownSolidIcon;
\ No newline at end of file
+export default forwardRef(UnknownSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/unknown.cjs b/assets/web/icons/unknown.cjs
index 7b8c7ebb..abd8b14c 100644
--- a/assets/web/icons/unknown.cjs
+++ b/assets/web/icons/unknown.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function UnknownIcon(props) {
+var React = require("react");
+function UnknownIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h14c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm0-2h14V5H5v14Z"
@@ -16,4 +18,4 @@ function UnknownIcon(props) {
 }
 ;
 UnknownIcon.displayName = "UnknownIcon";
-module.exports = UnknownIcon;
\ No newline at end of file
+module.exports = React.forwardRef(UnknownIcon);
\ No newline at end of file
diff --git a/assets/web/icons/unknown.d.ts b/assets/web/icons/unknown.d.ts
index 19b95868..30afd674 100644
--- a/assets/web/icons/unknown.d.ts
+++ b/assets/web/icons/unknown.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * unknown.svg
  */
-declare const UnknownIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const UnknownIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default UnknownIcon;
diff --git a/assets/web/icons/unknown.js b/assets/web/icons/unknown.js
index 39d53a33..e7d7dc76 100644
--- a/assets/web/icons/unknown.js
+++ b/assets/web/icons/unknown.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function UnknownIcon(props) {
+function UnknownIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h14c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm0-2h14V5H5v14Z"
@@ -16,4 +18,4 @@ function UnknownIcon(props) {
 }
 ;
 UnknownIcon.displayName = "UnknownIcon";
-export default UnknownIcon;
\ No newline at end of file
+export default forwardRef(UnknownIcon);
\ No newline at end of file
diff --git a/assets/web/icons/user-add-solid.cjs b/assets/web/icons/user-add-solid.cjs
index 49b677be..50e9fabe 100644
--- a/assets/web/icons/user-add-solid.cjs
+++ b/assets/web/icons/user-add-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function UserAddSolidIcon(props) {
+var React = require("react");
+function UserAddSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M10 12c-1.1 0-2.042-.392-2.825-1.175C6.392 10.042 6 9.1 6 8s.392-2.042 1.175-2.825C7.958 4.392 8.9 4 10 4s2.042.392 2.825 1.175C13.608 5.958 14 6.9 14 8s-.392 2.042-1.175 2.825C12.042 11.608 11.1 12 10 12Zm-8 6v-.8c0-.567.146-1.087.438-1.563A2.911 2.911 0 0 1 3.6 14.55a14.843 14.843 0 0 1 3.15-1.163A13.76 13.76 0 0 1 10 13c1.1 0 2.183.13 3.25.387 1.067.259 2.117.646 3.15 1.163.483.25.87.612 1.163 1.087.291.476.437.996.437 1.563v.8c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 16 20H4c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18Zm15-7h2v2c0 .283.096.52.288.713.191.191.429.287.712.287s.52-.096.712-.287A.968.968 0 0 0 21 13v-2h2a.97.97 0 0 0 .712-.287A.968.968 0 0 0 24 10a.967.967 0 0 0-.288-.713A.968.968 0 0 0 23 9h-2V7a.967.967 0 0 0-.288-.713A.968.968 0 0 0 20 6a.968.968 0 0 0-.712.287A.967.967 0 0 0 19 7v2h-2a.968.968 0 0 0-.712.287A.967.967 0 0 0 16 10c0 .283.096.52.288.713A.968.968 0 0 0 17 11Z"
@@ -14,4 +16,4 @@ function UserAddSolidIcon(props) {
 }
 ;
 UserAddSolidIcon.displayName = "UserAddSolidIcon";
-module.exports = UserAddSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(UserAddSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/user-add-solid.d.ts b/assets/web/icons/user-add-solid.d.ts
index 06ff1fae..4f632b78 100644
--- a/assets/web/icons/user-add-solid.d.ts
+++ b/assets/web/icons/user-add-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * user-add-solid.svg
  */
-declare const UserAddSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const UserAddSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default UserAddSolidIcon;
diff --git a/assets/web/icons/user-add-solid.js b/assets/web/icons/user-add-solid.js
index 898cbdcc..51f47b16 100644
--- a/assets/web/icons/user-add-solid.js
+++ b/assets/web/icons/user-add-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function UserAddSolidIcon(props) {
+function UserAddSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M10 12c-1.1 0-2.042-.392-2.825-1.175C6.392 10.042 6 9.1 6 8s.392-2.042 1.175-2.825C7.958 4.392 8.9 4 10 4s2.042.392 2.825 1.175C13.608 5.958 14 6.9 14 8s-.392 2.042-1.175 2.825C12.042 11.608 11.1 12 10 12Zm-8 6v-.8c0-.567.146-1.087.438-1.563A2.911 2.911 0 0 1 3.6 14.55a14.843 14.843 0 0 1 3.15-1.163A13.76 13.76 0 0 1 10 13c1.1 0 2.183.13 3.25.387 1.067.259 2.117.646 3.15 1.163.483.25.87.612 1.163 1.087.291.476.437.996.437 1.563v.8c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 16 20H4c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18Zm15-7h2v2c0 .283.096.52.288.713.191.191.429.287.712.287s.52-.096.712-.287A.968.968 0 0 0 21 13v-2h2a.97.97 0 0 0 .712-.287A.968.968 0 0 0 24 10a.967.967 0 0 0-.288-.713A.968.968 0 0 0 23 9h-2V7a.967.967 0 0 0-.288-.713A.968.968 0 0 0 20 6a.968.968 0 0 0-.712.287A.967.967 0 0 0 19 7v2h-2a.968.968 0 0 0-.712.287A.967.967 0 0 0 16 10c0 .283.096.52.288.713A.968.968 0 0 0 17 11Z"
@@ -14,4 +16,4 @@ function UserAddSolidIcon(props) {
 }
 ;
 UserAddSolidIcon.displayName = "UserAddSolidIcon";
-export default UserAddSolidIcon;
\ No newline at end of file
+export default forwardRef(UserAddSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/user-add.cjs b/assets/web/icons/user-add.cjs
index b7261e0b..3532786d 100644
--- a/assets/web/icons/user-add.cjs
+++ b/assets/web/icons/user-add.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function UserAddIcon(props) {
+var React = require("react");
+function UserAddIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M10 12c-1.1 0-2.042-.392-2.825-1.175C6.392 10.042 6 9.1 6 8s.392-2.042 1.175-2.825C7.958 4.392 8.9 4 10 4s2.042.392 2.825 1.175C13.608 5.958 14 6.9 14 8s-.392 2.042-1.175 2.825C12.042 11.608 11.1 12 10 12Zm-8 6v-.8c0-.567.146-1.087.438-1.563A2.911 2.911 0 0 1 3.6 14.55a14.843 14.843 0 0 1 3.15-1.163A13.76 13.76 0 0 1 10 13c1.1 0 2.183.13 3.25.387 1.067.259 2.117.646 3.15 1.163.483.25.87.612 1.163 1.087.291.476.437.996.437 1.563v.8c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 16 20H4c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18Zm2 0h12v-.8a.973.973 0 0 0-.5-.85c-.9-.45-1.808-.787-2.725-1.012a11.6 11.6 0 0 0-5.55 0c-.917.225-1.825.562-2.725 1.012a.973.973 0 0 0-.5.85v.8Zm6-8c.55 0 1.02-.196 1.412-.588C11.804 9.021 12 8.55 12 8c0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 10 6c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 8 8c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Zm7 1h2v2c0 .283.096.52.288.713.191.191.429.287.712.287s.52-.096.712-.287A.968.968 0 0 0 21 13v-2h2a.97.97 0 0 0 .712-.287A.968.968 0 0 0 24 10a.967.967 0 0 0-.288-.713A.968.968 0 0 0 23 9h-2V7a.967.967 0 0 0-.288-.713A.968.968 0 0 0 20 6a.968.968 0 0 0-.712.287A.967.967 0 0 0 19 7v2h-2a.968.968 0 0 0-.712.287A.967.967 0 0 0 16 10c0 .283.096.52.288.713A.968.968 0 0 0 17 11Z"
@@ -14,4 +16,4 @@ function UserAddIcon(props) {
 }
 ;
 UserAddIcon.displayName = "UserAddIcon";
-module.exports = UserAddIcon;
\ No newline at end of file
+module.exports = React.forwardRef(UserAddIcon);
\ No newline at end of file
diff --git a/assets/web/icons/user-add.d.ts b/assets/web/icons/user-add.d.ts
index 154776d7..48664cf5 100644
--- a/assets/web/icons/user-add.d.ts
+++ b/assets/web/icons/user-add.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * user-add.svg
  */
-declare const UserAddIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const UserAddIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default UserAddIcon;
diff --git a/assets/web/icons/user-add.js b/assets/web/icons/user-add.js
index 839aa141..6325731f 100644
--- a/assets/web/icons/user-add.js
+++ b/assets/web/icons/user-add.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function UserAddIcon(props) {
+function UserAddIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M10 12c-1.1 0-2.042-.392-2.825-1.175C6.392 10.042 6 9.1 6 8s.392-2.042 1.175-2.825C7.958 4.392 8.9 4 10 4s2.042.392 2.825 1.175C13.608 5.958 14 6.9 14 8s-.392 2.042-1.175 2.825C12.042 11.608 11.1 12 10 12Zm-8 6v-.8c0-.567.146-1.087.438-1.563A2.911 2.911 0 0 1 3.6 14.55a14.843 14.843 0 0 1 3.15-1.163A13.76 13.76 0 0 1 10 13c1.1 0 2.183.13 3.25.387 1.067.259 2.117.646 3.15 1.163.483.25.87.612 1.163 1.087.291.476.437.996.437 1.563v.8c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 16 20H4c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18Zm2 0h12v-.8a.973.973 0 0 0-.5-.85c-.9-.45-1.808-.787-2.725-1.012a11.6 11.6 0 0 0-5.55 0c-.917.225-1.825.562-2.725 1.012a.973.973 0 0 0-.5.85v.8Zm6-8c.55 0 1.02-.196 1.412-.588C11.804 9.021 12 8.55 12 8c0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 10 6c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 8 8c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Zm7 1h2v2c0 .283.096.52.288.713.191.191.429.287.712.287s.52-.096.712-.287A.968.968 0 0 0 21 13v-2h2a.97.97 0 0 0 .712-.287A.968.968 0 0 0 24 10a.967.967 0 0 0-.288-.713A.968.968 0 0 0 23 9h-2V7a.967.967 0 0 0-.288-.713A.968.968 0 0 0 20 6a.968.968 0 0 0-.712.287A.967.967 0 0 0 19 7v2h-2a.968.968 0 0 0-.712.287A.967.967 0 0 0 16 10c0 .283.096.52.288.713A.968.968 0 0 0 17 11Z"
@@ -14,4 +16,4 @@ function UserAddIcon(props) {
 }
 ;
 UserAddIcon.displayName = "UserAddIcon";
-export default UserAddIcon;
\ No newline at end of file
+export default forwardRef(UserAddIcon);
\ No newline at end of file
diff --git a/assets/web/icons/user-profile-solid.cjs b/assets/web/icons/user-profile-solid.cjs
index 289572c4..d55ed165 100644
--- a/assets/web/icons/user-profile-solid.cjs
+++ b/assets/web/icons/user-profile-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function UserProfileSolidIcon(props) {
+var React = require("react");
+function UserProfileSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12 15c-1.1 0-2.042-.392-2.825-1.175C8.392 13.042 8 12.1 8 11s.392-2.042 1.175-2.825C9.958 7.392 10.9 7 12 7s2.042.392 2.825 1.175C15.608 8.958 16 9.9 16 11s-.392 2.042-1.175 2.825C14.042 14.608 13.1 15 12 15Z"
@@ -16,4 +18,4 @@ function UserProfileSolidIcon(props) {
 }
 ;
 UserProfileSolidIcon.displayName = "UserProfileSolidIcon";
-module.exports = UserProfileSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(UserProfileSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/user-profile-solid.d.ts b/assets/web/icons/user-profile-solid.d.ts
index 952d6c19..a4391947 100644
--- a/assets/web/icons/user-profile-solid.d.ts
+++ b/assets/web/icons/user-profile-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * user-profile-solid.svg
  */
-declare const UserProfileSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const UserProfileSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default UserProfileSolidIcon;
diff --git a/assets/web/icons/user-profile-solid.js b/assets/web/icons/user-profile-solid.js
index ff49c7f2..52d036e3 100644
--- a/assets/web/icons/user-profile-solid.js
+++ b/assets/web/icons/user-profile-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function UserProfileSolidIcon(props) {
+function UserProfileSolidIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M12 15c-1.1 0-2.042-.392-2.825-1.175C8.392 13.042 8 12.1 8 11s.392-2.042 1.175-2.825C9.958 7.392 10.9 7 12 7s2.042.392 2.825 1.175C15.608 8.958 16 9.9 16 11s-.392 2.042-1.175 2.825C14.042 14.608 13.1 15 12 15Z"
@@ -16,4 +18,4 @@ function UserProfileSolidIcon(props) {
 }
 ;
 UserProfileSolidIcon.displayName = "UserProfileSolidIcon";
-export default UserProfileSolidIcon;
\ No newline at end of file
+export default forwardRef(UserProfileSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/user-profile.cjs b/assets/web/icons/user-profile.cjs
index 4f1c9e7f..ad9cb51e 100644
--- a/assets/web/icons/user-profile.cjs
+++ b/assets/web/icons/user-profile.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function UserProfileIcon(props) {
+var React = require("react");
+function UserProfileIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M9.175 13.825C9.958 14.608 10.9 15 12 15s2.042-.392 2.825-1.175C15.608 13.042 16 12.1 16 11s-.392-2.042-1.175-2.825C14.042 7.392 13.1 7 12 7s-2.042.392-2.825 1.175C8.392 8.958 8 9.9 8 11s.392 2.042 1.175 2.825Zm4.237-1.412A1.926 1.926 0 0 1 12 13c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 11c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 9c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412Z"
@@ -18,4 +20,4 @@ function UserProfileIcon(props) {
 }
 ;
 UserProfileIcon.displayName = "UserProfileIcon";
-module.exports = UserProfileIcon;
\ No newline at end of file
+module.exports = React.forwardRef(UserProfileIcon);
\ No newline at end of file
diff --git a/assets/web/icons/user-profile.d.ts b/assets/web/icons/user-profile.d.ts
index 5980ff5f..8651e454 100644
--- a/assets/web/icons/user-profile.d.ts
+++ b/assets/web/icons/user-profile.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * user-profile.svg
  */
-declare const UserProfileIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const UserProfileIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default UserProfileIcon;
diff --git a/assets/web/icons/user-profile.js b/assets/web/icons/user-profile.js
index aa7d76af..7d4d12f0 100644
--- a/assets/web/icons/user-profile.js
+++ b/assets/web/icons/user-profile.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function UserProfileIcon(props) {
+function UserProfileIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M9.175 13.825C9.958 14.608 10.9 15 12 15s2.042-.392 2.825-1.175C15.608 13.042 16 12.1 16 11s-.392-2.042-1.175-2.825C14.042 7.392 13.1 7 12 7s-2.042.392-2.825 1.175C8.392 8.958 8 9.9 8 11s.392 2.042 1.175 2.825Zm4.237-1.412A1.926 1.926 0 0 1 12 13c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 11c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 9c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412Z"
@@ -18,4 +20,4 @@ function UserProfileIcon(props) {
 }
 ;
 UserProfileIcon.displayName = "UserProfileIcon";
-export default UserProfileIcon;
\ No newline at end of file
+export default forwardRef(UserProfileIcon);
\ No newline at end of file
diff --git a/assets/web/icons/user-solid.cjs b/assets/web/icons/user-solid.cjs
index f75a5a57..14a14365 100644
--- a/assets/web/icons/user-solid.cjs
+++ b/assets/web/icons/user-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function UserSolidIcon(props) {
+var React = require("react");
+function UserSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12 12c-1.1 0-2.042-.392-2.825-1.175C8.392 10.042 8 9.1 8 8s.392-2.042 1.175-2.825C9.958 4.392 10.9 4 12 4s2.042.392 2.825 1.175C15.608 5.958 16 6.9 16 8s-.392 2.042-1.175 2.825C14.042 11.608 13.1 12 12 12Zm-8 6v-.8c0-.567.146-1.087.438-1.563A2.911 2.911 0 0 1 5.6 14.55a14.843 14.843 0 0 1 3.15-1.163A13.76 13.76 0 0 1 12 13c1.1 0 2.183.13 3.25.387 1.067.259 2.117.646 3.15 1.163.483.25.87.612 1.163 1.087.291.476.437.996.437 1.563v.8c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 20H6c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 18Z"
@@ -14,4 +16,4 @@ function UserSolidIcon(props) {
 }
 ;
 UserSolidIcon.displayName = "UserSolidIcon";
-module.exports = UserSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(UserSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/user-solid.d.ts b/assets/web/icons/user-solid.d.ts
index 2287a447..41030159 100644
--- a/assets/web/icons/user-solid.d.ts
+++ b/assets/web/icons/user-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * user-solid.svg
  */
-declare const UserSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const UserSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default UserSolidIcon;
diff --git a/assets/web/icons/user-solid.js b/assets/web/icons/user-solid.js
index 20d0cba5..b651b585 100644
--- a/assets/web/icons/user-solid.js
+++ b/assets/web/icons/user-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function UserSolidIcon(props) {
+function UserSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M12 12c-1.1 0-2.042-.392-2.825-1.175C8.392 10.042 8 9.1 8 8s.392-2.042 1.175-2.825C9.958 4.392 10.9 4 12 4s2.042.392 2.825 1.175C15.608 5.958 16 6.9 16 8s-.392 2.042-1.175 2.825C14.042 11.608 13.1 12 12 12Zm-8 6v-.8c0-.567.146-1.087.438-1.563A2.911 2.911 0 0 1 5.6 14.55a14.843 14.843 0 0 1 3.15-1.163A13.76 13.76 0 0 1 12 13c1.1 0 2.183.13 3.25.387 1.067.259 2.117.646 3.15 1.163.483.25.87.612 1.163 1.087.291.476.437.996.437 1.563v.8c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 20H6c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 18Z"
@@ -14,4 +16,4 @@ function UserSolidIcon(props) {
 }
 ;
 UserSolidIcon.displayName = "UserSolidIcon";
-export default UserSolidIcon;
\ No newline at end of file
+export default forwardRef(UserSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/user.cjs b/assets/web/icons/user.cjs
index 0bad483c..e9f078ce 100644
--- a/assets/web/icons/user.cjs
+++ b/assets/web/icons/user.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function UserIcon(props) {
+var React = require("react");
+function UserIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12 12c-1.1 0-2.042-.392-2.825-1.175C8.392 10.042 8 9.1 8 8s.392-2.042 1.175-2.825C9.958 4.392 10.9 4 12 4s2.042.392 2.825 1.175C15.608 5.958 16 6.9 16 8s-.392 2.042-1.175 2.825C14.042 11.608 13.1 12 12 12Zm-8 6v-.8c0-.567.146-1.087.438-1.563A2.911 2.911 0 0 1 5.6 14.55a14.843 14.843 0 0 1 3.15-1.163A13.76 13.76 0 0 1 12 13c1.1 0 2.183.13 3.25.387 1.067.259 2.117.646 3.15 1.163.483.25.87.612 1.163 1.087.291.476.437.996.437 1.563v.8c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 20H6c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 18Zm2 0h12v-.8a.973.973 0 0 0-.5-.85c-.9-.45-1.808-.787-2.725-1.012a11.6 11.6 0 0 0-5.55 0c-.917.225-1.825.562-2.725 1.012a.973.973 0 0 0-.5.85v.8Zm6-8c.55 0 1.02-.196 1.412-.588C13.804 9.021 14 8.55 14 8c0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 12 6c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 10 8c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z"
@@ -14,4 +16,4 @@ function UserIcon(props) {
 }
 ;
 UserIcon.displayName = "UserIcon";
-module.exports = UserIcon;
\ No newline at end of file
+module.exports = React.forwardRef(UserIcon);
\ No newline at end of file
diff --git a/assets/web/icons/user.d.ts b/assets/web/icons/user.d.ts
index 326c41db..835dd5e1 100644
--- a/assets/web/icons/user.d.ts
+++ b/assets/web/icons/user.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * user.svg
  */
-declare const UserIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const UserIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default UserIcon;
diff --git a/assets/web/icons/user.js b/assets/web/icons/user.js
index 18e8cc02..f2b8e5fa 100644
--- a/assets/web/icons/user.js
+++ b/assets/web/icons/user.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function UserIcon(props) {
+function UserIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M12 12c-1.1 0-2.042-.392-2.825-1.175C8.392 10.042 8 9.1 8 8s.392-2.042 1.175-2.825C9.958 4.392 10.9 4 12 4s2.042.392 2.825 1.175C15.608 5.958 16 6.9 16 8s-.392 2.042-1.175 2.825C14.042 11.608 13.1 12 12 12Zm-8 6v-.8c0-.567.146-1.087.438-1.563A2.911 2.911 0 0 1 5.6 14.55a14.843 14.843 0 0 1 3.15-1.163A13.76 13.76 0 0 1 12 13c1.1 0 2.183.13 3.25.387 1.067.259 2.117.646 3.15 1.163.483.25.87.612 1.163 1.087.291.476.437.996.437 1.563v.8c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 20H6c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 18Zm2 0h12v-.8a.973.973 0 0 0-.5-.85c-.9-.45-1.808-.787-2.725-1.012a11.6 11.6 0 0 0-5.55 0c-.917.225-1.825.562-2.725 1.012a.973.973 0 0 0-.5.85v.8Zm6-8c.55 0 1.02-.196 1.412-.588C13.804 9.021 14 8.55 14 8c0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 12 6c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 10 8c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z"
@@ -14,4 +16,4 @@ function UserIcon(props) {
 }
 ;
 UserIcon.displayName = "UserIcon";
-export default UserIcon;
\ No newline at end of file
+export default forwardRef(UserIcon);
\ No newline at end of file
diff --git a/assets/web/icons/verified.cjs b/assets/web/icons/verified.cjs
index 5ac8234d..2f509c19 100644
--- a/assets/web/icons/verified.cjs
+++ b/assets/web/icons/verified.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function VerifiedIcon(props) {
+var React = require("react");
+function VerifiedIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M8.15 21.75 6.7 19.3l-2.75-.6a.943.943 0 0 1-.6-.387.928.928 0 0 1-.175-.688L3.45 14.8l-1.875-2.15a.934.934 0 0 1-.25-.65c0-.25.084-.467.25-.65L3.45 9.2l-.275-2.825a.928.928 0 0 1 .175-.688.943.943 0 0 1 .6-.387l2.75-.6 1.45-2.45a.983.983 0 0 1 .55-.438.97.97 0 0 1 .7.038l2.6 1.1 2.6-1.1a.97.97 0 0 1 .7-.038.983.983 0 0 1 .55.438L17.3 4.7l2.75.6c.25.05.45.18.6.388.15.208.209.437.175.687L20.55 9.2l1.875 2.15c.167.183.25.4.25.65s-.083.467-.25.65L20.55 14.8l.275 2.825a.928.928 0 0 1-.175.688.943.943 0 0 1-.6.387l-2.75.6-1.45 2.45a.983.983 0 0 1-.55.438.97.97 0 0 1-.7-.038l-2.6-1.1-2.6 1.1a.97.97 0 0 1-.7.038.983.983 0 0 1-.55-.438Zm2.8-9.05L9.5 11.275A.933.933 0 0 0 8.813 11c-.275 0-.513.1-.713.3a.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7l2.15 2.15c.2.2.434.3.7.3.267 0 .5-.1.7-.3l4.25-4.25c.2-.2.296-.433.288-.7a1.055 1.055 0 0 0-.288-.7 1.02 1.02 0 0 0-.712-.313.93.93 0 0 0-.713.288L10.95 12.7Z"
@@ -14,4 +16,4 @@ function VerifiedIcon(props) {
 }
 ;
 VerifiedIcon.displayName = "VerifiedIcon";
-module.exports = VerifiedIcon;
\ No newline at end of file
+module.exports = React.forwardRef(VerifiedIcon);
\ No newline at end of file
diff --git a/assets/web/icons/verified.d.ts b/assets/web/icons/verified.d.ts
index 42efb7fa..0ced5a65 100644
--- a/assets/web/icons/verified.d.ts
+++ b/assets/web/icons/verified.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * verified.svg
  */
-declare const VerifiedIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const VerifiedIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default VerifiedIcon;
diff --git a/assets/web/icons/verified.js b/assets/web/icons/verified.js
index 8984325b..a0cb46ee 100644
--- a/assets/web/icons/verified.js
+++ b/assets/web/icons/verified.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function VerifiedIcon(props) {
+function VerifiedIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M8.15 21.75 6.7 19.3l-2.75-.6a.943.943 0 0 1-.6-.387.928.928 0 0 1-.175-.688L3.45 14.8l-1.875-2.15a.934.934 0 0 1-.25-.65c0-.25.084-.467.25-.65L3.45 9.2l-.275-2.825a.928.928 0 0 1 .175-.688.943.943 0 0 1 .6-.387l2.75-.6 1.45-2.45a.983.983 0 0 1 .55-.438.97.97 0 0 1 .7.038l2.6 1.1 2.6-1.1a.97.97 0 0 1 .7-.038.983.983 0 0 1 .55.438L17.3 4.7l2.75.6c.25.05.45.18.6.388.15.208.209.437.175.687L20.55 9.2l1.875 2.15c.167.183.25.4.25.65s-.083.467-.25.65L20.55 14.8l.275 2.825a.928.928 0 0 1-.175.688.943.943 0 0 1-.6.387l-2.75.6-1.45 2.45a.983.983 0 0 1-.55.438.97.97 0 0 1-.7-.038l-2.6-1.1-2.6 1.1a.97.97 0 0 1-.7.038.983.983 0 0 1-.55-.438Zm2.8-9.05L9.5 11.275A.933.933 0 0 0 8.813 11c-.275 0-.513.1-.713.3a.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7l2.15 2.15c.2.2.434.3.7.3.267 0 .5-.1.7-.3l4.25-4.25c.2-.2.296-.433.288-.7a1.055 1.055 0 0 0-.288-.7 1.02 1.02 0 0 0-.712-.313.93.93 0 0 0-.713.288L10.95 12.7Z"
@@ -14,4 +16,4 @@ function VerifiedIcon(props) {
 }
 ;
 VerifiedIcon.displayName = "VerifiedIcon";
-export default VerifiedIcon;
\ No newline at end of file
+export default forwardRef(VerifiedIcon);
\ No newline at end of file
diff --git a/assets/web/icons/video-call-declined-solid.cjs b/assets/web/icons/video-call-declined-solid.cjs
index ef32da20..232ea762 100644
--- a/assets/web/icons/video-call-declined-solid.cjs
+++ b/assets/web/icons/video-call-declined-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function VideoCallDeclinedSolidIcon(props) {
+var React = require("react");
+function VideoCallDeclinedSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M2 8a4 4 0 0 1 4-4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8Zm10.828 6.828c.2-.2.3-.436.3-.707 0-.27-.1-.506-.3-.707L11.414 12l1.414-1.414c.2-.2.3-.436.3-.707 0-.271-.1-.507-.3-.707a.969.969 0 0 0-.707-.301c-.27 0-.506.1-.707.3L10 10.587 8.586 9.172a.969.969 0 0 0-.707-.301c-.271 0-.507.1-.707.3-.2.2-.3.437-.3.708 0 .27.1.506.3.707L8.586 12l-1.414 1.414c-.2.2-.3.436-.3.707 0 .271.1.507.3.707.2.2.436.3.707.3.27 0 .506-.1.707-.3L10 13.414l1.414 1.414c.2.2.436.3.707.3.271 0 .507-.1.707-.3Z"
@@ -14,4 +16,4 @@ function VideoCallDeclinedSolidIcon(props) {
 }
 ;
 VideoCallDeclinedSolidIcon.displayName = "VideoCallDeclinedSolidIcon";
-module.exports = VideoCallDeclinedSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(VideoCallDeclinedSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/video-call-declined-solid.d.ts b/assets/web/icons/video-call-declined-solid.d.ts
index 664410bc..65163590 100644
--- a/assets/web/icons/video-call-declined-solid.d.ts
+++ b/assets/web/icons/video-call-declined-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * video-call-declined-solid.svg
  */
-declare const VideoCallDeclinedSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const VideoCallDeclinedSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default VideoCallDeclinedSolidIcon;
diff --git a/assets/web/icons/video-call-declined-solid.js b/assets/web/icons/video-call-declined-solid.js
index 0f8b2363..8e3006c6 100644
--- a/assets/web/icons/video-call-declined-solid.js
+++ b/assets/web/icons/video-call-declined-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function VideoCallDeclinedSolidIcon(props) {
+function VideoCallDeclinedSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M2 8a4 4 0 0 1 4-4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8Zm10.828 6.828c.2-.2.3-.436.3-.707 0-.27-.1-.506-.3-.707L11.414 12l1.414-1.414c.2-.2.3-.436.3-.707 0-.271-.1-.507-.3-.707a.969.969 0 0 0-.707-.301c-.27 0-.506.1-.707.3L10 10.587 8.586 9.172a.969.969 0 0 0-.707-.301c-.271 0-.507.1-.707.3-.2.2-.3.437-.3.708 0 .27.1.506.3.707L8.586 12l-1.414 1.414c-.2.2-.3.436-.3.707 0 .271.1.507.3.707.2.2.436.3.707.3.27 0 .506-.1.707-.3L10 13.414l1.414 1.414c.2.2.436.3.707.3.271 0 .507-.1.707-.3Z"
@@ -14,4 +16,4 @@ function VideoCallDeclinedSolidIcon(props) {
 }
 ;
 VideoCallDeclinedSolidIcon.displayName = "VideoCallDeclinedSolidIcon";
-export default VideoCallDeclinedSolidIcon;
\ No newline at end of file
+export default forwardRef(VideoCallDeclinedSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/video-call-missed-solid.cjs b/assets/web/icons/video-call-missed-solid.cjs
index 78549fed..1f2c2909 100644
--- a/assets/web/icons/video-call-missed-solid.cjs
+++ b/assets/web/icons/video-call-missed-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function VideoCallMissedSolidIcon(props) {
+var React = require("react");
+function VideoCallMissedSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M2 8a4 4 0 0 1 4-4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8Zm8.7 5.15L8.5 11H9c.283 0 .52-.096.713-.287A.968.968 0 0 0 10 10a.968.968 0 0 0-.287-.713A.968.968 0 0 0 9 9H6a.968.968 0 0 0-.713.287A.968.968 0 0 0 5 10v3c0 .283.096.52.287.713.192.191.43.287.713.287s.52-.096.713-.287A.968.968 0 0 0 7 13v-.7l3 3a1.034 1.034 0 0 0 1.088.2.773.773 0 0 0 .312-.225l3.125-3.15a.918.918 0 0 0 .275-.675c0-.267-.1-.5-.3-.7a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275l-2.4 2.4Z"
@@ -14,4 +16,4 @@ function VideoCallMissedSolidIcon(props) {
 }
 ;
 VideoCallMissedSolidIcon.displayName = "VideoCallMissedSolidIcon";
-module.exports = VideoCallMissedSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(VideoCallMissedSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/video-call-missed-solid.d.ts b/assets/web/icons/video-call-missed-solid.d.ts
index f4065682..e5335332 100644
--- a/assets/web/icons/video-call-missed-solid.d.ts
+++ b/assets/web/icons/video-call-missed-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * video-call-missed-solid.svg
  */
-declare const VideoCallMissedSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const VideoCallMissedSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default VideoCallMissedSolidIcon;
diff --git a/assets/web/icons/video-call-missed-solid.js b/assets/web/icons/video-call-missed-solid.js
index b939617a..ce396ca2 100644
--- a/assets/web/icons/video-call-missed-solid.js
+++ b/assets/web/icons/video-call-missed-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function VideoCallMissedSolidIcon(props) {
+function VideoCallMissedSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M2 8a4 4 0 0 1 4-4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8Zm8.7 5.15L8.5 11H9c.283 0 .52-.096.713-.287A.968.968 0 0 0 10 10a.968.968 0 0 0-.287-.713A.968.968 0 0 0 9 9H6a.968.968 0 0 0-.713.287A.968.968 0 0 0 5 10v3c0 .283.096.52.287.713.192.191.43.287.713.287s.52-.096.713-.287A.968.968 0 0 0 7 13v-.7l3 3a1.034 1.034 0 0 0 1.088.2.773.773 0 0 0 .312-.225l3.125-3.15a.918.918 0 0 0 .275-.675c0-.267-.1-.5-.3-.7a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275l-2.4 2.4Z"
@@ -14,4 +16,4 @@ function VideoCallMissedSolidIcon(props) {
 }
 ;
 VideoCallMissedSolidIcon.displayName = "VideoCallMissedSolidIcon";
-export default VideoCallMissedSolidIcon;
\ No newline at end of file
+export default forwardRef(VideoCallMissedSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/video-call-off-solid.cjs b/assets/web/icons/video-call-off-solid.cjs
index 912211c5..6c87be50 100644
--- a/assets/web/icons/video-call-off-solid.cjs
+++ b/assets/web/icons/video-call-off-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function VideoCallOffSolidIcon(props) {
+var React = require("react");
+function VideoCallOffSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M2.747 2.753 4.35 4.355l.008-.003L18 17.994v.012l3.247 3.247a1 1 0 1 1-1.414 1.414l-2.898-2.898A1.99 1.99 0 0 1 16 20H6a4 4 0 0 1-4-4V8c0-.892.292-1.715.785-2.38L1.333 4.166a1 1 0 0 1 1.414-1.414ZM18 15.166 6.834 4H16a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715v1.45Z"
@@ -14,4 +16,4 @@ function VideoCallOffSolidIcon(props) {
 }
 ;
 VideoCallOffSolidIcon.displayName = "VideoCallOffSolidIcon";
-module.exports = VideoCallOffSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(VideoCallOffSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/video-call-off-solid.d.ts b/assets/web/icons/video-call-off-solid.d.ts
index 6c857e03..d2e47dc7 100644
--- a/assets/web/icons/video-call-off-solid.d.ts
+++ b/assets/web/icons/video-call-off-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * video-call-off-solid.svg
  */
-declare const VideoCallOffSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const VideoCallOffSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default VideoCallOffSolidIcon;
diff --git a/assets/web/icons/video-call-off-solid.js b/assets/web/icons/video-call-off-solid.js
index a96bbbcb..c9af67fe 100644
--- a/assets/web/icons/video-call-off-solid.js
+++ b/assets/web/icons/video-call-off-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function VideoCallOffSolidIcon(props) {
+function VideoCallOffSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M2.747 2.753 4.35 4.355l.008-.003L18 17.994v.012l3.247 3.247a1 1 0 1 1-1.414 1.414l-2.898-2.898A1.99 1.99 0 0 1 16 20H6a4 4 0 0 1-4-4V8c0-.892.292-1.715.785-2.38L1.333 4.166a1 1 0 0 1 1.414-1.414ZM18 15.166 6.834 4H16a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715v1.45Z"
@@ -14,4 +16,4 @@ function VideoCallOffSolidIcon(props) {
 }
 ;
 VideoCallOffSolidIcon.displayName = "VideoCallOffSolidIcon";
-export default VideoCallOffSolidIcon;
\ No newline at end of file
+export default forwardRef(VideoCallOffSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/video-call-off.cjs b/assets/web/icons/video-call-off.cjs
index 68207181..1abbdcd5 100644
--- a/assets/web/icons/video-call-off.cjs
+++ b/assets/web/icons/video-call-off.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function VideoCallOffIcon(props) {
+var React = require("react");
+function VideoCallOffIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M2.747 2.753 4.35 4.355l.008-.003L6.006 6h-.012L16 16.006v-.012l2 2v.012l3.247 3.247a1 1 0 1 1-1.414 1.414l-2.898-2.898A1.99 1.99 0 0 1 16 20H6a4 4 0 0 1-4-4V8c0-.892.292-1.715.785-2.38L1.333 4.166a1 1 0 0 1 1.414-1.414Zm1.484 4.313a1.991 1.991 0 0 0-.23.934v8A2 2 0 0 0 6 18h9.166L4.23 7.066ZM16 6H8.834l-2-2H16a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715v1.45l-2-2V6Zm5 7.652v-3.303L19.073 12 21 13.652Z"
@@ -14,4 +16,4 @@ function VideoCallOffIcon(props) {
 }
 ;
 VideoCallOffIcon.displayName = "VideoCallOffIcon";
-module.exports = VideoCallOffIcon;
\ No newline at end of file
+module.exports = React.forwardRef(VideoCallOffIcon);
\ No newline at end of file
diff --git a/assets/web/icons/video-call-off.d.ts b/assets/web/icons/video-call-off.d.ts
index 421599db..175b879a 100644
--- a/assets/web/icons/video-call-off.d.ts
+++ b/assets/web/icons/video-call-off.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * video-call-off.svg
  */
-declare const VideoCallOffIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const VideoCallOffIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default VideoCallOffIcon;
diff --git a/assets/web/icons/video-call-off.js b/assets/web/icons/video-call-off.js
index 6167ae0d..22dcfef7 100644
--- a/assets/web/icons/video-call-off.js
+++ b/assets/web/icons/video-call-off.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function VideoCallOffIcon(props) {
+function VideoCallOffIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M2.747 2.753 4.35 4.355l.008-.003L6.006 6h-.012L16 16.006v-.012l2 2v.012l3.247 3.247a1 1 0 1 1-1.414 1.414l-2.898-2.898A1.99 1.99 0 0 1 16 20H6a4 4 0 0 1-4-4V8c0-.892.292-1.715.785-2.38L1.333 4.166a1 1 0 0 1 1.414-1.414Zm1.484 4.313a1.991 1.991 0 0 0-.23.934v8A2 2 0 0 0 6 18h9.166L4.23 7.066ZM16 6H8.834l-2-2H16a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715v1.45l-2-2V6Zm5 7.652v-3.303L19.073 12 21 13.652Z"
@@ -14,4 +16,4 @@ function VideoCallOffIcon(props) {
 }
 ;
 VideoCallOffIcon.displayName = "VideoCallOffIcon";
-export default VideoCallOffIcon;
\ No newline at end of file
+export default forwardRef(VideoCallOffIcon);
\ No newline at end of file
diff --git a/assets/web/icons/video-call-solid.cjs b/assets/web/icons/video-call-solid.cjs
index 2b51e921..771b1230 100644
--- a/assets/web/icons/video-call-solid.cjs
+++ b/assets/web/icons/video-call-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function VideoCallSolidIcon(props) {
+var React = require("react");
+function VideoCallSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z"
@@ -14,4 +16,4 @@ function VideoCallSolidIcon(props) {
 }
 ;
 VideoCallSolidIcon.displayName = "VideoCallSolidIcon";
-module.exports = VideoCallSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(VideoCallSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/video-call-solid.d.ts b/assets/web/icons/video-call-solid.d.ts
index 6ee4cb90..75c106f3 100644
--- a/assets/web/icons/video-call-solid.d.ts
+++ b/assets/web/icons/video-call-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * video-call-solid.svg
  */
-declare const VideoCallSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const VideoCallSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default VideoCallSolidIcon;
diff --git a/assets/web/icons/video-call-solid.js b/assets/web/icons/video-call-solid.js
index 8d6c6f42..0967601e 100644
--- a/assets/web/icons/video-call-solid.js
+++ b/assets/web/icons/video-call-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function VideoCallSolidIcon(props) {
+function VideoCallSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z"
@@ -14,4 +16,4 @@ function VideoCallSolidIcon(props) {
 }
 ;
 VideoCallSolidIcon.displayName = "VideoCallSolidIcon";
-export default VideoCallSolidIcon;
\ No newline at end of file
+export default forwardRef(VideoCallSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/video-call.cjs b/assets/web/icons/video-call.cjs
index 65f818b7..818c8fe7 100644
--- a/assets/web/icons/video-call.cjs
+++ b/assets/web/icons/video-call.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function VideoCallIcon(props) {
+var React = require("react");
+function VideoCallIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M2 8a4 4 0 0 1 4-4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8Zm4-2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10V6H6Zm15 7.652v-3.303L19.073 12 21 13.652Z"
@@ -14,4 +16,4 @@ function VideoCallIcon(props) {
 }
 ;
 VideoCallIcon.displayName = "VideoCallIcon";
-module.exports = VideoCallIcon;
\ No newline at end of file
+module.exports = React.forwardRef(VideoCallIcon);
\ No newline at end of file
diff --git a/assets/web/icons/video-call.d.ts b/assets/web/icons/video-call.d.ts
index 8926c70d..8855f182 100644
--- a/assets/web/icons/video-call.d.ts
+++ b/assets/web/icons/video-call.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * video-call.svg
  */
-declare const VideoCallIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const VideoCallIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default VideoCallIcon;
diff --git a/assets/web/icons/video-call.js b/assets/web/icons/video-call.js
index ca09ddde..b5a28387 100644
--- a/assets/web/icons/video-call.js
+++ b/assets/web/icons/video-call.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function VideoCallIcon(props) {
+function VideoCallIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M2 8a4 4 0 0 1 4-4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8Zm4-2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10V6H6Zm15 7.652v-3.303L19.073 12 21 13.652Z"
@@ -14,4 +16,4 @@ function VideoCallIcon(props) {
 }
 ;
 VideoCallIcon.displayName = "VideoCallIcon";
-export default VideoCallIcon;
\ No newline at end of file
+export default forwardRef(VideoCallIcon);
\ No newline at end of file
diff --git a/assets/web/icons/visibility-off.cjs b/assets/web/icons/visibility-off.cjs
index 15a29d81..7a560c0d 100644
--- a/assets/web/icons/visibility-off.cjs
+++ b/assets/web/icons/visibility-off.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function VisibilityOffIcon(props) {
+var React = require("react");
+function VisibilityOffIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "m16.1 13.3-1.45-1.45c.15-.783-.075-1.517-.675-2.2-.6-.683-1.375-.95-2.325-.8L10.2 7.4a4.24 4.24 0 0 1 .862-.3A4.2 4.2 0 0 1 12 7c1.25 0 2.312.437 3.187 1.312S16.5 10.25 16.5 11.5c0 .333-.034.646-.1.938a4.25 4.25 0 0 1-.3.862Zm3.2 3.15-1.45-1.4a10.956 10.956 0 0 0 1.687-1.588A8.898 8.898 0 0 0 20.8 11.5c-.834-1.683-2.03-3.02-3.588-4.013C15.654 6.496 13.916 6 12 6c-.483 0-.959.033-1.425.1a9.622 9.622 0 0 0-1.375.3L7.65 4.85A11.08 11.08 0 0 1 12 4c2.383 0 4.525.63 6.425 1.887 1.9 1.259 3.325 2.896 4.275 4.913.05.083.083.188.1.313s.025.254.025.387a1.972 1.972 0 0 1-.125.7 10.896 10.896 0 0 1-3.4 4.25Zm-.2 5.45-3.5-3.45c-.583.183-1.171.32-1.763.413-.591.091-1.204.137-1.837.137-2.384 0-4.525-.63-6.425-1.887-1.9-1.259-3.325-2.896-4.275-4.913a.813.813 0 0 1-.1-.313 2.932 2.932 0 0 1 0-.762.796.796 0 0 1 .1-.3A11.2 11.2 0 0 1 2.55 8.75 13.292 13.292 0 0 1 4.15 7L2.075 4.9a.933.933 0 0 1-.275-.688c0-.275.1-.512.3-.712a.948.948 0 0 1 .7-.275c.283 0 .516.092.7.275l17 17a.977.977 0 0 1 .287.688.93.93 0 0 1-.287.712.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275ZM5.55 8.4c-.484.433-.925.908-1.325 1.425A9.014 9.014 0 0 0 3.2 11.5c.833 1.683 2.029 3.02 3.587 4.012C8.346 16.505 10.083 17 12 17c.333 0 .658-.02.975-.063.316-.041.642-.087.975-.137l-.9-.95c-.184.05-.359.088-.525.113A3.539 3.539 0 0 1 12 16c-1.25 0-2.313-.438-3.188-1.313C7.937 13.813 7.5 12.75 7.5 11.5c0-.183.012-.358.037-.525.025-.167.063-.342.113-.525L5.55 8.4Z"
@@ -14,4 +16,4 @@ function VisibilityOffIcon(props) {
 }
 ;
 VisibilityOffIcon.displayName = "VisibilityOffIcon";
-module.exports = VisibilityOffIcon;
\ No newline at end of file
+module.exports = React.forwardRef(VisibilityOffIcon);
\ No newline at end of file
diff --git a/assets/web/icons/visibility-off.d.ts b/assets/web/icons/visibility-off.d.ts
index e068485b..7d6bd88a 100644
--- a/assets/web/icons/visibility-off.d.ts
+++ b/assets/web/icons/visibility-off.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * visibility-off.svg
  */
-declare const VisibilityOffIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const VisibilityOffIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default VisibilityOffIcon;
diff --git a/assets/web/icons/visibility-off.js b/assets/web/icons/visibility-off.js
index a72fc035..22f298d1 100644
--- a/assets/web/icons/visibility-off.js
+++ b/assets/web/icons/visibility-off.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function VisibilityOffIcon(props) {
+function VisibilityOffIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "m16.1 13.3-1.45-1.45c.15-.783-.075-1.517-.675-2.2-.6-.683-1.375-.95-2.325-.8L10.2 7.4a4.24 4.24 0 0 1 .862-.3A4.2 4.2 0 0 1 12 7c1.25 0 2.312.437 3.187 1.312S16.5 10.25 16.5 11.5c0 .333-.034.646-.1.938a4.25 4.25 0 0 1-.3.862Zm3.2 3.15-1.45-1.4a10.956 10.956 0 0 0 1.687-1.588A8.898 8.898 0 0 0 20.8 11.5c-.834-1.683-2.03-3.02-3.588-4.013C15.654 6.496 13.916 6 12 6c-.483 0-.959.033-1.425.1a9.622 9.622 0 0 0-1.375.3L7.65 4.85A11.08 11.08 0 0 1 12 4c2.383 0 4.525.63 6.425 1.887 1.9 1.259 3.325 2.896 4.275 4.913.05.083.083.188.1.313s.025.254.025.387a1.972 1.972 0 0 1-.125.7 10.896 10.896 0 0 1-3.4 4.25Zm-.2 5.45-3.5-3.45c-.583.183-1.171.32-1.763.413-.591.091-1.204.137-1.837.137-2.384 0-4.525-.63-6.425-1.887-1.9-1.259-3.325-2.896-4.275-4.913a.813.813 0 0 1-.1-.313 2.932 2.932 0 0 1 0-.762.796.796 0 0 1 .1-.3A11.2 11.2 0 0 1 2.55 8.75 13.292 13.292 0 0 1 4.15 7L2.075 4.9a.933.933 0 0 1-.275-.688c0-.275.1-.512.3-.712a.948.948 0 0 1 .7-.275c.283 0 .516.092.7.275l17 17a.977.977 0 0 1 .287.688.93.93 0 0 1-.287.712.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275ZM5.55 8.4c-.484.433-.925.908-1.325 1.425A9.014 9.014 0 0 0 3.2 11.5c.833 1.683 2.029 3.02 3.587 4.012C8.346 16.505 10.083 17 12 17c.333 0 .658-.02.975-.063.316-.041.642-.087.975-.137l-.9-.95c-.184.05-.359.088-.525.113A3.539 3.539 0 0 1 12 16c-1.25 0-2.313-.438-3.188-1.313C7.937 13.813 7.5 12.75 7.5 11.5c0-.183.012-.358.037-.525.025-.167.063-.342.113-.525L5.55 8.4Z"
@@ -14,4 +16,4 @@ function VisibilityOffIcon(props) {
 }
 ;
 VisibilityOffIcon.displayName = "VisibilityOffIcon";
-export default VisibilityOffIcon;
\ No newline at end of file
+export default forwardRef(VisibilityOffIcon);
\ No newline at end of file
diff --git a/assets/web/icons/visibility-on.cjs b/assets/web/icons/visibility-on.cjs
index 6427033b..f78cd8fa 100644
--- a/assets/web/icons/visibility-on.cjs
+++ b/assets/web/icons/visibility-on.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function VisibilityOnIcon(props) {
+var React = require("react");
+function VisibilityOnIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12 16c1.25 0 2.313-.438 3.188-1.313.874-.874 1.312-1.937 1.312-3.187 0-1.25-.438-2.313-1.313-3.188C14.313 7.439 13.25 7 12 7c-1.25 0-2.312.438-3.187 1.313C7.938 9.187 7.5 10.25 7.5 11.5c0 1.25.438 2.313 1.313 3.188C9.688 15.562 10.75 16 12 16Zm0-1.8c-.75 0-1.387-.262-1.912-.787A2.604 2.604 0 0 1 9.3 11.5c0-.75.263-1.387.787-1.912A2.604 2.604 0 0 1 12 8.8c.75 0 1.387.262 1.912.787.525.526.788 1.163.788 1.913s-.262 1.387-.787 1.912A2.604 2.604 0 0 1 12 14.2Zm0 4.8c-2.317 0-4.433-.613-6.35-1.837-1.917-1.226-3.367-2.88-4.35-4.963a.812.812 0 0 1-.1-.313 2.93 2.93 0 0 1 0-.774.812.812 0 0 1 .1-.313c.983-2.083 2.433-3.738 4.35-4.963C7.567 4.614 9.683 4 12 4c2.317 0 4.433.612 6.35 1.838 1.917 1.224 3.367 2.879 4.35 4.962a.81.81 0 0 1 .1.313 2.925 2.925 0 0 1 0 .774.81.81 0 0 1-.1.313c-.983 2.083-2.433 3.738-4.35 4.963C16.433 18.387 14.317 19 12 19Zm0-2a9.544 9.544 0 0 0 5.188-1.488A9.773 9.773 0 0 0 20.8 11.5a9.773 9.773 0 0 0-3.613-4.013A9.544 9.544 0 0 0 12 6a9.545 9.545 0 0 0-5.187 1.487A9.773 9.773 0 0 0 3.2 11.5a9.773 9.773 0 0 0 3.613 4.012A9.544 9.544 0 0 0 12 17Z"
@@ -14,4 +16,4 @@ function VisibilityOnIcon(props) {
 }
 ;
 VisibilityOnIcon.displayName = "VisibilityOnIcon";
-module.exports = VisibilityOnIcon;
\ No newline at end of file
+module.exports = React.forwardRef(VisibilityOnIcon);
\ No newline at end of file
diff --git a/assets/web/icons/visibility-on.d.ts b/assets/web/icons/visibility-on.d.ts
index 6f86a965..69a8f0e5 100644
--- a/assets/web/icons/visibility-on.d.ts
+++ b/assets/web/icons/visibility-on.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * visibility-on.svg
  */
-declare const VisibilityOnIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const VisibilityOnIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default VisibilityOnIcon;
diff --git a/assets/web/icons/visibility-on.js b/assets/web/icons/visibility-on.js
index 27ea3d53..0ee076b0 100644
--- a/assets/web/icons/visibility-on.js
+++ b/assets/web/icons/visibility-on.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function VisibilityOnIcon(props) {
+function VisibilityOnIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M12 16c1.25 0 2.313-.438 3.188-1.313.874-.874 1.312-1.937 1.312-3.187 0-1.25-.438-2.313-1.313-3.188C14.313 7.439 13.25 7 12 7c-1.25 0-2.312.438-3.187 1.313C7.938 9.187 7.5 10.25 7.5 11.5c0 1.25.438 2.313 1.313 3.188C9.688 15.562 10.75 16 12 16Zm0-1.8c-.75 0-1.387-.262-1.912-.787A2.604 2.604 0 0 1 9.3 11.5c0-.75.263-1.387.787-1.912A2.604 2.604 0 0 1 12 8.8c.75 0 1.387.262 1.912.787.525.526.788 1.163.788 1.913s-.262 1.387-.787 1.912A2.604 2.604 0 0 1 12 14.2Zm0 4.8c-2.317 0-4.433-.613-6.35-1.837-1.917-1.226-3.367-2.88-4.35-4.963a.812.812 0 0 1-.1-.313 2.93 2.93 0 0 1 0-.774.812.812 0 0 1 .1-.313c.983-2.083 2.433-3.738 4.35-4.963C7.567 4.614 9.683 4 12 4c2.317 0 4.433.612 6.35 1.838 1.917 1.224 3.367 2.879 4.35 4.962a.81.81 0 0 1 .1.313 2.925 2.925 0 0 1 0 .774.81.81 0 0 1-.1.313c-.983 2.083-2.433 3.738-4.35 4.963C16.433 18.387 14.317 19 12 19Zm0-2a9.544 9.544 0 0 0 5.188-1.488A9.773 9.773 0 0 0 20.8 11.5a9.773 9.773 0 0 0-3.613-4.013A9.544 9.544 0 0 0 12 6a9.545 9.545 0 0 0-5.187 1.487A9.773 9.773 0 0 0 3.2 11.5a9.773 9.773 0 0 0 3.613 4.012A9.544 9.544 0 0 0 12 17Z"
@@ -14,4 +16,4 @@ function VisibilityOnIcon(props) {
 }
 ;
 VisibilityOnIcon.displayName = "VisibilityOnIcon";
-export default VisibilityOnIcon;
\ No newline at end of file
+export default forwardRef(VisibilityOnIcon);
\ No newline at end of file
diff --git a/assets/web/icons/voice-call.cjs b/assets/web/icons/voice-call.cjs
index 1b721b7c..97019d6e 100644
--- a/assets/web/icons/voice-call.cjs
+++ b/assets/web/icons/voice-call.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function VoiceCallIcon(props) {
+var React = require("react");
+function VoiceCallIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "m20.958 16.374.039 3.527c0 .284-.11.536-.33.756-.22.22-.472.33-.756.33a15.97 15.97 0 0 1-6.57-1.105 16.225 16.225 0 0 1-5.563-3.663 16.084 16.084 0 0 1-3.653-5.573 16.313 16.313 0 0 1-1.115-6.56c0-.285.11-.537.33-.757.22-.22.471-.33.755-.33l3.528.04a1.069 1.069 0 0 1 1.085.93l.543 3.954c.026.18.013.349-.039.504a1.088 1.088 0 0 1-.271.426l-1.64 1.64c.337.672.721 1.308 1.154 1.909.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444c.6.433 1.237.817 1.909 1.153l1.64-1.64a1.07 1.07 0 0 1 .426-.27c.155-.052.323-.065.504-.04l3.954.543a1.068 1.068 0 0 1 .93 1.085Z"
@@ -14,4 +16,4 @@ function VoiceCallIcon(props) {
 }
 ;
 VoiceCallIcon.displayName = "VoiceCallIcon";
-module.exports = VoiceCallIcon;
\ No newline at end of file
+module.exports = React.forwardRef(VoiceCallIcon);
\ No newline at end of file
diff --git a/assets/web/icons/voice-call.d.ts b/assets/web/icons/voice-call.d.ts
index 06c0a070..39f77c8f 100644
--- a/assets/web/icons/voice-call.d.ts
+++ b/assets/web/icons/voice-call.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * voice-call.svg
  */
-declare const VoiceCallIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const VoiceCallIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default VoiceCallIcon;
diff --git a/assets/web/icons/voice-call.js b/assets/web/icons/voice-call.js
index 4494c5ae..ba90f6d5 100644
--- a/assets/web/icons/voice-call.js
+++ b/assets/web/icons/voice-call.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function VoiceCallIcon(props) {
+function VoiceCallIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "m20.958 16.374.039 3.527c0 .284-.11.536-.33.756-.22.22-.472.33-.756.33a15.97 15.97 0 0 1-6.57-1.105 16.225 16.225 0 0 1-5.563-3.663 16.084 16.084 0 0 1-3.653-5.573 16.313 16.313 0 0 1-1.115-6.56c0-.285.11-.537.33-.757.22-.22.471-.33.755-.33l3.528.04a1.069 1.069 0 0 1 1.085.93l.543 3.954c.026.18.013.349-.039.504a1.088 1.088 0 0 1-.271.426l-1.64 1.64c.337.672.721 1.308 1.154 1.909.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444c.6.433 1.237.817 1.909 1.153l1.64-1.64a1.07 1.07 0 0 1 .426-.27c.155-.052.323-.065.504-.04l3.954.543a1.068 1.068 0 0 1 .93 1.085Z"
@@ -14,4 +16,4 @@ function VoiceCallIcon(props) {
 }
 ;
 VoiceCallIcon.displayName = "VoiceCallIcon";
-export default VoiceCallIcon;
\ No newline at end of file
+export default forwardRef(VoiceCallIcon);
\ No newline at end of file
diff --git a/assets/web/icons/volume-off-solid.cjs b/assets/web/icons/volume-off-solid.cjs
index 17e6e330..9309b7ea 100644
--- a/assets/web/icons/volume-off-solid.cjs
+++ b/assets/web/icons/volume-off-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function VolumeOffSolidIcon(props) {
+var React = require("react");
+function VolumeOffSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M3.5 3.5a1 1 0 1 0-1.414 1.414L5.172 8H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h2l3.293 3.293c.63.63 1.707.184 1.707-.707v-3.758l7.086 7.086A1 1 0 0 0 20.5 20.5l-2.136-2.136.003-.003-1.414-1.414-.003.003-1.414-1.414.003-.003-1.415-1.415-.002.003L12 12v-.006L7.503 7.497 7.5 7.5l-4-4Zm11.496 8.662 1.661 1.66c.222-.564.343-1.18.343-1.822 0-1.38-.56-2.632-1.464-3.536a1 1 0 1 0-1.414 1.414 2.987 2.987 0 0 1 .874 2.284Zm3.164 3.164 1.462 1.462A8.961 8.961 0 0 0 21 12a8.975 8.975 0 0 0-2.636-6.364A1 1 0 0 0 16.95 7.05 6.975 6.975 0 0 1 19 12a6.966 6.966 0 0 1-.84 3.326ZM8.917 6.083 12 9.166V5.414c0-.89-1.077-1.337-1.707-.707L8.917 6.083Z"
@@ -14,4 +16,4 @@ function VolumeOffSolidIcon(props) {
 }
 ;
 VolumeOffSolidIcon.displayName = "VolumeOffSolidIcon";
-module.exports = VolumeOffSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(VolumeOffSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/volume-off-solid.d.ts b/assets/web/icons/volume-off-solid.d.ts
index 2761ba0e..865586ac 100644
--- a/assets/web/icons/volume-off-solid.d.ts
+++ b/assets/web/icons/volume-off-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * volume-off-solid.svg
  */
-declare const VolumeOffSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const VolumeOffSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default VolumeOffSolidIcon;
diff --git a/assets/web/icons/volume-off-solid.js b/assets/web/icons/volume-off-solid.js
index ff3c36ae..a7dac64c 100644
--- a/assets/web/icons/volume-off-solid.js
+++ b/assets/web/icons/volume-off-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function VolumeOffSolidIcon(props) {
+function VolumeOffSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M3.5 3.5a1 1 0 1 0-1.414 1.414L5.172 8H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h2l3.293 3.293c.63.63 1.707.184 1.707-.707v-3.758l7.086 7.086A1 1 0 0 0 20.5 20.5l-2.136-2.136.003-.003-1.414-1.414-.003.003-1.414-1.414.003-.003-1.415-1.415-.002.003L12 12v-.006L7.503 7.497 7.5 7.5l-4-4Zm11.496 8.662 1.661 1.66c.222-.564.343-1.18.343-1.822 0-1.38-.56-2.632-1.464-3.536a1 1 0 1 0-1.414 1.414 2.987 2.987 0 0 1 .874 2.284Zm3.164 3.164 1.462 1.462A8.961 8.961 0 0 0 21 12a8.975 8.975 0 0 0-2.636-6.364A1 1 0 0 0 16.95 7.05 6.975 6.975 0 0 1 19 12a6.966 6.966 0 0 1-.84 3.326ZM8.917 6.083 12 9.166V5.414c0-.89-1.077-1.337-1.707-.707L8.917 6.083Z"
@@ -14,4 +16,4 @@ function VolumeOffSolidIcon(props) {
 }
 ;
 VolumeOffSolidIcon.displayName = "VolumeOffSolidIcon";
-export default VolumeOffSolidIcon;
\ No newline at end of file
+export default forwardRef(VolumeOffSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/volume-off.cjs b/assets/web/icons/volume-off.cjs
index 4f166c04..d2db36ac 100644
--- a/assets/web/icons/volume-off.cjs
+++ b/assets/web/icons/volume-off.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function VolumeOffIcon(props) {
+var React = require("react");
+function VolumeOffIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "m3.5 3.5 4 4 .003-.003L8.917 8.91l-.003.003L10 10v-.006l2 2V12l2.122 2.121.002-.003 1.415 1.415-.003.003 1.414 1.414.003-.003 1.414 1.414-.003.003L20.5 20.5a1 1 0 0 1-1.414 1.414L12 14.828v3.758c0 .89-1.077 1.337-1.707.707L7 16H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h.172L2.086 4.914A1 1 0 0 1 3.5 3.5ZM7.172 10H5v4h2.828L10 16.17v-3.343L7.172 10Zm7.824 2.162 1.661 1.66c.222-.564.343-1.18.343-1.822 0-1.38-.56-2.632-1.464-3.536a1 1 0 1 0-1.414 1.414 2.987 2.987 0 0 1 .874 2.284Zm3.164 3.164 1.462 1.462A8.961 8.961 0 0 0 21 12a8.975 8.975 0 0 0-2.636-6.364A1 1 0 0 0 16.95 7.05 6.975 6.975 0 0 1 19 12a6.966 6.966 0 0 1-.84 3.326ZM8.917 6.083 12 9.166V5.414c0-.89-1.077-1.337-1.707-.707L8.917 6.083Z"
@@ -14,4 +16,4 @@ function VolumeOffIcon(props) {
 }
 ;
 VolumeOffIcon.displayName = "VolumeOffIcon";
-module.exports = VolumeOffIcon;
\ No newline at end of file
+module.exports = React.forwardRef(VolumeOffIcon);
\ No newline at end of file
diff --git a/assets/web/icons/volume-off.d.ts b/assets/web/icons/volume-off.d.ts
index 5bd1db94..e7c145a8 100644
--- a/assets/web/icons/volume-off.d.ts
+++ b/assets/web/icons/volume-off.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * volume-off.svg
  */
-declare const VolumeOffIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const VolumeOffIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default VolumeOffIcon;
diff --git a/assets/web/icons/volume-off.js b/assets/web/icons/volume-off.js
index 22487133..44a16669 100644
--- a/assets/web/icons/volume-off.js
+++ b/assets/web/icons/volume-off.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function VolumeOffIcon(props) {
+function VolumeOffIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "m3.5 3.5 4 4 .003-.003L8.917 8.91l-.003.003L10 10v-.006l2 2V12l2.122 2.121.002-.003 1.415 1.415-.003.003 1.414 1.414.003-.003 1.414 1.414-.003.003L20.5 20.5a1 1 0 0 1-1.414 1.414L12 14.828v3.758c0 .89-1.077 1.337-1.707.707L7 16H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h.172L2.086 4.914A1 1 0 0 1 3.5 3.5ZM7.172 10H5v4h2.828L10 16.17v-3.343L7.172 10Zm7.824 2.162 1.661 1.66c.222-.564.343-1.18.343-1.822 0-1.38-.56-2.632-1.464-3.536a1 1 0 1 0-1.414 1.414 2.987 2.987 0 0 1 .874 2.284Zm3.164 3.164 1.462 1.462A8.961 8.961 0 0 0 21 12a8.975 8.975 0 0 0-2.636-6.364A1 1 0 0 0 16.95 7.05 6.975 6.975 0 0 1 19 12a6.966 6.966 0 0 1-.84 3.326ZM8.917 6.083 12 9.166V5.414c0-.89-1.077-1.337-1.707-.707L8.917 6.083Z"
@@ -14,4 +16,4 @@ function VolumeOffIcon(props) {
 }
 ;
 VolumeOffIcon.displayName = "VolumeOffIcon";
-export default VolumeOffIcon;
\ No newline at end of file
+export default forwardRef(VolumeOffIcon);
\ No newline at end of file
diff --git a/assets/web/icons/volume-on-solid.cjs b/assets/web/icons/volume-on-solid.cjs
index 60082269..ef7d49cf 100644
--- a/assets/web/icons/volume-on-solid.cjs
+++ b/assets/web/icons/volume-on-solid.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function VolumeOnSolidIcon(props) {
+var React = require("react");
+function VolumeOnSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M3 14v-4a2 2 0 0 1 2-2h2l3.293-3.293c.63-.63 1.707-.184 1.707.707v13.172c0 .89-1.077 1.337-1.707.707L7 16H5a2 2 0 0 1-2-2Zm11.121-5.536a1 1 0 0 1 1.415 0A4.987 4.987 0 0 1 17 12c0 1.38-.56 2.632-1.464 3.536a1 1 0 0 1-1.415-1.415 2.988 2.988 0 0 0 .88-2.121c0-.829-.335-1.577-.88-2.121a1 1 0 0 1 0-1.415Z"
@@ -16,4 +18,4 @@ function VolumeOnSolidIcon(props) {
 }
 ;
 VolumeOnSolidIcon.displayName = "VolumeOnSolidIcon";
-module.exports = VolumeOnSolidIcon;
\ No newline at end of file
+module.exports = React.forwardRef(VolumeOnSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/volume-on-solid.d.ts b/assets/web/icons/volume-on-solid.d.ts
index bf136036..489453ea 100644
--- a/assets/web/icons/volume-on-solid.d.ts
+++ b/assets/web/icons/volume-on-solid.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * volume-on-solid.svg
  */
-declare const VolumeOnSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const VolumeOnSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default VolumeOnSolidIcon;
diff --git a/assets/web/icons/volume-on-solid.js b/assets/web/icons/volume-on-solid.js
index fe7b2505..bd0fd22e 100644
--- a/assets/web/icons/volume-on-solid.js
+++ b/assets/web/icons/volume-on-solid.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function VolumeOnSolidIcon(props) {
+function VolumeOnSolidIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M3 14v-4a2 2 0 0 1 2-2h2l3.293-3.293c.63-.63 1.707-.184 1.707.707v13.172c0 .89-1.077 1.337-1.707.707L7 16H5a2 2 0 0 1-2-2Zm11.121-5.536a1 1 0 0 1 1.415 0A4.987 4.987 0 0 1 17 12c0 1.38-.56 2.632-1.464 3.536a1 1 0 0 1-1.415-1.415 2.988 2.988 0 0 0 .88-2.121c0-.829-.335-1.577-.88-2.121a1 1 0 0 1 0-1.415Z"
@@ -16,4 +18,4 @@ function VolumeOnSolidIcon(props) {
 }
 ;
 VolumeOnSolidIcon.displayName = "VolumeOnSolidIcon";
-export default VolumeOnSolidIcon;
\ No newline at end of file
+export default forwardRef(VolumeOnSolidIcon);
\ No newline at end of file
diff --git a/assets/web/icons/volume-on.cjs b/assets/web/icons/volume-on.cjs
index dc4c0ed7..18d65378 100644
--- a/assets/web/icons/volume-on.cjs
+++ b/assets/web/icons/volume-on.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function VolumeOnIcon(props) {
+var React = require("react");
+function VolumeOnIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M3 10a2 2 0 0 1 2-2h2l3.293-3.293c.63-.63 1.707-.184 1.707.707v13.172c0 .89-1.077 1.337-1.707.707L7 16H5a2 2 0 0 1-2-2v-4Zm4.828 4L10 16.172V7.828L7.828 10H5v4h2.828Zm6.293-5.536a1 1 0 0 1 1.415 0A4.988 4.988 0 0 1 17 12c0 1.38-.56 2.632-1.464 3.535a1 1 0 1 1-1.415-1.414 2.987 2.987 0 0 0 .88-2.121c0-.829-.335-1.578-.88-2.122a1 1 0 0 1 0-1.414Z"
@@ -16,4 +18,4 @@ function VolumeOnIcon(props) {
 }
 ;
 VolumeOnIcon.displayName = "VolumeOnIcon";
-module.exports = VolumeOnIcon;
\ No newline at end of file
+module.exports = React.forwardRef(VolumeOnIcon);
\ No newline at end of file
diff --git a/assets/web/icons/volume-on.d.ts b/assets/web/icons/volume-on.d.ts
index 03300d4b..cc596abf 100644
--- a/assets/web/icons/volume-on.d.ts
+++ b/assets/web/icons/volume-on.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * volume-on.svg
  */
-declare const VolumeOnIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const VolumeOnIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default VolumeOnIcon;
diff --git a/assets/web/icons/volume-on.js b/assets/web/icons/volume-on.js
index 5bf5d8d8..c6e7395b 100644
--- a/assets/web/icons/volume-on.js
+++ b/assets/web/icons/volume-on.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function VolumeOnIcon(props) {
+function VolumeOnIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M3 10a2 2 0 0 1 2-2h2l3.293-3.293c.63-.63 1.707-.184 1.707.707v13.172c0 .89-1.077 1.337-1.707.707L7 16H5a2 2 0 0 1-2-2v-4Zm4.828 4L10 16.172V7.828L7.828 10H5v4h2.828Zm6.293-5.536a1 1 0 0 1 1.415 0A4.988 4.988 0 0 1 17 12c0 1.38-.56 2.632-1.464 3.535a1 1 0 1 1-1.415-1.414 2.987 2.987 0 0 0 .88-2.121c0-.829-.335-1.578-.88-2.122a1 1 0 0 1 0-1.414Z"
@@ -16,4 +18,4 @@ function VolumeOnIcon(props) {
 }
 ;
 VolumeOnIcon.displayName = "VolumeOnIcon";
-export default VolumeOnIcon;
\ No newline at end of file
+export default forwardRef(VolumeOnIcon);
\ No newline at end of file
diff --git a/assets/web/icons/warning.cjs b/assets/web/icons/warning.cjs
index 67777c8f..a42d88de 100644
--- a/assets/web/icons/warning.cjs
+++ b/assets/web/icons/warning.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function WarningIcon(props) {
+var React = require("react");
+function WarningIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12.713 17.712A.968.968 0 0 1 12 18a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 17a.97.97 0 0 1 .287-.712A.968.968 0 0 1 12 16a.97.97 0 0 1 .713.288c.191.191.287.429.287.712s-.096.52-.287.712Zm0-3.999A.968.968 0 0 1 12 14a.968.968 0 0 1-.713-.287A.968.968 0 0 1 11 13V9c0-.283.096-.52.287-.713A.968.968 0 0 1 12 8c.283 0 .52.096.713.287.191.192.287.43.287.713v4c0 .283-.096.52-.287.713Z"
@@ -18,4 +20,4 @@ function WarningIcon(props) {
 }
 ;
 WarningIcon.displayName = "WarningIcon";
-module.exports = WarningIcon;
\ No newline at end of file
+module.exports = React.forwardRef(WarningIcon);
\ No newline at end of file
diff --git a/assets/web/icons/warning.d.ts b/assets/web/icons/warning.d.ts
index aae7b922..b1bf3aa6 100644
--- a/assets/web/icons/warning.d.ts
+++ b/assets/web/icons/warning.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * warning.svg
  */
-declare const WarningIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const WarningIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default WarningIcon;
diff --git a/assets/web/icons/warning.js b/assets/web/icons/warning.js
index c931ae0f..4946c198 100644
--- a/assets/web/icons/warning.js
+++ b/assets/web/icons/warning.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function WarningIcon(props) {
+function WarningIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M12.713 17.712A.968.968 0 0 1 12 18a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 17a.97.97 0 0 1 .287-.712A.968.968 0 0 1 12 16a.97.97 0 0 1 .713.288c.191.191.287.429.287.712s-.096.52-.287.712Zm0-3.999A.968.968 0 0 1 12 14a.968.968 0 0 1-.713-.287A.968.968 0 0 1 11 13V9c0-.283.096-.52.287-.713A.968.968 0 0 1 12 8c.283 0 .52.096.713.287.191.192.287.43.287.713v4c0 .283-.096.52-.287.713Z"
@@ -18,4 +20,4 @@ function WarningIcon(props) {
 }
 ;
 WarningIcon.displayName = "WarningIcon";
-export default WarningIcon;
\ No newline at end of file
+export default forwardRef(WarningIcon);
\ No newline at end of file
diff --git a/assets/web/icons/web-browser.cjs b/assets/web/icons/web-browser.cjs
index da0d8b17..8a3c3f71 100644
--- a/assets/web/icons/web-browser.cjs
+++ b/assets/web/icons/web-browser.cjs
@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function WebBrowserIcon(props) {
+var React = require("react");
+function WebBrowserIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M4 20c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18V6c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 4 4h16c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412v12c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 20H4Zm0-2h16V8H4v10Z"
@@ -14,4 +16,4 @@ function WebBrowserIcon(props) {
 }
 ;
 WebBrowserIcon.displayName = "WebBrowserIcon";
-module.exports = WebBrowserIcon;
\ No newline at end of file
+module.exports = React.forwardRef(WebBrowserIcon);
\ No newline at end of file
diff --git a/assets/web/icons/web-browser.d.ts b/assets/web/icons/web-browser.d.ts
index 28ae80b3..2919b66d 100644
--- a/assets/web/icons/web-browser.d.ts
+++ b/assets/web/icons/web-browser.d.ts
@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * web-browser.svg
  */
-declare const WebBrowserIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const WebBrowserIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default WebBrowserIcon;
diff --git a/assets/web/icons/web-browser.js b/assets/web/icons/web-browser.js
index b7fd7fdd..b2a9c128 100644
--- a/assets/web/icons/web-browser.js
+++ b/assets/web/icons/web-browser.js
@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function WebBrowserIcon(props) {
+function WebBrowserIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M4 20c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18V6c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 4 4h16c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412v12c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 20H4Zm0-2h16V8H4v10Z"
@@ -14,4 +16,4 @@ function WebBrowserIcon(props) {
 }
 ;
 WebBrowserIcon.displayName = "WebBrowserIcon";
-export default WebBrowserIcon;
\ No newline at end of file
+export default forwardRef(WebBrowserIcon);
\ No newline at end of file
diff --git a/package.json b/package.json
index c2228930..9b437887 100644
--- a/package.json
+++ b/package.json
@@ -11,16 +11,8 @@
     "check": "yarn exec biome -- check",
     "types": "yarn exec tsc -- --noEmit"
   },
-  "keywords": [
-    "compound",
-    "design tokens",
-    "style dictionary",
-    "css"
-  ],
-  "files": [
-    "./assets/web/**/*",
-    "./icons/**/*"
-  ],
+  "keywords": ["compound", "design tokens", "style dictionary", "css"],
+  "files": ["./assets/web/**/*", "./icons/**/*"],
   "main": "assets/web/js/index.js",
   "type": "module",
   "exports": {
diff --git a/src/utils/generateIconTokens.ts b/src/utils/generateIconTokens.ts
index b27d8827..60059e2d 100644
--- a/src/utils/generateIconTokens.ts
+++ b/src/utils/generateIconTokens.ts
@@ -73,6 +73,7 @@ export default async function generateIconTokens(): Promise<void> {
       {
         plugins: [svgrPluginJsx as unknown as ConfigPlugin],
         icon: true,
+        ref: true,
         jsxRuntime: "automatic",
         jsx: {
           babelConfig: {
@@ -92,6 +93,8 @@ export default async function generateIconTokens(): Promise<void> {
 
         template(variables, { tpl }) {
           return tpl`
+          import { forwardRef } from "react";
+
           function ${variables.componentName}(${variables.props}) {
             return (
               ${variables.jsx}
@@ -99,7 +102,7 @@ export default async function generateIconTokens(): Promise<void> {
           };
           ${variables.componentName}.displayName = '${variables.componentName}'
 
-          export default ${variables.componentName};
+          export default forwardRef(${variables.componentName});
         `;
         },
       },
@@ -113,6 +116,7 @@ export default async function generateIconTokens(): Promise<void> {
       {
         plugins: [svgrPluginJsx as unknown as ConfigPlugin],
         icon: true,
+        ref: true,
         jsxRuntime: "automatic",
         jsx: {
           babelConfig: {
@@ -122,6 +126,8 @@ export default async function generateIconTokens(): Promise<void> {
 
         template(variables, { tpl }) {
           return tpl`
+          var React = require("react");
+
           function ${variables.componentName}(${variables.props}) {
             return (
               ${variables.jsx}
@@ -129,7 +135,7 @@ export default async function generateIconTokens(): Promise<void> {
           };
           ${variables.componentName}.displayName = '${variables.componentName}'
 
-          module.exports = ${variables.componentName};
+          module.exports = React.forwardRef(${variables.componentName});
         `;
         },
       },
@@ -151,13 +157,14 @@ export default async function generateIconTokens(): Promise<void> {
     );
 
     // Generate a .d.ts (typescript declaration) file for the icon
-    const dTs = `import * as React from "react";
+    const dTs = `import React from "react";
 
 /**
  * ${parsedPath.base}
  */
-declare const ${componentName}: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ${componentName}: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ${componentName};