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

package/dist/index.d.ts

@@ -3,12 +3,8 @@ export { default as Popover } from './components/atoms/Popover';
 export type { PopoverProps } from './components/atoms/Popover';
 export { default as TextArea } from './components/atoms/TextArea';
 export type { TextAreaProps } from './components/atoms/TextArea';
-export { default as Slider } from './components/atoms/Slider';
-export type { SliderProps } from './components/atoms/Slider';
 export { default as Skeleton } from './components/atoms/Skeleton';
 export type { SkeletonProps } from './components/atoms/Skeleton';
-export { default as Spinner } from './components/atoms/Spinner';
-export type { SpinnerProps } from './components/atoms/Spinner';
 export { default as Incentive } from './components/atoms/Incentive';
 export type { IncentiveProps } from './components/atoms/Incentive';
 export { default as SkuSelector } from './components/molecules/SkuSelector';
@@ -37,10 +33,6 @@ export { default as PaymentMethods } from './components/molecules/PaymentMethods
 export type { PaymentMethodsProps } from './components/molecules/PaymentMethods';
 export { default as Breadcrumb } from './components/molecules/Breadcrumb';
 export type { BreadcrumbProps } from './components/molecules/Breadcrumb';
-export { default as LoadingButton } from './components/molecules/LoadingButton';
-export type { LoadingButtonProps } from './components/molecules/LoadingButton';
-export { default as PriceRange } from './components/molecules/PriceRange';
-export type { PriceRangeProps } from './components/molecules/PriceRange';
 export { default as Form } from './components/molecules/Form';
 export type { FormProps } from './components/molecules/Form';
 export { default as OutOfStock, OutOfStockTitle, OutOfStockMessage, } from './components/organisms/OutOfStock';

package/dist/index.js

@@ -2,9 +2,7 @@ export * from '@faststore/components';
 // Atoms
 export { default as Popover } from './components/atoms/Popover';
 export { default as TextArea } from './components/atoms/TextArea';
-export { default as Slider } from './components/atoms/Slider';
 export { default as Skeleton } from './components/atoms/Skeleton';
-export { default as Spinner } from './components/atoms/Spinner';
 export { default as Incentive } from './components/atoms/Incentive';
 // Molecules
 export { default as SkuSelector } from './components/molecules/SkuSelector';
@@ -20,8 +18,6 @@ export { default as Modal } from './components/molecules/Modal';
 export { default as Banner, BannerContent, BannerImage, BannerLink, } from './components/molecules/Banner';
 export { default as PaymentMethods } from './components/molecules/PaymentMethods';
 export { default as Breadcrumb } from './components/molecules/Breadcrumb';
-export { default as LoadingButton } from './components/molecules/LoadingButton';
-export { default as PriceRange } from './components/molecules/PriceRange';
 export { default as Form } from './components/molecules/Form';
 // Organisms
 export { default as OutOfStock, OutOfStockTitle, OutOfStockMessage, } from './components/organisms/OutOfStock';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAG/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAG7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAG/D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGnE,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAG3E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,oCAAoC,CAAA;AAQ3C,OAAO,EACL,OAAO,IAAI,IAAI,EACf,SAAS,EACT,WAAW,EACX,WAAW,GACZ,MAAM,6BAA6B,CAAA;AAQpC,OAAO,EACL,OAAO,IAAI,QAAQ,EACnB,eAAe,EACf,eAAe,EACf,aAAa,EACb,cAAc,EACd,eAAe,EACf,aAAa,GACd,MAAM,iCAAiC,CAAA;AAWxC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAM3E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAA;AAGrE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,8BAA8B,CAAA;AAG/D,OAAO,EACL,OAAO,IAAI,MAAM,EACjB,aAAa,EACb,WAAW,EACX,UAAU,GACX,MAAM,+BAA+B,CAAA;AAQtC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uCAAuC,CAAA;AAGjF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAGzE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,sCAAsC,CAAA;AAG/E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAGzE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,6BAA6B,CAAA;AAG7D,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,eAAe,EACf,iBAAiB,GAClB,MAAM,mCAAmC,CAAA;AAO1C,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAA;AAG1D,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAG/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGnE,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAG3E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,oCAAoC,CAAA;AAQ3C,OAAO,EACL,OAAO,IAAI,IAAI,EACf,SAAS,EACT,WAAW,EACX,WAAW,GACZ,MAAM,6BAA6B,CAAA;AAQpC,OAAO,EACL,OAAO,IAAI,QAAQ,EACnB,eAAe,EACf,eAAe,EACf,aAAa,EACb,cAAc,EACd,eAAe,EACf,aAAa,GACd,MAAM,iCAAiC,CAAA;AAWxC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAM3E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAA;AAGrE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,8BAA8B,CAAA;AAG/D,OAAO,EACL,OAAO,IAAI,MAAM,EACjB,aAAa,EACb,WAAW,EACX,UAAU,GACX,MAAM,+BAA+B,CAAA;AAQtC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uCAAuC,CAAA;AAGjF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAGzE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,6BAA6B,CAAA;AAG7D,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,eAAe,EACf,iBAAiB,GAClB,MAAM,mCAAmC,CAAA;AAO1C,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAA;AAG1D,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "2.0.52-alpha.0",
