@pedidopago/ui 1.3.7 → 1.3.10

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { IllustrationProps } from './types';
+export declare const IllustrationContainer: 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 IconContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<IllustrationProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Illustration/styles.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,qBAAqB;;;yGAKjC,CAAC;AAEF,eAAO,MAAM,aAAa;;;sIAiCzB,CAAC"}

package/dist/components/Illustration/styles.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IllustrationContainer = exports.IconContainer = void 0;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _templateObject, _templateObject2;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var IllustrationContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  width: fit-content;\n  height: fit-content;\n"])));
+
+exports.IllustrationContainer = IllustrationContainer;
+
+var IconContainer = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n\n  ", "\n"])), function (_ref) {
+  var name = _ref.name;
+
+  switch (name) {
+    case 'illust-order':
+      return "\n          top: 40px;\n          left: 54px;\n        ";
+
+    case 'illust-box-delivery':
+      return "\n          top: 123px;\n          left: 122px;\n          width: 35px;\n        ";
+
+    case 'illust-transport':
+      return "\n          top: 123px;\n          left: 122px;\n          width: 35px;\n        ";
+
+    default:
+      return "\n          top: 123px;\n          left: 10px;\n          width: 35px;\n        ";
+  }
+});
+
+exports.IconContainer = IconContainer;

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

@@ -0,0 +1,7 @@
+import { IconName } from '../Icon/types';
+export interface IllustrationProps {
+    iconName?: IconName;
+    name?: 'illust-inquiry' | 'illust-order' | 'illust-prescription' | 'illust-calendar' | 'illust-card' | 'illust-pix' | 'illust-boleto' | 'illust-box-closed' | 'illust-box-open' | 'illust-box-delivery' | 'illust-transport';
+    type?: 'default' | 'success' | 'warning' | 'error' | 'critical' | 'informative';
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Illustration/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,IAAI,CAAC,EACD,gBAAgB,GAChB,cAAc,GACd,qBAAqB,GACrB,iBAAiB,GACjB,aAAa,GACb,YAAY,GACZ,eAAe,GACf,mBAAmB,GACnB,iBAAiB,GACjB,qBAAqB,GACrB,kBAAkB,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,CAAC;CACjF"}

package/dist/components/Illustration/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/Steps/components/StepIcon/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { IStepIcon } from '../../types';
-export declare const StepIcon: ({ isSelectedStep, stepPosition, hasStartGradient, hasEndGratient, activeColor, }: IStepIcon) => JSX.Element;
+import { StepIconProps } from '../../types';
+export declare const StepIcon: ({ isSelectedStep, stepPosition, hasStartGradient, hasEndGratient, activeColor, }: StepIconProps) => JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Steps/components/StepIcon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Steps/components/StepIcon/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAaxC,eAAO,MAAM,QAAQ,qFAMlB,SAAS,gBAsFX,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Steps/components/StepIcon/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAa5C,eAAO,MAAM,QAAQ,qFAMlB,aAAa,gBAsFf,CAAC"}

package/dist/components/Steps/components/StepIconMobile/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { IStepIcon } from '../../types';
-export declare const StepIconMobile: ({ stepPosition, isSelectedStep, hasStartGradient, hasEndGratient, activeColor, }: IStepIcon) => JSX.Element;
+import { StepIconProps } from '../../types';
+export declare const StepIconMobile: ({ stepPosition, isSelectedStep, hasStartGradient, hasEndGratient, activeColor, }: StepIconProps) => JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Steps/components/StepIconMobile/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Steps/components/StepIconMobile/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAOxC,eAAO,MAAM,cAAc,qFAMxB,SAAS,gBAgGX,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Steps/components/StepIconMobile/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAO5C,eAAO,MAAM,cAAc,qFAMxB,aAAa,gBAgGf,CAAC"}

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IStepsProps } from './types';
-declare const Steps: ({ current, steps, activeColor, fullWidth, isReducedSteps, enableCurrentStepChecked, }: IStepsProps) => JSX.Element;
+import { StepsProps } from './types';
+declare const Steps: ({ current, steps, activeColor, fullWidth, isReducedSteps, enableCurrentStepChecked, }: StepsProps) => JSX.Element;
 export default Steps;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/index.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGtC,QAAA,MAAM,KAAK,0FAOR,WAAW,gBAgGb,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/index.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAc,UAAU,EAAE,MAAM,SAAS,CAAC;AAEjD,QAAA,MAAM,KAAK,0FAOR,UAAU,gBA2GZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Steps/index.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _react = require("react");
