diff --git a/packages/commerce-sdk-react/package.json b/packages/commerce-sdk-react/package.json
index a5ec7e6df1..7e9d7a55a3 100644
--- a/packages/commerce-sdk-react/package.json
+++ b/packages/commerce-sdk-react/package.json
@@ -17,7 +17,7 @@
   "files": [
     "CHANGELOG.md",
     "LICENSE",
-    "+(auth|hooks|scripts)/**/!(*.test*).{ts,js}",
+    "+(auth|components|hooks|scripts)/**/!(*.test*).{ts,js}",
     "*.{js,d.ts}",
     "!*.test*.{js,d.ts}",
     "!test*.*",
@@ -75,6 +75,9 @@
     "react": "^17",
     "react-helmet": "6"
   },
+  "optionalDependencies": {
+    "prop-types": "^15.8.1"
+  },
   "engines": {
     "node": "^16.0.0 || ^18.0.0",
     "npm": "^7.0.0 || ^8.0.0 || ^9.0.0"
diff --git a/packages/commerce-sdk-react/src/components/ShopperExperience/Region/index.tsx b/packages/commerce-sdk-react/src/components/ShopperExperience/Region/index.tsx
index 655078d392..8eda0f26b4 100644
--- a/packages/commerce-sdk-react/src/components/ShopperExperience/Region/index.tsx
+++ b/packages/commerce-sdk-react/src/components/ShopperExperience/Region/index.tsx
@@ -5,8 +5,18 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 import React from 'react'
-import {Region as RegionType} from '../types'
+import PropTypes from 'prop-types'
 import {Component} from '../Component'
+import {componentPropType} from '../prop-types'
+import {Region as RegionType} from '../types'
+
+/**
+ * This PropType represents a `region` object from the ShopperExperience API.
+ */
+export const propType = PropTypes.shape({
+    id: PropTypes.string,
+    components: PropTypes.arrayOf(componentPropType)
+})
 
 interface RegionProps extends React.ComponentProps<'div'> {
     region: RegionType
@@ -36,4 +46,9 @@ export const Region = (props: RegionProps) => {
 
 Region.displayName = 'Region'
 
+Region.propTypes = {
+    region: propType.isRequired,
+    className: PropTypes.string
+}
+
 export default Region
diff --git a/packages/commerce-sdk-react/src/components/ShopperExperience/index.ts b/packages/commerce-sdk-react/src/components/ShopperExperience/index.ts
index 5be1d1ecc6..d2eafb517a 100644
--- a/packages/commerce-sdk-react/src/components/ShopperExperience/index.ts
+++ b/packages/commerce-sdk-react/src/components/ShopperExperience/index.ts
@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
+
 export * from './Component'
-export * from './Page'
 export * from './Region'
+export * from './Page'
+export * from './prop-types'
diff --git a/packages/template-retail-react-app/app/page-designer/core/types.js b/packages/commerce-sdk-react/src/components/ShopperExperience/prop-types.ts
similarity index 80%
rename from packages/template-retail-react-app/app/page-designer/core/types.js
rename to packages/commerce-sdk-react/src/components/ShopperExperience/prop-types.ts
index 1e4f67bc02..86fea2ab07 100644
--- a/packages/template-retail-react-app/app/page-designer/core/types.js
+++ b/packages/commerce-sdk-react/src/components/ShopperExperience/prop-types.ts
@@ -9,7 +9,7 @@ import PropTypes from 'prop-types'
 /**
  * This PropType represents a `component` object from the ShopperExperience API.
  */
-export const componentType = PropTypes.shape({
+export const componentPropType = PropTypes.shape({
     data: PropTypes.object,
     id: PropTypes.string,
     typeId: PropTypes.string
@@ -18,9 +18,9 @@ export const componentType = PropTypes.shape({
 /**
  * This PropType represents a `region` object from the ShopperExperience API.
  */
-export const regionType = PropTypes.shape({
+export const regionPropType = PropTypes.shape({
     id: PropTypes.string,
-    components: PropTypes.arrayOf(componentType)
+    components: PropTypes.arrayOf(componentPropType)
 })
 
 /**
@@ -31,6 +31,6 @@ export const pageType = PropTypes.shape({
     description: PropTypes.string,
     id: PropTypes.string,
     name: PropTypes.string,
-    regions: PropTypes.arrayOf(regionType),
+    regions: PropTypes.arrayOf(regionPropType),
     typeId: PropTypes.string
 })
diff --git a/packages/template-retail-react-app/app/page-designer/README.md b/packages/template-retail-react-app/app/page-designer/README.md
index 9cba7cd55c..c5c936c4ff 100644
--- a/packages/template-retail-react-app/app/page-designer/README.md
+++ b/packages/template-retail-react-app/app/page-designer/README.md
@@ -7,10 +7,12 @@
 
 ---
 
-This folder contains React components and utilities that render pages from [Page Designer](https://documentation.b2c.commercecloud.salesforce.com/DOC2/topic/com.demandware.dochelp/content/b2c_commerce/topics/page_designer/b2c_creating_pd_pages.html).
+This folder contains the React components used when rendering the pages from [Page Designer](https://documentation.b2c.commercecloud.salesforce.com/DOC2/topic/com.demandware.dochelp/content/b2c_commerce/topics/page_designer/b2c_creating_pd_pages.html).
 
 Use this folder to add React components that can render Page Designer components that have been serialized to JSON.
 
+> NOTE: If you are creating components that do not already exist in Page Designer, follow [this](https://documentation.b2c.commercecloud.salesforce.com/DOC1/index.jsp) guide to first create your Page Designer components before creating their matching PWA-Kit React components.
+
 This folder includes components for layout and visualization of images, grids, and carousels.
 
 **By default, Page Designer integration is not enabled in the Retail React App.** Additionally, to utilize the `shopperExperience`
@@ -20,8 +22,7 @@ for more information on configuring your SLAS client.
 
 ## Folder Structure
 
--   **`/core`** - Base components for rendering: `<Page>`, `<Region>`, and `<Component>`. Use `<Page>` to render Page Designer content. Use `<Region>` and `<Component>` for creating new assets.
--   **`/assets`** - Non-visual components used in Page Designer. Includes `<Image>` and `<ImageWithText>` as well as any other Page Designer assets that you want to use in your PWA-Kit app. If you need to visualize a component, add it here.
+-   **`/assets`** - Visual components used in Page Designer. Includes `<Image>` and `<ImageWithText>` as well as any other Page Designer assets that you want to use in your PWA-Kit app. If you need to visualize a component, add it here.
 -   **`/layouts`** - Components responsible for layout. Includes various grids and a `<Carousel>` component.
 
 ## Sample Usage
@@ -32,8 +33,10 @@ Create a new file called `app/pages/page-viewer/index.jsx`, and add the followin
 // app/pages/page-viewer/index.jsx
 
 import React from 'react'
+import {useParams} from 'react-router-dom'
 import {Box} from '@chakra-ui/react'
-import {Page, pageType} from '../../page-designer'
+import {usePage} from 'commerce-sdk-react-preview'
+import {Page} from 'commerce-sdk-react-preview/components'
 import {ImageTile, ImageWithText} from '../../page-designer/assets'
 import {
     Carousel,
@@ -59,32 +62,24 @@ const PAGEDESIGNER_TO_COMPONENT = {
     'commerce_layouts.mobileGrid3r2c': MobileGrid3r2c
 }
 
-const PageViewer = ({page}) => (
-    <Box layerStyle={'page'}>
-        <Page page={page} components={PAGEDESIGNER_TO_COMPONENT} />
-    </Box>
-)
-
-PageViewer.getProps = async ({api, params}) => {
-    const {pageId} = params
-    const page = await api.shopperExperience.getPage({
-        parameters: {pageId}
-    })
-
-    if (page.isError) {
-        let ErrorClass = page.type?.endsWith('page-not-found') ? HTTPNotFound : HTTPError
-        throw new ErrorClass(page.detail)
+const PageViewer = () => {
+    const {pageId} = useParams()
+    const {data: page, error}= usePage({parameters: {pageId}})
+
+    if (error) {
+        let ErrorClass = error.response?.status === 404 ? HTTPNotFound : HTTPError
+        throw new ErrorClass(error.response?.statusText)
     }
 
-    return {page}
+    return (
+        <Box layerStyle={'page'}>
+            <Page page={page} components={PAGEDESIGNER_TO_COMPONENT} />
+        </Box>
+    )
 }
 
 PageViewer.displayName = 'PageViewer'
 
-PageViewer.propTypes = {
-    page: pageType.isRequired
-}
-
 export default PageViewer
 ```
 
@@ -104,4 +99,4 @@ Open `app/routes.jsx` and add a route for `<PageViewer>`:
 +    },
 ```
 
-Using the local development server, you can now see Page Designer pages rendered in React.js at `http://localhost:3000/page-viewer/:pageid` by providing their `pageid`.
+Using the local development server, you can now see Page Designer pages rendered in React.js at `http://localhost:3000/page-viewer/:pageid` by providing their `pageid` defined in Business Manager.
diff --git a/packages/template-retail-react-app/app/page-designer/core/index.js b/packages/template-retail-react-app/app/page-designer/assets/index.js
similarity index 69%
rename from packages/template-retail-react-app/app/page-designer/core/index.js
rename to packages/template-retail-react-app/app/page-designer/assets/index.js
index 0cd28498e4..4f1cc0f1af 100644
--- a/packages/template-retail-react-app/app/page-designer/core/index.js
+++ b/packages/template-retail-react-app/app/page-designer/assets/index.js
@@ -5,7 +5,5 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
-export * from './component'
-export * from './page'
-export * from './region'
-export * from './types'
+export * from './image-tile'
+export * from './image-with-text'
diff --git a/packages/template-retail-react-app/app/page-designer/core/component/index.jsx b/packages/template-retail-react-app/app/page-designer/core/component/index.jsx
deleted file mode 100644
index 9bd828ef06..0000000000
--- a/packages/template-retail-react-app/app/page-designer/core/component/index.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * Copyright (c) 2023, Salesforce, Inc.
- * All rights reserved.
- * SPDX-License-Identifier: BSD-3-Clause
- * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
- */
-import React from 'react'
-import {usePageContext} from '../page'
-import {componentType} from '../types'
-
-/**
- * This component will render a page designer page given its serialized data object.
- *
- * @param {PageProps} props
- * @param {Component} props.component - The page designer component data representation.
- * @returns {React.ReactElement} - Experience component.
- */
-export const Component = ({component}) => {
-    const pageContext = usePageContext()
-    const ComponentClass =
-        pageContext?.components[component.typeId] ||
-        (({typeId}) => <div>{`Component type '${typeId}' not found!`}</div>)
-    const {data, ...rest} = component
-
-    return (
-        <div id={component.id} className="component">
-            <div className="container">
-                <ComponentClass {...rest} {...data} />
-            </div>
-        </div>
-    )
-}
-
-Component.displayName = 'Component'
-
-Component.propTypes = {
-    component: componentType.isRequired
-}
-
-export default Component
diff --git a/packages/template-retail-react-app/app/page-designer/core/component/index.test.js b/packages/template-retail-react-app/app/page-designer/core/component/index.test.js
deleted file mode 100644
index 68064368b4..0000000000
--- a/packages/template-retail-react-app/app/page-designer/core/component/index.test.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- * Copyright (c) 2023, Salesforce, Inc.
- * All rights reserved.
- * SPDX-License-Identifier: BSD-3-Clause
- * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
- */
-import React from 'react'
-import {render} from '@testing-library/react'
-import Component from './index'
-import {PageContext} from '../page'
-
-const SAMPLE_COMPONENT = {
-    id: 'rfdvj4ojtltljw3',
-    typeId: 'commerce_assets.carousel',
-    data: {
-        title: 'Topseller',
-        category: 'topseller'
-    },
-    regions: [
-        {
-            id: 'regionB1',
-            components: [
-                {
-                    id: 'rfdvj4ojtltljw3',
-                    typeId: 'commerce_assets.carousel',
-                    data: {
-                        title: 'Topseller',
-                        category: 'topseller'
-                    }
-                }
-            ]
-        }
-    ]
-}
-
-const TEST_COMPONENTS = {
-    ['commerce_assets.carousel']: () => <div className="carousel">Carousel</div>
-}
-
-test('Page throws if used outside of a Page component', () => {
-    expect(() => render(<Component component={SAMPLE_COMPONENT} />)).toThrow()
-})
-
-test('Page renders correct component', () => {
-    const component = <Component component={SAMPLE_COMPONENT} />
-
-    const {container} = render(component, {
-        wrapper: () => (
-            <PageContext.Provider value={{components: TEST_COMPONENTS}}>
-                {component}
-            </PageContext.Provider>
-        )
-    })
-
-    // Component are in document.
-    expect(container.querySelectorAll('.component')?.length).toBe(1)
-
-    // Prodived components are in document. (Note: Sub-regions/components aren't rendered because that is
-    // the responsibility of the component definition.)
-    expect(container.querySelectorAll('.carousel')?.length).toBe(1)
-})
diff --git a/packages/template-retail-react-app/app/page-designer/core/page/index.jsx b/packages/template-retail-react-app/app/page-designer/core/page/index.jsx
deleted file mode 100644
index e4d6435a35..0000000000
--- a/packages/template-retail-react-app/app/page-designer/core/page/index.jsx
+++ /dev/null
@@ -1,77 +0,0 @@
-/*
- * Copyright (c) 2023, Salesforce, Inc.
- * All rights reserved.
- * SPDX-License-Identifier: BSD-3-Clause
- * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
- */
-import React, {useContext, useEffect, useState} from 'react'
-import PropTypes from 'prop-types'
-import {Helmet} from 'react-helmet'
-import {Region} from '../region'
-import {pageType} from '../types'
-
-// This context will hold the component map as well as any other future context.
-export const PageContext = React.createContext(undefined)
-
-// This hook allows sub-components to use the page context. In our case we use it
-// so that the generic <Component /> can use the component map to know which react component
-// to render.
-export const usePageContext = () => {
-    const value = useContext(PageContext)
-
-    if (!value) {
-        throw new Error('"usePageContext" cannot be used outside of a page component.')
-    }
-
-    return value
-}
-
-/**
- * This component will render a page designer page given its serialized data object.
- *
- * @param {PageProps} props
- * @param {Page} props.region - The page designer page data representation.
- * @param {ComponentMap} props.components - A mapping of typeId's to react components representing the type.
- * @returns {React.ReactElement} - Page component.
- */
-export const Page = (props) => {
-    const {page, components, className = '', ...rest} = props
-    const [contextValue, setContextValue] = useState({components})
-    const {id, regions, pageDescription, pageKeywords, pageTitle} = page || {}
-
-    // NOTE: This probably is not required as the list of components is known at compile time,
-    // but we might need this ability in the future if we are to lazy load components.
-    useEffect(() => {
-        setContextValue({
-            ...contextValue,
-            components
-        })
-    }, [components])
-
-    return (
-        <PageContext.Provider value={contextValue}>
-            <Helmet>
-                {pageTitle && <title>{pageTitle}</title>}
-                {pageDescription && <meta name="description" content={pageDescription} />}
-                {pageKeywords && <meta name="keywords" content={pageKeywords} />}
-            </Helmet>
-            <div id={id} className={`page ${className}`} {...rest}>
-                <div className="container">
-                    {regions?.map((region) => (
-                        <Region key={region.id} region={region} />
-                    ))}
-                </div>
-            </div>
-        </PageContext.Provider>
-    )
-}
-
-Page.displayName = 'Page'
-
-Page.propTypes = {
-    page: pageType.isRequired,
-    components: PropTypes.object.isRequired,
-    className: PropTypes.string
-}
-
-export default Page
diff --git a/packages/template-retail-react-app/app/page-designer/core/page/index.test.js b/packages/template-retail-react-app/app/page-designer/core/page/index.test.js
deleted file mode 100644
index 013023c0ef..0000000000
--- a/packages/template-retail-react-app/app/page-designer/core/page/index.test.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
- * Copyright (c) 2023, Salesforce, Inc.
- * All rights reserved.
- * SPDX-License-Identifier: BSD-3-Clause
- * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
- */
-import React from 'react'
-import {render} from '@testing-library/react'
-import Page from './index'
-import {Helmet} from 'react-helmet'
-
-const SAMPLE_PAGE = {
-    id: 'samplepage',
-    typeId: 'storePage',
-    aspectTypeId: 'pdpAspect',
-    name: 'Sample Page',
-    description: 'Sample page of the storefront.',
-    pageTitle: 'title',
-    pageDescription: 'description',
-    pageKeywords: 'keywords',
-    regions: [
-        {
-            id: 'regionA',
-            components: [
-                {
-                    id: 'iofwj38fhw3f',
-                    typeId: 'commerce_assets.banner',
-                    data: {
-                        title: 'Products On Sale',
-                        bannerImage: 'sale/topsellerPromo.jpg'
-                    }
-                }
-            ]
-        },
-        {
-            id: 'regionB',
-            components: [
-                {
-                    id: 'rfdvj4ojtltljw3',
-                    typeId: 'commerce_assets.carousel',
-                    data: {
-                        title: 'Topseller',
-                        category: 'topseller'
-                    },
-                    regions: [
-                        {
-                            id: 'regionB1',
-                            components: [
-                                {
-                                    id: 'rfdvj4ojtltljw3',
-                                    typeId: 'commerce_assets.carousel',
-                                    data: {
-                                        title: 'Topseller',
-                                        category: 'topseller'
-                                    }
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            id: 'regionC',
-            components: []
-        }
-    ]
-}
-
-test('Page renders without errors', () => {
-    const {container} = render(<Page page={SAMPLE_PAGE} components={{}} />)
-
-    // Page is in document.
-    expect(container.querySelector('[id=samplepage]')).toBeInTheDocument()
-
-    // Meta data and title are set
-    const helmet = Helmet.peek()
-    expect(helmet.title).toBe('title')
-    expect(
-        helmet.metaTags.find(
-            ({name, content}) => name === 'description' && content === 'description'
-        )
-    ).toBeTruthy()
-    expect(
-        helmet.metaTags.find(({name, content}) => name === 'keywords' && content === 'keywords')
-    ).toBeTruthy()
-
-    // Regions are in document.
-    expect(container.querySelectorAll('.region')?.length).toBe(3)
-
-    // Components are in document. (Note: Sub-regions/components aren't rendered because that is
-    // the responsibility of the component definition.)
-    expect(container.querySelectorAll('.component')?.length).toBe(2)
-})
diff --git a/packages/template-retail-react-app/app/page-designer/core/region/index.jsx b/packages/template-retail-react-app/app/page-designer/core/region/index.jsx
deleted file mode 100644
index 417c00f507..0000000000
--- a/packages/template-retail-react-app/app/page-designer/core/region/index.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * Copyright (c) 2023, Salesforce, Inc.
- * All rights reserved.
- * SPDX-License-Identifier: BSD-3-Clause
- * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
- */
-import React from 'react'
-import PropTypes from 'prop-types'
-import {Component} from '../component'
-import {regionType} from '../types'
-
-/**
- * This component will render a page designer region given its serialized data object.
- *
- * @param {RegionProps} props
- * @param {Region} props.region - The page designer region data representation.
- * @returns {React.ReactElement} - Region component.
- */
-export const Region = (props) => {
-    const {region, className = '', ...rest} = props
-    const {id, components} = region
-
-    return (
-        <div id={id} className={`region ${className}`} style={{marginBottom: 15}} {...rest}>
-            <div className="container">
-                {components?.map((component) => (
-                    <Component key={component.id} component={component} />
-                ))}
-            </div>
-        </div>
-    )
-}
-
-Region.displayName = 'Region'
-
-Region.propTypes = {
-    region: regionType.isRequired,
-    className: PropTypes.string
-}
-
-export default Region
diff --git a/packages/template-retail-react-app/app/page-designer/core/region/index.test.js b/packages/template-retail-react-app/app/page-designer/core/region/index.test.js
deleted file mode 100644
index 950562707a..0000000000
--- a/packages/template-retail-react-app/app/page-designer/core/region/index.test.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/*
- * Copyright (c) 2023, Salesforce, Inc.
- * All rights reserved.
- * SPDX-License-Identifier: BSD-3-Clause
- * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
- */
-import React from 'react'
-import {render} from '@testing-library/react'
-import Region from './index'
-import {PageContext} from '../page'
-
-const SAMPLE_REGION = {
-    id: 'regionB',
-    components: [
-        {
-            id: 'rfdvj4ojtltljw3',
-            typeId: 'commerce_assets.carousel',
-            data: {
-                title: 'Topseller',
-                category: 'topseller'
-            },
-            regions: [
-                {
-                    id: 'regionB1',
-                    components: [
-                        {
-                            id: 'rfdvj4ojtltljw3',
-                            typeId: 'commerce_assets.carousel',
-                            data: {
-                                title: 'Topseller',
-                                category: 'topseller'
-                            }
-                        }
-                    ]
-                }
-            ]
-        }
-    ]
-}
-
-test('Region throws if used outside of a Page component', () => {
-    expect(() => render(<Region region={SAMPLE_REGION} />)).toThrow()
-})
-
-test('Region renders without errors', () => {
-    const component = <Region region={SAMPLE_REGION} />
-
-    const {container} = render(component, {
-        wrapper: () => (
-            <PageContext.Provider value={{components: {}}}>{component}</PageContext.Provider>
-        )
-    })
-
-    // Regions are in document.
-    expect(container.querySelectorAll('.region')?.length).toBe(1)
-
-    // Components are in document. (Note: Sub-regions/components aren't rendered because that is
-    // the responsibility of the component definition.)
-    expect(container.querySelectorAll('.component')?.length).toBe(1)
-})
diff --git a/packages/template-retail-react-app/app/page-designer/layouts/carousel/index.jsx b/packages/template-retail-react-app/app/page-designer/layouts/carousel/index.jsx
index 7645454f29..edc2e9c936 100644
--- a/packages/template-retail-react-app/app/page-designer/layouts/carousel/index.jsx
+++ b/packages/template-retail-react-app/app/page-designer/layouts/carousel/index.jsx
@@ -15,7 +15,7 @@ import {
     useBreakpoint,
     useBreakpointValue
 } from '@chakra-ui/react'
-import {Component} from '../../core'
+import {Component, regionPropType} from 'commerce-sdk-react-preview/components'
 import {ChevronLeftIcon, ChevronRightIcon} from '../../../components/icons'
 import {useEffect} from 'react'
 
@@ -205,7 +205,7 @@ export const Carousel = (props = {}) => {
 }
 
 Carousel.propTypes = {
-    regions: PropTypes.array.isRequired,
+    regions: PropTypes.arrayOf(regionPropType).isRequired,
     textHeadline: PropTypes.string,
     xsCarouselIndicators: PropTypes.bool,
     smCarouselIndicators: PropTypes.bool,
diff --git a/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid1r1c/index.jsx b/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid1r1c/index.jsx
index df3323f3f7..39c6a54592 100644
--- a/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid1r1c/index.jsx
+++ b/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid1r1c/index.jsx
@@ -7,7 +7,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {SimpleGrid} from '@chakra-ui/react'
-import {Region, regionType} from '../../core'
+import {Region, regionPropType} from 'commerce-sdk-react-preview/components'
 
 /**
  * This layout component displays its children in a 1 x 1 grid on both mobile and desktop.
@@ -30,7 +30,7 @@ MobileGrid1r1c.displayName = 'MobileGrid1r1c'
 
 MobileGrid1r1c.propTypes = {
     // Internally Provided
-    regions: PropTypes.arrayOf(regionType).isRequired
+    regions: PropTypes.arrayOf(regionPropType).isRequired
 }
 
 export default MobileGrid1r1c
diff --git a/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid2r1c/index.jsx b/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid2r1c/index.jsx
index 82496e8a13..360bc24d8f 100644
--- a/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid2r1c/index.jsx
+++ b/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid2r1c/index.jsx
@@ -7,7 +7,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {SimpleGrid} from '@chakra-ui/react'
-import {Region, regionType} from '../../core'
+import {Region, regionPropType} from 'commerce-sdk-react-preview/components'
 
 /**
  * This layout component displays its children in a 2 row x 1 column grid on mobile
@@ -31,7 +31,7 @@ MobileGrid2r1c.displayName = 'MobileGrid2r1c'
 
 MobileGrid2r1c.propTypes = {
     // Internally Provided
-    regions: PropTypes.arrayOf(regionType).isRequired
+    regions: PropTypes.arrayOf(regionPropType).isRequired
 }
 
 export default MobileGrid2r1c
diff --git a/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid2r2c/index.jsx b/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid2r2c/index.jsx
index eeb9cf47e8..c8bbb8f1c8 100644
--- a/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid2r2c/index.jsx
+++ b/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid2r2c/index.jsx
@@ -7,7 +7,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {SimpleGrid} from '@chakra-ui/react'
-import {Region, regionType} from '../../core'
+import {Region, regionPropType} from 'commerce-sdk-react-preview/components'
 
 /**
  * This layout component displays its children in a 2 row x 2 column grid on mobile
@@ -31,7 +31,7 @@ MobileGrid2r2c.displayName = 'MobileGrid2r2c'
 
 MobileGrid2r2c.propTypes = {
     // Internally Provided
-    regions: PropTypes.arrayOf(regionType).isRequired
+    regions: PropTypes.arrayOf(regionPropType).isRequired
 }
 
 export default MobileGrid2r2c
diff --git a/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid2r3c/index.jsx b/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid2r3c/index.jsx
index d063c67d9e..246aef4860 100644
--- a/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid2r3c/index.jsx
+++ b/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid2r3c/index.jsx
@@ -7,7 +7,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {SimpleGrid} from '@chakra-ui/react'
-import {Region, regionType} from '../../core'
+import {Region, regionPropType} from 'commerce-sdk-react-preview/components'
 
 /**
  * This layout component displays its children in a 2 row x 3 column grid on mobile
@@ -31,7 +31,7 @@ MobileGrid2r3c.displayName = 'MobileGrid2r3c'
 
 MobileGrid2r3c.propTypes = {
     // Internally Provided
-    regions: PropTypes.arrayOf(regionType).isRequired
+    regions: PropTypes.arrayOf(regionPropType).isRequired
 }
 
 export default MobileGrid2r3c
diff --git a/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid3r1c/index.jsx b/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid3r1c/index.jsx
index a4384a9327..080710d983 100644
--- a/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid3r1c/index.jsx
+++ b/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid3r1c/index.jsx
@@ -7,7 +7,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {SimpleGrid} from '@chakra-ui/react'
-import {Region, regionType} from '../../core'
+import {Region, regionPropType} from 'commerce-sdk-react-preview/components'
 
 /**
  * This layout component displays its children in a 3 row x 1 column grid on mobile
@@ -31,7 +31,7 @@ MobileGrid3r1c.displayName = 'MobileGrid3r1c'
 
 MobileGrid3r1c.propTypes = {
     // Internally Provided
-    regions: PropTypes.arrayOf(regionType).isRequired
+    regions: PropTypes.arrayOf(regionPropType).isRequired
 }
 
 export default MobileGrid3r1c
diff --git a/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid3r2c/index.jsx b/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid3r2c/index.jsx
index d53d6dad83..d90cc2d435 100644
--- a/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid3r2c/index.jsx
+++ b/packages/template-retail-react-app/app/page-designer/layouts/mobileGrid3r2c/index.jsx
@@ -7,7 +7,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {SimpleGrid} from '@chakra-ui/react'
-import {Region, regionType} from '../../core'
+import {Region, regionPropType} from 'commerce-sdk-react-preview/components'
 
 /**
  * This layout component displays its children in a 3 row x 2 column grid on mobile
@@ -31,7 +31,7 @@ MobileGrid3r2c.displayName = 'MobileGrid3r2c'
 
 MobileGrid3r2c.propTypes = {
     // Internally Provided
-    regions: PropTypes.arrayOf(regionType).isRequired
+    regions: PropTypes.arrayOf(regionPropType).isRequired
 }
 
 export default MobileGrid3r2c
diff --git a/packages/template-retail-react-app/app/utils/test-utils.js b/packages/template-retail-react-app/app/utils/test-utils.js
index 83d34b7933..aed44242bb 100644
--- a/packages/template-retail-react-app/app/utils/test-utils.js
+++ b/packages/template-retail-react-app/app/utils/test-utils.js
@@ -9,13 +9,13 @@ import {render} from '@testing-library/react'
 import {BrowserRouter as Router} from 'react-router-dom'
 import {ChakraProvider} from '@chakra-ui/react'
 import PropTypes from 'prop-types'
-import {PageContext, Region} from '../page-designer/core'
 
 import theme from '../theme'
 import {AddToCartModalProvider} from '../hooks/use-add-to-cart-modal'
 import {ServerContext} from 'pwa-kit-react-sdk/ssr/universal/contexts'
 import {IntlProvider} from 'react-intl'
 import {CommerceApiProvider} from 'commerce-sdk-react-preview'
+import {PageContext, Region} from 'commerce-sdk-react-preview/components'
 import {withReactQuery} from 'pwa-kit-react-sdk/ssr/universal/components/with-react-query'
 import fallbackMessages from '../translations/compiled/en-GB.json'
 import mockConfig from '../../config/mocks/default'