@pedidopago/ui 1.1.0 → 1.1.4

package/dist/components/Badge/index.js

@@ -11,6 +11,8 @@ var _Skeleton = _interopRequireDefault(require("../Skeleton"));
 
 var _styles = require("./styles");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // Styles
@@ -18,21 +20,28 @@ var Badge = function Badge(_ref) {
   var type = _ref.type,
       text = _ref.text,
       isLoading = _ref.isLoading;
-  return /*#__PURE__*/React.createElement(_styles.BadgeContainer, null, !isLoading ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_styles.BadgeCircle, {
-    type: type
-  }), /*#__PURE__*/React.createElement(_styles.BadgeText, null, text)) : /*#__PURE__*/React.createElement(_Flex.default, {
-    spacing: "2"
-  }, /*#__PURE__*/React.createElement(_Skeleton.default, {
-    animation: "wave",
-    variant: "circle",
-    width: 15,
-    height: 15
-  }), /*#__PURE__*/React.createElement(_Skeleton.default, {
-    animation: "wave",
-    variant: "text",
-    width: 70,
-    height: 15
-  })));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.BadgeContainer, {
+    children: !isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.BadgeCircle, {
+        type: type
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.BadgeText, {
+        children: text
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flex.default, {
+      spacing: "2",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+        animation: "wave",
+        variant: "circle",
+        width: 15,
+        height: 15
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+        animation: "wave",
+        variant: "text",
+        width: 70,
+        height: 15
+      })]
+    })
+  });
 };
 
 var _default = Badge;

package/dist/components/Badge/styles.d.ts

@@ -1,21 +1,21 @@
-/// <reference types="react" />
-import { BadgeStyledProps } from './types';
-export declare const BadgeContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const BadgeCircle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & BadgeStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const BadgeText: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const BadgeSkeleton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    circle?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/// <reference types="react" />
+import { BadgeStyledProps } from './types';
+export declare const BadgeContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BadgeCircle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & BadgeStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BadgeText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const BadgeSkeleton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    circle?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/Badge/types.d.ts

@@ -1,11 +1,11 @@
-declare type BadgeTypes = 'primary' | 'secondary' | 'tertiary' | 'neutral' | 'informative' | 'success' | 'success_secondary' | 'warning' | 'warning_secondary' | 'error' | 'critical';
-export declare type IBadgeProps = {
-    type: BadgeTypes;
-    text: string;
-    isLoading?: boolean;
-};
-export declare type BadgeStyledProps = {
-    type: BadgeTypes;
-};
-export {};
+declare type BadgeTypes = 'primary' | 'secondary' | 'tertiary' | 'neutral' | 'informative' | 'success' | 'success_secondary' | 'warning' | 'warning_secondary' | 'error' | 'critical';
+export declare type IBadgeProps = {
+    type: BadgeTypes;
+    text: string;
+    isLoading?: boolean;
+};
+export declare type BadgeStyledProps = {
+    type: BadgeTypes;
+};
+export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Button/Button.test.d.ts

@@ -1,2 +1,2 @@
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom';
 //# sourceMappingURL=Button.test.d.ts.map

package/dist/components/Button/Button.test.js

@@ -8,46 +8,192 @@ require("@testing-library/jest-dom");
 
 var _ = _interopRequireDefault(require("."));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var setup = function setup(props) {
-  var utils = (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.default, props, "Button test"));
-  return utils;
-};
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 describe('Button', function () {
-  it('Should be Rendered', function () {
+  var setup = function setup(props) {
+    var utils = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, _objectSpread(_objectSpread({}, props), {}, {
+      children: "Button test"
+    })));
+
+    var getSkeleton = function getSkeleton() {
+      return utils.getByTestId('skeleton');
+    };
+
+    var getLeftIcon = function getLeftIcon() {
+      return utils.getAllByTestId('leftIconId')[0];
+    };
+
+    var getRightIcon = function getRightIcon() {
+      return utils.getAllByTestId('rightIconId')[0];
+    };
+
+    return _objectSpread({
+      getSkeleton: getSkeleton,
+      getLeftIcon: getLeftIcon,
+      getRightIcon: getRightIcon
+    }, utils);
+  };
+
+  it('should be rendered', function () {
     var _setup = setup({
-      text: 'button text',
-      color: '#fff',
+      bgColor: '#fff',
       variant: 'solid'
     }),
         container = _setup.container;
 
     expect(container).toBeInTheDocument();
   });
-  it('calls onClick prop when clicked', function () {
+  it('should call onClick function when clicked', function () {
     var handleClick = jest.fn();
-    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.default, {
-      text: "button text",
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
       variant: "solid",
-      color: "#fff",
-      onClick: handleClick
-    }, "Click Me"));
+      bgColor: "#fff",
+      onClick: handleClick,
+      children: "Click Me"
+    }));
 
     _react.fireEvent.click(_react.screen.getByRole('button'));
 
     expect(handleClick).toHaveBeenCalledTimes(1);
   });
-  it('disabled button', function () {
+  it('should render a loading button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _setup2, getSkeleton;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+              variant: "solid",
+              children: "Click Me"
+            }));
+            _setup2 = setup({
+              isLoading: true
+            }), getSkeleton = _setup2.getSkeleton;
+            expect(getSkeleton()).toBeInTheDocument();
+
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should render a disabled button', function () {
     var handleClick = jest.fn();
-    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.default, {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
       disabled: true,
-      text: "button text",
       variant: "solid",
-      color: "#fff",
-      onClick: handleClick
-    }, "Click Me"));
+      bgColor: "#fff",
+      onClick: handleClick,
+      children: "Click Me"
+    }));
     expect(_react.screen.getByRole('button')).toBeDisabled();
+    expect(_react.screen.getByRole('button')).toHaveStyle('cursor: not-allowed');
+  });
+  it('should render a ghost variant button', function () {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      variant: "ghost",
+      children: "Click Me"
+    }));
+    expect(_react.screen.getByRole('button')).toHaveStyle('background-color: transparent');
+  });
+  it('should render a link variant button', function () {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      variant: "link",
+      children: "Click Me"
+    }));
+    expect(_react.screen.getByRole('button')).toHaveStyle('background-color: transparent');
+    expect(_react.screen.getByRole('button')).toHaveStyle('text-decoration: underline');
+  });
+  it('should render an outline variant button', function () {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      variant: "outline",
+      textColor: "#ff00ff",
+      children: "Click Me"
+    }));
+    expect(_react.screen.getByRole('button')).toHaveStyle('background-color: transparent');
+    expect(_react.screen.getByRole('button')).toHaveStyle('color: #ff00ff');
+  });
+  it('should render a button that takes full width (boolean)', function () {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      fullWidth: true,
+      variant: "solid",
+      children: "Click Me"
+    }));
+    expect(_react.screen.getByRole('button')).toHaveStyle('width: 100%');
+  });
+  it('should render a button that takes full width (Responsive Object)', function () {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      fullWidth: {
+        base: true
+      },
+      variant: "solid",
+      bgColor: "#fff",
+      children: "Click Me"
+    }));
+    expect(_react.screen.getByRole('button')).toHaveStyle('width: 100%');
+  });
+  it('should not render a button that takes full width (Responsive Object)', function () {
+    var handleClick = jest.fn();
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      fullWidth: {
+        base: false,
+        sm: true
+      },
+      variant: "solid",
+      bgColor: "#fff",
+      onClick: handleClick,
+      children: "Click Me"
+    }));
+    expect(_react.screen.getByRole('button')).not.toHaveStyle('width: 100%');
+  });
+  it('should render a button with a leftIcon', function () {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      leftIcon: "airplay",
+      variant: "solid",
+      children: "Click Me"
+    }));
+
+    var _setup3 = setup({
+      leftIcon: 'airplay'
+    }),
+        getLeftIcon = _setup3.getLeftIcon;
+
+    expect(getLeftIcon()).toBeInTheDocument();
+  });
+  it('should render a button with a rightIcon', function () {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      rightIcon: "airplay",
+      variant: "solid",
+      children: "Click Me"
+    }));
+
+    var _setup4 = setup({
+      rightIcon: 'airplay'
+    }),
+        getRightIcon = _setup4.getRightIcon;
+
+    expect(getRightIcon()).toBeInTheDocument();
+  });
+  it('should render a button with a grey textColor', function () {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      textColor: "#8b7e8b",
+      children: "Click Me"
+    }));
+    expect(_react.screen.getByRole('button')).toHaveStyle('color: #8b7e8b');
   });
 });

package/dist/components/Button/index.d.ts

@@ -1,6 +1,5 @@
-import { ComponentPropsWithoutRef, FC } from 'react';
-import { IButtonProps } from './types';
-declare type Props = ComponentPropsWithoutRef<'button'>;
-declare const Button: FC<IButtonProps & Props>;
-export default Button;
+import { FC, HTMLAttributes } from 'react';
+import { IButtonProps } from './types';
+declare const Button: FC<HTMLAttributes<HTMLButtonElement> & IButtonProps>;
+export default Button;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AASrD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,aAAK,KAAK,GAAG,wBAAwB,CAAC,QAAQ,CAAC,CAAC;AAEhD,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,YAAY,GAAG,KAAK,CA0EpC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAO3C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGvC,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,cAAc,CAAC,iBAAiB,CAAC,GAAG,YAAY,CA+DhE,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Button/index.js

@@ -9,17 +9,23 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _index = require("../../shared/theme/index");
 
-var _fuctionsColors = require("../../utils/fuctionsColors");
+var _getColorValue = require("../../utils/getColorValue");
 
 var _styles = require("./styles");
 
-var _getColorValue = require("../../utils/getColorValue");
+var _Skeleton = _interopRequireDefault(require("../Skeleton"));
+
+var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["children", "disabled", "icon", "isLoading", "onClick", "text", "variant", "color", "size", "hoverSolid", "focusSolid", "disabledColor", "iconPosition", "fullWidth", "colorText"];
+var _excluded = ["children", "leftIcon", "rightIcon", "isLoading", "variant", "bgColor", "size", "fullWidth", "textColor"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
@@ -27,81 +33,74 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var Button = function Button(_ref) {
   var children = _ref.children,
-      disabled = _ref.disabled,
-      icon = _ref.icon,
+      leftIcon = _ref.leftIcon,
+      rightIcon = _ref.rightIcon,
       isLoading = _ref.isLoading,
-      onClick = _ref.onClick,
-      text = _ref.text,
-      variant = _ref.variant,
-      color = _ref.color,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'solid' : _ref$variant,
+      _ref$bgColor = _ref.bgColor,
+      bgColor = _ref$bgColor === void 0 ? '' : _ref$bgColor,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'md' : _ref$size,
-      hoverSolid = _ref.hoverSolid,
-      focusSolid = _ref.focusSolid,
-      disabledColor = _ref.disabledColor,
-      iconPosition = _ref.iconPosition,
       fullWidth = _ref.fullWidth,
-      colorText = _ref.colorText,
-      rest = _objectWithoutProperties(_ref, _excluded);
+      _ref$textColor = _ref.textColor,
+      textColor = _ref$textColor === void 0 ? '' : _ref$textColor,
+      props = _objectWithoutProperties(_ref, _excluded);
 
   var _useTheme = (0, _index.useTheme)(),
       theme = _useTheme.theme;
 
-  if (variant == null) {
-    variant = 'solid';
-  }
+  var parsedBgColor = (0, _getColorValue.getColorValue)(bgColor, theme, 'success.default');
+  var parsedTextColor = (0, _getColorValue.getColorValue)(textColor, theme, 'text.default');
 
-  var colorr = (0, _getColorValue.getColorValue)(colorText || '', theme, 'success.default');
+  var getThemeHex = function getThemeHex(path, obj) {
+    var separator = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '.';
+    var properties = path.split(separator);
+    return properties.reduce(function (prev, curr) {
+      return prev && prev[curr];
+    }, obj);
+  };
 
-  if (!color) {
-    color = colorr;
+  if (parsedBgColor.includes('.')) {
+    parsedBgColor = getThemeHex(parsedBgColor, theme);
   }
 
-  disabledColor = color + 76;
-  var newHover = (0, _fuctionsColors.hoverFunction)(color);
-  var newFocus = (0, _fuctionsColors.focusFunction)(color);
-  var sharedProps = {
-    fullWidth: fullWidth,
-    disabledColor: disabledColor,
-    color: color,
-    isLoading: isLoading,
-    text: text,
-    variant: variant,
-    size: size,
-    iconPosition: iconPosition
-  };
-
-  if (icon === undefined) {
-    icon = 'message-square';
+  if (parsedTextColor.includes('.')) {
+    parsedTextColor = getThemeHex(parsedTextColor, theme);
   }
 
   if (isLoading) {
-    return /*#__PURE__*/React.createElement(_styles.LoadingButton, {
-      variant: variant,
-      size: size,
-      fullWidth: fullWidth
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+      width: 200,
+      height: 52,
+      "data-testid": "skeleton"
     });
   }
 
-  return /*#__PURE__*/React.createElement(_styles.Buttons, _extends({}, sharedProps, {
-    hoverSolid: newHover,
-    colorText: colorr,
-    focusSolid: newFocus,
-    onClick: onClick,
-    disabled: disabled
-  }, rest), /*#__PURE__*/React.createElement(_styles.DivIcon, _extends({
-    disabled: disabled,
-    hoverSolid: newHover,
-    focusSolid: newFocus
-  }, sharedProps), iconPosition === 'left' && !isLoading && /*#__PURE__*/React.createElement(_Icon.default, {
-    name: icon
-  }), children, text, /*#__PURE__*/React.createElement(_styles.SpanIcon, _extends({
-    disabled: disabled,
-    hoverSolid: newHover,
-    focusSolid: newFocus
-  }, sharedProps), iconPosition === 'right' && !isLoading && /*#__PURE__*/React.createElement(_Icon.default, {
-    name: icon
-  }))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Buttons, _objectSpread(_objectSpread({
+    button: {
+      bgColor: parsedBgColor,
+      textColor: parsedTextColor,
+      fullWidth: fullWidth,
+      isLoading: isLoading,
+      variant: variant,
+      size: size
+    }
+  }, props), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.IconContainer, {
+      children: [leftIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.IconWrapper, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          name: leftIcon,
+          "data-testid": "leftIconId"
+        })
+      }), children, !leftIcon && rightIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.IconWrapper, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          name: rightIcon,
+          "data-testid": "rightIconId"
+        })
+      })]
+    })
+  }));
 };
 
 var _default = Button;

package/dist/components/Button/styles.d.ts

@@ -1,23 +1,15 @@
-/// <reference types="react" />
-import { IButtonProps, GenericInputProps, GenericThemeProps } from './types';
-declare type StyledIconProps = {
-    colorText?: string;
-};
-export declare const Buttons: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericInputProps & IButtonProps & StyledIconProps, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export declare const SpanIcon: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IButtonProps & GenericInputProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const DivIcon: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IButtonProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const LoadingButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericThemeProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export {};
+/// <reference types="react" />
+import { StyledMapping } from './types';
+export declare const Buttons: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & StyledMapping, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const IconContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/Button/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE7E,aAAK,eAAe,GAAG;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,OAAO;;;0KA4FnB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;8IAAkD,CAAC;AACxE,eAAO,MAAM,OAAO;;;wHAQnB,CAAC;AAEF,eAAO,MAAM,aAAa;;;6HAiDzB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGxC,eAAO,MAAM,OAAO;;;qIA4HnB,CAAC;AAEF,eAAO,MAAM,aAAa;;;yGAIzB,CAAC;AAEF,eAAO,MAAM,WAAW;;;yGAIvB,CAAC"}