@faststore/components 2.0.47-alpha.0 → 2.0.48-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.48-alpha.0 (2023-01-13)
+
+
+### Features
+
+* Adds `Alert` Component  ([#1590](https://github.com/vtex/faststore/issues/1590)) ([6e1cc00](https://github.com/vtex/faststore/commit/6e1cc004a5f3ae8674798fe6a36fd2a5d1451d7c))
+
+
+
 ## [2.0.47-alpha.0](https://github.com/vtex/faststore/compare/v2.0.46-alpha.0...v2.0.47-alpha.0) (2023-01-13)
 
 

package/dist/assets/Heart.d.ts

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

package/dist/assets/Heart.js

@@ -0,0 +1,7 @@
+import React from 'react';
+// Icon from Phosphor Icons
+const Heart = () => (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("path", { d: "M128,216S28,160,28,92A52,52,0,0,1,128,72h0A52,52,0,0,1,228,92C228,160,128,216,128,216Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })));
+export default Heart;
+//# sourceMappingURL=Heart.js.map

package/dist/assets/Heart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heart.js","sourceRoot":"","sources":["../../src/assets/Heart.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,8BAAM,CAAC,EAAC,wFAAwF,EAAE,MAAM,EAAC,cAAc,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,GAAQ,CACxK,CACP,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/assets/Star.d.ts

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

package/dist/assets/Star.js

@@ -0,0 +1,7 @@
+import React from 'react';
+// Icon from Phosphor Icons
+const Star = () => (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("path", { d: "M239.2,97.4A16.4,16.4,0,0,0,224.6,86l-59.4-4.1-22-55.5A16.4,16.4,0,0,0,128,16h0a16.4,16.4,0,0,0-15.2,10.4L90.4,82.2,31.4,86A16.5,16.5,0,0,0,16.8,97.4,16.8,16.8,0,0,0,22,115.5l45.4,38.4L53.9,207a18.5,18.5,0,0,0,7,19.6,18,18,0,0,0,20.1.6l46.9-29.7h.2l50.5,31.9a16.1,16.1,0,0,0,8.7,2.6,16.5,16.5,0,0,0,15.8-20.8l-14.3-58.1L234,115.5A16.8,16.8,0,0,0,239.2,97.4Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })));
+export default Star;
+//# sourceMappingURL=Star.js.map

package/dist/assets/Star.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Star.js","sourceRoot":"","sources":["../../src/assets/Star.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,2BAA2B;AAC3B,MAAM,IAAI,GAAO,GAAG,EAAE,CAAC,CACrB,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,8BAAM,CAAC,EAAC,uWAAuW,EAAC,MAAM,EAAC,cAAc,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,GAAQ,CACtb,CACP,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/assets/index.d.ts

@@ -2,6 +2,7 @@ export { default as ArrowRight } from './ArrowRight';
 export { default as ArrowElbowDownRight } from './ArrowElbowDownRight';
 export { default as CaretDown } from './CaretDown';
 export { default as Checked } from './Checked';
+export { default as Heart } from './Heart';
 export { default as House } from './House';
 export { default as Minus } from './Minus';
 export { default as Plus } from './Plus';
@@ -9,5 +10,6 @@ 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 Star } from './Star';
 export { default as X } from './X';
 export { default as XCircle } from './XCircle';

package/dist/assets/index.js

@@ -2,6 +2,7 @@ export { default as ArrowRight } from './ArrowRight';
 export { default as ArrowElbowDownRight } from './ArrowElbowDownRight';
 export { default as CaretDown } from './CaretDown';
 export { default as Checked } from './Checked';
+export { default as Heart } from './Heart';
 export { default as House } from './House';
 export { default as Minus } from './Minus';
 export { default as Plus } from './Plus';
@@ -9,6 +10,7 @@ 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 Star } from './Star';
 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,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AACtE,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,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,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"}
+{"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,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AACtE,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,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,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,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,OAAO,EAAE,OAAO,IAAI,CAAC,EAAE,MAAM,KAAK,CAAA;AAClC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA"}

package/dist/index.d.ts

@@ -26,6 +26,8 @@ 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 Alert } from './molecules/Alert';
+export type { AlertProps } from './molecules/Alert';
 export { default as BuyButton } from './molecules/BuyButton';
 export { default as CheckboxField } from './molecules/CheckboxField';
 export type { CheckboxFieldProps } from './molecules/CheckboxField';
@@ -41,6 +43,8 @@ export { default as LinkButton } from './molecules/LinkButton';
 export type { LinkButtonProps } from './molecules/LinkButton';
 export { default as RadioField } from './molecules/RadioField';
 export type { RadioFieldProps } from './molecules/RadioField';
+export { default as Rating } from './molecules/Rating';
+export type { RatingProps } from './molecules/Rating';
 export { default as SelectField } from './molecules/SelectField';
 export type { SelectFieldProps } from './molecules/SelectField';
 export { Table, TableBody, TableCell, TableFooter, TableHead, TableRow, } from './molecules/Table';

package/dist/index.js

@@ -16,6 +16,7 @@ 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 Alert } from './molecules/Alert';
 export { default as BuyButton } from './molecules/BuyButton';
 export { default as CheckboxField } from './molecules/CheckboxField';
 export { default as IconButton } from './molecules/IconButton';
@@ -24,6 +25,7 @@ export { default as Dropdown, DropdownButton, DropdownItem, DropdownMenu, } from
 export { default as InputField } from './molecules/InputField';
 export { default as LinkButton } from './molecules/LinkButton';
 export { default as RadioField } from './molecules/RadioField';
+export { default as Rating } from './molecules/Rating';
 export { default as SelectField } from './molecules/SelectField';
 export { Table, TableBody, TableCell, TableFooter, TableHead, TableRow, } from './molecules/Table';
 export { default as Tag } from './molecules/Tag';

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,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,EACL,OAAO,IAAI,QAAQ,EACnB,cAAc,EACd,YAAY,EACZ,YAAY,GACb,MAAM,sBAAsB,CAAA;AAO7B,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;AAEhE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAG1E,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,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,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEpD,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,EACL,OAAO,IAAI,QAAQ,EACnB,cAAc,EACd,YAAY,EACZ,YAAY,GACb,MAAM,sBAAsB,CAAA;AAO7B,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,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAEtD,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;AAEhE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAG1E,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/molecules/Alert/Alert.d.ts

@@ -0,0 +1,29 @@
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+import { LinkProps } from '../../index';
+import type { ReactNode, MouseEvent } from 'react';
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string;
+    /**
+     * Icon component for additional customization.
+     */
+    icon?: ReactNode;
+    /**
+     * Enables dismissible feature.
+     */
+    dismissible?: boolean;
+    /**
+     * Extends all Link Props.
+     */
+    link?: LinkProps;
+    /**
+     * Function called when dismiss button is clicked.
+     */
+    onClose?: (event: MouseEvent<HTMLElement>) => void;
+}
+declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+export default Alert;

package/dist/molecules/Alert/Alert.js

@@ -0,0 +1,21 @@
+import React, { forwardRef } from 'react';
+import { useCallback } from 'react';
+import { Button, Link, Icon } from '../../index';
+import { X } from '../../assets';
+const Alert = forwardRef(function Alert({ testId = 'fs-alert', children, icon, dismissible, link, onClose, ...otherProps }, ref) {
+    const handleClose = useCallback((event) => {
+        if (event.defaultPrevented) {
+            return;
+        }
+        onClose?.(event);
+    }, [onClose]);
+    return (React.createElement("div", { ref: ref, role: "alert", "data-fs-alert": true, "data-testid": testId, "data-fs-alert-dismissible": dismissible, ...otherProps },
+        icon && React.createElement(Icon, { component: icon }),
+        React.createElement("p", { "data-fs-alert-content": true }, children),
+        link && (React.createElement(Link, { "data-fs-alert-link": true, variant: "inline", ...link })),
+        dismissible && (React.createElement(Button, { "data-fs-alert-button": true, "aria-label": "Close", onClick: handleClose },
+            React.createElement("span", null,
+                React.createElement(Icon, { component: React.createElement(X, null) }))))));
+});
+export default Alert;
+//# sourceMappingURL=Alert.js.map

package/dist/molecules/Alert/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/molecules/Alert/Alert.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAEnC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAa,MAAM,aAAa,CAAA;AAE3D,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAA;AA6BhC,MAAM,KAAK,GAAG,UAAU,CAA6B,SAAS,KAAK,CAAC,EAClE,MAAM,GAAG,UAAU,EACnB,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,OAAO,EACP,GAAG,UAAU,EACd,EACC,GAAG;IACH,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAA8B,EAAE,EAAE;QACjC,IAAI,KAAK,CAAC,gBAAgB,EAAE;YAC1B,OAAM;SACP;QAED,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;IAClB,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAA;IACD,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,wCAEC,MAAM,+BACQ,WAAW,KAClC,UAAU;QAGb,IAAI,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,GAAI;QAElC,4DAA0B,QAAQ,CAAK;QAEtC,IAAI,IAAI,CACP,oBAAC,IAAI,gCAAoB,OAAO,EAAC,QAAQ,KAAK,IAAI,GAAI,CACvD;QAEA,WAAW,IAAI,CACd,oBAAC,MAAM,gDAAiC,OAAO,EAAC,OAAO,EAAE,WAAW;YAClE;gBACE,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAC,CAAC,OAAG,GAAI,CACrB,CACA,CACV,CACG,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,KAAK,CAAA"}

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

@@ -0,0 +1,2 @@
+export { default } from './Alert';
+export type { AlertProps } from './Alert';

package/dist/molecules/Alert/index.js

@@ -0,0 +1,2 @@
+export { default } from './Alert';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/Alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA"}

package/dist/molecules/Rating/Rating.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ReactNode } from 'react';
+import { HTMLAttributes } from 'react';
+export interface RatingProps extends Omit<HTMLAttributes<HTMLUListElement>, 'onChange'> {
+    /**
+     * The length of child elements.
+     */
+    length?: number;
+    /**
+     * The current value of the rating, based on the quantity of child elements.
+     */
+    value: number;
+    /**
+     * A React component that will be rendered as an icon.
+     */
+    icon: ReactNode;
+    /**
+     * Function to be triggered when Rating option change. This should only be used if you and an actionable rating list.
+     */
+    onChange?: (value: number) => void;
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+}
+export interface RatingItemProps {
+    'data-fs-rating-item'?: 'full' | 'partial' | 'empty';
+    'data-testid'?: string;
+}
+declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLUListElement>>;
+export default Rating;

package/dist/molecules/Rating/Rating.js

@@ -0,0 +1,26 @@
+import React, { forwardRef, useState } from 'react';
+import List from '../../atoms/List';
+import { Icon, IconButton } from '../..';
+const Rating = forwardRef(function Rating({ children, testId = 'fs-rating', length = 5, value = 0, icon, onChange, ...otherProps }, ref) {
+    const [hover, setHover] = useState(0);
+    return (React.createElement(List, { ref: ref, "data-fs-rating": true, "data-fs-rating-actionable": typeof onChange === 'function', "data-testid": testId, ...otherProps }, Array.from({ length }).map((_, index) => {
+        const tempIndex = index + 1;
+        const fillCheck = () => {
+            if (tempIndex <= (hover || value)) {
+                return 'full';
+            }
+            if (tempIndex - value > 0 && tempIndex - value < 1) {
+                return 'partial';
+            }
+            return 'empty';
+        };
+        return (React.createElement("li", { key: `rating-${index}`, "data-fs-rating-item": fillCheck(), "data-testid": `${testId}-item` }, onChange ? (React.createElement(IconButton, { "data-fs-rating-button": true, icon: icon, size: "small", "aria-label": "rate", onClick: () => {
+                onChange(tempIndex);
+            }, onMouseEnter: () => setHover(tempIndex), onMouseLeave: () => setHover(value) })) : (React.createElement(React.Fragment, null,
+            React.createElement("div", { "data-fs-rating-icon-wrapper": true },
+                React.createElement(Icon, { component: icon })),
+            React.createElement(Icon, { "data-fs-rating-icon-outline": true, component: icon })))));
+    })));
+});
+export default Rating;
+//# sourceMappingURL=Rating.js.map

package/dist/molecules/Rating/Rating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.js","sourceRoot":"","sources":["../../../src/molecules/Rating/Rating.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAInD,OAAO,IAAI,MAAM,kBAAkB,CAAA;AACnC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AA+BxC,MAAM,MAAM,GAAG,UAAU,CAAgC,SAAS,MAAM,CACtE,EACE,QAAQ,EACR,MAAM,GAAG,WAAW,EACpB,MAAM,GAAG,CAAC,EACV,KAAK,GAAG,CAAC,EACT,IAAI,EACJ,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAErC,OAAO,CACL,oBAAC,IAAI,IACH,GAAG,EAAE,GAAG,uDAEmB,OAAO,QAAQ,KAAK,UAAU,iBAC5C,MAAM,KACf,UAAU,IAEb,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAa,EAAE,EAAE;QAC/C,MAAM,SAAS,GAAG,KAAK,GAAG,CAAC,CAAA;QAE3B,MAAM,SAAS,GAAG,GAAG,EAAE;YACrB,IAAI,SAAS,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,EAAE;gBACjC,OAAO,MAAM,CAAA;aACd;YAED,IAAI,SAAS,GAAG,KAAK,GAAG,CAAC,IAAI,SAAS,GAAG,KAAK,GAAG,CAAC,EAAE;gBAClD,OAAO,SAAS,CAAA;aACjB;YAED,OAAO,OAAO,CAAA;QAChB,CAAC,CAAA;QAED,OAAO,CACL,4BACE,GAAG,EAAE,UAAU,KAAK,EAAE,yBACD,SAAS,EAAE,iBACnB,GAAG,MAAM,OAAO,IAE5B,QAAQ,CAAC,CAAC,CAAC,CACV,oBAAC,UAAU,mCAET,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,OAAO,gBACD,MAAM,EACjB,OAAO,EAAE,GAAG,EAAE;gBACZ,QAAQ,CAAC,SAAS,CAAC,CAAA;YACrB,CAAC,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,EACvC,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,GACnC,CACH,CAAC,CAAC,CAAC,CACF;YACE;gBACE,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,GAAI,CACrB;YACN,oBAAC,IAAI,yCAA6B,SAAS,EAAE,IAAI,GAAI,CACpD,CACJ,CACE,CACN,CAAA;IACH,CAAC,CAAC,CACG,CACR,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}

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

@@ -0,0 +1,2 @@
+export { default } from './Rating';
+export type { RatingProps } from './Rating';

package/dist/molecules/Rating/index.js

@@ -0,0 +1,2 @@
+export { default } from './Rating';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/Rating/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.47-alpha.0",
+  "version": "2.0.48-alpha.0",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "author": "Emerson Laurentino @emersonlaurentino",
@@ -21,8 +21,8 @@
     "src"
   ],
   "devDependencies": {
-    "@faststore/eslint-config": "^2.0.37-alpha.0",
-    "@faststore/shared": "^2.0.44-alpha.0",
+    "@faststore/eslint-config": "^2.0.48-alpha.0",
+    "@faststore/shared": "^2.0.48-alpha.0",
     "eslint": "7.32.0",
     "typescript": "^4.8.4"
   },