+  "version": "2.0.54-alpha.0",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -59,5 +59,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "fe474595d374d91b69063e0b2ed6e56eee0c36d0"
+  "gitHead": "7173ea0bec153905a6b800d002401b5c27fd3213"
 }

package/src/components/atoms/Button/styles.scss

@@ -95,6 +95,9 @@
   --fs-button-disabled-bkg-color                    : var(--fs-color-disabled-bkg);
   --fs-button-disabled-text-color                   : var(--fs-color-disabled-text);
 
+  // Loading
+  --fs-button-loading-label-column-gap              : var(--fs-spacing-3);
+
   // Small
   --fs-button-small-padding                         : var(--fs-spacing-0) var(--fs-spacing-1);
   --fs-button-small-min-height                      : var(--fs-spacing-5);
@@ -314,4 +317,17 @@
       border-width: 0;
     }
   }
+
+  &[data-fs-button-loading="true"] {
+    > * {
+      opacity: 0;
+      pointer-events: none;
+    }
+    [data-fs-button-loading-label] {
+      position: absolute;
+      opacity: 1;
+      display: flex;
+      column-gap: var(--fs-button-loading-label-column-gap);
+    }
+  }
 }

package/src/components/atoms/Loader/styles.scss

@@ -0,0 +1,72 @@
+[data-fs-loader] {
+  // --------------------------------------------------------
+  // Design Tokens for Loader
+  // --------------------------------------------------------
+
+  --fs-loader-gap                         : var(--fs-spacing-0);
+
+  --fs-loader-animation-function          : var(--fs-transition-function);
+  --fs-loader-animation-timing            : var(--fs-transition-timing);
+
+  // Item
+  --fs-loader-item-width                  : var(--fs-spacing-0);
+  --fs-loader-item-height                 : var(--fs-loader-item-width);
+  --fs-loader-item-border-radius          : var(--fs-border-radius-circle);
+  --fs-loader-item-initial-opacity        : .6;
+
+  // Dark (Default)
+  --fs-loader-dark-item-bkg-color         : var(--fs-color-primary-bkg-active);
+
+  // Light
+  --fs-loader-light-item-bkg-color        : var(--fs-color-tertiary-bkg-light);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  display: flex;
+  align-items: center;
+  column-gap: var(--fs-loader-gap);
+
+  [data-fs-loader-item] {
+    width: var(--fs-loader-item-width);
+    height: var(--fs-loader-item-height);
+    border-radius: var(--fs-loader-item-border-radius);
+    opacity: var(--fs-loader-item-initial-opacity);
+    top: 0;
+    position: relative;
+    animation: load 1.2s infinite var(--fs-loader-animation-function) calc(var(--fs-loader-item-delay,0)*var(--fs-loader-animation-timing));
+
+    &:first-of-type { --fs-loader-item-delay: -1; }
+    &:last-of-type  { --fs-loader-item-delay:  1; }
+  }
+
+  @keyframes load {
+    20% {
+      top: calc(-1 * var(--fs-spacing-0));
+      opacity: 1;
+    }
+    40% {
+      top: 0;
+      opacity: .6;
+    }
+    60% {
+      top: 0;
+      opacity: .6;
+    }
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-loader-variant="dark"] [data-fs-loader-item] {
+    background-color: var(--fs-loader-dark-item-bkg-color);
+  }
+
+  &[data-fs-loader-variant="light"] [data-fs-loader-item] {
+    background-color: var(--fs-loader-light-item-bkg-color);
+  }
+
+}
+

