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

package/assets/web/icons/compose.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ComposeIcon(props) {
+var React = require("react");
+function ComposeIcon(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",
@@ -22,4 +24,4 @@ function ComposeIcon(props) {
 }
 ;
 ComposeIcon.displayName = "ComposeIcon";
-module.exports = ComposeIcon;
+module.exports = React.forwardRef(ComposeIcon);

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

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

package/assets/web/icons/compose.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function ComposeIcon(props) {
+function ComposeIcon(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",
@@ -22,4 +24,4 @@ function ComposeIcon(props) {
 }
 ;
 ComposeIcon.displayName = "ComposeIcon";
-export default ComposeIcon;
+export default forwardRef(ComposeIcon);

package/assets/web/icons/computer.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ComputerIcon(props) {
+var React = require("react");
+function ComputerIcon(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 18c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 16V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 4 3h16c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v11c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 18H4Zm0-2h16V5H4v11Zm-2 5a.967.967 0 0 1-.712-.288A.968.968 0 0 1 1 20c0-.283.096-.52.288-.712A.967.967 0 0 1 2 19h20c.283 0 .52.096.712.288.192.191.288.429.288.712s-.096.52-.288.712A.968.968 0 0 1 22 21H2Z"
@@ -14,4 +16,4 @@ function ComputerIcon(props) {
 }
 ;
 ComputerIcon.displayName = "ComputerIcon";
-module.exports = ComputerIcon;
+module.exports = React.forwardRef(ComputerIcon);

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

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

package/assets/web/icons/computer.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ComputerIcon(props) {
+function ComputerIcon(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 18c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 16V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 4 3h16c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v11c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 18H4Zm0-2h16V5H4v11Zm-2 5a.967.967 0 0 1-.712-.288A.968.968 0 0 1 1 20c0-.283.096-.52.288-.712A.967.967 0 0 1 2 19h20c.283 0 .52.096.712.288.192.191.288.429.288.712s-.096.52-.288.712A.968.968 0 0 1 22 21H2Z"
@@ -14,4 +16,4 @@ function ComputerIcon(props) {
 }
 ;
 ComputerIcon.displayName = "ComputerIcon";
-export default ComputerIcon;
+export default forwardRef(ComputerIcon);

package/assets/web/icons/copy.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function CopyIcon(props) {
+var React = require("react");
+function CopyIcon(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 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0V5Z"
@@ -16,4 +18,4 @@ function CopyIcon(props) {
 }
 ;
 CopyIcon.displayName = "CopyIcon";
-module.exports = CopyIcon;
+module.exports = React.forwardRef(CopyIcon);

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

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

package/assets/web/icons/copy.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function CopyIcon(props) {
+function CopyIcon(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 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0V5Z"
@@ -16,4 +18,4 @@ function CopyIcon(props) {
 }
 ;
 CopyIcon.displayName = "CopyIcon";
-export default CopyIcon;
+export default forwardRef(CopyIcon);

package/assets/web/icons/dark-mode.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function DarkModeIcon(props) {
+var React = require("react");
+function DarkModeIcon(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 DarkModeIcon(props) {
 }
 ;
 DarkModeIcon.displayName = "DarkModeIcon";
-module.exports = DarkModeIcon;
+module.exports = React.forwardRef(DarkModeIcon);

package/assets/web/icons/dark-mode.d.ts

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

package/assets/web/icons/dark-mode.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function DarkModeIcon(props) {
+function DarkModeIcon(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 DarkModeIcon(props) {
 }
 ;
 DarkModeIcon.displayName = "DarkModeIcon";
-export default DarkModeIcon;
+export default forwardRef(DarkModeIcon);

package/assets/web/icons/delete.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function DeleteIcon(props) {
+var React = require("react");
+function DeleteIcon(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 21c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 5 19V6a.968.968 0 0 1-.713-.287A.968.968 0 0 1 4 5c0-.283.096-.52.287-.713A.968.968 0 0 1 5 4h4a.97.97 0 0 1 .287-.712A.968.968 0 0 1 10 3h4a.97.97 0 0 1 .713.288A.968.968 0 0 1 15 4h4a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 19 6v13c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 17 21H7ZM7 6v13h10V6H7Zm2 10c0 .283.096.52.287.712.192.192.43.288.713.288s.52-.096.713-.288A.968.968 0 0 0 11 16V9a.967.967 0 0 0-.287-.713A.968.968 0 0 0 10 8a.968.968 0 0 0-.713.287A.968.968 0 0 0 9 9v7Zm4 0c0 .283.096.52.287.712.192.192.43.288.713.288s.52-.096.713-.288A.968.968 0 0 0 15 16V9a.967.967 0 0 0-.287-.713A.968.968 0 0 0 14 8a.968.968 0 0 0-.713.287A.967.967 0 0 0 13 9v7Z"
@@ -14,4 +16,4 @@ function DeleteIcon(props) {
 }
 ;
 DeleteIcon.displayName = "DeleteIcon";
-module.exports = DeleteIcon;
+module.exports = React.forwardRef(DeleteIcon);

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

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

package/assets/web/icons/delete.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function DeleteIcon(props) {
+function DeleteIcon(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 21c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 5 19V6a.968.968 0 0 1-.713-.287A.968.968 0 0 1 4 5c0-.283.096-.52.287-.713A.968.968 0 0 1 5 4h4a.97.97 0 0 1 .287-.712A.968.968 0 0 1 10 3h4a.97.97 0 0 1 .713.288A.968.968 0 0 1 15 4h4a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 19 6v13c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 17 21H7ZM7 6v13h10V6H7Zm2 10c0 .283.096.52.287.712.192.192.43.288.713.288s.52-.096.713-.288A.968.968 0 0 0 11 16V9a.967.967 0 0 0-.287-.713A.968.968 0 0 0 10 8a.968.968 0 0 0-.713.287A.968.968 0 0 0 9 9v7Zm4 0c0 .283.096.52.287.712.192.192.43.288.713.288s.52-.096.713-.288A.968.968 0 0 0 15 16V9a.967.967 0 0 0-.287-.713A.968.968 0 0 0 14 8a.968.968 0 0 0-.713.287A.967.967 0 0 0 13 9v7Z"
@@ -14,4 +16,4 @@ function DeleteIcon(props) {
 }
 ;
 DeleteIcon.displayName = "DeleteIcon";
-export default DeleteIcon;
+export default forwardRef(DeleteIcon);

package/assets/web/icons/devices.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function DevicesIcon(props) {
+var React = require("react");
+function DevicesIcon(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 20c-.417 0-.77-.146-1.063-.438A1.447 1.447 0 0 1 2 18.5c0-.417.146-.77.438-1.063A1.446 1.446 0 0 1 3.5 17H4V6c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 4h14a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 20 6H6v11h4.5c.417 0 .77.146 1.063.438.291.291.437.645.437 1.062 0 .417-.146.77-.438 1.063A1.446 1.446 0 0 1 10.5 20h-7ZM15 20a.968.968 0 0 1-.713-.288A.968.968 0 0 1 14 19V9c0-.283.096-.52.287-.713A.968.968 0 0 1 15 8h6a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v10c0 .283-.096.52-.288.712A.968.968 0 0 1 21 20h-6Zm1-3h4v-7h-4v7Z"
@@ -14,4 +16,4 @@ function DevicesIcon(props) {
 }
 ;
 DevicesIcon.displayName = "DevicesIcon";
-module.exports = DevicesIcon;
+module.exports = React.forwardRef(DevicesIcon);

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

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

package/assets/web/icons/devices.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function DevicesIcon(props) {
+function DevicesIcon(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 20c-.417 0-.77-.146-1.063-.438A1.447 1.447 0 0 1 2 18.5c0-.417.146-.77.438-1.063A1.446 1.446 0 0 1 3.5 17H4V6c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 4h14a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 20 6H6v11h4.5c.417 0 .77.146 1.063.438.291.291.437.645.437 1.062 0 .417-.146.77-.438 1.063A1.446 1.446 0 0 1 10.5 20h-7ZM15 20a.968.968 0 0 1-.713-.288A.968.968 0 0 1 14 19V9c0-.283.096-.52.287-.713A.968.968 0 0 1 15 8h6a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v10c0 .283-.096.52-.288.712A.968.968 0 0 1 21 20h-6Zm1-3h4v-7h-4v7Z"
@@ -14,4 +16,4 @@ function DevicesIcon(props) {
 }
 ;
 DevicesIcon.displayName = "DevicesIcon";
-export default DevicesIcon;
+export default forwardRef(DevicesIcon);

package/assets/web/icons/document.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function DocumentIcon(props) {
+var React = require("react");
+function DocumentIcon(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: "M9 18h6a.97.97 0 0 0 .713-.288A.968.968 0 0 0 16 17a.968.968 0 0 0-.287-.712A.968.968 0 0 0 15 16H9a.967.967 0 0 0-.713.288A.968.968 0 0 0 8 17c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 16 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 15 12H9a.967.967 0 0 0-.713.287A.968.968 0 0 0 8 13c0 .283.096.52.287.713.192.191.43.287.713.287Zm-3 8c-.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 DocumentIcon(props) {
 }
 ;
 DocumentIcon.displayName = "DocumentIcon";
-module.exports = DocumentIcon;
+module.exports = React.forwardRef(DocumentIcon);

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

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

package/assets/web/icons/document.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function DocumentIcon(props) {
+function DocumentIcon(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: "M9 18h6a.97.97 0 0 0 .713-.288A.968.968 0 0 0 16 17a.968.968 0 0 0-.287-.712A.968.968 0 0 0 15 16H9a.967.967 0 0 0-.713.288A.968.968 0 0 0 8 17c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 16 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 15 12H9a.967.967 0 0 0-.713.287A.968.968 0 0 0 8 13c0 .283.096.52.287.713.192.191.43.287.713.287Zm-3 8c-.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 DocumentIcon(props) {
 }
 ;
 DocumentIcon.displayName = "DocumentIcon";
-export default DocumentIcon;
+export default forwardRef(DocumentIcon);

package/assets/web/icons/download.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function DownloadIcon(props) {
+var React = require("react");
+function DownloadIcon(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 15.575c-.133 0-.258-.02-.375-.063a.877.877 0 0 1-.325-.212l-3.6-3.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7c.183-.183.42-.28.712-.288.292-.008.53.08.713.263L11 12.15V5c0-.283.096-.52.287-.713A.968.968 0 0 1 12 4c.283 0 .52.096.713.287.191.192.287.43.287.713v7.15l1.875-1.875c.183-.183.42-.27.713-.263.291.009.529.105.712.288a.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-3.6 3.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063ZM6 20c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 18v-2c0-.283.096-.52.287-.713A.967.967 0 0 1 5 15c.283 0 .52.096.713.287.191.192.287.43.287.713v2h12v-2a.97.97 0 0 1 .288-.713A.968.968 0 0 1 19 15a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v2c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 20H6Z"
@@ -14,4 +16,4 @@ function DownloadIcon(props) {
 }
 ;
 DownloadIcon.displayName = "DownloadIcon";
-module.exports = DownloadIcon;
+module.exports = React.forwardRef(DownloadIcon);

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

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

package/assets/web/icons/download.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function DownloadIcon(props) {
+function DownloadIcon(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 15.575c-.133 0-.258-.02-.375-.063a.877.877 0 0 1-.325-.212l-3.6-3.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7c.183-.183.42-.28.712-.288.292-.008.53.08.713.263L11 12.15V5c0-.283.096-.52.287-.713A.968.968 0 0 1 12 4c.283 0 .52.096.713.287.191.192.287.43.287.713v7.15l1.875-1.875c.183-.183.42-.27.713-.263.291.009.529.105.712.288a.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-3.6 3.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063ZM6 20c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 18v-2c0-.283.096-.52.287-.713A.967.967 0 0 1 5 15c.283 0 .52.096.713.287.191.192.287.43.287.713v2h12v-2a.97.97 0 0 1 .288-.713A.968.968 0 0 1 19 15a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v2c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 20H6Z"
@@ -14,4 +16,4 @@ function DownloadIcon(props) {
 }
 ;
 DownloadIcon.displayName = "DownloadIcon";
-export default DownloadIcon;
+export default forwardRef(DownloadIcon);

package/assets/web/icons/drag-grid.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function DragGridIcon(props) {
+var React = require("react");
+function DragGridIcon(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: "M9 20c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 7 18c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 9 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 9 20Zm6 0c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 13 18c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 15 16c.55 0 1.02.196 1.413.587.391.392.587.863.587 1.413s-.196 1.02-.587 1.413A1.926 1.926 0 0 1 15 20Zm-6-6c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 7 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 9 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 9 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 13 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 15 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 15 14ZM9 8c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 7 6c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 9 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 9 8Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 13 6c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 15 4c.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 15 8Z"
@@ -14,4 +16,4 @@ function DragGridIcon(props) {
 }
 ;
 DragGridIcon.displayName = "DragGridIcon";
-module.exports = DragGridIcon;
+module.exports = React.forwardRef(DragGridIcon);

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

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

package/assets/web/icons/drag-grid.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function DragGridIcon(props) {
+function DragGridIcon(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: "M9 20c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 7 18c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 9 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 9 20Zm6 0c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 13 18c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 15 16c.55 0 1.02.196 1.413.587.391.392.587.863.587 1.413s-.196 1.02-.587 1.413A1.926 1.926 0 0 1 15 20Zm-6-6c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 7 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 9 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 9 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 13 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 15 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 15 14ZM9 8c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 7 6c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 9 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 9 8Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 13 6c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 15 4c.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 15 8Z"
@@ -14,4 +16,4 @@ function DragGridIcon(props) {
 }
 ;
 DragGridIcon.displayName = "DragGridIcon";
-export default DragGridIcon;
+export default forwardRef(DragGridIcon);

package/assets/web/icons/drag-list.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function DragListIcon(props) {
+var React = require("react");
+function DragListIcon(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 15a.967.967 0 0 1-.713-.287A.968.968 0 0 1 4 14c0-.283.096-.52.287-.713A.967.967 0 0 1 5 13h14a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 19 15H5Zm0-4a.967.967 0 0 1-.713-.287A.968.968 0 0 1 4 10c0-.283.096-.52.287-.713A.968.968 0 0 1 5 9h14a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 19 11H5Z"
@@ -14,4 +16,4 @@ function DragListIcon(props) {
 }
 ;
 DragListIcon.displayName = "DragListIcon";
-module.exports = DragListIcon;
+module.exports = React.forwardRef(DragListIcon);

package/assets/web/icons/drag-list.d.ts

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

package/assets/web/icons/drag-list.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function DragListIcon(props) {
+function DragListIcon(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 15a.967.967 0 0 1-.713-.287A.968.968 0 0 1 4 14c0-.283.096-.52.287-.713A.967.967 0 0 1 5 13h14a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 19 15H5Zm0-4a.967.967 0 0 1-.713-.287A.968.968 0 0 1 4 10c0-.283.096-.52.287-.713A.968.968 0 0 1 5 9h14a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 19 11H5Z"
@@ -14,4 +16,4 @@ function DragListIcon(props) {
 }
 ;
 DragListIcon.displayName = "DragListIcon";
-export default DragListIcon;
+export default forwardRef(DragListIcon);