From 46b485365efb4272bd78506a8baba5fea9d7f37a Mon Sep 17 00:00:00 2001
From: Sebastian-ubs <141921979+Sebastian-ubs@users.noreply.github.com>
Date: Tue, 28 May 2024 12:02:12 +0200
Subject: [PATCH] add component hierarchy to the preview app (#896)

* add component hierarchy to the preview app

* fix font issue

* align hover style between tab and vertical tab

* fixes according to review comments

* fix dropdown style (font-sans)

* fix vertical tab padding

* update due to b96ee0f (Button+TextField > shadcn)
---
 lib/platform-bible-react/package.json         |   1 +
 .../components/shadcn-ui/dropdown-menu.tsx    |   3 +-
 .../components/shadcn-ui/tabs-vertical.tsx    |  77 +++
 .../src/components/shadcn-ui/tabs.tsx         |  54 ++
 lib/platform-bible-react/src/index.ts         |   9 +
 .../src/preview/app.component.tsx             |  59 +-
 .../preview/components/basics.component.tsx   | 137 +++++
 .../components/compositions.component.tsx     |  44 ++
 .../preview/components/examples.component.tsx |  76 +++
 .../components/playground.component.tsx       |  10 +
 .../src/preview/theme-provider.component.tsx  |  74 +++
 .../src/preview/theme-toggle.component.tsx    |  43 ++
 package-lock.json                             | 534 ++++++------------
 13 files changed, 737 insertions(+), 384 deletions(-)
 create mode 100644 lib/platform-bible-react/src/components/shadcn-ui/tabs-vertical.tsx
 create mode 100644 lib/platform-bible-react/src/components/shadcn-ui/tabs.tsx
 create mode 100644 lib/platform-bible-react/src/preview/components/basics.component.tsx
 create mode 100644 lib/platform-bible-react/src/preview/components/compositions.component.tsx
 create mode 100644 lib/platform-bible-react/src/preview/components/examples.component.tsx
 create mode 100644 lib/platform-bible-react/src/preview/components/playground.component.tsx
 create mode 100644 lib/platform-bible-react/src/preview/theme-provider.component.tsx
 create mode 100644 lib/platform-bible-react/src/preview/theme-toggle.component.tsx

diff --git a/lib/platform-bible-react/package.json b/lib/platform-bible-react/package.json
index 06775476f9..9ef2fb55eb 100644
--- a/lib/platform-bible-react/package.json
+++ b/lib/platform-bible-react/package.json
@@ -52,6 +52,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.4",
     "autoprefixer": "^10.4.19",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
diff --git a/lib/platform-bible-react/src/components/shadcn-ui/dropdown-menu.tsx b/lib/platform-bible-react/src/components/shadcn-ui/dropdown-menu.tsx
index 9adac17d4f..6335b5d4e9 100644
--- a/lib/platform-bible-react/src/components/shadcn-ui/dropdown-menu.tsx
+++ b/lib/platform-bible-react/src/components/shadcn-ui/dropdown-menu.tsx
@@ -62,7 +62,8 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        'pr-z-50 pr-min-w-[8rem] pr-overflow-hidden pr-rounded-md pr-border pr-bg-popover pr-p-1 pr-text-popover-foreground pr-shadow-md data-[state=open]:pr-animate-in data-[state=closed]:pr-animate-out data-[state=closed]:pr-fade-out-0 data-[state=open]:pr-fade-in-0 data-[state=closed]:pr-zoom-out-95 data-[state=open]:pr-zoom-in-95 data-[side=bottom]:pr-slide-in-from-top-2 data-[side=left]:pr-slide-in-from-right-2 data-[side=right]:pr-slide-in-from-left-2 data-[side=top]:pr-slide-in-from-bottom-2',
+        /* pr-font-sans is added to mitigate issue introduced by scopedPreflightStyles */
+        'pr-z-50 pr-min-w-[8rem] pr-overflow-hidden pr-rounded-md pr-border pr-bg-popover pr-p-1 pr-font-sans pr-text-popover-foreground pr-shadow-md data-[state=open]:pr-animate-in data-[state=closed]:pr-animate-out data-[state=closed]:pr-fade-out-0 data-[state=open]:pr-fade-in-0 data-[state=closed]:pr-zoom-out-95 data-[state=open]:pr-zoom-in-95 data-[side=bottom]:pr-slide-in-from-top-2 data-[side=left]:pr-slide-in-from-right-2 data-[side=right]:pr-slide-in-from-left-2 data-[side=top]:pr-slide-in-from-bottom-2',
         className,
       )}
       {...props}
