@ttoss/ui 1.31.0 → 1.31.2

package/dist/esm/index.js

@@ -14,19 +14,18 @@ var ThemeProvider = ({
   theme = BruttalTheme,
   fonts = BruttalFonts
 }) => {
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(ThemeUiProvider, { theme, children: [
-    /* @__PURE__ */ jsx(
-      Global,
-      {
+  return /* @__PURE__ */jsx(Fragment, {
+    children: /* @__PURE__ */jsxs(ThemeUiProvider, {
+      theme,
+      children: [/* @__PURE__ */jsx(Global, {
         styles: css`
-            ${fonts.map((url) => {
+            ${fonts.map(url => {
           return `@import url('${url}');`;
         }).join("\n")}
           `
-      }
-    ),
-    children
-  ] }) });
+      }), children]
+    })
+  });
 };
 
 // src/theme/useTheme.ts
@@ -41,61 +40,52 @@ import { Box } from "theme-ui";
 
 // src/components/Button.tsx
 import * as React3 from "react";
-import {
-  Button as ButtonUi
-} from "theme-ui";
+import { Button as ButtonUi } from "theme-ui";
 
 // src/components/Icon.tsx
 import * as React2 from "react";
-import {
-  Icon as IconifyIcon
-} from "@iconify-icon/react";
+import { Icon as IconifyIcon } from "@iconify-icon/react";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var Icon = React2.forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsx2(IconifyIcon, { ref, "data-testid": "iconify-icon", ...props });
-  }
-);
+var Icon = /*#__PURE__*/React2.forwardRef((props, ref) => {
+  return /* @__PURE__ */jsx2(IconifyIcon, {
+    ref,
+    "data-testid": "iconify-icon",
+    ...props
+  });
+});
 Icon.displayName = "Icon";
 
 // src/components/Button.tsx
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var RenderIcon = ({ icon }) => {
-  if (!icon) {
-    return null;
-  }
-  if (typeof icon === "string") {
-    return /* @__PURE__ */ jsx3(Fragment2, { children: /* @__PURE__ */ jsx3(Icon, { icon }) });
-  }
-  return /* @__PURE__ */ jsx3(Fragment2, { children: icon });
-};
-var MemoizedRenderIcon = React3.memo(RenderIcon);
-var Button = React3.forwardRef(
-  (props, ref) => {
-    const { children, leftIcon, rightIcon, ...restProps } = props;
-    return /* @__PURE__ */ jsxs2(
-      ButtonUi,
-      {
-        ref,
-        ...restProps,
-        sx: {
-          cursor: "pointer",
-          paddingX: "lg",
-          paddingY: "md",
-          display: "inline-flex",
-          alignItems: "center",
-          gap: "lg",
-          ...restProps.sx
-        },
-        children: [
-          /* @__PURE__ */ jsx3(MemoizedRenderIcon, { icon: leftIcon }),
-          children,
-          /* @__PURE__ */ jsx3(MemoizedRenderIcon, { icon: rightIcon })
-        ]
-      }
-    );
-  }
-);
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Button = /*#__PURE__*/React3.forwardRef((props, ref) => {
+  const {
+    children,
+    leftIcon,
+    rightIcon,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */jsxs2(ButtonUi, {
+    ref,
+    type: "button",
+    ...restProps,
+    sx: {
+      cursor: "pointer",
+      paddingX: "lg",
+      paddingY: "md",
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "lg",
+      ...restProps.sx
+    },
+    children: [leftIcon && /* @__PURE__ */jsx3(Icon, {
+      inline: true,
+      icon: leftIcon
+    }), children, rightIcon && /* @__PURE__ */jsx3(Icon, {
+      inline: true,
+      icon: rightIcon
+    })]
+  });
+});
 Button.displayName = "Button";
 
 // src/components/Card.tsx
@@ -120,52 +110,51 @@ import { Image } from "theme-ui";
 import React4 from "react";
 import { Input as InputUI } from "theme-ui";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var Input = React4.forwardRef(
-  ({ leadingIcon, trailingIcon, sx, ...inputProps }, ref) => {
-    return /* @__PURE__ */ jsxs3(Flex, { sx: { position: "relative" }, children: [
-      leadingIcon && /* @__PURE__ */ jsx4(
-        Text,
-        {
-          sx: {
-            position: "absolute",
-            alignSelf: "center",
-            fontSize: "lg",
-            left: "1rem",
-            lineHeight: 0
-          },
-          variant: "leading-icon",
-          children: /* @__PURE__ */ jsx4(Icon, { icon: leadingIcon })
-        }
-      ),
-      /* @__PURE__ */ jsx4(
-        InputUI,
-        {
-          ref,
-          sx: {
-            paddingLeft: leadingIcon ? "3xl" : void 0,
-            paddingRight: trailingIcon ? "3xl" : void 0,
-            ...sx
-          },
-          ...inputProps
-        }
-      ),
-      trailingIcon && /* @__PURE__ */ jsx4(
-        Text,
-        {
-          sx: {
-            position: "absolute",
-            right: "1rem",
-            alignSelf: "center",
-            fontSize: "lg",
-            lineHeight: 0
-          },
-          variant: "trailing-icon",
-          children: /* @__PURE__ */ jsx4(Icon, { icon: trailingIcon })
-        }
-      )
-    ] });
-  }
-);
+var Input = /*#__PURE__*/React4.forwardRef(({
+  leadingIcon,
+  trailingIcon,
+  sx,
+  ...inputProps
+}, ref) => {
+  return /* @__PURE__ */jsxs3(Flex, {
+    sx: {
+      position: "relative"
+    },
+    children: [leadingIcon && /* @__PURE__ */jsx4(Text, {
+      sx: {
+        position: "absolute",
+        alignSelf: "center",
+        fontSize: "lg",
+        left: "1rem",
+        lineHeight: 0
+      },
+      variant: "leading-icon",
+      children: /* @__PURE__ */jsx4(Icon, {
+        icon: leadingIcon
+      })
+    }), /* @__PURE__ */jsx4(InputUI, {
+      ref,
+      sx: {
+        paddingLeft: leadingIcon ? "3xl" : void 0,
+        paddingRight: trailingIcon ? "3xl" : void 0,
+        ...sx
+      },
+      ...inputProps
+    }), trailingIcon && /* @__PURE__ */jsx4(Text, {
+      sx: {
+        position: "absolute",
+        right: "1rem",
+        alignSelf: "center",
+        fontSize: "lg",
+        lineHeight: 0
+      },
+      variant: "trailing-icon",
+      children: /* @__PURE__ */jsx4(Icon, {
+        icon: trailingIcon
+      })
+    })]
+  });
+});
 Input.displayName = "Input";
 
 // src/components/Label.tsx
@@ -175,9 +164,7 @@ import { Label } from "theme-ui";
 import { Link } from "theme-ui";
 
 // src/components/LinearProgress.tsx
-import {
-  Progress
-} from "theme-ui";
+import { Progress } from "theme-ui";
 
 // src/components/Text.tsx
 import { Text } from "theme-ui";
@@ -208,7 +195,7 @@ var InfiniteLinearProgress = () => {
   const [progress, setProgress] = React5.useState(0);
   React5.useEffect(() => {
     const timer = setInterval(() => {
-      setProgress((oldProgress) => {
+      setProgress(oldProgress => {
         if (oldProgress === MAX_PROGRESS) {
           return 0;
         }
@@ -227,7 +214,11 @@ var InfiniteLinearProgress = () => {
       clearInterval(timer);
     };
   }, []);
-  return /* @__PURE__ */ jsx5(Progress, { max: MAX_PROGRESS, value: progress, role: "progressbar" });
+  return /* @__PURE__ */jsx5(Progress, {
+    max: MAX_PROGRESS,
+    value: progress,
+    role: "progressbar"
+  });
 };
 
 // src/components/Textarea.tsx
@@ -235,34 +226,4 @@ import { Textarea } from "theme-ui";
 
 // src/components/Container.tsx
 import { Container } from "theme-ui";
-export {
-  Badge,
-  BaseStyles,
-  Box,
-  Button,
-  Card,
-  Checkbox,
-  Container,
-  Divider,
-  Flex,
-  Grid,
-  Heading,
-  Icon,
-  IconButton,
-  Image,
-  InfiniteLinearProgress,
-  Input,
-  Label,
-  Progress as LinearProgress,
-  Link,
-  Radio,
-  Select,
-  Slider,
-  Spinner,
-  Text,
-  Textarea,
-  ThemeProvider,
-  useBreakpointIndex,
-  useResponsiveValue,
-  useTheme
-};
+export { Badge, BaseStyles, Box, Button, Card, Checkbox, Container, Divider, Flex, Grid, Heading, Icon, IconButton, Image, InfiniteLinearProgress, Input, Label, Progress as LinearProgress, Link, Radio, Select, Slider, Spinner, Text, Textarea, ThemeProvider, useBreakpointIndex, useResponsiveValue, useTheme };

package/dist/index.d.ts

@@ -19,9 +19,13 @@ 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 ButtonProps = ButtonProps$1 & {
-    leftIcon?: React.ReactNode | string;
-    rightIcon?: React.ReactNode | string;
+    leftIcon?: IconType;
+    rightIcon?: IconType;
 };
 declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
@@ -31,10 +35,6 @@ type InputProps = InputProps$1 & {
 };
 declare const Input: React__default.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
 
-type IconType = string | IconifyIcon;
-type IconProps = Omit<IconifyIconProps, 'ref'>;
-declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<IconifyIconHTMLElement | null>>;
-
 declare const InfiniteLinearProgress: () => JSX.Element;
 
 export { Button, ButtonProps, Icon, IconProps, IconType, InfiniteLinearProgress, Input, InputProps, ThemeProvider, ThemeProviderProps, useTheme };

package/dist/index.js

@@ -1,5 +1,6 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 "use strict";
+
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -7,26 +8,32 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
 };
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
   }
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
 
 // src/index.ts
 var src_exports = {};
@@ -75,19 +82,18 @@ var ThemeProvider = ({
   theme = import_Bruttal.BruttalTheme,
   fonts = import_Bruttal.BruttalFonts
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_theme_ui.ThemeProvider, { theme, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_react.Global,
-      {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_theme_ui.ThemeProvider, {
+      theme,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.Global, {
         styles: import_react.css`
-            ${fonts.map((url) => {
+            ${fonts.map(url => {
           return `@import url('${url}');`;
         }).join("\n")}
           `
-      }
-    ),
-    children
-  ] }) });
+      }), children]
+    })
+  });
 };
 
 // src/theme/useTheme.ts
