@vector-im/compound-design-tokens 1.6.0 → 1.6.1

package/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;

package/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;
+export default forwardRef(LockOffIcon);

package/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;
+module.exports = React.forwardRef(LockSolidIcon);

package/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;

package/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;
+export default forwardRef(LockSolidIcon);

package/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;
+module.exports = React.forwardRef(LockIcon);

package/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;

package/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;
+export default forwardRef(LockIcon);

package/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;
+module.exports = React.forwardRef(MarkAsReadIcon);

package/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;

package/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;
+export default forwardRef(MarkAsReadIcon);

package/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;
+module.exports = React.forwardRef(MarkAsUnreadIcon);

package/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;

package/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;
+export default forwardRef(MarkAsUnreadIcon);

package/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;
+module.exports = React.forwardRef(MarkerReadReceiptsIcon);

package/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;

package/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;
+export default forwardRef(MarkerReadReceiptsIcon);

package/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;
+module.exports = React.forwardRef(MentionIcon);

package/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;

package/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;
+export default forwardRef(MentionIcon);

package/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;
+module.exports = React.forwardRef(MenuIcon);

package/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;

package/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;
+export default forwardRef(MenuIcon);

package/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;
+module.exports = React.forwardRef(MicOffSolidIcon);

package/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;

package/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;
+export default forwardRef(MicOffSolidIcon);

package/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;
+module.exports = React.forwardRef(MicOffIcon);

package/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;

package/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;
+export default forwardRef(MicOffIcon);

package/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;
+module.exports = React.forwardRef(MicOnSolidIcon);

package/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;

package/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;
+export default forwardRef(MicOnSolidIcon);