+ {url ? 
: children}
+
+ );
+}
diff --git a/src/components/Avatar/AvatarGroup.stories.tsx b/src/components/Avatar/AvatarGroup.stories.tsx
new file mode 100644
index 0000000..b71506e
--- /dev/null
+++ b/src/components/Avatar/AvatarGroup.stories.tsx
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Avatar } from "./Avatar";
+import { AvatarGroup } from "./AvatarGroup";
+
+const meta: Meta
+ {Children.map(children, (child, index) =>
+ isValidElement(child) && index + 1 <= max
+ ? cloneElement(child, {
+ ...restProps,
+ className: twMerge(avatarClassName, child.props.className),
+ variant,
+ })
+ : null,
+ )}
+
+ {count > max && (
+
+ +{count - max}
+
+ )}
+
+ );
+};
diff --git a/src/components/Avatar/index.ts b/src/components/Avatar/index.ts
new file mode 100644
index 0000000..6758a3c
--- /dev/null
+++ b/src/components/Avatar/index.ts
@@ -0,0 +1,2 @@
+export * from "./Avatar";
+export * from "./AvatarGroup";
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
new file mode 100644
index 0000000..409ab83
--- /dev/null
+++ b/src/components/Button/Button.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Button } from "./Button";
+
+const meta: Meta
+
+
+
+ {children}
+
+
+ {children}
+
+
+
+ {children}
+
+ {Boolean(onClose) && (
+
+
+
+ )}
+
+);
diff --git a/src/components/Dialog/index.ts b/src/components/Dialog/index.ts
new file mode 100644
index 0000000..6765fdb
--- /dev/null
+++ b/src/components/Dialog/index.ts
@@ -0,0 +1,5 @@
+export * from "./Dialog";
+export * from "./MobileDialog";
+export * from "./components/DialogHeader";
+export * from "./components/DialogBody";
+export * from "./components/DialogFooter";
diff --git a/src/components/Heading/Heading.stories.tsx b/src/components/Heading/Heading.stories.tsx
new file mode 100644
index 0000000..0ab19ca
--- /dev/null
+++ b/src/components/Heading/Heading.stories.tsx
@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Heading } from "./Heading";
+
+const meta: Meta
+
+ Heading--H1
+
+
+ Heading--H2
+
+
+ Heading--H3
+
+
+ Heading--H4
+
+
+ Heading--H5
+
+
+ Heading--H6
+
+
+ ),
+};
diff --git a/src/components/Heading/Heading.tsx b/src/components/Heading/Heading.tsx
new file mode 100644
index 0000000..b085f6f
--- /dev/null
+++ b/src/components/Heading/Heading.tsx
@@ -0,0 +1,33 @@
+import { createElement, forwardRef, type HTMLProps } from "react";
+import { twMerge } from "tailwind-merge";
+
+const STYLES = {
+ h1: "text-8xl leading-[7rem]",
+ h2: "text-6xl leading-[4.5rem]",
+ h3: "text-5xl leading-[3.5rem]",
+ h4: "text-[2.125rem] leading-[2.625rem] tracking-0.25",
+ h5: "text-2xl",
+ h6: "text-xl leading-8 tracking-0.15",
+} as const;
+
+type HeadingVariant = keyof typeof STYLES;
+
+export interface HeadingProps extends HTMLProps
+
+ Text--Body1
+
+
+ Text--Body2
+
+
+ Text--subtitle1
+
+
+ Text--subtitle2
+
+
+ Text--overline
+
+
+ Text--caption
+
+
+ ),
+};
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
new file mode 100644
index 0000000..5621623
--- /dev/null
+++ b/src/components/Text/Text.tsx
@@ -0,0 +1,34 @@
+import { HTMLProps, createElement, forwardRef } from "react";
+import { twMerge } from "tailwind-merge";
+
+const STYLES = {
+ body1: "text-base tracking-0.15",
+ body2: "text-sm tracking-0.15",
+ subtitle1: "text-base leading-7 tracking-0.15",
+ subtitle2: "text-sm font-bold leading-normal tracking-0.1",
+ overline: "text-xs leading-8 tracking-1 uppercase",
+ caption: "text-xs tracking-0.4",
+} as const;
+
+type Variant = keyof typeof STYLES;
+
+export interface TextProps extends HTMLProps