@homefile/components-v2 2.40.10 → 2.40.12

package/dist/components/folderPanel/fileDetails/FileDetailsTab.js

@@ -23,5 +23,5 @@ export const FileDetailsTab = ({ addedBy, handleEdit, file, editing, }) => {
         const updateFile = Object.assign(Object.assign({}, file), { title: fileName, description: fileDescription });
         handleEdit(updateFile);
     };
-    return editing ? (_jsx(Center, { h: "6rem", children: _jsx(BeatLoader, { color: "gray", size: 6 }) })) : (_jsxs(Stack, { spacing: "base", p: "base", children: [_jsxs(Flex, { gap: "base", align: "center", children: [_jsx(Image, { src: fileTypes[fileExtension] || DocIcon, w: "auto", h: "3rem", alt: t('folderSharing.altIcon') }), _jsx(TextInput, { handleChange: handleChangeName, id: file._id, placeholder: t('folderSharing.details.placeholder'), value: fileName, hasError: !fileName, errorMessage: `${t('folderSharing.details.name')} ${t('forms.required')}` }), fileName && (_jsx(Button, { variant: "tertiary", h: "input.md", onClick: () => fileName && handleEditFile(), children: t('createDocument.buttons.save') }))] }), _jsxs(Box, { children: [formattedUpdateAt && (_jsxs(Flex, { borderY: "1px solid", borderColor: "lightBlue.6", py: "base", px: "2", children: [_jsx(Text, { variant: "info", flex: "0.2", children: t('folderSharing.details.added') }), _jsx(Text, { variant: "info", flex: "0.8", children: formattedUpdateAt === null || formattedUpdateAt === void 0 ? void 0 : formattedUpdateAt.replace(' ', ' @ ') })] })), _jsxs(Flex, { borderBottom: "1px solid", borderColor: "lightBlue.6", py: "base", px: "2", children: [_jsx(Text, { variant: "info", flex: "0.2", children: t('folderSharing.details.addedBy') }), _jsx(Text, { variant: "info", color: "blue.3", flex: "0.8", children: addedBy })] }), _jsxs(Flex, { borderBottom: "1px solid", borderColor: "lightBlue.6", py: "base", pl: "2", align: "center", gap: "base", children: [_jsx(TextInput, { handleChange: handleChangeDescription, id: file._id, placeholder: t('addMedia.description'), value: fileDescription || '' }), fileDescription && (_jsx(Button, { variant: "tertiary", h: "input.md", onClick: () => fileDescription && handleEditFile(), children: t('createDocument.buttons.save') }))] })] })] }));
+    return editing ? (_jsx(Center, { h: "6rem", children: _jsx(BeatLoader, { color: "gray", size: 6 }) })) : (_jsxs(Stack, { spacing: "base", p: "base", children: [_jsxs(Flex, { gap: "base", align: "flex-end", children: [_jsx(Image, { src: fileTypes[fileExtension] || DocIcon, w: "auto", h: "3rem", alt: t('folderSharing.altIcon') }), _jsx(TextInput, { handleChange: handleChangeName, id: file._id, placeholder: t('folderSharing.details.placeholder'), value: fileName, hasError: !fileName, errorMessage: `${t('folderSharing.details.name')} ${t('forms.required')}` }), fileName && (_jsx(Button, { variant: "tertiary", h: "input.md", onClick: () => fileName && handleEditFile(), children: t('createDocument.buttons.save') }))] }), _jsxs(Box, { children: [formattedUpdateAt && (_jsxs(Flex, { borderY: "1px solid", borderColor: "lightBlue.6", py: "base", px: "2", children: [_jsx(Text, { variant: "info", flex: "0.2", children: t('folderSharing.details.added') }), _jsx(Text, { variant: "info", flex: "0.8", children: formattedUpdateAt === null || formattedUpdateAt === void 0 ? void 0 : formattedUpdateAt.replace(' ', ' @ ') })] })), _jsxs(Flex, { borderBottom: "1px solid", borderColor: "lightBlue.6", py: "base", px: "2", children: [_jsx(Text, { variant: "info", flex: "0.2", children: t('folderSharing.details.addedBy') }), _jsx(Text, { variant: "info", color: "blue.3", flex: "0.8", children: addedBy })] }), _jsxs(Flex, { borderBottom: "1px solid", borderColor: "lightBlue.6", py: "base", pl: "2", align: "flex-end", gap: "base", children: [_jsx(TextInput, { handleChange: handleChangeDescription, id: file._id, placeholder: t('addMedia.description'), value: fileDescription || '' }), fileDescription && (_jsx(Button, { variant: "tertiary", h: "input.md", onClick: () => fileDescription && handleEditFile(), children: t('createDocument.buttons.save') }))] })] })] }));
 };

