w-design-system 0.0.21 → 0.0.23

package/dist/components/Paginate/stories.js

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { fn } from '@storybook/test';
+import { Paginate } from '.';
+const meta = {
+    title: 'Components/Paginate',
+    component: Paginate,
+    tags: ['autodocs'],
+    args: {
+        currentPage: 1,
+        itemCount: 100,
+        itemsPerPage: 10,
+        onChangePage: fn(),
+        onChangeItemsPerPage: fn(),
+    },
+};
+export default meta;
+const NewPaginate = (args) => {
+    const [currentPage, setCurrentPage] = useState(args.currentPage);
+    const [itemCount, setItemCount] = useState(args.itemCount);
+    const [itemsPerPage, setItemsPerPage] = useState(args.itemsPerPage);
+    const handleChangePage = (page) => {
+        setCurrentPage(page);
+        action('changePage')(page);
+    };
+    const handleChangeItemsPerPage = (items) => {
+        setItemsPerPage(items);
+        action('changeItemsPerPage')(items);
+    };
+    return (React.createElement(Paginate, Object.assign({}, args, { currentPage: currentPage, itemCount: itemCount, itemsPerPage: itemsPerPage, onChangePage: handleChangePage, onChangeItemsPerPage: handleChangeItemsPerPage })));
+};
+export const Default = {
+    render: args => {
+        return React.createElement(NewPaginate, Object.assign({}, args));
+    },
+};
+//# sourceMappingURL=stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Paginate/stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AACpC,OAAO,EAAE,QAAQ,EAAiB,MAAM,GAAG,CAAA;AAE3C,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACJ,WAAW,EAAE,CAAC;QACd,SAAS,EAAE,GAAG;QACd,YAAY,EAAE,EAAE;QAChB,YAAY,EAAE,EAAE,EAAE;QAClB,oBAAoB,EAAE,EAAE,EAAE;KAC3B;CACF,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,MAAM,WAAW,GAAG,CAAC,IAAmB,EAAE,EAAE;IAC1C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;IAChE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IAC1D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IAEnE,MAAM,gBAAgB,GAAG,CAAC,IAAY,EAAE,EAAE;QACxC,cAAc,CAAC,IAAI,CAAC,CAAA;QACpB,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAAA;IAC5B,CAAC,CAAA;IAED,MAAM,wBAAwB,GAAG,CAAC,KAAa,EAAE,EAAE;QACjD,eAAe,CAAC,KAAK,CAAC,CAAA;QACtB,MAAM,CAAC,oBAAoB,CAAC,CAAC,KAAK,CAAC,CAAA;IACrC,CAAC,CAAA;IACD,OAAO,CACL,oBAAC,QAAQ,oBACH,IAAI,IACR,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,gBAAgB,EAC9B,oBAAoB,EAAE,wBAAwB,IAC9C,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAA4B;IAC9C,MAAM,EAAE,IAAI,CAAC,EAAE;QACb,OAAO,oBAAC,WAAW,oBAAK,IAAI,EAAI,CAAA;IAClC,CAAC;CACF,CAAA"}

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

@@ -0,0 +1,2 @@
+export declare const Container: 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/Paginate/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Paginate/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,6NA4FrB,CAAA"}

package/dist/components/Paginate/styles.js

