@faststore/components 2.0.123-alpha.0 → 2.0.132-alpha.0

package/dist/molecules/Carousel/CarouselBullets.js

@@ -0,0 +1,12 @@
+import React, { forwardRef, useMemo } from 'react';
+import { Button } from '../..';
+const defaultAriaLabel = (id, idx, isActive) => isActive ? `Current page from ${id}` : `Go to page ${idx + 1} from ${id}`;
+const CarouselBullets = forwardRef(function Bullets({ id, totalQuantity, activeBullet, onClick, testId = 'fs-carousel-bullets', ariaLabelGenerator = defaultAriaLabel, ariaControlsGenerator, ...otherProps }, ref) {
+    const bulletIndexes = useMemo(() => Array(totalQuantity).fill(0), [totalQuantity]);
+    return (React.createElement("div", { ref: ref, "data-fs-carousel-bullets": true, "data-testid": testId, role: "tablist", ...otherProps }, bulletIndexes.map((_, idx) => {
+        const isActive = activeBullet === idx;
+        return (React.createElement(Button, { key: `${id}-${idx}`, role: "tab", tabIndex: -1, "data-fs-carousel-bullet": true, testId: `${testId}-bullet`, onClick: (e) => onClick(e, idx), "aria-label": ariaLabelGenerator(id, idx, isActive), "aria-controls": ariaControlsGenerator?.(idx), "aria-selected": isActive }));
+    })));
+});
+export default CarouselBullets;
+//# sourceMappingURL=CarouselBullets.js.map

package/dist/molecules/Carousel/CarouselBullets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselBullets.js","sourceRoot":"","sources":["../../../src/molecules/Carousel/CarouselBullets.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAuC9B,MAAM,gBAAgB,GAAG,CAAC,EAAU,EAAE,GAAW,EAAE,QAAiB,EAAE,EAAE,CACtE,QAAQ,CAAC,CAAC,CAAC,qBAAqB,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,GAAG,GAAG,CAAC,SAAS,EAAE,EAAE,CAAA;AAE3E,MAAM,eAAe,GAAG,UAAU,CAChC,SAAS,OAAO,CACd,EACE,EAAE,EACF,aAAa,EACb,YAAY,EACZ,OAAO,EACP,MAAM,GAAG,qBAAqB,EAC9B,kBAAkB,GAAG,gBAAgB,EACrC,qBAAqB,EACrB,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAClC,CAAC,aAAa,CAAC,CAChB,CAAA;IAED,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,mDAEK,MAAM,EACnB,IAAI,EAAC,SAAS,KACV,UAAU,IAEb,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;QAC5B,MAAM,QAAQ,GAAG,YAAY,KAAK,GAAG,CAAA;QAErC,OAAO,CACL,oBAAC,MAAM,IACL,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,EAAE,EACnB,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,CAAC,CAAC,mCAEZ,MAAM,EAAE,GAAG,MAAM,SAAS,EAC1B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,GAAG,CAAC,gBACnB,kBAAkB,CAAC,EAAE,EAAE,GAAG,EAAE,QAAQ,CAAC,mBAClC,qBAAqB,EAAE,CAAC,GAAG,CAAC,mBAC5B,QAAQ,GACvB,CACH,CAAA;IACH,CAAC,CAAC,CACE,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/molecules/Carousel/CarouselItem.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+import { SliderState } from '../../hooks';
+export interface CarouselItemProps extends HTMLAttributes<HTMLLIElement> {
+    index: number;
+    totalItems: number;
+    state: SliderState;
+    infiniteMode: boolean;
+    isScrollCarousel: boolean;
+}
+declare function CarouselItem({ id, index, state, children, totalItems, infiniteMode, isScrollCarousel, }: PropsWithChildren<CarouselItemProps>): JSX.Element;
+export default CarouselItem;

package/dist/molecules/Carousel/CarouselItem.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useSlideVisibility } from '../../hooks';
+function CarouselItem({ id, index, state, children, totalItems, infiniteMode, isScrollCarousel, }) {
+    const { isItemVisible, shouldRenderItem } = useSlideVisibility({
+        totalItems,
+        currentSlide: state.currentItem,
+        itemsPerPage: state.itemsPerPage,
+    });
+    const style = (!isScrollCarousel && { width: '100%' }) ||
+        (isScrollCarousel && {
+            maxWidth: '60%',
+            display: 'inline-block',
+        });
+    const shouldDisplayItem = isScrollCarousel || shouldRenderItem(index - Number(infiniteMode));
+    return (React.createElement("li", { style: style, "data-fs-carousel-item": true, "aria-roledescription": "slide", id: `${id}-carousel-item-${index}`, "data-fs-carousel-item-visible": isItemVisible(index - Number(infiniteMode)) || undefined }, shouldDisplayItem ? children : null));
+}
+export default CarouselItem;
+//# sourceMappingURL=CarouselItem.js.map

