Merge branch 'staging'

.changeset/healthy-jokes-melt.md

@@ -0,0 +1,5 @@
+---
+"pbandj": patch
+---
+
+css modules only

src/App.tsx

@@ -1,6 +1,5 @@
 import { useState } from "react";
 import reactLogo from "./assets/react.svg";
-import "./App.css";
 import { Button } from "./Button";
 import { Div } from "./Div";
 

src/Button.tsx

@@ -1,3 +1,5 @@
+import styles from "./index.module.css";
+
 export function Button() {
-  return <button>This is the pbandj button</button>;
+  return <button className={styles.button}>This is the pbandj button</button>;
 }

src/index.module.css

@@ -0,0 +1,20 @@
+.button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  color: #fff;
+  font-family: "Inter", sans-serif;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+.button:hover {
+  border-color: #646cff;
+}
+.button:focus,
+.button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}

src/main.tsx

@@ -1,10 +1,9 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);