@pedidopago/ui 1.1.4 → 1.2.1

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

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StepIcon = void 0;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _react = require("@emotion/react");
+
+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;
+  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"
+            })]
+          })
+        })]
+      })
+    })
+  });
+};
+
+exports.StepIcon = StepIcon;

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StepIconMobile = void 0;
+
+var _react = require("@emotion/react");
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+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-right: 20px;\n  margin-bottom: -10px;\n"])));
+
+var StepIconMobile = function StepIconMobile(_ref) {
+  var stepPosition = _ref.stepPosition,
+      isSelectedStep = _ref.isSelectedStep,
+      hasStartGradient = _ref.hasStartGradient,
+      hasEndGratient = _ref.hasEndGratient,
+      _ref$activeColor = _ref.activeColor,
+      activeColor = _ref$activeColor === void 0 ? 'primary' : _ref$activeColor;
+  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: "16",
+        height: "81",
+        viewBox: "0 0 16 81",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+          width: "3",
+          height: "32",
+          transform: "translate(6.5 0.785156)",
+          fill: "url(#".concat(stepPosition, ")")
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+          cx: "8",
+          cy: "40.7852",
+          r: "5",
+          fill: "#F8FAF9",
+          stroke: strokeColor,
+          strokeWidth: "6"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+          width: "3",
+          height: "32",
+          transform: "translate(6.5 48.7852)",
+          fill: "url(#".concat(stepPosition, "-2)")
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("defs", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("linearGradient", {
+            id: stepPosition,
+            x1: "1.5",
+            y1: "33.5",
+            x2: "1.5",
+            y2: "5.63098e-10",
+            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: "1.88295",
+            y1: "-0.857085",
+            x2: "1.64628",
+            y2: "41.7156",
+            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: "16",
+        height: "81",
+        viewBox: "0 0 16 81",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+          width: "3",
+          height: "32",
+          transform: "translate(6.5 0.785156)",
+          fill: neutralStrokeColor
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+          cx: "8",
+          cy: "40.7852",
+          r: "7",
+          fill: "#F8FAF9",
+          stroke: "#B7C7C2",
+          strokeWidth: "2"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+          width: "3",
+          height: "32",
+          transform: "translate(6.5 48.7852)",
+          fill: "url(#".concat(stepPosition, ")")
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("defs", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("linearGradient", {
+            id: stepPosition,
+            x1: "1.5",
+            y1: "0",
+            x2: "1.5",
+            y2: "32",
+            gradientUnits: "userSpaceOnUse",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
+              stopColor: neutralStrokeColor
+            }), hasEndGratient && /*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
+              offset: "1",
+              stopColor: neutralStrokeColor,
+              stopOpacity: "0"
+            })]
+          })
+        })]
+      })
+    })
+  });
+};
+
+exports.StepIconMobile = StepIconMobile;

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 }: IStepsProps) => JSX.Element;
-export default Steps;
+/// <reference types="react" />
+import { IStepsProps } from './types';
+declare const Steps: ({ current, steps, activeColor, fullWidth, isReducedSteps, }: IStepsProps) => 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":";AAWA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,QAAA,MAAM,KAAK,+CAA4D,WAAW,gBA2BjF,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"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,gEAMR,WAAW,gBAkFb,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Steps/index.js

@@ -7,22 +7,101 @@ exports.default = void 0;
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
+var _StepIcon = require("./components/StepIcon");
+
+var _StepIconMobile = require("./components/StepIconMobile");
+
+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 _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."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 var Steps = function Steps(_ref) {
   var current = _ref.current,
       steps = _ref.steps,
       _ref$activeColor = _ref.activeColor,
       activeColor = _ref$activeColor === void 0 ? 'primary' : _ref$activeColor,
-      fullWidth = _ref.fullWidth;
+      fullWidth = _ref.fullWidth,
+      _ref$isReducedSteps = _ref.isReducedSteps,
+      isReducedSteps = _ref$isReducedSteps === void 0 ? false : _ref$isReducedSteps;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isMobile = _useState2[0],
+      setIsMobile = _useState2[1];
+
+  var checkWindowSize = function checkWindowSize() {
+    setIsMobile(window.innerWidth < 500);
+  };
+
+  window.addEventListener('resize', checkWindowSize);
+
+  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 {
+      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;
+  };
+
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StepsContainer, {
     fullWidth: fullWidth,
+    isReducedSteps: isReducedSteps,
     children: steps && steps.map(function (step, index) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.StepsItemContainer, {
+      return isReducedSteps ? isMobile ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ReducedStepsMobileContainer, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_StepIconMobile.StepIconMobile, {
+          stepPosition: getStepIconPosition(index),
+          isSelectedStep: index < current,
+          hasStartGradient: checkStartGradient(index),
+          hasEndGratient: checkEndGradient(index),
+          activeColor: activeColor
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StepsItemText, {
+          isReducedSteps: isReducedSteps,
+          children: step
+        })]
+      }, "".concat(step, "-").concat(index)) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ReducedStepsContainer, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StepsItemText, {
+          isReducedSteps: isReducedSteps,
+          children: step
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepIcon.StepIcon, {
+          stepPosition: getStepIconPosition(index),
+          isSelectedStep: index < current,
+          hasStartGradient: checkStartGradient(index),
+          hasEndGratient: checkEndGradient(index),
+          activeColor: activeColor
+        })]
+      }, step) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.StepsItemContainer, {
         id: "simple-step-".concat(index + 1),
         tabIndex: index + 1 === current ? 0 : -1,
         isCurrent: current === index + 1,

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,35 +1,46 @@
-/// <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;
-}, 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';
-    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;
-    isFinished: boolean;
-}, 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;
-}, 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;
+}, 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';
+    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;
+    isFinished: 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;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ReducedStepsMobileContainer: 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 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;
+}, 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":";AAEA,eAAO,MAAM,cAAc;;;;;yGAQ1B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;iBACT,SAAS,GAAG,WAAW,GAAG,UAAU;;;yGAiDlD,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAI1B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;eAClB,OAAO;gBACN,OAAO;yGAWpB,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;yGAItC,CAAC;AAEF,eAAO,MAAM,aAAa;;;iHAMzB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/styles.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,cAAc;;;;;;yGAa1B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;iBACT,SAAS,GAAG,WAAW,GAAG,UAAU;;;yGAiDlD,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAI1B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;eAClB,OAAO;gBACN,OAAO;yGAWpB,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;yGAajC,CAAC;AAEF,eAAO,MAAM,2BAA2B;;;yGAIvC,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;yGAItC,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;iHAWzB,CAAC"}

package/dist/components/Steps/styles.js

@@ -3,38 +3,44 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StepsSeparator = exports.StepsItemsDetailsContainer = exports.StepsItemText = exports.StepsItemContainer = exports.StepsContainer = exports.StepsCircle = void 0;
+exports.StepsSeparator = exports.StepsItemsDetailsContainer = exports.StepsItemText = exports.StepsItemContainer = exports.StepsContainer = exports.StepsCircle = exports.ReducedStepsMobileContainer = exports.ReducedStepsContainer = void 0;
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
 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: 12px;\n\n  ", "\n"])), function (_ref) {
-  var fullWidth = _ref.fullWidth;
+var StepsContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n\n  ", ";\n  width: 100%;\n  @media only screen and (max-width: 500px) {\n    flex-direction: ", ";\n  }\n"])), function (_ref) {
+  var isReducedSteps = _ref.isReducedSteps;
+  return isReducedSteps ? '0' : '12px';
+}, function (_ref2) {
+  var fullWidth = _ref2.fullWidth;
   return fullWidth ? "width: 100%;" : "width: 356px";
+}, function (_ref3) {
+  var isReducedSteps = _ref3.isReducedSteps;
+  return isReducedSteps ? '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: 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 (_ref2) {
-  var theme = _ref2.theme,
-      activeColor = _ref2.activeColor,
-      isFinished = _ref2.isFinished,
-      isCurrent = _ref2.isCurrent;
+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  ");
-}, function (_ref3) {
-  var theme = _ref3.theme;
+}, function (_ref5) {
+  var theme = _ref5.theme;
   return theme.colors.body.light;
 });
 
 exports.StepsCircle = StepsCircle;
 
-var StepsSeparator = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 2px;\n  width: 100%;\n  background-color: ", ";\n"])), function (_ref4) {
-  var theme = _ref4.theme;
+var StepsSeparator = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 2px;\n  width: 100%;\n  background-color: ", ";\n"])), function (_ref6) {
+  var theme = _ref6.theme;
   return theme.colors.neutral.neutral1;
 });
 
@@ -46,13 +52,24 @@ var StepsItemContainer = _styled.default.div(_templateObject4 || (_templateObjec
 
 exports.StepsItemContainer = StepsItemContainer;
 
-var StepsItemsDetailsContainer = _styled.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n"])));
+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"])));
+
+exports.ReducedStepsContainer = ReducedStepsContainer;
+
+var ReducedStepsMobileContainer = _styled.default.div(_templateObject6 || (_templateObject6 = _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"])));
 
 exports.StepsItemsDetailsContainer = StepsItemsDetailsContainer;
 
-var StepsItemText = _styled.default.h3(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-family: inherit;\n  font-weight: 600;\n  font-size: 1.25rem;\n  color: ", ";\n"])), function (_ref5) {
-  var theme = _ref5.theme;
+var StepsItemText = _styled.default.h3(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  font-family: inherit;\n  font-weight: 600;\n  font-size: 1.25rem;\n  color: ", ";\n  @media only screen and (max-width: 500px) {\n    ", ";\n  }\n"])), function (_ref7) {
+  var theme = _ref7.theme;
   return theme.colorMode === 'light' ? theme.colors.neutral.black : theme.colors.neutral.white;
+}, function (_ref8) {
+  var isReducedSteps = _ref8.isReducedSteps;
+  return isReducedSteps ? "width: 100%;" : "";
 });
 
 exports.StepsItemText = StepsItemText;

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

@@ -1,7 +1,15 @@
-export declare type IStepsProps = {
-    steps: string[];
-    current: number;
-    activeColor?: 'primary' | 'secondary' | 'tertiary';
-    fullWidth?: boolean;
-};
+export declare type IStepsProps = {
+    steps: string[];
+    current: number;
+    activeColor?: 'primary' | 'secondary' | 'tertiary';
+    fullWidth?: boolean;
+    isReducedSteps?: boolean;
+};
+export declare type IStepIcon = {
+    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;CACrB,CAAC"}
+{"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;CAC1B,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"}

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

@@ -0,0 +1,8 @@
+export declare const STEP_POSITION: {
+    INITIAL: string;
+    INITIAL_BEFORE_UNSELECTED: string;
+    MIDDLE: string;
+    MIDDLE_BEFORE_UNSELECTED: string;
+    FINAL: string;
+};
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/utils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;;;;CAMzB,CAAC"}

package/dist/components/Steps/utils.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.STEP_POSITION = void 0;
+var STEP_POSITION = {
+  INITIAL: 'INITIAL',
+  INITIAL_BEFORE_UNSELECTED: 'INITIAL_BEFORE_UNSELECTED',
+  MIDDLE: 'MIDDLE',
+  MIDDLE_BEFORE_UNSELECTED: 'MIDDLE_BEFORE_UNSELECTED',
+  FINAL: 'FINAL'
+};
+exports.STEP_POSITION = STEP_POSITION;