package/dist/molecules/Carousel/CarouselItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselItem.js","sourceRoot":"","sources":["../../../src/molecules/Carousel/CarouselItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAe,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAU7D,SAAS,YAAY,CAAC,EACpB,EAAE,EACF,KAAK,EACL,KAAK,EACL,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,gBAAgB,GACqB;IACrC,MAAM,EAAE,aAAa,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,CAAC;QAC7D,UAAU;QACV,YAAY,EAAE,KAAK,CAAC,WAAW;QAC/B,YAAY,EAAE,KAAK,CAAC,YAAY;KACjC,CAAC,CAAA;IAEF,MAAM,KAAK,GACR,CAAC,CAAC,gBAAgB,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,CAAmB;QAC1D,CAAC,gBAAgB,IAAI;YACpB,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE,cAAc;SACxB,CAAmB,CAAA;IAEtB,MAAM,iBAAiB,GACrB,gBAAgB,IAAI,gBAAgB,CAAC,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,CAAA;IAEpE,OAAO,CACL,4BACE,KAAK,EAAE,KAAK,yDAES,OAAO,EAC5B,EAAE,EAAE,GAAG,EAAE,kBAAkB,KAAK,EAAE,mCAEhC,aAAa,CAAC,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI,SAAS,IAGzD,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CACjC,CACN,CAAA;AACH,CAAC;AAED,eAAe,YAAY,CAAA"}

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

@@ -0,0 +1,6 @@
+export { default } from './Carousel';
+export type { CarouselProps } from './Carousel';
+export { default as CarouselItem } from './CarouselItem';
+export type { CarouselItemProps } from './CarouselItem';
+export { default as CarouselBullets } from './CarouselBullets';
+export type { CarouselBulletsProps } from './CarouselBullets';

package/dist/molecules/Carousel/index.js

@@ -0,0 +1,4 @@
+export { default } from './Carousel';
+export { default as CarouselItem } from './CarouselItem';
+export { default as CarouselBullets } from './CarouselBullets';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/Carousel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAGpC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAGxD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAA"}

