@faststore/core 2.2.70 → 2.2.73

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

@@ -1,8 +1,8 @@
-import RegionBar, {
-  RegionBarProps,
-} from 'src/components/region/RegionBar/RegionBar'
-import Section from 'src/components/sections/Section/Section'
+import RegionBar, { RegionBarProps } from '../../region/RegionBar/RegionBar'
+import Section from '../Section/Section'
 import styles from './section.module.scss'
+import { RegionBarDefaultComponents } from './DefaultComponents'
+import { getOverridableSection } from '../../..//sdk/overrides/getOverriddenSection'
 
 type RegionBarSectionProps = {
   /**
@@ -38,4 +38,10 @@ function RegionBarSection({
   )
 }
 
-export default RegionBarSection
+const OverridableRegionBar = getOverridableSection<typeof RegionBarSection>(
+  'RegionBar',
+  RegionBarSection,
+  RegionBarDefaultComponents
+)
+
+export default OverridableRegionBar

package/src/sdk/overrides/getOverriddenSection.tsx

@@ -1,44 +1,52 @@
-import type { ComponentProps, ComponentType } from 'react'
+import { useMemo, type ComponentProps, type ComponentType } from 'react'
 
-import { OverrideProvider } from './OverrideContext'
-import { DefaultComponents, Sections } from './sections'
-import { getSectionOverrides } from './overrides'
 import type {
   DefaultSectionComponentsDefinitions,
-  OverriddenComponents,
   SectionOverrideDefinition,
+  SectionOverrideDefinitionV1,
 } from '../../typings/overridesDefinition'
-import type { SupportedSectionsOverridesV2 } from '../../typings/overrides'
-
-/**
- * This function adds OverrideContext to the tree. It is essential for the compatible sections
- * to consume the components it provides.
- */
-function createOverriddenSection<
-  SectionName extends keyof SupportedSectionsOverridesV2
->({
-  Section,
-  sectionOverrides,
-  className,
-}: {
-  Section: (typeof Sections)[SectionName]
-  sectionOverrides: OverriddenComponents<SectionName>
-  className?: string
-}) {
-  const overrideContextValue = { className, components: sectionOverrides }
+import type { SectionsOverrides } from '../../typings/overrides'
+import { getSectionOverrides } from './overrides'
+import { OverrideProvider } from './OverrideContext'
 
-  return function OverriddenSection(
-    props: React.ComponentProps<typeof Section>
+export function getOverridableSection<
+  Section extends ComponentType,
+  SectionName extends keyof SectionsOverrides = keyof SectionsOverrides
+>(
+  sectionName: SectionName,
+  Section: Section,
+  defaultComponents: DefaultSectionComponentsDefinitions<SectionName>
+) {
+  function OverridableSection(
+    propsWithOverrides: ComponentProps<typeof Section> & {
+      __overrides?: Omit<SectionOverrideDefinitionV1<SectionName>, 'Section'>
+    }
   ) {
+    const { __overrides: overrides, ...props } = propsWithOverrides
+
+    const overrideContextValue = useMemo(
+      () => ({
+        ...(overrides ?? {}),
+        components: getSectionOverrides<SectionName>(defaultComponents, {
+          ...(overrides ?? {}),
+          section: sectionName,
+        }),
+      }),
+      [overrides]
+    )
+
     /** This type wizardry is here because the props won't behave correctly if nothing is done */
-    const SectionComponent = Section as ComponentType<typeof props>
+    const SectionComponent = Section as ComponentType<ComponentProps<Section>>
 
     return (
       <OverrideProvider value={overrideContextValue}>
-        <SectionComponent {...props} />
+        <SectionComponent {...(props as ComponentProps<typeof Section>)} />
       </OverrideProvider>
     )
   }
+
+  // This type cast is here so the symbol prop doesn't show up in the type definition
+  return OverridableSection as Section
 }
 
 /**
@@ -50,23 +58,16 @@ function createOverriddenSection<
  * @see https://www.faststore.dev/docs/building-sections/overriding-components-and-props
  */
 export function getOverriddenSection<
-  SectionName extends keyof SupportedSectionsOverridesV2
->(override: SectionOverrideDefinition<SectionName>) {
-  const defaultComponents = DefaultComponents[
-    override.section
-  ] as DefaultSectionComponentsDefinitions<SectionName>
+  Section extends SectionsOverrides[keyof SectionsOverrides]['Section']
+>(override: SectionOverrideDefinition<Section>) {
+  const { Section, ...rest } = override
 
-  if (!defaultComponents) {
-    throw new Error(
-      `Section ${override.section} does not exist. Please provide a valid section name to override.`
-    )
-  }
+  /** This type wizardry is here because the props won't behave correctly if nothing is done */
+  const OverridableSection = Section as ComponentType<ComponentProps<Section>>
 
-  const sectionOverrides = getSectionOverrides(defaultComponents, override)
-
-  return createOverriddenSection({
-    Section: Sections[override.section],
-    sectionOverrides: sectionOverrides,
-    className: override.className,
-  })
+  return function OverriddenSection(
+    props: ComponentProps<typeof OverridableSection>
+  ) {
+    return <OverridableSection {...props} {...{ __overrides: rest }} />
+  }
 }

package/src/sdk/overrides/overrides.ts

@@ -1,8 +1,8 @@
 import type {
   DefaultSectionComponentsDefinitions,
   ComponentOverrideDefinition,
-  SectionOverrideDefinition,
   OverriddenComponents,
+  SectionOverrideDefinitionV1,
 } from '../../typings/overridesDefinition'
 
 import type { SectionsOverrides } from '../../typings/overrides'
@@ -11,7 +11,7 @@ export function getSectionOverrides<
   SectionName extends keyof SectionsOverrides
 >(
   defaultComponents: DefaultSectionComponentsDefinitions<SectionName>,
-  override: SectionOverrideDefinition<SectionName>
+  override: SectionOverrideDefinitionV1<SectionName>
 ): OverriddenComponents<SectionName> {
   const overriddenComponents = {} as OverriddenComponents<SectionName>
 

package/src/typings/overrides.ts

@@ -43,28 +43,62 @@ import type {
 
 import type {
   ComponentOverrideDefinition,
-  SectionOverrideDefinition,
+  SectionOverrideDefinitionV1,
 } from './overridesDefinition'
+import Alert from '../components/sections/Alert'
+import Breadcrumb from '../components/sections/Breadcrumb'
+import BannerText from '../components/sections/BannerText'
+import CrossSellingShelf from '../components/sections/CrossSellingShelf'
+import Hero from '../components/sections/Hero'
+import ProductShelf from '../components/sections/ProductShelf'
+import ProductDetails from '../components/sections/ProductDetails'
+import Navbar from '../components/sections/Navbar'
+import Newsletter from '../components/sections/Newsletter'
+import ProductGallery from '../components/sections/ProductGallery'
+import RegionBar from '../components/sections/RegionBar'
 
 export type SectionOverride = {
-  [K in keyof SectionsOverrides]: SectionOverrideDefinition<K>
+  [K in keyof SectionsOverrides]: SectionOverrideDefinitionV1<K>
 }[keyof SectionsOverrides]
 
-/** TODO: every use of this type should be replaced by SectionsOverrides after all sections are supported */
-export type SupportedSectionsOverridesV2 = Pick<
-  SectionsOverrides,
-  | 'Alert'
-  | 'BannerText'
-  | 'Breadcrumb'
-  | 'CrossSellingShelf'
-  | 'Hero'
-  | 'Navbar'
-  | 'Newsletter'
-  | 'ProductShelf'
-  | 'ProductDetails'
-  | 'ProductGallery'
-  | 'RegionBar'
->
+/**
+ * This type exists for us to be able to provide proper autocomplete
+ * and type checking for the override components.
+ *
+ * What it does is it maps a section component to its override components.
+ *
+ * OverrideComponentsForSection<typeof Alert> translates to:
+ * {
+ *  Alert: {
+ *   Alert: ComponentOverrideDefinition<AlertProps, Omit<AlertProps, 'onClose'>>
+ *   Icon: ComponentOverrideDefinition<IconProps, IconProps>
+ *  }
+ * }
+ *
+ * We then use ComponentsFromSection to extract the list of components
+ */
+export type OverrideComponentsForSection<
+  Section extends SectionsOverrides[keyof SectionsOverrides]['Section']
+> = {
+  // The first 'extends' condition is used to filter out sections that don't have overrides (typed 'never')
+  [K in keyof SectionsOverrides as SectionsOverrides[K] extends {
+    Section: never
+  }
+    ? never
+    : // In the second 'extends' condition, we check if the section matches the one we're looking for
+    SectionsOverrides[K] extends {
+        Section: Section
+      }
+    ? // If it does, we return the components. Otherwise, we return 'never', which is filtered out
+      K
+    : never]: SectionsOverrides[K]['components']
+}
+
+// This type is used to extract only the list of components from the section override
+export type ComponentsFromSection<
+  Section extends SectionsOverrides[keyof SectionsOverrides]['Section']
+> =
+  OverrideComponentsForSection<Section>[keyof OverrideComponentsForSection<Section>]
 
 /**
  * Originally, these types were defined in their respective Overrides file
@@ -74,199 +108,243 @@ export type SupportedSectionsOverridesV2 = Pick<
  * For some reason, defining them in the same file as SectionOverride seems to fix the issue.
  * Consider that before moving them elsewhere and test it on the starter as well.
  */
-
 export type SectionsOverrides = {
   Alert: {
-    Alert: ComponentOverrideDefinition<AlertProps, Omit<AlertProps, 'onClose'>>
-    Icon: ComponentOverrideDefinition<IconProps, IconProps>
+    Section: typeof Alert
+    components: {
+      Alert: ComponentOverrideDefinition<
+        AlertProps,
+        Omit<AlertProps, 'onClose'>
+      >
+      Icon: ComponentOverrideDefinition<IconProps, IconProps>
+    }
   }
   BannerText: {
-    BannerText: ComponentOverrideDefinition<BannerTextProps, BannerTextProps>
-    BannerTextContent: ComponentOverrideDefinition<
-      BannerTextContentProps,
-      BannerTextContentProps
-    >
+    Section: typeof BannerText
+    components: {
+      BannerText: ComponentOverrideDefinition<BannerTextProps, BannerTextProps>
+      BannerTextContent: ComponentOverrideDefinition<
+        BannerTextContentProps,
+        BannerTextContentProps
+      >
+    }
   }
   Breadcrumb: {
-    Breadcrumb: ComponentOverrideDefinition<BreadcrumbProps, BreadcrumbProps>
-    Icon: ComponentOverrideDefinition<IconProps, IconProps>
+    Section: typeof Breadcrumb
+    components: {
+      Breadcrumb: ComponentOverrideDefinition<BreadcrumbProps, BreadcrumbProps>
+      Icon: ComponentOverrideDefinition<IconProps, IconProps>
+    }
   }
   EmptyState: {
-    EmptyState: ComponentOverrideDefinition<
-      PropsWithChildren<EmptyStateProps>,
-      EmptyStateProps
-    >
+    Section: never
+    components: {
+      EmptyState: ComponentOverrideDefinition<
+        PropsWithChildren<EmptyStateProps>,
+        EmptyStateProps
+      >
+    }
   }
   Hero: {
-    Hero: ComponentOverrideDefinition<HeroProps, HeroProps>
-    HeroImage: ComponentOverrideDefinition<HeroImageProps, HeroImageProps>
-    HeroHeader: ComponentOverrideDefinition<HeroHeaderProps, HeroHeaderProps>
+    Section: typeof Hero
+    components: {
+      Hero: ComponentOverrideDefinition<HeroProps, HeroProps>
+      HeroImage: ComponentOverrideDefinition<HeroImageProps, HeroImageProps>
+      HeroHeader: ComponentOverrideDefinition<HeroHeaderProps, HeroHeaderProps>
+    }
   }
   Navbar: {
-    Navbar: ComponentOverrideDefinition<NavbarProps, NavbarProps>
-    NavbarLinks: ComponentOverrideDefinition<NavbarLinksProps, NavbarLinksProps>
-    NavbarLinksList: ComponentOverrideDefinition<
-      NavbarLinksListProps,
-      NavbarLinksListProps
-    >
-    NavbarSlider: ComponentOverrideDefinition<
-      NavbarSliderProps,
-      NavbarSliderProps
-    >
-    NavbarSliderHeader: ComponentOverrideDefinition<
-      NavbarSliderHeaderProps,
-      NavbarSliderHeaderProps
-    >
-    NavbarSliderContent: ComponentOverrideDefinition<
-      NavbarSliderContentProps,
-      NavbarSliderContentProps
-    >
-    NavbarSliderFooter: ComponentOverrideDefinition<
-      NavbarSliderFooterProps,
-      NavbarSliderFooterProps
-    >
-    NavbarHeader: ComponentOverrideDefinition<
-      NavbarHeaderProps,
-      NavbarHeaderProps
-    >
-    NavbarRow: ComponentOverrideDefinition<NavbarRowProps, NavbarRowProps>
-    NavbarButtons: ComponentOverrideDefinition<
-      NavbarButtonsProps,
-      NavbarButtonsProps
-    >
-    IconButton: ComponentOverrideDefinition<
-      IconButtonProps,
-      Omit<IconButtonProps, 'onClick'>
-    >
+    Section: typeof Navbar,
+    components: {
+      Navbar: ComponentOverrideDefinition<NavbarProps, NavbarProps>
+      NavbarLinks: ComponentOverrideDefinition<
+        NavbarLinksProps,
+        NavbarLinksProps
+      >
+      NavbarLinksList: ComponentOverrideDefinition<
+        NavbarLinksListProps,
+        NavbarLinksListProps
+      >
+      NavbarSlider: ComponentOverrideDefinition<
+        NavbarSliderProps,
+        NavbarSliderProps
+      >
+      NavbarSliderHeader: ComponentOverrideDefinition<
+        NavbarSliderHeaderProps,
+        NavbarSliderHeaderProps
+      >
+      NavbarSliderContent: ComponentOverrideDefinition<
+        NavbarSliderContentProps,
+        NavbarSliderContentProps
+      >
+      NavbarSliderFooter: ComponentOverrideDefinition<
+        NavbarSliderFooterProps,
+        NavbarSliderFooterProps
+      >
+      NavbarHeader: ComponentOverrideDefinition<
+        NavbarHeaderProps,
+        NavbarHeaderProps
+      >
+      NavbarRow: ComponentOverrideDefinition<NavbarRowProps, NavbarRowProps>
+      NavbarButtons: ComponentOverrideDefinition<
+        NavbarButtonsProps,
+        NavbarButtonsProps
+      >
+      IconButton: ComponentOverrideDefinition<
+        IconButtonProps,
+        Omit<IconButtonProps, 'onClick'>
+      >
+    }
   }
   Newsletter: {
-    Newsletter: ComponentOverrideDefinition<NewsletterProps, NewsletterProps>
-    NewsletterAddendum: ComponentOverrideDefinition<
-      NewsletterAddendumProps,
-      NewsletterAddendumProps
-    >
-    NewsletterContent: ComponentOverrideDefinition<
-      NewsletterContentProps,
-      NewsletterContentProps
-    >
-    NewsletterForm: ComponentOverrideDefinition<
-      NewsletterFormProps,
-      NewsletterFormProps
-    >
-    NewsletterHeader: ComponentOverrideDefinition<
-      NewsletterHeaderProps,
-      NewsletterHeaderProps
-    >
-    ToastIconSuccess: ComponentOverrideDefinition<IconProps, IconProps>
-    ToastIconError: ComponentOverrideDefinition<IconProps, IconProps>
-    HeaderIcon: ComponentOverrideDefinition<IconProps, IconProps>
-    InputFieldName: ComponentOverrideDefinition<
-      InputFieldProps,
-      Omit<InputFieldProps, 'inputRef'>
-    >
-    InputFieldEmail: ComponentOverrideDefinition<
-      InputFieldProps,
-      Omit<InputFieldProps, 'inputRef'>
-    >
-    Button: ComponentOverrideDefinition<ButtonProps, ButtonProps>
+    Section: typeof Newsletter
+    components: {
+      Newsletter: ComponentOverrideDefinition<NewsletterProps, NewsletterProps>
+      NewsletterAddendum: ComponentOverrideDefinition<
+        NewsletterAddendumProps,
+        NewsletterAddendumProps
+      >
+      NewsletterContent: ComponentOverrideDefinition<
+        NewsletterContentProps,
+        NewsletterContentProps
+      >
+      NewsletterForm: ComponentOverrideDefinition<
+        NewsletterFormProps,
+        NewsletterFormProps
+      >
+      NewsletterHeader: ComponentOverrideDefinition<
+        NewsletterHeaderProps,
+        NewsletterHeaderProps
+      >
+      ToastIconSuccess: ComponentOverrideDefinition<IconProps, IconProps>
+      ToastIconError: ComponentOverrideDefinition<IconProps, IconProps>
+      HeaderIcon: ComponentOverrideDefinition<IconProps, IconProps>
+      InputFieldName: ComponentOverrideDefinition<
+        InputFieldProps,
+        Omit<InputFieldProps, 'inputRef'>
+      >
+      InputFieldEmail: ComponentOverrideDefinition<
+        InputFieldProps,
+        Omit<InputFieldProps, 'inputRef'>
+      >
+      Button: ComponentOverrideDefinition<ButtonProps, ButtonProps>
+    }
   }
   ProductDetails: {
-    ProductTitle: ComponentOverrideDefinition<
-      ProductTitleProps,
-      ProductTitleProps
-    >
-    DiscountBadge: ComponentOverrideDefinition<
-      DiscountBadgeProps,
-      Omit<DiscountBadgeProps, 'listPrice' | 'spotPrice'>
-    >
-    BuyButton: ComponentOverrideDefinition<ButtonProps, ButtonProps>
-    Icon: ComponentOverrideDefinition<IconProps, IconProps>
-    ProductPrice: ComponentOverrideDefinition<
-      ProductPriceProps,
-      Omit<ProductPriceProps, 'value'>
-    >
-    QuantitySelector: ComponentOverrideDefinition<
-      QuantitySelectorProps,
-      Omit<QuantitySelectorProps, 'onChange'>
-    >
-    SkuSelector: ComponentOverrideDefinition<SkuSelectorProps, SkuSelectorProps>
-    ShippingSimulation: ComponentOverrideDefinition<
-      ShippingSimulationProps,
-      ShippingSimulationProps
-    >
-    ImageGallery: ComponentOverrideDefinition<
-      ImageGalleryProps,
-      ImageGalleryProps
-    >
-    ImageGalleryViewer: ComponentOverrideDefinition<
-      ImageGalleryViewerProps,
-      ImageGalleryViewerProps
-    >
-    __experimentalImageGalleryImage: ComponentOverrideDefinition<any, any>
-    __experimentalImageGallery: ComponentOverrideDefinition<any, any>
-    __experimentalShippingSimulation: ComponentOverrideDefinition<any, any>
-    __experimentalNotAvailableButton: ComponentOverrideDefinition<any, any>
+    Section: typeof ProductDetails
+    components: {
+      ProductTitle: ComponentOverrideDefinition<
+        ProductTitleProps,
+        ProductTitleProps
+      >
+      DiscountBadge: ComponentOverrideDefinition<
+        DiscountBadgeProps,
+        Omit<DiscountBadgeProps, 'listPrice' | 'spotPrice'>
+      >
+      BuyButton: ComponentOverrideDefinition<ButtonProps, ButtonProps>
+      Icon: ComponentOverrideDefinition<IconProps, IconProps>
+      ProductPrice: ComponentOverrideDefinition<
+        ProductPriceProps,
+        Omit<ProductPriceProps, 'value'>
+      >
+      QuantitySelector: ComponentOverrideDefinition<
+        QuantitySelectorProps,
+        Omit<QuantitySelectorProps, 'onChange'>
+      >
+      SkuSelector: ComponentOverrideDefinition<
+        SkuSelectorProps,
+        SkuSelectorProps
+      >
+      ShippingSimulation: ComponentOverrideDefinition<
+        ShippingSimulationProps,
+        ShippingSimulationProps
+      >
+      ImageGallery: ComponentOverrideDefinition<
+        ImageGalleryProps,
+        ImageGalleryProps
+      >
+      ImageGalleryViewer: ComponentOverrideDefinition<
+        ImageGalleryViewerProps,
+        ImageGalleryViewerProps
+      >
+      __experimentalImageGalleryImage: ComponentOverrideDefinition<any, any>
+      __experimentalImageGallery: ComponentOverrideDefinition<any, any>
+      __experimentalShippingSimulation: ComponentOverrideDefinition<any, any>
+      __experimentalNotAvailableButton: ComponentOverrideDefinition<any, any>
+    }
   }
   ProductGallery: {
-    MobileFilterButton: ComponentOverrideDefinition<
-      ButtonProps,
-      Omit<ButtonProps, 'onClick'>
-    >
-    FilterIcon: ComponentOverrideDefinition<IconProps, IconProps>
-    PrevIcon: ComponentOverrideDefinition<IconProps, IconProps>
-    ResultsCountSkeleton: ComponentOverrideDefinition<
-      SkeletonProps,
-      Omit<SkeletonProps, 'loading'>
-    >
-    SortSkeleton: ComponentOverrideDefinition<
-      SkeletonProps,
-      Omit<SkeletonProps, 'loading'>
-    >
-    FilterButtonSkeleton: ComponentOverrideDefinition<
-      SkeletonProps,
-      Omit<SkeletonProps, 'loading'>
-    >
-    LinkButtonPrev: ComponentOverrideDefinition<
-      LinkButtonProps,
-      Omit<LinkButtonProps, 'onClick' | 'href'>
-    >
-    LinkButtonNext: ComponentOverrideDefinition<
-      LinkButtonProps,
-      Omit<LinkButtonProps, 'onClick' | 'href'>
-    >
-    __experimentalFilterDesktop: ComponentOverrideDefinition<any, any>
-    __experimentalFilterSlider: ComponentOverrideDefinition<any, any>
-    __experimentalProductCard: ComponentOverrideDefinition<any, any>
-    __experimentalEmptyGallery: ComponentOverrideDefinition<any, any>
+    Section: typeof ProductGallery
+    components: {
+      MobileFilterButton: ComponentOverrideDefinition<
+        ButtonProps,
+        Omit<ButtonProps, 'onClick'>
+      >
+      FilterIcon: ComponentOverrideDefinition<IconProps, IconProps>
+      PrevIcon: ComponentOverrideDefinition<IconProps, IconProps>
+      ResultsCountSkeleton: ComponentOverrideDefinition<
+        SkeletonProps,
+        Omit<SkeletonProps, 'loading'>
+      >
+      SortSkeleton: ComponentOverrideDefinition<
+        SkeletonProps,
+        Omit<SkeletonProps, 'loading'>
+      >
+      FilterButtonSkeleton: ComponentOverrideDefinition<
+        SkeletonProps,
+        Omit<SkeletonProps, 'loading'>
+      >
+      LinkButtonPrev: ComponentOverrideDefinition<
+        LinkButtonProps,
+        Omit<LinkButtonProps, 'onClick' | 'href'>
+      >
+      LinkButtonNext: ComponentOverrideDefinition<
+        LinkButtonProps,
+        Omit<LinkButtonProps, 'onClick' | 'href'>
+      >
+      __experimentalFilterDesktop: ComponentOverrideDefinition<any, any>
+      __experimentalFilterSlider: ComponentOverrideDefinition<any, any>
+      __experimentalProductCard: ComponentOverrideDefinition<any, any>
+      __experimentalEmptyGallery: ComponentOverrideDefinition<any, any>
+    }
   }
   ProductShelf: {
-    ProductShelf: ComponentOverrideDefinition<
-      ProductShelfProps,
-      ProductShelfProps
-    >
-    __experimentalCarousel: ComponentOverrideDefinition<any, any>
-    __experimentalProductCard: ComponentOverrideDefinition<
-      any,
-      Omit<any, 'key' | 'product' | 'index'>
-    >
+    Section: typeof ProductShelf
+    components: {
+      ProductShelf: ComponentOverrideDefinition<
+        ProductShelfProps,
+        ProductShelfProps
+      >
+      __experimentalCarousel: ComponentOverrideDefinition<any, any>
+      __experimentalProductCard: ComponentOverrideDefinition<
+        any,
+        Omit<any, 'key' | 'product' | 'index'>
+      >
+    }
   }
   CrossSellingShelf: {
-    ProductShelf: ComponentOverrideDefinition<
-      ProductShelfProps,
-      ProductShelfProps
-    >
-    __experimentalCarousel: ComponentOverrideDefinition<any, any>
-    __experimentalProductCard: ComponentOverrideDefinition<
-      any,
-      Omit<any, 'key' | 'product' | 'index'>
-    >
+    Section: typeof CrossSellingShelf
+    components: {
+      ProductShelf: ComponentOverrideDefinition<
+        ProductShelfProps,
+        ProductShelfProps
+      >
+      __experimentalCarousel: ComponentOverrideDefinition<any, any>
+      __experimentalProductCard: ComponentOverrideDefinition<
+        any,
+        Omit<any, 'key' | 'product' | 'index'>
+      >
+    }
   }
   RegionBar: {
-    RegionBar: ComponentOverrideDefinition<
-      RegionBarProps,
-      Omit<RegionBarProps, 'onButtonClick' | 'postalCode'>
-    >
-    LocationIcon: ComponentOverrideDefinition<IconProps, IconProps>
-    ButtonIcon: ComponentOverrideDefinition<IconProps, IconProps>
+    Section: typeof RegionBar
+    components: {
+      RegionBar: ComponentOverrideDefinition<
+        RegionBarProps,
+        Omit<RegionBarProps, 'onButtonClick' | 'postalCode'>
+      >
+      LocationIcon: ComponentOverrideDefinition<IconProps, IconProps>
+      ButtonIcon: ComponentOverrideDefinition<IconProps, IconProps>
+    }
   }
 }