@faststore/core 2.1.43 → 2.1.49

package/.turbo/turbo-build.log

@@ -24,9 +24,9 @@ Route (pages)                              Size     First Load JS
 ┌ ● /                                      3.16 kB         197 kB
 ├   /_app                                  0 B            77.9 kB
 ├ ● /[...slug]                             4.06 kB         208 kB
-├   └ css/d67fbe2a613293c1.css             1.84 kB
+├   └ css/527e334fa69cf40a.css             1.85 kB
 ├ ● /[slug]/p                              10.8 kB         205 kB
-├   └ css/5972921daee792bb.css             11.3 kB
+├   └ css/b3f8dd61e5d35ef6.css             11.3 kB
 ├ ○ /404                                   1.19 kB         114 kB
 ├ ● /500                                   1.21 kB         114 kB
 ├ ● /account                               670 B           113 kB
@@ -38,9 +38,9 @@ Route (pages)                              Size     First Load JS
 + First Load JS shared by all              80.7 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-fd466221927468fd.js        23.9 kB
-  ├ chunks/pages/_app-babcc4d7b80d8f4a.js  6.38 kB
-  ├ chunks/webpack-77a6122b01094e9b.js     2.3 kB
-  └ css/208b7dd52a0981bd.css               2.8 kB
+  ├ chunks/pages/_app-9b6c4be3c7a42b65.js  6.39 kB
+  ├ chunks/webpack-34d2a614c8d380bd.js     2.3 kB
+  └ css/ebc1e9d3e686bad3.css               2.78 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
 ○  (Static)  automatically rendered as static HTML (uses no initial props)

package/cypress/integration/plp.test.js

