feat: Dynamically import BreadcrumbBase internal components (#2611)

## What's the purpose of this pull request?

This PR is part of the performance initiative and aims to lazy load
`BreadcrumbBase` internal components.

## How does it work?

Since the `BreadcrumbBase` component is inside the `components` package,
and Next isn't on this package, instead of using the `dynamic` function
from `next/dynamic` it uses `lazy` and `Suspense` from React.

## How to test it?

The breadcrumb should continue to work as before. The difference should
be that the internal components (related to Dropdown) are dynamically
imported.
You can test it using the
[preview](https://sfj-135f210--starter.preview.vtex.app/) and accessing
the [Handmade Cotton
Computer](https://sfj-135f210--starter.preview.vtex.app/handmade-cotton-computer-21395412/p)
product, which has a long list of breadcrumbs - that way the breadcrumb
gets collapsed and the Dropdown components are used.
In the Network tab you'll be able to see a `Dropdown.<code>.js` - this
doesn't happen on other pages that don't have a collapsed breadcrumb
list.


https://github.com/user-attachments/assets/20863bcb-14b8-4ad3-bf0d-a34c2cd75abd


### Starters Deploy Preview

https://sfj-135f210--starter.preview.vtex.app/
([PR](vtex-sites/starter.store#645))

## References

- [Jira
task](https://vtex-dev.atlassian.net/jira/software/c/projects/SFS/boards/1051?selectedIssue=SFS-1860)
- [`Next` doc: Lazy
loading](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading)

packages/components/src/molecules/Breadcrumb/BreadcrumbBase.tsx

@@ -1,19 +1,45 @@
 import React, {
   cloneElement,
+  ComponentType,
   forwardRef,
+  lazy,
+  PropsWithChildren,
   ReactElement,
   ReactNode,
+  Suspense,
   useCallback,
 } from 'react'
 import Icon from '../../atoms/Icon'
 import Link from '../../atoms/Link'
-import Dropdown, {
-  DropdownButton,
-  DropdownItem,
-  DropdownMenu,
+import type {
+  DropdownButtonProps,
+  DropdownItemProps,
+  DropdownMenuProps,
+  DropdownProps,
 } from '../Dropdown'
 import BreadcrumbPure, { BreadcrumbPureProps } from './BreadcrumbPure'
 
+const Dropdown = lazy<ComponentType<PropsWithChildren<DropdownProps>>>(
+  () => import(/* webpackChunkName: "Dropdown" */ '../Dropdown/Dropdown')
+)
+
+const DropdownButton = lazy<ComponentType<DropdownButtonProps>>(
+  () =>
+    import(
+      /* webpackChunkName: "DropdownButton" */ '../Dropdown/DropdownButton'
+    )
+)
+
+const DropdownMenu = lazy<ComponentType<DropdownMenuProps>>(
+  () =>
+    import(/* webpackChunkName: "DropdownMenu" */ '../Dropdown/DropdownMenu')
+)
+
+const DropdownItem = lazy<ComponentType<DropdownItemProps>>(
+  () =>
+    import(/* webpackChunkName: "DropdownItem" */ '../Dropdown/DropdownItem')
+)
+
 type ItemElement = {
   item: string
   name: string
@@ -137,26 +163,28 @@ const BreadcrumbBase = forwardRef<HTMLDivElement, BreadcrumbBaseProps>(
           breadcrumbLink({ itemProps: firstItem, collapsed: false })}
 
         {collapseBreadcrumb && (
-          <Dropdown>
-            <DropdownButton
-              aria-label="View More"
-              data-fs-breadcrumb-dropdown-button
-              size="small"
-            >
-              {dropdownButtonIcon}
-            </DropdownButton>
-            <DropdownMenu data-fs-breadcrumb-dropdown-menu>
-              {mediumItems.map((item) => (
-                <DropdownItem
-                  data-fs-breadcrumb-dropdown-item
-                  key={String(item.position)}
-                  icon={collapsedItemsIcon}
-                >
-                  {breadcrumbLink({ itemProps: item, collapsed: true })}
-                </DropdownItem>
-              ))}
-            </DropdownMenu>
-          </Dropdown>
+          <Suspense>
+            <Dropdown>
+              <DropdownButton
+                aria-label="View More"
+                data-fs-breadcrumb-dropdown-button
+                size="small"
+              >
+                {dropdownButtonIcon}
+              </DropdownButton>
+              <DropdownMenu data-fs-breadcrumb-dropdown-menu>
+                {mediumItems.map((item) => (
+                  <DropdownItem
+                    data-fs-breadcrumb-dropdown-item
+                    key={String(item.position)}
+                    icon={collapsedItemsIcon}
+                  >
+                    {breadcrumbLink({ itemProps: item, collapsed: true })}
+                  </DropdownItem>
+                ))}
+              </DropdownMenu>
+            </Dropdown>
+          </Suspense>
         )}
 
         {collapseBreadcrumb &&