update file manager

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",

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);
+}

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">
-        <PhotoAlbum
+        <ScrollArea.Viewport
-          layout="columns"
+          className="ScrollAreaViewport"
-          photos={photos}
+          onScroll={onScroll}
-          renderPhoto={renderPhoto}
+          ref={onRefChange}
-          spacing={6}
+        >
-          padding={4}
+          <PhotoAlbum
-          onClick={onClick}
+            layout="columns"
-        />
+            photos={photos}
-      </div>
+            renderPhoto={renderPhoto}
+            spacing={8}
+            padding={8}
+            onClick={onClick}
+          />
+        </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>
   )
 }

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',
     () => {
-      setShowFileManager(!showFileManager)
+      if (enableFileManager) {
+        setShowFileManager(!showFileManager)
+      }
     },
     {},
-    [showFileManager]
+    [showFileManager, enableFileManager]
   )
 
   const renderHeader = () => {
@@ -54,15 +58,19 @@ const Header = () => {
             gap: 8,
           }}
         >
-          <Button
+          {enableFileManager ? (
-            icon={<FolderIcon />}
+            <Button
-            style={{ border: 0 }}
+              icon={<FolderIcon />}
-            toolTip="Open File Manager"
+              style={{ border: 0 }}
-            tooltipPosition="bottom"
+              toolTip="Open File Manager"
-            onClick={() => {
+              tooltipPosition="bottom"
-              setShowFileManager(true)
+              onClick={() => {
-            }}
+                setShowFileManager(true)
-          />
+              }}
+            />
+          ) : (
+            <></>
+          )}
 
           <label htmlFor={uploadElemId}>
             <Button

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}

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);
+    }
   }
 }
 

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);
+  }
 }

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 />}
+      <Tabs.Root
-
+        className="TabsRoot"
-      {/* <GraduallyInpaintingSettingBlock /> */}
+        defaultValue="tab1"
-      <DownloadMaskSettingBlock />
+        orientation="vertical"
-      <ModelSettingBlock />
+      >
-      {isSD ? <></> : <HDSettingBlock />}
+        <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>
   )
 }

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;

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)

lama_cleaner/app/src/components/shared/Modal.scss

@@ -28,9 +28,9 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  display: grid;
+  display: flex;
-  grid-auto-rows: max-content;
+  flex-direction: column;
-  row-gap: 1rem;
+  gap: 16px;
   place-self: center;
   padding: 25px;
   border-radius: 0.95rem;

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,

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);
+}

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);
 }

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);
 }

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"