@faststore/components 2.0.19-alpha.0 → 2.0.27-alpha.0

package/dist/molecules/Table/TableBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableBody.js","sourceRoot":"","sources":["../../../src/molecules/Table/TableBody.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAczC,MAAM,SAAS,GAAG,UAAU,CAC1B,SAAS,SAAS,CAChB,EAAE,QAAQ,EAAE,MAAM,GAAG,eAAe,EAAE,GAAG,UAAU,EAAE,EACrD,GAAG;IAEH,OAAO,CACL,+BAAO,GAAG,EAAE,GAAG,iBAAe,MAAM,iCAAyB,UAAU,IACpE,QAAQ,CACH,CACT,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/molecules/Table/TableCell.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+declare type TableCellVariant = 'data' | 'header';
+export interface TableCellProps extends HTMLAttributes<HTMLTableCellElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+    /**
+     * Specify if this component should be rendered as a header (`<th>`) or as a data cell (`<td>`).
+     */
+    variant?: TableCellVariant;
+    /**
+     * Defines the cells that the header element (`<th>`) relates to.
+     * @see scope https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
+     */
+    scope?: 'col' | 'row' | 'rowgroup' | 'colgroup';
+    /**
+     * Defines how this component should be aligned.
+     */
+    align?: 'left' | 'center' | 'right';
+}
+declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+export default TableCell;

package/dist/molecules/Table/TableCell.js

@@ -0,0 +1,7 @@
+import React, { forwardRef } from 'react';
+const TableCell = forwardRef(function TableCell({ testId = 'fs-table-cell', children, variant = 'data', scope, align, ...otherProps }, ref) {
+    const Cell = variant === 'header' ? 'th' : 'td';
+    return (React.createElement(Cell, { ref: ref, "data-fs-table-cell": variant, "data-fs-table-cell-align": align, "data-testid": testId, scope: scope, ...otherProps }, children));
+});
+export default TableCell;
+//# sourceMappingURL=TableCell.js.map

package/dist/molecules/Table/TableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.js","sourceRoot":"","sources":["../../../src/molecules/Table/TableCell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAwBzC,MAAM,SAAS,GAAG,UAAU,CAC1B,SAAS,SAAS,CAChB,EACE,MAAM,GAAG,eAAe,EACxB,QAAQ,EACR,OAAO,GAAG,MAAM,EAChB,KAAK,EACL,KAAK,EACL,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,IAAI,GAAG,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;IAE/C,OAAO,CACL,oBAAC,IAAI,IACH,GAAG,EAAE,GAAG,wBACY,OAAO,8BACD,KAAK,iBAClB,MAAM,EACnB,KAAK,EAAE,KAAK,KACR,UAAU,IAEb,QAAQ,CACJ,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/molecules/Table/TableFooter.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+export interface TableFooterProps extends HTMLAttributes<HTMLTableSectionElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+    /**
+     * Children for TableFooter components.
+     */
+    children: React.ReactNode;
+}
+declare const TableFooter: React.ForwardRefExoticComponent<TableFooterProps & React.RefAttributes<HTMLTableSectionElement>>;
+export default TableFooter;

package/dist/molecules/Table/TableFooter.js

@@ -0,0 +1,6 @@
+import React, { forwardRef } from 'react';
+const TableFooter = forwardRef(function TableFooter({ children, testId = 'fs-table-footer', ...otherProps }, ref) {
+    return (React.createElement("tfoot", { ref: ref, "data-testid": testId, "data-fs-table-footer": true, ...otherProps }, children));
+});
+export default TableFooter;
+//# sourceMappingURL=TableFooter.js.map

package/dist/molecules/Table/TableFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableFooter.js","sourceRoot":"","sources":["../../../src/molecules/Table/TableFooter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAczC,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EAAE,QAAQ,EAAE,MAAM,GAAG,iBAAiB,EAAE,GAAG,UAAU,EAAE,EACvD,GAAG;IAEH,OAAO,CACL,+BAAO,GAAG,EAAE,GAAG,iBAAe,MAAM,mCAA2B,UAAU,IACtE,QAAQ,CACH,CACT,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/molecules/Table/TableHead.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+export interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+    /**
+     * Children for TableHead components.
+     */
+    children: React.ReactNode;
+}
+declare const TableHead: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableSectionElement>>;
+export default TableHead;

