@faststore/components 2.0.101-alpha.0 → 2.0.103-alpha.0

package/dist/atoms/Button/Button.js

@@ -6,7 +6,7 @@ const Button = forwardRef(function Button({ children, variant, inverse, size = '
             loadingLabel,
             React.createElement(Loader, { variant: variant === 'primary' && !inverse ? 'light' : 'dark' }))),
         React.isValidElement(icon) && iconPosition === 'left' && React.createElement("span", { "data-fs-button-icon": true }, icon),
-        React.createElement("span", null, children),
+        children && React.createElement("span", null, children),
         React.isValidElement(icon) && iconPosition === 'right' && React.createElement("span", { "data-fs-button-icon": true }, icon)));
 });
 export default Button;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/atoms/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AA6C/B,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CACvE,EACE,QAAQ,EACR,OAAO,EACP,OAAO,EACP,IAAI,GAAG,SAAS,EAChB,MAAM,GAAG,WAAW,EACpB,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,YAAY,GAAG,MAAM,EACrB,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,oDAEgB,OAAO,yBACV,IAAI,4BACD,OAAO,4BACP,OAAO,EAC/B,QAAQ,EAAE,QAAQ,iBACL,MAAM,KACf,UAAU;QAEb,OAAO,IAAI,CACV;YACG,YAAY;YACb,oBAAC,MAAM,IACL,OAAO,EAAE,OAAO,KAAK,SAAS,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,GAC7D,CACA,CACL;QACA,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,YAAY,KAAK,MAAM,IAAI,6DAA2B,IAAI,CAAQ;QACjG,kCAAO,QAAQ,CAAQ;QACtB,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,YAAY,KAAK,OAAO,IAAI,6DAA2B,IAAI,CAAQ,CAC3F,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/atoms/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AA6C/B,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CACvE,EACE,QAAQ,EACR,OAAO,EACP,OAAO,EACP,IAAI,GAAG,SAAS,EAChB,MAAM,GAAG,WAAW,EACpB,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,YAAY,GAAG,MAAM,EACrB,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,oDAEgB,OAAO,yBACV,IAAI,4BACD,OAAO,4BACP,OAAO,EAC/B,QAAQ,EAAE,QAAQ,iBACL,MAAM,KACf,UAAU;QAEb,OAAO,IAAI,CACV;YACG,YAAY;YACb,oBAAC,MAAM,IACL,OAAO,EAAE,OAAO,KAAK,SAAS,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,GAC7D,CACA,CACL;QACA,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,YAAY,KAAK,MAAM,IAAI,6DAA2B,IAAI,CAAQ;QAChG,QAAQ,IAAI,kCAAO,QAAQ,CAAQ;QACnC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,YAAY,KAAK,OAAO,IAAI,6DAA2B,IAAI,CAAQ,CAC3F,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}

package/dist/index.d.ts

@@ -55,6 +55,8 @@ export { default as LinkButton } from './molecules/LinkButton';
 export type { LinkButtonProps } from './molecules/LinkButton';
 export { default as Modal, ModalHeader, ModalBody } from './molecules/Modal';
 export type { ModalProps, ModalHeaderProps } from './molecules/Modal';
+export { default as OrderSummary } from './molecules/OrderSummary';
+export type { OrderSummaryProps } from './molecules/OrderSummary';
 export { default as ProductCard, ProductCardImage, ProductCardContent, } from './molecules/ProductCard';
 export type { ProductCardProps, ProductCardImageProps, ProductCardContentProps, } from './molecules/ProductCard';
 export { default as ProductTitle } from './molecules/ProductTitle';
@@ -95,10 +97,14 @@ export { default as ToggleField } from './molecules/ToggleField';
 export type { ToggleFieldProps } from './molecules/ToggleField';
 export { default as QuantitySelector } from './molecules/QuantitySelector';
 export type { QuantitySelectorProps } from './molecules/QuantitySelector';
+export { default as CartSidebar, CartSidebarList, CartSidebarFooter, } from './organisms/CartSidebar';
+export type { CartSidebarProps } from './organisms/CartSidebar';
 export { default as Filter, FilterFacetBoolean, FilterFacetBooleanItem, FilterFacetRange, FilterFacets, FilterSlider, } from './organisms/Filter';
 export type { FilterFacetBooleanItemProps, FilterFacetRangeProps, FilterFacetsProps, FilterProps, FilterSliderProps, } from './organisms/Filter';
 export { default as Hero, HeroImage, HeroHeader } from './organisms/Hero';
 export type { HeroProps, HeroImageProps, HeroHeaderProps, } from './organisms/Hero';
+export { default as ImageGallery, ImageGallerySelector, ImageZoom, } from './organisms/ImageGallery';
+export type { ImageElementData, ImageGalleryProps, ImageGallerySelectorProps, ImageZoomProps, } from './organisms/ImageGallery';
 export { default as OutOfStock } from './organisms/OutOfStock';
 export type { OutOfStockProps } from './organisms/OutOfStock';
 export { default as PaymentMethods } from './organisms/PaymentMethods';

package/dist/index.js

@@ -31,6 +31,7 @@ export { default as Gift, GiftContent, GiftImage } from './molecules/Gift';
 export { default as InputField } from './molecules/InputField';
 export { default as LinkButton } from './molecules/LinkButton';
 export { default as Modal, ModalHeader, ModalBody } from './molecules/Modal';
+export { default as OrderSummary } from './molecules/OrderSummary';
 export { default as ProductCard, ProductCardImage, ProductCardContent, } from './molecules/ProductCard';
 export { default as ProductTitle } from './molecules/ProductTitle';
 export { default as RadioField } from './molecules/RadioField';
