@chem-po/react-web 0.0.8 → 0.0.10

package/package.json

@@ -1,23 +1,13 @@
 {
   "name": "@chem-po/react-web",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "type": "module",
-  "source": "./src/index.ts",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.js"
-    },
-    "./package.json": "./package.json"
-  },
-  "sideEffects": false,
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "publishConfig": {
     "access": "public"
   },
+  "sideEffects": false,
   "files": [
     "dist",
     "src"
@@ -26,10 +16,6 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@chem-po/react": "0.0.8",
-    "@chem-po/core": "0.0.8"
-  },
-  "peerDependencies": {
     "@chakra-ui/anatomy": "^2.2.2",
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.10.3",
@@ -42,42 +28,34 @@
     "howler": "^2.2.4",
     "lottie-react": "^2.4.0",
     "nested-property": "^4.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
     "react-currency-input-field": "^3.8.0",
     "react-day-picker": "^9.0.9",
     "react-error-boundary": "^4.0.13",
     "react-hook-form": "^7.55.0",
-    "react-router": "^6.26.2",
-    "react-router-dom": "^6.26.2",
+    "react-router": "^7.6.1",
+    "react-router-dom": "^7.6.1",
     "react-textarea-autosize": "^8.5.3",
     "react-transition-group": "^4.4.5",
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
-    "@hello-pangea/dnd": "^17.0.0",
-    "zustand": "^4.3.3"
+    "@hello-pangea/dnd": "^18.0.1",
+    "zustand": "^4.3.3",
+    "@chem-po/core": "0.0.10",
+    "@chem-po/react": "0.0.10"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@types/howler": "^2.2.11",
-    "@types/react": "^18.3.1",
+    "@types/react": "~19.0.10",
     "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-transition-group": "^4.4.11",
     "@types/react-window": "^1.8.8",
     "@types/react-window-infinite-loader": "^1.0.9",
     "replace-in-file": "^8.1.0",
-    "typescript": "^5.7.2",
     "vite": "^5.4.6",
-    "typescript-eslint": "^8.11.0",
-    "@eslint/js": "^9.13.0",
-    "@types/eslint__js": "^8.42.3",
-    "@typescript-eslint/parser": "8.12.2",
-    "eslint": "^9.13.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.3",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "prettier": "^3.2.5",
     "tsup": "^8.3.0"
   },
   "description": "",
@@ -88,5 +66,12 @@
     "dev": "tsup --watch",
     "clean": "rm -rf dist",
     "prebuild": "pnpm lint"
+  },
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    }
   }
 }

package/src/components/auth/SignIn.tsx

@@ -1,6 +1,6 @@
 import { Button, Flex, Portal, Text } from '@chakra-ui/react'
 import { useAuth, useBackendBase } from '@chem-po/react'
