@ttoss/ui 2.0.4 → 3.1.0

package/dist/index.js

@@ -40,7 +40,7 @@ var src_exports = {};
 __export(src_exports, {
   ActionButton: () => ActionButton,
   Badge: () => Badge,
-  BaseStyles: () => import_theme_ui28.BaseStyles,
+  BaseStyles: () => import_theme_ui27.BaseStyles,
   Box: () => import_theme_ui4.Box,
   Button: () => Button,
   Card: () => import_theme_ui6.Card,
@@ -49,11 +49,10 @@ __export(src_exports, {
   Container: () => Container,
   Divider: () => import_theme_ui7.Divider,
   Flex: () => import_theme_ui8.Flex,
-  Global: () => import_theme_ui28.Global,
+  Global: () => import_theme_ui27.Global,
   Grid: () => import_theme_ui9.Grid,
   Heading: () => import_theme_ui10.Heading,
   HelpText: () => HelpText,
-  Icon: () => Icon,
   IconButton: () => IconButton,
   Image: () => import_theme_ui11.Image,
   InfiniteLinearProgress: () => InfiniteLinearProgress,
@@ -63,7 +62,7 @@ __export(src_exports, {
   Label: () => Label,
   LinearProgress: () => import_theme_ui15.Progress,
   Link: () => Link,
-  Paragraph: () => import_theme_ui27.Paragraph,
+  Paragraph: () => import_theme_ui26.Paragraph,
   Radio: () => import_theme_ui19.Radio,
   Select: () => Select,
   Slider: () => import_theme_ui21.Slider,
@@ -72,15 +71,15 @@ __export(src_exports, {
   Text: () => import_theme_ui16.Text,
   Textarea: () => Textarea,
   ThemeProvider: () => ThemeProvider,
-  keyframes: () => import_react3.keyframes,
+  keyframes: () => import_react2.keyframes,
   useBreakpointIndex: () => import_match_media.useBreakpointIndex,
   useResponsiveValue: () => import_match_media.useResponsiveValue,
   useTheme: () => useTheme
 });
 module.exports = __toCommonJS(src_exports);
-var import_theme_ui28 = require("theme-ui");
+var import_theme_ui27 = require("theme-ui");
 var import_match_media = require("@theme-ui/match-media");
-var import_react3 = require("@emotion/react");
+var import_react2 = require("@emotion/react");
 
 // src/theme/ThemeProvider.tsx
 var import_Bruttal = require("@ttoss/theme/Bruttal");
@@ -112,29 +111,15 @@ var useTheme = import_theme_ui2.useThemeUI;
 
 // src/components/Badge.tsx
 var import_theme_ui3 = require("theme-ui");
-
-// src/components/Icon.tsx
-var React = __toESM(require("react"));
-var import_react2 = require("@iconify-icon/react");
+var import_react_icons = require("@ttoss/react-icons");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Icon = React.forwardRef((props, ref) => {
-  return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_react2.Icon, {
-    ref,
-    "data-testid": "iconify-icon",
-    ...props
-  });
-});
-Icon.displayName = "Icon";
-
-// src/components/Badge.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
 var Badge = ({
   icon,
   children,
   sx,
   ...props
 }) => {
-  return /* @__PURE__ */(0, import_jsx_runtime3.jsxs)(import_theme_ui3.Badge, {
+  return /* @__PURE__ */(0, import_jsx_runtime2.jsxs)(import_theme_ui3.Badge, {
     sx: {
       display: "flex",
       alignItems: "center",
@@ -149,7 +134,7 @@ var Badge = ({
       ...sx
     },
     ...props,
-    children: [icon && /* @__PURE__ */(0, import_jsx_runtime3.jsx)(Icon, {
+    children: [icon && /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_react_icons.Icon, {
       inline: true,
       icon
     }), children]
@@ -160,10 +145,11 @@ var Badge = ({
 var import_theme_ui4 = require("theme-ui");
 
 // src/components/Button.tsx
-var React2 = __toESM(require("react"));
+var React = __toESM(require("react"));
 var import_theme_ui5 = require("theme-ui");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Button = React2.forwardRef((props, ref) => {
+var import_react_icons2 = require("@ttoss/react-icons");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Button = React.forwardRef((props, ref) => {
   const {
     children,
     leftIcon,
@@ -171,7 +157,7 @@ var Button = React2.forwardRef((props, ref) => {
     loading,
     ...restProps
   } = props;
-  return /* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_theme_ui5.Button, {
+  return /* @__PURE__ */(0, import_jsx_runtime3.jsxs)(import_theme_ui5.Button, {
     type: "button",
     ...restProps,
     ref,
@@ -185,13 +171,13 @@ var Button = React2.forwardRef((props, ref) => {
       gap: "lg",
       ...restProps.sx
     },
-    children: [loading && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(Icon, {
+    children: [loading && /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_react_icons2.Icon, {
       inline: true,
       icon: "three-dots-loading"
-    }), !loading && leftIcon && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(Icon, {
+    }), !loading && leftIcon && /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_react_icons2.Icon, {
       inline: true,
       icon: leftIcon
-    }), children, rightIcon && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(Icon, {
+    }), children, rightIcon && /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_react_icons2.Icon, {
       inline: true,
       icon: rightIcon
     })]
@@ -218,10 +204,11 @@ var import_theme_ui10 = require("theme-ui");
 var import_theme_ui11 = require("theme-ui");
 
 // src/components/Input.tsx
-var React3 = __toESM(require("react"));
+var React2 = __toESM(require("react"));
+var import_react_icons3 = require("@ttoss/react-icons");
 var import_theme_ui12 = require("theme-ui");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Input = React3.forwardRef(({
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Input = React2.forwardRef(({
   leadingIcon,
   trailingIcon: trailingIconProp,
   onLeadingIconClick,
@@ -231,7 +218,7 @@ var Input = React3.forwardRef(({
   ...inputProps
 }, ref) => {
   const trailingIcon = inputProps["aria-invalid"] ? "warning-alt" : trailingIconProp;
-  return /* @__PURE__ */(0, import_jsx_runtime5.jsxs)(import_theme_ui8.Flex, {
+  return /* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_theme_ui8.Flex, {
     className,
     sx: {
       ...sx,
@@ -239,7 +226,7 @@ var Input = React3.forwardRef(({
       padding: 0,
       border: "none"
     },
-    children: [leadingIcon && /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_theme_ui16.Text, {
+    children: [leadingIcon && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_theme_ui16.Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -248,11 +235,11 @@ var Input = React3.forwardRef(({
       },
       onClick: onLeadingIconClick,
       variant: "leading-icon",
-      children: /* @__PURE__ */(0, import_jsx_runtime5.jsx)(Icon, {
+      children: /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_react_icons3.Icon, {
         inline: true,
         icon: leadingIcon
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_theme_ui12.Input, {
+    }), /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_theme_ui12.Input, {
       ref,
       sx: {
         fontFamily: "body",
@@ -265,7 +252,7 @@ var Input = React3.forwardRef(({
       },
       className,
       ...inputProps
-    }), trailingIcon && /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_theme_ui16.Text, {
+    }), trailingIcon && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_theme_ui16.Text, {
       sx: {
         position: "absolute",
         right: "1rem",
@@ -274,7 +261,7 @@ var Input = React3.forwardRef(({
       },
       variant: "trailing-icon",
       onClick: onTrailingIconClick,
-      children: /* @__PURE__ */(0, import_jsx_runtime5.jsx)(Icon, {
+      children: /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_react_icons3.Icon, {
         inline: true,
         icon: trailingIcon
       })
@@ -284,8 +271,9 @@ var Input = React3.forwardRef(({
 Input.displayName = "Input";
 
 // src/components/Label.tsx
+var import_react_icons4 = require("@ttoss/react-icons");
 var import_theme_ui13 = require("theme-ui");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var TOOLTIP_LABEL = "tooltip";
 var Label = ({
   children,
@@ -294,7 +282,7 @@ var Label = ({
   sx,
   ...props
 }) => {
-  return /* @__PURE__ */(0, import_jsx_runtime6.jsxs)(import_theme_ui13.Label, {
+  return /* @__PURE__ */(0, import_jsx_runtime5.jsxs)(import_theme_ui13.Label, {
     sx: {
       fontFamily: "caption",
       alignItems: "center",
@@ -303,14 +291,14 @@ var Label = ({
       ...sx
     },
     ...props,
-    children: [children, tooltip && /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_theme_ui16.Text, {
+    children: [children, tooltip && /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_theme_ui16.Text, {
       sx: {
         color: "currentcolor",
         cursor: onTooltipClick ? "pointer" : void 0
       },
       onClick: onTooltipClick,
       "aria-label": TOOLTIP_LABEL,
-      children: /* @__PURE__ */(0, import_jsx_runtime6.jsx)(Icon, {
+      children: /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_react_icons4.Icon, {
         inline: true,
         icon: "info"
       })
@@ -319,15 +307,15 @@ var Label = ({
 };
 
 // src/components/Link.tsx
-var React4 = __toESM(require("react"));
+var React3 = __toESM(require("react"));
 var import_theme_ui14 = require("theme-ui");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Link = React4.forwardRef(({
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Link = React3.forwardRef(({
   quiet,
   className,
   ...props
 }, ref) => {
-  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui14.Link, {
+  return /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_theme_ui14.Link, {
     className: `${quiet ? "quiet" : ""} ${className ?? ""}`,
     ...props,
     ref
@@ -342,18 +330,20 @@ var import_theme_ui15 = require("theme-ui");
 var import_theme_ui16 = require("theme-ui");
 
 // src/components/Select.tsx
-var React5 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
+var import_react_icons5 = require("@ttoss/react-icons");
 var import_theme_ui17 = require("theme-ui");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Select = React5.forwardRef(({
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Select = React4.forwardRef(({
   arrow,
   sx,
   ...props
 }, ref) => {
-  return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(import_theme_ui17.Select, {
-    arrow: /* @__PURE__ */(0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, {
-      children: [arrow ?? /* @__PURE__ */(0, import_jsx_runtime8.jsx)(import_theme_ui16.Text, {
+  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui17.Select, {
+    arrow: /* @__PURE__ */(0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, {
+      children: [arrow ?? /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui16.Text, {
         sx: {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           marginLeft: ({
             space
           }) => {
@@ -364,12 +354,13 @@ var Select = React5.forwardRef(({
           lineHeight: 0,
           fontSize: "base"
         },
-        children: /* @__PURE__ */(0, import_jsx_runtime8.jsx)(Icon, {
+        children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_icons5.Icon, {
           icon: "picker-down"
         })
-      }), props["aria-invalid"] === "true" && /* @__PURE__ */(0, import_jsx_runtime8.jsx)(import_theme_ui16.Text, {
+      }), props["aria-invalid"] === "true" && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui16.Text, {
         className: "error-icon",
         sx: {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           marginLeft: ({
             space
           }) => {
@@ -380,7 +371,7 @@ var Select = React5.forwardRef(({
           lineHeight: 0,
           fontSize: "base"
         },
-        children: /* @__PURE__ */(0, import_jsx_runtime8.jsx)(Icon, {
+        children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_icons5.Icon, {
           icon: "warning-alt"
         })
       })]
@@ -405,11 +396,11 @@ var import_theme_ui18 = require("theme-ui");
 var import_theme_ui19 = require("theme-ui");
 
 // src/components/IconButton.tsx
-var React6 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 var import_theme_ui20 = require("theme-ui");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var IconButton = React6.forwardRef((props, ref) => {
-  return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_theme_ui20.IconButton, {
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var IconButton = React5.forwardRef((props, ref) => {
+  return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(import_theme_ui20.IconButton, {
     type: "button",
     ...props,
     ref
@@ -424,12 +415,12 @@ var import_theme_ui21 = require("theme-ui");
 var import_theme_ui22 = require("theme-ui");
 
 // src/components/InfiniteLinearProgress.tsx
-var React7 = __toESM(require("react"));
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var React6 = __toESM(require("react"));
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var MAX_PROGRESS = 100;
 var InfiniteLinearProgress = () => {
-  const [progress, setProgress] = React7.useState(0);
-  React7.useEffect(() => {
+  const [progress, setProgress] = React6.useState(0);
+  React6.useEffect(() => {
     const timer = setInterval(() => {
       setProgress(oldProgress => {
         if (oldProgress === MAX_PROGRESS) {
@@ -450,7 +441,7 @@ var InfiniteLinearProgress = () => {
       clearInterval(timer);
     };
   }, []);
-  return /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_theme_ui15.Progress, {
+  return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_theme_ui15.Progress, {
     max: MAX_PROGRESS,
     value: progress,
     role: "progressbar"
@@ -458,16 +449,17 @@ var InfiniteLinearProgress = () => {
 };
 
 // src/components/Textarea.tsx
-var React8 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
+var import_react_icons6 = require("@ttoss/react-icons");
 var import_theme_ui23 = require("theme-ui");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var Textarea = React8.forwardRef(({
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Textarea = React7.forwardRef(({
   trailingIcon,
   className,
   sx,
   ...textareaProps
 }, ref) => {
-  return /* @__PURE__ */(0, import_jsx_runtime11.jsxs)(import_theme_ui8.Flex, {
+  return /* @__PURE__ */(0, import_jsx_runtime10.jsxs)(import_theme_ui8.Flex, {
     className,
     sx: {
       ...sx,
@@ -475,7 +467,7 @@ var Textarea = React8.forwardRef(({
       padding: 0,
       border: "none"
     },
-    children: [/* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_theme_ui23.Textarea, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_theme_ui23.Textarea, {
       ref,
       sx: {
         fontFamily: "body",
@@ -487,13 +479,13 @@ var Textarea = React8.forwardRef(({
       },
       className,
       ...textareaProps
-    }), trailingIcon && /* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_theme_ui16.Text, {
+    }), trailingIcon && /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_theme_ui16.Text, {
       sx: {
         position: "absolute",
         right: "1.25rem",
         top: "0.75rem"
       },
-      children: /* @__PURE__ */(0, import_jsx_runtime11.jsx)(Icon, {
+      children: /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_react_icons6.Icon, {
         inline: true,
         icon: trailingIcon
       })
@@ -503,11 +495,11 @@ var Textarea = React8.forwardRef(({
 Textarea.displayName = "Textarea";
 
 // src/components/Container.tsx
-var React9 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 var import_theme_ui24 = require("theme-ui");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var Container = React9.forwardRef((props, ref) => {
-  return /* @__PURE__ */(0, import_jsx_runtime12.jsx)(import_theme_ui24.Container, {
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Container = React8.forwardRef((props, ref) => {
+  return /* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_theme_ui24.Container, {
     ref,
     ...props
   });
@@ -515,7 +507,7 @@ var Container = React9.forwardRef((props, ref) => {
 Container.displayName = "Container";
 
 // src/components/HelpText.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var HelpText = ({
   sx,
   disabled,
@@ -523,7 +515,7 @@ var HelpText = ({
   ...props
 }) => {
   const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
-  return /* @__PURE__ */(0, import_jsx_runtime13.jsx)(import_theme_ui16.Text, {
+  return /* @__PURE__ */(0, import_jsx_runtime12.jsx)(import_theme_ui16.Text, {
     variant,
     sx: {
       fontSize: "sm",
@@ -537,10 +529,10 @@ var HelpText = ({
 };
 
 // src/components/CloseButton.tsx
-var React10 = __toESM(require("react"));
-var import_theme_ui25 = require("theme-ui");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var CloseButton = React10.forwardRef(({
+var React9 = __toESM(require("react"));
+var import_react_icons7 = require("@ttoss/react-icons");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var CloseButton = React9.forwardRef(({
   label,
   sx,
   onlyText,
@@ -549,7 +541,7 @@ var CloseButton = React10.forwardRef(({
   if (onlyText && !label) {
     return null;
   }
-  return /* @__PURE__ */(0, import_jsx_runtime14.jsxs)(import_theme_ui25.Button, {
+  return /* @__PURE__ */(0, import_jsx_runtime13.jsxs)(Button, {
     variant: "buttons.closeButton",
     type: "button",
     "aria-label": label,
@@ -571,7 +563,7 @@ var CloseButton = React10.forwardRef(({
     },
     ...props,
     ref,
-    children: [label, !onlyText && /* @__PURE__ */(0, import_jsx_runtime14.jsx)(Icon, {
+    children: [label, !onlyText && /* @__PURE__ */(0, import_jsx_runtime13.jsx)(import_react_icons7.Icon, {
       icon: "close"
     })]
   });
@@ -579,10 +571,11 @@ var CloseButton = React10.forwardRef(({
 CloseButton.displayName = "CloseButton";
 
 // src/components/InputNumber.tsx
-var React11 = __toESM(require("react"));
-var import_theme_ui26 = require("theme-ui");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var InputNumber = React11.forwardRef(({
+var React10 = __toESM(require("react"));
+var import_react_icons8 = require("@ttoss/react-icons");
+var import_theme_ui25 = require("theme-ui");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var InputNumber = React10.forwardRef(({
   sx,
   value,
   infoIcon,
@@ -590,7 +583,7 @@ var InputNumber = React11.forwardRef(({
   onClickInfoIcon,
   ...inputProps
 }, ref) => {
-  const sxProps = React11.useMemo(() => {
+  const sxProps = React10.useMemo(() => {
     const size = String(typeof value === "undefined" ? 0 : value).length;
     if (inputProps["aria-invalid"] === "true") {
       return {
@@ -642,7 +635,7 @@ var InputNumber = React11.forwardRef(({
     }
     onChange(value + 1);
   };
-  return /* @__PURE__ */(0, import_jsx_runtime15.jsxs)(import_theme_ui8.Flex, {
+  return /* @__PURE__ */(0, import_jsx_runtime14.jsxs)(import_theme_ui8.Flex, {
     sx: {
       width: "fit-content",
       ...sx,
@@ -652,7 +645,7 @@ var InputNumber = React11.forwardRef(({
     },
     ref,
     "aria-invalid": inputProps["aria-invalid"],
-    children: [/* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_theme_ui26.Input, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_theme_ui25.Input, {
       ref,
       variant: "forms.inputNumber",
       sx: sxProps,
@@ -662,7 +655,7 @@ var InputNumber = React11.forwardRef(({
       },
       value,
       ...inputProps
-    }), /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_theme_ui16.Text, {
+    }), /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_theme_ui16.Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -671,10 +664,10 @@ var InputNumber = React11.forwardRef(({
         cursor: "pointer"
       },
       onClick: handleChangeUp,
-      children: /* @__PURE__ */(0, import_jsx_runtime15.jsx)(Icon, {
+      children: /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_react_icons8.Icon, {
         icon: "picker-down"
       })
-    }), infoIcon && /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_theme_ui16.Text, {
+    }), infoIcon && /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_theme_ui16.Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -683,10 +676,10 @@ var InputNumber = React11.forwardRef(({
         cursor: onClickInfoIcon ? "pointer" : "default"
       },
       onClick: onClickInfoIcon,
-      children: /* @__PURE__ */(0, import_jsx_runtime15.jsx)(Icon, {
+      children: /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_react_icons8.Icon, {
         icon: "info"
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_theme_ui16.Text, {
+    }), /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_theme_ui16.Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -695,7 +688,7 @@ var InputNumber = React11.forwardRef(({
         cursor: "pointer"
       },
       onClick: handleChangeDown,
-      children: /* @__PURE__ */(0, import_jsx_runtime15.jsx)(Icon, {
+      children: /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_react_icons8.Icon, {
         icon: "picker-up"
       })
     })]
@@ -704,10 +697,10 @@ var InputNumber = React11.forwardRef(({
 InputNumber.displayName = "InputNumber";
 
 // src/components/Stack.tsx
-var React12 = __toESM(require("react"));
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var Stack = React12.forwardRef((props, ref) => {
-  return /* @__PURE__ */(0, import_jsx_runtime16.jsx)(import_theme_ui8.Flex, {
+var React11 = __toESM(require("react"));
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Stack = React11.forwardRef((props, ref) => {
+  return /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_theme_ui8.Flex, {
     ref,
     ...props,
     sx: {
@@ -719,19 +712,19 @@ var Stack = React12.forwardRef((props, ref) => {
 Stack.displayName = "Stack";
 
 // src/components/Paragraph.tsx
-var import_theme_ui27 = require("theme-ui");
+var import_theme_ui26 = require("theme-ui");
 
 // src/components/InputPassword/InputPassword.tsx
-var React14 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 
 // src/components/InputPassword/useHidePassInput.ts
-var React13 = __toESM(require("react"));
+var React12 = __toESM(require("react"));
 var useHidePassInput = (defaultValue = true) => {
-  const [hidePass, setHidePass] = React13.useState(Boolean(defaultValue));
+  const [hidePass, setHidePass] = React12.useState(Boolean(defaultValue));
   const {
     icon,
     inputType
-  } = React13.useMemo(() => {
+  } = React12.useMemo(() => {
     return {
       icon: hidePass ? "view-off" : "view-on",
       inputType: hidePass ? "password" : "text"
@@ -750,8 +743,8 @@ var useHidePassInput = (defaultValue = true) => {
 };
 
 // src/components/InputPassword/InputPassword.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var InputPassword = React14.forwardRef(({
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var InputPassword = React13.forwardRef(({
   showPasswordByDefault,
   ...inputPasswordProps
 }, ref) => {
@@ -760,7 +753,7 @@ var InputPassword = React14.forwardRef(({
     icon,
     inputType
   } = useHidePassInput(!showPasswordByDefault);
-  return /* @__PURE__ */(0, import_jsx_runtime17.jsx)(Input, {
+  return /* @__PURE__ */(0, import_jsx_runtime16.jsx)(Input, {
     ref,
     ...inputPasswordProps,
     trailingIcon: icon,
@@ -771,14 +764,14 @@ var InputPassword = React14.forwardRef(({
 InputPassword.displayName = "InputPassword";
 
 // src/components/ActionButton.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var ActionButton = ({
   icon,
   variant = "default",
   sx,
   ...props
 }) => {
-  return /* @__PURE__ */(0, import_jsx_runtime18.jsx)(Button, {
+  return /* @__PURE__ */(0, import_jsx_runtime17.jsx)(Button, {
     variant: `buttons.actionButton.${variant}`,
     leftIcon: icon,
     sx: {
@@ -816,7 +809,6 @@ var ActionButton = ({
   Grid,
   Heading,
   HelpText,
-  Icon,
   IconButton,
   Image,
   InfiniteLinearProgress,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "2.0.4",
+  "version": "3.1.0",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "author": "ttoss",
   "contributors": [
@@ -20,25 +20,25 @@
   "sideEffects": false,
   "typings": "dist/index.d.ts",
   "dependencies": {
-    "@iconify-icon/react": "^1.0.7",
     "@theme-ui/match-media": "^0.16.0",
     "theme-ui": "^0.16.0",
-    "@ttoss/theme": "^1.5.5"
+    "@ttoss/theme": "^1.6.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
-    "react": ">=16.8.0"
+    "react": ">=16.8.0",
+    "@ttoss/react-icons": "^0.1.0"
   },
   "devDependencies": {
     "@emotion/react": "^11.11.1",
     "@iconify-icons/mdi-light": "^1.2.5",
-    "@iconify/types": "^2.0.0",
     "@types/jest": "^29.5.3",
     "@types/react": "^18.2.12",
     "jest": "^29.6.1",
     "react": "^18.2.0",
     "tsup": "^7.1.0",
     "@ttoss/config": "^1.30.5",
+    "@ttoss/react-icons": "^0.1.0",
     "@ttoss/test-utils": "^1.23.6"
   },
   "keywords": [

package/src/components/Badge.tsx

@@ -1,6 +1,5 @@
 import { type BadgeProps as BadgePropsUi, Badge as BadgeUi } from 'theme-ui';
-
-import { Icon, IconType } from './Icon';
+import { Icon, IconType } from '@ttoss/react-icons';
 
 export type BadgeProps = BadgePropsUi & {
   icon?: IconType;

package/src/components/Button.tsx

@@ -3,7 +3,7 @@ import {
   type ButtonProps as ButtonPropsUi,
   Button as ButtonUi,
 } from 'theme-ui';
-import { Icon, IconType } from './Icon';
+import { Icon, IconType } from '@ttoss/react-icons';
 
 export type ButtonProps = ButtonPropsUi & {
   leftIcon?: IconType;