diff --git a/lib/platform-bible-react/src/components/shadcn-ui/tabs-vertical.tsx b/lib/platform-bible-react/src/components/shadcn-ui/tabs-vertical.tsx
new file mode 100644
index 0000000000..5f441a7e8b
--- /dev/null
+++ b/lib/platform-bible-react/src/components/shadcn-ui/tabs-vertical.tsx
@@ -0,0 +1,77 @@
+// adapted from: https://github.com/shadcn-ui/ui/discussions/752
+/* eslint-disable react/prop-types */
+
+'use client';
+
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+import { cn } from '@/utils/shadcn-ui.util';
+
+const VerticalTabs = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Root
+    orientation="vertical"
+    ref={ref}
+    className={cn('pr-flex pr-gap-1 pr-rounded-md pr-text-muted-foreground', className)}
+    {...props}
+  />
+));
+
+VerticalTabs.displayName = TabsPrimitive.List.displayName;
+
+const VerticalTabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'pr-flex-fit pr-mlk-items-center pr-w-[124px] pr-justify-center pr-rounded-md pr-bg-muted pr-p-1 pr-text-muted-foreground',
+      className,
+    )}
+    {...props}
+  />
+));
+VerticalTabsList.displayName = TabsPrimitive.List.displayName;
+
+type LeftTabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
+  value: string;
+};
+
+const VerticalTabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  LeftTabsTriggerProps
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    {...props}
+    className={cn(
+      'overflow-clip pr-inline-flex pr-w-[116px] pr-cursor-pointer pr-items-center pr-justify-center pr-break-words pr-rounded-sm pr-border-0 pr-bg-muted pr-px-3 pr-py-1.5 pr-text-sm pr-font-medium pr-text-inherit pr-ring-offset-background pr-transition-all hover:pr-text-foreground focus-visible:pr-outline-none focus-visible:pr-ring-2 focus-visible:pr-ring-ring focus-visible:pr-ring-offset-2 disabled:pr-pointer-events-none disabled:pr-opacity-50 data-[state=active]:pr-bg-background data-[state=active]:pr-text-foreground data-[state=active]:pr-shadow-sm',
+      className,
+    )}
+  >
+    <div className="pr-flex pr-flex-col pr-justify-center">
+      <div>{props.value}</div>
+    </div>
+  </TabsPrimitive.Trigger>
+));
+
+const VerticalTabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-2 pr-ml-5 pr-flex-grow pr-text-foreground pr-ring-offset-background focus-visible:pr-outline-none focus-visible:pr-ring-2 focus-visible:pr-ring-ring focus-visible:pr-ring-offset-2',
+      className,
+    )}
+    {...props}
+  />
+));
+VerticalTabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { VerticalTabs, VerticalTabsList, VerticalTabsTrigger, VerticalTabsContent };
diff --git a/lib/platform-bible-react/src/components/shadcn-ui/tabs.tsx b/lib/platform-bible-react/src/components/shadcn-ui/tabs.tsx
new file mode 100644
index 0000000000..12ad3d0787
--- /dev/null
+++ b/lib/platform-bible-react/src/components/shadcn-ui/tabs.tsx
@@ -0,0 +1,54 @@
+/* eslint-disable react/prop-types */
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+import { cn } from '@/utils/shadcn-ui.util';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'pr-inline-flex pr-h-10 pr-items-center pr-justify-center pr-rounded-md pr-bg-muted pr-p-1 pr-text-muted-foreground',
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'pr-inline-flex pr-items-center pr-justify-center pr-whitespace-nowrap pr-rounded-sm pr-px-3 pr-py-1.5 pr-text-sm pr-font-medium pr-ring-offset-background pr-transition-all hover:pr-text-foreground focus-visible:pr-outline-none focus-visible:pr-ring-2 focus-visible:pr-ring-ring focus-visible:pr-ring-offset-2 disabled:pr-pointer-events-none disabled:pr-opacity-50 data-[state=active]:pr-bg-background data-[state=active]:pr-text-foreground data-[state=active]:pr-shadow-sm',
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'pr-mt-2 pr-ring-offset-background focus-visible:pr-outline-none focus-visible:pr-ring-2 focus-visible:pr-ring-ring focus-visible:pr-ring-offset-2',
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/lib/platform-bible-react/src/index.ts b/lib/platform-bible-react/src/index.ts
index f76e0dbc6f..3f2632307a 100644
--- a/lib/platform-bible-react/src/index.ts
+++ b/lib/platform-bible-react/src/index.ts
@@ -69,3 +69,12 @@ export { default as useEvent } from './hooks/use-event.hook';
 export { default as useEventAsync } from './hooks/use-event-async.hook';
 export { default as usePromise } from './hooks/use-promise.hook';
 export type { UsePromiseOptions } from './hooks/use-promise.hook';
+export { Input } from '@/components/shadcn-ui/input';
+export * from '@/components/shadcn-ui/dropdown-menu';
+export { Tabs, TabsList, TabsContent, TabsTrigger } from '@/components/shadcn-ui/tabs';
+export {
+  VerticalTabs,
+  VerticalTabsList,
+  VerticalTabsContent,
+  VerticalTabsTrigger,
+} from '@/components/shadcn-ui/tabs-vertical';
diff --git a/lib/platform-bible-react/src/preview/app.component.tsx b/lib/platform-bible-react/src/preview/app.component.tsx
index d5e5082fa6..8f49b7c200 100644
--- a/lib/platform-bible-react/src/preview/app.component.tsx
+++ b/lib/platform-bible-react/src/preview/app.component.tsx
@@ -1,29 +1,46 @@
-import { useState } from 'react';
-import { ScriptureReference } from 'platform-bible-utils';
-import { BookChapterControl, RefSelector } from '..';
 import './app.component.css';
-
-const defaultScrRef: ScriptureReference = {
-  bookNum: 1,
-  chapterNum: 1,
-  verseNum: 1,
-};
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '..';
+import { ThemeProvider } from './theme-provider.component';
+import ThemeToggle from './theme-toggle.component';
+import Basics from './components/basics.component';
+import Compositions from './components/compositions.component';
+import Examples from './components/examples.component';
+import Playground from './components/playground.component';
 
 function App() {
-  const [scrRef, setScrRef] = useState(defaultScrRef);
-
   return (
-    <>
-      <h1>platform-bible-react Preview</h1>
-      <p>
-        Edit <code>lib\platform-bible-react\src\preview\app.component.tsx</code> and save to see
-        updates
-      </p>
-      <RefSelector scrRef={scrRef} handleSubmit={setScrRef} />
-      <div className="bcv-control-div">
-        <BookChapterControl scrRef={scrRef} handleSubmit={setScrRef} />
+    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+      {/* pr-font-sans is added to mitigate issue introduced by scopedPreflightStyles */}
+      <div className="pr-twp pr-p-2 pr-font-sans">
+        <ThemeToggle className="pr-fixed pr-right-4 pr-top-4" />
+        <h1 className="pr-pb-4 pr-uppercase">platform-bible-react Preview</h1>
+        <p>
+          Edit <code>lib/platform-bible-react/src/preview/components/...</code> and save to see
+          updates
+        </p>
+        <Tabs defaultValue="Playground" className="pr-pt-4">
+          <TabsList>
+            <TabsTrigger value="Basics">Basic Components</TabsTrigger>
+            <TabsTrigger value="Compositions">Composition Components</TabsTrigger>
+            <TabsTrigger value="Examples">Example Layouts</TabsTrigger>
+            <TabsTrigger value="Playground">Playground</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="Basics">
+            <Basics />
+          </TabsContent>
+          <TabsContent value="Compositions">
+            <Compositions />
+          </TabsContent>
+          <TabsContent value="Examples">
+            <Examples />
+          </TabsContent>
+          <TabsContent value="Playground">
+            <Playground />
+          </TabsContent>
+        </Tabs>
       </div>
-    </>
+    </ThemeProvider>
   );
 }
 
