Added font weights for light, medium, bold and extra bold

src/showroom/app.tsx

@@ -12,9 +12,11 @@ import { BadgeExample } from './components/badge'
 import { TooltipExample } from './components/tooltip'
 import { TabsExample } from './components/tabs'
 import { CalendarExample } from './components/calendar'
+import { TypographyExample } from './components/typography'
 
 export function App(): JSX.Element {
   return <div className="grid grid-cols-2 gap-4 gap-y-8 max-w-[900px] m-10">
+    <TypographyExample />
     <ButtonExample />
     <InputExample />
     <PopoverExample />

src/showroom/components/typography.tsx

@@ -0,0 +1,62 @@
+import { Header } from '../header'
+import { Code } from '../code'
+
+export function TypographyExample(): JSX.Element {
+  const exampleString = 'å ä æ ö ø Þ ß Å Ä Æ Ö Ø þ'
+
+  return <>
+    <Header>Typography</Header>
+
+    <div>
+      <div className="font-light">
+        Light text<br />
+        {exampleString}
+      </div>
+    </div>
+    <Code code={`<div className="font-light">
+Normal text
+</div>`} />
+
+    <div>
+      <div className="font-normal">
+        Normal text<br />
+        {exampleString}
+      </div>
+    </div>
+    <Code code={`<div className="font-normal">
+Normal text
+</div>`} />
+
+    <div>
+      <div className="font-medium">
+        Medium text<br />
+        {exampleString}
+      </div>
+    </div>
+    <Code code={`<div className="font-medium">
+Medium text
+</div>`} />
+
+    <div>
+      <div className="font-bold">
+        Bold text<br />
+        {exampleString}
+      </div>
+    </div>
+    <Code code={`<div className="font-bold">
+Bold text
+</div>`} />
+
+    <div>
+      <div className="font-extrabold">
+        Extra bold text<br />
+        {exampleString}
+      </div>
+    </div>
+    <Code code={`<div className="font-extrabold">
+Extra bold text
+</div>`} />
+
+
+  </>
+}

vite.config.ts

@@ -44,7 +44,7 @@ export default defineConfig({
           dest: './styles'
         },
         {
-          src: 'node_modules/@fontsource/inter/files/inter-latin-400-normal.{woff,woff2}',
+          src: 'node_modules/@fontsource/inter/files/inter-latin-{300,400,500,700,800}-normal.{woff,woff2}',
           dest: './styles'
         }
       ]