@faststore/components 2.0.53-alpha.0 → 2.0.56-alpha.0

package/dist/atoms/Slider/Slider.d.ts

@@ -0,0 +1,71 @@
+/**
+ * This code is inspired by the work of [sandra-lewis](https://codesandbox.io/u/sandra-lewis)
+ */
+import React from 'react';
+import type { ReactNode } from 'react';
+interface Range {
+    absolute: number;
+    selected: number;
+}
+interface RangeLabel {
+    min: string | ReactNode;
+    max: string | ReactNode;
+}
+export type SliderProps = {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     *
+     * @default 'fs-slider'
+     */
+    testId?: string;
+    /**
+     * The minimum value of the slider.
+     */
+    min: Range;
+    /**
+     * The maximum value of the slider.
+     */
+    max: Range;
+    /**
+     * Specifies the number interval to be used in the inputs.
+     */
+    step?: number;
+    /**
+     * Specifies the absolute values labels.
+     */
+    absoluteValuesLabel: RangeLabel;
+    /**
+     * Callback that fires when the slider value changes.
+     */
+    onChange?: (value: {
+        min: number;
+        max: number;
+    }) => void;
+    /**
+     * Callback that fires when the slider value ends changing.
+     */
+    onEnd?: (value: {
+        min: number;
+        max: number;
+    }) => void;
+    /**
+     * A function used to set a human-readable value text based on the slider's current value.
+     */
+    getAriaValueText?(value: number, thumb?: 'min' | 'max'): string;
+    /**
+     * Component that renders min value label above the left thumb.
+     */
+    minValueLabelComponent?: (minValue: number) => ReactNode;
+    /**
+     * Component that renders max value label above the right thumb.
+     */
+    maxValueLabelComponent?: (maxValue: number) => ReactNode;
+};
+type SliderRefType = {
+    setSliderValues: (values: {
+        min: number;
+        max: number;
+    }) => void;
+};
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<SliderRefType | undefined>>;
+export default Slider;

package/dist/atoms/Slider/Slider.js

