Change:
onChange: func value?: string componentClass?: string placeholder?: string name?: string required?: string rows?: 4 type?: 'text' 'url'FormControl FormControl.Feedback
Form control for chapter: Need to alter the props to account for chapter needs, here is the link to the chakira component
Which prop is being used in the chapter that we are not passing in the component library? Since chapter views are limited, it might be easier to create the components with learn specifications and use those props to control the component. does that make senes?
Instead of checking the chaikra library and comparing it with the current component, I am better off checking chapter itself for prop it's using. for example, in this file we are using and , so I note these down and check if these 2 props are different from the props we are using. depend on how different they are, I may do from the follow: Add new value to existing prop. Add new prop to the component. Do nothing.
Here is what I propose we do. We could continue building the components with the learn spec and ship them. For the second sprint, we collect the Chapter requirements and update the components accordingly.

Discussion:
import React, { useContext } from 'react'; import { FormContext } from '../form-group/form-group'; <del> import { FormControlFeedback as Feedback } from './form-control-feedback'; import { FormControlStatic as Static } from './form-control-static'; </del> <ins> import { FormControlFeedback } from './form-control-feedback'; import { FormControlStatic } from './form-control-static'; </ins> import { FormControlProps } from './types'; // Uses controlId from <FormGroup> if not explicitly specified. // type Only relevant if componentClass is 'input'. <ins> let variantClass: string; const defaultClasses = 'outline-0 block w-full py-1.5 px-2.5 text-md text-foreground-primary ' + 'bg-background-primary bg-none rounded-none border-1 border-solid ' + 'border-background-quaternary shadow-none ' + 'transition ease-in-out duration-150 focus:border-foreground-tertiary'; </ins> const FormControl = ({ id,

}: FormControlProps): JSX.Element => { const { controlId } = useContext(FormContext); <del> const defaultClasses = 'outline-0 block w-full py-1.5 px-2.5 text-md text-foreground-primary ' + 'bg-background-primary bg-none rounded-none border-1 border-solid ' + 'border-background-quaternary shadow-none ' + 'transition ease-in-out duration-150 focus:border-foreground-tertiary'; </del> const Component = componentClass || 'input'; <del> let variantClass; </del> if (Component !== 'textarea') variantClass = ' h-8'; //row and componentClass

); }; <del> const MainFormControl = Object.assign(FormControl, { Feedback, Static }); </del> <ins> FormControl.Feedback = FormControlFeedback; FormControl.Static = FormControlStatic; </ins> <del> export { MainFormControl as FormControl }; </del> <ins> export { FormControl }; </ins>

readonly?: never; } | { <del> value: string; </del> <ins> value?: string; </ins> onChange?: never; readonly: boolean; } | { <del> value: string; </del> <ins> value?: string; </ins> onChange: (event: React.ChangeEvent<FormControlElement>) => void; readonly?: never; }; export type FormControlProps = React.HTMLAttributes<FormControlElement> & { <del> id?: string; className?: string; </del> testId?: string; componentClass?: 'textarea' | 'input'; <del> placeholder?: string; </del> name?: string; required?: boolean; rows?: number; type?: 'text' | 'email' | 'url'; } & ChangibleValues; <del> export interface FormControlVariationProps { className?: string; children?: React.ReactNode; id?: string; testId?: string; } </del> <ins> export type FormControlVariationProps = Pick< FormControlProps, 'className' | 'children' | 'id' | 'testId' >; </ins>