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

package/assets/web/icons/video-call-solid.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function VideoCallSolidIcon(props) {
+var React = require("react");
+function VideoCallSolidIcon(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 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z"
@@ -14,4 +16,4 @@ function VideoCallSolidIcon(props) {
 }
 ;
 VideoCallSolidIcon.displayName = "VideoCallSolidIcon";
-module.exports = VideoCallSolidIcon;
+module.exports = React.forwardRef(VideoCallSolidIcon);

package/assets/web/icons/video-call-solid.d.ts

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

package/assets/web/icons/video-call-solid.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function VideoCallSolidIcon(props) {
+function VideoCallSolidIcon(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 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z"
@@ -14,4 +16,4 @@ function VideoCallSolidIcon(props) {
 }
 ;
 VideoCallSolidIcon.displayName = "VideoCallSolidIcon";
-export default VideoCallSolidIcon;
+export default forwardRef(VideoCallSolidIcon);

package/assets/web/icons/video-call.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function VideoCallIcon(props) {
+var React = require("react");
+function VideoCallIcon(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: "M2 8a4 4 0 0 1 4-4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8Zm4-2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10V6H6Zm15 7.652v-3.303L19.073 12 21 13.652Z"
@@ -14,4 +16,4 @@ function VideoCallIcon(props) {
 }
 ;
 VideoCallIcon.displayName = "VideoCallIcon";
-module.exports = VideoCallIcon;
+module.exports = React.forwardRef(VideoCallIcon);

package/assets/web/icons/video-call.d.ts

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

package/assets/web/icons/video-call.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function VideoCallIcon(props) {
+function VideoCallIcon(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: "M2 8a4 4 0 0 1 4-4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8Zm4-2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10V6H6Zm15 7.652v-3.303L19.073 12 21 13.652Z"
@@ -14,4 +16,4 @@ function VideoCallIcon(props) {
 }
 ;
 VideoCallIcon.displayName = "VideoCallIcon";
-export default VideoCallIcon;
+export default forwardRef(VideoCallIcon);

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

@@ -1,17 +1,19 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function VisibilityOffIcon(props) {
+var React = require("react");
+function VisibilityOffIcon(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: "m16.1 13.3-1.45-1.45c.15-.783-.075-1.517-.675-2.2-.6-.683-1.375-.95-2.325-.8L10.2 7.4a4.24 4.24 0 0 1 .862-.3A4.2 4.2 0 0 1 12 7c1.25 0 2.312.437 3.187 1.312S16.5 10.25 16.5 11.5c0 .333-.034.646-.1.938a4.25 4.25 0 0 1-.3.862Zm3.2 3.15-1.45-1.4a10.956 10.956 0 0 0 1.687-1.588A8.898 8.898 0 0 0 20.8 11.5c-.834-1.683-2.03-3.02-3.588-4.013C15.654 6.496 13.916 6 12 6c-.483 0-.959.033-1.425.1a9.622 9.622 0 0 0-1.375.3L7.65 4.85A11.08 11.08 0 0 1 12 4c2.383 0 4.525.63 6.425 1.887 1.9 1.259 3.325 2.896 4.275 4.913.05.083.083.188.1.313s.025.254.025.387a1.972 1.972 0 0 1-.125.7 10.896 10.896 0 0 1-3.4 4.25Zm-.2 5.45-3.5-3.45c-.583.183-1.171.32-1.763.413-.591.091-1.204.137-1.837.137-2.384 0-4.525-.63-6.425-1.887-1.9-1.259-3.325-2.896-4.275-4.913a.813.813 0 0 1-.1-.313 2.932 2.932 0 0 1 0-.762.796.796 0 0 1 .1-.3A11.2 11.2 0 0 1 2.55 8.75 13.292 13.292 0 0 1 4.15 7L2.075 4.9a.933.933 0 0 1-.275-.688c0-.275.1-.512.3-.712a.948.948 0 0 1 .7-.275c.283 0 .516.092.7.275l17 17a.977.977 0 0 1 .287.688.93.93 0 0 1-.287.712.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275ZM5.55 8.4c-.484.433-.925.908-1.325 1.425A9.014 9.014 0 0 0 3.2 11.5c.833 1.683 2.029 3.02 3.587 4.012C8.346 16.505 10.083 17 12 17c.333 0 .658-.02.975-.063.316-.041.642-.087.975-.137l-.9-.95c-.184.05-.359.088-.525.113A3.539 3.539 0 0 1 12 16c-1.25 0-2.313-.438-3.188-1.313C7.937 13.813 7.5 12.75 7.5 11.5c0-.183.012-.358.037-.525.025-.167.063-.342.113-.525L5.55 8.4Z"
+      d: "m16.1 13.3-1.45-1.45c.15-.783-.075-1.517-.675-2.2-.6-.683-1.375-.95-2.325-.8L10.2 7.4c.283-.133.57-.233.863-.3A4.2 4.2 0 0 1 12 7c1.25 0 2.313.437 3.188 1.312.874.875 1.312 1.938 1.312 3.188 0 .333-.033.646-.1.938a4.286 4.286 0 0 1-.3.862Zm3.2 3.15-1.45-1.4a10.947 10.947 0 0 0 1.688-1.588A8.898 8.898 0 0 0 20.8 11.5a9.843 9.843 0 0 0-3.588-4.013C15.654 6.496 13.917 6 12 6c-.483 0-.958.033-1.425.1a9.624 9.624 0 0 0-1.375.3L7.65 4.85A11.08 11.08 0 0 1 12 4c2.383 0 4.525.63 6.425 1.887 1.9 1.259 3.325 2.896 4.275 4.913a.81.81 0 0 1 .1.313c.017.125.025.254.025.387a1.972 1.972 0 0 1-.125.7 10.896 10.896 0 0 1-3.4 4.25Zm-.2 5.45-3.5-3.45c-.583.183-1.17.32-1.762.413-.592.091-1.205.137-1.838.137-2.383 0-4.525-.63-6.425-1.887-1.9-1.259-3.325-2.896-4.275-4.913a.813.813 0 0 1-.1-.313 2.93 2.93 0 0 1 0-.762.796.796 0 0 1 .1-.3c.35-.75.767-1.442 1.25-2.075A13.291 13.291 0 0 1 4.15 7L2.075 4.9a.933.933 0 0 1-.275-.688c0-.275.1-.512.3-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l17 17c.183.183.28.413.288.688a.93.93 0 0 1-.288.712.948.948 0 0 1-.7.275.949.949 0 0 1-.7-.275ZM5.55 8.4a10.72 10.72 0 0 0-1.325 1.425A9.013 9.013 0 0 0 3.2 11.5a9.834 9.834 0 0 0 3.588 4.012C8.346 16.505 10.083 17 12 17c.333 0 .658-.02.975-.063.317-.041.642-.087.975-.137l-.9-.95c-.183.05-.358.088-.525.113A3.537 3.537 0 0 1 12 16c-1.25 0-2.312-.438-3.187-1.313C7.938 13.813 7.5 12.75 7.5 11.5c0-.183.013-.358.038-.525a4.55 4.55 0 0 1 .112-.525L5.55 8.4Z"
     })
   });
 }
 ;
 VisibilityOffIcon.displayName = "VisibilityOffIcon";
-module.exports = VisibilityOffIcon;
+module.exports = React.forwardRef(VisibilityOffIcon);

package/assets/web/icons/visibility-off.d.ts

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

package/assets/web/icons/visibility-off.js

@@ -1,17 +1,19 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function VisibilityOffIcon(props) {
+function VisibilityOffIcon(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: "m16.1 13.3-1.45-1.45c.15-.783-.075-1.517-.675-2.2-.6-.683-1.375-.95-2.325-.8L10.2 7.4a4.24 4.24 0 0 1 .862-.3A4.2 4.2 0 0 1 12 7c1.25 0 2.312.437 3.187 1.312S16.5 10.25 16.5 11.5c0 .333-.034.646-.1.938a4.25 4.25 0 0 1-.3.862Zm3.2 3.15-1.45-1.4a10.956 10.956 0 0 0 1.687-1.588A8.898 8.898 0 0 0 20.8 11.5c-.834-1.683-2.03-3.02-3.588-4.013C15.654 6.496 13.916 6 12 6c-.483 0-.959.033-1.425.1a9.622 9.622 0 0 0-1.375.3L7.65 4.85A11.08 11.08 0 0 1 12 4c2.383 0 4.525.63 6.425 1.887 1.9 1.259 3.325 2.896 4.275 4.913.05.083.083.188.1.313s.025.254.025.387a1.972 1.972 0 0 1-.125.7 10.896 10.896 0 0 1-3.4 4.25Zm-.2 5.45-3.5-3.45c-.583.183-1.171.32-1.763.413-.591.091-1.204.137-1.837.137-2.384 0-4.525-.63-6.425-1.887-1.9-1.259-3.325-2.896-4.275-4.913a.813.813 0 0 1-.1-.313 2.932 2.932 0 0 1 0-.762.796.796 0 0 1 .1-.3A11.2 11.2 0 0 1 2.55 8.75 13.292 13.292 0 0 1 4.15 7L2.075 4.9a.933.933 0 0 1-.275-.688c0-.275.1-.512.3-.712a.948.948 0 0 1 .7-.275c.283 0 .516.092.7.275l17 17a.977.977 0 0 1 .287.688.93.93 0 0 1-.287.712.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275ZM5.55 8.4c-.484.433-.925.908-1.325 1.425A9.014 9.014 0 0 0 3.2 11.5c.833 1.683 2.029 3.02 3.587 4.012C8.346 16.505 10.083 17 12 17c.333 0 .658-.02.975-.063.316-.041.642-.087.975-.137l-.9-.95c-.184.05-.359.088-.525.113A3.539 3.539 0 0 1 12 16c-1.25 0-2.313-.438-3.188-1.313C7.937 13.813 7.5 12.75 7.5 11.5c0-.183.012-.358.037-.525.025-.167.063-.342.113-.525L5.55 8.4Z"
+      d: "m16.1 13.3-1.45-1.45c.15-.783-.075-1.517-.675-2.2-.6-.683-1.375-.95-2.325-.8L10.2 7.4c.283-.133.57-.233.863-.3A4.2 4.2 0 0 1 12 7c1.25 0 2.313.437 3.188 1.312.874.875 1.312 1.938 1.312 3.188 0 .333-.033.646-.1.938a4.286 4.286 0 0 1-.3.862Zm3.2 3.15-1.45-1.4a10.947 10.947 0 0 0 1.688-1.588A8.898 8.898 0 0 0 20.8 11.5a9.843 9.843 0 0 0-3.588-4.013C15.654 6.496 13.917 6 12 6c-.483 0-.958.033-1.425.1a9.624 9.624 0 0 0-1.375.3L7.65 4.85A11.08 11.08 0 0 1 12 4c2.383 0 4.525.63 6.425 1.887 1.9 1.259 3.325 2.896 4.275 4.913a.81.81 0 0 1 .1.313c.017.125.025.254.025.387a1.972 1.972 0 0 1-.125.7 10.896 10.896 0 0 1-3.4 4.25Zm-.2 5.45-3.5-3.45c-.583.183-1.17.32-1.762.413-.592.091-1.205.137-1.838.137-2.383 0-4.525-.63-6.425-1.887-1.9-1.259-3.325-2.896-4.275-4.913a.813.813 0 0 1-.1-.313 2.93 2.93 0 0 1 0-.762.796.796 0 0 1 .1-.3c.35-.75.767-1.442 1.25-2.075A13.291 13.291 0 0 1 4.15 7L2.075 4.9a.933.933 0 0 1-.275-.688c0-.275.1-.512.3-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l17 17c.183.183.28.413.288.688a.93.93 0 0 1-.288.712.948.948 0 0 1-.7.275.949.949 0 0 1-.7-.275ZM5.55 8.4a10.72 10.72 0 0 0-1.325 1.425A9.013 9.013 0 0 0 3.2 11.5a9.834 9.834 0 0 0 3.588 4.012C8.346 16.505 10.083 17 12 17c.333 0 .658-.02.975-.063.317-.041.642-.087.975-.137l-.9-.95c-.183.05-.358.088-.525.113A3.537 3.537 0 0 1 12 16c-1.25 0-2.312-.438-3.187-1.313C7.938 13.813 7.5 12.75 7.5 11.5c0-.183.013-.358.038-.525a4.55 4.55 0 0 1 .112-.525L5.55 8.4Z"
     })
   });
 }
 ;
 VisibilityOffIcon.displayName = "VisibilityOffIcon";
-export default VisibilityOffIcon;
+export default forwardRef(VisibilityOffIcon);

package/assets/web/icons/visibility-on.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function VisibilityOnIcon(props) {
+var React = require("react");
+function VisibilityOnIcon(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 16c1.25 0 2.313-.438 3.188-1.313.874-.874 1.312-1.937 1.312-3.187 0-1.25-.438-2.313-1.313-3.188C14.313 7.439 13.25 7 12 7c-1.25 0-2.312.438-3.187 1.313C7.938 9.187 7.5 10.25 7.5 11.5c0 1.25.438 2.313 1.313 3.188C9.688 15.562 10.75 16 12 16Zm0-1.8c-.75 0-1.387-.262-1.912-.787A2.604 2.604 0 0 1 9.3 11.5c0-.75.263-1.387.787-1.912A2.604 2.604 0 0 1 12 8.8c.75 0 1.387.262 1.912.787.525.526.788 1.163.788 1.913s-.262 1.387-.787 1.912A2.604 2.604 0 0 1 12 14.2Zm0 4.8c-2.317 0-4.433-.613-6.35-1.837-1.917-1.226-3.367-2.88-4.35-4.963a.812.812 0 0 1-.1-.313 2.93 2.93 0 0 1 0-.774.812.812 0 0 1 .1-.313c.983-2.083 2.433-3.738 4.35-4.963C7.567 4.614 9.683 4 12 4c2.317 0 4.433.612 6.35 1.838 1.917 1.224 3.367 2.879 4.35 4.962a.81.81 0 0 1 .1.313 2.925 2.925 0 0 1 0 .774.81.81 0 0 1-.1.313c-.983 2.083-2.433 3.738-4.35 4.963C16.433 18.387 14.317 19 12 19Zm0-2a9.544 9.544 0 0 0 5.188-1.488A9.773 9.773 0 0 0 20.8 11.5a9.773 9.773 0 0 0-3.613-4.013A9.544 9.544 0 0 0 12 6a9.545 9.545 0 0 0-5.187 1.487A9.773 9.773 0 0 0 3.2 11.5a9.773 9.773 0 0 0 3.613 4.012A9.544 9.544 0 0 0 12 17Z"
@@ -14,4 +16,4 @@ function VisibilityOnIcon(props) {
 }
 ;
 VisibilityOnIcon.displayName = "VisibilityOnIcon";
-module.exports = VisibilityOnIcon;
+module.exports = React.forwardRef(VisibilityOnIcon);

package/assets/web/icons/visibility-on.d.ts

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

package/assets/web/icons/visibility-on.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function VisibilityOnIcon(props) {
+function VisibilityOnIcon(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 16c1.25 0 2.313-.438 3.188-1.313.874-.874 1.312-1.937 1.312-3.187 0-1.25-.438-2.313-1.313-3.188C14.313 7.439 13.25 7 12 7c-1.25 0-2.312.438-3.187 1.313C7.938 9.187 7.5 10.25 7.5 11.5c0 1.25.438 2.313 1.313 3.188C9.688 15.562 10.75 16 12 16Zm0-1.8c-.75 0-1.387-.262-1.912-.787A2.604 2.604 0 0 1 9.3 11.5c0-.75.263-1.387.787-1.912A2.604 2.604 0 0 1 12 8.8c.75 0 1.387.262 1.912.787.525.526.788 1.163.788 1.913s-.262 1.387-.787 1.912A2.604 2.604 0 0 1 12 14.2Zm0 4.8c-2.317 0-4.433-.613-6.35-1.837-1.917-1.226-3.367-2.88-4.35-4.963a.812.812 0 0 1-.1-.313 2.93 2.93 0 0 1 0-.774.812.812 0 0 1 .1-.313c.983-2.083 2.433-3.738 4.35-4.963C7.567 4.614 9.683 4 12 4c2.317 0 4.433.612 6.35 1.838 1.917 1.224 3.367 2.879 4.35 4.962a.81.81 0 0 1 .1.313 2.925 2.925 0 0 1 0 .774.81.81 0 0 1-.1.313c-.983 2.083-2.433 3.738-4.35 4.963C16.433 18.387 14.317 19 12 19Zm0-2a9.544 9.544 0 0 0 5.188-1.488A9.773 9.773 0 0 0 20.8 11.5a9.773 9.773 0 0 0-3.613-4.013A9.544 9.544 0 0 0 12 6a9.545 9.545 0 0 0-5.187 1.487A9.773 9.773 0 0 0 3.2 11.5a9.773 9.773 0 0 0 3.613 4.012A9.544 9.544 0 0 0 12 17Z"
@@ -14,4 +16,4 @@ function VisibilityOnIcon(props) {
 }
 ;
 VisibilityOnIcon.displayName = "VisibilityOnIcon";
-export default VisibilityOnIcon;
+export default forwardRef(VisibilityOnIcon);

package/assets/web/icons/voice-call.cjs

@@ -1,17 +1,19 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function VoiceCallIcon(props) {
+var React = require("react");
+function VoiceCallIcon(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.958 16.374.039 3.527c0 .284-.11.536-.33.756-.22.22-.472.33-.756.33a15.97 15.97 0 0 1-6.57-1.105 16.225 16.225 0 0 1-5.563-3.663 16.084 16.084 0 0 1-3.653-5.573 16.313 16.313 0 0 1-1.115-6.56c0-.285.11-.537.33-.757.22-.22.471-.33.755-.33l3.528.04a1.069 1.069 0 0 1 1.085.93l.543 3.954c.026.18.013.349-.039.504a1.088 1.088 0 0 1-.271.426l-1.64 1.64c.337.672.721 1.308 1.154 1.909.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444c.6.433 1.237.817 1.909 1.153l1.64-1.64a1.07 1.07 0 0 1 .426-.27c.155-.052.323-.065.504-.04l3.954.543a1.068 1.068 0 0 1 .93 1.085Z"
+      d: "m20.958 16.374.039 3.527c0 .285-.11.537-.33.756-.22.22-.472.33-.756.33a15.97 15.97 0 0 1-6.57-1.105 16.223 16.223 0 0 1-5.563-3.663 16.084 16.084 0 0 1-3.653-5.573 16.313 16.313 0 0 1-1.115-6.56c0-.285.11-.537.33-.757.22-.22.471-.329.755-.329l3.528.039a1.069 1.069 0 0 1 1.085.93l.543 3.954c.026.181.013.349-.039.504a1.088 1.088 0 0 1-.271.426l-1.64 1.64c.337.672.721 1.308 1.154 1.909.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444c.6.433 1.237.817 1.909 1.153l1.64-1.64a1.08 1.08 0 0 1 .426-.27c.155-.052.323-.065.504-.04l3.954.543a1.069 1.069 0 0 1 .93 1.085Z"
     })
   });
 }
 ;
 VoiceCallIcon.displayName = "VoiceCallIcon";
-module.exports = VoiceCallIcon;
+module.exports = React.forwardRef(VoiceCallIcon);

package/assets/web/icons/voice-call.d.ts

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

package/assets/web/icons/voice-call.js

@@ -1,17 +1,19 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function VoiceCallIcon(props) {
+function VoiceCallIcon(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.958 16.374.039 3.527c0 .284-.11.536-.33.756-.22.22-.472.33-.756.33a15.97 15.97 0 0 1-6.57-1.105 16.225 16.225 0 0 1-5.563-3.663 16.084 16.084 0 0 1-3.653-5.573 16.313 16.313 0 0 1-1.115-6.56c0-.285.11-.537.33-.757.22-.22.471-.33.755-.33l3.528.04a1.069 1.069 0 0 1 1.085.93l.543 3.954c.026.18.013.349-.039.504a1.088 1.088 0 0 1-.271.426l-1.64 1.64c.337.672.721 1.308 1.154 1.909.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444c.6.433 1.237.817 1.909 1.153l1.64-1.64a1.07 1.07 0 0 1 .426-.27c.155-.052.323-.065.504-.04l3.954.543a1.068 1.068 0 0 1 .93 1.085Z"
+      d: "m20.958 16.374.039 3.527c0 .285-.11.537-.33.756-.22.22-.472.33-.756.33a15.97 15.97 0 0 1-6.57-1.105 16.223 16.223 0 0 1-5.563-3.663 16.084 16.084 0 0 1-3.653-5.573 16.313 16.313 0 0 1-1.115-6.56c0-.285.11-.537.33-.757.22-.22.471-.329.755-.329l3.528.039a1.069 1.069 0 0 1 1.085.93l.543 3.954c.026.181.013.349-.039.504a1.088 1.088 0 0 1-.271.426l-1.64 1.64c.337.672.721 1.308 1.154 1.909.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444c.6.433 1.237.817 1.909 1.153l1.64-1.64a1.08 1.08 0 0 1 .426-.27c.155-.052.323-.065.504-.04l3.954.543a1.069 1.069 0 0 1 .93 1.085Z"
     })
   });
 }
 ;
 VoiceCallIcon.displayName = "VoiceCallIcon";
