update file manager

2023-01-01 21:54:05 +08:00 · 2023-01-01 21:54:05 +08:00 · 39397fc829
commit 39397fc829
parent 2dd95be90d
16 changed files with 483 additions and 49 deletions
--- a/lama_cleaner/app/package.json
+++ b/lama_cleaner/app/package.json
@ -5,11 +5,14 @@
  "proxy": "http://localhost:8080",
  "dependencies": {
    "@heroicons/react": "^2.0.0",
+    "@radix-ui/colors": "^0.1.8",
    "@radix-ui/react-dialog": "0.1.8-rc.25",
    "@radix-ui/react-icons": "^1.1.1",
    "@radix-ui/react-popover": "^1.0.0",
+    "@radix-ui/react-scroll-area": "^1.0.2",
    "@radix-ui/react-select": "0.1.2-rc.27",
    "@radix-ui/react-switch": "^0.1.5",
+    "@radix-ui/react-tabs": "^1.0.1",
    "@radix-ui/react-toast": "^0.1.1",
    "@radix-ui/react-tooltip": "^0.1.7",
    "@testing-library/jest-dom": "^5.14.1",
--- a/lama_cleaner/app/src/components/FileManager/FileManager.scss
+++ b/lama_cleaner/app/src/components/FileManager/FileManager.scss
@ -1,14 +1,13 @@
+@import '@radix-ui/colors/blackA.css';
+@import '@radix-ui/colors/mauve.css';
+@import '@radix-ui/colors/violet.css';
+
 .file-manager-modal {
  color: var(--text-color);
  height: 90%;
  width: 80%;
 }

-.file-manager {
-  overflow: auto;
-  border-radius: 8px;
-}
-
 .react-photo-album.react-photo-album--columns {
  height: 80vh;
 }
@ -22,6 +21,64 @@

  &:hover {
    border: 1px solid var(--border-color);
-    transform: scale(1.01);
+    transform: scale(1.03);
  }
 }
+
+.ScrollAreaRoot {
+  border-radius: 4px;
+  overflow: hidden;
+  // box-shadow: 0 2px 10px var(--blackA7);
+  --scrollbar-size: 10px;
+}
+
+.ScrollAreaViewport {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+
+.ScrollAreaScrollbar {
+  display: flex;
+  /* ensures no selection */
+  user-select: none;
+  /* disable browser handling of all panning and zooming gestures on touch devices */
+  touch-action: none;
+  padding: 2px;
+  // background: var(--blackA6);
+  transition: background 160ms ease-out;
+}
+
+.ScrollAreaScrollbar:hover {
+  background: var(--blackA8);
+}
+.ScrollAreaScrollbar[data-orientation='vertical'] {
+  width: var(--scrollbar-size);
+}
+.ScrollAreaScrollbar[data-orientation='horizontal'] {
+  flex-direction: column;
+  height: var(--scrollbar-size);
+}
+
+.ScrollAreaThumb {
+  flex: 1;
+  background: var(--mauve10);
+  border-radius: var(--scrollbar-size);
+  position: relative;
+}
+/* increase target size for touch devices https://www.w3.org/WAI/WCAG21/Understanding/target-size.html */
+.ScrollAreaThumb::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  min-width: 44px;
+  min-height: 44px;
+}
+
+.ScrollAreaCorner {
+  background: var(--blackA8);
+}
--- a/lama_cleaner/app/src/components/FileManager/FileManager.tsx
+++ b/lama_cleaner/app/src/components/FileManager/FileManager.tsx
@ -1,6 +1,15 @@
-import React, { ReactNode, useEffect, useMemo, useState } from 'react'
+import React, {
+  SyntheticEvent,
+  useEffect,
+  useMemo,
+  useState,
+  useCallback,
+  useRef,
+} from 'react'
 import PhotoAlbum, { RenderPhoto } from 'react-photo-album'
+import * as ScrollArea from '@radix-ui/react-scroll-area'
 import Modal from '../shared/Modal'
