Next.js 16, React 19.2, Identities page, Invitations identities step, PNPM Catalogs (#381)

* Upgraded to Next.js 16 * Refactored code to comply with React 19.2 ESLint rules * Refactored some useEffect usages with the new useEffectEvent * Added Identities page and added second step to set up an identity after accepting an invitation * Updated all dependencies * Introduced PNPM catalogs for some frequently updated dependencies * Bugs fixing and improvements
2025-10-22 11:47:47 +09:00
parent ea0c1dde80
commit 2c0d0bf7a1
98 changed files with 4812 additions and 4394 deletions
--- a/packages/analytics/package.json
+++ b/packages/analytics/package.json
@@ -17,7 +17,7 @@
    "@kit/eslint-config": "workspace:*",
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "@types/node": "^24.6.2"
+    "@types/node": "catalog:"
  },
  "typesVersions": {
    "*": {
--- a/packages/billing/gateway/package.json
+++ b/packages/billing/gateway/package.json
@@ -26,14 +26,14 @@
    "@kit/supabase": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:*",
-    "@supabase/supabase-js": "2.58.0",
-    "@types/react": "19.1.16",
+    "@supabase/supabase-js": "2.76.1",
+    "@types/react": "catalog:",
    "date-fns": "^4.1.0",
-    "lucide-react": "^0.544.0",
-    "next": "15.5.5",
-    "react": "19.1.1",
-    "react-hook-form": "^7.63.0",
-    "react-i18next": "^16.0.0",
+    "lucide-react": "^0.546.0",
+    "next": "16.0.0",
+    "react": "19.2.0",
+    "react-hook-form": "^7.65.0",
+    "react-i18next": "^16.1.4",
    "zod": "^3.25.74"
  },
  "typesVersions": {
--- a/packages/billing/gateway/src/components/embedded-checkout.tsx
+++ b/packages/billing/gateway/src/components/embedded-checkout.tsx
@@ -1,11 +1,27 @@
-import { Suspense, forwardRef, lazy, memo, useMemo } from 'react';
+import { Suspense, lazy } from 'react';

 import { Enums } from '@kit/supabase/database';
 import { LoadingOverlay } from '@kit/ui/loading-overlay';

 type BillingProvider = Enums<'billing_provider'>;

-const Fallback = <LoadingOverlay fullPage={false} />;
+// Create lazy components at module level (not during render)
+const StripeCheckoutLazy = lazy(async () => {
+  const { StripeCheckout } = await import('@kit/stripe/components');
+  return { default: StripeCheckout };
+});
+
+const LemonSqueezyCheckoutLazy = lazy(async () => {
+  const { LemonSqueezyEmbeddedCheckout } = await import(
+    '@kit/lemon-squeezy/components'
+  );
+  return { default: LemonSqueezyEmbeddedCheckout };
+});
+
+type CheckoutProps = {
+  onClose: (() => unknown) | undefined;
+  checkoutToken: string;
+};

 export function EmbeddedCheckout(
  props: React.PropsWithChildren<{
@@ -14,100 +30,54 @@ export function EmbeddedCheckout(
    onClose?: () => void;
  }>,
 ) {
-  const CheckoutComponent = useMemo(
-    () => loadCheckoutComponent(props.provider),
-    [props.provider],
-  );
-
  return (
    <>
-      <CheckoutComponent
-        onClose={props.onClose}
-        checkoutToken={props.checkoutToken}
-      />
+      <Suspense fallback={<LoadingOverlay fullPage={false} />}>
+        <CheckoutSelector
+          provider={props.provider}
+          onClose={props.onClose}
+          checkoutToken={props.checkoutToken}
+        />
+      </Suspense>

      <BlurryBackdrop />
    </>
  );
 }

-function loadCheckoutComponent(provider: BillingProvider) {
-  switch (provider) {
-    case 'stripe': {
-      return buildLazyComponent(() => {
-        return import('@kit/stripe/components').then(({ StripeCheckout }) => {
-          return {
-            default: StripeCheckout,
-          };
-        });
-      });
-    }
-
-    case 'lemon-squeezy': {
-      return buildLazyComponent(() => {
-        return import('@kit/lemon-squeezy/components').then(
-          ({ LemonSqueezyEmbeddedCheckout }) => {
-            return {
-              default: LemonSqueezyEmbeddedCheckout,
-            };
-          },
-        );
-      });
-    }
-
-    case 'paddle': {
-      throw new Error('Paddle is not yet supported');
-    }
-
-    default:
-      throw new Error(`Unsupported provider: ${provider as string}`);
-  }
-}
-
-function buildLazyComponent<
-  Component extends React.ComponentType<{
-    onClose: (() => unknown) | undefined;
-    checkoutToken: string;
-  }>,
->(
-  load: () => Promise<{
-    default: Component;
-  }>,
-  fallback = Fallback,
+function CheckoutSelector(
+  props: CheckoutProps & { provider: BillingProvider },
 ) {
-  let LoadedComponent: ReturnType<typeof lazy<Component>> | null = null;
-
-  const LazyComponent = forwardRef<
-    React.ElementRef<'div'>,
-    {
-      onClose: (() => unknown) | undefined;
-      checkoutToken: string;
-    }
-  >(function LazyDynamicComponent(props, ref) {
-    if (!LoadedComponent) {
-      LoadedComponent = lazy(load);
-    }
-
-    return (
-      <Suspense fallback={fallback}>
-        {/* @ts-expect-error: weird TS */}
-        <LoadedComponent
+  switch (props.provider) {
+    case 'stripe':
+      return (
+        <StripeCheckoutLazy
          onClose={props.onClose}
          checkoutToken={props.checkoutToken}
-          ref={ref}
        />
-      </Suspense>
-    );
-  });
+      );

-  return memo(LazyComponent);
+    case 'lemon-squeezy':
+      return (
+        <LemonSqueezyCheckoutLazy
+          onClose={props.onClose}
+          checkoutToken={props.checkoutToken}
+        />
+      );
+
+    case 'paddle':
+      throw new Error('Paddle is not yet supported');
+
+    default:
+      throw new Error(`Unsupported provider: ${props.provider as string}`);
+  }
 }

 function BlurryBackdrop() {
  return (
    <div
      className={
-        'bg-background/30 fixed left-0 top-0 w-full backdrop-blur-sm' +
+        'bg-background/30 fixed top-0 left-0 w-full backdrop-blur-sm' +
        ' !m-0 h-full'
      }
    />
--- a/packages/billing/gateway/src/components/plan-picker.tsx
+++ b/packages/billing/gateway/src/components/plan-picker.tsx
@@ -316,7 +316,7 @@ export function PlanPicker(

                            <div
                              className={
-                                'flex flex-col gap-y-3 lg:flex-row lg:items-center lg:space-x-4 lg:space-y-0 lg:text-right'
+                                'flex flex-col gap-y-3 lg:flex-row lg:items-center lg:space-y-0 lg:space-x-4 lg:text-right'
                              }
                            >
                              <div>
@@ -415,6 +415,7 @@ function PlanDetails({
  const isRecurring = selectedPlan.paymentType === 'recurring';

  // trick to force animation on re-render
+  // eslint-disable-next-line react-hooks/purity
  const key = Math.random();

  return (
--- a/packages/billing/gateway/src/components/pricing-table.tsx
+++ b/packages/billing/gateway/src/components/pricing-table.tsx
@@ -422,7 +422,7 @@ function PlanIntervalSwitcher(
        const selected = plan === props.interval;

        const className = cn(
-          'animate-in fade-in !outline-hidden rounded-full transition-all focus:!ring-0',
+          'animate-in fade-in rounded-full !outline-hidden transition-all focus:!ring-0',
          {
            'border-r-transparent': index === 0,
            ['hover:text-primary text-muted-foreground']: !selected,
--- a/packages/billing/lemon-squeezy/package.json
+++ b/packages/billing/lemon-squeezy/package.json
@@ -24,9 +24,9 @@
    "@kit/supabase": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:*",
-    "@types/react": "19.1.16",
-    "next": "15.5.5",
-    "react": "19.1.1",
+    "@types/react": "catalog:",
+    "next": "16.0.0",
+    "react": "19.2.0",
    "zod": "^3.25.74"
  },
  "typesVersions": {
--- a/packages/billing/lemon-squeezy/src/services/lemon-squeezy-billing-strategy.service.ts
+++ b/packages/billing/lemon-squeezy/src/services/lemon-squeezy-billing-strategy.service.ts
@@ -56,8 +56,6 @@ export class LemonSqueezyBillingStrategyService
    const { data: response, error } = await createLemonSqueezyCheckout(params);

    if (error ?? !response?.data.id) {
-      console.log(error);
-
      logger.error(
        {
          ...ctx,
--- a/packages/billing/stripe/package.json
+++ b/packages/billing/stripe/package.json
@@ -15,9 +15,9 @@
    "./components": "./src/components/index.ts"
  },
  "dependencies": {
-    "@stripe/react-stripe-js": "^5.0.0",
-    "@stripe/stripe-js": "^8.0.0",
-    "stripe": "^19.0.0"
+    "@stripe/react-stripe-js": "^5.2.0",
+    "@stripe/stripe-js": "^8.1.0",
+    "stripe": "^19.1.0"
  },
  "devDependencies": {
    "@kit/billing": "workspace:*",
@@ -27,10 +27,10 @@
    "@kit/supabase": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:*",
-    "@types/react": "19.1.16",
+    "@types/react": "catalog:",
    "date-fns": "^4.1.0",
-    "next": "15.5.5",
-    "react": "19.1.1",
+    "next": "16.0.0",
+    "react": "19.2.0",
    "zod": "^3.25.74"
  },
  "typesVersions": {
--- a/packages/cms/core/package.json
+++ b/packages/cms/core/package.json
@@ -20,7 +20,7 @@
    "@kit/shared": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@kit/wordpress": "workspace:*",
-    "@types/node": "^24.6.2"
+    "@types/node": "catalog:"
  },
  "typesVersions": {
    "*": {
--- a/packages/cms/keystatic/package.json
+++ b/packages/cms/keystatic/package.json
@@ -26,9 +26,9 @@
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:*",
-    "@types/node": "^24.6.2",
-    "@types/react": "19.1.16",
-    "react": "19.1.1",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "react": "19.2.0",
    "zod": "^3.25.74"
  },
  "typesVersions": {
--- a/packages/cms/wordpress/package.json
+++ b/packages/cms/wordpress/package.json
@@ -20,8 +20,8 @@
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:*",
-    "@types/node": "^24.6.2",
-    "@types/react": "19.1.16",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
    "wp-types": "^4.68.1"
  },
  "typesVersions": {
--- a/packages/database-webhooks/package.json
+++ b/packages/database-webhooks/package.json
@@ -21,7 +21,7 @@
    "@kit/stripe": "workspace:*",
    "@kit/supabase": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "@supabase/supabase-js": "2.58.0",
+    "@supabase/supabase-js": "2.76.1",
    "zod": "^3.25.74"
  },
  "typesVersions": {
--- a/packages/email-templates/package.json
+++ b/packages/email-templates/package.json
@@ -13,7 +13,7 @@
    ".": "./src/index.ts"
  },
  "dependencies": {
-    "@react-email/components": "0.5.5"
+    "@react-email/components": "0.5.7"
  },
  "devDependencies": {
    "@kit/eslint-config": "workspace:*",
--- a/packages/email-templates/src/emails/invite.email.tsx
+++ b/packages/email-templates/src/emails/invite.email.tsx
@@ -103,7 +103,7 @@ export async function renderInviteEmail(props: Props) {
                </Section>
              )}

-              <Section className="mb-[32px] mt-[32px] text-center">
+              <Section className="mt-[32px] mb-[32px] text-center">
                <CtaButton href={props.link}>{joinTeam}</CtaButton>
              </Section>

--- a/packages/email-templates/src/emails/otp.email.tsx
+++ b/packages/email-templates/src/emails/otp.email.tsx
@@ -69,9 +69,9 @@ export async function renderOtpEmail(props: Props) {

              <Text className="text-[16px] text-[#242424]">{otpText}</Text>

-              <Section className="mb-[16px] mt-[16px] text-center">
+              <Section className="mt-[16px] mb-[16px] text-center">
                <Button className={'w-full rounded bg-neutral-950 text-center'}>
-                  <Text className="text-[16px] font-medium font-semibold leading-[16px] text-white">
+                  <Text className="text-[16px] leading-[16px] font-medium font-semibold text-white">
                    {props.otp}
                  </Text>
                </Button>
--- a/packages/features/accounts/package.json
+++ b/packages/features/accounts/package.json
@@ -34,17 +34,17 @@
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:*",
    "@radix-ui/react-icons": "^1.3.2",
-    "@supabase/supabase-js": "2.58.0",
-    "@tanstack/react-query": "5.90.2",
-    "@types/react": "19.1.16",
-    "@types/react-dom": "19.1.9",
-    "lucide-react": "^0.544.0",
-    "next": "15.5.5",
+    "@supabase/supabase-js": "2.76.1",
+    "@tanstack/react-query": "5.90.5",
+    "@types/react": "catalog:",
+    "@types/react-dom": "19.2.2",
+    "lucide-react": "^0.546.0",
+    "next": "16.0.0",
    "next-themes": "0.4.6",
-    "react": "19.1.1",
-    "react-dom": "19.1.1",
-    "react-hook-form": "^7.63.0",
-    "react-i18next": "^16.0.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-hook-form": "^7.65.0",
+    "react-i18next": "^16.1.4",
    "zod": "^3.25.74"
  },
  "prettier": "@kit/prettier-config",
--- a/packages/features/accounts/src/components/account-selector.tsx
+++ b/packages/features/accounts/src/components/account-selector.tsx
@@ -68,27 +68,9 @@ export function AccountSelector({
    return selectedAccount ?? PERSONAL_ACCOUNT_SLUG;
  }, [selectedAccount]);

-  const Icon = (props: { item: string }) => {
-    return (
-      <CheckCircle
-        className={cn(
-          'ml-auto h-4 w-4',
-          value === props.item ? 'opacity-100' : 'opacity-0',
-        )}
-      />
-    );
-  };
-
  const selected = accounts.find((account) => account.value === value);
  const pictureUrl = personalData.data?.picture_url;

-  const PersonalAccountAvatar = () =>
-    pictureUrl ? (
-      <UserAvatar pictureUrl={pictureUrl} />
-    ) : (
-      <PersonIcon className="h-5 w-5" />
-    );
-
  return (
    <>
      <Popover open={open} onOpenChange={setOpen}>
@@ -117,7 +99,7 @@ export function AccountSelector({
                    'gap-x-2': !collapsed,
                  })}
                >
-                  <PersonalAccountAvatar />
+                  <PersonalAccountAvatar pictureUrl={pictureUrl} />

                  <span
                    className={cn('truncate', {
@@ -136,7 +118,7 @@ export function AccountSelector({
                    'gap-x-2': !collapsed,
                  })}
                >
-                  <Avatar className={'rounded-xs h-6 w-6'}>
+                  <Avatar className={'h-6 w-6 rounded-xs'}>
                    <AvatarImage src={account.image ?? undefined} />

                    <AvatarFallback
@@ -176,6 +158,7 @@ export function AccountSelector({
            <CommandList>
              <CommandGroup>
                <CommandItem
+                  className="shadow-none"
                  onSelect={() => onAccountChange(undefined)}
                  value={PERSONAL_ACCOUNT_SLUG}
                >
@@ -185,7 +168,7 @@ export function AccountSelector({
                    <Trans i18nKey={'teams:personalAccount'} />
                  </span>

-                  <Icon item={PERSONAL_ACCOUNT_SLUG} />
+                  <Icon selected={value === PERSONAL_ACCOUNT_SLUG} />
                </CommandItem>
              </CommandGroup>

@@ -206,7 +189,7 @@ export function AccountSelector({
                      data-name={account.label}
                      data-slug={account.value}
                      className={cn(
-                        'group my-1 flex justify-between transition-colors',
+                        'group my-1 flex justify-between shadow-none transition-colors',
                        {
                          ['bg-muted']: value === account.value,
                        },
@@ -222,7 +205,7 @@ export function AccountSelector({
                      }}
                    >
                      <div className={'flex items-center'}>
-                        <Avatar className={'rounded-xs mr-2 h-6 w-6'}>
+                        <Avatar className={'mr-2 h-6 w-6 rounded-xs'}>
                          <AvatarImage src={account.image ?? undefined} />

                          <AvatarFallback
@@ -241,7 +224,7 @@ export function AccountSelector({
                        </span>
                      </div>

-                      <Icon item={account.value ?? ''} />
+                      <Icon selected={(account.value ?? '') === value} />
                    </CommandItem>
                  ))}
                </CommandGroup>
@@ -286,8 +269,24 @@ export function AccountSelector({

 function UserAvatar(props: { pictureUrl?: string }) {
  return (
-    <Avatar className={'rounded-xs h-6 w-6'}>
+    <Avatar className={'h-6 w-6 rounded-xs'}>
      <AvatarImage src={props.pictureUrl} />
    </Avatar>
  );
 }
+
+function Icon({ selected }: { selected: boolean }) {
+  return (
+    <CheckCircle
+      className={cn('ml-auto h-4 w-4', selected ? 'opacity-100' : 'opacity-0')}
+    />
+  );
+}
+
+function PersonalAccountAvatar({ pictureUrl }: { pictureUrl?: string | null }) {
+  return pictureUrl ? (
+    <UserAvatar pictureUrl={pictureUrl} />
+  ) : (
+    <PersonIcon className="h-5 w-5" />
+  );
+}
--- a/packages/features/accounts/src/components/personal-account-settings/account-settings-container.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/account-settings-container.tsx
@@ -156,23 +156,26 @@ export function PersonalAccountSettingsContainer(
        </CardContent>
      </Card>

-      <If condition={props.features.enableAccountLinking}>
-        <Card>
-          <CardHeader>
-            <CardTitle>
-              <Trans i18nKey={'account:linkedAccounts'} />
-            </CardTitle>
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            <Trans i18nKey={'account:linkedAccounts'} />
+          </CardTitle>

-            <CardDescription>
-              <Trans i18nKey={'account:linkedAccountsDescription'} />
-            </CardDescription>
-          </CardHeader>
+          <CardDescription>
+            <Trans i18nKey={'account:linkedAccountsDescription'} />
+          </CardDescription>
+        </CardHeader>

-          <CardContent>
-            <LinkAccountsList providers={props.providers} />
-          </CardContent>
-        </Card>
-      </If>
+        <CardContent>
+          <LinkAccountsList
+            providers={props.providers}
+            enabled={props.features.enableAccountLinking}
+            showEmailOption
+            showPasswordOption
+          />
+        </CardContent>
+      </Card>

      <If condition={props.features.enableAccountDeletion}>
        <Card className={'border-destructive'}>
--- a/packages/features/accounts/src/components/personal-account-settings/email/update-email-form.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/email/update-email-form.tsx
@@ -27,26 +27,46 @@ import { Trans } from '@kit/ui/trans';

 import { UpdateEmailSchema } from '../../../schema/update-email.schema';

-function createEmailResolver(currentEmail: string, errorMessage: string) {
-  return zodResolver(
-    UpdateEmailSchema.withTranslation(errorMessage).refine((schema) => {
-      return schema.email !== currentEmail;
-    }),
-  );
+function createEmailResolver(
+  currentEmail: string | null,
+  emailsNotMatchingMessage: string,
+  emailNotChangedMessage: string,
+) {
+  const schema = UpdateEmailSchema.withTranslation(emailsNotMatchingMessage);
+
+  // If there's a current email, ensure the new email is different
+  if (currentEmail) {
+    return zodResolver(
+      schema.refine(
+        (data) => {
+          return data.email !== currentEmail;
+        },
+        {
+          path: ['email'],
+          message: emailNotChangedMessage,
+        },
+      ),
+    );
+  }
+
+  // If no current email, just validate the schema
+  return zodResolver(schema);
 }

 export function UpdateEmailForm({
  email,
  callbackPath,
+  onSuccess,
 }: {
-  email: string;
+  email?: string | null;
  callbackPath: string;
+  onSuccess?: () => void;
 }) {
  const { t } = useTranslation('account');
  const updateUserMutation = useUpdateUser();
+  const isSettingEmail = !email;

  const updateEmail = ({ email }: { email: string }) => {
-    // then, we update the user's email address
    const promise = async () => {
      const redirectTo = new URL(
        callbackPath,
@@ -54,17 +74,25 @@ export function UpdateEmailForm({
      ).toString();

      await updateUserMutation.mutateAsync({ email, redirectTo });
+
+      if (onSuccess) {
+        onSuccess();
+      }
    };

    toast.promise(promise, {
-      success: t(`updateEmailSuccess`),
-      loading: t(`updateEmailLoading`),
-      error: t(`updateEmailError`),
+      success: t(isSettingEmail ? 'setEmailSuccess' : 'updateEmailSuccess'),
+      loading: t(isSettingEmail ? 'setEmailLoading' : 'updateEmailLoading'),
+      error: t(isSettingEmail ? 'setEmailError' : 'updateEmailError'),
    });
  };

  const form = useForm({
-    resolver: createEmailResolver(email, t('emailNotMatching')),
+    resolver: createEmailResolver(
+      email ?? null,
+      t('emailNotMatching'),
+      t('emailNotChanged'),
+    ),
    defaultValues: {
      email: '',
      repeatEmail: '',
@@ -83,11 +111,23 @@ export function UpdateEmailForm({
            <CheckIcon className={'h-4'} />

            <AlertTitle>
-              <Trans i18nKey={'account:updateEmailSuccess'} />
+              <Trans
+                i18nKey={
+                  isSettingEmail
+                    ? 'account:setEmailSuccess'
+                    : 'account:updateEmailSuccess'
+                }
+              />
            </AlertTitle>

            <AlertDescription>
-              <Trans i18nKey={'account:updateEmailSuccessMessage'} />
+              <Trans
+                i18nKey={
+                  isSettingEmail
+                    ? 'account:setEmailSuccessMessage'
+                    : 'account:updateEmailSuccessMessage'
+                }
+              />
            </AlertDescription>
          </Alert>
        </If>
@@ -107,7 +147,11 @@ export function UpdateEmailForm({
                        data-test={'account-email-form-email-input'}
                        required
                        type={'email'}
-                        placeholder={t('account:newEmail')}
+                        placeholder={t(
+                          isSettingEmail
+                            ? 'account:emailAddress'
+                            : 'account:newEmail',
+                        )}
                        {...field}
                      />
                    </InputGroup>
@@ -147,7 +191,13 @@ export function UpdateEmailForm({

          <div>
            <Button disabled={updateUserMutation.isPending}>
-              <Trans i18nKey={'account:updateEmailSubmitLabel'} />
+              <Trans
+                i18nKey={
+                  isSettingEmail
+                    ? 'account:setEmailAddress'
+                    : 'account:updateEmailSubmitLabel'
+                }
+              />
            </Button>
          </div>
        </div>
--- a/packages/features/accounts/src/components/personal-account-settings/link-accounts/link-accounts-list.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/link-accounts/link-accounts-list.tsx
@@ -1,11 +1,14 @@
 'use client';

+import { Suspense, useState } from 'react';
+
+import { usePathname } from 'next/navigation';
+
 import type { Provider, UserIdentity } from '@supabase/supabase-js';

-import { CheckCircle } from 'lucide-react';
-
 import { useLinkIdentityWithProvider } from '@kit/supabase/hooks/use-link-identity-with-provider';
 import { useUnlinkUserIdentity } from '@kit/supabase/hooks/use-unlink-user-identity';
+import { useUser } from '@kit/supabase/hooks/use-user';
 import { useUserIdentities } from '@kit/supabase/hooks/use-user-identities';
 import {
  AlertDialog,
@@ -19,6 +22,14 @@ import {
  AlertDialogTrigger,
 } from '@kit/ui/alert-dialog';
 import { Button } from '@kit/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@kit/ui/dialog';
 import { If } from '@kit/ui/if';
 import {
  Item,
@@ -35,9 +46,21 @@ import { toast } from '@kit/ui/sonner';
 import { Spinner } from '@kit/ui/spinner';
 import { Trans } from '@kit/ui/trans';

-export function LinkAccountsList(props: { providers: Provider[] }) {
+import { UpdateEmailForm } from '../email/update-email-form';
+import { UpdatePasswordForm } from '../password/update-password-form';
+
+interface LinkAccountsListProps {
+  providers: Provider[];
+  showPasswordOption?: boolean;
+  showEmailOption?: boolean;
+  enabled?: boolean;
+  redirectTo?: string;
+}
+
+export function LinkAccountsList(props: LinkAccountsListProps) {
  const unlinkMutation = useUnlinkUserIdentity();
  const linkMutation = useLinkIdentityWithProvider();
+  const pathname = usePathname();

  const {
    identities,
@@ -46,14 +69,40 @@ export function LinkAccountsList(props: { providers: Provider[] }) {
    isLoading: isLoadingIdentities,
  } = useUserIdentities();

-  // Only show providers from the allowed list that aren't already connected
-  const availableProviders = props.providers.filter(
-    (provider) => !isProviderConnected(provider),
+  // Get user email from email identity
+  const emailIdentity = identities.find(
+    (identity) => identity.provider === 'email',
+  );
+
+  const userEmail = (emailIdentity?.identity_data?.email as string) || '';
+
+  // If enabled, display available providers
+  const availableProviders = props.enabled
+    ? props.providers.filter((provider) => !isProviderConnected(provider))
+    : [];
+
+  const user = useUser();
+  const amr = user.data ? user.data.amr : [];
+
+  const isConnectedWithPassword = amr.some(
+    (item: { method: string }) => item.method === 'password',
  );

  // Show all connected identities, even if their provider isn't in the allowed providers list
  const connectedIdentities = identities;

+  const canLinkEmailAccount = !emailIdentity && props.showEmailOption;
+
+  const canLinkPassword =
+    emailIdentity && props.showPasswordOption && !isConnectedWithPassword;
+
+  const shouldDisplayAvailableAccountsSection =
+    canLinkEmailAccount || canLinkPassword || availableProviders.length;
+
+  /**
+   * @name handleUnlinkAccount
+   * @param identity
+   */
  const handleUnlinkAccount = (identity: UserIdentity) => {
    const promise = unlinkMutation.mutateAsync(identity);

@@ -64,6 +113,10 @@ export function LinkAccountsList(props: { providers: Provider[] }) {
    });
  };

+  /**
+   * @name handleLinkAccount
+   * @param provider
+   */
  const handleLinkAccount = (provider: Provider) => {
    const promise = linkMutation.mutateAsync(provider);

@@ -83,33 +136,32 @@ export function LinkAccountsList(props: { providers: Provider[] }) {
  }

  return (
-    <div className="space-y-6">
-      {/* Linked Accounts Section */}
+    <div className="space-y-4">
      <If condition={connectedIdentities.length > 0}>
-        <div className="space-y-3">
+        <div className="space-y-2.5">
          <div>
            <h3 className="text-foreground text-sm font-medium">
-              <Trans i18nKey={'account:linkedAccounts'} />
+              <Trans i18nKey={'account:linkedMethods'} />
            </h3>

            <p className="text-muted-foreground text-xs">
-              <Trans i18nKey={'account:alreadyLinkedAccountsDescription'} />
+              <Trans i18nKey={'account:alreadyLinkedMethodsDescription'} />
            </p>
          </div>

          <div className="flex flex-col space-y-2">
            {connectedIdentities.map((identity) => (
-              <Item key={identity.id} variant="outline">
+              <Item key={identity.id} variant="muted">
                <ItemMedia>
-                  <OauthProviderLogoImage providerId={identity.provider} />
+                  <div className="text-muted-foreground flex h-5 w-5 items-center justify-center">
+                    <OauthProviderLogoImage providerId={identity.provider} />
+                  </div>
                </ItemMedia>

                <ItemContent>
-                  <ItemHeader className="flex items-center gap-3">
+                  <ItemHeader>
                    <div className="flex flex-col">
-                      <ItemTitle className="flex items-center gap-x-2 text-sm font-medium capitalize">
-                        <CheckCircle className="h-3 w-3 text-green-500" />
-
+                      <ItemTitle className="text-sm font-medium capitalize">
                        <span>{identity.provider}</span>
                      </ItemTitle>

@@ -174,22 +226,35 @@ export function LinkAccountsList(props: { providers: Provider[] }) {
        </div>
      </If>

-      {/* Available Accounts Section */}
-      <If condition={availableProviders.length > 0}>
+      <If
+        condition={shouldDisplayAvailableAccountsSection}
+        fallback={<NoAccountsAvailable />}
+      >
        <Separator />

-        <div className="space-y-3">
+        <div className="space-y-2.5">
          <div>
            <h3 className="text-foreground text-sm font-medium">
-              <Trans i18nKey={'account:availableAccounts'} />
+              <Trans i18nKey={'account:availableMethods'} />
            </h3>

            <p className="text-muted-foreground text-xs">
-              <Trans i18nKey={'account:availableAccountsDescription'} />
+              <Trans i18nKey={'account:availableMethodsDescription'} />
            </p>
          </div>

          <div className="flex flex-col space-y-2">
+            <If condition={canLinkEmailAccount}>
+              <UpdateEmailDialog redirectTo={pathname} />
+            </If>
+
+            <If condition={canLinkPassword}>
+              <UpdatePasswordDialog
+                userEmail={userEmail}
+                redirectTo={props.redirectTo || '/home'}
+              />
+            </If>
+
            {availableProviders.map((provider) => (
              <Item
                key={provider}
@@ -217,16 +282,134 @@ export function LinkAccountsList(props: { providers: Provider[] }) {
          </div>
        </div>
      </If>
-
-      <If
-        condition={
-          connectedIdentities.length === 0 && availableProviders.length === 0
-        }
-      >
-        <div className="text-muted-foreground py-8 text-center">
-          <Trans i18nKey={'account:noAccountsAvailable'} />
-        </div>
-      </If>
    </div>
  );
 }
+
+function NoAccountsAvailable() {
+  return (
+    <div>
+      <span className="text-muted-foreground text-xs">
+        <Trans i18nKey={'account:noAccountsAvailable'} />
+      </span>
+    </div>
+  );
+}
+
+function UpdateEmailDialog(props: { redirectTo: string }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Item variant="outline" role="button" className="hover:bg-muted/50">
+          <ItemMedia>
+            <div className="text-muted-foreground flex h-5 w-5 items-center justify-center">
+              <OauthProviderLogoImage providerId={'email'} />
+            </div>
+          </ItemMedia>
+
+          <ItemContent>
+            <ItemHeader>
+              <div className="flex flex-col">
+                <ItemTitle className="text-sm font-medium">
+                  <Trans i18nKey={'account:setEmailAddress'} />
+                </ItemTitle>
+
+                <ItemDescription>
+                  <Trans i18nKey={'account:setEmailDescription'} />
+                </ItemDescription>
+              </div>
+            </ItemHeader>
+          </ItemContent>
+        </Item>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans i18nKey={'account:setEmailAddress'} />
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans i18nKey={'account:setEmailDescription'} />
+          </DialogDescription>
+        </DialogHeader>
+
+        <Suspense
+          fallback={
+            <div className="flex items-center justify-center">
+              <Spinner />
+            </div>
+          }
+        >
+          <UpdateEmailForm
+            callbackPath={props.redirectTo}
+            onSuccess={() => {
+              setOpen(false);
+            }}
+          />
+        </Suspense>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function UpdatePasswordDialog(props: {
+  redirectTo: string;
+  userEmail: string;
+}) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Item variant="outline" role="button" className="hover:bg-muted/50">
+          <ItemMedia>
+            <div className="text-muted-foreground flex h-5 w-5 items-center justify-center">
+              <OauthProviderLogoImage providerId={'password'} />
+            </div>
+          </ItemMedia>
+
+          <ItemContent>
+            <ItemHeader>
+              <div className="flex flex-col">
+                <ItemTitle className="text-sm font-medium">
+                  <Trans i18nKey={'account:linkEmailPassword'} />
+                </ItemTitle>
+
+                <ItemDescription>
+                  <Trans i18nKey={'account:updatePasswordDescription'} />
+                </ItemDescription>
+              </div>
+            </ItemHeader>
+          </ItemContent>
+        </Item>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans i18nKey={'account:linkEmailPassword'} />
+          </DialogTitle>
+        </DialogHeader>
+
+        <Suspense
+          fallback={
+            <div className="flex items-center justify-center">
+              <Spinner />
+            </div>
+          }
+        >
+          <UpdatePasswordForm
+            callbackPath={props.redirectTo}
+            email={props.userEmail}
+            onSuccess={() => {
+              setOpen(false);
+            }}
+          />
+        </Suspense>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/packages/features/accounts/src/components/personal-account-settings/password/update-password-form.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/password/update-password-form.tsx
@@ -2,9 +2,11 @@

 import { useState } from 'react';

+import type { PostgrestError } from '@supabase/supabase-js';
+
 import { zodResolver } from '@hookform/resolvers/zod';
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
-import { Check, Lock } from 'lucide-react';
+import { Check, Lock, XIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';

@@ -33,9 +35,11 @@ import { PasswordUpdateSchema } from '../../../schema/update-password.schema';
 export const UpdatePasswordForm = ({
  email,
  callbackPath,
+  onSuccess,
 }: {
  email: string;
  callbackPath: string;
+  onSuccess?: () => void;
 }) => {
  const { t } = useTranslation('account');
  const updateUserMutation = useUpdateUser();
@@ -46,6 +50,7 @@ export const UpdatePasswordForm = ({

    const promise = updateUserMutation
      .mutateAsync({ password, redirectTo })
+      .then(onSuccess)
      .catch((error) => {
        if (
          typeof error === 'string' &&
@@ -57,11 +62,13 @@ export const UpdatePasswordForm = ({
        }
      });

-    toast.promise(() => promise, {
-      success: t(`updatePasswordSuccess`),
-      error: t(`updatePasswordError`),
-      loading: t(`updatePasswordLoading`),
-    });
+    toast
+      .promise(() => promise, {
+        success: t(`updatePasswordSuccess`),
+        error: t(`updatePasswordError`),
+        loading: t(`updatePasswordLoading`),
+      })
+      .unwrap();
  };

  const updatePasswordCallback = async ({
@@ -99,6 +106,10 @@ export const UpdatePasswordForm = ({
            <SuccessAlert />
          </If>

+          <If condition={updateUserMutation.error}>
+            {(error) => <ErrorAlert error={error as PostgrestError} />}
+          </If>
+
          <If condition={needsReauthentication}>
            <NeedsReauthenticationAlert />
          </If>
@@ -177,6 +188,27 @@ export const UpdatePasswordForm = ({
  );
 };

+function ErrorAlert({ error }: { error: { code: string } }) {
+  const { t } = useTranslation();
+
+  return (
+    <Alert variant={'destructive'}>
+      <XIcon className={'h-4'} />
+
+      <AlertTitle>
+        <Trans i18nKey={'account:updatePasswordError'} />
+      </AlertTitle>
+
+      <AlertDescription>
+        <Trans
+          i18nKey={`auth:errors.${error.code}`}
+          defaults={t('auth:resetPasswordError')}
+        />
+      </AlertDescription>
+    </Alert>
+  );
+}
+
 function SuccessAlert() {
  return (
    <Alert variant={'success'}>
--- a/packages/features/admin/package.json
+++ b/packages/features/admin/package.json
@@ -20,15 +20,15 @@
    "@kit/ui": "workspace:*",
    "@makerkit/data-loader-supabase-core": "^0.0.10",
    "@makerkit/data-loader-supabase-nextjs": "^1.2.5",
-    "@supabase/supabase-js": "2.58.0",
-    "@tanstack/react-query": "5.90.2",
+    "@supabase/supabase-js": "2.76.1",
+    "@tanstack/react-query": "5.90.5",
    "@tanstack/react-table": "^8.21.3",
-    "@types/react": "19.1.16",
-    "lucide-react": "^0.544.0",
-    "next": "15.5.5",
-    "react": "19.1.1",
-    "react-dom": "19.1.1",
-    "react-hook-form": "^7.63.0",
+    "@types/react": "catalog:",
+    "lucide-react": "^0.546.0",
+    "next": "16.0.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-hook-form": "^7.65.0",
    "zod": "^3.25.74"
  },
  "exports": {
--- a/packages/features/admin/src/components/admin-accounts-table.tsx
+++ b/packages/features/admin/src/components/admin-accounts-table.tsx
@@ -6,7 +6,7 @@ import { usePathname, useRouter } from 'next/navigation';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { ColumnDef } from '@tanstack/react-table';
 import { EllipsisVertical } from 'lucide-react';
-import { useForm } from 'react-hook-form';
+import { useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';

 import { Tables } from '@kit/supabase/database';
@@ -103,6 +103,8 @@ function AccountsTableFilters(props: {
    router.push(url);
  };

+  const type = useWatch({ control: form.control, name: 'type' });
+
  return (
    <Form {...form}>
      <form
@@ -110,7 +112,7 @@ function AccountsTableFilters(props: {
        onSubmit={form.handleSubmit((data) => onSubmit(data))}
      >
        <Select
-          value={form.watch('type')}
+          value={type}
          onValueChange={(value) => {
            form.setValue(
              'type',
--- a/packages/features/admin/src/components/admin-create-user-dialog.tsx
+++ b/packages/features/admin/src/components/admin-create-user-dialog.tsx
@@ -143,7 +143,7 @@ export function AdminCreateUserDialog(props: React.PropsWithChildren) {
            <FormField
              name={'emailConfirm'}
              render={({ field }) => (
-                <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
+                <FormItem className="flex flex-row items-start space-y-0 space-x-3 rounded-md border p-4">
                  <FormControl>
                    <Checkbox
                      checked={field.value}
--- a/packages/features/auth/package.json
+++ b/packages/features/auth/package.json
@@ -29,13 +29,13 @@
    "@kit/ui": "workspace:*",
    "@marsidev/react-turnstile": "^1.3.1",
    "@radix-ui/react-icons": "^1.3.2",
-    "@supabase/supabase-js": "2.58.0",
-    "@tanstack/react-query": "5.90.2",
-    "@types/react": "19.1.16",
-    "lucide-react": "^0.544.0",
-    "next": "15.5.5",
-    "react-hook-form": "^7.63.0",
-    "react-i18next": "^16.0.0",
+    "@supabase/supabase-js": "2.76.1",
+    "@tanstack/react-query": "5.90.5",
+    "@types/react": "catalog:",
+    "lucide-react": "^0.546.0",
+    "next": "16.0.0",
+    "react-hook-form": "^7.65.0",
+    "react-i18next": "^16.1.4",
    "sonner": "^2.0.7",
    "zod": "^3.25.74"
  },
--- a/packages/features/auth/src/captcha/client/captcha-field.tsx
+++ b/packages/features/auth/src/captcha/client/captcha-field.tsx
@@ -72,10 +72,10 @@ export function CaptchaField<
  const controller =
    'control' in props && props.control
      ? // eslint-disable-next-line react-hooks/rules-of-hooks
-      useController({
-        control: props.control,
-        name: props.name,
-      })
+        useController({
+          control: props.control,
+          name: props.name,
+        })
      : null;

  if (!siteKey) {
--- a/packages/features/auth/src/components/auth-layout.tsx
+++ b/packages/features/auth/src/components/auth-layout.tsx
@@ -1,21 +1,29 @@
+import { cn } from '@kit/ui/utils';
+
 export function AuthLayoutShell({
  children,
+  className,
  Logo,
+  contentClassName,
 }: React.PropsWithChildren<{
  Logo?: React.ComponentType;
+  className?: string;
+  contentClassName?: string;
 }>) {
  return (
    <div
-      className={
-        'flex h-screen flex-col items-center justify-center' +
-        ' bg-background lg:bg-muted/30 gap-y-10 lg:gap-y-8' +
-        ' animate-in fade-in slide-in-from-top-16 zoom-in-95 duration-1000'
-      }
+      className={cn(
+        'bg-background lg:bg-muted/30 animate-in fade-in slide-in-from-top-16 zoom-in-95 flex h-screen flex-col items-center justify-center gap-y-10 duration-1000 lg:gap-y-8',
+        className,
+      )}
    >
      {Logo ? <Logo /> : null}

      <div
-        className={`bg-background flex w-full max-w-[23rem] flex-col gap-y-6 rounded-lg px-6 md:w-8/12 md:px-8 md:py-6 lg:w-5/12 lg:px-8 xl:w-4/12 xl:py-8`}
+        className={cn(
+          'bg-background flex w-full max-w-[23rem] flex-col gap-y-6 rounded-lg px-6 md:w-8/12 md:px-8 md:py-6 lg:w-5/12 lg:px-8 xl:w-4/12 xl:py-8',
+          contentClassName,
+        )}
      >
        {children}
      </div>
--- a/packages/features/auth/src/components/multi-factor-challenge-container.tsx
+++ b/packages/features/auth/src/components/multi-factor-challenge-container.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { useEffect } from 'react';
+import { useEffect, useEffectEvent } from 'react';

 import { useRouter } from 'next/navigation';

@@ -227,12 +227,16 @@ function FactorsListContainer({

  const isSuccess = factors && !isLoading && !error;

+  const signOutFn = useEffectEvent(() => {
+    void signOut.mutateAsync();
+  });
+
  useEffect(() => {
    // If there is an error, sign out
    if (error) {
-      void signOut.mutateAsync();
+      void signOutFn();
    }
-  }, [error, signOut]);
+  }, [error]);

  useEffect(() => {
    // If there is only one factor, select it automatically
--- a/packages/features/auth/src/components/update-password-form.tsx
+++ b/packages/features/auth/src/components/update-password-form.tsx
@@ -1,12 +1,12 @@
 'use client';

-import Link from 'next/link';
+import { useRouter } from 'next/navigation';

 import { zodResolver } from '@hookform/resolvers/zod';
-import { CheckIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons';
-import { ArrowRightIcon } from 'lucide-react';
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
 import type { z } from 'zod';

 import { useUpdateUser } from '@kit/supabase/hooks/use-update-user-mutation';
@@ -26,8 +26,13 @@ import { Trans } from '@kit/ui/trans';

 import { PasswordResetSchema } from '../schemas/password-reset.schema';

-export function UpdatePasswordForm(params: { redirectTo: string }) {
+export function UpdatePasswordForm(params: {
+  redirectTo: string;
+  heading?: React.ReactNode;
+}) {
  const updateUser = useUpdateUser();
+  const router = useRouter();
+  const { t } = useTranslation();

  const form = useForm<z.infer<typeof PasswordResetSchema>>({
    resolver: zodResolver(PasswordResetSchema),
@@ -43,26 +48,28 @@ export function UpdatePasswordForm(params: { redirectTo: string }) {
    return <ErrorState error={error} onRetry={() => updateUser.reset()} />;
  }

-  if (updateUser.data && !updateUser.isPending) {
-    return <SuccessState redirectTo={params.redirectTo} />;
-  }
-
  return (
    <div className={'flex w-full flex-col space-y-6'}>
      <div className={'flex justify-center'}>
-        <Heading level={5} className={'tracking-tight'}>
-          <Trans i18nKey={'auth:passwordResetLabel'} />
-        </Heading>
+        {params.heading && (
+          <Heading className={'text-center'} level={4}>
+            {params.heading}
+          </Heading>
+        )}
      </div>

      <Form {...form}>
        <form
          className={'flex w-full flex-1 flex-col'}
-          onSubmit={form.handleSubmit(({ password }) => {
-            return updateUser.mutateAsync({
+          onSubmit={form.handleSubmit(async ({ password }) => {
+            await updateUser.mutateAsync({
              password,
              redirectTo: params.redirectTo,
            });
+
+            router.replace(params.redirectTo);
+
+            toast.success(t('account:updatePasswordSuccessMessage'));
          })}
        >
          <div className={'flex-col space-y-4'}>
@@ -75,7 +82,12 @@ export function UpdatePasswordForm(params: { redirectTo: string }) {
                  </FormLabel>

                  <FormControl>
-                    <Input required type="password" {...field} />
+                    <Input
+                      required
+                      type="password"
+                      autoComplete={'new-password'}
+                      {...field}
+                    />
                  </FormControl>

                  <FormMessage />
@@ -114,34 +126,6 @@ export function UpdatePasswordForm(params: { redirectTo: string }) {
  );
 }

-function SuccessState(props: { redirectTo: string }) {
-  return (
-    <div className={'flex flex-col space-y-4'}>
-      <Alert variant={'success'}>
-        <CheckIcon className={'s-6'} />
-
-        <AlertTitle>
-          <Trans i18nKey={'account:updatePasswordSuccess'} />
-        </AlertTitle>
-
-        <AlertDescription>
-          <Trans i18nKey={'account:updatePasswordSuccessMessage'} />
-        </AlertDescription>
-      </Alert>
-
-      <Link href={props.redirectTo}>
-        <Button variant={'outline'} className={'w-full'}>
-          <span>
-            <Trans i18nKey={'common:backToHomePage'} />
-          </span>
-
-          <ArrowRightIcon className={'ml-2 h-4'} />
-        </Button>
-      </Link>
-    </div>
-  );
-}
-
 function ErrorState(props: {
  onRetry: () => void;
  error: {
--- a/packages/features/notifications/package.json
+++ b/packages/features/notifications/package.json
@@ -19,13 +19,13 @@
    "@kit/supabase": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:*",
-    "@supabase/supabase-js": "2.58.0",
-    "@tanstack/react-query": "5.90.2",
-    "@types/react": "19.1.16",
-    "lucide-react": "^0.544.0",
-    "react": "19.1.1",
-    "react-dom": "19.1.1",
-    "react-i18next": "^16.0.0"
+    "@supabase/supabase-js": "2.76.1",
+    "@tanstack/react-query": "5.90.5",
+    "@types/react": "catalog:",
+    "lucide-react": "^0.546.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-i18next": "^16.1.4"
  },
  "prettier": "@kit/prettier-config",
  "typesVersions": {
@@ -34,5 +34,8 @@
        "src/*"
      ]
    }
+  },
+  "dependencies": {
+    "@types/node": "catalog:"
  }
 }
--- a/packages/features/notifications/src/components/notifications-popover.tsx
+++ b/packages/features/notifications/src/components/notifications-popover.tsx
@@ -116,7 +116,7 @@ export function NotificationsPopover(params: {

          <span
            className={cn(
-              `fade-in animate-in zoom-in absolute right-1 top-1 mt-0 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-red-500 text-[0.65rem] text-white`,
+              `fade-in animate-in zoom-in absolute top-1 right-1 mt-0 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-red-500 text-[0.65rem] text-white`,
              {
                hidden: !notifications.length,
              },
@@ -176,7 +176,7 @@ export function NotificationsPopover(params: {
              <div
                key={notification.id.toString()}
                className={cn(
-                  'min-h-18 flex flex-col items-start justify-center gap-y-1 px-3 py-2',
+                  'flex min-h-18 flex-col items-start justify-center gap-y-1 px-3 py-2',
                )}
                onClick={() => {
                  if (params.onClick) {
--- a/packages/features/team-accounts/package.json
+++ b/packages/features/team-accounts/package.json
@@ -36,19 +36,19 @@
    "@kit/supabase": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:*",
-    "@supabase/supabase-js": "2.58.0",
-    "@tanstack/react-query": "5.90.2",
+    "@supabase/supabase-js": "2.76.1",
+    "@tanstack/react-query": "5.90.5",
    "@tanstack/react-table": "^8.21.3",
-    "@types/react": "19.1.16",
-    "@types/react-dom": "19.1.9",
+    "@types/react": "catalog:",
+    "@types/react-dom": "19.2.2",
    "class-variance-authority": "^0.7.1",
    "date-fns": "^4.1.0",
-    "lucide-react": "^0.544.0",
-    "next": "15.5.5",
-    "react": "19.1.1",
-    "react-dom": "19.1.1",
-    "react-hook-form": "^7.63.0",
-    "react-i18next": "^16.0.0",
+    "lucide-react": "^0.546.0",
+    "next": "16.0.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-hook-form": "^7.65.0",
+    "react-i18next": "^16.1.4",
    "zod": "^3.25.74"
  },
  "prettier": "@kit/prettier-config",
--- a/packages/features/team-accounts/src/components/invitations/accept-invitation-container.tsx
+++ b/packages/features/team-accounts/src/components/invitations/accept-invitation-container.tsx
@@ -25,7 +25,7 @@ export function AcceptInvitationContainer(props: {

  paths: {
    signOutNext: string;
-    accountHome: string;
+    nextPath: string;
  };
 }) {
  return (
@@ -71,7 +71,7 @@ export function AcceptInvitationContainer(props: {
          <input
            type={'hidden'}
            name={'nextPath'}
-            value={props.paths.accountHome}
+            value={props.paths.nextPath}
          />

          <InvitationSubmitButton
--- a/packages/features/team-accounts/src/schema/create-team.schema.ts
+++ b/packages/features/team-accounts/src/schema/create-team.schema.ts
@@ -25,7 +25,6 @@ export const TeamNameSchema = z
  .max(50)
  .refine(
    (name) => {
-      console.log(name);
      return !SPECIAL_CHARACTERS_REGEX.test(name);
    },
    {
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -20,14 +20,14 @@
    "@kit/prettier-config": "workspace:*",
    "@kit/shared": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "@tanstack/react-query": "5.90.2",
-    "next": "15.5.5",
-    "react": "19.1.1",
-    "react-dom": "19.1.1",
-    "react-i18next": "^16.0.0"
+    "@tanstack/react-query": "5.90.5",
+    "next": "16.0.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-i18next": "^16.1.4"
  },
  "dependencies": {
-    "i18next": "25.5.3",
+    "i18next": "25.6.0",
    "i18next-browser-languagedetector": "8.2.0",
    "i18next-resources-to-backend": "^1.2.1"
  },
--- a/packages/mailers/core/package.json
+++ b/packages/mailers/core/package.json
@@ -20,7 +20,7 @@
    "@kit/resend": "workspace:*",
    "@kit/shared": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "@types/node": "^24.6.2",
+    "@types/node": "catalog:",
    "zod": "^3.25.74"
  },
  "typesVersions": {
--- a/packages/mailers/nodemailer/package.json
+++ b/packages/mailers/nodemailer/package.json
@@ -13,7 +13,7 @@
    ".": "./src/index.ts"
  },
  "dependencies": {
-    "nodemailer": "^7.0.6"
+    "nodemailer": "^7.0.9"
  },
  "devDependencies": {
    "@kit/eslint-config": "workspace:*",
--- a/packages/mailers/resend/package.json
+++ b/packages/mailers/resend/package.json
@@ -17,7 +17,7 @@
    "@kit/mailers-shared": "workspace:*",
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "@types/node": "^24.6.2",
+    "@types/node": "catalog:",
    "zod": "^3.25.74"
  },
  "typesVersions": {
--- a/packages/mcp-server/package.json
+++ b/packages/mcp-server/package.json
@@ -24,8 +24,8 @@
  "devDependencies": {
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "@modelcontextprotocol/sdk": "1.18.2",
-    "@types/node": "^24.6.2",
+    "@modelcontextprotocol/sdk": "1.20.1",
+    "@types/node": "catalog:",
    "postgres": "3.4.7",
    "zod": "^3.25.74"
  },
--- a/packages/mcp-server/src/tools/migrations.ts
+++ b/packages/mcp-server/src/tools/migrations.ts
@@ -1,8 +1,7 @@
 import type { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
-import { exec } from 'node:child_process';
+import { execSync } from 'node:child_process';
 import { readFile, readdir } from 'node:fs/promises';
 import { join } from 'node:path';
-import { promisify } from 'node:util';
 import { z } from 'zod';

 export class MigrationsTool {
@@ -20,11 +19,11 @@ export class MigrationsTool {
  }

  static CreateMigration(name: string) {
-    return promisify(exec)(`pnpm --filter web supabase migrations new ${name}`);
+    return execSync(`pnpm --filter web supabase migrations new ${name}`);
  }

  static Diff() {
-    return promisify(exec)(`supabase db diff`);
+    return execSync(`pnpm --filter web supabase db diff`);
  }
 }

@@ -40,13 +39,14 @@ function createDiffMigrationTool(server: McpServer) {
    'diff_migrations',
    'Compare differences between the declarative schemas and the applied migrations in Supabase',
    async () => {
-      const { stdout } = await MigrationsTool.Diff();
+      const result = MigrationsTool.Diff();
+      const text = result.toString('utf8');

      return {
        content: [
          {
            type: 'text',
-            text: stdout,
+            text,
          },
        ],
      };
@@ -64,13 +64,14 @@ function createCreateMigrationTool(server: McpServer) {
      }),
    },
    async ({ state }) => {
-      const { stdout } = await MigrationsTool.CreateMigration(state.name);
+      const result = MigrationsTool.CreateMigration(state.name);
+      const text = result.toString('utf8');

      return {
        content: [
          {
            type: 'text',
-            text: stdout,
+            text,
          },
        ],
      };
--- a/packages/monitoring/api/package.json
+++ b/packages/monitoring/api/package.json
@@ -23,8 +23,8 @@
    "@kit/sentry": "workspace:*",
    "@kit/shared": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "@types/react": "19.1.16",
-    "react": "19.1.1",
+    "@types/react": "catalog:",
+    "react": "19.2.0",
    "zod": "^3.25.74"
  },
  "typesVersions": {
--- a/packages/monitoring/core/package.json
+++ b/packages/monitoring/core/package.json
@@ -17,8 +17,8 @@
    "@kit/eslint-config": "workspace:*",
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "@types/react": "19.1.16",
-    "react": "19.1.1"
+    "@types/react": "catalog:",
+    "react": "19.2.0"
  },
  "typesVersions": {
    "*": {
--- a/packages/monitoring/sentry/package.json
+++ b/packages/monitoring/sentry/package.json
@@ -16,16 +16,15 @@
    "./config/server": "./src/sentry.client.server.ts"
  },
  "dependencies": {
-    "@sentry/nextjs": "^10.17.0",
-    "import-in-the-middle": "1.14.4"
+    "@sentry/nextjs": "^10.21.0"
  },
  "devDependencies": {
    "@kit/eslint-config": "workspace:*",
    "@kit/monitoring-core": "workspace:*",
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "@types/react": "19.1.16",
-    "react": "19.1.1"
+    "@types/react": "catalog:",
+    "react": "19.2.0"
  },
  "typesVersions": {
    "*": {
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -20,8 +20,8 @@
    "@kit/prettier-config": "workspace:*",
    "@kit/supabase": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "@supabase/supabase-js": "2.58.0",
-    "next": "15.5.5",
+    "@supabase/supabase-js": "2.76.1",
+    "next": "16.0.0",
    "zod": "^3.25.74"
  },
  "typesVersions": {
--- a/packages/otp/package.json
+++ b/packages/otp/package.json
@@ -25,12 +25,12 @@
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:*",
    "@radix-ui/react-icons": "^1.3.2",
-    "@supabase/supabase-js": "2.58.0",
-    "@types/react": "19.1.16",
-    "@types/react-dom": "19.1.9",
-    "react": "19.1.1",
-    "react-dom": "19.1.1",
-    "react-hook-form": "^7.63.0",
+    "@supabase/supabase-js": "2.76.1",
+    "@types/react": "catalog:",
+    "@types/react-dom": "19.2.2",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-hook-form": "^7.65.0",
    "zod": "^3.25.74"
  },
  "typesVersions": {
@@ -40,4 +40,4 @@
      ]
    }
  }
-}
+}
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -20,10 +20,10 @@
    "@kit/eslint-config": "workspace:*",
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "@types/react": "19.1.16"
+    "@types/react": "catalog:"
  },
  "dependencies": {
-    "pino": "^9.12.0"
+    "pino": "^10.1.0"
  },
  "typesVersions": {
    "*": {
--- a/packages/supabase/package.json
+++ b/packages/supabase/package.json
@@ -26,11 +26,12 @@
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@supabase/ssr": "^0.7.0",
-    "@supabase/supabase-js": "2.58.0",
-    "@tanstack/react-query": "5.90.2",
-    "@types/react": "19.1.16",
-    "next": "15.5.5",
-    "react": "19.1.1",
+    "@supabase/supabase-js": "2.76.1",
+    "@tanstack/react-query": "5.90.5",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "next": "16.0.0",
+    "react": "19.2.0",
    "zod": "^3.25.74"
  },
  "typesVersions": {
--- a/packages/supabase/src/auth-callback.service.ts
+++ b/packages/supabase/src/auth-callback.service.ts
@@ -73,7 +73,6 @@ class AuthCallbackService {

    // remove the query params from the url
    searchParams.delete('token_hash');
-    searchParams.delete('type');
    searchParams.delete('next');

    // if we have a next path, we redirect to that path
--- a/packages/supabase/src/hooks/use-auth-change-listener.ts
+++ b/packages/supabase/src/hooks/use-auth-change-listener.ts
@@ -1,8 +1,6 @@
 'use client';

-import { useEffect } from 'react';
-
-import { usePathname } from 'next/navigation';
+import { useEffect, useEffectEvent } from 'react';

 import type { AuthChangeEvent, Session } from '@supabase/supabase-js';

@@ -12,7 +10,13 @@ import { useSupabase } from './use-supabase';
 * @name PRIVATE_PATH_PREFIXES
 * @description A list of private path prefixes
 */
-const PRIVATE_PATH_PREFIXES = ['/home', '/admin', '/join', '/update-password'];
+const PRIVATE_PATH_PREFIXES = [
+  '/home',
+  '/admin',
+  '/join',
+  '/identities',
+  '/update-password',
+];

 /**
 * @name AUTH_PATHS
@@ -28,19 +32,23 @@ const AUTH_PATHS = ['/auth'];
 */
 export function useAuthChangeListener({
  privatePathPrefixes = PRIVATE_PATH_PREFIXES,
-  appHomePath,
  onEvent,
 }: {
-  appHomePath: string;
  privatePathPrefixes?: string[];
  onEvent?: (event: AuthChangeEvent, user: Session | null) => void;
 }) {
  const client = useSupabase();
-  const pathName = usePathname();

-  useEffect(() => {
+  const setupAuthListener = useEffectEvent(() => {
+    // don't run on the server
+    if (typeof window === 'undefined') {
+      return;
+    }
+
    // keep this running for the whole session unless the component was unmounted
-    const listener = client.auth.onAuthStateChange((event, user) => {
+    return client.auth.onAuthStateChange((event, user) => {
+      const pathName = window.location.pathname;
+
      if (onEvent) {
        onEvent(event, user);
      }
@@ -68,10 +76,16 @@ export function useAuthChangeListener({
        window.location.reload();
      }
    });
+  });
+
+  useEffect(() => {
+    const listener = setupAuthListener();

    // destroy listener on un-mounts
-    return () => listener.data.subscription.unsubscribe();
-  }, [client.auth, pathName, appHomePath, privatePathPrefixes, onEvent]);
+    return () => {
+      listener?.data.subscription.unsubscribe();
+    };
+  }, []);
 }

 /**
--- a/packages/supabase/src/require-user.ts
+++ b/packages/supabase/src/require-user.ts
@@ -1,4 +1,4 @@
-import type { SupabaseClient } from '@supabase/supabase-js';
+import type { AMREntry, SupabaseClient } from '@supabase/supabase-js';

 import { checkRequiresMultiFactorAuthentication } from './check-requires-mfa';
 import { JWTUserData } from './types';
@@ -24,6 +24,7 @@ type UserClaims = {
  aal: `aal1` | `aal2`;
  session_id: string;
  is_anonymous: boolean;
+  amr: AMREntry[];
 };

 /**
@@ -97,6 +98,7 @@ export async function requireUser(
      app_metadata: user.app_metadata,
      user_metadata: user.user_metadata,
      id: user.sub,
+      amr: user.amr,
    },
  };
 }
--- a/packages/supabase/src/types.ts
+++ b/packages/supabase/src/types.ts
@@ -1,3 +1,5 @@
+import type { AMREntry } from '@supabase/supabase-js';
+
 /**
 * @name JWTUserData
 * @description The user data mapped from the JWT claims.
@@ -10,4 +12,5 @@ export type JWTUserData = {
  app_metadata: Record<string, unknown>;
  user_metadata: Record<string, unknown>;
  id: string;
+  amr: AMREntry[];
 };
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -14,7 +14,7 @@
    "clsx": "^2.1.1",
    "cmdk": "1.1.1",
    "input-otp": "1.4.2",
-    "lucide-react": "^0.544.0",
+    "lucide-react": "^0.546.0",
    "radix-ui": "1.4.3",
    "react-dropzone": "^14.3.8",
    "react-top-loading-bar": "3.0.2",
@@ -25,22 +25,22 @@
    "@kit/eslint-config": "workspace:*",
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
-    "@supabase/supabase-js": "2.58.0",
-    "@tanstack/react-query": "5.90.2",
+    "@supabase/supabase-js": "2.76.1",
+    "@tanstack/react-query": "5.90.5",
    "@tanstack/react-table": "^8.21.3",
-    "@types/react": "19.1.16",
-    "@types/react-dom": "19.1.9",
+    "@types/react": "catalog:",
+    "@types/react-dom": "19.2.2",
    "class-variance-authority": "^0.7.1",
    "date-fns": "^4.1.0",
-    "eslint": "^9.35.0",
-    "next": "15.5.5",
+    "eslint": "^9.38.0",
+    "next": "16.0.0",
    "next-themes": "0.4.6",
    "prettier": "^3.6.2",
-    "react-day-picker": "^9.11.0",
-    "react-hook-form": "^7.63.0",
-    "react-i18next": "^16.0.0",
+    "react-day-picker": "^9.11.1",
+    "react-hook-form": "^7.65.0",
+    "react-i18next": "^16.1.4",
    "sonner": "^2.0.7",
-    "tailwindcss": "4.1.14",
+    "tailwindcss": "4.1.15",
    "tailwindcss-animate": "^1.0.7",
    "typescript": "^5.9.3",
    "zod": "^3.25.74"
--- a/packages/ui/src/hooks/use-supabase-upload.tsx
+++ b/packages/ui/src/hooks/use-supabase-upload.tsx
@@ -196,19 +196,23 @@ export const useSupabaseUpload = (options: UseSupabaseUploadOptions) => {

    setLoading(false);
  }, [
-    files,
-    path,
    bucketName,
-    errors,
-    successes,
-    onUploadSuccess,
-    client,
    cacheControl,
+    client.storage,
+    errors,
+    files,
+    onUploadSuccess,
+    setLoading,
+    setErrors,
+    setSuccesses,
+    path,
+    successes,
    upsert,
  ]);

  useEffect(() => {
    if (files.length === 0) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
      setErrors([]);
    }

--- a/packages/ui/src/makerkit/image-upload-input.tsx
+++ b/packages/ui/src/makerkit/image-upload-input.tsx
@@ -109,30 +109,19 @@ export const ImageUploadInput: React.FC<Props> =
      [forwardedRef],
    );

-    useEffect(() => {
+    if (image !== state.image) {
      setState((state) => ({ ...state, image }));
-    }, [image]);
+    }

    useEffect(() => {
      if (!image) {
+        // eslint-disable-next-line react-hooks/set-state-in-effect
        onRemove();
      }
    }, [image, onRemove]);

-    const Input = () => (
-      <input
-        {...props}
-        className={cn('hidden', props.className)}
-        ref={setRef}
-        type={'file'}
-        onInput={onInputChange}
-        accept="image/*"
-        aria-labelledby={'image-upload-input'}
-      />
-    );
-
    if (!visible) {
-      return <Input />;
+      return <Input {...props} onInput={onInputChange} ref={setRef} />;
    }

    return (
@@ -140,7 +129,7 @@ export const ImageUploadInput: React.FC<Props> =
        id={'image-upload-input'}
        className={`border-input bg-background ring-primary ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring relative flex h-10 w-full cursor-pointer rounded-md border border-dashed px-3 py-2 text-sm ring-offset-2 outline-hidden transition-all file:border-0 file:bg-transparent file:text-sm file:font-medium focus:ring-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50`}
      >
-        <Input />
+        <Input ref={setRef} onInput={onInputChange} />

        <div className={'flex items-center space-x-4'}>
          <div className={'flex'}>
@@ -198,3 +187,19 @@ export const ImageUploadInput: React.FC<Props> =
      </label>
    );
  };
+
+function Input(
+  props: React.InputHTMLAttributes<unknown> & {
+    ref: (input: HTMLInputElement) => void;
+  },
+) {
+  return (
+    <input
+      {...props}
+      className={cn('hidden', props.className)}
+      type={'file'}
+      accept="image/*"
+      aria-labelledby={'image-upload-input'}
+    />
+  );
+}
--- a/packages/ui/src/makerkit/image-uploader.tsx
+++ b/packages/ui/src/makerkit/image-uploader.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';

 import { Image as ImageIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
@@ -44,25 +44,21 @@ export function ImageUploader(
    [props],
  );

-  const Input = () => (
-    <ImageUploadInput
-      {...control}
-      accept={'image/*'}
-      className={'absolute h-full w-full'}
-      visible={false}
-      multiple={false}
-      onValueChange={onValueChange}
-    />
-  );
-
-  useEffect(() => {
+  if (props.value !== image) {
    setImage(props.value);
-  }, [props.value]);
+  }

  if (!image) {
    return (
      <FallbackImage descriptionSection={props.children}>
-        <Input />
+        <ImageUploadInput
+          {...control}
+          accept={'image/*'}
+          className={'absolute h-full w-full'}
+          visible={false}
+          multiple={false}
+          onValueChange={onValueChange}
+        />
      </FallbackImage>
    );
  }
@@ -84,7 +80,14 @@ export function ImageUploader(
          alt={''}
        />

-        <Input />
+        <ImageUploadInput
+          {...control}
+          accept={'image/*'}
+          className={'absolute h-full w-full'}
+          visible={false}
+          multiple={false}
+          onValueChange={onValueChange}
+        />
      </label>

      <div>
--- a/packages/ui/src/makerkit/multi-step-form.tsx
+++ b/packages/ui/src/makerkit/multi-step-form.tsx
@@ -386,6 +386,7 @@ function AnimatedStep({

  useEffect(() => {
    if (isActive) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
      setShouldRender(true);
    } else {
      const timer = setTimeout(() => setShouldRender(false), 300);
--- a/packages/ui/src/makerkit/oauth-provider-logo-image.tsx
+++ b/packages/ui/src/makerkit/oauth-provider-logo-image.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image';

-import { AtSign, Phone } from 'lucide-react';
+import { AtSign, Mail, Phone } from 'lucide-react';

 const DEFAULT_IMAGE_SIZE = 18;

@@ -33,7 +33,8 @@ export function OauthProviderLogoImage({

 function getOAuthProviderLogos(): Record<string, string | React.ReactNode> {
  return {
-    email: <AtSign className={'size-[16px]'} />,
+    password: <AtSign className={'s-[18px]'} />,
+    email: <Mail className={'s-[18px]'} />,
    phone: <Phone className={'size-[16px]'} />,
    google: '/images/oauth/google.webp',
    facebook: '/images/oauth/facebook.webp',
--- a/packages/ui/src/makerkit/sidebar.tsx
+++ b/packages/ui/src/makerkit/sidebar.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { useContext, useId, useRef, useState } from 'react';
+import { useContext, useId, useState } from 'react';

 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
@@ -43,23 +43,20 @@ export function Sidebar(props: {
      }) => React.ReactNode);
 }) {
  const [collapsed, setCollapsed] = useState(props.collapsed ?? false);
-  const isExpandedRef = useRef<boolean>(false);
+  const [isExpanded, setIsExpanded] = useState(false);

  const expandOnHover =
    props.expandOnHover ??
    process.env.NEXT_PUBLIC_EXPAND_SIDEBAR_ON_HOVER === 'true';

-  const sidebarSizeClassName = getSidebarSizeClassName(
-    collapsed,
-    isExpandedRef.current,
-  );
+  const sidebarSizeClassName = getSidebarSizeClassName(collapsed, isExpanded);

  const className = getClassNameBuilder(
    cn(props.className ?? '', sidebarSizeClassName, {}),
  )();

  const containerClassName = cn(sidebarSizeClassName, 'bg-inherit', {
-    'max-w-[4rem]': expandOnHover && isExpandedRef.current,
+    'max-w-[4rem]': expandOnHover && isExpanded,
  });

  const ctx = { collapsed, setCollapsed };
@@ -68,7 +65,7 @@ export function Sidebar(props: {
    props.collapsed && expandOnHover
      ? () => {
          setCollapsed(false);
-          isExpandedRef.current = true;
+          setIsExpanded(true);
        }
      : undefined;

@@ -77,11 +74,11 @@ export function Sidebar(props: {
      ? () => {
          if (!isRadixPopupOpen()) {
            setCollapsed(true);
-            isExpandedRef.current = false;
+            setIsExpanded(false);
          } else {
            onRadixPopupClose(() => {
              setCollapsed(true);
-              isExpandedRef.current = false;
+              setIsExpanded(false);
            });
          }
        }
@@ -124,6 +121,66 @@ export function SidebarContent({
  return <div className={className}>{children}</div>;
 }

+function SidebarGroupWrapper({
+  id,
+  sidebarCollapsed,
+  collapsible,
+  isGroupCollapsed,
+  setIsGroupCollapsed,
+  label,
+}: {
+  id: string;
+  sidebarCollapsed: boolean;
+  collapsible: boolean;
+  isGroupCollapsed: boolean;
+  setIsGroupCollapsed: (isGroupCollapsed: boolean) => void;
+  label: React.ReactNode;
+}) {
+  const className = cn(
+    'px-container group flex items-center justify-between space-x-2.5',
+    {
+      'py-2.5': !sidebarCollapsed,
+    },
+  );
+
+  if (collapsible) {
+    return (
+      <button
+        aria-expanded={!isGroupCollapsed}
+        aria-controls={id}
+        onClick={() => setIsGroupCollapsed(!isGroupCollapsed)}
+        className={className}
+      >
+        <span
+          className={'text-muted-foreground text-xs font-semibold uppercase'}
+        >
+          {label}
+        </span>
+
+        <If condition={collapsible}>
+          <ChevronDown
+            className={cn(`h-3 transition duration-300`, {
+              'rotate-180': !isGroupCollapsed,
+            })}
+          />
+        </If>
+      </button>
+    );
+  }
+
+  if (sidebarCollapsed) {
+    return null;
+  }
+
+  return (
+    <div className={className}>
+      <span className={'text-muted-foreground text-xs font-semibold uppercase'}>
+        {label}
+      </span>
+    </div>
+  );
+}
+
 export function SidebarGroup({
  label,
  collapsed = false,
@@ -138,61 +195,20 @@ export function SidebarGroup({
  const [isGroupCollapsed, setIsGroupCollapsed] = useState(collapsed);
  const id = useId();

-  const Title = (props: React.PropsWithChildren) => {
-    if (sidebarCollapsed) {
-      return null;
-    }
-
-    return (
-      <span className={'text-muted-foreground text-xs font-semibold uppercase'}>
-        {props.children}
-      </span>
-    );
-  };
-
-  const Wrapper = () => {
-    const className = cn(
-      'px-container group flex items-center justify-between space-x-2.5',
-      {
-        'py-2.5': !sidebarCollapsed,
-      },
-    );
-
-    if (collapsible) {
-      return (
-        <button
-          aria-expanded={!isGroupCollapsed}
-          aria-controls={id}
-          onClick={() => setIsGroupCollapsed(!isGroupCollapsed)}
-          className={className}
-        >
-          <Title>{label}</Title>
-
-          <If condition={collapsible}>
-            <ChevronDown
-              className={cn(`h-3 transition duration-300`, {
-                'rotate-180': !isGroupCollapsed,
-              })}
-            />
-          </If>
-        </button>
-      );
-    }
-
-    return (
-      <div className={className}>
-        <Title>{label}</Title>
-      </div>
-    );
-  };
-
  return (
    <div
      className={cn('flex flex-col', {
        'gap-y-2 py-1': !collapsed,
      })}
    >
-      <Wrapper />
+      <SidebarGroupWrapper
+        id={id}
+        sidebarCollapsed={sidebarCollapsed}
+        collapsible={collapsible}
+        isGroupCollapsed={isGroupCollapsed}
+        setIsGroupCollapsed={setIsGroupCollapsed}
+        label={label}
+      />

      <If condition={collapsible ? !isGroupCollapsed : true}>
        <div id={id} className={'flex flex-col space-y-1.5'}>
--- a/packages/ui/src/makerkit/stepper.tsx
+++ b/packages/ui/src/makerkit/stepper.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { Fragment, useCallback } from 'react';
+import { Fragment } from 'react';

 import { cva } from 'class-variance-authority';

@@ -12,6 +12,54 @@ type Variant = 'numbers' | 'default' | 'dots';

 const classNameBuilder = getClassNameBuilder();

+function Steps({
+  steps,
+  currentStep,
+  variant,
+}: {
+  steps: string[];
+  currentStep: number;
+  variant?: Variant;
+}) {
+  return steps.map((labelOrKey, index) => {
+    const selected = currentStep === index;
+    const complete = currentStep > index;
+
+    const className = classNameBuilder({
+      selected,
+      variant,
+      complete,
+    });
+
+    const isNumberVariant = variant === 'numbers';
+    const isDotsVariant = variant === 'dots';
+
+    const labelClassName = cn({
+      ['px-1.5 py-2 text-xs']: !isNumberVariant,
+      ['hidden']: isDotsVariant,
+    });
+
+    const { label, number } = getStepLabel(labelOrKey, index);
+
+    return (
+      <Fragment key={index}>
+        <div aria-selected={selected} className={className}>
+          <span className={labelClassName}>
+            {number}
+            <If condition={!isNumberVariant}>. {label}</If>
+          </span>
+        </div>
+
+        <If condition={isNumberVariant}>
+          <StepDivider selected={selected} complete={complete}>
+            {label}
+          </StepDivider>
+        </If>
+      </Fragment>
+    );
+  });
+}
+
 /**
 * Renders a stepper component with multiple steps.
 *
@@ -27,46 +75,6 @@ export function Stepper(props: {
 }) {
  const variant = props.variant ?? 'default';

-  const Steps = useCallback(() => {
-    return props.steps.map((labelOrKey, index) => {
-      const selected = props.currentStep === index;
-      const complete = props.currentStep > index;
-
-      const className = classNameBuilder({
-        selected,
-        variant,
-        complete,
-      });
-
-      const isNumberVariant = variant === 'numbers';
-      const isDotsVariant = variant === 'dots';
-
-      const labelClassName = cn({
-        ['px-1.5 py-2 text-xs']: !isNumberVariant,
-        ['hidden']: isDotsVariant,
-      });
-
-      const { label, number } = getStepLabel(labelOrKey, index);
-
-      return (
-        <Fragment key={index}>
-          <div aria-selected={selected} className={className}>
-            <span className={labelClassName}>
-              {number}
-              <If condition={!isNumberVariant}>. {label}</If>
-            </span>
-          </div>
-
-          <If condition={isNumberVariant}>
-            <StepDivider selected={selected} complete={complete}>
-              {label}
-            </StepDivider>
-          </If>
-        </Fragment>
-      );
-    });
-  }, [props.steps, props.currentStep, variant]);
-
  // If there are no steps, don't render anything.
  if (props.steps.length < 2) {
    return null;
@@ -75,12 +83,16 @@ export function Stepper(props: {
  const containerClassName = cn('w-full', {
    ['flex justify-between']: variant === 'numbers',
    ['flex space-x-0.5']: variant === 'default',
-    ['flex gap-x-4 self-center']: variant === 'dots',
+    ['flex space-x-2.5 self-center']: variant === 'dots',
  });

  return (
    <div className={containerClassName}>
-      <Steps />
+      <Steps
+        steps={props.steps}
+        currentStep={props.currentStep}
+        variant={variant}
+      />
    </div>
  );
 }
--- a/packages/ui/src/makerkit/version-updater.tsx
+++ b/packages/ui/src/makerkit/version-updater.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { useEffect, useState } from 'react';
+import { useState } from 'react';

 import { useQuery } from '@tanstack/react-query';
 import { RocketIcon } from 'lucide-react';
@@ -38,12 +38,10 @@ export function VersionUpdater(props: { intervalTimeInSecond?: number }) {
  const [dismissed, setDismissed] = useState(false);
  const [showDialog, setShowDialog] = useState<boolean>(false);

-  useEffect(() => {
-    setShowDialog(data?.didChange ?? false);
-  }, [data?.didChange]);
-
  if (!data?.didChange || dismissed) {
    return null;
+  } else {
+    setShowDialog(data?.didChange ?? false);
  }

  return (
--- a/packages/ui/src/shadcn/sidebar.tsx
+++ b/packages/ui/src/shadcn/sidebar.tsx
@@ -677,6 +677,7 @@ const SidebarMenuSkeleton: React.FC<
 > = ({ className, showIcon = false, ...props }) => {
  // Random width between 50 to 90%.
  const width = React.useMemo(() => {
+    // eslint-disable-next-line react-hooks/purity
    return `${Math.floor(Math.random() * 40) + 50}%`;
  }, []);