@faststore/ui 1.9.8 → 1.9.9

package/dist/molecules/IconButton/index.js

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

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

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

package/dist/molecules/LoadingButton/LoadingButton.d.ts

@@ -1,14 +1,14 @@
-import React from 'react';
-import type { ButtonProps } from '../../atoms/Button';
-export interface LoadingButtonProps extends ButtonProps {
-    /**
-     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-     */
-    testId?: string;
-    /**
-     * The current loading state of the button.
-     */
-    loading: boolean;
-}
-declare const LoadingButton: React.ForwardRefExoticComponent<LoadingButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export default LoadingButton;
+import React from 'react';
+import type { ButtonProps } from '../../atoms/Button';
+export interface LoadingButtonProps extends ButtonProps {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+    /**
+     * The current loading state of the button.
+     */
+    loading: boolean;
+}
+declare const LoadingButton: React.ForwardRefExoticComponent<LoadingButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default LoadingButton;

package/dist/molecules/LoadingButton/LoadingButton.js

@@ -0,0 +1,8 @@
+import React, { forwardRef } from 'react';
+import Button from '../../atoms/Button';
+import Spinner from '../../atoms/Spinner';
+const LoadingButton = forwardRef(function LoadingButton({ children, loading, testId = 'store-loading-button', ...otherProps }, ref) {
+    return (React.createElement(Button, Object.assign({ ref: ref, "data-store-loading-button": true, testId: testId }, otherProps), loading ? React.createElement(Spinner, null) : children));
+});
+export default LoadingButton;
+//# sourceMappingURL=LoadingButton.js.map

package/dist/molecules/LoadingButton/LoadingButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingButton.js","sourceRoot":"","sources":["../../../src/molecules/LoadingButton/LoadingButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAEvC,OAAO,OAAO,MAAM,qBAAqB,CAAA;AAazC,MAAM,aAAa,GAAG,UAAU,CAC9B,SAAS,aAAa,CACpB,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,GAAG,sBAAsB,EAAE,GAAG,UAAU,EAAE,EACrE,GAAG;IAEH,OAAO,CACL,oBAAC,MAAM,kBACL,GAAG,EAAE,GAAG,qCAER,MAAM,EAAE,MAAM,IACV,UAAU,GAEb,OAAO,CAAC,CAAC,CAAC,oBAAC,OAAO,OAAG,CAAC,CAAC,CAAC,QAAQ,CAC1B,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,aAAa,CAAA"}

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

@@ -1,2 +1,2 @@
-export { default } from './LoadingButton';
-export type { LoadingButtonProps } from './LoadingButton';
+export { default } from './LoadingButton';
+export type { LoadingButtonProps } from './LoadingButton';

package/dist/molecules/LoadingButton/index.js

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

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

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

package/dist/molecules/Modal/Modal.d.ts

@@ -1,25 +1,25 @@
-import type { AriaAttributes, KeyboardEvent, MouseEvent, PropsWithChildren } from 'react';
-import React from 'react';
-import type { ModalContentProps } from './ModalContent';
-export interface ModalProps extends ModalContentProps {
-    /**
-     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-     */
-    testId?: string;
-    /**
-     * Identifies the element (or elements) that labels the current element.
-     * @see aria-labelledby https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby
-     */
-    'aria-labelledby'?: AriaAttributes['aria-label'];
-    /**
-     * This function is called whenever the user hits "Escape" or clicks outside
-     * the dialog.
-     */
-    onDismiss?: (event: MouseEvent | KeyboardEvent) => void;
-    /**
-     * Controls whether or not the dialog is open.
-     */
-    isOpen: boolean;
-}
-declare const Modal: ({ isOpen, children, onDismiss, testId, ...otherProps }: PropsWithChildren<ModalProps>) => React.ReactPortal | null;
-export default Modal;
+import type { AriaAttributes, KeyboardEvent, MouseEvent, PropsWithChildren } from 'react';
+import React from 'react';
+import type { ModalContentProps } from './ModalContent';
+export interface ModalProps extends ModalContentProps {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+    /**
+     * Identifies the element (or elements) that labels the current element.
+     * @see aria-labelledby https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby
+     */
+    'aria-labelledby'?: AriaAttributes['aria-label'];
+    /**
+     * This function is called whenever the user hits "Escape" or clicks outside
+     * the dialog.
+     */
+    onDismiss?: (event: MouseEvent | KeyboardEvent) => void;
+    /**
+     * Controls whether or not the dialog is open.
+     */
+    isOpen: boolean;
+}
+declare const Modal: ({ isOpen, children, onDismiss, testId, ...otherProps }: PropsWithChildren<ModalProps>) => React.ReactPortal | null;
+export default Modal;