@@ -30,5 +30,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "3e7e16180416349dc8471b69ad9e305fd2f4d424"
+  "gitHead": "13071d1410c4d42df70946ba27631549d2544d85"
 }

package/src/assets/Heart.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import type { FC } from 'react'
+
+// Icon from Phosphor Icons
+const Heart: 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>
+    <path d="M128,216S28,160,28,92A52,52,0,0,1,128,72h0A52,52,0,0,1,228,92C228,160,128,216,128,216Z"  stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path>
+  </svg>
+)
+
+export default Heart

package/src/assets/Star.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import type { FC } from 'react'
+
+// Icon from Phosphor Icons
+const Star: 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>
+    <path d="M239.2,97.4A16.4,16.4,0,0,0,224.6,86l-59.4-4.1-22-55.5A16.4,16.4,0,0,0,128,16h0a16.4,16.4,0,0,0-15.2,10.4L90.4,82.2,31.4,86A16.5,16.5,0,0,0,16.8,97.4,16.8,16.8,0,0,0,22,115.5l45.4,38.4L53.9,207a18.5,18.5,0,0,0,7,19.6,18,18,0,0,0,20.1.6l46.9-29.7h.2l50.5,31.9a16.1,16.1,0,0,0,8.7,2.6,16.5,16.5,0,0,0,15.8-20.8l-14.3-58.1L234,115.5A16.8,16.8,0,0,0,239.2,97.4Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path>
+  </svg>
+)
+
+export default Star

