CSS

README.md

@@ -23,6 +23,14 @@ https://github.com/user-attachments/assets/58c8cca5-878a-4e64-aa06-a8e202318f2a
 npm install @nobrainers/react-click-edit
 ```
 
+### CSS Import
+
+The component requires its base CSS file to be imported. Add the following import to your application:
+
+```tsx
+import "@nobrainers/react-click-edit/dist/style.css";
+```
+
 ## 🚀 Quick Start
 
 ```tsx
@@ -145,12 +153,23 @@ function ControlledExample() {
 
 ## 🎨 Styling
 
-The component comes with minimal default styling and can be fully customized using CSS classes. All main elements accept custom class names through props.
+The component comes with minimal default styling through its base CSS file. You can override these styles or add additional styling using CSS classes. All main elements accept custom class names through props.
+
+### Default Styling
+
+Import the default styles in your application:
+
+```tsx
+import "@nobrainers/react-click-edit/dist/style.css";
+```
+
+### Custom Styling
 
 Example with CSS modules:
 
 ```tsx
-import styles from "./styles.module.css";
+import "@nobrainers/react-click-edit/dist/style.css"; // Base styles
+import styles from "./styles.module.css"; // Your custom styles
 
 <InputClickEdit
   className={styles.wrapper}

package.json

@@ -2,7 +2,9 @@
   "name": "@nobrainers/react-click-edit",
   "version": "1.2.0",
   "description": "No Brainer input click to edit",
-  "main": "index.js",
+  "main": "dist/click-edit.umd.js",
+  "module": "dist/click-edit.es.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "build": "vite build",
     "build:map": "vite build --sourcemap",

tsconfig.json

@@ -5,8 +5,6 @@
     "lib": ["ESNext", "DOM"],
     "jsx": "react-jsx",
     "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true,
     "outDir": "dist",
     "strict": true,
     "moduleResolution": "node",

vite.config.ts

@@ -11,6 +11,7 @@ export default defineConfig({
     }),
     dts({
       insertTypesEntry: true,
+      exclude: ["**/*.test.tsx"],
     }),
   ],
   css: {