@pedidopago/ui 1.7.4 → 1.7.6

package/dist/components/Steps/styles.js

@@ -3,61 +3,77 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StepsSeparator = exports.StepsItemsDetailsContainer = exports.StepsItemText = exports.StepsItemContainer = exports.StepsContainer = exports.StepsCircle = exports.ReducedStepsMobileContainer = exports.ReducedStepsContainer = void 0;
+exports.StepsSeparator = exports.StepsItemsDetailsContainer = exports.StepsItemText = exports.StepsItemContainer = exports.StepsContainer = exports.StepsCircle = exports.ReducedStepsContainer = void 0;
 var _react = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 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 StepsContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-direction: ", ";\n\n  ", ";\n\n  @media only screen and (min-width: 500px) {\n    flex-direction: row;\n  }\n"])), function (_ref) {
-  var isReducedSteps = _ref.isReducedSteps;
-  return isReducedSteps ? '0' : '12px';
+var StepsContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: ", ";\n  gap: ", ";\n  flex-direction: ", ";\n\n  ", ";\n\n  @media only screen and (min-width: 500px) {\n    flex-direction: ", ";\n  }\n"])), function (_ref) {
+  var fitParent = _ref.fitParent,
+    isReducedSteps = _ref.isReducedSteps;
+  return isReducedSteps ? fitParent ? 'center' : 'start' : 'center';
 }, function (_ref2) {
   var isReducedSteps = _ref2.isReducedSteps;
-  return isReducedSteps ? 'column' : 'row';
+  return isReducedSteps ? '0' : '12px';
 }, function (_ref3) {
-  var fullWidth = _ref3.fullWidth;
+  var isReducedSteps = _ref3.isReducedSteps;
+  return isReducedSteps ? 'column' : 'row';
+}, function (_ref4) {
+  var fullWidth = _ref4.fullWidth;
   return fullWidth ? "width: 100%;" : "width: fit-content;";
+}, function (_ref5) {
+  var fitParent = _ref5.fitParent,
+    isReducedSteps = _ref5.isReducedSteps;
+  return isReducedSteps ? fitParent ? 'row' : 'column' : 'row';
 });
 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: 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,
-    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 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 (_ref6) {
   var theme = _ref6.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 (_ref7) {
+  var theme = _ref7.theme,
+    activeColor = _ref7.activeColor,
+    isFinished = _ref7.isFinished,
+    isCurrent = _ref7.isCurrent;
+  return theme.colors[activeColor] && "\n    background-color: ".concat(isFinished ? theme.colors[activeColor].default : isCurrent ? activeColor === 'error' ? theme.colors.error.blurred : 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 (_ref8) {
+  var theme = _ref8.theme;
   return theme.colors.body.light;
 });
 exports.StepsCircle = StepsCircle;
-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;
+var StepsSeparator = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: 2px;\n  width: 100%;\n  min-width: 40px;\n  background-color: ", ";\n"])), function (_ref9) {
+  var theme = _ref9.theme;
   return theme.colors.neutral.neutral1;
 });
 exports.StepsSeparator = StepsSeparator;
 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;
+}, function (_ref10) {
+  var theme = _ref10.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(_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"])));
+var ReducedStepsContainer = _styled.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  align-items: center;\n  height: max-content;\n"])), function (_ref11) {
+  var fitParent = _ref11.fitParent;
+  return fitParent ? 'column-reverse' : 'row';
+}, function (_ref12) {
+  var fitParent = _ref12.fitParent;
+  return fitParent ? 'center' : 'start';
+});
 exports.ReducedStepsContainer = ReducedStepsContainer;
-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(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n"])));
+var StepsItemsDetailsContainer = _styled.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  width: 100%;\n"])));
 exports.StepsItemsDetailsContainer = StepsItemsDetailsContainer;
-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;
+var StepsItemText = _styled.default.h3(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  font-family: inherit;\n  font-weight: ", ";\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 (_ref13) {
+  var isFinished = _ref13.isFinished,
+    isReducedSteps = _ref13.isReducedSteps;
+  return !isFinished && isReducedSteps ? '400' : '600';
+}, function (_ref14) {
+  var theme = _ref14.theme;
+  return (0, _react.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    @media screen and (min-width: ", ") {\n      font-size: 1.25rem;\n    }\n  "])), theme.breakpoints.sm);
+}, function (_ref15) {
+  var isDisabled = _ref15.isDisabled,
+    theme = _ref15.theme;
   if (isDisabled) {
     return "\n        color: ".concat({
       light: theme.colors.tertiary.hover,
@@ -68,8 +84,8 @@ var StepsItemText = _styled.default.h3(_templateObject10 || (_templateObject10 =
     light: theme.colors.neutral.black,
     dark: theme.colors.neutral.white
   }[theme.colorMode], ";\n    ");
-}, function (_ref11) {
-  var isReducedSteps = _ref11.isReducedSteps;
+}, function (_ref16) {
+  var isReducedSteps = _ref16.isReducedSteps;
   return isReducedSteps ? "width: 100%;" : "";
 });
 exports.StepsItemText = StepsItemText;

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

@@ -6,7 +6,7 @@ export type StepsItems = string | StepsControlled;
 export interface StepsProps {
     steps: StepsItems[];
     current: number;
-    activeColor?: 'primary' | 'secondary' | 'tertiary';
+    activeColor?: 'primary' | 'secondary' | 'tertiary' | 'error';
     fullWidth?: boolean;
     isReducedSteps?: boolean;
     enableCurrentStepChecked?: boolean;
@@ -16,6 +16,6 @@ export interface StepIconProps {
     hasStartGradient: boolean;
     hasEndGratient: boolean;
     stepPosition: string;
-    activeColor: 'primary' | 'secondary' | 'tertiary';
+    activeColor: 'primary' | 'secondary' | 'tertiary' | 'error';
 }
 //# 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,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,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"}
+{"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,MAAM,MAAM,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,GAAG,OAAO,CAAC;IAC7D,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,GAAG,OAAO,CAAC;CAC7D"}