From 865ddbee334b7e8ef802af06a29b81e722d99586 Mon Sep 17 00:00:00 2001
From: vicky-comeau <vicky.comeau@gsoft.com>
Date: Thu, 28 Nov 2024 12:13:30 -0500
Subject: [PATCH 1/4] [DS-487] Renamed Sections

---
 .changeset/gentle-islands-search.md           |  5 +++
 .../docs/ComboBoxOption/dynamicLists.tsx      |  6 +--
 .../ComboBox/docs/ComboBoxOption/section.tsx  | 10 ++---
 .../src/ComboBox/docs/allowCustomValue.tsx    |  6 +--
 .../src/ComboBox/docs/controlled.tsx          |  6 +--
 .../components/src/ComboBox/src/ComboBox.tsx  |  3 +-
 .../tests/chromatic/ComboBox.stories.tsx      | 34 +++++++--------
 .../src/ListBox/docs/ListBox.stories.tsx      | 18 ++++----
 .../src/ListBox/docs/dynamicLists.tsx         |  6 +--
 .../src/ListBox/docs/multipleSelected.tsx     | 10 ++---
 .../components/src/ListBox/docs/section.tsx   | 10 ++---
 .../components/src/ListBox/src/ListBox.tsx    |  5 ++-
 .../tests/chromatic/ListBox.stories.tsx       | 14 +++---
 .../docs/preview.tsx                          |  6 +--
 .../src/{Section => ListBoxSection}/index.ts  |  0
 .../src/ListBoxSection.tsx}                   | 26 +++++------
 .../src/ListBoxSectionContext.ts              | 10 +++++
 .../src/ListBoxSection/src/index.ts           |  3 ++
 .../tests/jest/ListBoxSection.ssr.test.tsx}   |  4 +-
 .../tests/jest/ListBoxSection.test.tsx}       | 18 ++++----
 .../src/Section/src/SectionContext.ts         | 10 -----
 packages/components/src/Section/src/index.ts  |  2 -
 .../components/src/Select/docs/controlled.tsx |  6 +--
 .../docs/selectDropdown/dynamicLists.tsx      |  6 +--
 .../Select/docs/selectDropdown/section.tsx    | 10 ++---
 packages/components/src/Select/src/Select.tsx |  3 +-
 .../Select/tests/chromatic/Select.stories.tsx | 43 +++++++++----------
 packages/components/src/index.ts              |  2 +-
 28 files changed, 145 insertions(+), 137 deletions(-)
 create mode 100644 .changeset/gentle-islands-search.md
 rename packages/components/src/{Section => ListBoxSection}/docs/preview.tsx (68%)
 rename packages/components/src/{Section => ListBoxSection}/index.ts (100%)
 rename packages/components/src/{Section/src/Section.tsx => ListBoxSection/src/ListBoxSection.tsx} (52%)
 create mode 100644 packages/components/src/ListBoxSection/src/ListBoxSectionContext.ts
 create mode 100644 packages/components/src/ListBoxSection/src/index.ts
 rename packages/components/src/{Section/tests/jest/Section.ssr.test.tsx => ListBoxSection/tests/jest/ListBoxSection.ssr.test.tsx} (71%)
 rename packages/components/src/{Section/tests/jest/Section.test.tsx => ListBoxSection/tests/jest/ListBoxSection.test.tsx} (55%)
 delete mode 100644 packages/components/src/Section/src/SectionContext.ts
 delete mode 100644 packages/components/src/Section/src/index.ts

diff --git a/.changeset/gentle-islands-search.md b/.changeset/gentle-islands-search.md
new file mode 100644
index 000000000..c0ef91211
--- /dev/null
+++ b/.changeset/gentle-islands-search.md
@@ -0,0 +1,5 @@
+---
+"@hopper-ui/components": patch
+---
+
+There is no longer a generic Section component. We now have ListBoxSection, SelectSection and ComboBoxSection.
diff --git a/packages/components/src/ComboBox/docs/ComboBoxOption/dynamicLists.tsx b/packages/components/src/ComboBox/docs/ComboBoxOption/dynamicLists.tsx
index 5115c8819..b7984e91f 100644
--- a/packages/components/src/ComboBox/docs/ComboBoxOption/dynamicLists.tsx
+++ b/packages/components/src/ComboBox/docs/ComboBoxOption/dynamicLists.tsx
@@ -1,4 +1,4 @@
-import { Collection, ComboBox, ComboBoxItem, Header, Inline, Section } from "@hopper-ui/components";
+import { Collection, ComboBox, ComboBoxItem, ComboBoxSection, Header, Inline } from "@hopper-ui/components";
 
 interface ListItemProps {
     id: number | string;
@@ -57,12 +57,12 @@ export default function Example() {
                     const { role: sectionName, children } = section;
 
                     return (
-                        <Section id={sectionName}>
+                        <ComboBoxSection id={sectionName}>
                             <Header>{sectionName}</Header>
                             <Collection items={children}>
                                 {item => <ComboBoxItem id={item.id}>{item.role}</ComboBoxItem>}
                             </Collection>
-                        </Section>
+                        </ComboBoxSection>
                     );
                 }}
             </ComboBox>
diff --git a/packages/components/src/ComboBox/docs/ComboBoxOption/section.tsx b/packages/components/src/ComboBox/docs/ComboBoxOption/section.tsx
index ffefb1fe5..685ae932d 100644
--- a/packages/components/src/ComboBox/docs/ComboBoxOption/section.tsx
+++ b/packages/components/src/ComboBox/docs/ComboBoxOption/section.tsx
@@ -1,21 +1,21 @@
-import { ComboBox, ComboBoxItem, Header, Section } from "@hopper-ui/components";
+import { ComboBox, ComboBoxItem, ComboBoxSection, Header } from "@hopper-ui/components";
 
 export default function Example() {
     return (
         <ComboBox label="Roles">
             <ComboBoxItem id="developer">Developer</ComboBoxItem>
             <ComboBoxItem id="manager">Manager</ComboBoxItem>
-            <Section>
+            <ComboBoxSection>
                 <Header>Operations</Header>
                 <ComboBoxItem id="project-coordinator">Project Coordinator</ComboBoxItem>
                 <ComboBoxItem id="qa-specialist">QA Specialist</ComboBoxItem>
-            </Section>
-            <Section>
+            </ComboBoxSection>
+            <ComboBoxSection>
                 <Header>Creative Department</Header>
                 <ComboBoxItem id="designer">Designer</ComboBoxItem>
                 <ComboBoxItem id="copywriter">Copywriter</ComboBoxItem>
                 <ComboBoxItem id="ux-researcher">UX Researcher</ComboBoxItem>
-            </Section>
+            </ComboBoxSection>
         </ComboBox>
     );
 }
