@faststore/components 2.0.52-alpha.0 → 2.0.54-alpha.0

package/dist/atoms/Button/Button.d.ts

@@ -21,13 +21,21 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      */
     inverse?: boolean;
     /**
-     * Specifies that this button should be disabled
+     * Specifies that this button should be disabled.
      */
     disabled?: boolean;
     /**
      * A React component that will be rendered as an icon.
      */
     icon?: ReactNode;
+    /**
+     * Boolean that represents a loading state.
+     */
+    loading?: boolean;
+    /**
+     * Specifies a label for loading state.
+     */
+    loadingLabel?: string;
     /**
      * Specifies where the icon should be positioned
      */

package/dist/atoms/Button/Button.js

@@ -1,9 +1,12 @@
 import React, { forwardRef } from 'react';
-import { Icon } from '../../index';
-const Button = forwardRef(function Button({ children, variant, inverse, size = 'regular', testId = 'fs-button', icon, iconPosition = 'left', disabled, ...otherProps }, ref) {
-    return (React.createElement("button", { ref: ref, "data-fs-button": true, "data-fs-button-inverse": inverse, "data-fs-button-size": size, "data-fs-button-variant": variant, disabled: disabled, "data-testid": testId, ...otherProps },
+import { Icon, Loader } from '../../index';
+const Button = forwardRef(function Button({ children, variant, inverse, size = 'regular', testId = 'fs-button', loading, loadingLabel, icon, iconPosition = 'left', disabled, ...otherProps }, ref) {
+    return (React.createElement("button", { ref: ref, "data-fs-button": true, "data-fs-button-inverse": inverse, "data-fs-button-size": size, "data-fs-button-loading": loading, "data-fs-button-variant": variant, disabled: disabled, "data-testid": testId, ...otherProps },
+        loading && (React.createElement("p", { "data-fs-button-loading-label": true },
+            loadingLabel,
+            React.createElement(Loader, { variant: variant === 'primary' && !inverse ? 'light' : 'dark' }))),
         icon && iconPosition === 'left' && React.createElement(Icon, { component: icon }),
-        children,
+        React.createElement("span", null, children),
         icon && iconPosition === 'right' && React.createElement(Icon, { component: icon })));
 });
 export default Button;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/atoms/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AAqClC,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CACvE,EACE,QAAQ,EACR,OAAO,EACP,OAAO,EACP,IAAI,GAAG,SAAS,EAChB,MAAM,GAAG,WAAW,EACpB,IAAI,EACJ,YAAY,GAAG,MAAM,EACrB,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,oDAEgB,OAAO,yBACV,IAAI,4BACD,OAAO,EAC/B,QAAQ,EAAE,QAAQ,iBACL,MAAM,KACf,UAAU;QAEb,IAAI,IAAI,YAAY,KAAK,MAAM,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,GAAI;QAC5D,QAAQ;QACR,IAAI,IAAI,YAAY,KAAK,OAAO,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,GAAI,CACvD,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/atoms/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AA6C1C,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CACvE,EACE,QAAQ,EACR,OAAO,EACP,OAAO,EACP,IAAI,GAAG,SAAS,EAChB,MAAM,GAAG,WAAW,EACpB,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,YAAY,GAAG,MAAM,EACrB,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAGH,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,oDAEgB,OAAO,yBACV,IAAI,4BACD,OAAO,4BACP,OAAO,EAC/B,QAAQ,EAAE,QAAQ,iBACL,MAAM,KACf,UAAU;QAEb,OAAO,IAAI,CACV;YACG,YAAY;YACb,oBAAC,MAAM,IAAC,OAAO,EAAE,OAAO,KAAK,SAAS,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,GAAI,CACvE,CACL;QACA,IAAI,IAAI,YAAY,KAAK,MAAM,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,GAAI;QAC7D,kCAAO,QAAQ,CAAQ;QACtB,IAAI,IAAI,YAAY,KAAK,OAAO,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,GAAI,CACvD,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}

package/dist/atoms/Loader/Loader.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export type LoaderProps = {
+    /**
+     * Specifies the component color variant.
+     */
+    variant?: 'light' | 'dark';
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+};
+declare const Loader: React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<HTMLDivElement>>;
+export default Loader;

package/dist/atoms/Loader/Loader.js

@@ -0,0 +1,9 @@
+import React, { forwardRef } from 'react';
+const Loader = forwardRef(function Loader({ variant = 'dark', testId = 'fs-loader', ...otherProps }, ref) {
+    return (React.createElement("div", { ref: ref, "data-fs-loader": true, "data-fs-loader-variant": variant, "data-testid": testId, ...otherProps },
+        React.createElement("span", { "data-fs-loader-item": true }),
+        React.createElement("span", { "data-fs-loader-item": true }),
+        React.createElement("span", { "data-fs-loader-item": true })));
+});
+export default Loader;
+//# sourceMappingURL=Loader.js.map

package/dist/atoms/Loader/Loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../../src/atoms/Loader/Loader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAazC,MAAM,MAAM,GAAG,UAAU,CAA8B,SAAS,MAAM,CACpE,EAAE,OAAO,GAAG,MAAM,EAAE,MAAM,GAAG,WAAW,EAAE,GAAG,UAAU,EAAe,EACtE,GAAG;IAEH,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,oDAEgB,OAAO,iBAClB,MAAM,KACf,UAAU;QAEd,4DAAiC;QACjC,4DAAiC;QACjC,4DAAiC,CAC7B,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}

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

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

package/dist/atoms/Loader/index.js

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

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

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

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

@@ -13,6 +13,8 @@ export { default as Label } from './atoms/Label';
 export type { LabelProps } from './atoms/Label';
 export { default as Link } from './atoms/Link';
 export type { LinkProps, LinkElementType } from './atoms/Link';
+export { default as Loader } from './atoms/Loader';
+export type { LoaderProps } from './atoms/Loader';
 export { default as List } from './atoms/List';
 export type { ListProps } from './atoms/List';
 export { default as Overlay } from './atoms/Overlay';
@@ -23,6 +25,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';
@@ -63,3 +67,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

@@ -8,11 +8,13 @@ export { default as Icon } from './atoms/Icon';
 export { default as Input } from './atoms/Input';
 export { default as Label } from './atoms/Label';
 export { default as Link } from './atoms/Link';
+export { default as Loader } from './atoms/Loader';
 export { default as List } from './atoms/List';
 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';
@@ -36,4 +38,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":"AAAA,SAAS;AACT,cAAc,UAAU,CAAA;AAExB,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,EACb,eAAe,EACf,cAAc,GACf,MAAM,uBAAuB,CAAA;AAO9B,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EACL,OAAO,IAAI,QAAQ,EACnB,cAAc,EACd,YAAY,EACZ,YAAY,GACb,MAAM,sBAAsB,CAAA;AAO7B,OAAO,EACL,OAAO,IAAI,IAAI,EACf,WAAW,EACX,SAAS,GACV,MAAM,kBAAkB,CAAA;AAMzB,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,WAAW,GACZ,MAAM,wBAAwB,CAAA;AAK/B,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,GACT,MAAM,mBAAmB,CAAA;AAS1B,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,iBAAiB,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAG1E,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/molecules/BuyButton/BuyButton.js

@@ -1,10 +1,8 @@
 import React from 'react';
-import { Button, Icon } from '../../index';
+import { Button } from '../../index';
 import { ShoppingCart } from '../../assets';
 function BuyButton({ testId = 'fs-buy-button', icon, children, ...otherProps }) {
-    return (React.createElement(Button, { "data-fs-buy-button": true, "data-testid": testId, ...otherProps },
-        React.createElement(Icon, { component: React.createElement(ShoppingCart, null) }),
-        children));
+    return (React.createElement(Button, { "data-fs-buy-button": true, icon: React.createElement(ShoppingCart, null), iconPosition: "left", "data-testid": testId, ...otherProps }, children));
 }
 export default BuyButton;
 //# sourceMappingURL=BuyButton.js.map

package/dist/molecules/BuyButton/BuyButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BuyButton.js","sourceRoot":"","sources":["../../../src/molecules/BuyButton/BuyButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAI3C,SAAS,SAAS,CAAC,EACjB,MAAM,GAAG,eAAe,EACxB,IAAI,EACJ,QAAQ,EACR,GAAG,UAAU,EACE;IACf,OAAO,CACL,oBAAC,MAAM,+CAAiC,MAAM,KAAM,UAAU;QAC5D,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAC,YAAY,OAAG,GAAI;QACpC,QAAQ,CACF,CACV,CAAA;AACH,CAAC;AAED,eAAe,SAAS,CAAA"}
+{"version":3,"file":"BuyButton.js","sourceRoot":"","sources":["../../../src/molecules/BuyButton/BuyButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEpC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAI3C,SAAS,SAAS,CAAC,EACjB,MAAM,GAAG,eAAe,EACxB,IAAI,EACJ,QAAQ,EACR,GAAG,UAAU,EACE;IACf,OAAO,CACL,oBAAC,MAAM,gCAEL,IAAI,EAAE,oBAAC,YAAY,OAAG,EACtB,YAAY,EAAC,MAAM,iBACN,MAAM,KACf,UAAU,IAEb,QAAQ,CACF,CACV,CAAA;AACH,CAAC;AAED,eAAe,SAAS,CAAA"}

package/dist/organisms/PriceRange/PriceRange.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { AriaAttributes } from 'react';
+import type { PriceProps, SliderProps } from '../../index';
+export type PriceRangeProps = Omit<SliderProps, 'absoluteValuesLabel'> & {
+    /**
+     * 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'];
+    /**
+     * Defines a string value that labels the current element.
+     */
+    'aria-label'?: AriaAttributes['aria-label'];
+};
+type PriceRangeRefType = {
+    setPriceRangeValues: (values: {
+        min: number;
+        max: number;
+    }) => void;
+};
+declare const PriceRange: React.ForwardRefExoticComponent<Omit<SliderProps, "absoluteValuesLabel"> & {
+    /**
+     * 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'];
+    /**
+     * Defines a string value that labels the current element.
+     */
+    'aria-label'?: AriaAttributes['aria-label'];
+} & React.RefAttributes<PriceRangeRefType | undefined>>;
+export default PriceRange;

package/dist/organisms/PriceRange/PriceRange.js

@@ -0,0 +1,75 @@
+import React, { useRef, useState, useImperativeHandle, forwardRef } from 'react';
+import { Price, Slider, InputField } from '../../index';
+const PriceRange = forwardRef(function PriceRange({ formatter, max, min, step = 1, onChange, onEnd, testId = 'fs-price-range', variant, 'aria-label': ariaLabel, ...otherProps }, ref) {
+    const sliderRef = useRef();
+    useImperativeHandle(ref, () => ({
+        setPriceRangeValues: (values) => {
+            onChange?.(values);
+            sliderRef.current?.setSliderValues(values);
+        },
+    }));
+    const inputMinRef = useRef(null);
+    const inputMaxRef = useRef(null);
+    const [inputMinError, setInputMinError] = useState();
+    const [inputMaxError, setInputMaxError] = useState();
+    const [priceRange, setPriceRange] = useState({
+        min: Math.floor(min.selected),
+        max: Math.round(max.selected),
+    });
+    function onChangePriceRange(value) {
+        setInputMinError(undefined);
+        setInputMaxError(undefined);
+        setPriceRange({ min: value.min, max: value.max });
+        if (inputMinRef.current?.value) {
+            inputMinRef.current.value = String(value.min);
+        }
+        if (inputMaxRef.current?.value) {
+            inputMaxRef.current.value = String(value.max);
+        }
+    }
+    function onChangeInputMin(value) {
+        setInputMinError(undefined);
+        if (Number(value) < Math.floor(min.absolute)) {
+            return;
+        }
+        if (Number(value) > Math.floor(priceRange.max)) {
+            setInputMinError(`Min price can't be greater than max`);
+        }
+        setPriceRange({ ...priceRange, min: Number(value) });
+        sliderRef.current?.setSliderValues({
+            ...priceRange,
+            min: Number(value),
+        });
+    }
+    function onChangeInputMax(value) {
+        setInputMaxError(undefined);
+        if (Number(value) > Math.round(max.absolute)) {
+            return;
+        }
+        if (Number(value) < Math.round(priceRange.min)) {
+            setInputMaxError(`Max price can't be smaller than min`);
+        }
+        setPriceRange({ ...priceRange, max: Number(value) });
+        sliderRef.current?.setSliderValues({
+            ...priceRange,
+            max: Number(value),
+        });
+    }
+    return (React.createElement("div", { "data-fs-price-range": true, "data-testid": testId, ...otherProps },
+        React.createElement(Slider, { ref: sliderRef, min: min, max: max, step: step, onEnd: (value) => {
+                onEnd?.(value);
+                onChangePriceRange(value);
+            }, "aria-label": ariaLabel, onChange: (value) => onChange?.(value), absoluteValuesLabel: {
+                min: (React.createElement(Price, { value: Math.floor(min.absolute), variant: variant, formatter: formatter })),
+                max: (React.createElement(Price, { value: Math.round(max.absolute), variant: variant, formatter: formatter })),
+            }, minValueLabelComponent: (minValue) => {
+                return (React.createElement(Price, { value: minValue, variant: variant, formatter: formatter }));
+            }, maxValueLabelComponent: (maxValue) => {
+                return (React.createElement(Price, { value: maxValue, variant: variant, formatter: formatter }));
+            } }),
+        React.createElement("div", { "data-fs-price-range-inputs": true },
+            React.createElement(InputField, { id: "price-range-min", step: step, label: "Min", type: "number", inputMode: "numeric", error: inputMinError, inputRef: inputMinRef, min: Math.floor(min.absolute), max: priceRange.max, value: priceRange.min, onChange: (e) => onChangeInputMin(e.target.value), onBlur: () => !inputMinError && onEnd?.(priceRange) }),
+            React.createElement(InputField, { id: "price-range-max", label: "Max", step: step, type: "number", inputMode: "numeric", error: inputMaxError, inputRef: inputMaxRef, max: Math.round(max.absolute), min: priceRange.min, value: priceRange.max, onChange: (e) => onChangeInputMax(e.target.value), onBlur: () => !inputMaxError && onEnd?.(priceRange) }))));
+});
+export default PriceRange;
+//# sourceMappingURL=PriceRange.js.map

package/dist/organisms/PriceRange/PriceRange.js.map

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

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

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

package/dist/organisms/PriceRange/index.js

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.52-alpha.0",
+  "version": "2.0.54-alpha.0",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "author": "Emerson Laurentino @emersonlaurentino",
@@ -30,5 +30,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "fe474595d374d91b69063e0b2ed6e56eee0c36d0"
+  "gitHead": "7173ea0bec153905a6b800d002401b5c27fd3213"
 }

package/src/atoms/Button/Button.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode, ButtonHTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
-import { Icon } from '../../index'
+import { Icon, Loader } from '../../index'
 
 export type Variant = 'primary' | 'secondary' | 'tertiary'
 export type Size = 'small' | 'regular'
@@ -24,13 +24,21 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    */
   inverse?: boolean
   /**
-   * Specifies that this button should be disabled
+   * Specifies that this button should be disabled.
    */
   disabled?: boolean
   /**
    * A React component that will be rendered as an icon.
    */
   icon?: ReactNode
+  /**
+   * Boolean that represents a loading state.
+   */
+  loading?: boolean
+  /**
+   * Specifies a label for loading state.
+   */
+  loadingLabel?: string
   /**
    * Specifies where the icon should be positioned
    */
@@ -44,6 +52,8 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
     inverse,
     size = 'regular',
     testId = 'fs-button',
+    loading,
+    loadingLabel,
     icon,
     iconPosition = 'left',
     disabled,
@@ -51,19 +61,27 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
   },
   ref
 ) {
+
   return (
     <button
       ref={ref}
       data-fs-button
       data-fs-button-inverse={inverse}
       data-fs-button-size={size}
+      data-fs-button-loading={loading}
       data-fs-button-variant={variant}
       disabled={disabled}
       data-testid={testId}
       {...otherProps}
     >
+      {loading && (
+        <p data-fs-button-loading-label>
+          {loadingLabel}
+          <Loader variant={variant === 'primary' && !inverse ? 'light' : 'dark'} />
+        </p>
+      )}
       {icon && iconPosition === 'left' && <Icon component={icon} />}
-      {children}
+      <span>{children}</span>
       {icon && iconPosition === 'right' && <Icon component={icon} />}
     </button>
   )

package/src/atoms/Loader/Loader.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef } from 'react'
+
+export type LoaderProps = {
+  /**
+   * Specifies the component color variant.
+   */
+  variant?: 'light' | 'dark'
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const Loader = forwardRef<HTMLDivElement, LoaderProps>(function Loader(
+  { variant = 'dark', testId = 'fs-loader', ...otherProps }: LoaderProps,
+  ref
+) {
+  return (
+    <div
+      ref={ref}
+      data-fs-loader
+      data-fs-loader-variant={variant}
+      data-testid={testId}
+      {...otherProps}
+    >
+      <span data-fs-loader-item></span>
+      <span data-fs-loader-item></span>
+      <span data-fs-loader-item></span>
+    </div>
+  )
+})
+
+export default Loader

package/src/atoms/Loader/index.ts

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

package/src/atoms/Slider/Slider.tsx

@@ -0,0 +1,220 @@
+/**
+ * This code is inspired by the work of [sandra-lewis](https://codesandbox.io/u/sandra-lewis)
+ */
+import React, {
+  useState,
+  useMemo,
+  useImperativeHandle,
+  forwardRef,
+} 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
+}
+
+const percent = (value: number, min: number, max: number) =>
+  Math.round(((value - min) / (max - min)) * 100)
+
+const Slider = forwardRef<SliderRefType | undefined, SliderProps>(
+  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: number) => (value / max.absolute) * 100
+
+    useImperativeHandle(ref, () => ({
+      setSliderValues: (values: { min: number; max: number }) => {
+        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 (
+      <div data-fs-slider data-testid={testId}>
+        <div data-fs-slider-absolute-values>
+          <span>{absoluteValuesLabel.min}</span>
+          <span>{absoluteValuesLabel.max}</span>
+        </div>
+        <div data-fs-slider-wrapper>
+          <div
+            data-fs-slider-range
+            style={{
+              left: `${minPercent}%`,
+              width: `${maxPercent - minPercent}%`,
+            }}
+          />
+          <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 && (
+            <span
+              data-fs-slider-value-label="min"
+              style={{
+                left: `calc(${percentage(minVal)}% + (${
+                  8 - percentage(minVal) * 0.2
+                }px))`,
+              }}
+            >
+              {minValueLabelComponent(minVal)}
+            </span>
+          )}
+
+          <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 && (
+            <span
+              data-fs-slider-value-label="max"
+              style={{
+                left: `calc(${percentage(maxVal)}% + (${
+                  8 - percentage(maxVal) * 0.2
+                }px))`,
+              }}
+            >
+              {maxValueLabelComponent(maxVal)}
+            </span>
+          )}
+        </div>
+      </div>
+    )
+  }
+)
+
+export default Slider