@@ -108,51 +114,46 @@ var import_theme_ui5 = require("theme-ui");
 var React2 = __toESM(require("react"));
 var import_react2 = require("@iconify-icon/react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Icon = React2.forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.Icon, { ref, "data-testid": "iconify-icon", ...props });
-  }
-);
+var Icon = React2.forwardRef((props, ref) => {
+  return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_react2.Icon, {
+    ref,
+    "data-testid": "iconify-icon",
+    ...props
+  });
+});
 Icon.displayName = "Icon";
 
 // src/components/Button.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var RenderIcon = ({ icon }) => {
-  if (!icon) {
-    return null;
-  }
-  if (typeof icon === "string") {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { icon }) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: icon });
-};
-var MemoizedRenderIcon = React3.memo(RenderIcon);
-var Button = React3.forwardRef(
-  (props, ref) => {
-    const { children, leftIcon, rightIcon, ...restProps } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      import_theme_ui5.Button,
-      {
-        ref,
-        ...restProps,
-        sx: {
-          cursor: "pointer",
-          paddingX: "lg",
-          paddingY: "md",
-          display: "inline-flex",
-          alignItems: "center",
-          gap: "lg",
-          ...restProps.sx
-        },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MemoizedRenderIcon, { icon: leftIcon }),
-          children,
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MemoizedRenderIcon, { icon: rightIcon })
-        ]
-      }
-    );
-  }
-);
+var Button = React3.forwardRef((props, ref) => {
+  const {
+    children,
+    leftIcon,
+    rightIcon,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */(0, import_jsx_runtime3.jsxs)(import_theme_ui5.Button, {
+    ref,
+    type: "button",
+    ...restProps,
+    sx: {
+      cursor: "pointer",
+      paddingX: "lg",
+      paddingY: "md",
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "lg",
+      ...restProps.sx
+    },
+    children: [leftIcon && /* @__PURE__ */(0, import_jsx_runtime3.jsx)(Icon, {
+      inline: true,
+      icon: leftIcon
+    }), children, rightIcon && /* @__PURE__ */(0, import_jsx_runtime3.jsx)(Icon, {
+      inline: true,
+      icon: rightIcon
+    })]
+  });
+});
 Button.displayName = "Button";
 
 // src/components/Card.tsx
@@ -177,52 +178,51 @@ var import_theme_ui11 = require("theme-ui");
 var import_react3 = __toESM(require("react"));
 var import_theme_ui12 = require("theme-ui");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Input = import_react3.default.forwardRef(
-  ({ leadingIcon, trailingIcon, sx, ...inputProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_theme_ui8.Flex, { sx: { position: "relative" }, children: [
-      leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        import_theme_ui16.Text,
-        {
-          sx: {
-            position: "absolute",
-            alignSelf: "center",
-            fontSize: "lg",
-            left: "1rem",
-            lineHeight: 0
-          },
-          variant: "leading-icon",
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { icon: leadingIcon })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        import_theme_ui12.Input,
-        {
-          ref,
-          sx: {
-            paddingLeft: leadingIcon ? "3xl" : void 0,
-            paddingRight: trailingIcon ? "3xl" : void 0,
-            ...sx
-          },
-          ...inputProps
-        }
-      ),
-      trailingIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        import_theme_ui16.Text,
-        {
-          sx: {
-            position: "absolute",
-            right: "1rem",
-            alignSelf: "center",
-            fontSize: "lg",
-            lineHeight: 0
-          },
-          variant: "trailing-icon",
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { icon: trailingIcon })
-        }
-      )
-    ] });
-  }
-);
+var Input = import_react3.default.forwardRef(({
+  leadingIcon,
+  trailingIcon,
+  sx,
+  ...inputProps
+}, ref) => {
+  return /* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_theme_ui8.Flex, {
+    sx: {
+      position: "relative"
+    },
+    children: [leadingIcon && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_theme_ui16.Text, {
+      sx: {
+        position: "absolute",
+        alignSelf: "center",
+        fontSize: "lg",
+        left: "1rem",
+        lineHeight: 0
+      },
+      variant: "leading-icon",
+      children: /* @__PURE__ */(0, import_jsx_runtime4.jsx)(Icon, {
+        icon: leadingIcon
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_theme_ui12.Input, {
+      ref,
+      sx: {
+        paddingLeft: leadingIcon ? "3xl" : void 0,
+        paddingRight: trailingIcon ? "3xl" : void 0,
+        ...sx
+      },
+      ...inputProps
+    }), trailingIcon && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_theme_ui16.Text, {
+      sx: {
+        position: "absolute",
+        right: "1rem",
+        alignSelf: "center",
+        fontSize: "lg",
+        lineHeight: 0
+      },
+      variant: "trailing-icon",
+      children: /* @__PURE__ */(0, import_jsx_runtime4.jsx)(Icon, {
+        icon: trailingIcon
+      })
+    })]
+  });
+});
 Input.displayName = "Input";
 
 // src/components/Label.tsx
