@pedidopago/ui 1.7.19-2 → 1.7.20

package/dist/components/Steps/components/StepIcon/index.js

@@ -3,124 +3,48 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StepIcon = void 0;
-var _styled = _interopRequireDefault(require("@emotion/styled"));
+exports.StepIcon = StepIcon;
 var _react = require("@emotion/react");
+var _styles = require("./styles");
+var _utils = require("./utils");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-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 IconContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: 6px;\n\n  @media only screen and (max-width: 500px) {\n    transform: rotate(90deg);\n    margin-top: 0;\n  }\n"])));
-var StepIcon = function StepIcon(_ref) {
-  var isSelectedStep = _ref.isSelectedStep,
-    stepPosition = _ref.stepPosition,
-    hasStartGradient = _ref.hasStartGradient,
-    hasEndGratient = _ref.hasEndGratient,
-    _ref$activeColor = _ref.activeColor,
-    activeColor = _ref$activeColor === void 0 ? 'primary' : _ref$activeColor;
+function StepIcon(_ref) {
+  var _ref$activeColor = _ref.activeColor,
+    activeColor = _ref$activeColor === void 0 ? 'primary' : _ref$activeColor,
+    isFirstStep = _ref.isFirstStep,
+    isLastStep = _ref.isLastStep,
+    isChecked = _ref.isChecked,
+    isSelectedStep = _ref.isSelectedStep,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'row' : _ref$direction;
   var theme = (0, _react.useTheme)();
   var strokeColor = theme.colors[activeColor].default;
   var neutralStrokeColor = theme.colors.neutral.neutral1;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: isSelectedStep ? /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-        width: "180",
-        height: "16",
-        viewBox: "0 0 180 16",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-          width: "82",
-          height: "2",
-          transform: "translate(0 7)",
-          fill: "url(#".concat(stepPosition, ")")
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
-          cx: "90",
-          cy: "8",
-          r: "5",
-          fill: "#F8FAF9",
-          stroke: strokeColor,
-          strokeWidth: "6"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-          width: "82",
-          height: "2",
-          transform: "translate(98 7)",
-          fill: "url(#".concat(stepPosition, "-2)")
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("defs", {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("linearGradient", {
-            id: stepPosition,
-            x1: "82",
-            y1: "0.999868",
-            x2: "0.379632",
-            y2: "0.999918",
-            gradientUnits: "userSpaceOnUse",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
-              stopColor: strokeColor
-            }), hasStartGradient && /*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
-              offset: "1",
-              stopColor: strokeColor,
-              stopOpacity: "0"
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("linearGradient", {
-            id: "".concat(stepPosition, "-2"),
-            x1: "-3.71097e-07",
-            y1: "1.00009",
-            x2: "110",
-            y2: "1.00006",
-            gradientUnits: "userSpaceOnUse",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
-              stopColor: strokeColor
-            }), hasEndGratient && /*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
-              offset: "1",
-              stopColor: strokeColor,
-              stopOpacity: "0"
-            })]
-          })]
-        })]
-      })
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-        width: "180",
-        height: "16",
-        viewBox: "0 0 180 16",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-          width: "82",
-          height: "2",
-          transform: "translate(0 7)",
-          fill: neutralStrokeColor
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
-          cx: "90",
-          cy: "8",
-          r: "7",
-          fill: "#F8FAF9",
-          stroke: "#B7C7C2",
-          strokeWidth: "2"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-          width: "82",
-          height: "2",
-          transform: "translate(98 7)",
-          fill: "url(#".concat(stepPosition, ")")
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("defs", {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("linearGradient", {
-            id: stepPosition,
-            x1: "0",
-            y1: "1.00009",
-            x2: "82",
-            y2: "1.00007",
-            gradientUnits: "userSpaceOnUse",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
-              stopColor: neutralStrokeColor
-            }), hasEndGratient && /*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
-              offset: "1",
-              stopColor: neutralStrokeColor,
-              stopOpacity: "0"
-            })]
-          })
-        })]
-      })
-    })
+  var selectedColor = isChecked ? strokeColor : neutralStrokeColor;
+  var stepsOpacity = (0, _utils.getStepHexOpacity)(isSelectedStep, isFirstStep, isLastStep);
+  var isColumn = direction === 'column';
+  var gradientDirection = isColumn ? 'to bottom' : 'to right';
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.StepIconContainer, {
+    isColumn: isColumn,
+    alignItems: "center",
+    direction: direction,
+    style: {
+      width: isColumn ? '36px' : '100%',
+      height: isColumn ? '78px' : 'auto'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StepStart, {
+      className: "stepLine",
+      color: selectedColor,
+      opacity: stepsOpacity.start,
+      gradientDirection: gradientDirection
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StepCenter, {
+      isChecked: isChecked,
+      color: selectedColor
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StepEnd, {
+      className: "stepLine",
+      color: selectedColor,
+      opacity: stepsOpacity.end,
+      gradientDirection: gradientDirection
+    })]
   });
-};
-exports.StepIcon = StepIcon;
+}

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { StepLineProps } from './types';
+export declare const StepIconContainer: import("@emotion/styled").StyledComponent<import("react").HTMLAttributes<HTMLDivElement> & import("../../../Flex/types").IFlexProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    isColumn: boolean;
+}, {}, {}>;
+export declare const StepStart: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & StepLineProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StepCenter: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    color: string;
+    isChecked: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StepEnd: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & StepLineProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Steps/components/StepIcon/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGxC,eAAO,MAAM,iBAAiB;;;cAA4B,OAAO;UAMhE,CAAC;AAEF,eAAO,MAAM,SAAS;;;yHAGrB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;WAAuB,MAAM;eAAa,OAAO;yGAQvE,CAAC;AAEF,eAAO,MAAM,OAAO;;;yHAGnB,CAAC"}

package/dist/components/Steps/components/StepIcon/styles.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StepStart = exports.StepIconContainer = exports.StepEnd = exports.StepCenter = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Flex = _interopRequireDefault(require("../../../Flex"));
+var _colorCheck = require("../../../../utils/colorCheck");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+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 StepIconContainer = (0, _styled.default)(_Flex.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .stepLine {\n    height: ", ";\n    flex-grow: 2;\n    min-width: ", ";\n  }\n"])), function (_ref) {
+  var isColumn = _ref.isColumn;
+  return isColumn ? 'auto' : '0.125rem';
+}, function (_ref2) {
+  var isColumn = _ref2.isColumn;
+  return isColumn ? '0.188rem' : '5.188rem';
+});
+exports.StepIconContainer = StepIconContainer;
+var StepStart = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n"])), function (_ref3) {
+  var color = _ref3.color,
+    opacity = _ref3.opacity,
+    gradientDirection = _ref3.gradientDirection;
+  return "linear-gradient(".concat(gradientDirection, ", ").concat((0, _colorCheck.parseHexColorToRgba)(color, opacity), ", ").concat(color, ")");
+});
+exports.StepStart = StepStart;
+var StepCenter = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 0.875rem;\n  height: 0.875rem;\n  flex-shrink: 0;\n  border-width: ", ";\n  border-style: solid;\n  border-color: ", ";\n  border-radius: 50%;\n"])), function (_ref4) {
+  var isChecked = _ref4.isChecked;
+  return isChecked ? '0.313rem' : '0.125rem';
+}, function (_ref5) {
+  var color = _ref5.color;
+  return color;
+});
+exports.StepCenter = StepCenter;
+var StepEnd = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background: ", ";\n"])), function (_ref6) {
+  var color = _ref6.color,
+    opacity = _ref6.opacity,
+    gradientDirection = _ref6.gradientDirection;
+  return "linear-gradient(".concat(gradientDirection, ", ").concat(color, ", ").concat((0, _colorCheck.parseHexColorToRgba)(color, opacity), ")");
+});
+exports.StepEnd = StepEnd;

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

@@ -0,0 +1,16 @@
+export type StepDirection = 'row' | 'column';
+export type StepType = 'start' | 'end';
+export interface StepIconProps {
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    activeColor: 'primary' | 'secondary' | 'tertiary' | 'error';
+    isChecked: boolean;
+    isSelectedStep: boolean;
+    direction?: StepDirection;
+}
+export interface StepLineProps {
+    color: string;
+    opacity: number;
+    gradientDirection: string;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Steps/components/StepIcon/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE7C,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;AAEvC,MAAM,WAAW,aAAa;IAC5B,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;IAC5D,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,aAAa,CAAC;CAC3B;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,MAAM,CAAC;CAC3B"}

package/dist/components/Steps/components/StepIcon/types.js

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

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

@@ -0,0 +1,5 @@
+export declare function getStepHexOpacity(isCurrentStep: boolean, isFirstStep: boolean, isLastStep: boolean): {
+    start: number;
+    end: number;
+};
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/Steps/components/StepIcon/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,iBAAiB,CAC/B,aAAa,EAAE,OAAO,EACtB,WAAW,EAAE,OAAO,EACpB,UAAU,EAAE,OAAO,GAClB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAmBhC"}

package/dist/components/Steps/components/StepIcon/utils.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStepHexOpacity = getStepHexOpacity;
+function getStepHexOpacity(isCurrentStep, isFirstStep, isLastStep) {
+  var stepsOpacity = {
+    start: 1,
+    end: 1
+  };
+  if (isFirstStep) {
+    stepsOpacity.start = 0.07;
+  }
+  if (isLastStep) {
+    stepsOpacity.end = 0.07;
+  }
+  if (isCurrentStep && !isLastStep) {
+    stepsOpacity.end = 0.15;
+  }
+  return stepsOpacity;
+}

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

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { StepsProps } from './types';
-declare const Steps: ({ current, steps, activeColor, fullWidth, isReducedSteps, enableCurrentStepChecked, }: StepsProps) => JSX.Element;
-export default Steps;
+/// <reference types="react" />
+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":";AAkBA,OAAO,EAAc,UAAU,EAAE,MAAM,SAAS,CAAC;AAEjD,QAAA,MAAM,KAAK,0FAOR,UAAU,gBAoIZ,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,gBA8GZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Steps/index.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 var _react = require("react");
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _StepIcon = require("./components/StepIcon");
-var _StepIconMobile = require("./components/StepIconMobile");
-var _utils = require("./utils");
 var _useBreakpoints2 = require("../../shared/hooks/useBreakpoints");
 var _styles = require("./styles");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -45,27 +43,6 @@ var Steps = function Steps(_ref) {
     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;
-    } else if (index === current - 1 && index < steps.length - 1) {
-      return _utils.STEP_POSITION.MIDDLE_BEFORE_UNSELECTED;
-    } else if (index === 0) {
-      return _utils.STEP_POSITION.INITIAL;
-    } else if (index === steps.length - 1) {
-      return _utils.STEP_POSITION.FINAL;
-    } else if (index < current) {
-      return _utils.STEP_POSITION.MIDDLE_BEFORE_SELECTED;
-    } else {
-      return _utils.STEP_POSITION.MIDDLE;
-    }
-  };
-  var checkStartGradient = function checkStartGradient(index) {
-    return index === 0;
-  };
-  var checkEndGradient = function checkEndGradient(index) {
-    return index === steps.length - 1 || index === current - 1 && index < steps.length - 1;
-  };
   var handleFitParent = (0, _react.useCallback)(function () {
     var componentElement = stepsContainerRef.current;
     if (componentElement) {
@@ -89,29 +66,27 @@ var Steps = function Steps(_ref) {
     isReducedSteps: isReducedSteps,
     children: steps && steps.map(function (step, index) {
       return isReducedSteps ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ReducedStepsContainer, {
+        fullWidth: fullWidth,
         fitParent: fitParent,
         children: [breakpointPicker({
-          base: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepIconMobile.StepIconMobile, {
-            stepPosition: getStepIconPosition(index),
-            isSelectedStep: index < current,
-            hasStartGradient: checkStartGradient(index),
-            hasEndGratient: checkEndGradient(index),
-            activeColor: activeColor
+          base: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepIcon.StepIcon, {
+            activeColor: activeColor,
+            isFirstStep: index === 0,
+            isLastStep: index === steps.length - 1,
+            isChecked: index < current,
+            isSelectedStep: index === current - 1,
+            direction: "column"
           }),
-          sm: fitParent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepIcon.StepIcon, {
-            stepPosition: getStepIconPosition(index),
-            isSelectedStep: index < current,
-            hasStartGradient: checkStartGradient(index),
-            hasEndGratient: checkEndGradient(index),
-            activeColor: activeColor
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepIconMobile.StepIconMobile, {
-            stepPosition: getStepIconPosition(index),
-            isSelectedStep: index < current,
-            hasStartGradient: checkStartGradient(index),
-            hasEndGratient: checkEndGradient(index),
-            activeColor: activeColor
+          sm: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepIcon.StepIcon, {
+            activeColor: activeColor,
+            isFirstStep: index === 0,
+            isLastStep: index === steps.length - 1,
+            isChecked: index < current,
+            isSelectedStep: index === current - 1,
+            direction: fitParent ? 'row' : 'column'
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StepsItemText, {
+          fitParent: fitParent,
           isFinished: index < current,
           isReducedSteps: isReducedSteps,
           children: handleStepName(step)

package/dist/components/Steps/steps.test.d.ts

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

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

@@ -1,46 +1,48 @@
-/// <reference types="react" />
-export declare const StepsContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    fullWidth?: boolean | undefined;
-    isReducedSteps?: boolean | undefined;
-    fitParent?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StepsCircle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    activeColor: 'primary' | 'secondary' | 'tertiary' | 'error';
-    isFinished?: boolean | undefined;
-    isCurrent?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StepsSeparator: 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 StepsItemContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    isCurrent: boolean;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ReducedStepsContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    fitParent?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StepsItemsDetailsContainer: 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 StepsItemText: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    isReducedSteps?: boolean | undefined;
-    isDisabled?: boolean | undefined;
-    isFinished?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+/// <reference types="react" />
+export declare const StepsContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    fullWidth?: boolean | undefined;
+    isReducedSteps?: boolean | undefined;
+    fitParent?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StepsCircle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    activeColor: 'primary' | 'secondary' | 'tertiary' | 'error';
+    isFinished?: boolean | undefined;
+    isCurrent?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StepsSeparator: 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 StepsItemContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    isCurrent: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ReducedStepsContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    fitParent?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StepsItemsDetailsContainer: 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 StepsItemText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    isReducedSteps?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    isFinished?: boolean | undefined;
+    fitParent?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

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":";AAGA,eAAO,MAAM,cAAc;;;;;;;yGAiB1B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;iBACT,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO;;;yGA+D5D,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAK1B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;eAClB,OAAO;yGAkBnB,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;yGAMjC,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;yGAKtC,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;iHA4CzB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/styles.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,cAAc;;;;;;;yGAiB1B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;iBACT,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO;;;yGA+D5D,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAK1B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;eAClB,OAAO;yGAkBnB,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;yGAQjC,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;yGAKtC,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;iHA2CzB,CAAC"}

package/dist/components/Steps/styles.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 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;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 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: ", ";\n  gap: ", ";\n  flex-direction: ", ";\n\n  ", ";\n\n  @media only screen and (min-width: 500px) {\n    flex-direction: ", ";\n  }\n"])), function (_ref) {
@@ -54,26 +54,37 @@ var StepsItemContainer = _styled.default.div(_templateObject5 || (_templateObjec
   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: ", ";\n  justify-content: ", ";\n  align-items: center;\n  height: max-content;\n"])), function (_ref11) {
+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  width: ", ";\n  margin-top: auto;\n"])), function (_ref11) {
   var fitParent = _ref11.fitParent;
   return fitParent ? 'column-reverse' : 'row';
 }, function (_ref12) {
   var fitParent = _ref12.fitParent;
   return fitParent ? 'center' : 'start';
+}, function (_ref13) {
+  var fitParent = _ref13.fitParent,
+    fullWidth = _ref13.fullWidth;
+  return fitParent ? fullWidth ? '100%' : '11.25rem' : 'auto';
 });
 exports.ReducedStepsContainer = ReducedStepsContainer;
 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(_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;
+var StepsItemText = _styled.default.h3(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  font-family: inherit;\n  font-weight: ", ";\n  font-size: 1rem;\n\n  white-space: ", ";\n\n  @media screen and (min-width: ", ") {\n    text-align: ", ";\n  }\n\n  ", "\n  @media only screen and (max-width: 500px) {\n    ", ";\n    white-space: normal;\n  }\n"])), function (_ref14) {
+  var isFinished = _ref14.isFinished,
+    isReducedSteps = _ref14.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;
+  var isReducedSteps = _ref15.isReducedSteps;
+  return isReducedSteps ? 'normal' : 'nowrap';
+}, function (_ref16) {
+  var theme = _ref16.theme;
+  return theme.breakpoints.sm;
+}, function (_ref17) {
+  var isReducedSteps = _ref17.isReducedSteps,
+    fitParent = _ref17.fitParent;
+  return isReducedSteps && fitParent ? 'center' : 'left';
+}, function (_ref18) {
+  var isDisabled = _ref18.isDisabled,
+    theme = _ref18.theme;
   if (isDisabled) {
     return "\n        color: ".concat({
       light: theme.colors.tertiary.hover,
@@ -84,8 +95,8 @@ var StepsItemText = _styled.default.h3(_templateObject9 || (_templateObject9 = _
     light: theme.colors.neutral.black,
     dark: theme.colors.neutral.white
   }[theme.colorMode], ";\n    ");
-}, function (_ref16) {
-  var isReducedSteps = _ref16.isReducedSteps;
+}, function (_ref19) {
+  var isReducedSteps = _ref19.isReducedSteps;
   return isReducedSteps ? "width: 100%;" : "";
 });
 exports.StepsItemText = StepsItemText;

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

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