Add highlighted and comment props to File and Folder components

Co-Authored-By: Colton Berry <[email protected]>

Author: devin-ai-integration[bot]

fern/products/docs/pages/component-library/default-components/files.mdx

@@ -165,6 +165,42 @@ Use the `defaultOpen` property to have specific folders expanded when the page l
 </Files>
 ```
 
+### Highlighted files and folders with comments
+
+Use the `highlighted` property to visually emphasize specific files or folders, and the `comment` property to add explanatory text that appears to the right of the item. This is useful for drawing attention to important files or providing additional context.
+
+<div className="highlight-frame">
+<Files>
+  <Folder name="components" defaultOpen highlighted comment="Main component directory">
+    <File name="accordion.mdx" />
+    <File name="button.mdx" highlighted comment="Primary button component" />
+    <File name="card.mdx" />
+    <File name="tabs.mdx" />
+  </Folder>
+  <Folder name="assets">
+    <File name="styles.css" highlighted comment="Global styles" />
+  </Folder>
+  <File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
+  <File name="README.md" highlighted comment="Start here" />
+</Files>
+</div>
+
+```jsx Markdown maxLines=10
+<Files>
+  <Folder name="components" defaultOpen highlighted comment="Main component directory">
+    <File name="accordion.mdx" />
+    <File name="button.mdx" highlighted comment="Primary button component" />
+    <File name="card.mdx" />
+    <File name="tabs.mdx" />
+  </Folder>
+  <Folder name="assets">
+    <File name="styles.css" highlighted comment="Global styles" />
+  </Folder>
+  <File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
+  <File name="README.md" highlighted comment="Start here" />
+</Files>
+```
+
 ## Properties
 
 ### `<Files>` properties
@@ -195,6 +231,14 @@ Use the `defaultOpen` property to have specific folders expanded when the page l
   Optional URL to make the folder name clickable. The name will show an underline on hover when a link is provided.
 </ParamField>
 
+<ParamField path="highlighted" type="boolean" default={false}>
+  Whether the folder should be visually highlighted. Use this to draw attention to important directories.
+</ParamField>
+
+<ParamField path="comment" type="string" required={false}>
+  Optional comment text that appears to the right of the folder name. Use this to provide additional context or explanations.
+</ParamField>
+
 <ParamField path="className" type="string" required={false}>
   Optional CSS class name for custom styling.
 </ParamField>
@@ -209,6 +253,14 @@ Use the `defaultOpen` property to have specific folders expanded when the page l
   Optional URL to make the file name clickable. The name will show an underline on hover when a link is provided.
 </ParamField>
 
+<ParamField path="highlighted" type="boolean" default={false}>
+  Whether the file should be visually highlighted. Use this to draw attention to important files.
+</ParamField>
+
+<ParamField path="comment" type="string" required={false}>
+  Optional comment text that appears to the right of the file name. Use this to provide additional context or explanations.
+</ParamField>
+
 <ParamField path="className" type="string" required={false}>
   Optional CSS class name for custom styling.
 </ParamField>