@bsol-oss/react-datatable5 12.0.0-beta.70 → 12.0.0-beta.72

package/dist/index.mjs

@@ -3657,8 +3657,8 @@ const AccordionItem = Accordion.Item;
 //@ts-expect-error TODO: find appropriate type
 const SchemaFormContext = createContext({
     schema: {},
-    serverUrl: "",
-    requestUrl: "",
+    serverUrl: '',
+    requestUrl: '',
     order: [],
     ignore: [],
     include: [],
@@ -3714,11 +3714,11 @@ const idPickerSanityCheck = (column, foreign_key) => {
         throw new Error(`The key column does not exist in properties of column ${column} when using id-picker.`);
     }
 };
-const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, children, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, getUpdatedData = () => { }, customErrorRenderer, displayConfig = {
+const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, children, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, getUpdatedData = () => { }, customErrorRenderer, customSuccessRenderer, displayConfig = {
     showSubmitButton: true,
     showResetButton: true,
     showTitle: true,
-}, }) => {
+}, dateTimePickerLabels, idPickerLabels, }) => {
     const [isSuccess, setIsSuccess] = useState(false);
     const [isError, setIsError] = useState(false);
     const [isSubmiting, setIsSubmiting] = useState(false);
@@ -3752,7 +3752,10 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
             setError,
             getUpdatedData,
             customErrorRenderer,
+            customSuccessRenderer,
             displayConfig,
+            dateTimePickerLabels,
+            idPickerLabels,
         }, children: jsx(FormProvider, { ...form, children: children }) }));
 };
 
@@ -3804,7 +3807,7 @@ const Field = React.forwardRef(function Field(props, ref) {
 const BooleanPicker = ({ schema, column, prefix }) => {
     const { watch, formState: { errors }, setValue, } = useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
+    const { required, gridColumn = "span 12", gridRow = "span 1" } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const value = watch(colLabel);
@@ -3943,18 +3946,79 @@ const PopoverRoot = Popover.Root;
 const PopoverBody = Popover.Body;
 const PopoverTrigger = Popover.Trigger;
 
-function translateWrapper({ prefix, column, label, translate, }) {
-    return translate.t(removeIndex(`${prefix}${column}.${label}`));
-}
+/**
+ * Custom hook to simplify i18n translation for form fields.
+ * Automatically handles colLabel construction and removeIndex logic.
+ *
+ * @param column - The column name
+ * @param prefix - The prefix for the field (usually empty string or parent path)
+ * @returns Object with translation helper functions
+ *
+ * @example
+ * ```tsx
+ * const formI18n = useFormI18n(column, prefix);
+ *
+ * // Get field label
+ * <Field label={formI18n.label()} />
+ *
+ * // Get error message
+ * <Text>{formI18n.required()}</Text>
+ *
+ * // Get custom translation key
+ * <Text>{formI18n.t('add_more')}</Text>
+ *
+ * // Access the raw colLabel
+ * const colLabel = formI18n.colLabel;
+ * ```
+ */
+const useFormI18n = (column, prefix = "") => {
+    const { translate } = useSchemaContext();
+    const colLabel = `${prefix}${column}`;
+    return {
+        /**
+         * The constructed column label (prefix + column)
+         */
+        colLabel,
+        /**
+         * Get the field label translation
+         * Equivalent to: translate.t(removeIndex(`${colLabel}.field_label`))
+         */
+        label: (options) => {
+            return translate.t(removeIndex(`${colLabel}.field_label`), options);
+        },
+        /**
+         * Get the required error message translation
+         * Equivalent to: translate.t(removeIndex(`${colLabel}.field_required`))
+         */
+        required: (options) => {
+            return translate.t(removeIndex(`${colLabel}.field_required`), options);
+        },
+        /**
+         * Get a translation for any custom key relative to the field
+         * Equivalent to: translate.t(removeIndex(`${colLabel}.${key}`))
+         *
+         * @param key - The translation key suffix (e.g., 'add_more', 'total', etc.)
+         * @param options - Optional translation options (e.g., defaultValue, interpolation variables)
+         */
+        t: (key, options) => {
+            return translate.t(removeIndex(`${colLabel}.${key}`), options);
+        },
+        /**
+         * Access to the original translate object for edge cases
+         */
+        translate,
+    };
+};
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
 const DatePicker = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, setValue, } = useFormContext();
-    const { translate, timezone } = useSchemaContext();
-    const { required, gridColumn = "span 4", gridRow = "span 1", displayDateFormat = "YYYY-MM-DD", dateFormat = "YYYY-MM-DD", } = schema;
+    const { timezone } = useSchemaContext();
+    const formI18n = useFormI18n(column, prefix);
+    const { required, gridColumn = "span 12", gridRow = "span 1", displayDateFormat = "YYYY-MM-DD", dateFormat = "YYYY-MM-DD", } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
-    const colLabel = `${prefix}${column}`;
+    const colLabel = formI18n.colLabel;
     const [open, setOpen] = useState(false);
     const selectedDate = watch(colLabel);
     const displayDate = dayjs(selectedDate).tz(timezone).format(displayDateFormat);
@@ -3981,10 +4045,7 @@ const DatePicker = ({ column, schema, prefix }) => {
             console.error(e);
         }
     }, [selectedDate, dateFormat, colLabel, setValue]);