@@ -0,0 +1,57 @@
+/**
+ * This code is inspired by the work of [sandra-lewis](https://codesandbox.io/u/sandra-lewis)
+ */
+import React, { useState, useMemo, useImperativeHandle, forwardRef, } from 'react';
+const percent = (value, min, max) => Math.round(((value - min) / (max - min)) * 100);
+const Slider = forwardRef(function Slider({ min, max, absoluteValuesLabel, onChange, onEnd, testId = 'fs-slider', getAriaValueText, step, minValueLabelComponent, maxValueLabelComponent, ...otherProps }, ref) {
+    const widthPercent = useMemo(() => (max.absolute - min.absolute) / 100, [max.absolute, min.absolute]);
+    const [minPercent, setMinPercent] = useState(() => percent(min.selected, min.absolute, max.absolute));
+    const [maxPercent, setMaxPercent] = useState(() => percent(max.selected, min.absolute, max.absolute));
+    const [minVal, setMinVal] = useState(() => Math.floor(min.absolute + minPercent * widthPercent));
+    const [maxVal, setMaxVal] = useState(() => Math.round(min.absolute + maxPercent * widthPercent));
+    const percentage = (value) => (value / max.absolute) * 100;
+    useImperativeHandle(ref, () => ({
+        setSliderValues: (values) => {
+            const sliderMinValue = Math.min(Number(values.min), maxVal);
+            setMinVal(sliderMinValue);
+            setMinPercent(percent(sliderMinValue, min.absolute, max.absolute));
+            if (values.max > max.absolute) {
+                setMaxVal(max.absolute);
+                setMaxPercent(percent(max.absolute, min.absolute, max.absolute));
+                return;
+            }
+            const sliderMaxValue = Math.max(Number(values.max), minVal);
+            setMaxVal(sliderMaxValue);
+            setMaxPercent(percent(sliderMaxValue, min.absolute, max.absolute));
+        },
+    }));
+    return (React.createElement("div", { "data-fs-slider": true, "data-testid": testId },
+        React.createElement("div", { "data-fs-slider-absolute-values": true },
+            React.createElement("span", null, absoluteValuesLabel.min),
+            React.createElement("span", null, absoluteValuesLabel.max)),
+        React.createElement("div", { "data-fs-slider-wrapper": true },
+            React.createElement("div", { "data-fs-slider-range": true, style: {
+                    left: `${minPercent}%`,
+                    width: `${maxPercent - minPercent}%`,
+                } }),
+            React.createElement("input", { type: "range", min: Math.floor(min.absolute), max: Math.round(max.absolute), value: minVal, step: step, onMouseUp: () => onEnd?.({ min: minVal, max: maxVal }), onTouchEnd: () => onEnd?.({ min: minVal, max: maxVal }), onChange: (event) => {
+                    const minValue = Math.min(Number(event.target.value), maxVal);
+                    setMinVal(minValue);
+                    setMinPercent(percent(minValue, min.absolute, max.absolute));
+                    onChange?.({ min: minValue, max: maxVal });
+                }, "data-fs-slider-thumb": "left", "aria-valuemin": min.absolute, "aria-valuemax": max.absolute, "aria-valuenow": minVal, "aria-label": String(minVal), "aria-labelledby": getAriaValueText?.(minVal, 'min'), ...otherProps }),
+            minValueLabelComponent && (React.createElement("span", { "data-fs-slider-value-label": "min", style: {
+                    left: `calc(${percentage(minVal)}% + (${8 - percentage(minVal) * 0.2}px))`,
+                } }, minValueLabelComponent(minVal))),
+            React.createElement("input", { type: "range", min: Math.floor(min.absolute), max: Math.round(max.absolute), value: maxVal, step: step, onMouseUp: () => onEnd?.({ min: minVal, max: maxVal }), onTouchEnd: () => onEnd?.({ min: minVal, max: maxVal }), onChange: (event) => {
+                    const maxValue = Math.max(Number(event.target.value), minVal);
+                    setMaxVal(maxValue);
+                    setMaxPercent(percent(maxValue, min.absolute, max.absolute));
+                    onChange?.({ min: minVal, max: maxValue });
+                }, "data-fs-slider-thumb": "right", "aria-valuemin": min.absolute, "aria-valuemax": max.absolute, "aria-valuenow": maxVal, "aria-label": String(maxVal), "aria-labelledby": getAriaValueText?.(maxVal, 'max') }),
+            maxValueLabelComponent && (React.createElement("span", { "data-fs-slider-value-label": "max", style: {
+                    left: `calc(${percentage(maxVal)}% + (${8 - percentage(maxVal) * 0.2}px))`,
+                } }, maxValueLabelComponent(maxVal))))));
+});
+export default Slider;
+//# sourceMappingURL=Slider.js.map

package/dist/atoms/Slider/Slider.js.map

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

package/dist/atoms/Slider/index.d.ts

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

package/dist/atoms/Slider/index.js

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

package/dist/atoms/Slider/index.js.map

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

package/dist/hooks/UIProvider.d.ts

@@ -0,0 +1,33 @@
+import type { PropsWithChildren } from 'react';
+interface Toast {
+    message: string;
+    status: 'ERROR' | 'WARNING' | 'INFO';
+    title?: string;
+    icon?: string;
+}
+interface State {
+    /** Cart sidebar */
+    cart: boolean;
+    /** Region modal */
+    modal: boolean;
+    /** Menu slider */
+    navbar: boolean;
+    /** Search page filter slider */
+    filter: boolean;
+    toasts: Toast[];
+}
+interface Context extends State {
+    closeNavbar: () => void;
+    openNavbar: () => void;
+    closeFilter: () => void;
+    openFilter: () => void;
+    openCart: () => void;
+    closeCart: () => void;
+    openModal: () => void;
+    closeModal: () => void;
+    pushToast: (data: Toast) => void;
+    popToast: () => void;
+}
+declare function UIProvider({ children }: PropsWithChildren): JSX.Element;
+export declare function useUI(): Context;
+export default UIProvider;