package/dist/molecules/Modal/Modal.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import Overlay from '../../atoms/Overlay';
+import ModalContent from './ModalContent';
+/*
+ * This component is based on @reach/dialog.
+ * https://github.com/reach/reach-ui/blob/main/packages/dialog/src/index.tsx
+ * https://reach.tech/dialog
+ */
+const Modal = ({ isOpen, children, onDismiss, testId = 'store-modal', ...otherProps }) => {
+    const handleBackdropClick = (event) => {
+        if (event.defaultPrevented) {
+            return;
+        }
+        event.stopPropagation();
+        onDismiss?.(event);
+    };
+    const handleBackdropKeyDown = (event) => {
+        if (event.key !== 'Escape' || event.defaultPrevented) {
+            return;
+        }
+        event.stopPropagation();
+        onDismiss?.(event);
+    };
+    return isOpen
+        ? createPortal(React.createElement(Overlay, { "data-modal-overlay": true, onClick: handleBackdropClick, onKeyDown: handleBackdropKeyDown },
+            React.createElement(ModalContent, Object.assign({}, otherProps, { testId: testId }), children)), document.body)
+        : null;
+};
+export default Modal;
+//# sourceMappingURL=Modal.js.map

package/dist/molecules/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/molecules/Modal/Modal.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,OAAO,OAAO,MAAM,qBAAqB,CAAA;AACzC,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAyBzC;;;;GAIG;AAEH,MAAM,KAAK,GAAG,CAAC,EACb,MAAM,EACN,QAAQ,EACR,SAAS,EACT,MAAM,GAAG,aAAa,EACtB,GAAG,UAAU,EACiB,EAAE,EAAE;IAClC,MAAM,mBAAmB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAChD,IAAI,KAAK,CAAC,gBAAgB,EAAE;YAC1B,OAAM;SACP;QAED,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,SAAS,EAAE,CAAC,KAAK,CAAC,CAAA;IACpB,CAAC,CAAA;IAED,MAAM,qBAAqB,GAAG,CAAC,KAAoB,EAAE,EAAE;QACrD,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,gBAAgB,EAAE;YACpD,OAAM;SACP;QAED,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,SAAS,EAAE,CAAC,KAAK,CAAC,CAAA;IACpB,CAAC,CAAA;IAED,OAAO,MAAM;QACX,CAAC,CAAC,YAAY,CACV,oBAAC,OAAO,gCAEN,OAAO,EAAE,mBAAmB,EAC5B,SAAS,EAAE,qBAAqB;YAEhC,oBAAC,YAAY,oBAAK,UAAU,IAAE,MAAM,EAAE,MAAM,KACzC,QAAQ,CACI,CACP,EACV,QAAQ,CAAC,IAAI,CACd;QACH,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/molecules/Modal/ModalContent.d.ts

@@ -1,10 +1,10 @@
-import type { DetailedHTMLProps, HTMLAttributes, RefObject } from 'react';
-interface ModalContentPureProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
-    beforeElementRef: RefObject<HTMLDivElement>;
-    trapFocusRef: RefObject<HTMLDivElement>;
-    afterElementRef: RefObject<HTMLDivElement>;
-    testId?: string;
-}
-export declare type ModalContentProps = Omit<ModalContentPureProps, 'trapFocusRef' | 'onClick' | 'beforeElementRef' | 'afterElementRef'>;
-declare const ModalContent: ({ children, ...otherProps }: ModalContentProps) => JSX.Element;
-export default ModalContent;
+import type { DetailedHTMLProps, HTMLAttributes, RefObject } from 'react';
+interface ModalContentPureProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    beforeElementRef: RefObject<HTMLDivElement>;
+    trapFocusRef: RefObject<HTMLDivElement>;
+    afterElementRef: RefObject<HTMLDivElement>;
+    testId?: string;
+}
+export declare type ModalContentProps = Omit<ModalContentPureProps, 'trapFocusRef' | 'onClick' | 'beforeElementRef' | 'afterElementRef'>;
+declare const ModalContent: ({ children, ...otherProps }: ModalContentProps) => JSX.Element;
+export default ModalContent;

