fix: store to modal children

docs/components/ThemeHelper.js

@@ -37,7 +37,7 @@ export const ThemeHelper = ({ modalStore }) => {
   return (
     <>
       <Modal ariaLabel="theme configuration" store={modalStore} title={title}>
-        <Modal.Content store={modalStore}>
+        <Modal.Content>
           <Modal.Header subtitle="Documentation for the core theme entries" title={title} />
           <Modal.Body mt="xl">
             <Box display="flex">

docs/pages/components/modal.mdx

@@ -33,7 +33,7 @@ function() {
         Open modal
       </Modal.Trigger>
       <Modal store={modal} ariaLabel="example">
-        <Modal.Content store={modal}>
+        <Modal.Content>
           <Modal.Body>
             Praesent sit amet quam ac velit faucibus dapibus. Quisque sapien ligula, rutrum quis
           aliquam nec, convallis sit amet erat. Mauris auctor blandit porta. In imperdiet rutrum
@@ -79,7 +79,7 @@ function() {
         auto
       </Modal.Trigger>
       <Modal store={modal} size={size} ariaLabel="size example">
-        <Modal.Content store={modal}>
+        <Modal.Content>
           <Modal.Body>
           Praesent sit amet quam ac velit faucibus dapibus. Quisque sapien ligula, rutrum quis
           aliquam nec, convallis sit amet erat. Mauris auctor blandit porta. In imperdiet rutrum
@@ -122,7 +122,7 @@ function() {
         Example modal
       </Modal.Trigger>
       <Modal store={modal} ariaLabel="example">
-        <Modal.Content store={modal}>
+        <Modal.Content>
           <Modal.Header title={title} subtitle={subtitle} icon={icon}/>
           <Modal.Body>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium leo orci, sed
@@ -273,7 +273,7 @@ function() {
         Example modal 2
       </Modal.Trigger>
       <Modal store={modal2} ariaLabel="example-2">
-        <Modal.Content store={modal}>
+        <Modal.Content>
           <Modal.Header title={title} subtitle={subtitle} />
           <Modal.Body>
             Praesent sit amet quam ac velit faucibus dapibus. Quisque sapien ligula, rutrum quis
@@ -309,7 +309,7 @@ function() {
         Example modal 3
       </Modal.Trigger>
       <Modal store={modal3} ariaLabel="example-3">
-        <Modal.Content store={modal}>
+        <Modal.Content>
           <Modal.Header title={title} icon={icon} />
           <Modal.Body>
             Praesent sit amet quam ac velit faucibus dapibus. Quisque sapien ligula, rutrum quis

packages/Modal/src/Content.tsx

@@ -12,7 +12,7 @@ export interface ContentOptions {
 }
 
 export type ContentProps = ContentOptions & {
-  store: UseModal
+  store?: UseModal
 }
 
 /**
@@ -21,8 +21,8 @@ export type ContentProps = ContentOptions & {
 export const Content = forwardRef<'div', ContentProps>(({ children, store, ...rest }, ref) => {
   const { borderWidths, space } = useTheme()
   const [borderOnFooter, setBorderOnFooter] = useState(false)
-  const contentElement = store.useState('contentElement')
-  const open = store.useState('open')
+  const contentElement = store?.useState('contentElement')
+  const open = store?.useState('open')
 
   const components = useMemo(
     () =>

packages/Modal/src/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Children, cloneElement } from 'react'
 import * as Ariakit from '@ariakit/react'
 import { BoxProps } from '@welcome-ui/box'
 import { As, CreateWuiProps, forwardRef } from '@welcome-ui/system'
@@ -57,7 +57,15 @@ const ModalComponent = forwardRef<'div', ModalProps>(
         size={size}
         store={store}
       >
-        {children}
+        {/* we need to pass store on child */}
+        {Children.map(children, (child: JSX.Element) => {
+          if (!child) return null
+
+          return cloneElement(child, {
+            ...child.props,
+            store,
+          })
+        })}
       </S.Dialog>
     )
   }

packages/Modal/tests/index.test.tsx

@@ -36,7 +36,7 @@ describe('<Modal>', () => {
             open
           </Modal.Trigger>
           <Modal ariaLabel="modal" store={modal}>
-            <Modal.Content store={modal}>
+            <Modal.Content>
               {shouldRender && <Modal.Body>Modal.Body exist?</Modal.Body>}
             </Modal.Content>
           </Modal>