@@ -0,0 +1,97 @@
+import styled from 'styled-components';
+import { theme } from '../Themes';
+import { chevronDownSVG } from '../../assets/icon';
+export const Container = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .icon,
+  .icon svg,
+  .icon svg path {
+    fill: ${theme.colors.shade30} !important;
+  }
+
+  .icon:hover,
+  .icon:hover svg,
+  .icon:hover svg path {
+    fill: ${theme.colors.cyan30} !important;
+  }
+
+  .icon-disabled,
+  .icon-disabled svg,
+  .icon-disabled svg path {
+    fill: ${theme.colors.shade20} !important;
+  }
+
+  ul.pagination {
+    display: flex;
+    gap: 1rem;
+    font-family: 'Nunito Sans', sans-serif;
+    font-size: 1rem;
+    color: ${theme.colors.shade40};
+    li {
+      list-style: none;
+    }
+
+    li.page {
+      cursor: pointer;
+    }
+
+    li.page:hover {
+      color: ${theme.colors.cyan30};
+    }
+
+    li.page-active {
+      color: ${theme.colors.cyan30};
+      cursor: default;
+    }
+  }
+
+  .items-per-page-wrapper {
+    display: flex;
+    align-items: center;
+
+    gap: 1rem;
+    font-family: 'Nunito Sans', sans-serif;
+    color: ${theme.colors.shade40};
+
+    select {
+      /* styling */
+      cursor: pointer;
+      background-color: ${theme.colors.shade05};
+      background-image: url(${chevronDownSVG});
+      background-repeat: no-repeat;
+      background-size: 1rem;
+      background-position: right 1rem top calc(50% + 1px);
+      border: 1px solid ${theme.colors.shade20};
+      color: ${theme.colors.shade40};
+      border-radius: 4px;
+      display: inline-block;
+      font: inherit;
+      outline: 0;
+
+      padding: 18px 48px 14px 16px;
+
+      margin: 0;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      -webkit-appearance: none;
+      -moz-appearance: none; /* Firefox */
+      -webkit-appearance: none; /* Safari and Chrome */
+      appearance: none;
+    }
+
+    select:hover {
+      background-color: ${theme.colors.shade10};
+      border: 1px solid ${theme.colors.shade20};
+    }
+
+    select:focus {
+      background-color: ${theme.colors.shade10};
+      border: 1px solid ${theme.colors.shade30};
+    }
+  }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Paginate/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;YAQvB,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;YAMpB,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;;YAMnB,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;;;aAQnB,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;;;;;eAUlB,KAAK,CAAC,MAAM,CAAC,MAAM;;;;eAInB,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;;;;;;;aAWrB,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;0BAKP,KAAK,CAAC,MAAM,CAAC,OAAO;8BAChB,cAAc;;;;0BAIlB,KAAK,CAAC,MAAM,CAAC,OAAO;eAC/B,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;;;;;;;;;;;;;;0BAmBT,KAAK,CAAC,MAAM,CAAC,OAAO;0BACpB,KAAK,CAAC,MAAM,CAAC,OAAO;;;;0BAIpB,KAAK,CAAC,MAAM,CAAC,OAAO;0BACpB,KAAK,CAAC,MAAM,CAAC,OAAO;;;CAG7C,CAAA"}

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

@@ -1,10 +1,14 @@
 import React from 'react';
 interface ParagraphProps {
     size?: 'x-small' | 'small' | 'medium' | 'large';
-    weight?: 400 | 600 | 700 | 800;
     as?: 'span' | 'div' | 'label' | 'p';
     color?: string;
+    textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
     children: React.ReactNode;
+    lightBod?: boolean;
+    semiBod?: boolean;
+    strongBod?: boolean;
+    heavyBod?: boolean;
 }
 export declare const Paragraph: React.FC<ParagraphProps>;
 export {};

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,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,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAM9C,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,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"}

package/dist/components/Paragraph/index.js

@@ -1,3 +1,14 @@
+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 styled from 'styled-components';
 const sizes = {
@@ -7,21 +18,32 @@ const sizes = {
     large: '18px',
 };
 const weights = {
-    400: 400,
-    600: 600,
-    700: 700,
-    800: 800,
+    lightBod: 400,
+    semiBod: 600,
+    strongBod: 700,
+    heavyBod: 800,
+};
+const getFontWeight = (props) => {
+    if (props.heavyBod)
+        return weights.heavyBod;
+    if (props.strongBod)
+        return weights.strongBod;
+    if (props.semiBod)
+        return weights.semiBod;
+    return weights.lightBod;
 };
 const ParagraphStyled = styled.p `
   margin: 0;
   padding: 0;
-  font-size: ${props => sizes[props.size || 'small']};
-  font-weight: ${props => (props.weight ? weights[props.weight] : 400)};
+  font-size: ${({ size = 'small' }) => sizes[size]};
+  font-weight: ${props => getFontWeight(props)};
   line-height: 140%;
   font-family: 'Nunito Sans', sans-serif;
-  color: ${props => props.color || 'inherit'}; // Aplicando a cor
+  color: ${({ color = 'inherit' }) => color};
+  text-transform: ${({ textTransform = 'none' }) => textTransform};
 `;
-export const Paragraph = ({ size = 'small', weight, as = 'p', color, children }) => {
-    return (React.createElement(ParagraphStyled, { as: as, size: size, weight: weight, color: color }, children));
+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));
 };
 //# 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;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,CAAC,MAAM,SAAS,GAA6B,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,MAAM,EAAE,EAAE,GAAG,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC3G,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"}
+{"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"}

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,CA6BC,CAAA;AAElC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAIlC,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,KAO3B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAOxB,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,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"}

package/dist/components/Paragraph/stories.js

