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

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,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;
+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,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;
+export default forwardRef(NotificationsOffSolidIcon);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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