@chem-po/react-web 0.0.7 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chem-po/react-web",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "type": "module",
   "source": "./src/index.ts",
   "main": "./dist/index.js",
@@ -26,8 +26,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@chem-po/core": "0.0.7",
-    "@chem-po/react": "0.0.7"
+    "@chem-po/core": "0.0.9",
+    "@chem-po/react": "0.0.9"
   },
   "peerDependencies": {
     "@chakra-ui/anatomy": "^2.2.2",

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/FullSizeContainer.tsx

@@ -1,7 +1,7 @@
 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,

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/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

@@ -26,7 +26,7 @@ import {
   UseFormSubmitProps,
 } 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'

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'
 

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

@@ -8,7 +8,7 @@ import {
   useColorModeValue,
   useEditable,
 } from '@chem-po/react'
-import { CSSProperties, useEffect, useMemo } from 'react'
+import React, { CSSProperties, useEffect, useMemo } from 'react'
 import { LoadingOverlay } from '../../loading/Loading'
 import { UploadProgress } from '../UploadProgress'
 import { FieldView } from '../view'

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'

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

@@ -1,7 +1,7 @@
 import { Flex, FlexProps, Text, VStack } from '@chakra-ui/react'
 import { FieldType, InputRef } from '@chem-po/core'
 import { Field, TypedField } from '@chem-po/react'
-import { ForwardedRef, forwardRef, ForwardRefExoticComponent, useMemo } from 'react'
+import React, { ForwardedRef, forwardRef, ForwardRefExoticComponent, useMemo } from 'react'
 import { BooleanComponent } from './boolean'
 import { ColorComponent } from './color'
 import { DateInput } from './date'

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

@@ -1,7 +1,7 @@
 import { Box, Button, Flex, Text, useColorMode } from '@chakra-ui/react'
 import { InputRef } from '@chem-po/core'
 import { MultipleSelectField } from '@chem-po/react'
-import { forwardRef, useImperativeHandle } from 'react'
+import React, { forwardRef, useImperativeHandle } from 'react'
 import { FieldProps } from '../types'
 
 export const MultipleSelectComponent = forwardRef<InputRef, FieldProps<MultipleSelectField>>(

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

@@ -1,7 +1,7 @@
 import { useColorModeValue } from '@chakra-ui/react'
 import { InputRef } from '@chem-po/core'
 import { CurrencyAmountField, NumberField } from '@chem-po/react'
-import { ForwardedRef, forwardRef, useImperativeHandle, useRef, useState } from 'react'
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useRef, useState } from 'react'
 import CurrencyInput from 'react-currency-input-field'
 import { InputSlider } from '../InputSlider'
 import { useInputImperativeHandle } from '../hooks/useInputImperativeHandle'

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

@@ -11,7 +11,7 @@ import {
 } from '@chakra-ui/react'
 import { InputRef } from '@chem-po/core'
 import { SelectField } from '@chem-po/react'
-import { forwardRef, useImperativeHandle, useMemo } from 'react'
+import React, { forwardRef, useImperativeHandle, useMemo } from 'react'
 import { FieldProps } from '../types'
 
 const DefaultRenderOption = (value: any) => {

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

@@ -14,7 +14,14 @@ import {
 
 import { getHandle, InputRef, SocialMediaSites } from '@chem-po/core'
 import { SocialMediaField } from '@chem-po/react'
-import { FC, ForwardedRef, forwardRef, useCallback, useImperativeHandle, useMemo } from 'react'
+import React, {
+  FC,
+  ForwardedRef,
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+} from 'react'
 import { FieldProps } from '../types'
 
 const facebookLogo = '/icons/facebook.svg'

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

@@ -2,7 +2,7 @@ import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'
 import { Flex, IconButton, Input } from '@chakra-ui/react'
 import { InputRef } from '@chem-po/core'
 import { TextField } from '@chem-po/react'
-import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
 import { FieldProps } from '../types'
 import { TextAreaComponent } from './textarea'
 

package/src/components/form/input/text/textarea.tsx

@@ -1,6 +1,6 @@
 import { InputRef } from '@chem-po/core'
 import { TextField, useTextColor } from '@chem-po/react'
-import { ForwardedRef, forwardRef, useImperativeHandle, useRef } from 'react'
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useRef } from 'react'
 import TextareaAutosize from 'react-textarea-autosize'
 import { FieldProps } from '../types'
 

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

@@ -1,7 +1,7 @@
 import { Input } from '@chakra-ui/react'
 import { InputRef } from '@chem-po/core'
 import { TimeField } from '@chem-po/react'
-import { forwardRef, useImperativeHandle } from 'react'
+import React, { forwardRef, useImperativeHandle } from 'react'
 import { FieldProps } from '../types'
 // import '../input.css'
 

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

@@ -1,7 +1,7 @@
 import { Box, Flex, Text } from '@chakra-ui/react'
 import { ImageViewOptions } from '@chem-po/core'
 import { FileField } from '@chem-po/react'
-import { CSSProperties, useMemo } from 'react'
+import React, { CSSProperties, useMemo } from 'react'
 import { ExpandOnMount } from '../../box/ExpandOnMount'
 import { FileView } from '../input/file'
 

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

@@ -2,7 +2,7 @@ import { Flex, Text } from '@chakra-ui/react'
 
 import { formatField } from '@chem-po/core'
 import { Field } from '@chem-po/react'
-import { CSSProperties, useMemo } from 'react'
+import React, { CSSProperties, useMemo } from 'react'
 import { FileFieldView } from './file'
 import { MultipleSelectFieldView } from './multipleSelect'
 import { SelectFieldView } from './select'

package/src/components/form/view/multipleSelect.tsx

@@ -2,7 +2,7 @@ import { Box, Text } from '@chakra-ui/react'
 
 import { Flex, useColorMode } from '@chakra-ui/react'
 import { MultipleSelectField } from '@chem-po/react'
-import { CSSProperties } from 'react'
+import React, { CSSProperties } from 'react'
 
 export const MultipleSelectFieldView = ({
   field,

package/src/components/form/view/select.tsx

@@ -1,6 +1,6 @@
 import { Flex, Text, useColorMode } from '@chakra-ui/react'
 import { SelectField } from '@chem-po/react'
-import { CSSProperties } from 'react'
+import React, { CSSProperties } from 'react'
 
 const DefaultRenderOption = (value: any) => {
   return <Text>{typeof value === 'string' ? value : JSON.stringify(value)}</Text>

package/src/components/list/Body/InfiniteScrollGridBody.tsx

@@ -1,7 +1,7 @@
 import { useColorMode } from '@chakra-ui/react'
 import { AnyObject, WithId } from '@chem-po/core'
 import { ListGridOptions, useDataList, useFullSize, usePaginatedList } from '@chem-po/react'
-import { useCallback, useEffect, useMemo, useRef } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import {
   FixedSizeGrid,
   GridOnItemsRenderedProps,

package/src/components/list/Body/InfiniteScrollListBody.tsx

@@ -1,7 +1,7 @@
 import { useColorMode } from '@chakra-ui/react'
 import { AnyObject, WithId } from '@chem-po/core'
 import { useDataList, useFullSize, usePaginatedList } from '@chem-po/react'
-import { useCallback, useEffect, useMemo, useRef } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import { FixedSizeList, VariableSizeGrid, VariableSizeList } from 'react-window'
 import InfiniteLoader from 'react-window-infinite-loader'
 import { ListItemProps, ListRow } from '../ListItem/ListRow'

package/src/components/list/Body/ListBody.tsx

@@ -1,4 +1,5 @@
 import { useDataList } from '@chem-po/react'
+import React from 'react'
 import { InfiniteScrollGridBody } from './InfiniteScrollGridBody'
 import { InfiniteScrollListBody } from './InfiniteScrollListBody'
 import { PagedGridBody } from './PagedGridBody'

package/src/components/list/Body/PagedGridBody.tsx

@@ -1,7 +1,7 @@
 import { useColorMode } from '@chakra-ui/react'
 import { AnyObject, BaseComponent, ItemPreviewProps, ListGridOptions } from '@chem-po/core'
 import { useDataList, useFullSize, usePaginatedList } from '@chem-po/react'
-import { memo, useEffect, useMemo, useRef } from 'react'
+import React, { memo, useEffect, useMemo, useRef } from 'react'
 import { FixedSizeGrid, VariableSizeGrid } from 'react-window'
 import { GridItemProps, ListCell } from '../ListItem/ListCell'
 import { NoItemsRow } from '../NoItems'

package/src/components/list/Body/PagedListBody.tsx

@@ -1,6 +1,6 @@
 import { useColorMode } from '@chakra-ui/react'
 import { useDataList, useFullSize, usePaginatedList } from '@chem-po/react'
-import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
+import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react'
 import { FixedSizeList, VariableSizeList } from 'react-window'
 import { ListItemProps, ListRow } from '../ListItem/ListRow'
 import { NoItemsRow } from '../NoItems'

package/src/components/list/DataList.tsx

@@ -5,6 +5,7 @@ import {
   useDataListData,
   usePaginatedQuery,
 } from '@chem-po/react'
+import React from 'react'
 import { ListContainer } from './ListContainer'
 import { ListContent } from './ListContent'
 import { ListViewProps } from './types'

package/src/components/list/ListContainer.tsx

@@ -1,5 +1,6 @@
 import { Flex, FlexProps } from '@chakra-ui/react'
 import { useMounted } from '@chem-po/react'
+import React from 'react'
 import { FullSizeProvider } from '../box'
 
 export const ListContainer = (props: FlexProps) => {

package/src/components/list/ListContent.tsx

@@ -1,7 +1,7 @@
 import { Box } from '@chakra-ui/react'
 import { AnyObject } from '@chem-po/core'
 import { useDataList, useFullSize, usePaginatedList } from '@chem-po/react'
-import { useCallback, useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { LoadingOverlay } from '../loading'
 import { ListBody } from './Body/ListBody'
 import { ListCreate } from './ListCreate'

package/src/components/list/ListCreate.tsx

@@ -1,7 +1,7 @@
 import { CloseIcon } from '@chakra-ui/icons'
 import { Flex, IconButton, Text } from '@chakra-ui/react'
 import { FieldMap, useBackendBase, useDataList, usePaginatedList } from '@chem-po/react'
-import { useCallback } from 'react'
+import React, { useCallback } from 'react'
 import { Form } from '../form'
 import { DesktopModal } from '../modal'
 

package/src/components/list/ListFilters.tsx

@@ -19,7 +19,7 @@ import {
 
 import { AnyObject, isFilterGroup, QueryFilter } from '@chem-po/core'
 import { FilterPreset, FilterPresetGroup, useDataList, useScreen } from '@chem-po/react'
-import { useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { useBorderColor } from '../../hooks'
 import { filterMatchesPreset } from './utils'
 

package/src/components/list/ListFooter.tsx

@@ -17,7 +17,7 @@ import {
 import { toPlural } from '@chem-po/core'
 import { useDataList, usePaginatedList } from '@chem-po/react'
 import useResizeObserver from '@react-hook/resize-observer'
-import { useCallback, useMemo, useRef } from 'react'
+import React, { useCallback, useMemo, useRef } from 'react'
 import { useBorderColor } from '../../hooks'
 import { ExpandOnMount } from '../box'
 import { DataListFooterProps } from './types'

package/src/components/list/ListHeader.tsx

@@ -13,7 +13,7 @@ import {
 import { getHasAccess, toPlural } from '@chem-po/core'
 import { useAuth, useDataList } from '@chem-po/react'
 import useResizeObserver from '@react-hook/resize-observer'
-import { useCallback, useMemo, useRef } from 'react'
+import React, { useCallback, useMemo, useRef } from 'react'
 import { useBorderColor } from '../../hooks/ui/useBorderColor'
 import { Toggle, ToggleOption } from '../button/Toggle'
 import { PresetFilters } from './ListFilters'

package/src/components/list/ListItem/ListCell.tsx

@@ -1,7 +1,7 @@
 import { Flex } from '@chakra-ui/react'
 import { AnyObject, ColorMode, DBItem } from '@chem-po/core'
 import { DataList, ListGridOptions } from '@chem-po/react'
-import { GridChildComponentProps } from 'react-window'
+import React, { GridChildComponentProps } from 'react-window'
 
 export interface GridItemProps<T extends AnyObject> {
   list: DataList<T>

package/src/components/list/ListItem/ListRow.tsx

@@ -1,7 +1,7 @@
 import { Flex } from '@chakra-ui/react'
 import { AnyObject, ColorMode, DBItem } from '@chem-po/core'
 import { DataList } from '@chem-po/react'
-import { ListChildComponentProps } from 'react-window'
+import React, { ListChildComponentProps } from 'react-window'
 
 export interface ListItemProps<T extends AnyObject = AnyObject> {
   list: DataList<T>

package/src/components/list/ListItemView.tsx

@@ -1,7 +1,7 @@
 import { Text, useColorMode, useColorModeValue } from '@chakra-ui/react'
 import { AnyObject, DBItem } from '@chem-po/core'
 import { useDataList, usePaginatedList } from '@chem-po/react'
-import { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { DefaultModal } from '../modal'
 
 export const ListItemView = () => {

package/src/components/list/ListSort.tsx

@@ -2,7 +2,7 @@ import { ArrowDownIcon, ArrowUpIcon } from '@chakra-ui/icons'
 import { Button, HStack, Text, useColorMode } from '@chakra-ui/react'
 import { SortDirection } from '@chem-po/core'
 import { SortPreset, useDataList } from '@chem-po/react'
-import { useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { CollapseHorizontal } from '../box/CollapseHorizontal'
 
 const SortButton = ({ preset }: { preset: SortPreset }) => {

package/src/components/list/NoItems.tsx

@@ -1,7 +1,7 @@
 import { Flex, Text } from '@chakra-ui/react'
 import { toPlural } from '@chem-po/core'
 import { useDataList, usePaginatedList } from '@chem-po/react'
-import { useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { Loading } from '../loading'
 
 export const NoItemsRow = () => {

package/src/components/loading/CircularProgress.tsx

@@ -3,6 +3,7 @@ import {
   CircularProgress as Orig,
   useColorModeValue,
 } from '@chakra-ui/react'
+import React from 'react'
 
 export const CircularProgress = (props: CircularProgressProps) => {
   const color = useColorModeValue('gray.400', 'gray.400')

package/src/components/loading/Loading.tsx

@@ -1,7 +1,7 @@
 import { Center, CenterProps, HStack, StackProps, Text, useColorModeValue } from '@chakra-ui/react'
 import { ThemedAsset, useAppAssets } from '@chem-po/react'
 import { LottieOptions, useLottie } from 'lottie-react'
-import { useEffect, useMemo } from 'react'
+import React, { useEffect, useMemo } from 'react'
 import { ContentBox } from '../box/ContentBox'
 // import loadingAnimation from './circles_loading.json'
 // import loadingAnimationLight from './circles_loading_light.json'

package/src/components/loading/LoadingImage.tsx

@@ -1,6 +1,6 @@
 import { BoxProps, Center, IconButton, Image, ImageProps } from '@chakra-ui/react'
 import { useMounted } from '@chem-po/react'
-import { SyntheticEvent, useCallback, useEffect, useRef, useState } from 'react'
+import React, { SyntheticEvent, useCallback, useEffect, useRef, useState } from 'react'
 import { ImageViewOverlay } from '../overlay/ImageViewOverlay'
 import { LoadingLogo } from './Loading'
 

package/src/components/loading/LoadingSwitch.tsx

@@ -1,5 +1,5 @@
 import { Center, Flex, Switch, Text, useToast } from '@chakra-ui/react'
-import { useCallback, useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import { Loading } from './Loading'
 
 export const LoadingSwitch = ({