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

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.19-alpha.0](https://github.com/vtex/faststore/compare/v2.0.18-alpha.0...v2.0.19-alpha.0) (2022-12-16)
+
+
+### Features
+
+* Adds `Hero` component ([#1556](https://github.com/vtex/faststore/issues/1556)) ([871f35c](https://github.com/vtex/faststore/commit/871f35cdcfc85d5ec0038dcc55a9aeedcc5ff546))
+
+
+
+## [2.0.18-alpha.0](https://github.com/vtex/faststore/compare/v2.0.17-alpha.0...v2.0.18-alpha.0) (2022-12-15)
+
+
+### Bug Fixes
+
+* Starter's Integration tests ([#1559](https://github.com/vtex/faststore/issues/1559)) ([d597d98](https://github.com/vtex/faststore/commit/d597d981079448ca46588a8e32964c4e5dcc84f8)), closes [#323](https://github.com/vtex/faststore/issues/323)
+
+
+
 ## [2.0.17-alpha.0](https://github.com/vtex/faststore/compare/v2.0.16-alpha.0...v2.0.17-alpha.0) (2022-12-15)
 
 

package/dist/assets/ArrowRight.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+declare const ArrowRight: FC;
+export default ArrowRight;

package/dist/assets/ArrowRight.js

@@ -0,0 +1,8 @@
+import React from 'react';
+// Icon from Phosphor Icons
+const ArrowRight = () => (React.createElement("svg", { id: "ArrowRight", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 256 256", strokeWidth: "16", width: 24, height: 24 },
+    React.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    React.createElement("line", { x1: "40", y1: "128", x2: "216", y2: "128", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "24" }),
+    React.createElement("polyline", { points: "144 56 216 128 144 200", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "24" })));
+export default ArrowRight;
+//# sourceMappingURL=ArrowRight.js.map

package/dist/assets/ArrowRight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowRight.js","sourceRoot":"","sources":["../../src/assets/ArrowRight.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,2BAA2B;AAC3B,MAAM,UAAU,GAAO,GAAG,EAAE,CAAC,CAC3B,6BACE,EAAE,EAAC,YAAY,EACf,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,aAAa,EACrB,WAAW,EAAC,IAAI,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE;IAER,8BAAM,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,GAAQ;IAClD,8BAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,GAAQ;IAChJ,kCAAU,MAAM,EAAC,wBAAwB,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,GAAY,CACnJ,CACP,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/assets/House.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+declare const House: FC;
+export default House;

package/dist/assets/House.js

@@ -0,0 +1,7 @@
+import React from 'react';
+// Icon from Phosphor Icons
+const House = () => (React.createElement("svg", { id: "House", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 256 256", strokeWidth: "16", width: 24, height: 24 },
+    React.createElement("rect", { width: "256", height: "256", fill: "none" }),
+    React.createElement("path", { d: "M152,208V160a8,8,0,0,0-8-8H112a8,8,0,0,0-8,8v48a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V115.5a8.3,8.3,0,0,1,2.6-5.9l80-72.7a8,8,0,0,1,10.8,0l80,72.7a8.3,8.3,0,0,1,2.6,5.9V208a8,8,0,0,1-8,8H160A8,8,0,0,1,152,208Z", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "24" })));
+export default House;
+//# sourceMappingURL=House.js.map

package/dist/assets/House.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"House.js","sourceRoot":"","sources":["../../src/assets/House.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,2BAA2B;AAC3B,MAAM,KAAK,GAAO,GAAG,EAAE,CAAC,CACtB,6BACE,EAAE,EAAC,OAAO,EACV,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,aAAa,EACrB,WAAW,EAAC,IAAI,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE;IAEV,8BAAM,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,GAAQ;IAClD,8BAAM,CAAC,EAAC,4MAA4M,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,GAAQ,CACxT,CACP,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/assets/index.d.ts

@@ -1,5 +1,7 @@
+export { default as ArrowRight } from './ArrowRight';
 export { default as CaretDown } from './CaretDown';
 export { default as Checked } from './Checked';
-export { default as X } from './X';
+export { default as House } from './House';
 export { default as ShoppingCart } from './ShoppingCart';
+export { default as X } from './X';
 export { default as XCircle } from './XCircle';

package/dist/assets/index.js

@@ -1,6 +1,8 @@
+export { default as ArrowRight } from './ArrowRight';
 export { default as CaretDown } from './CaretDown';
 export { default as Checked } from './Checked';
-export { default as X } from './X';
+export { default as House } from './House';
 export { default as ShoppingCart } from './ShoppingCart';
+export { default as X } from './X';
 export { default as XCircle } from './XCircle';
 //# sourceMappingURL=index.js.map

package/dist/assets/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/assets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,CAAC,EAAE,MAAM,KAAK,CAAA;AAClC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/assets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,CAAC,EAAE,MAAM,KAAK,CAAA;AAClC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA"}

package/dist/index.d.ts

@@ -45,3 +45,5 @@ export { default as Toggle } from './molecules/Toggle';
 export type { ToggleProps } from './molecules/Toggle';
 export { default as ToggleField } from './molecules/ToggleField';
 export type { ToggleFieldProps } from './molecules/ToggleField';
+export { default as Hero, HeroImage, HeroHeading, } from './organisms/Hero';
+export type { HeroProps, HeroImageProps, HeroHeadingProps, } from './organisms/Hero';

package/dist/index.js

@@ -26,4 +26,6 @@ export { default as SelectField } from './molecules/SelectField';
 export { default as Tag } from './molecules/Tag';
 export { default as Toggle } from './molecules/Toggle';
 export { default as ToggleField } from './molecules/ToggleField';
+// Organisms
+export { default as Hero, HeroImage, HeroHeading, } from './organisms/Hero';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,SAAS;AACT,cAAc,UAAU,CAAA;AAExB,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,iBAAiB,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,SAAS;AACT,cAAc,UAAU,CAAA;AAExB,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,iBAAiB,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAGhE,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,IAAI,EACf,SAAS,EACT,WAAW,GACZ,MAAM,kBAAkB,CAAA"}

package/dist/molecules/SelectField/SelectField.js

@@ -1,10 +1,9 @@
 import React, { forwardRef } from 'react';
-import Select from '../../atoms/Select';
-import Label from '../../atoms/Label';
+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, "data-testid": testId },
+    return (React.createElement("div", { ref: ref, "data-fs-select-field": true },
         React.createElement(Label, { "data-fs-select-field-label": true, htmlFor: id }, label),
-        React.createElement(Select, { id: id, options: options, ...otherProps })));
+        React.createElement(Select, { id: id, options: options, "data-testid": testId, ...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;AAEzC,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAEvC,OAAO,KAAK,MAAM,mBAAmB,CAAA;AASrC,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,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,IAAG,KAAK,CAAS;QAC9D,oBAAC,MAAM,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,KAAM,UAAU,GAAI,CAChD,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,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;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"}

package/dist/organisms/Hero/Hero.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+declare type Variant = 'primary' | 'secondary';
+declare type ColorVariant = 'main' | 'light' | 'accent';
+interface HeroContext {
+    variant: Variant;
+    colorVariant: ColorVariant;
+}
+declare const HeroContext: React.Context<HeroContext | undefined>;
+export interface HeroProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specifies the component variant.
+     */
+    variant?: Variant;
+    /**
+     * Specifies the component's color variant combination.
+     */
+    colorVariant?: ColorVariant;
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string;
+}
+declare const Hero: React.ForwardRefExoticComponent<HeroProps & React.RefAttributes<HTMLDivElement>>;
+export declare function useHero(): HeroContext;
+export default Hero;

package/dist/organisms/Hero/Hero.js

@@ -0,0 +1,16 @@
+import React, { forwardRef, useContext, createContext } from 'react';
+const HeroContext = createContext(undefined);
+const Hero = forwardRef(function Hero({ children, testId = 'fs-hero', variant = 'primary', colorVariant = 'main', ...otherProps }, ref) {
+    const context = { variant, colorVariant };
+    return (React.createElement(HeroContext.Provider, { value: context },
+        React.createElement("article", { ref: ref, "data-fs-hero": true, "data-fs-hero-variant": variant, "data-fs-hero-color-variant": colorVariant, "data-testid": testId, ...otherProps }, children)));
+});
+export function useHero() {
+    const context = useContext(HeroContext);
+    if (context === undefined) {
+        throw new Error('Do not use Hero components outside the Hero context.');
+    }
+    return context;
+}
+export default Hero;
+//# sourceMappingURL=Hero.js.map

package/dist/organisms/Hero/Hero.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.js","sourceRoot":"","sources":["../../../src/organisms/Hero/Hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAWpE,MAAM,WAAW,GAAG,aAAa,CAA0B,SAAS,CAAC,CAAA;AAkBrE,MAAM,IAAI,GAAG,UAAU,CAA4B,SAAS,IAAI,CAC9D,EACE,QAAQ,EACR,MAAM,GAAG,SAAS,EAClB,OAAO,GAAG,SAAS,EACnB,YAAY,GAAG,MAAM,EACrB,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,OAAO,GAAG,EAAE,OAAO,EAAE,YAAY,EAAE,CAAA;IAEzC,OAAO,CACL,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO;QAClC,iCACE,GAAG,EAAE,GAAG,gDAEc,OAAO,gCACD,YAAY,iBAC3B,MAAM,KACf,UAAU,IAEb,QAAQ,CACD,CACW,CACxB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,UAAU,OAAO;IACrB,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IAEvC,IAAI,OAAO,KAAK,SAAS,EAAE;QACzB,MAAM,IAAI,KAAK,CAAC,sDAAsD,CAAC,CAAA;KACxE;IAED,OAAO,OAAO,CAAA;AAChB,CAAC;AAED,eAAe,IAAI,CAAA"}

package/dist/organisms/Hero/HeroHeading.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode, HTMLAttributes } from 'react';
+import React from 'react';
+export interface HeroHeadingProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Content for the h1 tag.
+     */
+    title: string;
+    /**
+     * Content for the p tag.
+     */
+    subtitle: string;
+    /**
+     * Icon component for additional customization.
+     */
+    icon?: ReactNode;
+    /**
+     * Specifies the URL the action button goes to.
+     */
+    link?: string;
+    /**
+     * Specifies the action button's content.
+     */
+    linkText?: string;
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+}
+declare const HeroHeading: React.ForwardRefExoticComponent<HeroHeadingProps & React.RefAttributes<HTMLDivElement>>;
+export default HeroHeading;

package/dist/organisms/Hero/HeroHeading.js

@@ -0,0 +1,16 @@
+import React, { forwardRef } from 'react';
+import { Icon, LinkButton } from '../..';
+import { ArrowRight } from '../../assets';
+import { useHero } from './Hero';
+const HeroHeading = forwardRef(function HeroHeading({ icon, link, title, linkText, subtitle, children, testId = 'fs-hero-heading', ...otherProps }, ref) {
+    const { variant, colorVariant } = useHero();
+    return (React.createElement("header", { ref: ref, "data-fs-hero-heading": true, "data-testid": testId, ...otherProps },
+        React.createElement("div", { "data-fs-hero-wrapper": true, className: "layout__content" },
+            React.createElement("div", { "data-fs-hero-info": true },
+                React.createElement("h1", { "data-fs-hero-title": true }, title),
+                React.createElement("p", { "data-fs-hero-subtitle": true }, subtitle),
+                !!link && (React.createElement(LinkButton, { href: link, inverse: colorVariant === 'main', icon: React.createElement(ArrowRight, null), iconPosition: "right" }, linkText))),
+            icon && variant === 'secondary' && (React.createElement(Icon, { "data-fs-hero-icon": true, component: icon })))));
+});
+export default HeroHeading;
+//# sourceMappingURL=HeroHeading.js.map

package/dist/organisms/Hero/HeroHeading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroHeading.js","sourceRoot":"","sources":["../../../src/organisms/Hero/HeroHeading.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AA6BhC,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EACE,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,MAAM,GAAG,iBAAiB,EAC1B,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,OAAO,EAAE,CAAA;IAE3C,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,+CAEK,MAAM,KACf,UAAU;QAEd,2DAA0B,SAAS,EAAC,iBAAiB;YACnD;gBACE,0DAAwB,KAAK,CAAM;gBACnC,4DAA0B,QAAQ,CAAK;gBACtC,CAAC,CAAC,IAAI,IAAI,CACT,oBAAC,UAAU,IACT,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,YAAY,KAAK,MAAM,EAChC,IAAI,EAAE,oBAAC,UAAU,OAAG,EACpB,YAAY,EAAC,OAAO,IAEnB,QAAQ,CACE,CACd,CACG;YACL,IAAI,IAAI,OAAO,KAAK,WAAW,IAAI,CAClC,oBAAC,IAAI,+BAAmB,SAAS,EAAE,IAAI,GAAI,CAC5C,CACG,CACC,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/organisms/Hero/HeroImage.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+export interface HeroImageProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+}
+declare const HeroImage: React.ForwardRefExoticComponent<HeroImageProps & React.RefAttributes<HTMLDivElement>>;
+export default HeroImage;

package/dist/organisms/Hero/HeroImage.js

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

package/dist/organisms/Hero/HeroImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroImage.js","sourceRoot":"","sources":["../../../src/organisms/Hero/HeroImage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AASzC,MAAM,SAAS,GAAG,UAAU,CAAiC,SAAS,SAAS,CAC7E,EAAE,QAAQ,EAAE,MAAM,GAAG,eAAe,EAAE,GAAG,UAAU,EAAE,EACrD,GAAG;IAEH,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,6CAAkC,MAAM,KAAM,UAAU,IAClE,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,SAAS,CAAA"}

package/dist/organisms/Hero/index.d.ts

@@ -0,0 +1,6 @@
+export { default } from './Hero';
+export type { HeroProps } from './Hero';
+export { default as HeroImage } from './HeroImage';
+export type { HeroImageProps } from './HeroImage';
+export { default as HeroHeading } from './HeroHeading';
+export type { HeroHeadingProps } from './HeroHeading';

package/dist/organisms/Hero/index.js

@@ -0,0 +1,4 @@
+export { default } from './Hero';
+export { default as HeroImage } from './HeroImage';
+export { default as HeroHeading } from './HeroHeading';
+//# sourceMappingURL=index.js.map

package/dist/organisms/Hero/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/organisms/Hero/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAGhC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAGlD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.17-alpha.0",
+  "version": "2.0.19-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": "63d93423c77df7aadbbd8ba8b5f9d39302e6fd3e"
+  "gitHead": "40266ca0a2dc46a9a3da1632caf5c8a264157efd"
 }

package/src/assets/ArrowRight.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import type { FC } from 'react'
+
+// Icon from Phosphor Icons
+const ArrowRight: FC = () => (
+  <svg
+    id="ArrowRight"
+    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>
+      <line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="24"></line>
+      <polyline points="144 56 216 128 144 200" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="24"></polyline>
+  </svg>
+)
+
+export default ArrowRight

package/src/assets/House.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import type { FC } from 'react'
+
+// Icon from Phosphor Icons
+const House: FC = () => (
+  <svg
+    id="House"
+    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>
+    <path d="M152,208V160a8,8,0,0,0-8-8H112a8,8,0,0,0-8,8v48a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V115.5a8.3,8.3,0,0,1,2.6-5.9l80-72.7a8,8,0,0,1,10.8,0l80,72.7a8.3,8.3,0,0,1,2.6,5.9V208a8,8,0,0,1-8,8H160A8,8,0,0,1,152,208Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="24"></path>
+  </svg>
+)
+
+export default House

package/src/assets/index.ts

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

package/src/index.ts

@@ -50,3 +50,15 @@ export { default as Toggle } from './molecules/Toggle'
 export type { ToggleProps } from './molecules/Toggle'
 export { default as ToggleField } from './molecules/ToggleField'
 export type { ToggleFieldProps } from './molecules/ToggleField'
+
+// Organisms
+export {
+  default as Hero,
+  HeroImage,
+  HeroHeading,
+} from './organisms/Hero'
+export type {
+  HeroProps,
+  HeroImageProps,
+  HeroHeadingProps,
+} from './organisms/Hero'

package/src/molecules/SelectField/SelectField.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react'
 import type { PropsWithChildren } from 'react'
-import Select from '../../atoms/Select'
-import type {SelectProps} from '../../atoms/Select'
-import Label from '../../atoms/Label'
+
+import { Label, Select } from '../..'
+import type { SelectProps } from '../../atoms/Select'
 
 export interface SelectFieldProps extends SelectProps {
   /**
@@ -11,18 +11,21 @@ export interface SelectFieldProps extends SelectProps {
   label: string
 }
 
-const SelectField = forwardRef<HTMLDivElement, PropsWithChildren<SelectFieldProps>>(
-  function SelectField(
-    { id, label, options, testId = 'fs-select-field', ...otherProps },
-    ref
-  ) {
-    return (
-      <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} {...otherProps} />
-      </div>
-    )
-  }
-)
+const SelectField = forwardRef<
+  HTMLDivElement,
+  PropsWithChildren<SelectFieldProps>
+>(function SelectField(
+  { id, label, options, testId = 'fs-select-field', ...otherProps },
+  ref
+) {
+  return (
+    <div ref={ref} data-fs-select-field>
+      <Label data-fs-select-field-label htmlFor={id}>
+        {label}
+      </Label>
+      <Select id={id} options={options} data-testid={testId} {...otherProps} />
+    </div>
+  )
+})
 
 export default SelectField

package/src/organisms/Hero/Hero.tsx

@@ -0,0 +1,68 @@
+import React, { forwardRef, useContext, createContext } from 'react'
+import type { HTMLAttributes } from 'react'
+
+type Variant = 'primary' | 'secondary'
+type ColorVariant = 'main' | 'light' | 'accent'
+
+interface HeroContext {
+  variant: Variant
+  colorVariant: ColorVariant
+}
+
+const HeroContext = createContext<HeroContext | undefined>(undefined)
+
+export interface HeroProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Specifies the component variant.
+   */
+  variant?: Variant
+  /**
+   * Specifies the component's color variant combination.
+   */
+  colorVariant?: ColorVariant
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+}
+
+const Hero = forwardRef<HTMLDivElement, HeroProps>(function Hero(
+  {
+    children,
+    testId = 'fs-hero',
+    variant = 'primary',
+    colorVariant = 'main',
+    ...otherProps
+  },
+  ref
+) {
+  const context = { variant, colorVariant }
+
+  return (
+    <HeroContext.Provider value={context}>
+      <article
+        ref={ref}
+        data-fs-hero
+        data-fs-hero-variant={variant}
+        data-fs-hero-color-variant={colorVariant}
+        data-testid={testId}
+        {...otherProps}
+      >
+        {children}
+      </article>
+    </HeroContext.Provider>
+  )
+})
+
+export function useHero() {
+  const context = useContext(HeroContext)
+
+  if (context === undefined) {
+    throw new Error('Do not use Hero components outside the Hero context.')
+  }
+
+  return context
+}
+
+export default Hero

package/src/organisms/Hero/HeroHeading.tsx

@@ -0,0 +1,82 @@
+import type { ReactNode, HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+import { Icon, LinkButton } from '../..'
+import { ArrowRight } from '../../assets'
+
+import { useHero } from './Hero'
+
+export interface HeroHeadingProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Content for the h1 tag.
+   */
+  title: string
+  /**
+   * Content for the p tag.
+   */
+  subtitle: string
+  /**
+   * Icon component for additional customization.
+   */
+  icon?: ReactNode
+  /**
+   * Specifies the URL the action button goes to.
+   */
+  link?: string
+  /**
+   * Specifies the action button's content.
+   */
+  linkText?: string
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const HeroHeading = forwardRef<HTMLDivElement, HeroHeadingProps>(
+  function HeroHeading(
+    {
+      icon,
+      link,
+      title,
+      linkText,
+      subtitle,
+      children,
+      testId = 'fs-hero-heading',
+      ...otherProps
+    },
+    ref
+  ) {
+    const { variant, colorVariant } = useHero()
+
+    return (
+      <header
+        ref={ref}
+        data-fs-hero-heading
+        data-testid={testId}
+        {...otherProps}
+      >
+        <div data-fs-hero-wrapper className="layout__content">
+          <div data-fs-hero-info>
+            <h1 data-fs-hero-title>{title}</h1>
+            <p data-fs-hero-subtitle>{subtitle}</p>
+            {!!link && (
+              <LinkButton
+                href={link}
+                inverse={colorVariant === 'main'}
+                icon={<ArrowRight />}
+                iconPosition="right"
+              >
+                {linkText}
+              </LinkButton>
+            )}
+          </div>
+          {icon && variant === 'secondary' && (
+            <Icon data-fs-hero-icon component={icon} />
+          )}
+        </div>
+      </header>
+    )
+  }
+)
+
+export default HeroHeading

package/src/organisms/Hero/HeroImage.tsx

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface HeroImageProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const HeroImage = forwardRef<HTMLDivElement, HeroImageProps>(function HeroImage(
+  { children, testId = 'fs-hero-image', ...otherProps },
+  ref
+) {
+  return (
+    <div ref={ref} data-fs-hero-image data-testid={testId} {...otherProps}>
+      {children}
+    </div>
+  )
+})
+
+export default HeroImage

package/src/organisms/Hero/index.tsx

@@ -0,0 +1,8 @@
+export { default } from './Hero'
+export type { HeroProps } from './Hero'
+
+export { default as HeroImage } from './HeroImage'
+export type { HeroImageProps } from './HeroImage'
+
+export { default as HeroHeading } from './HeroHeading'
+export type { HeroHeadingProps } from './HeroHeading'