@bsol-oss/react-datatable5 12.0.0-beta.90 → 12.0.0-beta.92

package/dist/index.js

@@ -34,6 +34,7 @@ var dayjs = require('dayjs');
 var utc = require('dayjs/plugin/utc');
 var timezone = require('dayjs/plugin/timezone');
 var ti = require('react-icons/ti');
+var customParseFormat = require('dayjs/plugin/customParseFormat');
 var matchSorterUtils = require('@tanstack/match-sorter-utils');
 
 function _interopNamespaceDefault(e) {
@@ -561,16 +562,111 @@ const { withContext } = react.createRecipeContext({ key: "button" });
 const LinkButton = withContext("a");
 
 const [RootPropsProvider, useRootProps] = react.createContext({
-    name: "RootPropsProvider",
+    name: 'RootPropsProvider',
 });
 const variantMap = {
-    outline: { default: "ghost", ellipsis: "plain", current: "outline" },
-    solid: { default: "outline", ellipsis: "outline", current: "solid" },
-    subtle: { default: "ghost", ellipsis: "plain", current: "subtle" },
+    outline: { default: 'ghost', ellipsis: 'plain', current: 'outline' },
+    solid: { default: 'outline', ellipsis: 'outline', current: 'solid' },
+    subtle: { default: 'ghost', ellipsis: 'plain', current: 'subtle' },
 };
 const PaginationRoot = React__namespace.forwardRef(function PaginationRoot(props, ref) {
-    const { size = "sm", variant = "outline", getHref, ...rest } = props;
-    return (jsxRuntime.jsx(RootPropsProvider, { value: { size, variantMap: variantMap[variant], getHref }, children: jsxRuntime.jsx(react.Pagination.Root, { ref: ref, type: getHref ? "link" : "button", ...rest }) }));
+    const { size = 'sm', variant = 'outline', getHref, siblingCount, minSiblingCount = 1, maxSiblingCount, ...rest } = props;
+    const containerRef = React__namespace.useRef(null);
+    const [calculatedSiblingCount, setCalculatedSiblingCount] = React__namespace.useState(siblingCount);
+    React__namespace.useEffect(() => {
+        if (siblingCount !== undefined || !containerRef.current) {
+            setCalculatedSiblingCount(siblingCount);
+            return;
+        }
+        const container = containerRef.current;
+        let rafId = null;
+        const calculateSiblingCount = () => {
+            if (!container)
+                return;
+            const width = container.offsetWidth;
+            if (width === 0)
+                return;
+            // Estimate button width based on size
+            // These are approximate widths including padding for different button sizes
+            const buttonWidthMap = {
+                xs: 28,
+                sm: 36,
+                md: 40,
+                lg: 44,
+            };
+            let buttonWidth = buttonWidthMap[size] || 36;
+            // Try to measure actual button if available (for more accuracy)
+            const buttons = container.querySelectorAll('button');
+            if (buttons.length > 0) {
+                const firstButton = buttons[0];
+                if (firstButton.offsetWidth > 0) {
+                    // Use measured width, but account for text content variation
+                    const measuredWidth = firstButton.offsetWidth;
+                    // Page number buttons might be slightly wider due to text, use measured width
+                    buttonWidth = Math.max(buttonWidth, measuredWidth);
+                }
+            }
+            // Account for prev/next buttons and gaps
+            // HStack gap is typically 8px in Chakra UI
+            const gap = 8;
+            const prevNextWidth = buttonWidth * 2 + gap;
+            const availableWidth = Math.max(0, width - prevNextWidth);
+            // Each page button takes buttonWidth + gap
+            const buttonWithGap = buttonWidth + gap;
+            const maxButtons = Math.floor(availableWidth / buttonWithGap);
+            // Calculate sibling count
+            // Minimum structure: [prev] [1] [current] [last] [next] = 5 buttons
+            // With siblings: [prev] [1] [...] [current-N] ... [current] ... [current+N] [...] [last] [next]
+            // We need: prev(1) + first(1) + ellipsis(1) + siblings*2 + current(1) + ellipsis(1) + last(1) + next(1)
+            // Minimum: 5 buttons (prev, first, current, last, next)
+            // With siblings: 5 + siblings*2 + ellipsis*2 (if needed)
+            const minRequired = 5;
+            const extraButtons = Math.max(0, maxButtons - minRequired);
+            // Calculate sibling count
+            // If we have enough space for ellipsis (2 buttons), account for that
+            let calculated = minSiblingCount;
+            if (extraButtons >= 4) {
+                // Space for ellipsis (2) + siblings
+                calculated = Math.floor((extraButtons - 2) / 2);
+            }
+            else if (extraButtons >= 2) {
+                // Space for some siblings but not ellipsis
+                calculated = Math.floor(extraButtons / 2);
+            }
+            // Apply max limit if provided
+            if (maxSiblingCount !== undefined) {
+                calculated = Math.min(calculated, maxSiblingCount);
+            }
+            setCalculatedSiblingCount(Math.max(minSiblingCount, calculated));
+        };
+        const resizeObserver = new ResizeObserver(() => {
+            // Use requestAnimationFrame to debounce and ensure DOM is updated
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+            }
+            rafId = requestAnimationFrame(calculateSiblingCount);
+        });
+        resizeObserver.observe(container);
+        // Initial calculation after a short delay to ensure buttons are rendered
+        const timeoutId = setTimeout(calculateSiblingCount, 100);
+        return () => {
+            resizeObserver.disconnect();
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+            }
+            clearTimeout(timeoutId);
+        };
+    }, [size, siblingCount, minSiblingCount, maxSiblingCount]);
+    const mergedRef = React__namespace.useCallback((node) => {
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+        containerRef.current = node;
+    }, [ref]);
+    return (jsxRuntime.jsx(RootPropsProvider, { value: { size, variantMap: variantMap[variant], getHref }, children: jsxRuntime.jsx(react.Pagination.Root, { ref: mergedRef, type: getHref ? 'link' : 'button', siblingCount: calculatedSiblingCount, ...rest }) }));
 });
 const PaginationEllipsis = React__namespace.forwardRef(function PaginationEllipsis(props, ref) {
     const { size, variantMap } = useRootProps();
@@ -604,16 +700,16 @@ const PaginationNextTrigger = React__namespace.forwardRef(function PaginationNex
 });
 const PaginationItems = (props) => {
     return (jsxRuntime.jsx(react.Pagination.Context, { children: ({ pages }) => pages.map((page, index) => {
-            return page.type === "ellipsis" ? (jsxRuntime.jsx(PaginationEllipsis, { index: index, ...props }, index)) : (jsxRuntime.jsx(PaginationItem, { type: "page", value: page.value, ...props }, index));
+            return page.type === 'ellipsis' ? (jsxRuntime.jsx(PaginationEllipsis, { index: index, ...props }, index)) : (jsxRuntime.jsx(PaginationItem, { type: "page", value: page.value, ...props }, index));
         }) }));
 };
 React__namespace.forwardRef(function PaginationPageText(props, ref) {
-    const { format = "compact", ...rest } = props;
+    const { format = 'compact', ...rest } = props;
     const { page, totalPages, pageRange, count } = react.usePaginationContext();
     const content = React__namespace.useMemo(() => {
-        if (format === "short")
+        if (format === 'short')
             return `${page} / ${totalPages}`;
-        if (format === "compact")
+        if (format === 'compact')
             return `${page} / ${totalPages}`;
         return `${pageRange.start + 1} - ${Math.min(pageRange.end, count)} / ${count}`;
     }, [format, page, totalPages, pageRange, count]);
@@ -3101,14 +3197,14 @@ const DefaultCardTitle = () => {
 const TableCards = ({ isSelectable = false, showDisplayNameOnly = false, renderTitle = DefaultCardTitle, cardBodyProps = {}, }) => {
     const { table, rowSelection, setRowSelection } = useDataTableContext();
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getRowModel().rows.map((row) => {
-            return (jsxRuntime.jsx(react.Card.Root, { flex: '1 0 20rem', children: jsxRuntime.jsxs(react.Card.Body, { display: 'flex', flexFlow: 'column', gap: '0.5rem', ...cardBodyProps, children: [isSelectable && (jsxRuntime.jsx(Checkbox, { isChecked: isRowSelected(row.id, rowSelection),
+            return (jsxRuntime.jsx(react.Card.Root, { flex: '1 0 20rem', children: jsxRuntime.jsxs(react.Card.Body, { display: 'flex', flexFlow: 'column', gap: '0.5rem', ...cardBodyProps, children: [isSelectable && (jsxRuntime.jsx(Checkbox, { checked: isRowSelected(row.id, rowSelection),
                             disabled: !canRowSelect(row),
                             // indeterminate: row.getIsSomeSelected(),
                             onChange: createRowToggleHandler(row, rowSelection, setRowSelection) })), renderTitle(row), jsxRuntime.jsx(react.Grid, { templateColumns: 'auto 1fr', gap: '1rem', children: row.getVisibleCells().map((cell) => {
-                                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(react.Box, { children: [showDisplayNameOnly && (jsxRuntime.jsx(react.Text, { fontWeight: 'bold', children: cell.column.columnDef.meta?.displayName ??
+                                return (jsxRuntime.jsxs(react.Box, { display: "contents", children: [jsxRuntime.jsxs(react.Box, { children: [showDisplayNameOnly && (jsxRuntime.jsx(react.Text, { fontWeight: 'bold', children: cell.column.columnDef.meta?.displayName ??
                                                         cell.column.id })), !showDisplayNameOnly && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: reactTable.flexRender(cell.column.columnDef.header, 
                                                     // @ts-expect-error Assuming the CellContext interface is the same as HeaderContext
-                                                    cell.getContext()) }))] }, `chakra-table-cardcolumnid-${row.id}`), jsxRuntime.jsx(react.Box, { justifySelf: 'end', children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, `chakra-table-cardcolumn-${row.id}`)] }));
+                                                    cell.getContext()) }))] }), jsxRuntime.jsx(react.Box, { justifySelf: 'end', children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) })] }, `chakra-table-cardcell-${cell.id}`));
                             }) })] }) }, `chakra-table-card-${row.id}`));
         }) }));
 };
@@ -3139,9 +3235,13 @@ const TableFooter = ({ showSelector = false, alwaysShowSelector = true, }) => {
         }
         return false;
     };
-    return (jsxRuntime.jsx(react.Table.Footer, { children: table.getFooterGroups().map((footerGroup) => (jsxRuntime.jsxs(react.Table.Row, { display: 'flex', children: [showSelector && (jsxRuntime.jsxs(react.Table.Header, { padding: `${table.getDensityValue()}px`, onMouseEnter: () => handleRowHover(true), onMouseLeave: () => handleRowHover(false), display: 'grid', children: [isCheckBoxVisible() && (jsxRuntime.jsx(react.Box, { margin: '0rem', display: 'grid', justifyItems: 'center', alignItems: 'center', children: jsxRuntime.jsx(Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: areAllRowsSelected(table, rowSelection),
-                                // indeterminate: areSomeRowsSelected(table, rowSelection),
-                                onChange: createToggleAllRowsHandler(table, rowSelection, setRowSelection) }) })), !isCheckBoxVisible() && (jsxRuntime.jsx(react.Box, { as: "span", margin: '0rem', display: 'grid', justifyItems: 'center', alignItems: 'center', width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px` }))] })), footerGroup.headers.map((header) => (jsxRuntime.jsx(react.Table.Cell, { padding: '0', columnSpan: `${header.colSpan}`, 
+    return (jsxRuntime.jsx(react.Table.Footer, { children: table.getFooterGroups().map((footerGroup) => (jsxRuntime.jsxs(react.Table.Row, { display: 'flex', children: [showSelector && (jsxRuntime.jsx(react.Table.Cell, { padding: `${table.getDensityValue()}px`, onMouseEnter: () => handleRowHover(true), onMouseLeave: () => handleRowHover(false), display: 'grid', justifyItems: 'center', alignItems: 'center', color: {
+                        base: 'colorPalette.900',
+                        _dark: 'colorPalette.100',
+                    },
+                    bg: { base: 'colorPalette.50', _dark: 'colorPalette.950' }, children: isCheckBoxVisible() ? (jsxRuntime.jsx(Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, checked: areAllRowsSelected(table, rowSelection),
+                        // indeterminate: areSomeRowsSelected(table, rowSelection),
+                        onChange: createToggleAllRowsHandler(table, rowSelection, setRowSelection) })) : (jsxRuntime.jsx(react.Box, { as: "span", width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px` })) })), footerGroup.headers.map((header) => (jsxRuntime.jsx(react.Table.Cell, { padding: '0', columnSpan: `${header.colSpan}`, 
                     // styling resize and pinning start
                     maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, display: 'grid', children: jsxRuntime.jsx(react.MenuRoot, { children: jsxRuntime.jsx(react.MenuTrigger, { asChild: true, children: jsxRuntime.jsx(react.Box, { padding: `${table.getDensityValue()}px`, display: 'flex', alignItems: 'center', justifyContent: 'start', borderRadius: '0rem', children: jsxRuntime.jsxs(react.Flex, { gap: "0.5rem", alignItems: 'center', children: [header.isPlaceholder
                                             ? null
@@ -3335,11 +3435,136 @@ const TableLoadingComponent = ({ render, }) => {
     return jsxRuntime.jsx(jsxRuntime.Fragment, { children: render(query.isLoading) });
 };
 
-const TextCell = ({ label, containerProps = {}, textProps = {}, children, }) => {
-    if (label) {
-        return (jsxRuntime.jsx(react.Flex, { alignItems: "center", height: "100%", ...containerProps, children: jsxRuntime.jsx(Tooltip, { content: jsxRuntime.jsx(react.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", children: label }), children: jsxRuntime.jsx(react.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", ...textProps, children: children }) }) }));
+// Helper function to highlight matching text
+const highlightText$1 = (text, searchTerm) => {
+    if (!searchTerm || searchTerm.trim() === '') {
+        return String(text);
+    }
+    const textStr = String(text);
+    const searchLower = searchTerm.toLowerCase();
+    const textLower = textStr.toLowerCase();
+    const parts = [];
+    let lastIndex = 0;
+    let index = textLower.indexOf(searchLower, lastIndex);
+    while (index !== -1) {
+        // Add text before match
+        if (index > lastIndex) {
+            parts.push(textStr.substring(lastIndex, index));
+        }
+        // Add highlighted match
+        parts.push(jsxRuntime.jsx(react.Text, { as: "mark", bg: {
+                base: 'yellow.200',
+                _dark: 'yellow.800',
+            }, color: {
+                base: 'gray.900',
+                _dark: 'gray.100',
+            }, px: 0.5, borderRadius: "sm", children: textStr.substring(index, index + searchTerm.length) }, index));
+        lastIndex = index + searchTerm.length;
+        index = textLower.indexOf(searchLower, lastIndex);
+    }
+    // Add remaining text
+    if (lastIndex < textStr.length) {
+        parts.push(textStr.substring(lastIndex));
+    }
+    return parts.length > 0 ? jsxRuntime.jsx(jsxRuntime.Fragment, { children: parts }) : textStr;
+};
+const TextWithCopy = ({ text, globalFilter, highlightedText, }) => {
+    const textValue = String(text ?? '');
+    const displayText = highlightedText !== undefined
+        ? highlightedText
+        : highlightText$1(textValue, globalFilter);
+    return (jsxRuntime.jsxs(react.HStack, { gap: 2, alignItems: "center", children: [jsxRuntime.jsx(react.Text, { as: "span", children: displayText }), jsxRuntime.jsx(react.Clipboard.Root, { value: textValue, children: jsxRuntime.jsx(react.Clipboard.Trigger, { asChild: true, children: jsxRuntime.jsx(react.IconButton, { size: "xs", variant: "ghost", "aria-label": "Copy", fontSize: "1em", children: jsxRuntime.jsx(react.Clipboard.Indicator, { copied: jsxRuntime.jsx(lu.LuCheck, {}), children: jsxRuntime.jsx(lu.LuCopy, {}) }) }) }) })] }));
+};
+
+// Helper function to highlight matching text
+const highlightText = (text, searchTerm) => {
+    if (!searchTerm || searchTerm.trim() === '') {
+        return String(text);
+    }
+    const textStr = String(text);
+    const searchLower = searchTerm.toLowerCase();
+    const textLower = textStr.toLowerCase();
+    const parts = [];
+    let lastIndex = 0;
+    let index = textLower.indexOf(searchLower, lastIndex);
+    while (index !== -1) {
+        // Add text before match
+        if (index > lastIndex) {
+            parts.push(textStr.substring(lastIndex, index));
+        }
+        // Add highlighted match
+        parts.push(jsxRuntime.jsx(react.Text, { as: "mark", bg: {
+                base: 'yellow.200',
+                _dark: 'yellow.800',
+            }, color: {
+                base: 'gray.900',
+                _dark: 'gray.100',
+            }, px: 0.5, borderRadius: "sm", children: textStr.substring(index, index + searchTerm.length) }, index));
+        lastIndex = index + searchTerm.length;
+        index = textLower.indexOf(searchLower, lastIndex);
+    }
+    // Add remaining text
+    if (lastIndex < textStr.length) {
+        parts.push(textStr.substring(lastIndex));
+    }
+    return parts.length > 0 ? jsxRuntime.jsx(jsxRuntime.Fragment, { children: parts }) : textStr;
+};
+const RenderValue = ({ text, href, onClick, isCopyable, isBadge, badgeColor, colorPalette, globalFilter, }) => {
+    const highlightedText = React.useMemo(() => highlightText(text ?? '', globalFilter), [text, globalFilter]);
+    if (isBadge) {
+        return (jsxRuntime.jsx(react.Badge, { colorPalette: colorPalette || badgeColor, children: highlightedText }));
+    }
+    // onClick takes precedence over href
+    if (onClick) {
+        return (jsxRuntime.jsx(react.Box, { as: "button", onClick: onClick, cursor: "pointer", textAlign: "left", _hover: {
+                textDecoration: 'underline',
+                color: {
+                    base: 'blue.500',
+                    _dark: 'blue.400',
+                },
+            }, transition: "all 0.2s", children: highlightedText }));
     }
-    return (jsxRuntime.jsx(react.Flex, { alignItems: "center", height: "100%", ...containerProps, children: jsxRuntime.jsx(react.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", ...textProps, children: children }) }));
+    if (href) {
+        return (jsxRuntime.jsxs(react.Link, { href: href, target: "_blank", rel: "noopener noreferrer", _hover: {
+                textDecoration: 'underline',
+            }, children: [highlightedText, " ", jsxRuntime.jsx(react.Icon, { as: lu.LuExternalLink })] }));
+    }
+    if (isCopyable) {
+        return (jsxRuntime.jsx(TextWithCopy, { text: text, globalFilter: globalFilter, highlightedText: highlightedText }));
+    }
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: highlightedText });
+};
+const TextCell = ({ text, href, onClick, isCopyable, isBadge, badgeColor, colorPalette, 
+// Legacy props
+label, containerProps = {}, textProps = {}, children, }) => {
+    // Get globalFilter from context
+    // If not in DataTable context, will use default empty string from context
+    const { globalFilter } = useDataTableContext();
+    // Legacy API: if children is provided, use old behavior
+    if (children !== undefined) {
+        const displayText = typeof children === 'string' || typeof children === 'number'
+            ? String(children)
+            : children;
+        const highlightedDisplayText = typeof displayText === 'string' || typeof displayText === 'number'
+            ? highlightText(displayText, globalFilter)
+            : displayText;
+        if (label) {
+            return (jsxRuntime.jsx(react.Flex, { alignItems: 'center', height: '100%', ...containerProps, children: jsxRuntime.jsx(Tooltip, { content: jsxRuntime.jsx(react.Text, { as: "span", overflow: "hidden", textOverflow: 'ellipsis', children: label }), children: jsxRuntime.jsx(react.Text, { as: "span", overflow: "hidden", textOverflow: 'ellipsis', wordBreak: 'break-all', ...textProps, children: highlightedDisplayText }) }) }));
+        }
+        return (jsxRuntime.jsx(react.Flex, { alignItems: 'center', height: '100%', ...containerProps, children: jsxRuntime.jsx(react.Text, { as: "span", overflow: "hidden", textOverflow: 'ellipsis', wordBreak: 'break-all', ...textProps, children: highlightedDisplayText }) }));
+    }
+    // New API: use text prop
+    const displayValue = text ?? children;
+    if (Array.isArray(displayValue)) {
+        return (jsxRuntime.jsx(react.Flex, { gap: 2, flexWrap: "wrap", children: displayValue.map((item, index) => {
+                const highlightedItem = highlightText(item, globalFilter);
+                return (jsxRuntime.jsx(react.Badge, { colorPalette: colorPalette || badgeColor, children: highlightedItem }, index));
+            }) }));
+    }
+    if (!!displayValue === false) {
+        return (jsxRuntime.jsx(react.Text, { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden", wordBreak: "break-all", display: "flex", alignItems: "center", height: "100%", children: "-" }));
+    }
+    return (jsxRuntime.jsx(react.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", wordBreak: "break-all", overflow: "auto", display: "flex", alignItems: "center", height: "100%", children: jsxRuntime.jsx(RenderValue, { text: displayValue, href: href, onClick: onClick, isCopyable: isCopyable, isBadge: isBadge, badgeColor: badgeColor, colorPalette: colorPalette, globalFilter: globalFilter }) }));
 };
 
 const Tag = React__namespace.forwardRef(function Tag(props, ref) {
@@ -3502,7 +3727,7 @@ const snakeToLabel = (str) => {
         .join(" "); // Join with space
 };
 
-const RecordDisplay = ({ object, boxProps, translate, prefix = "", }) => {
+const RecordDisplay = ({ object, boxProps, translate, prefix = '', }) => {
     const getColumn = ({ field }) => {
         if (translate !== undefined) {
             return translate.t(`${prefix}${field}`);
@@ -3512,8 +3737,9 @@ const RecordDisplay = ({ object, boxProps, translate, prefix = "", }) => {
     if (object === null) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "null" });
     }
-    return (jsxRuntime.jsx(react.Grid, { rowGap: 1, padding: 1, overflow: "auto", ...boxProps, children: Object.entries(object).map(([field, value]) => {
-            return (jsxRuntime.jsxs(react.Grid, { columnGap: 2, gridTemplateColumns: "auto 1fr", children: [jsxRuntime.jsx(react.Text, { color: "colorPalette.400", children: getColumn({ field }) }), typeof value === "object" ? (jsxRuntime.jsx(RecordDisplay, { object: value, prefix: `${prefix}${field}.`, translate: translate })) : (jsxRuntime.jsx(react.Text, { children: JSON.stringify(value) }))] }, field));
+    return (jsxRuntime.jsx(react.Grid, { rowGap: 1, padding: 1, overflow: 'auto', ...boxProps, children: Object.entries(object).map(([field, value], index) => {
+            const uniqueKey = `${prefix}${field}-${index}`;
+            return (jsxRuntime.jsxs(react.Grid, { columnGap: 2, gridTemplateColumns: 'auto 1fr', children: [jsxRuntime.jsx(react.Text, { color: 'colorPalette.400', children: getColumn({ field }) }), typeof value === 'object' && value !== null ? (jsxRuntime.jsx(RecordDisplay, { object: value, prefix: `${prefix}${field}.`, translate: translate })) : (jsxRuntime.jsx(react.Text, { children: JSON.stringify(value) }))] }, uniqueKey));
         }) }));
 };
 
@@ -3804,13 +4030,10 @@ const idPickerSanityCheck = (column, foreign_key) => {
     if (!!foreign_key == false) {
         throw new Error(`The key foreign_key does not exist in properties of column ${column} when using id-picker.`);
     }
-    const { table, column: foreignKeyColumn, display_column } = foreign_key;
+    const { table, column: foreignKeyColumn } = foreign_key;
     if (!!table == false) {
         throw new Error(`The key table does not exist in properties of column ${table} when using id-picker.`);
     }
-    if (!!display_column == false) {
-        throw new Error(`The key display_column does not exist in properties of column ${column} when using id-picker.`);
-    }
     if (!!foreignKeyColumn == false) {
         throw new Error(`The key column does not exist in properties of column ${column} when using id-picker.`);
     }
@@ -3819,7 +4042,7 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
     showSubmitButton: true,
     showResetButton: true,
     showTitle: true,
-}, requireConfirmation = false, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, insideDialog = false, }) => {
+}, requireConfirmation = false, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, insideDialog = false, }) => {
     const [isSuccess, setIsSuccess] = React.useState(false);
     const [isError, setIsError] = React.useState(false);
     const [isSubmiting, setIsSubmiting] = React.useState(false);
@@ -3909,6 +4132,7 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
             idPickerLabels,
             enumPickerLabels,
             filePickerLabels,
+            formButtonLabels,
             ajvResolver: ajvResolver(schema),
             insideDialog,
         }, children: jsxRuntime.jsx(reactHookForm.FormProvider, { ...form, children: children }) }));
@@ -3918,40 +4142,107 @@ function removeIndex(str) {
     return str.replace(/\.\d+\./g, ".");
 }
 
+/**
+ * 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$1 = (column, prefix = '', schema) => {
+    const { translate } = useSchemaContext();
+    const colLabel = `${prefix}${column}`;
+    return {
+        /**
+         * The constructed column label (prefix + column)
+         */
+        colLabel,
+        /**
+         * Get the field label from schema title prop, or fall back to translation
+         * Uses schema.title if available, otherwise: translate.t(removeIndex(`${colLabel}.field_label`))
+         */
+        label: (options) => {
+            if (schema?.title) {
+                return schema.title;
+            }
+            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,
+    };
+};
+
 const ArrayRenderer = ({ schema, column, prefix, }) => {
-    const { gridRow, gridColumn = "1/span 12", required, items } = schema;
+    const { gridRow, gridColumn = '1/span 12', required, items } = schema;
     // @ts-expect-error TODO: find suitable types
     const { type } = items;
-    const { translate } = useSchemaContext();
     const colLabel = `${prefix}${column}`;
     const isRequired = required?.some((columnId) => columnId === column);
+    const formI18n = useFormI18n$1(column, prefix, schema);
     const { formState: { errors }, setValue, watch, } = reactHookForm.useFormContext();
     const fields = (watch(colLabel) ?? []);
-    return (jsxRuntime.jsxs(react.Flex, { gridRow, gridColumn, flexFlow: "column", gap: 2, children: [jsxRuntime.jsxs(react.Box, { as: "label", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsxRuntime.jsx("span", { children: "*" })] }), jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: 2, children: fields.map((field, index) => (jsxRuntime.jsxs(react.Grid, { gridTemplateColumns: '1fr auto', gap: 2, bgColor: { base: "colorPalette.100", _dark: "colorPalette.900" }, p: 2, borderRadius: 4, borderWidth: 1, borderColor: {
-                        base: "colorPalette.200",
-                        _dark: "colorPalette.800",
-                    }, children: [jsxRuntime.jsx(react.Grid, { gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", children: jsxRuntime.jsx(SchemaRenderer, { column: `${index}`,
+    return (jsxRuntime.jsxs(react.Flex, { gridRow, gridColumn, flexFlow: 'column', gap: 2, children: [jsxRuntime.jsxs(react.Box, { as: "label", children: [formI18n.label(), isRequired && jsxRuntime.jsx("span", { children: "*" })] }), jsxRuntime.jsx(react.Flex, { flexFlow: 'column', gap: 2, children: fields.map((field, index) => (jsxRuntime.jsxs(react.Grid, { gridTemplateColumns: '1fr auto', gap: 2, bgColor: { base: 'colorPalette.100', _dark: 'colorPalette.900' }, p: 2, borderRadius: 4, borderWidth: 1, borderColor: {
+                        base: 'colorPalette.200',
+                        _dark: 'colorPalette.800',
+                    }, children: [jsxRuntime.jsx(react.Grid, { gridTemplateColumns: 'repeat(12, 1fr)', autoFlow: 'row', children: jsxRuntime.jsx(SchemaRenderer, { column: `${index}`,
                                 prefix: `${colLabel}.`,
                                 // @ts-expect-error find suitable types
-                                schema: { showLabel: false, ...(items ?? {}) } }) }), jsxRuntime.jsx(react.Flex, { justifyContent: "end", children: jsxRuntime.jsx(react.Button, { variant: "ghost", onClick: () => {
+                                schema: { showLabel: false, ...(items ?? {}) } }) }), jsxRuntime.jsx(react.Flex, { justifyContent: 'end', children: jsxRuntime.jsx(react.Button, { variant: 'ghost', onClick: () => {
                                     setValue(colLabel, fields.filter((_, curIndex) => {
                                         return curIndex !== index;
                                     }));
                                 }, children: jsxRuntime.jsx(react.Icon, { children: jsxRuntime.jsx(cg.CgTrash, {}) }) }) })] }, `${colLabel}.${index}`))) }), jsxRuntime.jsx(react.Flex, { children: jsxRuntime.jsx(react.Button, { onClick: () => {
-                        if (type === "number") {
+                        if (type === 'number') {
                             setValue(colLabel, [...fields, 0]);
                             return;
                         }
-                        if (type === "string") {
-                            setValue(colLabel, [...fields, ""]);
+                        if (type === 'string') {
+                            setValue(colLabel, [...fields, '']);
                             return;
                         }
-                        if (type === "boolean") {
+                        if (type === 'boolean') {
                             setValue(colLabel, [...fields, false]);
                             return;
                         }
                         setValue(colLabel, [...fields, {}]);
-                    }, children: translate.t(removeIndex(`${colLabel}.add`)) }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
+                    }, children: translate.t(removeIndex(`${colLabel}.add`)) }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: 'red.400', children: formI18n.required() }))] }));
 };
 
 const Field = React__namespace.forwardRef(function Field(props, ref) {
@@ -3961,15 +4252,13 @@ const Field = React__namespace.forwardRef(function Field(props, ref) {
 
 const BooleanPicker = ({ schema, column, prefix }) => {
     const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
-    const { translate } = useSchemaContext();
     const { required, gridColumn = 'span 12', gridRow = 'span 1' } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const value = watch(colLabel);
-    return (jsxRuntime.jsx(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: 'stretch', gridColumn,
-        gridRow, errorText: errors[`${colLabel}`]
-            ? translate.t(removeIndex(`${colLabel}.field_required`))
-            : undefined, invalid: !!errors[colLabel], children: jsxRuntime.jsx(CheckboxCard, { checked: value, variant: 'surface', onChange: () => {
+    const formI18n = useFormI18n$1(column, prefix, schema);
+    return (jsxRuntime.jsx(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
+        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: jsxRuntime.jsx(CheckboxCard, { checked: value, variant: 'surface', onChange: () => {
                 setValue(colLabel, !value);
             } }) }));
 };
@@ -4085,76 +4374,12 @@ let DatePicker$1 = class DatePicker extends React.Component {
     }
 };
 
-/**
- * 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, } = reactHookForm.useFormContext();
     const { timezone, dateTimePickerLabels, insideDialog } = useSchemaContext();
-    const formI18n = useFormI18n(column, prefix);
+    const formI18n = useFormI18n$1(column, prefix, schema);
     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 = formI18n.colLabel;
@@ -4272,7 +4497,7 @@ dayjs.extend(timezone);
 const DateRangePicker = ({ column, schema, prefix, }) => {
     const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
     const { timezone, insideDialog } = useSchemaContext();
-    const formI18n = useFormI18n(column, prefix);
+    const formI18n = useFormI18n$1(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 = formI18n.colLabel;
@@ -4370,7 +4595,7 @@ const DateRangePicker = ({ column, schema, prefix, }) => {
 const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLimit = false, }) => {
     const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
     const { enumPickerLabels, insideDialog } = useSchemaContext();
-    const formI18n = useFormI18n(column, prefix);
+    const formI18n = useFormI18n$1(column, prefix, schema);
     const { required, variant } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const { gridColumn = 'span 12', gridRow = 'span 1', renderDisplay } = schema;
@@ -5014,7 +5239,7 @@ function MediaBrowserDialog({ open, onClose, onSelect, title, filterImageOnly =
 const FilePicker = ({ column, schema, prefix }) => {
     const { setValue, formState: { errors }, watch, } = reactHookForm.useFormContext();
     const { filePickerLabels } = useSchemaContext();
-    const formI18n = useFormI18n(column, prefix);
+    const formI18n = useFormI18n$1(column, prefix);
     const { required, gridColumn = 'span 12', gridRow = 'span 1', type, } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const isSingleSelect = type === 'string';
@@ -5090,7 +5315,7 @@ const FilePicker = ({ column, schema, prefix }) => {
 const FormMediaLibraryBrowser = ({ column, schema, prefix, }) => {
     const { setValue, formState: { errors }, watch, } = reactHookForm.useFormContext();
     const { filePickerLabels } = useSchemaContext();
-    const formI18n = useFormI18n(column, prefix);
+    const formI18n = useFormI18n$1(column, prefix);
     const { required, gridColumn = 'span 12', gridRow = 'span 1', filePicker, type, } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const isSingleSelect = type === 'string';
@@ -5231,13 +5456,18 @@ const getTableData = async ({ serverUrl, in_table, searching = "", where = [], l
     }
 };
 
+// Default renderDisplay function that stringifies JSON
+const defaultRenderDisplay = (item) => {
+    return JSON.stringify(item);
+};
+
 const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
     const { watch, getValues, formState: { errors }, setValue, } = reactHookForm.useFormContext();
     const { serverUrl, idMap, setIdMap, idPickerLabels, insideDialog } = useSchemaContext();
-    const formI18n = useFormI18n(column, prefix);
+    const formI18n = useFormI18n$1(column, prefix, schema);
     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 { table, column: column_ref, customQueryFn, } = foreign_key;
     const [searchText, setSearchText] = React.useState('');
     const [debouncedSearchText, setDebouncedSearchText] = React.useState('');
     const [limit] = React.useState(50); // Increased limit for combobox
@@ -5315,15 +5545,19 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
     // Check if we're currently searching (user typed but debounce hasn't fired yet)
     const isSearching = searchText !== debouncedSearchText;
     // Transform data for combobox collection
+    // label is used for filtering/searching (must be a string)
+    // raw item is stored for custom rendering
     const comboboxItems = React.useMemo(() => {
-        return dataList.map((item) => ({
-            label: !!renderDisplay === true
-                ? String(renderDisplay(item))
-                : String(item[display_column] ?? ''),
-            value: String(item[column_ref]),
-            raw: item,
-        }));
-    }, [dataList, display_column, column_ref, renderDisplay]);
+        const renderFn = renderDisplay || defaultRenderDisplay;
+        return dataList.map((item) => {
+            const rendered = renderFn(item);
+            return {
+                label: typeof rendered === 'string' ? rendered : JSON.stringify(item), // Use string for filtering
+                value: String(item[column_ref]),
+                raw: item,
+            };
+        });
+    }, [dataList, column_ref, renderDisplay]);
     // Use filter hook for combobox
     const { contains } = react.useFilter({ sensitivity: 'base' });
     // Create collection for combobox
@@ -5369,9 +5603,9 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
                     return (jsxRuntime.jsx(Tag, { closable: true, onClick: () => {
                             const newValue = currentValue.filter((itemId) => itemId !== id);
                             setValue(colLabel, newValue);
-                        }, children: !!renderDisplay === true
+                        }, children: renderDisplay
                             ? renderDisplay(item)
-                            : item[display_column] }, id));
+                            : defaultRenderDisplay(item) }, id));
                 }) })), jsxRuntime.jsxs(react.Combobox.Root, { collection: collection, value: currentValue, onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, multiple: isMultiple, closeOnSelect: !isMultiple, openOnClick: true, invalid: !!errors[colLabel], width: "100%", positioning: insideDialog
                     ? { strategy: 'fixed', hideWhenDetached: true }
                     : undefined, children: [jsxRuntime.jsxs(react.Combobox.Control, { children: [jsxRuntime.jsx(react.Combobox.Input, { placeholder: idPickerLabels?.typeToSearch ?? formI18n.t('type_to_search') }), jsxRuntime.jsxs(react.Combobox.IndicatorGroup, { children: [(isFetching || isLoading || isPending) && jsxRuntime.jsx(react.Spinner, { size: "xs" }), isError && (jsxRuntime.jsx(react.Icon, { color: "fg.error", children: jsxRuntime.jsx(bi.BiError, {}) })), !isMultiple && currentValue.length > 0 && (jsxRuntime.jsx(react.Combobox.ClearTrigger, { onClick: () => {
@@ -5382,13 +5616,17 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
                                     ? idPickerLabels?.emptySearchResult ??
                                         formI18n.t('empty_search_result')
                                     : idPickerLabels?.initialResults ??
-                                        formI18n.t('initial_results') })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: collection.items.map((item, index) => (jsxRuntime.jsxs(react.Combobox.Item, { item: item, children: [jsxRuntime.jsx(react.Combobox.ItemText, { children: item.label }), jsxRuntime.jsx(react.Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) })) }) })) : (jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(react.Combobox.Positioner, { children: jsxRuntime.jsx(react.Combobox.Content, { children: isError ? (jsxRuntime.jsx(react.Text, { p: 2, color: "fg.error", fontSize: "sm", children: formI18n.t('loading_failed') })) : isFetching || isLoading || isPending || isSearching ? (
+                                        formI18n.t('initial_results') })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: collection.items.map((item, index) => (jsxRuntime.jsxs(react.Combobox.Item, { item: item, children: [jsxRuntime.jsx(react.Combobox.ItemText, { children: !!renderDisplay === true
+                                                ? renderDisplay(item.raw)
+                                                : item.label }), jsxRuntime.jsx(react.Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) })) }) })) : (jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(react.Combobox.Positioner, { children: jsxRuntime.jsx(react.Combobox.Content, { children: isError ? (jsxRuntime.jsx(react.Text, { p: 2, color: "fg.error", fontSize: "sm", children: formI18n.t('loading_failed') })) : isFetching || isLoading || isPending || isSearching ? (
                                 // Show skeleton items to prevent UI shift
                                 jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: 5 }).map((_, index) => (jsxRuntime.jsx(react.Flex, { p: 2, align: "center", gap: 2, children: jsxRuntime.jsx(react.Skeleton, { height: "20px", flex: "1" }) }, `skeleton-${index}`))) })) : collection.items.length === 0 ? (jsxRuntime.jsx(react.Combobox.Empty, { children: searchText
                                         ? idPickerLabels?.emptySearchResult ??
                                             formI18n.t('empty_search_result')
                                         : idPickerLabels?.initialResults ??
-                                            formI18n.t('initial_results') })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: collection.items.map((item, index) => (jsxRuntime.jsxs(react.Combobox.Item, { item: item, children: [jsxRuntime.jsx(react.Combobox.ItemText, { children: item.label }), jsxRuntime.jsx(react.Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) })) }) }) }))] })] }));
+                                            formI18n.t('initial_results') })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: collection.items.map((item, index) => (jsxRuntime.jsxs(react.Combobox.Item, { item: item, children: [jsxRuntime.jsx(react.Combobox.ItemText, { children: !!renderDisplay === true
+                                                    ? renderDisplay(item.raw)
+                                                    : item.label }), jsxRuntime.jsx(react.Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) })) }) }) }))] })] }));
 };
 
 const NumberInputRoot = React__namespace.forwardRef(function NumberInput(props, ref) {
@@ -5456,15 +5694,15 @@ const extractErrorMessage = (error) => {
 
 const NumberInputField = ({ schema, column, prefix, }) => {
     const { setValue, formState: { errors }, watch, } = reactHookForm.useFormContext();
-    const { translate } = useSchemaContext();
     const { required, gridColumn = 'span 12', gridRow = 'span 1', numberStorageType = 'number', } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const value = watch(`${colLabel}`);
     const fieldError = getFieldError(errors, colLabel);
-    return (jsxRuntime.jsx(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn, gridRow, errorText: fieldError
+    const formI18n = useFormI18n$1(column, prefix, schema);
+    return (jsxRuntime.jsx(Field, { label: formI18n.label(), required: isRequired, gridColumn, gridRow, errorText: fieldError
             ? fieldError.includes('required')
-                ? translate.t(removeIndex(`${colLabel}.field_required`))
+                ? formI18n.required()
                 : fieldError
             : undefined, invalid: !!fieldError, children: jsxRuntime.jsx(NumberInputRoot, { value: value, onValueChange: (details) => {
                 // Store as string or number based on configuration, default to number
@@ -5477,14 +5715,14 @@ const NumberInputField = ({ schema, column, prefix, }) => {
 
 const ObjectInput = ({ schema, column, prefix }) => {
     const { properties, gridColumn = 'span 12', gridRow = 'span 1', required, showLabel = true, } = schema;
-    const { translate } = useSchemaContext();
     const colLabel = `${prefix}${column}`;
     const isRequired = required?.some((columnId) => columnId === column);
+    const formI18n = useFormI18n$1(column, prefix, schema);
     const { formState: { errors }, } = reactHookForm.useFormContext();
     if (properties === undefined) {
         throw new Error(`properties is undefined when using ObjectInput`);
     }
-    return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [showLabel && (jsxRuntime.jsxs(react.Box, { as: "label", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsxRuntime.jsx("span", { children: "*" })] })), jsxRuntime.jsx(react.Grid, { bgColor: { base: 'colorPalette.100', _dark: 'colorPalette.900' }, p: 2, borderRadius: 4, borderWidth: 1, borderColor: {
+    return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [showLabel && (jsxRuntime.jsxs(react.Box, { as: "label", children: [formI18n.label(), isRequired && jsxRuntime.jsx("span", { children: "*" })] })), jsxRuntime.jsx(react.Grid, { bgColor: { base: 'colorPalette.100', _dark: 'colorPalette.900' }, p: 2, borderRadius: 4, borderWidth: 1, borderColor: {
                     base: 'colorPalette.200',
                     _dark: 'colorPalette.800',
                 }, gap: "4", padding: '4', gridTemplateColumns: 'repeat(12, 1fr)', autoFlow: 'row', children: Object.keys(properties ?? {}).map((key) => {
@@ -5494,10 +5732,10 @@ const ObjectInput = ({ schema, column, prefix }) => {
                         prefix: `${prefix}${column}.`,
                         properties,
                         parentRequired: required }, `form-${colLabel}-${key}`));
-                }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: 'red.400', children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
+                }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: 'red.400', children: formI18n.required() }))] }));
 };
 
-const RecordInput$1 = ({ column, schema, prefix }) => {
+const RecordInput = ({ column, schema, prefix }) => {
     const { formState: { errors }, setValue, getValues, } = reactHookForm.useFormContext();
     const { translate } = useSchemaContext();
     const { required, gridColumn = 'span 12', gridRow = 'span 1' } = schema;
@@ -5506,9 +5744,8 @@ const RecordInput$1 = ({ column, schema, prefix }) => {
     const [showNewEntries, setShowNewEntries] = React.useState(false);
     const [newKey, setNewKey] = React.useState();
     const [newValue, setNewValue] = React.useState();
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(`${column}.field_label`)}`, required: isRequired, alignItems: 'stretch', gridColumn, gridRow, errorText: errors[`${column}`]
-            ? translate.t(`${column}.field_required`)
-            : undefined, invalid: !!errors[column], children: [entries.map(([key, value]) => {
+    const formI18n = useFormI18n$1(column, prefix, schema);
+    return (jsxRuntime.jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn, gridRow, errorText: errors[`${column}`] ? formI18n.required() : undefined, invalid: !!errors[column], children: [entries.map(([key, value]) => {
                 return (jsxRuntime.jsxs(react.Grid, { templateColumns: '1fr 1fr auto', gap: 1, children: [jsxRuntime.jsx(react.Input, { value: key, onChange: (e) => {
                                 const filtered = entries.filter(([target]) => {
                                     return target !== key;
@@ -5553,12 +5790,12 @@ const RecordInput$1 = ({ column, schema, prefix }) => {
 
 const StringInputField = ({ column, schema, prefix, }) => {
     const { register, formState: { errors }, } = reactHookForm.useFormContext();
-    const { translate } = useSchemaContext();
     const { required, gridColumn = 'span 12', gridRow = 'span 1' } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const fieldError = getFieldError(errors, colLabel);
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn, gridRow: gridRow, errorText: fieldError, invalid: !!fieldError, children: jsxRuntime.jsx(react.Input, { ...register(`${colLabel}`, { required: isRequired }), autoComplete: "off" }) }) }));
+    const formI18n = useFormI18n$1(column, prefix, schema);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Field, { label: formI18n.label(), required: isRequired, gridColumn: gridColumn, gridRow: gridRow, errorText: fieldError, invalid: !!fieldError, children: jsxRuntime.jsx(react.Input, { ...register(`${colLabel}`, { required: isRequired }), autoComplete: "off" }) }) }));
 };
 
 const RadioCardItem = React__namespace.forwardRef(function RadioCardItem(props, ref) {
@@ -5743,17 +5980,17 @@ Textarea.displayName = "Textarea";
 
 const TextAreaInput = ({ column, schema, prefix, }) => {
     const { register, formState: { errors }, } = reactHookForm.useFormContext();
-    const { translate } = useSchemaContext();
     const { required, gridColumn = 'span 12', gridRow = 'span 1' } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const form = reactHookForm.useFormContext();
     const { setValue, watch } = form;
     const fieldError = getFieldError(errors, colLabel);
+    const formI18n = useFormI18n$1(column, prefix, schema);
     const watchValue = watch(colLabel);
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn ?? 'span 4', gridRow: gridRow ?? 'span 1', display: "grid", errorText: fieldError
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Field, { label: formI18n.label(), required: isRequired, gridColumn: gridColumn ?? 'span 4', gridRow: gridRow ?? 'span 1', display: "grid", errorText: fieldError
                 ? fieldError.includes('required')
-                    ? translate.t(removeIndex(`${colLabel}.field_required`))
+                    ? formI18n.required()
                     : fieldError
                 : undefined, invalid: !!fieldError, children: jsxRuntime.jsx(Textarea, { value: watchValue, onChange: (value) => setValue(colLabel, value) }) }) }));
 };
@@ -5767,7 +6004,7 @@ meridiemLabel: _meridiemLabel = {
     pm: 'pm',
 }, 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-onChange = (_newValue) => { }, timezone = 'Asia/Hong_Kong', startTime, selectedDate, }) {
+onChange = (_newValue) => { }, timezone = 'Asia/Hong_Kong', startTime, selectedDate, portalled = true, }) {
     // Generate time options (every 15 minutes)
     const timeOptions = React.useMemo(() => {
         const options = [];
@@ -5790,12 +6027,10 @@ onChange = (_newValue) => { }, timezone = 'Asia/Hong_Kong', startTime, selectedD
             for (let h = 1; h <= 12; h++) {
                 for (let m = 0; m < 60; m += 15) {
                     const hour24 = mer === 'am' ? (h === 12 ? 0 : h) : h === 12 ? 12 : h + 12;
-                    const timeStr = dayjs()
-                        .tz(timezone)
-                        .hour(hour24)
-                        .minute(m)
-                        .format('HH:mmZ');
-                    const displayTime = dayjs(`1970-01-01T${timeStr}`, 'HH:mmZ').format('hh:mm a');
+                    // Format time directly without using dayjs with dummy dates
+                    const formattedHour = h.toString().padStart(2, '0');
+                    const formattedMinute = m.toString().padStart(2, '0');
+                    const displayTime = `${formattedHour}:${formattedMinute} ${mer}`;
                     // Filter out times that would result in negative duration (only when dates are the same)
                     if (startDateTime && selectedDate && shouldFilterByDate) {
                         const selectedDateObj = dayjs(selectedDate).tz(timezone);
@@ -5808,8 +6043,8 @@ onChange = (_newValue) => { }, timezone = 'Asia/Hong_Kong', startTime, selectedD
                             continue; // Skip this option as it would result in negative duration
                         }
                     }
-                    // Calculate and append duration if startTime is provided
-                    let label = displayTime;
+                    // Calculate duration if startTime is provided
+                    let durationText;
                     if (startDateTime && selectedDate) {
                         const selectedDateObj = dayjs(selectedDate).tz(timezone);
                         const optionDateTime = selectedDateObj
@@ -5822,21 +6057,30 @@ onChange = (_newValue) => { }, timezone = 'Asia/Hong_Kong', startTime, selectedD
                             const diffMs = optionDateTime.diff(startDateTime);
                             const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
                             const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
-                            if (diffHours > 0 || diffMinutes > 0) {
-                                const diffText = diffHours > 0
-                                    ? `${diffHours}h ${diffMinutes}m`
-                                    : `${diffMinutes}m`;
-                                label = `${displayTime} (+${diffText})`;
+                            const diffSeconds = Math.floor((diffMs % (1000 * 60)) / 1000);
+                            if (diffHours > 0 || diffMinutes > 0 || diffSeconds > 0) {
+                                let diffText = '';
+                                if (diffHours > 0) {
+                                    diffText = `${diffHours}h ${diffMinutes}m`;
+                                }
+                                else if (diffMinutes > 0) {
+                                    diffText = `${diffMinutes}m ${diffSeconds}s`;
+                                }
+                                else {
+                                    diffText = `${diffSeconds}s`;
+                                }
+                                durationText = `+${diffText}`;
                             }
                         }
                     }
                     options.push({
-                        label,
+                        label: displayTime,
                         value: `${h}:${m.toString().padStart(2, '0')}:${mer}`,
                         hour: h,
                         minute: m,
                         meridiem: mer,
                         searchText: displayTime, // Use base time without duration for searching
+                        durationText,
                     });
                 }
             }
@@ -5850,22 +6094,6 @@ onChange = (_newValue) => { }, timezone = 'Asia/Hong_Kong', startTime, selectedD
         itemToValue: (item) => item.value,
         filter: contains,
     });
-    // Track input mode vs display mode
-    const [isInputMode, setIsInputMode] = React.useState(false);
-    const [inputValue, setInputValue] = React.useState('');
-    const inputRef = React.useRef(null);
-    // Switch to display mode when value is selected
-    React.useEffect(() => {
-        if (hour !== null && minute !== null && meridiem !== null) {
-            setIsInputMode(false);
-        }
-    }, [hour, minute, meridiem]);
-    // Focus input when switching to input mode
-    React.useEffect(() => {
-        if (isInputMode && inputRef.current) {
-            inputRef.current.focus();
-        }
-    }, [isInputMode]);
     // Get current value string for combobox
     const currentValue = React.useMemo(() => {
         if (hour === null || minute === null || meridiem === null) {
@@ -5873,14 +6101,14 @@ onChange = (_newValue) => { }, timezone = 'Asia/Hong_Kong', startTime, selectedD
         }
         return `${hour}:${minute.toString().padStart(2, '0')}:${meridiem}`;
     }, [hour, minute, meridiem]);
-    // INPUT MODE: Show raw input text (no duration)
-    const inputModeText = React.useMemo(() => {
-        return inputValue;
-    }, [inputValue]);
-    // DISPLAY MODE: Show selected value with duration
-    const displayModeText = React.useMemo(() => {
-        if (hour === null || minute === null || meridiem === null) {
-            return '';
+    // Calculate duration difference
+    const durationDiff = React.useMemo(() => {
+        if (!startTime ||
+            !selectedDate ||
+            hour === null ||
+            minute === null ||
+            meridiem === null) {
+            return null;
         }
         const hour24 = meridiem === 'am'
             ? hour === 12
@@ -5889,45 +6117,42 @@ onChange = (_newValue) => { }, timezone = 'Asia/Hong_Kong', startTime, selectedD
             : hour === 12
                 ? 12
                 : hour + 12;
-        const timeStr = dayjs()
-            .tz(timezone)
+        const startDateObj = dayjs(startTime).tz(timezone);
+        const selectedDateObj = dayjs(selectedDate).tz(timezone);
+        const currentDateTime = selectedDateObj
             .hour(hour24)
             .minute(minute)
-            .format('HH:mmZ');
-        const timeDisplay = dayjs(`1970-01-01T${timeStr}`, 'HH:mmZ').format('hh:mm a');
-        // Add duration if startTime is provided
-        if (startTime && selectedDate) {
-            const startDateObj = dayjs(startTime).tz(timezone);
-            const selectedDateObj = dayjs(selectedDate).tz(timezone);
-            const currentDateTime = selectedDateObj
-                .hour(hour24)
-                .minute(minute)
-                .second(0)
-                .millisecond(0);
-            if (startDateObj.isValid() && currentDateTime.isValid()) {
-                const diffMs = currentDateTime.diff(startDateObj);
-                if (diffMs >= 0) {
-                    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
-                    const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
-                    if (diffHours > 0 || diffMinutes > 0) {
-                        const diffText = diffHours > 0
-                            ? `${diffHours}h ${diffMinutes}m`
-                            : `${diffMinutes}m`;
-                        return `${timeDisplay} (+${diffText})`;
-                    }
-                }
+            .second(0)
+            .millisecond(0);
+        if (!startDateObj.isValid() || !currentDateTime.isValid()) {
+            return null;
+        }
+        const diffMs = currentDateTime.diff(startDateObj);
+        if (diffMs < 0) {
+            return null;
+        }
+        const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+        const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
+        const diffSeconds = Math.floor((diffMs % (1000 * 60)) / 1000);
+        if (diffHours > 0 || diffMinutes > 0 || diffSeconds > 0) {
+            let diffText = '';
+            if (diffHours > 0) {
+                diffText = `${diffHours}h ${diffMinutes}m`;
+            }
+            else if (diffMinutes > 0) {
+                diffText = `${diffMinutes}m ${diffSeconds}s`;
             }
+            else {
+                diffText = `${diffSeconds}s`;
+            }
+            return `+${diffText}`;
         }
-        return timeDisplay;
-    }, [hour, minute, meridiem, timezone, startTime, selectedDate]);
-    // Choose text based on mode
-    const displayText = isInputMode ? inputModeText : displayModeText;
+        return null;
+    }, [hour, minute, meridiem, startTime, selectedDate, timezone]);
     const handleClear = () => {
         setHour(null);
         setMinute(null);
         setMeridiem(null);
-        setIsInputMode(false);
-        setInputValue('');
         filter(''); // Reset filter to show all options
         onChange({ hour: null, minute: null, meridiem: null });
     };
@@ -5942,8 +6167,6 @@ onChange = (_newValue) => { }, timezone = 'Asia/Hong_Kong', startTime, selectedD
             setHour(selectedOption.hour);
             setMinute(selectedOption.minute);
             setMeridiem(selectedOption.meridiem);
-            setIsInputMode(false); // Switch to display mode
-            setInputValue('');
             filter(''); // Reset filter after selection
             onChange({
                 hour: selectedOption.hour,
@@ -5952,41 +6175,16 @@ onChange = (_newValue) => { }, timezone = 'Asia/Hong_Kong', startTime, selectedD
             });
         }
     };
-    // Handle Enter key to select first filtered option
-    const handleKeyDown = (e) => {
-        if (e.key === 'Enter' && collection.items.length > 0) {
-            e.preventDefault();
-            const firstOption = collection.items[0];
-            if (firstOption) {
-                const selectedOption = timeOptions.find((opt) => opt.value === firstOption.value);
-                if (selectedOption) {
-                    setHour(selectedOption.hour);
-                    setMinute(selectedOption.minute);
-                    setMeridiem(selectedOption.meridiem);
-                    setIsInputMode(false); // Switch to display mode
-                    setInputValue('');
-                    filter('');
-                    onChange({
-                        hour: selectedOption.hour,
-                        minute: selectedOption.minute,
-                        meridiem: selectedOption.meridiem,
-                    });
-                }
-            }
-        }
-    };
-    const handleInputValueChange = (details) => {
-        const inputValue = details.inputValue.trim();
-        setInputValue(inputValue);
-        setIsInputMode(true); // Switch to input mode
+    // Parse input value and update state
+    const parseAndCommitInput = (value) => {
+        const trimmedValue = value.trim();
         // Filter the collection based on input
-        filter(inputValue);
-        if (!inputValue) {
-            setIsInputMode(false);
+        filter(trimmedValue);
+        if (!trimmedValue) {
             return;
         }
         // Try to parse custom input using explicit regex patterns
-        const normalized = inputValue.toLowerCase().replace(/\s+/g, '');
+        const normalized = trimmedValue.toLowerCase().replace(/\s+/g, '');
         // Pattern 1: 12-hour format with meridiem (e.g., "930pm", "1230am", "9:30pm", "12:30am")
         // Matches: 1-2 digits hour, optional colon, 2 digits minute, am/pm
         const pattern12HourWithMeridiem = /^(\d{1,2}):?(\d{2})(am|pm)$/;
@@ -5997,29 +6195,43 @@ onChange = (_newValue) => { }, timezone = 'Asia/Hong_Kong', startTime, selectedD
             const parsedMeridiem = match12Hour[3];
             // Validate hour (1-12)
             if (parsedHour < 1 || parsedHour > 12) {
+                // Parse failed, select first result
+                selectFirstResult();
                 return;
             }
             // Validate minute (0-59)
-            const validMinute = parsedMinute > 59 ? 0 : parsedMinute;
+            if (parsedMinute < 0 || parsedMinute > 59) {
+                // Parse failed, select first result
+                selectFirstResult();
+                return;
+            }
             setHour(parsedHour);
-            setMinute(validMinute);
+            setMinute(parsedMinute);
             setMeridiem(parsedMeridiem);
             onChange({
                 hour: parsedHour,
-                minute: validMinute,
+                minute: parsedMinute,
                 meridiem: parsedMeridiem,
             });
             return;
         }
         // Pattern 2: 24-hour format (e.g., "2130", "09:30", "21:30")
         // Matches: 1-2 digits hour, optional colon, 2 digits minute
-        const pattern24Hour = /^(\d{2}):?(\d{2})$/;
+        const pattern24Hour = /^(\d{1,2}):?(\d{2})$/;
         const match24Hour = normalized.match(pattern24Hour);
         if (match24Hour) {
             let parsedHour = parseInt(match24Hour[1], 10);
             const parsedMinute = parseInt(match24Hour[2], 10);
             // Validate hour (0-23)
-            if (parsedHour > 23) {
+            if (parsedHour < 0 || parsedHour > 23) {
+                // Parse failed, select first result
+                selectFirstResult();
+                return;
+            }
+            // Validate minute (0-59)
+            if (parsedMinute < 0 || parsedMinute > 59) {
+                // Parse failed, select first result
+                selectFirstResult();
                 return;
             }
             // Convert 24-hour to 12-hour format
@@ -6039,32 +6251,72 @@ onChange = (_newValue) => { }, timezone = 'Asia/Hong_Kong', startTime, selectedD
             else {
                 parsedMeridiem = 'am';
             }
-            // Validate minute (0-59)
-            const validMinute = parsedMinute > 59 ? 0 : parsedMinute;
             setHour(parsedHour);
-            setMinute(validMinute);
+            setMinute(parsedMinute);
             setMeridiem(parsedMeridiem);
             onChange({
                 hour: parsedHour,
-                minute: validMinute,
+                minute: parsedMinute,
                 meridiem: parsedMeridiem,
             });
             return;
         }
+        // Parse failed, select first result
+        selectFirstResult();
+    };
+    // Select first result from filtered collection
+    const selectFirstResult = () => {
+        if (collection.items.length > 0) {
+            const firstItem = collection.items[0];
+            setHour(firstItem.hour);
+            setMinute(firstItem.minute);
+            setMeridiem(firstItem.meridiem);
+            filter(''); // Reset filter after selection
+            onChange({
+                hour: firstItem.hour,
+                minute: firstItem.minute,
+                meridiem: firstItem.meridiem,
+            });
+        }
+    };
+    const handleInputValueChange = (details) => {
+        // Filter the collection based on input, but don't parse yet
+        filter(details.inputValue);
+    };
+    const handleFocus = (e) => {
+        // Select all text when focusing
+        e.target.select();
+    };
+    const handleBlur = (e) => {
+        // Parse and commit the input value when losing focus
+        const inputValue = e.target.value;
+        if (inputValue) {
+            parseAndCommitInput(inputValue);
+        }
+    };
+    const handleKeyDown = (e) => {
+        // Commit input on Enter key
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            const inputValue = e.currentTarget.value;
+            if (inputValue) {
+                parseAndCommitInput(inputValue);
+            }
+            // Blur the input
+            e.currentTarget?.blur();
+        }
     };
-    return (jsxRuntime.jsxs(react.Grid, { justifyContent: 'center', alignItems: 'center', templateColumns: '200px auto', gap: "2", width: "auto", minWidth: "250px", children: [jsxRuntime.jsxs(react.Combobox.Root, { collection: collection, value: currentValue ? [currentValue] : [], onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, allowCustomValue: true, selectionBehavior: "replace", openOnClick: true, width: "100%", children: [jsxRuntime.jsxs(react.Combobox.Control, { children: [isInputMode ? (jsxRuntime.jsx(react.InputGroup, { startElement: jsxRuntime.jsx(bs.BsClock, {}), children: jsxRuntime.jsx(react.Combobox.Input, { ref: inputRef, placeholder: "Select time", value: displayText, onKeyDown: handleKeyDown }) })) : (jsxRuntime.jsxs(react.Grid, { templateColumns: "auto 1fr auto", alignItems: "center", gap: 2, width: "100%", minHeight: "40px", px: 3, border: "1px solid", borderColor: "gray.200", borderRadius: "md", cursor: "pointer", onClick: () => setIsInputMode(true), children: [jsxRuntime.jsx(react.Icon, { children: jsxRuntime.jsx(bs.BsClock, {}) }), jsxRuntime.jsx(react.Text, { fontSize: "sm", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: displayText || 'Select time' }), jsxRuntime.jsx(react.Combobox.Trigger, { onClick: (e) => {
-                                            e.stopPropagation();
-                                            setIsInputMode(true);
-                                        } })] })), isInputMode && (jsxRuntime.jsxs(react.Combobox.IndicatorGroup, { children: [jsxRuntime.jsx(react.Combobox.ClearTrigger, {}), jsxRuntime.jsx(react.Combobox.Trigger, {})] }))] }), jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(react.Combobox.Positioner, { children: jsxRuntime.jsxs(react.Combobox.Content, { children: [jsxRuntime.jsx(react.Combobox.Empty, { children: "No time found" }), collection.items.map((item) => (jsxRuntime.jsxs(react.Combobox.Item, { item: item, children: [item.label, jsxRuntime.jsx(react.Combobox.ItemIndicator, {})] }, item.value)))] }) }) })] }), jsxRuntime.jsx(react.Button, { onClick: handleClear, size: "sm", variant: "ghost", children: jsxRuntime.jsx(react.Icon, { children: jsxRuntime.jsx(md.MdCancel, {}) }) })] }));
+    return (jsxRuntime.jsx(react.Flex, { direction: "column", gap: 3, children: jsxRuntime.jsxs(react.Flex, { alignItems: "center", gap: "2", width: "auto", minWidth: "300px", children: [jsxRuntime.jsxs(react.Combobox.Root, { collection: collection, value: currentValue ? [currentValue] : [], onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, allowCustomValue: true, selectionBehavior: "replace", openOnClick: true, flex: 1, children: [jsxRuntime.jsxs(react.Combobox.Control, { children: [jsxRuntime.jsx(react.InputGroup, { startElement: jsxRuntime.jsx(bs.BsClock, {}), children: jsxRuntime.jsx(react.Combobox.Input, { placeholder: "hh:mm a", onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown }) }), jsxRuntime.jsx(react.Combobox.IndicatorGroup, { children: jsxRuntime.jsx(react.Combobox.Trigger, {}) })] }), jsxRuntime.jsx(react.Portal, { disabled: !portalled, children: jsxRuntime.jsx(react.Combobox.Positioner, { children: jsxRuntime.jsxs(react.Combobox.Content, { children: [jsxRuntime.jsx(react.Combobox.Empty, { children: "No time found" }), collection.items.map((item) => (jsxRuntime.jsxs(react.Combobox.Item, { item: item, children: [jsxRuntime.jsxs(react.Flex, { alignItems: "center", gap: 2, width: "100%", children: [jsxRuntime.jsx(react.Text, { flex: 1, children: item.label }), item.durationText && (jsxRuntime.jsx(react.Tag.Root, { size: "sm", colorPalette: "blue", children: jsxRuntime.jsx(react.Tag.Label, { children: item.durationText }) }))] }), jsxRuntime.jsx(react.Combobox.ItemIndicator, {})] }, item.value)))] }) }) })] }), durationDiff && (jsxRuntime.jsx(react.Tag.Root, { size: "sm", children: jsxRuntime.jsx(react.Tag.Label, { children: durationDiff }) })), jsxRuntime.jsx(react.Button, { onClick: handleClear, size: "sm", variant: "ghost", children: jsxRuntime.jsx(react.Icon, { children: jsxRuntime.jsx(md.MdCancel, {}) }) })] }) }));
 }
 
 dayjs.extend(timezone);
 const TimePicker = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
-    const { translate, timezone, insideDialog } = useSchemaContext();
+    const { timezone, insideDialog } = useSchemaContext();
     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 formI18n = useFormI18n$1(column, prefix, schema);
     const [open, setOpen] = React.useState(false);
     const value = watch(colLabel);
     const displayedTime = dayjs(`1970-01-01T${value}`).tz(timezone).isValid()
@@ -6119,10 +6371,8 @@ const TimePicker = ({ column, schema, prefix }) => {
         const timeString = getTimeString(newHour, newMinute, newMeridiem);
         setValue(colLabel, timeString, { shouldValidate: true, shouldDirty: true });
     };
-    return (jsxRuntime.jsx(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: 'stretch', gridColumn,
-        gridRow, errorText: errors[`${colLabel}`]
-            ? translate.t(removeIndex(`${colLabel}.field_required`))
-            : undefined, invalid: !!errors[colLabel], children: jsxRuntime.jsxs(react.Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: jsxRuntime.jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
+    return (jsxRuntime.jsx(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
+        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: jsxRuntime.jsxs(react.Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: jsxRuntime.jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
                             setOpen(true);
                         }, justifyContent: 'start', children: [jsxRuntime.jsx(io.IoMdClock, {}), !!value ? `${displayedTime}` : ''] }) }), insideDialog ? (jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { maxH: "70vh", overflowY: "auto", children: jsxRuntime.jsx(react.Popover.Body, { overflow: "visible", children: jsxRuntime.jsx(TimePicker$1, { hour: hour, setHour: setHour, minute: minute, setMinute: setMinute, meridiem: meridiem, setMeridiem: setMeridiem, onChange: handleTimeChange, meridiemLabel: {
                                     am: translate.t(`common.am`, { defaultValue: 'AM' }),
@@ -6135,21 +6385,148 @@ const TimePicker = ({ column, schema, prefix }) => {
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
-function IsoTimePicker({ hour, setHour, minute, setMinute, second, setSecond, 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-onChange = (_newValue) => { }, startTime, selectedDate, timezone = 'Asia/Hong_Kong', }) {
-    // Generate time options (every 15 minutes, seconds always 0)
-    const timeOptions = React.useMemo(() => {
-        const options = [];
-        // Get start time for comparison if provided
-        let startDateTime = null;
-        let shouldFilterByDate = false;
-        if (startTime && selectedDate) {
-            const startDateObj = dayjs(startTime).tz(timezone);
-            const selectedDateObj = dayjs(selectedDate).tz(timezone);
-            if (startDateObj.isValid() && selectedDateObj.isValid()) {
-                startDateTime = startDateObj;
-                // Only filter if dates are the same
+dayjs.extend(customParseFormat);
+function DatePickerInput({ value, onChange, placeholder = 'Select a date', dateFormat = 'YYYY-MM-DD', displayFormat = 'YYYY-MM-DD', labels = {
+    monthNamesShort: [
+        'Jan',
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'Jun',
+        'Jul',
+        'Aug',
+        'Sep',
+        'Oct',
+        'Nov',
+        'Dec',
+    ],
+    weekdayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    backButtonLabel: 'Back',
+    forwardButtonLabel: 'Next',
+}, timezone = 'Asia/Hong_Kong', minDate, maxDate, firstDayOfWeek, showOutsideDays, monthsToDisplay = 1, insideDialog = false, readOnly = false, }) {
+    const [open, setOpen] = React.useState(false);
+    const [inputValue, setInputValue] = React.useState('');
+    // Update input value when prop value changes
+    React.useEffect(() => {
+        if (value) {
+            const formatted = typeof value === 'string'
+                ? dayjs(value).tz(timezone).isValid()
+                    ? dayjs(value).tz(timezone).format(displayFormat)
+                    : ''
+                : dayjs(value).tz(timezone).format(displayFormat);
+            setInputValue(formatted);
+        }
+        else {
+            setInputValue('');
+        }
+    }, [value, displayFormat, timezone]);
+    // Convert value to Date object for DatePicker
+    const selectedDate = value
+        ? typeof value === 'string'
+            ? dayjs(value).tz(timezone).isValid()
+                ? dayjs(value).tz(timezone).toDate()
+                : new Date()
+            : value
+        : new Date();
+    // Shared function to parse and validate input value
+    const parseAndValidateInput = (inputVal) => {
+        // If empty, clear the value
+        if (!inputVal.trim()) {
+            onChange?.(undefined);
+            setInputValue('');
+            return;
+        }
+        // Try parsing with displayFormat first
+        let parsedDate = dayjs(inputVal, displayFormat, true);
+        // If that fails, try common date formats
+        if (!parsedDate.isValid()) {
+            parsedDate = dayjs(inputVal);
+        }
+        // If still invalid, try parsing with dateFormat
+        if (!parsedDate.isValid()) {
+            parsedDate = dayjs(inputVal, dateFormat, true);
+        }
+        // If valid, check constraints and update
+        if (parsedDate.isValid()) {
+            const dateObj = parsedDate.tz(timezone).toDate();
+            // Check min/max constraints
+            if (minDate && dateObj < minDate) {
+                // Invalid: before minDate, reset to prop value
+                resetToPropValue();
+                return;
+            }
+            if (maxDate && dateObj > maxDate) {
+                // Invalid: after maxDate, reset to prop value
+                resetToPropValue();
+                return;
+            }
+            // Valid date - format and update
+            const formattedDate = parsedDate.tz(timezone).format(dateFormat);
+            const formattedDisplay = parsedDate.tz(timezone).format(displayFormat);
+            onChange?.(formattedDate);
+            setInputValue(formattedDisplay);
+        }
+        else {
+            // Invalid date - reset to prop value
+            resetToPropValue();
+        }
+    };
+    // Helper function to reset input to prop value
+    const resetToPropValue = () => {
+        if (value) {
+            const formatted = typeof value === 'string'
+                ? dayjs(value).tz(timezone).isValid()
+                    ? dayjs(value).tz(timezone).format(displayFormat)
+                    : ''
+                : dayjs(value).tz(timezone).format(displayFormat);
+            setInputValue(formatted);
+        }
+        else {
+            setInputValue('');
+        }
+    };
+    const handleInputChange = (e) => {
+        // Only update the input value, don't parse yet
+        setInputValue(e.target.value);
+    };
+    const handleInputBlur = () => {
+        // Parse and validate when input loses focus
+        parseAndValidateInput(inputValue);
+    };
+    const handleKeyDown = (e) => {
+        // Parse and validate when Enter is pressed
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            parseAndValidateInput(inputValue);
+        }
+    };
+    const handleDateSelected = ({ date }) => {
+        const formattedDate = dayjs(date).tz(timezone).format(dateFormat);
+        onChange?.(formattedDate);
+        setOpen(false);
+    };
+    const datePickerContent = (jsxRuntime.jsx(DatePicker$1, { selected: selectedDate, onDateSelected: handleDateSelected, labels: labels, minDate: minDate, maxDate: maxDate, firstDayOfWeek: firstDayOfWeek, showOutsideDays: showOutsideDays, monthsToDisplay: monthsToDisplay }));
+    return (jsxRuntime.jsxs(react.Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, autoFocus: false, children: [jsxRuntime.jsx(InputGroup, { endElement: jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: jsxRuntime.jsx(react.IconButton, { variant: "ghost", size: "2xs", "aria-label": "Open calendar", onClick: () => setOpen(true), children: jsxRuntime.jsx(react.Icon, { children: jsxRuntime.jsx(md.MdDateRange, {}) }) }) }), children: jsxRuntime.jsx(react.Input, { value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleKeyDown, placeholder: placeholder, readOnly: readOnly }) }), insideDialog ? (jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { width: "fit-content", minH: "25rem", children: jsxRuntime.jsx(react.Popover.Body, { children: datePickerContent }) }) })) : (jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { width: "fit-content", minH: "25rem", children: jsxRuntime.jsx(react.Popover.Body, { children: datePickerContent }) }) }) }))] }));
+}
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+function IsoTimePicker({ hour, setHour, minute, setMinute, second, setSecond, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+onChange = (_newValue) => { }, startTime, selectedDate, timezone = 'Asia/Hong_Kong', portalled = true, }) {
+    // Generate time options (every 15 minutes, seconds always 0)
+    const timeOptions = React.useMemo(() => {
+        const options = [];
+        // Get start time for comparison if provided
+        let startDateTime = null;
+        let shouldFilterByDate = false;
+        if (startTime && selectedDate) {
+            const startDateObj = dayjs(startTime).tz(timezone);
+            const selectedDateObj = dayjs(selectedDate).tz(timezone);
+            if (startDateObj.isValid() && selectedDateObj.isValid()) {
+                startDateTime = startDateObj;
+                // Only filter if dates are the same
                 shouldFilterByDate =
                     startDateObj.format('YYYY-MM-DD') ===
                         selectedDateObj.format('YYYY-MM-DD');
@@ -6172,8 +6549,8 @@ onChange = (_newValue) => { }, startTime, selectedDate, timezone = 'Asia/Hong_Ko
                         continue; // Skip this option as it would result in negative duration
                     }
                 }
-                // Calculate and append duration if startTime is provided
-                let label = timeDisplay;
+                // Calculate duration if startTime is provided
+                let durationText;
                 if (startDateTime && selectedDate) {
                     const selectedDateObj = dayjs(selectedDate).tz(timezone);
                     const optionDateTime = selectedDateObj
@@ -6198,17 +6575,18 @@ onChange = (_newValue) => { }, startTime, selectedDate, timezone = 'Asia/Hong_Ko
                             else {
                                 diffText = `${diffSeconds}s`;
                             }
-                            label = `${timeDisplay} (+${diffText})`;
+                            durationText = `+${diffText}`;
                         }
                     }
                 }
                 options.push({
-                    label,
+                    label: timeDisplay,
                     value: `${h}:${m}:0`,
                     hour: h,
                     minute: m,
                     second: 0,
                     searchText: timeDisplay, // Use base time without duration for searching
+                    durationText,
                 });
             }
         }
@@ -6228,46 +6606,46 @@ onChange = (_newValue) => { }, startTime, selectedDate, timezone = 'Asia/Hong_Ko
         }
         return `${hour}:${minute}:${second}`;
     }, [hour, minute, second]);
-    // Get display text for combobox
-    const displayText = React.useMemo(() => {
-        if (hour === null || minute === null || second === null) {
-            return '';
+    // Calculate duration difference
+    const durationDiff = React.useMemo(() => {
+        if (!startTime ||
+            !selectedDate ||
+            hour === null ||
+            minute === null ||
+            second === null) {
+            return null;
         }
-        const timeDisplay = `${hour.toString().padStart(2, '0')}:${minute
-            .toString()
-            .padStart(2, '0')}:${second.toString().padStart(2, '0')}`;
-        // Show duration difference if startTime is provided
-        if (startTime && selectedDate) {
-            const startDateObj = dayjs(startTime).tz(timezone);
-            const selectedDateObj = dayjs(selectedDate).tz(timezone);
-            const currentDateTime = selectedDateObj
-                .hour(hour)
-                .minute(minute)
-                .second(second ?? 0)
-                .millisecond(0);
-            if (startDateObj.isValid() && currentDateTime.isValid()) {
-                const diffMs = currentDateTime.diff(startDateObj);
-                if (diffMs >= 0) {
-                    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
-                    const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
-                    const diffSeconds = Math.floor((diffMs % (1000 * 60)) / 1000);
-                    if (diffHours > 0 || diffMinutes > 0 || diffSeconds > 0) {
-                        let diffText = '';
-                        if (diffHours > 0) {
-                            diffText = `${diffHours}h ${diffMinutes}m`;
-                        }
-                        else if (diffMinutes > 0) {
-                            diffText = `${diffMinutes}m ${diffSeconds}s`;
-                        }
-                        else {
-                            diffText = `${diffSeconds}s`;
-                        }
-                        return `${timeDisplay} (+${diffText})`;
-                    }
-                }
+        const startDateObj = dayjs(startTime).tz(timezone);
+        const selectedDateObj = dayjs(selectedDate).tz(timezone);
+        const currentDateTime = selectedDateObj
+            .hour(hour)
+            .minute(minute)
+            .second(second ?? 0)
+            .millisecond(0);
+        if (!startDateObj.isValid() || !currentDateTime.isValid()) {
+            return null;
+        }
+        const diffMs = currentDateTime.diff(startDateObj);
+        if (diffMs < 0) {
+            return null;
+        }
+        const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+        const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
+        const diffSeconds = Math.floor((diffMs % (1000 * 60)) / 1000);
+        if (diffHours > 0 || diffMinutes > 0 || diffSeconds > 0) {
+            let diffText = '';
+            if (diffHours > 0) {
+                diffText = `${diffHours}h ${diffMinutes}m`;
+            }
+            else if (diffMinutes > 0) {
+                diffText = `${diffMinutes}m ${diffSeconds}s`;
             }
+            else {
+                diffText = `${diffSeconds}s`;
+            }
+            return `+${diffText}`;
         }
-        return timeDisplay;
+        return null;
     }, [hour, minute, second, startTime, selectedDate, timezone]);
     const handleClear = () => {
         setHour(null);
@@ -6295,16 +6673,17 @@ onChange = (_newValue) => { }, startTime, selectedDate, timezone = 'Asia/Hong_Ko
             });
         }
     };
-    const handleInputValueChange = (details) => {
-        const inputValue = details.inputValue.trim();
+    // Parse input value and update state
+    const parseAndCommitInput = (value) => {
+        const trimmedValue = value.trim();
         // Filter the collection based on input
-        filter(inputValue);
-        if (!inputValue) {
+        filter(trimmedValue);
+        if (!trimmedValue) {
             return;
         }
         // Parse HH:mm:ss or HH:mm format
         const timePattern = /^(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?$/;
-        const match = inputValue.match(timePattern);
+        const match = trimmedValue.match(timePattern);
         if (match) {
             const parsedHour = parseInt(match[1], 10);
             const parsedMinute = parseInt(match[2], 10);
@@ -6324,11 +6703,12 @@ onChange = (_newValue) => { }, startTime, selectedDate, timezone = 'Asia/Hong_Ko
                     minute: parsedMinute,
                     second: parsedSecond,
                 });
+                return;
             }
         }
         else {
             // Try to parse formats like "123045" (HHmmss) or "1230" (HHmm)
-            const numbersOnly = inputValue.replace(/[^0-9]/g, '');
+            const numbersOnly = trimmedValue.replace(/[^0-9]/g, '');
             if (numbersOnly.length >= 4) {
                 const parsedHour = parseInt(numbersOnly.slice(0, 2), 10);
                 const parsedMinute = parseInt(numbersOnly.slice(2, 4), 10);
@@ -6348,11 +6728,56 @@ onChange = (_newValue) => { }, startTime, selectedDate, timezone = 'Asia/Hong_Ko
                         minute: parsedMinute,
                         second: parsedSecond,
                     });
+                    return;
                 }
             }
         }
+        // Parse failed, select first result
+        selectFirstResult();
+    };
+    // Select first result from filtered collection
+    const selectFirstResult = () => {
+        if (collection.items.length > 0) {
+            const firstItem = collection.items[0];
+            setHour(firstItem.hour);
+            setMinute(firstItem.minute);
+            setSecond(firstItem.second);
+            filter(''); // Reset filter after selection
+            onChange({
+                hour: firstItem.hour,
+                minute: firstItem.minute,
+                second: firstItem.second,
+            });
+        }
+    };
+    const handleInputValueChange = (details) => {
+        // Filter the collection based on input, but don't parse yet
+        filter(details.inputValue);
+    };
+    const handleFocus = (e) => {
+        // Select all text when focusing
+        e.target.select();
+    };
+    const handleBlur = (e) => {
+        // Parse and commit the input value when losing focus
+        const inputValue = e.target.value;
+        if (inputValue) {
+            parseAndCommitInput(inputValue);
+        }
+    };
+    const handleKeyDown = (e) => {
+        // Commit input on Enter key
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            const inputValue = e.currentTarget.value;
+            if (inputValue) {
+                parseAndCommitInput(inputValue);
+            }
+            // Blur the input
+            e.currentTarget?.blur();
+        }
     };
-    return (jsxRuntime.jsx(react.Flex, { direction: "column", gap: 3, children: jsxRuntime.jsxs(react.Grid, { justifyContent: 'center', alignItems: 'center', templateColumns: '1fr auto', gap: "2", width: "auto", minWidth: "300px", children: [jsxRuntime.jsxs(react.Combobox.Root, { collection: collection, value: currentValue ? [currentValue] : [], onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, allowCustomValue: true, selectionBehavior: "replace", openOnClick: true, width: "100%", children: [jsxRuntime.jsxs(react.Combobox.Control, { children: [jsxRuntime.jsx(react.InputGroup, { startElement: jsxRuntime.jsx(bs.BsClock, {}), children: jsxRuntime.jsx(react.Combobox.Input, { placeholder: "HH:mm:ss", value: displayText }) }), jsxRuntime.jsxs(react.Combobox.IndicatorGroup, { children: [jsxRuntime.jsx(react.Combobox.ClearTrigger, {}), jsxRuntime.jsx(react.Combobox.Trigger, {})] })] }), jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(react.Combobox.Positioner, { children: jsxRuntime.jsxs(react.Combobox.Content, { children: [jsxRuntime.jsx(react.Combobox.Empty, { children: "No time found" }), collection.items.map((item) => (jsxRuntime.jsxs(react.Combobox.Item, { item: item, children: [item.label, jsxRuntime.jsx(react.Combobox.ItemIndicator, {})] }, item.value)))] }) }) })] }), jsxRuntime.jsx(react.Button, { onClick: handleClear, size: "sm", variant: "ghost", children: jsxRuntime.jsx(react.Icon, { children: jsxRuntime.jsx(md.MdCancel, {}) }) })] }) }));
+    return (jsxRuntime.jsx(react.Flex, { direction: "column", gap: 3, children: jsxRuntime.jsxs(react.Flex, { alignItems: "center", gap: "2", width: "auto", minWidth: "300px", children: [jsxRuntime.jsxs(react.Combobox.Root, { collection: collection, value: currentValue ? [currentValue] : [], onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, allowCustomValue: true, selectionBehavior: "replace", openOnClick: true, flex: 1, children: [jsxRuntime.jsxs(react.Combobox.Control, { children: [jsxRuntime.jsx(react.InputGroup, { startElement: jsxRuntime.jsx(bs.BsClock, {}), children: jsxRuntime.jsx(react.Combobox.Input, { placeholder: "HH:mm:ss", onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown }) }), jsxRuntime.jsx(react.Combobox.IndicatorGroup, { children: jsxRuntime.jsx(react.Combobox.Trigger, {}) })] }), jsxRuntime.jsx(react.Portal, { disabled: !portalled, children: jsxRuntime.jsx(react.Combobox.Positioner, { children: jsxRuntime.jsxs(react.Combobox.Content, { children: [jsxRuntime.jsx(react.Combobox.Empty, { children: "No time found" }), collection.items.map((item) => (jsxRuntime.jsxs(react.Combobox.Item, { item: item, children: [jsxRuntime.jsxs(react.Flex, { alignItems: "center", gap: 2, width: "100%", children: [jsxRuntime.jsx(react.Text, { flex: 1, children: item.label }), item.durationText && (jsxRuntime.jsx(react.Tag.Root, { size: "sm", children: jsxRuntime.jsx(react.Tag.Label, { children: item.durationText }) }))] }), jsxRuntime.jsx(react.Combobox.ItemIndicator, {})] }, item.value)))] }) }) })] }), durationDiff && (jsxRuntime.jsx(react.Tag.Root, { size: "sm", children: jsxRuntime.jsx(react.Tag.Label, { children: durationDiff }) })), jsxRuntime.jsx(react.Button, { onClick: handleClear, size: "sm", variant: "ghost", children: jsxRuntime.jsx(react.Icon, { children: jsxRuntime.jsx(md.MdCancel, {}) }) })] }) }));
 }
 
 dayjs.extend(utc);
@@ -6375,30 +6800,193 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
     weekdayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
     backButtonLabel: 'Back',
     forwardButtonLabel: 'Next',
-}, timezone = 'Asia/Hong_Kong', startTime, }) {
-    const [selectedDate, setSelectedDate] = React.useState(value || '');
+}, timezone = 'Asia/Hong_Kong', startTime, minDate, maxDate, portalled = false, }) {
+    console.log('[DateTimePicker] Component initialized with props:', {
+        value,
+        format,
+        showSeconds,
+        timezone,
+        startTime,
+        minDate,
+        maxDate,
+    });
+    // Initialize selectedDate from value prop, converting ISO to YYYY-MM-DD format
+    const getDateString = React.useCallback((val) => {
+        if (!val)
+            return '';
+        const dateObj = dayjs(val).tz(timezone);
+        return dateObj.isValid() ? dateObj.format('YYYY-MM-DD') : '';
+    }, [timezone]);
+    const [selectedDate, setSelectedDate] = React.useState(getDateString(value));
+    // Helper to get time values from value prop with timezone
+    const getTimeFromValue = React.useCallback((val) => {
+        console.log('[DateTimePicker] getTimeFromValue called:', {
+            val,
+            timezone,
+            showSeconds,
+        });
+        if (!val) {
+            console.log('[DateTimePicker] No value provided, returning nulls');
+            return {
+                hour12: null,
+                minute: null,
+                meridiem: null,
+                hour24: null,
+                second: null,
+            };
+        }
+        const dateObj = dayjs(val).tz(timezone);
+        console.log('[DateTimePicker] Parsed date object:', {
+            original: val,
+            timezone,
+            isValid: dateObj.isValid(),
+            formatted: dateObj.format('YYYY-MM-DD HH:mm:ss Z'),
+            hour24: dateObj.hour(),
+            minute: dateObj.minute(),
+            second: dateObj.second(),
+        });
+        if (!dateObj.isValid()) {
+            console.log('[DateTimePicker] Invalid date object, returning nulls');
+            return {
+                hour12: null,
+                minute: null,
+                meridiem: null,
+                hour24: null,
+                second: null,
+            };
+        }
+        const hour24Value = dateObj.hour();
+        const hour12Value = hour24Value % 12 || 12;
+        const minuteValue = dateObj.minute();
+        const meridiemValue = hour24Value >= 12 ? 'pm' : 'am';
+        const secondValue = showSeconds ? dateObj.second() : null;
+        const result = {
+            hour12: hour12Value,
+            minute: minuteValue,
+            meridiem: meridiemValue,
+            hour24: hour24Value,
+            second: secondValue,
+        };
+        console.log('[DateTimePicker] Extracted time values:', result);
+        return result;
+    }, [timezone, showSeconds]);
+    const initialTime = getTimeFromValue(value);
+    console.log('[DateTimePicker] Initial time from value:', {
+        value,
+        initialTime,
+    });
     // Time state for 12-hour format
-    const [hour12, setHour12] = React.useState(value ? dayjs(value).hour() % 12 || 12 : null);
-    const [minute, setMinute] = React.useState(value ? dayjs(value).minute() : null);
-    const [meridiem, setMeridiem] = React.useState(value ? (dayjs(value).hour() >= 12 ? 'pm' : 'am') : null);
+    const [hour12, setHour12] = React.useState(initialTime.hour12);
+    const [minute, setMinute] = React.useState(initialTime.minute);
+    const [meridiem, setMeridiem] = React.useState(initialTime.meridiem);
     // Time state for 24-hour format
-    const [hour24, setHour24] = React.useState(value ? dayjs(value).hour() : null);
-    const [second, setSecond] = React.useState(showSeconds && value ? dayjs(value).second() : null);
+    const [hour24, setHour24] = React.useState(initialTime.hour24);
+    const [second, setSecond] = React.useState(initialTime.second);
+    // Sync selectedDate and time states when value prop changes
+    React.useEffect(() => {
+        console.log('[DateTimePicker] useEffect triggered - value changed:', {
+            value,
+            timezone,
+            format,
+        });
+        // If value is null, undefined, or invalid, clear all fields
+        if (!value || value === null || value === undefined) {
+            console.log('[DateTimePicker] Value is null/undefined, clearing all fields');
+            setSelectedDate('');
+            setHour12(null);
+            setMinute(null);
+            setMeridiem(null);
+            setHour24(null);
+            setSecond(null);
+            return;
+        }
+        // Check if value is valid
+        const dateObj = dayjs(value).tz(timezone);
+        if (!dateObj.isValid()) {
+            console.log('[DateTimePicker] Invalid value, clearing all fields');
+            setSelectedDate('');
+            setHour12(null);
+            setMinute(null);
+            setMeridiem(null);
+            setHour24(null);
+            setSecond(null);
+            return;
+        }
+        const dateString = getDateString(value);
+        console.log('[DateTimePicker] Setting selectedDate:', dateString);
+        setSelectedDate(dateString);
+        const timeData = getTimeFromValue(value);
+        console.log('[DateTimePicker] Updating time states:', {
+            timeData,
+        });
+        setHour12(timeData.hour12);
+        setMinute(timeData.minute);
+        setMeridiem(timeData.meridiem);
+        setHour24(timeData.hour24);
+        setSecond(timeData.second);
+    }, [value, getTimeFromValue, getDateString, timezone]);
     const handleDateChange = (date) => {
+        console.log('[DateTimePicker] handleDateChange called:', {
+            date,
+            timezone,
+            showSeconds,
+            currentTimeStates: { hour12, minute, meridiem, hour24, second },
+        });
+        // If date is empty or invalid, clear all fields
+        if (!date || date === '') {
+            console.log('[DateTimePicker] Empty date, clearing all fields');
+            setSelectedDate('');
+            setHour12(null);
+            setMinute(null);
+            setMeridiem(null);
+            setHour24(null);
+            setSecond(null);
+            onChange?.(undefined);
+            return;
+        }
         setSelectedDate(date);
+        // Parse the date string (YYYY-MM-DD) in the specified timezone
+        const dateObj = dayjs.tz(date, timezone);
+        console.log('[DateTimePicker] Parsed date object:', {
+            date,
+            timezone,
+            isValid: dateObj.isValid(),
+            isoString: dateObj.toISOString(),
+            formatted: dateObj.format('YYYY-MM-DD HH:mm:ss Z'),
+        });
+        if (!dateObj.isValid()) {
+            console.warn('[DateTimePicker] Invalid date object in handleDateChange, clearing fields');
+            setSelectedDate('');
+            setHour12(null);
+            setMinute(null);
+            setMeridiem(null);
+            setHour24(null);
+            setSecond(null);
+            onChange?.(undefined);
+            return;
+        }
         // When showSeconds is false, ignore seconds from the date
-        const dateObj = dayjs(date).tz(timezone);
-        if (!showSeconds && dateObj.isValid()) {
+        if (!showSeconds) {
             const dateWithoutSeconds = dateObj.second(0).millisecond(0).toISOString();
+            console.log('[DateTimePicker] Updating date without seconds:', dateWithoutSeconds);
             updateDateTime(dateWithoutSeconds);
         }
         else {
-            updateDateTime(dateObj.toISOString());
+            const dateWithSeconds = dateObj.toISOString();
+            console.log('[DateTimePicker] Updating date with seconds:', dateWithSeconds);
+            updateDateTime(dateWithSeconds);
         }
     };
     const handleTimeChange = (timeData) => {
+        console.log('[DateTimePicker] handleTimeChange called:', {
+            timeData,
+            format,
+            selectedDate,
+            timezone,
+        });
         if (format === 'iso-date-time') {
             const data = timeData;
+            console.log('[DateTimePicker] ISO format - setting 24-hour time:', data);
             setHour24(data.hour);
             setMinute(data.minute);
             if (showSeconds) {
@@ -6411,60 +6999,161 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
         }
         else {
             const data = timeData;
+            console.log('[DateTimePicker] 12-hour format - setting time:', data);
             setHour12(data.hour);
             setMinute(data.minute);
             setMeridiem(data.meridiem);
         }
-        // Use selectedDate if valid, otherwise use today's date as fallback
-        const dateToUse = selectedDate && dayjs(selectedDate).isValid()
-            ? selectedDate
-            : dayjs().tz(timezone).toISOString();
-        const dateObj = dayjs(dateToUse).tz(timezone);
+        // Use selectedDate if valid, otherwise clear all fields
+        if (!selectedDate || !dayjs(selectedDate).isValid()) {
+            console.log('[DateTimePicker] No valid selectedDate, clearing all fields');
+            setSelectedDate('');
+            setHour12(null);
+            setMinute(null);
+            setMeridiem(null);
+            setHour24(null);
+            setSecond(null);
+            onChange?.(undefined);
+            return;
+        }
+        const dateObj = dayjs(selectedDate).tz(timezone);
         if (dateObj.isValid()) {
             updateDateTime(dateObj.toISOString(), timeData);
         }
+        else {
+            console.warn('[DateTimePicker] Invalid date object in handleTimeChange, clearing fields');
+            setSelectedDate('');
+            setHour12(null);
+            setMinute(null);
+            setMeridiem(null);
+            setHour24(null);
+            setSecond(null);
+            onChange?.(undefined);
+        }
     };
     const updateDateTime = (date, timeData) => {
-        if (!date) {
+        console.log('[DateTimePicker] updateDateTime called:', {
+            date,
+            timeData,
+            format,
+            currentStates: { hour12, minute, meridiem, hour24, second },
+        });
+        if (!date || date === null || date === undefined) {
+            console.log('[DateTimePicker] No date provided, clearing all fields and calling onChange(undefined)');
+            setSelectedDate('');
+            setHour12(null);
+            setMinute(null);
+            setMeridiem(null);
+            setHour24(null);
+            setSecond(null);
             onChange?.(undefined);
             return;
         }
         // use dayjs to convert the date to the timezone
         const dateObj = dayjs(date).tz(timezone);
         if (!dateObj.isValid()) {
+            console.warn('[DateTimePicker] Invalid date object in updateDateTime, clearing fields:', date);
+            setSelectedDate('');
+            setHour12(null);
+            setMinute(null);
+            setMeridiem(null);
+            setHour24(null);
+            setSecond(null);
+            onChange?.(undefined);
             return;
         }
         const newDate = dateObj.toDate();
         if (format === 'iso-date-time') {
             const data = timeData;
-            const h = data?.hour ?? hour24;
-            const m = data?.minute ?? minute;
+            // Use timeData values if provided, otherwise fall back to current state
+            // But if timeData is explicitly provided with nulls, we need to check if all are null
+            const h = data !== undefined ? data.hour : hour24;
+            const m = data !== undefined ? data.minute : minute;
             // Always ignore seconds when showSeconds is false - set to 0
-            const s = showSeconds ? data?.second ?? second ?? 0 : 0;
+            const s = showSeconds
+                ? data !== undefined
+                    ? data.second ?? null
+                    : second ?? 0
+                : 0;
+            // If all time values are null, clear the value
+            if (h === null && m === null && (showSeconds ? s === null : true)) {
+                console.log('[DateTimePicker] All time values are null, clearing value');
+                onChange?.(undefined);
+                return;
+            }
+            console.log('[DateTimePicker] ISO format - setting time on date:', {
+                h,
+                m,
+                s,
+                showSeconds,
+            });
             if (h !== null)
                 newDate.setHours(h);
             if (m !== null)
                 newDate.setMinutes(m);
-            newDate.setSeconds(s);
+            newDate.setSeconds(s ?? 0);
         }
         else {
             const data = timeData;
-            const h = data?.hour ?? hour12;
-            const m = data?.minute ?? minute;
-            const mer = data?.meridiem ?? meridiem;
+            console.log('[DateTimePicker] Processing 12-hour format:', {
+                'data !== undefined': data !== undefined,
+                'data?.hour': data?.hour,
+                'data?.minute': data?.minute,
+                'data?.meridiem': data?.meridiem,
+                'current hour12': hour12,
+                'current minute': minute,
+                'current meridiem': meridiem,
+            });
+            // Use timeData values if provided, otherwise fall back to current state
+            const h = data !== undefined ? data.hour : hour12;
+            const m = data !== undefined ? data.minute : minute;
+            const mer = data !== undefined ? data.meridiem : meridiem;
+            console.log('[DateTimePicker] Resolved time values:', { h, m, mer });
+            // If all time values are null, clear the value
+            if (h === null && m === null && mer === null) {
+                console.log('[DateTimePicker] All time values are null, clearing value');
+                onChange?.(undefined);
+                return;
+            }
+            console.log('[DateTimePicker] 12-hour format - converting time:', {
+                h,
+                m,
+                mer,
+            });
             if (h !== null && mer !== null) {
                 let hour24 = h;
                 if (mer === 'am' && h === 12)
                     hour24 = 0;
                 else if (mer === 'pm' && h < 12)
                     hour24 = h + 12;
+                console.log('[DateTimePicker] Converted to 24-hour:', {
+                    h,
+                    mer,
+                    hour24,
+                });
                 newDate.setHours(hour24);
             }
-            if (m !== null)
+            else {
+                console.log('[DateTimePicker] Skipping hour update - h or mer is null:', {
+                    h,
+                    mer,
+                });
+            }
+            if (m !== null) {
                 newDate.setMinutes(m);
+            }
+            else {
+                console.log('[DateTimePicker] Skipping minute update - m is null');
+            }
             newDate.setSeconds(0);
         }
-        onChange?.(dayjs(newDate).tz(timezone).toISOString());
+        const finalISO = dayjs(newDate).tz(timezone).toISOString();
+        console.log('[DateTimePicker] Final ISO string to emit:', {
+            newDate: newDate.toISOString(),
+            timezone,
+            finalISO,
+        });
+        onChange?.(finalISO);
     };
     const handleClear = () => {
         setSelectedDate('');
@@ -6480,14 +7169,92 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
     const normalizedStartTime = startTime
         ? dayjs(startTime).tz(timezone).millisecond(0).toISOString()
         : undefined;
-    return (jsxRuntime.jsxs(react.Flex, { direction: "column", gap: 4, p: 4, border: "1px solid", borderColor: "gray.200", borderRadius: "md", children: [jsxRuntime.jsx(DatePicker$1, { selected: selectedDate ? dayjs(selectedDate).tz(timezone).toDate() : new Date(), onDateSelected: ({ date }) => handleDateChange(dayjs(date).tz(timezone).toISOString()), monthsToDisplay: 1, labels: labels, minDate: normalizedStartTime &&
-                    dayjs(normalizedStartTime).tz(timezone).isValid()
-                    ? dayjs(normalizedStartTime).tz(timezone).startOf('day').toDate()
-                    : undefined }), jsxRuntime.jsxs(react.Grid, { templateColumns: "1fr auto", alignItems: "center", gap: 4, children: [isISO ? (jsxRuntime.jsx(IsoTimePicker, { hour: hour24, setHour: setHour24, minute: minute, setMinute: setMinute, second: showSeconds ? second : null, setSecond: showSeconds ? setSecond : () => { }, onChange: handleTimeChange, startTime: normalizedStartTime, selectedDate: selectedDate, timezone: timezone })) : (jsxRuntime.jsx(TimePicker$1, { hour: hour12, setHour: setHour12, minute: minute, setMinute: setMinute, meridiem: meridiem, setMeridiem: setMeridiem, onChange: handleTimeChange, startTime: normalizedStartTime, selectedDate: selectedDate, timezone: timezone })), jsxRuntime.jsx(react.Button, { onClick: handleClear, size: "sm", variant: "outline", colorScheme: "red", children: jsxRuntime.jsx(react.Icon, { as: fa6.FaTrash }) })] }), selectedDate && (jsxRuntime.jsxs(react.Flex, { gap: 2, children: [jsxRuntime.jsx(react.Text, { fontSize: "sm", color: { base: 'gray.600', _dark: 'gray.600' }, children: dayjs(value).format(isISO
-                            ? showSeconds
-                                ? 'YYYY-MM-DD HH:mm:ss'
-                                : 'YYYY-MM-DD HH:mm'
-                            : 'YYYY-MM-DD hh:mm A ') }), jsxRuntime.jsx(react.Text, { fontSize: "sm", color: { base: 'gray.600', _dark: 'gray.600' }, children: dayjs(value).tz(timezone).format('Z') }), jsxRuntime.jsx(react.Text, { fontSize: "sm", color: { base: 'gray.600', _dark: 'gray.600' }, children: timezone })] }))] }));
+    // Determine minDate: prioritize explicit minDate prop, then fall back to startTime
+    const effectiveMinDate = minDate
+        ? minDate
+        : normalizedStartTime && dayjs(normalizedStartTime).tz(timezone).isValid()
+            ? dayjs(normalizedStartTime).tz(timezone).startOf('day').toDate()
+            : undefined;
+    // Log current state before render
+    React.useEffect(() => {
+        console.log('[DateTimePicker] Current state before render:', {
+            isISO,
+            hour12,
+            minute,
+            meridiem,
+            hour24,
+            second,
+            selectedDate,
+            normalizedStartTime,
+            timezone,
+        });
+    }, [
+        isISO,
+        hour12,
+        minute,
+        meridiem,
+        hour24,
+        second,
+        selectedDate,
+        normalizedStartTime,
+        timezone,
+    ]);
+    // Compute display text from current state
+    const displayText = React.useMemo(() => {
+        if (!selectedDate)
+            return null;
+        const dateObj = dayjs.tz(selectedDate, timezone);
+        if (!dateObj.isValid())
+            return null;
+        if (isISO) {
+            // For ISO format, use hour24, minute, second
+            if (hour24 === null || minute === null)
+                return null;
+            const dateTimeObj = dateObj
+                .hour(hour24)
+                .minute(minute)
+                .second(second ?? 0);
+            return dateTimeObj.format(showSeconds ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm');
+        }
+        else {
+            // For 12-hour format, use hour12, minute, meridiem
+            if (hour12 === null || minute === null || meridiem === null)
+                return null;
+            // Convert to 24-hour format for dayjs
+            let hour24Value = hour12;
+            if (meridiem === 'am' && hour12 === 12)
+                hour24Value = 0;
+            else if (meridiem === 'pm' && hour12 < 12)
+                hour24Value = hour12 + 12;
+            const dateTimeObj = dateObj.hour(hour24Value).minute(minute).second(0);
+            return dateTimeObj.format('YYYY-MM-DD hh:mm A');
+        }
+    }, [
+        selectedDate,
+        isISO,
+        hour12,
+        minute,
+        meridiem,
+        hour24,
+        second,
+        showSeconds,
+        timezone,
+    ]);
+    const timezoneOffset = React.useMemo(() => {
+        if (!selectedDate)
+            return null;
+        const dateObj = dayjs.tz(selectedDate, timezone);
+        return dateObj.isValid() ? dateObj.format('Z') : null;
+    }, [selectedDate, timezone]);
+    return (jsxRuntime.jsxs(react.Flex, { direction: "column", gap: 4, p: 4, border: "1px solid", borderColor: "gray.200", borderRadius: "md", children: [jsxRuntime.jsx(DatePickerInput, { value: selectedDate || undefined, onChange: (date) => {
+                    if (date) {
+                        handleDateChange(date);
+                    }
+                    else {
+                        setSelectedDate('');
+                        onChange?.(undefined);
+                    }
+                }, placeholder: "Select a date", dateFormat: "YYYY-MM-DD", displayFormat: "YYYY-MM-DD", labels: labels, timezone: timezone, minDate: effectiveMinDate, maxDate: maxDate, monthsToDisplay: 1, readOnly: true }), jsxRuntime.jsxs(react.Grid, { templateColumns: "1fr auto", alignItems: "center", gap: 4, children: [isISO ? (jsxRuntime.jsx(IsoTimePicker, { hour: hour24, setHour: setHour24, minute: minute, setMinute: setMinute, second: showSeconds ? second : null, setSecond: showSeconds ? setSecond : () => { }, onChange: handleTimeChange, startTime: normalizedStartTime, selectedDate: selectedDate, timezone: timezone, portalled: portalled })) : (jsxRuntime.jsx(TimePicker$1, { hour: hour12, setHour: setHour12, minute: minute, setMinute: setMinute, meridiem: meridiem, setMeridiem: setMeridiem, onChange: handleTimeChange, startTime: normalizedStartTime, selectedDate: selectedDate, timezone: timezone, portalled: portalled })), jsxRuntime.jsx(react.Button, { onClick: handleClear, size: "sm", variant: "outline", colorScheme: "red", children: jsxRuntime.jsx(react.Icon, { as: fa6.FaTrash }) })] }), displayText && (jsxRuntime.jsxs(react.Flex, { gap: 2, children: [jsxRuntime.jsx(react.Text, { fontSize: "sm", color: { base: 'gray.600', _dark: 'gray.600' }, children: displayText }), timezoneOffset && (jsxRuntime.jsx(react.Text, { fontSize: "sm", color: { base: 'gray.600', _dark: 'gray.600' }, children: timezoneOffset })), jsxRuntime.jsx(react.Text, { fontSize: "sm", color: { base: 'gray.600', _dark: 'gray.600' }, children: timezone })] }))] }));
 }
 
 dayjs.extend(utc);
@@ -6495,7 +7262,7 @@ dayjs.extend(timezone);
 const DateTimePicker = ({ column, schema, prefix, }) => {
     const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
     const { timezone, dateTimePickerLabels, insideDialog } = useSchemaContext();
-    const formI18n = useFormI18n(column, prefix);
+    const formI18n = useFormI18n$1(column, prefix, schema);
     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;
@@ -6503,32 +7270,9 @@ const DateTimePicker = ({ column, schema, prefix, }) => {
     const colLabel = formI18n.colLabel;
     const [open, setOpen] = React.useState(false);
     const selectedDate = watch(colLabel);
-    const displayDate = dayjs(selectedDate)
-        .tz(timezone)
-        .format(displayDateFormat);
-    React.useEffect(() => {
-        try {
-            if (selectedDate) {
-                // Parse the selectedDate as UTC or in a specific timezone to avoid +8 hour shift
-                // For example, parse as UTC:
-                const parsedDate = dayjs(selectedDate).tz(timezone);
-                if (!parsedDate.isValid())
-                    return;
-                // Format according to dateFormat from schema
-                const formatted = parsedDate.format(dateFormat);
-                // Update the form value only if different to avoid loops
-                if (formatted !== selectedDate) {
-                    setValue(colLabel, formatted, {
-                        shouldValidate: true,
-                        shouldDirty: true,
-                    });
-                }
-            }
-        }
-        catch (e) {
-            console.error(e);
-        }
-    }, [selectedDate, dateFormat, colLabel, setValue]);
+    const displayDate = selectedDate && dayjs(selectedDate).tz(timezone).isValid()
+        ? dayjs(selectedDate).tz(timezone).format(displayDateFormat)
+        : '';
     const dateTimePickerLabelsConfig = {
         monthNamesShort: dateTimePickerLabels?.monthNamesShort ?? [
             formI18n.translate.t(`common.month_1`, {
@@ -6601,12 +7345,22 @@ const DateTimePicker = ({ column, schema, prefix, }) => {
             }),
     };
     const dateTimePickerContent = (jsxRuntime.jsx(DateTimePicker$1, { value: selectedDate, onChange: (date) => {
-            setValue(colLabel, dayjs(date).tz(timezone).format(dateFormat));
+            if (!date || date === null || date === undefined) {
+                setValue(colLabel, undefined);
+                return;
+            }
+            const dateObj = dayjs(date).tz(timezone);
+            if (dateObj.isValid()) {
+                setValue(colLabel, dateObj.format(dateFormat));
+            }
+            else {
+                setValue(colLabel, undefined);
+            }
         }, timezone: timezone, labels: dateTimePickerLabelsConfig }));
     return (jsxRuntime.jsx(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
-        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: jsxRuntime.jsxs(react.Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: jsxRuntime.jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
+        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: jsxRuntime.jsxs(react.Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, autoFocus: false, children: [jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: jsxRuntime.jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
                             setOpen(true);
-                        }, justifyContent: 'start', children: [jsxRuntime.jsx(md.MdDateRange, {}), selectedDate !== undefined ? `${displayDate}` : ''] }) }), insideDialog ? (jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { width: "fit-content", minW: "450px", minH: "25rem", children: jsxRuntime.jsx(react.Popover.Body, { children: dateTimePickerContent }) }) })) : (jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { width: "fit-content", minW: "450px", minH: "25rem", children: jsxRuntime.jsx(react.Popover.Body, { children: dateTimePickerContent }) }) }) }))] }) }));
+                        }, justifyContent: 'start', children: [jsxRuntime.jsx(md.MdDateRange, {}), displayDate || ''] }) }), insideDialog ? (jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { width: "fit-content", minW: "450px", minH: "25rem", children: jsxRuntime.jsx(react.Popover.Body, { children: dateTimePickerContent }) }) })) : (jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { width: "fit-content", minW: "450px", minH: "25rem", children: jsxRuntime.jsx(react.Popover.Body, { children: dateTimePickerContent }) }) }) }))] }) }));
 };
 
 const SchemaRenderer = ({ schema, prefix, column, }) => {
@@ -6650,7 +7404,7 @@ const SchemaRenderer = ({ schema, prefix, column, }) => {
         if (innerProperties) {
             return jsxRuntime.jsx(ObjectInput, { schema: colSchema, prefix, column });
         }
-        return jsxRuntime.jsx(RecordInput$1, { schema: colSchema, prefix, column });
+        return jsxRuntime.jsx(RecordInput, { schema: colSchema, prefix, column });
     }
     if (type === 'array') {
         if (variant === 'id-picker') {
@@ -6704,32 +7458,30 @@ const ColumnRenderer = ({ column, properties, prefix, parentRequired, }) => {
 };
 
 const ArrayViewer = ({ schema, column, prefix }) => {
-    const { gridColumn = "span 12", gridRow = "span 1", required, items, } = schema;
-    const { translate } = useSchemaContext();
+    const { gridColumn = 'span 12', gridRow = 'span 1', required, items, } = schema;
     const colLabel = `${prefix}${column}`;
     const isRequired = required?.some((columnId) => columnId === column);
+    const formI18n = useFormI18n$1(column, prefix, schema);
     const { watch, formState: { errors }, } = reactHookForm.useFormContext();
     const values = watch(colLabel) ?? [];
-    return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [jsxRuntime.jsxs(react.Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsxRuntime.jsx("span", { children: "*" })] }), jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: 1, children: values.map((field, index) => (jsxRuntime.jsx(react.Flex, { flexFlow: "column", bgColor: { base: "colorPalette.100", _dark: "colorPalette.900" }, p: "2", borderRadius: "md", borderWidth: "thin", borderColor: {
-                        base: "colorPalette.200",
-                        _dark: "colorPalette.800",
-                    }, children: jsxRuntime.jsx(react.Grid, { gap: "4", gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", children: jsxRuntime.jsx(SchemaViewer, { column: `${index}`,
+    return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [jsxRuntime.jsxs(react.Box, { as: "label", gridColumn: '1/span12', children: [formI18n.label(), isRequired && jsxRuntime.jsx("span", { children: "*" })] }), jsxRuntime.jsx(react.Flex, { flexFlow: 'column', gap: 1, children: values.map((field, index) => (jsxRuntime.jsx(react.Flex, { flexFlow: 'column', bgColor: { base: 'colorPalette.100', _dark: 'colorPalette.900' }, p: '2', borderRadius: 'md', borderWidth: 'thin', borderColor: {
+                        base: 'colorPalette.200',
+                        _dark: 'colorPalette.800',
+                    }, children: jsxRuntime.jsx(react.Grid, { gap: "4", gridTemplateColumns: 'repeat(12, 1fr)', autoFlow: 'row', children: jsxRuntime.jsx(SchemaViewer, { column: `${index}`,
                             prefix: `${colLabel}.`,
                             // @ts-expect-error find suitable types
-                            schema: { showLabel: false, ...(items ?? {}) } }) }) }, `form-${prefix}${column}.${index}`))) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
+                            schema: { showLabel: false, ...(items ?? {}) } }) }) }, `form-${prefix}${column}.${index}`))) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: 'red.400', children: formI18n.required() }))] }));
 };
 
 const BooleanViewer = ({ schema, column, prefix, }) => {
     const { watch, formState: { errors }, } = reactHookForm.useFormContext();
-    const { translate } = useSchemaContext();
-    const { required, gridColumn = "span 12", 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);
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
-        gridRow, children: [jsxRuntime.jsx(react.Text, { children: value
-                    ? translate.t(removeIndex(`${colLabel}.true`))
-                    : translate.t(removeIndex(`${colLabel}.false`)) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
+    const formI18n = useFormI18n$1(column, prefix, schema);
+    return (jsxRuntime.jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
+        gridRow, children: [jsxRuntime.jsx(react.Text, { children: value ? formI18n.t('true') : formI18n.t('false') }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: 'red.400', children: formI18n.required() }))] }));
 };
 
 const CustomViewer = ({ column, schema, prefix }) => {
@@ -6746,19 +7498,22 @@ const CustomViewer = ({ column, schema, prefix }) => {
 
 const DateViewer = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, } = reactHookForm.useFormContext();
-    const { translate, timezone } = useSchemaContext();
-    const { required, gridColumn = "span 4", gridRow = "span 1", displayDateFormat = "YYYY-MM-DD", } = schema;
+    const { timezone } = useSchemaContext();
+    const { required, gridColumn = 'span 4', gridRow = 'span 1', displayDateFormat = 'YYYY-MM-DD', } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const selectedDate = watch(colLabel);
-    const displayDate = dayjs(selectedDate).tz(timezone).format(displayDateFormat);
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${column}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
-        gridRow, children: [jsxRuntime.jsxs(react.Text, { children: [" ", selectedDate !== undefined ? displayDate : ""] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.field_required`) }))] }));
+    const formI18n = useFormI18n$1(column, prefix, schema);
+    const displayDate = dayjs(selectedDate)
+        .tz(timezone)
+        .format(displayDateFormat);
+    return (jsxRuntime.jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
+        gridRow, children: [jsxRuntime.jsxs(react.Text, { children: [" ", selectedDate !== undefined ? displayDate : ''] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: 'red.400', children: formI18n.required() }))] }));
 };
 
 const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
     const { watch, formState: { errors }, } = reactHookForm.useFormContext();
-    const formI18n = useFormI18n(column, prefix);
+    const formI18n = useFormI18n$1(column, prefix);
     const { required } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const { gridColumn = "span 12", gridRow = "span 1", renderDisplay } = schema;
@@ -6779,54 +7534,56 @@ const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
 
 const FileViewer = ({ column, schema, prefix }) => {
     const { watch } = reactHookForm.useFormContext();
-    const { translate } = useSchemaContext();
-    const { required, gridColumn = "span 12", 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}`;
-    return (jsxRuntime.jsx(Field, { label: `${translate.t(`${colLabel}.field_label`)}`, required: isRequired, gridColumn: gridColumn, gridRow: gridRow, display: "grid", gridTemplateRows: "auto 1fr auto", alignItems: "stretch", children: jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: 1, children: currentFiles.map((file) => {
-                return (jsxRuntime.jsx(react.Card.Root, { variant: "subtle", children: jsxRuntime.jsxs(react.Card.Body, { gap: "2", display: "flex", flexFlow: "row", alignItems: "center", padding: "2", children: [file.type.startsWith("image/") && (jsxRuntime.jsx(react.Image, { src: URL.createObjectURL(file), alt: file.name, boxSize: "50px", objectFit: "cover", borderRadius: "md", marginRight: "2" })), jsxRuntime.jsx(react.Box, { children: file.name })] }) }, file.name));
+    const formI18n = useFormI18n$1(column, prefix, schema);
+    return (jsxRuntime.jsx(Field, { label: formI18n.label(), required: isRequired, gridColumn: gridColumn, gridRow: gridRow, display: 'grid', gridTemplateRows: 'auto 1fr auto', alignItems: 'stretch', children: jsxRuntime.jsx(react.Flex, { flexFlow: 'column', gap: 1, children: currentFiles.map((file) => {
+                return (jsxRuntime.jsx(react.Card.Root, { variant: 'subtle', children: jsxRuntime.jsxs(react.Card.Body, { gap: "2", display: 'flex', flexFlow: 'row', alignItems: 'center', padding: '2', children: [file.type.startsWith('image/') && (jsxRuntime.jsx(react.Image, { src: URL.createObjectURL(file), alt: file.name, boxSize: "50px", objectFit: "cover", borderRadius: "md", marginRight: "2" })), jsxRuntime.jsx(react.Box, { children: file.name })] }) }, file.name));
             }) }) }));
 };
 
 const IdViewer = ({ column, schema, prefix, isMultiple = false, }) => {
     const { watch, formState: { errors }, } = reactHookForm.useFormContext();
     const { idMap, translate } = useSchemaContext();
-    const { required, gridColumn = "span 12", 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 formI18n = useFormI18n(column, prefix, schema);
     const colLabel = `${prefix}${column}`;
     const watchId = watch(colLabel);
     const watchIds = (watch(colLabel) ?? []);
     const getPickedValue = () => {
         if (Object.keys(idMap).length <= 0) {
-            return "";
+            return '';
         }
         const record = idMap[watchId];
         if (record === undefined) {
-            return "";
+            return '';
         }
-        return record[display_column];
+        const rendered = renderDisplay
+            ? renderDisplay(record)
+            : defaultRenderDisplay(record);
+        return typeof rendered === 'string' ? rendered : JSON.stringify(record);
     };
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${column}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
-        gridRow, children: [isMultiple && (jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", gap: 1, children: watchIds.map((id) => {
+    return (jsxRuntime.jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
+        gridRow, children: [isMultiple && (jsxRuntime.jsx(react.Flex, { flexFlow: 'wrap', gap: 1, children: watchIds.map((id) => {
                     const item = idMap[id];
                     if (item === undefined) {
                         return (jsxRuntime.jsx(react.Text, { children: translate.t(removeIndex(`${colLabel}.undefined`)) }, id));
                     }
-                    return (jsxRuntime.jsx(Tag, { closable: true, children: !!renderDisplay === true
+                    return (jsxRuntime.jsx(Tag, { closable: true, children: renderDisplay
                             ? renderDisplay(item)
-                            : item[display_column] }, id));
-                }) })), !isMultiple && jsxRuntime.jsx(react.Text, { children: getPickedValue() }), errors[`${colLabel}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
+                            : defaultRenderDisplay(item) }, id));
+                }) })), !isMultiple && jsxRuntime.jsx(react.Text, { children: getPickedValue() }), errors[`${colLabel}`] && (jsxRuntime.jsx(react.Text, { color: 'red.400', children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
 };
 
 const NumberViewer = ({ schema, column, prefix, }) => {
     const { watch, formState: { errors }, } = reactHookForm.useFormContext();
-    const { translate } = useSchemaContext();
     const { required, gridColumn = 'span 12', gridRow = 'span 1' } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const value = watch(colLabel);
+    const formI18n = useFormI18n$1(column, prefix, schema);
     // Format the value for display if formatOptions are provided
     const formatValue = (val) => {
         if (val === undefined || val === null || val === '')
@@ -6845,90 +7602,49 @@ const NumberViewer = ({ schema, column, prefix, }) => {
         }
         return String(val);
     };
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn, gridRow, children: [jsxRuntime.jsx(react.Text, { children: formatValue(value) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: 'red.400', children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
+    return (jsxRuntime.jsxs(Field, { label: formI18n.label(), required: isRequired, gridColumn, gridRow, children: [jsxRuntime.jsx(react.Text, { children: formatValue(value) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: 'red.400', children: formI18n.required() }))] }));
 };
 
 const ObjectViewer = ({ schema, column, prefix }) => {
-    const { properties, gridColumn = "span 12", gridRow = "span 1", required, showLabel = true, } = schema;
-    const { translate } = useSchemaContext();
+    const { properties, gridColumn = 'span 12', gridRow = 'span 1', required, showLabel = true, } = schema;
     const colLabel = `${prefix}${column}`;
     const isRequired = required?.some((columnId) => columnId === column);
+    const formI18n = useFormI18n$1(column, prefix, schema);
     const { formState: { errors }, } = reactHookForm.useFormContext();
     if (properties === undefined) {
         throw new Error(`properties is undefined when using ObjectInput`);
     }
-    return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [showLabel && (jsxRuntime.jsxs(react.Box, { as: "label", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsxRuntime.jsx("span", { children: "*" })] })), jsxRuntime.jsx(react.Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", bgColor: { base: "colorPalette.100", _dark: "colorPalette.900" }, p: "1", borderRadius: "md", borderWidth: "thin", borderColor: {
-                    base: "colorPalette.200",
-                    _dark: "colorPalette.800",
+    return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [showLabel && (jsxRuntime.jsxs(react.Box, { as: "label", children: [formI18n.label(), isRequired && jsxRuntime.jsx("span", { children: "*" })] })), jsxRuntime.jsx(react.Grid, { gap: "4", padding: '4', gridTemplateColumns: 'repeat(12, 1fr)', autoFlow: 'row', bgColor: { base: 'colorPalette.100', _dark: 'colorPalette.900' }, p: '1', borderRadius: 'md', borderWidth: 'thin', borderColor: {
+                    base: 'colorPalette.200',
+                    _dark: 'colorPalette.800',
                 }, children: Object.keys(properties ?? {}).map((key) => {
                     return (
                     // @ts-expect-error find suitable types
                     jsxRuntime.jsx(ColumnViewer, { column: `${key}`,
                         prefix: `${prefix}${column}.`,
                         properties }, `form-objectviewer-${colLabel}-${key}`));
-                }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
+                }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: 'red.400', children: formI18n.required() }))] }));
 };
 
-const RecordInput = ({ column, schema, prefix }) => {
-    const { formState: { errors }, setValue, getValues, } = reactHookForm.useFormContext();
-    const { translate } = useSchemaContext();
-    const { required, gridColumn = "span 12", gridRow = "span 1" } = schema;
+const RecordViewer = ({ column, schema, prefix }) => {
+    const { formState: { errors }, getValues, } = reactHookForm.useFormContext();
+    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] = React.useState(false);
-    const [newKey, setNewKey] = React.useState();
-    const [newValue, setNewValue] = React.useState();
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(`${column}.field_label`)}`, required: isRequired, alignItems: "stretch", gridColumn, gridRow, children: [entries.map(([key, value]) => {
-                return (jsxRuntime.jsxs(react.Grid, { templateColumns: "1fr 1fr auto", gap: 1, children: [jsxRuntime.jsx(react.Input, { value: key, onChange: (e) => {
-                                const filtered = entries.filter(([target]) => {
-                                    return target !== key;
-                                });
-                                setValue(column, Object.fromEntries([...filtered, [e.target.value, value]]));
-                            }, autoComplete: "off" }), jsxRuntime.jsx(react.Input, { value: value, onChange: (e) => {
-                                setValue(column, {
-                                    ...getValues(column),
-                                    [key]: e.target.value,
-                                });
-                            }, autoComplete: "off" }), jsxRuntime.jsx(react.IconButton, { variant: "ghost", onClick: () => {
-                                const filtered = entries.filter(([target]) => {
-                                    return target !== key;
-                                });
-                                setValue(column, Object.fromEntries([...filtered]));
-                            }, children: jsxRuntime.jsx(cg.CgClose, {}) })] }));
-            }), jsxRuntime.jsx(react.Show, { when: showNewEntries, children: jsxRuntime.jsxs(react.Card.Root, { children: [jsxRuntime.jsx(react.Card.Body, { gap: "2", children: jsxRuntime.jsxs(react.Grid, { templateColumns: "1fr 1fr auto", gap: 1, children: [jsxRuntime.jsx(react.Input, { value: newKey, onChange: (e) => {
-                                            setNewKey(e.target.value);
-                                        }, autoComplete: "off" }), jsxRuntime.jsx(react.Input, { value: newValue, onChange: (e) => {
-                                            setNewValue(e.target.value);
-                                        }, autoComplete: "off" })] }) }), jsxRuntime.jsxs(react.Card.Footer, { justifyContent: "flex-end", children: [jsxRuntime.jsx(react.IconButton, { variant: "subtle", onClick: () => {
-                                        setShowNewEntries(false);
-                                        setNewKey(undefined);
-                                        setNewValue(undefined);
-                                    }, children: jsxRuntime.jsx(cg.CgClose, {}) }), jsxRuntime.jsx(Button, { onClick: () => {
-                                        if (!!newKey === false) {
-                                            setShowNewEntries(false);
-                                            setNewKey(undefined);
-                                            setNewValue(undefined);
-                                            return;
-                                        }
-                                        setValue(column, Object.fromEntries([...entries, [newKey, newValue]]));
-                                        setShowNewEntries(false);
-                                        setNewKey(undefined);
-                                        setNewValue(undefined);
-                                    }, children: translate.t(`${column}.save`) })] })] }) }), jsxRuntime.jsx(Button, { onClick: () => {
-                    setShowNewEntries(true);
-                    setNewKey(undefined);
-                    setNewValue(undefined);
-                }, children: translate.t(`${column}.addNew`) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.field_required`) }))] }));
+    const formI18n = useFormI18n$1(column, prefix, schema);
+    return (jsxRuntime.jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn, gridRow, children: [entries.length === 0 ? (jsxRuntime.jsx(react.Text, { color: "gray.500", children: "No entries" })) : (jsxRuntime.jsx(react.Grid, { templateColumns: '1fr 1fr', gap: 2, children: entries.map(([key, value]) => {
+                    return (jsxRuntime.jsxs(react.Grid, { templateColumns: '1fr 1fr', gap: 2, children: [jsxRuntime.jsxs(react.Text, { fontWeight: "medium", children: [key, ":"] }), jsxRuntime.jsx(react.Text, { children: String(value ?? '') })] }, key));
+                }) })), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: 'red.400', children: formI18n.required() }))] }));
 };
 
 const StringViewer = ({ column, schema, prefix, }) => {
     const { watch, formState: { errors }, } = reactHookForm.useFormContext();
-    const { translate } = useSchemaContext();
-    const { required, gridColumn = "span 12", 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);
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsxRuntime.jsx(react.Text, { children: value }), errors[colLabel] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }) }));
+    const formI18n = useFormI18n$1(column, prefix, schema);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Field, { label: formI18n.label(), required: isRequired, gridColumn: gridColumn ?? 'span 4', gridRow: gridRow ?? 'span 1', children: [jsxRuntime.jsx(react.Text, { children: value }), errors[colLabel] && (jsxRuntime.jsx(react.Text, { color: 'red.400', children: formI18n.required() }))] }) }));
 };
 
 const TagViewer = ({ column, schema, prefix }) => {
@@ -7018,40 +7734,44 @@ const TagViewer = ({ column, schema, prefix }) => {
 
 const TextAreaViewer = ({ column, schema, prefix, }) => {
     const { watch, formState: { errors }, } = reactHookForm.useFormContext();
-    const { translate } = useSchemaContext();
-    const { required, gridColumn = "span 12", 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);
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn, gridRow: gridRow, children: [jsxRuntime.jsx(react.Text, { whiteSpace: "pre-wrap", children: value }), " ", errors[colLabel] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }) }));
+    const formI18n = useFormI18n$1(column, prefix, schema);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Field, { label: formI18n.label(), required: isRequired, gridColumn: gridColumn, gridRow: gridRow, children: [jsxRuntime.jsx(react.Text, { whiteSpace: "pre-wrap", children: value }), ' ', errors[colLabel] && (jsxRuntime.jsx(react.Text, { color: 'red.400', children: formI18n.required() }))] }) }));
 };
 
 const TimeViewer = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, } = reactHookForm.useFormContext();
-    const { translate, timezone } = useSchemaContext();
-    const { required, gridColumn = "span 12", gridRow = "span 1", displayTimeFormat = "hh:mm A", } = schema;
+    const { timezone } = useSchemaContext();
+    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);
+    const formI18n = useFormI18n$1(column, prefix, schema);
     const displayedTime = dayjs(`1970-01-01T${selectedDate}`)
         .tz(timezone)
         .isValid()
         ? dayjs(`1970-01-01T${selectedDate}`).tz(timezone).format(displayTimeFormat)
-        : "";
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${column}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
-        gridRow, children: [jsxRuntime.jsx(react.Text, { children: displayedTime }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.field_required`) }))] }));
+        : '';
+    return (jsxRuntime.jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
+        gridRow, children: [jsxRuntime.jsx(react.Text, { children: displayedTime }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: 'red.400', children: formI18n.required() }))] }));
 };
 
 const DateTimeViewer = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, } = reactHookForm.useFormContext();
-    const { translate, timezone } = useSchemaContext();
-    const { required, gridColumn = "span 4", gridRow = "span 1", displayDateFormat = "YYYY-MM-DD HH:mm:ss", } = schema;
+    const { timezone } = useSchemaContext();
+    const { required, gridColumn = 'span 4', gridRow = 'span 1', displayDateFormat = 'YYYY-MM-DD HH:mm:ss', } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const selectedDate = watch(colLabel);
-    const displayDate = dayjs(selectedDate).tz(timezone).format(displayDateFormat);
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${column}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
-        gridRow, children: [jsxRuntime.jsxs(react.Text, { children: [" ", selectedDate !== undefined ? displayDate : ""] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.field_required`) }))] }));
+    const formI18n = useFormI18n$1(column, prefix, schema);
+    const displayDate = dayjs(selectedDate)
+        .tz(timezone)
+        .format(displayDateFormat);
+    return (jsxRuntime.jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
+        gridRow, children: [jsxRuntime.jsxs(react.Text, { children: [" ", selectedDate !== undefined ? displayDate : ''] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: 'red.400', children: formI18n.required() }))] }));
 };
 
 const SchemaViewer = ({ schema, prefix, column, }) => {
@@ -7092,7 +7812,7 @@ const SchemaViewer = ({ schema, prefix, column, }) => {
         if (innerProperties) {
             return jsxRuntime.jsx(ObjectViewer, { schema: colSchema, prefix, column });
         }
-        return jsxRuntime.jsx(RecordInput, { schema: colSchema, prefix, column });
+        return jsxRuntime.jsx(RecordViewer, { schema: colSchema, prefix, column });
     }
     if (type === 'array') {
         if (variant === 'id-picker') {
@@ -7140,7 +7860,7 @@ const ColumnViewer = ({ column, properties, prefix, }) => {
 };
 
 const SubmitButton = () => {
-    const { translate, setValidatedData, setIsError, setIsConfirming, setError, schema, requireConfirmation, onFormSubmit, } = useSchemaContext();
+    const { translate, setValidatedData, setIsError, setIsConfirming, requireConfirmation, onFormSubmit, formButtonLabels, } = useSchemaContext();
     const methods = reactHookForm.useFormContext();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const onValid = (data) => {
@@ -7169,11 +7889,11 @@ const SubmitButton = () => {
     };
     return (jsxRuntime.jsx(react.Button, { onClick: () => {
             methods.handleSubmit(onValid)();
-        }, formNoValidate: true, children: translate.t('submit') }));
+        }, formNoValidate: true, children: formButtonLabels?.submit ?? translate.t('submit') }));
 };
 
 const FormBody = () => {
-    const { schema, order, ignore, include, translate, isSuccess, setIsSuccess, isError, setIsError, isSubmiting, setIsSubmiting, isConfirming, setIsConfirming, validatedData, setValidatedData, error, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, onFormSubmit, } = useSchemaContext();
+    const { schema, order, ignore, include, translate, isSuccess, setIsSuccess, isError, setIsError, isSubmiting, setIsSubmiting, isConfirming, setIsConfirming, validatedData, setValidatedData, error, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, onFormSubmit, formButtonLabels, } = useSchemaContext();
     const { showSubmitButton, showResetButton } = displayConfig;
     const methods = reactHookForm.useFormContext();
     const { properties } = schema;
@@ -7203,7 +7923,7 @@ const FormBody = () => {
         if (customSuccessRenderer) {
             return customSuccessRenderer(resetHandler);
         }
-        return (jsxRuntime.jsxs(react.Flex, { flexFlow: 'column', gap: "2", children: [jsxRuntime.jsxs(react.Alert.Root, { status: "success", children: [jsxRuntime.jsx(react.Alert.Indicator, {}), jsxRuntime.jsx(react.Alert.Content, { children: jsxRuntime.jsx(react.Alert.Title, { children: translate.t('submit_success') }) })] }), jsxRuntime.jsx(react.Flex, { justifyContent: 'end', children: jsxRuntime.jsx(react.Button, { onClick: resetHandler, formNoValidate: true, children: translate.t('submit_again') }) })] }));
+        return (jsxRuntime.jsxs(react.Flex, { flexFlow: 'column', gap: "2", children: [jsxRuntime.jsxs(react.Alert.Root, { status: "success", children: [jsxRuntime.jsx(react.Alert.Indicator, {}), jsxRuntime.jsx(react.Alert.Content, { children: jsxRuntime.jsx(react.Alert.Title, { children: translate.t('submit_success') }) })] }), jsxRuntime.jsx(react.Flex, { justifyContent: 'end', children: jsxRuntime.jsx(react.Button, { onClick: resetHandler, formNoValidate: true, children: formButtonLabels?.submitAgain ?? translate.t('submit_again') }) })] }));
     }
     if (isConfirming) {
         return (jsxRuntime.jsxs(react.Flex, { flexFlow: 'column', gap: "2", children: [jsxRuntime.jsx(react.Grid, { gap: 4, gridTemplateColumns: 'repeat(12, 1fr)', gridTemplateRows: 'repeat(12, max-content)', autoFlow: 'row', children: ordered.map((column) => {
@@ -7214,9 +7934,9 @@ const FormBody = () => {
                             properties: properties, prefix: ``, column }, `form-viewer-${column}`));
                     }) }), jsxRuntime.jsxs(react.Flex, { justifyContent: 'end', gap: '2', children: [jsxRuntime.jsx(react.Button, { onClick: () => {
                                 setIsConfirming(false);
-                            }, variant: 'subtle', children: translate.t('cancel') }), jsxRuntime.jsx(react.Button, { onClick: () => {
+                            }, variant: 'subtle', children: formButtonLabels?.cancel ?? translate.t('cancel') }), jsxRuntime.jsx(react.Button, { onClick: () => {
                                 onFormSubmit(validatedData);
-                            }, children: translate.t('confirm') })] }), isSubmiting && (jsxRuntime.jsx(react.Box, { pos: "absolute", inset: "0", bg: "bg/80", children: jsxRuntime.jsx(react.Center, { h: "full", children: jsxRuntime.jsx(react.Spinner, { color: "teal.500" }) }) })), isError && customErrorRenderer && customErrorRenderer(error)] }));
+                            }, children: formButtonLabels?.confirm ?? translate.t('confirm') })] }), isSubmiting && (jsxRuntime.jsx(react.Box, { pos: "absolute", inset: "0", bg: "bg/80", children: jsxRuntime.jsx(react.Center, { h: "full", children: jsxRuntime.jsx(react.Spinner, { color: "teal.500" }) }) })), isError && customErrorRenderer && customErrorRenderer(error)] }));
     }
     return (jsxRuntime.jsxs(react.Flex, { flexFlow: 'column', gap: "2", children: [jsxRuntime.jsx(react.Grid, { gap: "4", gridTemplateColumns: 'repeat(12, 1fr)', autoFlow: 'row', children: ordered.map((column) => {
                     return (jsxRuntime.jsx(ColumnRenderer
@@ -7226,7 +7946,7 @@ const FormBody = () => {
                         properties: properties, prefix: ``, parentRequired: schema.required, column }, `form-input-${column}`));
                 }) }), jsxRuntime.jsxs(react.Flex, { justifyContent: 'end', gap: "2", children: [showResetButton && (jsxRuntime.jsx(react.Button, { onClick: () => {
                             methods.reset();
-                        }, variant: 'subtle', children: translate.t('reset') })), showSubmitButton && jsxRuntime.jsx(SubmitButton, {})] }), isError && customErrorRenderer && customErrorRenderer(error)] }));
+                        }, variant: 'subtle', children: formButtonLabels?.reset ?? translate.t('reset') })), showSubmitButton && jsxRuntime.jsx(SubmitButton, {})] }), isError && customErrorRenderer && customErrorRenderer(error)] }));
 };
 
 const FormTitle = () => {
@@ -7545,7 +8265,6 @@ const TableDataDisplay = ({ colorPalette, emptyComponent, }) => {
         return `minmax(${size}px, ${(size / totalWidths) * 100}%)`;
     })
         .join(' ');
-    console.log({ columnWidths }, 'hadfg');
     const cellProps = {
         flex: '1 0 0%',
         overflow: 'auto',
@@ -7562,22 +8281,22 @@ const TableDataDisplay = ({ colorPalette, emptyComponent, }) => {
     }
     return (jsxRuntime.jsxs(react.Grid, { templateColumns: `${columnWidths}`, overflow: 'auto', borderWidth: '1px', color: { base: 'colorPalette.900', _dark: 'colorPalette.100' }, borderColor: { base: 'colorPalette.200', _dark: 'colorPalette.800' }, colorPalette, children: [jsxRuntime.jsx(react.Grid, { templateColumns: `${columnWidths}`, column: `1/span ${columns.length}`, bg: { base: 'colorPalette.200', _dark: 'colorPalette.800' }, colorPalette, children: columnHeaders.map((header) => {
                     const columnDef = columnsMap[header];
-                    return (jsxRuntime.jsx(react.Box, { flex: '1 0 0%', paddingX: '2', py: '1', overflow: 'auto', textOverflow: 'ellipsis', children: columnDef?.meta?.displayName ?? header }));
-                }) }), data.map((record) => {
-                return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: columnHeaders.map((header) => {
+                    return (jsxRuntime.jsx(react.Box, { flex: '1 0 0%', paddingX: '2', py: '1', overflow: 'auto', textOverflow: 'ellipsis', children: columnDef?.meta?.displayName ?? header }, `chakra-table-header-${header}`));
+                }) }), data.map((record, recordIndex) => {
+                return (jsxRuntime.jsx(react.Box, { display: "contents", children: columnHeaders.map((header) => {
                         const { cell } = columnsMap[header];
                         const value = record[header];
                         if (!!record === false) {
-                            return (jsxRuntime.jsx(react.Box, { ...cellProps }));
+                            return (jsxRuntime.jsx(react.Box, { ...cellProps }, `chakra-table-cell-${recordIndex}-${header}`));
                         }
                         if (cell) {
-                            return (jsxRuntime.jsx(react.Box, { ...cellProps, children: cell({ row: { original: record } }) }));
+                            return (jsxRuntime.jsx(react.Box, { ...cellProps, children: cell({ row: { original: record } }) }, `chakra-table-cell-${recordIndex}-${header}`));
                         }
                         if (typeof value === 'object') {
-                            return (jsxRuntime.jsx(react.Box, { ...cellProps, children: jsxRuntime.jsx(RecordDisplay, { object: value }) }));
+                            return (jsxRuntime.jsx(react.Box, { ...cellProps, children: jsxRuntime.jsx(RecordDisplay, { object: value }) }, `chakra-table-cell-${recordIndex}-${header}`));
                         }
-                        return jsxRuntime.jsx(react.Box, { ...cellProps, children: value });
-                    }) }));
+                        return (jsxRuntime.jsx(react.Box, { ...cellProps, children: value }, `chakra-table-cell-${recordIndex}-${header}`));
+                    }) }, `chakra-table-record-${recordIndex}`));
             })] }));
 };
 
@@ -7730,19 +8449,19 @@ const DataDisplay = ({ variant = '' }) => {
                             return cell.id === `${rowId}_${column.id}`;
                         });
                         if (column.columns.length > 0) {
-                            return (jsxRuntime.jsxs(react.Card.Root, { margin: '1', gridColumn: 'span 12', children: [jsxRuntime.jsx(react.Card.Header, { color: 'gray.400', children: column.columnDef.meta?.displayName ?? column.id }), jsxRuntime.jsx(react.Card.Body, { display: 'grid', gap: '4', gridTemplateColumns: 'repeat(12, 1fr)', children: column.columns.map((column) => {
-                                            if (!column.getIsVisible()) {
-                                                return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+                            return (jsxRuntime.jsxs(react.Card.Root, { margin: '1', gridColumn: 'span 12', children: [jsxRuntime.jsx(react.Card.Header, { color: 'gray.400', children: column.columnDef.meta?.displayName ?? column.id }), jsxRuntime.jsx(react.Card.Body, { display: 'grid', gap: '4', gridTemplateColumns: 'repeat(12, 1fr)', children: column.columns.map((subColumn) => {
+                                            if (!subColumn.getIsVisible()) {
+                                                return null;
                                             }
                                             const foundCell = row
                                                 .getVisibleCells()
                                                 .find((cell) => {
-                                                return cell.id === `${rowId}_${column.id}`;
+                                                return cell.id === `${rowId}_${subColumn.id}`;
                                             });
-                                            return jsxRuntime.jsx(CellRenderer, { cell: foundCell });
-                                        }) })] }, `chakra-table-card-${childCell?.id}`));
+                                            return (jsxRuntime.jsx(CellRenderer, { cell: foundCell }, `chakra-table-cell-${rowId}-${subColumn.id}`));
+                                        }) })] }, `chakra-table-card-${rowId}-${column.id}`));
                         }
-                        return jsxRuntime.jsx(CellRenderer, { cell: childCell });
+                        return (jsxRuntime.jsx(CellRenderer, { cell: childCell }, `chakra-table-cell-${rowId}-${column.id}`));
                     }) }) }, `chakra-table-card-${rowId}`));
         }) }));
 };
@@ -8041,6 +8760,7 @@ exports.CardHeader = CardHeader;
 exports.DataDisplay = DataDisplay;
 exports.DataTable = DataTable;
 exports.DataTableServer = DataTableServer;
+exports.DatePickerInput = DatePickerInput;
 exports.DefaultCardTitle = DefaultCardTitle;
 exports.DefaultForm = DefaultForm;
 exports.DefaultTable = DefaultTable;
@@ -8086,6 +8806,7 @@ exports.buildFieldErrors = buildFieldErrors;
 exports.buildRequiredErrors = buildRequiredErrors;
 exports.convertToAjvErrorsFormat = convertToAjvErrorsFormat;
 exports.createErrorMessage = createErrorMessage;
+exports.defaultRenderDisplay = defaultRenderDisplay;
 exports.getColumns = getColumns;
 exports.getMultiDates = getMultiDates;
 exports.getRangeDates = getRangeDates;