fix(docs): Several small issues fixed

-Expandable example code with preview

-SearchSelect example code corrected

-SelectList example code corrected

-Modal example code corrected

Author: tripleWdotcom

packages/docs/src/mdx/coreComponents/Expandable.mdx

@@ -72,10 +72,10 @@ The demo here is similiar to the example below.
 
 ### Examples
 
-```typescript
+```typescript type=live
 <Expandable>
   {{
-    header: expanded => <Arrow expanded={expanded} />,
+    header: expanded => <Arrow disabled={false} expanded={expanded} />,
     body: (
       <div style={{ padding: '40px', backgroundColor: 'red' }}>Content</div>
     ),

packages/docs/src/mdx/coreComponents/Modal.mdx

@@ -21,7 +21,7 @@ export const DemoComponent = ({}) => {
       <Modal
         open={open}
         onClose={unsetOpen}
-        titleId="modal-level-1"
+        title="modal-level-1"
         focusDialog={true}
         className="my-modal"
       >
@@ -40,19 +40,24 @@ export const onClick = () => {}
 ## Usage example
 
 ```typescript
-import { Dialog, Button } from 'practical-react-components-core'
+import { Modal, Button } from 'practical-react-components-core'
 
 export const DemoComponent = () => {
-  const [open, setOpen, unsetOpen] = useBoolean(false)
+  const [showModal, setShowModal] = useState(false)
+  const setModal = () => setShowModal(!showModal)
   return (
-    <Modal
-      open={open}
-      onClose={unsetOpen}
-      titleId="modal-level-1"
-      focusDialog={true}
-    >
-      Content
-    </Modal>
+    <>
+      <Button label="Open modal" onClick={setModal} variant="primary" />
+      <Modal
+        open={showModal}
+        onClose={setModal}
+        title="modal-level-1"
+        focusDialog={true}
+      >
+        CONTENT
+        <Button label="Close modal" onClick={setModal} variant="primary" />
+      </Modal>
+    </>
   )
 }
 ```

packages/docs/src/mdx/coreComponents/SearchSelect.mdx

@@ -95,7 +95,7 @@ const MyComponent = () => {
     { value: 'Africa/Banjul', label: 'Africa + Banjul' },
     { value: 'Africa/Bissau', label: 'Africa + Bissau' },
   ]
-  const [selected, setSelected] = useState([])
+  const [selected, setSelected] = useState('')
 
   return (
     <SearchSelect

packages/docs/src/mdx/coreComponents/SelectList.mdx

@@ -43,7 +43,7 @@ export const DemoComponent = ({}) => {
     { label: 'Europe/Andorra', value: 'Europe/Andorra' },
     { label: 'Europe/Astrakhan', value: 'Europe/Astrakhan' },
   ]}
-  value={() => {}}
+  value="Europe/Amsterdam"
 />
 ```