-
+import React from 'react'
 interface SignInProps {
   // authProviders: Array<AuthProviderData<FC<{ noText?: boolean }>>>
   layout?: 'row' | 'column'

package/src/components/box/CollapseHorizontal.tsx

@@ -1,4 +1,5 @@
 import { Center, CenterProps } from '@chakra-ui/react'
+import React from 'react'
 
 export const CollapseHorizontal = ({
   width,

package/src/components/box/ContentBox.tsx

@@ -1,5 +1,5 @@
 import { Flex, FlexProps } from '@chakra-ui/react'
-import { ForwardedRef, forwardRef } from 'react'
+import React, { ForwardedRef, forwardRef } from 'react'
 
 const ContentBoxBase = (props: FlexProps, ref: ForwardedRef<HTMLDivElement>) => {
   return (

package/src/components/box/ExpandOnMount.tsx

@@ -1,7 +1,7 @@
 import { Box, BoxProps } from '@chakra-ui/react'
 import { useMounted } from '@chem-po/react'
 import useResizeObserver from '@react-hook/resize-observer'
-import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 export const ExpandOnMount: FC<
   BoxProps & { in?: boolean; animateOpacity?: boolean; duration?: number; onExited?: () => void }

package/src/components/box/Expandable.tsx

@@ -13,14 +13,14 @@ import { useBorderColor } from '../../hooks/ui/useBorderColor'
 import { ViewButton } from '../button/ViewButton'
 
 export const Expandable = ({
-  header,
+  header: Header,
   children,
   initExpanded = false,
   nested,
   alwaysExpanded,
   headerProps,
   iconColor,
-  footer,
+  footer: Footer,
   isOpen: isOpenProp,
   onClose: onCloseProp,
   onOpen: onOpenProp,
@@ -73,12 +73,12 @@ export const Expandable = ({
           aria-label="expand/hide"
           align="center"
           flex={1}>
-          {typeof header === 'string' ? (
+          {typeof Header === 'string' ? (
             <Text fontWeight={600} color="gray.500" flex={1}>
-              {header}
+              {Header}
             </Text>
           ) : (
-            header({ isOpen, onClose })
+            <Header isOpen={isOpen} onClose={onClose} />
           )}
         </Flex>
         {alwaysExpanded ? null : (
@@ -90,7 +90,7 @@ export const Expandable = ({
           {children as any}
         </Collapse>
       </Box>
-      {footer ? footer({ isOpen, onClose }) : null}
+      {Footer ? <Footer isOpen={isOpen} onClose={onClose} /> : null}
     </VStack>
   )
 }

package/src/components/box/FullSizeContainer.tsx

@@ -1,10 +1,10 @@
 import { Box, BoxProps } from '@chakra-ui/react'
 import { FullSizeContext } from '@chem-po/react'
 import useResizeObserver from '@react-hook/resize-observer'
-import { FC, useCallback, useMemo, useRef, useState } from 'react'
+import React, { FC, useCallback, useMemo, useRef, useState } from 'react'
 
 export const FullSizeContainer = ({
-  children,
+  children: Children,
   ...props
 }: Omit<BoxProps, 'children'> & { children: FC<{ width: number; height: number }> }) => {
   const [width, setWidth] = useState(0)
@@ -21,7 +21,7 @@ export const FullSizeContainer = ({
 
   return (
     <Box ref={ref} {...props} width="100%" height="100%">
-      {children({ width, height })}
+      <Children width={width} height={height} />
     </Box>
   )
 }

package/src/components/box/MobileFrame/index.tsx

@@ -2,7 +2,7 @@ import { Box, Center, Flex, useColorModeValue } from '@chakra-ui/react'
 import { cssGradients } from '@chem-po/core'
 import { MobileFrameProvider, useScreen, useViews, View, ViewsProvider } from '@chem-po/react'
 import { AnimatePresence, motion } from 'framer-motion'
-import { PropsWithChildren, ReactNode, useMemo, useRef } from 'react'
+import React, { PropsWithChildren, ReactNode, useMemo, useRef } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 import { matchRoutes, useLocation, useOutlet } from 'react-router-dom'
 import { CSSTransition, SwitchTransition } from 'react-transition-group'

package/src/components/button/DeleteButton.tsx

@@ -85,7 +85,7 @@ export const DeleteButton: React.FC<
 > = ({ onDelete, itemName, noConfirm, alertBody, text, actionName = 'Delete', ...props }) => {
   const [deleteLoading, setDeleteLoading] = useState(false)
   const [confirmActive, setConfirmActive] = useState(false)
-  const confirmTimer = useRef<any>()
+  const confirmTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
   const isMounted = useRef(true)
   useEffect(() => {
     isMounted.current = true

package/src/components/button/Toggle.tsx

@@ -1,5 +1,5 @@
 import { Box, Flex, IconButton, IconButtonProps, Tooltip } from '@chakra-ui/react'
-import { JSX } from 'react'
+import React, { JSX } from 'react'
 import { useBorderColor } from '../../hooks'
 
 export interface ToggleOption<Option extends string = string> {

package/src/components/button/ViewButton.tsx

@@ -1,6 +1,6 @@
 import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons'
 import { IconButton } from '@chakra-ui/react'
-import { FC, MouseEvent } from 'react'
+import React, { FC, MouseEvent } from 'react'
 
 export const ViewButton: FC<{
   onClick: (e: MouseEvent) => void

package/src/components/feed/FeedContentPane.tsx

@@ -1,7 +1,7 @@
 import { AnyObject, WithId } from '@chem-po/core'
 import { MobileFrameContextData, useDocument, useMobileFrame } from '@chem-po/react'
 import { motion, MotionValue, useMotionValue, useSpring, useTransform } from 'framer-motion'
-import { JSX, useEffect, useMemo, useRef } from 'react'
+import React, { JSX, useEffect, useMemo, useRef } from 'react'
 import { springConfig } from './constants'
 import { PanelStatus } from './types'
 

package/src/components/feed/MediaFeedBackground.tsx

@@ -1,7 +1,7 @@
 import { Center, CenterProps } from '@chakra-ui/react'
 import { AnyObject, WithId } from '@chem-po/core'
 import { useObjectUrl } from '@chem-po/react'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { LoadingLogo } from '../loading'
 import { GetBackgroundUrl, GetBackgroundValue } from './types'
 

package/src/components/feed/MediaFeedRefresh.tsx

@@ -1,7 +1,7 @@
 import { RepeatIcon } from '@chakra-ui/icons'
 import { Center } from '@chakra-ui/react'
 import { motion, MotionValue, useSpring, useTransform } from 'framer-motion'
-import { useEffect } from 'react'
+import React, { useEffect } from 'react'
 import { CircularProgress } from '../loading/CircularProgress'
 import { REFRESH_THRESHOLD, SWIPE_THRESHOLD } from './constants'
 

package/src/components/feed/MediaFeedSwipeUp.tsx

@@ -1,6 +1,7 @@
 import { ChevronUpIcon } from '@chakra-ui/icons'
 import { Center } from '@chakra-ui/react'
 import { motion, MotionValue, useTransform } from 'framer-motion'
+import React from 'react'
 
 export const MediaFeedSwipeUp = ({ offsetY }: { offsetY: MotionValue<number> }) => {
   const progress = useTransform(offsetY, v => {

package/src/components/feed/context.tsx

@@ -1,5 +1,5 @@
 import { AnyObject, WithId } from '@chem-po/core'
-import { createContext, PropsWithChildren, useContext, useMemo } from 'react'
+import React, { createContext, PropsWithChildren, useContext, useMemo } from 'react'
 
 interface MediaFeedContextValue<T extends AnyObject = AnyObject> {
   curr: WithId<T> | null

package/src/components/form/Condition.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useMemo } from 'react'
+import React, { PropsWithChildren, useMemo } from 'react'
 import { useWatch } from 'react-hook-form'
 import { ExpandOnMount } from '../box'
 

package/src/components/form/Field.tsx

@@ -1,5 +1,5 @@
 import { InputRef } from '@chem-po/core'
-import { ForwardedRef, forwardRef } from 'react'
+import React, { ForwardedRef, forwardRef } from 'react'
 
 import { Field, useField } from '@chem-po/react'
 import { ChangeHandler, Controller } from 'react-hook-form'

package/src/components/form/Form.tsx

@@ -18,15 +18,17 @@ import {
   FieldFormProps,
   FieldMap,
   FieldMapFormProps,
+  FormOnSubmit,
   FormProps,
   IFormElement,
   ListField,
   useDataView,
   useFormSubmit,
   UseFormSubmitProps,
+  useGetItemField,
 } from '@chem-po/react'
 import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd'
-import { FC, useMemo, useState } from 'react'
+import React, { FC, useMemo, useState } from 'react'
 import { useFieldArray, UseFieldArrayMove, useFormContext } from 'react-hook-form'
 import { useBorderColor } from '../../hooks'
 import { Expandable } from '../box'
@@ -208,8 +210,9 @@ const ListFieldView = ({
   value: any[]
   path: string
 }) => {
-  const { itemField, placeholder } = field
+  const { placeholder } = field
   const borderColor = useBorderColor()
+  const getItemField = useGetItemField(field)
   return (
     <Box w="100%" p={1}>
       <Expandable
@@ -227,7 +230,7 @@ const ListFieldView = ({
                 borderRadius={3}>
                 <FormElementView
                   path={`${path}.${index}`}
-                  field={{ ...itemField, placeholder: `${placeholder} ${index + 1}` }}
+                  field={getItemField(index)}
                   value={item}
                 />
               </Box>
@@ -413,12 +416,12 @@ export const FieldForm = <F extends Field | ListField>({
   )
 }
 
-export const Form = <F extends IFormElement>({ field, ...props }: FormProps<F>) => {
+export const Form = <F extends IFormElement>({ field, onSubmit, ...props }: FormProps<F>) => {
   const body =
     isField(field) || isListField(field) ? (
-      <FieldForm field={field} {...props} />
+      <FieldForm field={field} onSubmit={onSubmit as FormOnSubmit<Field | ListField>} {...props} />
     ) : (
-      <FieldMapForm field={field} {...props} />
+      <FieldMapForm field={field} onSubmit={onSubmit as FormOnSubmit<FieldMap>} {...props} />
     )
 
   return <ChempoFormProvider>{body}</ChempoFormProvider>

package/src/components/form/FormFooter.tsx

@@ -1,4 +1,5 @@
 import { Button, ButtonProps, Collapse, Flex, HStack, Progress, Text } from '@chakra-ui/react'
+import React from 'react'
 
 import { FC, PropsWithChildren } from 'react'
 
@@ -47,7 +48,7 @@ const FormErrorView = () => {
 }
 
 export const FormFooter = <F extends IFormElement>({
-  renderFooter,
+  renderFooter: RenderFooter,
   ...props
 }: Pick<FormProps<F>, 'renderFooter' | 'onBack' | 'buttonText'> &
   Pick<UseFormSubmit, 'uploads'> & {
@@ -62,8 +63,8 @@ export const FormFooter = <F extends IFormElement>({
       </Collapse>
       <UploadProgress uploads={uploads} />
       <FormErrorView />
-      {renderFooter ? (
-        renderFooter(props)
+      {RenderFooter ? (
+        <RenderFooter {...props} />
       ) : (
         <HStack py={2} borderTop="1px solid" borderColor="background.200" px={3} w="100%">
           {onBack ? <CancelButton onBack={onBack}>Cancel</CancelButton> : null}

package/src/components/form/UploadProgress/index.tsx

@@ -1,6 +1,6 @@
 import { Center, Flex, Progress, Text } from '@chakra-ui/react'
 import { UploadsState } from '@chem-po/core'
-import { useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { TransitionGroup } from 'react-transition-group'
 import { ExpandOnMount } from '../../box'
 import './styles.css'

package/src/components/form/input/Editable.tsx

@@ -1,14 +1,8 @@
 import { CheckIcon, CloseIcon, EditIcon } from '@chakra-ui/icons'
 import { Flex, IconButton } from '@chakra-ui/react'
 import { palette } from '@chem-po/core'
-import {
-  ChempoFormProvider,
-  EditableProps,
-  Field,
-  useColorModeValue,
-  useEditable,
-} from '@chem-po/react'
-import { CSSProperties, useEffect, useMemo } from 'react'
+import { EditableProps, Field, useColorModeValue, useEditable } from '@chem-po/react'
+import React, { CSSProperties, useEffect, useMemo } from 'react'
 import { LoadingOverlay } from '../../loading/Loading'
 import { UploadProgress } from '../UploadProgress'
 import { FieldView } from '../view'
@@ -56,74 +50,72 @@ export const Editable = <T extends Field>({
   const editingBorderColor = useColorModeValue('#00000055', '#ffffff55')
 
   return (
-    <ChempoFormProvider>
-      <Flex
-        borderRadius={4}
-        border={`1px dashed ${editHovered && !isEditing ? editingBorderColor : 'transparent'}`}
-        flexFlow="column"
-        w="100%">
-        <Flex align="center" px={1} position="relative" w="100%">
-          <Flex
-            opacity={isLoading ? 0 : 1}
-            transition="all 300ms"
-            mr={1}
-            border={`1px dashed ${isEditing ? editingBorderColor : 'transparent'}`}
-            flex={1}
-            minW="0">
-            {isEditing || alwaysEditing ? (
-              <StandaloneInput
-                ref={inputRef}
-                value={formattedValue}
-                inEditable
-                field={field}
-                style={{ padding: 0, ...style }}
-                onChange={alwaysEditing ? v => submitValue(parse(v)) : v => setValue(parse(v))}
-              />
-            ) : (
-              <FieldView style={style} field={field} value={value} />
-            )}
-          </Flex>
-          {alwaysEditing ? null : (
-            <>
+    <Flex
+      borderRadius={4}
+      border={`1px dashed ${editHovered && !isEditing ? editingBorderColor : 'transparent'}`}
+      flexFlow="column"
+      w="100%">
+      <Flex align="center" px={1} position="relative" w="100%">
+        <Flex
+          opacity={isLoading ? 0 : 1}
+          transition="all 300ms"
+          mr={1}
+          border={`1px dashed ${isEditing ? editingBorderColor : 'transparent'}`}
+          flex={1}
+          minW="0">
+          {isEditing || alwaysEditing ? (
+            <StandaloneInput
+              ref={inputRef}
+              value={formattedValue}
+              inEditable
+              field={field}
+              style={{ padding: 0, ...style }}
+              onChange={alwaysEditing ? v => submitValue(parse(v)) : v => setValue(parse(v))}
+            />
+          ) : (
+            <FieldView style={style} field={field} value={value} />
+          )}
+        </Flex>
+        {alwaysEditing ? null : (
+          <>
+            <IconButton
+              aria-label="Edit"
+              size="xs"
+              icon={isEditing ? <CloseIcon width={3} /> : <EditIcon />}
+              onMouseEnter={() => setEditHovered(true)}
+              onMouseLeave={() => setEditHovered(false)}
+              onClick={() => {
+                if (isEditing) {
+                  setValue(value)
+                  handleEditClose()
+                } else handleEditOpen()
+              }}
+            />
+            <Flex
+              transition="all 300ms"
+              justify="flex-end"
+              opacity={isEditing ? 1 : 0}
+              overflow="hidden"
+              w={isEditing ? '30px' : '0px'}>
               <IconButton
                 aria-label="Edit"
                 size="xs"
-                icon={isEditing ? <CloseIcon width={3} /> : <EditIcon />}
-                onMouseEnter={() => setEditHovered(true)}
-                onMouseLeave={() => setEditHovered(false)}
+                bg={palette.cyan.light}
+                _dark={{ bg: palette.cyan.light, _hover: { bg: palette.cyan.lighter } }}
+                _hover={{
+                  bg: palette.cyan.medium,
+                }}
+                icon={<CheckIcon filter="drop-shadow(1px 1px 3px #000000aa)" />}
                 onClick={() => {
-                  if (isEditing) {
-                    setValue(value)
-                    handleEditClose()
-                  } else handleEditOpen()
+                  submit()
                 }}
               />
-              <Flex
-                transition="all 300ms"
-                justify="flex-end"
-                opacity={isEditing ? 1 : 0}
-                overflow="hidden"
-                w={isEditing ? '30px' : '0px'}>
-                <IconButton
-                  aria-label="Edit"
-                  size="xs"
-                  bg={palette.cyan.light}
-                  _dark={{ bg: palette.cyan.light, _hover: { bg: palette.cyan.lighter } }}
-                  _hover={{
-                    bg: palette.cyan.medium,
-                  }}
-                  icon={<CheckIcon filter="drop-shadow(1px 1px 3px #000000aa)" />}
-                  onClick={() => {
-                    submit()
-                  }}
-                />
-              </Flex>
-            </>
-          )}
-          <LoadingOverlay isLoading={isLoading} />
-        </Flex>
-        <UploadProgress uploads={uploads} />
+            </Flex>
+          </>
+        )}
+        <LoadingOverlay isLoading={isLoading} />
       </Flex>
-    </ChempoFormProvider>
+      <UploadProgress uploads={uploads} />
+    </Flex>
   )
 }

package/src/components/form/input/InputSlider.tsx

@@ -10,6 +10,7 @@ import {
   Tooltip,
 } from '@chakra-ui/react'
 import { Gradient, gradientToCssGradientProp } from '@chem-po/core'
+import React from 'react'
 import { GradientText } from '../../text/GradientText'
 
 export const InputSlider = ({

package/src/components/form/input/OptionalTag.tsx

@@ -1,6 +1,6 @@
 import { Flex, Text } from '@chakra-ui/react'
 import { Field } from '@chem-po/react'
-import { useMemo } from 'react'
+import React, { useMemo } from 'react'
 
 export const OptionalTag = <T extends Field>({
   value,

package/src/components/form/input/StandaloneInput.tsx

@@ -1,6 +1,6 @@
 import { InputRef } from '@chem-po/core'
 import { Field, useStandaloneInput } from '@chem-po/react'
-import { CSSProperties, ForwardedRef, forwardRef } from 'react'
+import React, { CSSProperties, ForwardedRef, forwardRef } from 'react'
 import { Input } from './input'
 
 const StandaloneInputBase = (

package/src/components/form/input/boolean/index.tsx

@@ -1,7 +1,7 @@
 import { Checkbox, Flex, Switch, Text } from '@chakra-ui/react'
 import { InputRef } from '@chem-po/core'
 import { BooleanField } from '@chem-po/react'
-import { ForwardedRef, forwardRef, useImperativeHandle } from 'react'
+import React, { ForwardedRef, forwardRef, useImperativeHandle } from 'react'
 import { FieldProps } from '../types'
 
 const BaseCheckboxComponent = (

package/src/components/form/input/color/index.tsx

@@ -2,7 +2,7 @@ import { Box, Center, HStack, SliderProps, StackProps, Text, VStack } from '@cha
 
 import { colorValueToHex, Gradient, gradients, InputRef } from '@chem-po/core'
 import { ColorField } from '@chem-po/react'
-import { forwardRef, useCallback, useMemo } from 'react'
+import React, { forwardRef, useCallback, useMemo } from 'react'
 import { useInputImperativeHandle } from '../hooks/useInputImperativeHandle'
 import { InputSlider } from '../InputSlider'
 import { FieldProps } from '../types'

package/src/components/form/input/date/index.tsx

@@ -8,7 +8,7 @@ import {
   Portal,
   Text,
 } from '@chakra-ui/react'
-import { forwardRef, useImperativeHandle, useMemo } from 'react'
+import React, { forwardRef, useImperativeHandle, useMemo } from 'react'
 import { DayPicker } from 'react-day-picker'
 // import 'react-day-picker/dist/style.css'
 import { getDateString, InputRef } from '@chem-po/core'

package/src/components/form/input/datetime/index.tsx

@@ -1,7 +1,7 @@
 import { HStack } from '@chakra-ui/react'
 import { InputRef } from '@chem-po/core'
 import { DateTimeField, FieldMeta } from '@chem-po/react'
-import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
 import { DateInput, parseDate } from '../date'
 import '../input.css'
 import { TimeInput } from '../time'

package/src/components/form/input/file.tsx

@@ -9,10 +9,7 @@ import {
   useColorModeValue,
   VStack,
 } from '@chakra-ui/react'
-
-import { FileValue, generateId, ImageViewOptions, InputRef, WithId } from '@chem-po/core'
-import { FileField, useImageSize, useObjectUrl } from '@chem-po/react'
-import {
+import React, {
   ChangeEventHandler,
   forwardRef,
   useCallback,
@@ -21,6 +18,9 @@ import {
   useRef,
   useState,
 } from 'react'
+
+import { FileValue, generateId, ImageViewOptions, InputRef, WithId } from '@chem-po/core'
+import { FileField, useImageSize, useObjectUrl } from '@chem-po/react'
 import { useBorderColor } from '../../../hooks'
 import { LoadingImage } from '../../loading/LoadingImage'
 import { PlayButton } from '../../media/PlayButton'