@faststore/core 2.0.110-alpha.0 → 2.0.111-alpha.0

package/.turbo/turbo-build.log

@@ -28,7 +28,7 @@ Route (pages)                              Size     First Load JS
 ├   └ css/3a57acf6e411f24d.css             1.69 kB
 ├   /_app                                  0 B            96.6 kB
 ├ ● /[...slug]                             9.46 kB         122 kB
-├   └ css/70ac3b88af168a4b.css             1.46 kB
+├   └ css/1f987650dd4e39d0.css             1.33 kB
 ├ ● /[slug]/p                              16.8 kB         125 kB
 ├   └ css/4abccf9803c3c356.css             1.82 kB
 ├ ○ /404                                   665 B           102 kB
@@ -39,13 +39,13 @@ Route (pages)                              Size     First Load JS
 ├ ○ /checkout                              371 B           102 kB
 ├ ○ /login                                 577 B           102 kB
 └ ○ /s                                     895 B           113 kB
-    └ css/cf4c6e7294227fd7.css             1.42 kB
+    └ css/6f4d3e91f1d161a8.css             1.29 kB
 + First Load JS shared by all              120 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-9746772201fe3ac1.js        23.9 kB
   ├ chunks/pages/_app-9d067ed89f7a4001.js  25.3 kB
