w-design-system 0.0.41 → 0.0.42

package/dist/components/Modal/index.js

@@ -18,12 +18,12 @@ import { IconWrapper } from '../IconWrapper';
 import { ModalContainer, Overlay } from './styles';
 const { colors: { cyan50, shade30 }, } = theme;
 export const Modal = (_a) => {
-    var { children, onClose, footer } = _a, props = __rest(_a, ["children", "onClose", "footer"]);
+    var { title, children, onClose, footer } = _a, props = __rest(_a, ["title", "children", "onClose", "footer"]);
     return ReactDOM.createPortal(React.createElement(React.Fragment, null,
         React.createElement(Overlay, { onClick: onClose }),
         React.createElement(ModalContainer, Object.assign({}, props),
             React.createElement("div", { className: 'modalHeader' },
-                React.createElement(Title, { size: 'medium', bold: true, color: cyan50 }, "Enviar"),
+                React.createElement(Title, { size: 'medium', bold: true, color: cyan50 }, title),
                 React.createElement(IconWrapper, { src: closeSVG, width: '14px', height: '14px', color: shade30, onClick: onClose })),
             React.createElement("div", { className: 'modalContainer' }, children),
             React.createElement("div", { className: 'modalFooter' }, footer))), document.body);

package/dist/components/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,QAAQ,MAAM,WAAW,CAAA;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AACjC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAClD,MAAM,EACJ,MAAM,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,GAC5B,GAAG,KAAK,CAAA;AAET,MAAM,CAAC,MAAM,KAAK,GAAyB,CAAC,EAAuC,EAAE,EAAE;QAA3C,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAY,EAAP,KAAK,cAArC,iCAAuC,CAAF;IAC/E,OAAO,QAAQ,CAAC,YAAY,CAC1B;QACE,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO,GAAI;QAC7B,oBAAC,cAAc,oBAAK,KAAK;YACvB,6BAAK,SAAS,EAAE,aAAa;gBAC3B,oBAAC,KAAK,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,QAAC,KAAK,EAAE,MAAM,aAEjC;gBACR,oBAAC,WAAW,IAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAI,CAC3F;YACN,6BAAK,SAAS,EAAE,gBAAgB,IAAG,QAAQ,CAAO;YAClD,6BAAK,SAAS,EAAE,aAAa,IAAG,MAAM,CAAO,CAC9B,CAChB,EACH,QAAQ,CAAC,IAAI,CACd,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,QAAQ,MAAM,WAAW,CAAA;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AACjC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAClD,MAAM,EACJ,MAAM,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,GAC5B,GAAG,KAAK,CAAA;AAET,MAAM,CAAC,MAAM,KAAK,GAAyB,CAAC,EAA8C,EAAE,EAAE;QAAlD,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAY,EAAP,KAAK,cAA5C,0CAA8C,CAAF;IACtF,OAAO,QAAQ,CAAC,YAAY,CAC1B;QACE,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO,GAAI;QAC7B,oBAAC,cAAc,oBAAK,KAAK;YACvB,6BAAK,SAAS,EAAE,aAAa;gBAC3B,oBAAC,KAAK,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,QAAC,KAAK,EAAE,MAAM,IACtC,KAAK,CACA;gBACR,oBAAC,WAAW,IAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAI,CAC3F;YACN,6BAAK,SAAS,EAAE,gBAAgB,IAAG,QAAQ,CAAO;YAClD,6BAAK,SAAS,EAAE,aAAa,IAAG,MAAM,CAAO,CAC9B,CAChB,EACH,QAAQ,CAAC,IAAI,CACd,CAAA;AACH,CAAC,CAAA"}

package/dist/components/Modal/stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEjD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAI/B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAGC,CAAA;AAE9B,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAA;AAEnC,eAAO,MAAM,UAAU,EAAE,KAoCxB,CAAA"}
+{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEjD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAI/B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAGC,CAAA;AAE9B,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAA;AAEnC,eAAO,MAAM,UAAU,EAAE,KAqCxB,CAAA"}

package/dist/components/Modal/stories.js

@@ -14,7 +14,7 @@ export const Playground = {
         const [isOpen, setIsOpen] = useState(false);
         return (React.createElement(React.Fragment, null,
             React.createElement(Button, { onClick: () => setIsOpen(true) }, "Open Modal"),
-            isOpen && (React.createElement(Modal, { onClose: () => setIsOpen(false), footer: React.createElement(React.Fragment, null,
+            isOpen && (React.createElement(Modal, { title: 'Modal Title', onClose: () => setIsOpen(false), footer: React.createElement(React.Fragment, null,
                     React.createElement(Button, { onClick: () => setIsOpen(true), variant: 'gray' }, "Cancelar"),
                     React.createElement(Button, { onClick: () => setIsOpen(true) }, "Open Modal")) },
                 React.createElement(Paragraph, { size: 'medium', heavyBod: true }, "Modal Title"),

package/dist/components/Modal/stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Modal/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,MAAM,IAAI,GAAuB;IAC/B,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,KAAK;CACY,CAAA;AAE9B,eAAe,IAAI,CAAA;AAInB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,MAAM,EAAE,GAAG,EAAE;QACX,sDAAsD;QACtD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;QAE3C,OAAO,CACL;YACE,oBAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,iBAAqB;YAC1D,MAAM,IAAI,CACT,oBAAC,KAAK,IACJ,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAC/B,MAAM,EACJ;oBACE,oBAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,eAE9C;oBACT,oBAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,iBAAqB,CAC1D;gBAGL,oBAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,wBAEvB;gBACZ,oBAAC,SAAS,ykBAOE,CACN,CACT,CACA,CACJ,CAAA;IACH,CAAC;CACF,CAAA"}
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Modal/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,MAAM,IAAI,GAAuB;IAC/B,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,KAAK;CACY,CAAA;AAE9B,eAAe,IAAI,CAAA;AAInB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,MAAM,EAAE,GAAG,EAAE;QACX,sDAAsD;QACtD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;QAE3C,OAAO,CACL;YACE,oBAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,iBAAqB;YAC1D,MAAM,IAAI,CACT,oBAAC,KAAK,IACJ,KAAK,EAAE,aAAa,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAC/B,MAAM,EACJ;oBACE,oBAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,eAE9C;oBACT,oBAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,iBAAqB,CAC1D;gBAGL,oBAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,wBAEvB;gBACZ,oBAAC,SAAS,ykBAOE,CACN,CACT,CACA,CACJ,CAAA;IACH,CAAC;CACF,CAAA"}

package/dist/components/Paragraph/index.d.ts

@@ -4,6 +4,11 @@ interface ParagraphProps {
     as?: 'span' | 'div' | 'label' | 'p';
     color?: string;
     textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
+    textAlign?: 'left' | 'center' | 'right' | 'justify';
+    lineHeight?: string;
+    letterSpacing?: string;
+    margin?: string;
+    padding?: string;
     children: React.ReactNode;
     lightBod?: boolean;
     semiBod?: boolean;

package/dist/components/Paragraph/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Paragraph/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC/C,EAAE,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,GAAG,CAAA;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,WAAW,GAAG,WAAW,CAAA;IACjE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAkCD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAa9C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Paragraph/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC/C,EAAE,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,GAAG,CAAA;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,WAAW,GAAG,WAAW,CAAA;IACjE,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAA;IACnD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAoCD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA6B9C,CAAA"}

package/dist/components/Paragraph/index.js

@@ -33,17 +33,19 @@ const getFontWeight = (props) => {
     return weights.lightBod;
 };
 const ParagraphStyled = styled.p `
-  margin: 0;
-  padding: 0;
+  margin: ${({ margin = '0' }) => margin};
+  padding: ${({ padding = '0' }) => padding};
   font-size: ${({ size = 'small' }) => sizes[size]};
   font-weight: ${props => getFontWeight(props)};
-  line-height: 140%;
+  line-height: ${({ lineHeight = '140%' }) => lineHeight};
+  letter-spacing: ${({ letterSpacing = 'normal' }) => letterSpacing};
   font-family: 'Nunito Sans', sans-serif;
   color: ${({ color = 'inherit' }) => color};
   text-transform: ${({ textTransform = 'none' }) => textTransform};
+  text-align: ${({ textAlign = 'left' }) => textAlign};
 `;
 export const Paragraph = (_a) => {
-    var { size = 'small', as = 'p', color = 'inherit', textTransform = 'none', children } = _a, props = __rest(_a, ["size", "as", "color", "textTransform", "children"]);
-    return (React.createElement(ParagraphStyled, Object.assign({ as: as, size: size, color: color, textTransform: textTransform }, props), children));
+    var { size = 'small', as = 'p', color = 'inherit', textTransform = 'none', textAlign = 'left', lineHeight = '140%', letterSpacing = 'normal', margin = '0', padding = '0', children } = _a, props = __rest(_a, ["size", "as", "color", "textTransform", "textAlign", "lineHeight", "letterSpacing", "margin", "padding", "children"]);
+    return (React.createElement(ParagraphStyled, Object.assign({ as: as, size: size, color: color, textTransform: textTransform, textAlign: textAlign, lineHeight: lineHeight, letterSpacing: letterSpacing, margin: margin, padding: padding }, props), children));
 };
 //# sourceMappingURL=index.js.map

package/dist/components/Paragraph/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Paragraph/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AActC,MAAM,KAAK,GAAG;IACZ,SAAS,EAAE,MAAM;IACjB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;CACd,CAAA;AAED,MAAM,OAAO,GAAG;IACd,QAAQ,EAAE,GAAG;IACb,OAAO,EAAE,GAAG;IACZ,SAAS,EAAE,GAAG;IACd,QAAQ,EAAE,GAAG;CACd,CAAA;AAED,MAAM,aAAa,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC9C,IAAI,KAAK,CAAC,QAAQ;QAAE,OAAO,OAAO,CAAC,QAAQ,CAAA;IAC3C,IAAI,KAAK,CAAC,SAAS;QAAE,OAAO,OAAO,CAAC,SAAS,CAAA;IAC7C,IAAI,KAAK,CAAC,OAAO;QAAE,OAAO,OAAO,CAAC,OAAO,CAAA;IACzC,OAAO,OAAO,CAAC,QAAQ,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAgB;;;eAGjC,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC;iBACjC,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC;;;WAGnC,CAAC,EAAE,KAAK,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC,KAAK;oBACvB,CAAC,EAAE,aAAa,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,aAAa;CAChE,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAA6B,CAAC,EAOnD,EAAE,EAAE;QAP+C,EAClD,IAAI,GAAG,OAAO,EACd,EAAE,GAAG,GAAG,EACR,KAAK,GAAG,SAAS,EACjB,aAAa,GAAG,MAAM,EACtB,QAAQ,OAET,EADI,KAAK,cAN0C,oDAOnD,CADS;IAER,OAAO,CACL,oBAAC,eAAe,kBAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,IAAM,KAAK,GACvF,QAAQ,CACO,CACnB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Paragraph/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAmBtC,MAAM,KAAK,GAAG;IACZ,SAAS,EAAE,MAAM;IACjB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;CACd,CAAA;AAED,MAAM,OAAO,GAAG;IACd,QAAQ,EAAE,GAAG;IACb,OAAO,EAAE,GAAG;IACZ,SAAS,EAAE,GAAG;IACd,QAAQ,EAAE,GAAG;CACd,CAAA;AAED,MAAM,aAAa,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC9C,IAAI,KAAK,CAAC,QAAQ;QAAE,OAAO,OAAO,CAAC,QAAQ,CAAA;IAC3C,IAAI,KAAK,CAAC,SAAS;QAAE,OAAO,OAAO,CAAC,SAAS,CAAA;IAC7C,IAAI,KAAK,CAAC,OAAO;QAAE,OAAO,OAAO,CAAC,OAAO,CAAA;IACzC,OAAO,OAAO,CAAC,QAAQ,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAgB;YACpC,CAAC,EAAE,MAAM,GAAG,GAAG,EAAE,EAAE,EAAE,CAAC,MAAM;aAC3B,CAAC,EAAE,OAAO,GAAG,GAAG,EAAE,EAAE,EAAE,CAAC,OAAO;eAC5B,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC;iBACjC,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC;iBAC7B,CAAC,EAAE,UAAU,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,UAAU;oBACpC,CAAC,EAAE,aAAa,GAAG,QAAQ,EAAE,EAAE,EAAE,CAAC,aAAa;;WAExD,CAAC,EAAE,KAAK,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC,KAAK;oBACvB,CAAC,EAAE,aAAa,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,aAAa;gBACjD,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;CACpD,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAA6B,CAAC,EAYnD,EAAE,EAAE;QAZ+C,EAClD,IAAI,GAAG,OAAO,EACd,EAAE,GAAG,GAAG,EACR,KAAK,GAAG,SAAS,EACjB,aAAa,GAAG,MAAM,EACtB,SAAS,GAAG,MAAM,EAClB,UAAU,GAAG,MAAM,EACnB,aAAa,GAAG,QAAQ,EACxB,MAAM,GAAG,GAAG,EACZ,OAAO,GAAG,GAAG,EACb,QAAQ,OAET,EADI,KAAK,cAX0C,qHAYnD,CADS;IAER,OAAO,CACL,oBAAC,eAAe,kBACd,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,IACZ,KAAK,GAER,QAAQ,CACO,CACnB,CAAA;AACH,CAAC,CAAA"}

package/dist/components/Paragraph/stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/Paragraph/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAEnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA4BC,CAAA;AAElC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAOpB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAA"}
+{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/Paragraph/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAEnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAgDC,CAAA;AAElC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAOpB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAA"}

package/dist/components/Paragraph/stories.js

@@ -19,6 +19,26 @@ const meta = {
             control: 'color',
             description: 'Select the color of the text',
         },
+        textAlign: {
+            control: { type: 'select', options: ['left', 'center', 'right', 'justify'] },
+            description: 'Select the text alignment',
+        },
+        lineHeight: {
+            control: 'text',
+            description: 'Set the line height of the paragraph',
+        },
+        letterSpacing: {
+            control: 'text',
+            description: 'Set the letter spacing of the paragraph',
+        },
+        margin: {
+            control: 'text',
+            description: 'Set the margin of the paragraph',
+        },
+        padding: {
+            control: 'text',
+            description: 'Set the padding of the paragraph',
+        },
         children: {
             control: 'text',
             description: 'Content of the paragraph',

package/dist/components/Paragraph/stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Paragraph/stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAEnC,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,EAAE;YAC7E,WAAW,EAAE,kCAAkC;SAChD;QACD,EAAE,EAAE;YACF,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,CAAC,EAAE;YACnE,WAAW,EAAE,mCAAmC;SACjD;QACD,KAAK,EAAE;YACL,OAAO,EAAE,OAAO;YAChB,WAAW,EAAE,8BAA8B;SAC5C;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,0BAA0B;SACxC;QACD,OAAO,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,oBAAoB,EAAE;QAClE,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,sBAAsB,EAAE;QACtE,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,qBAAqB,EAAE;KACrE;CAC+B,CAAA;AAElC,eAAe,IAAI,CAAA;AAGnB,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,oDAAoD;KAC/D;CACF,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,IAAI;QACb,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,gDAAgD;KAC3D;CACF,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,IAAI;QACf,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,mDAAmD;KAC9D;CACF,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,iDAAiD;KAC5D;CACF,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,EAAE,EAAE,OAAO;QACX,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,sEAAsE;QAChF,SAAS,EAAE,IAAI;KAChB;CACF,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,gEAAgE;KAC3E;CACF,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,qFAAqF;KAChG;CACF,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,EAAE,EAAE,KAAK;QACT,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,4DAA4D;KACvE;CACF,CAAA"}
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Paragraph/stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/Types/index.d.ts

@@ -39,6 +39,7 @@ export interface BannerTypes extends HTMLAttributes<HTMLDivElement> {
 export interface ModalTypes extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     onClose: () => void;
+    title: string;
     footer?: ReactNode | ReactNode[];
 }
 export interface TabsTypes extends HTMLAttributes<HTMLDivElement> {

package/dist/components/Types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACvE,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAC9D,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAChD,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AACvD,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,0BAA0B,EAC1B,yBAAyB,EACzB,2BAA2B,EAC3B,YAAY,GACb,MAAM,YAAY,CAAA;AAEnB,KAAK,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAA;AACnG,KAAK,mBAAmB,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;AAEtE,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACpF,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;CACpC;AAED,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/E,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC1B;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,cAAc,CAAC;IACjE,OAAO,CAAC,EAAE,mBAAmB,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,QAAQ,EAAE,SAAS,CAAA;IACnB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAA;CACjC;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;CAC1C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACvE,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAC9D,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAChD,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AACvD,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,0BAA0B,EAC1B,yBAAyB,EACzB,2BAA2B,EAC3B,YAAY,GACb,MAAM,YAAY,CAAA;AAEnB,KAAK,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAA;AACnG,KAAK,mBAAmB,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;AAEtE,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACpF,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;CACpC;AAED,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/E,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC1B;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,cAAc,CAAC;IACjE,OAAO,CAAC,EAAE,mBAAmB,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,QAAQ,EAAE,SAAS,CAAA;IACnB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAA;CACjC;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;CAC1C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "w-design-system",
-  "version": "0.0.41",
+  "version": "0.0.42",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {

package/src/components/Modal/index.tsx

@@ -10,14 +10,14 @@ const {
   colors: { cyan50, shade30 },
 } = theme
 
-export const Modal: React.FC<ModalTypes> = ({ children, onClose, footer, ...props }) => {
+export const Modal: React.FC<ModalTypes> = ({ title, children, onClose, footer, ...props }) => {
   return ReactDOM.createPortal(
     <>
       <Overlay onClick={onClose} />
       <ModalContainer {...props}>
         <div className={'modalHeader'}>
           <Title size={'medium'} bold color={cyan50}>
-            Enviar
+            {title}
           </Title>
           <IconWrapper src={closeSVG} width={'14px'} height={'14px'} color={shade30} onClick={onClose} />
         </div>

package/src/components/Modal/stories.tsx

@@ -24,6 +24,7 @@ export const Playground: Story = {
         <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
         {isOpen && (
           <Modal
+            title={'Modal Title'}
             onClose={() => setIsOpen(false)}
             footer={
               <>

package/src/components/Paragraph/index.tsx

@@ -6,6 +6,11 @@ interface ParagraphProps {
   as?: 'span' | 'div' | 'label' | 'p'
   color?: string
   textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase'
+  textAlign?: 'left' | 'center' | 'right' | 'justify'
+  lineHeight?: string
+  letterSpacing?: string
+  margin?: string
+  padding?: string
   children: React.ReactNode
   lightBod?: boolean
   semiBod?: boolean
@@ -35,14 +40,16 @@ const getFontWeight = (props: ParagraphProps) => {
 }
 
 const ParagraphStyled = styled.p<ParagraphProps>`
-  margin: 0;
-  padding: 0;
+  margin: ${({ margin = '0' }) => margin};
+  padding: ${({ padding = '0' }) => padding};
   font-size: ${({ size = 'small' }) => sizes[size]};
   font-weight: ${props => getFontWeight(props)};
-  line-height: 140%;
+  line-height: ${({ lineHeight = '140%' }) => lineHeight};
+  letter-spacing: ${({ letterSpacing = 'normal' }) => letterSpacing};
   font-family: 'Nunito Sans', sans-serif;
   color: ${({ color = 'inherit' }) => color};
   text-transform: ${({ textTransform = 'none' }) => textTransform};
+  text-align: ${({ textAlign = 'left' }) => textAlign};
 `
 
 export const Paragraph: React.FC<ParagraphProps> = ({
@@ -50,11 +57,27 @@ export const Paragraph: React.FC<ParagraphProps> = ({
   as = 'p',
   color = 'inherit',
   textTransform = 'none',
+  textAlign = 'left',
+  lineHeight = '140%',
+  letterSpacing = 'normal',
+  margin = '0',
+  padding = '0',
   children,
   ...props
 }) => {
   return (
-    <ParagraphStyled as={as} size={size} color={color} textTransform={textTransform} {...props}>
+    <ParagraphStyled
+      as={as}
+      size={size}
+      color={color}
+      textTransform={textTransform}
+      textAlign={textAlign}
+      lineHeight={lineHeight}
+      letterSpacing={letterSpacing}
+      margin={margin}
+      padding={padding}
+      {...props}
+    >
       {children}
     </ParagraphStyled>
   )

package/src/components/Paragraph/stories.tsx

@@ -21,6 +21,26 @@ const meta: Meta<typeof Paragraph> = {
       control: 'color',
       description: 'Select the color of the text',
     },
+    textAlign: {
+      control: { type: 'select', options: ['left', 'center', 'right', 'justify'] },
+      description: 'Select the text alignment',
+    },
+    lineHeight: {
+      control: 'text',
+      description: 'Set the line height of the paragraph',
+    },
+    letterSpacing: {
+      control: 'text',
+      description: 'Set the letter spacing of the paragraph',
+    },
+    margin: {
+      control: 'text',
+      description: 'Set the margin of the paragraph',
+    },
+    padding: {
+      control: 'text',
+      description: 'Set the padding of the paragraph',
+    },
     children: {
       control: 'text',
       description: 'Content of the paragraph',

package/src/components/Types/index.ts

@@ -52,6 +52,7 @@ export interface BannerTypes extends HTMLAttributes<HTMLDivElement> {
 export interface ModalTypes extends HTMLAttributes<HTMLDivElement> {
   children: ReactNode
   onClose: () => void
+  title: string
   footer?: ReactNode | ReactNode[]
 }