add formalizations

package.json

@@ -24,9 +24,12 @@
           }
         }
       ],
-      "jsx-a11y/no-autofocus": [ 2, {
-        "ignoreNonDOM": true
-    }]
+      "jsx-a11y/no-autofocus": [
+        2,
+        {
+          "ignoreNonDOM": true
+        }
+      ]
     }
   },
   "engines": {

web/package.json

@@ -22,11 +22,13 @@
     "axios": "^1.6.7",
     "formik": "^2.4.5",
     "framer-motion": "^9",
+    "pretty-bytes": "^6.1.1",
     "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",
     "react-query": "^3.39.3",
+    "react-use": "^17.5.0",
     "ts-pattern": "^5.0.8",
     "yup": "0.29.3"
   },

web/src/pages/Patterns/add-pattern/add-pattern-button.tsx

@@ -21,6 +21,7 @@ import {
   Textarea,
   Center,
   Icon,
+  Stack,
 } from '@chakra-ui/react'
 import { useFormik } from 'formik'
 import { FaPaperclip } from 'react-icons/fa'
@@ -30,6 +31,7 @@ import { CreatePatternMutation, GetPatternsQuery } from '../query-builder'
 
 import { CreatePatternSchema, createPatternSchema } from './schema'
 import { useAddFormalizations } from './use-add-formalizations'
+import { FormalizationsList } from './formalizations-list'
 
 const FORM_ID = 'add-pattern-form'
 
