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

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);

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

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

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

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

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

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

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

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

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

package/assets/web/icons/notifications-off-solid.cjs

@@ -1,19 +1,21 @@
 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"
+      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.35 9.136 3.484C9.93 3.181 10.874 3 12 3c7 0 7 7 7 7v3.35Z"
     }), /*#__PURE__*/_reactJsxRuntime.jsx("path", {
-      d: "M10 20h4a2 2 0 1 1-4 0Z"
+      d: "M10 20h4a2 2 0 0 1-4 0Z"
     })]
   });
 }
 ;
 NotificationsOffSolidIcon.displayName = "NotificationsOffSolidIcon";
-module.exports = NotificationsOffSolidIcon;
+module.exports = React.forwardRef(NotificationsOffSolidIcon);

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

package/assets/web/icons/notifications-off-solid.js

@@ -1,19 +1,21 @@
+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"
+      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.35 9.136 3.484C9.93 3.181 10.874 3 12 3c7 0 7 7 7 7v3.35Z"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M10 20h4a2 2 0 1 1-4 0Z"
+      d: "M10 20h4a2 2 0 0 1-4 0Z"
     })]
   });
 }
 ;
 NotificationsOffSolidIcon.displayName = "NotificationsOffSolidIcon";
-export default NotificationsOffSolidIcon;
+export default forwardRef(NotificationsOffSolidIcon);