Fixes the Shell type

utilities/docs/gatsby-browser.tsx

@@ -1,17 +1,18 @@
 import * as React from 'react';
+import type { WrapRootElementBrowserArgs, WrapPageElementBrowserArgs } from 'gatsby'
 
 import { Shell } from './src/components/shell';
 import { SSRSetup } from './src/components/ssr-setup';
 import { Theme } from './src/components/theme';
 
-export const wrapRootElement = ({ element }) => {
+export const wrapRootElement = ({ element }: WrapRootElementBrowserArgs) => {
   return (
     <SSRSetup>
       <Theme>{element}</Theme>
     </SSRSetup>
   );
 };
 
-export const wrapPageElement = ({ element, props }) => (
+export const wrapPageElement = ({ element, props }: WrapPageElementBrowserArgs) => (
   <Shell {...props}>{element}</Shell>
 );

utilities/docs/gatsby-ssr.tsx

@@ -1,20 +1,21 @@
 import { SSRProvider } from '@fluentui/react-utilities';
 import { createDOMRenderer, RendererProvider } from '@griffel/react';
 import * as React from 'react';
+import type { WrapRootElementNodeArgs, WrapPageElementNodeArgs } from 'gatsby'
 
 import { Shell } from './src/components/shell';
 import { Theme } from './src/components/theme';
 
 const renderer = createDOMRenderer();
 
-export const wrapRootElement = ({ element }) => (
+export const wrapRootElement = ({ element }: WrapRootElementNodeArgs) => (
   <RendererProvider renderer={renderer}>
     <SSRProvider>
       <Theme>{element}</Theme>
     </SSRProvider>
   </RendererProvider>
 );
 
-export const wrapPageElement = ({ element, props }) => (
+export const wrapPageElement = ({ element, props }: WrapPageElementNodeArgs) => (
   <Shell {...props}>{element}</Shell>
 );

utilities/docs/src/components/shell/index.ts

@@ -1 +1,2 @@
 export { Shell } from './shell';
+export type { ShellProps } from './shell.types';

utilities/docs/src/components/shell/shell.tsx

@@ -1,19 +1,19 @@
+import { Text } from '@fluentui/react-text';
 import { Shell as ArbutusShell } from '@microsoft/arbutus.shell';
 import { useCSSVars } from '@microsoft/arbutus.use-css-vars';
 import { useTheme } from '@microsoft/arbutus.theming';
-import type { PageProps } from 'gatsby';
 import { withPrefix } from 'gatsby';
 import type { FC } from 'react';
 import * as React from 'react';
-import { BLUEPRINTS_DOCS_PREFIX, BLUEPRINTS_DOCS_THEME } from '../theme';
 
-import { makeNavigate } from '../../utilities';
+import { BLUEPRINTS_DOCS_PREFIX, BLUEPRINTS_DOCS_THEME } from '../theme';
+import { FluentLogo } from '../fluent-logo';
 import { Footer } from '../footer';
 import { Header } from '../header';
+import { makeNavigate } from '../../utilities';
 import { Navigation } from '../navigation';
+import { ShellProps } from './shell.types';
 import { useLogoStyles } from './shell.styles';
-import { FluentLogo } from '../fluent-logo';
-import { Text } from '@fluentui/react-text';
 
 const navigateHome = makeNavigate({ isExternal: false, to: '/' });
 
@@ -30,7 +30,10 @@ const Logo: FC = () => {
   );
 };
 
-export const Shell: FC<PageProps> = ({ children, location }) => {
+export const Shell: FC<ShellProps> = ({
+  children,
+  location,
+}) => {
   const isHome = location.pathname === withPrefix('/');
   const isComponentPreview = location.pathname.includes('/preview/');
   const isComponentSandbox = location.pathname.includes('/sandbox/');

utilities/docs/src/components/shell/shell.types.ts

@@ -0,0 +1,11 @@
+import type { PageProps } from 'gatsby';
+import type { ReactNode } from 'react';
+
+/**
+ * @description ShellProps is a type that extends the PageProps type from Gatsby and adds a children property. Shell is
+ * used in Gatsby browser and SSR configs to wrap the page component. `wrapPageElement` is used in Gatsby browser and
+ * SSR configs to add the Shell to the page component. It passes PageProps to the Shell component, but unlike Gatsby
+ * pages, Shell does indeed have children, so we are removing the children property 9set to `undefined` from PageProps
+ * and adding it to ShellProps.
+ */
+export type ShellProps = Omit<PageProps, 'children'> & { children: ReactNode };