package/dist/molecules/IconButton/IconButton.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import { Button } from '../../';
-const IconButton = forwardRef(function IconButton({ icon, children, testId = 'fs-icon-button', 'aria-label': ariaLabel, variant, ...otherProps }, ref) {
-    return (React.createElement(Button, { ref: ref, "data-fs-button": true, "data-fs-icon-button": true, variant: variant ?? 'tertiary', icon: icon, "aria-label": ariaLabel, testId: testId, ...otherProps }, children));
+const IconButton = forwardRef(function IconButton({ icon, children, testId = 'fs-icon-button', 'aria-label': ariaLabel, size = 'regular', variant, ...otherProps }, ref) {
+    return (React.createElement(Button, { ref: ref, "data-fs-button": true, "data-fs-icon-button": true, variant: variant ?? 'tertiary', icon: icon, "aria-label": ariaLabel, testId: testId, size: size, ...otherProps }, children));
 });
 export default IconButton;
 //# sourceMappingURL=IconButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../src/molecules/IconButton/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAkB/B,MAAM,UAAU,GAAG,UAAU,CAC3B,SAAS,UAAU,CACjB,EACE,IAAI,EACJ,QAAQ,EACR,MAAM,GAAG,gBAAgB,EACzB,YAAY,EAAE,SAAS,EACvB,OAAO,EACP,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,oBAAC,MAAM,IACL,GAAG,EAAE,GAAG,uDAGR,OAAO,EAAE,OAAO,IAAI,UAAU,EAC9B,IAAI,EAAE,IAAI,gBACE,SAAS,EACrB,MAAM,EAAE,MAAM,KACV,UAAU,IAEb,QAAQ,CACF,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../src/molecules/IconButton/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAkB/B,MAAM,UAAU,GAAG,UAAU,CAC3B,SAAS,UAAU,CACjB,EACE,IAAI,EACJ,QAAQ,EACR,MAAM,GAAG,gBAAgB,EACzB,YAAY,EAAE,SAAS,EACvB,IAAI,GAAG,SAAS,EAChB,OAAO,EACP,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,oBAAC,MAAM,IACL,GAAG,EAAE,GAAG,uDAGR,OAAO,EAAE,OAAO,IAAI,UAAU,EAC9B,IAAI,EAAE,IAAI,gBACE,SAAS,EACrB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,KACN,UAAU,IAEb,QAAQ,CACF,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/molecules/InputField/InputField.js

@@ -8,7 +8,7 @@ inputRef, disabled, value, testId = 'fs-input-field', ...otherProps }) => {
         React.createElement(Input, { id: id, type: type, value: value, ref: inputRef, disabled: disabled, placeholder: placeholder, ...otherProps }),
         React.createElement(Label, { htmlFor: id }, label),
         shouldDisplayButton &&
-            (displayClearButton || error ? (React.createElement(IconButton, { "data-fs-button-size": "small", "aria-label": "Clear Field", icon: React.createElement(Icon, { name: "XCircle" }), onClick: () => {
+            (displayClearButton || error ? (React.createElement(IconButton, { size: "small", "aria-label": "Clear Field", icon: React.createElement(Icon, { name: "XCircle" }), onClick: () => {
                     onClear?.();
                     inputRef?.current?.focus();
                 } })) : (React.createElement(Button, { variant: "tertiary", size: "small", onClick: onSubmit }, buttonActionText))),

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

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

package/dist/molecules/LinkButton/LinkButton.js

@@ -8,9 +8,10 @@ function LinkButton({ icon, inverse, children, disabled, iconPosition, size = 'r
         }
     }
     return (React.createElement("a", { ref: linkRef, "data-fs-button": true, "data-fs-link-button": true, "data-fs-button-size": size, "data-fs-button-variant": variant, "data-fs-button-inverse": inverse, "data-fs-button-disabled": disabled, onFocus: onFocus, "data-testid": testId, ...otherProps },
-        React.isValidElement(icon) && iconPosition === 'left' && icon,
-        children,
-        React.isValidElement(icon) && iconPosition === 'right' && icon));
+        React.createElement("div", { "data-fs-button-wrapper": true },
+            React.isValidElement(icon) && iconPosition === 'left' && React.createElement("span", { "data-fs-button-icon": true }, icon),
+            children && React.createElement("span", null, children),
+            React.isValidElement(icon) && iconPosition === 'right' && React.createElement("span", { "data-fs-button-icon": true }, icon))));
 }
 export default LinkButton;
 //# sourceMappingURL=LinkButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LinkButton.js","sourceRoot":"","sources":["../../../src/molecules/LinkButton/LinkButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAOrC,SAAS,UAAU,CAAC,EAClB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,IAAI,GAAG,SAAS,EAChB,OAAO,GAAG,SAAS,EACnB,MAAM,GAAG,gBAAgB,EACzB,GAAG,UAAU,EACG;IAChB,MAAM,OAAO,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAA;IAEtD,SAAS,OAAO,CAAC,CAAa;QAC5B,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,IAAI,QAAQ,EAAE;YACZ,OAAO,CAAC,OAAO,EAAE,IAAI,EAAE,CAAA;SACxB;IACH,CAAC;IAED,OAAO,CACL,2BACE,GAAG,EAAE,OAAO,8EAGS,IAAI,4BACD,OAAO,4BACP,OAAO,6BACN,QAAQ,EACjC,OAAO,EAAE,OAAO,iBACH,MAAM,KACf,UAAU;QAEb,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,YAAY,KAAK,MAAM,IAAI,IAAI;QAC7D,QAAQ;QACR,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,YAAY,KAAK,OAAO,IAAI,IAAI,CAC7D,CACL,CAAA;AACH,CAAC;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"LinkButton.js","sourceRoot":"","sources":["../../../src/molecules/LinkButton/LinkButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAOrC,SAAS,UAAU,CAAC,EAClB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,IAAI,GAAG,SAAS,EAChB,OAAO,GAAG,SAAS,EACnB,MAAM,GAAG,gBAAgB,EACzB,GAAG,UAAU,EACG;IAChB,MAAM,OAAO,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAA;IAEtD,SAAS,OAAO,CAAC,CAAa;QAC5B,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,IAAI,QAAQ,EAAE;YACZ,OAAO,CAAC,OAAO,EAAE,IAAI,EAAE,CAAA;SACxB;IACH,CAAC;IAED,OAAO,CACL,2BACE,GAAG,EAAE,OAAO,8EAGS,IAAI,4BACD,OAAO,4BACP,OAAO,6BACN,QAAQ,EACjC,OAAO,EAAE,OAAO,iBACH,MAAM,KACf,UAAU;QAEd;YACG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,YAAY,KAAK,MAAM,IAAI,6DAA2B,IAAI,CAAQ;YAChG,QAAQ,IAAI,kCAAO,QAAQ,CAAQ;YACnC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,YAAY,KAAK,OAAO,IAAI,6DAA2B,IAAI,CAAQ,CAC9F,CACJ,CACL,CAAA;AACH,CAAC;AAED,eAAe,UAAU,CAAA"}

package/dist/molecules/QuantitySelector/QuantitySelector.js

@@ -29,9 +29,9 @@ const QuantitySelector = ({ max, min = 1, initial, disabled = false, onChange, t
         initial && setQuantity(initial);
     }, [initial]);
     return (React.createElement("div", { "data-fs-quantity-selector": disabled ? 'disabled' : 'true', "data-testid": testId, ...otherProps },
-        React.createElement(IconButton, { "data-quantity-selector-button": "left", icon: React.createElement(Icon, { name: "Minus", width: 16, height: 16, weight: "bold" }), "aria-label": "Decrement Quantity", "aria-controls": "quantity-selector-input", disabled: isLeftDisabled || disabled, onClick: decrease, testId: `${testId}-left-button` }),
+        React.createElement(IconButton, { "data-quantity-selector-button": "left", icon: React.createElement(Icon, { name: "Minus", width: 16, height: 16, weight: "bold" }), "aria-label": "Decrement Quantity", "aria-controls": "quantity-selector-input", disabled: isLeftDisabled || disabled, onClick: decrease, testId: `${testId}-left-button`, size: "small" }),
         React.createElement(Input, { "data-quantity-selector-input": true, id: "quantity-selector-input", "aria-label": "Quantity", value: quantity, onChange: validateInput, disabled: disabled }),
-        React.createElement(IconButton, { "data-quantity-selector-button": "right", "aria-controls": "quantity-selector-input", "aria-label": "Increment Quantity", disabled: isRightDisabled || disabled, icon: React.createElement(Icon, { name: "Plus", width: 16, height: 16, weight: "bold" }), onClick: increase, testId: `${testId}-right-button` })));
+        React.createElement(IconButton, { "data-quantity-selector-button": "right", "aria-controls": "quantity-selector-input", "aria-label": "Increment Quantity", disabled: isRightDisabled || disabled, icon: React.createElement(Icon, { name: "Plus", width: 16, height: 16, weight: "bold" }), onClick: increase, testId: `${testId}-right-button`, size: "small" })));
 };
 export default QuantitySelector;
 //# sourceMappingURL=QuantitySelector.js.map