package/dist/components/forms/AddressStored.js

@@ -10,9 +10,9 @@ export const AddressStored = ({ proxy = addressProxy, setIsDirty, }) => {
     var _a;
     const { fields, validations } = useSnapshot(proxy, { sync: true });
     const { complements, handleAddComplement, handleDeleteComplement, handleErrorMessage, handleInputChange, handleValidation, } = useAddressStored({ proxy, setIsDirty });
-    return (_jsxs(Stack, { spacing: "base", children: [_jsxs(InputGroup, { gap: "base", children: [_jsx(Box, { w: "40%", children: _jsx(TextInput, { errorMessage: handleErrorMessage('number'), hasError: !validations.isStreetNumberValid, id: "streetNumber", placeholder: `${t('forms.number')}*`, value: (_a = fields.number) === null || _a === void 0 ? void 0 : _a.toString(), handleChange: (event) => handleInputChange(event, 'number'), onBlurCapture: () => handleValidation('number') }) }), _jsx(TextInput, { errorMessage: handleErrorMessage('street'), hasError: !validations.isStreetValid, id: "street", placeholder: `${t('forms.street')}*`, value: fields.street, handleChange: (event) => handleInputChange(event, 'street'), onBlurCapture: () => handleValidation('street') }), _jsx(IconButton, { "aria-label": "Add new address line", variant: "iconOutlined", icon: _jsx(Plus, { stroke: colors.blue[3], size: 28 }), onClick: handleAddComplement, isDisabled: complements.length === 2, maxH: "input.md" })] }), (complements === null || complements === void 0 ? void 0 : complements.length) > 0 &&
+    return (_jsxs(Stack, { spacing: "base", children: [_jsxs(InputGroup, { gap: "base", alignItems: "flex-end", children: [_jsx(Box, { w: "40%", children: _jsx(TextInput, { errorMessage: handleErrorMessage('number'), hasError: !validations.isStreetNumberValid, id: "streetNumber", placeholder: `${t('forms.number')}*`, value: (_a = fields.number) === null || _a === void 0 ? void 0 : _a.toString(), handleChange: (event) => handleInputChange(event, 'number'), onBlurCapture: () => handleValidation('number') }) }), _jsx(TextInput, { errorMessage: handleErrorMessage('street'), hasError: !validations.isStreetValid, id: "street", placeholder: `${t('forms.street')}*`, value: fields.street, handleChange: (event) => handleInputChange(event, 'street'), onBlurCapture: () => handleValidation('street') }), _jsx(IconButton, { "aria-label": "Add new address line", variant: "iconOutlined", icon: _jsx(Plus, { stroke: colors.blue[3], size: 28 }), onClick: handleAddComplement, isDisabled: complements.length === 2, h: "input.md" })] }), (complements === null || complements === void 0 ? void 0 : complements.length) > 0 &&
                 (complements === null || complements === void 0 ? void 0 : complements.map((complement) => {
                     var _a;
                     return (_jsxs(InputGroup, { gap: "base", children: [_jsx(TextInput, { id: complement, placeholder: t(`forms.${complement}`), value: (_a = fields[complement]) !== null && _a !== void 0 ? _a : '', handleChange: (event) => handleInputChange(event, complement) }), _jsx(Center, { w: "3.5rem", children: _jsx(IconButton, { w: "2rem", h: "2rem", "aria-label": "Delete address line", variant: "iconOutlined", icon: _jsx(Minus, {}), onClick: () => handleDeleteComplement(complement) }) })] }, complement));
-                })), _jsxs(InputGroup, { gap: "base", children: [_jsx(TextInput, { errorMessage: handleErrorMessage('zip'), hasError: !validations.isZipValid, id: "zip", placeholder: `${t('forms.zip')}*`, value: fields.zip, handleChange: (event) => handleInputChange(event, 'zip'), onBlurCapture: () => handleValidation('zip') }), _jsx(TextInput, { errorMessage: handleErrorMessage('city'), hasError: !validations.isCityValid, id: "city", placeholder: `${t('forms.city')}*`, value: fields.city, handleChange: (event) => handleInputChange(event, 'city'), isDisabled: !fields.zip, onBlurCapture: () => handleValidation('city') }), _jsx(TextInput, { errorMessage: handleErrorMessage('state'), hasError: !validations.isStateValid, id: "state", placeholder: `${t('forms.state')}*`, value: fields.state, handleChange: (event) => handleInputChange(event, 'state'), isDisabled: !fields.zip, onBlurCapture: () => handleValidation('state') })] })] }));
+                })), _jsxs(InputGroup, { gap: "base", alignItems: "flex-end", children: [_jsx(TextInput, { errorMessage: handleErrorMessage('zip'), hasError: !validations.isZipValid, id: "zip", placeholder: `${t('forms.zip')}*`, value: fields.zip, handleChange: (event) => handleInputChange(event, 'zip'), onBlurCapture: () => handleValidation('zip') }), _jsx(TextInput, { errorMessage: handleErrorMessage('city'), hasError: !validations.isCityValid, id: "city", placeholder: `${t('forms.city')}*`, value: fields.city, handleChange: (event) => handleInputChange(event, 'city'), isDisabled: !fields.zip, onBlurCapture: () => handleValidation('city') }), _jsx(TextInput, { errorMessage: handleErrorMessage('state'), hasError: !validations.isStateValid, id: "state", placeholder: `${t('forms.state')}*`, value: fields.state, handleChange: (event) => handleInputChange(event, 'state'), isDisabled: !fields.zip, onBlurCapture: () => handleValidation('state') })] })] }));
 };

