@mailstep/design-system 0.6.60 → 0.6.62-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.60",
+  "version": "0.6.62-beta.0",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/Stepper/components/CheckedCircle/index.d.ts

@@ -0,0 +1,2 @@
+import { type FC } from 'react';
+export declare const CheckedCircle: FC;

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Icon from '../../../../Elements/Icon';
+import { CheckedCircleContainer } from './styles';
+export var CheckedCircle = function () {
+    return (_jsx(CheckedCircleContainer, { children: _jsx(Icon, { icon: "check", size: "12px" }) }));
+};

package/ui/Blocks/Stepper/components/CheckedCircle/styles.d.ts

@@ -0,0 +1 @@
+export declare const CheckedCircleContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

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

@@ -0,0 +1,7 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { th } from '@xstyled/styled-components';
+export var CheckedCircleContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 50%;\n  border: 8px solid ", ";\n  color: ", ";\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  border-radius: 50%;\n  border: 8px solid ", ";\n  color: ", ";\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), th.color('red1'), th.color('red1'));
+var templateObject_1;

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

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Icon from '../../../../Elements/Icon/Icon';
 import { Paragraph2, H7 } from '../../../../Elements/Typography/Typography';
+import { CheckedCircle } from '../CheckedCircle';
 import { Trans } from '@lingui/react';
 import { x } from '@xstyled/styled-components';
 import isBoolean from 'lodash/isBoolean';
-import { Line, StepItemContainer, StepNumber, ContentWrapper, CompletedStep } from './styles';
+import { Line, StepItemContainer, StepNumber, ContentWrapper } from './styles';
 export var StepItem = function (_a) {
     var title = _a.title, index = _a.index, disabled = _a.disabled, activeStep = _a.activeStep, completed = _a.completed, onClick = _a.onClick;
     var isActiveStep = index === activeStep;
     var isCompletedStep = isBoolean(completed) ? completed : index < activeStep;
-    return (_jsxs(StepItemContainer, { onClick: !disabled && isCompletedStep ? onClick : undefined, isActiveStep: isActiveStep, isDisabled: disabled, children: [_jsx(Line, { isActiveStep: isActiveStep, isCompletedStep: isCompletedStep }), _jsxs(ContentWrapper, { children: [isCompletedStep ? (_jsx(CompletedStep, { children: _jsx(Icon, { icon: "check", size: "12px" }) })) : (_jsx(StepNumber, { isActiveStep: isActiveStep, children: index + 1 })), _jsxs("div", { children: [_jsx(x.span, { textTransform: "uppercase", children: _jsxs(H7, { color: "gray1", variant: "semiBold", mt: 0, mb: "4px", children: [_jsx(Trans, { id: "step", message: "Step" }), ": ", index + 1] }) }), _jsx(Paragraph2, { variant: "medium", children: title })] })] })] }));
+    return (_jsxs(StepItemContainer, { onClick: !disabled && isCompletedStep ? onClick : undefined, isActiveStep: isActiveStep, isDisabled: disabled, children: [_jsx(Line, { isActiveStep: isActiveStep, isCompletedStep: isCompletedStep }), _jsxs(ContentWrapper, { children: [isCompletedStep ? _jsx(CheckedCircle, {}) : _jsx(StepNumber, { isActiveStep: isActiveStep, children: index + 1 }), _jsxs("div", { children: [_jsx(x.span, { textTransform: "uppercase", children: _jsxs(H7, { color: "gray1", variant: "semiBold", mt: 0, mb: "4px", children: [_jsx(Trans, { id: "step", message: "Step" }), ": ", index + 1] }) }), _jsx(Paragraph2, { variant: "medium", children: title })] })] })] }));
 };

package/ui/Blocks/Stepper/components/StepItem/styles.d.ts

@@ -10,4 +10,3 @@ export declare const StepNumber: import("styled-components").StyledComponent<"di
     isActiveStep: boolean;
 }, never>;
 export declare const ContentWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const CompletedStep: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

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

