@mailstep/design-system 0.6.69-beta.1 → 0.6.69-beta.4

package/package.json

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

package/ui/Blocks/Stepper/Stepper.js

@@ -13,7 +13,7 @@ export var Stepper = function (_a) {
     }, [items]);
     if (!(items === null || items === void 0 ? void 0 : items.length))
         return null;
-    return (_jsxs(Container, { children: [_jsx(ItemsWrapper, { total: items.length, children: items.map(function (_a, index) {
+    return (_jsxs(Container, { children: [_jsx(ItemsWrapper, { total: items.length, hasComponent: !!Component, children: items.map(function (_a, index) {
                     var title = _a.title, disabled = _a.disabled, completed = _a.completed, icon = _a.icon;
                     return (_jsx(StepItem, { onClick: handleChangeStep === null || handleChangeStep === void 0 ? void 0 : handleChangeStep(index), title: title, index: index, total: items.length, activeStep: activeStep, disabled: disabled, completed: completed, hasStepNumbering: hasStepNumbering, icon: icon }, title));
                 }) }), Component && _jsx(Component, { handleGoToNextStep: handleGoToNextStep, isLoading: isLoading })] }));

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

@@ -1,4 +1,5 @@
 export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
 export declare const ItemsWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     total: number;
+    hasComponent: boolean;
 }, never>;

package/ui/Blocks/Stepper/styles.js

@@ -4,7 +4,10 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import styled from '@xstyled/styled-components';
 export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  flex-direction: column;\n"])));
-export var ItemsWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  margin-bottom: 36px;\n  flex-direction: column;\n  width: 100%;\n\n  @media (min-width: ", "px) {\n    flex-direction: row;\n    width: auto;\n  }\n"], ["\n  display: flex;\n  margin-bottom: 36px;\n  flex-direction: column;\n  width: 100%;\n\n  @media (min-width: ", "px) {\n    flex-direction: row;\n    width: auto;\n  }\n"])), function (_a) {
+export var ItemsWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  margin-bottom: ", ";\n  flex-direction: column;\n  width: 100%;\n\n  @media (min-width: ", "px) {\n    flex-direction: row;\n    width: auto;\n  }\n"], ["\n  display: flex;\n  margin-bottom: ", ";\n  flex-direction: column;\n  width: 100%;\n\n  @media (min-width: ", "px) {\n    flex-direction: row;\n    width: auto;\n  }\n"])), function (_a) {
+    var hasComponent = _a.hasComponent;
+    return (hasComponent ? '36px' : '0');
+}, function (_a) {
     var total = _a.total;
     return total * 150;
 });

package/ui/Elements/CheckedCircle/index.d.ts

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

package/ui/Elements/CheckedCircle/index.js

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

package/ui/Elements/CheckedCircle/storries/CheckedCircle.stories.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/ui/Elements/CheckedCircle/storries/CheckedCircle.stories.js

@@ -0,0 +1,11 @@
+import { CheckedCircle } from '../';
+var meta = {
+    title: 'Elements/CheckedCircle',
+    component: CheckedCircle,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+export var Default = {
+    args: {}
+};

package/ui/Elements/CheckedCircle/styles.d.ts

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

package/ui/Elements/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  background-color: white;\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  background-color: white;\n"])), th.color('red1'), th.color('red1'));
+var templateObject_1;

package/ui/index.es.js

@@ -51632,7 +51632,9 @@ const Cke = /* @__PURE__ */ Da(wke), xke = ot`
   flex-direction: column;
 `, Pke = q.div`
   display: flex;
-  margin-bottom: 36px;
+  margin-bottom: ${({
+  hasComponent: e
+}) => e ? "36px" : "0"};
   flex-direction: column;
   width: 100%;
 
@@ -51655,7 +51657,7 @@ const Cke = /* @__PURE__ */ Da(wke), xke = ot`
     var c;
     t && !((c = e[t - 1]) != null && c.completed) && (n == null || n(0)());
   }, [e]), e != null && e.length ? /* @__PURE__ */ g.jsxs(Oke, { children: [
-    /* @__PURE__ */ g.jsx(Pke, { total: e.length, children: e.map(({
+    /* @__PURE__ */ g.jsx(Pke, { total: e.length, hasComponent: !!l, children: e.map(({
       title: c,
       disabled: u,
       completed: f,

package/ui/index.umd.js

@@ -3975,7 +3975,7 @@ ${ee.current.stack}
   flex-direction: column;
 `,SOe=$.div`
   display: flex;
-  margin-bottom: 36px;
+  margin-bottom: ${({hasComponent:e})=>e?"36px":"0"};
   flex-direction: column;
   width: 100%;
 
@@ -3983,7 +3983,7 @@ ${ee.current.stack}
     flex-direction: row;
     width: auto;
   }
-`,EOe=({items:e,activeStep:t,hasStepNumbering:r,handleChangeStep:n,handleGoToNextStep:i,isLoading:o})=>{const l=I.useMemo(()=>e[t].component,[e,t]);return I.useEffect(()=>{var u;t&&!((u=e[t-1])!=null&&u.completed)&&(n==null||n(0)())},[e]),e!=null&&e.length?g.jsxs(xOe,{children:[g.jsx(SOe,{total:e.length,children:e.map(({title:u,disabled:c,completed:f,icon:A},p)=>g.jsx(COe,{onClick:n==null?void 0:n(p),title:u,index:p,total:e.length,activeStep:t,disabled:c,completed:f,hasStepNumbering:r,icon:A},u))}),l&&g.jsx(l,{handleGoToNextStep:i,isLoading:o})]}):null},IOe=({totalSteps:e})=>{const[t,r]=I.useState(0),[n,i]=I.useState(!1),o=I.useCallback(()=>{r(0),i(!1)},[]),l=I.useCallback(()=>{if(t+1===e){o(),i(!0);return}r(t+1)},[t,e,o]),u=I.useCallback(c=>()=>{r(c)},[]);return{activeStep:t,handleChangeStep:u,handleGoToNextStep:l,isSuccess:n,handleReset:o}},kOe=$($e.div)`
+`,EOe=({items:e,activeStep:t,hasStepNumbering:r,handleChangeStep:n,handleGoToNextStep:i,isLoading:o})=>{const l=I.useMemo(()=>e[t].component,[e,t]);return I.useEffect(()=>{var u;t&&!((u=e[t-1])!=null&&u.completed)&&(n==null||n(0)())},[e]),e!=null&&e.length?g.jsxs(xOe,{children:[g.jsx(SOe,{total:e.length,hasComponent:!!l,children:e.map(({title:u,disabled:c,completed:f,icon:A},p)=>g.jsx(COe,{onClick:n==null?void 0:n(p),title:u,index:p,total:e.length,activeStep:t,disabled:c,completed:f,hasStepNumbering:r,icon:A},u))}),l&&g.jsx(l,{handleGoToNextStep:i,isLoading:o})]}):null},IOe=({totalSteps:e})=>{const[t,r]=I.useState(0),[n,i]=I.useState(!1),o=I.useCallback(()=>{r(0),i(!1)},[]),l=I.useCallback(()=>{if(t+1===e){o(),i(!0);return}r(t+1)},[t,e,o]),u=I.useCallback(c=>()=>{r(c)},[]);return{activeStep:t,handleChangeStep:u,handleGoToNextStep:l,isSuccess:n,handleReset:o}},kOe=$($e.div)`
   margin-right: 1em;
 `,OOe=$.div`
   display: flex;