refactor(Input): simplify typing of rightIcon prop

Author: TylerAPfledderer

src/components/Input/Input.stories.tsx

@@ -18,8 +18,8 @@ type Story = StoryObj<InputType>
 export const Sizes: Story = {
   render: () => (
     <VStack width="154px">
-      <Input rightIcon={BsSlashSquare} placeholder="Search" />
-      <Input rightIcon={BsSlashSquare} placeholder="Search" size="sm" />
+      <Input rightIcon={<BsSlashSquare />} placeholder="Search" />
+      <Input rightIcon={<BsSlashSquare />} placeholder="Search" size="sm" />
     </VStack>
   ),
 }
@@ -28,8 +28,12 @@ export const ElementVariations: Story = {
   render: () => (
     <VStack width="258px" spacing={4}>
       <Input placeholder="input text" />
-      <Input rightIcon={BsSlashSquare} placeholder="input text" />
-      <Input rightIcon={BsSlashSquare} placeholder="input text" isDisabled />
+      <Input rightIcon={<BsSlashSquare />} placeholder="input text" />
+      <Input
+        rightIcon={<BsSlashSquare />}
+        placeholder="input text"
+        isDisabled
+      />
     </VStack>
   ),
 }

src/components/Input/index.tsx

@@ -1,15 +1,11 @@
 import * as React from "react"
 import {
-  Icon,
   Input as ChakraInput,
   InputGroup,
   InputGroupProps,
   InputProps as ChakraInputProps,
   InputRightElement,
 } from "@chakra-ui/react"
-import { IconType } from "react-icons/lib"
-
-type RightIconType = IconType | typeof Icon
 
 type CommonProps = ChakraInputProps
 
@@ -19,7 +15,7 @@ type WithIconProps = CommonProps & {
   /**
    * The Icon used to render `InputRightElement` on the right side of the input
    */
-  rightIcon: RightIconType
+  rightIcon?: JSX.Element
   /**
    * Primarily for style props to be applied to the wrapper
    */
@@ -36,7 +32,7 @@ function Input(props: InputProps) {
     return (
       <InputGroup size={size} {...inputGroupProps}>
         <ChakraInput data-peer {...rest} />
-        <InputRightElement children={<Icon />} />
+        <InputRightElement children={Icon} />
       </InputGroup>
     )
   }