@chem-po/react-web 0.0.7 → 0.0.9

package/src/components/media/PlayButton.tsx

@@ -1,6 +1,7 @@
 import { ButtonProps, Center, IconButton, Image } from '@chakra-ui/react'
 import { SpotifyTrack, WithId } from '@chem-po/core'
 import { usePlaylist } from '@chem-po/react'
+import React from 'react'
 import { useActiveMedia, usePlayer } from '../../store/usePlayer'
 
 export const PlayButton = ({

package/src/components/modal/DefaultModal.tsx

@@ -1,5 +1,5 @@
 import { useScreen } from '@chem-po/react'
-import { useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { DesktopModal } from './DesktopModal'
 import { useForceMobile } from './ForceMobile'
 import { MobileModal } from './MobileModal'

package/src/components/modal/DesktopModal.tsx

@@ -1,4 +1,5 @@
 import { Box, Modal, ModalContent, ModalOverlay } from '@chakra-ui/react'
+import React from 'react'
 import { DefaultModalProps } from './type'
 
 export const DesktopModal = ({ children, isOpen, contentProps, ...props }: DefaultModalProps) => (

package/src/components/modal/MobileModal.tsx

@@ -1,6 +1,6 @@
 import { Flex, useColorModeValue } from '@chakra-ui/react'
 import { useMobileFrame } from '@chem-po/react'
-import { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { MobileOverlay } from '../overlay/MobileOverlay'
 import { DefaultModalProps } from './type'
 

package/src/components/nav/NavBar.tsx

@@ -1,7 +1,7 @@
 import { Button, Flex, Image, useColorModeValue } from '@chakra-ui/react'
 import { palette } from '@chem-po/core'
 import { useViews, View } from '@chem-po/react'
-import { PropsWithChildren, useMemo } from 'react'
+import React, { PropsWithChildren, useMemo } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 
 export const NAV_BAR_HEIGHT = 50

package/src/components/overlay/ImageViewOverlay.tsx

@@ -1,7 +1,7 @@
 import { CloseIcon } from '@chakra-ui/icons'
 import { Center, IconButton, Image, Modal, ModalContent, ModalOverlay } from '@chakra-ui/react'
 import { useScreen } from '@chem-po/react'
-import { SyntheticEvent, useCallback, useMemo, useState } from 'react'
+import React, { SyntheticEvent, useCallback, useMemo, useState } from 'react'
 import { LoadingLogo } from '../loading/Loading'
 
 export const ImageViewOverlay = ({ src, onClose }: { src: string; onClose: () => void }) => {

package/src/components/overlay/MobileOverlay.tsx

@@ -1,5 +1,6 @@
 import { Flex, FlexProps, Portal } from '@chakra-ui/react'
 import { useMobileFrame } from '@chem-po/react'
+import React from 'react'
 
 export const MobileOverlay = (props: FlexProps) => {
   const { overlayRef } = useMobileFrame()

package/src/components/text/GradientText/index.tsx

@@ -1,4 +1,5 @@
 import { Box, BoxProps, Text, TextProps } from '@chakra-ui/react'
+import React from 'react'
 import './styles.css'
 
 export const GradientText = ({

package/src/components/text/NumberTicker.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 
 export const NumberTicker = ({ value, duration = 30 }: { value: number; duration?: number }) => {
   const spanRef = useRef<HTMLSpanElement>(null)

package/src/components/theme/colorMode/DarkModeToggle.tsx

@@ -1,6 +1,6 @@
 import { MoonIcon, SunIcon } from '@chakra-ui/icons'
 import { Flex, FlexProps, IconButton, useColorMode, useColorModeValue } from '@chakra-ui/react'
-
+import React from 'react'
 export const DarkModeToggle = () => {
   const { colorMode, toggleColorMode } = useColorMode()
   const bg = useColorModeValue('gray.200', 'whiteAlpha.200')

package/src/components/view/ErrorView.tsx

@@ -1,4 +1,5 @@
 import { Flex, Text, useColorModeValue } from '@chakra-ui/react'
+import React from 'react'
 import { ContentBox } from '../box/ContentBox'
 
 export const ErrorView = ({ message }: { message?: string }) => {