@homefile/components-v2 2.14.1 → 2.14.3

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

@@ -24,12 +24,13 @@ export const DynamicForm = (_a) => {
         return _jsx(SearchItemLoader, {});
     }
     return (_jsxs(Stack, { bg: "lightBlue.1", spacing: "0", h: "full", overflowX: "hidden", children: [showTitle && (_jsx(Box, { px: "base", pt: "4", pb: "2", borderBottom: "1px dashed", borderColor: "lightBlue.6", children: _jsx(Text, { fontFamily: "secondary", children: title !== null && title !== void 0 ? title : t('forms.itemDetails') }) })), _jsx(FormProvider, Object.assign({}, form, { children: _jsx(_Fragment, { children: visibleFields === null || visibleFields === void 0 ? void 0 : visibleFields.map((field) => {
-                        const { canBeHidden, children, description, icon, id, name, options, type, value, } = field;
+                        const { canBeHidden, children, description, icon, id, name, label, options, type, value, } = field;
                         const baseProps = {
                             id,
                             value,
                             icon: icon ? fieldIcons[icon] : undefined,
                             placeholder: Boolean(name) ? name : description,
+                            label,
                         };
                         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

@@ -4,11 +4,12 @@ import { Flex } from '@chakra-ui/react';
 import { DateField, NumberField, TextField, SelectField, CurrencyField, SingleImage, } from '../../..';
 import { fieldIcons } from '../../../../helpers';
 export const GridField = ({ children, onRemove, onUpload }) => {
-    return (_jsx(Flex, { align: "stretch", gap: "base", children: children === null || children === void 0 ? void 0 : children.map(({ id, description, name, value, type, options = [], icon }) => {
+    return (_jsx(Flex, { align: "stretch", gap: "base", children: children === null || children === void 0 ? void 0 : children.map(({ id, description, label, name, value, type, options = [], icon }) => {
             const baseProps = {
                 id,
                 value,
-                placeholder: name && name !== '' ? name : description,
+                placeholder: name !== null && name !== void 0 ? name : description,
+                label,
                 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

@@ -3,11 +3,12 @@ import { createElement as _createElement } from "react";
 import { fieldIcons } from '../../../../helpers';
 import { GridField, RatingField, TextAreaField, TextField, SelectField, SwitchField, NumberField, DateField, CurrencyField, TileBodyHeader, TileBodyLogo, VerticalIcon, TileBodySectionGrid, TileBodyAction, TileCta, } from '../../..';
 export const SingleFields = ({ callback, fields, menuItems }) => {
-    return (_jsx(_Fragment, { children: fields === null || fields === void 0 ? void 0 : fields.map(({ children, description, id, name, type, value, icon, link, options = [], }) => {
+    return (_jsx(_Fragment, { children: fields === null || fields === void 0 ? void 0 : fields.map(({ children, description, id, label, name, type, value, icon, link, options = [], }) => {
             const baseProps = {
                 id,
                 icon: icon ? fieldIcons[icon] : undefined,
                 placeholder: name,
+                label,
                 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/DynamicForm.interface.d.ts

@@ -13,6 +13,7 @@ export interface ReportI {
     description?: string;
     icon?: IconTypes;
     id: string;
+    label?: string;
     link?: string;
     name?: string;
     options?: OptionsTypes;

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/dist/mocks/forms/dynamicForm.mock.js

@@ -4,6 +4,7 @@ export const formFieldsMock = [
     {
         id: faker.database.mongodbObjectId(),
         name: 'Select to have Homefile find & add information on your item.',
+        label: 'Find & add information',
         description: 'Homefile has an extensive data base of products, but we will also search the web for the most relevant information around products. This includes details like warranty Information, manuals, price, energy info, product ratings, etc. If the item is not in our database, it will populate as soon as we add the info.',
         value: false,
         type: 'checkbox-agreement',
@@ -12,6 +13,7 @@ export const formFieldsMock = [
     {
         id: faker.database.mongodbObjectId(),
         name: 'ai form',
+        label: 'Add item details',
         description: 'Add item details',
         value: false,
         type: 'ai-grid',
@@ -20,6 +22,7 @@ export const formFieldsMock = [
             {
                 id: faker.database.mongodbObjectId(),
                 name: 'Model or Serial',
+                label: 'Model or Serial',
                 description: faker.lorem.sentence(),
                 comments: faker.lorem.sentence(),
                 value: '',
@@ -29,6 +32,7 @@ export const formFieldsMock = [
             {
                 id: faker.database.mongodbObjectId(),
                 name: 'uploder',
+                label: 'Upload Image',
                 description: faker.lorem.sentence(),
                 comments: faker.lorem.sentence(),
                 value: faker.image.urlPicsumPhotos(),
@@ -40,6 +44,7 @@ export const formFieldsMock = [
     {
         id: faker.database.mongodbObjectId(),
         name: '',
+        label: 'Add item details',
         description: faker.lorem.sentence(),
         comments: faker.lorem.sentence(),
         value: '',
@@ -50,6 +55,7 @@ export const formFieldsMock = [
     {
         id: faker.database.mongodbObjectId(),
         name: 'Brand',
+        label: 'Brand',
         description: faker.lorem.sentence(),
         comments: faker.lorem.sentence(),
         value: '',
@@ -60,6 +66,7 @@ export const formFieldsMock = [
     {
         id: faker.database.mongodbObjectId(),
         name: 'Services',
+        label: 'Services',
         description: faker.lorem.sentence(),
         comments: faker.lorem.sentence(),
         value: 'Select the services you are requesting support for?',
@@ -70,6 +77,7 @@ export const formFieldsMock = [
             {
                 id: faker.database.mongodbObjectId(),
                 name: 'Pressure Washing',
+                label: 'Pressure Washing',
                 description: faker.lorem.sentence(),
                 comments: faker.lorem.sentence(),
                 value: true,
@@ -79,6 +87,7 @@ export const formFieldsMock = [
             {
                 id: faker.database.mongodbObjectId(),
                 name: 'Window Cleaning',
+                label: 'Window Cleaning',
                 description: faker.lorem.sentence(),
                 comments: faker.lorem.sentence(),
                 value: false,
@@ -88,6 +97,7 @@ export const formFieldsMock = [
             {
                 id: faker.database.mongodbObjectId(),
                 name: 'Roof Cleaning',
+                label: 'Roof Cleaning',
                 description: faker.lorem.sentence(),
                 comments: faker.lorem.sentence(),
                 value: false,
@@ -136,6 +146,7 @@ export const formFieldsMock = [
             {
                 id: faker.database.mongodbObjectId(),
                 name: 'Receipt',
+                label: 'Receipt',
                 description: faker.lorem.sentence(),
                 comments: faker.lorem.sentence(),
                 value: faker.lorem.sentence(),
@@ -146,6 +157,7 @@ export const formFieldsMock = [
             {
                 id: faker.database.mongodbObjectId(),
                 name: 'SKU',
+                label: 'SKU',
                 description: faker.lorem.sentence(),
                 comments: faker.lorem.sentence(),
                 value: faker.lorem.sentence(),
@@ -163,6 +175,7 @@ export const formFieldsMock = [
                     {
                         id: faker.database.mongodbObjectId(),
                         name: 'Purchase Date',
+                        label: 'Purchase Date',
                         description: faker.lorem.sentence(),
                         comments: faker.lorem.sentence(),
                         value: '',
@@ -172,6 +185,7 @@ export const formFieldsMock = [
                     {
                         id: faker.database.mongodbObjectId(),
                         name: '$ Amount Paid',
+                        label: '$ Amount Paid',
                         description: faker.lorem.sentence(),
                         comments: faker.lorem.sentence(),
                         value: faker.finance.amount({ min: 10, max: 100 }),
@@ -186,6 +200,7 @@ export const formFieldsMock = [
     {
         id: faker.database.mongodbObjectId(),
         name: 'Color',
+        label: 'Color',
         description: faker.lorem.sentence(),
         comments: faker.lorem.sentence(),
         value: faker.lorem.word(),
@@ -196,6 +211,7 @@ export const formFieldsMock = [
     {
         id: faker.database.mongodbObjectId(),
         name: 'Finish',
+        label: 'Finish',
         description: faker.lorem.sentence(),
         comments: faker.lorem.sentence(),
         value: 'Matte',

package/dist/utils/DynamicForm.utils.js

@@ -19,6 +19,7 @@ export const mapApiObjectToFormFields = ({ obj = {}, depth = 0, labelPrefix = ''
                 {
                     id: uuidv4(),
                     name: currentLabel,
+                    label: currentLabel,
                     description: '',
                     comments: '',
                     value,
@@ -32,6 +33,7 @@ export const mapApiObjectToFormFields = ({ obj = {}, depth = 0, labelPrefix = ''
                 {
                     id: uuidv4(),
                     name: currentLabel,
+                    label: currentLabel,
                     description: '',
                     comments: '',
                     value: String(value),
@@ -45,6 +47,7 @@ export const mapApiObjectToFormFields = ({ obj = {}, depth = 0, labelPrefix = ''
                 {
                     id: uuidv4(),
                     name: currentLabel,
+                    label: currentLabel,
                     description: '',
                     comments: '',
                     value: String(value),
@@ -61,6 +64,7 @@ export const mapApiObjectToFormFields = ({ obj = {}, depth = 0, labelPrefix = ''
                 {
                     id: uuidv4(),
                     name: currentLabel,
+                    label: currentLabel,
                     description: '',
                     comments: '',
                     value: htmlValue,
@@ -91,6 +95,7 @@ export const mapApiObjectToFormFields = ({ obj = {}, depth = 0, labelPrefix = ''
                 {
                     id: uuidv4(),
                     name: currentLabel,
+                    label: currentLabel,
                     description: '',
                     comments: '',
                     value: `<ul>${htmlList}</ul>`,
@@ -116,6 +121,7 @@ export const mapApiObjectToFormFields = ({ obj = {}, depth = 0, labelPrefix = ''
                 {
                     id: uuidv4(),
                     name: currentLabel,
+                    label: currentLabel,
                     description: '',
                     comments: '',
                     value: htmlValue,
@@ -128,6 +134,7 @@ export const mapApiObjectToFormFields = ({ obj = {}, depth = 0, labelPrefix = ''
             {
                 id: uuidv4(),
                 name: currentLabel,
+                label: currentLabel,
                 description: '',
                 comments: '',
                 value: String(value),

package/package.json

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

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

@@ -76,6 +76,7 @@ export const DynamicForm = ({
               icon,
               id,
               name,
+              label,
               options,
               type,
               value,
@@ -86,6 +87,7 @@ export const DynamicForm = ({
               value,
               icon: icon ? (fieldIcons[icon] as IconTypes) : undefined,
               placeholder: Boolean(name) ? name : description,
+              label,
             }
             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

@@ -14,11 +14,12 @@ export const GridField = ({ children, onRemove, onUpload }: GridFieldI) => {
   return (
     <Flex align="stretch" gap="base">
       {children?.map(
-        ({ id, description, name, value, type, options = [], icon }) => {
+        ({ id, description, label, name, value, type, options = [], icon }) => {
           const baseProps = {
             id,
             value,
-            placeholder: name && name !== '' ? name : description,
+            placeholder: name ?? description,
+            label,
             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

@@ -26,6 +26,7 @@ export const SingleFields = ({ callback, fields, menuItems }: FieldTypesI) => {
           children,
           description,
           id,
+          label,
           name,
           type,
           value,
@@ -37,6 +38,7 @@ export const SingleFields = ({ callback, fields, menuItems }: FieldTypesI) => {
             id,
             icon: icon ? fieldIcons[icon] : undefined,
             placeholder: name,
+            label,
             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/DynamicForm.interface.ts

@@ -120,6 +120,7 @@ export interface ReportI {
   description?: string
   icon?: IconTypes
   id: string
+  label?: string
   link?: string
   name?: string
   options?: OptionsTypes

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'

package/src/mocks/forms/dynamicForm.mock.ts

@@ -6,6 +6,7 @@ export const formFieldsMock: ReportI[] = [
   {
     id: faker.database.mongodbObjectId(),
     name: 'Select to have Homefile find & add information on your item.',
+    label: 'Find & add information',
     description:
       'Homefile has an extensive data base of products, but we will also search the web for the most relevant information around products. This includes details like warranty Information, manuals, price, energy info, product ratings, etc. If the item is not in our database, it will populate as soon as we add the info.',
     value: false,
@@ -15,6 +16,7 @@ export const formFieldsMock: ReportI[] = [
   {
     id: faker.database.mongodbObjectId(),
     name: 'ai form',
+    label: 'Add item details',
     description: 'Add item details',
     value: false,
     type: 'ai-grid',
@@ -23,6 +25,7 @@ export const formFieldsMock: ReportI[] = [
       {
         id: faker.database.mongodbObjectId(),
         name: 'Model or Serial',
+        label: 'Model or Serial',
         description: faker.lorem.sentence(),
         comments: faker.lorem.sentence(),
         value: '',
@@ -32,6 +35,7 @@ export const formFieldsMock: ReportI[] = [
       {
         id: faker.database.mongodbObjectId(),
         name: 'uploder',
+        label: 'Upload Image',
         description: faker.lorem.sentence(),
         comments: faker.lorem.sentence(),
         value: faker.image.urlPicsumPhotos(),
@@ -43,6 +47,7 @@ export const formFieldsMock: ReportI[] = [
   {
     id: faker.database.mongodbObjectId(),
     name: '',
+    label: 'Add item details',
     description: faker.lorem.sentence(),
     comments: faker.lorem.sentence(),
     value: '',
@@ -53,6 +58,7 @@ export const formFieldsMock: ReportI[] = [
   {
     id: faker.database.mongodbObjectId(),
     name: 'Brand',
+    label: 'Brand',
     description: faker.lorem.sentence(),
     comments: faker.lorem.sentence(),
     value: '',
@@ -63,6 +69,7 @@ export const formFieldsMock: ReportI[] = [
   {
     id: faker.database.mongodbObjectId(),
     name: 'Services',
+    label: 'Services',
     description: faker.lorem.sentence(),
     comments: faker.lorem.sentence(),
     value: 'Select the services you are requesting support for?',
@@ -73,6 +80,7 @@ export const formFieldsMock: ReportI[] = [
       {
         id: faker.database.mongodbObjectId(),
         name: 'Pressure Washing',
+        label: 'Pressure Washing',
         description: faker.lorem.sentence(),
         comments: faker.lorem.sentence(),
         value: true,
@@ -82,6 +90,7 @@ export const formFieldsMock: ReportI[] = [
       {
         id: faker.database.mongodbObjectId(),
         name: 'Window Cleaning',
+        label: 'Window Cleaning',
         description: faker.lorem.sentence(),
         comments: faker.lorem.sentence(),
         value: false,
@@ -91,6 +100,7 @@ export const formFieldsMock: ReportI[] = [
       {
         id: faker.database.mongodbObjectId(),
         name: 'Roof Cleaning',
+        label: 'Roof Cleaning',
         description: faker.lorem.sentence(),
         comments: faker.lorem.sentence(),
         value: false,
@@ -139,6 +149,7 @@ export const formFieldsMock: ReportI[] = [
       {
         id: faker.database.mongodbObjectId(),
         name: 'Receipt',
+        label: 'Receipt',
         description: faker.lorem.sentence(),
         comments: faker.lorem.sentence(),
         value: faker.lorem.sentence(),
@@ -149,6 +160,7 @@ export const formFieldsMock: ReportI[] = [
       {
         id: faker.database.mongodbObjectId(),
         name: 'SKU',
+        label: 'SKU',
         description: faker.lorem.sentence(),
         comments: faker.lorem.sentence(),
         value: faker.lorem.sentence(),
@@ -166,6 +178,7 @@ export const formFieldsMock: ReportI[] = [
           {
             id: faker.database.mongodbObjectId(),
             name: 'Purchase Date',
+            label: 'Purchase Date',
             description: faker.lorem.sentence(),
             comments: faker.lorem.sentence(),
             value: '',
@@ -175,6 +188,7 @@ export const formFieldsMock: ReportI[] = [
           {
             id: faker.database.mongodbObjectId(),
             name: '$ Amount Paid',
+            label: '$ Amount Paid',
             description: faker.lorem.sentence(),
             comments: faker.lorem.sentence(),
             value: faker.finance.amount({ min: 10, max: 100 }),
@@ -189,6 +203,7 @@ export const formFieldsMock: ReportI[] = [
   {
     id: faker.database.mongodbObjectId(),
     name: 'Color',
+    label: 'Color',
     description: faker.lorem.sentence(),
     comments: faker.lorem.sentence(),
     value: faker.lorem.word(),
@@ -199,6 +214,7 @@ export const formFieldsMock: ReportI[] = [
   {
     id: faker.database.mongodbObjectId(),
     name: 'Finish',
+    label: 'Finish',
     description: faker.lorem.sentence(),
     comments: faker.lorem.sentence(),
     value: 'Matte',

package/src/utils/DynamicForm.utils.ts

@@ -38,6 +38,7 @@ export const mapApiObjectToFormFields = ({
           {
             id: uuidv4(),
             name: currentLabel,
+            label: currentLabel,
             description: '',
             comments: '',
             value,
@@ -52,6 +53,7 @@ export const mapApiObjectToFormFields = ({
           {
             id: uuidv4(),
             name: currentLabel,
+            label: currentLabel,
             description: '',
             comments: '',
             value: String(value),
@@ -66,6 +68,7 @@ export const mapApiObjectToFormFields = ({
           {
             id: uuidv4(),
             name: currentLabel,
+            label: currentLabel,
             description: '',
             comments: '',
             value: String(value),
@@ -83,6 +86,7 @@ export const mapApiObjectToFormFields = ({
           {
             id: uuidv4(),
             name: currentLabel,
+            label: currentLabel,
             description: '',
             comments: '',
             value: htmlValue,
@@ -119,6 +123,7 @@ export const mapApiObjectToFormFields = ({
           {
             id: uuidv4(),
             name: currentLabel,
+            label: currentLabel,
             description: '',
             comments: '',
             value: `<ul>${htmlList}</ul>`,
@@ -147,6 +152,7 @@ export const mapApiObjectToFormFields = ({
           {
             id: uuidv4(),
             name: currentLabel,
+            label: currentLabel,
             description: '',
             comments: '',
             value: htmlValue,
@@ -160,6 +166,7 @@ export const mapApiObjectToFormFields = ({
         {
           id: uuidv4(),
           name: currentLabel,
+          label: currentLabel,
           description: '',
           comments: '',
           value: String(value),