chore(js): Avoid React.PropsWithChildren (#33808)

static/app/components/assistant/guideAnchor.tsx

@@ -236,7 +236,10 @@ class BaseGuideAnchor extends Component<Props, State> {
  * Wraps the GuideAnchor so we don't have to render it if it's disabled
  * Using a class so we automatically have children as a typed prop
  */
-type WrapperProps = React.PropsWithChildren<{disabled?: boolean} & Props>;
+type WrapperProps = Props & {
+  children?: React.ReactNode;
+  disabled?: boolean;
+};
 
 /**
  * A GuideAnchor puts an informative hovercard around an element. Guide anchors

static/app/components/autoSelectText.tsx

@@ -4,10 +4,11 @@ import classNames from 'classnames';
 
 import {selectText} from 'sentry/utils/selectText';
 
-type Props = React.PropsWithChildren<{
+type Props = {
+  children: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
-}>;
+};
 
 type AutoSelectHandle = {
   selectText: () => void;

static/app/components/narrowLayout.tsx

@@ -6,10 +6,11 @@ import {IconSentry} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import useApi from 'sentry/utils/useApi';
 
-type Props = React.PropsWithChildren<{
+type Props = {
+  children: React.ReactNode;
   maxWidth?: string;
   showLogout?: boolean;
-}>;
+};
 
 function NarrowLayout({maxWidth, showLogout, children}: Props) {
   const api = useApi();

static/app/components/noProjectMessage.tsx

@@ -13,10 +13,11 @@ import space from 'sentry/styles/space';
 import {Organization} from 'sentry/types';
 import useProjects from 'sentry/utils/useProjects';
 
-type Props = React.PropsWithChildren<{
+type Props = {
   organization: Organization;
+  children?: React.ReactNode;
   superuserNeedsToBeProjectMember?: boolean;
-}>;
+};
 
 function NoProjectMessage({
   children,

static/app/components/onboardingPanel.tsx

@@ -4,10 +4,11 @@ import styled from '@emotion/styled';
 import {Panel} from 'sentry/components/panels';
 import space from 'sentry/styles/space';
 
-type Props = React.PropsWithChildren<{
+type Props = {
+  children: React.ReactNode;
   image: React.ReactNode;
   className?: string;
-}>;
+};
 
 function OnboardingPanel({className, image, children}: Props) {
   return (

static/app/components/replays/replayContext.tsx

@@ -107,6 +107,7 @@ const ReplayPlayerContext = React.createContext<ReplayPlayerContextProps>({
 });
 
 type Props = {
+  children: React.ReactNode;
   events: eventWithTime[];
   value?: Partial<ReplayPlayerContextProps>;
 };
@@ -117,7 +118,7 @@ function useCurrentTime(callback: () => number) {
   return currentTime;
 }
 
-export function Provider({children, events, value = {}}: React.PropsWithChildren<Props>) {
+export function Provider({children, events, value = {}}: Props) {
   const theme = useTheme();
   const oldEvents = usePrevious(events);
   const replayerRef = useRef<Replayer>(null);