@faststore/components 3.0.7 → 3.0.32-alpha.0

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

@@ -0,0 +1,6 @@
+export { default } from './ProductShelf';
+export type { ProductShelfProps } from './ProductShelf';
+export { default as ProductShelfItems } from './ProductShelfItems';
+export type { ProductShelfItemsProps } from './ProductShelfItems';
+export { default as ProductShelfItem } from './ProductShelfItem';
+export type { ProductShelfItemProps } from './ProductShelfItem';

package/dist/organisms/ProductShelf/index.js

@@ -0,0 +1,4 @@
+export { default } from './ProductShelf';
+export { default as ProductShelfItems } from './ProductShelfItems';
+export { default as ProductShelfItem } from './ProductShelfItem';
+//# sourceMappingURL=index.js.map

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

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

package/dist/organisms/RegionModal/RegionModal.d.ts

@@ -0,0 +1,72 @@
+import React from 'react';
+import type { MutableRefObject } from 'react';
+import type { LinkElementType, LinkProps, ModalProps, OverlayProps } from '../../';
+export interface RegionModalProps extends Omit<ModalProps, 'children'> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string;
+    /**
+     * The region modal's title.
+     */
+    title?: string;
+    /**
+     * Description for region modal.
+     */
+    description?: string;
+    /**
+     * Close button aria-label.
+     */
+    closeButtonAriaLabel?: string;
+    /**
+     * Props for the link `I don't know my Postal Code`.
+     */
+    idkPostalCodeLinkProps?: Partial<LinkProps<LinkElementType>>;
+    /**
+     * Props for the `I don't know my Postal Code` link on modal body content.
+     */
+    linkText?: Partial<LinkProps<LinkElementType>>;
+    /**
+     * Message of error for input.
+     */
+    errorMessage?: string;
+    /**
+     * Postal code input's ref.
+     */
+    inputRef?: MutableRefObject<HTMLInputElement | null>;
+    /**
+     * Postal code input's value.
+     */
+    inputValue?: string;
+    /**
+     * Postal code input's label.
+     */
+    inputLabel?: string;
+    /**
+     * Enables fadeOut effect on modal after onSubmit function
+     */
+    fadeOutOnSubmit?: boolean;
+    /**
+     * Props forwarded to the `Overlay` component.
+     */
+    overlayProps?: OverlayProps;
+    /**
+     * Function called when Close button is clicked.
+     */
+    onClose?: () => void;
+    /**
+     * Callback function when input is typed.
+     */
+    onInput?: (event: React.FormEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function when form is submitted.
+     */
+    onSubmit?: () => void;
+    /**
+     * Callback function when the input clear button is clicked.
+     */
+    onClear?: () => void;
+}
+declare function RegionModal({ testId, title, description, closeButtonAriaLabel, idkPostalCodeLinkProps, errorMessage, inputRef, inputValue, inputLabel, fadeOutOnSubmit, overlayProps, onClose, onInput, onSubmit, onClear, ...otherProps }: RegionModalProps): React.JSX.Element;
+export default RegionModal;

package/dist/organisms/RegionModal/RegionModal.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { InputField, Link, Modal, ModalBody, ModalHeader } from '../..';
+function RegionModal({ testId = 'fs-region-modal', title = 'Set your location', description = 'Prices, offers and availability may vary according to your location.', closeButtonAriaLabel = 'Close Region Modal', idkPostalCodeLinkProps, errorMessage, inputRef, inputValue, inputLabel = 'Postal Code', fadeOutOnSubmit, overlayProps, onClose, onInput, onSubmit, onClear, ...otherProps }) {
+    return (React.createElement(Modal, { "data-fs-region-modal": true, testId: testId, overlayProps: overlayProps, title: "Region modal", "aria-label": "Region modal", ...otherProps }, ({ fadeOut }) => (React.createElement(React.Fragment, null,
+        React.createElement(ModalHeader, { onClose: () => {
+                fadeOut();
+                onClose?.();
+            }, title: title, description: description, closeBtnProps: {
+                'aria-label': closeButtonAriaLabel,
+            } }),
+        React.createElement(ModalBody, null,
+            React.createElement(InputField, { "data-fs-region-modal-input": true, id: `${testId}-input-field`, inputRef: inputRef, label: inputLabel, actionable: true, value: inputValue, onInput: (event) => onInput?.(event), onSubmit: () => {
+                    onSubmit?.();
+                    fadeOutOnSubmit ? fadeOut() : null;
+                }, onClear: () => onClear?.(), error: errorMessage }),
+            React.createElement(Link, { "data-fs-region-modal-link": true, ...idkPostalCodeLinkProps }))))));
+}
+export default RegionModal;
+//# sourceMappingURL=RegionModal.js.map

