From 827f024928a2711f66f3644a8e48d9b475fd4241 Mon Sep 17 00:00:00 2001
From: k6sdevbob <dev.bob@kanaries.net>
Date: Thu, 25 May 2023 11:51:41 +0800
Subject: [PATCH 1/2] feat(): pagination, divider

Co-Authored-By: kyusho <antoineyang99@gmail.com>
---
 .../src/components/divider/index.tsx          |  16 ++
 .../src/components/pagination/components.tsx  | 198 ++++++++++++++++
 .../src/components/pagination/hooks.tsx       | 212 ++++++++++++++++++
 .../src/components/pagination/index.tsx       | 120 ++++++++++
 .../collection/collectionView/cardView.tsx    |  11 +-
 .../collection/collectionView/listView.tsx    |  11 +-
 .../src/pages/dashboard/renderer/index.tsx    |   2 +-
 .../rath-client/src/pages/dashboard/tools.tsx |   2 +-
 .../megaAutomation/association/index.tsx      |   4 +-
 .../src/pages/megaAutomation/index.tsx        |   2 +-
 .../pages/megaAutomation/vizPagination.tsx    |   4 +-
 11 files changed, 562 insertions(+), 20 deletions(-)
 create mode 100644 packages/rath-client/src/components/divider/index.tsx
 create mode 100644 packages/rath-client/src/components/pagination/components.tsx
 create mode 100644 packages/rath-client/src/components/pagination/hooks.tsx
 create mode 100644 packages/rath-client/src/components/pagination/index.tsx

