Update nesting of Button and Link components

The Link component is modified to be nested within the Button component in various JSX files. This change was made with the aid of the 'asChild' property, it ensures that the link remains operable even when wrapped by the button, improving the site's semantics and accessibility.

packages/features/auth/src/components/password-sign-in-form.tsx

@@ -88,16 +88,17 @@ export const PasswordSignInForm: React.FC<{
 
               <FormMessage />
 
-              <Link href={'/auth/password-reset'}>
-                <Button
-                  type={'button'}
-                  size={'sm'}
-                  variant={'link'}
-                  className={'text-xs'}
-                >
+              <Button
+                asChild
+                type={'button'}
+                size={'sm'}
+                variant={'link'}
+                className={'text-xs'}
+              >
+                <Link href={'/auth/password-reset'}>
                   <Trans i18nKey={'auth:passwordForgottenQuestion'} />
-                </Button>
-              </Link>
+                </Link>
+              </Button>
             </FormItem>
           )}
         />

packages/ui/src/makerkit/sidebar.tsx

@@ -164,14 +164,15 @@ export function SidebarItem({
   const size = collapsed ? 'icon' : 'sm';
 
   return (
-    <Link key={path} href={path}>
-      <Button
-        className={cn('flex w-full text-sm shadow-none', {
-          'justify-start space-x-2': !collapsed,
-        })}
-        size={size}
-        variant={variant}
-      >
+    <Button
+      asChild
+      className={cn('flex w-full text-sm shadow-none', {
+        'justify-start space-x-2': !collapsed,
+      })}
+      size={size}
+      variant={variant}
+    >
+      <Link key={path} href={path}>
         <If condition={collapsed} fallback={Icon}>
           <TooltipProvider>
             <Tooltip>
@@ -185,8 +186,8 @@ export function SidebarItem({
         </If>
 
         <span className={cn({ hidden: collapsed })}>{children}</span>
-      </Button>
-    </Link>
+      </Link>
+    </Button>
   );
 }