@app-studio/web 0.1.0

package/src/components/Modal/Modal/Modal.view.tsx

@@ -0,0 +1,169 @@
+import React, { useEffect } from 'react';
+import { Center, Vertical } from 'src/components';
+import { Horizontal } from 'src/components';
+import { Button } from 'src/components';
+import { View } from 'src/components/Layout/View/View';
+import { CloseSvg } from 'src/components/Svg';
+import { useModalStore } from 'src/store/useModalStore';
+
+import { BodyProps, ContainerProps, FooterProps, HeaderProps, OverlayProps } from '../Modal/Modal.props';
+import { ContainerShapes, OverlayAlignments } from '../Modal/Modal.style';
+import { HeaderIconSizes } from '../Modal/Modal.style';
+
+export const ModalOverlay: React.FC<OverlayProps> = ({
+  children,
+  blur,
+  isOpen = false,
+  isClosePrevented = false,
+  onClose = () => {},
+  position = 'center',
+  ...props
+}) => {
+  const setOpen = useModalStore((state: any) => state.setOpen);
+  const setOnClose = useModalStore((state: any) => state.setOnClose);
+
+  useEffect(() => {
+    setOnClose(onClose);
+    if (isOpen) setOpen();
+  });
+
+  if (!isOpen) return null;
+
+  const handleClick = () => {
+    if (!isClosePrevented) onClose();
+  };
+
+  return (
+    <Center
+      position="fixed"
+      top={0}
+      left={0}
+      width="100%"
+      height="100%"
+      zIndex={1000}
+      onPress={handleClick}
+      visibility={isOpen ? 'visible' : 'hidden'}
+    >
+      <View
+        cursor="pointer"
+        position="absolute"
+        top={0}
+        left={0}
+        zIndex={1000}
+        width="100vw"
+        height="100vh"
+        display="flex"
+        backgroundColor="blackAlpha.500"
+        backdropFilter={blur ? `blur(${blur}px)` : undefined}
+        onPress={handleClick}
+        {...OverlayAlignments[position]}
+        {...props}
+      >
+        {children}
+      </View>
+    </Center>
+  );
+};
+
+export const ModalContainer: React.FC<ContainerProps> = ({
+  children,
+  shadow,
+  isFullScreen = false,
+  shape = 'rounded',
+  ...props
+}) => {
+  const defaultShadow =
+    typeof document !== undefined
+      ? {
+          boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.3)',
+        }
+      : {
+          elevation: 5,
+          shadowColor: 'rgba(0, 0, 0, 0.3)',
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 1,
+          shadowRadius: 8,
+        };
+
+  const handleClick = (event: any) => event.stopPropagation();
+  return (
+    <Vertical
+      cursor="default"
+      overflow="hidden"
+      backgroundColor="white"
+      width={isFullScreen ? '100%' : 600}
+      height={isFullScreen ? '100%' : 'fit-content'}
+      onPress={handleClick}
+      {...(shadow ? shadow : defaultShadow)}
+      {...ContainerShapes[shape]}
+      {...props}
+    >
+      {children}
+    </Vertical>
+  );
+};
+
+export const ModalHeader: React.FC<HeaderProps> = ({
+  children,
+  buttonColor = 'theme.primary',
+  iconSize = 'md',
+  buttonPosition = 'right',
+  ...props
+}) => {
+  const onClose = useModalStore((state: any) => state.onClose);
+
+  const buttonIcon = (
+    <Button
+      onPress={onClose}
+      colorScheme="transparent"
+      icon={<CloseSvg size={HeaderIconSizes[iconSize]} color={buttonColor} />}
+      padding={0}
+      margin={0}
+      filter="none"
+      isAuto
+    />
+  );
+
+  return (
+    <Horizontal
+      justifyContent={buttonPosition === 'none' ? 'center' : 'space-between'}
+      alignItems="center"
+      paddingVertical={15}
+      paddingHorizontal={20}
+      {...props}
+    >
+      {buttonPosition === 'left' && buttonIcon}
+      {children}
+      {buttonPosition === 'right' && buttonIcon}
+    </Horizontal>
+  );
+};
+
+export const ModalBody: React.FC<BodyProps> = ({ children, ...props }) => {
+  const defaultBorder = {
+    borderBottomWidth: 2,
+    borderTopWidth: 2,
+    borderColor: 'rgba(250, 250, 250, 1)',
+    borderStyle: 'solid',
+  };
+  return (
+    <View overflowY="auto" paddingVertical={15} paddingHorizontal={20} {...defaultBorder} {...props}>
+      {children}
+    </View>
+  );
+};
+
+export const ModalFooter: React.FC<FooterProps> = ({ children, ...props }) => {
+  return (
+    <Horizontal
+      marginTop="auto"
+      alignItems="center"
+      justifyContent="flex-end"
+      paddingVertical={15}
+      paddingHorizontal={20}
+      {...props}
+    >
+      {children}
+    </Horizontal>
+  );
+};

