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

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.24-alpha.0](https://github.com/vtex/faststore/compare/v2.0.23-alpha.0...v2.0.24-alpha.0) (2022-12-20)
+
+
+### Chores
+
+* Review components docs ([#1557](https://github.com/vtex/faststore/issues/1557)) ([2da23a0](https://github.com/vtex/faststore/commit/2da23a0ffe2f201f7e6163ea3db8dea4de07afa8))
+
+
+
 ## [2.0.19-alpha.0](https://github.com/vtex/faststore/compare/v2.0.18-alpha.0...v2.0.19-alpha.0) (2022-12-16)
 
 

package/dist/atoms/Badge/Badge.js

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 const Badge = forwardRef(function Badge({ testId = 'fs-badge', size = 'small', variant = 'neutral', counter = false, 'aria-label': ariaLabel, children, ...otherProps }, ref) {
-    return (React.createElement("div", { ref: ref, "data-fs-badge": true, "data-testid": testId, "aria-label": ariaLabel, "data-fs-badge-variant": counter ? null : variant, "data-fs-badge-size": size, "data-fs-badge-counter": counter, ...otherProps },
+    return (React.createElement("div", { ref: ref, "data-fs-badge": true, "aria-label": ariaLabel, "data-fs-badge-variant": counter ? null : variant, "data-fs-badge-size": size, "data-fs-badge-counter": counter, "data-testid": testId, ...otherProps },
         React.createElement("div", { "data-fs-badge-wrapper": true }, children)));
 });
 export default Badge;

package/dist/atoms/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/atoms/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAkCzC,MAAM,KAAK,GAAG,UAAU,CAA6B,SAAS,KAAK,CACjE,EACE,MAAM,GAAG,UAAU,EACnB,IAAI,GAAG,OAAO,EACd,OAAO,GAAG,SAAS,EACnB,OAAO,GAAG,KAAK,EACf,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,GAAG,UAAU,EACF,EACb,GAAG;IAEH,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,wCAEK,MAAM,gBACP,SAAS,2BACE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,wBAC3B,IAAI,2BACD,OAAO,KAC1B,UAAU;QAEd,8DAA4B,QAAQ,CAAO,CACvC,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,KAAK,CAAA"}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/atoms/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAkCzC,MAAM,KAAK,GAAG,UAAU,CAA6B,SAAS,KAAK,CACjE,EACE,MAAM,GAAG,UAAU,EACnB,IAAI,GAAG,OAAO,EACd,OAAO,GAAG,SAAS,EACnB,OAAO,GAAG,KAAK,EACf,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,GAAG,UAAU,EACF,EACb,GAAG;IAEH,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,uCAEI,SAAS,2BACE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,wBAC3B,IAAI,2BACD,OAAO,iBACjB,MAAM,KACf,UAAU;QAEd,8DAA4B,QAAQ,CAAO,CACvC,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,KAAK,CAAA"}

package/dist/atoms/Button/Button.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import { Icon } from '../../index';
 const Button = forwardRef(function Button({ children, variant, inverse, size = 'regular', testId = 'fs-button', icon, iconPosition = 'left', disabled, ...otherProps }, ref) {
-    return (React.createElement("button", { ref: ref, "data-testid": testId, "data-fs-button": true, "data-fs-button-inverse": inverse, "data-fs-button-size": size, "data-fs-button-variant": variant, disabled: disabled, ...otherProps },
+    return (React.createElement("button", { ref: ref, "data-fs-button": true, "data-fs-button-inverse": inverse, "data-fs-button-size": size, "data-fs-button-variant": variant, disabled: disabled, "data-testid": testId, ...otherProps },
         icon && iconPosition === 'left' && React.createElement(Icon, { component: icon }),
         children,
         icon && iconPosition === 'right' && React.createElement(Icon, { component: icon })));

package/dist/atoms/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/atoms/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AAqClC,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CACvE,EACE,QAAQ,EACR,OAAO,EACP,OAAO,EACP,IAAI,GAAG,SAAS,EAChB,MAAM,GAAG,WAAW,EACpB,IAAI,EACJ,YAAY,GAAG,MAAM,EACrB,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,iBACK,MAAM,oDAEK,OAAO,yBACV,IAAI,4BACD,OAAO,EAC/B,QAAQ,EAAE,QAAQ,KACd,UAAU;QAEb,IAAI,IAAI,YAAY,KAAK,MAAM,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,GAAI;QAC5D,QAAQ;QACR,IAAI,IAAI,YAAY,KAAK,OAAO,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,GAAI,CACvD,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/atoms/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AAqClC,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CACvE,EACE,QAAQ,EACR,OAAO,EACP,OAAO,EACP,IAAI,GAAG,SAAS,EAChB,MAAM,GAAG,WAAW,EACpB,IAAI,EACJ,YAAY,GAAG,MAAM,EACrB,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,oDAEgB,OAAO,yBACV,IAAI,4BACD,OAAO,EAC/B,QAAQ,EAAE,QAAQ,iBACL,MAAM,KACf,UAAU;QAEb,IAAI,IAAI,YAAY,KAAK,MAAM,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,GAAI;QAC5D,QAAQ;QACR,IAAI,IAAI,YAAY,KAAK,OAAO,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,GAAI,CACvD,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}

package/dist/atoms/Icon/Icon.d.ts

@@ -1,14 +1,14 @@
 import type { HTMLAttributes, ReactNode } from 'react';
 import React 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;
 }
 declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>;
 export default Icon;

package/dist/atoms/Link/Link.d.ts

@@ -6,12 +6,12 @@ declare 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

package/dist/atoms/Link/Link.js

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-const Link = forwardRef(function Link({ as, children, variant = 'default', size = "regular", inverse, testId = 'fs-link', ...otherProps }, ref) {
+const Link = forwardRef(function Link({ as, children, variant = 'default', size = 'regular', inverse, testId = 'fs-link', ...otherProps }, ref) {
     const Component = as ?? 'a';
     return (React.createElement(Component, { ref: ref, "data-fs-link": true, "data-fs-link-variant": variant, "data-fs-link-inverse": inverse, "data-fs-link-size": size, "data-testid": testId, ...otherProps }, children));
 });

package/dist/atoms/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../src/atoms/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAkCzC,MAAM,IAAI,GAAkB,UAAU,CAAC,SAAS,IAAI,CAGlD,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,GAAG,SAAS,EAAE,IAAI,GAAC,SAAS,EAAE,OAAO,EAAE,MAAM,GAAG,SAAS,EAAE,GAAG,UAAU,EAAgB,EAC/G,GAAuB;IAGvB,MAAM,SAAS,GAAG,EAAE,IAAI,GAAG,CAAA;IAE3B,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,gDAEc,OAAO,0BACP,OAAO,uBACV,IAAI,iBACV,MAAM,KACf,UAAU,IAEb,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,IAAI,CAAA"}
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../src/atoms/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAgCzC,MAAM,IAAI,GAAkB,UAAU,CAAC,SAAS,IAAI,CAGlD,EACE,EAAE,EACF,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,SAAS,EAChB,OAAO,EACP,MAAM,GAAG,SAAS,EAClB,GAAG,UAAU,EACA,EACf,GAAuB;IAEvB,MAAM,SAAS,GAAG,EAAE,IAAI,GAAG,CAAA;IAE3B,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,gDAEc,OAAO,0BACP,OAAO,uBACV,IAAI,iBACV,MAAM,KACf,UAAU,IAEb,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,IAAI,CAAA"}

package/dist/atoms/List/List.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 const List = forwardRef(function List({ as, marker, testId = 'fs-list', ...otherProps }, ref) {
     const Component = as ?? 'ul';
-    return (React.createElement(Component, { ref: ref, "data-fs-list": true, "data-testid": testId, "data-fs-list-marker": marker, ...otherProps }));
+    return (React.createElement(Component, { ref: ref, "data-fs-list": true, "data-fs-list-marker": marker, "data-testid": testId, ...otherProps }));
 });
 export default List;
 //# sourceMappingURL=List.js.map

package/dist/atoms/List/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../src/atoms/List/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AA0BzC,MAAM,IAAI,GAAkB,UAAU,CAAC,SAAS,IAAI,CAGlD,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,EAAE,GAAG,UAAU,EAAgB,EAC/D,GAAsB;IAEtB,MAAM,SAAS,GAAG,EAAE,IAAI,IAAI,CAAA;IAE5B,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,uCAEK,MAAM,yBACE,MAAM,KACvB,UAAU,GACd,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,IAAI,CAAA"}
+{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../src/atoms/List/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AA0BzC,MAAM,IAAI,GAAkB,UAAU,CAAC,SAAS,IAAI,CAGlD,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,EAAE,GAAG,UAAU,EAAgB,EAC/D,GAAsB;IAEtB,MAAM,SAAS,GAAG,EAAE,IAAI,IAAI,CAAA;IAE5B,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,+CAEa,MAAM,iBACd,MAAM,KACf,UAAU,GACd,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,IAAI,CAAA"}

package/dist/atoms/Overlay/Overlay.js

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 const Overlay = forwardRef(function Overlay({ testId = 'fs-overlay', ...otherProps }, ref) {
-    return (React.createElement("div", { role: "presentation", "data-fs-overlay": true, "data-testid": testId, ref: ref, ...otherProps }));
+    return (React.createElement("div", { ref: ref, "data-fs-overlay": true, role: "presentation", "data-testid": testId, ...otherProps }));
 });
 export default Overlay;
 //# sourceMappingURL=Overlay.js.map

package/dist/atoms/Overlay/Overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.js","sourceRoot":"","sources":["../../../src/atoms/Overlay/Overlay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AASzC,MAAM,OAAO,GAAG,UAAU,CAAwB,SAAS,OAAO,CAChE,EAAE,MAAM,GAAG,YAAY,EAAE,GAAG,UAAU,EAAE,EACxC,GAAG;IAEH,OAAO,CACL,6BACE,IAAI,EAAC,cAAc,0CAEN,MAAM,EACnB,GAAG,EAAE,GAAG,KACJ,UAAU,GACd,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,OAAO,CAAA"}
+{"version":3,"file":"Overlay.js","sourceRoot":"","sources":["../../../src/atoms/Overlay/Overlay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AASzC,MAAM,OAAO,GAAG,UAAU,CAAwB,SAAS,OAAO,CAChE,EAAE,MAAM,GAAG,YAAY,EAAE,GAAG,UAAU,EAAE,EACxC,GAAG;IAEH,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,2BAER,IAAI,EAAC,cAAc,iBACN,MAAM,KACf,UAAU,GACd,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,OAAO,CAAA"}

package/dist/atoms/Price/Price.d.ts

@@ -3,14 +3,14 @@ import React from 'react';
 export declare type PriceVariant = 'selling' | 'listing' | 'spot' | 'savings' | 'installment';
 export declare 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.
      */

package/dist/atoms/Price/Price.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 const Price = forwardRef(function Price({ value, as: Component = 'span', variant = 'selling', testId = 'fs-price', formatter = (price) => price, ...otherProps }, ref) {
     const formattedPrice = formatter(value, variant);
-    return (React.createElement(Component, { ref: ref, "data-fs-price": true, "data-testid": testId, "data-fs-price-variant": variant, ...otherProps }, formattedPrice));
+    return (React.createElement(Component, { ref: ref, "data-fs-price": true, "data-fs-price-variant": variant, "data-testid": testId, ...otherProps }, formattedPrice));
 });
 export default Price;
 //# sourceMappingURL=Price.js.map

package/dist/atoms/Price/Price.js.map

@@ -1 +1 @@
-{"version":3,"file":"Price.js","sourceRoot":"","sources":["../../../src/atoms/Price/Price.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAmCzC,MAAM,KAAK,GAAG,UAAU,CACtB,SAAS,KAAK,CACZ,EACE,KAAK,EACL,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,OAAO,GAAG,SAAS,EACnB,MAAM,GAAG,UAAU,EACnB,SAAS,GAAG,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,EAC5B,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,cAAc,GAAG,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;IAEhD,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,wCAEK,MAAM,2BACI,OAAO,KAC1B,UAAU,IAEb,cAAc,CACL,CACb,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,KAAK,CAAA"}
+{"version":3,"file":"Price.js","sourceRoot":"","sources":["../../../src/atoms/Price/Price.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAmCzC,MAAM,KAAK,GAAG,UAAU,CACtB,SAAS,KAAK,CACZ,EACE,KAAK,EACL,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,OAAO,GAAG,SAAS,EACnB,MAAM,GAAG,UAAU,EACnB,SAAS,GAAG,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,EAC5B,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,cAAc,GAAG,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;IAEhD,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,kDAEe,OAAO,iBACjB,MAAM,KACf,UAAU,IAEb,cAAc,CACL,CACb,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/atoms/Radio/Radio.js

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 const Radio = forwardRef(function Radio({ testId = 'fs-radio', ...otherProps }, ref) {
-    return (React.createElement("input", { ref: ref, "data-fs-radio": true, "data-testid": testId, type: "radio", ...otherProps }));
+    return (React.createElement("input", { ref: ref, "data-fs-radio": true, type: "radio", "data-testid": testId, ...otherProps }));
 });
 export default Radio;
 //# sourceMappingURL=Radio.js.map

package/dist/atoms/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/atoms/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAWzC,MAAM,KAAK,GAAG,UAAU,CAA+B,SAAS,KAAK,CACnE,EAAE,MAAM,GAAG,UAAU,EAAE,GAAG,UAAU,EAAc,EAClD,GAAG;IAEH,OAAO,CACL,+BACE,GAAG,EAAE,GAAG,wCAEK,MAAM,EACnB,IAAI,EAAC,OAAO,KACR,UAAU,GACd,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,KAAK,CAAA"}
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/atoms/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAWzC,MAAM,KAAK,GAAG,UAAU,CAA+B,SAAS,KAAK,CACnE,EAAE,MAAM,GAAG,UAAU,EAAE,GAAG,UAAU,EAAc,EAClD,GAAG;IAEH,OAAO,CACL,+BACE,GAAG,EAAE,GAAG,yBAER,IAAI,EAAC,OAAO,iBACC,MAAM,KACf,UAAU,GACd,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,KAAK,CAAA"}

package/dist/atoms/SROnly/SROnly.d.ts

@@ -1,7 +1,7 @@
 import type { ElementType } from 'react';
-interface Props {
+interface SROnlyProps {
     text: string;
     as?: ElementType;
 }
-declare function SROnly({ text, as }: Props): JSX.Element;
+declare function SROnly({ text, as }: SROnlyProps): JSX.Element;
 export default SROnly;

package/dist/atoms/SROnly/SROnly.js.map

@@ -1 +1 @@
-{"version":3,"file":"SROnly.js","sourceRoot":"","sources":["../../../src/atoms/SROnly/SROnly.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,SAAS,MAAM,CAAC,EAAE,IAAI,EAAE,EAAE,EAAS;IACjC,MAAM,SAAS,GAAG,EAAE,IAAI,MAAM,CAAA;IAE9B,OAAO,oBAAC,SAAS,+BAAkB,IAAI,CAAa,CAAA;AACtD,CAAC;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"SROnly.js","sourceRoot":"","sources":["../../../src/atoms/SROnly/SROnly.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,SAAS,MAAM,CAAC,EAAE,IAAI,EAAE,EAAE,EAAe;IACvC,MAAM,SAAS,GAAG,EAAE,IAAI,MAAM,CAAA;IAE9B,OAAO,oBAAC,SAAS,+BAAkB,IAAI,CAAa,CAAA;AACtD,CAAC;AAED,eAAe,MAAM,CAAA"}

package/dist/atoms/Select/Select.d.ts

@@ -1,6 +1,10 @@
 import React from 'react';
 import type { SelectHTMLAttributes } from 'react';
 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.
      */
@@ -11,10 +15,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;
 }
 declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
 export default Select;

package/dist/atoms/Select/Select.js

@@ -3,7 +3,7 @@ import { Icon } from '../..';
 import { CaretDown } from '../../assets';
 const Select = forwardRef(function Select({ options, id, testId = 'fs-select', ...otherProps }, ref) {
     return (React.createElement("div", { "data-fs-select": true },
-        React.createElement("select", { id: id, ref: ref, "data-testid": testId, ...otherProps }, Object.keys(options).map((key) => (React.createElement("option", { key: key, value: key }, options[key])))),
+        React.createElement("select", { ref: ref, id: id, "data-testid": testId, ...otherProps }, Object.keys(options).map((key) => (React.createElement("option", { key: key, value: key }, options[key])))),
         React.createElement(Icon, { "data-fs-select-icon": true, component: React.createElement(CaretDown, null) })));
 });
 export default Select;

package/dist/atoms/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/atoms/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAC5B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAmBxC,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CACvE,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,GAAG,WAAW,EAAE,GAAG,UAAU,EAAe,EACjE,GAAG;IAEH,OAAO,CACL;QACE,gCAAQ,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,iBAAe,MAAM,KAAM,UAAU,IAC1D,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACjC,gCAAQ,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IACzB,OAAO,CAAC,GAAG,CAAC,CACN,CACV,CAAC,CACK;QACT,oBAAC,IAAI,iCAAqB,SAAS,EAAE,oBAAC,SAAS,OAAG,GAAG,CACjD,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/atoms/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAC5B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAmBxC,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CACvE,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,GAAG,WAAW,EAAE,GAAG,UAAU,EAAe,EACjE,GAAG;IAEH,OAAO,CACL;QACE,gCAAQ,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,iBAAe,MAAM,KAAM,UAAU,IAC1D,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACjC,gCAAQ,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IACzB,OAAO,CAAC,GAAG,CAAC,CACN,CACV,CAAC,CACK;QACT,oBAAC,IAAI,iCAAqB,SAAS,EAAE,oBAAC,SAAS,OAAG,GAAI,CAClD,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}

package/dist/molecules/BuyButton/BuyButton.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { ButtonProps } from '../../index';
-declare type Props = ButtonProps;
-declare function BuyButton({ icon, children, ...otherProps }: Props): JSX.Element;
+declare type BuyButtonProps = ButtonProps;
+declare function BuyButton({ testId, icon, children, ...otherProps }: BuyButtonProps): JSX.Element;
 export default BuyButton;

package/dist/molecules/BuyButton/BuyButton.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Button, Icon } from '../../index';
 import { ShoppingCart } from '../../assets';
-function BuyButton({ icon, children, ...otherProps }) {
-    return (React.createElement(Button, { "data-fs-buy-button": true, ...otherProps },
+function BuyButton({ testId = 'fs-buy-button', icon, children, ...otherProps }) {
+    return (React.createElement(Button, { "data-fs-buy-button": true, "data-testid": testId, ...otherProps },
         React.createElement(Icon, { component: React.createElement(ShoppingCart, null) }),
         children));
 }

package/dist/molecules/BuyButton/BuyButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BuyButton.js","sourceRoot":"","sources":["../../../src/molecules/BuyButton/BuyButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAI3C,SAAS,SAAS,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAS;IACzD,OAAO,CACL,oBAAC,MAAM,mCAAwB,UAAU;QACvC,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAC,YAAY,OAAG,GAAI;QACpC,QAAQ,CACF,CACV,CAAA;AACH,CAAC;AAED,eAAe,SAAS,CAAA"}
+{"version":3,"file":"BuyButton.js","sourceRoot":"","sources":["../../../src/molecules/BuyButton/BuyButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAI3C,SAAS,SAAS,CAAC,EACjB,MAAM,GAAG,eAAe,EACxB,IAAI,EACJ,QAAQ,EACR,GAAG,UAAU,EACE;IACf,OAAO,CACL,oBAAC,MAAM,+CAAiC,MAAM,KAAM,UAAU;QAC5D,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAC,YAAY,OAAG,GAAI;QACpC,QAAQ,CACF,CACV,CAAA;AACH,CAAC;AAED,eAAe,SAAS,CAAA"}

package/dist/molecules/DiscountBadge/DiscountBadge.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 export declare type DiscountBadgeProps = {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
     /**
      * Specifies price without discount applied.
      */
@@ -8,10 +12,6 @@ export declare 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.
      */
@@ -21,5 +21,5 @@ export declare type DiscountBadgeProps = {
      */
     thresholdHigh?: number;
 };
-declare const DiscountBadge: ({ listPrice, spotPrice, size, thresholdLow, thresholdHigh, }: DiscountBadgeProps) => JSX.Element;
+declare const DiscountBadge: ({ listPrice, spotPrice, thresholdLow, thresholdHigh, testId, }: DiscountBadgeProps) => JSX.Element;
 export default DiscountBadge;

package/dist/molecules/DiscountBadge/DiscountBadge.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Badge } from '../..';
 import { useDiscountPercent } from '../DiscountBadge/useDiscountPercent';
-const DiscountBadge = ({ listPrice, spotPrice, size = 'small', thresholdLow = 15, thresholdHigh = 40, }) => {
+const DiscountBadge = ({ listPrice, spotPrice, thresholdLow = 15, thresholdHigh = 40, testId = 'fs-discount-badge', }) => {
     const discountPercent = useDiscountPercent(listPrice, spotPrice);
     if (discountPercent === 0) {
         return React.createElement(React.Fragment, null);
@@ -11,7 +11,7 @@ const DiscountBadge = ({ listPrice, spotPrice, size = 'small', thresholdLow = 15
         : discountPercent <= thresholdHigh
             ? 'medium'
             : 'high';
-    return (React.createElement(Badge, { size: size, "data-fs-discount-badge": true, "data-fs-discount-badge-variant": discountVariant },
+    return (React.createElement(Badge, { "data-fs-discount-badge": true, "data-fs-discount-badge-variant": discountVariant, "data-testid": testId },
         discountPercent,
         "% off"));
 };

package/dist/molecules/DiscountBadge/DiscountBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"DiscountBadge.js","sourceRoot":"","sources":["../../../src/molecules/DiscountBadge/DiscountBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAA;AAE7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAA;AAyBxE,MAAM,aAAa,GAAG,CAAC,EACrB,SAAS,EACT,SAAS,EACT,IAAI,GAAG,OAAO,EACd,YAAY,GAAG,EAAE,EACjB,aAAa,GAAG,EAAE,GACC,EAAE,EAAE;IACvB,MAAM,eAAe,GAAG,kBAAkB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;IAEhE,IAAI,eAAe,KAAK,CAAC,EAAE;QACzB,OAAO,yCAAK,CAAA;KACb;IAED,MAAM,eAAe,GACnB,eAAe,IAAI,YAAY;QAC7B,CAAC,CAAC,KAAK;QACP,CAAC,CAAC,eAAe,IAAI,aAAa;YAClC,CAAC,CAAC,QAAQ;YACV,CAAC,CAAC,MAAM,CAAA;IAEZ,OAAO,CACL,oBAAC,KAAK,IACJ,IAAI,EAAE,IAAI,oEAEsB,eAAe;QAE9C,eAAe;gBACV,CACT,CAAA;AACH,CAAC,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"DiscountBadge.js","sourceRoot":"","sources":["../../../src/molecules/DiscountBadge/DiscountBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAA;AAE7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAA;AAyBxE,MAAM,aAAa,GAAG,CAAC,EACrB,SAAS,EACT,SAAS,EACT,YAAY,GAAG,EAAE,EACjB,aAAa,GAAG,EAAE,EAClB,MAAM,GAAG,mBAAmB,GACT,EAAE,EAAE;IACvB,MAAM,eAAe,GAAG,kBAAkB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;IAEhE,IAAI,eAAe,KAAK,CAAC,EAAE;QACzB,OAAO,yCAAK,CAAA;KACb;IAED,MAAM,eAAe,GACnB,eAAe,IAAI,YAAY;QAC7B,CAAC,CAAC,KAAK;QACP,CAAC,CAAC,eAAe,IAAI,aAAa;YAClC,CAAC,CAAC,QAAQ;YACV,CAAC,CAAC,MAAM,CAAA;IAEZ,OAAO,CACL,oBAAC,KAAK,sEAE4B,eAAe,iBAClC,MAAM;QAElB,eAAe;gBACV,CACT,CAAA;AACH,CAAC,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist/molecules/IconButton/IconButton.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import { Icon, Button } from '../../index';
 const IconButton = forwardRef(function IconButton({ icon, children, testId = 'fs-icon-button', 'aria-label': ariaLabel, variant, ...otherProps }, ref) {
-    return (React.createElement(Button, { ref: ref, "data-fs-button": true, "data-fs-icon-button": true, testId: testId, variant: variant ?? 'tertiary', "aria-label": ariaLabel, ...otherProps },
+    return (React.createElement(Button, { ref: ref, "data-fs-button": true, "data-fs-icon-button": true, variant: variant ?? 'tertiary', "aria-label": ariaLabel, testId: testId, ...otherProps },
         children,
         React.createElement(Icon, { component: icon })));
 });

package/dist/molecules/IconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../src/molecules/IconButton/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAkB1C,MAAM,UAAU,GAAG,UAAU,CAC3B,SAAS,UAAU,CACjB,EACE,IAAI,EACJ,QAAQ,EACR,MAAM,GAAG,gBAAgB,EACzB,YAAY,EAAE,SAAS,EACvB,OAAO,EACP,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,oBAAC,MAAM,IACL,GAAG,EAAE,GAAG,uDAGR,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,IAAI,UAAU,gBAClB,SAAS,KACjB,UAAU;QAEb,QAAQ;QACT,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,GAAI,CAClB,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../src/molecules/IconButton/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAkB1C,MAAM,UAAU,GAAG,UAAU,CAC3B,SAAS,UAAU,CACjB,EACE,IAAI,EACJ,QAAQ,EACR,MAAM,GAAG,gBAAgB,EACzB,YAAY,EAAE,SAAS,EACvB,OAAO,EACP,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,oBAAC,MAAM,IACL,GAAG,EAAE,GAAG,uDAGR,OAAO,EAAE,OAAO,IAAI,UAAU,gBAClB,SAAS,EACrB,MAAM,EAAE,MAAM,KACV,UAAU;QAEb,QAAQ;QACT,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,GAAI,CAClB,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/molecules/InputField/InputField.d.ts

@@ -1,6 +1,10 @@
 import type { MutableRefObject } from 'react';
 import type { InputProps } from '../../index';
 declare 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.
      */
@@ -51,5 +55,5 @@ declare type ActionableInputField = {
     displayClearButton?: boolean;
 };
 export declare type InputFieldProps = DefaultProps & Omit<InputProps, 'disabled' | 'onSubmit'> & ActionableInputField;
-declare const InputField: ({ id, label, type, error, displayClearButton, actionable, buttonActionText, onSubmit, onClear, placeholder, inputRef, disabled, value, ...otherProps }: InputFieldProps) => JSX.Element;
+declare const InputField: ({ id, label, type, error, displayClearButton, actionable, buttonActionText, onSubmit, onClear, placeholder, inputRef, disabled, value, testId, ...otherProps }: InputFieldProps) => JSX.Element;
 export default InputField;

package/dist/molecules/InputField/InputField.js

@@ -2,10 +2,10 @@ import React from 'react';
 import { Input, Label, IconButton, Button } from '../../index';
 import { XCircle } from '../../assets';
 const InputField = ({ id, label, type = 'text', error, displayClearButton, actionable, buttonActionText = 'Apply', onSubmit, onClear, placeholder = ' ', // initializes with an empty space to style float label using `placeholder-shown`
-inputRef, disabled, value, ...otherProps }) => {
+inputRef, disabled, value, testId = 'fs-input-field', ...otherProps }) => {
     const shouldDisplayError = !disabled && error && error !== '';
     const shouldDisplayButton = actionable && !disabled && value !== '';
-    return (React.createElement("div", { "data-fs-input-field": true, "data-fs-input-field-actionable": actionable, "data-fs-input-field-error": error && error !== '' },
+    return (React.createElement("div", { "data-fs-input-field": true, "data-fs-input-field-actionable": actionable, "data-fs-input-field-error": error && error !== '', "data-testid": testId },
         React.createElement(Input, { id: id, type: type, value: value, ref: inputRef, disabled: disabled, placeholder: placeholder, ...otherProps }),
         React.createElement(Label, { htmlFor: id }, label),
         shouldDisplayButton &&

package/dist/molecules/InputField/InputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.js","sourceRoot":"","sources":["../../../src/molecules/InputField/InputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAE9D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AA4DtC,MAAM,UAAU,GAAG,CAAC,EAClB,EAAE,EACF,KAAK,EACL,IAAI,GAAG,MAAM,EACb,KAAK,EACL,kBAAkB,EAClB,UAAU,EACV,gBAAgB,GAAG,OAAO,EAC1B,QAAQ,EACR,OAAO,EACP,WAAW,GAAG,GAAG,EAAE,iFAAiF;AACpG,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,GAAG,UAAU,EACG,EAAE,EAAE;IACpB,MAAM,kBAAkB,GAAG,CAAC,QAAQ,IAAI,KAAK,IAAI,KAAK,KAAK,EAAE,CAAA;IAC7D,MAAM,mBAAmB,GAAG,UAAU,IAAI,CAAC,QAAQ,IAAI,KAAK,KAAK,EAAE,CAAA;IAEnE,OAAO,CACL,4FAEkC,UAAU,+BACf,KAAK,IAAI,KAAK,KAAK,EAAE;QAEhD,oBAAC,KAAK,IACJ,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,QAAQ,EACb,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,KACpB,UAAU,GACd;QACF,oBAAC,KAAK,IAAC,OAAO,EAAE,EAAE,IAAG,KAAK,CAAS;QAElC,mBAAmB;YAClB,CAAC,kBAAkB,IAAI,KAAK,CAAC,CAAC,CAAC,CAC7B,oBAAC,UAAU,2BACW,OAAO,gBAChB,aAAa,EACxB,IAAI,EAAE,oBAAC,OAAO,OAAG,EACjB,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,EAAE,EAAE,CAAA;oBACX,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA;gBAC5B,CAAC,GACD,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,MAAM,IAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,QAAQ,IACtD,gBAAgB,CACV,CACV,CAAC;QACH,kBAAkB,IAAI,CACrB,2EAAyC,KAAK,CAAQ,CACvD,CACG,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"InputField.js","sourceRoot":"","sources":["../../../src/molecules/InputField/InputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAE9D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAgEtC,MAAM,UAAU,GAAG,CAAC,EAClB,EAAE,EACF,KAAK,EACL,IAAI,GAAG,MAAM,EACb,KAAK,EACL,kBAAkB,EAClB,UAAU,EACV,gBAAgB,GAAG,OAAO,EAC1B,QAAQ,EACR,OAAO,EACP,WAAW,GAAG,GAAG,EAAE,iFAAiF;AACpG,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,MAAM,GAAG,gBAAgB,EACzB,GAAG,UAAU,EACG,EAAE,EAAE;IACpB,MAAM,kBAAkB,GAAG,CAAC,QAAQ,IAAI,KAAK,IAAI,KAAK,KAAK,EAAE,CAAA;IAC7D,MAAM,mBAAmB,GAAG,UAAU,IAAI,CAAC,QAAQ,IAAI,KAAK,KAAK,EAAE,CAAA;IAEnE,OAAO,CACL,4FAEkC,UAAU,+BACf,KAAK,IAAI,KAAK,KAAK,EAAE,iBACnC,MAAM;QAEnB,oBAAC,KAAK,IACJ,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,QAAQ,EACb,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,KACpB,UAAU,GACd;QACF,oBAAC,KAAK,IAAC,OAAO,EAAE,EAAE,IAAG,KAAK,CAAS;QAElC,mBAAmB;YAClB,CAAC,kBAAkB,IAAI,KAAK,CAAC,CAAC,CAAC,CAC7B,oBAAC,UAAU,2BACW,OAAO,gBAChB,aAAa,EACxB,IAAI,EAAE,oBAAC,OAAO,OAAG,EACjB,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,EAAE,EAAE,CAAA;oBACX,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA;gBAC5B,CAAC,GACD,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,MAAM,IAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,QAAQ,IACtD,gBAAgB,CACV,CACV,CAAC;QACH,kBAAkB,IAAI,CACrB,2EAAyC,KAAK,CAAQ,CACvD,CACG,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/molecules/LinkButton/LinkButton.js

@@ -8,7 +8,7 @@ function LinkButton({ icon, inverse, children, disabled, iconPosition, size = 'r
             linkRef.current?.blur();
         }
     }
-    return (React.createElement("a", { ref: linkRef, onFocus: onFocus, "data-fs-button": true, "data-fs-link-button": true, "data-testid": testId, "data-fs-button-size": size, "data-fs-button-variant": variant, "data-fs-button-inverse": inverse, "data-fs-button-disabled": disabled, ...otherProps },
+    return (React.createElement("a", { ref: linkRef, "data-fs-button": true, "data-fs-link-button": true, "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' && React.createElement(Icon, { component: icon }),
         children,
         iconPosition === 'right' && React.createElement(Icon, { component: icon })));

package/dist/molecules/LinkButton/LinkButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkButton.js","sourceRoot":"","sources":["../../../src/molecules/LinkButton/LinkButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAGrC,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAM5B,SAAS,UAAU,CAAC,EAClB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,IAAI,GAAG,SAAS,EAChB,OAAO,GAAG,SAAS,EACnB,MAAM,GAAG,gBAAgB,EACzB,GAAG,UAAU,EACG;IAChB,MAAM,OAAO,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAA;IAEtD,SAAS,OAAO,CAAC,CAAa;QAC5B,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,IAAI,QAAQ,EAAE;YACZ,OAAO,CAAC,OAAO,EAAE,IAAI,EAAE,CAAA;SACxB;IACH,CAAC;IAED,OAAO,CACL,2BACE,GAAG,EAAE,OAAO,EACZ,OAAO,EAAE,OAAO,sEAGH,MAAM,yBACE,IAAI,4BACD,OAAO,4BACP,OAAO,6BACN,QAAQ,KAC7B,UAAU;QAEb,YAAY,KAAK,MAAM,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,GAAI;QACpD,QAAQ;QACR,YAAY,KAAK,OAAO,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,GAAI,CACpD,CACL,CAAA;AACH,CAAC;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"LinkButton.js","sourceRoot":"","sources":["../../../src/molecules/LinkButton/LinkButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAGrC,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAM5B,SAAS,UAAU,CAAC,EAClB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,IAAI,GAAG,SAAS,EAChB,OAAO,GAAG,SAAS,EACnB,MAAM,GAAG,gBAAgB,EACzB,GAAG,UAAU,EACG;IAChB,MAAM,OAAO,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAA;IAEtD,SAAS,OAAO,CAAC,CAAa;QAC5B,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,IAAI,QAAQ,EAAE;YACZ,OAAO,CAAC,OAAO,EAAE,IAAI,EAAE,CAAA;SACxB;IACH,CAAC;IAED,OAAO,CACL,2BACE,GAAG,EAAE,OAAO,8EAGS,IAAI,4BACD,OAAO,4BACP,OAAO,6BACN,QAAQ,EACjC,OAAO,EAAE,OAAO,iBACH,MAAM,KACf,UAAU;QAEb,YAAY,KAAK,MAAM,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,GAAI;QACpD,QAAQ;QACR,YAAY,KAAK,OAAO,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,GAAI,CACpD,CACL,CAAA;AACH,CAAC;AAED,eAAe,UAAU,CAAA"}

package/dist/molecules/SelectField/SelectField.js

@@ -1,9 +1,9 @@
 import React, { forwardRef } from 'react';
 import { Label, Select } from '../..';
 const SelectField = forwardRef(function SelectField({ id, label, options, testId = 'fs-select-field', ...otherProps }, ref) {
-    return (React.createElement("div", { ref: ref, "data-fs-select-field": true },
+    return (React.createElement("div", { ref: ref, "data-fs-select-field": true, "data-testid": testId },
         React.createElement(Label, { "data-fs-select-field-label": true, htmlFor: id }, label),
-        React.createElement(Select, { id: id, options: options, "data-testid": testId, ...otherProps })));
+        React.createElement(Select, { id: id, options: options, ...otherProps })));
 });
 export default SelectField;
 //# sourceMappingURL=SelectField.js.map

package/dist/molecules/SelectField/SelectField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../../src/molecules/SelectField/SelectField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAUrC,MAAM,WAAW,GAAG,UAAU,CAG5B,SAAS,WAAW,CACpB,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,GAAG,iBAAiB,EAAE,GAAG,UAAU,EAAE,EACjE,GAAG;IAEH,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG;QACX,oBAAC,KAAK,wCAA4B,OAAO,EAAE,EAAE,IAC1C,KAAK,CACA;QACR,oBAAC,MAAM,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,iBAAe,MAAM,KAAM,UAAU,GAAI,CACrE,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,WAAW,CAAA"}
+{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../../src/molecules/SelectField/SelectField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAUrC,MAAM,WAAW,GAAG,UAAU,CAG5B,SAAS,WAAW,CACpB,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,GAAG,iBAAiB,EAAE,GAAG,UAAU,EAAE,EACjE,GAAG;IAEH,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,+CAAoC,MAAM;QACrD,oBAAC,KAAK,wCAA4B,OAAO,EAAE,EAAE,IAC1C,KAAK,CACA;QACR,oBAAC,MAAM,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,KAAM,UAAU,GAAI,CAChD,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,WAAW,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.24-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": "b59392c361cae99ef9b261125b561860b59ee6cd"
 }

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/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>
   )
 })

package/src/molecules/Tag/Tag.tsx

@@ -35,8 +35,8 @@ const Tag = forwardRef<HTMLDivElement, TagProps>(function Tag(
     <Badge
       ref={ref}
       data-fs-tag
-      data-testid={testId}
       size="big"
+      data-testid={testId}
       {...otherProps}
     >
       <span data-fs-tag-label>{label}</span>

package/src/molecules/Toggle/Toggle.tsx

@@ -36,8 +36,8 @@ const Toggle = forwardRef<HTMLInputElement, ToggleProps>(function Toggle(
   return (
     <div data-fs-toggle data-fs-toggle-variant={variant} data-testid={testId}>
       <Input
-        id={id}
         ref={ref}
+        id={id}
         role="switch"
         type="checkbox"
         disabled={disabled}