package/src/components/atoms/Slider/styles.scss

@@ -0,0 +1,137 @@
+[data-fs-slider] {
+  // --------------------------------------------------------
+  // Design Tokens for Slider
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-slider-height                      : var(--fs-spacing-2);
+  --fs-slider-border-radius               : var(--fs-border-radius-pill);
+  --fs-slider-margin-bottom               : var(--fs-spacing-3);
+
+  --fs-slider-bkg-color                   : var(--fs-color-neutral-bkg);
+  --fs-slider-selection-bkg-color         : var(--fs-color-primary-bkg-light-active);
+
+  --fs-slider-transition-function         : var(--fs-transition-function);
+  --fs-slider-transition-property         : var(--fs-transition-property);
+  --fs-slider-transition-timing           : var(--fs-transition-timing);
+
+  // Thumb
+  --fs-slider-thumb-size                  : var(--fs-spacing-4);
+  --fs-slider-thumb-bkg-color             : var(--fs-color-primary-bkg);
+  --fs-slider-thumb-bkg-color-hover       : var(--fs-color-primary-bkg-hover);
+  --fs-slider-thumb-border-width          : var(--fs-border-width);
+  --fs-slider-thumb-border-radius         : var(--fs-border-radius-circle);
+  --fs-slider-thumb-border-color          : var(--fs-slider-thumb-bkg-color);
+  --fs-slider-thumb-border-color-hover    : var(--fs-slider-thumb-bkg-color-hover);
+
+  // Absolute Values
+  --fs-slider-absolute-values-text-color  : var(--fs-color-disabled-text);
+
+  // Value Label
+  --fs-slider-value-label-bottom          : var(--fs-spacing-3);
+  --fs-slider-value-label-bkg-color       : var(--fs-color-body-bkg);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  width: 100%;
+
+  [data-fs-slider-wrapper] {
+    position: relative;
+    width: 100%;
+    height: var(--fs-slider-height);
+    margin-bottom: var(--fs-slider-margin-bottom);
+    background-color: var(--fs-slider-bkg-color);
+    border-radius: var(--fs-slider-border-radius);
+  }
+
+  [data-fs-slider-range] {
+    position: absolute;
+    height: var(--fs-slider-height);
+    background-color: var(--fs-slider-selection-bkg-color);
+    border-radius: var(--fs-slider-border-radius);
+  }
+
+  // Thumb styles for Webkit based browsers (Chrome, Edge)
+  [data-fs-slider-thumb],
+  [data-fs-slider-thumb]::-webkit-slider-thumb {
+    width: var(--fs-slider-thumb-size);
+    height: var(--fs-slider-thumb-size);
+    pointer-events: auto;
+    cursor: col-resize;
+    background-color: var(--fs-slider-thumb-bkg-color);
+    border: var(--fs-slider-thumb-border-width) solid var(--fs-slider-thumb-border-color);
+    border-radius: var(--fs-slider-thumb-border-radius);
+    -webkit-tap-highlight-color: transparent;
+    appearance: none;
+    transition: var(--fs-slider-transition-property) var(--fs-slider-transition-timing) var(--fs-slider-transition-function);
+
+    &:hover {
+      background-color: var(--fs-slider-thumb-bkg-color-hover);
+      border-color: var(--fs-slider-thumb-border-color-hover);
+    }
+  }
+
+  // Thumb styles for Mozilla
+  [data-fs-slider-thumb]::-moz-range-thumb {
+    width: var(--fs-slider-thumb-size);
+    height: var(--fs-slider-thumb-size);
+    pointer-events: auto;
+    cursor: col-resize;
+    background-color: var(--fs-slider-thumb-bkg-color);
+    border: var(--fs-slider-thumb-border-width) solid var(--fs-slider-thumb-border-color);
+    border-radius: var(--fs-slider-thumb-radius);
+  }
+
+  [data-fs-slider-thumb] {
+    position: absolute;
+    width: inherit;
+    height: 0;
+    margin: calc(var(--fs-slider-height) / 2) 0;
+    pointer-events: none;
+    border: none;
+  }
+
+  [data-fs-slider-thumb="left"] {
+    z-index: 1;
+
+    &:hover + [data-fs-slider-value-label="min"] {
+      opacity: 1;
+    }
+  }
+
+  [data-fs-slider-thumb="right"] {
+    z-index: 2;
+
+    &:hover + [data-fs-slider-value-label="max"] {
+      opacity: 1;
+    }
+  }
+
+  [data-fs-slider-value-label] {
+    position: absolute;
+    bottom: var(--fs-slider-value-label-bottom);
+    padding: var(--fs-spacing-1);
+    background-color: var(--fs-slider-value-label-bkg-color);
+    opacity: 0;
+    transition: opacity var(--fs-slider-transition-timing) var(--fs-slider-transition-function);
+  }
+
+  [data-fs-slider-value-label="min"] {
+    text-align: left;
+    transform: translateX(-1rem);
+  }
+
+  [data-fs-slider-value-label="max"] {
+    text-align: right;
+    transform: translateX(calc(-100% + 1.25rem));
+  }
+
+  [data-fs-slider-absolute-values] {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: var(--fs-spacing-2);
+    color: var(--fs-slider-absolute-values-text-color);
+  }
+}

