@ttoss/ui 5.11.0 → 5.11.1

package/dist/esm/index.js

@@ -385,6 +385,7 @@ var InfiniteLinearProgress = /* @__PURE__ */__name(() => {
 
 // src/components/Input.tsx
 import { Icon as Icon4 } from "@ttoss/react-icons";
+import * as React7 from "react";
 import { Input as InputUI } from "theme-ui";
 var isInputIconConfig = /* @__PURE__ */__name(icon => {
   return icon !== void 0 && typeof icon === "object" && "icon" in icon && (typeof icon.icon === "string" || typeof icon.icon === "object" && "body" in icon.icon);
@@ -417,7 +418,10 @@ var Input = /* @__PURE__ */__name(({
   } : normalizedTrailingIconProp;
   const isWarning = !isInvalid && trailingIcon?.icon === "warning-alt";
   const wrapperClassName = [className, isWarning && "is-warning"].filter(Boolean).join(" ");
-  return /* @__PURE__ */React.createElement(Flex, {
+  const id = React7.useId();
+  const leadingTooltipId = `${id}-leading-tooltip`;
+  const trailingTooltipId = `${id}-trailing-tooltip`;
+  return /* @__PURE__ */React7.createElement(Flex, {
     className: wrapperClassName,
     sx: {
       ...sx,
@@ -425,9 +429,9 @@ var Input = /* @__PURE__ */__name(({
       padding: 0,
       border: "none"
     }
-  }, normalizedLeadingIcon && /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(Text, {
+  }, normalizedLeadingIcon && /* @__PURE__ */React7.createElement(React7.Fragment, null, /* @__PURE__ */React7.createElement(Text, {
     "data-testid": "input-leading-icon",
-    "data-tooltip-id": normalizedLeadingIcon.tooltip ? "input-leading-icon-tooltip" : void 0,
+    "data-tooltip-id": normalizedLeadingIcon.tooltip ? leadingTooltipId : void 0,
     sx: {
       position: "absolute",
       alignSelf: "center",
@@ -436,13 +440,13 @@ var Input = /* @__PURE__ */__name(({
     },
     onClick: normalizedLeadingIcon.onClick,
     variant: "leading-icon"
-  }, /* @__PURE__ */React.createElement(Icon4, {
+  }, /* @__PURE__ */React7.createElement(Icon4, {
     inline: true,
     icon: normalizedLeadingIcon.icon
-  })), normalizedLeadingIcon.tooltip && /* @__PURE__ */React.createElement(Tooltip, {
-    id: "input-leading-icon-tooltip",
+  })), normalizedLeadingIcon.tooltip && /* @__PURE__ */React7.createElement(Tooltip, {
+    id: leadingTooltipId,
     ...normalizedLeadingIcon.tooltipProps
-  }, normalizedLeadingIcon.tooltip)), /* @__PURE__ */React.createElement(InputUI, {
+  }, normalizedLeadingIcon.tooltip)), /* @__PURE__ */React7.createElement(InputUI, {
     sx: {
       fontFamily: "body",
       paddingY: "3",
@@ -454,9 +458,9 @@ var Input = /* @__PURE__ */__name(({
     },
     className,
     ...inputProps
-  }), trailingIcon && /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(Text, {
+  }), trailingIcon && /* @__PURE__ */React7.createElement(React7.Fragment, null, /* @__PURE__ */React7.createElement(Text, {
     "data-testid": "input-trailing-icon",
-    "data-tooltip-id": trailingIcon.tooltip ? "input-trailing-icon-tooltip" : void 0,
+    "data-tooltip-id": trailingIcon.tooltip ? trailingTooltipId : void 0,
     sx: {
       position: "absolute",
       right: "1rem",
@@ -467,20 +471,20 @@ var Input = /* @__PURE__ */__name(({
     },
     variant: "trailing-icon",
     onClick: trailingIcon.onClick
-  }, /* @__PURE__ */React.createElement(Icon4, {
+  }, /* @__PURE__ */React7.createElement(Icon4, {
     inline: true,
     icon: trailingIcon.icon
-  })), trailingIcon.tooltip && /* @__PURE__ */React.createElement(Tooltip, {
-    id: "input-trailing-icon-tooltip",
+  })), trailingIcon.tooltip && /* @__PURE__ */React7.createElement(Tooltip, {
+    id: trailingTooltipId,
     ...trailingIcon.tooltipProps
   }, trailingIcon.tooltip)));
 }, "Input");
 
 // src/components/InputNumber.tsx
 import { Icon as Icon5 } from "@ttoss/react-icons";
-import * as React7 from "react";
+import * as React8 from "react";
 import { Input as Input2 } from "theme-ui";
-var InputNumber = /* @__PURE__ */React7.forwardRef(({
+var InputNumber = /* @__PURE__ */React8.forwardRef(({
   sx,
   value,
   infoIcon,
@@ -488,7 +492,7 @@ var InputNumber = /* @__PURE__ */React7.forwardRef(({
   onClickInfoIcon,
   ...inputProps
 }, ref) => {
-  const sxProps = React7.useMemo(() => {
+  const sxProps = React8.useMemo(() => {
     const size = String(typeof value === "undefined" ? 0 : value).length;
     if (inputProps["aria-invalid"] === "true") {
       return {
@@ -540,7 +544,7 @@ var InputNumber = /* @__PURE__ */React7.forwardRef(({
     }
     onChange(value + 1);
   }, "handleChangeDown");
-  return /* @__PURE__ */React7.createElement(Flex, {
+  return /* @__PURE__ */React8.createElement(Flex, {
     sx: {
       width: "fit-content",
       ...sx,
@@ -550,7 +554,7 @@ var InputNumber = /* @__PURE__ */React7.forwardRef(({
     },
     ref,
     "aria-invalid": inputProps["aria-invalid"]
-  }, /* @__PURE__ */React7.createElement(Input2, {
+  }, /* @__PURE__ */React8.createElement(Input2, {
     ref,
     variant: "forms.inputNumber",
     sx: sxProps,
@@ -560,7 +564,7 @@ var InputNumber = /* @__PURE__ */React7.forwardRef(({
     }, "onChange"),
     value,
     ...inputProps
-  }), /* @__PURE__ */React7.createElement(Text, {
+  }), /* @__PURE__ */React8.createElement(Text, {
     sx: {
       position: "absolute",
       alignSelf: "center",
@@ -569,9 +573,9 @@ var InputNumber = /* @__PURE__ */React7.forwardRef(({
       cursor: "pointer"
     },
     onClick: handleChangeUp
-  }, /* @__PURE__ */React7.createElement(Icon5, {
+  }, /* @__PURE__ */React8.createElement(Icon5, {
     icon: "picker-down"
-  })), infoIcon && /* @__PURE__ */React7.createElement(Text, {
+  })), infoIcon && /* @__PURE__ */React8.createElement(Text, {
     sx: {
       position: "absolute",
       alignSelf: "center",
@@ -580,9 +584,9 @@ var InputNumber = /* @__PURE__ */React7.forwardRef(({
       cursor: onClickInfoIcon ? "pointer" : "default"
     },
     onClick: onClickInfoIcon
-  }, /* @__PURE__ */React7.createElement(Icon5, {
+  }, /* @__PURE__ */React8.createElement(Icon5, {
     icon: "info"
-  })), /* @__PURE__ */React7.createElement(Text, {
+  })), /* @__PURE__ */React8.createElement(Text, {
     sx: {
       position: "absolute",
       alignSelf: "center",
@@ -591,23 +595,23 @@ var InputNumber = /* @__PURE__ */React7.forwardRef(({
       cursor: "pointer"
     },
     onClick: handleChangeDown
-  }, /* @__PURE__ */React7.createElement(Icon5, {
+  }, /* @__PURE__ */React8.createElement(Icon5, {
     icon: "picker-up"
   })));
 });
 InputNumber.displayName = "InputNumber";
 
 // src/components/InputPassword.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 var InputPassword = /* @__PURE__ */__name(({
   showPasswordByDefault = false,
   ...inputPasswordProps
 }) => {
-  const [hidePass, setHidePass] = React8.useState(Boolean(!showPasswordByDefault));
+  const [hidePass, setHidePass] = React9.useState(Boolean(!showPasswordByDefault));
   const {
     icon,
     inputType
-  } = React8.useMemo(() => {
+  } = React9.useMemo(() => {
     return {
       icon: hidePass ? "view-off" : "view-on",
       inputType: hidePass ? "password" : "text"
@@ -618,7 +622,7 @@ var InputPassword = /* @__PURE__ */__name(({
       return !prev;
     });
   }, "handleClick");
-  return /* @__PURE__ */React8.createElement(Input, {
+  return /* @__PURE__ */React9.createElement(Input, {
     ...inputPasswordProps,
     trailingIcon: {
       icon,
@@ -630,8 +634,81 @@ var InputPassword = /* @__PURE__ */__name(({
 
 // src/components/Label.tsx
 import { Icon as Icon6 } from "@ttoss/react-icons";
-import * as React9 from "react";
+import * as React10 from "react";
 import { Label as LabelUi } from "theme-ui";
+
+// src/components/Tooltip.tsx
+import { Tooltip as TooltipReact } from "react-tooltip";
+var Tooltip = /* @__PURE__ */__name(({
+  variant = "info",
+  sx,
+  ...props
+}) => {
+  const className = `tooltip-component tooltip-${variant}`;
+  const getVariantStyles = /* @__PURE__ */__name(variantType => {
+    const variants = {
+      info: {
+        backgroundColor: "input.background.secondary.default",
+        color: "feedback.text.secondary.default",
+        borderColor: "feedback.border.secondary.default"
+      },
+      success: {
+        backgroundColor: "feedback.background.positive.default",
+        color: "feedback.text.positive.default",
+        borderColor: "feedback.border.positive.default"
+      },
+      warning: {
+        backgroundColor: "feedback.background.caution.default",
+        color: "feedback.text.caution.default",
+        borderColor: "feedback.border.caution.default"
+      },
+      error: {
+        backgroundColor: "feedback.background.negative.default",
+        color: "feedback.text.negative.default",
+        borderColor: "feedback.border.negative.default"
+      }
+    };
+    return variants[variantType] || variants.info;
+  }, "getVariantStyles");
+  return /* @__PURE__ */React.createElement(Box, {
+    sx: /* @__PURE__ */__name(({
+      fonts
+    }) => {
+      const variantStyles = getVariantStyles(variant);
+      return {
+        ".example-arrow": {
+          display: "none"
+        },
+        ".tooltip-component": {
+          fontFamily: fonts?.body,
+          paddingY: "2",
+          paddingX: "3",
+          border: "sm",
+          borderRadius: "xl",
+          zIndex: "tooltip",
+          opacity: "1",
+          lineHeight: "shorter",
+          letterSpacing: "wide",
+          a: {
+            color: "feedback.text.secondary.default",
+            fontFamily: "body",
+            textDecorationLine: "underline",
+            lineHeight: "normal"
+          },
+          ...variantStyles,
+          ...sx
+        },
+        [`&.tooltip-${variant}`]: variantStyles
+      };
+    }, "sx")
+  }, /* @__PURE__ */React.createElement(TooltipReact, {
+    className,
+    ...props,
+    classNameArrow: "example-arrow"
+  }, props.children));
+}, "Tooltip");
+
+// src/components/Label.tsx
 var TOOLTIP_LABEL = "tooltip";
 var Label = /* @__PURE__ */__name(({
   children,
@@ -639,10 +716,9 @@ var Label = /* @__PURE__ */__name(({
   sx,
   ...props
 }) => {
-  const id = React9.useId();
+  const id = React10.useId();
   const tooltipId = `${id}-tooltip`;
-  return /* @__PURE__ */React9.createElement(LabelUi, {
-    "data-tooltip-id": tooltipId,
+  return /* @__PURE__ */React10.createElement(LabelUi, {
     sx: {
       alignItems: "center",
       fontSize: "sm",
@@ -652,39 +728,31 @@ var Label = /* @__PURE__ */__name(({
       ...sx
     },
     ...props
-  }, children, tooltip && /* @__PURE__ */React9.createElement(Text, {
+  }, children, tooltip && /* @__PURE__ */React10.createElement(Text, {
+    "data-tooltip-id": tooltipId,
     sx: {
       color: "currentcolor",
-      cursor: "pointer"
+      cursor: "pointer",
+      marginLeft: "1"
     },
     "aria-label": TOOLTIP_LABEL
-  }, tooltip.icon ? /* @__PURE__ */React9.createElement(Icon6, {
-    inline: true,
-    icon: tooltip.icon
-  }) : /* @__PURE__ */React9.createElement(Icon6, {
-    inline: true,
-    icon: "fluent:info-24-regular"
-  }), /* @__PURE__ */React9.createElement(Tooltip, {
-    id: tooltipId,
-    openOnClick: tooltip.openOnClick,
-    clickable: tooltip.clickable,
-    place: tooltip.place,
-    hidden: tooltip.hidden,
-    variant: tooltip.variant,
-    setIsOpen: tooltip.setIsOpen,
-    isOpen: tooltip.isOpen
-  }, tooltip.render)));
+  }, /* @__PURE__ */React10.createElement(Icon6, {
+    icon: "info"
+  }), /* @__PURE__ */React10.createElement(Tooltip, {
+    ...tooltip,
+    id: tooltipId
+  })));
 }, "Label");
 
 // src/components/Link.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import { Link as LinkUi } from "theme-ui";
-var Link = /* @__PURE__ */React10.forwardRef(({
+var Link = /* @__PURE__ */React11.forwardRef(({
   quiet,
   className,
   ...props
 }, ref) => {
-  return /* @__PURE__ */React10.createElement(LinkUi, {
+  return /* @__PURE__ */React11.createElement(LinkUi, {
     className: `${quiet ? "quiet" : ""} ${className ?? ""}`,
     ...props,
     ref
@@ -699,7 +767,7 @@ import { Paragraph } from "theme-ui";
 import { Radio } from "theme-ui";
 
 // src/components/SegmentedControl.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import { Box as Box3, Flex as Flex2 } from "theme-ui";
 var SegmentedControl = /* @__PURE__ */__name(({
   options,
@@ -711,8 +779,8 @@ var SegmentedControl = /* @__PURE__ */__name(({
   sx,
   ...rest
 }) => {
-  const [internalValue, setInternalValue] = React11.useState(propValue || defaultValue);
-  React11.useEffect(() => {
+  const [internalValue, setInternalValue] = React12.useState(propValue || defaultValue);
+  React12.useEffect(() => {
     if (propValue !== void 0) {
       setInternalValue(propValue);
     }
@@ -730,7 +798,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
     } : option;
   });
   const currentValue = propValue !== void 0 ? propValue : internalValue;
-  return /* @__PURE__ */React11.createElement(Flex2, {
+  return /* @__PURE__ */React12.createElement(Flex2, {
     className,
     sx: {
       width: "100%",
@@ -813,18 +881,18 @@ var SegmentedControl = /* @__PURE__ */__name(({
       ...sx
     },
     ...rest
-  }, /* @__PURE__ */React11.createElement("div", {
+  }, /* @__PURE__ */React12.createElement("div", {
     className: "rc-segmented"
-  }, /* @__PURE__ */React11.createElement(Flex2, {
+  }, /* @__PURE__ */React12.createElement(Flex2, {
     className: "rc-segmented-group custom-segmented-group"
   }, normalizedOptions.map((option, index) => {
     const isSelected = option.value === currentValue;
     const isLastItem = index === normalizedOptions.length - 1;
     const isItemDisabled = disabled || option.disabled;
     const showDivider = !isLastItem && option.value !== currentValue && normalizedOptions[index + 1].value !== currentValue;
-    return /* @__PURE__ */React11.createElement(React11.Fragment, {
+    return /* @__PURE__ */React12.createElement(React12.Fragment, {
       key: `${index}-${option.value}`
-    }, /* @__PURE__ */React11.createElement(Box3, {
+    }, /* @__PURE__ */React12.createElement(Box3, {
       as: "label",
       className: `rc-segmented-item ${isSelected ? "rc-segmented-item-selected" : ""} ${isItemDisabled ? "rc-segmented-item-disabled" : ""}`,
       onClick: /* @__PURE__ */__name(() => {
@@ -832,7 +900,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
           handleChange(option.value);
         }
       }, "onClick")
-    }, /* @__PURE__ */React11.createElement("input", {
+    }, /* @__PURE__ */React12.createElement("input", {
       type: "radio",
       value: option.value,
       checked: isSelected,
@@ -842,9 +910,9 @@ var SegmentedControl = /* @__PURE__ */__name(({
           handleChange(option.value);
         }
       }, "onChange")
-    }), /* @__PURE__ */React11.createElement("div", {
+    }), /* @__PURE__ */React12.createElement("div", {
       className: "rc-segmented-item-label"
-    }, option.label)), showDivider && /* @__PURE__ */React11.createElement(Box3, {
+    }, option.label)), showDivider && /* @__PURE__ */React12.createElement(Box3, {
       className: "segmented-divider",
       sx: {
         height: "60%",
@@ -855,7 +923,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
         zIndex: 3
       }
     }));
-  }), currentValue !== void 0 && /* @__PURE__ */React11.createElement("div", {
+  }), currentValue !== void 0 && /* @__PURE__ */React12.createElement("div", {
     className: "rc-segmented-thumb",
     style: {
       width: `${100 / normalizedOptions.length}%`,
@@ -868,7 +936,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
 
 // src/components/Select.tsx
 import { Icon as Icon7 } from "@ttoss/react-icons";
-import * as React12 from "react";
+import * as React13 from "react";
 import ReactSelect, { components } from "react-select";
 var Control = /* @__PURE__ */__name(props => {
   const isDisabled = props.selectProps.isDisabled;
@@ -888,7 +956,7 @@ var Control = /* @__PURE__ */__name(props => {
     }
     return "display.background.secondary.default";
   })();
-  return /* @__PURE__ */React12.createElement(Box, {
+  return /* @__PURE__ */React13.createElement(Box, {
     sx: {
       ".react-select__control": {
         borderColor,
@@ -897,7 +965,7 @@ var Control = /* @__PURE__ */__name(props => {
         paddingY: "3"
       }
     }
-  }, /* @__PURE__ */React12.createElement(components.Control, props));
+  }, /* @__PURE__ */React13.createElement(components.Control, props));
 }, "Control");
 var DropdownIndicator = /* @__PURE__ */__name(props => {
   const isDisabled = props.selectProps.isDisabled;
@@ -907,7 +975,7 @@ var DropdownIndicator = /* @__PURE__ */__name(props => {
     }
     return "text";
   })();
-  return /* @__PURE__ */React12.createElement(Text, {
+  return /* @__PURE__ */React13.createElement(Text, {
     sx: {
       fontSize: "md",
       color,
@@ -915,14 +983,14 @@ var DropdownIndicator = /* @__PURE__ */__name(props => {
       display: "flex",
       alignItems: "center"
     }
-  }, /* @__PURE__ */React12.createElement(Icon7, {
+  }, /* @__PURE__ */React13.createElement(Icon7, {
     icon: "picker-down"
   }));
 }, "DropdownIndicator");
 var IndicatorsContainer = /* @__PURE__ */__name(({
   children
 }) => {
-  return /* @__PURE__ */React12.createElement(Box, {
+  return /* @__PURE__ */React13.createElement(Box, {
     sx: {
       marginLeft: "4",
       border: "none"
@@ -932,7 +1000,7 @@ var IndicatorsContainer = /* @__PURE__ */__name(({
 var Placeholder = /* @__PURE__ */__name(({
   children
 }) => {
-  return /* @__PURE__ */React12.createElement(Text, {
+  return /* @__PURE__ */React13.createElement(Text, {
     sx: {
       color: "onMuted",
       alignSelf: "center"
@@ -950,10 +1018,10 @@ var SelectContainer = /* @__PURE__ */__name(({
   return (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     /* @__PURE__ */
-    React12.createElement(Box, {
+    React13.createElement(Box, {
       sx,
       css: css2
-    }, /* @__PURE__ */React12.createElement(components.SelectContainer, props, children))
+    }, /* @__PURE__ */React13.createElement(components.SelectContainer, props, children))
   );
 }, "SelectContainer");
 var ValueContainer = /* @__PURE__ */__name(({
@@ -979,26 +1047,26 @@ var ValueContainer = /* @__PURE__ */__name(({
     }
     return leadingIcon || "search";
   })();
-  return /* @__PURE__ */React12.createElement(Flex, {
+  return /* @__PURE__ */React13.createElement(Flex, {
     sx: {
       gap: "4",
       flex: 1
     }
-  }, finalLeadingIcon && /* @__PURE__ */React12.createElement(Text, {
+  }, finalLeadingIcon && /* @__PURE__ */React13.createElement(Text, {
     sx: {
       alignSelf: "center",
       pointerEvents: "none",
       lineHeight: 0,
       fontSize: "md"
     }
-  }, /* @__PURE__ */React12.createElement(Icon7, {
+  }, /* @__PURE__ */React13.createElement(Icon7, {
     icon: finalLeadingIcon
-  })), /* @__PURE__ */React12.createElement(Flex, {
+  })), /* @__PURE__ */React13.createElement(Flex, {
     sx: {
       flex: 1,
       alignItems: "center"
     }
-  }, children), (trailingIcon || hasError) && /* @__PURE__ */React12.createElement(Text, {
+  }, children), (trailingIcon || hasError) && /* @__PURE__ */React13.createElement(Text, {
     className: hasError ? "error-icon" : "",
     sx: {
       alignSelf: "center",
@@ -1007,11 +1075,11 @@ var ValueContainer = /* @__PURE__ */__name(({
       fontSize: "md",
       color: trailingIconColor
     }
-  }, /* @__PURE__ */React12.createElement(Icon7, {
+  }, /* @__PURE__ */React13.createElement(Icon7, {
     icon: hasError ? "warning-alt" : trailingIcon
   })));
 }, "ValueContainer");
-var Select = /* @__PURE__ */React12.forwardRef(({
+var Select = /* @__PURE__ */React13.forwardRef(({
   ...props
 }, ref) => {
   const value = props.options?.find(option => {
@@ -1020,7 +1088,7 @@ var Select = /* @__PURE__ */React12.forwardRef(({
     }
     return false;
   });
-  return /* @__PURE__ */React12.createElement(ReactSelect, {
+  return /* @__PURE__ */React13.createElement(ReactSelect, {
     ref,
     /**
      * https://react-select.com/components
@@ -1102,7 +1170,7 @@ var Switch = /* @__PURE__ */__name(props => {
 }, "Switch");
 
 // src/components/Tag.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 var tagVariantMap = {
   positive: {
     bg: "feedback.background.positive.default",
@@ -1159,7 +1227,7 @@ var Tag = /* @__PURE__ */__name(({
     alignItems: "center"
   };
   if (Array.isArray(children)) {
-    return /* @__PURE__ */React13.createElement(Box, {
+    return /* @__PURE__ */React14.createElement(Box, {
       as: "span",
       sx: {
         ml: 2,
@@ -1169,7 +1237,7 @@ var Tag = /* @__PURE__ */__name(({
         ...sx
       }
     }, children.map((child, i) => {
-      return /* @__PURE__ */React13.createElement(Box, {
+      return /* @__PURE__ */React14.createElement(Box, {
         key: i,
         as: "span",
         sx: {
@@ -1183,7 +1251,7 @@ var Tag = /* @__PURE__ */__name(({
       }, child);
     }));
   }
-  return /* @__PURE__ */React13.createElement(Box, {
+  return /* @__PURE__ */React14.createElement(Box, {
     as: "span",
     sx: {
       ...baseStyles,
@@ -1194,15 +1262,15 @@ var Tag = /* @__PURE__ */__name(({
 
 // src/components/Textarea.tsx
 import { Icon as Icon8 } from "@ttoss/react-icons";
-import * as React14 from "react";
+import * as React15 from "react";
 import { Textarea as TextareaUI } from "theme-ui";
-var Textarea = /* @__PURE__ */React14.forwardRef(({
+var Textarea = /* @__PURE__ */React15.forwardRef(({
   trailingIcon,
   className,
   sx,
   ...textareaProps
 }, ref) => {
-  return /* @__PURE__ */React14.createElement(Flex, {
+  return /* @__PURE__ */React15.createElement(Flex, {
     className,
     sx: {
       ...sx,
@@ -1210,7 +1278,7 @@ var Textarea = /* @__PURE__ */React14.forwardRef(({
       padding: 0,
       border: "none"
     }
-  }, /* @__PURE__ */React14.createElement(TextareaUI, {
+  }, /* @__PURE__ */React15.createElement(TextareaUI, {
     ref,
     sx: {
       fontFamily: "body",
@@ -1222,103 +1290,32 @@ var Textarea = /* @__PURE__ */React14.forwardRef(({
     },
     className,
     ...textareaProps
-  }), trailingIcon && /* @__PURE__ */React14.createElement(Text, {
+  }), trailingIcon && /* @__PURE__ */React15.createElement(Text, {
     sx: {
       position: "absolute",
       right: "1.25rem",
       top: "0.75rem"
     }
-  }, /* @__PURE__ */React14.createElement(Icon8, {
+  }, /* @__PURE__ */React15.createElement(Icon8, {
     inline: true,
     icon: trailingIcon
   })));
 });
 Textarea.displayName = "Textarea";
 
-// src/components/Tooltip.tsx
-import { Tooltip as TooltipReact } from "react-tooltip";
-var Tooltip = /* @__PURE__ */__name(({
-  variant = "info",
-  sx,
-  ...props
-}) => {
-  const className = `tooltip-component tooltip-${variant}`;
-  const getVariantStyles = /* @__PURE__ */__name(variantType => {
-    const variants = {
-      info: {
-        backgroundColor: "input.background.secondary.default",
-        color: "feedback.text.secondary.default",
-        borderColor: "feedback.border.secondary.default"
-      },
-      success: {
-        backgroundColor: "feedback.background.positive.default",
-        color: "feedback.text.positive.default",
-        borderColor: "feedback.border.positive.default"
-      },
-      warning: {
-        backgroundColor: "feedback.background.caution.default",
-        color: "feedback.text.caution.default",
-        borderColor: "feedback.border.caution.default"
-      },
-      error: {
-        backgroundColor: "feedback.background.negative.default",
-        color: "feedback.text.negative.default",
-        borderColor: "feedback.border.negative.default"
-      }
-    };
-    return variants[variantType] || variants.info;
-  }, "getVariantStyles");
-  return /* @__PURE__ */React.createElement(Box, {
-    sx: /* @__PURE__ */__name(({
-      fonts
-    }) => {
-      const variantStyles = getVariantStyles(variant);
-      return {
-        ".example-arrow": {
-          display: "none"
-        },
-        ".tooltip-component": {
-          fontFamily: fonts?.body,
-          paddingY: "2",
-          paddingX: "3",
-          border: "sm",
-          borderRadius: "xl",
-          zIndex: "tooltip",
-          opacity: "1",
-          lineHeight: "shorter",
-          letterSpacing: "wide",
-          a: {
-            color: "feedback.text.secondary.default",
-            fontFamily: "body",
-            textDecorationLine: "underline",
-            lineHeight: "normal"
-          },
-          ...variantStyles,
-          ...sx
-        },
-        [`&.tooltip-${variant}`]: variantStyles
-      };
-    }, "sx")
-  }, /* @__PURE__ */React.createElement(TooltipReact, {
-    className,
-    ...props,
-    classNameArrow: "example-arrow"
-  }, props.children));
-}, "Tooltip");
-
 // src/theme/ThemeProvider.tsx
 import { css, Global } from "@emotion/react";
 import { BruttalFonts, BruttalTheme } from "@ttoss/theme/Bruttal";
-import * as React15 from "react";
+import * as React16 from "react";
 import { ThemeUIProvider } from "theme-ui";
 var ThemeProvider = /* @__PURE__ */__name(({
   children,
   theme = BruttalTheme,
   fonts = BruttalFonts
 }) => {
-  return /* @__PURE__ */React15.createElement(React15.Fragment, null, /* @__PURE__ */React15.createElement(ThemeUIProvider, {
+  return /* @__PURE__ */React16.createElement(React16.Fragment, null, /* @__PURE__ */React16.createElement(ThemeUIProvider, {
     theme
-  }, /* @__PURE__ */React15.createElement(Global, {
+  }, /* @__PURE__ */React16.createElement(Global, {
     styles: css`
             ${fonts.map(url => {
       return `@import url('${url}');`;

package/dist/index.d.ts

@@ -90,17 +90,7 @@ type InputPasswordProps = Omit<InputProps, 'trailingIcon' | 'type'> & {
 declare const InputPassword: ({ showPasswordByDefault, ...inputPasswordProps }: InputPasswordProps) => react_jsx_runtime.JSX.Element;
 
 type LabelProps = LabelProps$1 & {
-    tooltip?: {
-        render: string | React.ReactNode;
-        place: 'top' | 'right' | 'bottom' | 'left';
-        openOnClick?: boolean;
-        clickable?: boolean;
-        variant?: 'dark' | 'light' | 'success' | 'warning' | 'error' | 'info';
-        hidden?: boolean;
-        setIsOpen?: (value: boolean) => void;
-        isOpen?: boolean;
-        icon?: string;
-    };
+    tooltip?: TooltipProps;
 };
 declare const Label: ({ children, tooltip, sx, ...props }: LabelProps) => react_jsx_runtime.JSX.Element;
 
@@ -191,4 +181,4 @@ declare const ThemeProvider: ({ children, theme, fonts, }: ThemeProviderProps) =
 
 declare const useTheme: () => theme_ui.ThemeUIContextValue;
 
-export { ActionButton, type ActionButtonProps, Badge, type BadgeProps, Button, type ButtonProps, Card, Checkbox, type CheckboxProps, CloseButton, type CloseButtonProps, Container, HelpText, type HelpTextProps, IconButton, type IconButtonProps, InfiniteLinearProgress, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, Label, type LabelProps, Link, type LinkProps, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectOptions, type SelectProps, Stack, type StackProps, Switch, Tag, type TagProps, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, Tooltip, useTheme };
+export { ActionButton, type ActionButtonProps, Badge, type BadgeProps, Button, type ButtonProps, Card, Checkbox, type CheckboxProps, CloseButton, type CloseButtonProps, Container, HelpText, type HelpTextProps, IconButton, type IconButtonProps, InfiniteLinearProgress, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, Label, type LabelProps, Link, type LinkProps, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectOptions, type SelectProps, Stack, type StackProps, Switch, Tag, type TagProps, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, Tooltip, type TooltipProps, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "5.11.0",
+  "version": "5.11.1",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "MIT",
   "author": "ttoss",
@@ -44,9 +44,9 @@
     "jest": "^30.2.0",
     "react": "^19.2.0",
     "tsup": "^8.5.1",
+    "@ttoss/config": "^1.35.12",
     "@ttoss/test-utils": "^3.0.4",
-    "@ttoss/react-icons": "^0.5.3",
-    "@ttoss/config": "^1.35.12"
+    "@ttoss/react-icons": "^0.5.3"
   },
   "keywords": [
     "React",