@@ -11,62 +11,61 @@ const meta = {
             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', // Adicionando o controle de cor
+            control: 'color',
             description: 'Select the color of the text',
         },
         children: {
             control: 'text',
             description: 'Content of the paragraph',
         },
+        semiBod: { control: 'boolean', description: 'Use semiBod weight' },
+        strongBod: { control: 'boolean', description: 'Use strongBod weight' },
+        heavyBod: { control: 'boolean', description: 'Use heavyBod weight' },
     },
 };
 export default meta;
-// Define different stories for the Paragraph component
 export const XSmall = {
     args: {
         size: 'x-small',
-        color: '#000000', // Definindo a cor para XSmall
-        children: 'This is an X-small paragraph.',
+        color: '#000000',
+        children: 'This is an X-small paragraph with LightBod weight.',
     },
 };
 export const Small = {
     args: {
         size: 'small',
-        weight: 600,
-        color: '#333333', // Definindo a cor para Small
-        children: 'This is a small paragraph with weight 600.',
+        semiBod: true,
+        color: '#333333',
+        children: 'This is a small paragraph with SemiBod weight.',
     },
 };
 export const Medium = {
     args: {
         size: 'medium',
-        weight: 700,
-        color: '#666666', // Definindo a cor para Medium
-        children: 'This is a medium paragraph with weight 700.',
+        strongBod: true,
+        color: '#666666',
+        children: 'This is a medium paragraph with StrongBod weight.',
     },
 };
 export const Large = {
     args: {
         size: 'large',
-        color: '#999999', // Definindo a cor para Large
-        children: 'This is a large paragraph.',
+        color: '#999999',
+        children: 'This is a large paragraph with LightBod weight.',
     },
 };
 export const CustomElement = {
     args: {
         size: 'medium',
         as: 'label',
-        color: '#CC0000', // Definindo a cor para CustomElement
-        children: 'This is a medium paragraph rendered as a label.',
+        color: '#CC0000',
+        children: 'This is a medium paragraph rendered as a label with LightBod weight.',
+        strongBod: true,
     },
 };
 export const AllSizes = {
@@ -79,9 +78,8 @@ export const AllSizes = {
 export const AllWeights = {
     args: {
         size: 'medium',
-        weight: 400,
         color: '#000000',
-        children: 'This paragraph weight can be adjusted to 400, 600, 700, or 800.',
+        children: 'This paragraph weight can be adjusted to LightBod, SemiBod, StrongBod, or HeavyBod.',
     },
 };
 export const AllElements = {

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,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE;YAC1D,WAAW,EAAE,yCAAyC;SACvD;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,EAAE,gCAAgC;YAClD,WAAW,EAAE,8BAA8B;SAC5C;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,0BAA0B;SACxC;KACF;CAC+B,CAAA;AAElC,eAAe,IAAI,CAAA;AAGnB,uDAAuD;AAEvD,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS,EAAE,8BAA8B;QAChD,QAAQ,EAAE,+BAA+B;KAC1C;CACF,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,GAAG;QACX,KAAK,EAAE,SAAS,EAAE,6BAA6B;QAC/C,QAAQ,EAAE,4CAA4C;KACvD;CACF,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,GAAG;QACX,KAAK,EAAE,SAAS,EAAE,8BAA8B;QAChD,QAAQ,EAAE,6CAA6C;KACxD;CACF,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,SAAS,EAAE,6BAA6B;QAC/C,QAAQ,EAAE,4BAA4B;KACvC;CACF,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,EAAE,EAAE,OAAO;QACX,KAAK,EAAE,SAAS,EAAE,qCAAqC;QACvD,QAAQ,EAAE,iDAAiD;KAC5D;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,MAAM,EAAE,GAAG;QACX,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,iEAAiE;KAC5E;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":"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"}

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

@@ -0,0 +1,21 @@
+import React from 'react';
+type Column = {
+    header: string;
+    accessor: string;
+    width?: string;
+    sortable?: boolean;
+    onClick?: (row: any) => void;
+    Cell?: (row: any, handleExpandClick: (id: number) => void) => React.ReactNode;
+    align?: 'left' | 'center' | 'right';
+};
+type TableProps = {
+    columns: Column[] | any;
+    data: any[];
+    height?: string;
+    loading?: boolean;
+    emptyStateMessage?: string;
+    striped?: boolean;
+};
+export declare const Table: React.FC<TableProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAMvC,KAAK,MAAM,GAAG;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC5B,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,iBAAiB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,KAAK,KAAK,CAAC,SAAS,CAAA;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;CACpC,CAAA;AAED,KAAK,UAAU,GAAG;IAChB,OAAO,EAAE,MAAM,EAAE,GAAG,GAAG,CAAA;IACvB,IAAI,EAAE,GAAG,EAAE,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AA+ED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAoGtC,CAAA"}

package/dist/components/Table/index.js

@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Paragraph } from '../Paragraph';
+import { theme } from '../Themes';
+import { ContainerLoading } from '../Loading';
+const TableContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow-x: auto;
+`;
+const StyledTable = styled.table `
+  width: 100%;
+  border-collapse: collapse;
+  height: 100%;
+`;
+const Thead = styled.thead `
+  display: table-header-group;
+  border-bottom: 1px solid #ddd;
+`;
+const Tbody = styled.tbody `
+  display: block;
+  width: 100%;
+  overflow-y: auto;
+  height: ${props => props.height || '100%'};
+`;
+const Tr = styled.tr `
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+`;
+const TrRow = styled.tr `
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+  &:nth-of-type(n + 2) {
+    background-color: ${props => (props.striped ? '#f9f9f9' : 'transparent')};
+  }
+  &:nth-of-type(odd) {
+    background-color: ${props => (props.striped ? '#fff' : 'transparent')};
+  }
+`;
+const Th = styled.th `
+  padding: 10px;
+  text-align: ${props => props.align || 'left'};
+  width: ${props => props.width || 'auto'};
+`;
+const Td = styled.td `
+  padding: 12px;
+  width: ${props => (props === null || props === void 0 ? void 0 : props.width) || 'auto'};
+  text-align: ${props => (props === null || props === void 0 ? void 0 : props.align) || 'left'};
+`;
+const ExpandableRow = styled.div `
+  padding: 8px;
+  min-height: 50px;
+`;
+const LoadingWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+`;
+const EmptyStateWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+`;
+export const Table = ({ columns, data, height = '100%', loading = false, emptyStateMessage = 'No data available', striped = false, }) => {
+    const [expandedRow, setExpandedRow] = useState(null);
+    const handleExpandClick = (id) => {
+        setExpandedRow(expandedRow === id ? null : id);
+    };
+    // @ts-ignore
+    return (React.createElement(TableContainer, null,
+        React.createElement(StyledTable, null,
+            React.createElement(Thead, null,
+                React.createElement(Tr, { striped: striped }, columns.map((col, index) => (React.createElement(Th, { key: index, width: col.width, align: col.align },
+                    React.createElement(Paragraph, { color: theme.colors.shade30, textTransform: 'uppercase' }, col.header)))))),
+            React.createElement(Tbody, { height: height }, loading ? (React.createElement(LoadingWrapper, null,
+                React.createElement(ContainerLoading, { size: 'small' }))) : data.length === 0 ? (React.createElement(EmptyStateWrapper, null,
+                React.createElement(Paragraph, null, emptyStateMessage))) : (data.map((row, rowIndex) => (React.createElement(React.Fragment, { key: row.id },
+                React.createElement(TrRow, { striped: striped }, columns.map((col, colIndex) => (React.createElement(Td, { key: colIndex, width: col === null || col === void 0 ? void 0 : col.width, align: col === null || col === void 0 ? void 0 : col.align }, col.Cell ? (col.Cell(row, handleExpandClick)) : (React.createElement(Paragraph, { color: theme.colors.shade40 }, row[col.accessor])))))),
+                expandedRow === row.id && row.containerColapsed && (React.createElement(ExpandableRow, null, row.containerColapsed(row)))))))))));
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/Table/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAItD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAI/B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAyBC,CAAA;AAE9B,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AA+ElC,eAAO,MAAM,OAAO,EAAE,KAiErB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAA"}

package/dist/components/Table/stories.js

@@ -0,0 +1,159 @@
+import React from 'react';
+import { ButtonRound } from '../ButtonRound';
+import { dumpSVG, editSVG } from '../../assets/icon';
+import { Table } from './index';
+import CardStories from '../CardStories';
+import { Paragraph } from '../Paragraph';
+const meta = {
+    title: 'Components/Table',
+    component: Table,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        columns: {
+            control: 'object',
+            description: 'Array of column definitions',
+        },
+        data: {
+            control: 'object',
+            description: 'Array of data objects',
+        },
+        loading: {
+            control: 'boolean',
+            description: 'Loading state of the table',
+        },
+        emptyStateMessage: {
+            control: 'text',
+            description: 'Message to display when there is no data',
+        },
+    },
+};
+export default meta;
+const columns = [
+    {
+        header: 'id',
+        accessor: 'id',
+        width: 'auto',
+    },
+    {
+        header: 'item',
+        accessor: 'item',
+        width: 'auto',
+        sortable: true,
+    },
+    {
+        header: 'unidades',
+        accessor: 'unidades',
+        width: 'auto',
+        sortable: true,
+    },
+    {
+        header: 'marca/ fabricante',
+        accessor: 'marca_fabricante',
+        width: 'auto',
+        Cell: (row) => (React.createElement("div", { onClick: () => alert('aqui'), style: {
+                background: 'red',
+                color: 'white',
+                padding: '4px, 2px',
+                borderRadius: '8px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            } }, row.marca_fabricante)),
+    },
+    {
+        header: 'modelo',
+        accessor: 'modelo',
+        width: 'auto',
+        sortable: true,
+    },
+    {
+        header: 'quantidade solitada',
+        accessor: 'quantidade_solitada',
+        width: 'auto',
+        sortable: true,
+    },
+    {
+        header: 'valor estimado unitario',
+        accessor: 'valor_estimado_unitario',
+        width: 'auto',
+        sortable: true,
+    },
+    {
+        header: 'valor estimado total',
+        accessor: 'valor_estimado_total',
+        width: 'auto',
+        sortable: true,
+    },
+    {
+        header: 'Actions',
+        accessor: 'valor_estimado_total',
+        width: '100px',
+        align: 'center',
+        Cell: (row, handleExpandClick) => (React.createElement("div", { style: { display: 'flex', gap: '8px', justifyContent: 'center' } },
+            React.createElement(ButtonRound, { icon: editSVG, onClick: () => handleExpandClick(row.id) }),
+            React.createElement(ButtonRound, { icon: dumpSVG, onClick: () => alert(`Delete ID: ${row.id}`), variant: 'danger' }))),
+    },
+];
+export const Default = {
+    args: {
+        height: 'auto',
+        columns: columns,
+        striped: true,
+        loading: false,
+        emptyStateMessage: 'No data available',
+        data: [
+            {
+                id: 1,
+                item: 'Beetlejuice',
+                unidades: '1988',
+                marca_fabricante: 'adidas',
+                modelo: 'modelo',
+                quantidade_solitada: '10000',
+                valor_estimado_unitario: '1000',
+                valor_estimado_total: '10000000',
+                colapsed: true,
+                containerColapsed: ({ item }) => (React.createElement("div", null,
+                    React.createElement(Paragraph, { size: 'large', heavyBod: true }, item),
+                    React.createElement(Paragraph, null, "Esta \u00E9 uma informa\u00E7\u00E3o adicional sobre ."))),
+            },
+            {
+                id: 2,
+                item: 'Beetlejuice',
+                unidades: '1988',
+                marca_fabricante: 'adidas',
+                modelo: 'modelo',
+                quantidade_solitada: '10000',
+                valor_estimado_unitario: '1000',
+                valor_estimado_total: '10000000',
+                containerColapsed: ({ item }) => (React.createElement("div", null,
+                    React.createElement(Paragraph, { size: 'large', heavyBod: true }, item),
+                    React.createElement(Paragraph, null, "Esta \u00E9 uma informa\u00E7\u00E3o adicional sobre ."))),
+            },
+            {
+                id: 3,
+                item: 'Beetlejuice',
+                unidades: '1988',
+                marca_fabricante: 'adidas',
+                modelo: 'modelo',
+                quantidade_solitada: '10000',
+                valor_estimado_unitario: '1000',
+                valor_estimado_total: '10000000',
+                containerColapsed: ({ item }) => (React.createElement("div", null,
+                    React.createElement(Paragraph, { size: 'large', heavyBod: true }, item),
+                    React.createElement(Paragraph, null, "Esta \u00E9 uma informa\u00E7\u00E3o adicional sobre ."))),
+            },
+        ],
+    },
+};
+export const LoadingState = {
+    render: () => (React.createElement(CardStories, { title: 'Tabela', subTitle: 'tabela-loading' },
+        React.createElement("div", { style: { width: '900px', height: '800px' } },
+            React.createElement(Table, { columns: columns, loading: true, height: '100%', data: [] })))),
+};
+export const EmptyState = {
+    args: Object.assign(Object.assign({}, Default.args), { data: [] }),
+};
+//# sourceMappingURL=stories.js.map