+
 var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _StepIcon = require("./components/StepIcon");
@@ -15,12 +17,12 @@ var _utils = require("./utils");
 
 var _styles = require("./styles");
 
-var _react = require("react");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -48,6 +50,17 @@ var Steps = function Steps(_ref) {
       isMobile = _useState2[0],
       setIsMobile = _useState2[1];
 
+  var handleEnableControlledSteps = function handleEnableControlledSteps(step, index) {
+    var isControlledSteps = _typeof(step) === 'object';
+    if (isControlledSteps) return step.isCompleted;
+    return current > index + 1 || enableCurrentStepChecked && current === index + 1;
+  };
+
+  var handleStepName = function handleStepName(step) {
+    if (_typeof(step) === 'object') return step.name;
+    return step;
+  };
+
   var getStepIconPosition = function getStepIconPosition(index) {
     if (index === 0 && index < steps.length - 1) {
       return _utils.STEP_POSITION.INITIAL_BEFORE_UNSELECTED;
@@ -93,12 +106,12 @@ var Steps = function Steps(_ref) {
           activeColor: activeColor
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StepsItemText, {
           isReducedSteps: isReducedSteps,
-          children: step
+          children: handleStepName(step)
         })]
-      }, "".concat(step, "-").concat(index)) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ReducedStepsContainer, {
+      }, "".concat(handleStepName(step), "-").concat(index)) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ReducedStepsContainer, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StepsItemText, {
           isReducedSteps: isReducedSteps,
-          children: step
+          children: handleStepName(step)
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepIcon.StepIcon, {
           stepPosition: getStepIconPosition(index),
           isSelectedStep: index < current,
@@ -106,7 +119,7 @@ var Steps = function Steps(_ref) {
           hasEndGratient: checkEndGradient(index),
           activeColor: activeColor
         })]
-      }, step) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.StepsItemContainer, {
+      }, handleStepName(step)) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.StepsItemContainer, {
         id: "simple-step-".concat(index + 1),
         tabIndex: index + 1 === current ? 0 : -1,
         isCurrent: current === index + 1,
@@ -114,13 +127,13 @@ var Steps = function Steps(_ref) {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StepsCircle, {
             activeColor: activeColor,
             isCurrent: current === index + 1,
-            isFinished: current > index + 1 || enableCurrentStepChecked && current === index + 1,
-            children: current > index + 1 || enableCurrentStepChecked && current === index + 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            isFinished: handleEnableControlledSteps(step, index),
+            children: handleEnableControlledSteps(step, index) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
               name: "check"
             }) : index + 1
           }), current === index + 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StepsItemText, {
             isDisabled: enableCurrentStepChecked,
-            children: step
+            children: handleStepName(step)
           })]
         }), current === index + 1 && current < steps.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StepsSeparator, {})]
       }, index);

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/styles.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,cAAc;;;;;;yGAc1B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;iBACT,SAAS,GAAG,WAAW,GAAG,UAAU;;;yGAiDlD,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAK1B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;eAClB,OAAO;yGAWnB,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;yGAajC,CAAC;AAEF,eAAO,MAAM,2BAA2B;;;yGAIvC,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;yGAItC,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;iHAmCzB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/styles.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,cAAc;;;;;;yGAc1B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;iBACT,SAAS,GAAG,WAAW,GAAG,UAAU;;;yGA0DlD,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAM1B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;eAClB,OAAO;yGAkBnB,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;yGAajC,CAAC;AAEF,eAAO,MAAM,2BAA2B;;;yGAIvC,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;yGAItC,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;iHA0CzB,CAAC"}

package/dist/components/Steps/styles.js

@@ -5,9 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StepsSeparator = exports.StepsItemsDetailsContainer = exports.StepsItemText = exports.StepsItemContainer = exports.StepsContainer = exports.StepsCircle = exports.ReducedStepsMobileContainer = exports.ReducedStepsContainer = void 0;
 