-    const customTranslate = (label) => {
-        return translateWrapper({ prefix, column, label, translate });
-    };
-    return (jsxs(Field, { label: `${customTranslate(`field_label`)}`, required: isRequired, alignItems: "stretch", gridColumn,
+    return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: "stretch", gridColumn,
         gridRow, children: [jsxs(PopoverRoot, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsx(PopoverTrigger, { asChild: true, children: jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
                                 setOpen(true);
                             }, justifyContent: "start", children: [jsx(MdDateRange, {}), selectedDate !== undefined ? `${displayDate}` : ""] }) }), jsx(PopoverContent, { children: jsxs(PopoverBody, { children: [jsx(PopoverTitle, {}), jsx(DatePicker$1, { selected: new Date(selectedDate), onDateSelected: ({ date }) => {
@@ -3992,37 +4053,37 @@ const DatePicker = ({ column, schema, prefix }) => {
                                         setOpen(false);
                                     }, labels: {
                                         monthNamesShort: [
-                                            translate.t(`common.month_1`, { defaultValue: "January" }),
-                                            translate.t(`common.month_2`, { defaultValue: "February" }),
-                                            translate.t(`common.month_3`, { defaultValue: "March" }),
-                                            translate.t(`common.month_4`, { defaultValue: "April" }),
-                                            translate.t(`common.month_5`, { defaultValue: "May" }),
-                                            translate.t(`common.month_6`, { defaultValue: "June" }),
-                                            translate.t(`common.month_7`, { defaultValue: "July" }),
-                                            translate.t(`common.month_8`, { defaultValue: "August" }),
-                                            translate.t(`common.month_9`, { defaultValue: "September" }),
-                                            translate.t(`common.month_10`, { defaultValue: "October" }),
-                                            translate.t(`common.month_11`, { defaultValue: "November" }),
-                                            translate.t(`common.month_12`, { defaultValue: "December" }),
+                                            formI18n.translate.t(`common.month_1`, { defaultValue: "January" }),
+                                            formI18n.translate.t(`common.month_2`, { defaultValue: "February" }),
+                                            formI18n.translate.t(`common.month_3`, { defaultValue: "March" }),
+                                            formI18n.translate.t(`common.month_4`, { defaultValue: "April" }),
+                                            formI18n.translate.t(`common.month_5`, { defaultValue: "May" }),
+                                            formI18n.translate.t(`common.month_6`, { defaultValue: "June" }),
+                                            formI18n.translate.t(`common.month_7`, { defaultValue: "July" }),
+                                            formI18n.translate.t(`common.month_8`, { defaultValue: "August" }),
+                                            formI18n.translate.t(`common.month_9`, { defaultValue: "September" }),
+                                            formI18n.translate.t(`common.month_10`, { defaultValue: "October" }),
+                                            formI18n.translate.t(`common.month_11`, { defaultValue: "November" }),
+                                            formI18n.translate.t(`common.month_12`, { defaultValue: "December" }),
                                         ],
                                         weekdayNamesShort: [
-                                            translate.t(`common.weekday_1`, { defaultValue: "Sun" }),
-                                            translate.t(`common.weekday_2`, { defaultValue: "Mon" }),
-                                            translate.t(`common.weekday_3`, { defaultValue: "Tue" }),
-                                            translate.t(`common.weekday_4`, {
+                                            formI18n.translate.t(`common.weekday_1`, { defaultValue: "Sun" }),
+                                            formI18n.translate.t(`common.weekday_2`, { defaultValue: "Mon" }),
+                                            formI18n.translate.t(`common.weekday_3`, { defaultValue: "Tue" }),
+                                            formI18n.translate.t(`common.weekday_4`, {
                                                 defaultValue: "Wed",
                                             }),
-                                            translate.t(`common.weekday_5`, { defaultValue: "Thu" }),
-                                            translate.t(`common.weekday_6`, { defaultValue: "Fri" }),
-                                            translate.t(`common.weekday_7`, { defaultValue: "Sat" }),
+                                            formI18n.translate.t(`common.weekday_5`, { defaultValue: "Thu" }),
+                                            formI18n.translate.t(`common.weekday_6`, { defaultValue: "Fri" }),
+                                            formI18n.translate.t(`common.weekday_7`, { defaultValue: "Sat" }),
                                         ],
-                                        backButtonLabel: translate.t(`common.back_button`, {
+                                        backButtonLabel: formI18n.translate.t(`common.back_button`, {
                                             defaultValue: "Back",
                                         }),
-                                        forwardButtonLabel: translate.t(`common.forward_button`, {
+                                        forwardButtonLabel: formI18n.translate.t(`common.forward_button`, {
                                             defaultValue: "Forward",
                                         }),
-                                    } })] }) })] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: customTranslate(`field_required`) }))] }));
+                                    } })] }) })] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: formI18n.required() }))] }));
 };
 
 function filterArray(array, searchTerm) {
@@ -4040,7 +4101,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
     const { translate } = useSchemaContext();
     const { required, variant } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
-    const { gridColumn = "span 4", gridRow = "span 1", renderDisplay } = schema;
+    const { gridColumn = "span 12", gridRow = "span 1", renderDisplay } = schema;
     const [searchText, setSearchText] = useState();
     const [limit, setLimit] = useState(10);
     const [openSearchResult, setOpenSearchResult] = useState();
@@ -4482,7 +4543,7 @@ const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }
 const FilePicker = ({ column, schema, prefix }) => {
     const { setValue, formState: { errors }, watch, } = useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn = "span 4", gridRow = "span 1", } = schema;
+    const { required, gridColumn = "span 12", gridRow = "span 1", } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const currentFiles = (watch(column) ?? []);
     const colLabel = `${prefix}${column}`;