@@ -53,8 +54,10 @@ export { default as Toggle } from './molecules/Toggle';
 export { default as ToggleField } from './molecules/ToggleField';
 export { default as QuantitySelector } from './molecules/QuantitySelector';
 // Organisms
+export { default as CartSidebar, CartSidebarList, CartSidebarFooter, } from './organisms/CartSidebar';
 export { default as Filter, FilterFacetBoolean, FilterFacetBooleanItem, FilterFacetRange, FilterFacets, FilterSlider, } from './organisms/Filter';
 export { default as Hero, HeroImage, HeroHeader } from './organisms/Hero';
+export { default as ImageGallery, ImageGallerySelector, ImageZoom, } from './organisms/ImageGallery';
 export { default as OutOfStock } from './organisms/OutOfStock';
 export { default as PaymentMethods } from './organisms/PaymentMethods';
 export { default as PriceRange } from './organisms/PriceRange';

package/dist/index.js.map

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

package/dist/molecules/OrderSummary/OrderSummary.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+export interface OrderSummaryProps extends HTMLAttributes<HTMLUListElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string;
+    /**
+     * Label for the subtotal value of the order. Will only show if subtotalValue is provided.
+     */
+    subtotalLabel?: string;
+    /**
+     * Subtotal value of the order. If provided, subtotal label and value will be shown.
+     */
+    subtotalValue?: string;
+    /**
+     * Label for the discount value for the order. Will only show if discountValue is provided.
+     */
+    discountLabel?: string;
+    /**
+     * Discount value for the order. If provided, discount label and value will be shown.
+     */
+    discountValue?: string;
+    /**
+     * Label for the total value of the order.
+     */
+    totalLabel?: string;
+    /**
+     * Total value of the order.
+     */
+    totalValue?: string;
+}
+declare const OrderSummary: React.ForwardRefExoticComponent<OrderSummaryProps & React.RefAttributes<HTMLUListElement>>;
+export default OrderSummary;

package/dist/molecules/OrderSummary/OrderSummary.js

@@ -0,0 +1,16 @@
+import React, { forwardRef } from 'react';
+import { List } from '../../';
+const OrderSummary = forwardRef(function OrderSummary({ testId = 'fs-order-summary', subtotalLabel, subtotalValue, discountLabel = 'Discount', discountValue, totalLabel = 'Total', totalValue, ...otherProps }, ref) {
+    return (React.createElement(List, { ref: ref, "data-fs-order-summary": true, "data-testid": testId, ...otherProps },
+        subtotalValue ? (React.createElement("li", { "data-fs-order-summary-subtotal": true },
+            React.createElement("span", { "data-fs-order-summary-subtotal-label": true, "data-testid": `${testId}-subtotal-label` }, subtotalLabel),
+            React.createElement("span", { "data-fs-order-summary-subtotal-value": true, "data-testid": `${testId}-subtotal-value` }, subtotalValue))) : null,
+        discountValue ? (React.createElement("li", { "data-fs-order-summary-discount": true },
+            React.createElement("span", { "data-fs-order-summary-discount-label": true, "data-testid": `${testId}-discount-label` }, discountLabel),
+            React.createElement("span", { "data-fs-order-summary-discount-value": true, "data-testid": `${testId}-discount-value` }, discountValue))) : null,
+        React.createElement("li", { "data-fs-order-summary-total": true },
+            React.createElement("span", { "data-fs-order-summary-total-label": true, "data-testid": `${testId}-total-label` }, totalLabel),
+            React.createElement("span", { "data-fs-order-summary-total-value": true, "data-testid": `${testId}-total-value` }, totalValue))));
+});
+export default OrderSummary;
+//# sourceMappingURL=OrderSummary.js.map

package/dist/molecules/OrderSummary/OrderSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderSummary.js","sourceRoot":"","sources":["../../../src/molecules/OrderSummary/OrderSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAkC7B,MAAM,YAAY,GAAG,UAAU,CAC7B,SAAS,YAAY,CACnB,EACE,MAAM,GAAG,kBAAkB,EAC3B,aAAa,EACb,aAAa,EACb,aAAa,GAAG,UAAU,EAC1B,aAAa,EACb,UAAU,GAAG,OAAO,EACpB,UAAU,EACV,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,oBAAC,IAAI,IACH,GAAG,EAAE,GAAG,gDAEK,MAAM,KACf,UAAU;QAEb,aAAa,CAAC,CAAC,CAAC,CACf;YACE,2FAEe,GAAG,MAAM,iBAAiB,IAEtC,aAAa,CACT;YACP,2FAEe,GAAG,MAAM,iBAAiB,IAEtC,aAAa,CACT,CACJ,CACN,CAAC,CAAC,CAAC,IAAI;QACP,aAAa,CAAC,CAAC,CAAC,CACf;YACE,2FAEe,GAAG,MAAM,iBAAiB,IAEtC,aAAa,CACT;YACP,2FAEe,GAAG,MAAM,iBAAiB,IAEtC,aAAa,CACT,CACJ,CACN,CAAC,CAAC,CAAC,IAAI;QACR;YACE,wFAEe,GAAG,MAAM,cAAc,IAEnC,UAAU,CACN;YACP,wFAEe,GAAG,MAAM,cAAc,IAEnC,UAAU,CACN,CACJ,CACA,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,YAAY,CAAA"}

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

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

package/dist/molecules/OrderSummary/index.js

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

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

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

package/dist/organisms/CartSidebar/CartSidebar.d.ts

