@pedidopago/ui 1.0.9 → 1.1.3

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/index.js

@@ -11,20 +11,34 @@ var _Button = _interopRequireDefault(require("../../Button"));
 
 var _Grid = _interopRequireDefault(require("../../Grid"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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 ButtonCardArea(_ref) {
   var btSecondary = _ref.btSecondary,
       btPrimary = _ref.btPrimary,
       btColumn = _ref.btColumn;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, (btSecondary || btPrimary) && /*#__PURE__*/React.createElement(_styles.ButtonArea, null, btSecondary && btPrimary ? /*#__PURE__*/React.createElement(_styles.MultipleButton, {
-    btColumn: btColumn
-  }, /*#__PURE__*/React.createElement(_Grid.default, {
-    container: true,
-    templateColumns: {
-      sm: 'repeat(1, 1fr)',
-      md: !btColumn ? 'repeat(2, 1fr)' : 'repeat(1, 1fr)'
-    },
-    gridGap: 10
-  }, /*#__PURE__*/React.createElement(_Button.default, btSecondary), /*#__PURE__*/React.createElement(_Button.default, btPrimary))) : btPrimary && /*#__PURE__*/React.createElement(_Button.default, btPrimary)));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (btSecondary || btPrimary) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ButtonArea, {
+      children: btSecondary && btPrimary ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.MultipleButton, {
+        btColumn: btColumn,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Grid.default, {
+          container: true,
+          templateColumns: {
+            sm: 'repeat(1, 1fr)',
+            md: !btColumn ? 'repeat(2, 1fr)' : 'repeat(1, 1fr)'
+          },
+          gridGap: 10,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, _objectSpread({}, btSecondary)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, _objectSpread({}, btPrimary))]
+        })
+      }) : btPrimary && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, _objectSpread({}, btPrimary))
+    })
+  });
 }

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/index.js

@@ -13,6 +13,8 @@ var _Icon = _interopRequireDefault(require("../../Icon"));
 
 var _style = require("./style");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -37,21 +39,26 @@ function Expansion(_ref) {
       setExpanded = _useState2[1];
 
   var theme = (0, _react.useTheme)();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick() {
-      return setExpanded(!expanded);
-    },
-    style: {
-      display: 'flex',
-      justifyContent: 'flex-end'
-    }
-  }, /*#__PURE__*/React.createElement(_style.ExpandIcon, {
-    expanded: expanded
-  }, /*#__PURE__*/React.createElement(_Icon.default, {
-    color: theme.colorMode === 'dark' ? 'neutral.white' : 'neutral.black',
-    name: "arrow-down"
-  }))), /*#__PURE__*/React.createElement(_style.ExpandBody, {
-    expanded: expanded,
-    expandedHeight: expandedHeight
-  }, children));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      onClick: function onClick() {
+        return setExpanded(!expanded);
+      },
+      style: {
+        display: 'flex',
+        justifyContent: 'flex-end'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.ExpandIcon, {
+        expanded: expanded,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          color: theme.colorMode === 'dark' ? 'neutral.white' : 'neutral.black',
+          name: "arrow-down"
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.ExpandBody, {
+      expanded: expanded,
+      expandedHeight: expandedHeight,
+      children: children
+    })]
+  });
 }

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

@@ -6,8 +6,16 @@ require("@testing-library/jest-dom");
 
 var _ = require(".");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
+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__*/React.createElement(_.Card, props));
+  var utils = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Card, _objectSpread({}, props)));
   return utils;
 };
 
@@ -99,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'
       }
     }),
@@ -111,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'
       }
     }),
@@ -129,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'
       }
     }),

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { cardI } from './types';
-export declare function Card({ title, subtitle, media, supporingText, tooltip, icon, outlined, expand, expandedHeight, titleColor, hover, active, padding, children, btPrimary, btSecondary, btColumn, }: cardI): JSX.Element;
+/// <reference types="react" />
+import { cardI } from './types';
+export declare function Card({ title, subtitle, media, supporingText, tooltip, icon, outlined, expand, expandedHeight, titleColor, hover, active, padding, children, btPrimary, btSecondary, btColumn, }: cardI): JSX.Element;
 //# sourceMappingURL=index.d.ts.map