package/src/components/organisms/PriceRange/styles.scss

@@ -0,0 +1,36 @@
+[data-fs-price-range] {
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  width: 100%;
+
+  [data-fs-price-range-inputs] {
+    display: flex;
+
+    [data-fs-input-field] {
+      width: 50%;
+
+      input:hover,
+      input:focus-visible,
+      input:focus {
+        z-index: 1;
+        + label { z-index: 1; }
+      }
+
+      &:first-of-type {
+        margin-right: -1px;
+
+        input {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      }
+
+      &:last-of-type input {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+  }
+}

package/src/index.ts

@@ -7,15 +7,9 @@ export type { PopoverProps } from './components/atoms/Popover'
 export { default as TextArea } from './components/atoms/TextArea'
 export type { TextAreaProps } from './components/atoms/TextArea'
 
-export { default as Slider } from './components/atoms/Slider'
-export type { SliderProps } from './components/atoms/Slider'
-
 export { default as Skeleton } from './components/atoms/Skeleton'
 export type { SkeletonProps } from './components/atoms/Skeleton'
 
-export { default as Spinner } from './components/atoms/Spinner'
-export type { SpinnerProps } from './components/atoms/Spinner'
-
 export { default as Incentive } from './components/atoms/Incentive'
 export type { IncentiveProps } from './components/atoms/Incentive'
 
@@ -108,12 +102,6 @@ export type { PaymentMethodsProps } from './components/molecules/PaymentMethods'
 export { default as Breadcrumb } from './components/molecules/Breadcrumb'
 export type { BreadcrumbProps } from './components/molecules/Breadcrumb'
 
-export { default as LoadingButton } from './components/molecules/LoadingButton'
-export type { LoadingButtonProps } from './components/molecules/LoadingButton'
-
-export { default as PriceRange } from './components/molecules/PriceRange'
-export type { PriceRangeProps } from './components/molecules/PriceRange'
-
 export { default as Form } from './components/molecules/Form'
 export type { FormProps } from './components/molecules/Form'
 

package/src/styles/components.scss

@@ -3,13 +3,15 @@
 @import "../components/atoms/Button/styles";
 @import "../components/atoms/Checkbox/styles";
 @import "../components/atoms/Icon/styles";
-@import "../components/atoms/Link/styles";
 @import "../components/atoms/Input/styles";
+@import "../components/atoms/Link/styles";
 @import "../components/atoms/List/styles";
+@import "../components/atoms/Loader/styles";
 @import "../components/atoms/Overlay/styles";
 @import "../components/atoms/Price/styles";
 @import "../components/atoms/Radio/styles";
 @import "../components/atoms/Select/styles";
+@import "../components/atoms/Slider/styles";
 @import "../components/atoms/SROnly/styles";
 
 // Molecules
@@ -33,3 +35,4 @@
 
 // Organisms
 @import "../components/organisms/Hero/styles";
+@import "../components/organisms/PriceRange/styles";

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

@@ -1,67 +0,0 @@
-/**
- * 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;
-}
-export type SliderProps = {
-    /**
-     * 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;
-    /**
-     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-     *
-     * @default 'store-slider'
-     */
-    testId?: string;
-    /**
-     * 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;
-    /**
-     * Returns the value of element's class content attribute.
-     */
-    className?: 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/components/atoms/Slider/Slider.js

@@ -1,48 +0,0 @@
-/**
- * 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, onChange, onEnd, testId = 'store-slider', getAriaValueText, className, step, minValueLabelComponent, maxValueLabelComponent, }, 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.round(min.absolute + minPercent * widthPercent));
-    const [maxVal, setMaxVal] = useState(() => Math.round(min.absolute + maxPercent * widthPercent));
-    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, className: className },
-        React.createElement("div", { "data-slider-range": true, style: {
-                left: `${minPercent}%`,
-                width: `${maxPercent - minPercent}%`,
-            } }),
-        React.createElement("input", { type: "range", min: Math.round(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-slider-thumb": "left", "aria-valuemin": min.absolute, "aria-valuemax": max.absolute, "aria-valuenow": minVal, "aria-label": String(minVal), "aria-labelledby": getAriaValueText?.(minVal, 'min') }),
-        minValueLabelComponent && minValueLabelComponent(minVal),
-        React.createElement("input", { type: "range", min: Math.round(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-slider-thumb": "right", "aria-valuemin": min.absolute, "aria-valuemax": max.absolute, "aria-valuenow": maxVal, "aria-label": String(maxVal), "aria-labelledby": getAriaValueText?.(maxVal, 'max') }),
-        maxValueLabelComponent && maxValueLabelComponent(maxVal)));
-});
-export default Slider;
-//# sourceMappingURL=Slider.js.map

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

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

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

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

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

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

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

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

package/dist/components/atoms/Spinner/Spinner.d.ts

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

package/dist/components/atoms/Spinner/Spinner.js

@@ -1,6 +0,0 @@
-import React, { forwardRef } from 'react';
-const Spinner = forwardRef(function Spinner({ children, testId = 'store-spinner', ...otherProps }, ref) {
-    return (React.createElement("span", { ref: ref, "data-fs-spinner": true, "data-testid": testId, ...otherProps }));
-});
-export default Spinner;
-//# sourceMappingURL=Spinner.js.map

package/dist/components/atoms/Spinner/Spinner.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../../src/components/atoms/Spinner/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AASzC,MAAM,OAAO,GAAG,UAAU,CACxB,SAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,MAAM,GAAG,eAAe,EAAE,GAAG,UAAU,EAAE,EAAE,GAAG;IACzE,OAAO,CACL,8BAAM,GAAG,EAAE,GAAG,0CAA+B,MAAM,KAAM,UAAU,GAAI,CACxE,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/components/atoms/Spinner/index.d.ts

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

package/dist/components/atoms/Spinner/index.js

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

package/dist/components/atoms/Spinner/index.js.map

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

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

@@ -1,14 +0,0 @@
-import React from 'react';
-import type { ButtonProps } from '@faststore/components';
-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/components/molecules/LoadingButton/LoadingButton.js

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"LoadingButton.js","sourceRoot":"","sources":["../../../../src/components/molecules/LoadingButton/LoadingButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AAE9C,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,IAAC,GAAG,EAAE,GAAG,kCAAyB,MAAM,EAAE,MAAM,KAAM,UAAU,IACpE,OAAO,CAAC,CAAC,CAAC,oBAAC,OAAO,OAAG,CAAC,CAAC,CAAC,QAAQ,CAC1B,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,aAAa,CAAA"}

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

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

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

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

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

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

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

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

package/dist/components/molecules/PriceRange/PriceRange.js

@@ -1,28 +0,0 @@
-import React, { useRef, useImperativeHandle, forwardRef } from 'react';
-import { Price } from '@faststore/components';
-import Slider from '../../atoms/Slider';
-const PriceRange = forwardRef(function PriceRange({ className, formatter, max, min, step, onChange, onEnd, testId = 'store-price-range', variant, 'aria-label': ariaLabel, }, ref) {
-    const sliderRef = useRef();
-    useImperativeHandle(ref, () => ({
-        setPriceRangeValues: (values) => {
-            onChange?.(values);
-            sliderRef.current?.setSliderValues(values);
-        },
-    }));
-    return (React.createElement("div", { "data-fs-price-range": true, "data-testid": testId, className: className },
-        React.createElement(Slider, { ref: sliderRef, min: min, max: max, step: step, onEnd: onEnd, "aria-label": ariaLabel, onChange: (value) => onChange?.(value), minValueLabelComponent: (minValue) => {
-                const minPercent = (minValue / max.absolute) * 100;
-                return (React.createElement(Price, { value: minValue, variant: variant, formatter: formatter, "data-price-range-value-label": "min", style: {
-                        position: 'absolute',
-                        left: `calc(${minPercent}% + (${8 - minPercent * 0.2}px))`,
-                    } }));
-            }, maxValueLabelComponent: (maxValue) => {
-                const maxPercent = (maxValue / max.absolute) * 100;
-                return (React.createElement(Price, { formatter: formatter, variant: variant, value: maxValue, "data-price-range-value-label": "max", style: {
-                        position: 'absolute',
-                        left: `calc(${maxPercent}% + (${8 - maxPercent * 0.2}px))`,
-                    } }));
-            } })));
-});
-export default PriceRange;
-//# sourceMappingURL=PriceRange.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"PriceRange.js","sourceRoot":"","sources":["../../../../src/components/molecules/PriceRange/PriceRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGtE,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAG7C,OAAO,MAAM,MAAM,oBAAoB,CAAA;AA0BvC,MAAM,UAAU,GAAG,UAAU,CAC3B,SAAS,UAAU,CACjB,EACE,SAAS,EACT,SAAS,EACT,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,MAAM,GAAG,mBAAmB,EAC5B,OAAO,EACP,YAAY,EAAE,SAAS,GACxB,EACD,GAAG;IAEH,MAAM,SAAS,GAAG,MAAM,EAEpB,CAAA;IAEJ,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,mBAAmB,EAAE,CAAC,MAAoC,EAAE,EAAE;YAC5D,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAA;YAClB,SAAS,CAAC,OAAO,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;QAC5C,CAAC;KACF,CAAC,CAAC,CAAA;IAEH,OAAO,CACL,yEAAsC,MAAM,EAAE,SAAS,EAAE,SAAS;QAChE,oBAAC,MAAM,IACL,GAAG,EAAE,SAAS,EACd,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,gBACA,SAAS,EACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,EACtC,sBAAsB,EAAE,CAAC,QAAQ,EAAE,EAAE;gBACnC,MAAM,UAAU,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAA;gBAElD,OAAO,CACL,oBAAC,KAAK,IACJ,KAAK,EAAE,QAAQ,EACf,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,kCACS,KAAK,EAClC,KAAK,EAAE;wBACL,QAAQ,EAAE,UAAU;wBACpB,IAAI,EAAE,QAAQ,UAAU,QAAQ,CAAC,GAAG,UAAU,GAAG,GAAG,MAAM;qBAC3D,GACD,CACH,CAAA;YACH,CAAC,EACD,sBAAsB,EAAE,CAAC,QAAQ,EAAE,EAAE;gBACnC,MAAM,UAAU,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAA;gBAElD,OAAO,CACL,oBAAC,KAAK,IACJ,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,QAAQ,kCACc,KAAK,EAClC,KAAK,EAAE;wBACL,QAAQ,EAAE,UAAU;wBACpB,IAAI,EAAE,QAAQ,UAAU,QAAQ,CAAC,GAAG,UAAU,GAAG,GAAG,MAAM;qBAC3D,GACD,CACH,CAAA;YACH,CAAC,GACD,CACE,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,UAAU,CAAA"}

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

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

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

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

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

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

package/src/components/atoms/Slider/Slider.tsx

@@ -1,182 +0,0 @@
-/**
- * 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
-}
-
-export type SliderProps = {
-  /**
-   * 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
-  /**
-   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-   *
-   * @default 'store-slider'
-   */
-  testId?: string
-  /**
-   * 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
-  /**
-   * Returns the value of element's class content attribute.
-   */
-  className?: 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,
-      onChange,
-      onEnd,
-      testId = 'store-slider',
-      getAriaValueText,
-      className,
-      step,
-      minValueLabelComponent,
-      maxValueLabelComponent,
-    },
-    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.round(min.absolute + minPercent * widthPercent)
-    )
-    const [maxVal, setMaxVal] = useState(() =>
-      Math.round(min.absolute + maxPercent * widthPercent)
-    )
-
-    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} className={className}>
-        <div
-          data-slider-range
-          style={{
-            left: `${minPercent}%`,
-            width: `${maxPercent - minPercent}%`,
-          }}
-        />
-        <input
-          type="range"
-          min={Math.round(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-slider-thumb="left"
-          aria-valuemin={min.absolute}
-          aria-valuemax={max.absolute}
-          aria-valuenow={minVal}
-          aria-label={String(minVal)}
-          aria-labelledby={getAriaValueText?.(minVal, 'min')}
-        />
-        {minValueLabelComponent && minValueLabelComponent(minVal)}
-        <input
-          type="range"
-          min={Math.round(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-slider-thumb="right"
-          aria-valuemin={min.absolute}
-          aria-valuemax={max.absolute}
-          aria-valuenow={maxVal}
-          aria-label={String(maxVal)}
-          aria-labelledby={getAriaValueText?.(maxVal, 'max')}
-        />
-        {maxValueLabelComponent && maxValueLabelComponent(maxVal)}
-      </div>
-    )
-  }
-)
-
-export default Slider

package/src/components/atoms/Slider/index.ts

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

package/src/components/atoms/Spinner/Spinner.tsx

@@ -1,19 +0,0 @@
-import type { PropsWithChildren } from 'react'
-import React, { forwardRef } from 'react'
-
-export type SpinnerProps = {
-  /**
-   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-   */
-  testId?: string
-}
-
-const Spinner = forwardRef<HTMLDivElement, PropsWithChildren<SpinnerProps>>(
-  function Spinner({ children, testId = 'store-spinner', ...otherProps }, ref) {
-    return (
-      <span ref={ref} data-fs-spinner data-testid={testId} {...otherProps} />
-    )
-  }
-)
-
-export default Spinner

package/src/components/atoms/Spinner/index.tsx

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

package/src/components/molecules/LoadingButton/LoadingButton.tsx

@@ -1,31 +0,0 @@
-import React, { forwardRef } from 'react'
-
-import { Button } from '@faststore/components'
-import type { ButtonProps } from '@faststore/components'
-import Spinner from '../../atoms/Spinner'
-
-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
-}
-
-const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>(
-  function LoadingButton(
-    { children, loading, testId = 'store-loading-button', ...otherProps },
-    ref
-  ) {
-    return (
-      <Button ref={ref} data-fs-loading-button testId={testId} {...otherProps}>
-        {loading ? <Spinner /> : children}
-      </Button>
-    )
-  }
-)
-
-export default LoadingButton