package/dist/molecules/QuantitySelector/QuantitySelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuantitySelector.js","sourceRoot":"","sources":["../../../src/molecules/QuantitySelector/QuantitySelector.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"QuantitySelector.js","sourceRoot":"","sources":["../../../src/molecules/QuantitySelector/QuantitySelector.tsx"],"names":[],"mappings":"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"}

package/dist/molecules/RegionBar/RegionBar.js

@@ -2,12 +2,11 @@ import React, { forwardRef } from 'react';
 import { Button, Icon } from '../../';
 const RegionBar = forwardRef(function RegionBar({ postalCode, onButtonClick, ...otherProps }, ref) {
     return (React.createElement("div", { ref: ref, "data-fs-region-bar": true, ...otherProps },
-        React.createElement(Button, { onClick: onButtonClick },
+        React.createElement(Button, { onClick: onButtonClick, iconPosition: "right", icon: React.createElement(Icon, { name: "CaretRight" }) },
             React.createElement(Icon, { name: "MapPin" }),
             postalCode ? (React.createElement(React.Fragment, null,
                 React.createElement("span", { "data-fs-region-bar-postal-code": true }, postalCode),
-                React.createElement("span", { "data-fs-region-bar-cta": true }, "Edit"))) : (React.createElement("span", { "data-fs-region-bar-message": true }, "Set your location")),
-            React.createElement(Icon, { name: "CaretRight" }))));
+                React.createElement("span", { "data-fs-region-bar-cta": true }, "Edit"))) : (React.createElement("span", { "data-fs-region-bar-message": true }, "Set your location")))));
 });
 export default RegionBar;
 //# sourceMappingURL=RegionBar.js.map

package/dist/molecules/RegionBar/RegionBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"RegionBar.js","sourceRoot":"","sources":["../../../src/molecules/RegionBar/RegionBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAarC,MAAM,SAAS,GAAG,UAAU,CAAiC,SAAS,SAAS,CAC7E,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,UAAU,EAAE,EAC5C,GAAG;IAEH,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,iCAAyB,UAAU;QAC9C,oBAAC,MAAM,IAAC,OAAO,EAAE,aAAa;YAC5B,oBAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG;YACrB,UAAU,CAAC,CAAC,CAAC,CACZ;gBACE,wEAAsC,UAAU,CAAQ;gBACxD,uEAAwC,CACvC,CACJ,CAAC,CAAC,CAAC,CACF,wFAAyD,CAC1D;YACD,oBAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,CACnB,CACL,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,SAAS,CAAA"}
+{"version":3,"file":"RegionBar.js","sourceRoot":"","sources":["../../../src/molecules/RegionBar/RegionBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAarC,MAAM,SAAS,GAAG,UAAU,CAAiC,SAAS,SAAS,CAC7E,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,UAAU,EAAE,EAC5C,GAAG;IAEH,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,iCAAyB,UAAU;QAC9C,oBAAC,MAAM,IAAC,OAAO,EAAE,aAAa,EAAE,YAAY,EAAC,OAAO,EAAC,IAAI,EAAE,oBAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG;YACnF,oBAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG;YACrB,UAAU,CAAC,CAAC,CAAC,CACZ;gBACE,wEAAsC,UAAU,CAAQ;gBACxD,uEAAwC,CACvC,CACJ,CAAC,CAAC,CAAC,CACF,wFAAyD,CAC1D,CACM,CACL,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,SAAS,CAAA"}

package/dist/molecules/SearchInputField/SearchInputField.js

@@ -15,7 +15,7 @@ const SearchInputField = forwardRef(function SearchInputField({ onSubmit, button
     }));
     return (React.createElement("form", { ref: formRef, "data-fs-search-input-field": true, "data-testid": testId, onSubmit: handleSubmit, role: "search" },
         React.createElement(Input, { ref: inputRef, "aria-label": ariaLabel, "data-fs-search-input-field-input": true, ...otherProps }),
-        React.createElement(IconButton, { "data-fs-icon-button": "null", type: "submit", "aria-label": "Submit Search", icon: buttonIcon ?? React.createElement(Icon, { name: "MagnifyingGlass" }), ...buttonProps })));
+        React.createElement(IconButton, { type: "submit", "aria-label": "Submit Search", icon: buttonIcon ?? React.createElement(Icon, { name: "MagnifyingGlass" }), size: "small", ...buttonProps })));
 });
 export default SearchInputField;
 //# sourceMappingURL=SearchInputField.js.map

package/dist/molecules/SearchInputField/SearchInputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInputField.js","sourceRoot":"","sources":["../../../src/molecules/SearchInputField/SearchInputField.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEtE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,OAAO,CAAA;AAqC/C,MAAM,gBAAgB,GAAG,UAAU,CAGjC,SAAS,gBAAgB,CACzB,EACE,QAAQ,EACR,UAAU,EACV,YAAY,EAAE,SAAS,GAAG,QAAQ,EAClC,MAAM,GAAG,iBAAiB,EAC1B,WAAW,EACX,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAA;IAC/C,MAAM,OAAO,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAA;IAE7C,MAAM,YAAY,GAAG,CAAC,KAAgB,EAAE,EAAE;QACxC,KAAK,CAAC,cAAc,EAAE,CAAA;QAEtB,IAAI,QAAQ,CAAC,OAAO,EAAE,KAAK,KAAK,EAAE,EAAE;YAClC,QAAQ,CAAC,QAAQ,CAAC,OAAQ,CAAC,KAAK,CAAC,CAAA;SAClC;IACH,CAAC,CAAA;IAED,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,QAAQ,EAAE,QAAQ,CAAC,OAAO;QAC1B,OAAO,EAAE,OAAO,CAAC,OAAO;KACzB,CAAC,CAAC,CAAA;IAEH,OAAO,CACL,8BACE,GAAG,EAAE,OAAO,qDAEC,MAAM,EACnB,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAC,QAAQ;QAEb,oBAAC,KAAK,IACJ,GAAG,EAAE,QAAQ,gBACD,SAAS,+CAEjB,UAAU,GACd;QACF,oBAAC,UAAU,2BACW,MAAM,EAC1B,IAAI,EAAC,QAAQ,gBACF,eAAe,EAC1B,IAAI,EAAE,UAAU,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAC,iBAAiB,GAAG,KAC/C,WAAW,GACf,CACG,CACR,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"SearchInputField.js","sourceRoot":"","sources":["../../../src/molecules/SearchInputField/SearchInputField.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEtE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,OAAO,CAAA;AAqC/C,MAAM,gBAAgB,GAAG,UAAU,CAGjC,SAAS,gBAAgB,CACzB,EACE,QAAQ,EACR,UAAU,EACV,YAAY,EAAE,SAAS,GAAG,QAAQ,EAClC,MAAM,GAAG,iBAAiB,EAC1B,WAAW,EACX,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAA;IAC/C,MAAM,OAAO,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAA;IAE7C,MAAM,YAAY,GAAG,CAAC,KAAgB,EAAE,EAAE;QACxC,KAAK,CAAC,cAAc,EAAE,CAAA;QAEtB,IAAI,QAAQ,CAAC,OAAO,EAAE,KAAK,KAAK,EAAE,EAAE;YAClC,QAAQ,CAAC,QAAQ,CAAC,OAAQ,CAAC,KAAK,CAAC,CAAA;SAClC;IACH,CAAC,CAAA;IAED,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,QAAQ,EAAE,QAAQ,CAAC,OAAO;QAC1B,OAAO,EAAE,OAAO,CAAC,OAAO;KACzB,CAAC,CAAC,CAAA;IAEH,OAAO,CACL,8BACE,GAAG,EAAE,OAAO,qDAEC,MAAM,EACnB,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAC,QAAQ;QAEb,oBAAC,KAAK,IACJ,GAAG,EAAE,QAAQ,gBACD,SAAS,+CAEjB,UAAU,GACd;QACF,oBAAC,UAAU,IACT,IAAI,EAAC,QAAQ,gBACF,eAAe,EAC1B,IAAI,EAAE,UAAU,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAC,iBAAiB,GAAG,EACnD,IAAI,EAAC,OAAO,KACR,WAAW,GACf,CACG,CACR,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,gBAAgB,CAAA"}

