@homefile/components-v2 2.14.1 → 2.14.2

package/dist/components/forms/dynamicForm/DynamicForm.js

@@ -30,6 +30,7 @@ export const DynamicForm = (_a) => {
                             value,
                             icon: icon ? fieldIcons[icon] : undefined,
                             placeholder: Boolean(name) ? name : description,
+                            label: name !== null && name !== void 0 ? name : description,
                         };
                         const fieldWithDeleteBaseProps = {
                             id,

package/dist/components/forms/dynamicForm/fields/CurrencyField.d.ts

@@ -1,2 +1,2 @@
 import { TextFieldI } from '../../../../interfaces';
-export declare const CurrencyField: ({ id, icon, placeholder, value }: TextFieldI) => import("react/jsx-runtime").JSX.Element;
+export declare const CurrencyField: ({ label, id, icon, placeholder, value, }: TextFieldI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/dynamicForm/fields/CurrencyField.js

@@ -3,7 +3,7 @@ import { Controller, useFormContext } from 'react-hook-form';
 import { Flex, Input } from '@chakra-ui/react';
 import { FormIcon, LabeledField } from '../../..';
 import { formatCurrency } from '../../../../utils';
-export const CurrencyField = ({ id, icon, placeholder, value }) => {
+export const CurrencyField = ({ label, id, icon, placeholder, value, }) => {
     const { control } = useFormContext();
     return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", children: [_jsx(FormIcon, { icon: icon }), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
                     const handleChange = (e) => {
@@ -12,6 +12,6 @@ export const CurrencyField = ({ id, icon, placeholder, value }) => {
                         const currency = formatCurrency({ value: number });
                         onChange(currency);
                     };
-                    return (_jsx(LabeledField, { label: String(placeholder), children: _jsx(Input, { onChange: handleChange, placeholder: placeholder, textAlign: "right", value: value, _placeholder: { color: 'gray.2' } }) }));
+                    return (_jsx(LabeledField, { label: label, children: _jsx(Input, { onChange: handleChange, placeholder: placeholder, textAlign: "right", value: value, _placeholder: { color: 'gray.2' } }) }));
                 } })] }));
 };

package/dist/components/forms/dynamicForm/fields/DateField.d.ts

@@ -1,2 +1,2 @@
 import { DateFieldI } from '../../../../interfaces';
-export declare const DateField: ({ id, icon, name, placeholder, showCalendarIcon, value, width, }: DateFieldI) => import("react/jsx-runtime").JSX.Element;
+export declare const DateField: ({ id, icon, name, placeholder, label, showCalendarIcon, value, width, }: DateFieldI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/dynamicForm/fields/DateField.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Controller, useFormContext } from 'react-hook-form';
 import { Flex, Text } from '@chakra-ui/react';
 import { DatePicker, FormIcon } from '../../..';
-export const DateField = ({ id, icon, name, placeholder, showCalendarIcon = true, value, width, }) => {
+export const DateField = ({ id, icon, name, placeholder, label, showCalendarIcon = true, value, width, }) => {
     const { control } = useFormContext();
     return (_jsxs(Flex, { align: "center", gap: "base", w: "full", children: [name && (_jsxs(Flex, { align: "center", gap: "base", flexShrink: 0, children: [_jsx(FormIcon, { icon: icon }), _jsx(Text, { fontFamily: "secondary", noOfLines: 1, overflow: "hidden", children: name })] })), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
-                    return (_jsx(DatePicker, { onChange: onChange, showCalendarIcon: showCalendarIcon, placeholder: name ? '' : placeholder, value: value, width: width }));
+                    return (_jsx(DatePicker, { onChange: onChange, showCalendarIcon: showCalendarIcon, placeholder: name ? '' : placeholder, value: value, width: width, label: label }));
                 } })] }));
 };

package/dist/components/forms/dynamicForm/fields/GridField.js

