From d486d78594099989fe0197f7f3142afffd7277a1 Mon Sep 17 00:00:00 2001
From: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Date: Sun, 27 Nov 2022 14:56:09 +0100
Subject: [PATCH] v2 styling (#263)

* feat: implement progress bar on running event

* refactor: use event action hook

* refactor: align backend data

* style: v2 style tweaks

* style: v2 style tweaks + ts <Info>

* fix: fix delay increment calls

* style: v2 style tweaks + ts <Playback>

* style: v2 style tweaks + ts <EventEditor>

* style: v2 style tweaks + ts <MessageControl>

* fix: naming issue with message control socket endpoint

* chore: upgrade style dependencies

* style: v2 style tweaks + ts <MenuBar>

* style: v2 style tweaks + ts <RundownMenu>

* style: v2 style tweaks + ts <Playback>

* fix: add selected and next information to EventTimer

* style: v2 style tweaks + ts <EventBlock>

* style: v2 style tweaks + ts <DelayBlock>

* style: v2 style tweaks + ts <BlockBlock>

* style: v2 style tweaks + ts <QuickEntry>

* refactor: extract <TextInput> logic

* chore: upgrade build dependencies

* chore: folder structure refactor

* fix: issue with dependency path in electron

* chore: update version in demo db
---
 client/package.json                           |   16 +-
 .../components/buttons/ActionButtons.tsx      |   51 -
 .../common/components/buttons/QuitIconBtn.tsx |   24 +-
 .../components/collapseBar/CollapseBar.jsx    |   25 -
 .../collapseBar/CollapseBar.module.scss       |   22 +-
 .../components/collapseBar/CollapseBar.tsx    |   20 +
 .../common/components/copy-tag/CopyTag.tsx    |   35 +
 .../components/countdown/TimerDisplay.scss    |    4 +-
 .../common/components/input/AutoTextArea.jsx  |   27 -
 .../src/common/components/input/TextInput.jsx |  106 -
 .../src/common/components/input/TimeInput.jsx |  197 --
 .../components/input/TimeInput.module.scss    |   47 -
 .../input/auto-text-area/AutoTextArea.tsx     |   34 +
 .../ColourInput.module.scss                   |    2 -
 .../input/{ => colour-input}/ColourInput.tsx  |    2 +-
 .../input/delay-input/DelayInput.module.scss  |    9 +
 .../DelayInput.tsx}                           |   58 +-
 .../components/input/text-input/TextInput.tsx |   46 +
 .../__tests__/TextInput.test.tsx}             |    9 +-
 .../input/text-input/useReactiveTextInput.tsx |   88 +
 .../components/input/time-input/TimeInput.jsx |  174 ++
 .../input/time-input/TimeInput.module.scss    |   19 +
 .../NavigationMenu.module.scss                |   42 +-
 .../components/osc-tag/CopyTag.module.scss    |   26 -
 .../src/common/components/osc-tag/CopyTag.tsx |   34 -
 client/src/common/context/LoggingContext.tsx  |   17 +-
 client/src/common/hooks/useSocket.ts          |    4 +-
 client/src/common/models/Info.types.ts        |    9 +-
 .../control/__tests__/MessageControl.test.jsx |   39 -
 .../__tests__/PlaybackControl.test.jsx        |   21 -
 .../control/message/InputRow.module.scss      |   17 +
 .../src/features/control/message/InputRow.tsx |   18 +-
 .../control/message/MessageControl.jsx        |   64 -
 .../message/MessageControl.module.scss        |   75 +-
 .../control/message/MessageControl.tsx        |   52 +
 .../control/message/MessageControlExport.jsx  |    4 +-
 .../features/control/playback/Playback.tsx    |   60 +-
 .../control/playback/PlaybackButtons.jsx      |   42 -
 .../control/playback/PlaybackButtons.tsx      |   28 +
 .../playback/PlaybackControl.module.scss      |   36 +-
 .../control/playback/PlaybackTimer.tsx        |   26 +-
 .../control/playback/TapButton.module.scss    |   63 +-
 ...ntrolExport.jsx => TimerControlExport.tsx} |    6 +-
 .../features/control/playback/Transport.tsx   |    8 +-
 .../src/features/editors/Editor.module.scss   |   20 +-
 .../src/features/event-editor/EventEditor.jsx |   57 +-
 .../event-editor/EventEditor.module.scss      |  152 +-
 client/src/features/info/CollapsableInfo.tsx  |   52 +
 client/src/features/info/Info.jsx             |    4 +-
 client/src/features/info/Info.module.scss     |   84 +-
 client/src/features/info/InfoExport.jsx       |    4 +-
 client/src/features/info/InfoLogger.jsx       |  147 --
 .../src/features/info/InfoLogger.module.scss  |   99 +-
 client/src/features/info/InfoLogger.tsx       |  148 ++
 .../info/{InfoNif.jsx => InfoNif.tsx}         |   27 +-
 client/src/features/info/InfoTitle.jsx        |   52 -
 .../src/features/info/__tests__/Info.test.jsx |   20 -
 client/src/features/menu/MenuBar.tsx          |   30 +-
 client/src/features/menu/RundownMenu.tsx      |   52 +-
 .../features/menu/__tests__/MenuBar.test.tsx  |   33 -
 client/src/features/rundown/Rundown.jsx       |   37 +-
 .../src/features/rundown/Rundown.module.scss  |   11 -
 client/src/features/rundown/RundownEntry.tsx  |    6 +-
 client/src/features/rundown/RundownExport.tsx |    4 +-
 client/src/features/rundown/_blockMixins.scss |   40 +-
 .../rundown/block-block/BlockBlock.jsx        |   44 -
 .../block-block/BlockBlock.module.scss        |   27 +-
 .../rundown/block-block/BlockBlock.tsx        |   37 +
 .../delay-block/DelayBlock.module.scss        |   39 +-
 .../{DelayBlock.jsx => DelayBlock.tsx}        |   55 +-
 .../event-block/EventBlock.module.scss        |  341 ++-
 .../rundown/event-block/EventBlock.tsx        |   79 +-
 .../event-block/composite/BlockActionMenu.tsx |   84 +
 .../composite/EventBlockActionMenu.jsx        |   87 -
 .../composite/EventBlockTimers.jsx            |    2 +-
 .../quick-add-block/QuickAddBlock.module.scss |   70 +-
 .../rundown/quick-add-block/QuickAddBlock.tsx |   69 +-
 client/src/features/table/OntimeTable.jsx     |    1 -
 client/src/features/table/Table.module.scss   |   70 +-
 .../table/tableElements/EditableCell.jsx      |    5 +-
 .../src/features/table/tableRows/EventRow.jsx |   15 +-
 client/src/index.jsx                          |    5 +-
 client/src/index.scss                         |   14 +-
 client/src/theme/_main.scss                   |   13 +-
 client/src/theme/_mixins.scss                 |   22 +-
 client/src/theme/_ontimeColours.scss          |  108 +
 client/src/theme/_v2Styles.scss               |   47 +
 client/src/theme/_viewerDefs.scss             |    3 +
 client/src/theme/ontimeButton.ts              |   53 +
 client/src/theme/ontimeCheckbox.ts            |   21 +
 client/src/theme/ontimeMenu.ts                |   18 +
 client/src/theme/ontimeSelect.ts              |   20 +
 client/src/theme/ontimeSwitch.ts              |   10 +
 client/src/theme/ontimeTextInputs.ts          |   43 +
 client/src/theme/ontimeTooltip.ts             |   12 +
 client/src/theme/theme.js                     |   50 -
 client/src/theme/theme.ts                     |   88 +
 client/yarn.lock                              | 1866 ++++++++---------
 server/demo-db/db.json                        |    2 +-
 server/main.js                                |    6 +-
 .../src/classes/event-loader/EventLoader.js   |   10 +-
 server/src/classes/socket/SocketController.js |   14 +-
 server/src/classes/socket/socketConfig.js     |    2 +-
 server/src/classes/timer/EventTimer.js        |    7 +-
 104 files changed, 3027 insertions(+), 3217 deletions(-)
 delete mode 100644 client/src/common/components/buttons/ActionButtons.tsx
 delete mode 100644 client/src/common/components/collapseBar/CollapseBar.jsx
 create mode 100644 client/src/common/components/collapseBar/CollapseBar.tsx
 create mode 100644 client/src/common/components/copy-tag/CopyTag.tsx
 delete mode 100644 client/src/common/components/input/AutoTextArea.jsx
 delete mode 100644 client/src/common/components/input/TextInput.jsx
 delete mode 100644 client/src/common/components/input/TimeInput.jsx
 delete mode 100644 client/src/common/components/input/TimeInput.module.scss
 create mode 100644 client/src/common/components/input/auto-text-area/AutoTextArea.tsx
 rename client/src/common/components/input/{ => colour-input}/ColourInput.module.scss (76%)
 rename client/src/common/components/input/{ => colour-input}/ColourInput.tsx (94%)
 create mode 100644 client/src/common/components/input/delay-input/DelayInput.module.scss
 rename client/src/common/components/input/{DelayInput.jsx => delay-input/DelayInput.tsx} (50%)
 create mode 100644 client/src/common/components/input/text-input/TextInput.tsx
 rename client/src/common/components/input/{__tests__/TextInput.test.jsx => text-input/__tests__/TextInput.test.tsx} (93%)
 create mode 100644 client/src/common/components/input/text-input/useReactiveTextInput.tsx
 create mode 100644 client/src/common/components/input/time-input/TimeInput.jsx
 create mode 100644 client/src/common/components/input/time-input/TimeInput.module.scss
 delete mode 100644 client/src/common/components/osc-tag/CopyTag.module.scss
 delete mode 100644 client/src/common/components/osc-tag/CopyTag.tsx
 delete mode 100644 client/src/features/control/__tests__/MessageControl.test.jsx
 delete mode 100644 client/src/features/control/__tests__/PlaybackControl.test.jsx
 create mode 100644 client/src/features/control/message/InputRow.module.scss
 delete mode 100644 client/src/features/control/message/MessageControl.jsx
 create mode 100644 client/src/features/control/message/MessageControl.tsx
 delete mode 100644 client/src/features/control/playback/PlaybackButtons.jsx
 create mode 100644 client/src/features/control/playback/PlaybackButtons.tsx
 rename client/src/features/control/playback/{TimerControlExport.jsx => TimerControlExport.tsx} (66%)
 create mode 100644 client/src/features/info/CollapsableInfo.tsx
 delete mode 100644 client/src/features/info/InfoLogger.jsx
 create mode 100644 client/src/features/info/InfoLogger.tsx
 rename client/src/features/info/{InfoNif.jsx => InfoNif.tsx} (52%)
 delete mode 100644 client/src/features/info/InfoTitle.jsx
 delete mode 100644 client/src/features/info/__tests__/Info.test.jsx
 delete mode 100644 client/src/features/menu/__tests__/MenuBar.test.tsx
 delete mode 100644 client/src/features/rundown/block-block/BlockBlock.jsx
 create mode 100644 client/src/features/rundown/block-block/BlockBlock.tsx
 rename client/src/features/rundown/delay-block/{DelayBlock.jsx => DelayBlock.tsx} (51%)
 create mode 100644 client/src/features/rundown/event-block/composite/BlockActionMenu.tsx
 delete mode 100644 client/src/features/rundown/event-block/composite/EventBlockActionMenu.jsx
 create mode 100644 client/src/theme/_ontimeColours.scss
 create mode 100644 client/src/theme/_v2Styles.scss
 create mode 100644 client/src/theme/ontimeButton.ts
 create mode 100644 client/src/theme/ontimeCheckbox.ts
 create mode 100644 client/src/theme/ontimeMenu.ts
 create mode 100644 client/src/theme/ontimeSelect.ts
 create mode 100644 client/src/theme/ontimeSwitch.ts
 create mode 100644 client/src/theme/ontimeTextInputs.ts
 create mode 100644 client/src/theme/ontimeTooltip.ts
 delete mode 100644 client/src/theme/theme.js
 create mode 100644 client/src/theme/theme.ts

diff --git a/client/package.json b/client/package.json
index 115566c0b..5faa02bd9 100644
--- a/client/package.json
+++ b/client/package.json
@@ -3,12 +3,12 @@
   "version": "1.9.6",
   "private": true,
   "dependencies": {
-    "@chakra-ui/react": "2.3.4",
+    "@chakra-ui/react": "^2.4.1",
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/sortable": "^7.0.1",
     "@dnd-kit/utilities": "^3.2.0",
-    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
     "@react-icons/all-files": "^4.1.0",
     "@tanstack/react-query": "^4.10.3",
     "@tanstack/react-query-devtools": "^4.11.0",
@@ -61,7 +61,7 @@
     "@types/react-dom": "^18.0.6",
     "@typescript-eslint/eslint-plugin": "^5.37.0",
     "@typescript-eslint/parser": "^5.37.0",
-    "@vitejs/plugin-react": "^2.1.0",
+    "@vitejs/plugin-react": "^2.2.0",
     "eslint": "^8.25.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-jest": "^27.0.4",
@@ -77,10 +77,10 @@
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard-scss": "^4.0.0",
     "typescript": "^4.8.3",
-    "vite": "^3.1.6",
-    "vite-plugin-svgr": "^2.2.1",
-    "vite-tsconfig-paths": "^3.5.0",
-    "vitest": "^0.23.2"
+    "vite": "^3.2.4",
+    "vite-plugin-svgr": "^2.2.2",
+    "vite-tsconfig-paths": "^3.6.0",
+    "vitest": "^0.25.3"
   },
   "resolutions": {
     "**/@types/react": "18.0.21"
diff --git a/client/src/common/components/buttons/ActionButtons.tsx b/client/src/common/components/buttons/ActionButtons.tsx
deleted file mode 100644
index 62344a52c..000000000
--- a/client/src/common/components/buttons/ActionButtons.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { IconButton, Menu, MenuButton, MenuItem, MenuList, Tooltip } from '@chakra-ui/react';
-import { FiClock } from '@react-icons/all-files/fi/FiClock';
-import { FiMinusCircle } from '@react-icons/all-files/fi/FiMinusCircle';
-import { FiPlus } from '@react-icons/all-files/fi/FiPlus';
-
-interface ActionButtonProps {
-  showAdd?: boolean;
-  showDelay?: boolean;
-  showBlock?: boolean;
-  actionHandler: (action: string) => void;
-}
-
-export default function ActionButtons(props: ActionButtonProps) {
-  const { showAdd, showDelay, showBlock, actionHandler } = props;
-
-  const menuStyle = {
-    color: '#000000',
-    backgroundColor: 'rgba(255,255,255,1)',
-  };
-
-  return (
-    <Menu isLazy lazyBehavior='unmount'>
-      <Tooltip label='Add ...'>
-        <MenuButton
-          as={IconButton}
-          aria-label='Options'
-          size='sm'
-          icon={<FiPlus />}
-          colorScheme='white'
-          variant='outline'
-        />
-      </Tooltip>
-      <MenuList style={menuStyle}>
-        <MenuItem icon={<FiPlus />} onClick={() => actionHandler('event')} isDisabled={!showAdd}>
-          Add Event after
-        </MenuItem>
-
-        <MenuItem icon={<FiClock />} onClick={() => actionHandler('delay')} isDisabled={!showDelay}>
-          Add Delay after
-        </MenuItem>
-        <MenuItem
-          icon={<FiMinusCircle />}
-          onClick={() => actionHandler('block')}
-          isDisabled={!showBlock}
-        >
-          Add Block after
-        </MenuItem>
-      </MenuList>
-    </Menu>
-  );
-}
diff --git a/client/src/common/components/buttons/QuitIconBtn.tsx b/client/src/common/components/buttons/QuitIconBtn.tsx
index 5c35b1f37..1c16afc50 100644
--- a/client/src/common/components/buttons/QuitIconBtn.tsx
+++ b/client/src/common/components/buttons/QuitIconBtn.tsx
@@ -19,6 +19,23 @@ interface QuitIconBtnProps {
   clickHandler: () => void;
   size?: Size;
 }
+
+const quitBtnStyle = {
+  color: '#D20300', // $red-700
+  borderColor: '#D20300', // $red-700
+  _focus: { boxShadow: 'none' },
+  _hover: {
+    background: '#D20300', // $red-700
+    color: 'white',
+  },
+  _active: {
+    background: '#9A0000', // $red-1000
+    color: 'white',
+  },
+  variant: 'outline',
+  isRound: true,
+};
+
 export default function QuitIconBtn(props: QuitIconBtnProps) {
   const { clickHandler, size = 'lg', ...rest } = props;
   const [isOpen, setIsOpen] = useState(false);
@@ -47,11 +64,8 @@ export default function QuitIconBtn(props: QuitIconBtnProps) {
           aria-label='Quit Application'
           size={size}
           icon={<FiPower />}
-          colorScheme='red'
-          variant='outline'
-          isRound
           onClick={() => setIsOpen(true)}
-          _focus={{ boxShadow: 'none' }}
+          {...quitBtnStyle}
           {...rest}
         />
       </Tooltip>
@@ -59,7 +73,7 @@ export default function QuitIconBtn(props: QuitIconBtnProps) {
         <AlertDialogOverlay>
           <AlertDialogContent>
             <AlertDialogHeader fontSize='lg' fontWeight='bold'>
-              Server Shutdown
+              Ontime Shutdown
             </AlertDialogHeader>
             <AlertDialogBody>
               This will shutdown the program and all running servers. Are you sure?
diff --git a/client/src/common/components/collapseBar/CollapseBar.jsx b/client/src/common/components/collapseBar/CollapseBar.jsx
deleted file mode 100644
index c2fcf2e60..000000000
--- a/client/src/common/components/collapseBar/CollapseBar.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Icon } from '@chakra-ui/react';
-import { FiChevronUp } from '@react-icons/all-files/fi/FiChevronUp';
-import PropTypes from 'prop-types';
-
-import style from './CollapseBar.module.scss';
-
-export default function CollapseBar(props) {
-  const { title = 'Collapse bar', isCollapsed, onClick } = props;
-
-  return (
-    <div className={style.header}>
-      {title}
-      <Icon
-        className={isCollapsed ? style.moreCollapsed : style.moreExpanded}
-        as={FiChevronUp}
-        onClick={onClick}
-      />
-    </div>
-  );
-}
-CollapseBar.propTypes = {
-  title: PropTypes.string,
-  isCollapsed: PropTypes.bool,
-  onClick: PropTypes.func,
-};
diff --git a/client/src/common/components/collapseBar/CollapseBar.module.scss b/client/src/common/components/collapseBar/CollapseBar.module.scss
index cda8e11e4..290a15e70 100644
--- a/client/src/common/components/collapseBar/CollapseBar.module.scss
+++ b/client/src/common/components/collapseBar/CollapseBar.module.scss
@@ -1,27 +1,23 @@
-@use '../../../theme/main' as *;
+@use '../../../theme/v2Styles' as *;
 
 .header {
-  padding: 0;
-  margin: 0;
-  font-size: 0.9em;
+  font-size: $inner-section-text-size;
+  font-weight: 600;
   display: flex;
   justify-content: space-between;
-  color: $header-gray;
-}
-
-
-.moreExpanded,
-.moreCollapsed {
+  color: $section-white;
+  border-bottom: 1px solid $border-color-ondark;
+  padding-bottom: $element-inner-spacing;
+  margin-bottom: $element-spacing;
   cursor: pointer;
-  color: $text-white;
 }
 
 .moreExpanded {
   transform: scaleY(-1);
-  transition: transform 0.3s;
+  transition: transform $transition-time-feedback;
 }
 
 .moreCollapsed {
   transform: scaleY(1);
-  transition: transform 0.3s;
+  transition: transform $transition-time-feedback;
 }
diff --git a/client/src/common/components/collapseBar/CollapseBar.tsx b/client/src/common/components/collapseBar/CollapseBar.tsx
new file mode 100644
index 000000000..820462662
--- /dev/null
+++ b/client/src/common/components/collapseBar/CollapseBar.tsx
@@ -0,0 +1,20 @@
+import { FiChevronUp } from '@react-icons/all-files/fi/FiChevronUp';
+
+import style from './CollapseBar.module.scss';
+
+interface CollapseBarProps {
+  title: string;
+  isCollapsed: boolean;
+  onClick: () => void;
+}
+
+export default function CollapseBar(props: CollapseBarProps) {
+  const { title = 'Collapse bar', isCollapsed, onClick } = props;
+
+  return (
+    <div className={style.header} onClick={onClick}>
+      {title}
+      <FiChevronUp className={isCollapsed ? style.moreCollapsed : style.moreExpanded} />
+    </div>
+  );
+}
diff --git a/client/src/common/components/copy-tag/CopyTag.tsx b/client/src/common/components/copy-tag/CopyTag.tsx
new file mode 100644
index 000000000..aa3e8c328
--- /dev/null
+++ b/client/src/common/components/copy-tag/CopyTag.tsx
@@ -0,0 +1,35 @@
+import { PropsWithChildren } from 'react';
+import { Button, ButtonGroup, IconButton, Tooltip } from '@chakra-ui/react';
+import { IoCopy } from '@react-icons/all-files/io5/IoCopy';
+
+import { tooltipDelayFast } from '../../../ontimeConfig';
+import { Size } from '../../models/UtilTypes';
+
+interface CopyTagProps {
+  label: string;
+  className?: string;
+  size?: Size;
+}
+
+export default function CopyTag(props: PropsWithChildren<CopyTagProps>) {
+  const { label, className, size = 'xs', children } = props;
+
+  return (
+    <Tooltip label={label} openDelay={tooltipDelayFast}>
+      <ButtonGroup
+        size={size}
+        isAttached
+        className={className}
+      >
+        <Button variant='ontime-subtle' tabIndex={-1}>{children}</Button>
+        <IconButton
+          aria-label={label}
+          icon={<IoCopy />}
+          variant='ontime-filled'
+          tabIndex={-1}
+          onClick={() => navigator.clipboard.writeText(children as string)}
+        />
+      </ButtonGroup>
+    </Tooltip>
+  );
+}
diff --git a/client/src/common/components/countdown/TimerDisplay.scss b/client/src/common/components/countdown/TimerDisplay.scss
index bc0db663a..fd3739c02 100644
--- a/client/src/common/components/countdown/TimerDisplay.scss
+++ b/client/src/common/components/countdown/TimerDisplay.scss
@@ -1,7 +1,7 @@
 @use '../../../theme/viewerDefs' as *;
 
 .timer {
-  font-family: 'Open Sans', sans-serif;
+  font-family:  var(--font-family-override, $ontime-font-family);
   color: var(--timer-color-override, $viewer-color);
   font-size: 21vw;
   line-height: 21vw;
@@ -9,7 +9,7 @@
   letter-spacing: 1vw;
 
   &--small {
-    font-size: 4em;
+    font-size: 3.75em;
     line-height: 0.9;
     text-align: center;
     letter-spacing: 0.1em;
diff --git a/client/src/common/components/input/AutoTextArea.jsx b/client/src/common/components/input/AutoTextArea.jsx
deleted file mode 100644
index 0dbeb8626..000000000
--- a/client/src/common/components/input/AutoTextArea.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { Textarea } from '@chakra-ui/react';
-import autosize from 'autosize/dist/autosize';
-
-export const AutoTextArea = (props) => {
-  const ref = useRef();
-
-  useEffect(() => {
-    const node = ref.current;
-    autosize(ref.current);
-    return () => {
-      autosize.destroy(node);
-    };
-  }, []);
-
-
-  return (
-    <Textarea
-      overflow='hidden'
-      w='100%'
-      resize='none'
-      ref={ref}
-      transition='height none'
-      {...props}
-    />
-  );
-};
diff --git a/client/src/common/components/input/TextInput.jsx b/client/src/common/components/input/TextInput.jsx
deleted file mode 100644
index 7796f7311..000000000
--- a/client/src/common/components/input/TextInput.jsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { Input, Textarea } from '@chakra-ui/react';
-import PropTypes from 'prop-types';
-
-export default function TextInput(props) {
-  const { isTextArea, size = 'sm', field, initialText = '', submitHandler } = props;
-  const inputRef = useRef(null);
-  const [text, setText] = useState(initialText);
-
-  useEffect(() => {
-    if (typeof initialText === 'undefined') {
-      setText('');
-    } else {
-      setText(initialText);
-    }
-  }, [initialText]);
-
-  /**
-   * @description Handles Input value change
-   * @param {string} newValue
-   */
-  const handleChange = useCallback(
-    (newValue) => {
-      if (newValue !== text) {
-        setText(newValue);
-      }
-    },
-    [text]
-  );
-
-  /**
-   * @description Handles submit events
-   * @param {string} valueToSubmit
-   */
-  const handleSubmit = useCallback(
-    (valueToSubmit) => {
-      // No need to update if it hasn't changed
-      if (valueToSubmit === initialText) {
-        return;
-      }
-      const cleanVal = valueToSubmit.trim();
-      submitHandler(field, cleanVal);
-
-      if (cleanVal !== valueToSubmit) {
-        setText(cleanVal);
-      }
-    },
-    [field, initialText, submitHandler]
-  );
-
-  /**
-   * @description Resets input value to given
-   */
-  const resetValue = useCallback(async () => {
-    setText(initialText);
-  },[initialText])
-
-  /**
-   * @description Handles common keys for submit and cancel
-   * @param {KeyboardEvent} event
-   */
-  const keyHandler = useCallback(
-    (event) => {
-      if (event.key === 'Escape') {
-        resetValue();
-      } else if (event.key === 'Enter') {
-        if (!isTextArea) {
-          handleSubmit(text);
-        }
-      }
-    },
-    [resetValue, isTextArea, handleSubmit, text]
-  );
-
-  return isTextArea ? (
-    <Textarea
-      ref={inputRef}
-      size={size}
-      variant='filled'
-      value={text}
-      onChange={(event) => handleChange(event.target.value)}
-      onBlur={(event) => handleSubmit(event.target.value)}
-      onKeyDown={(event) => keyHandler(event)}
-      data-testid='input-textarea'
-    />
-  ) : (
-    <Input
-      ref={inputRef}
-      size={size}
-      variant='filled'
-      value={text}
-      onChange={(event) => handleChange(event.target.value)}
-      onBlur={(event) => handleSubmit(event.target.value)}
-      onKeyDown={(event) => keyHandler(event)}
-      data-testid='input-textfield'
-    />
-  );
-}
-
-TextInput.propTypes = {
-  isTextArea: PropTypes.bool,
-  size: PropTypes.string,
-  field: PropTypes.string.isRequired,
-  initialText: PropTypes.string,
-  submitHandler: PropTypes.func,
-};
diff --git a/client/src/common/components/input/TimeInput.jsx b/client/src/common/components/input/TimeInput.jsx
deleted file mode 100644
index 8232b7cc7..000000000
--- a/client/src/common/components/input/TimeInput.jsx
+++ /dev/null
@@ -1,197 +0,0 @@
-import { useCallback, useContext, useEffect, useRef, useState } from 'react';
-import { Button, Input, InputGroup, InputLeftElement, Tooltip } from '@chakra-ui/react';
-import { LoggingContext } from 'common/context/LoggingContext';
-import { forgivingStringToMillis } from 'common/utils/dateConfig';
-import { stringFromMillis } from 'common/utils/time';
-import PropTypes from 'prop-types';
-
-import { tooltipDelayFast } from '../../../ontimeConfig';
-
-import style from './TimeInput.module.scss';
-
-export default function TimeInput(props) {
-  const { name, submitHandler, time = 0, delay, placeholder, validationHandler, previousEnd } = props;
-  const { emitError } = useContext(LoggingContext);
-  const inputRef = useRef(null);
-  const [value, setValue] = useState('');
-
-  /**
-   * @description Resets input value to given
-   */
-  const resetValue = useCallback(() => {
-    // Todo: check if change is necessary
-    try {
-      setValue(stringFromMillis(time + delay));
-    } catch (error) {
-      emitError(`Unable to parse date: ${error.text}`);
-    }
-  }, [delay, emitError, time]);
-
-  /**
-   * @description Selects input text on focus
-   */
-  const handleFocus = useCallback(() => {
-    inputRef.current.select();
-  }, []);
-
-  /**
-   * @description Submit handler
-   * @param {string} newValue
-   */
-  const handleSubmit = useCallback(
-    (newValue) => {
-      // Check if there is anything there
-      if (newValue === '') {
-        return false;
-      }
-
-      let newValMillis = 0;
-
-      // check for known aliases
-      if (newValue === 'p' || newValue === 'prev' || newValue === 'previous') {
-        // string to pass should be the time of the end before
-        if (previousEnd != null) {
-          newValMillis = previousEnd;
-        }
-      } else if (
-        newValue.startsWith('+') ||
-        newValue.startsWith('p+') ||
-        newValue.startsWith('p +')
-      ) {
-        // string to pass should add to the end before
-        const val = newValue.substring(1);
-        newValMillis = previousEnd + forgivingStringToMillis(val);
-      } else {
-        // convert entered value to milliseconds
-        newValMillis = forgivingStringToMillis(newValue);
-      }
-
-      // Time now and time submittedVal
-      const originalMillis = time + delay;
-
-      // check if time is different from before
-      if (newValMillis === originalMillis) return false;
-
-      // validate with parent
-      if (!validationHandler(name, newValMillis)) return false;
-
-      // update entry
-      submitHandler(name, newValMillis);
-
-      return true;
-    },
-    [delay, name, previousEnd, submitHandler, time, validationHandler]
-  );
-
-  /**
-   * @description Prepare time fields
-   * @param {string} value string to be parsed
-   */
-  const validateAndSubmit = useCallback(
-    (newValue) => {
-      const success = handleSubmit(newValue);
-      if (success) {
-        const ms = forgivingStringToMillis(newValue);
-        setValue(stringFromMillis(ms + delay));
-      } else {
-        resetValue();
-      }
-    },
-    [delay, handleSubmit, resetValue]
-  );
-
-  /**
-   * @description Handles common keys for submit and cancel
-   * @param {KeyboardEvent} event
-   */
-  const onKeyDownHandler = useCallback(
-    (event) => {
-      if (event.key === 'Enter') {
-        inputRef.current.blur();
-        validateAndSubmit(event.target.value);
-      } else if (event.key === 'Tab') {
-        validateAndSubmit(event.target.value);
-      }
-      if (event.key === 'Escape') {
-        inputRef.current.blur();
-        resetValue();
-      }
-    },
-    [resetValue, validateAndSubmit]
-  );
-
-  useEffect(() => {
-    if (time == null) return;
-    resetValue();
-  }, [emitError, resetValue, time]);
-
-  const isDelayed = delay != null && delay !== 0;
-
-/*
-<IconButton
-    size='sm'
-    icon="s"
-    aria-label='automate'
-    colorScheme='white'
-    style={{ borderRadius: '2px', width: 'min-content' }}
-    tabIndex={-1}
-    variant='ghost'
-  />
-  */
-
-  const buttonInitial = () => {
-    if (name === 'timeStart') return 'S';
-    if (name === 'timeEnd') return 'E';
-    if (name === 'duration') return 'D';
-  }
-
-  const buttonTooltip = () => {
-    if (name === 'timeStart') return 'Start';
-    if (name === 'timeEnd') return 'End';
-    if (name === 'duration') return 'Duration';
-  }
-
-  return (
-    <InputGroup size='sm' className={`${style.timeInput} ${isDelayed ? style.delayed : ''}`}>
-      <InputLeftElement width='fit-content'>
-        <Tooltip label={buttonTooltip()} openDelay={tooltipDelayFast}>
-        <Button
-          size='sm'
-          variant='filled'
-          tabIndex={-1}
-          backgroundColor='#303030'
-          color='#fffffa'
-          borderRadius='2px 0 0 2px'
-          border={isDelayed ? "1px solid #d69e2e55" : "1px solid transparent"}
-        >
-          {buttonInitial()}
-        </Button>
-        </Tooltip>
-      </InputLeftElement>
-      <Input
-        ref={inputRef}
-        data-testid='time-input'
-        className={style.inputField}
-        type='text'
-        placeholder={placeholder}
-        variant='filled'
-        onFocus={handleFocus}
-        onChange={(event) => setValue(event.target.value)}
-        onBlur={resetValue}
-        onKeyDown={onKeyDownHandler}
-        value={value}
-        maxLength={8}
-      />
-    </InputGroup>
-  );
-}
-
-TimeInput.propTypes = {
-  name: PropTypes.string,
-  submitHandler: PropTypes.func,
-  time: PropTypes.number,
-  delay: PropTypes.number,
-  placeholder: PropTypes.string,
-  validationHandler: PropTypes.func,
-  previousEnd: PropTypes.number,
-};
diff --git a/client/src/common/components/input/TimeInput.module.scss b/client/src/common/components/input/TimeInput.module.scss
deleted file mode 100644
index 2edd1ff0c..000000000
--- a/client/src/common/components/input/TimeInput.module.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-@use '../../../theme/main' as *;
-
-@mixin input-field {
-  border: 1px solid transparent;
-  background-color: $input-bg;
-  font-size: 1em;
-  letter-spacing: 1px;
-
-  &:hover {
-    background-color: $input-hover-bg;
-  }
-}
-
-.timeInput {
-  width: fit-content !important;
-
-  .inputField {
-    @include input-field;
-    width: 7.5em;
-    padding: 0 0 0 2.6em;
-  }
-
-  &.delayed {
-    .inputField {
-      border: $input-delayed-border;
-      background-color: $input-bg-delayed;
-
-      &:hover {
-        background-color: $input-hover-bg-delayed;
-      }
-    }
-  }
-}
-
-.delayInput {
-  display: flex;
-  align-items: center;
-
-  .inputField {
-    @include input-field;
-  }
-
-  .label {
-    padding-left: 8px;
-    font-size: 14px;
-  }
-}
diff --git a/client/src/common/components/input/auto-text-area/AutoTextArea.tsx b/client/src/common/components/input/auto-text-area/AutoTextArea.tsx
new file mode 100644
index 000000000..108fa8682
--- /dev/null
+++ b/client/src/common/components/input/auto-text-area/AutoTextArea.tsx
@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react';
+import { Textarea, TextareaProps } from '@chakra-ui/react';
+// @ts-expect-error no types from library
+import autosize from 'autosize/dist/autosize';
+
+interface AutoTextAreaProps extends TextareaProps {
+  isDark?: boolean;
+}
+
+export const AutoTextArea = (props: AutoTextAreaProps) => {
+  const { isDark, ...rest } = props;
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    const node = ref.current;
+    autosize(ref.current);
+    return () => {
+      autosize.destroy(node);
+    };
+  }, []);
+
+
+  return (
+    <Textarea
+      overflow='hidden'
+      w='100%'
+      resize='none'
+      ref={ref}
+      transition='height none'
+      variant={isDark ? 'ontime-filled' : 'ontime-filled-onlight'}
+      {...rest}
+    />
+  );
+};
diff --git a/client/src/common/components/input/ColourInput.module.scss b/client/src/common/components/input/colour-input/ColourInput.module.scss
similarity index 76%
rename from client/src/common/components/input/ColourInput.module.scss
rename to client/src/common/components/input/colour-input/ColourInput.module.scss
index 3d84b0551..f0f402251 100644
--- a/client/src/common/components/input/ColourInput.module.scss
+++ b/client/src/common/components/input/colour-input/ColourInput.module.scss
@@ -1,5 +1,3 @@
-@use '../../../theme/main' as *;
-
 input[type="color"] {
   appearance: none;
   cursor: pointer;
diff --git a/client/src/common/components/input/ColourInput.tsx b/client/src/common/components/input/colour-input/ColourInput.tsx
similarity index 94%
rename from client/src/common/components/input/ColourInput.tsx
rename to client/src/common/components/input/colour-input/ColourInput.tsx
index 5ee64e49f..b4f910406 100644
--- a/client/src/common/components/input/ColourInput.tsx
+++ b/client/src/common/components/input/colour-input/ColourInput.tsx
@@ -12,7 +12,7 @@ export default function ColourInput(props: ColourInputProps) {
   return (
     <Input
       size='sm'
-      variant='filled'
+      variant='ontime-filled'
       className={style.colourInput}
       type='color'
       value={value}
diff --git a/client/src/common/components/input/delay-input/DelayInput.module.scss b/client/src/common/components/input/delay-input/DelayInput.module.scss
new file mode 100644
index 000000000..131a17b2f
--- /dev/null
+++ b/client/src/common/components/input/delay-input/DelayInput.module.scss
@@ -0,0 +1,9 @@
+.delayInput {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.inputField {
+  text-align: center;
+}
\ No newline at end of file
diff --git a/client/src/common/components/input/DelayInput.jsx b/client/src/common/components/input/delay-input/DelayInput.tsx
similarity index 50%
rename from client/src/common/components/input/DelayInput.jsx
rename to client/src/common/components/input/delay-input/DelayInput.tsx
index d46da430a..6e1286bfb 100644
--- a/client/src/common/components/input/DelayInput.jsx
+++ b/client/src/common/components/input/delay-input/DelayInput.tsx
@@ -3,24 +3,25 @@ import { Input } from '@chakra-ui/react';
 import { clamp } from 'common/utils/math';
 import PropTypes from 'prop-types';
 
-import style from './TimeInput.module.scss';
+import style from './DelayInput.module.scss';
 
-const inputProps = {
+const inputStyleProps = {
   width: 20,
-  backgroundColor: 'rgba(255,255,255,0.13)',
-  color: '#fff',
-  border: '1px solid #ecc94b55',
-  variant: 'filled',
-  borderRadius: '3px',
   placeholder: '-',
-  textAlign: 'center',
   size: 'sm',
+  color: '#E69056',
+  variant: 'ontime-filled',
 };
 
-export default function DelayInput(props) {
-  const { submitHandler, value } = props;
+interface DelayInputProps {
+  submitHandler: (value: number) => void;
+  value?: number;
+}
+
+export default function DelayInput(props: DelayInputProps) {
+  const { submitHandler, value = 0 } = props;
   const [_value, setValue] = useState(value);
-  const inputRef = useRef(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
 
   useEffect(() => {
     if (value == null) return;
@@ -32,7 +33,8 @@ export default function DelayInput(props) {
    * @param {string} value string to be parsed
    */
   const validate = useCallback(
-    (newValue) => {
+    (newValue?: string) => {
+      console.log('debug', newValue, typeof newValue);
       if (newValue === '') setValue(0);
       const delayValue = clamp(Number(newValue), -60, 60);
 
@@ -41,42 +43,42 @@ export default function DelayInput(props) {
 
       submitHandler(delayValue);
     },
-    [submitHandler, value]
+    [submitHandler, value],
   );
 
   /**
    * @description Handles common keys for submit and cancel
    * @param {KeyboardEvent} event
    */
-  const onKeyDownHandler = useCallback((event) => {
-    if (event.key === 'Enter') {
-      inputRef.current.blur();
-      validate(event.target.value);
-    } else if (event.key === 'Escape') {
-      inputRef.current.blur();
+  const onKeyDownHandler = useCallback((key: string) => {
+    if (key === 'Enter') {
+      inputRef.current?.blur();
+      validate(inputRef.current?.value);
+    } else if (key === 'Escape') {
+      inputRef.current?.blur();
       setValue(value);
     }
   }, [validate, value]);
 
-  const labelText = `${Math.abs(value) > 1 ? 'minutes' : 'minute'} ${
-    value >= 0 ? 'delayed' : 'ahead'
+  const labelText = `${Math.abs(value) !== 1 ? 'minutes' : 'minute'} ${
+    value !== undefined && value >= 0 ? 'delayed' : 'ahead'
   }`;
 
   return (
-    <div className={style.delayInput}>
+    <label className={style.delayInput}>
       <Input
+        {...inputStyleProps}
         ref={inputRef}
         data-testid='delay-input'
         className={style.inputField}
-        {...inputProps}
         value={_value}
-        onChange={(event) => setValue(event.target.value)}
-        onBlur={() => setValue(value)}
-        onKeyDown={onKeyDownHandler}
+        onChange={(event) => setValue(Number(event.target.value))}
+        onBlur={(event) => validate(event.target.value)}
+        onKeyDown={(event) => onKeyDownHandler(event.key)}
         type='number'
       />
-      <span className={style.label}>{labelText}</span>
-    </div>
+      {labelText}
+    </label>
   );
 }
 
diff --git a/client/src/common/components/input/text-input/TextInput.tsx b/client/src/common/components/input/text-input/TextInput.tsx
new file mode 100644
index 000000000..4de5bf428
--- /dev/null
+++ b/client/src/common/components/input/text-input/TextInput.tsx
@@ -0,0 +1,46 @@
+import { useCallback, useRef } from 'react';
+import { Input, Textarea } from '@chakra-ui/react';
+
+import { Size } from '../../../models/UtilTypes';
+
+import useReactiveTextInput from './useReactiveTextInput';
+
+interface TextInputProps {
+  isTextArea?: boolean;
+  isFullHeight?: boolean;
+  size?: Size;
+  field: string;
+  initialText?: string;
+  submitHandler: (field: string, newValue: string) => void;
+}
+
+export default function TextInput(props: TextInputProps) {
+  const { isTextArea, isFullHeight, size = 'sm', field, initialText = '', submitHandler } = props;
+  const inputRef = useRef(null);
+
+  const submitCallback = useCallback((newValue: string) =>
+      submitHandler(field, newValue)
+    , [field]);
+
+  const textInputProps = useReactiveTextInput(initialText, submitCallback, { submitOnEnter: true });
+  const textAreaProps = useReactiveTextInput(initialText, submitCallback);
+
+  return isTextArea ? (
+    <Textarea
+      ref={inputRef}
+      size={size}
+      variant='ontime-filled'
+      {...textAreaProps}
+      style={{ height: isFullHeight ? '100%' : undefined }}
+      data-testid='input-textarea'
+    />
+  ) : (
+    <Input
+      ref={inputRef}
+      size={size}
+      variant='ontime-filled'
+      {...textInputProps}
+      data-testid='input-textfield'
+    />
+  );
+}
diff --git a/client/src/common/components/input/__tests__/TextInput.test.jsx b/client/src/common/components/input/text-input/__tests__/TextInput.test.tsx
similarity index 93%
rename from client/src/common/components/input/__tests__/TextInput.test.jsx
rename to client/src/common/components/input/text-input/__tests__/TextInput.test.tsx
index d897a2118..afc8c36e4 100644
--- a/client/src/common/components/input/__tests__/TextInput.test.jsx
+++ b/client/src/common/components/input/text-input/__tests__/TextInput.test.tsx
@@ -9,7 +9,8 @@ describe('TextInput component', () => {
     it('renders correctly', () => {
       const testField = 'test';
       const testText = 'Test 123';
-      render(<TextInput field={testField} initialText={testText} />);
+      const submitHandler = vi.fn();
+      render(<TextInput field={testField} initialText={testText} submitHandler={submitHandler} />);
 
       const input = screen.getByTestId('input-textfield');
       expect(input).toBeInTheDocument();
@@ -19,7 +20,9 @@ describe('TextInput component', () => {
     it('Handles renders as textarea', () => {
       const testField = 'test';
       const testText = 'Test 123';
-      render(<TextInput field={testField} initialText={testText} isTextArea />);
+      const submitHandler = vi.fn();
+      render(<TextInput field={testField} initialText={testText} isTextArea
+                        submitHandler={submitHandler} />);
 
       const input = screen.getByTestId('input-textarea');
       expect(input).toBeInTheDocument();
@@ -87,7 +90,7 @@ describe('TextInput component', () => {
     it('handles undefined value', () => {
       const testField = 'test';
       const expected = '';
-      render(<TextInput field={testField} />);
+      render(<TextInput field={testField} submitHandler={vi.fn()} />);
       const input = screen.getByTestId('input-textfield');
       expect(input).toBeInTheDocument();
       expect(input).toHaveValue(expected);
diff --git a/client/src/common/components/input/text-input/useReactiveTextInput.tsx b/client/src/common/components/input/text-input/useReactiveTextInput.tsx
new file mode 100644
index 000000000..24f5f189e
--- /dev/null
+++ b/client/src/common/components/input/text-input/useReactiveTextInput.tsx
@@ -0,0 +1,88 @@
+import { ChangeEvent, useCallback, useEffect, useState } from 'react';
+
+interface UseReactiveTextInputReturn {
+  value: string;
+  onChange: (event: ChangeEvent) => void;
+  onBlur: (event: ChangeEvent) => void;
+  onKeyDown: (event: KeyboardEvent) => void;
+}
+
+export default function useReactiveTextInput(
+  initialText: string,
+  submitCallback: (newValue: string) => void,
+  options?: {
+    submitOnEnter?: boolean;
+  },
+): UseReactiveTextInputReturn {
+  const [text, setText] = useState(initialText);
+
+
+  useEffect(() => {
+    if (typeof initialText === 'undefined') {
+      setText('');
+    } else {
+      setText(initialText);
+    }
+  }, [initialText]);
+
+  /**
+   * @description Handles Input value change
+   * @param {string} newValue
+   */
+  const handleChange = useCallback(
+    (newValue: string) => {
+      if (newValue !== text) {
+        setText(newValue);
+      }
+    },
+    [text],
+  );
+
+  /**
+   * @description Handles submit events
+   * @param {string} valueToSubmit
+   */
+  const handleSubmit = useCallback(
+    (valueToSubmit: string) => {
+      // No need to update if it hasn't changed
+      if (valueToSubmit === initialText) {
+        return;
+      }
+      const cleanVal = valueToSubmit.trim();
+      submitCallback(cleanVal);
+
+      if (cleanVal !== valueToSubmit) {
+        setText(cleanVal);
+      }
+    },
+    [initialText, submitCallback],
+  );
+
+
+  /**
+   * @description Handles common keys for submit and cancel
+   * @param {string} key
+   */
+  const keyHandler = useCallback(
+    (key: string) => {
+      switch (key) {
+        case 'Escape':
+          setText(initialText);
+          break;
+        case 'Enter':
+          if (options?.submitOnEnter) {
+            handleSubmit(text);
+          }
+          break;
+      }
+    },
+    [initialText, handleSubmit, text],
+  );
+
+  return {
+    value: text,
+    onChange: (event) => handleChange((event.target as HTMLInputElement).value),
+    onBlur: (event) => handleSubmit((event.target as HTMLInputElement).value),
+    onKeyDown: (event) => keyHandler(event.key),
+  };
+}
diff --git a/client/src/common/components/input/time-input/TimeInput.jsx b/client/src/common/components/input/time-input/TimeInput.jsx
new file mode 100644
index 000000000..eca93dcec
--- /dev/null
+++ b/client/src/common/components/input/time-input/TimeInput.jsx
@@ -0,0 +1,174 @@
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { Button, Input, InputGroup, InputLeftElement, Tooltip } from '@chakra-ui/react';
+import { LoggingContext } from 'common/context/LoggingContext';
+import { forgivingStringToMillis } from 'common/utils/dateConfig';
+import { stringFromMillis } from 'common/utils/time';
+import PropTypes from 'prop-types';
+
+import { tooltipDelayFast } from '../../../../ontimeConfig';
+
+import style from './TimeInput.module.scss';
+
+export default function TimeInput(props) {
+  const {
+    name, submitHandler, time = 0, delay, placeholder, validationHandler, previousEnd,
+  } = props;
+  const { emitError } = useContext(LoggingContext);
+  const inputRef = useRef(null);
+  const [value, setValue] = useState('');
+
+  /**
+   * @description Resets input value to given
+   */
+  const resetValue = useCallback(() => {
+    // Todo: check if change is necessary
+    try {
+      setValue(stringFromMillis(time + delay));
+    } catch (error) {
+      emitError(`Unable to parse date: ${error.text}`);
+    }
+  }, [delay, emitError, time]);
+
+  /**
+   * @description Selects input text on focus
+   */
+  const handleFocus = useCallback(() => {
+    inputRef.current.select();
+  }, []);
+
+  /**
+   * @description Submit handler
+   * @param {string} newValue
+   */
+  const handleSubmit = useCallback((newValue) => {
+    // Check if there is anything there
+    if (newValue === '') {
+      return false;
+    }
+
+    let newValMillis = 0;
+
+    // check for known aliases
+    if (newValue === 'p' || newValue === 'prev' || newValue === 'previous') {
+      // string to pass should be the time of the end before
+      if (previousEnd != null) {
+        newValMillis = previousEnd;
+      }
+    } else if (newValue.startsWith('+') || newValue.startsWith('p+') || newValue.startsWith('p +')) {
+      // string to pass should add to the end before
+      const val = newValue.substring(1);
+      newValMillis = previousEnd + forgivingStringToMillis(val);
+    } else {
+      // convert entered value to milliseconds
+      newValMillis = forgivingStringToMillis(newValue);
+    }
+
+    // Time now and time submittedVal
+    const originalMillis = time + delay;
+
+    // check if time is different from before
+    if (newValMillis === originalMillis) return false;
+
+    // validate with parent
+    if (!validationHandler(name, newValMillis)) return false;
+
+    // update entry
+    submitHandler(name, newValMillis);
+
+    return true;
+  }, [delay, name, previousEnd, submitHandler, time, validationHandler]);
+
+  /**
+   * @description Prepare time fields
+   * @param {string} value string to be parsed
+   */
+  const validateAndSubmit = useCallback((newValue) => {
+    const success = handleSubmit(newValue);
+    if (success) {
+      const ms = forgivingStringToMillis(newValue);
+      setValue(stringFromMillis(ms + delay));
+    } else {
+      resetValue();
+    }
+  }, [delay, handleSubmit, resetValue]);
+
+  /**
+   * @description Handles common keys for submit and cancel
+   * @param {KeyboardEvent} event
+   */
+  const onKeyDownHandler = useCallback((event) => {
+    if (event.key === 'Enter') {
+      inputRef.current.blur();
+      validateAndSubmit(event.target.value);
+    } else if (event.key === 'Tab') {
+      validateAndSubmit(event.target.value);
+    }
+    if (event.key === 'Escape') {
+      inputRef.current.blur();
+      resetValue();
+    }
+  }, [resetValue, validateAndSubmit]);
+
+  useEffect(() => {
+    if (time == null) return;
+    resetValue();
+  }, [emitError, resetValue, time]);
+
+  const isDelayed = delay != null && delay !== 0;
+
+  const ButtonInitial = () => {
+    if (name === 'timeStart') return 'S';
+    if (name === 'timeEnd') return 'E';
+    if (name === 'duration') return 'D';
+  };
+
+  const ButtonTooltip = () => {
+    if (name === 'timeStart') return 'Start';
+    if (name === 'timeEnd') return 'End';
+    if (name === 'duration') return 'Duration';
+  };
+
+  return (
+    <InputGroup size='sm' className={`${style.timeInput} ${isDelayed ? style.delayed : ''}`}>
+      <InputLeftElement width='fit-content'>
+        <Tooltip label={<ButtonTooltip />} openDelay={tooltipDelayFast} variant='ontime-ondark'>
+          <Button
+            size='sm'
+            variant='ontime-subtle-white'
+            className={`${style.inputButton} ${isDelayed ? style.delayed : ''}`}
+            tabIndex={-1}
+            border={isDelayed ? '1px solid #E69056' : '1px solid transparent'}
+            borderRight='1px solid transparent'
+            borderRadius='2px 0 0 2px'
+          >
+            <ButtonInitial />
+          </Button>
+        </Tooltip>
+      </InputLeftElement>
+      <Input
+        ref={inputRef}
+        data-testid='time-input'
+        className={style.inputField}
+        type='text'
+        placeholder={placeholder}
+        variant='ontime-filled'
+        onFocus={handleFocus}
+        onChange={(event) => setValue(event.target.value)}
+        onBlur={resetValue}
+        onKeyDown={onKeyDownHandler}
+        value={value}
+        maxLength={8}
+      />
+    </InputGroup>
+  );
+}
+
+TimeInput.propTypes = {
+  name: PropTypes.string,
+  submitHandler: PropTypes.func,
+  time: PropTypes.number,
+  delay: PropTypes.number,
+  placeholder: PropTypes.string,
+  validationHandler: PropTypes.func,
+  previousEnd: PropTypes.number,
+};
diff --git a/client/src/common/components/input/time-input/TimeInput.module.scss b/client/src/common/components/input/time-input/TimeInput.module.scss
new file mode 100644
index 000000000..d21b423d4
--- /dev/null
+++ b/client/src/common/components/input/time-input/TimeInput.module.scss
@@ -0,0 +1,19 @@
+$input-font-size: 15px;
+$input-delayed-border-color: #E69056;
+
+.timeInput {
+  width: fit-content !important;
+
+  .inputField {
+    font-size: $input-font-size;
+    letter-spacing: 1px;
+    width: 7.5em;
+    padding: 0 0 0 2.6em;
+  }
+
+  &.delayed {
+    .inputField {
+      border: 1px solid $input-delayed-border-color;
+    }
+  }
+}
diff --git a/client/src/common/components/navigation-menu/NavigationMenu.module.scss b/client/src/common/components/navigation-menu/NavigationMenu.module.scss
index d14cde0a8..1f7b671e2 100644
--- a/client/src/common/components/navigation-menu/NavigationMenu.module.scss
+++ b/client/src/common/components/navigation-menu/NavigationMenu.module.scss
@@ -1,23 +1,15 @@
-$action-text-color: #87A3EF;
-$border-color: rgba(white, 0.1);
-$menu-bg: #202020;
-$menu-hover-bg: #101010;
-$menu-focus-bg: #181818;
-$menu-box-shadow: rgba(0, 0, 0, 0.15) 0 3px 3px 0;
+@use "../../../theme/v2Styles" as *;
+@use "../../../theme/mixins" as *;
+@use "../../../theme/ontimeColours" as *;
 
-$icon-color: #f6f6f6;
-$button-bg: #303030;
+$menu-bg: $gray-1200;
+$menu-hover-bg: $gray-1350;
+$menu-focus-bg: $gray-1300;
+
+$icon-color: $ui-white;
+$button-bg: $gray-1050;
 $button-size: 48px;
 
-$ontime-pink: #ff7597;
-
-// Todo: remove important once style is retired
-a {
-  &::after {
-    content: none !important;
-  }
-}
-
 .mirror {
   transform: rotate(180deg);
 }
@@ -47,15 +39,14 @@ a {
 .menuContainer {
   top: 0;
   left: 0;
-  font-family: 'Open Sans', sans-serif;
   height: fit-content;
   position: absolute;
   background-color: $menu-bg;
   min-width: 200px;
   border-radius: 0 0 24px 0;
-  border-right: 1px solid $border-color;
+  border-right: 1px solid $border-color-ondark;
 
-  box-shadow: $menu-box-shadow;
+  box-shadow: $box-shadow-l2;
   padding-bottom: 1rem;
 
   max-height: 100vh;
@@ -67,21 +58,17 @@ a {
 }
 
 .link {
-  color: $action-text-color;
-  display: flex;
-  align-items: center;
+  @include action-link;
   justify-content: space-between;
   padding: 0.5rem 1rem;
   cursor: pointer;
-  font-size: 14px;
 
   &:hover {
     background-color: $menu-hover-bg;
-    color: $ontime-pink;
   }
 
   &:active {
-    background-color: $border-color;
+    background-color: $border-color-ondark;
   }
 
   &:focus {
@@ -96,12 +83,11 @@ a {
   }
 }
 
-
 .linkIcon {
   display: inline-block;
   transform: rotate(45deg);
 }
 
 .separator {
-  border-color: $border-color;
+  border-color: $border-color-ondark;
 }
diff --git a/client/src/common/components/osc-tag/CopyTag.module.scss b/client/src/common/components/osc-tag/CopyTag.module.scss
deleted file mode 100644
index 2c1823377..000000000
--- a/client/src/common/components/osc-tag/CopyTag.module.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@use '../../../theme/main' as *;
-
-.copyTag {
-  display: flex;
-  border-radius: 2px;
-  border: 1px solid $action-blue;
-  cursor: pointer;
-  font-size: 0.75em;
-  width: max-content;
-
-  &:active {
-    border: 1px solid $text-white;
-  }
-}
-
-.label {
-  background-color: $action-blue;
-  color: $text-white;
-  padding: 0 4px;
-  font-weight: 600;
-}
-
-.text {
-  color: $label-gray;
-  padding: 0 4px;
-}
diff --git a/client/src/common/components/osc-tag/CopyTag.tsx b/client/src/common/components/osc-tag/CopyTag.tsx
deleted file mode 100644
index bbe2d632c..000000000
--- a/client/src/common/components/osc-tag/CopyTag.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { Tooltip } from '@chakra-ui/react';
-
-import { tooltipDelayFast } from '../../../ontimeConfig';
-
-import style from './CopyTag.module.scss';
-
-interface CopyTagProps {
-  label?: string;
-  className?: string;
-}
-
-export default function CopyTag(props: PropsWithChildren<CopyTagProps>) {
-  const { label, className, children } = props;
-
-  return (
-    <Tooltip label='Click to copy' openDelay={tooltipDelayFast}>
-      <button
-        className={`${style.copyTag} ${className}`}
-        onClick={() => navigator.clipboard.writeText(children as string)}
-        tabIndex={-1}
-      >
-        {label && (
-          <span className={style.label}>
-            {label}
-          </span>
-        )}
-        <span className={style.text}>
-        {children}
-        </span>
-      </button>
-    </Tooltip>
-  );
-}
diff --git a/client/src/common/context/LoggingContext.tsx b/client/src/common/context/LoggingContext.tsx
index a0d4460d1..92da245df 100644
--- a/client/src/common/context/LoggingContext.tsx
+++ b/client/src/common/context/LoggingContext.tsx
@@ -1,11 +1,16 @@
 import { createContext, ReactNode, useCallback, useEffect, useState } from 'react';
 
 import { generateId } from '../utils/generate_id';
+import socket from '../utils/socket';
 import { nowInMillis, stringFromMillis } from '../utils/time';
 
-import socket from '../utils/socket';
-type LOG_LEVEL = 'INFO' | 'WARN' | 'ERROR';
-type Log = {
+export enum LOG_LEVEL {
+  INFO = "INFO",
+  WARN = "WARN",
+  ERROR = "ERROR",
+}
+
+export type Log = {
   id: string;
   origin: string;
   time: string;
@@ -90,7 +95,7 @@ export const LoggingProvider = ({ children }: LoggingProviderProps) => {
    */
   const emitInfo = useCallback(
     (text: string) => {
-      _send(text, 'INFO');
+      _send(text, LOG_LEVEL.INFO);
     },
     [_send],
   );
@@ -101,7 +106,7 @@ export const LoggingProvider = ({ children }: LoggingProviderProps) => {
    */
   const emitWarning = useCallback(
     (text: string) => {
-      _send(text, 'WARN');
+      _send(text, LOG_LEVEL.WARN);
     },
     [_send],
   );
@@ -112,7 +117,7 @@ export const LoggingProvider = ({ children }: LoggingProviderProps) => {
    */
   const emitError = useCallback(
     (text: string) => {
-      _send(text, 'ERROR');
+      _send(text, LOG_LEVEL.ERROR);
     },
     [_send],
   );
diff --git a/client/src/common/hooks/useSocket.ts b/client/src/common/hooks/useSocket.ts
index d2444be92..f5bb437ff 100644
--- a/client/src/common/hooks/useSocket.ts
+++ b/client/src/common/hooks/useSocket.ts
@@ -46,7 +46,7 @@ const emptyMessageControl = {
 };
 
 export const useMessageControl = createSocketHook(FEAT_MESSAGECONTROL, emptyMessageControl);
-export const setMessage = () => ({
+export const setMessage = {
   presenterText: (payload: string) => socket.emit('set-timer-message-text', payload),
   presenterVisible: (payload: boolean) => socket.emit('set-timer-message-visible', payload),
   publicText: (payload: string) => socket.emit('set-public-message-text', payload),
@@ -54,7 +54,7 @@ export const setMessage = () => ({
   lowerText: (payload: string) => socket.emit('set-lower-message-text', payload),
   lowerVisible: (payload: boolean) => socket.emit('set-lower-message-visible', payload),
   onAir: (payload: boolean) => socket.emit('set-onAir', payload),
-});
+};
 
 export const emptyPlaybackControl = {
   playback: 'stop',
diff --git a/client/src/common/models/Info.types.ts b/client/src/common/models/Info.types.ts
index 975f3e036..5d0ec61a8 100644
--- a/client/src/common/models/Info.types.ts
+++ b/client/src/common/models/Info.types.ts
@@ -1,8 +1,13 @@
 import { OntimeSettingsType } from './OntimeSettings.type';
 
+type NetworkInterfaceType = {
+  name: string;
+  address: string;
+}
+
 export type InfoType = {
-  networkInterfaces: string[];
-  settings: Pick<OntimeSettingsType, "version" | "serverPort" >
+  networkInterfaces: NetworkInterfaceType[];
+  settings: Pick<OntimeSettingsType, 'version' | 'serverPort'>
 }
 
 export const ontimePlaceholderInfo: InfoType = {
diff --git a/client/src/features/control/__tests__/MessageControl.test.jsx b/client/src/features/control/__tests__/MessageControl.test.jsx
deleted file mode 100644
index 710f843e1..000000000
--- a/client/src/features/control/__tests__/MessageControl.test.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { QueryClientProvider } from '@tanstack/react-query';
-import { render, screen } from '@testing-library/react';
-
-import { queryClientMock } from '../../../__mocks__/QueryClient.mock';
-import MessageControl from '../message/MessageControl';
-
-
-// need to inject the socket provider to make component
-// render without failing
-const MockMessageControl = () => {
-  return (
-    <QueryClientProvider client={queryClientMock}>
-      <MessageControl />
-    </QueryClientProvider>
-  );
-};
-
-describe('Message Control input blocks', () => {
-  test('Presenter dialog', async () => {
-    // Presenter dialog and button
-    // substring match, ignore case
-    render(<MockMessageControl />);
-    expect(screen.getByPlaceholderText(/stage/i)).toBeInTheDocument();
-  });
-
-  test('Public dialog', async () => {
-    // Public dialog and button
-    // substring match, ignore case
-    render(<MockMessageControl />);
-    expect(screen.getByPlaceholderText(/public/i)).toBeInTheDocument();
-  });
-
-  test('Lower third', async () => {
-    // Lower third dialog and button
-    // substring match, ignore case
-    render(<MockMessageControl />);
-    expect(screen.getByPlaceholderText(/lower third/i)).toBeInTheDocument();
-  });
-});
diff --git a/client/src/features/control/__tests__/PlaybackControl.test.jsx b/client/src/features/control/__tests__/PlaybackControl.test.jsx
deleted file mode 100644
index 4cc5b8863..000000000
--- a/client/src/features/control/__tests__/PlaybackControl.test.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { QueryClientProvider } from '@tanstack/react-query';
-import { render, screen } from '@testing-library/react';
-
-import { queryClientMock } from '../../../__mocks__/QueryClient.mock';
-import PlaybackControl from '../playback/PlaybackControl';
-
-
-test('check that playback control renders', async () => {
-  // need to inject the socket provider to make component
-  // render without failing
-  render(
-    <QueryClientProvider client={queryClientMock}>
-      <PlaybackControl />
-    </QueryClientProvider>,
-  );
-
-  // Text labels for times
-  // substring match, ignore case
-  expect(screen.getByText(/started/i)).toBeInTheDocument();
-  expect(screen.getByText(/finish/i)).toBeInTheDocument();
-});
diff --git a/client/src/features/control/message/InputRow.module.scss b/client/src/features/control/message/InputRow.module.scss
new file mode 100644
index 000000000..184edad66
--- /dev/null
+++ b/client/src/features/control/message/InputRow.module.scss
@@ -0,0 +1,17 @@
+@use '../../../theme/v2Styles' as *;
+
+.inputItems {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: $element-spacing;
+  margin-top: $element-inner-spacing;
+}
+
+.label {
+  font-size: $inner-section-text-size;
+  color: $label-gray;
+
+  &.active {
+    color: $action-text-color;
+  }
+}
diff --git a/client/src/features/control/message/InputRow.tsx b/client/src/features/control/message/InputRow.tsx
index f923d9874..369bd8d99 100644
--- a/client/src/features/control/message/InputRow.tsx
+++ b/client/src/features/control/message/InputRow.tsx
@@ -1,16 +1,17 @@
 import { Input } from '@chakra-ui/react';
-import { IoSunny } from '@react-icons/all-files/io5/IoSunny';
+import { IoEye } from '@react-icons/all-files/io5/IoEye';
+import { IoEyeOffOutline } from '@react-icons/all-files/io5/IoEyeOffOutline';
 
 import TooltipActionBtn from '../../../common/components/buttons/TooltipActionBtn';
 import { tooltipDelayMid } from '../../../ontimeConfig';
 
-import style from './MessageControl.module.scss';
+import style from './InputRow.module.scss';
 
 interface InputRowProps {
   label: string;
   placeholder: string;
   text: string;
-  visible: boolean;
+  visible?: boolean;
   actionHandler: (action: string, payload: object) => void;
   changeHandler: (newValue: string) => void;
 }
@@ -23,12 +24,12 @@ export default function InputRow(props: InputRowProps) {
   };
 
   return (
-    <div className={`${visible ? style.inputRowActive : ''}`}>
-      <label className={style.label}>{label}</label>
+    <div className={style.inputRow}>
+      <label className={`${style.label} ${visible ? style.active : ''}`}>{label}</label>
       <div className={style.inputItems}>
         <Input
           size='sm'
-          variant='filled'
+          variant='ontime-filled'
           value={text}
           onChange={(event) => handleInputChange(event.target.value)}
           placeholder={placeholder}
@@ -38,9 +39,8 @@ export default function InputRow(props: InputRowProps) {
           tooltip={visible ? 'Make invisible' : 'Make visible'}
           aria-label={`Toggle ${label}`}
           openDelay={tooltipDelayMid}
-          icon={<IoSunny size='18px' />}
-          colorScheme='blue'
-          variant={visible ? 'solid' : 'outline'}
+          icon={visible? <IoEye size='18px' /> : <IoEyeOffOutline size='18px' />}
+          variant={visible ? 'ontime-filled' : 'ontime-subtle'}
           size='sm'
         />
       </div>
diff --git a/client/src/features/control/message/MessageControl.jsx b/client/src/features/control/message/MessageControl.jsx
deleted file mode 100644
index ff4db88e1..000000000
--- a/client/src/features/control/message/MessageControl.jsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { IconButton, Tooltip } from '@chakra-ui/react';
-import { IoMicOffOutline } from '@react-icons/all-files/io5/IoMicOffOutline';
-import { IoMicSharp } from '@react-icons/all-files/io5/IoMicSharp';
-
-import CopyTag from '../../../common/components/osc-tag/CopyTag';
-import { setMessage, useMessageControl } from '../../../common/hooks/useSocket';
-import { tooltipDelayMid } from '../../../ontimeConfig';
-
-import InputRow from './InputRow';
-
-import style from './MessageControl.module.scss';
-
-export default function MessageControl() {
-  const { data } = useMessageControl();
-
-  return (
-    <>
-      <div className={style.messageContainer}>
-        <InputRow
-          label='Timer screen message'
-          placeholder='Shown in stage timer'
-          text={data.presenter.text}
-          visible={data.presenter.visible}
-          changeHandler={(newValue) => setMessage.presenterText(newValue)}
-          actionHandler={() => setMessage.presenterVisible(!data.presenter.visible)}
-        />
-        <InputRow
-          label='Public screen message'
-          placeholder='Shown in public screens'
-          text={data.public.text}
-          visible={data.public.visible}
-          changeHandler={(newValue) => setMessage.publicText(newValue)}
-          actionHandler={() => setMessage.publicVisible(!data.public.visible)}
-        />
-        <InputRow
-          label='Lower third message'
-          placeholder='Shown in lower third'
-          text={data.lower.text}
-          visible={data.lower.visible}
-          changeHandler={(newValue) => setMessage.lowerText(newValue)}
-          actionHandler={() => setMessage.lowerVisible(!data.lower.visible)}
-        />
-      </div>
-      <div className={style.onAirToggle}>
-        <Tooltip label={data.onAir ? 'Go Off Air' : 'Go On Air'} openDelay={tooltipDelayMid}>
-          <IconButton
-            className={style.btn}
-            size='md'
-            icon={data.onAir ? <IoMicSharp size='24px' /> : <IoMicOffOutline size='24px' />}
-            colorScheme='blue'
-            variant={data.onAir ? 'solid' : 'outline'}
-            onClick={() => setMessage.onAir(!data.onAir)}
-            aria-label='Toggle On Air'
-          />
-        </Tooltip>
-        <div className={style.onAirLabel}>On Air</div>
-        <div className={style.oscLabel}>
-          <CopyTag label='OSC'>/ontime/offAir</CopyTag>
-          <CopyTag label='OSC'>/ontime/offAir</CopyTag>
-        </div>
-      </div>
-    </>
-  );
-}
diff --git a/client/src/features/control/message/MessageControl.module.scss b/client/src/features/control/message/MessageControl.module.scss
index d146c2ab1..6dd841962 100644
--- a/client/src/features/control/message/MessageControl.module.scss
+++ b/client/src/features/control/message/MessageControl.module.scss
@@ -1,66 +1,23 @@
-@use '../../../theme/main' as *;
-@use '../../../theme/mixins' as *;
-
-
-@mixin message-control-label() {
-  font-size: 0.9em;
-  color: $label-gray;
-}
-.messageContainer,
-.onAirToggle {
-  display: flex;
-  padding: 0.5em;
-}
+@use '../../../theme/v2Styles' as *;
 
 .messageContainer {
+  display: flex;
   flex-direction: column;
-  gap: 4px;
-
-  .inputItems {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    gap: 1em;
-  }
-
-  .label {
-    padding: 0;
-    margin: 0;
-    @include message-control-label;
-  }
-
-  .inputRowActive {
-    .label {
-      color: $action-blue;
-    }
-  }
+  gap: $section-spacing;
 }
 
-.onAirToggle {
-  margin-top: 1em;
-  display: grid;
-  grid-template-areas:
-          'btn label'
-          'btn osc';
-  grid-template-columns: auto 1fr;
-  grid-template-rows: 1fr 1fr;
-  align-items: center;
-
-  .btn {
-    aspect-ratio: 1;
-    grid-area: btn;
-    height: 100%;
-    margin-right: 16px;
-  }
-
-  .onAirLabel {
-    grid-area: label;
-    @include message-control-label;
-  }
-
-  .oscLabel {
-    grid-area: osc;
-    display: flex;
-    gap: 4px;
-  }
+.onAirSection {
+  margin-top: $section-spacing;
+  display: flex;
+  flex-direction: column;
+  gap: $element-spacing;
 }
 
+.label {
+  font-size: $inner-section-text-size;
+  color: $label-gray;
+
+  &.active {
+    color: $action-text-color;
+  }
+}
diff --git a/client/src/features/control/message/MessageControl.tsx b/client/src/features/control/message/MessageControl.tsx
new file mode 100644
index 000000000..229417a79
--- /dev/null
+++ b/client/src/features/control/message/MessageControl.tsx
@@ -0,0 +1,52 @@
+import { Button } from '@chakra-ui/react';
+import { IoMicOffOutline } from '@react-icons/all-files/io5/IoMicOffOutline';
+import { IoMicSharp } from '@react-icons/all-files/io5/IoMicSharp';
+
+import { setMessage, useMessageControl } from '../../../common/hooks/useSocket';
+
+import InputRow from './InputRow';
+
+import style from './MessageControl.module.scss';
+
+export default function MessageControl() {
+  const { data } = useMessageControl();
+
+  return (
+    <div className={style.messageContainer}>
+      <InputRow
+        label='Timer screen message'
+        placeholder='Shown in stage timer'
+        text={data?.presenter.text || ''}
+        visible={data?.presenter.visible || false}
+        changeHandler={(newValue) => setMessage.presenterText(newValue)}
+        actionHandler={() => setMessage.presenterVisible(!data?.presenter.visible)}
+      />
+      <InputRow
+        label='Public screen message'
+        placeholder='Shown in public screens'
+        text={data?.public.text || ''}
+        visible={data?.public.visible || false}
+        changeHandler={(newValue) => setMessage.publicText(newValue)}
+        actionHandler={() => setMessage.publicVisible(!data?.public.visible)}
+      />
+      <InputRow
+        label='Lower third message'
+        placeholder='Shown in lower third'
+        text={data?.lower.text || ''}
+        visible={data?.lower.visible || false}
+        changeHandler={(newValue) => setMessage.lowerText(newValue)}
+        actionHandler={() => setMessage.lowerVisible(!data?.lower.visible)}
+      />
+      <div className={style.onAirSection}>
+        <label className={style.label}>Toggle On Air state</label>
+        <Button
+          variant={data?.onAir ? 'ontime-filled' : 'ontime-subtle'}
+          leftIcon={data?.onAir ? <IoMicSharp size='24px' /> : <IoMicOffOutline size='24px' />}
+          onClick={() => setMessage.onAir(!data?.onAir)}
+        >
+          {data?.onAir ? 'Ontime is On Air' : 'Ontime is Off Air'}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/features/control/message/MessageControlExport.jsx b/client/src/features/control/message/MessageControlExport.jsx
index f904b2635..dbee85e7c 100644
--- a/client/src/features/control/message/MessageControlExport.jsx
+++ b/client/src/features/control/message/MessageControlExport.jsx
@@ -1,5 +1,5 @@
 import { Box } from '@chakra-ui/react';
-import { FiArrowUpRight } from '@react-icons/all-files/fi/FiArrowUpRight';
+import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 
 import ErrorBoundary from '../../../common/components/errorBoundary/ErrorBoundary';
 import { handleLinks } from '../../../common/utils/linkUtils';
@@ -11,7 +11,7 @@ import style from '../../editors/Editor.module.scss';
 export default function MessageControlExport() {
   return (
     <Box className={style.messages} data-testid="panel-messages-control">
-      <FiArrowUpRight className={style.corner} onClick={(event) => handleLinks(event, 'messagecontrol')} />
+      <IoArrowUp className={style.corner} onClick={(event) => handleLinks(event, 'messagecontrol')} />
       <div className={style.content}>
         <ErrorBoundary>
           <MessageControl />
diff --git a/client/src/features/control/playback/Playback.tsx b/client/src/features/control/playback/Playback.tsx
index f2eec769b..207e317c4 100644
--- a/client/src/features/control/playback/Playback.tsx
+++ b/client/src/features/control/playback/Playback.tsx
@@ -1,11 +1,9 @@
-import { Tooltip } from '@chakra-ui/react';
 import { IoPause } from '@react-icons/all-files/io5/IoPause';
 import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
 import { IoTimeOutline } from '@react-icons/all-files/io5/IoTimeOutline';
 
 import { setPlayback } from '../../../common/hooks/useSocket';
 import { Playstate } from '../../../common/models/OntimeTypes';
-import { tooltipDelayMid } from '../../../ontimeConfig';
 
 import TapButton from './TapButton';
 
@@ -13,48 +11,44 @@ import style from './PlaybackControl.module.scss';
 
 interface PlaybackProps {
   playback: Playstate;
-  selectedId: string;
+  selectedId: string | null;
   noEvents: boolean;
 }
 
 export default function Playback(props: PlaybackProps) {
   const { playback, selectedId, noEvents } = props;
   const isRolling = playback === 'roll';
+  const isPlaying = playback === 'start';
+  const isPaused = playback === 'pause';
 
   return (
     <div className={style.playbackContainer}>
-      <Tooltip label='Start playback' openDelay={100}>
-        <TapButton
-          onClick={() => setPlayback.start()}
-          disabled={!selectedId || isRolling || noEvents}
-          theme='start'
-          active={playback === 'start'}
-        >
-          <IoPlay />
-        </TapButton>
-      </Tooltip>
+      <TapButton
+        onClick={() => setPlayback.start()}
+        disabled={!selectedId || isRolling || noEvents}
+        theme='start'
+        active={isPlaying}
+      >
+        <IoPlay />
+      </TapButton>
 
-      <Tooltip label='Pause playback' openDelay={tooltipDelayMid}>
-        <TapButton
-          onClick={() => setPlayback.pause()}
-          disabled={!selectedId || isRolling || noEvents || playback !== 'start'}
-          theme='pause'
-          active={playback === 'pause'}
-        >
-          <IoPause />
-        </TapButton>
-      </Tooltip>
+      <TapButton
+        onClick={() => setPlayback.pause()}
+        disabled={!selectedId || isRolling || noEvents}
+        theme='pause'
+        active={isPaused}
+      >
+        <IoPause />
+      </TapButton>
 
-      <Tooltip label='Start roll mode' openDelay={tooltipDelayMid}>
-        <TapButton
-          onClick={() => setPlayback.roll()}
-          disabled={playback === 'roll' || noEvents}
-          theme='roll'
-          active={isRolling}
-        >
-          <IoTimeOutline />
-        </TapButton>
-      </Tooltip>
+      <TapButton
+        onClick={() => setPlayback.roll()}
+        disabled={noEvents}
+        theme='roll'
+        active={isRolling}
+      >
+        <IoTimeOutline />
+      </TapButton>
     </div>
   );
 }
diff --git a/client/src/features/control/playback/PlaybackButtons.jsx b/client/src/features/control/playback/PlaybackButtons.jsx
deleted file mode 100644
index ef284dd27..000000000
--- a/client/src/features/control/playback/PlaybackButtons.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { memo } from 'react';
-import PropTypes from 'prop-types';
-
-import Playback from './Playback';
-import Transport from './Transport';
-
-const areEqual = (prevProps, nextProps) => {
-  return (
-    prevProps.playback === nextProps.playback &&
-    prevProps.selectedId === nextProps.selectedId &&
-    prevProps.noEvents === nextProps.noEvents
-  );
-};
-
-const PlaybackButtons = (props) => {
-  const { playback, selectedId, noEvents, playbackControl } = props;
-  return (
-    <>
-      <Playback
-        playback={playback}
-        selectedId={selectedId}
-        noEvents={noEvents}
-        playbackControl={playbackControl}
-      />
-      <Transport
-        playback={playback}
-        selectedId={selectedId}
-        noEvents={noEvents}
-        playbackControl={playbackControl}
-      />
-    </>
-  );
-};
-
-export default memo(PlaybackButtons, areEqual);
-
-PlaybackButtons.propTypes = {
-  playback: PropTypes.string,
-  selectedId: PropTypes.string,
-  playbackControl: PropTypes.object,
-  noEvents: PropTypes.bool.isRequired,
-};
diff --git a/client/src/features/control/playback/PlaybackButtons.tsx b/client/src/features/control/playback/PlaybackButtons.tsx
new file mode 100644
index 000000000..5f1caec2b
--- /dev/null
+++ b/client/src/features/control/playback/PlaybackButtons.tsx
@@ -0,0 +1,28 @@
+import { Playstate } from '../../../common/models/OntimeTypes';
+
+import Playback from './Playback';
+import Transport from './Transport';
+
+interface PlaybackButtonsProps {
+  playback: Playstate;
+  selectedId: string | null;
+  noEvents: boolean;
+}
+
+export default function PlaybackButtons(props: PlaybackButtonsProps) {
+  const { playback, selectedId, noEvents } = props;
+  return (
+    <>
+      <Playback
+        playback={playback}
+        selectedId={selectedId}
+        noEvents={noEvents}
+      />
+      <Transport
+        playback={playback}
+        selectedId={selectedId}
+        noEvents={noEvents}
+      />
+    </>
+  );
+};
diff --git a/client/src/features/control/playback/PlaybackControl.module.scss b/client/src/features/control/playback/PlaybackControl.module.scss
index f04f637f9..a3e132f98 100644
--- a/client/src/features/control/playback/PlaybackControl.module.scss
+++ b/client/src/features/control/playback/PlaybackControl.module.scss
@@ -1,14 +1,14 @@
-@use '../../../theme/main' as *;
+@use '../../../theme/v2Styles' as *;
+@use '../../../theme/ontimeColours' as *;
 @use '../../../theme/mixins' as *;
 
 .mainContainer {
   width: 100%;
   display: grid;
   margin: 0 auto;
-  gap: 4px;
+  gap: $element-inner-spacing;
 }
 
-
 .timeContainer {
   display: grid;
   grid-template-areas:
@@ -16,7 +16,7 @@
     '... sta fin btn';
   grid-template-rows: 1fr auto;
   grid-template-columns: 1.5em 1fr 1fr 5em;
-  gap: 4px;
+  gap: $element-inner-spacing;
   justify-items: start;
 }
 
@@ -38,16 +38,16 @@
 .indRoll,
 .indDelay,
 .indNegative {
-  background-color: $bg-black-300;
+  background-color: $gray-1300;
 }
 
 .indRoll,
 .indRollActive,
 .indDelay {
   margin: 0 auto;
-  border-radius: 50%;
-  width: 0.8em;
-  height: 0.8em;
+  border-radius: 6px;
+  width: 12px;
+  height: 12px;
 }
 
 .indRollActive {
@@ -58,11 +58,11 @@
 .indNegativeActive {
   margin: 0 auto;
   width: 90%;
-  height: 0.3em;
+  height: 4px;
 }
 
 .indNegativeActive {
-  background-color: $ontime-pink-variant;
+  background-color: $playback-negative;
 }
 
 .indDelayActive {
@@ -75,7 +75,7 @@
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr;
   width: 100%;
-  gap: 4px;
+  gap: $element-inner-spacing;
 }
 
 .minus {
@@ -103,23 +103,27 @@
 }
 
 .time {
-  color: $header-gray;
-  font-size: 1.1em;
+  color: $section-white;
+  font-size: $text-body-size;
 }
 
 .tag {
   color: $label-gray;
-  font-size: 0.9em;
+  font-size: 13px;
 }
 
 .rolltag {
   color: $ontime-roll;
-  font-size: 0.9em;
+  font-size: $text-body-size;
 }
 
 .playbackContainer {
   display: flex;
   justify-content: space-evenly;
   padding-top: 0.5em;
-  gap: 10px;
+  gap: $element-spacing;
 }
+
+.invertX {
+  transform: rotateY(180deg);
+}
\ No newline at end of file
diff --git a/client/src/features/control/playback/PlaybackTimer.tsx b/client/src/features/control/playback/PlaybackTimer.tsx
index 738afed5a..a1543574d 100644
--- a/client/src/features/control/playback/PlaybackTimer.tsx
+++ b/client/src/features/control/playback/PlaybackTimer.tsx
@@ -59,7 +59,7 @@ export default function PlaybackTimer(props: PlaybackTimerProps) {
         </>
       )}
       <div className={style.btn}>
-        <Tooltip label='Remove 1 minute' openDelay={tooltipDelayMid}
+        <Tooltip label='Remove 5 minutes' openDelay={tooltipDelayMid}
                  shouldWrapChildren={disableButtons}>
           <TapButton
             onClick={() => setPlayback.delay(-5)}
@@ -68,33 +68,33 @@ export default function PlaybackTimer(props: PlaybackTimerProps) {
             -5
           </TapButton>
         </Tooltip>
+        <Tooltip label='Add 5 minutes' openDelay={tooltipDelayMid}
+                 shouldWrapChildren={disableButtons}>
+          <TapButton
+            onClick={() => setPlayback.delay(+5)}
+            disabled={disableButtons}
+            square>
+            5
+          </TapButton>
+        </Tooltip>
         <Tooltip label='Remove 1 minute' openDelay={tooltipDelayMid}
                  shouldWrapChildren={disableButtons}>
           <TapButton
-            onClick={() => setPlayback.delay(-5)}
+            onClick={() => setPlayback.delay(-1)}
             disabled={disableButtons}
             square>
             -1
           </TapButton>
         </Tooltip>
-        <Tooltip label='Remove 1 minute' openDelay={tooltipDelayMid}
+        <Tooltip label='Add 1 minute' openDelay={tooltipDelayMid}
                  shouldWrapChildren={disableButtons}>
           <TapButton
-            onClick={() => setPlayback.delay(-5)}
+            onClick={() => setPlayback.delay(1)}
             disabled={disableButtons}
             square>
             1
           </TapButton>
         </Tooltip>
-        <Tooltip label='Remove 1 minute' openDelay={tooltipDelayMid}
-                 shouldWrapChildren={disableButtons}>
-          <TapButton
-            onClick={() => setPlayback.delay(-5)}
-            disabled={disableButtons}
-            square>
-            5
-          </TapButton>
-        </Tooltip>
       </div>
     </div>
   );
diff --git a/client/src/features/control/playback/TapButton.module.scss b/client/src/features/control/playback/TapButton.module.scss
index f208c59e8..838aa362d 100644
--- a/client/src/features/control/playback/TapButton.module.scss
+++ b/client/src/features/control/playback/TapButton.module.scss
@@ -1,62 +1,81 @@
-@use '../../../theme/main' as *;
+@use '../../../theme/v2Styles' as *;
+@use '../../../theme/ontimeColours' as *;
 
-@mixin tap-factory($theme-front, $theme-bg, $theme-high) {
-  font-family: "Open Sans", sans-serif;
+$button-bg-gray: $gray-1050;
+$button-color-white: $gray-50;
+
+@mixin tap-factory($theme-color) {
+  font-family: $ontime-font-family;
   font-size: 22px;
-  background-color: $theme-bg;
-  color: $theme-front;
-  border-radius: 3px;
+  border-radius: $component-border-radius-md;
   width: 100%;
   aspect-ratio: 3/1;
-  box-shadow: $theme-high 0 0 2px;
-  transition: background-color 0.3s;
+  transition-property: color, background-color;
+  transition-duration: $transition-time-feedback;
   display: grid;
   place-content: center;
+  letter-spacing: 0.3px;
+
+  background-color: $button-bg-gray;
+  color: $theme-color;
 
   &:disabled {
     cursor: not-allowed;
-    background-color: $opacity-disabled;
-    box-shadow: none;
     opacity: $opacity-disabled;
   }
 
   &:hover:not(:disabled) {
-    background-color: $theme-high;
+    color: $button-color-white;
+    background-color: $theme-color;
   }
 
   &:active:not(:disabled) {
-    color: $theme-bg;
-    background-color: $theme-front;
-    transition: background-color 0.15s;
+    color: $button-bg-gray;
+    background-color: $button-color-white;
+    transition-property: color, background-color;
+    transition-duration: $transition-time-action;
   }
 
   &.active {
-    background-color: $theme-high;
+    background-color: $theme-color;
+    color: $button-color-white;
   }
 }
 
-.tapButton.neutral{
-  @include tap-factory(rgba(255, 255, 255, 0.867), #303030, #363636);
+.tapButton.neutral {
+  @include tap-factory($gray-50);
+
+  &:hover:not(:disabled) {
+    color: $gray-50;
+    background-color: $gray-1000;
+  }
+
+  &:active:not(:disabled) {
+    color: $button-bg-gray;
+    background-color: $button-color-white;
+    transition-property: color, background-color;
+    transition-duration: $transition-time-action;
+  }
 }
 
 .tapButton.start {
-  @include tap-factory(rgba(255, 255, 255, 0.867), #303030, $ontime-accent);
+  @include tap-factory($playback-start);
 }
 
 .tapButton.roll {
-  @include tap-factory(rgba(255, 255, 255, 0.867), #303030, $ontime-roll);
+  @include tap-factory($ontime-roll);
 }
 
 .tapButton.pause {
-  @include tap-factory(rgba(255, 255, 255, 0.867), #303030, $ontime-paused);
+  @include tap-factory($ontime-paused);
 }
 
 .tapButton.ontime {
-  @include tap-factory(rgba(255, 255, 255, 0.867), #303030, $ontime-pink);
+  @include tap-factory($ontime-color);
 }
 
 .tapButton.stop {
-  @include tap-factory(rgba(255, 255, 255, 0.867), #303030, $ontime-red);
+  @include tap-factory($ontime-stop);
 }
 
 .tapButton.square {
diff --git a/client/src/features/control/playback/TimerControlExport.jsx b/client/src/features/control/playback/TimerControlExport.tsx
similarity index 66%
rename from client/src/features/control/playback/TimerControlExport.jsx
rename to client/src/features/control/playback/TimerControlExport.tsx
index 1c41abc30..52bf96c77 100644
--- a/client/src/features/control/playback/TimerControlExport.jsx
+++ b/client/src/features/control/playback/TimerControlExport.tsx
@@ -1,5 +1,5 @@
 import { Box } from '@chakra-ui/react';
-import { FiArrowUpRight } from '@react-icons/all-files/fi/FiArrowUpRight';
+import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 
 import ErrorBoundary from '../../../common/components/errorBoundary/ErrorBoundary';
 import { handleLinks } from '../../../common/utils/linkUtils';
@@ -10,8 +10,8 @@ import style from '../../editors/Editor.module.scss';
 
 export default function TimerControlExport() {
   return (
-    <Box className={style.playback} data-testid="panel-timer-control">
-      <FiArrowUpRight className={style.corner} onClick={(event) => handleLinks(event, 'timercontrol')} />
+    <Box className={style.playback} data-testid='panel-timer-control'>
+      <IoArrowUp className={style.corner} onClick={(event) => handleLinks(event, 'timercontrol')} />
       <div className={style.content}>
         <ErrorBoundary>
           <PlaybackControl />
diff --git a/client/src/features/control/playback/Transport.tsx b/client/src/features/control/playback/Transport.tsx
index 7fb19a5e8..7a647a7f2 100644
--- a/client/src/features/control/playback/Transport.tsx
+++ b/client/src/features/control/playback/Transport.tsx
@@ -1,7 +1,7 @@
 import { Tooltip } from '@chakra-ui/react';
-import { IoPlayBack } from '@react-icons/all-files/io5/IoPlayBack';
 import { IoPlaySkipBack } from '@react-icons/all-files/io5/IoPlaySkipBack';
 import { IoPlaySkipForward } from '@react-icons/all-files/io5/IoPlaySkipForward';
+import { IoReload } from '@react-icons/all-files/io5/IoReload';
 import { IoStop } from '@react-icons/all-files/io5/IoStop';
 
 import { setPlayback } from '../../../common/hooks/useSocket';
@@ -14,7 +14,7 @@ import style from './PlaybackControl.module.scss';
 
 interface TransportProps {
   playback: Playstate;
-  selectedId: string;
+  selectedId: string | null;
   noEvents: boolean;
 }
 
@@ -45,10 +45,10 @@ export default function Transport(props: TransportProps) {
           onClick={() => setPlayback.reload()}
           disabled={selectedId == null || isRolling || noEvents}
         >
-          <IoPlayBack />
+          <IoReload className={style.invertX} />
         </TapButton>
       </Tooltip>
-      <Tooltip label='Unload Event' openDelay={100}>
+      <Tooltip label='Unload Event' openDelay={tooltipDelayMid}>
         <TapButton
           onClick={() => setPlayback.stop()}
           disabled={(selectedId == null && !isRolling) || noEvents}
diff --git a/client/src/features/editors/Editor.module.scss b/client/src/features/editors/Editor.module.scss
index bcfb7d468..7de2ab762 100644
--- a/client/src/features/editors/Editor.module.scss
+++ b/client/src/features/editors/Editor.module.scss
@@ -5,12 +5,13 @@
   top: $distance;
   right: $distance;
   cursor: pointer;
-  color: $ontime-pink;
+  color: #f2f2f2;
 }
 
 .corner {
   display: none;
   @include absolute-top-right(8px);
+  transform: rotate(45deg);
 }
 
 .mainContainer {
@@ -20,10 +21,11 @@
   margin: auto;
   color: $title-white;
   padding: max(16px, 2vh) max(8px, 1vh);
+  font-family: "Open Sans", "Segoe UI", sans-serif;
 
   display: grid;
   grid-template-rows: auto 1fr;
-  grid-template-columns: 48px 46em 30em auto;
+  grid-template-columns: 48px 46em 450px auto;
   grid-template-areas:
     'sett even play info'
     'sett even mess info';
@@ -130,17 +132,17 @@
 }
 
 .eventEditor {
-  border-radius: 3px 3px 0 0;
-  background-color: $bg-black;
+  border-radius: 8px 8px 0 0;
+  background-color: #202020;
+  box-shadow: rgba(0, 0, 0, 0.35) 0 3px 6px 6px;
   border-top: 1px solid $bg-gray-900;
   position: absolute;
   bottom: 0;
   width: 100vw;
-  max-height: 40vh;
   left: 0;
   z-index: 10;
   color: white;
-  transition: bottom 0.3s;
+  transition: bottom 0.3s; // $transition-time
 
   &.noEvent {
     bottom: -500px;
@@ -152,7 +154,7 @@
   }
 
   .header {
-    background-color: $bg-black;
+    background-color: #202020;
     padding: 8px;
     border-left: 1px solid $bg-container-l3;
   }
@@ -186,9 +188,9 @@
 
 .playback {
   grid-area: play;
-  min-height: 275px;
+  min-height: 250px;
   max-height: 380px;
-  min-width: 480px;
+  min-width: 450px;
 }
 
 .mainContainer > .settings {
diff --git a/client/src/features/event-editor/EventEditor.jsx b/client/src/features/event-editor/EventEditor.jsx
index cdf89633c..1eff125ef 100644
--- a/client/src/features/event-editor/EventEditor.jsx
+++ b/client/src/features/event-editor/EventEditor.jsx
@@ -1,11 +1,10 @@
 import { useCallback, useContext, useEffect, useState } from 'react';
-import { Button, Select } from '@chakra-ui/react';
-import { FiUsers } from '@react-icons/all-files/fi/FiUsers';
+import { Button, Select, Switch } from '@chakra-ui/react';
 import { IoBan } from '@react-icons/all-files/io5/IoBan';
 import { editorEventId } from 'common/atoms/LocalEventSettings';
-import ColourInput from 'common/components/input/ColourInput';
-import TextInput from 'common/components/input/TextInput';
-import TimeInput from 'common/components/input/TimeInput';
+import ColourInput from 'common/components/input/colour-input/ColourInput';
+import TextInput from 'common/components/input/text-input/TextInput';
+import TimeInput from 'common/components/input/time-input/TimeInput';
 import { LoggingContext } from 'common/context/LoggingContext';
 import { useEventAction } from 'common/hooks/useEventAction';
 import { millisToMinutes } from 'common/utils/dateConfig';
@@ -14,10 +13,10 @@ import { stringFromMillis } from 'common/utils/time';
 import { calculateDuration, validateEntry } from 'common/utils/timesManager';
 import { useAtom } from 'jotai';
 
+import CopyTag from '../../common/components/copy-tag/CopyTag';
 import useRundown from '../../common/hooks-query/useRundown';
 
 import style from './EventEditor.module.scss';
-import CopyTag from '../../common/components/osc-tag/CopyTag';
 
 export default function EventEditor() {
   const [openId] = useAtom(editorEventId);
@@ -93,7 +92,7 @@ export default function EventEditor() {
   );
 
   if (!event) {
-    return <span>Loading</span>;
+    return <span>Loading...</span>;
   }
 
   const delayed = delay !== 0;
@@ -105,6 +104,10 @@ export default function EventEditor() {
 
   return (
     <div className={style.eventEditor}>
+      <div className={style.eventInfo}>{`Event ${'not yet'} | Event ID ${event.id}`}</div>
+      <div className={style.eventActions}>
+        <CopyTag label='OSC trigger'>{`/ontime/gotoid/${event.id}`}</CopyTag>
+      </div>
       <div className={style.timeOptions}>
         <div className={style.timers}>
           <label className={style.inputLabel}>
@@ -116,7 +119,7 @@ export default function EventEditor() {
             submitHandler={handleSubmit}
             validationHandler={timerValidationHandler}
             time={event.timeStart}
-            delay={0}
+            delay={delay}
             placeholder='Start'
           />
           <label className={style.inputLabel}>
@@ -128,7 +131,7 @@ export default function EventEditor() {
             submitHandler={handleSubmit}
             validationHandler={timerValidationHandler}
             time={event.timeEnd}
-            delay={0}
+            delay={delay}
             placeholder='End'
           />
           <label className={style.inputLabel}>Duration</label>
@@ -137,24 +140,33 @@ export default function EventEditor() {
             submitHandler={handleSubmit}
             validationHandler={timerValidationHandler}
             time={event.duration}
-            delay={0}
+            delay={delay}
             placeholder='Duration'
           />
         </div>
         <div className={style.timeSettings}>
           <label className={style.inputLabel}>Timer type</label>
-          <Select size='sm' variant='filled' color='black'>
+          <Select size='sm' variant='ontime'>
             <option value='option1'>Start to end</option>
             <option value='option2'>Duration</option>
             <option value='option3'>Follow previous</option>
             <option value='option3'>Start only</option>
           </Select>
           <label className={style.inputLabel}>Countdown style</label>
-          <Select size='sm' variant='filled' color='black'>
+          <Select size='sm' variant='ontime'>
             <option value='option1'>Count down</option>
             <option value='option2'>Count up</option>
             <option value='option3'>Clock</option>
           </Select>
+          <span className={style.spacer} />
+          <label className={`${style.inputLabel} ${style.publicToggle}`}>
+            <Switch
+              isChecked={event.isPublic}
+              onChange={() => togglePublic(event.isPublic)}
+              variant='ontime'
+            />
+            Event is public
+          </label>
         </div>
       </div>
       <div className={style.titles}>
@@ -175,17 +187,6 @@ export default function EventEditor() {
             <label className={style.inputLabel}>Subtitle</label>
             <TextInput field='subtitle' initialText={event.subtitle} submitHandler={handleSubmit} />
           </div>
-          <div className={style.padTop}>
-            <Button
-              leftIcon={<FiUsers />}
-              size='sm'
-              colorScheme='blue'
-              variant={event.isPublic ? 'solid' : 'ghost'}
-              onClick={() => togglePublic(event.isPublic)}
-            >
-              {event.isPublic ? 'Event is Public' : 'Make event public'}
-            </Button>
-          </div>
         </div>
         <div className={style.right}>
           <div className={style.column}>
@@ -196,28 +197,26 @@ export default function EventEditor() {
                 handleChange={(value) => handleSubmit('colour', value)}
               />
               <Button
-                leftIcon={<IoBan />}
+                rightIcon={<IoBan />}
                 onClick={() => handleSubmit('colour', '')}
-                variant='ghost'
-                colorScheme='blue'
-                borderRadius='3px'
+                variant='ontime-subtle'
                 size='sm'
               >
                 Clear colour
               </Button>
             </div>
           </div>
-          <div className={style.column}>
+          <div className={`${style.column} ${style.fullHeight}`}>
             <label className={style.inputLabel}>Note</label>
             <TextInput
               field='note'
               initialText={event.note}
               submitHandler={handleSubmit}
               isTextArea
+              isFullHeight
             />
           </div>
         </div>
-        <CopyTag label='OSC trigger' className={style.osc}>{`/ontime/gotoid/${event.id}`}</CopyTag>
       </div>
     </div>
   );
diff --git a/client/src/features/event-editor/EventEditor.module.scss b/client/src/features/event-editor/EventEditor.module.scss
index 1a692be4c..c159dcc3b 100644
--- a/client/src/features/event-editor/EventEditor.module.scss
+++ b/client/src/features/event-editor/EventEditor.module.scss
@@ -1,102 +1,104 @@
-@use '../../theme/main' as *;
+@use '../../theme/v2Styles' as *;
 
 .eventEditor {
-  padding: 16px 32px;
+  padding: 16px 32px 32px 32px;
   width: 100%;
-  overflow-y: scroll;
-  max-height: 40vh;
   gap: max(16px, 2vh);
 
   display: grid;
-  grid-template-areas: 'timeOptions titles';
+  grid-template-areas:
+          'eventInfo   eventActions'
+          'timeOptions titles';
   grid-template-columns: auto 1fr;
-  
-  .timeOptions,
-  .titles {
-    background-color: $bg-container-over;
-    border-radius: 2px;
-    padding: 8px 16px;
-  }
-
-  .timeOptions {
-    grid-area: timeOptions;
-    display: flex;
-    gap: 24px;
-  }
-
-  .timers, .timeSettings {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-  .timers label:nth-child(1),
-  .timeSettings label:nth-child(1),
-  {
-    margin-top: 4px;
-  }
 
+  .timers,
   .timeSettings {
     display: flex;
     flex-direction: column;
     gap: 8px;
   }
+}
 
-  .titles {
-    grid-area: titles;
-    display: grid;
-    grid-template-areas:
-            'left right'
-            'tag  tag';
-    grid-template-columns: 1fr 1fr;
+.eventInfo {
+  grid-area: eventInfo;
+}
 
-    .left,
-    .right {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      margin-top: 4px;
-    }
+.eventActions {
+  grid-area: eventActions;
+  margin-left: auto;
+}
 
-    .left {
-      grid-area: left;
-      padding-right: 16px;
-    }
+.timeOptions {
+  grid-area: timeOptions;
+  display: flex;
+  gap: 24px;
+}
 
-    .right {
-      padding-left: 16px;
-      grid-area: right;
-      border-left: 1px solid $bg-container-l3;
-    }
+.titles {
+  grid-area: titles;
+  display: grid;
+  grid-template-areas: 'left right';
+  grid-template-columns: 1fr 1fr;
 
-    .osc {
-      grid-area: tag;
-      justify-self: end;
-    }
-  }
-
-  .inline {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-
-  .column {
+  .left,
+  .right {
     display: flex;
     flex-direction: column;
     gap: 8px;
+    margin-top: 4px;
   }
 
-  .padTop {
-    margin-top: 8px;
+  .left {
+    grid-area: left;
+    padding: 0 16px;
+    border-left: 1px solid $border-color-ondark;
   }
 
-  .inputLabel {
-    font-size: 13px;
-    display: block;
-    color: $label-gray;
-
-    .delayLabel {
-      color: $text-delay;
-    }
+  .right {
+    padding-left: 16px;
+    grid-area: right;
+    border-left: 1px solid $border-color-ondark;
   }
 }
+
+.inputLabel {
+  font-size: 13px;
+  display: block;
+  color: $label-gray;
+
+  .delayLabel {
+    color: $ontime-delay-text;
+  }
+
+  &.publicToggle {
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-items: center;
+    gap: 8px;
+  }
+}
+
+.spacer {
+  height: 20px;
+}
+
+.inline {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.padTop {
+  margin-top: 8px;
+}
+
+.fullHeight {
+  height: 100%
+}
\ No newline at end of file
diff --git a/client/src/features/info/CollapsableInfo.tsx b/client/src/features/info/CollapsableInfo.tsx
new file mode 100644
index 000000000..c899e2028
--- /dev/null
+++ b/client/src/features/info/CollapsableInfo.tsx
@@ -0,0 +1,52 @@
+import { useState } from 'react';
+
+import CollapseBar from '../../common/components/collapseBar/CollapseBar';
+
+import style from './Info.module.scss';
+
+type TitleShape = {
+  title: string;
+  presenter: string;
+  subtitle: string;
+  note: string;
+}
+
+interface CollapsableInfoProps {
+  title: string;
+  data: TitleShape;
+}
+
+export default function CollapsableInfo(props: CollapsableInfoProps) {
+  const { title, data } = props;
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <div className={style.container}>
+      <CollapseBar
+        title={title}
+        isCollapsed={collapsed}
+        onClick={() => setCollapsed((prev) => !prev)}
+      />
+      {!collapsed && (
+        <div className={style.labels}>
+          <div>
+            <span className={style.label}>Title:</span>
+            <span className={style.content}>{data.title}</span>
+          </div>
+          <div>
+            <span className={style.label}>Presenter:</span>
+            <span className={style.content}>{data.presenter}</span>
+          </div>
+          <div>
+            <span className={style.label}>Subtitle:</span>
+            <span className={style.content}>{data.subtitle}</span>
+          </div>
+          <div>
+            <span className={style.label}>Note:</span>
+            <span className={style.content}>{data.note}</span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/client/src/features/info/Info.jsx b/client/src/features/info/Info.jsx
index 6f442baa2..4ba685ff6 100644
--- a/client/src/features/info/Info.jsx
+++ b/client/src/features/info/Info.jsx
@@ -1,8 +1,8 @@
 import { useInfoPanel } from '../../common/hooks/useSocket';
 
+import InfoTitle from './CollapsableInfo';
 import InfoLogger from './InfoLogger';
 import InfoNif from './InfoNif';
-import InfoTitle from './InfoTitle';
 
 import style from './Info.module.scss';
 
@@ -31,7 +31,7 @@ export default function Info() {
 
   return (
     <>
-      <div className={style.main}>
+      <div className={style.panelHeader}>
         <span>Ontime running on port 4001</span>
         <span>{selected}</span>
       </div>
diff --git a/client/src/features/info/Info.module.scss b/client/src/features/info/Info.module.scss
index a1c51912a..5cbeb05d2 100644
--- a/client/src/features/info/Info.module.scss
+++ b/client/src/features/info/Info.module.scss
@@ -1,77 +1,49 @@
-@use '../../theme/main' as *;
 @use '../../theme/mixins' as *;
+@use '../../theme/v2Styles' as *;
 
-@mixin container {
-  @include second-container;
-  margin-top: 1em;
-  padding: 8px;
-}
-
-.container {
-  @include container;
-}
-
-.main {
-  font-size: 0.9em;
+.panelHeader {
+  font-size: $inner-section-text-size;
+  font-family: $ontime-font-family;
   color: $label-gray;
   display: flex;
   justify-content: space-between;
 }
 
-.collapsedTitle {
-  font-size: inherit;
-
-  padding-left: 1em;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.container {
+  margin-top: $main-spacing;
 }
 
-.labelContainer {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.label,
-.emptyLabel {
-  padding: 0;
-  margin: 0;
-  font-size: 0.9em;
+.labels {
+  font-size: $inner-section-text-size;
+  display: flex;
+  flex-direction: column;
+  gap: $element-inner-spacing;
 }
 
 .label {
-  font-size: 0.9em;
-  color: $label-gray;
+  color: $section-white;
 }
 
-.label::after {
-  content: ': ';
-}
-
-.emptyLabel {
-  font-size: 0.8em;
-  color: $bg-gray-700;
-}
-
-.notes {
-  color: $notes-color;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.content {
+  color: $secondary-text-gray;
+  margin-left: $element-inner-spacing;
+  font-size: $text-body-size;
 }
 
 .interfaceList {
   display: flex;
   flex-wrap: wrap;
-  gap: 4px;
-  margin-top: 4px;
+  gap: $element-spacing;
+
+  .interface {
+    @include action-link;
+    white-space: nowrap;
+  }
+
+  .linkIcon {
+    margin-left: 8px;
+    display: inline-block;
+    transform: rotate(45deg);
+  }
 }
 
-.interface {
-  font-size: 0.8em;
-  background-color: $bg-container-l3;
-  padding: 0 8px;
-  margin: 0 2px;
-  border-radius: 2px;
-  white-space: nowrap;
-}
diff --git a/client/src/features/info/InfoExport.jsx b/client/src/features/info/InfoExport.jsx
index d276f6268..efcdfda62 100644
--- a/client/src/features/info/InfoExport.jsx
+++ b/client/src/features/info/InfoExport.jsx
@@ -1,5 +1,5 @@
 import { Box } from '@chakra-ui/react';
-import { FiArrowUpRight } from '@react-icons/all-files/fi/FiArrowUpRight';
+import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 
 import ErrorBoundary from '../../common/components/errorBoundary/ErrorBoundary';
 import { handleLinks } from '../../common/utils/linkUtils';
@@ -11,7 +11,7 @@ import style from '../editors/Editor.module.scss';
 export default function InfoExport() {
   return (
     <Box className={style.info} data-testid="panel-info">
-      <FiArrowUpRight className={style.corner} onClick={(event) => handleLinks(event, 'info')} />
+      <IoArrowUp className={style.corner} onClick={(event) => handleLinks(event, 'info')} />
       <div className={style.content}>
         <ErrorBoundary>
           <Info />
diff --git a/client/src/features/info/InfoLogger.jsx b/client/src/features/info/InfoLogger.jsx
deleted file mode 100644
index ad24cc4cf..000000000
--- a/client/src/features/info/InfoLogger.jsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import { useCallback, useContext, useEffect, useState } from 'react';
-
-import CollapseBar from '../../common/components/collapseBar/CollapseBar';
-import { LoggingContext } from '../../common/context/LoggingContext';
-
-import style from './InfoLogger.module.scss';
-
-export default function InfoLogger() {
-  const { logData, clearLog } = useContext(LoggingContext);
-  const [data, setData] = useState([]);
-  const [collapsed, setCollapsed] = useState(false);
-  // Todo: save in local storage
-  const [showClient, setShowClient] = useState(true);
-  const [showServer, setShowServer] = useState(true);
-  const [showRx, setShowRx] = useState(true);
-  const [showTx, setShowTx] = useState(true);
-  const [showPlayback, setShowPlayback] = useState(true);
-  const [showUser, setShowUser] = useState(true);
-
-  useEffect(() => {
-    if (!logData) {
-      return;
-    }
-
-    const matchers = [];
-    if (showUser) {
-      matchers.push('USER');
-    }
-    if (showClient) {
-      matchers.push('CLIENT');
-    }
-    if (showServer) {
-      matchers.push('SERVER');
-    }
-    if (showRx) {
-      matchers.push('RX');
-    }
-    if (showTx) {
-      matchers.push('TX');
-    }
-    if (showPlayback) {
-      matchers.push('PLAYBACK');
-    }
-
-    const d = logData.filter((d) => matchers.some((m) => d.origin === m));
-
-    setData(d);
-  }, [logData, showUser, showClient, showServer, showPlayback, showRx, showTx]);
-
-  const disableOthers = useCallback((toEnable) => {
-    toEnable === 'USER' ? setShowUser(true) : setShowUser(false);
-    toEnable === 'CLIENT' ? setShowClient(true) : setShowClient(false);
-    toEnable === 'SERVER' ? setShowServer(true) : setShowServer(false);
-    toEnable === 'RX' ? setShowRx(true) : setShowRx(false);
-    toEnable === 'TX' ? setShowTx(true) : setShowTx(false);
-    toEnable === 'PLAYBACK' ? setShowPlayback(true) : setShowPlayback(false);
-  }, []);
-
-  return (
-    <div className={collapsed ? style.container : style.container__expanded}>
-      <CollapseBar title='Log' isCollapsed={collapsed} onClick={() => setCollapsed((c) => !c)} />
-      {!collapsed && (
-        <>
-          <div className={style.toggleBar}>
-            <div
-              onClick={() => setShowUser((s) => !s)}
-              onAuxClick={() => disableOthers('USER')}
-              onContextMenu={(e) => e.preventDefault()}
-              className={showUser ? style.active : null}
-              role='button'
-            >
-              USER
-            </div>
-            <div
-              onClick={() => setShowClient((s) => !s)}
-              onAuxClick={() => disableOthers('CLIENT')}
-              onContextMenu={(e) => e.preventDefault()}
-              className={showClient ? style.active : null}
-              role='button'
-            >
-              CLIENT
-            </div>
-            <div
-              onClick={() => setShowServer((s) => !s)}
-              onAuxClick={() => disableOthers('SERVER')}
-              onContextMenu={(e) => e.preventDefault()}
-              className={showServer ? style.active : null}
-              role='button'
-            >
-              SERVER
-            </div>
-            <div
-              onClick={() => setShowPlayback((s) => !s)}
-              onAuxClick={() => disableOthers('PLAYBACK')}
-              onContextMenu={(e) => e.preventDefault()}
-              className={showPlayback ? style.active : null}
-              role='button'
-            >
-              Playback
-            </div>
-            <div
-              onClick={() => setShowRx((s) => !s)}
-              onAuxClick={() => disableOthers('RX')}
-              onContextMenu={(e) => e.preventDefault()}
-              className={showRx ? style.active : null}
-              role='button'
-            >
-              RX
-            </div>
-            <div
-              onClick={() => setShowTx((s) => !s)}
-              onAuxClick={() => disableOthers('TX')}
-              onContextMenu={(e) => e.preventDefault()}
-              className={showTx ? style.active : null}
-              role='button'
-            >
-              TX
-            </div>
-            <div onClick={clearLog} className={style.clear} role='button'>
-              Clear
-            </div>
-          </div>
-          <ul className={style.log}>
-            {data.map((d) => (
-              <li
-                key={d.id}
-                className={
-                  d.level === 'INFO'
-                    ? style.info
-                    : d.level === 'WARN'
-                      ? style.warn
-                      : d.level === 'ERROR'
-                        ? style.error
-                        : ''
-                }
-              >
-                <div className={style.time}>{d.time}</div>
-                <div className={style.origin}>{d.origin}</div>
-                <div className={style.msg}>{d.text}</div>
-              </li>
-            ))}
-          </ul>
-        </>
-      )}
-    </div>
-  );
-}
diff --git a/client/src/features/info/InfoLogger.module.scss b/client/src/features/info/InfoLogger.module.scss
index ce98b1b67..d1e86e4a9 100644
--- a/client/src/features/info/InfoLogger.module.scss
+++ b/client/src/features/info/InfoLogger.module.scss
@@ -1,16 +1,17 @@
-@use 'Info.module' as *;
-@use '../../theme/main' as *;
+@use '../../theme/v2Styles' as *;
 @use '../../theme/mixins' as *;
 
-.container,
-.container__expanded{
-  @include container;
-  max-height: 80%;
-}
+$info-gray: $secondary-text-gray;
+$info-hover: $section-white;
 
-.container__expanded {
-  min-height: 50%;
-  height: 100%
+.infoLoggerContainer {
+  max-height: 80%;
+  margin-top: 32px;
+
+  &.expanded {
+    min-height: 50%;
+    height: 100%
+  }
 }
 
 .log {
@@ -18,70 +19,44 @@
   overflow-y: scroll;
   font-size: 0.8em;
   user-select: text;
-  padding: 0 0.5em;
-  margin: 0 0.5em;
+}
 
-  li {
-    display: flex;
-    margin-bottom: 2px;
-
-    .time {
-      width: 4.5em
-    }
-    .origin {
-      width: 6em;
-    }
-    .msg {
-      flex: 1;
-    }
-  }
-
-  li.info {
+.logEntry {
+  display: flex;
+  margin-bottom: 2px;
+  &.INFO {
     color: $info-gray;
   }
-  li.warn {
+
+  &.WARN {
     color: $warning-orange;
   }
-  li.error {
+
+  &.ERROR {
     color: $error-red;
   }
 
-  li:hover {
-    color: $info-gray-hover;
+  &:hover {
+    color: $info-hover;
+  }
+
+  .time {
+    width: 4.5em
+  }
+
+  .origin {
+    width: 6em;
+  }
+
+  .msg {
+    flex: 1;
   }
 }
 
-.info {
-  color: $text-white;
-}
-
-.error {
-  color: red;
-}
-
-.toggleBar {
+.buttonBar {
   display: flex;
   flex-wrap: wrap;
-  gap: 4px;
-  font-size: 0.7em;
+  gap: 8px;
   justify-content: flex-start;
-  padding: 0.5em 8px;
-  font-weight: 600;
-
-  div {
-    padding: 2px 8px;
-    background: #0002;
-    border: 1px solid #fff1;
-    border-radius: 2px;
-    cursor: pointer;
-  }
-
-  div.active {
-    background: $ontime-roll;
-    color: white;
-  }
-
-  .clear {
-    border: 1px solid rgba($ontime-pink, 0.5);
-  }
+  margin-bottom: 8px;
 }
diff --git a/client/src/features/info/InfoLogger.tsx b/client/src/features/info/InfoLogger.tsx
new file mode 100644
index 000000000..b19d4f1b0
--- /dev/null
+++ b/client/src/features/info/InfoLogger.tsx
@@ -0,0 +1,148 @@
+import { useCallback, useContext, useEffect, useState } from 'react';
+import { Button } from '@chakra-ui/react';
+
+import CollapseBar from '../../common/components/collapseBar/CollapseBar';
+import { Log, LoggingContext } from '../../common/context/LoggingContext';
+
+import style from './InfoLogger.module.scss';
+
+enum LOG_FILTER {
+  USER = 'USER',
+  CLIENT = 'CLIENT',
+  SERVER = 'SERVER',
+  RX = 'RX',
+  TX = 'TX',
+  PLAYBACK = 'PLAYBACK',
+}
+
+export default function InfoLogger() {
+  const { logData, clearLog } = useContext(LoggingContext);
+  const [data, setData] = useState<Log[]>([]);
+  const [collapsed, setCollapsed] = useState(false);
+  const [showClient, setShowClient] = useState(true);
+  const [showServer, setShowServer] = useState(true);
+  const [showRx, setShowRx] = useState(true);
+  const [showTx, setShowTx] = useState(true);
+  const [showPlayback, setShowPlayback] = useState(true);
+  const [showUser, setShowUser] = useState(true);
+
+  useEffect(() => {
+    if (!logData) {
+      return;
+    }
+
+    const matchers: LOG_FILTER[] = [];
+    if (showUser) {
+      matchers.push(LOG_FILTER.USER);
+    }
+    if (showClient) {
+      matchers.push(LOG_FILTER.CLIENT);
+    }
+    if (showServer) {
+      matchers.push(LOG_FILTER.SERVER);
+    }
+    if (showRx) {
+      matchers.push(LOG_FILTER.RX);
+    }
+    if (showTx) {
+      matchers.push(LOG_FILTER.TX);
+    }
+    if (showPlayback) {
+      matchers.push(LOG_FILTER.PLAYBACK);
+    }
+
+    const filteredData = logData.filter((entry) => matchers.some((match) => entry.origin === match));
+    setData(filteredData);
+  }, [logData, showUser, showClient, showServer, showPlayback, showRx, showTx]);
+
+  const disableOthers = useCallback((toEnable: LOG_FILTER) => {
+    toEnable === LOG_FILTER.USER ? setShowUser(true) : setShowUser(false);
+    toEnable === LOG_FILTER.CLIENT ? setShowClient(true) : setShowClient(false);
+    toEnable === LOG_FILTER.SERVER ? setShowServer(true) : setShowServer(false);
+    toEnable === LOG_FILTER.RX ? setShowRx(true) : setShowRx(false);
+    toEnable === LOG_FILTER.TX ? setShowTx(true) : setShowTx(false);
+    toEnable === LOG_FILTER.PLAYBACK ? setShowPlayback(true) : setShowPlayback(false);
+  }, []);
+
+  return (
+    <div className={`${style.infoLoggerContainer} ${collapsed? '' : style.expanded}`}>
+      <CollapseBar title='Log' isCollapsed={collapsed} onClick={() => setCollapsed((prev) => !prev)} />
+      {!collapsed && (
+        <>
+          <div className={style.buttonBar}>
+            <Button
+              variant={showUser ? 'ontime-filled' : 'ontime-outlined'}
+              size='xs'
+              onClick={() => setShowUser((s) => !s)}
+              onAuxClick={() => disableOthers(LOG_FILTER.USER)}
+              onContextMenu={(e) => e.preventDefault()}
+            >
+              USER
+            </Button>
+            <Button
+              variant={showClient ? 'ontime-filled' : 'ontime-outlined'}
+              size='xs'
+              onClick={() => setShowClient((s) => !s)}
+              onAuxClick={() => disableOthers(LOG_FILTER.CLIENT)}
+              onContextMenu={(e) => e.preventDefault()}
+            >
+              CLIENT
+            </Button>
+            <Button
+              variant={showServer ? 'ontime-filled' : 'ontime-outlined'}
+              size='xs'
+              onClick={() => setShowServer((s) => !s)}
+              onAuxClick={() => disableOthers(LOG_FILTER.SERVER)}
+              onContextMenu={(e) => e.preventDefault()}
+            >
+              SERVER
+            </Button>
+            <Button
+              variant={showPlayback ? 'ontime-filled' : 'ontime-outlined'}
+              size='xs'
+              onClick={() => setShowPlayback((s) => !s)}
+              onAuxClick={() => disableOthers(LOG_FILTER.PLAYBACK)}
+              onContextMenu={(e) => e.preventDefault()}
+            >
+              PLAYBACK
+            </Button>
+            <Button
+              variant={showRx ? 'ontime-filled' : 'ontime-outlined'}
+              size='xs'
+              onClick={() => setShowRx((s) => !s)}
+              onAuxClick={() => disableOthers(LOG_FILTER.RX)}
+              onContextMenu={(e) => e.preventDefault()}
+            >
+              RX
+            </Button>
+            <Button
+              variant={showTx ? 'ontime-filled' : 'ontime-outlined'}
+              size='xs'
+              onClick={() => setShowTx((s) => !s)}
+              onAuxClick={() => disableOthers(LOG_FILTER.TX)}
+              onContextMenu={(e) => e.preventDefault()}
+            >
+              TX
+            </Button>
+            <Button
+              variant='ontime-subtle'
+              size='xs'
+              onClick={clearLog}
+            >
+              Clear
+            </Button>
+          </div>
+          <ul className={style.log}>
+            {data.map((logEntry) => (
+              <li key={logEntry.id} className={`${style.logEntry} ${style[logEntry.level]} `}>
+                <span className={style.time}>{logEntry.time}</span>
+                <span className={style.origin}>{logEntry.origin}</span>
+                <span className={style.msg}>{logEntry.text}</span>
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/client/src/features/info/InfoNif.jsx b/client/src/features/info/InfoNif.tsx
similarity index 52%
rename from client/src/features/info/InfoNif.jsx
rename to client/src/features/info/InfoNif.tsx
index d9f3df5b0..b6e4a47e1 100644
--- a/client/src/features/info/InfoNif.jsx
+++ b/client/src/features/info/InfoNif.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 
 import CollapseBar from '../../common/components/collapseBar/CollapseBar';
 import useInfo from '../../common/hooks-query/useInfo';
@@ -7,28 +8,32 @@ import { openLink } from '../../common/utils/linkUtils';
 import style from './Info.module.scss';
 
 export default function InfoNif() {
-  const { data, status } = useInfo();
+  const { data } = useInfo();
   const [collapsed, setCollapsed] = useState(false);
-  const baseURL = 'http://__IP__:4001';
+
+  const handleClick = (address: string) => {
+    const baseURL = 'http://__IP__:4001';
+    openLink(baseURL.replace('__IP__', address));
+  };
 
   return (
     <div className={style.container}>
       <CollapseBar
         title='Network Info'
         isCollapsed={collapsed}
-        onClick={() => setCollapsed((c) => !c)}
+        onClick={() => setCollapsed((prev) => !prev)}
       />
-      {!collapsed && (status === 'success') &&(
+      {!collapsed && (
         <div className={style.interfaceList}>
-          {data?.networkInterfaces.map((e) => (
-            <a
-              key={e.address}
-              href='#!'
-              onClick={() => openLink(baseURL.replace('__IP__', e.address))}
+          {data?.networkInterfaces.map((nif) => (
+            <span
+              key={nif.address}
+              onClick={() => handleClick(nif.address)}
               className={style.interface}
             >
-              {`${e.name} - ${e.address}`}
-            </a>
+              {`${nif.name} - ${nif.address}`}
+              <IoArrowUp className={style.linkIcon} />
+            </span>
           ))}
         </div>
       )}
diff --git a/client/src/features/info/InfoTitle.jsx b/client/src/features/info/InfoTitle.jsx
deleted file mode 100644
index dbee9bcbc..000000000
--- a/client/src/features/info/InfoTitle.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useState } from 'react';
-import PropTypes from 'prop-types';
-
-import CollapseBar from '../../common/components/collapseBar/CollapseBar';
-
-import style from './Info.module.scss';
-
-export default function InfoTitle(props) {
-  const { title, data } = props;
-  const [collapsed, setCollapsed] = useState(false);
-
-  const noTitl = data.title == null || data.title === '';
-  const noPres = data.presenter == null || data.presenter === '';
-  const noSubt = data.subtitle == null || data.subtitle === '';
-  const noNote = data.note == null || data.note === '';
-
-  return (
-    <div className={style.container}>
-      <CollapseBar
-        title={title}
-        isCollapsed={collapsed}
-        onClick={() => setCollapsed((c) => !c)}
-      />
-      {!collapsed && (
-        <>
-          <div className={style.labelContainer}>
-            <span className={noTitl ? style.emptyLabel : style.label}>Title</span>
-            {data.title}
-          </div>
-          <div className={style.labelContainer}>
-            <span className={noPres ? style.emptyLabel : style.label}>Presenter</span>
-            {data.presenter}
-          </div>
-          <div className={style.labelContainer}>
-            <span className={noSubt ? style.emptyLabel : style.label}>Subtitle</span>
-            {data.subtitle}
-          </div>
-          <div className={style.notes}>
-            <span className={noNote ? style.emptyLabel : style.label}>Note</span>
-            {data.note}
-          </div>
-        </>
-      )}
-    </div>
-  );
-}
-
-InfoTitle.propTypes = {
-  title: PropTypes.string,
-  data: PropTypes.object,
-  roll: PropTypes.bool,
-}
diff --git a/client/src/features/info/__tests__/Info.test.jsx b/client/src/features/info/__tests__/Info.test.jsx
deleted file mode 100644
index 72aa4dd4f..000000000
--- a/client/src/features/info/__tests__/Info.test.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { QueryClientProvider } from '@tanstack/react-query';
-import { render, screen } from '@testing-library/react';
-
-import { queryClientMock } from '../../../__mocks__/QueryClient.mock';
-import Info from '../Info';
-
-test('check static info render', async () => {
-  // need to inject the socket provider to make component
-  // render without failing
-  render(
-    <QueryClientProvider client={queryClientMock}>
-      <Info />
-    </QueryClientProvider>,
-  );
-
-  // Info titles
-  // substring match, ignore case
-  expect(screen.getByText(/running/i)).toBeInTheDocument();
-  expect(screen.getByText(/event/i)).toBeInTheDocument();
-});
diff --git a/client/src/features/menu/MenuBar.tsx b/client/src/features/menu/MenuBar.tsx
index 678f88ca1..74e6dca22 100644
--- a/client/src/features/menu/MenuBar.tsx
+++ b/client/src/features/menu/MenuBar.tsx
@@ -1,10 +1,10 @@
 import { useCallback, useEffect } from 'react';
 import { VStack } from '@chakra-ui/react';
 import { FiHelpCircle } from '@react-icons/all-files/fi/FiHelpCircle';
-import { FiMaximize } from '@react-icons/all-files/fi/FiMaximize';
 import { FiMinimize } from '@react-icons/all-files/fi/FiMinimize';
 import { FiSave } from '@react-icons/all-files/fi/FiSave';
 import { FiUpload } from '@react-icons/all-files/fi/FiUpload';
+import { IoScan } from '@react-icons/all-files/io5/IoScan';
 import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
 import { downloadRundown } from 'common/api/ontimeApi';
 
@@ -28,6 +28,12 @@ const buttonStyle = {
   fontSize: '1.5em',
   size: 'lg',
   colorScheme: 'white',
+  _hover: {
+    background: 'rgba(255, 255, 255, 0.10)' // $white-10
+  },
+  _active: {
+    background: 'rgba(255, 255, 255, 0.13)' // $white-13
+  }
 };
 
 export default function MenuBar(props: MenuBarProps) {
@@ -94,17 +100,17 @@ export default function MenuBar(props: MenuBarProps) {
       <QuitIconBtn clickHandler={() => actionHandler('shutdown')} />
       <TooltipActionBtn
         {...buttonStyle}
-        icon={<FiMaximize />}
+        icon={<IoScan />}
         clickHandler={() => actionHandler('max')}
         tooltip='Show full window'
-        aria-label=''
+        aria-label='Show full window'
       />
       <TooltipActionBtn
         {...buttonStyle}
         icon={<FiMinimize />}
         clickHandler={() => actionHandler('min')}
-        tooltip='Close to tray'
-        aria-label=''
+        tooltip='Minimise to tray'
+        aria-label='Minimise to tray'
       />
       <div className={style.gap} />
       <TooltipActionBtn
@@ -112,7 +118,7 @@ export default function MenuBar(props: MenuBarProps) {
         icon={<FiHelpCircle />}
         clickHandler={() => actionHandler('help')}
         tooltip='Help'
-        aria-label=''
+        aria-label='Help'
       />
       <TooltipActionBtn
         {...buttonStyle}
@@ -120,8 +126,7 @@ export default function MenuBar(props: MenuBarProps) {
         className={isSettingsOpen ? style.open : ''}
         clickHandler={onSettingsOpen}
         tooltip='Settings'
-        isRound
-        aria-label=''
+        aria-label='Settings'
       />
       <div className={style.gap} />
       <TooltipActionBtn
@@ -129,16 +134,15 @@ export default function MenuBar(props: MenuBarProps) {
         icon={<FiUpload />}
         className={isUploadOpen ? style.open : ''}
         clickHandler={onUploadOpen}
-        tooltip='Upload event list'
-        isRound
-        aria-label=''
+        tooltip='Upload showfile'
+        aria-label='Upload showfile'
       />
       <TooltipActionBtn
         {...buttonStyle}
         icon={<FiSave />}
         clickHandler={downloadRundown}
-        tooltip='Export event list'
-        aria-label=''
+        tooltip='Export showfile'
+        aria-label='Export showfile'
       />
     </VStack>
   );
diff --git a/client/src/features/menu/RundownMenu.tsx b/client/src/features/menu/RundownMenu.tsx
index d5bb012e0..37f1ffdfc 100644
--- a/client/src/features/menu/RundownMenu.tsx
+++ b/client/src/features/menu/RundownMenu.tsx
@@ -1,30 +1,24 @@
 import { memo, useCallback, useContext } from 'react';
 import {
-  Divider,
+  Button,
   HStack,
-  IconButton,
   Menu,
   MenuButton,
+  MenuDivider,
   MenuItem,
   MenuList,
   Switch,
-  Tooltip,
 } from '@chakra-ui/react';
-import { FiClock } from '@react-icons/all-files/fi/FiClock';
 import { FiMinusCircle } from '@react-icons/all-files/fi/FiMinusCircle';
-import { FiPlus } from '@react-icons/all-files/fi/FiPlus';
 import { FiTrash2 } from '@react-icons/all-files/fi/FiTrash2';
+import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
+import { IoTimerOutline } from '@react-icons/all-files/io5/IoTimerOutline';
 import { CursorContext } from 'common/context/CursorContext';
 
 import { useEventAction } from '../../common/hooks/useEventAction';
 
 import style from './RundownMenu.module.scss';
 
-const menuStyle = {
-  color: '#000000',
-  backgroundColor: 'rgba(255,255,255,1)',
-};
-
 const RundownMenu = () => {
   const { isCursorLocked, toggleCursorLocked } = useContext(CursorContext);
   const { addEvent, deleteAllEvents } = useEventAction();
@@ -56,33 +50,31 @@ const RundownMenu = () => {
         <Switch
           defaultChecked={isCursorLocked}
           onChange={(event) => toggleCursorLocked(event.target.checked)}
-          colorScheme='blue'
+          variant='ontime'
         />
         Lock cursor to current
       </label>
-      <Menu isLazy lazyBehavior='unmount'>
-        <Tooltip label='Add / Delete ...'>
-          <MenuButton
-            as={IconButton}
-            aria-label='Create Menu'
-            size='sm'
-            icon={<FiPlus />}
-            colorScheme='white'
-            variant='outline'
-          />
-        </Tooltip>
-        <MenuList style={menuStyle}>
-          <MenuItem icon={<FiPlus />} onClick={() => eventAction('event')}>
-            Add Event at start
+      <Menu isLazy lazyBehavior='unmount' variant='ontime-on-dark'>
+        <MenuButton
+          as={Button}
+          leftIcon={<IoAdd />}
+          size='sm'
+          variant='ontime-subtle'
+        >
+          Add event
+        </MenuButton>
+        <MenuList>
+          <MenuItem  icon={<IoAdd />} onClick={() => eventAction('event')}>
+            Event at start
           </MenuItem>
-          <MenuItem icon={<FiClock />} onClick={() => eventAction('delay')}>
-            Add Delay at start
+          <MenuItem icon={<IoTimerOutline />} onClick={() => eventAction('delay')}>
+            Delay at start
           </MenuItem>
           <MenuItem icon={<FiMinusCircle />} onClick={() => eventAction('block')}>
-            Add Block at start
+            Block at start
           </MenuItem>
-          <Divider />
-          <MenuItem icon={<FiTrash2 />} onClick={() => eventAction('delete-all')} color='red.500'>
+          <MenuDivider />
+          <MenuItem icon={<FiTrash2 />} onClick={() => eventAction('delete-all')} color='#D20300'>
             Delete All
           </MenuItem>
         </MenuList>
diff --git a/client/src/features/menu/__tests__/MenuBar.test.tsx b/client/src/features/menu/__tests__/MenuBar.test.tsx
deleted file mode 100644
index 5741e6fd7..000000000
--- a/client/src/features/menu/__tests__/MenuBar.test.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { QueryClientProvider } from '@tanstack/react-query';
-import { render, screen } from '@testing-library/react';
-import { vi } from 'vitest';
-
-import { queryClientMock } from '../../../__mocks__/QueryClient.mock';
-import MenuBar from '../MenuBar';
-
-const onSettingOpenHandler = vi.fn();
-const onSettingsCloseHandler = vi.fn();
-const onUploadOpenHandler = vi.fn();
-const isOpen = false;
-
-const renderInMock = () => {
-  render(
-    <QueryClientProvider client={queryClientMock}>
-      <MenuBar
-        isSettingsOpen={isOpen}
-        onSettingsOpen={onSettingOpenHandler}
-        onSettingsClose={onSettingsCloseHandler}
-        isUploadOpen={isOpen}
-        onUploadOpen={onUploadOpenHandler}
-      />
-    </QueryClientProvider>
-  );
-};
-
-test('check that menu bar renders correctly', () => {
-  // need to inject the react query provider
-  renderInMock();
-
-  const nButtons = screen.getAllByRole('button').length;
-  expect(nButtons).toBe(7);
-});
diff --git a/client/src/features/rundown/Rundown.jsx b/client/src/features/rundown/Rundown.jsx
index 7628f1ac5..2452bb9e6 100644
--- a/client/src/features/rundown/Rundown.jsx
+++ b/client/src/features/rundown/Rundown.jsx
@@ -1,4 +1,4 @@
-import { createRef, useCallback, useContext, useEffect } from 'react';
+import { createRef, Fragment, useCallback, useContext, useEffect } from 'react';
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import { Button } from '@chakra-ui/react';
 import {
@@ -14,8 +14,6 @@ import { duplicateEvent } from 'common/utils/eventsManager';
 import { useAtomValue } from 'jotai';
 import PropTypes from 'prop-types';
 
-import useSubscription from '../../common/hooks/useSubscription';
-
 import QuickAddBlock from './quick-add-block/QuickAddBlock';
 import RundownEntry from './RundownEntry';
 
@@ -32,8 +30,6 @@ export default function Rundown(props) {
   const { addEvent, reorderEvent } = useEventAction();
   const cursorRef = createRef();
   const showQuickEntry = useAtomValue(showQuickEntryAtom);
-  const [selectedId] = useSubscription('selected-id', null);
-  const [nextId] = useSubscription('next-id', null);
 
   const insertAtCursor = useCallback(
     (type, cursor) => {
@@ -83,20 +79,17 @@ export default function Rundown(props) {
         if (event.keyCode === 38) {
           if (cursor > 0) moveCursorUp();
         }
-        // E
-        if (event.code === "KeyE") {
+        if (event.code === 'KeyE') {
           event.preventDefault();
           if (cursor == null) return;
           insertAtCursor('event', cursor);
         }
-        // D
-        if (event.code === "KeyD") {
+        if (event.code === 'KeyD') {
           event.preventDefault();
           if (cursor == null) return;
           insertAtCursor('delay', cursor);
         }
-        // B
-        if (event.code === "KeyB") {
+        if (event.code === 'KeyB') {
           event.preventDefault();
           if (cursor == null) return;
           insertAtCursor('block', cursor);
@@ -166,7 +159,7 @@ export default function Rundown(props) {
     [reorderEvent],
   );
 
-  if (entries.length < 1) {
+  if (!entries.length) {
     return (
       <div className={style.alignCenter}>
         <Empty text='No data yet' style={{ marginTop: '7vh' }} />
@@ -209,25 +202,19 @@ export default function Rundown(props) {
                 }
                 const isLast = index === entries.length - 1;
                 return (
-                  <div
-                    key={entry.id}
-                    className={`${style.bgElement}
-                    ${entry.type === 'event' && cumulativeDelay !== 0 ? style.delayed : ''}`}
-                  >
-                    <div
-                      ref={cursor === index ? cursorRef : undefined}
-                      className={cursor === index ? style.cursor : ''}
-                    >
+                  <Fragment key={entry.id}>
+                    <div ref={cursor === index ? cursorRef : undefined}>
                       <RundownEntry
                         type={entry.type}
                         index={index}
                         eventIndex={eventIndex}
                         data={entry}
-                        selected={selectedId === entry.id}
-                        next={nextId === entry.id}
+                        selected={data.selectedEventId === entry.id}
+                        hasCursor={cursor === index}
+                        next={data.nextEventId === entry.id}
                         delay={cumulativeDelay}
                         previousEnd={previousEnd}
-                        playback={selectedId === entry.id ? data.playback : undefined}
+                        playback={data.selectedEventId === entry.id ? data.playback : undefined}
                       />
                     </div>
                     {((showQuickEntry && index === cursor) || isLast) && (
@@ -239,7 +226,7 @@ export default function Rundown(props) {
                         disableAddBlock={entry.type === 'block'}
                       />
                     )}
-                  </div>
+                  </Fragment>
                 );
               })}
               {provided.placeholder}
diff --git a/client/src/features/rundown/Rundown.module.scss b/client/src/features/rundown/Rundown.module.scss
index 410a5e754..e13d287ad 100644
--- a/client/src/features/rundown/Rundown.module.scss
+++ b/client/src/features/rundown/Rundown.module.scss
@@ -20,17 +20,6 @@
   align-self: center;
 }
 
-.cursor {
-  border-radius: 3px;
-  outline: 1px solid $action-blue;
-}
-
-.bgElement {
-  &.delayed {
-    background: rgba($block-delay-color, 0.3);
-  }
-}
-
 .alignCenter {
   text-align: center;
   flex-direction: column;
diff --git a/client/src/features/rundown/RundownEntry.tsx b/client/src/features/rundown/RundownEntry.tsx
index 7c29ea571..64c930774 100644
--- a/client/src/features/rundown/RundownEntry.tsx
+++ b/client/src/features/rundown/RundownEntry.tsx
@@ -32,6 +32,7 @@ interface RundownEntryProps {
   eventIndex: number;
   data: OntimeRundownEntry;
   selected: boolean;
+  hasCursor: boolean;
   next: boolean;
   delay: number;
   previousEnd: number;
@@ -39,7 +40,7 @@ interface RundownEntryProps {
 }
 
 export default function RundownEntry(props: RundownEntryProps) {
-  const { index, eventIndex, data, selected, next, delay, previousEnd, playback } = props;
+  const { index, eventIndex, data, selected, hasCursor, next, delay, previousEnd, playback } = props;
   const { emitError } = useContext(LoggingContext);
   const startTimeIsLastEnd = useAtomValue(startTimeIsLastEndAtom);
   const defaultPublic = useAtomValue(defaultPublicAtom);
@@ -53,7 +54,7 @@ export default function RundownEntry(props: RundownEntryProps) {
     value: unknown;
   }
   const actionHandler = useCallback(
-    (action: EventItemActions, payload: number | FieldValue) => {
+    (action: EventItemActions, payload?: number | FieldValue) => {
       switch (action) {
         case 'set-cursor': {
           moveCursorTo(payload as number);
@@ -151,6 +152,7 @@ export default function RundownEntry(props: RundownEntryProps) {
         next={next}
         skip={data.skip}
         selected={selected}
+        hasCursor={hasCursor}
         playback={playback}
         actionHandler={actionHandler}
       />
diff --git a/client/src/features/rundown/RundownExport.tsx b/client/src/features/rundown/RundownExport.tsx
index 138c5df54..c50ba4fb4 100644
--- a/client/src/features/rundown/RundownExport.tsx
+++ b/client/src/features/rundown/RundownExport.tsx
@@ -1,5 +1,5 @@
 import { Box } from '@chakra-ui/react';
-import { FiArrowUpRight } from '@react-icons/all-files/fi/FiArrowUpRight';
+import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 import ErrorBoundary from 'common/components/errorBoundary/ErrorBoundary';
 import { CursorProvider } from 'common/context/CursorContext';
 import { handleLinks } from 'common/utils/linkUtils';
@@ -12,7 +12,7 @@ export default function RundownExport() {
   return (
     <CursorProvider>
       <Box className={style.editor} data-testid='panel-rundown'>
-        <FiArrowUpRight
+        <IoArrowUp
           className={style.corner}
           onClick={(event) => handleLinks(event, 'rundown')}
         />
diff --git a/client/src/features/rundown/_blockMixins.scss b/client/src/features/rundown/_blockMixins.scss
index 658201ad9..f16e5c817 100644
--- a/client/src/features/rundown/_blockMixins.scss
+++ b/client/src/features/rundown/_blockMixins.scss
@@ -1,31 +1,33 @@
+@use '../../theme/ontimeColours' as *;
+@use '../../theme/v2Styles' as *;
+
 $block-gap: 4px;
-$element-spacing: 4px;
-$binder-width: 32px;
-$clearance: 8px;
-$block-border-radius: 3px;
+$block-element-spacing: 4px;
+$block-binder-width: 32px;
+$block-clearance: 8px;
+$block-border-radius: 8px;
+$block-text-color: $gray-50;
+$block-bg: $gray-1200;
+$block-box-shadow: rgba(0, 0, 0, 0.5) 0 0 3px 2px;
+$secondary-block-height: 40px;
+
+@mixin block-styling() {
+  box-sizing: content-box;
+  background-color: $block-bg;
+  border: 1px solid #383838;
+  box-shadow: $block-box-shadow;
+  font-family: $ontime-font-family;
+  border-radius: $block-border-radius;
+}
 
 @mixin block-spacing() {
   padding: 4px 10px 4px 2px;
   gap: 2px;
 }
 
-@mixin action-overlay() {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-content: center;
-  opacity: 0.6;
-  transition: linear 0.1s;
-}
-
-@mixin block-hover() {
-  opacity: 1;
-  transition: linear 0.1s;
-}
-
 @mixin drag-style() {
   font-size: 20px;
-  text-align: center;
+  justify-self: center;
   opacity: 0.3;
   cursor: grab;
   transition: opacity 0.3s;
diff --git a/client/src/features/rundown/block-block/BlockBlock.jsx b/client/src/features/rundown/block-block/BlockBlock.jsx
deleted file mode 100644
index e551fe28b..000000000
--- a/client/src/features/rundown/block-block/BlockBlock.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Draggable } from 'react-beautiful-dnd';
-import { HStack } from '@chakra-ui/react';
-import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
-import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
-import PropTypes from 'prop-types';
-
-import ActionButtons from '../../../common/components/buttons/ActionButtons';
-import TooltipLoadingActionBtn from '../../../common/components/buttons/TooltipLoadingActionBtn';
-
-import style from './BlockBlock.module.scss';
-
-export default function BlockBlock(props) {
-  const { index, data, actionHandler } = props;
-
-  return (
-    <Draggable key={data.id} draggableId={data.id} index={index}>
-      {(provided) => (
-        <div className={style.block} {...provided.draggableProps} ref={provided.innerRef}>
-          <span className={style.drag} {...provided.dragHandleProps}>
-            <IoReorderTwo />
-          </span>
-          <HStack spacing='4px' className={style.actionOverlay}>
-            <TooltipLoadingActionBtn
-              clickHandler={() => actionHandler('delete')}
-              icon={<IoRemove />}
-              tooltip='Delete'
-              variant='outline'
-              colorScheme='white'
-              size='sm'
-              aria-label='Delete'
-            />
-            <ActionButtons showAdd showDelay actionHandler={actionHandler} />
-          </HStack>
-        </div>
-      )}
-    </Draggable>
-  );
-}
-
-BlockBlock.propTypes = {
-  index: PropTypes.number.isRequired,
-  data: PropTypes.object.isRequired,
-  actionHandler: PropTypes.func.isRequired,
-};
diff --git a/client/src/features/rundown/block-block/BlockBlock.module.scss b/client/src/features/rundown/block-block/BlockBlock.module.scss
index 44d25be79..661924724 100644
--- a/client/src/features/rundown/block-block/BlockBlock.module.scss
+++ b/client/src/features/rundown/block-block/BlockBlock.module.scss
@@ -1,39 +1,20 @@
-@use '../../../theme/main' as *;
 @use '../blockMixins' as *;
 
-/* ============= COMMON ============= */
-
 .block {
   @include block-spacing;
+  @include block-styling;
 
   box-sizing: content-box;
   display: grid;
-  grid-template-columns: 40px 1fr;
+  grid-template-columns: 32px 1fr;
   align-items: center;
-  height: 40px;
-  border-radius: 2px;
-  border: $border-l3;
-  border-bottom: 4px solid $block-block-color;
-  background-color: $bg-container-l2;
+  height: $secondary-block-height;
 }
 
-/* ================ DRAG ================ */
 .drag {
   @include drag-style;
-  color: $block-block-color;
 }
 
-/* ============== ACTION ================ */
 .actionOverlay {
-  @include action-overlay;
-  justify-self: end;
-}
-
-.block:hover > .actionOverlay {
-  @include block-hover;
-}
-
-/* NA */
-.actionOverlay:hover {
-  opacity: 1;
+  justify-self: flex-end;
 }
diff --git a/client/src/features/rundown/block-block/BlockBlock.tsx b/client/src/features/rundown/block-block/BlockBlock.tsx
new file mode 100644
index 000000000..9cdeb3818
--- /dev/null
+++ b/client/src/features/rundown/block-block/BlockBlock.tsx
@@ -0,0 +1,37 @@
+import { Draggable } from 'react-beautiful-dnd';
+import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
+
+import { OntimeBlock, OntimeEvent } from '../../../common/models/EventTypes';
+import BlockActionMenu from '../event-block/composite/BlockActionMenu';
+import { EventItemActions } from '../RundownEntry';
+
+import style from './BlockBlock.module.scss';
+
+interface BlockBlockProps {
+  index: number;
+  data: OntimeBlock;
+  actionHandler: (action: EventItemActions, payload?: number | { field: keyof OntimeEvent, value: unknown }) => void;
+}
+
+export default function BlockBlock(props: BlockBlockProps) {
+  const { index, data, actionHandler } = props;
+
+  return (
+    <Draggable key={data.id} draggableId={data.id} index={index}>
+      {(provided) => (
+        <div className={style.block} {...provided.draggableProps} ref={provided.innerRef}>
+          <span className={style.drag} {...provided.dragHandleProps}>
+            <IoReorderTwo />
+          </span>
+          <BlockActionMenu
+            className={style.actionOverlay}
+            showAdd
+            showDelay
+            enableDelete
+            actionHandler={actionHandler}
+          />
+        </div>
+      )}
+    </Draggable>
+  );
+}
diff --git a/client/src/features/rundown/delay-block/DelayBlock.module.scss b/client/src/features/rundown/delay-block/DelayBlock.module.scss
index cca87c0a0..70dafac31 100644
--- a/client/src/features/rundown/delay-block/DelayBlock.module.scss
+++ b/client/src/features/rundown/delay-block/DelayBlock.module.scss
@@ -1,49 +1,18 @@
-@use '../../../theme/main' as *;
 @use '../blockMixins' as *;
 
-/* ============= COMMON ============= */
-
 .delay {
   @include block-spacing;
+  @include block-styling;
 
-  box-sizing: content-box;
   display: grid;
   grid-template-columns: 32px 1fr auto;
   grid-template-areas: 'drag inpt btns';
   align-items: center;
-  height: 40px;
-  border-radius: 2px;
-  border: $border-l3;
-  border-top: 4px solid $block-delay-color;
-  background-color: $bg-container-l2;
-
+  height: $secondary-block-height;
+  gap: 8px;
 }
 
-/* ================ DRAG ================ */
-
 .drag {
-  grid-area: drag;
   @include drag-style;
-  color: $block-delay-color;
-}
-
-/* =============== INPUT ================ */
-
-.input {
-  grid-area: inpt;
-}
-
-/* ============== ACTION ================ */
-
-.actionOverlay {
-  @include action-overlay;
-}
-
-.delay:hover > .actionOverlay {
-  @include block-hover;
-}
-
-/* NA */
-.actionOverlay:hover {
-  opacity: 1;
+  grid-area: drag;
 }
diff --git a/client/src/features/rundown/delay-block/DelayBlock.jsx b/client/src/features/rundown/delay-block/DelayBlock.tsx
similarity index 51%
rename from client/src/features/rundown/delay-block/DelayBlock.jsx
rename to client/src/features/rundown/delay-block/DelayBlock.tsx
index 992c3ab2d..92de955a2 100644
--- a/client/src/features/rundown/delay-block/DelayBlock.jsx
+++ b/client/src/features/rundown/delay-block/DelayBlock.tsx
@@ -1,32 +1,34 @@
 import { useCallback } from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import { Button, HStack } from '@chakra-ui/react';
-import { FiCheck } from '@react-icons/all-files/fi/FiCheck';
-import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
+import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';
 import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
-import ActionButtons from 'common/components/buttons/ActionButtons';
-import TooltipLoadingActionBtn from 'common/components/buttons/TooltipLoadingActionBtn';
-import DelayInput from 'common/components/input/DelayInput';
+import DelayInput from 'common/components/input/delay-input/DelayInput';
 import { useEventAction } from 'common/hooks/useEventAction';
 import { millisToMinutes } from 'common/utils/dateConfig';
-import PropTypes from 'prop-types';
+
+import { OntimeDelay, OntimeEvent } from '../../../common/models/EventTypes';
+import BlockActionMenu from '../event-block/composite/BlockActionMenu';
+import { EventItemActions } from '../RundownEntry';
 
 import style from './DelayBlock.module.scss';
 
-export default function DelayBlock(props) {
+interface DelayBlockProps {
+  data: OntimeDelay,
+  index: number;
+  actionHandler: (action: EventItemActions, payload?: number | { field: keyof OntimeEvent, value: unknown }) => void;
+}
+
+export default function DelayBlock(props: DelayBlockProps) {
   const { data, index, actionHandler } = props;
-  const { applyDelay, deleteEvent, updateEvent } = useEventAction();
+  const { applyDelay, updateEvent } = useEventAction();
 
   const applyDelayHandler = useCallback(() => {
     applyDelay(data.id);
   }, [data.id, applyDelay]);
 
-  const deleteHandler = useCallback(() => {
-    deleteEvent(data.id);
-  }, [data.id, deleteEvent]);
-
   const delaySubmitHandler = useCallback(
-    (value) => {
+    (value: number) => {
       const newEvent = {
         id: data.id,
         duration: value * 60000,
@@ -34,7 +36,7 @@ export default function DelayBlock(props) {
 
       updateEvent(newEvent);
     },
-    [data.id, updateEvent]
+    [data.id, updateEvent],
   );
 
   const delayValue = data.duration != null ? millisToMinutes(data.duration) : undefined;
@@ -47,39 +49,22 @@ export default function DelayBlock(props) {
             <IoReorderTwo />
           </span>
           <DelayInput
-            className={style.input}
             value={delayValue}
             submitHandler={delaySubmitHandler}
           />
-          <HStack spacing='4px' className={style.actionOverlay}>
+          <HStack spacing='8px' className={style.actionOverlay}>
             <Button
               onClick={applyDelayHandler}
               size='sm'
-              color="#F57C13"
-              borderColor="#F57C13"
-              leftIcon={<FiCheck />}
-              variant='outline'
+              leftIcon={<IoCheckmark />}
+              variant='ontime-subtle-white'
             >
               Apply delay
             </Button>
-            <TooltipLoadingActionBtn
-              clickHandler={deleteHandler}
-              icon={<IoRemove />}
-              tooltip='Delete'
-              variant='outline'
-              colorScheme='white'
-              size='sm'
-            />
-            <ActionButtons showAdd actionHandler={actionHandler} />
+            <BlockActionMenu showAdd enableDelete actionHandler={actionHandler} />
           </HStack>
         </div>
       )}
     </Draggable>
   );
 }
-
-DelayBlock.propTypes = {
-  data: PropTypes.object.isRequired,
-  index: PropTypes.number.isRequired,
-  actionHandler: PropTypes.func.isRequired,
-};
diff --git a/client/src/features/rundown/event-block/EventBlock.module.scss b/client/src/features/rundown/event-block/EventBlock.module.scss
index 4aa9bb8e2..a83fb0880 100644
--- a/client/src/features/rundown/event-block/EventBlock.module.scss
+++ b/client/src/features/rundown/event-block/EventBlock.module.scss
@@ -1,6 +1,130 @@
-@use '../../../theme/main' as *;
+@use '../../../theme/v2Styles' as *;
 @use '../blockMixins' as *;
 
+.eventBlock {
+  @include block-styling;
+
+  display: grid;
+  grid-template-areas:
+          "binder ...        ...   ..."
+          "binder pb-actions times actions"
+          "binder pb-actions title title"
+          "binder pb-actions estatus estatus"
+          "binder ...        ...     ...";
+
+  grid-template-columns: $block-binder-width auto 1fr auto;
+  grid-template-rows: 4px 36px 36px 36px 4px;
+  align-items: center;
+  margin: 4px 2px;
+  padding-right: $block-clearance;
+  gap: 2px;
+
+  &.selected {
+    background-color: #101010;
+  }
+
+  &.hasCursor {
+    outline: 1px solid #779BE7;
+  }
+
+  &.skip {
+    border: 1px solid rgba(white, 0.03);
+    box-shadow: none;
+
+    .delayNote,
+    .eventTitle,
+    .eventNote,
+    .binder,
+    .eventTimers,
+    .eventStatus {
+      opacity: $opacity-disabled;
+    }
+  }
+}
+
+.binder {
+  grid-area: binder;
+  height: 100%;
+  display: grid;
+  place-content: center;
+  position: relative;
+  cursor: pointer;
+
+  border-radius: $block-border-radius 0 0 $block-border-radius;
+
+  background-color: #303030; // to override inline
+  color: $section-white;
+  font-size: 17px;
+
+  .drag {
+    @include drag-style;
+    position: absolute;
+    margin-top: 4px;
+  }
+}
+
+.playbackActions {
+  grid-area: pb-actions;
+  display: flex;
+  flex-direction: column;
+  margin: 0 8px;
+  gap: 6px;
+}
+
+.eventTimers {
+  grid-area: times;
+  display: flex;
+  align-items: center;
+  gap: $block-clearance;
+  height: 100%;
+
+  .delayNote {
+    font-size: 12px;
+    line-height: 14px;
+    color: #E69056;
+  }
+}
+
+.eventTitle {
+  grid-area: title;
+  display: block;
+  font-size: 18px;
+
+  &.noTitle {
+    .preview {
+      opacity: $opacity-disabled;
+    }
+  }
+}
+
+.eventActions {
+  grid-area: actions;
+  display: flex;
+  gap: $block-clearance;
+  justify-content: flex-end;
+}
+
+
+.eventOptions {
+  margin: $element-spacing 16px $element-spacing 0;
+}
+
+.progressBg {
+  grid-area: progb;
+  border-radius: 2px;
+  background-color: #282828;
+  opacity: 1;
+  height: 100%;
+}
+
+.progressBg.hidden {
+  opacity: 0;
+}
+
+.flip {
+  transform: rotateY(180deg);
+}
+
 .statusElements {
   grid-area: estatus;
   display: grid;
@@ -9,189 +133,40 @@
           "progb progb";
   gap: 2px;
   grid-template-rows: auto 4px;
-
-  .eventNote {
-    grid-area: notes;
-    display: block;
-    font-size: 15px;
-    color: $notes-color;
-    line-height: 15px;
-  }
-
-  .eventStatus {
-    grid-area: status;
-
-    display: flex;
-    justify-content: flex-end;
-    gap: $element-spacing;
-
-    .statusIcon {
-      width: 24px;
-      height: 24px;
-      border-radius: 12px;
-      padding: 4px;
-      color: $text-gray-disabled;
-    }
-
-    .statusIcon.statusNext {
-      border: 1px solid transparent;
-
-      &.enabled {
-        color: $text-white;
-        background-color: $ontime-accent;
-      }
-    }
-
-    .statusIcon.statusDelay {
-      &.enabled {
-        color: $text-white;
-        background-color: $ontime-delay;
-      }
-    }
-
-    .statusIcon.statusPublic {
-      &.enabled {
-        color: $text-white;
-        background-color: $ontime-roll;
-      }
-    }
-  }
-}
-
-.eventBlock {
-  // layout
-  display: grid;
-  grid-template-areas:
-          "binder pb-actions times actions"
-          "binder pb-actions title title"
-          "binder pb-actions estatus estatus";
-  grid-template-columns: $binder-width auto 1fr auto;
-  grid-template-rows: 36px 36px 36px;
   align-items: center;
-  margin: 4px 2px;
-  padding-right: $clearance;
-
-  // style - general
-  border-radius: $block-border-radius;
-  gap: 2px;
-
-  // style - colour
-  background-color: $bg-container-l2;
-  border: $border-l3;
-
-    // variant
-  &.selected {
-    background-color: $bg-container-l3;
-  }
-
-  &.skip {
-    background-color: $bg-gray-1000;
-    border: 1px solid transparent;
-
-    .eventTimers > .delayNote,
-    .eventTitle,
-    .eventNote {
-      color: $text-gray-disabled;
-    }
-
-    .binder,
-    .eventTimers,
-    .eventStatus {
-      opacity: $opacity-disabled;
-    }
-  }
-
-  .binder {
-    // layout
-    grid-area: binder;
-    height: 100%;
-    display: grid;
-    place-content: center;
-    position: relative;
-    cursor: pointer;
-
-    // style - general
-    border-radius: 3px 0 0 3px;
-    border-right: 1px solid $bg-gray-900;
-
-    // style - colour
-    background-color: $bg-container-l3; // override inline
-    color: $text-white;
-
-    .drag {
-      @include drag-style;
-      position: absolute;
-    }
-  }
-
-  .playbackActions {
-    // layout
-    grid-area: pb-actions;
-    display: flex;
-    flex-direction: column;
-    margin: $element-spacing $clearance $element-spacing $element-spacing;
-    // style - general
-    gap: 6px;
-  }
-
-  .eventTimers {
-    grid-area: times;
-    display: flex;
-    align-items: center;
-    gap: $clearance;
-    height: 100%;
-
-    .delayNote {
-      font-size: 11px;
-      color: $text-delay;
-    }
-  }
-
-  .eventTitle {
-    grid-area: title;
-    display: block;
-    font-size: 18px;
-
-    .eventTitle__preview {
-      width: 100%;
-    }
-
-    &.noTitle {
-      span {
-        opacity: $opacity-disabled;
-      }
-    }
-
-    input {
-      border-radius: 2px;
-      border: 1px;
-    }
-  }
-
-  .eventActions {
-    grid-area: actions;
-
-    display: flex;
-    gap: $element-spacing;
-    justify-content: flex-end;
-  }
-
-
-  .eventOptions {
-    margin: $element-spacing 16px $element-spacing 0;
-  }
-}
-
-.progressBg {
-  grid-area: progb;
-  border-radius: 1px;
-  background-color: $bg-container-l1;
-  opacity: 1;
-
-  // layout
   height: 100%;
+  padding: 2px 0;
 }
 
-.progressBg.hidden {
-  opacity: 0;
-}
\ No newline at end of file
+.eventNote {
+  grid-area: notes;
+  display: block;
+  font-size: 13px;
+  color: $block-text-color;
+  line-height: 13px;
+}
+
+.eventStatus {
+  grid-area: status;
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+
+  .statusIcon {
+    width: 16px;
+    height: 16px;
+    color: #404040;
+  }
+
+  .statusNext.enabled {
+    color: $playback-start;
+  }
+
+  .statusDelay.enabled {
+    color: $ontime-delay;
+  }
+
+  .statusPublic.enabled {
+    color: $action-blue;
+  }
+}
diff --git a/client/src/features/rundown/event-block/EventBlock.tsx b/client/src/features/rundown/event-block/EventBlock.tsx
index 26b05e0a8..e37736cff 100644
--- a/client/src/features/rundown/event-block/EventBlock.tsx
+++ b/client/src/features/rundown/event-block/EventBlock.tsx
@@ -4,17 +4,16 @@ import { Editable, EditableInput, EditablePreview, Tooltip } from '@chakra-ui/re
 import { FiUsers } from '@react-icons/all-files/fi/FiUsers';
 import { IoOptions } from '@react-icons/all-files/io5/IoOptions';
 import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
-import { IoPlayBackOutline } from '@react-icons/all-files/io5/IoPlayBackOutline';
 import { IoPlayOutline } from '@react-icons/all-files/io5/IoPlayOutline';
+import { IoPlaySkipForward } from '@react-icons/all-files/io5/IoPlaySkipForward';
 import { IoReload } from '@react-icons/all-files/io5/IoReload';
 import { IoRemoveCircle } from '@react-icons/all-files/io5/IoRemoveCircle';
 import { IoRemoveCircleOutline } from '@react-icons/all-files/io5/IoRemoveCircleOutline';
 import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
-import { IoReturnDownForward } from '@react-icons/all-files/io5/IoReturnDownForward';
 import { IoTimerOutline } from '@react-icons/all-files/io5/IoTimerOutline';
 import { editorEventId } from 'common/atoms/LocalEventSettings';
 import TooltipActionBtn from 'common/components/buttons/TooltipActionBtn';
-import { getAccessibleColour } from 'common/utils/styleUtils';
+import { cx, getAccessibleColour } from 'common/utils/styleUtils';
 import { useAtom } from 'jotai';
 
 import { useEventAction } from '../../../common/hooks/useEventAction';
@@ -23,7 +22,7 @@ import { Playstate } from '../../../common/models/OntimeTypes';
 import { tooltipDelayMid } from '../../../ontimeConfig';
 import { EventItemActions } from '../RundownEntry';
 
-import EventBlockActionMenu from './composite/EventBlockActionMenu';
+import BlockActionMenu from './composite/BlockActionMenu';
 import EventBlockProgressBar from './composite/EventBlockProgressBar';
 import EventBlockTimers from './composite/EventBlockTimers';
 
@@ -31,9 +30,6 @@ import style from './EventBlock.module.scss';
 
 const blockBtnStyle = {
   size: 'sm',
-  colorScheme: 'white',
-  variant: 'ghost',
-  fontSize: '20px',
 };
 
 const tooltipProps = {
@@ -56,8 +52,9 @@ interface EventBlockProps {
   next: boolean;
   skip: boolean;
   selected: boolean;
+  hasCursor: boolean;
   playback?: Playstate;
-  actionHandler: (action: EventItemActions, payload: any) => void;
+  actionHandler: (action: EventItemActions, payload?: any) => void;
 }
 
 export default function EventBlock(props: EventBlockProps) {
@@ -77,6 +74,7 @@ export default function EventBlock(props: EventBlockProps) {
     next,
     skip = false,
     selected,
+    hasCursor,
     playback,
     actionHandler,
   } = props;
@@ -89,6 +87,7 @@ export default function EventBlock(props: EventBlockProps) {
   const hasDelay = delay !== 0 && delay !== null;
 
   // Todo: could I re-render the item without causing a state change here?
+  // ?? use refs instead?
   useEffect(() => {
     setBlockTitle(title);
   }, [title]);
@@ -115,13 +114,18 @@ export default function EventBlock(props: EventBlockProps) {
     playBtnStyles._hover = {};
   }
 
+  const blockClasses = cx([
+    style.eventBlock,
+    skip ? style.skip : null,
+    selected ? style.selected : null,
+    hasCursor ? style.hasCursor : null,
+  ]);
+
   return (
     <Draggable key={eventId} draggableId={eventId} index={index}>
       {(provided) => (
         <div
-          className={`${style.eventBlock} ${skip ? style.skip : ''} ${
-            selected ? style.selected : ''
-          }`}
+          className={blockClasses}
           {...provided.draggableProps}
           ref={provided.innerRef}
         >
@@ -138,36 +142,38 @@ export default function EventBlock(props: EventBlockProps) {
           </div>
           <div className={style.playbackActions}>
             <TooltipActionBtn
+              variant='ontime-subtle-white'
               aria-label='Skip event'
               tooltip='Skip event'
               openDelay={tooltipDelayMid}
               icon={skip ? <IoRemoveCircle /> : <IoRemoveCircleOutline />}
               {...blockBtnStyle}
-              variant={skip ? 'solid' : 'ghost'}
               clickHandler={() => actionHandler('update', { field: 'skip', value: !skip })}
               tabIndex={-1}
               disabled={selected}
             />
             <TooltipActionBtn
+              variant='ontime-subtle-white'
               aria-label='Load event'
               tooltip='Load event'
               openDelay={tooltipDelayMid}
-              icon={selected ? <IoPlayBackOutline /> : <IoReload />}
+              icon={<IoReload className={style.flip} />}
               disabled={skip}
               {...blockBtnStyle}
               clickHandler={() => setEventPlayback.loadEvent(eventId)}
               tabIndex={-1}
             />
             <TooltipActionBtn
+              variant='ontime-subtle-white'
               aria-label='Start event'
               tooltip='Start event'
               openDelay={tooltipDelayMid}
               icon={eventIsPlaying ? <IoPlay /> : <IoPlayOutline />}
               disabled={skip}
               {...blockBtnStyle}
-              variant={eventIsPlaying ? 'solid' : 'ghost'}
               clickHandler={() => setEventPlayback.startEvent(eventId)}
               backgroundColor={eventIsPlaying ? '#58A151' : undefined}
+              _hover={{backgroundColor: eventIsPlaying ? '#58A151' : undefined}}
               tabIndex={-1}
             />
           </div>
@@ -186,7 +192,7 @@ export default function EventBlock(props: EventBlockProps) {
             onChange={(value) => setBlockTitle(value)}
             onSubmit={(value) => handleTitle(value)}
           >
-            <EditablePreview className={style.eventTitle__preview} />
+            <EditablePreview className={style.preview} />
             <EditableInput />
           </Editable>
           <div className={style.statusElements}>
@@ -195,54 +201,53 @@ export default function EventBlock(props: EventBlockProps) {
               <EventBlockProgressBar playback={playback} />
             </div>
             <div className={style.eventStatus}>
-              <Tooltip label='Next event' isDisabled={!next} {...tooltipProps}>
-              <span
-                className={`${style.statusIcon} ${style.statusNext} ${next ? style.enabled : ''}`}
+              <Tooltip
+                label='Next event'
+                isDisabled={!next}
+                shouldWrapChildren {...tooltipProps}
               >
-                <IoReturnDownForward />
-              </span>
+                <IoPlaySkipForward
+                  className={`${style.statusIcon} ${style.statusNext} ${next ? style.enabled : ''}`} />
               </Tooltip>
-              <Tooltip label='Event has delay' isDisabled={!hasDelay} {...tooltipProps}>
-              <span
-                className={`${style.statusIcon} ${style.statusDelay} ${
-                  hasDelay ? style.enabled : ''
-                }`}
+              <Tooltip
+                label='Event has delay'
+                isDisabled={!hasDelay}
+                shouldWrapChildren {...tooltipProps}
               >
-                <IoTimerOutline />
-              </span>
+                <IoTimerOutline className={`${style.statusIcon} ${style.statusDelay} ${
+                  hasDelay ? style.enabled : ''
+                }`} />
               </Tooltip>
               <Tooltip
                 label={`${isPublic ? 'Event is public' : 'Event is private'}`}
                 {...tooltipProps}
+                shouldWrapChildren
               >
-              <span
-                className={`${style.statusIcon} ${style.statusPublic} ${
+                <FiUsers className={`${style.statusIcon} ${style.statusPublic} ${
                   isPublic ? style.enabled : ''
-                }`}
-              >
-                <FiUsers />
-              </span>
+                }`} />
               </Tooltip>
             </div>
           </div>
           <div className={style.eventActions}>
             <TooltipActionBtn
               {...blockBtnStyle}
+              variant='ontime-subtle-white'
               size='sm'
               icon={<IoOptions />}
               clickHandler={() => setOpenId((prev) => prev === eventId ? null : eventId)}
               tooltip='Event options'
               aria-label='Event options'
               tabIndex={-1}
-              backgroundColor={openId === eventId ? '#ebedf0' : 'transparent'}
-              color={openId === eventId ? '#333' : '#ebedf0'}
-              _hover={{ bg: '#ebedf0', color: '#333' }}
+              backgroundColor={openId === eventId ? '#2B5ABC' : undefined}
+              color={openId === eventId ? 'white' : '#f6f6f6'}
             />
-            <EventBlockActionMenu
+            <BlockActionMenu
               showAdd
               showDelay
               showBlock
               showClone
+              enableDelete
               actionHandler={actionHandler}
             />
           </div>
diff --git a/client/src/features/rundown/event-block/composite/BlockActionMenu.tsx b/client/src/features/rundown/event-block/composite/BlockActionMenu.tsx
new file mode 100644
index 000000000..52cf2b6c1
--- /dev/null
+++ b/client/src/features/rundown/event-block/composite/BlockActionMenu.tsx
@@ -0,0 +1,84 @@
+import {
+  IconButton,
+  Menu,
+  MenuButton,
+  MenuDivider,
+  MenuItem,
+  MenuList,
+  Tooltip,
+} from '@chakra-ui/react';
+import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
+import { IoDuplicateOutline } from '@react-icons/all-files/io5/IoDuplicateOutline';
+import { IoRemoveCircleOutline } from '@react-icons/all-files/io5/IoRemoveCircleOutline';
+import { IoTimerOutline } from '@react-icons/all-files/io5/IoTimerOutline';
+import { IoTrashBinSharp } from '@react-icons/all-files/io5/IoTrashBinSharp';
+
+import { tooltipDelayMid } from '../../../../ontimeConfig';
+import { EventItemActions } from '../../RundownEntry';
+
+interface BlockActionMenuProps {
+  showAdd?: boolean;
+  showDelay?: boolean;
+  showBlock?: boolean;
+  enableDelete?: boolean;
+  showClone?: boolean;
+  actionHandler: (action: EventItemActions, payload?: any) => void;
+  className?: string;
+}
+export default function BlockActionMenu(props: BlockActionMenuProps) {
+  const { showAdd, showDelay, showBlock, enableDelete, showClone, actionHandler, className } = props;
+
+  return (
+    <Menu isLazy lazyBehavior='unmount' variant='ontime-on-dark'>
+      <Tooltip label='Add ...' openDelay={tooltipDelayMid}>
+        <MenuButton
+          as={IconButton}
+          aria-label='Event options'
+          icon={<IoAdd />}
+          tabIndex={-1}
+          variant='ontime-subtle'
+          color='#f6f6f6'
+          size='sm'
+          className={className}
+        />
+      </Tooltip>
+      <MenuList>
+        <MenuItem icon={<IoAdd />} onClick={() => actionHandler('event')} isDisabled={!showAdd}>
+          Add Event after
+        </MenuItem>
+        <MenuItem
+          icon={<IoTimerOutline />}
+          onClick={() => actionHandler('delay')}
+          isDisabled={!showDelay}
+        >
+          Add Delay after
+        </MenuItem>
+        <MenuItem
+          icon={<IoRemoveCircleOutline />}
+          onClick={() => actionHandler('block')}
+          isDisabled={!showBlock}
+        >
+          Add Block after
+        </MenuItem>
+        {showClone && (
+          <MenuItem
+            icon={<IoDuplicateOutline />}
+            onClick={() => actionHandler('clone')}
+            isDisabled={!showBlock}
+          >
+            Clone event
+          </MenuItem>
+        )}
+        <MenuDivider />
+        <MenuItem
+          icon={<IoTrashBinSharp />}
+          onClick={() => actionHandler('delete')}
+          isDisabled={!enableDelete}
+          color='#D20300'
+        >
+          Delete event
+        </MenuItem>
+      </MenuList>
+    </Menu>
+  );
+}
diff --git a/client/src/features/rundown/event-block/composite/EventBlockActionMenu.jsx b/client/src/features/rundown/event-block/composite/EventBlockActionMenu.jsx
deleted file mode 100644
index b1c10a265..000000000
--- a/client/src/features/rundown/event-block/composite/EventBlockActionMenu.jsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import {
-  Divider,
-  IconButton,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-  Tooltip,
-} from '@chakra-ui/react';
-import { FiMinusCircle } from '@react-icons/all-files/fi/FiMinusCircle';
-import { FiPlus } from '@react-icons/all-files/fi/FiPlus';
-import { FiTrash2 } from '@react-icons/all-files/fi/FiTrash2';
-import { IoDuplicateOutline } from '@react-icons/all-files/io5/IoDuplicateOutline';
-import { IoTimerOutline } from '@react-icons/all-files/io5/IoTimerOutline';
-import PropTypes from 'prop-types';
-
-import { tooltipDelayMid } from '../../../../ontimeConfig';
-
-
-export default function EventBlockActionMenu(props) {
-  const { showAdd, showDelay, showBlock, showClone, actionHandler } = props;
-
-  const menuStyle = {
-    color: '#000000',
-    backgroundColor: 'rgba(255,255,255,1)',
-  };
-
-  const blockBtnStyle = {
-    size: 'sm',
-    variant: 'outline',
-    colorScheme: 'whiteAlpha',
-  };
-
-  return (
-    <Menu isLazy lazyBehavior='unmount'>
-      <Tooltip label='Add ...' delay={tooltipDelayMid}>
-        <MenuButton as={IconButton} aria-label='Options' icon={<FiPlus />}
-                    tabIndex={-1} {...blockBtnStyle} />
-      </Tooltip>
-      <MenuList style={menuStyle}>
-        <MenuItem icon={<FiPlus />} onClick={() => actionHandler('event')} isDisabled={!showAdd}>
-          Add Event after
-        </MenuItem>
-        <MenuItem
-          icon={<IoTimerOutline />}
-          onClick={() => actionHandler('delay')}
-          isDisabled={!showDelay}
-        >
-          Add Delay after
-        </MenuItem>
-        <MenuItem
-          icon={<FiMinusCircle />}
-          onClick={() => actionHandler('block')}
-          isDisabled={!showBlock}
-        >
-          Add Block after
-        </MenuItem>
-        {showClone && (
-          <MenuItem
-            icon={<IoDuplicateOutline />}
-            onClick={() => actionHandler('clone')}
-            isDisabled={!showBlock}
-          >
-            Clone event
-          </MenuItem>
-        )}
-        <Divider />
-        <MenuItem
-          icon={<FiTrash2 />}
-          onClick={() => actionHandler('delete')}
-          isDisabled={!showBlock}
-          color='red.500'
-        >
-          Delete event
-        </MenuItem>
-      </MenuList>
-    </Menu>
-  );
-}
-
-EventBlockActionMenu.propTypes = {
-  showAdd: PropTypes.bool,
-  showDelay: PropTypes.bool,
-  showBlock: PropTypes.bool,
-  showClone: PropTypes.bool,
-  actionHandler: PropTypes.func,
-};
diff --git a/client/src/features/rundown/event-block/composite/EventBlockTimers.jsx b/client/src/features/rundown/event-block/composite/EventBlockTimers.jsx
index 5f2ff705f..bd5bbaca3 100644
--- a/client/src/features/rundown/event-block/composite/EventBlockTimers.jsx
+++ b/client/src/features/rundown/event-block/composite/EventBlockTimers.jsx
@@ -1,5 +1,5 @@
 import { useCallback, useContext } from 'react';
-import TimeInput from 'common/components/input/TimeInput';
+import TimeInput from 'common/components/input/time-input/TimeInput';
 import { LoggingContext } from 'common/context/LoggingContext';
 import { millisToMinutes } from 'common/utils/dateConfig';
 import { stringFromMillis } from 'common/utils/time';
diff --git a/client/src/features/rundown/quick-add-block/QuickAddBlock.module.scss b/client/src/features/rundown/quick-add-block/QuickAddBlock.module.scss
index a40c63dc1..e6d3ceb03 100644
--- a/client/src/features/rundown/quick-add-block/QuickAddBlock.module.scss
+++ b/client/src/features/rundown/quick-add-block/QuickAddBlock.module.scss
@@ -1,85 +1,45 @@
 @use '../../../theme/main' as *;
 
 .quickAdd {
-  background-color: $bg-container-l2;
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto;
   align-items: center;
-  justify-content: center;
-  gap: 5%;
-  margin: 4px 2px 2px;
+  margin: 4px 2px;
   font-size: 12px;
+}
 
-  .createEvent,
-  .createDelay,
-  .createBlock {
+.btnRow {
+  justify-self: center;
+  display: flex;
+  gap: 10%;
+
+  .quickBtn {
     width: auto;
     padding: 0 16px;
-    height: 24px;
-    text-align: center;
-    vertical-align: center;
-    font-weight: 600;
-    line-height: 21px;
-    border-radius: 2px;
-    opacity: 0.6;
-    cursor: pointer;
   }
 
   .createEvent {
-    border: 1px solid $light-bg;
-    color: lighten($light-bg, 30%);
-
-    &:hover {
-      background-color: $light-bg;
-      opacity: 1;
-    }
+    color: $light-bg;
   }
 
   .createDelay {
-    border: 1px solid $block-delay-color;
-    color: lighten($block-delay-color, 30%);
-
-    &:hover {
-      background-color: $block-delay-color;
-      opacity: 1;
-    }
+    color: $block-delay-color;
   }
 
   .createBlock {
-    border: 1px solid $block-block-color;
-    color: lighten($block-block-color, 30%);
-
-    &:hover {
-      background-color: $block-block-color;
-      opacity: 1;
-    }
+    color: $block-block-color;
   }
 }
 
 .keyboard {
-  margin-left: 4px;
+  margin-left: 8px;
   padding: 0 4px;
   color: $label-gray;
   border-radius: 2px;
-  background-color: rgba(0, 0, 0, 0.24);
+  background-color: rgba(0, 0, 0, 0.1);
 }
 
 .options {
   display: flex;
   flex-direction: column;
-
-  label {
-    opacity: 0.65;
-    transition: opacity 0.15s;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-}
-
-.disabled {
-  border-color: $text-gray-disabled;
-  color: $text-gray-disabled;
-  pointer-events: none;
-  cursor: not-allowed;
 }
diff --git a/client/src/features/rundown/quick-add-block/QuickAddBlock.tsx b/client/src/features/rundown/quick-add-block/QuickAddBlock.tsx
index ec21d1748..5020c65fd 100644
--- a/client/src/features/rundown/quick-add-block/QuickAddBlock.tsx
+++ b/client/src/features/rundown/quick-add-block/QuickAddBlock.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useContext, useRef } from 'react';
-import { Checkbox, Tooltip } from '@chakra-ui/react';
+import { Button, Checkbox, Tooltip } from '@chakra-ui/react';
 import { defaultPublicAtom, startTimeIsLastEndAtom } from 'common/atoms/LocalEventSettings';
 import { LoggingContext } from 'common/context/LoggingContext';
 import { useEventAction } from 'common/hooks/useEventAction';
@@ -31,7 +31,7 @@ export default function QuickAddBlock(props: QuickAddBlockProps) {
   const startTimeIsLastEnd = useAtomValue(startTimeIsLastEndAtom);
   const defaultPublic = useAtomValue(defaultPublicAtom);
   const doStartTime = useRef<HTMLInputElement | null>(null);
-  const doPublic = useRef<HTMLInputElement | null>(null)
+  const doPublic = useRef<HTMLInputElement | null>(null);
 
   const handleCreateEvent = useCallback((eventType: EventTypes) => {
     switch (eventType) {
@@ -62,38 +62,45 @@ export default function QuickAddBlock(props: QuickAddBlockProps) {
 
   return (
     <div className={style.quickAdd}>
-      <Tooltip label='Add Event' openDelay={tooltipDelayMid}>
-        <span
-          className={style.createEvent}
-          onClick={() => handleCreateEvent('event')}
-          role='button'
-        >
-          E{showKbd && <span className={style.keyboard}>Alt + E</span>}
-        </span>
-      </Tooltip>
-      <Tooltip label='Add Delay' openDelay={tooltipDelayMid}>
-        <span
-          className={`${style.createDelay} ${disableAddDelay ? style.disabled : ''}`}
-          onClick={() => handleCreateEvent('delay')}
-          role='button'
-        >
-          D{showKbd && <span className={style.keyboard}>Alt + D</span>}
-        </span>
-      </Tooltip>
-      <Tooltip label='Add Block' openDelay={tooltipDelayMid}>
-        <span
-          className={`${style.createBlock} ${disableAddBlock ? style.disabled : ''}`}
-          onClick={() => handleCreateEvent('block')}
-          role='button'
-        >
-          B{showKbd && <span className={style.keyboard}>Alt + B</span>}
-        </span>
-      </Tooltip>
+      <div className={style.btnRow}>
+        <Tooltip label='Add Event' openDelay={tooltipDelayMid}>
+          <Button
+            onClick={() => handleCreateEvent('event')}
+            size='xs'
+            variant='ontime-subtle'
+            className={`${style.quickBtn} ${style.createBlock}`}
+          >
+            E{showKbd && <span className={style.keyboard}>Alt + E</span>}
+          </Button>
+        </Tooltip>
+        <Tooltip label='Add Delay' openDelay={tooltipDelayMid}>
+          <Button
+            onClick={() => handleCreateEvent('delay')}
+            size='xs'
+            variant='ontime-subtle'
+            disabled={disableAddDelay}
+            className={`${style.quickBtn} ${style.createDelay}`}
+          >
+            D{showKbd && <span className={style.keyboard}>Alt + D</span>}
+          </Button>
+        </Tooltip>
+        <Tooltip label='Add Block' openDelay={tooltipDelayMid}>
+          <Button
+            onClick={() => handleCreateEvent('block')}
+            size='xs'
+            variant='ontime-subtle'
+            disabled={disableAddBlock}
+            className={`${style.quickBtn} ${style.createEvent}`}
+          >
+            B{showKbd && <span className={style.keyboard}>Alt + B</span>}
+          </Button>
+        </Tooltip>
+      </div>
       <div className={style.options}>
         <Checkbox
           ref={doStartTime}
           size='sm'
-          colorScheme='blue'
+          variant='ontime-ondark'
           defaultChecked={startTimeIsLastEnd}
         >
           Start time is last end
@@ -101,7 +108,7 @@ export default function QuickAddBlock(props: QuickAddBlockProps) {
         <Checkbox
           ref={doPublic}
           size='sm'
-          colorScheme='blue'
+          variant='ontime-ondark'
           defaultChecked={defaultPublic}
         >
           Event is public
diff --git a/client/src/features/table/OntimeTable.jsx b/client/src/features/table/OntimeTable.jsx
index 7b6023515..52248edc2 100644
--- a/client/src/features/table/OntimeTable.jsx
+++ b/client/src/features/table/OntimeTable.jsx
@@ -82,7 +82,6 @@ export default function OntimeTable({ tableData, userFields, selectedId, handleU
   );
 
   const handleResetReordering = useCallback(() => {
-    console.log('called reset', defaultColumnOrder)
     saveColumnOrder(defaultColumnOrder);
     setColumnOrder(defaultColumnOrder);
   }, [saveColumnOrder, setColumnOrder]);
diff --git a/client/src/features/table/Table.module.scss b/client/src/features/table/Table.module.scss
index 7b07de078..223001628 100644
--- a/client/src/features/table/Table.module.scss
+++ b/client/src/features/table/Table.module.scss
@@ -194,11 +194,11 @@
 }
 
 $bg-theme-light: #fcfcfc;
-$cell-theme-light: #f6f6f6;
+$cell-theme-light: #ececec;
 $text-theme-light: #202020;
 $bg-theme-dark: #121212;
 $bg2-theme-dark: #1c1c1c;
-$cell-theme-dark: #323232;
+$cell-theme-dark: #2d2d2d;
 $text-theme-dark: white;
 
 .tableWrapper {
@@ -221,6 +221,7 @@ $text-theme-dark: white;
   td {
     background-color: $cell-theme-light;
     border: 1px solid $bg-theme-light;
+    color: #121212;
   }
   .actionText:hover,
   .actionIcon:hover,
@@ -242,6 +243,7 @@ $text-theme-dark: white;
   td {
     background-color: $cell-theme-dark;
     border: 1px solid $bg-theme-dark;
+    color: #ececec;
   }
   .actionText:hover,
   .actionIcon:hover,
@@ -306,67 +308,3 @@ svg {
     transform: rotate(360deg);
   }
 }
-
-@media print {
-  /* No margins on build  ... */
-
-  * {
-    font-size: 10pt;
-  }
-
-  /* Ensure printable colours */
-  .tableWrapper,
-  .tableWrapper__dark {
-    background-color: white;
-    color: black;
-
-    * {
-      background-color: white;
-    }
-
-    td, th,
-    .selected > td {
-      background-color: #f6f6f6;
-    }
-
-    th {
-      width: auto;
-    }
-
-    .tableContainer {
-      overflow: visible;
-    }
-
-    /* Remove unnecessary sections */
-    .headerNow,
-    .headerRunning,
-    .headerActions,
-    .tableSettings,
-    .headerClock,
-    .actionIcon,
-    .delayCell,
-    .blockCell,
-    .noPrint {
-      display: none !important;
-
-      * {
-        display: none !important;
-      }
-    }
-
-    /* Overload styles */
-    .rowHeader {
-      font-weight: 600 !important;
-    }
-
-    .row {
-      height: fit-content;
-    }
-  }
-
-  /* ... set page margins */
-  @page {
-    size: auto;
-    margin: 0;
-  }
-}
\ No newline at end of file
diff --git a/client/src/features/table/tableElements/EditableCell.jsx b/client/src/features/table/tableElements/EditableCell.jsx
index 484b49a70..d83b3810a 100644
--- a/client/src/features/table/tableElements/EditableCell.jsx
+++ b/client/src/features/table/tableElements/EditableCell.jsx
@@ -1,5 +1,5 @@
 import { useCallback, useContext, useEffect, useState } from 'react';
-import { AutoTextArea } from 'common/components/input/AutoTextArea';
+import { AutoTextArea } from 'common/components/input/auto-text-area/AutoTextArea';
 import { TableSettingsContext } from 'common/context/TableSettingsContext';
 import PropTypes from 'prop-types';
 
@@ -37,14 +37,13 @@ useEffect(() => {
 return (
   <AutoTextArea
     size='sm'
-    borderColor='#0001'
     value={value}
     onChange={onChange}
     onBlur={onBlur}
     rows={3}
     transition='none'
     spellCheck={false}
-    color={theme === "dark" ? "#fffffa" : "black"}
+    isDark={theme === "dark"}
   />
 );
 }
diff --git a/client/src/features/table/tableRows/EventRow.jsx b/client/src/features/table/tableRows/EventRow.jsx
index e25ea7c52..0cb1079ac 100644
--- a/client/src/features/table/tableRows/EventRow.jsx
+++ b/client/src/features/table/tableRows/EventRow.jsx
@@ -7,21 +7,18 @@ import style from '../Table.module.scss';
 export default function EventRow(props) {
   const { row, index, selectedId, delay } = props;
   const selected = row.original.id === selectedId;
-  const colours = getAccessibleColour(row.original.colour);
+
+  const colours = row.original.colour
+    ? getAccessibleColour(row.original.colour)
+    : {};
 
   return (
     <tr {...row.getRowProps()} className={selected ? style.selected : ''} id={row.original.id}>
       <td className={style.indexColumn}>{index}</td>
       {row.cells.map((cell) => {
         const { key, style, ...restCellProps } = cell.getCellProps();
-        const dynamicStyles =
-          selected &&
-          (cell.column.Header === 'Start' ||
-            cell.column.Header === 'End' ||
-            cell.column.Header === 'Duration' ||
-            cell.column.Header === 'Public')
-            ? { ...style }
-            : { ...style, ...colours };
+        const dynamicStyles = { ...style, ...colours };
+
 
         // Inject delay value if exits
         if (delay !== 0 && delay != null) {
diff --git a/client/src/index.jsx b/client/src/index.jsx
index 97355da2a..25782c5ef 100644
--- a/client/src/index.jsx
+++ b/client/src/index.jsx
@@ -1,4 +1,3 @@
-import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import App from './App';
@@ -9,7 +8,7 @@ const container = document.getElementById('root');
 const root = createRoot(container);
 
 root.render(
-  <StrictMode>
+  // <StrictMode>
     <App />
-  </StrictMode>
+  // </StrictMode>
 );
diff --git a/client/src/index.scss b/client/src/index.scss
index 1888f9b34..f21b86f6d 100644
--- a/client/src/index.scss
+++ b/client/src/index.scss
@@ -1,4 +1,4 @@
-@use './theme/main';
+@use './theme/v2Styles' as *;
 
 * {
   -webkit-font-smoothing: antialiased;
@@ -10,6 +10,7 @@
 body,
 html,
 .App {
+  font-family: $ontime-font-family;
   margin: 0 auto;
   overflow: hidden;
   overflow: clip;
@@ -19,14 +20,15 @@ html,
   -webkit-app-region: drag;
 }
 
+// workaround for chakra
+// // https://github.com/chakra-ui/chakra-ui/issues/417
 option {
-  color: black;
+  color: initial;
 }
 
 /* width */
 ::-webkit-scrollbar {
-  width: 0.5rem;
-  height: 0.5rem;
+  width: 6px;
 }
 
 /* Track */
@@ -37,11 +39,11 @@ option {
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.15);
+  background: #2d2d2d;
   border-radius: 2px;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.23);
+  background: #404040;
 }
diff --git a/client/src/theme/_main.scss b/client/src/theme/_main.scss
index 58ecdf1a7..ab5f09f7c 100644
--- a/client/src/theme/_main.scss
+++ b/client/src/theme/_main.scss
@@ -1,3 +1,5 @@
+@use "./ontimeColours" as *;
+
 $transition-time-action: 0.1s;
 $transition-time-feedback: 0.3s;
 
@@ -111,15 +113,8 @@ textarea {
 }
 
 // Define style for a link
-a {
-  &::after {
-    content: '  \2197';
-    color: $ontime-pink;
-  }
-
-  &:hover {
-    color: $ontime-pink;
-  }
+a:hover {
+  color: $ontime-pink;
 }
 
 // horizontal separator
diff --git a/client/src/theme/_mixins.scss b/client/src/theme/_mixins.scss
index 581698374..ceba45a03 100644
--- a/client/src/theme/_mixins.scss
+++ b/client/src/theme/_mixins.scss
@@ -1,10 +1,10 @@
-@use "main" as *;
+@use "v2Styles" as *;
 
 //////////////////////////////////// general app elements
 
 @mixin main-container {
-  background-color: $bg-gray-1000;
-  border: 1px solid $bg-gray-1000;
+  background-color: $bg-container-l1;
+  border: 1px solid $bg-container-l1;
   border-radius: 4px;
 }
 
@@ -14,7 +14,21 @@
 }
 
 @mixin third-container {
-  background-color: $bg-gray-1100;
+  background-color: $bg-container-l3;
   border: 1px solid rgba(0, 0, 0, 0.05);
   border-radius: 2px;
 }
+
+@mixin action-link {
+  color: $action-text-color;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 14px;
+  transition-property: color;
+  transition-duration: $transition-time-action;
+
+  &:hover {
+    color: $ontime-color;
+  }
+}
\ No newline at end of file
diff --git a/client/src/theme/_ontimeColours.scss b/client/src/theme/_ontimeColours.scss
new file mode 100644
index 000000000..eee807b6d
--- /dev/null
+++ b/client/src/theme/_ontimeColours.scss
@@ -0,0 +1,108 @@
+// from https://www.genomecolor.space/
+
+$white-1: rgba(255, 255, 255, 0.01);
+$white-3: rgba(255, 255, 255, 0.03);
+$white-7: rgba(255, 255, 255, 0.07);
+$white-9: rgba(255, 255, 255, 0.09);
+$white-10: rgba(255, 255, 255, 0.10);
+$white-13: rgba(255, 255, 255, 0.13);
+
+$gray-50: #f6f6f6;
+$gray-100: #ececec;
+$gray-200: #e2e2e2;
+$gray-300: #cfcfcf;
+$gray-400: #b1b1b1;
+$gray-500: #9d9d9d;
+$gray-600: #8a8a8a;
+$gray-700: #6c6c6c;
+$gray-800: #595959;
+$gray-900: #4c4c4c;
+$gray-1000: #404040;
+$gray-1050: #303030;
+$gray-1100: #2d2d2d;
+$gray-1200: #202020;
+$gray-1300: #1a1a1a;
+$gray-1350: #101010;
+$pure-white: #fff;
+$ui-white: $gray-50;
+$ui-black: $gray-1350;
+
+$orange-50: #FFFAF0;
+$orange-100: #FFF4DF;
+$orange-200: #FFEECE;
+$orange-300: #FFE1AB;
+$orange-400: #FFCC78;
+$orange-500: #FFBC56;
+$orange-600: #FFAB33;
+$orange-700: #E69000;
+$orange-800: #D27C00;
+$orange-900: #B46D00;
+$orange-1000: #975E00;
+$orange-1100: #6A4400;
+$orange-1200: #4C3200;
+$orange-1300: #3D2900;
+$orange-1350: #2E1F00;
+
+$green-50: #EDFAEE;
+$green-100: #DCF4DE;
+$green-200: #CBEECF;
+$green-300: #A9E0B0;
+$green-400: #77C785;
+$green-500: #55B469;
+$green-600: #339E4E;
+$green-700: #087A27;
+$green-800: #006E1B;
+$green-900: #006415;
+$green-1000: #00570F;
+$green-1100: #004108;
+$green-1200: #003005;
+$green-1300: #002703;
+$green-1350: #001D02;
+
+$blue-50: #F5F7FF;
+$blue-100: #E3EAFF;
+$blue-200: #D2DDFF;
+$blue-300: #AFC4FF;
+$blue-400: #779BE7;
+$blue-500: #578AF4;
+$blue-600: #3E75E8;
+$blue-700: #2B5ABC;
+$blue-800: #0A43B9;
+$blue-900: #0036A6;
+$blue-1000: #002A90;
+$blue-1100: #001A64;
+$blue-1200: #001145;
+$blue-1300: #000D36;
+$blue-1350: #000926;
+
+$red-50: #FFF0F0;
+$red-100: #FFDFDF;
+$red-200: #FFCECE;
+$red-300: #FFABAB;
+$red-400: #FF7878;
+$red-500: #FA5656;
+$red-600: #ED3333;
+$red-700: #D20300;
+$red-800: #C10000;
+$red-900: #B20000;
+$red-1000: #9A0000;
+$red-1100: #6F0000;
+$red-1200: #520000;
+$red-1300: #440000;
+$red-1350: #360000;
+
+$violet-50: #F9F7FE;
+$violet-100: #F3EFFC;
+$violet-200: #E7DFF6;
+$violet-300: #CEBFEC;
+$violet-400: #B8A0E3;
+$violet-500: #AB8DB8;
+$violet-600: #9771D3;
+$violet-700: #8B60CA;
+$violet-800: #8352C6;
+$violet-900: #7945c1;
+$violet-1000: #7248AD;
+$violet-1100: #573486;
+$violet-1200: #3C235F;
+$violet-1300: #301A4D;
+$violet-1350: #231339;
diff --git a/client/src/theme/_v2Styles.scss b/client/src/theme/_v2Styles.scss
new file mode 100644
index 000000000..ac8b32dd7
--- /dev/null
+++ b/client/src/theme/_v2Styles.scss
@@ -0,0 +1,47 @@
+@use "./ontimeColours" as *;
+
+$transition-time-action: 0.1s;
+$transition-time-feedback: 0.3s;
+
+$component-border-radius-md: 3px;
+$component-border-radius-sm: 2px;
+
+// semantic colours
+$action-blue: #3182ce;
+$action-text-color: $blue-400;
+$ontime-color: #ff7597;
+$error-red: $red-700;
+$warning-orange: $orange-700;
+$opacity-disabled: 0.4;
+
+// playback colours
+$playback-start: $green-600;
+$ontime-roll: #0274B6;
+$ontime-delay: #F57C13;
+$ontime-delay-text: #E69056;
+$ontime-paused: #c05621;
+$ontime-stop: #E4281E;
+$playback-negative: $red-500;
+
+// interface panels
+$bg-container-l1: $gray-1350;
+$bg-container-l2: $gray-1100;
+$bg-container-l3: $gray-1350;
+
+$box-shadow-l1: rgba(0, 0, 0, 0.15) 0 3px 3px 0;
+$box-shadow-l2: rgba(0, 0, 0, 0.15) 0 3px 3px 0;
+
+// interface elements
+$border-color-ondark: $white-10;
+$element-inner-spacing: 4px;
+$element-spacing: 8px;
+$section-spacing: 16px;
+$main-spacing: 32px;
+
+// interface text
+$ontime-font-family: "Open Sans", "Segoe UI", sans-serif;
+$label-gray: $gray-400;
+$secondary-text-gray: $gray-400;
+$section-white: $ui-white;
+$inner-section-text-size: 14px;
+$text-body-size: 15px;
diff --git a/client/src/theme/_viewerDefs.scss b/client/src/theme/_viewerDefs.scss
index 671e88d09..dfa61b521 100644
--- a/client/src/theme/_viewerDefs.scss
+++ b/client/src/theme/_viewerDefs.scss
@@ -1,6 +1,9 @@
 @use 'main' as *;
 @use 'viewerCommon' as *;
 
+// Text
+$ontime-font-family: "Open Sans", "Segoe UI", sans-serif; // --font-family-override
+
 // General styling
 $accent-color: $ontime-pink; // --accent-color-override
 $delay-color: $delay-text;
diff --git a/client/src/theme/ontimeButton.ts b/client/src/theme/ontimeButton.ts
new file mode 100644
index 000000000..586171dfe
--- /dev/null
+++ b/client/src/theme/ontimeButton.ts
@@ -0,0 +1,53 @@
+const commonStyles = {
+  letterSpacing: '0.3px',
+  fontWeight: '400',
+  borderRadius: '3px',
+};
+
+export const ontimeButtonFilled = {
+  ...commonStyles,
+  background: '#2B5ABC', // $blue-700
+  color: '#fff', // pure-white
+  border: '1px solid #2B5ABC', // $blue-700
+  _hover: {
+    backgroundColor: '#0A43B9', // $blue-800
+    border: '1px solid #0A43B9', // $blue-800
+  },
+  _active: {
+    backgroundColor: '#0036A6', // blue-900
+    borderColor: '#002A90', // blue-1000
+  },
+};
+
+export const ontimeButtonOutlined = {
+  ...commonStyles,
+  backgroundColor: '#2d2d2d', // $gray-1100
+  color: '#779BE7', // $blue-400
+  border: '1px solid #779BE7', // $blue-400
+  _hover: {
+    backgroundColor: '#404040', // $gray-1000
+  },
+  _active: {
+    backgroundColor: '#2d2d2d', // $gray-1100
+    borderColor: '#202020', // $gray-12000
+  },
+};
+
+export const ontimeButtonSubtle = {
+  ...commonStyles,
+  backgroundColor: '#303030', // $gray-1050
+  color: '#779BE7', // $blue-400
+  border: '1px solid transparent',
+  _hover: {
+    background: '#404040', // $gray-1000
+  },
+  _active: {
+    backgroundColor: '#2d2d2d', // $gray-1100
+    borderColor: '#202020', // $gray-12000
+  },
+};
+
+export const ontimeButtonSubtleWhite = {
+  ...ontimeButtonSubtle,
+  color: '#f6f6f6', // $gray-50
+};
diff --git a/client/src/theme/ontimeCheckbox.ts b/client/src/theme/ontimeCheckbox.ts
new file mode 100644
index 000000000..46d1c09b0
--- /dev/null
+++ b/client/src/theme/ontimeCheckbox.ts
@@ -0,0 +1,21 @@
+export const ontimeCheckboxOnDark = {
+  control: {
+    border: '1px',
+    borderColor: '#2d2d2d',  // $gray-1100
+    backgroundColor: '#2d2d2d',  // $gray-1100
+    _checked: {
+      borderColor: '#3182ce', // $action-blue
+      backgroundColor: '#3182ce', //$action-blue
+    },
+    _focus: {
+      boxShadow: '0 0 0 1px #578AF4'
+    }
+  },
+  label: {
+    fontWeight: '200',
+    color: '#9d9d9d', // $gray-500
+    _checked: {
+      color: '#779BE7', //$blue-400
+    }
+  },
+};
diff --git a/client/src/theme/ontimeMenu.ts b/client/src/theme/ontimeMenu.ts
new file mode 100644
index 000000000..be6b6385d
--- /dev/null
+++ b/client/src/theme/ontimeMenu.ts
@@ -0,0 +1,18 @@
+export const ontimeMenuOnDark = {
+  list: {
+    borderRadius: "3px",
+    border: 'none',
+    bg: '#fff', // $gray-50
+  },
+  item: {
+    letterSpacing: '0.15px',
+    color: '#101010', // $gray-1350
+    bg: '#fff', //
+    _hover: {
+      backgroundColor: '#e2e2e2', // $gray-200
+    },
+  },
+  divider: {
+    borderColor: '#cfcfcf', // $gray-200
+  },
+};
diff --git a/client/src/theme/ontimeSelect.ts b/client/src/theme/ontimeSelect.ts
new file mode 100644
index 000000000..c8dac2f5b
--- /dev/null
+++ b/client/src/theme/ontimeSelect.ts
@@ -0,0 +1,20 @@
+export const ontimeSelect = {
+  field: {
+    color: '#9d9d9d', // $gray-500
+    borderRadius: '3px',
+    fontWeight: '400',
+    background: '#2d2d2d',  // $gray-1100
+    border: '1px solid transparent',
+    _hover: {
+      background: '#404040', // $gray-1000
+    },
+    _focus: {
+      background: '#404040', // $gray-1000
+      color: '#f6f6f6', // $gray-50
+      border: '1px solid #578AF4', // $blue-500
+    },
+  },
+  icon: {
+    color: '#9d9d9d', // $gray-500
+  },
+};
diff --git a/client/src/theme/ontimeSwitch.ts b/client/src/theme/ontimeSwitch.ts
new file mode 100644
index 000000000..27f98453f
--- /dev/null
+++ b/client/src/theme/ontimeSwitch.ts
@@ -0,0 +1,10 @@
+export const ontimeSwitch = {
+  container: {  },
+  track: {
+    background: '#2d2d2d', // $gray-1100
+    _checked: {
+      background: `#2B5ABC`, // $blue-700
+    },
+  },
+  thumb: {},
+};
diff --git a/client/src/theme/ontimeTextInputs.ts b/client/src/theme/ontimeTextInputs.ts
new file mode 100644
index 000000000..84e1346b7
--- /dev/null
+++ b/client/src/theme/ontimeTextInputs.ts
@@ -0,0 +1,43 @@
+const commonStyles = {
+  borderRadius: '3px',
+  fontWeight: '400',
+  backgroundColor: '#2d2d2d',  // $gray-1100
+  color: '#e2e2e2', // $gray-200
+  border: '1px solid transparent',
+  _hover: {
+    backgroundColor: '#404040', // $gray-1000
+  },
+  _focus: {
+    backgroundColor: '#404040', // $gray-1000
+    color: '#f6f6f6', // $gray-50
+    border: '1px solid #578AF4', // $blue-500
+  },
+  _placeholder: { color: '#9d9d9d' }, // $gray-500
+};
+
+export const ontimeInputFilled = {
+  field: {
+    ...commonStyles,
+  },
+};
+
+export const ontimeTextAreaFilled = {
+  ...commonStyles,
+};
+
+export const ontimeTextAreaFilledOnLight = {
+  borderRadius: '3px',
+  fontWeight: '400',
+  backgroundColor: '#ececec',  // $gray-100
+  color: '#202020', // $gray-1200
+  border: '1px solid transparent',
+  _hover: {
+    backgroundColor: '#cfcfcf', // $gray-300
+  },
+  _focus: {
+    backgroundColor: '#cfcfcf', // $gray-300
+    color: '#101010',
+    border: '1px solid #578AF4', // $blue-500
+  },
+  _placeholder: { color: '#9d9d9d' }, // $gray-500
+}
diff --git a/client/src/theme/ontimeTooltip.ts b/client/src/theme/ontimeTooltip.ts
new file mode 100644
index 000000000..926fa9450
--- /dev/null
+++ b/client/src/theme/ontimeTooltip.ts
@@ -0,0 +1,12 @@
+export const ontimeTooltip = {
+  _light: {
+    backgroundColor: '#2d2d2d',
+    color: '#779BE7',
+    padding: '2px 8px',
+  },
+  _dark: {
+    backgroundColor: '#2d2d2d',
+    color: '#779BE7',
+    padding: '2px 8px',
+  },
+};
diff --git a/client/src/theme/theme.js b/client/src/theme/theme.js
deleted file mode 100644
index 692b9d93c..000000000
--- a/client/src/theme/theme.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { extendTheme } from '@chakra-ui/react';
-
-const theme = extendTheme({
-  components: {
-    Button: {
-      baseStyle: {
-        borderRadius: '3px',
-      },
-    },
-    Input: {
-      baseStyle: {
-        field: {
-          borderRadius: 3,
-        },
-      },
-      sizes: {},
-      variants: {
-        filled: {
-          field: {
-            backgroundColor: 'rgba(255, 255, 255, 0.03)',
-            _hover: {
-              backgroundColor: 'rgba(255, 255, 255, 0.13)',
-            },
-          },
-        },
-      },
-      defaultProps: {
-        variant: null, // null here
-      },
-    },
-    Textarea: {
-      baseStyle: {
-        borderRadius: 3,
-      },
-      variants: {
-        filled: {
-          backgroundColor: 'rgba(255, 255, 255, 0.03)',
-          _hover: {
-            backgroundColor: 'rgba(255, 255, 255, 0.13)',
-          },
-        },
-      },
-      defaultProps: {
-        variant: null, // null here
-      },
-    },
-  },
-});
-
-export default theme;
diff --git a/client/src/theme/theme.ts b/client/src/theme/theme.ts
new file mode 100644
index 000000000..dc93aa6a7
--- /dev/null
+++ b/client/src/theme/theme.ts
@@ -0,0 +1,88 @@
+import { extendTheme } from '@chakra-ui/react';
+
+import {
+  ontimeButtonFilled,
+  ontimeButtonOutlined,
+  ontimeButtonSubtle,
+  ontimeButtonSubtleWhite,
+} from './ontimeButton';
+import { ontimeCheckboxOnDark } from './ontimeCheckbox';
+import { ontimeMenuOnDark } from './ontimeMenu';
+import { ontimeSelect } from './ontimeSelect';
+import { ontimeSwitch } from './ontimeSwitch';
+import {
+  ontimeInputFilled,
+  ontimeTextAreaFilled,
+  ontimeTextAreaFilledOnLight,
+} from './ontimeTextInputs';
+import { ontimeTooltip } from './ontimeTooltip';
+
+const theme = extendTheme({
+  components: {
+    Button: {
+      baseStyle: {
+        borderRadius: '3px',
+      },
+      variants: {
+        'ontime-filled': { ...ontimeButtonFilled },
+        'ontime-outlined': { ...ontimeButtonOutlined },
+        'ontime-subtle': { ...ontimeButtonSubtle },
+        'ontime-subtle-white': { ...ontimeButtonSubtleWhite },
+      },
+    },
+    Checkbox: {
+      variants: {
+        'ontime-ondark': { ...ontimeCheckboxOnDark },
+      },
+    },
+    Editable: {
+      baseStyle: {
+        input: {
+          borderRadius: '2px',
+          width: '100%',
+        },
+        preview: {
+          width: '100%',
+        },
+      },
+    },
+    Input: {
+      baseStyle: {
+        borderRadius: '2px',
+        border: '1px',
+      },
+      variants: {
+        'ontime-filled': { ...ontimeInputFilled },
+      },
+    },
+    Textarea: {
+      baseStyle: {
+        borderRadius: '3px',
+      },
+      variants: {
+        'ontime-filled': { ...ontimeTextAreaFilled },
+        'ontime-filled-onlight': { ...ontimeTextAreaFilledOnLight },
+      },
+    },
+    Tooltip: {
+      baseStyle: { ...ontimeTooltip},
+    },
+    Switch: {
+      variants: {
+        'ontime': { ...ontimeSwitch },
+      },
+    },
+    Select: {
+      variants: {
+        'ontime': { ...ontimeSelect },
+      },
+    },
+    Menu: {
+      variants: {
+        'ontime-on-dark': { ...ontimeMenuOnDark },
+      },
+    },
+  },
+});
+
+export default theme;
diff --git a/client/yarn.lock b/client/yarn.lock
index 44a8415bc..947554bb7 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -30,38 +30,38 @@
   dependencies:
     "@babel/highlight" "^7.18.6"
 
-"@babel/compat-data@^7.19.1":
-  version "7.19.1"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.19.1.tgz#72d647b4ff6a4f82878d184613353af1dd0290f9"
-  integrity sha512-72a9ghR0gnESIa7jBN53U32FOVCEoztyIlKaNoU05zRhEecduGK9L9c3ww7Mp06JiR+0ls0GBPFJQwwtjn9ksg==
+"@babel/compat-data@^7.20.0":
+  version "7.20.1"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.20.1.tgz#f2e6ef7790d8c8dbf03d379502dcc246dcce0b30"
+  integrity sha512-EWZ4mE2diW3QALKvDMiXnbZpRvlj+nayZ112nK93SnhqOtpdsbVD4W+2tEoT3YNBAG9RBR0ISY758ZkOgsn6pQ==
 
-"@babel/core@^7.18.13", "@babel/core@^7.18.5":
-  version "7.19.1"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.19.1.tgz#c8fa615c5e88e272564ace3d42fbc8b17bfeb22b"
-  integrity sha512-1H8VgqXme4UXCRv7/Wa1bq7RVymKOzC7znjyFM8KiEzwFqcKUKYNoQef4GhdklgNvoBXyW4gYhuBNCM5o1zImw==
+"@babel/core@^7.19.6":
+  version "7.20.2"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.20.2.tgz#8dc9b1620a673f92d3624bd926dc49a52cf25b92"
+  integrity sha512-w7DbG8DtMrJcFOi4VrLm+8QM4az8Mo+PuLBKLp2zrYRCow8W/f9xiXm5sN53C8HksCyDQwCKha9JiDoIyPjT2g==
   dependencies:
     "@ampproject/remapping" "^2.1.0"
     "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.19.0"
-    "@babel/helper-compilation-targets" "^7.19.1"
-    "@babel/helper-module-transforms" "^7.19.0"
-    "@babel/helpers" "^7.19.0"
-    "@babel/parser" "^7.19.1"
+    "@babel/generator" "^7.20.2"
+    "@babel/helper-compilation-targets" "^7.20.0"
+    "@babel/helper-module-transforms" "^7.20.2"
+    "@babel/helpers" "^7.20.1"
+    "@babel/parser" "^7.20.2"
     "@babel/template" "^7.18.10"
-    "@babel/traverse" "^7.19.1"
-    "@babel/types" "^7.19.0"
+    "@babel/traverse" "^7.20.1"
+    "@babel/types" "^7.20.2"
     convert-source-map "^1.7.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
     json5 "^2.2.1"
     semver "^6.3.0"
 
-"@babel/generator@^7.19.0":
-  version "7.19.0"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.19.0.tgz#785596c06425e59334df2ccee63ab166b738419a"
-  integrity sha512-S1ahxf1gZ2dpoiFgA+ohK9DIpz50bJ0CWs7Zlzb54Z4sG8qmdIrGrVqmy1sAtTVRb+9CU6U8VqT9L0Zj7hxHVg==
+"@babel/generator@^7.20.1", "@babel/generator@^7.20.2":
+  version "7.20.4"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.20.4.tgz#4d9f8f0c30be75fd90a0562099a26e5839602ab8"
+  integrity sha512-luCf7yk/cm7yab6CAW1aiFnmEfBJplb/JojV56MYEK7ziWfGmFlTfmL9Ehwfy4gFhbjBfWO1wj7/TuSbVNEEtA==
   dependencies:
-    "@babel/types" "^7.19.0"
+    "@babel/types" "^7.20.2"
     "@jridgewell/gen-mapping" "^0.3.2"
     jsesc "^2.5.1"
 
@@ -72,12 +72,12 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-compilation-targets@^7.19.1":
-  version "7.19.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.19.1.tgz#7f630911d83b408b76fe584831c98e5395d7a17c"
-  integrity sha512-LlLkkqhCMyz2lkQPvJNdIYU7O5YjWRgC2R4omjCTpZd8u8KMQzZvX4qce+/BluN1rcQiV7BoGUpmQ0LeHerbhg==
+"@babel/helper-compilation-targets@^7.20.0":
+  version "7.20.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.0.tgz#6bf5374d424e1b3922822f1d9bdaa43b1a139d0a"
+  integrity sha512-0jp//vDGp9e8hZzBc6N/KwA5ZK3Wsm/pfm4CrY7vzegkVxc65SgSn6wYOnwHe9Js9HRQ1YTCKLGPzDtaS3RoLQ==
   dependencies:
-    "@babel/compat-data" "^7.19.1"
+    "@babel/compat-data" "^7.20.0"
     "@babel/helper-validator-option" "^7.18.6"
     browserslist "^4.21.3"
     semver "^6.3.0"
@@ -116,31 +116,31 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-module-transforms@^7.19.0":
-  version "7.19.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.19.0.tgz#309b230f04e22c58c6a2c0c0c7e50b216d350c30"
-  integrity sha512-3HBZ377Fe14RbLIA+ac3sY4PTgpxHVkFrESaWhoI5PuyXPBBX8+C34qblV9G89ZtycGJCmCI/Ut+VUDK4bltNQ==
+"@babel/helper-module-transforms@^7.20.2":
+  version "7.20.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.20.2.tgz#ac53da669501edd37e658602a21ba14c08748712"
+  integrity sha512-zvBKyJXRbmK07XhMuujYoJ48B5yvvmM6+wcpv6Ivj4Yg6qO7NOZOSnvZN9CRl1zz1Z4cKf8YejmCMh8clOoOeA==
   dependencies:
     "@babel/helper-environment-visitor" "^7.18.9"
     "@babel/helper-module-imports" "^7.18.6"
-    "@babel/helper-simple-access" "^7.18.6"
+    "@babel/helper-simple-access" "^7.20.2"
     "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/helper-validator-identifier" "^7.18.6"
+    "@babel/helper-validator-identifier" "^7.19.1"
     "@babel/template" "^7.18.10"
-    "@babel/traverse" "^7.19.0"
-    "@babel/types" "^7.19.0"
+    "@babel/traverse" "^7.20.1"
+    "@babel/types" "^7.20.2"
 
 "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.19.0":
   version "7.19.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.19.0.tgz#4796bb14961521f0f8715990bee2fb6e51ce21bf"
   integrity sha512-40Ryx7I8mT+0gaNxm8JGTZFUITNqdLAgdg0hXzeVZxVD6nFsdhQvip6v8dqkRHzsz1VFpFAaOCHNn0vKBL7Czw==
 
-"@babel/helper-simple-access@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.18.6.tgz#d6d8f51f4ac2978068df934b569f08f29788c7ea"
-  integrity sha512-iNpIgTgyAvDQpDj76POqg+YEt8fPxx3yaNBg3S30dxNKm2SWfYhD0TGrK/Eu9wHpUW63VQU894TsTg+GLbUa1g==
+"@babel/helper-simple-access@^7.20.2":
+  version "7.20.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz#0ab452687fe0c2cfb1e2b9e0015de07fc2d62dd9"
+  integrity sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==
   dependencies:
-    "@babel/types" "^7.18.6"
+    "@babel/types" "^7.20.2"
 
 "@babel/helper-split-export-declaration@^7.18.6":
   version "7.18.6"
@@ -154,12 +154,17 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.18.10.tgz#181f22d28ebe1b3857fa575f5c290b1aaf659b56"
   integrity sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw==
 
+"@babel/helper-string-parser@^7.19.4":
+  version "7.19.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63"
+  integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==
+
 "@babel/helper-validator-identifier@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
   integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
 
-"@babel/helper-validator-identifier@^7.18.6":
+"@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.19.1":
   version "7.19.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
   integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
@@ -169,14 +174,14 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
   integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==
 
-"@babel/helpers@^7.19.0":
-  version "7.19.0"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.19.0.tgz#f30534657faf246ae96551d88dd31e9d1fa1fc18"
-  integrity sha512-DRBCKGwIEdqY3+rPJgG/dKfQy9+08rHIAJx8q2p+HSWP87s2HCrQmaAMMyMll2kIXKCW0cO1RdQskx15Xakftg==
+"@babel/helpers@^7.20.1":
+  version "7.20.1"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.20.1.tgz#2ab7a0fcb0a03b5bf76629196ed63c2d7311f4c9"
+  integrity sha512-J77mUVaDTUJFZ5BpP6mMn6OIl3rEWymk2ZxDBQJUG3P+PbmyMcF3bYWvz0ma69Af1oobDqT/iAsvzhB58xhQUg==
   dependencies:
     "@babel/template" "^7.18.10"
-    "@babel/traverse" "^7.19.0"
-    "@babel/types" "^7.19.0"
+    "@babel/traverse" "^7.20.1"
+    "@babel/types" "^7.20.0"
 
 "@babel/highlight@^7.12.13", "@babel/highlight@^7.16.7":
   version "7.16.10"
@@ -196,11 +201,16 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.18.10", "@babel/parser@^7.19.1":
+"@babel/parser@^7.18.10":
   version "7.19.1"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.19.1.tgz#6f6d6c2e621aad19a92544cc217ed13f1aac5b4c"
   integrity sha512-h7RCSorm1DdTVGJf3P2Mhj3kdnkmF/EiysUkzS2TdgAYqyjFdMQJbVuXOBej2SBJaXan/lIVtT6KkGbyyq753A==
 
+"@babel/parser@^7.20.1", "@babel/parser@^7.20.2":
+  version "7.20.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.3.tgz#5358cf62e380cf69efcb87a7bb922ff88bfac6e2"
+  integrity sha512-OP/s5a94frIPXwjzEcv5S/tpQfc6XhxYUnmWpgdqMWGgYCuErA3SzozaRAMQgSZWKeTJxht9aWAkUY+0UzvOFg==
+
 "@babel/plugin-syntax-jsx@^7.17.12", "@babel/plugin-syntax-jsx@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0"
@@ -222,14 +232,14 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-react-jsx-source@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.18.6.tgz#06e9ae8a14d2bc19ce6e3c447d842032a50598fc"
-  integrity sha512-utZmlASneDfdaMh0m/WausbjUjEdGrQJz0vFK93d7wD3xf5wBtX219+q6IlCNZeguIcxS2f/CvLZrlLSvSHQXw==
+"@babel/plugin-transform-react-jsx-source@^7.19.6":
+  version "7.19.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.19.6.tgz#88578ae8331e5887e8ce28e4c9dc83fb29da0b86"
+  integrity sha512-RpAi004QyMNisst/pvSanoRdJ4q+jMCWyk9zdw/CyLB9j8RXEahodR6l2GyttDRyEVWZtbN+TpLiHJ3t34LbsQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.19.0"
 
-"@babel/plugin-transform-react-jsx@^7.18.10", "@babel/plugin-transform-react-jsx@^7.18.6":
+"@babel/plugin-transform-react-jsx@^7.18.6", "@babel/plugin-transform-react-jsx@^7.19.0":
   version "7.19.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.19.0.tgz#b3cbb7c3a00b92ec8ae1027910e331ba5c500eb9"
   integrity sha512-UVEvX3tXie3Szm3emi1+G63jyw1w5IcMY0FSKM+CRnKRI5Mr1YbCNgsSTwoTwKphQEG9P+QqmuRFneJPZuHNhg==
@@ -291,19 +301,19 @@
     "@babel/parser" "^7.18.10"
     "@babel/types" "^7.18.10"
 
-"@babel/traverse@^7.19.0", "@babel/traverse@^7.19.1":
-  version "7.19.1"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.19.1.tgz#0fafe100a8c2a603b4718b1d9bf2568d1d193347"
-  integrity sha512-0j/ZfZMxKukDaag2PtOPDbwuELqIar6lLskVPPJDjXMXjfLb1Obo/1yjxIGqqAJrmfaTIY3z2wFLAQ7qSkLsuA==
+"@babel/traverse@^7.20.1":
+  version "7.20.1"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.20.1.tgz#9b15ccbf882f6d107eeeecf263fbcdd208777ec8"
+  integrity sha512-d3tN8fkVJwFLkHkBN479SOsw4DMZnz8cdbL/gvuDuzy3TS6Nfw80HuQqhw1pITbIruHyh7d1fMA47kWzmcUEGA==
   dependencies:
     "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.19.0"
+    "@babel/generator" "^7.20.1"
     "@babel/helper-environment-visitor" "^7.18.9"
     "@babel/helper-function-name" "^7.19.0"
     "@babel/helper-hoist-variables" "^7.18.6"
     "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/parser" "^7.19.1"
-    "@babel/types" "^7.19.0"
+    "@babel/parser" "^7.20.1"
+    "@babel/types" "^7.20.0"
     debug "^4.1.0"
     globals "^11.1.0"
 
@@ -315,7 +325,7 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.18.10", "@babel/types@^7.18.4", "@babel/types@^7.18.6", "@babel/types@^7.19.0":
+"@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.19.0":
   version "7.19.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.19.0.tgz#75f21d73d73dc0351f3368d28db73465f4814600"
   integrity sha512-YuGopBq3ke25BVSiS6fgF49Ul9gH1x70Bcr6bqRLjWCkcX8Hre1/5+z+IiWOIerRMSSEfGZVB9z9kyq7wVs9YA==
@@ -324,724 +334,762 @@
     "@babel/helper-validator-identifier" "^7.18.6"
     to-fast-properties "^2.0.0"
 
-"@chakra-ui/accordion@2.1.0":
+"@babel/types@^7.20.0", "@babel/types@^7.20.2":
+  version "7.20.2"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.2.tgz#67ac09266606190f496322dbaff360fdaa5e7842"
+  integrity sha512-FnnvsNWgZCr232sqtXggapvlkk/tuwR/qhGzcmxI0GXLCjmPYQPzio2FbdlWuY6y1sHFfQKk+rRbUZ9VStQMog==
+  dependencies:
+    "@babel/helper-string-parser" "^7.19.4"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    to-fast-properties "^2.0.0"
+
+"@chakra-ui/accordion@2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/accordion/-/accordion-2.1.3.tgz#98c5426fe32d06a2f7b600161e0f81d02c4c3bb0"
+  integrity sha512-OAJSbF0UHBipi6ySBlTZM1vZi5Uoe+1UyYTBId1CxRPYHHgm3n9xAYjOtiA+TrT63aZbKwNV2KBshmGSMnNPGQ==
+  dependencies:
+    "@chakra-ui/descendant" "3.0.11"
+    "@chakra-ui/icon" "3.0.12"
+    "@chakra-ui/react-context" "2.0.5"
+    "@chakra-ui/react-use-controllable-state" "2.0.6"
+    "@chakra-ui/react-use-merge-refs" "2.0.5"
+    "@chakra-ui/transition" "2.0.12"
+
+"@chakra-ui/alert@2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/alert/-/alert-2.0.12.tgz#6784a1ae9158fa0bdb5df79dbfe8ea691686c70e"
+  integrity sha512-L2h2EeLH0x6+FDG8liu/EuDGAkI3Cgym6aXJdhaJDY3Q18o7lATrkU5Nb7jAf3sHKMwTW5X0YzAOtFiwjpALGA==
+  dependencies:
+    "@chakra-ui/icon" "3.0.12"
+    "@chakra-ui/react-context" "2.0.5"
+    "@chakra-ui/spinner" "2.0.11"
+
+"@chakra-ui/anatomy@2.1.0":
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/accordion/-/accordion-2.1.0.tgz#8e42132ae451a2e4cbd9872a7b921612e5e61073"
-  integrity sha512-23kow8qafcAL8s7FDGorhVlvrW09PfX0RlwiZg8yIumNmdcBhkUwK1FT+hzTaZONqNoaVKbgMOGLFTnPxQr3mA==
+  resolved "https://registry.yarnpkg.com/@chakra-ui/anatomy/-/anatomy-2.1.0.tgz#8aeb9b753f0412f262743adf68519dfa85120b3e"
+  integrity sha512-E3jMPGqKuGTbt7mKtc8g/MOOenw2c4wqRC1vOypyFgmC8wsewdY+DJJNENF3atXAK7p5VMBKQfZ7ipNlHnDAwA==
+
+"@chakra-ui/avatar@2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/avatar/-/avatar-2.2.1.tgz#3946d8c3b1d49dc425aa80f22d2f53661395e394"
+  integrity sha512-sgiogfLM8vas8QJTt7AJI4XxNXYdViCWj+xYJwyOwUN93dWKImqqx3O2ihCXoXTIqQWg1rcEgoJ5CxCg6rQaQQ==
   dependencies:
-    "@chakra-ui/descendant" "3.0.9"
-    "@chakra-ui/icon" "3.0.10"
-    "@chakra-ui/react-context" "2.0.3"
-    "@chakra-ui/react-use-controllable-state" "2.0.4"
-    "@chakra-ui/react-use-merge-refs" "2.0.3"
-    "@chakra-ui/transition" "2.0.9"
+    "@chakra-ui/image" "2.0.12"
+    "@chakra-ui/react-children-utils" "2.0.4"
+    "@chakra-ui/react-context" "2.0.5"
 
-"@chakra-ui/alert@2.0.10":
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/alert/-/alert-2.0.10.tgz#81fe7ae87cfa5f48154b26b501c8a7246cfca77e"
-  integrity sha512-6g3i+eXPFQtC7tRNQnuzQg/AlbqpfjSKDq37myklArA+zh0EMyv3jQSDETVOvT6h2ItZe6nGNpg+EraXkrcqdA==
+"@chakra-ui/breadcrumb@2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/breadcrumb/-/breadcrumb-2.1.1.tgz#e8a682a4909cf8ee5771f7b287524df2be383b8a"
+  integrity sha512-OSa+F9qJ1xmF0zVxC1GU46OWbbhGf0kurHioSB729d+tRw/OMzmqrrfCJ7KVUUN8NEnTZXT5FIgokMvHGEt+Hg==
   dependencies:
-    "@chakra-ui/icon" "3.0.10"
-    "@chakra-ui/react-context" "2.0.3"
-    "@chakra-ui/spinner" "2.0.9"
+    "@chakra-ui/react-children-utils" "2.0.4"
+    "@chakra-ui/react-context" "2.0.5"
 
-"@chakra-ui/anatomy@2.0.6":
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/anatomy/-/anatomy-2.0.6.tgz#83164841d27eaa271ffa747534519bcd323c312f"
-  integrity sha512-Vgop2FFdhVtX7BydjZdJWZAWy+DdXBU1IMaBppz6COaH+/7OXxoI2ec2bs17ehJyBO0M+ud3OLj5UCFQ79YsoQ==
+"@chakra-ui/breakpoint-utils@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/breakpoint-utils/-/breakpoint-utils-2.0.5.tgz#55b571038b66e9f6d41633c102ea904c679dac5c"
+  integrity sha512-8uhrckMwoR/powlAhxiFZPM0s8vn0B2yEyEaRcwpy5NmRAJSTEotC2WkSyQl/Cjysx9scredumB5g+fBX7IqGQ==
 
-"@chakra-ui/avatar@2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/avatar/-/avatar-2.1.0.tgz#009b4e126c58ef0183618cfbfb29f8e7e3357ee9"
-  integrity sha512-SRQeH6NNvIBgUc4OsO14ypvcn8I66ndw7r4piIkm+R2zqbYnrzpp1d2zNPNHkChc4xQY71/GenenYO5Fhsi2DA==
+"@chakra-ui/button@2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/button/-/button-2.0.12.tgz#17acba9997de005cf6ad0cd6a9821e11358bb537"
+  integrity sha512-SRW44nz3Jcbl0XkwCxqn1GE7cT/cqKALBMCnBxM5zXJqzMfYjuQHdtJA2AzX/WB3qKab1GJK4rXCV37h4l3Q3Q==
   dependencies:
-    "@chakra-ui/image" "2.0.10"
-    "@chakra-ui/react-children-utils" "2.0.1"
-    "@chakra-ui/react-context" "2.0.3"
+    "@chakra-ui/react-context" "2.0.5"
+    "@chakra-ui/react-use-merge-refs" "2.0.5"
+    "@chakra-ui/spinner" "2.0.11"
 
-"@chakra-ui/breadcrumb@2.0.9":
-  version "2.0.9"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/breadcrumb/-/breadcrumb-2.0.9.tgz#357e4e2a50cdad87c0b3b59656aafa85671e6142"
-  integrity sha512-cc3WbxrJNRUph4v45qCdcIKJI0xECeV9VikQNIactBB+iexN4d+5P66xZABAkD8wWGmyH5KuSZcd9sFYNmC13w==
+"@chakra-ui/card@2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/card/-/card-2.1.1.tgz#b981a68d81d0f6447eb0d4d3fdcd7846bab2111f"
+  integrity sha512-vvmfuNn6gkfv6bGcXQe6kvWHspziPZgYnnffiEjPaZYtaf98WRszpjyPbFv0oQR/2H1RSE1oaTqa/J1rHrzw3A==
   dependencies:
-    "@chakra-ui/react-children-utils" "2.0.1"
-    "@chakra-ui/react-context" "2.0.3"
+    "@chakra-ui/react-context" "2.0.5"
 
-"@chakra-ui/breakpoint-utils@2.0.3":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/breakpoint-utils/-/breakpoint-utils-2.0.3.tgz#af7f7603f31a7d8d0166307a47e88cf5902401b4"
-  integrity sha512-smi41ZtaiPw4mXaCgicyAh5M45Drt20wypThP+qQUT2CQ51UFZhYlItRA2lCXKQ9QB83POcHPC/oAwIsNOAfTg==
-
-"@chakra-ui/button@2.0.10":
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/button/-/button-2.0.10.tgz#432051952fa074fd9eee8c4c6c7a6d67895b3ea2"
-  integrity sha512-8M3tCDvEUtIMzQt2ra1ZlJmoFm3zZyNIJsljKP5dUqOqs8MSWcOOIAs/6l8NSj/vZm/zARTIeiyd8SbkDl7yyQ==
+"@chakra-ui/checkbox@2.2.4":
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/checkbox/-/checkbox-2.2.4.tgz#e8cff67382165085c45b2618b74cee9da0355c04"
+  integrity sha512-yNuUFFBuFu9Sih8DlqOn+SLj2RtpVGebePkwUqSRQygMfveFYuWYWt1sbrFYyt0KmIBq0OkucUMy4OnkErUOHQ==
   dependencies:
-    "@chakra-ui/react-context" "2.0.3"
-    "@chakra-ui/react-use-merge-refs" "2.0.3"
-    "@chakra-ui/spinner" "2.0.9"
-
-"@chakra-ui/checkbox@2.2.0":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/checkbox/-/checkbox-2.2.0.tgz#aeec60c0486e4a0913d9a32708607417c99aefdd"
-  integrity sha512-zocyPl07W2LPLheqQUCC86gZuTFbZAAmymxNtZ4RFyYlQ4JEGYCV9LCQ+1LhwIv13lGCX7paKuy/EmYGQOKcjw==
-  dependencies:
-    "@chakra-ui/form-control" "2.0.10"
-    "@chakra-ui/react-context" "2.0.3"
-    "@chakra-ui/react-types" "2.0.3"
-    "@chakra-ui/react-use-callback-ref" "2.0.3"
-    "@chakra-ui/react-use-controllable-state" "2.0.4"
-    "@chakra-ui/react-use-merge-refs" "2.0.3"
-    "@chakra-ui/react-use-safe-layout-effect" "2.0.1"
-    "@chakra-ui/react-use-update-effect" "2.0.3"
-    "@chakra-ui/visually-hidden" "2.0.10"
+    "@chakra-ui/form-control" "2.0.12"
+    "@chakra-ui/react-context" "2.0.5"
+    "@chakra-ui/react-types" "2.0.4"
+    "@chakra-ui/react-use-callback-ref" "2.0.5"
+    "@chakra-ui/react-use-controllable-state" "2.0.6"
+    "@chakra-ui/react-use-merge-refs" "2.0.5"
+    "@chakra-ui/react-use-safe-layout-effect" "2.0.3"
+    "@chakra-ui/react-use-update-effect" "2.0.5"
+    "@chakra-ui/visually-hidden" "2.0.13"
     "@zag-js/focus-visible" "0.1.0"
 
-"@chakra-ui/clickable@2.0.9":
-  version "2.0.9"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/clickable/-/clickable-2.0.9.tgz#c06486d36f4a4cb517ea75176e05021dfde117cd"
-  integrity sha512-tGXYM6M6I954fif98QkNu5M76oBZmksCTj2mILOan9/BSimpFpu06aPGX3ZIkNsz300nIObn0FdtMvKpIEQueA==
+"@chakra-ui/clickable@2.0.11":
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/clickable/-/clickable-2.0.11.tgz#d0afcdb40ed1b1ceeabb4ac3e9f2f51fd3cbdac7"
+  integrity sha512-5Y2dl5cxNgOxHbjxyxsL6Vdze4wUUvwsMCCW3kXwgz2OUI2y5UsBZNcvhNJx3RchJEd0fylMKiKoKmnZMHN2aw==
   dependencies:
-    "@chakra-ui/react-use-merge-refs" "2.0.3"
+    "@chakra-ui/react-use-merge-refs" "2.0.5"
 
-"@chakra-ui/close-button@2.0.10":
+"@chakra-ui/close-button@2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/close-button/-/close-button-2.0.12.tgz#a981fd96abc8bfe6b50428aba5d46b80ef0ce798"
+  integrity sha512-34rOJ+NDdkhaP1CI0bP5jmE4KCmvgaxxuI5Ano52XHRnFad4ghqqSZ0oae7RqNMcxRK4YNX8JYtj6xdQsfc6kA==
+  dependencies:
+    "@chakra-ui/icon" "3.0.12"
+
+"@chakra-ui/color-mode@2.1.10":
+  version "2.1.10"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/color-mode/-/color-mode-2.1.10.tgz#8d446550af80cf01a2ccd7470861cb0180112049"
+  integrity sha512-aUPouOUPn7IPm1v00/9AIkRuNrkCwJlbjVL1kJzLzxijYjbHvEHPxntITt+JWjtXPT8xdOq6mexLYCOGA67JwQ==
+  dependencies:
+    "@chakra-ui/react-use-safe-layout-effect" "2.0.3"
+
+"@chakra-ui/control-box@2.0.11":
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/control-box/-/control-box-2.0.11.tgz#b2deec368fc83f6675964785f823e4c0c1f5d4ac"
+  integrity sha512-UJb4vqq+/FPuwTCuaPeHa2lwtk6u7eFvLuwDCST2e/sBWGJC1R+1/Il5pHccnWs09FWxyZ9v/Oxkg/CG3jZR4Q==
+
+"@chakra-ui/counter@2.0.11":
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/counter/-/counter-2.0.11.tgz#b49aa76423e5f4a4a8e717750c190fa5050a3dca"
+  integrity sha512-1YRt/jom+m3iWw9J9trcM6rAHDvD4lwThiO9raxUK7BRsYUhnPZvsMpcXU1Moax218C4rRpbI9KfPLaig0m1xQ==
+  dependencies:
+    "@chakra-ui/number-utils" "2.0.5"
+    "@chakra-ui/react-use-callback-ref" "2.0.5"
+
+"@chakra-ui/css-reset@2.0.10":
   version "2.0.10"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/close-button/-/close-button-2.0.10.tgz#30c143682edc13e458270cb3ec2bc80780408830"
-  integrity sha512-uD0I1HyyGpKLoIYDOd+1/LdY2sKL5KXNgoyapc6uX0lSz/eohNwV9ivFHPtPalFR//KPlqs+DKw3DOQ38X8z0A==
+  resolved "https://registry.yarnpkg.com/@chakra-ui/css-reset/-/css-reset-2.0.10.tgz#cb6cd97ee38f8069789f08c31a828bf3a7e339ea"
+  integrity sha512-FwHOfw2P4ckbpSahDZef2KoxcvHPUg09jlicWdp24/MjdsOO5PAB/apm2UBvQflY4WAJyOqYaOdnXFlR6nF4cQ==
+
+"@chakra-ui/descendant@3.0.11":
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/descendant/-/descendant-3.0.11.tgz#cb8bca7b6e8915afc58cdb1444530a2d1b03efd3"
+  integrity sha512-sNLI6NS6uUgrvYS6Imhoc1YlI6bck6pfxMBJcnXVSfdIjD6XjCmeY2YgzrtDS+o+J8bB3YJeIAG/vsVy5USE5Q==
   dependencies:
-    "@chakra-ui/icon" "3.0.10"
+    "@chakra-ui/react-context" "2.0.5"
+    "@chakra-ui/react-use-merge-refs" "2.0.5"
 
-"@chakra-ui/color-mode@2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/color-mode/-/color-mode-2.1.8.tgz#887325572cd64da0a063d063df631c74fd25de2e"
-  integrity sha512-IjHrdHHKG3lpCsiS7GR4TL58c0q++eL6/WrWMz2Pd6tnFFIgymacMiq7i+uNRPyvmrIhMxOMQWYlu+7dH2HzAg==
-  dependencies:
-    "@chakra-ui/react-use-safe-layout-effect" "2.0.1"
-
-"@chakra-ui/control-box@2.0.9":
-  version "2.0.9"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/control-box/-/control-box-2.0.9.tgz#b3cd98ceb1ce683c00445ab7469e65ba3d90c3cc"
-  integrity sha512-/viS9OBah1wCLNZbgfwkoQOnVRUYgp8Gypjqk9QNQwnNdFUTEgWc1RWN+1RYO85esJzHLkA2hZFIrYu1TZeZ6g==
-
-"@chakra-ui/counter@2.0.9":
-  version "2.0.9"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/counter/-/counter-2.0.9.tgz#b1b7c74c4e5d1ac506d699d93da57d535370a702"
-  integrity sha512-LuqtpyxCOZM19gAmV0vtVeaFd9ccPmEjoGJQ0NoO8CFheltgLC/7m/8YpDbgWiG4+BAkTUfIG+5nLg5hwvvQxw==
-  dependencies:
-    "@chakra-ui/number-utils" "2.0.3"
-    "@chakra-ui/react-use-callback-ref" "2.0.3"
-
-"@chakra-ui/css-reset@2.0.7":
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/css-reset/-/css-reset-2.0.7.tgz#28f4284c36230e30892dc3f2de2464aaacc4f623"
-  integrity sha512-ztGdFQ6U1hX2k6a3HZ8D3A/dZWVxlGe2F5mvUrRU554mFWBYmsq0ydZ7UBEPlykv9NoCz4nN8VCkIxcKJ3p29Q==
-
-"@chakra-ui/descendant@3.0.9":
-  version "3.0.9"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/descendant/-/descendant-3.0.9.tgz#6574a1ce00067c49a070c5b005f8f1ca399006ea"
-  integrity sha512-30E5yMWvxgBx43PoI/67r9h9OhbpDfLb/MLOCjtEwebSbD0V5+fmnmCoUELScQbhozQVjA9t195X6UP0VQWj8w==
-  dependencies:
-    "@chakra-ui/react-context" "2.0.3"
-    "@chakra-ui/react-use-merge-refs" "2.0.3"
-
-"@chakra-ui/dom-utils@2.0.2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/dom-utils/-/dom-utils-2.0.2.tgz#5a90916bd64c12fe202b7844052035311669aa2a"
-  integrity sha512-beTUYmewFppJZrEaHVkl1mj9UwJKjQQj+1S+Qh7ZtIp8ZWwBFyzs9YwXI56QAcL4vTxsnig7znpvkgv8MeF9ew==
-
-"@chakra-ui/editable@2.0.11":
-  version "2.0.11"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/editable/-/editable-2.0.11.tgz#1568b2450ed71693c9936054e9b393208b087adf"
-  integrity sha512-QFD1BZSFc6P05dgSJrclgzUB94jZmcG4xG0brIJgySQIYK4SNfSABO7uZ5lYWew6sAuZcCTXBmG2L/2I495Alg==
-  dependencies:
-    "@chakra-ui/react-context" "2.0.3"
-    "@chakra-ui/react-types" "2.0.3"
-    "@chakra-ui/react-use-callback-ref" "2.0.3"
-    "@chakra-ui/react-use-controllable-state" "2.0.4"
-    "@chakra-ui/react-use-focus-on-pointer-down" "2.0.2"
-    "@chakra-ui/react-use-merge-refs" "2.0.3"
-    "@chakra-ui/react-use-safe-layout-effect" "2.0.1"
-    "@chakra-ui/react-use-update-effect" "2.0.3"
-    "@chakra-ui/shared-utils" "2.0.1"
-
-"@chakra-ui/event-utils@2.0.4":
+"@chakra-ui/dom-utils@2.0.4":
   version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/event-utils/-/event-utils-2.0.4.tgz#eeb3eb4f37c3828955dbbc182ea43a8a3238a599"
-  integrity sha512-J2YgAM5Dw9hMkwfMsWhsiAG848GfTMxNclUIUcgV9RQhLEs0eTFhelzNiKVOMA3vBxlT6lOARuRun/ESiFZgGg==
+  resolved "https://registry.yarnpkg.com/@chakra-ui/dom-utils/-/dom-utils-2.0.4.tgz#367fffecbd287e16836e093d4030dc6e3785d402"
+  integrity sha512-P936+WKinz5fgHzfwiUQjE/t7NC8bU89Tceim4tbn8CIm/9b+CsHX64eNw4vyJqRwt78TXQK7aGBIbS18R0q5Q==
 
-"@chakra-ui/focus-lock@2.0.11":
-  version "2.0.11"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/focus-lock/-/focus-lock-2.0.11.tgz#3cd66ef8fb84af819aa6db79f28fbd3d3354a24e"
-  integrity sha512-o2GlpJleSFvs6KYWlS4KP5H0KHBy37r7E2ALcuDb3dNZbR/1UMJhR1lguPMys4ybfZzu0kHGqKpuWwDUPIB4eg==
+"@chakra-ui/editable@2.0.15":
+  version "2.0.15"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/editable/-/editable-2.0.15.tgz#bef548de7b35e4107e04aeeb0747e448af4a36fd"
+  integrity sha512-Xb/hxMhguZmmGrdAosRAIRy70n7RSxoDWULojV+22ysWvqO8X+TkkwnF36XQX7c/V7F/yY0UqOXZWqdeoNqWPw==
   dependencies:
-    "@chakra-ui/dom-utils" "2.0.2"
+    "@chakra-ui/react-context" "2.0.5"
+    "@chakra-ui/react-types" "2.0.4"
+    "@chakra-ui/react-use-callback-ref" "2.0.5"
+    "@chakra-ui/react-use-controllable-state" "2.0.6"
+    "@chakra-ui/react-use-focus-on-pointer-down" "2.0.4"
+    "@chakra-ui/react-use-merge-refs" "2.0.5"
+    "@chakra-ui/react-use-safe-layout-effect" "2.0.3"
+    "@chakra-ui/react-use-update-effect" "2.0.5"
+    "@chakra-ui/shared-utils" "2.0.3"
+
+"@chakra-ui/event-utils@2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/event-utils/-/event-utils-2.0.6.tgz#5e04d68ea070ef52ce212c2a99be9afcc015cfaf"
+  integrity sha512-ZIoqUbgJ5TcCbZRchMv4n7rOl1JL04doMebED88LO5mux36iVP9er/nnOY4Oke1bANKKURMrQf5VTT9hoYeA7A==
+
+"@chakra-ui/focus-lock@2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/focus-lock/-/focus-lock-2.0.13.tgz#19d6ca35555965a9aaa241b991a67bbc875ee53d"
+  integrity sha512-AVSJt+3Ukia/m9TCZZgyWvTY7pw88jArivWVJ2gySGYYIs6z/FJMnlwbCVldV2afS0g3cYaii7aARb/WrlG34Q==
+  dependencies:
+    "@chakra-ui/dom-utils" "2.0.4"
     react-focus-lock "^2.9.1"
 
-"@chakra-ui/form-control@2.0.10":
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/form-control/-/form-control-2.0.10.tgz#b279c51728a53d2e448736a5cdbea6cb53d3e394"
-  integrity sha512-3WhEWCWxd9ee10I5e4nu3Sq90EXa7Xyvv60gFu2rghhd5Z5TA87j3Mod/aRMQ/1/NzCE+zNRSeWgIdKbWMjqpQ==
+"@chakra-ui/form-control@2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/form-control/-/form-control-2.0.12.tgz#8c8d7e90ed2bfc8ed06bde6b566de808b31cdd94"
+  integrity sha512-rSnAStY0qodnxiiL9MkS7wMBls+aG9yevq/yIuuETC42XfBNndKu7MLHFEKFIpAMuZvNocJtB+sP8qpe8jLolg==
   dependencies:
-    "@chakra-ui/icon" "3.0.10"
-    "@chakra-ui/react-context" "2.0.3"
-    "@chakra-ui/react-types" "2.0.3"
-    "@chakra-ui/react-use-merge-refs" "2.0.3"
+    "@chakra-ui/icon" "3.0.12"
+    "@chakra-ui/react-context" "2.0.5"
+    "@chakra-ui/react-types" "2.0.4"
+    "@chakra-ui/react-use-merge-refs" "2.0.5"
 
-"@chakra-ui/hooks@2.0.10":
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/hooks/-/hooks-2.0.10.tgz#43ceef03c2def98c2add470f7056eae268c113e1"
-  integrity sha512-oVL8UpHC+oqs7hl6gphDMahwfq+fpWDDstw8RVHcy7+twJXkn+0KTexP029z69JoyMCj3yHCRCGcljgV7VCoZA==
+"@chakra-ui/hooks@2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/hooks/-/hooks-2.1.2.tgz#1e413f6624e97b854569e8a19846c9162a4ec153"
+  integrity sha512-/vDBOqqnho9q++lay0ZcvnH8VuE0wT2OkZj+qDwFwjiHAtGPVxHCSpu9KC8BIHME5TlWjyO6riVyUCb2e2ip6w==
   dependencies:
-    "@chakra-ui/react-utils" "2.0.7"
-    "@chakra-ui/utils" "2.0.10"
+    "@chakra-ui/react-utils" "2.0.9"
+    "@chakra-ui/utils" "2.0.12"
     compute-scroll-into-view "1.0.14"
     copy-to-clipboard "3.3.1"
 
-"@chakra-ui/icon@3.0.10":
-  version "3.0.10"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/icon/-/icon-3.0.10.tgz#1a11b5edb42a8af7aa5b6dec2bf2c6c4df1869fc"
-  integrity sha512-utO569d9bptEraJrEhuImfNzQ8v+a8PsQh8kTsodCzg8B16R3t5TTuoqeJqS6Nq16Vq6w87QbX3/4A73CNK5fw==
+"@chakra-ui/icon@3.0.12":
+  version "3.0.12"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/icon/-/icon-3.0.12.tgz#04f5b38591c4ff1cc922c14f814ce6b5d67525d9"
+  integrity sha512-VbUqgMcoZ26P1MtZdUqlxAKYDi1Bt8sSPNRID8QOwWfqyRYrbzabORVhKR3gpi6GaINjm7KRHIXHarj3u6EWdA==
   dependencies:
-    "@chakra-ui/shared-utils" "2.0.1"
+    "@chakra-ui/shared-utils" "2.0.3"
 
-"@chakra-ui/image@2.0.10":
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/image/-/image-2.0.10.tgz#712c0e1c579d959225bd8316d8d8f66cbeb95bb8"
-  integrity sha512-Atc1bdog4V5xv7IbpF2F2UkKWfgG/TD74cIac09JuSpQcYyh7lrJ7iVvhTkeP+LDdCs+QCD7SnTUM4Y0ZlaHbA==
+"@chakra-ui/image@2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/image/-/image-2.0.12.tgz#e90b1d2a5f87fff90b1ef86ca75bfe6b44ac545d"
+  integrity sha512-uclFhs0+wq2qujGu8Wk4eEWITA3iZZQTitGiFSEkO9Ws5VUH+Gqtn3mUilH0orubrI5srJsXAmjVTuVwge1KJQ==
   dependencies:
-    "@chakra-ui/react-use-safe-layout-effect" "2.0.1"
+    "@chakra-ui/react-use-safe-layout-effect" "2.0.3"
 
-"@chakra-ui/input@2.0.10":
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/input/-/input-2.0.10.tgz#f00466daacd5e1d24aca59f326c8e9d7fcb92919"
-  integrity sha512-7+/iHdIqUST6KIRW/7JKoDus7a/8ynUsqkid8zTcbgxw8LTPkxA5aHplYLQTHfrhEqLeqP43nmt6nBsCpPt2dA==
+"@chakra-ui/input@2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/input/-/input-2.0.13.tgz#6d445bccfb9e59eada70e9a8e47fecda7bfe03a4"
+  integrity sha512-28K033kg+9SpU0/HCvcAcY42JQPTpSR7ytcZV+6i/MBvGR72Dsf4JJQuQIcAtEW1lH0l/OpbY6ozhaoRW5NhdQ==
   dependencies:
-    "@chakra-ui/form-control" "2.0.10"
-    "@chakra-ui/object-utils" "2.0.3"
-    "@chakra-ui/react-children-utils" "2.0.1"
-    "@chakra-ui/react-context" "2.0.3"
-    "@chakra-ui/shared-utils" "2.0.1"
+    "@chakra-ui/form-control" "2.0.12"
+    "@chakra-ui/object-utils" "2.0.5"
+    "@chakra-ui/react-children-utils" "2.0.4"
+    "@chakra-ui/react-context" "2.0.5"
+    "@chakra-ui/shared-utils" "2.0.3"
 
-"@chakra-ui/layout@2.1.7":
-  version "2.1.7"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/layout/-/layout-2.1.7.tgz#a273a220a1001d145ca96f3c88edad90ed0f7ec8"
-  integrity sha512-KOPTh1T71HiWA3YjHpXmZx/sSXSMKJJc+E+1QRrhOoUPwwEW0jLLpiKGLmelmmB+ZrMMWaq8io0du038xPqkGg==
+"@chakra-ui/layout@2.1.10":
+  version "2.1.10"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/layout/-/layout-2.1.10.tgz#fa9b177ecc32c674ba2208e52faa57ae877bbdb5"
+  integrity sha512-9WlbZGIg0TMIwnxuCuZfkE7HJUInL5qRWgw9I3U960/4GYZRrlcxx8I1ZuHNww0FdItNrlnYLXEfXP77uU779w==
   dependencies:
-    "@chakra-ui/breakpoint-utils" "2.0.3"
-    "@chakra-ui/icon" "3.0.10"
-    "@chakra-ui/object-utils" "2.0.3"
-    "@chakra-ui/react-children-utils" "2.0.1"
-    "@chakra-ui/react-context" "2.0.3"
-    "@chakra-ui/shared-utils" "2.0.1"
+    "@chakra-ui/breakpoint-utils" "2.0.5"
+    "@chakra-ui/icon" "3.0.12"
+    "@chakra-ui/object-utils" "2.0.5"
+    "@chakra-ui/react-children-utils" "2.0.4"
+    "@chakra-ui/react-context" "2.0.5"
+    "@chakra-ui/shared-utils" "2.0.3"
 
-"@chakra-ui/lazy-utils@2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/lazy-utils/-/lazy-utils-2.0.1.tgz#6814836552028fa0823563ce3d39d22bccb203e1"
-  integrity sha512-986YjYq+hEzHDLZiqYlYbdqfiKdC3h2g896Eoe5K2UXtAVxqZI3UOnMH781X6N1R7rGJWquskzG681qFigW/BA==
+"@chakra-ui/lazy-utils@2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/lazy-utils/-/lazy-utils-2.0.3.tgz#5ba459a2541ad0c98cd98b20a8054664c129e9b4"
+  integrity sha512-SQ5I5rJrcHpVUcEftHLOh8UyeY+06R8Gv3k2RjcpvM6mb2Gktlz/4xl2GcUh3LWydgGQDW/7Rse5rQhKWgzmcg==
 
-"@chakra-ui/live-region@2.0.9":
-  version "2.0.9"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/live-region/-/live-region-2.0.9.tgz#f26cf1b96df51515cd3a0897f9516f8b5f6bbfec"
-  integrity sha512-ilbo/C5wcUoSHDU5owFPQP3KsabPYGzDEbwV+Z76BlyNdFN2PD0j13RGEH+sBNNZ3HzLyyuuc1YmkVcJi7ycQg==
+"@chakra-ui/live-region@2.0.11":
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/live-region/-/live-region-2.0.11.tgz#1008c5b629aa4120e5158be53f13d8d34bc2d71a"
+  integrity sha512-ltObaKQekP75GCCbN+vt1/mGABSCaRdQELmotHTBc5AioA3iyCDHH69ev+frzEwLvKFqo+RomAdAAgqBIMJ02Q==
 
-"@chakra-ui/media-query@3.2.6":
-  version "3.2.6"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/media-query/-/media-query-3.2.6.tgz#7de9e1ddac367bcdda4e70e3bb7293bb2322e36f"
-  integrity sha512-2GS48Zv7tRZYRdnBa3JaAh1u7C2hlWFa+g8ussbgy+Noduop5ZHpMFhI0S5qzj4UBzYD7mcF+K1yZY6h1DZrow==
+"@chakra-ui/media-query@3.2.8":
+  version "3.2.8"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/media-query/-/media-query-3.2.8.tgz#7d5feccb7ac52891426c060dd2ed1df37420956d"
+  integrity sha512-djmEg/eJ5Qrjn7SArTqjsvlwF6mNeMuiawrTwnU+0EKq9Pq/wVSb7VaIhxdQYJLA/DbRhE/KPMogw1LNVKa4Rw==
   dependencies:
-    "@chakra-ui/breakpoint-utils" "2.0.3"
-    "@chakra-ui/react-env" "2.0.9"
+    "@chakra-ui/breakpoint-utils" "2.0.5"
+    "@chakra-ui/react-env" "2.0.11"
 
-"@chakra-ui/menu@2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/menu/-/menu-2.1.0.tgz#14891c7d3000acacf3213696cd1ed3b6c84029e2"
-  integrity sha512-FEoXrN63hyNaf04CQe7Eg14tWN/e4brpTaKVakfP/h76CxLjokrcr2wF0zGZHuMO4YHBKj4QHNCyuBZHSY+9BQ==
+"@chakra-ui/menu@2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/menu/-/menu-2.1.4.tgz#821d246ecbf4c734f8ab93ad399c22a7b5e0fa1a"
+  integrity sha512-7kEM5dCSBMXig3iyvsSxzYi/7zkmaf843zoxb7QTB7sRB97wrCxIE8yy1/73YTzxOP3zdAyITPcxNJ/bkiVptQ==
   dependencies:
-    "@chakra-ui/clickable" "2.0.9"
-    "@chakra-ui/descendant" "3.0.9"
-    "@chakra-ui/lazy-utils" "2.0.1"
-    "@chakra-ui/popper" "3.0.7"
-    "@chakra-ui/react-children-utils" "2.0.1"
-    "@chakra-ui/react-context" "2.0.3"
-    "@chakra-ui/react-use-animation-state" "2.0.4"
-    "@chakra-ui/react-use-controllable-state" "2.0.4"
-    "@chakra-ui/react-use-disclosure" "2.0.4"
-    "@chakra-ui/react-use-focus-effect" "2.0.4"
-    "@chakra-ui/react-use-merge-refs" "2.0.3"
-    "@chakra-ui/react-use-outside-click" "2.0.3"
-    "@chakra-ui/react-use-update-effect" "2.0.3"
-    "@chakra-ui/transition" "2.0.9"
+    "@chakra-ui/clickable" "2.0.11"
+    "@chakra-ui/descendant" "3.0.11"
+    "@chakra-ui/lazy-utils" "2.0.3"
+    "@chakra-ui/popper" "3.0.9"
+    "@chakra-ui/react-children-utils" "2.0.4"
+    "@chakra-ui/react-context" "2.0.5"
+    "@chakra-ui/react-use-animation-state" "2.0.6"
+    "@chakra-ui/react-use-controllable-state" "2.0.6"
+    "@chakra-ui/react-use-disclosure" "2.0.6"
+    "@chakra-ui/react-use-focus-effect" "2.0.7"
+    "@chakra-ui/react-use-merge-refs" "2.0.5"
+    "@chakra-ui/react-use-outside-click" "2.0.5"
+    "@chakra-ui/react-use-update-effect" "2.0.5"
+    "@chakra-ui/transition" "2.0.12"
 
-"@chakra-ui/modal@2.2.0":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/modal/-/modal-2.2.0.tgz#99517a51446179489137ddfaf91809b392530f59"
-  integrity sha512-ekACl6VGRU4Du1JeEMRwLrp3VPZyrUsV1K8zhSh3BQjRtPNv71xqJ7wqvGljHNyIi7IL2VDwwxoDz1WhY34FIw==
+"@chakra-ui/modal@2.2.3":
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/modal/-/modal-2.2.3.tgz#b99ba69cd3fcf1a9ca12f0ae9cea7136b1338726"
+  integrity sha512-fSpnFiI3rlif5ynyO3P8A1S/97B/SOFUrIuNaJnhKSgiu7VtklPjiPWHCw5Y+ktEvagDXEmkpztcfMBPTY0wIA==
   dependencies:
-    "@chakra-ui/close-button" "2.0.10"
-    "@chakra-ui/focus-lock" "2.0.11"
-    "@chakra-ui/portal" "2.0.9"
-    "@chakra-ui/react-context" "2.0.3"
-    "@chakra-ui/react-types" "2.0.3"
-    "@chakra-ui/react-use-merge-refs" "2.0.3"
-    "@chakra-ui/transition" "2.0.9"
+    "@chakra-ui/close-button" "2.0.12"
+    "@chakra-ui/focus-lock" "2.0.13"
+    "@chakra-ui/portal" "2.0.11"
+    "@chakra-ui/react-context" "2.0.5"
+    "@chakra-ui/react-types" "2.0.4"
+    "@chakra-ui/react-use-merge-refs" "2.0.5"
+    "@chakra-ui/transition" "2.0.12"
     aria-hidden "^1.1.1"
     react-remove-scroll "^2.5.4"
 
-"@chakra-ui/number-input@2.0.11":
-  version "2.0.11"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/number-input/-/number-input-2.0.11.tgz#8dfaf8387a4fac17a1e29703002afd1910608e0f"
-  integrity sha512-SUxpWJ0Ou4kgOQORePqMKHiD76jl19ujNZ9sRk7VkQNbWrzi9CcxnbuyHOc6vSJogCFXsuN06MR0AYR7qpewXg==
-  dependencies:
-    "@chakra-ui/counter" "2.0.9"
-    "@chakra-ui/form-control" "2.0.10"
-    "@chakra-ui/icon" "3.0.10"
-    "@chakra-ui/react-context" "2.0.3"
-    "@chakra-ui/react-types" "2.0.3"
-    "@chakra-ui/react-use-callback-ref" "2.0.3"
-    "@chakra-ui/react-use-event-listener" "2.0.3"
-    "@chakra-ui/react-use-interval" "2.0.1"
-    "@chakra-ui/react-use-merge-refs" "2.0.3"
-    "@chakra-ui/react-use-safe-layout-effect" "2.0.1"
-    "@chakra-ui/react-use-update-effect" "2.0.3"
-
-"@chakra-ui/number-utils@2.0.3":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/number-utils/-/number-utils-2.0.3.tgz#2cf1190647ac5a17c90baaf8176226a98eb3bfff"
-  integrity sha512-oN03kYAUCCp/FNtpLr5mh+cvd/sRTzZWTBoFydmxc955psXq/X950gzs6o5kzoeFCpgXaxMmHAXQm3ReEK2NsQ==
-
-"@chakra-ui/object-utils@2.0.3":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/object-utils/-/object-utils-2.0.3.tgz#0bc8d1c7c452fe1ce8fcda439336e0392e867d7e"
-  integrity sha512-36prckrqTynVD/JTzyCr8OCWVOrMs/awZo3djVbIiNxRIcJ5iEwUVy26h3MWN4ENSopipBtxNfAwPNTLU5Si/g==
-
-"@chakra-ui/pin-input@2.0.13":
+"@chakra-ui/number-input@2.0.13":
   version "2.0.13"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/pin-input/-/pin-input-2.0.13.tgz#2f2c168066eaed63a100315202be97a6a1e60271"
-  integrity sha512-YpO2dyrTv4yskuEFxxadCjSIwhDcqtWOmx9GyQohGECKMjcQA8GW5d0F2XOu9P31MNaCO0+xJXWBF1z9PLEZSw==
+  resolved "https://registry.yarnpkg.com/@chakra-ui/number-input/-/number-input-2.0.13.tgz#4dd3abae17e74749a3d52cfc3a7718e6cc18042a"
+  integrity sha512-Kn6PKLkGl+5hrMoeaGGN19qVHHJB79G4c0rfkWPjDWKsgpbCwHQctLJwrkxuwGAn1iWzw4WL31lsb+o6ZRQHbA==
   dependencies:
-    "@chakra-ui/descendant" "3.0.9"
-    "@chakra-ui/react-children-utils" "2.0.1"
-    "@chakra-ui/react-context" "2.0.3"
-    "@chakra-ui/react-use-controllable-state" "2.0.4"
-    "@chakra-ui/react-use-merge-refs" "2.0.3"
+    "@chakra-ui/counter" "2.0.11"
+    "@chakra-ui/form-control" "2.0.12"
+    "@chakra-ui/icon" "3.0.12"
+    "@chakra-ui/react-context" "2.0.5"
+    "@chakra-ui/react-types" "2.0.4"
+    "@chakra-ui/react-use-callback-ref" "2.0.5"
+    "@chakra-ui/react-use-event-listener" "2.0.5"
+    "@chakra-ui/react-use-interval" "2.0.3"
+    "@chakra-ui/react-use-merge-refs" "2.0.5"
+    "@chakra-ui/react-use-safe-layout-effect" "2.0.3"
+    "@chakra-ui/react-use-update-effect" "2.0.5"
 
-"@chakra-ui/popover@2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/popover/-/popover-2.1.0.tgz#a67cf5a10167eeb130ddf5362929e7d5d1df0958"
-  integrity sha512-HvHo7pWtxhxpkUoFogL2gCP6Qe8FodIvD1DSG56ngvDZ5eCA9fpN4rhKLksi0obdjakaRq+xq8AFlWPRTp4tDA==
-  dependencies:
-    "@chakra-ui/close-button" "2.0.10"
-    "@chakra-ui/lazy-utils" "2.0.1"
-    "@chakra-ui/popper" "3.0.7"
-    "@chakra-ui/react-context" "2.0.3"
-    "@chakra-ui/react-types" "2.0.3"
-    "@chakra-ui/react-use-animation-state" "2.0.4"
-    "@chakra-ui/react-use-disclosure" "2.0.4"
-    "@chakra-ui/react-use-focus-effect" "2.0.4"
-    "@chakra-ui/react-use-focus-on-pointer-down" "2.0.2"
-    "@chakra-ui/react-use-merge-refs" "2.0.3"
+"@chakra-ui/number-utils@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/number-utils/-/number-utils-2.0.5.tgz#c7595fc919fca7c43fe172bfd6c5197c653ee572"
+  integrity sha512-Thhohnlqze0i5HBJO9xkfOPq1rv3ji/hNPf2xh1fh4hxrNzdm3HCkz0c6lyRQwGuVoeltEHysYZLH/uWLFTCSQ==
 
-"@chakra-ui/popper@3.0.7":
-  version "3.0.7"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/popper/-/popper-3.0.7.tgz#af3428bf5d64ad9372210a70181f69a9d79eefb2"
-  integrity sha512-xLYhuNsk1gOjymtek1ZdZlG21hmg2a7Iu2KsD9Hi7+aUxc2K5/XxX+/vyjjz8u4s0gmj83pTqnauQRynb/TCXA==
+"@chakra-ui/object-utils@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/object-utils/-/object-utils-2.0.5.tgz#231602066ddb96ae91dcc7da243b97ad46972398"
+  integrity sha512-/rIMoYI3c2uLtFIrnTFOPRAI8StUuu335WszqKM0KAW1lwG9H6uSbxqlpZT1Pxi/VQqZKfheGiMQOx5lfTmM/A==
+
+"@chakra-ui/pin-input@2.0.16":
+  version "2.0.16"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/pin-input/-/pin-input-2.0.16.tgz#d31a6e2bce85aa2d1351ccb4cd9bf7a5134d3fb9"
+  integrity sha512-51cioNYpBSgi9/jq6CrzoDvo8fpMwFXu3SaFRbKO47s9Dz/OAW0MpjyabTfSpwOv0xKZE+ayrYGJopCzZSWXPg==
   dependencies:
-    "@chakra-ui/react-types" "2.0.3"
-    "@chakra-ui/react-use-merge-refs" "2.0.3"
+    "@chakra-ui/descendant" "3.0.11"
+    "@chakra-ui/react-children-utils" "2.0.4"
+    "@chakra-ui/react-context" "2.0.5"
+    "@chakra-ui/react-use-controllable-state" "2.0.6"
+    "@chakra-ui/react-use-merge-refs" "2.0.5"
+
+"@chakra-ui/popover@2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/popover/-/popover-2.1.3.tgz#8769ed50db2c2188faf6725c248004a1f73f2725"
+  integrity sha512-3CbeXjpCYnKyq5Z2IqUyfXZYpi5GzmPQZqzS2/kuJwgTuSjtuQovX0QI7oNE4zv4r6yEABW/kVrI7pn0/Tet1Q==
+  dependencies:
+    "@chakra-ui/close-button" "2.0.12"
+    "@chakra-ui/lazy-utils" "2.0.3"
+    "@chakra-ui/popper" "3.0.9"
+    "@chakra-ui/react-context" "2.0.5"
+    "@chakra-ui/react-types" "2.0.4"
+    "@chakra-ui/react-use-animation-state" "2.0.6"
+    "@chakra-ui/react-use-disclosure" "2.0.6"
+    "@chakra-ui/react-use-focus-effect" "2.0.7"
+    "@chakra-ui/react-use-focus-on-pointer-down" "2.0.4"
+    "@chakra-ui/react-use-merge-refs" "2.0.5"
+
+"@chakra-ui/popper@3.0.9":
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/popper/-/popper-3.0.9.tgz#5e810e67573c99cbb6fe79869ab76340359e857a"
+  integrity sha512-xtQ1SXxKyDFY3jWNXxr6xdiGQ8mCI5jaw+c2CWKp/bb8FnASXEFLWIlmWx8zxkE1BbPMszWHnaGF8uCBRjmQMA==
+  dependencies:
+    "@chakra-ui/react-types" "2.0.4"
+    "@chakra-ui/react-use-merge-refs" "2.0.5"
     "@popperjs/core" "^2.9.3"
 
-"@chakra-ui/portal@2.0.9":
-  version "2.0.9"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/portal/-/portal-2.0.9.tgz#b427c383a9d602c5b52b21312b4b1c0ffecaf583"
-  integrity sha512-9e9S0MLbkpofPGlyYA12jNYSdndugy6ylPi5pC9nr3/VqG2Kn+8VcBChAeXW8K4ms7WFc74rNX1pBY/UVwr4qg==
-  dependencies:
-    "@chakra-ui/react-context" "2.0.3"
-    "@chakra-ui/react-use-safe-layout-effect" "2.0.1"
-
-"@chakra-ui/progress@2.0.10":
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/progress/-/progress-2.0.10.tgz#9191ae9061ef08066d37c5cb8341fedc10214a29"
-  integrity sha512-my0Pi3NG1PYhlvCav4fybg3gL5HBNe+7lO4PVdri4QHEyfJlrDeBWID+1GgqlpUWdTj3sOf7ysku+FEgkeOeSA==
-  dependencies:
-    "@chakra-ui/react-context" "2.0.3"
-
-"@chakra-ui/provider@2.0.18":
-  version "2.0.18"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/provider/-/provider-2.0.18.tgz#b98f06975752eab21df797d0bd7e75dffb7c9230"
-  integrity sha512-eKRhMV4yiTzemD+zDk20BQ4osCfxm+jpKYXvVdOsrINdDDj4WB+yTgHBcQI4xhUaVN5bXt86/TWgK4JnWcvC3Q==
-  dependencies:
-    "@chakra-ui/css-reset" "2.0.7"
-    "@chakra-ui/portal" "2.0.9"
-    "@chakra-ui/react-env" "2.0.9"
-    "@chakra-ui/system" "2.2.11"
-    "@chakra-ui/utils" "2.0.10"
-
-"@chakra-ui/radio@2.0.11":
+"@chakra-ui/portal@2.0.11":
   version "2.0.11"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/radio/-/radio-2.0.11.tgz#e52142140c2aa00fa758f504cef1c83513be0b2d"
-  integrity sha512-QWrWGyNCj9vNIiya+/0h4EKTRE77PJQHomDYcwgabHmMMcC1k5ZGktXZRODTLTJ8BOWCcyiM+gg19k+arU88jg==
+  resolved "https://registry.yarnpkg.com/@chakra-ui/portal/-/portal-2.0.11.tgz#7a6b3ebc621bb28b46550fcfb36b94926d0111a5"
+  integrity sha512-Css61i4WKzKO8ou1aGjBzcsXMy9LnfnpkOFfvaNCpUUNEd6c47z6+FhZNq7Gc38PGNjSfMLAd4LmH+H0ZanYIA==
   dependencies:
-    "@chakra-ui/form-control" "2.0.10"
-    "@chakra-ui/react-context" "2.0.3"
-    "@chakra-ui/react-types" "2.0.3"
-    "@chakra-ui/react-use-merge-refs" "2.0.3"
+    "@chakra-ui/react-context" "2.0.5"
+    "@chakra-ui/react-use-safe-layout-effect" "2.0.3"
+
+"@chakra-ui/progress@2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/progress/-/progress-2.1.1.tgz#b94399af12e9324737f9e690201f78546572ac59"
+  integrity sha512-ddAXaYGNObGqH1stRAYxkdospf6J4CDOhB0uyw9BeHRSsYkCUQWkUBd/melJuZeGHEH2ItF9T7FZ4JhcepP3GA==
+  dependencies:
+    "@chakra-ui/react-context" "2.0.5"
+
+"@chakra-ui/provider@2.0.23":
+  version "2.0.23"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/provider/-/provider-2.0.23.tgz#da00642637a8c72be724acb7e17d5fe57547a0de"
+  integrity sha512-oYrvBivTsmBZ7NOyvctOmj+p2dDbRioe0S77S51G9iS+aGTh37W10HgaT0zyrDuZQVARoF9RUyOB5T6vuqwdCQ==
+  dependencies:
+    "@chakra-ui/css-reset" "2.0.10"
+    "@chakra-ui/portal" "2.0.11"
+    "@chakra-ui/react-env" "2.0.11"
+    "@chakra-ui/system" "2.3.3"
+    "@chakra-ui/utils" "2.0.12"
+
+"@chakra-ui/radio@2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/radio/-/radio-2.0.13.tgz#3f6dec6886c4d046e7567e1bb929f32e8091c5b7"
+  integrity sha512-P8mbdCZY9RG5034o1Tvy1/p573cHWDyzYuG8DtdEydiP6KGwaFza16/5N0slLY1BQwClIRmImLLw4vI+76J8XA==
+  dependencies:
+    "@chakra-ui/form-control" "2.0.12"
+    "@chakra-ui/react-context" "2.0.5"
+    "@chakra-ui/react-types" "2.0.4"
+    "@chakra-ui/react-use-merge-refs" "2.0.5"
     "@zag-js/focus-visible" "0.1.0"
 
-"@chakra-ui/react-children-utils@2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/react-children-utils/-/react-children-utils-2.0.1.tgz#321ac05362ade1495a34ea74052d3c7da3d9e923"
-  integrity sha512-sEgpuh/vWSt2+W0F49EGYXXUyjmg0lbosjVg6qUKHv9sAyx5tbrOrZ6df/TaMUSAe9m3AUOMGqUIPLpxno0DjA==
-
-"@chakra-ui/react-context@2.0.3":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/react-context/-/react-context-2.0.3.tgz#e988be62f5f5fe29d6a8496c79cbf934f840fa5a"
-  integrity sha512-KmPq6sb1y05WsOUqXZtBBC4LsNKZIFrp2thTsLBwcuH7lkXZwPMHmJGKa9K980P+SWEgfH2s2PY2z+QrIuqWGg==
-
-"@chakra-ui/react-env@2.0.9":
-  version "2.0.9"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/react-env/-/react-env-2.0.9.tgz#d51efc31d77197a3526e2c4b2f2fde557396bb3c"
-  integrity sha512-4AJHNUGBR19hzVyOILYpZZgq8jGrpEcbhvR++CppbvPH7vfPZpoz6L/cBtHxS07YwDtUeBL8yCNiLlTxctV//Q==
-
-"@chakra-ui/react-types@2.0.3":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/react-types/-/react-types-2.0.3.tgz#dc454c4703b4de585e6461fd607304ede06fe595"
-  integrity sha512-1mJYOQldFTALE0Wr3j6tk/MYvgQIp6CKkJulNzZrI8QN+ox/bJOh8OVP4vhwqvfigdLTui0g0k8M9h+j2ub/Mw==
-
-"@chakra-ui/react-use-animation-state@2.0.4":
+"@chakra-ui/react-children-utils@2.0.4":
   version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-animation-state/-/react-use-animation-state-2.0.4.tgz#ac95e7fc9a0175eb6f423cca2c039101ff6996e2"
-  integrity sha512-ozmFvKq/Kwq68A3bu+Ek9ONUBHsU00Gi0LNzzCErL6OnZe0FZlC8tyia+/RkPYq3Dx91K7oFB4Uk+eqtMRa6TQ==
-  dependencies:
-    "@chakra-ui/dom-utils" "2.0.2"
-    "@chakra-ui/react-use-event-listener" "2.0.3"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-children-utils/-/react-children-utils-2.0.4.tgz#6e4284297a8a9b4e6f5f955b099bb6c2c6bbf8b9"
+  integrity sha512-qsKUEfK/AhDbMexWo5JhmdlkxLg5WEw2dFh4XorvU1/dTYsRfP6cjFfO8zE+X3F0ZFNsgKz6rbN5oU349GLEFw==
 
-"@chakra-ui/react-use-callback-ref@2.0.3":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-callback-ref/-/react-use-callback-ref-2.0.3.tgz#532f993ae0dda27b2638d41e98f42c83751cd3b6"
-  integrity sha512-kdYlhgnQKWWLNwl3WSv/Oq3+mlnu2p3y4Xc1AqKVHVcBOdQE9lpW3d7ZaOoK2aIXXWq1rocscOiXBUtM0Vqd2A==
+"@chakra-ui/react-context@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-context/-/react-context-2.0.5.tgz#c434013ecc46c780539791d756dafdfc7c64320e"
+  integrity sha512-WYS0VBl5Q3/kNShQ26BP+Q0OGMeTQWco3hSiJWvO2wYLY7N1BLq6dKs8vyKHZfpwKh2YL2bQeAObi+vSkXp6tQ==
 
-"@chakra-ui/react-use-controllable-state@2.0.4":
+"@chakra-ui/react-env@2.0.11":
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-env/-/react-env-2.0.11.tgz#d9d65fb695de7aff15e1d0e97d57bb7bedce5fa2"
+  integrity sha512-rPwUHReSWh7rbCw0HePa8Pvc+Q82fUFvVjHTIbXKnE6d+01cCE7j4f1NLeRD9pStKPI6sIZm9xTGvOCzl8F8iw==
+
+"@chakra-ui/react-types@2.0.4":
   version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-controllable-state/-/react-use-controllable-state-2.0.4.tgz#aa1fb1b238a8297edc750726e52968540b323897"
-  integrity sha512-7JXsDVL11ge1rjge+rBP4JWyaNxf7WsaqK0iY8ac7SwVHJGtNzKBcIKsT+HXCyF1D0hdpIxAZ71cjnlTpM4zOw==
-  dependencies:
-    "@chakra-ui/react-use-callback-ref" "2.0.3"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-types/-/react-types-2.0.4.tgz#b88152cbd2c04e51a422986185e2a4ba9b645fb7"
+  integrity sha512-kYhuSStw9pIJXrmQB7/J1u90bst31pEx9r25pyDG/rekk8E9JuqBR+z+UWODTFx00V2rtWCcJS5rPbONgvWX0A==
 
-"@chakra-ui/react-use-disclosure@2.0.4":
+"@chakra-ui/react-use-animation-state@2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-animation-state/-/react-use-animation-state-2.0.6.tgz#2a324d3c67015a542ed589f899672d681889e1e7"
+  integrity sha512-M2kUzZkSBgDpfvnffh3kTsMIM3Dvn+CTMqy9zfY97NL4P3LAWL1MuFtKdlKfQ8hs/QpwS/ew8CTmCtaywn4sKg==
+  dependencies:
+    "@chakra-ui/dom-utils" "2.0.4"
+    "@chakra-ui/react-use-event-listener" "2.0.5"
+
+"@chakra-ui/react-use-callback-ref@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-callback-ref/-/react-use-callback-ref-2.0.5.tgz#862430dfbab8e1f0b8e04476e5e25469bd044ec9"
+  integrity sha512-vKnXleD2PzB0nGabY35fRtklMid4z7cecbMG0fkasNNsgWmrQcXJOuEKUUVCynL6FBU6gBnpKFi5Aqj6x+K4tw==
+
+"@chakra-ui/react-use-controllable-state@2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-controllable-state/-/react-use-controllable-state-2.0.6.tgz#ec62aff9b9c00324a0a4c9a4523824a9ad5ef9aa"
+  integrity sha512-7WuKrhQkpSRoiI5PKBvuIsO46IIP0wsRQgXtStSaIXv+FIvIJl9cxQXTbmZ5q1Ds641QdAUKx4+6v0K/zoZEHg==
+  dependencies:
+    "@chakra-ui/react-use-callback-ref" "2.0.5"
+
+"@chakra-ui/react-use-disclosure@2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-disclosure/-/react-use-disclosure-2.0.6.tgz#db707ee119db829e9b21ff1c05e867938f1e27ba"
+  integrity sha512-4UPePL+OcCY37KZ585iLjg8i6J0sjpLm7iZG3PUwmb97oKHVHq6DpmWIM0VfSjcT6AbSqyGcd5BXZQBgwt8HWQ==
+  dependencies:
+    "@chakra-ui/react-use-callback-ref" "2.0.5"
+
+"@chakra-ui/react-use-event-listener@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-event-listener/-/react-use-event-listener-2.0.5.tgz#949aa99878b25b23709452d3c80a1570c99747cc"
+  integrity sha512-etLBphMigxy/cm7Yg22y29gQ8u/K3PniR5ADZX7WVX61Cgsa8ciCqjTE9sTtlJQWAQySbWxt9+mjlT5zaf+6Zw==
+  dependencies:
+    "@chakra-ui/react-use-callback-ref" "2.0.5"
+
+"@chakra-ui/react-use-focus-effect@2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-focus-effect/-/react-use-focus-effect-2.0.7.tgz#bd03290cac32e0de6a71ce987f939a5e697bca04"
+  integrity sha512-wI8OUNwfbkusajLac8QtjfSyNmsNu1D5pANmnSHIntHhui6Jwv75Pxx7RgmBEnfBEpleBndhR9E75iCjPLhZ/A==
+  dependencies:
+    "@chakra-ui/dom-utils" "2.0.4"
+    "@chakra-ui/react-use-event-listener" "2.0.5"
+    "@chakra-ui/react-use-safe-layout-effect" "2.0.3"
+    "@chakra-ui/react-use-update-effect" "2.0.5"
+
+"@chakra-ui/react-use-focus-on-pointer-down@2.0.4":
   version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-disclosure/-/react-use-disclosure-2.0.4.tgz#5f1fb8de00992277c8e2f751fb14970a587c8a38"
-  integrity sha512-obHoBDGcrxgKnkQVAg6JENFe+cRMqoqa/5J6k3tPsDGRzRWSqHSuzRCCbC1FyRvb6XL34C6xZtOzw+kS/5nHRw==
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-focus-on-pointer-down/-/react-use-focus-on-pointer-down-2.0.4.tgz#aeba543c451ac1b0138093234e71d334044daf84"
+  integrity sha512-L3YKouIi77QbXH9mSLGEFzJbJDhyrPlcRcuu+TSC7mYaK9E+3Ap+RVSAVxj+CfQz7hCWpikPecKDuspIPWlyuA==
   dependencies:
-    "@chakra-ui/react-use-callback-ref" "2.0.3"
+    "@chakra-ui/react-use-event-listener" "2.0.5"
 
-"@chakra-ui/react-use-event-listener@2.0.3":
+"@chakra-ui/react-use-interval@2.0.3":
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-event-listener/-/react-use-event-listener-2.0.3.tgz#11b5409c4442888e7981d5288c9e781acdacd685"
-  integrity sha512-m3ZdJjo3QQ1HcQGnehlBTgHaCVewz5fwIRTXVzbZTraVJr4k589Zf87eagW57tT4dyv656lSmdhaFGZ8p5Snww==
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-interval/-/react-use-interval-2.0.3.tgz#d5c7bce117fb25edb54e3e2c666e900618bb5bb2"
+  integrity sha512-Orbij5c5QkL4NuFyU4mfY/nyRckNBgoGe9ic8574VVNJIXfassevZk0WB+lvqBn5XZeLf2Tj+OGJrg4j4H9wzw==
   dependencies:
-    "@chakra-ui/react-use-callback-ref" "2.0.3"
+    "@chakra-ui/react-use-callback-ref" "2.0.5"
 
-"@chakra-ui/react-use-focus-effect@2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-focus-effect/-/react-use-focus-effect-2.0.4.tgz#d6b1f6360c402b4b018c579981631a0c7c5f61a8"
-  integrity sha512-7BdXajSnv1UvDR/VQJoBDZT0Tl+kuuML3eldeZJG0RWkCu6n7K89gH97c+OMuF6lbKWzfsfzLtots3Quw3F8kQ==
-  dependencies:
-    "@chakra-ui/dom-utils" "2.0.2"
-    "@chakra-ui/react-use-event-listener" "2.0.3"
-    "@chakra-ui/react-use-update-effect" "2.0.3"
-
-"@chakra-ui/react-use-focus-on-pointer-down@2.0.2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-focus-on-pointer-down/-/react-use-focus-on-pointer-down-2.0.2.tgz#f02abb3cecad408677b5f4d2a9faf805537a2cfd"
-  integrity sha512-HA2fyUV+efCqBEMV3FZaDjk3cOGQLuqisGlYD4jE0rg4gOixmkdKma9JYmccUsuSZzDd5FXL0Cvn1siWMSNGvQ==
-  dependencies:
-    "@chakra-ui/react-use-event-listener" "2.0.3"
-
-"@chakra-ui/react-use-interval@2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-interval/-/react-use-interval-2.0.1.tgz#a8f5dbf83607f5dc53022aa2a766fdcb09d8a081"
-  integrity sha512-6ZLzKA7Ga894UZcXO3bbGYThlhviiau1oxZ1UcJG5pUXNM9Up7O/4Joq31sL+KcpteCN45vd1etomilsv/blxw==
-  dependencies:
-    "@chakra-ui/react-use-callback-ref" "2.0.3"
-
-"@chakra-ui/react-use-merge-refs@2.0.3":
+"@chakra-ui/react-use-latest-ref@2.0.3":
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-merge-refs/-/react-use-merge-refs-2.0.3.tgz#cd8dac79c62dd45daaf4acc4507721d23dc5dc51"
-  integrity sha512-n35BmVbasy5Esa6qxznWmiV3NaRxGpqMpZH0n+X7aXt8VkGAJzRpAVjUmKCLNYyCLpqsQceCmAEK8a5SR6vxqw==
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-latest-ref/-/react-use-latest-ref-2.0.3.tgz#27cf703858e65ecb5a0eef26215c794ad2a5353d"
+  integrity sha512-exNSQD4rPclDSmNwtcChUCJ4NuC2UJ4amyNGBqwSjyaK5jNHk2kkM7rZ6I0I8ul+26lvrXlSuhyv6c2PFwbFQQ==
 
-"@chakra-ui/react-use-outside-click@2.0.3":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-outside-click/-/react-use-outside-click-2.0.3.tgz#d0136d1c2fb45d86361224e98e3a50648bf9b85f"
-  integrity sha512-r5OohM8lOuZTz6e3vVHvfm/3sEkd06nUPBNU+r3rWh1I7bR9z5Gia/BOQD6GE4jUTanDkHcH76Pf9qJ45kpibQ==
-  dependencies:
-    "@chakra-ui/react-use-callback-ref" "2.0.3"
+"@chakra-ui/react-use-merge-refs@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-merge-refs/-/react-use-merge-refs-2.0.5.tgz#13181e1a43219c6a04a01f84de0188df042ee92e"
+  integrity sha512-uc+MozBZ8asaUpO8SWcK6D4svRPACN63jv5uosUkXJR+05jQJkUofkfQbf2HeGVbrWCr0XZsftLIm4Mt/QMoVw==
 
-"@chakra-ui/react-use-pan-event@2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-pan-event/-/react-use-pan-event-2.0.4.tgz#bfc2c1a2a44b2996951a729182566f02c7dc05e4"
-  integrity sha512-lcEjngfCgIjE5qZeJiaDx+aJzZPLjbjUmbWumi8pIgWOnDL8Ffjh7AMKW4CddP5OgcRnDDb+7aqJbb55wraboA==
+"@chakra-ui/react-use-outside-click@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-outside-click/-/react-use-outside-click-2.0.5.tgz#6a9896d2c2d35f3c301c3bb62bed1bf5290d1e60"
+  integrity sha512-WmtXUeVaMtxP9aUGGG+GQaDeUn/Bvf8TI3EU5mE1+TtqLHxyA9wtvQurynrogvpilLaBADwn/JeBeqs2wHpvqA==
   dependencies:
-    "@chakra-ui/event-utils" "2.0.4"
+    "@chakra-ui/react-use-callback-ref" "2.0.5"
+
+"@chakra-ui/react-use-pan-event@2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-pan-event/-/react-use-pan-event-2.0.6.tgz#e489d61672e6f473b7fd362d816e2e27ed3b2af6"
+  integrity sha512-Vtgl3c+Mj4hdehFRFIgruQVXctwnG1590Ein1FiU8sVnlqO6bpug6Z+B14xBa+F+X0aK+DxnhkJFyWI93Pks2g==
+  dependencies:
+    "@chakra-ui/event-utils" "2.0.6"
+    "@chakra-ui/react-use-latest-ref" "2.0.3"
     framesync "5.3.0"
 
-"@chakra-ui/react-use-previous@2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-previous/-/react-use-previous-2.0.1.tgz#e19f6b363271f62c36c9f3bd91dc60caa4c4e340"
-  integrity sha512-ROi+/puVd8D1QaxBSOcGlJNqV2x02ppSgmXzZZJhM8ryFLZjY9ojV3HhamB2IJ/7SIb1rMSSV1GPedFw7YMCwA==
-
-"@chakra-ui/react-use-safe-layout-effect@2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-safe-layout-effect/-/react-use-safe-layout-effect-2.0.1.tgz#76f8882abaf17078c3b6eb93e1bb26f8c319f3f7"
-  integrity sha512-H+ZOjkPqv3KBPEoP68JKpQBNdLOI0mwzEiTT397UdvBVCCJ+1/ijWVUT+Ub/pYic60O6xUghy5ORaWqJHhnKDA==
-
-"@chakra-ui/react-use-size@2.0.3":
+"@chakra-ui/react-use-previous@2.0.3":
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-size/-/react-use-size-2.0.3.tgz#ae3bd683eb87a40208cf0dd467a5dafb68d87b3e"
-  integrity sha512-hr4hKepPUmM2paXseSZiOTK2y+ZqnSzYNusDEB01f+cDerFjdN1jSfNJKXpiKF0+hNESXfOPQb3Zt0eDusRdoA==
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-previous/-/react-use-previous-2.0.3.tgz#9da3d53fd75f1c3da902bd6af71dcb1a7be37f31"
+  integrity sha512-A2ODOa0rm2HM4aqXfxxI0zPLcn5Q7iBEjRyfIQhb+EH+d2OFuj3L2slVoIpp6e/km3Xzv2d+u/WbjgTzdQ3d0w==
+
+"@chakra-ui/react-use-safe-layout-effect@2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-safe-layout-effect/-/react-use-safe-layout-effect-2.0.3.tgz#bf63ac8c94460aa1b20b6b601a0ea873556ffb1b"
+  integrity sha512-dlTvQURzmdfyBbNdydgO4Wy2/HV8aJN8LszTtyb5vRZsyaslDM/ftcxo8E8QjHwRLD/V1Epb/A8731QfimfVaQ==
+
+"@chakra-ui/react-use-size@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-size/-/react-use-size-2.0.5.tgz#4bbffb64f97dcfe1d7edeb0f03bb1d5fbc48df64"
+  integrity sha512-4arAApdiXk5uv5ZeFKltEUCs5h3yD9dp6gTIaXbAdq+/ENK3jMWTwlqzNbJtCyhwoOFrblLSdBrssBMIsNQfZQ==
   dependencies:
     "@zag-js/element-size" "0.1.0"
 
-"@chakra-ui/react-use-timeout@2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-timeout/-/react-use-timeout-2.0.1.tgz#acacadfb7c1443aacf634ddce710b1cd7cf3b6ec"
-  integrity sha512-zXh9RH+GciKr8hvaOADHOoHP72B7UZUEymA8CWCV4WEs/9s/PfQJH7X1bwvaj43CcOmfVQg4oODWqCYQM1lSsg==
-  dependencies:
-    "@chakra-ui/react-use-callback-ref" "2.0.3"
-
-"@chakra-ui/react-use-update-effect@2.0.3":
+"@chakra-ui/react-use-timeout@2.0.3":
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-update-effect/-/react-use-update-effect-2.0.3.tgz#5b0128fe1325b5b1413690db6bc8dd0712d01e29"
-  integrity sha512-8hkP1o/UUUA49w/R+XyAlPiCjxXTCWCNsHWUOEhAitjJfoCNUjgaNKOD52hT07kc5ACJEcJQHA5327LnwtiIlg==
-
-"@chakra-ui/react-utils@2.0.7":
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/react-utils/-/react-utils-2.0.7.tgz#5be991b6ba858fe481a3d454165f499f7f8de082"
-  integrity sha512-bgJbD0AINaRxFf0Ivx0YMZy9hWLGzJQCodMb7wOikhuPdPwYhn7csmQhDZ2C3ANjKe11VmslUiHbtp6l3jVNzA==
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-timeout/-/react-use-timeout-2.0.3.tgz#16ca397dbca55a64811575884cb81a348d86d4e2"
+  integrity sha512-rBBUkZSQq3nJQ8fuMkgZNY2Sgg4vKiKNp05GxAwlT7TitOfVZyoTriqQpqz296bWlmkICTZxlqCWfE5fWpsTsg==
   dependencies:
-    "@chakra-ui/utils" "2.0.10"
+    "@chakra-ui/react-use-callback-ref" "2.0.5"
 
-"@chakra-ui/react@2.3.4":
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/react/-/react-2.3.4.tgz#e3f7364e155b805fcaf1ef65c5e6e2db4f840563"
-  integrity sha512-b1jbDwl6EZICTh8IaMlsrYAATpT2SvZi2za+asBdDexmnP6ooW3NTKm/HaTikuQCaysfMUhztrbERmenWvOXzA==
-  dependencies:
-    "@chakra-ui/accordion" "2.1.0"
-    "@chakra-ui/alert" "2.0.10"
-    "@chakra-ui/avatar" "2.1.0"
-    "@chakra-ui/breadcrumb" "2.0.9"
-    "@chakra-ui/button" "2.0.10"
-    "@chakra-ui/checkbox" "2.2.0"
-    "@chakra-ui/close-button" "2.0.10"
-    "@chakra-ui/control-box" "2.0.9"
-    "@chakra-ui/counter" "2.0.9"
-    "@chakra-ui/css-reset" "2.0.7"
-    "@chakra-ui/editable" "2.0.11"
-    "@chakra-ui/form-control" "2.0.10"
-    "@chakra-ui/hooks" "2.0.10"
-    "@chakra-ui/icon" "3.0.10"
-    "@chakra-ui/image" "2.0.10"
-    "@chakra-ui/input" "2.0.10"
-    "@chakra-ui/layout" "2.1.7"
-    "@chakra-ui/live-region" "2.0.9"
-    "@chakra-ui/media-query" "3.2.6"
-    "@chakra-ui/menu" "2.1.0"
-    "@chakra-ui/modal" "2.2.0"
-    "@chakra-ui/number-input" "2.0.11"
-    "@chakra-ui/pin-input" "2.0.13"
-    "@chakra-ui/popover" "2.1.0"
-    "@chakra-ui/popper" "3.0.7"
-    "@chakra-ui/portal" "2.0.9"
-    "@chakra-ui/progress" "2.0.10"
-    "@chakra-ui/provider" "2.0.18"
-    "@chakra-ui/radio" "2.0.11"
-    "@chakra-ui/react-env" "2.0.9"
-    "@chakra-ui/select" "2.0.11"
-    "@chakra-ui/skeleton" "2.0.16"
-    "@chakra-ui/slider" "2.0.11"
-    "@chakra-ui/spinner" "2.0.9"
-    "@chakra-ui/stat" "2.0.10"
-    "@chakra-ui/switch" "2.0.12"
-    "@chakra-ui/system" "2.2.11"
-    "@chakra-ui/table" "2.0.10"
-    "@chakra-ui/tabs" "2.1.2"
-    "@chakra-ui/tag" "2.0.10"
-    "@chakra-ui/textarea" "2.0.11"
-    "@chakra-ui/theme" "2.1.12"
-    "@chakra-ui/toast" "3.0.12"
-    "@chakra-ui/tooltip" "2.1.0"
-    "@chakra-ui/transition" "2.0.9"
-    "@chakra-ui/utils" "2.0.10"
-    "@chakra-ui/visually-hidden" "2.0.10"
+"@chakra-ui/react-use-update-effect@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-update-effect/-/react-use-update-effect-2.0.5.tgz#aede8f13f2b3de254b4ffa3b8cec1b70bd2876c5"
+  integrity sha512-y9tCMr1yuDl8ATYdh64Gv8kge5xE1DMykqPDZw++OoBsTaWr3rx40wblA8NIWuSyJe5ErtKP2OeglvJkYhryJQ==
 
-"@chakra-ui/select@2.0.11":
-  version "2.0.11"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/select/-/select-2.0.11.tgz#d4234e89f531f7a185be8c6cad372de3dc6d7391"
-  integrity sha512-DlJVNwrM5Es45cKRBXSwSsIhPW2A7SRg5yYlIkEzMngFJ+v0HNkmTNEOI9nDDEuMWAsOfdbm/DKHmDOysJiZhw==
-  dependencies:
-    "@chakra-ui/form-control" "2.0.10"
-
-"@chakra-ui/shared-utils@2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/shared-utils/-/shared-utils-2.0.1.tgz#41e314e42c96039e8ffb265e73145cf755813ab4"
-  integrity sha512-NXDBl/u4wrSNp0ON5R3r3evkRurrAz2yuO7neooaG+O5HEenVouGqm4CsXd6lUAPmjwiGzA0LQFNCt0Hj92dXg==
-
-"@chakra-ui/skeleton@2.0.16":
-  version "2.0.16"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/skeleton/-/skeleton-2.0.16.tgz#7a62c7e11ab2d3a2bb68c0829e0a00c138a9692d"
-  integrity sha512-7paWdnrtOQTmuik+JF3HFi2dC4OOpwS+wv+oncJQxFLKjsv2NEObra3EDZ0SrvNviv2Yff2ufywCB/LC4i+DaA==
-  dependencies:
-    "@chakra-ui/media-query" "3.2.6"
-    "@chakra-ui/react-use-previous" "2.0.1"
-
-"@chakra-ui/slider@2.0.11":
-  version "2.0.11"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/slider/-/slider-2.0.11.tgz#ff90a8883d52af9d7f5362714b8e838a05d4d133"
-  integrity sha512-Ui+s8rtciA+do/iXxcP0rvitiwmPwZTNRBmWE9CGMZwWHebewzw82hbTgPKBBVxKO7s1YMVIndniARn1MQZ8bg==
-  dependencies:
-    "@chakra-ui/number-utils" "2.0.3"
-    "@chakra-ui/react-context" "2.0.3"
-    "@chakra-ui/react-types" "2.0.3"
-    "@chakra-ui/react-use-callback-ref" "2.0.3"
-    "@chakra-ui/react-use-controllable-state" "2.0.4"
-    "@chakra-ui/react-use-merge-refs" "2.0.3"
-    "@chakra-ui/react-use-pan-event" "2.0.4"
-    "@chakra-ui/react-use-size" "2.0.3"
-    "@chakra-ui/react-use-update-effect" "2.0.3"
-
-"@chakra-ui/spinner@2.0.9":
+"@chakra-ui/react-utils@2.0.9":
   version "2.0.9"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/spinner/-/spinner-2.0.9.tgz#1d8544cc136699a590c3f5c518ae2c14abb459cf"
-  integrity sha512-9ALl51fiVWptDu2J2xcv0TSfGf4buumpHrEXHvV2Qy+HZ6rYnUmSThBSb/VgoQS+rASG8bAbLUPlQTQ+v9ibFg==
-
-"@chakra-ui/stat@2.0.10":
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/stat/-/stat-2.0.10.tgz#5bf995b8e96c9c12ee63ce511626eb89f432a667"
-  integrity sha512-UilTt/VNSVMrzbcaoCQsz584R+Q9j66X+PtG2t2zgKb0mWHIiK6aimwixPwqdXYrXyImrx4V81jJJbCKostGpg==
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-utils/-/react-utils-2.0.9.tgz#5cdf0bc8dee57c15f15ace04fbba574ec8aa6ecc"
+  integrity sha512-nlwPBVlQmcl1PiLzZWyrT3FSnt3vKSkBMzQ0EF4SJWA/nOIqTvmffb5DCzCqPzgQaE/Da1Xgus+JufFGM8GLCQ==
   dependencies:
-    "@chakra-ui/icon" "3.0.10"
-    "@chakra-ui/react-context" "2.0.3"
+    "@chakra-ui/utils" "2.0.12"
 
-"@chakra-ui/styled-system@2.3.3":
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/styled-system/-/styled-system-2.3.3.tgz#6152739f817b6c6786a53c8388ea7ab5b338e7cc"
-  integrity sha512-gCvyJkooWeE8NE6uOSkCf/sje7MdM92rx58dDcfHhVer+eYxat4AW4G8i9Tjnk+FWvgiYdqr70+SBWzEmfqn6g==
+"@chakra-ui/react@^2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react/-/react-2.4.1.tgz#3f3db03e3aa7bcb0bee76427824b3437a9509166"
+  integrity sha512-qZVRrQi5JRIc44EaeOaXvXt6EdWhkQjhFFL8hyH0RH6cSFlotmmzCHBT5N1jC6nqXFn5OOxOWMD9FIVsbI56hQ==
+  dependencies:
+    "@chakra-ui/accordion" "2.1.3"
+    "@chakra-ui/alert" "2.0.12"
+    "@chakra-ui/avatar" "2.2.1"
+    "@chakra-ui/breadcrumb" "2.1.1"
+    "@chakra-ui/button" "2.0.12"
+    "@chakra-ui/card" "2.1.1"
+    "@chakra-ui/checkbox" "2.2.4"
+    "@chakra-ui/close-button" "2.0.12"
+    "@chakra-ui/control-box" "2.0.11"
+    "@chakra-ui/counter" "2.0.11"
+    "@chakra-ui/css-reset" "2.0.10"
+    "@chakra-ui/editable" "2.0.15"
+    "@chakra-ui/form-control" "2.0.12"
+    "@chakra-ui/hooks" "2.1.2"
+    "@chakra-ui/icon" "3.0.12"
+    "@chakra-ui/image" "2.0.12"
+    "@chakra-ui/input" "2.0.13"
+    "@chakra-ui/layout" "2.1.10"
+    "@chakra-ui/live-region" "2.0.11"
+    "@chakra-ui/media-query" "3.2.8"
+    "@chakra-ui/menu" "2.1.4"
+    "@chakra-ui/modal" "2.2.3"
+    "@chakra-ui/number-input" "2.0.13"
+    "@chakra-ui/pin-input" "2.0.16"
+    "@chakra-ui/popover" "2.1.3"
+    "@chakra-ui/popper" "3.0.9"
+    "@chakra-ui/portal" "2.0.11"
+    "@chakra-ui/progress" "2.1.1"
+    "@chakra-ui/provider" "2.0.23"
+    "@chakra-ui/radio" "2.0.13"
+    "@chakra-ui/react-env" "2.0.11"
+    "@chakra-ui/select" "2.0.13"
+    "@chakra-ui/skeleton" "2.0.18"
+    "@chakra-ui/slider" "2.0.13"
+    "@chakra-ui/spinner" "2.0.11"
+    "@chakra-ui/stat" "2.0.12"
+    "@chakra-ui/styled-system" "2.3.5"
+    "@chakra-ui/switch" "2.0.16"
+    "@chakra-ui/system" "2.3.3"
+    "@chakra-ui/table" "2.0.12"
+    "@chakra-ui/tabs" "2.1.5"
+    "@chakra-ui/tag" "2.0.12"
+    "@chakra-ui/textarea" "2.0.13"
+    "@chakra-ui/theme" "2.2.1"
+    "@chakra-ui/theme-utils" "2.0.4"
+    "@chakra-ui/toast" "4.0.3"
+    "@chakra-ui/tooltip" "2.2.1"
+    "@chakra-ui/transition" "2.0.12"
+    "@chakra-ui/utils" "2.0.12"
+    "@chakra-ui/visually-hidden" "2.0.13"
+
+"@chakra-ui/select@2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/select/-/select-2.0.13.tgz#60a7302f44e49fc22d251bbcdbae24ec64f5cc4c"
+  integrity sha512-5MHqD2OlnLdPt8FQVxfgMJZKOTdcbu3cMFGCS2X9XCxJQkQa4kPfXq3N6BRh5L5XFI+uRsmk6aYJoawZiwNJPg==
+  dependencies:
+    "@chakra-ui/form-control" "2.0.12"
+
+"@chakra-ui/shared-utils@2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/shared-utils/-/shared-utils-2.0.3.tgz#97cbc11282e381ebd9f581c603088f9d60ead451"
+  integrity sha512-pCU+SUGdXzjAuUiUT8mriekL3tJVfNdwSTIaNeip7k/SWDzivrKGMwAFBxd3XVTDevtVusndkO4GJuQ3yILzDg==
+
+"@chakra-ui/skeleton@2.0.18":
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/skeleton/-/skeleton-2.0.18.tgz#a2af241f0b1b692db4d10b90a887107a5e401c7d"
+  integrity sha512-qjcD8BgVx4kL8Lmb8EvmmDGM2ICl6CqhVE2LShJrgG7PDM6Rt6rYM617kqLurLYZjbJUiwgf9VXWifS0IpT31Q==
+  dependencies:
+    "@chakra-ui/media-query" "3.2.8"
+    "@chakra-ui/react-use-previous" "2.0.3"
+
+"@chakra-ui/slider@2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/slider/-/slider-2.0.13.tgz#5c64bb8346f5310688845fa72363b1a35bc1560b"
+  integrity sha512-MypqZrKFNFPH8p0d2g2DQacl5ylUQKlGKeBu099ZCmT687U2Su3cq1wOGNGnD6VZvtwDYMKXn7kXPSMW06aBcg==
+  dependencies:
+    "@chakra-ui/number-utils" "2.0.5"
+    "@chakra-ui/react-context" "2.0.5"
+    "@chakra-ui/react-types" "2.0.4"
+    "@chakra-ui/react-use-callback-ref" "2.0.5"
+    "@chakra-ui/react-use-controllable-state" "2.0.6"
+    "@chakra-ui/react-use-latest-ref" "2.0.3"
+    "@chakra-ui/react-use-merge-refs" "2.0.5"
+    "@chakra-ui/react-use-pan-event" "2.0.6"
+    "@chakra-ui/react-use-size" "2.0.5"
+    "@chakra-ui/react-use-update-effect" "2.0.5"
+
+"@chakra-ui/spinner@2.0.11":
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/spinner/-/spinner-2.0.11.tgz#a5dd76b6cb0f3524d9b90b73fa4acfb6adc69f33"
+  integrity sha512-piO2ghWdJzQy/+89mDza7xLhPnW7pA+ADNbgCb1vmriInWedS41IBKe+pSPz4IidjCbFu7xwKE0AerFIbrocCA==
+
+"@chakra-ui/stat@2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/stat/-/stat-2.0.12.tgz#bca87fb83c9bf2c365e8697f33f228721d9a6b28"
+  integrity sha512-3MTt4nA46AvlIuE6OP2O1Nna9+vcIZD1E9G4QLKwPoJ5pDHKcY4Y0t4oDdbawykthyj2fIBko7FiMIHTaAOjqg==
+  dependencies:
+    "@chakra-ui/icon" "3.0.12"
+    "@chakra-ui/react-context" "2.0.5"
+
+"@chakra-ui/styled-system@2.3.5":
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/styled-system/-/styled-system-2.3.5.tgz#88f1530d77c30285c6aa7c561d4bd770bebd705c"
+  integrity sha512-Xj78vEq/R+1OVx36tJnAb/vLtX6DD9k/yxj3lCigl3q5Qjr6aglPBjqHdfFbGaQeB0Gt4ABPyxUDO3sAhdxC4w==
   dependencies:
     csstype "^3.0.11"
     lodash.mergewith "4.6.2"
 
-"@chakra-ui/switch@2.0.12":
-  version "2.0.12"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/switch/-/switch-2.0.12.tgz#372333fab885fb9f46caa95ead37be85cf6b3913"
-  integrity sha512-VYWVGjmYBX/UgAKloB4Z2465DUmgIp0sSq3W2vVi+8oDutg62mqF/unWs0RGgR++h6w9YDtJeqIozzxY6f1hxA==
+"@chakra-ui/switch@2.0.16":
+  version "2.0.16"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/switch/-/switch-2.0.16.tgz#b8d1275d723d384a22fe8900fc2913a808b8ceaa"
+  integrity sha512-uLGjXHaxjCvf97jrwTuYtHSAzep/Mb8hSr/D1BRlBNz6E0kHGRaKANl/pAZAK1z7ZzvyYokK65Wpce2GQ4U/dQ==
   dependencies:
-    "@chakra-ui/checkbox" "2.2.0"
+    "@chakra-ui/checkbox" "2.2.4"
 
-"@chakra-ui/system@2.2.11":
-  version "2.2.11"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/system/-/system-2.2.11.tgz#88f600589d2349489b09e448e974bbaf93e173c9"
-  integrity sha512-m2L8fizAWk196TRY15eu+NoHEWvIDuxC8iFbmJk9LUJNakyiAHCEREC5AhFweBgGW5LhqZLvD34doCDCo+iDxg==
+"@chakra-ui/system@2.3.3":
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/system/-/system-2.3.3.tgz#1557f573a3394e375411631b0836f0e79c9f68f9"
+  integrity sha512-nOEXC08d4PiK/4QwSV4tnci2SoWjDHEVSveWW9qoRRr1iZUbQffpwYyJY4pBpPJE7CsA2w3GXK7NdMFRwPtamQ==
   dependencies:
-    "@chakra-ui/color-mode" "2.1.8"
-    "@chakra-ui/react-utils" "2.0.7"
-    "@chakra-ui/styled-system" "2.3.3"
-    "@chakra-ui/utils" "2.0.10"
+    "@chakra-ui/color-mode" "2.1.10"
+    "@chakra-ui/react-utils" "2.0.9"
+    "@chakra-ui/styled-system" "2.3.5"
+    "@chakra-ui/theme-utils" "2.0.4"
+    "@chakra-ui/utils" "2.0.12"
     react-fast-compare "3.2.0"
 
-"@chakra-ui/table@2.0.10":
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/table/-/table-2.0.10.tgz#81d17d2a6e5ace20155417124a20ff7e2bc6661d"
-  integrity sha512-UII+i5f1WS5hdqpGLlD2xT9Nm4tUiQPUW6wCV3/g2/29G/mcNu6TSahf6UljPgMjTowvgtId8kChWTyziRBkTw==
+"@chakra-ui/table@2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/table/-/table-2.0.12.tgz#387653cf660318b13086b6497aca2b671deb055a"
+  integrity sha512-TSxzpfrOoB+9LTdNTMnaQC6OTsp36TlCRxJ1+1nAiCmlk+m+FiNzTQsmBalDDhc29rm+6AdRsxSPsjGWB8YVwg==
   dependencies:
-    "@chakra-ui/react-context" "2.0.3"
+    "@chakra-ui/react-context" "2.0.5"
 
-"@chakra-ui/tabs@2.1.2":
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/tabs/-/tabs-2.1.2.tgz#1ca6ede845c0a80de92eb22b6a794ce321ab1a30"
-  integrity sha512-Yz4d/gtlzXPquCF6WdtySSZW/v+mGzNxohWW6v9H6tPNFHV+xS9L9gSFIfWl/0sTIUlcJqzlBFjs0W/yLNJzpQ==
+"@chakra-ui/tabs@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/tabs/-/tabs-2.1.5.tgz#827b0e71eb173c09c31dcbbe05fc1146f4267229"
+  integrity sha512-XmnKDclAJe0FoW4tdC8AlnZpPN5fcj92l4r2sqiL9WyYVEM71hDxZueETIph/GTtfMelG7Z8e5vBHP4rh1RT5g==
   dependencies:
-    "@chakra-ui/clickable" "2.0.9"
-    "@chakra-ui/descendant" "3.0.9"
-    "@chakra-ui/lazy-utils" "2.0.1"
-    "@chakra-ui/react-children-utils" "2.0.1"
-    "@chakra-ui/react-context" "2.0.3"
-    "@chakra-ui/react-use-controllable-state" "2.0.4"
-    "@chakra-ui/react-use-merge-refs" "2.0.3"
-    "@chakra-ui/react-use-safe-layout-effect" "2.0.1"
+    "@chakra-ui/clickable" "2.0.11"
+    "@chakra-ui/descendant" "3.0.11"
+    "@chakra-ui/lazy-utils" "2.0.3"
+    "@chakra-ui/react-children-utils" "2.0.4"
+    "@chakra-ui/react-context" "2.0.5"
+    "@chakra-ui/react-use-controllable-state" "2.0.6"
+    "@chakra-ui/react-use-merge-refs" "2.0.5"
+    "@chakra-ui/react-use-safe-layout-effect" "2.0.3"
 
-"@chakra-ui/tag@2.0.10":
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/tag/-/tag-2.0.10.tgz#681e78b0fafc002b02eb2205427ea2e0c266078c"
-  integrity sha512-DEiuuZ2BRDp9XkK1tbcdI7gso6XdvC019YGc7bC9as1uz42X6Sr11jqRZFrgI2ctxOoy9UECJEFUhFDCnWvukg==
+"@chakra-ui/tag@2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/tag/-/tag-2.0.12.tgz#8f8e838efc1c9c504c92bbfd36f2435e8cdcfa6d"
+  integrity sha512-LmPnE6aFF0pfscgYRKZbkWvG7detszwNdcmalQJdp2C8E/xuqi9Vj9RWU/bmRyWHJN+8R603mvPVWj5oN0rarA==
   dependencies:
-    "@chakra-ui/icon" "3.0.10"
-    "@chakra-ui/react-context" "2.0.3"
+    "@chakra-ui/icon" "3.0.12"
+    "@chakra-ui/react-context" "2.0.5"
 
-"@chakra-ui/textarea@2.0.11":
-  version "2.0.11"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/textarea/-/textarea-2.0.11.tgz#b89b3a6a8889ba0c1b7c4ac7fa50a659cc8303e9"
-  integrity sha512-bZ511W7RZhuk/U9EFJOUl6aFsXgkxNuWz11q/WHhcXIRsBzQ7yax1LDpe8WlXcszB8uK1e2sWFWveVbt4Jyu/w==
+"@chakra-ui/textarea@2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/textarea/-/textarea-2.0.13.tgz#ff32e3ad61880b13514df1c6f6b62176e8f91823"
+  integrity sha512-tMiBGimVB+Z8T+yAQ4E45ECmCix0Eisuukf4wUBOpdSRWaArpAoA4RuA34z7OoMbNa3fxEVcvnd2apX1InBtsQ==
   dependencies:
-    "@chakra-ui/form-control" "2.0.10"
+    "@chakra-ui/form-control" "2.0.12"
 
-"@chakra-ui/theme-tools@2.0.11":
-  version "2.0.11"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/theme-tools/-/theme-tools-2.0.11.tgz#de97b422799627b5a514ae424ca08c1d348bc2a5"
-  integrity sha512-0Juf98bAyOgnBeQ39nMKWqRsOxZDw75BbAB8o0oVyjhYVS1wJh7tFX1ZRV8N/+AN6fuRXEznZPpyUh3J+ZTiRg==
+"@chakra-ui/theme-tools@2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/theme-tools/-/theme-tools-2.0.13.tgz#cde5503b4044832ab659904281e8a260deae73bb"
+  integrity sha512-Dvai4lljtrs9f2aha3b9yajmxroNaVGNvkKkwh77dRW2jcNNBXepkGWfNLXVkP68Yydz5O+Lt5DKvETrEho9cQ==
   dependencies:
-    "@chakra-ui/anatomy" "2.0.6"
+    "@chakra-ui/anatomy" "2.1.0"
     "@ctrl/tinycolor" "^3.4.0"
 
-"@chakra-ui/theme@2.1.12":
-  version "2.1.12"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/theme/-/theme-2.1.12.tgz#bb4ffe38849a5f7163895f74a08a06aa916fe020"
-  integrity sha512-2RaXPJB6FDtw9qMUbK2CMVZSdHmDfoq/Ud2karYallz6QdrsQaE/6SzqGeXB7J2ZuA886bprmXxstpVOfv/BJg==
+"@chakra-ui/theme-utils@2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/theme-utils/-/theme-utils-2.0.4.tgz#7357dd03734bc74d3a8be09db19d6b73c8f34075"
+  integrity sha512-vrYuZxzc31c1bevfJRCk4j68dUw4Bxt6QAm3RZcUQyvTnS6q5FhMz+R1X6vS3+IfIhSscZFxwRQSp/TpyY4Vtw==
   dependencies:
-    "@chakra-ui/anatomy" "2.0.6"
-    "@chakra-ui/theme-tools" "2.0.11"
+    "@chakra-ui/styled-system" "2.3.5"
+    "@chakra-ui/theme" "2.2.1"
+    lodash.mergewith "4.6.2"
 
-"@chakra-ui/toast@3.0.12":
-  version "3.0.12"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/toast/-/toast-3.0.12.tgz#40ef386199dd1f1da9b43b555c011bffa7f6519f"
-  integrity sha512-WxG/E6JOzWDKFieKYq6ninr6Syhyii+YuVkd6pE9QIA3U02Bcd6/tIFr6MszACpG5s4QphEPb98wjTSL7YM85w==
+"@chakra-ui/theme@2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/theme/-/theme-2.2.1.tgz#83f5e484640bf8d97075f9fa3ca41f02c5caf3f7"
+  integrity sha512-6qEJMfnTjB5vGoY1kO/fDarK0Ivrb77UzDw8rY0aTHbjLJkOVxtd7d2H7m8xufh6gecCI5HuXqq8I297pLYm+w==
   dependencies:
-    "@chakra-ui/alert" "2.0.10"
-    "@chakra-ui/close-button" "2.0.10"
-    "@chakra-ui/portal" "2.0.9"
-    "@chakra-ui/react-use-timeout" "2.0.1"
-    "@chakra-ui/react-use-update-effect" "2.0.3"
-    "@chakra-ui/theme" "2.1.12"
+    "@chakra-ui/anatomy" "2.1.0"
+    "@chakra-ui/theme-tools" "2.0.13"
 
-"@chakra-ui/tooltip@2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/tooltip/-/tooltip-2.1.0.tgz#6319d44a99ffd1818f386213c242427674bb23e6"
-  integrity sha512-eR2O8776VhyX6NSWxE5L+Jnp03nHAU4T7+74vMaLatWGFdTB0QSHisJzMhu9RpE6YWoKx3BfZ9IE/1rTYESrNQ==
+"@chakra-ui/toast@4.0.3":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/toast/-/toast-4.0.3.tgz#7304228663495d39fd4bd72ffc320f5a279265ac"
+  integrity sha512-n6kShxGrHikrJO1vC5cPFbvz5LjG56NhVch3tmyk2g2yrJ87zbNGQqQ2BlLuJcEVFDu3tu+wC1qHdXs8WU4bjg==
   dependencies:
-    "@chakra-ui/popper" "3.0.7"
-    "@chakra-ui/portal" "2.0.9"
-    "@chakra-ui/react-types" "2.0.3"
-    "@chakra-ui/react-use-disclosure" "2.0.4"
-    "@chakra-ui/react-use-event-listener" "2.0.3"
-    "@chakra-ui/react-use-merge-refs" "2.0.3"
+    "@chakra-ui/alert" "2.0.12"
+    "@chakra-ui/close-button" "2.0.12"
+    "@chakra-ui/portal" "2.0.11"
+    "@chakra-ui/react-use-timeout" "2.0.3"
+    "@chakra-ui/react-use-update-effect" "2.0.5"
+    "@chakra-ui/styled-system" "2.3.5"
+    "@chakra-ui/theme" "2.2.1"
 
-"@chakra-ui/transition@2.0.9":
-  version "2.0.9"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/transition/-/transition-2.0.9.tgz#1967fd77f44b57681a9efe4e87561c82420cd2a2"
-  integrity sha512-cVfKdZl128AEj0LDS8M9dzXao4wmTVj3gRJBnm91Qcg243Pm8OlgIBNbHEwsq/Fps+PsN431BtEGfL4w79wQEA==
+"@chakra-ui/tooltip@2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/tooltip/-/tooltip-2.2.1.tgz#ee08a7759f2b88bdc5d73b4e459bee3256ba5bcb"
+  integrity sha512-X/VIYgegx1Ab6m0PSI/iISo/hRAe4Xv+hOwinIxIUUkLS8EOtBvq4RhlB6ieFn8jAAPDzPKJW6QFqz8ecJdUiw==
+  dependencies:
+    "@chakra-ui/popper" "3.0.9"
+    "@chakra-ui/portal" "2.0.11"
+    "@chakra-ui/react-types" "2.0.4"
+    "@chakra-ui/react-use-disclosure" "2.0.6"
+    "@chakra-ui/react-use-event-listener" "2.0.5"
+    "@chakra-ui/react-use-merge-refs" "2.0.5"
 
-"@chakra-ui/utils@2.0.10":
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/utils/-/utils-2.0.10.tgz#72e870f53753fd2d8c5f9258c76e8d59959bc1ce"
-  integrity sha512-OIHrAPwAMVLrsZmYkCvmUr5bu5ZoDkgmoqRTKNvYLA/1iODsYQHRhG+0WJBKh/x0orVld8sCLKqjo4bXPA1QIg==
+"@chakra-ui/transition@2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/transition/-/transition-2.0.12.tgz#876c6ed24e442a720a8570490a93cb1f87008700"
+  integrity sha512-ff6eU+m08ccYfCkk0hKfY/XlmGxCrfbBgsKgV4mirZ4SKUL1GVye8CYuHwWQlBJo+8s0yIpsTNxAuX4n/cW9/w==
+
+"@chakra-ui/utils@2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/utils/-/utils-2.0.12.tgz#5ab8a4529fca68d9f8c6722004f6a5129b0b75e9"
+  integrity sha512-1Z1MgsrfMQhNejSdrPJk8v5J4gCefHo+1wBmPPHTz5bGEbAAbZ13aXAfXy8w0eFy0Nvnawn0EHW7Oynp/MdH+Q==
   dependencies:
     "@types/lodash.mergewith" "4.6.6"
     css-box-model "1.2.1"
     framesync "5.3.0"
     lodash.mergewith "4.6.2"
 
-"@chakra-ui/visually-hidden@2.0.10":
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/@chakra-ui/visually-hidden/-/visually-hidden-2.0.10.tgz#3e85e9fb48ccc419392cb0d97bd8fd45bb37aa1c"
-  integrity sha512-uNjwYwi6IugGJSXoZtCjVRekvAU7PZv928SagWtA+TaCLux/8cyNwLSRMdUdku3krPXRh8sIhGnUjqyHdjbuAA==
+"@chakra-ui/visually-hidden@2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/visually-hidden/-/visually-hidden-2.0.13.tgz#6553467d93f206d17716bcbe6e895a84eef87472"
+  integrity sha512-sDEeeEjLfID333EC46NdCbhK2HyMXlpl5HzcJjuwWIpyVz4E1gKQ9hlwpq6grijvmzeSywQ5D3tTwUrvZck4KQ==
 
 "@csstools/selector-specificity@^2.0.1":
   version "2.0.2"
@@ -1089,34 +1137,34 @@
   dependencies:
     tslib "^2.0.0"
 
-"@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==
+"@emotion/babel-plugin@^11.10.5":
+  version "11.10.5"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz#65fa6e1790ddc9e23cc22658a4c5dea423c55c3c"
+  integrity sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==
   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"
+    "@emotion/serialize" "^1.1.1"
     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"
+    stylis "4.1.3"
 
-"@emotion/cache@^11.10.0":
-  version "11.10.3"
-  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.3.tgz#c4f67904fad10c945fea5165c3a5a0583c164b87"
-  integrity sha512-Psmp/7ovAa8appWh3g51goxu/z3iVms7JXOreq136D8Bbn6dYraPnmL6mdM8GThEx9vwSn92Fz+mGSjBzN8UPQ==
+"@emotion/cache@^11.10.5":
+  version "11.10.5"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.5.tgz#c142da9351f94e47527ed458f7bbbbe40bb13c12"
+  integrity sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==
   dependencies:
     "@emotion/memoize" "^0.8.0"
-    "@emotion/sheet" "^1.2.0"
+    "@emotion/sheet" "^1.2.1"
     "@emotion/utils" "^1.2.0"
     "@emotion/weak-memoize" "^0.3.0"
-    stylis "4.0.13"
+    stylis "4.1.3"
 
 "@emotion/hash@^0.9.0":
   version "0.9.0"
@@ -1147,24 +1195,24 @@
   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==
+"@emotion/react@^11.10.5":
+  version "11.10.5"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.5.tgz#95fff612a5de1efa9c0d535384d3cfa115fe175d"
+  integrity sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==
   dependencies:
     "@babel/runtime" "^7.18.3"
-    "@emotion/babel-plugin" "^11.10.0"
-    "@emotion/cache" "^11.10.0"
-    "@emotion/serialize" "^1.1.0"
+    "@emotion/babel-plugin" "^11.10.5"
+    "@emotion/cache" "^11.10.5"
+    "@emotion/serialize" "^1.1.1"
     "@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==
+"@emotion/serialize@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.1.tgz#0595701b1902feded8a96d293b26be3f5c1a5cf0"
+  integrity sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==
   dependencies:
     "@emotion/hash" "^0.9.0"
     "@emotion/memoize" "^0.8.0"
@@ -1172,20 +1220,20 @@
     "@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/sheet@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.1.tgz#0767e0305230e894897cadb6c8df2c51e61a6c2c"
+  integrity sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==
 
-"@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==
+"@emotion/styled@^11.10.5":
+  version "11.10.5"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.10.5.tgz#1fe7bf941b0909802cb826457e362444e7e96a79"
+  integrity sha512-8EP6dD7dMkdku2foLoruPCNkRevzdcBaY6q0l0OsbyJK+x8D9HWjX27ARiSIKNF634hY9Zdoedh8bJCiva8yZw==
   dependencies:
     "@babel/runtime" "^7.18.3"
-    "@emotion/babel-plugin" "^11.10.0"
+    "@emotion/babel-plugin" "^11.10.5"
     "@emotion/is-prop-valid" "^1.2.0"
-    "@emotion/serialize" "^1.1.0"
+    "@emotion/serialize" "^1.1.1"
     "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
     "@emotion/utils" "^1.2.0"
 
@@ -1214,23 +1262,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.15.10.tgz#a5f9432eb221afc243c321058ef25fe899886892"
   integrity sha512-FNONeQPy/ox+5NBkcSbYJxoXj9GWu8gVGJTVmUyoOCKQFDTrHVKgNSzChdNt0I8Aj/iKcsDf2r9BFwv+FSNUXg==
 
-"@esbuild/android-arm@0.15.8":
-  version "0.15.8"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.15.8.tgz#52b094c98e415ec72fab39827c12f2051ac9c550"
-  integrity sha512-CyEWALmn+no/lbgbAJsbuuhT8s2J19EJGHkeyAwjbFJMrj80KJ9zuYsoAvidPTU7BgBf87r/sgae8Tw0dbOc4Q==
-  dependencies:
-    esbuild-wasm "0.15.8"
-
 "@esbuild/linux-loong64@0.15.10":
   version "0.15.10"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.10.tgz#78a42897c2cf8db9fd5f1811f7590393b77774c7"
   integrity sha512-w0Ou3Z83LOYEkwaui2M8VwIp+nLi/NA60lBLMvaJ+vXVMcsARYdEzLNE7RSm4+lSg4zq4d7fAVuzk7PNQ5JFgg==
 
-"@esbuild/linux-loong64@0.15.8":
-  version "0.15.8"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.8.tgz#d64575fc46bf4eb689352aa9f8a139271b6e1647"
-  integrity sha512-pE5RQsOTSERCtfZdfCT25wzo7dfhOSlhAXcsZmuvRYhendOv7djcdvtINdnDp2DAjP17WXlBB4nBO6sHLczmsg==
-
 "@eslint/eslintrc@^1.3.3":
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.3.tgz#2b044ab39fdfa75b4688184f9e573ce3c5b0ff95"
@@ -1389,13 +1425,14 @@
   resolved "https://registry.yarnpkg.com/@react-icons/all-files/-/all-files-4.1.0.tgz#477284873a0821928224b6fc84c62d2534d6650b"
   integrity sha512-hxBI2UOuVaI3O/BhQfhtb4kcGn9ft12RWAFVMUeNjqqhLsHvFtzIkFaptBJpFDANTKoDfdVoHTKZDlwKCACbMQ==
 
-"@rollup/pluginutils@^4.2.1":
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
-  integrity sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==
+"@rollup/pluginutils@^5.0.0":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.2.tgz#012b8f53c71e4f6f9cb317e311df1404f56e7a33"
+  integrity sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==
   dependencies:
-    estree-walker "^2.0.1"
-    picomatch "^2.2.2"
+    "@types/estree" "^1.0.0"
+    estree-walker "^2.0.2"
+    picomatch "^2.3.1"
 
 "@socket.io/base64-arraybuffer@~1.0.2":
   version "1.0.2"
@@ -1407,85 +1444,87 @@
   resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553"
   integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==
 
-"@svgr/babel-plugin-add-jsx-attribute@^6.3.1":
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.3.1.tgz#b9a5d84902be75a05ede92e70b338d28ab63fa74"
-  integrity sha512-jDBKArXYO1u0B1dmd2Nf8Oy6aTF5vLDfLoO9Oon/GLkqZ/NiggYWZA+a2HpUMH4ITwNqS3z43k8LWApB8S583w==
+"@svgr/babel-plugin-add-jsx-attribute@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.5.1.tgz#74a5d648bd0347bda99d82409d87b8ca80b9a1ba"
+  integrity sha512-9PYGcXrAxitycIjRmZB+Q0JaN07GZIWaTBIGQzfaZv+qr1n8X1XUEJ5rZ/vx6OVD9RRYlrNnXWExQXcmZeD/BQ==
 
-"@svgr/babel-plugin-remove-jsx-attribute@^6.3.1":
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-6.3.1.tgz#4877995452efc997b36777abe1fde9705ef78e8b"
-  integrity sha512-dQzyJ4prwjcFd929T43Z8vSYiTlTu8eafV40Z2gO7zy/SV5GT+ogxRJRBIKWomPBOiaVXFg3jY4S5hyEN3IBjQ==
+"@svgr/babel-plugin-remove-jsx-attribute@*":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-6.5.0.tgz#652bfd4ed0a0699843585cda96faeb09d6e1306e"
+  integrity sha512-8zYdkym7qNyfXpWvu4yq46k41pyNM9SOstoWhKlm+IfdCE1DdnRKeMUPsWIEO/DEkaWxJ8T9esNdG3QwQ93jBA==
 
-"@svgr/babel-plugin-remove-jsx-empty-expression@^6.3.1":
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-6.3.1.tgz#2d67a0e92904c9be149a5b22d3a3797ce4d7b514"
-  integrity sha512-HBOUc1XwSU67fU26V5Sfb8MQsT0HvUyxru7d0oBJ4rA2s4HW3PhyAPC7fV/mdsSGpAvOdd8Wpvkjsr0fWPUO7A==
+"@svgr/babel-plugin-remove-jsx-empty-expression@*":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-6.5.0.tgz#4b78994ab7d39032c729903fc2dd5c0fa4565cb8"
+  integrity sha512-NFdxMq3xA42Kb1UbzCVxplUc0iqSyM9X8kopImvFnB+uSDdzIHOdbs1op8ofAvVRtbg4oZiyRl3fTYeKcOe9Iw==
 
-"@svgr/babel-plugin-replace-jsx-attribute-value@^6.3.1":
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-6.3.1.tgz#306f5247139c53af70d1778f2719647c747998ee"
-  integrity sha512-C12e6aN4BXAolRrI601gPn5MDFCRHO7C4TM8Kks+rDtl8eEq+NN1sak0eAzJu363x3TmHXdZn7+Efd2nr9I5dA==
+"@svgr/babel-plugin-replace-jsx-attribute-value@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-6.5.1.tgz#fb9d22ea26d2bc5e0a44b763d4c46d5d3f596c60"
+  integrity sha512-8DPaVVE3fd5JKuIC29dqyMB54sA6mfgki2H2+swh+zNJoynC8pMPzOkidqHOSc6Wj032fhl8Z0TVn1GiPpAiJg==
 
-"@svgr/babel-plugin-svg-dynamic-title@^6.3.1":
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-6.3.1.tgz#6ce26d34cbc93eb81737ef528528907c292e7aa2"
-  integrity sha512-6NU55Mmh3M5u2CfCCt6TX29/pPneutrkJnnDCHbKZnjukZmmgUAZLtZ2g6ZoSPdarowaQmAiBRgAHqHmG0vuqA==
+"@svgr/babel-plugin-svg-dynamic-title@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-6.5.1.tgz#01b2024a2b53ffaa5efceaa0bf3e1d5a4c520ce4"
+  integrity sha512-FwOEi0Il72iAzlkaHrlemVurgSQRDFbk0OC8dSvD5fSBPHltNh7JtLsxmZUhjYBZo2PpcU/RJvvi6Q0l7O7ogw==
 
-"@svgr/babel-plugin-svg-em-dimensions@^6.3.1":
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-6.3.1.tgz#5ade2a724b290873c30529d1d8cd23523856287a"
-  integrity sha512-HV1NGHYTTe1vCNKlBgq/gKuCSfaRlKcHIADn7P8w8U3Zvujdw1rmusutghJ1pZJV7pDt3Gt8ws+SVrqHnBO/Qw==
+"@svgr/babel-plugin-svg-em-dimensions@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-6.5.1.tgz#dd3fa9f5b24eb4f93bcf121c3d40ff5facecb217"
+  integrity sha512-gWGsiwjb4tw+ITOJ86ndY/DZZ6cuXMNE/SjcDRg+HLuCmwpcjOktwRF9WgAiycTqJD/QXqL2f8IzE2Rzh7aVXA==
 
-"@svgr/babel-plugin-transform-react-native-svg@^6.3.1":
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-6.3.1.tgz#d654f509d692c3a09dfb475757a44bd9f6ad7ddf"
-  integrity sha512-2wZhSHvTolFNeKDAN/ZmIeSz2O9JSw72XD+o2bNp2QAaWqa8KGpn5Yk5WHso6xqfSAiRzAE+GXlsrBO4UP9LLw==
+"@svgr/babel-plugin-transform-react-native-svg@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-6.5.1.tgz#1d8e945a03df65b601551097d8f5e34351d3d305"
+  integrity sha512-2jT3nTayyYP7kI6aGutkyfJ7UMGtuguD72OjeGLwVNyfPRBD8zQthlvL+fAbAKk5n9ZNcvFkp/b1lZ7VsYqVJg==
 
-"@svgr/babel-plugin-transform-svg-component@^6.3.1":
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-6.3.1.tgz#21a285dbffdce9567c437ebf0d081bf9210807e6"
-  integrity sha512-cZ8Tr6ZAWNUFfDeCKn/pGi976iWSkS8ijmEYKosP+6ktdZ7lW9HVLHojyusPw3w0j8PI4VBeWAXAmi/2G7owxw==
+"@svgr/babel-plugin-transform-svg-component@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-6.5.1.tgz#48620b9e590e25ff95a80f811544218d27f8a250"
+  integrity sha512-a1p6LF5Jt33O3rZoVRBqdxL350oge54iZWHNI6LJB5tQ7EelvD/Mb1mfBiZNAan0dt4i3VArkFRjA4iObuNykQ==
 
-"@svgr/babel-preset@^6.3.1":
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-6.3.1.tgz#8bd1ead79637d395e9362b01dd37cfd59702e152"
-  integrity sha512-tQtWtzuMMQ3opH7je+MpwfuRA1Hf3cKdSgTtAYwOBDfmhabP7rcTfBi3E7V3MuwJNy/Y02/7/RutvwS1W4Qv9g==
+"@svgr/babel-preset@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-6.5.1.tgz#b90de7979c8843c5c580c7e2ec71f024b49eb828"
+  integrity sha512-6127fvO/FF2oi5EzSQOAjo1LE3OtNVh11R+/8FXa+mHx1ptAaS4cknIjnUA7e6j6fwGGJ17NzaTJFUwOV2zwCw==
   dependencies:
-    "@svgr/babel-plugin-add-jsx-attribute" "^6.3.1"
-    "@svgr/babel-plugin-remove-jsx-attribute" "^6.3.1"
-    "@svgr/babel-plugin-remove-jsx-empty-expression" "^6.3.1"
-    "@svgr/babel-plugin-replace-jsx-attribute-value" "^6.3.1"
-    "@svgr/babel-plugin-svg-dynamic-title" "^6.3.1"
-    "@svgr/babel-plugin-svg-em-dimensions" "^6.3.1"
-    "@svgr/babel-plugin-transform-react-native-svg" "^6.3.1"
-    "@svgr/babel-plugin-transform-svg-component" "^6.3.1"
+    "@svgr/babel-plugin-add-jsx-attribute" "^6.5.1"
+    "@svgr/babel-plugin-remove-jsx-attribute" "*"
+    "@svgr/babel-plugin-remove-jsx-empty-expression" "*"
+    "@svgr/babel-plugin-replace-jsx-attribute-value" "^6.5.1"
+    "@svgr/babel-plugin-svg-dynamic-title" "^6.5.1"
+    "@svgr/babel-plugin-svg-em-dimensions" "^6.5.1"
+    "@svgr/babel-plugin-transform-react-native-svg" "^6.5.1"
+    "@svgr/babel-plugin-transform-svg-component" "^6.5.1"
 
-"@svgr/core@^6.3.1":
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-6.3.1.tgz#752adf49d8d5473b15d76ca741961de093f715bd"
-  integrity sha512-Sm3/7OdXbQreemf9aO25keerZSbnKMpGEfmH90EyYpj1e8wMD4TuwJIb3THDSgRMWk1kYJfSRulELBy4gVgZUA==
+"@svgr/core@^6.4.0":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-6.5.1.tgz#d3e8aa9dbe3fbd747f9ee4282c1c77a27410488a"
+  integrity sha512-/xdLSWxK5QkqG524ONSjvg3V/FkNyCv538OIBdQqPNaAta3AsXj/Bd2FbvR87yMbXO2hFSWiAe/Q6IkVPDw+mw==
   dependencies:
-    "@svgr/plugin-jsx" "^6.3.1"
+    "@babel/core" "^7.19.6"
+    "@svgr/babel-preset" "^6.5.1"
+    "@svgr/plugin-jsx" "^6.5.1"
     camelcase "^6.2.0"
     cosmiconfig "^7.0.1"
 
-"@svgr/hast-util-to-babel-ast@^6.3.1":
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-6.3.1.tgz#59614e24d2a4a28010e02089213b3448d905769d"
-  integrity sha512-NgyCbiTQIwe3wHe/VWOUjyxmpUmsrBjdoIxKpXt3Nqc3TN30BpJG22OxBvVzsAh9jqep0w0/h8Ywvdk3D9niNQ==
+"@svgr/hast-util-to-babel-ast@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-6.5.1.tgz#81800bd09b5bcdb968bf6ee7c863d2288fdb80d2"
+  integrity sha512-1hnUxxjd83EAxbL4a0JDJoD3Dao3hmjvyvyEV8PzWmLK3B9m9NPlW7GKjFyoWE8nM7HnXzPcmmSyOW8yOddSXw==
   dependencies:
-    "@babel/types" "^7.18.4"
-    entities "^4.3.0"
+    "@babel/types" "^7.20.0"
+    entities "^4.4.0"
 
-"@svgr/plugin-jsx@^6.3.1":
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-6.3.1.tgz#de7b2de824296b836d6b874d498377896e367f50"
-  integrity sha512-r9+0mYG3hD4nNtUgsTXWGYJomv/bNd7kC16zvsM70I/bGeoCi/3lhTmYqeN6ChWX317OtQCSZZbH4wq9WwoXbw==
+"@svgr/plugin-jsx@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-6.5.1.tgz#0e30d1878e771ca753c94e69581c7971542a7072"
+  integrity sha512-+UdQxI3jgtSjCykNSlEMuy1jSRQlGC7pqBCPvkG/2dATdWo082zHTTK3uhnAju2/6XpE6B5mZ3z4Z8Ns01S8Gw==
   dependencies:
-    "@babel/core" "^7.18.5"
-    "@svgr/babel-preset" "^6.3.1"
-    "@svgr/hast-util-to-babel-ast" "^6.3.1"
+    "@babel/core" "^7.19.6"
+    "@svgr/babel-preset" "^6.5.1"
+    "@svgr/hast-util-to-babel-ast" "^6.5.1"
     svg-parser "^2.0.4"
 
 "@tanstack/match-sorter-utils@^8.1.1":
@@ -1609,6 +1648,11 @@
   dependencies:
     "@types/color-convert" "*"
 
+"@types/estree@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.0.tgz#5fb2e536c1ae9bf35366eed879e827fa59ca41c2"
+  integrity sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==
+
 "@types/hoist-non-react-statics@^3.3.0":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@@ -1897,17 +1941,17 @@
     "@typescript-eslint/types" "5.38.0"
     eslint-visitor-keys "^3.3.0"
 
-"@vitejs/plugin-react@^2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-2.1.0.tgz#4c99df15e71d2630601bd3018093bdc787d40e55"
-  integrity sha512-am6rPyyU3LzUYne3Gd9oj9c4Rzbq5hQnuGXSMT6Gujq45Il/+bunwq3lrB7wghLkiF45ygMwft37vgJ/NE8IAA==
+"@vitejs/plugin-react@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-2.2.0.tgz#1b9f63b8b6bc3f56258d20cd19b33f5cc761ce6e"
+  integrity sha512-FFpefhvExd1toVRlokZgxgy2JtnBOdp4ZDsq7ldCWaqGSGn9UhWMAVm/1lxPL14JfNS5yGz+s9yFrQY6shoStA==
   dependencies:
-    "@babel/core" "^7.18.13"
-    "@babel/plugin-transform-react-jsx" "^7.18.10"
+    "@babel/core" "^7.19.6"
+    "@babel/plugin-transform-react-jsx" "^7.19.0"
     "@babel/plugin-transform-react-jsx-development" "^7.18.6"
     "@babel/plugin-transform-react-jsx-self" "^7.18.6"
-    "@babel/plugin-transform-react-jsx-source" "^7.18.6"
-    magic-string "^0.26.2"
+    "@babel/plugin-transform-react-jsx-source" "^7.19.6"
+    magic-string "^0.26.7"
     react-refresh "^0.14.0"
 
 "@zag-js/element-size@0.1.0":
@@ -1943,6 +1987,11 @@ acorn-walk@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
 
+acorn-walk@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
+  integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
+
 acorn@^7.1.1:
   version "7.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
@@ -2585,7 +2634,7 @@ engine.io-parser@~5.0.3:
   dependencies:
     "@socket.io/base64-arraybuffer" "~1.0.2"
 
-entities@^4.3.0, entities@^4.4.0:
+entities@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.4.0.tgz#97bdaba170339446495e653cfd2db78962900174"
   integrity sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==
@@ -2673,236 +2722,101 @@ esbuild-android-64@0.15.10:
   resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.15.10.tgz#8a59a84acbf2eca96996cadc35642cf055c494f0"
   integrity sha512-UI7krF8OYO1N7JYTgLT9ML5j4+45ra3amLZKx7LO3lmLt1Ibn8t3aZbX5Pu4BjWiqDuJ3m/hsvhPhK/5Y/YpnA==
 
-esbuild-android-64@0.15.8:
-  version "0.15.8"
-  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.15.8.tgz#625863e705d4ed32a3b4c0b997dbf9454d50a455"
-  integrity sha512-bVh8FIKOolF7/d4AMzt7xHlL0Ljr+mYKSHI39TJWDkybVWHdn6+4ODL3xZGHOxPpdRpitemXA1WwMKYBsw8dGw==
-  dependencies:
-    esbuild-wasm "0.15.8"
-
 esbuild-android-arm64@0.15.10:
   version "0.15.10"
   resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.15.10.tgz#f453851dc1d8c5409a38cf7613a33852faf4915d"
   integrity sha512-EOt55D6xBk5O05AK8brXUbZmoFj4chM8u3riGflLa6ziEoVvNjRdD7Cnp82NHQGfSHgYR06XsPI8/sMuA/cUwg==
 
-esbuild-android-arm64@0.15.8:
-  version "0.15.8"
-  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.15.8.tgz#cd62afe08652ac146014386d3adbe7a9d33db1b0"
-  integrity sha512-ReAMDAHuo0H1h9LxRabI6gwYPn8k6WiUeyxuMvx17yTrJO+SCnIfNc/TSPFvDwtK9MiyiKG/2dBYHouT/M0BXQ==
-
 esbuild-darwin-64@0.15.10:
   version "0.15.10"
   resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.15.10.tgz#778bd29c8186ff47b176c8af58c08cf0fb8e6b86"
   integrity sha512-hbDJugTicqIm+WKZgp208d7FcXcaK8j2c0l+fqSJ3d2AzQAfjEYDRM3Z2oMeqSJ9uFxyj/muSACLdix7oTstRA==
 
-esbuild-darwin-64@0.15.8:
-  version "0.15.8"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.15.8.tgz#eb668dc973165f85aefecdca8aa60231acb2f705"
-  integrity sha512-KaKcGfJ+yto7Fo5gAj3xwxHMd1fBIKatpCHK8znTJLVv+9+NN2/tIPBqA4w5rBwjX0UqXDeIE2v1xJP+nGEXgA==
-
 esbuild-darwin-arm64@0.15.10:
   version "0.15.10"
   resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.10.tgz#b30bbefb46dc3c5d4708b0435e52f6456578d6df"
   integrity sha512-M1t5+Kj4IgSbYmunf2BB6EKLkWUq+XlqaFRiGOk8bmBapu9bCDrxjf4kUnWn59Dka3I27EiuHBKd1rSO4osLFQ==
 
-esbuild-darwin-arm64@0.15.8:
-  version "0.15.8"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.8.tgz#91c110daa46074fdfc18f411247ca0d1228aacc3"
-  integrity sha512-8tjEaBgAKnXCkP7bhEJmEqdG9HEV6oLkF36BrMzpfW2rgaw0c48Zrxe+9RlfeGvs6gDF4w+agXyTjikzsS3izw==
-
 esbuild-freebsd-64@0.15.10:
   version "0.15.10"
   resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.10.tgz#ab301c5f6ded5110dbdd611140bef1a7c2e99236"
   integrity sha512-KMBFMa7C8oc97nqDdoZwtDBX7gfpolkk6Bcmj6YFMrtCMVgoU/x2DI1p74DmYl7CSS6Ppa3xgemrLrr5IjIn0w==
 
-esbuild-freebsd-64@0.15.8:
-  version "0.15.8"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.8.tgz#22270945a9bf9107c340eb73922e122bbe84f8ad"
-  integrity sha512-jaxcsGHYzn2L0/lffON2WfH4Nc+d/EwozVTP5K2v016zxMb5UQMhLoJzvLgBqHT1SG0B/mO+a+THnJCMVg15zw==
-
 esbuild-freebsd-arm64@0.15.10:
   version "0.15.10"
   resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.10.tgz#a5b09b867a6ff49110f52343b6f12265db63d43f"
   integrity sha512-m2KNbuCX13yQqLlbSojFMHpewbn8wW5uDS6DxRpmaZKzyq8Dbsku6hHvh2U+BcLwWY4mpgXzFUoENEf7IcioGg==
 
-esbuild-freebsd-arm64@0.15.8:
-  version "0.15.8"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.8.tgz#0efe2741fbcaa2cfd31b9f94bd3ca7385b68c469"
-  integrity sha512-2xp2UlljMvX8HExtcg7VHaeQk8OBU0CSl1j18B5CcZmSDkLF9p3utuMXIopG3a08fr9Hv+Dz6+seSXUow/G51w==
-
 esbuild-linux-32@0.15.10:
   version "0.15.10"
   resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.15.10.tgz#5282fe9915641caf9c8070e4ba2c3e16d358f837"
   integrity sha512-guXrwSYFAvNkuQ39FNeV4sNkNms1bLlA5vF1H0cazZBOLdLFIny6BhT+TUbK/hdByMQhtWQ5jI9VAmPKbVPu1w==
 
-esbuild-linux-32@0.15.8:
-  version "0.15.8"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.15.8.tgz#6fc98659105da5c0d1fedfce3b7b9fa24ebee0d4"
-  integrity sha512-9u1E54BRz1FQMl86iaHK146+4ID2KYNxL3trLZT4QLLx3M7Q9n4lGG3lrzqUatGR2cKy8c33b0iaCzsItZWkFg==
-
 esbuild-linux-64@0.15.10:
   version "0.15.10"
   resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.15.10.tgz#f3726e85a00149580cb19f8abfabcbb96f5d52bb"
   integrity sha512-jd8XfaSJeucMpD63YNMO1JCrdJhckHWcMv6O233bL4l6ogQKQOxBYSRP/XLWP+6kVTu0obXovuckJDcA0DKtQA==
 
-esbuild-linux-64@0.15.8:
-  version "0.15.8"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.15.8.tgz#8e738c926d145cdd4e9bcb2febc96d89dc27dc09"
-  integrity sha512-4HxrsN9eUzJXdVGMTYA5Xler82FuZUu21bXKN42zcLHHNKCAMPUzD62I+GwDhsdgUBAUj0tRXDdsQHgaP6v0HA==
-
 esbuild-linux-arm64@0.15.10:
   version "0.15.10"
   resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.10.tgz#2f0056e9d5286edb0185b56655caa8c574d8dbe7"
   integrity sha512-GByBi4fgkvZFTHFDYNftu1DQ1GzR23jws0oWyCfhnI7eMOe+wgwWrc78dbNk709Ivdr/evefm2PJiUBMiusS1A==
 
-esbuild-linux-arm64@0.15.8:
-  version "0.15.8"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.8.tgz#a12675e5a56e8ef08dea49da8eed51a87b0e60d6"
-  integrity sha512-1OCm7Aq0tEJT70PbxmHSGYDLYP8DKH8r4Nk7/XbVzWaduo9beCjGBB+tGZIHK6DdTQ3h00/4Tb/70YMH/bOtKg==
-
 esbuild-linux-arm@0.15.10:
   version "0.15.10"
   resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.15.10.tgz#40a9270da3c8ffa32cf72e24a79883e323dff08d"
   integrity sha512-6N8vThLL/Lysy9y4Ex8XoLQAlbZKUyExCWyayGi2KgTBelKpPgj6RZnUaKri0dHNPGgReJriKVU6+KDGQwn10A==
 
-esbuild-linux-arm@0.15.8:
-  version "0.15.8"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.15.8.tgz#6424da1e8a3ece78681ebee4a70477b40c36ab35"
-  integrity sha512-7DVBU9SFjX4+vBwt8tHsUCbE6Vvl6y6FQWHAgyw1lybC5gULqn/WnjHYHN2/LJaZRsDBvxWT4msEgwLGq1Wd3Q==
-
 esbuild-linux-mips64le@0.15.10:
   version "0.15.10"
   resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.10.tgz#90ce1c4ee0202edb4ac69807dea77f7e5804abc4"
   integrity sha512-BxP+LbaGVGIdQNJUNF7qpYjEGWb0YyHVSKqYKrn+pTwH/SiHUxFyJYSP3pqkku61olQiSBnSmWZ+YUpj78Tw7Q==
 
-esbuild-linux-mips64le@0.15.8:
-  version "0.15.8"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.8.tgz#5b39a16272cb4eaaad1f24938c057b19fb5a0ee5"
-  integrity sha512-yeFoNPVFPEzZvFYBfUQNG2TjGRaCyV1E27OcOg4LOtnGrxb2wA+mkW3luckyv1CEyd00mpAg7UdHx8nlx3ghgA==
-
 esbuild-linux-ppc64le@0.15.10:
   version "0.15.10"
   resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.10.tgz#782837ae7bd5b279178106c9dd801755a21fabdf"
   integrity sha512-LoSQCd6498PmninNgqd/BR7z3Bsk/mabImBWuQ4wQgmQEeanzWd5BQU2aNi9mBURCLgyheuZS6Xhrw5luw3OkQ==
 
-esbuild-linux-ppc64le@0.15.8:
-  version "0.15.8"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.8.tgz#98ea8cfae8227180b45b2d952b2cbb072900944f"
-  integrity sha512-CEyMMUUNabXibw8OSNmBXhOIGhnjNVl5Lpseiuf00iKN0V47oqDrbo4dsHz1wH62m49AR8iG8wpDlTqfYgKbtg==
-
 esbuild-linux-riscv64@0.15.10:
   version "0.15.10"
   resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.10.tgz#d7420d806ece5174f24f4634303146f915ab4207"
   integrity sha512-Lrl9Cr2YROvPV4wmZ1/g48httE8z/5SCiXIyebiB5N8VT7pX3t6meI7TQVHw/wQpqP/AF4SksDuFImPTM7Z32Q==
 
-esbuild-linux-riscv64@0.15.8:
-  version "0.15.8"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.8.tgz#6334607025eb449d8dd402d7810721dc15a6210f"
-  integrity sha512-OCGSOaspMUjexSCU8ZiA0UnV/NiRU+s2vIfEcAQWQ6u32R+2luyfh/4ZaY6jFbylJE07Esc/yRvb9Q5fXuClXA==
-
 esbuild-linux-s390x@0.15.10:
   version "0.15.10"
   resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.10.tgz#21fdf0cb3494a7fb520a71934e4dffce67fe47be"
   integrity sha512-ReP+6q3eLVVP2lpRrvl5EodKX7EZ1bS1/z5j6hsluAlZP5aHhk6ghT6Cq3IANvvDdscMMCB4QEbI+AjtvoOFpA==
 
-esbuild-linux-s390x@0.15.8:
-  version "0.15.8"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.8.tgz#874f1a3507c32cce1d2ce0d2f28ac1496c094eab"
-  integrity sha512-RHdpdfxRTSrZXZJlFSLazFU4YwXLB5Rgf6Zr5rffqSsO4y9JybgtKO38bFwxZNlDXliYISXN/YROKrG9s7mZQA==
-
 esbuild-netbsd-64@0.15.10:
   version "0.15.10"
   resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.10.tgz#6c06b3107e3df53de381e6299184d4597db0440f"
   integrity sha512-iGDYtJCMCqldMskQ4eIV+QSS/CuT7xyy9i2/FjpKvxAuCzrESZXiA1L64YNj6/afuzfBe9i8m/uDkFHy257hTw==
 
-esbuild-netbsd-64@0.15.8:
-  version "0.15.8"
-  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.8.tgz#2e03d87ed811400d5d1fa8c7629b9fd97a574231"
-  integrity sha512-VolFFRatBH09T5QMWhiohAWCOien1R1Uz9K0BRVVTBgBaVBt7eArsXTKxVhUgRf2vwu2c2SXkuP0r7HLG0eozw==
-
 esbuild-openbsd-64@0.15.10:
   version "0.15.10"
   resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.10.tgz#4daef5f5d8e74bbda53b65160029445d582570cf"
   integrity sha512-ftMMIwHWrnrYnvuJQRJs/Smlcb28F9ICGde/P3FUTCgDDM0N7WA0o9uOR38f5Xe2/OhNCgkjNeb7QeaE3cyWkQ==
 
-esbuild-openbsd-64@0.15.8:
-  version "0.15.8"
-  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.8.tgz#8fdbc6399563ac61ff546449e2226a2b1477216c"
-  integrity sha512-HTAPlg+n4kUeE/isQxlCfsOz0xJGNoT5LJ9oYZWFKABfVf4Ycu7Zlf5ITgOnrdheTkz8JeL/gISIOCFAoOXrSA==
-
 esbuild-sunos-64@0.15.10:
   version "0.15.10"
   resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.15.10.tgz#5fe7bef267a02f322fd249a8214d0274937388a7"
   integrity sha512-mf7hBL9Uo2gcy2r3rUFMjVpTaGpFJJE5QTDDqUFf1632FxteYANffDZmKbqX0PfeQ2XjUDE604IcE7OJeoHiyg==
 
-esbuild-sunos-64@0.15.8:
-  version "0.15.8"
-  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.15.8.tgz#db657b5c09c0c0161d67ddafca1b710a2e7ce96b"
-  integrity sha512-qMP/jR/FzcIOwKj+W+Lb+8Cfr8GZHbHUJxAPi7DUhNZMQ/6y7sOgRzlOSpRrbbUntrRZh0MqOyDhJ3Gpo6L1QA==
-
-esbuild-wasm@0.15.8:
-  version "0.15.8"
-  resolved "https://registry.yarnpkg.com/esbuild-wasm/-/esbuild-wasm-0.15.8.tgz#60fb8c5dc1a5538421857a2fa5fbb9eab908dcbb"
-  integrity sha512-Y7uCl5RNO4URjlemjdx++ukVHEMt5s5AfMWYUnMiK4Sry+pPCvQIctzXq6r6FKCyGKjX6/NGMCqR2OX6aLxj0w==
-
 esbuild-windows-32@0.15.10:
   version "0.15.10"
   resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.15.10.tgz#48e3dde25ab0135579a288b30ab6ddef6d1f0b28"
   integrity sha512-ttFVo+Cg8b5+qHmZHbEc8Vl17kCleHhLzgT8X04y8zudEApo0PxPg9Mz8Z2cKH1bCYlve1XL8LkyXGFjtUYeGg==
 
-esbuild-windows-32@0.15.8:
-  version "0.15.8"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.15.8.tgz#bbb9fe20a8b6bba4428642cacf45a0fb7b2f3783"
-  integrity sha512-RKR1QHh4iWzjUhkP8Yqi75PPz/KS+b8zw3wUrzw6oAkj+iU5Qtyj61ZDaSG3Qf2vc6hTIUiPqVTqBH0NpXFNwg==
-
 esbuild-windows-64@0.15.10:
   version "0.15.10"
   resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.15.10.tgz#387a9515bef3fee502d277a5d0a2db49a4ecda05"
   integrity sha512-2H0gdsyHi5x+8lbng3hLbxDWR7mKHWh5BXZGKVG830KUmXOOWFE2YKJ4tHRkejRduOGDrBvHBriYsGtmTv3ntA==
 
-esbuild-windows-64@0.15.8:
-  version "0.15.8"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.15.8.tgz#cedee65505209c8d371d7228b60785c08f43e04d"
-  integrity sha512-ag9ptYrsizgsR+PQE8QKeMqnosLvAMonQREpLw4evA4FFgOBMLEat/dY/9txbpozTw9eEOYyD3a4cE9yTu20FA==
-
 esbuild-windows-arm64@0.15.10:
   version "0.15.10"
   resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.10.tgz#5a6fcf2fa49e895949bf5495cf088ab1b43ae879"
   integrity sha512-S+th4F+F8VLsHLR0zrUcG+Et4hx0RKgK1eyHc08kztmLOES8BWwMiaGdoW9hiXuzznXQ0I/Fg904MNbr11Nktw==
 
-esbuild-windows-arm64@0.15.8:
-  version "0.15.8"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.8.tgz#1d75235290bf23a111e6c0b03febd324af115cb1"
-  integrity sha512-dbpAb0VyPaUs9mgw65KRfQ9rqiWCHpNzrJusoPu+LpEoswosjt/tFxN7cd2l68AT4qWdBkzAjDLRon7uqMeWcg==
-
-esbuild@^0.15.6:
-  version "0.15.8"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.15.8.tgz#75daa25d03f6dd9cc9355030eba2b93555b42cd4"
-  integrity sha512-Remsk2dmr1Ia65sU+QasE6svJbsHe62lzR+CnjpUvbZ+uSYo1SitiOWPRfZQkCu82YWZBBKXiD/j0i//XWMZ+Q==
-  optionalDependencies:
-    "@esbuild/android-arm" "0.15.8"
-    "@esbuild/linux-loong64" "0.15.8"
-    esbuild-android-64 "0.15.8"
-    esbuild-android-arm64 "0.15.8"
-    esbuild-darwin-64 "0.15.8"
-    esbuild-darwin-arm64 "0.15.8"
-    esbuild-freebsd-64 "0.15.8"
-    esbuild-freebsd-arm64 "0.15.8"
-    esbuild-linux-32 "0.15.8"
-    esbuild-linux-64 "0.15.8"
-    esbuild-linux-arm "0.15.8"
-    esbuild-linux-arm64 "0.15.8"
-    esbuild-linux-mips64le "0.15.8"
-    esbuild-linux-ppc64le "0.15.8"
-    esbuild-linux-riscv64 "0.15.8"
-    esbuild-linux-s390x "0.15.8"
-    esbuild-netbsd-64 "0.15.8"
-    esbuild-openbsd-64 "0.15.8"
-    esbuild-sunos-64 "0.15.8"
-    esbuild-windows-32 "0.15.8"
-    esbuild-windows-64 "0.15.8"
-    esbuild-windows-arm64 "0.15.8"
-
 esbuild@^0.15.9:
   version "0.15.10"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.15.10.tgz#85c2f8446e9b1fe04fae68daceacba033eedbd42"
@@ -3117,7 +3031,7 @@ estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
   integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
 
-estree-walker@^2.0.1:
+estree-walker@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
@@ -3242,9 +3156,9 @@ form-data@^4.0.0:
     mime-types "^2.1.12"
 
 framer-motion@^7.5.3:
-  version "7.5.3"
-  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-7.5.3.tgz#a1de7d6c4abbf7333619d4a6c8df74c12240be43"
-  integrity sha512-VvANga9Z7bYtKMAsM/je81FwJDHfThOYywN04xVQ4OGdMVY09Bowx/q7nZd6XtytLuv6byc6GT1mYwag+SQ/nw==
+  version "7.6.12"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-7.6.12.tgz#a1f228e00da03ceb78482ae4a7fba63be39d34e4"
+  integrity sha512-Xm1jPB91v6vIr9b+V3q6c96sPzU1jWdvN+Mv4CvIAY23ZIezGNIWxWNGIWj1We0CZ8SSOQkttz8921M10TQjXg==
   dependencies:
     "@motionone/dom" "10.13.1"
     framesync "6.1.2"
@@ -4000,10 +3914,10 @@ lz-string@^1.4.4:
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
   integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=
 
-magic-string@^0.26.2:
-  version "0.26.3"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.26.3.tgz#25840b875140f7b4785ab06bddc384270b7dd452"
-  integrity sha512-u1Po0NDyFcwdg2nzHT88wSK0+Rih0N1M+Ph1Sp08k8yvFFU3KR72wryS7e1qMPJypt99WB7fIFVCA92mQrMjrg==
+magic-string@^0.26.7:
+  version "0.26.7"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.26.7.tgz#caf7daf61b34e9982f8228c4527474dac8981d6f"
+  integrity sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==
   dependencies:
     sourcemap-codec "^1.4.8"
 
@@ -4349,7 +4263,7 @@ picomatch@^2.0.4, picomatch@^2.2.1:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
   integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
 
-picomatch@^2.2.2, picomatch@^2.3.1:
+picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -4414,10 +4328,10 @@ postcss@^8.4.14:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.4.16:
-  version "8.4.16"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.16.tgz#33a1d675fac39941f5f445db0de4db2b6e01d43c"
-  integrity sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==
+postcss@^8.4.18:
+  version "8.4.19"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.19.tgz#61178e2add236b17351897c8bcc0b4c8ecab56fc"
+  integrity sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==
   dependencies:
     nanoid "^3.3.4"
     picocolors "^1.0.0"
@@ -4795,10 +4709,10 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
-rollup@~2.78.0:
-  version "2.78.1"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.78.1.tgz#52fe3934d9c83cb4f7c4cb5fb75d88591be8648f"
-  integrity sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==
+rollup@^2.79.1:
+  version "2.79.1"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.79.1.tgz#bedee8faef7c9f93a2647ac0108748f497f081c7"
+  integrity sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==
   optionalDependencies:
     fsevents "~2.3.2"
 
@@ -5073,7 +4987,7 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
-strip-literal@^0.4.1:
+strip-literal@^0.4.2:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/strip-literal/-/strip-literal-0.4.2.tgz#4f9fa6c38bb157b924e9ace7155ebf8a2342cbcf"
   integrity sha512-pv48ybn4iE1O9RLgCAN0iU4Xv7RlBTiit6DKmMiErbs9x1wH6vXBs45tWc0H5wUIF6TLTrKweqkmYF/iraQKNw==
@@ -5184,10 +5098,10 @@ stylelint@^14.9.1:
     v8-compile-cache "^2.3.0"
     write-file-atomic "^4.0.1"
 
-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.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.3.tgz#fd2fbe79f5fed17c55269e16ed8da14c84d069f7"
+  integrity sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==
 
 superjson@^1.10.0:
   version "1.10.0"
@@ -5259,10 +5173,10 @@ tiny-invariant@^1.0.6:
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
   integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
 
-tinybench@^2.1.5:
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/tinybench/-/tinybench-2.1.5.tgz#6864341415ff0f912ed160cfd90b7f833ece674c"
-  integrity sha512-ak+PZZEuH3mw6CCFOgf5S90YH0MARnZNhxjhjguAmoJimEMAJuNip/rJRd6/wyylHItomVpKTzZk9zrhTrQCoQ==
+tinybench@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/tinybench/-/tinybench-2.3.1.tgz#14f64e6b77d7ef0b1f6ab850c7a808c6760b414d"
+  integrity sha512-hGYWYBMPr7p4g5IarQE7XhlyWveh1EKhy4wUBS1LrHXCKYgvz+4/jCqgmJqZxxldesn05vccrtME2RLLZNW7iA==
 
 tinypool@^0.3.0:
   version "0.3.0"
@@ -5321,7 +5235,7 @@ tsconfig-paths@^4.0.0:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@2.4.0, tslib@^2.0.0, tslib@^2.3.1:
+tslib@2.4.0, tslib@^2.0.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
@@ -5341,6 +5255,11 @@ tslib@^2.1.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
   integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
 
+tslib@^2.3.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
+  integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
@@ -5480,64 +5399,55 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
-vite-plugin-svgr@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/vite-plugin-svgr/-/vite-plugin-svgr-2.2.1.tgz#6e1132a3b66f71e1d69e8c5fe989393260184ac3"
-  integrity sha512-+EqwahbwjETJH/ssA/66dNYyKN1cO0AStq96MuXmq5maU7AePBMf2lDKfQna49tJZAjtRz+R899BWCsUUP45Fg==
+vite-plugin-svgr@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/vite-plugin-svgr/-/vite-plugin-svgr-2.2.2.tgz#c5c9cb573bf455bb079550531847ddc5d2e122af"
+  integrity sha512-u8Ac27uZmDHTVGawpAhvLMJMuzbGeZGhe61TGeHoRQLxVhmQfIYCefa0iLbjC0ui1zFo6XZnS8EkzPITCYp85g==
   dependencies:
-    "@rollup/pluginutils" "^4.2.1"
-    "@svgr/core" "^6.3.1"
+    "@rollup/pluginutils" "^5.0.0"
+    "@svgr/core" "^6.4.0"
 
-vite-tsconfig-paths@^3.5.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/vite-tsconfig-paths/-/vite-tsconfig-paths-3.5.0.tgz#bfdf93f8072eff04125112ea9602fd50ae8cdad9"
-  integrity sha512-NKIubr7gXgh/3uniQaOytSg+aKWPrjquP6anAy+zCWEn6h9fB8z2/qdlfQrTgZWaXJ2pHVlllrSdRZltHn9P4g==
+vite-tsconfig-paths@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/vite-tsconfig-paths/-/vite-tsconfig-paths-3.6.0.tgz#9e6363051b2caaf7c7cec6f9f85ad71feee77920"
+  integrity sha512-UfsPYonxLqPD633X8cWcPFVuYzx/CMNHAjZTasYwX69sXpa4gNmQkR0XCjj82h7zhLGdTWagMjC1qfb9S+zv0A==
   dependencies:
     debug "^4.1.1"
     globrex "^0.1.2"
     recrawl-sync "^2.0.3"
     tsconfig-paths "^4.0.0"
 
-"vite@^2.9.12 || ^3.0.0-0":
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-3.1.3.tgz#b2a0821c11aae124bb7618f8036913c689afcc59"
-  integrity sha512-/3XWiktaopByM5bd8dqvHxRt5EEgRikevnnrpND0gRfNkrMrPaGGexhtLCzv15RcCMtV2CLw+BPas8YFeSG0KA==
-  dependencies:
-    esbuild "^0.15.6"
-    postcss "^8.4.16"
-    resolve "^1.22.1"
-    rollup "~2.78.0"
-  optionalDependencies:
-    fsevents "~2.3.2"
-
-vite@^3.1.6:
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-3.1.6.tgz#4c6db3000326342c918204a42a130fb3ffed2414"
-  integrity sha512-qMXIwnehvvcK5XfJiXQUiTxoYAEMKhM+jqCY6ZSTKFBKu1hJnAKEzP3AOcnTerI0cMZYAaJ4wpW1wiXLMDt4mA==
+vite@^3.0.0, vite@^3.2.4:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-3.2.4.tgz#d8c7892dd4268064e04fffbe7d866207dd24166e"
+  integrity sha512-Z2X6SRAffOUYTa+sLy3NQ7nlHFU100xwanq1WDwqaiFiCe+25zdxP1TfCS5ojPV2oDDcXudHIoPnI1Z/66B7Yw==
   dependencies:
     esbuild "^0.15.9"
-    postcss "^8.4.16"
+    postcss "^8.4.18"
     resolve "^1.22.1"
-    rollup "~2.78.0"
+    rollup "^2.79.1"
   optionalDependencies:
     fsevents "~2.3.2"
 
-vitest@^0.23.2:
-  version "0.23.4"
-  resolved "https://registry.yarnpkg.com/vitest/-/vitest-0.23.4.tgz#7ebea620f203f4df09a27ca17819dc9da61f88ef"
-  integrity sha512-iukBNWqQAv8EKDBUNntspLp9SfpaVFbmzmM0sNcnTxASQZMzRw3PsM6DMlsHiI+I6GeO5/sYDg3ecpC+SNFLrQ==
+vitest@^0.25.3:
+  version "0.25.3"
+  resolved "https://registry.yarnpkg.com/vitest/-/vitest-0.25.3.tgz#4e5ed481e4da6a0ce014bdb71dfc9661fd62b722"
+  integrity sha512-/UzHfXIKsELZhL7OaM2xFlRF8HRZgAHtPctacvNK8H4vOcbJJAMEgbWNGSAK7Y9b1NBe5SeM7VTuz2RsTHFJJA==
   dependencies:
     "@types/chai" "^4.3.3"
     "@types/chai-subset" "^1.3.3"
     "@types/node" "*"
+    acorn "^8.8.0"
+    acorn-walk "^8.2.0"
     chai "^4.3.6"
     debug "^4.3.4"
     local-pkg "^0.4.2"
-    strip-literal "^0.4.1"
-    tinybench "^2.1.5"
+    source-map "^0.6.1"
+    strip-literal "^0.4.2"
+    tinybench "^2.3.1"
     tinypool "^0.3.0"
     tinyspy "^1.0.2"
-    vite "^2.9.12 || ^3.0.0-0"
+    vite "^3.0.0"
 
 w3c-hr-time@^1.0.2:
   version "1.0.2"
diff --git a/server/demo-db/db.json b/server/demo-db/db.json
index 590364c97..74bddf0c9 100644
--- a/server/demo-db/db.json
+++ b/server/demo-db/db.json
@@ -116,7 +116,7 @@
   },
   "settings": {
     "app": "ontime",
-    "version": 1,
+    "version": 2,
     "serverPort": 4001,
     "lock": null,
     "pinCode": "1234"
diff --git a/server/main.js b/server/main.js
index b142cc1db..f0dba6fbf 100644
--- a/server/main.js
+++ b/server/main.js
@@ -30,7 +30,11 @@ let isQuitting = false;
 
 (async () => {
   try {
-    const dbLoader = await import('./src/modules/loadDb.js');
+    const loadDepPath = isProduction
+      ? path.join('file://', __dirname, '../', 'extraResources', 'src/modules/loadDb.js')
+      : path.join('file://', __dirname, 'src/modules/loadDb.js');
+
+    const dbLoader = await import(loadDepPath);
 
     await dbLoader.promise;
     const { startServer, startOSCServer } = await import(nodePath);
diff --git a/server/src/classes/event-loader/EventLoader.js b/server/src/classes/event-loader/EventLoader.js
index 2db9fbfe6..110c17869 100644
--- a/server/src/classes/event-loader/EventLoader.js
+++ b/server/src/classes/event-loader/EventLoader.js
@@ -76,7 +76,7 @@ export class EventLoader {
   /**
    * loads an event given its id
    * @param {string} eventId
-   * @returns {{loadedEvent: null, selectedEventId: null, nextEventId: null, loadedEventId: *, selectedPublicEventId: null, nextPublicEventId: null, numEvents: null, titles: {presenterNext: null, titleNow: null, subtitleNow: null, titleNext: null, subtitleNext: null, presenterNow: null, noteNow: null, noteNext: null}, titlesPublic: {presenterNext: null, titleNow: null, subtitleNow: null, titleNext: null, subtitleNext: null, presenterNow: null}, selectedEventIndex: null}}
+   * @returns {{loadedEvent: null, selectedEventId: null, nextEventId: null, selectedPublicEventId: null, nextPublicEventId: null, numEvents: null, titles: {presenterNext: null, titleNow: null, subtitleNow: null, titleNext: null, subtitleNext: null, presenterNow: null, noteNow: null, noteNext: null}, titlesPublic: {presenterNext: null, titleNow: null, subtitleNow: null, titleNext: null, subtitleNext: null, presenterNow: null}, selectedEventIndex: null}}
    */
   loadById(eventId) {
     const event = EventLoader.getEventWithId(eventId);
@@ -86,7 +86,7 @@ export class EventLoader {
   /**
    * loads an event given its index
    * @param {number} eventIndex
-   * @returns {{loadedEvent: null, selectedEventId: null, nextEventId: null, loadedEventId: *, selectedPublicEventId: null, nextPublicEventId: null, numEvents: null, titles: {presenterNext: null, titleNow: null, subtitleNow: null, titleNext: null, subtitleNext: null, presenterNow: null, noteNow: null, noteNext: null}, titlesPublic: {presenterNext: null, titleNow: null, subtitleNow: null, titleNext: null, subtitleNext: null, presenterNow: null}, selectedEventIndex: null}}
+   * @returns {{loadedEvent: null, selectedEventId: null, nextEventId: null, selectedPublicEventId: null, nextPublicEventId: null, numEvents: null, titles: {presenterNext: null, titleNow: null, subtitleNow: null, titleNext: null, subtitleNext: null, presenterNow: null, noteNow: null, noteNext: null}, titlesPublic: {presenterNext: null, titleNow: null, subtitleNow: null, titleNext: null, subtitleNext: null, presenterNow: null}, selectedEventIndex: null}}
    */
   loadByIndex(eventIndex) {
     const event = EventLoader.getEventAtIndex(eventIndex);
@@ -143,12 +143,11 @@ export class EventLoader {
 
   /**
    * returns data for currently loaded event
-   * @returns {{loadedEvent: null, selectedEventId: (null|*), nextEventId: (null|*), loadedEventId, selectedPublicEventId: (null|*), nextPublicEventId: (null|*), numEvents: (null|number|*), titles: (*|{presenterNext: null, titleNow: null, subtitleNow: null, titleNext: null, subtitleNext: null, presenterNow: null, noteNow: null, noteNext: null}), titlesPublic: (*|{presenterNext: null, titleNow: null, subtitleNow: null, titleNext: null, subtitleNext: null, presenterNow: null}), selectedEventIndex: (null|number|*)}}
+   * @returns {{loadedEvent: null, selectedEventId: (null|*), nextEventId: (null|*), selectedPublicEventId: (null|*), nextPublicEventId: (null|*), numEvents: (null|number|*), titles: (*|{presenterNext: null, titleNow: null, subtitleNow: null, titleNext: null, subtitleNext: null, presenterNow: null, noteNow: null, noteNext: null}), titlesPublic: (*|{presenterNext: null, titleNow: null, subtitleNow: null, titleNext: null, subtitleNext: null, presenterNow: null}), selectedEventIndex: (null|number|*)}}
    */
   getLoaded() {
     return {
       loadedEvent: this.loadedEvent,
-      loadedEventId: this.loadedEventId,
       selectedEventIndex: this.selectedEventIndex,
       selectedEventId: this.selectedEventId,
       selectedPublicEventId: this.selectedPublicEventId,
@@ -203,8 +202,9 @@ export class EventLoader {
     // we know some stuff now
     this.loadedEvent = event;
     this.selectedEventIndex = eventIndex;
-    this.loadedEventId = event.id;
+    this.selectedEventId = event.id;
     this.numEvents = timedEvents.length;
+    // this.nextEventId = playableEvents[eventIndex + 1].id;
     this._loadTitlesNow(event, playableEvents);
     this._loadTitlesNext(playableEvents);
 
diff --git a/server/src/classes/socket/SocketController.js b/server/src/classes/socket/SocketController.js
index bf9efd2d7..f250e7365 100644
--- a/server/src/classes/socket/SocketController.js
+++ b/server/src/classes/socket/SocketController.js
@@ -284,7 +284,7 @@ class SocketController {
 
       /* MOLECULAR ENDPOINTS
        * =====================
-       * 1. EVENT LIST
+       * 1. RUNDOWN
        * 2. MESSAGE CONTROL
        * 3. PLAYBACK CONTROL
        * 4. INFO
@@ -292,29 +292,29 @@ class SocketController {
        * 6. TIMER OBJECT
        * */
 
-      // 1. EVENT LIST
-      socket.on('get-ontime-feat-rundown', () => {
+      // 1. RUNDOWN
+      socket.on('get-feat-rundown', () => {
         global.timer._broadcastFeatureRundown();
       });
 
       // 2. MESSAGE CONTROL
-      socket.on('get-ontime-feat-messagecontrol', () => {
+      socket.on('get-feat-messagecontrol', () => {
         const featureData = messageManager.getAll();
         this.socket.emit(ADDRESS_MESSAGE_CONTROL, featureData);
       });
 
       // 3. PLAYBACK CONTROL
-      socket.on('get-ontime-feat-playbackcontrol', () => {
+      socket.on('get-feat-playbackcontrol', () => {
         global.timer._broadcastFeaturePlaybackControl();
       });
 
       // 4. INFO
-      socket.on('get-ontime-feat-info', () => {
+      socket.on('get-feat-info', () => {
         global.timer._broadcastFeatureInfo();
       });
 
       // 5. CUE SHEET
-      socket.on('get-ontime-feat-cuesheet', () => {
+      socket.on('get-feat-cuesheet', () => {
         global.timer._broadcastFeatureCuesheet();
       });
 
diff --git a/server/src/classes/socket/socketConfig.js b/server/src/classes/socket/socketConfig.js
index 321f85115..f82131e75 100644
--- a/server/src/classes/socket/socketConfig.js
+++ b/server/src/classes/socket/socketConfig.js
@@ -1 +1 @@
-export const ADDRESS_MESSAGE_CONTROL = 'ontime-feat-messagecontrol';
+export const ADDRESS_MESSAGE_CONTROL = 'feat-messagecontrol';
diff --git a/server/src/classes/timer/EventTimer.js b/server/src/classes/timer/EventTimer.js
index 406d078ab..bbdb7fcdc 100644
--- a/server/src/classes/timer/EventTimer.js
+++ b/server/src/classes/timer/EventTimer.js
@@ -426,7 +426,8 @@ export class EventTimer extends Timer {
       return;
     }
 
-    const { loadedEvent, loadedEventIndex, loadedEventId, titles, titlesPublic } = loadedData;
+    const { loadedEvent, loadedEventIndex, selectedEventId, nextEventId, titles, titlesPublic } =
+      loadedData;
 
     const start = loadedEvent.timeStart || 0;
     let end = loadedEvent.timeEnd || 0;
@@ -438,7 +439,9 @@ export class EventTimer extends Timer {
 
     this.duration = end - start;
     this.selectedEventIndex = loadedEventIndex;
-    this.selectedEventId = loadedEventId;
+    this.selectedEventId = selectedEventId;
+    this.nextEventId = nextEventId;
+
     if (type === 'load') {
       this._resetTimers();
       this.current = this.duration;