@faststore/core 2.2.70 → 2.2.71

package/.turbo/turbo-build.log

@@ -1,7 +1,7 @@
 $ yarn partytown & yarn generate && next build
 $ partytown copylib ./public/~partytown
-$ faststore generate-graphql -c
 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.
@@ -38,28 +38,28 @@ info  - Generating static pages (7/7)
 info  - Finalizing page optimization...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      2.36 kB         142 kB
-├   └ css/ecdecb8d639a8311.css             5.48 kB
-├   /_app                                  0 B            83.7 kB
-├ ● /[...slug]                             4.43 kB         144 kB
-├   └ css/0c844be3b8585e70.css             5.9 kB
-├ ● /[slug]/p                              1.74 kB         141 kB
-├   └ css/a6bcc59f42b42f36.css             2.39 kB
-├ ○ /404                                   1.03 kB         141 kB
-├ ● /500                                   1.05 kB         141 kB
-├ ● /account                               674 B           140 kB
-├ λ /api/graphql                           0 B            83.7 kB
-├ λ /api/health/live                       0 B            83.7 kB
-├ λ /api/health/ready                      0 B            83.7 kB
-├ λ /api/preview                           0 B            83.7 kB
-├ ● /checkout                              660 B           140 kB
-├ ● /login                                 984 B           141 kB
-└ ● /s                                     2.36 kB         142 kB
+┌ ● /                                      3.38 kB         129 kB
+├   └ css/7e897ebb936fac09.css             6.55 kB
+├   /_app                                  0 B            83.8 kB
+├ ● /[...slug]                             4.49 kB         141 kB
+├   └ css/510895065f32ed2f.css             7 kB
+├ ● /[slug]/p                              10.9 kB         136 kB
+├   └ css/def381bf7c69fa2e.css             11.3 kB
+├ ○ /404                                   1.19 kB         112 kB
+├ ● /500                                   1.21 kB         112 kB
+├ ● /account                               675 B           111 kB
+├ λ /api/graphql                           0 B            83.8 kB
+├ λ /api/health/live                       0 B            83.8 kB
+├ λ /api/health/ready                      0 B            83.8 kB
+├ λ /api/preview                           0 B            83.8 kB
+├ ● /checkout                              660 B           111 kB
+├ ● /login                                 1.14 kB         112 kB
+└ ● /s                                     4.63 kB         126 kB
 + First Load JS shared by all              86.8 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-e4e873ee741162eb.js        24.2 kB
   ├ chunks/pages/_app-30b9666307e4b3b1.js  12.1 kB
-  ├ chunks/webpack-776cfd646b505dc5.js     2.22 kB
+  ├ chunks/webpack-54ce04ec11860b0b.js     2.25 kB
   └ css/5d1f64b61ea581f4.css               3.05 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/.turbo/turbo-test.log

@@ -1,23 +1,23 @@
 $ jest
-PASS test/server/index.test.ts (21.452 s)
+PASS test/server/index.test.ts (22.442 s)
   FastStore GraphQL Layer
     @faststore/api
-      ✓ should return a valid GraphQL schema (7 ms)
-      ✓ should return a valid GraphQL schema contain all expected types (4 ms)
-      ✓ should return a valid GraphQL schema contain all expected queries (1 ms)
-      ✓ should return a valid GraphQL schema contain all expected mutations (1 ms)
+      ✓ should return a valid GraphQL schema (12 ms)
+      ✓ should return a valid GraphQL schema contain all expected types (9 ms)
+      ✓ should return a valid GraphQL schema contain all expected queries (2 ms)
+      ✓ should return a valid GraphQL schema contain all expected mutations
     VTEX API Extension
-      ✓ getTypeDefsFromFolder function should return an Array (6 ms)
+      ✓ getTypeDefsFromFolder function should return an Array (30 ms)
     Third Party API Extension
-      ✓ getTypeDefsFromFolder function should return an Array (10 ms)
+      ✓ getTypeDefsFromFolder function should return an Array (9 ms)
     Final Schema after merging
-      ✓ should return a valid merged GraphQL schema (32 ms)
+      ✓ should return a valid merged GraphQL schema (42 ms)
     Envelop
-      ✓ should exist with its plugins (26 ms)
-      ✓ should handle options and execute (320 ms)
+      ✓ should exist with its plugins (43 ms)
+      ✓ should handle options and execute (567 ms)
 
 Test Suites: 1 passed, 1 total
 Tests:       9 passed, 9 total
 Snapshots:   0 total