package/dist/components/forms/EditItemName.js

@@ -4,5 +4,5 @@ import { Box, Button, Flex } from '@chakra-ui/react';
 import { TextInput } from '../../components';
 export const EditItemName = ({ errorMessage, placeholder, isDisabled = false, isRequired = true, loading, onChange, onSave, showSaveButton = false, value, }) => {
     const showButton = value || showSaveButton;
-    return (_jsx(Box, { w: "100%", children: _jsxs(Flex, { gap: "base", children: [_jsx(TextInput, { maxLength: 45, handleChange: onChange, id: "folder-name", placeholder: placeholder, value: value, isDisabled: isDisabled, hasError: isRequired && !value, errorMessage: errorMessage }), showButton && (_jsx(Button, { variant: "secondary", maxW: "fit-content", maxH: "input.md", onClick: onSave, isLoading: loading, children: t('createDocument.buttons.save') }))] }) }));
+    return (_jsx(Box, { w: "100%", children: _jsxs(Flex, { gap: "base", children: [_jsx(TextInput, { maxLength: 45, handleChange: onChange, id: "folder-name", placeholder: placeholder, value: value, isDisabled: isDisabled, hasError: isRequired && !value, errorMessage: errorMessage, showLabel: false }), showButton && (_jsx(Button, { variant: "secondary", maxW: "fit-content", maxH: "input.md", onClick: onSave, isLoading: loading, children: t('createDocument.buttons.save') }))] }) }));
 };

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