diff --git a/lib/platform-bible-react/src/preview/components/basics.component.tsx b/lib/platform-bible-react/src/preview/components/basics.component.tsx
new file mode 100644
index 0000000000..02fe33fcdd
--- /dev/null
+++ b/lib/platform-bible-react/src/preview/components/basics.component.tsx
@@ -0,0 +1,137 @@
+import { Button as ShadcnButton } from '@/components/shadcn-ui/button';
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+  Input,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  TextField,
+  VerticalTabs,
+  VerticalTabsContent,
+  VerticalTabsList,
+  VerticalTabsTrigger,
+} from '../..';
+
+function Basics() {
+  return (
+    <div>
+      <VerticalTabs>
+        <VerticalTabsList>
+          <VerticalTabsTrigger value="Button">Button</VerticalTabsTrigger>
+          <VerticalTabsTrigger value="Input">Input</VerticalTabsTrigger>
+          <VerticalTabsTrigger value="Dropdown Menu">Dropdown Menu</VerticalTabsTrigger>
+          <VerticalTabsTrigger value="Tabs">Tabs</VerticalTabsTrigger>
+        </VerticalTabsList>
+
+        <VerticalTabsContent value="Button">
+          <div>
+            {/* eslint-disable-next-line no-alert */}
+            <Button onClick={() => alert('Hello World')}>Wrapped Button</Button>
+          </div>
+          <div>
+            {/* eslint-disable-next-line no-alert */}
+            <ShadcnButton onClick={() => alert('Hello World')}>Plain Shadcn Button</ShadcnButton>
+          </div>
+        </VerticalTabsContent>
+
+        <VerticalTabsContent value="Input">
+          <table>
+            <tr>
+              <td>
+                Text Field <div className="pr-text-xs">(wrapped)</div>
+              </td>
+              {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+              <td>
+                <TextField />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                Shadcn Default Input
+                <div className="pr-text-xs">(shadcn-ui/input)</div>
+              </td>
+              {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+              <td>
+                <Input />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                Small Input
+                <div className="pr-text-xs">(from https://ui.jln.dev/ &rarr; popover)</div>
+              </td>
+              {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+              <td>
+                <Input className="pr-full pr-file:border-0 pr-col-span-2 pr-flex pr-h-8 pr-rounded-md pr-border pr-border-input pr-bg-background pr-px-3 pr-py-2 pr-text-sm pr-ring-offset-background file:pr-bg-transparent file:pr-text-sm file:pr-font-medium placeholder:pr-text-muted-foreground focus-visible:pr-outline-none focus-visible:pr-ring-2 focus-visible:pr-ring-ring focus-visible:pr-ring-offset-2 disabled:pr-cursor-not-allowed disabled:pr-opacity-50" />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                Small Input <div className="pr-text-xs">(from BCV control)</div>
+              </td>
+              {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+              <td>
+                <Input className="pr-box-border pr-gap-2.5 pr-rounded-lg pr-border pr-border-solid pr-border-black pr-bg-white pr-py-2 pr-pl-4 pr-pr-3 pr-font-medium pr-text-slate-900 pr-shadow-none pr-outline-none" />
+              </td>
+            </tr>
+          </table>
+        </VerticalTabsContent>
+
+        <VerticalTabsContent value="Dropdown Menu">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <ShadcnButton>Open</ShadcnButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuLabel>DropdownMenuLabel</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuItem>
+                  <span>DropdownMenuItem</span>
+                  <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </VerticalTabsContent>
+
+        <VerticalTabsContent value="Tabs">
+          <Tabs>
+            <TabsList>
+              <TabsTrigger value="1">Tab 1</TabsTrigger>
+              <TabsTrigger value="2">Tab 2</TabsTrigger>
+              <TabsTrigger value="3">Tab 3 - no linked content</TabsTrigger>
+            </TabsList>
+            <TabsContent value="1">Tab 1 Content</TabsContent>
+            <TabsContent value="2">Tab 2 Content</TabsContent>
+            {/* intentionally left out 3 to see the effect */}
+          </Tabs>
+          <hr className="pr-my-4" />
+          <VerticalTabs defaultValue="2">
+            <VerticalTabsList>
+              <VerticalTabsTrigger value="1">Tab 1</VerticalTabsTrigger>
+              <VerticalTabsTrigger value="2">Tab 2</VerticalTabsTrigger>
+              <VerticalTabsTrigger value="3">Tab 3</VerticalTabsTrigger>
+              <VerticalTabsTrigger value="4">Tab 4</VerticalTabsTrigger>
+            </VerticalTabsList>
+            <VerticalTabsContent value="1">Tab 1 Content</VerticalTabsContent>
+            <VerticalTabsContent value="2">Tab 2 Content</VerticalTabsContent>
+            <VerticalTabsContent value="3">Tab 3 Content</VerticalTabsContent>
+            <VerticalTabsContent value="4">Tab 4 Content</VerticalTabsContent>
+          </VerticalTabs>
+        </VerticalTabsContent>
+      </VerticalTabs>
+    </div>
+  );
+}
+
+export default Basics;
diff --git a/lib/platform-bible-react/src/preview/components/compositions.component.tsx b/lib/platform-bible-react/src/preview/components/compositions.component.tsx
new file mode 100644
index 0000000000..a2377d7c63
--- /dev/null
+++ b/lib/platform-bible-react/src/preview/components/compositions.component.tsx
@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { ScriptureReference } from 'platform-bible-utils';
+import ThemeToggle from '@/preview/theme-toggle.component';
+import {
+  BookChapterControl,
+  RefSelector,
+  VerticalTabs,
+  VerticalTabsContent,
+  VerticalTabsList,
+  VerticalTabsTrigger,
+} from '../..';
+
+const defaultScrRef: ScriptureReference = {
+  bookNum: 1,
+  chapterNum: 1,
+  verseNum: 1,
+};
+
+function Compositions() {
+  const [scrRef, setScrRef] = useState(defaultScrRef);
+
+  return (
+    <VerticalTabs defaultValue="Book Chapter Control">
+      <VerticalTabsList>
+        <VerticalTabsTrigger value="Book Chapter Control">Book Chapter Control</VerticalTabsTrigger>
+        <VerticalTabsTrigger value="Theme Toggle">Theme Toggle</VerticalTabsTrigger>
+      </VerticalTabsList>
+
+      <VerticalTabsContent value="Book Chapter Control">
+        <RefSelector scrRef={scrRef} handleSubmit={setScrRef} />
+        <div className="bcv-control-div">
+          <BookChapterControl scrRef={scrRef} handleSubmit={setScrRef} />
+        </div>
+        <div>{JSON.stringify(scrRef)}</div>
+      </VerticalTabsContent>
+
+      <VerticalTabsContent value="Theme Toggle">
+        <ThemeToggle />
+      </VerticalTabsContent>
+    </VerticalTabs>
+  );
+}
+
+export default Compositions;
diff --git a/lib/platform-bible-react/src/preview/components/examples.component.tsx b/lib/platform-bible-react/src/preview/components/examples.component.tsx
new file mode 100644
index 0000000000..d14eb79732
--- /dev/null
+++ b/lib/platform-bible-react/src/preview/components/examples.component.tsx
@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import { ScriptureReference } from 'platform-bible-utils';
+import { Button } from '@/components/shadcn-ui/button';
+import {
+  BookChapterControl,
+  VerticalTabs,
+  VerticalTabsContent,
+  VerticalTabsList,
+  VerticalTabsTrigger,
+} from '../..';
+
+const defaultScrRef: ScriptureReference = {
+  bookNum: 1,
+  chapterNum: 1,
+  verseNum: 1,
+};
+
+function Example() {
+  const [scrRef, setScrRef] = useState(defaultScrRef);
+
+  return (
+    <VerticalTabs defaultValue="Window">
+      <VerticalTabsList>
+        <VerticalTabsTrigger value="Window">Window / Tab</VerticalTabsTrigger>
+      </VerticalTabsList>
+
+      <VerticalTabsContent value="Window">
+        <div className="pr-flex pr-flex-row pr-rounded-sm pr-border-2 pr-border-transparent pr-bg-muted">
+          <div className="bcv-control-div">
+            <BookChapterControl scrRef={scrRef} handleSubmit={setScrRef} />
+          </div>
+          <div className="pr-grow" />
+          <div className="bcv-control-div pr-flex pr-space-x-2">
+            <Button>&#x22ee;</Button>
+            <Button>Help</Button>
+            <Button>X</Button>
+          </div>
+        </div>
+        <div className="pr-rounded-sm pr-border-2 pr-border-t-0 pr-border-muted pr-p-4">
+          <p>
+            Imagine here the text of <code>{JSON.stringify(scrRef)}</code>
+          </p>
+          <br />
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+            mollit anim id est laborum.
+          </p>
+          <br />
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+            mollit anim id est laborum.
+          </p>
+          <br />
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+            mollit anim id est laborum.
+          </p>
+        </div>
+      </VerticalTabsContent>
+    </VerticalTabs>
+  );
+}
+
+export default Example;
diff --git a/lib/platform-bible-react/src/preview/components/playground.component.tsx b/lib/platform-bible-react/src/preview/components/playground.component.tsx
new file mode 100644
index 0000000000..ff1cc4633c
--- /dev/null
+++ b/lib/platform-bible-react/src/preview/components/playground.component.tsx
@@ -0,0 +1,10 @@
+function Playground() {
+  return (
+    <>
+      <p>Put here whatever you want </p>
+      <p className="pr-text-5xl">&#127881;</p>
+    </>
+  );
+}
+
+export default Playground;
diff --git a/lib/platform-bible-react/src/preview/theme-provider.component.tsx b/lib/platform-bible-react/src/preview/theme-provider.component.tsx
new file mode 100644
index 0000000000..811debf565
--- /dev/null
+++ b/lib/platform-bible-react/src/preview/theme-provider.component.tsx
@@ -0,0 +1,74 @@
+// source: https://ui.shadcn.com/docs/dark-mode/vite
+
+import * as React from 'react';
+import { createContext, useContext, useEffect, useState } from 'react';
+
+type Theme = 'dark' | 'light' | 'system';
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+  theme: 'system',
+  setTheme: () => undefined,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = 'system',
+  storageKey = 'vite-ui-theme',
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
+  );
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove('light', 'dark');
+
+    if (theme === 'system') {
+      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+
+      root.classList.add(systemTheme);
+      return;
+    }
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider');
+
+  return context;
+};
diff --git a/lib/platform-bible-react/src/preview/theme-toggle.component.tsx b/lib/platform-bible-react/src/preview/theme-toggle.component.tsx
new file mode 100644
index 0000000000..29491d188e
--- /dev/null
+++ b/lib/platform-bible-react/src/preview/theme-toggle.component.tsx
@@ -0,0 +1,43 @@
+// source: https://ui.shadcn.com/docs/dark-mode/vite
+
+/* eslint-disable react/prop-types */
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Moon, Sun } from 'lucide-react';
+import { Button } from '../components/shadcn-ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../components/shadcn-ui/dropdown-menu';
+import { useTheme } from './theme-provider.component';
+
+const ThemeToggle = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>
+>(({ className }, ref) => {
+  const { setTheme } = useTheme();
+  return (
+    <div ref={ref} className={className}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" size="icon">
+            <Sun className="pr-h-[1.2rem] pr-w-[1.2rem] pr-rotate-0 pr-scale-100 pr-transition-all dark:pr--rotate-90 dark:pr-scale-0" />
+            <Moon className="pr-absolute pr-h-[1.2rem] pr-w-[1.2rem] pr-rotate-90 pr-scale-0 pr-transition-all dark:pr-rotate-0 dark:pr-scale-100" />
+            <span className="pr-sr-only">Toggle theme</span>
+          </Button>
+        </DropdownMenuTrigger>
+
+        {/* pr-font-sans is added to mitigate issue introduced by scopedPreflightStyles */}
+        <DropdownMenuContent align="end" className="pr-font-sans">
+          <DropdownMenuItem onClick={() => setTheme('light')}>Light</DropdownMenuItem>
+          <DropdownMenuItem onClick={() => setTheme('dark')}>Dark</DropdownMenuItem>
+          <DropdownMenuItem onClick={() => setTheme('system')}>System</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+});
+
+export default ThemeToggle;
diff --git a/package-lock.json b/package-lock.json
index 02de8ad55c..a7eb1cd1eb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,11 +6,7 @@
     "": {
       "hasInstallScript": true,
       "license": "MIT",
-      "workspaces": [
-        "lib/*",
-        "extensions",
-        "extensions/src/*"
-      ],
+      "workspaces": ["lib/*", "extensions", "extensions/src/*"],
       "dependencies": {
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.0",
@@ -147,9 +143,7 @@
       "version": "0.0.1",
       "hasInstallScript": true,
       "license": "MIT",
-      "workspaces": [
-        "src/*"
-      ],
+      "workspaces": ["src/*"],
       "dependencies": {
         "@sillsdev/scripture": "^1.4.3",
         "platform-bible-utils": "file:../lib/platform-bible-utils"
@@ -720,6 +714,7 @@
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-slot": "^1.0.2",
+        "@radix-ui/react-tabs": "^1.0.4",
         "autoprefixer": "^10.4.19",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
@@ -3834,14 +3829,10 @@
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
       "integrity": "sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==",
-      "cpu": [
-        "ppc64"
-      ],
+      "cpu": ["ppc64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "aix"
-      ],
+      "os": ["aix"],
       "engines": {
         "node": ">=12"
       }
@@ -3850,14 +3841,10 @@
       "version": "0.18.16",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.16.tgz",
       "integrity": "sha512-gCHjjQmA8L0soklKbLKA6pgsLk1byULuHe94lkZDzcO3/Ta+bbeewJioEn1Fr7kgy9NWNFy/C+MrBwC6I/WCug==",
-      "cpu": [
-        "arm"
-      ],
+      "cpu": ["arm"],
       "dev": true,
       "optional": true,
-      "os": [
-        "android"
-      ],
+      "os": ["android"],
       "engines": {
         "node": ">=12"
       }
@@ -3866,14 +3853,10 @@
       "version": "0.18.16",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.16.tgz",
       "integrity": "sha512-wsCqSPqLz+6Ov+OM4EthU43DyYVVyfn15S4j1bJzylDpc1r1jZFFfJQNfDuT8SlgwuqpmpJXK4uPlHGw6ve7eA==",
-      "cpu": [
-        "arm64"
-      ],
+      "cpu": ["arm64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "android"
-      ],
+      "os": ["android"],
       "engines": {
         "node": ">=12"
       }
@@ -3882,14 +3865,10 @@
       "version": "0.18.16",
       "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.16.tgz",
       "integrity": "sha512-ldsTXolyA3eTQ1//4DS+E15xl0H/3DTRJaRL0/0PgkqDsI0fV/FlOtD+h0u/AUJr+eOTlZv4aC9gvfppo3C4sw==",
-      "cpu": [
-        "x64"
-      ],
+      "cpu": ["x64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "android"
-      ],
+      "os": ["android"],
       "engines": {
         "node": ">=12"
       }
@@ -3898,14 +3877,10 @@
       "version": "0.18.16",
       "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.16.tgz",
       "integrity": "sha512-aBxruWCII+OtluORR/KvisEw0ALuw/qDQWvkoosA+c/ngC/Kwk0lLaZ+B++LLS481/VdydB2u6tYpWxUfnLAIw==",
-      "cpu": [
-        "arm64"
-      ],
+      "cpu": ["arm64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "os": ["darwin"],
       "engines": {
         "node": ">=12"
       }
@@ -3914,14 +3889,10 @@
       "version": "0.18.16",
       "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.16.tgz",
       "integrity": "sha512-6w4Dbue280+rp3LnkgmriS1icOUZDyPuZo/9VsuMUTns7SYEiOaJ7Ca1cbhu9KVObAWfmdjUl4gwy9TIgiO5eA==",
-      "cpu": [
-        "x64"
-      ],
+      "cpu": ["x64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "os": ["darwin"],
       "engines": {
         "node": ">=12"
       }
@@ -3930,14 +3901,10 @@
       "version": "0.18.16",
       "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.16.tgz",
       "integrity": "sha512-x35fCebhe9s979DGKbVAwXUOcTmCIE32AIqB9CB1GralMIvxdnMLAw5CnID17ipEw9/3MvDsusj/cspYt2ZLNQ==",
-      "cpu": [
-        "arm64"
-      ],
+      "cpu": ["arm64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "freebsd"
-      ],
+      "os": ["freebsd"],
       "engines": {
         "node": ">=12"
       }
@@ -3946,14 +3913,10 @@
       "version": "0.18.16",
       "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.16.tgz",
       "integrity": "sha512-YM98f+PeNXF3GbxIJlUsj+McUWG1irguBHkszCIwfr3BXtXZsXo0vqybjUDFfu9a8Wr7uUD/YSmHib+EeGAFlg==",
-      "cpu": [
-        "x64"
-      ],
+      "cpu": ["x64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "freebsd"
-      ],
+      "os": ["freebsd"],
       "engines": {
         "node": ">=12"
       }
@@ -3962,14 +3925,10 @@
       "version": "0.18.16",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.16.tgz",
       "integrity": "sha512-b5ABb+5Ha2C9JkeZXV+b+OruR1tJ33ePmv9ZwMeETSEKlmu/WJ45XTTG+l6a2KDsQtJJ66qo/hbSGBtk0XVLHw==",
-      "cpu": [
-        "arm"
-      ],
+      "cpu": ["arm"],
       "dev": true,
       "optional": true,
-      "os": [
-        "linux"
-      ],
+      "os": ["linux"],
       "engines": {
         "node": ">=12"
       }
@@ -3978,14 +3937,10 @@
       "version": "0.18.16",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.16.tgz",
       "integrity": "sha512-XIqhNUxJiuy+zsR77+H5Z2f7s4YRlriSJKtvx99nJuG5ATuJPjmZ9n0ANgnGlPCpXGSReFpgcJ7O3SMtzIFeiQ==",
-      "cpu": [
-        "arm64"
-      ],
+      "cpu": ["arm64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "linux"
-      ],
+      "os": ["linux"],
       "engines": {
         "node": ">=12"
       }
@@ -3994,14 +3949,10 @@
       "version": "0.18.16",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.16.tgz",
       "integrity": "sha512-no+pfEpwnRvIyH+txbBAWtjxPU9grslmTBfsmDndj7bnBmr55rOo/PfQmRfz7Qg9isswt1FP5hBbWb23fRWnow==",
-      "cpu": [
-        "ia32"
-      ],
+      "cpu": ["ia32"],
       "dev": true,
       "optional": true,
-      "os": [
-        "linux"
-      ],
+      "os": ["linux"],
       "engines": {
         "node": ">=12"
       }
@@ -4010,14 +3961,10 @@
       "version": "0.18.16",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.16.tgz",
       "integrity": "sha512-Zbnczs9ZXjmo0oZSS0zbNlJbcwKXa/fcNhYQjahDs4Xg18UumpXG/lwM2lcSvHS3mTrRyCYZvJbmzYc4laRI1g==",
-      "cpu": [
-        "loong64"
-      ],
+      "cpu": ["loong64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "linux"
-      ],
+      "os": ["linux"],
       "engines": {
         "node": ">=12"
       }
@@ -4026,14 +3973,10 @@
       "version": "0.18.16",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.16.tgz",
       "integrity": "sha512-YMF7hih1HVR/hQVa/ot4UVffc5ZlrzEb3k2ip0nZr1w6fnYypll9td2qcoMLvd3o8j3y6EbJM3MyIcXIVzXvQQ==",
-      "cpu": [
-        "mips64el"
-      ],
+      "cpu": ["mips64el"],
       "dev": true,
       "optional": true,
-      "os": [
-        "linux"
-      ],
+      "os": ["linux"],
       "engines": {
         "node": ">=12"
       }
@@ -4042,14 +3985,10 @@
       "version": "0.18.16",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.16.tgz",
       "integrity": "sha512-Wkz++LZ29lDwUyTSEnzDaaP5OveOgTU69q9IyIw9WqLRxM4BjTBjz9un4G6TOvehWpf/J3gYVFN96TjGHrbcNQ==",
-      "cpu": [
-        "ppc64"
-      ],
+      "cpu": ["ppc64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "linux"
-      ],
+      "os": ["linux"],
       "engines": {
         "node": ">=12"
       }
@@ -4058,14 +3997,10 @@
       "version": "0.18.16",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.16.tgz",
       "integrity": "sha512-LFMKZ30tk78/mUv1ygvIP+568bwf4oN6reG/uczXnz6SvFn4e2QUFpUpZY9iSJT6Qpgstrhef/nMykIXZtZWGQ==",
-      "cpu": [
-        "riscv64"
-      ],
+      "cpu": ["riscv64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "linux"
-      ],
+      "os": ["linux"],
       "engines": {
         "node": ">=12"
       }
@@ -4074,14 +4009,10 @@
       "version": "0.18.16",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.16.tgz",
       "integrity": "sha512-3ZC0BgyYHYKfZo3AV2/66TD/I9tlSBaW7eWTEIkrQQKfJIifKMMttXl9FrAg+UT0SGYsCRLI35Gwdmm96vlOjg==",
-      "cpu": [
-        "s390x"
-      ],
+      "cpu": ["s390x"],
       "dev": true,
       "optional": true,
-      "os": [
-        "linux"
-      ],
+      "os": ["linux"],
       "engines": {
         "node": ">=12"
       }
@@ -4090,14 +4021,10 @@
       "version": "0.18.16",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.16.tgz",
       "integrity": "sha512-xu86B3647DihHJHv/wx3NCz2Dg1gjQ8bbf9cVYZzWKY+gsvxYmn/lnVlqDRazObc3UMwoHpUhNYaZset4X8IPA==",
-      "cpu": [
-        "x64"
-      ],
+      "cpu": ["x64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "linux"
-      ],
+      "os": ["linux"],
       "engines": {
         "node": ">=12"
       }
@@ -4106,14 +4033,10 @@
       "version": "0.18.16",
       "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.16.tgz",
       "integrity": "sha512-uVAgpimx9Ffw3xowtg/7qQPwHFx94yCje+DoBx+LNm2ePDpQXHrzE+Sb0Si2VBObYz+LcRps15cq+95YM7gkUw==",
-      "cpu": [
-        "x64"
-      ],
+      "cpu": ["x64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "netbsd"
-      ],
+      "os": ["netbsd"],
       "engines": {
         "node": ">=12"
       }
@@ -4122,14 +4045,10 @@
       "version": "0.18.16",
       "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.16.tgz",
       "integrity": "sha512-6OjCQM9wf7z8/MBi6BOWaTL2AS/SZudsZtBziXMtNI8r/U41AxS9x7jn0ATOwVy08OotwkPqGRMkpPR2wcTJXA==",
-      "cpu": [
-        "x64"
-      ],
+      "cpu": ["x64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "openbsd"
-      ],
+      "os": ["openbsd"],
       "engines": {
         "node": ">=12"
       }
@@ -4138,14 +4057,10 @@
       "version": "0.18.16",
       "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.16.tgz",
       "integrity": "sha512-ZoNkruFYJp9d1LbUYCh8awgQDvB9uOMZqlQ+gGEZR7v6C+N6u7vPr86c+Chih8niBR81Q/bHOSKGBK3brJyvkQ==",
-      "cpu": [
-        "x64"
-      ],
+      "cpu": ["x64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "sunos"
-      ],
+      "os": ["sunos"],
       "engines": {
         "node": ">=12"
       }
@@ -4154,14 +4069,10 @@
       "version": "0.18.16",
       "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.16.tgz",
       "integrity": "sha512-+j4anzQ9hrs+iqO+/wa8UE6TVkKua1pXUb0XWFOx0FiAj6R9INJ+WE//1/Xo6FG1vB5EpH3ko+XcgwiDXTxcdw==",
-      "cpu": [
-        "arm64"
-      ],
+      "cpu": ["arm64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "win32"
-      ],
+      "os": ["win32"],
       "engines": {
         "node": ">=12"
       }
@@ -4170,14 +4081,10 @@
       "version": "0.18.16",
       "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.16.tgz",
       "integrity": "sha512-5PFPmq3sSKTp9cT9dzvI67WNfRZGvEVctcZa1KGjDDu4n3H8k59Inbk0du1fz0KrAbKKNpJbdFXQMDUz7BG4rQ==",
-      "cpu": [
-        "ia32"
-      ],
+      "cpu": ["ia32"],
       "dev": true,
       "optional": true,
-      "os": [
-        "win32"
-      ],
+      "os": ["win32"],
       "engines": {
         "node": ">=12"
       }
@@ -4186,14 +4093,10 @@
       "version": "0.18.16",
       "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.16.tgz",
       "integrity": "sha512-sCIVrrtcWN5Ua7jYXNG1xD199IalrbfV2+0k/2Zf2OyV2FtnQnMgdzgpRAbi4AWlKJj1jkX+M+fEGPQj6BQB4w==",
-      "cpu": [
-        "x64"
-      ],
+      "cpu": ["x64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "win32"
-      ],
+      "os": ["win32"],
       "engines": {
         "node": ">=12"
       }
@@ -5584,9 +5487,9 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "5.15.14",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.14.tgz",
-      "integrity": "sha512-auXLXzUaCSSOLqJXmsAaq7P96VPRXg2Rrz6OHNV7lr+kB8lobUF+/N84Vd9C4G/wvCXYPs5TYuuGBRhcGbiBGg==",
+      "version": "5.15.15",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.15.tgz",
+      "integrity": "sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ==",
       "dependencies": {
         "@babel/runtime": "^7.23.9",
         "@mui/private-theming": "^5.15.14",
@@ -6463,6 +6366,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.0.4.tgz",
+      "integrity": "sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-toggle": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.0.3.tgz",
@@ -9001,14 +8934,10 @@
       "version": "1.4.11",
       "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.4.11.tgz",
       "integrity": "sha512-C1j1Qp/IHSelVWdEnT7f0iONWxQz6FAqzjCF2iaL+0vFg4V5f2nlgrueY8vj5pNNzSGhrAlxsMxEIp4dj1MXkg==",
-      "cpu": [
-        "arm64"
-      ],
+      "cpu": ["arm64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "os": ["darwin"],
       "engines": {
         "node": ">=10"
       }
@@ -9017,14 +8946,10 @@
       "version": "1.4.11",
       "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.4.11.tgz",
       "integrity": "sha512-0TTy3Ni8ncgaMCchSQ7FK8ZXQLlamy0FXmGWbR58c+pVZWYZltYPTmheJUvVcR0H2+gPAymRKyfC0iLszDALjg==",
-      "cpu": [
-        "x64"
-      ],
+      "cpu": ["x64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "os": ["darwin"],
       "engines": {
         "node": ">=10"
       }
@@ -9033,14 +8958,10 @@
       "version": "1.4.11",
       "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.4.11.tgz",
       "integrity": "sha512-XJLB71uw0rog4DjYAPxFGAuGCBQpgJDlPZZK6MTmZOvI/1t0+DelJ24IjHIxk500YYM26Yv47xPabqFPD7I2zQ==",
-      "cpu": [
-        "arm"
-      ],
+      "cpu": ["arm"],
       "dev": true,
       "optional": true,
-      "os": [
-        "linux"
-      ],
+      "os": ["linux"],
       "engines": {
         "node": ">=10"
       }
@@ -9049,14 +8970,10 @@
       "version": "1.4.11",
       "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.4.11.tgz",
       "integrity": "sha512-vYQwzJvm/iu052d5Iw27UFALIN5xSrGkPZXxLNMHPySVko2QMNNBv35HLatkEQHbQ3X+VKSW9J9SkdtAvAVRAQ==",
-      "cpu": [
-        "arm64"
-      ],
+      "cpu": ["arm64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "linux"
-      ],
+      "os": ["linux"],
       "engines": {
         "node": ">=10"
       }
@@ -9065,14 +8982,10 @@
       "version": "1.4.11",
       "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.4.11.tgz",
       "integrity": "sha512-eV+KduiRYUFjPsvbZuJ9aknQH9Tj0U2/G9oIZSzLx/18WsYi+upzHbgxmIIHJ2VJgfd7nN40RI/hMtxNsUzR/g==",
-      "cpu": [
-        "arm64"
-      ],
+      "cpu": ["arm64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "linux"
-      ],
+      "os": ["linux"],
       "engines": {
         "node": ">=10"
       }
@@ -9081,14 +8994,10 @@
       "version": "1.4.11",
       "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.4.11.tgz",
       "integrity": "sha512-WA1iGXZ2HpqM1OR9VCQZJ8sQ1KP2or9O4bO8vWZo6HZJIeoQSo7aa9waaCLRpkZvkng1ct/TF/l6ymqSNFXIzQ==",
-      "cpu": [
-        "x64"
-      ],
+      "cpu": ["x64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "linux"
-      ],
+      "os": ["linux"],
       "engines": {
         "node": ">=10"
       }
@@ -9097,14 +9006,10 @@
       "version": "1.4.11",
       "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.4.11.tgz",
       "integrity": "sha512-UkVJToKf0owwQYRnGvjHAeYVDfeimCEcx0VQSbJoN7Iy0ckRZi7YPlmWJU31xtKvikE2bQWCOVe0qbSDqqcWXA==",
-      "cpu": [
-        "x64"
-      ],
+      "cpu": ["x64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "linux"
-      ],
+      "os": ["linux"],
       "engines": {
         "node": ">=10"
       }
@@ -9113,14 +9018,10 @@
       "version": "1.4.11",
       "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.4.11.tgz",
       "integrity": "sha512-35khwkyly7lF5NDSyvIrukBMzxPorgc5iTSDfVO/LvnmN5+fm4lTlrDr4tUfTdOhv3Emy7CsKlsNAeFRJ+Pm+w==",
-      "cpu": [
-        "arm64"
-      ],
+      "cpu": ["arm64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "win32"
-      ],
+      "os": ["win32"],
       "engines": {
         "node": ">=10"
       }
@@ -9129,14 +9030,10 @@
       "version": "1.4.11",
       "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.4.11.tgz",
       "integrity": "sha512-Wx8/6f0ufgQF2pbVPsJ2dAmFLwIOW+xBE5fxnb7VnEbGkTgP1qMDWiiAtD9rtvDSuODG3i1AEmAak/2HAc6i6A==",
-      "cpu": [
-        "ia32"
-      ],
+      "cpu": ["ia32"],
       "dev": true,
       "optional": true,
-      "os": [
-        "win32"
-      ],
+      "os": ["win32"],
       "engines": {
         "node": ">=10"
       }
@@ -9145,14 +9042,10 @@
       "version": "1.4.11",
       "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.4.11.tgz",
       "integrity": "sha512-0xRFW6K9UZQH2NVC/0pVB0GJXS45lY24f+6XaPBF1YnMHd8A8GoHl7ugyM5yNUTe2AKhSgk5fJV00EJt/XBtdQ==",
-      "cpu": [
-        "x64"
-      ],
+      "cpu": ["x64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "win32"
-      ],
+      "os": ["win32"],
       "engines": {
         "node": ">=10"
       }
@@ -10964,9 +10857,7 @@
     "node_modules/ansi-html-community": {
       "version": "0.0.8",
       "dev": true,
-      "engines": [
-        "node >= 0.8.0"
-      ],
+      "engines": ["node >= 0.8.0"],
       "license": "Apache-2.0",
       "bin": {
         "ansi-html": "bin/ansi-html"
@@ -13168,9 +13059,7 @@
       "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
       "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
       "dev": true,
-      "engines": [
-        "node >= 0.8"
-      ],
+      "engines": ["node >= 0.8"],
       "dependencies": {
         "buffer-from": "^1.0.0",
         "inherits": "^2.0.3",
@@ -14560,9 +14449,7 @@
       "integrity": "sha512-ZdzmqwKmECOWJpqefloC5OJy1+WZBBse5+MR88z9g9Zn4VY+WYUkAyojmhzJckH5YbbZGcYIuGAkY5/Ys5OM2Q==",
       "dev": true,
       "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "os": ["darwin"],
       "dependencies": {
         "@types/plist": "^3.0.1",
         "@types/verror": "^1.10.3",
@@ -16756,9 +16643,7 @@
       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.4.1.tgz",
       "integrity": "sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA==",
       "dev": true,
-      "engines": [
-        "node >=0.6.0"
-      ],
+      "engines": ["node >=0.6.0"],
       "optional": true
     },
     "node_modules/fast-deep-equal": {
@@ -17547,9 +17432,7 @@
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
       "hasInstallScript": true,
       "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "os": ["darwin"],
       "engines": {
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
@@ -18431,9 +18314,7 @@
       "integrity": "sha512-T10qvkw0zz4wnm560lOEg0PovVqUXuOFhhHAkixw8/sycy7TJt7v/RrkEKEQnAw2viPSJu6iAkErxnzR0g8PpQ==",
       "dev": true,
       "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "os": ["darwin"],
       "dependencies": {
         "cli-truncate": "^2.1.0",
         "node-addon-api": "^1.6.3"
@@ -29012,14 +28893,10 @@
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.12.tgz",
       "integrity": "sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==",
-      "cpu": [
-        "arm"
-      ],
+      "cpu": ["arm"],
       "dev": true,
       "optional": true,
-      "os": [
-        "android"
-      ],
+      "os": ["android"],
       "engines": {
         "node": ">=12"
       }
@@ -29028,14 +28905,10 @@
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz",
       "integrity": "sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==",
-      "cpu": [
-        "arm64"
-      ],
+      "cpu": ["arm64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "android"
-      ],
+      "os": ["android"],
       "engines": {
         "node": ">=12"
       }
@@ -29044,14 +28917,10 @@
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.12.tgz",
       "integrity": "sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==",
-      "cpu": [
-        "x64"
-      ],
+      "cpu": ["x64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "android"
-      ],
+      "os": ["android"],
       "engines": {
         "node": ">=12"
       }
@@ -29060,14 +28929,10 @@
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz",
       "integrity": "sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==",
-      "cpu": [
-        "arm64"
-      ],
+      "cpu": ["arm64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "os": ["darwin"],
       "engines": {
         "node": ">=12"
       }
@@ -29076,14 +28941,10 @@
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz",
       "integrity": "sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==",
-      "cpu": [
-        "x64"
-      ],
+      "cpu": ["x64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "os": ["darwin"],
       "engines": {
         "node": ">=12"
       }
@@ -29092,14 +28953,10 @@
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz",
       "integrity": "sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==",
-      "cpu": [
-        "arm64"
-      ],
+      "cpu": ["arm64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "freebsd"
-      ],
+      "os": ["freebsd"],
       "engines": {
         "node": ">=12"
       }
@@ -29108,14 +28965,10 @@
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz",
       "integrity": "sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==",
-      "cpu": [
-        "x64"
-      ],
+      "cpu": ["x64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "freebsd"
-      ],
+      "os": ["freebsd"],
       "engines": {
         "node": ">=12"
       }
@@ -29124,14 +28977,10 @@
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz",
       "integrity": "sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==",
-      "cpu": [
-        "arm"
-      ],
+      "cpu": ["arm"],
       "dev": true,
       "optional": true,
-      "os": [
-        "linux"
-      ],
+      "os": ["linux"],
       "engines": {
         "node": ">=12"
       }
@@ -29140,14 +28989,10 @@
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz",
       "integrity": "sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==",
-      "cpu": [
-        "arm64"
-      ],
+      "cpu": ["arm64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "linux"
-      ],
+      "os": ["linux"],
       "engines": {
         "node": ">=12"
       }
@@ -29156,14 +29001,10 @@
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz",
       "integrity": "sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==",
-      "cpu": [
-        "ia32"
-      ],
+      "cpu": ["ia32"],
       "dev": true,
       "optional": true,
-      "os": [
-        "linux"
-      ],
+      "os": ["linux"],
       "engines": {
         "node": ">=12"
       }
@@ -29172,14 +29013,10 @@
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz",
       "integrity": "sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==",
-      "cpu": [
-        "loong64"
-      ],
+      "cpu": ["loong64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "linux"
-      ],
+      "os": ["linux"],
       "engines": {
         "node": ">=12"
       }
@@ -29188,14 +29025,10 @@
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz",
       "integrity": "sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==",
-      "cpu": [
-        "mips64el"
-      ],
+      "cpu": ["mips64el"],
       "dev": true,
       "optional": true,
-      "os": [
-        "linux"
-      ],
+      "os": ["linux"],
       "engines": {
         "node": ">=12"
       }
@@ -29204,14 +29037,10 @@
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz",
       "integrity": "sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==",
-      "cpu": [
-        "ppc64"
-      ],
+      "cpu": ["ppc64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "linux"
-      ],
+      "os": ["linux"],
       "engines": {
         "node": ">=12"
       }
@@ -29220,14 +29049,10 @@
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz",
       "integrity": "sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==",
-      "cpu": [
-        "riscv64"
-      ],
+      "cpu": ["riscv64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "linux"
-      ],
+      "os": ["linux"],
       "engines": {
         "node": ">=12"
       }
@@ -29236,14 +29061,10 @@
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz",
       "integrity": "sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==",
-      "cpu": [
-        "s390x"
-      ],
+      "cpu": ["s390x"],
       "dev": true,
       "optional": true,
-      "os": [
-        "linux"
-      ],
+      "os": ["linux"],
       "engines": {
         "node": ">=12"
       }
@@ -29252,14 +29073,10 @@
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz",
       "integrity": "sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==",
-      "cpu": [
-        "x64"
-      ],
+      "cpu": ["x64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "linux"
-      ],
+      "os": ["linux"],
       "engines": {
         "node": ">=12"
       }
@@ -29268,14 +29085,10 @@
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz",
       "integrity": "sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==",
-      "cpu": [
-        "x64"
-      ],
+      "cpu": ["x64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "netbsd"
-      ],
+      "os": ["netbsd"],
       "engines": {
         "node": ">=12"
       }
@@ -29284,14 +29097,10 @@
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz",
       "integrity": "sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==",
-      "cpu": [
-        "x64"
-      ],
+      "cpu": ["x64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "openbsd"
-      ],
+      "os": ["openbsd"],
       "engines": {
         "node": ">=12"
       }
@@ -29300,14 +29109,10 @@
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz",
       "integrity": "sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==",
-      "cpu": [
-        "x64"
-      ],
+      "cpu": ["x64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "sunos"
-      ],
+      "os": ["sunos"],
       "engines": {
         "node": ">=12"
       }
@@ -29316,14 +29121,10 @@
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz",
       "integrity": "sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==",
-      "cpu": [
-        "arm64"
-      ],
+      "cpu": ["arm64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "win32"
-      ],
+      "os": ["win32"],
       "engines": {
         "node": ">=12"
       }
@@ -29332,14 +29133,10 @@
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz",
       "integrity": "sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==",
-      "cpu": [
-        "ia32"
-      ],
+      "cpu": ["ia32"],
       "dev": true,
       "optional": true,
-      "os": [
-        "win32"
-      ],
+      "os": ["win32"],
       "engines": {
         "node": ">=12"
       }
@@ -29348,14 +29145,10 @@
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz",
       "integrity": "sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==",
-      "cpu": [
-        "x64"
-      ],
+      "cpu": ["x64"],
       "dev": true,
       "optional": true,
-      "os": [
-        "win32"
-      ],
+      "os": ["win32"],
       "engines": {
         "node": ">=12"
       }
@@ -34426,9 +34219,9 @@
       }
     },
     "@mui/system": {
-      "version": "5.15.14",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.14.tgz",
-      "integrity": "sha512-auXLXzUaCSSOLqJXmsAaq7P96VPRXg2Rrz6OHNV7lr+kB8lobUF+/N84Vd9C4G/wvCXYPs5TYuuGBRhcGbiBGg==",
+      "version": "5.15.15",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.15.tgz",
+      "integrity": "sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ==",
       "requires": {
         "@babel/runtime": "^7.23.9",
         "@mui/private-theming": "^5.15.14",
@@ -34876,6 +34669,22 @@
         "@radix-ui/react-compose-refs": "1.0.1"
       }
     },
+    "@radix-ui/react-tabs": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.0.4.tgz",
+      "integrity": "sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      }
+    },
     "@radix-ui/react-toggle": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.0.3.tgz",
@@ -46833,6 +46642,7 @@
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-slot": "^1.0.2",
+        "@radix-ui/react-tabs": "^1.0.4",
         "@senojs/rollup-plugin-style-inject": "^0.2.3",
         "@testing-library/jest-dom": "^6.4.2",
         "@testing-library/react": "^14.2.2",