package/src/assets/index.ts

@@ -2,6 +2,7 @@ export { default as ArrowRight } from './ArrowRight'
 export { default as ArrowElbowDownRight } from './ArrowElbowDownRight'
 export { default as CaretDown } from './CaretDown'
 export { default as Checked } from './Checked'
+export { default as Heart } from './Heart'
 export { default as House } from './House'
 export { default as Minus } from './Minus'
 export { default as Plus } from './Plus'
@@ -9,5 +10,6 @@ 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 Star } from './Star'
 export { default as X } from './X'
 export { default as XCircle } from './XCircle'

package/src/index.ts

@@ -41,6 +41,8 @@ export type {
   AccordionButtonProps,
   AccordionPanelProps,
 } from './molecules/Accordion'
+export { default as Alert } from './molecules/Alert'
+export type { AlertProps } from './molecules/Alert'
 export { default as BuyButton } from './molecules/BuyButton'
 export { default as CheckboxField } from './molecules/CheckboxField'
 export type { CheckboxFieldProps } from './molecules/CheckboxField'
@@ -66,6 +68,8 @@ export { default as LinkButton } from './molecules/LinkButton'
 export type { LinkButtonProps } from './molecules/LinkButton'
 export { default as RadioField } from './molecules/RadioField'
 export type { RadioFieldProps } from './molecules/RadioField'