+var _react = require("@emotion/react");
+
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -26,47 +28,56 @@ var StepsContainer = _styled.default.div(_templateObject || (_templateObject = _
 
 exports.StepsContainer = StepsContainer;
 
-var StepsCircle = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  width: 42px;\n  height: 42px;\n  min-width: 42px;\n  min-height: 42px;\n  border-radius: 99999px;\n\n  font-family: inherit;\n  font-weight: 600;\n  font-size: 1.125rem;\n\n  ", "\n\n  & svg {\n    stroke: ", ";\n    stroke-width: 2px;\n  }\n"])), function (_ref4) {
-  var theme = _ref4.theme,
-      activeColor = _ref4.activeColor,
-      isFinished = _ref4.isFinished,
-      isCurrent = _ref4.isCurrent;
-  return theme.colors[activeColor] && "\n    background-color: ".concat(isFinished ? theme.colors[activeColor].default : isCurrent ? theme.colors[activeColor].disabled : 'transparent', ";\n    color: ").concat(isFinished ? theme.colors.body.light : isCurrent ? theme.colors.neutral.black : theme.colors.neutral.neutral3, ";\n\n    ").concat(!isCurrent && !isFinished && "\n      border: solid 2px ".concat(theme.colors.neutral.neutral1, ";\n      "), "\n  ");
+var StepsCircle = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  width: 32px;\n  height: 32px;\n  min-width: 32px;\n  min-height: 32px;\n  border-radius: 99999px;\n\n  ", "\n\n  font-family: inherit;\n  font-weight: 600;\n  font-size: 1.125rem;\n\n  ", "\n\n  & svg {\n    stroke: ", ";\n    stroke-width: 2px;\n  }\n"])), function (_ref4) {
+  var theme = _ref4.theme;
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    @media screen and (min-width: ", ") {\n      width: 42px;\n      height: 42px;\n      min-width: 42px;\n      min-height: 42px;\n    }\n  "])), theme.breakpoints.md);
 }, function (_ref5) {
-  var theme = _ref5.theme;
+  var theme = _ref5.theme,
+      activeColor = _ref5.activeColor,
+      isFinished = _ref5.isFinished,
+      isCurrent = _ref5.isCurrent;
+  return theme.colors[activeColor] && "\n    background-color: ".concat(isFinished ? theme.colors[activeColor].default : isCurrent ? theme.colors[activeColor].disabled : 'transparent', ";\n    color: ").concat(isFinished ? theme.colors.body.light : isCurrent ? theme.colors.neutral.black : theme.colors.neutral.neutral3, ";\n\n    ").concat(!isCurrent && !isFinished && "\n      border: solid 2px ".concat(theme.colors.neutral.neutral1, ";\n      "), "\n  ");
+}, function (_ref6) {
+  var theme = _ref6.theme;
   return theme.colors.body.light;
 });
 
 exports.StepsCircle = StepsCircle;
 
-var StepsSeparator = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 2px;\n  width: 100%;\n  min-width: 40px;\n  background-color: ", ";\n"])), function (_ref6) {
-  var theme = _ref6.theme;
+var StepsSeparator = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: 2px;\n  width: 100%;\n  min-width: 40px;\n  max-width: 20px;\n  background-color: ", ";\n"])), function (_ref7) {
+  var theme = _ref7.theme;
   return theme.colors.neutral.neutral1;
 });
 
 exports.StepsSeparator = StepsSeparator;
 
-var StepsItemContainer = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  flex: ", ";\n  gap: 12px;\n\n  &:last-of-type {\n    flex-direction: row-reverse;\n  }\n"])), function (props) {
+var StepsItemContainer = _styled.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  flex: ", ";\n\n  gap: 8px;\n\n  &:last-of-type {\n    flex-direction: row-reverse;\n  }\n\n  ", "\n"])), function (props) {
   return props.isCurrent ? 1 : 0;
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return (0, _react.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    @media screen and (min-width: ", ") {\n      gap: 12px;\n    }\n  "])), theme.breakpoints.sm);
 });
 
 exports.StepsItemContainer = StepsItemContainer;
 
-var ReducedStepsContainer = _styled.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  height: 100px;\n\n  @media only screen and (max-width: 500px) {\n    flex-direction: row;\n    height: max-content;\n    width: 300px;\n    justify-content: start;\n  }\n"])));
+var ReducedStepsContainer = _styled.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  height: 100px;\n\n  @media only screen and (max-width: 500px) {\n    flex-direction: row;\n    height: max-content;\n    width: 300px;\n    justify-content: start;\n  }\n"])));
 
 exports.ReducedStepsContainer = ReducedStepsContainer;
 
-var ReducedStepsMobileContainer = _styled.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n"])));
+var ReducedStepsMobileContainer = _styled.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n"])));
 
 exports.ReducedStepsMobileContainer = ReducedStepsMobileContainer;
 
