refactor: update imports and wrap text elements in Typography component

lib/Article/Article.tsx

@@ -1,5 +1,5 @@
 import { createElement, useEffect, useState } from 'react';
-import { Note, Tip, Steps, Step } from '@stubbycms/ui';
+import { Note, Tip, Steps, Step } from '../';
 import { highlight } from 'sugar-high';
 import { removeFrontMatter, slugify } from '../utils';
 import remarkGfm from 'remark-gfm';

src/pages/AccordionSamples.tsx

@@ -1,27 +1,35 @@
-import { Accordion, AccordionGroup } from '../../lib';
+import { Accordion, AccordionGroup, Typography } from '../../lib';
 
 export const AccordionSamples = () => {
   return (
     <>
       <AccordionGroup>
         <Accordion title="How does a tech-savvy person fix a broken lightbulb?">
-          They turn it off and on again, just like they do with routers, modems, and any other
-          device. If that fails, they google 'why won't my lightbulb work?
+          <Typography>
+            They turn it off and on again, just like they do with routers, modems, and any other
+            device. If that fails, they google 'why won't my lightbulb work?
+          </Typography>
         </Accordion>
 
         <Accordion title="Why do bugs always show up after deadlines?">
-          Because bugs love to party when you're done! It's like they know when you've declared
-          'code complete' and show up uninvited.
+          <Typography>
+            Because bugs love to party when you're done! It's like they know when you've declared
+            'code complete' and show up uninvited.
+          </Typography>
         </Accordion>
 
         <Accordion title="What happens when you fix a bug at 2 a.m.?">
-          You either break five other things or question if you're even awake. The real mystery: Why
-          are you working at 2 a.m.?
+          <Typography>
+            You either break five other things or question if you're even awake. The real mystery:
+            Why are you working at 2 a.m.?
+          </Typography>
         </Accordion>
 
         <Accordion title="Why does code always break right before launch?">
-          Because code is like a toddler — it behaves until everyone's watching. Then it throws a
-          tantrum right when it matters most!
+          <Typography>
+            Because code is like a toddler — it behaves until everyone's watching. Then it throws a
+            tantrum right when it matters most!
+          </Typography>
         </Accordion>
       </AccordionGroup>
     </>

src/pages/StepSamples.tsx

@@ -1,4 +1,4 @@
-import { Step, Steps } from '../../lib';
+import { Step, Steps, Typography } from '../../lib';
 
 export const StepSamples = () => {
   return (
@@ -8,35 +8,43 @@ export const StepSamples = () => {
           title="Choose your coffee beans"
           number="1"
         >
-          Pick the beans that suit your taste. Whether you like a strong dark roast or a light
-          fruity blend, this is where the magic begins.
+          <Typography>
+            Pick the beans that suit your taste. Whether you like a strong dark roast or a light
+            fruity blend, this is where the magic begins.
+          </Typography>
         </Step>
         <Step
           title="Measure out your coffee"
           number="2"
         >
-          Use a tablespoon to measure out the right amount of coffee. Here's a quick guide:
-          <br />
-          <ul>
-            <li>1 tablespoon for a single cup </li>
-            <li>2 tablespoons if you need that extra kick </li>
-            <li>A little more if it's going to be one of those days</li>
-          </ul>
+          <Typography>
+            Use a tablespoon to measure out the right amount of coffee. Here's a quick guide:
+            <br />
+            <ul>
+              <li>1 tablespoon for a single cup </li>
+              <li>2 tablespoons if you need that extra kick </li>
+              <li>A little more if it's going to be one of those days</li>
+            </ul>
+          </Typography>
         </Step>
         <Step
           title="Heat your water"
           number="3"
         >
-          Heat water to just before boiling. If you're using a kettle, this is the perfect time to
-          zone out and daydream about your coffee.
+          <Typography>
+            Heat water to just before boiling. If you're using a kettle, this is the perfect time to
+            zone out and daydream about your coffee.
+          </Typography>
         </Step>
         <Step
           title="Brew and enjoy"
           number="4"
         >
-          Now, pour the hot water over the coffee grounds and let it brew. Take in the aroma as it
-          fills the room. Wait a few minutes, pour yourself a cup, and enjoy that first sip like
-          it's the best moment of the day—because it is!
+          <Typography>
+            Now, pour the hot water over the coffee grounds and let it brew. Take in the aroma as it
+            fills the room. Wait a few minutes, pour yourself a cup, and enjoy that first sip like
+            it's the best moment of the day—because it is!
+          </Typography>
         </Step>
       </Steps>
     </>

src/pages/TabSamples.tsx

@@ -1,20 +1,27 @@
-import { Tab, Tabs } from '../../lib';
+import { Tab, Tabs, Typography } from '../../lib';
 
 export function TabSamples() {
   return (
     <>
       <Tabs>
         <Tab title="🚀 Take Off!">
-          Welcome aboard! This first tab is your launchpad for everything ahead. Buckle up, get
-          comfortable, and prepare for a smooth ride through the rest of the content!
+          <Typography>
+            Welcome aboard! This first tab is your launchpad for everything ahead. Buckle up, get
+            comfortable, and prepare for a smooth ride through the rest of the content!
+          </Typography>
         </Tab>
         <Tab title="🌟 Explore the Stars">
-          Now that you've taken off, let's explore! In this tab, you'll discover the core details of
-          your journey. Whether it's facts, steps, or insights—here's where you dig deeper.
+          <Typography>
+            Now that you've taken off, let's explore! In this tab, you'll discover the core details
+            of your journey. Whether it's facts, steps, or insights—here's where you dig deeper.
+          </Typography>
         </Tab>
         <Tab title="🎯 Mission Accomplished">
-          You've reached your destination! In this final tab, it's time to wrap up, reflect on what
-          you've learned, and take away the key points from your adventure. Well done, explorer!
+          <Typography>
+            You've reached your destination! In this final tab, it's time to wrap up, reflect on
+            what you've learned, and take away the key points from your adventure. Well done,
+            explorer!
+          </Typography>
         </Tab>
       </Tabs>
     </>

src/pages/TypographySamples.tsx

@@ -9,6 +9,7 @@ export const TypographySamples = () => {
       <Typography>
         <Article source={article}></Article>
       </Typography>
+      <div className="h-20"></div>
     </>
   );
 };