diff --git a/examples/nextjs-with-typescript/app/page-state/index.ts b/examples/nextjs-with-typescript/app/page-state/index.ts
index 0ed7a208f..b293240fd 100644
--- a/examples/nextjs-with-typescript/app/page-state/index.ts
+++ b/examples/nextjs-with-typescript/app/page-state/index.ts
@@ -5,6 +5,8 @@ import { Dispatch, Reducer, useEffect, useReducer } from 'react';
 
 const DEFAULT_INITIAL_STATE = Object.freeze({}) as Readonly<Record<string, any>>;
 
+export const isObject = (x: unknown): x is object => (x && typeof x === 'object' && !Array.isArray(x));
+
 export const defaultToInitialState = <T extends Record<string, any> = Record<string, any>>(
   query: NextParsedUrlQuery,
   ..._additionalArgs: any[]
@@ -42,10 +44,30 @@ export const reducer = <T extends Record<string, any> = Record<string, any>>(
   const { type, value } = action;
   switch (type) {
     case ActionType.UPDATE: {
-      return {
-        ...state,
-        ...value,
+      const updateFn = typeof value === 'function' ? value : (prevState) => {
+        return Object.entries(value).reduce((nextState, [name, value]) => {
+          let nextValue = value;
+          if (isObject(value) && isObject(nextState[name])) {
+            // nextValue = { ...nextState[name], ...value };
+            nextValue = Object.entries(value).reduce((nextValue, [newValueKey, newValueValue]) => {
+              // Treat undefined (but not null) as a removal/delete condition
+              if (newValueValue === undefined) {
+                delete nextValue[newValueKey];
+              } else {
+                nextValue[newValueKey] = newValueValue;
+              }
+              return nextValue;
+            }, { ...nextState[name] });
+            // Also remove empty objects (aka no remaining keys after prior logic)
+            if (!Object.keys(nextValue).length) {
+              nextValue = undefined;
+            }
+          }
+          nextState[name] = nextValue;
+          return nextState;
+        }, { ...prevState });
       };
+      return updateFn(state);
     }
     default: {
       return state;
diff --git a/examples/nextjs-with-typescript/components/ComponentCodeRenderer.tsx b/examples/nextjs-with-typescript/components/ComponentCodeRenderer.tsx
index 567aee63f..d458c5db8 100644
--- a/examples/nextjs-with-typescript/components/ComponentCodeRenderer.tsx
+++ b/examples/nextjs-with-typescript/components/ComponentCodeRenderer.tsx
@@ -1,27 +1,43 @@
+import { Box, IconButton, Tooltip } from '@mui/material';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+
 const toValueString = (value: any) => {
-    if (['boolean', 'number', 'string'].includes(typeof value)) return `${JSON.stringify(value)}`;
-    if (Array.isArray(value)) return `[${value.map(toValueString).join(', ')}]`;
-    if (typeof value === 'object') return `{ ${Object.entries(value).map(([key, entryValue]) => `${key}: ${toValueString(entryValue)}`).join(', ')} }`;
-    return value;
-  };
+  if (['boolean', 'number', 'string'].includes(typeof value)) return `${JSON.stringify(value)}`;
+  if (Array.isArray(value)) return `[${value.map(toValueString).join(', ')}]`;
+  if (typeof value === 'object')
+    return `{ ${Object.entries(value)
+      .map(([key, entryValue]) => `${key}: ${toValueString(entryValue)}`)
+      .join(', ')} }`;
+  return value;
+};
 
-const ComponentCodeRenderer = ({ state, component = 'MuxPlayer' }: { state: Record<string, any>; component?: string; }) => {
-    const stateEntries = Object.entries(state).filter(([,value]) => value != undefined);
-    const propsStr = stateEntries.length
-      ? `\n${stateEntries.map(([key, value]) => `  ${key}={${toValueString(value)}}`).join('\n')}\n`
-      : '';
-    const codeStr = `<${component}${propsStr}/>`;
-    const copyToClipboard = () => {
-      navigator.clipboard?.writeText(codeStr);
-    };
-    return (
-      <div className="code-renderer" style={{}}>
-        <pre>
-          <code>{codeStr}</code>
-        </pre>
-        <button onClick={copyToClipboard}>Copy code</button>
-      </div>
-    );
+const ComponentCodeRenderer = ({
+  state,
+  component = 'MuxPlayer',
+}: {
+  state: Record<string, any>;
+  component?: string;
+}) => {
+  const stateEntries = Object.entries(state).filter(([, value]) => value != undefined);
+  const propsStr = stateEntries.length
+    ? `\n${stateEntries.map(([key, value]) => `  ${key}={${toValueString(value)}}`).join('\n')}\n`
+    : '';
+  const codeStr = `<${component}${propsStr}/>`;
+  const copyToClipboard = () => {
+    navigator.clipboard?.writeText(codeStr);
   };
+  return (
+    <Box style={{ position: 'relative' }}>
+      <Tooltip title={'Copy to clipboard'}>
+        <IconButton style={{ position: 'absolute', top: 0, right: 0 }} onClick={copyToClipboard}>
+          <ContentCopyIcon />
+        </IconButton>
+      </Tooltip>
+      <pre>
+        <code>{codeStr}</code>
+      </pre>
+    </Box>
+  );
+};
 
-  export default ComponentCodeRenderer;
\ No newline at end of file
+export default ComponentCodeRenderer;
diff --git a/examples/nextjs-with-typescript/components/URLPathRenderer.tsx b/examples/nextjs-with-typescript/components/URLPathRenderer.tsx
index 9c9100e50..b7ae6c389 100644
--- a/examples/nextjs-with-typescript/components/URLPathRenderer.tsx
+++ b/examples/nextjs-with-typescript/components/URLPathRenderer.tsx
@@ -1,24 +1,39 @@
+import { Box, IconButton, Tooltip, Typography } from '@mui/material';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import Link from 'next/link';
+
 const URLPathRenderer = ({
   state,
   location: { origin, pathname } = {
     origin: '',
-    pathname: './'
+    pathname: './',
   },
-}: { state: Record<string, any>; location?: Pick<Location, 'origin' | 'pathname'>; }) => {
-  const stateEntries = Object.entries(state).filter(([,value]) => value != undefined);
+}: {
+  state: Record<string, any>;
+  location?: Pick<Location, 'origin' | 'pathname'>;
+}) => {
+  const stateEntries = Object.entries(state).filter(([, value]) => value != undefined);
   const urlSearchParamsStr = stateEntries.length
     ? `?${new URLSearchParams(Object.fromEntries(stateEntries.map(([k, v]) => [k, JSON.stringify(v)]))).toString()}`
-    : ''
+    : '';
   const urlStr = `${origin}${pathname}${urlSearchParamsStr}`;
   const copyToClipboard = () => {
     navigator.clipboard?.writeText(urlStr);
   };
   return (
-    <div className="url-renderer">
-      <a href={urlStr} target="_blank">{urlStr}</a>
-      <button onClick={copyToClipboard}>Copy URL</button>
-    </div>
+    <Box style={{ display: 'flex', alignItems: 'center', textOverflow: 'ellipsis' }}>
+      <Tooltip title={urlStr}>
+        <Link href={urlStr} style={{ minWidth: 0 }} target="_blank">
+          <Typography noWrap>{urlStr}</Typography>
+        </Link>
+      </Tooltip>
+      <Tooltip title={'Copy to clipboard'}>
+        <IconButton onClick={copyToClipboard}>
+          <ContentCopyIcon />
+        </IconButton>
+      </Tooltip>
+    </Box>
   );
 };
 
-export default URLPathRenderer;
\ No newline at end of file
+export default URLPathRenderer;
diff --git a/examples/nextjs-with-typescript/components/renderers.tsx b/examples/nextjs-with-typescript/components/renderers.tsx
index 8800828f9..3fa3c7017 100644
--- a/examples/nextjs-with-typescript/components/renderers.tsx
+++ b/examples/nextjs-with-typescript/components/renderers.tsx
@@ -1,6 +1,30 @@
-import { Fragment, ReactNode } from 'react';
+import {
+  Box,
+  Checkbox,
+  FormControl,
+  FormControlLabel,
+  InputLabel,
+  NativeSelect,
+  TextField,
+  Chip,
+  OutlinedInput,
+  MenuItem,
+  Select,
+  Container,
+} from '@mui/material';
+import CancelIcon from '@mui/icons-material/Cancel';
+import { useTheme } from '@mui/material/styles';
+import type { SelectChangeEvent } from '@mui/material/Select';
+import type { ReactNode } from 'react';
+import type { Theme } from '@mui/material/styles';
 
-export const toWordsFromCamel = (string: string) => {
+export const toWordsFromKeyName = (string: string) => {
+  if (string.includes('.')) {
+    return string.split('.').map(toWordsFromKeyName).join(': ');
+  }
+  if (string.includes('_')) {
+    return string.split('_').map(toWordsFromKeyName).join(' ');
+  }
   const first = string[0].toUpperCase();
   const rest = string.slice(1);
   return `${first}${rest.replace(/[A-Z]/g, (match) => ` ${match}`)}`;
@@ -19,19 +43,23 @@ export const BooleanRenderer = ({
   removeFalse?: boolean;
   onChange: (obj: any) => void;
 }) => {
-  const labelStr = label ?? toWordsFromCamel(name);
+  const labelStr = label ?? toWordsFromKeyName(name);
   return (
-    <div>
-      <label htmlFor={`${name}-control`}>
-        {labelStr} (<code>{name}</code>)
-      </label>
-      <input
-        id={`${name}-control`}
-        type="checkbox"
-        onChange={({ target: { checked } }) => onChange({ [name]: removeFalse && !checked ? undefined : checked })}
-        checked={value ?? false}
+    <Container sx={{ p: 1, flexGrow: 1, flexShrink: 0, flexBasis: 0, border: '1px dashed grey' }}>
+      <FormControlLabel
+        control={
+          <Checkbox
+            id={`${name}-control`}
+            defaultChecked={value}
+            onChange={({ target: { checked } }) => {
+              const changeValue = removeFalse && !checked ? undefined : checked;
+              onChange(toChangeObject(name, changeValue));
+            }}
+          />
+        }
+        label={labelStr}
       />
-    </div>
+    </Container>
   );
 };
 
@@ -43,6 +71,7 @@ export const NumberRenderer = ({
   min,
   max,
   step,
+  placeholder,
 }: {
   name: string;
   value: number | undefined;
@@ -51,23 +80,31 @@ export const NumberRenderer = ({
   min?: number;
   max?: number;
   step?: number;
+  placeholder?: string;
 }) => {
-  const labelStr = label ?? toWordsFromCamel(name);
+  const labelStr = label ?? toWordsFromKeyName(name);
   return (
-    <div>
-      <label htmlFor={`${name}-control`}>
-        {labelStr} (<code>{name}</code>)
-      </label>
-      <input
+    <Container sx={{ p: 1, flexGrow: 1, flexShrink: 0, flexBasis: 0, border: '1px dashed grey' }}>
+      <TextField
+        sx={{ width: 1, display: 'inline-block' }}
         id={`${name}-control`}
         type="number"
-        min={min}
-        max={max}
-        step={step}
-        onChange={({ target: { value } }) => onChange({ [name]: value ? +value : undefined })}
-        value={value ?? ''}
+        label={labelStr}
+        defaultValue={value}
+        placeholder={placeholder}
+        slotProps={{
+          htmlInput: {
+            min,
+            max,
+            step,
+          },
+        }}
+        onChange={({ target: { value } }) => {
+          const changeValue = value ? +value : undefined;
+          onChange(toChangeObject(name, changeValue));
+        }}
       />
-    </div>
+    </Container>
   );
 };
 
@@ -84,20 +121,21 @@ export const TextRenderer = ({
   onChange: (obj: any) => void;
   placeholder?: string;
 }) => {
-  const labelStr = label ?? toWordsFromCamel(name);
+  const labelStr = label ?? toWordsFromKeyName(name);
   return (
-    <div>
-      <label htmlFor={`${name}-control`}>
-        {labelStr} (<code>{name}</code>)
-      </label>
-      <input
+    <Container sx={{ p: 1, flexGrow: 1, flexShrink: 0, flexBasis: 0, border: '1px dashed grey' }}>
+      <TextField
         id={`${name}-control`}
         type="text"
-        onChange={({ target: { value } }) => onChange({ [name]: value ? value : undefined })}
-        value={value ?? ''}
+        label={labelStr}
+        defaultValue={value}
         placeholder={placeholder}
+        onChange={({ target: { value } }) => {
+          const changeValue = value ? value : undefined;
+          onChange(toChangeObject(name, changeValue));
+        }}
       />
-    </div>
+    </Container>
   );
 };
 
@@ -114,20 +152,21 @@ export const URLRenderer = ({
   onChange: (obj: any) => void;
   placeholder?: string;
 }) => {
-  const labelStr = label ?? toWordsFromCamel(name);
+  const labelStr = label ?? toWordsFromKeyName(name);
   return (
-    <div>
-      <label htmlFor={`${name}-control`}>
-        {labelStr} (<code>{name}</code>)
-      </label>
-      <input
+    <Container sx={{ p: 1, flexGrow: 1, flexShrink: 0, flexBasis: 0, border: '1px dashed grey' }}>
+      <TextField
         id={`${name}-control`}
         type="url"
-        onChange={({ target: { value } }) => onChange({ [name]: value ? value : undefined })}
-        value={value ?? ''}
+        label={labelStr}
+        defaultValue={value}
         placeholder={placeholder}
+        onChange={({ target: { value } }) => {
+          const changeValue = value ? value : undefined;
+          onChange(toChangeObject(name, changeValue));
+        }}
       />
-    </div>
+    </Container>
   );
 };
 
@@ -142,19 +181,21 @@ export const ColorRenderer = ({
   label?: string;
   onChange: (obj: any) => void;
 }) => {
-  const labelStr = label ?? toWordsFromCamel(name);
+  const labelStr = label ?? toWordsFromKeyName(name);
   return (
-    <div>
-      <label htmlFor={`${name}-control`}>
-        {labelStr} (<code>{name}</code>)
-      </label>
-      <input
+    <Container sx={{ p: 1, flexGrow: 1, flexShrink: 0, flexBasis: 0, border: '1px dashed grey' }}>
+      <TextField
         id={`${name}-control`}
         type="color"
-        onChange={({ target: { value } }) => onChange({ [name]: value ? value : undefined })}
-        value={value ?? '#000000'}
+        style={{ minWidth: 100 }}
+        label={labelStr}
+        defaultValue={value ?? '#000000'}
+        onChange={({ target: { value } }) => {
+          const changeValue = value ? value : undefined;
+          onChange(toChangeObject(name, changeValue));
+        }}
       />
-    </div>
+    </Container>
   );
 };
 
@@ -182,43 +223,61 @@ export const EnumRenderer = ({
   values: any[];
   formatter?: (enumValue: any) => ReactNode;
 }) => {
-  const labelStr = label ?? toWordsFromCamel(name);
+  const labelStr = label ?? toWordsFromKeyName(name);
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
-      <label>
-        {labelStr} (<code>{name}</code>)
-      </label>
-      <div>
-        <input
-          id={`${name}-none-control`}
-          type="radio"
-          onChange={() => onChange({ [name]: undefined })}
-          value=""
-          checked={value == undefined}
-        />
-        <label htmlFor={`${name}-none-control`}>None</label>
-        {values.map((enumValue, i) => {
-          return (
-            <Fragment key={`${name}-${enumValue}`}>
-              <input
-                id={`${name}-${enumValue}-control`}
-                type="radio"
-                onChange={() => onChange({ [name]: values[i] })}
-                value={typeof enumValue === 'string' ? enumValue : enumValue?.toString()}
-                checked={value === enumValue}
-              />
-              <label htmlFor={`${name}-${enumValue}-control`}>{formatter(enumValue)}</label>
-            </Fragment>
-          );
-        })}
-      </div>
-    </div>
+    <Container sx={{ p: 1, flexGrow: 1, flexShrink: 0, flexBasis: 0, border: '1px dashed grey' }}>
+      <FormControl>
+        <InputLabel variant="standard" htmlFor={`${name}-uncontrolled-native`} shrink>
+          {labelStr}
+        </InputLabel>
+        <NativeSelect
+          inputProps={{
+            name,
+            id: `${name}-uncontrolled-native`,
+          }}
+          defaultValue={value ?? ''}
+          onChange={({ target: { value } }) => {
+            const changeValue = value ? value : undefined;
+            onChange(toChangeObject(name, changeValue));
+          }}
+        >
+          <option id={`${name}-none-control`} value="">
+            (None)
+          </option>
+          {values.map((enumValue) => {
+            return (
+              <option key={`${name}-${enumValue}`} id={`${name}-${enumValue}-control`} value={enumValue}>
+                {formatter(enumValue)}
+              </option>
+            );
+          })}
+        </NativeSelect>
+      </FormControl>
+    </Container>
   );
 };
 
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+const MenuProps = {
+  PaperProps: {
+    style: {
+      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+      width: 250,
+    },
+  },
+};
+
+function getStyles(name: string, personName: readonly string[], theme: Theme) {
+  return {
+    fontWeight:
+      personName.indexOf(name) === -1 ? theme.typography.fontWeightRegular : theme.typography.fontWeightMedium,
+  };
+}
+
 export const EnumMultiSelectRenderer = ({
   name,
-  value,
+  value = [],
   label,
   onChange,
   values,
@@ -229,32 +288,72 @@ export const EnumMultiSelectRenderer = ({
   onChange: (obj: any) => void;
   values: any[];
 }) => {
-  const labelStr = label ?? toWordsFromCamel(name);
+  const labelStr = label ?? toWordsFromKeyName(name);
+  const theme = useTheme();
+
+  const handleChange = (event: SelectChangeEvent<any[]>) => {
+    const {
+      target: { value },
+    } = event;
+    let changeValue = typeof value === 'string' ? value.split(',') : value;
+    if (Array.isArray(changeValue)) {
+      changeValue = changeValue.filter((x) => !!x);
+      if (!changeValue.length) {
+        changeValue = undefined;
+      }
+    }
+    onChange(toChangeObject(name, changeValue));
+  };
+
   return (
-    <div>
-      <label htmlFor={`${name}-control`}>
-        {labelStr} (<code>{name}</code>)
-      </label>
-      <select
-        id={`${name}-control`}
-        multiple
-        size={values.length}
-        defaultValue={value ?? []}
-        onChange={({ target: { selectedOptions } }) => {
-          const currentValues = selectedOptions?.length
-            ? Array.from(selectedOptions, ({ value }) => values.find((enumValue) => enumValue.toString() === value))
-            : undefined;
-          onChange({ [name]: currentValues });
-        }}
-      >
-        {values.map((enumValue) => {
-          return (
-            <option key={`${name}-${enumValue}-option`} value={enumValue}>
+    <Container sx={{ p: 1, flexGrow: 1, flexShrink: 0, flexBasis: 0, border: '1px dashed grey' }}>
+      <FormControl sx={{ width: 300 }}>
+        <InputLabel id="demo-multiple-chip-label">{labelStr}</InputLabel>
+        <Select
+          labelId="demo-multiple-chip-label"
+          id="demo-multiple-chip"
+          multiple
+          value={value}
+          onChange={handleChange}
+          input={<OutlinedInput id="select-multiple-chip" label="Chip" />}
+          renderValue={(selected) => {
+            return (
+              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+                {selected
+                  .filter((x) => !!x)
+                  .map((selectedEnumValue) => (
+                    <Chip
+                      key={selectedEnumValue}
+                      label={selectedEnumValue}
+                      deleteIcon={<CancelIcon onMouseDown={(event) => event.stopPropagation()} />}
+                      onDelete={() => {
+                        const changeValue = value.filter((enumValue) => enumValue != selectedEnumValue);
+                        onChange(toChangeObject(name, changeValue.length ? changeValue : undefined));
+                      }}
+                    />
+                  ))}
+              </Box>
+            );
+          }}
+          MenuProps={MenuProps}
+        >
+          {values.map((enumValue) => (
+            <MenuItem key={`${name}-${enumValue}-option`} value={enumValue} style={getStyles(enumValue, value, theme)}>
               {`${enumValue}`}
-            </option>
-          );
-        })}
-      </select>
-    </div>
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </Container>
   );
 };
+
+// NOTE: Placing this function at the bottom bc generic syntax messes up code highlighting in VSCode. This at least keeps the jank narrow. (CJP)
+export const toChangeObject = <T = undefined,>(name: string, value: T) => {
+  // NOTE: Currently only support depth=1
+  if (name.includes('.')) {
+    const [name1, name2] = name.split('.');
+    return { [name1]: { [name2]: value } };
+  }
+  return { [name]: value };
+};
diff --git a/examples/nextjs-with-typescript/harness-style-overrides.css b/examples/nextjs-with-typescript/harness-style-overrides.css
new file mode 100644
index 000000000..7265f42e5
--- /dev/null
+++ b/examples/nextjs-with-typescript/harness-style-overrides.css
@@ -0,0 +1,7 @@
+/* Used to override global stylesheet styles */
+
+body {
+  max-width: initial;
+  width: 100vw;
+  height: 100vh;
+}
diff --git a/examples/nextjs-with-typescript/package.json b/examples/nextjs-with-typescript/package.json
index 54772f4bc..1896a4d05 100644
--- a/examples/nextjs-with-typescript/package.json
+++ b/examples/nextjs-with-typescript/package.json
@@ -10,6 +10,10 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.0.2",
+    "@mui/material": "^6.0.2",
     "@mux/assets": ">=0.1.0",
     "@mux/blurup": "^0.2.3",
     "@mux/mux-audio": ">=0.2.0",
@@ -21,6 +25,7 @@
     "@mux/mux-video-react": ">=0.3.0",
     "next": "^14.2.2",
     "react": "^18.2.0",
+    "react-collapsed": "^4.1.2",
     "react-dom": "^18.2.0",
     "water.css": "2"
   },
diff --git a/examples/nextjs-with-typescript/pages/MuxPlayer.tsx b/examples/nextjs-with-typescript/pages/MuxPlayer.tsx
index b1b83279b..1fe4e4206 100644
--- a/examples/nextjs-with-typescript/pages/MuxPlayer.tsx
+++ b/examples/nextjs-with-typescript/pages/MuxPlayer.tsx
@@ -1,5 +1,7 @@
 import Head from 'next/head';
 import MuxPlayer, { MuxPlayerProps, MaxResolution, MinResolution, RenditionOrder } from '@mux/mux-player-react';
+// Hack way to "unapply"/override specific global style sheet styles
+import '../harness-style-overrides.css';
 import '@mux/mux-player/themes/classic';
 import '@mux/mux-player/themes/minimal';
 import '@mux/mux-player/themes/microvideo';
@@ -25,6 +27,8 @@ import {
   updateProps,
   usePageStateReducer,
 } from '../app/page-state';
+import { Accordion, AccordionDetails, AccordionSummary, Box } from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 const onLoadStart = console.log.bind(null, 'loadstart');
 const onLoadedMetadata = console.log.bind(null, 'loadedmetadata');
@@ -116,6 +120,7 @@ const DEFAULT_INITIAL_STATE: Partial<MuxPlayerProps> = Object.freeze({
   loop: undefined,
   crossOrigin: undefined,
   customDomain: undefined,
+  beaconCollectionDomain: undefined,
   tokens: undefined,
   playbackId: undefined,
   streamType: undefined,
@@ -143,7 +148,8 @@ const PlayerSizeHeights = {
 };
 
 const DEFAULT_INITIAL_STYLES_STATE = {
-  width: `${PlayerSizeWidths[MediaChromeSizes.LG] + 1} + px`,
+  width: '50%',
+  // width: `${PlayerSizeWidths[MediaChromeSizes.LG] + 1} + px`,
   // width: PlayerSizeWidths[MediaChromeSizes.LG] + 'px',
   // height: PlayerSizeHeights[MediaChromeSizes.LG] + 'px',
 };
@@ -239,8 +245,6 @@ const MaxResolutionValues = Object.values(MaxResolution);
 const MinResolutionValues = Object.values(MinResolution);
 const RenditionOrderValues = Object.values(RenditionOrder);
 
-export const getServerSideProps = getLocationServerSideProps;
-
 type Props = LocationProps;
 
 function MuxPlayerPage({ location }: Props) {
@@ -261,347 +265,442 @@ function MuxPlayerPage({ location }: Props) {
       <Head>
         <title>&lt;MuxPlayer/&gt; Demo</title>
       </Head>
-      <main className="component-page">
-        <MuxPlayer
-          // ref={mediaElRef}
-          style={stylesState}
-          theme={state.theme}
-          envKey={state.envKey}
-          metadata={state.metadata}
-          // Test _hlsConfig for MuxPlayer (react) (Note: This also indirectly tests <mux-player> & <mux-video>)
-          // _hlsConfig={{
-          //   startLevel: 2,
-          //   debug: true,
-          // }}
-          title={state.title}
-          startTime={state.startTime}
-          currentTime={state.currentTime}
-          thumbnailTime={state.thumbnailTime}
-          poster={state.poster}
-          placeholder={state.placeholder}
-          playbackId={state.playbackId}
-          tokens={state.tokens}
-          storyboardSrc={state.storyboardSrc}
-          customDomain={state.customDomain}
-          forwardSeekOffset={state.forwardSeekOffset}
-          backwardSeekOffset={state.backwardSeekOffset}
-          crossOrigin={state.crossOrigin}
-          nohotkeys={state.nohotkeys}
-          hotkeys={state.hotkeys}
-          // onPlayerReady={() => console.log("ready!")}
-          preferCmcd={state.preferCmcd}
-          debug={state.debug}
-          noVolumePref={state.noVolumePref}
-          disableTracking={state.disableTracking}
-          disableCookies={state.disableCookies}
-          loop={state.loop}
-          muted={state.muted}
-          volume={state.volume}
-          paused={state.paused}
-          autoPlay={state.autoPlay}
-          maxResolution={state.maxResolution}
-          minResolution={state.minResolution}
-          renditionOrder={state.renditionOrder}
-          programStartTime={state.programStartTime}
-          programEndTime={state.programEndTime}
-          // To test/apply extra playlist params to resultant src URL (CJP)
-          // extraSourceParams={{
-          //   foo: 'str',
-          //   bar: true,
-          //   baz: 1,
-          // }}
-          preload={state.preload}
-          streamType={state.streamType}
-          targetLiveWindow={state.targetLiveWindow}
-          defaultStreamType={state.defaultStreamType}
-          audio={state.audio}
-          primaryColor={state.primaryColor}
-          secondaryColor={state.secondaryColor}
-          accentColor={state.accentColor}
-          defaultShowRemainingTime={state.defaultShowRemainingTime}
-          defaultHiddenCaptions={state.defaultHiddenCaptions}
-          defaultDuration={state.defaultDuration}
-          playbackRate={state.playbackRate}
-          playbackRates={state.playbackRates}
-          onPlay={(evt: Event) => {
-            onPlay(evt);
-            // dispatch(updateProps({ paused: false }));
-          }}
-          onPause={(evt: Event) => {
-            onPause(evt);
-            // dispatch(updateProps({ paused: true }));
-          }}
-          onVolumeChange={(event) => {
-            // const muxPlayerEl = event.target as MuxPlayerElement
-            // dispatch(updateProps({ muted: muxPlayerEl.muted, volume: muxPlayerEl.volume }));
-          }}
-          onSeeking={onSeeking}
-          onSeeked={onSeeked}
-          onEnded={onEnded}
-          onWaiting={onWaiting}
-        />
-
-        <div className="options">
-          <ComponentCodeRenderer state={state} component="MuxPlayer" />
-          <URLPathRenderer state={state} location={typeof window !== 'undefined' ? window.location : location} />
-          <div>
-            <label htmlFor="assets-control">Select from one of our example assets</label>
-            <select
-              id="assets-control"
-              onChange={({ target: { value } }) => {
-                setSelectedAsset(mediaAssets[value]);
-                dispatch(updateProps<MuxPlayerProps>(toPlayerPropsFromJSON(mediaAssets[value], mediaAssets)));
-              }}
-              value={mediaAssets.indexOf(selectedAsset)}
-            >
-              <option value="-1">None</option>
-              {mediaAssets.map((value, i) => {
-                const { description, error } = value;
-                const label = `${error ? '👎 ' : ''}${description}`;
-                return (
-                  <option key={i} value={i}>
-                    {label}
-                  </option>
-                );
-              })}
-            </select>
-          </div>
-          <div>
-            <h2>Manual Config</h2>
-          </div>
-          <TextRenderer value={state.playbackId} name="playbackId" onChange={genericOnChange} />
-          <EnumRenderer
-            value={state.streamType}
-            name="streamType"
-            onChange={genericOnChange}
-            values={['on-demand', 'live', 'll-live', 'live:dvr', 'll-live:dvr', 'unknown']}
-            formatter={(enumValue) =>
-              ['on-demand', 'live', 'unknown'].includes(enumValue) ? (
-                <code>{JSON.stringify(enumValue)}</code>
-              ) : (
-                <>
-                  <code>{JSON.stringify(enumValue)}</code> (deprecated)
-                </>
-              )
-            }
-          />
-          <EnumRenderer
-            value={state.targetLiveWindow}
-            name="targetLiveWindow"
-            onChange={genericOnChange}
-            values={[Infinity, 0, NaN]}
-          />
-          <EnumRenderer
-            value={state.defaultStreamType}
-            name="defaultStreamType"
-            onChange={genericOnChange}
-            values={['on-demand', 'live', 'unknown']}
-          />
-          <EnumRenderer
-            value={getPlayerSize(stylesState.width)}
-            name="width"
-            label="Width Cutoffs for Responsive Player Chrome/UI"
-            onChange={({ width: playerSize }) => {
-              const width = PlayerSizeWidths[playerSize?.split(' ')[0]];
-              dispatchStyles(updateProps({ width }));
+      {/* @ts-ignore */}
+      {/* <main className="component-page" style={{ '--focus': 'initial' }}> */}
+      {/* @ts-ignore */}
+      <Box component="main" style={{ '--focus': 'initial' }}>
+        <Box style={{ display: 'flex', flexFlow: 'row wrap' }}>
+          <MuxPlayer
+            // ref={mediaElRef}
+            style={stylesState}
+            theme={state.theme}
+            envKey={state.envKey}
+            metadata={state.metadata}
+            // Test _hlsConfig for MuxPlayer (react) (Note: This also indirectly tests <mux-player> & <mux-video>)
+            // _hlsConfig={{
+            //   startLevel: 2,
+            //   debug: true,
+            // }}
+            title={state.title}
+            startTime={state.startTime}
+            currentTime={state.currentTime}
+            thumbnailTime={state.thumbnailTime}
+            poster={state.poster}
+            placeholder={state.placeholder}
+            playbackId={state.playbackId}
+            tokens={state.tokens}
+            storyboardSrc={state.storyboardSrc}
+            customDomain={state.customDomain}
+            forwardSeekOffset={state.forwardSeekOffset}
+            backwardSeekOffset={state.backwardSeekOffset}
+            crossOrigin={state.crossOrigin}
+            nohotkeys={state.nohotkeys}
+            hotkeys={state.hotkeys}
+            // onPlayerReady={() => console.log("ready!")}
+            preferCmcd={state.preferCmcd}
+            preferPlayback={state.preferPlayback}
+            debug={state.debug}
+            noVolumePref={state.noVolumePref}
+            disableTracking={state.disableTracking}
+            disableCookies={state.disableCookies}
+            loop={state.loop}
+            muted={state.muted}
+            volume={state.volume}
+            paused={state.paused}
+            autoPlay={state.autoPlay}
+            maxResolution={state.maxResolution}
+            minResolution={state.minResolution}
+            renditionOrder={state.renditionOrder}
+            programStartTime={state.programStartTime}
+            programEndTime={state.programEndTime}
+            // To test/apply extra playlist params to resultant src URL (CJP)
+            // extraSourceParams={{
+            //   foo: 'str',
+            //   bar: true,
+            //   baz: 1,
+            // }}
+            preload={state.preload}
+            streamType={state.streamType}
+            targetLiveWindow={state.targetLiveWindow}
+            defaultStreamType={state.defaultStreamType}
+            audio={state.audio}
+            primaryColor={state.primaryColor}
+            secondaryColor={state.secondaryColor}
+            accentColor={state.accentColor}
+            defaultShowRemainingTime={state.defaultShowRemainingTime}
+            defaultHiddenCaptions={state.defaultHiddenCaptions}
+            defaultDuration={state.defaultDuration}
+            playbackRate={state.playbackRate}
+            playbackRates={state.playbackRates}
+            onPlay={(evt: Event) => {
+              onPlay(evt);
+              // dispatch(updateProps({ paused: false }));
             }}
-            values={['extra-small', 'small', 'large']}
-          />
-          <BooleanRenderer value={state.audio} name="audio" onChange={genericOnChange} />
-          <EnumRenderer
-            value={state.theme}
-            name="theme"
-            onChange={genericOnChange}
-            values={['classic', 'microvideo', 'minimal', 'gerwig']}
-          />
-          <TextRenderer
-            value={state.envKey}
-            name="envKey"
-            label="Env Key (Mux Data)"
-            onChange={genericOnChange}
-            placeholder={`Inferred from playbackId`}
-          />
-          <URLRenderer
-            value={state.customDomain}
-            name="customDomain"
-            onChange={genericOnChange}
-            placeholder="my.customdomain.com"
-          />
-          <URLRenderer
-            value={state.poster}
-            name="poster"
-            onChange={genericOnChange}
-            placeholder={`Inferred from playbackId`}
-          />
-          <URLRenderer
-            value={state.storyboardSrc}
-            name="storyboardSrc"
-            onChange={genericOnChange}
-            placeholder={`Inferred from playbackId`}
-          />
-          <TextRenderer
-            value={state.placeholder}
-            name="placeholder"
-            label="Placeholder Image"
-            onChange={genericOnChange}
-          />
-          <TextRenderer value={state.title} name="title" onChange={genericOnChange} />
-          <BooleanRenderer value={state.paused} name="paused" onChange={genericOnChange} />
-          <EnumRenderer
-            value={state.autoPlay}
-            name="autoPlay"
-            onChange={genericOnChange}
-            values={[true, false, 'any', 'muted']}
-          />
-          <EnumRenderer
-            value={state.preload}
-            name="preload"
-            onChange={genericOnChange}
-            values={['none', 'metadata', 'auto']}
-          />
-          <BooleanRenderer value={state.muted} name="muted" onChange={genericOnChange} />
-          <BooleanRenderer value={state.nohotkeys} name="nohotkeys" label="No Hot Keys" onChange={genericOnChange} />
-          <BooleanRenderer
-            value={state.defaultShowRemainingTime}
-            name="defaultShowRemainingTime"
-            onChange={genericOnChange}
-          />
-          <BooleanRenderer
-            value={state.defaultHiddenCaptions}
-            name="defaultHiddenCaptions"
-            onChange={genericOnChange}
-          />
-          <NumberRenderer
-            value={state.forwardSeekOffset}
-            name="forwardSeekOffset"
-            onChange={genericOnChange}
-            min={1}
-            max={99}
-          />
-          <NumberRenderer
-            value={state.backwardSeekOffset}
-            name="backwardSeekOffset"
-            onChange={genericOnChange}
-            min={1}
-            max={99}
-          />
-          <NumberRenderer value={state.volume} name="volume" onChange={genericOnChange} min={0} max={1} step={0.05} />
-          <BooleanRenderer value={state.noVolumePref} name="noVolumePref" onChange={genericOnChange} />
-          <NumberRenderer value={state.startTime} name="startTime" onChange={genericOnChange} min={0} />
-          <NumberRenderer
-            value={state.currentTime}
-            name="currentTime"
-            onChange={genericOnChange}
-            min={0}
-            /** @TODO solve `undefined` error cases (CJP) */
-            // max={mediaElRef.current?.duration}
-          />
-          <NumberRenderer value={state.thumbnailTime} name="thumbnailTime" onChange={genericOnChange} min={0} />
-          <BooleanRenderer value={state.disableTracking} name="disableTracking" onChange={genericOnChange} />
-          <BooleanRenderer value={state.disableCookies} name="disableCookies" onChange={genericOnChange} />
-          <BooleanRenderer value={state.debug} name="debug" onChange={genericOnChange} />
-          <EnumRenderer
-            value={state.preferCmcd}
-            name="preferCmcd"
-            onChange={genericOnChange}
-            values={['query', 'header', 'none']}
-          />
-          <BooleanRenderer value={state.loop} name="loop" onChange={genericOnChange} />
-          <EnumRenderer
-            value={state.crossOrigin}
-            name="crossOrigin"
-            onChange={genericOnChange}
-            values={['anonymous', 'use-credentials']}
-          />
-          <NumberRenderer
-            value={state.playbackRate}
-            name="playbackRate"
-            onChange={genericOnChange}
-            min={0}
-            max={3}
-            step={0.25}
-          />
-          {/** @TODO Is this sufficient for a UI or do we want a "fancier" one that allows adding/removing dynamic items from a list (CJP) */}
-          <EnumMultiSelectRenderer
-            value={state.playbackRates}
-            name="playbackRates"
-            onChange={genericOnChange}
-            values={[0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3]}
-          />
-          <NumberRenderer
-            value={state.defaultDuration}
-            name="defaultDuration"
-            onChange={genericOnChange}
-            min={0}
-            step={1}
-          />
-          <ColorRenderer value={state.primaryColor} name="primaryColor" onChange={genericOnChange} />
-          <ColorRenderer value={state.secondaryColor} name="secondaryColor" onChange={genericOnChange} />
-          <ColorRenderer value={state.accentColor} name="accentColor" onChange={genericOnChange} />
-          <EnumMultiSelectRenderer
-            value={getControlCustomizationCSSVars(stylesState)}
-            name="--controls"
-            label="Display Controls CSS vars (Hiding usage)"
-            onChange={({ ['--controls']: cssVars = [] }) => {
-              const nextCSSVars = ControlCustomizationCSSVars.reduce((curCSSVars, cssVarName) => {
-                curCSSVars[cssVarName] = cssVars.includes(cssVarName) ? 'none' : undefined;
-                return curCSSVars;
-              }, {});
-              genericOnStyleChange(nextCSSVars);
+            onPause={(evt: Event) => {
+              onPause(evt);
+              // dispatch(updateProps({ paused: true }));
             }}
-            values={ControlCustomizationCSSVars}
-          />
-          <ColorRenderer
-            value={stylesState['--controls-backdrop-color']}
-            name="--controls-backdrop-color"
-            label="Controls Backdrop Color"
-            onChange={genericOnStyleChange}
-          />
-          <EnumMultiSelectRenderer
-            value={state.hotkeys?.split(' ')}
-            name="hotkeys"
-            label="Hot Keys"
-            onChange={({ hotkeys }) => {
-              genericOnChange({ hotkeys: hotkeys?.join(' ') ?? undefined });
+            onVolumeChange={(event) => {
+              // const muxPlayerEl = event.target as MuxPlayerElement
+              // dispatch(updateProps({ muted: muxPlayerEl.muted, volume: muxPlayerEl.volume }));
             }}
-            values={['noc', 'nof', 'nok', 'nom', 'nospace', 'noarrowleft', 'noarrowright']}
-          />
-          <EnumRenderer
-            value={state.maxResolution}
-            name="maxResolution"
-            onChange={genericOnChange}
-            values={MaxResolutionValues}
-          />
-          <EnumRenderer
-            value={state.minResolution}
-            name="minResolution"
-            onChange={genericOnChange}
-            values={MinResolutionValues}
-          />
-          <EnumRenderer
-            value={state.renditionOrder}
-            name="renditionOrder"
-            onChange={genericOnChange}
-            values={RenditionOrderValues}
-          />
-          <NumberRenderer
-            value={state.programStartTime}
-            name="programStartTime"
-            onChange={genericOnChange}
-            min={0}
-            step={1}
-          />
-          <NumberRenderer
-            value={state.programEndTime}
-            name="programEndTime"
-            onChange={genericOnChange}
-            min={0}
-            step={1}
+            onSeeking={onSeeking}
+            onSeeked={onSeeked}
+            onEnded={onEnded}
+            onWaiting={onWaiting}
           />
+          <Box style={{ width: '50%' }}>
+            <ComponentCodeRenderer state={state} component="MuxPlayer" />
+            <URLPathRenderer state={state} location={typeof window !== 'undefined' ? window.location : location} />
+          </Box>
+        </Box>
+        <div>
+          <label htmlFor="assets-control">Select from one of our example assets</label>
+          <select
+            id="assets-control"
+            onChange={({ target: { value } }) => {
+              setSelectedAsset(mediaAssets[value]);
+              dispatch(updateProps<MuxPlayerProps>(toPlayerPropsFromJSON(mediaAssets[value], mediaAssets)));
+            }}
+            value={mediaAssets.indexOf(selectedAsset)}
+          >
+            <option value="-1">None</option>
+            {mediaAssets.map((value, i) => {
+              const { description, error } = value;
+              const label = `${error ? '👎 ' : ''}${description}`;
+              return (
+                <option key={i} value={i}>
+                  {label}
+                </option>
+              );
+            })}
+          </select>
         </div>
-      </main>
+        <div>
+          <h2>Manual Config</h2>
+        </div>
+        {/* <div className="options"> */}
+        <Box style={{ display: 'flex', flexFlow: 'row wrap', alignItems: 'flex-start' }}>
+          {/* These are all properties that effect how media assets are requested */}
+          <Accordion style={{ maxWidth: '50%' }} defaultExpanded>
+            <AccordionSummary expandIcon={<ExpandMoreIcon />}>Media Asset Props</AccordionSummary>
+            <AccordionDetails sx={{ display: 'flex', flexFlow: 'row wrap' }}>
+              {/* Props for the main media stream playback */}
+              <TextRenderer value={state.playbackId} name="playbackId" onChange={genericOnChange} />
+              <TextRenderer value={state.tokens?.playback} name="tokens.playback" onChange={genericOnChange} />
+              <TextRenderer value={state.tokens?.drm} name="tokens.drm" onChange={genericOnChange} />
+              <EnumRenderer
+                value={state.maxResolution}
+                name="maxResolution"
+                onChange={genericOnChange}
+                values={MaxResolutionValues}
+              />
+              <EnumRenderer
+                value={state.minResolution}
+                name="minResolution"
+                onChange={genericOnChange}
+                values={MinResolutionValues}
+              />
+              <EnumRenderer
+                value={state.renditionOrder}
+                name="renditionOrder"
+                onChange={genericOnChange}
+                values={RenditionOrderValues}
+              />
+              <NumberRenderer
+                value={state.programStartTime}
+                name="programStartTime"
+                onChange={genericOnChange}
+                min={0}
+                step={1}
+              />
+              <NumberRenderer
+                value={state.programEndTime}
+                name="programEndTime"
+                onChange={genericOnChange}
+                min={0}
+                step={1}
+              />
+              <URLRenderer
+                value={state.customDomain}
+                name="customDomain"
+                onChange={genericOnChange}
+                placeholder="my.customdomain.com"
+              />
+              <EnumRenderer
+                value={state.preferCmcd}
+                name="preferCmcd"
+                onChange={genericOnChange}
+                values={['query', 'header', 'none']}
+              />
+              {/* Props for the thumbnail (aka poster) */}
+              <TextRenderer value={state.tokens?.thumbnail} name="tokens.thumbnail" onChange={genericOnChange} />
+              <NumberRenderer value={state.thumbnailTime} name="thumbnailTime" onChange={genericOnChange} min={0} />
+              <URLRenderer
+                value={state.poster}
+                name="poster"
+                onChange={genericOnChange}
+                placeholder={`Inferred from playbackId`}
+              />
+              {/* Props for the storyboard */}
+              <TextRenderer value={state.tokens?.storyboard} name="tokens.storyboard" onChange={genericOnChange} />
+              <URLRenderer
+                value={state.storyboardSrc}
+                name="storyboardSrc"
+                onChange={genericOnChange}
+                placeholder={`Inferred from playbackId`}
+              />
+            </AccordionDetails>
+          </Accordion>
+          {/* These are all properties that effect playback/initial load behavior */}
+          <Accordion style={{ maxWidth: '50%' }}>
+            <AccordionSummary expandIcon={<ExpandMoreIcon />}>Load & Playback Behavior Props</AccordionSummary>
+            <AccordionDetails sx={{ display: 'flex', flexFlow: 'row wrap' }}>
+              <EnumRenderer
+                value={state.autoPlay}
+                name="autoPlay"
+                onChange={genericOnChange}
+                values={[true, false, 'any', 'muted']}
+              />
+              <NumberRenderer
+                value={state.playbackRate}
+                name="playbackRate"
+                onChange={genericOnChange}
+                min={0}
+                max={3}
+                step={0.25}
+              />
+              <BooleanRenderer value={state.loop} name="loop" onChange={genericOnChange} />
+              <BooleanRenderer
+                value={state.defaultHiddenCaptions}
+                name="defaultHiddenCaptions"
+                onChange={genericOnChange}
+              />
+              <EnumRenderer
+                value={state.preload}
+                name="preload"
+                onChange={genericOnChange}
+                values={['none', 'metadata', 'auto']}
+              />
+              <EnumRenderer
+                value={state.crossOrigin}
+                name="crossOrigin"
+                onChange={genericOnChange}
+                values={['anonymous', 'use-credentials']}
+              />
+              <EnumRenderer
+                value={state.preferPlayback}
+                name="preferPlayback"
+                onChange={genericOnChange}
+                values={['mse', 'native']}
+              />
+              <NumberRenderer value={state.startTime} name="startTime" onChange={genericOnChange} min={0} />
+            </AccordionDetails>
+          </Accordion>
+          {/* These are all Mux Data-related properties */}
+          <Accordion style={{ maxWidth: '50%' }}>
+            <AccordionSummary expandIcon={<ExpandMoreIcon />}>Mux Data Props</AccordionSummary>
+            <AccordionDetails sx={{ display: 'flex', flexFlow: 'row wrap' }}>
+              <TextRenderer
+                value={state.envKey}
+                name="envKey"
+                label="Env Key (Mux Data)"
+                onChange={genericOnChange}
+                placeholder={`Inferred from playbackId`}
+              />
+              <TextRenderer value={state.metadata?.video_id} name="metadata.video_id" onChange={genericOnChange} />
+              <TextRenderer
+                value={state.metadata?.video_title}
+                name="metadata.video_title"
+                onChange={genericOnChange}
+              />
+              <TextRenderer
+                value={state.metadata?.viewer_user_id}
+                name="metadata.viewer_user_id"
+                onChange={genericOnChange}
+              />
+              <URLRenderer
+                value={state.beaconCollectionDomain}
+                name="beaconCollectionDomain"
+                onChange={genericOnChange}
+              />
+              <BooleanRenderer value={state.disableTracking} name="disableTracking" onChange={genericOnChange} />
+              <BooleanRenderer value={state.disableCookies} name="disableCookies" onChange={genericOnChange} />
+            </AccordionDetails>
+          </Accordion>
+          {/* These are all playback state properties */}
+          <Accordion style={{ maxWidth: '50%' }}>
+            <AccordionSummary expandIcon={<ExpandMoreIcon />}>Player Playback State Props</AccordionSummary>
+            <AccordionDetails sx={{ display: 'flex', flexFlow: 'row wrap' }}>
+              <BooleanRenderer value={state.paused} name="paused" onChange={genericOnChange} />
+              <NumberRenderer
+                value={state.currentTime}
+                name="currentTime"
+                onChange={genericOnChange}
+                min={0}
+                /** @TODO solve `undefined` error cases (CJP) */
+                // max={mediaElRef.current?.duration}
+              />
+              {/* Audio */}
+              <BooleanRenderer value={state.muted} name="muted" onChange={genericOnChange} />
+              <NumberRenderer
+                value={state.volume}
+                name="volume"
+                onChange={genericOnChange}
+                min={0}
+                max={1}
+                step={0.05}
+              />
+              <BooleanRenderer value={state.noVolumePref} name="noVolumePref" onChange={genericOnChange} />
+              <EnumRenderer
+                value={state.streamType}
+                name="streamType"
+                onChange={genericOnChange}
+                values={['on-demand', 'live', 'll-live', 'live:dvr', 'll-live:dvr', 'unknown']}
+                formatter={(enumValue) =>
+                  ['on-demand', 'live', 'unknown'].includes(enumValue) ? (
+                    <code>{JSON.stringify(enumValue)}</code>
+                  ) : (
+                    <>
+                      <code>{JSON.stringify(enumValue)}</code> (deprecated)
+                    </>
+                  )
+                }
+              />
+            </AccordionDetails>
+          </Accordion>
+          {/* These are all cosmetic/UI related properties */}
+          <Accordion style={{ maxWidth: '50%' }}>
+            <AccordionSummary expandIcon={<ExpandMoreIcon />}>User Interface Props</AccordionSummary>
+            <AccordionDetails sx={{ display: 'flex', flexFlow: 'row wrap' }}>
+              {/* Props for general UI/Chrome */}
+              <EnumRenderer
+                value={getPlayerSize(stylesState.width)}
+                name="width"
+                label="Width Cutoffs for Responsive Player Chrome/UI"
+                onChange={({ width: playerSize }) => {
+                  const width = PlayerSizeWidths[playerSize?.split(' ')[0]];
+                  dispatchStyles(updateProps({ width }));
+                }}
+                values={['extra-small', 'small', 'large']}
+              />
+              <BooleanRenderer value={state.audio} name="audio" onChange={genericOnChange} />
+              <EnumRenderer
+                value={state.theme}
+                name="theme"
+                onChange={genericOnChange}
+                values={['classic', 'microvideo', 'minimal', 'gerwig']}
+              />
+              <EnumRenderer
+                value={state.defaultStreamType}
+                name="defaultStreamType"
+                onChange={genericOnChange}
+                values={['on-demand', 'live', 'unknown']}
+              />
+              <EnumRenderer
+                value={state.targetLiveWindow}
+                name="targetLiveWindow"
+                onChange={genericOnChange}
+                values={[Infinity, 0, NaN]}
+              />
+              {/* Props for UI component config */}
+              <TextRenderer value={state.title} name="title" onChange={genericOnChange} />
+              <NumberRenderer
+                value={state.forwardSeekOffset}
+                name="forwardSeekOffset"
+                onChange={genericOnChange}
+                min={1}
+                max={99}
+              />
+              <NumberRenderer
+                value={state.backwardSeekOffset}
+                name="backwardSeekOffset"
+                onChange={genericOnChange}
+                min={1}
+                max={99}
+              />
+              <EnumMultiSelectRenderer
+                value={state.playbackRates}
+                name="playbackRates"
+                onChange={genericOnChange}
+                values={[0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3]}
+              />
+              <NumberRenderer
+                value={state.defaultDuration}
+                name="defaultDuration"
+                onChange={genericOnChange}
+                min={0}
+                step={1}
+              />
+              <BooleanRenderer
+                value={state.defaultShowRemainingTime}
+                name="defaultShowRemainingTime"
+                onChange={genericOnChange}
+              />
+              <TextRenderer
+                value={state.placeholder}
+                name="placeholder"
+                label="Placeholder Image"
+                onChange={genericOnChange}
+              />
+              {/* Props for color and custom styles (including hiding default components) */}
+              <ColorRenderer value={state.primaryColor} name="primaryColor" onChange={genericOnChange} />
+              <ColorRenderer value={state.secondaryColor} name="secondaryColor" onChange={genericOnChange} />
+              <ColorRenderer value={state.accentColor} name="accentColor" onChange={genericOnChange} />
+              <EnumMultiSelectRenderer
+                value={getControlCustomizationCSSVars(stylesState)}
+                name="--controls"
+                label="Display Controls CSS vars (Hiding usage)"
+                onChange={({ ['--controls']: cssVars = [] }) => {
+                  const nextCSSVars = ControlCustomizationCSSVars.reduce((curCSSVars, cssVarName) => {
+                    curCSSVars[cssVarName] = cssVars.includes(cssVarName) ? 'none' : undefined;
+                    return curCSSVars;
+                  }, {});
+                  genericOnStyleChange(nextCSSVars);
+                }}
+                values={ControlCustomizationCSSVars}
+              />
+              <ColorRenderer
+                value={stylesState['--controls-backdrop-color']}
+                name="--controls-backdrop-color"
+                label="Controls Backdrop Color"
+                onChange={genericOnStyleChange}
+              />
+              {/* Hotkeys props */}
+              <BooleanRenderer
+                value={state.nohotkeys}
+                name="nohotkeys"
+                label="No Hot Keys"
+                onChange={genericOnChange}
+              />
+              <EnumMultiSelectRenderer
+                value={state.hotkeys?.split(' ')}
+                name="hotkeys"
+                label="Hot Keys"
+                onChange={({ hotkeys }) => {
+                  genericOnChange({ hotkeys: hotkeys?.join(' ') ?? undefined });
+                }}
+                values={['noc', 'nof', 'nok', 'nom', 'nospace', 'noarrowleft', 'noarrowright']}
+              />
+            </AccordionDetails>
+          </Accordion>
+          {/* Debug (where to put?) */}
+          <BooleanRenderer value={state.debug} name="debug" onChange={genericOnChange} />
+        </Box>
+      </Box>
     </>
   );
 }
 
 export default MuxPlayerPage;
+
+export async function getServerSideProps(context) {
+  // @ts-ignore
+  const { props: locationProps } = await getLocationServerSideProps(context);
+  return {
+    props: {
+      ...locationProps,
+      hideDefaultLayout: true,
+    },
+  };
+}
diff --git a/yarn.lock b/yarn.lock
index eb7b3dc87..54b5e2a9c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -31,6 +31,14 @@
   dependencies:
     "@babel/highlight" "^7.18.6"
 
+"@babel/code-frame@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.24.7.tgz#882fd9e09e8ee324e496bd040401c6f046ef4465"
+  integrity sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==
+  dependencies:
+    "@babel/highlight" "^7.24.7"
+    picocolors "^1.0.0"
+
 "@babel/compat-data@^7.17.7", "@babel/compat-data@^7.20.1", "@babel/compat-data@^7.20.5":
   version "7.20.10"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.20.10.tgz#9d92fa81b87542fff50e848ed585b4212c1d34ec"
@@ -75,6 +83,16 @@
     "@jridgewell/gen-mapping" "^0.3.2"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.25.6":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.25.6.tgz#0df1ad8cb32fe4d2b01d8bf437f153d19342a87c"
+  integrity sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw==
+  dependencies:
+    "@babel/types" "^7.25.6"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
@@ -175,6 +193,14 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-module-imports@^7.16.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz#f2f980392de5b84c3328fc71d38bd81bbb83042b"
+  integrity sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==
+  dependencies:
+    "@babel/traverse" "^7.24.7"
+    "@babel/types" "^7.24.7"
+
 "@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.20.11", "@babel/helper-module-transforms@^7.20.7":
   version "7.20.11"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.20.11.tgz#df4c7af713c557938c50ea3ad0117a7944b2f1b0"
@@ -249,11 +275,21 @@
   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-string-parser@^7.24.8":
+  version "7.24.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz#5b3329c9a58803d5df425e5785865881a81ca48d"
+  integrity sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==
+
 "@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==
 
+"@babel/helper-validator-identifier@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz#75b889cfaf9e35c2aaf42cf0d72c8e91719251db"
+  integrity sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==
+
 "@babel/helper-validator-option@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
@@ -287,11 +323,28 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.24.7.tgz#a05ab1df134b286558aae0ed41e6c5f731bf409d"
+  integrity sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.24.7"
+    chalk "^2.4.2"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
 "@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.16.4", "@babel/parser@^7.20.7", "@babel/parser@^7.6.0", "@babel/parser@^7.9.6":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.7.tgz#66fe23b3c8569220817d5feb8b9dcdc95bb4f71b"
   integrity sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==
 
+"@babel/parser@^7.25.0", "@babel/parser@^7.25.6":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.6.tgz#85660c5ef388cbbf6e3d2a694ee97a38f18afe2f"
+  integrity sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==
+  dependencies:
+    "@babel/types" "^7.25.6"
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
@@ -1043,6 +1096,13 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/runtime@^7.18.3", "@babel/runtime@^7.25.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.6.tgz#9afc3289f7184d8d7f98b099884c26317b9264d2"
+  integrity sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.23.2":
   version "7.24.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.4.tgz#de795accd698007a66ba44add6cc86542aff1edd"
@@ -1059,6 +1119,15 @@
     "@babel/parser" "^7.20.7"
     "@babel/types" "^7.20.7"
 
+"@babel/template@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.0.tgz#e733dc3134b4fede528c15bc95e89cb98c52592a"
+  integrity sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==
+  dependencies:
+    "@babel/code-frame" "^7.24.7"
+    "@babel/parser" "^7.25.0"
+    "@babel/types" "^7.25.0"
+
 "@babel/traverse@^7.20.10", "@babel/traverse@^7.20.5", "@babel/traverse@^7.20.7", "@babel/traverse@^7.7.2":
   version "7.20.10"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.20.10.tgz#2bf98239597fcec12f842756f186a9dde6d09230"
@@ -1075,6 +1144,19 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.24.7":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.6.tgz#04fad980e444f182ecf1520504941940a90fea41"
+  integrity sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==
+  dependencies:
+    "@babel/code-frame" "^7.24.7"
+    "@babel/generator" "^7.25.6"
+    "@babel/parser" "^7.25.6"
+    "@babel/template" "^7.25.0"
+    "@babel/types" "^7.25.6"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.12.6", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.19.0", "@babel/types@^7.20.0", "@babel/types@^7.20.2", "@babel/types@^7.20.5", "@babel/types@^7.20.7", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.6.1", "@babel/types@^7.9.6":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.7.tgz#54ec75e252318423fc07fb644dc6a58a64c09b7f"
@@ -1084,6 +1166,15 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.24.7", "@babel/types@^7.25.0", "@babel/types@^7.25.6":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.6.tgz#893942ddb858f32ae7a004ec9d3a76b3463ef8e6"
+  integrity sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==
+  dependencies:
+    "@babel/helper-string-parser" "^7.24.8"
+    "@babel/helper-validator-identifier" "^7.24.7"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -1219,6 +1310,113 @@
   resolved "https://registry.yarnpkg.com/@emmetio/scanner/-/scanner-1.0.0.tgz#065b2af6233fe7474d44823e3deb89724af42b5f"
   integrity sha512-8HqW8EVqjnCmWXVpqAOZf+EGESdkR27odcMMMGefgKXtar00SoYNSryGv//TELI4T3QFsECo78p+0lmalk/CFA==
 
+"@emotion/babel-plugin@^11.12.0":
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz#7b43debb250c313101b3f885eba634f1d723fcc2"
+  integrity sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/runtime" "^7.18.3"
+    "@emotion/hash" "^0.9.2"
+    "@emotion/memoize" "^0.9.0"
+    "@emotion/serialize" "^1.2.0"
+    babel-plugin-macros "^3.1.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.2.0"
+
+"@emotion/cache@^11.13.0", "@emotion/cache@^11.13.1":
+  version "11.13.1"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.13.1.tgz#fecfc54d51810beebf05bf2a161271a1a91895d7"
+  integrity sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==
+  dependencies:
+    "@emotion/memoize" "^0.9.0"
+    "@emotion/sheet" "^1.4.0"
+    "@emotion/utils" "^1.4.0"
+    "@emotion/weak-memoize" "^0.4.0"
+    stylis "4.2.0"
+
+"@emotion/hash@^0.9.2":
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.2.tgz#ff9221b9f58b4dfe61e619a7788734bd63f6898b"
+  integrity sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==
+
+"@emotion/is-prop-valid@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.3.0.tgz#bd84ba972195e8a2d42462387581560ef780e4e2"
+  integrity sha512-SHetuSLvJDzuNbOdtPVbq6yMMMlLoW5Q94uDqJZqy50gcmAjxFkVqmzqSGEFq9gT2iMuIeKV1PXVWmvUhuZLlQ==
+  dependencies:
+    "@emotion/memoize" "^0.9.0"
+
+"@emotion/memoize@^0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.9.0.tgz#745969d649977776b43fc7648c556aaa462b4102"
+  integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==
+
+"@emotion/react@^11.13.3":
+  version "11.13.3"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.13.3.tgz#a69d0de2a23f5b48e0acf210416638010e4bd2e4"
+  integrity sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.12.0"
+    "@emotion/cache" "^11.13.0"
+    "@emotion/serialize" "^1.3.1"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.1.0"
+    "@emotion/utils" "^1.4.0"
+    "@emotion/weak-memoize" "^0.4.0"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@^1.2.0", "@emotion/serialize@^1.3.0", "@emotion/serialize@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.3.1.tgz#490b660178f43d2de8e92b278b51079d726c05c3"
+  integrity sha512-dEPNKzBPU+vFPGa+z3axPRn8XVDetYORmDC0wAiej+TNcOZE70ZMJa0X7JdeoM6q/nWTMZeLpN/fTnD9o8MQBA==
+  dependencies:
+    "@emotion/hash" "^0.9.2"
+    "@emotion/memoize" "^0.9.0"
+    "@emotion/unitless" "^0.10.0"
+    "@emotion/utils" "^1.4.0"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.4.0.tgz#c9299c34d248bc26e82563735f78953d2efca83c"
+  integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==
+
+"@emotion/styled@^11.13.0":
+  version "11.13.0"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.13.0.tgz#633fd700db701472c7a5dbef54d6f9834e9fb190"
+  integrity sha512-tkzkY7nQhW/zC4hztlwucpT8QEZ6eUzpXDRhww/Eej4tFfO0FxQYWRyg/c5CCXa4d/f174kqeXYjuQRnhzf6dA==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.12.0"
+    "@emotion/is-prop-valid" "^1.3.0"
+    "@emotion/serialize" "^1.3.0"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.1.0"
+    "@emotion/utils" "^1.4.0"
+
+"@emotion/unitless@^0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.10.0.tgz#2af2f7c7e5150f497bdabd848ce7b218a27cf745"
+  integrity sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==
+
+"@emotion/use-insertion-effect-with-fallbacks@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz#1a818a0b2c481efba0cf34e5ab1e0cb2dcb9dfaf"
+  integrity sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==
+
+"@emotion/utils@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.4.0.tgz#262f1d02aaedb2ec91c83a0955dd47822ad5fbdd"
+  integrity sha512-spEnrA1b6hDR/C68lC2M7m6ALPUHZC0lIY7jAS/B/9DuuO1ZP04eov8SMv/6fwRd8pzmsn2AuJEznRREWlQrlQ==
+
+"@emotion/weak-memoize@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz#5e13fac887f08c44f76b0ccaf3370eb00fec9bb6"
+  integrity sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==
+
 "@esbuild/aix-ppc64@0.19.12":
   version "0.19.12"
   resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz#d1bc06aedb6936b3b6d313bf809a5a40387d2b7f"
@@ -1907,16 +2105,35 @@
     "@jridgewell/sourcemap-codec" "^1.4.10"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@jridgewell/gen-mapping@^0.3.5":
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz#dcce6aff74bdf6dad1a95802b69b04a2fcb1fb36"
+  integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==
+  dependencies:
+    "@jridgewell/set-array" "^1.2.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
 "@jridgewell/resolve-uri@3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
   integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
 
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
+  integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
+
 "@jridgewell/set-array@^1.0.0", "@jridgewell/set-array@^1.0.1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
   integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
 
+"@jridgewell/set-array@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280"
+  integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
+
 "@jridgewell/source-map@^0.3.2":
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.2.tgz#f45351aaed4527a298512ec72f81040c998580fb"
@@ -1930,6 +2147,11 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
 
+"@jridgewell/sourcemap-codec@^1.4.14":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
+  integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
+
 "@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.14", "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.17"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz#793041277af9073b0951a7fe0f0d8c4c98c36985"
@@ -1938,6 +2160,14 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
+"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
+  version "0.3.25"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
+  integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
 "@leichtgewicht/ip-codec@^2.0.1":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
@@ -2646,6 +2876,86 @@
   resolved "https://registry.yarnpkg.com/@mdn/browser-compat-data/-/browser-compat-data-4.2.1.tgz#1fead437f3957ceebe2e8c3f46beccdb9bc575b8"
   integrity sha512-EWUguj2kd7ldmrF9F+vI5hUOralPd+sdsUnYbRy33vZTuZkduC1shE9TtEMEjAQwyfyMb4ole5KtjF8MsnQOlA==
 
+"@mui/core-downloads-tracker@^6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-6.0.2.tgz#edaec4015e440b55d535a805bd9dcec7e421d6ce"
+  integrity sha512-Cg68oOlAfbJgMgvbCwcX3Y3HdygCl6X1nREYTdEWcEKUQhNarrC45Cc35mP+zA7p3ZXE/7FLiaTCCgwuSoef/Q==
+
+"@mui/icons-material@^6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-6.0.2.tgz#fc0fba40421eb6d44f1266b53f9d5e51b67df42b"
+  integrity sha512-WaTPSvKcx8X7NdWAHzJWDZv+YXvK0MUY8+JI/r4/q2GgIa5RW+n4+08CGX6jB7sWhU1R3zy28NfsDUwwQjOThw==
+  dependencies:
+    "@babel/runtime" "^7.25.0"
+
+"@mui/material@^6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-6.0.2.tgz#58a3a58d126b1b4ceb842aac401e20542ab0c17e"
+  integrity sha512-KrnkJFSyhsAh8V30DNUbWyRyxMi4ZHjFg1ikQGx+mUAIffFTYIEx9Q+Kxd3vCT0FUFGOmbsuh6F6yRhpybsjkg==
+  dependencies:
+    "@babel/runtime" "^7.25.0"
+    "@mui/core-downloads-tracker" "^6.0.2"
+    "@mui/system" "^6.0.2"
+    "@mui/types" "^7.2.16"
+    "@mui/utils" "^6.0.2"
+    "@popperjs/core" "^2.11.8"
+    "@types/react-transition-group" "^4.4.11"
+    clsx "^2.1.1"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+    react-is "^18.3.1"
+    react-transition-group "^4.4.5"
+
+"@mui/private-theming@^6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-6.0.2.tgz#498cf18040cdb196d1280f1d829d996d2a07e004"
+  integrity sha512-emddFcRhA0hPGVIwIbW5g0V8vtCgw2g/H/A7jTdGe7dpCWEPpp6jPIXRRKcEUWgmg91R6rBNfV+LFHxBxmZXOQ==
+  dependencies:
+    "@babel/runtime" "^7.25.0"
+    "@mui/utils" "^6.0.2"
+    prop-types "^15.8.1"
+
+"@mui/styled-engine@^6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-6.0.2.tgz#7eac59f5e9e1a7efba24d245d62de91752a67cc3"
+  integrity sha512-qd3Vlhted0SYVGotnCfVNcxff7vW2WN0fclbAexff60NeNS1qs/H/CImHEHUBiUGeNWMPRochbN6VF1arQ7/jA==
+  dependencies:
+    "@babel/runtime" "^7.25.0"
+    "@emotion/cache" "^11.13.1"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+
+"@mui/system@^6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-6.0.2.tgz#9dce511047f63a5d819914cc978b719f439ebbc3"
+  integrity sha512-AZv1/C4PuHgWFTA8YraIzl3FTVLdRz0RIMRwEADWZBdIhnuTHS/4+r8qE9+3CcpTHg1WsEu8btaO3AhQahSM9A==
+  dependencies:
+    "@babel/runtime" "^7.25.0"
+    "@mui/private-theming" "^6.0.2"
+    "@mui/styled-engine" "^6.0.2"
+    "@mui/types" "^7.2.16"
+    "@mui/utils" "^6.0.2"
+    clsx "^2.1.1"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+
+"@mui/types@^7.2.16":
+  version "7.2.16"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.16.tgz#66710c691b51cd4fca95322100cd74ec230cfe30"
+  integrity sha512-qI8TV3M7ShITEEc8Ih15A2vLzZGLhD+/UPNwck/hcls2gwg7dyRjNGXcQYHKLB5Q7PuTRfrTkAoPa2VV1s67Ag==
+
+"@mui/utils@^6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-6.0.2.tgz#be3c7e79af074bce57559b7ea4c693d3a4c3c2ca"
+  integrity sha512-TeFrYsxcmeoDSlkoPhX+LjIuuqC5Pyj+xz2kRceKCkUpwMNTEeVOfowXDPe+mboZwmpJ5ZxP4eiAgQMdeEasjg==
+  dependencies:
+    "@babel/runtime" "^7.25.0"
+    "@mui/types" "^7.2.16"
+    "@types/prop-types" "^15.7.12"
+    clsx "^2.1.1"
+    prop-types "^15.8.1"
+    react-is "^18.3.1"
+
 "@mux/blurup@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@mux/blurup/-/blurup-0.2.3.tgz#b3084cba9124dce98f8a60a6ee3ca0ae4c70bbce"
@@ -3205,6 +3515,11 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
+"@popperjs/core@^2.11.8":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
 "@puppeteer/browsers@0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@puppeteer/browsers/-/browsers-0.5.0.tgz#1a1ee454b84a986b937ca2d93146f25a3fe8b670"
@@ -4050,6 +4365,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-transition-group@^4.4.11":
+  version "4.4.11"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.11.tgz#d963253a611d757de01ebb241143b1017d5d63d5"
+  integrity sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^18.2.79":
   version "18.2.79"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.79.tgz#c40efb4f255711f554d47b449f796d1c7756d865"
@@ -6070,7 +6392,7 @@ chalk-template@^0.4.0:
   dependencies:
     chalk "^4.1.2"
 
-chalk@2.4.2, chalk@^2.0.0, chalk@^2.4.1:
+chalk@2.4.2, chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -6264,6 +6586,11 @@ clone@^2.1.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
   integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==
 
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 cmd-shim@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/cmd-shim/-/cmd-shim-4.1.0.tgz#b3a904a6743e9fede4148c6f3800bf2a08135bdd"
@@ -6582,7 +6909,7 @@ conventional-recommended-bump@^6.1.0:
     meow "^8.0.0"
     q "^1.5.1"
 
-convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
+convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
   integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
@@ -6899,7 +7226,7 @@ csstype@^2.6.8:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
   integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
 
-csstype@^3.0.2:
+csstype@^3.0.2, csstype@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
@@ -6998,6 +7325,13 @@ debug@^3.1.0, debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
+debug@^4.3.1:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52"
+  integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==
+  dependencies:
+    ms "^2.1.3"
+
 debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
@@ -7292,6 +7626,14 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -8690,6 +9032,11 @@ find-replace@^3.0.0:
   dependencies:
     array-back "^3.0.1"
 
+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 find-up@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
@@ -9344,6 +9691,13 @@ hls.js@~1.5.11:
   resolved "https://registry.yarnpkg.com/hls.js/-/hls.js-1.5.11.tgz#3941347df454983859ae8c75fe19e8818719a826"
   integrity sha512-q3We1izi2+qkOO+TvZdHv+dx6aFzdtk3xc1/Qesrvto4thLTT/x/1FK85c5h1qZE4MmMBNgKg+MIW8nxQfxwBw==
 
+hoist-non-react-statics@^3.3.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hoopy@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
@@ -11895,7 +12249,7 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-ms@2.1.3, ms@^2.0.0, ms@^2.1.1:
+ms@2.1.3, ms@^2.0.0, ms@^2.1.1, ms@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
@@ -13643,7 +13997,7 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
-prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -13921,6 +14275,13 @@ react-app-polyfill@^3.0.0:
     regenerator-runtime "^0.13.9"
     whatwg-fetch "^3.6.2"
 
+react-collapsed@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/react-collapsed/-/react-collapsed-4.1.2.tgz#a82e5032eeecc085a05d6ed0be63bbc851f2a517"
+  integrity sha512-vusqVnW/VbFCKJx29KNTnjJrwCbV7k3bB/FiO9/0Fj7JNoNarkU1xU7yK4FZHqPW0Q2izB7o6fYzG16zgdDNMQ==
+  dependencies:
+    tiny-warning "^1.0.3"
+
 react-dev-utils@^12.0.1:
   version "12.0.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"
@@ -13964,7 +14325,7 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
-react-is@^16.13.1:
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -13979,6 +14340,11 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-is@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
+  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+
 react-refresh@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
@@ -14054,6 +14420,16 @@ react-scripts@5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
+react-transition-group@^4.4.5:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -15109,6 +15485,11 @@ source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, sourc
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+source-map@^0.5.7:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
+
 source-map@^0.7.3:
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
@@ -15503,6 +15884,11 @@ stylehacks@^5.1.1:
     browserslist "^4.21.4"
     postcss-selector-parser "^6.0.4"
 
+stylis@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
+  integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -15825,6 +16211,11 @@ tiny-glob@^0.2.9:
     globalyzer "0.1.0"
     globrex "^0.1.2"
 
+tiny-warning@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"