@@ -263,7 +263,7 @@ var InfiniteLinearProgress = () => {
   const [progress, setProgress] = React5.useState(0);
   React5.useEffect(() => {
     const timer = setInterval(() => {
-      setProgress((oldProgress) => {
+      setProgress(oldProgress => {
         if (oldProgress === MAX_PROGRESS) {
           return 0;
         }
@@ -282,7 +282,11 @@ var InfiniteLinearProgress = () => {
       clearInterval(timer);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_theme_ui15.Progress, { max: MAX_PROGRESS, value: progress, role: "progressbar" });
+  return /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_theme_ui15.Progress, {
+    max: MAX_PROGRESS,
+    value: progress,
+    role: "progressbar"
+  });
 };
 
 // src/components/Textarea.tsx
@@ -321,4 +325,4 @@ var import_theme_ui24 = require("theme-ui");
   useBreakpointIndex,
   useResponsiveValue,
   useTheme
-});
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.31.0",
+  "version": "1.31.2",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -24,18 +24,19 @@
     "@emotion/react": "^11.10.6",
     "@iconify-icon/react": "^1.0.7",
     "@theme-ui/match-media": "^0.15.5",
-    "@ttoss/theme": "^1.4.0",
+    "@ttoss/theme": "^1.4.2",
     "theme-ui": "^0.15.5"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@ttoss/config": "^1.29.0",
-    "@ttoss/test-utils": "^1.20.7",
-    "@types/jest": "^29.4.4",
+    "@ttoss/config": "^1.29.2",
+    "@ttoss/test-utils": "^1.20.9",
+    "@types/jest": "^29.5.0",
     "jest": "^29.5.0",
-    "tsup": "^6.6.3"
+    "react": "^18.2.0",
+    "tsup": "^6.7.0"
   },
   "keywords": [
     "React",
@@ -45,5 +46,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2dc5f62e02ab8c901d6bb603024488b6aa3dda2b"
+  "gitHead": "0609bb0f6e6a1c0999c29e7a5c8f8ebb1c6d3d7a"
 }

package/src/components/Button.tsx

@@ -3,31 +3,13 @@ import {
   type ButtonProps as ButtonPropsUi,
   Button as ButtonUi,
 } from 'theme-ui';
-import { Icon } from './Icon';
+import { Icon, IconType } from './Icon';
 
 export type ButtonProps = ButtonPropsUi & {
-  leftIcon?: React.ReactNode | string;
-  rightIcon?: React.ReactNode | string;
+  leftIcon?: IconType;
+  rightIcon?: IconType;
 };
 
-const RenderIcon = ({ icon }: { icon: React.ReactNode | string }) => {
-  if (!icon) {
-    return null;
-  }
-
-  if (typeof icon === 'string') {
-    return (
-      <>
-        <Icon icon={icon} />
-      </>
-    );
-  }
-
-  return <>{icon}</>;
-};
-
-const MemoizedRenderIcon = React.memo(RenderIcon);
-
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (props, ref) => {
     const { children, leftIcon, rightIcon, ...restProps } = props;
@@ -35,6 +17,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <ButtonUi
         ref={ref}
+        type="button"
         {...restProps}
         sx={{
           cursor: 'pointer',
@@ -46,9 +29,9 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
           ...restProps.sx,
         }}
       >
-        <MemoizedRenderIcon icon={leftIcon} />
+        {leftIcon && <Icon inline icon={leftIcon} />}
         {children}
-        <MemoizedRenderIcon icon={rightIcon} />
+        {rightIcon && <Icon inline icon={rightIcon} />}
       </ButtonUi>
     );
   }