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

package/assets/web/icons/extensions.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ExtensionsIcon(props) {
+function ExtensionsIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M17.25 11.672a.907.907 0 0 1-.663-.282L12.61 7.413a.907.907 0 0 1-.282-.663c0-.254.094-.475.282-.663l3.977-3.977a.907.907 0 0 1 .663-.282c.254 0 .475.094.663.282l3.977 3.977a.907.907 0 0 1 .282.663.907.907 0 0 1-.282.663l-3.977 3.977a.907.907 0 0 1-.663.282Zm2.475-4.922L17.25 4.275 14.775 6.75l2.475 2.475 2.475-2.475ZM4 11a.967.967 0 0 1-.712-.287A.968.968 0 0 1 3 10V4c0-.283.096-.52.288-.712A.968.968 0 0 1 4 3h6a.97.97 0 0 1 .713.288A.968.968 0 0 1 11 4v6c0 .283-.096.52-.287.713A.968.968 0 0 1 10 11H4Zm5-2V5H5v4h4Zm5 12a.968.968 0 0 1-.713-.288A.968.968 0 0 1 13 20v-6c0-.283.096-.52.287-.713A.968.968 0 0 1 14 13h6a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v6c0 .283-.096.52-.288.712A.968.968 0 0 1 20 21h-6Zm5-2v-4h-4v4h4ZM4 21a.967.967 0 0 1-.712-.288A.968.968 0 0 1 3 20v-6a.97.97 0 0 1 .288-.713A.967.967 0 0 1 4 13h6c.283 0 .52.096.713.287.191.192.287.43.287.713v6a.97.97 0 0 1-.287.712A.968.968 0 0 1 10 21H4Zm5-2v-4H5v4h4Z"
@@ -14,4 +16,4 @@ function ExtensionsIcon(props) {
 }
 ;
 ExtensionsIcon.displayName = "ExtensionsIcon";
-export default ExtensionsIcon;
+export default forwardRef(ExtensionsIcon);

package/assets/web/icons/favourite-solid.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function FavouriteSolidIcon(props) {
+var React = require("react");
+function FavouriteSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "m12.897 2.817 2.336 4.733 5.223.76a1 1 0 0 1 .555 1.705L17.23 13.7l.892 5.202a1 1 0 0 1-1.45 1.054L12 17.5l-4.672 2.456a1 1 0 0 1-1.451-1.054l.892-5.202-3.78-3.685a1 1 0 0 1 .555-1.706l5.223-.759 2.336-4.733a1 1 0 0 1 1.794 0Z"
@@ -14,4 +16,4 @@ function FavouriteSolidIcon(props) {
 }
 ;
 FavouriteSolidIcon.displayName = "FavouriteSolidIcon";
-module.exports = FavouriteSolidIcon;
+module.exports = React.forwardRef(FavouriteSolidIcon);

package/assets/web/icons/favourite-solid.d.ts

@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * favourite-solid.svg
  */
-declare const FavouriteSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const FavouriteSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default FavouriteSolidIcon;

package/assets/web/icons/favourite-solid.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function FavouriteSolidIcon(props) {
+function FavouriteSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "m12.897 2.817 2.336 4.733 5.223.76a1 1 0 0 1 .555 1.705L17.23 13.7l.892 5.202a1 1 0 0 1-1.45 1.054L12 17.5l-4.672 2.456a1 1 0 0 1-1.451-1.054l.892-5.202-3.78-3.685a1 1 0 0 1 .555-1.706l5.223-.759 2.336-4.733a1 1 0 0 1 1.794 0Z"
@@ -14,4 +16,4 @@ function FavouriteSolidIcon(props) {
 }
 ;
 FavouriteSolidIcon.displayName = "FavouriteSolidIcon";
-export default FavouriteSolidIcon;
+export default forwardRef(FavouriteSolidIcon);

package/assets/web/icons/favourite.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function FavouriteIcon(props) {
+var React = require("react");
+function FavouriteIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M13.905 9.378 12 5.52l-1.905 3.86-4.259.618 3.082 3.004-.727 4.242L12 15.24l3.81 2.003-.728-4.242 3.082-3.004-4.26-.619ZM8.767 7.55l2.336-4.733a1 1 0 0 1 1.794 0l2.336 4.733 5.223.76a1 1 0 0 1 .555 1.705L17.23 13.7l.892 5.202a1 1 0 0 1-1.45 1.054L12 17.5l-4.672 2.456a1 1 0 0 1-1.451-1.054l.892-5.202-3.78-3.685a1 1 0 0 1 .555-1.706l5.223-.759Z"
@@ -14,4 +16,4 @@ function FavouriteIcon(props) {
 }
 ;
 FavouriteIcon.displayName = "FavouriteIcon";
-module.exports = FavouriteIcon;
+module.exports = React.forwardRef(FavouriteIcon);

package/assets/web/icons/favourite.d.ts

@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * favourite.svg
  */
-declare const FavouriteIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const FavouriteIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default FavouriteIcon;

package/assets/web/icons/favourite.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function FavouriteIcon(props) {
+function FavouriteIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M13.905 9.378 12 5.52l-1.905 3.86-4.259.618 3.082 3.004-.727 4.242L12 15.24l3.81 2.003-.728-4.242 3.082-3.004-4.26-.619ZM8.767 7.55l2.336-4.733a1 1 0 0 1 1.794 0l2.336 4.733 5.223.76a1 1 0 0 1 .555 1.705L17.23 13.7l.892 5.202a1 1 0 0 1-1.45 1.054L12 17.5l-4.672 2.456a1 1 0 0 1-1.451-1.054l.892-5.202-3.78-3.685a1 1 0 0 1 .555-1.706l5.223-.759Z"
@@ -14,4 +16,4 @@ function FavouriteIcon(props) {
 }
 ;
 FavouriteIcon.displayName = "FavouriteIcon";
-export default FavouriteIcon;
+export default forwardRef(FavouriteIcon);

package/assets/web/icons/file-error.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function FileErrorIcon(props) {
+var React = require("react");
+function FileErrorIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M6 22c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 20V4c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 6 2h7.175a1.975 1.975 0 0 1 1.4.575l4.85 4.85a1.975 1.975 0 0 1 .575 1.4v3.516A5.99 5.99 0 0 0 18 12V9h-4a.968.968 0 0 1-.713-.287A.967.967 0 0 1 13 8V4H6v16h6.341c.264.745.67 1.423 1.187 2H6Z"
@@ -16,4 +18,4 @@ function FileErrorIcon(props) {
 }
 ;
 FileErrorIcon.displayName = "FileErrorIcon";
-module.exports = FileErrorIcon;
+module.exports = React.forwardRef(FileErrorIcon);

package/assets/web/icons/file-error.d.ts

@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * file-error.svg
  */
-declare const FileErrorIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const FileErrorIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default FileErrorIcon;

package/assets/web/icons/file-error.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function FileErrorIcon(props) {
+function FileErrorIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M6 22c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 20V4c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 6 2h7.175a1.975 1.975 0 0 1 1.4.575l4.85 4.85a1.975 1.975 0 0 1 .575 1.4v3.516A5.99 5.99 0 0 0 18 12V9h-4a.968.968 0 0 1-.713-.287A.967.967 0 0 1 13 8V4H6v16h6.341c.264.745.67 1.423 1.187 2H6Z"
@@ -16,4 +18,4 @@ function FileErrorIcon(props) {
 }
 ;
 FileErrorIcon.displayName = "FileErrorIcon";
-export default FileErrorIcon;
+export default forwardRef(FileErrorIcon);

package/assets/web/icons/files.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function FilesIcon(props) {
+var React = require("react");
+function FilesIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M6 22c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 20V4c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 6 2h7.175a1.975 1.975 0 0 1 1.4.575l4.85 4.85a1.975 1.975 0 0 1 .575 1.4V20c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 22H6Zm7-14V4H6v16h12V9h-4a.968.968 0 0 1-.713-.287A.967.967 0 0 1 13 8Z"
@@ -14,4 +16,4 @@ function FilesIcon(props) {
 }
 ;
 FilesIcon.displayName = "FilesIcon";
-module.exports = FilesIcon;
+module.exports = React.forwardRef(FilesIcon);

package/assets/web/icons/files.d.ts

@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * files.svg
  */
-declare const FilesIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const FilesIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default FilesIcon;

package/assets/web/icons/files.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function FilesIcon(props) {
+function FilesIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M6 22c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 20V4c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 6 2h7.175a1.975 1.975 0 0 1 1.4.575l4.85 4.85a1.975 1.975 0 0 1 .575 1.4V20c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 22H6Zm7-14V4H6v16h12V9h-4a.968.968 0 0 1-.713-.287A.967.967 0 0 1 13 8Z"
@@ -14,4 +16,4 @@ function FilesIcon(props) {
 }
 ;
 FilesIcon.displayName = "FilesIcon";
-export default FilesIcon;
+export default forwardRef(FilesIcon);

package/assets/web/icons/filter.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function FilterIcon(props) {
+var React = require("react");
+function FilterIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M5 7a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2H5Zm3 4a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2H8Zm2 5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1Z"
@@ -14,4 +16,4 @@ function FilterIcon(props) {
 }
 ;
 FilterIcon.displayName = "FilterIcon";
-module.exports = FilterIcon;
+module.exports = React.forwardRef(FilterIcon);

package/assets/web/icons/filter.d.ts

@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * filter.svg
  */
-declare const FilterIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const FilterIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default FilterIcon;

package/assets/web/icons/filter.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function FilterIcon(props) {
+function FilterIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M5 7a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2H5Zm3 4a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2H8Zm2 5a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1Z"
@@ -14,4 +16,4 @@ function FilterIcon(props) {
 }
 ;
 FilterIcon.displayName = "FilterIcon";
-export default FilterIcon;
+export default forwardRef(FilterIcon);

package/assets/web/icons/forward.cjs

@@ -1,17 +1,19 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ForwardIcon(props) {
+var React = require("react");
+function ForwardIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
-      d: "M14.597 5.708a1.004 1.004 0 0 1 0-1.416.996.996 0 0 1 1.412 0l4.698 4.714c.39.391.39 1.025 0 1.416l-4.698 4.714a.996.996 0 0 1-1.412 0 1.004 1.004 0 0 1 0-1.416l3.043-3.053H8.487C6.599 10.667 5 12.27 5 14.333 5.001 16.396 6.6 18 8.487 18h2.093a1 1 0 1 1 0 2H8.487C5.42 20 3 17.425 3 14.333c0-3.091 2.42-5.666 5.486-5.666h9.059l-2.95-2.959Z"
+      d: "M14.597 5.708a1.004 1.004 0 0 1 0-1.416.996.996 0 0 1 1.412 0l4.699 4.714c.39.39.39 1.025 0 1.416l-4.7 4.714a.996.996 0 0 1-1.411 0 1.004 1.004 0 0 1 0-1.416l3.043-3.054H8.487C6.599 10.666 5 12.27 5 14.333 5.002 16.396 6.6 18 8.488 18h2.093a1 1 0 1 1 0 2H8.487C5.42 20 3 17.425 3 14.333c0-3.092 2.42-5.666 5.486-5.666h9.059l-2.95-2.959Z"
     })
   });
 }
 ;
 ForwardIcon.displayName = "ForwardIcon";
-module.exports = ForwardIcon;
+module.exports = React.forwardRef(ForwardIcon);

package/assets/web/icons/forward.d.ts

@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * forward.svg
  */
-declare const ForwardIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const ForwardIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default ForwardIcon;

package/assets/web/icons/forward.js

@@ -1,17 +1,19 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ForwardIcon(props) {
+function ForwardIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
-      d: "M14.597 5.708a1.004 1.004 0 0 1 0-1.416.996.996 0 0 1 1.412 0l4.698 4.714c.39.391.39 1.025 0 1.416l-4.698 4.714a.996.996 0 0 1-1.412 0 1.004 1.004 0 0 1 0-1.416l3.043-3.053H8.487C6.599 10.667 5 12.27 5 14.333 5.001 16.396 6.6 18 8.487 18h2.093a1 1 0 1 1 0 2H8.487C5.42 20 3 17.425 3 14.333c0-3.091 2.42-5.666 5.486-5.666h9.059l-2.95-2.959Z"
+      d: "M14.597 5.708a1.004 1.004 0 0 1 0-1.416.996.996 0 0 1 1.412 0l4.699 4.714c.39.39.39 1.025 0 1.416l-4.7 4.714a.996.996 0 0 1-1.411 0 1.004 1.004 0 0 1 0-1.416l3.043-3.054H8.487C6.599 10.666 5 12.27 5 14.333 5.002 16.396 6.6 18 8.488 18h2.093a1 1 0 1 1 0 2H8.487C5.42 20 3 17.425 3 14.333c0-3.092 2.42-5.666 5.486-5.666h9.059l-2.95-2.959Z"
     })
   });
 }
 ;
 ForwardIcon.displayName = "ForwardIcon";
-export default ForwardIcon;
+export default forwardRef(ForwardIcon);

package/assets/web/icons/grid.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function GridIcon(props) {
+var React = require("react");
+function GridIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M4 11a.967.967 0 0 1-.712-.287A.968.968 0 0 1 3 10V4c0-.283.096-.52.288-.712A.968.968 0 0 1 4 3h6a.97.97 0 0 1 .713.288A.968.968 0 0 1 11 4v6c0 .283-.096.52-.287.713A.968.968 0 0 1 10 11H4Zm5-2V5H5v4h4Zm5 12a.968.968 0 0 1-.713-.288A.968.968 0 0 1 13 20v-6c0-.283.096-.52.287-.713A.968.968 0 0 1 14 13h6a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v6c0 .283-.096.52-.288.712A.968.968 0 0 1 20 21h-6Zm5-2v-4h-4v4h4ZM4 21a.967.967 0 0 1-.712-.288A.968.968 0 0 1 3 20v-6a.97.97 0 0 1 .288-.713A.967.967 0 0 1 4 13h6c.283 0 .52.096.713.287.191.192.287.43.287.713v6a.97.97 0 0 1-.287.712A.968.968 0 0 1 10 21H4Zm5-2v-4H5v4h4Zm5-8a.968.968 0 0 1-.713-.287A.968.968 0 0 1 13 10V4a.97.97 0 0 1 .287-.712A.968.968 0 0 1 14 3h6c.283 0 .52.096.712.288A.965.965 0 0 1 21 4v6a.97.97 0 0 1-.288.713A.968.968 0 0 1 20 11h-6Zm5-2V5h-4v4h4Z"
@@ -14,4 +16,4 @@ function GridIcon(props) {
 }
 ;
 GridIcon.displayName = "GridIcon";
-module.exports = GridIcon;
+module.exports = React.forwardRef(GridIcon);

package/assets/web/icons/grid.d.ts

@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * grid.svg
  */
-declare const GridIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const GridIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default GridIcon;

package/assets/web/icons/grid.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function GridIcon(props) {
+function GridIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M4 11a.967.967 0 0 1-.712-.287A.968.968 0 0 1 3 10V4c0-.283.096-.52.288-.712A.968.968 0 0 1 4 3h6a.97.97 0 0 1 .713.288A.968.968 0 0 1 11 4v6c0 .283-.096.52-.287.713A.968.968 0 0 1 10 11H4Zm5-2V5H5v4h4Zm5 12a.968.968 0 0 1-.713-.288A.968.968 0 0 1 13 20v-6c0-.283.096-.52.287-.713A.968.968 0 0 1 14 13h6a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v6c0 .283-.096.52-.288.712A.968.968 0 0 1 20 21h-6Zm5-2v-4h-4v4h4ZM4 21a.967.967 0 0 1-.712-.288A.968.968 0 0 1 3 20v-6a.97.97 0 0 1 .288-.713A.967.967 0 0 1 4 13h6c.283 0 .52.096.713.287.191.192.287.43.287.713v6a.97.97 0 0 1-.287.712A.968.968 0 0 1 10 21H4Zm5-2v-4H5v4h4Zm5-8a.968.968 0 0 1-.713-.287A.968.968 0 0 1 13 10V4a.97.97 0 0 1 .287-.712A.968.968 0 0 1 14 3h6c.283 0 .52.096.712.288A.965.965 0 0 1 21 4v6a.97.97 0 0 1-.288.713A.968.968 0 0 1 20 11h-6Zm5-2V5h-4v4h4Z"
@@ -14,4 +16,4 @@ function GridIcon(props) {
 }
 ;
 GridIcon.displayName = "GridIcon";
-export default GridIcon;
+export default forwardRef(GridIcon);

package/assets/web/icons/help-solid.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function HelpSolidIcon(props) {
+var React = require("react");
+function HelpSolidIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12 22a9.738 9.738 0 0 0 3.9-.788 10.098 10.098 0 0 0 3.175-2.137c.9-.9 1.613-1.958 2.137-3.175A9.738 9.738 0 0 0 22 12a9.738 9.738 0 0 0-.788-3.9 10.099 10.099 0 0 0-2.137-3.175c-.9-.9-1.958-1.612-3.175-2.137A9.738 9.738 0 0 0 12 2a9.738 9.738 0 0 0-3.9.788 10.099 10.099 0 0 0-3.175 2.137c-.9.9-1.612 1.958-2.137 3.175A9.738 9.738 0 0 0 2 12a9.74 9.74 0 0 0 .788 3.9 10.098 10.098 0 0 0 2.137 3.175c.9.9 1.958 1.613 3.175 2.137A9.738 9.738 0 0 0 12 22Zm0-14a1.5 1.5 0 0 0-1.5 1.5 1 1 0 1 1-2 0 3.5 3.5 0 1 1 6.01 2.439c-.122.126-.24.243-.352.355-.287.288-.54.54-.76.824-.293.375-.398.651-.398.882a1 1 0 1 1-2 0c0-.874.407-1.58.819-2.11.305-.392.688-.775 1-1.085l.257-.26A1.5 1.5 0 0 0 12 8Zm1 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
@@ -14,4 +16,4 @@ function HelpSolidIcon(props) {
 }
 ;
 HelpSolidIcon.displayName = "HelpSolidIcon";
-module.exports = HelpSolidIcon;
+module.exports = React.forwardRef(HelpSolidIcon);

package/assets/web/icons/help-solid.d.ts

@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * help-solid.svg
  */
-declare const HelpSolidIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const HelpSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default HelpSolidIcon;

package/assets/web/icons/help-solid.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function HelpSolidIcon(props) {
+function HelpSolidIcon(props, ref) {
   return /*#__PURE__*/_jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: /*#__PURE__*/_jsx("path", {
       d: "M12 22a9.738 9.738 0 0 0 3.9-.788 10.098 10.098 0 0 0 3.175-2.137c.9-.9 1.613-1.958 2.137-3.175A9.738 9.738 0 0 0 22 12a9.738 9.738 0 0 0-.788-3.9 10.099 10.099 0 0 0-2.137-3.175c-.9-.9-1.958-1.612-3.175-2.137A9.738 9.738 0 0 0 12 2a9.738 9.738 0 0 0-3.9.788 10.099 10.099 0 0 0-3.175 2.137c-.9.9-1.612 1.958-2.137 3.175A9.738 9.738 0 0 0 2 12a9.74 9.74 0 0 0 .788 3.9 10.098 10.098 0 0 0 2.137 3.175c.9.9 1.958 1.613 3.175 2.137A9.738 9.738 0 0 0 12 22Zm0-14a1.5 1.5 0 0 0-1.5 1.5 1 1 0 1 1-2 0 3.5 3.5 0 1 1 6.01 2.439c-.122.126-.24.243-.352.355-.287.288-.54.54-.76.824-.293.375-.398.651-.398.882a1 1 0 1 1-2 0c0-.874.407-1.58.819-2.11.305-.392.688-.775 1-1.085l.257-.26A1.5 1.5 0 0 0 12 8Zm1 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
@@ -14,4 +16,4 @@ function HelpSolidIcon(props) {
 }
 ;
 HelpSolidIcon.displayName = "HelpSolidIcon";
-export default HelpSolidIcon;
+export default forwardRef(HelpSolidIcon);

package/assets/web/icons/help.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function HelpIcon(props) {
+var React = require("react");
+function HelpIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M12 8a1.5 1.5 0 0 0-1.5 1.5 1 1 0 1 1-2 0 3.5 3.5 0 1 1 6.01 2.439c-.122.126-.24.243-.352.355-.287.288-.54.54-.76.824-.293.375-.398.651-.398.882a1 1 0 1 1-2 0c0-.874.407-1.58.819-2.11.305-.392.688-.775 1-1.085l.257-.26A1.5 1.5 0 0 0 12 8Zm1 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
@@ -16,4 +18,4 @@ function HelpIcon(props) {
 }
 ;
 HelpIcon.displayName = "HelpIcon";
-module.exports = HelpIcon;
+module.exports = React.forwardRef(HelpIcon);

package/assets/web/icons/help.d.ts

@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * help.svg
  */
-declare const HelpIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const HelpIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default HelpIcon;

package/assets/web/icons/help.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function HelpIcon(props) {
+function HelpIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M12 8a1.5 1.5 0 0 0-1.5 1.5 1 1 0 1 1-2 0 3.5 3.5 0 1 1 6.01 2.439c-.122.126-.24.243-.352.355-.287.288-.54.54-.76.824-.293.375-.398.651-.398.882a1 1 0 1 1-2 0c0-.874.407-1.58.819-2.11.305-.392.688-.775 1-1.085l.257-.26A1.5 1.5 0 0 0 12 8Zm1 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
@@ -16,4 +18,4 @@ function HelpIcon(props) {
 }
 ;
 HelpIcon.displayName = "HelpIcon";
-export default HelpIcon;
+export default forwardRef(HelpIcon);

package/assets/web/icons/history.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function HistoryIcon(props) {
+var React = require("react");
+function HistoryIcon(props, ref) {
   return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
       d: "M18.93 8A8 8 0 1 1 4 12a1 1 0 1 0-2 0c0 5.523 4.477 10 10 10s10-4.477 10-10a9.966 9.966 0 0 0-.832-4A10.002 10.002 0 0 0 12 2a9.985 9.985 0 0 0-8 3.999V4a1 1 0 0 0-2 0v4a1 1 0 0 0 1 1h4a1 1 0 0 0 0-2H5.755A7.985 7.985 0 0 1 12 4a7.997 7.997 0 0 1 6.93 4Z"
@@ -16,4 +18,4 @@ function HistoryIcon(props) {
 }
 ;
 HistoryIcon.displayName = "HistoryIcon";
-module.exports = HistoryIcon;
+module.exports = React.forwardRef(HistoryIcon);

package/assets/web/icons/history.d.ts

@@ -1,10 +1,11 @@
-import * as React from "react";
+import React from "react";
 
 /**
  * history.svg
  */
-declare const HistoryIcon: React.FunctionComponent<
-    React.ComponentProps<"svg">
+declare const HistoryIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
 >;
 
 export default HistoryIcon;

package/assets/web/icons/history.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function HistoryIcon(props) {
+function HistoryIcon(props, ref) {
   return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     fill: "currentColor",
     viewBox: "0 0 24 24",
+    ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
       d: "M18.93 8A8 8 0 1 1 4 12a1 1 0 1 0-2 0c0 5.523 4.477 10 10 10s10-4.477 10-10a9.966 9.966 0 0 0-.832-4A10.002 10.002 0 0 0 12 2a9.985 9.985 0 0 0-8 3.999V4a1 1 0 0 0-2 0v4a1 1 0 0 0 1 1h4a1 1 0 0 0 0-2H5.755A7.985 7.985 0 0 1 12 4a7.997 7.997 0 0 1 6.93 4Z"
@@ -16,4 +18,4 @@ function HistoryIcon(props) {
 }
 ;
 HistoryIcon.displayName = "HistoryIcon";
-export default HistoryIcon;
+export default forwardRef(HistoryIcon);