-var StepsItemsDetailsContainer = _styled.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n"])));
+var StepsItemsDetailsContainer = _styled.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n"])));
 
 exports.StepsItemsDetailsContainer = StepsItemsDetailsContainer;
 
-var StepsItemText = _styled.default.h3(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  font-family: inherit;\n  font-weight: 600;\n  font-size: 1.25rem;\n  white-space: nowrap;\n\n  ", "\n\n  @media only screen and (max-width: 500px) {\n    ", ";\n    white-space: normal;\n  }\n"])), function (_ref7) {
-  var isDisabled = _ref7.isDisabled,
-      theme = _ref7.theme;
+var StepsItemText = _styled.default.h3(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  font-family: inherit;\n  font-weight: 600;\n  font-size: 1rem;\n\n  white-space: nowrap;\n\n  ", "\n\n  ", "\n\n  @media only screen and (max-width: 500px) {\n    ", ";\n    white-space: normal;\n  }\n"])), function (_ref9) {
+  var theme = _ref9.theme;
+  return (0, _react.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    @media screen and (min-width: ", ") {\n      font-size: 1.25rem;\n    }\n  "])), theme.breakpoints.sm);
+}, function (_ref10) {
+  var isDisabled = _ref10.isDisabled,
+      theme = _ref10.theme;
 
   if (isDisabled) {
     return "\n        color: ".concat({
@@ -79,8 +90,8 @@ var StepsItemText = _styled.default.h3(_templateObject8 || (_templateObject8 = _
     light: theme.colors.neutral.black,
     dark: theme.colors.neutral.white
   }[theme.colorMode], ";\n    ");
-}, function (_ref8) {
-  var isReducedSteps = _ref8.isReducedSteps;
+}, function (_ref11) {
+  var isReducedSteps = _ref11.isReducedSteps;
   return isReducedSteps ? "width: 100%;" : "";
 });
 

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

@@ -1,16 +1,21 @@
-export declare type IStepsProps = {
-    steps: string[];
+export interface StepsControlled {
+    name: string;
+    isCompleted: boolean;
+}
+export declare type StepsItems = string | StepsControlled;
+export interface StepsProps {
+    steps: StepsItems[];
     current: number;
     activeColor?: 'primary' | 'secondary' | 'tertiary';
     fullWidth?: boolean;
     isReducedSteps?: boolean;
     enableCurrentStepChecked?: boolean;
-};
-export declare type IStepIcon = {
+}
+export interface StepIconProps {
     isSelectedStep: boolean;
     hasStartGradient: boolean;
     hasEndGratient: boolean;
     stepPosition: string;
     activeColor: 'primary' | 'secondary' | 'tertiary';
-};
+}
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/types.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,CAAC;AAEF,oBAAY,SAAS,GAAG;IACtB,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;CACnD,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,oBAAY,UAAU,GAAG,MAAM,GAAG,eAAe,CAAC;AAElD,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,MAAM,WAAW,aAAa;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;CACnD"}

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export { default as Icon } from './components/Icon';
 export { type IconName } from './components/Icon/types';
 export { default as IconItem } from './components/IconItem';
 export { ReactPortal } from './components/ReactPortal';
+export { default as Illustration } from './components/Illustration';
 export { default as Label } from './components/Label';
 export { default as List } from './components/List';
 export { Modal } from './components/Modal';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -18,6 +18,7 @@ var _exportNames = {
   Icon: true,
   IconItem: true,
   ReactPortal: true,
+  Illustration: true,
   Label: true,
   List: true,
   Modal: true,
@@ -142,6 +143,12 @@ Object.defineProperty(exports, "IconItem", {
     return _IconItem.default;
   }
 });
+Object.defineProperty(exports, "Illustration", {
+  enumerable: true,
+  get: function get() {
+    return _Illustration.default;
+  }
+});
 Object.defineProperty(exports, "Input", {
   enumerable: true,
   get: function get() {
@@ -321,6 +328,8 @@ var _IconItem = _interopRequireDefault(require("./components/IconItem"));
 
 var _ReactPortal = require("./components/ReactPortal");
 
+var _Illustration = _interopRequireDefault(require("./components/Illustration"));
+
 var _Label = _interopRequireDefault(require("./components/Label"));
 
 var _List = _interopRequireDefault(require("./components/List"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pedidopago/ui",
-  "version": "1.3.7",
+  "version": "1.3.10",
   "description": "Quick build beatiful Pedido Pago apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",