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

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

@@ -1,19 +1,21 @@
 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"
+      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.011v6.817L6.828 17h10.178ZM17 11.35V9.987l-.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.35l-2-2Z"
     }), /*#__PURE__*/_reactJsxRuntime.jsx("path", {
-      d: "M10 20h4a2 2 0 1 1-4 0Z"
+      d: "M10 20h4a2 2 0 0 1-4 0Z"
     })]
   });
 }
 ;
 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,19 +1,21 @@
+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"
+      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.011v6.817L6.828 17h10.178ZM17 11.35V9.987l-.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.35l-2-2Z"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M10 20h4a2 2 0 1 1-4 0Z"
+      d: "M10 20h4a2 2 0 0 1-4 0Z"
     })]
   });
 }
 ;
 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,17 +1,19 @@
 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"
+      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.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-1.4 0-2.317.344-2.937.758-.633.422-1.08.999-1.4 1.636a6.606 6.606 0 0 0-.58 1.841A6.596 6.596 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"
     })
   });
 }
 ;
 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,17 +1,19 @@
+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"
+      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.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-1.4 0-2.317.344-2.937.758-.633.422-1.08.999-1.4 1.636a6.606 6.606 0 0 0-.58 1.841A6.596 6.596 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"
     })
   });
 }
 ;
 NotificationsIcon.displayName = "NotificationsIcon";
-export default NotificationsIcon;
+export default forwardRef(NotificationsIcon);

package/assets/web/icons/offline.cjs

@@ -1,17 +1,19 @@
 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"
+      d: "M3.5 3.5a1 1 0 1 0-1.414 1.414l4.113 4.114a5.484 5.484 0 0 0-.184 1.069A5.002 5.002 0 0 0 7 20h10.172l1.914 1.914A1 1 0 0 0 20.5 20.5l-.979-.979.004-.002L7.145 7.14l-.002.004L3.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.497 4.497 0 0 1 22 15.5Z"
     })
   });
 }
 ;
 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,17 +1,19 @@
+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"
+      d: "M3.5 3.5a1 1 0 1 0-1.414 1.414l4.113 4.114a5.484 5.484 0 0 0-.184 1.069A5.002 5.002 0 0 0 7 20h10.172l1.914 1.914A1 1 0 0 0 20.5 20.5l-.979-.979.004-.002L7.145 7.14l-.002.004L3.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.497 4.497 0 0 1 22 15.5Z"
     })
   });
 }
 ;
 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;

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

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

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

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

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

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

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

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

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

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

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