feat(Paper): Added the ref prop to the component (#186)

src/components/Paper/Paper.tsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource theme-ui */
-import React, { HTMLAttributes, useMemo } from "react"
+import React, { forwardRef, HTMLAttributes, useMemo } from "react"
 
 export interface PaperProps {
   /** Paper elevation */
@@ -12,13 +12,10 @@ export interface PaperProps {
   onClick?: HTMLAttributes<HTMLDivElement>["onClick"]
 }
 
-const Paper = ({
-  elevation = 1,
-  padding = 6,
-  children,
-  className,
-  onClick,
-}: PaperProps) => {
+const Paper = forwardRef<HTMLDivElement, PaperProps>(function PaperWithRef(
+  { elevation = 1, padding = 6, children, className, onClick }: PaperProps,
+  ref
+) {
   const boxShadow = useMemo(() => {
     if (elevation === 1) return "main"
     if (elevation >= 2) return "dark"
@@ -28,6 +25,7 @@ const Paper = ({
 
   return (
     <div
+      ref={ref}
       sx={{
         p: padding,
         borderRadius: 4,
@@ -40,6 +38,6 @@ const Paper = ({
       {children}
     </div>
   )
-}
+})
 
 export default Paper