-export default VoiceCallIcon;
+export default forwardRef(VoiceCallIcon);

package/assets/web/icons/volume-off-solid.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function VolumeOffSolidIcon(props) {
+var React = require("react");
+function VolumeOffSolidIcon(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.414L5.172 8H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h2l3.293 3.293c.63.63 1.707.184 1.707-.707v-3.758l7.086 7.086A1 1 0 0 0 20.5 20.5l-2.136-2.136.003-.003-1.414-1.414-.003.003-1.414-1.414.003-.003-1.415-1.415-.002.003L12 12v-.006L7.503 7.497 7.5 7.5l-4-4Zm11.496 8.662 1.661 1.66c.222-.564.343-1.18.343-1.822 0-1.38-.56-2.632-1.464-3.536a1 1 0 1 0-1.414 1.414 2.987 2.987 0 0 1 .874 2.284Zm3.164 3.164 1.462 1.462A8.961 8.961 0 0 0 21 12a8.975 8.975 0 0 0-2.636-6.364A1 1 0 0 0 16.95 7.05 6.975 6.975 0 0 1 19 12a6.966 6.966 0 0 1-.84 3.326ZM8.917 6.083 12 9.166V5.414c0-.89-1.077-1.337-1.707-.707L8.917 6.083Z"
@@ -14,4 +16,4 @@ function VolumeOffSolidIcon(props) {
 }
 ;
 VolumeOffSolidIcon.displayName = "VolumeOffSolidIcon";
-module.exports = VolumeOffSolidIcon;
+module.exports = React.forwardRef(VolumeOffSolidIcon);

package/assets/web/icons/volume-off-solid.d.ts

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

package/assets/web/icons/volume-off-solid.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function VolumeOffSolidIcon(props) {
+function VolumeOffSolidIcon(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.414L5.172 8H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h2l3.293 3.293c.63.63 1.707.184 1.707-.707v-3.758l7.086 7.086A1 1 0 0 0 20.5 20.5l-2.136-2.136.003-.003-1.414-1.414-.003.003-1.414-1.414.003-.003-1.415-1.415-.002.003L12 12v-.006L7.503 7.497 7.5 7.5l-4-4Zm11.496 8.662 1.661 1.66c.222-.564.343-1.18.343-1.822 0-1.38-.56-2.632-1.464-3.536a1 1 0 1 0-1.414 1.414 2.987 2.987 0 0 1 .874 2.284Zm3.164 3.164 1.462 1.462A8.961 8.961 0 0 0 21 12a8.975 8.975 0 0 0-2.636-6.364A1 1 0 0 0 16.95 7.05 6.975 6.975 0 0 1 19 12a6.966 6.966 0 0 1-.84 3.326ZM8.917 6.083 12 9.166V5.414c0-.89-1.077-1.337-1.707-.707L8.917 6.083Z"
@@ -14,4 +16,4 @@ function VolumeOffSolidIcon(props) {
 }
 ;
 VolumeOffSolidIcon.displayName = "VolumeOffSolidIcon";
-export default VolumeOffSolidIcon;
+export default forwardRef(VolumeOffSolidIcon);

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

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function VolumeOffIcon(props) {
+var React = require("react");
+function VolumeOffIcon(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.5 4 4 .003-.003L8.917 8.91l-.003.003L10 10v-.006l2 2V12l2.122 2.121.002-.003 1.415 1.415-.003.003 1.414 1.414.003-.003 1.414 1.414-.003.003L20.5 20.5a1 1 0 0 1-1.414 1.414L12 14.828v3.758c0 .89-1.077 1.337-1.707.707L7 16H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h.172L2.086 4.914A1 1 0 0 1 3.5 3.5ZM7.172 10H5v4h2.828L10 16.17v-3.343L7.172 10Zm7.824 2.162 1.661 1.66c.222-.564.343-1.18.343-1.822 0-1.38-.56-2.632-1.464-3.536a1 1 0 1 0-1.414 1.414 2.987 2.987 0 0 1 .874 2.284Zm3.164 3.164 1.462 1.462A8.961 8.961 0 0 0 21 12a8.975 8.975 0 0 0-2.636-6.364A1 1 0 0 0 16.95 7.05 6.975 6.975 0 0 1 19 12a6.966 6.966 0 0 1-.84 3.326ZM8.917 6.083 12 9.166V5.414c0-.89-1.077-1.337-1.707-.707L8.917 6.083Z"
@@ -14,4 +16,4 @@ function VolumeOffIcon(props) {
 }
 ;
 VolumeOffIcon.displayName = "VolumeOffIcon";
-module.exports = VolumeOffIcon;
+module.exports = React.forwardRef(VolumeOffIcon);

package/assets/web/icons/volume-off.d.ts

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

package/assets/web/icons/volume-off.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function VolumeOffIcon(props) {
+function VolumeOffIcon(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.5 4 4 .003-.003L8.917 8.91l-.003.003L10 10v-.006l2 2V12l2.122 2.121.002-.003 1.415 1.415-.003.003 1.414 1.414.003-.003 1.414 1.414-.003.003L20.5 20.5a1 1 0 0 1-1.414 1.414L12 14.828v3.758c0 .89-1.077 1.337-1.707.707L7 16H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h.172L2.086 4.914A1 1 0 0 1 3.5 3.5ZM7.172 10H5v4h2.828L10 16.17v-3.343L7.172 10Zm7.824 2.162 1.661 1.66c.222-.564.343-1.18.343-1.822 0-1.38-.56-2.632-1.464-3.536a1 1 0 1 0-1.414 1.414 2.987 2.987 0 0 1 .874 2.284Zm3.164 3.164 1.462 1.462A8.961 8.961 0 0 0 21 12a8.975 8.975 0 0 0-2.636-6.364A1 1 0 0 0 16.95 7.05 6.975 6.975 0 0 1 19 12a6.966 6.966 0 0 1-.84 3.326ZM8.917 6.083 12 9.166V5.414c0-.89-1.077-1.337-1.707-.707L8.917 6.083Z"
@@ -14,4 +16,4 @@ function VolumeOffIcon(props) {
 }
 ;
 VolumeOffIcon.displayName = "VolumeOffIcon";
-export default VolumeOffIcon;
+export default forwardRef(VolumeOffIcon);

package/assets/web/icons/volume-on-solid.cjs

@@ -1,19 +1,21 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function VolumeOnSolidIcon(props) {
+var React = require("react");
+function VolumeOnSolidIcon(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: "M3 14v-4a2 2 0 0 1 2-2h2l3.293-3.293c.63-.63 1.707-.184 1.707.707v13.172c0 .89-1.077 1.337-1.707.707L7 16H5a2 2 0 0 1-2-2Zm11.121-5.536a1 1 0 0 1 1.415 0A4.987 4.987 0 0 1 17 12c0 1.38-.56 2.632-1.464 3.536a1 1 0 0 1-1.415-1.415 2.988 2.988 0 0 0 .88-2.121c0-.829-.335-1.577-.88-2.121a1 1 0 0 1 0-1.415Z"
+      d: "M3 14v-4a2 2 0 0 1 2-2h2l3.293-3.293c.63-.63 1.707-.184 1.707.707v13.172c0 .89-1.077 1.337-1.707.707L7 16H5a2 2 0 0 1-2-2Zm11.121-5.536a1 1 0 0 1 1.415 0A4.987 4.987 0 0 1 17 12c0 1.38-.56 2.632-1.464 3.535a1 1 0 0 1-1.415-1.414 2.987 2.987 0 0 0 .88-2.121c0-.829-.335-1.578-.88-2.121a1 1 0 0 1 0-1.415Z"
     }), /*#__PURE__*/_reactJsxRuntime.jsx("path", {
-      d: "M16.95 5.636a1 1 0 0 1 1.414 0A8.975 8.975 0 0 1 21 12a8.975 8.975 0 0 1-2.636 6.364 1 1 0 0 1-1.414-1.414A6.975 6.975 0 0 0 19 12a6.975 6.975 0 0 0-2.05-4.95 1 1 0 0 1 0-1.414Z"
+      d: "M16.95 5.636a1 1 0 0 1 1.414 0A8.975 8.975 0 0 1 21 12a8.975 8.975 0 0 1-2.636 6.364 1 1 0 1 1-1.414-1.415A6.975 6.975 0 0 0 19 12a6.975 6.975 0 0 0-2.05-4.949 1 1 0 0 1 0-1.414Z"
     })]
   });
 }
 ;
 VolumeOnSolidIcon.displayName = "VolumeOnSolidIcon";
-module.exports = VolumeOnSolidIcon;
+module.exports = React.forwardRef(VolumeOnSolidIcon);

package/assets/web/icons/volume-on-solid.d.ts

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

package/assets/web/icons/volume-on-solid.js

@@ -1,19 +1,21 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function VolumeOnSolidIcon(props) {
+function VolumeOnSolidIcon(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: "M3 14v-4a2 2 0 0 1 2-2h2l3.293-3.293c.63-.63 1.707-.184 1.707.707v13.172c0 .89-1.077 1.337-1.707.707L7 16H5a2 2 0 0 1-2-2Zm11.121-5.536a1 1 0 0 1 1.415 0A4.987 4.987 0 0 1 17 12c0 1.38-.56 2.632-1.464 3.536a1 1 0 0 1-1.415-1.415 2.988 2.988 0 0 0 .88-2.121c0-.829-.335-1.577-.88-2.121a1 1 0 0 1 0-1.415Z"
+      d: "M3 14v-4a2 2 0 0 1 2-2h2l3.293-3.293c.63-.63 1.707-.184 1.707.707v13.172c0 .89-1.077 1.337-1.707.707L7 16H5a2 2 0 0 1-2-2Zm11.121-5.536a1 1 0 0 1 1.415 0A4.987 4.987 0 0 1 17 12c0 1.38-.56 2.632-1.464 3.535a1 1 0 0 1-1.415-1.414 2.987 2.987 0 0 0 .88-2.121c0-.829-.335-1.578-.88-2.121a1 1 0 0 1 0-1.415Z"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M16.95 5.636a1 1 0 0 1 1.414 0A8.975 8.975 0 0 1 21 12a8.975 8.975 0 0 1-2.636 6.364 1 1 0 0 1-1.414-1.414A6.975 6.975 0 0 0 19 12a6.975 6.975 0 0 0-2.05-4.95 1 1 0 0 1 0-1.414Z"
+      d: "M16.95 5.636a1 1 0 0 1 1.414 0A8.975 8.975 0 0 1 21 12a8.975 8.975 0 0 1-2.636 6.364 1 1 0 1 1-1.414-1.415A6.975 6.975 0 0 0 19 12a6.975 6.975 0 0 0-2.05-4.949 1 1 0 0 1 0-1.414Z"
     })]
   });
 }
 ;
 VolumeOnSolidIcon.displayName = "VolumeOnSolidIcon";