package/dist/organisms/ImageGallery/ImageGallerySelector.js

@@ -33,14 +33,14 @@ function ImageGallerySelector({ images, onSelect, ImageComponent, currentImageId
     }, [images.length]);
     return (React.createElement("section", { "data-fs-image-gallery-selector": true, "data-testid": testId, "aria-label": ariaLabel, "aria-roledescription": "carousel" },
         elementHasScroll && !firstImageInView && (React.createElement("div", { "data-fs-image-gallery-selector-control": true },
-            React.createElement(IconButton, { "data-fs-image-gallery-selector-control-button": true, "aria-label": navigationButtonLeftAriaLabel, icon: React.createElement(Icon, { name: "ArrowLeft" }), size: "small", onClick: () => moveScroll(elementsRef.current, -SCROLL_MARGIN_VALUE) }))),
+            React.createElement(IconButton, { "data-fs-image-gallery-selector-control-button": true, "aria-label": navigationButtonLeftAriaLabel, icon: React.createElement(Icon, { name: "ArrowLeft" }), onClick: () => moveScroll(elementsRef.current, -SCROLL_MARGIN_VALUE) }))),
         React.createElement("div", { "data-fs-image-gallery-selector-elements": true, ref: elementsRef }, images.map((image, idx) => {
             return (React.createElement(InView, { key: idx, onChange: (inView) => inViewChange(idx, inView) },
                 React.createElement(Button, { key: idx, "aria-label": `${image.alternateName} - Image ${idx + 1} of ${images.length}`, onClick: () => onSelect(idx), "data-fs-image-gallery-selector-thumbnail": idx === currentImageIdx ? 'selected' : 'true' },
                     React.createElement(ImageComponent, { url: image.url ?? '', loading: idx === 0 ? 'eager' : 'lazy', alternateName: image.alternateName ?? '' }))));
         })),
         elementHasScroll && !lastImageInView && (React.createElement("div", { "data-fs-image-gallery-selector-control": true },
-            React.createElement(IconButton, { "data-fs-image-gallery-selector-control-button": true, "aria-label": navigationButtonRightAriaLabel, icon: React.createElement(Icon, { name: "ArrowLeft" }), size: "small", onClick: () => moveScroll(elementsRef.current, +SCROLL_MARGIN_VALUE) })))));
+            React.createElement(IconButton, { "data-fs-image-gallery-selector-control-button": true, "aria-label": navigationButtonRightAriaLabel, icon: React.createElement(Icon, { name: "ArrowLeft" }), onClick: () => moveScroll(elementsRef.current, +SCROLL_MARGIN_VALUE) })))));
 }
 export default ImageGallerySelector;
 //# sourceMappingURL=ImageGallerySelector.js.map

package/dist/organisms/ImageGallery/ImageGallerySelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageGallerySelector.js","sourceRoot":"","sources":["../../../src/organisms/ImageGallery/ImageGallerySelector.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ImageGallerySelector.js","sourceRoot":"","sources":["../../../src/organisms/ImageGallery/ImageGallerySelector.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.123-alpha.0",
+  "version": "2.0.132-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": "1fa54ca9614dde12ba99a2870273e1797986ee16"
+  "gitHead": "e6d7561f0783b20ba4966d9e7c971146300ff129"
 }

package/src/atoms/Button/Button.tsx

@@ -73,17 +73,19 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
       data-testid={testId}
       {...otherProps}
     >
-      {loading && (
-        <p data-fs-button-loading-label>
-          {loadingLabel}
-          <Loader
-            variant={variant === 'primary' && !inverse ? 'light' : 'dark'}
-          />
-        </p>
-      )}
-      {React.isValidElement(icon) && iconPosition === 'left' && <span data-fs-button-icon>{icon}</span>}
-      {children && <span>{children}</span>}
-      {React.isValidElement(icon) && iconPosition === 'right' && <span data-fs-button-icon>{icon}</span>}
+      <div data-fs-button-wrapper>
+        {loading && (
+          <p data-fs-button-loading-label>
+            {loadingLabel}
+            <Loader
+              variant={variant === 'primary' && !inverse ? 'light' : 'dark'}
+            />
+          </p>
+        )}
+        {React.isValidElement(icon) && iconPosition === 'left' && <span data-fs-button-icon>{icon}</span>}
+        {children && <span>{children}</span>}
+        {React.isValidElement(icon) && iconPosition === 'right' && <span data-fs-button-icon>{icon}</span>}
+      </div>
     </button>
   )
 })

package/src/hooks/index.ts

@@ -3,3 +3,13 @@ export { useFadeEffect } from './useFadeEffect'
 export { useTrapFocus } from './useTrapFocus'
 export { useSearch } from './useSearch'
 export { useScrollDirection } from './useScrollDirection'