@@ -0,0 +1,40 @@
+import { PropsWithChildren } from 'react';
+import type { ReactNode } from 'react';
+import { SlideOverDirection, SlideOverWidthSize } from '../SlideOver';
+export interface CartSidebarProps {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string;
+    /**
+     * Title for the CartSidebar component.
+     */
+    title?: string;
+    /**
+     * Represents the side that the CartSidebar comes from.
+     */
+    direction?: SlideOverDirection;
+    /**
+     * Represents the size of the CartSidebar.
+     */
+    size?: SlideOverWidthSize;
+    /**
+     * Total of item in the Cart.
+     */
+    totalItems: number;
+    /**
+     * A React component that will be rendered as an icon on the Alert component.
+     */
+    alertIcon?: ReactNode;
+    /**
+     * The content for Alert component.
+     */
+    alertText?: string;
+    /**
+     * Function called when Close Button is clicked.
+     */
+    onClose: () => void;
+}
+declare function CartSidebar({ testId, title, size, direction, totalItems, children, alertIcon, alertText, onClose, }: PropsWithChildren<CartSidebarProps>): JSX.Element;
+export default CartSidebar;

package/dist/organisms/CartSidebar/CartSidebar.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Alert, Badge, SlideOver, SlideOverHeader, useFadeEffect, useUI, } from '../../';
+function CartSidebar({ testId = 'fs-cart-sidebar', title = 'Your Cart', size = 'partial', direction = 'rightSide', totalItems, children, alertIcon, alertText, onClose, }) {
+    const { fade, fadeOut } = useFadeEffect();
+    const { closeCart } = useUI();
+    return (React.createElement(SlideOver, { "data-fs-cart-sidebar": true, isOpen: true, fade: fade, onDismiss: fadeOut, size: size, direction: direction, onTransitionEnd: () => fade === 'out' && closeCart(), testId: testId },
+        React.createElement(SlideOverHeader, { closeBtnProps: { testId: 'fs-cart-sidebar-button-close' }, onClose: () => {
+                onClose();
+                fadeOut();
+            } },
+            React.createElement("h2", { "data-fs-cart-sidebar-title": true },
+                title,
+                React.createElement(Badge, { variant: "info" }, totalItems))),
+        alertText && React.createElement(Alert, { icon: alertIcon }, alertText),
+        children));
+}
+export default CartSidebar;
+//# sourceMappingURL=CartSidebar.js.map

package/dist/organisms/CartSidebar/CartSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartSidebar.js","sourceRoot":"","sources":["../../../src/organisms/CartSidebar/CartSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAGhD,OAAO,EACL,KAAK,EACL,KAAK,EACL,SAAS,EACT,eAAe,EACf,aAAa,EACb,KAAK,GACN,MAAM,QAAQ,CAAA;AAwCf,SAAS,WAAW,CAAC,EACnB,MAAM,GAAG,iBAAiB,EAC1B,KAAK,GAAG,WAAW,EACnB,IAAI,GAAG,SAAS,EAChB,SAAS,GAAG,WAAW,EACvB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,SAAS,EACT,OAAO,GAC6B;IACpC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,aAAa,EAAE,CAAA;IACzC,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAAA;IAE7B,OAAO,CACL,oBAAC,SAAS,kCAER,MAAM,QACN,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,OAAO,EAClB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,GAAG,EAAE,CAAC,IAAI,KAAK,KAAK,IAAI,SAAS,EAAE,EACpD,MAAM,EAAE,MAAM;QAEd,oBAAC,eAAe,IACd,aAAa,EAAE,EAAE,MAAM,EAAE,8BAA8B,EAAE,EACzD,OAAO,EAAE,GAAG,EAAE;gBACZ,OAAO,EAAE,CAAA;gBACT,OAAO,EAAE,CAAA;YACX,CAAC;YAED;gBACG,KAAK;gBACN,oBAAC,KAAK,IAAC,OAAO,EAAC,MAAM,IAAE,UAAU,CAAS,CACvC,CACW;QAEjB,SAAS,IAAI,oBAAC,KAAK,IAAC,IAAI,EAAE,SAAS,IAAG,SAAS,CAAS;QACxD,QAAQ,CACC,CACb,CAAA;AACH,CAAC;AAED,eAAe,WAAW,CAAA"}

package/dist/organisms/CartSidebar/CartSidebarFooter.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+declare function CartSidebarFooter({ children }: {
+    children: ReactNode;
+}): JSX.Element;
+export default CartSidebarFooter;

package/dist/organisms/CartSidebar/CartSidebarFooter.js

@@ -0,0 +1,6 @@
+import React from 'react';
+function CartSidebarFooter({ children }) {
+    return React.createElement("footer", { "data-fs-cart-sidebar-footer": true }, children);
+}
+export default CartSidebarFooter;
+//# sourceMappingURL=CartSidebarFooter.js.map

package/dist/organisms/CartSidebar/CartSidebarFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartSidebarFooter.js","sourceRoot":"","sources":["../../../src/organisms/CartSidebar/CartSidebarFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAExC,SAAS,iBAAiB,CAAC,EAAE,QAAQ,EAA2B;IAC9D,OAAO,uEAAqC,QAAQ,CAAU,CAAA;AAChE,CAAC;AAED,eAAe,iBAAiB,CAAA"}

package/dist/organisms/CartSidebar/CartSidebarList.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+declare function CartSidebarList({ children }: {
+    children: ReactNode;
+}): JSX.Element;
+export default CartSidebarList;