@@ -4537,16 +4598,17 @@ const getTableData = async ({ serverUrl, in_table, searching = "", where = [], l
 
 const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
     const { watch, formState: { errors }, setValue, } = useFormContext();
-    const { serverUrl, idMap, setIdMap, translate, schema: parentSchema, } = useSchemaContext();
-    const { required, gridColumn = "span 4", gridRow = "span 1", renderDisplay, foreign_key, } = schema;
+    const { serverUrl, idMap, setIdMap, schema: parentSchema, idPickerLabels, } = useSchemaContext();
+    const formI18n = useFormI18n(column, prefix);
+    const { required, gridColumn = 'span 12', gridRow = 'span 1', renderDisplay, foreign_key, } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const { table, column: column_ref, display_column, customQueryFn, } = foreign_key;
-    const [searchText, setSearchText] = useState("");
+    const [searchText, setSearchText] = useState('');
     const [limit, setLimit] = useState(10);
     const [openSearchResult, setOpenSearchResult] = useState();
     const [page, setPage] = useState(0);
     const ref = useRef(null);
-    const colLabel = `${prefix}${column}`;
+    const colLabel = formI18n.colLabel;
     const watchId = watch(colLabel);
     const watchIds = isMultiple ? (watch(colLabel) ?? []) : [];
     // Query for search results
@@ -4555,7 +4617,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
         queryFn: async () => {
             if (customQueryFn) {
                 const { data, idMap } = await customQueryFn({
-                    searching: searchText ?? "",
+                    searching: searchText ?? '',
                     limit: limit,
                     offset: page * limit,
                 });
@@ -4566,7 +4628,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
             }
             const data = await getTableData({
                 serverUrl,
-                searching: searchText ?? "",
+                searching: searchText ?? '',
                 in_table: table,
                 limit: limit,
                 offset: page * limit,
@@ -4596,7 +4658,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
         queryFn: async () => {
             if (customQueryFn) {
                 const { data, idMap } = await customQueryFn({
-                    searching: watchIds.join(","),
+                    searching: watchIds.join(','),
                     limit: isMultiple ? watchIds.length : 1,
                     offset: 0,
                 });
@@ -4608,7 +4670,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
             if (!watchId && (!watchIds || watchIds.length === 0)) {
                 return { data: [] };
             }
-            const searchValue = isMultiple ? watchIds.join(",") : watchId;
+            const searchValue = isMultiple ? watchIds.join(',') : watchId;
             const data = await getTableData({
                 serverUrl,
                 searching: searchValue,
@@ -4645,7 +4707,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
     useEffect(() => {
         if (openSearchResult) {
             // Reset search text when opening the popover
-            setSearchText("");
+            setSearchText('');
             // Reset page to first page
             setPage(0);
             // Fetch initial data
@@ -4671,44 +4733,44 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
     const count = data?.count ?? 0;
     const getPickedValue = () => {
         if (Object.keys(idMap).length <= 0) {
-            return "";
+            return '';
         }
         const record = idMap[watchId];
         if (record === undefined) {
-            return "";
+            return '';
         }
         if (!!renderDisplay === true) {
             return renderDisplay(record);
         }
         return record[display_column];
     };
-    return (jsxs(Field, { label: `${translate.t(removeIndex(removeIndex(`${column}.field_label`)))}`, required: isRequired, alignItems: "stretch", gridColumn,
-        gridRow, children: [isMultiple && (jsxs(Flex, { flexFlow: "wrap", gap: 1, children: [watchIds.map((id) => {
+    return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
+        gridRow, children: [isMultiple && (jsxs(Flex, { flexFlow: 'wrap', gap: 1, children: [watchIds.map((id) => {
                         const item = idMap[id];
                         if (item === undefined) {
-                            return (jsx(Text, { children: translate.t(removeIndex(`${colLabel}.undefined`)) }, id));
+                            return (jsx(Text, { children: idPickerLabels?.undefined ?? formI18n.t('undefined') }, id));
                         }
                         return (jsx(Tag, { closable: true, onClick: () => {
                                 setValue(colLabel, watchIds.filter((itemId) => itemId !== item[column_ref]));
                             }, children: !!renderDisplay === true
                                 ? renderDisplay(item)
                                 : item[display_column] }, id));
-                    }), jsx(Tag, { cursor: "pointer", onClick: () => {
+                    }), jsx(Tag, { cursor: 'pointer', onClick: () => {
                             setOpenSearchResult(true);
-                        }, children: translate.t(removeIndex(`${colLabel}.add_more`)) })] })), !isMultiple && (jsx(Button, { variant: "outline", onClick: () => {
+                        }, children: idPickerLabels?.addMore ?? formI18n.t('add_more') })] })), !isMultiple && (jsx(Button, { variant: 'outline', onClick: () => {
                     setOpenSearchResult(true);
-                }, justifyContent: "start", children: queryDefault.isLoading ? jsx(Spinner, { size: "sm" }) : getPickedValue() })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start", strategy: "fixed" }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { portalled: false, children: jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsx(Input, { placeholder: translate.t(removeIndex(`${colLabel}.type_to_search`)), onChange: onSearchChange, autoComplete: "off", ref: ref, value: searchText }), jsx(PopoverTitle, {}), openSearchResult && (jsxs(Fragment, { children: [(isFetching || isLoading || isPending) && jsx(Spinner, {}), isError && (jsx(Icon, { color: "red.400", children: jsx(BiError, {}) })), jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxs(Flex, { alignItems: "center", gap: "2", children: [jsx(InfoTip, { children: `${translate.t(removeIndex(`${colLabel}.total`))} ${count}, ${translate.t(removeIndex(`${colLabel}.showing`))} ${limit} ${translate.t(removeIndex(`${colLabel}.per_page`), "per page")}` }), jsxs(Text, { fontSize: "sm", fontWeight: "bold", children: [count, jsxs(Text, { as: "span", fontSize: "xs", ml: "1", color: "gray.500", children: ["/", " ", count > 0
+                }, justifyContent: 'start', children: queryDefault.isLoading ? jsx(Spinner, { size: "sm" }) : getPickedValue() })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: 'bottom-start', strategy: 'fixed' }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { portalled: false, children: jsxs(PopoverBody, { display: 'grid', gap: 1, children: [jsx(Input, { placeholder: idPickerLabels?.typeToSearch ?? formI18n.t('type_to_search'), onChange: onSearchChange, autoComplete: "off", ref: ref, value: searchText }), jsx(PopoverTitle, {}), openSearchResult && (jsxs(Fragment, { children: [(isFetching || isLoading || isPending) && jsx(Spinner, {}), isError && (jsx(Icon, { color: 'red.400', children: jsx(BiError, {}) })), jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxs(Flex, { alignItems: "center", gap: "2", children: [jsx(InfoTip, { children: `${idPickerLabels?.total ?? formI18n.t('total')} ${count}, ${idPickerLabels?.showing ?? formI18n.t('showing')} ${limit} ${idPickerLabels?.perPage ?? formI18n.t('per_page', { defaultValue: 'per page' })}` }), jsxs(Text, { fontSize: "sm", fontWeight: "bold", children: [count, jsxs(Text, { as: "span", fontSize: "xs", ml: "1", color: "gray.500", children: ["/", ' ', count > 0
                                                                             ? `${page * limit + 1}-${Math.min((page + 1) * limit, count)}`
-                                                                            : "0"] })] })] }), jsx(Box, { children: jsxs("select", { value: limit, onChange: handleLimitChange, style: {
-                                                            padding: "4px 8px",
-                                                            borderRadius: "4px",
-                                                            border: "1px solid #ccc",
-                                                            fontSize: "14px",
-                                                        }, children: [jsx("option", { value: "5", children: "5" }), jsx("option", { value: "10", children: "10" }), jsx("option", { value: "20", children: "20" }), jsx("option", { value: "30", children: "30" })] }) })] }), jsx(Grid, { overflowY: "auto", children: dataList.length > 0 ? (jsx(Flex, { flexFlow: "column wrap", gap: 1, children: dataList.map((item) => {
+                                                                            : '0'] })] })] }), jsx(Box, { children: jsxs("select", { value: limit, onChange: handleLimitChange, style: {
+                                                            padding: '4px 8px',
+                                                            borderRadius: '4px',
+                                                            border: '1px solid #ccc',
+                                                            fontSize: '14px',
+                                                        }, children: [jsx("option", { value: "5", children: "5" }), jsx("option", { value: "10", children: "10" }), jsx("option", { value: "20", children: "20" }), jsx("option", { value: "30", children: "30" })] }) })] }), jsx(Grid, { overflowY: 'auto', children: dataList.length > 0 ? (jsx(Flex, { flexFlow: 'column wrap', gap: 1, children: dataList.map((item) => {
                                                     const selected = isMultiple
                                                         ? watchIds.some((id) => item[column_ref] === id)
                                                         : watchId === item[column_ref];
-                                                    return (jsx(Box, { cursor: "pointer", onClick: () => {
+                                                    return (jsx(Box, { cursor: 'pointer', onClick: () => {
                                                             if (!isMultiple) {
                                                                 setOpenSearchResult(false);
                                                                 setValue(colLabel, item[column_ref]);
@@ -4724,15 +4786,17 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
                                                             setValue(colLabel, [...newSet]);
                                                         }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected
                                                             ? {
-                                                                color: "colorPalette.400/50",
-                                                                fontWeight: "bold",
+                                                                color: 'colorPalette.400/50',
+                                                                fontWeight: 'bold',
                                                             }
                                                             : {}), children: !!renderDisplay === true
                                                             ? renderDisplay(item)
                                                             : item[display_column] }, item[column_ref]));
                                                 }) })) : (jsx(Text, { children: searchText
-                                                    ? translate.t(removeIndex(`${colLabel}.empty_search_result`))
-                                                    : translate.t(removeIndex(`${colLabel}.initial_results`)) })) }), jsx(PaginationRoot, { justifySelf: "center", count: count, pageSize: limit, defaultPage: 1, page: page + 1, onPageChange: (e) => setPage(e.page - 1), children: jsxs(HStack, { gap: "4", children: [jsx(PaginationPrevTrigger, {}), count > 0 && jsx(PaginationPageText, {}), jsx(PaginationNextTrigger, {})] }) })] }))] }) })] }), errors[`${colLabel}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
+                                                    ? idPickerLabels?.emptySearchResult ??
+                                                        formI18n.t('empty_search_result')
+                                                    : idPickerLabels?.initialResults ??
+                                                        formI18n.t('initial_results') })) }), jsx(PaginationRoot, { justifySelf: 'center', count: count, pageSize: limit, defaultPage: 1, page: page + 1, onPageChange: (e) => setPage(e.page - 1), children: jsxs(HStack, { gap: "4", children: [jsx(PaginationPrevTrigger, {}), count > 0 && jsx(PaginationPageText, {}), jsx(PaginationNextTrigger, {})] }) })] }))] }) })] }), errors[`${colLabel}`] && (jsx(Text, { color: 'red.400', children: formI18n.required() }))] }));
 };
 
 const NumberInputRoot = React.forwardRef(function NumberInput$1(props, ref) {
@@ -4746,7 +4810,7 @@ NumberInput.Label;
 const NumberInputField = ({ schema, column, prefix, }) => {
     const { setValue, formState: { errors }, watch, } = useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
+    const { required, gridColumn = "span 12", gridRow = "span 1" } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const value = watch(`${colLabel}`);
@@ -4831,7 +4895,7 @@ const RecordInput$1 = ({ column, schema, prefix }) => {
 const StringInputField = ({ column, schema, prefix, }) => {
     const { register, formState: { errors }, } = useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
+    const { required, gridColumn = "span 12", gridRow = "span 1" } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     return (jsx(Fragment, { children: jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn, gridRow: gridRow, children: [jsx(Input, { ...register(`${colLabel}`, { required: isRequired }), autoComplete: "off" }), errors[colLabel] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }) }));
@@ -5020,7 +5084,7 @@ Textarea.displayName = "Textarea";
 const TextAreaInput = ({ column, schema, prefix, }) => {
     const { register, formState: { errors }, } = useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
+    const { required, gridColumn = "span 12", gridRow = "span 1" } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const form = useFormContext();
@@ -5157,7 +5221,7 @@ dayjs.extend(timezone);
 const TimePicker = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, setValue, } = useFormContext();
     const { translate, timezone } = useSchemaContext();
-    const { required, gridColumn = "span 4", gridRow = "span 1", timeFormat = "HH:mm:ssZ", displayTimeFormat = "hh:mm A", } = schema;
+    const { required, gridColumn = "span 12", gridRow = "span 1", timeFormat = "HH:mm:ssZ", displayTimeFormat = "hh:mm A", } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const [open, setOpen] = useState(false);
@@ -5419,12 +5483,13 @@ dayjs.extend(utc);
 dayjs.extend(timezone);
 const DateTimePicker = ({ column, schema, prefix, }) => {
     const { watch, formState: { errors }, setValue, } = useFormContext();
-    const { translate, timezone } = useSchemaContext();
-    const { required, gridColumn = "span 4", gridRow = "span 1", displayDateFormat = "YYYY-MM-DD HH:mm:ss", 
+    const { timezone, dateTimePickerLabels } = useSchemaContext();
+    const formI18n = useFormI18n(column, prefix);
+    const { required, gridColumn = "span 12", gridRow = "span 1", displayDateFormat = "YYYY-MM-DD HH:mm:ss", 
     // with timezone
     dateFormat = "YYYY-MM-DD[T]HH:mm:ssZ", } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
-    const colLabel = `${prefix}${column}`;
+    const colLabel = formI18n.colLabel;
     const [open, setOpen] = useState(false);
     const selectedDate = watch(colLabel);
     const displayDate = dayjs(selectedDate)
@@ -5453,47 +5518,44 @@ const DateTimePicker = ({ column, schema, prefix, }) => {
             console.error(e);
         }
     }, [selectedDate, dateFormat, colLabel, setValue]);
-    const customTranslate = (label) => {
-        return translateWrapper({ prefix, column, label, translate });
-    };
-    return (jsxs(Field, { label: `${customTranslate(`field_label`)}`, required: isRequired, alignItems: "stretch", gridColumn,
+    return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: "stretch", gridColumn,
         gridRow, children: [jsxs(PopoverRoot, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsx(PopoverTrigger, { asChild: true, children: jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
                                 setOpen(true);
                             }, justifyContent: "start", children: [jsx(MdDateRange, {}), selectedDate !== undefined ? `${displayDate}` : ""] }) }), jsx(PopoverContent, { minW: "450px", children: jsxs(PopoverBody, { children: [jsx(PopoverTitle, {}), jsx(DateTimePicker$1, { value: selectedDate, onChange: (date) => {
                                         setValue(colLabel, dayjs(date).tz(timezone).format(dateFormat));
                                     }, timezone: timezone, labels: {
-                                        monthNamesShort: [
-                                            translate.t(`common.month_1`, { defaultValue: "January" }),
-                                            translate.t(`common.month_2`, { defaultValue: "February" }),
-                                            translate.t(`common.month_3`, { defaultValue: "March" }),
-                                            translate.t(`common.month_4`, { defaultValue: "April" }),
-                                            translate.t(`common.month_5`, { defaultValue: "May" }),
-                                            translate.t(`common.month_6`, { defaultValue: "June" }),
-                                            translate.t(`common.month_7`, { defaultValue: "July" }),
-                                            translate.t(`common.month_8`, { defaultValue: "August" }),
-                                            translate.t(`common.month_9`, { defaultValue: "September" }),
-                                            translate.t(`common.month_10`, { defaultValue: "October" }),
-                                            translate.t(`common.month_11`, { defaultValue: "November" }),
-                                            translate.t(`common.month_12`, { defaultValue: "December" }),
+                                        monthNamesShort: dateTimePickerLabels?.monthNamesShort ?? [
+                                            formI18n.translate.t(`common.month_1`, { defaultValue: "January" }),
+                                            formI18n.translate.t(`common.month_2`, { defaultValue: "February" }),
+                                            formI18n.translate.t(`common.month_3`, { defaultValue: "March" }),
+                                            formI18n.translate.t(`common.month_4`, { defaultValue: "April" }),
+                                            formI18n.translate.t(`common.month_5`, { defaultValue: "May" }),
+                                            formI18n.translate.t(`common.month_6`, { defaultValue: "June" }),
+                                            formI18n.translate.t(`common.month_7`, { defaultValue: "July" }),
+                                            formI18n.translate.t(`common.month_8`, { defaultValue: "August" }),
+                                            formI18n.translate.t(`common.month_9`, { defaultValue: "September" }),
+                                            formI18n.translate.t(`common.month_10`, { defaultValue: "October" }),
+                                            formI18n.translate.t(`common.month_11`, { defaultValue: "November" }),
+                                            formI18n.translate.t(`common.month_12`, { defaultValue: "December" }),
                                         ],
-                                        weekdayNamesShort: [
-                                            translate.t(`common.weekday_1`, { defaultValue: "Sun" }),
-                                            translate.t(`common.weekday_2`, { defaultValue: "Mon" }),
-                                            translate.t(`common.weekday_3`, { defaultValue: "Tue" }),
-                                            translate.t(`common.weekday_4`, {
+                                        weekdayNamesShort: dateTimePickerLabels?.weekdayNamesShort ?? [
+                                            formI18n.translate.t(`common.weekday_1`, { defaultValue: "Sun" }),
+                                            formI18n.translate.t(`common.weekday_2`, { defaultValue: "Mon" }),
+                                            formI18n.translate.t(`common.weekday_3`, { defaultValue: "Tue" }),
+                                            formI18n.translate.t(`common.weekday_4`, {
                                                 defaultValue: "Wed",
                                             }),
-                                            translate.t(`common.weekday_5`, { defaultValue: "Thu" }),
-                                            translate.t(`common.weekday_6`, { defaultValue: "Fri" }),
-                                            translate.t(`common.weekday_7`, { defaultValue: "Sat" }),
+                                            formI18n.translate.t(`common.weekday_5`, { defaultValue: "Thu" }),
+                                            formI18n.translate.t(`common.weekday_6`, { defaultValue: "Fri" }),
+                                            formI18n.translate.t(`common.weekday_7`, { defaultValue: "Sat" }),
                                         ],
-                                        backButtonLabel: translate.t(`common.back_button`, {
+                                        backButtonLabel: dateTimePickerLabels?.backButtonLabel ?? formI18n.translate.t(`common.back_button`, {
                                             defaultValue: "Back",
                                         }),
-                                        forwardButtonLabel: translate.t(`common.forward_button`, {
+                                        forwardButtonLabel: dateTimePickerLabels?.forwardButtonLabel ?? formI18n.translate.t(`common.forward_button`, {
                                             defaultValue: "Forward",
                                         }),
-                                    } })] }) })] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: customTranslate(`field_required`) }))] }));
+                                    } })] }) })] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: formI18n.required() }))] }));
 };
 
 const SchemaRenderer = ({ schema, prefix, column, }) => {
@@ -5595,7 +5657,7 @@ const ArrayViewer = ({ schema, column, prefix }) => {
 const BooleanViewer = ({ schema, column, prefix, }) => {
     const { watch, formState: { errors }, } = useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
+    const { required, gridColumn = "span 12", gridRow = "span 1" } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const value = watch(colLabel);
@@ -5631,17 +5693,14 @@ const DateViewer = ({ column, schema, prefix }) => {
 
 const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
     const { watch, formState: { errors }, } = useFormContext();
-    const { translate } = useSchemaContext();
+    const formI18n = useFormI18n(column, prefix);
     const { required } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
-    const { gridColumn = "span 4", gridRow = "span 1", renderDisplay } = schema;
-    const colLabel = `${prefix}${column}`;
+    const { gridColumn = "span 12", gridRow = "span 1", renderDisplay } = schema;
+    const colLabel = formI18n.colLabel;
     const watchEnum = watch(colLabel);
     const watchEnums = (watch(colLabel) ?? []);
-    const customTranslate = (label) => {
-        return translateWrapper({ prefix, column, label, translate });
-    };
-    return (jsxs(Field, { label: `${customTranslate(`field_label`)}`, required: isRequired, alignItems: "stretch", gridColumn,
+    return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: "stretch", gridColumn,
         gridRow, children: [isMultiple && (jsx(Flex, { flexFlow: "wrap", gap: 1, children: watchEnums.map((enumValue) => {
                     const item = enumValue;
                     if (item === undefined) {
@@ -5649,14 +5708,14 @@ const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
                     }
                     return (jsx(Tag, { size: "lg", children: !!renderDisplay === true
                             ? renderDisplay(item)
-                            : customTranslate(item) }, item));
-                }) })), !isMultiple && jsx(Text, { children: customTranslate(watchEnum) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: customTranslate(`field_required`) }))] }));
+                            : formI18n.t(item) }, item));
+                }) })), !isMultiple && jsx(Text, { children: formI18n.t(watchEnum) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: formI18n.required() }))] }));
 };
 
 const FileViewer = ({ column, schema, prefix }) => {
     const { watch } = useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn = "span 4", gridRow = "span 1", } = schema;
+    const { required, gridColumn = "span 12", gridRow = "span 1", } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const currentFiles = (watch(column) ?? []);
     const colLabel = `${prefix}${column}`;
@@ -5668,7 +5727,7 @@ const FileViewer = ({ column, schema, prefix }) => {
 const IdViewer = ({ column, schema, prefix, isMultiple = false, }) => {
     const { watch, formState: { errors }, } = useFormContext();
     const { idMap, translate } = useSchemaContext();
-    const { required, gridColumn = "span 4", gridRow = "span 1", renderDisplay, foreign_key, } = schema;
+    const { required, gridColumn = "span 12", gridRow = "span 1", renderDisplay, foreign_key, } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const { display_column } = foreign_key;
     const colLabel = `${prefix}${column}`;
@@ -5699,7 +5758,7 @@ const IdViewer = ({ column, schema, prefix, isMultiple = false, }) => {
 const NumberViewer = ({ schema, column, prefix, }) => {
     const { watch, formState: { errors }, } = useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
+    const { required, gridColumn = "span 12", gridRow = "span 1" } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const value = watch(colLabel);
@@ -5730,7 +5789,7 @@ const ObjectViewer = ({ schema, column, prefix }) => {
 const RecordInput = ({ column, schema, prefix }) => {
     const { formState: { errors }, setValue, getValues, } = useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
+    const { required, gridColumn = "span 12", gridRow = "span 1" } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const entries = Object.entries(getValues(column) ?? {});
     const [showNewEntries, setShowNewEntries] = useState(false);
@@ -5782,7 +5841,7 @@ const RecordInput = ({ column, schema, prefix }) => {
 const StringViewer = ({ column, schema, prefix, }) => {
     const { watch, formState: { errors }, } = useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
+    const { required, gridColumn = "span 12", gridRow = "span 1" } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const value = watch(colLabel);
@@ -5877,7 +5936,7 @@ const TagViewer = ({ column, schema, prefix }) => {
 const TextAreaViewer = ({ column, schema, prefix, }) => {
     const { watch, formState: { errors }, } = useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
+    const { required, gridColumn = "span 12", gridRow = "span 1" } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const value = watch(colLabel);
@@ -5887,7 +5946,7 @@ const TextAreaViewer = ({ column, schema, prefix, }) => {
 const TimeViewer = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, } = useFormContext();
     const { translate, timezone } = useSchemaContext();
-    const { required, gridColumn = "span 4", gridRow = "span 1", displayTimeFormat = "hh:mm A", } = schema;
+    const { required, gridColumn = "span 12", gridRow = "span 1", displayTimeFormat = "hh:mm A", } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const selectedDate = watch(colLabel);
@@ -6019,7 +6078,7 @@ const SubmitButton = () => {
 };
 
 const FormBody = () => {
-    const { schema, requestUrl, order, ignore, include, onSubmit, translate, requestOptions, isSuccess, setIsSuccess, isError, setIsError, isSubmiting, setIsSubmiting, isConfirming, setIsConfirming, validatedData, setValidatedData, error, setError, getUpdatedData, customErrorRenderer, displayConfig, } = useSchemaContext();
+    const { schema, requestUrl, order, ignore, include, onSubmit, translate, requestOptions, isSuccess, setIsSuccess, isError, setIsError, isSubmiting, setIsSubmiting, isConfirming, setIsConfirming, validatedData, setValidatedData, error, setError, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, } = useSchemaContext();
     const { showSubmitButton, showResetButton } = displayConfig;
     const methods = useFormContext();
     const { properties } = schema;
@@ -6116,15 +6175,19 @@ const FormBody = () => {
         include,
     });
     if (isSuccess) {
-        return (jsxs(Flex, { flexFlow: "column", gap: "2", children: [jsxs(Alert.Root, { status: "success", children: [jsx(Alert.Indicator, {}), jsx(Alert.Content, { children: jsx(Alert.Title, { children: translate.t("submit_success") }) })] }), jsx(Flex, { justifyContent: "end", children: jsx(Button$1, { onClick: async () => {
-                            setIsError(false);
-                            setIsSubmiting(false);
-                            setIsSuccess(false);
-                            setIsConfirming(false);
-                            setValidatedData(undefined);
-                            const data = await getUpdatedData();
-                            methods.reset(data);
-                        }, formNoValidate: true, children: translate.t("submit_again") }) })] }));
+        const resetHandler = async () => {
+            setIsError(false);
+            setIsSubmiting(false);
+            setIsSuccess(false);
+            setIsConfirming(false);
+            setValidatedData(undefined);
+            const data = await getUpdatedData();
+            methods.reset(data);
+        };
+        if (customSuccessRenderer) {
+            return customSuccessRenderer(resetHandler);
+        }
+        return (jsxs(Flex, { flexFlow: "column", gap: "2", children: [jsxs(Alert.Root, { status: "success", children: [jsx(Alert.Indicator, {}), jsx(Alert.Content, { children: jsx(Alert.Title, { children: translate.t("submit_success") }) })] }), jsx(Flex, { justifyContent: "end", children: jsx(Button$1, { onClick: resetHandler, formNoValidate: true, children: translate.t("submit_again") }) })] }));
     }
     if (isConfirming) {
         return (jsxs(Flex, { flexFlow: "column", gap: "2", children: [jsx(Grid, { gap: 4, gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: "repeat(12, max-content)", autoFlow: "row", children: ordered.map((column) => {
@@ -6162,12 +6225,12 @@ const DefaultForm = ({ formConfig, }) => {
     return (jsx(FormRoot, { ...formConfig, children: jsxs(Grid, { gap: "2", children: [showTitle && jsx(FormTitle, {}), jsx(FormBody, {})] }) }));
 };
 
-const useForm = ({ preLoadedValues, keyPrefix }) => {
+const useForm = ({ preLoadedValues, keyPrefix, namespace }) => {
     const form = useForm$1({
         values: preLoadedValues,
     });
     const [idMap, setIdMap] = useState({});
-    const translate = useTranslation("", { keyPrefix });
+    const translate = useTranslation(namespace || "", { keyPrefix });
     return {
         form,
         idMap,
@@ -6176,6 +6239,207 @@ const useForm = ({ preLoadedValues, keyPrefix }) => {
     };
 };
 
+/**
+ * Type definitions for error message configuration
+ */
+/**
+ * Schema-level error message builder
+ *
+ * Builds a complete errorMessage object compatible with ajv-errors plugin.
+ * Supports both i18n translation keys and plain string messages.
+ *
+ * @param config - Error message configuration
+ * @returns Complete errorMessage object for JSON Schema
+ *
+ * @example
+ * ```typescript
+ * // Simple required field errors
+ * const errorMessage = buildErrorMessages({
+ *   required: {
+ *     username: "Username is required",
+ *     email: "user.email.field_required" // i18n key
+ *   }
+ * });
+ *
+ * // With validation rules
+ * const errorMessage = buildErrorMessages({
+ *   required: {
+ *     password: "Password is required"
+ *   },
+ *   properties: {
+ *     password: {
+ *       minLength: "Password must be at least 8 characters",
+ *       pattern: "Password must contain letters and numbers"
+ *     },
+ *     age: {
+ *       minimum: "Must be 18 or older",
+ *       maximum: "Must be under 120"
+ *     }
+ *   }
+ * });
+ *
+ * // With global fallbacks
+ * const errorMessage = buildErrorMessages({
+ *   required: {
+ *     email: "Email is required"
+ *   },
+ *   minLength: "This field is too short", // applies to all fields
+ *   minimum: "Value is too small"
+ * });
+ * ```
+ */
+const buildErrorMessages = (config) => {
+    const result = {};
+    // Add required field errors
+    if (config.required && Object.keys(config.required).length > 0) {
+        result.required = config.required;
+    }
+    // Add field-specific validation errors
+    if (config.properties && Object.keys(config.properties).length > 0) {
+        result.properties = config.properties;
+    }
+    // Add global fallback error messages
+    const globalKeys = [
+        "minLength",
+        "maxLength",
+        "pattern",
+        "minimum",
+        "maximum",
+        "multipleOf",
+        "format",
+        "type",
+        "enum",
+    ];
+    globalKeys.forEach((key) => {
+        if (config[key]) {
+            result[key] = config[key];
+        }
+    });
+    return result;
+};
+/**
+ * Helper function to build required field errors
+ *
+ * Simplifies creating required field error messages, especially useful
+ * for generating i18n translation keys following a pattern.
+ *
+ * @param fields - Array of required field names
+ * @param messageOrGenerator - Either a string template or function to generate messages
+ * @returns Required field error configuration
+ *
+ * @example
+ * ```typescript
+ * // Plain string messages
+ * const required = buildRequiredErrors(
+ *   ["username", "email", "password"],
+ *   (field) => `${field} is required`
+ * );
+ * // Result: { username: "username is required", email: "email is required", ... }
+ *
+ * // i18n translation keys
+ * const required = buildRequiredErrors(
+ *   ["username", "email"],
+ *   (field) => `user.${field}.field_required`
+ * );
+ * // Result: { username: "user.username.field_required", email: "user.email.field_required" }
+ *
+ * // Same message for all fields
+ * const required = buildRequiredErrors(
+ *   ["username", "email"],
+ *   "This field is required"
+ * );
+ * // Result: { username: "This field is required", email: "This field is required" }
+ *
+ * // With keyPrefix for i18n
+ * const required = buildRequiredErrors(
+ *   ["username", "email"],
+ *   (field) => `${field}.field_required`,
+ *   "user"
+ * );
+ * // Result: { username: "user.username.field_required", email: "user.email.field_required" }
+ * ```
+ */
+const buildRequiredErrors = (fields, messageOrGenerator, keyPrefix = "") => {
+    const result = {};
+    fields.forEach((field) => {
+        if (typeof messageOrGenerator === "function") {
+            const message = messageOrGenerator(field);
+            result[field] = keyPrefix ? `${keyPrefix}.${message}` : message;
+        }
+        else {
+            result[field] = messageOrGenerator;
+        }
+    });
+    return result;
+};
+/**
+ * Helper function to build field-specific validation errors
+ *
+ * Creates property-specific error messages for multiple fields at once.
+ *
+ * @param config - Maps field names to their validation error configurations
+ * @returns Properties error configuration
+ *
+ * @example
+ * ```typescript
+ * const properties = buildFieldErrors({
+ *   username: {
+ *     minLength: "Username must be at least 3 characters",
+ *     pattern: "Username can only contain letters and numbers"
+ *   },
+ *   age: {
+ *     minimum: "Must be 18 or older",
+ *     maximum: "Must be under 120"
+ *   },
+ *   email: {
+ *     format: "Please enter a valid email address"
+ *   }
+ * });
+ * ```
+ */
+const buildFieldErrors = (config) => {
+    return config;
+};
+/**
+ * Helper function to create a complete error message configuration in one call
+ *
+ * Convenient wrapper that combines required and validation errors.
+ *
+ * @param required - Required field error messages
+ * @param properties - Field-specific validation error messages
+ * @param globalFallbacks - Global fallback error messages
+ * @returns Complete error message configuration
+ *
+ * @example
+ * ```typescript
+ * const errorMessage = createErrorMessage(
+ *   {
+ *     username: "Username is required",
+ *     email: "Email is required"
+ *   },
+ *   {
+ *     username: {
+ *       minLength: "Username must be at least 3 characters"
+ *     },
+ *     email: {
+ *       format: "Please enter a valid email"
+ *     }
+ *   },
+ *   {
+ *     minLength: "This field is too short",
+ *     format: "Invalid format"
+ *   }
+ * );
+ * ```
+ */
+const createErrorMessage = (required, properties, globalFallbacks) => {
+    return buildErrorMessages({
+        required,
+        properties,
+        ...globalFallbacks,
+    });
+};
+
 const getMultiDates = ({ selected, selectedDate, selectedDates, selectable, }) => {
     if (!selectable) {
         return [...selectedDates];
@@ -6192,4 +6456,4 @@ const getMultiDates = ({ selected, selectedDate, selectedDates, selectable, }) =
     }
 };
 
-export { CardHeader, DataDisplay, DataTable, DataTableServer, DefaultCardTitle, DefaultForm, DefaultTable, DensityToggleButton, EditSortingButton, EmptyState$1 as EmptyState, ErrorAlert, FilterDialog, FormBody, FormRoot, FormTitle, GlobalFilter, PageSizeControl, Pagination, RecordDisplay, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableDataDisplay, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableSelector, TableSorter, TableViewer, TextCell, ViewDialog, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };
+export { CardHeader, DataDisplay, DataTable, DataTableServer, DefaultCardTitle, DefaultForm, DefaultTable, DensityToggleButton, EditSortingButton, EmptyState$1 as EmptyState, ErrorAlert, FilterDialog, FormBody, FormRoot, FormTitle, GlobalFilter, PageSizeControl, Pagination, RecordDisplay, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableDataDisplay, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableSelector, TableSorter, TableViewer, TextCell, ViewDialog, buildErrorMessages, buildFieldErrors, buildRequiredErrors, createErrorMessage, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };