@pedidopago/ui 1.1.2 → 1.1.3

package/dist/@types/index.d.ts

@@ -1,7 +1,7 @@
-import { ExtendThemeProps } from '../shared/theme/theme.types';
-export declare type GenericStyledProps = {
-    theme?: ExtendThemeProps & {
-        colorMode: 'light' | 'dark';
-    };
-};
+import { ExtendThemeProps } from '../shared/theme/theme.types';
+export declare type GenericStyledProps = {
+    theme?: ExtendThemeProps & {
+        colorMode: 'light' | 'dark';
+    };
+};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Alert/alert.test.d.ts

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

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

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { IAlertProps } from './types';
-declare const Alert: FC<IAlertProps>;
-export default Alert;
+import { FC } from 'react';
+import { IAlertProps } from './types';
+declare const Alert: FC<IAlertProps>;
+export default Alert;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,37 +1,37 @@
-/// <reference types="react" />
-import { IStyledAlert } from './types';
-export declare const StyledAlertContainer: 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 StyledAlertWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledAlert, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledIconBox: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledAlert & {
-    havePadding: boolean;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledColumn: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledAlert, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledCloseIcon: 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 StyledAlertSkeleton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledAlert, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledButtonRow: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledAlert, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+/// <reference types="react" />
+import { IStyledAlert } from './types';
+export declare const StyledAlertContainer: 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 StyledAlertWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledAlert, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledIconBox: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledAlert & {
+    havePadding: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledColumn: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledAlert, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledCloseIcon: 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 StyledAlertSkeleton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledAlert, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledButtonRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledAlert, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1,49 +1,49 @@
-import { ExtendThemeProps } from 'src';
-export declare type IAlertProps = {
-    /**
-     * The variantion of the alert component style
-     * @default 'filled'
-     */
-    variant?: 'outlined' | 'filled' | 'closable';
-    /**
-     * The type of the alert component
-     * @default 'default'
-     */
-    type?: 'default' | 'success' | 'warning' | 'error' | 'critical' | 'informative';
-    /**
-     * The message of the alet
-     */
-    message: string;
-    /**
-     * The title of the alert
-     */
-    title: string;
-    /**
-     * The title of the alert button
-     */
-    buttonTitle?: string;
-    /**
-     * The action of the alert button
-     */
-    onButtonClick?: () => void;
-    /**
-     * Whether the alert is loading
-     */
-    isLoading?: boolean;
-    /**
-     * Sets a full width alert
-     */
-    fullWidth?: boolean;
-    /**
-     * Provides a callback that is called when the close button is clicked.
-     * @description This props are available when variant is set to 'closable'
-     */
-    onClose?: () => void;
-};
-export declare type IStyledAlert = {
-    fullWidth?: boolean;
-    variant?: 'outlined' | 'filled' | 'closable';
-    type?: 'default' | 'success' | 'warning' | 'error' | 'critical' | 'informative';
-    theme?: ExtendThemeProps;
-};
+import { ExtendThemeProps } from 'src';
+export declare type IAlertProps = {
+    /**
+     * The variantion of the alert component style
+     * @default 'filled'
+     */
+    variant?: 'outlined' | 'filled' | 'closable';
+    /**
+     * The type of the alert component
+     * @default 'default'
+     */
+    type?: 'default' | 'success' | 'warning' | 'error' | 'critical' | 'informative';
+    /**
+     * The message of the alet
+     */
+    message: string;
+    /**
+     * The title of the alert
+     */
+    title: string;
+    /**
+     * The title of the alert button
+     */
+    buttonTitle?: string;
+    /**
+     * The action of the alert button
+     */
+    onButtonClick?: () => void;
+    /**
+     * Whether the alert is loading
+     */
+    isLoading?: boolean;
+    /**
+     * Sets a full width alert
+     */
+    fullWidth?: boolean;
+    /**
+     * Provides a callback that is called when the close button is clicked.
+     * @description This props are available when variant is set to 'closable'
+     */
+    onClose?: () => void;
+};
+export declare type IStyledAlert = {
+    fullWidth?: boolean;
+    variant?: 'outlined' | 'filled' | 'closable';
+    type?: 'default' | 'success' | 'warning' | 'error' | 'critical' | 'informative';
+    theme?: ExtendThemeProps;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Avatar/avatar.test.d.ts

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

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

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { IAvatarComponent } from './types';
-declare const Avatar: FC<IAvatarComponent>;
-export default Avatar;
+import { FC } from 'react';
+import { IAvatarComponent } from './types';
+declare const Avatar: FC<IAvatarComponent>;
+export default Avatar;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,26 +1,26 @@
-/// <reference types="react" />
-import { GenericAvatarStyled } from './types';
-export declare const AvatarWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericAvatarStyled, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const AvatarImage: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericAvatarStyled, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-export declare const AvatarInitials: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericAvatarStyled, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const AvatarInformation: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericAvatarStyled, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const AvatarSkeleton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericAvatarStyled & {
-    circle?: boolean | undefined;
-    description?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/// <reference types="react" />
+import { GenericAvatarStyled } from './types';
+export declare const AvatarWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericAvatarStyled, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AvatarImage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericAvatarStyled, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const AvatarInitials: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericAvatarStyled, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AvatarInformation: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericAvatarStyled, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AvatarSkeleton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericAvatarStyled & {
+    circle?: boolean | undefined;
+    description?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1,16 +1,16 @@
-import { ExtendThemeProps, GlobalColorsProps } from 'src';
-export declare type IAvatarComponent = {
-    name: string;
-    src?: string;
-    information?: string;
-    boxColor?: GlobalColorsProps | (string & {});
-    size?: 'small' | 'medium' | 'large';
-    isLoading?: boolean;
-};
-export declare type GenericAvatarStyled = {
-    boxColor?: GlobalColorsProps | (string & {});
-    theme?: {
-        size: 'small' | 'medium' | 'large';
-    } & ExtendThemeProps;
-};
+import { ExtendThemeProps, GlobalColorsProps } from 'src';
+export declare type IAvatarComponent = {
+    name: string;
+    src?: string;
+    information?: string;
+    boxColor?: GlobalColorsProps | (string & {});
+    size?: 'small' | 'medium' | 'large';
+    isLoading?: boolean;
+};
+export declare type GenericAvatarStyled = {
+    boxColor?: GlobalColorsProps | (string & {});
+    theme?: {
+        size: 'small' | 'medium' | 'large';
+    } & ExtendThemeProps;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Badge/badge.test.d.ts

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

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

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { IBadgeProps } from './types';
-declare const Badge: FC<IBadgeProps>;
-export default Badge;
+import { FC } from 'react';
+import { IBadgeProps } from './types';
+declare const Badge: FC<IBadgeProps>;
+export default Badge;
 //# sourceMappingURL=index.d.ts.map

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

@@ -12,36 +12,55 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
 
-var setup = function setup(props) {
-  var utils = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, _objectSpread(_objectSpread({}, props), {}, {
-    children: "Button test"
-  })));
-  return utils;
-};
-
 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__*/(0, _jsxRuntime.jsx)(_.default, {
-      text: "button text",
       variant: "solid",
-      color: "#fff",
+      bgColor: "#fff",
       onClick: handleClick,
       children: "Click Me"
     }));
@@ -50,16 +69,131 @@ describe('Button', function () {
 
     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__*/(0, _jsxRuntime.jsx)(_.default, {
       disabled: true,
-      text: "button text",
       variant: "solid",
-      color: "#fff",
+      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"}