package/dist/organisms/CartSidebar/CartSidebarList.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { List } from '../../';
+function CartSidebarList({ children }) {
+    return React.createElement(List, { "data-fs-cart-sidebar-list": true }, children);
+}
+export default CartSidebarList;
+//# sourceMappingURL=CartSidebarList.js.map

package/dist/organisms/CartSidebar/CartSidebarList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartSidebarList.js","sourceRoot":"","sources":["../../../src/organisms/CartSidebar/CartSidebarList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAExC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,SAAS,eAAe,CAAC,EAAE,QAAQ,EAA2B;IAC5D,OAAO,oBAAC,IAAI,yCAA4B,QAAQ,CAAQ,CAAA;AAC1D,CAAC;AAED,eAAe,eAAe,CAAA"}

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

@@ -0,0 +1,4 @@
+export { default } from './CartSidebar';
+export type { CartSidebarProps } from './CartSidebar';
+export { default as CartSidebarList } from './CartSidebarList';
+export { default as CartSidebarFooter } from './CartSidebarFooter';

package/dist/organisms/CartSidebar/index.js

@@ -0,0 +1,4 @@
+export { default } from './CartSidebar';
+export { default as CartSidebarList } from './CartSidebarList';
+export { default as CartSidebarFooter } from './CartSidebarFooter';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/organisms/CartSidebar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAA"}

package/dist/organisms/ImageGallery/ImageGallery.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { HTMLAttributes, FunctionComponent } from 'react';
+type ImageComponentType = FunctionComponent<{
+    url: string;
+    alternateName?: string;
+    loading?: 'eager' | 'lazy';
+}>;
+export interface ImageElementData {
+    /**
+     * Image URL.
+     */
+    url: string;
+    /**
+     * Alternative text description of the image.
+     */
+    alternateName: string;
+}
+export interface ImageGalleryProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string;
+    /**
+     * List of images that should be rendered.
+     */
+    images: ImageElementData[];
+    /**
+     * Function that returns a React component that will be used to render images.
+     */
+    ImageComponent: ImageComponentType;
+    /**
+     * The currently active thumbnail.
+     */
+    selectedImageIdx: number;
+    /**
+     * Event handler for clicks on each thumbnail.
+     */
+    setSelectedImageIdx: (idx: number) => void;
+}
+declare const ImageGallery: React.ForwardRefExoticComponent<ImageGalleryProps & React.RefAttributes<HTMLDivElement>>;
+export default ImageGallery;

package/dist/organisms/ImageGallery/ImageGallery.js

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { ImageGallerySelector } from '../..';
+const ImageGallery = forwardRef(function ImageGallery({ images, children, ImageComponent, selectedImageIdx, setSelectedImageIdx, testId = 'fs-image-gallery', ...otherProps }, ref) {
+    const hasSelector = images.length > 1;
+    return (React.createElement("section", { ref: ref, "data-fs-image-gallery": hasSelector ? 'with-selector' : 'without-selector', "data-testid": testId, ...otherProps },
+        children,
+        hasSelector && (React.createElement(ImageGallerySelector, { images: images, onSelect: setSelectedImageIdx, currentImageIdx: selectedImageIdx, ImageComponent: ImageComponent }))));
+});
+export default ImageGallery;
+//# sourceMappingURL=ImageGallery.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGallery.js","sourceRoot":"","sources":["../../../src/organisms/ImageGallery/ImageGallery.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AA2C5C,MAAM,YAAY,GAAG,UAAU,CAC7B,SAAS,YAAY,CACnB,EACE,MAAM,EACN,QAAQ,EACR,cAAc,EACd,gBAAgB,EAChB,mBAAmB,EACnB,MAAM,GAAG,kBAAkB,EAC3B,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAA;IAErC,OAAO,CACL,iCACE,GAAG,EAAE,GAAG,2BAEN,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB,iBAEvC,MAAM,KACf,UAAU;QAEb,QAAQ;QACR,WAAW,IAAI,CACd,oBAAC,oBAAoB,IACnB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,mBAAmB,EAC7B,eAAe,EAAE,gBAAgB,EACjC,cAAc,EAAE,cAAc,GAC9B,CACH,CACO,CACX,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/organisms/ImageGallery/ImageGallerySelector.d.ts

@@ -0,0 +1,31 @@
+import type { AriaAttributes } from 'react';
+import type { ImageGalleryProps } from '.';
+export interface ImageGallerySelectorProps extends Pick<ImageGalleryProps, 'images' | 'ImageComponent'> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string;
+    /**
+     * The currently active thumbnail.
+     */
+    currentImageIdx: number;
+    /**
+     * For accessibility purposes, define a string that labels the current element.
+     */
+    'aria-label'?: AriaAttributes['aria-label'];
+    /**
+     * For accessibility purposes, define a string that labels the left navigation icon button.
+     */
+    navigationButtonLeftAriaLabel?: AriaAttributes['aria-label'];
+    /**
+     * For accessibility purposes, define a string that labels the right navigation button icon.
+     */
+    navigationButtonRightAriaLabel?: AriaAttributes['aria-label'];
+    /**
+     * Event handler for clicks on each thumbnail.
+     */
+    onSelect: (imageIdx: number) => void;
+}
+declare function ImageGallerySelector({ images, onSelect, ImageComponent, currentImageIdx, testId, 'aria-label': ariaLabel, navigationButtonLeftAriaLabel, navigationButtonRightAriaLabel, }: ImageGallerySelectorProps): JSX.Element;
+export default ImageGallerySelector;

package/dist/organisms/ImageGallery/ImageGallerySelector.js