@@ -4,9 +4,12 @@ import { NumericFormat } from 'react-number-format';
 import { Flex, Input } from '@chakra-ui/react';
 import { FormIcon, LabeledField } from '../../../../components';
 export const CurrencyField = ({ label, id, icon, placeholder, value, }) => {
+    var _a;
     const { control } = useFormContext();
+    const isFilled = String(value).trim().length > 0;
+    const placeholderToUse = isFilled ? '' : (_a = placeholder !== null && placeholder !== void 0 ? placeholder : label) !== null && _a !== void 0 ? _a : '';
     return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", w: "full", children: [_jsx(FormIcon, { icon: icon }), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field }) => {
-                    return (_jsx(LabeledField, { label: label, children: _jsx(NumericFormat, Object.assign({}, field, { customInput: Input, thousandSeparator: true, decimalScale: 2, fixedDecimalScale: true, prefix: "$", placeholder: placeholder, textAlign: "right", _placeholder: { color: 'gray.2' }, onValueChange: ({ floatValue }) => {
+                    return (_jsx(LabeledField, { label: label !== null && label !== void 0 ? label : placeholder, isFilled: isFilled, children: _jsx(NumericFormat, Object.assign({}, field, { customInput: Input, thousandSeparator: true, decimalScale: 2, fixedDecimalScale: true, prefix: "$", placeholder: placeholderToUse, textAlign: "right", _placeholder: { color: 'gray.2' }, onValueChange: ({ floatValue }) => {
                                 field.onChange(floatValue);
                             } })) }));
                 } })] }));

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

@@ -1,10 +1,14 @@
 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 '../../../../components';
+import { DatePicker, FormIcon, LabeledField } from '../../../../components';
 export const DateField = ({ id, icon, name, placeholder, label, showCalendarIcon = true, value, width, }) => {
+    var _a;
     const { control } = useFormContext();
+    const isFilled = String(value).trim().length > 0;
+    const placeholderToUse = isFilled ? '' : (_a = placeholder !== null && placeholder !== void 0 ? placeholder : label) !== null && _a !== void 0 ? _a : '';
     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, label: label }));
+                    const isFilled = String(value).trim().length > 0 && !name;
+                    return (_jsx(LabeledField, { label: label !== null && label !== void 0 ? label : placeholder, isFilled: isFilled, children: _jsx(DatePicker, { onChange: onChange, showCalendarIcon: showCalendarIcon, placeholder: name ? '' : placeholderToUse, value: value, width: width, label: label }) }));
                 } })] }));
 };

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

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

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

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

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