-  ├ chunks/webpack-561abbd401db03bc.js     2.15 kB
-  └ css/117ce6f20b7a2e6c.css               23.5 kB
+  ├ chunks/webpack-62b0142505600323.js     2.15 kB
+  └ css/b32231bee7a654b8.css               23.6 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
 ○  (Static)  automatically rendered as static HTML (uses no initial props)

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.111-alpha.0](https://github.com/vtex/faststore/compare/v2.0.110-alpha.0...v2.0.111-alpha.0) (2023-04-18)
+
+### Features
+
+- Adds `ProductGrid` component ([#1719](https://github.com/vtex/faststore/issues/1719)) ([9cbe71f](https://github.com/vtex/faststore/commit/9cbe71f81395297c14b258efdd336b00f6b71071))
+
 ## [2.0.110-alpha.0](https://github.com/vtex/faststore/compare/v2.0.109-alpha.0...v2.0.110-alpha.0) (2023-04-18)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.0.110-alpha.0",
+  "version": "2.0.111-alpha.0",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
@@ -30,10 +30,10 @@
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
     "@faststore/api": "^2.0.105-alpha.0",
-    "@faststore/components": "^2.0.110-alpha.0",
+    "@faststore/components": "^2.0.111-alpha.0",
     "@faststore/graphql-utils": "^2.0.3-alpha.0",
     "@faststore/sdk": "^2.0.3-alpha.0",
-    "@faststore/ui": "^2.0.110-alpha.0",
+    "@faststore/ui": "^2.0.111-alpha.0",
     "@types/react": "^18.0.14",
     "@vtex/client-cms": "^0.2.12",
     "autoprefixer": "^10.4.0",
@@ -108,5 +108,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "4d3127188c79beaa7f286bc8791f902742110c9b"
+  "gitHead": "72a97c7507e65fa0cc5d1fb50e090cf8cd248416"
 }

package/src/components/product/ProductGrid/ProductGrid.tsx

@@ -1,6 +1,9 @@
 import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
-import styles from 'src/components/product/ProductGrid/product-grid.module.scss'
+import {
+  ProductGrid as UIProductGrid,
+  ProductGridItem as UIProductGridItem,
+} from '@faststore/ui'
 
 import ProductCard from '../ProductCard'
 
@@ -19,23 +22,25 @@ interface Props {
 function ProductGrid({ products, page, pageSize }: Props) {
   const aspectRatio = 1
 
+  console.log(products)
+
   return (
     <ProductGridSkeleton
       aspectRatio={aspectRatio}
       loading={products.length === 0}
     >
-      <ul data-fs-product-grid className={styles.fsProductGrid}>
+      <UIProductGrid>
         {products.map(({ node: product }, idx) => (
-          <li key={`${product.id}`}>
+          <UIProductGridItem key={`${product.id}`}>
             <ProductCard
               product={product}
               index={pageSize * page + idx + 1}
               bordered
               aspectRatio={aspectRatio}
             />
-          </li>
+          </UIProductGridItem>
         ))}
-      </ul>
+      </UIProductGrid>
     </ProductGridSkeleton>
   )
 }

package/src/components/skeletons/ProductGridSkeleton/ProductGridSkeleton.tsx

@@ -1,7 +1,6 @@
 import type { PropsWithChildren } from 'react'
 
 import { ITEMS_PER_PAGE } from 'src/constants'
-import styles from 'src/components/product/ProductGrid/product-grid.module.scss'
 
 import ProductCardSkeleton from '../ProductCardSkeleton'
 
@@ -16,7 +15,7 @@ function ProductGridSkeleton({
   loading = true,
 }: PropsWithChildren<ProductGridSkeletonProps>) {
   return loading ? (
-    <ul className={styles.fsProductGrid}>
+    <ul data-fs-product-grid>
       {Array.from({ length: ITEMS_PER_PAGE }, (_, index) => (
         <li key={String(index)}>
           <ProductCardSkeleton aspectRatio={aspectRatio} bordered />

package/.next/static/chunks/686.0136918bcab42e72.js

@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[686],{7704:function(e,t,r){"use strict";r.d(t,{YD:function(){return g},df:function(){return h}});var n=r(2784);function i(){return i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},i.apply(this,arguments)}function a(e,t){return a=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},a(e,t)}var o=new Map,s=new WeakMap,c=0,l=void 0;function d(e){return Object.keys(e).sort().filter((function(t){return void 0!==e[t]})).map((function(t){return t+"_"+("root"===t?(r=e.root)?(s.has(r)||(c+=1,s.set(r,c.toString())),s.get(r)):"0":e[t]);var r})).toString()}function u(e,t,r,n){if(void 0===r&&(r={}),void 0===n&&(n=l),"undefined"===typeof window.IntersectionObserver&&void 0!==n){var i=e.getBoundingClientRect();return t(n,{isIntersecting:n,target:e,intersectionRatio:"number"===typeof r.threshold?r.threshold:0,time:0,boundingClientRect:i,intersectionRect:i,rootBounds:i}),function(){}}var a=function(e){var t=d(e),r=o.get(t);if(!r){var n,i=new Map,a=new IntersectionObserver((function(t){t.forEach((function(t){var r,a=t.isIntersecting&&n.some((function(e){return t.intersectionRatio>=e}));e.trackVisibility&&"undefined"===typeof t.isVisible&&(t.isVisible=a),null==(r=i.get(t.target))||r.forEach((function(e){e(a,t)}))}))}),e);n=a.thresholds||(Array.isArray(e.threshold)?e.threshold:[e.threshold||0]),r={id:t,observer:a,elements:i},o.set(t,r)}return r}(r),s=a.id,c=a.observer,u=a.elements,f=u.get(e)||[];return u.has(e)||u.set(e,f),f.push(t),c.observe(e),function(){f.splice(f.indexOf(t),1),0===f.length&&(u.delete(e),c.unobserve(e)),0===u.size&&(c.disconnect(),o.delete(s))}}var f=["children","as","triggerOnce","threshold","root","rootMargin","onChange","skip","trackVisibility","delay","initialInView","fallbackInView"];function p(e){return"function"!==typeof e.children}var h=function(e){var t,r;function o(t){var r;return(r=e.call(this,t)||this).node=null,r._unobserveCb=null,r.handleNode=function(e){r.node&&(r.unobserve(),e||r.props.triggerOnce||r.props.skip||r.setState({inView:!!r.props.initialInView,entry:void 0})),r.node=e||null,r.observeNode()},r.handleChange=function(e,t){e&&r.props.triggerOnce&&r.unobserve(),p(r.props)||r.setState({inView:e,entry:t}),r.props.onChange&&r.props.onChange(e,t)},r.state={inView:!!t.initialInView,entry:void 0},r}r=e,(t=o).prototype=Object.create(r.prototype),t.prototype.constructor=t,a(t,r);var s=o.prototype;return s.componentDidUpdate=function(e){e.rootMargin===this.props.rootMargin&&e.root===this.props.root&&e.threshold===this.props.threshold&&e.skip===this.props.skip&&e.trackVisibility===this.props.trackVisibility&&e.delay===this.props.delay||(this.unobserve(),this.observeNode())},s.componentWillUnmount=function(){this.unobserve(),this.node=null},s.observeNode=function(){if(this.node&&!this.props.skip){var e=this.props,t=e.threshold,r=e.root,n=e.rootMargin,i=e.trackVisibility,a=e.delay,o=e.fallbackInView;this._unobserveCb=u(this.node,this.handleChange,{threshold:t,root:r,rootMargin:n,trackVisibility:i,delay:a},o)}},s.unobserve=function(){this._unobserveCb&&(this._unobserveCb(),this._unobserveCb=null)},s.render=function(){if(!p(this.props)){var e=this.state,t=e.inView,r=e.entry;return this.props.children({inView:t,entry:r,ref:this.handleNode})}var a=this.props,o=a.children,s=a.as,c=function(e,t){if(null==e)return{};var r,n,i={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(a,f);return n.createElement(s||"div",i({ref:this.handleNode},c),o)},o}(n.Component);function g(e){var t=void 0===e?{}:e,r=t.threshold,i=t.delay,a=t.trackVisibility,o=t.rootMargin,s=t.root,c=t.triggerOnce,l=t.skip,d=t.initialInView,f=t.fallbackInView,p=n.useRef(),h=n.useState({inView:!!d}),g=h[0],v=h[1],m=n.useCallback((function(e){void 0!==p.current&&(p.current(),p.current=void 0),l||e&&(p.current=u(e,(function(e,t){v({inView:e,entry:t}),t.isIntersecting&&c&&p.current&&(p.current(),p.current=void 0)}),{root:s,rootMargin:o,threshold:r,trackVisibility:a,delay:i},f))}),[Array.isArray(r)?r.toString():r,s,o,c,l,a,f,i]);(0,n.useEffect)((function(){p.current||!g.entry||c||l||v({inView:!!d})}));var b=[m,g.inView,g.entry];return b.ref=b[0],b.inView=b[1],b.entry=b[2],b}h.displayName="InView",h.defaultProps={threshold:0,triggerOnce:!1,initialInView:!1}},9875:function(e,t,r){"use strict";r.d(t,{Z:function(){return a}});var n=r(2784),i=r(44);var a=({listPrice:e,spotPrice:t,thresholdLow:r=15,thresholdHigh:a=40,size:o,testId:s="fs-discount-badge"})=>{const c=((e,t)=>(0,n.useMemo)((()=>{const r=100*(e-t)/e;return Math.round(r)}),[t,e]))(e,t);if(0===c)return n.createElement(n.Fragment,null);const l=c<=r?"low":c<=a?"medium":"high";return n.createElement(i.Z,{"data-fs-discount-badge":!0,"data-fs-discount-badge-variant":l,size:o,"data-testid":s},c,"% off")}},783:function(e,t,r){"use strict";var n=r(2784),i=r(5045),a=r(2765),o=r(1329);const s=(0,n.forwardRef)((function({children:e,testId:t="fs-rating",length:r=5,value:s=0,icon:c,onChange:l,...d},u){const[f,p]=(0,n.useState)(0),h={"data-fs-rating-icon-outline":!0},g=n.isValidElement(c)?c:n.createElement(i.Z,{name:"Star"});return n.createElement(o.Z,{ref:u,"data-fs-rating":!0,"data-fs-rating-actionable":"function"===typeof l,"data-testid":t,...d},Array.from({length:r}).map(((e,r)=>{const o=r+1;return n.createElement("li",{key:`rating-${r}`,"data-fs-rating-item":o<=(f||s)?"full":o-s>0&&o-s<1?"partial":"empty","data-testid":`${t}-item`},l?n.createElement(a.Z,{"data-fs-rating-button":!0,icon:g,size:"small","aria-label":"rate",onClick:()=>{l(o)},onMouseEnter:()=>p(o),onMouseLeave:()=>p(s)}):n.createElement(n.Fragment,null,n.createElement("div",{"data-fs-rating-icon-wrapper":!0},g),n.isValidElement(c)?n.cloneElement(c,h):n.createElement(i.Z,{name:"Star","data-fs-rating-icon-outline":!0})))})))}));t.Z=s},3432:function(e,t,r){"use strict";r.d(t,{Z:function(){return _}});var n=r(9499),i=r(4730),a=r(2784);var o=(0,a.forwardRef)((function({testId:e="fs-product-card",variant:t="default",bordered:r=!1,outOfStock:n,children:i,...o},s){return a.createElement("article",{ref:s,"data-fs-product-card":n?"out-of-stock":"","data-fs-product-card-variant":t,"data-fs-product-card-bordered":r,"data-testid":e,...o},i)}));var s=(0,a.forwardRef)((function({testId:e="fs-product-card-image",aspectRatio:t=1,children:r,...n},i){return a.createElement("div",{ref:i,"data-fs-product-card-image":!0,"data-testid":e,style:{"--fs-product-card-image-aspect-ratio":t},...n},r)})),c=r(7865),l=r(7549),d=r(783),u=r(5045),f=r(9875),p=r(44),h=r(7578);var g=(0,a.forwardRef)((function({testId:e="fs-product-card-content",title:t,linkProps:r,price:n,outOfStock:i,outOfStockLabel:o="Out of stock",ratingValue:s,showDiscountBadge:g,buttonLabel:v="Add",onButtonClick:m,children:b,...y},O){return a.createElement("section",{ref:O,"data-fs-product-card-content":!0,"data-fs-product-card-badge":g,"data-testid":e,...y},a.createElement("div",{"data-fs-product-card-heading":!0},a.createElement("h3",{"data-fs-product-card-title":!0},a.createElement(c.Z,{...r,title:t},t)),a.createElement("div",{"data-fs-product-card-prices":!0},a.createElement(l.Z,{value:n?.listPrice?n.listPrice:0,formatter:n?.formatter,testId:"list-price","data-value":n?.listPrice,variant:"listing",SRText:"Original price:"}),a.createElement(l.Z,{value:n?.value?n.value:0,formatter:n?.formatter,testId:"price","data-value":n?.value,variant:"spot",SRText:"Sale Price:"})),s&&a.createElement(d.Z,{value:s,icon:a.createElement(u.Z,{name:"Star"})})),g&&!i&&a.createElement(f.Z,{listPrice:n?.listPrice?n.listPrice:0,spotPrice:n?.value?n.value:0}),i&&a.createElement(p.Z,null,o),m&&!i&&a.createElement("div",{"data-fs-product-card-actions":!0},a.createElement(h.Z,{variant:"primary",icon:a.createElement(u.Z,{name:"ShoppingCart"}),iconPosition:"left",size:"small",onClick:m},v)))})),v=r(2154),m=r(5346),b=r(9854),y=r(1664),O=r.n(y),w=r(2322),j=["product","index","bordered","variant","aspectRatio","ratingValue","buttonLabel","onButtonClick","showDiscountBadge"];function k(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function x(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?k(Object(r),!0).forEach((function(t){(0,n.Z)(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):k(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function P(e){var{product:t,index:r,bordered:n=!1,variant:a="default",aspectRatio:c=1,ratingValue:l,buttonLabel:d="Add",onButtonClick:u,showDiscountBadge:f=!0}=e,p=(0,i.Z)(e,j),{sku:h,isVariantOf:{name:y},image:[k],offers:{lowPrice:P,offers:[{listPrice:_,availability:E}]}}=t,S=x(x({},(0,b.w)({product:t,selectedOffer:0,index:r})),{},{as:O(),passHref:!0,legacyBehavior:!1}),V="https://schema.org/InStock"!==E;return(0,w.jsxs)(o,x(x({outOfStock:V,bordered:n,variant:a,"data-fs-product-card-sku":h},p),{},{children:[(0,w.jsx)(s,{aspectRatio:c,children:(0,w.jsx)(v.E,{src:k.url,alt:k.alternateName,width:360,height:360/c,sizes:"(max-width: 768px) 25vw, 30vw",loading:"lazy"})}),(0,w.jsx)(g,{title:y,price:{value:P,listPrice:_,formatter:m.P},ratingValue:l,outOfStock:V,onButtonClick:u,linkProps:S,showDiscountBadge:f})]}))}var _=(0,a.memo)(P)},8686:function(e,t,r){"use strict";r.r(t),r.d(t,{default:function(){return m}});var n=r(7794),i=r(9913),a=r(2981),o=r.n(a),s=r(3432),c=r(2322);var l=function(e){var{products:t,page:r,pageSize:n}=e;return(0,c.jsx)(i.Z,{aspectRatio:1,loading:0===t.length,children:(0,c.jsx)("ul",{"data-fs-product-grid":!0,className:o().fsProductGrid,children:t.map(((e,t)=>{var{node:i}=e;return(0,c.jsx)("li",{children:(0,c.jsx)(s.Z,{product:i,index:n*r+t+1,bordered:!0,aspectRatio:1})},"".concat(i.id))}))})})},d=r(2784),u=r(7704),f=r(1163),p=r(5184);var h=function(e){var{page:t,pageSize:r,products:i,title:a}=e,o=(0,d.useRef)(!1),{ref:s,inView:l}=(0,u.YD)(),{pages:h}=(0,n.R)(),g=(0,f.useRouter)(),{sendViewItemListEvent:v}=(0,p.m)({products:i,title:a,page:t,pageSize:r});return(0,d.useEffect)((()=>{l&&h.length>1&&((e,t)=>{var r=new URL(window.location.href);r.searchParams.get("page")!==e&&(r.searchParams.set("page",e),t.replace(r,void 0,{shallow:!0,scroll:!1}))})(t.toString(),g),l&&!o.current&&i.length&&(v(),o.current=!0)}),[h.length,l,t,g,v,i.length]),(0,c.jsx)("div",{ref:s})},g=r(7028),v=r(763);var m=function(e){var t,{page:r,title:i,showSponsoredProducts:a=!0}=e,o=null!==(t=(0,v.r)(r))&&void 0!==t?t:[],{itemsPerPage:s}=(0,n.R)(),d=a?o.slice(0,2):void 0,u=Math.ceil(s/2),f=0===r&&d&&d.length>1;return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(h,{products:o,page:r,pageSize:s,title:i}),f?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(l,{products:o.slice(0,u),page:r,pageSize:u}),(0,c.jsxs)("div",{"data-fs-product-listing-sponsored":!0,children:[(0,c.jsx)("h3",{children:"Sponsored"}),(0,c.jsx)(g.Z,{selectedFacets:[{key:"productClusterIds",value:"141"}],title:""})]}),(0,c.jsx)(l,{products:o.slice(u,s),page:r,pageSize:u})]}):(0,c.jsx)(l,{products:o,page:r,pageSize:s})]})}},7028:function(e,t,r){"use strict";r.d(t,{Z:function(){return E}});var n=r(4730),i=r(2784),a=r(7704),o=r(5184),s=r(9499);var c=(0,i.forwardRef)((function({testId:e="store-tiles",children:t,...r},n){const a=i.Children.count(t);const o=3===a?"expanded-first":2===a?"expanded-first-two":"";return i.createElement("ul",{ref:n,"data-fs-tiles":!0,"data-fs-tiles-variant":o,"data-testid":e,...r},t)})),l=r(2044),d=r.n(l),u=r(2322),f=["children"];function p(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function h(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?p(Object(r),!0).forEach((function(t){(0,s.Z)(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):p(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var g=e=>{var{children:t}=e,r=(0,n.Z)(e,f);return(0,u.jsx)(c,h(h({className:d().fsTiles},r),{},{children:t}))};var v=(0,i.forwardRef)((function({testId:e="store-tile",children:t,...r},n){return i.createElement("li",{ref:n,"data-fs-tile":!0,"data-testid":e,...r},t)})),m=r(3432);var b=function(e){var{children:t,loading:r=!0}=e;return r?(0,u.jsx)(g,{children:Array.from({length:3},((e,t)=>{return(0,u.jsx)(v,{children:(0,u.jsx)(j,{index:t+1,aspectRatio:(r=3,n=t,3===r&&0===n||2===r&&(0===n||1===n)?5/3:3/4)})},String(t));var r,n}))}):(0,u.jsx)(u.Fragment,{children:t})},y=r(2928),O=r(4106),w=r.n(O);var j=function(e){var{index:t,aspectRatio:r=1}=e;return(0,u.jsxs)("div",{"data-fs-product-tile-skeleton":!0,className:w().fsProductTileSkeleton,"data-fs-product-tile-skeleton-index":t,children:[(0,u.jsx)("div",{"data-fs-product-tile-skeleton-image":!0,"data-fs-product-tile-skeleton-index":t,style:{"--fs-product-tile-skeleton-image-aspect-ratio":r},children:(0,u.jsx)(y.Z,{size:{width:"auto",height:"100%"},loading:!0})}),(0,u.jsxs)("div",{"data-fs-product-tile-skeleton-content":!0,"data-fs-product-tile-skeleton-index":t,children:[(0,u.jsxs)("div",{"data-fs-product-tile-skeleton-heading":!0,children:[(0,u.jsx)("div",{"data-fs-product-tile-skeleton-text":!0,"data-fs-product-tile-skeleton-index":t,children:(0,u.jsx)(y.Z,{size:{width:"70%",height:"1.5rem"}})}),(0,u.jsx)("div",{"data-fs-product-tile-skeleton-price":!0,children:(0,u.jsx)(y.Z,{size:{width:"60%",height:"1.5rem"}})})]}),(0,u.jsx)("div",{"data-fs-product-tile-skeleton-badge":!0,"data-fs-product-tile-skeleton-index":t,children:(0,u.jsx)(y.Z,{size:{width:"6rem",height:"2rem"},border:"pill"})})]})]})},k=r(737),x=r(8879),P=["title"],_=(e,t)=>3===e&&0===t||2===e&&(0===t||1===t)?5/3:3/4,E=e=>{var t,{title:r}=e,s=(0,n.Z)(e,P),c=(0,i.useRef)(!1),{ref:l,inView:d}=(0,a.YD)(),f=(0,k.kN)(s),p=null!==(t=null===f||void 0===f?void 0:f.edges)&&void 0!==t?t:[],{sendViewItemListEvent:h}=(0,o.m)({products:p,title:r,page:0,pageSize:0});return(0,i.useEffect)((()=>{d&&!c.current&&p.length&&(h(),c.current=!0)}),[d,p.length,h]),0===(null===f||void 0===f?void 0:f.edges.length)?null:(0,u.jsxs)(x.Z,{className:"layout__section layout__content",ref:l,children:[(0,u.jsx)("h2",{className:"text__title-section",children:r}),(0,u.jsx)("div",{children:(0,u.jsx)(b,{loading:!f,children:(0,u.jsx)(g,{children:p.map(((e,t)=>(0,u.jsx)(v,{children:(0,u.jsx)(m.Z,{"data-testid":"tile-card",product:e.node,index:t+1,variant:"wide",aspectRatio:_(p.length,t)})},e.node.id)))})})})]})}},2154:function(e,t,r){"use strict";r.d(t,{E:function(){return w}});var n=r(9499),i=r(4730),a=r(2784),o=r(1608),s=r.n(o),c=r(7183),l="https://".concat(r.n(c)().api.storeId,".vtexassets.com");var d=(e,t)=>{var r,n,i=[l,"unsafe"],a=[];t.trim&&i.push("trim"),t.manualCrop&&i.push((e=>{var{left:t,top:r,right:n,bottom:i}=e;return"".concat(t,"x").concat(r,":").concat(n,"x").concat(i)})(t.manualCrop)),t.fitIn&&i.push("fit-in"),a.push(null!==(r=t.horizontalAlign)&&void 0!==r?r:"center"),a.push(null!==(n=t.verticalAlign)&&void 0!==n?n:"middle"),t.smart&&a.push("smart");var{filters:o}=t;return o&&a.push(function(e){var t=["filters"];return Object.keys(e).forEach((r=>{var n,i=e[r];n=Array.isArray(i)?i.join(","):!0===i?"":String(i),t.push("".concat(r,"(").concat(n,")"))})),t.join(":")}(o)),a.push(encodeURIComponent(e)),(e,r)=>{var n="";return t.flipHorizontal&&(n+="-"),n+="".concat(e,"x"),t.flipVertical&&(n+="-"),n+="".concat(r),[...i,n,...a].join("/")}},u=["src","width","height","options"];function f(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}var p=[1,2,3],h=p[p.length-1],g=e=>{var{src:t,width:r,height:o,options:s={}}=e,c=(0,i.Z)(e,u),{srcSet:l,src:g}=(0,a.useMemo)((()=>{var e=d(t,s),n=p.map((t=>{var n=r*t;return"".concat(e(n,o*t)," ").concat(n,"w")}));return{src:e(r*h,o*h),srcSet:n.join(", ")}}),[o,s,t,r]);return function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?f(Object(r),!0).forEach((function(t){(0,n.Z)(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):f(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({src:g,srcSet:l,width:"".concat(r,"px"),height:"".concat(o,"px")},c)},v=r(2322),m=["src","width","height","quality"];function b(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function y(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?b(Object(r),!0).forEach((function(t){(0,n.Z)(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):b(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function O(e){var{src:t,width:r,height:n,quality:a}=e,o=(0,i.Z)(e,m),{src:c,alt:l}=g(y({src:String(t),width:Number(r),height:Number(n),options:a?{filters:{quality:a}}:void 0},o));return(0,v.jsx)(s(),y({"data-fs-image":!0,unoptimized:!0,src:c,width:r,height:n,alt:l},o))}O.displayName="Image";var w=(0,a.memo)(O)},5184:function(e,t,r){"use strict";r.d(t,{m:function(){return o}});var n=r(8460),i=r(2784),a=r(5914),o=e=>{var{products:t,title:r,page:o,pageSize:s}=e,{currency:{code:c}}=(0,a.kP)();return{sendViewItemListEvent:(0,i.useCallback)((()=>{(0,n._)({name:"view_item_list",params:{item_list_name:r,item_list_id:r,items:t.map(((e,t)=>{var{node:r}=e;return{item_id:r.isVariantOf.productGroupID,item_name:r.isVariantOf.name,item_brand:r.brand.name,item_variant:r.sku,price:r.offers.offers[0].price,index:o*s+t+1,discount:r.offers.offers[0].listPrice-r.offers.offers[0].price,currency:c,item_variant_name:r.name,product_reference_id:r.gtin}}))}})}),[c,t,r,o,s])}}},9854:function(e,t,r){"use strict";r.d(t,{w:function(){return o}});var n=r(8460),i=r(2784),a=r(5914),o=e=>{var{index:t,product:r,selectedOffer:o}=e,{slug:s}=r,{currency:{code:c}}=(0,a.kP)(),l=(0,i.useCallback)((()=>{(0,n._)({name:"select_item",params:{items:[{item_id:r.isVariantOf.productGroupID,item_name:r.isVariantOf.name,item_brand:r.brand.name,item_variant:r.sku,index:t,price:r.offers.offers[o].price,discount:r.offers.offers[o].listPrice-r.offers.offers[o].price,currency:c,item_variant_name:r.name,product_reference_id:r.gtin}]}}),(0,n._)({name:"search_select_item",params:{url:window.location.href,items:[{item_id:r.isVariantOf.productGroupID,item_variant:r.sku,index:t}]}})}),[c,r,t,o]);return{href:"/".concat(s,"/p"),onClick:l,"data-testid":"product-link"}}},4106:function(e){e.exports={"fs-product-tile-skeleton":"product-tile-skeleton_fs-product-tile-skeleton___HloN",fsProductTileSkeleton:"product-tile-skeleton_fs-product-tile-skeleton___HloN"}},2044:function(e){e.exports={"fs-tiles":"tiles_fs-tiles__N15Au",fsTiles:"tiles_fs-tiles__N15Au"}}}]);

package/.next/static/css/70ac3b88af168a4b.css

@@ -1 +0,0 @@
-.filter-skeleton_fs-filter-skeleton___kwHE{--fs-filter-skeleton-margin-top:var(--fs-spacing-1);--fs-filter-skeleton-title-max-width:30%;--fs-filter-skeleton-title-margin-bottom:var(--fs-spacing-2);--fs-filter-skeleton-content-min-height:var(--fs-spacing-8);--fs-filter-skeleton-content-margin-bottom:var(--fs-spacing-0);--fs-filter-skeleton-content-padding:var(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-0);--fs-filter-skeleton-content-border-color:var(--fs-border-color-light);--fs-filter-skeleton-content-border-width:var(--fs-border-width);--fs-filter-skeleton-content-border-radius:var(--fs-border-radius);margin-top:var(--fs-filter-skeleton-margin-top)}@media(max-width:1279px){.filter-skeleton_fs-filter-skeleton___kwHE{display:none}}.filter-skeleton_fs-filter-skeleton___kwHE [data-fs-filter-skeleton-text]{max-width:var(--fs-filter-skeleton-title-max-width);margin-bottom:var(--fs-filter-skeleton-title-margin-bottom)}.filter-skeleton_fs-filter-skeleton___kwHE [data-fs-filter-skeleton-content]{position:relative;display:flex;flex-direction:column;padding:var(--fs-filter-skeleton-content-padding);overflow:hidden;border:var(--fs-filter-skeleton-content-border-width) solid var(--fs-filter-skeleton-content-border-color);border-radius:var(--fs-filter-skeleton-content-border-radius)}.filter-skeleton_fs-filter-skeleton___kwHE [data-fs-filter-skeleton-content] [data-fs-skeleton]{min-width:100%;min-height:var(--fs-filter-skeleton-content-min-height);margin-bottom:var(--fs-filter-skeleton-content-margin-bottom)}.product-card-skeleton_fs-product-card-skeleton__fPdHb{--fs-product-card-skeleton-padding:var(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-2);--fs-product-card-skeleton-border-radius:var(--fs-border-radius);--fs-product-card-skeleton-gap:var(--fs-spacing-1);--fs-product-card-skeleton-sectioned-min-width:10rem;--fs-product-card-skeleton-bordered:var(--fs-border-width) solid var(--fs-border-color-light);position:relative;padding:var(--fs-product-card-skeleton-padding);overflow:hidden;border-radius:var(--fs-product-card-skeleton-border-radius)}.product-card-skeleton_fs-product-card-skeleton__fPdHb,.product-card-skeleton_fs-product-card-skeleton__fPdHb [data-fs-product-card-skeleton-content]{display:flex;flex-direction:column;row-gap:var(--fs-product-card-skeleton-gap)}.product-card-skeleton_fs-product-card-skeleton__fPdHb [data-fs-product-card-skeleton-image]{aspect-ratio:var(--fs-product-card-skeleton-image-aspect-ratio)}.product-card-skeleton_fs-product-card-skeleton__fPdHb [data-fs-product-card-skeleton-image] [data-fs-skeleton-wrapper],.product-card-skeleton_fs-product-card-skeleton__fPdHb [data-fs-product-card-skeleton-image] [data-fs-skeleton]{width:100%;height:100%}.product-card-skeleton_fs-product-card-skeleton__fPdHb[data-fs-product-card-skeleton-sectioned=true]{min-width:var(--fs-product-card-skeleton-sectioned-min-width)}.product-card-skeleton_fs-product-card-skeleton__fPdHb[data-fs-product-card-skeleton-bordered=true]{border:var(--fs-product-card-skeleton-bordered)}.product-grid_fs-product-grid__SF25P{--fs-product-grid-gap-mobile:var(--fs-grid-gap-0);--fs-product-grid-gap-tablet:var(--fs-product-grid-gap-mobile);--fs-product-grid-gap-desktop:var(--fs-grid-gap-2);--fs-product-grid-columns-mobile:2;--fs-product-grid-columns-tablet:4;--fs-product-grid-columns-desktop:var(--fs-product-grid-columns-tablet);display:grid;grid-template-columns:repeat(var(--fs-product-grid-columns-mobile),1fr);grid-gap:var(--fs-product-grid-gap-mobile)}@media(min-width:768px){.product-grid_fs-product-grid__SF25P{grid-template-columns:repeat(var(--fs-product-grid-columns-desktop),1fr);grid-gap:var(--fs-product-grid-gap-tablet)}.product-grid_fs-product-grid__SF25P:nth-of-type(n+2){margin-top:var(--fs-product-grid-gap-desktop)}}@media(min-width:1280px){.product-grid_fs-product-grid__SF25P{grid-gap:var(--fs-product-grid-gap-desktop)}}.product-gallery_fs-product-listing__BBpw4{--product-listing-row-height:var(--fs-spacing-6);height:100%;padding-top:0}.product-gallery_fs-product-listing__BBpw4 [data-fs-empty-state]{margin:var(--fs-spacing-3) 0}@media(min-width:1280px){.product-gallery_fs-product-listing__BBpw4{padding-top:var(--fs-spacing-5)}.product-gallery_fs-product-listing__BBpw4 [data-fs-empty-state]{margin:0 0 var(--fs-spacing-5)}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-search-term]{padding-bottom:var(--fs-spacing-6)}}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-search-term] h1{font-size:var(--fs-text-size-4)}@media(min-width:768px){.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-search-term] h1{font-size:var(--fs-text-size-5)}}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-search-term] h1 span{font-weight:var(--fs-text-weight-bold)}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-content-grid]{display:flex;flex-direction:column;height:100%;padding-right:0;padding-left:0}@media(min-width:1280px){.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-content-grid]{display:grid;grid-template-rows:var(--product-listing-row-height) auto;grid-template-columns:repeat(12,1fr);row-gap:var(--fs-spacing-0);column-gap:var(--fs-spacing-4);padding-right:var(--fs-grid-padding);padding-left:var(--fs-grid-padding)}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-filters]{position:-webkit-sticky;position:sticky;top:var(--fs-grid-gap-2);grid-row:span 2;grid-column:1/span 3;align-self:start}}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-sort]{display:flex;align-items:center;justify-content:space-between;order:1;width:100%;min-height:4.25rem;padding:var(--fs-spacing-1) var(--fs-spacing-3) var(--fs-spacing-2);background-color:var(--fs-color-body-bkg)}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-sort] [data-fs-product-listing-sort-skeleton]{min-width:14.0625rem;min-height:var(--fs-spacing-5)}@media(min-width:1280px){.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-sort]{grid-column:6/span 7;justify-content:flex-end;order:unset;min-height:auto;padding:0}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-sort] [data-fs-button],.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-sort] [data-fs-product-listing-filter-button-skeleton]{display:none}}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-results-count]{display:flex;align-items:center;justify-content:center;order:2;min-height:2.8125rem;padding:var(--fs-spacing-2) var(--fs-spacing-3);background-color:var(--fs-color-neutral-bkg)}@media(min-width:1280px){.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-results-count]{grid-column:4/span 2;justify-content:left;order:unset;min-height:auto;padding:0;background-color:unset}}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-results-count] [data-fs-product-listing-results-count-skeleton]{min-width:8.125rem}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-results]{--padding:var(--fs-spacing-1);order:3;padding:var(--padding) var(--padding) 0;background-color:var(--fs-color-neutral-bkg)}@media(min-width:1280px){.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-results]{grid-column:4/span 9;order:unset;padding:0;background-color:unset}}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-results] [data-fs-product-card]{min-width:100%}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-sponsored]{padding:var(--fs-spacing-4) var(--fs-spacing-3);margin:var(--fs-spacing-1) calc(-1*var(--padding));background-color:var(--fs-color-body-bkg)}@media(min-width:1280px){.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-sponsored]{padding:0;margin:var(--fs-spacing-6) 0}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-sponsored] [data-fs-tiles]{row-gap:0;column-gap:var(--fs-grid-gap-2)}}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-sponsored] h3{margin-bottom:var(--fs-spacing-1)}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-pagination]{display:flex;align-items:center;justify-content:center;min-height:var(--fs-spacing-13);padding:var(--fs-spacing-4);margin-right:calc(-1*var(--padding));margin-left:calc(-1*var(--padding))}@media(min-width:1280px){.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-pagination]{padding:var(--fs-spacing-1) var(--fs-spacing-2)}}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-pagination] [data-fs-button]{width:100%}@media(min-width:1280px){.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-pagination] [data-fs-button]{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-pagination=top]{margin-bottom:var(--padding)}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-pagination=bottom]{margin-top:var(--padding)}.scroll-to-top-button_fs-scroll-to-top-button__KrFt7{display:flex;justify-content:center;width:100%;padding-bottom:var(--fs-spacing-10)}@media(min-width:1280px){.scroll-to-top-button_fs-scroll-to-top-button__KrFt7{padding-bottom:var(--fs-spacing-8)}}