diff --git a/packages/components/src/ComboBox/docs/allowCustomValue.tsx b/packages/components/src/ComboBox/docs/allowCustomValue.tsx
index 13fc9e9cf..78562b830 100644
--- a/packages/components/src/ComboBox/docs/allowCustomValue.tsx
+++ b/packages/components/src/ComboBox/docs/allowCustomValue.tsx
@@ -1,13 +1,13 @@
-import { ComboBox, ComboBoxItem, Header, Section } from "@hopper-ui/components";
+import { ComboBox, ComboBoxItem, ComboBoxSection, Header } from "@hopper-ui/components";
 
 export default function Example() {
     return (
         <ComboBox allowsCustomValue label="Roles">
-            <Section key="1">
+            <ComboBoxSection key="1">
                 <Header>Creative Department</Header>
                 <ComboBoxItem id="1">Designer</ComboBoxItem>
                 <ComboBoxItem id="2">Content creator</ComboBoxItem>
-            </Section>
+            </ComboBoxSection>
             <ComboBoxItem key="2" id="3">Manager</ComboBoxItem>
         </ComboBox>
     );
diff --git a/packages/components/src/ComboBox/docs/controlled.tsx b/packages/components/src/ComboBox/docs/controlled.tsx
index 81bcffdda..032be4c3a 100644
--- a/packages/components/src/ComboBox/docs/controlled.tsx
+++ b/packages/components/src/ComboBox/docs/controlled.tsx
@@ -1,4 +1,4 @@
-import { ComboBox, ComboBoxItem, Header, type Key, Section } from "@hopper-ui/components";
+import { ComboBox, ComboBoxItem, ComboBoxSection, Header, type Key } from "@hopper-ui/components";
 import { useState } from "react";
 
 export default function Example() {
@@ -14,11 +14,11 @@ export default function Example() {
 
     return (
         <ComboBox selectedKey={selectedKey} onSelectionChange={handleSelectionChange} label="Roles">
-            <Section key="1">
+            <ComboBoxSection key="1">
                 <Header>Operations</Header>
                 <ComboBoxItem id="1">Project Coordinator</ComboBoxItem>
                 <ComboBoxItem id="2">QA Specialist</ComboBoxItem>
-            </Section>
+            </ComboBoxSection>
             <ComboBoxItem key="2" id="3">Manager</ComboBoxItem>
         </ComboBox>
     );
diff --git a/packages/components/src/ComboBox/src/ComboBox.tsx b/packages/components/src/ComboBox/src/ComboBox.tsx
index 7de157898..843a20892 100644
--- a/packages/components/src/ComboBox/src/ComboBox.tsx
+++ b/packages/components/src/ComboBox/src/ComboBox.tsx
@@ -24,6 +24,7 @@ import { useFormProps } from "../../Form/index.ts";
 import { HelperMessage } from "../../HelperMessage/index.ts";
 import { Footer } from "../../layout/index.ts";
 import { ListBox, ListBoxItem, type ListBoxProps, type SelectionIndicator } from "../../ListBox/index.ts";
+import { ListBoxSection } from "../../ListBoxSection/index.ts";
 import { Popover, type PopoverProps } from "../../overlays/index.ts";
 import { ToggleArrow } from "../../ToggleArrow/index.ts";
 import { Label, TextContext } from "../../typography/index.ts";
@@ -383,4 +384,4 @@ const _ComboBox = forwardRef(ComboBox) as <T extends object>(
 ) => ReturnType<typeof ComboBox>;
 (_ComboBox as NamedExoticComponent).displayName = "ComboBox";
 
-export { _ComboBox as ComboBox, ListBoxItem as ComboBoxItem };
+export { _ComboBox as ComboBox, ListBoxItem as ComboBoxItem, ListBoxSection as ComboBoxSection };
diff --git a/packages/components/src/ComboBox/tests/chromatic/ComboBox.stories.tsx b/packages/components/src/ComboBox/tests/chromatic/ComboBox.stories.tsx
index a31da6e83..bdf8ae6a4 100644
--- a/packages/components/src/ComboBox/tests/chromatic/ComboBox.stories.tsx
+++ b/packages/components/src/ComboBox/tests/chromatic/ComboBox.stories.tsx
@@ -1,4 +1,4 @@
-import { Button, ComboBox, ComboBoxItem, type ComboBoxProps, Header, Inline, Section, Stack, Text } from "@hopper-ui/components";
+import { Button, ComboBox, ComboBoxItem, type ComboBoxProps, ComboBoxSection, Header, Inline, Stack, Text } from "@hopper-ui/components";
 import { AddIcon, SparklesIcon } from "@hopper-ui/icons";
 import { Div } from "@hopper-ui/styled-system";
 import type { Meta, StoryFn, StoryObj } from "@storybook/react";
@@ -62,19 +62,19 @@ export const OnlyItems = {
 export const Sections = {
     render: args => (
         <ComboBox {...args}>
-            <Section>
+            <ComboBoxSection>
                 <Header>Cats</Header>
                 <ComboBoxItem id="1">Zoomy</ComboBoxItem>
                 <ComboBoxItem id="2">Voodoo</ComboBoxItem>
                 <ComboBoxItem id="3">Dusty</ComboBoxItem>
                 <ComboBoxItem id="4">Rengar</ComboBoxItem>
-            </Section>
-            <Section>
+            </ComboBoxSection>
+            <ComboBoxSection>
                 <Header>Dogs</Header>
                 <ComboBoxItem id="5">Teemo</ComboBoxItem>
                 <ComboBoxItem id="6">Scooter</ComboBoxItem>
                 <ComboBoxItem id="7">Prince</ComboBoxItem>
-            </Section>
+            </ComboBoxSection>
         </ComboBox>
     ),
     play: playFn,
@@ -112,19 +112,19 @@ export const FieldHelperMessage = {
 export const Footer = {
     render: args => (
         <ComboBox {...args}>
-            <Section>
+            <ComboBoxSection>
                 <Header>Cats</Header>
                 <ComboBoxItem id="1">Zoomy</ComboBoxItem>
                 <ComboBoxItem id="2">Voodoo</ComboBoxItem>
                 <ComboBoxItem id="3">Dusty</ComboBoxItem>
                 <ComboBoxItem id="4">Rengar</ComboBoxItem>
-            </Section>
-            <Section>
+            </ComboBoxSection>
+            <ComboBoxSection>
                 <Header>Dogs</Header>
                 <ComboBoxItem id="5">Teemo</ComboBoxItem>
                 <ComboBoxItem id="6">Scooter</ComboBoxItem>
                 <ComboBoxItem id="7">Prince</ComboBoxItem>
-            </Section>
+            </ComboBoxSection>
         </ComboBox>
     ),
     play: playFn,
@@ -138,19 +138,19 @@ export const Small = {
     play: playFn,
     render: args => (
         <ComboBox {...args}>
-            <Section>
+            <ComboBoxSection>
                 <Header>Cats</Header>
                 <ComboBoxItem id="1">Zoomy</ComboBoxItem>
                 <ComboBoxItem id="2">Voodoo</ComboBoxItem>
                 <ComboBoxItem id="3">Dusty</ComboBoxItem>
                 <ComboBoxItem id="4">Rengar</ComboBoxItem>
-            </Section>
-            <Section>
+            </ComboBoxSection>
+            <ComboBoxSection>
                 <Header>Dogs</Header>
                 <ComboBoxItem id="5">Teemo</ComboBoxItem>
                 <ComboBoxItem id="6">Scooter</ComboBoxItem>
                 <ComboBoxItem id="7">Prince</ComboBoxItem>
-            </Section>
+            </ComboBoxSection>
         </ComboBox>
     ),
     args: {
@@ -165,19 +165,19 @@ export const Medium = {
     play: playFn,
     render: args => (
         <ComboBox {...args}>
-            <Section>
+            <ComboBoxSection>
                 <Header>Cats</Header>
                 <ComboBoxItem id="1">Zoomy</ComboBoxItem>
                 <ComboBoxItem id="2">Voodoo</ComboBoxItem>
                 <ComboBoxItem id="3">Dusty</ComboBoxItem>
                 <ComboBoxItem id="4">Rengar</ComboBoxItem>
-            </Section>
-            <Section>
+            </ComboBoxSection>
+            <ComboBoxSection>
                 <Header>Dogs</Header>
                 <ComboBoxItem id="5">Teemo</ComboBoxItem>
                 <ComboBoxItem id="6">Scooter</ComboBoxItem>
                 <ComboBoxItem id="7">Prince</ComboBoxItem>
-            </Section>
+            </ComboBoxSection>
         </ComboBox>
     ),
     args: {
diff --git a/packages/components/src/ListBox/docs/ListBox.stories.tsx b/packages/components/src/ListBox/docs/ListBox.stories.tsx
index 550c11240..50167dd86 100644
--- a/packages/components/src/ListBox/docs/ListBox.stories.tsx
+++ b/packages/components/src/ListBox/docs/ListBox.stories.tsx
@@ -8,7 +8,7 @@ import { Badge } from "../../Badge/index.ts";
 import { Header } from "../../Header/index.ts";
 import { IconList } from "../../IconList/index.ts";
 import { Inline } from "../../layout/index.ts";
-import { Section } from "../../Section/index.ts";
+import { ListBoxSection } from "../../ListBoxSection/index.ts";
 import { Text } from "../../typography/Text/index.ts";
 import { ListBox, ListBoxItem } from "../src/index.ts";
 
@@ -159,13 +159,13 @@ export const MultipleSelection = {
                 <ListBoxItem id="3">Item 3</ListBoxItem>
                 <ListBoxItem id="4">Item 4</ListBoxItem>
                 <ListBoxItem id="5">Item 5</ListBoxItem>
-                <Section aria-label="section">
+                <ListBoxSection aria-label="section">
                     <ListBoxItem id="6">Item 6</ListBoxItem>
                     <ListBoxItem id="7">Item 7</ListBoxItem>
                     <ListBoxItem id="8">Item 8</ListBoxItem>
                     <ListBoxItem id="9">Item 9</ListBoxItem>
                     <ListBoxItem id="10">Item 10</ListBoxItem>
-                </Section>
+                </ListBoxSection>
             </ListBox>
         );
     },
@@ -357,22 +357,22 @@ export const Sections = {
                 <ListBoxItem>Item 3</ListBoxItem>
                 <ListBoxItem>Item 4</ListBoxItem>
                 <ListBoxItem>Item 5</ListBoxItem>
-                <Section >
+                <ListBoxSection >
                     <Header>More Items</Header>
                     <ListBoxItem>Item 6</ListBoxItem>
                     <ListBoxItem>Item 7</ListBoxItem>
                     <ListBoxItem>Item 8</ListBoxItem>
                     <ListBoxItem>Item 9</ListBoxItem>
                     <ListBoxItem>Item 10</ListBoxItem>
-                </Section>
-                <Section>
+                </ListBoxSection>
+                <ListBoxSection>
                     <Header>Even More Items</Header>
                     <ListBoxItem>Item 11</ListBoxItem>
                     <ListBoxItem>Item 12</ListBoxItem>
                     <ListBoxItem>Item 13</ListBoxItem>
                     <ListBoxItem>Item 14</ListBoxItem>
                     <ListBoxItem>Item 15</ListBoxItem>
-                </Section>
+                </ListBoxSection>
                 <ListBoxItem>Item 16</ListBoxItem>
             </ListBox>
         );
@@ -432,12 +432,12 @@ export const DynamicLists = {
                         const listSection = section as ListSectionProps;
 
                         return (
-                            <Section id={listSection.name}>
+                            <ListBoxSection id={listSection.name}>
                                 <Header>{listSection.name}</Header>
                                 <Collection items={listSection.children}>
                                     {item => <ListBoxItem id={item.name}>{item.name}</ListBoxItem>}
                                 </Collection>
-                            </Section>
+                            </ListBoxSection>
                         );
                     }}
                 </ListBox>
diff --git a/packages/components/src/ListBox/docs/dynamicLists.tsx b/packages/components/src/ListBox/docs/dynamicLists.tsx
index 04a517b82..d07191e92 100644
--- a/packages/components/src/ListBox/docs/dynamicLists.tsx
+++ b/packages/components/src/ListBox/docs/dynamicLists.tsx
@@ -1,4 +1,4 @@
-import { Header, Inline, ListBox, ListBoxItem, Section, Collection } from "@hopper-ui/components";
+import { Collection, Header, Inline, ListBox, ListBoxItem, ListBoxSection } from "@hopper-ui/components";
 
 interface ListItemProps {
     id: number | string;
@@ -59,12 +59,12 @@ export default function Example() {
                     const listSection = section as ListSectionProps;
 
                     return (
-                        <Section id={listSection.name}>
+                        <ListBoxSection id={listSection.name}>
                             <Header>{listSection.name}</Header>
                             <Collection items={listSection.children}>
                                 {item => <ListBoxItem id={item.name}>{item.name}</ListBoxItem>}
                             </Collection>
-                        </Section>
+                        </ListBoxSection>
                     );
                 }}
             </ListBox>
diff --git a/packages/components/src/ListBox/docs/multipleSelected.tsx b/packages/components/src/ListBox/docs/multipleSelected.tsx
index 9c0db7c7f..e77012570 100644
--- a/packages/components/src/ListBox/docs/multipleSelected.tsx
+++ b/packages/components/src/ListBox/docs/multipleSelected.tsx
@@ -1,4 +1,4 @@
-import { ListBox, ListBoxItem, Section, Header } from "@hopper-ui/components";
+import { Header, ListBox, ListBoxItem, ListBoxSection } from "@hopper-ui/components";
 import { useState } from "react";
 import type { Selection } from "react-aria-components";
 
@@ -12,18 +12,18 @@ export default function Example() {
             selectedKeys={selectedKeys}
             onSelectionChange={setSelectedKeys}
         >
-            <Section aria-label="section">
+            <ListBoxSection aria-label="section">
                 <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">
+            </ListBoxSection>
+            <ListBoxSection aria-label="section">
                 <Header>Manager review</Header>
                 <ListBoxItem id="4">Overdue</ListBoxItem>
                 <ListBoxItem id="5">In progress</ListBoxItem>
                 <ListBoxItem id="6">Submitted</ListBoxItem>
-            </Section>
+            </ListBoxSection>
         </ListBox>
     );
 }
diff --git a/packages/components/src/ListBox/docs/section.tsx b/packages/components/src/ListBox/docs/section.tsx
index feaca1a00..84f5dee2b 100644
--- a/packages/components/src/ListBox/docs/section.tsx
+++ b/packages/components/src/ListBox/docs/section.tsx
@@ -1,21 +1,21 @@
-import { Header, ListBox, ListBoxItem, Section } from "@hopper-ui/components";
+import { Header, ListBox, ListBoxItem, ListBoxSection } from "@hopper-ui/components";
 
 export default function Example() {
     return (
         <ListBox selectionMode="single" aria-label="list of options">
             <ListBoxItem>Developer</ListBoxItem>
             <ListBoxItem>Manager</ListBoxItem>
-            <Section>
+            <ListBoxSection>
                 <Header>Creative Department</Header>
                 <ListBoxItem>Designer</ListBoxItem>
                 <ListBoxItem>Copywriter</ListBoxItem>
                 <ListBoxItem>UX Researcher</ListBoxItem>
-            </Section>
-            <Section>
+            </ListBoxSection>
+            <ListBoxSection>
                 <Header>Operations</Header>
                 <ListBoxItem>Project Coordinator</ListBoxItem>
                 <ListBoxItem>QA Specialist</ListBoxItem>
-            </Section>
+            </ListBoxSection>
             <ListBoxItem>Product Owner</ListBoxItem>
         </ListBox>
     );
diff --git a/packages/components/src/ListBox/src/ListBox.tsx b/packages/components/src/ListBox/src/ListBox.tsx
index dad4f3a3c..bd3fd81f8 100644
--- a/packages/components/src/ListBox/src/ListBox.tsx
+++ b/packages/components/src/ListBox/src/ListBox.tsx
@@ -6,7 +6,7 @@ import { Collection, composeRenderProps, type ListBoxRenderProps, ListBox as RAC
 
 import { HeaderContext } from "../../Header/index.ts";
 import { useLocalizedString } from "../../i18n/index.ts";
-import { SectionContext } from "../../Section/index.ts";
+import { ListBoxSectionContext } from "../../ListBoxSection/index.ts";
 import { Text, type TextSize } from "../../typography/Text/index.ts";
 import { composeClassnameRenderProps, cssModule, isFunction, type SizeAdapter, SlotProvider } from "../../utils/index.ts";
 
@@ -147,7 +147,7 @@ function ListBox<T extends object>(props: ListBoxProps<T>, ref: ForwardedRef<HTM
                 [HeaderContext, {
                     className: styles["hop-ListBox__section-header"]
                 }],
-                [SectionContext, {
+                [ListBoxSectionContext, {
                     className: styles["hop-ListBox__section"]
                 }],
                 [ListBoxItemContext, {
@@ -199,3 +199,4 @@ const _ListBox = forwardRef(ListBox) as <T>(
 (_ListBox as NamedExoticComponent).displayName = "ListBox";
 
 export { _ListBox as ListBox };
+
diff --git a/packages/components/src/ListBox/tests/chromatic/ListBox.stories.tsx b/packages/components/src/ListBox/tests/chromatic/ListBox.stories.tsx
index 811779915..d0d49ab22 100644
--- a/packages/components/src/ListBox/tests/chromatic/ListBox.stories.tsx
+++ b/packages/components/src/ListBox/tests/chromatic/ListBox.stories.tsx
@@ -8,7 +8,7 @@ import { Badge } from "../../../Badge/index.ts";
 import { Header } from "../../../Header/index.ts";
 import { IconList } from "../../../IconList/index.ts";
 import { Inline, Stack } from "../../../layout/index.ts";
-import { Section } from "../../../Section/index.ts";
+import { ListBoxSection } from "../../../ListBoxSection/index.ts";
 import { Text } from "../../../typography/Text/index.ts";
 import { ListBox, ListBoxItem, type ListBoxProps } from "../../index.ts";
 
@@ -81,31 +81,31 @@ export const Default = {
                 </Inline>
                 <h1>Sections</h1>
                 <ListBox {...args}>
-                    <Section>
+                    <ListBoxSection>
                         <Header>Visited</Header>
                         <ListBoxItem id="1">Earth</ListBoxItem>
                         <ListBoxItem id="2">Mars</ListBoxItem>
                         <ListBoxItem id="3">Saturn</ListBoxItem>
-                    </Section>
-                    <Section>
+                    </ListBoxSection>
+                    <ListBoxSection>
                         <Header>Not Visited</Header>
                         <ListBoxItem id="4">Jupiter</ListBoxItem>
                         <ListBoxItem id="5">Mercury</ListBoxItem>
                         <ListBoxItem id="6">Neptune</ListBoxItem>
                         <ListBoxItem id="7">Uranus</ListBoxItem>
-                    </Section>
+                    </ListBoxSection>
                 </ListBox>
                 <h1>Mixed Section and Items</h1>
                 <ListBox {...args}>
                     <ListBoxItem id="1">Earth</ListBoxItem>
                     <ListBoxItem id="2">Mars</ListBoxItem>
                     <ListBoxItem id="3">Saturn</ListBoxItem>
-                    <Section>
+                    <ListBoxSection>
                         <Header>Visited</Header>
                         <ListBoxItem id="4">Jupiter</ListBoxItem>
                         <ListBoxItem id="5">Mercury</ListBoxItem>
                         <ListBoxItem id="6">Neptune</ListBoxItem>
-                    </Section>
+                    </ListBoxSection>
                     <ListBoxItem id="7">Uranus</ListBoxItem>
                 </ListBox>
                 <h1>Items with Start Icon</h1>
diff --git a/packages/components/src/Section/docs/preview.tsx b/packages/components/src/ListBoxSection/docs/preview.tsx
similarity index 68%
rename from packages/components/src/Section/docs/preview.tsx
rename to packages/components/src/ListBoxSection/docs/preview.tsx
index fd7aae93f..0cdc97040 100644
--- a/packages/components/src/Section/docs/preview.tsx
+++ b/packages/components/src/ListBoxSection/docs/preview.tsx
@@ -1,14 +1,14 @@
-import { Header, ListBox, ListBoxItem, Section } from "@hopper-ui/components";
+import { Header, ListBox, ListBoxItem, ListBoxSection } from "@hopper-ui/components";
 
 export default function Example() {
     return (
         <ListBox>
-            <Section>
+            <ListBoxSection>
                 <Header>Creative Department</Header>
                 <ListBoxItem>Designer</ListBoxItem>
                 <ListBoxItem>Copywriter</ListBoxItem>
                 <ListBoxItem>UX Researcher</ListBoxItem>
-            </Section>
+            </ListBoxSection>
         </ListBox>
     );
 }
diff --git a/packages/components/src/Section/index.ts b/packages/components/src/ListBoxSection/index.ts
similarity index 100%
rename from packages/components/src/Section/index.ts
rename to packages/components/src/ListBoxSection/index.ts
diff --git a/packages/components/src/Section/src/Section.tsx b/packages/components/src/ListBoxSection/src/ListBoxSection.tsx
similarity index 52%
rename from packages/components/src/Section/src/Section.tsx
rename to packages/components/src/ListBoxSection/src/ListBoxSection.tsx
index a3f55a1cd..3f2d7ba07 100644
--- a/packages/components/src/Section/src/Section.tsx
+++ b/packages/components/src/ListBoxSection/src/ListBoxSection.tsx
@@ -1,16 +1,16 @@
 import { useStyledSystem, type StyledComponentProps } from "@hopper-ui/styled-system";
 import clsx from "clsx";
 import { forwardRef, type CSSProperties, type ForwardedRef, type NamedExoticComponent } from "react";
-import { ListBoxSection as RACSection, useContextProps, type SectionProps as RACSectionProps } from "react-aria-components";
+import { ListBoxSection as RACListBoxSection, useContextProps, type SectionProps as RACSectionProps } from "react-aria-components";
 
-import { SectionContext } from "./SectionContext.ts";
+import { ListBoxSectionContext } from "./ListBoxSectionContext.ts";
 
-export const GlobalSectionCssSelector = "hop-Section";
+export const GlobalSectionCssSelector = "hop-ListBoxSection";
 
-export interface SectionProps<T> extends StyledComponentProps<RACSectionProps<T>> {}
+export interface ListBoxSectionProps<T> extends StyledComponentProps<RACSectionProps<T>> {}
 
-function Section<T extends object>(props: SectionProps<T>, ref: ForwardedRef<HTMLElement>) {
-    [props, ref] = useContextProps(props, ref, SectionContext);
+function ListBoxSection<T extends object>(props: ListBoxSectionProps<T>, ref: ForwardedRef<HTMLElement>) {
+    [props, ref] = useContextProps(props, ref, ListBoxSectionContext);
     const { stylingProps, ...ownProps } = useStyledSystem(props);
     const {
         className,
@@ -31,14 +31,14 @@ function Section<T extends object>(props: SectionProps<T>, ref: ForwardedRef<HTM
     };
 
     return (
-        <RACSection
+        <RACListBoxSection
             ref={ref}
             className={classNames}
             style={mergedStyles}
             {...otherProps}
         >
             {children}
-        </RACSection>
+        </RACListBoxSection>
     );
 }
 
@@ -47,9 +47,9 @@ function Section<T extends object>(props: SectionProps<T>, ref: ForwardedRef<HTM
  *
  * [View Documentation](TODO)
  */
-const _Section = forwardRef(Section) as <T>(
-    props: SectionProps<T> & { ref?: ForwardedRef<HTMLDivElement> }
-) => ReturnType<typeof Section>;
-(_Section as NamedExoticComponent).displayName = "Section";
+const _ListBoxSection = forwardRef(ListBoxSection) as <T>(
+    props: ListBoxSectionProps<T> & { ref?: ForwardedRef<HTMLDivElement> }
+) => ReturnType<typeof ListBoxSection>;
+(_ListBoxSection as NamedExoticComponent).displayName = "ListBoxSection";
 
-export { _Section as Section };
+export { _ListBoxSection as ListBoxSection };
diff --git a/packages/components/src/ListBoxSection/src/ListBoxSectionContext.ts b/packages/components/src/ListBoxSection/src/ListBoxSectionContext.ts
new file mode 100644
index 000000000..4694c8038
--- /dev/null
+++ b/packages/components/src/ListBoxSection/src/ListBoxSectionContext.ts
@@ -0,0 +1,10 @@
+import { createContext } from "react";
+import type { ContextValue } from "react-aria-components";
+
+import type { ListBoxSectionProps } from "./ListBoxSection.tsx";
+
+// any is what's used in RAC
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ListBoxSectionContext = createContext<ContextValue<ListBoxSectionProps<any>, HTMLElement>>({});
+
+ListBoxSectionContext.displayName = "ListBoxSectionContext";
diff --git a/packages/components/src/ListBoxSection/src/index.ts b/packages/components/src/ListBoxSection/src/index.ts
new file mode 100644
index 000000000..a40cedf44
--- /dev/null
+++ b/packages/components/src/ListBoxSection/src/index.ts
@@ -0,0 +1,3 @@
+export * from "./ListBoxSection.tsx";
+export * from "./ListBoxSectionContext.ts";
+
diff --git a/packages/components/src/Section/tests/jest/Section.ssr.test.tsx b/packages/components/src/ListBoxSection/tests/jest/ListBoxSection.ssr.test.tsx
similarity index 71%
rename from packages/components/src/Section/tests/jest/Section.ssr.test.tsx
rename to packages/components/src/ListBoxSection/tests/jest/ListBoxSection.ssr.test.tsx
index f1ba31edd..2bab769fd 100644
--- a/packages/components/src/Section/tests/jest/Section.ssr.test.tsx
+++ b/packages/components/src/ListBoxSection/tests/jest/ListBoxSection.ssr.test.tsx
@@ -3,13 +3,13 @@
  */
 import { renderToString } from "react-dom/server";
 
-import { Section } from "../../src/Section.tsx";
+import { ListBoxSection } from "../../src/ListBoxSection.tsx";
 
 describe("Section", () => {
     it("should render on the server", () => {
         const renderOnServer = () =>
             renderToString(
-                <Section>Text</Section>
+                <ListBoxSection>Text</ListBoxSection>
             );
 
         expect(renderOnServer).not.toThrow();
diff --git a/packages/components/src/Section/tests/jest/Section.test.tsx b/packages/components/src/ListBoxSection/tests/jest/ListBoxSection.test.tsx
similarity index 55%
rename from packages/components/src/Section/tests/jest/Section.test.tsx
rename to packages/components/src/ListBoxSection/tests/jest/ListBoxSection.test.tsx
index 20aa220ab..ba9703503 100644
--- a/packages/components/src/Section/tests/jest/Section.test.tsx
+++ b/packages/components/src/ListBoxSection/tests/jest/ListBoxSection.test.tsx
@@ -2,33 +2,33 @@ import { render, screen } from "@hopper-ui/test-utils";
 import { createRef } from "react";
 import { ListBox } from "react-aria-components";
 
-import { Section } from "../../src/Section.tsx";
+import { ListBoxSection } from "../../src/ListBoxSection.tsx";
 
-describe("Section", () => {
+describe("ListBoxSection", () => {
     it("should render with default class", () => {
-        render(<ListBox aria-label="list-box"><Section>Test</Section></ListBox>);
+        render(<ListBox aria-label="list-box"><ListBoxSection>Test</ListBoxSection></ListBox>);
 
         const element = screen.getByRole("group");
-        expect(element).toHaveClass("hop-Section");
+        expect(element).toHaveClass("hop-ListBoxSection");
     });
 
     it("should support custom class", () => {
-        render(<ListBox aria-label="list-box"><Section className="test">Test</Section></ListBox>);
+        render(<ListBox aria-label="list-box"><ListBoxSection className="test">Test</ListBoxSection></ListBox>);
 
         const element = screen.getByRole("group");
-        expect(element).toHaveClass("hop-Section");
+        expect(element).toHaveClass("hop-ListBoxSection");
         expect(element).toHaveClass("test");
     });
 
     it("should support custom style", () => {
-        render(<ListBox aria-label="list-box"><Section marginTop="stack-sm" style={{ marginBottom: "13px" }} >Test</Section></ListBox>);
+        render(<ListBox aria-label="list-box"><ListBoxSection marginTop="stack-sm" style={{ marginBottom: "13px" }} >Test</ListBoxSection></ListBox>);
 
         const element = screen.getByRole("group");
         expect(element).toHaveStyle({ marginTop: "var(--hop-space-stack-sm)", marginBottom: "13px" });
     });
 
     it("should support DOM props", () => {
-        render(<ListBox aria-label="list-box"><Section data-foo="bar">Test</Section></ListBox>);
+        render(<ListBox aria-label="list-box"><ListBoxSection data-foo="bar">Test</ListBoxSection></ListBox>);
 
         const element = screen.getByRole("group");
         expect(element).toHaveAttribute("data-foo", "bar");
@@ -36,7 +36,7 @@ describe("Section", () => {
 
     it("should support refs", () => {
         const ref = createRef<HTMLDivElement>();
-        render(<ListBox aria-label="list-box"><Section ref={ref}>Test</Section></ListBox>);
+        render(<ListBox aria-label="list-box"><ListBoxSection ref={ref}>Test</ListBoxSection></ListBox>);
 
         expect(ref.current).not.toBeNull();
         expect(ref.current instanceof HTMLElement).toBeTruthy();
diff --git a/packages/components/src/Section/src/SectionContext.ts b/packages/components/src/Section/src/SectionContext.ts
deleted file mode 100644
index 8536733bd..000000000
--- a/packages/components/src/Section/src/SectionContext.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { createContext } from "react";
-import type { ContextValue } from "react-aria-components";
-
-import type { SectionProps } from "./Section.tsx";
-
-// any is what's used in RAC
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const SectionContext = createContext<ContextValue<SectionProps<any>, HTMLElement>>({});
-
-SectionContext.displayName = "SectionContext";
diff --git a/packages/components/src/Section/src/index.ts b/packages/components/src/Section/src/index.ts
deleted file mode 100644
index 7049f42e5..000000000
--- a/packages/components/src/Section/src/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./Section.tsx";
-export * from "./SectionContext.ts";
diff --git a/packages/components/src/Select/docs/controlled.tsx b/packages/components/src/Select/docs/controlled.tsx
index ae9224098..a4d67ce26 100644
--- a/packages/components/src/Select/docs/controlled.tsx
+++ b/packages/components/src/Select/docs/controlled.tsx
@@ -1,4 +1,4 @@
-import { Header, Section, Select, SelectItem, type Key } from "@hopper-ui/components";
+import { Header, Select, SelectItem, SelectSection, type Key } from "@hopper-ui/components";
 import { useState } from "react";
 
 export default function Example() {
@@ -14,11 +14,11 @@ export default function Example() {
 
     return (
         <Select selectedKey={selectedKey} onSelectionChange={handleSelectionChange} label="Roles">
-            <Section key="1">
+            <SelectSection key="1">
                 <Header>Operations</Header>
                 <SelectItem id="1">Project Coordinator</SelectItem>
                 <SelectItem id="2">QA Specialist</SelectItem>
-            </Section>
+            </SelectSection>
             <SelectItem key="2" id="3">Manager</SelectItem>
         </Select>
     );
diff --git a/packages/components/src/Select/docs/selectDropdown/dynamicLists.tsx b/packages/components/src/Select/docs/selectDropdown/dynamicLists.tsx
index b5beb53cf..2c1bb6ffe 100644
--- a/packages/components/src/Select/docs/selectDropdown/dynamicLists.tsx
+++ b/packages/components/src/Select/docs/selectDropdown/dynamicLists.tsx
@@ -1,4 +1,4 @@
-import { Collection, Header, Inline, Section, Select, SelectItem } from "@hopper-ui/components";
+import { Collection, Header, Inline, Select, SelectItem, SelectSection } from "@hopper-ui/components";
 
 interface ListItemProps {
     id: number | string;
@@ -51,12 +51,12 @@ export default function Example() {
                     const { role: sectionName, children } = section;
 
                     return (
-                        <Section id={sectionName}>
+                        <SelectSection id={sectionName}>
                             <Header>{sectionName}</Header>
                             <Collection items={children}>
                                 {item => <SelectItem id={item.id}>{item.role}</SelectItem>}
                             </Collection>
-                        </Section>
+                        </SelectSection>
                     );
                 }}
             </Select>
diff --git a/packages/components/src/Select/docs/selectDropdown/section.tsx b/packages/components/src/Select/docs/selectDropdown/section.tsx
index 9246c097f..64463d58b 100644
--- a/packages/components/src/Select/docs/selectDropdown/section.tsx
+++ b/packages/components/src/Select/docs/selectDropdown/section.tsx
@@ -1,21 +1,21 @@
-import { Header, Section, Select, SelectItem } from "@hopper-ui/components";
+import { Header, Select, SelectItem, SelectSection } from "@hopper-ui/components";
 
 export default function Example() {
     return (
         <Select aria-label="list of options">
             <SelectItem>Developer</SelectItem>
             <SelectItem>Manager</SelectItem>
-            <Section>
+            <SelectSection>
                 <Header>Creative Department</Header>
                 <SelectItem>Designer</SelectItem>
                 <SelectItem>Copywriter</SelectItem>
                 <SelectItem>UX Researcher</SelectItem>
-            </Section>
-            <Section>
+            </SelectSection>
+            <SelectSection>
                 <Header>Operations</Header>
                 <SelectItem>Project Coordinator</SelectItem>
                 <SelectItem>QA Specialist</SelectItem>
-            </Section>
+            </SelectSection>
             <SelectItem>Product Owner</SelectItem>
         </Select>
     );
diff --git a/packages/components/src/Select/src/Select.tsx b/packages/components/src/Select/src/Select.tsx
index 1cb15422b..a6e90e3b3 100644
--- a/packages/components/src/Select/src/Select.tsx
+++ b/packages/components/src/Select/src/Select.tsx
@@ -20,6 +20,7 @@ import { useFormProps } from "../../Form/index.ts";
 import { HelperMessage } from "../../HelperMessage/index.ts";
 import { Footer } from "../../layout/index.ts";
 import { ListBox, ListBoxItem, type ListBoxProps, type SelectionIndicator } from "../../ListBox/index.ts";
+import { ListBoxSection } from "../../ListBoxSection/index.ts";
 import { Popover, type PopoverProps } from "../../overlays/index.ts";
 import { ToggleArrow } from "../../ToggleArrow/index.ts";
 import { Label, TextContext } from "../../typography/index.ts";
@@ -313,4 +314,4 @@ const _Select = forwardRef(Select) as <T extends object>(
 ) => ReturnType<typeof Select>;
 (_Select as NamedExoticComponent).displayName = "Select";
 
-export { _Select as Select, ListBoxItem as SelectItem };
+export { _Select as Select, ListBoxItem as SelectItem, ListBoxSection as SelectSection };
diff --git a/packages/components/src/Select/tests/chromatic/Select.stories.tsx b/packages/components/src/Select/tests/chromatic/Select.stories.tsx
index 7c54ce296..31f50c1d7 100644
--- a/packages/components/src/Select/tests/chromatic/Select.stories.tsx
+++ b/packages/components/src/Select/tests/chromatic/Select.stories.tsx
@@ -1,4 +1,4 @@
-import { Select, SelectItem, type SelectProps } from "@hopper-ui/components";
+import { Select, SelectItem, type SelectProps, SelectSection } from "@hopper-ui/components";
 import { AddIcon, SparklesIcon } from "@hopper-ui/icons";
 import { Div } from "@hopper-ui/styled-system";
 import type { Meta, StoryFn, StoryObj } from "@storybook/react";
@@ -7,7 +7,6 @@ import { userEvent, within } from "@storybook/test";
 import { Button } from "../../../buttons/index.ts";
 import { Header } from "../../../Header/index.ts";
 import { Inline, Stack } from "../../../layout/index.ts";
-import { Section } from "../../../Section/index.ts";
 import { Text } from "../../../typography/Text/index.ts";
 
 const meta = {
@@ -68,19 +67,19 @@ export const OnlyItems = {
 export const Sections = {
     render: args => (
         <Select {...args}>
-            <Section>
+            <SelectSection>
                 <Header>Cats</Header>
                 <SelectItem id="1">Zoomy</SelectItem>
                 <SelectItem id="2">Voodoo</SelectItem>
                 <SelectItem id="3">Dusty</SelectItem>
                 <SelectItem id="4">Rengar</SelectItem>
-            </Section>
-            <Section>
+            </SelectSection>
+            <SelectSection>
                 <Header>Dogs</Header>
                 <SelectItem id="5">Teemo</SelectItem>
                 <SelectItem id="6">Scooter</SelectItem>
                 <SelectItem id="7">Prince</SelectItem>
-            </Section>
+            </SelectSection>
         </Select>
     ),
     play: playFn,
@@ -90,19 +89,19 @@ export const Sections = {
 export const Footer = {
     render: args => (
         <Select {...args} footer={<Button variant="ghost-secondary" isFluid><AddIcon /><Text>Add</Text></Button>}>
-            <Section>
+            <SelectSection>
                 <Header>Cats</Header>
                 <SelectItem id="1">Zoomy</SelectItem>
                 <SelectItem id="2">Voodoo</SelectItem>
                 <SelectItem id="3">Dusty</SelectItem>
                 <SelectItem id="4">Rengar</SelectItem>
-            </Section>
-            <Section>
+            </SelectSection>
+            <SelectSection>
                 <Header>Dogs</Header>
                 <SelectItem id="5">Teemo</SelectItem>
                 <SelectItem id="6">Scooter</SelectItem>
                 <SelectItem id="7">Prince</SelectItem>
-            </Section>
+            </SelectSection>
         </Select>
     ),
     play: playFn,
@@ -112,19 +111,19 @@ export const Footer = {
 export const TextFooter = {
     render: args => (
         <Select {...args} footer={<Text>This is a list of animals</Text>}>
-            <Section>
+            <SelectSection>
                 <Header>Cats</Header>
                 <SelectItem id="1">Zoomy</SelectItem>
                 <SelectItem id="2">Voodoo</SelectItem>
                 <SelectItem id="3">Dusty</SelectItem>
                 <SelectItem id="4">Rengar</SelectItem>
-            </Section>
-            <Section>
+            </SelectSection>
+            <SelectSection>
                 <Header>Dogs</Header>
                 <SelectItem id="5">Teemo</SelectItem>
                 <SelectItem id="6">Scooter</SelectItem>
                 <SelectItem id="7">Prince</SelectItem>
-            </Section>
+            </SelectSection>
         </Select>
     ),
     play: playFn,
@@ -134,19 +133,19 @@ export const TextFooter = {
 export const Small = {
     render: args => (
         <Select {...args}>
-            <Section>
+            <SelectSection>
                 <Header>Cats</Header>
                 <SelectItem id="1">Zoomy</SelectItem>
                 <SelectItem id="2">Voodoo</SelectItem>
                 <SelectItem id="3">Dusty</SelectItem>
                 <SelectItem id="4">Rengar</SelectItem>
-            </Section>
-            <Section>
+            </SelectSection>
+            <SelectSection>
                 <Header>Dogs</Header>
                 <SelectItem id="5">Teemo</SelectItem>
                 <SelectItem id="6">Scooter</SelectItem>
                 <SelectItem id="7">Prince</SelectItem>
-            </Section>
+            </SelectSection>
         </Select>
     ),
     args: {
@@ -160,19 +159,19 @@ export const Small = {
 export const Medium = {
     render: args => (
         <Select {...args}>
-            <Section>
+            <SelectSection>
                 <Header>Cats</Header>
                 <SelectItem id="1">Zoomy</SelectItem>
                 <SelectItem id="2">Voodoo</SelectItem>
                 <SelectItem id="3">Dusty</SelectItem>
                 <SelectItem id="4">Rengar</SelectItem>
-            </Section>
-            <Section>
+            </SelectSection>
+            <SelectSection>
                 <Header>Dogs</Header>
                 <SelectItem id="5">Teemo</SelectItem>
                 <SelectItem id="6">Scooter</SelectItem>
                 <SelectItem id="7">Prince</SelectItem>
-            </Section>
+            </SelectSection>
         </Select>
     ),
     args: {
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index ef6646513..82700efca 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -16,9 +16,9 @@ export * from "./inputs/index.ts";
 export * from "./layout/index.ts";
 export * from "./Link/index.ts";
 export * from "./ListBox/index.ts";
+export * from "./ListBoxSection/index.ts";
 export * from "./overlays/Popover/index.ts";
 export * from "./radio/index.ts";
-export * from "./Section/index.ts";
 export * from "./Select/index.ts";
 export * from "./Spinner/index.ts";
 export * from "./switch/index.ts";

From 1ec61afc709af7d10e196d3a791bfb23187016a1 Mon Sep 17 00:00:00 2001
From: vicky-comeau <vicky.comeau@gsoft.com>
Date: Thu, 28 Nov 2024 14:02:52 -0500
Subject: [PATCH 2/4] Fixed docs

---
 .../components/collections/Listbox.mdx        |  6 +-
 .../components/collections/Section.mdx        | 57 -------------------
 .../content/components/pickers/ComboBox.mdx   | 12 +++-
 .../content/components/pickers/Select.mdx     | 12 +++-
 apps/docs/examples/Preview.ts                 |  3 -
 .../src/ListBoxSection/docs/preview.tsx       | 14 -----
 6 files changed, 27 insertions(+), 77 deletions(-)
 delete mode 100644 apps/docs/content/components/collections/Section.mdx
 delete mode 100644 packages/components/src/ListBoxSection/docs/preview.tsx

diff --git a/apps/docs/content/components/collections/Listbox.mdx b/apps/docs/content/components/collections/Listbox.mdx
index 4b9560939..f57446e5c 100644
--- a/apps/docs/content/components/collections/Listbox.mdx
+++ b/apps/docs/content/components/collections/Listbox.mdx
@@ -35,7 +35,7 @@ links:
 
 A `ListBox` uses the following components.
 
-<ComposedComponents components={["Avatar", "Badge", "Header", "Icon", "Section", "Text"]}/>
+<ComposedComponents components={["Avatar", "Badge", "Header", "Icon", "Text"]}/>
 
 ## Usage
 
@@ -170,6 +170,10 @@ List box items can vary in sizes.
 
 <PropTable component="ListBox" />
 
+### ListBoxSection
+
+<PropTable component="ListBoxSection" />
+
 ### ListBoxItem
 
 <PropTable component="ListBoxItem" />
diff --git a/apps/docs/content/components/collections/Section.mdx b/apps/docs/content/components/collections/Section.mdx
deleted file mode 100644
index f4ac59823..000000000
--- a/apps/docs/content/components/collections/Section.mdx
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: Section
-description: A Section serves as a versatile container component, encapsulating an HTML section element.
-category: "collections"
-links:
-    source: https://github.com/gsoft-inc/wl-hopper/blob/main/packages/components/src/Section/src/Section.tsx
----
-
-Section is a subcomponent of [Listbox](./Listbox), it's used within [Combobox](./ComboBox) and [Select](./Select).
-
-<Example src="Section/docs/preview" isOpen />
-
-<FeatureFlag flag="next">
-    ## Guidelines
-
-    TODO: If we have some guidelines about this component&apos;s usage
-
-    ### Accessibility ?
-
-    TODO: If we have some guidelines about this component and accessibility
-</FeatureFlag>
-
-## Anatomy
-
-### Composed Components
-
-A `Section` is used in the following components.
-
-<ComposedComponents components={["ComboBox", "ListBox", "Select"]}/>
-
-<FeatureFlag flag="rc">
-
-    TODO: We have anatomy screenshots from the Figma, we could most likely use them here
-
-    ### Concepts
-
-    TODO: links to related concepts
-</FeatureFlag>
-
-<FeatureFlag flag="next">
-    ## Advanced customization
-
-    ### Contexts
-    TODO: Example of context + content about the context
-
-    ### Custom Children
-
-    TODO: Example of passing custom childrens to the components to fake a slot
-
-    ### Custom Component
-
-    TODO: Example of creating a custom version of this component
-</FeatureFlag>
-
-## Props
-
-<PropTable component="Section" />
diff --git a/apps/docs/content/components/pickers/ComboBox.mdx b/apps/docs/content/components/pickers/ComboBox.mdx
index 218de98c8..6c39f259b 100644
--- a/apps/docs/content/components/pickers/ComboBox.mdx
+++ b/apps/docs/content/components/pickers/ComboBox.mdx
@@ -42,7 +42,7 @@ The Section component represents a `section` within a Hopper container.
 
 A `ComboBox` uses the following components.
 
-<ComposedComponents components={["Avatar", "Badge", "Header", "Icon", "Section", "Text"]}/>
+<ComposedComponents components={["Avatar", "Badge", "Header", "Icon", "Text"]}/>
 
 ## Usage
 
@@ -197,5 +197,15 @@ A combo box item can have a description.
 
 ## Props
 
+### ComboBox
+
 <PropTable component="ComboBox" />
 
+### ComboBoxSection
+
+<PropTable component="ListBoxSection" />
+
+### ComboBoxItem
+
+<PropTable component="ListBoxItem" />
+
diff --git a/apps/docs/content/components/pickers/Select.mdx b/apps/docs/content/components/pickers/Select.mdx
index df304820c..b36b72a3f 100644
--- a/apps/docs/content/components/pickers/Select.mdx
+++ b/apps/docs/content/components/pickers/Select.mdx
@@ -41,7 +41,7 @@ The Section component represents a `section` within a Hopper container.
 
 A `Select` uses the following components.
 
-<ComposedComponents components={["Avatar", "Badge", "Header",  "Icon", "Section", "Text"]}/>
+<ComposedComponents components={["Avatar", "Badge", "Header", "Icon", "Text"]}/>
 
 ## Usage
 
@@ -198,8 +198,18 @@ A select item can have a description.
 
 ## Props
 
+### Select
+
 <PropTable component="Select" />
 
+### SelectSection
+
+<PropTable component="ListBoxSection" />
+
+### SelectItem
+
+<PropTable component="ListBoxItem" />
+
 ## Migration Notes
 
 <MigrateGuide src="Select/docs/migration-notes" />
diff --git a/apps/docs/examples/Preview.ts b/apps/docs/examples/Preview.ts
index 754b7a66a..75e6cf828 100644
--- a/apps/docs/examples/Preview.ts
+++ b/apps/docs/examples/Preview.ts
@@ -152,9 +152,6 @@ export const Previews: Record<string, Preview> = {
     "ListBox/docs/multipleSizes": {
         component: lazy(() => import("@/../../packages/components/src/ListBox/docs/multipleSizes.tsx"))
     },
-    "Section/docs/preview": {
-        component: lazy(() => import("@/../../packages/components/src/Section/docs/preview.tsx"))
-    },
     "tag/docs/preview": {
         component: lazy(() => import("@/../../packages/components/src/tag/docs/preview.tsx"))
     },
diff --git a/packages/components/src/ListBoxSection/docs/preview.tsx b/packages/components/src/ListBoxSection/docs/preview.tsx
deleted file mode 100644
index 0cdc97040..000000000
--- a/packages/components/src/ListBoxSection/docs/preview.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Header, ListBox, ListBoxItem, ListBoxSection } from "@hopper-ui/components";
-
-export default function Example() {
-    return (
-        <ListBox>
-            <ListBoxSection>
-                <Header>Creative Department</Header>
-                <ListBoxItem>Designer</ListBoxItem>
-                <ListBoxItem>Copywriter</ListBoxItem>
-                <ListBoxItem>UX Researcher</ListBoxItem>
-            </ListBoxSection>
-        </ListBox>
-    );
-}

From 424017c37dc50f896a0d69e7e352a62c36054e0a Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 28 Nov 2024 19:20:07 +0000
Subject: [PATCH 3/4] ci(changesets): version packages

---
 .changeset/gentle-islands-search.md | 5 -----
 packages/components/CHANGELOG.md    | 6 ++++++
 packages/components/package.json    | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)
 delete mode 100644 .changeset/gentle-islands-search.md

diff --git a/.changeset/gentle-islands-search.md b/.changeset/gentle-islands-search.md
deleted file mode 100644
index c0ef91211..000000000
--- a/.changeset/gentle-islands-search.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@hopper-ui/components": patch
----
-
-There is no longer a generic Section component. We now have ListBoxSection, SelectSection and ComboBoxSection.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index c3d9af1ad..387ad5dd8 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @hopper-ui/components
 
+## 1.3.35
+
+### Patch Changes
+
+- 865ddbe: There is no longer a generic Section component. We now have ListBoxSection, SelectSection and ComboBoxSection.
+
 ## 1.3.34
 
 ### Patch Changes
diff --git a/packages/components/package.json b/packages/components/package.json
index d7dfaa36e..f96ca6ea0 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@hopper-ui/components",
     "author": "Workleap",
-    "version": "1.3.34",
+    "version": "1.3.35",
     "description": "The components package.",
     "license": "Apache-2.0",
     "repository": {

From a8823462d85897f9da8eade2d2e2f1157fc42598 Mon Sep 17 00:00:00 2001
From: Francis Thibault <francis.thibault@gsoft.com>
Date: Thu, 28 Nov 2024 14:46:03 -0500
Subject: [PATCH 4/4] cleanup of section thumbnails

---
 apps/docs/examples/overview/Section.svg | 1 -
 apps/docs/examples/overview/index.ts    | 2 --
 2 files changed, 3 deletions(-)
 delete mode 100644 apps/docs/examples/overview/Section.svg

diff --git a/apps/docs/examples/overview/Section.svg b/apps/docs/examples/overview/Section.svg
deleted file mode 100644
index 895f84cc5..000000000
--- a/apps/docs/examples/overview/Section.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="160" height="81" fill="none"><rect width="158" height="79" x="1" y="1" fill="var(--hop-neutral-surface)" rx="7"/><rect width="158" height="79" x="1" y="1" stroke="var(--hop-neutral-border-weak)" stroke-width="2" rx="7"/><rect width="150" height="42" x="5" y="21" stroke="var(--hop-neutral-border-strong)" stroke-dasharray="4 6" stroke-linecap="round" stroke-width="2" rx="2"/><path stroke="var(--hop-neutral-border-weak)" stroke-linecap="round" stroke-width="4" d="M13 34h60M13 50h88"/></svg>
diff --git a/apps/docs/examples/overview/index.ts b/apps/docs/examples/overview/index.ts
index 5d1032f3f..cee951509 100644
--- a/apps/docs/examples/overview/index.ts
+++ b/apps/docs/examples/overview/index.ts
@@ -32,7 +32,6 @@ import PasswordField from "./PasswordField.svg";
 import Popover from "./Popover.svg";
 import RadioGroup from "./RadioGroup.svg";
 import SearchField from "./SearchField.svg";
-import Section from "./Section.svg";
 import Select from "./Select.svg";
 import Spinner from "./Spinner.svg";
 import Stack from "./Stack.svg";
@@ -81,7 +80,6 @@ export const OverviewComponents: OverviewComponentsType = {
     Popover,
     RadioGroup,
     SearchField,
-    Section,
     Select,
     Spinner,
     Stack,