-Time:        21.62 s
+Time:        22.575 s
 Ran all test suites.

package/index.ts

@@ -18,3 +18,16 @@ export { useProductsQuery } from './src/sdk/product/useProductsQuery'
 
 export * from './src/typings/overrides'
 export { getOverriddenSection } from './src/sdk/overrides/getOverriddenSection'
+
+// Overridable Sections
+export { default as AlertSection } from './src/components/sections/Alert'
+export { default as BannerTextSection } from './src/components/sections/BannerText'
+export { default as BreadcrumbSection } from './src/components/sections/Breadcrumb'
+export { default as CrossSellingShelfSection } from './src/components/sections/CrossSellingShelf'
+export { default as HeroSection } from './src/components/sections/Hero'
+export { default as NavbarSection } from './src/components/sections/Navbar'
+export { default as NewsletterSection } from './src/components/sections/Newsletter'
+export { default as ProductDetailsSection } from './src/components/sections/ProductDetails'
+export { default as ProductGallerySection } from './src/components/sections/ProductGallery'
+export { default as ProductShelfSection } from './src/components/sections/ProductShelf'
+export { default as RegionBarSection } from './src/components/sections/RegionBar'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.2.70",
+  "version": "2.2.71",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -123,5 +123,5 @@
     "node": "18.19.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "f3b56c76db2f97cc9d0e6b81839b4eda151044e8"
+  "gitHead": "8f5eb691823d713771a804589591b66b6effae55"
 }

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

@@ -2,8 +2,10 @@ import type { ReactNode } from 'react'
 
 import CommonAlert, {
   type AlertProps as CommonAlertProps,
-} from 'src/components/common/Alert'
-import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
+} from '../../../components/common/Alert'
+import { useOverrideComponents } from '../../../sdk/overrides/OverrideContext'
+import { AlertDefaultComponents } from './DefaultComponents'
+import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection'
 
 export interface AlertProps extends Omit<CommonAlertProps, 'link' | 'icon'> {
   icon: string
@@ -35,4 +37,10 @@ function Alert({ icon, content, link: { text, to }, dismissible }: AlertProps) {
   )
 }
 
-export default Alert
+const OverridableAlert = getOverridableSection<typeof Alert>(
+  'Alert',
+  Alert,
+  AlertDefaultComponents
+)
+
+export default OverridableAlert

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

@@ -1,12 +1,15 @@
 import { override } from 'src/customizations/src/components/overrides/Alert'
 import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
-import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
+import Alert from '.'
+
+import type { SectionOverrideDefinitionV1 } 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'>
-)
+export const OverriddenDefaultAlert = getOverriddenSection({
+  ...(override as SectionOverrideDefinitionV1<'Alert'>),
+  Section: Alert,
+})

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

@@ -3,10 +3,12 @@ import {
   BannerTextContentProps as UIBannerTextContentProps,
 } from '@faststore/ui'
 
-import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
+import { useOverrideComponents } from '../../../sdk/overrides/OverrideContext'
 import Section from '../Section'
 
 import styles from './section.module.scss'
+import { BannerTextDefaultComponents } from './DefaultComponents'
+import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection'
 
 export interface BannerTextProps {
   title: UIBannerTextContentProps['title']
@@ -55,4 +57,10 @@ function BannerText({
   )
 }
 
-export default BannerText
+const OverridableBannerText = getOverridableSection<typeof BannerText>(
+  'BannerText',
+  BannerText,
+  BannerTextDefaultComponents
+)
+
+export default OverridableBannerText

package/src/components/sections/BannerText/OverriddenDefaultBannerText.ts

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

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

@@ -9,8 +9,10 @@ import {
   isPDP,
   isPLP,
   usePage,
-} from 'src/sdk/overrides/PageProvider'
-import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
+} from '../../../sdk/overrides/PageProvider'
+import { useOverrideComponents } from '../../../sdk/overrides/OverrideContext'
+import { BreadcrumbDefaultComponents } from './DefaultComponents'
+import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection'
 
 interface BreadcrumbSectionProps {
   icon: string
@@ -39,4 +41,8 @@ function BreadcrumbSection({ ...otherProps }: BreadcrumbSectionProps) {
   )
 }
 
