@xaypay/tui 0.0.73 → 0.0.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.73",
+  "version": "0.0.75",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/components/icon/Close.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgClose = ({ title, titleId, ...props }) => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="m10.47 8.95 7.29-7.29A1 1 0 0 0 16.35.25L9.06 7.54 1.77.24A1 1 0 0 0 .36 1.65l7.29 7.3-7.3 7.29a.999.999 0 1 0 1.41 1.41l7.3-7.29 7.29 7.29a1 1 0 0 0 1.41-1.41l-7.29-7.29Z"
+      fill="#3C393E"
+    />
+  </svg>
+);
+export default SvgClose;

package/src/components/icon/CloseSlide.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgCloseSlide = ({ title, titleId, ...props }) => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="m10.47 8.95 7.29-7.29A1 1 0 0 0 16.35.25L9.06 7.54 1.77.24A1 1 0 0 0 .36 1.65l7.29 7.3-7.3 7.29a.999.999 0 1 0 1.41 1.41l7.3-7.29 7.29 7.29a1 1 0 0 0 1.41-1.41l-7.29-7.29Z"
+      fill="#fff"
+    />
+  </svg>
+);
+export default SvgCloseSlide;

package/src/components/icon/Next.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+const SvgNext = ({ title, titleId, ...props }) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Zm3.4-11.443a.854.854 0 0 0 .198-.548.855.855 0 0 0-.146-.539l-4.137-5.134a.857.857 0 0 0-1.251-.12.856.856 0 0 0-.129 1.207l3.701 4.586-3.838 4.587a.856.856 0 0 0 .739 1.4.858.858 0 0 0 .58-.305l4.284-5.134Z"
+      fill="#fff"
+    />
+  </svg>
+);
+export default SvgNext;

package/src/components/icon/Prev.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+const SvgPrev = ({ title, titleId, ...props }) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0ZM8.6 11.443a.855.855 0 0 0-.198.548c-.013.19.038.38.146.539l4.137 5.133a.857.857 0 0 0 1.251.12.856.856 0 0 0 .129-1.206l-3.701-4.586 3.838-4.587a.856.856 0 0 0-.739-1.4.858.858 0 0 0-.58.305l-4.284 5.134Z"
+      fill="#fff"
+    />
+  </svg>
+);
+export default SvgPrev;

package/src/components/icon/index.js

@@ -1,2 +1 @@
-export { default as Jpeg } from "./Jpeg";
-export { default as Png } from "./Png";
+

package/src/components/modal/index.js

