@ttoss/ui 2.0.4 → 3.1.0

package/README.md

@@ -5,7 +5,7 @@
 ## Installation
 
 ```shell
-pnpm add @ttoss/ui @emotion/react
+pnpm add @ttoss/ui @ttoss/react-icons @emotion/react
 ```
 
 ## Quickstart
@@ -93,25 +93,6 @@ export const Provider = (props) => {
 };
 ```
 
-### Icons
-
-Our icon module is powered by [Iconify](https://iconify.design/), as this have an awesome open source icon collection.
-To use it, just import `Icon` and start using. The styling is maded the same as Iconify and all his icons are available for using.
-
-Please refer to our storybook to see some examples of use.
-
-Please, refer to [Iconify docs](https://docs.iconify.design/icon-components/react/) for the parameters and more control over icons
-
-```tsx
-import { Icon } from '@ttoss/ui';
-
-export const IconExample = () => {
-  return (
-    <Icon icon="mdi-light:alarm-panel" style={{ color: 'red' }} width={100} />
-  );
-};
-```
-
 ## Misc
 
 ### keyframes

package/dist/esm/index.js

@@ -35,22 +35,8 @@ var useTheme = useThemeUI;
 
 // src/components/Badge.tsx
 import { Badge as BadgeUi } from "theme-ui";
-
-// src/components/Icon.tsx
-import * as React from "react";
-import { Icon as IconifyIcon } from "@iconify-icon/react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var Icon = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /* @__PURE__ */jsx2(IconifyIcon, {
-    ref,
-    "data-testid": "iconify-icon",
-    ...props
-  });
-});
-Icon.displayName = "Icon";
-
-// src/components/Badge.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Icon } from "@ttoss/react-icons";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var Badge = ({
   icon,
   children,
@@ -72,7 +58,7 @@ var Badge = ({
       ...sx
     },
     ...props,
-    children: [icon && /* @__PURE__ */jsx3(Icon, {
+    children: [icon && /* @__PURE__ */jsx2(Icon, {
       inline: true,
       icon
     }), children]
@@ -83,10 +69,11 @@ var Badge = ({
 import { Box } from "theme-ui";
 
 // src/components/Button.tsx
-import * as React2 from "react";
+import * as React from "react";
 import { Button as ButtonUi } from "theme-ui";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var Button = /*#__PURE__*/React2.forwardRef((props, ref) => {
+import { Icon as Icon2 } from "@ttoss/react-icons";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var Button = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     children,
     leftIcon,
@@ -108,13 +95,13 @@ var Button = /*#__PURE__*/React2.forwardRef((props, ref) => {
       gap: "lg",
       ...restProps.sx
     },
-    children: [loading && /* @__PURE__ */jsx4(Icon, {
+    children: [loading && /* @__PURE__ */jsx3(Icon2, {
       inline: true,
       icon: "three-dots-loading"
-    }), !loading && leftIcon && /* @__PURE__ */jsx4(Icon, {
+    }), !loading && leftIcon && /* @__PURE__ */jsx3(Icon2, {
       inline: true,
       icon: leftIcon
-    }), children, rightIcon && /* @__PURE__ */jsx4(Icon, {
+    }), children, rightIcon && /* @__PURE__ */jsx3(Icon2, {
       inline: true,
       icon: rightIcon
     })]
@@ -141,10 +128,11 @@ import { Heading } from "theme-ui";
 import { Image } from "theme-ui";
 
 // src/components/Input.tsx
-import * as React3 from "react";
+import * as React2 from "react";
+import { Icon as Icon3 } from "@ttoss/react-icons";
 import { Input as InputUI } from "theme-ui";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var Input = /*#__PURE__*/React3.forwardRef(({
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var Input = /*#__PURE__*/React2.forwardRef(({
   leadingIcon,
   trailingIcon: trailingIconProp,
   onLeadingIconClick,
@@ -162,7 +150,7 @@ var Input = /*#__PURE__*/React3.forwardRef(({
       padding: 0,
       border: "none"
     },
-    children: [leadingIcon && /* @__PURE__ */jsx5(Text, {
+    children: [leadingIcon && /* @__PURE__ */jsx4(Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -171,11 +159,11 @@ var Input = /*#__PURE__*/React3.forwardRef(({
       },
       onClick: onLeadingIconClick,
       variant: "leading-icon",
-      children: /* @__PURE__ */jsx5(Icon, {
+      children: /* @__PURE__ */jsx4(Icon3, {
         inline: true,
         icon: leadingIcon
       })
-    }), /* @__PURE__ */jsx5(InputUI, {
+    }), /* @__PURE__ */jsx4(InputUI, {
       ref,
       sx: {
         fontFamily: "body",
@@ -188,7 +176,7 @@ var Input = /*#__PURE__*/React3.forwardRef(({
       },
       className,
       ...inputProps
-    }), trailingIcon && /* @__PURE__ */jsx5(Text, {
+    }), trailingIcon && /* @__PURE__ */jsx4(Text, {
       sx: {
         position: "absolute",
         right: "1rem",
@@ -197,7 +185,7 @@ var Input = /*#__PURE__*/React3.forwardRef(({
       },
       variant: "trailing-icon",
       onClick: onTrailingIconClick,
-      children: /* @__PURE__ */jsx5(Icon, {
+      children: /* @__PURE__ */jsx4(Icon3, {
         inline: true,
         icon: trailingIcon
       })
@@ -207,8 +195,9 @@ var Input = /*#__PURE__*/React3.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 jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var TOOLTIP_LABEL = "tooltip";
 var Label = ({
   children,
@@ -226,14 +215,14 @@ var Label = ({
       ...sx
     },
     ...props,
-    children: [children, tooltip && /* @__PURE__ */jsx6(Text, {
+    children: [children, tooltip && /* @__PURE__ */jsx5(Text, {
       sx: {
         color: "currentcolor",
         cursor: onTooltipClick ? "pointer" : void 0
       },
       onClick: onTooltipClick,
       "aria-label": TOOLTIP_LABEL,
-      children: /* @__PURE__ */jsx6(Icon, {
+      children: /* @__PURE__ */jsx5(Icon4, {
         inline: true,
         icon: "info"
       })
@@ -242,15 +231,15 @@ var Label = ({
 };
 
 // src/components/Link.tsx
-import * as React4 from "react";
+import * as React3 from "react";
 import { Link as LinkUi } from "theme-ui";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var Link = /*#__PURE__*/React4.forwardRef(({
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Link = /*#__PURE__*/React3.forwardRef(({
   quiet,
   className,
   ...props
 }, ref) => {
-  return /* @__PURE__ */jsx7(LinkUi, {
+  return /* @__PURE__ */jsx6(LinkUi, {
     className: `${quiet ? "quiet" : ""} ${className ?? ""}`,
     ...props,
     ref
@@ -265,18 +254,20 @@ import { Progress } from "theme-ui";
 import { Text } from "theme-ui";
 
 // src/components/Select.tsx
-import * as React5 from "react";
+import * as React4 from "react";
+import { Icon as Icon5 } from "@ttoss/react-icons";
 import { Select as SelectUi } from "theme-ui";
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-var Select = /*#__PURE__*/React5.forwardRef(({
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var Select = /*#__PURE__*/React4.forwardRef(({
   arrow,
   sx,
   ...props
 }, ref) => {
-  return /* @__PURE__ */jsx8(SelectUi, {
+  return /* @__PURE__ */jsx7(SelectUi, {
     arrow: /* @__PURE__ */jsxs6(Fragment2, {
-      children: [arrow ?? /* @__PURE__ */jsx8(Text, {
+      children: [arrow ?? /* @__PURE__ */jsx7(Text, {
         sx: {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           marginLeft: ({
             space
           }) => {
@@ -287,12 +278,13 @@ var Select = /*#__PURE__*/React5.forwardRef(({
           lineHeight: 0,
           fontSize: "base"
         },
-        children: /* @__PURE__ */jsx8(Icon, {
+        children: /* @__PURE__ */jsx7(Icon5, {
           icon: "picker-down"
         })
-      }), props["aria-invalid"] === "true" && /* @__PURE__ */jsx8(Text, {
+      }), props["aria-invalid"] === "true" && /* @__PURE__ */jsx7(Text, {
         className: "error-icon",
         sx: {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           marginLeft: ({
             space
           }) => {
@@ -303,7 +295,7 @@ var Select = /*#__PURE__*/React5.forwardRef(({
           lineHeight: 0,
           fontSize: "base"
         },
-        children: /* @__PURE__ */jsx8(Icon, {
+        children: /* @__PURE__ */jsx7(Icon5, {
           icon: "warning-alt"
         })
       })]
@@ -328,11 +320,11 @@ import { Spinner } from "theme-ui";
 import { Radio } from "theme-ui";
 
 // src/components/IconButton.tsx
-import * as React6 from "react";
+import * as React5 from "react";
 import { IconButton as IconButtonUi } from "theme-ui";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var IconButton = /*#__PURE__*/React6.forwardRef((props, ref) => {
-  return /* @__PURE__ */jsx9(IconButtonUi, {
+import { jsx as jsx8 } from "react/jsx-runtime";
+var IconButton = /*#__PURE__*/React5.forwardRef((props, ref) => {
+  return /* @__PURE__ */jsx8(IconButtonUi, {
     type: "button",
     ...props,
     ref
@@ -347,12 +339,12 @@ import { Slider } from "theme-ui";
 import { Checkbox } from "theme-ui";
 
 // src/components/InfiniteLinearProgress.tsx
-import * as React7 from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import * as React6 from "react";
+import { jsx as jsx9 } from "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) {
@@ -373,7 +365,7 @@ var InfiniteLinearProgress = () => {
       clearInterval(timer);
     };
   }, []);
-  return /* @__PURE__ */jsx10(Progress, {
+  return /* @__PURE__ */jsx9(Progress, {
     max: MAX_PROGRESS,
     value: progress,
     role: "progressbar"
@@ -381,10 +373,11 @@ var InfiniteLinearProgress = () => {
 };
 
 // src/components/Textarea.tsx
-import * as React8 from "react";
+import * as React7 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 = /*#__PURE__*/React8.forwardRef(({
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var Textarea = /*#__PURE__*/React7.forwardRef(({
   trailingIcon,
   className,
   sx,
@@ -398,7 +391,7 @@ var Textarea = /*#__PURE__*/React8.forwardRef(({
       padding: 0,
       border: "none"
     },
-    children: [/* @__PURE__ */jsx11(TextareaUI, {
+    children: [/* @__PURE__ */jsx10(TextareaUI, {
       ref,
       sx: {
         fontFamily: "body",
@@ -410,13 +403,13 @@ var Textarea = /*#__PURE__*/React8.forwardRef(({
       },
       className,
       ...textareaProps
-    }), trailingIcon && /* @__PURE__ */jsx11(Text, {
+    }), trailingIcon && /* @__PURE__ */jsx10(Text, {
       sx: {
         position: "absolute",
         right: "1.25rem",
         top: "0.75rem"
       },
-      children: /* @__PURE__ */jsx11(Icon, {
+      children: /* @__PURE__ */jsx10(Icon6, {
         inline: true,
         icon: trailingIcon
       })
@@ -426,11 +419,11 @@ var Textarea = /*#__PURE__*/React8.forwardRef(({
 Textarea.displayName = "Textarea";
 
 // src/components/Container.tsx
-import * as React9 from "react";
+import * as React8 from "react";
 import { Container as ContainerUi } from "theme-ui";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var Container = /*#__PURE__*/React9.forwardRef((props, ref) => {
-  return /* @__PURE__ */jsx12(ContainerUi, {
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Container = /*#__PURE__*/React8.forwardRef((props, ref) => {
+  return /* @__PURE__ */jsx11(ContainerUi, {
     ref,
     ...props
   });
@@ -438,7 +431,7 @@ var Container = /*#__PURE__*/React9.forwardRef((props, ref) => {
 Container.displayName = "Container";
 
 // src/components/HelpText.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var HelpText = ({
   sx,
   disabled,
@@ -446,7 +439,7 @@ var HelpText = ({
   ...props
 }) => {
   const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
-  return /* @__PURE__ */jsx13(Text, {
+  return /* @__PURE__ */jsx12(Text, {
     variant,
     sx: {
       fontSize: "sm",
@@ -460,10 +453,10 @@ var HelpText = ({
 };
 
 // src/components/CloseButton.tsx
-import * as React10 from "react";
-import { Button as Button2 } from "theme-ui";
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
-var CloseButton = /*#__PURE__*/React10.forwardRef(({
+import * as React9 from "react";
+import { Icon as Icon7 } from "@ttoss/react-icons";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var CloseButton = /*#__PURE__*/React9.forwardRef(({
   label,
   sx,
   onlyText,
@@ -472,7 +465,7 @@ var CloseButton = /*#__PURE__*/React10.forwardRef(({
   if (onlyText && !label) {
     return null;
   }
-  return /* @__PURE__ */jsxs8(Button2, {
+  return /* @__PURE__ */jsxs8(Button, {
     variant: "buttons.closeButton",
     type: "button",
     "aria-label": label,
@@ -494,7 +487,7 @@ var CloseButton = /*#__PURE__*/React10.forwardRef(({
     },
     ...props,
     ref,
-    children: [label, !onlyText && /* @__PURE__ */jsx14(Icon, {
+    children: [label, !onlyText && /* @__PURE__ */jsx13(Icon7, {
       icon: "close"
     })]
   });
@@ -502,10 +495,11 @@ var CloseButton = /*#__PURE__*/React10.forwardRef(({
 CloseButton.displayName = "CloseButton";
 
 // src/components/InputNumber.tsx
-import * as React11 from "react";
+import * as React10 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 = /*#__PURE__*/React11.forwardRef(({
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+var InputNumber = /*#__PURE__*/React10.forwardRef(({
   sx,
   value,
   infoIcon,
@@ -513,7 +507,7 @@ var InputNumber = /*#__PURE__*/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 {
@@ -575,7 +569,7 @@ var InputNumber = /*#__PURE__*/React11.forwardRef(({
     },
     ref,
     "aria-invalid": inputProps["aria-invalid"],
-    children: [/* @__PURE__ */jsx15(Input2, {
+    children: [/* @__PURE__ */jsx14(Input2, {
       ref,
       variant: "forms.inputNumber",
       sx: sxProps,
@@ -585,7 +579,7 @@ var InputNumber = /*#__PURE__*/React11.forwardRef(({
       },
       value,
       ...inputProps
-    }), /* @__PURE__ */jsx15(Text, {
+    }), /* @__PURE__ */jsx14(Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -594,10 +588,10 @@ var InputNumber = /*#__PURE__*/React11.forwardRef(({
         cursor: "pointer"
       },
       onClick: handleChangeUp,
-      children: /* @__PURE__ */jsx15(Icon, {
+      children: /* @__PURE__ */jsx14(Icon8, {
         icon: "picker-down"
       })
-    }), infoIcon && /* @__PURE__ */jsx15(Text, {
+    }), infoIcon && /* @__PURE__ */jsx14(Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -606,10 +600,10 @@ var InputNumber = /*#__PURE__*/React11.forwardRef(({
         cursor: onClickInfoIcon ? "pointer" : "default"
       },
       onClick: onClickInfoIcon,
-      children: /* @__PURE__ */jsx15(Icon, {
+      children: /* @__PURE__ */jsx14(Icon8, {
         icon: "info"
       })
-    }), /* @__PURE__ */jsx15(Text, {
+    }), /* @__PURE__ */jsx14(Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -618,7 +612,7 @@ var InputNumber = /*#__PURE__*/React11.forwardRef(({
         cursor: "pointer"
       },
       onClick: handleChangeDown,
-      children: /* @__PURE__ */jsx15(Icon, {
+      children: /* @__PURE__ */jsx14(Icon8, {
         icon: "picker-up"
       })
     })]
@@ -627,10 +621,10 @@ var InputNumber = /*#__PURE__*/React11.forwardRef(({
 InputNumber.displayName = "InputNumber";
 
 // src/components/Stack.tsx
-import * as React12 from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
-var Stack = /*#__PURE__*/React12.forwardRef((props, ref) => {
-  return /* @__PURE__ */jsx16(Flex, {
+import * as React11 from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var Stack = /*#__PURE__*/React11.forwardRef((props, ref) => {
+  return /* @__PURE__ */jsx15(Flex, {
     ref,
     ...props,
     sx: {
@@ -645,16 +639,16 @@ Stack.displayName = "Stack";
 import { Paragraph } from "theme-ui";
 
 // src/components/InputPassword/InputPassword.tsx
-import * as React14 from "react";
+import * as React13 from "react";
 
 // src/components/InputPassword/useHidePassInput.ts
-import * as React13 from "react";
+import * as React12 from "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"
@@ -673,8 +667,8 @@ var useHidePassInput = (defaultValue = true) => {
 };
 
 // src/components/InputPassword/InputPassword.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
-var InputPassword = /*#__PURE__*/React14.forwardRef(({
+import { jsx as jsx16 } from "react/jsx-runtime";
+var InputPassword = /*#__PURE__*/React13.forwardRef(({
   showPasswordByDefault,
   ...inputPasswordProps
 }, ref) => {
@@ -683,7 +677,7 @@ var InputPassword = /*#__PURE__*/React14.forwardRef(({
     icon,
     inputType
   } = useHidePassInput(!showPasswordByDefault);
-  return /* @__PURE__ */jsx17(Input, {
+  return /* @__PURE__ */jsx16(Input, {
     ref,
     ...inputPasswordProps,
     trailingIcon: icon,
@@ -694,14 +688,14 @@ var InputPassword = /*#__PURE__*/React14.forwardRef(({
 InputPassword.displayName = "InputPassword";
 
 // src/components/ActionButton.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var ActionButton = ({
   icon,
   variant = "default",
   sx,
   ...props
 }) => {
-  return /* @__PURE__ */jsx18(Button, {
+  return /* @__PURE__ */jsx17(Button, {
     variant: `buttons.actionButton.${variant}`,
     leftIcon: icon,
     sx: {
@@ -722,4 +716,4 @@ var ActionButton = ({
     ...props
   });
 };
-export { ActionButton, Badge, BaseStyles, Box, Button, Card, Checkbox, CloseButton, Container, Divider, Flex, Global2 as Global, Grid, Heading, HelpText, Icon, IconButton, Image, InfiniteLinearProgress, Input, InputNumber, InputPassword, Label, Progress as LinearProgress, Link, Paragraph, Radio, Select, Slider, Spinner, Stack, Text, Textarea, ThemeProvider, keyframes, useBreakpointIndex, useResponsiveValue, useTheme };
+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 };

package/dist/index.d.mts

@@ -5,8 +5,7 @@ export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
 export { Keyframes, keyframes } from '@emotion/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { IconifyIconProps, IconifyIconHTMLElement } from '@iconify-icon/react';
-import { IconifyIcon } from '@iconify/types';
+import { IconType } from '@ttoss/react-icons';
 
 type ThemeProviderProps = {
     children?: React.ReactNode;
@@ -20,10 +19,6 @@ declare const ThemeProvider: ({ children, theme, fonts, }: ThemeProviderProps) =
 
 declare const useTheme: () => theme_ui.ThemeUIContextValue;
 
-type IconType = string | IconifyIcon;
-type IconProps = Omit<IconifyIconProps, 'ref'>;
-declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<IconifyIconHTMLElement | null>>;
-
 type BadgeProps = BadgeProps$1 & {
     icon?: IconType;
 };
@@ -74,7 +69,7 @@ type HelpTextProps = Omit<TextProps, 'variant'> & {
 };
 declare const HelpText: ({ sx, disabled, negative, ...props }: HelpTextProps) => react_jsx_runtime.JSX.Element;
 
-type CloseButtonProps = ButtonProps$1 & {
+type CloseButtonProps = ButtonProps & {
     label?: string;
     onlyText?: boolean;
 };
@@ -105,4 +100,4 @@ type ActionButtonProps = Omit<ButtonProps, 'rightIcon' | 'leftIcon' | 'variant'>
 };
 declare const ActionButton: ({ icon, variant, sx, ...props }: ActionButtonProps) => react_jsx_runtime.JSX.Element;
 
-export { ActionButton, ActionButtonProps, Badge, BadgeProps, Button, ButtonProps, CloseButton, CloseButtonProps, Container, HelpText, HelpTextProps, Icon, IconButton, IconProps, IconType, InfiniteLinearProgress, Input, InputNumber, InputNumberProps, InputPassword, InputPasswordProps, InputProps, Label, LabelProps, Link, LinkProps, Select, Stack, StackProps, Textarea, TextareaProps, ThemeProvider, ThemeProviderProps, useTheme };
+export { ActionButton, ActionButtonProps, Badge, BadgeProps, Button, ButtonProps, CloseButton, CloseButtonProps, Container, HelpText, HelpTextProps, IconButton, InfiniteLinearProgress, Input, InputNumber, InputNumberProps, InputPassword, InputPasswordProps, InputProps, Label, LabelProps, Link, LinkProps, Select, Stack, StackProps, Textarea, TextareaProps, ThemeProvider, ThemeProviderProps, useTheme };

package/dist/index.d.ts

@@ -5,8 +5,7 @@ export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
 export { Keyframes, keyframes } from '@emotion/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { IconifyIconProps, IconifyIconHTMLElement } from '@iconify-icon/react';
-import { IconifyIcon } from '@iconify/types';
+import { IconType } from '@ttoss/react-icons';
 
 type ThemeProviderProps = {
     children?: React.ReactNode;
@@ -20,10 +19,6 @@ declare const ThemeProvider: ({ children, theme, fonts, }: ThemeProviderProps) =
 
 declare const useTheme: () => theme_ui.ThemeUIContextValue;
 
-type IconType = string | IconifyIcon;
-type IconProps = Omit<IconifyIconProps, 'ref'>;
-declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<IconifyIconHTMLElement | null>>;
-
 type BadgeProps = BadgeProps$1 & {
     icon?: IconType;
 };
@@ -74,7 +69,7 @@ type HelpTextProps = Omit<TextProps, 'variant'> & {
 };
 declare const HelpText: ({ sx, disabled, negative, ...props }: HelpTextProps) => react_jsx_runtime.JSX.Element;
 
-type CloseButtonProps = ButtonProps$1 & {
+type CloseButtonProps = ButtonProps & {
     label?: string;
     onlyText?: boolean;
 };
@@ -105,4 +100,4 @@ type ActionButtonProps = Omit<ButtonProps, 'rightIcon' | 'leftIcon' | 'variant'>
 };
 declare const ActionButton: ({ icon, variant, sx, ...props }: ActionButtonProps) => react_jsx_runtime.JSX.Element;
 
-export { ActionButton, ActionButtonProps, Badge, BadgeProps, Button, ButtonProps, CloseButton, CloseButtonProps, Container, HelpText, HelpTextProps, Icon, IconButton, IconProps, IconType, InfiniteLinearProgress, Input, InputNumber, InputNumberProps, InputPassword, InputPasswordProps, InputProps, Label, LabelProps, Link, LinkProps, Select, Stack, StackProps, Textarea, TextareaProps, ThemeProvider, ThemeProviderProps, useTheme };
+export { ActionButton, ActionButtonProps, Badge, BadgeProps, Button, ButtonProps, CloseButton, CloseButtonProps, Container, HelpText, HelpTextProps, IconButton, InfiniteLinearProgress, Input, InputNumber, InputNumberProps, InputPassword, InputPasswordProps, InputProps, Label, LabelProps, Link, LinkProps, Select, Stack, StackProps, Textarea, TextareaProps, ThemeProvider, ThemeProviderProps, useTheme };