package/dist/molecules/Modal/ModalContent.js

@@ -0,0 +1,23 @@
+import React, { useRef } from 'react';
+import useTrapFocus from './useTrapFocus';
+const ModalContentPure = ({ beforeElementRef, trapFocusRef, afterElementRef, testId = 'store-modal-content', children, ...otherProps }) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: beforeElementRef, "data-testid": "beforeElement", tabIndex: 0, "aria-hidden": "true" }),
+        React.createElement("div", Object.assign({ "data-store-modal-content": true, "data-testid": testId, ref: trapFocusRef, "aria-modal": "true", role: "dialog", tabIndex: -1 }, otherProps), children),
+        React.createElement("div", { ref: afterElementRef, "data-testid": "afterElement", tabIndex: 0, "aria-hidden": "true" })));
+};
+const ModalContent = ({ children, ...otherProps }) => {
+    const trapFocusRef = useRef(null);
+    const beforeElementRef = useRef(null);
+    const afterElementRef = useRef(null);
+    useTrapFocus({
+        beforeElementRef,
+        trapFocusRef,
+        afterElementRef,
+    });
+    return (React.createElement(ModalContentPure, Object.assign({}, otherProps, { trapFocusRef: trapFocusRef, beforeElementRef: beforeElementRef, afterElementRef: afterElementRef, onClick: (event) => {
+            event.stopPropagation();
+        } }), children));
+};
+export default ModalContent;
+//# sourceMappingURL=ModalContent.js.map

package/dist/molecules/Modal/ModalContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContent.js","sourceRoot":"","sources":["../../../src/molecules/Modal/ModalContent.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAazC,MAAM,gBAAgB,GAAG,CAAC,EACxB,gBAAgB,EAChB,YAAY,EACZ,eAAe,EACf,MAAM,GAAG,qBAAqB,EAC9B,QAAQ,EACR,GAAG,UAAU,EACS,EAAE,EAAE;IAC1B,OAAO,CACL;QACE,6BACE,GAAG,EAAE,gBAAgB,iBACT,eAAe,EAC3B,QAAQ,EAAE,CAAC,iBACC,MAAM,GAClB;QACF,4FAEe,MAAM,EACnB,GAAG,EAAE,YAAY,gBACN,MAAM,EACjB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,IACR,UAAU,GAEb,QAAQ,CACL;QACN,6BACE,GAAG,EAAE,eAAe,iBACR,cAAc,EAC1B,QAAQ,EAAE,CAAC,iBACC,MAAM,GAClB,CACD,CACJ,CAAA;AACH,CAAC,CAAA;AAOD,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAqB,EAAE,EAAE;IACtE,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACjD,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACrD,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAEpD,YAAY,CAAC;QACX,gBAAgB;QAChB,YAAY;QACZ,eAAe;KAChB,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,gBAAgB,oBACX,UAAU,IACd,YAAY,EAAE,YAAY,EAC1B,gBAAgB,EAAE,gBAAgB,EAClC,eAAe,EAAE,eAAe,EAChC,OAAO,EAAE,CAAC,KAAiB,EAAE,EAAE;YAC7B,KAAK,CAAC,eAAe,EAAE,CAAA;QACzB,CAAC,KAEA,QAAQ,CACQ,CACpB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,YAAY,CAAA"}

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

@@ -1,2 +1,2 @@
-export { default } from './Modal';
-export type { ModalProps } from './Modal';
+export { default } from './Modal';
+export type { ModalProps } from './Modal';