package/dist/organisms/RegionModal/RegionModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RegionModal.js","sourceRoot":"","sources":["../../../src/organisms/RegionModal/RegionModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AA4EvE,SAAS,WAAW,CAAC,EACnB,MAAM,GAAG,iBAAiB,EAC1B,KAAK,GAAG,mBAAmB,EAC3B,WAAW,GAAG,sEAAsE,EACpF,oBAAoB,GAAG,oBAAoB,EAC3C,sBAAsB,EACtB,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,UAAU,GAAG,aAAa,EAC1B,eAAe,EACf,YAAY,EACZ,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,EACP,GAAG,UAAU,EACI;IACjB,OAAO,CACL,oBAAC,KAAK,kCAEJ,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAC,cAAc,gBACT,cAAc,KACrB,UAAU,IAEb,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAChB;QACE,oBAAC,WAAW,IACV,OAAO,EAAE,GAAG,EAAE;gBACZ,OAAO,EAAE,CAAA;gBACT,OAAO,EAAE,EAAE,CAAA;YACb,CAAC,EACD,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE;gBACb,YAAY,EAAE,oBAAoB;aACnC,GACD;QACF,oBAAC,SAAS;YACR,oBAAC,UAAU,wCAET,EAAE,EAAE,GAAG,MAAM,cAAc,EAC3B,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,UAAU,EACjB,UAAU,QACV,KAAK,EAAE,UAAU,EACjB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,EACpC,QAAQ,EAAE,GAAG,EAAE;oBACb,QAAQ,EAAE,EAAE,CAAA;oBACZ,eAAe,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;gBACpC,CAAC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,EAC1B,KAAK,EAAE,YAAY,GACnB;YAEF,oBAAC,IAAI,0CAA+B,sBAAsB,GAAI,CACpD,CACX,CACJ,CACK,CACT,CAAA;AACH,CAAC;AAED,eAAe,WAAW,CAAA"}

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

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

package/dist/organisms/RegionModal/index.js

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

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

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

package/dist/organisms/SearchInput/SearchInput.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+import { SearchProviderContextValue } from '../../molecules/SearchProvider';
+export type SearchInputProps = {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string;
+    /**
+     * The current status of the Search Dropdown.
+     */
+    visibleDropdown: boolean;
+} & HTMLAttributes<HTMLDivElement> & SearchProviderContextValue;
+declare const SearchInput: React.ForwardRefExoticComponent<{
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string | undefined;
+    /**
+     * The current status of the Search Dropdown.
+     */
+    visibleDropdown: boolean;
+} & React.HTMLAttributes<HTMLDivElement> & SearchProviderContextValue & React.RefAttributes<HTMLDivElement>>;
+export default SearchInput;

package/dist/organisms/SearchInput/SearchInput.js