-export default memo(BreadcrumbSection)
+const OverridableBreadcrumbSection = getOverridableSection<
+  typeof BreadcrumbSection
+>('Breadcrumb', BreadcrumbSection, BreadcrumbDefaultComponents)
+
+export default memo(OverridableBreadcrumbSection)

package/src/components/sections/Breadcrumb/OverriddenDefaultBreadcrumb.ts

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

package/src/components/sections/CrossSellingShelf/CrossSellingShelf.tsx

@@ -1,10 +1,12 @@
 import { useMemo } from 'react'
 
-import UIProductShelf from 'src/components/ui/ProductShelf'
+import UIProductShelf from '../../../components/ui/ProductShelf'
 import { useInView } from 'react-intersection-observer'
 import { usePDP } from 'src/sdk/overrides/PageProvider'
 import styles from '../ProductShelf/section.module.scss'
 import Section from '../Section'
+import { CrossSellingShelfDefaultComponents } from './DefaultComponents'
+import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection'
 
 interface Props {
   numberOfItems: number
@@ -43,4 +45,8 @@ const CrossSellingShelf = ({
   )
 }
 
-export default CrossSellingShelf
+const OverridableCrossSellingShelf = getOverridableSection<
+  typeof CrossSellingShelf
+>('CrossSellingShelf', CrossSellingShelf, CrossSellingShelfDefaultComponents)
+
+export default OverridableCrossSellingShelf

package/src/components/sections/CrossSellingShelf/OverriddenDefaultCrossSellingShelf.ts

@@ -1,5 +1,6 @@
 import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
+import CrossSellingShelf from '.'
 
 export const OverriddenDefaultCrossSellingShelf = getOverriddenSection({
-  section: 'CrossSellingShelf',
+  Section: CrossSellingShelf,
 })

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

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

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

@@ -3,13 +3,15 @@ import {
   HeroHeaderProps as UIHeroHeaderProps,
 } from '@faststore/ui'
 import { ReactNode } from 'react'
-import { Image } from 'src/components/ui/Image'
+import { Image } from '../../../components/ui/Image'
 
-import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
+import { useOverrideComponents } from '../../../sdk/overrides/OverrideContext'
 
 import Section from '../Section'
 
 import styles from './section.module.scss'
+import { HeroDefaultComponents } from './DefaultComponents'
+import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection'
 
 export type HeroProps = {
   title: UIHeroHeaderProps['title']
@@ -74,4 +76,10 @@ const Hero = ({
   )
 }
 
-export default Hero
+const OverridableHero = getOverridableSection<typeof Hero>(
+  'Hero',
+  Hero,
+  HeroDefaultComponents
+)
+
+export default OverridableHero

package/src/components/sections/Hero/OverriddenDefaultHero.ts

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

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

@@ -1,8 +1,10 @@
+import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection'
 import Section from '../Section'
 
 import styles from './section.module.scss'
 
-import Navbar from 'src/components/navigation/Navbar'
+import Navbar from '../../../components/navigation/Navbar'
+import { NavbarDefaultComponents } from './DefaultComponents'
 
 type PageLinks = {
   url: string
@@ -91,4 +93,10 @@ function NavbarSection({
   )
 }
 
-export default NavbarSection
+const OverridableNavbar = getOverridableSection<typeof NavbarSection>(
+  'Navbar',
+  NavbarSection,
+  NavbarDefaultComponents
+)
+
+export default OverridableNavbar

package/src/components/sections/Navbar/OverriddenDefaultNavbar.ts

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

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

@@ -4,10 +4,12 @@ import {
   NewsletterHeaderProps as UINewsletterHeaderProps,
 } from '@faststore/ui'
 
-import UINewsletter from 'src/components/ui/Newsletter'
+import UINewsletter from '../../ui/Newsletter'
 
 import Section from '../Section'
 import styles from './section.module.scss'
+import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection'
+import { NewsletterDefaultComponents } from './DefaultComponents'
 
 type SubscribeMessage = {
   icon: string
@@ -111,4 +113,10 @@ function Newsletter({
   )
 }
 
-export default Newsletter
+const OverridableNewsletter = getOverridableSection<typeof Newsletter>(
+  'Newsletter',
+  Newsletter,
+  NewsletterDefaultComponents
+)
+
+export default OverridableNewsletter

package/src/components/sections/Newsletter/OverriddenDefaultNewsletter.ts

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

package/src/components/sections/ProductDetails/OverriddenDefaultProductDetails.ts

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

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

@@ -4,18 +4,20 @@ import { gql } from '@faststore/graphql-utils'
 import type { CurrencyCode, ViewItemEvent } from '@faststore/sdk'
 import { sendAnalyticsEvent } from '@faststore/sdk'
 
-import type { AnalyticsItem } from 'src/sdk/analytics/types'
-import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
-import { useSession } from 'src/sdk/session'
+import type { AnalyticsItem } from '../../../sdk/analytics/types'
+import { useFormattedPrice } from '../../../sdk/product/useFormattedPrice'
+import { useSession } from '../../../sdk/session'
 
 import Section from '../Section'
-import ProductDescription from 'src/components/ui/ProductDescription'
-import { ProductDetailsSettings } from 'src/components/ui/ProductDetails'
+import ProductDescription from '../../../components/ui/ProductDescription'
+import { ProductDetailsSettings } from '../../../components/ui/ProductDetails'
 
 import styles from './section.module.scss'
 
-import { usePDP } from 'src/sdk/overrides/PageProvider'
-import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
+import { usePDP } from '../../../sdk/overrides/PageProvider'
+import { useOverrideComponents } from '../../../sdk/overrides/OverrideContext'
+import { ProductDetailsDefaultComponents } from './DefaultComponents'
+import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection'
 
 export interface ProductDetailsProps {
   productTitle: {
@@ -280,4 +282,10 @@ export const fragment = gql`
   }
 `
 
-export default ProductDetails
+const OverridableProductDetails = getOverridableSection<typeof ProductDetails>(
+  'ProductDetails',
+  ProductDetails,
+  ProductDetailsDefaultComponents
+)
+
+export default OverridableProductDetails

package/src/components/sections/ProductGallery/OverriddenDefaultProductGallery.ts

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

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

@@ -1,8 +1,8 @@
-import { mark } from 'src/sdk/tests/mark'
+import { mark } from '../../../sdk/tests/mark'
 
 import ProductGallery, {
   ProductGalleryProps,
-} from 'src/components/ui/ProductGallery/ProductGallery'
+} from '../../ui/ProductGallery/ProductGallery'
 import Section from '../Section'
 import type { EmptyGalleryProps } from './EmptyGallery'
 
@@ -13,8 +13,10 @@ import {
   isPLP,
   isSearchPage,
   usePage,
-} from 'src/sdk/overrides/PageProvider'
-import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
+} from '../../../sdk/overrides/PageProvider'
+import { useOverrideComponents } from '../../../sdk/overrides/OverrideContext'
+import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection'
+import { ProductGalleryDefaultComponents } from './DefaultComponents'
 
 export interface ProductGallerySectionProps {
   searchTermLabel?: ProductGalleryProps['searchTermLabel']
@@ -69,4 +71,10 @@ function ProductGallerySection({
 }
 
 ProductGallerySection.displayName = 'ProductGallery'
-export default mark(ProductGallerySection)
+const MarkedProductGallery = mark(ProductGallerySection)
+
+const OverridableProductGallery = getOverridableSection<
+  typeof MarkedProductGallery
+>('ProductGallery', MarkedProductGallery, ProductGalleryDefaultComponents)
+
+export default OverridableProductGallery

package/src/components/sections/ProductShelf/OverriddenDefaultProductShelf.ts

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

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

@@ -1,8 +1,12 @@
 import { useInView } from 'react-intersection-observer'
 import Section from '../Section'
 
-import ProductShelf, { ProductShelfProps } from 'src/components/ui/ProductShelf'
+import ProductShelf, {
+  ProductShelfProps,
+} from '../../../components/ui/ProductShelf'
 import styles from './section.module.scss'
+import { ProductShelfDefaultComponents } from './DefaultComponents'
+import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection'
 
 function ProductShelfSection({
   ...otherProps
@@ -19,4 +23,10 @@ function ProductShelfSection({
   )
 }
 
-export default ProductShelfSection
+const OverridableProductShelf = getOverridableSection<typeof ProductShelf>(
+  'ProductShelf',
+  ProductShelfSection,
+  ProductShelfDefaultComponents
+)
+
+export default OverridableProductShelf