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

package/assets/web/icons/chevron-right.cjs

@@ -1,17 +1,19 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ChevronRightIcon(props) {
+var React = require("react");
+function ChevronRightIcon(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.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+      d: "M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
     })
   });
 }
 ;
 ChevronRightIcon.displayName = "ChevronRightIcon";
-module.exports = ChevronRightIcon;
+module.exports = React.forwardRef(ChevronRightIcon);

package/assets/web/icons/chevron-right.d.ts

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

package/assets/web/icons/chevron-right.js

@@ -1,17 +1,19 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ChevronRightIcon(props) {
+function ChevronRightIcon(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.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.876.876 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+      d: "M8.7 17.3a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l3.9-3.9-3.9-3.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.6 4.6c.1.1.17.208.213.325.041.117.062.242.062.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-4.6 4.6a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
     })
   });
 }
 ;
 ChevronRightIcon.displayName = "ChevronRightIcon";
-export default ChevronRightIcon;
+export default forwardRef(ChevronRightIcon);

package/assets/web/icons/chevron-up-down.cjs

@@ -1,17 +1,19 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ChevronUpDownIcon(props) {
+var React = require("react");
+function ChevronUpDownIcon(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.225 8.325C8.042 8.142 7.95 7.9 7.95 7.6s.092-.542.275-.725L11.3 3.8c.1-.1.208-.17.325-.213a1.218 1.218 0 0 1 .762 0 .68.68 0 0 1 .313.213l3.1 3.1c.183.183.27.42.262.712-.008.292-.104.53-.287.713-.183.183-.425.275-.725.275s-.542-.092-.725-.275L12 6 9.65 8.35c-.183.183-.42.27-.713.262a1.007 1.007 0 0 1-.712-.287ZM12 20.575a.941.941 0 0 1-.375-.075 1.315 1.315 0 0 1-.325-.2l-3.075-3.075c-.183-.183-.275-.425-.275-.725s.092-.542.275-.725c.183-.183.425-.275.725-.275s.542.092.725.275L12 18.1l2.35-2.35c.183-.183.42-.27.713-.262.291.008.529.104.712.287.183.183.275.425.275.725s-.092.542-.275.725L12.7 20.3a1.034 1.034 0 0 1-.7.275Z"
+      d: "M8.225 8.325C8.042 8.142 7.95 7.9 7.95 7.6s.092-.542.275-.725L11.3 3.8c.1-.1.208-.17.325-.212a1.18 1.18 0 0 1 .762 0c.125.041.23.112.313.212l3.1 3.1c.183.183.27.42.262.713a1.006 1.006 0 0 1-.287.712c-.183.183-.425.275-.725.275s-.542-.092-.725-.275L12 6 9.65 8.35c-.183.183-.42.27-.712.263a1.007 1.007 0 0 1-.713-.288ZM12 20.575a.942.942 0 0 1-.375-.075 1.312 1.312 0 0 1-.325-.2l-3.075-3.075c-.183-.183-.275-.425-.275-.725s.092-.542.275-.725c.183-.183.425-.275.725-.275s.542.092.725.275L12 18.1l2.35-2.35c.183-.183.42-.27.713-.262.291.008.529.104.712.287.183.183.275.425.275.725s-.092.542-.275.725L12.7 20.3a1.034 1.034 0 0 1-.7.275Z"
     })
   });
 }
 ;
 ChevronUpDownIcon.displayName = "ChevronUpDownIcon";
-module.exports = ChevronUpDownIcon;
+module.exports = React.forwardRef(ChevronUpDownIcon);

package/assets/web/icons/chevron-up-down.d.ts

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

package/assets/web/icons/chevron-up-down.js