@@ -0,0 +1,8 @@
+import React, { forwardRef } from 'react';
+import SearchProvider from '../../molecules/SearchProvider';
+const SearchInput = forwardRef(function SearchInput({ children, visibleDropdown = false, testId = 'fs-search-input', isLoading, products, term, terms, onSearchSelection, ...otherProps }, ref) {
+    return (React.createElement("div", { ref: ref, "data-fs-search-input": true, "data-fs-search-input-dropdown-visible": visibleDropdown, "data-testid": testId, ...otherProps },
+        React.createElement(SearchProvider, { onSearchSelection: onSearchSelection, isLoading: isLoading, term: term, products: products, terms: terms }, children)));
+});
+export default SearchInput;
+//# sourceMappingURL=SearchInput.js.map

package/dist/organisms/SearchInput/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/organisms/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,cAA8C,MAAM,gCAAgC,CAAA;AAe3F,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EACE,QAAQ,EACR,eAAe,GAAG,KAAK,EACvB,MAAM,GAAG,iBAAiB,EAC1B,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,iBAAiB,EACjB,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,yEAE+B,eAAe,iBACzC,MAAM,KACf,UAAU;QAEd,oBAAC,cAAc,IACb,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,IAEX,QAAQ,CACM,CACb,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}

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

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

package/dist/organisms/SearchInput/index.js

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

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

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

package/dist/organisms/ShippingSimulation/ShippingSimulation.d.ts

@@ -0,0 +1,125 @@
+import type { HTMLAttributes } from 'react';
+import type { PriceFormatter } from '../../atoms/Price/Price';
+import React from 'react';
+import { LinkElementType, LinkProps } from '../..';
+interface ShippingSLA {
+    /**
+     * ShippingSLA carrier.
+     */
+    carrier: string;
+    /**
+     * ShippingSLA localized shipping estimate.
+     */
+    localizedEstimates: string;
+    /**
+     * ShippingSLA price.
+     */
+    price: number;
+}
+interface Address {
+    /**
+     * Address postal code
+     */
+    postalCode?: string;
+    /**
+     * Address city
+     */
+    city?: string;
+    /**
+     * Address state
+     */
+    state?: string;
+    /**
+     * Address country
+     */
+    country?: string;
+    /**
+     * Address street
+     */
+    street?: string;
+    /**
+     * Address number
+     */
+    number?: string;
+    /**
+     * Address neighborhood
+     */
+    neighborhood?: string;
+    /**
+     * Address complement
+     */
+    complement?: string;
+    /**
+     * Address reference
+     */
+    reference?: string;
+    /**
+     * Address geoCoordinates
+     */
+    geoCoordinates?: [number];
+}
+export interface ShippingSimulationProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string;
+    /**
+     * Formatter function that transforms the raw price value and render the result.
+     */
+    formatter: PriceFormatter;
+    /**
+     * The Shipping Suggestions Section's title.
+     */
+    title?: string;
+    /**
+     * The text displayed to Shipping Simulation input text.
+     */
+    inputLabel?: string;
+    /**
+     * The text displayed in Shipping options table.
+     */
+    optionsLabel?: string;
+    /**
+     * Props for the link `I don't know my Postal Code`.
+     */
+    idkPostalCodeLinkProps?: Partial<LinkProps<LinkElementType>>;
+    /**
+     * Callback function when input is typed.
+     */
+    onInput?: (event: React.FormEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function when form is submitted.
+     */
+    onSubmit?: () => void;
+    /**
+     * Callback function when the input clear button is clicked.
+     */
+    onClear?: () => void;
+    /**
+     * Location for shipping.
+     */
+    location?: string;
+    /**
+     * Address for shipping.
+     */
+    address?: Address;
+    /**
+     * Options for shipping simulation.
+     */
+    options?: ShippingSLA[];
+    /**
+     * Show clear button.
+     */
+    displayClearButton?: boolean;
+    /**
+     * Message of error for input.
+     */
+    errorMessage?: string;
+    /**
+     * Postal code.
+     */
+    postalCode?: string;
+}
+declare function ShippingSimulation({ testId, formatter, title, inputLabel, optionsLabel, idkPostalCodeLinkProps, onInput, onSubmit, onClear, location, options, displayClearButton, errorMessage, postalCode, ...otherProps }: ShippingSimulationProps): React.JSX.Element;
+export default ShippingSimulation;