-export default VolumeOnSolidIcon;
+export default forwardRef(VolumeOnSolidIcon);

package/assets/web/icons/volume-on.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function VolumeOnIcon(props) {
+var React = require("react");
+function VolumeOnIcon(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: "M3 10a2 2 0 0 1 2-2h2l3.293-3.293c.63-.63 1.707-.184 1.707.707v13.172c0 .89-1.077 1.337-1.707.707L7 16H5a2 2 0 0 1-2-2v-4Zm4.828 4L10 16.172V7.828L7.828 10H5v4h2.828Zm6.293-5.536a1 1 0 0 1 1.415 0A4.988 4.988 0 0 1 17 12c0 1.38-.56 2.632-1.464 3.535a1 1 0 1 1-1.415-1.414 2.987 2.987 0 0 0 .88-2.121c0-.829-.335-1.578-.88-2.122a1 1 0 0 1 0-1.414Z"
@@ -16,4 +18,4 @@ function VolumeOnIcon(props) {
 }
 ;
 VolumeOnIcon.displayName = "VolumeOnIcon";
-module.exports = VolumeOnIcon;
+module.exports = React.forwardRef(VolumeOnIcon);

package/assets/web/icons/volume-on.d.ts

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

package/assets/web/icons/volume-on.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function VolumeOnIcon(props) {
+function VolumeOnIcon(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: "M3 10a2 2 0 0 1 2-2h2l3.293-3.293c.63-.63 1.707-.184 1.707.707v13.172c0 .89-1.077 1.337-1.707.707L7 16H5a2 2 0 0 1-2-2v-4Zm4.828 4L10 16.172V7.828L7.828 10H5v4h2.828Zm6.293-5.536a1 1 0 0 1 1.415 0A4.988 4.988 0 0 1 17 12c0 1.38-.56 2.632-1.464 3.535a1 1 0 1 1-1.415-1.414 2.987 2.987 0 0 0 .88-2.121c0-.829-.335-1.578-.88-2.122a1 1 0 0 1 0-1.414Z"
@@ -16,4 +18,4 @@ function VolumeOnIcon(props) {
 }
 ;
 VolumeOnIcon.displayName = "VolumeOnIcon";
-export default VolumeOnIcon;
+export default forwardRef(VolumeOnIcon);

package/assets/web/icons/warning.cjs

@@ -1,21 +1,23 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function WarningIcon(props) {
+var React = require("react");
+function WarningIcon(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.713 17.712A.968.968 0 0 1 12 18a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 17a.97.97 0 0 1 .287-.712A.968.968 0 0 1 12 16a.97.97 0 0 1 .713.288c.191.191.287.429.287.712s-.096.52-.287.712Zm0-3.999A.968.968 0 0 1 12 14a.968.968 0 0 1-.713-.287A.968.968 0 0 1 11 13V9c0-.283.096-.52.287-.713A.968.968 0 0 1 12 8c.283 0 .52.096.713.287.191.192.287.43.287.713v4c0 .283-.096.52-.287.713Z"
+      d: "M12.713 17.713A.968.968 0 0 1 12 18a.968.968 0 0 1-.713-.287A.967.967 0 0 1 11 17a.97.97 0 0 1 .287-.712A.968.968 0 0 1 12 16a.97.97 0 0 1 .713.288A.968.968 0 0 1 13 17a.97.97 0 0 1-.287.713Zm0-4A.968.968 0 0 1 12 14a.968.968 0 0 1-.713-.287A.967.967 0 0 1 11 13V9a.97.97 0 0 1 .287-.712A.968.968 0 0 1 12 8a.97.97 0 0 1 .713.288A.968.968 0 0 1 13 9v4a.97.97 0 0 1-.287.713Z"
     }), /*#__PURE__*/_reactJsxRuntime.jsx("path", {
       fillRule: "evenodd",
-      d: "M10.264 3.039c.767-1.344 2.705-1.344 3.472 0l8.554 14.969c.762 1.333-.2 2.992-1.736 2.992H3.446c-1.535 0-2.498-1.659-1.736-2.992l8.553-14.97ZM3.446 19 12 4.031 20.554 19H3.446Z",
+      d: "M10.264 3.039c.767-1.344 2.705-1.344 3.472 0l8.554 14.969c.762 1.333-.2 2.992-1.736 2.992H3.446c-1.535 0-2.498-1.659-1.736-2.992l8.553-14.969ZM3.446 19 12 4.031l8.554 14.97H3.446Z",
       clipRule: "evenodd"
     })]
   });
 }
 ;
 WarningIcon.displayName = "WarningIcon";
-module.exports = WarningIcon;
+module.exports = React.forwardRef(WarningIcon);

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

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