fui-material 2.1.2 → 2.1.4

package/dist/f-ui-kit.es.js

@@ -1009,18 +1009,20 @@ const defaultStyles = {
   "f-button-file": "_f-button-file_i2hex_1",
   "file-preview-list": "_file-preview-list_i2hex_1"
 };
-const FTrashIcon = ({
+const FTrashIcon = React.forwardRef(({
   color = "primary",
   size = 32,
   st: st2,
   id,
   className,
   handleClick,
-  ["data-testid"]: dataTestId
-}) => {
+  ["data-testid"]: dataTestId,
+  ...props
+}, ref) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "svg",
     {
+      ref,
       onClick: handleClick,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -1029,6 +1031,7 @@ const FTrashIcon = ({
       viewBox: "0 0 16 16",
       id,
       "data-testid": dataTestId,
+      ...props,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "path",
@@ -1046,7 +1049,8 @@ const FTrashIcon = ({
       ]
     }
   );
-};
+});
+FTrashIcon.displayName = "FTrashIcon";
 const progressBar = "_progressBar_1xp9s_48";
 const completed = "_completed_1xp9s_60";
 const progress = "_progress_1xp9s_48";
@@ -1200,9 +1204,16 @@ const FButtonFile = ({
 const styles$v = {
   "f-text-field": "_f-text-field_200bb_1"
 };
-const FLoadIcon = ({ size = 30, st: st2, id, className, color = "primary" }) => {
+const FLoadIcon = React.forwardRef(({
+  size = 30,
+  st: st2,
+  id,
+  className,
+  color = "primary",
+  ...props
+}, ref) => {
   const randomId = useRef((Math.random() + 1).toString(36).substring(2));
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { margin: 0, padding: 0 }, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref, style: { margin: 0, padding: 0 }, ...props, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("style", { children: [
       `
                     .f-load-icon-${randomId.current} {
@@ -1240,7 +1251,8 @@ const FLoadIcon = ({ size = 30, st: st2, id, className, color = "primary" }) =>
       }
     )
   ] });
-};
+});
+FLoadIcon.displayName = "FLoadIcon";
 const FTextField = forwardRef(
   ({
     label,
@@ -1977,10 +1989,20 @@ const FDialog = ({
     document.body
   );
 };
-const FCloseIcon = ({ color = "primary", size = 30, st: st2, id, className, handleClose, ["data-testid"]: dataTestId }) => {
+const FCloseIcon = React.forwardRef(({
+  color = "primary",
+  size = 30,
+  st: st2,
+  id,
+  className,
+  handleClose,
+  ["data-testid"]: dataTestId,
+  ...props
+}, ref) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "svg",
     {
+      ref,
       width: size,
       style: st2,
       className: `f-icon ${handleClose ? " clicking-icon" : ""} ${color} ${className || ""}`,
@@ -1988,10 +2010,12 @@ const FCloseIcon = ({ color = "primary", size = 30, st: st2, id, className, hand
       onClick: handleClose,
       id,
       "data-testid": dataTestId,
+      ...props,
       children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" })
     }
   );
-};
+});
+FCloseIcon.displayName = "FCloseIcon";
 const FDialogHeader = ({ title, handleClose }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$p["f-dialog__header"], children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: styles$p["f-dialog__header_title"], children: title }),
@@ -2322,7 +2346,7 @@ const styles$i = {
   "progress-dot": "_progress-dot_f7bma_172",
   active: active$3
 };
-const FArrowIcon = ({
+const FArrowIcon = React.forwardRef(({
   color = "primary",
   size = 30,
   st: st2,
@@ -2330,8 +2354,9 @@ const FArrowIcon = ({
   handleClick,
   id,
   className,
-  ["data-testid"]: dataTestId
-}) => {
+  ["data-testid"]: dataTestId,
+  ...props
+}, ref) => {
   const style = {
     transform: `rotate(
                          ${direction === "down" ? 90 : direction === "up" ? -90 : direction === "right" ? 0 : 180}deg)`
@@ -2340,6 +2365,7 @@ const FArrowIcon = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "svg",
     {
+      ref,
       width: size,
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 320 512",
@@ -2348,6 +2374,7 @@ const FArrowIcon = ({
       onClick: handleClick,
       id,
       "data-testid": dataTestId,
+      ...props,
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         "path",
         {
@@ -2356,7 +2383,8 @@ const FArrowIcon = ({
       )
     }
   );
-};
+});
+FArrowIcon.displayName = "FArrowIcon";
 const FOpenImgFull = ({
   id,
   className,
@@ -3538,7 +3566,7 @@ const styles$b = {
   "f-dropdown__content-link": "_f-dropdown__content-link_d5i2z_28",
   "f-dropdown__content--open": "_f-dropdown__content--open_d5i2z_43"
 };
-const FDropdown = ({
+const FDropdown = forwardRef(({
   label,
   variant = "contained",
   color = "primary",
@@ -3547,20 +3575,23 @@ const FDropdown = ({
   st: st2,
   className,
   id,
-  children
-}) => {
+  children,
+  ...props
+}, forwardedRef) => {
   const [isOpen, setIsOpen] = useState(false);
-  const ref = useRef(null);
+  const internalRef = useRef(null);
+  const ref = forwardedRef || internalRef;
   useEffect(() => {
     if (!isOpen) return;
     const handleClick = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) {
+      const currentRef = typeof ref === "function" ? null : ref == null ? void 0 : ref.current;
+      if (currentRef && !currentRef.contains(e.target)) {
         setIsOpen(false);
       }
     };
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
-  }, [isOpen]);
+  }, [isOpen, ref]);
   const handleItemClick = (child) => (e) => {
     if (child.props && typeof child.props.onClick === "function") {
       child.props.onClick(e);
@@ -3577,7 +3608,7 @@ const FDropdown = ({
       return child;
     });
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$b["f-dropdown"], ref, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$b["f-dropdown"], ref, ...props, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       FButton,
       {
@@ -3606,7 +3637,7 @@ const FDropdown = ({
       }
     )
   ] });
-};
+});
 FDropdown.displayName = "FDropdown";
 const FDropdownItem = ({
   disabled: disabled2,
@@ -3999,7 +4030,6 @@ const FTooltip = ({
   disableFocusListener = false,
   disableTouchListener = false,
   enterDelay = 0,
-  leaveDelay = 0,
   className = "",
   style
 }) => {
@@ -4038,23 +4068,30 @@ const FTooltip = ({
     }, enterDelay);
   };
   const handleClose = () => {
-    if (enterTimer.current) {
-      clearTimeout(enterTimer.current);
-    }
-    if (leaveTimer.current) {
-      clearTimeout(leaveTimer.current);
-    }
+    if (enterTimer.current) clearTimeout(enterTimer.current);
+    if (leaveTimer.current) clearTimeout(leaveTimer.current);
     if (isOpen || isVisible) {
       if (openProp === void 0) {
         setOpen(false);
       }
       setIsVisible(false);
       setIsExiting(true);
-      leaveTimer.current = setTimeout(() => {
+      const tooltipNode = tooltipRef.current;
+      if (tooltipNode) {
+        const handleTransitionEnd = (event) => {
+          if (event.propertyName === "opacity") {
+            setIsExiting(false);
+            setMountTooltip(false);
+            onClose == null ? void 0 : onClose();
+            tooltipNode.removeEventListener("transitionend", handleTransitionEnd);
+          }
+        };
+        tooltipNode.addEventListener("transitionend", handleTransitionEnd);
+      } else {
         setIsExiting(false);
         setMountTooltip(false);
         onClose == null ? void 0 : onClose();
-      }, leaveDelay || 220);
+      }
     }
   };
   const updatePosition = () => {
@@ -4179,18 +4216,20 @@ const FTooltip = ({
     tooltipElement && createPortal(tooltipElement, document.body)
   ] });
 };
-const FPlusIcon = ({
+const FPlusIcon = React.forwardRef(({
   color = "primary",
   size = 30,
   st: st2,
   className,
   id,
   handleClick,
-  ["data-testid"]: dataTestId
-}) => {
+  ["data-testid"]: dataTestId,
+  ...props
+}, ref) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "svg",
     {
+      ref,
       onClick: handleClick,
       className: `f-icon ${handleClick ? " clicking-icon" : ""} ${color} ${className || ""}`,
       id,
@@ -4200,6 +4239,7 @@ const FPlusIcon = ({
       "aria-hidden": "true",
       viewBox: "0 0 24 24",
       "data-testid": dataTestId,
+      ...props,
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         "path",
         {
@@ -4208,19 +4248,22 @@ const FPlusIcon = ({
       )
     }
   );
-};
-const FCheckIcon = ({
+});
+FPlusIcon.displayName = "FPlusIcon";
+const FCheckIcon = React.forwardRef(({
   color = "primary",
   size = 30,
   st: st2,
   id,
   className,
   handleClick,
-  ["data-testid"]: dataTestId
-}) => {
+  ["data-testid"]: dataTestId,
+  ...props
+}, ref) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "svg",
     {
+      ref,
       width: size,
       viewBox: "0 0 16 16",
       className: `f-icon ${handleClick ? " clicking-icon" : ""} ${color} ${className || ""}`,
@@ -4228,6 +4271,7 @@ const FCheckIcon = ({
       onClick: handleClick,
       style: st2,
       "data-testid": dataTestId,
+      ...props,
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         "path",
         {
@@ -4238,19 +4282,22 @@ const FCheckIcon = ({
       )
     }
   );
-};
-const FListIcon = ({
+});
+FCheckIcon.displayName = "FCheckIcon";
+const FListIcon = React.forwardRef(({
   color = "primary",
   size = 30,
   st: st2,
   id,
   className,
   handleClick,
-  ["data-testid"]: dataTestId
-}) => {
+  ["data-testid"]: dataTestId,
+  ...props
+}, ref) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "svg",
     {
+      ref,
       width: size,
       style: st2,
       className: `f-icon ${handleClick ? " clicking-icon" : ""} ${color} ${className || ""}`,
@@ -4258,6 +4305,7 @@ const FListIcon = ({
       id,
       onClick: handleClick,
       "data-testid": dataTestId,
+      ...props,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "path",
@@ -4274,11 +4322,22 @@ const FListIcon = ({
       ]
     }
   );
-};
-const FPenIcon = ({ color = "primary", size = 30, st: st2, id, className, handleClick, ["data-testid"]: dataTestId }) => {
+});
+FListIcon.displayName = "FListIcon";
+const FPenIcon = React.forwardRef(({
+  color = "primary",
+  size = 30,
+  st: st2,
+  id,
+  className,
+  handleClick,
+  ["data-testid"]: dataTestId,
+  ...props
+}, ref) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "svg",
     {
+      ref,
       width: size,
       style: st2,
       className: `f-icon ${handleClick ? " clicking-icon" : ""} ${color} ${className || ""}`,
@@ -4286,6 +4345,7 @@ const FPenIcon = ({ color = "primary", size = 30, st: st2, id, className, handle
       onClick: handleClick,
       id,
       "data-testid": dataTestId,
+      ...props,
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         "path",
         {
@@ -4294,19 +4354,22 @@ const FPenIcon = ({ color = "primary", size = 30, st: st2, id, className, handle
       )
     }
   );
-};
-const FDownloadIcon = ({
+});
+FPenIcon.displayName = "FPenIcon";
+const FDownloadIcon = React.forwardRef(({
   color = "primary",
   size = 30,
   st: st2,
   id,
   className,
   handleClick,
-  ["data-testid"]: dataTestId
-}) => {
+  ["data-testid"]: dataTestId,
+  ...props
+}, ref) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "svg",
     {
+      ref,
       style: st2,
       id,
       width: size,
@@ -4314,17 +4377,29 @@ const FDownloadIcon = ({
       className: `f-icon ${handleClick ? " clicking-icon" : ""} ${color} ${className || ""}`,
       viewBox: "0 0 16 16",
       "data-testid": dataTestId,
+      ...props,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z" })
       ]
     }
   );
-};
-const FCopyAddIcon = ({ color = "primary", size = 30, st: st2, id, className, handleClick, ["data-testid"]: dataTestId }) => {
+});
+FDownloadIcon.displayName = "FDownloadIcon";
+const FCopyAddIcon = React.forwardRef(({
+  color = "primary",
+  size = 30,
+  st: st2,
+  id,
+  className,
+  handleClick,
+  ["data-testid"]: dataTestId,
+  ...props
+}, ref) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "svg",
     {
+      ref,
       width: size,
       style: st2,
       className: `f-icon ${handleClick ? " clicking-icon" : ""} ${color} ${className || ""}`,
@@ -4332,25 +4407,29 @@ const FCopyAddIcon = ({ color = "primary", size = 30, st: st2, id, className, ha
       onClick: handleClick,
       id,
       "data-testid": dataTestId,
+      ...props,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M27.2,8.22H23.78V5.42A3.42,3.42,0,0,0,20.36,2H5.42A3.42,3.42,0,0,0,2,5.42V20.36a3.42,3.42,0,0,0,3.42,3.42h2.8V27.2A2.81,2.81,0,0,0,11,30H27.2A2.81,2.81,0,0,0,30,27.2V11A2.81,2.81,0,0,0,27.2,8.22ZM5.42,21.91a1.55,1.55,0,0,1-1.55-1.55V5.42A1.54,1.54,0,0,1,5.42,3.87H20.36a1.55,1.55,0,0,1,1.55,1.55v2.8H11A2.81,2.81,0,0,0,8.22,11V21.91ZM28.13,27.2a.93.93,0,0,1-.93.93H11a.93.93,0,0,1-.93-.93V11a.93.93,0,0,1,.93-.93H27.2a.93.93,0,0,1,.93.93Z" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M24.09,18.18H20v-4a.93.93,0,1,0-1.86,0v4h-4a.93.93,0,0,0,0,1.86h4v4.05a.93.93,0,1,0,1.86,0V20h4.05a.93.93,0,1,0,0-1.86Z" })
       ]
     }
   );
-};
-const FUnlinkIcon = ({
+});
+FCopyAddIcon.displayName = "FCopyAddIcon";
+const FUnlinkIcon = React.forwardRef(({
   color = "primary",
   size = 30,
   st: st2,
   id,
   className,
   handleClick,
-  ["data-testid"]: dataTestId
-}) => {
+  ["data-testid"]: dataTestId,
+  ...props
+}, ref) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "svg",
     {
+      ref,
       width: size,
       style: st2,
       className: `f-icon ${handleClick ? " clicking-icon" : ""} ${color} ${className || ""}`,
@@ -4359,6 +4438,7 @@ const FUnlinkIcon = ({
       id,
       fill: "none",
       "data-testid": dataTestId,
+      ...props,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9.23993 17.55L7.95993 18.84C7.33993 19.47 6.51992 19.79 5.69992 19.79C4.87992 19.79 4.05994 19.47 3.43994 18.84C2.18994 17.58 2.18994 15.54 3.43994 14.29L4.70993 13.02L6.11993 11.6L8.82993 8.86", stroke: "#0F0F0F", "stroke-miterlimit": "10", "stroke-linecap": "round", "stroke-linejoin": "round" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M8.82996 3.86V6.86", stroke: "#0F0F0F", "stroke-miterlimit": "10", "stroke-linecap": "round", "stroke-linejoin": "round" }),
@@ -4372,11 +4452,22 @@ const FUnlinkIcon = ({
       ]
     }
   );
-};
-const FFilterIcon = ({ color = "primary", size = 30, st: st2, id, className, handleClick, ["data-testid"]: dataTestId }) => {
+});
+FUnlinkIcon.displayName = "FUnlinkIcon";
+const FFilterIcon = React.forwardRef(({
+  color = "primary",
+  size = 30,
+  st: st2,
+  id,
+  className,
+  handleClick,
+  ["data-testid"]: dataTestId,
+  ...props
+}, ref) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "svg",
     {
+      ref,
       width: size,
       viewBox: "0 0 24 24",
       className: `f-icon ${handleClick ? " clicking-icon" : ""} ${color} ${className || ""}`,
@@ -4384,14 +4475,16 @@ const FFilterIcon = ({ color = "primary", size = 30, st: st2, id, className, han
       onClick: handleClick,
       style: st2,
       "data-testid": dataTestId,
+      ...props,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fill: "none", d: "M0 0h24v24H0z" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fillRule: "nonzero", d: "M14 14v6l-4 2v-8L4 5V3h16v2l-6 9zM6.404 5L12 13.394 17.596 5H6.404z" })
       ]
     }
   );
-};
-const FDocumentIcon = ({
+});
+FFilterIcon.displayName = "FFilterIcon";
+const FDocumentIcon = React.forwardRef(({
   color = "primary",
   size = 30,
   st: st2,
@@ -4399,11 +4492,13 @@ const FDocumentIcon = ({
   file,
   className,
   handleClick,
-  ["data-testid"]: dataTestId
-}) => {
+  ["data-testid"]: dataTestId,
+  ...props
+}, ref) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "svg",
     {
+      ref,
       onClick: handleClick,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -4412,6 +4507,7 @@ const FDocumentIcon = ({
       viewBox: "0 0 16 16",
       id,
       "data-testid": dataTestId,
+      ...props,
       children: [
         !file && /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z" }),
         file === "check" && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
@@ -4440,19 +4536,22 @@ const FDocumentIcon = ({
       ]
     }
   );
-};
-const FReloadIcon = ({
+});
+FDocumentIcon.displayName = "FDocumentIcon";
+const FReloadIcon = React.forwardRef(({
   color = "primary",
   size = 30,
   st: st2,
   className,
   id,
   handleClick,
-  ["data-testid"]: dataTestId
-}) => {
+  ["data-testid"]: dataTestId,
+  ...props
+}, ref) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "svg",
     {
+      ref,
       width: size,
       style: st2,
       className: `f-icon ${handleClick ? " clicking-icon" : ""} ${color} ${className || ""}`,
@@ -4460,25 +4559,29 @@ const FReloadIcon = ({
       onClick: handleClick,
       id,
       "data-testid": dataTestId,
+      ...props,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("path", { "fill-rule": "evenodd", d: "M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466" })
       ]
     }
   );
-};
-const FMinusIcon = ({
+});
+FReloadIcon.displayName = "FReloadIcon";
+const FMinusIcon = React.forwardRef(({
   color = "primary",
   size = 30,
   st: st2,
   className,
   id,
   handleClick,
-  ["data-testid"]: dataTestId
-}) => {
+  ["data-testid"]: dataTestId,
+  ...props
+}, ref) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "svg",
     {
+      ref,
       width: size,
       style: st2,
       className: `f-icon ${handleClick ? " clicking-icon" : ""} ${color} ${className || ""}`,
@@ -4486,17 +4589,29 @@ const FMinusIcon = ({
       onClick: handleClick,
       id,
       "data-testid": dataTestId,
+      ...props,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8" })
       ]
     }
   );
-};
-const FInfoCircleIcon = ({ color = "primary", size = 30, st: st2, id, className, handleClick, ["data-testid"]: dataTestId }) => {
+});
+FMinusIcon.displayName = "FMinusIcon";
+const FInfoCircleIcon = React.forwardRef(({
+  color = "primary",
+  size = 30,
+  st: st2,
+  id,
+  className,
+  handleClick,
+  ["data-testid"]: dataTestId,
+  ...props
+}, ref) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "svg",
     {
+      ref,
       width: size,
       style: st2,
       className: `f-icon ${handleClick ? " clicking-icon" : ""} ${color} ${className || ""}`,
@@ -4504,25 +4619,29 @@ const FInfoCircleIcon = ({ color = "primary", size = 30, st: st2, id, className,
       onClick: handleClick,
       id,
       "data-testid": dataTestId,
+      ...props,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0" })
       ]
     }
   );
-};
-const FSafeIcon = ({
+});
+FInfoCircleIcon.displayName = "FInfoCircleIcon";
+const FSafeIcon = React.forwardRef(({
   color = "primary",
   size = 30,
   st: st2,
   id,
   className,
   handleClick,
-  ["data-testid"]: dataTestId
-}) => {
+  ["data-testid"]: dataTestId,
+  ...props
+}, ref) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "svg",
     {
+      ref,
       width: size,
       style: st2,
       className: `f-icon ${handleClick ? " clicking-icon" : ""} ${color} ${className || ""}`,
@@ -4530,13 +4649,15 @@ const FSafeIcon = ({
       onClick: handleClick,
       id,
       "data-testid": dataTestId,
+      ...props,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M1 1.5A1.5 1.5 0 0 1 2.5 0h12A1.5 1.5 0 0 1 16 1.5v13a1.5 1.5 0 0 1-1.5 1.5h-12A1.5 1.5 0 0 1 1 14.5V13H.5a.5.5 0 0 1 0-1H1V8.5H.5a.5.5 0 0 1 0-1H1V4H.5a.5.5 0 0 1 0-1H1zM2.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 .5.5h12a.5.5 0 0 0 .5-.5v-13a.5.5 0 0 0-.5-.5z" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M13.5 6a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5M4.828 4.464a.5.5 0 0 1 .708 0l1.09 1.09a3 3 0 0 1 3.476 0l1.09-1.09a.5.5 0 1 1 .707.708l-1.09 1.09c.74 1.037.74 2.44 0 3.476l1.09 1.09a.5.5 0 1 1-.707.708l-1.09-1.09a3 3 0 0 1-3.476 0l-1.09 1.09a.5.5 0 1 1-.708-.708l1.09-1.09a3 3 0 0 1 0-3.476l-1.09-1.09a.5.5 0 0 1 0-.708M6.95 6.586a2 2 0 1 0 2.828 2.828A2 2 0 0 0 6.95 6.586" })
       ]
     }
   );
-};
+});
+FSafeIcon.displayName = "FSafeIcon";
 const styles$4 = {
   "f-function-block-alert": "_f-function-block-alert_1jotv_1",
   "f-function-alert": "_f-function-alert_1jotv_16",