@pedidopago/ui 1.1.2 → 1.1.3

package/dist/components/Button/index.js

@@ -9,15 +9,15 @@ 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 }; }
 
@@ -33,86 +33,73 @@ 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__*/(0, _jsxRuntime.jsx)(_styles.LoadingButton, {
-      variant: variant,
-      size: size,
-      fullWidth: fullWidth
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+      width: 200,
+      height: 52,
+      "data-testid": "skeleton"
     });
   }
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Buttons, _objectSpread(_objectSpread(_objectSpread({}, sharedProps), {}, {
-    hoverSolid: newHover,
-    colorText: colorr,
-    focusSolid: newFocus,
-    onClick: onClick,
-    disabled: disabled
-  }, rest), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.DivIcon, _objectSpread(_objectSpread({
-      disabled: disabled,
-      hoverSolid: newHover,
-      focusSolid: newFocus
-    }, sharedProps), {}, {
-      children: [iconPosition === 'left' && !isLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-        name: icon
-      }), children, text, /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SpanIcon, _objectSpread(_objectSpread({
-        disabled: disabled,
-        hoverSolid: newHover,
-        focusSolid: newFocus
-      }, sharedProps), {}, {
-        children: iconPosition === 'right' && !isLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_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"
         })
-      }))]
-    }))
+      })]
+    })
   }));
 };
 

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"}

package/dist/components/Button/styles.js