diff --git a/packages/rath-client/src/components/divider/index.tsx b/packages/rath-client/src/components/divider/index.tsx
new file mode 100644
index 000000000..8a7351f0d
--- /dev/null
+++ b/packages/rath-client/src/components/divider/index.tsx
@@ -0,0 +1,16 @@
+import styled from "styled-components";
+
+
+const Divider = styled.hr`
+    margin: 0;
+    flex-shrink: 0;
+    border-width: 0;
+    border-top-width: thin;
+    border-color: inherit;
+    opacity: 0.12;
+    border-style: solid;
+    color: inherit;
+`;
+
+
+export default Divider;
diff --git a/packages/rath-client/src/components/pagination/components.tsx b/packages/rath-client/src/components/pagination/components.tsx
new file mode 100644
index 000000000..fb4de443c
--- /dev/null
+++ b/packages/rath-client/src/components/pagination/components.tsx
@@ -0,0 +1,198 @@
+import styled from "styled-components";
+
+
+const Container = styled.div`
+    margin-block: 1.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+`;
+
+const ContentSm = styled.div`
+    flex-grow: 1;
+    flex-shrink: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    @media (min-width: 1024px) {
+        display: none;
+    }
+`;
+
+const ContentLg = styled.div`
+    flex-grow: 1;
+    flex-shrink: 1;
+    display: none;
+    @media (min-width: 1024px) {
+        display: flex;
+    }
+    align-items: center;
+    justify-content: space-between;
+    overflow: hidden;
+    > * + * {
+        margin-left: -1px;
+    }
+`;
+
+const Description = styled.div`
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    > p {
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        color: #4b5563;
+        opacity: 0.6;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+`;
+
+const TabList = styled.div`
+    flex-grow: 0;
+    flex-shrink: 0;
+    display: inline-flex;
+    position: relative;
+    padding: 2px;
+    :not(:first-child) {
+        margin-left: 1rem;
+    }
+`;
+
+const CurrentTab = styled.div`
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: max-content;
+    min-width: 2em;
+    cursor: default;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.25rem;
+    letter-spacing: 0.025em;
+    text-align: center;
+    white-space: break-all;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
+
+const Tab = styled.div`
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: max-content;
+    min-width: 2em;
+    cursor: pointer;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.25rem;
+    letter-spacing: 0.025em;
+    text-align: center;
+    white-space: break-all;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.75;
+    &:hover {
+        opacity: 1;
+        color: #6366f1;
+    }
+    &:focus {
+        opacity: 1;
+        color: #6366f1;
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);
+    }
+`;
+
+const Ellipsis = styled.div`
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: max-content;
+    min-width: 2em;
+    cursor: default;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.25rem;
+    letter-spacing: 0.025em;
+    text-align: center;
+    white-space: break-all;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.75;
+`;
+
+const Button = styled.div`
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: max-content;
+    min-width: 2em;
+    cursor: pointer;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.25rem;
+    letter-spacing: 0.025em;
+    text-align: center;
+    white-space: break-all;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.75;
+    &[aria-disabled="false"]:hover {
+        opacity: 1;
+        color: #6366f1;
+    }
+    &[aria-disabled="false"]:focus {
+        opacity: 1;
+        color: #6366f1;
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);
+    }
+    &[aria-disabled="true"] {
+        cursor: default;
+    }
+    > * + * {
+        margin-left: 0.5rem;
+    }
+    > span {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border-width: 0;
+    }
+    > i {
+        width: 1.25rem;
+        height: 1.25rem;
+    }
+`;
+
+
+const PaginationComponents = {
+    Container,
+    ContentSm,
+    ContentLg,
+    Description,
+    TabList,
+    CurrentTab,
+    Tab,
+    Ellipsis,
+    Button,
+};
+
+
+export default PaginationComponents;
diff --git a/packages/rath-client/src/components/pagination/hooks.tsx b/packages/rath-client/src/components/pagination/hooks.tsx
new file mode 100644
index 000000000..6b23fa496
--- /dev/null
+++ b/packages/rath-client/src/components/pagination/hooks.tsx
@@ -0,0 +1,212 @@
+import { type ReactEventHandler, type ChangeEvent, useMemo, useRef } from "react";
+
+
+export interface UsePaginationParams {
+    /**
+     * Number of always visible pages at the beginning and end.
+     * @default 1
+     */
+    boundaryCount?: number;
+    /**
+     * The total number of pages.
+     * @default 1
+     */
+    count?: number;
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, hide the next-page button.
+     * @default false
+     */
+    hideNextButton?: boolean;
+    /**
+     * If `true`, hide the previous-page button.
+     * @default false
+     */
+    hidePrevButton?: boolean;
+    /**
+     * Callback fired when the page is changed.
+     *
+     * @param {ChangeEvent<unknown>} event The event source of the callback.
+     * @param {number} page The page selected.
+     */
+    onChange?: (event: ChangeEvent<unknown>, page: number) => void;
+    /**
+     * The current page, starting from 1.
+     */
+    page?: number;
+    /**
+     * Number of always visible pages before and after the current page.
+     * @default 1
+     */
+    siblingCount?: number;
+}
+
+export interface UsePaginationItem {
+    onClick: ReactEventHandler;
+    type: 'page' | 'next' | 'previous' | 'start-ellipsis' | 'end-ellipsis';
+    page: number;
+    selected: boolean;
+    disabled: boolean;
+}
+
+export interface UsePaginationResult {
+    items: readonly UsePaginationItem[];
+    isFallback: boolean;
+}
+
+export const usePagination = (params: UsePaginationParams): UsePaginationResult => {
+    const {
+        boundaryCount = 1,
+        count = 1,
+        disabled = false,
+        hideNextButton = false,
+        hidePrevButton = false,
+        onChange,
+        page = 1,
+        siblingCount = 1,
+    } = params;
+
+    const isPageIdxValid = Number.isFinite(page) && Math.floor(page!) === page && page >= 1 && page <= count;
+    const prevPageEnabled = isPageIdxValid && page > 1;
+    const nextPageEnabled = isPageIdxValid && page + 1 <= count;
+
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+
+    const items = useMemo<UsePaginationItem[]>(() => {
+        const MAX_CENTER_ITEMS = 1 + siblingCount * 2;
+        if (!isPageIdxValid) {
+            const items: UsePaginationItem[] = [];
+            for (let i = 1; i <= Math.min(count, boundaryCount * 2 + MAX_CENTER_ITEMS); i += 1) {
+                items.push({
+                    type: 'page',
+                    page: i,
+                    selected: false,
+                    disabled,
+                    onClick: event => {
+                        if (disabled) {
+                            return;
+                        }
+                        onChangeRef.current?.(event, i);
+                    },
+                });
+            }
+            return items;
+        }
+        const leftPartMax = boundaryCount;
+        const rightPartMin = Math.max(0, count + 1 - boundaryCount);
+        const centerPartMin = Math.max(leftPartMax + 1, page - MAX_CENTER_ITEMS);
+        const centerPartMax = Math.min(page + MAX_CENTER_ITEMS, rightPartMin - 1);
+        let centerItems: number[] = [];
+        for (let i = centerPartMin; i <= centerPartMax; i += 1) {
+            centerItems.push(i);
+        }
+        centerItems = centerItems.sort((a, b) => Math.abs(a - page) - Math.abs(b - page)).slice(0, MAX_CENTER_ITEMS).sort((a, b) => a - b);
+        const items: UsePaginationItem[] = [];
+        for (let i = 1; i <= leftPartMax; i += 1) {
+            items.push({
+                type: 'page',
+                page: i,
+                selected: i === page,
+                disabled,
+                onClick: event => {
+                    if (disabled || i === page) {
+                        return;
+                    }
+                    onChangeRef.current?.(event, i);
+                },
+            });
+        }
+        if ((centerItems.at(0) ?? -1) > leftPartMax + 1) {
+            items.push({
+                type: 'start-ellipsis',
+                page: -1,
+                selected: false,
+                disabled,
+                onClick: () => {},
+            });
+        }
+        for (const idx of centerItems) {
+            items.push({
+                type: 'page',
+                page: idx,
+                selected: idx === page,
+                disabled,
+                onClick: event => {
+                    if (disabled || idx === page) {
+                        return;
+                    }
+                    onChangeRef.current?.(event, idx);
+                },
+            });
+        }
+        if ((centerItems.at(-1) ?? Infinity) < rightPartMin - 1) {
+            items.push({
+                type: 'end-ellipsis',
+                page: -1,
+                selected: false,
+                disabled,
+                onClick: () => {},
+            });
+        }
+        for (let i = rightPartMin; i <= count; i += 1) {
+            if (items.some(item => item.page === i)) {
+                continue;
+            }
+            items.push({
+                type: 'page',
+                page: i,
+                selected: i === page,
+                disabled,
+                onClick: event => {
+                    if (disabled || i === page) {
+                        return;
+                    }
+                    onChangeRef.current?.(event, i);
+                },
+            });
+        }
+
+        if (!hidePrevButton) {
+            items.unshift({
+                type: 'previous',
+                page: page - 1,
+                selected: false,
+                disabled: disabled || !prevPageEnabled,
+                onClick: event => {
+                    if (disabled || !prevPageEnabled) {
+                        return;
+                    }
+                    onChangeRef.current?.(event, page - 1);
+                },
+            });
+        }
+        if (!hideNextButton) {
+            items.push({
+                type: 'next',
+                page: page + 1,
+                selected: false,
+                disabled: disabled || !nextPageEnabled,
+                onClick: event => {
+                    if (disabled || !nextPageEnabled) {
+                        return;
+                    }
+                    onChangeRef.current?.(event, page + 1);
+                },
+            });
+        }
+
+        return items;
+    }, [siblingCount, isPageIdxValid, count, page, disabled, hidePrevButton, hideNextButton, boundaryCount, prevPageEnabled, nextPageEnabled]);
+
+    return useMemo<UsePaginationResult>(() => {
+        return {
+            items,
+            isFallback: !isPageIdxValid,
+        };
+    }, [items, isPageIdxValid]);
+};
diff --git a/packages/rath-client/src/components/pagination/index.tsx b/packages/rath-client/src/components/pagination/index.tsx
new file mode 100644
index 000000000..6b5d40bf8
--- /dev/null
+++ b/packages/rath-client/src/components/pagination/index.tsx
@@ -0,0 +1,120 @@
+import { Icon } from "@fluentui/react";
+import { Fragment, type HTMLAttributes, memo } from "react";
+import P from './components';
+import { type UsePaginationItem, usePagination } from "./hooks";
+
+
+export interface IPaginationProps {
+    pageCount: number;
+    /** starting from 1, show only the head if not given */
+    pageIdx?: number;
+    onChange?: (idx: number) => void;
+    description?: string;
+    prevBtnText?: string;
+    nextBtnText?: string;
+}
+
+const Pagination = memo<IPaginationProps & Omit<HTMLAttributes<HTMLDivElement>, keyof IPaginationProps>>(function Pagination ({
+    pageCount, pageIdx, onChange, description, prevBtnText = 'Prev', nextBtnText = 'Next', ...attrs
+}) {
+    const { items, isFallback } = usePagination({
+        count: pageCount,
+        page: pageIdx,
+        onChange: (_, page) => onChange?.(page),
+    });
+
+    const renderCurrentPage = (item: UsePaginationItem & { type: 'page' }) => (
+        <P.CurrentTab
+            aria-current="page"
+            role="button"
+            tabIndex={0}
+            data-link-source="pagination"
+        >
+            {item.page}
+        </P.CurrentTab>
+    );
+
+    const renderTab = (item: UsePaginationItem & { type: 'page' }) => (
+        <P.Tab
+            data-link-source="pagination"
+            role="button"
+            tabIndex={0}
+            onClick={item.onClick}
+        >
+            {item.page}
+        </P.Tab>
+    );
+
+    const renderEllipsis = () => (
+        <P.Ellipsis>
+            ...
+        </P.Ellipsis>
+    );
+
+    const renderButton = (item: UsePaginationItem & { type: 'next' | 'previous' }) => (
+        <P.Button
+            aria-disabled={item.disabled}
+            onClick={item.onClick}
+            data-link-source="pagination"
+            role="button"
+            tabIndex={0}
+        >
+            <Icon
+                iconName={item.type === 'previous' ? 'ChevronLeft' : 'ChevronRight'}
+                aria-hidden="true"
+            />
+            <span>
+                {item.type === 'previous' ? prevBtnText : nextBtnText}
+            </span>
+        </P.Button>
+    );
+
+    if (isFallback) {
+        return (
+            <P.Container {...attrs}>
+                <P.ContentLg style={{ display: 'flex' }}>
+                    <P.TabList aria-label="Pagination">
+                        {items.map((item, i) => (
+                            <Fragment key={i}>
+                                {item.type === 'page' && renderTab(item as UsePaginationItem & { type: "page" })}
+                                {item.type.match(/ellipse/) && renderEllipsis()}
+                            </Fragment>
+                        ))}
+                    </P.TabList>
+                </P.ContentLg>
+            </P.Container>
+        );
+    }
+
+    return (
+        <P.Container role="navigation" {...attrs}>
+            <P.ContentSm>
+                {items.filter(item => item.type === 'previous' || item.type === 'next').map(item => (
+                    <Fragment key={item.type}>
+                        {renderButton(item as UsePaginationItem & { type: "next" | "previous" })}
+                    </Fragment>
+                ))}
+            </P.ContentSm>
+            <P.ContentLg>
+                {description && (
+                    <P.Description>
+                        <p>{description}</p>
+                    </P.Description>
+                )}
+                <P.TabList aria-label="Pagination">
+                    {items.map((item, i) => (
+                        <Fragment key={i}>
+                            {(item.type === 'previous' || item.type === 'next') && renderButton(item as UsePaginationItem & { type: "next" | "previous" })}
+                            {item.type === 'page' && item.selected && renderCurrentPage(item as UsePaginationItem & { type: "page" })}
+                            {item.type === 'page' && !item.selected && renderTab(item as UsePaginationItem & { type: "page" })}
+                            {item.type.match(/ellipse/) && renderEllipsis()}
+                        </Fragment>
+                    ))}
+                </P.TabList>
+            </P.ContentLg>
+        </P.Container>
+    );
+});
+
+
+export default Pagination;
diff --git a/packages/rath-client/src/pages/collection/collectionView/cardView.tsx b/packages/rath-client/src/pages/collection/collectionView/cardView.tsx
index 540a6bb57..ba3fafa04 100644
--- a/packages/rath-client/src/pages/collection/collectionView/cardView.tsx
+++ b/packages/rath-client/src/pages/collection/collectionView/cardView.tsx
@@ -1,13 +1,14 @@
 import { applyFilters } from '@kanaries/loa';
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { Divider, Pagination } from '@material-ui/core';
 import ReactVega from '../../../components/react-vega';
 import ViewInfo from '../../../components/viewInfo/textInfo';
 import { IFieldMeta, IInsightVizView, IRow } from '../../../interfaces';
 import VisErrorBoundary from '../../../components/visErrorBoundary';
 import { changeVisSize, VIEW_NUM_IN_PAGE } from '../utils';
 import { VegaThemeConfig } from '../../../queries/themes/config';
+import Pagination from '../../../components/pagination';
+import Divider from '../../../components/divider';
 
 const CollectContainer = styled.div`
     display: flex;
