@faststore/core 2.2.14 → 2.2.16

package/.turbo/turbo-build.log

@@ -1,7 +1,7 @@
 $ yarn partytown & yarn generate && next build
+$ faststore generate-graphql -c
 $ partytown copylib ./public/~partytown
 Partytown lib copied to: /home/runner/work/faststore/faststore/packages/core/public/~partytown
-$ faststore generate-graphql -c
 success - GraphQL schema, types, and optimizations successfully generated 🎉
 warn  - You have enabled experimental feature (scrollRestoration) in next.config.js.
 warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
@@ -23,8 +23,8 @@ warn - AlertSectionIcon not found. Add a new component for this section or remov
 info  - Generating static pages (1/7)
 warn - AlertSectionIcon not found. Add a new component for this section or remove it from the CMS
 warn - AlertSectionIcon not found. Add a new component for this section or remove it from the CMS
-info  - Generating static pages (3/7)
 warn - AlertSectionIcon not found. Add a new component for this section or remove it from the CMS
+info  - Generating static pages (3/7)
 warn - AlertSectionIcon not found. Add a new component for this section or remove it from the CMS
 info  - Generating static pages (5/7)
 warn - AlertSectionIcon not found. Add a new component for this section or remove it from the CMS
@@ -40,20 +40,20 @@ Route (pages)                              Size     First Load JS
 ├ ● /[slug]/p                              10.9 kB         135 kB
 ├   └ css/d7bbfbd552f407e9.css             11.3 kB
 ├ ○ /404                                   1.19 kB         111 kB
-├ ● /500                                   1.2 kB          111 kB
-├ ● /account                               670 B           110 kB
+├ ● /500                                   1.21 kB         111 kB
+├ ● /account                               669 B           111 kB
 ├ λ /api/graphql                           0 B            78.6 kB
 ├ λ /api/health/live                       0 B            78.6 kB
 ├ λ /api/health/ready                      0 B            78.6 kB
 ├ λ /api/preview                           0 B            78.6 kB
-├ ● /checkout                              657 B           110 kB
+├ ● /checkout                              657 B           111 kB
 ├ ● /login                                 1.14 kB         111 kB
 └ ● /s                                     4.57 kB         125 kB
 + First Load JS shared by all              81.7 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-e4e873ee741162eb.js        24.1 kB
   ├ chunks/pages/_app-48d56037a2534a44.js  6.99 kB
-  ├ chunks/webpack-66a77a46f9162613.js     2.25 kB
+  ├ chunks/webpack-4ccaf6613cbd7224.js     2.25 kB
   └ css/5d1f64b61ea581f4.css               3.06 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/.turbo/turbo-test.log

@@ -1,25 +1,25 @@
 $ tsdx test
 ts-jest[versions] (WARN) Version 29.1.0 of jest installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=25.0.0 <26.0.0). Please do not report issues in ts-jest if you are using unsupported versions.
 ts-jest[versions] (WARN) Version 4.9.4 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=3.4.0 <4.0.0). Please do not report issues in ts-jest if you are using unsupported versions.
-PASS test/server/index.test.ts (11.482s)
+PASS test/server/index.test.ts (6.392s)
   FastStore GraphQL Layer
     @faststore/api
-      ✓ should return a valid GraphQL schema (9ms)
-      ✓ should return a valid GraphQL schema contain all expected types (20ms)
+      ✓ should return a valid GraphQL schema (5ms)
+      ✓ should return a valid GraphQL schema contain all expected types (8ms)
       ✓ should return a valid GraphQL schema contain all expected queries (1ms)
-      ✓ should return a valid GraphQL schema contain all expected mutations (1ms)
+      ✓ should return a valid GraphQL schema contain all expected mutations
     VTEX API Extension
-      ✓ getTypeDefsFromFolder function should return an Array (9ms)
+      ✓ getTypeDefsFromFolder function should return an Array (6ms)
     Third Party API Extension
-      ✓ getTypeDefsFromFolder function should return an Array (7ms)
+      ✓ getTypeDefsFromFolder function should return an Array (5ms)
     Final Schema after merging
