w-design-system 0.0.1

package/dist/components/ButtonRound/styles.js

@@ -0,0 +1,134 @@
+import styled, { css } from 'styled-components';
+import { theme } from '../Themes';
+const { colors } = theme;
+const buttonRadiusWrapperIconStyles = (color) => css `
+  .buttonRadiusWrapperIcon {
+    svg {
+      fill: ${color};
+      path {
+        fill: ${color};
+      }
+    }
+  }
+  .buttonRoundBadge {
+    background: ${color};
+  }
+`;
+const colorScheme = {
+    primary: css `
+    background: ${colors.shade10};
+    ${buttonRadiusWrapperIconStyles(colors.shade30)}
+    &:hover {
+      background-color: ${colors.shade20};
+      ${buttonRadiusWrapperIconStyles(colors.cyan40)};
+    }
+    &:active {
+      background-color: ${colors.shade10};
+      ${buttonRadiusWrapperIconStyles(colors.shade30)};
+    }
+  `,
+    secondary: css `
+    background: ${colors.cyan10};
+    &:hover {
+      background-color: ${colors.cyan10};
+      ${buttonRadiusWrapperIconStyles(colors.cyan30)}
+    }
+    &:active {
+      background-color: ${colors.cyan10};
+    }
+    ${buttonRadiusWrapperIconStyles(colors.cyan40)};
+  `,
+    danger: css `
+    background: ${colors.red10};
+    &:hover {
+      background-color: ${colors.red20};
+    }
+    &:active {
+      background-color: ${colors.red10};
+    }
+    ${buttonRadiusWrapperIconStyles(colors.red40)};
+  `,
+    warning: css `
+    background: ${colors.honey10};
+    color: ${colors.honey30};
+    &:hover {
+      background-color: ${colors.honey20};
+    }
+    &:active {
+      background-color: ${colors.honey10};
+    }
+    ${buttonRadiusWrapperIconStyles(colors.honey30)};
+  `,
+    success: css `
+    background: ${colors.mint10};
+    &:hover {
+      background-color: ${colors.mint20};
+    }
+    &:active {
+      background-color: ${colors.mint10};
+    }
+    ${buttonRadiusWrapperIconStyles(colors.mint40)};
+  `,
+    gray: css `
+    background: ${colors.shade10};
+    &:hover {
+      background-color: ${colors.shade20};
+    }
+    &:active {
+      background-color: ${colors.shade10};
+    }
+    ${buttonRadiusWrapperIconStyles(colors.shade40)};
+  `,
+    yellow: css `
+    background: ${colors.yellow10};
+    &:hover {
+      background-color: ${colors.yellow20};
+    }
+    &:active {
+      background-color: ${colors.yellow10};
+    }
+    ${buttonRadiusWrapperIconStyles(colors.yellow30)};
+  `,
+};
+export const ButtonStyled = styled.button `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: 48px;
+  width: 48px;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 140%;
+  border: none;
+  border-radius: 100%;
+  font-family: 'Nunito Sans', sans-serif;
+  transition:
+    color 0.3s,
+    background-color 0.3s,
+    opacity 0.3s;
+  color: white;
+  gap: 12px;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+  ${({ variant = 'primary', outline }) => colorScheme[variant]};
+
+  .buttonRadiusWrapperIcon {
+    margin-top: 4px;
+  }
+  .buttonRoundBadge {
+    box-sizing: border-box;
+    margin-bottom: 24px;
+    margin-left: 54px;
+    position: absolute;
+    width: 26px;
+    height: 26px;
+    border-radius: 100%;
+    font-size: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 2px solid;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/components/ButtonRound/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/ButtonRound/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAGjC,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAA;AACxB,MAAM,6BAA6B,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,GAAG,CAAA;;;cAG9C,KAAK;;gBAEH,KAAK;;;;;kBAKH,KAAK;;CAEtB,CAAA;AACD,MAAM,WAAW,GAAG;IAClB,OAAO,EAAE,GAAG,CAAA;kBACI,MAAM,CAAC,OAAO;MAC1B,6BAA6B,CAAC,MAAM,CAAC,OAAO,CAAC;;0BAEzB,MAAM,CAAC,OAAO;QAChC,6BAA6B,CAAC,MAAM,CAAC,MAAM,CAAC;;;0BAG1B,MAAM,CAAC,OAAO;QAChC,6BAA6B,CAAC,MAAM,CAAC,OAAO,CAAC;;GAElD;IACD,SAAS,EAAE,GAAG,CAAA;kBACE,MAAM,CAAC,MAAM;;0BAEL,MAAM,CAAC,MAAM;QAC/B,6BAA6B,CAAC,MAAM,CAAC,MAAM,CAAC;;;0BAG1B,MAAM,CAAC,MAAM;;MAEjC,6BAA6B,CAAC,MAAM,CAAC,MAAM,CAAC;GAC/C;IACD,MAAM,EAAE,GAAG,CAAA;kBACK,MAAM,CAAC,KAAK;;0BAEJ,MAAM,CAAC,KAAK;;;0BAGZ,MAAM,CAAC,KAAK;;MAEhC,6BAA6B,CAAC,MAAM,CAAC,KAAK,CAAC;GAC9C;IACD,OAAO,EAAE,GAAG,CAAA;kBACI,MAAM,CAAC,OAAO;aACnB,MAAM,CAAC,OAAO;;0BAED,MAAM,CAAC,OAAO;;;0BAGd,MAAM,CAAC,OAAO;;MAElC,6BAA6B,CAAC,MAAM,CAAC,OAAO,CAAC;GAChD;IACD,OAAO,EAAE,GAAG,CAAA;kBACI,MAAM,CAAC,MAAM;;0BAEL,MAAM,CAAC,MAAM;;;0BAGb,MAAM,CAAC,MAAM;;MAEjC,6BAA6B,CAAC,MAAM,CAAC,MAAM,CAAC;GAC/C;IACD,IAAI,EAAE,GAAG,CAAA;kBACO,MAAM,CAAC,OAAO;;0BAEN,MAAM,CAAC,OAAO;;;0BAGd,MAAM,CAAC,OAAO;;MAElC,6BAA6B,CAAC,MAAM,CAAC,OAAO,CAAC;GAChD;IACD,MAAM,EAAE,GAAG,CAAA;kBACK,MAAM,CAAC,QAAQ;;0BAEP,MAAM,CAAC,QAAQ;;;0BAGf,MAAM,CAAC,QAAQ;;MAEnC,6BAA6B,CAAC,MAAM,CAAC,QAAQ,CAAC;GACjD;CACO,CAAA;AAEV,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAkB;;;;;;;;;;;;;;;;;;;YAmB/C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;aACvD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/C,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC;;;;;;;;;;;;;;;;;;;CAmB7D,CAAA"}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+interface IconWrapperProps {
+    src: string;
+    color?: string;
+    width?: string;
+    height?: string;
+    className?: string;
+    onClick?: () => void;
+}
+declare const IconWrapper: React.FC<IconWrapperProps>;
+export default IconWrapper;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/IconWrapper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,UAAU,gBAAgB;IACxB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AA2BD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAI3C,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/components/IconWrapper/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ReactSVG } from 'react-svg';
+const StyledIconWrapper = styled.div `
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  cursor: ${props => (props.onClick ? 'pointer' : 'default')};
+  svg {
+    width: ${props => props.width || '24px'};
+    height: ${props => props.height || '24px'};
+    fill: ${props => props.color || 'black'};
+
+    path {
+      fill: ${props => props.color || 'black'};
+    }
+  }
+`;
+const IconWrapper = ({ src, color, width, height, className, onClick }) => (React.createElement(StyledIconWrapper, { color: color, width: width, height: height, className: className, onClick: onClick },
+    React.createElement(ReactSVG, { src: src })));
+export default IconWrapper;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/IconWrapper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA;AAkBpC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAiB;;;;;;YAMzC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;;aAE/C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,MAAM;cAC7B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,IAAI,MAAM;YACjC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,OAAO;;;cAG7B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,OAAO;;;CAG5C,CAAA;AAED,MAAM,WAAW,GAA+B,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CACrG,oBAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO;IACnG,oBAAC,QAAQ,IAAC,GAAG,EAAE,GAAG,GAAI,CACJ,CACrB,CAAA;AAED,eAAe,WAAW,CAAA"}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ModalTypes } from '../Types';
+declare const Modal: React.FC<ModalTypes>;
+export default Modal;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAMrC,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAiB/B,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/components/Modal/index.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { closeSVG } from '../../assets/icon';
+import { theme } from '../Themes';
+import Title from '../Title';
+import IconWrapper from '../IconWrapper';
+import { ModalContainer, Overlay } from './styles';
+const { colors: { cyan50, shade30 }, } = theme;
+const Modal = (_a) => {
+    var { children, onClose, footer } = _a, props = __rest(_a, ["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(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);
+};
+export default Modal;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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,KAAK,MAAM,UAAU,CAAA;AAC5B,OAAO,WAAW,MAAM,gBAAgB,CAAA;AAExC,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,KAAK,GAAyB,CAAC,EAAuC,EAAE,EAAE;QAA3C,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAY,EAAP,KAAK,cAArC,iCAAuC,CAAF;IACxE,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;AAED,eAAe,KAAK,CAAA"}

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

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Modal from './index';
+declare const meta: Meta<typeof Modal>;
+export default meta;
+type Story = StoryObj<typeof Modal>;
+export declare const Playground: Story;
+//# sourceMappingURL=stories.d.ts.map

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

@@ -0,0 +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,KAAK,MAAM,SAAS,CAAA;AAI3B,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"}

package/dist/components/Modal/stories.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useState } from 'react';
+import Modal from './index';
+import Button from '../Button ';
+import Paragraph from '../Paragraph';
+const meta = {
+    title: 'Components/Modal',
+    component: Modal,
+};
+export default meta;
+export const Playground = {
+    render: () => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        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,
+                    React.createElement(Button, { onClick: () => setIsOpen(true), variant: 'gray' }, "Cancelar"),
+                    React.createElement(Button, { onClick: () => setIsOpen(true) }, "Open Modal")) },
+                React.createElement(Paragraph, { size: 'medium', weight: 800 }, "Modal Title"),
+                React.createElement(Paragraph, null, "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.")))));
+    },
+};
+//# sourceMappingURL=stories.js.map

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

@@ -0,0 +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,KAAK,MAAM,SAAS,CAAA;AAC3B,OAAO,MAAM,MAAM,YAAY,CAAA;AAC/B,OAAO,SAAS,MAAM,cAAc,CAAA;AAEpC,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,MAAM,EAAE,GAAG,kBAE1B;gBACZ,oBAAC,SAAS,ykBAOE,CACN,CACT,CACA,CACJ,CAAA;IACH,CAAC;CACF,CAAA"}

package/dist/components/Modal/styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Overlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ModalContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/styles.ts"],"names":[],"mappings":";AAOA,eAAO,MAAM,OAAO,6NAQnB,CAAA;AACD,eAAO,MAAM,cAAc,6NAkC1B,CAAA"}

package/dist/components/Modal/styles.js

@@ -0,0 +1,48 @@
+import styled from 'styled-components';
+import { theme } from '../Themes';
+const { colors: { shade20 }, zIndex: { z8, z9 }, } = theme;
+export const Overlay = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: ${z8};
+`;
+export const ModalContainer = styled.div `
+  display: flex;
+  min-width: 360px;
+  width: auto;
+  height: auto;
+  padding: 30px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  flex-shrink: 0;
+  border-radius: 24px;
+  border: 1px solid ${shade20};
+  background: white;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  z-index: ${z9};
+
+  .modalContainer {
+    min-height: 100px;
+  }
+  .modalHeader {
+    display: inline-flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+  .modalFooter {
+    display: inline-flex;
+    justify-content: flex-end;
+    width: 100%;
+    gap: 0 24px;
+  }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Modal/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AACjC,MAAM,EACJ,MAAM,EAAE,EAAE,OAAO,EAAE,EACnB,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GACnB,GAAG,KAAK,CAAA;AAET,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;aAOpB,EAAE;CACd,CAAA;AACD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;sBAWlB,OAAO;;;;;;;aAOhB,EAAE;;;;;;;;;;;;;;;;CAgBd,CAAA"}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+interface ParagraphProps {
+    size?: 'x-small' | 'small' | 'medium' | 'large';
+    weight?: 400 | 600 | 700 | 800;
+    as?: 'span' | 'div' | 'label' | 'p';
+    color?: string;
+    children: React.ReactNode;
+}
+declare const Paragraph: React.FC<ParagraphProps>;
+export default Paragraph;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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,MAAM,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;IAC9B,EAAE,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,GAAG,CAAA;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AA0BD,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAMvC,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/components/Paragraph/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+const sizes = {
+    'x-small': '12px',
+    small: '14px',
+    medium: '16px',
+    large: '18px',
+};
+const weights = {
+    400: 400,
+    600: 600,
+    700: 700,
+    800: 800,
+};
+const ParagraphStyled = styled.p `
+  margin: 0;
+  padding: 0;
+  font-size: ${props => sizes[props.size || 'small']};
+  font-weight: ${props => (props.weight ? weights[props.weight] : 400)};
+  line-height: 140%;
+  font-family: 'Nunito Sans', sans-serif;
+  color: ${props => props.color || 'inherit'}; // Aplicando a cor
+`;
+const Paragraph = ({ size = 'small', weight, as = 'p', color, children }) => {
+    return (React.createElement(ParagraphStyled, { as: as, size: size, weight: weight, color: color }, children));
+};
+export default Paragraph;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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;AAUtC,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,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;CACT,CAAA;AAED,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAgB;;;eAGjC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,IAAI,OAAO,CAAC;iBACnC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;;;WAG3D,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,SAAS;CAC3C,CAAA;AAED,MAAM,SAAS,GAA6B,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,MAAM,EAAE,EAAE,GAAG,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IACpG,OAAO,CACL,oBAAC,eAAe,IAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,IAC9D,QAAQ,CACO,CACnB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}

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

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Paragraph from "./index";
+declare const meta: Meta<typeof Paragraph>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const XSmall: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const CustomElement: Story;
+export declare const AllSizes: Story;
+export declare const AllWeights: Story;
+export declare const AllElements: Story;
+//# sourceMappingURL=stories.d.ts.map

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

@@ -0,0 +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,CAAC;AACvD,OAAO,SAAS,MAAM,SAAS,CAAC;AAEhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA6BC,CAAC;AAEnC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAInC,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAOpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC"}

package/dist/components/Paragraph/stories.js

@@ -0,0 +1,95 @@
+import Paragraph from "./index";
+const meta = {
+    title: 'Components/Paragraph',
+    component: Paragraph,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: { type: 'select', options: ['x-small', 'small', 'medium', 'large'] },
+            description: 'Select the size of the paragraph',
+        },
+        weight: {
+            control: { type: 'select', options: [400, 600, 700, 800] },
+            description: 'Select the font weight of the paragraph',
+        },
+        as: {
+            control: { type: 'select', options: ['span', 'div', 'label', 'p'] },
+            description: 'Select the HTML element to render',
+        },
+        color: {
+            control: 'color',
+            description: 'Select the color of the text',
+        },
+        children: {
+            control: 'text',
+            description: 'Content of the paragraph',
+        },
+    },
+};
+export default meta;
+// Define different stories for the Paragraph component
+export const XSmall = {
+    args: {
+        size: 'x-small',
+        color: '#000000',
+        children: 'This is an X-small paragraph.',
+    },
+};
+export const Small = {
+    args: {
+        size: 'small',
+        weight: 600,
+        color: '#333333',
+        children: 'This is a small paragraph with weight 600.',
+    },
+};
+export const Medium = {
+    args: {
+        size: 'medium',
+        weight: 700,
+        color: '#666666',
+        children: 'This is a medium paragraph with weight 700.',
+    },
+};
+export const Large = {
+    args: {
+        size: 'large',
+        color: '#999999',
+        children: 'This is a large paragraph.',
+    },
+};
+export const CustomElement = {
+    args: {
+        size: 'medium',
+        as: 'label',
+        color: '#CC0000',
+        children: 'This is a medium paragraph rendered as a label.',
+    },
+};
+export const AllSizes = {
+    args: {
+        size: 'medium',
+        color: '#000000',
+        children: 'This paragraph can be adjusted to any size using the controls.',
+    },
+};
+export const AllWeights = {
+    args: {
+        size: 'medium',
+        weight: 400,
+        color: '#000000',
+        children: 'This paragraph weight can be adjusted to 400, 600, 700, or 800.',
+    },
+};
+export const AllElements = {
+    args: {
+        size: 'medium',
+        as: 'div',
+        color: '#000000',
+        children: 'This paragraph can be rendered as different HTML elements.',
+    },
+};
+//# sourceMappingURL=stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Paragraph/stories.tsx"],"names":[],"mappings":"AACA,OAAO,SAAS,MAAM,SAAS,CAAC;AAEhC,MAAM,IAAI,GAA2B;IACjC,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE;QACR,MAAM,EAAE,UAAU;KACrB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACN,IAAI,EAAE;YACF,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,EAAE;YAC7E,WAAW,EAAE,kCAAkC;SAClD;QACD,MAAM,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE;YAC1D,WAAW,EAAE,yCAAyC;SACzD;QACD,EAAE,EAAE;YACA,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,CAAC,EAAE;YACnE,WAAW,EAAE,mCAAmC;SACnD;QACD,KAAK,EAAE;YACH,OAAO,EAAE,OAAO;YAChB,WAAW,EAAE,8BAA8B;SAC9C;QACD,QAAQ,EAAE;YACN,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,0BAA0B;SAC1C;KACJ;CAC6B,CAAC;AAEnC,eAAe,IAAI,CAAC;AAGpB,uDAAuD;AAEvD,MAAM,CAAC,MAAM,MAAM,GAAU;IACzB,IAAI,EAAE;QACF,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,+BAA+B;KAC5C;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IACxB,IAAI,EAAE;QACF,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,GAAG;QACX,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,4CAA4C;KACzD;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IACzB,IAAI,EAAE;QACF,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,GAAG;QACX,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,6CAA6C;KAC1D;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IACxB,IAAI,EAAE;QACF,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,4BAA4B;KACzC;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU;IAChC,IAAI,EAAE;QACF,IAAI,EAAE,QAAQ;QACd,EAAE,EAAE,OAAO;QACX,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,iDAAiD;KAC9D;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC3B,IAAI,EAAE;QACF,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,gEAAgE;KAC7E;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAC7B,IAAI,EAAE;QACF,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,GAAG;QACX,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,iEAAiE;KAC9E;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAC9B,IAAI,EAAE;QACF,IAAI,EAAE,QAAQ;QACd,EAAE,EAAE,KAAK;QACT,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,4DAA4D;KACzE;CACJ,CAAC"}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TabsTypes } from '../Types';
+declare const Tabs: React.FC<TabsTypes>;
+export default Tabs;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAGpC,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAmB7B,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/components/Tabs/index.js

@@ -0,0 +1,14 @@
+import React, { useState } from 'react';
+import { TabsContainerStyled, TabStyled } from './styles';
+const Tabs = ({ tabs, defaultActiveTab, onTabChange }) => {
+    const [activeTab, setActiveTab] = useState(defaultActiveTab || tabs[0]);
+    const handleTabClick = (tab) => {
+        setActiveTab(tab);
+        if (onTabChange) {
+            onTabChange(tab);
+        }
+    };
+    return (React.createElement(TabsContainerStyled, null, tabs.map(tab => (React.createElement(TabStyled, { key: tab, active: tab === activeTab, onClick: () => handleTabClick(tab) }, tab)))));
+};
+export default Tabs;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEzD,MAAM,IAAI,GAAwB,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAE,WAAW,EAAE,EAAE,EAAE;IAC5E,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,gBAAgB,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAA;IAEvE,MAAM,cAAc,GAAG,CAAC,GAAW,EAAE,EAAE;QACrC,YAAY,CAAC,GAAG,CAAC,CAAA;QACjB,IAAI,WAAW,EAAE;YACf,WAAW,CAAC,GAAG,CAAC,CAAA;SACjB;IACH,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,mBAAmB,QACjB,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,oBAAC,SAAS,IAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,KAAK,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,CAAC,IAC/E,GAAG,CACM,CACb,CAAC,CACkB,CACvB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/components/Tabs/stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Tabs from './index';
+declare const meta: Meta<typeof Tabs>;
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+export declare const Playground: Story;
+//# sourceMappingURL=stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEjD,OAAO,IAAI,MAAM,SAAS,CAAA;AAG1B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAGC,CAAA;AAE7B,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,UAAU,EAAE,KA0DxB,CAAA"}

package/dist/components/Tabs/stories.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import Paragraph from '../Paragraph';
+import Tabs from './index';
+import { useState } from 'react';
+const meta = {
+    title: 'Components/Tabs',
+    component: Tabs,
+};
+export default meta;
+export const Playground = {
+    render: () => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [activeTab, setActiveTab] = useState('Tab 1');
+        const handleTabChange = (activeTab) => {
+            setActiveTab(activeTab);
+        };
+        return (React.createElement("div", { style: { background: '#e0dede', padding: '50px', height: '100vh' } },
+            React.createElement(Tabs, { tabs: ['Tab 1', 'Tab 2', 'Tab 3'], defaultActiveTab: "Tab 1", onTabChange: handleTabChange }),
+            React.createElement("div", { style: { background: 'white', padding: '50px 20px', borderRadius: '8px', marginTop: '-5px' } },
+                activeTab === 'Tab 1' && (React.createElement(React.Fragment, null,
+                    React.createElement(Paragraph, { size: 'medium', weight: 800 }, "Tab 1"),
+                    React.createElement(Paragraph, null, "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic"))),
+                activeTab === 'Tab 2' && (React.createElement(React.Fragment, null,
+                    React.createElement(Paragraph, { size: 'medium', weight: 800 }, "Tab 2"),
+                    React.createElement(Paragraph, null, "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic"))),
+                activeTab === 'Tab 3' && (React.createElement(React.Fragment, null,
+                    React.createElement(Paragraph, { size: 'medium', weight: 800 }, "Tab 3"),
+                    React.createElement(Paragraph, null, "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic"))))));
+    },
+};
+//# sourceMappingURL=stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Tabs/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,SAAS,MAAM,cAAc,CAAA;AACpC,OAAO,IAAI,MAAM,SAAS,CAAA;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,MAAM,IAAI,GAAsB;IAC9B,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,IAAI;CACY,CAAA;AAE7B,eAAe,IAAI,CAAA;AAInB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,MAAM,EAAE,GAAG,EAAE;QACX,sDAAsD;QACtD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;QACnD,MAAM,eAAe,GAAG,CAAC,SAAiB,EAAE,EAAE;YAC5C,YAAY,CAAC,SAAS,CAAC,CAAA;QACzB,CAAC,CAAA;QAED,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE;YACrE,oBAAC,IAAI,IAAC,IAAI,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,gBAAgB,EAAC,OAAO,EAAC,WAAW,EAAE,eAAe,GAAI;YAClG,6BAAK,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE;gBAC9F,SAAS,KAAK,OAAO,IAAI,CACxB;oBACE,oBAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,YAE1B;oBACZ,oBAAC,SAAS,2UAKE,CACX,CACJ;gBACA,SAAS,KAAK,OAAO,IAAI,CACxB;oBACE,oBAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,YAE1B;oBACZ,oBAAC,SAAS,4oBAQE,CACX,CACJ;gBACA,SAAS,KAAK,OAAO,IAAI,CACxB;oBACE,oBAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,YAE1B;oBACZ,oBAAC,SAAS,2UAKE,CACX,CACJ,CACG,CACF,CACP,CAAA;IACH,CAAC;CACF,CAAA"}

package/dist/components/Tabs/styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const TabsContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TabStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    active: boolean;
+}>> & string;
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/Tabs/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/styles.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,mBAAmB,6NAG/B,CAAA;AAED,eAAO,MAAM,SAAS;YAAwB,OAAO;YAepD,CAAA"}

package/dist/components/Tabs/styles.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+export const TabsContainerStyled = styled.div `
+  display: flex;
+  align-items: flex-end;
+`;
+export const TabStyled = styled.div `
+  padding: 8px 16px;
+  cursor: pointer;
+  border-radius: 24px 24px 0 0;
+  background: white;
+  opacity: ${props => (props.active ? 1 : 0.8)};
+  height: ${props => (props.active ? '45px' : '40px')};
+  min-width: 95px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-family: 'Nunito Sans', sans-serif;
+  font-weight: ${props => (props.active ? 'bold' : 'normal')};
+  color: ${props => (props.active ? 'var(--PrimaryColor, #000)' : 'var(--SecondaryColor, #666)')};
+  transition: opacity 0.3s;
+`;
+//# sourceMappingURL=styles.js.map

package/dist/components/Tabs/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Tabs/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG5C,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAqB;;;;;aAK3C,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;YAClC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;;iBAMpC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;WACjD,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,6BAA6B,CAAC;;CAE/F,CAAA"}