diff --git a/.changeset/shaggy-pens-rescue.md b/.changeset/shaggy-pens-rescue.md
new file mode 100644
index 000000000..f345908b3
--- /dev/null
+++ b/.changeset/shaggy-pens-rescue.md
@@ -0,0 +1,5 @@
+---
+"@workleap/orbiter-ui": minor
+---
+
+Added hopper components and css. Passed props to Hopper through context for components such as Dialog.
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index ff8387e62..36022831d 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -21,6 +21,7 @@ function addWebpackAliases(config) {
         "./@hopper-ui/icons/index.css": path.resolve(__dirname, "../node_modules/@hopper-ui/icons/dist/index.css"),
         "./@hopper-ui/tokens/fonts.css": path.resolve(__dirname, "../node_modules/@hopper-ui/tokens/dist/fonts.css"),
         "./@hopper-ui/styled-system/index.css": path.resolve(__dirname, "../node_modules/@hopper-ui/styled-system/dist/index.css"),
+        "./@hopper-ui/components/index.css": path.resolve(__dirname, "../node_modules/@hopper-ui/components/dist/index.css"),
     };
 }
 
diff --git a/packages/components/package.json b/packages/components/package.json
index 43a6884c3..9ce96f8ad 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -35,19 +35,21 @@
         "clean": "rimraf dist tsconfig.build.tsbuildinfo"
     },
     "peerDependencies": {
+        "@hopper-ui/components": "*",
         "@hopper-ui/styled-system": "*",
         "react": "^18.0.0",
         "react-aria-components": "*",
         "react-dom": "^18.0.0"
     },
     "dependencies": {
-        "@hopper-ui/icons": "^2.8.1",
-        "react-aria-components": "^1.2.1",
+        "@hopper-ui/icons": "^2.8.2",
         "react-is": "17.0.2"
     },
     "devDependencies": {
+        "@hopper-ui/components": "^1.3.20",
         "@hopper-ui/styled-system": "^2.4.0",
         "@popperjs/core": "2.11.2",
+        "react-aria-components": "^1.2.1",
         "text-mask-core": "5.1.2",
         "tsup": "^8.2.4",
         "use-debounce": "7.0.1"
diff --git a/packages/components/src/accordion/tests/chromatic/createAccordionTestSuite-hopper.jsx b/packages/components/src/accordion/tests/chromatic/createAccordionTestSuite-hopper.jsx
index 92cd95944..a6ffd1203 100644
--- a/packages/components/src/accordion/tests/chromatic/createAccordionTestSuite-hopper.jsx
+++ b/packages/components/src/accordion/tests/chromatic/createAccordionTestSuite-hopper.jsx
@@ -2,8 +2,9 @@ import { AccordionHeader, useAccordionContext } from "@components/accordion";
 import { Content } from "@components/placeholders";
 import { Counter } from "@components/counter";
 import { Div } from "@components/html";
-import { H1, H3, Text } from "@components/typography";
+import { H1, H3 } from "@components/typography";
 import { InfoIcon } from "@hopper-ui/icons";
+import { Text } from "@hopper-ui/components";
 import { Item } from "@components/collection";
 import { Stack } from "@components/layout";
 import { cloneElement } from "react";
diff --git a/packages/components/src/alert/tests/chromatic/Alert-hopper.chroma.jsx b/packages/components/src/alert/tests/chromatic/Alert-hopper.chroma.jsx
index 68c4091a6..939516c87 100644
--- a/packages/components/src/alert/tests/chromatic/Alert-hopper.chroma.jsx
+++ b/packages/components/src/alert/tests/chromatic/Alert-hopper.chroma.jsx
@@ -1,6 +1,6 @@
 import { Alert } from "@components/alert";
 import { Content } from "@components/placeholders";
-import { Heading } from "@components/typography";
+import { Heading } from "@hopper-ui/components";
 import { createTestSuite } from "./createTestSuite-hopper";
 import { storiesOfBuilder } from "@stories/utils";
 
diff --git a/packages/components/src/alert/tests/chromatic/AlertTrigger-hopper.stories.tsx b/packages/components/src/alert/tests/chromatic/AlertTrigger-hopper.stories.tsx
index ab12169e5..53e9bbc91 100644
--- a/packages/components/src/alert/tests/chromatic/AlertTrigger-hopper.stories.tsx
+++ b/packages/components/src/alert/tests/chromatic/AlertTrigger-hopper.stories.tsx
@@ -1,7 +1,6 @@
-import { Alert, AlertTrigger } from "@components/alert";
-import { Button } from "@components/button";
 import { Content } from "@components/placeholders";
-import { Heading } from "@components/typography";
+import { Alert, AlertTrigger } from "@components/alert";
+import { Button, Heading } from "@hopper-ui/components";
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
 
 export default {
diff --git a/packages/components/src/alert/tests/chromatic/createTestSuite-hopper.jsx b/packages/components/src/alert/tests/chromatic/createTestSuite-hopper.jsx
index 9548e1c6e..ff66c6875 100644
--- a/packages/components/src/alert/tests/chromatic/createTestSuite-hopper.jsx
+++ b/packages/components/src/alert/tests/chromatic/createTestSuite-hopper.jsx
@@ -1,6 +1,6 @@
 import { Content } from "@components/placeholders";
 import { Div } from "@components/html";
-import { Heading } from "@components/typography";
+import { Heading } from "@hopper-ui/components";
 import { cloneElement } from "react";
 
 function Alert({ element, ...rest }) {
diff --git a/packages/components/src/autocomplete/tests/chromatic/Autocomplete-hopper.stories.tsx b/packages/components/src/autocomplete/tests/chromatic/Autocomplete-hopper.stories.tsx
index 6de0c9b58..3ec2475de 100644
--- a/packages/components/src/autocomplete/tests/chromatic/Autocomplete-hopper.stories.tsx
+++ b/packages/components/src/autocomplete/tests/chromatic/Autocomplete-hopper.stories.tsx
@@ -1,7 +1,7 @@
 import { Autocomplete } from "@components/autocomplete";
 import { Div } from "@components/html";
-import { TeamIcon } from "@hopper-ui/icons";
 import { Inline, Stack } from "@components/layout";
+import { TeamIcon } from "@hopper-ui/icons";
 import { Item } from "@components/collection";
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
 
diff --git a/packages/components/src/button/tests/chromatic/createButtonTestSuite-hopper.jsx b/packages/components/src/button/tests/chromatic/createButtonTestSuite-hopper.jsx
index 3a06d7728..817fcbe53 100644
--- a/packages/components/src/button/tests/chromatic/createButtonTestSuite-hopper.jsx
+++ b/packages/components/src/button/tests/chromatic/createButtonTestSuite-hopper.jsx
@@ -1,9 +1,8 @@
 import { Counter } from "@components/counter";
 import { Div } from "@components/html";
-import { IconList } from "@components/icons";
-import { StartOverIcon } from "@hopper-ui/icons";
 import { Inline, Stack } from "@components/layout";
-import { Text } from "@components/typography";
+import { IconList, Text } from "@hopper-ui/components";
+import { StartOverIcon } from "@hopper-ui/icons";
 import { cloneElement } from "react";
 
 function Button({ element, ...rest }) {
diff --git a/packages/components/src/button/tests/chromatic/createToggleButtonTestSuite-hopper.jsx b/packages/components/src/button/tests/chromatic/createToggleButtonTestSuite-hopper.jsx
index f0ee8989d..504c6bf33 100644
--- a/packages/components/src/button/tests/chromatic/createToggleButtonTestSuite-hopper.jsx
+++ b/packages/components/src/button/tests/chromatic/createToggleButtonTestSuite-hopper.jsx
@@ -1,7 +1,7 @@
 import { Div } from "@components/html";
 import { Inline, Stack } from "@components/layout";
+import { Text } from "@hopper-ui/components";
 import { LightbulbIcon } from "@hopper-ui/icons";
-import { Text } from "@components/typography";
 import { cloneElement } from "react";
 
 function ToggleButton({ element, ...rest }) {
diff --git a/packages/components/src/card/tests/chromatic/Card-hopper.chroma.jsx b/packages/components/src/card/tests/chromatic/Card-hopper.chroma.jsx
index f71b75488..95b609f40 100644
--- a/packages/components/src/card/tests/chromatic/Card-hopper.chroma.jsx
+++ b/packages/components/src/card/tests/chromatic/Card-hopper.chroma.jsx
@@ -1,10 +1,10 @@
 import { ApolloBanner, ApolloPoster } from "./assets";
 import { Box } from "@components/box";
 import { Card } from "@components/card";
-import { Content } from "@components/placeholders";
 import { Div } from "@components/html";
-import { Flex, Inline, Stack } from "@components/layout";
-import { Heading } from "@components/typography";
+import { Inline, Stack } from "@components/layout";
+import { Content } from "@components/placeholders";
+import { Flex, Heading } from "@hopper-ui/components";
 import { Image } from "@components/image";
 import { createTestSuite } from "./createTestSuite-hopper";
 import { storiesOfBuilder } from "@stories/utils";
@@ -108,7 +108,7 @@ stories()
     )
     .add("flex layout", () =>
         <Stack>
-            <Flex gap={160}>
+            <Flex gap="core_160">
                 <Card>
                     <Image src={ApolloBanner} alt="Appolo 11 Banner" />
                     <Heading>Nasa</Heading>
@@ -124,7 +124,7 @@ stories()
                     <Content>The National Aeronautics and Space Administration</Content>
                 </Card>
             </Flex>
-            <Flex gap={160}>
+            <Flex gap="core_160">
                 <Card fluid>
                     <Image src={ApolloBanner} alt="Appolo 11 Banner" />
                     <Heading>Nasa</Heading>
diff --git a/packages/components/src/card/tests/chromatic/createTestSuite-hopper.jsx b/packages/components/src/card/tests/chromatic/createTestSuite-hopper.jsx
index 299f277c3..88169c6ae 100644
--- a/packages/components/src/card/tests/chromatic/createTestSuite-hopper.jsx
+++ b/packages/components/src/card/tests/chromatic/createTestSuite-hopper.jsx
@@ -1,15 +1,13 @@
-import { Button, ButtonGroup } from "@components/button";
 import { Content, Header } from "@components/placeholders";
 import { Div, LI, UL } from "@components/html";
-import { Heading, Paragraph } from "@components/typography";
+import { Paragraph } from "@components/typography";
 import { Illustration } from "@components/illustration";
 import { Image } from "@components/image";
 import { Inline, Stack } from "@components/layout";
+import { Heading, Button, ButtonGroup, Switch, Link } from "@hopper-ui/components";
 import { Item } from "@components/collection";
 import { Nasa } from "./assets";
-import { Switch } from "@components/switch";
 import { Tabs } from "@components/tabs";
-import { TextLink } from "@components/link";
 import { cloneElement } from "react";
 
 function Card({ element, ...rest }) {
@@ -233,21 +231,21 @@ export function createTestSuite(element, stories) {
                     <Card size="xs" element={element}>
                         <Heading>Nasa</Heading>
                         <Header>
-                            <TextLink href="https://www.nasa.gov">Website</TextLink>
+                            <Link variant="secondary" href="https://www.nasa.gov">Website</Link>
                         </Header>
                         <Content>The National Aeronautics and Space Administration</Content>
                     </Card>
                     <Card size="sm" element={element}>
                         <Heading>Nasa</Heading>
                         <Header>
-                            <TextLink href="https://www.nasa.gov">Website</TextLink>
+                            <Link variant="secondary" href="https://www.nasa.gov">Website</Link>
                         </Header>
                         <Content>The National Aeronautics and Space Administration</Content>
                     </Card>
                     <Card element={element}>
                         <Heading>Nasa</Heading>
                         <Header>
-                            <TextLink href="https://www.nasa.gov">Website</TextLink>
+                            <Link variant="secondary" href="https://www.nasa.gov">Website</Link>
                         </Header>
                         <Content>The National Aeronautics and Space Administration</Content>
                     </Card>
@@ -256,14 +254,14 @@ export function createTestSuite(element, stories) {
                     <Card size="lg" element={element}>
                         <Heading>Nasa</Heading>
                         <Header>
-                            <TextLink href="https://www.nasa.gov">Website</TextLink>
+                            <Link variant="secondary" href="https://www.nasa.gov">Website</Link>
                         </Header>
                         <Content>The National Aeronautics and Space Administration</Content>
                     </Card>
                     <Card size="xl" element={element}>
                         <Heading>Nasa</Heading>
                         <Header>
-                            <TextLink href="https://www.nasa.gov">Website</TextLink>
+                            <Link variant="secondary" href="https://www.nasa.gov">Website</Link>
                         </Header>
                         <Content>The National Aeronautics and Space Administration</Content>
                     </Card>
@@ -271,7 +269,7 @@ export function createTestSuite(element, stories) {
                 <Card fluid element={element}>
                     <Heading>Nasa</Heading>
                     <Header>
-                        <TextLink href="https://www.nasa.gov">Website</TextLink>
+                        <Link variant="secondary" href="https://www.nasa.gov">Website</Link>
                     </Header>
                     <Content>The National Aeronautics and Space Administration</Content>
                 </Card>
@@ -284,7 +282,7 @@ export function createTestSuite(element, stories) {
                         <Heading>Nasa</Heading>
                         <Content>
                             <Paragraph>
-                                <TextLink href="https://www.nasa.gov" external>The National Aeronautics and Space Administration</TextLink>
+                                <Link variant="secondary" href="https://www.nasa.gov" external>The National Aeronautics and Space Administration</Link>
                             </Paragraph>
                             <UL>
                                 <LI>Space Shuttle program</LI>
@@ -296,7 +294,7 @@ export function createTestSuite(element, stories) {
                         <Heading>Nasa</Heading>
                         <Content>
                             <Paragraph>
-                                <TextLink href="https://www.nasa.gov" external>The National Aeronautics and Space Administration</TextLink>
+                                <Link variant="secondary" href="https://www.nasa.gov" external>The National Aeronautics and Space Administration</Link>
                             </Paragraph>
                             <UL>
                                 <LI>Space Shuttle program</LI>
@@ -308,7 +306,7 @@ export function createTestSuite(element, stories) {
                         <Heading>Nasa</Heading>
                         <Content>
                             <Paragraph>
-                                <TextLink href="https://www.nasa.gov" external>The National Aeronautics and Space Administration</TextLink>
+                                <Link variant="secondary" href="https://www.nasa.gov" external>The National Aeronautics and Space Administration</Link>
                             </Paragraph>
                             <UL>
                                 <LI>Space Shuttle program</LI>
@@ -322,7 +320,7 @@ export function createTestSuite(element, stories) {
                         <Heading>Nasa</Heading>
                         <Content>
                             <Paragraph>
-                                <TextLink href="https://www.nasa.gov" external>The National Aeronautics and Space Administration</TextLink>
+                                <Link variant="secondary" href="https://www.nasa.gov" external>The National Aeronautics and Space Administration</Link>
                             </Paragraph>
                             <UL>
                                 <LI>Space Shuttle program</LI>
@@ -334,7 +332,7 @@ export function createTestSuite(element, stories) {
                         <Heading>Nasa</Heading>
                         <Content>
                             <Paragraph>
-                                <TextLink href="https://www.nasa.gov" external>The National Aeronautics and Space Administration</TextLink>
+                                <Link variant="secondary" href="https://www.nasa.gov" external>The National Aeronautics and Space Administration</Link>
                             </Paragraph>
                             <UL>
                                 <LI>Space Shuttle program</LI>
@@ -347,7 +345,7 @@ export function createTestSuite(element, stories) {
                     <Heading>Nasa</Heading>
                     <Content>
                         <Paragraph>
-                            <TextLink href="https://www.nasa.gov" external>The National Aeronautics and Space Administration</TextLink>
+                            <Link variant="secondary" href="https://www.nasa.gov" external>The National Aeronautics and Space Administration</Link>
                         </Paragraph>
                         <UL>
                             <LI>Space Shuttle program</LI>
@@ -457,7 +455,7 @@ export function createTestSuite(element, stories) {
                     <Card size="xs" element={element}>
                         <Heading>Nasa</Heading>
                         <Header>
-                            <TextLink href="https://www.nasa.gov">Website</TextLink>
+                            <Link variant="secondary" href="https://www.nasa.gov">Website</Link>
                         </Header>
                         <Content>The National Aeronautics and Space Administration</Content>
                         <ButtonGroup>
@@ -471,7 +469,7 @@ export function createTestSuite(element, stories) {
                         </Illustration>
                         <Heading>Nasa</Heading>
                         <Header>
-                            <TextLink href="https://www.nasa.gov">Website</TextLink>
+                            <Link variant="secondary" href="https://www.nasa.gov">Website</Link>
                         </Header>
                         <Content>The National Aeronautics and Space Administration</Content>
                         <ButtonGroup>
@@ -485,7 +483,7 @@ export function createTestSuite(element, stories) {
                         </Illustration>
                         <Heading>Nasa</Heading>
                         <Header>
-                            <TextLink href="https://www.nasa.gov">Website</TextLink>
+                            <Link variant="secondary" href="https://www.nasa.gov">Website</Link>
                         </Header>
                         <Content>The National Aeronautics and Space Administration</Content>
                         <ButtonGroup>
@@ -501,7 +499,7 @@ export function createTestSuite(element, stories) {
                         </Illustration>
                         <Heading>Nasa</Heading>
                         <Header>
-                            <TextLink href="https://www.nasa.gov">Website</TextLink>
+                            <Link variant="secondary" href="https://www.nasa.gov">Website</Link>
                         </Header>
                         <Content>The National Aeronautics and Space Administration</Content>
                         <ButtonGroup>
@@ -515,7 +513,7 @@ export function createTestSuite(element, stories) {
                         </Illustration>
                         <Heading>Nasa</Heading>
                         <Header>
-                            <TextLink href="https://www.nasa.gov">Website</TextLink>
+                            <Link variant="secondary" href="https://www.nasa.gov">Website</Link>
                         </Header>
                         <Content>The National Aeronautics and Space Administration</Content>
                         <ButtonGroup>
@@ -533,7 +531,7 @@ export function createTestSuite(element, stories) {
                 </Illustration>
                 <Heading>Nasa</Heading>
                 <Header>
-                    <TextLink href="https://www.nasa.gov">Website</TextLink>
+                    <Link variant="secondary" href="https://www.nasa.gov">Website</Link>
                 </Header>
                 <Content>The National Aeronautics and Space Administration</Content>
                 <ButtonGroup>
diff --git a/packages/components/src/checkbox/tests/chromatic/Checkbox-hopper.chroma.jsx b/packages/components/src/checkbox/tests/chromatic/Checkbox-hopper.chroma.jsx
index af2ddfe8f..d63e45cc0 100644
--- a/packages/components/src/checkbox/tests/chromatic/Checkbox-hopper.chroma.jsx
+++ b/packages/components/src/checkbox/tests/chromatic/Checkbox-hopper.chroma.jsx
@@ -1,6 +1,6 @@
 import { Checkbox } from "@components/checkbox";
 import { Inline } from "@components/layout";
-import { createCheckboxTestSuite } from "./createCheckboxTestSuite-hopper";
+import { createCheckboxTestSuite } from "./createCheckboxTestSuite";
 import { paramsBuilder, storiesOfBuilder } from "@stories/utils";
 
 function stories(segment) {
diff --git a/packages/components/src/checkbox/tests/chromatic/createCheckboxTestSuite-hopper.jsx b/packages/components/src/checkbox/tests/chromatic/createCheckboxTestSuite-hopper.jsx
index e33335e18..64956b5f8 100644
--- a/packages/components/src/checkbox/tests/chromatic/createCheckboxTestSuite-hopper.jsx
+++ b/packages/components/src/checkbox/tests/chromatic/createCheckboxTestSuite-hopper.jsx
@@ -1,9 +1,8 @@
 import { Counter } from "@components/counter";
 import { Div } from "@components/html";
-import { IconList } from "@components/icons";
+import { Inline, Stack } from "@components/layout";
 import { MailIcon, InfoIcon, WarningIcon } from "@hopper-ui/icons";
-import { Flex, Inline, Stack } from "@components/layout";
-import { Text } from "@components/typography";
+import { Flex, Text, IconList } from "@hopper-ui/components";
 import { cloneElement } from "react";
 
 function Checkbox({ element, ...rest }) {
diff --git a/packages/components/src/dialog/src/Dialog.tsx b/packages/components/src/dialog/src/Dialog.tsx
index 9cc9c0e50..7e4a34a49 100644
--- a/packages/components/src/dialog/src/Dialog.tsx
+++ b/packages/components/src/dialog/src/Dialog.tsx
@@ -30,6 +30,7 @@ import { CrossButton } from "../../button";
 import { Div } from "../../html";
 import { Text } from "../../typography";
 import { useDialogTriggerContext } from "./DialogTriggerContext";
+import { ButtonGroupContext, HeadingContext } from "@hopper-ui/components";
 
 export type AbstractDialogProps<T extends ElementType> = InternalProps & InteractionProps & Omit<StyledComponentProps<T>, "role" | "zIndex"> & {
     /**
@@ -281,7 +282,9 @@ export function InnerDialog({
 
     const headerSectionMarkup = (!isNil(heading) || !isNil(headerMarkup)) && (
         <Div className="o-ui-dialog-header-section">
-            {heading}
+            <HeadingContext.Provider value={{ level: 3 }}>
+                {heading}
+            </HeadingContext.Provider>
             {headerMarkup}
         </Div>
     );
@@ -290,7 +293,9 @@ export function InnerDialog({
         <Div className="o-ui-dialog-footer-section">
             {footerMarkup}
             {button}
-            {buttonGroup}
+            <ButtonGroupContext.Provider value={{ align: "end" }}>
+                {buttonGroup}
+            </ButtonGroupContext.Provider>
         </Div>
     );
 
diff --git a/packages/components/src/dialog/tests/chromatic/Dialog-hopper.stories.tsx b/packages/components/src/dialog/tests/chromatic/Dialog-hopper.stories.tsx
index adb954a91..56fae466a 100644
--- a/packages/components/src/dialog/tests/chromatic/Dialog-hopper.stories.tsx
+++ b/packages/components/src/dialog/tests/chromatic/Dialog-hopper.stories.tsx
@@ -1,12 +1,11 @@
 import { Apollo11Poster, Nasa, TheMartianPoster } from "./assets";
-import { Content, Footer, Header } from "@components/placeholders";
-import { Heading, Paragraph } from "@components/typography";
-import { ButtonGroup, Button } from "@components/button";
+import { Footer, Header, Heading, ButtonGroup, Button, Link } from "@hopper-ui/components";
+import { Content } from "@components/placeholders";
+import { Paragraph } from "@components/typography";
 import { Dialog } from "@components/dialog";
 import { Div } from "@components/html";
 import { Illustration } from "@components/illustration";
 import { Image } from "@components/image";
-import { TextLink } from "@components/link";
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
 
 export default {
@@ -51,7 +50,7 @@ export const LinkHeader: DialogStory = {
         <Dialog>
             <Heading>Iconic Arecibo Observatory collapses</Heading>
             <Header>
-                <TextLink href="https://www.nature.com/articles/d41586-020-03421-y" external>View the whole story</TextLink>
+                <Link variant="secondary" href="https://www.nature.com/articles/d41586-020-03421-y" isExternal>View the whole story</Link>
             </Header>
             <Content>
                 <Paragraph>This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye."</Paragraph>
@@ -88,7 +87,7 @@ export const LinkFooter: DialogStory = {
                 <Paragraph>The news about Arecibo's structural damage and subsequent decommissioning was disheartening for the local community, too. Field trips to its visitors' center are a ''rite of passage'' for Puerto Rican children.</Paragraph>
             </Content>
             <Footer>
-                <TextLink href="https://www.nature.com/articles/d41586-020-03421-y" external>View the whole story</TextLink>
+                <Link variant="secondary" href="https://www.nature.com/articles/d41586-020-03421-y" isExternal>View the whole story</Link>
             </Footer>
         </Dialog>
     )
@@ -203,7 +202,7 @@ export const AllSections: DialogStory = {
             </Illustration>
             <Heading>Iconic Arecibo Observatory collapses</Heading>
             <Header>
-                <TextLink href="https://www.nature.com/articles/d41586-020-03421-y" external>View the whole story</TextLink>
+                <Link variant="secondary" href="https://www.nature.com/articles/d41586-020-03421-y" isExternal>View the whole story</Link>
             </Header>
             <Content>
                 <Paragraph>This year, the National Science Foundation (NSF) said farewell to the iconic Arecibo Observatory in Puerto Rico after two major cable failures led to the radio telescope's collapse. The 57-year old structure was once the largest radio dish telescope in the world, and researchers have used its capabilities to make significant breakthroughs in astronomy. The Arecibo Observatory also served as the dramatic backdrop to films like "Contact" and "Goldeneye."</Paragraph>
diff --git a/packages/components/src/dialog/tests/chromatic/DialogTrigger-hopper.stories.tsx b/packages/components/src/dialog/tests/chromatic/DialogTrigger-hopper.stories.tsx
index b4873e4e7..9a0231d79 100644
--- a/packages/components/src/dialog/tests/chromatic/DialogTrigger-hopper.stories.tsx
+++ b/packages/components/src/dialog/tests/chromatic/DialogTrigger-hopper.stories.tsx
@@ -1,7 +1,7 @@
-import { Button } from "@components/button";
+import { Heading, Button } from "@hopper-ui/components";
 import { Content } from "@components/placeholders";
 import { Dialog, DialogTrigger } from "@components/dialog";
-import { Heading, Paragraph } from "@components/typography";
+import { Paragraph } from "@components/typography";
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
 
 export default {
diff --git a/packages/components/src/illustrated-message/tests/chromatic/IllustratedMessage-hopper.stories.tsx b/packages/components/src/illustrated-message/tests/chromatic/IllustratedMessage-hopper.stories.tsx
index c2b6f49ae..5fd9f6f5a 100644
--- a/packages/components/src/illustrated-message/tests/chromatic/IllustratedMessage-hopper.stories.tsx
+++ b/packages/components/src/illustrated-message/tests/chromatic/IllustratedMessage-hopper.stories.tsx
@@ -1,10 +1,10 @@
 import { Box } from "@components/box";
 import { Content } from "@components/placeholders";
 import { Div } from "@components/html";
-import { Heading } from "@components/typography";
 import { IllustratedMessage } from "@components/illustrated-message";
 import { Image } from "@components/image";
 import { Inline, Stack } from "@components/layout";
+import { Heading } from "@hopper-ui/components";
 import { Nasa } from "./assets";
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
 
diff --git a/packages/components/src/index.css b/packages/components/src/index.css
index 978d413f5..2e801e437 100644
--- a/packages/components/src/index.css
+++ b/packages/components/src/index.css
@@ -3,6 +3,7 @@
 /* ~ is temporary as it's not ideal, see: https://github.com/gsoft-inc/sg-orbit/issues/1024 */
 @import "@hopper-ui/icons/index.css";
 @import "@hopper-ui/styled-system/index.css";
+@import "@hopper-ui/components/index.css";
 
 /*
 NOTE: Importing all the components CSS files in a root file is not our preferred solution. Ideally, every components would import is own CSS file.
diff --git a/packages/components/src/listbox/tests/chromatic/Listbox-hopper.stories.tsx b/packages/components/src/listbox/tests/chromatic/Listbox-hopper.stories.tsx
index 40ca56f50..1d78ec3af 100644
--- a/packages/components/src/listbox/tests/chromatic/Listbox-hopper.stories.tsx
+++ b/packages/components/src/listbox/tests/chromatic/Listbox-hopper.stories.tsx
@@ -1,11 +1,10 @@
-import { Avatar } from "@components/avatar";
 import { IconList } from "@components/icons";
+import { Inline, Stack } from "@components/layout";
+import { Avatar, Text } from "@hopper-ui/components";
 import { SparklesIcon, DismissIcon, LightbulbIcon, NotificationIcon } from "@hopper-ui/icons";
 import { Div } from "@components/html";
-import { Inline, Stack } from "@components/layout";
 import { CollectionItem, Item, Section } from "@components/collection";
 import { useListboxContext, Listbox, ListboxOption, ListboxOptionProps } from "@components/listbox";
-import { Text } from "@components/typography";
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
 
 export default {
diff --git a/packages/components/src/menu/tests/chromatic/Menu-hopper.stories.tsx b/packages/components/src/menu/tests/chromatic/Menu-hopper.stories.tsx
index 0dc4b513d..683606e82 100644
--- a/packages/components/src/menu/tests/chromatic/Menu-hopper.stories.tsx
+++ b/packages/components/src/menu/tests/chromatic/Menu-hopper.stories.tsx
@@ -1,12 +1,10 @@
-import { Avatar } from "@components/avatar";
 import { Div } from "@components/html";
 import { Divider } from "@components/divider";
-import { IconList } from "@components/icons";
-import { LightbulbIcon, NotificationIcon } from "@hopper-ui/icons";
 import { Inline, Stack } from "@components/layout";
+import { Avatar, IconList, Text } from "@hopper-ui/components";
+import { LightbulbIcon, NotificationIcon } from "@hopper-ui/icons";
 import { Item, Section, NodeType } from "@components/collection";
 import { Menu, MenuItem, MenuItemProps } from "@components/menu";
-import { Text } from "@components/typography";
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
 
 export default {
diff --git a/packages/components/src/menu/tests/chromatic/MenuTrigger-hopper.stories.tsx b/packages/components/src/menu/tests/chromatic/MenuTrigger-hopper.stories.tsx
index e56a3f5e9..70e724125 100644
--- a/packages/components/src/menu/tests/chromatic/MenuTrigger-hopper.stories.tsx
+++ b/packages/components/src/menu/tests/chromatic/MenuTrigger-hopper.stories.tsx
@@ -4,7 +4,7 @@ import { Menu, MenuProps, MenuTrigger } from "@components/menu";
 import { DisclosureArrow } from "@components/disclosure";
 import { Divider } from "@components/divider";
 import { HtmlButton, HtmlButtonProps } from "@components/html";
-import { Text } from "@components/typography";
+import { Text } from "@hopper-ui/components";
 import { KebabIcon } from "@hopper-ui/icons";
 import { forwardRef } from "react";
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
diff --git a/packages/components/src/modal/tests/chromatic/Modal-hopper.stories.tsx b/packages/components/src/modal/tests/chromatic/Modal-hopper.stories.tsx
index 5c40e3e5d..6f5c3d226 100644
--- a/packages/components/src/modal/tests/chromatic/Modal-hopper.stories.tsx
+++ b/packages/components/src/modal/tests/chromatic/Modal-hopper.stories.tsx
@@ -1,13 +1,13 @@
 import { Apollo11Poster, BlueOrigin, Nasa, SpaceX } from "./assets";
-import { Heading, Paragraph } from "@components/typography";
+import { Paragraph } from "@components/typography";
 
-import { Button } from "@components/button";
 import { Card } from "@components/card";
 import { Content } from "@components/placeholders";
 import { Div } from "@components/html";
 import { Illustration } from "@components/illustration";
 import { Image } from "@components/image";
 import { Modal } from "@components/modal";
+import { Button, Heading } from "@hopper-ui/components";
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
 
 export default {
diff --git a/packages/components/src/modal/tests/chromatic/ModalTrigger-hopper.stories.tsx b/packages/components/src/modal/tests/chromatic/ModalTrigger-hopper.stories.tsx
index 78919b4d1..2dbb2799a 100644
--- a/packages/components/src/modal/tests/chromatic/ModalTrigger-hopper.stories.tsx
+++ b/packages/components/src/modal/tests/chromatic/ModalTrigger-hopper.stories.tsx
@@ -1,7 +1,7 @@
-import { Heading, Paragraph } from "@components/typography";
+import { Paragraph } from "@components/typography";
 import { Modal, ModalTrigger } from "@components/modal";
-import { Button } from "@components/button";
 import { Content } from "@components/placeholders";
+import { Button, Heading } from "@hopper-ui/components";
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
 
 export default {
diff --git a/packages/components/src/popover/src/Popover.tsx b/packages/components/src/popover/src/Popover.tsx
index ab9aeef1d..ba7731d57 100644
--- a/packages/components/src/popover/src/Popover.tsx
+++ b/packages/components/src/popover/src/Popover.tsx
@@ -21,6 +21,7 @@ import { useOverlayFocusRing, useTrapFocus } from "../../overlay";
 
 import { Box } from "../../box";
 import { Text } from "../../typography";
+import { HeadingContext } from "@hopper-ui/components";
 
 const DefaultElement = "section";
 
@@ -125,7 +126,9 @@ export function InnerPopover({
 
     const headerSectionMarkup = heading && (
         <header className="o-ui-popover-header-section">
-            {heading}
+            <HeadingContext.Provider value={{ className: "o-ui-heading-md", level: 3 }} >
+                {heading}
+            </HeadingContext.Provider>
         </header>
     );
 
diff --git a/packages/components/src/popover/tests/chromatic/Popover-hopper.stories.tsx b/packages/components/src/popover/tests/chromatic/Popover-hopper.stories.tsx
index 406c594b1..ad7bbf1da 100644
--- a/packages/components/src/popover/tests/chromatic/Popover-hopper.stories.tsx
+++ b/packages/components/src/popover/tests/chromatic/Popover-hopper.stories.tsx
@@ -1,15 +1,10 @@
-import { Button, ButtonGroup } from "@components/button";
-import { Content, Footer } from "@components/placeholders";
-import { Field, Label } from "@components/field";
+import { Content } from "@components/placeholders";
 
 import { Div } from "@components/html";
-import { Form } from "@components/form";
-import { Heading } from "@components/typography";
 import { Image } from "@components/image";
 import { Launch } from "./assets";
 import { Popover } from "@components/popover";
-import { TextInput } from "@components/text-input";
-import { TextLink } from "@components/link";
+import { Button, ButtonGroup, Footer, Form, Heading, Label, Link, TextField } from "@hopper-ui/components";
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
 
 export default {
@@ -47,7 +42,7 @@ export const LinkFooter: PopoverStory = {
             <Heading>Space News</Heading>
             <Content>SpaceX designs, manufactures, and launches the world's most advanced rockets and spacecraft. The company was founded in 2002 by Elon Musk to revolutionize space transportation, with the ultimate goal of making life multiplanetary.</Content>
             <Footer>
-                <TextLink href="https://www.google.com" external>Step 2/4</TextLink>
+                <Link href="https://www.google.com" variant="secondary" isExternal>Step 2/4</Link>
             </Footer>
         </Popover>
     )
@@ -99,15 +94,13 @@ export const PopoverForm: PopoverStory = {
         <Popover>
             <Heading>Space News</Heading>
             <Content>
-                <Form fluid>
-                    <Field>
+                <Form isFluid>
+                    <TextField name="first-name">
                         <Label>First Name</Label>
-                        <TextInput name="first-name" />
-                    </Field>
-                    <Field>
+                    </TextField>
+                    <TextField name="last-name">
                         <Label>Last Name</Label>
-                        <TextInput name="last-name" />
-                    </Field>
+                    </TextField>
                 </Form>
             </Content>
             <ButtonGroup>
diff --git a/packages/components/src/popover/tests/chromatic/PopoverTrigger-hopper.stories.tsx b/packages/components/src/popover/tests/chromatic/PopoverTrigger-hopper.stories.tsx
index 74663b191..ded8314f5 100644
--- a/packages/components/src/popover/tests/chromatic/PopoverTrigger-hopper.stories.tsx
+++ b/packages/components/src/popover/tests/chromatic/PopoverTrigger-hopper.stories.tsx
@@ -1,8 +1,7 @@
 import { Popover, PopoverTrigger } from "@components/popover";
 
-import { Button } from "@components/button";
 import { Content } from "@components/placeholders";
-import { Heading } from "@components/typography";
+import { Button, Heading } from "@hopper-ui/components";
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
 
 export default {
diff --git a/packages/components/src/radio/tests/chromatic/createRadioTestSuite-hopper.jsx b/packages/components/src/radio/tests/chromatic/createRadioTestSuite-hopper.jsx
index 51506a619..06a8c77b4 100644
--- a/packages/components/src/radio/tests/chromatic/createRadioTestSuite-hopper.jsx
+++ b/packages/components/src/radio/tests/chromatic/createRadioTestSuite-hopper.jsx
@@ -1,9 +1,8 @@
 import { Counter } from "@components/counter";
 import { Div } from "@components/html";
-import { IconList } from "@components/icons";
+import { Inline, Stack } from "@components/layout";
 import { MailIcon, InfoIcon, WarningIcon } from "@hopper-ui/icons";
-import { Flex, Inline, Stack } from "@components/layout";
-import { Text } from "@components/typography";
+import { Flex, IconList, Text } from "@hopper-ui/components";
 import { cloneElement } from "react";
 
 function Radio({ element, ...rest }) {
diff --git a/packages/components/src/switch/tests/chromatic/Switch-hopper.chroma.jsx b/packages/components/src/switch/tests/chromatic/Switch-hopper.chroma.jsx
index d9453e273..b53f42908 100644
--- a/packages/components/src/switch/tests/chromatic/Switch-hopper.chroma.jsx
+++ b/packages/components/src/switch/tests/chromatic/Switch-hopper.chroma.jsx
@@ -1,5 +1,5 @@
-import { Inline } from "@components/layout";
 import { Switch } from "@components/switch";
+import { Inline } from "@components/layout";
 import { createTestSuite } from "./createTestSuite-hopper";
 import { paramsBuilder, storiesOfBuilder } from "@stories/utils";
 
diff --git a/packages/components/src/switch/tests/chromatic/createTestSuite-hopper.jsx b/packages/components/src/switch/tests/chromatic/createTestSuite-hopper.jsx
index dff14ac5d..1fa052160 100644
--- a/packages/components/src/switch/tests/chromatic/createTestSuite-hopper.jsx
+++ b/packages/components/src/switch/tests/chromatic/createTestSuite-hopper.jsx
@@ -1,9 +1,8 @@
 import { Counter } from "@components/counter";
 import { Div } from "@components/html";
-import { IconList } from "@components/icons";
-import { MailIcon, InfoIcon, WarningIcon } from "@hopper-ui/icons";
 import { Inline, Stack } from "@components/layout";
-import { Text } from "@components/typography";
+import { MailIcon, InfoIcon, WarningIcon } from "@hopper-ui/icons";
+import { IconList, Text } from "@hopper-ui/components";
 import { cloneElement } from "react";
 
 function Switch({ element, ...rest }) {
diff --git a/packages/components/src/tabs/src/Tabs.css b/packages/components/src/tabs/src/Tabs.css
index a8591c2c4..2544c887b 100644
--- a/packages/components/src/tabs/src/Tabs.css
+++ b/packages/components/src/tabs/src/Tabs.css
@@ -132,7 +132,7 @@
     display: flex;
     align-items: center;
     justify-items: center;
-    justify-content: start;
+    justify-content: flex-start;
     position: relative;
     width: 100%;
 }
@@ -239,7 +239,7 @@
 
 .o-ui-tabs-vertical .o-ui-tab {
     width: 100%;
-    justify-content: start;
+    justify-content: flex-start;
 }
 
 .o-ui-tabs-vertical .o-ui-tab:last-child {
diff --git a/packages/components/src/tabs/tests/chromatic/Tabs-hopper.chroma.jsx b/packages/components/src/tabs/tests/chromatic/Tabs-hopper.chroma.jsx
index c27db3923..b2db82dd8 100644
--- a/packages/components/src/tabs/tests/chromatic/Tabs-hopper.chroma.jsx
+++ b/packages/components/src/tabs/tests/chromatic/Tabs-hopper.chroma.jsx
@@ -1,11 +1,11 @@
 import { SparklesIcon, DismissIcon } from "@hopper-ui/icons";
 import { Content, Header } from "@components/placeholders";
-import { Inline, Stack } from "@components/layout";
 import { Tab, TabPanel, Tabs, useTabsContext } from "@components/tabs";
 
 import { Div } from "@components/html";
 import { Item } from "@components/collection";
-import { Text } from "@components/typography";
+import { Inline, Stack } from "@components/layout";
+import { Text } from "@hopper-ui/components";
 import { createTabsTestSuite } from "./createTabsTestSuite-hopper";
 import { paramsBuilder, storiesOfBuilder } from "@stories/utils";
 
diff --git a/packages/components/src/tabs/tests/chromatic/TabsVertical-hopper.stories.tsx b/packages/components/src/tabs/tests/chromatic/TabsVertical-hopper.stories.tsx
index e2cbfacd1..39aa04149 100644
--- a/packages/components/src/tabs/tests/chromatic/TabsVertical-hopper.stories.tsx
+++ b/packages/components/src/tabs/tests/chromatic/TabsVertical-hopper.stories.tsx
@@ -4,8 +4,7 @@ import { Inline } from "@components/layout";
 import { Tabs } from "@components/tabs";
 
 import { Item } from "@components/collection";
-import { Lozenge } from "@components/lozenge";
-import { Text } from "@components/typography";
+import { Text, Tag, TagList, TagGroup } from "@hopper-ui/components";
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
 
 export default {
@@ -86,7 +85,7 @@ export const TabWithLozenge: TabsStory = {
             <Item>
                 <Header>
                     <Text>Mars</Text>
-                    <Lozenge>New</Lozenge>
+                    <TagGroup slot="lozenge" aria-label="New"><TagList><Tag>New</Tag></TagList></TagGroup>
                 </Header>
                 <Content>Mars is the fourth planet from the Sun and the second-smallest planet.</Content>
             </Item>
@@ -94,7 +93,7 @@ export const TabWithLozenge: TabsStory = {
                 <Header>
                     <NotificationIcon />
                     <Text>Jupiter</Text>
-                    <Lozenge>New</Lozenge>
+                    <TagGroup slot="lozenge" aria-label="New"><TagList><Tag>New</Tag></TagList></TagGroup>
                 </Header>
                 <Content>Jupiter is the fifth planet from the Sun and the largest in the Solar System.</Content>
             </Item>
diff --git a/packages/components/src/tabs/tests/chromatic/createTabsTestSuite-hopper.jsx b/packages/components/src/tabs/tests/chromatic/createTabsTestSuite-hopper.jsx
index d8b3a30b9..80f315d36 100644
--- a/packages/components/src/tabs/tests/chromatic/createTabsTestSuite-hopper.jsx
+++ b/packages/components/src/tabs/tests/chromatic/createTabsTestSuite-hopper.jsx
@@ -1,11 +1,10 @@
 import { NotificationIcon } from "@hopper-ui/icons";
 import { Content, Header } from "@components/placeholders";
 import { Item } from "@components/collection";
-import { Stack } from "@components/layout";
 import { cloneElement } from "react";
-import { Lozenge } from "@components/lozenge";
 import { Div } from "@components/html";
-import { Text } from "@components/typography";
+import { Stack } from "@components/layout";
+import { Text, Tag, TagList, TagGroup } from "@hopper-ui/components";
 
 function Tabs({ element, ...rest }) {
     return cloneElement(element, rest);
@@ -153,7 +152,7 @@ export function createTabsTestSuite(element, stories) {
                 <Item>
                     <Header>
                         <Text>Mars</Text>
-                        <Lozenge>New</Lozenge>
+                        <TagGroup slot="lozenge" aria-label="New"><TagList><Tag>New</Tag></TagList></TagGroup>
                     </Header>
                     <Content>Mars is the fourth planet from the Sun and the second-smallest planet.</Content>
                 </Item>
@@ -161,7 +160,7 @@ export function createTabsTestSuite(element, stories) {
                     <Header>
                         <NotificationIcon />
                         <Text>Jupiter</Text>
-                        <Lozenge>New</Lozenge>
+                        <TagGroup slot="lozenge" aria-label="New"><TagList><Tag>New</Tag></TagList></TagGroup>
                     </Header>
                     <Content>Jupiter is the fifth planet from the Sun and the largest in the Solar System.</Content>
                 </Item>
@@ -327,7 +326,7 @@ export function createTabsTestSuite(element, stories) {
                     <Item key="earth">
                         <Header>
                             <Text>Earth</Text>
-                            <Lozenge>Home</Lozenge>
+                            <TagGroup slot="lozenge" aria-label="Home"><TagList><Tag>Home</Tag></TagList></TagGroup>
                         </Header>
                         <Content>Earth—our home planet—is the only place we know of so far that’s inhabited by living things. It's also the only planet in our solar system with liquid water on the surface.</Content>
                     </Item>
@@ -349,7 +348,7 @@ export function createTabsTestSuite(element, stories) {
                         <Header>
                             <NotificationIcon />
                             <Text>Neptune</Text>
-                            <Lozenge>New</Lozenge>
+                            <TagGroup slot="lozenge" aria-label="New"><TagList><Tag>New</Tag></TagList></TagGroup>
                         </Header>
                         <Content>Neptune—the eighth and most distant major planet orbitering our Sun—is dark, cold and whipped by supersonic winds. It was the first planet located through mathematical calculations, rather than by telescope.</Content>
                     </Item>
@@ -374,7 +373,7 @@ export function createTabsTestSuite(element, stories) {
                     <Item key="earth">
                         <Header>
                             <Text>Earth</Text>
-                            <Lozenge>Home</Lozenge>
+                            <TagGroup slot="lozenge" aria-label="Home"><TagList><Tag>Home</Tag></TagList></TagGroup>
                         </Header>
                         <Content>Earth—our home planet—is the only place we know of so far that’s inhabited by living things. It's also the only planet in our solar system with liquid water on the surface.</Content>
                     </Item>
@@ -411,7 +410,7 @@ export function createTabsTestSuite(element, stories) {
                     <Item key="earth">
                         <Header>
                             <Text>Earth</Text>
-                            <Lozenge>Home</Lozenge>
+                            <TagGroup slot="lozenge" aria-label="Home"><TagList><Tag>Home</Tag></TagList></TagGroup>
                         </Header>
                         <Content>Earth—our home planet—is the only place we know of so far that’s inhabited by living things. It's also the only planet in our solar system with liquid water on the surface.</Content>
                     </Item>
diff --git a/packages/components/src/tag/tests/chromatic/Tag-hopper.chroma.jsx b/packages/components/src/tag/tests/chromatic/Tag-hopper.chroma.jsx
index 6a26a8c16..9f603c91b 100644
--- a/packages/components/src/tag/tests/chromatic/Tag-hopper.chroma.jsx
+++ b/packages/components/src/tag/tests/chromatic/Tag-hopper.chroma.jsx
@@ -1,5 +1,5 @@
-import { Inline } from "@components/layout";
 import { Tag } from "@components/tag";
+import { Inline } from "@components/layout";
 import { createTagTestSuite } from "./createTagTestSuite-hopper";
 import { storiesOfBuilder } from "@stories/utils";
 
diff --git a/packages/components/src/tag/tests/chromatic/TagList-hopper.stories.tsx b/packages/components/src/tag/tests/chromatic/TagList-hopper.stories.tsx
index b6732b913..df3fb7328 100644
--- a/packages/components/src/tag/tests/chromatic/TagList-hopper.stories.tsx
+++ b/packages/components/src/tag/tests/chromatic/TagList-hopper.stories.tsx
@@ -2,10 +2,10 @@ import { Counter } from "@components/counter";
 import { Div } from "@components/html";
 import { Dot } from "@components/dot";
 import { QuestionIcon, LightbulbIcon, NotificationIcon } from "@hopper-ui/icons";
-import { Inline, Stack } from "@components/layout";
 import { Item } from "@components/collection";
 import { TagList } from "@components/tag";
-import { Text } from "@components/typography";
+import { Inline, Stack } from "@components/layout";
+import { Text } from "@hopper-ui/components";
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
 
 export default {
@@ -115,6 +115,7 @@ export const WithClearButtonEmpty: TagListStory = {
     storyName: "with clear button & empty",
     render: () => (
         <TagList onClear={() => {}}>
+            {[]}
         </TagList>
     )
 };
diff --git a/packages/components/src/tag/tests/chromatic/createTagTestSuite-hopper.jsx b/packages/components/src/tag/tests/chromatic/createTagTestSuite-hopper.jsx
index f1ffe9e8a..4dd43fc36 100644
--- a/packages/components/src/tag/tests/chromatic/createTagTestSuite-hopper.jsx
+++ b/packages/components/src/tag/tests/chromatic/createTagTestSuite-hopper.jsx
@@ -1,13 +1,11 @@
-import { IconList } from "@components/icons";
 import { SparklesIcon } from "@hopper-ui/icons";
 import { Counter } from "@components/counter";
 import { Div } from "@components/html";
 import { Dot } from "@components/dot";
-import { Inline, Stack } from "@components/layout";
-import { Text } from "@components/typography";
 import { cloneElement } from "react";
-import { Avatar } from "@components/avatar";
 import { Field, Label } from "@components/field";
+import { Inline, Stack } from "@components/layout";
+import { Avatar, IconList, Text } from "@hopper-ui/components";
 
 function Tag({ element, ...rest }) {
     return cloneElement(element, rest);
diff --git a/packages/components/src/typography/tests/chromatic/Text-hopper.stories.tsx b/packages/components/src/typography/tests/chromatic/Text-hopper.stories.tsx
deleted file mode 100644
index eb7b7c13b..000000000
--- a/packages/components/src/typography/tests/chromatic/Text-hopper.stories.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Div } from "@components/html";
-import { Stack } from "@components/layout";
-import { Text } from "@components/typography";
-import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
-
-export default {
-    title: "Chromatic/Text-hopper",
-    component: Text
-} as ComponentMeta<typeof Text>;
-
-type TextStory = ComponentStoryObj<typeof Text>;
-
-export const Default: TextStory = {
-    storyName: "default",
-    render: () => (
-        <Stack gap={0}>
-            <Text size="2xl">There are no passengers on spaceship earth.</Text>
-            <Text size="xl">There are no passengers on spaceship earth.</Text>
-            <Text size="lg">There are no passengers on spaceship earth.</Text>
-            <Text>There are no passengers on spaceship earth.</Text>
-            <Text size="sm">There are no passengers on spaceship earth.</Text>
-            <Text size="xs">There are no passengers on spaceship earth.</Text>
-        </Stack>
-    )
-};
-
-export const Inherit: TextStory = {
-    storyName: "inherit",
-    render: () => (
-        <Div fontSize="0.625rem">
-            <Text size="inherit">There are no passengers on spaceship earth.</Text>
-        </Div>
-    )
-};
-
-export const Styling: TextStory = {
-    storyName: "styling",
-    render: () => (
-        <Stack>
-            <Text border="warning">There are no passengers on spaceship earth.</Text>
-            <Text className="bg-red">There are no passengers on spaceship earth.</Text>
-            <Text style={{ backgroundColor: "red" }}>There are no passengers on spaceship earth.</Text>
-        </Stack>
-    )
-};
diff --git a/yarn.lock b/yarn.lock
index 7a296111a..60b4ec2be 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1690,10 +1690,21 @@
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
   integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==
 
-"@hopper-ui/icons@^2.8.1":
-  version "2.8.1"
-  resolved "https://registry.yarnpkg.com/@hopper-ui/icons/-/icons-2.8.1.tgz#6f74f9a543ffabb6a4700577a26b7af23510680d"
-  integrity sha512-x7jTQ8M6b2BdJrg1wskVIUQeikD/qL1vRREQ8BdsBAYOA2+oJbd8HvXnQVoqvW9xU8DAkeToTcYXsJSKiUqhrw==
+"@hopper-ui/components@^1.3.19":
+  version "1.3.19"
+  resolved "https://registry.yarnpkg.com/@hopper-ui/components/-/components-1.3.19.tgz#3979fbb4a62232d9d61280b8cfd2bb40450bd776"
+  integrity sha512-uAYQCOtboi9HCLsaK94e5x8R66Yu3TFU6T35C+O7tb39m1bWB6ThkpOkpX0Lq+S/FLsQxwWXK9iQ/8syaZIjxA==
+  dependencies:
+    "@hopper-ui/icons" "2.8.2"
+    "@react-aria/utils" "^3.25.2"
+    "@react-stately/utils" "^3.10.3"
+    "@react-types/shared" "^3.24.1"
+    clsx "^2.1.1"
+
+"@hopper-ui/icons@2.8.2", "@hopper-ui/icons@^2.8.2":
+  version "2.8.2"
+  resolved "https://registry.yarnpkg.com/@hopper-ui/icons/-/icons-2.8.2.tgz#6a08f43d3b150a8bcb653213329e2ccfafc7bfab"
+  integrity sha512-Sf1Bt78pzQicGUOYCi5QhftDWPMJLQBLf5Ebyeqg17Lg4i54vdz9MY5ZAA2MCAEbgmo7YbywDfO1NW8Q+TJ7Ug==
   dependencies:
     "@react-aria/utils" "^3.25.2"
     clsx "^2.1.1"