@@ -1,17 +1,19 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ChevronUpDownIcon(props) {
+function ChevronUpDownIcon(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.225 8.325C8.042 8.142 7.95 7.9 7.95 7.6s.092-.542.275-.725L11.3 3.8c.1-.1.208-.17.325-.213a1.218 1.218 0 0 1 .762 0 .68.68 0 0 1 .313.213l3.1 3.1c.183.183.27.42.262.712-.008.292-.104.53-.287.713-.183.183-.425.275-.725.275s-.542-.092-.725-.275L12 6 9.65 8.35c-.183.183-.42.27-.713.262a1.007 1.007 0 0 1-.712-.287ZM12 20.575a.941.941 0 0 1-.375-.075 1.315 1.315 0 0 1-.325-.2l-3.075-3.075c-.183-.183-.275-.425-.275-.725s.092-.542.275-.725c.183-.183.425-.275.725-.275s.542.092.725.275L12 18.1l2.35-2.35c.183-.183.42-.27.713-.262.291.008.529.104.712.287.183.183.275.425.275.725s-.092.542-.275.725L12.7 20.3a1.034 1.034 0 0 1-.7.275Z"
+      d: "M8.225 8.325C8.042 8.142 7.95 7.9 7.95 7.6s.092-.542.275-.725L11.3 3.8c.1-.1.208-.17.325-.212a1.18 1.18 0 0 1 .762 0c.125.041.23.112.313.212l3.1 3.1c.183.183.27.42.262.713a1.006 1.006 0 0 1-.287.712c-.183.183-.425.275-.725.275s-.542-.092-.725-.275L12 6 9.65 8.35c-.183.183-.42.27-.712.263a1.007 1.007 0 0 1-.713-.288ZM12 20.575a.942.942 0 0 1-.375-.075 1.312 1.312 0 0 1-.325-.2l-3.075-3.075c-.183-.183-.275-.425-.275-.725s.092-.542.275-.725c.183-.183.425-.275.725-.275s.542.092.725.275L12 18.1l2.35-2.35c.183-.183.42-.27.713-.262.291.008.529.104.712.287.183.183.275.425.275.725s-.092.542-.275.725L12.7 20.3a1.034 1.034 0 0 1-.7.275Z"
     })
   });
 }
 ;
 ChevronUpDownIcon.displayName = "ChevronUpDownIcon";
-export default ChevronUpDownIcon;
+export default forwardRef(ChevronUpDownIcon);

package/assets/web/icons/chevron-up.cjs

@@ -1,17 +1,19 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ChevronUpIcon(props) {
+var React = require("react");
+function ChevronUpIcon(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 10.775-3.9 3.9a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l4.6-4.6c.1-.1.208-.17.325-.213.117-.041.242-.062.375-.062s.258.02.375.062a.878.878 0 0 1 .325.213l4.6 4.6a.948.948 0 0 1 .275.7.949.949 0 0 1-.275.7.949.949 0 0 1-.7.275.948.948 0 0 1-.7-.275l-3.9-3.9Z"
+      d: "m12 10.775-3.9 3.9a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l4.6-4.6c.1-.1.208-.17.325-.213.117-.041.242-.062.375-.062s.258.02.375.062a.877.877 0 0 1 .325.213l4.6 4.6a.948.948 0 0 1 .275.7.949.949 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275l-3.9-3.9Z"
     })
   });
 }
 ;
 ChevronUpIcon.displayName = "ChevronUpIcon";
-module.exports = ChevronUpIcon;
+module.exports = React.forwardRef(ChevronUpIcon);

package/assets/web/icons/chevron-up.d.ts

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

package/assets/web/icons/chevron-up.js

@@ -1,17 +1,19 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ChevronUpIcon(props) {
+function ChevronUpIcon(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 10.775-3.9 3.9a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l4.6-4.6c.1-.1.208-.17.325-.213.117-.041.242-.062.375-.062s.258.02.375.062a.878.878 0 0 1 .325.213l4.6 4.6a.948.948 0 0 1 .275.7.949.949 0 0 1-.275.7.949.949 0 0 1-.7.275.948.948 0 0 1-.7-.275l-3.9-3.9Z"
+      d: "m12 10.775-3.9 3.9a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l4.6-4.6c.1-.1.208-.17.325-.213.117-.041.242-.062.375-.062s.258.02.375.062a.877.877 0 0 1 .325.213l4.6 4.6a.948.948 0 0 1 .275.7.949.949 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275l-3.9-3.9Z"
     })
   });
 }
 ;
 ChevronUpIcon.displayName = "ChevronUpIcon";
-export default ChevronUpIcon;
+export default forwardRef(ChevronUpIcon);

package/assets/web/icons/circle.cjs

@@ -1,17 +1,19 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function CircleIcon(props) {
+var React = require("react");
+function CircleIcon(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 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137A10.1 10.1 0 0 1 2.788 15.9 9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.787 10.098 10.098 0 0 1 3.175 2.138c.9.9 1.613 1.958 2.137 3.175A9.737 9.737 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 2.233.775 4.125 2.325 5.675C7.875 19.225 9.767 20 12 20Z"
+      d: "M12 22a9.737 9.737 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.613-1.958-2.138-3.175A9.737 9.737 0 0 1 2 12a9.74 9.74 0 0 1 .787-3.9 10.099 10.099 0 0 1 2.138-3.175c.9-.9 1.958-1.612 3.175-2.137A9.737 9.737 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.612 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.737 9.737 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.737 9.737 0 0 1 12 22Zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 2.233.775 4.125 2.325 5.675C7.875 19.225 9.767 20 12 20Z"
     })
   });
 }
 ;
 CircleIcon.displayName = "CircleIcon";