@@ -8,7 +8,8 @@ export const GridField = ({ children, onRemove, onUpload }) => {
             const baseProps = {
                 id,
                 value,
-                placeholder: name && name !== '' ? name : description,
+                placeholder: name !== null && name !== void 0 ? name : description,
+                label: name !== null && name !== void 0 ? name : description,
                 icon: icon ? fieldIcons[icon] : undefined,
             };
             switch (type) {

package/dist/components/forms/dynamicForm/fields/LabeledField.d.ts

@@ -1,6 +1,6 @@
 interface LabeledFieldProps {
     children: React.ReactNode;
-    label: string;
+    label?: string;
 }
 export declare const LabeledField: ({ label, children }: LabeledFieldProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/forms/dynamicForm/fields/NumberField.d.ts

@@ -1,2 +1,2 @@
 import { TextFieldI } from '../../../../interfaces';
-export declare const NumberField: ({ description, id, icon, placeholder, value, }: TextFieldI) => import("react/jsx-runtime").JSX.Element;
+export declare const NumberField: ({ id, label, placeholder, value }: TextFieldI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/dynamicForm/fields/NumberField.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Controller, useFormContext } from 'react-hook-form';
 import { Flex, Input } from '@chakra-ui/react';
 import { LabeledField } from '../../..';
-export const NumberField = ({ description, id, icon, placeholder, value, }) => {
+export const NumberField = ({ id, label, placeholder, value }) => {
     const { control } = useFormContext();
     return (_jsx(Flex, { align: "center", gap: "base", flex: "auto", children: _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
-                return (_jsx(LabeledField, { label: String(!description && placeholder), children: _jsx(Input, { onChange: (e) => {
+                return (_jsx(LabeledField, { label: label, children: _jsx(Input, { onChange: (e) => {
                             const value = e.target.valueAsNumber;
                             const isNumber = !isNaN(value);
                             if (!isNumber) {

package/dist/components/forms/dynamicForm/fields/SelectField.d.ts

@@ -1,2 +1,2 @@
 import { SelectFieldI } from '../../../../interfaces';
-export declare const SelectField: ({ description, id, icon, options, placeholder, value, }: SelectFieldI) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectField: ({ description, id, label, options, placeholder, value, }: SelectFieldI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/dynamicForm/fields/SelectField.js

@@ -2,11 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Controller, useFormContext } from 'react-hook-form';
 import { Box, Flex } from '@chakra-ui/react';
 import { SelectInput } from '../../..';
-export const SelectField = ({ description, id, icon, options, placeholder, value, }) => {
+export const SelectField = ({ description, id, label, options, placeholder, value, }) => {
     var _a;
     const { control } = useFormContext();
     const stringOptions = (_a = options === null || options === void 0 ? void 0 : options.map((option) => String(option))) !== null && _a !== void 0 ? _a : [];
     return (_jsx(Flex, { align: "start", gap: "base", flex: "auto", w: description ? '100%' : '40%', children: _jsx(Box, { w: description ? '102px' : '100%', children: _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
-                    return (_jsx(SelectInput, { handleClick: onChange, height: "md", initialValue: value !== null && value !== void 0 ? value : stringOptions[0], items: stringOptions, placeholder: !description ? placeholder : '', width: "100%" }));
+                    return (_jsx(SelectInput, { handleClick: onChange, height: "md", initialValue: value !== null && value !== void 0 ? value : stringOptions[0], items: stringOptions, placeholder: !description ? placeholder : '', label: label, width: "100%" }));
                 } }) }) }));
 };

package/dist/components/forms/dynamicForm/fields/SingleFields.js

@@ -8,6 +8,7 @@ export const SingleFields = ({ callback, fields, menuItems }) => {
                 id,
                 icon: icon ? fieldIcons[icon] : undefined,
                 placeholder: name,
+                label: name,
                 value,
             };
             switch (type) {

package/dist/components/forms/dynamicForm/fields/TextAreaField.d.ts

@@ -1,4 +1,4 @@
 import { TextAreaFieldI } from '../../../../interfaces';
 import 'react-quill-new/dist/quill.snow.css';
 import '../../../../styles/quill.css';
-export declare const TextAreaField: ({ id, icon, placeholder, value, }: TextAreaFieldI) => import("react/jsx-runtime").JSX.Element;
+export declare const TextAreaField: ({ id, label, placeholder, value, }: TextAreaFieldI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/dynamicForm/fields/TextAreaField.js

@@ -5,10 +5,10 @@ import QuillEditor from 'react-quill-new';
 import 'react-quill-new/dist/quill.snow.css';
 import '../../../../styles/quill.css';
 import { LabeledField } from './LabeledField';
-export const TextAreaField = ({ id, icon, placeholder = '', value, }) => {
+export const TextAreaField = ({ id, label, placeholder = '', value, }) => {
     const { control } = useFormContext();
     return (_jsx(Flex, { gap: "base", align: "start", flex: "auto", children: _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
-                return (_jsx(LabeledField, { label: placeholder, children: _jsx(QuillEditor, { theme: "snow", value: value, formats: formats, modules: { toolbar }, onChange: onChange, placeholder: placeholder }) }));
+                return (_jsx(LabeledField, { label: label, children: _jsx(QuillEditor, { theme: "snow", value: value, formats: formats, modules: { toolbar }, onChange: onChange, placeholder: placeholder }) }));
             } }) }));
 };
 const formats = [

package/dist/components/forms/dynamicForm/fields/TextField.d.ts

@@ -1,2 +1,2 @@
 import { TextFieldI } from '../../../../interfaces';
-export declare const TextField: ({ id, icon, placeholder, type, value, }: TextFieldI) => import("react/jsx-runtime").JSX.Element;
+export declare const TextField: ({ id, placeholder, label, type, value, }: TextFieldI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/dynamicForm/fields/TextField.js

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Controller, useFormContext } from 'react-hook-form';
 import { Flex } from '@chakra-ui/react';
 import { TextInput } from '../../..';
-export const TextField = ({ id, icon, placeholder = '', type = 'text', value, }) => {
+export const TextField = ({ id, placeholder = '', label, type = 'text', value, }) => {
     const { control } = useFormContext();
     return (_jsx(Flex, { align: "center", gap: "base", flex: "auto", children: _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
-                return (_jsx(TextInput, { handleChange: onChange, placeholder: placeholder, type: type, value: value }));
+                return (_jsx(TextInput, { handleChange: onChange, placeholder: placeholder, type: type, value: value, label: label }));
             } }) }));
 };

package/dist/components/inputs/DatePicker.d.ts

@@ -1,4 +1,4 @@
 import 'react-datepicker/dist/react-datepicker.css';
 import '../../styles/calendar.css';
 import { DatePickerI } from '../../interfaces';
-export declare const DatePicker: ({ onChange, placeholder, showCalendarIcon, value, width, }: DatePickerI) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: ({ onChange, placeholder, label, showCalendarIcon, value, width, }: DatePickerI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/DatePicker.js

@@ -7,7 +7,7 @@ import { Flex, IconButton, Input } from '@chakra-ui/react';
 import { Calendar as CalendarIcon, LabeledField } from '..';
 import { colors } from '../../theme/colors';
 import { extractDayMonthYear, joinDayMonthYear } from '../../utils';
-export const DatePicker = ({ onChange, placeholder, showCalendarIcon, value, width = '290px', }) => {
+export const DatePicker = ({ onChange, placeholder, label, showCalendarIcon, value, width = '290px', }) => {
     const formatedValue = extractDayMonthYear(value);
     const [day, setDay] = useState(formatedValue
         ? new Date(formatedValue.year, formatedValue.month - 1, formatedValue.day)
@@ -38,7 +38,7 @@ export const DatePicker = ({ onChange, placeholder, showCalendarIcon, value, wid
         }
     }, [value]);
     const renderCustomInput = () => {
-        return (_jsxs(Flex, { gap: "base", w: width, children: [_jsx(LabeledField, { label: String(placeholder), children: _jsx(Input, { placeholder: placeholder || 'MM/DD/YYYY', onChange: handleInputChange, _placeholder: { color: 'gray.2' }, value: value }) }), showCalendarIcon && (_jsx(IconButton, { "aria-label": "Calendar icon", variant: "iconOutlined", icon: _jsx(CalendarIcon, { size: 28, stroke: colors.blue[3] }), maxH: "input.md", flexShrink: 0 }))] }));
+        return (_jsxs(Flex, { gap: "base", w: width, children: [_jsx(LabeledField, { label: label, children: _jsx(Input, { placeholder: placeholder || 'MM/DD/YYYY', onChange: handleInputChange, _placeholder: { color: 'gray.2' }, value: value }) }), showCalendarIcon && (_jsx(IconButton, { "aria-label": "Calendar icon", variant: "iconOutlined", icon: _jsx(CalendarIcon, { size: 28, stroke: colors.blue[3] }), maxH: "input.md", flexShrink: 0 }))] }));
     };
     return (_jsx(DatePickerComponent, { selected: day, onChange: handleOnChange, customInput: renderCustomInput(), calendarClassName: "custom-calendar" }));
 };

package/dist/components/inputs/SelectInput.d.ts

@@ -1,2 +1,2 @@
 import { SelectI } from '../../interfaces';
-export declare const SelectInput: ({ filterValue, handleClick, handleFilter, hasFilter, height, initialValue, isDisabled, items, placeholder, variant, width, }: SelectI) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectInput: ({ filterValue, handleClick, handleFilter, hasFilter, height, initialValue, isDisabled, items, label, variant, width, }: SelectI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/SelectInput.js

@@ -5,12 +5,12 @@ import { Menu, Text, Input, InputGroup, InputRightElement, Box, } from '@chakra-
 import { textOptionVariants } from '../../helpers';
 import { LabeledField, SearchIcon, SelectButton, SelectItem, SelectList, } from '..';
 import { colors } from '../../theme/colors';
-export const SelectInput = ({ filterValue = '', handleClick, handleFilter = () => null, hasFilter, height = 'sm', initialValue = 'All', isDisabled, items, placeholder, variant = 'primary', width = '10rem', }) => {
+export const SelectInput = ({ filterValue = '', handleClick, handleFilter = () => null, hasFilter, height = 'sm', initialValue = 'All', isDisabled, items, label, variant = 'primary', width = '10rem', }) => {
     const [selectedValue, setSelectedValue] = useState(initialValue);
     useEffect(() => {
         setSelectedValue(initialValue);
     }, [initialValue]);
-    return (_jsxs(Menu, { children: [_jsx(LabeledField, { label: String(placeholder), children: _jsx(Box, { w: "100%", children: _jsx(SelectButton, { selectedValue: selectedValue, height: height, isDisabled: isDisabled, variant: variant, width: width }) }) }), _jsxs(SelectList, { children: [hasFilter && (_jsxs(InputGroup, { size: "md", w: "100%", px: "2", pb: "2", children: [_jsx(Input, { variant: "filled", bg: "lightBlue.2", pr: "4.5rem", placeholder: t('forms.search'), value: String(filterValue), onChange: handleFilter }), _jsx(InputRightElement, { mr: "base", children: _jsx(SearchIcon, { size: 26, stroke: colors.gray[3] }) })] })), items === null || items === void 0 ? void 0 : items.map((item) => {
+    return (_jsxs(Menu, { children: [_jsx(LabeledField, { label: label, children: _jsx(Box, { w: "100%", children: _jsx(SelectButton, { selectedValue: selectedValue, height: height, isDisabled: isDisabled, variant: variant, width: width }) }) }), _jsxs(SelectList, { children: [hasFilter && (_jsxs(InputGroup, { size: "md", w: "100%", px: "2", pb: "2", children: [_jsx(Input, { variant: "filled", bg: "lightBlue.2", pr: "4.5rem", placeholder: t('forms.search'), value: String(filterValue), onChange: handleFilter }), _jsx(InputRightElement, { mr: "base", children: _jsx(SearchIcon, { size: 26, stroke: colors.gray[3] }) })] })), items === null || items === void 0 ? void 0 : items.map((item) => {
                         const isSelectItem = typeof item === 'object';
                         const id = isSelectItem ? item._id : item;
                         const name = isSelectItem ? item.name : item;

package/dist/components/inputs/TextInput.d.ts

@@ -1,2 +1,2 @@
 import { InputI } from '../../interfaces';
-export declare const TextInput: ({ autoCapitalize, autoCorrect, errorMessage, handleChange, hasError, id, isDisabled, placeholder, value, type, ...props }: InputI) => import("react/jsx-runtime").JSX.Element;
+export declare const TextInput: ({ autoCapitalize, autoCorrect, errorMessage, handleChange, hasError, id, isDisabled, label, placeholder, value, type, ...props }: InputI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/TextInput.js

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FormControl, Text, Input } from '@chakra-ui/react';
 import { LabeledField } from '..';
 export const TextInput = (_a) => {
-    var { autoCapitalize = 'on', autoCorrect = 'on', errorMessage, handleChange, hasError, id, isDisabled, placeholder, value = '', type = 'text' } = _a, props = __rest(_a, ["autoCapitalize", "autoCorrect", "errorMessage", "handleChange", "hasError", "id", "isDisabled", "placeholder", "value", "type"]);
+    var { autoCapitalize = 'on', autoCorrect = 'on', errorMessage, handleChange, hasError, id, isDisabled, label, placeholder, value = '', type = 'text' } = _a, props = __rest(_a, ["autoCapitalize", "autoCorrect", "errorMessage", "handleChange", "hasError", "id", "isDisabled", "label", "placeholder", "value", "type"]);
     const error = hasError && !isDisabled;
-    return (_jsxs(FormControl, { isInvalid: error, children: [_jsx(LabeledField, { label: placeholder, children: _jsx(Input, Object.assign({}, props, { autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, id: id, placeholder: placeholder, value: value, type: type, onChange: handleChange, isInvalid: error, isDisabled: isDisabled, _placeholder: { color: 'gray.2' } })) }), error && _jsx(Text, { variant: "error", children: errorMessage })] }));
+    return (_jsxs(FormControl, { isInvalid: error, children: [_jsx(LabeledField, { label: label, children: _jsx(Input, Object.assign({}, props, { autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, id: id, placeholder: placeholder, value: value, type: type, onChange: handleChange, isInvalid: error, isDisabled: isDisabled, _placeholder: { color: 'gray.2' } })) }), error && _jsx(Text, { variant: "error", children: errorMessage })] }));
 };

package/dist/interfaces/forms/dynamicForm/fields/DateField.interface.d.ts

@@ -4,6 +4,7 @@ export interface DateFieldI {
     icon?: string;
     name?: string;
     placeholder?: string;
+    label?: string;
     showCalendarIcon?: boolean;
     type?: 'text' | 'email' | 'password' | 'number' | 'tel';
     value: ReportI['value'];

package/dist/interfaces/forms/dynamicForm/fields/SelectField.interface.d.ts

@@ -3,5 +3,6 @@ export interface SelectFieldI extends FieldDescriptionI {
     id: string;
     options: ReportI['options'];
     placeholder?: string;
+    label?: string;
     value: ReportI['value'];
 }

package/dist/interfaces/forms/dynamicForm/fields/TextAreaField.interface.d.ts

@@ -2,6 +2,7 @@ import { ReportI } from '../../..';
 export interface TextAreaFieldI {
     id: string;
     icon?: string;
+    label?: string;
     placeholder?: string;
     value: ReportI['value'];
 }

package/dist/interfaces/forms/dynamicForm/fields/TextField.interface.d.ts

@@ -2,6 +2,7 @@ import { FieldDescriptionI, ReportI } from '../../..';
 export interface TextFieldI extends FieldDescriptionI {
     id: string;
     placeholder?: string;
+    label?: string;
     type?: 'text' | 'email' | 'password' | 'number' | 'tel';
     value: ReportI['value'];
 }

package/dist/interfaces/inputs/DatePicker.interface.d.ts

@@ -1,6 +1,7 @@
 export interface DatePickerI {
     onChange: (date: string) => void;
     placeholder?: string;
+    label?: string;
     showCalendarIcon?: boolean;
     value: string;
     width?: string;

package/dist/interfaces/inputs/Input.interface.d.ts

@@ -6,6 +6,7 @@ export interface InputI extends InputProps {
     handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     hasError?: boolean;
     id?: string;
+    label?: string;
     isDisabled?: boolean;
     placeholder: string;
     value: string;

package/dist/interfaces/inputs/Select.interface.d.ts

@@ -11,6 +11,7 @@ export interface SelectI {
     initialValue?: string;
     isDisabled?: boolean;
     items: SelectItemI[] | string[];
+    label?: string;
     placeholder?: string;
     width?: string;
     variant?: 'primary' | 'secondary' | 'tertiary' | 'accountType';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.14.1",
+  "version": "2.14.2",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",

package/src/components/forms/dynamicForm/DynamicForm.tsx

@@ -86,6 +86,7 @@ export const DynamicForm = ({
               value,
               icon: icon ? (fieldIcons[icon] as IconTypes) : undefined,
               placeholder: Boolean(name) ? name : description,
+              label: name ?? description,
             }
             const fieldWithDeleteBaseProps = {
               id,

package/src/components/forms/dynamicForm/fields/CurrencyField.tsx

@@ -1,10 +1,16 @@
 import { Controller, useFormContext } from 'react-hook-form'
-import { Flex, Input, Tooltip } from '@chakra-ui/react'
+import { Flex, Input } from '@chakra-ui/react'
 import { TextFieldI } from '@/interfaces'
 import { FormIcon, LabeledField } from '@/components'
 import { formatCurrency } from '@/utils'
 
-export const CurrencyField = ({ id, icon, placeholder, value }: TextFieldI) => {
+export const CurrencyField = ({
+  label,
+  id,
+  icon,
+  placeholder,
+  value,
+}: TextFieldI) => {
   const { control } = useFormContext()
 
   return (
@@ -22,7 +28,7 @@ export const CurrencyField = ({ id, icon, placeholder, value }: TextFieldI) => {
             onChange(currency)
           }
           return (
-            <LabeledField label={String(placeholder)}>
+            <LabeledField label={label}>
               <Input
                 onChange={handleChange}
                 placeholder={placeholder}

package/src/components/forms/dynamicForm/fields/DateField.tsx

@@ -8,6 +8,7 @@ export const DateField = ({
   icon,
   name,
   placeholder,
+  label,
   showCalendarIcon = true,
   value,
   width,
@@ -37,6 +38,7 @@ export const DateField = ({
               placeholder={name ? '' : placeholder}
               value={value}
               width={width}
+              label={label}
             />
           )
         }}

package/src/components/forms/dynamicForm/fields/GridField.tsx

@@ -18,7 +18,8 @@ export const GridField = ({ children, onRemove, onUpload }: GridFieldI) => {
           const baseProps = {
             id,
             value,
-            placeholder: name && name !== '' ? name : description,
+            placeholder: name ?? description,
+            label: name ?? description,
             icon: icon ? (fieldIcons[icon] as IconTypes) : undefined,
           }
 

package/src/components/forms/dynamicForm/fields/LabeledField.tsx

@@ -2,7 +2,7 @@ import { Box, Text, Flex, Image } from '@chakra-ui/react'
 
 interface LabeledFieldProps {
   children: React.ReactNode
-  label: string
+  label?: string
 }
 
 export const LabeledField = ({ label, children }: LabeledFieldProps) => {

package/src/components/forms/dynamicForm/fields/NumberField.tsx

@@ -1,26 +1,19 @@
 import { Controller, useFormContext } from 'react-hook-form'
 import { Flex, Input } from '@chakra-ui/react'
 import { TextFieldI } from '@/interfaces'
-import { FieldDescription, LabeledField } from '@/components'
+import { LabeledField } from '@/components'
 
-export const NumberField = ({
-  description,
-  id,
-  icon,
-  placeholder,
-  value,
-}: TextFieldI) => {
+export const NumberField = ({ id, label, placeholder, value }: TextFieldI) => {
   const { control } = useFormContext()
   return (
     <Flex align="center" gap="base" flex="auto">
-      {/* <FieldDescription description={description} icon={icon} /> */}
       <Controller
         control={control}
         name={id}
         defaultValue={value}
         render={({ field: { value, onChange } }) => {
           return (
-            <LabeledField label={String(!description && placeholder)}>
+            <LabeledField label={label}>
               <Input
                 onChange={(e) => {
                   const value = e.target.valueAsNumber

package/src/components/forms/dynamicForm/fields/SelectField.tsx

@@ -1,12 +1,12 @@
 import { Controller, useFormContext } from 'react-hook-form'
 import { Box, Flex } from '@chakra-ui/react'
-import { FieldDescription, SelectInput } from '@/components'
+import { SelectInput } from '@/components'
 import { SelectFieldI } from '@/interfaces'
 
 export const SelectField = ({
   description,
   id,
-  icon,
+  label,
   options,
   placeholder,
   value,
@@ -15,7 +15,6 @@ export const SelectField = ({
   const stringOptions = options?.map((option) => String(option)) ?? []
   return (
     <Flex align="start" gap="base" flex="auto" w={description ? '100%' : '40%'}>
-      {/* <FieldDescription description={description} icon={icon} /> */}
       <Box w={description ? '102px' : '100%'}>
         <Controller
           control={control}
@@ -29,6 +28,7 @@ export const SelectField = ({
                 initialValue={value ?? stringOptions[0]}
                 items={stringOptions}
                 placeholder={!description ? placeholder : ''}
+                label={label}
                 width="100%"
               />
             )

package/src/components/forms/dynamicForm/fields/SingleFields.tsx

@@ -37,6 +37,7 @@ export const SingleFields = ({ callback, fields, menuItems }: FieldTypesI) => {
             id,
             icon: icon ? fieldIcons[icon] : undefined,
             placeholder: name,
+            label: name,
             value,
           }
           switch (type) {

package/src/components/forms/dynamicForm/fields/TextAreaField.tsx

@@ -1,5 +1,5 @@
 import { useFormContext, Controller } from 'react-hook-form'
-import { Flex, Image } from '@chakra-ui/react'
+import { Flex } from '@chakra-ui/react'
 import QuillEditor from 'react-quill-new'
 import { TextAreaFieldI } from '@/interfaces'
 import 'react-quill-new/dist/quill.snow.css'
@@ -8,21 +8,20 @@ import { LabeledField } from './LabeledField'
 
 export const TextAreaField = ({
   id,
-  icon,
+  label,
   placeholder = '',
   value,
 }: TextAreaFieldI) => {
   const { control } = useFormContext()
   return (
     <Flex gap="base" align="start" flex="auto">
-      {/* {icon && <Image h="auto" w="icon.md" src={icon} marginTop="2" />} */}
       <Controller
         control={control}
         name={id}
         defaultValue={value}
         render={({ field: { value, onChange } }) => {
           return (
-            <LabeledField label={placeholder}>
+            <LabeledField label={label}>
               <QuillEditor
                 theme="snow"
                 value={value}

package/src/components/forms/dynamicForm/fields/TextField.tsx

@@ -5,8 +5,8 @@ import { TextFieldI } from '@/interfaces'
 
 export const TextField = ({
   id,
-  icon,
   placeholder = '',
+  label,
   type = 'text',
   value,
 }: TextFieldI) => {
@@ -24,6 +24,7 @@ export const TextField = ({
               placeholder={placeholder}
               type={type}
               value={value}
+              label={label}
             />
           )
         }}

package/src/components/inputs/DatePicker.tsx

@@ -11,6 +11,7 @@ import { extractDayMonthYear, joinDayMonthYear } from '@/utils'
 export const DatePicker = ({
   onChange,
   placeholder,
+  label,
   showCalendarIcon,
   value,
   width = '290px',
@@ -56,7 +57,7 @@ export const DatePicker = ({
   const renderCustomInput = () => {
     return (
       <Flex gap="base" w={width}>
-        <LabeledField label={String(placeholder)}>
+        <LabeledField label={label}>
           <Input
             placeholder={placeholder || 'MM/DD/YYYY'}
             onChange={handleInputChange}

package/src/components/inputs/SelectInput.tsx

@@ -6,7 +6,6 @@ import {
   Input,
   InputGroup,
   InputRightElement,
-  Tooltip,
   Box,
 } from '@chakra-ui/react'
 import { SelectI } from '@/interfaces'
@@ -29,7 +28,7 @@ export const SelectInput = ({
   initialValue = 'All',
   isDisabled,
   items,
-  placeholder,
+  label,
   variant = 'primary',
   width = '10rem',
 }: SelectI) => {
@@ -41,7 +40,7 @@ export const SelectInput = ({
 
   return (
     <Menu>
-      <LabeledField label={String(placeholder)}>
+      <LabeledField label={label}>
         <Box w="100%">
           <SelectButton
             selectedValue={selectedValue}

package/src/components/inputs/TextInput.tsx

@@ -10,6 +10,7 @@ export const TextInput = ({
   hasError,
   id,
   isDisabled,
+  label,
   placeholder,
   value = '',
   type = 'text',
@@ -18,7 +19,7 @@ export const TextInput = ({
   const error = hasError && !isDisabled
   return (
     <FormControl isInvalid={error}>
-      <LabeledField label={placeholder}>
+      <LabeledField label={label}>
         <Input
           {...props}
           autoCapitalize={autoCapitalize}

package/src/interfaces/forms/dynamicForm/fields/DateField.interface.ts

@@ -5,6 +5,7 @@ export interface DateFieldI {
   icon?: string
   name?: string
   placeholder?: string
+  label?: string
   showCalendarIcon?: boolean
   type?: 'text' | 'email' | 'password' | 'number' | 'tel'
   value: ReportI['value']

package/src/interfaces/forms/dynamicForm/fields/SelectField.interface.ts

@@ -4,5 +4,6 @@ export interface SelectFieldI extends FieldDescriptionI {
   id: string
   options: ReportI['options']
   placeholder?: string
+  label?: string
   value: ReportI['value']
 }

package/src/interfaces/forms/dynamicForm/fields/TextAreaField.interface.ts

@@ -3,6 +3,7 @@ import { ReportI } from '@/interfaces'
 export interface TextAreaFieldI {
   id: string
   icon?: string
+  label?: string
   placeholder?: string
   value: ReportI['value']
 }

package/src/interfaces/forms/dynamicForm/fields/TextField.interface.ts

@@ -3,6 +3,7 @@ import { FieldDescriptionI, ReportI } from '@/interfaces'
 export interface TextFieldI extends FieldDescriptionI {
   id: string
   placeholder?: string
+  label?: string
   type?: 'text' | 'email' | 'password' | 'number' | 'tel'
   value: ReportI['value']
 }

package/src/interfaces/inputs/DatePicker.interface.ts

@@ -1,6 +1,7 @@
 export interface DatePickerI {
   onChange: (date: string) => void
   placeholder?: string
+  label?: string
   showCalendarIcon?: boolean
   value: string
   width?: string

package/src/interfaces/inputs/Input.interface.ts

@@ -7,6 +7,7 @@ export interface InputI extends InputProps {
   handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void
   hasError?: boolean
   id?: string
+  label?: string
   isDisabled?: boolean
   placeholder: string
   value: string

package/src/interfaces/inputs/Select.interface.ts

@@ -12,6 +12,7 @@ export interface SelectI {
   initialValue?: string
   isDisabled?: boolean
   items: SelectItemI[] | string[]
+  label?: string
   placeholder?: string
   width?: string
   variant?: 'primary' | 'secondary' | 'tertiary' | 'accountType'