package/dist/hooks/UIProvider.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { createContext, useContext, useMemo, useReducer } from 'react';
+const reducer = (state, action) => {
+    const { type } = action;
+    switch (type) {
+        case 'open': {
+            const { payload } = action;
+            document.body.classList.add('no-scroll');
+            return {
+                ...state,
+                [payload]: true,
+            };
+        }
+        case 'close': {
+            const { payload } = action;
+            document.body.classList.remove('no-scroll');
+            return {
+                ...state,
+                [payload]: false,
+            };
+        }
+        case 'pushToast': {
+            return {
+                ...state,
+                toasts: [...state.toasts, action.payload],
+            };
+        }
+        case 'popToast': {
+            return {
+                ...state,
+                toasts: state.toasts.slice(1),
+            };
+        }
+        default:
+            throw new Error(`Action ${type} not implemented`);
+    }
+};
+const initializer = () => ({
+    cart: false,
+    modal: false,
+    navbar: false,
+    filter: false,
+    toasts: [],
+});
+const UIContext = createContext(undefined);
+function UIProvider({ children }) {
+    const [ui, dispatch] = useReducer(reducer, undefined, initializer);
+    const callbacks = useMemo(() => ({
+        openFilter: () => dispatch({ type: 'open', payload: 'filter' }),
+        closeFilter: () => dispatch({ type: 'close', payload: 'filter' }),
+        openNavbar: () => dispatch({ type: 'open', payload: 'navbar' }),
+        closeNavbar: () => dispatch({ type: 'close', payload: 'navbar' }),
+        openCart: () => dispatch({ type: 'open', payload: 'cart' }),
+        closeCart: () => dispatch({ type: 'close', payload: 'cart' }),
+        openModal: () => dispatch({ type: 'open', payload: 'modal' }),
+        closeModal: () => dispatch({ type: 'close', payload: 'modal' }),
+        pushToast: (toast) => dispatch({ type: 'pushToast', payload: toast }),
+        popToast: () => dispatch({ type: 'popToast' }),
+    }), []);
+    const value = useMemo(() => ({
+        ...ui,
+        ...callbacks,
+    }), [callbacks, ui]);
+    return React.createElement(UIContext.Provider, { value: value }, children);
+}
+export function useUI() {
+    const context = useContext(UIContext);
+    if (context === undefined) {
+        throw new Error('Missing UI context on React tree');
+    }
+    return context;
+}
+export default UIProvider;
+//# sourceMappingURL=UIProvider.js.map

package/dist/hooks/UIProvider.js.map

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

package/dist/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { default as UIProvider, useUI } from './UIProvider';
+export { useFadeEffect } from './useFadeEffect';
+export { useTrapFocus } from './useTrapFocus';

package/dist/hooks/index.js

@@ -0,0 +1,4 @@
+export { default as UIProvider, useUI } from './UIProvider';
+export { useFadeEffect } from './useFadeEffect';
+export { useTrapFocus } from './useTrapFocus';
+//# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/hooks/useFadeEffect.d.ts

@@ -0,0 +1,5 @@
+export declare const useFadeEffect: () => {
+    fade: "in" | "out";
+    fadeIn: () => void;
+    fadeOut: () => void;
+};

package/dist/hooks/useFadeEffect.js

@@ -0,0 +1,18 @@
+import { useState, useCallback, useEffect } from 'react';
+export const useFadeEffect = () => {
+    const [fade, setFade] = useState('out');
+    const fadeOut = useCallback(() => setFade('out'), []);
+    const fadeIn = useCallback(() => setFade('in'), []);
+    useEffect(() => {
+        fadeIn();
+        return () => {
+            fadeOut();
+        };
+    }, [fadeIn, fadeOut]);
+    return {
+        fade,
+        fadeIn,
+        fadeOut,
+    };
+};
+//# sourceMappingURL=useFadeEffect.js.map

package/dist/hooks/useFadeEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFadeEffect.js","sourceRoot":"","sources":["../../src/hooks/useFadeEffect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAExD,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAe,KAAK,CAAC,CAAA;IACrD,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAA;IACrD,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAA;IAEnD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,CAAA;QAER,OAAO,GAAG,EAAE;YACV,OAAO,EAAE,CAAA;QACX,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;IAErB,OAAO;QACL,IAAI;QACJ,MAAM;QACN,OAAO;KACR,CAAA;AACH,CAAC,CAAA"}

package/dist/hooks/useTrapFocus.d.ts

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

package/dist/hooks/useTrapFocus.js