-      ✓ should return a valid merged GraphQL schema (42ms)
+      ✓ should return a valid merged GraphQL schema (27ms)
     Envelop
-      ✓ should exist with its plugins (40ms)
-      ✓ should handle options and execute (439ms)
+      ✓ should exist with its plugins (26ms)
+      ✓ should handle options and execute (499ms)
 
 Test Suites: 1 passed, 1 total
 Tests:       9 passed, 9 total
 Snapshots:   0 total
-Time:        12.618s
+Time:        6.814s
 Ran all test suites.

package/index.ts

@@ -17,3 +17,4 @@ export type {
 export { useProductsQuery } from './src/sdk/product/useProductsQuery'
 
 export * from './src/typings/overrides'
+export { getOverriddenSection } from './src/sdk/overrides/getOverriddenSection'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.2.14",
+  "version": "2.2.16",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "exports": {
@@ -38,11 +38,11 @@
     "@envelop/graphql-jit": "^1.1.1",
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
-    "@faststore/api": "^2.2.0",
-    "@faststore/components": "^2.2.13",
-    "@faststore/graphql-utils": "^2.2.0",
-    "@faststore/sdk": "^2.2.0",
-    "@faststore/ui": "^2.2.13",
+    "@faststore/api": "^2.2.16",
+    "@faststore/components": "^2.2.16",
+    "@faststore/graphql-utils": "^2.2.16",
+    "@faststore/sdk": "^2.2.16",
+    "@faststore/ui": "^2.2.16",
     "@graphql-codegen/cli": "^3.3.1",
     "@graphql-codegen/typescript": "^3.0.4",
     "@graphql-codegen/typescript-operations": "^3.0.4",
@@ -80,8 +80,8 @@
   "devDependencies": {
     "@cypress/code-coverage": "^3.12.1",
     "@envelop/testing": "^6.0.0",
-    "@faststore/cli": "^2.2.12",
-    "@faststore/eslint-config": "^2.2.0",
+    "@faststore/cli": "^2.2.16",
+    "@faststore/eslint-config": "^2.2.16",
     "@faststore/lighthouse": "^1.12.32",
     "@lhci/cli": "^0.9.0",
     "@storybook/addon-a11y": "^6.5.9",
@@ -129,5 +129,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "7a4cb8aa2f45be7ffa0cee67f247b1d781ee73c2"
+  "gitHead": "4ecdc351834e7d73981508a3b22e3fc04cb19b2c"
 }

package/src/components/cart/CartSidebar/section.module.scss

@@ -1,18 +1,20 @@
-.section {
-  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Overlay/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/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/molecules/Alert/styles.scss";
-  @import "@faststore/ui/src/components/molecules/Modal/styles.scss";
-  @import "@faststore/ui/src/components/molecules/CartItem/styles.scss";
-  @import "@faststore/ui/src/components/molecules/Gift/styles.scss";
-  @import "@faststore/ui/src/components/molecules/QuantitySelector/styles.scss";
-  @import "@faststore/ui/src/components/molecules/OrderSummary/styles.scss";
-  @import "@faststore/ui/src/components/organisms/EmptyState/styles.scss";
-  @import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
-  @import "@faststore/ui/src/components/organisms/CartSidebar/styles.scss";
+@layer components {
+  .section {
+    @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Overlay/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/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/molecules/Alert/styles.scss";
+    @import "@faststore/ui/src/components/molecules/Modal/styles.scss";
+    @import "@faststore/ui/src/components/molecules/CartItem/styles.scss";
+    @import "@faststore/ui/src/components/molecules/Gift/styles.scss";
+    @import "@faststore/ui/src/components/molecules/QuantitySelector/styles.scss";
+    @import "@faststore/ui/src/components/molecules/OrderSummary/styles.scss";
+    @import "@faststore/ui/src/components/organisms/EmptyState/styles.scss";
+    @import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
+    @import "@faststore/ui/src/components/organisms/CartSidebar/styles.scss";
+  }
 }

package/src/components/cms/GlobalSections.tsx

@@ -7,7 +7,7 @@ import { PageContentType, getPage } from 'src/server/cms'
 import Toast from 'src/components/common/Toast'
 import RenderSections from './RenderSections'
 
-import Alert from 'src/components/sections/Alert'
+import { OverriddenDefaultAlert as Alert } from 'src/components/sections/Alert/OverriddenDefaultAlert'
 import Footer from 'src/components/sections/Footer'
 import Navbar from 'src/components/sections/Navbar'
 import RegionBar from 'src/components/sections/RegionBar'

package/src/components/common/Alert/Alert.tsx

@@ -7,7 +7,7 @@ import { mark } from 'src/sdk/tests/mark'
 import Section from 'src/components/sections/Section/Section'
 import styles from './section.module.scss'
 
-import { Alert as AlertWrapper } from 'src/components/sections/Alert/Overrides'
+import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 
 export interface AlertProps extends UIAlertProps {
   /**
@@ -18,11 +18,13 @@ export interface AlertProps extends UIAlertProps {
    */
   content?: ReactNode
 }
+
 function Alert({
   content,
   children,
   ...otherProps
 }: PropsWithChildren<AlertProps>) {
+  const { Alert: AlertWrapper } = useOverrideComponents<'Alert'>()
   const [displayAlert, setDisplayAlert] = useState(true)
 
   const onAlertClose = useCallback(

package/src/components/common/Alert/section.module.scss

@@ -1,8 +1,10 @@
-.section {
-  [data-fs-content="alert"] { @include layout-content-full; }
+@layer components {
+  .section {
+    [data-fs-content="alert"] { @include layout-content-full; }
 
-  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Link/styles.scss";
-  @import "@faststore/ui/src/components/molecules/Alert/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Link/styles.scss";
+    @import "@faststore/ui/src/components/molecules/Alert/styles.scss";
+  }
 }

package/src/components/common/Toast/section.module.scss

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

package/src/components/navigation/NavbarSlider/section.module.scss

@@ -1,12 +1,14 @@
-.section {
-  @import "@faststore/ui/src/components/atoms/Button/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/Logo/styles.scss";
-  @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
-  @import "@faststore/ui/src/components/molecules/Modal/styles.scss";
-  @import "@faststore/ui/src/components/molecules/NavbarLinks/styles.scss";
-  @import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
-  @import "@faststore/ui/src/components/organisms/NavbarSlider/styles.scss";
+@layer components {
+  .section {
+    @import "@faststore/ui/src/components/atoms/Button/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/Logo/styles.scss";
+    @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
+    @import "@faststore/ui/src/components/molecules/Modal/styles.scss";
+    @import "@faststore/ui/src/components/molecules/NavbarLinks/styles.scss";
+    @import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
+    @import "@faststore/ui/src/components/organisms/NavbarSlider/styles.scss";
+  }
 }

package/src/components/sections/Alert/Alert.tsx

@@ -1,10 +1,7 @@
 import { ReactNode } from 'react'
 
 import CommonAlert from 'src/components/common/Alert'
-import {
-  Alert as AlertWrapper,
-  Icon,
-} from 'src/components/sections/Alert/Overrides'
+import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 
 export interface AlertProps {
   icon: string
@@ -18,26 +15,20 @@ export interface AlertProps {
 }
 
 // TODO: Change actionPath and actionLabel with Link
-function Alert({
-  icon = Icon.props.name,
-  content,
-  link: {
-    text = AlertWrapper.props.link?.children,
-    to = AlertWrapper.props.link?.href,
-  },
-  dismissible = AlertWrapper.props.dismissible,
-}: AlertProps) {
+function Alert({ icon, content, link: { text, to }, dismissible }: AlertProps) {
+  const { Alert: AlertWrapper, Icon } = useOverrideComponents<'Alert'>()
+
   return (
     <CommonAlert
-      icon={<Icon.Component {...Icon.props} name={icon} />}
+      icon={<Icon.Component {...Icon.props} name={icon ?? Icon.props.name} />}
       {...AlertWrapper.props}
       link={{
         ...(AlertWrapper.props.link ?? {}),
-        children: text,
-        href: to,
+        children: text ?? AlertWrapper.props.link?.children,
+        href: to ?? AlertWrapper.props.link?.href,
         target: AlertWrapper.props.link?.target ?? '_self',
       }}
-      dismissible={dismissible}
+      dismissible={dismissible ?? AlertWrapper.props.dismissible}
     >
       {content}
     </CommonAlert>

package/src/components/sections/Alert/DefaultComponents.ts

@@ -0,0 +1,6 @@
+import { Alert as UIAlert, Icon as UIIcon } from '@faststore/ui'
+
+export const AlertDefaultComponents = {
+  Alert: UIAlert,
+  Icon: UIIcon,
+} as const

package/src/components/sections/Alert/OverriddenDefaultAlert.ts

@@ -0,0 +1,12 @@
+import { override } from 'src/customizations/src/components/overrides/Alert'
+import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
+import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
+
+/**
+ * This component exists to support overrides 1.0
+ *
+ * This allows users to override the default Alert section present in the Headless CMS
+ */
+export const OverriddenDefaultAlert = getOverriddenSection(
+  override as SectionOverrideDefinition<'Alert'>
+)

package/src/components/sections/BannerText/Overrides.tsx

@@ -3,16 +3,16 @@ import {
   BannerTextContent as UIBannerTextContent,
 } from '@faststore/ui'
 
-import { getSectionOverrides } from 'src/utils/overrides'
+import { getSectionOverrides } from 'src/sdk/overrides/overrides'
 import { override } from 'src/customizations/src/components/overrides/BannerText'
-import type { BannerTextOverrideDefinition } from 'src/typings/overrides'
+import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
 
 const { BannerText, BannerTextContent } = getSectionOverrides(
   {
     BannerText: UIBannerText,
     BannerTextContent: UIBannerTextContent,
   },
-  override as BannerTextOverrideDefinition
+  override as SectionOverrideDefinition<'BannerText'>
 )
 
 export { BannerText, BannerTextContent }

package/src/components/sections/Breadcrumb/Overrides.tsx

@@ -1,15 +1,15 @@
 import { Breadcrumb as UIBreadcrumb, Icon as UIIcon } from '@faststore/ui'
 
-import { getSectionOverrides } from 'src/utils/overrides'
+import { getSectionOverrides } from 'src/sdk/overrides/overrides'
 import { override } from 'src/customizations/src/components/overrides/Breadcrumb'
-import type { BreadcrumbOverrideDefinition } from 'src/typings/overrides'
+import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
 
 const { Breadcrumb, Icon } = getSectionOverrides(
   {
     Breadcrumb: UIBreadcrumb,
     Icon: UIIcon,
   },
-  override as BreadcrumbOverrideDefinition
+  override as SectionOverrideDefinition<'Breadcrumb'>
 )
 
 export { Breadcrumb, Icon }

package/src/components/sections/EmptyState/Overrides.tsx

@@ -1,14 +1,14 @@
 import { EmptyState as UIEmptyState } from '@faststore/ui'
 
-import { getSectionOverrides } from 'src/utils/overrides'
+import { getSectionOverrides } from 'src/sdk/overrides/overrides'
 import { override } from 'src/customizations/src/components/overrides/EmptyState'
-import type { EmptyStateOverrideDefinition } from 'src/typings/overrides'
+import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
 
 const { EmptyState } = getSectionOverrides(
   {
     EmptyState: UIEmptyState,
   },
-  override as EmptyStateOverrideDefinition
+  override as SectionOverrideDefinition<'EmptyState'>
 )
 
 export { EmptyState }

package/src/components/sections/Hero/Overrides.tsx

@@ -4,9 +4,9 @@ import {
   HeroHeader as UIHeroHeader,
 } from '@faststore/ui'
 
-import { getSectionOverrides } from 'src/utils/overrides'
+import { getSectionOverrides } from 'src/sdk/overrides/overrides'
 import { override } from 'src/customizations/src/components/overrides/Hero'
-import type { HeroOverrideDefinition } from 'src/typings/overrides'
+import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
 
 const { Hero, HeroImage, HeroHeader } = getSectionOverrides(
   {
@@ -14,7 +14,7 @@ const { Hero, HeroImage, HeroHeader } = getSectionOverrides(
     HeroImage: UIHeroImage,
     HeroHeader: UIHeroHeader,
   },
-  override as HeroOverrideDefinition
+  override as SectionOverrideDefinition<'Hero'>
 )
 
 export { Hero, HeroImage, HeroHeader }

package/src/components/sections/Navbar/Overrides.tsx

@@ -12,9 +12,9 @@ import {
   IconButton as UIIconButton,
 } from '@faststore/ui'
 
-import { getSectionOverrides } from 'src/utils/overrides'
+import { getSectionOverrides } from 'src/sdk/overrides/overrides'
 import { override } from 'src/customizations/src/components/overrides/Navbar'
-import type { NavbarOverrideDefinition } from 'src/typings/overrides'
+import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
 
 const {
   Navbar,
@@ -42,7 +42,7 @@ const {
     NavbarButtons: UINavbarButtons,
     IconButton: UIIconButton,
   },
-  override as NavbarOverrideDefinition
+  override as SectionOverrideDefinition<'Navbar'>
 )
 
 export {

package/src/components/sections/Newsletter/Overrides.tsx

@@ -5,9 +5,9 @@ import {
 } from '@faststore/ui'
 import { NewsletterAddendum } from 'src/components/ui/Newsletter/NewsletterAddendum'
 
-import { getSectionOverrides } from 'src/utils/overrides'
+import { getSectionOverrides } from 'src/sdk/overrides/overrides'
 import { override } from 'src/customizations/src/components/overrides/Newsletter'
-import type { NewsletterOverrideDefinition } from 'src/typings/overrides'
+import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
 
 const {
   ToastIconSuccess,
@@ -27,7 +27,7 @@ const {
     Button: UIButton,
     __experimentalNewsletterAddendum: NewsletterAddendum,
   },
-  override as NewsletterOverrideDefinition
+  override as SectionOverrideDefinition<'Newsletter'>
 )
 
 export {

package/src/components/sections/ProductDetails/Overrides.tsx

@@ -16,9 +16,9 @@ import LocalShippingSimulation from 'src/components/ui/ShippingSimulation/Shippi
 import { Image } from 'src/components/ui/Image'
 import LocalNotAvailableButton from 'src/components/product/NotAvailableButton'
 
-import { getSectionOverrides } from 'src/utils/overrides'
+import { getSectionOverrides } from 'src/sdk/overrides/overrides'
 import { override } from 'src/customizations/src/components/overrides/ProductDetails'
-import type { ProductDetailsOverrideDefinition } from 'src/typings/overrides'
+import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
 
 const {
   ProductTitle,
@@ -52,7 +52,7 @@ const {
     __experimentalShippingSimulation: LocalShippingSimulation,
     __experimentalNotAvailableButton: LocalNotAvailableButton,
   },
-  override as ProductDetailsOverrideDefinition
+  override as SectionOverrideDefinition<'ProductDetails'>
 )
 
 export {

package/src/components/sections/ProductGallery/Overrides.tsx

@@ -13,9 +13,9 @@ const FilterSlider = lazy(
   () => import('src/components/search/Filter/FilterSlider')
 )
 
-import { getSectionOverrides } from 'src/utils/overrides'
+import { getSectionOverrides } from 'src/sdk/overrides/overrides'
 import { override } from 'src/customizations/src/components/overrides/ProductGallery'
-import type { ProductGalleryOverrideDefinition } from 'src/typings/overrides'
+import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
 
 const {
   MobileFilterButton,
@@ -43,7 +43,7 @@ const {
     __experimentalFilterSlider: FilterSlider,
     __experimentalProductCard: ProductCard,
   },
-  override as ProductGalleryOverrideDefinition
+  override as SectionOverrideDefinition<'ProductGallery'>
 )
 
 export {

package/src/components/sections/ProductShelf/Overrides.tsx

@@ -3,9 +3,9 @@ import { ProductShelf as UIProductShelf } from '@faststore/ui'
 import ProductCard from 'src/components/product/ProductCard'
 import Carousel from 'src/components/ui/Carousel'
 
-import { getSectionOverrides } from 'src/utils/overrides'
+import { getSectionOverrides } from 'src/sdk/overrides/overrides'
 import { override } from 'src/customizations/src/components/overrides/ProductShelf'
-import type { ProductShelfOverrideDefinition } from 'src/typings/overrides'
+import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
 
 const { ProductShelf, __experimentalCarousel, __experimentalProductCard } =
   getSectionOverrides(
@@ -14,7 +14,7 @@ const { ProductShelf, __experimentalCarousel, __experimentalProductCard } =
       __experimentalCarousel: Carousel,
       __experimentalProductCard: ProductCard,
     },
-    override as ProductShelfOverrideDefinition
+    override as SectionOverrideDefinition<'ProductShelf'>
   )
 
 export { ProductShelf, __experimentalCarousel, __experimentalProductCard }

package/src/components/sections/RegionBar/Overrides.tsx

@@ -1,8 +1,8 @@
 import { RegionBar as UIRegionBar, Icon as UIIcon } from '@faststore/ui'
 
-import { getSectionOverrides } from 'src/utils/overrides'
+import { getSectionOverrides } from 'src/sdk/overrides/overrides'
 import { override } from 'src/customizations/src/components/overrides/RegionBar'
-import type { RegionBarOverrideDefinition } from 'src/typings/overrides'
+import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
 
 const { RegionBar, LocationIcon, ButtonIcon } = getSectionOverrides(
   {
@@ -10,7 +10,7 @@ const { RegionBar, LocationIcon, ButtonIcon } = getSectionOverrides(
     LocationIcon: UIIcon,
     ButtonIcon: UIIcon,
   },
-  override as RegionBarOverrideDefinition
+  override as SectionOverrideDefinition<'RegionBar'>
 )
 
 export { RegionBar, LocationIcon, ButtonIcon }

package/src/components/sections/Section/Section.tsx

@@ -1,6 +1,8 @@
 import { forwardRef } from 'react'
 import type { DetailedHTMLProps, HTMLAttributes } from 'react'
 
+import { useOverrideClassName } from 'src/sdk/overrides/OverrideContext'
+
 type BaseProps = DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>
 
 type SectionProps = BaseProps & {
@@ -11,10 +13,15 @@ const Section = forwardRef<HTMLDivElement, SectionProps>(function Section(
   { as, className = '', ...otherProps },
   ref
 ) {
+  const overrideClassName = useOverrideClassName() ?? ''
   const Component = as ?? 'section'
 
   return (
-    <Component ref={ref} className={`section ${className}`} {...otherProps} />
+    <Component
+      ref={ref}
+      className={`section ${className} ${overrideClassName}`.trim()}
+      {...otherProps}
+    />
   )
 })
 

package/src/sdk/overrides/OverrideContext.tsx

@@ -0,0 +1,27 @@
+import { createContext, useContext } from 'react'
+
+import type { OverriddenComponents } from '../../typings/overridesDefinition'
+import type { SectionsOverrides } from '../../typings/overrides'
+
+type OverrideContextType<
+  SectionName extends keyof SectionsOverrides = keyof SectionsOverrides
+> = {
+  className?: string
+  components: OverriddenComponents<SectionName>
+}
+
+const OverrideContext = createContext<OverrideContextType>(null)
+
+export const OverrideProvider = OverrideContext.Provider
+
+export const useOverrideContext = <
+  SectionName extends keyof SectionsOverrides = keyof SectionsOverrides
+>() => useContext(OverrideContext) as OverrideContextType<SectionName>
+
+export const useOverrideComponents = <
+  SectionName extends keyof SectionsOverrides = keyof SectionsOverrides
+>() =>
+  useContext(OverrideContext)
+    .components as OverrideContextType<SectionName>['components']
+
+export const useOverrideClassName = () => useContext(OverrideContext)?.className