cpk-ui 0.1.15 → 0.2.0

package/components/modals/AlertDialog/AlertDialog.stories.tsx

@@ -12,7 +12,7 @@ const Container = styled.SafeAreaView`
   background-color: ${({theme}) => theme.bg.basic};
 `;
 
-function AlertDialogBasicStory(): JSX.Element {
+function AlertDialogBasicStory(): React.JSX.Element {
   const {alertDialog} = useCPK();
 
   return (

package/components/modals/AlertDialog/AlertDialog.tsx

@@ -66,11 +66,11 @@ export type AlertDialogStyles = {
 
 export type AlertDialogOptions = {
   styles?: AlertDialogStyles;
-  title?: string | JSX.Element;
-  body?: string | JSX.Element;
+  title?: string | React.JSX.Element;
+  body?: string | React.JSX.Element;
   backdropOpacity?: number;
   closeOnTouchOutside?: boolean;
-  actions?: JSX.Element[];
+  actions?: React.JSX.Element[];
   showCloseButton?: boolean;
 };
 
@@ -82,7 +82,7 @@ export type AlertDialogContext = {
 function AlertDialog(
   {style}: AlertDialogProps,
   ref: React.Ref<AlertDialogContext>,
-): JSX.Element {
+): React.JSX.Element {
   const [options, setOptions] = useState<AlertDialogOptions | null>(null);
   const [visible, setVisible] = useState(false);
   const {theme, themeType} = useTheme();

package/components/modals/Snackbar/Snackbar.stories.tsx

@@ -11,7 +11,7 @@ const Container = styled.SafeAreaView`
   background-color: ${({theme}) => theme.bg.basic};
 `;
 
-function SnackbarBasicStory(): JSX.Element {
+function SnackbarBasicStory(): React.JSX.Element {
   const {snackbar} = useCPK();
 
   return (

package/components/modals/Snackbar/Snackbar.tsx

@@ -75,7 +75,7 @@ function clearTimer(): void {
 function Snackbar(
   {style}: SnackbarProps,
   ref: React.Ref<SnackbarContext>,
-): JSX.Element {
+): React.JSX.Element {
   const [options, setOptions] = useState<SnackbarOptions | null>(null);
   const [visible, setVisible] = useState(false);
   const {theme} = useTheme();

package/components/uis/Accordion/Accordion.test.tsx

@@ -7,7 +7,7 @@ import {createComponent, createTestProps} from '../../../../test/testUtils';
 import {Accordion} from './Accordion';
 
 let props: any;
-let component: JSX.Element;
+let component: React.JSX.Element;
 let testingLib: RenderAPI;
 
 const data: any[] = [

package/components/uis/Accordion/Accordion.tsx

@@ -26,9 +26,9 @@ export type AccordionBaseProps<T = string, K = string> = {
   animDuration?: number;
   activeOpacity?: number;
   toggleElementPosition?: 'left' | 'right';
-  toggleElement?: JSX.Element | null;
-  renderTitle?: (title: T) => JSX.Element;
-  renderItem?: (body: K) => JSX.Element;
+  toggleElement?: React.JSX.Element | null;
+  renderTitle?: (title: T) => React.JSX.Element;
+  renderItem?: (body: K) => React.JSX.Element;
   onPressItem?: (title: T | string, body: K | string) => void;
 };
 
@@ -39,7 +39,7 @@ export function Accordion<T, K>({
   toggleElementPosition = 'right',
   data,
   ...rest
-}: AccordionProps<T, K>): JSX.Element {
+}: AccordionProps<T, K>): React.JSX.Element {
   return (
     <Container style={style}>
       {data.map((datum, titleKey) => {

package/components/uis/Accordion/AccordionItem.tsx

@@ -54,7 +54,7 @@ export function AccordionItem<T, K>({
   renderTitle,
   renderItem,
   styles,
-}: Props<T, K>): JSX.Element {
+}: Props<T, K>): React.JSX.Element {
   const dropDownAnimValueRef = useRef(new Animated.Value(0));
   const rotateAnimValueRef = useRef(new Animated.Value(0));
   const fadeItemAnim = useRef(new Animated.Value(0)).current;

package/components/uis/Button/Button.test.tsx

@@ -25,7 +25,7 @@ const Component = ({
 }: {
   props?: ButtonProps;
   themeType?: ThemeType;
-}): JSX.Element =>
+}): React.JSX.Element =>
   createComponent(<Button onPress={jest.fn} {...props} />, themeType);
 
 describe('[Button]', () => {

package/components/uis/Button/Button.tsx

@@ -36,11 +36,11 @@ export type Props = {
   disabled?: boolean;
   loading?: boolean;
   loadingColor?: string;
-  loadingElement?: JSX.Element;
-  text?: string | JSX.Element;
+  loadingElement?: React.JSX.Element;
+  text?: string | React.JSX.Element;
   borderRadius?: number;
-  startElement?: JSX.Element;
-  endElement?: JSX.Element;
+  startElement?: React.JSX.Element;
+  endElement?: React.JSX.Element;
   style?: StyleProp<Omit<ViewStyle, 'borderRadius' | 'padding'>>;
   styles?: Styles;
   onPress?: TouchableHighlightProps['onPress'];
@@ -218,7 +218,7 @@ export function Button({
   loadingColor,
   hitSlop = {top: 8, bottom: 8, left: 8, right: 8},
   hapticFeedback,
-}: Props): JSX.Element {
+}: Props): React.JSX.Element {
   const ref = useRef<React.ElementRef<typeof TouchableHighlight>>(null);
   const hovered = useHover(ref);
   const {theme} = useTheme();
@@ -254,9 +254,9 @@ export function Button({
       children,
       loadingView,
     }: {
-      children: JSX.Element;
-      loadingView: JSX.Element;
-    }): JSX.Element => (
+      children: React.JSX.Element;
+      loadingView: React.JSX.Element;
+    }): React.JSX.Element => (
       <ButtonContainer
         disabled={innerDisabled}
         size={size}

package/components/uis/Checkbox/Checkbox.test.tsx

@@ -9,7 +9,7 @@ import {light} from '../../../utils/colors';
 
 let testingLib: RenderAPI;
 
-const Component = (props?: CheckboxProps): JSX.Element =>
+const Component = (props?: CheckboxProps): React.JSX.Element =>
   createComponent(<Checkbox {...props} />);
 
 describe('[Checkbox]', () => {

package/components/uis/Checkbox/Checkbox.tsx

@@ -31,8 +31,8 @@ export interface CheckboxProps {
   color?: CheckboxColor;
   disabled?: boolean;
   checked?: boolean;
-  endElement?: JSX.Element;
-  startElement?: JSX.Element;
+  endElement?: React.JSX.Element;
+  startElement?: React.JSX.Element;
 }
 
 const Container = styled.TouchableOpacity`
@@ -73,7 +73,7 @@ export function Checkbox({
   disabled = false,
   checked = false,
   onPress,
-}: CheckboxProps): JSX.Element {
+}: CheckboxProps): React.JSX.Element {
   const animatedValue = new Animated.Value(0);
   const fadeAnim = useRef(animatedValue).current;
   const scaleAnim = useRef(animatedValue).current;

package/components/uis/CustomPressable/CustomPressable.tsx

@@ -5,7 +5,7 @@ import {useCPK} from '../../../providers';
 
 export function CustomPressable(
   props: PressableProps & {style?: StyleProp<ViewStyle>},
-): JSX.Element {
+): React.JSX.Element {
   const {children, style, hitSlop} = props;
   const {theme} = useCPK();
 

package/components/uis/EditText/EditText.test.tsx

@@ -17,7 +17,7 @@ jest.mock('react-native-web-hooks', () => ({
 
 let testingLib: RenderAPI;
 
-const Component = (editProps?: EditTextProps): JSX.Element =>
+const Component = (editProps?: EditTextProps): React.JSX.Element =>
   createComponent(<EditText {...editProps} />);
 
 describe('[EditText]', () => {
@@ -60,7 +60,7 @@ describe('[EditText]', () => {
       });
 
       it('renders custom label style', async () => {
-        const renderCustomLabel = (): JSX.Element => {
+        const renderCustomLabel = (): React.JSX.Element => {
           return (
             <Text
               style={{
@@ -279,7 +279,7 @@ describe('[EditText]', () => {
     });
 
     it('should have render custom error', () => {
-      const renderCustomError = (): JSX.Element => <Text>custom error</Text>;
+      const renderCustomError = (): React.JSX.Element => <Text>custom error</Text>;
 
       testingLib = render(
         Component({

package/components/uis/EditText/EditText.tsx

@@ -46,10 +46,10 @@ export type EditTextStatus =
   | 'hovered'
   | 'basic';
 
-type RenderType = (stats: EditTextStatus) => JSX.Element;
+type RenderType = (stats: EditTextStatus) => React.JSX.Element;
 
 type CustomRenderType =
-  | (({color, status}: {color: string; status: EditTextStatus}) => JSX.Element)
+  | (({color, status}: {color: string; status: EditTextStatus}) => React.JSX.Element)
   | null;
 
 export type EditTextProps = {
@@ -59,8 +59,8 @@ export type EditTextProps = {
   styles?: EditTextStyles;
 
   // Component
-  startElement?: JSX.Element | CustomRenderType;
-  endElement?: JSX.Element | CustomRenderType;
+  startElement?: React.JSX.Element | CustomRenderType;
+  endElement?: React.JSX.Element | CustomRenderType;
   required?: boolean;
   label?: string | RenderType;
   error?: string | RenderType;
@@ -146,7 +146,7 @@ export const EditText = forwardRef<TextInput, EditTextProps>(
       required = false,
     }: EditTextProps,
     ref,
-  ): JSX.Element => {
+  ): React.JSX.Element => {
     EditText.displayName = 'EditText';
 
     const {theme} = useTheme();
@@ -194,9 +194,9 @@ export const EditText = forwardRef<TextInput, EditTextProps>(
             ? 'focused'
             : 'basic';
 
-    const renderLabel = useCallback((): JSX.Element | null => {
+    const renderLabel = useCallback((): React.JSX.Element | null => {
       // eslint-disable-next-line react/no-unstable-nested-components
-      function Wrapper({children}: {children: ReactNode}): JSX.Element {
+      function Wrapper({children}: {children: ReactNode}): React.JSX.Element {
         return (
           <View
             style={[
@@ -256,7 +256,7 @@ export const EditText = forwardRef<TextInput, EditTextProps>(
     ]);
 
     const renderContainer = useCallback(
-      (children: ReactNode): JSX.Element => {
+      (children: ReactNode): React.JSX.Element => {
         return (
           <TouchableWithoutFeedback
             onPress={() => inputRef.current?.focus()}
@@ -305,7 +305,7 @@ export const EditText = forwardRef<TextInput, EditTextProps>(
       ],
     );
 
-    const renderInput = useCallback((): JSX.Element | null => {
+    const renderInput = useCallback((): React.JSX.Element | null => {
       return (
         <View
           style={[
@@ -432,7 +432,7 @@ export const EditText = forwardRef<TextInput, EditTextProps>(
       value,
     ]);
 
-    const renderError = useCallback((): JSX.Element | null => {
+    const renderError = useCallback((): React.JSX.Element | null => {
       return error ? (
         typeof error === 'string' ? (
           <Text
@@ -453,7 +453,7 @@ export const EditText = forwardRef<TextInput, EditTextProps>(
       ) : null;
     }, [error, status, styles?.error, theme.text.validation]);
 
-    const renderCounter = useCallback((): JSX.Element | null => {
+    const renderCounter = useCallback((): React.JSX.Element | null => {
       if (hideCounter) {
         return null;
       }
@@ -513,7 +513,7 @@ export const EditText = forwardRef<TextInput, EditTextProps>(
   },
 );
 
-function WebStyles(): JSX.Element {
+function WebStyles(): React.JSX.Element {
   return (
     <Global
       // @ts-ignore

package/components/uis/Fab/Fab.test.tsx

@@ -5,7 +5,7 @@ import {createComponent} from '../../../../test/testUtils';
 import type {IconName} from '../../..';
 import {Fab} from './Fab';
 
-const Component = (props): JSX.Element => createComponent(<Fab {...props} />);
+const Component = (props): React.JSX.Element => createComponent(<Fab {...props} />);
 
 describe('[Fab]', () => {
   it('should render', async () => {

package/components/uis/Fab/Fab.tsx

@@ -42,7 +42,7 @@ function FloatingActionButtons({
   }),
   animationDuration = 200,
   iconButtonProps,
-}: FabProps): JSX.Element {
+}: FabProps): React.JSX.Element {
   const {Fab, FabItem} = styles ?? {};
 
   const spinValue = useRef(new Animated.Value(0));

package/components/uis/Hr/Hr.test.tsx

@@ -8,7 +8,7 @@ import {Hr} from './Hr';
 
 let testingLib: RenderAPI;
 
-const Component = (): JSX.Element =>
+const Component = (): React.JSX.Element =>
   createComponent(
     <View>
       <Hr />

package/components/uis/Icon/Icon.test.tsx

@@ -6,7 +6,7 @@ import {Icon} from './Icon';
 
 let testingLib: RenderAPI;
 
-const Component = (): JSX.Element => createComponent(<Icon name="Person" />);
+const Component = (): React.JSX.Element => createComponent(<Icon name="Person" />);
 
 describe('[Icon]', () => {
   it('should render without crashing', () => {

package/components/uis/IconButton/IconButton.test.tsx

@@ -12,7 +12,7 @@ jest.mock('react-native-web-hooks', () => ({
   useHover: () => true,
 }));
 
-const Component = (props?: IconButtonProps): JSX.Element =>
+const Component = (props?: IconButtonProps): React.JSX.Element =>
   createComponent(<IconButton {...props} />);
 
 describe('[IconButton]', () => {

package/components/uis/IconButton/IconButton.tsx

@@ -92,9 +92,9 @@ export type IconButtonProps = {
   size?: ButtonSizeType | number;
   disabled?: boolean;
   loading?: boolean;
-  loadingElement?: JSX.Element;
+  loadingElement?: React.JSX.Element;
   icon?: IconName;
-  iconElement?: JSX.Element;
+  iconElement?: React.JSX.Element;
   style?: StyleProp<Omit<ViewStyle, 'borderRadius' | 'padding'>>;
   styles?: Styles;
   onPress?: TouchableHighlightProps['onPress'];
@@ -119,7 +119,7 @@ export function IconButton({
   activeOpacity = 0.95,
   touchableHighlightProps,
   hapticFeedback,
-}: IconButtonProps): JSX.Element {
+}: IconButtonProps): React.JSX.Element {
   const ref = useRef<React.ElementRef<typeof TouchableHighlight>>(null);
   const hovered = useHover(ref);
   const {theme} = useTheme();

package/components/uis/LoadingIndicator/LoadingIndicator.tsx

@@ -20,7 +20,7 @@ type Props = {
   color?: string;
   size?: ActivityIndicator["props"]["size"];
   imgSource?: string | ImageSourcePropType;
-  customElement?: JSX.Element | (() => JSX.Element);
+  customElement?: React.JSX.Element | (() => React.JSX.Element);
 };
 
 const Container = styled.View``;
@@ -32,7 +32,7 @@ export function LoadingIndicator({
   size = "large",
   color,
   imgSource,
-}: Props): JSX.Element {
+}: Props): React.JSX.Element {
   const { theme } = useTheme();
 
   const handleImgSourceType = (

package/components/uis/RadioGroup/RadioButton.tsx

@@ -33,8 +33,8 @@ export type RadioButtonProps = {
   type?: RadioButtonType;
   disabled?: boolean;
   selected?: boolean;
-  endElement?: JSX.Element;
-  startElement?: JSX.Element;
+  endElement?: React.JSX.Element;
+  startElement?: React.JSX.Element;
 };
 
 const Container = styled.TouchableOpacity`
@@ -82,7 +82,7 @@ export default function RadioButton({
   onPress,
   label,
   labelPosition = 'right',
-}: RadioButtonProps): JSX.Element {
+}: RadioButtonProps): React.JSX.Element {
   const [innerLayout, setInnerLayout] = useState<LayoutRectangle>();
   const animatedValue = new Animated.Value(0);
   const fadeAnim = useRef(animatedValue).current;

package/components/uis/RadioGroup/RadioGroup.test.tsx

@@ -8,7 +8,7 @@ import RadioButton from './RadioButton';
 import {type RadioButtonType, RadioGroup} from './RadioGroup';
 
 let props: any;
-let component: JSX.Element;
+let component: React.JSX.Element;
 let testingLib: RenderAPI;
 
 const data = ['Person', 'Animal', 'Bird', 'Other'];

package/components/uis/RadioGroup/RadioGroup.tsx

@@ -55,7 +55,7 @@ function RadioGroupContainer<T>({
   labels,
   labelPosition,
   radioType,
-}: Omit<Props<T>, 'selected'>): JSX.Element {
+}: Omit<Props<T>, 'selected'>): React.JSX.Element {
   return (
     <Container style={style}>
       <Typography.Heading3 style={styles?.title}>{title}</Typography.Heading3>

package/components/uis/Rating/Rating.test.tsx

@@ -5,7 +5,7 @@ import type {RatingProps} from './Rating';
 import {Rating} from './Rating';
 import {createComponent} from '../../../../test/testUtils';
 
-const Component = (props?: RatingProps): JSX.Element =>
+const Component = (props?: RatingProps): React.JSX.Element =>
   createComponent(<Rating {...props} />);
 
 describe('Rating', () => {

package/components/uis/Rating/Rating.tsx

@@ -47,7 +47,7 @@ export function Rating({
   allowHalfRating = true,
   disabled = false,
   color,
-}: RatingProps): JSX.Element {
+}: RatingProps): React.JSX.Element {
   const [rating, setRating] = useState(initialRating);
   const iconPrefix = iconType === 'star' ? 'Star' : 'QuestBox';
 
@@ -67,7 +67,7 @@ export function Rating({
   }: {
     key: string;
     position: number;
-  }): JSX.Element => {
+  }): React.JSX.Element => {
     const filled = rating >= position + (allowHalfRating ? 0.5 : 0);
     const iconName: IconName = filled ? `${iconPrefix}Fill` : `${iconPrefix}`;
     const halfFilled =

package/components/uis/StatusbarBrightness/StatusBarBrightness.test.tsx

@@ -9,7 +9,7 @@ import {ThemeProvider} from '../../../providers/ThemeProvider';
 
 let testingLib: RenderAPI;
 
-const Component = (): JSX.Element =>
+const Component = (): React.JSX.Element =>
   createComponent(
     <View>
       <StatusBarBrightness />

package/components/uis/StatusbarBrightness/StatusBarBrightness.tsx

@@ -2,7 +2,7 @@ import type {StatusBarStyle} from 'react-native';
 import {StatusBar} from 'react-native';
 import {useTheme} from '../../../providers/ThemeProvider';
 
-function StatusBarBrightness({type}: {type?: StatusBarStyle}): JSX.Element {
+function StatusBarBrightness({type}: {type?: StatusBarStyle}): React.JSX.Element {
   const {themeType} = useTheme();
 
   const statusColor: StatusBarStyle = type

package/components/uis/SwitchToggle/SwitchToggle.test.tsx

@@ -27,7 +27,7 @@ describe('[SwitchToggle]', () => {
     expect(handlePress).toBeCalled();
   });
 
-  const getSwitchToggle = ({isOn}: {isOn: boolean}): JSX.Element =>
+  const getSwitchToggle = ({isOn}: {isOn: boolean}): React.JSX.Element =>
     createComponent(
       <SwitchToggle
         isOn={isOn}

package/components/uis/SwitchToggle/SwitchToggle.tsx

@@ -84,7 +84,7 @@ export function SwitchToggle({
   size = 'medium',
   offElement,
   onPress,
-}: Props): JSX.Element {
+}: Props): React.JSX.Element {
   const {theme} = useTheme();
 
   const {

package/components/uis/Typography/Typography.test.tsx

@@ -9,7 +9,7 @@ import {ThemeProvider} from '../../../providers/ThemeProvider';
 
 let testingLib: RenderAPI;
 
-const Component = (): JSX.Element =>
+const Component = (): React.JSX.Element =>
   createComponent(
     <View>
       <Typography.Title />,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpk-ui",
-  "version": "0.1.15",
+  "version": "0.2.0",
   "main": "index",
   "react-native": "index",
   "module": "index",

package/providers/ThemeProvider.tsx

@@ -32,7 +32,7 @@ export type ThemeContext = {
 const [useCtx, CpkProvider] = createCtx<ThemeContext>();
 
 export type ThemeProps = {
-  children?: JSX.Element;
+  children?: React.JSX.Element;
   initialThemeType?: ThemeType;
   customTheme?: ThemeParam;
   /*
@@ -104,7 +104,7 @@ export function ThemeProvider({
   initialThemeType,
   customTheme = {},
   responsiveDesignMode = "mobile-first",
-}: ThemeProps): JSX.Element {
+}: ThemeProps): React.JSX.Element {
   const isPortrait = useMediaQuery({ orientation: "portrait" });
 
   const isMobile = useMediaQuery(

package/providers/index.js

@@ -9,7 +9,7 @@ import Snackbar from '../components/modals/Snackbar/Snackbar';
 import AlertDialog from '../components/modals/AlertDialog/AlertDialog';
 import { LoadingIndicator } from '../components/uis/LoadingIndicator/LoadingIndicator';
 const [useCtx, Provider] = createCtx();
-function AppProvider({ children }) {
+function AppProvider({ children, }) {
     const [assetLoaded] = useFonts({
         cpk: require('../components/uis/Icon/cpk.ttf'),
         'Pretendard-Bold': require('../components/uis/Icon/Pretendard-Bold.otf'),
@@ -17,8 +17,8 @@ function AppProvider({ children }) {
         'Pretendard-Thin': require('../components/uis/Icon/Pretendard-Thin.otf'),
     });
     const themeContext = useTheme();
-    const snackbar = useRef();
-    const alertDialog = useRef();
+    const snackbar = useRef(undefined);
+    const alertDialog = useRef(undefined);
     /**
      ** Snackbar
      */

package/providers/index.tsx

@@ -31,7 +31,11 @@ export type CpkContext = {
 
 const [useCtx, Provider] = createCtx<CpkContext>();
 
-function AppProvider({children}: {children: JSX.Element}): JSX.Element {
+function AppProvider({
+  children,
+}: {
+  children: React.JSX.Element;
+}): React.JSX.Element {
   const [assetLoaded] = useFonts({
     cpk: require('../components/uis/Icon/cpk.ttf'),
     'Pretendard-Bold': require('../components/uis/Icon/Pretendard-Bold.otf'),
@@ -41,11 +45,13 @@ function AppProvider({children}: {children: JSX.Element}): JSX.Element {
 
   const themeContext = useTheme();
 
-  const snackbar =
-    useRef<SnackbarContext>() as MutableRefObject<SnackbarContext>;
+  const snackbar = useRef<SnackbarContext>(
+    undefined,
+  ) as MutableRefObject<SnackbarContext>;
 
-  const alertDialog =
-    useRef<AlertDialogContext>() as MutableRefObject<AlertDialogContext>;
+  const alertDialog = useRef<AlertDialogContext>(
+    undefined,
+  ) as MutableRefObject<AlertDialogContext>;
 
   /**
    ** Snackbar
@@ -109,10 +115,10 @@ function AppProvider({children}: {children: JSX.Element}): JSX.Element {
 export type CpkProviderProps = {
   themeConfig?: Omit<ThemeProps, 'children'>;
   snackbarConfig?: SnackbarOptions;
-  children: JSX.Element;
+  children: React.JSX.Element;
 };
 
-function CpkWithThemeProvider(props: CpkProviderProps): JSX.Element {
+function CpkWithThemeProvider(props: CpkProviderProps): React.JSX.Element {
   const {themeConfig} = props;
 
   return (

package/utils/guards.js

@@ -24,7 +24,7 @@ const getRootElementStyleType = (element) => {
  * This function applies default colors to cloned element.
  *
  * @param {CloneElemColorsParams} params
- * @returns {JSX.Element} - Cloned element with default colors if exists. Otherwise, null.
+ * @returns {React.JSX.Element} - Cloned element with default colors if exists. Otherwise, null.
  */
 export const cloneElemWithDefaultColors = ({ element, color, backgroundColor, style, }) => {
     return element

package/utils/guards.ts

@@ -14,7 +14,7 @@ import {
 import {Icon} from '../components/uis/Icon/Icon';
 
 const getRootElementStyleType = (
-  element: JSX.Element,
+  element: React.JSX.Element,
 ): 'TextStyle' | 'ViewStyle' | 'unknown' => {
   if (React.isValidElement(element)) {
     if (
@@ -45,7 +45,7 @@ type CloneElemColorsParams = {
   /**
    * ReactElement to be cloned to shape default colors.
    */
-  element?: JSX.Element;
+  element?: React.JSX.Element;
   /**
    * Text color to be applied.
    * If not passed, default color will be applied.
@@ -68,14 +68,14 @@ type CloneElemColorsParams = {
  * This function applies default colors to cloned element.
  *
  * @param {CloneElemColorsParams} params
- * @returns {JSX.Element} - Cloned element with default colors if exists. Otherwise, null.
+ * @returns {React.JSX.Element} - Cloned element with default colors if exists. Otherwise, null.
  */
 export const cloneElemWithDefaultColors = ({
   element,
   color,
   backgroundColor,
   style,
-}: CloneElemColorsParams): JSX.Element | null => {
+}: CloneElemColorsParams): React.JSX.Element | null => {
   return element
     ? cloneElement(element, {
         style: [