feat: import css from CDN (#8)

---------
Co-authored-by: Marcus Schiesser <[email protected]>

.changeset/empty-singers-shake.md

@@ -0,0 +1,5 @@
+---
+'@llamaindex/pdf-viewer': minor
+---
+
+extract css

README.md

@@ -13,6 +13,7 @@ npm install @llamaindex/pdf-viewer
 ```jsx
 import React from 'react';
 
+import '@llamaindex/pdf-viewer/index.css';
 import { PDFViewer, PdfFocusProvider } from '@llamaindex/pdf-viewer';
 
 const file = {

package.json

@@ -12,6 +12,7 @@
   "source": "./src/index.ts",
   "types": "./dist/cjs/index.d.ts",
   "exports": {
+    "./index.css": "./dist/esm/view/index.css",
     ".": {
       "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js"

src/view/PDFViewer.tsx

@@ -3,7 +3,6 @@ import usePDFViewer from '../hooks/usePdfViewer.js';
 import type { PdfDocument } from '../types/document.js';
 import MemoizedVirtualizedPDF from './VirtualizedPdf.js';
 import PDFOptionsBar from './PdfOptionsBar.js';
-import './index.css';
 import { clsx } from 'clsx';
 
 interface PDFViewerProps {

src/view/VirtualizedPdf.tsx

@@ -4,8 +4,6 @@ import type { CSSProperties } from 'react';
 import React, { forwardRef, memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { Document, Page, pdfjs } from 'react-pdf';
-import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
-import 'react-pdf/dist/esm/Page/TextLayer.css';
 import { VariableSizeList as List } from 'react-window';
 import { multiHighlight } from '../utils/multi-line-highlight.js';
 import { usePdfFocus } from '../hooks/usePdfFocus.js';

src/view/index.css

@@ -1,3 +1,6 @@
+@import '~react-pdf/dist/esm/Page/AnnotationLayer.css';
+@import '~react-pdf/dist/esm/Page/TextLayer.css';
+
 .pdf-viewer-container {
   display: flex;
   flex-direction: column;