package/dist/molecules/Table/TableHead.js

@@ -0,0 +1,6 @@
+import React, { forwardRef } from 'react';
+const TableHead = forwardRef(function TableHead({ children, testId = 'fs-table-head', ...otherProps }, ref) {
+    return (React.createElement("thead", { ref: ref, "data-testid": testId, "data-fs-table-head": true, ...otherProps }, children));
+});
+export default TableHead;
+//# sourceMappingURL=TableHead.js.map

package/dist/molecules/Table/TableHead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHead.js","sourceRoot":"","sources":["../../../src/molecules/Table/TableHead.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAczC,MAAM,SAAS,GAAG,UAAU,CAC1B,SAAS,SAAS,CAChB,EAAE,QAAQ,EAAE,MAAM,GAAG,eAAe,EAAE,GAAG,UAAU,EAAE,EACrD,GAAG;IAEH,OAAO,CACL,+BAAO,GAAG,EAAE,GAAG,iBAAe,MAAM,iCAAyB,UAAU,IACpE,QAAQ,CACH,CACT,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/molecules/Table/TableRow.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+    /**
+     * Children for TableRow components.
+     */
+    children: React.ReactNode;
+}
+declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+export default TableRow;

package/dist/molecules/Table/TableRow.js

@@ -0,0 +1,6 @@
+import React, { forwardRef } from 'react';
+const TableRow = forwardRef(function TableRow({ testId = 'fs-table-row', children, ...otherProps }, ref) {
+    return (React.createElement("tr", { ref: ref, "data-fs-table-row": true, "data-testid": testId, ...otherProps }, children));
+});
+export default TableRow;
+//# sourceMappingURL=TableRow.js.map

package/dist/molecules/Table/TableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../src/molecules/Table/TableRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAazC,MAAM,QAAQ,GAAG,UAAU,CACzB,SAAS,QAAQ,CACf,EAAE,MAAM,GAAG,cAAc,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EACpD,GAAG;IAEH,OAAO,CACL,4BAAI,GAAG,EAAE,GAAG,4CAAiC,MAAM,KAAM,UAAU,IAChE,QAAQ,CACN,CACN,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,QAAQ,CAAA"}

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

@@ -0,0 +1,12 @@
+export { default as Table } from './Table';
+export type { TableProps } from './Table';
+export { default as TableRow } from './TableRow';
+export type { TableRowProps } from './TableRow';
+export { default as TableCell } from './TableCell';
+export type { TableCellProps } from './TableCell';
+export { default as TableBody } from './TableBody';
+export type { TableBodyProps } from './TableBody';
+export { default as TableHead } from './TableHead';
+export type { TableHeadProps } from './TableHead';
+export { default as TableFooter } from './TableFooter';
+export type { TableFooterProps } from './TableFooter';

package/dist/molecules/Table/index.js

@@ -0,0 +1,7 @@
+export { default as Table } from './Table';
+export { default as TableRow } from './TableRow';
+export { default as TableCell } from './TableCell';
+export { default as TableBody } from './TableBody';
+export { default as TableHead } from './TableHead';
+export { default as TableFooter } from './TableFooter';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/Table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAG1C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAA;AAGhD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAGlD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAGlD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAGlD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA"}

package/dist/molecules/Tag/Tag.js

