@faststore/components 2.0.37-alpha.0 → 2.0.38-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.38-alpha.0](https://github.com/vtex/faststore/compare/v2.0.37-alpha.0...v2.0.38-alpha.0) (2023-01-09)
+
+
+### Features
+
+* Adds `Accordion` component  ([#1567](https://github.com/vtex/faststore/issues/1567)) ([0173e20](https://github.com/vtex/faststore/commit/0173e20b162d53d8faae0791e08110f335c6d6f6))
+
+
+
 ## 2.0.37-alpha.0 (2023-01-06)
 
 

package/dist/assets/MinusCircle.d.ts

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

package/dist/assets/MinusCircle.js

@@ -0,0 +1,8 @@
+import React from 'react';
+// Icon from Phosphor Icons
+const MinusCircle = () => (React.createElement("svg", { 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("circle", { cx: "128", cy: "128", r: "96", fill: "none", stroke: "currentColor", strokeMiterlimit: "10" }),
+    React.createElement("line", { x1: "88", y1: "128", x2: "168", y2: "128", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })));
+export default MinusCircle;
+//# sourceMappingURL=MinusCircle.js.map

package/dist/assets/MinusCircle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinusCircle.js","sourceRoot":"","sources":["../../src/assets/MinusCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,2BAA2B;AAC3B,MAAM,WAAW,GAAO,GAAG,EAAE,CAAC,CAC5B,6BACE,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,gCACE,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,gBAAgB,EAAC,IAAI,GACb;IACV,8BACE,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GAChB,CACJ,CACP,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/assets/PlusCircle.d.ts

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

package/dist/assets/PlusCircle.js

@@ -0,0 +1,9 @@
+import React from 'react';
+// Icon from Phosphor Icons
+const PlusCircle = () => (React.createElement("svg", { 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("circle", { cx: "128", cy: "128", r: "96", fill: "none", stroke: "currentColor", strokeMiterlimit: "10" }),
+    React.createElement("line", { x1: "88", y1: "128", x2: "168", y2: "128", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+    React.createElement("line", { x1: "128", y1: "88", x2: "128", y2: "168", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })));
+export default PlusCircle;
+//# sourceMappingURL=PlusCircle.js.map

package/dist/assets/PlusCircle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlusCircle.js","sourceRoot":"","sources":["../../src/assets/PlusCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,2BAA2B;AAC3B,MAAM,UAAU,GAAO,GAAG,EAAE,CAAC,CAC3B,6BACE,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,gCACE,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,gBAAgB,EAAC,IAAI,GACb;IACV,8BACE,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GAChB;IACR,8BACE,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GAChB,CACJ,CACP,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/assets/Ruler.js

@@ -1,6 +1,6 @@
 import React from 'react';
 // Icon from Phosphor Icons
-const Ruler = () => (React.createElement("svg", { id: "Ruler", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 256 256", strokeWidth: "16", width: 24, height: 24 },
+const Ruler = () => (React.createElement("svg", { 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("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" }),
     React.createElement("line", { x1: "132", y1: "60", x2: "164", y2: "92", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "24" }),

package/dist/assets/Ruler.js.map

@@ -1 +1 @@
-{"version":3,"file":"Ruler.js","sourceRoot":"","sources":["../../src/assets/Ruler.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,MAAM,EAAC,CAAC,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAC,EAAE,EAAC,GAAG,EAAC,SAAS,EAAC,gCAAgC,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,GAAQ;IAC9M,8BAAM,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,GAAQ;IAC/I,8BAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,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;IAC/I,8BAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,IAAI,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,CAC3I,CACP,CAAA;AAED,eAAe,KAAK,CAAA"}
+{"version":3,"file":"Ruler.js","sourceRoot":"","sources":["../../src/assets/Ruler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,2BAA2B;AAC3B,MAAM,KAAK,GAAO,GAAG,EAAE,CAAC,CACtB,6BACE,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,8BACE,CAAC,EAAC,MAAM,EACR,CAAC,EAAC,MAAM,EACR,KAAK,EAAC,OAAO,EACb,MAAM,EAAC,OAAO,EACd,EAAE,EAAC,GAAG,EACN,SAAS,EAAC,gCAAgC,EAC1C,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,IAAI,GACV;IACR,8BACE,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,IAAI,EACP,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,IAAI,GACV;IACR,8BACE,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,IAAI,GACV;IACR,8BACE,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,IAAI,GACV,CACJ,CACP,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/assets/index.d.ts

@@ -2,6 +2,8 @@ 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 MinusCircle } from './MinusCircle';
+export { default as PlusCircle } from './PlusCircle';
 export { default as Ruler } from './Ruler';
 export { default as ShoppingCart } from './ShoppingCart';
 export { default as X } from './X';

package/dist/assets/index.js

@@ -2,6 +2,8 @@ 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 MinusCircle } from './MinusCircle';
+export { default as PlusCircle } from './PlusCircle';
 export { default as Ruler } from './Ruler';
 export { default as ShoppingCart } from './ShoppingCart';
 export { default as X } from './X';

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,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,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"}
+{"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,WAAW,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,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

@@ -24,6 +24,8 @@ export type { RadioProps } from './atoms/Radio';
 export { default as Select } from './atoms/Select';
 export type { SelectProps } from './atoms/Select';
 export { default as SROnly } from './atoms/SROnly';
+export { default as Accordion, AccordionItem, AccordionButton, AccordionPanel, } from './molecules/Accordion';
+export type { AccordionProps, AccordionItemProps, AccordionButtonProps, AccordionPanelProps, } from './molecules/Accordion';
 export { default as BuyButton } from './molecules/BuyButton';
 export { default as CheckboxField } from './molecules/CheckboxField';
 export type { CheckboxFieldProps } from './molecules/CheckboxField';
@@ -47,5 +49,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 { default as Hero, HeroImage, HeroHeading } from './organisms/Hero';
 export type { HeroProps, HeroImageProps, HeroHeadingProps, } from './organisms/Hero';

package/dist/index.js

@@ -15,6 +15,7 @@ export { default as Radio } from './atoms/Radio';
 export { default as Select } from './atoms/Select';
 export { default as SROnly } from './atoms/SROnly';
 // Molecules
+export { default as Accordion, AccordionItem, AccordionButton, AccordionPanel, } from './molecules/Accordion';
 export { default as BuyButton } from './molecules/BuyButton';
 export { default as CheckboxField } from './molecules/CheckboxField';
 export { default as IconButton } from './molecules/IconButton';
@@ -28,5 +29,5 @@ 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';
+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,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,GACT,MAAM,mBAAmB,CAAA;AAS1B,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"}
+{"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,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,EACb,eAAe,EACf,cAAc,GACf,MAAM,uBAAuB,CAAA;AAO9B,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,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,GACT,MAAM,mBAAmB,CAAA;AAS1B,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,EAAE,OAAO,IAAI,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/molecules/Accordion/Accordion.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+interface AccordionContext {
+    indices: Set<number>;
+    onChange: (index: number) => void;
+    numberOfItems: number;
+}
+declare const AccordionContext: React.Context<AccordionContext | undefined>;
+export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string;
+    /**
+     * Indices that indicate which accordion items are opened.
+     */
+    indices: Iterable<number>;
+    /**
+     * Function that is triggered when an accordion item is opened/closed.
+     */
+    onChange: (index: number) => void;
+}
+declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
+export declare function useAccordion(): AccordionContext;
+export default Accordion;

package/dist/molecules/Accordion/Accordion.js

@@ -0,0 +1,21 @@
+import React, { useContext, cloneElement, forwardRef, createContext, } from 'react';
+const AccordionContext = createContext(undefined);
+const Accordion = forwardRef(function Accordion({ testId = 'fs-accordion', indices, onChange, children, ...otherProps }, ref) {
+    const childrenWithIndex = React.Children.map(children, (child, index) => cloneElement(child, { index: child.props.index ?? index }));
+    const context = {
+        indices: new Set(indices),
+        onChange,
+        numberOfItems: childrenWithIndex.length,
+    };
+    return (React.createElement(AccordionContext.Provider, { value: context },
+        React.createElement("div", { ref: ref, "data-fs-accordion": true, role: "region", "data-testid": testId, ...otherProps }, childrenWithIndex)));
+});
+export function useAccordion() {
+    const context = useContext(AccordionContext);
+    if (context === undefined) {
+        throw new Error('Do not use Accordion components outside the Accordion context.');
+    }
+    return context;
+}
+export default Accordion;
+//# sourceMappingURL=Accordion.js.map

package/dist/molecules/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/molecules/Accordion/Accordion.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,UAAU,EACV,YAAY,EACZ,UAAU,EACV,aAAa,GACd,MAAM,OAAO,CAAA;AAQd,MAAM,gBAAgB,GAAG,aAAa,CAA+B,SAAS,CAAC,CAAA;AAmB/E,MAAM,SAAS,GAAG,UAAU,CAAiC,SAAS,SAAS,CAC7E,EAAE,MAAM,GAAG,cAAc,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EACvE,GAAG;IAEH,MAAM,iBAAiB,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAC1C,QAAwB,EACxB,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,EAAE,CAAC,CAC7E,CAAA;IAED,MAAM,OAAO,GAAG;QACd,OAAO,EAAE,IAAI,GAAG,CAAC,OAAO,CAAC;QACzB,QAAQ;QACR,aAAa,EAAE,iBAAiB,CAAC,MAAM;KACxC,CAAA;IAED,OAAO,CACL,oBAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO;QACvC,6BACE,GAAG,EAAE,GAAG,6BAER,IAAI,EAAC,QAAQ,iBACA,MAAM,KACf,UAAU,IAEb,iBAAiB,CACd,CACoB,CAC7B,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,UAAU,YAAY;IAC1B,MAAM,OAAO,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAA;IAE5C,IAAI,OAAO,KAAK,SAAS,EAAE;QACzB,MAAM,IAAI,KAAK,CACb,gEAAgE,CACjE,CAAA;KACF;IAED,OAAO,OAAO,CAAA;AAChB,CAAC;AAED,eAAe,SAAS,CAAA"}

package/dist/molecules/Accordion/AccordionButton.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { ButtonProps } from '../..';
+export interface AccordionButtonProps extends ButtonProps {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+    /**
+     * A React component is rendered as an icon when the accordion is expanded.
+     */
+    expandedIcon?: ReactNode;
+    /**
+     * A React component is rendered as an icon when the accordion is collapsed.
+     */
+    collapsedIcon?: ReactNode;
+}
+declare const AccordionButton: React.ForwardRefExoticComponent<AccordionButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default AccordionButton;

package/dist/molecules/Accordion/AccordionButton.js

@@ -0,0 +1,37 @@
+import React, { forwardRef } from 'react';
+import { useAccordion } from './Accordion';
+import { useAccordionItem } from './AccordionItem';
+import { Button, MinusCircle, PlusCircle } from '../..';
+const AccordionButton = forwardRef(function AccordionButton({ testId = 'fs-accordion-button', expandedIcon = React.createElement(MinusCircle, { "data-icon": "expanded" }), collapsedIcon = React.createElement(PlusCircle, { "data-icon": "collapsed" }), children, ...otherProps }, ref) {
+    const { indices, onChange, numberOfItems } = useAccordion();
+    const { index, panel, button, prefixId } = useAccordionItem();
+    const onKeyDown = (event) => {
+        if (!['ArrowDown', 'ArrowUp'].includes(event.key)) {
+            return;
+        }
+        const getNext = () => {
+            const next = Number(index) + 1 === numberOfItems ? 0 : Number(index) + 1;
+            return document.getElementById(`${prefixId && `${prefixId}-`}button--${next}`);
+        };
+        const getPrevious = () => {
+            const previous = Number(index) - 1 < 0 ? numberOfItems - 1 : Number(index) - 1;
+            return document.getElementById(`${prefixId && `${prefixId}-`}button--${previous}`);
+        };
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                getNext()?.focus();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                getPrevious()?.focus();
+                break;
+            default:
+        }
+    };
+    return (React.createElement(Button, { ref: ref, id: button, "data-fs-accordion-button": true, "aria-expanded": indices.has(index), icon: indices.has(index) ? expandedIcon : collapsedIcon, iconPosition: "right", "aria-controls": panel, onKeyDown: onKeyDown, onClick: () => {
+            onChange(index);
+        }, "data-testid": testId, ...otherProps }, children));
+});
+export default AccordionButton;
+//# sourceMappingURL=AccordionButton.js.map

package/dist/molecules/Accordion/AccordionButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionButton.js","sourceRoot":"","sources":["../../../src/molecules/Accordion/AccordionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAElD,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAkBvD,MAAM,eAAe,GAAG,UAAU,CAChC,SAAS,eAAe,CACtB,EACE,MAAM,GAAG,qBAAqB,EAC9B,YAAY,GAAG,oBAAC,WAAW,iBAAW,UAAU,GAAG,EACnD,aAAa,GAAG,oBAAC,UAAU,iBAAW,WAAW,GAAG,EACpD,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,YAAY,EAAE,CAAA;IAC3D,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,gBAAgB,EAAE,CAAA;IAE7D,MAAM,SAAS,GAAG,CAAC,KAA0B,EAAE,EAAE;QAC/C,IAAI,CAAC,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;YACjD,OAAM;SACP;QAED,MAAM,OAAO,GAAG,GAAG,EAAE;YACnB,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;YAExE,OAAO,QAAQ,CAAC,cAAc,CAC5B,GAAG,QAAQ,IAAI,GAAG,QAAQ,GAAG,WAAW,IAAI,EAAE,CAC/C,CAAA;QACH,CAAC,CAAA;QAED,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,MAAM,QAAQ,GACZ,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;YAE/D,OAAO,QAAQ,CAAC,cAAc,CAC5B,GAAG,QAAQ,IAAI,GAAG,QAAQ,GAAG,WAAW,QAAQ,EAAE,CACnD,CAAA;QACH,CAAC,CAAA;QAED,QAAQ,KAAK,CAAC,GAAG,EAAE;YACjB,KAAK,WAAW;gBACd,KAAK,CAAC,cAAc,EAAE,CAAA;gBACtB,OAAO,EAAE,EAAE,KAAK,EAAE,CAAA;gBAClB,MAAK;YAEP,KAAK,SAAS;gBACZ,KAAK,CAAC,cAAc,EAAE,CAAA;gBACtB,WAAW,EAAE,EAAE,KAAK,EAAE,CAAA;gBACtB,MAAK;YAEP,QAAQ;SACT;IACH,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,MAAM,IACL,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,MAAM,qDAEK,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EACjC,IAAI,EAAE,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EACvD,YAAY,EAAC,OAAO,mBACL,KAAK,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE;YACZ,QAAQ,CAAC,KAAK,CAAC,CAAA;QACjB,CAAC,iBACY,MAAM,KACf,UAAU,IAEb,QAAQ,CACF,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/molecules/Accordion/AccordionItem.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { ElementType, HTMLAttributes, ReactElement } from 'react';
+import type { PolymorphicComponentPropsWithRef } from '../../typings';
+interface AccordionItemContext {
+    index: number;
+    panel: string;
+    button: string;
+    prefixId: string;
+}
+declare const AccordionItemContext: React.Context<AccordionItemContext | undefined>;
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string;
+    /**
+     * Index of the current accordion item within the accordion.
+     */
+    index?: number;
+    /**
+     * Namespace ID prefix for the current Accordion item's panel and button
+     * to avoid ID duplication when multiple instances are on the same page.
+     */
+    prefixId?: string;
+}
+export type AccordionItemProps<C extends ElementType> = PolymorphicComponentPropsWithRef<C, Props>;
+type AccordionItemComponent = <C extends ElementType = 'div'>(props: AccordionItemProps<C>) => ReactElement | null;
+declare const AccordionItem: AccordionItemComponent;
+export declare function useAccordionItem(): AccordionItemContext;
+export default AccordionItem;

package/dist/molecules/Accordion/AccordionItem.js

@@ -0,0 +1,22 @@
+import React, { useContext, forwardRef, createContext } from 'react';
+const AccordionItemContext = createContext(undefined);
+const AccordionItem = forwardRef(function AccordionItem({ prefixId = '', index = 0, as: MaybeComponent, children, testId = 'fs-accordion-item', ...otherProps }, ref) {
+    const Component = MaybeComponent ?? 'div';
+    const context = {
+        index,
+        prefixId,
+        panel: `${prefixId && `${prefixId}-`}panel--${index}`,
+        button: `${prefixId && `${prefixId}-`}button--${index}`,
+    };
+    return (React.createElement(AccordionItemContext.Provider, { value: context },
+        React.createElement(Component, { ref: ref, "data-fs-accordion-item": true, "data-testid": testId, ...otherProps }, children)));
+});
+export function useAccordionItem() {
+    const context = useContext(AccordionItemContext);
+    if (context === undefined) {
+        throw new Error('Do not use AccordionItem components outside the AccordionItem context.');
+    }
+    return context;
+}
+export default AccordionItem;
+//# sourceMappingURL=AccordionItem.js.map

package/dist/molecules/Accordion/AccordionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["../../../src/molecules/Accordion/AccordionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAcpE,MAAM,oBAAoB,GAAG,aAAa,CACxC,SAAS,CACV,CAAA;AA0BD,MAAM,aAAa,GAA2B,UAAU,CAAC,SAAS,aAAa,CAG7E,EACE,QAAQ,GAAG,EAAE,EACb,KAAK,GAAG,CAAC,EACT,EAAE,EAAE,cAAc,EAClB,QAAQ,EACR,MAAM,GAAG,mBAAmB,EAC5B,GAAG,UAAU,EACS,EACxB,GAAsB;IAEtB,MAAM,SAAS,GAAG,cAAc,IAAI,KAAK,CAAA;IAEzC,MAAM,OAAO,GAAG;QACd,KAAK;QACL,QAAQ;QACR,KAAK,EAAE,GAAG,QAAQ,IAAI,GAAG,QAAQ,GAAG,UAAU,KAAK,EAAE;QACrD,MAAM,EAAE,GAAG,QAAQ,IAAI,GAAG,QAAQ,GAAG,WAAW,KAAK,EAAE;KACxD,CAAA;IAED,OAAO,CACL,oBAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO;QAC3C,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,iDAEK,MAAM,KACf,UAAU,IAEb,QAAQ,CACC,CACkB,CACjC,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,UAAU,gBAAgB;IAC9B,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAA;IAEhD,IAAI,OAAO,KAAK,SAAS,EAAE;QACzB,MAAM,IAAI,KAAK,CACb,wEAAwE,CACzE,CAAA;KACF;IAED,OAAO,OAAO,CAAA;AAChB,CAAC;AAED,eAAe,aAAa,CAAA"}

package/dist/molecules/Accordion/AccordionPanel.d.ts

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

package/dist/molecules/Accordion/AccordionPanel.js

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { useAccordion } from './Accordion';
+import { useAccordionItem } from './AccordionItem';
+const AccordionPanel = forwardRef(function AccordionPanel({ testId = 'fs-accordion-panel', children, ...otherProps }, ref) {
+    const { indices } = useAccordion();
+    const { index, button, panel } = useAccordionItem();
+    return (React.createElement("div", { ref: ref, id: panel, "data-fs-accordion-panel": true, "aria-labelledby": button, role: "region", hidden: !indices.has(index), "data-testid": testId, ...otherProps }, children));
+});
+export default AccordionPanel;
+//# sourceMappingURL=AccordionPanel.js.map

package/dist/molecules/Accordion/AccordionPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionPanel.js","sourceRoot":"","sources":["../../../src/molecules/Accordion/AccordionPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAUlD,MAAM,cAAc,GAAG,UAAU,CAC/B,SAAS,cAAc,CACrB,EAAE,MAAM,GAAG,oBAAoB,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAC1D,GAAG;IAEH,MAAM,EAAE,OAAO,EAAE,GAAG,YAAY,EAAE,CAAA;IAClC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,gBAAgB,EAAE,CAAA;IAEnD,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,KAAK,sDAEQ,MAAM,EACvB,IAAI,EAAC,QAAQ,EACb,MAAM,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,iBACd,MAAM,KACf,UAAU,IAEb,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,cAAc,CAAA"}

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

@@ -0,0 +1,8 @@
+export { default } from './Accordion';
+export type { AccordionProps } from './Accordion';
+export { default as AccordionItem } from './AccordionItem';
+export type { AccordionItemProps } from './AccordionItem';
+export { default as AccordionButton } from './AccordionButton';
+export type { AccordionButtonProps } from './AccordionButton';
+export { default as AccordionPanel } from './AccordionPanel';
+export type { AccordionPanelProps } from './AccordionPanel';

package/dist/molecules/Accordion/index.js

@@ -0,0 +1,5 @@
+export { default } from './Accordion';
+export { default as AccordionItem } from './AccordionItem';
+export { default as AccordionButton } from './AccordionButton';
+export { default as AccordionPanel } from './AccordionPanel';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/Accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAGrC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAG1D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAG9D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.37-alpha.0",
+  "version": "2.0.38-alpha.0",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "author": "Emerson Laurentino @emersonlaurentino",
@@ -30,5 +30,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "dac60f1c06a9df8faf33752ec8f8c9737fed677d"
+  "gitHead": "ff1e76f11da2b7183fdef1a81917cae479a162a4"
 }

package/src/assets/MinusCircle.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import type { FC } from 'react'
+
+// Icon from Phosphor Icons
+const MinusCircle: FC = () => (
+  <svg
+    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>
+    <circle
+      cx="128"
+      cy="128"
+      r="96"
+      fill="none"
+      stroke="currentColor"
+      strokeMiterlimit="10"
+    ></circle>
+    <line
+      x1="88"
+      y1="128"
+      x2="168"
+      y2="128"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    ></line>
+  </svg>
+)
+
+export default MinusCircle

package/src/assets/PlusCircle.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import type { FC } from 'react'
+
+// Icon from Phosphor Icons
+const PlusCircle: FC = () => (
+  <svg
+    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>
+    <circle
+      cx="128"
+      cy="128"
+      r="96"
+      fill="none"
+      stroke="currentColor"
+      strokeMiterlimit="10"
+    ></circle>
+    <line
+      x1="88"
+      y1="128"
+      x2="168"
+      y2="128"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    ></line>
+    <line
+      x1="128"
+      y1="88"
+      x2="128"
+      y2="168"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    ></line>
+  </svg>
+)
+
+export default PlusCircle

package/src/assets/Ruler.tsx

@@ -4,7 +4,6 @@ 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"
@@ -13,10 +12,52 @@ const Ruler: FC = () => (
     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>
+    <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>
 )
 

package/src/assets/index.ts

@@ -2,6 +2,8 @@ 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 MinusCircle } from './MinusCircle'
+export { default as PlusCircle } from './PlusCircle'
 export { default as Ruler } from './Ruler'
 export { default as ShoppingCart } from './ShoppingCart'
 export { default as X } from './X'

package/src/index.ts

@@ -29,6 +29,18 @@ export type { SelectProps } from './atoms/Select'
 export { default as SROnly } from './atoms/SROnly'
 
 // Molecules
+export {
+  default as Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+} from './molecules/Accordion'
+export type {
+  AccordionProps,
+  AccordionItemProps,
+  AccordionButtonProps,
+  AccordionPanelProps,
+} from './molecules/Accordion'
 export { default as BuyButton } from './molecules/BuyButton'
 export { default as CheckboxField } from './molecules/CheckboxField'
 export type { CheckboxFieldProps } from './molecules/CheckboxField'
@@ -68,11 +80,7 @@ export { default as ToggleField } from './molecules/ToggleField'
 export type { ToggleFieldProps } from './molecules/ToggleField'
 
 // Organisms
-export {
-  default as Hero,
-  HeroImage,
-  HeroHeading,
-} from './organisms/Hero'
+export { default as Hero, HeroImage, HeroHeading } from './organisms/Hero'
 export type {
   HeroProps,
   HeroImageProps,

package/src/molecules/Accordion/Accordion.tsx

@@ -0,0 +1,76 @@
+import type { HTMLAttributes, ReactElement } from 'react'
+import React, {
+  useContext,
+  cloneElement,
+  forwardRef,
+  createContext,
+} from 'react'
+
+interface AccordionContext {
+  indices: Set<number>
+  onChange: (index: number) => void
+  numberOfItems: number
+}
+
+const AccordionContext = createContext<AccordionContext | undefined>(undefined)
+
+export interface AccordionProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  /**
+   * Indices that indicate which accordion items are opened.
+   */
+  indices: Iterable<number>
+  /**
+   * Function that is triggered when an accordion item is opened/closed.
+   */
+  onChange: (index: number) => void
+}
+
+const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(
+  { testId = 'fs-accordion', indices, onChange, children, ...otherProps },
+  ref
+) {
+  const childrenWithIndex = React.Children.map(
+    children as ReactElement,
+    (child, index) => cloneElement(child, { index: child.props.index ?? index })
+  )
+
+  const context = {
+    indices: new Set(indices),
+    onChange,
+    numberOfItems: childrenWithIndex.length,
+  }
+
+  return (
+    <AccordionContext.Provider value={context}>
+      <div
+        ref={ref}
+        data-fs-accordion
+        role="region"
+        data-testid={testId}
+        {...otherProps}
+      >
+        {childrenWithIndex}
+      </div>
+    </AccordionContext.Provider>
+  )
+})
+
+export function useAccordion() {
+  const context = useContext(AccordionContext)
+
+  if (context === undefined) {
+    throw new Error(
+      'Do not use Accordion components outside the Accordion context.'
+    )
+  }
+
+  return context
+}
+
+export default Accordion

package/src/molecules/Accordion/AccordionButton.tsx

@@ -0,0 +1,98 @@
+import React, { forwardRef } from 'react'
+import type { ReactNode } from 'react'
+
+import { useAccordion } from './Accordion'
+import { useAccordionItem } from './AccordionItem'
+
+import { Button, MinusCircle, PlusCircle } from '../..'
+import type { ButtonProps } from '../..'
+
+export interface AccordionButtonProps extends ButtonProps {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * A React component is rendered as an icon when the accordion is expanded.
+   */
+  expandedIcon?: ReactNode
+  /**
+   * A React component is rendered as an icon when the accordion is collapsed.
+   */
+  collapsedIcon?: ReactNode
+}
+
+const AccordionButton = forwardRef<HTMLButtonElement, AccordionButtonProps>(
+  function AccordionButton(
+    {
+      testId = 'fs-accordion-button',
+      expandedIcon = <MinusCircle data-icon="expanded" />,
+      collapsedIcon = <PlusCircle data-icon="collapsed" />,
+      children,
+      ...otherProps
+    },
+    ref
+  ) {
+    const { indices, onChange, numberOfItems } = useAccordion()
+    const { index, panel, button, prefixId } = useAccordionItem()
+
+    const onKeyDown = (event: React.KeyboardEvent) => {
+      if (!['ArrowDown', 'ArrowUp'].includes(event.key)) {
+        return
+      }
+
+      const getNext = () => {
+        const next = Number(index) + 1 === numberOfItems ? 0 : Number(index) + 1
+
+        return document.getElementById(
+          `${prefixId && `${prefixId}-`}button--${next}`
+        )
+      }
+
+      const getPrevious = () => {
+        const previous =
+          Number(index) - 1 < 0 ? numberOfItems - 1 : Number(index) - 1
+
+        return document.getElementById(
+          `${prefixId && `${prefixId}-`}button--${previous}`
+        )
+      }
+
+      switch (event.key) {
+        case 'ArrowDown':
+          event.preventDefault()
+          getNext()?.focus()
+          break
+
+        case 'ArrowUp':
+          event.preventDefault()
+          getPrevious()?.focus()
+          break
+
+        default:
+      }
+    }
+
+    return (
+      <Button
+        ref={ref}
+        id={button}
+        data-fs-accordion-button
+        aria-expanded={indices.has(index)}
+        icon={indices.has(index) ? expandedIcon : collapsedIcon}
+        iconPosition="right"
+        aria-controls={panel}
+        onKeyDown={onKeyDown}
+        onClick={() => {
+          onChange(index)
+        }}
+        data-testid={testId}
+        {...otherProps}
+      >
+        {children}
+      </Button>
+    )
+  }
+)
+
+export default AccordionButton

package/src/molecules/Accordion/AccordionItem.tsx

@@ -0,0 +1,91 @@
+import React, { useContext, forwardRef, createContext } from 'react'
+import type { ElementType, HTMLAttributes, ReactElement } from 'react'
+import type {
+  PolymorphicComponentPropsWithRef,
+  PolymorphicRef,
+} from '../../typings'
+
+interface AccordionItemContext {
+  index: number
+  panel: string
+  button: string
+  prefixId: string
+}
+
+const AccordionItemContext = createContext<AccordionItemContext | undefined>(
+  undefined
+)
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  /**
+   * Index of the current accordion item within the accordion.
+   */
+  index?: number
+  /**
+   * Namespace ID prefix for the current Accordion item's panel and button
+   * to avoid ID duplication when multiple instances are on the same page.
+   */
+  prefixId?: string
+}
+
+export type AccordionItemProps<C extends ElementType> =
+  PolymorphicComponentPropsWithRef<C, Props>
+
+type AccordionItemComponent = <C extends ElementType = 'div'>(
+  props: AccordionItemProps<C>
+) => ReactElement | null
+
+const AccordionItem: AccordionItemComponent = forwardRef(function AccordionItem<
+  C extends ElementType = 'div'
+>(
+  {
+    prefixId = '',
+    index = 0,
+    as: MaybeComponent,
+    children,
+    testId = 'fs-accordion-item',
+    ...otherProps
+  }: AccordionItemProps<C>,
+  ref: PolymorphicRef<C>
+) {
+  const Component = MaybeComponent ?? 'div'
+
+  const context = {
+    index,
+    prefixId,
+    panel: `${prefixId && `${prefixId}-`}panel--${index}`,
+    button: `${prefixId && `${prefixId}-`}button--${index}`,
+  }
+
+  return (
+    <AccordionItemContext.Provider value={context}>
+      <Component
+        ref={ref}
+        data-fs-accordion-item
+        data-testid={testId}
+        {...otherProps}
+      >
+        {children}
+      </Component>
+    </AccordionItemContext.Provider>
+  )
+})
+
+export function useAccordionItem() {
+  const context = useContext(AccordionItemContext)
+
+  if (context === undefined) {
+    throw new Error(
+      'Do not use AccordionItem components outside the AccordionItem context.'
+    )
+  }
+
+  return context
+}
+
+export default AccordionItem

package/src/molecules/Accordion/AccordionPanel.tsx

@@ -0,0 +1,40 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+import { useAccordion } from './Accordion'
+import { useAccordionItem } from './AccordionItem'
+
+export interface AccordionPanelProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const AccordionPanel = forwardRef<HTMLDivElement, AccordionPanelProps>(
+  function AccordionPanel(
+    { testId = 'fs-accordion-panel', children, ...otherProps },
+    ref
+  ) {
+    const { indices } = useAccordion()
+    const { index, button, panel } = useAccordionItem()
+
+    return (
+      <div
+        ref={ref}
+        id={panel}
+        data-fs-accordion-panel
+        aria-labelledby={button}
+        role="region"
+        hidden={!indices.has(index)}
+        data-testid={testId}
+        {...otherProps}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+
+export default AccordionPanel

package/src/molecules/Accordion/index.ts

@@ -0,0 +1,11 @@
+export { default } from './Accordion'
+export type { AccordionProps } from './Accordion'
+
+export { default as AccordionItem } from './AccordionItem'
+export type { AccordionItemProps } from './AccordionItem'
+
+export { default as AccordionButton } from './AccordionButton'
+export type { AccordionButtonProps } from './AccordionButton'
+
+export { default as AccordionPanel } from './AccordionPanel'
+export type { AccordionPanelProps } from './AccordionPanel'