package/dist/organisms/ShippingSimulation/ShippingSimulation.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Icon, InputField, Link, Price, Table, TableBody, TableCell, TableRow, } from '../..';
+function ShippingSimulation({ testId = 'fs-shipping-simulation', formatter, title = 'Shipping', inputLabel = 'Postal Code', optionsLabel = 'Shipping options', idkPostalCodeLinkProps, onInput, onSubmit, onClear, location, options = [], displayClearButton = false, errorMessage, postalCode, ...otherProps }) {
+    const hasShippingOptions = !!options && options.length > 0;
+    return (React.createElement("section", { "data-fs-shipping-simulation": true, "data-fs-shipping-simulation-empty": !hasShippingOptions ? 'true' : 'false', "data-testid": testId, ...otherProps },
+        React.createElement("h2", { "data-fs-shipping-simulation-title": true }, title),
+        React.createElement(InputField, { actionable: true, error: errorMessage, id: `${testId}-input-field`, label: inputLabel, value: postalCode, onInput: (event) => onInput?.(event), onSubmit: () => onSubmit?.(), onClear: () => onClear?.(), displayClearButton: displayClearButton }),
+        React.createElement(Link, { href: "/", "data-fs-shipping-simulation-link": true, size: "small", ...idkPostalCodeLinkProps }, idkPostalCodeLinkProps?.children ?? (React.createElement(React.Fragment, null,
+            "I don't know my Postal Code",
+            React.createElement(Icon, { name: "ArrowSquareOut", width: 20, height: 20 })))),
+        hasShippingOptions && (React.createElement(React.Fragment, null,
+            React.createElement("header", { "data-fs-shipping-simulation-header": true },
+                React.createElement("h3", { "data-fs-shipping-simulation-subtitle": true }, optionsLabel),
+                React.createElement("p", { "data-fs-shipping-simulation-location": true }, location)),
+            React.createElement(Table, null,
+                React.createElement(TableBody, null, options.map((option) => (React.createElement(TableRow, { key: option.carrier },
+                    React.createElement(TableCell, { align: "left" }, option.carrier),
+                    React.createElement(TableCell, null, option.localizedEstimates),
+                    React.createElement(TableCell, { align: "right" }, option.price && (React.createElement(Price, { formatter: formatter, value: option.price, SRText: "price" }))))))))))));
+}
+export default ShippingSimulation;
+//# sourceMappingURL=ShippingSimulation.js.map

