From bb81798e107afb85daae236013ca3f54fa7b8a15 Mon Sep 17 00:00:00 2001 From: naweidner Date: Fri, 27 May 2022 14:37:52 +0200 Subject: [PATCH 01/10] Added Darkmode Added button for darkmode in Studio (on settings-page). Studio also detects OS preference (auto-detection) and launches studio in dark- or lightmode. NOT tested with MacOS Auto-detection does not work with Chrome and Chromium on Fedora 35, this seems to be a bug. --- package-lock.json | 75 ++++++++++++++++++++ package.json | 1 + src/App.js | 10 ++- src/i18n/locales/de.json | 6 +- src/i18n/locales/en.json | 6 +- src/theme.js | 22 +++++- src/ui/header.js | 13 ++-- src/ui/settings/colorMode.js | 27 +++++++ src/ui/settings/page.js | 6 +- src/ui/studio/recording/media-devices.js | 1 + src/ui/studio/recording/recording-buttons.js | 4 +- src/ui/studio/review/index.js | 30 ++++---- src/ui/studio/save-creation/index.js | 9 ++- src/ui/studio/video-setup/prefs.js | 17 +++-- 14 files changed, 191 insertions(+), 36 deletions(-) create mode 100644 src/ui/settings/colorMode.js diff --git a/package-lock.json b/package-lock.json index 9cda3df6..4877d6c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,6 +40,7 @@ "react-hook-form": "^3.29.4", "react-i18next": "^11.16.7", "react-page-visibility": "^7.0.0", + "react-responsive": "^8.2.0", "react-router-dom": "^5.3.1", "react-scripts": "^4.0.3", "theme-ui": "^0.3.5", @@ -7871,6 +7872,11 @@ "node": ">=8.9.0" } }, + "node_modules/css-mediaquery": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz", + "integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA=" + }, "node_modules/css-prefers-color-scheme": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz", @@ -11672,6 +11678,11 @@ "node": ">=8.12.0" } }, + "node_modules/hyphenate-style-name": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", + "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" + }, "node_modules/i18next": { "version": "20.6.1", "resolved": "https://registry.npmjs.org/i18next/-/i18next-20.6.1.tgz", @@ -16591,6 +16602,14 @@ "node": ">=0.10.0" } }, + "node_modules/matchmediaquery": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz", + "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==", + "dependencies": { + "css-mediaquery": "^0.1.2" + } + }, "node_modules/md5.js": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", @@ -19746,6 +19765,23 @@ "node": ">=0.10.0" } }, + "node_modules/react-responsive": { + "version": "8.2.0", + "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.2.0.tgz", + "integrity": "sha512-iagCqVrw4QSjhxKp3I/YK6+ODkWY6G+YPElvdYKiUUbywwh9Ds0M7r26Fj2/7dWFFbOpcGnJE6uE7aMck8j5Qg==", + "dependencies": { + "hyphenate-style-name": "^1.0.0", + "matchmediaquery": "^0.3.0", + "prop-types": "^15.6.1", + "shallow-equal": "^1.1.0" + }, + "engines": { + "node": ">= 0.10" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/react-router": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.1.tgz", @@ -21264,6 +21300,11 @@ "sha.js": "bin.js" } }, + "node_modules/shallow-equal": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz", + "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -31181,6 +31222,11 @@ } } }, + "css-mediaquery": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz", + "integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA=" + }, "css-prefers-color-scheme": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz", @@ -34097,6 +34143,11 @@ "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz", "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==" }, + "hyphenate-style-name": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", + "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" + }, "i18next": { "version": "20.6.1", "resolved": "https://registry.npmjs.org/i18next/-/i18next-20.6.1.tgz", @@ -37834,6 +37885,14 @@ "object-visit": "^1.0.0" } }, + "matchmediaquery": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz", + "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==", + "requires": { + "css-mediaquery": "^0.1.2" + } + }, "md5.js": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", @@ -40353,6 +40412,17 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==" }, + "react-responsive": { + "version": "8.2.0", + "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.2.0.tgz", + "integrity": "sha512-iagCqVrw4QSjhxKp3I/YK6+ODkWY6G+YPElvdYKiUUbywwh9Ds0M7r26Fj2/7dWFFbOpcGnJE6uE7aMck8j5Qg==", + "requires": { + "hyphenate-style-name": "^1.0.0", + "matchmediaquery": "^0.3.0", + "prop-types": "^15.6.1", + "shallow-equal": "^1.1.0" + } + }, "react-router": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.1.tgz", @@ -41562,6 +41632,11 @@ "safe-buffer": "^5.0.1" } }, + "shallow-equal": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz", + "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==" + }, "shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", diff --git a/package.json b/package.json index 8006f0de..7c47cf5b 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "react-hook-form": "^3.29.4", "react-i18next": "^11.16.7", "react-page-visibility": "^7.0.0", + "react-responsive": "^8.2.0", "react-router-dom": "^5.3.1", "react-scripts": "^4.0.3", "theme-ui": "^0.3.5", diff --git a/src/App.js b/src/App.js index 2a398ef0..eaadc6db 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,7 @@ //; -*- mode: rjsx;-*- /** @jsx jsx */ -import { jsx } from 'theme-ui'; +import { jsx, useColorMode } from 'theme-ui'; +import { useMediaQuery } from 'react-responsive'; import { Flex } from '@theme-ui/components'; import { useState, Fragment } from 'react'; @@ -21,6 +22,13 @@ import Warnings from './ui/warnings'; function App({ settingsManager, userHasWebcam }) { const settings = useSettings(); + // This comma must remain set, otherwise you get the error "setColorMode is not a function" + const [, setColorMode] = useColorMode(); + + useMediaQuery({ + query: '(prefers-color-scheme: dark)', + }, undefined, (isdarkPrefered) => setColorMode(isdarkPrefered ? 'dark' : 'light')) + return ( diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json index d8720114..f8373972 100644 --- a/src/i18n/locales/de.json +++ b/src/i18n/locales/de.json @@ -135,5 +135,9 @@ "warning-recorder-safari-hint": "Falls Sie Safari nutzen, können Sie die experimentelle Funktion 'MediaRecorder' in den Einstellungen aktivieren. Wir empfehlen allerdings, auf macOS Firefox oder Chrome zu nutzen.", "warning-missing-connection-settings": "Die Verbindung zum Opencast Server wurde noch nicht vollständig hergestellt. Bitte konfigurieren Sie die Verbindung in <1>den Einstellungen (die Aufnahme geht nicht verloren).", - "settings-back-to-recording": "Zurück zur Aufnahme" + "settings-back-to-recording": "Zurück zur Aufnahme", + + "settings-theme-appearance": "Aussehen", + "settings-theme-dark": "Zum dunklen Design wechseln", + "settings-theme-light": "Zum hellen Design wechseln" } diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index cb66a13e..8ca8f1b7 100644 --- a/src/i18n/locales/en.json +++ b/src/i18n/locales/en.json @@ -139,5 +139,9 @@ "settings-back-to-recording": "Back to recording", "video-settings-open": "Open video settings", - "video-settings-close": "Close video settings" + "video-settings-close": "Close video settings", + + "settings-theme-appearance": "Appearance", + "settings-theme-dark": "Switch to Darkmode", + "settings-theme-light": "Switch to Lightmode" } diff --git a/src/theme.js b/src/theme.js index b0118aac..2277706d 100644 --- a/src/theme.js +++ b/src/theme.js @@ -54,7 +54,23 @@ const base = { highlight: '#3498db', error: '#f14668', gray: ['#363636', '#666666', '#aaaaaa', '#dddddd', '#f5f5f5'], - videoOverlay: 'rgba(255, 255, 255, 0.2)' + videoOverlay: 'rgba(255, 255, 255, 0.2)', + input_bg: '#fff', + modes: { + dark: { + text: 'rgba(255, 255, 255, 0.87)', + background: '#1C1C1E', + button_fg: '#fff', + primary: '#47af7a', + secondary: '#30c', + muted: '#888888', + highlight: '#3498db', + error: 'rgba(241, 70, 104, 0.8)', + gray: ['#f5f5f5', '#dddddd', '#aaaaaa', '#666666', '#363636'], + videoOverlay: 'rgba(255, 255, 255, 0.2)', + input_bg: '#363636', + } + } }, text: { text: { @@ -177,6 +193,8 @@ const base = { maxWidth: '100%' }, input: { + backgroundColor: 'input_bg', + color: 'text', borderWidth: 1, borderStyle: 'solid', borderColor: 'gray.2', @@ -198,6 +216,8 @@ const base = { } }, select: { + backgroundColor: 'input_bg', + color: 'text', height: '2rem', fontSize: '14pt', outline: 'none', diff --git a/src/ui/header.js b/src/ui/header.js index 47be4111..42187413 100644 --- a/src/ui/header.js +++ b/src/ui/header.js @@ -1,6 +1,6 @@ //; -*- mode: rjsx;-*- /** @jsx jsx */ -import { jsx } from 'theme-ui'; +import { jsx, useColorMode } from 'theme-ui'; import { Link, NavLink, useLocation } from 'react-router-dom'; import { Fragment, useState } from 'react'; @@ -20,6 +20,7 @@ import { useStudioState } from '../studio-state'; // The header, including a logo on the left and the navigation on the right. export default function Header() { const { isRecording } = useStudioState(); + const [ colorMode ] = useColorMode(); return (
{ const NavElement = ({ target, children, icon, ...rest }) => { const location = useLocation(); const { isRecording } = useStudioState(); + const [ colorMode ] = useColorMode(); return ( { textDecoration: 'none', fontSize: '18px', height: ['auto', '100%'], - borderLeft: ['none', theme => `1px solid ${theme.colors.gray[3]}`], + borderLeft: ['none', theme => colorMode === 'light' ? `1px solid ${theme.colors.gray[3]}` : `1px solid ${theme.colors.gray[1]}`], display: ['block', 'inline-block'], width: ['100%', 'auto'], '&:hover': { - backgroundColor: 'gray.1', + backgroundColor: colorMode === 'light' ? 'gray.1' : 'gray.3', }, ':focus-visible': { outline: '5px solid #8ec8aa !important', @@ -145,6 +147,7 @@ const Navigation = props => { const toggleMenu = () => updateIsOpened(!isOpened); const closeMenu = () => updateIsOpened(false); const { t } = useTranslation(); + const [colorMode] = useColorMode(); return ( @@ -193,7 +196,7 @@ const Navigation = props => { top: [theme => theme.heights.headerHeight, theme => theme.heights.headerHeight, 0], position: ['absolute', 'static'], width: ['100%', 'auto'], - backgroundColor: ['gray.0', 'none'], + backgroundColor: colorMode === 'light' ? ['gray.0', 'none'] : ['gray.4', 'none'], transition: ['height 0.25s ease-out 0s', 'none'], scrollX: ['none', 'auto'], }} diff --git a/src/ui/settings/colorMode.js b/src/ui/settings/colorMode.js new file mode 100644 index 00000000..e4007138 --- /dev/null +++ b/src/ui/settings/colorMode.js @@ -0,0 +1,27 @@ +//; -*- mode: rjsx;-*- +/** @jsx jsx */ + +import { jsx, useColorMode } from 'theme-ui'; +import { Button } from '@theme-ui/components'; +import { useTranslation } from 'react-i18next'; + +import { SettingsSection } from './elements'; + +const ColorModeSettings = () => { + const { t } = useTranslation(); + const [colorMode, setColorMode] = useColorMode(); + + const dark = t('settings-theme-dark'); + const light = t('settings-theme-light'); + + return ( + + + + ); +}; + +export default ColorModeSettings; \ No newline at end of file diff --git a/src/ui/settings/page.js b/src/ui/settings/page.js index cd6955ae..607b07fa 100644 --- a/src/ui/settings/page.js +++ b/src/ui/settings/page.js @@ -7,6 +7,7 @@ import { Box } from '@theme-ui/components'; import LanguageSettings from './language'; import OpencastSettings from './opencast'; +import ColorModeSettings from './colorMode'; const SettingsPage = ({ settingsManager }) => { @@ -15,11 +16,10 @@ const SettingsPage = ({ settingsManager }) => { return (
- {t('settings-header')} + {t('settings-header')}
- + - ); diff --git a/src/ui/studio/recording/media-devices.js b/src/ui/studio/recording/media-devices.js index 32fcff49..97def913 100644 --- a/src/ui/studio/recording/media-devices.js +++ b/src/ui/studio/recording/media-devices.js @@ -94,6 +94,7 @@ function MediaDevice({ title, stream, paused }) { ( export const PauseButton = props => ( ); @@ -64,7 +64,7 @@ export const RecordButton = props => ( export const ResumeButton = props => ( ); diff --git a/src/ui/studio/review/index.js b/src/ui/studio/review/index.js index e1bff8a8..c29c8ca2 100644 --- a/src/ui/studio/review/index.js +++ b/src/ui/studio/review/index.js @@ -1,6 +1,6 @@ //; -*- mode: rjsx;-*- /** @jsx jsx */ -import { jsx, Styled } from 'theme-ui'; +import { jsx, Styled, useColorMode } from 'theme-ui'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faTrash, faPlay, faPause } from '@fortawesome/free-solid-svg-icons'; @@ -115,9 +115,9 @@ export default function Review(props) { }; const ControlBox = ({ previewController, currentTime }) => ( -
@@ -129,6 +129,8 @@ const Scrubber = ({ previewController, currentTime }) => { const duration = previewController.current?.duration || Infinity; const { start, end } = useStudioState(); + const [colorMode] = useColorMode(); + const setTime = mouseEvent => { const rect = mouseEvent.target.getBoundingClientRect() const x = mouseEvent.clientX - rect.x; @@ -146,7 +148,7 @@ const Scrubber = ({ previewController, currentTime }) => { const cutStyle = { position: 'absolute', - backgroundColor: 'gray.3', + backgroundColor: colorMode === 'light' ? 'gray.3' : 'gray.2', height: '100%', boxSizing: 'content-box', }; @@ -174,7 +176,7 @@ const Scrubber = ({ previewController, currentTime }) => { zIndex: 10, }} /> -
{ return
{ { ...{ recordingDispatch, previewController, currentTime } } />} - ); }; -export default ColorModeSettings; \ No newline at end of file +const ThemeIcon = () => { + const [colorMode] = useColorMode(); + + return( +
+ +
+ ) +}; + +export default ColorModeSettings; diff --git a/src/ui/studio/review/index.js b/src/ui/studio/review/index.js index c29c8ca2..c5ac7c10 100644 --- a/src/ui/studio/review/index.js +++ b/src/ui/studio/review/index.js @@ -148,7 +148,7 @@ const Scrubber = ({ previewController, currentTime }) => { const cutStyle = { position: 'absolute', - backgroundColor: colorMode === 'light' ? 'gray.3' : 'gray.2', + backgroundColor: colorMode === 'dark' ? 'gray.2' : 'gray.3', height: '100%', boxSizing: 'content-box', }; @@ -176,7 +176,7 @@ const Scrubber = ({ previewController, currentTime }) => { zIndex: 10, }} /> -
{ return
{ const [colorMode] = useColorMode(); return ( - + Warning. settings diff --git a/src/ui/studio/video-setup/prefs.js b/src/ui/studio/video-setup/prefs.js index 8770c2fe..276a3c4a 100644 --- a/src/ui/studio/video-setup/prefs.js +++ b/src/ui/studio/video-setup/prefs.js @@ -168,7 +168,7 @@ export const StreamSettings = ({ isDesktop, stream }) => { transition: 'top 0.2s', }}> diff --git a/src/ui/studio/video-setup/preview.js b/src/ui/studio/video-setup/preview.js index 76d26aad..101e6d0b 100644 --- a/src/ui/studio/video-setup/preview.js +++ b/src/ui/studio/video-setup/preview.js @@ -51,7 +51,7 @@ export const SourcePreview = ({ warnings, inputs }) => { } const StreamPreview = ({ input, text }) => ( - + From 435cac1460a580668cf00e50625a4aa99db38b1e Mon Sep 17 00:00:00 2001 From: naweidner Date: Thu, 2 Jun 2022 12:33:03 +0200 Subject: [PATCH 04/10] Darkmode changes and theme-ui update - removed button for darkmode and added a dropdowm instead - updated theme-ui to v0.14.5 this closes #812 - added some config -> this plus update fixes bug with auto preference for darkmode - some color adjustments, also removed some unused colors from theme.js - moved css for tooltip and tab-navigation to theme.js (they now use color variables) --- package-lock.json | 749 ++++++++++++++----- package.json | 6 +- src/Tooltip.js | 5 +- src/i18n/locales/de.json | 5 +- src/i18n/locales/en.json | 9 +- src/style/global-style.js | 20 - src/theme.js | 42 +- src/ui/about.js | 100 +-- src/ui/settings/colorMode.js | 37 +- src/ui/settings/elements.js | 6 +- src/ui/settings/page.js | 4 +- src/ui/studio/audio-setup/index.js | 6 +- src/ui/studio/recording/recording-buttons.js | 4 +- src/ui/studio/review/index.js | 8 +- src/ui/studio/save-creation/index.js | 16 +- src/ui/studio/video-setup/index.js | 5 +- src/ui/studio/video-setup/prefs.js | 12 +- 17 files changed, 701 insertions(+), 333 deletions(-) diff --git a/package-lock.json b/package-lock.json index 380cddb5..f28ceca7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,8 +19,8 @@ "@sentry/browser": "^6.6.0", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^9.5.0", - "@theme-ui/color": "^0.3.5", - "@theme-ui/components": "^0.3.5", + "@theme-ui/color": "^0.14.5", + "@theme-ui/components": "^0.14.5", "@tippyjs/react": "^4.2.6", "deepmerge": "^4.2.2", "eslint": "^7.32.0", @@ -43,7 +43,7 @@ "react-responsive": "^8.2.0", "react-router-dom": "^5.3.3", "react-scripts": "^4.0.3", - "theme-ui": "^0.3.5", + "theme-ui": "^0.14.5", "use-resize-observer": "^7.0.0" } }, @@ -1902,6 +1902,90 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "node_modules/@emotion/babel-plugin": { + "version": "11.9.2", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz", + "integrity": "sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==", + "peer": true, + "dependencies": { + "@babel/helper-module-imports": "^7.12.13", + "@babel/plugin-syntax-jsx": "^7.12.13", + "@babel/runtime": "^7.13.10", + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.5", + "@emotion/serialize": "^1.0.2", + "babel-plugin-macros": "^2.6.1", + "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" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/@babel/runtime": { + "version": "7.18.3", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz", + "integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==", + "peer": true, + "dependencies": { + "regenerator-runtime": "^0.13.4" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==", + "peer": true + }, + "node_modules/@emotion/babel-plugin/node_modules/@emotion/memoize": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", + "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==", + "peer": true + }, + "node_modules/@emotion/babel-plugin/node_modules/@emotion/serialize": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.3.tgz", + "integrity": "sha512-2mSSvgLfyV3q+iVh3YWgNlUc2a9ZlDU7DjuP5MjK3AXRR0dYigCrP99aeFtaB2L/hjfEZdSThn5dsZ0ufqbvsA==", + "peer": true, + "dependencies": { + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.4", + "@emotion/unitless": "^0.7.5", + "@emotion/utils": "^1.0.0", + "csstype": "^3.0.2" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/@emotion/utils": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz", + "integrity": "sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ==", + "peer": true + }, + "node_modules/@emotion/babel-plugin/node_modules/csstype": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", + "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==", + "peer": true + }, + "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "peer": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/@emotion/cache": { "version": "10.0.29", "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", @@ -1954,6 +2038,95 @@ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" }, + "node_modules/@emotion/react": { + "version": "11.9.0", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.9.0.tgz", + "integrity": "sha512-lBVSF5d0ceKtfKCDQJveNAtkC7ayxpVlgOohLgXqRwqWr9bOf4TZAFFyIcNngnV6xK6X4x2ZeXq7vliHkoVkxQ==", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.13.10", + "@emotion/babel-plugin": "^11.7.1", + "@emotion/cache": "^11.7.1", + "@emotion/serialize": "^1.0.3", + "@emotion/utils": "^1.1.0", + "@emotion/weak-memoize": "^0.2.5", + "hoist-non-react-statics": "^3.3.1" + }, + "peerDependencies": { + "@babel/core": "^7.0.0", + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@babel/core": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/react/node_modules/@babel/runtime": { + "version": "7.18.3", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz", + "integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==", + "peer": true, + "dependencies": { + "regenerator-runtime": "^0.13.4" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@emotion/react/node_modules/@emotion/cache": { + "version": "11.7.1", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz", + "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==", + "peer": true, + "dependencies": { + "@emotion/memoize": "^0.7.4", + "@emotion/sheet": "^1.1.0", + "@emotion/utils": "^1.0.0", + "@emotion/weak-memoize": "^0.2.5", + "stylis": "4.0.13" + } + }, + "node_modules/@emotion/react/node_modules/@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==", + "peer": true + }, + "node_modules/@emotion/react/node_modules/@emotion/serialize": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.3.tgz", + "integrity": "sha512-2mSSvgLfyV3q+iVh3YWgNlUc2a9ZlDU7DjuP5MjK3AXRR0dYigCrP99aeFtaB2L/hjfEZdSThn5dsZ0ufqbvsA==", + "peer": true, + "dependencies": { + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.4", + "@emotion/unitless": "^0.7.5", + "@emotion/utils": "^1.0.0", + "csstype": "^3.0.2" + } + }, + "node_modules/@emotion/react/node_modules/@emotion/sheet": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz", + "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==", + "peer": true + }, + "node_modules/@emotion/react/node_modules/@emotion/utils": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz", + "integrity": "sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ==", + "peer": true + }, + "node_modules/@emotion/react/node_modules/csstype": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", + "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==", + "peer": true + }, "node_modules/@emotion/serialize": { "version": "0.11.15", "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.15.tgz", @@ -1971,34 +2144,6 @@ "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz", "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==" }, - "node_modules/@emotion/styled": { - "version": "10.0.27", - "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz", - "integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==", - "dependencies": { - "@emotion/styled-base": "^10.0.27", - "babel-plugin-emotion": "^10.0.27" - } - }, - "node_modules/@emotion/styled-base": { - "version": "10.0.27", - "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.27.tgz", - "integrity": "sha512-ufHM/HhE3nr309hJG9jxuFt71r6aHn7p+bwXduFxcwPFEfBIqvmZUMtZ9YxIsY61PVwK3bp4G1XhaCzy9smVvw==", - "dependencies": { - "@babel/runtime": "^7.5.5", - "@emotion/is-prop-valid": "0.8.6", - "@emotion/serialize": "^0.11.15", - "@emotion/utils": "0.11.3" - } - }, - "node_modules/@emotion/styled-base/node_modules/@emotion/is-prop-valid": { - "version": "0.8.6", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.6.tgz", - "integrity": "sha512-mnZMho3Sq8BfzkYYRVc8ilQTnc8U02Ytp6J1AwM6taQStZ3AhsEJBX2LzhA/LJirNCwM2VtHL3VFIZ+sNJUgUQ==", - "dependencies": { - "@emotion/memoize": "0.7.4" - } - }, "node_modules/@emotion/stylis": { "version": "0.8.5", "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", @@ -3531,9 +3676,21 @@ } }, "node_modules/@mdx-js/react": { - "version": "1.6.22", - "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz", - "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==" + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-2.1.1.tgz", + "integrity": "sha512-7zlZDf5xmWH8I0kFE4DG91COOkxjaW9DX5f1HWztZpFcVua2gJgMYfIkFaDpO/DH/tWi6Mz+OheW4194r15igg==", + "peer": true, + "dependencies": { + "@types/mdx": "^2.0.0", + "@types/react": ">=16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + }, + "peerDependencies": { + "react": ">=16" + } }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", @@ -4523,72 +4680,113 @@ } }, "node_modules/@theme-ui/color": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/@theme-ui/color/-/color-0.3.5.tgz", - "integrity": "sha512-PVzZfo22woVJ7zeJqkWZba04jVuXL4fWmR14WMNdzRivFRs1gr9XD5fYymOmwI8quKDR2IpI5GHqUSybhzTLPQ==", + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/@theme-ui/color/-/color-0.14.5.tgz", + "integrity": "sha512-c4ouNlGsRqKzZVXVfW/JMjmbGVIQd0qBnHmfCk/VfmA1vYoPZ/BIRxysEUu3eZRZGV5HnhkUyPbe42VEAtoNvQ==", "dependencies": { - "@theme-ui/css": "0.3.5", - "polished": "^3.4.1" + "@theme-ui/css": "0.14.5", + "polished": "^4.0.5" } }, "node_modules/@theme-ui/color-modes": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/@theme-ui/color-modes/-/color-modes-0.3.5.tgz", - "integrity": "sha512-3n5ExAnp1gAuVVFdGF2rRLyrVsa7qtmUXx+gj1wPJsADq23EE4ctkppC+aIfPFxT196WhR8fjErrVuO7Rh+wAg==", + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/@theme-ui/color-modes/-/color-modes-0.14.5.tgz", + "integrity": "sha512-cblrNDonr0sqPY9xRNcRLc4mDud9W59BxgTqS6GznB4fdnztV9FgN488JODbo4uHiHMZddhno0Vb3f/bbs6jsQ==", "dependencies": { - "@emotion/core": "^10.0.0", - "@theme-ui/core": "0.3.5", - "@theme-ui/css": "0.3.5", + "@theme-ui/core": "0.14.5", + "@theme-ui/css": "0.14.5", "deepmerge": "^4.2.2" + }, + "peerDependencies": { + "@emotion/react": "^11", + "react": ">16" } }, "node_modules/@theme-ui/components": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/@theme-ui/components/-/components-0.3.5.tgz", - "integrity": "sha512-RdWwnN43H1Tq80lGCu6icNuYCWoHHNtwH+LJGaGfiPkv/uMXWrwzKPLMiAuYM5b3ofKtmdaAcxZLjqAld97jkw==", + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/@theme-ui/components/-/components-0.14.5.tgz", + "integrity": "sha512-V1h7j4yUsIbS6oHd5ke7ogCWq7ng31vzpUkK3xGI2acV+N0jfJNf7CfG6AaJfiwP0kAZhtCbIMvFsRWbRyvEnA==", "dependencies": { - "@emotion/core": "^10.0.0", - "@emotion/styled": "^10.0.0", "@styled-system/color": "^5.1.2", "@styled-system/should-forward-prop": "^5.1.2", "@styled-system/space": "^5.1.2", - "@theme-ui/css": "0.3.5" + "@theme-ui/css": "0.14.5", + "@types/styled-system": "^5.1.13" + }, + "peerDependencies": { + "@emotion/react": "^11", + "react": ">16" } }, "node_modules/@theme-ui/core": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/@theme-ui/core/-/core-0.3.5.tgz", - "integrity": "sha512-80gbG4BW0ZQgZ8TWSG7vY72uXDxmkI/GttjpJee7AJlWVrPh7RCD2E3cuFPjqXzt7o4BJ9lZSHmTXcLzixNtRw==", + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/@theme-ui/core/-/core-0.14.5.tgz", + "integrity": "sha512-fyllFax0hnABTMS3ryKP0w1oa2oHCE4xUKRZMwyA46ldV3pe3C4to8SmlF7x6RgSlsyrwdpEm34aB1ZgHsWrQg==", "dependencies": { - "@emotion/core": "^10.0.0", - "@theme-ui/css": "0.3.5", + "@theme-ui/css": "0.14.5", + "@theme-ui/parse-props": "0.14.5", "deepmerge": "^4.2.2" + }, + "peerDependencies": { + "@emotion/react": "^11", + "react": ">16" } }, "node_modules/@theme-ui/css": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/@theme-ui/css/-/css-0.3.5.tgz", - "integrity": "sha512-XqsyXmifbnHOui1flSq4V7Lb3U+06Dbn2Q/leyr/cRd6Xgc0naiztdmD0MbXNvxgU51a2Ur9hyP4PnO5wE0yRg==" + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/@theme-ui/css/-/css-0.14.5.tgz", + "integrity": "sha512-EZztsPXJEg8rceTRGwWDD++d9QFSwEkl5913BvWmWTmB/Ips91ZIpnTbhfVRbG3bgUa+9lc1VwSEHOsHkN5mgw==", + "dependencies": { + "csstype": "^3.0.10" + }, + "peerDependencies": { + "@emotion/react": "^11" + } + }, + "node_modules/@theme-ui/css/node_modules/csstype": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", + "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==" }, "node_modules/@theme-ui/mdx": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/@theme-ui/mdx/-/mdx-0.3.5.tgz", - "integrity": "sha512-KMf5kkEcItQ3qIj7dston/kBOZc82ST2R0pUcyk/u8ZclX4ingRtZkMxm2zpmxybzdSUY3DIKf2MTK9CxUSpOQ==", + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/@theme-ui/mdx/-/mdx-0.14.5.tgz", + "integrity": "sha512-iYYsvo6TZAxc9frXJWUijEYLmZltbsv3xFfBptA2iaw8iDj/Aw2ggtHpVyGVXGAgS09vfgH+ebFuzup61ADdDw==", "dependencies": { - "@emotion/core": "^10.0.0", - "@emotion/styled": "^10.0.0", - "@mdx-js/react": "^1.0.0" + "@theme-ui/core": "0.14.5", + "@theme-ui/css": "0.14.5" + }, + "peerDependencies": { + "@emotion/react": "^11", + "@mdx-js/react": "^1 || ^2", + "react": ">16" + } + }, + "node_modules/@theme-ui/parse-props": { + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/@theme-ui/parse-props/-/parse-props-0.14.5.tgz", + "integrity": "sha512-VB4/eH3v+1hXkzVWW0pahNdooG8gEreUXMyizR5TsJffy8KwjW6CsZJheoDJhyRfFk2nLhi1M0PjA+01lxL1qg==", + "dependencies": { + "@theme-ui/css": "0.14.5" + }, + "peerDependencies": { + "@emotion/react": "^11", + "react": ">16" } }, "node_modules/@theme-ui/theme-provider": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/@theme-ui/theme-provider/-/theme-provider-0.3.5.tgz", - "integrity": "sha512-C1kVsGyrh/pqO/j4+KSF5IvVW1DOnZoQmpaJ9EjyU4bqY0PCTZfuNdNPfydKaDWiYxrKGXKBeX0xjvLLU6R0zQ==", + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/@theme-ui/theme-provider/-/theme-provider-0.14.5.tgz", + "integrity": "sha512-FHT2FLQB412USzW/JX7UXXcJXdFyEDcwwaOXrR5caHX+XDb61k1tkXhT7fjnCpEx+z7rOeCXjxai3sQGk5SFNg==", "dependencies": { - "@emotion/core": "^10.0.0", - "@theme-ui/color-modes": "0.3.5", - "@theme-ui/core": "0.3.5", - "@theme-ui/mdx": "0.3.5" + "@theme-ui/color-modes": "0.14.5", + "@theme-ui/core": "0.14.5", + "@theme-ui/css": "0.14.5", + "@theme-ui/mdx": "0.14.5" + }, + "peerDependencies": { + "@emotion/react": "^11", + "react": ">16" } }, "node_modules/@tippyjs/react": { @@ -4846,6 +5044,12 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=" }, + "node_modules/@types/mdx": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.2.tgz", + "integrity": "sha512-mJGfgj4aWpiKb8C0nnJJchs1sHBHn0HugkVfqqyQi7Wn6mBRksLeQsPOFvih/Pu8L1vlDzfe/LidhVHBeUk3aQ==", + "peer": true + }, "node_modules/@types/minimatch": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.4.tgz", @@ -4916,6 +5120,19 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.0.tgz", "integrity": "sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==" }, + "node_modules/@types/styled-system": { + "version": "5.1.15", + "resolved": "https://registry.npmjs.org/@types/styled-system/-/styled-system-5.1.15.tgz", + "integrity": "sha512-1uls4wipZn8FtYFZ7upRVFDoEeOXTQTs2zuyOZPn02T6rjIxtvj2P2lG5qsxXHhKuKsu3thveCZrtaeLE/ibLg==", + "dependencies": { + "csstype": "^3.0.2" + } + }, + "node_modules/@types/styled-system/node_modules/csstype": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", + "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==" + }, "node_modules/@types/tapable": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.7.tgz", @@ -18039,22 +18256,25 @@ } }, "node_modules/polished": { - "version": "3.6.7", - "resolved": "https://registry.npmjs.org/polished/-/polished-3.6.7.tgz", - "integrity": "sha512-b4OViUOihwV0icb9PHmWbR+vPqaSzSAEbgLskvb7ANPATVXGiYv/TQFHQo65S53WU9i5EQ1I03YDOJW7K0bmYg==", + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/polished/-/polished-4.2.2.tgz", + "integrity": "sha512-Sz2Lkdxz6F2Pgnpi9U5Ng/WdWAUZxmHrNPoVlm3aAemxoy2Qy7LGjQg4uf8qKelDAUW94F4np3iH2YPf2qefcQ==", "dependencies": { - "@babel/runtime": "^7.9.2" + "@babel/runtime": "^7.17.8" }, "engines": { "node": ">=10" } }, "node_modules/polished/node_modules/@babel/runtime": { - "version": "7.12.5", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz", - "integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==", + "version": "7.18.3", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz", + "integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==", "dependencies": { "regenerator-runtime": "^0.13.4" + }, + "engines": { + "node": ">=6.9.0" } }, "node_modules/portfinder": { @@ -22327,6 +22547,12 @@ "node": ">=8" } }, + "node_modules/stylis": { + "version": "4.0.13", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz", + "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==", + "peer": true + }, "node_modules/supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -22820,16 +23046,20 @@ "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=" }, "node_modules/theme-ui": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/theme-ui/-/theme-ui-0.3.5.tgz", - "integrity": "sha512-yxooGhvkdjFDotDeIFehKo5k6NnLZ3gsLSe8EDe2aDcoWqg1mZjkjjr8EYtVCrK3mk/tYz97AT5BpEnUfamNCQ==", + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/theme-ui/-/theme-ui-0.14.5.tgz", + "integrity": "sha512-KrQ/5pFF/K/a+fortQg0w1VlTwhpu/b4u2pFZL1TMZLIHPwOsu/r4L3thJLkco7Gjj9lje8mIPx/L1I9Pqy3TQ==", "dependencies": { - "@theme-ui/color-modes": "0.3.5", - "@theme-ui/components": "0.3.5", - "@theme-ui/core": "0.3.5", - "@theme-ui/css": "0.3.5", - "@theme-ui/mdx": "0.3.5", - "@theme-ui/theme-provider": "0.3.5" + "@theme-ui/color-modes": "0.14.5", + "@theme-ui/components": "0.14.5", + "@theme-ui/core": "0.14.5", + "@theme-ui/css": "0.14.5", + "@theme-ui/mdx": "0.14.5", + "@theme-ui/theme-provider": "0.14.5" + }, + "peerDependencies": { + "react": ">16", + "react-dom": ">16" } }, "node_modules/throat": { @@ -26562,6 +26792,80 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "@emotion/babel-plugin": { + "version": "11.9.2", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz", + "integrity": "sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==", + "peer": true, + "requires": { + "@babel/helper-module-imports": "^7.12.13", + "@babel/plugin-syntax-jsx": "^7.12.13", + "@babel/runtime": "^7.13.10", + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.5", + "@emotion/serialize": "^1.0.2", + "babel-plugin-macros": "^2.6.1", + "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" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.18.3", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz", + "integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==", + "peer": true, + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, + "@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==", + "peer": true + }, + "@emotion/memoize": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", + "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==", + "peer": true + }, + "@emotion/serialize": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.3.tgz", + "integrity": "sha512-2mSSvgLfyV3q+iVh3YWgNlUc2a9ZlDU7DjuP5MjK3AXRR0dYigCrP99aeFtaB2L/hjfEZdSThn5dsZ0ufqbvsA==", + "peer": true, + "requires": { + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.4", + "@emotion/unitless": "^0.7.5", + "@emotion/utils": "^1.0.0", + "csstype": "^3.0.2" + } + }, + "@emotion/utils": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz", + "integrity": "sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ==", + "peer": true + }, + "csstype": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", + "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==", + "peer": true + }, + "escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "peer": true + } + } + }, "@emotion/cache": { "version": "10.0.29", "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", @@ -26614,6 +26918,82 @@ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" }, + "@emotion/react": { + "version": "11.9.0", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.9.0.tgz", + "integrity": "sha512-lBVSF5d0ceKtfKCDQJveNAtkC7ayxpVlgOohLgXqRwqWr9bOf4TZAFFyIcNngnV6xK6X4x2ZeXq7vliHkoVkxQ==", + "peer": true, + "requires": { + "@babel/runtime": "^7.13.10", + "@emotion/babel-plugin": "^11.7.1", + "@emotion/cache": "^11.7.1", + "@emotion/serialize": "^1.0.3", + "@emotion/utils": "^1.1.0", + "@emotion/weak-memoize": "^0.2.5", + "hoist-non-react-statics": "^3.3.1" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.18.3", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz", + "integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==", + "peer": true, + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, + "@emotion/cache": { + "version": "11.7.1", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz", + "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==", + "peer": true, + "requires": { + "@emotion/memoize": "^0.7.4", + "@emotion/sheet": "^1.1.0", + "@emotion/utils": "^1.0.0", + "@emotion/weak-memoize": "^0.2.5", + "stylis": "4.0.13" + } + }, + "@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==", + "peer": true + }, + "@emotion/serialize": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.3.tgz", + "integrity": "sha512-2mSSvgLfyV3q+iVh3YWgNlUc2a9ZlDU7DjuP5MjK3AXRR0dYigCrP99aeFtaB2L/hjfEZdSThn5dsZ0ufqbvsA==", + "peer": true, + "requires": { + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.4", + "@emotion/unitless": "^0.7.5", + "@emotion/utils": "^1.0.0", + "csstype": "^3.0.2" + } + }, + "@emotion/sheet": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz", + "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==", + "peer": true + }, + "@emotion/utils": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz", + "integrity": "sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ==", + "peer": true + }, + "csstype": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", + "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==", + "peer": true + } + } + }, "@emotion/serialize": { "version": "0.11.15", "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.15.tgz", @@ -26631,36 +27011,6 @@ "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz", "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==" }, - "@emotion/styled": { - "version": "10.0.27", - "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz", - "integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==", - "requires": { - "@emotion/styled-base": "^10.0.27", - "babel-plugin-emotion": "^10.0.27" - } - }, - "@emotion/styled-base": { - "version": "10.0.27", - "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.27.tgz", - "integrity": "sha512-ufHM/HhE3nr309hJG9jxuFt71r6aHn7p+bwXduFxcwPFEfBIqvmZUMtZ9YxIsY61PVwK3bp4G1XhaCzy9smVvw==", - "requires": { - "@babel/runtime": "^7.5.5", - "@emotion/is-prop-valid": "0.8.6", - "@emotion/serialize": "^0.11.15", - "@emotion/utils": "0.11.3" - }, - "dependencies": { - "@emotion/is-prop-valid": { - "version": "0.8.6", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.6.tgz", - "integrity": "sha512-mnZMho3Sq8BfzkYYRVc8ilQTnc8U02Ytp6J1AwM6taQStZ3AhsEJBX2LzhA/LJirNCwM2VtHL3VFIZ+sNJUgUQ==", - "requires": { - "@emotion/memoize": "0.7.4" - } - } - } - }, "@emotion/stylis": { "version": "0.8.5", "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", @@ -27835,9 +28185,14 @@ } }, "@mdx-js/react": { - "version": "1.6.22", - "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz", - "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==" + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-2.1.1.tgz", + "integrity": "sha512-7zlZDf5xmWH8I0kFE4DG91COOkxjaW9DX5f1HWztZpFcVua2gJgMYfIkFaDpO/DH/tWi6Mz+OheW4194r15igg==", + "peer": true, + "requires": { + "@types/mdx": "^2.0.0", + "@types/react": ">=16" + } }, "@nodelib/fs.scandir": { "version": "2.1.5", @@ -28553,72 +28908,87 @@ } }, "@theme-ui/color": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/@theme-ui/color/-/color-0.3.5.tgz", - "integrity": "sha512-PVzZfo22woVJ7zeJqkWZba04jVuXL4fWmR14WMNdzRivFRs1gr9XD5fYymOmwI8quKDR2IpI5GHqUSybhzTLPQ==", + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/@theme-ui/color/-/color-0.14.5.tgz", + "integrity": "sha512-c4ouNlGsRqKzZVXVfW/JMjmbGVIQd0qBnHmfCk/VfmA1vYoPZ/BIRxysEUu3eZRZGV5HnhkUyPbe42VEAtoNvQ==", "requires": { - "@theme-ui/css": "0.3.5", - "polished": "^3.4.1" + "@theme-ui/css": "0.14.5", + "polished": "^4.0.5" } }, "@theme-ui/color-modes": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/@theme-ui/color-modes/-/color-modes-0.3.5.tgz", - "integrity": "sha512-3n5ExAnp1gAuVVFdGF2rRLyrVsa7qtmUXx+gj1wPJsADq23EE4ctkppC+aIfPFxT196WhR8fjErrVuO7Rh+wAg==", + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/@theme-ui/color-modes/-/color-modes-0.14.5.tgz", + "integrity": "sha512-cblrNDonr0sqPY9xRNcRLc4mDud9W59BxgTqS6GznB4fdnztV9FgN488JODbo4uHiHMZddhno0Vb3f/bbs6jsQ==", "requires": { - "@emotion/core": "^10.0.0", - "@theme-ui/core": "0.3.5", - "@theme-ui/css": "0.3.5", + "@theme-ui/core": "0.14.5", + "@theme-ui/css": "0.14.5", "deepmerge": "^4.2.2" } }, "@theme-ui/components": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/@theme-ui/components/-/components-0.3.5.tgz", - "integrity": "sha512-RdWwnN43H1Tq80lGCu6icNuYCWoHHNtwH+LJGaGfiPkv/uMXWrwzKPLMiAuYM5b3ofKtmdaAcxZLjqAld97jkw==", + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/@theme-ui/components/-/components-0.14.5.tgz", + "integrity": "sha512-V1h7j4yUsIbS6oHd5ke7ogCWq7ng31vzpUkK3xGI2acV+N0jfJNf7CfG6AaJfiwP0kAZhtCbIMvFsRWbRyvEnA==", "requires": { - "@emotion/core": "^10.0.0", - "@emotion/styled": "^10.0.0", "@styled-system/color": "^5.1.2", "@styled-system/should-forward-prop": "^5.1.2", "@styled-system/space": "^5.1.2", - "@theme-ui/css": "0.3.5" + "@theme-ui/css": "0.14.5", + "@types/styled-system": "^5.1.13" } }, "@theme-ui/core": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/@theme-ui/core/-/core-0.3.5.tgz", - "integrity": "sha512-80gbG4BW0ZQgZ8TWSG7vY72uXDxmkI/GttjpJee7AJlWVrPh7RCD2E3cuFPjqXzt7o4BJ9lZSHmTXcLzixNtRw==", + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/@theme-ui/core/-/core-0.14.5.tgz", + "integrity": "sha512-fyllFax0hnABTMS3ryKP0w1oa2oHCE4xUKRZMwyA46ldV3pe3C4to8SmlF7x6RgSlsyrwdpEm34aB1ZgHsWrQg==", "requires": { - "@emotion/core": "^10.0.0", - "@theme-ui/css": "0.3.5", + "@theme-ui/css": "0.14.5", + "@theme-ui/parse-props": "0.14.5", "deepmerge": "^4.2.2" } }, "@theme-ui/css": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/@theme-ui/css/-/css-0.3.5.tgz", - "integrity": "sha512-XqsyXmifbnHOui1flSq4V7Lb3U+06Dbn2Q/leyr/cRd6Xgc0naiztdmD0MbXNvxgU51a2Ur9hyP4PnO5wE0yRg==" + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/@theme-ui/css/-/css-0.14.5.tgz", + "integrity": "sha512-EZztsPXJEg8rceTRGwWDD++d9QFSwEkl5913BvWmWTmB/Ips91ZIpnTbhfVRbG3bgUa+9lc1VwSEHOsHkN5mgw==", + "requires": { + "csstype": "^3.0.10" + }, + "dependencies": { + "csstype": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", + "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==" + } + } }, "@theme-ui/mdx": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/@theme-ui/mdx/-/mdx-0.3.5.tgz", - "integrity": "sha512-KMf5kkEcItQ3qIj7dston/kBOZc82ST2R0pUcyk/u8ZclX4ingRtZkMxm2zpmxybzdSUY3DIKf2MTK9CxUSpOQ==", + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/@theme-ui/mdx/-/mdx-0.14.5.tgz", + "integrity": "sha512-iYYsvo6TZAxc9frXJWUijEYLmZltbsv3xFfBptA2iaw8iDj/Aw2ggtHpVyGVXGAgS09vfgH+ebFuzup61ADdDw==", "requires": { - "@emotion/core": "^10.0.0", - "@emotion/styled": "^10.0.0", - "@mdx-js/react": "^1.0.0" + "@theme-ui/core": "0.14.5", + "@theme-ui/css": "0.14.5" + } + }, + "@theme-ui/parse-props": { + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/@theme-ui/parse-props/-/parse-props-0.14.5.tgz", + "integrity": "sha512-VB4/eH3v+1hXkzVWW0pahNdooG8gEreUXMyizR5TsJffy8KwjW6CsZJheoDJhyRfFk2nLhi1M0PjA+01lxL1qg==", + "requires": { + "@theme-ui/css": "0.14.5" } }, "@theme-ui/theme-provider": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/@theme-ui/theme-provider/-/theme-provider-0.3.5.tgz", - "integrity": "sha512-C1kVsGyrh/pqO/j4+KSF5IvVW1DOnZoQmpaJ9EjyU4bqY0PCTZfuNdNPfydKaDWiYxrKGXKBeX0xjvLLU6R0zQ==", + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/@theme-ui/theme-provider/-/theme-provider-0.14.5.tgz", + "integrity": "sha512-FHT2FLQB412USzW/JX7UXXcJXdFyEDcwwaOXrR5caHX+XDb61k1tkXhT7fjnCpEx+z7rOeCXjxai3sQGk5SFNg==", "requires": { - "@emotion/core": "^10.0.0", - "@theme-ui/color-modes": "0.3.5", - "@theme-ui/core": "0.3.5", - "@theme-ui/mdx": "0.3.5" + "@theme-ui/color-modes": "0.14.5", + "@theme-ui/core": "0.14.5", + "@theme-ui/css": "0.14.5", + "@theme-ui/mdx": "0.14.5" } }, "@tippyjs/react": { @@ -28847,6 +29217,12 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=" }, + "@types/mdx": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.2.tgz", + "integrity": "sha512-mJGfgj4aWpiKb8C0nnJJchs1sHBHn0HugkVfqqyQi7Wn6mBRksLeQsPOFvih/Pu8L1vlDzfe/LidhVHBeUk3aQ==", + "peer": true + }, "@types/minimatch": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.4.tgz", @@ -28917,6 +29293,21 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.0.tgz", "integrity": "sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==" }, + "@types/styled-system": { + "version": "5.1.15", + "resolved": "https://registry.npmjs.org/@types/styled-system/-/styled-system-5.1.15.tgz", + "integrity": "sha512-1uls4wipZn8FtYFZ7upRVFDoEeOXTQTs2zuyOZPn02T6rjIxtvj2P2lG5qsxXHhKuKsu3thveCZrtaeLE/ibLg==", + "requires": { + "csstype": "^3.0.2" + }, + "dependencies": { + "csstype": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", + "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==" + } + } + }, "@types/tapable": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.7.tgz", @@ -39074,17 +39465,17 @@ } }, "polished": { - "version": "3.6.7", - "resolved": "https://registry.npmjs.org/polished/-/polished-3.6.7.tgz", - "integrity": "sha512-b4OViUOihwV0icb9PHmWbR+vPqaSzSAEbgLskvb7ANPATVXGiYv/TQFHQo65S53WU9i5EQ1I03YDOJW7K0bmYg==", + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/polished/-/polished-4.2.2.tgz", + "integrity": "sha512-Sz2Lkdxz6F2Pgnpi9U5Ng/WdWAUZxmHrNPoVlm3aAemxoy2Qy7LGjQg4uf8qKelDAUW94F4np3iH2YPf2qefcQ==", "requires": { - "@babel/runtime": "^7.9.2" + "@babel/runtime": "^7.17.8" }, "dependencies": { "@babel/runtime": { - "version": "7.12.5", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz", - "integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==", + "version": "7.18.3", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz", + "integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==", "requires": { "regenerator-runtime": "^0.13.4" } @@ -42533,6 +42924,12 @@ } } }, + "stylis": { + "version": "4.0.13", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz", + "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==", + "peer": true + }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -42905,16 +43302,16 @@ "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=" }, "theme-ui": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/theme-ui/-/theme-ui-0.3.5.tgz", - "integrity": "sha512-yxooGhvkdjFDotDeIFehKo5k6NnLZ3gsLSe8EDe2aDcoWqg1mZjkjjr8EYtVCrK3mk/tYz97AT5BpEnUfamNCQ==", - "requires": { - "@theme-ui/color-modes": "0.3.5", - "@theme-ui/components": "0.3.5", - "@theme-ui/core": "0.3.5", - "@theme-ui/css": "0.3.5", - "@theme-ui/mdx": "0.3.5", - "@theme-ui/theme-provider": "0.3.5" + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/theme-ui/-/theme-ui-0.14.5.tgz", + "integrity": "sha512-KrQ/5pFF/K/a+fortQg0w1VlTwhpu/b4u2pFZL1TMZLIHPwOsu/r4L3thJLkco7Gjj9lje8mIPx/L1I9Pqy3TQ==", + "requires": { + "@theme-ui/color-modes": "0.14.5", + "@theme-ui/components": "0.14.5", + "@theme-ui/core": "0.14.5", + "@theme-ui/css": "0.14.5", + "@theme-ui/mdx": "0.14.5", + "@theme-ui/theme-provider": "0.14.5" } }, "throat": { diff --git a/package.json b/package.json index e24f8324..1d4037fd 100644 --- a/package.json +++ b/package.json @@ -15,8 +15,8 @@ "@sentry/browser": "^6.6.0", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^9.5.0", - "@theme-ui/color": "^0.3.5", - "@theme-ui/components": "^0.3.5", + "@theme-ui/color": "^0.14.5", + "@theme-ui/components": "^0.14.5", "@tippyjs/react": "^4.2.6", "deepmerge": "^4.2.2", "eslint": "^7.32.0", @@ -39,7 +39,7 @@ "react-responsive": "^8.2.0", "react-router-dom": "^5.3.3", "react-scripts": "^4.0.3", - "theme-ui": "^0.3.5", + "theme-ui": "^0.14.5", "use-resize-observer": "^7.0.0" }, "repository": { diff --git a/src/Tooltip.js b/src/Tooltip.js index 6313db36..d9d80077 100644 --- a/src/Tooltip.js +++ b/src/Tooltip.js @@ -11,12 +11,11 @@ const Tooltip = ({ content, ...props }) => ( {content} } interactive={true} - theme='studio' sx={{ fontSize: '16px', - backgroundColor: '#43a472', - color: 'white', + backgroundColor: theme => theme.colors.tooltip, + color: theme => theme.colors.tooltip_text, lineHeight: 'normal', fontFamily: 'Open Sans', }} diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json index a363c65b..939acd47 100644 --- a/src/i18n/locales/de.json +++ b/src/i18n/locales/de.json @@ -137,10 +137,9 @@ "settings-back-to-recording": "Zurück zur Aufnahme", "settings-theme-appearance": "Aussehen", - "settings-theme-dark": "Zum dunklen Design wechseln", - "settings-theme-light": "Zum hellen Design wechseln", + "settings-theme-dark": "Dunkles Design", + "settings-theme-light": "Helles Design", "video-settings-open": "Videoeinstellungen öffnen", "video-settings-close": "Videoeinstellungen schließen" - } diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index f5dd3850..c899579a 100644 --- a/src/i18n/locales/en.json +++ b/src/i18n/locales/en.json @@ -138,11 +138,10 @@ "warning-missing-connection-settings": "Connection to Opencast is not fully established: uploading is disabled. Please configure the connection in <1>the settings (you won't lose your recording).", "settings-back-to-recording": "Back to recording", + "settings-theme-appearance": "Appearance", + "settings-theme-dark": "Darkmode", + "settings-theme-light": "Lightmode", "video-settings-open": "Open video settings", - "video-settings-close": "Close video settings", - - "settings-theme-appearance": "Appearance", - "settings-theme-dark": "Switch to Darkmode", - "settings-theme-light": "Switch to Lightmode" + "video-settings-close": "Close video settings" } diff --git a/src/style/global-style.js b/src/style/global-style.js index a7789052..1fafb3a7 100644 --- a/src/style/global-style.js +++ b/src/style/global-style.js @@ -34,26 +34,6 @@ button { 50% { opacity: 0.6 } to { opacity: 0.85 } } - -/* Remove outline for non-keyboard :focus */ -*:focus:not(:focus-visible) { - outline: none !important; - box-shadow: 0 0 0 rgb(255, 255, 255) !important; -} - -*:focus-visible { - outline: 5px solid #2e724f !important; - outline-offset: -5px; -} - -button:focus-visible { - outline: 5px solid #2e724f !important; - outline-offset: -3px; -} - -.tippy-box[data-theme~='studio'] > .tippy-arrow::before { - color: #43a472; -} `; export default GlobalStyle; diff --git a/src/theme.js b/src/theme.js index 6495afc4..b2200969 100644 --- a/src/theme.js +++ b/src/theme.js @@ -44,34 +44,38 @@ const base = { heights: { headerHeight: '3em' }, - useColorSchemeMediaQuery: true, + config: { + useColorSchemeMediaQuery: true, + useLocalStorage: false, + initialColorModeName: 'light', + }, colors: { text: '#000', background: '#fff', button_fg: '#fff', + button_bg: '#363636', primary: '#47af7a', - secondary: '#30c', - muted: '#888888', - highlight: '#3498db', error: '#f14668', gray: ['#363636', '#666666', '#aaaaaa', '#dddddd', '#f5f5f5'], - videoOverlay: 'rgba(255, 255, 255, 0.2)', element_bg: '#fff', notification_text: '#fff', + tooltip: '#363636', + tooltip_text: '#fff', + focus: '#2e724f', modes: { dark: { text: 'rgba(255, 255, 255, 0.87)', background: '#1C1C1E', button_fg: '#fff', - primary: '#47af7a', - secondary: '#30c', - muted: '#888888', - highlight: '#3498db', + button_bg: '#666666', + primary: '#388c61', error: 'rgba(241, 70, 104, 0.8)', gray: ['#f5f5f5', '#dddddd', '#aaaaaa', '#666666', '#363636'], - videoOverlay: 'rgba(255, 255, 255, 0.2)', element_bg: '#363636', - notification_text: 'rgba(255, 255, 255, 0.9)' + notification_text: 'rgba(255, 255, 255, 0.9)', + tooltip: '#dddddd', + tooltip_text: '#000', + focus: '#2e724f', } } }, @@ -132,6 +136,22 @@ const base = { '--theme-ui-colors-btn-hover': darken('primary', 0.03), '--theme-ui-colors-controls': '#000', '--theme-ui-colors-info': '#f5f5f5', + '*:focus:not(:focus-visible)': { + /* Remove outline for non-keyboard :focus */ + outline: 'none !important', + boxShadow: '0 0 0 rgb(255, 255, 255) !important', + }, + '*:focus-visible': { + outline: theme => `5px solid ${theme.colors.focus} !important`, + outlineOffset: '-5px', + }, + 'button:focus-visible': { + outline: theme => `5px solid ${theme.colors.focus} !important`, + outlineOffset: '-3px', + }, + '.tippy-box > .tippy-arrow::before': { + color: theme => `${theme.colors.tooltip}` + }, }, h1: { ...heading, diff --git a/src/ui/about.js b/src/ui/about.js index 4fb596bd..c1b1c669 100644 --- a/src/ui/about.js +++ b/src/ui/about.js @@ -1,7 +1,7 @@ //; -*- mode: rjsx;-*- /** @jsx jsx */ import React from 'react'; -import { jsx, Styled } from 'theme-ui'; +import { jsx, Themed } from 'theme-ui'; import { Container } from '@theme-ui/components'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faGlobeEurope, faEnvelope, faPhone } from '@fortawesome/free-solid-svg-icons'; @@ -9,43 +9,43 @@ import { faGlobeEurope, faEnvelope, faPhone } from '@fortawesome/free-solid-svg- function LegalNotices() { return (
- ELAN e.V. + ELAN e.V. - + The e-learning academic network (ELAN e.V.) is a German non-profit organization supporting higher-education organizations in all matters related to e-learning. Our services include practical tips about how to use digital technologies in education, legal advice and development of free, open-source software to support education. - + - Contact + Contact - + Dr. Norbert Kleinefeld, Geschäftsführer
Karlstr. 23
D-26123 Oldenburg - + - + {' '} - elan-ev.de + elan-ev.de
{' '} - kontakt@elan-ev.de + kontakt@elan-ev.de
{' '} - +49 441 998 666 10 - + +49 441 998 666 10 + - + Registergericht: Amtsgericht Oldenburg
Registernummer: VR 200644
USt.-ID-Nr.: DE 265901392 - +
); } @@ -55,73 +55,73 @@ function About(props) {
- Opencast Studio + Opencast Studio
- - A web-based recording studio for Opencast. - - + + A web-based recording studio for Opencast. + + Opencast Studio allows you to record your camera, your display and your microphoneʼs audio. You can then either download your recordings or upload them directly to an Opencast instance (usually the one of your university). - - + + This is free software under the terms of the{' '} - + MIT License - {' '} - developed by the ELAN e.V. in cooperation - with the ETH Zürich. - + {' '} + developed by the ELAN e.V. in cooperation + with the ETH Zürich. + - How it works - + How it works + Opencast Studio uses the recording capabilities built into modern browsers to record audio and video streams. The recording happens in the userʼs browser and no server is involved in the recording. - + { process.env.REACT_APP_INCLUDE_LEGAL_NOTICES === '1' && ( - Support - + Support + If you are experiencing any difficulties or found any bugs, please take a look at the{' '} - + issue tracker on GitHub - . + . Before filing a new issue, please check if one about your topic already exists. We regularly check incoming issues and do our best to address bugs in a timely manner. - - + + If you are interested in additional development or want to support the development of Opencast Studio, please contact{' '} - + opencast-support@elan-ev.de - . - + . + )} - Credits - + Credits + Thanks to the following people and institutions for contributing to this project: - +
  • - Duncan Smith for starting this + Duncan Smith for starting this project
  • - University of Cape Town (CILT) + University of Cape Town (CILT) {' '}for letting Duncan start the project
  • - ETH Zürich for financial support and + ETH Zürich for financial support and testing
  • - ELAN e.V. for the re-implementation + ELAN e.V. for the re-implementation and the ongoing development
  • @@ -131,18 +131,18 @@ function About(props) { { process.env.REACT_APP_INCLUDE_LEGAL_NOTICES === '1' && } - Version - + Version + Build date {process.env.REACT_APP_BUILD_DATE || '?'}, commit{' '} - {process.env.REACT_APP_GIT_SHA || '?'} - . - + . +
); diff --git a/src/ui/settings/colorMode.js b/src/ui/settings/colorMode.js index 599509d0..33abe27e 100644 --- a/src/ui/settings/colorMode.js +++ b/src/ui/settings/colorMode.js @@ -2,10 +2,7 @@ /** @jsx jsx */ import { jsx, useColorMode } from 'theme-ui'; -import { Button } from '@theme-ui/components'; import { useTranslation } from 'react-i18next'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons"; import { SettingsSection } from './elements'; @@ -13,35 +10,21 @@ const ColorModeSettings = () => { const { t } = useTranslation(); const [colorMode, setColorMode] = useColorMode(); - const dark = t('settings-theme-dark'); - const light = t('settings-theme-light'); + const darkmode = t('settings-theme-dark'); + const lightmode = t('settings-theme-light'); return ( - + ); }; -const ThemeIcon = () => { - const [colorMode] = useColorMode(); - - return( -
- -
- ) -}; - export default ColorModeSettings; diff --git a/src/ui/settings/elements.js b/src/ui/settings/elements.js index 34eb9523..ee2446a8 100644 --- a/src/ui/settings/elements.js +++ b/src/ui/settings/elements.js @@ -1,6 +1,6 @@ //; -*- mode: rjsx;-*- /** @jsx jsx */ -import { jsx, Styled } from 'theme-ui'; +import { jsx, Themed } from 'theme-ui'; import { Box } from '@theme-ui/components'; @@ -12,7 +12,7 @@ export const SettingsSection = ({ title, children }) => ( } }} > - `1px solid ${theme.colors.gray[2]}`, pb: 1, @@ -21,7 +21,7 @@ export const SettingsSection = ({ title, children }) => ( }} > {title} - + {children} ); diff --git a/src/ui/settings/page.js b/src/ui/settings/page.js index 607b07fa..591eff51 100644 --- a/src/ui/settings/page.js +++ b/src/ui/settings/page.js @@ -1,6 +1,6 @@ //; -*- mode: rjsx;-*- /** @jsx jsx */ -import { jsx, Styled } from 'theme-ui'; +import { jsx, Themed } from 'theme-ui'; import { useTranslation } from 'react-i18next'; import { Box } from '@theme-ui/components'; @@ -16,7 +16,7 @@ const SettingsPage = ({ settingsManager }) => { return (
- {t('settings-header')} + {t('settings-header')}
diff --git a/src/ui/studio/audio-setup/index.js b/src/ui/studio/audio-setup/index.js index a5eca8e7..7010c50e 100644 --- a/src/ui/studio/audio-setup/index.js +++ b/src/ui/studio/audio-setup/index.js @@ -1,6 +1,6 @@ //; -*- mode: rjsx;-*- /** @jsx jsx */ -import { jsx, Styled } from 'theme-ui'; +import { jsx, Themed } from 'theme-ui'; import { Flex, Heading, Spinner, Text } from '@theme-ui/components'; import { useEffect, Fragment } from 'react'; @@ -72,7 +72,7 @@ const SourceSelection = ({ selectNoAudio, selectMicrophone, backToVideoSetup }) return ( - {t('sources-audio-question')} + {t('sources-audio-question')} { return ( - { t('sources-audio-microphone-selected') } + { t('sources-audio-microphone-selected') }
( export const PauseButton = props => ( ); @@ -64,7 +64,7 @@ export const RecordButton = props => ( export const ResumeButton = props => ( ); diff --git a/src/ui/studio/review/index.js b/src/ui/studio/review/index.js index c5ac7c10..70c119c9 100644 --- a/src/ui/studio/review/index.js +++ b/src/ui/studio/review/index.js @@ -1,6 +1,6 @@ //; -*- mode: rjsx;-*- /** @jsx jsx */ -import { jsx, Styled, useColorMode } from 'theme-ui'; +import { jsx, Themed, useColorMode } from 'theme-ui'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faTrash, faPlay, faPause } from '@fortawesome/free-solid-svg-icons'; @@ -57,7 +57,7 @@ export default function Review(props) { return ( - { t('review-heading') } + { t('review-heading') } {prematureRecordingEnd && ( @@ -243,7 +243,7 @@ const VideoControls = ({ currentTime, previewController }) => { />}
); const PrefValue = ({ children }) => ( -
+
`5px solid ${theme.colors.primary}`, + outlineOffset: '-3px', + } + }}> { children }
); @@ -430,7 +440,7 @@ const RadioButton = ({ id, value, checked, name, onChange, label, isExpanded }) bg: 'gray.0', color: 'background', fontWeight: 'bold', - }, + } }} />