chore(docs): update content with Pull request comments

apps/docs/content/components/collections/Listbox.mdx

@@ -72,19 +72,13 @@ A ListBox that is invalid.
 
 ### Fluid
 
-ListBox that is fluid, meaning the width is 100% of its container.
+A fluid ListBox will take up the full width of its container.
 
 <Example src="ListBox/docs/fluid" />
 
-### Description
-
-ListBox items with a description.
-
-<Example src="ListBox/docs/description" />
-
 ### Divider
 
-Dividers can be added to a ListBox
+Dividers can be added to a ListBox.
 
 <Example src="ListBox/docs/divider" />
 
@@ -150,17 +144,24 @@ A ListBox with multiple selected items.
 
 <Example src="ListBox/docs/multipleSelected" />
 
-### Size
+### Sizes
 
-ListBoxes can be multiple sizes
+ListBoxes can be multiple sizes.
 
 <Example src="ListBox/docs/size" />
 
+### Description
+
+ListBoxItem can have a description.
+
+<Example src="ListBox/docs/description" />
+
+
 ### Item size
 
-ListBoxItems can be multiple sizes as well
+ListBoxItems can be multiple sizes as well.
 
-<Example src="ListBox/docs/multipleSize" />
+<Example src="ListBox/docs/multipleSizes" />
 
 <FeatureFlag flag="next">
     ## Advanced customization

apps/docs/content/components/content/Text.mdx

@@ -3,7 +3,7 @@ title: Text
 description: A primitive text component matching Hopper's typography type scale.
  The Text component provides default styling based on its `size` prop, but can also receive styling from a parent component
  when used as a child of a Hopper component.
- 
+
  See Button for examples of how to use the Text component in the context of a Hopper component
 category: "content"
 links:
@@ -39,7 +39,7 @@ links:
 
 ## Examples
 
-### Size
+### Sizes
 You can alter the size of the text by specifying a `size` prop.
 The available sizes match the Hopper Typography Type Scale (a type scale is a set of [font-size and line-height](https://hopper.workleap.design/tokens/semantic/typography#body) pairs).
 

apps/docs/content/components/navigation/Link.mdx

@@ -67,7 +67,7 @@ Links can be presented in different variants.
 
 <Example src="Link/docs/variants" />
 
-### Size
+### Sizes
 
 Links can be presented in different sizes.
 

apps/docs/examples/Preview.ts

@@ -80,9 +80,6 @@ export const Previews: Record<string, Preview> = {
     "ListBox/docs/fluid": {
         component: lazy(() => import("@/../../packages/components/src/ListBox/docs/fluid.tsx"))
     },
-    "ListBox/docs/description": {
-        component: lazy(() => import("@/../../packages/components/src/ListBox/docs/description.tsx"))
-    },
     "ListBox/docs/divider": {
         component: lazy(() => import("@/../../packages/components/src/ListBox/docs/divider.tsx"))
     },
@@ -119,8 +116,11 @@ export const Previews: Record<string, Preview> = {
     "ListBox/docs/size": {
         component: lazy(() => import("@/../../packages/components/src/ListBox/docs/size.tsx"))
     },
-    "ListBox/docs/multipleSize": {
-        component: lazy(() => import("@/../../packages/components/src/ListBox/docs/multipleSize.tsx"))
+    "ListBox/docs/description": {
+        component: lazy(() => import("@/../../packages/components/src/ListBox/docs/description.tsx"))
+    },
+    "ListBox/docs/multipleSizes": {
+        component: lazy(() => import("@/../../packages/components/src/ListBox/docs/multipleSizes.tsx"))
     },
     "HopperProvider/docs/color-scheme/apply": {
         component: lazy(() => import("@/../../packages/components/src/HopperProvider/docs/color-scheme/apply.tsx"))

packages/components/src/ListBox/docs/multipleSelected.tsx

@@ -1,4 +1,4 @@
-import { ListBox, ListBoxItem, Section } from "@hopper-ui/components";
+import { ListBox, ListBoxItem, Section, Header } from "@hopper-ui/components";
 import { useState } from "react";
 import type { Selection } from "react-aria-components";
 
@@ -12,13 +12,17 @@ export default function Example() {
             selectedKeys={selectedKeys}
             onSelectionChange={setSelectedKeys}
         >
-            <ListBoxItem id="1">Item 1</ListBoxItem>
-            <ListBoxItem id="2">Item 2</ListBoxItem>
-            <ListBoxItem id="3">Item 3</ListBoxItem>
             <Section aria-label="section">
-                <ListBoxItem id="6">Item 4</ListBoxItem>
-                <ListBoxItem id="7">Item 5</ListBoxItem>
-                <ListBoxItem id="8">Item 6</ListBoxItem>
+                <Header>Self review</Header>
+                <ListBoxItem id="1">Overdue</ListBoxItem>
+                <ListBoxItem id="2">In progress</ListBoxItem>
+                <ListBoxItem id="3">Submitted</ListBoxItem>
+            </Section>
+            <Section aria-label="section">
+                <Header>Manager review</Header>
+                <ListBoxItem id="4">Overdue</ListBoxItem>
+                <ListBoxItem id="5">In progress</ListBoxItem>
+                <ListBoxItem id="6">Submitted</ListBoxItem>
             </Section>
         </ListBox>
     );