processed_docs/pr_data_0_doc_32.txt

Pull Request Number: 4229
Title: fix: fix for next15 support
Base Branch: canary
Head Branch: fix/next15-using-react-create-element
Author: macci001
URL: https://github.com/nextui-org/nextui/pull/4229
State: CLOSED
Created At: 2024-12-05T18:47:27Z
Merged At: None
Participants: macci001, jrgarciadev

Description:
Closes # 
📝 Description

⛳️ Current behavior (updates)

🚀 New behavior

💣 Is this a breaking change (Yes/No):

📝 Additional Information

Commits:
- feat: nextjs 15 migration in progress\n- fix: fix for next15 support\n

Labels:


Comments:
- vercel: [vc]: #buCSiKeyvMUgkDHF4QMBGzzKwRzdq4LfeUiLMvom3aM=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJuZXh0dWktZG9jcy12MiIsInJvb3REaXJlY3RvcnkiOiJhcHBzL2RvY3MiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoiIn0sImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9uZXh0dWktb3JnL25leHR1aS1kb2NzLXYyL0hya3ZwN2E3U1lrckxRczdlaFNFcXM3NkY3SG8iLCJwcmV2aWV3VXJsIjoiIiwibmV4dENvbW1pdFN0YXR1cyI6IkZBSUxFRCJ9LHsibmFtZSI6Im5leHR1aS1zdG9yeWJvb2stdjIiLCJyb290RGlyZWN0b3J5IjoicGFja2FnZXMvc3Rvcnlib29rIiwibGl2ZUZlZWRiYWNrIjp7InJlc29sdmVkIjowLCJ1bnJlc29sdmVkIjowLCJ0b3RhbCI6MCwibGluayI6IiJ9LCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vbmV4dHVpLW9yZy9uZXh0dWktc3Rvcnlib29rLXYyL0FCWW1Tc2VkcXU1R2F0NGpRNEFwZThTVHAzNVUiLCJwcmV2aWV3VXJsIjoiIiwibmV4dENvbW1pdFN0YXR1cyI6IkZBSUxFRCJ9XX0=
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **nextui-docs-v2** | ❌ Failed ([Inspect](https://vercel.com/nextui-org/nextui-docs-v2/Hrkvp7a7SYkrLQs7ehSEqs76F7Ho)) |  |  | Dec 5, 2024 6:47pm |
| **nextui-storybook-v2** | ❌ Failed ([Inspect](https://vercel.com/nextui-org/nextui-storybook-v2/ABYmSsedqu5Gat4jQ4Ape8STp35U)) |  |  | Dec 5, 2024 6:47pm |


\n- changeset-bot: ###  ⚠️  No Changeset found

Latest commit: 743e30e0847510d08f22e31e7944f0e6502664b2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/nextui-org/nextui/new/fix/next15-using-react-create-element?filename=.changeset/new-bananas-trade.md&value=---%0A%22%40nextui-org%2Fautocomplete%22%3A%20patch%0A%22%40nextui-org%2Fdate-picker%22%3A%20patch%0A%22%40nextui-org%2Fnavbar%22%3A%20patch%0A%22%40nextui-org%2Fpopover%22%3A%20patch%0A%22%40nextui-org%2Fselect%22%3A%20patch%0A---%0A%0Afix%3A%20fix%20for%20next15%20support%0A)

\n- coderabbitai: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- This is an auto-generated comment: skip review by coderabbit.ai -->

> [!IMPORTANT]
> ## Review skipped
> 
> Draft detected.
> 
> Please check the settings in the CodeRabbit UI or the `.coderabbit.yaml` file in this repository. To trigger a single review, invoke the `@coderabbitai review` command.
> 
> You can disable this status message by setting the `reviews.review_status` to `false` in the CodeRabbit configuration file.

<!-- end of auto-generated comment: skip review by coderabbit.ai -->

<!-- tips_start -->

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

<details>
<summary>❤️ Share</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

</details>

<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->\n

Files Changed:
- apps/docs/app/blog/[slug]/page.tsx (modified, 10 changes)\n  Patch: @@ -14,9 +14,9 @@ import {Route} from "@/libs/docs/page";
 import {ChevronRightLinearIcon} from "@/components/icons";
 
 interface BlogPostProps {
-  params: {
+  params: Promise<{
     slug: string;
-  };
+  }>;
 }
 
 const isDraftVisible = __DEV__ || __PREVIEW__;
@@ -38,7 +38,8 @@ async function getBlogPostFromParams({params}: BlogPostProps) {
   return {post, currentRoute};
 }
 
-export async function generateMetadata({params}: BlogPostProps): Promise<Metadata> {
+export async function generateMetadata(props: BlogPostProps): Promise<Metadata> {
+  const params = await props.params;
   const {post} = await getBlogPostFromParams({params});
 
   if (!post) {
@@ -78,7 +79,8 @@ export async function generateStaticParams(): Promise<BlogPostProps["params"][]>
   }));
 }
 
-export default async function DocPage({params}: BlogPostProps) {
+export default async function DocPage(props: BlogPostProps) {
+  const params = await props.params;
   const {post} = await getBlogPostFromParams({params});
 
   if (!post || (post.draft && !isDraftVisible)) {\n- apps/docs/app/docs/[[...slug]]/page.tsx (modified, 10 changes)\n  Patch: @@ -13,9 +13,9 @@ import {CONTENT_PATH, TAG} from "@/libs/docs/config";
 import {getHeadings} from "@/libs/docs/utils";
 
 interface DocPageProps {
-  params: {
+  params: Promise<{
     slug: string[];
-  };
+  }>;
 }
 
 async function getDocFromParams({params}: DocPageProps) {
@@ -37,7 +37,8 @@ async function getDocFromParams({params}: DocPageProps) {
   return {doc, headings, currentRoute};
 }
 
-export async function generateMetadata({params}: DocPageProps): Promise<Metadata> {
+export async function generateMetadata(props: DocPageProps): Promise<Metadata> {
+  const params = await props.params;
   const {doc} = await getDocFromParams({params});
 
   if (!doc) {
@@ -77,7 +78,8 @@ export async function generateStaticParams(): Promise<DocPageProps["params"][]>
   }));
 }
 
-export default async function DocPage({params}: DocPageProps) {
+export default async function DocPage(props: DocPageProps) {
+  const params = await props.params;
   const {doc, headings, currentRoute} = await getDocFromParams({params});
 
   if (!doc) {\n- apps/docs/app/layout.tsx (modified, 19 changes)\n  Patch: @@ -1,6 +1,6 @@
 import "@/styles/globals.css";
 import "@/styles/sandpack.css";
-import {Metadata} from "next";
+import {Metadata, Viewport} from "next";
 import {clsx} from "@nextui-org/shared-utils";
 
 import {Providers} from "./providers";
@@ -33,10 +33,6 @@ export const metadata: Metadata = {
     "UI Framework",
     "UI Design System",
   ],
-  themeColor: [
-    {media: "(prefers-color-scheme: light)", color: "white"},
-    {media: "(prefers-color-scheme: dark)", color: "black"},
-  ],
   icons: {
     icon: "/favicon.ico",
     shortcut: "/favicon-32x32.png",
@@ -58,8 +54,17 @@ export const metadata: Metadata = {
       "application/rss+xml": [{url: "https://nextui.org/feed.xml", title: "NextUI RSS Feed"}],
     },
   },
-  viewport:
-    "viewport-fit=cover, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0",
+};
+
+export const viewport: Viewport = {
+  initialScale: 1,
+  themeColor: [
+    {color: "#f4f4f5", media: "(prefers-color-scheme: light)"},
+    {color: "#111111", media: "(prefers-color-scheme: dark)"},
+  ],
+  userScalable: true,
+  viewportFit: "cover",
+  width: "device-width",
 };
 
 export default function RootLayout({children}: {children: React.ReactNode}) {\n- apps/docs/app/page.tsx (modified, 22 changes)\n  Patch: @@ -1,4 +1,5 @@
 import {Spacer} from "@nextui-org/spacer";
+import {Suspense} from "react";
 
 import {Hero} from "@/components/marketing/hero";
 import {FeaturesGrid} from "@/components/marketing/features-grid";
@@ -9,26 +10,11 @@ import {Customization} from "@/components/marketing/customization";
 import {LastButNotLeast} from "@/components/marketing/last-but-not-least";
 import {InstallBanner} from "@/components/marketing/install-banner";
 import {Community} from "@/components/marketing/community";
-import {Support} from "@/components/marketing/support";
+import Support from "@/components/marketing/support";
 import landingContent from "@/content/landing";
-import {getAllSponsors} from "@/utils/get-all-sponsors";
 import {Sponsors} from "@/components/marketing/sponsors";
 
-async function getData() {
-  try {
-    const sponsors = await getAllSponsors();
-
-    return {
-      sponsors,
-    };
-  } catch (error) {
-    throw new Error("Failed to fetch data");
-  }
-}
-
 export default async function Home() {
-  const data = await getData();
-
   return (
     <main className="container mx-auto max-w-7xl px-6 flex-grow">
       <section className="flex flex-col items-center justify-center">
@@ -40,7 +26,9 @@ export default async function Home() {
         <DarkMode />
         <Customization />
         <LastButNotLeast />
-        <Support sponsors={data.sponsors} />
+        <Suspense fallback={<div>Loading...</div>}>
+          <Support />
+        </Suspense>
         <Spacer y={24} />
         <InstallBanner />
         <Community />\n- apps/docs/app/providers.tsx (modified, 4 changes)\n  Patch: @@ -5,7 +5,7 @@ import type {ReactNode} from "react";
 import * as React from "react";
 import {NextUIProvider} from "@nextui-org/react";
 import {ThemeProvider as NextThemesProvider} from "next-themes";
-import {ThemeProviderProps} from "next-themes/dist/types";
+import {ThemeProviderProps} from "next-themes";
 import {useRouter} from "next/navigation";
 import {useEffect} from "react";
 import posthog from "posthog-js";
@@ -23,7 +23,7 @@ export function Providers({children, themeProps}: ProvidersProps) {
 
   const ProviderWrapper = ({children}: {children: ReactNode}) => {
     useEffect(() => {
-      if (typeof window !== "undefined") {
+      if (typeof window !== "undefined" && __PROD__) {
         posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
           api_host: "/ingest",
           person_profiles: "identified_only",\n- apps/docs/components/demos/user-twitter-card.tsx (modified, 6 changes)\n  Patch: @@ -1,15 +1,14 @@
 "use client";
 
-import {useState, FC} from "react";
+import {useState} from "react";
 import {Card, CardHeader, Button, Avatar, CardBody, CardFooter} from "@nextui-org/react";
 import {clsx} from "@nextui-org/shared-utils";
-import NextImage from "next/image";
 
 interface UserTwitterCardProps {
   className?: string;
 }
 
-export const UserTwitterCard: FC<UserTwitterCardProps> = ({className}) => {
+export const UserTwitterCard = ({className}: UserTwitterCardProps) => {
   const [isFollowed, setIsFollowed] = useState(false);
 
   return (
@@ -18,7 +17,6 @@ export const UserTwitterCard: FC<UserTwitterCardProps> = ({className}) => {
         <div className="flex gap-5">
           <Avatar
             isBordered
-            ImgComponent={NextImage}
             alt="Zoey Lang"
             imgProps={{
               width: 40,\n- apps/docs/components/docs/components/code-demo/react-live-demo.tsx (modified, 5 changes)\n  Patch: @@ -1,7 +1,7 @@
 import React from "react";
 import {LivePreview, LiveProvider, LiveError} from "react-live";
 import {clsx} from "@nextui-org/shared-utils";
-import * as Components from "@nextui-org/react";
+import * as NextUI from "@nextui-org/react";
 import * as intlDateUtils from "@internationalized/date";
 import * as reactAriaI18n from "@react-aria/i18n";
 import * as reactHookFormBase from "react-hook-form";
@@ -31,7 +31,8 @@ const reactHookForm = {
 };
 
 export const scope = {
-  ...Components,
+  React,
+  ...NextUI,
   ...intlDateUtils,
   ...reactAriaI18n,
   ...reactHookForm,\n- apps/docs/components/marketing/support-client.tsx (added, 211 changes)\n  Patch: @@ -0,0 +1,211 @@
+"use client";
+
+import {FC, useMemo, useRef} from "react";
+import {Avatar, AvatarProps, Button, Spacer, Tooltip} from "@nextui-org/react";
+import {clamp} from "@nextui-org/shared-utils";
+import {usePostHog} from "posthog-js/react";
+
+import {sectionWrapper, titleWrapper, title, subtitle} from "../primitives";
+
+import {FeaturesGrid} from "./features-grid";
+
+import {OpenCollectiveIcon, PatreonIcon, HeartBoldIcon, PlusLinearIcon} from "@/components/icons";
+import {Sponsor, SPONSOR_TIERS, SPONSOR_COLORS, getTier} from "@/libs/docs/sponsors";
+import {SonarPulse} from "@/components/sonar-pulse";
+import {useIsMobile} from "@/hooks/use-media-query";
+
+export interface SupportProps {
+  sponsors: Sponsor[];
+}
+
+const supportAccounts = [
+  {
+    title: "Open Collective",
+    description: "Sponsor the NextUI maintainers.",
+    icon: <OpenCollectiveIcon className="text-pink-500" />,
+    href: "https://opencollective.com/nextui",
+    isExternal: true,
+  },
+  {
+    title: "Patreon",
+    description: "Sponsor the creator, Junior Garcia.",
+    icon: <PatreonIcon className="text-pink-500" />,
+    href: "https://www.patreon.com/jrgarciadev?fan_landing=true",
+    isExternal: true,
+  },
+];
+
+const SONAR_PULSE_SIZE = 80;
+const SONAR_PULSE_CIRCLES_COUNT = 4;
+const SONAR_PULSE_RADIUS = 130;
+
+const getSponsorName = (sponsor: Sponsor) => {
+  if (!sponsor.name) {
+    return "";
+  }
+
+  return sponsor.name.slice(0, 2).toUpperCase();
+};
+
+const getSponsorSize = (sponsor: Sponsor, isMobile: boolean) => {
+  let size: AvatarProps["size"] = "md";
+  const tier = sponsor.tier || getTier(sponsor.totalAmountDonated);
+
+  switch (tier) {
+    case SPONSOR_TIERS.BRONZE:
+      size = isMobile ? "sm" : "md";
+      break;
+    case SPONSOR_TIERS.SILVER:
+      size = isMobile ? "sm" : "md";
+      break;
+    case SPONSOR_TIERS.GOLD:
+      size = isMobile ? "md" : "lg";
+      break;
+    case SPONSOR_TIERS.PLATINUM:
+      size = isMobile ? "md" : "lg";
+      break;
+    default:
+      size = isMobile ? "sm" : "md";
+  }
+
+  return size;
+};
+
+const getSponsorColor = (sponsor: Sponsor) => {
+  const tier = sponsor.tier || getTier(sponsor.totalAmountDonated);
+
+  return SPONSOR_COLORS[tier] || "default";
+};
+
+const getSponsorAvatarStyles = (index: number, sponsors: Sponsor[] = []) => {
+  const angle = (index * 360) / sponsors.length;
+  const radius = SONAR_PULSE_RADIUS;
+
+  // position the avatar randomly inside the sonar pulse
+  const randomRadius = clamp(Math.floor((index + 1) * radius), radius * 0.4, radius);
+
+  const x = randomRadius * Math.cos((angle * Math.PI) / 180);
+  const y = randomRadius * Math.sin((angle * Math.PI) / 180);
+
+  return {
+    transform: `translate(${x}px, ${y}px)`,
+  };
+};
+
+export const Support: FC<SupportProps> = ({sponsors = []}) => {
+  const sonarRef = useRef(null);
+  const isMobile = useIsMobile();
+  const posthog = usePostHog();
+
+  const handleExternalLinkClick = (href: string) => {
+    if (!href) return;
+    window.open(href, "_blank");
+  };
+
+  const handleBecomeSponsor = () => {
+    posthog.capture("Support - Become a sponsor", {
+      action: "click",
+      category: "landing-page",
+    });
+
+    handleExternalLinkClick(supportAccounts[0].href);
+  };
+  const renderSponsors = useMemo(() => {
+    if (!sponsors.length) return null;
+
+    return (
+      <div
+        className="absolute rounded-full bg-transparent"
+        style={{
+          width: `${SONAR_PULSE_RADIUS}px`,
+          top: SONAR_PULSE_RADIUS / 6,
+          left: SONAR_PULSE_RADIUS / 6,
+        }}
+      >
+        {sponsors.map((sponsor, index) => (
+          <Avatar
+            key={`${sponsor.MemberId}-${index}`}
+            isBordered
+            showFallback
+            className="absolute cursor-pointer bg-transparent before:bg-white/10 before:content-[''] before:block before:z-[-1] before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-200"
+            color={getSponsorColor(sponsor) as AvatarProps["color"]}
+            name={getSponsorName(sponsor)}
+            size={getSponsorSize(sponsor, isMobile)}
+            src={sponsor.image}
+            style={getSponsorAvatarStyles(index, sponsors)}
+            onClick={() => handleExternalLinkClick(sponsor["website"] || sponsor["profile"])}
+          />
+        ))}
+      </div>
+    );
+  }, [isMobile, sponsors]);
+
+  return (
+    <section className={sectionWrapper({class: "flex flex-col items-center z-20 mt-16 lg:mt-44"})}>
+      <div className="max-w-4xl flex flex-col gap-8">
+        <div>
+          <div className={titleWrapper({class: "text-center items-center"})}>
+            <div className="flex md:inline-flex flex-col md:flex-row items-center">
+              <h1 className={title({size: "lg"})}>Support NextUI&nbsp;</h1>
+              <HeartBoldIcon
+                className="text-pink-500 animate-heartbeat"
+                size={50}
+                style={{
+                  animationDuration: "2.5s",
+                }}
+              />
+            </div>
+          </div>
+          <p
+            className={subtitle({class: "md:w-full text-center flex justify-center items-center"})}
+          >
+            Using NextUI in a profit-making product, as a freelancer, or for fun projects? Your
+            contributions will help to make NextUI better.
+          </p>
+          <Spacer y={12} />
+          <FeaturesGrid
+            classNames={{
+              base: "lg:grid-cols-2",
+            }}
+            features={supportAccounts}
+          />
+          <div
+            ref={sonarRef}
+            className="relative mt-32 md:mt-60 w-full flex items-center justify-center"
+          >
+            <SonarPulse
+              circlesCount={SONAR_PULSE_CIRCLES_COUNT}
+              color="#7928CA"
+              icon={
+                <Tooltip
+                  showArrow
+                  color="secondary"
+                  content={"Become a sponsor"}
+                  offset={10}
+                  radius="full"
+                >
+                  <Button
+                    isIconOnly
+                    aria-label="Become a sponsor"
+                    className="z-50 w-auto h-auto bg-gradient-to-b from-[#FF1CF7] to-[#7928CA]"
+                    radius="full"
+                    onPress={handleBecomeSponsor}
+                  >
+                    <PlusLinearIcon
+                      className="flex items-center justify-center rounded-full text-white"
+                      size={54}
+                    />
+                  </Button>
+                </Tooltip>
+              }
+              playState="running"
+              size={SONAR_PULSE_SIZE}
+            >
+              {renderSponsors}
+            </SonarPulse>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};\n- apps/docs/components/marketing/support.tsx (modified, 220 changes)\n  Patch: @@ -1,211 +1,21 @@
-"use client";
+import {Support as SupportClient} from "./support-client";
 
-import {FC, useMemo, useRef} from "react";
-import {Avatar, AvatarProps, Button, Spacer, Tooltip} from "@nextui-org/react";
-import {clamp} from "@nextui-org/shared-utils";
-import {usePostHog} from "posthog-js/react";
+import {getAllSponsors} from "@/utils/get-all-sponsors";
 
-import {sectionWrapper, titleWrapper, title, subtitle} from "../primitives";
+async function getData() {
+  try {
+    const sponsors = await getAllSponsors();
 
-import {FeaturesGrid} from "./features-grid";
-
-import {OpenCollectiveIcon, PatreonIcon, HeartBoldIcon, PlusLinearIcon} from "@/components/icons";
-import {Sponsor, SPONSOR_TIERS, SPONSOR_COLORS, getTier} from "@/libs/docs/sponsors";
-import {SonarPulse} from "@/components/sonar-pulse";
-import {useIsMobile} from "@/hooks/use-media-query";
-
-export interface SupportProps {
-  sponsors: Sponsor[];
-}
-
-const supportAccounts = [
-  {
-    title: "Open Collective",
-    description: "Sponsor the NextUI maintainers.",
-    icon: <OpenCollectiveIcon className="text-pink-500" />,
-    href: "https://opencollective.com/nextui",
-    isExternal: true,
-  },
-  {
-    title: "Patreon",
-    description: "Sponsor the creator, Junior Garcia.",
-    icon: <PatreonIcon className="text-pink-500" />,
-    href: "https://www.patreon.com/jrgarciadev?fan_landing=true",
-    isExternal: true,
-  },
-];
-
-const SONAR_PULSE_SIZE = 80;
-const SONAR_PULSE_CIRCLES_COUNT = 4;
-const SONAR_PULSE_RADIUS = 130;
-
-const getSponsorName = (sponsor: Sponsor) => {
-  if (!sponsor.name) {
-    return "";
+    return {
+      sponsors,
+    };
+  } catch (error) {
+    throw new Error("Failed to fetch data");
   }
+}
 
-  return sponsor.name.slice(0, 2).toUpperCase();
-};
-
-const getSponsorSize = (sponsor: Sponsor, isMobile: boolean) => {
-  let size: AvatarProps["size"] = "md";
-  const tier = sponsor.tier || getTier(sponsor.totalAmountDonated);
-
-  switch (tier) {
-    case SPONSOR_TIERS.BRONZE:
-      size = isMobile ? "sm" : "md";
-      break;
-    case SPONSOR_TIERS.SILVER:
-      size = isMobile ? "sm" : "md";
-      break;
-    case SPONSOR_TIERS.GOLD:
-      size = isMobile ? "md" : "lg";
-      break;
-    case SPONSOR_TIERS.PLATINUM:
-      size = isMobile ? "md" : "lg";
-      break;
-    default:
-      size = isMobile ? "sm" : "md";
-  }
-
-  return size;
-};
-
-const getSponsorColor = (sponsor: Sponsor) => {
-  const tier = sponsor.tier || getTier(sponsor.totalAmountDonated);
-
-  return SPONSOR_COLORS[tier] || "default";
-};
-
-const getSponsorAvatarStyles = (index: number, sponsors: Sponsor[] = []) => {
-  const angle = (index * 360) / sponsors.length;
-  const radius = SONAR_PULSE_RADIUS;
-
-  // position the avatar randomly inside the sonar pulse
-  const randomRadius = clamp(Math.floor((index + 1) * radius), radius * 0.4, radius);
-
-  const x = randomRadius * Math.cos((angle * Math.PI) / 180);
-  const y = randomRadius * Math.sin((angle * Math.PI) / 180);
-
-  return {
-    transform: `translate(${x}px, ${y}px)`,
-  };
-};
-
-export const Support: FC<SupportProps> = ({sponsors = []}) => {
-  const sonarRef = useRef(null);
-  const isMobile = useIsMobile();
-  const posthog = usePostHog();
-
-  const handleExternalLinkClick = (href: string) => {
-    if (!href) return;
-    window.open(href, "_blank");
-  };
-
-  const handleBecomeSponsor = () => {
-    posthog.capture("Support - Become a sponsor", {
-      action: "click",
-      category: "landing-page",
-    });
-
-    handleExternalLinkClick(supportAccounts[0].href);
-  };
-  const renderSponsors = useMemo(() => {
-    if (!sponsors.length) return null;
-
-    return (
-      <div
-        className="absolute rounded-full bg-transparent"
-        style={{
-          width: `${SONAR_PULSE_RADIUS}px`,
-          top: SONAR_PULSE_RADIUS / 6,
-          left: SONAR_PULSE_RADIUS / 6,
-        }}
-      >
-        {sponsors.map((sponsor, index) => (
-          <Avatar
-            key={`${sponsor.MemberId}-${index}`}
-            isBordered
-            showFallback
-            className="absolute cursor-pointer bg-transparent before:bg-white/10 before:content-[''] before:block before:z-[-1] before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-200"
-            color={getSponsorColor(sponsor) as AvatarProps["color"]}
-            name={getSponsorName(sponsor)}
-            size={getSponsorSize(sponsor, isMobile)}
-            src={sponsor.image}
-            style={getSponsorAvatarStyles(index, sponsors)}
-            onClick={() => handleExternalLinkClick(sponsor["website"] || sponsor["profile"])}
-          />
-        ))}
-      </div>
-    );
-  }, [isMobile, sponsors]);
+export default async function Support() {
+  const data = await getData();
 
-  return (
-    <section className={sectionWrapper({class: "flex flex-col items-center z-20 mt-16 lg:mt-44"})}>
-      <div className="max-w-4xl flex flex-col gap-8">
-        <div>
-          <div className={titleWrapper({class: "text-center items-center"})}>
-            <div className="flex md:inline-flex flex-col md:flex-row items-center">
-              <h1 className={title({size: "lg"})}>Support NextUI&nbsp;</h1>
-              <HeartBoldIcon
-                className="text-pink-500 animate-heartbeat"
-                size={50}
-                style={{
-                  animationDuration: "2.5s",
-                }}
-              />
-            </div>
-          </div>
-          <p
-            className={subtitle({class: "md:w-full text-center flex justify-center items-center"})}
-          >
-            Using NextUI in a profit-making product, as a freelancer, or for fun projects? Your
-            contributions will help to make NextUI better.
-          </p>
-          <Spacer y={12} />
-          <FeaturesGrid
-            classNames={{
-              base: "lg:grid-cols-2",
-            }}
-            features={supportAccounts}
-          />
-          <div
-            ref={sonarRef}
-            className="relative mt-32 md:mt-60 w-full flex items-center justify-center"
-          >
-            <SonarPulse
-              circlesCount={SONAR_PULSE_CIRCLES_COUNT}
-              color="#7928CA"
-              icon={
-                <Tooltip
-                  showArrow
-                  color="secondary"
-                  content={"Become a sponsor"}
-                  offset={10}
-                  radius="full"
-                >
-                  <Button
-                    isIconOnly
-                    aria-label="Become a sponsor"
-                    className="z-50 w-auto h-auto bg-gradient-to-b from-[#FF1CF7] to-[#7928CA]"
-                    radius="full"
-                    onPress={handleBecomeSponsor}
-                  >
-                    <PlusLinearIcon
-                      className="flex items-center justify-center rounded-full text-white"
-                      size={54}
-                    />
-                  </Button>
-                </Tooltip>
-              }
-              playState="running"
-              size={SONAR_PULSE_SIZE}
-            >
-              {renderSponsors}
-            </SonarPulse>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
+  return <SupportClient sponsors={data.sponsors} />;
+}\n- apps/docs/components/theme-switch.tsx (modified, 6 changes)\n  Patch: @@ -20,6 +20,8 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({className, classNames}) => {
   const isSSR = useIsSSR();
   const posthog = usePostHog();
 
+  const initialTheme = isSSR ? "light" : theme;
+
   const onChange = () => {
     theme === "light" ? setTheme("dark") : setTheme("light");
 
@@ -31,8 +33,8 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({className, classNames}) => {
   };
 
   const {Component, slots, isSelected, getBaseProps, getInputProps, getWrapperProps} = useSwitch({
-    isSelected: theme === "light",
-    "aria-label": `Switch to ${theme === "light" ? "dark" : "light"} mode`,
+    isSelected: initialTheme === "light",
+    "aria-label": `Switch to ${initialTheme === "light" ? "dark" : "light"} mode`,
     onChange,
   });
 \n- apps/docs/config/routes.json (modified, 12 changes)\n  Patch: @@ -12,6 +12,12 @@
           "keywords": "introduction, nextui",
           "path": "/docs/guide/introduction.mdx"
         },
+        {
+          "key": "design-principles",
+          "title": "Design Principles",
+          "keywords": "design principles, nextui",
+          "path": "/docs/guide/design-principles.mdx"
+        },
         {
           "key": "installation",
           "title": "Installation",
@@ -24,12 +30,6 @@
           "keywords": "cli, command line interface",
           "path": "/docs/guide/cli.mdx"
         },
-        {
-          "key": "design-principles",
-          "title": "Design Principles",
-          "keywords": "design principles, nextui",
-          "path": "/docs/guide/design-principles.mdx"
-        },
         {
           "key": "routing",
           "title": "Routing",\n- apps/docs/content/blog/v2.6.0.mdx (modified, 4 changes)\n  Patch: @@ -2,7 +2,7 @@
 title: "NextUI v2.6.0 🔥"
 description: "NextUI v2.6.0 includes 4 new components, React 19 & Next.js 15 support, and lots of bug fixes and improvements."
 date: "2024-12-03"
-image: "/blog/v2.6.0.jpg"
+image: "/blog/v2.4.0.jpg"
 tags: ["nextui", "v2.6.0", "release", "bug fixes", "improvements", "animations"]
 author:
   name: "Junior Garcia"
@@ -14,7 +14,7 @@ author:
 import {formContent} from "@/content/components/form";
 
 <img
-  src="/blog/v2.6.0_2x.jpg"
+  src="/blog/v2.4.0_2x.jpg"
   width={700}
   height={350}
   alt="NextUI v2.6.0"\n- apps/docs/next.config.js (modified, 28 changes)\n  Patch: @@ -3,7 +3,6 @@ const withContentlayer = require("next-contentlayer2").withContentlayer;
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   transpilePackages: ["@nextui-org/react", "@nextui-org/theme"],
-  swcMinify: true,
   reactStrictMode: true, // Recommended for the `pages` directory, default in `app`.
   redirects: require("./next-redirect.js"),
   eslint: {
@@ -14,12 +13,27 @@ const nextConfig = {
     ignoreBuildErrors: true,
   },
   images: {
-    domains: [
-      "opencollective-production.s3.us-west-1.amazonaws.com",
-      "avatars.githubusercontent.com",
-      "logo.clearbit.com",
-      "i.pravatar.cc",
-      "nextui.org",
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "opencollective-production.s3.us-west-1.amazonaws.com",
+      },
+      {
+        protocol: "https",
+        hostname: "avatars.githubusercontent.com",
+      },
+      {
+        protocol: "https",
+        hostname: "logo.clearbit.com",
+      },
+      {
+        protocol: "https",
+        hostname: "i.pravatar.cc",
+      },
+      {
+        protocol: "https",
+        hostname: "nextui.org",
+      },
     ],
   },
   rewrites: async () => {\n- apps/docs/package.json (modified, 76 changes)\n  Patch: @@ -3,7 +3,7 @@
   "version": "2.0.0",
   "private": true,
   "scripts": {
-    "dev": "rimraf .contentlayer && concurrently \"contentlayer2 dev\" \"next dev\"",
+    "dev": "rimraf .contentlayer && concurrently \"contentlayer2 dev\" \"next dev --turbopack\"",
     "build": "contentlayer2 build && next build ",
     "build:analyze": "ANALYZE=true next build",
     "start": "next start",
@@ -18,8 +18,8 @@
   "dependencies": {
     "@codesandbox/sandpack-react": "^2.6.4",
     "@emotion/is-prop-valid": "^1.3.1",
-    "@iconify/icons-solar": "^1.2.3",
-    "@iconify/react": "^4.1.1",
+    "@iconify/icons-solar": "1.2.3",
+    "@iconify/react": "5.0.2",
     "@internationalized/date": "3.5.6",
     "@mapbox/rehype-prism": "^0.6.0",
     "@nextui-org/aria-utils": "workspace:*",
@@ -52,57 +52,59 @@
     "@react-stately/layout": "3.13.9",
     "@react-stately/tree": "3.8.1",
     "@rehooks/local-storage": "^2.4.5",
+    "@tanstack/react-virtual": "3.10.9",
     "canvas-confetti": "^1.9.2",
     "cmdk": "^0.2.0",
-    "color2k": "^2.0.2",
-    "contentlayer2": "^0.5.1",
-    "date-fns": "^2.30.0",
-    "framer-motion": "11.9.0",
-    "geist": "^1.3.1",
+    "color2k": "2.0.3",
+    "contentlayer2": "0.5.3",
+    "date-fns": "4.1.0",
+    "framer-motion": "11.11.13",
+    "geist": "1.3.1",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",
     "hast-util-to-html": "9.0.3",
     "marked": "^5.1.0",
-    "match-sorter": "^6.3.1",
-    "mini-svg-data-uri": "^1.4.3",
-    "mitt": "3.0.0",
-    "next": "13.5.1",
-    "next-contentlayer2": "^0.5.1",
-    "next-themes": "^0.2.1",
+    "match-sorter": "8.0.0",
+    "mini-svg-data-uri": "1.4.4",
+    "mitt": "3.0.1",
+    "next": "15.0.3",
+    "next-contentlayer2": "0.5.3",
+    "next-themes": "0.4.3",
     "nprogress": "^0.2.0",
     "parse-numeric-range": "1.2.0",
-    "posthog-js": "1.187.1",
+    "posthog-js": "1.184.1",
     "prism-react-renderer": "^1.2.1",
     "querystring": "^0.2.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-hook-form": "^7.51.3",
     "react-icons": "^4.10.1",
-    "react-live": "^2.3.0",
+    "react-live": "^4.1.8",
     "react-multi-ref": "^1.0.1",
     "react-wrap-balancer": "^1.0.0",
     "refractor": "3.3.1",
     "rehype": "13.0.2",
     "rehype-parse": "9.0.1",
     "rehype-pretty-code": "^0.14.0",
-    "rehype-slug": "^6.0.0",
+    "rehype-slug": "6.0.0",
     "remark": "^15.0.1",
-    "remark-gfm": "^4.0.0",
-    "rss": "^1.2.2",
-    "scroll-into-view-if-needed": "3.0.10",
+    "remark-gfm": "4.0.0",
+    "rss": "1.2.2",
+    "scroll-into-view-if-needed": "3.1.0",
     "sharp": "^0.32.1",
     "shelljs": "^0.8.4",
-    "swr": "^2.2.1",
+    "swr": "2.2.5",
     "tailwind-variants": "^0.1.20",
     "unified": "^11.0.5",
-    "unist-util-visit": "^5.0.0",
-    "usehooks-ts": "^2.9.1",
-    "zustand": "^4.3.8"
+    "unist-util-visit": "5.0.0",
+    "usehooks-ts": "3.1.0",
+    "zustand": "5.0.1"
   },
   "devDependencies": {
     "@docusaurus/utils": "2.0.0-beta.3",
-    "@next/bundle-analyzer": "^13.4.6",
-    "@next/env": "^13.4.12",
+    "@next/bundle-analyzer": "15.0.3",
+    "@next/env": "15.0.3",
+    "mdx-bundler": "10.0.3",
     "@react-types/calendar": "3.4.10",
     "@react-types/datepicker": "3.8.3",
     "@react-types/shared": "3.25.0",
@@ -116,22 +118,28 @@
     "@types/react": "18.2.8",
     "@types/react-dom": "18.2.4",
     "@types/refractor": "^3.0.2",
-    "@types/rss": "^0.0.30",
+    "@types/rss": "0.0.32",
     "@types/shelljs": "^0.8.9",
     "@types/uuid": "^8.3.1",
     "algoliasearch": "^4.10.3",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "10.4.20",
     "dotenv": "^16.0.1",
     "esbuild-plugin-raw": "0.1.8",
-    "eslint-config-next": "^13.5.1",
+    "eslint-config-next": "15.0.3",
     "markdown-toc": "^1.2.0",
-    "next-sitemap": "^4.1.8",
+    "next-sitemap": "4.2.3",
     "node-fetch": "^3.2.10",
-    "postcss": "^8.4.21",
+    "postcss": "8.4.49",
     "prettier": "^2.7.1",
-    "tailwindcss": "^3.4.0",
+    "tailwindcss": "3.4.14",
     "tsx": "^3.8.2",
     "typescript": "^5.5.0",
     "uuid": "^8.3.2"
+  },
+  "pnpm": {
+    "overrides": {
+      "react": "18.2.0",
+      "react-dom": "18.2.0"
+    }
   }
 }\n- apps/docs/styles/globals.css (modified, 8 changes)\n  Patch: @@ -1,11 +1,11 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 @import 'prism.css';
 @import 'nprogress.css';
 @import 'ads.css';
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 html {
   font-size: 16px;
   padding: 0px !important;\n- package.json (modified, 4 changes)\n  Patch: @@ -142,8 +142,8 @@
   },
   "pnpm": {
     "overrides": {
-      "react": "^18.2.0",
-      "react-dom": "^18.2.0",
+      "react": "18.2.0",
+      "react-dom": "18.2.0",
       "@changesets/get-github-info": "0.6.0"
     }
   },\n- packages/components/autocomplete/src/autocomplete.tsx (modified, 31 changes)\n  Patch: @@ -7,6 +7,7 @@ import {Button} from "@nextui-org/button";
 import {Input} from "@nextui-org/input";
 import {ForwardedRef, ReactElement} from "react";
 import {AnimatePresence} from "framer-motion";
+import * as React from "react";
 
 import {UseAutocompleteProps, useAutocomplete} from "./use-autocomplete";
 
@@ -49,18 +50,24 @@ const Autocomplete = forwardRef(function Autocomplete<T extends object>(
   ) : null;
 
   return (
-    <Component {...getBaseProps()}>
-      <Input
-        {...getInputProps()}
-        endContent={
-          <div {...getEndContentWrapperProps()}>
-            {endContent || <Button {...getClearButtonProps()}>{clearIcon}</Button>}
-            <Button {...getSelectorButtonProps()}>{selectorIcon}</Button>
-          </div>
-        }
-      />
-      {disableAnimation ? popoverContent : <AnimatePresence>{popoverContent}</AnimatePresence>}
-    </Component>
+    <>
+      {React.createElement(
+        Component,
+        getBaseProps(),
+        <>
+          <Input
+            {...getInputProps()}
+            endContent={
+              <div {...getEndContentWrapperProps()}>
+                {endContent || <Button {...getClearButtonProps()}>{clearIcon}</Button>}
+                <Button {...getSelectorButtonProps()}>{selectorIcon}</Button>
+              </div>
+            }
+          />
+          {disableAnimation ? popoverContent : <AnimatePresence>{popoverContent}</AnimatePresence>}
+        </>,
+      )}
+    </>
   );
 }) as <T extends object>(props: AutocompleteProps<T>) => ReactElement;
 \n- packages/components/autocomplete/src/use-autocomplete.ts (modified, 5 changes)\n  Patch: @@ -7,7 +7,7 @@ import {autocomplete} from "@nextui-org/theme";
 import {useFilter} from "@react-aria/i18n";
 import {FilterFn, useComboBoxState} from "@react-stately/combobox";
 import {ReactRef, useDOMRef} from "@nextui-org/react-utils";
-import {ReactNode, useEffect, useMemo, useRef} from "react";
+import {ElementType, ReactNode, useEffect, useMemo, useRef} from "react";
 import {ComboBoxProps} from "@react-types/combobox";
 import {PopoverProps} from "@nextui-org/popover";
 import {ListboxProps} from "@nextui-org/listbox";
@@ -377,7 +377,7 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
     };
   }
 
-  const Component = as || "div";
+  const Component: ElementType = as || "div";
 
   const slots = useMemo(
     () =>
@@ -537,6 +537,7 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
   });
 
   return {
+    as,
     Component,
     inputRef,
     label,\n- packages/components/date-picker/src/date-range-picker-field.tsx (modified, 40 changes)\n  Patch: @@ -13,6 +13,7 @@ import {DateInputSegment} from "@nextui-org/date-input";
 import {filterDOMProps, useDOMRef} from "@nextui-org/react-utils";
 import {useLocale} from "@react-aria/i18n";
 import {mergeProps} from "@react-aria/utils";
+import * as React from "react";
 
 type NextUIBaseProps<T extends DateValue> = Omit<
   HTMLNextUIProps<"div">,
@@ -54,29 +55,34 @@ const DateRangePickerField = forwardRef(function DateRangePickerField<T extends
 
   const inputRef = useRef(null);
 
-  const {
-    fieldProps,
-    inputProps,
-    isInvalid: ariaIsInvalid,
-  } = useAriaDateField({...otherProps, inputRef}, state, domRef);
+  const {fieldProps, isInvalid: ariaIsInvalid} = useAriaDateField(
+    {...otherProps, inputRef},
+    state,
+    domRef,
+  );
 
   const isInvalid = props.isInvalid || ariaIsInvalid;
 
   state.isInvalid = isInvalid;
 
   return (
-    <Component {...mergeProps(fieldProps, filterDOMProps(otherProps))} ref={domRef}>
-      {state.segments.map((segment, i) => (
-        <DateInputSegment
-          key={i}
-          classNames={classNames}
-          segment={segment}
-          slots={slots}
-          state={state}
-        />
-      ))}
-      <input {...inputProps} ref={inputRef} />
-    </Component>
+    <>
+      {React.createElement(
+        Component,
+        {...mergeProps(fieldProps, filterDOMProps(otherProps)), ref: {domRef}},
+        <>
+          {state.segments.map((segment, i) => (
+            <DateInputSegment
+              key={i}
+              classNames={classNames}
+              segment={segment}
+              slots={slots}
+              state={state}
+            />
+          ))}
+        </>,
+      )}
+    </>
   );
 }) as <T extends DateValue>(props: DateRangePickerFieldProps<T>) => ReactElement;
 \n- packages/components/navbar/package.json (modified, 26 changes)\n  Patch: @@ -34,41 +34,41 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18 || >=19.0.0-rc.0",
-    "react-dom": ">=18 || >=19.0.0-rc.0",
-    "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
+    "@nextui-org/system": ">=2.3.0-beta.0",
     "@nextui-org/theme": ">=2.3.0-beta.0",
-    "@nextui-org/system": ">=2.3.0-beta.0"
+    "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0"
   },
   "dependencies": {
-    "@nextui-org/shared-utils": "workspace:*",
-    "@nextui-org/react-utils": "workspace:*",
+    "@nextui-org/dom-animation": "workspace:*",
     "@nextui-org/framer-utils": "workspace:*",
+    "@nextui-org/react-utils": "workspace:*",
+    "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/use-aria-toggle-button": "workspace:*",
     "@nextui-org/use-scroll-position": "workspace:*",
-    "@nextui-org/dom-animation": "workspace:*",
     "@react-aria/focus": "3.18.4",
     "@react-aria/interactions": "3.22.4",
     "@react-aria/overlays": "3.23.4",
     "@react-aria/utils": "3.26.0",
     "@react-stately/toggle": "3.7.8",
     "@react-stately/utils": "3.10.4",
-    "react-remove-scroll": "^2.5.6"
+    "react-remove-scroll": "^2.6.0"
   },
   "devDependencies": {
-    "@nextui-org/theme": "workspace:*",
-    "@nextui-org/system": "workspace:*",
     "@nextui-org/avatar": "workspace:*",
     "@nextui-org/button": "workspace:*",
     "@nextui-org/dropdown": "workspace:*",
     "@nextui-org/input": "workspace:*",
     "@nextui-org/link": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
-    "framer-motion": "11.9.0",
-    "react-lorem-component": "0.13.0",
+    "@nextui-org/system": "workspace:*",
+    "@nextui-org/theme": "workspace:*",
     "clean-package": "2.2.0",
+    "framer-motion": "11.9.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "react-lorem-component": "0.13.0"
   },
   "clean-package": "../../../clean-package.config.json"
 }
\ No newline at end of file\n- packages/components/navbar/src/navbar-brand.tsx (modified, 11 changes)\n  Patch: @@ -1,6 +1,7 @@
 import {forwardRef, HTMLNextUIProps} from "@nextui-org/system";
 import {useDOMRef} from "@nextui-org/react-utils";
 import {clsx} from "@nextui-org/shared-utils";
+import * as React from "react";
 
 import {useNavbarContext} from "./navbar-context";
 
@@ -19,9 +20,13 @@ const NavbarBrand = forwardRef<"div", NavbarBrandProps>((props, ref) => {
   const styles = clsx(classNames?.brand, className);
 
   return (
-    <Component ref={domRef} className={slots.brand?.({class: styles})} {...otherProps}>
-      {children}
-    </Component>
+    <>
+      {React.createElement(
+        Component,
+        {ref: domRef, className: slots.brand?.({class: styles}), ...otherProps},
+        <>{children}</>,
+      )}
+    </>
   );
 });
 \n- packages/components/navbar/src/navbar-content.tsx (modified, 21 changes)\n  Patch: @@ -1,6 +1,7 @@
 import {forwardRef, HTMLNextUIProps} from "@nextui-org/system";
 import {useDOMRef} from "@nextui-org/react-utils";
 import {clsx} from "@nextui-org/shared-utils";
+import * as React from "react";
 
 import {useNavbarContext} from "./navbar-context";
 
@@ -27,14 +28,18 @@ const NavbarContent = forwardRef<"ul", NavbarContentProps>((props, ref) => {
   const styles = clsx(classNames?.content, className);
 
   return (
-    <Component
-      ref={domRef}
-      className={slots.content?.({class: styles})}
-      data-justify={justify}
-      {...otherProps}
-    >
-      {children}
-    </Component>
+    <>
+      {React.createElement(
+        Component,
+        {
+          ref: domRef,
+          className: slots.content?.({class: styles}),
+          "data-justify": justify,
+          ...otherProps,
+        },
+        <>{children}</>,
+      )}
+    </>
   );
 });
 \n- packages/components/navbar/src/navbar-item.tsx (modified, 21 changes)\n  Patch: @@ -1,6 +1,7 @@
 import {forwardRef, HTMLNextUIProps} from "@nextui-org/system";
 import {useDOMRef} from "@nextui-org/react-utils";
 import {clsx, dataAttr} from "@nextui-org/shared-utils";
+import * as React from "react";
 
 import {useNavbarContext} from "./navbar-context";
 
@@ -24,14 +25,18 @@ const NavbarItem = forwardRef<"li", NavbarItemProps>((props, ref) => {
   const styles = clsx(classNames?.item, className);
 
   return (
-    <Component
-      ref={domRef}
-      className={slots.item?.({class: styles})}
-      data-active={dataAttr(isActive)}
-      {...otherProps}
-    >
-      {children}
-    </Component>
+    <>
+      {React.createElement(
+        Component,
+        {
+          ref: domRef,
+          className: slots.item?.({class: styles}),
+          "data-active": dataAttr(isActive),
+          ...otherProps,
+        },
+        <>{children}</>,
+      )}
+    </>
   );
 });
 \n- packages/components/navbar/src/navbar-menu-toggle.tsx (modified, 31 changes)\n  Patch: @@ -7,6 +7,7 @@ import {useFocusRing} from "@react-aria/focus";
 import {mergeProps} from "@react-aria/utils";
 import {useHover} from "@react-aria/interactions";
 import {useMemo, ReactNode} from "react";
+import * as React from "react";
 
 import {useNavbarContext} from "./navbar-context";
 
@@ -74,18 +75,24 @@ const NavbarMenuToggle = forwardRef<"button", NavbarMenuToggleProps>((props, ref
   }, [srOnlyTextProp, isMenuOpen]);
 
   return (
-    <Component
-      ref={domRef}
-      className={slots.toggle?.({class: toggleStyles})}
-      data-focus-visible={dataAttr(isFocusVisible)}
-      data-hover={dataAttr(isHovered)}
-      data-open={dataAttr(isMenuOpen)}
-      data-pressed={dataAttr(isPressed)}
-      {...mergeProps(buttonProps, focusProps, hoverProps, otherProps)}
-    >
-      <span className={slots.srOnly()}>{srOnlyText}</span>
-      {child}
-    </Component>
+    <>
+      {React.createElement(
+        Component,
+        {
+          ref: domRef,
+          className: slots.toggle?.({class: toggleStyles}),
+          "data-focus-visible": dataAttr(isFocusVisible),
+          "data-hover": dataAttr(isHovered),
+          "data-open": dataAttr(isMenuOpen),
+          "data-pressed": dataAttr(isPressed),
+          ...mergeProps(buttonProps, focusProps, hoverProps, otherProps),
+        },
+        <>
+          <span className={slots.srOnly()}>{srOnlyText}</span>
+          {child}
+        </>,
+      )}
+    </>
   );
 });
 \n- packages/components/navbar/src/navbar.tsx (modified, 3 changes)\n  Patch: @@ -2,6 +2,7 @@ import {forwardRef} from "@nextui-org/system";
 import {pickChildren} from "@nextui-org/react-utils";
 import {LazyMotion, m} from "framer-motion";
 import {mergeProps} from "@react-aria/utils";
+import * as React from "react";
 
 import {hideOnScrollVariants} from "./navbar-transitions";
 import {UseNavbarProps, useNavbar} from "./use-navbar";
@@ -44,7 +45,7 @@ const Navbar = forwardRef<"div", NavbarProps>((props, ref) => {
           </m.nav>
         </LazyMotion>
       ) : (
-        <Component {...context.getBaseProps()}>{content}</Component>
+        <>{React.createElement(Component, context.getBaseProps(), <>{content}</>)}</>
       )}
     </NavbarProvider>
   );\n- packages/components/popover/src/free-solo-popover.tsx (modified, 10 changes)\n  Patch: @@ -92,7 +92,7 @@ FreeSoloPopoverWrapper.displayName = "NextUI.FreeSoloPopoverWrapper";
 const FreeSoloPopover = forwardRef<"div", FreeSoloPopoverProps>(
   ({children, transformOrigin, disableDialogFocus = false, ...props}, ref) => {
     const {
-      Component,
+      as,
       state,
       placement,
       backdrop,
@@ -144,7 +144,9 @@ const FreeSoloPopover = forwardRef<"div", FreeSoloPopoverProps>(
     return (
       <Overlay portalContainer={portalContainer}>
         {!isNonModal && backdropContent}
-        <Component {...getPopoverProps()}>
+        {React.createElement(
+          as || "div",
+          getPopoverProps(),
           <FreeSoloPopoverWrapper
             disableAnimation={disableAnimation}
             motionProps={motionProps}
@@ -158,8 +160,8 @@ const FreeSoloPopover = forwardRef<"div", FreeSoloPopoverProps>(
               {typeof children === "function" ? children(titleProps) : children}
             </div>
             <DismissButton onDismiss={state.close} />
-          </FreeSoloPopoverWrapper>
-        </Component>
+          </FreeSoloPopoverWrapper>,
+        )}
       </Overlay>
     );
   },\n- packages/components/popover/src/popover-content.tsx (modified, 65 changes)\n  Patch: @@ -9,6 +9,7 @@ import {m, LazyMotion} from "framer-motion";
 import {HTMLNextUIProps} from "@nextui-org/system";
 import {getTransformOrigins} from "@nextui-org/aria-utils";
 import {useDialog} from "@react-aria/dialog";
+import * as React from "react";
 
 import {usePopoverContext} from "./popover-context";
 
@@ -41,22 +42,19 @@ const PopoverContent = (props: PopoverContentProps) => {
 
   const dialogRef = useRef(null);
   const {dialogProps: ariaDialogProps, titleProps} = useDialog({}, dialogRef);
-  const dialogProps = getDialogProps({
-    ref: dialogRef,
-    ...ariaDialogProps,
-    ...otherProps,
-  });
 
   const Component = as || OverlayComponent || "div";
 
   const content = (
     <>
       {!isNonModal && <DismissButton onDismiss={onClose} />}
-      <Component {...dialogProps}>
-        <div {...getContentProps({className})}>
+      {React.createElement(
+        Component,
+        getDialogProps({ref: dialogRef, ...ariaDialogProps, ...otherProps}),
+        <div {...getContentProps()} className={className}>
           {typeof children === "function" ? children(titleProps) : children}
-        </div>
-      </Component>
+        </div>,
+      )}
       <DismissButton onDismiss={onClose} />
     </>
   );
@@ -83,27 +81,34 @@ const PopoverContent = (props: PopoverContentProps) => {
     );
   }, [backdrop, disableAnimation, getBackdropProps]);
 
-  const contents = (
-    <RemoveScroll enabled={shouldBlockScroll && isOpen} removeScrollBar={false}>
-      {disableAnimation ? (
-        content
-      ) : (
-        <LazyMotion features={domAnimation}>
-          <m.div
-            animate="enter"
-            exit="exit"
-            initial="initial"
-            style={{
-              ...getTransformOrigins(placement === "center" ? "top" : placement),
-            }}
-            variants={TRANSITION_VARIANTS.scaleSpringOpacity}
-            {...motionProps}
-          >
-            {content}
-          </m.div>
-        </LazyMotion>
-      )}
-    </RemoveScroll>
+  const contents = React.createElement(
+    RemoveScroll as React.ComponentType<any>,
+    {
+      enabled: shouldBlockScroll && isOpen,
+      removeScrollBar: false,
+      key: null,
+    },
+    disableAnimation
+      ? content
+      : React.createElement(
+          LazyMotion,
+          {features: domAnimation},
+          React.createElement(
+            m.div,
+            {
+              key: null,
+              animate: "enter",
+              exit: "exit",
+              initial: "initial",
+              style: {
+                ...getTransformOrigins(placement === "center" ? "top" : placement),
+              },
+              variants: TRANSITION_VARIANTS.scaleSpringOpacity,
+              ...motionProps,
+            },
+            content,
+          ),
+        ),
   );
 
   return (\n- packages/components/popover/src/use-popover.ts (modified, 5 changes)\n  Patch: @@ -2,7 +2,7 @@ import type {PopoverVariantProps, SlotsToClasses, PopoverSlots} from "@nextui-or
 import type {HTMLMotionProps} from "framer-motion";
 import type {PressEvent} from "@react-types/shared";
 
-import {RefObject, Ref, useEffect} from "react";
+import {RefObject, Ref, useEffect, ElementType} from "react";
 import {ReactRef, useDOMRef} from "@nextui-org/react-utils";
 import {OverlayTriggerState, useOverlayTriggerState} from "@react-stately/overlays";
 import {useFocusRing} from "@react-aria/focus";
@@ -126,7 +126,7 @@ export function usePopover(originalProps: UsePopoverProps) {
     ...otherProps
   } = props;
 
-  const Component = as || "div";
+  const Component = (as || "div") as ElementType;
 
   const domRef = useDOMRef(ref);
 
@@ -307,6 +307,7 @@ export function usePopover(originalProps: UsePopoverProps) {
   }, [state.isOpen, domRef]);
 
   return {
+    as,
     state,
     Component,
     children,\n- packages/components/select/src/select.tsx (modified, 29 changes)\n  Patch: @@ -10,6 +10,7 @@ import {ScrollShadow} from "@nextui-org/scroll-shadow";
 import {cloneElement} from "react";
 import {VisuallyHidden} from "@react-aria/visually-hidden";
 import {AnimatePresence} from "framer-motion";
+import * as React from "react";
 
 import {HiddenSelect} from "./hidden-select";
 import {UseSelectProps, useSelect} from "./use-select";
@@ -130,18 +131,22 @@ const Select = forwardRef(function Select<T extends object>(
       <HiddenSelect {...getHiddenSelectProps()} />
       {shouldLabelBeOutside ? labelContent : null}
       <div {...getMainWrapperProps()}>
-        <Component {...getTriggerProps()}>
-          {!shouldLabelBeOutside ? labelContent : null}
-          <div {...getInnerWrapperProps()}>
-            {startContent}
-            <span {...getValueProps()}>{renderSelectedItem}</span>
-            {endContent && state.selectedItems && (
-              <VisuallyHidden elementType="span">,</VisuallyHidden>
-            )}
-            {endContent}
-          </div>
-          {renderIndicator}
-        </Component>
+        {React.createElement(
+          Component,
+          getTriggerProps(),
+          <>
+            {!shouldLabelBeOutside ? labelContent : null}
+            <div {...getInnerWrapperProps()}>
+              {startContent}
+              <span {...getValueProps()}>{renderSelectedItem}</span>
+              {endContent && state.selectedItems && (
+                <VisuallyHidden elementType="span">,</VisuallyHidden>
+              )}
+              {endContent}
+            </div>
+            {renderIndicator}
+          </>,
+        )}
         {helperWrapper}
       </div>
       {disableAnimation ? popoverContent : <AnimatePresence>{popoverContent}</AnimatePresence>}\n- pnpm-lock.yaml (modified, 4303 changes)\n  Patch: No patch available\n