package/src/components/Modal/Modal.md

@@ -0,0 +1,509 @@
+### **Import**
+
+```tsx static
+import { Modal } from 'app-studio';
+```
+
+### **Default**
+
+It uses the isOpen and onClose properties to display the modal.
+
+```tsx
+import { Button } from '../Button/Button';
+import { useState } from 'react';
+
+const [show, setShow] = useState(false);
+
+<>
+  <Button onPress={() => setShow(true)} isAuto>
+    Open Modal
+  </Button>
+  <Modal.Overlay isOpen={show} onClose={() => setShow(false)}>
+    <Modal.Container>
+      <Modal.Header>Title</Modal.Header>
+      <Modal.Body>
+        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+        Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
+        nisl consectetur et.
+      </Modal.Body>
+      <Modal.Footer>
+        <Button onPress={() => setShow(false)}>Cancel</Button>
+      </Modal.Footer>
+    </Modal.Container>
+  </Modal.Overlay>
+</>;
+```
+
+## **Modal Overlay**
+
+It represents the overlay or backdrop that appears behind the modal content when the modal is displayed.
+
+### **FullScreen**
+
+“**is*fullScreen***” property changes the width and height of the modal so that it fits the entire screen.
+
+```tsx
+import { Button } from '../Button/Button';
+import { useState } from 'react';
+
+const [show, setShow] = useState(false);
+
+<>
+  <Button onPress={() => setShow(true)} isAuto>
+    Full Screen
+  </Button>
+  <Modal.Overlay isOpen={show} onClose={() => setShow(false)}>
+    <Modal.Container isFullScreen>
+      <Modal.Header>Title</Modal.Header>
+      <Modal.Body>
+        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+        Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
+        nisl consectetur et.
+      </Modal.Body>
+      <Modal.Footer>
+        <Button onPress={() => setShow(false)}>Cancel</Button>
+      </Modal.Footer>
+    </Modal.Container>
+  </Modal.Overlay>
+</>;
+```
+
+### **Position**
+
+“**_position_**” places the modal in the specified direction. It has a default positioning of “center”.
+
+```tsx
+import { useState } from 'react';
+import { Button } from '../Button/Button';
+import { Horizontal } from '../Layout/Horizontal/Horizontal';
+
+const [showTop, setShowTop] = useState(false);
+const [showBottom, setShowBottom] = useState(false);
+const [showRight, setShowRight] = useState(false);
+const [showLeft, setShowLeft] = useState(false);
+const [showCenter, setShowCenter] = useState(false);
+
+<>
+  <Horizontal gap={10} wrap="nowrap">
+    <Button onPress={() => setShowTop(true)}>Top</Button>
+    <Button onPress={() => setShowBottom(true)}>Bottom</Button>
+    <Button onPress={() => setShowRight(true)}>Right</Button>
+    <Button onPress={() => setShowLeft(true)}>Left</Button>
+    <Button onPress={() => setShowCenter(true)}>Center</Button>
+  </Horizontal>
+
+  {showBottom && (
+    <Modal.Overlay isOpen={showBottom} onClose={() => setShowBottom(false)} position="bottom">
+      <Modal.Container>
+        <Modal.Header>Title</Modal.Header>
+        <Modal.Body>
+          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+          Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
+          nisl consectetur et.
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onPress={() => setShowBottom(false)}>Cancel</Button>
+        </Modal.Footer>
+      </Modal.Container>
+    </Modal.Overlay>
+  )}
+  {showTop && (
+    <Modal.Overlay isOpen={showTop} onClose={() => setShowTop(false)} position="top">
+      <Modal.Container>
+        <Modal.Header>Title</Modal.Header>
+        <Modal.Body>
+          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+          Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
+          nisl consectetur et.
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onPress={() => setShowTop(false)}>Cancel</Button>
+        </Modal.Footer>
+      </Modal.Container>
+    </Modal.Overlay>
+  )}
+  {showLeft && (
+    <Modal.Overlay isOpen={showLeft} onClose={() => setShowLeft(false)} position="left">
+      <Modal.Container>
+        <Modal.Header>Title</Modal.Header>
+        <Modal.Body>
+          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+          Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
+          nisl consectetur et.
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onPress={() => setShowLeft(false)}>Cancel</Button>
+        </Modal.Footer>
+      </Modal.Container>
+    </Modal.Overlay>
+  )}
+  {showRight && (
+    <Modal.Overlay isOpen={showRight} onClose={() => setShowRight(false)} position="right">
+      <Modal.Container>
+        <Modal.Header>Title</Modal.Header>
+        <Modal.Body>
+          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+          Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
+          nisl consectetur et.
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onPress={() => setShowRight(false)}>Cancel</Button>
+        </Modal.Footer>
+      </Modal.Container>
+    </Modal.Overlay>
+  )}
+  {showCenter && (
+    <Modal.Overlay isOpen={showCenter} onClose={() => setShowCenter(false)} position="center">
+      <Modal.Container>
+        <Modal.Header>Title</Modal.Header>
+        <Modal.Body>
+          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+          Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
+          nisl consectetur et.
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onPress={() => setShowCenter(false)}>Cancel</Button>
+        </Modal.Footer>
+      </Modal.Container>
+    </Modal.Overlay>
+  )}
+</>;
+```
+
+### **Blur**
+
+“**_blur_**” adds a blur effect on the modal overlay.
+
+```tsx
+import { useState } from 'react';
+import { Button } from '../Button/Button';
+
+const [show, setShow] = useState(false);
+
+<>
+  <Button onPress={() => setShow(true)}>Blur Overlay</Button>
+  <Modal.Overlay isOpen={show} onClose={() => setShow(false)} blur={10}>
+    <Modal.Container>
+      <Modal.Header>Title</Modal.Header>
+      <Modal.Body>
+        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+        Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
+        nisl consectetur et.
+      </Modal.Body>
+      <Modal.Footer>
+        <Button onPress={() => setShow(false)}>Cancel</Button>
+      </Modal.Footer>
+    </Modal.Container>
+  </Modal.Overlay>
+</>;
+```
+
+### **Prevent Close**
+
+“**_isClosePrevented_**” prevents the user from closing the modal when clicking outside of it.
+
+```tsx
+import { useState } from 'react';
+import { Button } from '../Button/Button';
+
+const [show, setShow] = useState(false);
+
+<>
+  <Button onPress={() => setShow(true)} isAuto>
+    Prevent Close on Overlay
+  </Button>
+  <Modal.Overlay isOpen={show} onClose={() => setShow(false)} isClosePrevented>
+    <Modal.Container>
+      <Modal.Header>Title</Modal.Header>
+      <Modal.Body>
+        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+        Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
+        nisl consectetur et.
+      </Modal.Body>
+      <Modal.Footer>
+        <Button onPress={() => setShow(false)}>Cancel</Button>
+      </Modal.Footer>
+    </Modal.Container>
+  </Modal.Overlay>
+</>;
+```
+
+## **Modal Container**
+
+It represents the main container or wrapper that holds all the content and components of a modal.
+
+### **Shapes**
+
+“**_shape_**” gives a sharp or rounded edges to the modal container.
+
+```tsx
+import { useState } from 'react';
+import { Button } from '../Button/Button';
+import { Text } from '../Text/Text';
+import { Horizontal } from '../Layout/Horizontal/Horizontal';
+
+const [showSharp, setShowSharp] = useState(false);
+const [showRounded, setShowRounded] = useState(false);
+
+<>
+  <Horizontal gap={10}>
+    <Button onPress={() => setShowSharp(true)}>Sharp</Button>
+    <Button onPress={() => setShowRounded(true)}>Rounded</Button>
+  </Horizontal>
+
+  {showSharp && (
+    <Modal.Overlay isOpen={showSharp} onClose={() => setShowSharp(false)}>
+      <Modal.Container variant="sharp">
+        <Modal.Body>
+          <Text isTruncated maxLines={2}>
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
+            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel
+            scelerisque nisl consectetur et.
+          </Text>
+        </Modal.Body>
+      </Modal.Container>
+    </Modal.Overlay>
+  )}
+  {showRounded && (
+    <Modal.Overlay isOpen={showRounded} onClose={() => setShowRounded(false)}>
+      <Modal.Container variant="rounded">
+        <Modal.Body>
+          <Text isTruncated maxLines={2}>
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
+            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel
+            scelerisque nisl consectetur et.
+          </Text>
+        </Modal.Body>
+      </Modal.Container>
+    </Modal.Overlay>
+  )}
+</>;
+```
+
+### **Shadow**
+
+“**_shadow_**” adds a shadow effect on the modal container.
+
+```tsx
+import { useState } from 'react';
+import { Button } from '../Button/Button';
+import { Text } from '../Text/Text';
+
+const [show, setShow] = useState(false);
+
+<>
+  <Button onPress={() => setShow(true)}>Shadow</Button>
+
+  {show && (
+    <Modal.Overlay isOpen={show} onClose={() => setShow(false)}>
+      <Modal.Container shadow={{ boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.6)' }}>
+        <Modal.Body>
+          <Text isTruncated maxLines={2}>
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
+            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel
+            scelerisque nisl consectetur et.
+          </Text>
+        </Modal.Body>
+      </Modal.Container>
+    </Modal.Overlay>
+  )}
+</>;
+```
+
+## **Modal Header**
+
+It represents the header section of a modal, which typically contains a title or heading and optionally other elements such as a close button or additional controls.
+
+### **Close Button Alignment**
+
+“**_buttonPosition_**” places the closing button found in the header modal in the specified direction. It has a default position of “**right**”.
+
+```tsx
+import { useState } from 'react';
+import { Button } from '../Button/Button';
+import { Horizontal } from '../Layout/Horizontal/Horizontal';
+
+const [showRight, setShowRight] = useState(false);
+const [showWithout, setShowWithout] = useState(false);
+const [showLeft, setShowLeft] = useState(false);
+
+<>
+  <Horizontal gap={10}>
+    <Button onPress={() => setShowRight(true)} isAuto>
+      Close button on the right
+    </Button>
+    <Button onPress={() => setShowWithout(true)} isAuto>
+      Without Close Button
+    </Button>
+    <Button onPress={() => setShowLeft(true)} isAuto>
+      Without Close left
+    </Button>
+  </Horizontal>
+  {showRight && (
+    <Modal.Overlay isOpen={showRight} onClose={() => setShowRight(false)}>
+      <Modal.Container>
+        <Modal.Header> Close Button</Modal.Header>
+        <Modal.Body>Cras mattis consectetur purus sit amet fermentum.</Modal.Body>
+        <Modal.Footer>
+          <Button onPress={() => setShowRight(false)}>Cancel</Button>
+        </Modal.Footer>
+      </Modal.Container>
+    </Modal.Overlay>
+  )}
+  {showWithout && (
+    <Modal.Overlay isOpen={showWithout} onClose={() => setShowWithout(false)}>
+      <Modal.Container>
+        <Modal.Header buttonPosition="none"> Close Button</Modal.Header>
+        <Modal.Body>Cras mattis consectetur purus sit amet fermentum.</Modal.Body>
+        <Modal.Footer>
+          <Button onPress={() => setShowWithout(false)}>Cancel</Button>
+        </Modal.Footer>
+      </Modal.Container>
+    </Modal.Overlay>
+  )}
+  {showLeft && (
+    <Modal.Overlay isOpen={showLeft} onClose={() => setShowLeft(false)}>
+      <Modal.Container>
+        <Modal.Header buttonPosition="left">Close Button</Modal.Header>
+        <Modal.Body>Cras mattis consectetur purus sit amet fermentum.</Modal.Body>
+        <Modal.Footer>
+          <Button onPress={() => setShowLeft(false)}>Cancel</Button>
+        </Modal.Footer>
+      </Modal.Container>
+    </Modal.Overlay>
+  )}
+</>;
+```
+
+## **Modal Body**
+
+It represents the main content area of a modal, where the primary information or user interaction elements are displayed.
+
+### **LargeContent**
+
+A vertical scroll is displayed, if the content height exceed the body height.
+
+```tsx
+import { useState } from 'react';
+import { Button } from '../Button/Button';
+import { Text } from '../Text/Text';
+
+const [show, setShow] = useState(false);
+
+<>
+  <Button onPress={() => setShow(true)}>Scroll</Button>
+  {show && (
+    <Modal.Overlay isOpen={show} onClose={() => setShow(false)}>
+      <Modal.Container>
+        <Modal.Header buttonPosition="none">
+          <Text size="lg" weight="semibold">
+            Title
+          </Text>
+        </Modal.Header>
+        <Modal.Body height="200px">
+          Cras mattis consectetur purus sit amet fermentum.Cras mattis consectetur purus sit amet fermentum.Cras mattis
+          consectetur purus sit amet fermentum.Cras mattis consectetur purus sit amet fermentum.Cras mattis consectetur
+          purus sit amet fermentum.Cras mattis consectetur purus sit amet fermentum.Cras mattis consectetur purus sit
+          amet fermentum.Cras mattis consectetur purus sit amet fermentum.Cras mattis consectetur purus sit amet Cras
+          mattis consectetur purus sit amet fermentum.Cras mattis consectetur purus sit amet fermentum.Cras mattis
+          consectetur purus sit amet fermentum.Cras mattis consectetur purus sit amet fermentum.Cras mattis consectetur
+          purus sit amet fermentum.Cras mattis consectetur purus sit amet fermentum.Cras mattis consectetur purus sit
+          amet fermentum.Cras mattis consectetur purus sit amet fermentum.Cras mattis consectetur purus sit amet
+          fermentum.Cras mattis consectetur purus sit amet fermentum.
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onPress={() => setShow(false)}>Cancel</Button>
+        </Modal.Footer>
+      </Modal.Container>
+    </Modal.Overlay>
+  )}
+</>;
+```
+
+## **Modal Footer**
+
+It represents the footer section of a modal, which typically contains buttons or controls for actions related to the modal's content.
+
+```tsx
+import { useState } from 'react';
+import { Button } from '../Button/Button';
+import { Text } from '../Text/Text';
+
+const [show, setShow] = useState(false);
+
+<>
+  <Button onPress={() => setShow(true)}>Footer</Button>
+  {show && (
+    <Modal.Overlay isOpen={show} onClose={() => setShow(false)}>
+      <Modal.Container>
+        <Modal.Header buttonPosition="none">
+          <Text size="lg" weight="semibold">
+            Title
+          </Text>
+        </Modal.Header>
+        <Modal.Body height="200px">
+          Cras mattis consectetur purus sit amet fermentum.Cras mattis consectetur purus sit amet fermentum.Cras mattis
+          consectetur purus sit amet fermentum.Cras mattis consectetur purus sit amet fermentum.Cras mattis consectetur
+          purus sit amet fermentum.
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onPress={() => setShow(false)}>Cancel</Button>
+        </Modal.Footer>
+      </Modal.Container>
+    </Modal.Overlay>
+  )}
+</>;
+```
+
+## **Types**
+
+```tsx static
+type Position = 'top' | 'left' | 'right' | 'bottom' | 'center';
+```
+
+```tsx static
+type Shape = 'sharp' | 'rounded';
+```
+
+```tsx static
+type CloseButtonPosition = 'left' | 'right' | 'none';
+```
+
+```tsx static
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+```
+
+## **Default Styles**
+
+#### **OverlayAlignments**
+
+```tsx static
+const OverlayAlignments: Record<Position, CSSProperties> = {
+  center: { justifyContent: 'center', alignItems: 'center' },
+  top: { justifyContent: 'center' },
+  right: { justifyContent: 'flex-end', alignItems: 'center' },
+  bottom: { justifyContent: 'center', alignItems: 'flex-end' },
+  left: { alignItems: 'center' },
+};
+```
+
+#### **ContainerShapes**
+
+```tsx static
+const ContainerShapes: Record<Shape, CSSProperties> = {
+  sharp: { borderRadius: 0 },
+  rounded: { borderRadius: 4 },
+};
+```
+
+#### **HeaderIconSizes**
+
+```tsx static
+const HeaderIconSizes: Record<Size, number> = {
+  xs: 12,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 28,
+};
+```

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { ModalType } from './Modal/Modal.props';
+import { ModalBody, ModalContainer, ModalFooter, ModalHeader, ModalOverlay } from './Modal/Modal.view';
+
+/**
+ * It is a custom content overlay that appears on top of the main screen.
+ */
+// eslint-disable-next-line react/prop-types
+export const Modal: ModalType = ({ children }) => <>{children}</>;
+
+Modal.Overlay = ModalOverlay;
+Modal.Container = ModalContainer;
+Modal.Header = ModalHeader;
+Modal.Body = ModalBody;
+Modal.Footer = ModalFooter;
+
+export default Modal;