package the graph (#563)shoubhit/eng-358-packaging-graph-component

includes:

- a package that contains a MemoryGraph component which handles fetching data and rendering the graph
- a playground to test the package

problems:

- the bundle size is huge
- the styles are kinda broken? we are using [https://www.npmjs.com/package/vite-plugin-libgi-inject-css](https://www.npmjs.com/package/vite-plugin-lib-inject-css) to inject the styles

![image.png](https://app.graphite.com/user-attachments/assets/cb1822c5-850a-45a2-9bfa-72b73436659f.png)

1 files changed, 24 insertions, 0 deletions

diff --git a/packages/memory-graph/src/ui/heading.css.ts b/packages/memory-graph/src/ui/heading.css.ts
new file mode 100644
index 00000000..128d97a6
--- /dev/null
+++ b/packages/memory-graph/src/ui/heading.css.ts
@@ -0,0 +1,24 @@
+import { style } from "@vanilla-extract/css";
+import { themeContract } from "../styles/theme.css";
+
+/**
+ * Responsive heading style with bold weight
+ */
+export const headingH3Bold = style({
+	fontSize: "0.625rem", // 10px
+	fontWeight: themeContract.typography.fontWeight.bold,
+	lineHeight: "28px",
+	letterSpacing: "-0.4px",
+
+	"@media": {
+		"screen and (min-width: 640px)": {
+			fontSize: themeContract.typography.fontSize.xs, // 12px
+		},
+		"screen and (min-width: 768px)": {
+			fontSize: themeContract.typography.fontSize.sm, // 14px
+		},
+		"screen and (min-width: 1024px)": {
+			fontSize: themeContract.typography.fontSize.base, // 16px
+		},
+	},
+});