package/dist/organisms/ShippingSimulation/ShippingSimulation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShippingSimulation.js","sourceRoot":"","sources":["../../../src/organisms/ShippingSimulation/ShippingSimulation.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EACL,IAAI,EACJ,UAAU,EACV,IAAI,EAGJ,KAAK,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,QAAQ,GACT,MAAM,OAAO,CAAA;AA6Hd,SAAS,kBAAkB,CAAC,EAC1B,MAAM,GAAG,wBAAwB,EACjC,SAAS,EACT,KAAK,GAAG,UAAU,EAClB,UAAU,GAAG,aAAa,EAC1B,YAAY,GAAG,kBAAkB,EACjC,sBAAsB,EACtB,OAAO,EACP,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,kBAAkB,GAAG,KAAK,EAC1B,YAAY,EACZ,UAAU,EACV,GAAG,UAAU,EACW;IACxB,MAAM,kBAAkB,GAAG,CAAC,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,CAAA;IAE1D,OAAO,CACL,2GAEqC,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,iBAC5D,MAAM,KACf,UAAU;QAEd,yEAAuC,KAAK,CAAM;QAElD,oBAAC,UAAU,IACT,UAAU,QACV,KAAK,EAAE,YAAY,EACnB,EAAE,EAAE,GAAG,MAAM,cAAc,EAC3B,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,UAAU,EACjB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,EACpC,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,EAC1B,kBAAkB,EAAE,kBAAkB,GACtC;QAEF,oBAAC,IAAI,IACH,IAAI,EAAC,GAAG,4CAER,IAAI,EAAC,OAAO,KACR,sBAAsB,IAEzB,sBAAsB,EAAE,QAAQ,IAAI,CACnC;YACG,6BAA6B;YAC9B,oBAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,CACpD,CACJ,CACI;QAEN,kBAAkB,IAAI,CACrB;YACE;gBACE,4EAA0C,YAAY,CAAM;gBAC5D,2EAAyC,QAAQ,CAAK,CAC/C;YAET,oBAAC,KAAK;gBACJ,oBAAC,SAAS,QACP,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,oBAAC,QAAQ,IAAC,GAAG,EAAE,MAAM,CAAC,OAAO;oBAC3B,oBAAC,SAAS,IAAC,KAAK,EAAC,MAAM,IAAE,MAAM,CAAC,OAAO,CAAa;oBACpD,oBAAC,SAAS,QAAE,MAAM,CAAC,kBAAkB,CAAa;oBAClD,oBAAC,SAAS,IAAC,KAAK,EAAC,OAAO,IACrB,MAAM,CAAC,KAAK,IAAI,CACf,oBAAC,KAAK,IACJ,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,MAAM,EAAC,OAAO,GACd,CACH,CACS,CACH,CACZ,CAAC,CACQ,CACN,CACP,CACJ,CACO,CACX,CAAA;AACH,CAAC;AAED,eAAe,kBAAkB,CAAA"}

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

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

package/dist/organisms/ShippingSimulation/index.js

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

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

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

package/dist/organisms/SlideOver/SlideOver.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { ModalProps, OverlayProps } from '../../';
+export type Direction = 'leftSide' | 'rightSide';
+export type WidthSize = 'full' | 'partial';
+export interface SlideOverProps extends Omit<ModalProps, 'title'> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+    /**
+     * A boolean value that represents the state of the SlideOver
+     */
+    isOpen: boolean;
+    /**
+     * Represents the side that the SlideOver comes from.
+     */
+    direction: Direction;
+    /**
+     * Represents the size of the SlideOver.
+     */
+    size: WidthSize;
+    /**
+     * Represents the fade effect of the SlideOver.
+     */
+    fade: 'in' | 'out';
+    children: ReactNode;
+    /**
+     * Props forwarded to the `Overlay` component.
+     */
+    overlayProps?: OverlayProps;
+    /**
+     * This function is called whenever the user clicks outside.
+     * the modal content
+     */
+    onDismiss?: () => void;
+}
+declare function SlideOver({ testId, isOpen, direction, size, fade, children, overlayProps, onDismiss, ...otherProps }: SlideOverProps): React.JSX.Element;
+export default SlideOver;

package/dist/organisms/SlideOver/SlideOver.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Modal } from '../../';
+function SlideOver({ testId = 'fs-slide-over', isOpen, direction = 'leftSide', size = 'full', fade = 'out', children, overlayProps, onDismiss, ...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, testId: testId, overlayProps: overlayProps, ...otherProps }, children));
+}
+export default SlideOver;
+//# sourceMappingURL=SlideOver.js.map

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

@@ -0,0 +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;AAsC9B,SAAS,SAAS,CAAC,EACjB,MAAM,GAAG,eAAe,EACxB,MAAM,EACN,SAAS,GAAG,UAAU,EACtB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,KAAK,EACZ,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,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,EACd,YAAY,EAAE,YAAY,KACtB,UAAU,IAEb,QAAQ,CACH,CACT,CAAA;AACH,CAAC;AAED,eAAe,SAAS,CAAA"}