+export { default as Rating } from './molecules/Rating'
+export type { RatingProps } from './molecules/Rating'
 export { default as SelectField } from './molecules/SelectField'
 export type { SelectFieldProps } from './molecules/SelectField'
 export {

package/src/molecules/Alert/Alert.tsx

@@ -0,0 +1,85 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+import { useCallback } from 'react'
+
+import { Button, Link, Icon, LinkProps } from '../../index'
+
+import { X } from '../../assets'
+
+import type { ReactNode, MouseEvent } from 'react'
+
+export interface AlertProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  /**
+   * Icon component for additional customization.
+   */
+  icon?: ReactNode
+  /**
+   * Enables dismissible feature.
+   */
+  dismissible?: boolean
+  /**
+   * Extends all Link Props.
+   */
+  link?: LinkProps
+  /**
+   * Function called when dismiss button is clicked.
+   */
+  onClose?: (event: MouseEvent<HTMLElement>) => void
+}
+
+const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert({
+  testId = 'fs-alert',
+  children,
+  icon,
+  dismissible,
+  link,
+  onClose,
+  ...otherProps
+},
+  ref) {
+  const handleClose = useCallback(
+    (event: MouseEvent<HTMLElement>) => {
+      if (event.defaultPrevented) {
+        return
+      }
+
+      onClose?.(event)
+    },
+    [onClose]
+  )
+  return (
+    <div
+      ref={ref}
+      role="alert"
+      data-fs-alert
+      data-testid={testId}
+      data-fs-alert-dismissible={dismissible}
+      {...otherProps}
+    >
+
+      {icon && <Icon component={icon} />}
+
+      <p data-fs-alert-content>{children}</p>
+
+      {link && (
+        <Link data-fs-alert-link variant="inline" {...link} />
+      )}
+
+      {dismissible && (
+        <Button data-fs-alert-button aria-label="Close" onClick={handleClose}>
+          <span>
+            <Icon component={<X />} />
+          </span>
+        </Button>
+      )}
+    </div>
+  )
+})
+
+export default Alert