package/src/atoms/Slider/index.ts

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

package/src/index.ts

@@ -16,6 +16,8 @@ export { default as Label } from './atoms/Label'
 export type { LabelProps } from './atoms/Label'
 export { default as Link } from './atoms/Link'
 export type { LinkProps, LinkElementType } from './atoms/Link'
+export { default as Loader } from './atoms/Loader'
+export type { LoaderProps } from './atoms/Loader'
 export { default as List } from './atoms/List'
 export type { ListProps } from './atoms/List'
 export { default as Overlay } from './atoms/Overlay'
@@ -26,6 +28,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'
 
 // Molecules
@@ -122,3 +126,6 @@ export type {
   HeroImageProps,
   HeroHeadingProps,
 } from './organisms/Hero'
+
+export { default as PriceRange } from './organisms/PriceRange'
+export type { PriceRangeProps } from './organisms/PriceRange'

package/src/molecules/BuyButton/BuyButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Button, Icon } from '../../index'
+import { Button } from '../../index'
 import type { ButtonProps } from '../../index'
 import { ShoppingCart } from '../../assets'
 
@@ -13,8 +13,13 @@ function BuyButton({
   ...otherProps
 }: BuyButtonProps) {
   return (
-    <Button data-fs-buy-button data-testid={testId} {...otherProps}>
-      <Icon component={<ShoppingCart />} />
+    <Button
+      data-fs-buy-button
+      icon={<ShoppingCart />}
+      iconPosition="left"
+      data-testid={testId}
+      {...otherProps}
+    >
       {children}
     </Button>
   )

package/src/organisms/PriceRange/PriceRange.tsx

@@ -0,0 +1,188 @@
+import React, { useRef, useState, useImperativeHandle, forwardRef } from 'react'
+import type { AriaAttributes } from 'react'
+
+import { Price, Slider, InputField } from '../../index'
+import type { PriceProps, SliderProps } from '../../index'
+
+export type PriceRangeProps = Omit<SliderProps, 'absoluteValuesLabel'> & {
+  /**
+   * 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']
+  /**
+   * Defines a string value that labels the current element.
+   */
+  'aria-label'?: AriaAttributes['aria-label']
+}
+
+type PriceRangeRefType = {
+  setPriceRangeValues: (values: { min: number; max: number }) => void
+}
+
+const PriceRange = forwardRef<PriceRangeRefType | undefined, PriceRangeProps>(
+  function PriceRange(
+    {
+      formatter,
+      max,
+      min,
+      step = 1,
+      onChange,
+      onEnd,
+      testId = 'fs-price-range',
+      variant,
+      'aria-label': ariaLabel,
+      ...otherProps
+    },
+    ref
+  ) {
+    const sliderRef = useRef<{
+      setSliderValues: (values: { min: number; max: number }) => void
+    }>()
+
+    useImperativeHandle(ref, () => ({
+      setPriceRangeValues: (values: { min: number; max: number }) => {
+        onChange?.(values)
+        sliderRef.current?.setSliderValues(values)
+      },
+    }))
+
+    const inputMinRef = useRef<HTMLInputElement>(null)
+    const inputMaxRef = useRef<HTMLInputElement>(null)
+
+    const [inputMinError, setInputMinError] = useState<string>()
+    const [inputMaxError, setInputMaxError] = useState<string>()
+    const [priceRange, setPriceRange] = useState<{ min: number; max: number }>({
+      min: Math.floor(min.selected),
+      max: Math.round(max.selected),
+    })
+
+    function onChangePriceRange(value: { min: number; max: number }) {
+      setInputMinError(undefined)
+      setInputMaxError(undefined)
+      setPriceRange({ min: value.min, max: value.max })
+
+      if (inputMinRef.current?.value) {
+        inputMinRef.current.value = String(value.min)
+      }
+
+      if (inputMaxRef.current?.value) {
+        inputMaxRef.current.value = String(value.max)
+      }
+    }
+
+    function onChangeInputMin(value: string) {
+      setInputMinError(undefined)
+
+      if (Number(value) < Math.floor(min.absolute)) {
+        return
+      }
+
+      if (Number(value) > Math.floor(priceRange.max)) {
+        setInputMinError(`Min price can't be greater than max`)
+      }
+
+      setPriceRange({ ...priceRange, min: Number(value) })
+      sliderRef.current?.setSliderValues({
+        ...priceRange,
+        min: Number(value),
+      })
+    }
+
+    function onChangeInputMax(value: string) {
+      setInputMaxError(undefined)
+
+      if (Number(value) > Math.round(max.absolute)) {
+        return
+      }
+
+      if (Number(value) < Math.round(priceRange.min)) {
+        setInputMaxError(`Max price can't be smaller than min`)
+      }
+
+      setPriceRange({ ...priceRange, max: Number(value) })
+      sliderRef.current?.setSliderValues({
+        ...priceRange,
+        max: Number(value),
+      })
+    }
+
+    return (
+      <div data-fs-price-range data-testid={testId} {...otherProps}>
+        <Slider
+          ref={sliderRef}
+          min={min}
+          max={max}
+          step={step}
+          onEnd={(value) => {
+            onEnd?.(value)
+            onChangePriceRange(value)
+          }}
+          aria-label={ariaLabel}
+          onChange={(value) => onChange?.(value)}
+          absoluteValuesLabel={{
+            min: (
+              <Price
+                value={Math.floor(min.absolute)}
+                variant={variant}
+                formatter={formatter}
+              />
+            ),
+            max: (
+              <Price
+                value={Math.round(max.absolute)}
+                variant={variant}
+                formatter={formatter}
+              />
+            ),
+          }}
+          minValueLabelComponent={(minValue) => {
+            return (
+              <Price value={minValue} variant={variant} formatter={formatter} />
+            )
+          }}
+          maxValueLabelComponent={(maxValue) => {
+            return (
+              <Price value={maxValue} variant={variant} formatter={formatter} />
+            )
+          }}
+        />
+        <div data-fs-price-range-inputs>
+          <InputField
+            id="price-range-min"
+            step={step}
+            label="Min"
+            type="number"
+            inputMode="numeric"
+            error={inputMinError}
+            inputRef={inputMinRef}
+            min={Math.floor(min.absolute)}
+            max={priceRange.max}
+            value={priceRange.min}
+            onChange={(e) => onChangeInputMin(e.target.value)}
+            onBlur={() => !inputMinError && onEnd?.(priceRange)}
+          />
+          <InputField
+            id="price-range-max"
+            label="Max"
+            step={step}
+            type="number"
+            inputMode="numeric"
+            error={inputMaxError}
+            inputRef={inputMaxRef}
+            max={Math.round(max.absolute)}
+            min={priceRange.min}
+            value={priceRange.max}
+            onChange={(e) => onChangeInputMax(e.target.value)}
+            onBlur={() => !inputMaxError && onEnd?.(priceRange)}
+          />
+        </div>
+      </div>
+    )
+  }
+)
+
+export default PriceRange

package/src/organisms/PriceRange/index.ts

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