Repository: adobe/react-spectrum
File: packages/@react-spectrum/s2/src/Provider.tsx (TypeScript)

Code before:
  locale?: string,
  /**
   * Provides a client side router to all nested React Spectrum links to enable client side navigation.
   */
  router?: Router,
  /**
   * The color scheme for your application.
   * Defaults to operating system preferences.
   */
  colorScheme?: ColorScheme,
  /** The background for this provider. If not provided, the background is transparent. */
  background?: 'base' | 'layer-1' | 'layer-2',
  /** Spectrum-defined styles, returned by the `style()` macro. */
  styles?: StyleString,
  /**
   * The DOM element to render.
   * @default div
   */
  elementType?: keyof JSX.IntrinsicElements
}

export const ColorSchemeContext = createContext<ColorScheme | 'light dark' | null>(null);

/**
 * Provider is the container for all React Spectrum components.
 * It sets the font, colorScheme, locale, and other application level settings.
 */
export function Provider(props: ProviderProps): JSX.Element {
  let result = <ProviderInner {...props} />;
  let parentColorScheme = useContext(ColorSchemeContext);
  let colorScheme = props.colorScheme || parentColorScheme;
  if (colorScheme !== parentColorScheme) {
    result = <ColorSchemeContext.Provider value={colorScheme}>{result}</ColorSchemeContext.Provider>;
  }

  if (props.locale) {
    result = <I18nProvider locale={props.locale}>{result}</I18nProvider>;
  }

  if (props.router) {
    result = <RouterProvider {...props.router}>{result}</RouterProvider>;
  }

  return result;
}

generateDefaultColorSchemeStyles();

let providerStyles = style({
  ...colorScheme(),
  '--s2-container-bg': {

Review comment (suggestion):
```suggestion
 * It loads the font, and sets the colorScheme, locale, and other application level settings.
```

Code after:
  locale?: string,
  /**
   * Provides a client side router to all nested React Spectrum links to enable client side navigation.
   */
  router?: Router,
  /**
   * The color scheme for your application.
   * Defaults to operating system preferences.
   */
  colorScheme?: ColorScheme,
  /** The background for this provider. If not provided, the background is transparent. */
  background?: 'base' | 'layer-1' | 'layer-2',
  /** Spectrum-defined styles, returned by the `style()` macro. */
  styles?: StyleString,
  /**
   * The DOM element to render.
   * @default div
   */
  elementType?: keyof JSX.IntrinsicElements
}

export const ColorSchemeContext = createContext<ColorScheme | 'light dark' | null>(null);

/**
 * Provider is the container for all React Spectrum components.
 * It loads the font and sets the colorScheme, locale, and other application level settings.
 */
export function Provider(props: ProviderProps): JSX.Element {
  let result = <ProviderInner {...props} />;
  let parentColorScheme = useContext(ColorSchemeContext);
  let colorScheme = props.colorScheme || parentColorScheme;
  if (colorScheme !== parentColorScheme) {
    result = <ColorSchemeContext.Provider value={colorScheme}>{result}</ColorSchemeContext.Provider>;
  }

  if (props.locale) {
    result = <I18nProvider locale={props.locale}>{result}</I18nProvider>;
  }

  if (props.router) {
    result = <RouterProvider {...props.router}>{result}</RouterProvider>;
  }

  return result;
}

generateDefaultColorSchemeStyles();

let providerStyles = style({
  ...colorScheme(),
  '--s2-container-bg': {