package/dist/organisms/SlideOver/SlideOverHeader.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import React, { HTMLAttributes } from 'react';
+import { IconButtonProps } from '../../';
+export interface SlideOverHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /**
+     * A react component to be used as the title in the header.
+     */
+    children: ReactNode;
+    /**
+     * Props for the Close Button component.
+     */
+    closeBtnProps?: Partial<Omit<IconButtonProps, 'onClick'>>;
+    /**
+     * Function called when Close Button is clicked.
+     */
+    onClose: () => void;
+}
+declare const SlideOverHeader: ({ children, closeBtnProps, onClose, ...otherProps }: SlideOverHeaderProps) => React.JSX.Element;
+export default SlideOverHeader;

package/dist/organisms/SlideOver/SlideOverHeader.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Icon, IconButton } from '../../';
+const SlideOverHeader = ({ children, closeBtnProps = {}, onClose, ...otherProps }) => {
+    return (React.createElement("header", { "data-fs-slide-over-header": true, ...otherProps },
+        children,
+        React.createElement(IconButton, { "data-fs-slide-over-header-icon": true, "aria-label": "Close", icon: React.createElement(Icon, { name: "X" }), onClick: onClose, ...closeBtnProps })));
+};
+export default SlideOverHeader;
+//# sourceMappingURL=SlideOverHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SlideOverHeader.js","sourceRoot":"","sources":["../../../src/organisms/SlideOver/SlideOverHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAmB,MAAM,QAAQ,CAAA;AAkB1D,MAAM,eAAe,GAAG,CAAC,EACvB,QAAQ,EACR,aAAa,GAAG,EAAE,EAClB,OAAO,EACP,GAAG,UAAU,EACQ,EAAE,EAAE;IACzB,OAAO,CACL,sEAAsC,UAAU;QAC7C,QAAQ;QACT,oBAAC,UAAU,0DAEE,OAAO,EAClB,IAAI,EAAE,oBAAC,IAAI,IAAC,IAAI,EAAC,GAAG,GAAG,EACvB,OAAO,EAAE,OAAO,KACZ,aAAa,GACjB,CACK,CACV,CAAA;AACH,CAAC,CAAA;AAED,eAAe,eAAe,CAAA"}

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

@@ -0,0 +1,4 @@
+export { default, Direction as SlideOverDirection, WidthSize as SlideOverWidthSize } from './SlideOver';
+export type { SlideOverProps } from './SlideOver';
+export { default as SlideOverHeader } from './SlideOverHeader';
+export type { SlideOverHeaderProps } from './SlideOverHeader';

package/dist/organisms/SlideOver/index.js

@@ -0,0 +1,3 @@
+export { default } from './SlideOver';
+export { default as SlideOverHeader } from './SlideOverHeader';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/organisms/SlideOver/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAoE,MAAM,aAAa,CAAA;AAEvG,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAA"}

package/dist/typings/PolymorphicGenerics.d.ts

@@ -0,0 +1,28 @@
+/**
+ * These were heavily inspired by "Forwarding refs for a polymorphic React
+ * component in TypeScript", written by Ben Ilegbodu.
+ *
+ * Article link: https://www.benmvp.com/blog/forwarding-refs-polymorphic-react-component-typescript/
+ */
+import type { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType } from 'react';
+type AsProp<C extends ElementType> = {
+    as?: C;
+};
+/**
+ * Allows for extending a set of props (`ExtendedProps`) by an overriding set of props
+ * (`OverrideProps`), ensuring that any duplicates are overridden by the overriding
+ * set of props.
+ */
+type ExtendableProps<ExtendedProps = Record<string, never>, OverrideProps = Record<string, never>> = OverrideProps & Omit<ExtendedProps, keyof OverrideProps>;
+/**
+ * Allows for inheriting the props from the specified element type so that
+ * props like children, className & style work, as well as element-specific
+ * attributes like aria roles. The component (`C`) must be passed in.
+ */
+type InheritableElementProps<C extends ElementType, Props = Record<string, never>> = ExtendableProps<ComponentPropsWithoutRef<C>, Props>;
+export type PolymorphicComponentProps<C extends ElementType, Props = Record<string, never>> = InheritableElementProps<C, Props & AsProp<C>>;
+export type PolymorphicComponentPropsWithRef<C extends ElementType, P = Record<string, never>> = PolymorphicComponentProps<C, P> & {
+    ref?: ComponentPropsWithRef<C>['ref'];
+};
+export type PolymorphicRef<C extends ElementType> = PolymorphicComponentPropsWithRef<C>['ref'];
+export {};

