@pedidopago/ui 1.1.2 → 1.1.5

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, ButtonHTMLAttributes } from 'react';
+import { IButtonProps } from './types';
+declare const Button: FC<ButtonHTMLAttributes<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,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAOjD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGvC,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG,YAAY,CA+DtE,CAAC;AAEF,eAAe,MAAM,CAAC"}

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;;;qIA0InB,CAAC;AAEF,eAAO,MAAM,aAAa;;;yGAKzB,CAAC;AAEF,eAAO,MAAM,WAAW;;;yGAIvB,CAAC"}

package/dist/components/Button/styles.js

@@ -3,44 +3,125 @@
 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("../../utils/invertColor");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 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-inline: 24px;\n\n  transition: all 0.15s ease-in-out;\n\n  color: ", ";\n\n  background-color: ", ";\n\n  height: ", ";\n\n  width: ", ";\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;
+
+  switch (button.variant) {
+    case 'solid':
+      return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          &:hover,\n          &:focus {\n            box-shadow: inset 0 0 40px 40px rgba(0, 0, 0, 0.2);\n          }\n        "])));
 
-var SpanIcon = _styled.default.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
+    case 'outline':
+      return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          background-color: transparent;\n          color: ", ";\n          border: 3px ", " solid;\n          box-shadow: none;\n          &:hover,\n          &:focus {\n            filter: brightness(0.85);\n          }\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)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          padding-inline: 0;\n          background-color: transparent;\n          color: ", ";\n          &:hover,\n          &:focus {\n            filter: brightness(0.85);\n          }\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)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          padding-inline: 0;\n          text-decoration: underline;\n          background-color: transparent;\n          color: ", ";\n          &:hover,\n          &:focus {\n            filter: brightness(0.85);\n          }\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(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 0.25em;\n"])));
+
+exports.IconContainer = IconContainer;
+
+var IconWrapper = _styled.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+
+exports.IconWrapper = IconWrapper;