@ttoss/ui 5.0.14 → 5.0.15

package/dist/esm/index.js

@@ -1,47 +1,85 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 
-// src/index.ts
-import { BaseStyles, Global as Global2 } from "theme-ui";
-import { useResponsiveValue, useBreakpointIndex } from "@theme-ui/match-media";
-import { keyframes } from "@emotion/react";
+// src/components/Button.tsx
+import * as React from "react";
+import { Button as ButtonUi } from "theme-ui";
+import { Icon } from "@ttoss/react-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Button = React.forwardRef((props, ref) => {
+  const {
+    children,
+    leftIcon,
+    rightIcon,
+    loading,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */jsxs(ButtonUi, {
+    type: "button",
+    ...restProps,
+    ref,
+    sx: {
+      cursor: "pointer",
+      paddingX: "xl",
+      paddingY: "lg",
+      fontFamily: "body",
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "lg",
+      ...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
+    })]
+  });
+});
+Button.displayName = "Button";
 
-// src/theme/ThemeProvider.tsx
-import { BruttalFonts, BruttalTheme } from "@ttoss/theme/Bruttal";
-import { Global, css } from "@emotion/react";
-import { ThemeUIProvider } from "theme-ui";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var ThemeProvider = ({
-  children,
-  theme = BruttalTheme,
-  fonts = BruttalFonts
+// src/components/ActionButton.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ActionButton = ({
+  icon,
+  variant = "default",
+  sx,
+  ...props
 }) => {
-  return /* @__PURE__ */jsx(Fragment, {
-    children: /* @__PURE__ */jsxs(ThemeUIProvider, {
-      theme,
-      children: [/* @__PURE__ */jsx(Global, {
-        styles: css`
-            ${fonts.map(url => {
-          return `@import url('${url}');`;
-        }).join("\n")}
-          `
-      }), children]
-    })
+  return /* @__PURE__ */jsx2(Button, {
+    variant: `buttons.actionButton.${variant}`,
+    leftIcon: icon,
+    sx: {
+      padding: "sm",
+      gap: "xs",
+      fontFamily: "caption",
+      borderRadius: "action",
+      outlineColor: "transparent",
+      ":disabled": props.disabled ? {
+        backgroundColor: "muted",
+        color: "onMuted",
+        cursor: "not-allowed",
+        border: "muted",
+        borderColor: "onMuted"
+      } : void 0,
+      ...sx
+    },
+    ...props
   });
 };
 
-// src/theme/useTheme.ts
-import { useThemeUI } from "theme-ui";
-var useTheme = useThemeUI;
-
 // src/components/Badge.tsx
 import { Badge as BadgeUi } from "theme-ui";
-import { Icon } from "@ttoss/react-icons";
+import { Icon as Icon2 } from "@ttoss/react-icons";
 
 // src/components/Text.tsx
 import { Text } from "theme-ui";
 
 // src/components/Badge.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var Badge = ({
   icon,
   children,
@@ -65,17 +103,17 @@ var Badge = ({
       ...sx
     },
     ...props,
-    children: [icon && /* @__PURE__ */jsx2(Icon, {
+    children: [icon && /* @__PURE__ */jsx3(Icon2, {
       inline: true,
       icon
-    }), children, chip && /* @__PURE__ */jsx2(Text, {
+    }), children, chip && /* @__PURE__ */jsx3(Text, {
       sx: {
         cursor: "pointer",
         lineHeight: 0,
         color: "currentcolor",
         alignSelf: "center"
       },
-      children: /* @__PURE__ */jsx2(Icon, {
+      children: /* @__PURE__ */jsx3(Icon2, {
         onClick: onDelete,
         inline: true,
         icon: "close"
@@ -87,49 +125,93 @@ var Badge = ({
 // src/components/Box.tsx
 import { Box } from "theme-ui";
 
-// src/components/Button.tsx
-import * as React from "react";
-import { Button as ButtonUi } from "theme-ui";
-import { Icon as Icon2 } from "@ttoss/react-icons";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var Button = React.forwardRef((props, ref) => {
-  const {
-    children,
-    leftIcon,
-    rightIcon,
-    loading,
-    ...restProps
-  } = props;
-  return /* @__PURE__ */jsxs3(ButtonUi, {
+// src/components/Card.tsx
+import { Card } from "theme-ui";
+
+// src/components/Checkbox.tsx
+import * as React2 from "react";
+import { Checkbox as CheckBoxUi } from "theme-ui";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Checkbox = React2.forwardRef(({
+  indeterminate = false,
+  ...rest
+}, ref) => {
+  const innerRef = React2.useRef(null);
+  React2.useImperativeHandle(ref, () => {
+    return innerRef.current;
+  });
+  React2.useEffect(() => {
+    if (innerRef.current) {
+      innerRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+  if (indeterminate) {
+    return /* @__PURE__ */jsx4("input", {
+      type: "checkbox",
+      ref: innerRef,
+      ...rest
+    });
+  }
+  return /* @__PURE__ */jsx4(CheckBoxUi, {
+    ref: innerRef,
+    ...rest
+  });
+});
+Checkbox.displayName = "Checkbox";
+
+// src/components/CloseButton.tsx
+import * as React3 from "react";
+import { Icon as Icon3 } from "@ttoss/react-icons";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var CloseButton = React3.forwardRef(({
+  label,
+  sx,
+  onlyText,
+  ...props
+}, ref) => {
+  if (onlyText && !label) {
+    return null;
+  }
+  return /* @__PURE__ */jsxs3(Button, {
+    variant: "buttons.closeButton",
     type: "button",
-    ...restProps,
-    ref,
+    "aria-label": label,
     sx: {
-      cursor: "pointer",
-      paddingX: "xl",
-      paddingY: "lg",
-      fontFamily: "body",
+      fontFamily: "caption",
+      fontSize: "xs",
       display: "inline-flex",
       alignItems: "center",
-      gap: "lg",
-      ...restProps.sx
+      cursor: "pointer",
+      lineHeight: "normal",
+      gap: "sm",
+      padding: "sm",
+      width: "fit-content",
+      transition: "all 0.2s",
+      "& > iconify-icon": {
+        fontSize: "base"
+      },
+      ...sx
     },
-    children: [loading && /* @__PURE__ */jsx3(Icon2, {
-      inline: true,
-      icon: "three-dots-loading"
-    }), !loading && leftIcon && /* @__PURE__ */jsx3(Icon2, {
-      inline: true,
-      icon: leftIcon
-    }), children, rightIcon && /* @__PURE__ */jsx3(Icon2, {
-      inline: true,
-      icon: rightIcon
+    ...props,
+    ref,
+    children: [label, !onlyText && /* @__PURE__ */jsx5(Icon3, {
+      icon: "close"
     })]
   });
 });
-Button.displayName = "Button";
+CloseButton.displayName = "CloseButton";
 
-// src/components/Card.tsx
-import { Card } from "theme-ui";
+// src/components/Container.tsx
+import * as React4 from "react";
+import { Container as ContainerUi } from "theme-ui";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Container = React4.forwardRef((props, ref) => {
+  return /* @__PURE__ */jsx6(ContainerUi, {
+    ref,
+    ...props
+  });
+});
+Container.displayName = "Container";
 
 // src/components/Divider.tsx
 import { Divider } from "theme-ui";
@@ -143,15 +225,89 @@ import { Grid } from "theme-ui";
 // src/components/Heading.tsx
 import { Heading } from "theme-ui";
 
+// src/components/HelpText.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var HelpText = ({
+  sx,
+  disabled,
+  negative,
+  ...props
+}) => {
+  const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
+  return /* @__PURE__ */jsx7(Text, {
+    variant,
+    sx: {
+      fontSize: "sm",
+      fontFamily: "caption",
+      lineHeight: "base",
+      ...sx
+    },
+    "aria-disabled": disabled ? "true" : void 0,
+    ...props
+  });
+};
+
+// src/components/IconButton.tsx
+import * as React5 from "react";
+import { IconButton as IconButtonUi } from "theme-ui";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var IconButton = React5.forwardRef((props, ref) => {
+  return /* @__PURE__ */jsx8(IconButtonUi, {
+    type: "button",
+    ...props,
+    ref
+  });
+});
+IconButton.displayName = "IconButton";
+
 // src/components/Image.tsx
 import { Image } from "theme-ui";
 
+// src/components/InfiniteLinearProgress.tsx
+import * as React6 from "react";
+
+// src/components/LinearProgress.tsx
+import { Progress } from "theme-ui";
+
+// src/components/InfiniteLinearProgress.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var MAX_PROGRESS = 100;
+var InfiniteLinearProgress = () => {
+  const [progress, setProgress] = React6.useState(0);
+  React6.useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress(oldProgress => {
+        if (oldProgress === MAX_PROGRESS) {
+          return 0;
+        }
+        let diff = 0;
+        if (oldProgress > 0.97 * MAX_PROGRESS) {
+          diff -= 0.75 * MAX_PROGRESS;
+        } else if (oldProgress > 0.6 * MAX_PROGRESS) {
+          diff = Math.random() * (MAX_PROGRESS - oldProgress) * 0.1;
+        } else {
+          diff = Math.random() * (MAX_PROGRESS * 0.02);
+        }
+        return Math.min(oldProgress + diff, MAX_PROGRESS);
+      });
+    }, 100);
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+  return /* @__PURE__ */jsx9(Progress, {
+    max: MAX_PROGRESS,
+    value: progress,
+    role: "progressbar"
+  });
+};
+
 // src/components/Input.tsx
-import * as React2 from "react";
-import { Icon as Icon3 } from "@ttoss/react-icons";
+import * as React7 from "react";
+import { Icon as Icon4 } from "@ttoss/react-icons";
 import { Input as InputUI } from "theme-ui";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var Input = React2.forwardRef(({
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+var Input = React7.forwardRef(({
   leadingIcon,
   trailingIcon: trailingIconProp,
   onLeadingIconClick,
@@ -169,7 +325,7 @@ var Input = React2.forwardRef(({
       padding: 0,
       border: "none"
     },
-    children: [leadingIcon && /* @__PURE__ */jsx4(Text, {
+    children: [leadingIcon && /* @__PURE__ */jsx10(Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -178,11 +334,11 @@ var Input = React2.forwardRef(({
       },
       onClick: onLeadingIconClick,
       variant: "leading-icon",
-      children: /* @__PURE__ */jsx4(Icon3, {
+      children: /* @__PURE__ */jsx10(Icon4, {
         inline: true,
         icon: leadingIcon
       })
-    }), /* @__PURE__ */jsx4(InputUI, {
+    }), /* @__PURE__ */jsx10(InputUI, {
       ref,
       sx: {
         fontFamily: "body",
@@ -195,7 +351,7 @@ var Input = React2.forwardRef(({
       },
       className,
       ...inputProps
-    }), trailingIcon && /* @__PURE__ */jsx4(Text, {
+    }), trailingIcon && /* @__PURE__ */jsx10(Text, {
       sx: {
         position: "absolute",
         right: "1rem",
@@ -204,7 +360,7 @@ var Input = React2.forwardRef(({
       },
       variant: "trailing-icon",
       onClick: onTrailingIconClick,
-      children: /* @__PURE__ */jsx4(Icon3, {
+      children: /* @__PURE__ */jsx10(Icon4, {
         inline: true,
         icon: trailingIcon
       })
@@ -213,10 +369,185 @@ var Input = React2.forwardRef(({
 });
 Input.displayName = "Input";
 
-// src/components/Label.tsx
-import { Icon as Icon4 } from "@ttoss/react-icons";
-import { Label as LabelUi } from "theme-ui";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+// src/components/InputNumber.tsx
+import * as React8 from "react";
+import { Icon as Icon5 } from "@ttoss/react-icons";
+import { Input as Input2 } from "theme-ui";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+var InputNumber = React8.forwardRef(({
+  sx,
+  value,
+  infoIcon,
+  onChange,
+  onClickInfoIcon,
+  ...inputProps
+}, ref) => {
+  const sxProps = React8.useMemo(() => {
+    const size = String(typeof value === "undefined" ? 0 : value).length;
+    if (inputProps["aria-invalid"] === "true") {
+      return {
+        width: `calc(139px + ${size > 1 ? size * 10 : 0}px)`,
+        textAlign: "left",
+        "&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button": {
+          WebkitAppearance: "none",
+          margin: 0
+        },
+        ...sx,
+        paddingLeft: "3xl",
+        paddingRight: "2xl",
+        margin: 0
+      };
+    }
+    return {
+      width: `calc(108px + ${size > 1 ? size * 10 : 0}px)`,
+      textAlign: "center",
+      "&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button": {
+        WebkitAppearance: "none",
+        margin: 0
+      },
+      fontFamily: "body",
+      paddingY: "lg",
+      paddingX: "xl",
+      ...sx,
+      paddingLeft: "2xl",
+      paddingRight: "2xl",
+      margin: 0
+    };
+  }, [inputProps, value, sx]);
+  const handleChangeUp = () => {
+    if (inputProps.disabled) {
+      return;
+    }
+    if (typeof value !== "number") {
+      onChange(-1);
+      return;
+    }
+    onChange(value - 1);
+  };
+  const handleChangeDown = () => {
+    if (inputProps.disabled) {
+      return;
+    }
+    if (typeof value !== "number") {
+      onChange(1);
+      return;
+    }
+    onChange(value + 1);
+  };
+  return /* @__PURE__ */jsxs5(Flex, {
+    sx: {
+      width: "fit-content",
+      ...sx,
+      position: "relative",
+      padding: 0,
+      border: "none"
+    },
+    ref,
+    "aria-invalid": inputProps["aria-invalid"],
+    children: [/* @__PURE__ */jsx11(Input2, {
+      ref,
+      variant: "forms.inputNumber",
+      sx: sxProps,
+      type: "number",
+      onChange: e => {
+        onChange(Number(e.target.value));
+      },
+      value,
+      ...inputProps
+    }), /* @__PURE__ */jsx11(Text, {
+      sx: {
+        position: "absolute",
+        alignSelf: "center",
+        left: "1rem",
+        zIndex: 1,
+        cursor: "pointer"
+      },
+      onClick: handleChangeUp,
+      children: /* @__PURE__ */jsx11(Icon5, {
+        icon: "picker-down"
+      })
+    }), infoIcon && /* @__PURE__ */jsx11(Text, {
+      sx: {
+        position: "absolute",
+        alignSelf: "center",
+        right: "2.5rem",
+        zIndex: 1,
+        cursor: onClickInfoIcon ? "pointer" : "default"
+      },
+      onClick: onClickInfoIcon,
+      children: /* @__PURE__ */jsx11(Icon5, {
+        icon: "info"
+      })
+    }), /* @__PURE__ */jsx11(Text, {
+      sx: {
+        position: "absolute",
+        alignSelf: "center",
+        right: "1rem",
+        zIndex: 1,
+        cursor: "pointer"
+      },
+      onClick: handleChangeDown,
+      children: /* @__PURE__ */jsx11(Icon5, {
+        icon: "picker-up"
+      })
+    })]
+  });
+});
+InputNumber.displayName = "InputNumber";
+
+// src/components/InputPassword/InputPassword.tsx
+import * as React10 from "react";
+
+// src/components/InputPassword/useHidePassInput.ts
+import * as React9 from "react";
+var useHidePassInput = (defaultValue = true) => {
+  const [hidePass, setHidePass] = React9.useState(Boolean(defaultValue));
+  const {
+    icon,
+    inputType
+  } = React9.useMemo(() => {
+    return {
+      icon: hidePass ? "view-off" : "view-on",
+      inputType: hidePass ? "password" : "text"
+    };
+  }, [hidePass]);
+  const handleClick = () => {
+    setHidePass(prev => {
+      return !prev;
+    });
+  };
+  return {
+    handleClick,
+    icon,
+    inputType
+  };
+};
+
+// src/components/InputPassword/InputPassword.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var InputPassword = React10.forwardRef(({
+  showPasswordByDefault,
+  ...inputPasswordProps
+}, ref) => {
+  const {
+    handleClick,
+    icon,
+    inputType
+  } = useHidePassInput(!showPasswordByDefault);
+  return /* @__PURE__ */jsx12(Input, {
+    ref,
+    ...inputPasswordProps,
+    trailingIcon: icon,
+    onTrailingIconClick: handleClick,
+    type: inputType
+  });
+});
+InputPassword.displayName = "InputPassword";
+
+// src/components/Label.tsx
+import { Icon as Icon6 } from "@ttoss/react-icons";
+import { Label as LabelUi } from "theme-ui";
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 var TOOLTIP_LABEL = "tooltip";
 var Label = ({
   children,
@@ -225,7 +556,7 @@ var Label = ({
   sx,
   ...props
 }) => {
-  return /* @__PURE__ */jsxs5(LabelUi, {
+  return /* @__PURE__ */jsxs6(LabelUi, {
     sx: {
       fontFamily: "caption",
       alignItems: "center",
@@ -234,14 +565,14 @@ var Label = ({
       ...sx
     },
     ...props,
-    children: [children, tooltip && /* @__PURE__ */jsx5(Text, {
+    children: [children, tooltip && /* @__PURE__ */jsx13(Text, {
       sx: {
         color: "currentcolor",
         cursor: onTooltipClick ? "pointer" : void 0
       },
       onClick: onTooltipClick,
       "aria-label": TOOLTIP_LABEL,
-      children: /* @__PURE__ */jsx5(Icon4, {
+      children: /* @__PURE__ */jsx13(Icon6, {
         inline: true,
         icon: "info"
       })
@@ -250,15 +581,15 @@ var Label = ({
 };
 
 // src/components/Link.tsx
-import * as React3 from "react";
+import * as React11 from "react";
 import { Link as LinkUi } from "theme-ui";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var Link = React3.forwardRef(({
+import { jsx as jsx14 } from "react/jsx-runtime";
+var Link = React11.forwardRef(({
   quiet,
   className,
   ...props
 }, ref) => {
-  return /* @__PURE__ */jsx6(LinkUi, {
+  return /* @__PURE__ */jsx14(LinkUi, {
     className: `${quiet ? "quiet" : ""} ${className ?? ""}`,
     ...props,
     ref
@@ -266,14 +597,17 @@ var Link = React3.forwardRef(({
 });
 Link.displayName = "Link";
 
-// src/components/LinearProgress.tsx
-import { Progress } from "theme-ui";
+// src/components/Paragraph.tsx
+import { Paragraph } from "theme-ui";
+
+// src/components/Radio.tsx
+import { Radio } from "theme-ui";
 
 // src/components/Select.tsx
-import * as React4 from "react";
-import { Icon as Icon5 } from "@ttoss/react-icons";
+import * as React12 from "react";
+import { Icon as Icon7 } from "@ttoss/react-icons";
 import ReactSelect, { components } from "react-select";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 var Control = props => {
   const isDisabled = props.selectProps.isDisabled;
   const hasError = props.selectProps["aria-invalid"] === "true";
@@ -292,7 +626,7 @@ var Control = props => {
     }
     return "surface";
   })();
-  return /* @__PURE__ */jsx7(Box, {
+  return /* @__PURE__ */jsx15(Box, {
     sx: {
       ".react-select__control": {
         border,
@@ -302,7 +636,7 @@ var Control = props => {
         borderRadius: "action"
       }
     },
-    children: /* @__PURE__ */jsx7(components.Control, {
+    children: /* @__PURE__ */jsx15(components.Control, {
       ...props
     })
   });
@@ -315,7 +649,7 @@ var DropdownIndicator = props => {
     }
     return "text";
   })();
-  return /* @__PURE__ */jsx7(Text, {
+  return /* @__PURE__ */jsx15(Text, {
     sx: {
       fontSize: "base",
       color,
@@ -323,7 +657,7 @@ var DropdownIndicator = props => {
       display: "flex",
       alignItems: "center"
     },
-    children: /* @__PURE__ */jsx7(Icon5, {
+    children: /* @__PURE__ */jsx15(Icon7, {
       icon: "picker-down"
     })
   });
@@ -331,7 +665,7 @@ var DropdownIndicator = props => {
 var IndicatorsContainer = ({
   children
 }) => {
-  return /* @__PURE__ */jsx7(Box, {
+  return /* @__PURE__ */jsx15(Box, {
     sx: {
       marginLeft: "lg",
       border: "none"
@@ -342,7 +676,7 @@ var IndicatorsContainer = ({
 var Placeholder = ({
   children
 }) => {
-  return /* @__PURE__ */jsx7(Text, {
+  return /* @__PURE__ */jsx15(Text, {
     sx: {
       color: "onMuted",
       alignSelf: "center"
@@ -361,10 +695,10 @@ var SelectContainer = ({
   return (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     /* @__PURE__ */
-    jsx7(Box, {
+    jsx15(Box, {
       sx,
       css: css2,
-      children: /* @__PURE__ */jsx7(components.SelectContainer, {
+      children: /* @__PURE__ */jsx15(components.SelectContainer, {
         ...props,
         children
       })
@@ -394,28 +728,28 @@ var ValueContainer = ({
     }
     return leadingIcon || "search";
   })();
-  return /* @__PURE__ */jsxs6(Flex, {
+  return /* @__PURE__ */jsxs7(Flex, {
     sx: {
       gap: "lg",
       flex: 1
     },
-    children: [finalLeadingIcon && /* @__PURE__ */jsx7(Text, {
+    children: [finalLeadingIcon && /* @__PURE__ */jsx15(Text, {
       sx: {
         alignSelf: "center",
         pointerEvents: "none",
         lineHeight: 0,
         fontSize: "base"
       },
-      children: /* @__PURE__ */jsx7(Icon5, {
+      children: /* @__PURE__ */jsx15(Icon7, {
         icon: finalLeadingIcon
       })
-    }), /* @__PURE__ */jsx7(Flex, {
+    }), /* @__PURE__ */jsx15(Flex, {
       sx: {
         flex: 1,
         alignItems: "center"
       },
       children
-    }), (trailingIcon || hasError) && /* @__PURE__ */jsx7(Text, {
+    }), (trailingIcon || hasError) && /* @__PURE__ */jsx15(Text, {
       className: hasError ? "error-icon" : "",
       sx: {
         alignSelf: "center",
@@ -424,13 +758,13 @@ var ValueContainer = ({
         fontSize: "base",
         color: trailingIconColor
       },
-      children: /* @__PURE__ */jsx7(Icon5, {
+      children: /* @__PURE__ */jsx15(Icon7, {
         icon: hasError ? "warning-alt" : trailingIcon
       })
     })]
   });
 };
-var Select = React4.forwardRef(({
+var Select = React12.forwardRef(({
   ...props
 }, ref) => {
   const value = props.options?.find(option => {
@@ -439,7 +773,7 @@ var Select = React4.forwardRef(({
     }
     return false;
   });
-  return /* @__PURE__ */jsx7(ReactSelect, {
+  return /* @__PURE__ */jsx15(ReactSelect, {
     ref,
     components: {
       Control,
@@ -468,435 +802,103 @@ var Select = React4.forwardRef(({
 });
 Select.displayName = "Select";
 
+// src/components/Slider.tsx
+import { Slider } from "theme-ui";
+
 // src/components/Spinner.tsx
 import { Spinner } from "theme-ui";
 
-// src/components/Radio.tsx
-import { Radio } from "theme-ui";
-
-// src/components/IconButton.tsx
-import * as React5 from "react";
-import { IconButton as IconButtonUi } from "theme-ui";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var IconButton = React5.forwardRef((props, ref) => {
-  return /* @__PURE__ */jsx8(IconButtonUi, {
-    type: "button",
+// src/components/Stack.tsx
+import * as React13 from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var Stack = React13.forwardRef((props, ref) => {
+  return /* @__PURE__ */jsx16(Flex, {
+    ref,
     ...props,
-    ref
+    sx: {
+      flexDirection: "column",
+      ...props.sx
+    }
   });
 });
-IconButton.displayName = "IconButton";
-
-// src/components/Slider.tsx
-import { Slider } from "theme-ui";
+Stack.displayName = "Stack";
 
-// src/components/Checkbox.tsx
-import * as React6 from "react";
-import { Checkbox as CheckBoxUi } from "theme-ui";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var Checkbox = React6.forwardRef(({
-  indeterminate = false,
-  ...rest
+// src/components/Textarea.tsx
+import * as React14 from "react";
+import { Icon as Icon8 } from "@ttoss/react-icons";
+import { Textarea as TextareaUI } from "theme-ui";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+var Textarea = React14.forwardRef(({
+  trailingIcon,
+  className,
+  sx,
+  ...textareaProps
 }, ref) => {
-  const innerRef = React6.useRef(null);
-  React6.useImperativeHandle(ref, () => {
-    return innerRef.current;
-  });
-  React6.useEffect(() => {
-    if (innerRef.current) {
-      innerRef.current.indeterminate = indeterminate;
-    }
-  }, [indeterminate]);
-  if (indeterminate) {
-    return /* @__PURE__ */jsx9("input", {
-      type: "checkbox",
-      ref: innerRef,
-      ...rest
-    });
-  }
-  return /* @__PURE__ */jsx9(CheckBoxUi, {
-    ref: innerRef,
-    ...rest
-  });
-});
-Checkbox.displayName = "Checkbox";
-
-// src/components/InfiniteLinearProgress.tsx
-import * as React7 from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var MAX_PROGRESS = 100;
-var InfiniteLinearProgress = () => {
-  const [progress, setProgress] = React7.useState(0);
-  React7.useEffect(() => {
-    const timer = setInterval(() => {
-      setProgress(oldProgress => {
-        if (oldProgress === MAX_PROGRESS) {
-          return 0;
-        }
-        let diff = 0;
-        if (oldProgress > 0.97 * MAX_PROGRESS) {
-          diff -= 0.75 * MAX_PROGRESS;
-        } else if (oldProgress > 0.6 * MAX_PROGRESS) {
-          diff = Math.random() * (MAX_PROGRESS - oldProgress) * 0.1;
-        } else {
-          diff = Math.random() * (MAX_PROGRESS * 0.02);
-        }
-        return Math.min(oldProgress + diff, MAX_PROGRESS);
-      });
-    }, 100);
-    return () => {
-      clearInterval(timer);
-    };
-  }, []);
-  return /* @__PURE__ */jsx10(Progress, {
-    max: MAX_PROGRESS,
-    value: progress,
-    role: "progressbar"
-  });
-};
-
-// src/components/Textarea.tsx
-import * as React8 from "react";
-import { Icon as Icon6 } from "@ttoss/react-icons";
-import { Textarea as TextareaUI } from "theme-ui";
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
-var Textarea = React8.forwardRef(({
-  trailingIcon,
-  className,
-  sx,
-  ...textareaProps
-}, ref) => {
-  return /* @__PURE__ */jsxs7(Flex, {
-    className,
-    sx: {
-      ...sx,
-      position: "relative",
-      padding: 0,
-      border: "none"
-    },
-    children: [/* @__PURE__ */jsx11(TextareaUI, {
-      ref,
-      sx: {
-        fontFamily: "body",
-        paddingY: "lg",
-        paddingX: "xl",
-        ...sx,
-        paddingRight: trailingIcon ? "3xl" : void 0,
-        margin: 0
-      },
-      className,
-      ...textareaProps
-    }), trailingIcon && /* @__PURE__ */jsx11(Text, {
-      sx: {
-        position: "absolute",
-        right: "1.25rem",
-        top: "0.75rem"
-      },
-      children: /* @__PURE__ */jsx11(Icon6, {
-        inline: true,
-        icon: trailingIcon
-      })
-    })]
+  return /* @__PURE__ */jsxs8(Flex, {
+    className,
+    sx: {
+      ...sx,
+      position: "relative",
+      padding: 0,
+      border: "none"
+    },
+    children: [/* @__PURE__ */jsx17(TextareaUI, {
+      ref,
+      sx: {
+        fontFamily: "body",
+        paddingY: "lg",
+        paddingX: "xl",
+        ...sx,
+        paddingRight: trailingIcon ? "3xl" : void 0,
+        margin: 0
+      },
+      className,
+      ...textareaProps
+    }), trailingIcon && /* @__PURE__ */jsx17(Text, {
+      sx: {
+        position: "absolute",
+        right: "1.25rem",
+        top: "0.75rem"
+      },
+      children: /* @__PURE__ */jsx17(Icon8, {
+        inline: true,
+        icon: trailingIcon
+      })
+    })]
   });
 });
 Textarea.displayName = "Textarea";
 
-// src/components/Container.tsx
-import * as React9 from "react";
-import { Container as ContainerUi } from "theme-ui";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var Container = React9.forwardRef((props, ref) => {
-  return /* @__PURE__ */jsx12(ContainerUi, {
-    ref,
-    ...props
-  });
-});
-Container.displayName = "Container";
-
-// src/components/HelpText.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
-var HelpText = ({
-  sx,
-  disabled,
-  negative,
-  ...props
+// src/theme/ThemeProvider.tsx
+import { BruttalFonts, BruttalTheme } from "@ttoss/theme/Bruttal";
+import { Global, css } from "@emotion/react";
+import { ThemeUIProvider } from "theme-ui";
+import { Fragment, jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+var ThemeProvider = ({
+  children,
+  theme = BruttalTheme,
+  fonts = BruttalFonts
 }) => {
-  const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
-  return /* @__PURE__ */jsx13(Text, {
-    variant,
-    sx: {
-      fontSize: "sm",
-      fontFamily: "caption",
-      lineHeight: "base",
-      ...sx
-    },
-    "aria-disabled": disabled ? "true" : void 0,
-    ...props
-  });
-};
-
-// src/components/CloseButton.tsx
-import * as React10 from "react";
-import { Icon as Icon7 } from "@ttoss/react-icons";
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
-var CloseButton = React10.forwardRef(({
-  label,
-  sx,
-  onlyText,
-  ...props
-}, ref) => {
-  if (onlyText && !label) {
-    return null;
-  }
-  return /* @__PURE__ */jsxs8(Button, {
-    variant: "buttons.closeButton",
-    type: "button",
-    "aria-label": label,
-    sx: {
-      fontFamily: "caption",
-      fontSize: "xs",
-      display: "inline-flex",
-      alignItems: "center",
-      cursor: "pointer",
-      lineHeight: "normal",
-      gap: "sm",
-      padding: "sm",
-      width: "fit-content",
-      transition: "all 0.2s",
-      "& > iconify-icon": {
-        fontSize: "base"
-      },
-      ...sx
-    },
-    ...props,
-    ref,
-    children: [label, !onlyText && /* @__PURE__ */jsx14(Icon7, {
-      icon: "close"
-    })]
-  });
-});
-CloseButton.displayName = "CloseButton";
-
-// src/components/InputNumber.tsx
-import * as React11 from "react";
-import { Icon as Icon8 } from "@ttoss/react-icons";
-import { Input as Input2 } from "theme-ui";
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
-var InputNumber = React11.forwardRef(({
-  sx,
-  value,
-  infoIcon,
-  onChange,
-  onClickInfoIcon,
-  ...inputProps
-}, ref) => {
-  const sxProps = React11.useMemo(() => {
-    const size = String(typeof value === "undefined" ? 0 : value).length;
-    if (inputProps["aria-invalid"] === "true") {
-      return {
-        width: `calc(139px + ${size > 1 ? size * 10 : 0}px)`,
-        textAlign: "left",
-        "&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button": {
-          WebkitAppearance: "none",
-          margin: 0
-        },
-        ...sx,
-        paddingLeft: "3xl",
-        paddingRight: "2xl",
-        margin: 0
-      };
-    }
-    return {
-      width: `calc(108px + ${size > 1 ? size * 10 : 0}px)`,
-      textAlign: "center",
-      "&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button": {
-        WebkitAppearance: "none",
-        margin: 0
-      },
-      fontFamily: "body",
-      paddingY: "lg",
-      paddingX: "xl",
-      ...sx,
-      paddingLeft: "2xl",
-      paddingRight: "2xl",
-      margin: 0
-    };
-  }, [inputProps, value, sx]);
-  const handleChangeUp = () => {
-    if (inputProps.disabled) {
-      return;
-    }
-    if (typeof value !== "number") {
-      onChange(-1);
-      return;
-    }
-    onChange(value - 1);
-  };
-  const handleChangeDown = () => {
-    if (inputProps.disabled) {
-      return;
-    }
-    if (typeof value !== "number") {
-      onChange(1);
-      return;
-    }
-    onChange(value + 1);
-  };
-  return /* @__PURE__ */jsxs9(Flex, {
-    sx: {
-      width: "fit-content",
-      ...sx,
-      position: "relative",
-      padding: 0,
-      border: "none"
-    },
-    ref,
-    "aria-invalid": inputProps["aria-invalid"],
-    children: [/* @__PURE__ */jsx15(Input2, {
-      ref,
-      variant: "forms.inputNumber",
-      sx: sxProps,
-      type: "number",
-      onChange: e => {
-        onChange(Number(e.target.value));
-      },
-      value,
-      ...inputProps
-    }), /* @__PURE__ */jsx15(Text, {
-      sx: {
-        position: "absolute",
-        alignSelf: "center",
-        left: "1rem",
-        zIndex: 1,
-        cursor: "pointer"
-      },
-      onClick: handleChangeUp,
-      children: /* @__PURE__ */jsx15(Icon8, {
-        icon: "picker-down"
-      })
-    }), infoIcon && /* @__PURE__ */jsx15(Text, {
-      sx: {
-        position: "absolute",
-        alignSelf: "center",
-        right: "2.5rem",
-        zIndex: 1,
-        cursor: onClickInfoIcon ? "pointer" : "default"
-      },
-      onClick: onClickInfoIcon,
-      children: /* @__PURE__ */jsx15(Icon8, {
-        icon: "info"
-      })
-    }), /* @__PURE__ */jsx15(Text, {
-      sx: {
-        position: "absolute",
-        alignSelf: "center",
-        right: "1rem",
-        zIndex: 1,
-        cursor: "pointer"
-      },
-      onClick: handleChangeDown,
-      children: /* @__PURE__ */jsx15(Icon8, {
-        icon: "picker-up"
-      })
-    })]
-  });
-});
-InputNumber.displayName = "InputNumber";
-
-// src/components/Stack.tsx
-import * as React12 from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
-var Stack = React12.forwardRef((props, ref) => {
-  return /* @__PURE__ */jsx16(Flex, {
-    ref,
-    ...props,
-    sx: {
-      flexDirection: "column",
-      ...props.sx
-    }
+  return /* @__PURE__ */jsx18(Fragment, {
+    children: /* @__PURE__ */jsxs9(ThemeUIProvider, {
+      theme,
+      children: [/* @__PURE__ */jsx18(Global, {
+        styles: css`
+            ${fonts.map(url => {
+          return `@import url('${url}');`;
+        }).join("\n")}
+          `
+      }), children]
+    })
   });
-});
-Stack.displayName = "Stack";
-
-// src/components/Paragraph.tsx
-import { Paragraph } from "theme-ui";
-
-// src/components/InputPassword/InputPassword.tsx
-import * as React14 from "react";
-
-// src/components/InputPassword/useHidePassInput.ts
-import * as React13 from "react";
-var useHidePassInput = (defaultValue = true) => {
-  const [hidePass, setHidePass] = React13.useState(Boolean(defaultValue));
-  const {
-    icon,
-    inputType
-  } = React13.useMemo(() => {
-    return {
-      icon: hidePass ? "view-off" : "view-on",
-      inputType: hidePass ? "password" : "text"
-    };
-  }, [hidePass]);
-  const handleClick = () => {
-    setHidePass(prev => {
-      return !prev;
-    });
-  };
-  return {
-    handleClick,
-    icon,
-    inputType
-  };
 };
 
-// src/components/InputPassword/InputPassword.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
-var InputPassword = React14.forwardRef(({
-  showPasswordByDefault,
-  ...inputPasswordProps
-}, ref) => {
-  const {
-    handleClick,
-    icon,
-    inputType
-  } = useHidePassInput(!showPasswordByDefault);
-  return /* @__PURE__ */jsx17(Input, {
-    ref,
-    ...inputPasswordProps,
-    trailingIcon: icon,
-    onTrailingIconClick: handleClick,
-    type: inputType
-  });
-});
-InputPassword.displayName = "InputPassword";
+// src/theme/useTheme.ts
+import { useThemeUI } from "theme-ui";
+var useTheme = useThemeUI;
 
-// src/components/ActionButton.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
-var ActionButton = ({
-  icon,
-  variant = "default",
-  sx,
-  ...props
-}) => {
-  return /* @__PURE__ */jsx18(Button, {
-    variant: `buttons.actionButton.${variant}`,
-    leftIcon: icon,
-    sx: {
-      padding: "sm",
-      gap: "xs",
-      fontFamily: "caption",
-      borderRadius: "action",
-      outlineColor: "transparent",
-      ":disabled": props.disabled ? {
-        backgroundColor: "muted",
-        color: "onMuted",
-        cursor: "not-allowed",
-        border: "muted",
-        borderColor: "onMuted"
-      } : void 0,
-      ...sx
-    },
-    ...props
-  });
-};
+// src/index.ts
+import { keyframes } from "@emotion/react";
+import { useBreakpointIndex, useResponsiveValue } from "@theme-ui/match-media";
+import { BaseStyles, Global as Global2 } from "theme-ui";
 export { ActionButton, Badge, BaseStyles, Box, Button, Card, Checkbox, CloseButton, Container, Divider, Flex, Global2 as Global, Grid, Heading, HelpText, IconButton, Image, InfiniteLinearProgress, Input, InputNumber, InputPassword, Label, Progress as LinearProgress, Link, Paragraph, Radio, Select, Slider, Spinner, Stack, Text, Textarea, ThemeProvider, keyframes, useBreakpointIndex, useResponsiveValue, useTheme };