Update button, paragraph, and inputformfield components

Author: Phil Hess

src/atoms/buttons/button.tsx

@@ -2,7 +2,7 @@ import { ButtonSizes } from "../constants/button-sizes";
 import { ButtonStyles } from "../constants/button-styles";
 import { ButtonTypes } from "../constants/button-types";
 import { AccessibilityLabels } from "../../enums/accessibility-labels";
-import React, { forwardRef } from "react";
+import React, { forwardRef, PropsWithChildren, Ref } from "react";
 import { StringUtils } from "andculturecode-javascript-core";
 import "./button.scss";
 
@@ -38,10 +38,8 @@ export interface ButtonProps {
 // #region Component
 // -----------------------------------------------------------------------------------------
 
-const Button: React.RefForwardingComponent<
-    HTMLButtonElement,
-    ButtonProps
-> = forwardRef((props: ButtonProps, ref: React.Ref<HTMLButtonElement>) => {
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+    (props: PropsWithChildren<ButtonProps>, ref: Ref<HTMLButtonElement>) => {
     const {
         accessibleText,
         ariaControls,

src/atoms/typography/paragraph.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, PropsWithChildren, Ref } from "react";
 import { ParagraphSizes } from "../constants/paragraph-sizes";
 import { StringUtils } from "andculturecode-javascript-core";
 
@@ -21,11 +21,8 @@ export interface ParagraphProps {
 // #region Component
 // -------------------------------------------------------------------------------------------------
 
-const Paragraph: React.RefForwardingComponent<
-    HTMLParagraphElement,
-    ParagraphProps
-> = forwardRef(
-    (props: ParagraphProps, ref: React.Ref<HTMLParagraphElement>) => {
+const Paragraph = forwardRef<HTMLParagraphElement, ParagraphProps>(
+    (props: PropsWithChildren<ParagraphProps>, ref: Ref<HTMLParagraphElement>) => {
         let cssClassNames: Array<any> = [];
 
         if (StringUtils.hasValue(props.cssClassName)) {

src/molecules/form-fields/input-form-field.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, Ref, RefObject } from "react";
+import React, { forwardRef, PropsWithChildren, Ref, RefObject } from "react";
 import uuid from "uuid";
 import { AccessibilityLabels } from "../../enums/accessibility-labels";
 import { CollectionUtils, StringUtils } from "andculturecode-javascript-core";
@@ -45,10 +45,8 @@ export interface InputFormFieldProps extends InputProperties {
 // #region Component
 // -----------------------------------------------------------------------------------------
 
-const InputFormField: React.RefForwardingComponent<
-    HTMLInputElement,
-    InputFormFieldProps
-> = forwardRef((props: InputFormFieldProps, ref: Ref<HTMLInputElement>) => {
+const InputFormField = forwardRef<HTMLInputElement, InputFormFieldProps>(
+    (props: PropsWithChildren<InputFormFieldProps>, ref: Ref<HTMLInputElement>) => {
     const {
         disabled,
         errorMessage,