package/dist/molecules/Modal/index.js

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

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

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

package/dist/molecules/Modal/useTrapFocus.d.ts

@@ -1,8 +1,8 @@
-import type { RefObject } from 'react';
-interface TrapFocusParams {
-    beforeElementRef: RefObject<HTMLElement>;
-    trapFocusRef: RefObject<HTMLElement>;
-    afterElementRef: RefObject<HTMLElement>;
-}
-declare const useTrapFocus: ({ trapFocusRef, beforeElementRef, afterElementRef, }: TrapFocusParams) => void;
-export default useTrapFocus;
+import type { RefObject } from 'react';
+interface TrapFocusParams {
+    beforeElementRef: RefObject<HTMLElement>;
+    trapFocusRef: RefObject<HTMLElement>;
+    afterElementRef: RefObject<HTMLElement>;
+}
+declare const useTrapFocus: ({ trapFocusRef, beforeElementRef, afterElementRef, }: TrapFocusParams) => void;
+export default useTrapFocus;

package/dist/molecules/Modal/useTrapFocus.js

@@ -0,0 +1,76 @@
+import { useEffect, useRef } from 'react';
+import { tabbable } from 'tabbable';
+/*
+ * Element that will maintain the focus inside trapFocusRef, focus the first element,
+ * and focus back on the element that was in focus when useTrapFocus was triggered.
+ *
+ * Inspired by Reakit useTrapFocus https://github.com/reakit/reakit/blob/a211d94da9f3b683182568a56479b91afb1b85ae/packages/reakit/src/Dialog/__utils/useFocusTrap.ts
+ */
+const useTrapFocus = ({ trapFocusRef, beforeElementRef, afterElementRef, }) => {
+    const tabbableNodesRef = useRef();
+    const nodeToRestoreRef = useRef(document.hasFocus() ? document.activeElement : null);
+    // Focus back on the element that was focused when useTrapFocus is triggered.
+    useEffect(() => {
+        const nodeToRestore = nodeToRestoreRef.current;
+        return () => {
+            nodeToRestore?.focus();
+        };
+    }, [nodeToRestoreRef]);
+    // Set focus on first tabbable element
+    useEffect(() => {
+        if (!trapFocusRef.current) {
+            return;
+        }
+        if (!tabbableNodesRef.current) {
+            tabbableNodesRef.current = tabbable(trapFocusRef.current);
+        }
+        const [firstTabbable] = tabbableNodesRef.current;
+        if (!firstTabbable) {
+            trapFocusRef.current.focus();
+            return;
+        }
+        firstTabbable.focus();
+    }, [trapFocusRef]);
+    // Handle loop focus. Set keydown and focusin event listeners
+    useEffect(() => {
+        if (!trapFocusRef.current ||
+            !beforeElementRef.current ||
+            !afterElementRef.current) {
+            return;
+        }
+        const beforeElement = beforeElementRef.current;
+        const afterElement = afterElementRef.current;
+        const trapFocus = trapFocusRef.current;
+        const handleLoopFocus = (nativeEvent) => {
+            if (!document.hasFocus()) {
+                return;
+            }
+            tabbableNodesRef.current = tabbable(trapFocusRef.current);
+            if (!tabbableNodesRef.current.length) {
+                trapFocus.focus();
+            }
+            /*
+             * Handle loop focus from beforeElementRef. This node can only be focused if the user press shift tab.
+             * It will focus the last element of the trapFocusRef.
+             */
+            if (nativeEvent.target === beforeElement) {
+                tabbableNodesRef.current[tabbableNodesRef.current.length - 1]?.focus();
+            }
+            /*
+             * Handle loop focus from afterElementRef. This node can only be focused if the user press tab.
+             * It will focus the first element of the trapFocusRef.
+             */
+            if (nativeEvent.target === afterElement) {
+                tabbableNodesRef.current[0]?.focus();
+            }
+        };
+        beforeElement?.addEventListener('focusin', handleLoopFocus);
+        afterElement?.addEventListener('focusin', handleLoopFocus);
+        return () => {
+            beforeElement?.removeEventListener('focusin', handleLoopFocus);
+            afterElement?.removeEventListener('focusin', handleLoopFocus);
+        };
+    }, [tabbableNodesRef, afterElementRef, beforeElementRef, trapFocusRef]);
+};
+export default useTrapFocus;
+//# sourceMappingURL=useTrapFocus.js.map

