From f920864baa7be710f8aa91c0183c0e2488f51578 Mon Sep 17 00:00:00 2001
From: Lachlan Campbell <lachlanjc@hey.com>
Date: Thu, 30 Dec 2021 00:43:22 -0500
Subject: [PATCH 1/3] sidenav: Fix props leaking to DOM on Pagination component

---
 packages/sidenav/src/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/sidenav/src/index.tsx b/packages/sidenav/src/index.tsx
index 0549aaa33..92ac17989 100644
--- a/packages/sidenav/src/index.tsx
+++ b/packages/sidenav/src/index.tsx
@@ -345,6 +345,7 @@ const PaginationLink: FunctionComponent<{
 export const Pagination: FunctionComponent<{ pathname: string }> = ({
   pathname = '',
   children,
+  sx,
   ...props
 }) => {
   const links = flattenLinks(children)
@@ -358,9 +359,9 @@ export const Pagination: FunctionComponent<{ pathname: string }> = ({
 
   return (
     <div
-      {...props}
       sx={{
         display: 'flex',
+        ...sx
       }}>
       {hasPagination && previous && React.isValidElement(previous) && (
         <PaginationLink {...previous.props} label="Previous:" />

From ae5a9dd58d9b72fe480702bf9d4cc31a69f9ac70 Mon Sep 17 00:00:00 2001
From: Lachlan Campbell <lachlanjc@hey.com>
Date: Thu, 30 Dec 2021 01:09:57 -0500
Subject: [PATCH 2/3] Remove sx prop

---
 packages/sidenav/src/index.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/sidenav/src/index.tsx b/packages/sidenav/src/index.tsx
index 92ac17989..7810d093f 100644
--- a/packages/sidenav/src/index.tsx
+++ b/packages/sidenav/src/index.tsx
@@ -345,7 +345,6 @@ const PaginationLink: FunctionComponent<{
 export const Pagination: FunctionComponent<{ pathname: string }> = ({
   pathname = '',
   children,
-  sx,
   ...props
 }) => {
   const links = flattenLinks(children)
@@ -361,7 +360,6 @@ export const Pagination: FunctionComponent<{ pathname: string }> = ({
     <div
       sx={{
         display: 'flex',
-        ...sx
       }}>
       {hasPagination && previous && React.isValidElement(previous) && (
         <PaginationLink {...previous.props} label="Previous:" />

From 49a98e615fbc0962081ac3665c73a6bec93eb4fa Mon Sep 17 00:00:00 2001
From: Lachlan Campbell <lachlanjc@hey.com>
Date: Sat, 8 Jan 2022 18:23:46 -0500
Subject: [PATCH 3/3] Make change non-breaking

---
 packages/sidenav/src/index.tsx | 40 +++++++++++++++++++++-------------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/packages/sidenav/src/index.tsx b/packages/sidenav/src/index.tsx
index 7810d093f..9f74c7bb4 100644
--- a/packages/sidenav/src/index.tsx
+++ b/packages/sidenav/src/index.tsx
@@ -110,7 +110,8 @@ export const Sidenav = forwardRef<
           },
           styles
         ),
-      }}>
+      }}
+    >
       {open && <Overlay {...props} />}
       <MDXProvider components={components}>
         <div
@@ -170,14 +171,16 @@ export const AccordionButton = (props: {
         '&:disabled': {
           opacity: 0.25,
         },
-      }}>
+      }}
+    >
       <svg viewBox="0 0 16 16" width="12" height="12">
         <g
           sx={{
             transformOrigin: '8 8',
             transition: 'transform .1s ease-out',
           }}
-          transform={transform}>
+          transform={transform}
+        >
           <path
             stroke="currentcolor"
             strokeWidth="2"
@@ -205,7 +208,8 @@ const NavLinks: FunctionComponent<{
         listStyle: 'none',
         m: 0,
         p: 0,
-      }}>
+      }}
+    >
       {links.map((link, j) => (
         <li key={j}>
           <Link
@@ -269,20 +273,23 @@ export const AccordionNav = forwardRef<
             transform: [open ? 'translateX(0)' : 'translate(-100%)', 'none'],
             bg: ['background', 'transparent'],
             WebkitOverflowScrolling: 'touch',
-          }}>
+          }}
+        >
           <ul
             sx={{
               listStyle: 'none',
               p: 0,
               m: 0,
-            }}>
+            }}
+          >
             {links.map((link: any, i: number) => (
               <li key={i}>
                 <div
                   sx={{
                     display: 'flex',
                     alignItems: 'center',
-                  }}>
+                  }}
+                >
                   <Link
                     href={link.props.href}
                     children={link.props.children}
@@ -331,22 +338,23 @@ const PaginationLink: FunctionComponent<{
       color: 'inherit',
       textDecoration: 'none',
       fontWeight: 'bold',
-    }}>
+    }}
+  >
     <div>{label}</div>
     <div
       sx={{
         fontSize: 3,
-      }}>
+      }}
+    >
       {children}
     </div>
   </a>
 )
 
-export const Pagination: FunctionComponent<{ pathname: string }> = ({
-  pathname = '',
-  children,
-  ...props
-}) => {
+export const Pagination: FunctionComponent<{
+  pathname: string
+  components?: any
+}> = ({ pathname = '', children, components, ...props }) => {
   const links = flattenLinks(children)
   const index = links.findIndex(
     (link) =>
@@ -358,9 +366,11 @@ export const Pagination: FunctionComponent<{ pathname: string }> = ({
 
   return (
     <div
+      {...props}
       sx={{
         display: 'flex',
-      }}>
+      }}
+    >
       {hasPagination && previous && React.isValidElement(previous) && (
         <PaginationLink {...previous.props} label="Previous:" />
       )}