@ttoss/ui 5.10.0 → 5.10.2

package/dist/esm/index.js

@@ -1,11 +1,16 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import * as React from 'react';
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", {
+  value,
+  configurable: true
+});
 
 // src/components/Button.tsx
 import { Icon } from "@ttoss/react-icons";
-import * as React from "react";
+import * as React2 from "react";
 import { Button as ButtonUi } from "theme-ui";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Button = React.forwardRef((props, ref) => {
+var Button = /* @__PURE__ */React2.forwardRef((props, ref) => {
   const {
     children,
     leftIcon,
@@ -13,7 +18,7 @@ var Button = React.forwardRef((props, ref) => {
     loading,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsxs(ButtonUi, {
+  return /* @__PURE__ */React2.createElement(ButtonUi, {
     type: "button",
     ...restProps,
     ref,
@@ -29,24 +34,22 @@ var Button = React.forwardRef((props, ref) => {
         cursor: "not-allowed"
       },
       ...restProps.sx
-    },
-    children: [loading && /* @__PURE__ */jsx(Icon, {
-      inline: true,
-      icon: "three-dots-loading"
-    }), !loading && leftIcon && /* @__PURE__ */jsx(Icon, {
-      inline: true,
-      icon: leftIcon
-    }), children, rightIcon && /* @__PURE__ */jsx(Icon, {
-      inline: true,
-      icon: rightIcon
-    })]
-  });
+    }
+  }, loading && /* @__PURE__ */React2.createElement(Icon, {
+    inline: true,
+    icon: "three-dots-loading"
+  }), !loading && leftIcon && /* @__PURE__ */React2.createElement(Icon, {
+    inline: true,
+    icon: leftIcon
+  }), children, rightIcon && /* @__PURE__ */React2.createElement(Icon, {
+    inline: true,
+    icon: rightIcon
+  }));
 });
 Button.displayName = "Button";
 
 // src/components/ActionButton.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var ActionButton = ({
+var ActionButton = /* @__PURE__ */__name(({
   icon,
   variant = "default",
   sx,
@@ -93,7 +96,7 @@ var ActionButton = ({
       }
     }
   };
-  return /* @__PURE__ */jsx2(Button, {
+  return /* @__PURE__ */React.createElement(Button, {
     leftIcon: icon,
     sx: {
       paddingY: "2",
@@ -104,7 +107,7 @@ var ActionButton = ({
     },
     ...props
   });
-};
+}, "ActionButton");
 
 // src/components/Badge.tsx
 import { Icon as Icon2 } from "@ttoss/react-icons";
@@ -114,8 +117,7 @@ import { Badge as BadgeUi } from "theme-ui";
 import { Text } from "theme-ui";
 
 // src/components/Badge.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var Badge = ({
+var Badge = /* @__PURE__ */__name(({
   icon,
   children,
   sx,
@@ -123,7 +125,7 @@ var Badge = ({
   onDelete,
   ...props
 }) => {
-  return /* @__PURE__ */jsxs2(BadgeUi, {
+  return /* @__PURE__ */React.createElement(BadgeUi, {
     sx: {
       display: "flex",
       alignItems: "center",
@@ -137,34 +139,32 @@ var Badge = ({
       gap: "2",
       ...sx
     },
-    ...props,
-    children: [icon && /* @__PURE__ */jsx3(Icon2, {
-      inline: true,
-      icon
-    }), children, chip && /* @__PURE__ */jsx3(Text, {
-      sx: {
-        cursor: "pointer",
-        lineHeight: 0,
-        color: "currentcolor",
-        alignSelf: "center"
-      },
-      children: /* @__PURE__ */jsx3(Icon2, {
-        onClick: onDelete,
-        inline: true,
-        icon: "close"
-      })
-    })]
-  });
-};
+    ...props
+  }, icon && /* @__PURE__ */React.createElement(Icon2, {
+    inline: true,
+    icon
+  }), children, chip && /* @__PURE__ */React.createElement(Text, {
+    sx: {
+      cursor: "pointer",
+      lineHeight: 0,
+      color: "currentcolor",
+      alignSelf: "center"
+    }
+  }, /* @__PURE__ */React.createElement(Icon2, {
+    onClick: onDelete,
+    inline: true,
+    icon: "close"
+  })));
+}, "Badge");
 
 // src/components/Box.tsx
 import { Box } from "theme-ui";
 
 // src/components/Card.tsx
+import * as React3 from "react";
 import { Box as Box2, Card as CardUi } from "theme-ui";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var Card = props => {
-  return /* @__PURE__ */jsx4(CardUi, {
+var Card = /* @__PURE__ */__name(props => {
+  return /* @__PURE__ */React3.createElement(CardUi, {
     ...props,
     sx: {
       backgroundColor: "display.background.secondary.default",
@@ -179,12 +179,12 @@ var Card = props => {
       ...props.sx
     }
   });
-};
-var CardTitle = ({
+}, "Card");
+var CardTitle = /* @__PURE__ */__name(({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */jsx4(Box2, {
+  return /* @__PURE__ */React3.createElement(Box2, {
     ...props,
     sx: {
       paddingY: "4",
@@ -193,15 +193,14 @@ var CardTitle = ({
       borderBottom: "md",
       borderBottomColor: "display.border.muted.default",
       ...props.sx
-    },
-    children
-  });
-};
-var CardBody = ({
+    }
+  }, children);
+}, "CardTitle");
+var CardBody = /* @__PURE__ */__name(({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */jsx4(Box2, {
+  return /* @__PURE__ */React3.createElement(Box2, {
     ...props,
     sx: {
       paddingY: "4",
@@ -209,54 +208,51 @@ var CardBody = ({
       width: "full",
       backgroundColor: "display.background.muted.default",
       ...props.sx
-    },
-    children
-  });
-};
-var CardFooter = ({
+    }
+  }, children);
+}, "CardBody");
+var CardFooter = /* @__PURE__ */__name(({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */jsx4(Box2, {
+  return /* @__PURE__ */React3.createElement(Box2, {
     ...props,
     sx: {
       paddingY: "2",
       paddingX: "8",
       width: "full",
       ...props.sx
-    },
-    children
-  });
-};
+    }
+  }, children);
+}, "CardFooter");
 Card.Title = CardTitle;
 Card.Body = CardBody;
 Card.Footer = CardFooter;
 
 // src/components/Checkbox.tsx
-import * as React2 from "react";
+import * as React4 from "react";
 import { Checkbox as CheckBoxUi } from "theme-ui";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var Checkbox = React2.forwardRef(({
+var Checkbox = /* @__PURE__ */React4.forwardRef(({
   indeterminate = false,
   ...rest
 }, ref) => {
-  const innerRef = React2.useRef(null);
-  React2.useImperativeHandle(ref, () => {
+  const innerRef = React4.useRef(null);
+  React4.useImperativeHandle(ref, () => {
     return innerRef.current;
   });
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (innerRef.current) {
       innerRef.current.indeterminate = indeterminate;
     }
   }, [indeterminate]);
   if (indeterminate) {
-    return /* @__PURE__ */jsx5("input", {
+    return /* @__PURE__ */React4.createElement("input", {
       type: "checkbox",
       ref: innerRef,
       ...rest
     });
   }
-  return /* @__PURE__ */jsx5(CheckBoxUi, {
+  return /* @__PURE__ */React4.createElement(CheckBoxUi, {
     ref: innerRef,
     ...rest
   });
@@ -265,9 +261,8 @@ Checkbox.displayName = "Checkbox";
 
 // src/components/CloseButton.tsx
 import { Close as CloseUI } from "theme-ui";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var CloseButton = props => {
-  return /* @__PURE__ */jsx6(CloseUI, {
+var CloseButton = /* @__PURE__ */__name(props => {
+  return /* @__PURE__ */React.createElement(CloseUI, {
     type: "button",
     "aria-label": props.ariaLabel,
     sx: {
@@ -275,14 +270,13 @@ var CloseButton = props => {
     },
     ...props
   });
-};
+}, "CloseButton");
 
 // src/components/Container.tsx
-import * as React3 from "react";
+import * as React5 from "react";
 import { Container as ContainerUi } from "theme-ui";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var Container = React3.forwardRef((props, ref) => {
-  return /* @__PURE__ */jsx7(ContainerUi, {
+var Container = /* @__PURE__ */React5.forwardRef((props, ref) => {
+  return /* @__PURE__ */React5.createElement(ContainerUi, {
     ref,
     ...props
   });
@@ -302,15 +296,14 @@ import { Grid } from "theme-ui";
 import { Heading } from "theme-ui";
 
 // src/components/HelpText.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-var HelpText = ({
+var HelpText = /* @__PURE__ */__name(({
   sx,
   disabled,
   negative,
   ...props
 }) => {
   const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
-  return /* @__PURE__ */jsx8(Text, {
+  return /* @__PURE__ */React.createElement(Text, {
     variant,
     sx: {
       fontSize: "sm",
@@ -321,19 +314,18 @@ var HelpText = ({
     "aria-disabled": disabled ? "true" : void 0,
     ...props
   });
-};
+}, "HelpText");
 
 // src/components/IconButton.tsx
 import { Icon as Icon3 } from "@ttoss/react-icons";
 import { IconButton as IconButtonUi } from "theme-ui";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var IconButton = props => {
+var IconButton = /* @__PURE__ */__name(props => {
   const {
     icon,
     children,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsx9(IconButtonUi, {
+  return /* @__PURE__ */React.createElement(IconButtonUi, {
     type: "button",
     ...restProps,
     sx: {
@@ -343,29 +335,27 @@ var IconButton = props => {
         cursor: "not-allowed"
       },
       ...restProps.sx
-    },
-    children: icon ? /* @__PURE__ */jsx9(Icon3, {
-      inline: true,
-      icon
-    }) : children
-  });
-};
+    }
+  }, icon ? /* @__PURE__ */React.createElement(Icon3, {
+    inline: true,
+    icon
+  }) : children);
+}, "IconButton");
 
 // src/components/Image.tsx
 import { Image } from "theme-ui";
 
 // src/components/InfiniteLinearProgress.tsx
-import * as React4 from "react";
+import * as React6 from "react";
 
 // src/components/LinearProgress.tsx
 import { Progress } from "theme-ui";
 
 // src/components/InfiniteLinearProgress.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
 var MAX_PROGRESS = 100;
-var InfiniteLinearProgress = () => {
-  const [progress, setProgress] = React4.useState(0);
-  React4.useEffect(() => {
+var InfiniteLinearProgress = /* @__PURE__ */__name(() => {
+  const [progress, setProgress] = React6.useState(0);
+  React6.useEffect(() => {
     const timer = setInterval(() => {
       setProgress(oldProgress => {
         if (oldProgress === MAX_PROGRESS) {
@@ -386,19 +376,18 @@ var InfiniteLinearProgress = () => {
       clearInterval(timer);
     };
   }, []);
-  return /* @__PURE__ */jsx10(Progress, {
+  return /* @__PURE__ */React6.createElement(Progress, {
     max: MAX_PROGRESS,
     value: progress,
     role: "progressbar"
   });
-};
+}, "InfiniteLinearProgress");
 
 // src/components/Input.tsx
 import { Icon as Icon4 } from "@ttoss/react-icons";
-import * as React5 from "react";
+import * as React7 from "react";
 import { Input as InputUI } from "theme-ui";
-import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
-var Input = React5.forwardRef(({
+var Input = /* @__PURE__ */React7.forwardRef(({
   leadingIcon,
   trailingIcon: trailingIconProp,
   onLeadingIconClick,
@@ -409,66 +398,62 @@ var Input = React5.forwardRef(({
 }, ref) => {
   const trailingIcon = inputProps["aria-invalid"] ? "warning-alt" : trailingIconProp;
   const isWarning = !inputProps["aria-invalid"] && trailingIcon === "warning-alt";
-  return /* @__PURE__ */jsxs3(Flex, {
+  return /* @__PURE__ */React7.createElement(Flex, {
     className: `${className} ${isWarning ? "is-warning" : ""}`,
     sx: {
       ...sx,
       position: "relative",
       padding: 0,
       border: "none"
+    }
+  }, leadingIcon && /* @__PURE__ */React7.createElement(Text, {
+    sx: {
+      position: "absolute",
+      alignSelf: "center",
+      left: "1rem",
+      cursor: onLeadingIconClick ? "pointer" : "default"
     },
-    children: [leadingIcon && /* @__PURE__ */jsx11(Text, {
-      sx: {
-        position: "absolute",
-        alignSelf: "center",
-        left: "1rem",
-        cursor: onLeadingIconClick ? "pointer" : "default"
-      },
-      onClick: onLeadingIconClick,
-      variant: "leading-icon",
-      children: /* @__PURE__ */jsx11(Icon4, {
-        inline: true,
-        icon: leadingIcon
-      })
-    }), /* @__PURE__ */jsx11(InputUI, {
-      ref,
-      sx: {
-        fontFamily: "body",
-        paddingY: "3",
-        paddingX: "4",
-        ...sx,
-        paddingLeft: leadingIcon ? "10" : void 0,
-        paddingRight: trailingIcon ? "10" : void 0,
-        margin: 0
-      },
-      className,
-      ...inputProps
-    }), trailingIcon && /* @__PURE__ */jsx11(Text, {
-      sx: {
-        position: "absolute",
-        right: "1rem",
-        alignSelf: "center",
-        color: isWarning ? "feedback.text.caution.default" : void 0,
-        cursor: onTrailingIconClick ? "pointer" : "default",
-        fontSize: "xl"
-      },
-      variant: "trailing-icon",
-      onClick: onTrailingIconClick,
-      children: /* @__PURE__ */jsx11(Icon4, {
-        inline: true,
-        icon: trailingIcon
-      })
-    })]
-  });
+    onClick: onLeadingIconClick,
+    variant: "leading-icon"
+  }, /* @__PURE__ */React7.createElement(Icon4, {
+    inline: true,
+    icon: leadingIcon
+  })), /* @__PURE__ */React7.createElement(InputUI, {
+    ref,
+    sx: {
+      fontFamily: "body",
+      paddingY: "3",
+      paddingX: "4",
+      ...sx,
+      paddingLeft: leadingIcon ? "10" : void 0,
+      paddingRight: trailingIcon ? "10" : void 0,
+      margin: 0
+    },
+    className,
+    ...inputProps
+  }), trailingIcon && /* @__PURE__ */React7.createElement(Text, {
+    sx: {
+      position: "absolute",
+      right: "1rem",
+      alignSelf: "center",
+      color: isWarning ? "feedback.text.caution.default" : void 0,
+      cursor: onTrailingIconClick ? "pointer" : "default",
+      fontSize: "xl"
+    },
+    variant: "trailing-icon",
+    onClick: onTrailingIconClick
+  }, /* @__PURE__ */React7.createElement(Icon4, {
+    inline: true,
+    icon: trailingIcon
+  })));
 });
 Input.displayName = "Input";
 
 // src/components/InputNumber.tsx
 import { Icon as Icon5 } from "@ttoss/react-icons";
-import * as React6 from "react";
+import * as React8 from "react";
 import { Input as Input2 } from "theme-ui";
-import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
-var InputNumber = React6.forwardRef(({
+var InputNumber = /* @__PURE__ */React8.forwardRef(({
   sx,
   value,
   infoIcon,
@@ -476,7 +461,7 @@ var InputNumber = React6.forwardRef(({
   onClickInfoIcon,
   ...inputProps
 }, ref) => {
-  const sxProps = React6.useMemo(() => {
+  const sxProps = React8.useMemo(() => {
     const size = String(typeof value === "undefined" ? 0 : value).length;
     if (inputProps["aria-invalid"] === "true") {
       return {
@@ -508,7 +493,7 @@ var InputNumber = React6.forwardRef(({
       margin: 0
     };
   }, [inputProps, value, sx]);
-  const handleChangeUp = () => {
+  const handleChangeUp = /* @__PURE__ */__name(() => {
     if (inputProps.disabled) {
       return;
     }
@@ -517,8 +502,8 @@ var InputNumber = React6.forwardRef(({
       return;
     }
     onChange(value - 1);
-  };
-  const handleChangeDown = () => {
+  }, "handleChangeUp");
+  const handleChangeDown = /* @__PURE__ */__name(() => {
     if (inputProps.disabled) {
       return;
     }
@@ -527,8 +512,8 @@ var InputNumber = React6.forwardRef(({
       return;
     }
     onChange(value + 1);
-  };
-  return /* @__PURE__ */jsxs4(Flex, {
+  }, "handleChangeDown");
+  return /* @__PURE__ */React8.createElement(Flex, {
     sx: {
       width: "fit-content",
       ...sx,
@@ -537,89 +522,84 @@ var InputNumber = React6.forwardRef(({
       border: "none"
     },
     ref,
-    "aria-invalid": inputProps["aria-invalid"],
-    children: [/* @__PURE__ */jsx12(Input2, {
-      ref,
-      variant: "forms.inputNumber",
-      sx: sxProps,
-      type: "number",
-      onChange: e => {
-        onChange(Number(e.target.value));
-      },
-      value,
-      ...inputProps
-    }), /* @__PURE__ */jsx12(Text, {
-      sx: {
-        position: "absolute",
-        alignSelf: "center",
-        left: "1rem",
-        zIndex: 1,
-        cursor: "pointer"
-      },
-      onClick: handleChangeUp,
-      children: /* @__PURE__ */jsx12(Icon5, {
-        icon: "picker-down"
-      })
-    }), infoIcon && /* @__PURE__ */jsx12(Text, {
-      sx: {
-        position: "absolute",
-        alignSelf: "center",
-        right: "2.5rem",
-        zIndex: 1,
-        cursor: onClickInfoIcon ? "pointer" : "default"
-      },
-      onClick: onClickInfoIcon,
-      children: /* @__PURE__ */jsx12(Icon5, {
-        icon: "info"
-      })
-    }), /* @__PURE__ */jsx12(Text, {
-      sx: {
-        position: "absolute",
-        alignSelf: "center",
-        right: "1rem",
-        zIndex: 1,
-        cursor: "pointer"
-      },
-      onClick: handleChangeDown,
-      children: /* @__PURE__ */jsx12(Icon5, {
-        icon: "picker-up"
-      })
-    })]
-  });
+    "aria-invalid": inputProps["aria-invalid"]
+  }, /* @__PURE__ */React8.createElement(Input2, {
+    ref,
+    variant: "forms.inputNumber",
+    sx: sxProps,
+    type: "number",
+    onChange: /* @__PURE__ */__name(e => {
+      onChange(Number(e.target.value));
+    }, "onChange"),
+    value,
+    ...inputProps
+  }), /* @__PURE__ */React8.createElement(Text, {
+    sx: {
+      position: "absolute",
+      alignSelf: "center",
+      left: "1rem",
+      zIndex: 1,
+      cursor: "pointer"
+    },
+    onClick: handleChangeUp
+  }, /* @__PURE__ */React8.createElement(Icon5, {
+    icon: "picker-down"
+  })), infoIcon && /* @__PURE__ */React8.createElement(Text, {
+    sx: {
+      position: "absolute",
+      alignSelf: "center",
+      right: "2.5rem",
+      zIndex: 1,
+      cursor: onClickInfoIcon ? "pointer" : "default"
+    },
+    onClick: onClickInfoIcon
+  }, /* @__PURE__ */React8.createElement(Icon5, {
+    icon: "info"
+  })), /* @__PURE__ */React8.createElement(Text, {
+    sx: {
+      position: "absolute",
+      alignSelf: "center",
+      right: "1rem",
+      zIndex: 1,
+      cursor: "pointer"
+    },
+    onClick: handleChangeDown
+  }, /* @__PURE__ */React8.createElement(Icon5, {
+    icon: "picker-up"
+  })));
 });
 InputNumber.displayName = "InputNumber";
 
 // src/components/InputPassword/InputPassword.tsx
-import * as React8 from "react";
+import * as React10 from "react";
 
 // src/components/InputPassword/useHidePassInput.ts
-import * as React7 from "react";
-var useHidePassInput = (defaultValue = true) => {
-  const [hidePass, setHidePass] = React7.useState(Boolean(defaultValue));
+import * as React9 from "react";
+var useHidePassInput = /* @__PURE__ */__name((defaultValue = true) => {
+  const [hidePass, setHidePass] = React9.useState(Boolean(defaultValue));
   const {
     icon,
     inputType
-  } = React7.useMemo(() => {
+  } = React9.useMemo(() => {
     return {
       icon: hidePass ? "view-off" : "view-on",
       inputType: hidePass ? "password" : "text"
     };
   }, [hidePass]);
-  const handleClick = () => {
+  const handleClick = /* @__PURE__ */__name(() => {
     setHidePass(prev => {
       return !prev;
     });
-  };
+  }, "handleClick");
   return {
     handleClick,
     icon,
     inputType
   };
-};
+}, "useHidePassInput");
 
 // src/components/InputPassword/InputPassword.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
-var InputPassword = React8.forwardRef(({
+var InputPassword = /* @__PURE__ */React10.forwardRef(({
   showPasswordByDefault,
   ...inputPasswordProps
 }, ref) => {
@@ -628,7 +608,7 @@ var InputPassword = React8.forwardRef(({
     icon,
     inputType
   } = useHidePassInput(!showPasswordByDefault);
-  return /* @__PURE__ */jsx13(Input, {
+  return /* @__PURE__ */React10.createElement(Input, {
     ref,
     ...inputPasswordProps,
     trailingIcon: icon,
@@ -640,19 +620,18 @@ InputPassword.displayName = "InputPassword";
 
 // src/components/Label.tsx
 import { Icon as Icon6 } from "@ttoss/react-icons";
-import * as React9 from "react";
+import * as React11 from "react";
 import { Label as LabelUi } from "theme-ui";
-import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
 var TOOLTIP_LABEL = "tooltip";
-var Label = ({
+var Label = /* @__PURE__ */__name(({
   children,
   tooltip,
   sx,
   ...props
 }) => {
-  const id = React9.useId();
+  const id = React11.useId();
   const tooltipId = `${id}-tooltip`;
-  return /* @__PURE__ */jsxs5(LabelUi, {
+  return /* @__PURE__ */React11.createElement(LabelUi, {
     "data-tooltip-id": tooltipId,
     sx: {
       alignItems: "center",
@@ -662,44 +641,40 @@ var Label = ({
       color: "input.text.secondary.default",
       ...sx
     },
-    ...props,
-    children: [children, tooltip && /* @__PURE__ */jsxs5(Text, {
-      sx: {
-        color: "currentcolor",
-        cursor: "pointer"
-      },
-      "aria-label": TOOLTIP_LABEL,
-      children: [tooltip.icon ? /* @__PURE__ */jsx14(Icon6, {
-        inline: true,
-        icon: tooltip.icon
-      }) : /* @__PURE__ */jsx14(Icon6, {
-        inline: true,
-        icon: "fluent:info-24-regular"
-      }), /* @__PURE__ */jsx14(Tooltip, {
-        id: tooltipId,
-        openOnClick: tooltip.openOnClick,
-        clickable: tooltip.clickable,
-        place: tooltip.place,
-        hidden: tooltip.hidden,
-        variant: tooltip.variant,
-        setIsOpen: tooltip.setIsOpen,
-        isOpen: tooltip.isOpen,
-        children: tooltip.render
-      })]
-    })]
-  });
-};
+    ...props
+  }, children, tooltip && /* @__PURE__ */React11.createElement(Text, {
+    sx: {
+      color: "currentcolor",
+      cursor: "pointer"
+    },
+    "aria-label": TOOLTIP_LABEL
+  }, tooltip.icon ? /* @__PURE__ */React11.createElement(Icon6, {
+    inline: true,
+    icon: tooltip.icon
+  }) : /* @__PURE__ */React11.createElement(Icon6, {
+    inline: true,
+    icon: "fluent:info-24-regular"
+  }), /* @__PURE__ */React11.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)));
+}, "Label");
 
 // src/components/Link.tsx
-import * as React10 from "react";
+import * as React12 from "react";
 import { Link as LinkUi } from "theme-ui";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var Link = React10.forwardRef(({
+var Link = /* @__PURE__ */React12.forwardRef(({
   quiet,
   className,
   ...props
 }, ref) => {
-  return /* @__PURE__ */jsx15(LinkUi, {
+  return /* @__PURE__ */React12.createElement(LinkUi, {
     className: `${quiet ? "quiet" : ""} ${className ?? ""}`,
     ...props,
     ref
@@ -714,10 +689,9 @@ import { Paragraph } from "theme-ui";
 import { Radio } from "theme-ui";
 
 // src/components/SegmentedControl.tsx
-import * as React11 from "react";
+import * as React13 from "react";
 import { Box as Box3, Flex as Flex2 } from "theme-ui";
-import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
-var SegmentedControl = ({
+var SegmentedControl = /* @__PURE__ */__name(({
   options,
   value: propValue,
   defaultValue,
@@ -727,18 +701,18 @@ var SegmentedControl = ({
   sx,
   ...rest
 }) => {
-  const [internalValue, setInternalValue] = React11.useState(propValue || defaultValue);
-  React11.useEffect(() => {
+  const [internalValue, setInternalValue] = React13.useState(propValue || defaultValue);
+  React13.useEffect(() => {
     if (propValue !== void 0) {
       setInternalValue(propValue);
     }
   }, [propValue]);
-  const handleChange = newValue => {
+  const handleChange = /* @__PURE__ */__name(newValue => {
     setInternalValue(newValue);
     if (onChange) {
       onChange(newValue);
     }
-  };
+  }, "handleChange");
   const normalizedOptions = options.map(option => {
     return typeof option === "string" || typeof option === "number" ? {
       label: option,
@@ -746,7 +720,7 @@ var SegmentedControl = ({
     } : option;
   });
   const currentValue = propValue !== void 0 ? propValue : internalValue;
-  return /* @__PURE__ */jsx16(Flex2, {
+  return /* @__PURE__ */React13.createElement(Flex2, {
     className,
     sx: {
       width: "100%",
@@ -828,71 +802,65 @@ var SegmentedControl = ({
       },
       ...sx
     },
-    ...rest,
-    children: /* @__PURE__ */jsx16("div", {
-      className: "rc-segmented",
-      children: /* @__PURE__ */jsxs6(Flex2, {
-        className: "rc-segmented-group custom-segmented-group",
-        children: [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__ */jsxs6(React11.Fragment, {
-            children: [/* @__PURE__ */jsxs6(Box3, {
-              as: "label",
-              className: `rc-segmented-item ${isSelected ? "rc-segmented-item-selected" : ""} ${isItemDisabled ? "rc-segmented-item-disabled" : ""}`,
-              onClick: () => {
-                if (!disabled && !option.disabled) {
-                  handleChange(option.value);
-                }
-              },
-              children: [/* @__PURE__ */jsx16("input", {
-                type: "radio",
-                value: option.value,
-                checked: isSelected,
-                disabled: isItemDisabled,
-                onChange: e => {
-                  if (!disabled && !option.disabled && e.target.checked) {
-                    handleChange(option.value);
-                  }
-                }
-              }), /* @__PURE__ */jsx16("div", {
-                className: "rc-segmented-item-label",
-                children: option.label
-              })]
-            }), showDivider && /* @__PURE__ */jsx16(Box3, {
-              className: "segmented-divider",
-              sx: {
-                height: "60%",
-                width: "1px",
-                backgroundColor: "action.text.accent.default",
-                opacity: 0.4,
-                alignSelf: "center",
-                zIndex: 3
-              }
-            })]
-          }, `${index}-${option.value}`);
-        }), currentValue !== void 0 && /* @__PURE__ */jsx16("div", {
-          className: "rc-segmented-thumb",
-          style: {
-            width: `${100 / normalizedOptions.length}%`,
-            transform: `translateX(${normalizedOptions.findIndex(option => {
-              return option.value === currentValue;
-            }) * 100}%)`
-          }
-        })]
-      })
-    })
-  });
-};
+    ...rest
+  }, /* @__PURE__ */React13.createElement("div", {
+    className: "rc-segmented"
+  }, /* @__PURE__ */React13.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__ */React13.createElement(React13.Fragment, {
+      key: `${index}-${option.value}`
+    }, /* @__PURE__ */React13.createElement(Box3, {
+      as: "label",
+      className: `rc-segmented-item ${isSelected ? "rc-segmented-item-selected" : ""} ${isItemDisabled ? "rc-segmented-item-disabled" : ""}`,
+      onClick: /* @__PURE__ */__name(() => {
+        if (!disabled && !option.disabled) {
+          handleChange(option.value);
+        }
+      }, "onClick")
+    }, /* @__PURE__ */React13.createElement("input", {
+      type: "radio",
+      value: option.value,
+      checked: isSelected,
+      disabled: isItemDisabled,
+      onChange: /* @__PURE__ */__name(e => {
+        if (!disabled && !option.disabled && e.target.checked) {
+          handleChange(option.value);
+        }
+      }, "onChange")
+    }), /* @__PURE__ */React13.createElement("div", {
+      className: "rc-segmented-item-label"
+    }, option.label)), showDivider && /* @__PURE__ */React13.createElement(Box3, {
+      className: "segmented-divider",
+      sx: {
+        height: "60%",
+        width: "1px",
+        backgroundColor: "action.text.accent.default",
+        opacity: 0.4,
+        alignSelf: "center",
+        zIndex: 3
+      }
+    }));
+  }), currentValue !== void 0 && /* @__PURE__ */React13.createElement("div", {
+    className: "rc-segmented-thumb",
+    style: {
+      width: `${100 / normalizedOptions.length}%`,
+      transform: `translateX(${normalizedOptions.findIndex(option => {
+        return option.value === currentValue;
+      }) * 100}%)`
+    }
+  }))));
+}, "SegmentedControl");
 
 // src/components/Select.tsx
 import { Icon as Icon7 } from "@ttoss/react-icons";
-import * as React12 from "react";
+import * as React14 from "react";
 import ReactSelect, { components } from "react-select";
-import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
-var Control = props => {
+var Control = /* @__PURE__ */__name(props => {
   const isDisabled = props.selectProps.isDisabled;
   const hasError = props.selectProps["aria-invalid"] === "true";
   const borderColor = (() => {
@@ -910,7 +878,7 @@ var Control = props => {
     }
     return "display.background.secondary.default";
   })();
-  return /* @__PURE__ */jsx17(Box, {
+  return /* @__PURE__ */React14.createElement(Box, {
     sx: {
       ".react-select__control": {
         borderColor,
@@ -918,13 +886,10 @@ var Control = props => {
         paddingX: "4",
         paddingY: "3"
       }
-    },
-    children: /* @__PURE__ */jsx17(components.Control, {
-      ...props
-    })
-  });
-};
-var DropdownIndicator = props => {
+    }
+  }, /* @__PURE__ */React14.createElement(components.Control, props));
+}, "Control");
+var DropdownIndicator = /* @__PURE__ */__name(props => {
   const isDisabled = props.selectProps.isDisabled;
   const color = (() => {
     if (isDisabled) {
@@ -932,42 +897,39 @@ var DropdownIndicator = props => {
     }
     return "text";
   })();
-  return /* @__PURE__ */jsx17(Text, {
+  return /* @__PURE__ */React14.createElement(Text, {
     sx: {
       fontSize: "md",
       color,
       alignSelf: "center",
       display: "flex",
       alignItems: "center"
-    },
-    children: /* @__PURE__ */jsx17(Icon7, {
-      icon: "picker-down"
-    })
-  });
-};
-var IndicatorsContainer = ({
+    }
+  }, /* @__PURE__ */React14.createElement(Icon7, {
+    icon: "picker-down"
+  }));
+}, "DropdownIndicator");
+var IndicatorsContainer = /* @__PURE__ */__name(({
   children
 }) => {
-  return /* @__PURE__ */jsx17(Box, {
+  return /* @__PURE__ */React14.createElement(Box, {
     sx: {
       marginLeft: "4",
       border: "none"
-    },
-    children
-  });
-};
-var Placeholder = ({
+    }
+  }, children);
+}, "IndicatorsContainer");
+var Placeholder = /* @__PURE__ */__name(({
   children
 }) => {
-  return /* @__PURE__ */jsx17(Text, {
+  return /* @__PURE__ */React14.createElement(Text, {
     sx: {
       color: "onMuted",
       alignSelf: "center"
-    },
-    children
-  });
-};
-var SelectContainer = ({
+    }
+  }, children);
+}, "Placeholder");
+var SelectContainer = /* @__PURE__ */__name(({
   children,
   ...props
 }) => {
@@ -978,17 +940,13 @@ var SelectContainer = ({
   return (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     /* @__PURE__ */
-    jsx17(Box, {
+    React14.createElement(Box, {
       sx,
-      css: css2,
-      children: /* @__PURE__ */jsx17(components.SelectContainer, {
-        ...props,
-        children
-      })
-    })
+      css: css2
+    }, /* @__PURE__ */React14.createElement(components.SelectContainer, props, children))
   );
-};
-var ValueContainer = ({
+}, "SelectContainer");
+var ValueContainer = /* @__PURE__ */__name(({
   children,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   ...props
@@ -1011,43 +969,39 @@ var ValueContainer = ({
     }
     return leadingIcon || "search";
   })();
-  return /* @__PURE__ */jsxs7(Flex, {
+  return /* @__PURE__ */React14.createElement(Flex, {
     sx: {
       gap: "4",
       flex: 1
-    },
-    children: [finalLeadingIcon && /* @__PURE__ */jsx17(Text, {
-      sx: {
-        alignSelf: "center",
-        pointerEvents: "none",
-        lineHeight: 0,
-        fontSize: "md"
-      },
-      children: /* @__PURE__ */jsx17(Icon7, {
-        icon: finalLeadingIcon
-      })
-    }), /* @__PURE__ */jsx17(Flex, {
-      sx: {
-        flex: 1,
-        alignItems: "center"
-      },
-      children
-    }), (trailingIcon || hasError) && /* @__PURE__ */jsx17(Text, {
-      className: hasError ? "error-icon" : "",
-      sx: {
-        alignSelf: "center",
-        pointerEvents: "none",
-        lineHeight: 0,
-        fontSize: "md",
-        color: trailingIconColor
-      },
-      children: /* @__PURE__ */jsx17(Icon7, {
-        icon: hasError ? "warning-alt" : trailingIcon
-      })
-    })]
-  });
-};
-var Select = React12.forwardRef(({
+    }
+  }, finalLeadingIcon && /* @__PURE__ */React14.createElement(Text, {
+    sx: {
+      alignSelf: "center",
+      pointerEvents: "none",
+      lineHeight: 0,
+      fontSize: "md"
+    }
+  }, /* @__PURE__ */React14.createElement(Icon7, {
+    icon: finalLeadingIcon
+  })), /* @__PURE__ */React14.createElement(Flex, {
+    sx: {
+      flex: 1,
+      alignItems: "center"
+    }
+  }, children), (trailingIcon || hasError) && /* @__PURE__ */React14.createElement(Text, {
+    className: hasError ? "error-icon" : "",
+    sx: {
+      alignSelf: "center",
+      pointerEvents: "none",
+      lineHeight: 0,
+      fontSize: "md",
+      color: trailingIconColor
+    }
+  }, /* @__PURE__ */React14.createElement(Icon7, {
+    icon: hasError ? "warning-alt" : trailingIcon
+  })));
+}, "ValueContainer");
+var Select = /* @__PURE__ */React14.forwardRef(({
   ...props
 }, ref) => {
   const value = props.options?.find(option => {
@@ -1056,8 +1010,11 @@ var Select = React12.forwardRef(({
     }
     return false;
   });
-  return /* @__PURE__ */jsx17(ReactSelect, {
+  return /* @__PURE__ */React14.createElement(ReactSelect, {
     ref,
+    /**
+     * https://react-select.com/components
+     */
     components: {
       Control,
       DropdownIndicator,
@@ -1069,17 +1026,20 @@ var Select = React12.forwardRef(({
     isDisabled: props.disabled,
     ...props,
     value,
-    onChange: value2 => {
+    onChange: /* @__PURE__ */__name(value2 => {
       props.onChange?.(value2?.value);
-    },
+    }, "onChange"),
     styles: {
-      input: baseStyles => {
+      input: /* @__PURE__ */__name(baseStyles => {
         return {
           ...baseStyles,
           position: "absolute"
         };
-      }
+      }, "input")
     },
+    /**
+     * https://react-select.com/styles#the-classnameprefix-prop
+     */
     classNamePrefix: "react-select"
   });
 });
@@ -1092,9 +1052,8 @@ import { Slider } from "theme-ui";
 import { Spinner } from "theme-ui";
 
 // src/components/Stack.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
-var Stack = props => {
-  return /* @__PURE__ */jsx18(Flex, {
+var Stack = /* @__PURE__ */__name(props => {
+  return /* @__PURE__ */React.createElement(Flex, {
     ...props,
     sx: {
       flexDirection: "column",
@@ -1102,13 +1061,12 @@ var Stack = props => {
       ...props.sx
     }
   });
-};
+}, "Stack");
 
 // src/components/Switch.tsx
 import { Switch as SwitchUi } from "theme-ui";
-import { jsx as jsx19 } from "react/jsx-runtime";
-var Switch = props => {
-  return /* @__PURE__ */jsx19(SwitchUi, {
+var Switch = /* @__PURE__ */__name(props => {
+  return /* @__PURE__ */React.createElement(SwitchUi, {
     ...props,
     role: "switch",
     "aria-checked": props.checked || false,
@@ -1131,43 +1089,42 @@ var Switch = props => {
       ...props.sx
     }
   });
-};
+}, "Switch");
 
 // src/components/Tag.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
-var Tag = ({
+import * as React15 from "react";
+var Tag = /* @__PURE__ */__name(({
   children
 }) => {
   if (Array.isArray(children)) {
-    return /* @__PURE__ */jsx20(Box, {
+    return /* @__PURE__ */React15.createElement(Box, {
       as: "span",
       sx: {
         ml: 2,
         display: "inline-flex",
         alignItems: "center",
         gap: 1
-      },
-      children: children.map((child, i) => {
-        return /* @__PURE__ */jsx20(Box, {
-          as: "span",
-          sx: {
-            px: 2,
-            py: 0,
-            fontSize: "xs",
-            borderRadius: "full",
-            backgroundColor: "display.background.secondary.default",
-            color: "text.secondary",
-            border: "1px solid",
-            borderColor: "border.default",
-            fontWeight: "medium",
-            lineHeight: 1.5
-          },
-          children: child
-        }, i);
-      })
-    });
+      }
+    }, children.map((child, i) => {
+      return /* @__PURE__ */React15.createElement(Box, {
+        key: i,
+        as: "span",
+        sx: {
+          px: 2,
+          py: 0,
+          fontSize: "xs",
+          borderRadius: "full",
+          backgroundColor: "display.background.secondary.default",
+          color: "text.secondary",
+          border: "1px solid",
+          borderColor: "border.default",
+          fontWeight: "medium",
+          lineHeight: 1.5
+        }
+      }, child);
+    }));
   }
-  return /* @__PURE__ */jsx20(Box, {
+  return /* @__PURE__ */React15.createElement(Box, {
     as: "span",
     sx: {
       ml: 2,
@@ -1183,67 +1140,62 @@ var Tag = ({
       lineHeight: 1.5,
       display: "inline-flex",
       alignItems: "center"
-    },
-    children
-  });
-};
+    }
+  }, children);
+}, "Tag");
 
 // src/components/Textarea.tsx
 import { Icon as Icon8 } from "@ttoss/react-icons";
-import * as React13 from "react";
+import * as React16 from "react";
 import { Textarea as TextareaUI } from "theme-ui";
-import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
-var Textarea = React13.forwardRef(({
+var Textarea = /* @__PURE__ */React16.forwardRef(({
   trailingIcon,
   className,
   sx,
   ...textareaProps
 }, ref) => {
-  return /* @__PURE__ */jsxs8(Flex, {
+  return /* @__PURE__ */React16.createElement(Flex, {
     className,
     sx: {
       ...sx,
       position: "relative",
       padding: 0,
       border: "none"
+    }
+  }, /* @__PURE__ */React16.createElement(TextareaUI, {
+    ref,
+    sx: {
+      fontFamily: "body",
+      paddingY: "4",
+      paddingX: "5",
+      ...sx,
+      paddingRight: trailingIcon ? "7" : void 0,
+      margin: 0
     },
-    children: [/* @__PURE__ */jsx21(TextareaUI, {
-      ref,
-      sx: {
-        fontFamily: "body",
-        paddingY: "4",
-        paddingX: "5",
-        ...sx,
-        paddingRight: trailingIcon ? "7" : void 0,
-        margin: 0
-      },
-      className,
-      ...textareaProps
-    }), trailingIcon && /* @__PURE__ */jsx21(Text, {
-      sx: {
-        position: "absolute",
-        right: "1.25rem",
-        top: "0.75rem"
-      },
-      children: /* @__PURE__ */jsx21(Icon8, {
-        inline: true,
-        icon: trailingIcon
-      })
-    })]
-  });
+    className,
+    ...textareaProps
+  }), trailingIcon && /* @__PURE__ */React16.createElement(Text, {
+    sx: {
+      position: "absolute",
+      right: "1.25rem",
+      top: "0.75rem"
+    }
+  }, /* @__PURE__ */React16.createElement(Icon8, {
+    inline: true,
+    icon: trailingIcon
+  })));
 });
 Textarea.displayName = "Textarea";
 
 // src/components/Tooltip.tsx
 import { Tooltip as TooltipReact } from "react-tooltip";
-import { jsx as jsx22 } from "react/jsx-runtime";
-var Tooltip = ({
+var Tooltip = /* @__PURE__ */__name(({
   variant = "info",
   sx,
   ...props
 }) => {
   const className = `tooltip-component tooltip-${variant}`;
-  const getVariantStyles = variantType => {
+  const getVariantStyles = /* @__PURE__ */__name(variantType => {
     const variants = {
       info: {
         backgroundColor: "input.background.secondary.default",
@@ -1267,9 +1219,9 @@ var Tooltip = ({
       }
     };
     return variants[variantType] || variants.info;
-  };
-  return /* @__PURE__ */jsx22(Box, {
-    sx: ({
+  }, "getVariantStyles");
+  return /* @__PURE__ */React.createElement(Box, {
+    sx: /* @__PURE__ */__name(({
       fonts
     }) => {
       const variantStyles = getVariantStyles(variant);
@@ -1298,39 +1250,34 @@ var Tooltip = ({
         },
         [`&.tooltip-${variant}`]: variantStyles
       };
-    },
-    children: /* @__PURE__ */jsx22(TooltipReact, {
-      className,
-      ...props,
-      classNameArrow: "example-arrow",
-      children: props.children
-    })
-  });
-};
+    }, "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 React17 from "react";
 import { ThemeUIProvider } from "theme-ui";
-import { Fragment as Fragment2, jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
-var ThemeProvider = ({
+var ThemeProvider = /* @__PURE__ */__name(({
   children,
   theme = BruttalTheme,
   fonts = BruttalFonts
 }) => {
-  return /* @__PURE__ */jsx23(Fragment2, {
-    children: /* @__PURE__ */jsxs9(ThemeUIProvider, {
-      theme,
-      children: [/* @__PURE__ */jsx23(Global, {
-        styles: css`
+  return /* @__PURE__ */React17.createElement(React17.Fragment, null, /* @__PURE__ */React17.createElement(ThemeUIProvider, {
+    theme
+  }, /* @__PURE__ */React17.createElement(Global, {
+    styles: css`
             ${fonts.map(url => {
-          return `@import url('${url}');`;
-        }).join("\n")}
+      return `@import url('${url}');`;
+    }).join("\n")}
           `
-      }), children]
-    })
-  });
-};
+  }), children));
+}, "ThemeProvider");
 
 // src/theme/useTheme.ts
 import { useThemeUI } from "theme-ui";