From b52e4851eca1aa9ccf79fb72ae1b5ab967978787 Mon Sep 17 00:00:00 2001
From: Anthony Mignone <129005183+anthonymig88@users.noreply.github.com>
Date: Thu, 25 Jul 2024 15:33:45 -0400
Subject: [PATCH] Update _collapsible_custom_main.jsx

---
 .../docs/_collapsible_custom_main.jsx         | 39 +++++++++++--------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx b/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx
index 34e2ae2754..13b54776dc 100644
--- a/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx
+++ b/playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from '../..'
 
 const CollapsibleCustomMain = (props) => {
@@ -8,52 +9,52 @@ const CollapsibleCustomMain = (props) => {
     <>
       <Collapsible collapsed={isCollapsed}>
         <Flex
-          align="center"
-          gap="sm"
-          justify="between"
-          position="sticky"
-          top="0"
-          cursor="pointer"
-          htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
-          >
+            align="center"
+            cursor="pointer"
+            gap="sm"
+            htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
+            justify="between"
+            position="sticky"
+            top="0"
+        >
           <Title 
-            dark={props.dark} 
-            size={4} 
-            text="Custom Main Section" />
+              dark={props.dark} 
+              size={4} 
+              text="Custom Main Section" />
         </Flex>
         <Collapsible.Content 
-          padding="none">
+            padding="none">
           <div>
             <List>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
             </List>
           </div>
@@ -63,4 +64,8 @@ const CollapsibleCustomMain = (props) => {
   )
 }
 
+CollapsibleCustomMain.propTypes = {
+  dark: PropTypes.bool,
+}
+
 export default CollapsibleCustomMain