@@ -0,0 +1,46 @@
+import React, { useRef, useState, useCallback } from 'react';
+import { InView } from 'react-intersection-observer';
+import { Button, Icon, IconButton } from '../..';
+const SCROLL_MARGIN_VALUE = 400;
+const moveScroll = (container, value) => {
+    if (container) {
+        if (container.scrollHeight > container.clientHeight) {
+            // TODO: Temporary workaround for scroll-behavior with scrollTop – Safari 15.4) https://developer.apple.com/forums/thread/703294
+            container.style.overflow = 'auto';
+            window.requestAnimationFrame(() => container.scrollTo({ top: value, behavior: 'smooth' }));
+            setTimeout(() => (container.style.overflow = 'hidden'), 2000);
+        }
+        else {
+            container.scrollLeft += value;
+        }
+    }
+};
+const hasScroll = (container) => {
+    if (container) {
+        return (container.scrollHeight > container.clientHeight ||
+            container.scrollWidth > container.clientWidth);
+    }
+    return false;
+};
+function ImageGallerySelector({ images, onSelect, ImageComponent, currentImageIdx, testId = 'fs-image-gallery-selector', 'aria-label': ariaLabel = 'Product Images', navigationButtonLeftAriaLabel = 'Backward slide image selector', navigationButtonRightAriaLabel = 'Forward slide image selector', }) {
+    const elementsRef = useRef(null);
+    const elementHasScroll = hasScroll(elementsRef.current);
+    const [firstImageInView, setFirstImageInView] = useState(true);
+    const [lastImageInView, setLastImageInView] = useState(true);
+    const inViewChange = useCallback((idx, inView) => {
+        idx === 0 && setFirstImageInView(inView);
+        idx === images.length - 1 && setLastImageInView(inView);
+    }, [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("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) })))));
+}
+export default ImageGallerySelector;
+//# sourceMappingURL=ImageGallerySelector.js.map

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

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

package/dist/organisms/ImageGallery/ImageZoom.d.ts

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from 'react';
+export interface ImageZoomProps {
+    helpMessage?: string;
+    zoomFactor?: number;
+}
+declare const ImageZoom: ({ children }: PropsWithChildren<ImageZoomProps>) => JSX.Element;
+export default ImageZoom;

package/dist/organisms/ImageGallery/ImageZoom.js

@@ -0,0 +1,6 @@
+import React from 'react';
+const ImageZoom = ({ children }) => {
+    return React.createElement(React.Fragment, null, children);
+};
+export default ImageZoom;
+//# sourceMappingURL=ImageZoom.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageZoom.js","sourceRoot":"","sources":["../../../src/organisms/ImageGallery/ImageZoom.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAqC,EAAE,EAAE;IACpE,OAAO,0CAAG,QAAQ,CAAI,CAAA;AACxB,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}

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

@@ -0,0 +1,6 @@
+export { default } from './ImageGallery';
+export type { ImageGalleryProps, ImageElementData } from './ImageGallery';
+export { default as ImageGallerySelector } from './ImageGallerySelector';
+export type { ImageGallerySelectorProps } from './ImageGallerySelector';
+export { default as ImageZoom } from './ImageZoom';
+export type { ImageZoomProps } from './ImageZoom';

package/dist/organisms/ImageGallery/index.js

@@ -0,0 +1,4 @@
+export { default } from './ImageGallery';
+export { default as ImageGallerySelector } from './ImageGallerySelector';
+export { default as ImageZoom } from './ImageZoom';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/organisms/ImageGallery/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAGxC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAGxE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA"}

package/dist/organisms/SlideOver/SlideOver.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Modal } from '../../';
 function SlideOver({ isOpen, direction = 'leftSide', size = 'full', fade = 'out', children, onDismiss, testId = 'fs-slide-over', ...otherProps }) {
-    return (React.createElement(Modal, { "data-fs-modal": null, "data-fs-slide-over": true, "data-fs-slide-over-direction": direction, "data-fs-slide-over-size": size, "data-fs-slide-over-state": fade, isOpen: isOpen, onDismiss: onDismiss, ...otherProps }, children));
+    return (React.createElement(Modal, { "data-fs-modal": null, "data-fs-slide-over": true, "data-fs-slide-over-direction": direction, "data-fs-slide-over-size": size, "data-fs-slide-over-state": fade, isOpen: isOpen, onDismiss: onDismiss, testId: testId, ...otherProps }, children));
 }
 export default SlideOver;
 //# sourceMappingURL=SlideOver.js.map

package/dist/organisms/SlideOver/SlideOver.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlideOver.js","sourceRoot":"","sources":["../../../src/organisms/SlideOver/SlideOver.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAkC9B,SAAS,SAAS,CAAC,EACjB,MAAM,EACN,SAAS,GAAG,UAAU,EACtB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,KAAK,EACZ,QAAQ,EACR,SAAS,EACT,MAAM,GAAG,eAAe,EACxB,GAAG,UAAU,EACE;IACf,OAAO,CACL,oBAAC,KAAK,qBACW,IAAI,8DAEW,SAAS,6BACd,IAAI,8BACH,IAAI,EAC9B,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,KAChB,UAAU,IAEb,QAAQ,CACH,CACT,CAAA;AACH,CAAC;AAED,eAAe,SAAS,CAAA"}
+{"version":3,"file":"SlideOver.js","sourceRoot":"","sources":["../../../src/organisms/SlideOver/SlideOver.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAkC9B,SAAS,SAAS,CAAC,EACjB,MAAM,EACN,SAAS,GAAG,UAAU,EACtB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,KAAK,EACZ,QAAQ,EACR,SAAS,EACT,MAAM,GAAG,eAAe,EACxB,GAAG,UAAU,EACE;IACf,OAAO,CACL,oBAAC,KAAK,qBACW,IAAI,8DAEW,SAAS,6BACd,IAAI,8BACH,IAAI,EAC9B,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,KACV,UAAU,IAEb,QAAQ,CACH,CACT,CAAA;AACH,CAAC;AAED,eAAe,SAAS,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.101-alpha.0",
+  "version": "2.0.103-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": "b7378bff2215b1edab942092e8c4faffbe9b1572"
+  "gitHead": "cac804588d1f91794f39bf7b7ce8e18234a7286a"
 }

package/src/atoms/Button/Button.tsx

@@ -82,7 +82,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
         </p>
       )}
       {React.isValidElement(icon) && iconPosition === 'left' && <span data-fs-button-icon>{icon}</span>}
-      <span>{children}</span>
+      {children && <span>{children}</span>}
       {React.isValidElement(icon) && iconPosition === 'right' && <span data-fs-button-icon>{icon}</span>}
     </button>
   )