@@ -3,44 +3,122 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SpanIcon = exports.LoadingButton = exports.DivIcon = exports.Buttons = void 0;
+exports.IconWrapper = exports.IconContainer = exports.Buttons = void 0;
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _react = require("@emotion/react");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+var _invertColor = require("src/utils/invertColor");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var Buttons = _styled.default.button(function (props) {
-  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      font-family: Poppins;\n      font-style: normal;\n      font-weight: 600;\n      font-size: 16px;\n      line-height: 150%;\n      border-radius: 8px;\n      border: 0px;\n      cursor: pointer;\n      //width: 102px;\n      height: ", ";\n      padding-left: 24px;\n      padding-right: 24px;\n      color: white;\n      background-color: ", ";\n      ", "\n      ", "\n\n  ", "\n\n\n    ", "\n    ", "\n    "])), props.theme.buttonSize[props.size || 'sm'], props.color || props.colorText, props.fullWidth === true && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        width: ", ";\n      "])), props.fullWidth ? '100%' : props.theme.buttonSize[props.size || 'sm']), props.variant === 'solid' && (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:focus {\n          background-color: ", ";\n        }\n        &:disabled {\n          background-color: ", ";\n          cursor: not-allowed;\n        }\n      "])), props.hoverSolid, props.focusSolid, props.disabledColor), props.variant === 'outline' && (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        background-color: transparent;\n        color: ", ";\n        border: 3px ", " solid;\n\n        &:hover {\n          background-color: ", ";\n        }\n        &:focus {\n          background-color: ", ";\n        }\n        &:disabled {\n          background-color: transparent;\n          cursor: not-allowed;\n          border: 3px ", " solid;\n          color: ", ";\n        }\n      "])), props.color, props.color, props.color + 33, props.color + 51, props.disabledColor, props.disabledColor), props.variant === 'ghost' && (0, _react.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        background-color: transparent;\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n        &:focus {\n          color: ", ";\n        }\n        &:disabled {\n          color: ", ";\n          cursor: not-allowed;\n        }\n      "])), props.color, props.hoverSolid, props.focusSolid, props.disabledColor), props.variant === 'link' && (0, _react.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        text-decoration: underline;\n        background-color: transparent;\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n        &:focus {\n          color: ", ";\n        }\n        &:disabled {\n          color: ", ";\n          cursor: not-allowed;\n        }\n      "])), props.color, props.hoverSolid, props.focusSolid, props.disabledColor));
-});
+var Buttons = _styled.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-family: Poppins;\n  font-style: normal;\n  font-weight: ", ";\n  font-size: ", ";\n  border-radius: 8px;\n  border: 0px;\n  cursor: pointer;\n  padding-left: 24px;\n  padding-right: 24px;\n\n  color: ", ";\n\n  background-color: ", ";\n\n  height: ", ";\n\n  width: ", ";\n\n  &:hover {\n    filter: brightness(0.8);\n  }\n\n  &:focus {\n    filter: brightness(0.8);\n  }\n\n  &:disabled {\n    filter: opacity(0.5);\n    cursor: not-allowed;\n  }\n\n  ", "\n\n  @media screen and (min-width: ", ") {\n    width: ", ";\n  }\n\n  @media screen and (min-width: ", ") {\n    width: ", ";\n  }\n\n  @media screen and (min-width: ", ") {\n    width: ", ";\n  }\n\n  @media screen and (min-width: ", ") {\n    width: ", ";\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.fontWeight.normal;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.fontSizes.md;
+}, function (_ref3) {
+  var _button$textColor;
 
-exports.Buttons = Buttons;
+  var button = _ref3.button,
+      theme = _ref3.theme;
+  var baseColor = (0, _invertColor.invertColor)(button.textColor || button.bgColor || theme.colors.primary.default, true);
+  return (_button$textColor = button.textColor) !== null && _button$textColor !== void 0 ? _button$textColor : baseColor;
+}, function (_ref4) {
+  var _button$bgColor;
+
+  var button = _ref4.button,
+      theme = _ref4.theme;
+  return (_button$bgColor = button.bgColor) !== null && _button$bgColor !== void 0 ? _button$bgColor : theme.colors.primary.default;
+}, function (_ref5) {
+  var button = _ref5.button,
+      theme = _ref5.theme;
+  if (button.size) return theme.buttonSize[button.size];
+  return theme.buttonSize.md;
+}, function (_ref6) {
+  var button = _ref6.button;
+
+  if (button.fullWidth) {
+    if (_typeof(button.fullWidth) === 'object' && button.fullWidth !== undefined) {
+      return button.fullWidth.base && '100%';
+    }
+
+    return '100%';
+  }
+}, function (_ref7) {
+  var button = _ref7.button,
+      theme = _ref7.theme;
 
-var SpanIcon = _styled.default.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
+  switch (button.variant) {
+    case 'outline':
+      return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          background-color: transparent;\n          color: ", ";\n          border: 3px ", " solid;\n        "])), button.bgColor || button.textColor || theme.colors.primary.default, button.bgColor || button.textColor || theme.colors.primary.default);
 
-exports.SpanIcon = SpanIcon;
+    case 'ghost':
+      return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          background-color: transparent;\n          color: ", ";\n        "])), button.bgColor || button.textColor || theme.colors.primary.default);
 
-var DivIcon = _styled.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 5px;\n\n  align-items: center;\n  text-align: center;\n  align-content: center;\n  justify-content: center;\n"])));
+    case 'link':
+      return (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          text-decoration: underline;\n          background-color: transparent;\n          color: ", ";\n        "])), button.bgColor || button.textColor || theme.colors.primary.default);
+  }
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.breakpoints.sm;
+}, function (_ref9) {
+  var button = _ref9.button;
 
-exports.DivIcon = DivIcon;
+  if (_typeof(button.fullWidth) === 'object') {
+    var widthWasNotSet = button.fullWidth.sm === undefined;
+    if (widthWasNotSet) return;
+    return button.fullWidth.sm ? '100%' : 'fit-content';
+  }
+}, function (_ref10) {
+  var theme = _ref10.theme;
+  return theme.breakpoints.md;
+}, function (_ref11) {
+  var button = _ref11.button;
 
-var LoadingButton = _styled.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  border-radius: 8px;\n  background-color: ", ";\n  overflow: hidden;\n  height: ", ";\n\n  ", "\n\n  &::after {\n    content: '';\n    inset: 0px;\n    width: 100%;\n    height: 100%;\n    display: block;\n    animation: 1.6s linear 0.5s infinite normal none running move;\n    transform: translateX(-100%);\n    background: linear-gradient(\n      90deg,\n      transparent,\n      ", ",\n      transparent\n    );\n  }\n\n  @keyframes move {\n    0% {\n      transform: translateX(-100%);\n    }\n    100% {\n      transform: translateX(100%);\n    }\n  }\n\n  ", "\n  ", "\n"])), function (props) {
-  return props.theme.colors.neutral.neutral1;
-}, function (props) {
-  return props.theme.buttonSize[props.size || 'sm'];
-}, function (props) {
-  return props.fullWidth === true && (0, _react.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      width: ", ";\n    "])), props.fullWidth ? '100%' : props.theme.buttonSize[props.size || 'sm']);
-}, function (props) {
-  return props.theme.colors.neutral.neutral2;
-}, function (props) {
-  return props.variant === 'ghost' && (0, _react.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      width: 102px;\n      height: 24px;\n    "])));
-}, function (props) {
-  return props.variant === 'link' && (0, _react.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      width: 102px;\n      height: 24px;\n    "])));
+  if (_typeof(button.fullWidth) === 'object') {
+    var widthWasNotSet = button.fullWidth.md === undefined;
+    if (widthWasNotSet) return;
+    return button.fullWidth.md ? '100%' : 'fit-content';
+  }
+}, function (_ref12) {
+  var theme = _ref12.theme;
+  return theme.breakpoints.lg;
+}, function (_ref13) {
+  var button = _ref13.button;
+
+  if (_typeof(button.fullWidth) === 'object') {
+    var widthWasNotSet = button.fullWidth.lg === undefined;
+    if (widthWasNotSet) return;
+    return button.fullWidth.lg ? '100%' : 'fit-content';
+  }
+}, function (_ref14) {
+  var theme = _ref14.theme;
+  return theme.breakpoints.xl;
+}, function (_ref15) {
+  var button = _ref15.button;
+
+  if (_typeof(button.fullWidth) === 'object') {
+    var widthWasNotSet = button.fullWidth.xl === undefined;
+    if (widthWasNotSet) return;
+    return button.fullWidth.xl ? '100%' : 'fit-content';
+  }
 });
 
-exports.LoadingButton = LoadingButton;
+exports.Buttons = Buttons;
+
+var IconContainer = _styled.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  gap: 5px;\n"])));
+
+exports.IconContainer = IconContainer;
+
+var IconWrapper = _styled.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+
+exports.IconWrapper = IconWrapper;

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

@@ -1,32 +1,104 @@
-import { HTMLProps } from 'react';
-import { ExtendThemeProps } from '../../shared/theme/index';
-import { IconName } from '../Icon/types';
-import { GlobalColorsProps } from '../../shared/theme';
-export declare type GenericInputProps = {
-    theme?: ExtendThemeProps;
-};
-export interface IButtonProps {
-    disabled?: boolean;
-    icon?: IconName;
-    isLoading?: boolean;
-    size?: 'sm' | 'md' | 'xl';
-    variant: 'outline' | 'solid' | 'ghost' | 'link';
-    color: string;
-    hoverSolid?: string;
-    focusSolid?: string;
-    disabledColor?: string;
-    iconPosition?: 'left' | 'right';
-    shadesColor?: string;
-    fullWidth?: boolean;
-    colorText?: string | GlobalColorsProps;
-    text: string;
-    buttonProps?: HTMLProps<HTMLButtonElement>;
-}
-export declare type GenericThemeProps = {
-    theme?: ExtendThemeProps;
-    indicatorColor?: GlobalColorsProps | (string & {});
-    fullWidth?: boolean;
-    size: 'sm' | 'md' | 'xl';
-    variant: 'link' | 'outline' | 'solid' | 'ghost';
-};
+import { IconName } from '../Icon/types';
+import { GlobalColorsProps } from '../../shared/theme';
+declare type buttonVariant = 'outline' | 'solid' | 'ghost' | 'link';
+declare type buttonColor = GlobalColorsProps | (string & {});
+declare type responsivePattern<T = any> = {
+    base?: T;
+    sm?: T;
+    md?: T;
+    lg?: T;
+    xl?: T;
+    xxl?: T;
+};
+declare type sizeOptions = 'sm' | 'md' | 'xl';
+export interface IButtonProps {
+    /**
+     * The button's properties change making it not clickable and changing it's color.
+     *
+     * @default 'solid'
+     * @example 'solid' | 'outline' | 'ghost' | 'link'
+     * @type buttonVariant
+     * @memberof IButtonProps
+     */
+    disabled?: boolean;
+    /**
+     * The icon to be displayed on the left side of the button.
+     * This property takes priority when rightIcon is passed too.
+     *
+     * @default ''
+     * @type IconName
+     * @memberof IButtonProps
+     */
+    leftIcon?: IconName;
+    /**
+     * The icon to be displayed on the right side of the button.
+     * This property has no priority and will **not** be rendered
+     * when leftIcon is passed.
+     *
+     * @default ''
+     * @type IconName
+     * @memberof IButtonProps
+     */
+    rightIcon?: IconName;
+    /**
+     * The button rendered changes to a LoadingButton component
+     *
+     * @default false
+     * @type boolean
+     * @memberof IButtonProps
+     * @example true
+     */
+    isLoading?: boolean;
+    /**
+     * The button height changes based on the string passed to this prop
+     *
+     * @default 'md'
+     * @type sizeOptions
+     * @memberof IButtonProps
+     * @example 'sm' | 'md' | 'xl'
+     */
+    size?: sizeOptions;
+    /**
+     * The button's type, it can be ghost, solid, outline or link.
+     *
+     * @default 'solid'
+     * @example 'solid' | 'outline' | 'ghost' | 'link'
+     * @type buttonVariant
+     * @memberof IButtonProps
+     */
+    variant?: buttonVariant;
+    /**
+     * The button's color, should be passed as a string.
+     *
+     * @default 'primary'
+     * @example 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark'
+     * @type buttonColor
+     * @memberof IButtonProps
+     */
+    bgColor?: buttonColor;
+    /**
+     * Property that makes the button take 100% of the width of the parent component.
+     *
+     * @default false
+     * @example true
+     * @example { base: true, sm: false', md: false }
+     * @example { base: 'md', md: 'xl' }
+     * @type boolean | responsivePattern<boolean>
+     * @memberof IButtonProps
+     */
+    fullWidth?: boolean | responsivePattern<boolean>;
+    /**
+     * The color text of the button.
+     *
+     * @default 'white'
+     * @example 'white' | 'black'
+     * @type string
+     * @memberof IButtonProps
+     */
+    textColor?: buttonColor;
+}
+export declare type StyledMapping = {
+    button: IButtonProps;
+};
+export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,oBAAY,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AACF,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,EAAE,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,iBAAiB,CAAC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;CAC5C;AAED,oBAAY,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,cAAc,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACzB,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;CACjD,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,aAAK,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAC5D,aAAK,WAAW,GAAG,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AACrD,aAAK,iBAAiB,CAAC,CAAC,GAAG,GAAG,IAAI;IAChC,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,GAAG,CAAC,EAAE,CAAC,CAAC;CACT,CAAC;AACF,aAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,MAAM,WAAW,YAAY;IAC3B;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC;IAErB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAEjD;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;CACzB;AAED,oBAAY,aAAa,GAAG;IAC1B,MAAM,EAAE,YAAY,CAAC;CACtB,CAAC"}

package/dist/components/Card/ButtonCard/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { Buttons } from '../types';
-export declare function ButtonCardArea({ btSecondary, btPrimary, btColumn }: Buttons): JSX.Element;
+/// <reference types="react" />
+import { Buttons } from '../types';
+export declare function ButtonCardArea({ btSecondary, btPrimary, btColumn }: Buttons): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Card/ButtonCard/styles.d.ts

@@ -1,14 +1,14 @@
-/// <reference types="react" />
-import { ThemeProps } from 'src';
-export declare const ButtonArea: 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 MultipleButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    theme?: ThemeProps | undefined;
-    btColumn?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/// <reference types="react" />
+import { ThemeProps } from 'src';
+export declare const ButtonArea: 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 MultipleButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    theme?: ThemeProps | undefined;
+    btColumn?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/Card/Expansion/index.d.ts

@@ -1,6 +1,6 @@
-import react from 'react';
-export declare function Expansion({ children, expandedHeight, }: {
-    children?: react.ReactChild;
-    expandedHeight?: string;
-}): JSX.Element;
+import react from 'react';
+export declare function Expansion({ children, expandedHeight, }: {
+    children?: react.ReactChild;
+    expandedHeight?: string;
+}): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Card/Expansion/style.d.ts

@@ -1,15 +1,15 @@
-/// <reference types="react" />
-export declare const ExpandBody: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    expanded: boolean;
-    expandedHeight?: string | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ExpandIcon: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    expanded: boolean;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/// <reference types="react" />
+export declare const ExpandBody: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    expanded: boolean;
+    expandedHeight?: string | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ExpandIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    expanded: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=style.d.ts.map

package/dist/components/Card/card.test.d.ts

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

package/dist/components/Card/card.test.js

@@ -107,8 +107,7 @@ describe('Card', function () {
   it('Should render a card with one button', function () {
     var _setup11 = setup({
       btPrimary: {
-        text: 'read more',
-        color: 'blue',
+        bgColor: 'blue',
         variant: 'outline'
       }
     }),
@@ -119,13 +118,11 @@ describe('Card', function () {
   it('Should render a card with two buttons', function () {
     var _setup12 = setup({
       btPrimary: {
-        text: 'read more',
-        color: 'blue',
+        bgColor: 'blue',
         variant: 'outline'
       },
       btSecondary: {
-        text: 'read more',
-        color: 'blue',
+        bgColor: 'blue',
         variant: 'outline'
       }
     }),
@@ -137,13 +134,11 @@ describe('Card', function () {
     var _setup13 = setup({
       btColumn: true,
       btPrimary: {
-        text: 'read more',
-        color: 'blue',
+        bgColor: 'blue',
         variant: 'outline'
       },
       btSecondary: {
-        text: 'read more',
-        color: 'blue',
+        bgColor: 'blue',
         variant: 'outline'
       }
     }),