From 26184ed08242b9ec9398e13af50520a946a5e293 Mon Sep 17 00:00:00 2001
From: gbuomprisco <giancarlopsk@gmail.com>
Date: Sat, 20 Dec 2025 08:23:58 +0100
Subject: [PATCH] chore: bump version to 2.21.16 and refactor CookieBanner
 component

- Updated application version from 2.21.15 to 2.21.16 in package.json.
- Refactored CookieBanner to use dynamic import for improved performance and server-side rendering handling.
- Enhanced accessibility by updating the Dialog title structure in the CookieBanner component.
---
 package.json                               |  2 +-
 packages/ui/src/makerkit/cookie-banner.tsx | 20 ++++++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 439ccb380..511988b99 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next-supabase-saas-kit-turbo",
-  "version": "2.21.15",
+  "version": "2.21.16",
   "private": true,
   "sideEffects": false,
   "engines": {
diff --git a/packages/ui/src/makerkit/cookie-banner.tsx b/packages/ui/src/makerkit/cookie-banner.tsx
index eb79d2c2f..43a8e60e5 100644
--- a/packages/ui/src/makerkit/cookie-banner.tsx
+++ b/packages/ui/src/makerkit/cookie-banner.tsx
@@ -2,6 +2,8 @@
 
 import { useCallback, useMemo, useState } from 'react';
 
+import dynamic from 'next/dynamic';
+
 import { Dialog as DialogPrimitive } from 'radix-ui';
 
 import { Button } from '../shadcn/button';
@@ -17,7 +19,11 @@ enum ConsentStatus {
   Unknown = 'unknown',
 }
 
-export function CookieBanner() {
+export const CookieBanner = dynamic(async () => CookieBannerComponent, {
+  ssr: false,
+});
+
+export function CookieBannerComponent() {
   const { status, accept, reject } = useCookieConsent();
 
   if (!isBrowser()) {
@@ -32,15 +38,13 @@ export function CookieBanner() {
     <DialogPrimitive.Root open modal={false}>
       <DialogPrimitive.Content
         onOpenAutoFocus={(e) => e.preventDefault()}
-        className={`dark:shadow-primary-500/40 bg-background animate-in fade-in zoom-in-95 slide-in-from-bottom-16 fill-mode-both fixed bottom-0 w-full max-w-lg border p-6 shadow-2xl delay-1000 duration-1000 lg:bottom-[2rem] lg:left-[2rem] lg:h-48 lg:rounded-lg`}
+        className={`dark:shadow-primary-500/40 bg-background animate-in fade-in zoom-in-95 slide-in-from-bottom-16 fill-mode-both fixed bottom-0 z-50 w-full max-w-lg border p-6 shadow-2xl delay-1000 duration-1000 lg:bottom-[2rem] lg:left-[2rem] lg:h-48 lg:rounded-lg`}
       >
-        <div className={'flex flex-col space-y-4'}>
-          <div>
-            <Heading level={3}>
-              <Trans i18nKey={'cookieBanner.title'} />
-            </Heading>
-          </div>
+        <DialogPrimitive.Title className="text-lg font-semibold">
+          <Trans i18nKey={'cookieBanner.title'} />
+        </DialogPrimitive.Title>
 
+        <div className={'flex flex-col space-y-4'}>
           <div className={'text-gray-500 dark:text-gray-400'}>
             <Trans i18nKey={'cookieBanner.description'} />
           </div>