package/src/index.ts

@@ -95,6 +95,8 @@ export { default as LinkButton } from './molecules/LinkButton'
 export type { LinkButtonProps } from './molecules/LinkButton'
 export { default as Modal, ModalHeader, ModalBody } from './molecules/Modal'
 export type { ModalProps, ModalHeaderProps } from './molecules/Modal'
+export { default as OrderSummary } from './molecules/OrderSummary'
+export type { OrderSummaryProps } from './molecules/OrderSummary'
 export {
   default as ProductCard,
   ProductCardImage,
@@ -189,6 +191,13 @@ export { default as QuantitySelector } from './molecules/QuantitySelector'
 export type { QuantitySelectorProps } from './molecules/QuantitySelector'
 
 // Organisms
+export {
+  default as CartSidebar,
+  CartSidebarList,
+  CartSidebarFooter,
+} from './organisms/CartSidebar'
+export type { CartSidebarProps } from './organisms/CartSidebar'
+
 export {
   default as Filter,
   FilterFacetBoolean,
@@ -212,6 +221,18 @@ export type {
   HeroHeaderProps,
 } from './organisms/Hero'
 
+export {
+  default as ImageGallery,
+  ImageGallerySelector,
+  ImageZoom,
+} from './organisms/ImageGallery'
+export type {
+  ImageElementData,
+  ImageGalleryProps,
+  ImageGallerySelectorProps,
+  ImageZoomProps,
+} from './organisms/ImageGallery'
+
 export { default as OutOfStock } from './organisms/OutOfStock'
 export type { OutOfStockProps } from './organisms/OutOfStock'
 

package/src/molecules/OrderSummary/OrderSummary.tsx

@@ -0,0 +1,110 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+import { List } from '../../'
+
+export interface OrderSummaryProps extends HTMLAttributes<HTMLUListElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  /**
+   * Label for the subtotal value of the order. Will only show if subtotalValue is provided.
+   */
+  subtotalLabel?: string
+  /**
+   * Subtotal value of the order. If provided, subtotal label and value will be shown.
+   */
+  subtotalValue?: string
+  /**
+   * Label for the discount value for the order. Will only show if discountValue is provided.
+   */
+  discountLabel?: string
+  /**
+   * Discount value for the order. If provided, discount label and value will be shown.
+   */
+  discountValue?: string
+  /**
+   * Label for the total value of the order.
+   */
+  totalLabel?: string
+  /**
+   * Total value of the order.
+   */
+  totalValue?: string
+}
+
+const OrderSummary = forwardRef<HTMLUListElement, OrderSummaryProps>(
+  function OrderSummary(
+    {
+      testId = 'fs-order-summary',
+      subtotalLabel,
+      subtotalValue,
+      discountLabel = 'Discount',
+      discountValue,
+      totalLabel = 'Total',
+      totalValue,
+      ...otherProps
+    },
+    ref
+  ) {
+    return (
+      <List
+        ref={ref}
+        data-fs-order-summary
+        data-testid={testId}
+        {...otherProps}
+      >
+        {subtotalValue ? (
+          <li data-fs-order-summary-subtotal>
+            <span
+              data-fs-order-summary-subtotal-label
+              data-testid={`${testId}-subtotal-label`}
+            >
+              {subtotalLabel}
+            </span>
+            <span
+              data-fs-order-summary-subtotal-value
+              data-testid={`${testId}-subtotal-value`}
+            >
+              {subtotalValue}
+            </span>
+          </li>
+        ) : null}
+        {discountValue ? (
+          <li data-fs-order-summary-discount>
+            <span
+              data-fs-order-summary-discount-label
+              data-testid={`${testId}-discount-label`}
+            >
+              {discountLabel}
+            </span>
+            <span
+              data-fs-order-summary-discount-value
+              data-testid={`${testId}-discount-value`}
+            >
+              {discountValue}
+            </span>
+          </li>
+        ) : null}
+        <li data-fs-order-summary-total>
+          <span
+            data-fs-order-summary-total-label
+            data-testid={`${testId}-total-label`}
+          >
+            {totalLabel}
+          </span>
+          <span
+            data-fs-order-summary-total-value
+            data-testid={`${testId}-total-value`}
+          >
+            {totalValue}
+          </span>
+        </li>
+      </List>
+    )
+  }
+)
+
+export default OrderSummary

package/src/molecules/OrderSummary/index.tsx

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

package/src/organisms/CartSidebar/CartSidebar.tsx

@@ -0,0 +1,95 @@
+import React, { PropsWithChildren } from 'react'
+import type { ReactNode } from 'react'
+
+import {
+  Alert,
+  Badge,
+  SlideOver,
+  SlideOverHeader,
+  useFadeEffect,
+  useUI,
+} from '../../'
+
+import { SlideOverDirection, SlideOverWidthSize } from '../SlideOver'
+
+export interface CartSidebarProps {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  /**
+   * Title for the CartSidebar component.
+   */
+  title?: string
+  /**
+   * Represents the side that the CartSidebar comes from.
+   */
+  direction?: SlideOverDirection
+  /**
+   * Represents the size of the CartSidebar.
+   */
+  size?: SlideOverWidthSize
+  /**
+   * Total of item in the Cart.
+   */
+  totalItems: number
+  /**
+   * A React component that will be rendered as an icon on the Alert component.
+   */
+  alertIcon?: ReactNode
+  /**
+   * The content for Alert component.
+   */
+  alertText?: string
+  /**
+   * Function called when Close Button is clicked.
+   */
+  onClose: () => void
+}
+
+function CartSidebar({
+  testId = 'fs-cart-sidebar',
+  title = 'Your Cart',
+  size = 'partial',
+  direction = 'rightSide',
+  totalItems,
+  children,
+  alertIcon,
+  alertText,
+  onClose,
+}: PropsWithChildren<CartSidebarProps>) {
+  const { fade, fadeOut } = useFadeEffect()
+  const { closeCart } = useUI()
+
+  return (
+    <SlideOver
+      data-fs-cart-sidebar
+      isOpen
+      fade={fade}
+      onDismiss={fadeOut}
+      size={size}
+      direction={direction}
+      onTransitionEnd={() => fade === 'out' && closeCart()}
+      testId={testId}
+    >
+      <SlideOverHeader
+        closeBtnProps={{ testId: 'fs-cart-sidebar-button-close' }}
+        onClose={() => {
+          onClose()
+          fadeOut()
+        }}
+      >
+        <h2 data-fs-cart-sidebar-title>
+          {title}
+          <Badge variant="info">{totalItems}</Badge>
+        </h2>
+      </SlideOverHeader>
+
+      {alertText && <Alert icon={alertIcon}>{alertText}</Alert>}
+      {children}
+    </SlideOver>
+  )
+}
+
+export default CartSidebar

package/src/organisms/CartSidebar/CartSidebarFooter.tsx

@@ -0,0 +1,7 @@
+import React, { ReactNode } from 'react'
+
+function CartSidebarFooter({ children }: { children: ReactNode }) {
+  return <footer data-fs-cart-sidebar-footer>{children}</footer>
+}
+
+export default CartSidebarFooter

package/src/organisms/CartSidebar/CartSidebarList.tsx

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react'
+
+import { List } from '../../'
+
+function CartSidebarList({ children }: { children: ReactNode }) {
+  return <List data-fs-cart-sidebar-list>{children}</List>
+}
+
+export default CartSidebarList

package/src/organisms/CartSidebar/index.ts

@@ -0,0 +1,4 @@
+export { default } from './CartSidebar'
+export type { CartSidebarProps } from './CartSidebar'
+export { default as CartSidebarList } from './CartSidebarList'
+export { default as CartSidebarFooter } from './CartSidebarFooter'

package/src/organisms/ImageGallery/ImageGallery.tsx

@@ -0,0 +1,85 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes, FunctionComponent } from 'react'
+
+import { ImageGallerySelector } from '../..'
+
+type ImageComponentType = FunctionComponent<{
+  url: string
+  alternateName?: string
+  loading?: 'eager' | 'lazy'
+}>
+
+export interface ImageElementData {
+  /**
+   * Image URL.
+   */
+  url: string
+  /**
+   * Alternative text description of the image.
+   */
+  alternateName: string
+}
+
+export interface ImageGalleryProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  /**
+   * List of images that should be rendered.
+   */
+  images: ImageElementData[]
+  /**
+   * Function that returns a React component that will be used to render images.
+   */
+  ImageComponent: ImageComponentType
+  /**
+   * The currently active thumbnail.
+   */
+  selectedImageIdx: number
+  /**
+   * Event handler for clicks on each thumbnail.
+   */
+  setSelectedImageIdx: (idx: number) => void
+}
+
+const ImageGallery = forwardRef<HTMLDivElement, ImageGalleryProps>(
+  function ImageGallery(
+    {
+      images,
+      children,
+      ImageComponent,
+      selectedImageIdx,
+      setSelectedImageIdx,
+      testId = 'fs-image-gallery',
+      ...otherProps
+    },
+    ref
+  ) {
+    const hasSelector = images.length > 1
+
+    return (
+      <section
+        ref={ref}
+        data-fs-image-gallery={
+          hasSelector ? 'with-selector' : 'without-selector'
+        }
+        data-testid={testId}
+        {...otherProps}
+      >
+        {children}
+        {hasSelector && (
+          <ImageGallerySelector
+            images={images}
+            onSelect={setSelectedImageIdx}
+            currentImageIdx={selectedImageIdx}
+            ImageComponent={ImageComponent}
+          />
+        )}
+      </section>
+    )
+  }
+)
+
+export default ImageGallery