package/dist/typings/PolymorphicGenerics.js

@@ -0,0 +1,8 @@
+/**
+ * These were heavily inspired by "Forwarding refs for a polymorphic React
+ * component in TypeScript", written by Ben Ilegbodu.
+ *
+ * Article link: https://www.benmvp.com/blog/forwarding-refs-polymorphic-react-component-typescript/
+ */
+export {};
+//# sourceMappingURL=PolymorphicGenerics.js.map

package/dist/typings/PolymorphicGenerics.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PolymorphicGenerics.js","sourceRoot":"","sources":["../../src/typings/PolymorphicGenerics.ts"],"names":[],"mappings":"AAAA;;;;;GAKG"}

package/dist/typings/PriceDefinition.d.ts

@@ -0,0 +1,6 @@
+import type { PriceFormatter } from '../atoms/Price';
+export interface PriceDefinition {
+    value: number;
+    listPrice: number;
+    formatter: PriceFormatter;
+}

package/dist/typings/PriceDefinition.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=PriceDefinition.js.map

package/dist/typings/PriceDefinition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PriceDefinition.js","sourceRoot":"","sources":["../../src/typings/PriceDefinition.ts"],"names":[],"mappings":""}

package/dist/typings/index.d.ts

@@ -0,0 +1,2 @@
+export type { PolymorphicRef, PolymorphicComponentProps, PolymorphicComponentPropsWithRef, } from './PolymorphicGenerics';
+export type { PriceDefinition } from './PriceDefinition';

package/dist/typings/index.js

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

package/dist/typings/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/typings/index.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "3.0.7",
+  "version": "3.0.32-alpha.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "typings": "dist/esm/index.d.ts",
@@ -34,8 +34,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@faststore/eslint-config": "^3.0.7",
-    "@faststore/shared": "^3.0.7",
+    "@faststore/eslint-config": "^3.0.24",
+    "@faststore/shared": "^3.0.24",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
     "eslint": "7.32.0",
@@ -44,5 +44,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "1672bc9ba921b70b5f9acfa2845c8f566d29be16"
+  "gitHead": "0535b4a1cea2f006ddf542caed8e8e51675fd43a"
 }

package/src/molecules/SkuSelector/useDefineVariant.ts

@@ -9,6 +9,10 @@ const getImageName = (src: string) => {
   return imageName
 }
 
+/**
+ * This hook infers what kind of SKU Selector will be displayed on the UI. 
+ * There are three different options, color, image, and label (default version).
+ */
 export const useDefineVariant = (options: SkuOption[], variant?: Variant): Variant =>
   useMemo(() => {
     if(variant) return variant
@@ -20,6 +24,14 @@ export const useDefineVariant = (options: SkuOption[], variant?: Variant): Varia
 
     const firstImageName = options[0]?.src && getImageName(options[0].src)
 
+    /* 
+     * If there's only one option (options.length === 1) and there is an image
+     * the correct return value is 'image'. 
+     * */
+    if (firstImageName && options.length === 1) {
+      return 'image'
+    }
+
     const areSourcesEqualsOrNull = options.every((option) => {
       if (!option.src) {
         return true

package/src/organisms/PaymentMethods/PaymentMethods.tsx

@@ -60,7 +60,7 @@ const PaymentMethods = forwardRef<HTMLDivElement, PaymentMethodsProps>(
               data-fs-payment-methods-flag
               key={`fs-payment-method-${index}-${text}`}
             >
-              <Icon width={32} height={22.5} name={icon} />
+              <Icon width={28} height={18} name={icon} />
               {text && <SROnly text={text} />}
             </li>
           ))}