add style for blockquote

Author: LFDanLu

packages/dev/s2-docs/pages/react-aria/Table.mdx

@@ -795,13 +795,13 @@ See below for the full definition of the `User` and the `Table` tester.
 
 ### Testing FAQ
 
-- When using the test utils, what if a certain interaction errors or doesn't seem to result in the expected state?
+> When using the test utils, what if a certain interaction errors or doesn't seem to result in the expected state?
 
 In cases like this, first double check your test setup and make sure that your test is rendering your table in its expected
 state before the test util interaction call. If everything looks correct, you can always fall back to simulating interactions manually,
 and using the test util to query your table's state post interaction.
 
-- The tester doesn't offer a specific interaction flow, what should I do?
+> The tester doesn't offer a specific interaction flow, what should I do?
 
 Whenever the table tester queries its rows/cells/etc or triggers a user flow, it does so against the current state of the table. Therefore the table test can be used alongside
 whatever simulated user flow you add.

packages/dev/s2-docs/src/Layout.tsx

@@ -27,6 +27,23 @@ const components = {
   p: ({children, ...props}) => <p {...props} className={style({font: {default: 'body', lg: 'body-lg'}, marginY: 24})}>{children}</p>,
   ul: (props) => <ul {...props} />,
   li: ({children, ...props}) => <li {...props} className={style({font: {default: 'body', lg: 'body-lg'}, marginY: 0})}>{children}</li>,
+  blockquote: ({children, ...props}) => (
+    <blockquote
+      {...props}
+      className={style({
+        borderStartWidth: 4,
+        borderEndWidth: 0,
+        borderTopWidth: 0,
+        borderBottomWidth: 0,
+        borderStyle: 'solid',
+        borderColor: 'gray-400',
+        paddingStart: 12,
+        font: {default: 'body', lg: 'body-lg'},
+        margin: 'unset'
+      })}>
+      {children}
+    </blockquote>
+  ),
   Figure: (props) => <figure {...props} className={style({display: 'flex', flexDirection: 'column', alignItems: 'center', marginY: 32, marginX: 0})} />,
   Caption: (props) => <figcaption {...props} className={style({font: 'body-sm'})} />,
   CodeBlock: CodeBlock,
@@ -52,14 +69,14 @@ const getTitle = (currentPage: Page): string => {
   if (explicitTitle && explicitTitle !== currentPage.tableOfContents?.[0]?.title && explicitTitle !== currentPage.name) {
     return explicitTitle as string;
   }
-  
+
   let library = getLibraryLabel(getLibraryFromPage(currentPage));
   const pageTitle = currentPage.tableOfContents?.[0]?.title ?? currentPage.name;
-  
+
   if (currentPage.name === 'index.html' || currentPage.name.endsWith('/index.html')) {
     return library || 'React Spectrum';
   }
-  
+
   return library ? `${pageTitle} | ${library}` : pageTitle;
 };