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

package/assets/web/icons/image.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function ImageIcon(props) {
+function ImageIcon(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: "M17 9a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"
@@ -16,4 +18,4 @@ function ImageIcon(props) {
 }
 ;
 ImageIcon.displayName = "ImageIcon";
-export default ImageIcon;
+export default forwardRef(ImageIcon);

package/assets/web/icons/indent-decrease.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function IndentDecreaseIcon(props) {
+var React = require("react");
+function IndentDecreaseIcon(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.288 18.712A.965.965 0 0 0 4 19h16c.283 0 .52-.096.712-.288A.968.968 0 0 0 21 18a.968.968 0 0 0-.288-.712A.968.968 0 0 0 20 17H4a.967.967 0 0 0-.712.288A.968.968 0 0 0 3 18c0 .283.096.52.288.712Zm7.999-3.999c.192.191.43.287.713.287h8a.97.97 0 0 0 .712-.287A.968.968 0 0 0 21 14a.968.968 0 0 0-.288-.713A.968.968 0 0 0 20 13h-8a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 14c0 .283.096.52.287.713Zm0-4c.192.191.43.287.713.287h8a.97.97 0 0 0 .712-.287A.968.968 0 0 0 21 10a.967.967 0 0 0-.288-.713A.968.968 0 0 0 20 9h-8a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 10c0 .283.096.52.287.713Zm0-4c.192.191.43.287.713.287h8a.97.97 0 0 0 .712-.287A.967.967 0 0 0 21 6a.967.967 0 0 0-.288-.713A.968.968 0 0 0 20 5h-8a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 6c0 .283.096.52.287.713ZM6.15 13.15l-2.8-2.8a.48.48 0 0 1 0-.7l2.8-2.8c.167-.167.35-.208.55-.125.2.083.3.242.3.475v5.6c0 .233-.1.392-.3.475-.2.083-.383.042-.55-.125Z"
@@ -14,4 +16,4 @@ function IndentDecreaseIcon(props) {
 }
 ;
 IndentDecreaseIcon.displayName = "IndentDecreaseIcon";
-module.exports = IndentDecreaseIcon;
+module.exports = React.forwardRef(IndentDecreaseIcon);

package/assets/web/icons/indent-decrease.d.ts

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

package/assets/web/icons/indent-decrease.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function IndentDecreaseIcon(props) {
+function IndentDecreaseIcon(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.288 18.712A.965.965 0 0 0 4 19h16c.283 0 .52-.096.712-.288A.968.968 0 0 0 21 18a.968.968 0 0 0-.288-.712A.968.968 0 0 0 20 17H4a.967.967 0 0 0-.712.288A.968.968 0 0 0 3 18c0 .283.096.52.288.712Zm7.999-3.999c.192.191.43.287.713.287h8a.97.97 0 0 0 .712-.287A.968.968 0 0 0 21 14a.968.968 0 0 0-.288-.713A.968.968 0 0 0 20 13h-8a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 14c0 .283.096.52.287.713Zm0-4c.192.191.43.287.713.287h8a.97.97 0 0 0 .712-.287A.968.968 0 0 0 21 10a.967.967 0 0 0-.288-.713A.968.968 0 0 0 20 9h-8a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 10c0 .283.096.52.287.713Zm0-4c.192.191.43.287.713.287h8a.97.97 0 0 0 .712-.287A.967.967 0 0 0 21 6a.967.967 0 0 0-.288-.713A.968.968 0 0 0 20 5h-8a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 6c0 .283.096.52.287.713ZM6.15 13.15l-2.8-2.8a.48.48 0 0 1 0-.7l2.8-2.8c.167-.167.35-.208.55-.125.2.083.3.242.3.475v5.6c0 .233-.1.392-.3.475-.2.083-.383.042-.55-.125Z"
@@ -14,4 +16,4 @@ function IndentDecreaseIcon(props) {
 }
 ;
 IndentDecreaseIcon.displayName = "IndentDecreaseIcon";
-export default IndentDecreaseIcon;
+export default forwardRef(IndentDecreaseIcon);

package/assets/web/icons/indent-increase.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function IndentIncreaseIcon(props) {
+var React = require("react");
+function IndentIncreaseIcon(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 19a.967.967 0 0 1-.712-.288A.968.968 0 0 1 3 18c0-.283.096-.52.288-.712A.967.967 0 0 1 4 17h16c.283 0 .52.096.712.288.192.191.288.429.288.712s-.096.52-.288.712A.968.968 0 0 1 20 19H4Zm8-4a.968.968 0 0 1-.713-.287A.968.968 0 0 1 11 14c0-.283.096-.52.287-.713A.968.968 0 0 1 12 13h8a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 20 15h-8Zm0-4a.968.968 0 0 1-.713-.287A.968.968 0 0 1 11 10c0-.283.096-.52.287-.713A.968.968 0 0 1 12 9h8a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 20 11h-8Zm0-4a.968.968 0 0 1-.713-.287A.967.967 0 0 1 11 6c0-.283.096-.52.287-.713A.968.968 0 0 1 12 5h8a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 20 7h-8Zm-8.15 6.15c-.167.167-.35.208-.55.125-.2-.083-.3-.242-.3-.475V7.2c0-.233.1-.392.3-.475.2-.083.383-.042.55.125l2.8 2.8a.48.48 0 0 1 0 .7l-2.8 2.8Z"
@@ -14,4 +16,4 @@ function IndentIncreaseIcon(props) {
 }
 ;
 IndentIncreaseIcon.displayName = "IndentIncreaseIcon";
-module.exports = IndentIncreaseIcon;
+module.exports = React.forwardRef(IndentIncreaseIcon);

package/assets/web/icons/indent-increase.d.ts

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

package/assets/web/icons/indent-increase.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function IndentIncreaseIcon(props) {
+function IndentIncreaseIcon(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 19a.967.967 0 0 1-.712-.288A.968.968 0 0 1 3 18c0-.283.096-.52.288-.712A.967.967 0 0 1 4 17h16c.283 0 .52.096.712.288.192.191.288.429.288.712s-.096.52-.288.712A.968.968 0 0 1 20 19H4Zm8-4a.968.968 0 0 1-.713-.287A.968.968 0 0 1 11 14c0-.283.096-.52.287-.713A.968.968 0 0 1 12 13h8a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 20 15h-8Zm0-4a.968.968 0 0 1-.713-.287A.968.968 0 0 1 11 10c0-.283.096-.52.287-.713A.968.968 0 0 1 12 9h8a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 20 11h-8Zm0-4a.968.968 0 0 1-.713-.287A.967.967 0 0 1 11 6c0-.283.096-.52.287-.713A.968.968 0 0 1 12 5h8a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 20 7h-8Zm-8.15 6.15c-.167.167-.35.208-.55.125-.2-.083-.3-.242-.3-.475V7.2c0-.233.1-.392.3-.475.2-.083.383-.042.55.125l2.8 2.8a.48.48 0 0 1 0 .7l-2.8 2.8Z"
@@ -14,4 +16,4 @@ function IndentIncreaseIcon(props) {
 }
 ;
 IndentIncreaseIcon.displayName = "IndentIncreaseIcon";
-export default IndentIncreaseIcon;
+export default forwardRef(IndentIncreaseIcon);

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

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function InfoSolidIcon(props) {
+var React = require("react");
+function InfoSolidIcon(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 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.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.612 3.175-2.137A9.738 9.738 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.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 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.738 9.738 0 0 1 12 22Z"
@@ -14,4 +16,4 @@ function InfoSolidIcon(props) {
 }
 ;
 InfoSolidIcon.displayName = "InfoSolidIcon";
-module.exports = InfoSolidIcon;
+module.exports = React.forwardRef(InfoSolidIcon);

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

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

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

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function InfoSolidIcon(props) {
+function InfoSolidIcon(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 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.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.612 3.175-2.137A9.738 9.738 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.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 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.738 9.738 0 0 1 12 22Z"
@@ -14,4 +16,4 @@ function InfoSolidIcon(props) {
 }
 ;
 InfoSolidIcon.displayName = "InfoSolidIcon";
-export default InfoSolidIcon;
+export default forwardRef(InfoSolidIcon);

package/assets/web/icons/info.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function InfoIcon(props) {
+var React = require("react");
+function InfoIcon(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: "M11.287 7.287A.968.968 0 0 1 12 7c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0 1 12 9a.968.968 0 0 1-.713-.287A.967.967 0 0 1 11 8c0-.283.096-.52.287-.713Zm0 4A.968.968 0 0 1 12 11c.283 0 .52.096.713.287.191.192.287.43.287.713v4a.97.97 0 0 1-.287.712A.968.968 0 0 1 12 17a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 16v-4c0-.283.096-.52.287-.713Z"
@@ -18,4 +20,4 @@ function InfoIcon(props) {
 }
 ;
 InfoIcon.displayName = "InfoIcon";
-module.exports = InfoIcon;
+module.exports = React.forwardRef(InfoIcon);

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

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

package/assets/web/icons/info.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function InfoIcon(props) {
+function InfoIcon(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: "M11.287 7.287A.968.968 0 0 1 12 7c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0 1 12 9a.968.968 0 0 1-.713-.287A.967.967 0 0 1 11 8c0-.283.096-.52.287-.713Zm0 4A.968.968 0 0 1 12 11c.283 0 .52.096.713.287.191.192.287.43.287.713v4a.97.97 0 0 1-.287.712A.968.968 0 0 1 12 17a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 16v-4c0-.283.096-.52.287-.713Z"
@@ -18,4 +20,4 @@ function InfoIcon(props) {
 }
 ;
 InfoIcon.displayName = "InfoIcon";
-export default InfoIcon;
+export default forwardRef(InfoIcon);

package/assets/web/icons/inline-code.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function InlineCodeIcon(props) {
+var React = require("react");
+function InlineCodeIcon(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.958 5.62a1 1 0 0 0-1.916-.574l-4 13.333a1 1 0 0 0 1.916.575l4-13.333ZM5.974 7.232a1 1 0 0 0-1.409.128l-3.333 4a1 1 0 0 0 0 1.28l3.333 4a1 1 0 0 0 1.537-1.28L3.302 12l2.8-3.36a1 1 0 0 0-.128-1.408Zm12.052 0a1 1 0 0 1 1.409.128l3.333 4a1 1 0 0 1 0 1.28l-3.333 4a1 1 0 0 1-1.537-1.28l2.8-3.36-2.8-3.36a1 1 0 0 1 .128-1.408Z"
@@ -14,4 +16,4 @@ function InlineCodeIcon(props) {
 }
 ;
 InlineCodeIcon.displayName = "InlineCodeIcon";
-module.exports = InlineCodeIcon;
+module.exports = React.forwardRef(InlineCodeIcon);

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

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

package/assets/web/icons/inline-code.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function InlineCodeIcon(props) {
+function InlineCodeIcon(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.958 5.62a1 1 0 0 0-1.916-.574l-4 13.333a1 1 0 0 0 1.916.575l4-13.333ZM5.974 7.232a1 1 0 0 0-1.409.128l-3.333 4a1 1 0 0 0 0 1.28l3.333 4a1 1 0 0 0 1.537-1.28L3.302 12l2.8-3.36a1 1 0 0 0-.128-1.408Zm12.052 0a1 1 0 0 1 1.409.128l3.333 4a1 1 0 0 1 0 1.28l-3.333 4a1 1 0 0 1-1.537-1.28l2.8-3.36-2.8-3.36a1 1 0 0 1 .128-1.408Z"
@@ -14,4 +16,4 @@ function InlineCodeIcon(props) {
 }
 ;
 InlineCodeIcon.displayName = "InlineCodeIcon";
-export default InlineCodeIcon;
+export default forwardRef(InlineCodeIcon);

package/assets/web/icons/italic.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function ItalicIcon(props) {
+var React = require("react");
+function ItalicIcon(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.25 19c-.35 0-.646-.12-.888-.363A1.207 1.207 0 0 1 5 17.75c0-.35.12-.646.362-.887.242-.242.538-.363.888-.363H9l3-9H9.25c-.35 0-.646-.12-.887-.362A1.207 1.207 0 0 1 8 6.25c0-.35.12-.646.363-.888A1.21 1.21 0 0 1 9.25 5h7.5c.35 0 .646.12.887.362.242.242.363.538.363.888s-.12.646-.363.888a1.207 1.207 0 0 1-.887.362H14.5l-3 9h2.25c.35 0 .646.12.887.363.242.241.363.537.363.887s-.12.646-.363.887a1.207 1.207 0 0 1-.887.363h-7.5Z"
@@ -14,4 +16,4 @@ function ItalicIcon(props) {
 }
 ;
 ItalicIcon.displayName = "ItalicIcon";
-module.exports = ItalicIcon;
+module.exports = React.forwardRef(ItalicIcon);

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

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

package/assets/web/icons/italic.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function ItalicIcon(props) {
+function ItalicIcon(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.25 19c-.35 0-.646-.12-.888-.363A1.207 1.207 0 0 1 5 17.75c0-.35.12-.646.362-.887.242-.242.538-.363.888-.363H9l3-9H9.25c-.35 0-.646-.12-.887-.362A1.207 1.207 0 0 1 8 6.25c0-.35.12-.646.363-.888A1.21 1.21 0 0 1 9.25 5h7.5c.35 0 .646.12.887.362.242.242.363.538.363.888s-.12.646-.363.888a1.207 1.207 0 0 1-.887.362H14.5l-3 9h2.25c.35 0 .646.12.887.363.242.241.363.537.363.887s-.12.646-.363.887a1.207 1.207 0 0 1-.887.363h-7.5Z"
@@ -14,4 +16,4 @@ function ItalicIcon(props) {
 }
 ;
 ItalicIcon.displayName = "ItalicIcon";
-export default ItalicIcon;
+export default forwardRef(ItalicIcon);

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

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function KeyOffSolidIcon(props) {
+var React = require("react");
+function KeyOffSolidIcon(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.917 2.083a1 1 0 0 0-1.414 1.414L6.07 6.064c-1.27.18-2.377.743-3.32 1.686C1.583 8.917 1 10.333 1 12c0 1.667.583 3.083 1.75 4.25C3.917 17.417 5.333 18 7 18a5.863 5.863 0 0 0 3.475-1.1A5.81 5.81 0 0 0 12.65 14H13l1.3 1.3c.1.1.208.17.325.213.117.041.242.062.375.062s.258-.02.375-.062a.782.782 0 0 0 .1-.044l5.028 5.028a1 1 0 0 0 1.414-1.414l-17-17Zm.67 11.33A1.926 1.926 0 0 1 5 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 7 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.413A1.926 1.926 0 0 1 7 14c-.55 0-1.02-.196-1.412-.587Zm14.9 1.423L15.65 10h4.95a1.033 1.033 0 0 1 .725.3l1.025 1.025c.083.083.15.18.2.288.05.108.075.229.075.362a1.067 1.067 0 0 1-.25.7l-1.888 2.16Z"
@@ -14,4 +16,4 @@ function KeyOffSolidIcon(props) {
 }
 ;
 KeyOffSolidIcon.displayName = "KeyOffSolidIcon";
-module.exports = KeyOffSolidIcon;
+module.exports = React.forwardRef(KeyOffSolidIcon);

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

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

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

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function KeyOffSolidIcon(props) {
+function KeyOffSolidIcon(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.917 2.083a1 1 0 0 0-1.414 1.414L6.07 6.064c-1.27.18-2.377.743-3.32 1.686C1.583 8.917 1 10.333 1 12c0 1.667.583 3.083 1.75 4.25C3.917 17.417 5.333 18 7 18a5.863 5.863 0 0 0 3.475-1.1A5.81 5.81 0 0 0 12.65 14H13l1.3 1.3c.1.1.208.17.325.213.117.041.242.062.375.062s.258-.02.375-.062a.782.782 0 0 0 .1-.044l5.028 5.028a1 1 0 0 0 1.414-1.414l-17-17Zm.67 11.33A1.926 1.926 0 0 1 5 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 7 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.413A1.926 1.926 0 0 1 7 14c-.55 0-1.02-.196-1.412-.587Zm14.9 1.423L15.65 10h4.95a1.033 1.033 0 0 1 .725.3l1.025 1.025c.083.083.15.18.2.288.05.108.075.229.075.362a1.067 1.067 0 0 1-.25.7l-1.888 2.16Z"
@@ -14,4 +16,4 @@ function KeyOffSolidIcon(props) {
 }
 ;
 KeyOffSolidIcon.displayName = "KeyOffSolidIcon";
-export default KeyOffSolidIcon;
+export default forwardRef(KeyOffSolidIcon);

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

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function KeyOffIcon(props) {
+var React = require("react");
+function KeyOffIcon(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: "M7 14c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 5 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 7 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.413A1.926 1.926 0 0 1 7 14Z"
@@ -16,4 +18,4 @@ function KeyOffIcon(props) {
 }
 ;
 KeyOffIcon.displayName = "KeyOffIcon";
-module.exports = KeyOffIcon;
+module.exports = React.forwardRef(KeyOffIcon);

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

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

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

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function KeyOffIcon(props) {
+function KeyOffIcon(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: "M7 14c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 5 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 7 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.413A1.926 1.926 0 0 1 7 14Z"
@@ -16,4 +18,4 @@ function KeyOffIcon(props) {
 }
 ;
 KeyOffIcon.displayName = "KeyOffIcon";
-export default KeyOffIcon;
+export default forwardRef(KeyOffIcon);

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

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function KeySolidIcon(props) {
+var React = require("react");
+function KeySolidIcon(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: "M10.475 16.9A5.863 5.863 0 0 1 7 18c-1.667 0-3.083-.583-4.25-1.75C1.583 15.083 1 13.667 1 12c0-1.667.583-3.083 1.75-4.25C3.917 6.583 5.333 6 7 6c1.35 0 2.53.383 3.537 1.15 1.009.767 1.713 1.717 2.113 2.85h7.95a1.033 1.033 0 0 1 .725.3l1.025 1.025a.99.99 0 0 1 .2.288c.05.108.075.229.075.362a1.066 1.066 0 0 1-.25.7l-2.25 2.575a.973.973 0 0 1-1.038.313 1.033 1.033 0 0 1-.337-.188L17 14l-1.3 1.3c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063c-.133 0-.258-.02-.375-.063a.877.877 0 0 1-.325-.212L13 14h-.35a5.81 5.81 0 0 1-2.175 2.9Zm-4.887-3.487c.391.39.862.587 1.412.587.55 0 1.02-.196 1.412-.588C8.804 13.021 9 12.55 9 12c0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 7 10c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 5 12c0 .55.196 1.02.588 1.412Z"
@@ -14,4 +16,4 @@ function KeySolidIcon(props) {
 }
 ;
 KeySolidIcon.displayName = "KeySolidIcon";
-module.exports = KeySolidIcon;
+module.exports = React.forwardRef(KeySolidIcon);

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

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

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

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function KeySolidIcon(props) {
+function KeySolidIcon(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: "M10.475 16.9A5.863 5.863 0 0 1 7 18c-1.667 0-3.083-.583-4.25-1.75C1.583 15.083 1 13.667 1 12c0-1.667.583-3.083 1.75-4.25C3.917 6.583 5.333 6 7 6c1.35 0 2.53.383 3.537 1.15 1.009.767 1.713 1.717 2.113 2.85h7.95a1.033 1.033 0 0 1 .725.3l1.025 1.025a.99.99 0 0 1 .2.288c.05.108.075.229.075.362a1.066 1.066 0 0 1-.25.7l-2.25 2.575a.973.973 0 0 1-1.038.313 1.033 1.033 0 0 1-.337-.188L17 14l-1.3 1.3c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063c-.133 0-.258-.02-.375-.063a.877.877 0 0 1-.325-.212L13 14h-.35a5.81 5.81 0 0 1-2.175 2.9Zm-4.887-3.487c.391.39.862.587 1.412.587.55 0 1.02-.196 1.412-.588C8.804 13.021 9 12.55 9 12c0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 7 10c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 5 12c0 .55.196 1.02.588 1.412Z"
@@ -14,4 +16,4 @@ function KeySolidIcon(props) {
 }
 ;
 KeySolidIcon.displayName = "KeySolidIcon";
-export default KeySolidIcon;
+export default forwardRef(KeySolidIcon);

package/assets/web/icons/key.cjs

@@ -1,11 +1,13 @@
 var _reactJsxRuntime = require("react/jsx-runtime");
-function KeyIcon(props) {
+var React = require("react");
+function KeyIcon(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 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 5 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 7 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 7 14Zm0 4c-1.667 0-3.083-.583-4.25-1.75C1.583 15.083 1 13.667 1 12c0-1.667.583-3.083 1.75-4.25C3.917 6.583 5.333 6 7 6c1.117 0 2.13.275 3.037.825A6.212 6.212 0 0 1 12.2 9h8.375a1.033 1.033 0 0 1 .725.3l2 2c.1.1.17.208.212.325.042.117.063.242.063.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-3.175 3.175a.946.946 0 0 1-.3.2c-.117.05-.233.083-.35.1a.832.832 0 0 1-.35-.025.884.884 0 0 1-.325-.175L17.5 15l-1.425 1.075a.945.945 0 0 1-.887.15.859.859 0 0 1-.288-.15L13.375 15H12.2a6.212 6.212 0 0 1-2.162 2.175C9.128 17.725 8.117 18 7 18Zm0-2c.933 0 1.754-.283 2.463-.85A4.032 4.032 0 0 0 10.875 13H14l1.45 1.025L17.5 12.5l1.775 1.375L21.15 12l-1-1h-9.275a4.032 4.032 0 0 0-1.412-2.15C8.754 8.283 7.933 8 7 8c-1.1 0-2.042.392-2.825 1.175C3.392 9.958 3 10.9 3 12s.392 2.042 1.175 2.825C4.958 15.608 5.9 16 7 16Z"
@@ -14,4 +16,4 @@ function KeyIcon(props) {
 }
 ;
 KeyIcon.displayName = "KeyIcon";
-module.exports = KeyIcon;
+module.exports = React.forwardRef(KeyIcon);

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

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

package/assets/web/icons/key.js

@@ -1,11 +1,13 @@
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-function KeyIcon(props) {
+function KeyIcon(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 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 5 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 7 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 7 14Zm0 4c-1.667 0-3.083-.583-4.25-1.75C1.583 15.083 1 13.667 1 12c0-1.667.583-3.083 1.75-4.25C3.917 6.583 5.333 6 7 6c1.117 0 2.13.275 3.037.825A6.212 6.212 0 0 1 12.2 9h8.375a1.033 1.033 0 0 1 .725.3l2 2c.1.1.17.208.212.325.042.117.063.242.063.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-3.175 3.175a.946.946 0 0 1-.3.2c-.117.05-.233.083-.35.1a.832.832 0 0 1-.35-.025.884.884 0 0 1-.325-.175L17.5 15l-1.425 1.075a.945.945 0 0 1-.887.15.859.859 0 0 1-.288-.15L13.375 15H12.2a6.212 6.212 0 0 1-2.162 2.175C9.128 17.725 8.117 18 7 18Zm0-2c.933 0 1.754-.283 2.463-.85A4.032 4.032 0 0 0 10.875 13H14l1.45 1.025L17.5 12.5l1.775 1.375L21.15 12l-1-1h-9.275a4.032 4.032 0 0 0-1.412-2.15C8.754 8.283 7.933 8 7 8c-1.1 0-2.042.392-2.825 1.175C3.392 9.958 3 10.9 3 12s.392 2.042 1.175 2.825C4.958 15.608 5.9 16 7 16Z"
@@ -14,4 +16,4 @@ function KeyIcon(props) {
 }
 ;
 KeyIcon.displayName = "KeyIcon";
-export default KeyIcon;
+export default forwardRef(KeyIcon);