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

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 2.0.48-alpha.0 (2023-01-13)
+
+
+### Features
+
+* Adds `Alert` Component  ([#1590](https://github.com/vtex/faststore/issues/1590)) ([6e1cc00](https://github.com/vtex/faststore/commit/6e1cc004a5f3ae8674798fe6a36fd2a5d1451d7c))
+
+
+### Bug Fixes
+
+* ui size limit ([#1608](https://github.com/vtex/faststore/issues/1608)) ([c19360f](https://github.com/vtex/faststore/commit/c19360f4eb0e1d1f53e578e8429daa1a716d881d))
+
+
+
+## [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

@@ -19,8 +19,6 @@ export { default as ProductTitle } from './components/molecules/ProductTitle';
 export type { ProductTitleProps } from './components/molecules/ProductTitle';
 export { default as OrderSummary } from './components/molecules/OrderSummary';
 export type { OrderSummaryProps } from './components/molecules/OrderSummary';
-export { default as AggregateRating } from './components/molecules/AggregateRating';
-export type { AggregateRatingProps } from './components/molecules/AggregateRating';
 export { default as ProductCard, ProductCardImage, ProductCardContent, ProductCardActions, } from './components/molecules/ProductCard';
 export type { ProductCardProps, ProductCardImageProps, ProductCardContentProps, ProductCardActionsProps, } from './components/molecules/ProductCard';
 export { default as Card, CardImage, CardContent, CardActions, } from './components/molecules/Card';
@@ -49,10 +47,6 @@ export { default as RadioGroup, RadioOption, } from './components/molecules/Radi
 export type { RadioGroupProps, RadioOptionProps, } from './components/molecules/RadioGroup';
 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

@@ -11,7 +11,6 @@ export { default as SkuSelector } from './components/molecules/SkuSelector';
 export { default as Gift, GiftContent, GiftImage, } from './components/molecules/Gift';
 export { default as ProductTitle } from './components/molecules/ProductTitle';
 export { default as OrderSummary } from './components/molecules/OrderSummary';
-export { default as AggregateRating } from './components/molecules/AggregateRating';
 export { default as ProductCard, ProductCardImage, ProductCardContent, ProductCardActions, } from './components/molecules/ProductCard';
 export { default as Card, CardImage, CardContent, CardActions, } from './components/molecules/Card';
 export { default as CartItem, CartItemActions, CartItemContent, CartItemImage, CartItemPrices, CartItemSummary, CartItemTitle, } from './components/molecules/CartItem';
@@ -26,8 +25,6 @@ export { default as LoadingButton } from './components/molecules/LoadingButton';
 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,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,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.48-alpha.0",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -30,7 +30,7 @@
   "size-limit": [
     {
       "path": "dist/index.js",
-      "limit": "20 KB"
+      "limit": "30 KB"
     }
   ],
   "dependencies": {
@@ -46,8 +46,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@faststore/eslint-config": "^2.0.37-alpha.0",
-    "@faststore/shared": "^2.0.44-alpha.0",
+    "@faststore/eslint-config": "^2.0.48-alpha.0",
+    "@faststore/shared": "^2.0.48-alpha.0",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@types/tabbable": "^3.1.1",
     "babel-loader": "^8.2.5",
@@ -59,5 +59,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "acf23500bf3f608eaff4debbf42c75e6e5a4c654"
+  "gitHead": "13071d1410c4d42df70946ba27631549d2544d85"
 }

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

@@ -0,0 +1,108 @@
+[data-fs-alert] {
+  // --------------------------------------------------------
+  // Design Tokens for Alert
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-alert-height                    : var(--fs-spacing-7);
+  --fs-alert-padding-left              : var(--fs-spacing-3);
+  --fs-alert-padding-right             : var(--fs-alert-padding-left);
+
+  --fs-alert-bkg-color                 : var(--fs-color-highlighted-bkg);
+
+  --fs-alert-text-color                : var(--fs-color-highlighted-text);
+  --fs-alert-text-size                 : var(--fs-text-size-1);
+
+  // Icon
+  --fs-alert-icon-width                : var(--fs-spacing-4);
+  --fs-alert-icon-height               : var(--fs-alert-icon-width);
+  --fs-alert-icon-margin-right         : var(--fs-spacing-1);
+  --fs-alert-icon-color                : var(--fs-alert-text-color);
+
+  // Link
+  --fs-alert-link-color                : var(--fs-alert-text-color);
+  --fs-alert-link-color-visited        : var(--fs-alert-text-color);
+
+  // Dismissible Button
+  --fs-alert-button-text-color         : var(--fs-alert-text-color);
+  --fs-alert-button-bkg-color          : var(--fs-alert-bkg-color);
+  --fs-alert-button-border-radius      : var(--fs-border-radius);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: var(--fs-alert-height);
+  padding-right: var(--fs-alert-padding-right);
+  padding-left: var(--fs-alert-padding-left);
+  font-size: var(--fs-alert-text-size);
+  color: var(--fs-alert-text-color);
+  background-color: var(--fs-alert-bkg-color);
+
+  > [data-fs-icon] {
+    width: var(--fs-alert-icon-width);
+    height: var(--fs-alert-icon-height);
+    margin-right: var(--fs-alert-icon-margin-right);
+    color: var(--fs-alert-icon-color);
+  }
+
+  [data-fs-alert-content] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  span {
+    font-weight: var(--fs-text-weight-bold);
+  }
+
+  [data-fs-alert-link] {
+    min-width: 0;
+    height: var(--fs-alert-height);
+    padding: 0 var(--fs-spacing-1);
+    overflow: hidden;
+    font-weight: var(--fs-text-weight-bold);
+    line-height: var(--fs-alert-height);
+    color: var(--fs-alert-link-color);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &:visited {
+      color: var(--fs-alert-link-color-visited);
+    }
+  }
+
+  [data-fs-alert-button] {
+    min-width: var(--fs-control-tap-size);
+    height: 100%;
+    padding: var(--fs-spacing-0);
+    margin-left: auto;
+    color: var(--fs-alert-button-text-color);
+    background-color: var(--fs-alert-button-bkg-color);
+
+    > span {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      background-color: var(--fs-alert-button-bkg-color);
+      border-radius: var(--fs-alert-button-border-radius);
+    }
+
+    &:hover span {
+      filter: brightness(0.95);
+    }
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-alert-dismissible="true"] {
+    padding-right: 0;
+  }
+}

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/components/molecules/Rating/styles.scss

@@ -0,0 +1,69 @@
+[data-fs-rating] {
+  // --------------------------------------------------------
+  // Design Tokens for Rating
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-rating-gap                     : var(--fs-spacing-3);
+  --fs-rating-color                   : var(--fs-color-text);
+
+  // Icon
+  --fs-rating-icon-width              : var(--fs-spacing-3);
+  --fs-rating-icon-height             : var(--fs-rating-icon-width);
+
+  // Actionable
+  --fs-rating-actionable-gap          : 0;
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  display: flex;
+
+  [data-fs-icon] {
+    color: var(--fs-rating-color);
+    width: var(--fs-rating-icon-width);
+    height: var(--fs-rating-icon-height);
+  }
+
+  [data-fs-rating-button] {
+    color: unset;
+    &[data-fs-button-variant=tertiary]:hover,
+    &[data-fs-button-variant=tertiary]:focus,
+    &[data-fs-button-variant=tertiary]:active { color: unset; }
+  }
+
+  [data-fs-rating-icon-wrapper] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+  }
+
+  [data-fs-rating-icon-outline] {
+    svg { fill: none; }
+  }
+
+  [data-fs-rating-item] { position: relative; }
+
+  //  --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  [data-fs-rating-item="empty"] [data-fs-icon] svg {
+    fill: none;
+  }
+
+  [data-fs-rating-item="partial"] [data-fs-rating-icon-wrapper] {
+    width: calc(var(--fs-rating-icon-width) / 2);
+  }
+
+  &:not([data-fs-rating-actionable="true"]) {
+    column-gap: var(--fs-rating-gap);
+  }
+
+  [data-fs-rating-actionable="true"] {
+    column-gap: var(--fs-rating-actionable-gap);
+  }
+
+}

package/src/index.ts

@@ -40,9 +40,6 @@ export type { ProductTitleProps } from './components/molecules/ProductTitle'
 export { default as OrderSummary } from './components/molecules/OrderSummary'
 export type { OrderSummaryProps } from './components/molecules/OrderSummary'
 
-export { default as AggregateRating } from './components/molecules/AggregateRating'
-export type { AggregateRatingProps } from './components/molecules/AggregateRating'
-
 export {
   default as ProductCard,
   ProductCardImage,
@@ -140,12 +137,6 @@ export type {
 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'
-
 // Organisms
 export {
   default as OutOfStock,

package/src/styles/components.scss

@@ -14,13 +14,16 @@
 
 // Molecules
 @import "../components/molecules/Accordion/styles";
+@import "../components/molecules/Alert/styles";
 @import "../components/molecules/BuyButton/styles";
 @import "../components/molecules/CheckboxField/styles";
 @import "../components/molecules/DiscountBadge/styles";
 @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/Rating/styles";
 @import "../components/molecules/SelectField/styles";
 @import "../components/molecules/Table/styles";
 @import "../components/molecules/Tag/styles";

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

@@ -1,18 +0,0 @@
-import React from 'react';
-import type { HTMLAttributes } from 'react';
-export interface AggregateRatingProps extends HTMLAttributes<HTMLUListElement> {
-    /**
-     * The current value of the rating, based on the quantity of child elements.
-     */
-    value: number;
-    /**
-     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-     */
-    testId?: string;
-}
-export interface RatingItemProps {
-    'data-fs-aggregate-rating-item'?: 'full' | 'partial' | 'empty';
-    'data-testid'?: string;
-}
-declare const AggregateRating: React.ForwardRefExoticComponent<AggregateRatingProps & React.RefAttributes<HTMLUListElement>>;
-export default AggregateRating;

package/dist/components/molecules/AggregateRating/AggregateRating.js

@@ -1,26 +0,0 @@
-import React, { forwardRef } from 'react';
-import { List } from '@faststore/components';
-const RatingItem = ({ children, ...otherProps }) => {
-    if (!React.isValidElement(children)) {
-        return React.createElement("li", { ...otherProps }, children);
-    }
-    return React.createElement("li", null, React.cloneElement(children, otherProps));
-};
-const AggregateRating = forwardRef(function AggregateRating({ children, testId = 'store-aggregate-rating', value, ...otherProps }, ref) {
-    const fillCheck = (itemValue) => {
-        if (itemValue >= 1) {
-            return 'full';
-        }
-        if (0 < itemValue && itemValue < 1) {
-            return 'partial';
-        }
-        return 'empty';
-    };
-    return (React.createElement(List, { "data-fs-aggregate-rating": true, ref: ref, "data-testid": testId, ...otherProps }, React.Children.map(children, (child, index) => {
-        const currentItemNumber = index;
-        const fill = fillCheck(value - currentItemNumber);
-        return (React.createElement(RatingItem, { key: `aggregate-rating-${index}`, "data-fs-aggregate-rating-item": fill, "data-testid": `${testId}-item` }, child));
-    })));
-});
-export default AggregateRating;
-//# sourceMappingURL=AggregateRating.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"AggregateRating.js","sourceRoot":"","sources":["../../../../src/components/molecules/AggregateRating/AggregateRating.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAkB5C,MAAM,UAAU,GAA2C,CAAC,EAC1D,QAAQ,EACR,GAAG,UAAU,EACd,EAAE,EAAE;IACH,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE;QACnC,OAAO,+BAAQ,UAAU,IAAG,QAAQ,CAAM,CAAA;KAC3C;IAED,OAAO,gCAAK,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAM,CAAA;AAC5D,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,UAAU,CAChC,SAAS,eAAe,CACtB,EAAE,QAAQ,EAAE,MAAM,GAAG,wBAAwB,EAAE,KAAK,EAAE,GAAG,UAAU,EAAE,EACrE,GAAG;IAEH,MAAM,SAAS,GAAG,CAAC,SAAiB,EAAE,EAAE;QACtC,IAAI,SAAS,IAAI,CAAC,EAAE;YAClB,OAAO,MAAM,CAAA;SACd;QAED,IAAI,CAAC,GAAG,SAAS,IAAI,SAAS,GAAG,CAAC,EAAE;YAClC,OAAO,SAAS,CAAA;SACjB;QAED,OAAO,OAAO,CAAA;IAChB,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,IAAI,sCAEH,GAAG,EAAE,GAAG,iBACK,MAAM,KACf,UAAU,IAEb,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAa,EAAE,EAAE;QACrD,MAAM,iBAAiB,GAAG,KAAK,CAAA;QAC/B,MAAM,IAAI,GAAG,SAAS,CAAC,KAAK,GAAG,iBAAiB,CAAC,CAAA;QAEjD,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,oBAAoB,KAAK,EAAE,mCACD,IAAI,iBACtB,GAAG,MAAM,OAAO,IAE5B,KAAK,CACK,CACd,CAAA;IACH,CAAC,CAAC,CACG,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,eAAe,CAAA"}

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

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

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

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

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

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

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

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

package/dist/components/molecules/Alert/Alert.js

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../../src/components/molecules/Alert/Alert.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAWzC,MAAM,KAAK,GAAG,UAAU,CAA6B,SAAS,KAAK,CACjE,EAAE,MAAM,GAAG,aAAa,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EACnD,GAAG;IAEH,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,wCAEC,MAAM,KACf,UAAU,IAEb,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,KAAK,CAAA"}

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

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

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

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

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

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

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/AggregateRating/AggregateRating.tsx

@@ -1,76 +0,0 @@
-import React, { forwardRef } from 'react'
-import type { FC, PropsWithChildren, HTMLAttributes } from 'react'
-
-import { List } from '@faststore/components'
-
-export interface AggregateRatingProps extends HTMLAttributes<HTMLUListElement> {
-  /**
-   * The current value of the rating, based on the quantity of child elements.
-   */
-  value: number
-  /**
-   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-   */
-  testId?: string
-}
-
-export interface RatingItemProps {
-  'data-fs-aggregate-rating-item'?: 'full' | 'partial' | 'empty'
-  'data-testid'?: string
-}
-
-const RatingItem: FC<PropsWithChildren<RatingItemProps>> = ({
-  children,
-  ...otherProps
-}) => {
-  if (!React.isValidElement(children)) {
-    return <li {...otherProps}>{children}</li>
-  }
-
-  return <li>{React.cloneElement(children, otherProps)}</li>
-}
-
-const AggregateRating = forwardRef<HTMLUListElement, AggregateRatingProps>(
-  function AggregateRating(
-    { children, testId = 'store-aggregate-rating', value, ...otherProps },
-    ref
-  ) {
-    const fillCheck = (itemValue: number) => {
-      if (itemValue >= 1) {
-        return 'full'
-      }
-
-      if (0 < itemValue && itemValue < 1) {
-        return 'partial'
-      }
-
-      return 'empty'
-    }
-
-    return (
-      <List
-        data-fs-aggregate-rating
-        ref={ref}
-        data-testid={testId}
-        {...otherProps}
-      >
-        {React.Children.map(children, (child, index: number) => {
-          const currentItemNumber = index
-          const fill = fillCheck(value - currentItemNumber)
-
-          return (
-            <RatingItem
-              key={`aggregate-rating-${index}`}
-              data-fs-aggregate-rating-item={fill}
-              data-testid={`${testId}-item`}
-            >
-              {child}
-            </RatingItem>
-          )
-        })}
-      </List>
-    )
-  }
-)
-
-export default AggregateRating

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

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

package/src/components/molecules/Alert/Alert.tsx

@@ -1,30 +0,0 @@
-import type { HTMLAttributes } from 'react'
-import React, { forwardRef } from 'react'
-
-export interface AlertProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
-  /**
-   * ID to find this component in testing tools (e.g.: cypress,
-   * testing-library, and jest).
-   */
-  testId?: string
-}
-
-const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
-  { testId = 'store-alert', children, ...otherProps },
-  ref
-) {
-  return (
-    <div
-      ref={ref}
-      role="alert"
-      data-fs-alert
-      data-testid={testId}
-      {...otherProps}
-    >
-      {children}
-    </div>
-  )
-})
-
-export default Alert

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

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

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'