diff --git a/.changeset/shiny-mugs-sit.md b/.changeset/shiny-mugs-sit.md
new file mode 100644
index 000000000..88bac9053
--- /dev/null
+++ b/.changeset/shiny-mugs-sit.md
@@ -0,0 +1,7 @@
+---
+"@hopper-ui/styled-system": patch
+"@hopper-ui/components": patch
+"@hopper-ui/icons": patch
+---
+
+Updated peer dependency versions range
diff --git a/apps/docs/app/components/[...slug]/page.tsx b/apps/docs/app/components/[...slug]/page.tsx
index 83edce006..0a2194dcb 100644
--- a/apps/docs/app/components/[...slug]/page.tsx
+++ b/apps/docs/app/components/[...slug]/page.tsx
@@ -11,7 +11,7 @@ interface PageProps {
     };
 }
 
-async function findComponentFromSlug(params : { slug: string[] }) {
+function findComponentFromSlug(params : { slug: string[] }) {
     const [type] = params.slug;
 
     const component = allComponents.find(x => x.slug === type);
@@ -73,14 +73,19 @@ export default async function ComponentPage({ params }: PageProps) {
 }
 
 export async function generateMetadata({ params }: PageProps) {
-    const component = await findComponentFromSlug(params);
+    const component = findComponentFromSlug(params);
 
     if (component) {
-        const title = component?.title;
-
-        return {
-            title: `${title}`
+        const metadata: Record<string, string> = {
+            title: component.title
         };
+
+        if (component.description) {
+            metadata.description = component.description;
+        }
+
+
+        return metadata;
     }
 
     return {
diff --git a/apps/docs/app/components/layout.tsx b/apps/docs/app/components/layout.tsx
index 59571b66f..96fff95d0 100644
--- a/apps/docs/app/components/layout.tsx
+++ b/apps/docs/app/components/layout.tsx
@@ -20,7 +20,8 @@ async function ComponentsLayout({ children }: { children: ReactNode }) {
             "pickers",
             "status",
             "content",
-            "placeholders"
+            "placeholders",
+            "internal-parts"
         ],
         // the components paths are slightly different than the other pages
         // we want the URLS to be /components/ComponentName
diff --git a/apps/docs/app/getting-started/[...slug]/page.tsx b/apps/docs/app/getting-started/[...slug]/page.tsx
index a146f4842..03ef98541 100644
--- a/apps/docs/app/getting-started/[...slug]/page.tsx
+++ b/apps/docs/app/getting-started/[...slug]/page.tsx
@@ -45,9 +45,22 @@ export async function generateStaticParams() {
 }
 
 export async function generateMetadata({ params }: PageProps) {
-    const page = await findPageFromSlug(params.slug);
+    const page = findPageFromSlug(params.slug);
+
+    if (page) {
+        const metadata: Record<string, string> = {
+            title: page.title
+        };
+
+        if (page.description) {
+            metadata.description = page.description;
+        }
+
+
+        return metadata;
+    }
 
     return {
-        title: page ? `${page.title}` : null
+        title: null
     };
 }
diff --git a/apps/docs/app/icons/[...slug]/page.tsx b/apps/docs/app/icons/[...slug]/page.tsx
index 22be07efb..235d6d47f 100644
--- a/apps/docs/app/icons/[...slug]/page.tsx
+++ b/apps/docs/app/icons/[...slug]/page.tsx
@@ -44,9 +44,22 @@ export async function generateStaticParams() {
 }
 
 export async function generateMetadata({ params }: PageProps) {
-    const page = await findPageFromSlug(params.slug);
+    const page = findPageFromSlug(params.slug);
+
+    if (page) {
+        const metadata: Record<string, string> = {
+            title: page.title
+        };
+
+        if (page.description) {
+            metadata.description = page.description;
+        }
+
+
+        return metadata;
+    }
 
     return {
-        title: page ? `${page.title}` : null
+        title: null
     };
 }
diff --git a/apps/docs/app/tokens/[...slug]/page.tsx b/apps/docs/app/tokens/[...slug]/page.tsx
index eddf0aa12..066cfd33b 100644
--- a/apps/docs/app/tokens/[...slug]/page.tsx
+++ b/apps/docs/app/tokens/[...slug]/page.tsx
@@ -44,7 +44,7 @@ export async function generateStaticParams() {
 
 // The sections are Overview, Semantic and Core. we want all title in "Core" to be "Core " + "Color"(the token type) + " Tokens"
 export async function generateMetadata({ params }: PageProps) {
-    const page = await findPageFromSlug(params.slug);
+    const page = findPageFromSlug(params.slug);
 
     if (!page) {
         return {
@@ -52,7 +52,7 @@ export async function generateMetadata({ params }: PageProps) {
         };
     }
 
-    const { title, section } = page;
+    const { title, section, description } = page;
 
     let pageTitle = `${title}`;
     if (section === "core") {
@@ -61,7 +61,14 @@ export async function generateMetadata({ params }: PageProps) {
         pageTitle = `Semantic ${title} Tokens`;
     }
 
-    return {
+    const metadata: Record<string, string> = {
         title: pageTitle
     };
+
+    if (description) {
+        metadata.description = description;
+    }
+
+
+    return metadata;
 }
diff --git a/apps/docs/app/ui/components/overview/Overview.tsx b/apps/docs/app/ui/components/overview/Overview.tsx
index 9b6f29a2a..b878310db 100644
--- a/apps/docs/app/ui/components/overview/Overview.tsx
+++ b/apps/docs/app/ui/components/overview/Overview.tsx
@@ -23,7 +23,9 @@ const sortOrder = [
     "overlays",
     "pickers",
     "status",
-    "content"
+    "content",
+    "placeholders",
+    "internal-parts"
 ];
 
 const categories = Array.from(new Set(allComponents.map(component => component.category))).filter(x => x && !ignoreCategories.includes(x)).sort((a, b) => {
diff --git a/apps/docs/app/ui/layout/mobileMenu/MobileMenu.tsx b/apps/docs/app/ui/layout/mobileMenu/MobileMenu.tsx
index 6bf459a7d..42202295e 100644
--- a/apps/docs/app/ui/layout/mobileMenu/MobileMenu.tsx
+++ b/apps/docs/app/ui/layout/mobileMenu/MobileMenu.tsx
@@ -17,7 +17,6 @@ import HopperLogo from "./assets/hopper-logo.svg";
 
 import "./mobileMenu.css";
 
-
 interface MobileMenuProps {
     onClose?: () => void;
     isOpen: boolean;
diff --git a/apps/docs/content/components/buttons/Button.mdx b/apps/docs/content/components/buttons/Button.mdx
index 84ff0d31a..eee4c4167 100644
--- a/apps/docs/content/components/buttons/Button.mdx
+++ b/apps/docs/content/components/buttons/Button.mdx
@@ -21,17 +21,9 @@ links:
 
 ## Anatomy
 
-<FeatureFlag flag="rc">
-    TODO: We have anatomy screenshots from the Figma, we could most likely use them here
-
-    ### Concepts
-
-    - [Client Side Routing](./client-side-routing)
-</FeatureFlag>
-
 ### Composed Components
 
-A `Button` uses the following components.
+A `Button` uses the following components:
 
 <ComposedComponents components={["Icon", "IconList", "Text"] }/>
 
@@ -74,7 +66,7 @@ A button can be expanded to full width to fill its parent container.
 <Example src="buttons/docs/button/layout" />
 
 ### Icon Only
-A button can contain only an icon.
+A button can contain only an icon. An accessible name must be provided through [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) prop. See also [WCAG practices](https://www.w3.org/TR/WCAG20-TECHS/ARIA6.html).
 
 <Example src="buttons/docs/button/icon" />
 
diff --git a/apps/docs/content/components/buttons/ButtonGroup.mdx b/apps/docs/content/components/buttons/ButtonGroup.mdx
index c8b96853b..4ae754b17 100644
--- a/apps/docs/content/components/buttons/ButtonGroup.mdx
+++ b/apps/docs/content/components/buttons/ButtonGroup.mdx
@@ -33,20 +33,10 @@ links:
 
 A `ButtonGroup` uses the following component.
 
-<ComposedComponents components={["Button"]}/>
+<ComposedComponents components={["Button", "LinkButton"]}/>
 
 ## Usage
 
-### Disabled
-A button group can be disabled.
-
-<Example src="buttons/docs/buttonGroup/disabled" />
-
-### Fluid
-A button group can be fluid.
-
-<Example src="buttons/docs/buttonGroup/fluid" />
-
 ### Orientation
 A button group can render his items vertically.
 
@@ -57,6 +47,16 @@ A button group can change the alignment of his items.
 
 <Example src="buttons/docs/buttonGroup/alignment" />
 
+### Disabled
+A button group can be disabled.
+
+<Example src="buttons/docs/buttonGroup/disabled" />
+
+### Fluid
+A button group can be fluid.
+
+<Example src="buttons/docs/buttonGroup/fluid" />
+
 ### Sizes
 A button group can be of different sizes.
 
diff --git a/apps/docs/content/components/buttons/LinkButton.mdx b/apps/docs/content/components/buttons/LinkButton.mdx
index 6d9d5f06e..9f312c4ea 100644
--- a/apps/docs/content/components/buttons/LinkButton.mdx
+++ b/apps/docs/content/components/buttons/LinkButton.mdx
@@ -21,17 +21,15 @@ links:
 
 ## Anatomy
 
-<FeatureFlag flag="rc">
-    TODO: We have anatomy screenshots from the Figma, we could most likely use them here
+### Concepts
 
-    ### Concepts
+*LinkButton* makes use of the following concepts:
 
-    - [Client Side Routing](./client-side-routing)
-</FeatureFlag>
+- [Client Side Routing](./client-side-routing)
 
 ### Composed Components
 
-A `LinkButton` uses the following components.
+A *LinkButton* uses the following components:
 
 <ComposedComponents components={["Icon", "IconList", "Text"]}/>
 
@@ -64,13 +62,11 @@ A link button can be disabled.
 <Example src="buttons/docs/linkButton/state" />
 
 ### External
-
 Add `rel="noopener noreferrer"` and `target="_blank"` attributes to render and external link button.
 
 <Example src="buttons/docs/linkButton/external" />
 
 ### No Href
-
 When a link button link does not have an href prop, it is rendered as a `<span role="link">` instead of an `<a>`. Events will need to be handled in JavaScript with the `onPress` prop.
 
 Note: this will not behave like a native link. Browser features like context menus and open in a new tab will not apply.
@@ -87,6 +83,11 @@ A link button can contain only an icon.
 
 <Example src="buttons/docs/linkButton/icon" />
 
+### Router Link
+A link button can be used with any Router. For more information, see the [Client Side Routing](../concepts/client-side-routing) article.
+
+<Example src="buttons/docs/linkButton/reactRouterLink" />
+
 ### Icon
 A link button can contain icons.
 
@@ -97,8 +98,6 @@ Nonstandard end icons can be provided to handle special cases. However, think tw
 
 <Example src="buttons/docs/linkButton/endIcon" />
 
-<Example src="buttons/docs/linkButton/reactRouterLink" />
-
 <FeatureFlag flag="next">
     ## Advanced customization
 
diff --git a/apps/docs/content/components/collections/Listbox.mdx b/apps/docs/content/components/collections/Listbox.mdx
index f57446e5c..bcb312162 100644
--- a/apps/docs/content/components/collections/Listbox.mdx
+++ b/apps/docs/content/components/collections/Listbox.mdx
@@ -33,7 +33,7 @@ links:
 
 #### ListBox
 
-A `ListBox` uses the following components.
+A `ListBox` uses the following components:
 
 <ComposedComponents components={["Avatar", "Badge", "Header", "Icon", "Text"]}/>
 
@@ -69,6 +69,12 @@ A list box can have sections and section headers.
 
 <Example src="ListBox/docs/section" />
 
+### Dividers
+
+A list box can have dividers.
+
+<Example src="ListBox/docs/divider" />
+
 ### Avatar
 
 A ListBox can contain an avatar.
diff --git a/apps/docs/content/components/collections/TagGroup.mdx b/apps/docs/content/components/collections/TagGroup.mdx
index 1b87a8518..886ab55c8 100644
--- a/apps/docs/content/components/collections/TagGroup.mdx
+++ b/apps/docs/content/components/collections/TagGroup.mdx
@@ -32,7 +32,7 @@ links:
 
 ### Composed Components
 
-A `TagGroup` uses the following components.
+A `TagGroup` uses the following components:
 
 <ComposedComponents components={["Avatar", "Badge", "Icon", "IconList", "Text"]}/>
 
diff --git a/apps/docs/content/components/concepts/controlled-mode.mdx b/apps/docs/content/components/concepts/controlled-mode.mdx
index b61d1a5cc..a78dddedf 100644
--- a/apps/docs/content/components/concepts/controlled-mode.mdx
+++ b/apps/docs/content/components/concepts/controlled-mode.mdx
@@ -1,5 +1,6 @@
 ---
 title: Controlled Mode
+description: Learn how to use controlled and uncontrolled modes to customize Hopper components.
 order: 5
 ---
 When working with Hopper components, you can customize a component's behavior using **controlled** or **uncontrolled** properties, depending on your needs. This flexibility is the foundation for **building custom components** on top of Hopper, enabling you to implement interactive features or modify the default behavior of components while preserving their visual style and structure.
diff --git a/apps/docs/content/components/content/Card.mdx b/apps/docs/content/components/content/Card.mdx
index 4116b0911..3933bc9f0 100644
--- a/apps/docs/content/components/content/Card.mdx
+++ b/apps/docs/content/components/content/Card.mdx
@@ -22,7 +22,7 @@ links:
 
 ### Composed Components
 
-A `Card` uses the following components.
+A `Card` uses the following components:
 
 <ComposedComponents components={["Header", "Content", "Footer"]}/>
 
diff --git a/apps/docs/content/components/content/IllustratedMessage.mdx b/apps/docs/content/components/content/IllustratedMessage.mdx
index bc274a678..c93c3a334 100644
--- a/apps/docs/content/components/content/IllustratedMessage.mdx
+++ b/apps/docs/content/components/content/IllustratedMessage.mdx
@@ -12,7 +12,7 @@ links:
 
 ### Composed Components
 
-A `IllustratedMessage` uses the following components.
+A `IllustratedMessage` uses the following components:
 
 <ComposedComponents components={["Image", "Heading", "Content", "ButtonGroup", "Button"]}/>
 
diff --git a/apps/docs/content/components/forms/Checkbox.mdx b/apps/docs/content/components/forms/Checkbox.mdx
index 27787cc8d..721885613 100644
--- a/apps/docs/content/components/forms/Checkbox.mdx
+++ b/apps/docs/content/components/forms/Checkbox.mdx
@@ -32,7 +32,7 @@ links:
 
 ### Composed Components
 
-A `Checkbox` uses the following components.
+A `Checkbox` uses the following components:
 
 <ComposedComponents components={["Icon", "IconList", "Text"]}/>
 
diff --git a/apps/docs/content/components/forms/CheckboxGroup.mdx b/apps/docs/content/components/forms/CheckboxGroup.mdx
index 787385c87..1d88833e4 100644
--- a/apps/docs/content/components/forms/CheckboxGroup.mdx
+++ b/apps/docs/content/components/forms/CheckboxGroup.mdx
@@ -31,7 +31,7 @@ links:
 
 ### Composed Components
 
-A `CheckboxGroup` uses the following components.
+A `CheckboxGroup` uses the following components:
 
 <ComposedComponents components={["Checkbox"]}/>
 
diff --git a/apps/docs/content/components/forms/Form.mdx b/apps/docs/content/components/forms/Form.mdx
index e3e8ffb16..18adc1804 100644
--- a/apps/docs/content/components/forms/Form.mdx
+++ b/apps/docs/content/components/forms/Form.mdx
@@ -30,7 +30,7 @@ links:
 
 ### Composed Components
 
-A `Form` uses the following components.
+A `Form` uses the following components:
 
 <ComposedComponents components={["Button", "ButtonGroup", "ErrorMessage", "HelperMessage", "NumberField", "PasswordField", "TextField"]}/>
 
diff --git a/apps/docs/content/components/forms/RadioGroup.mdx b/apps/docs/content/components/forms/RadioGroup.mdx
index 15df6d82c..6afa1d632 100644
--- a/apps/docs/content/components/forms/RadioGroup.mdx
+++ b/apps/docs/content/components/forms/RadioGroup.mdx
@@ -32,7 +32,7 @@ links:
 
 ### Composed Components
 
-A `RadioGroup` uses the following components.
+A `RadioGroup` uses the following components:
 
 <ComposedComponents components={["Icon", "IconList", "Text"]}/>
 
diff --git a/apps/docs/content/components/forms/Switch.mdx b/apps/docs/content/components/forms/Switch.mdx
index b46baece6..8313120d2 100644
--- a/apps/docs/content/components/forms/Switch.mdx
+++ b/apps/docs/content/components/forms/Switch.mdx
@@ -32,7 +32,7 @@ links:
 
 ### Composed Components
 
-A `Switch` uses the following components.
+A `Switch` uses the following components:
 
 <ComposedComponents components={["Icon", "IconList", "Text"]}/>
 
diff --git a/apps/docs/content/components/icons/Icon.mdx b/apps/docs/content/components/icons/Icon.mdx
index c5ea64da1..fee8b99d9 100644
--- a/apps/docs/content/components/icons/Icon.mdx
+++ b/apps/docs/content/components/icons/Icon.mdx
@@ -48,10 +48,10 @@ import { Icon, type CreatedIconProps } from "@hopper-ui/icons";
 function CustomIcon(props: CreatedIconProps) {
   return (
     <Icon
-    src16={CustomIcon16}
-    src24={CustomIcon24}
-    src32={CustomIcon32}
-    {...props} />
+        src16={CustomIcon16}
+        src24={CustomIcon24}
+        src32={CustomIcon32}
+        {...props} />
   )
 }
 ```
diff --git a/apps/docs/content/components/icons/IconList.mdx b/apps/docs/content/components/icons/IconList.mdx
index de8c60771..6fd6de05b 100644
--- a/apps/docs/content/components/icons/IconList.mdx
+++ b/apps/docs/content/components/icons/IconList.mdx
@@ -30,7 +30,7 @@ links:
 
 ### Composed Components
 
-An `IconList` uses the following components.
+An `IconList` uses the following components:
 
 <ComposedComponents components={["Icon"]}/>
 
diff --git a/apps/docs/content/components/forms/ErrorMessage.mdx b/apps/docs/content/components/internal-parts/ErrorMessage.mdx
similarity index 98%
rename from apps/docs/content/components/forms/ErrorMessage.mdx
rename to apps/docs/content/components/internal-parts/ErrorMessage.mdx
index 8a20116de..c196d0daf 100644
--- a/apps/docs/content/components/forms/ErrorMessage.mdx
+++ b/apps/docs/content/components/internal-parts/ErrorMessage.mdx
@@ -1,7 +1,7 @@
 ---
 title: ErrorMessage
 description: An error message displays validation errors for a form field.
-category: "forms"
+category: "internal parts"
 links:
     source: https://github.com/gsoft-inc/wl-hopper/blob/main/packages/components/src/ErrorMessage/src/ErrorMessage.tsx
 ---
diff --git a/apps/docs/content/components/forms/HelperMessage.mdx b/apps/docs/content/components/internal-parts/HelperMessage.mdx
similarity index 97%
rename from apps/docs/content/components/forms/HelperMessage.mdx
rename to apps/docs/content/components/internal-parts/HelperMessage.mdx
index b44e319ae..a06e550ee 100644
--- a/apps/docs/content/components/forms/HelperMessage.mdx
+++ b/apps/docs/content/components/internal-parts/HelperMessage.mdx
@@ -1,7 +1,7 @@
 ---
 title: HelperMessage
 description: A helper message component displays auxiliary text to guide users in the interface.
-category: "forms"
+category: "internal parts"
 links:
     source: https://github.com/gsoft-inc/wl-hopper/blob/main/packages/components/src/HelperMessage/src/HelperMessage.tsx
 ---
diff --git a/apps/docs/content/components/layout/Inline.mdx b/apps/docs/content/components/layout/Inline.mdx
index 3619ce5a6..d5d486e31 100644
--- a/apps/docs/content/components/layout/Inline.mdx
+++ b/apps/docs/content/components/layout/Inline.mdx
@@ -1,6 +1,6 @@
 ---
 title: Inline
-description: An inline compononent is a layout primitive used to arrange elements horizontally.
+description: An inline component is a layout primitive used to arrange elements horizontally.
 category: "layout"
 links:
     source: https://github.com/gsoft-inc/wl-hopper/blob/main/packages/components/src/layout/src/Inline.tsx
diff --git a/apps/docs/content/components/navigation/Disclosure.mdx b/apps/docs/content/components/navigation/Disclosure.mdx
index a7f7bf806..e85743024 100644
--- a/apps/docs/content/components/navigation/Disclosure.mdx
+++ b/apps/docs/content/components/navigation/Disclosure.mdx
@@ -31,7 +31,7 @@ links:
 
 ### Composed Components
 
-A `Disclosure` uses the following components.
+A `Disclosure` uses the following components:
 
 <ComposedComponents components={["Text, Icon"]}/>
 
diff --git a/apps/docs/content/components/navigation/Link.mdx b/apps/docs/content/components/navigation/Link.mdx
index 3860024c3..d601569c9 100644
--- a/apps/docs/content/components/navigation/Link.mdx
+++ b/apps/docs/content/components/navigation/Link.mdx
@@ -31,7 +31,7 @@ links:
 
 ### Composed Components
 
-A `Link` uses the following components.
+A `Link` uses the following components:
 
 <ComposedComponents components={["Icon", "Text"]}/>
 
diff --git a/apps/docs/content/components/overlays/Popover.mdx b/apps/docs/content/components/overlays/Popover.mdx
index 0053dbf63..4356b92e2 100644
--- a/apps/docs/content/components/overlays/Popover.mdx
+++ b/apps/docs/content/components/overlays/Popover.mdx
@@ -30,7 +30,7 @@ links:
 
 ### Composed Components
 
-A `Popover` uses the following components.
+A `Popover` uses the following components:
 
 <ComposedComponents components={["Button", "ButtonGroup", "Content", "Footer", "Heading", "Link"]}/>
 
diff --git a/apps/docs/content/components/overview/component-list.mdx b/apps/docs/content/components/overview/component-list.mdx
index 541cda8c2..6953fba0a 100644
--- a/apps/docs/content/components/overview/component-list.mdx
+++ b/apps/docs/content/components/overview/component-list.mdx
@@ -1,5 +1,6 @@
 ---
 title: Component List
+description: A list of all the components available in the design system.
 order: 2
 ---
 
diff --git a/apps/docs/content/components/pickers/ComboBox.mdx b/apps/docs/content/components/pickers/ComboBox.mdx
index 6c39f259b..8c89735b1 100644
--- a/apps/docs/content/components/pickers/ComboBox.mdx
+++ b/apps/docs/content/components/pickers/ComboBox.mdx
@@ -40,7 +40,7 @@ The Section component represents a `section` within a Hopper container.
 
 ### Composed Components
 
-A `ComboBox` uses the following components.
+A `ComboBox` uses the following components:
 
 <ComposedComponents components={["Avatar", "Badge", "Header", "Icon", "Text"]}/>
 
diff --git a/apps/docs/content/components/pickers/Select.mdx b/apps/docs/content/components/pickers/Select.mdx
index b36b72a3f..83f92e744 100644
--- a/apps/docs/content/components/pickers/Select.mdx
+++ b/apps/docs/content/components/pickers/Select.mdx
@@ -39,7 +39,7 @@ The Section component represents a `section` within a Hopper container.
 
 ### Composed Components
 
-A `Select` uses the following components.
+A `Select` uses the following components:
 
 <ComposedComponents components={["Avatar", "Badge", "Header", "Icon", "Text"]}/>
 
diff --git a/apps/docs/content/getting-started/overview/installation.mdx b/apps/docs/content/getting-started/overview/installation.mdx
index ba6d386b4..4a32882ba 100644
--- a/apps/docs/content/getting-started/overview/installation.mdx
+++ b/apps/docs/content/getting-started/overview/installation.mdx
@@ -1,6 +1,6 @@
 ---
 title: Installation
-description: How to install and set up Hopper in your project
+description: Learn how to install and set up Hopper in your project
 order: 1
 status: ready
 ---
diff --git a/apps/docs/content/icons/SVG-icons/icon-library.mdx b/apps/docs/content/icons/SVG-icons/icon-library.mdx
index 5d31f2e0a..c910c9d47 100644
--- a/apps/docs/content/icons/SVG-icons/icon-library.mdx
+++ b/apps/docs/content/icons/SVG-icons/icon-library.mdx
@@ -1,6 +1,6 @@
 ---
 title: Icon Library
-description: Getting started with Workleap Design Icons
+description: Getting started with Hopper's SVG Icons library
 order: 2
 ---
 
diff --git a/apps/docs/content/icons/SVG-icons/rich-icon-library.mdx b/apps/docs/content/icons/SVG-icons/rich-icon-library.mdx
index f36603d1d..bdfba59de 100644
--- a/apps/docs/content/icons/SVG-icons/rich-icon-library.mdx
+++ b/apps/docs/content/icons/SVG-icons/rich-icon-library.mdx
@@ -1,6 +1,6 @@
 ---
 title: Rich Icon Library
-description: Getting started with Workleap Design Icons
+description: Getting started with Hopper's Rich SVG Icons library
 order: 3
 ---
 
diff --git a/apps/docs/content/icons/overview/designing-an-icon.mdx b/apps/docs/content/icons/overview/designing-an-icon.mdx
index e9957dbe1..4b90e9613 100644
--- a/apps/docs/content/icons/overview/designing-an-icon.mdx
+++ b/apps/docs/content/icons/overview/designing-an-icon.mdx
@@ -1,6 +1,6 @@
 ---
 title: Designing an Icon
-description: Learn how to create consistent and high-quality icons for the Workleap platform by following these guidelines.
+description: Learn how to create consistent and high-quality icons by following these guidelines.
 ---
 
 import { iconData } from './data.ts';
diff --git a/apps/docs/content/icons/overview/introduction.mdx b/apps/docs/content/icons/overview/introduction.mdx
index d638b43ab..0d1b4df3e 100644
--- a/apps/docs/content/icons/overview/introduction.mdx
+++ b/apps/docs/content/icons/overview/introduction.mdx
@@ -1,6 +1,6 @@
 ---
 title: Introduction
-description: Getting started with Workleap Design Icons
+description: Getting started with Hopper's Icons
 order: 1
 ---
 
diff --git a/apps/docs/content/icons/react-icons/icon-library.mdx b/apps/docs/content/icons/react-icons/icon-library.mdx
index f5e4b572d..6cc2ef638 100644
--- a/apps/docs/content/icons/react-icons/icon-library.mdx
+++ b/apps/docs/content/icons/react-icons/icon-library.mdx
@@ -1,6 +1,6 @@
 ---
 title: Icon Library
-description: Getting started with Workleap Design Icons
+description: Getting started with Hopper's Icons library
 order: 3
 ---
 
diff --git a/apps/docs/content/icons/react-icons/rich-icon-library.mdx b/apps/docs/content/icons/react-icons/rich-icon-library.mdx
index d2d4cb9dc..9b05a4049 100644
--- a/apps/docs/content/icons/react-icons/rich-icon-library.mdx
+++ b/apps/docs/content/icons/react-icons/rich-icon-library.mdx
@@ -1,6 +1,6 @@
 ---
 title: Rich Icons Library
-description: Getting started with Workleap Design Rich Icons
+description: Getting started with Hopper's Rich Icons library
 order: 4
 ---
 
diff --git a/apps/docs/content/tokens/core/border-radius.mdx b/apps/docs/content/tokens/core/border-radius.mdx
index 0bab3961e..931c827cb 100644
--- a/apps/docs/content/tokens/core/border-radius.mdx
+++ b/apps/docs/content/tokens/core/border-radius.mdx
@@ -1,6 +1,6 @@
 ---
 title: Border Radius
-description: Getting started with Workleap Design Tokens
+description: Design tokens are design decisions, translated into data. Explore the core border-radius design tokens.
 ---
 import tokens from '../../../datas/tokens.json';
 
diff --git a/apps/docs/content/tokens/core/color.mdx b/apps/docs/content/tokens/core/color.mdx
index dbf41fc80..1bae95514 100644
--- a/apps/docs/content/tokens/core/color.mdx
+++ b/apps/docs/content/tokens/core/color.mdx
@@ -1,6 +1,6 @@
 ---
 title: Color
-description: Getting started with Workleap Design Tokens
+description: Design tokens are design decisions, translated into data. Explore the core color design tokens.
 ---
 
 import tokensDark from '../../../datas/tokens-dark.json';
diff --git a/apps/docs/content/tokens/core/dimensions.mdx b/apps/docs/content/tokens/core/dimensions.mdx
index 5bae52be1..7bd1a5531 100644
--- a/apps/docs/content/tokens/core/dimensions.mdx
+++ b/apps/docs/content/tokens/core/dimensions.mdx
@@ -1,6 +1,6 @@
 ---
 title: Dimensions
-description: Getting started with Workleap Design Tokens
+description: Design tokens are design decisions, translated into data. Explore the core dimensions design tokens.
 ---
 import tokens from '../../../datas/tokens.json';
 
diff --git a/apps/docs/content/tokens/core/font-family.mdx b/apps/docs/content/tokens/core/font-family.mdx
index de0ea533e..5ea97b63b 100644
--- a/apps/docs/content/tokens/core/font-family.mdx
+++ b/apps/docs/content/tokens/core/font-family.mdx
@@ -1,6 +1,6 @@
 ---
 title: Font Family
-description: Getting started with Workleap Design Tokens
+description: Design tokens are design decisions, translated into data. Explore the core font-family design tokens.
 ---
 import tokens from '../../../datas/tokens.json';
 
diff --git a/apps/docs/content/tokens/core/font-size.mdx b/apps/docs/content/tokens/core/font-size.mdx
index f79f6cf76..bda5a3adc 100644
--- a/apps/docs/content/tokens/core/font-size.mdx
+++ b/apps/docs/content/tokens/core/font-size.mdx
@@ -1,6 +1,6 @@
 ---
 title: Font Size
-description: Getting started with Workleap Design Tokens
+description: Design tokens are design decisions, translated into data. Explore the core font-size design tokens.
 ---
 import tokens from '../../../datas/tokens.json';
 
diff --git a/apps/docs/content/tokens/core/font-weight.mdx b/apps/docs/content/tokens/core/font-weight.mdx
index 9571a0776..cf68e5e4a 100644
--- a/apps/docs/content/tokens/core/font-weight.mdx
+++ b/apps/docs/content/tokens/core/font-weight.mdx
@@ -1,6 +1,6 @@
 ---
 title: Font Weight
-description: Getting started with Workleap Design Tokens
+description: Design tokens are design decisions, translated into data. Explore the core font-weight design tokens.
 ---
 import tokens from '../../../datas/tokens.json';
 
diff --git a/apps/docs/content/tokens/core/line-height.mdx b/apps/docs/content/tokens/core/line-height.mdx
index ac88b8a4c..9c96237ac 100644
--- a/apps/docs/content/tokens/core/line-height.mdx
+++ b/apps/docs/content/tokens/core/line-height.mdx
@@ -1,6 +1,6 @@
 ---
 title: Line Height
-description: Getting started with Workleap Design Tokens
+description: Design tokens are design decisions, translated into data. Explore the core line-height design tokens.
 ---
 import tokens from '../../../datas/tokens.json';
 
diff --git a/apps/docs/content/tokens/core/motion.mdx b/apps/docs/content/tokens/core/motion.mdx
index c23044a38..5db5bdd8e 100644
--- a/apps/docs/content/tokens/core/motion.mdx
+++ b/apps/docs/content/tokens/core/motion.mdx
@@ -1,11 +1,11 @@
 ---
 title: Motion
-description: Getting started with Workleap Design Tokens
+description: Design tokens are design decisions, translated into data. Explore the core motion design tokens.
 ---
 
 import tokens from '../../../datas/tokens.json';
 
-Our motion utilities consists of two set of values, *durations* and *easings*.
+Motion brings meaning and a sense of life to the experience. It should be purposeful, intuitive, and seamless. Our motion utilities consists of two set of values, *durations* and *easings*.
 
 ## Usage
 
diff --git a/apps/docs/content/tokens/core/shadow.mdx b/apps/docs/content/tokens/core/shadow.mdx
index f6f8faa1a..9b8f55fa6 100644
--- a/apps/docs/content/tokens/core/shadow.mdx
+++ b/apps/docs/content/tokens/core/shadow.mdx
@@ -1,6 +1,6 @@
 ---
 title: Shadow
-description: Getting started with Workleap Design Tokens
+description: Design tokens are design decisions, translated into data. Explore the core box-shadow design tokens.
 ---
 import tokens from '../../../datas/tokens.json';
 
diff --git a/apps/docs/content/tokens/semantic/color.mdx b/apps/docs/content/tokens/semantic/color.mdx
index e282a686c..96298cfd4 100644
--- a/apps/docs/content/tokens/semantic/color.mdx
+++ b/apps/docs/content/tokens/semantic/color.mdx
@@ -1,6 +1,6 @@
 ---
 title: Color
-description: Getting started with Workleap Design Tokens
+description: Design tokens are design decisions, translated into data. Explore the semantic color design tokens.
 ---
 import tokensDark from '../../../datas/tokens-dark.json';
 import tokens from '../../../datas/tokens.json';
diff --git a/apps/docs/content/tokens/semantic/elevation.mdx b/apps/docs/content/tokens/semantic/elevation.mdx
index c83b18064..e16645ccb 100644
--- a/apps/docs/content/tokens/semantic/elevation.mdx
+++ b/apps/docs/content/tokens/semantic/elevation.mdx
@@ -1,6 +1,6 @@
 ---
 title: Elevation
-description: Getting started with Workleap Design Tokens
+description: Design tokens are design decisions, translated into data. Explore the semantic elevation design tokens.
 ---
 import tokens from '../../../datas/tokens.json';
 
diff --git a/apps/docs/content/tokens/semantic/shape.mdx b/apps/docs/content/tokens/semantic/shape.mdx
index 321ab39f9..49c11ddf5 100644
--- a/apps/docs/content/tokens/semantic/shape.mdx
+++ b/apps/docs/content/tokens/semantic/shape.mdx
@@ -1,6 +1,6 @@
 ---
 title: Shape
-description: Getting started with Workleap Design Tokens
+description: Design tokens are design decisions, translated into data. Explore the semantic shape design tokens.
 ---
 import tokens from '../../../datas/tokens.json';
 
diff --git a/apps/docs/content/tokens/semantic/space.mdx b/apps/docs/content/tokens/semantic/space.mdx
index ce2b6df8d..5eb42c52d 100644
--- a/apps/docs/content/tokens/semantic/space.mdx
+++ b/apps/docs/content/tokens/semantic/space.mdx
@@ -1,6 +1,6 @@
 ---
 title: Space
-description: Getting started with Workleap Design Tokens
+description: Design tokens are design decisions, translated into data. Explore the semantic space design tokens.
 ---
 import tokens from '../../../datas/tokens.json';
 
diff --git a/apps/docs/content/tokens/semantic/typography.mdx b/apps/docs/content/tokens/semantic/typography.mdx
index 7534417a4..6537239be 100644
--- a/apps/docs/content/tokens/semantic/typography.mdx
+++ b/apps/docs/content/tokens/semantic/typography.mdx
@@ -1,6 +1,6 @@
 ---
 title: Typography
-description: Getting started with Workleap Design Tokens
+description: Design tokens are design decisions, translated into data. Explore the semantic typography design tokens.
 ---
 
 import tokens from '../../../datas/tokens.json';
diff --git a/apps/docs/examples/Preview.ts b/apps/docs/examples/Preview.ts
index 385cd6b61..9bca98f24 100644
--- a/apps/docs/examples/Preview.ts
+++ b/apps/docs/examples/Preview.ts
@@ -44,18 +44,18 @@ export const Previews: Record<string, Preview> = {
     "buttons/docs/buttonGroup/preview": {
         component: lazy(() => import("@/../../packages/components/src/buttons/docs/buttonGroup/preview.tsx"))
     },
-    "buttons/docs/buttonGroup/disabled": {
-        component: lazy(() => import("@/../../packages/components/src/buttons/docs/buttonGroup/disabled.tsx"))
-    },
-    "buttons/docs/buttonGroup/fluid": {
-        component: lazy(() => import("@/../../packages/components/src/buttons/docs/buttonGroup/fluid.tsx"))
-    },
     "buttons/docs/buttonGroup/orientation": {
         component: lazy(() => import("@/../../packages/components/src/buttons/docs/buttonGroup/orientation.tsx"))
     },
     "buttons/docs/buttonGroup/alignment": {
         component: lazy(() => import("@/../../packages/components/src/buttons/docs/buttonGroup/alignment.tsx"))
     },
+    "buttons/docs/buttonGroup/disabled": {
+        component: lazy(() => import("@/../../packages/components/src/buttons/docs/buttonGroup/disabled.tsx"))
+    },
+    "buttons/docs/buttonGroup/fluid": {
+        component: lazy(() => import("@/../../packages/components/src/buttons/docs/buttonGroup/fluid.tsx"))
+    },
     "buttons/docs/buttonGroup/sizes": {
         component: lazy(() => import("@/../../packages/components/src/buttons/docs/buttonGroup/sizes.tsx"))
     },
@@ -83,15 +83,15 @@ export const Previews: Record<string, Preview> = {
     "buttons/docs/linkButton/icon": {
         component: lazy(() => import("@/../../packages/components/src/buttons/docs/linkButton/icon.tsx"))
     },
+    "buttons/docs/linkButton/reactRouterLink": {
+        component: lazy(() => import("@/../../packages/components/src/buttons/docs/linkButton/reactRouterLink.tsx"))
+    },
     "buttons/docs/linkButton/icons": {
         component: lazy(() => import("@/../../packages/components/src/buttons/docs/linkButton/icons.tsx"))
     },
     "buttons/docs/linkButton/endIcon": {
         component: lazy(() => import("@/../../packages/components/src/buttons/docs/linkButton/endIcon.tsx"))
     },
-    "buttons/docs/linkButton/reactRouterLink": {
-        component: lazy(() => import("@/../../packages/components/src/buttons/docs/linkButton/reactRouterLink.tsx"))
-    },
     "buttons/docs/linkButton/advancedCustomization": {
         component: lazy(() => import("@/../../packages/components/src/buttons/docs/linkButton/advancedCustomization.tsx"))
     },
@@ -113,6 +113,9 @@ export const Previews: Record<string, Preview> = {
     "ListBox/docs/section": {
         component: lazy(() => import("@/../../packages/components/src/ListBox/docs/section.tsx"))
     },
+    "ListBox/docs/divider": {
+        component: lazy(() => import("@/../../packages/components/src/ListBox/docs/divider.tsx"))
+    },
     "ListBox/docs/avatar": {
         component: lazy(() => import("@/../../packages/components/src/ListBox/docs/avatar.tsx"))
     },
diff --git a/packages/components/package.json b/packages/components/package.json
index 1cdfdbc85..876f27d60 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -44,7 +44,7 @@
         "react": "^18 || ^19",
         "react-aria": "^3.36",
         "react-aria-components": "^1.5",
-        "react-dom": "^18"
+        "react-dom": "^18 || ^19"
     },
     "dependencies": {
         "@hopper-ui/icons": "workspace:*",
diff --git a/packages/components/src/Avatar/docs/customization.tsx b/packages/components/src/Avatar/docs/customization.tsx
index d31514da1..3d95c6bd8 100644
--- a/packages/components/src/Avatar/docs/customization.tsx
+++ b/packages/components/src/Avatar/docs/customization.tsx
@@ -1,7 +1,7 @@
-import { Avatar, Stack, Flex } from "@hopper-ui/components";
+import { Avatar, Stack } from "@hopper-ui/components";
 import { type ReactEventHandler, useEffect, useState } from "react";
 
-function useAsyncImage(src: string, retryCount = 5, delay = 250): [string | undefined, ReactEventHandler<HTMLImageElement> | undefined, number] {
+function useAsyncImage(src: string, retryCount = 5, delay = 250) {
     const [currentSrc, setCurrentSrc] = useState(src);
     const [isLoaded, setIsLoaded] = useState(false);
     const [failureCount, setFailureCount] = useState(0);
@@ -42,7 +42,7 @@ function useAsyncImage(src: string, retryCount = 5, delay = 250): [string | unde
         }
     };
 
-    return [isLoaded ? currentSrc : undefined, onError, failureCount];
+    return [isLoaded ? currentSrc : undefined, onError, failureCount] as const;
 }
 
 export default function Example() {
@@ -51,20 +51,20 @@ export default function Example() {
 
     return (
         <Stack>
-            <Flex direction="column" alignItems="center" gap="stack-sm">
+            <Stack alignX="center">
                 <Avatar name="John Doe"
                     src={src}
                     imageProps={{ onError: handleError }}
                 />
                 <p>The avatar failed to load <strong>{failureCount}</strong> times.</p>
-            </Flex>
-            <Flex direction="column" alignItems="center" gap="stack-sm">
+            </Stack>
+            <Stack alignX="center">
                 <Avatar name="John Doe"
                     src={src2}
                     imageProps={{ onError: handleError2 }}
                 />
                 <p>The avatar failed to load <strong>{failureCount2}</strong> times.</p>
-            </Flex>
+            </Stack>
         </Stack>
     );
 }
diff --git a/packages/components/src/Card/docs/migration/button.tsx b/packages/components/src/Card/docs/migration/button.tsx
index 3f1b7567e..75990ef74 100644
--- a/packages/components/src/Card/docs/migration/button.tsx
+++ b/packages/components/src/Card/docs/migration/button.tsx
@@ -1,18 +1,14 @@
-import { Button, Card, Content, Footer, H3, Header, Text } from "@hopper-ui/components";
+import { Button, Card, H3, Inline, Text } from "@hopper-ui/components";
 
 export default function Example() {
     return (
         <Card padding="inset-lg" UNSAFE_maxWidth="30rem" width="100%" gap="stack-md">
-            <Header display="flex" justifyContent="space-between" flexWrap="wrap" gap="inline-md">
+            <Inline alignX="space-between" wrap gap="inline-md">
                 <H3>NASA Headquarters</H3>
                 <Text>No visitors allowed.</Text>
-            </Header>
-            <Content>
-                <Text>NASA Headquarters, officially known as Mary W. Jackson NASA Headquarters or NASA HQ and formerly named Two Independence Square, is a low-rise office building in the two-building Independence Square complex at 300 E Street SW in Washington, D.C.</Text>
-            </Content>
-            <Footer>
-                <Button variant="secondary">Plan a visit</Button>
-            </Footer>
+            </Inline>
+            <Text>NASA Headquarters, officially known as Mary W. Jackson NASA Headquarters or NASA HQ and formerly named Two Independence Square, is a low-rise office building in the two-building Independence Square complex at 300 E Street SW in Washington, D.C.</Text>
+            <Button variant="secondary">Plan a visit</Button>
         </Card>
     );
 }
diff --git a/packages/components/src/Card/docs/migration/buttongroup.tsx b/packages/components/src/Card/docs/migration/buttongroup.tsx
index 193524d6e..ebae8d0c3 100644
--- a/packages/components/src/Card/docs/migration/buttongroup.tsx
+++ b/packages/components/src/Card/docs/migration/buttongroup.tsx
@@ -1,12 +1,10 @@
-import { Button, ButtonGroup, Card, Content, Footer, H3, Header, Text } from "@hopper-ui/components";
+import { Button, ButtonGroup, Card, H3, Stack, Text } from "@hopper-ui/components";
 
 export default function Example() {
     return (
         <Card gap="stack-md" padding="inset-lg" UNSAFE_maxWidth="30rem" width="100%">
-            <Header>
-                <H3>NASA Headquarters</H3>
-            </Header>
-            <Content>
+            <H3>NASA Headquarters</H3>
+            <Stack>
                 <Text>
                     300 E. Street SW, Suite 5R30
                     <br />
@@ -17,16 +15,12 @@ export default function Example() {
                     (202) 358-4338 (Fax)
                     <br />
                 </Text>
-                <Text>
-                    <em>Any trespassers are going to be sent in space.</em>
-                </Text>
-            </Content>
-            <Footer>
-                <ButtonGroup>
-                    <Button>Plan a visit</Button>
-                    <Button variant="secondary">Cancel a booking</Button>
-                </ButtonGroup>
-            </Footer>
+                <em>Any trespassers are going to be sent in space.</em>
+            </Stack>
+            <ButtonGroup>
+                <Button>Plan a visit</Button>
+                <Button variant="secondary">Cancel a booking</Button>
+            </ButtonGroup>
         </Card>
     );
 }
diff --git a/packages/components/src/Card/docs/migration/default.tsx b/packages/components/src/Card/docs/migration/default.tsx
index c688132ae..099e7a199 100644
--- a/packages/components/src/Card/docs/migration/default.tsx
+++ b/packages/components/src/Card/docs/migration/default.tsx
@@ -1,14 +1,10 @@
-import { Card, Content, H3, Header, Text } from "@hopper-ui/components";
+import { Card, H3, Text } from "@hopper-ui/components";
 
 export default function Example() {
     return (
         <Card padding="inset-lg" UNSAFE_maxWidth="30rem" width="100%" gap="stack-md">
-            <Header>
-                <H3>NASA Headquarters</H3>
-            </Header>
-            <Content>
-                <Text>NASA Headquarters, officially known as Mary W. Jackson NASA Headquarters or NASA HQ and formerly named Two Independence Square, is a low-rise office building in the two-building Independence Square complex at 300 E Street SW in Washington, D.C.</Text>
-            </Content>
+            <H3>NASA Headquarters</H3>
+            <Text>NASA Headquarters, officially known as Mary W. Jackson NASA Headquarters or NASA HQ and formerly named Two Independence Square, is a low-rise office building in the two-building Independence Square complex at 300 E Street SW in Washington, D.C.</Text>
         </Card>
     );
 }
diff --git a/packages/components/src/Card/docs/migration/fluid.tsx b/packages/components/src/Card/docs/migration/fluid.tsx
index f54e910d4..cdd4e58ee 100644
--- a/packages/components/src/Card/docs/migration/fluid.tsx
+++ b/packages/components/src/Card/docs/migration/fluid.tsx
@@ -1,34 +1,26 @@
-import { Card, Content, Flex, Footer, Grid, H3, Header, Img, Text } from "@hopper-ui/components";
+import { Card, Flex, H3, Image, Stack, Text } from "@hopper-ui/components";
 
 import planet from "./assets/planet.png";
 
 export default function Example() {
     return (
-        <Card width="100%" display="grid" gridTemplateAreas="image aside" alignItems="start">
-            <Grid areas={["image aside"]} templateColumns={["max-content", "auto"]}>
-                <Flex height="100%" borderTopLeftRadius="inherit" borderTopRightRadius="inherit" overflow="hidden" backgroundColor="primary-weak" alignItems="center" justifyContent="center" padding="inset-md">
-                    <Img src={planet.src} alt="Planet" />
-                </Flex>
-                <Flex gap="stack-md" direction="column" padding="inset-lg">
-                    <Header>
-                        <H3>NASA</H3>
-                    </Header>
-                    <Content>
-                        <Text>
-                            300 E. Street SW, Suite 5R30
-                            <br />
-                            Washington, DC 20546
-                            <br />
-                            (202) 358-0001 (Office)
-                            <br />
-                            (202) 358-4338 (Fax)
-                        </Text>
-                    </Content>
-                    <Footer>
-                        <em>Please note that we are moving from December 12th to December 23rd.</em>
-                    </Footer>
-                </Flex>
-            </Grid>
+        <Card display="grid" gridTemplateAreas={["image aside"]} gridTemplateColumns={["max-content", "auto"]} width="100%" overflow="hidden" >
+            <Flex backgroundColor="primary-weak" alignItems="center" justifyContent="center" padding="inset-md">
+                <Image src={planet.src} alt="Planet" />
+            </Flex>
+            <Stack padding="inset-lg">
+                <H3>NASA</H3>
+                <Text>
+                    300 E. Street SW, Suite 5R30
+                    <br />
+                    Washington, DC 20546
+                    <br />
+                    (202) 358-0001 (Office)
+                    <br />
+                    (202) 358-4338 (Fax)
+                </Text>
+                <em>Please note that we are moving from December 12th to December 23rd.</em>
+            </Stack>
         </Card>
     );
 }
diff --git a/packages/components/src/Card/docs/migration/illustration.tsx b/packages/components/src/Card/docs/migration/illustration.tsx
index c626f7b25..db9fa82fc 100644
--- a/packages/components/src/Card/docs/migration/illustration.tsx
+++ b/packages/components/src/Card/docs/migration/illustration.tsx
@@ -1,19 +1,17 @@
-import { Card, Content, Flex, H3, Header, Img, Text } from "@hopper-ui/components";
+import { Card, Flex, H3, Image, Stack, Text } from "@hopper-ui/components";
 
 import planet from "./assets/planet.png";
 
 export default function Example() {
     return (
-        <Card UNSAFE_maxWidth="30rem" width="100%" gap="stack-md">
-            <Header borderTopLeftRadius="inherit" borderTopRightRadius="inherit" overflow="hidden">
-                <Flex UNSAFE_height="8rem" backgroundColor="primary-weak" alignItems="center" justifyContent="center">
-                    <Img src={planet.src} alt="Planet" />
-                </Flex>
-                <H3 paddingTop="inset-lg" paddingLeft="inset-lg" paddingRight="inset-lg">NASA Headquarters</H3>
-            </Header>
-            <Content gap="stack-md" paddingBottom="inset-lg" paddingLeft="inset-lg" paddingRight="inset-lg">
+        <Card UNSAFE_maxWidth="30rem" width="100%" overflow="hidden">
+            <Flex UNSAFE_height="8rem" backgroundColor="primary-weak" alignItems="center" justifyContent="center">
+                <Image src={planet.src} alt="Planet" />
+            </Flex>
+            <Stack padding="inset-lg">
+                <H3 marginBottom="inline-lg">NASA Headquarters</H3>
                 <Text>NASA Headquarters, officially known as Mary W. Jackson NASA Headquarters or NASA HQ and formerly named Two Independence Square, is a low-rise office building in the two-building Independence Square complex at 300 E Street SW in Washington, D.C.</Text>
-            </Content>
+            </Stack>
         </Card>
     );
 }
diff --git a/packages/components/src/Card/docs/migration/image.tsx b/packages/components/src/Card/docs/migration/image.tsx
index 82b4f1d4d..e059f0054 100644
--- a/packages/components/src/Card/docs/migration/image.tsx
+++ b/packages/components/src/Card/docs/migration/image.tsx
@@ -1,19 +1,15 @@
-import { Card, Content, Div, H3, Header, Img, Text } from "@hopper-ui/components";
+import { Card, H3, Image, Stack, Text } from "@hopper-ui/components";
 
 import SpaceLandscape from "./assets/space-landscape.png";
 
 export default function Example() {
     return (
-        <Card UNSAFE_maxWidth="30rem" width="100%" gap="stack-md">
-            <Header borderTopLeftRadius="inherit" borderTopRightRadius="inherit" overflow="hidden">
-                <Div UNSAFE_height="8rem">
-                    <Img src={SpaceLandscape.src} alt="Space landscape" objectFit="cover" width="100%" height="100%" />
-                </Div>
-                <H3 paddingTop="inset-lg" paddingLeft="inset-lg" paddingRight="inset-lg">NASA Headquarters</H3>
-            </Header>
-            <Content paddingBottom="inset-lg" paddingLeft="inset-lg" paddingRight="inset-lg">
+        <Card UNSAFE_maxWidth="30rem" width="100%" overflow="hidden">
+            <Image src={SpaceLandscape.src} alt="Space landscape" objectFit="cover" width="100%" UNSAFE_height="8rem" />
+            <Stack padding="inset-lg">
+                <H3>NASA Headquarters</H3>
                 <Text>NASA Headquarters, officially known as Mary W. Jackson NASA Headquarters or NASA HQ and formerly named Two Independence Square, is a low-rise office building in the two-building Independence Square complex at 300 E Street SW in Washington, D.C.</Text>
-            </Content>
+            </Stack>
         </Card>
     );
 }
diff --git a/packages/components/src/Card/docs/migration/orientation.tsx b/packages/components/src/Card/docs/migration/orientation.tsx
index 1772e9e0e..9ad7be953 100644
--- a/packages/components/src/Card/docs/migration/orientation.tsx
+++ b/packages/components/src/Card/docs/migration/orientation.tsx
@@ -1,34 +1,26 @@
-import { Card, Content, Flex, Footer, Grid, H3, Header, Img, Text } from "@hopper-ui/components";
+import { Card, Flex, H3, Image, Stack, Text } from "@hopper-ui/components";
 
 import planet from "./assets/planet.png";
 
 export default function Example() {
     return (
-        <Card UNSAFE_maxWidth="30rem" width="100%" display="grid" gridTemplateAreas="image aside" alignItems="start">
-            <Grid areas={["image aside"]} templateColumns={["max-content", "auto"]}>
-                <Flex height="100%" borderTopLeftRadius="inherit" borderTopRightRadius="inherit" overflow="hidden" backgroundColor="primary-weak" alignItems="center" justifyContent="center" padding="inset-md">
-                    <Img src={planet.src} alt="Planet" />
-                </Flex>
-                <Flex gap="stack-md" direction="column" padding="inset-lg">
-                    <Header>
-                        <H3>NASA</H3>
-                    </Header>
-                    <Content>
-                        <Text>
-                            300 E. Street SW, Suite 5R30
-                            <br />
-                            Washington, DC 20546
-                            <br />
-                            (202) 358-0001 (Office)
-                            <br />
-                            (202) 358-4338 (Fax)
-                        </Text>
-                    </Content>
-                    <Footer>
-                        <em>Please note that we are moving from December 12th to December 23rd.</em>
-                    </Footer>
-                </Flex>
-            </Grid>
+        <Card UNSAFE_maxWidth="30rem" width="100%" display="grid" gridTemplateAreas={["image aside"]} gridTemplateColumns={["max-content", "auto"]} alignItems="start" overflow="hidden" >
+            <Flex height="100%" backgroundColor="primary-weak" alignItems="center" justifyContent="center" padding="inset-md">
+                <Image src={planet.src} alt="Planet" />
+            </Flex>
+            <Stack padding="inset-lg">
+                <H3>NASA</H3>
+                <Text>
+                    300 E. Street SW, Suite 5R30
+                    <br />
+                    Washington, DC 20546
+                    <br />
+                    (202) 358-0001 (Office)
+                    <br />
+                    (202) 358-4338 (Fax)
+                </Text>
+                <em>Please note that we are moving from December 12th to December 23rd.</em>
+            </Stack>
         </Card>
     );
 }
diff --git a/packages/components/src/Card/docs/migration/size.tsx b/packages/components/src/Card/docs/migration/size.tsx
index e8b9c4e38..83bc3016b 100644
--- a/packages/components/src/Card/docs/migration/size.tsx
+++ b/packages/components/src/Card/docs/migration/size.tsx
@@ -1,98 +1,68 @@
-import { Card, Content, Flex, H3, Header, Text } from "@hopper-ui/components";
+import { Card, H3, Inline, Text } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <>
-            <Flex gap="inline-sm" wrap="wrap">
-                <Card padding="inset-lg" UNSAFE_maxWidth="16rem" width="100%">
-                    <Header>
-                        <H3>XS Card</H3>
-                    </Header>
-                    <Content>
-                        <Text>
-                        300 E. Street SW, Suite 5R30
-                            <br />
-                        Washington, DC 20546
-                            <br />
-                        (202) 358-0001 (Office)
-                            <br />
-                        (202) 358-4338 (Fax)
-                        </Text>
-                    </Content>
-                </Card>
-                <Card padding="inset-lg" UNSAFE_maxWidth="20rem" width="100%">
-                    <Flex gap="stack-md" direction="column">
-                        <Header>
-                            <H3>SM Card</H3>
-                        </Header>
-                        <Content>
-                            <Text>
-                        300 E. Street SW, Suite 5R30
-                                <br />
-                        Washington, DC 20546
-                                <br />
-                        (202) 358-0001 (Office)
-                                <br />
-                        (202) 358-4338 (Fax)
-                            </Text>
-                        </Content>
-                    </Flex>
-                </Card>
-                <Card padding="inset-lg" UNSAFE_maxWidth="30rem" width="100%">
-                    <Flex gap="stack-md" direction="column">
-                        <Header>
-                            <H3>MD Card</H3>
-                        </Header>
-                        <Content>
-                            <Text>
-                        300 E. Street SW, Suite 5R30
-                                <br />
-                        Washington, DC 20546
-                                <br />
-                        (202) 358-0001 (Office)
-                                <br />
-                        (202) 358-4338 (Fax)
-                            </Text>
-                        </Content>
-                    </Flex>
-                </Card>
-                <Card padding="inset-lg" UNSAFE_maxWidth="35rem" width="100%">
-                    <Flex gap="stack-md" direction="column">
-                        <Header>
-                            <H3>LG Card</H3>
-                        </Header>
-                        <Content>
-                            <Text>
-                        300 E. Street SW, Suite 5R30
-                                <br />
-                        Washington, DC 20546
-                                <br />
-                        (202) 358-0001 (Office)
-                                <br />
-                        (202) 358-4338 (Fax)
-                            </Text>
-                        </Content>
-                    </Flex>
-                </Card>
-                <Card padding="inset-lg" UNSAFE_maxWidth="40rem" width="100%">
-                    <Flex gap="stack-md" direction="column">
-                        <Header>
-                            <H3>XL Card</H3>
-                        </Header>
-                        <Content>
-                            <Text>
-                        300 E. Street SW, Suite 5R30
-                                <br />
-                        Washington, DC 20546
-                                <br />
-                        (202) 358-0001 (Office)
-                                <br />
-                        (202) 358-4338 (Fax)
-                            </Text>
-                        </Content>
-                    </Flex>
-                </Card>
-            </Flex>
-        </>
+        <Inline gap="inline-sm" wrap="wrap">
+            <Card padding="inset-lg" UNSAFE_maxWidth="16rem" width="100%" gap="stack-md">
+                <H3>XS Card</H3>
+                <Text>
+                    300 E. Street SW, Suite 5R30
+                    <br />
+                    Washington, DC 20546
+                    <br />
+                    (202) 358-0001 (Office)
+                    <br />
+                    (202) 358-4338 (Fax)
+                </Text>
+            </Card>
+            <Card padding="inset-lg" UNSAFE_maxWidth="20rem" width="100%" gap="stack-md">
+                <H3>SM Card</H3>
+                <Text>
+                    300 E. Street SW, Suite 5R30
+                    <br />
+                    Washington, DC 20546
+                    <br />
+                    (202) 358-0001 (Office)
+                    <br />
+                    (202) 358-4338 (Fax)
+                </Text>
+            </Card>
+            <Card padding="inset-lg" UNSAFE_maxWidth="30rem" width="100%" gap="stack-md">
+                <H3>MD Card</H3>
+                <Text>
+                    300 E. Street SW, Suite 5R30
+                    <br />
+                    Washington, DC 20546
+                    <br />
+                    (202) 358-0001 (Office)
+                    <br />
+                    (202) 358-4338 (Fax)
+                </Text>
+            </Card>
+            <Card padding="inset-lg" UNSAFE_maxWidth="35rem" width="100%" gap="stack-md">
+                <H3>LG Card</H3>
+                <Text>
+                    300 E. Street SW, Suite 5R30
+                    <br />
+                    Washington, DC 20546
+                    <br />
+                    (202) 358-0001 (Office)
+                    <br />
+                    (202) 358-4338 (Fax)
+                </Text>
+            </Card>
+            <Card padding="inset-lg" UNSAFE_maxWidth="40rem" width="100%" gap="stack-md">
+                <H3>XL Card</H3>
+                <Text>
+                    300 E. Street SW, Suite 5R30
+                    <br />
+                    Washington, DC 20546
+                    <br />
+                    (202) 358-0001 (Office)
+                    <br />
+                    (202) 358-4338 (Fax)
+                </Text>
+            </Card>
+        </Inline>
     );
 }
diff --git a/packages/components/src/Card/docs/preview.tsx b/packages/components/src/Card/docs/preview.tsx
index 4e2878309..4de2e7e65 100644
--- a/packages/components/src/Card/docs/preview.tsx
+++ b/packages/components/src/Card/docs/preview.tsx
@@ -1,11 +1,9 @@
-import { Card, Content, Text } from "@hopper-ui/components";
+import { Card } from "@hopper-ui/components";
 
 export default function Example() {
     return (
         <Card padding="inset-squish-lg" maxWidth="1/2">
-            <Content>
-                <Text>Software built for everyone to do their best work</Text>
-            </Content>
+            Software built for everyone to do their best work
         </Card>
     );
 }
diff --git a/packages/components/src/Card/docs/sections.tsx b/packages/components/src/Card/docs/sections.tsx
index 326a6e837..0e7df75f7 100644
--- a/packages/components/src/Card/docs/sections.tsx
+++ b/packages/components/src/Card/docs/sections.tsx
@@ -1,17 +1,13 @@
-import { Card, Content, Footer, H3, Header, Text } from "@hopper-ui/components";
+import { Card, H3, Text } from "@hopper-ui/components";
 
 export default function Example() {
     return (
         <Card gap="inline-lg" padding="inset-squish-lg" UNSAFE_maxWidth="30rem" width="100%">
-            <Header>
-                <H3>Developer</H3>
-            </Header>
-            <Content>
-                <Text>
-                    A developer builds and maintains software, ensuring functionality, performance, and alignment with project goals.
-                </Text>
-            </Content>
-            <Footer>Start date : <em>September 13th</em></Footer>
+            <H3>Developer</H3>
+            <Text>
+                A developer builds and maintains software, ensuring functionality, performance, and alignment with project goals.
+            </Text>
+            <Text>Start date : <em>September 13th</em></Text>
         </Card>
     );
 }
diff --git a/packages/components/src/Card/docs/variant.tsx b/packages/components/src/Card/docs/variant.tsx
index 727776a7c..27e176868 100644
--- a/packages/components/src/Card/docs/variant.tsx
+++ b/packages/components/src/Card/docs/variant.tsx
@@ -1,29 +1,13 @@
-import { Card, Content, Flex, H2, H3, Header, Text } from "@hopper-ui/components";
+import { Card, H2, H3, Text } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <Card padding="inset-squish-lg" width="3/4">
+        <Card padding="inset-squish-lg" width="3/4" gap="stack-md">
             <H2>Roles</H2>
-            <Flex gap="stack-md" alignItems="stretch" marginTop="stack-md" wrap="wrap">
-                <Card gap="stack-md" padding="inset-squish-lg" flexBasis="50%" variant="second-level" flex="1">
-                    <Header>
-                        <H3>Manager</H3>
-                    </Header>
-                    <Content>
-                        <Text>A manager leads team operations, aligns goals, and fosters a productive work environment to achieve results.</Text>
-                    </Content>
-                </Card>
-                <Card padding="inset-squish-lg" flexBasis="50%" variant="second-level" flex="1">
-                    <Flex gap="stack-md" alignItems="start" direction="column">
-                        <Header>
-                            <H3>Designer</H3>
-                        </Header>
-                        <Content>
-                            <Text>A designer crafts visual solutions, enhancing user experience and aligning designs with brand goals.</Text>
-                        </Content>
-                    </Flex>
-                </Card>
-            </Flex>
+            <Card gap="stack-md" padding="inset-squish-lg" variant="second-level">
+                <H3>Manager</H3>
+                <Text>A manager leads team operations, aligns goals, and fosters a productive work environment to achieve results.</Text>
+            </Card>
         </Card>
     );
 }
diff --git a/packages/components/src/Card/src/Card.module.css b/packages/components/src/Card/src/Card.module.css
index 97e9437c4..cc3577154 100644
--- a/packages/components/src/Card/src/Card.module.css
+++ b/packages/components/src/Card/src/Card.module.css
@@ -2,6 +2,10 @@
     /* Default */
     --hop-Card-border-radius: var(--hop-shape-rounded-md);
     --hop-Card-border-size:  0.0625rem;
+    --hop-Card-font-size: var(--hop-body-md-font-size);
+    --hop-Card-font-family: var(--hop-body-md-font-family);
+    --hop-Card-font-weight: var(--hop-body-md-font-weight);
+    --hop-Card-line-height: var(--hop-body-md-line-height);
 
     /* Main */
     --hop-Card-main-border: var(--hop-Card-border-size) solid var(--hop-neutral-border-weak);
@@ -14,9 +18,15 @@
     display: flex;
     flex-direction: column;
 
+    font-family: var(--hop-Card-font-family);
+    font-size: var(--hop-Card-font-size);
+    font-weight: var(--hop-Card-font-weight);
+    line-height: var(--hop-Card-line-height);
+
     background-color: var(--background-color);
     border: var(--border);
     border-radius: var(--hop-Card-border-radius);
+
 }
 
 .hop-Card--main {
diff --git a/packages/components/src/Card/src/Card.tsx b/packages/components/src/Card/src/Card.tsx
index e7ba19892..bae439153 100644
--- a/packages/components/src/Card/src/Card.tsx
+++ b/packages/components/src/Card/src/Card.tsx
@@ -1,10 +1,9 @@
 import { useStyledSystem, type StyledComponentProps } from "@hopper-ui/styled-system";
 import clsx from "clsx";
 import { forwardRef, type CSSProperties, type ForwardedRef } from "react";
-import { HeaderContext, useContextProps } from "react-aria-components";
+import { useContextProps } from "react-aria-components";
 
-import { ContentContext, FooterContext } from "../../layout/index.ts";
-import { cssModule, SlotProvider, type BaseComponentDOMProps } from "../../utils/index.ts";
+import { cssModule, type BaseComponentDOMProps } from "../../utils/index.ts";
 
 import { CardContext } from "./CardContext.ts";
 
@@ -20,7 +19,7 @@ export interface CardProps extends StyledComponentProps<BaseComponentDOMProps> {
     variant?: "main" | "second-level";
 }
 
-const Card = (props: CardProps, ref: ForwardedRef<HTMLElement>) => {
+const Card = (props: CardProps, ref: ForwardedRef<HTMLDivElement>) => {
     [props, ref] = useContextProps(props, ref, CardContext);
     const { stylingProps, ...ownProps } = useStyledSystem(props);
     const {
@@ -49,28 +48,15 @@ const Card = (props: CardProps, ref: ForwardedRef<HTMLElement>) => {
     };
 
     return (
-        <section
+        <div
             ref={ref}
             className={classNames}
             style={mergedStyles}
             slot={slot ?? undefined}
             {...otherProps}
         >
-            <SlotProvider values={[
-                [HeaderContext, {
-                    className: styles["hop-Card__header"]
-                }],
-                [ContentContext, {
-                    className: styles["hop-Card__content"]
-                }],
-                [FooterContext, {
-                    className: styles["hop-Card__footer"]
-                }]
-            ]}
-            >
-                {children}
-            </SlotProvider>
-        </section>
+            {children}
+        </div>
     );
 };
 
@@ -79,7 +65,7 @@ const Card = (props: CardProps, ref: ForwardedRef<HTMLElement>) => {
  *
  * [View Documentation](TODO)
  */
-const _Card = forwardRef<HTMLElement, CardProps>(Card);
+const _Card = forwardRef<HTMLDivElement, CardProps>(Card);
 _Card.displayName = "Card";
 
 export { _Card as Card };
diff --git a/packages/components/src/Card/src/CardContext.ts b/packages/components/src/Card/src/CardContext.ts
index 3d157a8c6..3b64b3529 100644
--- a/packages/components/src/Card/src/CardContext.ts
+++ b/packages/components/src/Card/src/CardContext.ts
@@ -3,6 +3,6 @@ import type { ContextValue } from "react-aria-components";
 
 import type { CardProps } from "./Card.tsx";
 
-export const CardContext = createContext<ContextValue<CardProps, HTMLElement>>({});
+export const CardContext = createContext<ContextValue<CardProps, HTMLDivElement>>({});
 
 CardContext.displayName = "CardContext";
diff --git a/packages/components/src/Card/tests/chromatic/Card.stories.tsx b/packages/components/src/Card/tests/chromatic/Card.stories.tsx
index 3979558c0..a5a0d6a5f 100644
--- a/packages/components/src/Card/tests/chromatic/Card.stories.tsx
+++ b/packages/components/src/Card/tests/chromatic/Card.stories.tsx
@@ -1,7 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Header } from "../../../Header/index.ts";
-import { Content, Footer } from "../../../layout/index.ts";
 import { Card } from "../../src/Card.tsx";
 
 const meta = {
@@ -16,15 +14,7 @@ type Story = StoryObj<typeof meta>;
 export const Main = {
     render: props => (
         <Card {...props}>
-            <Header>
-                Header
-            </Header>
-            <Content>
-                Content
-            </Content>
-            <Footer>
-                Footer
-            </Footer>
+            Content
         </Card>
     )
 } satisfies Story;
@@ -32,15 +22,7 @@ export const Main = {
 export const SecondLevel = {
     render: props => (
         <Card variant="second-level" {...props}>
-            <Header>
-                Header
-            </Header>
-            <Content>
-                Content
-            </Content>
-            <Footer>
-                Footer
-            </Footer>
+            Content
         </Card>
     )
 } satisfies Story;
@@ -48,17 +30,11 @@ export const SecondLevel = {
 export const EmbeddedCard = {
     render: props => (
         <Card variant="second-level" {...props}>
-            <Header>
-                Header
-            </Header>
-            <Content>
-                <Card>
-                    Embedded
-                </Card>
-            </Content>
-            <Footer>
-                Footer
-            </Footer>
+            Above
+            <Card>
+                Embedded
+            </Card>
+            Under
         </Card>
     )
 } satisfies Story;
diff --git a/packages/components/src/Card/tests/jest/Card.test.tsx b/packages/components/src/Card/tests/jest/Card.test.tsx
index c3e420eed..7f1f28ad7 100644
--- a/packages/components/src/Card/tests/jest/Card.test.tsx
+++ b/packages/components/src/Card/tests/jest/Card.test.tsx
@@ -47,10 +47,10 @@ describe("Card", () => {
     });
 
     it("should support refs", () => {
-        const ref = createRef<HTMLElement>();
+        const ref = createRef<HTMLDivElement>();
         render(<Card data-testid="Card" ref={ref}>12</Card>);
 
         expect(ref.current).not.toBeNull();
-        expect(ref.current instanceof HTMLElement).toBeTruthy();
+        expect(ref.current instanceof HTMLDivElement).toBeTruthy();
     });
 });
diff --git a/packages/components/src/ComboBox/docs/ComboBoxOption/avatar.tsx b/packages/components/src/ComboBox/docs/ComboBoxOption/avatar.tsx
index 88bffe3a1..1ae84a166 100644
--- a/packages/components/src/ComboBox/docs/ComboBoxOption/avatar.tsx
+++ b/packages/components/src/ComboBox/docs/ComboBoxOption/avatar.tsx
@@ -5,15 +5,15 @@ export default function Example() {
         <ComboBox label="Username">
             <ComboBoxItem id="fred-smith" textValue="Fred Smith" >
                 <Avatar src="https://i.pravatar.cc/96?img=3" name="Fred Smith" />
-                <Text slot="label">Fred Smith</Text>
+                <Text>Fred Smith</Text>
             </ComboBoxItem>
             <ComboBoxItem id="karen-smith" textValue="Karen Smith" >
                 <Avatar name="Karen Smith" />
-                <Text slot="label">Karen Smith</Text>
+                <Text>Karen Smith</Text>
             </ComboBoxItem>
             <ComboBoxItem id="john-doe" textValue="John Doe" >
                 <Avatar name="John Doe" />
-                <Text slot="label">John Doe</Text>
+                <Text>John Doe</Text>
             </ComboBoxItem>
         </ComboBox>
     );
diff --git a/packages/components/src/ComboBox/docs/ComboBoxOption/count.tsx b/packages/components/src/ComboBox/docs/ComboBoxOption/count.tsx
index 5953fca3d..b2e7f372d 100644
--- a/packages/components/src/ComboBox/docs/ComboBoxOption/count.tsx
+++ b/packages/components/src/ComboBox/docs/ComboBoxOption/count.tsx
@@ -4,11 +4,11 @@ export default function Example() {
     return (
         <ComboBox label="Roles">
             <ComboBoxItem textValue="Designer">
-                <Text slot="label">Designer</Text>
+                <Text>Designer</Text>
                 <Badge>50</Badge>
             </ComboBoxItem>
             <ComboBoxItem textValue="Developer">
-                <Text slot="label">Developer</Text>
+                <Text>Developer</Text>
                 <Badge variant="secondary">99+</Badge>
             </ComboBoxItem>
             <ComboBoxItem>Manager</ComboBoxItem>
diff --git a/packages/components/src/ComboBox/docs/ComboBoxOption/dynamicLists.tsx b/packages/components/src/ComboBox/docs/ComboBoxOption/dynamicLists.tsx
index b7984e91f..629867b2e 100644
--- a/packages/components/src/ComboBox/docs/ComboBoxOption/dynamicLists.tsx
+++ b/packages/components/src/ComboBox/docs/ComboBoxOption/dynamicLists.tsx
@@ -1,71 +1,40 @@
-import { Collection, ComboBox, ComboBoxItem, ComboBoxSection, Header, Inline } from "@hopper-ui/components";
+import { Collection, ComboBox, ComboBoxItem, ComboBoxSection, Header } from "@hopper-ui/components";
 
-interface ListItemProps {
-    id: number | string;
-    role: string;
-}
-
-interface ListSectionProps {
-    role: string;
-    children: ListItemProps[];
-}
+const OPTIONS_WITH_SECTIONS = [
+    {
+        role: "Operations", children: [
+            { id: 2, role: "Project Coordinator" },
+            { id: 3, role: "QA Specialist" },
+            { id: 4, role: "System Administrator" }
+        ]
+    },
+    {
+        role: "Creative Department", children: [
+            { id: 6, role: "Designer" },
+            { id: 7, role: "Designer" },
+            { id: 8, role: "UX Researcher" }
+        ]
+    }
+];
 
 export default function Example() {
-    const options = [
-        { id: 2, role: "Designer" },
-        { id: 3, role: "Developer" },
-        { id: 4, role: "Manager" },
-        { id: 6, role: "QA Engineer" },
-        { id: 7, role: "Product Owner" },
-        { id: 8, role: "Scrum Master" }
-    ] satisfies ListItemProps[];
-
-    const optionsWithSections = [
-        {
-            role: "Operations", children: [
-                { id: 2, role: "Project Coordinator" },
-                { id: 3, role: "QA Specialist" },
-                { id: 4, role: "System Administrator" }
-            ]
-        },
-        {
-            role: "Creative Department", children: [
-                { id: 6, role: "Designer" },
-                { id: 7, role: "Designer" },
-                { id: 8, role: "UX Researcher" }
-            ]
-        }
-    ] satisfies ListSectionProps[];
-
     return (
-        <Inline alignY="flex-start">
-            <ComboBox
-                items={options}
-                label="Items"
-            >
-                {(item: ListItemProps) => {
-                    const { id, role } = item;
-
-                    return <ComboBoxItem id={id}>{role}</ComboBoxItem>;
-                }}
-            </ComboBox>
-            <ComboBox
-                items={optionsWithSections}
-                label="Section"
-            >
-                {(section: ListSectionProps) => {
-                    const { role: sectionName, children } = section;
+        <ComboBox
+            items={OPTIONS_WITH_SECTIONS}
+            label="Section"
+        >
+            {section => {
+                const { role: sectionName, children } = section;
 
-                    return (
-                        <ComboBoxSection id={sectionName}>
-                            <Header>{sectionName}</Header>
-                            <Collection items={children}>
-                                {item => <ComboBoxItem id={item.id}>{item.role}</ComboBoxItem>}
-                            </Collection>
-                        </ComboBoxSection>
-                    );
-                }}
-            </ComboBox>
-        </Inline>
+                return (
+                    <ComboBoxSection id={sectionName}>
+                        <Header>{sectionName}</Header>
+                        <Collection items={children}>
+                            {item => <ComboBoxItem id={item.id}>{item.role}</ComboBoxItem>}
+                        </Collection>
+                    </ComboBoxSection>
+                );
+            }}
+        </ComboBox>
     );
 }
diff --git a/packages/components/src/ComboBox/docs/ComboBoxOption/endIcons.tsx b/packages/components/src/ComboBox/docs/ComboBoxOption/endIcons.tsx
index a2d2345b8..a0aa9c508 100644
--- a/packages/components/src/ComboBox/docs/ComboBoxOption/endIcons.tsx
+++ b/packages/components/src/ComboBox/docs/ComboBoxOption/endIcons.tsx
@@ -5,13 +5,13 @@ export default function Example() {
     return (
         <ComboBox label="Roles">
             <ComboBoxItem textValue="Designer">
-                <Text slot="label">Designer</Text>
+                <Text>Designer</Text>
                 <IconList slot="end-icon">
                     <SparklesIcon /><SparklesIcon /><SparklesIcon />
                 </IconList>
             </ComboBoxItem>
             <ComboBoxItem textValue="Developer">
-                <SparklesIcon slot="end-icon" /><Text slot="label">Developer</Text>
+                <SparklesIcon slot="end-icon" /><Text>Developer</Text>
             </ComboBoxItem>
             <ComboBoxItem>Manager</ComboBoxItem>
         </ComboBox>
diff --git a/packages/components/src/ComboBox/docs/ComboBoxOption/footer.tsx b/packages/components/src/ComboBox/docs/ComboBoxOption/footer.tsx
index 6ebc46825..bb86b67fa 100644
--- a/packages/components/src/ComboBox/docs/ComboBoxOption/footer.tsx
+++ b/packages/components/src/ComboBox/docs/ComboBoxOption/footer.tsx
@@ -5,7 +5,11 @@ export default function Example() {
     return (
         <ComboBox
             label="Roles"
-            footer={<Button variant="ghost-secondary" isFluid><AddIcon /><Text>Add</Text></Button>}
+            footer={(
+                <Button variant="ghost-secondary" isFluid>
+                    <AddIcon />
+                    <Text>Add</Text></Button>
+            )}
         >
             <ComboBoxItem id="developer">Developer</ComboBoxItem>
             <ComboBoxItem id="designer">Designer</ComboBoxItem>
diff --git a/packages/components/src/ComboBox/docs/ComboBoxOption/icons.tsx b/packages/components/src/ComboBox/docs/ComboBoxOption/icons.tsx
index 7242e558c..c53ad41e6 100644
--- a/packages/components/src/ComboBox/docs/ComboBoxOption/icons.tsx
+++ b/packages/components/src/ComboBox/docs/ComboBoxOption/icons.tsx
@@ -5,13 +5,13 @@ export default function Example() {
     return (
         <ComboBox label="Roles">
             <ComboBoxItem textValue="Developer">
-                <Text slot="label">Developer</Text>
+                <Text>Developer</Text>
                 <IconList>
                     <SparklesIcon /><SparklesIcon /><SparklesIcon />
                 </IconList>
             </ComboBoxItem>
             <ComboBoxItem textValue="Designer">
-                <SparklesIcon /><Text slot="label">Designer</Text>
+                <SparklesIcon /><Text>Designer</Text>
             </ComboBoxItem>
             <ComboBoxItem>Manager</ComboBoxItem>
         </ComboBox>
diff --git a/packages/components/src/ComboBox/docs/ComboBoxOption/loadOnScroll.tsx b/packages/components/src/ComboBox/docs/ComboBoxOption/loadOnScroll.tsx
index 238f6460e..96509cb48 100644
--- a/packages/components/src/ComboBox/docs/ComboBoxOption/loadOnScroll.tsx
+++ b/packages/components/src/ComboBox/docs/ComboBoxOption/loadOnScroll.tsx
@@ -1,12 +1,11 @@
-import { ComboBox, ComboBoxItem } from "@hopper-ui/components";
-import { useAsyncList } from "react-stately";
+import { ComboBox, ComboBoxItem, useAsyncList } from "@hopper-ui/components";
 
 interface Character {
     name: string;
 }
 
 export default function Example() {
-    const list = useAsyncList({
+    const list = useAsyncList<Character>({
         async load({ signal, cursor }) {
             const res = await fetch(cursor || "https://pokeapi.co/api/v2/pokemon", {
                 signal
@@ -23,15 +22,13 @@ export default function Example() {
     return (
         <ComboBox
             label="Roles"
-            items={list.items as Iterable<Character>}
+            items={list.items}
             maxHeight="core_1280"
             isLoading={list.isLoading}
             onLoadMore={list.loadMore}
         >
-            {(item: Character) => {
-                const { name } = item;
-
-                return <ComboBoxItem id={name}>{name}</ComboBoxItem>;
+            {item => {
+                return <ComboBoxItem id={item.name}>{item.name}</ComboBoxItem>;
             }}
         </ComboBox>
     );
diff --git a/packages/components/src/ComboBox/docs/ComboBoxOption/menuPlacement.tsx b/packages/components/src/ComboBox/docs/ComboBoxOption/menuPlacement.tsx
index 0ef4b2d3e..04b1a2136 100644
--- a/packages/components/src/ComboBox/docs/ComboBoxOption/menuPlacement.tsx
+++ b/packages/components/src/ComboBox/docs/ComboBoxOption/menuPlacement.tsx
@@ -2,7 +2,8 @@ import { ComboBox, ComboBoxItem } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <ComboBox label="Roles"
+        <ComboBox
+            label="Roles"
             align="end"
             direction="top"
         >
diff --git a/packages/components/src/ComboBox/docs/ComboBoxOption/selectionIndicator.tsx b/packages/components/src/ComboBox/docs/ComboBoxOption/selectionIndicator.tsx
index 5a5c28938..1268e3094 100644
--- a/packages/components/src/ComboBox/docs/ComboBoxOption/selectionIndicator.tsx
+++ b/packages/components/src/ComboBox/docs/ComboBoxOption/selectionIndicator.tsx
@@ -13,15 +13,15 @@ export default function Example() {
             selectionIndicator="input"
         >
             <ComboBoxItem textValue="Developer" id="1">
-                <Text slot="label">Developer</Text>
+                <Text>Developer</Text>
                 <Text slot="description">Builds and maintains software.</Text>
             </ComboBoxItem>
             <ComboBoxItem textValue="Designer" id="2">
-                <Text slot="label">Designer</Text>
+                <Text>Designer</Text>
                 <Text slot="description">Creates visual design solutions.</Text>
             </ComboBoxItem>
             <ComboBoxItem textValue="Manager" id="3">
-                <Text slot="label">Manager</Text>
+                <Text>Manager</Text>
                 <Text slot="description">Leads teams and projects.</Text>
             </ComboBoxItem>
         </ComboBox>
diff --git a/packages/components/src/ComboBox/docs/allowCustomValue.tsx b/packages/components/src/ComboBox/docs/allowCustomValue.tsx
index 78562b830..6f9135116 100644
--- a/packages/components/src/ComboBox/docs/allowCustomValue.tsx
+++ b/packages/components/src/ComboBox/docs/allowCustomValue.tsx
@@ -3,12 +3,12 @@ import { ComboBox, ComboBoxItem, ComboBoxSection, Header } from "@hopper-ui/comp
 export default function Example() {
     return (
         <ComboBox allowsCustomValue label="Roles">
-            <ComboBoxSection key="1">
+            <ComboBoxSection>
                 <Header>Creative Department</Header>
                 <ComboBoxItem id="1">Designer</ComboBoxItem>
                 <ComboBoxItem id="2">Content creator</ComboBoxItem>
             </ComboBoxSection>
-            <ComboBoxItem key="2" id="3">Manager</ComboBoxItem>
+            <ComboBoxItem id="3">Manager</ComboBoxItem>
         </ComboBox>
     );
 }
diff --git a/packages/components/src/ComboBox/docs/controlled.tsx b/packages/components/src/ComboBox/docs/controlled.tsx
index 032be4c3a..afb63e596 100644
--- a/packages/components/src/ComboBox/docs/controlled.tsx
+++ b/packages/components/src/ComboBox/docs/controlled.tsx
@@ -4,22 +4,22 @@ import { useState } from "react";
 export default function Example() {
     const [selectedKey, setSelectedKey] = useState<Key | null>();
 
-    function handleSelectionChange(key: Key | null) {
+    const handleSelectionChange = (key: Key | null) => {
         if (selectedKey === key) {
             setSelectedKey(null);
         } else {
             setSelectedKey(key);
         }
-    }
+    };
 
     return (
         <ComboBox selectedKey={selectedKey} onSelectionChange={handleSelectionChange} label="Roles">
-            <ComboBoxSection key="1">
+            <ComboBoxSection>
                 <Header>Operations</Header>
                 <ComboBoxItem id="1">Project Coordinator</ComboBoxItem>
                 <ComboBoxItem id="2">QA Specialist</ComboBoxItem>
             </ComboBoxSection>
-            <ComboBoxItem key="2" id="3">Manager</ComboBoxItem>
+            <ComboBoxItem id="3">Manager</ComboBoxItem>
         </ComboBox>
     );
 }
diff --git a/packages/components/src/ComboBox/docs/customFiltering.tsx b/packages/components/src/ComboBox/docs/customFiltering.tsx
index 5faf4d10f..0e66913d5 100644
--- a/packages/components/src/ComboBox/docs/customFiltering.tsx
+++ b/packages/components/src/ComboBox/docs/customFiltering.tsx
@@ -1,32 +1,26 @@
-import { ComboBox, ComboBoxItem } from "@hopper-ui/components";
+import { ComboBox, ComboBoxItem, useFilter } from "@hopper-ui/components";
 import { useMemo, useState } from "react";
-import { useFilter } from "react-aria";
 
-interface Role {
-    id: number;
-    name: string;
-}
+const ROLE_OPTIONS = [
+    { id: 1, name: "Designer" },
+    { id: 2, name: "Developer" },
+    { id: 3, name: "Manager" },
+    { id: 4, name: "QA Engineer" },
+    { id: 5, name: "Product Owner" },
+    { id: 6, name: "Scrum Master" },
+    { id: 7, name: "UX Researcher" },
+    { id: 8, name: "Business Analyst" },
+    { id: 9, name: "DevOps Engineer" },
+    { id: 10, name: "Data Scientist" }
+];
 
 export default function Example() {
-    const options = useMemo(() => [
-        { id: 1, name: "Designer" },
-        { id: 2, name: "Developer" },
-        { id: 3, name: "Manager" },
-        { id: 4, name: "QA Engineer" },
-        { id: 5, name: "Product Owner" },
-        { id: 6, name: "Scrum Master" },
-        { id: 7, name: "UX Researcher" },
-        { id: 8, name: "Business Analyst" },
-        { id: 9, name: "DevOps Engineer" },
-        { id: 10, name: "Data Scientist" }
-    ] satisfies Role[], []);
-
     const { startsWith } = useFilter({ sensitivity: "base" });
     const [filterValue, setFilterValue] = useState("");
-    const filteredItems = useMemo(
-        () => options.filter(item => startsWith(item.name, filterValue)),
-        [options, startsWith, filterValue]
-    );
+
+    const filteredItems = useMemo(() => {
+        return ROLE_OPTIONS.filter(item => startsWith(item.name, filterValue));
+    }, [startsWith, filterValue]);
 
     return (
         <ComboBox
@@ -35,7 +29,7 @@ export default function Example() {
             onInputChange={setFilterValue}
             label="Roles"
         >
-            {(item: Role) => <ComboBoxItem>{item.name}</ComboBoxItem>}
+            {item => <ComboBoxItem id={item.id}>{item.name}</ComboBoxItem>}
         </ComboBox>
     );
 }
diff --git a/packages/components/src/ComboBox/src/ComboBox.tsx b/packages/components/src/ComboBox/src/ComboBox.tsx
index 843a20892..bc6ab797d 100644
--- a/packages/components/src/ComboBox/src/ComboBox.tsx
+++ b/packages/components/src/ComboBox/src/ComboBox.tsx
@@ -1,7 +1,7 @@
 import { IconContext } from "@hopper-ui/icons";
 import { useResponsiveValue, useStyledSystem, type ResponsiveProp, type StyledComponentProps } from "@hopper-ui/styled-system";
 import { mergeRefs, useObjectRef, useResizeObserver } from "@react-aria/utils";
-import { forwardRef, useCallback, useRef, useState, type Context, type ForwardedRef, type MouseEventHandler, type MutableRefObject, type NamedExoticComponent, type ReactNode } from "react";
+import { forwardRef, useCallback, useRef, useState, type ForwardedRef, type MouseEventHandler, type MutableRefObject, type NamedExoticComponent, type ReactNode } from "react";
 import {
     Button,
     composeRenderProps,
@@ -13,7 +13,6 @@ import {
     TextContext as RACTextContext,
     useContextProps,
     useSlottedContext,
-    type ContextValue,
     type ComboBoxProps as RACComboBoxProps,
     type GroupProps as RACGroupProps
 } from "react-aria-components";
@@ -148,7 +147,7 @@ function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: ForwardedRef<H
         triggerProps,
         ...otherProps
     } = ownProps;
-    
+
     const inputRef = useObjectRef(mergeRefs(userProvidedInputRef, props.inputRef ?? null));
     const inputContext = useSlottedContext(InputContext);
     // Make sure to merge the input ref with the context ref from the InputContext.
@@ -239,13 +238,13 @@ function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: ForwardedRef<H
             "--custom-trigger-width": triggerWidth
         };
     });
-    
+
     const footerMarkup = footer ? (
         <ClearProviders
             values={[
                 RACTextContext,
                 TextContext,
-                RACButtonContext as Context<ContextValue<unknown, HTMLElement>>
+                RACButtonContext
             ]}
         >
             <SlotProvider values={[
@@ -257,7 +256,7 @@ function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: ForwardedRef<H
                 <Footer>
                     {ensureTextWrapper(footer)}
                 </Footer>
-            
+
             </SlotProvider>
         </ClearProviders>
     ) : null;
@@ -309,7 +308,7 @@ function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: ForwardedRef<H
                                 {label}
                             </Label>
                         )}
-                        <Popover 
+                        <Popover
                             isAutoWidth={isAutoMenuWidth}
                             isNonDialog
                             placement={`${direction} ${align}`}
@@ -353,8 +352,8 @@ function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: ForwardedRef<H
                                 placeholder={placeholder}
                             />
                             <Button className={buttonClassNames} ref={buttonRef}>
-                                <ToggleArrow 
-                                    className={styles["hop-ComboBox__button-icon"]} 
+                                <ToggleArrow
+                                    className={styles["hop-ComboBox__button-icon"]}
                                     isExpanded={isOpen}
                                 />
                             </Button>
diff --git a/packages/components/src/Disclosure/docs/controlled.tsx b/packages/components/src/Disclosure/docs/controlled.tsx
index a096dd58d..7abe37cda 100644
--- a/packages/components/src/Disclosure/docs/controlled.tsx
+++ b/packages/components/src/Disclosure/docs/controlled.tsx
@@ -1,23 +1,22 @@
-import { Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components";
+import { Disclosure, DisclosureHeader, DisclosurePanel } from "@hopper-ui/components";
 import { useState } from "react";
 
 export default function Example() {
     const [isExpanded, setIsExpanded] = useState(true);
 
     return (
-        <Div width="100%" paddingX="core_320" paddingY="core_480">
-            <Disclosure
-                isExpanded={isExpanded}
-                onExpandedChange={setIsExpanded}
-            >
-                <DisclosureHeader>
-                    This disclosure is {isExpanded ? "expanded" : "collapsed"}
-                </DisclosureHeader>
-                <DisclosurePanel>
-                    Tackle the challenges of hybrid, remote and distributed work, no matter what. 
-                    The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges.
-                </DisclosurePanel>
-            </Disclosure>
-        </Div>
+        <Disclosure
+            width="100%"
+            isExpanded={isExpanded}
+            onExpandedChange={setIsExpanded}
+        >
+            <DisclosureHeader>
+                This disclosure is {isExpanded ? "expanded" : "collapsed"}
+            </DisclosureHeader>
+            <DisclosurePanel>
+                Tackle the challenges of hybrid, remote and distributed work, no matter what.
+                The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges.
+            </DisclosurePanel>
+        </Disclosure>
     );
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/Disclosure/docs/customHeader.tsx b/packages/components/src/Disclosure/docs/customHeader.tsx
index bb6518db7..493ceacdb 100644
--- a/packages/components/src/Disclosure/docs/customHeader.tsx
+++ b/packages/components/src/Disclosure/docs/customHeader.tsx
@@ -1,22 +1,18 @@
-import { Button, Disclosure, DisclosurePanel, Div, Text } from "@hopper-ui/components";
+import { Button, Disclosure, DisclosurePanel, Text } from "@hopper-ui/components";
 
 import { ToggleArrow } from "../../ToggleArrow/index.ts";
 
 export default function Example() {
     return (
-        <Div width="100%" paddingX="core_320" paddingY="core_480">
-            <Disclosure>
-                <Button slot="trigger" variant="secondary">
-                    <Text>Help your people work better</Text>
-                    <ToggleArrow
-                        slot="end-icon"
-                    />
-                </Button>
-                <DisclosurePanel>
-                    Tackle the challenges of hybrid, remote and distributed work, no matter what. 
-                    The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges.
-                </DisclosurePanel>
-            </Disclosure>
-        </Div>
+        <Disclosure width="100%">
+            <Button slot="trigger" variant="secondary">
+                <Text>Help your people work better</Text>
+                <ToggleArrow slot="end-icon" />
+            </Button>
+            <DisclosurePanel>
+                Tackle the challenges of hybrid, remote and distributed work, no matter what.
+                The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges.
+            </DisclosurePanel>
+        </Disclosure>
     );
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/Disclosure/docs/description.tsx b/packages/components/src/Disclosure/docs/description.tsx
index 4ae399822..fc1dcca80 100644
--- a/packages/components/src/Disclosure/docs/description.tsx
+++ b/packages/components/src/Disclosure/docs/description.tsx
@@ -1,20 +1,18 @@
-import { Disclosure, DisclosureHeader, DisclosurePanel, Div, Inline, Text } from "@hopper-ui/components";
+import { Disclosure, DisclosureHeader, DisclosurePanel, Inline, Text } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <Div width="100%" paddingX="core_320" paddingY="core_480">
-            <Disclosure>
-                <DisclosureHeader>
-                    <Inline columnGap="inline-sm" rowGap="core_0" alignY="baseline">
-                        <Text>Workleap Officevibe</Text>
-                        <Text color="neutral-weak" size="sm">Engagement and Feedback</Text>
-                    </Inline>
-                </DisclosureHeader>
-                <DisclosurePanel>
-                    Help employees speak up and make sure they feel heard. 
-                    Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges.
-                </DisclosurePanel>
-            </Disclosure>
-        </Div>
+        <Disclosure width="100%">
+            <DisclosureHeader>
+                <Inline columnGap="inline-sm" rowGap="core_0" alignY="baseline">
+                    <Text>Workleap Officevibe</Text>
+                    <Text color="neutral-weak" size="sm">Engagement and Feedback</Text>
+                </Inline>
+            </DisclosureHeader>
+            <DisclosurePanel>
+                Help employees speak up and make sure they feel heard.
+                Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges.
+            </DisclosurePanel>
+        </Disclosure>
     );
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/Disclosure/docs/disabled.tsx b/packages/components/src/Disclosure/docs/disabled.tsx
index 0e2827907..697df8595 100644
--- a/packages/components/src/Disclosure/docs/disabled.tsx
+++ b/packages/components/src/Disclosure/docs/disabled.tsx
@@ -1,22 +1,20 @@
-import { Disclosure, DisclosureHeader, DisclosurePanel, Div, Inline, Text } from "@hopper-ui/components";
+import { Disclosure, DisclosureHeader, DisclosurePanel, Inline, Text } from "@hopper-ui/components";
 import { SparklesIcon } from "@hopper-ui/icons";
 
 export default function Example() {
     return (
-        <Div width="100%" paddingX="core_320" paddingY="core_480">
-            <Disclosure isDisabled>
-                <DisclosureHeader>
-                    <SparklesIcon />
-                    <Inline columnGap="inline-sm" rowGap="core_0" alignY="baseline">
-                        <Text>Workleap Officevibe</Text>
-                        <Text color="neutral-disabled" size="sm">Engagement and Feedback</Text>
-                    </Inline>
-                </DisclosureHeader>
-                <DisclosurePanel>
-                    Help employees speak up and make sure they feel heard. 
-                    Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges.
-                </DisclosurePanel>
-            </Disclosure>
-        </Div>
+        <Disclosure width="100%" isDisabled>
+            <DisclosureHeader>
+                <SparklesIcon />
+                <Inline columnGap="inline-sm" rowGap="core_0" alignY="baseline">
+                    <Text>Workleap Officevibe</Text>
+                    <Text color="neutral-disabled" size="sm">Engagement and Feedback</Text>
+                </Inline>
+            </DisclosureHeader>
+            <DisclosurePanel>
+                Help employees speak up and make sure they feel heard.
+                Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges.
+            </DisclosurePanel>
+        </Disclosure>
     );
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/Disclosure/docs/icon.tsx b/packages/components/src/Disclosure/docs/icon.tsx
index 5c50a1770..3f9be485e 100644
--- a/packages/components/src/Disclosure/docs/icon.tsx
+++ b/packages/components/src/Disclosure/docs/icon.tsx
@@ -1,19 +1,17 @@
-import { Disclosure, DisclosureHeader, DisclosurePanel, Div, Text } from "@hopper-ui/components";
+import { Disclosure, DisclosureHeader, DisclosurePanel, Text } from "@hopper-ui/components";
 import { SparklesIcon } from "@hopper-ui/icons";
 
 export default function Example() {
     return (
-        <Div width="100%" paddingX="core_320" paddingY="core_480">
-            <Disclosure>
-                <DisclosureHeader>
-                    <SparklesIcon />
-                    <Text>Help your people work better</Text>
-                </DisclosureHeader>
-                <DisclosurePanel>
-                    Tackle the challenges of hybrid, remote and distributed work, no matter what. 
-                    The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges.
-                </DisclosurePanel>
-            </Disclosure>
-        </Div>
+        <Disclosure width="100%">
+            <DisclosureHeader>
+                <SparklesIcon />
+                <Text>Help your people work better</Text>
+            </DisclosureHeader>
+            <DisclosurePanel>
+                Tackle the challenges of hybrid, remote and distributed work, no matter what.
+                The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges.
+            </DisclosurePanel>
+        </Disclosure>
     );
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/Disclosure/docs/preview.tsx b/packages/components/src/Disclosure/docs/preview.tsx
index 5711f791b..8ef311fc9 100644
--- a/packages/components/src/Disclosure/docs/preview.tsx
+++ b/packages/components/src/Disclosure/docs/preview.tsx
@@ -1,17 +1,15 @@
-import { Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components";
+import { Disclosure, DisclosureHeader, DisclosurePanel } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <Div width="100%" paddingX="core_320" paddingY="core_480">
-            <Disclosure>
-                <DisclosureHeader>
-                    Help your people work better
-                </DisclosureHeader>
-                <DisclosurePanel>
-                    Tackle the challenges of hybrid, remote and distributed work, no matter what. 
-                    The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges.
-                </DisclosurePanel>
-            </Disclosure>
-        </Div>
+        <Disclosure width="100%">
+            <DisclosureHeader>
+                Help your people work better
+            </DisclosureHeader>
+            <DisclosurePanel>
+                Tackle the challenges of hybrid, remote and distributed work, no matter what.
+                The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges.
+            </DisclosurePanel>
+        </Disclosure>
     );
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/Disclosure/docs/variants.tsx b/packages/components/src/Disclosure/docs/variants.tsx
index 0bdde29c6..973bc2dda 100644
--- a/packages/components/src/Disclosure/docs/variants.tsx
+++ b/packages/components/src/Disclosure/docs/variants.tsx
@@ -2,13 +2,13 @@ import { Disclosure, DisclosureHeader, DisclosurePanel, Stack } from "@hopper-ui
 
 export default function Example() {
     return (
-        <Stack width="100%" paddingX="core_320" paddingY="core_480">
+        <Stack width="100%">
             <Disclosure variant="standalone">
                 <DisclosureHeader>
                     Help your people work better
                 </DisclosureHeader>
                 <DisclosurePanel>
-                    Tackle the challenges of hybrid, remote and distributed work, no matter what. 
+                    Tackle the challenges of hybrid, remote and distributed work, no matter what.
                     The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges.
                 </DisclosurePanel>
             </Disclosure>
@@ -17,10 +17,10 @@ export default function Example() {
                     Help your people work better
                 </DisclosureHeader>
                 <DisclosurePanel>
-                    Tackle the challenges of hybrid, remote and distributed work, no matter what. 
+                    Tackle the challenges of hybrid, remote and distributed work, no matter what.
                     The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges.
                 </DisclosurePanel>
             </Disclosure>
         </Stack>
     );
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/Form/docs/ariaValidation.tsx b/packages/components/src/Form/docs/ariaValidation.tsx
index 0e7ced461..f3d3bb31d 100644
--- a/packages/components/src/Form/docs/ariaValidation.tsx
+++ b/packages/components/src/Form/docs/ariaValidation.tsx
@@ -1,18 +1,16 @@
-import { Button, Div, Form, TextField } from "@hopper-ui/components";
+import { Button, Form, TextField } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <Div margin="stack-lg">
-            <Form validationBehavior="aria">
-                <TextField
-                    name="username"
-                    defaultValue="admin"
-                    isRequired
-                    validate={value => value === "admin" ? "Nice try." : null}
-                    label="Username"
-                />
-                <Button type="submit">Submit</Button>
-            </Form>
-        </Div>
+        <Form validationBehavior="aria">
+            <TextField
+                name="username"
+                defaultValue="admin"
+                isRequired
+                validate={value => value === "admin" ? "Nice try." : null}
+                label="Username"
+            />
+            <Button type="submit">Submit</Button>
+        </Form>
     );
 }
diff --git a/packages/components/src/Form/docs/disabled.tsx b/packages/components/src/Form/docs/disabled.tsx
index d07e0c05e..5e5f52a0c 100644
--- a/packages/components/src/Form/docs/disabled.tsx
+++ b/packages/components/src/Form/docs/disabled.tsx
@@ -1,12 +1,10 @@
-import { Button, Div, Form, TextField } from "@hopper-ui/components";
+import { Button, Form, TextField } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <Div margin="stack-lg">
-            <Form isDisabled>
-                <TextField name="email" placeholder="Enter your email" label="Email" />
-                <Button type="submit">Sign In</Button>
-            </Form>
-        </Div>
+        <Form isDisabled>
+            <TextField name="email" placeholder="Enter your email" label="Email" />
+            <Button type="submit">Sign In</Button>
+        </Form>
     );
 }
diff --git a/packages/components/src/Form/docs/fluid.tsx b/packages/components/src/Form/docs/fluid.tsx
index b141b800b..378f49005 100644
--- a/packages/components/src/Form/docs/fluid.tsx
+++ b/packages/components/src/Form/docs/fluid.tsx
@@ -1,12 +1,10 @@
-import { Button, Div, Form, TextField } from "@hopper-ui/components";
+import { Button, Form, TextField } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <Div margin="stack-lg" width="80%">
-            <Form isFluid>
-                <TextField name="email" placeholder="Enter your email" label="Email" />
-                <Button type="submit">Sign In</Button>
-            </Form>
-        </Div>
+        <Form isFluid width="80%">
+            <TextField name="email" placeholder="Enter your email" label="Email" />
+            <Button type="submit">Sign In</Button>
+        </Form>
     );
 }
diff --git a/packages/components/src/Form/docs/nativeValidation.tsx b/packages/components/src/Form/docs/nativeValidation.tsx
index 8883963c2..ed6a8f85e 100644
--- a/packages/components/src/Form/docs/nativeValidation.tsx
+++ b/packages/components/src/Form/docs/nativeValidation.tsx
@@ -1,20 +1,18 @@
-import { Button, ButtonGroup, Div, Form, TextField } from "@hopper-ui/components";
+import { Button, ButtonGroup, Form, TextField } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <Div margin="stack-lg">
-            <Form validationBehavior="native">
-                <TextField
-                    name="email"
-                    type="email"
-                    isRequired
-                    label="Email"
-                />
-                <ButtonGroup>
-                    <Button type="submit">Submit</Button>
-                    <Button type="reset">Reset</Button>
-                </ButtonGroup>
-            </Form>
-        </Div>
+        <Form validationBehavior="native">
+            <TextField
+                name="email"
+                type="email"
+                isRequired
+                label="Email"
+            />
+            <ButtonGroup>
+                <Button type="submit">Submit</Button>
+                <Button type="reset">Reset</Button>
+            </ButtonGroup>
+        </Form>
     );
 }
diff --git a/packages/components/src/Form/docs/preview.tsx b/packages/components/src/Form/docs/preview.tsx
index 2a0d40e8d..b76a74b5a 100644
--- a/packages/components/src/Form/docs/preview.tsx
+++ b/packages/components/src/Form/docs/preview.tsx
@@ -1,12 +1,10 @@
-import { Button, Div, Form, TextField } from "@hopper-ui/components";
+import { Button, Form, TextField } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <Div margin="stack-lg">
-            <Form>
-                <TextField name="email" placeholder="Enter your email" label="Email" />
-                <Button type="submit">Sign In</Button>
-            </Form>
-        </Div>
+        <Form>
+            <TextField name="email" placeholder="Enter your email" label="Email" />
+            <Button type="submit">Sign In</Button>
+        </Form>
     );
 }
diff --git a/packages/components/src/Form/docs/validation.tsx b/packages/components/src/Form/docs/validation.tsx
index 15455ebb4..053473b6a 100644
--- a/packages/components/src/Form/docs/validation.tsx
+++ b/packages/components/src/Form/docs/validation.tsx
@@ -1,11 +1,9 @@
-import { Div, Form, TextField } from "@hopper-ui/components";
+import { Form, TextField } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <Div margin="stack-lg">
-            <Form validationErrors={{ username: "Sorry, this username is taken." }}>
-                <TextField name="username" defaultValue="john_doe" label="Username" />
-            </Form>
-        </Div>
+        <Form validationErrors={{ username: "Sorry, this username is taken." }}>
+            <TextField name="username" defaultValue="john_doe" label="Username" />
+        </Form>
     );
 }
diff --git a/packages/components/src/Form/tests/chromatic/Form.stories.tsx b/packages/components/src/Form/tests/chromatic/Form.stories.tsx
index 5b0f4c9be..25e063191 100644
--- a/packages/components/src/Form/tests/chromatic/Form.stories.tsx
+++ b/packages/components/src/Form/tests/chromatic/Form.stories.tsx
@@ -22,60 +22,56 @@ import { Form } from "../../src/Form.tsx";
 
 const meta = {
     title: "Components/Forms/Form",
-    component: Form,
-    render: args => <Form {...args} />
+    component: Form
 } satisfies Meta<typeof Form>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-const Template = () => {
-    return (
-        <>
-            <Inline>
-                <TextField type="email" placeholder="billings@acme.com" isRequired label="Email address" description="Invoices will be sent to this email address." />
-            </Inline>
-            <RadioGroup label="I identify my gender as">
-                <Radio value="man">Man</Radio>
-                <Radio value="women">Women</Radio>
-                <Radio value="non-binary">Non-Binary</Radio>
-            </RadioGroup>
-            <Inline>
-                <TextField placeholder="John" label="First name" />
-                <TextField placeholder="Doe" label="Last name" />
-            </Inline>
-            <TextField placeholder="Looney Tunes Inc." label="Organization name" />
-            <Inline>
-                <TextField placeholder="24 Sussex Drive" label="Address" />
-                <TextField placeholder="Apt or suite" label="Apt/Suite" />
-            </Inline>
-            <TextField placeholder="Old El Paso" label="City" />
-            <TextArea placeholder="Leave a comment" label="Comments" />
-            <Checkbox>
-                Agree to terms and conditions
-            </Checkbox>
-            <Select isRequired label="Choose an animal">
-                <SelectItem id="designer">Designer</SelectItem>
-                <SelectItem id="developer">Developer</SelectItem>
-                <SelectItem id="manager">Manager</SelectItem>
-            </Select>
-            <ComboBox label="Choose an animal">
-                <ComboBoxItem id="dog">Dog</ComboBoxItem>
-                <ComboBoxItem id="cat">Cat</ComboBoxItem>
-                <ComboBoxItem id="frog">Frog</ComboBoxItem>
-            </ComboBox>
-            <TagGroup selectionMode="single" label="Choose a place">
-                <Tag id="1">Canada</Tag>
-                <Tag id="2">US</Tag>
-            </TagGroup>
-            <Button>Submit</Button>
-        </>);
-};
-
 export const Default = {
     args: {
-        children: <Template />
+        children: (
+            <>
+                <Inline>
+                    <TextField type="email" placeholder="billings@acme.com" isRequired label="Email address" description="Invoices will be sent to this email address." />
+                </Inline>
+                <RadioGroup label="I identify my gender as">
+                    <Radio value="man">Man</Radio>
+                    <Radio value="women">Women</Radio>
+                    <Radio value="non-binary">Non-Binary</Radio>
+                </RadioGroup>
+                <Inline>
+                    <TextField placeholder="John" label="First name" />
+                    <TextField placeholder="Doe" label="Last name" />
+                </Inline>
+                <TextField placeholder="Looney Tunes Inc." label="Organization name" />
+                <Inline>
+                    <TextField placeholder="24 Sussex Drive" label="Address" />
+                    <TextField placeholder="Apt or suite" label="Apt/Suite" />
+                </Inline>
+                <TextField placeholder="Old El Paso" label="City" />
+                <TextArea placeholder="Leave a comment" label="Comments" />
+                <Checkbox>
+                Agree to terms and conditions
+                </Checkbox>
+                <Select isRequired label="Choose an animal">
+                    <SelectItem id="designer">Designer</SelectItem>
+                    <SelectItem id="developer">Developer</SelectItem>
+                    <SelectItem id="manager">Manager</SelectItem>
+                </Select>
+                <ComboBox label="Choose an animal">
+                    <ComboBoxItem id="dog">Dog</ComboBoxItem>
+                    <ComboBoxItem id="cat">Cat</ComboBoxItem>
+                    <ComboBoxItem id="frog">Frog</ComboBoxItem>
+                </ComboBox>
+                <TagGroup selectionMode="single" label="Choose a place">
+                    <Tag id="1">Canada</Tag>
+                    <Tag id="2">US</Tag>
+                </TagGroup>
+                <Button>Submit</Button>
+            </>
+        )
     }
 } satisfies Story;
 
@@ -91,71 +87,76 @@ export const Disabled = {
         ...Default.args,
         isDisabled: true
     }
-};
+} satisfies Story;
 
 export const Fluid = {
     args: {
         ...Default.args,
         isFluid: true
     }
-};
+} satisfies Story;
 
 export const LabelNecessityIndicator = {
     args: {
         ...Default.args,
         necessityIndicator: "label"
     }
-};
+} satisfies Story;
 
 export const AsteriskNecessityIndicator = {
     args: {
         ...Default.args,
         necessityIndicator: "asterisk"
     }
-};
+} satisfies Story;
 
 export const Validation = {
-    render: () => (
-        <Form validationErrors={{ username: "Sorry, this username is taken." }}>
+    args:{
+        validationErrors: { username: "Sorry, this username is taken." },
+        children: (
             <TextField defaultValue="john_doe" name="username" label="Username" />
-        </Form>
-    )
-};
+        )
+    }
+} satisfies Story;
 
 export const ValidationBehaviorAria = {
-    render: () => (
-        <Form validationBehavior="aria">
-            <TextField
-                name="username"
-                defaultValue="admin"
-                isRequired
-                validate={value => value === "admin" ? "Nice try." : null}
-                label="Username"
-            />
-            <Button type="submit">Submit</Button>
-        </Form>
-    )
-};
+    args: {
+        validationBehavior: "aria",
+        children: (
+            <>
+                <TextField
+                    name="username"
+                    defaultValue="admin"
+                    isRequired
+                    validate={value => value === "admin" ? "Nice try." : null}
+                    label="Username"
+                />
+                <Button type="submit">Submit</Button>
+            </>
+        )
+    }
+} satisfies Story;
 
 export const ValidationBehaviorNative = {
-    render: () => {
-        return (
-            <Form validationBehavior="native">
+    args:{
+        validationBehavior: "native",
+        children: (
+            <>
                 <TextField
                     name="email"
                     type="email"
                     isRequired
-                    label="Email" 
+                    label="Email"
                     errorMessage="This field is required"
                 />
                 <ButtonGroup>
                     <Button type="submit">Submit</Button>
                     <Button type="reset">Reset</Button>
                 </ButtonGroup>
-            </Form>
-        );
+            </>
+        )
     },
-    play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
         const [submitButton] = canvas.getAllByRole("button");
 
@@ -164,7 +165,7 @@ export const ValidationBehaviorNative = {
         const errorRender = await canvas.findByText("This field is required");
         await expect(errorRender).toBeVisible();
     }
-};
+} satisfies Story;
 
 export const Styling = {
     render: () => {
@@ -199,4 +200,4 @@ export const Styling = {
             </Stack>
         );
     }
-};
+} satisfies Story;
diff --git a/packages/components/src/HopperProvider/docs/controlled-mode/uncontrolled.tsx b/packages/components/src/HopperProvider/docs/controlled-mode/uncontrolled.tsx
index b790a0528..c5b58eba8 100644
--- a/packages/components/src/HopperProvider/docs/controlled-mode/uncontrolled.tsx
+++ b/packages/components/src/HopperProvider/docs/controlled-mode/uncontrolled.tsx
@@ -5,7 +5,7 @@ export default function Example() {
         <TagGroup
             aria-label="Jobs"
             selectionMode="multiple"
-            defaultSelectedKeys={new Set(["designer", "developer"])}
+            defaultSelectedKeys={["designer", "developer"]}
         >
             <Tag id="designer">Designer</Tag>
             <Tag id="developer">Developer</Tag>
diff --git a/packages/components/src/HopperProvider/src/HopperProvider.tsx b/packages/components/src/HopperProvider/src/HopperProvider.tsx
index b93897cfc..c16949866 100644
--- a/packages/components/src/HopperProvider/src/HopperProvider.tsx
+++ b/packages/components/src/HopperProvider/src/HopperProvider.tsx
@@ -8,7 +8,7 @@ export const GlobalHopperProviderCssSelector = "hop-HopperProvider";
 
 export interface HopperProviderProps extends StyledSystemProviderProps {
     /**
-     * The The BCP47 language code for the locale.
+     * The BCP47 language code for the locale.
      * @example "en-US"
      */
     locale?: string;
diff --git a/packages/components/src/Link/docs/external.tsx b/packages/components/src/Link/docs/external.tsx
index c8f6f017d..552c5cd2c 100644
--- a/packages/components/src/Link/docs/external.tsx
+++ b/packages/components/src/Link/docs/external.tsx
@@ -3,9 +3,9 @@ import { NewTabIcon } from "@hopper-ui/icons";
 
 export default function Example() {
     return (
-        <Link href="#" isExternal>
+        <Link href="#" isExternal alignItems="end">
             <Text>Learn more</Text>
-            <NewTabIcon />
+            <NewTabIcon size="sm" />
         </Link>
     );
 }
diff --git a/packages/components/src/Link/docs/image.tsx b/packages/components/src/Link/docs/image.tsx
index 7b6a0c799..abc59720c 100644
--- a/packages/components/src/Link/docs/image.tsx
+++ b/packages/components/src/Link/docs/image.tsx
@@ -1,9 +1,9 @@
-import { Link } from "@hopper-ui/components";
+import { Image, Link } from "@hopper-ui/components";
 
 export default function Example() {
     return (
         <Link href="#" borderRadius="rounded-md" overflow="hidden">
-            <img width="150px" src="/frog.jpg" alt="Kermit Frog" />
+            <Image UNSAFE_width="150px" src="/frog.jpg" alt="Kermit Frog" />
         </Link>
     );
 }
diff --git a/packages/components/src/ListBox/docs/ListBox.stories.tsx b/packages/components/src/ListBox/docs/ListBox.stories.tsx
index 50167dd86..0400b7502 100644
--- a/packages/components/src/ListBox/docs/ListBox.stories.tsx
+++ b/packages/components/src/ListBox/docs/ListBox.stories.tsx
@@ -1,8 +1,7 @@
-import { Collection, type Selection } from "@hopper-ui/components";
+import { Collection, type Selection, useAsyncList } from "@hopper-ui/components";
 import { SparklesIcon } from "@hopper-ui/icons";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { useAsyncList } from "react-stately";
 
 import { Badge } from "../../Badge/index.ts";
 import { Header } from "../../Header/index.ts";
@@ -110,15 +109,15 @@ export const SingleSelection = {
                 onSelectionChange={setSelectedKeys}
             >
                 <ListBoxItem textValue="Item 1" id="1">
-                    <Text slot="label">Item 1</Text>
+                    <Text>Item 1</Text>
                     <Text slot="description">Description of item 1</Text>
                 </ListBoxItem>
                 <ListBoxItem textValue="Item 2" id="2">
-                    <Text slot="label">Item 2</Text>
+                    <Text>Item 2</Text>
                     <Text slot="description">Description of item 2</Text>
                 </ListBoxItem>
                 <ListBoxItem textValue="Item 3" id="3">
-                    <Text slot="label">Item 3</Text>
+                    <Text>Item 3</Text>
                     <Text slot="description">Description of item 3</Text>
                 </ListBoxItem>
             </ListBox>
@@ -278,13 +277,13 @@ export const Icons = {
         return (
             <ListBox {...args} aria-label="list of options">
                 <ListBoxItem textValue="Item 1">
-                    <Text slot="label">Item 1</Text>
+                    <Text>Item 1</Text>
                     <IconList>
                         <SparklesIcon /><SparklesIcon /><SparklesIcon />
                     </IconList>
                 </ListBoxItem>
                 <ListBoxItem textValue="Item 2">
-                    <SparklesIcon /><Text slot="label">Item 2</Text>
+                    <SparklesIcon /><Text>Item 2</Text>
                 </ListBoxItem>
                 <ListBoxItem>Item 3</ListBoxItem>
             </ListBox>
@@ -303,13 +302,13 @@ export const EndIcons = {
         return (
             <ListBox {...args} aria-label="list of options">
                 <ListBoxItem textValue="Item 1">
-                    <Text slot="label">Item 1</Text>
+                    <Text>Item 1</Text>
                     <IconList slot="end-icon">
                         <SparklesIcon /><SparklesIcon /><SparklesIcon />
                     </IconList>
                 </ListBoxItem>
                 <ListBoxItem textValue="Item 2">
-                    <SparklesIcon slot="end-icon" /><Text slot="label">Item 2</Text>
+                    <SparklesIcon slot="end-icon" /><Text>Item 2</Text>
                 </ListBoxItem>
                 <ListBoxItem>Item 3</ListBoxItem>
             </ListBox>
@@ -328,13 +327,13 @@ export const Count = {
         return (
             <ListBox {...args} aria-label="list of options">
                 <ListBoxItem textValue="Item 1">
-                    <Text slot="label">Item 1</Text>
+                    <Text>Item 1</Text>
                     <SparklesIcon slot="end-icon" />
                     <Badge>50</Badge>
                 </ListBoxItem>
                 <ListBoxItem textValue="Item 2">
                     <Badge variant="subdued">99+</Badge>
-                    <Text slot="label">Item 2</Text>
+                    <Text>Item 2</Text>
                 </ListBoxItem>
                 <ListBoxItem>Item 3</ListBoxItem>
             </ListBox>
diff --git a/packages/components/src/ListBox/docs/avatar.tsx b/packages/components/src/ListBox/docs/avatar.tsx
index 26bab259b..01ff50f9c 100644
--- a/packages/components/src/ListBox/docs/avatar.tsx
+++ b/packages/components/src/ListBox/docs/avatar.tsx
@@ -6,16 +6,16 @@ export default function Example() {
         <ListBox selectionMode="single" aria-label="Team">
             <ListBoxItem textValue="Fred Smith">
                 <Avatar src="https://i.pravatar.cc/96?img=3" name="Fred Smith" />
-                <Text slot="label">Fred Smith</Text>
+                <Text>Fred Smith</Text>
                 <SparklesIcon slot="end-icon" />
             </ListBoxItem>
             <ListBoxItem textValue="Karen Smith">
                 <Avatar name="Karen Smith" />
-                <Text slot="label">Karen Smith</Text>
+                <Text>Karen Smith</Text>
             </ListBoxItem>
             <ListBoxItem textValue="John Doe">
                 <Avatar name="John Doe" />
-                <Text slot="label">John Doe</Text>
+                <Text>John Doe</Text>
             </ListBoxItem>
         </ListBox>
     );
diff --git a/packages/components/src/ListBox/docs/count.tsx b/packages/components/src/ListBox/docs/count.tsx
index 401503f8c..f76da43ef 100644
--- a/packages/components/src/ListBox/docs/count.tsx
+++ b/packages/components/src/ListBox/docs/count.tsx
@@ -5,13 +5,13 @@ export default function Example() {
     return (
         <ListBox selectionMode="single" aria-label="list of options">
             <ListBoxItem textValue="Manager">
-                <Text slot="label">Manager</Text>
+                <Text>Manager</Text>
                 <SparklesIcon slot="end-icon" />
                 <Badge>50</Badge>
             </ListBoxItem>
             <ListBoxItem textValue="Developer">
                 <Badge variant="subdued">99+</Badge>
-                <Text slot="label">Developer</Text>
+                <Text>Developer</Text>
             </ListBoxItem>
             <ListBoxItem>Designer</ListBoxItem>
         </ListBox>
diff --git a/packages/components/src/ListBox/docs/dynamicLists.tsx b/packages/components/src/ListBox/docs/dynamicLists.tsx
index d07191e92..416272e25 100644
--- a/packages/components/src/ListBox/docs/dynamicLists.tsx
+++ b/packages/components/src/ListBox/docs/dynamicLists.tsx
@@ -1,73 +1,39 @@
-import { Collection, Header, Inline, ListBox, ListBoxItem, ListBoxSection } from "@hopper-ui/components";
+import { Collection, Header, ListBox, ListBoxItem, ListBoxSection } from "@hopper-ui/components";
 
-interface ListItemProps {
-    id: number | string;
-    name: string;
-}
-
-interface ListSectionProps {
-    name: string;
-    children: ListItemProps[];
-}
+const OPTIONS_WITH_SECTIONS = [
+    {
+        name: "Boy Names", children: [
+            { id: 2, name: "Fred" },
+            { id: 3, name: "Bob" },
+            { id: 4, name: "Gabriel" }
+        ]
+    },
+    {
+        name: "Girl Names", children: [
+            { id: 6, name: "Sarah" },
+            { id: 7, name: "Louise" },
+            { id: 8, name: "Karen2" }
+        ]
+    }
+];
 
 export default function Example() {
-    const options = [
-        { id: 2, name: "Fred" },
-        { id: 3, name: "Bob" },
-        { id: 4, name: "Gabriel" },
-        { id: 6, name: "Sarah" },
-        { id: 7, name: "Louise" },
-        { id: 8, name: "Karen" }
-    ] satisfies ListItemProps[];
-
-    const optionsWithSections = [
-        {
-            name: "Boy Names", children: [
-                { id: 2, name: "Fred" },
-                { id: 3, name: "Bob" },
-                { id: 4, name: "Gabriel" }
-            ]
-        },
-        {
-            name: "Girl Names", children: [
-                { id: 6, name: "Sarah" },
-                { id: 7, name: "Louise" },
-                { id: 8, name: "Karen" }
-            ]
-        }
-    ] satisfies ListSectionProps[];
-
     return (
-        <Inline alignY="flex-start">
-            <ListBox
-                selectionMode="single"
-                aria-label="Names"
-                items={options}
-            >
-                {item => {
-                    const listItem = item as ListItemProps;
-
-                    return <ListBoxItem id={listItem.name}>{listItem.name}</ListBoxItem>;
-                }}
-            </ListBox>
-            <ListBox
-                selectionMode="single"
-                aria-label="Names"
-                items={optionsWithSections}
-            >
-                {section => {
-                    const listSection = section as ListSectionProps;
-
-                    return (
-                        <ListBoxSection id={listSection.name}>
-                            <Header>{listSection.name}</Header>
-                            <Collection items={listSection.children}>
-                                {item => <ListBoxItem id={item.name}>{item.name}</ListBoxItem>}
-                            </Collection>
-                        </ListBoxSection>
-                    );
-                }}
-            </ListBox>
-        </Inline>
+        <ListBox
+            selectionMode="single"
+            aria-label="Names"
+            items={OPTIONS_WITH_SECTIONS}
+        >
+            {section => {
+                return (
+                    <ListBoxSection id={section.name}>
+                        <Header>{section.name}</Header>
+                        <Collection items={section.children}>
+                            {item => <ListBoxItem id={item.name}>{item.name}</ListBoxItem>}
+                        </Collection>
+                    </ListBoxSection>
+                );
+            }}
+        </ListBox>
     );
 }
diff --git a/packages/components/src/ListBox/docs/endIcons.tsx b/packages/components/src/ListBox/docs/endIcons.tsx
index f782d087f..db3566c4b 100644
--- a/packages/components/src/ListBox/docs/endIcons.tsx
+++ b/packages/components/src/ListBox/docs/endIcons.tsx
@@ -5,13 +5,14 @@ export default function Example() {
     return (
         <ListBox selectionMode="single" aria-label="list of options">
             <ListBoxItem textValue="Developer">
-                <Text slot="label">Developer</Text>
+                <Text>Developer</Text>
                 <IconList slot="end-icon">
                     <SparklesIcon /><SparklesIcon /><SparklesIcon />
                 </IconList>
             </ListBoxItem>
             <ListBoxItem textValue="Designer">
-                <SparklesIcon slot="end-icon" /><Text slot="label">Designer</Text>
+                <Text>Designer</Text>
+                <SparklesIcon slot="end-icon" />
             </ListBoxItem>
             <ListBoxItem>Manager</ListBoxItem>
         </ListBox>
diff --git a/packages/components/src/ListBox/docs/fluid.tsx b/packages/components/src/ListBox/docs/fluid.tsx
index 07fa81fa0..43328a320 100644
--- a/packages/components/src/ListBox/docs/fluid.tsx
+++ b/packages/components/src/ListBox/docs/fluid.tsx
@@ -1,22 +1,20 @@
-import { Div, ListBox, ListBoxItem, Text } from "@hopper-ui/components";
+import { ListBox, ListBoxItem, Text } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <Div width="100%" paddingY="core_400">
-            <ListBox isFluid aria-label="list of options with a description">
-                <ListBoxItem textValue="Developer">
-                    <Text>Developer</Text>
-                    <Text slot="description">Builds, tests, and maintains software.</Text>
-                </ListBoxItem>
-                <ListBoxItem textValue="Designer">
-                    <Text>Designer</Text>
-                    <Text slot="description">Creates visually appealing, functional solutions.</Text>
-                </ListBoxItem>
-                <ListBoxItem textValue="Manager">
-                    <Text>Manager</Text>
-                    <Text slot="description">Responsible for leading and overseeing a team or department to ensure organizational goals are met.</Text>
-                </ListBoxItem>
-            </ListBox>
-        </Div>
+        <ListBox isFluid aria-label="list of options with a description">
+            <ListBoxItem textValue="Developer">
+                <Text>Developer</Text>
+                <Text slot="description">Builds, tests, and maintains software.</Text>
+            </ListBoxItem>
+            <ListBoxItem textValue="Designer">
+                <Text>Designer</Text>
+                <Text slot="description">Creates visually appealing, functional solutions.</Text>
+            </ListBoxItem>
+            <ListBoxItem textValue="Manager">
+                <Text>Manager</Text>
+                <Text slot="description">Responsible for leading and overseeing a team or department to ensure organizational goals are met.</Text>
+            </ListBoxItem>
+        </ListBox>
     );
 }
diff --git a/packages/components/src/ListBox/docs/icons.tsx b/packages/components/src/ListBox/docs/icons.tsx
index 415332d29..d90167193 100644
--- a/packages/components/src/ListBox/docs/icons.tsx
+++ b/packages/components/src/ListBox/docs/icons.tsx
@@ -5,13 +5,16 @@ export default function Example() {
     return (
         <ListBox selectionMode="single" aria-label="list of options">
             <ListBoxItem textValue="Developer">
-                <Text slot="label">Developer</Text>
+                <Text>Developer</Text>
                 <IconList>
-                    <SparklesIcon /><SparklesIcon /><SparklesIcon />
+                    <SparklesIcon />
+                    <SparklesIcon />
+                    <SparklesIcon />
                 </IconList>
             </ListBoxItem>
             <ListBoxItem textValue="Designer">
-                <SparklesIcon /><Text slot="label">Designer</Text>
+                <SparklesIcon />
+                <Text>Designer</Text>
             </ListBoxItem>
             <ListBoxItem>Manager</ListBoxItem>
         </ListBox>
diff --git a/packages/components/src/ListBox/docs/loadOnScroll.tsx b/packages/components/src/ListBox/docs/loadOnScroll.tsx
index 30b571f4e..f7dc3c757 100644
--- a/packages/components/src/ListBox/docs/loadOnScroll.tsx
+++ b/packages/components/src/ListBox/docs/loadOnScroll.tsx
@@ -5,7 +5,7 @@ interface Character {
 }
 
 export default function Example() {
-    const list = useAsyncList({
+    const list = useAsyncList<Character>({
         async load({ signal, cursor }) {
             const res = await fetch(cursor || "https://pokeapi.co/api/v2/pokemon", {
                 signal
@@ -23,16 +23,14 @@ export default function Example() {
         <ListBox
             selectionMode="single"
             aria-label="list of options"
-            items={list.items as Iterable<Character>}
+            items={list.items}
             isLoading={list.isLoading}
             onLoadMore={list.loadMore}
             maxHeight="core_1280"
         >
-            {item => {
-                const listItem = item as Character;
-
-                return <ListBoxItem id={listItem.name}>{listItem.name}</ListBoxItem>;
-            }}
+            {item => (
+                <ListBoxItem id={item.name}>{item.name}</ListBoxItem>
+            )}
         </ListBox>
     );
 }
diff --git a/packages/components/src/ListBox/docs/multipleSelected.tsx b/packages/components/src/ListBox/docs/multipleSelected.tsx
index e77012570..0ac75aa46 100644
--- a/packages/components/src/ListBox/docs/multipleSelected.tsx
+++ b/packages/components/src/ListBox/docs/multipleSelected.tsx
@@ -1,6 +1,5 @@
-import { Header, ListBox, ListBoxItem, ListBoxSection } from "@hopper-ui/components";
+import { Header, ListBox, ListBoxItem, ListBoxSection, type Selection } from "@hopper-ui/components";
 import { useState } from "react";
-import type { Selection } from "react-aria-components";
 
 export default function Example() {
     const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(["1"]));
diff --git a/packages/components/src/ListBox/docs/selection.tsx b/packages/components/src/ListBox/docs/selection.tsx
index a90b1c120..d10b24c0f 100644
--- a/packages/components/src/ListBox/docs/selection.tsx
+++ b/packages/components/src/ListBox/docs/selection.tsx
@@ -12,15 +12,15 @@ export default function Example() {
             onSelectionChange={setSelectedKeys}
         >
             <ListBoxItem textValue="Developer" id="1">
-                <Text slot="label">Developer</Text>
+                <Text>Developer</Text>
                 <Text slot="description">Builds and maintains software.</Text>
             </ListBoxItem>
             <ListBoxItem textValue="Designer" id="2">
-                <Text slot="label">Designer</Text>
+                <Text>Designer</Text>
                 <Text slot="description">Creates visual design solutions.</Text>
             </ListBoxItem>
             <ListBoxItem textValue="Manager" id="3">
-                <Text slot="label">Manager</Text>
+                <Text>Manager</Text>
                 <Text slot="description">Leads teams and projects.</Text>
             </ListBoxItem>
         </ListBox>
diff --git a/packages/components/src/ListBox/docs/selectionIndicator.tsx b/packages/components/src/ListBox/docs/selectionIndicator.tsx
index fd8cbe6c3..957366d4e 100644
--- a/packages/components/src/ListBox/docs/selectionIndicator.tsx
+++ b/packages/components/src/ListBox/docs/selectionIndicator.tsx
@@ -13,15 +13,15 @@ export default function Example() {
             onSelectionChange={setSelectedKeys}
         >
             <ListBoxItem textValue="Developer" id="1">
-                <Text slot="label">Developer</Text>
+                <Text>Developer</Text>
                 <Text slot="description">Builds and maintains software.</Text>
             </ListBoxItem>
             <ListBoxItem textValue="Designer" id="2">
-                <Text slot="label">Designer</Text>
+                <Text>Designer</Text>
                 <Text slot="description">Creates visual design solutions.</Text>
             </ListBoxItem>
             <ListBoxItem textValue="Manager" id="3">
-                <Text slot="label">Manager</Text>
+                <Text>Manager</Text>
                 <Text slot="description">Leads teams and projects.</Text>
             </ListBoxItem>
         </ListBox>
diff --git a/packages/components/src/Select/docs/controlled.tsx b/packages/components/src/Select/docs/controlled.tsx
index a4d67ce26..0ba969325 100644
--- a/packages/components/src/Select/docs/controlled.tsx
+++ b/packages/components/src/Select/docs/controlled.tsx
@@ -4,22 +4,22 @@ import { useState } from "react";
 export default function Example() {
     const [selectedKey, setSelectedKey] = useState<Key | null>();
 
-    function handleSelectionChange(key: Key) {
+    const handleSelectionChange = (key: Key) => {
         if (selectedKey === key) {
             setSelectedKey(null);
         } else {
             setSelectedKey(key);
         }
-    }
+    };
 
     return (
         <Select selectedKey={selectedKey} onSelectionChange={handleSelectionChange} label="Roles">
-            <SelectSection key="1">
+            <SelectSection>
                 <Header>Operations</Header>
                 <SelectItem id="1">Project Coordinator</SelectItem>
                 <SelectItem id="2">QA Specialist</SelectItem>
             </SelectSection>
-            <SelectItem key="2" id="3">Manager</SelectItem>
+            <SelectItem id="3">Manager</SelectItem>
         </Select>
     );
 }
diff --git a/packages/components/src/Select/docs/customValue.tsx b/packages/components/src/Select/docs/customValue.tsx
index 95ead47d6..877076934 100644
--- a/packages/components/src/Select/docs/customValue.tsx
+++ b/packages/components/src/Select/docs/customValue.tsx
@@ -2,14 +2,14 @@ import { Avatar, Select, SelectItem, Text, type ValueRenderProps } from "@hopper
 
 import { users, type User } from "./data.ts";
 
-const renderValue = ({ defaultChildren, selectedItem }: ValueRenderProps) => {
+const renderValue = ({ defaultChildren, selectedItem }: ValueRenderProps<User>) => {
     if (selectedItem) {
-        const { id, name, avatar } = selectedItem as User;
+        const { name, avatar } = selectedItem;
 
         return (
             <>
-                <Avatar key={`avatar_${id}`} name={name} src={avatar} />
-                <Text slot="label">{name}</Text>
+                <Avatar name={name} src={avatar} />
+                <Text>{name}</Text>
             </>
         );
     }
@@ -21,17 +21,17 @@ export default function Example() {
     const [firstUser] = users;
 
     return (
-        <Select 
+        <Select
             renderValue={renderValue}
             defaultSelectedKey={firstUser.id}
             items={users}
             label="Users"
         >
-            {({ id, name, avatar, role }: User) => {
+            {({ id, name, avatar, role }) => {
                 return (
                     <SelectItem id={id} textValue={name}>
                         <Avatar name={name} src={avatar} />
-                        <Text slot="label">{name}</Text>
+                        <Text>{name}</Text>
                         <Text slot="description">{role}</Text>
                     </SelectItem>
                 );
diff --git a/packages/components/src/Select/docs/data.ts b/packages/components/src/Select/docs/data.ts
index b9a4f49dd..789573b4e 100644
--- a/packages/components/src/Select/docs/data.ts
+++ b/packages/components/src/Select/docs/data.ts
@@ -9,7 +9,7 @@ export interface User {
     email: string;
 }
 
-export const users = [
+export const users: User[] = [
     {
         id: 1,
         name: "Tony Reichert",
@@ -211,4 +211,3 @@ export const users = [
         email: "mia.robinson@example.com"
     }
 ];
-  
\ No newline at end of file
diff --git a/packages/components/src/Select/docs/selectDropdown/avatar.tsx b/packages/components/src/Select/docs/selectDropdown/avatar.tsx
index c6d27ef4f..e45309322 100644
--- a/packages/components/src/Select/docs/selectDropdown/avatar.tsx
+++ b/packages/components/src/Select/docs/selectDropdown/avatar.tsx
@@ -5,15 +5,15 @@ export default function Example() {
         <Select aria-label="Team">
             <SelectItem textValue="Fred Smith">
                 <Avatar src="https://i.pravatar.cc/96?img=3" name="Fred Smith" />
-                <Text slot="label">Fred Smith</Text>
+                <Text>Fred Smith</Text>
             </SelectItem>
             <SelectItem textValue="Karen Smith">
                 <Avatar name="Karen Smith" />
-                <Text slot="label">Karen Smith</Text>
+                <Text>Karen Smith</Text>
             </SelectItem>
             <SelectItem textValue="John Doe">
                 <Avatar name="John Doe" />
-                <Text slot="label">John Doe</Text>
+                <Text>John Doe</Text>
             </SelectItem>
         </Select>
     );
diff --git a/packages/components/src/Select/docs/selectDropdown/count.tsx b/packages/components/src/Select/docs/selectDropdown/count.tsx
index 1059f4db6..863949988 100644
--- a/packages/components/src/Select/docs/selectDropdown/count.tsx
+++ b/packages/components/src/Select/docs/selectDropdown/count.tsx
@@ -4,12 +4,12 @@ export default function Example() {
     return (
         <Select aria-label="list of options">
             <SelectItem textValue="Designer">
-                <Text slot="label">Designer</Text>
+                <Text>Designer</Text>
                 <Badge>50</Badge>
             </SelectItem>
             <SelectItem textValue="Developer">
                 <Badge variant="secondary">99+</Badge>
-                <Text slot="label">Developer</Text>
+                <Text>Developer</Text>
             </SelectItem>
             <SelectItem>Manager</SelectItem>
         </Select>
diff --git a/packages/components/src/Select/docs/selectDropdown/dynamicLists.tsx b/packages/components/src/Select/docs/selectDropdown/dynamicLists.tsx
index 2c1bb6ffe..9d150a14b 100644
--- a/packages/components/src/Select/docs/selectDropdown/dynamicLists.tsx
+++ b/packages/components/src/Select/docs/selectDropdown/dynamicLists.tsx
@@ -1,65 +1,37 @@
-import { Collection, Header, Inline, Select, SelectItem, SelectSection } from "@hopper-ui/components";
+import { Collection, Header, Select, SelectItem, SelectSection } from "@hopper-ui/components";
 
-interface ListItemProps {
-    id: number | string;
-    role: string;
-}
-
-interface ListSectionProps {
-    role: string;
-    children: ListItemProps[];
-}
+const OPTIONS = [
+    {
+        role: "Operations", children: [
+            { id: 2, role: "Project Coordinator" },
+            { id: 3, role: "QA Specialist" },
+            { id: 4, role: "System Administrator" }
+        ]
+    },
+    {
+        role: "Creative Department", children: [
+            { id: 6, role: "Designer" },
+            { id: 7, role: "Designer" },
+            { id: 8, role: "UX Researcher" }
+        ]
+    }
+];
 
 export default function Example() {
-    const options = [
-        { id: 2, role: "Designer" },
-        { id: 3, role: "Developer" },
-        { id: 4, role: "Manager" },
-        { id: 6, role: "QA Engineer" },
-        { id: 7, role: "Product Owner" },
-        { id: 8, role: "Scrum Master" }
-    ] satisfies ListItemProps[];
-
-    const optionsWithSections = [
-        {
-            role: "Operations", children: [
-                { id: 2, role: "Project Coordinator" },
-                { id: 3, role: "QA Specialist" },
-                { id: 4, role: "System Administrator" }
-            ]
-        },
-        {
-            role: "Creative Department", children: [
-                { id: 6, role: "Designer" },
-                { id: 7, role: "Designer" },
-                { id: 8, role: "UX Researcher" }
-            ]
-        }
-    ] satisfies ListSectionProps[];
-
     return (
-        <Inline alignY="flex-start">
-            <Select items={options} label="Items">
-                {(item: ListItemProps) => {
-                    const { id, role } = item;
-
-                    return <SelectItem id={id}>{role}</SelectItem>;
-                }}
-            </Select>
-            <Select items={optionsWithSections} label="Section">
-                {(section: ListSectionProps) => {
-                    const { role: sectionName, children } = section;
+        <Select items={OPTIONS} label="Section">
+            {section => {
+                const { role: sectionName, children } = section;
 
-                    return (
-                        <SelectSection id={sectionName}>
-                            <Header>{sectionName}</Header>
-                            <Collection items={children}>
-                                {item => <SelectItem id={item.id}>{item.role}</SelectItem>}
-                            </Collection>
-                        </SelectSection>
-                    );
-                }}
-            </Select>
-        </Inline>
+                return (
+                    <SelectSection id={sectionName}>
+                        <Header>{sectionName}</Header>
+                        <Collection items={children}>
+                            {item => <SelectItem id={item.id}>{item.role}</SelectItem>}
+                        </Collection>
+                    </SelectSection>
+                );
+            }}
+        </Select>
     );
 }
diff --git a/packages/components/src/Select/docs/selectDropdown/endIcons.tsx b/packages/components/src/Select/docs/selectDropdown/endIcons.tsx
index 099fc26f2..7db30df57 100644
--- a/packages/components/src/Select/docs/selectDropdown/endIcons.tsx
+++ b/packages/components/src/Select/docs/selectDropdown/endIcons.tsx
@@ -5,14 +5,14 @@ export default function Example() {
     return (
         <Select aria-label="list of options">
             <SelectItem textValue="Designer">
-                <Text slot="label">Designer</Text>
+                <Text>Designer</Text>
                 <IconList slot="end-icon">
                     <SparklesIcon /><SparklesIcon /><SparklesIcon />
                 </IconList>
             </SelectItem>
             <SelectItem textValue="Developer">
                 <SparklesIcon slot="end-icon" />
-                <Text slot="label">Developer</Text>
+                <Text>Developer</Text>
             </SelectItem>
             <SelectItem>Manager</SelectItem>
         </Select>
diff --git a/packages/components/src/Select/docs/selectDropdown/icons.tsx b/packages/components/src/Select/docs/selectDropdown/icons.tsx
index 5b628a976..757302f52 100644
--- a/packages/components/src/Select/docs/selectDropdown/icons.tsx
+++ b/packages/components/src/Select/docs/selectDropdown/icons.tsx
@@ -5,14 +5,14 @@ export default function Example() {
     return (
         <Select aria-label="list of options">
             <SelectItem textValue="Designer">
-                <Text slot="label">Designer</Text>
+                <Text>Designer</Text>
                 <IconList>
                     <SparklesIcon /><SparklesIcon /><SparklesIcon />
                 </IconList>
             </SelectItem>
             <SelectItem textValue="Developer">
                 <SparklesIcon />
-                <Text slot="label">Developer</Text>
+                <Text>Developer</Text>
             </SelectItem>
             <SelectItem>Manager</SelectItem>
         </Select>
diff --git a/packages/components/src/Select/docs/selectDropdown/loadOnScroll.tsx b/packages/components/src/Select/docs/selectDropdown/loadOnScroll.tsx
index 7060d4036..812d963d6 100644
--- a/packages/components/src/Select/docs/selectDropdown/loadOnScroll.tsx
+++ b/packages/components/src/Select/docs/selectDropdown/loadOnScroll.tsx
@@ -1,12 +1,11 @@
-import { Select, SelectItem } from "@hopper-ui/components";
-import { useAsyncList } from "react-stately";
+import { Select, SelectItem, useAsyncList } from "@hopper-ui/components";
 
 interface Character {
     name: string;
 }
 
 export default function Example() {
-    const list = useAsyncList({
+    const list = useAsyncList<Character>({
         async load({ signal, cursor }) {
             const res = await fetch(cursor || "https://pokeapi.co/api/v2/pokemon", {
                 signal
@@ -23,14 +22,14 @@ export default function Example() {
     return (
         <Select
             aria-label="list of options"
-            items={list.items as Iterable<Character>} 
+            items={list.items}
             isLoading={list.isLoading}
             onLoadMore={list.loadMore}
             popoverProps={{
                 maxHeight: "core_1280"
             }}
         >
-            {(item: Character) => {
+            {item => {
                 const { name } = item;
 
                 return <SelectItem id={name}>{name}</SelectItem>;
diff --git a/packages/components/src/Select/docs/selectDropdown/selectionIndicator.tsx b/packages/components/src/Select/docs/selectDropdown/selectionIndicator.tsx
index 3a34cce30..25e308b68 100644
--- a/packages/components/src/Select/docs/selectDropdown/selectionIndicator.tsx
+++ b/packages/components/src/Select/docs/selectDropdown/selectionIndicator.tsx
@@ -12,15 +12,15 @@ export default function Example() {
             selectionIndicator="input"
         >
             <SelectItem textValue="Developer" id="1">
-                <Text slot="label">Developer</Text>
+                <Text>Developer</Text>
                 <Text slot="description">Builds and maintains software.</Text>
             </SelectItem>
             <SelectItem textValue="Designer" id="2">
-                <Text slot="label">Designer</Text>
+                <Text>Designer</Text>
                 <Text slot="description">Creates visual design solutions.</Text>
             </SelectItem>
             <SelectItem textValue="Manager" id="3">
-                <Text slot="label">Manager</Text>
+                <Text>Manager</Text>
                 <Text slot="description">Leads teams and projects.</Text>
             </SelectItem>
         </Select>
diff --git a/packages/components/src/Select/src/Select.tsx b/packages/components/src/Select/src/Select.tsx
index a6e90e3b3..b15383b7a 100644
--- a/packages/components/src/Select/src/Select.tsx
+++ b/packages/components/src/Select/src/Select.tsx
@@ -1,6 +1,6 @@
 import { IconContext } from "@hopper-ui/icons";
 import { useResponsiveValue, useStyledSystem, type ResponsiveProp, type StyledComponentProps } from "@hopper-ui/styled-system";
-import { forwardRef, type Context, type ForwardedRef, type NamedExoticComponent, type ReactNode } from "react";
+import { forwardRef, type ForwardedRef, type NamedExoticComponent, type ReactNode } from "react";
 import {
     Button,
     composeRenderProps,
@@ -8,7 +8,6 @@ import {
     Select as RACSelect,
     TextContext as RACTextContext,
     useContextProps,
-    type ContextValue,
     type ButtonProps as RACButtonProps,
     type SelectProps as RACSelectProps,
     type SelectValueRenderProps
@@ -33,7 +32,7 @@ import styles from "./Select.module.css";
 
 export const GlobalSelectCssSelector = "hop-Select";
 
-export type ValueRenderProps = SelectValueRenderProps<object> & { defaultChildren: ReactNode };
+export type ValueRenderProps<T> = SelectValueRenderProps<T> & { defaultChildren: ReactNode };
 export type SelectTriggerProps = StyledComponentProps<RACButtonProps>;
 
 export interface SelectProps<T extends object> extends StyledComponentProps<Omit<RACSelectProps<T>, "children">>, FieldProps {
@@ -95,7 +94,7 @@ export interface SelectProps<T extends object> extends StyledComponentProps<Omit
     /**
      * A function to render the value of the select. It will render the selected item's text by default.
      */
-    renderValue?: (valueRenderProps: ValueRenderProps) => ReactNode;
+    renderValue?: (valueRenderProps: ValueRenderProps<T>) => ReactNode;
     /**
      * The selection indicator to use. Only available if the selection mode is not "none".
      * When set to "input", the selection indicator will be either a radio or checkbox based on the selection mode.
@@ -209,7 +208,7 @@ function Select<T extends object>(props: SelectProps<T>, ref: ForwardedRef<HTMLD
             values={[
                 RACTextContext,
                 TextContext,
-                RACButtonContext as Context<ContextValue<unknown, HTMLElement>>
+                RACButtonContext
             ]}
         >
             <SlotProvider values={[
@@ -278,13 +277,13 @@ function Select<T extends object>(props: SelectProps<T>, ref: ForwardedRef<HTMLD
                         </Popover>
                         <Button className={buttonClassNames} style={triggerStyle} data-invalid={isInvalid || undefined} {...otherTriggerProps}>
                             {prefixMarkup}
-                            <SelectValue size={size}>
+                            <SelectValue<T> size={size}>
                                 {valueRenderProps => {
                                     return renderValue?.(valueRenderProps);
                                 }}
                             </SelectValue>
-                            <ToggleArrow 
-                                className={styles["hop-Select__button-icon"]} 
+                            <ToggleArrow
+                                className={styles["hop-Select__button-icon"]}
                                 isExpanded={isOpen}
 
                             />
diff --git a/packages/components/src/buttons/docs/button/endIcon.tsx b/packages/components/src/buttons/docs/button/endIcon.tsx
index 0dd691d28..b7afaae07 100644
--- a/packages/components/src/buttons/docs/button/endIcon.tsx
+++ b/packages/components/src/buttons/docs/button/endIcon.tsx
@@ -4,13 +4,13 @@ import { SparklesIcon } from "@hopper-ui/icons";
 export default function Example() {
     return (
         <Inline>
-            <Button size="md" aria-label="Clean" variant="secondary">
-                <SparklesIcon key="1" slot="end-icon" />
-                <Text key="2">Save</Text>
+            <Button aria-label="Save" variant="secondary">
+                <SparklesIcon slot="end-icon" />
+                <Text>Save</Text>
             </Button>
-            <Button size="sm" aria-label="Clean" variant="secondary">
-                <SparklesIcon key="1" slot="end-icon" />
-                <Text key="2">Save</Text>
+            <Button size="sm" aria-label="Save" variant="secondary">
+                <SparklesIcon slot="end-icon" />
+                <Text>Save</Text>
             </Button>
         </Inline>
     );
diff --git a/packages/components/src/buttons/docs/button/icon.tsx b/packages/components/src/buttons/docs/button/icon.tsx
index d301627a7..3e89771f2 100644
--- a/packages/components/src/buttons/docs/button/icon.tsx
+++ b/packages/components/src/buttons/docs/button/icon.tsx
@@ -4,11 +4,11 @@ import { SparklesIcon } from "@hopper-ui/icons";
 export default function Example() {
     return (
         <Inline>
-            <Button size="md" aria-label="Clean" variant="secondary">
-                <SparklesIcon key="1" />
+            <Button aria-label="Clean" variant="secondary">
+                <SparklesIcon />
             </Button>
             <Button size="sm" aria-label="Clean" variant="secondary">
-                <SparklesIcon key="1" />
+                <SparklesIcon />
             </Button>
         </Inline>
     );
diff --git a/packages/components/src/buttons/docs/button/icons.tsx b/packages/components/src/buttons/docs/button/icons.tsx
index 0733c4c3a..9fe44c667 100644
--- a/packages/components/src/buttons/docs/button/icons.tsx
+++ b/packages/components/src/buttons/docs/button/icons.tsx
@@ -4,13 +4,13 @@ import { SparklesIcon } from "@hopper-ui/icons";
 export default function Example() {
     return (
         <Inline>
-            <Button size="md" aria-label="Clean" variant="secondary">
-                <SparklesIcon key="1" />
-                <Text key="2">Save</Text>
+            <Button aria-label="Save" variant="secondary">
+                <SparklesIcon />
+                <Text>Save</Text>
             </Button>
-            <Button size="sm" aria-label="Clean" variant="secondary">
-                <SparklesIcon key="1" />
-                <Text key="2">Save</Text>
+            <Button size="sm" aria-label="Save" variant="secondary">
+                <SparklesIcon />
+                <Text>Save</Text>
             </Button>
         </Inline>
     );
diff --git a/packages/components/src/buttons/docs/button/layout.tsx b/packages/components/src/buttons/docs/button/layout.tsx
index cc1236258..41d14c383 100644
--- a/packages/components/src/buttons/docs/button/layout.tsx
+++ b/packages/components/src/buttons/docs/button/layout.tsx
@@ -4,7 +4,9 @@ import { SparklesIcon } from "@hopper-ui/icons";
 export default function Example() {
     return (
         <Inline>
-            <Button isFluid variant="primary">Save</Button>
+            <Button isFluid variant="primary">
+                Save
+            </Button>
             <Button isFluid variant="primary">
                 <SparklesIcon />
                 <Text>Save</Text>
diff --git a/packages/components/src/buttons/docs/button/size.tsx b/packages/components/src/buttons/docs/button/size.tsx
index b24f46b6c..e49bd2fe7 100644
--- a/packages/components/src/buttons/docs/button/size.tsx
+++ b/packages/components/src/buttons/docs/button/size.tsx
@@ -3,7 +3,7 @@ import { Button, Inline } from "@hopper-ui/components";
 export default function Example() {
     return (
         <Inline>
-            <Button size="md" variant="primary">Save</Button>
+            <Button variant="primary">Save</Button>
             <Button size="sm" variant="primary">Save</Button>
         </Inline>
     );
diff --git a/packages/components/src/buttons/docs/buttonGroup/alignment.tsx b/packages/components/src/buttons/docs/buttonGroup/alignment.tsx
index d31837839..fbab346f4 100644
--- a/packages/components/src/buttons/docs/buttonGroup/alignment.tsx
+++ b/packages/components/src/buttons/docs/buttonGroup/alignment.tsx
@@ -1,13 +1,11 @@
-import { Button, ButtonGroup, Flex } from "@hopper-ui/components";
+import { Button, ButtonGroup } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <Flex width="100%" direction="column">
-            <ButtonGroup align="end">
-                <Button variant="secondary">No, thanks</Button>
-                <Button variant="secondary">Remind me later</Button>
-                <Button variant="primary">Rate Now</Button>
-            </ButtonGroup>
-        </Flex>
+        <ButtonGroup width="100%" align="end">
+            <Button variant="secondary">No, thanks</Button>
+            <Button variant="secondary">Remind me later</Button>
+            <Button variant="primary">Rate Now</Button>
+        </ButtonGroup>
     );
 }
diff --git a/packages/components/src/buttons/docs/buttonGroup/fluid.tsx b/packages/components/src/buttons/docs/buttonGroup/fluid.tsx
index 1902691a5..efd48e57f 100644
--- a/packages/components/src/buttons/docs/buttonGroup/fluid.tsx
+++ b/packages/components/src/buttons/docs/buttonGroup/fluid.tsx
@@ -1,13 +1,11 @@
-import { Button, ButtonGroup, Div } from "@hopper-ui/components";
+import { Button, ButtonGroup } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <Div width="100%" paddingY="core_400">
-            <ButtonGroup isFluid>
-                <Button variant="secondary">No, thanks</Button>
-                <Button variant="secondary">Remind me later</Button>
-                <Button variant="primary">Rate Now</Button>
-            </ButtonGroup>
-        </Div>
+        <ButtonGroup isFluid>
+            <Button variant="secondary">No, thanks</Button>
+            <Button variant="secondary">Remind me later</Button>
+            <Button variant="primary">Rate Now</Button>
+        </ButtonGroup>
     );
 }
diff --git a/packages/components/src/buttons/docs/buttonGroup/sizes.tsx b/packages/components/src/buttons/docs/buttonGroup/sizes.tsx
index 97b0e1dcb..b8fedc827 100644
--- a/packages/components/src/buttons/docs/buttonGroup/sizes.tsx
+++ b/packages/components/src/buttons/docs/buttonGroup/sizes.tsx
@@ -1,18 +1,18 @@
 import { Button, ButtonGroup, Stack } from "@hopper-ui/components";
 
 export default function Example() {
-    const props = {
-        children: [
-            <Button key="1" variant="secondary">No, thanks</Button>,
-            <Button key="2" variant="secondary">Remind me later</Button>,
-            <Button key="3" variant="primary">Rate Now</Button>
-        ]
-    };
-
     return (
         <Stack>
-            <ButtonGroup size="sm" {...props} />
-            <ButtonGroup {...props} />
+            <ButtonGroup>
+                <Button variant="secondary">No, thanks</Button>
+                <Button variant="secondary">Remind me later</Button>
+                <Button variant="primary">Rate Now</Button>
+            </ButtonGroup>
+            <ButtonGroup size="sm">
+                <Button variant="secondary">No, thanks</Button>
+                <Button variant="secondary">Remind me later</Button>
+                <Button variant="primary">Rate Now</Button>
+            </ButtonGroup>
         </Stack>
     );
 }
diff --git a/packages/components/src/buttons/docs/linkButton/endIcon.tsx b/packages/components/src/buttons/docs/linkButton/endIcon.tsx
index b7c46080d..297c851c6 100644
--- a/packages/components/src/buttons/docs/linkButton/endIcon.tsx
+++ b/packages/components/src/buttons/docs/linkButton/endIcon.tsx
@@ -4,13 +4,13 @@ import { SparklesIcon } from "@hopper-ui/icons";
 export default function Example() {
     return (
         <Inline>
-            <LinkButton href="https://www.google.com" size="md" aria-label="Clean" variant="secondary">
-                <SparklesIcon key="1" slot="end-icon" />
-                <Text key="2">Help</Text>
+            <LinkButton href="https://www.google.com" variant="secondary">
+                <SparklesIcon slot="end-icon" />
+                <Text>Help</Text>
             </LinkButton>
-            <LinkButton href="https://www.google.com" size="sm" aria-label="Clean" variant="secondary">
-                <SparklesIcon key="1" slot="end-icon" />
-                <Text key="2">Help</Text>
+            <LinkButton href="https://www.google.com" size="sm" variant="secondary">
+                <SparklesIcon slot="end-icon" />
+                <Text>Help</Text>
             </LinkButton>
         </Inline>
     );
diff --git a/packages/components/src/buttons/docs/linkButton/icon.tsx b/packages/components/src/buttons/docs/linkButton/icon.tsx
index 57e2356b0..b6df2b0b4 100644
--- a/packages/components/src/buttons/docs/linkButton/icon.tsx
+++ b/packages/components/src/buttons/docs/linkButton/icon.tsx
@@ -4,11 +4,11 @@ import { SparklesIcon } from "@hopper-ui/icons";
 export default function Example() {
     return (
         <Inline>
-            <LinkButton href="https://www.google.com" size="md" aria-label="Clean" variant="secondary">
-                <SparklesIcon key="1" />
+            <LinkButton href="https://www.google.com" aria-label="Clean" variant="secondary">
+                <SparklesIcon />
             </LinkButton>
             <LinkButton href="https://www.google.com" size="sm" aria-label="Clean" variant="secondary">
-                <SparklesIcon key="1" />
+                <SparklesIcon />
             </LinkButton>
         </Inline>
     );
diff --git a/packages/components/src/buttons/docs/linkButton/icons.tsx b/packages/components/src/buttons/docs/linkButton/icons.tsx
index 2b39aa359..834451ffc 100644
--- a/packages/components/src/buttons/docs/linkButton/icons.tsx
+++ b/packages/components/src/buttons/docs/linkButton/icons.tsx
@@ -4,13 +4,13 @@ import { SparklesIcon } from "@hopper-ui/icons";
 export default function Example() {
     return (
         <Inline>
-            <LinkButton href="https://www.google.com" size="md" aria-label="Clean" variant="secondary">
-                <SparklesIcon key="1" />
-                <Text key="2">Help</Text>
+            <LinkButton href="https://www.google.com" variant="secondary">
+                <SparklesIcon />
+                <Text>Help</Text>
             </LinkButton>
-            <LinkButton href="https://www.google.com" size="sm" aria-label="Clean" variant="secondary">
-                <SparklesIcon key="1" />
-                <Text key="2">Help</Text>
+            <LinkButton href="https://www.google.com" size="sm" variant="secondary">
+                <SparklesIcon />
+                <Text>Help</Text>
             </LinkButton>
         </Inline>
     );
diff --git a/packages/components/src/buttons/docs/linkButton/layout.tsx b/packages/components/src/buttons/docs/linkButton/layout.tsx
index de1eb8c1d..e638dd36d 100644
--- a/packages/components/src/buttons/docs/linkButton/layout.tsx
+++ b/packages/components/src/buttons/docs/linkButton/layout.tsx
@@ -4,7 +4,9 @@ import { SparklesIcon } from "@hopper-ui/icons";
 export default function Example() {
     return (
         <Inline>
-            <LinkButton href="https://www.google.com" isFluid variant="primary">Help</LinkButton>
+            <LinkButton href="https://www.google.com" isFluid variant="primary">
+                Help
+            </LinkButton>
             <LinkButton href="https://www.google.com" isFluid variant="primary">
                 <SparklesIcon />
                 <Text>Help</Text>
diff --git a/packages/components/src/buttons/docs/linkButton/reactRouterLink.tsx b/packages/components/src/buttons/docs/linkButton/reactRouterLink.tsx
index a43bc65ad..44227a0fb 100644
--- a/packages/components/src/buttons/docs/linkButton/reactRouterLink.tsx
+++ b/packages/components/src/buttons/docs/linkButton/reactRouterLink.tsx
@@ -1,10 +1,14 @@
-import { HopperProvider, LinkButton } from "@hopper-ui/components";
+import { HopperProvider, LinkButton, Text } from "@hopper-ui/components";
 import { createMemoryRouter, RouterProvider, useNavigate } from "react-router-dom";
 
 export default function App() {
     const router = createMemoryRouter([{
         path: "/123",
-        element: <>Navigated Successfully! <Example /></>
+        element: (
+            <Text>
+                Navigated Successfully!
+            </Text>
+        )
     }, {
         path: "*",
         element: <Example />
@@ -20,6 +24,7 @@ function Example() {
     const navigate = useNavigate();
 
     return (
+        // Set up the HopperProvider at the root of your app.
         <HopperProvider colorScheme="light" navigate={navigate}>
             <LinkButton href="/123">Go to next router page</LinkButton>
         </HopperProvider>
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 2402b34cb..204f3cb68 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -34,6 +34,7 @@ export * from "./utils/index.ts";
 export * from "@hopper-ui/styled-system";
 export { useAsyncList } from "@react-stately/data";
 export type { RouterOptions } from "@react-types/shared";
+export { useFilter } from "react-aria";
 export type { Orientation, Placement } from "react-aria";
 export { Collection, DEFAULT_SLOT, useContextProps, useSlottedContext, type ContextValue, type Key, type Selection, type ValidationResult } from "react-aria-components";
 
diff --git a/packages/components/src/inputs/docs/numberField/formatting.tsx b/packages/components/src/inputs/docs/numberField/formatting.tsx
index 24e507951..a75f67822 100644
--- a/packages/components/src/inputs/docs/numberField/formatting.tsx
+++ b/packages/components/src/inputs/docs/numberField/formatting.tsx
@@ -2,13 +2,12 @@ import { NumberField } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <NumberField formatOptions={
-            {
+        <NumberField
+            formatOptions={{
                 style: "currency",
                 currency: "USD"
-            }
-        }
-        label="Training Budget Allocated"
+            }}
+            label="Training Budget Allocated"
         />
     );
 }
diff --git a/packages/components/src/inputs/docs/numberField/sizes.tsx b/packages/components/src/inputs/docs/numberField/sizes.tsx
index 504095ef0..3e2146778 100644
--- a/packages/components/src/inputs/docs/numberField/sizes.tsx
+++ b/packages/components/src/inputs/docs/numberField/sizes.tsx
@@ -1,14 +1,10 @@
 import { NumberField, Stack } from "@hopper-ui/components";
 
 export default function Example() {
-    const props = {
-        label: "Training hours completed"
-    };
-
     return (
         <Stack>
-            <NumberField size="sm" {...props} />
-            <NumberField {...props} />
+            <NumberField label="Training hours completed" size="sm" />
+            <NumberField label="Training hours completed" />
         </Stack>
     );
 }
diff --git a/packages/components/src/inputs/docs/passwordField/sizes.tsx b/packages/components/src/inputs/docs/passwordField/sizes.tsx
index 216de2755..f416bc7c2 100644
--- a/packages/components/src/inputs/docs/passwordField/sizes.tsx
+++ b/packages/components/src/inputs/docs/passwordField/sizes.tsx
@@ -1,14 +1,10 @@
 import { PasswordField, Stack } from "@hopper-ui/components";
 
 export default function Example() {
-    const props = {
-        label: "Password"
-    };
-
     return (
         <Stack>
-            <PasswordField size="sm" {...props} />
-            <PasswordField {...props} />
+            <PasswordField label="Password" size="sm" />
+            <PasswordField label="Password" />
         </Stack>
     );
 }
diff --git a/packages/components/src/inputs/docs/searchField/sizes.tsx b/packages/components/src/inputs/docs/searchField/sizes.tsx
index 6c421168c..d4b09a0e2 100644
--- a/packages/components/src/inputs/docs/searchField/sizes.tsx
+++ b/packages/components/src/inputs/docs/searchField/sizes.tsx
@@ -1,15 +1,10 @@
 import { SearchField, Stack } from "@hopper-ui/components";
 
 export default function Example() {
-    const props = {
-        placeholder: "New York, NY",
-        label: "Filter by location"
-    };
-
     return (
         <Stack>
-            <SearchField size="sm" {...props} />
-            <SearchField {...props} />
+            <SearchField label="Filter by location" placeholder="New York, NY" size="sm" />
+            <SearchField label="Filter by location" placeholder="New York, NY" />
         </Stack>
     );
 }
diff --git a/packages/components/src/inputs/docs/textArea/sizes.tsx b/packages/components/src/inputs/docs/textArea/sizes.tsx
index 879358efc..7ede5d983 100644
--- a/packages/components/src/inputs/docs/textArea/sizes.tsx
+++ b/packages/components/src/inputs/docs/textArea/sizes.tsx
@@ -1,15 +1,10 @@
 import { Stack, TextArea } from "@hopper-ui/components";
 
 export default function Example() {
-    const props = {
-        placeholder: "123 Main St, City, State",
-        label: "Address"
-    };
-
     return (
         <Stack>
-            <TextArea size="sm" {...props} />
-            <TextArea {...props} />
+            <TextArea label="Address" placeholder="123 Main St, City, State" size="sm" />
+            <TextArea label="Address" placeholder="123 Main St, City, State" />
         </Stack>
     );
 }
diff --git a/packages/components/src/inputs/docs/textField/sizes.tsx b/packages/components/src/inputs/docs/textField/sizes.tsx
index a878e5d1d..467b10436 100644
--- a/packages/components/src/inputs/docs/textField/sizes.tsx
+++ b/packages/components/src/inputs/docs/textField/sizes.tsx
@@ -1,15 +1,10 @@
 import { Stack, TextField } from "@hopper-ui/components";
 
 export default function Example() {
-    const props = {
-        placeholder: "Full name (e.g., Jane Smith)",
-        label: "Name"
-    };
-
     return (
         <Stack>
-            <TextField size="sm" {...props} />
-            <TextField {...props} />
+            <TextField label="Name" placeholder="Full name (e.g., Jane Smith)" size="sm" />
+            <TextField label="Name" placeholder="Full name (e.g., Jane Smith)" />
         </Stack>
     );
 }
diff --git a/packages/components/src/inputs/src/RemainingCharacterCount.tsx b/packages/components/src/inputs/src/RemainingCharacterCount.tsx
index 605cd4c0b..74cbc198f 100644
--- a/packages/components/src/inputs/src/RemainingCharacterCount.tsx
+++ b/packages/components/src/inputs/src/RemainingCharacterCount.tsx
@@ -26,7 +26,7 @@ export interface RemainingCharacterCountProps extends
 
 export const GlobalRemainingCharacterCountCssSelector = "hop-RemainingCharacterCount";
 
-function RemainingCharacterCount(props: RemainingCharacterCountProps, ref: ForwardedRef<HTMLElement>) {
+function RemainingCharacterCount(props: RemainingCharacterCountProps, ref: ForwardedRef<HTMLSpanElement>) {
     const { stylingProps, ...ownProps } = useStyledSystem(props);
     const { className, style, slot, count, isDisabled, isInvalid, ...textProps } = ownProps;
     const stringFormatter = useLocalizedString();
@@ -77,7 +77,7 @@ function RemainingCharacterCount(props: RemainingCharacterCountProps, ref: Forwa
  *
  * [View Documentation](TODO)
  */
-const _RemainingCharacterCount = forwardRef<HTMLElement, RemainingCharacterCountProps>(RemainingCharacterCount);
+const _RemainingCharacterCount = forwardRef<HTMLSpanElement, RemainingCharacterCountProps>(RemainingCharacterCount);
 _RemainingCharacterCount.displayName = "RemainingCharacterCount";
 
 export { _RemainingCharacterCount as RemainingCharacterCount };
diff --git a/packages/components/src/inputs/tests/jest/RemainingCharacterCount.test.tsx b/packages/components/src/inputs/tests/jest/RemainingCharacterCount.test.tsx
index fbc4f9f4a..14bf8ddbf 100644
--- a/packages/components/src/inputs/tests/jest/RemainingCharacterCount.test.tsx
+++ b/packages/components/src/inputs/tests/jest/RemainingCharacterCount.test.tsx
@@ -47,11 +47,11 @@ describe("RemainingCharacterCount", () => {
     });
 
     it("should support refs", () => {
-        const ref = createRef<HTMLElement>();
+        const ref = createRef<HTMLSpanElement>();
         render(<RemainingCharacterCount count={3} ref={ref} />);
 
         expect(ref.current).not.toBeNull();
-        expect(ref.current instanceof HTMLElement).toBeTruthy();
+        expect(ref.current instanceof HTMLSpanElement).toBeTruthy();
     });
 
     it("should support disabled", () => {
diff --git a/packages/components/src/overlays/Popover/docs/controlled.tsx b/packages/components/src/overlays/Popover/docs/controlled.tsx
index 7cadbb423..cc202750a 100644
--- a/packages/components/src/overlays/Popover/docs/controlled.tsx
+++ b/packages/components/src/overlays/Popover/docs/controlled.tsx
@@ -1,4 +1,4 @@
-import { Button, Content, Flex, Heading, Popover } from "@hopper-ui/components";
+import { Button, Content, Heading, Popover, Stack } from "@hopper-ui/components";
 import { useRef, useState } from "react";
 
 export default function Example() {
@@ -7,7 +7,7 @@ export default function Example() {
 
     return (
         <>
-            <Flex direction="column" alignItems="center" gap="core_320">
+            <Stack alignX="center">
                 <Button
                     onPress={() => setOpen(!isOpen)}
                     variant="secondary"
@@ -15,7 +15,7 @@ export default function Example() {
                     Company Profile
                 </Button>
                 <span ref={triggerRef}>Popover will be positioned relative to me</span>
-            </Flex>
+            </Stack>
             <Popover triggerRef={triggerRef} isOpen={isOpen} onOpenChange={setOpen}>
                 <Heading slot="title">ACME</Heading>
                 <Content>
diff --git a/packages/components/src/switch/docs/switch/nolabel.tsx b/packages/components/src/switch/docs/switch/nolabel.tsx
index 4dce5e348..0d5f10471 100644
--- a/packages/components/src/switch/docs/switch/nolabel.tsx
+++ b/packages/components/src/switch/docs/switch/nolabel.tsx
@@ -2,6 +2,6 @@ import { Switch } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <Switch aria-label="Label"></Switch>
+        <Switch aria-label="Label" />
     );
 }
diff --git a/packages/components/src/tag/docs/TagGroup.stories.tsx b/packages/components/src/tag/docs/TagGroup.stories.tsx
index a78c34895..1f45afd40 100644
--- a/packages/components/src/tag/docs/TagGroup.stories.tsx
+++ b/packages/components/src/tag/docs/TagGroup.stories.tsx
@@ -272,7 +272,7 @@ export const SelectableTags = {
     args: {
         ...Description.args,
         selectionMode: "multiple",
-        defaultSelectedKeys: new Set(["1", "3"])
+        defaultSelectedKeys: ["1", "3"]
     }
 } satisfies Story;
 
@@ -283,7 +283,7 @@ export const DisabledTags = {
     ...Description,
     args: {
         ...Description.args,
-        disabledKeys: new Set(["1", "2", "3"])
+        disabledKeys: ["1", "2", "3"]
     }
 } satisfies Story;
 
diff --git a/packages/components/src/tag/docs/tag/disabled.tsx b/packages/components/src/tag/docs/tag/disabled.tsx
index e83b9f239..135254ca1 100644
--- a/packages/components/src/tag/docs/tag/disabled.tsx
+++ b/packages/components/src/tag/docs/tag/disabled.tsx
@@ -4,13 +4,13 @@ export default function Example() {
     return (
         <TagGroup aria-label="Jobs">
             <Tag id="designer" isDisabled>
-                    Designer
+                Designer
             </Tag>
             <Tag id="developer">
-                    Designer
+                Designer
             </Tag>
             <Tag id="manager">
-                    Manager
+                Manager
             </Tag>
         </TagGroup>
     );
diff --git a/packages/components/src/tag/docs/tag/invalid.tsx b/packages/components/src/tag/docs/tag/invalid.tsx
index fe426f034..df930ba1f 100644
--- a/packages/components/src/tag/docs/tag/invalid.tsx
+++ b/packages/components/src/tag/docs/tag/invalid.tsx
@@ -4,13 +4,13 @@ export default function Example() {
     return (
         <TagGroup aria-label="Jobs">
             <Tag id="designer" isInvalid>
-                        Designer
+                Designer
             </Tag>
             <Tag id="developer">
-                        Designer
+                Designer
             </Tag>
             <Tag id="manager">
-                        Manager
+                Manager
             </Tag>
         </TagGroup>
     );
diff --git a/packages/components/src/tag/docs/tag/variants.tsx b/packages/components/src/tag/docs/tag/variants.tsx
index 3e8fe772a..7d183de1e 100644
--- a/packages/components/src/tag/docs/tag/variants.tsx
+++ b/packages/components/src/tag/docs/tag/variants.tsx
@@ -1,46 +1,44 @@
-import { Div, Tag, TagGroup } from "@hopper-ui/components";
+import { Tag, TagGroup } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <Div margin="stack-lg" width="80%">
-            <TagGroup aria-label="Jobs">
-                <Tag variant="neutral">
-                        Neutral
-                </Tag>
-                <Tag variant="subdued">
-                        Subdued
-                </Tag>
-                <Tag variant="progress">
-                        Progress
-                </Tag>
-                <Tag variant="positive">
-                        Positive
-                </Tag>
-                <Tag variant="caution">
-                        Caution
-                </Tag>
-                <Tag variant="negative">
-                        Negative
-                </Tag>
-                <Tag variant="option1">
-                        Option 1
-                </Tag>
-                <Tag variant="option2">
-                        Option 2
-                </Tag>
-                <Tag variant="option3">
-                        Option 3
-                </Tag>
-                <Tag variant="option4">
-                        Option 4
-                </Tag>
-                <Tag variant="option5">
-                        Option 5
-                </Tag>
-                <Tag variant="option6">
-                        Option 6
-                </Tag>
-            </TagGroup>
-        </Div>
+        <TagGroup aria-label="Jobs">
+            <Tag variant="neutral">
+                Neutral
+            </Tag>
+            <Tag variant="subdued">
+                Subdued
+            </Tag>
+            <Tag variant="progress">
+                Progress
+            </Tag>
+            <Tag variant="positive">
+                Positive
+            </Tag>
+            <Tag variant="caution">
+                Caution
+            </Tag>
+            <Tag variant="negative">
+                Negative
+            </Tag>
+            <Tag variant="option1">
+                Option 1
+            </Tag>
+            <Tag variant="option2">
+                Option 2
+            </Tag>
+            <Tag variant="option3">
+                Option 3
+            </Tag>
+            <Tag variant="option4">
+                Option 4
+            </Tag>
+            <Tag variant="option5">
+                Option 5
+            </Tag>
+            <Tag variant="option6">
+                Option 6
+            </Tag>
+        </TagGroup>
     );
 }
diff --git a/packages/components/src/tag/docs/tagGroup/disabled.tsx b/packages/components/src/tag/docs/tagGroup/disabled.tsx
index a89428503..fa6014c05 100644
--- a/packages/components/src/tag/docs/tagGroup/disabled.tsx
+++ b/packages/components/src/tag/docs/tagGroup/disabled.tsx
@@ -2,7 +2,7 @@ import { Tag, TagGroup } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <TagGroup aria-label="Jobs" disabledKeys={new Set(["1", "2", "3"])}>
+        <TagGroup aria-label="Jobs" disabledKeys={["1", "2", "3"]}>
             <Tag id="1">Designer</Tag>
             <Tag id="2">Developer</Tag>
             <Tag id="3">Manager</Tag>
diff --git a/packages/components/src/tag/docs/tagGroup/selectable.tsx b/packages/components/src/tag/docs/tagGroup/selectable.tsx
index 6a6130434..3115a082d 100644
--- a/packages/components/src/tag/docs/tagGroup/selectable.tsx
+++ b/packages/components/src/tag/docs/tagGroup/selectable.tsx
@@ -2,7 +2,7 @@ import { Tag, TagGroup } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <TagGroup aria-label="Jobs" selectionMode="multiple" defaultSelectedKeys={new Set(["designer", "developer"])}>
+        <TagGroup aria-label="Jobs" selectionMode="multiple" defaultSelectedKeys={["designer", "developer"]}>
             <Tag id="designer">Designer</Tag>
             <Tag id="developer">Developer</Tag>
             <Tag id="manager">Manager</Tag>
diff --git a/packages/components/src/tag/docs/tagGroup/sizes.tsx b/packages/components/src/tag/docs/tagGroup/sizes.tsx
index b727aa56a..e2bd111fe 100644
--- a/packages/components/src/tag/docs/tagGroup/sizes.tsx
+++ b/packages/components/src/tag/docs/tagGroup/sizes.tsx
@@ -1,23 +1,23 @@
-import { Stack, Tag, TagGroup, type Selection } from "@hopper-ui/components";
+import { Stack, Tag, TagGroup } from "@hopper-ui/components";
 
 export default function Example() {
-    const props = {
-        onRemove: (ids: Selection) => {
-            alert(`Remove: ${[...ids]}`);
-        },
-        "aria-label": "Jobs",
-        children: [
-            <Tag key="designer" id="designer">Designer</Tag>,
-            <Tag key="developer" id="developer">Developer</Tag>,
-            <Tag key="manager" id="manager">Manager</Tag>
-        ]
-    };
-
     return (
         <Stack>
-            <TagGroup {...props} size="sm" />
-            <TagGroup {...props} size="md" />
-            <TagGroup {...props} size="lg" />
+            <TagGroup aria-label="Jobs" size="sm" >
+                <Tag id="designer">Designer</Tag>
+                <Tag id="developer">Developer</Tag>
+                <Tag id="manager">Manager</Tag>
+            </TagGroup>
+            <TagGroup aria-label="Jobs" size="md" >
+                <Tag id="designer">Designer</Tag>
+                <Tag id="developer">Developer</Tag>
+                <Tag id="manager">Manager</Tag>
+            </TagGroup>
+            <TagGroup aria-label="Jobs" size="lg" >
+                <Tag id="designer">Designer</Tag>
+                <Tag id="developer">Developer</Tag>
+                <Tag id="manager">Manager</Tag>
+            </TagGroup>
         </Stack>
     );
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/tag/tests/chromatic/TagGroup.stories.tsx b/packages/components/src/tag/tests/chromatic/TagGroup.stories.tsx
index e56d301d5..13b6bb3ae 100644
--- a/packages/components/src/tag/tests/chromatic/TagGroup.stories.tsx
+++ b/packages/components/src/tag/tests/chromatic/TagGroup.stories.tsx
@@ -421,7 +421,7 @@ export const DefaultStates: Story = {
                 <h1>Default</h1>
                 <StateTemplate {...args} />
                 <h1>Disabled</h1>
-                <StateTemplate {...args} disabledKeys={new Set(["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"])} />
+                <StateTemplate {...args} disabledKeys={["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]} />
                 <h1>Pressed</h1>
                 <StateTemplate {...args} data-chromatic-force-press />
                 <h1>Focus Visible</h1>
@@ -441,4 +441,4 @@ export const DefaultStates: Story = {
         },
         selectionMode: "multiple"
     }
-};
\ No newline at end of file
+};
diff --git a/packages/components/src/typography/Heading/docs/levels.tsx b/packages/components/src/typography/Heading/docs/levels.tsx
index f87f77b77..15ceaae3d 100644
--- a/packages/components/src/typography/Heading/docs/levels.tsx
+++ b/packages/components/src/typography/Heading/docs/levels.tsx
@@ -1,16 +1,14 @@
 import { Heading, Stack } from "@hopper-ui/components";
 
 export default function Example() {
-    const props = { children: "Great work!" };
-
     return (
         <Stack>
-            <Heading level={1} {...props} />
-            <Heading level={2} {...props} />
-            <Heading level={3} {...props} />
-            <Heading level={4} {...props} />
-            <Heading level={5} {...props} />
-            <Heading level={6} {...props} />
+            <Heading level={1}>Great work!</Heading>
+            <Heading level={2}>Great work!</Heading>
+            <Heading level={3}>Great work!</Heading>
+            <Heading level={4}>Great work!</Heading>
+            <Heading level={5}>Great work!</Heading>
+            <Heading level={6}>Great work!</Heading>
         </Stack>
     );
 }
diff --git a/packages/components/src/typography/Heading/docs/sizes.tsx b/packages/components/src/typography/Heading/docs/sizes.tsx
index 5e5ecb1b1..544e72215 100644
--- a/packages/components/src/typography/Heading/docs/sizes.tsx
+++ b/packages/components/src/typography/Heading/docs/sizes.tsx
@@ -1,17 +1,15 @@
 import { Heading, Stack } from "@hopper-ui/components";
 
 export default function Example() {
-    const props = { children: "Great work!" };
-
     return (
         <Stack>
-            <Heading size="xs" {...props} />
-            <Heading size="sm" {...props} />
-            <Heading size="md" {...props} />
-            <Heading size="lg" {...props} />
-            <Heading size="xl" {...props} />
-            <Heading size="2xl" {...props} />
-            <Heading size="3xl" {...props} />
+            <Heading size="xs">Great work!</Heading>
+            <Heading size="sm">Great work!</Heading>
+            <Heading size="md">Great work!</Heading>
+            <Heading size="lg">Great work!</Heading>
+            <Heading size="xl">Great work!</Heading>
+            <Heading size="2xl">Great work!</Heading>
+            <Heading size="3xl">Great work!</Heading>
         </Stack>
     );
 }
diff --git a/packages/components/src/typography/Text/docs/text/size.tsx b/packages/components/src/typography/Text/docs/text/size.tsx
index c942c87a9..647a296d5 100644
--- a/packages/components/src/typography/Text/docs/text/size.tsx
+++ b/packages/components/src/typography/Text/docs/text/size.tsx
@@ -1,18 +1,14 @@
-import { Text, Stack } from "@hopper-ui/components";
+import { Stack, Text } from "@hopper-ui/components";
 
 export default function Example() {
-    const props = {
-        children: "Software built for everyone to do their best work"
-    };
-
     return (
         <Stack>
-            <Text size="xs" {...props} />
-            <Text size="sm" {...props} />
-            <Text size="md" {...props} />
-            <Text size="lg" {...props} />
-            <Text size="xl" {...props} />
-            <Text size="2xl" {...props} />
+            <Text size="xs">Software built for everyone to do their best work</Text>
+            <Text size="sm">Software built for everyone to do their best work</Text>
+            <Text size="md">Software built for everyone to do their best work</Text>
+            <Text size="lg">Software built for everyone to do their best work</Text>
+            <Text size="xl">Software built for everyone to do their best work</Text>
+            <Text size="2xl">Software built for everyone to do their best work</Text>
         </Stack>
     );
 }
diff --git a/packages/components/src/utils/src/ClearSlots.tsx b/packages/components/src/utils/src/ClearSlots.tsx
index bc396661d..529bf9134 100644
--- a/packages/components/src/utils/src/ClearSlots.tsx
+++ b/packages/components/src/utils/src/ClearSlots.tsx
@@ -1,11 +1,12 @@
 import type { Context, PropsWithChildren, ReactNode } from "react";
 import { TextContext as RACTextContext, TextContext, type ContextValue } from "react-aria-components";
 
-export interface ClearProvidersProps<T extends Element> {
+export interface ClearProvidersProps {
     /**
      * The list of providers to clear.
      */
-    values: Context<ContextValue<unknown, T>>[];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    values: Context<ContextValue<any, any>>[];
 
     children: ReactNode;
 }
@@ -20,10 +21,10 @@ export interface ClearProvidersProps<T extends Element> {
  * - You're trying to make a component that is a container for other components, and you don't want anything set above to affect your content.
  * - You're trying to specify a different slot provider inside
  */
-export function ClearProviders<T extends Element>({
+export function ClearProviders({
     values,
     children
-}: ClearProvidersProps<T>) {
+}: ClearProvidersProps) {
     // Similar implementation to SlotProvider
     for (const Context of values) {
         children = <Context.Provider value={null}>{children}</Context.Provider>;
diff --git a/packages/icons/package.json b/packages/icons/package.json
index fac0b0e53..a46b872b0 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -41,7 +41,7 @@
         "@hopper-ui/styled-system": "^2.4",
         "react": "^18 || ^19",
         "react-aria-components": "^1.5",
-        "react-dom": "^18"
+        "react-dom": "^18 || ^19"
     },
     "dependencies": {
         "@react-aria/utils": "^3.26.0",
diff --git a/packages/styled-system/package.json b/packages/styled-system/package.json
index 498140b0e..a63a95966 100644
--- a/packages/styled-system/package.json
+++ b/packages/styled-system/package.json
@@ -39,8 +39,8 @@
         "test": "jest"
     },
     "peerDependencies": {
-        "react": "^18",
-        "react-dom": "^18"
+        "react": "^18 || ^19",
+        "react-dom": "^18 || ^19"
     },
     "dependencies": {
         "@react-aria/ssr": "^3.9.7",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 182f4b862..a6b88463e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -489,7 +489,7 @@ importers:
         specifier: ^2.1.1
         version: 2.1.1
       react-dom:
-        specifier: ^18
+        specifier: ^18 || ^19
         version: 18.3.1(react@18.3.1)
     devDependencies:
       '@hopper-ui/styled-system':