@@ -1,8 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text, Flex } from '@chakra-ui/react';
-export const LabeledField = ({ label, children }) => {
+export const LabeledField = ({ label, isFilled = false, children, }) => {
     if (!label) {
         return _jsx(_Fragment, { children: children });
     }
-    return (_jsxs(Box, { w: "100%", children: [_jsx(Flex, { gap: "1", align: "start", children: _jsx(Text, { fontSize: "xs", fontFamily: "secondary", mb: "1", children: label }) }), children] }));
+    return (_jsxs(Box, { w: "100%", children: [isFilled && (_jsx(Flex, { gap: "1", align: "start", children: _jsx(Text, { fontSize: "xs", fontFamily: "secondary", color: "gray.2", mb: "0.5", children: label }) })), children] }));
 };

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

@@ -6,7 +6,8 @@ export const NumberField = ({ description, icon, id, label, placeholder, value,
     const { control } = useFormContext();
     const hasDescriptionAndIcon = Boolean(description) && Boolean(icon);
     return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", w: "full", children: [hasDescriptionAndIcon && (_jsx(FieldDescription, { description: description, icon: icon })), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
-                    return (_jsx(LabeledField, { label: label, children: _jsx(Input, { onChange: (e) => {
+                    const isFilled = String(value).trim().length > 0;
+                    return (_jsx(LabeledField, { label: label !== null && label !== void 0 ? label : placeholder, isFilled: isFilled, children: _jsx(Input, { onChange: (e) => {
                                 const value = e.target.valueAsNumber;
                                 const isNumber = !isNaN(value);
                                 if (!isNumber) {

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

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Controller, useFormContext } from 'react-hook-form';
 import { Box, Flex } from '@chakra-ui/react';
-import { FieldDescription, SelectInput } from '../../../../components';
+import { FieldDescription, LabeledField, SelectInput } from '../../../../components';
 export const SelectField = ({ description, id, icon, label, options, placeholder, value, }) => {
-    var _a;
+    var _a, _b;
     const { control } = useFormContext();
     const stringOptions = (_a = options === null || options === void 0 ? void 0 : options.map((option) => String(option))) !== null && _a !== void 0 ? _a : [];
-    return (_jsxs(Flex, { align: "start", gap: "base", flex: "auto", w: description ? '100%' : '40%', children: [_jsx(FieldDescription, { description: description, icon: icon }), _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 : '', label: label, width: "100%" }));
+    const isFilled = String(value).trim().length > 0;
+    const placeholderToUse = isFilled ? '' : (_b = placeholder !== null && placeholder !== void 0 ? placeholder : label) !== null && _b !== void 0 ? _b : '';
+    return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", w: description ? '100%' : '40%', children: [_jsx(FieldDescription, { description: description, icon: icon }), _jsx(Box, { w: description ? '102px' : '100%', children: _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
+                        return (_jsx(LabeledField, { label: label !== null && label !== void 0 ? label : placeholder, isFilled: String(value).trim().length > 0, children: _jsx(SelectInput, { handleClick: onChange, height: "md", initialValue: value !== null && value !== void 0 ? value : stringOptions[0], items: stringOptions, placeholder: !description ? placeholderToUse : '', label: label, width: "100%" }) }));
                     } }) })] }));
 };

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

@@ -6,9 +6,12 @@ import 'react-quill-new/dist/quill.snow.css';
 import '../../../../styles';
 import { LabeledField } from './LabeledField';
 export const TextAreaField = ({ id, label, placeholder = '', value, }) => {
+    var _a;
     const { control } = useFormContext();
+    const isFilled = String(value).trim().length > 0;
+    const placeholderToUse = isFilled ? '' : (_a = placeholder !== null && placeholder !== void 0 ? placeholder : label) !== null && _a !== void 0 ? _a : '';
     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: label, children: _jsx(QuillEditor, { theme: "snow", value: value, formats: formats, modules: { toolbar }, onChange: onChange, placeholder: placeholder }) }));
+                return (_jsx(LabeledField, { label: label !== null && label !== void 0 ? label : placeholder, isFilled: isFilled, children: _jsx(QuillEditor, { theme: "snow", value: value, formats: formats, modules: { toolbar }, onChange: onChange, placeholder: placeholderToUse }) }));
             } }) }));
 };
 const formats = [

package/dist/components/forms/readOnly/ReadOnlyToggle.js

@@ -5,5 +5,5 @@ import { Edit, IconMenu, MoreHorizontal, TextInput } from '../../../components';
 import { colors } from '../../../theme/colors';
 export const ReadOnlyToggle = ({ canEdit = false, isInputDisabled = true, menuItems = [], onChange = () => { }, onEdit = () => { }, value, }) => {
     const hasMenuItems = (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) > 0;
-    return (_jsxs(Flex, { gap: "base", p: "base", align: "stretch", bg: "lightBlue.2", children: [_jsx(TextInput, { handleChange: onChange, placeholder: t('dynamicForm.item'), value: value, isDisabled: isInputDisabled }), canEdit && (_jsx(Tooltip, { label: t('tooltips.editValue'), children: _jsx(IconButton, { "aria-label": "Edit icon", variant: "iconOutlined", icon: _jsx(Edit, { size: 16, stroke: colors.blue[3] }), maxH: "input.md", flexShrink: 0, onClick: onEdit }) })), hasMenuItems && (_jsx(IconMenu, { icon: _jsx(MoreHorizontal, { size: 28 }), menuItems: menuItems, variant: "iconOutlined", width: "64px" }))] }));
+    return (_jsxs(Flex, { gap: "base", p: "base", align: "stretch", bg: "lightBlue.2", children: [_jsx(TextInput, { handleChange: onChange, placeholder: t('dynamicForm.item'), value: value, isDisabled: isInputDisabled, showLabel: false }), canEdit && (_jsx(Tooltip, { label: t('tooltips.editValue'), children: _jsx(IconButton, { "aria-label": "Edit icon", variant: "iconOutlined", icon: _jsx(Edit, { size: 16, stroke: colors.blue[3] }), h: "input.md", flexShrink: 0, onClick: onEdit }) })), hasMenuItems && (_jsx(IconMenu, { icon: _jsx(MoreHorizontal, { size: 28 }), menuItems: menuItems, variant: "iconOutlined", width: "64px", buttonHeight: "input.md" }))] }));
 };

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, label, variant, width, }: SelectI) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectInput: ({ filterValue, handleClick, handleFilter, hasFilter, height, initialValue, isDisabled, items, label, variant, placeholder, width, emptyValues, }: SelectI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/SelectInput.js

@@ -5,12 +5,15 @@ import { Menu, Text, Input, InputGroup, InputRightElement, Box, } from '@chakra-
 import { textOptionVariants } from '../../helpers';
 import { LabeledField, SearchIcon, SelectButton, SelectItem, SelectList, } from '../../components';
 import { colors } from '../../theme/colors';
-export const SelectInput = ({ filterValue = '', handleClick, handleFilter = () => null, hasFilter, height = 'sm', initialValue = 'All', isDisabled, items, label, variant = 'primary', width = '10rem', }) => {
+export const SelectInput = ({ filterValue = '', handleClick, handleFilter = () => null, hasFilter, height = 'sm', initialValue = 'All', isDisabled, items, label, variant = 'primary', placeholder, width = '10rem', emptyValues = ['', 'All'], }) => {
+    var _a;
     const [selectedValue, setSelectedValue] = useState(initialValue);
     useEffect(() => {
         setSelectedValue(initialValue);
     }, [initialValue]);
-    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 isFilled = ![...emptyValues, initialValue].includes(String(selectedValue));
+    const displayLabel = isFilled ? '' : (_a = placeholder !== null && placeholder !== void 0 ? placeholder : label) !== null && _a !== void 0 ? _a : initialValue;
+    return (_jsxs(Menu, { children: [_jsx(LabeledField, { label: displayLabel, isFilled: isFilled, 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/TextAreaInput.js

@@ -11,8 +11,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FormControl, Text, Textarea } from '@chakra-ui/react';
+import { LabeledField } from '../../components';
 export const TextAreaInput = (_a) => {
     var { errorMessage } = _a, props = __rest(_a, ["errorMessage"]);
     const hasError = Boolean(errorMessage);
-    return (_jsxs(FormControl, { isInvalid: hasError, children: [_jsx(Textarea, Object.assign({}, props, { bg: "neutral.white" })), hasError && _jsx(Text, { variant: "error", children: errorMessage })] }));
+    const isFilled = String(props.value).trim().length > 0;
+    const { placeholder } = props;
+    return (_jsxs(FormControl, { isInvalid: hasError, children: [_jsx(LabeledField, { label: placeholder, isFilled: isFilled, children: _jsx(Textarea, Object.assign({}, props, { bg: "neutral.white" })) }), hasError && _jsx(Text, { variant: "error", children: errorMessage })] }));
 };

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, label, 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, showLabel, ...props }: InputI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/TextInput.js

@@ -13,7 +13,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FormControl, Text, Input } from '@chakra-ui/react';
 import { LabeledField } from '../../components';
 export const TextInput = (_a) => {
-    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"]);
+    var _b;
+    var { autoCapitalize = 'on', autoCorrect = 'on', errorMessage, handleChange, hasError, id, isDisabled, label, placeholder, value = '', type = 'text', showLabel = true } = _a, props = __rest(_a, ["autoCapitalize", "autoCorrect", "errorMessage", "handleChange", "hasError", "id", "isDisabled", "label", "placeholder", "value", "type", "showLabel"]);
     const error = hasError && !isDisabled;
-    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 })] }));
+    const isFilled = String(value).trim().length > 0 && showLabel;
+    const placeholderToUse = isFilled ? '' : (_b = placeholder !== null && placeholder !== void 0 ? placeholder : label) !== null && _b !== void 0 ? _b : '';
+    return (_jsxs(FormControl, { isInvalid: error, children: [_jsx(LabeledField, { label: label !== null && label !== void 0 ? label : placeholder, isFilled: isFilled, children: _jsx(Input, Object.assign({}, props, { autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, id: id, placeholder: placeholderToUse, value: value, type: type, onChange: handleChange, isInvalid: error, isDisabled: isDisabled, _placeholder: { color: 'gray.2' } })) }), error && _jsx(Text, { variant: "error", children: errorMessage })] }));
 };