@@ -0,0 +1,75 @@
+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
+ */
+export 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]);
+};
+//# sourceMappingURL=useTrapFocus.js.map

package/dist/hooks/useTrapFocus.js.map

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

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './assets';
+export * from './hooks';
 export { default as Badge } from './atoms/Badge';
 export type { BadgeProps } from './atoms/Badge';
 export { default as Button } from './atoms/Button';
@@ -25,6 +26,8 @@ export { default as Radio } from './atoms/Radio';
 export type { RadioProps } from './atoms/Radio';
 export { default as Select } from './atoms/Select';
 export type { SelectProps } from './atoms/Select';
+export { default as Slider } from './atoms/Slider';
+export type { SliderProps } from './atoms/Slider';
 export { default as SROnly } from './atoms/SROnly';
 export { default as Accordion, AccordionItem, AccordionButton, AccordionPanel, } from './molecules/Accordion';
 export type { AccordionProps, AccordionItemProps, AccordionButtonProps, AccordionPanelProps, } from './molecules/Accordion';
@@ -45,6 +48,8 @@ export { default as InputField } from './molecules/InputField';
 export type { InputFieldProps } from './molecules/InputField';
 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 RadioField } from './molecules/RadioField';
 export type { RadioFieldProps } from './molecules/RadioField';
 export { default as RadioGroup, RadioOption, } from './molecules/RadioGroup';
@@ -65,3 +70,5 @@ export { default as QuantitySelector } from './molecules/QuantitySelector';
 export type { QuantitySelectorProps } from './molecules/QuantitySelector';
 export { default as Hero, HeroImage, HeroHeading } from './organisms/Hero';
 export type { HeroProps, HeroImageProps, HeroHeadingProps, } from './organisms/Hero';
+export { default as PriceRange } from './organisms/PriceRange';
+export type { PriceRangeProps } from './organisms/PriceRange';

package/dist/index.js

@@ -1,5 +1,7 @@
 // Assets
 export * from './assets';
+// Hooks
+export * from './hooks';
 // Atoms
 export { default as Badge } from './atoms/Badge';
 export { default as Button } from './atoms/Button';
@@ -14,6 +16,7 @@ export { default as Overlay } from './atoms/Overlay';
 export { default as Price } from './atoms/Price';
 export { default as Radio } from './atoms/Radio';
 export { default as Select } from './atoms/Select';
+export { default as Slider } from './atoms/Slider';
 export { default as SROnly } from './atoms/SROnly';
 // Molecules
 export { default as Accordion, AccordionItem, AccordionButton, AccordionPanel, } from './molecules/Accordion';
@@ -26,6 +29,7 @@ export { default as Dropdown, DropdownButton, DropdownItem, DropdownMenu, } from
 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 RadioField } from './molecules/RadioField';
 export { default as RadioGroup, RadioOption, } from './molecules/RadioGroup';
 export { default as Rating } from './molecules/Rating';
@@ -37,4 +41,5 @@ export { default as ToggleField } from './molecules/ToggleField';
 export { default as QuantitySelector } from './molecules/QuantitySelector';
 // Organisms
 export { default as Hero, HeroImage, HeroHeading } from './organisms/Hero';
+export { default as PriceRange } from './organisms/PriceRange';
 //# sourceMappingURL=index.js.map

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/Modal/Modal.d.ts

@@ -0,0 +1,34 @@
+import type { AriaAttributes, ReactNode } from 'react';
+import React from 'react';
+import type { ModalContentProps } from './ModalContent';
+export type ModalChildrenProps = {
+    fade: 'in' | 'out';
+    fadeOut: () => void;
+    fadeIn: () => void;
+};
+type ModalChildrenFunction = (props: ModalChildrenProps) => ReactNode;
+export interface ModalProps extends Omit<ModalContentProps, 'children'> {
+    /**
+     * 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'];
+    /**
+     * A boolean value that represents the state of the Modal
+     */
+    isOpen?: boolean;
+    /**
+     * Event emitted when the modal is closed
+     */
+    onDismiss?: () => void;
+    /**
+     * Children or function as a children
+     */
+    children: ModalChildrenFunction | ReactNode;
+}
+declare const Modal: ({ children, testId, isOpen, onDismiss, ...otherProps }: ModalProps) => React.ReactPortal | null;
+export default Modal;