@@ -56,11 +57,9 @@ const CardView: React.FC<CardViewProps> = (props) => {
         <div>
             <Pagination
                 style={{ marginTop: '1em', marginLeft: '1em' }}
-                variant="outlined"
-                shape="rounded"
-                count={Math.ceil(views.length / VIEW_NUM_IN_PAGE)}
-                page={pageIndex + 1}
-                onChange={(e, v) => {
+                pageCount={Math.ceil(views.length / VIEW_NUM_IN_PAGE)}
+                pageIdx={pageIndex + 1}
+                onChange={v => {
                     setPageIndex(v - 1);
                 }}
             />
diff --git a/packages/rath-client/src/pages/collection/collectionView/listView.tsx b/packages/rath-client/src/pages/collection/collectionView/listView.tsx
index d95226feb..7d2bb3154 100644
--- a/packages/rath-client/src/pages/collection/collectionView/listView.tsx
+++ b/packages/rath-client/src/pages/collection/collectionView/listView.tsx
@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { applyFilters } from '@kanaries/loa';
-import { Divider, Pagination } from '@material-ui/core';
 import ReactVega from '../../../components/react-vega';
 import VisErrorBoundary from '../../../components/visErrorBoundary';
 import { IFieldMeta, IInsightVizView, IRow } from '../../../interfaces';
 import { changeVisSize, VIEW_NUM_IN_PAGE } from '../utils';
 import ViewInfo from '../../../components/viewInfo/pillInfo';
 import { VegaThemeConfig } from '../../../queries/themes/config';
+import Pagination from '../../../components/pagination';
+import Divider from '../../../components/divider';
 
 const CollectContainer = styled.div`
     .seg-header {
@@ -49,11 +50,9 @@ const ListView: React.FC<ListViewProps> = (props) => {
         <div>
             <Pagination
                 style={{ marginTop: '1em', marginLeft: '1em' }}
-                variant="outlined"
-                shape="rounded"
-                count={Math.ceil(views.length / VIEW_NUM_IN_PAGE)}
-                page={pageIndex + 1}
-                onChange={(e, v) => {
+                pageCount={Math.ceil(views.length / VIEW_NUM_IN_PAGE)}
+                pageIdx={pageIndex + 1}
+                onChange={v => {
                     setPageIndex(v - 1);
                 }}
             />
diff --git a/packages/rath-client/src/pages/dashboard/renderer/index.tsx b/packages/rath-client/src/pages/dashboard/renderer/index.tsx
index c9399de5b..e2e12e380 100644
--- a/packages/rath-client/src/pages/dashboard/renderer/index.tsx
+++ b/packages/rath-client/src/pages/dashboard/renderer/index.tsx
@@ -1,4 +1,4 @@
-import useId from '@material-ui/core/utils/useId';
+import { useId } from '@fluentui/react-hooks';
 import { observer } from 'mobx-react-lite';
 import { forwardRef, useEffect } from 'react';
 import styled, { StyledComponentProps } from 'styled-components';
diff --git a/packages/rath-client/src/pages/dashboard/tools.tsx b/packages/rath-client/src/pages/dashboard/tools.tsx
index 29785aff6..40f5d7527 100644
--- a/packages/rath-client/src/pages/dashboard/tools.tsx
+++ b/packages/rath-client/src/pages/dashboard/tools.tsx
@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 import { useCallback, forwardRef } from 'react';
 import { IconButton } from '@fluentui/react';
-import { Divider } from '@material-ui/core';
 import type { DashboardCard } from '../../store/dashboardStore';
+import Divider from '../../components/divider';
 
 const ToolGroup = styled.div`
     margin: 0 0 0 0.6em;
diff --git a/packages/rath-client/src/pages/megaAutomation/association/index.tsx b/packages/rath-client/src/pages/megaAutomation/association/index.tsx
index bded5795f..ed6138867 100644
--- a/packages/rath-client/src/pages/megaAutomation/association/index.tsx
+++ b/packages/rath-client/src/pages/megaAutomation/association/index.tsx
@@ -3,8 +3,8 @@ import { observer } from 'mobx-react-lite';
 import React, { useState, useEffect } from 'react';
 import { Pivot, PivotItem } from '@fluentui/react'
 import intl from 'react-intl-universal';
-import { Pagination } from '@material-ui/core';
 import { useGlobalStore } from '../../../store';
+import Pagination from '../../../components/pagination';
 import Association from './assCharts';
 
 const PAGE_SIZE = 7;
@@ -34,7 +34,7 @@ const ObservableAssociation: React.FC = props => {
             <PivotItem headerText={`${intl.get('megaAuto.asso.T1')}(${assoListT1.length})`} itemKey="T1" />
             <PivotItem headerText={`${intl.get('megaAuto.asso.T2')}(${assoListT2.length})`} itemKey="T2" />
         </Pivot>
-        <Pagination count={Math.floor(assoShownFullList.length / PAGE_SIZE) + 1} page={assoIndex + 1} onChange={(e, v) => {
+        <Pagination pageCount={Math.floor(assoShownFullList.length / PAGE_SIZE) + 1} pageIdx={assoIndex + 1} onChange={v => {
             setAssoIndex(Math.max(v - 1, 0));
         }} />
         <Association
diff --git a/packages/rath-client/src/pages/megaAutomation/index.tsx b/packages/rath-client/src/pages/megaAutomation/index.tsx
index 64401c1f1..42deb16e5 100644
--- a/packages/rath-client/src/pages/megaAutomation/index.tsx
+++ b/packages/rath-client/src/pages/megaAutomation/index.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
-import { Divider } from '@material-ui/core';
 import styled from 'styled-components';
 import intl from 'react-intl-universal';
 import { runInAction } from 'mobx';
@@ -10,6 +9,7 @@ import { PIVOT_KEYS } from '../../constants';
 import EditorCore from '../editor/core';
 import type { IReactVegaHandler } from '../../components/react-vega';
 import { Card } from '../../components/card';
+import Divider from '../../components/divider';
 import VizPreference from './preference';
 import SaveModal from './save';
 import OperationBar from './vizOperation/operationBar';
diff --git a/packages/rath-client/src/pages/megaAutomation/vizPagination.tsx b/packages/rath-client/src/pages/megaAutomation/vizPagination.tsx
index a317bc314..2314a1f29 100644
--- a/packages/rath-client/src/pages/megaAutomation/vizPagination.tsx
+++ b/packages/rath-client/src/pages/megaAutomation/vizPagination.tsx
@@ -1,6 +1,5 @@
 import { Icon, SearchBox, Spinner } from '@fluentui/react';
 import { IPattern } from '@kanaries/loa';
-import usePagination from '@material-ui/core/usePagination/usePagination';
 import produce from 'immer';
 import { observer } from 'mobx-react-lite';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -14,6 +13,7 @@ import VisErrorBoundary from '../../components/visErrorBoundary';
 import { changeVisSize } from '../collection/utils';
 import { ILazySearchInfoBase, searchFilterView } from '../../utils';
 import { labDistVisService } from '../../services';
+import { usePagination } from '../../components/pagination/hooks';
 
 const VizCard = styled.div<{ selected?: boolean }>`
     /* width: 140px; */
@@ -123,8 +123,6 @@ const VizPagination: React.FC = (props) => {
 
     const { items } = usePagination({
         count: searchedInsightViews.length,
-        showFirstButton: false,
-        showLastButton: false,
         siblingCount: 1,
         page: pageIndex + 1,
         onChange: updatePage,

From 11885b7d3f616218df9de14d3175cd9a7e0e4f93 Mon Sep 17 00:00:00 2001
From: k6sdevbob <dev.bob@kanaries.net>
Date: Thu, 25 May 2023 15:22:02 +0800
Subject: [PATCH 2/2] feat(): stepper; remove mui

Co-Authored-By: kyusho <antoineyang99@gmail.com>
---
 packages/rath-client/package.json             |   3 -
 .../src/components/connectionStatus.tsx       |  32 ++-
 .../src/components/stepper/components.tsx     | 114 +++++++++
 .../src/components/stepper/index.tsx          |  80 ++++++
 .../pages/dataConnection/database/index.tsx   | 239 +----------------
 .../dataConnection/database/progress.tsx      | 125 ---------
 yarn.lock                                     | 240 +-----------------
 7 files changed, 223 insertions(+), 610 deletions(-)
 create mode 100644 packages/rath-client/src/components/stepper/components.tsx
 create mode 100644 packages/rath-client/src/components/stepper/index.tsx
 delete mode 100644 packages/rath-client/src/pages/dataConnection/database/progress.tsx

diff --git a/packages/rath-client/package.json b/packages/rath-client/package.json
index 10a202725..eea937e2a 100644
--- a/packages/rath-client/package.json
+++ b/packages/rath-client/package.json
@@ -11,8 +11,6 @@
   "dependencies": {
     "@antv/g6": "^4.8.4",
     "@babel/parser": "^7.19.6",
-    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
     "@fluentui/font-icons-mdl2": "^8.5.4",
     "@fluentui/react": "^8.94.4",
     "@fluentui/react-components": "^9.19.0",
@@ -22,7 +20,6 @@
     "@kanaries/graphic-walker": "^0.2.18",
     "@kanaries/loa": "^0.0.16",
     "@kanaries/web-data-loader": "0.1.7",
-    "@material-ui/core": "^5.0.0-beta.5",
     "@vercel/analytics": "^1.0.0",
     "@zip.js/zip.js": "^2.6.60",
     "airtable": "^0.11.4",
diff --git a/packages/rath-client/src/components/connectionStatus.tsx b/packages/rath-client/src/components/connectionStatus.tsx
index 946f5f30c..7687e10a3 100644
--- a/packages/rath-client/src/components/connectionStatus.tsx
+++ b/packages/rath-client/src/components/connectionStatus.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { Box, Step, StepLabel, Stepper } from '@material-ui/core';
 import { IECStatus } from '../interfaces';
 import { ENGINE_CONNECTION_STAGES } from '../constants';
+import Stepper from './stepper';
 
 interface ConnectionStatusProps {
     status: IECStatus;
@@ -9,18 +9,24 @@ interface ConnectionStatusProps {
 const ConnectionStatus: React.FC<ConnectionStatusProps> = props => {
     const { status } = props;
     return <div style={{ margin: '2em 0em 1em 0em' }}>
-        <Box sx={{ width: '100%' }}>
-        <Stepper alternativeLabel>
-            {ENGINE_CONNECTION_STAGES.map((stage) => {
-                const currentStage = ENGINE_CONNECTION_STAGES.findIndex((s) => s.name === status);
-                return <Step key={stage.name + stage.stage} completed={currentStage >= stage.stage} active={currentStage >= stage.stage} style={{ textAlign: 'center'}}>
-                        <StepLabel>{stage.name}</StepLabel>
-                        <p>{stage.description}</p>
-                    </Step>
-                    }
-                )}
-        </Stepper>
-        </Box>
+        <Stepper.Box>
+            <Stepper>
+                {ENGINE_CONNECTION_STAGES.map((stage) => {
+                    const currentStage = ENGINE_CONNECTION_STAGES.findIndex((s) => s.name === status);
+                    return (
+                        <Stepper.Step
+                            key={stage.name + stage.stage}
+                            completed={currentStage >= stage.stage}
+                            active={currentStage >= stage.stage}
+                            style={{ textAlign: 'center' }}
+                        >
+                            <Stepper.StepLabel>{stage.name}</Stepper.StepLabel>
+                            <p>{stage.description}</p>
+                        </Stepper.Step>
+                    );
+                })}
+            </Stepper>
+        </Stepper.Box>
     </div>
 }
 
diff --git a/packages/rath-client/src/components/stepper/components.tsx b/packages/rath-client/src/components/stepper/components.tsx
new file mode 100644
index 000000000..e98c462c9
--- /dev/null
+++ b/packages/rath-client/src/components/stepper/components.tsx
@@ -0,0 +1,114 @@
+import styled from "styled-components";
+
+
+const Box = styled.div`
+    width: 100%;
+`;
+
+const Root = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    counter-reset: step 0;
+`;
+
+const Item = styled.div`
+    padding-inline: 0.5em;
+    flex: 1;
+    position: relative;
+    counter-increment: step;
+    :first-child .connector {
+        display: none;
+    }
+`;
+
+const Connector = styled.div`
+    flex: 1 1 auto;
+    position: absolute;
+    top: 1em;
+    left: calc(-50% + 1.5em);
+    right: calc(50% + 1.5em);
+    transform: translateY(-100%);
+    > span {
+        display: block;
+        border-color: #bdbdbd;
+        border-top-style: solid;
+        border-top-width: 1px;
+    }
+`;
+
+const Label = styled.span`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    > .icon {
+        flex-shrink: 0;
+        display: flex;
+        > * {
+            user-select: none;
+            width: 1em;
+            height: 1em;
+            fill: currentColor;
+            flex-shrink: 0;
+            font-size: 1.5rem;
+            transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+            border-radius: 50%;
+            overflow: hidden;
+            background-color: #a2a2a2;
+            fill: #fff;
+            color: #fff;
+            display: none;
+            &.uncompleted {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                ::before {
+                    display: inline-block;
+                    content: counter(step);
+                    font-size: 0.8rem;
+                }
+            }
+            &.completed {
+                background-color: #3b82f6;
+            }
+        }
+    }
+    *.completed > & > .icon > .completed {
+        display: inline-block;
+    }
+    *.completed > & > .icon > .uncompleted {
+        display: none;
+    }
+    > .label {
+        width: 100%;
+        color: #000000aa;
+        > span {
+            text-align: center;
+            margin-top: 1.2em;
+            font-size: 0.875rem;
+            font-weight: 400;
+            line-height: 1.43;
+            letter-spacing: 0.01071em;
+            display: block;
+        }
+    }
+    *.active > & > .label > span {
+        color: #000000d4;
+        font-weight: 600 !important;
+    }
+    *.completed > & > .label > span {
+        color: #000000d4;
+        font-weight: 500;
+    }
+`;
+
+const StepperComponents = {
+    Box,
+    Root,
+    Item,
+    Connector,
+    Label,
+};
+
+
+export default StepperComponents
diff --git a/packages/rath-client/src/components/stepper/index.tsx b/packages/rath-client/src/components/stepper/index.tsx
new file mode 100644
index 000000000..7f2f3f7a8
--- /dev/null
+++ b/packages/rath-client/src/components/stepper/index.tsx
@@ -0,0 +1,80 @@
+import { type HTMLAttributes, type FC } from "react";
+import S from './components';
+
+
+export interface IStepperProps {}
+
+const Stepper: FC<IStepperProps> = ({ children }) => {
+    return (
+        <S.Root>
+            {children}
+        </S.Root>
+    );
+};
+
+export interface IBoxProps {}
+
+const Box: FC<IBoxProps> = ({ children }) => {
+    return (
+        <S.Box>
+            {children}
+        </S.Box>
+    );
+};
+
+export interface IStepProps {
+    completed: boolean;
+    active: boolean;
+}
+
+const Step: FC<IStepProps & Omit<HTMLAttributes<HTMLDivElement>, keyof IStepProps>> = ({ completed, active, children, className = '', ...attrs }) => {
+    return (
+        <S.Item
+            className={`${completed ? 'completed' : ''} ${active ? 'active' : ''} ${className}`}
+            {...attrs}
+        >
+            <S.Connector className="connector">
+                <span />
+            </S.Connector>
+            {children}
+        </S.Item>
+    );
+};
+
+export interface IStepLabelProps {}
+
+const StepLabel: FC<IStepLabelProps & Omit<HTMLAttributes<HTMLSpanElement>, keyof IStepLabelProps>> = ({ children, ...attrs }) => {
+    return (
+        <S.Label {...attrs}>
+            <span className="icon">
+                <svg
+                    className="completed"
+                    viewBox="-1 -2.4 26 26"
+                    focusable="false"
+                    aria-hidden="true"
+                >
+                    <path
+                        fill="currentColor"
+                        d="M9.3 16.3l-5-5c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l4.3 4.3 8.3-8.3c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-9 9c-.4.4-1 .4-1.4 0z"
+                    />
+                </svg>
+                <div
+                    className="uncompleted"
+                    aria-hidden="true"
+                />
+            </span>
+            <span className="label">
+                <span>
+                    {children}
+                </span>
+            </span>
+        </S.Label>
+    );
+};
+
+
+export default Object.assign(Stepper, {
+    Box,
+    Step,
+    StepLabel,
+});
diff --git a/packages/rath-client/src/pages/dataConnection/database/index.tsx b/packages/rath-client/src/pages/dataConnection/database/index.tsx
index 5a5c449f0..be0c333c8 100644
--- a/packages/rath-client/src/pages/dataConnection/database/index.tsx
+++ b/packages/rath-client/src/pages/dataConnection/database/index.tsx
@@ -1,23 +1,5 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { observer } from 'mobx-react-lite';
-import intl from 'react-intl-universal';
-import { IDropdownOption, Stack, registerIcons, PrimaryButton } from '@fluentui/react';
-import { DataSourceType, IMuteFieldBase, IRow } from '../../../interfaces';
-import { logDataImport } from '../../../loggers/dataImport';
-import prefetch from '../../../utils/prefetch';
-import { notify } from '../../../components/error';
-import { DataSourceTag } from '../../../utils/storage';
-import { rawData2DataWithBaseMetas } from '../../dataSource/utils';
-import { useGlobalStore } from '../../../store';
-import Progress from './progress';
+import { registerIcons } from '@fluentui/react';
 import datasetOptions from './config';
-import ConnectForm, { ConnectFormReadonly } from './connect-form';
-import DropdownOrInput from './dropdown-or-input';
-import useDatabaseReducer from './reducer';
-import { getSourceId, pingConnector } from './api';
-import CustomConfig from './customConfig';
-import QueryEditor from './query-editor';
-import TablePreview from './table-preview';
 
 export const StackTokens = {
     childrenGap: 20,
@@ -62,223 +44,4 @@ export interface TableData<TL extends TableLabels = TableLabels> {
     rows: TableRowItem<TL>[];
 }
 
-interface DatabaseDataProps {
-    onClose: () => void;
-    onDataLoaded: (fields: IMuteFieldBase[], dataSource: IRow[], name: string, tag: DataSourceTag) => void;
-    setLoadingAnimation: (on: boolean) => void;
-}
-
 export const inputWidth = '180px';
-
-const DatabaseData: React.FC<DatabaseDataProps> = ({ onClose, onDataLoaded, setLoadingAnimation }) => {
-    const { progress, actions } = useDatabaseReducer(setLoadingAnimation);
-    const [loading, setLoading] = useState<boolean>(false);
-    const { userStore } = useGlobalStore();
-
-    const { connectorReady, databaseType, connectUri, sourceId, database, schema, table, queryString, preview } = progress;
-
-    const ping = useCallback(async () => {
-        try {
-            setLoading(true);
-            const ok = await pingConnector();
-            if (ok) {
-                actions.setConnectorStatus(true);
-            }
-        } catch (error) {
-            actions.setConnectorStatus(false);
-            notify({
-                type: 'error',
-                title: 'ping connector error',
-                content: `${error}`,
-            });
-        } finally {
-            setLoading(false);
-        }
-    }, [actions]);
-
-    useEffect(() => {
-        ping();
-    }, [ping]);
-
-    // prefetch icons
-    useEffect(() => {
-        datasetOptions.forEach(({ icon }) => {
-            if (icon) {
-                prefetch(`${iconPathPrefix}${icon}`);
-            }
-        });
-    }, []);
-
-    const whichDatabase = datasetOptions.find((which) => which.key === databaseType)!;
-
-    const { hasDatabase = true, databaseEnumerable = true, requiredSchema = false, schemaEnumerable = true } = whichDatabase;
-
-    useEffect(() => {
-        setLoadingAnimation(false);
-
-        return () => setLoadingAnimation(false);
-    }, [setLoadingAnimation]);
-
-    const handleConnectionTest = useCallback(async () => {
-        if (connectUri && Number.isNaN(sourceId.value)) {
-            actions.setSourceId({
-                status: 'pending',
-                value: NaN,
-            });
-            setLoadingAnimation(true);
-            const sId = await getSourceId(databaseType, connectUri);
-            setLoadingAnimation(false);
-            if (sId === null) {
-                return;
-            }
-            actions.setSourceId({
-                status: 'resolved',
-                value: sId,
-            });
-        }
-    }, [databaseType, connectUri, sourceId, setLoadingAnimation, actions]);
-
-    const databaseSelector: IDropdownOption[] | null = useMemo(() => {
-        if (hasDatabase && databaseEnumerable) {
-            return database.options.map<IDropdownOption>((dbName) => ({
-                text: dbName,
-                key: dbName,
-            }));
-        }
-
-        return null;
-    }, [database.options, hasDatabase, databaseEnumerable]);
-
-    const schemaSelector: IDropdownOption[] | null = useMemo(() => {
-        if (requiredSchema && schemaEnumerable) {
-            return (
-                schema.options.map<IDropdownOption>((sName) => ({
-                    text: sName,
-                    key: sName,
-                })) ?? []
-            );
-        }
-
-        return null;
-    }, [schema.options, requiredSchema, schemaEnumerable]);
-
-    const submitPendingRef = useRef(false);
-
-    const submit = async () => {
-        if (!preview.value || submitPendingRef.current) {
-            return;
-        }
-        submitPendingRef.current = true;
-        try {
-            const { rows, columns } = preview.value;
-            const data = await rawData2DataWithBaseMetas(
-                rows.map((row) => Object.fromEntries(row.map<[string, any]>((val, colIdx) => [columns?.[colIdx]?.key ?? `${colIdx}`, val])))
-            );
-            const { dataSource, fields } = data;
-            const name = [database.value, schema.value].filter(Boolean).join('.');
-
-            logDataImport({
-                dataType: `Database/${databaseType}`,
-                name,
-                fields,
-                dataSource: dataSource.slice(0, 10),
-                size: dataSource.length,
-            });
-            userStore.saveDataSourceOnCloudOnlineMode({
-                name,
-                datasourceType: DataSourceType.Database,
-                linkInfo: {
-                    databaseType,
-                    connectUri,
-                    database,
-                    schema,
-                    table,
-                    queryString,
-                },
-            });
-            onDataLoaded(fields, dataSource, name, DataSourceTag.DATABASE);
-
-            onClose();
-        } catch (error) {
-            console.error(error);
-        } finally {
-            submitPendingRef.current = false;
-        }
-    };
-
-    return (
-        <div>
-            <CustomConfig ping={ping} loading={loading} />
-            {connectorReady && (
-                <Stack>
-                    <Progress progress={progress} />
-                    {sourceId.status === 'empty' && (
-                        <ConnectForm
-                            sourceType={databaseType}
-                            setSourceType={actions.setDatabaseType}
-                            whichDatabase={whichDatabase}
-                            sourceId={sourceId}
-                            connectUri={connectUri}
-                            setConnectUri={actions.setConnectUri}
-                            handleConnectionTest={handleConnectionTest}
-                        />
-                    )}
-                    {sourceId.status === 'resolved' && (
-                        <>
-                            <ConnectFormReadonly connectUri={connectUri!} resetConnectUri={() => actions.setConnectorStatus(true)} />
-                            <Stack horizontal tokens={StackTokens} style={{ flexDirection: 'column' }}>
-                                {table.status === 'resolved' ? (
-                                    <>
-                                        <QueryEditor
-                                            tableEnumerable={whichDatabase.tableEnumerable ?? true}
-                                            tables={table.options}
-                                            query={queryString}
-                                            setQuery={actions.setQueryString}
-                                            preview={actions.genPreview}
-                                        />
-                                        {preview.value && (
-                                            <div>
-                                                <header
-                                                    style={{
-                                                        display: 'flex',
-                                                        alignItems: 'center',
-                                                        justifyContent: 'space-between',
-                                                    }}
-                                                >
-                                                    <span>{intl.get('common.preview')}</span>
-                                                    <PrimaryButton onClick={submit}>{intl.get('common.submit')}</PrimaryButton>
-                                                </header>
-                                                <TablePreview data={preview.value} />
-                                            </div>
-                                        )}
-                                    </>
-                                ) : (
-                                    <>
-                                        {database.status === 'resolved' && hasDatabase && (
-                                            <DropdownOrInput
-                                                name="dataSource.databaseName"
-                                                options={databaseSelector}
-                                                value={database.value}
-                                                setValue={actions.setDatabase}
-                                            />
-                                        )}
-                                        {schema.status === 'resolved' && requiredSchema && (
-                                            <DropdownOrInput
-                                                name="dataSource.schemaName"
-                                                options={schemaSelector}
-                                                value={schema.value}
-                                                setValue={actions.setSchema}
-                                            />
-                                        )}
-                                    </>
-                                )}
-                            </Stack>
-                        </>
-                    )}
-                </Stack>
-            )}
-        </div>
-    );
-};
-
-export default observer(DatabaseData);
diff --git a/packages/rath-client/src/pages/dataConnection/database/progress.tsx b/packages/rath-client/src/pages/dataConnection/database/progress.tsx
deleted file mode 100644
index c0e174c22..000000000
--- a/packages/rath-client/src/pages/dataConnection/database/progress.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import React from 'react';
-import { Box, Step, StepLabel, Stepper } from '@material-ui/core';
-import intl from 'react-intl-universal';
-import type { DatabaseOptions } from './type';
-
-interface StepConfig {
-    label: string;
-    idx: number;
-}
-
-const steps: StepConfig[] = [
-    {
-        label: 'Connection',
-        idx: 0,
-    },
-    {
-        label: 'Focus',
-        idx: 1,
-    },
-    {
-        label: 'Preview',
-        idx: 2,
-    },
-    {
-        label: 'Fetch',
-        idx: 3,
-    },
-];
-
-interface StageInfo {
-    label: string;
-    title: string;
-    completed: boolean;
-    failed: boolean;
-    active: boolean;
-    desc: string;
-}
-
-const getStageInfo = (progress: Readonly<DatabaseOptions>): StageInfo[] => {
-    const stages = steps.map<StageInfo>((step, i) => ({
-        label: step.label,
-        title: intl.get(`dataSource.dbProgress.${i}.label`),
-        completed: false,
-        failed: false,
-        active: false,
-        desc: '',
-    }));
-
-    const { connectorReady, sourceId, table, preview } = progress;
-
-    let cursorFixed = false;
-
-    if (sourceId.status !== 'resolved') {
-        stages[0]!.active = connectorReady ?? false;
-
-        if (connectorReady) {
-            stages[0]!.desc = intl.get('dataSource.dbProgress.0.msgRunning');
-        }
-
-        cursorFixed = true;
-    } else {
-        stages[0]!.completed = true;
-        stages[0]!.desc = intl.get(`dataSource.dbProgress.0.${sourceId !== null ? 'msgSucceeded' : 'msgFailed'}`);
-        stages[0]!.failed = sourceId === null;
-
-        if (stages[0]!.failed) {
-            cursorFixed = true;
-        }
-    }
-
-    if (!cursorFixed) {
-        if (table.status !== 'resolved') {
-            stages[1]!.active = true;
-            stages[1]!.desc = intl.get('dataSource.dbProgress.1.msgRunning');
-            cursorFixed = true;
-        } else {
-            stages[1]!.completed = true;
-            stages[1]!.desc = intl.get('dataSource.dbProgress.1.msgSucceeded');
-        }
-    }
-
-    if (!cursorFixed) {
-        if (preview.status !== 'resolved') {
-            stages[2]!.active = true;
-            stages[2]!.desc = intl.get('dataSource.dbProgress.2.msgRunning');
-            cursorFixed = true;
-        } else {
-            stages[2]!.completed = true;
-            stages[2]!.desc = intl.get('dataSource.dbProgress.2.msgSucceeded');
-        }
-    }
-
-    if (!cursorFixed) {
-        stages[3]!.active = true;
-        stages[3]!.desc = intl.get('dataSource.dbProgress.3.msgRunning');
-        cursorFixed = true;
-    }
-
-    return stages;
-};
-
-interface ProgressProps {
-    progress: Readonly<DatabaseOptions>;
-}
-
-const Progress: React.FC<ProgressProps> = ({ progress }) => {
-    const stages = getStageInfo(progress);
-
-    return (
-        <div style={{ margin: '2em 0em 1em 0em' }}>
-            <Box sx={{ width: '100%' }}>
-                <Stepper alternativeLabel>
-                    {stages.map((stage) => (
-                        <Step key={stage.label} completed={stage.completed} active={stage.active} style={{ textAlign: 'center' }}>
-                            <StepLabel error={stage.failed}>{stage.title}</StepLabel>
-                            <p>{stage.desc}</p>
-                        </Step>
-                    ))}
-                </Stepper>
-            </Box>
-        </div>
-    );
-};
-
-export default Progress;
diff --git a/yarn.lock b/yarn.lock
index 0d62ea8d2..60f85ca64 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -593,7 +593,7 @@
   dependencies:
     "@babel/types" "^7.21.0"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.16.0", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.18.6":
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.16.0", "@babel/helper-module-imports@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
   integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
@@ -1131,7 +1131,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-jsx@^7.17.12", "@babel/plugin-syntax-jsx@^7.18.6", "@babel/plugin-syntax-jsx@^7.7.2":
+"@babel/plugin-syntax-jsx@^7.18.6", "@babel/plugin-syntax-jsx@^7.7.2":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0"
   integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==
@@ -1917,7 +1917,7 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.5", "@babel/runtime@^7.14.8", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.18.9", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.19.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.0.tgz#22b11c037b094d27a8a2504ea4dcff00f50e2259"
   integrity sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==
@@ -2140,41 +2140,12 @@
   resolved "https://registry.npmmirror.com/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz#1bfafe4b7ed0f3e4105837e056e0a89b108ebe36"
   integrity sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==
 
-"@emotion/babel-plugin@^11.10.0":
-  version "11.10.2"
-  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.2.tgz#879db80ba622b3f6076917a1e6f648b1c7d008c7"
-  integrity sha512-xNQ57njWTFVfPAc3cjfuaPdsgLp5QOSuRsj9MA6ndEhH/AzuZM86qIQzt6rq+aGBwj3n5/TkLmU5lhAfdRmogA==
-  dependencies:
-    "@babel/helper-module-imports" "^7.16.7"
-    "@babel/plugin-syntax-jsx" "^7.17.12"
-    "@babel/runtime" "^7.18.3"
-    "@emotion/hash" "^0.9.0"
-    "@emotion/memoize" "^0.8.0"
-    "@emotion/serialize" "^1.1.0"
-    babel-plugin-macros "^3.1.0"
-    convert-source-map "^1.5.0"
-    escape-string-regexp "^4.0.0"
-    find-root "^1.1.0"
-    source-map "^0.5.7"
-    stylis "4.0.13"
-
-"@emotion/cache@^11.10.0", "@emotion/cache@^11.4.0":
-  version "11.10.3"
-  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.3.tgz#c4f67904fad10c945fea5165c3a5a0583c164b87"
-  integrity sha512-Psmp/7ovAa8appWh3g51goxu/z3iVms7JXOreq136D8Bbn6dYraPnmL6mdM8GThEx9vwSn92Fz+mGSjBzN8UPQ==
-  dependencies:
-    "@emotion/memoize" "^0.8.0"
-    "@emotion/sheet" "^1.2.0"
-    "@emotion/utils" "^1.2.0"
-    "@emotion/weak-memoize" "^0.3.0"
-    stylis "4.0.13"
-
 "@emotion/hash@^0.9.0":
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7"
   integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==
 
-"@emotion/is-prop-valid@^1.1.0", "@emotion/is-prop-valid@^1.2.0":
+"@emotion/is-prop-valid@^1.1.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83"
   integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==
@@ -2186,48 +2157,6 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
   integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
 
-"@emotion/react@^11.10.4":
-  version "11.10.4"
-  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.4.tgz#9dc6bccbda5d70ff68fdb204746c0e8b13a79199"
-  integrity sha512-j0AkMpr6BL8gldJZ6XQsQ8DnS9TxEQu1R+OGmDZiWjBAJtCcbt0tS3I/YffoqHXxH6MjgI7KdMbYKw3MEiU9eA==
-  dependencies:
-    "@babel/runtime" "^7.18.3"
-    "@emotion/babel-plugin" "^11.10.0"
-    "@emotion/cache" "^11.10.0"
-    "@emotion/serialize" "^1.1.0"
-    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
-    "@emotion/utils" "^1.2.0"
-    "@emotion/weak-memoize" "^0.3.0"
-    hoist-non-react-statics "^3.3.1"
-
-"@emotion/serialize@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.0.tgz#b1f97b1011b09346a40e9796c37a3397b4ea8ea8"
-  integrity sha512-F1ZZZW51T/fx+wKbVlwsfchr5q97iW8brAnXmsskz4d0hVB4O3M/SiA3SaeH06x02lSNzkkQv+n3AX3kCXKSFA==
-  dependencies:
-    "@emotion/hash" "^0.9.0"
-    "@emotion/memoize" "^0.8.0"
-    "@emotion/unitless" "^0.8.0"
-    "@emotion/utils" "^1.2.0"
-    csstype "^3.0.2"
-
-"@emotion/sheet@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.0.tgz#771b1987855839e214fc1741bde43089397f7be5"
-  integrity sha512-OiTkRgpxescko+M51tZsMq7Puu/KP55wMT8BgpcXVG2hqXc0Vo0mfymJ/Uj24Hp0i083ji/o0aLddh08UEjq8w==
-
-"@emotion/styled@^11.10.4":
-  version "11.10.4"
-  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.10.4.tgz#e93f84a4d54003c2acbde178c3f97b421fce1cd4"
-  integrity sha512-pRl4R8Ez3UXvOPfc2bzIoV8u9P97UedgHS4FPX594ntwEuAMA114wlaHvOK24HB48uqfXiGlYIZYCxVJ1R1ttQ==
-  dependencies:
-    "@babel/runtime" "^7.18.3"
-    "@emotion/babel-plugin" "^11.10.0"
-    "@emotion/is-prop-valid" "^1.2.0"
-    "@emotion/serialize" "^1.1.0"
-    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
-    "@emotion/utils" "^1.2.0"
-
 "@emotion/stylis@^0.8.4":
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
@@ -2238,26 +2167,6 @@
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
-"@emotion/unitless@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db"
-  integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==
-
-"@emotion/use-insertion-effect-with-fallbacks@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz#ffadaec35dbb7885bd54de3fa267ab2f860294df"
-  integrity sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==
-
-"@emotion/utils@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.0.tgz#9716eaccbc6b5ded2ea5a90d65562609aab0f561"
-  integrity sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==
-
-"@emotion/weak-memoize@^0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz#ea89004119dc42db2e1dba0f97d553f7372f6fcb"
-  integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==
-
 "@eslint/eslintrc@^1.3.2":
   version "1.3.2"
   resolved "https://registry.npmmirror.com/@eslint/eslintrc/-/eslintrc-1.3.2.tgz#58b69582f3b7271d8fa67fe5251767a5b38ea356"
@@ -3861,85 +3770,6 @@
   resolved "https://registry.npmmirror.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
   integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
 
-"@material-ui/core@^5.0.0-beta.5":
-  version "5.0.0-beta.5"
-  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-5.0.0-beta.5.tgz#6ee717d4ec02b28d737fb4be42dbc3b345dccc7c"
-  integrity sha512-ubRMdWJ+Maqvo0P13M+AThaHp5rBBIaURxoQ+Dx4/2Llrm1mepjINDL5PsABabqUbbNc6K+cmqgX4gwEFe7exw==
-  dependencies:
-    "@babel/runtime" "^7.14.8"
-    "@material-ui/system" "5.0.0-beta.5"
-    "@material-ui/types" "6.0.2"
-    "@material-ui/unstyled" "5.0.0-alpha.44"
-    "@material-ui/utils" "5.0.0-beta.5"
-    "@popperjs/core" "^2.4.4"
-    "@types/react-transition-group" "^4.2.0"
-    clsx "^1.0.4"
-    csstype "^3.0.2"
-    hoist-non-react-statics "^3.3.2"
-    prop-types "^15.7.2"
-    react-is "^17.0.2"
-    react-transition-group "^4.4.0"
-
-"@material-ui/private-theming@5.0.0-beta.5":
-  version "5.0.0-beta.5"
-  resolved "https://registry.yarnpkg.com/@material-ui/private-theming/-/private-theming-5.0.0-beta.5.tgz#b8168bd15a609a78bf411e5afac2f38b513b5f18"
-  integrity sha512-3J642OgHUAga6CYtzWRWG3d5FKG6NMTSxXSyk0Cc85iz/Zvl3n+x7g/MCeq8VjZULv10NzkySIXdNFQi8EKmYA==
-  dependencies:
-    "@babel/runtime" "^7.14.8"
-    "@material-ui/utils" "5.0.0-beta.5"
-    prop-types "^15.7.2"
-
-"@material-ui/styled-engine@5.0.0-beta.5":
-  version "5.0.0-beta.5"
-  resolved "https://registry.yarnpkg.com/@material-ui/styled-engine/-/styled-engine-5.0.0-beta.5.tgz#d84244c6d69683d04afb419681062640071e801d"
-  integrity sha512-tZiHu/GQYoME9Gj7BdIL+giQRt0ptuFIrr3Tm0fIbBB2fXYKzUKiJcggG6R5tjSXX5TUsipXpOIK3h5Kh5ZYtw==
-  dependencies:
-    "@babel/runtime" "^7.14.8"
-    "@emotion/cache" "^11.4.0"
-    prop-types "^15.7.2"
-
-"@material-ui/system@5.0.0-beta.5":
-  version "5.0.0-beta.5"
-  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-5.0.0-beta.5.tgz#5f828cae175f3eaf0bf2b71f1c76d421b44ab5eb"
-  integrity sha512-4l0u/66X68xeSVumk5TY3vFS/5xwEhE3z68iRVRt36KwMItlWPEZTHFq2YTJVuBbGH9eQJxOsKRWUmpfswukKQ==
-  dependencies:
-    "@babel/runtime" "^7.14.8"
-    "@material-ui/private-theming" "5.0.0-beta.5"
-    "@material-ui/styled-engine" "5.0.0-beta.5"
-    "@material-ui/types" "6.0.2"
-    "@material-ui/utils" "5.0.0-beta.5"
-    clsx "^1.0.4"
-    csstype "^3.0.2"
-    prop-types "^15.7.2"
-
-"@material-ui/types@6.0.2":
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-6.0.2.tgz#a6d384196c6e2e130eb2765b62d944c0b1ea1015"
-  integrity sha512-/XUca4wUb9pWimLLdM1PE8KS8rTbDEGohSGkGtk3WST7lm23m+8RYv9uOmrvOg/VSsl4bMiOv4t2/LCb+RLbTg==
-
-"@material-ui/unstyled@5.0.0-alpha.44":
-  version "5.0.0-alpha.44"
-  resolved "https://registry.yarnpkg.com/@material-ui/unstyled/-/unstyled-5.0.0-alpha.44.tgz#bb6dff41ae73a18a4a349d0558d776284d542d89"
-  integrity sha512-RNFs6CF+V/pdgxtN+hLA3/17CZ6uGEJit0qlvxb7CnSqMcN8dCen7jApnNDr3SMfZB6O0/B/sbnTQAOm1Cl3nQ==
-  dependencies:
-    "@babel/runtime" "^7.14.8"
-    "@emotion/is-prop-valid" "^1.1.0"
-    "@material-ui/utils" "5.0.0-beta.5"
-    clsx "^1.0.4"
-    prop-types "^15.7.2"
-    react-is "^17.0.2"
-
-"@material-ui/utils@5.0.0-beta.5":
-  version "5.0.0-beta.5"
-  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-5.0.0-beta.5.tgz#de492037e1f1f0910fda32e6f11b66dfcde2a1c2"
-  integrity sha512-wtJ3ovXWZdTAz5eLBqvMpYH/IBJb3qMQbGCyL1i00+sf7AUlAuv4QLx+QtX/siA6L7IpxUQVfqpoCpQH1eYRpQ==
-  dependencies:
-    "@babel/runtime" "^7.14.8"
-    "@types/prop-types" "^15.7.4"
-    "@types/react-is" "^16.7.1 || ^17.0.0"
-    prop-types "^15.7.2"
-    react-is "^17.0.2"
-
 "@microsoft/load-themed-styles@^1.10.26":
   version "1.10.295"
   resolved "https://registry.yarnpkg.com/@microsoft/load-themed-styles/-/load-themed-styles-1.10.295.tgz#d3c8d7ab186f422727ba112d6ebe5fe8e41051d9"
@@ -3993,7 +3823,7 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
-"@popperjs/core@^2.4.4", "@popperjs/core@^2.9.1":
+"@popperjs/core@^2.9.1":
   version "2.11.6"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
   integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
@@ -4724,7 +4554,7 @@
   resolved "https://registry.npmmirror.com/@types/prettier/-/prettier-2.7.1.tgz#dfd20e2dc35f027cdd6c1908e80a5ddc7499670e"
   integrity sha512-ri0UmynRRvZiiUJdiz38MmIblKK+oH30MztdBVR95dv/Ubw6neWSb8u1XpRb72L4qsZOhz+L+z9JD40SJmfWow==
 
-"@types/prop-types@*", "@types/prop-types@^15.7.4":
+"@types/prop-types@*":
   version "15.7.5"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
@@ -4751,13 +4581,6 @@
   dependencies:
     "@types/react" "^17"
 
-"@types/react-is@^16.7.1 || ^17.0.0":
-  version "17.0.3"
-  resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.3.tgz#2d855ba575f2fc8d17ef9861f084acc4b90a137a"
-  integrity sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-redux@^7.1.20":
   version "7.1.24"
   resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.24.tgz#6caaff1603aba17b27d20f8ad073e4c077e975c0"
@@ -4768,13 +4591,6 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
-"@types/react-transition-group@^4.2.0":
-  version "4.4.5"
-  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416"
-  integrity sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react@*", "@types/react@^17", "@types/react@^17.0.2", "@types/react@^17.x":
   version "17.0.58"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.58.tgz#c8bbc82114e5c29001548ebe8ed6c4ba4d3c9fb0"
@@ -6081,11 +5897,6 @@ clone@~2.1.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
   integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==
 
-clsx@^1.0.4:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
-  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
-
 co-body@^5.1.1:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/co-body/-/co-body-5.2.0.tgz#5a0a658c46029131e0e3a306f67647302f71c124"
@@ -6284,7 +6095,7 @@ convert-source-map@^1.1.0:
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
   integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
 
-convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
+convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
   integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
@@ -7094,14 +6905,6 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
-dom-helpers@^5.0.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
-  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
-  dependencies:
-    "@babel/runtime" "^7.8.7"
-    csstype "^3.0.2"
-
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -7898,11 +7701,6 @@ find-cache-dir@^3.3.1, find-cache-dir@^3.3.2:
     make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
-find-root@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
-  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
-
 find-up@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
@@ -8311,7 +8109,7 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -11872,7 +11670,7 @@ prompts@^2.0.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -12177,16 +11975,6 @@ react-shadow@^20.0.0:
     humps "^2.0.1"
     react-use "^17.0.0"
 
-react-transition-group@^4.4.0:
-  version "4.4.5"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
-  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    dom-helpers "^5.0.1"
-    loose-envify "^1.4.0"
-    prop-types "^15.6.2"
-
 react-universal-interface@^0.6.2:
   version "0.6.2"
   resolved "https://registry.npmmirror.com/react-universal-interface/-/react-universal-interface-0.6.2.tgz#5e8d438a01729a4dbbcbeeceb0b86be146fe2b3b"
@@ -12966,11 +12754,6 @@ source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, sourc
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-source-map@^0.5.7:
-  version "0.5.7"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
-  integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
-
 source-map@^0.7.3, source-map@^0.7.4:
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
@@ -13306,11 +13089,6 @@ stylehacks@^5.1.0:
     browserslist "^4.16.6"
     postcss-selector-parser "^6.0.4"
 
-stylis@4.0.13:
-  version "4.0.13"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
-  integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
-
 stylis@^4.0.13, stylis@^4.0.6:
   version "4.1.3"
   resolved "https://registry.npmmirror.com/stylis/-/stylis-4.1.3.tgz#fd2fbe79f5fed17c55269e16ed8da14c84d069f7"