@mailstep/design-system 0.8.27 → 0.8.28

package/ui/Blocks/SideMenu/types.js

@@ -0,0 +1 @@
+export {};

package/ui/Blocks/SideMenu/utils/constants.js

@@ -1,3 +1,5 @@
-var compactMenuWidth = 75;
-var expandedMenuWidth = 255;
+//#region packages/ui/Blocks/SideMenu/utils/constants.ts
+const compactMenuWidth = 75;
+const expandedMenuWidth = 255;
+//#endregion
 export { compactMenuWidth, expandedMenuWidth };

package/ui/Blocks/Stepper/Stepper.js

@@ -1,53 +1,34 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { StepItem } from "./components/StepItem/index.js";
+import { Container, ItemsWrapper } from "./styles.js";
 import { useEffect, useMemo } from "react";
-import { StepItem } from "./components/StepItem";
-import { Container, ItemsWrapper } from "./styles";
-var Stepper = function Stepper(param) {
-    var items = param.items, activeStep = param.activeStep, hasStepNumbering = param.hasStepNumbering, handleChangeStep = param.handleChangeStep, handleGoToNextStep = param.handleGoToNextStep, isLoading = param.isLoading;
-    var Component = useMemo(function() {
-        var _items_activeStep;
-        return (_items_activeStep = items[activeStep]) === null || _items_activeStep === void 0 ? void 0 : _items_activeStep.component;
-    }, [
-        items,
-        activeStep
-    ]);
-    useEffect(function() {
-        var _items_;
-        if (!!activeStep && !((_items_ = items[activeStep - 1]) === null || _items_ === void 0 ? void 0 : _items_.completed)) {
-            handleChangeStep === null || handleChangeStep === void 0 ? void 0 : handleChangeStep(0)();
-        }
-    }, [
-        items
-    ]);
-    if (!(items === null || items === void 0 ? void 0 : items.length)) return null;
-    return /* @__PURE__ */ jsxs(Container, {
-        children: [
-            /* @__PURE__ */ jsx(ItemsWrapper, {
-                total: items.length,
-                hasComponent: !!Component,
-                children: items.map(function(param, index) {
-                    var title = param.title, disabled = param.disabled, visible = param.visible, completed = param.completed, icon = param.icon;
-                    var _items_;
-                    return /* @__PURE__ */ jsx(StepItem, {
-                        isPrevStepCompleted: (_items_ = items[index - 1]) === null || _items_ === void 0 ? void 0 : _items_.completed,
-                        onClick: handleChangeStep === null || handleChangeStep === void 0 ? void 0 : handleChangeStep(index),
-                        title: title,
-                        index: index,
-                        total: items.length,
-                        activeStep: activeStep,
-                        disabled: disabled,
-                        visible: visible,
-                        completed: completed,
-                        hasStepNumbering: hasStepNumbering,
-                        icon: icon
-                    }, title);
-                })
-            }),
-            Component && /* @__PURE__ */ jsx(Component, {
-                handleGoToNextStep: handleGoToNextStep,
-                isLoading: isLoading
-            })
-        ]
-    });
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/Stepper/Stepper.tsx
+const Stepper = ({ items, activeStep, hasStepNumbering, handleChangeStep, handleGoToNextStep, isLoading }) => {
+	const Component = useMemo(() => items[activeStep]?.component, [items, activeStep]);
+	useEffect(() => {
+		if (!!activeStep && !items[activeStep - 1]?.completed) handleChangeStep?.(0)();
+	}, [items]);
+	if (!items?.length) return null;
+	return /* @__PURE__ */ jsxs(Container, { children: [/* @__PURE__ */ jsx(ItemsWrapper, {
+		total: items.length,
+		hasComponent: !!Component,
+		children: items.map(({ title, disabled, visible, completed, icon }, index) => /* @__PURE__ */ jsx(StepItem, {
+			isPrevStepCompleted: items[index - 1]?.completed,
+			onClick: handleChangeStep?.(index),
+			title,
+			index,
+			total: items.length,
+			activeStep,
+			disabled,
+			visible,
+			completed,
+			hasStepNumbering,
+			icon
+		}, title))
+	}), Component && /* @__PURE__ */ jsx(Component, {
+		handleGoToNextStep,
+		isLoading
+	})] });
 };
+//#endregion
 export { Stepper };

package/ui/Blocks/Stepper/components/StepCircle/index.js

@@ -1,16 +1,17 @@
+import Icon_default from "../../../../Elements/Icon/index.js";
+import { StepCircleContainer } from "./styles.js";
 import { jsx } from "react/jsx-runtime";
-import Icon from "../../../../Elements/Icon";
-import { StepCircleContainer } from "./styles";
-var StepCircle = function StepCircle(param) {
-    var icon = param.icon, isCompleted = param.isCompleted, children = param.children, isActiveStep = param.isActiveStep;
-    return /* @__PURE__ */ jsx(StepCircleContainer, {
-        isCompleted: isCompleted,
-        isActiveStep: isActiveStep,
-        children: icon ? /* @__PURE__ */ jsx(Icon, {
-            icon: icon,
-            size: "12px",
-            fill: isCompleted || isActiveStep ? "red1" : "lightGray6"
-        }) : children
-    });
+//#region packages/ui/Blocks/Stepper/components/StepCircle/index.tsx
+const StepCircle = ({ icon, isCompleted, children, isActiveStep }) => {
+	return /* @__PURE__ */ jsx(StepCircleContainer, {
+		isCompleted,
+		isActiveStep,
+		children: icon ? /* @__PURE__ */ jsx(Icon_default, {
+			icon,
+			size: "12px",
+			fill: isCompleted || isActiveStep ? "red1" : "lightGray6"
+		}) : children
+	});
 };
+//#endregion
 export { StepCircle };

package/ui/Blocks/Stepper/components/StepCircle/styles.js

@@ -1,48 +1,23 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n      box-shadow: 0 0 0 4px ",
-        ";\n    "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  font-size: 16px;\n  font-weight: 600;\n  border-radius: 50%;\n  color: ",
-        ";\n  border: ",
-        ";\n  border-color: ",
-        ";\n  background: white;\n  height: 36px;\n  width: 36px;\n  display: flex;\n  flex: 0 0 36px;\n  justify-content: center;\n  align-items: center;\n\n  ",
-        "\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import styled, { css, th } from "@xstyled/styled-components";
-var StepCircleContainer = styled.div(_templateObject1(), function(param) {
-    var isActiveStep = param.isActiveStep;
-    return isActiveStep ? th.color("red1") : th.color("lightGray6");
-}, function(param) {
-    var isCompleted = param.isCompleted;
-    return "".concat(isCompleted ? 8 : 2, "px solid");
-}, function(param) {
-    var isCompleted = param.isCompleted, isActiveStep = param.isActiveStep;
-    return th.color(isActiveStep || isCompleted ? "red1" : "lightGray6");
-}, function(param) {
-    var isActiveStep = param.isActiveStep;
-    return isActiveStep && css(_templateObject(), th.color("red20"));
-});
+import styled$1, { css, th } from "@xstyled/styled-components";
+//#region packages/ui/Blocks/Stepper/components/StepCircle/styles.ts
+const StepCircleContainer = styled$1.div`
+  font-size: 16px;
+  font-weight: 600;
+  border-radius: 50%;
+  color: ${({ isActiveStep }) => isActiveStep ? th.color("red1") : th.color("lightGray6")};
+  border: ${({ isCompleted }) => `${isCompleted ? 8 : 2}px solid`};
+  border-color: ${({ isCompleted, isActiveStep }) => th.color(isActiveStep || isCompleted ? "red1" : "lightGray6")};
+  background: white;
+  height: 36px;
+  width: 36px;
+  display: flex;
+  flex: 0 0 36px;
+  justify-content: center;
+  align-items: center;
+
+  ${({ isActiveStep }) => isActiveStep && css`
+      box-shadow: 0 0 0 4px ${th.color("red20")};
+    `}
+`;
+//#endregion
 export { StepCircleContainer };

package/ui/Blocks/Stepper/components/StepItem/index.js

@@ -1,62 +1,52 @@
+import { H7, Paragraph2 } from "../../../../Elements/Typography/Typography.js";
+import { StepCircle } from "../StepCircle/index.js";
+import { ContentWrapper, Line, StepItemContainer } from "./styles.js";
+import { x } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Paragraph2, H7 } from "../../../../Elements/Typography/Typography";
-import { StepCircle } from "../StepCircle";
 import { Trans } from "@lingui/react";
-import { x } from "@xstyled/styled-components";
-import isBoolean from "lodash/isBoolean";
-import { Line, StepItemContainer, ContentWrapper } from "./styles";
-var StepItem = function StepItem(param) {
-    var title = param.title, index = param.index, disabled = param.disabled, isPrevStepCompleted = param.isPrevStepCompleted, activeStep = param.activeStep, completed = param.completed, icon = param.icon, _param_hasStepNumbering = param.hasStepNumbering, hasStepNumbering = _param_hasStepNumbering === void 0 ? true : _param_hasStepNumbering, _param_visible = param.visible, visible = _param_visible === void 0 ? true : _param_visible, total = param.total, onClick = param.onClick;
-    var isActiveStep = index === activeStep;
-    var isCompletedStep = isBoolean(completed) ? completed : index < activeStep;
-    return /* @__PURE__ */ jsxs(StepItemContainer, {
-        onClick: !disabled && (isCompletedStep || isPrevStepCompleted) ? onClick : void 0,
-        isActiveStep: isActiveStep,
-        isDisabled: disabled,
-        isVisible: visible,
-        total: total,
-        children: [
-            /* @__PURE__ */ jsx(Line, {
-                isActiveStep: isActiveStep,
-                isCompletedStep: isCompletedStep
-            }),
-            /* @__PURE__ */ jsxs(ContentWrapper, {
-                children: [
-                    /* @__PURE__ */ jsx(StepCircle, {
-                        icon: isCompletedStep ? "check" : icon,
-                        isCompleted: isCompletedStep,
-                        isActiveStep: isActiveStep,
-                        children: index + 1
-                    }),
-                    /* @__PURE__ */ jsxs(x.div, {
-                        alignSelf: "center",
-                        children: [
-                            hasStepNumbering && /* @__PURE__ */ jsx(x.span, {
-                                textTransform: "uppercase",
-                                children: /* @__PURE__ */ jsxs(H7, {
-                                    color: isCompletedStep ? "red1" : "gray1",
-                                    variant: "semiBold",
-                                    mt: 0,
-                                    mb: "4px",
-                                    children: [
-                                        /* @__PURE__ */ jsx(Trans, {
-                                            id: "step",
-                                            message: "Step"
-                                        }),
-                                        ": ",
-                                        index + 1
-                                    ]
-                                })
-                            }),
-                            /* @__PURE__ */ jsx(Paragraph2, {
-                                variant: "medium",
-                                children: title
-                            })
-                        ]
-                    })
-                ]
-            })
-        ]
-    });
+import isBoolean from "lodash/isBoolean.js";
+//#region packages/ui/Blocks/Stepper/components/StepItem/index.tsx
+const StepItem = ({ title, index, disabled, isPrevStepCompleted, activeStep, completed, icon, hasStepNumbering = true, visible = true, total, onClick }) => {
+	const isActiveStep = index === activeStep;
+	const isCompletedStep = isBoolean(completed) ? completed : index < activeStep;
+	return /* @__PURE__ */ jsxs(StepItemContainer, {
+		onClick: !disabled && (isCompletedStep || isPrevStepCompleted) ? onClick : void 0,
+		isActiveStep,
+		isDisabled: disabled,
+		isVisible: visible,
+		total,
+		children: [/* @__PURE__ */ jsx(Line, {
+			isActiveStep,
+			isCompletedStep
+		}), /* @__PURE__ */ jsxs(ContentWrapper, { children: [/* @__PURE__ */ jsx(StepCircle, {
+			icon: isCompletedStep ? "check" : icon,
+			isCompleted: isCompletedStep,
+			isActiveStep,
+			children: index + 1
+		}), /* @__PURE__ */ jsxs(x.div, {
+			alignSelf: "center",
+			children: [hasStepNumbering && /* @__PURE__ */ jsx(x.span, {
+				textTransform: "uppercase",
+				children: /* @__PURE__ */ jsxs(H7, {
+					color: isCompletedStep ? "red1" : "gray1",
+					variant: "semiBold",
+					mt: 0,
+					mb: "4px",
+					children: [
+						/* @__PURE__ */ jsx(Trans, {
+							id: "step",
+							message: "Step"
+						}),
+						": ",
+						index + 1
+					]
+				})
+			}), /* @__PURE__ */ jsx(Paragraph2, {
+				variant: "medium",
+				children: title
+			})]
+		})] })]
+	});
 };
+//#endregion
 export { StepItem };

package/ui/Blocks/Stepper/components/StepItem/styles.js

@@ -1,88 +1,79 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
+import { StepCircleContainer } from "../StepCircle/styles.js";
+import styled$1, { css, th } from "@xstyled/styled-components";
+//#region packages/ui/Blocks/Stepper/components/StepItem/styles.ts
+const responsiveCss = css`
+  width: 100%;
+  padding: 8px;
+
+  h6 {
+    font-size: 10px;
+  }
+
+  p {
+    font-size: 12px;
+  }
+
+  ${StepCircleContainer} {
+    display: flex;
+  }
+
+  @media (min-width: ${({ total }) => total * 150}px) {
+    width: 150px;
+    padding: 16px;
+
+    ${StepCircleContainer} {
+      display: none;
     }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  width: 100%;\n  padding: 8px;\n\n  h6 {\n    font-size: 10px;\n  }\n\n  p {\n    font-size: 12px;\n  }\n\n  ",
-        " {\n    display: flex;\n  }\n\n  @media (min-width: ",
-        "px) {\n    width: 150px;\n    padding: 16px;\n\n    ",
-        " {\n      display: none;\n    }\n  }\n\n  @media (min-width: ",
-        "px) {\n    width: 200px;\n    padding: 24px;\n\n    ",
-        " {\n      display: flex;\n    }\n  }\n\n  @media (min-width: ",
-        "px) {\n    width: 240px;\n\n    p {\n      font-size: 16px;\n    }\n    h6 {\n      font-size: 12px;\n    }\n\n    ",
-        " {\n      display: flex;\n    }\n  }\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  border-radius: 10px;\n  width: 240px;\n  padding: 24px;\n  background-color: ",
-        ";\n  cursor: ",
-        ";\n  display: ",
-        ";\n  ",
-        "\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  height: 4px;\n  border-radius: 8px;\n  width: 100%;\n  background-color: ",
-        ";\n  margin-bottom: 16px;\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  column-gap: 16px;\n  align-items: flex-start;\n"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import { StepCircleContainer } from "../StepCircle/styles";
-import styled, { css, th } from "@xstyled/styled-components";
-var responsiveCss = css(_templateObject(), StepCircleContainer, function(param) {
-    var total = param.total;
-    return total * 150;
-}, StepCircleContainer, function(param) {
-    var total = param.total;
-    return total * 200;
-}, StepCircleContainer, function(param) {
-    var total = param.total;
-    return total * 240;
-}, StepCircleContainer);
-var StepItemContainer = styled.div(_templateObject1(), function(param) {
-    var isActiveStep = param.isActiveStep;
-    return isActiveStep ? th.color("bgLightGray1") : "transparent";
-}, function(param) {
-    var isDisabled = param.isDisabled, onClick = param.onClick;
-    return isDisabled ? "not-allowed" : onClick ? "pointer" : "auto";
-}, function(param) {
-    var isVisible = param.isVisible;
-    return isVisible ? "block" : "none";
-}, responsiveCss);
-var Line = styled.div(_templateObject2(), function(param) {
-    var isActiveStep = param.isActiveStep, isCompletedStep = param.isCompletedStep;
-    if (isActiveStep) return th.color("red1");
-    if (isCompletedStep) return th.color("red20");
-    return th.color("lightGray7");
-});
-var ContentWrapper = styled.div(_templateObject3());
+  }
+
+  @media (min-width: ${({ total }) => total * 200}px) {
+    width: 200px;
+    padding: 24px;
+
+    ${StepCircleContainer} {
+      display: flex;
+    }
+  }
+
+  @media (min-width: ${({ total }) => total * 240}px) {
+    width: 240px;
+
+    p {
+      font-size: 16px;
+    }
+    h6 {
+      font-size: 12px;
+    }
+
+    ${StepCircleContainer} {
+      display: flex;
+    }
+  }
+`;
+const StepItemContainer = styled$1.div`
+  border-radius: 10px;
+  width: 240px;
+  padding: 24px;
+  background-color: ${({ isActiveStep }) => isActiveStep ? th.color("bgLightGray1") : "transparent"};
+  cursor: ${({ isDisabled, onClick }) => isDisabled ? "not-allowed" : onClick ? "pointer" : "auto"};
+  display: ${({ isVisible }) => isVisible ? "block" : "none"};
+  ${responsiveCss}
+`;
+const Line = styled$1.div`
+  height: 4px;
+  border-radius: 8px;
+  width: 100%;
+  background-color: ${({ isActiveStep, isCompletedStep }) => {
+	if (isActiveStep) return th.color("red1");
+	if (isCompletedStep) return th.color("red20");
+	return th.color("lightGray7");
+}};
+  margin-bottom: 16px;
+`;
+const ContentWrapper = styled$1.div`
+  display: flex;
+  column-gap: 16px;
+  align-items: flex-start;
+`;
+//#endregion
 export { ContentWrapper, Line, StepItemContainer };

package/ui/Blocks/Stepper/hooks/useStepper.js

@@ -1,81 +1,33 @@
-function _array_like_to_array(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 _array_with_holes(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _iterable_to_array_limit(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 _non_iterable_rest() {
-    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 _sliced_to_array(arr, i) {
-    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
-}
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(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(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-}
 import { useCallback, useState } from "react";
-var useStepper = function useStepper(param) {
-    var totalSteps = param.totalSteps;
-    var _useState = _sliced_to_array(useState(0), 2), activeStep = _useState[0], setActiveStep = _useState[1];
-    var _useState1 = _sliced_to_array(useState(false), 2), isSuccess = _useState1[0], setSuccess = _useState1[1];
-    var handleReset = useCallback(function() {
-        setActiveStep(0);
-        setSuccess(false);
-    }, []);
-    var handleGoToNextStep = useCallback(function() {
-        if (activeStep + 1 === totalSteps) {
-            handleReset();
-            setSuccess(true);
-            return;
-        }
-        setActiveStep(activeStep + 1);
-    }, [
-        activeStep,
-        totalSteps,
-        handleReset
-    ]);
-    var handleChangeStep = useCallback(function(step) {
-        return function() {
-            setActiveStep(step);
-        };
-    }, []);
-    return {
-        activeStep: activeStep,
-        handleChangeStep: handleChangeStep,
-        handleGoToNextStep: handleGoToNextStep,
-        isSuccess: isSuccess,
-        handleReset: handleReset
-    };
+//#region packages/ui/Blocks/Stepper/hooks/useStepper.ts
+const useStepper = ({ totalSteps }) => {
+	const [activeStep, setActiveStep] = useState(0);
+	const [isSuccess, setSuccess] = useState(false);
+	const handleReset = useCallback(() => {
+		setActiveStep(0);
+		setSuccess(false);
+	}, []);
+	const handleGoToNextStep = useCallback(() => {
+		if (activeStep + 1 === totalSteps) {
+			handleReset();
+			setSuccess(true);
+			return;
+		}
+		setActiveStep(activeStep + 1);
+	}, [
+		activeStep,
+		totalSteps,
+		handleReset
+	]);
+	return {
+		activeStep,
+		handleChangeStep: useCallback((step) => () => {
+			setActiveStep(step);
+		}, []),
+		handleGoToNextStep,
+		isSuccess,
+		handleReset
+	};
 };
+//#endregion
 export { useStepper };

package/ui/Blocks/Stepper/index.js

@@ -1,4 +1,4 @@
-import { Stepper } from "./Stepper";
-import { useStepper } from "./hooks/useStepper";
-import { StepCircle } from "./components/StepCircle";
+import { StepCircle } from "./components/StepCircle/index.js";
+import { Stepper } from "./Stepper.js";
+import { useStepper } from "./hooks/useStepper.js";
 export { StepCircle, Stepper as default, useStepper };