@@ -3,7 +3,7 @@ import { Icon } from '../..';
 import { Badge } from '../..';
 import { X } from '../../assets';
 const Tag = forwardRef(function Tag({ testId = 'fs-tag', label, icon, iconButtonLabel, onClose, ...otherProps }, ref) {
-    return (React.createElement(Badge, { ref: ref, "data-fs-tag": true, "data-testid": testId, size: "big", ...otherProps },
+    return (React.createElement(Badge, { ref: ref, "data-fs-tag": true, size: "big", "data-testid": testId, ...otherProps },
         React.createElement("span", { "data-fs-tag-label": true }, label),
         React.createElement("button", { "data-fs-tag-icon-button": true, "aria-label": iconButtonLabel ? iconButtonLabel : 'remove', onClick: onClose },
             React.createElement(Icon, { component: icon ? icon : React.createElement(X, null) }))));

package/dist/molecules/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/molecules/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAC5B,OAAO,EAAE,KAAK,EAAc,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAA;AAyBhC,MAAM,GAAG,GAAG,UAAU,CAA2B,SAAS,GAAG,CAC3D,EAAE,MAAM,GAAG,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,eAAe,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,EAC3E,GAAG;IAEH,OAAO,CACL,oBAAC,KAAK,IACJ,GAAG,EAAE,GAAG,sCAEK,MAAM,EACnB,IAAI,EAAC,KAAK,KACN,UAAU;QAEd,2DAAyB,KAAK,CAAQ;QACtC,+EAEc,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,EACxD,OAAO,EAAE,OAAO;YAEhB,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,oBAAC,CAAC,OAAG,GAAI,CACjC,CACH,CACT,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,GAAG,CAAA"}
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/molecules/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAC5B,OAAO,EAAE,KAAK,EAAc,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAA;AAyBhC,MAAM,GAAG,GAAG,UAAU,CAA2B,SAAS,GAAG,CAC3D,EAAE,MAAM,GAAG,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,eAAe,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,EAC3E,GAAG;IAEH,OAAO,CACL,oBAAC,KAAK,IACJ,GAAG,EAAE,GAAG,uBAER,IAAI,EAAC,KAAK,iBACG,MAAM,KACf,UAAU;QAEd,2DAAyB,KAAK,CAAQ;QACtC,+EAEc,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,EACxD,OAAO,EAAE,OAAO;YAEhB,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,oBAAC,CAAC,OAAG,GAAI,CACjC,CACH,CACT,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,GAAG,CAAA"}

package/dist/molecules/Toggle/Toggle.js

@@ -3,7 +3,7 @@ import { Input, Icon } from './../../';
 import { Checked } from '../../assets';
 const Toggle = forwardRef(function Toggle({ testId = 'fs-toggle', id, disabled, variant = 'horizontal', ...otherProps }, ref) {
     return (React.createElement("div", { "data-fs-toggle": true, "data-fs-toggle-variant": variant, "data-testid": testId },
-        React.createElement(Input, { id: id, ref: ref, role: "switch", type: "checkbox", disabled: disabled, ...otherProps }),
+        React.createElement(Input, { ref: ref, id: id, role: "switch", type: "checkbox", disabled: disabled, ...otherProps }),
         React.createElement("span", { "data-fs-toggle-knob": true },
             React.createElement(Icon, { component: React.createElement(Checked, null) }))));
 });

package/dist/molecules/Toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../src/molecules/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAsBtC,MAAM,MAAM,GAAG,UAAU,CAAgC,SAAS,MAAM,CACtE,EACE,MAAM,GAAG,WAAW,EACpB,EAAE,EACF,QAAQ,EACR,OAAO,GAAG,YAAY,EACtB,GAAG,UAAU,EACD,EACd,GAAG;IAEH,OAAO,CACL,+EAA4C,OAAO,iBAAe,MAAM;QACtE,oBAAC,KAAK,IACJ,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,QAAQ,KACd,UAAU,GACd;QACF;YACE,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAC,OAAO,OAAG,GAAI,CAC3B,CACH,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../src/molecules/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAsBtC,MAAM,MAAM,GAAG,UAAU,CAAgC,SAAS,MAAM,CACtE,EACE,MAAM,GAAG,WAAW,EACpB,EAAE,EACF,QAAQ,EACR,OAAO,GAAG,YAAY,EACtB,GAAG,UAAU,EACD,EACd,GAAG;IAEH,OAAO,CACL,+EAA4C,OAAO,iBAAe,MAAM;QACtE,oBAAC,KAAK,IACJ,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,QAAQ,KACd,UAAU,GACd;QACF;YACE,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAC,OAAO,OAAG,GAAI,CAC3B,CACH,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.19-alpha.0",
+  "version": "2.0.27-alpha.0",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "author": "Emerson Laurentino @emersonlaurentino",
@@ -28,5 +28,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "40266ca0a2dc46a9a3da1632caf5c8a264157efd"
+  "gitHead": "04930d63aa9a06a5481abe53e40f89bc7d03b999"
 }

package/src/assets/Ruler.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import type { FC } from 'react'
+
+// Icon from Phosphor Icons
+const Ruler: FC = () => (
+  <svg
+    id="Ruler"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 256 256"
+    strokeWidth="16"
+    width={24}
+    height={24}
+  >
+    <rect width="256" height="256" fill="none"></rect>
+    <rect x="26.2" y="82.7" width="203.6" height="90.51" rx="8" transform="translate(-53 128) rotate(-45)" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="24"></rect>
+    <line x1="132" y1="60" x2="164" y2="92" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="24"></line>
+    <line x1="96" y1="96" x2="128" y2="128" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="24"></line>
+    <line x1="60" y1="132" x2="92" y2="164" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="24"></line>
+  </svg>
+)
+
+export default Ruler

package/src/assets/index.ts

@@ -2,6 +2,7 @@ export { default as ArrowRight } from './ArrowRight'
 export { default as CaretDown } from './CaretDown'
 export { default as Checked } from './Checked'
 export { default as House } from './House'
+export { default as Ruler } from './Ruler'
 export { default as ShoppingCart } from './ShoppingCart'
 export { default as X } from './X'
 export { default as XCircle } from './XCircle'

package/src/atoms/Badge/Badge.tsx

@@ -49,11 +49,11 @@ const Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(
     <div
       ref={ref}
       data-fs-badge
-      data-testid={testId}
       aria-label={ariaLabel}
       data-fs-badge-variant={counter ? null : variant}
       data-fs-badge-size={size}
       data-fs-badge-counter={counter}
+      data-testid={testId}
       {...otherProps}
     >
       <div data-fs-badge-wrapper>{children}</div>

package/src/atoms/Button/Button.tsx

@@ -54,12 +54,12 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
   return (
     <button
       ref={ref}
-      data-testid={testId}
       data-fs-button
       data-fs-button-inverse={inverse}
       data-fs-button-size={size}
       data-fs-button-variant={variant}
       disabled={disabled}
+      data-testid={testId}
       {...otherProps}
     >
       {icon && iconPosition === 'left' && <Icon component={icon} />}

package/src/atoms/Icon/Icon.tsx

@@ -2,14 +2,14 @@ import type { HTMLAttributes, ReactNode } from 'react'
 import React, { forwardRef } from 'react'
 
 export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
-  /**
-   * A React component that will be rendered as an icon.
-   */
-  component: ReactNode
   /**
    * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
    */
   testId?: string
+  /**
+   * A React component that will be rendered as an icon.
+   */
+  component: ReactNode
 }
 
 const Icon = forwardRef<HTMLSpanElement, IconProps>(function Button(

package/src/atoms/Link/Link.tsx

@@ -8,12 +8,12 @@ type LinkBaseProps = {
    */
   testId?: string
   /**
- * Specifies the component variant.
- */
+   * Specifies the component variant.
+   */
   variant?: 'default' | 'display' | 'inline'
   /**
-  * Defines use of inverted color.
-  */
+   * Defines use of inverted color.
+   */
   inverse?: boolean
   /**
    * Defines size os element
@@ -23,10 +23,8 @@ type LinkBaseProps = {
 
 export type LinkElementType = ElementType
 
-export type LinkProps<C extends LinkElementType = 'a'> = PolymorphicComponentPropsWithRef<
-  C,
-  LinkBaseProps
->
+export type LinkProps<C extends LinkElementType = 'a'> =
+  PolymorphicComponentPropsWithRef<C, LinkBaseProps>
 
 type LinkComponent = <C extends LinkElementType = 'a'>(
   props: LinkProps<C>
@@ -35,20 +33,27 @@ type LinkComponent = <C extends LinkElementType = 'a'>(
 const Link: LinkComponent = forwardRef(function Link<
   C extends LinkElementType = 'a'
 >(
-  { as, children, variant = 'default', size="regular", inverse, testId = 'fs-link', ...otherProps }: LinkProps<C>,
+  {
+    as,
+    children,
+    variant = 'default',
+    size = 'regular',
+    inverse,
+    testId = 'fs-link',
+    ...otherProps
+  }: LinkProps<C>,
   ref?: PolymorphicRef<C>
 ) {
-
   const Component = as ?? 'a'
 
   return (
-    <Component 
-      ref={ref} 
-      data-fs-link 
+    <Component
+      ref={ref}
+      data-fs-link
       data-fs-link-variant={variant}
       data-fs-link-inverse={inverse}
       data-fs-link-size={size}
-      data-testid={testId} 
+      data-testid={testId}
       {...otherProps}
     >
       {children}

package/src/atoms/List/List.tsx

@@ -36,8 +36,8 @@ const List: ListComponent = forwardRef(function List<
     <Component
       ref={ref}
       data-fs-list
-      data-testid={testId}
       data-fs-list-marker={marker}
+      data-testid={testId}
       {...otherProps}
     />
   )

package/src/atoms/Overlay/Overlay.tsx

@@ -14,10 +14,10 @@ const Overlay = forwardRef<HTMLDivElement, Props>(function Overlay(
 ) {
   return (
     <div
-      role="presentation"
+      ref={ref}
       data-fs-overlay
+      role="presentation"
       data-testid={testId}
-      ref={ref}
       {...otherProps}
     />
   )

package/src/atoms/Price/Price.tsx

@@ -12,14 +12,14 @@ export type PriceFormatter = (price: number, variant: PriceVariant) => ReactNode
 
 export interface PriceProps
   extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
-  /**
-   * Set the HTML element tag of this component.
-   */
-  as?: ElementType
   /**
    * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
    */
   testId?: string
+  /**
+   * Set the HTML element tag of this component.
+   */
+  as?: ElementType
   /**
    * The raw price value.
    */
@@ -52,8 +52,8 @@ const Price = forwardRef<Omit<HTMLSpanElement, 'children'>, PriceProps>(
       <Component
         ref={ref}
         data-fs-price
-        data-testid={testId}
         data-fs-price-variant={variant}
+        data-testid={testId}
         {...otherProps}
       >
         {formattedPrice}

package/src/atoms/Radio/Radio.tsx

@@ -17,8 +17,8 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
     <input
       ref={ref}
       data-fs-radio
-      data-testid={testId}
       type="radio"
+      data-testid={testId}
       {...otherProps}
     />
   )

package/src/atoms/SROnly/SROnly.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import type { ElementType } from 'react'
 
-interface Props {
+interface SROnlyProps {
   text: string
   as?: ElementType
 }
 
-function SROnly({ text, as }: Props) {
+function SROnly({ text, as }: SROnlyProps) {
   const Component = as ?? 'span'
 
   return <Component data-fs-sr-only>{text}</Component>

package/src/atoms/Select/Select.tsx

@@ -4,6 +4,10 @@ import { Icon } from '../..'
 import { CaretDown } from '../../assets'
 
 export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
   /**
    * Assigns an identifier to link the UISelect component and its label.
    */
@@ -14,10 +18,6 @@ export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
    * will be displayed in the UI.
    */
   options: Record<string, string>
-  /**
-   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-   */
-  testId?: string
 }
 
 const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
@@ -26,14 +26,14 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
 ) {
   return (
     <div data-fs-select>
-      <select id={id} ref={ref} data-testid={testId} {...otherProps}>
+      <select ref={ref} id={id} data-testid={testId} {...otherProps}>
         {Object.keys(options).map((key) => (
           <option key={key} value={key}>
             {options[key]}
           </option>
         ))}
       </select>
-      <Icon data-fs-select-icon component={<CaretDown />}/>
+      <Icon data-fs-select-icon component={<CaretDown />} />
     </div>
   )
 })

package/src/index.ts

@@ -44,6 +44,22 @@ export { default as RadioField } from './molecules/RadioField'
 export type { RadioFieldProps } from './molecules/RadioField'
 export { default as SelectField } from './molecules/SelectField'
 export type { SelectFieldProps } from './molecules/SelectField'
+export {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableRow,
+} from './molecules/Table'
+export type {
+  TableProps,
+  TableBodyProps,
+  TableCellProps,
+  TableFooterProps,
+  TableHeadProps,
+  TableRowProps,
+} from './molecules/Table'
 export { default as Tag } from './molecules/Tag'
 export type { TagProps } from './molecules/Tag'
 export { default as Toggle } from './molecules/Toggle'

package/src/molecules/BuyButton/BuyButton.tsx

@@ -4,11 +4,16 @@ import { Button, Icon } from '../../index'
 import type { ButtonProps } from '../../index'
 import { ShoppingCart } from '../../assets'
 
-type Props = ButtonProps
+type BuyButtonProps = ButtonProps
 
-function BuyButton({ icon, children, ...otherProps }: Props) {
+function BuyButton({
+  testId = 'fs-buy-button',
+  icon,
+  children,
+  ...otherProps
+}: BuyButtonProps) {
   return (
-    <Button data-fs-buy-button {...otherProps}>
+    <Button data-fs-buy-button data-testid={testId} {...otherProps}>
       <Icon component={<ShoppingCart />} />
       {children}
     </Button>

package/src/molecules/DiscountBadge/DiscountBadge.tsx

@@ -4,6 +4,10 @@ import { Badge } from '../..'
 import { useDiscountPercent } from '../DiscountBadge/useDiscountPercent'
 
 export type DiscountBadgeProps = {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
   /**
    * Specifies price without discount applied.
    */
@@ -12,10 +16,6 @@ export type DiscountBadgeProps = {
    * Specifies current price with discount applied.
    */
   spotPrice: number
-  /**
-   * Sets the component's size.
-   */
-  size?: 'small' | 'big'
   /**
    * Sets the limit percentage value to consider a low discount.
    */
@@ -29,9 +29,9 @@ export type DiscountBadgeProps = {
 const DiscountBadge = ({
   listPrice,
   spotPrice,
-  size = 'small',
   thresholdLow = 15,
   thresholdHigh = 40,
+  testId = 'fs-discount-badge',
 }: DiscountBadgeProps) => {
   const discountPercent = useDiscountPercent(listPrice, spotPrice)
 
@@ -48,9 +48,9 @@ const DiscountBadge = ({
 
   return (
     <Badge
-      size={size}
       data-fs-discount-badge
       data-fs-discount-badge-variant={discountVariant}
+      data-testid={testId}
     >
       {discountPercent}% off
     </Badge>

package/src/molecules/IconButton/IconButton.tsx

@@ -36,9 +36,9 @@ const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
         ref={ref}
         data-fs-button
         data-fs-icon-button
-        testId={testId}
         variant={variant ?? 'tertiary'}
         aria-label={ariaLabel}
+        testId={testId}
         {...otherProps}
       >
         {children}

package/src/molecules/InputField/InputField.tsx

@@ -6,6 +6,10 @@ import type { InputProps } from '../../index'
 import { XCircle } from '../../assets'
 
 type DefaultProps = {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
   /**
    * ID to identify input and corresponding label.
    */
@@ -77,6 +81,7 @@ const InputField = ({
   inputRef,
   disabled,
   value,
+  testId = 'fs-input-field',
   ...otherProps
 }: InputFieldProps) => {
   const shouldDisplayError = !disabled && error && error !== ''
@@ -87,6 +92,7 @@ const InputField = ({
       data-fs-input-field
       data-fs-input-field-actionable={actionable}
       data-fs-input-field-error={error && error !== ''}
+      data-testid={testId}
     >
       <Input
         id={id}

package/src/molecules/LinkButton/LinkButton.tsx

@@ -31,14 +31,14 @@ function LinkButton({
   return (
     <a
       ref={linkRef}
-      onFocus={onFocus}
       data-fs-button
       data-fs-link-button
-      data-testid={testId}
       data-fs-button-size={size}
       data-fs-button-variant={variant}
       data-fs-button-inverse={inverse}
       data-fs-button-disabled={disabled}
+      onFocus={onFocus}
+      data-testid={testId}
       {...otherProps}
     >
       {iconPosition === 'left' && <Icon component={icon} />}

package/src/molecules/SelectField/SelectField.tsx

@@ -19,11 +19,11 @@ const SelectField = forwardRef<
   ref
 ) {
   return (
-    <div ref={ref} data-fs-select-field>
+    <div ref={ref} data-fs-select-field data-testid={testId}>
       <Label data-fs-select-field-label htmlFor={id}>
         {label}
       </Label>
-      <Select id={id} options={options} data-testid={testId} {...otherProps} />
+      <Select id={id} options={options} {...otherProps} />
     </div>
   )
 })