diff --git a/package.json b/package.json
index 56e3297..d94ad07 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@mhmo91/schmancy",
-	"version": "0.0.10",
+	"version": "0.0.11",
 	"description": "UI library build with web components",
 	"main": "./dist/index.js",
 	"repository": {
diff --git a/src/index.ts b/src/index.ts
index 206149a..0b4a05e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,18 +1,18 @@
-export * from './autocomplete';
-export * from './busy';
-export * from './button';
-export * from './checkbox';
-export * from './form';
-export * from './input';
-export * from './layout';
-export * from './menu';
-export * from './mixin';
-export * from './notification';
-export * from './option';
-export * from './paper';
-export * from './radio-group';
-export * from './sheet';
-export * from './table';
-export * from './tabs';
-export * from './tree';
-export * from './typography';
+export * from './autocomplete'
+export * from './busy'
+export * from './button'
+export * from './checkbox'
+export * from './form'
+export * from './input'
+export * from './layout'
+export * from './menu'
+export * from './mixin'
+export * from './notification'
+export * from './option'
+export * from './paper'
+export * from './radio-group'
+export * from './sheet'
+export * from './table'
+export * from './tabs'
+export * from './tree'
+export * from './typography'
diff --git a/src/sheet/index.ts b/src/sheet/index.ts
index 39725e6..458ad83 100644
--- a/src/sheet/index.ts
+++ b/src/sheet/index.ts
@@ -1,4 +1,4 @@
-export * from './sheet'
-export * from './sheet-content'
-export * from './sheet.service'
-export * from './hook'
+export * from './hook'
+export * from './sheet-content'
+export * from './sheet.service'
+export * from './sheet'
diff --git a/src/sheet/sheet.service.ts b/src/sheet/sheet.service.ts
index f8f76de..dbf2154 100644
--- a/src/sheet/sheet.service.ts
+++ b/src/sheet/sheet.service.ts
@@ -171,5 +171,4 @@ class BottomSheetService {
 		// sheet?.remove()
 	}
 }
-const sheet = new BottomSheetService()
-export default sheet
+export const sheet = new BottomSheetService()
diff --git a/src/sheet/sheet.ts b/src/sheet/sheet.ts
index 2080f49..49d9248 100644
--- a/src/sheet/sheet.ts
+++ b/src/sheet/sheet.ts
@@ -5,12 +5,7 @@ import { classMap } from 'lit/directives/class-map.js'
 import { fromEvent, merge, takeUntil, tap } from 'rxjs'
 import { hook } from './hook'
 import style from './sheet.scss?inline'
-import bottomsheetService, {
-	HereMorty,
-	SchmancySheetPosition,
-	WhereAreYouRicky,
-	WhereAreYouRickyEvent,
-} from './sheet.service'
+import { HereMorty, SchmancySheetPosition, WhereAreYouRicky, WhereAreYouRickyEvent, sheet } from './sheet.service'
 
 @customElement('schmancy-sheet')
 export default class SchmancySheet extends TailwindElement(style) {
@@ -59,7 +54,7 @@ export default class SchmancySheet extends TailwindElement(style) {
 					const isSheetElementFocused =
 						this.sheet?.contains(event.target as Node) && document.activeElement === event.target
 					if (event.key === 'Escape' && !isSheetElementFocused) {
-						bottomsheetService.dismiss(this.uid)
+						sheet.dismiss(this.uid)
 					}
 				}),
 			),
@@ -157,7 +152,7 @@ export default class SchmancySheet extends TailwindElement(style) {
 				<div
 					class="overlay"
 					@click=${() => {
-						if (this.allowOverlyDismiss) bottomsheetService.dismiss(this.uid)
+						if (this.allowOverlyDismiss) sheet.dismiss(this.uid)
 					}}
 				></div>
 				<div class="contents" data-position=${this.position}>
diff --git a/types/index.d.ts b/types/index.d.ts
index 0bba7cb..c148047 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -15,3 +15,4 @@ export * from './sheet';
 export * from './table';
 export * from './tabs';
 export * from './tree';
+export * from './typography';
diff --git a/types/sheet/index.d.ts b/types/sheet/index.d.ts
index 8fffff5..e3ea786 100644
--- a/types/sheet/index.d.ts
+++ b/types/sheet/index.d.ts
@@ -1,4 +1,4 @@
-export * from './sheet';
+export * from './hook';
 export * from './sheet-content';
 export * from './sheet.service';
-export * from './hook';
+export * from './sheet';
diff --git a/types/sheet/sheet.service.d.ts b/types/sheet/sheet.service.d.ts
index 2c69e30..78f5c6c 100644
--- a/types/sheet/sheet.service.d.ts
+++ b/types/sheet/sheet.service.d.ts
@@ -39,5 +39,5 @@ declare class BottomSheetService {
     open(target: BottomSheeetTarget): void;
     close(uid?: string): void;
 }
-declare const sheetService: BottomSheetService;
-export default sheetService;
+export declare const sheet: BottomSheetService;
+export {};
diff --git a/types/typography/index.d.ts b/types/typography/index.d.ts
new file mode 100644
index 0000000..7a63a58
--- /dev/null
+++ b/types/typography/index.d.ts
@@ -0,0 +1 @@
+export * from './typography';
diff --git a/types/typography/typography.d.ts b/types/typography/typography.d.ts
new file mode 100644
index 0000000..2dfb001
--- /dev/null
+++ b/types/typography/typography.d.ts
@@ -0,0 +1,41 @@
+declare const SchmancyTypography_base: import("..").Constructor<CustomElementConstructor> & import("..").Constructor<import("@schmancy/mixin/tailwind/tailwind.mixin").ITailwindElementMixin> & import("..").Constructor<import("lit").LitElement> & import("..").Constructor<import("..").IBaseMixin>;
+/**
+ * @element schmancy-typography
+ * @slot - The text for the typography.
+ */
+export declare class SchmancyTypography extends SchmancyTypography_base {
+    /**
+     * @attr {primary |secondary |success |error |warning } color - The color of the typography.
+     */
+    color: 'primary' | 'primary-muted' | 'secondary' | 'success' | 'error' | 'warning' | 'white' | null;
+    /**
+     * @attr {display | headline | title | body | label } type - The type of the typography.
+     */
+    type: 'display' | 'headline' | 'title' | 'body' | 'label';
+    /**
+     * @attr token - The token of the typography.
+     * @default medium
+     * @type {'small' |'medium' |'large'}
+     */
+    token: 'small' | 'medium' | 'large';
+    /**
+     * @attr
+     * @default left
+     * @type {'left' |'center' |'right'}
+     */
+    align: 'left' | 'center' | 'justify' | 'right';
+    /**
+     * @attr
+     * @default normal
+     * @type {'normal' |'bold'}
+     * @public
+     */
+    weight: 'normal' | 'bold';
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-typography': SchmancyTypography;
+    }
+}
+export {};