package/dist/molecules/Modal/useTrapFocus.js.map

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

package/dist/molecules/PaymentMethods/PaymentMethods.d.ts

@@ -1,26 +1,26 @@
-import type { ReactNode, AriaAttributes } from 'react';
-import React from 'react';
-export interface PaymentMethodsProps {
-    /**
-     * ID to find this component in testing tools (e.g.: cypress,
-     * testing-library, and jest).
-     */
-    testId?: string;
-    /**
-     * Title of the payment methods section (e.g.: "Payment methods",
-     * "Accepted Cards").
-     */
-    title?: ReactNode;
-    /**
-     * Defines a string value that labels the current element when
-     * title is not used.
-     */
-    'aria-label'?: AriaAttributes['aria-label'];
-    /**
-     * Children will receive the flags to be displayed in the payment
-     * methods section (e.g.:, visa, mastercard, etc).
-     */
-    children: ReactNode;
-}
-declare const PaymentMethods: React.ForwardRefExoticComponent<PaymentMethodsProps & React.RefAttributes<HTMLDivElement>>;
-export default PaymentMethods;
+import type { ReactNode, AriaAttributes } from 'react';
+import React from 'react';
+export interface PaymentMethodsProps {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string;
+    /**
+     * Title of the payment methods section (e.g.: "Payment methods",
+     * "Accepted Cards").
+     */
+    title?: ReactNode;
+    /**
+     * Defines a string value that labels the current element when
+     * title is not used.
+     */
+    'aria-label'?: AriaAttributes['aria-label'];
+    /**
+     * Children will receive the flags to be displayed in the payment
+     * methods section (e.g.:, visa, mastercard, etc).
+     */
+    children: ReactNode;
+}
+declare const PaymentMethods: React.ForwardRefExoticComponent<PaymentMethodsProps & React.RefAttributes<HTMLDivElement>>;
+export default PaymentMethods;

package/dist/molecules/PaymentMethods/PaymentMethods.js

@@ -0,0 +1,8 @@
+import React, { forwardRef } from 'react';
+const PaymentMethods = forwardRef(function PaymentMethods({ testId = 'store-payment-methods', title, 'aria-label': ariaLabel = 'Payment Methods', children, ...otherProps }, ref) {
+    return (React.createElement("div", Object.assign({ ref: ref, "data-store-payment-methods": true, "data-testid": testId }, otherProps),
+        !!title && React.createElement("div", null, title),
+        React.createElement("div", { "data-payment-methods-flags": true, "aria-label": title ? undefined : ariaLabel }, children)));
+});
+export default PaymentMethods;
+//# sourceMappingURL=PaymentMethods.js.map

package/dist/molecules/PaymentMethods/PaymentMethods.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentMethods.js","sourceRoot":"","sources":["../../../src/molecules/PaymentMethods/PaymentMethods.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAyBzC,MAAM,cAAc,GAAG,UAAU,CAC/B,SAAS,cAAc,CACrB,EACE,MAAM,GAAG,uBAAuB,EAChC,KAAK,EACL,YAAY,EAAE,SAAS,GAAG,iBAAiB,EAC3C,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,qDAEK,MAAM,IACf,UAAU;QAEb,CAAC,CAAC,KAAK,IAAI,iCAAM,KAAK,CAAO;QAC9B,+EAEc,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IAExC,QAAQ,CACL,CACF,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,cAAc,CAAA"}

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

@@ -1,2 +1,2 @@
-export { default } from './PaymentMethods';
-export type { PaymentMethodsProps } from './PaymentMethods';
+export { default } from './PaymentMethods';
+export type { PaymentMethodsProps } from './PaymentMethods';

package/dist/molecules/PaymentMethods/index.js

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

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

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

