Repository: apache/airflow
Pull request: New UI: Add Timezone select
Add a timezone select dropdown to the new UI. Closes #14807

This is a frontend only toggle, it does not change any backend Airflow config.

Also includes a custom implementation of `react-select` that uses the Chakra theme and component library.

<img width="317" alt="Screen Shot 2021-05-05 at 11 34 39 AM" src="https://user-images.githubusercontent.com/4600967/117168133-81867a00-ad8d-11eb-8f23-8bc6b4e96a38.png">

---
**^ Add meaningful description above**

Read the **[Pull Request Guidelines](https://github.com/apache/airflow/blob/master/CONTRIBUTING.rst#pull-request-guidelines)** for more information.
In case of fundamental code change, Airflow Improvement Proposal ([AIP](https://cwiki.apache.org/confluence/display/AIRFLOW/Airflow+Improvements+Proposals)) is needed.
In case of a new dependency, check compliance with the [ASF 3rd Party License Policy](https://www.apache.org/legal/resolved.html#category-x).
In case of backwards incompatible changes please leave a note in [UPDATING.md](https://github.com/apache/airflow/blob/master/UPDATING.md).


Problem statement:
Design/build timezone switcher modal
- Once we have the current user's preference set and available in Context, add a modal that allows the preferred display timezone to be changed.
- Modal will be triggered by clicking the time/TZ in the global navigation.

Hints from issue discussion:

Commit message: check if timezone exists in a group

Patch to review:
diff --git a/airflow/ui/package.json b/airflow/ui/package.json
index 8788aa2f25425..011a3032dde93 100644
--- a/airflow/ui/package.json
+++ b/airflow/ui/package.json
@@ -9,10 +9,11 @@
     "lint": "eslint --format codeframe --ext mjs,jsx,js,tsx,ts src test && tsc"
   },
   "dependencies": {
-    "@chakra-ui/react": "^1.3.4",
+    "@chakra-ui/react": "^1.6.0",
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.1.5",
     "@neutrinojs/copy": "^9.5.0",
+    "@vvo/tzdb": "^6.7.0",
     "axios": "^0.21.1",
     "dayjs": "^1.10.4",
     "dotenv": "^8.2.0",
@@ -24,6 +25,7 @@
     "react-icons": "^4.2.0",
     "react-query": "^3.12.3",
     "react-router-dom": "^5.2.0",
+    "react-select": "^4.3.0",
     "use-react-router": "^1.0.7"
   },
   "devDependencies": {
@@ -37,6 +39,7 @@
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
     "@types/react-router-dom": "^5.1.7",
+    "@types/react-select": "^4.0.15",
     "eslint": "^7",
     "eslint-config-airbnb-typescript": "^12.3.1",
     "eslint-plugin-import": "^2.22.1",
diff --git a/airflow/ui/src/components/AppContainer/AppHeader.tsx b/airflow/ui/src/components/AppContainer/AppHeader.tsx
index f5beda0d3d3ec..cf2bb90b4d2a1 100644
--- a/airflow/ui/src/components/AppContainer/AppHeader.tsx
+++ b/airflow/ui/src/components/AppContainer/AppHeader.tsx
@@ -21,8 +21,6 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import {
   Avatar,
-  Box,
-  Button,
   Flex,
   Icon,
   Menu,
@@ -32,7 +30,6 @@ import {
   MenuItem,
   useColorMode,
   useColorModeValue,
-  Tooltip,
 } from '@chakra-ui/react';
 import {
   MdWbSunny,
@@ -41,13 +38,14 @@ import {
   MdExitToApp,
 } from 'react-icons/md';
 import dayjs from 'dayjs';
-import timezone from 'dayjs/plugin/timezone';
+import tz from 'dayjs/plugin/timezone';
 
 import { useAuthContext } from 'providers/auth/context';
 
 import ApacheAirflowLogo from 'components/icons/ApacheAirflowLogo';
+import TimezoneDropdown from './TimezoneDropdown';
 
-dayjs.extend(timezone);
+dayjs.extend(tz);
 
 interface Props {
   bodyBg: string;
@@ -57,14 +55,11 @@ interface Props {
 
 const AppHeader: React.FC<Props> = ({ bodyBg, overlayBg, breadcrumb }) => {
   const { toggleColorMode } = useColorMode();
-  const now = dayjs().tz();
   const headerHeight = '56px';
   const { hasValidAuthToken, logout } = useAuthContext();
   const darkLightIcon = useColorModeValue(MdBrightness2, MdWbSunny);
   const darkLightText = useColorModeValue(' Dark ', ' Light ');
 
-  const handleOpenTZ = () => window.alert('This will open time zone select modal!');
-
   const handleOpenProfile = () => window.alert('This will take you to your user profile view.');
 
   return (
@@ -91,18 +86,7 @@ const AppHeader: React.FC<Props> = ({ bodyBg, overlayBg, breadcrumb }) => {
       )}
       {hasValidAuthToken && (
         <Flex align="center">
-          <Tooltip label="Change time zone" hasArrow>
-            {/* TODO: open modal for time zone update */}
-            <Button variant="ghost" mr="4" onClick={handleOpenTZ}>
-              <Box
-                as="time"
-                dateTime={now.toString()}
-                fontSize="md"
-              >
-                {now.format('h:mmA Z')}
-              </Box>
-            </Button>
-          </Tooltip>
+          <TimezoneDropdown />
           <Menu>
             <MenuButton>
               <Avatar name="Ryan Hamilton" size="sm" color="blue.900" bg="blue.200" />
diff --git a/airflow/ui/src/components/AppContainer/TimezoneDropdown.tsx b/airflow/ui/src/components/AppContainer/TimezoneDropdown.tsx
new file mode 100644
index 0000000000000..f86b64458c25d
--- /dev/null
+++ b/airflow/ui/src/components/AppContainer/TimezoneDropdown.tsx
@@ -0,0 +1,88 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useState } from 'react';
+import {
+  Box,
+  Button,
+  Menu,
+  MenuButton,
+  MenuList,
+  Tooltip,
+} from '@chakra-ui/react';
+import dayjs from 'dayjs';
+import tz from 'dayjs/plugin/timezone';
+import { getTimeZones } from '@vvo/tzdb';
+
+import Select from 'components/MultiSelect';
+import { useTimezoneContext } from 'providers/TimezoneProvider';
+
+dayjs.extend(tz);
+
+interface Option { value: string, label: string }
+
+const TimezoneDropdown: React.FC = () => {
+  const { timezone, setTimezone } = useTimezoneContext();
+  const [now, setNow] = useState(dayjs().tz(timezone));
+
+  const timezones = getTimeZones();
+
+  let currentTimezone;
+  const options = timezones.map(({ name, currentTimeFormat, group }) => {
+    const label = `${currentTimeFormat.substring(0, 6)} ${name.replace(/_/g, ' ')}`;
+    if (name === timezone || group.includes(timezone)) currentTimezone = { label, value: name };
+    return { label, value: name };
+  });
+
+  const onChangeTimezone = (newTimezone: Option | null) => {
+    if (newTimezone) {
+      setTimezone(newTimezone.value);
+      setNow(dayjs().tz(newTimezone.value));
+    }
+  };
+
+  return (
+    <Menu isLazy>
+      <Tooltip label="Change time zone" hasArrow>
+        <MenuButton as={Button} variant="ghost" mr="4">
+          <Box
+            as="time"
+            dateTime={now.toString()}
+            fontSize="md"
+          >
+            {now.format('HH:mm Z')}
+          </Box>
+        </MenuButton>
+      </Tooltip>
+      <MenuList placement="top-end" minWidth="350px">
+        <Box px="3" pb="1">
+          <Select
+            autoFocus
+            options={options}
+            value={currentTimezone}
+            onChange={onChangeTimezone}
+          />
+        </Box>
+      </MenuList>
+    </Menu>
+
+  );
+};
+
+export default TimezoneDropdown;
diff --git a/airflow/ui/src/components/MultiSelect.tsx b/airflow/ui/src/components/MultiSelect.tsx
new file mode 100644
index 0000000000000..3783449124761
--- /dev/null
+++ b/airflow/ui/src/components/MultiSelect.tsx
@@ -0,0 +1,259 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/* eslint-disable no-underscore-dangle */
+import React from 'react';
+import Select, { components as selectComponents, Props as SelectProps } from 'react-select';
+import {
+  Flex,
+  Tag,
+  TagCloseButton,
+  TagLabel,
+  Divider,
+  CloseButton,
+  Center,
+  Box,
+  Portal,
+  StylesProvider,
+  useMultiStyleConfig,
+  useStyles,
+  useTheme,
+  useColorModeValue,
+  RecursiveCSSObject,
+  CSSWithMultiValues,
+} from '@chakra-ui/react';
+import { FiChevronDown } from 'react-icons/fi';
+
+const MultiSelect = ({
+  name = '',
+  styles = {},
+  components = {},
+  ...props
+}: SelectProps): JSX.Element => {
+  const chakraTheme = useTheme();
+
+  const placeholderColor = useColorModeValue(
+    chakraTheme.colors.gray[400],
+    chakraTheme.colors.whiteAlpha[400],
+  );
+
+  const inputColor = useColorModeValue(
+    chakraTheme.colors.gray[800],
+    chakraTheme.colors.whiteAlpha[900],
+  );
+
+  const chakraStyles = {
+    input: (provided: Record<string, any>) => ({
+      ...provided,
+      color: inputColor,
+      lineHeight: 1,
+    }),
+    singleValue: (provided: Record<string, any>) => ({
+      ...provided,
+      color: inputColor,
+      lineHeight: 1,
+    }),
+    menu: (provided: Record<string, any>) => ({
+      ...provided,
+      boxShadow: 'none',
+    }),
+    valueContainer: (provided: Record<string, any>) => ({
+      ...provided,
+      padding: '0.125rem 1rem',
+    }),
+  };
+
+  return (
+    <Select
+      name={name}
+      components={{
+        ...{
+          Control: ({
+            children, innerRef, innerProps, isDisabled, isFocused,
+          }) => {
+            const inputStyles = useMultiStyleConfig('Input', {});
+            return (
+              <StylesProvider value={inputStyles}>
+                <Flex
+                  ref={innerRef}
+                  sx={{
+                    ...inputStyles.field,
+                    p: 0,
+                    overflow: 'hidden',
+                    h: 'auto',
+                    minH: 10,
+                  }}
+                  {...innerProps}
+                  {...(isFocused && { 'data-focus': true })}
+                  {...(isDisabled && { disabled: true })}
+                >
+                  {children}
+                </Flex>
+              </StylesProvider>
+            );
+          },
+          MultiValueContainer: ({
+            children,
+            innerRef,
+            innerProps,
+            data: { isFixed },
+          }) => (
+            <Tag
+              ref={innerRef}
+              {...innerProps}
+              m="0.125rem"
+              variant={isFixed ? 'solid' : 'subtle'}
+            >
+              {children}
+            </Tag>
+          ),
+          MultiValueLabel: ({ children, innerRef, innerProps }) => (
+            <TagLabel ref={innerRef} {...innerProps}>
+              {children}
+            </TagLabel>
+          ),
+          MultiValueRemove: ({
+            children, innerRef, innerProps, data: { isFixed },
+          }) => {
+            if (isFixed) {
+              return null;
+            }
+
+            return (
+              <TagCloseButton ref={innerRef} {...innerProps}>
+                {children}
+              </TagCloseButton>
+            );
+          },
+          IndicatorSeparator: ({ innerProps }) => (
+            <Divider
+              {...innerProps}
+              orientation="vertical"
+              opacity="1"
+            />
+          ),
+          ClearIndicator: ({ innerProps }) => (
+            <CloseButton {...innerProps} size="sm" mx={2} />
+          ),
+          DropdownIndicator: ({ innerProps }) => {
+            const { addon } = useStyles();
+
+            return (
+              <Center
+                {...innerProps}
+                sx={{
+                  ...addon,
+                  h: '100%',
+                  p: 0,
+                  borderRadius: 0,
+                  borderWidth: 0,
+                  cursor: 'pointer',
+                }}
+              >
+                <FiChevronDown height={5} width={5} />
+              </Center>
+            );
+          },
+          // Menu components
+          MenuPortal: ({ children, ...portalProps }) => (
+            <Portal {...portalProps}>
+              {children}
+            </Portal>
+          ),
+          Menu: ({ children, ...menuProps }) => {
+            const menuStyles = useMultiStyleConfig('Menu', {});
+            return (
+              <selectComponents.Menu {...menuProps}>
+                <StylesProvider value={menuStyles}>{children}</StylesProvider>
+              </selectComponents.Menu>
+            );
+          },
+          MenuList: ({
+            innerRef, children, maxHeight,
+          }) => {
+            const { list } = useStyles();
+            return (
+              <Box
+                sx={{
+                  ...list,
+                  maxH: `${maxHeight}px`,
+                  overflowY: 'auto',
+                }}
+                ref={innerRef}
+              >
+                {children}
+              </Box>
+            );
+          },
+          GroupHeading: ({ innerProps, children }) => {
+            const { groupTitle } = useStyles();
+            return (
+              <Box sx={groupTitle} {...innerProps}>
+                {children}
+              </Box>
+            );
+          },
+          Option: ({
+            innerRef, innerProps, children, isFocused, isDisabled,
+          }) => {
+            const { item } = useStyles();
+            interface ItemProps extends CSSWithMultiValues {
+              _disabled: CSSWithMultiValues,
+              _focus: CSSWithMultiValues,
+            }
+            return (
+              <Box
+                sx={{
+                  ...item,
+                  w: '100%',
+                  textAlign: 'left',
+                  cursor: 'pointer',
+                  bg: isFocused ? (item as RecursiveCSSObject<ItemProps>)._focus.bg : 'transparent',
+                  ...(isDisabled && (item as RecursiveCSSObject<ItemProps>)._disabled),
+                }}
+                ref={innerRef}
+                {...innerProps}
+                {...(isDisabled && { disabled: true })}
+              >
+                {children}
+              </Box>
+            );
+          },
+        },
+        ...components,
+      }}
+      styles={{
+        ...chakraStyles,
+        ...styles,
+      }}
+      theme={(baseTheme) => ({
+        ...baseTheme,
+        borderRadius: chakraTheme.radii.md,
+        colors: {
+          ...baseTheme.colors,
+          neutral50: placeholderColor, // placeholder text color
+          neutral40: placeholderColor, // noOptionsMessage color
+        },
+      })}
+      {...props}
+    />
+  );
+};
+
+export default MultiSelect;
diff --git a/airflow/ui/src/providers/TimezoneProvider.tsx b/airflow/ui/src/providers/TimezoneProvider.tsx
index 4864702f263df..193e8ce557860 100644
--- a/airflow/ui/src/providers/TimezoneProvider.tsx
+++ b/airflow/ui/src/providers/TimezoneProvider.tsx
@@ -45,9 +45,9 @@ type Props = {
 
 const TimezoneProvider = ({ children }: Props): ReactElement => {
   // TODO: add in default_timezone when GET /ui-metadata is available
-  // guess timezone on browser or default to utc
-  const [timezone, setTimezone] = useState(dayjs.tz.guess() || 'UTC');
-
+  // guess timezone on browser or default to utc and don't guess when testing
+  const isTest = process.env.NODE_ENV === 'test';
+  const [timezone, setTimezone] = useState(isTest ? 'UTC' : dayjs.tz.guess());
   useEffect(() => {
     dayjs.tz.setDefault(timezone);
   }, [timezone]);
diff --git a/airflow/ui/src/views/Pipelines/PipelinesTable.tsx b/airflow/ui/src/views/Pipelines/PipelinesTable.tsx
new file mode 100644
index 0000000000000..8b1a4daa98515
--- /dev/null
+++ b/airflow/ui/src/views/Pipelines/PipelinesTable.tsx
@@ -0,0 +1,77 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import {
+  Alert,
+  AlertIcon,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+} from '@chakra-ui/react';
+
+import { defaultDags } from 'api/defaults';
+import { useDags } from 'api';
+import type { Dag } from 'interfaces';
+import Row from './Row';
+
+const PipelinesTable: React.FC = () => {
+  const { data: { dags } = defaultDags, isLoading, error } = useDags();
+
+  return (
+    <>
+      {error && (
+        <Alert status="error" my="4" key={error.message}>
+          <AlertIcon />
+          {error.message}
+        </Alert>
+      )}
+      <Table size="sm">
+        <Thead position="sticky" top={0}>
+          <Tr
+            borderBottomWidth="1px"
+            textAlign="left"
+          >
+            <Th />
+            <Th>DAG ID</Th>
+            <Th />
+          </Tr>
+        </Thead>
+        <Tbody>
+          {isLoading && (
+          <Tr>
+            <Td colSpan={2}>Loading…</Td>
+          </Tr>
+          )}
+          {(!isLoading && !dags.length) && (
+          <Tr>
+            <Td colSpan={2}>No Pipelines found.</Td>
+          </Tr>
+          )}
+          {dags.map((dag: Dag) => <Row key={dag.dagId} dag={dag} />)}
+        </Tbody>
+      </Table>
+    </>
+  );
+};
+
+export default PipelinesTable;
diff --git a/airflow/ui/src/views/Pipelines/index.tsx b/airflow/ui/src/views/Pipelines/index.tsx
index c5fbcdcd5c0bf..13cfc6b356f18 100644
--- a/airflow/ui/src/views/Pipelines/index.tsx
+++ b/airflow/ui/src/views/Pipelines/index.tsx
@@ -18,61 +18,15 @@
  */
 
 import React from 'react';
-import {
-  Alert,
-  AlertIcon,
-  Table,
-  Thead,
-  Tbody,
-  Tr,
-  Th,
-  Td,
-} from '@chakra-ui/react';
 
 import AppContainer from 'components/AppContainer';
-import { defaultDags } from 'api/defaults';
-import { useDags } from 'api';
-import type { Dag } from 'interfaces';
-import Row from './Row';
+import PipelinesTable from './PipelinesTable';
 
-const Pipelines: React.FC = () => {
-  const { data: { dags } = defaultDags, isLoading, error } = useDags();
-
-  return (
-    <AppContainer>
-      {error && (
-        <Alert status="error" my="4" key={error.message}>
-          <AlertIcon />
-          {error.message}
-        </Alert>
-      )}
-      <Table size="sm">
-        <Thead position="sticky" top={0}>
-          <Tr
-            borderBottomWidth="1px"
-            textAlign="left"
-          >
-            <Th />
-            <Th>DAG ID</Th>
-            <Th />
-          </Tr>
-        </Thead>
-        <Tbody>
-          {isLoading && (
-          <Tr>
-            <Td colSpan={2}>Loading…</Td>
-          </Tr>
-          )}
-          {(!isLoading && !dags.length) && (
-          <Tr>
-            <Td colSpan={2}>No Pipelines found.</Td>
-          </Tr>
-          )}
-          {dags.map((dag: Dag) => <Row key={dag.dagId} dag={dag} />)}
-        </Tbody>
-      </Table>
-    </AppContainer>
-  );
-};
+// A separate PipelinesTable component limits how much is rerendered on data refetch
+const Pipelines: React.FC = () => (
+  <AppContainer>
+    <PipelinesTable />
+  </AppContainer>
+);
 
 export default Pipelines;
diff --git a/airflow/ui/test/TimezoneDropdown.test.tsx b/airflow/ui/test/TimezoneDropdown.test.tsx
new file mode 100644
index 0000000000000..66051e6416c64
--- /dev/null
+++ b/airflow/ui/test/TimezoneDropdown.test.tsx
@@ -0,0 +1,59 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+
+import TimezoneDropdown from 'components/AppContainer/TimezoneDropdown';
+import TimezoneProvider from 'providers/TimezoneProvider';
+import { ChakraWrapper } from './utils';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+describe('test timezone dropdown', () => {
+  test('Can search for a new timezone and the date changes', () => {
+    const { getByText } = render(
+      <TimezoneProvider>
+        <TimezoneDropdown />
+      </TimezoneProvider>,
+      { wrapper: ChakraWrapper },
+    );
+
+    const initialTime = dayjs().tz('UTC').format('HH:mm Z');
+
+    expect(getByText(initialTime)).toBeInTheDocument();
+    const button = getByText(initialTime);
+    fireEvent.click(button);
+    const focusedElement = document.activeElement;
+    if (focusedElement) {
+      fireEvent.change(focusedElement, { target: { value: 'Anch' } });
+    }
+    const option = getByText('-08:00 America/Anchorage');
+    expect(option).toBeInTheDocument();
+    fireEvent.click(option);
+
+    expect(getByText(dayjs().tz('America/Anchorage').format('HH:mm Z'))).toBeInTheDocument();
+  });
+});
diff --git a/airflow/ui/test/utils.tsx b/airflow/ui/test/utils.tsx
index df662b001cac5..e2d134710d218 100644
--- a/airflow/ui/test/utils.tsx
+++ b/airflow/ui/test/utils.tsx
@@ -17,10 +17,12 @@
  * under the License.
  */
 
+import { ChakraProvider } from '@chakra-ui/react';
 import { createMemoryHistory } from 'history';
 import React from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { Router } from 'react-router-dom';
+import theme from 'theme';
 
 export const url: string = `${process.env.WEBSERVER_URL}/api/v1/` || '';
 
@@ -44,3 +46,7 @@ export const RouterWrapper: React.FC<{}> = ({ children }) => {
   const history = createMemoryHistory();
   return <Router history={history}>{children}</Router>;
 };
+
+export const ChakraWrapper: React.FC<{}> = ({ children }) => (
+  <ChakraProvider theme={theme}>{children}</ChakraProvider>
+);
diff --git a/airflow/ui/yarn.lock b/airflow/ui/yarn.lock
index 26dfd8793aa89..52a3e8c643602 100644
--- a/airflow/ui/yarn.lock
+++ b/airflow/ui/yarn.lock
@@ -912,6 +912,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.0", "@babel/runtime@^7.8.7":
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
+  integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.12.13", "@babel/template@^7.3.3":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327"
@@ -950,496 +957,532 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@chakra-ui/accordion@1.1.4":
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/accordion/-/accordion-1.1.4.tgz#7f114ee546185a9cfc3fc0dfbbb63daaae2af8cb"
-  integrity sha512-8SBSZlxtGuZEi9iXeVF+V9ziM7RH1MW1WJ0K6AcQQVU8uyMa6Ld+FWzsROawwkEJgVCrrd3tFH9coY/0ZXlZRQ==
+"@chakra-ui/accordion@1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/accordion/-/accordion-1.3.0.tgz#60a8cb65e68a7ea74ee64236a605250731a9d45a"
+  integrity sha512-gfLzgYAigq4FMjy48uzI6QRWgB8qDTZGt9Bgg+JgBmg8DL2Cgi5qL0Q3So5KJWP0NC04fxEUMNstrBlL59lIGw==
   dependencies:
-    "@chakra-ui/descendant" "1.0.9"
-    "@chakra-ui/hooks" "1.2.0"
-    "@chakra-ui/icon" "1.1.3"
-    "@chakra-ui/transition" "1.1.0"
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/descendant" "2.0.0"
+    "@chakra-ui/hooks" "1.5.1"
+    "@chakra-ui/icon" "1.1.8"
+    "@chakra-ui/react-utils" "1.1.2"
+    "@chakra-ui/transition" "1.2.2"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/alert@1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/alert/-/alert-1.1.3.tgz#05b86d62b4a20d5e0b4c88be788a79cd5666e071"
-  integrity sha512-Q/A2K6m/FqN4W/bNh+OAPzrwNGGGS9yxznPTQMHC0Map34t0/pP2A/luKC00B0oDHhF9AAcLosjn3NXhphT2pw==
+"@chakra-ui/alert@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/alert/-/alert-1.2.4.tgz#c7b36da60f40cc7fb748caaee045e6e66431457c"
+  integrity sha512-Ql46IUFU+BPPZetTSfoAyeecT/wKlfudeidW12aFskQa2j/g+YytXyHBbDfkZYgtnWzoZOsO2itV8sqqdJ4ieQ==
   dependencies:
-    "@chakra-ui/icon" "1.1.3"
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/icon" "1.1.8"
+    "@chakra-ui/react-utils" "1.1.2"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/avatar@1.1.4":
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/avatar/-/avatar-1.1.4.tgz#63a41624fabee5cad35380f4cd1ced3bc8a4d413"
-  integrity sha512-/l7ibd8at75gIW3WzU9cis0+o5lWfwgUO4oI9yevFgllSyyPgwgZhdR/lcTQmJlmEuA0eaawQPM3GN8LsJfFnQ==
+"@chakra-ui/avatar@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/avatar/-/avatar-1.2.4.tgz#d13dae1106805d512b19506d95294f5e22a60db7"
+  integrity sha512-6l6sEHUlVWZUehfYm5hygHoMMOup7gwcB1354iZON67IiEOKTWgoZRjo2Vt85pdB2QZU7RCOAhmOltpny5SPZw==
   dependencies:
-    "@chakra-ui/image" "1.0.9"
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/image" "1.0.14"
+    "@chakra-ui/react-utils" "1.1.2"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/breadcrumb@1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/breadcrumb/-/breadcrumb-1.1.3.tgz#956f58ac2e349a51dae47cad8139df2534c6ce3e"
-  integrity sha512-FpHlrJiheSQ6SAXvvZMp7juMOnaYeGFtmz4FK1n4sDaaim6jy7haMxbxY6yINOhMC/FGjpdpLLjdK0lPKUuZPw==
+"@chakra-ui/breadcrumb@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/breadcrumb/-/breadcrumb-1.2.4.tgz#401e3abfb8c28917311e3e0ef6d2c94a04b33fc2"
+  integrity sha512-ZQwNjUAnSVpySfZN7KTP9CUUd/+ttuMCbwYHWx+tbirFVmQeyA7/YuIbh0KNlvB0/pVMSH43DRHyImj3dICEAw==
   dependencies:
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/react-utils" "1.1.2"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/button@1.1.4":
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/button/-/button-1.1.4.tgz#6b474f56f51d46115894342a8a06a2f5321faedc"
-  integrity sha512-xLrISCqC/oe+QuBfhfTmdxCNbgad2dz5lu2BZ9TE6d1ppeP13RtFArQHaJ9/0wUVs3Oke6+ksSr1oCvGXvDadA==
+"@chakra-ui/button@1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/button/-/button-1.3.1.tgz#23c248e7d0700bb3cc36eb658435ab845b8bb9ab"
+  integrity sha512-TqoMjKxvrbPaVYK+rRYPZw1YavbvAIdRiyuYFUvmQHNZTHeHLKlQbgJI2K6uYI+MduhU618CDAloXnKxn7mmOA==
   dependencies:
-    "@chakra-ui/spinner" "1.1.3"
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/react-utils" "1.1.2"
+    "@chakra-ui/spinner" "1.1.8"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/checkbox@1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/checkbox/-/checkbox-1.3.0.tgz#51874dcdbc038ac2d896ddd9c327f966619a3353"
-  integrity sha512-erZxnK7ybI7ruyAQaDaDzPEV4eL+AJgP0dWQBzssLwOUhLqYkLG5km/tmgZZzfwg5A62WaBf9QT0tZymWTJ+ng==
+"@chakra-ui/checkbox@1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/checkbox/-/checkbox-1.5.1.tgz#a84e0d18214d6dc71f33d30ae9b501b98849d8b8"
+  integrity sha512-j+OX3rrqj98K4hMu7irxc4FWd639yFdUgUVor7ze9iSSBFzt5lfLXBBjzfy1lFB3GmbMNZCobhO7eD1bNug8sA==
   dependencies:
-    "@chakra-ui/hooks" "1.2.0"
-    "@chakra-ui/utils" "1.4.0"
-    "@chakra-ui/visually-hidden" "1.0.6"
+    "@chakra-ui/hooks" "1.5.1"
+    "@chakra-ui/react-utils" "1.1.2"
+    "@chakra-ui/utils" "1.7.0"
+    "@chakra-ui/visually-hidden" "1.0.11"
 
-"@chakra-ui/clickable@1.0.6":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/clickable/-/clickable-1.0.6.tgz#9ab45fbbfe01ac484f5a3d6f5c26e13000353d52"
-  integrity sha512-k4+mS2l3GbYbJbdIVpZzAB3xQ9EiECUoMmlZKp+NHh9pUR2XZWSmjVhfedVyk7WuOfpXWxAhwhgCVrM5+hRd9w==
+"@chakra-ui/clickable@1.1.4":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/clickable/-/clickable-1.1.4.tgz#ff813fdfc5a31a2eb2dc27f39221a9922b71a04a"
+  integrity sha512-ETpjwr50u7baOujex4Og1om2P/nfGss8f6YYvsewGqI81OUUmOpz2sr87I+gvoZwqwMHQkOksOY1L2BK1MrO9A==
   dependencies:
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/react-utils" "1.1.2"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/close-button@1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/close-button/-/close-button-1.1.3.tgz#db0a0c62549a14c529deae8184d20466170fe3e8"
-  integrity sha512-pLj5E2or8VdQ69w/ZZ/B09E446B6wbmJFQ8fuqnaxOeBZKp3VtvOLXWDg23SsijKKgw71EBq0O7qUOKvQRygKA==
+"@chakra-ui/close-button@1.1.8":
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/close-button/-/close-button-1.1.8.tgz#02a208c13202a53dc7777f75d7f7fcc2011ab5dc"
+  integrity sha512-TsDeY2QCyrdDSkB6B0LSh2IZleJ4gkkr+KZaL46WxHRim3CoqrbicQP9n9QZxXrTGa+lsb5+jvB2YrO6I8qquQ==
   dependencies:
-    "@chakra-ui/icon" "1.1.3"
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/icon" "1.1.8"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/color-mode@1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/color-mode/-/color-mode-1.1.2.tgz#824ea170b04152021bc5c39a7f17f7f0b6d59801"
-  integrity sha512-RnJvLFNmLyC9bnYgzunJ19pwr7chc3T6mvZJG4Goqxdn8jPQ3QJPh6A0vA5tvIIgbXqvIPn8imknBntHq1P0kw==
+"@chakra-ui/color-mode@1.1.7":
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/color-mode/-/color-mode-1.1.7.tgz#ad5fc6c631884906ed60ab35849dd4270d27a075"
+  integrity sha512-av2lH0iFinL4rN1BlSxu8eoted4p+qzOIiLhXcGFNodp73r9I3A2vspaZYke/xMrAwFaZq6wCIl+BwXNHAGRDA==
   dependencies:
-    "@chakra-ui/hooks" "1.2.0"
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/hooks" "1.5.1"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/control-box@1.0.6":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/control-box/-/control-box-1.0.6.tgz#aa6f2b385fb22cf2033e1e567db87321a70bfb6e"
-  integrity sha512-5Tkwre9BF3wifx6pe5cgBlpcAZaJWhLF2KGs29lsmjOHV14JvLff9sPNaqNIaugRZY25bF4JVgMXg42aIfS17Q==
+"@chakra-ui/control-box@1.0.11":
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/control-box/-/control-box-1.0.11.tgz#616afe751cd1b740488afd0ed77b666557307e9e"
+  integrity sha512-NQCa/HKMG8gW0vOLc+iCuiLRxv3w7K/Hc63ThneW3uR2awAH5hjmO+Xh+0HLYvePocJulqVUbjuJxoQGLMcFPA==
   dependencies:
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/counter@1.0.9":
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/counter/-/counter-1.0.9.tgz#e0a107293c433856e17de8ec6d755b891fc60e9f"
-  integrity sha512-D1iXgA2rjHhZx2Gm3Tp3BD6fCX+LMvI0D/SkWGnJ5ES4n/0QXk1AoEAaz7jIrk6nEY1Sv/U4GxErRTV3KtSOzw==
+"@chakra-ui/counter@1.1.4":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/counter/-/counter-1.1.4.tgz#a2c63d96e9cdb7b94aaeb041ea4757f0c4eb3163"
+  integrity sha512-fmhAbpOdw1PyZs7CiW5jltaBacHIyN+9HyMj6igqJnLaxYvvphUdv94+2pv1nAPgWSLRah3EzNSnjVjXy+5OGA==
   dependencies:
-    "@chakra-ui/hooks" "1.2.0"
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/hooks" "1.5.1"
+    "@chakra-ui/utils" "1.7.0"
 
 "@chakra-ui/css-reset@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@chakra-ui/css-reset/-/css-reset-1.0.0.tgz#8395921b35ef27bee0579a4d730c5ab7f7b39734"
   integrity sha512-UaPsImGHvCgFO3ayp6Ugafu2/3/EG8wlW/8Y9Ihfk1UFv8cpV+3BfWKmuZ7IcmxcBL9dkP6E8p3/M1T0FB92hg==
 
-"@chakra-ui/descendant@1.0.9":
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/descendant/-/descendant-1.0.9.tgz#acc0470c42d5ec962586a91e7165c8e654377f5f"
-  integrity sha512-N/s5+mr7SfDHdMDKcXaJsISYxtIoUTy+Wj9fYbVO2ABx5TrMWc/6Y+3sIlEHzobpsAGfaPTLUhTUYT9P82zGSw==
+"@chakra-ui/descendant@2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/descendant/-/descendant-2.0.0.tgz#719a2f585a73e60db01233a9193dbf22823355a5"
+  integrity sha512-kdesvjzeTxoLStpgbtMN5JMO3qhhRmZVVH8u2juTB9QIPGs1052Brb3Hcv96kQj7RyigCvarFF9KmvX4BUSdUA==
   dependencies:
-    "@chakra-ui/hooks" "1.2.0"
+    "@chakra-ui/react-utils" "^1.1.2"
 
-"@chakra-ui/editable@1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/editable/-/editable-1.1.3.tgz#7abaa3ebc5bcd2402d2a39d47948c437aa959eae"
-  integrity sha512-jH38V+LQveXAxB80GAw5kXkB4Q0BbV+1YU/u5fyxYjoQ2GSkTe34kUiWXzCtYdnHska8xaZ08qtkfEcS5eDZsQ==
+"@chakra-ui/editable@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/editable/-/editable-1.2.4.tgz#a481d37ff65040dccd6e94320ffffb1f9f0afc7d"
+  integrity sha512-DftEZTz7S0KZX9No5dw3MNVOWXZnOSt2m15/SqxUcZnkJgTLRtK9yPaqVjZFBcjvgh4QNn2HEY15oy9VSWF0Nw==
   dependencies:
-    "@chakra-ui/hooks" "1.2.0"
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/hooks" "1.5.1"
+    "@chakra-ui/react-utils" "1.1.2"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/focus-lock@1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/focus-lock/-/focus-lock-1.1.2.tgz#2e8fda42887372b39b440c1b90b9fa380dcc0376"
-  integrity sha512-t9CYCX+E/9rqVCpFq7emIWMkTYPSl5fBJtuTUoWBNVXeyDBHB+Kfg7miM2ET0Re2By4ZFTCofcCs5sTYHGbeQA==
+"@chakra-ui/focus-lock@1.1.7":
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/focus-lock/-/focus-lock-1.1.7.tgz#b15d9786621ddff9b7eb07e81f70b6565a6693f1"
+  integrity sha512-Z3iscVlil0QTrTrv2MCPs4biMuMqXoNoSKDrz7lLoYHQWhiHIMMx9kivyvAXqxai7M1bPcGxvh8XwwoZfv2V3A==
   dependencies:
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/utils" "1.7.0"
     react-focus-lock "2.5.0"
 
-"@chakra-ui/form-control@1.2.3":
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/form-control/-/form-control-1.2.3.tgz#8ee931d769c22afbcdf62e304751de9a440130f2"
-  integrity sha512-FwT+Bet7wHg4yPZBjcJd08TVtHMgVc33iNT1gUKluMskHH1dPiXvgH0+bNLlQcjO3869qP6rqG0ul4BuWga/XA==
+"@chakra-ui/form-control@1.3.4":
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/form-control/-/form-control-1.3.4.tgz#dd19693cbba5ca19ff4a70a680011509406d4b7a"
+  integrity sha512-BYJaZMhvAo8csqQ9mNp9i4gACLr/DraJstF1M9WRKjlpst7WK6+bRmG0Cn0ifx8EKfag3VaZMf/iOkoZjF0xuA==
   dependencies:
-    "@chakra-ui/hooks" "1.2.0"
-    "@chakra-ui/icon" "1.1.3"
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/hooks" "1.5.1"
+    "@chakra-ui/icon" "1.1.8"
+    "@chakra-ui/react-utils" "1.1.2"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/hooks@1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/hooks/-/hooks-1.2.0.tgz#4faedf2840c9c8bfad6dac289cdd13ffbb36e6a5"
-  integrity sha512-un6FuNRVtX4YKT842otuthOPvsBMsRfiDFSu0afoOZHcxfUPmtPFdE0mWQGlyAcolaj5wkL7zxXR6tbY47FnBA==
+"@chakra-ui/hooks@1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/hooks/-/hooks-1.5.1.tgz#cae769a35fda0bb07512b52bf4e13fba740a72c5"
+  integrity sha512-vKAXXsvOPu+juy07Acn8ozRCeCc/hteJaAMLE2QR/nHcjU/45+ClkCO23Q0upI1hBlV5t/NwUzkUQ+U1rTxAyw==
   dependencies:
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/react-utils" "1.1.2"
+    "@chakra-ui/utils" "1.7.0"
     compute-scroll-into-view "1.0.14"
     copy-to-clipboard "3.3.1"
 
-"@chakra-ui/icon@1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/icon/-/icon-1.1.3.tgz#5fbc310652fa20da973ea9422ed5e1a654596d23"
-  integrity sha512-XZ9RTU0J/qB5bZawUK5yk6YN3P2fi74aTLap1qygmodAPo5sIroRzfuXndezjAYFhuRjI62zfSs/FVhwJyhmsw==
-  dependencies:
-    "@chakra-ui/utils" "1.4.0"
-
-"@chakra-ui/image@1.0.9":
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/image/-/image-1.0.9.tgz#bd301f6028000d9dc3370c897868b465edc39ed5"
-  integrity sha512-GpfwgXzVC/IVkcFGUX0I4/NcQafjdCCSVNkdTRxYo0v368VrXb4087i2ypx+7w4PgRqZv3ABunM2BbbXE35U0w==
+"@chakra-ui/icon@1.1.8":
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/icon/-/icon-1.1.8.tgz#fbee1c8e0ae848daeb05275049f0764d854dca59"
+  integrity sha512-kbIPtRd9pD/iTXyzRn2s10w4uX54nNTnoNy/wP0k1145lOHPtlumRMJNSV6cxy+pnwS/YN6xNACfKy6yRQyIVA==
   dependencies:
-    "@chakra-ui/hooks" "1.2.0"
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/input@1.1.4":
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/input/-/input-1.1.4.tgz#c4a7ada280df66fc0fc3e1fa1edb2bb4a4d286e0"
-  integrity sha512-dk2JD7tfRmQLqbQXpDLrkRjVpdZeVIqNKPqzQFOTApzQPxyF0/wHVbrPtipQCzlqwGuzhF0WDVc+G/KAQ+3SmA==
+"@chakra-ui/image@1.0.14":
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/image/-/image-1.0.14.tgz#c907dfbfb30da9892b59a1e323d9d09aef50e4e6"
+  integrity sha512-OvtXgXEPSfB+XVhMDNLMBMC1zwVZ3avgh3yDztYkkAl6y7LH756NX8OkW9OEYMIMDQWjjIp63dQufgwik1jzug==
   dependencies:
-    "@chakra-ui/form-control" "1.2.3"
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/hooks" "1.5.1"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/layout@1.3.3":
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/layout/-/layout-1.3.3.tgz#837d2d7be4d2c8f57b3aee2eb9288f740ffbb0d4"
-  integrity sha512-PvJSNAkTNmeYv10J0tD1oBZdKSeWDkrb0hrF8IrGtmLztL+gA5fGMIkNN4/bWq25mqI7mCRHqwYei4PhhZKYXg==
+"@chakra-ui/input@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/input/-/input-1.2.4.tgz#34ee847c3f3751e01cd9c541b2a889a61abacd4e"
+  integrity sha512-TCSOQpraTqCetlJw8xYvuu6XhijwA0387s1N7+zM/sb1+HgWGG/qwaG6VEPqOrJ9r7nTgW7FkYA1Vc3ol8BOlw==
   dependencies:
-    "@chakra-ui/icon" "1.1.3"
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/form-control" "1.3.4"
+    "@chakra-ui/react-utils" "1.1.2"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/live-region@1.0.6":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/live-region/-/live-region-1.0.6.tgz#85d20b273d35a27ebe35e98cc9f6c9d66500e38e"
-  integrity sha512-pLtOXsb4H0+WNtxro3KGjaoTmruvXy7uedcf61lm3d3QaRAmA+R5nCjnGayvSGK9ex8Wr+CJQSzTUUijNzKiwg==
+"@chakra-ui/layout@1.4.4":
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/layout/-/layout-1.4.4.tgz#3db5b364b2b44e4c8c7ad6b773357aed41519090"
+  integrity sha512-CtcwgVivcBOM7bn+BHa/BbZ60moLvYWA9V2ukqhKJxLfSBoh/RTqH1q4Qmig+KbQ/xdbKcHTvanJjrMyn1jrpg==
   dependencies:
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/icon" "1.1.8"
+    "@chakra-ui/react-utils" "1.1.2"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/media-query@1.0.7":
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/media-query/-/media-query-1.0.7.tgz#08d9011ef7a5dcb238026fd35549257e21f1fcac"
-  integrity sha512-loonqcxL4Buqt6c558D8fR6zwQiL4yRqTG3LZZMP3UtFo4ja9tyFI0bFtmnP1PYMgOrlITkty82KuLshppwuFg==
+"@chakra-ui/live-region@1.0.11":
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/live-region/-/live-region-1.0.11.tgz#34092c8431b952f5b9739ce3eba7a9a13d351b90"
+  integrity sha512-/YsiA7cLuphlkvsfbEnlohSen8A+vPfi2XmzEcribO8P29qKd4yU5LjvGCGgQWNbiA6CcJmaKMJ1/yR3fRb8dQ==
   dependencies:
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/menu@1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/menu/-/menu-1.2.0.tgz#489738547f69d2d36a67cb3863cb620b0454fd97"
-  integrity sha512-OYVlc1F2QNtCMWdrs611DnfqbLNTkKtpKUDJnaxGB8lzHY4aN0rPrYo0eIiY+10TCDLXCm7o4jWd+vHn1zqBGA==
+"@chakra-ui/media-query@1.0.12":
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/media-query/-/media-query-1.0.12.tgz#84d71f3b2053c194587a596e43947b34da50d104"
+  integrity sha512-Q2MKzjVxWRo3bfj3GIhzLQqXRNAYZ0gIq/ga+ywSZ4Khfrpcpt/zUnP+mA6+wL7jFMwV4Tw+sC1j3/KxPOMX+Q==
   dependencies:
-    "@chakra-ui/clickable" "1.0.6"
-    "@chakra-ui/descendant" "1.0.9"
-    "@chakra-ui/hooks" "1.2.0"
-    "@chakra-ui/popper" "2.0.0"
-    "@chakra-ui/transition" "1.1.0"
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/modal@1.7.0":
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/modal/-/modal-1.7.0.tgz#801ff8dbb27e4f740739768500973e6097536ba4"
-  integrity sha512-TxXcGbMdNkiD4WU55FLshAk4XlHvoUraKAJ1rcI5AcNc/DXuW8wy9P1t8Ho0iGgq1xRWQjzDgDfgBOh98fO7fQ==
-  dependencies:
-    "@chakra-ui/close-button" "1.1.3"
-    "@chakra-ui/focus-lock" "1.1.2"
-    "@chakra-ui/hooks" "1.2.0"
-    "@chakra-ui/portal" "1.1.3"
-    "@chakra-ui/transition" "1.1.0"
-    "@chakra-ui/utils" "1.4.0"
+"@chakra-ui/menu@1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/menu/-/menu-1.6.0.tgz#9998424655a3ddb984fd558b537e3daa1b7b3352"
+  integrity sha512-6fMTEcUYYuRi2vpfrgSErWE2KJ23jq280V4R0U8oIyuPdYpd8Te173VVTXLHnh9ArFOvq4SXdk8wZ05MZ05Xbg==
+  dependencies:
+    "@chakra-ui/clickable" "1.1.4"
+    "@chakra-ui/descendant" "2.0.0"
+    "@chakra-ui/hooks" "1.5.1"
+    "@chakra-ui/popper" "2.1.2"
+    "@chakra-ui/react-utils" "1.1.2"
+    "@chakra-ui/transition" "1.2.2"
+    "@chakra-ui/utils" "1.7.0"
+
+"@chakra-ui/modal@1.8.4":
+  version "1.8.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/modal/-/modal-1.8.4.tgz#50821e09581342b4db9c39439b923625003811a1"
+  integrity sha512-u1v2W4Zulz6eQzqVDDyyX/NlRIkOLDTvejUOSW9H1jlRYxFD349yulAPq2c9JxRCoT07/Qu0Pz4k9tITC5IvGQ==
+  dependencies:
+    "@chakra-ui/close-button" "1.1.8"
+    "@chakra-ui/focus-lock" "1.1.7"
+    "@chakra-ui/hooks" "1.5.1"
+    "@chakra-ui/portal" "1.2.4"
+    "@chakra-ui/react-utils" "1.1.2"
+    "@chakra-ui/transition" "1.2.2"
+    "@chakra-ui/utils" "1.7.0"
     aria-hidden "^1.1.1"
     react-remove-scroll "2.4.1"
 
-"@chakra-ui/number-input@1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/number-input/-/number-input-1.1.3.tgz#6035270af9e9177cb64521a94f9ab76b067e4eb3"
-  integrity sha512-vISd0obMse4EWVkowIyTE4JUfhzrPCjQkzdv9PgLEk1b5F5TVcKMCDAwPlsHhQGciaKnXRaMcOCTVeRS8oUoUQ==
+"@chakra-ui/number-input@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/number-input/-/number-input-1.2.4.tgz#0ca307805a08c8771467136355babbc6e4ac24c9"
+  integrity sha512-2szmts7ex7EEbZZ2hqxk4lV0IFqDB1+/Ga2MoR9QkW8v+Vv9rPSzVrGwaltDlK0Rr9UXYvgBlnNpqhqbvQg4AA==
   dependencies:
-    "@chakra-ui/counter" "1.0.9"
-    "@chakra-ui/form-control" "1.2.3"
-    "@chakra-ui/hooks" "1.2.0"
-    "@chakra-ui/icon" "1.1.3"
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/counter" "1.1.4"
+    "@chakra-ui/form-control" "1.3.4"
+    "@chakra-ui/hooks" "1.5.1"
+    "@chakra-ui/icon" "1.1.8"
+    "@chakra-ui/react-utils" "1.1.2"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/pin-input@1.4.2":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/pin-input/-/pin-input-1.4.2.tgz#01b461210eca8b7878b2a49b9cdf5c96a1f9082d"
-  integrity sha512-7aS2IP67hfV1agnji8FemBJl1M7zqu2X5DTIy2NxuTNqU3/H8douMwVnNUrjavSltve4OYycxY8gPK/h9u4/uQ==
+"@chakra-ui/pin-input@1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/pin-input/-/pin-input-1.6.0.tgz#e15339f6a760a5eb7a5151d3c4b5998fa2860d6f"
+  integrity sha512-Pri6lD+APiIkDkWvpgdFFXy4PzFj1XgxbvlmPUlafo97EwCtPSg3QWtOCdPWKtSpWMj1W4X/ZIsmelm/K9MKkw==
   dependencies:
-    "@chakra-ui/descendant" "1.0.9"
-    "@chakra-ui/hooks" "1.2.0"
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/descendant" "2.0.0"
+    "@chakra-ui/hooks" "1.5.1"
+    "@chakra-ui/react-utils" "1.1.2"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/popover@1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/popover/-/popover-1.3.0.tgz#df32ede440f36c26fadc3dcc754955aa9ddbd462"
-  integrity sha512-iVDe1A8BU4kImXKdOnaHnA0swcMXkkBYMxuTyhXVqvJwb+8uZgZ1OUdvYOgSEk/dA+idMQX7pINE0snw0W7USg==
+"@chakra-ui/popover@1.6.1":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/popover/-/popover-1.6.1.tgz#cc7c81f4967a9038293bdb648116331c59983b28"
+  integrity sha512-w3xZK9t65AsiGuU6YXf1cpN/GBz4eJWZCDKVwJriHlKkq6L9umPtVjDGMgKegoTwnCokl8gFSxZp9yr2ACOQHQ==
   dependencies:
-    "@chakra-ui/close-button" "1.1.3"
-    "@chakra-ui/hooks" "1.2.0"
-    "@chakra-ui/popper" "2.0.0"
-    "@chakra-ui/portal" "1.1.3"
-    "@chakra-ui/transition" "1.1.0"
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/close-button" "1.1.8"
+    "@chakra-ui/hooks" "1.5.1"
+    "@chakra-ui/popper" "2.1.2"
+    "@chakra-ui/react-utils" "1.1.2"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/popper@2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/popper/-/popper-2.0.0.tgz#48cf74a434cd4e292b9304b65ef8a391b149ddd9"
-  integrity sha512-7qm1Zms9YOhtx48Zo8TvZ5pw0Uz91gK7D+2B2Lu9W3hNovDUA0/UuHcSnDf9iBZAQqwNkyYakXtJsYPOEdhbkw==
+"@chakra-ui/popper@2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/popper/-/popper-2.1.2.tgz#a3948c338c0ff4948a659fad34dcbc3d2bf7ea31"
+  integrity sha512-X0GlUwOlX4coDO+JOYR52HZt8HsWGZmwL8GWr+DmRZvjBfRl7zKv8cAd4urYz5zwAo9TQfMb5bitjM/HPl3MvA==
   dependencies:
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/react-utils" "1.1.2"
     "@popperjs/core" "2.4.4"
 
-"@chakra-ui/portal@1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/portal/-/portal-1.1.3.tgz#a74f4f98540c3b6c3fbcb143831292374664af14"
-  integrity sha512-8CvC7YCFcvJV+LyuEP6EDMEZKl+C0u4A6L6JeUbkGNMqY3QcWhg+7+v0jrnq4ZvpZdpBSlzqRYX+dvZTJkZYjg==
+"@chakra-ui/portal@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/portal/-/portal-1.2.4.tgz#a9038e9ed1ebd73834588fbe2c97230b1c92be79"
+  integrity sha512-clxYTpXQVSGcL6/+xrhYwKO9syOiPKrQLoe1fUJRp5QtppQ+JHJLKjbRkPujImHczMm2NZPfEqvuKYyHaZjDjw==
   dependencies:
-    "@chakra-ui/hooks" "1.2.0"
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/hooks" "1.5.1"
+    "@chakra-ui/react-utils" "1.1.2"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/progress@1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/progress/-/progress-1.1.3.tgz#80d61c3dbbb35a1e692d209fb370583b584c2ddf"
-  integrity sha512-SLxLfDAFQ1kiIp8SKwTUPaCldiHKgLg8F9exOt0KDX0nUen/u1PLvpeFKh+rX850ahn+/3tpIUOg1gPq4S9USw==
+"@chakra-ui/progress@1.1.8":
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/progress/-/progress-1.1.8.tgz#a9ce66b72643ad496dc4b329a68262b8aa5abab3"
+  integrity sha512-3plfN2XxbjsfyPQc2JIcIgYS9Ofz16Sz0AQM8BZ3eziB17DaeFQua0nep76wFwjgKBuZUPO+lK7QYHMx0eLDdQ==
   dependencies:
-    "@chakra-ui/theme-tools" "1.1.1"
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/theme-tools" "1.1.6"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/radio@1.2.5":
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/radio/-/radio-1.2.5.tgz#0ef48110c702616cbd15949082b462e21029a7d7"
-  integrity sha512-GtcNlDaD3cWBCY8Yr6S5AZgryY/w2rxL4b+uli2l3X1dlh1313IyOGR4HHpBKDGa+vr2tGUJA9f9oO4bhfGLPg==
+"@chakra-ui/radio@1.3.4":
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/radio/-/radio-1.3.4.tgz#cb11bd6ad6a1a6bb694d839ca4f7f9c3f92039bd"
+  integrity sha512-OuYLs/IJIBPMGsB6Zwf5ohoWYGmZq134sBa4iI3aKjlVfBpqLUHX3dtln1dj6alRlThW8npeJC5j3nmjrZ6pfA==
   dependencies:
-    "@chakra-ui/form-control" "1.2.3"
-    "@chakra-ui/hooks" "1.2.0"
-    "@chakra-ui/utils" "1.4.0"
-    "@chakra-ui/visually-hidden" "1.0.6"
+    "@chakra-ui/form-control" "1.3.4"
+    "@chakra-ui/hooks" "1.5.1"
+    "@chakra-ui/react-utils" "1.1.2"
+    "@chakra-ui/utils" "1.7.0"
+    "@chakra-ui/visually-hidden" "1.0.11"
 
-"@chakra-ui/react@^1.3.4":
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/react/-/react-1.4.1.tgz#95caaaea65373dce2d64ad9803dad56bfdcf0315"
-  integrity sha512-jbFWV++0yhTJF92CulRDgkNkoMe589fdrc3YUyAh5ZqadNVB3qJoJxaTZLFV8gl8EUMCOu0Fu+EQkSoqkpzKGw==
-  dependencies:
-    "@chakra-ui/accordion" "1.1.4"
-    "@chakra-ui/alert" "1.1.3"
-    "@chakra-ui/avatar" "1.1.4"
-    "@chakra-ui/breadcrumb" "1.1.3"
-    "@chakra-ui/button" "1.1.4"
-    "@chakra-ui/checkbox" "1.3.0"
-    "@chakra-ui/close-button" "1.1.3"
-    "@chakra-ui/control-box" "1.0.6"
-    "@chakra-ui/counter" "1.0.9"
-    "@chakra-ui/css-reset" "1.0.0"
-    "@chakra-ui/editable" "1.1.3"
-    "@chakra-ui/form-control" "1.2.3"
-    "@chakra-ui/hooks" "1.2.0"
-    "@chakra-ui/icon" "1.1.3"
-    "@chakra-ui/image" "1.0.9"
-    "@chakra-ui/input" "1.1.4"
-    "@chakra-ui/layout" "1.3.3"
-    "@chakra-ui/live-region" "1.0.6"
-    "@chakra-ui/media-query" "1.0.7"
-    "@chakra-ui/menu" "1.2.0"
-    "@chakra-ui/modal" "1.7.0"
-    "@chakra-ui/number-input" "1.1.3"
-    "@chakra-ui/pin-input" "1.4.2"
-    "@chakra-ui/popover" "1.3.0"
-    "@chakra-ui/popper" "2.0.0"
-    "@chakra-ui/portal" "1.1.3"
-    "@chakra-ui/progress" "1.1.3"
-    "@chakra-ui/radio" "1.2.5"
-    "@chakra-ui/select" "1.1.3"
-    "@chakra-ui/skeleton" "1.1.6"
-    "@chakra-ui/slider" "1.1.3"
-    "@chakra-ui/spinner" "1.1.3"
-    "@chakra-ui/stat" "1.1.3"
-    "@chakra-ui/switch" "1.1.5"
-    "@chakra-ui/system" "1.5.1"
-    "@chakra-ui/table" "1.1.3"
-    "@chakra-ui/tabs" "1.2.1"
-    "@chakra-ui/tag" "1.1.3"
-    "@chakra-ui/textarea" "1.1.3"
-    "@chakra-ui/theme" "1.7.1"
-    "@chakra-ui/toast" "1.2.0"
-    "@chakra-ui/tooltip" "1.2.0"
-    "@chakra-ui/transition" "1.1.0"
-    "@chakra-ui/utils" "1.4.0"
-    "@chakra-ui/visually-hidden" "1.0.6"
-
-"@chakra-ui/select@1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/select/-/select-1.1.3.tgz#9ca61436a2881960b576f4968ffedb7a77d499cb"
-  integrity sha512-t5x7rM29aSc0LHMIvXMRvyNhufG5t+MNhZZZyxCnV8ySN/8IfpA01umGGn7Pz1qmME3gUw1Jz1paMvik0WTFsA==
+"@chakra-ui/react-env@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-env/-/react-env-1.0.3.tgz#ea97d7d1aeebdfac6c7510b4b71a0c46b26174e6"
+  integrity sha512-9oYWKCIMxRboSgMI1ur4fQqwQm6zZGp0ilm/9BcpCTHa1FXLlOh19GE2L6PkcOahM8icbw6bXX35VdpgIIoOZg==
   dependencies:
-    "@chakra-ui/form-control" "1.2.3"
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/skeleton@1.1.6":
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/skeleton/-/skeleton-1.1.6.tgz#2a3cceb101574a7dfaad4489bb73714a17a0a1d2"
-  integrity sha512-wzm9fCaLhTTO0i0bjlEc2PrVRgZcOEpxvJth9sFHOwd1aYGDigMhmi3azOzfWMeVcAoAkHBOkwa4o1BosD69rQ==
+"@chakra-ui/react-utils@1.1.2", "@chakra-ui/react-utils@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-utils/-/react-utils-1.1.2.tgz#7ea80b6ae25bd7b182095cc9ffaad23c464408b5"
+  integrity sha512-S8jPVKGZH2qF7ZGxl/0DF/dXXI2AxDNGf4Ahi2LGHqajMvqBB7vtYIRRmIA7+jAnErhzO8WUi3i4Z7oScp6xSA==
   dependencies:
-    "@chakra-ui/hooks" "1.2.0"
-    "@chakra-ui/media-query" "1.0.7"
-    "@chakra-ui/system" "1.5.1"
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/utils" "^1.7.0"
 
-"@chakra-ui/slider@1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/slider/-/slider-1.1.3.tgz#e55740fff98269d2dccd03b8b8542389cf0b0122"
-  integrity sha512-stEzjnJBd2r3XAKOPSnufHHKAHrsuU2BQelJUzCpGxJtFYFSGvfNLMgQj3LjuqaIDjbOxSU4mkJYZ/KS+kXwFA==
+"@chakra-ui/react@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react/-/react-1.6.0.tgz#6eb5aa1563e0d36e008b03f94d112e0aaaaf0a6e"
+  integrity sha512-xz6buC2jb7VVspV8SadR9pkEYbBCHOQ+MwcJTm+cveZVWfeth1SwU0Jb7pT4UEDB/OVv2LlaqnYUzsnc585Tpw==
+  dependencies:
+    "@chakra-ui/accordion" "1.3.0"
+    "@chakra-ui/alert" "1.2.4"
+    "@chakra-ui/avatar" "1.2.4"
+    "@chakra-ui/breadcrumb" "1.2.4"
+    "@chakra-ui/button" "1.3.1"
+    "@chakra-ui/checkbox" "1.5.1"
+    "@chakra-ui/close-button" "1.1.8"
+    "@chakra-ui/control-box" "1.0.11"
+    "@chakra-ui/counter" "1.1.4"
+    "@chakra-ui/css-reset" "1.0.0"
+    "@chakra-ui/editable" "1.2.4"
+    "@chakra-ui/form-control" "1.3.4"
+    "@chakra-ui/hooks" "1.5.1"
+    "@chakra-ui/icon" "1.1.8"
+    "@chakra-ui/image" "1.0.14"
+    "@chakra-ui/input" "1.2.4"
+    "@chakra-ui/layout" "1.4.4"
+    "@chakra-ui/live-region" "1.0.11"
+    "@chakra-ui/media-query" "1.0.12"
+    "@chakra-ui/menu" "1.6.0"
+    "@chakra-ui/modal" "1.8.4"
+    "@chakra-ui/number-input" "1.2.4"
+    "@chakra-ui/pin-input" "1.6.0"
+    "@chakra-ui/popover" "1.6.1"
+    "@chakra-ui/popper" "2.1.2"
+    "@chakra-ui/portal" "1.2.4"
+    "@chakra-ui/progress" "1.1.8"
+    "@chakra-ui/radio" "1.3.4"
+    "@chakra-ui/react-env" "1.0.3"
+    "@chakra-ui/select" "1.1.8"
+    "@chakra-ui/skeleton" "1.1.11"
+    "@chakra-ui/slider" "1.2.4"
+    "@chakra-ui/spinner" "1.1.8"
+    "@chakra-ui/stat" "1.1.8"
+    "@chakra-ui/switch" "1.2.4"
+    "@chakra-ui/system" "1.6.4"
+    "@chakra-ui/table" "1.2.3"
+    "@chakra-ui/tabs" "1.5.0"
+    "@chakra-ui/tag" "1.1.8"
+    "@chakra-ui/textarea" "1.1.8"
+    "@chakra-ui/theme" "1.8.4"
+    "@chakra-ui/toast" "1.2.5"
+    "@chakra-ui/tooltip" "1.3.4"
+    "@chakra-ui/transition" "1.2.2"
+    "@chakra-ui/utils" "1.7.0"
+    "@chakra-ui/visually-hidden" "1.0.11"
+
+"@chakra-ui/select@1.1.8":
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/select/-/select-1.1.8.tgz#273c66c302338b4bb525adcc7db31ab05ca45062"
+  integrity sha512-XdWaE6wTMZ5JebNFK2BqCW6UFg9OEJ/ThRtA4A8UCXriOv+hjWGjudHIiUsEl+6+j02iOfqw64IT1xJcGgH0bw==
+  dependencies:
+    "@chakra-ui/form-control" "1.3.4"
+    "@chakra-ui/utils" "1.7.0"
+
+"@chakra-ui/skeleton@1.1.11":
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/skeleton/-/skeleton-1.1.11.tgz#eab4c7d190f6d8e7e6ca86cfb1618a0bcefc8c32"
+  integrity sha512-Xh0iD84m5+OJxCr69rgDy4ediFNTNourk1QlMVVf7w2BAFVeDMM29wKkkjze9jGjfRdwKu9BxPyFz7Q5U0YxhQ==
   dependencies:
-    "@chakra-ui/hooks" "1.2.0"
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/hooks" "1.5.1"
+    "@chakra-ui/media-query" "1.0.12"
+    "@chakra-ui/system" "1.6.4"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/spinner@1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/spinner/-/spinner-1.1.3.tgz#97e96acfe4fdb2b3e41d2ddd01e14ca923b1cb37"
-  integrity sha512-kJZ7PhJ3wQdwSvfcUHUf3w8xULO3xepjKQZ3GV+p/F+xxl1/i+kvBIvDqGpDNHK3Fke27DW9jfOUMVqFa3Jrpw==
+"@chakra-ui/slider@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/slider/-/slider-1.2.4.tgz#9ba481404260beddf069fad4823b31b93478ef97"
+  integrity sha512-tZD1cHdJ/1RbpPodDlOuhkPE9XoRq6v/GKXDNJZiLuAoWr8gNf7auG3G7iJx2KmO/Px1CrbHSeNL1ufDt5YKew==
   dependencies:
-    "@chakra-ui/utils" "1.4.0"
-    "@chakra-ui/visually-hidden" "1.0.6"
+    "@chakra-ui/hooks" "1.5.1"
+    "@chakra-ui/react-utils" "1.1.2"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/stat@1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/stat/-/stat-1.1.3.tgz#9d7418bb0240c7401b39dc14303cc97ff244745a"
-  integrity sha512-ewEuymCAIKs9g+gS5s+kXmxdggrP5rBaFEIcQ/EPEO4zXFkTbPPPf1ZbUECfq53qrGnNzYZSIx2hqGaW2k0c3w==
+"@chakra-ui/spinner@1.1.8":
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/spinner/-/spinner-1.1.8.tgz#766404a98924f693ce66c040baff3af4fe1dc81e"
+  integrity sha512-aE3X9Rq2MYjF7YjTDLyfJvj07y/Wp3reeRoXe6Yz8yDfLX14tOPK+k/iDSFnUHtwB4D7fxQX5kpQ65bqVbg3Qg==
   dependencies:
-    "@chakra-ui/icon" "1.1.3"
-    "@chakra-ui/utils" "1.4.0"
-    "@chakra-ui/visually-hidden" "1.0.6"
+    "@chakra-ui/utils" "1.7.0"
+    "@chakra-ui/visually-hidden" "1.0.11"
 
-"@chakra-ui/styled-system@1.9.1":
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/styled-system/-/styled-system-1.9.1.tgz#4541a3944c64fc2c2705685abe76faaf1591c7f3"
-  integrity sha512-LS/1oW2BP1/wY+GbBpoMTdb1ezVx1P32zR52OUn4ANogsDcB/7/DMMj6tuS4yaZEZ9AKliORI+p0CD9P/ETyQA==
+"@chakra-ui/stat@1.1.8":
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/stat/-/stat-1.1.8.tgz#0a53e292b5a1ac2333bcd8eda877fedd30013a25"
+  integrity sha512-TeEnOLTjYztBsUoNV/1WfFpWWou7wUvm7SfaSsmvXf14drclyc5cXHdPvcFKLd1R+jMMlsMAEqZ9szU9UZCdxw==
   dependencies:
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/icon" "1.1.8"
+    "@chakra-ui/utils" "1.7.0"
+    "@chakra-ui/visually-hidden" "1.0.11"
+
+"@chakra-ui/styled-system@1.10.4":
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/styled-system/-/styled-system-1.10.4.tgz#70ea7dddec69dd9912ec1f65d502097f1f0b8cc6"
+  integrity sha512-NPfbdjMreEX5rTAXgiFCoh5OotMO+hVLO/ixnn84SpWCUFPRxN8v129DQ+J7VhaKNUqWPMidzx47FmY3RwEJTw==
+  dependencies:
+    "@chakra-ui/utils" "1.7.0"
     csstype "^3.0.6"
 
-"@chakra-ui/switch@1.1.5":
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/switch/-/switch-1.1.5.tgz#9d7ae9f20047cdeafbd3ed01f8432e7e2e659b37"
-  integrity sha512-zezIVpoAIKaspZShnkMkveT6wa7N8VIhlZhcLl32zaBr5W865t8eGM0uFcNpGu6FU881bMR9dRvK/S7OXnzqTw==
+"@chakra-ui/switch@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/switch/-/switch-1.2.4.tgz#63c705fb3e108bf3b17a1cf045cd5545d82ad64e"
+  integrity sha512-pXEXQl4OjUUWqXx3vvXYIrnBHkn2P6H3sARcKs5g7ZwYDQsGgzrEu09HEO9CH/vEQr6XforT5LEQl6LFyApAwg==
   dependencies:
-    "@chakra-ui/checkbox" "1.3.0"
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/checkbox" "1.5.1"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/system@1.5.1":
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/system/-/system-1.5.1.tgz#ab668a5b5d8f8899cd18c14d59546dff7df4537f"
-  integrity sha512-rbuCWqWHYvZ4Y89WsSkMvTPFP8usz3JN0/a36nsLzQ0YLG0Ehi6jUhjDSTbm9pQXh8cUpojGGNFtKW79HyIoXQ==
+"@chakra-ui/system@1.6.4":
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/system/-/system-1.6.4.tgz#827867b9bea2c9ce72fdc31001f2cb1b07df6ed2"
+  integrity sha512-sj93AHFIC8XaQnv3CgQt3Zyr7P3fYUbGMxHKxGDMcSplg+lwOoWVX3UhY3HKCezblsib1+HFhB37oFp7jHlJ4A==
   dependencies:
-    "@chakra-ui/color-mode" "1.1.2"
-    "@chakra-ui/styled-system" "1.9.1"
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/color-mode" "1.1.7"
+    "@chakra-ui/react-utils" "1.1.2"
+    "@chakra-ui/styled-system" "1.10.4"
+    "@chakra-ui/utils" "1.7.0"
     react-fast-compare "3.2.0"
 
-"@chakra-ui/table@1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/table/-/table-1.1.3.tgz#d7463c59afa3d702d5e93a22ebdf803d4da4601c"
-  integrity sha512-vP4AJ+rXtB9l3YnlCvhdfbGzrs18lq9Nq9fDRNf8p8u2vtuiSTVar/kHXUO/JBI0NCpUfdAkELTxH3LonO7z4w==
+"@chakra-ui/table@1.2.3":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/table/-/table-1.2.3.tgz#6a6754f1d3c55c7ad6a3084c680e01c08ad5d82a"
+  integrity sha512-nWpZpuS4SnzqDiXb+U03bcOYcmgJNBfd/2O2i2n3EYGwwg+6iso4QPWM+PP4xu+PxeBtQtQ+CPKkERLNka0NiQ==
   dependencies:
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/tabs@1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/tabs/-/tabs-1.2.1.tgz#606168281ff8fe9916ccf2f79fa454136d5d2ae0"
-  integrity sha512-+nzHORo+obsZ3582qp8585WdCc9tRGu9I21edsaPwaYy3HJJNYh3/qXIaqW9xKbMuQmdPjGJlPN+sLWlda0gbw==
+"@chakra-ui/tabs@1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/tabs/-/tabs-1.5.0.tgz#8f31f6b076ed6d56c931ff3142696cfc2992dab6"
+  integrity sha512-J3VIRdQeh8u8lsOhuGvrJVHWS7Bz2V9RAKqgSsTcKPVd8EKo50Yv61LgMR0+C1ba1thlbzoY2+Yoz8HFCQzIKg==
   dependencies:
-    "@chakra-ui/clickable" "1.0.6"
-    "@chakra-ui/descendant" "1.0.9"
-    "@chakra-ui/hooks" "1.2.0"
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/clickable" "1.1.4"
+    "@chakra-ui/descendant" "2.0.0"
+    "@chakra-ui/hooks" "1.5.1"
+    "@chakra-ui/react-utils" "1.1.2"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/tag@1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/tag/-/tag-1.1.3.tgz#bacda9ad0890028a4f31247b380942049a9c1467"
-  integrity sha512-qc4AfYDobBp7JhRcbIzmJal5BruJCZlvbcS/Ee8RPHUFIj9ZuaYB3OiZzGyScJxEzNch6kTxOSl5hooj+UYvig==
+"@chakra-ui/tag@1.1.8":
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/tag/-/tag-1.1.8.tgz#bccdb4eb624d068358ef59c5449f2b2766a0ac6d"
+  integrity sha512-ebbFX5XUQlVNIynTxoFOeAJdGubGWtsbuwkPY/2c96hhrrWzb6IdK1CvKy5trhGWpKGtNJ7w+kcaDHQRX7oDvg==
   dependencies:
-    "@chakra-ui/icon" "1.1.3"
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/icon" "1.1.8"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/textarea@1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/textarea/-/textarea-1.1.3.tgz#fa029bdb8ac917d061f2ef5fd2c55c67868c62d1"
-  integrity sha512-/lWWBP3JBhiQMjdthKi4kRiMz7M22xZPshaWFYJJ/SNKZVdSExhQDQmG6ytUcSvI4nNRV8N5kFkZMP8MZ7j35g==
+"@chakra-ui/textarea@1.1.8":
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/textarea/-/textarea-1.1.8.tgz#695be8f52b4ee93557ffdc460a3cbdd2f896fe3d"
+  integrity sha512-L4xhCB6HSvR7A4XbrGu0xjnfBFqGtZfYZolz5VTfGbw0Zbc3B7wW59zL6XR2+wfkJhXzygy8tVQEn1n6u59EnQ==
   dependencies:
-    "@chakra-ui/form-control" "1.2.3"
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/form-control" "1.3.4"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/theme-tools@1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/theme-tools/-/theme-tools-1.1.1.tgz#c5e2fda87fb9602f637ea8360e4084503faa4f2c"
-  integrity sha512-ECW8IF0DxMxQgwgn4SPKPbHXhp1fnz50WtInNTvyXHvFZSst0ANn8k+WRAMb9qXolzuZw0sFjhd8U59rtIIpwA==
+"@chakra-ui/theme-tools@1.1.6":
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/theme-tools/-/theme-tools-1.1.6.tgz#b97a37135f17454ff4b326b9790e57d409fddd81"
+  integrity sha512-VnAO9AAJGr967mHtAnJCq9mKzfka8I9Ya/6hYU/t1EaaMLy1IseIGkRX3hGYwpl3RZBXGamMxc4C5fJ0TKI4Lg==
   dependencies:
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/utils" "1.7.0"
     "@types/tinycolor2" "1.4.2"
     tinycolor2 "1.4.2"
 
-"@chakra-ui/theme@1.7.1":
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/theme/-/theme-1.7.1.tgz#71491d9610cfe3558b56ec92c4037e2a5de9528a"
-  integrity sha512-O1bAt9mbVdSF8u2QGewtA//rr4Vldo6p7tm3zFXm4vRfY0gQdvx3oEDxBWZX/KFRZbWV8c2IPmP0/fy4LWM0Ig==
-  dependencies:
-    "@chakra-ui/theme-tools" "1.1.1"
-    "@chakra-ui/utils" "1.4.0"
-
-"@chakra-ui/toast@1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/toast/-/toast-1.2.0.tgz#ebe43c611b81bfb5ed67ba462630f75e96610f1b"
-  integrity sha512-KbCofqnZRmCGaOtdctI8Q3GUXy5nzpnv+hKCWApC0i3GQononcXU5b/FYre+MM+egp9nqtds9u8/NhC1CCn4xg==
-  dependencies:
-    "@chakra-ui/alert" "1.1.3"
-    "@chakra-ui/close-button" "1.1.3"
-    "@chakra-ui/hooks" "1.2.0"
-    "@chakra-ui/theme" "1.7.1"
-    "@chakra-ui/transition" "1.1.0"
-    "@chakra-ui/utils" "1.4.0"
-    "@reach/alert" "0.13.0"
-
-"@chakra-ui/tooltip@1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/tooltip/-/tooltip-1.2.0.tgz#4d5d784a954b33c3be05e2277c0b1d97e6ab1ff3"
-  integrity sha512-u6PA8amBTmUNbeCs73+A/BEhJwvK7BJz9UlPA3IwAXup2upzQlRWqgb1fYYME+fl4S7UZNGmjExBlanLq4ZxSQ==
+"@chakra-ui/theme@1.8.4":
+  version "1.8.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/theme/-/theme-1.8.4.tgz#acf467c818f11aa5bcf1acd2e025063afb51aaad"
+  integrity sha512-fmzl4gHpETwv7QvvWs1cLouXOTjkzsVWURZNzkDFWm/wOV8IQ2GsDFjP+dA5J2pvHIB6KovyXoN3BdTz9qdPqw==
   dependencies:
-    "@chakra-ui/hooks" "1.2.0"
-    "@chakra-ui/popper" "2.0.0"
-    "@chakra-ui/portal" "1.1.3"
-    "@chakra-ui/utils" "1.4.0"
-    "@chakra-ui/visually-hidden" "1.0.6"
+    "@chakra-ui/theme-tools" "1.1.6"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/transition@1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/transition/-/transition-1.1.0.tgz#7ac05f7dd2e817f321099b54d654cb1ce82b9035"
-  integrity sha512-cCOTfxvRF8zNfXF9R4CYBiCx24fzWvpAVbQrkjA+A4oUSFYwuqIt72H9fnCOCAh/q84NNKVFuXqtUCawuFjxcg==
+"@chakra-ui/toast@1.2.5":
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/toast/-/toast-1.2.5.tgz#65393572b1ed6aca199e421f65cf62606639583e"
+  integrity sha512-+Yw4Y68LdMUVsBMAjSQXFs5S+eIEzk5rFcxGYNNvCBWj/2jCuHv/pb0gI9Qk6o/z4zuY4vnGXGYBGYCdo8zOzg==
+  dependencies:
+    "@chakra-ui/alert" "1.2.4"
+    "@chakra-ui/close-button" "1.1.8"
+    "@chakra-ui/hooks" "1.5.1"
+    "@chakra-ui/theme" "1.8.4"
+    "@chakra-ui/transition" "1.2.2"
+    "@chakra-ui/utils" "1.7.0"
+    "@reach/alert" "0.13.2"
+
+"@chakra-ui/tooltip@1.3.4":
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/tooltip/-/tooltip-1.3.4.tgz#fcca05091cf0086014c209919505e35601a505d6"
+  integrity sha512-EnaYXZ4VbMlN12vpobKe5XXBAUxzaBQmxLTzEKlCEYBnhOu9qDR6fRUgF7nwcR8urgNBMfO1t3uED971upOMjQ==
+  dependencies:
+    "@chakra-ui/hooks" "1.5.1"
+    "@chakra-ui/popper" "2.1.2"
+    "@chakra-ui/portal" "1.2.4"
+    "@chakra-ui/react-utils" "1.1.2"
+    "@chakra-ui/utils" "1.7.0"
+    "@chakra-ui/visually-hidden" "1.0.11"
+
+"@chakra-ui/transition@1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/transition/-/transition-1.2.2.tgz#eeeea236b287aa8818b87676e96cceaf83f3a803"
+  integrity sha512-NzNE0LyD4QzvkmgpfnjshA5sxzC14bMpgLBIXklrOyUEjV7b04erYOXd3iS26JWyu4nPTyMYXH5ipxKcI1SjSA==
   dependencies:
-    "@chakra-ui/hooks" "1.2.0"
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/hooks" "1.5.1"
+    "@chakra-ui/utils" "1.7.0"
 
-"@chakra-ui/utils@1.4.0":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/utils/-/utils-1.4.0.tgz#4b20c522141d68dc62b5c7be929bb6d1596db190"
-  integrity sha512-ND7NIilpncnkzcNBnAySGBFpOXb3urO1X9esSY0+M5zXiq+VSSfK9JuoJd3ilvV4Dbwgzil7hMAELBuHme4uTg==
+"@chakra-ui/utils@1.7.0", "@chakra-ui/utils@^1.7.0":
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/utils/-/utils-1.7.0.tgz#21c4807f56487284b93773da22665b63730a784c"
+  integrity sha512-fMZOnWBh/TzAYufkpeVw3yMNxKmYHEkB93luDpIJgxGt4mrbl+A66pd5GvJSGK1N34WYbjWRiJrrSvRI548eZA==
   dependencies:
     "@types/lodash.mergewith" "4.6.6"
-    "@types/object-assign" "4.0.30"
     css-box-model "1.2.1"
+    framesync "5.3.0"
     lodash.mergewith "4.6.2"
 
-"@chakra-ui/visually-hidden@1.0.6":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/visually-hidden/-/visually-hidden-1.0.6.tgz#c47578afbbd9396996c4ee3d7ce05d91f00a43c1"
-  integrity sha512-PM1QOGabhMAQyfNUq05GKSUr85dJdQGeQZVO6Gw8QOJ29+J/xS6Qpyvvn358OrWVYQjw3eEQ15ALEGXb/HJfeA==
+"@chakra-ui/visually-hidden@1.0.11":
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/visually-hidden/-/visually-hidden-1.0.11.tgz#011dfe91817bc5b40548c0504dac57552f63d70c"
+  integrity sha512-gk2GVdEesFLN6Xrx2/kHfyzmT9nu0iVpvkY2tWnIVvSgpWh5zwGFO/DNpnxOkx9k9Pd/ffhCgki9OkpPL1NO9A==
   dependencies:
-    "@chakra-ui/utils" "1.4.0"
+    "@chakra-ui/utils" "1.7.0"
 
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
@@ -1467,7 +1510,7 @@
     source-map "^0.5.7"
     stylis "^4.0.3"
 
-"@emotion/cache@^11.1.3":
+"@emotion/cache@^11.0.0", "@emotion/cache@^11.1.3":
   version "11.1.3"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.1.3.tgz#c7683a9484bcd38d5562f2b9947873cf66829afd"
   integrity sha512-n4OWinUPJVaP6fXxWZD9OUeQ0lY7DvtmtSuqtRWT0Ofo/sBLCVSgb4/Oa0Q5eFxcwablRKjUXqXtNZVyEwCAuA==
@@ -1507,7 +1550,7 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
   integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
 
-"@emotion/react@^11.1.5":
+"@emotion/react@^11.1.1", "@emotion/react@^11.1.5":
   version "11.1.5"
   resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.1.5.tgz#15e78f9822894cdc296e6f4e0688bac8120dfe66"
   integrity sha512-xfnZ9NJEv9SU9K2sxXM06lzjK245xSeHRpUh67eARBm3PBHjjKIZlfWZ7UQvD0Obvw6ZKjlC79uHrlzFYpOB/Q==
@@ -1910,31 +1953,32 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.4.4.tgz#11d5db19bd178936ec89cd84519c4de439574398"
   integrity sha512-1oO6+dN5kdIA3sKPZhRGJTfGVP4SWV6KqlMOwry4J3HfyD68sl/3KmG7DeYUzvN+RbhXDnv/D8vNNB8168tAMg==
 
-"@reach/alert@0.13.0":
-  version "0.13.0"
-  resolved "https://registry.yarnpkg.com/@reach/alert/-/alert-0.13.0.tgz#1f67b389f49af61286ef03a84f5a57bd3503dadf"
-  integrity sha512-5lpgRnlQ0JHBsRTPfKjD9aFPDZuLcaxTgD5PXdSLb+1CU8WgNbcy+7qSjqnu1uzWS2pQenIEBViV5wGpt63ADw==
+"@reach/alert@0.13.2":
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/@reach/alert/-/alert-0.13.2.tgz#71c4a848d51341f1d6d9eaae060975391c224870"
+  integrity sha512-LDz83AXCrClyq/MWe+0vaZfHp1Ytqn+kgL5VxG7rirUvmluWaj/snxzfNPWn0Ma4K2YENmXXRC/iHt5X95SqIg==
   dependencies:
-    "@reach/utils" "0.13.0"
-    "@reach/visually-hidden" "0.13.0"
+    "@reach/utils" "0.13.2"
+    "@reach/visually-hidden" "0.13.2"
     prop-types "^15.7.2"
-    tslib "^2.0.0"
+    tslib "^2.1.0"
 
-"@reach/utils@0.13.0":
-  version "0.13.0"
-  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.13.0.tgz#2da775a910d8894bb34e1e94fe95842674f71844"
-  integrity sha512-dypxuyA1Qy3LHxzzyS7jFGPgCCR04b8UEn+Tv/aj6y9V578dULQqkcCyobrdEa+OI8lxH7dFFHa+jH8M/noBrQ==
+"@reach/utils@0.13.2":
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.13.2.tgz#87e8fef8ebfe583fa48250238a1a3ed03189fcc8"
+  integrity sha512-3ir6cN60zvUrwjOJu7C6jec/samqAeyAB12ZADK+qjnmQPdzSYldrFWwDVV5H0WkhbYXR3uh+eImu13hCetNPQ==
   dependencies:
     "@types/warning" "^3.0.0"
-    tslib "^2.0.0"
+    tslib "^2.1.0"
     warning "^4.0.3"
 
-"@reach/visually-hidden@0.13.0":
-  version "0.13.0"
-  resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.13.0.tgz#cace36d9bb80ffb797374fcaea989391b881038f"
-  integrity sha512-LF11WL9/495Q3d86xNy0VO6ylPI6SqF2xZGg9jpZSXLbFKpQ5Bf0qC7DOJfSf+/yb9WgPgB4m+a48Fz8AO6oZA==
+"@reach/visually-hidden@0.13.2":
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.13.2.tgz#ee21de376a7e57e60dc92d95a671073796caa17e"
+  integrity sha512-sPZwNS0/duOuG0mYwE5DmgEAzW9VhgU3aIt1+mrfT/xiT9Cdncqke+kRBQgU708q/Ttm9tWsoHni03nn/SuPTQ==
   dependencies:
-    tslib "^2.0.0"
+    prop-types "^15.7.2"
+    tslib "^2.1.0"
 
 "@sinonjs/commons@^1.7.0":
   version "1.8.2"
@@ -2131,11 +2175,6 @@
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
   integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
 
-"@types/object-assign@4.0.30":
-  version "4.0.30"
-  resolved "https://registry.yarnpkg.com/@types/object-assign/-/object-assign-4.0.30.tgz#8949371d5a99f4381ee0f1df0a9b7a187e07e652"
-  integrity sha1-iUk3HVqZ9Dge4PHfCpt6GH4H5lI=
-
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
@@ -2151,6 +2190,13 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
   integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
 
+"@types/react-dom@*":
+  version "17.0.3"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.3.tgz#7fdf37b8af9d6d40127137865bb3fff8871d7ee1"
+  integrity sha512-4NnJbCeWE+8YBzupn/YrJxZ8VnjcJq5iR1laqQ1vkpQgBiA7bwk0Rp24fxsdNinzJY2U+HHS4dJJDPdoMjdJ7w==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@^17.0.2":
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.2.tgz#35654cf6c49ae162d5bc90843d5437dc38008d43"
@@ -2175,6 +2221,23 @@
     "@types/history" "*"
     "@types/react" "*"
 
+"@types/react-select@^4.0.15":
+  version "4.0.15"
+  resolved "https://registry.yarnpkg.com/@types/react-select/-/react-select-4.0.15.tgz#2e6a1cff22c4bbae6c95b8dbee5b5097c12eae54"
+  integrity sha512-GPyBFYGMVFCtF4eg9riodEco+s2mflR10Nd5csx69+bcdvX6Uo9H/jgrIqovBU9yxBppB9DS66OwD6xxgVqOYQ==
+  dependencies:
+    "@emotion/serialize" "^1.0.0"
+    "@types/react" "*"
+    "@types/react-dom" "*"
+    "@types/react-transition-group" "*"
+
+"@types/react-transition-group@*":
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.1.tgz#e1a3cb278df7f47f17b5082b1b3da17170bd44b1"
+  integrity sha512-vIo69qKKcYoJ8wKCJjwSgCTM+z3chw3g18dkrDfVX665tMH7tmbDxEAnPdey4gTlwZz5QuHGzd+hul0OVZDqqQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^17.0.3":
   version "17.0.3"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.3.tgz#ba6e215368501ac3826951eef2904574c262cc79"
@@ -2354,6 +2417,13 @@
     "@typescript-eslint/types" "4.17.0"
     eslint-visitor-keys "^2.0.0"
 
+"@vvo/tzdb@^6.7.0":
+  version "6.7.0"
+  resolved "https://registry.yarnpkg.com/@vvo/tzdb/-/tzdb-6.7.0.tgz#8a553df436a51b8813f75000206b080ad1e4a432"
+  integrity sha512-QBdgMZ9+fmSB/lFHfcjYaE9i43nGvXldzGENAcjFsawGMDUlXI7yZG6JBtPKscB1XFvPQfZ5kBsPzujZQdOr0A==
+  dependencies:
+    luxon "1.26.0"
+
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -4185,6 +4255,14 @@ dom-converter@^0.2:
   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"
@@ -5122,6 +5200,13 @@ framesync@5.2.0:
   resolved "https://registry.yarnpkg.com/framesync/-/framesync-5.2.0.tgz#f14480654cd05a6af4c72c9890cad93556841643"
   integrity sha512-dcl92w5SHc0o6pRK3//VBVNvu6WkYkiXmHG6ZIXrVzmgh0aDYMDAaoA3p3LH71JIdN5qmhDcfONFA4Lmq22tNA==
 
+framesync@5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/framesync/-/framesync-5.3.0.tgz#0ecfc955e8f5a6ddc8fdb0cc024070947e1a0d9b"
+  integrity sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==
+  dependencies:
+    tslib "^2.1.0"
+
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -6928,6 +7013,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+luxon@1.26.0:
+  version "1.26.0"
+  resolved "https://registry.yarnpkg.com/luxon/-/luxon-1.26.0.tgz#d3692361fda51473948252061d0f8561df02b578"
+  integrity sha512-+V5QIQ5f6CDXQpWNICELwjwuHdqeJM1UenlZWx5ujcRMc9venvluCjFb4t5NYLhb6IhkbMVOxzVuOqkgMxee2A==
+
 lz-string@^1.4.4:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
@@ -6989,6 +7079,11 @@ media-typer@0.3.0:
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
 
+memoize-one@^5.0.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
 memory-fs@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -8093,7 +8188,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -8298,6 +8393,13 @@ react-icons@^4.2.0:
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0"
   integrity sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==
 
+react-input-autosize@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-3.0.0.tgz#6b5898c790d4478d69420b55441fcc31d5c50a85"
+  integrity sha512-nL9uS7jEs/zu8sqwFE5MAPx6pPkNAriACQ2rGLlqmKr2sPGtN7TXTyDdQt4lbNXVx7Uzadb40x8qotIuru6Rhg==
+  dependencies:
+    prop-types "^15.5.8"
+
 "react-is@^16.12.0 || ^17.0.0", react-is@^17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
@@ -8370,6 +8472,19 @@ react-router@5.2.0:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+react-select@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-4.3.0.tgz#6bde634ae7a378b49f3833c85c126f533483fa2e"
+  integrity sha512-SBPD1a3TJqE9zoI/jfOLCAoLr/neluaeokjOixr3zZ1vHezkom8K0A9J4QG9IWDqIDE9K/Mv+0y1GjidC2PDtQ==
+  dependencies:
+    "@babel/runtime" "^7.12.0"
+    "@emotion/cache" "^11.0.0"
+    "@emotion/react" "^11.1.1"
+    memoize-one "^5.0.0"
+    prop-types "^15.6.0"
+    react-input-autosize "^3.0.0"
+    react-transition-group "^4.3.0"
+
 react-shallow-renderer@^16.13.1:
   version "16.14.1"
   resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.14.1.tgz#bf0d02df8a519a558fd9b8215442efa5c840e124"
@@ -8397,6 +8512,16 @@ react-test-renderer@^17.0.1:
     react-shallow-renderer "^16.13.1"
     scheduler "^0.20.1"
 
+react-transition-group@^4.3.0:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
+  integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^16:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
@@ -9690,11 +9815,16 @@ tslib@^1.0.0, tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.0.3:
+tslib@^2.0.3:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
   integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==
 
+tslib@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.2.0.tgz#fb2c475977e35e241311ede2693cee1ec6698f5c"
+  integrity sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==
+
 tsutils@^3.17.1:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"


Code review comments:
diff_hunk: @@ -0,0 +1,88 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useState } from 'react';
+import {
+  Box,
+  Button,
+  Menu,
+  MenuButton,
+  MenuList,
+  Tooltip,
+} from '@chakra-ui/react';
+import dayjs from 'dayjs';
+import tz from 'dayjs/plugin/timezone';
+import { getTimeZones } from '@vvo/tzdb';
+
+import Select from 'components/MultiSelect';
+import { useTimezoneContext } from 'providers/TimezoneProvider';
+
+dayjs.extend(tz);
+
+interface Option { value: string, label: string }
+
+const TimezoneDropdown: React.FC = () => {
+  const { timezone, setTimezone } = useTimezoneContext();
+  const [now, setNow] = useState(dayjs().tz(timezone));
+
+  const timezones = getTimeZones();
+
+  let currentTimezone;
+  const options = timezones.map(({ name, currentTimeFormat, group }) => {
+    const label = `${currentTimeFormat.substring(0, 6)} ${name.replace(/_/g, ' ')}`;
+    if (name === timezone || group.includes(timezone)) currentTimezone = { label, value: name };
+    return { label, value: name };
+  });
+
+  const onChangeTimezone = (newTimezone: Option | null) => {
+    if (newTimezone) {
+      setTimezone(newTimezone.value);
+      setNow(dayjs().tz(newTimezone.value));
+    }
+  };
+
+  return (
+    <Menu isLazy>
+      <Tooltip label="Change time zone" hasArrow>
+        <MenuButton as={Button} variant="ghost" mr="4">
+          <Box
+            as="time"
+            dateTime={now.toString()}
+            fontSize="md"
+          >
+            {now.format('HH:mm Z')}
+          </Box>
+        </MenuButton>
+      </Tooltip>
+      <MenuList placement="top-end" minWidth="350px">
+        <Box px="3" pb="1">
path: airflow/ui/src/components/AppContainer/TimezoneDropdown.tsx
text: @user1:
You should be able to remove this `Box` wrapper and just move the style props to the parent `MenuList`.