package/dist/components/launchpad/IconMenu.d.ts

@@ -1,2 +1,2 @@
 import { IconMenuI } from '../../interfaces';
-export declare const IconMenu: ({ disabled, icon, itemForm, menuItems, onClick, variant, width, zIndex, placement, }: IconMenuI) => import("react/jsx-runtime").JSX.Element;
+export declare const IconMenu: ({ disabled, icon, itemForm, menuItems, onClick, variant, width, zIndex, placement, buttonHeight, }: IconMenuI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/launchpad/IconMenu.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { MenuButton, IconButton, Menu, MenuItem, MenuList, Box, } from '@chakra-ui/react';
 import { ChevronDown, Overlay } from '../../components';
-export const IconMenu = ({ disabled = false, icon = _jsx(ChevronDown, {}), itemForm, menuItems, onClick, variant = 'menuIcon', width = 'fit-content', zIndex = '999', placement = 'bottom', }) => {
-    return (_jsx(Box, { zIndex: zIndex, children: _jsx(Menu, { isLazy: true, placement: placement, children: ({ isOpen }) => (_jsxs(_Fragment, { children: [_jsx(Overlay, { bg: "overlay", showOverlay: isOpen, position: "fixed" }), _jsx(MenuButton, { as: IconButton, "aria-label": "Options", icon: _jsx(Box, { children: icon }), variant: variant, w: width, disabled: disabled, marginTop: "0 !important", onClick: onClick, "data-testid": "icon-menu" }), _jsx(MenuList, { zIndex: "5", children: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(({ handleClick, label }) => (_jsx(MenuItem, { "data-testid": label, onClick: (e) => {
+export const IconMenu = ({ disabled = false, icon = _jsx(ChevronDown, {}), itemForm, menuItems, onClick, variant = 'menuIcon', width = 'fit-content', zIndex = '999', placement = 'bottom', buttonHeight, }) => {
+    return (_jsx(Box, { zIndex: zIndex, children: _jsx(Menu, { isLazy: true, placement: placement, children: ({ isOpen }) => (_jsxs(_Fragment, { children: [_jsx(Overlay, { bg: "overlay", showOverlay: isOpen, position: "fixed" }), _jsx(MenuButton, { as: IconButton, "aria-label": "Options", icon: _jsx(Box, { children: icon }), variant: variant, w: width, disabled: disabled, marginTop: "0 !important", onClick: onClick, "data-testid": "icon-menu", h: buttonHeight }), _jsx(MenuList, { zIndex: "5", children: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(({ handleClick, label }) => (_jsx(MenuItem, { "data-testid": label, onClick: (e) => {
                                 e.stopPropagation();
                                 handleClick(itemForm);
                             }, _hover: {

package/dist/components/wizard/WizardStepOptions.js

@@ -15,7 +15,7 @@ export const WizardStepOptions = ({ form, title, callback, style = 'wizard', })
                             return (_jsxs(Container, { position: "relative", children: [value && (_jsx(Image, { src: CheckInCircle, alt: "check", w: "22px", h: "auto", position: "absolute", top: "-4px", left: "-2px", boxShadow: "lg", borderRadius: "full" })), _jsxs(Stack, Object.assign({ as: "button", py: "base", w: "full", h: "full", onClick: () => {
                                             onChange(!value);
                                             callback === null || callback === void 0 ? void 0 : callback(Object.assign(Object.assign({}, field), { value: !value }));
-                                        } }, setOptionButtonStyles(value), { children: [_jsx(Center, { h: "60%", children: _jsx(Image, { src: iconSrc, alt: "icon", w: "auto", maxW: "36px", h: "28px" }) }), _jsx(Center, { h: "40%", px: "1", children: _jsx(Text, { fontSize: "11px", textTransform: "uppercase", textAlign: "center", lineHeight: "11px", children: label }) })] }))] }));
+                                        } }, setOptionButtonStyles(value), { children: [_jsx(Center, { h: "60%", w: '100%', children: _jsx(Image, { src: iconSrc, alt: "icon", w: "auto", maxW: "36px", h: "28px" }) }), _jsx(Center, { h: "40%", px: "1", w: '100%', children: _jsx(Text, { fontSize: "11px", textTransform: "uppercase", textAlign: "center", lineHeight: "11px", children: label }) })] }))] }));
                         } }, id));
                 }) })] }));
 };

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

@@ -10,4 +10,5 @@ export interface InputI extends InputProps {
     isDisabled?: boolean;
     placeholder: string;
     value: string;
+    showLabel?: boolean;
 }

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

@@ -16,4 +16,5 @@ export interface SelectI {
     width?: string;
     variant?: 'primary' | 'secondary' | 'tertiary' | 'accountType';
     displaySelectedValue?: boolean;
+    emptyValues?: string[];
 }

package/dist/interfaces/launchpad/IconMenu.interface.d.ts

@@ -14,4 +14,5 @@ export interface IconMenuI<T = unknown> {
     width?: string;
     zIndex?: string;
     placement?: MenuProps['placement'];
+    buttonHeight?: string | number;
 }

package/package.json

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