@@ -29,5 +29,4 @@ export var StepNumber = styled.div(templateObject_4 || (templateObject_4 = __mak
     return isActiveStep && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      box-shadow: 0 0 0 4px ", ";\n    "], ["\n      box-shadow: 0 0 0 4px ", ";\n    "])), th.color('red20'));
 });
 export var ContentWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  column-gap: 16px;\n"], ["\n  display: flex;\n  column-gap: 16px;\n"])));
-export var CompletedStep = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border-radius: 50%;\n  border: 8px solid ", ";\n  color: ", ";\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  border-radius: 50%;\n  border: 8px solid ", ";\n  color: ", ";\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), th.color('red1'), th.color('red1'));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/ui/Blocks/Stepper/hooks/useStepper.d.ts

@@ -6,6 +6,7 @@ type HookType = (props: Props) => {
     handleChangeStep: (step: number) => () => void;
     handleGoToNextStep: () => void;
     isSuccess: boolean;
+    handleReset: () => void;
 };
 export declare const useStepper: HookType;
 export {};

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

@@ -3,15 +3,20 @@ export var useStepper = function (_a) {
     var totalSteps = _a.totalSteps;
     var _b = useState(0), activeStep = _b[0], setActiveStep = _b[1];
     var _c = useState(false), isSuccess = _c[0], setSuccess = _c[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]);
+    }, [activeStep, totalSteps, handleReset]);
     var handleChangeStep = useCallback(function (step) { return function () {
         setActiveStep(step);
     }; }, []);
-    return { activeStep: activeStep, handleChangeStep: handleChangeStep, handleGoToNextStep: handleGoToNextStep, isSuccess: isSuccess };
+    return { activeStep: activeStep, handleChangeStep: handleChangeStep, handleGoToNextStep: handleGoToNextStep, isSuccess: isSuccess, handleReset: handleReset };
 };

package/ui/Blocks/Stepper/index.d.ts

@@ -1,3 +1,4 @@
 export { Stepper as default } from './Stepper';
 export { useStepper } from './hooks/useStepper';
+export { CheckedCircle } from './components/CheckedCircle';
 export type { StepperItem, StepperPassedDownProps } from './types';

package/ui/Blocks/Stepper/index.js

@@ -1,2 +1,3 @@
 export { Stepper as default } from './Stepper';
 export { useStepper } from './hooks/useStepper';
+export { CheckedCircle } from './components/CheckedCircle';

package/ui/Elements/Icon/icons/Fragile.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+import { SvgProps } from '../types';
+export declare const Fragile: FC<SvgProps>;

package/ui/Elements/Icon/icons/Fragile.js

@@ -0,0 +1,13 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var Fragile = function (props) { return (_jsxs("svg", __assign({ width: "45", height: "70", viewBox: "0 0 45 70", fill: "none", stroke: "black", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [_jsx("path", { d: "M22.5417 45.2083V68.5417", stroke: "black", strokeWidth: "2.91667", strokeMiterlimit: "10", strokeLinejoin: "round" }), _jsx("path", { d: "M10.875 68.5417H34.2083", strokeWidth: "2.91667", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M5.04167 1.45834H40.0417L42.9583 24.7917C42.9583 36.0704 33.8175 45.2083 22.5417 45.2083C11.2658 45.2083 2.125 36.0704 2.125 24.7917L5.04167 1.45834Z", strokeWidth: "2.91667", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M28.3751 1.45834L13.7917 16.0417H28.3751L13.7917 30.625", strokeWidth: "2.91667", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" })] }))); };

package/ui/Elements/Icon/icons/index.d.ts

@@ -61,3 +61,4 @@ export { ToastSuccess } from './ToastSuccess';
 export { ToastError } from './ToastError';
 export { ArrowForward } from './ArrowForward';
 export { Add } from './Add';
+export { Fragile } from './Fragile';

package/ui/Elements/Icon/icons/index.js

@@ -61,3 +61,4 @@ export { ToastSuccess } from './ToastSuccess';
 export { ToastError } from './ToastError';
 export { ArrowForward } from './ArrowForward';
 export { Add } from './Add';
+export { Fragile } from './Fragile';