package/src/components/molecules/LoadingButton/index.tsx

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

package/src/components/molecules/PriceRange/PriceRange.tsx

@@ -1,108 +0,0 @@
-import React, { useRef, useImperativeHandle, forwardRef } from 'react'
-import type { AriaAttributes } from 'react'
-
-import { Price } from '@faststore/components'
-import type { PriceProps } from '@faststore/components'
-
-import Slider from '../../atoms/Slider'
-import type { SliderProps } from '../../atoms/Slider'
-
-export 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']
-}
-
-type PriceRangeRefType = {
-  setPriceRangeValues: (values: { min: number; max: number }) => void
-}
-
-const PriceRange = forwardRef<PriceRangeRefType | undefined, PriceRangeProps>(
-  function PriceRange(
-    {
-      className,
-      formatter,
-      max,
-      min,
-      step,
-      onChange,
-      onEnd,
-      testId = 'store-price-range',
-      variant,
-      'aria-label': ariaLabel,
-    },
-    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)
-      },
-    }))
-
-    return (
-      <div data-fs-price-range data-testid={testId} className={className}>
-        <Slider
-          ref={sliderRef}
-          min={min}
-          max={max}
-          step={step}
-          onEnd={onEnd}
-          aria-label={ariaLabel}
-          onChange={(value) => onChange?.(value)}
-          minValueLabelComponent={(minValue) => {
-            const minPercent = (minValue / max.absolute) * 100
-
-            return (
-              <Price
-                value={minValue}
-                variant={variant}
-                formatter={formatter}
-                data-price-range-value-label="min"
-                style={{
-                  position: 'absolute',
-                  left: `calc(${minPercent}% + (${8 - minPercent * 0.2}px))`,
-                }}
-              />
-            )
-          }}
-          maxValueLabelComponent={(maxValue) => {
-            const maxPercent = (maxValue / max.absolute) * 100
-
-            return (
-              <Price
-                formatter={formatter}
-                variant={variant}
-                value={maxValue}
-                data-price-range-value-label="max"
-                style={{
-                  position: 'absolute',
-                  left: `calc(${maxPercent}% + (${8 - maxPercent * 0.2}px))`,
-                }}
-              />
-            )
-          }}
-        />
-      </div>
-    )
-  }
-)
-
-export default PriceRange

package/src/components/molecules/PriceRange/index.ts

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