package/dist/molecules/Modal/Modal.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { Overlay } from '../..';
+import { useFadeEffect, useUI } from '../../hooks';
+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 = ({ children, testId = 'fs-modal', isOpen = true, onDismiss, ...otherProps }) => {
+    const { closeModal } = useUI();
+    const { fade, fadeOut, fadeIn } = useFadeEffect();
+    const handleBackdropClick = (event) => {
+        if (event.defaultPrevented) {
+            return;
+        }
+        event.stopPropagation();
+        fadeOut?.();
+        onDismiss?.();
+    };
+    const handleBackdropKeyDown = (event) => {
+        if (event.key !== 'Escape' || event.defaultPrevented) {
+            return;
+        }
+        event.stopPropagation();
+        fadeOut?.();
+        onDismiss?.();
+    };
+    return isOpen
+        ? createPortal(React.createElement(Overlay, { onClick: handleBackdropClick, onKeyDown: handleBackdropKeyDown },
+            React.createElement(ModalContent, { onTransitionEnd: () => fade === 'out' && closeModal(), "data-fs-modal": true, "data-fs-modal-state": fade, testId: testId, ...otherProps }, typeof children === 'function'
+                ? children({ fade, fadeOut, fadeIn })
+                : 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,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAElD,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAkCzC;;;;GAIG;AAEH,MAAM,KAAK,GAAG,CAAC,EACb,QAAQ,EACR,MAAM,GAAG,UAAU,EACnB,MAAM,GAAG,IAAI,EACb,SAAS,EACT,GAAG,UAAU,EACF,EAAE,EAAE;IACf,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,CAAA;IAC9B,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAEjD,MAAM,mBAAmB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAChD,IAAI,KAAK,CAAC,gBAAgB,EAAE;YAC1B,OAAM;SACP;QAED,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,OAAO,EAAE,EAAE,CAAA;QACX,SAAS,EAAE,EAAE,CAAA;IACf,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,OAAO,EAAE,EAAE,CAAA;QACX,SAAS,EAAE,EAAE,CAAA;IACf,CAAC,CAAA;IAED,OAAO,MAAM;QACX,CAAC,CAAC,YAAY,CACV,oBAAC,OAAO,IACN,OAAO,EAAE,mBAAmB,EAC5B,SAAS,EAAE,qBAAqB;YAEhC,oBAAC,YAAY,IACX,eAAe,EAAE,GAAG,EAAE,CAAC,IAAI,KAAK,KAAK,IAAI,UAAU,EAAE,gDAEhC,IAAI,EACzB,MAAM,EAAE,MAAM,KACV,UAAU,IAEb,OAAO,QAAQ,KAAK,UAAU;gBAC7B,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;gBACrC,CAAC,CAAC,QAAQ,CACC,CACP,EACV,QAAQ,CAAC,IAAI,CACd;QACH,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA;AAED,eAAe,KAAK,CAAA"}

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

@@ -0,0 +1,6 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+declare const ModalBody: ({ children, ...otherProps }: ModalBodyProps) => JSX.Element;
+export default ModalBody;

package/dist/molecules/Modal/ModalBody.js

@@ -0,0 +1,4 @@
+import React from 'react';
+const ModalBody = ({ children, ...otherProps }) => (React.createElement("div", { "data-fs-modal-body": true, ...otherProps }, children));
+export default ModalBody;
+//# sourceMappingURL=ModalBody.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBody.js","sourceRoot":"","sources":["../../../src/molecules/Modal/ModalBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAMxD,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAkB,EAAE,EAAE,CAAC,CACjE,4DAA4B,UAAU,IACnC,QAAQ,CACL,CACP,CAAA;AAED,eAAe,SAAS,CAAA"}

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

@@ -0,0 +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 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 '../../hooks';
+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", { "data-fs-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, { ...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,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAa1C,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,2EAEe,MAAM,EACnB,GAAG,EAAE,YAAY,gBACN,MAAM,EACjB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,KACR,UAAU,IAEb,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,OACX,UAAU,EACd,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,IAEA,QAAQ,CACQ,CACpB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,YAAY,CAAA"}