@@ -1,95 +1,322 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import classnames from "classnames";
-import styles from "./modal.module.css";
-import Icon from "../icon/Icon";
-import { Typography, TypographyType } from "../typography";
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import { compereConfigs } from "./../../utils";
+import styles from './modal.module.css';
+
+import SvgNext from './../icon/Next';
+import SvgPrev from './../icon/Prev';
+import SvgCloseIcon from './../icon/CloseIcon';
+import SvgCloseSlide from './../icon/CloseSlide';
 
 export const Modal = ({
-    setShow,
-    headerText,
-    className,
     type,
     data,
+    radius,
+    padding,
+    setShow,
     selected,
     children,
+    minWidth,
+    minHeight,
+    className,
+    headerText,
+    imageWidth,
+    headerSize,
+    imageHeight,
+    headerColor,
+    headerWeight,
+    headerHeight,
+    backgroundColor,
+    layerBackgroundColor,
 }) => {
-    const classProps = classnames(styles.modal, className);
-    const [select, setSelect] = useState(selected);
+    const [select, setSelect] = useState(0);
+    const [innerData, setInnerData] = useState([]);
+
+    const configStyles = compereConfigs();
+    const classProps = classnames(className);
+
+    const handleCloseModal = () => {
+        setShow(false)
+    };
+
+    const handleStopClosing = (e) => {
+        e.stopPropagation();
+    };
+
+    const handleGoTo = (e) => {
+        const goTo = e.target.getAttribute('data-go');
+        if (goTo === 'next') {
+            if (select >= data.length - 1) {
+                setSelect(0);
+            } else {
+                setSelect(select + 1);
+            }
+        } else {
+            if (select <= 0) {
+                setSelect(data.length - 1);
+            } else {
+                setSelect(select - 1);
+            }
+        }
+    };
+
+    useEffect(() => {
+        if (type === 'images') {
+            if (data) {
+                if (data.length === 0) {
+                    alert('Please fill data prop');
+                } else {
+                    setInnerData(data);
+                }
+            } else {
+                alert('Please add data prop on Modal component');
+            }
+        }
+    }, [type, data, data?.length]);
+
+    useEffect(() => {
+        if (selected) {
+            if (selected <= 0) {
+                setSelect(0);
+            } else if (selected >= data.length - 1) {
+                setSelect(data.length - 1);
+            } else {
+                setSelect(selected);
+            }
+        }
+    }, [selected]);
+
+    useEffect(() => {
+        return () => {
+            setSelect(0);
+            setInnerData([]);
+        }
+    }, []);
+
     return (
-        <div className={`${styles["modal-wrap"]} modal-wrap-rem`} onClick={() => setShow(false)}>
-            {type == "content" ? (
-                <div
-                    className={`${styles["modal-content"]} modal-content-rem`}
-                    onClick={(e) => {
-                        e.stopPropagation();
-                    }}
-                >
-                    <div className={`${styles["modal-top"]} modal-top-rem`}>
-                        <div className={`${styles["modal-title"]} modal-title-rem`}>
-                            <Typography variant={TypographyType.p} color="#00236A">{headerText}</Typography>
-                        </div>
-                        <div
-                            className={`${styles["close-btn"]} close-btn-rem`}
-                            onClick={() => setShow(false)}
-                        >
-                            <i className="icon-close" />
-                        </div>
-                    </div>
-                    <div className={`${styles["modal-section"]} modal-section-rem`}>{children}</div>
-                </div>
-            ) : type == "images" ? (
+        <div
+            onClick={handleCloseModal}
+            style={{
+                top: '0px',
+                left: '0px',
+                zIndex: 999,
+                width: '100%',
+                height: '100vh',
+                position: 'fixed',
+                backgroundColor: layerBackgroundColor ? layerBackgroundColor : configStyles.MODAL.layerBackgroundColor
+            }}
+        >
+            <div
+                style={{
+                    position: 'relative',
+                    width: '100%',
+                    height: '100vh'
+                }}
+            >
                 <div
-                    className={`${styles["modal-content"]} modal-content-rem`}
-                    onClick={(e) => {
-                        e.stopPropagation();
+                    className={`${classProps} ${styles['animation__modal']}`}
+                    onClick={handleStopClosing}
+                    style={{
+                        top: '0px',
+                        left: '0px',
+                        right: '0px',
+                        bottom: '0px',
+                        margin: 'auto',
+                        maxWidth: '95%',
+                        overflow: 'auto',
+                        maxHeight: '95vh',
+                        position: 'absolute',
+                        width: 'fit-content',
+                        height: 'fit-content',
+                        boxSizing: 'border-box',
+                        borderRadius: radius ? radius : configStyles.MODAL.radius,
+                        minWidth: type === 'content' ? minWidth ? minWidth : '' : '',
+                        minHeight: type === 'content' ? minHeight ? minHeight : '' : '',
+                        padding: type === 'content' ? padding ? padding : configStyles.MODAL.padding : '10px',
+                        backgroundColor: backgroundColor ? backgroundColor : configStyles.MODAL.backgroundColor,
                     }}
                 >
                     <div
-                        className={`${styles["close-btn"]} close-btn-rem`}
-                        onClick={() => setShow(false)}
+                        style={{
+                            position: 'relative',
+                            width: '100%',
+                            height: '100%'
+                        }}
                     >
-                        <i className="icon-close" />
-                    </div>
-
-                    <div className={`${styles["modal-section"]} modal-section-rem`}>
-                        <div>
-                            {select > 1 ? (
-                                <h1 onClick={() => setSelect(select - 1)}>-</h1>
-                            ) : null}
-                            {data.map((elem) => {
-                                if (select == elem.id) {
-                                    return (
-                                        <img
-                                            width="600px"
-                                            key={elem.id}
-                                            src={elem.url}
-                                        />
-                                    );
-                                }
-                            })}
-                            {select < data.length ? (
-                                <h1
-                                    onClick={() => {
-                                        setSelect(select + 1);
+                        {
+                            type === 'content'
+                            ? 
+                                <div
+                                    style={{
+                                        width: '100%',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        height: headerHeight ? headerHeight : configStyles.MODAL.headerHeight,
+                                        justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end',
                                     }}
                                 >
-                                    +
-                                </h1>
-                            ) : null}
+                                    {
+                                        headerText && type === 'content' && <p
+                                            style={{
+                                                overflow: 'hidden',
+                                                whiteSpace: 'nowrap',
+                                                textOverflow: 'ellipsis',
+                                                margin: '0px 16px 0px 0px',
+                                                maxWidth: 'calc(100% - 30px)',
+                                                fontSize: headerSize ? headerSize : configStyles.MODAL.headerSize,
+                                                color: headerColor ? headerColor : configStyles.MODAL.headerColor,
+                                                fontWeight: headerWeight ? headerWeight : configStyles.MODAL.headerWeight
+                                            }}
+                                        >{headerText}</p>
+                                    }
+                                    <div
+                                        onClick={handleCloseModal}
+                                        style={{
+                                            width: '14px',
+                                            height: '14px',
+                                            cursor: 'pointer'
+                                        }}
+                                    >
+                                        <SvgCloseIcon />
+                                    </div>
+                                </div>
+                            : 
+                                <button
+                                    onClick={handleCloseModal}
+                                    style={{
+                                        position: 'absolute',
+                                        top: '23px',
+                                        width: '18px',
+                                        right: '23px',
+                                        height: '18px',
+                                        border: 'none',
+                                        outline: 'none',
+                                        cursor: 'pointer',
+                                        backgroundColor: 'transparent'
+                                    }}
+                                >
+                                    <SvgCloseSlide />
+                                </button>
+                        }
+                        
+                        <div
+                            style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                boxSizing: 'border-box',
+                                justifyContent: 'center',
+                                paddingTop: type === 'content' ? '10px' : '0px'
+                            }}
+                        >
+                            {
+                                type === 'content'
+                                ?
+                                    children ? children : ''
+                                :
+                                    <div
+                                        style={{
+                                            width: '100%',
+                                            display: 'flex',
+                                            alignItems: 'center'
+                                        }}
+                                    >
+                                        {
+                                            innerData && innerData.length > 0 && innerData.map((item, index) => {
+                                                if (select === index) {
+                                                    if (!item.hasOwnProperty('url')) {
+                                                        alert('Please add url property in data prop on each element');
+                                                    } else {
+                                                        return (
+                                                            <img
+                                                                style={{
+                                                                    objectFit: 'cover',
+                                                                    objectPosition: 'center',
+                                                                    borderRadius: radius ? radius : configStyles.MODAL.radius,
+                                                                    width: imageWidth ? imageWidth : configStyles.MODAL.imageWidth,
+                                                                    height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight
+                                                                }}
+                                                                src={item.url}
+                                                                key={item.id ? item.id : index}
+                                                            />
+                                                        )
+                                                    }
+                                                }
+                                            })
+                                        }
+
+                                        {
+                                            innerData && innerData.length > 1 && <>
+                                                <button
+                                                    onClick={handleGoTo}
+                                                    data-go='prev'
+                                                    style={{
+                                                        position: 'absolute',
+                                                        left: '14px',
+                                                        width: '24px',
+                                                        height: '24px',
+                                                        padding: '0px',
+                                                        border: 'none',
+                                                        outline: 'none',
+                                                        cursor: 'pointer',
+                                                        top: 'calc(50% - 12px)',
+                                                        backgroundColor: 'transparent'
+                                                    }}
+                                                >
+                                                    <SvgPrev />
+                                                </button>
+                                                <button
+                                                    onClick={handleGoTo}
+                                                    data-go='next'
+                                                    style={{
+                                                        position: 'absolute',
+                                                        width: '24px',
+                                                        right: '14px',
+                                                        height: '24px',
+                                                        border: 'none',
+                                                        padding: '0px',
+                                                        outline: 'none',
+                                                        cursor: 'pointer',
+                                                        top: 'calc(50% - 12px)',
+                                                        backgroundColor: 'transparent'
+                                                    }}
+                                                >
+                                                    <SvgNext />
+                                                </button>
+                                            </>
+                                        }
+                                    </div>
+                            }
                         </div>
                     </div>
                 </div>
-            ) : null}
+            </div>
         </div>
     );
 };
 
 Modal.propTypes = {
+    data: PropTypes.array,
+    type: PropTypes.string,
     setShow: PropTypes.func,
-    headerText: PropTypes.string,
+    radius: PropTypes.string,
+    padding: PropTypes.string,
+    selected: PropTypes.number,
+    minWidth: PropTypes.string,
+    minHeight: PropTypes.string,
     className: PropTypes.string,
-    type: PropTypes.string,
-    selected: PropTypes.string,
-    data: PropTypes.array,
+    headerText: PropTypes.string,
+    imageWidth: PropTypes.string,
+    headerSize: PropTypes.string,
+    headerColor: PropTypes.string,
+    imageHeight: PropTypes.string,
+    headerWeight: PropTypes.string,
+    headerHeight: PropTypes.string,
+    backgroundColor: PropTypes.string,
+    layerBackgroundColor: PropTypes.string,
+};
+
+Modal.defaultProps = {
+    type: 'content'
 };

package/src/components/modal/modal.module.css

@@ -1,73 +1,22 @@
-.modal-wrap {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    z-index: 9;
-    background: rgba(0,0,0,0.4);
-}
-.modal-top {
-    display: flex;
-    flex-direction: row;
-    padding: 4px 10px 4px 0;
-    width: 100%;
-    background: #fbfbfb;
-    height: 44px;
-    box-sizing: border-box;
-}
-.modal-title {
-    flex: 1 1;
-    display: flex;
-    align-items: center;
-    font-size: 20px;
-    padding-right: 20px;
-    line-height: 24px;
-    font-weight: 500;
-    color: #3C393E;
-}
-.close-btn {
-    flex: 0 0 auto;
-    width: 24px;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-}
-.modal-section {
-    flex: 1 1;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 10px 0;
-}
-.modal-content {
-    position: absolute;
-    width: fit-content;
-    padding: 10px;
-    min-height: 130px;
-    top: 110px;
-    left: 0;
-    right: 0;
-    margin: auto;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    height: auto;
-    background: rgba(255,255,255,1);
-    border-radius: 8px;
-    animation: show-popup 240ms;
-    overflow: hidden;
+.animation__modal {
+    animation: show-popup 150ms;
+    -webkit-animation: show-popup 150ms;
 }
+
 @keyframes show-popup {
     0% {
-        transform: translate3d(0, -30%, 0);
+        transform: translate3d(0, -50%, 0);
+        -webkit-transform: translate3d(0, -50%, 0);
+        -moz-transform: translate3d(0, -50%, 0);
+        -ms-transform: translate3d(0, -50%, 0);
+        -o-transform: translate3d(0, -50%, 0);
     }
     100% {
-        transform: translate3d(0, 0, 0);
         opacity: 1;
+        transform: translate3d(0, 0, 0);
+        -webkit-transform: translate3d(0, 0, 0);
+        -moz-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+        -o-transform: translate3d(0, 0, 0);
     }
 }

package/src/components/modal/modal.stories.js

@@ -1,4 +1,4 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
 import { Modal } from "./index";
 
 export default {
@@ -8,6 +8,7 @@ export default {
 
 const Template = ({ headerText, className }) => {
   const [show, setShow] = useState(false);
+  const [type, setType] = useState('content');
   const data = [
     {
       url: 'https://images.pexels.com/photos/268533/pexels-photo-268533.jpeg?cs=srgb&dl=pexels-pixabay-268533.jpg&fm=jpg',
@@ -29,17 +30,35 @@ const Template = ({ headerText, className }) => {
       url:  'https://media.istockphoto.com/id/500221043/photo/cascade-yerevan.jpg?s=612x612&w=0&k=20&c=vaULCkIZaIbetZlkFnP20ELnD8cyhlc9cRsvt-X5YAk=',
       id: 5
     }
-  ]
+  ];
+
   const handleClick = () => {
     setShow(true);
   };
+
+  const handleChangeType = () => {
+    if (type === 'content') {
+      setType('images');
+    } else {
+      setType('content');
+    }
+  };
+  
   return (
     <>
-      <button onClick={handleClick}>Click</button>
+      <button
+        onClick={handleClick}
+        style={{ cursor: 'pointer', padding: '8px', fontSize: '16px', marginRight: '10px' }}
+      >Click</button>
+      <button
+        onClick={handleChangeType}
+        style={{ cursor: 'pointer', padding: '8px', fontSize: '16px' }}
+      >Change type to {type === 'content' ? 'images' : 'content'}</button>
       {show && (
-        // <Modal type='images' selected={4} data={data} setShow={setShow} headerText={headerText} className={className} />
-        <Modal type='content' headerText="test">
-          <div>TEst</div>
+        <Modal type={type} selected={0} data={data} setShow={setShow} minHeight='400px' minWidth='600px' className={className}>
+          <p>
+            Children content
+          </p>
         </Modal>
       )}
     </>
@@ -49,6 +68,6 @@ const Template = ({ headerText, className }) => {
 export const Default = Template.bind({});
 
 Default.args = {
-  headerText: "Hi...",
+  headerText: "Modal header text",
   className: "Modal",
 };

package/src/components/newAutocomplete/NewAutocomplete.stories.js

@@ -28,7 +28,7 @@ const Template = (args) => {
         method: 'GET',
         headers: {
           'Content-Type': 'application/json',
-          'Authorization':  'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIwMjE0NzEyYTllNzQwZWMyMjNhYzE2MGQyNGVkY2UzNyIsImp0aSI6ImY2N2FjNmNiYjI2YWM3NTRhMDhhOTgxOTZkOTZjNjFjNWI3YTA1NzUyN2U4MGE3NzM0ZDJlOGFlZjNkMjY0ZmRiMGZkN2QwZjllZjA1MmE4IiwiaWF0IjoxNjgwNzYzMzU3LjUyMzI5OCwibmJmIjoxNjgwNzYzMzU3LjUyMzMwNSwiZXhwIjoxNjgwNzg4NTU3LjQ5NjQzLCJzdWIiOiJtaW5hc0BtYWlsLnJ1Iiwic2NvcGVzIjpbImVtYWlsIl19.XLp4N1C9XYnX8EITknJs-j684GkppCVrREA5ttTAEyloxCftJUEo6KQGp-2grZDZvWvwvsgD9NF5lecdPOIYuSEgp7NPgbAQ34-hRn0u6TGoC5LQI6Vjc_PijH9YoH2a2V9q58jAJrxSbwNjKsMixiHmAsahIKl_XRL1ZoDxpKDE23avnndCZZ9Fw_oe8ypkEscfgrpK9iT9EhxWXZWC9MJ-iAxHox6b6XWsVHkJg5oN5MApJt1h9h-oZQmrKNn_274z3evPChlrvSjTyqLzGWy3zlVUMgGQWBE5RsKiuUh1O3TsF4PYvANKp0a_urOFtU9Q-umyfFNlWfgoLsTtKIQE0xmlLi8Kr5OutSna-a0Eu2hzgTM47_x-cJb7ImokTxdgoh1DDODmLDKkfTTXhEQ-KNTQ4J5T8UDn6a11E6EzBEfJYOIv9eXz5bQBf5H14x4mzXEkHNeC10EAsUFH7b9JT8DPJISwazeAA5zloj39dVFVDLoJS2TvZAxMRLQuyoMSs7eEXp4i7TTWPyrDhMLJ-YUgxmbAhWfwQ9J1ULkLyzFCrmvUz4xPmeRp9gnUNCXOo52jjSVD8x5q3cokFhCEUuWP6fE_DSgChe18j5w75Xi7BjGAIHRJjYtyvJQHy0DIQf2qd6YbbKkyP4iW_PvLfJah9JTlOU1_QGhUWqc',
+          'Authorization':  'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIwMjE0NzEyYTllNzQwZWMyMjNhYzE2MGQyNGVkY2UzNyIsImp0aSI6IjRlZTI2OGU3NjhkMjA0YTdiMWM1NjU4NzE2Mjg0OTdjNTlmMmZjYjc4YzdiZTRjYTYzZGUyYjZmNjZjMzU3YjI0MzMwZjRhOTc5OGRjZDY4IiwiaWF0IjoxNjgxMzYzNDI2LjE0NDc0NywibmJmIjoxNjgxMzYzNDI2LjE0NDc1NCwiZXhwIjoxNjgxMzg4NjI2LjExODkzNywic3ViIjoibWluYXNAbWFpbC5ydSIsInNjb3BlcyI6WyJlbWFpbCJdfQ.nGU1Jf4XeVEqOHCXfDsjL-q--jTDrjlACMolSISUpviSaEDVLCI6BpY5_YYjOWRBUr4Utl_guFqpnb9jxbWdugL6_uFBANj1v0bi_g-RlzzeqF0FqlUqf1YZ_8S4c-l8nLsqfSDzPJs3nRB6oJVo7Di2O3fS_ka5MCkTXShzI6UJUZEvV4j60_QD7SmqmnDiij2rnfWt76YrNXZpDHt-zWMw6d7gD_pnX5RJ0YHUaXi2-M9ip-OcJfX4e_w7iMnckecaCfUolIO_rYNnHy6mleHX6Dimu6_niyMr0dj1ph9glv7fOHrIDwXx69AfJ4nuUQBa-G_AE9abot8cVzlPXAkwVa8WVkvH2mtzDgQuBLbQDM2VISqxO8j5jZhC9JDuXKN8TGukiBbePkWmpd9ASYaLQC02OqzZxqCaBBXCd72XMrwIynyjyTAW9t-VeraxFJgZwlqCnwZ7eTiIWSpPT7B5CLVumC24kz_ll8Tdbz4tMo0xdHNggD-hdPhciyVsaLk0q0Hx-vyIlKMS0KPez4EULQT2C3HaR5t81Pf4Qq06zLPXnKXXnoFc_p3u8TGDdqVXQBPdV1W8ck_3-hwIe-QzM5TbqTJjehiiH64QMcFTsJs--2APXNy3nBmU0D98is_eBGgHbgLJgck5v7MgYBaAaPjPf2lxtS-DF76ynQQ',
         },
       }).then((res)=> {
         return res.json()
@@ -46,5 +46,6 @@ const Template = (args) => {
 };
 export const Default = Template.bind({});
 Default.args = {
-  searchCount: 3
+  searchCount: 3,
+  selected: 'Jhon'
 }