package/src/organisms/ImageGallery/ImageGallerySelector.tsx

@@ -0,0 +1,148 @@
+import React, { useRef, useState, useCallback } from 'react'
+import type { AriaAttributes } from 'react'
+import { InView } from 'react-intersection-observer'
+import { Button, Icon, IconButton } from '../..'
+
+import type { ImageGalleryProps } from '.'
+
+export interface ImageGallerySelectorProps
+  extends Pick<ImageGalleryProps, 'images' | 'ImageComponent'> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  /**
+   * The currently active thumbnail.
+   */
+  currentImageIdx: number
+  /**
+   * For accessibility purposes, define a string that labels the current element.
+   */
+  'aria-label'?: AriaAttributes['aria-label']
+  /**
+   * For accessibility purposes, define a string that labels the left navigation icon button.
+   */
+  navigationButtonLeftAriaLabel?: AriaAttributes['aria-label']
+  /**
+   * For accessibility purposes, define a string that labels the right navigation button icon.
+   */
+  navigationButtonRightAriaLabel?: AriaAttributes['aria-label']
+  /**
+   * Event handler for clicks on each thumbnail.
+   */
+  onSelect: (imageIdx: number) => void
+}
+
+const SCROLL_MARGIN_VALUE = 400
+
+const moveScroll = (container: HTMLDivElement | null, value: number) => {
+  if (container) {
+    if (container.scrollHeight > container.clientHeight) {
+      // TODO: Temporary workaround for scroll-behavior with scrollTop – Safari 15.4) https://developer.apple.com/forums/thread/703294
+      container.style.overflow = 'auto'
+      window.requestAnimationFrame(() =>
+        container.scrollTo({ top: value, behavior: 'smooth' })
+      )
+      setTimeout(() => (container.style.overflow = 'hidden'), 2000)
+    } else {
+      container.scrollLeft += value
+    }
+  }
+}
+
+const hasScroll = (container: HTMLDivElement | null): boolean => {
+  if (container) {
+    return (
+      container.scrollHeight > container.clientHeight ||
+      container.scrollWidth > container.clientWidth
+    )
+  }
+
+  return false
+}
+
+function ImageGallerySelector({
+  images,
+  onSelect,
+  ImageComponent,
+  currentImageIdx,
+  testId = 'fs-image-gallery-selector',
+  'aria-label': ariaLabel = 'Product Images',
+  navigationButtonLeftAriaLabel = 'Backward slide image selector',
+  navigationButtonRightAriaLabel = 'Forward slide image selector',
+}: ImageGallerySelectorProps) {
+  const elementsRef = useRef<HTMLDivElement>(null)
+  const elementHasScroll = hasScroll(elementsRef.current)
+  const [firstImageInView, setFirstImageInView] = useState(true)
+  const [lastImageInView, setLastImageInView] = useState(true)
+
+  const inViewChange= useCallback((idx: number, inView: boolean) => {
+    idx === 0 && setFirstImageInView(inView)
+    idx === images.length - 1 && setLastImageInView(inView)
+  }, [images.length])
+
+  return (
+    <section
+      data-fs-image-gallery-selector
+      data-testid={testId}
+      aria-label={ariaLabel}
+      aria-roledescription="carousel"
+    >
+      {elementHasScroll && !firstImageInView && (
+        <div data-fs-image-gallery-selector-control>
+          <IconButton
+            data-fs-image-gallery-selector-control-button
+            aria-label={navigationButtonLeftAriaLabel}
+            icon={<Icon name="ArrowLeft" />}
+            size="small"
+            onClick={() =>
+              moveScroll(elementsRef.current, -SCROLL_MARGIN_VALUE)
+            }
+          />
+        </div>
+      )}
+      <div data-fs-image-gallery-selector-elements ref={elementsRef}>
+        {images.map((image, idx) => {
+          return (
+            <InView 
+              key={idx}
+              onChange={(inView) => inViewChange(idx, inView)}>
+              <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'
+                }
+              >
+                <ImageComponent
+                  url={image.url ?? ''}
+                  loading={idx === 0 ? 'eager' : 'lazy'}
+                  alternateName={image.alternateName ?? ''}
+                />
+              </Button>
+            </InView>
+          )
+        })}
+      </div>
+      {elementHasScroll && !lastImageInView && (
+        <div data-fs-image-gallery-selector-control>
+          <IconButton
+            data-fs-image-gallery-selector-control-button
+            aria-label={navigationButtonRightAriaLabel}
+            icon={<Icon name="ArrowLeft" />}
+            size="small"
+            onClick={() =>
+              moveScroll(elementsRef.current, +SCROLL_MARGIN_VALUE)
+            }
+          />
+        </div>
+      )}
+    </section>
+  )
+}
+
+export default ImageGallerySelector

package/src/organisms/ImageGallery/ImageZoom.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import type { PropsWithChildren } from 'react'
+
+// TODO: Implements zoom feature to the selected image (Coming Soon)
+export interface ImageZoomProps {
+  helpMessage?: string
+  zoomFactor?: number
+}
+
+const ImageZoom = ({ children }: PropsWithChildren<ImageZoomProps>) => {
+  return <>{children}</>
+}
+
+export default ImageZoom

package/src/organisms/ImageGallery/index.ts

@@ -0,0 +1,8 @@
+export { default } from './ImageGallery'
+export type { ImageGalleryProps, ImageElementData } from './ImageGallery'
+
+export { default as ImageGallerySelector } from './ImageGallerySelector'
+export type { ImageGallerySelectorProps } from './ImageGallerySelector'
+
+export { default as ImageZoom } from './ImageZoom'
+export type { ImageZoomProps } from './ImageZoom'

package/src/organisms/SlideOver/SlideOver.tsx

@@ -55,6 +55,7 @@ function SlideOver({
       data-fs-slide-over-state={fade}
       isOpen={isOpen}
       onDismiss={onDismiss}
+      testId={testId}
       {...otherProps}
     >
       {children}