fix: modal for gluestack-style

example/storybook-nativewind/src/components/Modal/index.themed.stories.mdx

@@ -1,5 +1,5 @@
 ---
-title: Modal | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Modal Component | Installation, Usage, and API
 
 description: A Modal is a window on top of the primary content to draw the user's attention to important information or actions. It provides a focused and interruptive way to interact with the application.
 
@@ -52,10 +52,9 @@ import {
 } from '@gluestack/design-system';
 import Wrapper from '../../core-components/themed/Wrapper';
 
-
 This is an illustration of **Modal** component.
 
-<Wrapper>
+<AppProvider>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
@@ -66,7 +65,7 @@ This is an illustration of **Modal** component.
           console.log(showModal);
           const ref = React.useRef(null);
           return (
-            <Center className='h-[300px]'>
+            <Center h={300}>
               <Button onPress={() => setShowModal(true)} ref={ref}>
                 <ButtonText>Show Modal</ButtonText>
               </Button>
@@ -95,7 +94,7 @@ This is an illustration of **Modal** component.
                       variant="outline"
                       size="sm"
                       action="secondary"
-                      className='mr-[3px]'
+                      mr="$3"
                       onPress={() => {
                         setShowModal(false);
                       }}
@@ -143,7 +142,7 @@ This is an illustration of **Modal** component.
       argsType: {},
     }}
   />
-</Wrapper>
+</AppProvider>
 
 <br />
 
@@ -570,78 +569,6 @@ Modal component is created using View component from react-native. It extends al
   </TableContainer>
 </Wrapper>
 
-
-<!--
-
-### Advanced
-
-We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.
-
-### Customizing the Modal
-
-We have a function called `createModal` which can be used to create a custom Modal component. This function takes in a configuration object which contains the styled components that you want to use for the modal. You can refer [gluestack.io/style](/style) for more information on how to use styled components.
-
-You can read more on how to animate components [here](/ui/docs/advanced/animations).
-
-#### Usage
-
-Default styling of all these components can be found in the `components/core/modal` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Modal) of the styled `Modal` components.
-
-```jsx
-// import the styles
-import {
-  Root,
-  Content,
-  CloseButton,
-  Header,
-  Footer,
-  Body,
-  Backdrop,
-} from '../components/core/modal/styled-components';
-
-// import the createModal function
-import { createModal } from '@gluestack-ui/modal';
-
-// Understanding the API
-const Modal = createModal({
-  Root,
-  Content,
-  CloseButton,
-  Header,
-  Footer,
-  Body,
-  Backdrop,
-  AnimatePresence: Content.AnimatePresence, // Can be AnimatePresence from the library you are using
-});
-
-// Using the modal component
-export default () => (
-  <Modal>
-    <ModalBackdrop />
-    <ModalContent>
-      <ModalHeader>
-        <Heading size="lg">Confirm your request</Heading>
-        <ModalCloseButton>
-          <CloseIcon />
-        </ModalCloseButton>
-      </ModalHeader>
-      <ModalBody>
-        <Text size="sm">Modal Body</Text>
-      </ModalBody>
-      <ModalFooter>
-        <Button>
-          <ButtonText></ButtonText>
-        </Button>
-        <Button>
-          <ButtonText></ButtonText>
-        </Button>
-      </ModalFooter>
-    </ModalContent>
-  </Modal>
-);
-```
--->
-
 ### Examples
 
 The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.