+export { useSlider } from './useSlider'
+export type {
+  UseSliderArgs,
+  SliderState,
+  SliderDispatch,
+  SlideDirection,
+} from './useSlider'
+export { useSlideVisibility } from './useSlideVisibility'
+
+

package/src/hooks/useSlideVisibility.ts

@@ -0,0 +1,59 @@
+import { useRef, useEffect } from 'react'
+
+export interface UseSlideVisibilityArgs {
+  currentSlide: number
+  itemsPerPage: number
+  totalItems: number
+}
+
+interface IsSlideVisibleArgs {
+  itemsPerPage: number
+  currentSlide: number
+  slideIdx: number
+  totalItems: number
+}
+
+function isSlideVisible({
+  itemsPerPage,
+  currentSlide,
+  slideIdx,
+  totalItems,
+}: IsSlideVisibleArgs) {
+  const isClonedSlide = currentSlide < 0 || currentSlide >= totalItems
+  const isVisible =
+    slideIdx >= currentSlide && slideIdx < currentSlide + itemsPerPage
+
+  return isClonedSlide || isVisible
+}
+
+export const useSlideVisibility = ({
+  currentSlide,
+  itemsPerPage,
+  totalItems,
+}: UseSlideVisibilityArgs) => {
+  /** Keeps track of slides that have been visualized before.
+   * We want to keep rendering them because the issue is mostly rendering
+   * slides that might never be viewed; On the other hand, hiding slides
+   * that were visible causes visual glitches */
+  const visitedSlides = useRef<Set<number>>(new Set())
+
+  useEffect(() => {
+    for (let i = 0; i < itemsPerPage; i++) {
+      visitedSlides.current.add(currentSlide + i)
+    }
+  }, [currentSlide, itemsPerPage])
+
+  const isItemVisible = (index: number) =>
+    isSlideVisible({
+      slideIdx: index,
+      currentSlide,
+      itemsPerPage,
+      totalItems,
+    })
+
+  const shouldRenderItem = (index: number) => {
+    return visitedSlides.current.has(index) || isItemVisible(index)
+  }
+
+  return { shouldRenderItem, isItemVisible }
+}

package/src/hooks/useSlider.ts