package/.next/static/css/cf4c6e7294227fd7.css

@@ -1 +0,0 @@
-.filter-skeleton_fs-filter-skeleton___kwHE{--fs-filter-skeleton-margin-top:var(--fs-spacing-1);--fs-filter-skeleton-title-max-width:30%;--fs-filter-skeleton-title-margin-bottom:var(--fs-spacing-2);--fs-filter-skeleton-content-min-height:var(--fs-spacing-8);--fs-filter-skeleton-content-margin-bottom:var(--fs-spacing-0);--fs-filter-skeleton-content-padding:var(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-0);--fs-filter-skeleton-content-border-color:var(--fs-border-color-light);--fs-filter-skeleton-content-border-width:var(--fs-border-width);--fs-filter-skeleton-content-border-radius:var(--fs-border-radius);margin-top:var(--fs-filter-skeleton-margin-top)}@media(max-width:1279px){.filter-skeleton_fs-filter-skeleton___kwHE{display:none}}.filter-skeleton_fs-filter-skeleton___kwHE [data-fs-filter-skeleton-text]{max-width:var(--fs-filter-skeleton-title-max-width);margin-bottom:var(--fs-filter-skeleton-title-margin-bottom)}.filter-skeleton_fs-filter-skeleton___kwHE [data-fs-filter-skeleton-content]{position:relative;display:flex;flex-direction:column;padding:var(--fs-filter-skeleton-content-padding);overflow:hidden;border:var(--fs-filter-skeleton-content-border-width) solid var(--fs-filter-skeleton-content-border-color);border-radius:var(--fs-filter-skeleton-content-border-radius)}.filter-skeleton_fs-filter-skeleton___kwHE [data-fs-filter-skeleton-content] [data-fs-skeleton]{min-width:100%;min-height:var(--fs-filter-skeleton-content-min-height);margin-bottom:var(--fs-filter-skeleton-content-margin-bottom)}.product-card-skeleton_fs-product-card-skeleton__fPdHb{--fs-product-card-skeleton-padding:var(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-2);--fs-product-card-skeleton-border-radius:var(--fs-border-radius);--fs-product-card-skeleton-gap:var(--fs-spacing-1);--fs-product-card-skeleton-sectioned-min-width:10rem;--fs-product-card-skeleton-bordered:var(--fs-border-width) solid var(--fs-border-color-light);position:relative;padding:var(--fs-product-card-skeleton-padding);overflow:hidden;border-radius:var(--fs-product-card-skeleton-border-radius)}.product-card-skeleton_fs-product-card-skeleton__fPdHb,.product-card-skeleton_fs-product-card-skeleton__fPdHb [data-fs-product-card-skeleton-content]{display:flex;flex-direction:column;row-gap:var(--fs-product-card-skeleton-gap)}.product-card-skeleton_fs-product-card-skeleton__fPdHb [data-fs-product-card-skeleton-image]{aspect-ratio:var(--fs-product-card-skeleton-image-aspect-ratio)}.product-card-skeleton_fs-product-card-skeleton__fPdHb [data-fs-product-card-skeleton-image] [data-fs-skeleton-wrapper],.product-card-skeleton_fs-product-card-skeleton__fPdHb [data-fs-product-card-skeleton-image] [data-fs-skeleton]{width:100%;height:100%}.product-card-skeleton_fs-product-card-skeleton__fPdHb[data-fs-product-card-skeleton-sectioned=true]{min-width:var(--fs-product-card-skeleton-sectioned-min-width)}.product-card-skeleton_fs-product-card-skeleton__fPdHb[data-fs-product-card-skeleton-bordered=true]{border:var(--fs-product-card-skeleton-bordered)}.product-grid_fs-product-grid__SF25P{--fs-product-grid-gap-mobile:var(--fs-grid-gap-0);--fs-product-grid-gap-tablet:var(--fs-product-grid-gap-mobile);--fs-product-grid-gap-desktop:var(--fs-grid-gap-2);--fs-product-grid-columns-mobile:2;--fs-product-grid-columns-tablet:4;--fs-product-grid-columns-desktop:var(--fs-product-grid-columns-tablet);display:grid;grid-template-columns:repeat(var(--fs-product-grid-columns-mobile),1fr);grid-gap:var(--fs-product-grid-gap-mobile)}@media(min-width:768px){.product-grid_fs-product-grid__SF25P{grid-template-columns:repeat(var(--fs-product-grid-columns-desktop),1fr);grid-gap:var(--fs-product-grid-gap-tablet)}.product-grid_fs-product-grid__SF25P:nth-of-type(n+2){margin-top:var(--fs-product-grid-gap-desktop)}}@media(min-width:1280px){.product-grid_fs-product-grid__SF25P{grid-gap:var(--fs-product-grid-gap-desktop)}}.product-gallery_fs-product-listing__BBpw4{--product-listing-row-height:var(--fs-spacing-6);height:100%;padding-top:0}.product-gallery_fs-product-listing__BBpw4 [data-fs-empty-state]{margin:var(--fs-spacing-3) 0}@media(min-width:1280px){.product-gallery_fs-product-listing__BBpw4{padding-top:var(--fs-spacing-5)}.product-gallery_fs-product-listing__BBpw4 [data-fs-empty-state]{margin:0 0 var(--fs-spacing-5)}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-search-term]{padding-bottom:var(--fs-spacing-6)}}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-search-term] h1{font-size:var(--fs-text-size-4)}@media(min-width:768px){.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-search-term] h1{font-size:var(--fs-text-size-5)}}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-search-term] h1 span{font-weight:var(--fs-text-weight-bold)}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-content-grid]{display:flex;flex-direction:column;height:100%;padding-right:0;padding-left:0}@media(min-width:1280px){.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-content-grid]{display:grid;grid-template-rows:var(--product-listing-row-height) auto;grid-template-columns:repeat(12,1fr);row-gap:var(--fs-spacing-0);column-gap:var(--fs-spacing-4);padding-right:var(--fs-grid-padding);padding-left:var(--fs-grid-padding)}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-filters]{position:-webkit-sticky;position:sticky;top:var(--fs-grid-gap-2);grid-row:span 2;grid-column:1/span 3;align-self:start}}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-sort]{display:flex;align-items:center;justify-content:space-between;order:1;width:100%;min-height:4.25rem;padding:var(--fs-spacing-1) var(--fs-spacing-3) var(--fs-spacing-2);background-color:var(--fs-color-body-bkg)}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-sort] [data-fs-product-listing-sort-skeleton]{min-width:14.0625rem;min-height:var(--fs-spacing-5)}@media(min-width:1280px){.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-sort]{grid-column:6/span 7;justify-content:flex-end;order:unset;min-height:auto;padding:0}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-sort] [data-fs-button],.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-sort] [data-fs-product-listing-filter-button-skeleton]{display:none}}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-results-count]{display:flex;align-items:center;justify-content:center;order:2;min-height:2.8125rem;padding:var(--fs-spacing-2) var(--fs-spacing-3);background-color:var(--fs-color-neutral-bkg)}@media(min-width:1280px){.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-results-count]{grid-column:4/span 2;justify-content:left;order:unset;min-height:auto;padding:0;background-color:unset}}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-results-count] [data-fs-product-listing-results-count-skeleton]{min-width:8.125rem}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-results]{--padding:var(--fs-spacing-1);order:3;padding:var(--padding) var(--padding) 0;background-color:var(--fs-color-neutral-bkg)}@media(min-width:1280px){.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-results]{grid-column:4/span 9;order:unset;padding:0;background-color:unset}}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-results] [data-fs-product-card]{min-width:100%}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-sponsored]{padding:var(--fs-spacing-4) var(--fs-spacing-3);margin:var(--fs-spacing-1) calc(-1*var(--padding));background-color:var(--fs-color-body-bkg)}@media(min-width:1280px){.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-sponsored]{padding:0;margin:var(--fs-spacing-6) 0}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-sponsored] [data-fs-tiles]{row-gap:0;column-gap:var(--fs-grid-gap-2)}}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-sponsored] h3{margin-bottom:var(--fs-spacing-1)}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-pagination]{display:flex;align-items:center;justify-content:center;min-height:var(--fs-spacing-13);padding:var(--fs-spacing-4);margin-right:calc(-1*var(--padding));margin-left:calc(-1*var(--padding))}@media(min-width:1280px){.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-pagination]{padding:var(--fs-spacing-1) var(--fs-spacing-2)}}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-pagination] [data-fs-button]{width:100%}@media(min-width:1280px){.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-pagination] [data-fs-button]{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-pagination=top]{margin-bottom:var(--padding)}.product-gallery_fs-product-listing__BBpw4 [data-fs-product-listing-pagination=bottom]{margin-top:var(--padding)}

