@messenger-box/platform-browser 10.0.3-alpha.54 → 10.0.3-alpha.61

package/src/containers/Dashboard.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { styleSheet } from '../style';
 import { IntlProvider } from 'react-intl';
 import {
     useAddChannelMutation,
@@ -10,13 +9,10 @@ import {
 import { MenuHeader } from '../components/dashboard/menu_header';
 import { Modals } from '../components/dashboard/modals';
 import { DirectModal } from '../components/dashboard/modals/direct_modal';
-import { css } from '@emotion/css';
 import { BsGlobe2 } from 'react-icons/bs';
 import { useTranslation } from 'react-i18next';
 import { RiAdminFill } from 'react-icons/ri';
 import { useEffect, useState } from 'react';
-import { Avatar } from 'antd';
-import { Comment } from '@ant-design/compatible';
 import { indexOf } from 'lodash-es';
 import { useSelector } from 'react-redux';
 import { Routes, Route, Link, useNavigate, useLocation } from '@remix-run/react';
@@ -27,7 +23,6 @@ const Messenger = React.lazy(() => import('./Messenger'));
 const Dashboard: React.FC = (props: any) => {
     const [allUsers, usersToChat, currentUserRes, allChannels, getChannel] = props?.data;
     const [channelInput, setChannelInput] = useState<any>({});
-    // const [channels, setChannels] = useState([]);
     const [publicChannels, setPublicChannels] = useState([]);
     const [directChannels, setDirectChannels] = useState([]);
     const [clickedChannel, setClickedChannel] = useState<any>({});
@@ -37,10 +32,7 @@ const Dashboard: React.FC = (props: any) => {
     const [selectedValues, setSelectedValues] = useState<any>([]);
     const [directMoreModal, setDirectMoreModal] = useState<any>({ showDirectMore: false, modalPublicChannels: [] });
     const [publicChlModal, setPublicChlModal] = useState<any>({ show: false });
-    const [classes, setClasses] = useState({
-        left_bar: 'left_bar',
-        root_div: 'root_div',
-    });
+    const [isDrawerOpen, setIsDrawerOpen] = useState(false);
 
     const currentUserAuth0Id = useSelector((state: any) => state.user.authUserId);
 
@@ -48,11 +40,7 @@ const Dashboard: React.FC = (props: any) => {
     const location = useLocation();
     const { t } = useTranslation();
 
-    // const allUsers = useGetAllUsersQuery()
-    // const usersToChat = useUsersToChatQuery({ variables: { auth0Id: currentUserAuth0Id } })
-    // const currentUserRes = useCurrentUserQuery({ variables: { auth0Id: currentUserAuth0Id } })
     const { data, loading, error, refetch } = getChannel;
-    // const allChannels = useGetAllChannelQuery()
     const [addMemberToChannelMutationInput, addMemberToChannelMutationResponse] = useAddMemberToChannelMutation({
         update: (cache, mutationResult) => {
             cache.modify({
@@ -133,7 +121,6 @@ const Dashboard: React.FC = (props: any) => {
             },
         }).then((response) => {
             setClickedChannel(response.data.addMemberToChannel);
-            // setShowDirectMore(false)
             setDirectMoreModal({ ...directMoreModal, showDirectMore: false });
             sendMessagesMutationInput({
                 variables: {
@@ -143,15 +130,9 @@ const Dashboard: React.FC = (props: any) => {
                 },
             });
         });
-        // refetch().then((value => {
-        //     setChannels(value.data.channelsByUser)
-        //     setChannelInput({})
-        // }))
-        // allChannels.refetch()
     };
 
     const handleGo = () => {
-        // console.log('------directModal------', directModal)
         if (selectedValues) {
             let uids = [];
             let dName = currentUser.username + ',';
@@ -191,24 +172,23 @@ const Dashboard: React.FC = (props: any) => {
                 tempOpt.push({
                     value: { username: `${usr.username}`, uid: `${usr.id}` },
                     label: (
-                        <div style={{ cursor: 'pointer' }}>
-                            <Comment
-                                className="cmt_cls"
-                                author={'@' + usr.username}
-                                avatar={
-                                    <Avatar
-                                        style={{
-                                            backgroundColor: `#${Math.floor(Math.random() * 16777215).toString(16)}`,
-                                        }}
-                                    >
-                                        {usr.username
-                                            .match(/\b(\w)/g)
-                                            .join('')
-                                            .toUpperCase()}
-                                    </Avatar>
-                                }
-                                content={usr.email}
-                            />
+                        <div className="flex items-center space-x-4 p-2 hover:bg-gray-50 cursor-pointer">
+                            <div className="flex-shrink-0">
+                                <div
+                                    className={`w-10 h-10 rounded-full flex items-center justify-center text-white bg-[#${Math.floor(
+                                        Math.random() * 16777215,
+                                    ).toString(16)}]`}
+                                >
+                                    {usr.username
+                                        .match(/\b(\w)/g)
+                                        .join('')
+                                        .toUpperCase()}
+                                </div>
+                            </div>
+                            <div className="flex-1 min-w-0">
+                                <p className="text-sm font-medium text-gray-900">@{usr.username}</p>
+                                <p className="text-sm text-gray-500 truncate">{usr.email}</p>
+                            </div>
                         </div>
                     ),
                 });
@@ -217,9 +197,7 @@ const Dashboard: React.FC = (props: any) => {
         }
     }, [usersToChat.data, usersToChat.loading]);
 
-    const refetchCall = () => {
-        // setClickedChannel({})
-    };
+    const refetchCall = () => {};
 
     useEffect(() => {
         if (!loading) {
@@ -258,9 +236,7 @@ const Dashboard: React.FC = (props: any) => {
                     }
                 });
             }
-            // setChannels([...data.channelsByUser, ...fChannel])
             setPublicChannels(joinedChannel);
-            // setModalPublicChannels(modelChannel)
             setDirectMoreModal({ ...directMoreModal, modalPublicChannels: modelChannel });
             setDirectChannels([
                 ...data.channelsByUser.filter((chl) => chl.type === 'DIRECT'),
@@ -317,15 +293,7 @@ const Dashboard: React.FC = (props: any) => {
     }, [addedDirectChannel.loading, addedDirectChannel.data]);
 
     const handleClass = () => {
-        const oldClasses = classes;
-        if (!oldClasses.left_bar.split(' ').includes('drawer_style')) {
-            setClasses({
-                left_bar: `${oldClasses.left_bar} drawer_style`,
-                root_div: `${oldClasses.root_div} clicked_class`,
-            });
-        } else {
-            setClasses({ left_bar: 'left_bar', root_div: 'root_div' });
-        }
+        setIsDrawerOpen(!isDrawerOpen);
     };
 
     const handleSelect = (selectedOption) => {
@@ -337,14 +305,14 @@ const Dashboard: React.FC = (props: any) => {
     }, []);
 
     return (
-        <div className={css(styleSheet.customStyle)}>
-            <div className={classes.root_div}>
+        <div className="min-h-screen bg-gray-50">
+            <div className={`flex h-screen ${isDrawerOpen ? 'drawer-open' : ''}`}>
                 <DirectModal
-                    handleClose={handleClose}
+                    show={showDirectChl}
+                    onHide={() => handleClose('directChannel')}
                     handleGo={handleGo}
                     handleSelect={handleSelect}
                     selectedValues={selectedValues}
-                    showDirectChl={showDirectChl}
                     options={options}
                 />
                 <Modals
@@ -356,55 +324,53 @@ const Dashboard: React.FC = (props: any) => {
                 />
                 <MenuHeader clickedChannel={clickedChannel} handleClass={handleClass} />
                 <div
-                    className="dashboard_window"
+                    className="flex-1 flex overflow-hidden"
                     onClick={() => {
-                        if (classes.root_div.split(' ').length > 1) {
+                        if (isDrawerOpen) {
                             handleClass();
                         }
                     }}
                 >
-                    <div className={classes.left_bar}>
-                        <div className="nav-pills__container">
-                            <ul>
-                                <li id="li1" className="sidebar-section__header">
-                                    <h4>
+                    <div
+                        className={`w-64 flex-shrink-0 bg-gray-800 overflow-y-auto transition-transform duration-300 ease-in-out ${
+                            isDrawerOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
+                        }`}
+                    >
+                        <div className="flex flex-col h-full">
+                            <div className="space-y-4 py-4">
+                                <div className="px-4">
+                                    <h4 className="text-gray-400 uppercase text-sm font-semibold flex justify-between items-center">
                                         <span>{t('messenger_box_browser.PUBLIC_CHANNELS')}</span>
+                                        <button
+                                            className="text-gray-400 hover:text-white w-6 h-6 rounded flex items-center justify-center hover:bg-gray-700"
+                                            onClick={() => handleShow('publicChannel', 'Public Channel')}
+                                        >
+                                            <span>+</span>
+                                        </button>
                                     </h4>
-                                    <button
-                                        className="add-channel-btn"
-                                        onClick={() => handleShow('publicChannel', 'Public Channel')}
-                                    >
-                                        <span>+</span>
-                                    </button>
-                                </li>
-                                {/*{publicChannels.filter((item, index) => index < 3).map((chl, index) => {*/}
-                                {publicChannels.map((chl, index) => {
-                                    return (
-                                        <Link
-                                            to={{
-                                                pathname: `/o/${location.pathname.split('/')[2]}/dashboard/channel/${
+                                    <ul className="mt-2 space-y-1">
+                                        {publicChannels.map((chl, index) => (
+                                            <Link
+                                                key={chl.id}
+                                                to={`/o/${location.pathname.split('/')[2]}/dashboard/channel/${
                                                     chl.title
-                                                }`,
-                                            }}
-                                            state={{ channel: chl, currentUser: currentUserRes.data.currentUser }}
-                                        >
-                                            <li className="">
-                                                <a className="sidebar-item" onClick={() => handleChannelClick(chl)}>
-                                                    <span className="icon icon__globe">
-                                                        <BsGlobe2 />
-                                                    </span>
-                                                    <span className="sidebar-item__name">
-                                                        <span>{chl.title}</span>
-                                                    </span>
-                                                </a>
-                                            </li>
-                                        </Link>
-                                    );
-                                })}
-                                <li>
+                                                }`}
+                                                state={{ channel: chl, currentUser: currentUserRes.data.currentUser }}
+                                            >
+                                                <li className="group">
+                                                    <a
+                                                        className="flex items-center px-2 py-2 text-gray-300 rounded-md hover:bg-gray-700 hover:text-white group-hover:bg-gray-700"
+                                                        onClick={() => handleChannelClick(chl)}
+                                                    >
+                                                        <BsGlobe2 className="mr-2 h-5 w-5" />
+                                                        <span className="truncate">{chl.title}</span>
+                                                    </a>
+                                                </li>
+                                            </Link>
+                                        ))}
+                                    </ul>
                                     <button
-                                        id="sidebarPublicChannelsMore"
-                                        className="nav-more"
+                                        className="mt-2 text-sm text-gray-400 hover:text-white w-full text-left px-2 py-1"
                                         onClick={() =>
                                             setDirectMoreModal({
                                                 ...directMoreModal,
@@ -412,112 +378,81 @@ const Dashboard: React.FC = (props: any) => {
                                             })
                                         }
                                     >
-                                        <span>{t('messenger_box_browser.more')}</span>
+                                        {t('messenger_box_browser.more')}
                                     </button>
-                                </li>
-                            </ul>
-                            <ul>
-                                <li className="sidebar-section__header">
-                                    <h4>
+                                </div>
+
+                                <div className="px-4">
+                                    <h4 className="text-gray-400 uppercase text-sm font-semibold flex justify-between items-center">
                                         <span>{t('messenger_box_browser.PRIVATE_CHANNELS')}</span>
+                                        <button className="text-gray-400 hover:text-white w-6 h-6 rounded flex items-center justify-center hover:bg-gray-700">
+                                            <span>+</span>
+                                        </button>
                                     </h4>
-                                    <button className="add-channel-btn">
-                                        <span>+</span>
-                                    </button>
-                                </li>
-                            </ul>
-                            <ul>
-                                <li className="sidebar-section__header">
-                                    <h4>
+                                </div>
+
+                                <div className="px-4">
+                                    <h4 className="text-gray-400 uppercase text-sm font-semibold flex justify-between items-center">
                                         <span>{t('messenger_box_browser.DIRECT_MESSAGES')}</span>
+                                        <button
+                                            className="text-gray-400 hover:text-white w-6 h-6 rounded flex items-center justify-center hover:bg-gray-700"
+                                            onClick={() => handleShow('directChannel')}
+                                        >
+                                            <span>+</span>
+                                        </button>
                                     </h4>
-                                    <button className="add-channel-btn" onClick={() => handleShow('directChannel')}>
-                                        <span>+</span>
-                                    </button>
-                                </li>
-                                {directChannels.map((cnl) => {
-                                    return (
-                                        <Link
-                                            to={{
-                                                pathname: `/o/${location.pathname.split('/')[2]}/dashboard/message/${
+                                    <ul className="mt-2 space-y-1">
+                                        {directChannels.map((cnl) => (
+                                            <Link
+                                                key={cnl.id}
+                                                to={`/o/${location.pathname.split('/')[2]}/dashboard/message/${
                                                     cnl.displayName.split('_').length === 2
                                                         ? cnl.displayName.split('_')[0].split('-')[0] !== currentUser.id
                                                             ? cnl.displayName.split('_')[0].split('-')[1]
                                                             : cnl.displayName.split('_')[1].split('-')[1]
                                                         : cnl.title
-                                                }`,
-                                            }}
-                                            state={{
-                                                channel: cnl,
-                                                currentUser: currentUserRes.data.currentUser,
-                                            }}
-                                        >
-                                            {/*{cnl.displayName === 'surveybot' ?*/}
-                                            {/*    <li className="active">*/}
-                                            {/*        <a className="sidebar-item has-close"*/}
-                                            {/*           onClick={() => handleChannelClick(cnl)}>*/}
-                                            {/*            <span className="icon icon__globe"><FaRobot/></span>*/}
-                                            {/*            <span*/}
-                                            {/*                className="sidebar-item__name"><span>surveybot</span></span>*/}
-                                            {/*        </a>*/}
-                                            {/*    </li> :*/}
-                                            <li className="active">
-                                                <a
-                                                    className="sidebar-item has-close"
-                                                    onClick={() => handleChannelClick(cnl)}
-                                                >
-                                                    {cnl.displayName.split(',').length > 1 ? (
-                                                        <span className="num_style">
-                                                            {cnl.displayName.split(',').length}
-                                                        </span>
-                                                    ) : (
-                                                        <span className="icon icon__globe" color="white">
-                                                            <RiAdminFill />
+                                                }`}
+                                                state={{
+                                                    channel: cnl,
+                                                    currentUser: currentUserRes.data.currentUser,
+                                                }}
+                                            >
+                                                <li className="group">
+                                                    <a
+                                                        className="flex items-center px-2 py-2 text-gray-300 rounded-md hover:bg-gray-700 hover:text-white group-hover:bg-gray-700"
+                                                        onClick={() => handleChannelClick(cnl)}
+                                                    >
+                                                        {cnl.displayName.split(',').length > 1 ? (
+                                                            <span className="w-5 h-5 flex items-center justify-center bg-gray-600 rounded-full text-xs mr-2">
+                                                                {cnl.displayName.split(',').length}
+                                                            </span>
+                                                        ) : (
+                                                            <RiAdminFill className="mr-2 h-5 w-5" />
+                                                        )}
+                                                        <span className="truncate">
+                                                            {cnl.displayName.split('_').length === 2
+                                                                ? cnl.displayName.split('_')[0].split('-')[0] !==
+                                                                  currentUser.id
+                                                                    ? cnl.displayName.split('_')[0].split('-')[1]
+                                                                    : cnl.displayName.split('_')[1].split('-')[1]
+                                                                : cnl.displayName}
                                                         </span>
-                                                    )}
-                                                    <span className="sidebar-item__name">
-                                                        {/*<span>*/}
-                                                        {cnl.displayName.split('_').length === 2
-                                                            ? cnl.displayName.split('_')[0].split('-')[0] !==
-                                                              currentUser.id
-                                                                ? cnl.displayName.split('_')[0].split('-')[1]
-                                                                : cnl.displayName.split('_')[1].split('-')[1]
-                                                            : cnl.displayName}
-                                                        {/*</span>*/}
-                                                    </span>
-                                                </a>
-                                            </li>
-
-                                            {/*}*/}
-                                        </Link>
-                                    );
-                                })}
-                            </ul>
+                                                    </a>
+                                                </li>
+                                            </Link>
+                                        ))}
+                                    </ul>
+                                </div>
+                            </div>
                         </div>
                     </div>
-                    <div className="route_view">
+                    <div className="flex-1 overflow-auto bg-white">
                         <Routes>
                             {dashboardRoutes.map((route, index) => (
-                                <Route key={index} path={route.path} children={<route.component />} />
+                                <Route key={index} path={route.path} element={<route.component />} />
                             ))}
                         </Routes>
                     </div>
-                    {/*Add channel Modal*/}
-
-                    {/*{clickedChannel.id ? <div className="main_wraper">*/}
-                    {/*        <IntlProvider locale="en">*/}
-                    {/*            <div className='chat_head_mid'>*/}
-                    {/*                <PostViewPage channel={clickedChannel}*/}
-                    {/*                              currentUsrId={currentUser.id}/>*/}
-                    {/*            </div>*/}
-                    {/*            <Messenger channel={clickedChannel} isRefetch={isRefetch}*/}
-                    {/*                       currentUsrId={currentUser.id}/>*/}
-                    {/*        </IntlProvider>*/}
-                    {/*    </div>*/}
-                    {/*    : <h2 style={{display: 'flex', alignItems: 'center', margin: '0 auto', color: 'gray'}}>*/}
-                    {/*        Please select any channel*/}
-                    {/*    </h2>*/}
-                    {/*}*/}
                 </div>
             </div>
         </div>

package/src/containers/DashboardWithLoader.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import { Await } from '@remix-run/react';
-import { Spinner } from '@admin-layout/chakra-ui';
-import { Alert } from '@chakra-ui/react';
 import {
     useGetChannelsByUserQuery,
     useGetAllChannelQuery,
@@ -25,10 +23,20 @@ const DashboardWithLoader = (props) => {
     const allChannels = useGetAllChannelQuery({ variables: {}, fetchPolicy: 'cache-only' });
 
     return (
-        <React.Suspense fallback={<Spinner></Spinner>}>
+        <React.Suspense
+            fallback={
+                <div className="flex items-center justify-center w-full h-full">
+                    <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
+                </div>
+            }
+        >
             <Await
                 resolve={Promise.all([allUsers, usersToChat, currentUserRes, allChannels, getChannel])}
-                errorElement={<Alert>Error loading Dashboard page!</Alert>}
+                errorElement={
+                    <div className="p-4 mb-4 text-sm text-red-700 bg-red-100 rounded-lg" role="alert">
+                        Error loading Dashboard page!
+                    </div>
+                }
             >
                 <Dashboard data={[allUsers, usersToChat, currentUserRes, allChannels, getChannel]} {...props} />
             </Await>

package/lib/components/InboxMessage/InboxDetails/style.d.ts

@@ -1,2 +0,0 @@
-export declare const styleSheet: any;
-//# sourceMappingURL=style.d.ts.map

package/lib/components/InboxMessage/InboxDetails/style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../src/components/InboxMessage/InboxDetails/style.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,EA0BlB,GAAG,CAAC"}

package/lib/components/InboxMessage/InboxDetails/style.js

@@ -1,27 +0,0 @@
-const styleSheet = {
-  detailDrawerStyles: {
-    width: '100%',
-    '& .details': {
-      borderBottom: '1px solid #eaeaea',
-      height: '55px',
-      display: 'flex',
-      alignItems: 'center',
-      paddingLeft: '10px',
-      justifyContent: 'space-between',
-      '& h4': {
-        color: 'black',
-        fontSize: '1em',
-        fontWeight: 'bold'
-      },
-      '& .close-btn ': {
-        marginTop: '0',
-        '& svg': {
-          color: 'black'
-        }
-      },
-      '& .close-btn:hover ': {
-        background: '#eaeaea'
-      }
-    }
-  }
-};export{styleSheet};//# sourceMappingURL=style.js.map

package/lib/components/InboxMessage/InboxDetails/style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/InboxMessage/InboxDetails/style.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAa,MAAA,UAAU,GAAG;AACtB,EAAA,kBAAA,EAAkB;AACd,IAAA,KAAA,EAAA,MAAa;AACb,IAAA,YAAA,EAAA;AACI,MAAA,YAAA,EAAA,mBAAiC;AACjC,MAAA,MAAA,EAAA,MAAQ;AACR,MAAA,OAAA,EAAA,MAAS;AACT,MAAA,UAAA,EAAA,QAAoB;AACpB,MAAA,WAAA,EAAA,MAAa;AACb,MAAA,cAAA,EAAA,eAA+B;AAC/B,MAAA,MAAA,EAAA;AACI,QAAA,KAAA,EAAA;AACA,QAAA,QAAA,EAAA,KAAA;AACA,QAAA,UAAA,EAAA;AACH,OAAA;AACD,MAAA,eAAA,EAAA;AACI,QAAA,SAAA,EAAA,GAAA;AACA,QAAA,OAAA,EAAA;AACI,UAAA,KAAA,EAAA;AACH;AACJ,OAAA;AACD,MAAA,qBAAA,EAAA;AACI,QAAA,UAAA,EAAA;AACH;AACJ;AACJ;"}

package/lib/components/InboxMessage/InboxSidebar/styles.d.ts

@@ -1,2 +0,0 @@
-export declare const styleSheet: any;
-//# sourceMappingURL=styles.d.ts.map

package/lib/components/InboxMessage/InboxSidebar/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/InboxMessage/InboxSidebar/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,EAwDlB,GAAG,CAAC"}

package/lib/components/InboxMessage/InboxSidebar/styles.js

@@ -1,57 +0,0 @@
-const styleSheet = {
-  inboxSibarStyles: {
-    width: '100%',
-    marginRight: '20px',
-    cursor: 'pointer',
-    top: '0',
-    bottom: '0',
-    height: '100%',
-    overflow: 'auto',
-    padding: '10px',
-    '& .show-message': {
-      color: 'black',
-      textDecoration: 'none'
-    },
-    '& .username': {
-      color: 'black'
-    },
-    '& .inbox-contacts': {
-      display: 'flex',
-      marginTop: '10px',
-      paddingBottom: '15px',
-      width: '100%',
-      borderBottom: '1px solid #eaeaea',
-      paddingRight: '10px',
-      justifiedContent: 'space-between',
-      '& .last-message': {
-        marginLeft: '10px',
-        lineHeight: '3px'
-      }
-    },
-    '& .no-messages': {
-      textAlign: 'center',
-      margin: '0 auto',
-      padding: '10px',
-      '& h4': {
-        fontSize: '18px',
-        color: 'black'
-      },
-      '& p': {
-        color: 'rgb(113, 113, 113)',
-        fontSize: '16px'
-      },
-      '& .ant-btn': {
-        width: '110px',
-        height: '40px',
-        borderRadius: '7px',
-        border: '1px solid rgb(34 34 34)',
-        color: 'black',
-        fontWeight: '600',
-        '& :hover': {
-          color: 'black',
-          borderColor: 'black'
-        }
-      }
-    }
-  }
-};export{styleSheet};//# sourceMappingURL=styles.js.map

package/lib/components/InboxMessage/InboxSidebar/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/components/InboxMessage/InboxSidebar/styles.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAa,MAAA,UAAU,GAAG;AACtB,EAAA,gBAAA,EAAgB;AACZ,IAAA,KAAA,EAAA,MAAa;AACb,IAAA,WAAA,EAAA,MAAmB;AACnB,IAAA,MAAA,EAAA,SAAiB;AACjB,IAAA,GAAA,EAAA;AACA,IAAA,MAAA,EAAA;AACA,IAAA,MAAA,EAAA,MAAc;AACd,IAAA,QAAA,EAAA,MAAgB;AAChB,IAAA,OAAA,EAAA,MAAe;AACf,IAAA,iBAAA,EAAA;AACI,MAAA,KAAA,EAAA,OAAc;AACd,MAAA,cAAA,EAAA;AACH,KAAA;AACD,IAAA,aAAA,EAAA;AACI,MAAA,KAAA,EAAA;AACH,KAAA;AACD,IAAA,mBAAA,EAAA;AACI,MAAA,OAAA,EAAA,MAAS;AACT,MAAA,SAAA,EAAA,MAAW;AACX,MAAA,aAAA,EAAA,MAAe;AACf,MAAA,KAAA,EAAA,MAAO;AACP,MAAA,YAAA,EAAA,mBAAiC;AACjC,MAAA,YAAA,EAAA,MAAc;AACd,MAAA,gBAAA,EAAA,eAAiC;AACjC,MAAA,iBAAA,EAAA;AACI,QAAA,UAAA,EAAA,MAAU;AACV,QAAA,UAAA,EAAA;AACH;AACJ,KAAA;AACD,IAAA,gBAAA,EAAA;AACI,MAAA,SAAA,EAAA,QAAmB;AACnB,MAAA,MAAA,EAAA,QAAgB;AAChB,MAAA,OAAA,EAAA,MAAS;AACT,MAAA,MAAA,EAAA;AACI,QAAA,QAAA,EAAA,MAAQ;AACR,QAAA,KAAA,EAAA;AACH,OAAA;AACD,MAAA,KAAA,EAAA;AACI,QAAA,KAAA,EAAA,oBAA2B;AAC3B,QAAA,QAAA,EAAA;AACH,OAAA;AACD,MAAA,YAAA,EAAA;AACI,QAAA,KAAA,EAAA;AACA,QAAA,MAAA,EAAA,MAAM;AACN,QAAA,YAAA,EAAA,KAAA;AACA,QAAA,MAAA,EAAA,yBAAiC;AACjC,QAAA,KAAA,EAAA;AACA,QAAA,UAAA,EAAA,KAAA;AACA,QAAA,UAAA,EAAA;AACI,UAAA,KAAA,EAAA,OAAA;AACA,UAAA,WAAA,EAAA;AACH;AACJ;AACJ;AACJ;"}