@@ -0,0 +1,209 @@
+import type { Dispatch } from 'react'
+import { useReducer } from 'react'
+import type { SwipeableProps } from 'react-swipeable'
+import { useSwipeable } from 'react-swipeable'
+
+export type SlideDirection = 'next' | 'previous'
+
+interface NextPageAction {
+  type: 'NEXT_PAGE'
+}
+
+interface PreviousPageAction {
+  type: 'PREVIOUS_PAGE'
+}
+
+interface GoToPageAction {
+  type: 'GO_TO_PAGE'
+  payload: {
+    pageIndex: number
+    shouldSlide: boolean
+  }
+}
+
+interface StopSlideAction {
+  type: 'STOP_SLIDE'
+}
+
+export type Action =
+  | NextPageAction
+  | PreviousPageAction
+  | StopSlideAction
+  | GoToPageAction
+
+export type SliderDispatch = Dispatch<Action>
+
+export interface SliderState {
+  /**
+   * The `currentItem` in a Slider with multiple items in a single page is
+   * always **the one with the lowest index** in the current page.
+   */
+  currentItem: number
+  /** Currently active page */
+  currentPage: number
+  /**
+   * Whether or not the Slider is currently sliding. This is useful to
+   * manipulate the `transition` property in a component.
+   */
+  sliding: boolean
+  /** The direction in which the Slider is sliding. */
+  slideDirection: SlideDirection
+  /** The total number of unique items in the slider. */
+  totalItems: number
+  /** The number of items in a single page. */
+  itemsPerPage: number
+  /** The total number of pages in the slider. */
+  totalPages: number
+  /** Whether or not the slider is infinite. */
+  infinite: boolean
+}
+
+export const nextPage = (current: number, total: number) =>
+  (current + 1) % total
+
+export const previousPage = (current: number, total: number) =>
+  (total - ((total - current + 1) % total)) % total
+
+function reducer(state: SliderState, action: Action): SliderState {
+  switch (action.type) {
+    case 'NEXT_PAGE': {
+      // If `state.infinite` is true, we need to take into account an extra
+      // page in the calculation. This extra page is a clone of the first page.
+      const adjustedTotalPages = state.infinite
+        ? state.totalPages + 1
+        : state.totalPages
+
+      const nextPageIndex = nextPage(state.currentPage, adjustedTotalPages)
+
+      const nextItemIndex =
+        (nextPageIndex % adjustedTotalPages) * state.itemsPerPage
+
+      return {
+        ...state,
+        sliding: true,
+        slideDirection: 'next',
+        currentItem: nextItemIndex,
+        currentPage: nextPageIndex,
+      }
+    }
+
+    case 'PREVIOUS_PAGE': {
+      // If `state.infinite` is true, we need to take into account an extra
+      // page in the calculation. This extra page is a clone of the first page.
+      const adjustedTotalPages = state.infinite
+        ? state.totalPages + 1
+        : state.totalPages
+
+      // If `state.infinite` is true and we're currently on page 0, we need to
+      // let the slider go to page -1. This -1 page is a clone of the last page.
+      const shouldGoToClone = state.infinite && state.currentPage === 0
+      const previousPageIndex = shouldGoToClone
+        ? -1
+        : previousPage(state.currentPage, state.totalPages)
+
+      return {
+        ...state,
+        sliding: true,
+        slideDirection: 'previous',
+        currentItem:
+          (previousPageIndex % adjustedTotalPages) * state.itemsPerPage,
+        currentPage: previousPageIndex,
+      }
+    }
+
+    case 'GO_TO_PAGE': {
+      if (action.payload.pageIndex === state.currentPage) {
+        return state
+      }
+
+      return {
+        ...state,
+        sliding: action.payload.shouldSlide,
+        slideDirection:
+          action.payload.pageIndex > state.currentPage ? 'next' : 'previous',
+        currentItem:
+          (action.payload.pageIndex % state.totalPages) * state.itemsPerPage,
+        currentPage: action.payload.pageIndex,
+      }
+    }
+
+    case 'STOP_SLIDE':
+      return { ...state, sliding: false }
+
+    default:
+      return state
+  }
+}
+
+const defaultSliderState = (
+  totalItems: number,
+  itemsPerPage: number,
+  infinite: boolean
+): SliderState => ({
+  currentItem: 0,
+  currentPage: 0,
+  sliding: false,
+  slideDirection: 'next',
+  totalItems,
+  itemsPerPage,
+  totalPages: Math.ceil(totalItems / itemsPerPage),
+  infinite,
+})
+
+const slide = (page: SlideDirection | number, dispatch: Dispatch<Action>) => {
+  if (page === 'next') {
+    dispatch({ type: 'NEXT_PAGE' })
+  }
+
+  if (page === 'previous') {
+    dispatch({ type: 'PREVIOUS_PAGE' })
+  }
+
+  if (typeof page === 'number') {
+    dispatch({
+      type: 'GO_TO_PAGE',
+      payload: {
+        pageIndex: page,
+        shouldSlide: true,
+      },
+    })
+  }
+}
+
+export interface UseSliderArgs extends SwipeableProps {
+  /** The total number of unique items in the slider. */
+  totalItems: number
+  /** The number of items in a single slider page. */
+  itemsPerPage?: number
+  /** Whether or not the slider is infinite. */
+  infiniteMode?: boolean
+  /**  Whether or not slide after swiping left/right. */
+  shouldSlideOnSwipe?: boolean
+}
+
+export const useSlider = ({
+  totalItems,
+  itemsPerPage = 1,
+  infiniteMode = false,
+  shouldSlideOnSwipe = true,
+  ...swipeableConfigOverrides
+}: UseSliderArgs) => {
+  const [sliderState, sliderDispatch] = useReducer(reducer, undefined, () =>
+    defaultSliderState(totalItems, itemsPerPage, infiniteMode)
+  )
+
+  const handlers = useSwipeable({
+    onSwipedRight: () =>
+      shouldSlideOnSwipe && slide('previous', sliderDispatch),
+    onSwipedLeft: () => shouldSlideOnSwipe && slide('next', sliderDispatch),
+    trackMouse: true,
+    ...swipeableConfigOverrides,
+  })
+
+  return {
+    handlers,
+    slide,
+    sliderState,
+    sliderDispatch,
+  }
+}

package/src/index.ts

@@ -55,6 +55,18 @@ export type {
   BreadcrumbProps,
 } from './molecules/Breadcrumb'
 export { default as BuyButton } from './molecules/BuyButton'
+
+export {
+  default as Carousel,
+  CarouselItem,
+  CarouselBullets,
+} from './molecules/Carousel'
+export type {
+  CarouselProps,
+  CarouselItemProps,
+  CarouselBulletsProps,
+} from './molecules/Carousel'
+
 export {
   default as CartItem,
   CartItemImage,

package/src/molecules/Alert/Alert.tsx

@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from 'react'
 import React, { forwardRef, useCallback } from 'react'
 
-import { Button, Icon, Link, LinkProps } from '../../'
+import { IconButton, Icon, Link, LinkProps } from '../../'
 
 import type { MouseEvent, ReactNode } from 'react'
 
@@ -68,11 +68,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
       {link && <Link data-fs-alert-link variant="inline" {...link} />}
 
       {dismissible && (
-        <Button data-fs-alert-button aria-label="Close" onClick={handleClose}>
-          <span>
-            <Icon name="X" />
-          </span>
-        </Button>
+        <IconButton data-fs-alert-button size="small" aria-label="Close" icon={<Icon name="X" />} onClick={handleClose} />
       )}
     </div>
   )