@faststore/ui 2.0.44-alpha.0 → 2.0.47-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.47-alpha.0](https://github.com/vtex/faststore/compare/v2.0.46-alpha.0...v2.0.47-alpha.0) (2023-01-13)
+
+
+### Features
+
+* Adds `QuantitySelector` component ([#1597](https://github.com/vtex/faststore/issues/1597)) ([a587155](https://github.com/vtex/faststore/commit/a5871559a4a28754dd9868b7f85c92a5bde52917))
+
+
+
 ## [2.0.44-alpha.0](https://github.com/vtex/faststore/compare/v2.0.43-alpha.0...v2.0.44-alpha.0) (2023-01-11)
 
 **Note:** Version bump only for package @faststore/ui

package/dist/index.d.ts

@@ -51,8 +51,6 @@ export { default as Form } from './components/molecules/Form';
 export type { FormProps } from './components/molecules/Form';
 export { default as Alert } from './components/molecules/Alert';
 export type { AlertProps } from './components/molecules/Alert';
-export { default as QuantitySelector } from './components/molecules/QuantitySelector';
-export type { QuantitySelectorProps } from './components/molecules/QuantitySelector';
 export { default as OutOfStock, OutOfStockTitle, OutOfStockMessage, } from './components/organisms/OutOfStock';
 export type { OutOfStockProps, OutOfStockMessageProps, OutOfStockTitleProps, } from './components/organisms/OutOfStock';
 export { Tiles, Tile } from './components/organisms/Tiles';

package/dist/index.js

@@ -27,7 +27,6 @@ export { default as PriceRange } from './components/molecules/PriceRange';
 export { default as RadioGroup, RadioOption, } from './components/molecules/RadioGroup';
 export { default as Form } from './components/molecules/Form';
 export { default as Alert } from './components/molecules/Alert';
-export { default as QuantitySelector } from './components/molecules/QuantitySelector';
 // Organisms
 export { default as OutOfStock, OutOfStockTitle, OutOfStockMessage, } from './components/organisms/OutOfStock';
 export { Tiles, Tile } from './components/organisms/Tiles';

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,EACL,OAAO,IAAI,IAAI,EACf,WAAW,EACX,SAAS,GACV,MAAM,6BAA6B,CAAA;AAOpC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,wCAAwC,CAAA;AAGnF,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,EACL,OAAO,IAAI,UAAU,EACrB,WAAW,GACZ,MAAM,mCAAmC,CAAA;AAM1C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,6BAA6B,CAAA;AAG7D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,8BAA8B,CAAA;AAG/D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yCAAyC,CAAA;AAGrF,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,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,EACL,OAAO,IAAI,IAAI,EACf,WAAW,EACX,SAAS,GACV,MAAM,6BAA6B,CAAA;AAOpC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,wCAAwC,CAAA;AAGnF,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,EACL,OAAO,IAAI,UAAU,EACrB,WAAW,GACZ,MAAM,mCAAmC,CAAA;AAM1C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,6BAA6B,CAAA;AAG7D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,8BAA8B,CAAA;AAG/D,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.44-alpha.0",
+  "version": "2.0.47-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": "acf23500bf3f608eaff4debbf42c75e6e5a4c654"
+  "gitHead": "3e7e16180416349dc8471b69ad9e305fd2f4d424"
 }

package/src/components/molecules/QuantitySelector/styles.scss

@@ -0,0 +1,154 @@
+[data-fs-quantity-selector] {
+  // --------------------------------------------------------
+  // Design Tokens for Quantity Selector
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-qty-selector-width                     : calc(var(--fs-control-tap-size) * 2.7);
+  --fs-qty-selector-height                    : calc(var(--fs-control-tap-size) + (var(--fs-qty-selector-border-width) * 2));
+
+  --fs-qty-selector-shadow                    : none;
+  --fs-qty-selector-shadow-hover              : 0 0 0 var(--fs-border-width) var(--fs-border-color-active);
+
+  --fs-qty-selector-bkg-color                 : var(--fs-color-body-bkg);
+  --fs-qty-selector-bkg-color-hover           : var(--fs-qty-selector-bkg-color);
+
+  --fs-qty-selector-border-radius             : var(--fs-border-radius);
+  --fs-qty-selector-border-width              : var(--fs-border-width);
+  --fs-qty-selector-border-width-hover        : var(--fs-border-width);
+  --fs-qty-selector-border-color              : var(--fs-border-color);
+  --fs-qty-selector-border-color-hover        : var(--fs-border-color-active);
+
+  // Text
+  --fs-qty-selector-text-size                 : var(--fs-text-size-base);
+  --fs-qty-selector-text-color                : var(--fs-color-text);
+  --fs-qty-selector-text-color-hover          : var(--fs-qty-selector-text-color);
+
+  // Icon
+  --fs-qty-selector-icon-color                : var(--fs-color-link);
+
+  // Button
+  --fs-qty-selector-button-shadow             : none;
+  --fs-qty-selector-button-shadow-hover       : none;
+  --fs-qty-selector-button-bkg-color          : transparent;
+  --fs-qty-selector-button-bkg-color-hover    : var(--fs-color-primary-bkg-light);
+  --fs-qty-selector-button-bkg-color-focus    : var(--fs-qty-selector-button-bkg-color-hover);
+  --fs-qty-selector-button-border-radius      : var(--fs-qty-selector-border-radius);
+
+  // Disabled
+  --fs-qty-selector-disabled-bkg-color        : var(--fs-color-disabled-bkg);
+  --fs-qty-selector-disabled-text-color       : var(--fs-color-disabled-text);
+  --fs-qty-selector-disabled-icon-color       : var(--fs-border-color-light-disabled);
+  --fs-qty-selector-disabled-border-color     : var(--fs-qty-selector-disabled-bkg-color);
+  --fs-qty-selector-disabled-button-bkg-color : var(--fs-qty-selector-button-bkg-color-hover);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: var(--fs-qty-selector-width);
+  height: var(--fs-qty-selector-height);
+  border-radius: var(--fs-qty-selector-border-radius);
+  box-shadow: var(--fs-qty-selector-shadow);
+
+  [data-fs-icon] {
+    margin: 0;
+    line-height: 0;
+    color: var(--fs-qty-selector-icon-color);
+  }
+
+  [data-quantity-selector-input] {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    font-size: var(--fs-qty-selector-text-size);
+    color: var(--fs-qty-selector-text-color);
+    text-align: center;
+  }
+
+  [data-quantity-selector-button] {
+    position: absolute;
+    background-color: var(--fs-qty-selector-button-bkg-color);
+
+    [data-fs-icon] {
+      width: 100%;
+      height: 100%;
+      border-radius: var(--fs-qty-selector-button-border-radius);
+      box-shadow: var(--fs-qty-selector-button-shadow);
+    }
+
+    &[data-fs-icon-button] {
+      padding: var(--fs-spacing-1);
+    }
+
+    &:first-of-type { left: 0; }
+
+    &:last-of-type { right: 0; }
+
+    &:hover:not(:disabled) [data-fs-icon] {
+      background-color: var(--fs-qty-selector-button-bkg-color-hover);
+      box-shadow: var(--fs-qty-selector-button-shadow-hover);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      background-color: var(--fs-qty-selector-button-bkg-color);
+
+      &:hover, &:focus-visible {
+        background-color: var(--fs-qty-selector-button-bkg-color);
+      }
+
+      [data-fs-icon] {
+        color: var(--fs-qty-selector-disabled-icon-color);
+      }
+    }
+
+    &:hover:not(:disabled) {
+      background-color: transparent;
+      box-shadow: none;
+    }
+
+    &:focus:not(:disabled) {
+      background-color: transparent;
+      box-shadow: none;
+    }
+
+    &:focus-visible {
+      background-color: var(--fs-qty-selector-button-bkg-color);
+      outline: none;
+      box-shadow: none;
+
+      [data-fs-icon] {
+        @include focus-ring;
+
+        background-color: var(--fs-qty-selector-button-bkg-color-focus);
+      }
+    }
+  }
+
+  &:hover {
+    [data-quantity-selector-input]:not(:disabled):not(:focus) {
+      color: var(--fs-qty-selector-text-color-hover);
+      background-color: var(--fs-qty-selector-bkg-color-hover);
+      border-color: var(--fs-qty-selector-border-color-hover);
+      border-width: var(--fs-qty-selector-border-width-hover);
+      box-shadow: var(--fs-qty-selector-shadow-hover);
+    }
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-quantity-selector="disabled"] {
+    [data-quantity-selector-input] {
+      border-color: var(--fs-qty-selector-disabled-border-color);
+    }
+    [data-quantity-selector-button]:hover [data-fs-icon] { background-color: transparent; }
+  }
+}

package/src/index.ts

@@ -143,9 +143,6 @@ export type { FormProps } from './components/molecules/Form'
 export { default as Alert } from './components/molecules/Alert'
 export type { AlertProps } from './components/molecules/Alert'
 
-export { default as QuantitySelector } from './components/molecules/QuantitySelector'
-export type { QuantitySelectorProps } from './components/molecules/QuantitySelector'
-
 // Organisms
 export {
   default as OutOfStock,

package/src/styles/components.scss

@@ -20,6 +20,7 @@
 @import "../components/molecules/Dropdown/styles";
 @import "../components/molecules/InputField/styles";
 @import "../components/molecules/LinkButton/styles";
+@import "../components/molecules/QuantitySelector/styles";
 @import "../components/molecules/RadioField/styles";
 @import "../components/molecules/SelectField/styles";
 @import "../components/molecules/Table/styles";

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

@@ -1,29 +0,0 @@
-import type { InputHTMLAttributes } from 'react';
-import React from 'react';
-import type { IconButtonProps, InputProps } from '@faststore/components';
-export interface QuantitySelectorProps extends InputHTMLAttributes<HTMLDivElement> {
-    /**
-     * Sets the current value that should be displayed on the input at the center of the quantity selector.
-     */
-    quantity: number | string;
-    /**
-     * Object with properties that will be passed forward the inner IconButton atom at the left of the input.
-     */
-    leftButtonProps: Omit<IconButtonProps, 'aria-label'>;
-    /**
-     * Object with properties that will be passed forward the inner Input atom between the two buttons.
-     */
-    inputProps: InputProps;
-    /**
-     * Object with properties that will be passed forward the inner IconButton atom at the right of the input.
-     */
-    rightButtonProps: Omit<IconButtonProps, 'aria-label'>;
-    /**
-     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-     *
-     * @default 'store-quantity-selector'
-     */
-    testId?: string;
-}
-declare const QuantitySelector: React.ForwardRefExoticComponent<QuantitySelectorProps & React.RefAttributes<HTMLDivElement>>;
-export default QuantitySelector;

package/dist/components/molecules/QuantitySelector/QuantitySelector.js

@@ -1,10 +0,0 @@
-import React, { forwardRef } from 'react';
-import { IconButton, Input } from '@faststore/components';
-const QuantitySelector = forwardRef(function QuantitySelector({ quantity, testId = 'store-quantity-selector', leftButtonProps, inputProps, rightButtonProps, ...otherProps }, ref) {
-    return (React.createElement("div", { "data-fs-quantity-selector": true, "data-testid": testId, ref: ref, ...otherProps },
-        React.createElement(IconButton, { "aria-controls": "quantity-selector-input", "aria-label": "Decrement Quantity", "data-quantity-selector-button": "left", ...leftButtonProps }),
-        React.createElement(Input, { "aria-label": "Quantity", "data-quantity-selector-input": true, id: "quantity-selector-input", value: quantity, ...inputProps }),
-        React.createElement(IconButton, { "aria-controls": "quantity-selector-input", "aria-label": "Increment Quantity", "data-quantity-selector-button": "right", ...rightButtonProps })));
-});
-export default QuantitySelector;
-//# sourceMappingURL=QuantitySelector.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"QuantitySelector.js","sourceRoot":"","sources":["../../../../src/components/molecules/QuantitySelector/QuantitySelector.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAgCzD,MAAM,gBAAgB,GAAG,UAAU,CACjC,SAAS,gBAAgB,CACvB,EACE,QAAQ,EACR,MAAM,GAAG,yBAAyB,EAClC,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,GAAG,UAAU,EACS,EACxB,GAAG;IAEH,OAAO,CACL,+EAEe,MAAM,EACnB,GAAG,EAAE,GAAG,KACJ,UAAU;QAEd,oBAAC,UAAU,qBACK,yBAAyB,gBAC5B,oBAAoB,mCACD,MAAM,KAChC,eAAe,GACnB;QACF,oBAAC,KAAK,kBACO,UAAU,wCAErB,EAAE,EAAC,yBAAyB,EAC5B,KAAK,EAAE,QAAQ,KACX,UAAU,GACd;QACF,oBAAC,UAAU,qBACK,yBAAyB,gBAC5B,oBAAoB,mCACD,OAAO,KACjC,gBAAgB,GACpB,CACE,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,gBAAgB,CAAA"}

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

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

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

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

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

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

package/src/components/molecules/QuantitySelector/QuantitySelector.tsx

@@ -1,80 +0,0 @@
-import type { InputHTMLAttributes } from 'react'
-import React, { forwardRef } from 'react'
-
-import type { IconButtonProps, InputProps } from '@faststore/components'
-import { IconButton, Input } from '@faststore/components'
-
-export interface QuantitySelectorProps
-  extends InputHTMLAttributes<HTMLDivElement> {
-  /**
-   * Sets the current value that should be displayed on the input at the center of the quantity selector.
-   */
-  quantity: number | string
-
-  /**
-   * Object with properties that will be passed forward the inner IconButton atom at the left of the input.
-   */
-  leftButtonProps: Omit<IconButtonProps, 'aria-label'>
-
-  /**
-   * Object with properties that will be passed forward the inner Input atom between the two buttons.
-   */
-  inputProps: InputProps
-
-  /**
-   * Object with properties that will be passed forward the inner IconButton atom at the right of the input.
-   */
-  rightButtonProps: Omit<IconButtonProps, 'aria-label'>
-
-  /**
-   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-   *
-   * @default 'store-quantity-selector'
-   */
-  testId?: string
-}
-
-const QuantitySelector = forwardRef<HTMLDivElement, QuantitySelectorProps>(
-  function QuantitySelector(
-    {
-      quantity,
-      testId = 'store-quantity-selector',
-      leftButtonProps,
-      inputProps,
-      rightButtonProps,
-      ...otherProps
-    }: QuantitySelectorProps,
-    ref
-  ) {
-    return (
-      <div
-        data-fs-quantity-selector
-        data-testid={testId}
-        ref={ref}
-        {...otherProps}
-      >
-        <IconButton
-          aria-controls="quantity-selector-input"
-          aria-label="Decrement Quantity"
-          data-quantity-selector-button="left"
-          {...leftButtonProps}
-        />
-        <Input
-          aria-label="Quantity"
-          data-quantity-selector-input
-          id="quantity-selector-input"
-          value={quantity}
-          {...inputProps}
-        />
-        <IconButton
-          aria-controls="quantity-selector-input"
-          aria-label="Increment Quantity"
-          data-quantity-selector-button="right"
-          {...rightButtonProps}
-        />
-      </div>
-    )
-  }
-)
-
-export default QuantitySelector

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

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