+import Button from '../shared/Button'

 interface Photo {
  src: string
@ -36,12 +45,35 @@ const renderPhoto: RenderPhoto = ({
 interface Props {
  show: boolean
  onClose: () => void
-  onPhotoClick: (filename: string) => void
+  onPhotoClick(filename: string): void
+  photoWidth: number
 }

 export default function FileManager(props: Props) {
-  const { show, onClose, onPhotoClick } = props
+  const { show, onClose, onPhotoClick, photoWidth } = props
  const [filenames, setFileNames] = useState<Filename[]>([])
+  const [scrollTop, setScrollTop] = useState(0)
+  const [closeScrollTop, setCloseScrollTop] = useState(0)
+
+  useEffect(() => {
+    if (!show) {
+      setCloseScrollTop(scrollTop)
+    }
+  }, [show, scrollTop])
+
+  const onRefChange = useCallback(
+    (node: HTMLDivElement) => {
+      if (node !== null) {
+        if (show) {
+          setTimeout(() => {
+            // TODO: without timeout, scrollTo not work, why?
+            node.scrollTo({ top: closeScrollTop, left: 0 })
+          }, 100)
+        }
+      }
+    },
+    [show, closeScrollTop]
+  )

  const onClick = ({ index }: { index: number }) => {
    onPhotoClick(filenames[index].name)
@ -59,9 +91,13 @@ export default function FileManager(props: Props) {
    fetchData()
  }, [])

+  const onScroll = (event: SyntheticEvent) => {
+    setScrollTop(event.currentTarget.scrollTop)
+  }
+
  const photos = useMemo(() => {
    return filenames.map((filename: Filename) => {
-      const width = 256
+      const width = photoWidth
      const height = filename.height * (width / filename.width)
      const src = `/media_thumbnail/${filename.name}?width=${width}&height=${height}`
      return { src, height, width }
@ -71,20 +107,39 @@ export default function FileManager(props: Props) {
  return (
    <Modal
      onClose={onClose}
-      title="Files"
+      title={`Files(${photos.length})`}
      className="file-manager-modal"
      show={show}
    >
-      <div className="file-manager">
+      <ScrollArea.Root className="ScrollAreaRoot">
+        <ScrollArea.Viewport
+          className="ScrollAreaViewport"
+          onScroll={onScroll}
+          ref={onRefChange}
+        >
          <PhotoAlbum
            layout="columns"
            photos={photos}
            renderPhoto={renderPhoto}
-          spacing={6}
-          padding={4}
+            spacing={8}
+            padding={8}
            onClick={onClick}
          />
-      </div>
+        </ScrollArea.Viewport>
+        <ScrollArea.Scrollbar
+          className="ScrollAreaScrollbar"
+          orientation="vertical"
+        >
+          <ScrollArea.Thumb className="ScrollAreaThumb" />
+        </ScrollArea.Scrollbar>
+        <ScrollArea.Scrollbar
+          className="ScrollAreaScrollbar"
+          orientation="horizontal"
+        >
+          <ScrollArea.Thumb className="ScrollAreaThumb" />
+        </ScrollArea.Scrollbar>
+        <ScrollArea.Corner className="ScrollAreaCorner" />
+      </ScrollArea.Root>
    </Modal>
  )
 }
--- a/lama_cleaner/app/src/components/Header/Header.tsx
+++ b/lama_cleaner/app/src/components/Header/Header.tsx
@ -4,6 +4,7 @@ import React, { useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 import {
+  enableFileManagerState,
  fileState,
  isInpaintingState,
  isSDState,
@ -33,14 +34,17 @@ const Header = () => {
  const [openMaskPopover, setOpenMaskPopover] = useState(false)
  const [showFileManager, setShowFileManager] =
    useRecoilState(showFileManagerState)
+  const enableFileManager = useRecoilValue(enableFileManagerState)

  useHotKey(
    'f',
    () => {
+      if (enableFileManager) {
        setShowFileManager(!showFileManager)
+      }
    },
    {},
-    [showFileManager]
+    [showFileManager, enableFileManager]
  )

  const renderHeader = () => {
@ -54,6 +58,7 @@ const Header = () => {
            gap: 8,
          }}
        >
+          {enableFileManager ? (
            <Button
              icon={<FolderIcon />}
              style={{ border: 0 }}
@ -63,6 +68,9 @@ const Header = () => {
                setShowFileManager(true)
              }}
            />
+          ) : (
+            <></>
+          )}

          <label htmlFor={uploadElemId}>
            <Button
--- a/lama_cleaner/app/src/components/Settings/HDSettingBlock.tsx
+++ b/lama_cleaner/app/src/components/Settings/HDSettingBlock.tsx
@ -120,7 +120,7 @@ function HDSettingBlock() {
  return (
    <SettingBlock
      className="hd-setting-block"
-      title="High Resolution Strategy"
+      title="Strategy"
      input={
        <Selector
          width={80}
--- a/lama_cleaner/app/src/components/Settings/SettingBlock.scss
+++ b/lama_cleaner/app/src/components/Settings/SettingBlock.scss
@ -15,6 +15,10 @@
    .sub-setting-block {
      color: var(--text-color);
    }
+
+    svg {
+      color: var(--text-color-gray);
+    }
  }
 }

--- a/lama_cleaner/app/src/components/Settings/Settings.scss
+++ b/lama_cleaner/app/src/components/Settings/Settings.scss
@ -4,11 +4,11 @@
@import './ModelSettingBlock.scss';

 .modal-setting {
-  grid-area: main-content;
  background-color: var(--modal-bg);
  color: var(--modal-text-color);
  box-shadow: 0px 0px 20px rgb(0, 0, 40, 0.2);
-  width: 600px;
+  width: 680px;
+  min-height: 420px;

  @include mobile {
    display: grid;
@ -17,4 +17,93 @@
    margin-top: -11rem;
    animation: slideDown 0.2s ease-out;
  }
+
+  .modal-header {
+    padding-left: 8px;
+  }
+}
+
+/* reset */
+button,
+fieldset,
+input {
+  all: unset;
+}
+
+.TabsRoot {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  width: 100%;
+  background-color: var(--page-bg);
+  flex-grow: 1;
+}
+
+.TabsList {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  justify-content: flex-start;
+  border-right: 1px solid var(--border-color);
+  background-color: var(--page-bg);
+  padding-right: 20px;
+}
+
+.TabsTrigger {
+  font-family: inherit;
+  background-color: white;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-right: 40px;
+  padding-left: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--modal-text-color);
+  user-select: none;
+  background-color: var(--page-bg);
+  border-radius: 8px;
+}
+.TabsTrigger:hover {
+  background-color: var(--tabs-active-color);
+}
+.TabsTrigger[data-state='active'] {
+  background-color: var(--tabs-active-color);
+}
+.TabsTrigger:focus {
+  position: relative;
+}
+
+.TabsContent {
+  background-color: white;
+  outline: none;
+  background-color: var(--page-bg);
+  width: 100%;
+}
+
+.TabsContent[data-state='active'] {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.folder-path-block {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.folder-path {
+  width: 95%;
+  border-width: 0;
+  border-radius: 6px;
+  padding: 0.3rem 0.5rem;
+  outline: 1px solid var(--border-color);
+
+  &:focus-visible {
+    border-width: 0;
+    outline: 1px solid var(--yellow-accent);
+  }
 }
--- a/lama_cleaner/app/src/components/Settings/SettingsModal.tsx
+++ b/lama_cleaner/app/src/components/Settings/SettingsModal.tsx
@ -1,6 +1,8 @@
-import React from 'react'
+import React, { FormEvent } from 'react'

 import { useRecoilState, useRecoilValue } from 'recoil'
+import { FolderOpenIcon } from '@heroicons/react/24/outline'
+import * as Tabs from '@radix-ui/react-tabs'
 import {
  isPaintByExampleState,
  isSDState,
@ -12,10 +14,23 @@ import HDSettingBlock from './HDSettingBlock'
 import ModelSettingBlock from './ModelSettingBlock'
 import DownloadMaskSettingBlock from './DownloadMaskSettingBlock'
 import useHotKey from '../../hooks/useHotkey'
+import SettingBlock from './SettingBlock'
+import { Switch, SwitchThumb } from '../shared/Switch'
+import Button from '../shared/Button'
+import TextInput from '../shared/Input'
+
+declare module 'react' {
+  interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
+    // extends React's HTMLAttributes
+    directory?: string
+    webkitdirectory?: string
+  }
+}

 interface SettingModalProps {
  onClose: () => void
 }
+
 export default function SettingModal(props: SettingModalProps) {
  const { onClose } = props
  const [setting, setSettingState] = useRecoilState(settingState)
@ -47,12 +62,92 @@ export default function SettingModal(props: SettingModalProps) {
      className="modal-setting"
      show={setting.show}
    >
-      {isSD || isPaintByExample ? <></> : <ManualRunInpaintingSettingBlock />}
-
-      {/* <GraduallyInpaintingSettingBlock /> */}
-      <DownloadMaskSettingBlock />
+      <Tabs.Root
+        className="TabsRoot"
+        defaultValue="tab1"
+        orientation="vertical"
+      >
+        <Tabs.List className="TabsList">
+          <Tabs.Trigger className="TabsTrigger" value="tab1">
+            Model
+          </Tabs.Trigger>
+          <Tabs.Trigger className="TabsTrigger" value="tab2">
+            File
+          </Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content className="TabsContent" value="tab1">
+          {isSD || isPaintByExample ? (
+            <></>
+          ) : (
+            <ManualRunInpaintingSettingBlock />
+          )}
          <ModelSettingBlock />
          {isSD ? <></> : <HDSettingBlock />}
+        </Tabs.Content>
+        <Tabs.Content className="TabsContent" value="tab2">
+          <DownloadMaskSettingBlock />
+          <SettingBlock
+            title="File Manager"
+            desc="Toggle File Manager"
+            input={
+              <Switch
+                checked={setting.enableFileManager}
+                onCheckedChange={checked => {
+                  setSettingState(old => {
+                    return { ...old, enableFileManager: checked }
+                  })
+                }}
+              >
+                <SwitchThumb />
+              </Switch>
+            }
+            optionDesc={
+              <div
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 16,
+                }}
+              >
+                <div className="folder-path-block">
+                  <span>Image directory</span>
+                  <TextInput
+                    disabled={!setting.enableFileManager}
+                    value={setting.imageDirectory}
+                    placeholder="Image directory"
+                    className="folder-path"
+                    onInput={(evt: FormEvent<HTMLInputElement>) => {
+                      evt.preventDefault()
+                      evt.stopPropagation()
+                      const target = evt.target as HTMLInputElement
+                      setSettingState(old => {
+                        return { ...old, imageDirectory: target.value }
+                      })
+                    }}
+                  />
+                </div>
+                <div className="folder-path-block">
+                  <span>Output directory</span>
+                  <TextInput
+                    disabled={!setting.enableFileManager}
+                    value={setting.outputDirectory}
+                    placeholder="Output directory"
+                    className="folder-path"
+                    onInput={(evt: FormEvent<HTMLInputElement>) => {
+                      evt.preventDefault()
+                      evt.stopPropagation()
+                      const target = evt.target as HTMLInputElement
+                      setSettingState(old => {
+                        return { ...old, outputDirectory: target.value }
+                      })
+                    }}
+                  />
+                </div>
+              </div>
+            }
+          />
+        </Tabs.Content>
+      </Tabs.Root>
    </Modal>
  )
 }
--- a/lama_cleaner/app/src/components/Shortcuts/Shortcuts.scss
+++ b/lama_cleaner/app/src/components/Shortcuts/Shortcuts.scss
@ -58,6 +58,7 @@
  .shortcut-description {
    justify-self: start;
    text-align: left;
+    font-size: 0.95rem;

    @include mobile {
      text-align: left;
--- a/lama_cleaner/app/src/components/Workspace.tsx
+++ b/lama_cleaner/app/src/components/Workspace.tsx
@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import Editor from './Editor/Editor'
 import ShortcutsModal from './Shortcuts/ShortcutsModal'
@ -99,6 +99,7 @@ const Workspace = () => {
      {isSD ? <SidePanel /> : <></>}
      {isPaintByExample ? <PESidePanel /> : <></>}
      <FileManager
+        photoWidth={256}
        show={showFileManager}
        onClose={() => {
          setShowFileManager(false)
--- a/lama_cleaner/app/src/components/shared/Modal.scss
+++ b/lama_cleaner/app/src/components/shared/Modal.scss
@ -28,9 +28,9 @@
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
-  display: grid;
-  grid-auto-rows: max-content;
-  row-gap: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
  place-self: center;
  padding: 25px;
  border-radius: 0.95rem;
--- a/lama_cleaner/app/src/store/Atoms.tsx
+++ b/lama_cleaner/app/src/store/Atoms.tsx
@ -92,6 +92,18 @@ export const showFileManagerState = selector({
  },
 })

+export const enableFileManagerState = selector({
+  key: 'enableFileManagerState',
+  get: ({ get }) => {
+    const app = get(settingState)
+    return app.enableFileManager
+  },
+  set: ({ get, set }, newValue: any) => {
+    const app = get(settingState)
+    set(settingState, { ...app, enableFileManager: newValue })
+  },
+})
+
 export const fileState = selector({
  key: 'fileState',
  get: ({ get }) => {
@ -245,6 +257,9 @@ export interface Settings {
  show: boolean
  showCroper: boolean
  downloadMask: boolean
+  enableFileManager: boolean
+  imageDirectory: string
+  outputDirectory: string
  graduallyInpainting: boolean
  runInpaintingManually: boolean
  model: AIModel
@ -373,6 +388,9 @@ export enum SDMode {
 export const settingStateDefault: Settings = {
  show: false,
  showCroper: false,
+  enableFileManager: false,
+  imageDirectory: '',
+  outputDirectory: '',
  downloadMask: false,
  graduallyInpainting: true,
  runInpaintingManually: false,
--- a/lama_cleaner/app/src/styles/App.scss
+++ b/lama_cleaner/app/src/styles/App.scss
@ -14,3 +14,7 @@ a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
 }
+
+input:disabled {
+  color: var(--text-color-gray);
+}
--- a/lama_cleaner/app/src/styles/_Colors.scss
+++ b/lama_cleaner/app/src/styles/_Colors.scss
@ -8,7 +8,7 @@
  --yellow-accent: #ffcc00;
  --yellow-accent-light: #ffcc0055;
  --link-color: rgb(0, 0, 0);
-  --border-color: rgb(100, 100, 120);
+  --border-color: rgb(239, 241, 244);
  --border-color-light: rgba(100, 100, 120, 0.5);
  --tooltip-bg: rgb(230, 230, 234);
  --tooltip-text-color: rgb(0, 0, 0);
@ -60,4 +60,7 @@
    0px 2px 1px -1px hsl(205 10.7% 78%), 0 1px hsl(205 10.7% 78%);

  --croper-bg: rgba(0, 0, 0, 0.5);
+
+  // Tabs
+  --tabs-active-color: rgb(240 243 249);
 }
--- a/lama_cleaner/app/src/styles/_ColorsDark.scss
+++ b/lama_cleaner/app/src/styles/_ColorsDark.scss
@ -8,7 +8,7 @@
  --yellow-accent: #ffcc00;
  --yellow-accent-light: #ffcc0055;
  --link-color: var(--yellow-accent);
-  --border-color: rgb(100, 100, 120);
+  --border-color: rgb(30, 30, 30);
  --border-color-light: rgba(102, 102, 102);
  --tooltip-bg: rgb(33, 33, 33);
  --tooltip-text-color: rgb(210, 210, 210);
@ -29,7 +29,7 @@

  // Text
  --text-color: white;
-  --text-color-gray: rgb(138, 143, 152);
+  --text-color-gray: rgb(195, 196, 198);

  // Shared
  --btn-text-color: var(--text-color);
@ -58,4 +58,7 @@
    0px 2px 1px -1px hsl(207 5.6% 31.6%), 0 1px hsl(207 5.6% 31.6%);

  --croper-bg: rgba(0, 0, 0, 0.5);
+
+  // Tabs
+  --tabs-active-color: rgb(39 40 49);
 }
--- a/lama_cleaner/app/yarn.lock
+++ b/lama_cleaner/app/yarn.lock
@ -2407,6 +2407,11 @@
    schema-utils "^3.0.0"
    source-map "^0.7.3"

+"@radix-ui/colors@^0.1.8":
+  version "0.1.8"
+  resolved "https://registry.npmmirror.com/@radix-ui/colors/-/colors-0.1.8.tgz#b08c62536fc462a87632165fb28e9b18f9bd047e"
+  integrity sha512-jwRMXYwC0hUo0mv6wGpuw254Pd9p/R6Td5xsRpOmaWkUHlooNWqVcadgyzlRumMq3xfOTXwJReU0Jv+EIy4Jbw==
+
 "@radix-ui/number@0.1.0":
  version "0.1.0"
  resolved "https://registry.npmmirror.com/@radix-ui/number/-/number-0.1.0.tgz#73ad13d5cc5f75fa5e147d72e5d5d5e50d688256"
@ -2414,6 +2419,13 @@
  dependencies:
    "@babel/runtime" "^7.13.10"

+"@radix-ui/number@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/@radix-ui/number/-/number-1.0.0.tgz#4c536161d0de750b3f5d55860fc3de46264f897b"
+  integrity sha512-Ofwh/1HX69ZfJRiRBMTy7rgjAzHmwe4kW9C9Y99HTRUcYLUuVT0KESFj15rPjRgKJs20GPq8Bm5aEDJ8DuA3vA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/popper@0.1.0":
  version "0.1.0"
  resolved "https://registry.npmmirror.com/@radix-ui/popper/-/popper-0.1.0.tgz#c387a38f31b7799e1ea0d2bb1ca0c91c2931b063"
@ -2463,6 +2475,17 @@
    "@radix-ui/react-primitive" "0.1.5-rc.18"
    "@radix-ui/react-slot" "0.1.3-rc.18"

+"@radix-ui/react-collection@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/@radix-ui/react-collection/-/react-collection-1.0.1.tgz#259506f97c6703b36291826768d3c1337edd1de5"
+  integrity sha512-uuiFbs+YCKjn3X1DTSx9G7BHApu4GHbi3kgiwsnFUbOKCrwejAJv4eE4Vc8C0Oaxt9T0aV4ox0WCOdx+39Xo+g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-slot" "1.0.1"
+
 "@radix-ui/react-compose-refs@0.1.0":
  version "0.1.0"
  resolved "https://registry.npmmirror.com/@radix-ui/react-compose-refs/-/react-compose-refs-0.1.0.tgz#cff6e780a0f73778b976acff2c2a5b6551caab95"
@ -2533,6 +2556,13 @@
  dependencies:
    "@babel/runtime" "^7.13.10"

+"@radix-ui/react-direction@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/@radix-ui/react-direction/-/react-direction-1.0.0.tgz#a2e0b552352459ecf96342c79949dd833c1e6e45"
+  integrity sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-dismissable-layer@0.1.5":
  version "0.1.5"
  resolved "https://registry.npmmirror.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-0.1.5.tgz#9379032351e79028d472733a5cc8ba4a0ea43314"
@ -2786,6 +2816,46 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-slot" "1.0.0"

+"@radix-ui/react-primitive@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/@radix-ui/react-primitive/-/react-primitive-1.0.1.tgz#c1ebcce283dd2f02e4fbefdaa49d1cb13dbc990a"
+  integrity sha512-fHbmislWVkZaIdeF6GZxF0A/NH/3BjrGIYj+Ae6eTmTCr7EB0RQAAVEiqsXK6p3/JcRqVSBQoceZroj30Jj3XA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-slot" "1.0.1"
+
+"@radix-ui/react-roving-focus@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.1.tgz#475621f63aee43faa183a5270f35d49e530de3d7"
+  integrity sha512-TB76u5TIxKpqMpUAuYH2VqMhHYKa+4Vs1NHygo/llLvlffN6mLVsFhz0AnSFlSBAvTBYVHYAkHAyEt7x1gPJOA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-collection" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-direction" "1.0.0"
+    "@radix-ui/react-id" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
+
+"@radix-ui/react-scroll-area@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.2.tgz#26c906d351b56835c0301126b24574c9e9c7b93b"
+  integrity sha512-k8VseTxI26kcKJaX0HPwkvlNBPTs56JRdYzcZ/vzrNUkDlvXBy8sMc7WvCpYzZkHgb+hd72VW9MqkqecGtuNgg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/number" "1.0.0"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-direction" "1.0.0"
+    "@radix-ui/react-presence" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+
 "@radix-ui/react-select@0.1.2-rc.27":
  version "0.1.2-rc.27"
  resolved "https://registry.npmmirror.com/@radix-ui/react-select/-/react-select-0.1.2-rc.27.tgz#91948d482b3db8cf83172838dfae0f4bedec9566"
@ -2836,6 +2906,14 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-compose-refs" "1.0.0"

+"@radix-ui/react-slot@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/@radix-ui/react-slot/-/react-slot-1.0.1.tgz#e7868c669c974d649070e9ecbec0b367ee0b4d81"
+  integrity sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+
 "@radix-ui/react-switch@^0.1.5":
  version "0.1.5"
  resolved "https://registry.npmmirror.com/@radix-ui/react-switch/-/react-switch-0.1.5.tgz#071ffa19a17a47fdc5c5e6f371bd5901c9fef2f4"
@ -2851,6 +2929,21 @@
    "@radix-ui/react-use-previous" "0.1.1"
    "@radix-ui/react-use-size" "0.1.1"

+"@radix-ui/react-tabs@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/@radix-ui/react-tabs/-/react-tabs-1.0.1.tgz#8fcfd6f70fe3026ff8a839b120f4e87f8d985e05"
+  integrity sha512-mVNEwHwgjy2G9F7b39f9VY+jF0QUZykTm0Sdv+Uz6KC4KOEIa4HLDiHU8MeEZluRtZE3aqGYDhl93O7QbJDwhg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-direction" "1.0.0"
+    "@radix-ui/react-id" "1.0.0"
+    "@radix-ui/react-presence" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-roving-focus" "1.0.1"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
+
 "@radix-ui/react-toast@^0.1.1":
  version "0.1.1"
  resolved "https://registry.npmmirror.com/@radix-ui/react-toast/-/react-toast-0.1.1.tgz#d544e796b307e56f1298e40f356f468680958e93"