-module.exports = CircleIcon;
+module.exports = React.forwardRef(CircleIcon);

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

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

package/assets/web/icons/circle.js

@@ -1,17 +1,19 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function CircleIcon(props) {
+function CircleIcon(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 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137A10.1 10.1 0 0 1 2.788 15.9 9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.787 10.098 10.098 0 0 1 3.175 2.138c.9.9 1.613 1.958 2.137 3.175A9.737 9.737 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 2.233.775 4.125 2.325 5.675C7.875 19.225 9.767 20 12 20Z"
+      d: "M12 22a9.737 9.737 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.613-1.958-2.138-3.175A9.737 9.737 0 0 1 2 12a9.74 9.74 0 0 1 .787-3.9 10.099 10.099 0 0 1 2.138-3.175c.9-.9 1.958-1.612 3.175-2.137A9.737 9.737 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.612 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.737 9.737 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.737 9.737 0 0 1 12 22Zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 2.233.775 4.125 2.325 5.675C7.875 19.225 9.767 20 12 20Z"
     })
   });
 }
 ;
 CircleIcon.displayName = "CircleIcon";
-export default CircleIcon;
+export default forwardRef(CircleIcon);

package/assets/web/icons/close.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function CloseIcon(props) {
+var React = require("react");
+function CloseIcon(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.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
@@ -14,4 +16,4 @@ function CloseIcon(props) {
 }
 ;
 CloseIcon.displayName = "CloseIcon";
-module.exports = CloseIcon;
+module.exports = React.forwardRef(CloseIcon);

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

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

package/assets/web/icons/close.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function CloseIcon(props) {
+function CloseIcon(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.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
@@ -14,4 +16,4 @@ function CloseIcon(props) {
 }
 ;
 CloseIcon.displayName = "CloseIcon";
-export default CloseIcon;
+export default forwardRef(CloseIcon);

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

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function CloudSolidIcon(props) {
+var React = require("react");
+function CloudSolidIcon(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 20a5 5 0 0 1-.985-9.903 5.5 5.5 0 0 1 9.734-3.09 4 4 0 0 1 4.187 4.708A4.5 4.5 0 0 1 18 19.973V20H7Z"
@@ -14,4 +16,4 @@ function CloudSolidIcon(props) {
 }
 ;
 CloudSolidIcon.displayName = "CloudSolidIcon";
-module.exports = CloudSolidIcon;
+module.exports = React.forwardRef(CloudSolidIcon);

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

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

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

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function CloudSolidIcon(props) {
+function CloudSolidIcon(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 20a5 5 0 0 1-.985-9.903 5.5 5.5 0 0 1 9.734-3.09 4 4 0 0 1 4.187 4.708A4.5 4.5 0 0 1 18 19.973V20H7Z"
@@ -14,4 +16,4 @@ function CloudSolidIcon(props) {
 }
 ;
 CloudSolidIcon.displayName = "CloudSolidIcon";
-export default CloudSolidIcon;
+export default forwardRef(CloudSolidIcon);

package/assets/web/icons/cloud.cjs

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

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

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

package/assets/web/icons/cloud.js

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

package/assets/web/icons/code.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function CodeIcon(props) {
+var React = require("react");
+function CodeIcon(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.825 12 1.475-1.475c.2-.2.3-.433.3-.7 0-.267-.1-.5-.3-.7-.2-.2-.438-.3-.713-.3-.274 0-.512.1-.712.3L6.7 11.3c-.1.1-.17.208-.213.325a1.107 1.107 0 0 0-.062.375c0 .133.02.258.063.375a.877.877 0 0 0 .212.325l2.175 2.175c.2.2.438.3.713.3.275 0 .512-.1.712-.3.2-.2.3-.433.3-.7 0-.267-.1-.5-.3-.7L8.825 12Zm6.35 0L13.7 13.475c-.2.2-.3.433-.3.7 0 .267.1.5.3.7.2.2.438.3.713.3.274 0 .512-.1.712-.3L17.3 12.7c.1-.1.17-.208.212-.325.042-.117.063-.242.063-.375s-.02-.258-.063-.375a.877.877 0 0 0-.212-.325l-2.175-2.175a.999.999 0 0 0-1.425 0c-.2.2-.3.433-.3.7 0 .267.1.5.3.7L15.175 12ZM5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h14c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm0-2h14V5H5v14Z"
@@ -14,4 +16,4 @@ function CodeIcon(props) {
 }
 ;
 CodeIcon.displayName = "CodeIcon";
-module.exports = CodeIcon;
+module.exports = React.forwardRef(CodeIcon);

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

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

package/assets/web/icons/code.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function CodeIcon(props) {
+function CodeIcon(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.825 12 1.475-1.475c.2-.2.3-.433.3-.7 0-.267-.1-.5-.3-.7-.2-.2-.438-.3-.713-.3-.274 0-.512.1-.712.3L6.7 11.3c-.1.1-.17.208-.213.325a1.107 1.107 0 0 0-.062.375c0 .133.02.258.063.375a.877.877 0 0 0 .212.325l2.175 2.175c.2.2.438.3.713.3.275 0 .512-.1.712-.3.2-.2.3-.433.3-.7 0-.267-.1-.5-.3-.7L8.825 12Zm6.35 0L13.7 13.475c-.2.2-.3.433-.3.7 0 .267.1.5.3.7.2.2.438.3.713.3.274 0 .512-.1.712-.3L17.3 12.7c.1-.1.17-.208.212-.325.042-.117.063-.242.063-.375s-.02-.258-.063-.375a.877.877 0 0 0-.212-.325l-2.175-2.175a.999.999 0 0 0-1.425 0c-.2.2-.3.433-.3.7 0 .267.1.5.3.7L15.175 12ZM5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h14c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm0-2h14V5H5v14Z"
@@ -14,4 +16,4 @@ function CodeIcon(props) {
 }
 ;
 CodeIcon.displayName = "CodeIcon";
-export default CodeIcon;
+export default forwardRef(CodeIcon);

package/assets/web/icons/collapse.cjs

@@ -1,17 +1,19 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function CollapseIcon(props) {
+var React = require("react");
+function CollapseIcon(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 11.034a.996.996 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0v8.003Zm0 1.963a.997.997 0 0 0-.29-.702l-.005-.004A.997.997 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0v-8.003Z"
+      d: "M12 11.034a.996.996 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 1 0 0-2h-5.586L22 3.446a1 1 0 0 0-1.414-1.415L14 8.617V3.031a1 1 0 1 0-2 0v8.003Zm0 1.963a.997.997 0 0 0-.29-.702l-.005-.004A.997.997 0 0 0 11 12H3a1 1 0 0 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 1 0 2 0v-8.003Z"
     })
   });
 }
 ;
 CollapseIcon.displayName = "CollapseIcon";
-module.exports = CollapseIcon;
+module.exports = React.forwardRef(CollapseIcon);

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

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

package/assets/web/icons/collapse.js

@@ -1,17 +1,19 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function CollapseIcon(props) {
+function CollapseIcon(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 11.034a.996.996 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0v8.003Zm0 1.963a.997.997 0 0 0-.29-.702l-.005-.004A.997.997 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0v-8.003Z"
+      d: "M12 11.034a.996.996 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 1 0 0-2h-5.586L22 3.446a1 1 0 0 0-1.414-1.415L14 8.617V3.031a1 1 0 1 0-2 0v8.003Zm0 1.963a.997.997 0 0 0-.29-.702l-.005-.004A.997.997 0 0 0 11 12H3a1 1 0 0 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 1 0 2 0v-8.003Z"
     })
   });
 }
 ;
 CollapseIcon.displayName = "CollapseIcon";
-export default CollapseIcon;
+export default forwardRef(CollapseIcon);

package/assets/web/icons/company.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function CompanyIcon(props) {
+var React = require("react");
+function CompanyIcon(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 7h5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v2Zm-2-2H5v2h3a1 1 0 0 1 0 2H5v2h3a1 1 0 1 1 0 2H5v2h3a1 1 0 1 1 0 2H5v2h7V5Zm2 4v2h2a1 1 0 1 1 0 2h-2v2h2a1 1 0 1 1 0 2h-2v2h5V9h-5Z"
@@ -14,4 +16,4 @@ function CompanyIcon(props) {
 }
 ;
 CompanyIcon.displayName = "CompanyIcon";
-module.exports = CompanyIcon;
+module.exports = React.forwardRef(CompanyIcon);

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

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

package/assets/web/icons/company.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function CompanyIcon(props) {
+function CompanyIcon(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 7h5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v2Zm-2-2H5v2h3a1 1 0 0 1 0 2H5v2h3a1 1 0 1 1 0 2H5v2h3a1 1 0 1 1 0 2H5v2h7V5Zm2 4v2h2a1 1 0 1 1 0 2h-2v2h2a1 1 0 1 1 0 2h-2v2h5V9h-5Z"
@@ -14,4 +16,4 @@ function CompanyIcon(props) {
 }
 ;
 CompanyIcon.displayName = "CompanyIcon";
-export default CompanyIcon;
+export default forwardRef(CompanyIcon);