@@ -37,9 +39,9 @@ export const AddPatternButton: React.FC<ButtonProps> = () => {
   const { isOpen, onClose, onOpen } = useDisclosure()
   const queryClient = useQueryClient()
 
-  const { formalizations, dropzoneState } = useAddFormalizations({})
+  const { formalizations, dropzoneState, handleRemoveFormalization } =
+    useAddFormalizations({})
 
-  console.log({ formalizations })
   const createMutation = CreatePatternMutation.useMutation({
     onSuccess: () => {
       queryClient.invalidateQueries(GetPatternsQuery.getKey({}))
@@ -128,27 +130,33 @@ export const AddPatternButton: React.FC<ButtonProps> = () => {
                   />
                   <FormErrorMessage>{errors.description}</FormErrorMessage>
                 </FormControl>
-                <div {...dropzoneState.getRootProps()}>
-                  <Center w="100%">
-                    <input
-                      aria-label="file-upload"
-                      {...dropzoneState.getInputProps()}
-                    />
-                    <Button
-                      aria-label="add formalization"
-                      variant="unstyled"
-                      justifyContent="flex-start"
-                      iconSpacing="2"
-                      display="flex"
-                      color="gray.500"
-                      fontWeight="500"
-                      fontSize="md"
-                      leftIcon={<Icon as={FaPaperclip} />}
-                    >
-                      Agregar formalizacion
-                    </Button>
-                  </Center>
-                </div>
+                <Stack w="full">
+                  <FormalizationsList
+                    formalizations={formalizations}
+                    onRemoveFormalization={handleRemoveFormalization}
+                  />
+                  <div {...dropzoneState.getRootProps()}>
+                    <Center w="100%">
+                      <input
+                        aria-label="file-upload"
+                        {...dropzoneState.getInputProps()}
+                      />
+                      <Button
+                        aria-label="add formalization"
+                        variant="unstyled"
+                        justifyContent="flex-start"
+                        iconSpacing="2"
+                        display="flex"
+                        color="gray.500"
+                        fontWeight="500"
+                        fontSize="md"
+                        leftIcon={<Icon as={FaPaperclip} />}
+                      >
+                        Agregar formalizacion
+                      </Button>
+                    </Center>
+                  </div>
+                </Stack>
               </VStack>
             </ModalBody>
           </form>

web/src/pages/Patterns/add-pattern/formalizations-list.tsx

+import * as React from 'react'
+import {
+  Box,
+  Center,
+  HStack,
+  Icon,
+  IconButton,
+  List,
+  ListItem,
+  Text,
+  VStack,
+} from '@chakra-ui/react'
+import prettyBytes from 'pretty-bytes'
+import { FaTrash } from 'react-icons/fa'
+
+export type FormalizationsListProps = {
+  formalizations: File[]
+  onRemoveFormalization: (index: number) => void
+}
+
+export const FormalizationsList: React.FC<FormalizationsListProps> = ({
+  formalizations,
+  onRemoveFormalization,
+}) => {
+  return (
+    <List w="full" spacing="2">
+      {formalizations.map((file, index) => {
+        const fileExtension = file.name.split('.')[1] ?? ''
+        return (
+          <ListItem
+            id={`formalization-${index}`}
+            key={`formalization-${index}`}
+            display="flex"
+            border="1px"
+            borderColor="gray.200"
+            borderRadius="sm"
+            bg="white"
+            width="full"
+            height="min-content"
+            mt="0"
+            minW="0"
+            flex="1"
+            alignItems="flex-start"
+            fontSize="xs"
+            h="52px"
+          >
+            <HStack spacing="0" w="full">
+              <Center bg="blue.600" borderLeftRadius="base" px="4" h="52px">
+                <Text
+                  fontWeight="medium"
+                  variant="-1"
+                  color="white"
+                  textTransform="uppercase"
+                >
+                  {fileExtension}
+                </Text>
+              </Center>
+              <HStack
+                h="full"
+                borderColor="gray.200"
+                borderWidth="px"
+                borderStyle="solid"
+                borderRadius="base"
+                borderLeft="none"
+                borderLeftRadius="none"
+                ml="0"
+                w="full"
+                minWidth="0"
+                flex="1"
+              >
+                <VStack
+                  justifyContent={file.size ? 'center' : 'flex-start'}
+                  spacing="1"
+                  pl="3"
+                  minW="0"
+                  flex="1"
+                >
+                  <Text
+                    variant="-1"
+                    isTruncated={true}
+                    w="full"
+                    textAlign="center"
+                  >
+                    {file.name}
+                  </Text>
+
+                  <Text variant="-2" color="gray.500">
+                    {prettyBytes(file.size ?? 0)}
+                  </Text>
+                </VStack>
+                <IconButton
+                  aria-label="remove formalization"
+                  variant="unstyled"
+                  color="blue.400"
+                  onClick={() => onRemoveFormalization(index)}
+                  icon={<Icon as={FaTrash} />}
+                />
+              </HStack>
+            </HStack>
+          </ListItem>
+        )
+      })}
+    </List>
+  )
+}

web/src/pages/Patterns/add-pattern/use-add-formalizations.ts

@@ -8,6 +8,7 @@ export const SIZE_TOO_LARGE = 'size-too-large'
 export const useAddFormalizations = ({}): {
   dropzoneState: DropzoneState
   formalizations: File[]
+  handleRemoveFormalization: (index: number) => void
 } => {
   const [files, setFiles] = React.useState<File[]>([])
 
@@ -29,5 +30,11 @@ export const useAddFormalizations = ({}): {
     },
   })
 
-  return { dropzoneState, formalizations: files }
+  const handleRemoveFormalization = (index: number) => {
+    const filesCopy = [...files]
+    filesCopy.splice(index, 1)
+    setFiles(filesCopy)
+  }
+
+  return { dropzoneState, formalizations: files, handleRemoveFormalization }
 }

yarn.lock

@@ -1683,7 +1683,7 @@ __metadata:
   languageName: node
   linkType: hard
-"@babel/runtime@npm:^7.10.5, @babel/runtime@npm:^7.23.8, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.2":
+"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.5, @babel/runtime@npm:^7.23.8, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.2":
   version: 7.24.0
   resolution: "@babel/runtime@npm:7.24.0"
   dependencies:
@@ -8267,6 +8267,13 @@ __metadata:
   languageName: node
   linkType: hard
+"@types/js-cookie@npm:^2.2.6":
+  version: 2.2.7
+  resolution: "@types/js-cookie@npm:2.2.7"
+  checksum: 29196c6829982b5efa79117122a7d62cf4bc2f6397ce8eac1539319ff5dce3b44b2d86f2ac064f2ed3488fb24439358f24af6914fde5c5c4bab9a85728a13a6f
+  languageName: node
+  linkType: hard
+
 "@types/js-levenshtein@npm:^1.1.1":
   version: 1.1.3
   resolution: "@types/js-levenshtein@npm:1.1.3"
@@ -9320,6 +9327,13 @@ __metadata:
   languageName: node
   linkType: hard
+"@xobotyi/scrollbar-width@npm:^1.9.5":
+  version: 1.9.5
+  resolution: "@xobotyi/scrollbar-width@npm:1.9.5"
+  checksum: 4ebc79e4f798e2a5e89a5122f8fc4a086f08a92a44ac020599c4fe20d105b7d76ba06c094260b5f386a75e7ce6f6c518d9fc295228b651296b99c4477f986ac4
+  languageName: node
+  linkType: hard
+
 "@xtuc/ieee754@npm:^1.2.0":
   version: 1.2.0
   resolution: "@xtuc/ieee754@npm:1.2.0"
@@ -11928,7 +11942,7 @@ __metadata:
   languageName: node
   linkType: hard
-"copy-to-clipboard@npm:3.3.3":
+"copy-to-clipboard@npm:3.3.3, copy-to-clipboard@npm:^3.3.1":
   version: 3.3.3
   resolution: "copy-to-clipboard@npm:3.3.3"
   dependencies:
@@ -12180,6 +12194,15 @@ __metadata:
   languageName: node
   linkType: hard
+"css-in-js-utils@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "css-in-js-utils@npm:3.1.0"
+  dependencies:
+    hyphenate-style-name: ^1.0.3
+  checksum: 8bb042e8f7701a7edadc3cce5ce2d5cf41189631d7e2aed194d5a7059b25776dded2a0466cb9da1d1f3fc6c99dcecb51e45671148d073b8a2a71e34755152e52
+  languageName: node
+  linkType: hard
+
 "css-loader@npm:6.8.1, css-loader@npm:^6.7.1":
   version: 6.8.1
   resolution: "css-loader@npm:6.8.1"
@@ -12253,6 +12276,16 @@ __metadata:
   languageName: node
   linkType: hard
+"css-tree@npm:^1.1.2":
+  version: 1.1.3
+  resolution: "css-tree@npm:1.1.3"
+  dependencies:
+    mdn-data: 2.0.14
+    source-map: ^0.6.1
+  checksum: 499a507bfa39b8b2128f49736882c0dd636b0cd3370f2c69f4558ec86d269113286b7df469afc955de6a68b0dba00bc533e40022a73698081d600072d5d83c1c
+  languageName: node
+  linkType: hard
+
 "css-tree@npm:^2.2.1":
   version: 2.3.1
   resolution: "css-tree@npm:2.3.1"
@@ -14304,6 +14337,13 @@ __metadata:
   languageName: node
   linkType: hard
+"fast-loops@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "fast-loops@npm:1.1.3"
+  checksum: ba71c001704c44a617053ed34b1a8c0d2ed9723022eb7b93c98299d9862f93213609b32c9daec7d606625ab318769d11da8bb06e9ddd9c28e3bda1249fb6e36d
+  languageName: node
+  linkType: hard
+
 "fast-querystring@npm:^1.0.0, fast-querystring@npm:^1.1.1, fast-querystring@npm:^1.1.2":
   version: 1.1.2
   resolution: "fast-querystring@npm:1.1.2"
@@ -14320,6 +14360,13 @@ __metadata:
   languageName: node
   linkType: hard
+"fast-shallow-equal@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "fast-shallow-equal@npm:1.0.0"
+  checksum: 526c393c011ab5a0ca5a36c5ea25c9730acd027503ccbec6c7825397ab9375f51f67f14c8829b4c4b1ccccede695391dd14863a15e40a37fc4af08c1440a1b66
+  languageName: node
+  linkType: hard
+
 "fast-uri@npm:^2.0.0, fast-uri@npm:^2.1.0, fast-uri@npm:^2.2.0":
   version: 2.3.0
   resolution: "fast-uri@npm:2.3.0"
@@ -14343,6 +14390,13 @@ __metadata:
   languageName: node
   linkType: hard
+"fastest-stable-stringify@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "fastest-stable-stringify@npm:2.0.2"
+  checksum: abbe5ff48f13f5819e7312dbb38bae5d9960694cffd315b464df9adcd02a8fa7e9eec32c314655674c7134905c544b7a0c14b05bfbe30b3f678609bebc9fecb9
+  languageName: node
+  linkType: hard
+
 "fastify-plugin@npm:^4.0.0, fastify-plugin@npm:^4.5.0":
   version: 4.5.1
   resolution: "fastify-plugin@npm:4.5.1"
@@ -15978,6 +16032,13 @@ __metadata:
   languageName: node
   linkType: hard
+"hyphenate-style-name@npm:^1.0.3":
+  version: 1.0.4
+  resolution: "hyphenate-style-name@npm:1.0.4"
+  checksum: b19c3e2cd1dc426f6f893752fec08140abf79058a1b6238422e45373ed81389f02e1a2ba2ef4e9b2430d4e900a0f5ba12307de82320604e81ac1b722abd2ee62
+  languageName: node
+  linkType: hard
+
 "iconv-lite@npm:0.4.24, iconv-lite@npm:^0.4.24":
   version: 0.4.24
   resolution: "iconv-lite@npm:0.4.24"
@@ -16121,6 +16182,16 @@ __metadata:
   languageName: node
   linkType: hard
+"inline-style-prefixer@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "inline-style-prefixer@npm:7.0.0"
+  dependencies:
+    css-in-js-utils: ^3.1.0
+    fast-loops: ^1.1.3
+  checksum: d19eb485961854c5e00152b351a0d161b1a8d80d415bab2ba79ad10059d03843bc1e71415d265f1ec10857f5dd4a75c2491fced08eb0c5883cf42c8a9dccb473
+  languageName: node
+  linkType: hard
+
 "inquirer@npm:^8.0.0, inquirer@npm:^8.2.0":
   version: 8.2.6
   resolution: "inquirer@npm:8.2.6"
@@ -17407,6 +17478,13 @@ __metadata:
   languageName: node
   linkType: hard
+"js-cookie@npm:^2.2.1":
+  version: 2.2.1
+  resolution: "js-cookie@npm:2.2.1"
+  checksum: ee67fc0f8495d0800b851910b5eb5bf49d3033adff6493d55b5c097ca6da46f7fe666b10e2ecb13cfcaf5b88d71c205ce00a7e646de791689bfd053bbb36a376
+  languageName: node
+  linkType: hard
+
 "js-levenshtein@npm:^1.1.6":
   version: 1.1.6
   resolution: "js-levenshtein@npm:1.1.6"
@@ -18446,6 +18524,13 @@ __metadata:
   languageName: node
   linkType: hard
+"mdn-data@npm:2.0.14":
+  version: 2.0.14
+  resolution: "mdn-data@npm:2.0.14"
+  checksum: 67241f8708c1e665a061d2b042d2d243366e93e5bf1f917693007f6d55111588b952dcbfd3ea9c2d0969fb754aad81b30fdcfdcc24546495fc3b24336b28d4bd
+  languageName: node
+  linkType: hard
+
 "mdn-data@npm:2.0.28":
   version: 2.0.28
   resolution: "mdn-data@npm:2.0.28"
@@ -19022,6 +19107,25 @@ __metadata:
   languageName: node
   linkType: hard
+"nano-css@npm:^5.6.1":
+  version: 5.6.1
+  resolution: "nano-css@npm:5.6.1"
+  dependencies:
+    "@jridgewell/sourcemap-codec": ^1.4.15
+    css-tree: ^1.1.2
+    csstype: ^3.1.2
+    fastest-stable-stringify: ^2.0.2
+    inline-style-prefixer: ^7.0.0
+    rtl-css-js: ^1.16.1
+    stacktrace-js: ^2.0.2
+    stylis: ^4.3.0
+  peerDependencies:
+    react: "*"
+    react-dom: "*"
+  checksum: 7328c973852d2471bd154c61d21392a3d6357f276a7a090b8a179fb06d71ba58c987b04c0bd80efebd87aa4f433428a25e37820e65484b3c4c44b84339b99d87
+  languageName: node
+  linkType: hard
+
 "nano-time@npm:1.0.0":
   version: 1.0.0
   resolution: "nano-time@npm:1.0.0"
@@ -20579,6 +20683,13 @@ __metadata:
   languageName: node
   linkType: hard
+"pretty-bytes@npm:^6.1.1":
+  version: 6.1.1
+  resolution: "pretty-bytes@npm:6.1.1"
+  checksum: c7a660b933355f3b4587ad3f001c266a8dd6afd17db9f89ebc50812354bb142df4b9600396ba5999bdb1f9717300387dc311df91895c5f0f2a1780e22495b5f8
+  languageName: node
+  linkType: hard
+
 "pretty-error@npm:^4.0.0":
   version: 4.0.0
   resolution: "pretty-error@npm:4.0.0"
@@ -21298,6 +21409,41 @@ __metadata:
   languageName: node
   linkType: hard
+"react-universal-interface@npm:^0.6.2":
+  version: 0.6.2
+  resolution: "react-universal-interface@npm:0.6.2"
+  peerDependencies:
+    react: "*"
+    tslib: "*"
+  checksum: 97c32ecb7a425c3bcaa92dcf84c46146b49610d928efde9e9ee5518c475a0db942f01634dd490e4f42fcd95cc2f49657c1b96dcef96423c06f077147fe1968ab
+  languageName: node
+  linkType: hard
+
+"react-use@npm:^17.5.0":
+  version: 17.5.0
+  resolution: "react-use@npm:17.5.0"
+  dependencies:
+    "@types/js-cookie": ^2.2.6
+    "@xobotyi/scrollbar-width": ^1.9.5
+    copy-to-clipboard: ^3.3.1
+    fast-deep-equal: ^3.1.3
+    fast-shallow-equal: ^1.0.0
+    js-cookie: ^2.2.1
+    nano-css: ^5.6.1
+    react-universal-interface: ^0.6.2
+    resize-observer-polyfill: ^1.5.1
+    screenfull: ^5.1.0
+    set-harmonic-interval: ^1.0.1
+    throttle-debounce: ^3.0.1
+    ts-easing: ^0.2.0
+    tslib: ^2.1.0
+  peerDependencies:
+    react: "*"
+    react-dom: "*"
+  checksum: b2e606338f329f8f26bccbd1ae428cf63e1d9b4a940cb327823270955a2aae35972be745d333d1a1bd0276a3650038d1f7f6ae1077af5cccba8234a3e7376754
+  languageName: node
+  linkType: hard
+
 "react@npm:18.2.0":
   version: 18.2.0
   resolution: "react@npm:18.2.0"
@@ -21700,6 +21846,13 @@ __metadata:
   languageName: node
   linkType: hard
+"resize-observer-polyfill@npm:^1.5.1":
+  version: 1.5.1
+  resolution: "resize-observer-polyfill@npm:1.5.1"
+  checksum: 5e882475067f0b97dc07e0f37c3e335ac5bc3520d463f777cec7e894bb273eddbfecb857ae668e6fb6881fd6f6bb7148246967172139302da50fa12ea3a15d95
+  languageName: node
+  linkType: hard
+
 "resolve-cwd@npm:^3.0.0":
   version: 3.0.0
   resolution: "resolve-cwd@npm:3.0.0"
@@ -21958,6 +22111,15 @@ __metadata:
   languageName: unknown
   linkType: soft
+"rtl-css-js@npm:^1.16.1":
+  version: 1.16.1
+  resolution: "rtl-css-js@npm:1.16.1"
+  dependencies:
+    "@babel/runtime": ^7.1.2
+  checksum: 4b81ef50e50c97455d61c9bb576e2892651c79bac5d0c52b4123ebb9d6a2c5144590a79c9db0a3212a81b4eb83bf317e03637220f20b387a37b96cbac324d3d2
+  languageName: node
+  linkType: hard
+
 "run-async@npm:^2.4.0":
   version: 2.4.1
   resolution: "run-async@npm:2.4.1"
@@ -22124,6 +22286,13 @@ __metadata:
   languageName: node
   linkType: hard
+"screenfull@npm:^5.1.0":
+  version: 5.2.0
+  resolution: "screenfull@npm:5.2.0"
+  checksum: 86fd49983e2edc153ee2e674a570c711cb0961a9cacca659309f79636ccc8ca8a0b830ea4dacdae7403a8bb7ba6affd5bcdce053aa97782961247a49bfd2ba68
+  languageName: node
+  linkType: hard
+
 "scuid@npm:^1.1.0":
   version: 1.1.0
   resolution: "scuid@npm:1.1.0"
@@ -22298,6 +22467,13 @@ __metadata:
   languageName: node
   linkType: hard
+"set-harmonic-interval@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "set-harmonic-interval@npm:1.0.1"
+  checksum: 49014d928a62c8418507bf66ffef7066783e8fb19f76e955318bbae5a8c4b56e1a7176b370f9040ef9de51531aa522a3f96fa5c47b1534635aa577ff7c12f9c6
+  languageName: node
+  linkType: hard
+
 "set-value@npm:^2.0.0, set-value@npm:^2.0.1":
   version: 2.0.1
   resolution: "set-value@npm:2.0.1"
@@ -22656,6 +22832,13 @@ __metadata:
   languageName: node
   linkType: hard
+"source-map@npm:0.5.6":
+  version: 0.5.6
+  resolution: "source-map@npm:0.5.6"
+  checksum: beb2c5974bb58954d75e86249953d47ae16f7df1a8531abb9fcae0cd262d9fa09c2db3a134e20e99358b1adba42b6b054a32c8e16b571b3efcf6af644c329f0d
+  languageName: node
+  linkType: hard
+
 "source-map@npm:0.6.1, source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.0, source-map@npm:~0.6.1":
   version: 0.6.1
   resolution: "source-map@npm:0.6.1"
@@ -22802,6 +22985,15 @@ __metadata:
   languageName: node
   linkType: hard
+"stack-generator@npm:^2.0.5":
+  version: 2.0.10
+  resolution: "stack-generator@npm:2.0.10"
+  dependencies:
+    stackframe: ^1.3.4
+  checksum: c3f6f6c580488e65c0fee806a57f6ae4b79e6435f144be471c1f20328a8d9d8492d4f3beed31840f6dae03e2633325e2764fd3aca5c3126a0639e7c9ddfa45ce
+  languageName: node
+  linkType: hard
+
 "stack-utils@npm:^2.0.3":
   version: 2.0.6
   resolution: "stack-utils@npm:2.0.6"
@@ -22818,6 +23010,27 @@ __metadata:
   languageName: node
   linkType: hard
+"stacktrace-gps@npm:^3.0.4":
+  version: 3.1.2
+  resolution: "stacktrace-gps@npm:3.1.2"
+  dependencies:
+    source-map: 0.5.6
+    stackframe: ^1.3.4
+  checksum: 0dcc1aa46e364a2b4d1eabce4777fecf337576a11ee3cfc92f07b9ec79ccb76810752431eeb9771289d250d0bb58dbe19a178b96bf7b2e9f773334d03aa96bb9
+  languageName: node
+  linkType: hard
+
+"stacktrace-js@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "stacktrace-js@npm:2.0.2"
+  dependencies:
+    error-stack-parser: ^2.0.6
+    stack-generator: ^2.0.5
+    stacktrace-gps: ^3.0.4
+  checksum: 9a10c222524ca03690bcb27437b39039885223e39320367f2be36e6f750c2d198ae99189869a22c255bf60072631eb609d47e8e33661e95133686904e01121ec
+  languageName: node
+  linkType: hard
+
 "stacktracey@npm:2.1.8":
   version: 2.1.8
   resolution: "stacktracey@npm:2.1.8"
@@ -23169,6 +23382,13 @@ __metadata:
   languageName: node
   linkType: hard
+"stylis@npm:^4.3.0":
+  version: 4.3.1
+  resolution: "stylis@npm:4.3.1"
+  checksum: 33e8ebd2bfa5f0bd0215f718dc2d3be896e1d00c5bcaeb9a4ae03cf239db6867af9eee230f57229bf1c29499357073ba3e6b547484ba1db2f5de1e8be7d4eee9
+  languageName: node
+  linkType: hard
+
 "supports-color@npm:^5.3.0, supports-color@npm:^5.5.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"
@@ -23487,6 +23707,13 @@ __metadata:
   languageName: node
   linkType: hard
+"throttle-debounce@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "throttle-debounce@npm:3.0.1"
+  checksum: c8e558479463b7ed8bac30d6b10cc87abd1c9fc64edfce2db4109be1a04acaef5d2d0557f49c1a3845ea07d9f79e6e0389b1b60db0a77c44e5b7a1216596f285
+  languageName: node
+  linkType: hard
+
 "through2@npm:^2.0.0, through2@npm:^2.0.1, through2@npm:^2.0.3":
   version: 2.0.5
   resolution: "through2@npm:2.0.5"
@@ -23724,6 +23951,13 @@ __metadata:
   languageName: node
   linkType: hard
+"ts-easing@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "ts-easing@npm:0.2.0"
+  checksum: 84ec20192310c697ff890ca2e0625e131a32596a7c5956326c9632faca9037abf2dd3de4d81ac358ae9f26a6a2cfe2300f13756b26995f753d882e3d0463e327
+  languageName: node
+  linkType: hard
+
 "ts-invariant@npm:^0.10.3":
   version: 0.10.3
   resolution: "ts-invariant@npm:0.10.3"
@@ -24769,11 +25003,13 @@ __metadata:
     axios: ^1.6.7
     formik: ^2.4.5
     framer-motion: ^9
+    pretty-bytes: ^6.1.1
     prop-types: 15.8.1
     react: 18.2.0
     react-dom: 18.2.0
     react-dropzone: ^14.2.3
     react-query: ^3.39.3
+    react-use: ^17.5.0
     ts-pattern: ^5.0.8
     yup: 0.29.3
   languageName: unknown