@app-studio/web 0.1.5 → 0.1.6

package/src/components/Modal/Modal.md

@@ -1,509 +0,0 @@
-### **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 onClick={() => 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 onClick={() => 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 onClick={() => 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 onClick={() => 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 onClick={() => setShowTop(true)}>Top</Button>
-    <Button onClick={() => setShowBottom(true)}>Bottom</Button>
-    <Button onClick={() => setShowRight(true)}>Right</Button>
-    <Button onClick={() => setShowLeft(true)}>Left</Button>
-    <Button onClick={() => 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 onClick={() => 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 onClick={() => 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 onClick={() => 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 onClick={() => 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 onClick={() => 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 onClick={() => 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 onClick={() => 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 onClick={() => 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 onClick={() => 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 onClick={() => setShowSharp(true)}>Sharp</Button>
-    <Button onClick={() => 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 onClick={() => 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 onClick={() => setShowRight(true)} isAuto>
-      Close button on the right
-    </Button>
-    <Button onClick={() => setShowWithout(true)} isAuto>
-      Without Close Button
-    </Button>
-    <Button onClick={() => 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 onClick={() => 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 onClick={() => 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 onClick={() => 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 onClick={() => 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 onClick={() => 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 onClick={() => 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 onClick={() => 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

@@ -1,18 +0,0 @@
-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;

package/src/components/Svg/ArrowDown.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-
-import { Center } from '../Layout/Center/Center';
-
-interface SvgProps {
-  size?: number;
-  color?: string;
-  [x: string]: any;
-}
-
-export const ArrowDownSvg: React.FC<SvgProps> = ({ size = 64, color = 'white', ...props }) => (
-  <Center width={`${size}px`} height={`${size}px`}>
-    <svg viewBox="0 -4.5 20 20" version="1.1" fill="#000000" {...props}>
-      <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
-      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
-      <g id="SVGRepo_iconCarrier">
-        <title>arrow_down [#338]</title> <desc>Created with Sketch.</desc>
-        <defs> </defs>
-        <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-          <g id="Dribbble-Light-Preview" transform="translate(-220.000000, -6684.000000)" fill="#000000">
-            <g id="icons" transform="translate(56.000000, 160.000000)">
-              <path
-                d="M164.292308,6524.36583 L164.292308,6524.36583 C163.902564,6524.77071 163.902564,6525.42619 164.292308,6525.83004 L172.555873,6534.39267 C173.33636,6535.20244 174.602528,6535.20244 175.383014,6534.39267 L183.70754,6525.76791 C184.093286,6525.36716 184.098283,6524.71997 183.717533,6524.31405 C183.328789,6523.89985 182.68821,6523.89467 182.29347,6524.30266 L174.676479,6532.19636 C174.285736,6532.60124 173.653152,6532.60124 173.262409,6532.19636 L165.705379,6524.36583 C165.315635,6523.96094 164.683051,6523.96094 164.292308,6524.36583"
-                id="arrow_down-[#338]"
-              ></path>
-            </g>
-          </g>
-        </g>
-      </g>
-    </svg>
-  </Center>
-);

package/src/components/Svg/ArrowUp.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-
-import { Center } from '../Layout/Center/Center';
-
-interface SvgProps {
-  size?: number;
-  color?: string;
-  [x: string]: any;
-}
-
-export const ArrowUpSvg: React.FC<SvgProps> = ({ size = 64, color = 'white', ...props }) => (
-  <Center width={`${size}px`} height={`${size}px`}>
-    <svg width={`${size}px`} height={`${size}px`} viewBox="0 -4.5 20 20" version="1.1" fill="#000000" {...props}>
-      <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
-      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
-      <g id="SVGRepo_iconCarrier">
-        <title>arrow_up [#337]</title> <desc>Created with Sketch.</desc>
-        <defs> </defs>
-        <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-          <g id="Dribbble-Light-Preview" transform="translate(-260.000000, -6684.000000)" fill="#000000">
-            <g id="icons" transform="translate(56.000000, 160.000000)">
-              <path
-                d="M223.707692,6534.63378 L223.707692,6534.63378 C224.097436,6534.22888 224.097436,6533.57338 223.707692,6533.16951 L215.444127,6524.60657 C214.66364,6523.79781 213.397472,6523.79781 212.616986,6524.60657 L204.29246,6533.23165 C203.906714,6533.6324 203.901717,6534.27962 204.282467,6534.68555 C204.671211,6535.10081 205.31179,6535.10495 205.70653,6534.69695 L213.323521,6526.80297 C213.714264,6526.39807 214.346848,6526.39807 214.737591,6526.80297 L222.294621,6534.63378 C222.684365,6535.03868 223.317949,6535.03868 223.707692,6534.63378"
-                id="arrow_up-[#337]"
-              ></path>
-            </g>
-          </g>
-        </g>
-      </g>
-    </svg>
-  </Center>
-);

package/src/components/Svg/Check.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-
-import { Center } from '../Layout/Center/Center';
-
-interface SvgProps {
-  size?: number;
-  color?: string;
-  [x: string]: any;
-}
-
-export const CheckSvg: React.FC<SvgProps> = ({ size = 64, color = 'white', ...props }) => (
-  <Center width={`${size}px`} height={`${size}px`}>
-    <svg
-      width={`${size}px`}
-      height={`${size}px`}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g id="SVGRepo_bgCarrier" strokeWidth="0" />
-      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round" stroke="#CCCCCC" strokeWidth="0.048" />
-      <g id="SVGRepo_iconCarrier">
-        <path d="M17.0001 9L10 16L7 13" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-      </g>
-    </svg>
-  </Center>
-);

package/src/components/Svg/Close.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-
-import { Center } from '../Layout/Center/Center';
-
-interface SvgProps {
-  size?: number;
-  color?: string;
-  [x: string]: any;
-}
-
-export const CloseSvg: React.FC<SvgProps> = ({ size = 64, color = 'white', ...props }) => (
-  <Center width={`${size}px`} height={`${size}px`}>
-    <svg
-      width={`${size}px`}
-      height={`${size}px`}
-      viewBox="0 0 1024 1024"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="#000000"
-      {...props}
-    >
-      <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
-      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
-      <g id="SVGRepo_iconCarrier">
-        <path
-          fill={color}
-          d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"
-        ></path>
-      </g>
-    </svg>
-  </Center>
-);

package/src/components/Svg/CloseEye.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-
-import { Center } from '../Layout/Center/Center';
-
-interface SvgProps {
-  size?: number;
-  color?: string;
-  [x: string]: any;
-}
-
-export const CloseEyeSvg: React.FC<SvgProps> = ({ size = 64, color = '#2F4858', ...props }) => (
-  <Center width={`${size}px`} height={`${size}px`}>
-    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
-      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
-      <g id="SVGRepo_iconCarrier">
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M19.7071 5.70711C20.0976 5.31658 20.0976 4.68342 19.7071 4.29289C19.3166 3.90237 18.6834 3.90237 18.2929 4.29289L14.032 8.55382C13.4365 8.20193 12.7418 8 12 8C9.79086 8 8 9.79086 8 12C8 12.7418 8.20193 13.4365 8.55382 14.032L4.29289 18.2929C3.90237 18.6834 3.90237 19.3166 4.29289 19.7071C4.68342 20.0976 5.31658 20.0976 5.70711 19.7071L9.96803 15.4462C10.5635 15.7981 11.2582 16 12 16C14.2091 16 16 14.2091 16 12C16 11.2582 15.7981 10.5635 15.4462 9.96803L19.7071 5.70711ZM12.518 10.0677C12.3528 10.0236 12.1792 10 12 10C10.8954 10 10 10.8954 10 12C10 12.1792 10.0236 12.3528 10.0677 12.518L12.518 10.0677ZM11.482 13.9323L13.9323 11.482C13.9764 11.6472 14 11.8208 14 12C14 13.1046 13.1046 14 12 14C11.8208 14 11.6472 13.9764 11.482 13.9323ZM15.7651 4.8207C14.6287 4.32049 13.3675 4 12 4C9.14754 4 6.75717 5.39462 4.99812 6.90595C3.23268 8.42276 2.00757 10.1376 1.46387 10.9698C1.05306 11.5985 1.05306 12.4015 1.46387 13.0302C1.92276 13.7326 2.86706 15.0637 4.21194 16.3739L5.62626 14.9596C4.4555 13.8229 3.61144 12.6531 3.18002 12C3.6904 11.2274 4.77832 9.73158 6.30147 8.42294C7.87402 7.07185 9.81574 6 12 6C12.7719 6 13.5135 6.13385 14.2193 6.36658L15.7651 4.8207ZM12 18C11.2282 18 10.4866 17.8661 9.78083 17.6334L8.23496 19.1793C9.37136 19.6795 10.6326 20 12 20C14.8525 20 17.2429 18.6054 19.002 17.0941C20.7674 15.5772 21.9925 13.8624 22.5362 13.0302C22.947 12.4015 22.947 11.5985 22.5362 10.9698C22.0773 10.2674 21.133 8.93627 19.7881 7.62611L18.3738 9.04043C19.5446 10.1771 20.3887 11.3469 20.8201 12C20.3097 12.7726 19.2218 14.2684 17.6986 15.5771C16.1261 16.9282 14.1843 18 12 18Z"
-          fill={color}
-        ></path>
-      </g>
-    </svg>
-  </Center>
-);