package/src/molecules/Alert/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Alert'
+export type { AlertProps } from './Alert'

package/src/molecules/Rating/Rating.tsx

@@ -0,0 +1,107 @@
+import React, { forwardRef, useState } from 'react'
+import { ReactNode } from 'react'
+import { HTMLAttributes } from 'react'
+
+import List from '../../atoms/List'
+import { Icon, IconButton } from '../..'
+
+export interface RatingProps
+  extends Omit<HTMLAttributes<HTMLUListElement>, 'onChange'> {
+  /**
+   * The length of child elements.
+   */
+  length?: number
+  /**
+   * The current value of the rating, based on the quantity of child elements.
+   */
+  value: number
+  /**
+   * A React component that will be rendered as an icon.
+   */
+  icon: ReactNode
+  /**
+   * Function to be triggered when Rating option change. This should only be used if you and an actionable rating list.
+   */
+  onChange?: (value: number) => void
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+export interface RatingItemProps {
+  'data-fs-rating-item'?: 'full' | 'partial' | 'empty'
+  'data-testid'?: string
+}
+
+const Rating = forwardRef<HTMLUListElement, RatingProps>(function Rating(
+  {
+    children,
+    testId = 'fs-rating',
+    length = 5,
+    value = 0,
+    icon,
+    onChange,
+    ...otherProps
+  },
+  ref
+) {
+  const [hover, setHover] = useState(0)
+
+  return (
+    <List
+      ref={ref}
+      data-fs-rating
+      data-fs-rating-actionable={typeof onChange === 'function'}
+      data-testid={testId}
+      {...otherProps}
+    >
+      {Array.from({ length }).map((_, index: number) => {
+        const tempIndex = index + 1
+
+        const fillCheck = () => {
+          if (tempIndex <= (hover || value)) {
+            return 'full'
+          }
+
+          if (tempIndex - value > 0 && tempIndex - value < 1) {
+            return 'partial'
+          }
+
+          return 'empty'
+        }
+
+        return (
+          <li
+            key={`rating-${index}`}
+            data-fs-rating-item={fillCheck()}
+            data-testid={`${testId}-item`}
+          >
+            {onChange ? (
+              <IconButton
+                data-fs-rating-button
+                icon={icon}
+                size="small"
+                aria-label="rate"
+                onClick={() => {
+                  onChange(tempIndex)
+                }}
+                onMouseEnter={() => setHover(tempIndex)}
+                onMouseLeave={() => setHover(value)}
+              />
+            ) : (
+              <>
+                <div data-fs-rating-icon-wrapper>
+                  <Icon component={icon} />
+                </div>
+                <Icon data-fs-rating-icon-outline component={icon} />
+              </>
+            )}
+          </li>
+        )
+      })}
+    </List>
+  )
+})
+
+export default Rating

package/src/molecules/Rating/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Rating'
+export type { RatingProps } from './Rating'