package/dist/molecules/PaymentMethods/stories/assets/Icons.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
-export declare function VisaCard(): JSX.Element;
-export declare function MasterCard(): JSX.Element;
-export declare function AmericanExpressCard(): JSX.Element;
-export declare function MaestroCard(): JSX.Element;
-export declare function EloCard(): JSX.Element;
-export declare function HiperCard(): JSX.Element;
-export declare function PayPal(): JSX.Element;
-export declare function DinersClub(): JSX.Element;
+/// <reference types="react" />
+export declare function VisaCard(): JSX.Element;
+export declare function MasterCard(): JSX.Element;
+export declare function AmericanExpressCard(): JSX.Element;
+export declare function MaestroCard(): JSX.Element;
+export declare function EloCard(): JSX.Element;
+export declare function HiperCard(): JSX.Element;
+export declare function PayPal(): JSX.Element;
+export declare function DinersClub(): JSX.Element;

package/dist/molecules/PaymentMethods/stories/assets/Icons.js

@@ -0,0 +1,26 @@
+import React from 'react';
+export function VisaCard() {
+    return (React.createElement("img", { alt: "Visa logo", width: 50, height: 50, src: "https://seeklogo.com/images/V/visa-logo-BDDD51C62D-seeklogo.com.png" }));
+}
+export function MasterCard() {
+    return (React.createElement("img", { alt: "Mastercard logo", width: 50, height: 50, src: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Mastercard-logo.svg/1544px-Mastercard-logo.svg.png" }));
+}
+export function AmericanExpressCard() {
+    return (React.createElement("img", { alt: "American express logo", width: 50, height: 50, src: "https://seeklogo.com/images/A/american-express-logo-EDF87C04A0-seeklogo.com.png" }));
+}
+export function MaestroCard() {
+    return (React.createElement("img", { alt: "American express logo", width: 50, height: 50, src: "https://seeklogo.com/images/M/Maestro-logo-BF4E5E7686-seeklogo.com.png" }));
+}
+export function EloCard() {
+    return (React.createElement("img", { alt: "Elo logo", width: 50, height: 50, src: "https://seeklogo.com/images/E/elo-logo-9F0CF48D54-seeklogo.com.png" }));
+}
+export function HiperCard() {
+    return (React.createElement("img", { alt: "Hipercard logo", width: 50, height: 50, src: "https://seeklogo.com/images/H/Hipercard-logo-139D91D263-seeklogo.com.png" }));
+}
+export function PayPal() {
+    return (React.createElement("img", { alt: "PayPal brand", width: 50, height: 50, src: "https://seeklogo.com/images/P/paypal-logo-484B6FE744-seeklogo.com.png" }));
+}
+export function DinersClub() {
+    return (React.createElement("img", { alt: "Diners club logo", width: 50, height: 50, src: "https://seeklogo.com/images/D/Diners_Club_International-logo-EF50D35BE8-seeklogo.com.png" }));
+}
+//# sourceMappingURL=Icons.js.map

package/dist/molecules/PaymentMethods/stories/assets/Icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icons.js","sourceRoot":"","sources":["../../../../../src/molecules/PaymentMethods/stories/assets/Icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,UAAU,QAAQ;IACtB,OAAO,CACL,6BACE,GAAG,EAAC,WAAW,EACf,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,GAAG,EAAC,qEAAqE,GACzE,CACH,CAAA;AACH,CAAC;AAED,MAAM,UAAU,UAAU;IACxB,OAAO,CACL,6BACE,GAAG,EAAC,iBAAiB,EACrB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,GAAG,EAAC,8GAA8G,GAClH,CACH,CAAA;AACH,CAAC;AAED,MAAM,UAAU,mBAAmB;IACjC,OAAO,CACL,6BACE,GAAG,EAAC,uBAAuB,EAC3B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,GAAG,EAAC,iFAAiF,GACrF,CACH,CAAA;AACH,CAAC;AAED,MAAM,UAAU,WAAW;IACzB,OAAO,CACL,6BACE,GAAG,EAAC,uBAAuB,EAC3B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,GAAG,EAAC,wEAAwE,GAC5E,CACH,CAAA;AACH,CAAC;AAED,MAAM,UAAU,OAAO;IACrB,OAAO,CACL,6BACE,GAAG,EAAC,UAAU,EACd,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,GAAG,EAAC,oEAAoE,GACxE,CACH,CAAA;AACH,CAAC;AAED,MAAM,UAAU,SAAS;IACvB,OAAO,CACL,6BACE,GAAG,EAAC,gBAAgB,EACpB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,GAAG,EAAC,0EAA0E,GAC9E,CACH,CAAA;AACH,CAAC;AAED,MAAM,UAAU,MAAM;IACpB,OAAO,CACL,6BACE,GAAG,EAAC,cAAc,EAClB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,GAAG,EAAC,uEAAuE,GAC3E,CACH,CAAA;AACH,CAAC;AAED,MAAM,UAAU,UAAU;IACxB,OAAO,CACL,6BACE,GAAG,EAAC,kBAAkB,EACtB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,GAAG,EAAC,0FAA0F,GAC9F,CACH,CAAA;AACH,CAAC"}

package/dist/molecules/PriceRange/PriceRange.d.ts

@@ -1,23 +1,23 @@
-import type { AriaAttributes } from 'react';
-import type { PriceProps } from '../../atoms/Price';
-import type { SliderProps } from '../../atoms/Slider';
-export declare type PriceRangeProps = SliderProps & {
-    /**
-     * The current use case variant for prices.
-     */
-    variant?: PriceProps['variant'];
-    /**
-     * Formatter function that transforms the raw price value and render the result.
-     */
-    formatter: PriceProps['formatter'];
-    /**
-     * Returns the value of element's class content attribute.
-     */
-    className?: string;
-    /**
-     * Defines a string value that labels the current element.
-     */
-    'aria-label'?: AriaAttributes['aria-label'];
-};
-declare const PriceRange: ({ className, formatter, max, min, onChange, testId, variant, "aria-label": ariaLabel, }: PriceRangeProps) => JSX.Element;
-export default PriceRange;
+import type { AriaAttributes } from 'react';
+import type { PriceProps } from '../../atoms/Price';
+import type { SliderProps } from '../../atoms/Slider';
+export declare type PriceRangeProps = SliderProps & {
+    /**
+     * The current use case variant for prices.
+     */
+    variant?: PriceProps['variant'];
+    /**
+     * Formatter function that transforms the raw price value and render the result.
+     */
+    formatter: PriceProps['formatter'];
+    /**
+     * Returns the value of element's class content attribute.
+     */
+    className?: string;
+    /**
+     * Defines a string value that labels the current element.
+     */
+    'aria-label'?: AriaAttributes['aria-label'];
+};
+declare const PriceRange: ({ className, formatter, max, min, onChange, testId, variant, "aria-label": ariaLabel, }: PriceRangeProps) => JSX.Element;
+export default PriceRange;

package/dist/molecules/PriceRange/PriceRange.js

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+import Price from '../../atoms/Price';
+import Slider from '../../atoms/Slider';
+const PriceRange = ({ className, formatter, max, min, onChange, testId = 'store-price-range', variant, 'aria-label': ariaLabel, }) => {
+    const [minVal, setMinVal] = useState(min);
+    const [maxVal, setMaxVal] = useState(max);
+    const handleChange = (values) => {
+        if (values.min !== minVal) {
+            setMinVal(values.min);
+        }
+        if (values.max !== maxVal) {
+            setMaxVal(values.max);
+        }
+        onChange?.(values);
+    };
+    return (React.createElement("div", { "data-store-price-range": true, "data-testid": testId, className: className },
+        React.createElement(Slider, { min: min, max: max, onChange: handleChange, "aria-label": ariaLabel }),
+        React.createElement("div", { "data-price-range-values": true },
+            React.createElement(Price, { formatter: formatter, "data-price-range-value": "min", value: minVal, variant: variant }),
+            React.createElement(Price, { formatter: formatter, "data-price-range-value": "max", value: maxVal, variant: variant }))));
+};
+export default PriceRange;
+//# sourceMappingURL=PriceRange.js.map

package/dist/molecules/PriceRange/PriceRange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PriceRange.js","sourceRoot":"","sources":["../../../src/molecules/PriceRange/PriceRange.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGvC,OAAO,KAAK,MAAM,mBAAmB,CAAA;AAErC,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAqBvC,MAAM,UAAU,GAAG,CAAC,EAClB,SAAS,EACT,SAAS,EACT,GAAG,EACH,GAAG,EACH,QAAQ,EACR,MAAM,GAAG,mBAAmB,EAC5B,OAAO,EACP,YAAY,EAAE,SAAS,GACP,EAAE,EAAE;IACpB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAA;IACzC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAA;IAEzC,MAAM,YAAY,GAA4B,CAAC,MAAM,EAAE,EAAE;QACvD,IAAI,MAAM,CAAC,GAAG,KAAK,MAAM,EAAE;YACzB,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;SACtB;QAED,IAAI,MAAM,CAAC,GAAG,KAAK,MAAM,EAAE;YACzB,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;SACtB;QAED,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAA;IACpB,CAAC,CAAA;IAED,OAAO,CACL,4EAAyC,MAAM,EAAE,SAAS,EAAE,SAAS;QACnE,oBAAC,MAAM,IACL,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,YAAY,gBACV,SAAS,GACrB;QACF;YACE,oBAAC,KAAK,IACJ,SAAS,EAAE,SAAS,4BACG,KAAK,EAC5B,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,OAAO,GAChB;YACF,oBAAC,KAAK,IACJ,SAAS,EAAE,SAAS,4BACG,KAAK,EAC5B,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,OAAO,GAChB,CACE,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}

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

@@ -1,2 +1,2 @@
-export { default } from './PriceRange';
-export type { PriceRangeProps } from './PriceRange';
+export { default } from './PriceRange';
+export type { PriceRangeProps } from './PriceRange';

package/dist/molecules/PriceRange/index.js

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

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

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

package/dist/molecules/ProductCard/ProductCard.d.ts

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

package/dist/molecules/ProductCard/ProductCard.js

@@ -0,0 +1,6 @@
+import React, { forwardRef } from 'react';
+const ProductCard = forwardRef(function Card({ testId = 'store-product-card', children, ...otherProps }, ref) {
+    return (React.createElement("article", Object.assign({ ref: ref, "data-store-product-card": true, "data-testid": testId }, otherProps), children));
+});
+export default ProductCard;
+//# sourceMappingURL=ProductCard.js.map

package/dist/molecules/ProductCard/ProductCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCard.js","sourceRoot":"","sources":["../../../src/molecules/ProductCard/ProductCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAWzC,MAAM,WAAW,GAAG,UAAU,CAAmC,SAAS,IAAI,CAC5E,EAAE,MAAM,GAAG,oBAAoB,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAC1D,GAAG;IAEH,OAAO,CACL,+CACE,GAAG,EAAE,GAAG,kDAEK,MAAM,IACf,UAAU,GAEb,QAAQ,CACD,CACX,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,WAAW,CAAA"}

package/dist/molecules/ProductCard/ProductCardActions.d.ts

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

package/dist/molecules/ProductCard/ProductCardActions.js

@@ -0,0 +1,6 @@
+import React, { forwardRef } from 'react';
+const ProductCardActions = forwardRef(function CardActions({ testId = 'store-product-card-actions', children, ...otherProps }, ref) {
+    return (React.createElement("div", Object.assign({ ref: ref, "data-product-card-actions": true, "data-testid": testId }, otherProps), children));
+});
+export default ProductCardActions;
+//# sourceMappingURL=ProductCardActions.js.map

package/dist/molecules/ProductCard/ProductCardActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCardActions.js","sourceRoot":"","sources":["../../../src/molecules/ProductCard/ProductCardActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAWzC,MAAM,kBAAkB,GAAG,UAAU,CACnC,SAAS,WAAW,CAClB,EAAE,MAAM,GAAG,4BAA4B,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAClE,GAAG;IAEH,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,oDAEK,MAAM,IACf,UAAU,GAEb,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,kBAAkB,CAAA"}