package/src/components/product/ProductGrid/ProductGrid.stories.mdx

@@ -1,96 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-import { SearchProvider } from '@faststore/sdk'
-import Sentinel from 'src/sdk/search/Sentinel'
-import { productGridItems } from 'src/../.storybook/mocks'
-
-import { useProducts } from '../../sections/ProductGallery/usePageProducts'
-
-import ProductGrid from '.'
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-  BestPractices,
-  BestPracticesRule,
-} from 'src/../.storybook/components'
-
-<Meta
-  title="Organisms/ProductGrid"
-  component={ProductGrid}
-  argTypes={{
-    /* TODO: Enable these after items per page is fixed */
-    page: {
-      table: {
-        disable: true,
-      },
-    },
-    pageSize: {
-      table: {
-        disable: true,
-      },
-    },
-  }}
-/>
-
-export const Template = (args) => {
-  return (
-    <ProductGrid {...args} />
-  )
-}
-
-<header>
-
-# ProductGrid
-
-It's a section generally used on PLP pages to list the products available in the store.
-
-</header>
-
-## Usage
-
-`import ProductGrid from '../components/product/ProductGrid'`
-
-<Canvas isColumn>
-  <Story
-    name="default"
-    args={{
-      products: productGridItems,
-      page: 0,
-      pageSize: 4,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="default" />
-
-<TokenTable>
-  <TokenRow token="--fs-product-grid-gap-mobile" value="var(--fs-grid-gap-0)" />
-  <TokenRow
-    token="--fs-product-grid-gap-desktop"
-    value="var(--fs-grid-gap-2)"
-  />
-  <TokenDivider />
-  <TokenRow token="--fs-product-grid-columns-mobile" value="2" />
-  <TokenRow token="--fs-product-grid-columns-desktop" value="4" />
-</TokenTable>
-
----
-
-<BestPractices>
-  <BestPracticesRule
-    recommendedDescription={
-      <>
-        Respect <code>ProductCard</code> content's width considering the space
-        available on the page.
-      </>
-    }
-    discouragedDescription={
-      <>
-        Avoid using a lot of <code>ProductCards</code> on the same row, this
-        could lead to unwanted horizontal scroll.
-      </>
-    }
-  />
-</BestPractices>

package/src/components/product/ProductGrid/product-grid.module.scss

@@ -1,39 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-product-grid {
-  // --------------------------------------------------------
-  // Design Tokens for ProductGrid
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-product-grid-gap-mobile        : var(--fs-grid-gap-0);
-  --fs-product-grid-gap-tablet        : var(--fs-product-grid-gap-mobile);
-  --fs-product-grid-gap-desktop       : var(--fs-grid-gap-2);
-
-  --fs-product-grid-columns-mobile    : 2;
-  --fs-product-grid-columns-tablet    : 4;
-  --fs-product-grid-columns-desktop   : var(--fs-product-grid-columns-tablet);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  display: grid;
-  grid-template-columns: repeat(var(--fs-product-grid-columns-mobile), 1fr);
-  grid-gap: var(--fs-product-grid-gap-mobile);
-
-  @include media(">=tablet") {
-    $pagination-start-index: 2;
-
-    grid-template-columns: repeat(var(--fs-product-grid-columns-desktop), 1fr);
-    grid-gap: var(--fs-product-grid-gap-tablet);
-
-    &:nth-of-type(n + #{$pagination-start-index}) {
-      margin-top: var(--fs-product-grid-gap-desktop);
-    }
-  }
-
-  @include media(">=notebook") {
-    grid-gap: var(--fs-product-grid-gap-desktop);
-  }
-}