@@ -57,7 +57,7 @@ describe('Search page Filters and Sorting options', () => {
   })
 
   it('Sort products by price_asc', () => {
-    cy.visit(pages.collection, options)
+    cy.visit(pages.collection_2, options)
     cy.waitForHydration()
 
     const priceId = '[data-fs-product-grid] [data-testid="price"]'
@@ -82,7 +82,7 @@ describe('Search page Filters and Sorting options', () => {
   })
 
   it('Sort products by price_desc', () => {
-    cy.visit(pages.collection, options)
+    cy.visit(pages.collection_2, options)
     cy.waitForHydration()
     const priceId = '[data-fs-product-grid] [data-testid="price"]'
 
@@ -178,6 +178,11 @@ describe('Infinite Scroll pagination', () => {
                 skuIdBeforeNavigate = $card.attr('data-fs-product-card-sku')
               })
               .click()
+
+            cy.get('[data-fs-product-details] [data-testid=fs-product-title]', {
+              timeout: 10000,
+            })
+              .should('exist')
               .then(() => {
                 // make sure we are on the pdp
                 cy.location('pathname').should('match', /\/p$/)

package/faststore.config.js

@@ -76,6 +76,7 @@ module.exports = {
       home: '/',
       pdp: '/apple-magic-mouse/p',
       collection: '/office',
+      collection_2: '/technology',
       collection_filtered:
         '/office/?category-1=office&marca=acer&facets=category-1%2Cmarca',
       search: '/s?q=orange',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.1.43",
+  "version": "2.1.49",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
@@ -33,7 +33,7 @@
     "@faststore/components": "^2.1.33",
     "@faststore/graphql-utils": "^2.1.33",
     "@faststore/sdk": "^2.1.33",
-    "@faststore/ui": "^2.1.33",
+    "@faststore/ui": "^2.1.49",
     "@types/react": "^18.0.14",
     "@vtex/client-cms": "^0.2.12",
     "autoprefixer": "^10.4.0",
@@ -110,5 +110,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "fcadc8fda9a08286f5e44961dbd265f748dd291d"
+  "gitHead": "a3e738ad711415decf9afe396c9e1cb49e278c77"
 }

package/src/components/sections/BannerNewsletter/section.module.scss

@@ -1,6 +1,8 @@
-.section {
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
-  @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
-  @import "@faststore/ui/src/components/organisms/BannerText/styles.scss";
-  @import "@faststore/ui/src/components/organisms/BannerNewsletter/styles.scss";
+@layer components {
+  .section {
+    @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+    @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
+    @import "@faststore/ui/src/components/organisms/BannerText/styles.scss";
+    @import "@faststore/ui/src/components/organisms/BannerNewsletter/styles.scss";
+  }
 }

package/src/components/sections/BannerText/section.module.scss

@@ -1,5 +1,7 @@
-.section {
-  @import "@faststore/ui/src/components/atoms/Button/styles";
-  @import "@faststore/ui/src/components/molecules/LinkButton/styles";
-  @import "@faststore/ui/src/components/organisms/BannerText/styles";
+@layer components {
+  .section {
+    @import "@faststore/ui/src/components/atoms/Button/styles";
+    @import "@faststore/ui/src/components/molecules/LinkButton/styles";
+    @import "@faststore/ui/src/components/organisms/BannerText/styles";
+  }
 }

package/src/components/sections/Breadcrumb/section.module.scss

@@ -1,6 +1,8 @@
-.section {
-  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Link/styles.scss";
-  @import "@faststore/ui/src/components/atoms/List/styles.scss";
-  @import "@faststore/ui/src/components/molecules/Breadcrumb/styles.scss";
+@layer components {
+  .section {
+    @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Link/styles.scss";
+    @import "@faststore/ui/src/components/atoms/List/styles.scss";
+    @import "@faststore/ui/src/components/molecules/Breadcrumb/styles.scss";
+  }
 }

package/src/components/sections/EmptyState/section.module.scss

@@ -1,5 +1,7 @@
-.section {
-  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Loader/styles.scss";
-  @import "@faststore/ui/src/components/organisms/EmptyState/styles.scss";
+@layer components {
+  .section {
+    @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Loader/styles.scss";
+    @import "@faststore/ui/src/components/organisms/EmptyState/styles.scss";
+  }
 }

package/src/components/sections/Footer/section.module.scss

@@ -1,10 +1,12 @@
-.section {
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Link/styles.scss";
-  @import "@faststore/ui/src/components/atoms/List/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Logo/styles.scss";
-  @import "@faststore/ui/src/components/molecules/Accordion/styles.scss";
-  @import "@faststore/ui/src/components/organisms/PaymentMethods/styles.scss";
-  @import "@faststore/ui/src/components/organisms/Incentives/styles.scss";
-  @import "@faststore/ui/src/components/organisms/Footer/styles.scss";
+@layer components {
+  .section {
+    @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Link/styles.scss";
+    @import "@faststore/ui/src/components/atoms/List/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Logo/styles.scss";
+    @import "@faststore/ui/src/components/molecules/Accordion/styles.scss";
+    @import "@faststore/ui/src/components/organisms/PaymentMethods/styles.scss";
+    @import "@faststore/ui/src/components/organisms/Incentives/styles.scss";
+    @import "@faststore/ui/src/components/organisms/Footer/styles.scss";
+  }
 }

package/src/components/sections/Hero/section.module.scss

@@ -1,6 +1,8 @@
-.section {
-  @import "@faststore/ui/src/components/organisms/Hero/styles.scss";
-  @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+@layer components {
+  .section {
+    @import "@faststore/ui/src/components/organisms/Hero/styles.scss";
+    @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+  }
 }

package/src/components/sections/Incentives/section.module.scss

@@ -1,7 +1,9 @@
-.section {
-  margin-top: 0;
+@layer components {
+  .section {
+    margin-top: 0;
 
-  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-  @import "@faststore/ui/src/components/atoms/List/styles.scss";
-  @import "@faststore/ui/src/components/organisms/Incentives/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+    @import "@faststore/ui/src/components/atoms/List/styles.scss";
+    @import "@faststore/ui/src/components/organisms/Incentives/styles.scss";
+  }
 }

package/src/components/sections/Navbar/section.module.scss

@@ -1,24 +1,26 @@
-.section {
-  position: sticky;
-  top: 0;
-  z-index: var(--fs-z-index-high);
+@layer components {
+  .section {
+    position: sticky;
+    top: 0;
+    z-index: var(--fs-z-index-high);
 
-  @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Input/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Link/styles.scss";
-  @import "@faststore/ui/src/components/atoms/List/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Logo/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Price/styles.scss";
-  @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
-  @import "@faststore/ui/src/components/molecules/NavbarLinks/styles.scss";
-  @import "@faststore/ui/src/components/molecules/SearchAutoComplete/styles.scss";
-  @import "@faststore/ui/src/components/molecules/SearchDropdown/styles.scss";
-  @import "@faststore/ui/src/components/molecules/SearchHistory/styles.scss";
-  @import "@faststore/ui/src/components/molecules/SearchInputField/styles.scss";
-  @import "@faststore/ui/src/components/molecules/SearchProducts/styles.scss";
-  @import "@faststore/ui/src/components/molecules/SearchTop/styles.scss";
-  @import "@faststore/ui/src/components/organisms/SearchInput/styles.scss";
-  @import "@faststore/ui/src/components/organisms/Navbar/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Input/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Link/styles.scss";
+    @import "@faststore/ui/src/components/atoms/List/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Logo/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Price/styles.scss";
+    @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
+    @import "@faststore/ui/src/components/molecules/NavbarLinks/styles.scss";
+    @import "@faststore/ui/src/components/molecules/SearchAutoComplete/styles.scss";
+    @import "@faststore/ui/src/components/molecules/SearchDropdown/styles.scss";
+    @import "@faststore/ui/src/components/molecules/SearchHistory/styles.scss";
+    @import "@faststore/ui/src/components/molecules/SearchInputField/styles.scss";
+    @import "@faststore/ui/src/components/molecules/SearchProducts/styles.scss";
+    @import "@faststore/ui/src/components/molecules/SearchTop/styles.scss";
+    @import "@faststore/ui/src/components/organisms/SearchInput/styles.scss";
+    @import "@faststore/ui/src/components/organisms/Navbar/styles.scss";
+  }
 }

package/src/components/sections/Newsletter/section.module.scss

@@ -1,10 +1,12 @@
-.section {
-  margin-bottom: 0;
+@layer components {
+  .section {
+    margin-bottom: 0;
 
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Input/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Link/styles.scss";
-  @import "@faststore/ui/src/components/molecules/InputField/styles.scss";
-  @import "@faststore/ui/src/components/organisms/Newsletter/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Input/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Link/styles.scss";
+    @import "@faststore/ui/src/components/molecules/InputField/styles.scss";
+    @import "@faststore/ui/src/components/organisms/Newsletter/styles.scss";
+  }
 }

package/src/components/sections/ProductDetails/section.module.scss

@@ -1,26 +1,28 @@
-.section {
-  margin-top: 0;
+@layer components {
+  .section {
+    margin-top: 0;
 
-  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Link/styles.scss";
-  @import "@faststore/ui/src/components/atoms/List/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Input/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Price/styles.scss";
-  @import "@faststore/ui/src/components/molecules/Accordion/styles.scss";
-  @import "@faststore/ui/src/components/molecules/Breadcrumb/styles.scss";
-  @import "@faststore/ui/src/components/molecules/BuyButton/styles.scss";
-  @import "@faststore/ui/src/components/molecules/DiscountBadge/styles.scss";
-  @import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
-  @import "@faststore/ui/src/components/molecules/InputField/styles.scss";
-  @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
-  @import "@faststore/ui/src/components/molecules/Rating/styles.scss";
-  @import "@faststore/ui/src/components/molecules/ProductTitle/styles.scss";
-  @import "@faststore/ui/src/components/molecules/QuantitySelector/styles.scss";
-  @import "@faststore/ui/src/components/molecules/SkuSelector/styles.scss";
-  @import "@faststore/ui/src/components/molecules/Table/styles.scss";
-  @import "@faststore/ui/src/components/organisms/ShippingSimulation/styles.scss";
-  @import "@faststore/ui/src/components/organisms/ImageGallery/styles.scss";
-  @import "@faststore/ui/src/components/organisms/ProductDetails/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Link/styles.scss";
+    @import "@faststore/ui/src/components/atoms/List/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Input/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Price/styles.scss";
+    @import "@faststore/ui/src/components/molecules/Accordion/styles.scss";
+    @import "@faststore/ui/src/components/molecules/Breadcrumb/styles.scss";
+    @import "@faststore/ui/src/components/molecules/BuyButton/styles.scss";
+    @import "@faststore/ui/src/components/molecules/DiscountBadge/styles.scss";
+    @import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
+    @import "@faststore/ui/src/components/molecules/InputField/styles.scss";
+    @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
+    @import "@faststore/ui/src/components/molecules/Rating/styles.scss";
+    @import "@faststore/ui/src/components/molecules/ProductTitle/styles.scss";
+    @import "@faststore/ui/src/components/molecules/QuantitySelector/styles.scss";
+    @import "@faststore/ui/src/components/molecules/SkuSelector/styles.scss";
+    @import "@faststore/ui/src/components/molecules/Table/styles.scss";
+    @import "@faststore/ui/src/components/organisms/ShippingSimulation/styles.scss";
+    @import "@faststore/ui/src/components/organisms/ImageGallery/styles.scss";
+    @import "@faststore/ui/src/components/organisms/ProductDetails/styles.scss";
+  }
 }

package/src/components/sections/ProductGallery/section.module.scss

@@ -1,39 +1,41 @@
-.section {
-  @include media("<notebook") {
-    margin-top: 0;
-    &:last-child { margin-bottom: 0; }
+@layer components {
+  .section {
+    @include media("<notebook") {
+      margin-top: 0;
+      &:last-child { margin-bottom: 0; }
 
-    @include section-divisor(bottom, 0);
-  }
+      @include section-divisor(bottom, 0);
+    }
 
-  @include media(">=notebook") {
-    &:not(:last-child) {
-      @include section-divisor(bottom);
+    @include media(">=notebook") {
+      &:not(:last-child) {
+        @include section-divisor(bottom);
+      }
     }
-  }
 
-  @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Checkbox/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Input/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Link/styles.scss";
-  @import "@faststore/ui/src/components/atoms/List/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Price/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Select/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Skeleton/styles";
-  @import "@faststore/ui/src/components/atoms/Slider/styles.scss";
-  @import "@faststore/ui/src/components/molecules/Accordion/styles.scss";
-  @import "@faststore/ui/src/components/molecules/DiscountBadge/styles.scss";
-  @import "@faststore/ui/src/components/molecules/InputField/styles.scss";
-  @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
-  @import "@faststore/ui/src/components/molecules/ProductCard/styles.scss";
-  @import "@faststore/ui/src/components/molecules/ProductCardSkeleton/styles";
-  @import "@faststore/ui/src/components/molecules/SelectField/styles.scss";
-  @import "@faststore/ui/src/components/organisms/EmptyState/styles.scss";
-  @import "@faststore/ui/src/components/organisms/Filter/styles.scss";
-  @import "@faststore/ui/src/components/organisms/FilterSkeleton/styles.scss";
-  @import "@faststore/ui/src/components/organisms/PriceRange/styles.scss";
-  @import "@faststore/ui/src/components/organisms/ProductGrid/styles.scss";
-  @import "@faststore/ui/src/components/organisms/ProductGallery/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Checkbox/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Input/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Link/styles.scss";
+    @import "@faststore/ui/src/components/atoms/List/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Price/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Select/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Skeleton/styles";
+    @import "@faststore/ui/src/components/atoms/Slider/styles.scss";
+    @import "@faststore/ui/src/components/molecules/Accordion/styles.scss";
+    @import "@faststore/ui/src/components/molecules/DiscountBadge/styles.scss";
+    @import "@faststore/ui/src/components/molecules/InputField/styles.scss";
+    @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
+    @import "@faststore/ui/src/components/molecules/ProductCard/styles.scss";
+    @import "@faststore/ui/src/components/molecules/ProductCardSkeleton/styles";
+    @import "@faststore/ui/src/components/molecules/SelectField/styles.scss";
+    @import "@faststore/ui/src/components/organisms/EmptyState/styles.scss";
+    @import "@faststore/ui/src/components/organisms/Filter/styles.scss";
+    @import "@faststore/ui/src/components/organisms/FilterSkeleton/styles.scss";
+    @import "@faststore/ui/src/components/organisms/PriceRange/styles.scss";
+    @import "@faststore/ui/src/components/organisms/ProductGrid/styles.scss";
+    @import "@faststore/ui/src/components/organisms/ProductGallery/styles.scss";
+  }
 }

package/src/components/sections/ProductShelf/section.module.scss

@@ -1,39 +1,41 @@
-.section {
+@layer components {
+  .section {
 
-  [data-fs-content="product-shelf"] { @include layout-content-full; }
+    [data-fs-content="product-shelf"] { @include layout-content-full; }
 
-  [data-fs-product-shelf-skeleton] {
-    --fs-carousel-item-width-tablet    : 14.2rem;
-    --fs-carousel-item-margin-right    : var(--fs-spacing-3);
+    [data-fs-product-shelf-skeleton] {
+      --fs-carousel-item-width-tablet    : 14.2rem;
+      --fs-carousel-item-margin-right    : var(--fs-spacing-3);
 
-    padding-bottom: var(--fs-spacing-5);
+      padding-bottom: var(--fs-spacing-5);
 
-    [data-fs-product-shelf-items] { @include layout-content; }
+      [data-fs-product-shelf-items] { @include layout-content; }
 
-    @include media("<tablet") {
-      [data-fs-product-shelf-item] {
-        &:not(:last-of-type) {
-          margin-right: var(--fs-carousel-item-margin-right);
+      @include media("<tablet") {
+        [data-fs-product-shelf-item] {
+          &:not(:last-of-type) {
+            margin-right: var(--fs-carousel-item-margin-right);
+          }
         }
-      }
 
-      [data-fs-product-card-skeleton] {
-        width: var(--fs-carousel-item-width-tablet);
+        [data-fs-product-card-skeleton] {
+          width: var(--fs-carousel-item-width-tablet);
+        }
       }
     }
-  }
 
-  @import "@faststore/ui/src/components/atoms/Badge/styles";
-  @import "@faststore/ui/src/components/atoms/Button/styles";
-  @import "@faststore/ui/src/components/atoms/Icon/styles";
-  @import "@faststore/ui/src/components/atoms/Link/styles";
-  @import "@faststore/ui/src/components/atoms/Price/styles";
-  @import "@faststore/ui/src/components/atoms/SROnly/styles";
-  @import "@faststore/ui/src/components/atoms/Skeleton/styles";
-  @import "@faststore/ui/src/components/molecules/Carousel/styles";
-  @import "@faststore/ui/src/components/molecules/DiscountBadge/styles";
-  @import "@faststore/ui/src/components/molecules/Rating/styles";
-  @import "@faststore/ui/src/components/molecules/ProductCard/styles";
-  @import "@faststore/ui/src/components/molecules/ProductCardSkeleton/styles";
-  @import "@faststore/ui/src/components/organisms/ProductShelf/styles";
+    @import "@faststore/ui/src/components/atoms/Badge/styles";
+    @import "@faststore/ui/src/components/atoms/Button/styles";
+    @import "@faststore/ui/src/components/atoms/Icon/styles";
+    @import "@faststore/ui/src/components/atoms/Link/styles";
+    @import "@faststore/ui/src/components/atoms/Price/styles";
+    @import "@faststore/ui/src/components/atoms/SROnly/styles";
+    @import "@faststore/ui/src/components/atoms/Skeleton/styles";
+    @import "@faststore/ui/src/components/molecules/Carousel/styles";
+    @import "@faststore/ui/src/components/molecules/DiscountBadge/styles";
+    @import "@faststore/ui/src/components/molecules/Rating/styles";
+    @import "@faststore/ui/src/components/molecules/ProductCard/styles";
+    @import "@faststore/ui/src/components/molecules/ProductCardSkeleton/styles";
+    @import "@faststore/ui/src/components/organisms/ProductShelf/styles";
+  }
 }

package/src/components/sections/ProductTiles/section.module.scss

@@ -1,14 +1,16 @@
-.section {
-  @import "@faststore/ui/src/components/atoms/Badge/styles";
-  @import "@faststore/ui/src/components/atoms/Button/styles";
-  @import "@faststore/ui/src/components/atoms/Icon/styles";
-  @import "@faststore/ui/src/components/atoms/Link/styles";
-  @import "@faststore/ui/src/components/atoms/Price/styles";
-  @import "@faststore/ui/src/components/atoms/Skeleton/styles";
-  @import "@faststore/ui/src/components/atoms/SROnly/styles";
-  @import "@faststore/ui/src/components/molecules/DiscountBadge/styles";
-  @import "@faststore/ui/src/components/molecules/Rating/styles";
-  @import "@faststore/ui/src/components/molecules/ProductTile/styles";
-  @import "@faststore/ui/src/components/molecules/ProductCard/styles";
-  @import "@faststore/ui/src/components/organisms/Tiles/styles";
+@layer components {
+  .section {
+    @import "@faststore/ui/src/components/atoms/Badge/styles";
+    @import "@faststore/ui/src/components/atoms/Button/styles";
+    @import "@faststore/ui/src/components/atoms/Icon/styles";
+    @import "@faststore/ui/src/components/atoms/Link/styles";
+    @import "@faststore/ui/src/components/atoms/Price/styles";
+    @import "@faststore/ui/src/components/atoms/Skeleton/styles";
+    @import "@faststore/ui/src/components/atoms/SROnly/styles";
+    @import "@faststore/ui/src/components/molecules/DiscountBadge/styles";
+    @import "@faststore/ui/src/components/molecules/Rating/styles";
+    @import "@faststore/ui/src/components/molecules/ProductTile/styles";
+    @import "@faststore/ui/src/components/molecules/ProductCard/styles";
+    @import "@faststore/ui/src/components/organisms/Tiles/styles";
+  }
 }

package/src/components/sections/RegionBar/section.module.scss

@@ -1,5 +1,7 @@
-.section {
-  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
-  @import "@faststore/ui/src/components/molecules/RegionBar/styles.scss";
+@layer components {
+  .section {
+    @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+    @import "@faststore/ui/src/components/molecules/RegionBar/styles.scss";
+  }
 }

package/src/components/sections/ScrollToTopButton/section.module.scss

@@ -1,8 +1,10 @@
-.section {
-  display: flex;
-  justify-content: center;
-  padding-bottom: var(--fs-spacing-8);
+@layer components {
+  .section {
+    display: flex;
+    justify-content: center;
+    padding-bottom: var(--fs-spacing-8);
 
-  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+  }
 }

package/src/components/sections/Section/section.scss

@@ -1,15 +1,9 @@
-.section {
-  width: 100%;
+@layer components {
+  .section {
+    width: 100%;
 
-  .text__title-section {
-    margin-bottom: var(--fs-spacing-3);
+    .text__title-section {
+      margin-bottom: var(--fs-spacing-3);
+    }
   }
 }
-
-//  TODO: Consider removing this and use the divisor mixins
-.section__divisor {
-  padding-top: var(--fs-spacing-5);
-  border-top: var(--fs-border-width) solid var(--fs-border-color-light);
-
-  @include media(">=notebook") { padding-top: var(--fs-spacing-8); }
-}

package/src/styles/global/components.scss

@@ -1,3 +1,6 @@
+/* establish a layer order up-front, FS UI base styles has the lowest priority */
+@layer base, components, theme;
+
 // Sections
 @import "@faststore/ui/src/components/atoms/Overlay/styles.scss";
 @import "@faststore/ui/src/components/atoms/SROnly/styles.scss";