@bsol-oss/react-datatable5 12.0.0-beta.8 → 12.0.0-beta.80

package/dist/index.js

@@ -29,7 +29,11 @@ var gr = require('react-icons/gr');
 var reactI18next = require('react-i18next');
 var axios = require('axios');
 var reactHookForm = require('react-hook-form');
+var Ajv = require('ajv');
+var addFormats = require('ajv-formats');
 var dayjs = require('dayjs');
+var utc = require('dayjs/plugin/utc');
+var timezone = require('dayjs/plugin/timezone');
 var ti = require('react-icons/ti');
 
 function _interopNamespaceDefault(e) {
@@ -57,6 +61,56 @@ const DataTableContext = React.createContext({
     setGlobalFilter: () => { },
     type: "client",
     translate: {},
+    data: [],
+    columns: [],
+    columnOrder: [],
+    columnFilters: [],
+    density: "sm",
+    sorting: [],
+    setPagination: function () {
+        throw new Error("Function not implemented.");
+    },
+    setSorting: function () {
+        throw new Error("Function not implemented.");
+    },
+    setColumnFilters: function () {
+        throw new Error("Function not implemented.");
+    },
+    setRowSelection: function () {
+        throw new Error("Function not implemented.");
+    },
+    setColumnOrder: function () {
+        throw new Error("Function not implemented.");
+    },
+    setDensity: function () {
+        throw new Error("Function not implemented.");
+    },
+    setColumnVisibility: function () {
+        throw new Error("Function not implemented.");
+    },
+    pagination: {
+        pageIndex: 0,
+        pageSize: 10,
+    },
+    rowSelection: {},
+    columnVisibility: {},
+    tableLabel: {
+        view: "View",
+        edit: "Edit",
+        filterButtonText: "Filter",
+        filterTitle: "Filter",
+        filterReset: "Reset",
+        filterClose: "Close",
+        reloadTooltip: "Reload",
+        reloadButtonText: "Reload",
+        resetSelection: "Reset Selection",
+        resetSorting: "Reset Sorting",
+        rowCountText: "Row Count",
+        hasErrorText: "Has Error",
+        globalFilterPlaceholder: "Search",
+        trueLabel: "True",
+        falseLabel: "False",
+    },
 });
 
 const useDataTableContext = () => {
@@ -112,11 +166,13 @@ const TableSorter = () => {
             }) }))) }));
 };
 
-const ResetSortingButton = ({ text = "Reset Sorting", }) => {
+const ResetSortingButton = () => {
     const { table } = useDataTableContext();
+    const { tableLabel } = useDataTableContext();
+    const { resetSorting } = tableLabel;
     return (jsxRuntime.jsx(react.Button, { onClick: () => {
             table.resetSorting();
-        }, children: text }));
+        }, children: resetSorting }));
 };
 
 const EditSortingButton = ({ text, icon = jsxRuntime.jsx(md.MdOutlineSort, {}), title = "Edit Sorting", }) => {
@@ -144,7 +200,7 @@ const monthNamesFull = [
     "November",
     "December",
 ];
-const weekdayNamesShort$1 = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const weekdayNamesShort = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 function Calendar$1({ calendars, getBackProps, getForwardProps, getDateProps, selected = [], firstDayOfWeek = 0, }) {
     const [hoveredDate, setHoveredDate] = React.useState();
     const onMouseLeave = () => {
@@ -179,7 +235,7 @@ function Calendar$1({ calendars, getBackProps, getForwardProps, getDateProps, se
                                 offset: 12,
                             }), children: ">>" })] }), jsxRuntime.jsx(react.Grid, { templateColumns: "repeat(2, auto)", justifyContent: "center", gap: 4, children: calendars.map((calendar) => (jsxRuntime.jsxs(react.Grid, { gap: 4, children: [jsxRuntime.jsxs(react.Grid, { justifyContent: "center", children: [monthNamesFull[calendar.month], " ", calendar.year] }), jsxRuntime.jsx(react.Grid, { templateColumns: "repeat(7, auto)", justifyContent: "center", children: [0, 1, 2, 3, 4, 5, 6].map((weekdayNum) => {
                                     const weekday = (weekdayNum + firstDayOfWeek) % 7;
-                                    return (jsxRuntime.jsx(react.Box, { minWidth: "48px", textAlign: "center", children: weekdayNamesShort$1[weekday] }, `${calendar.month}${calendar.year}${weekday}`));
+                                    return (jsxRuntime.jsx(react.Box, { minWidth: "48px", textAlign: "center", children: weekdayNamesShort[weekday] }, `${calendar.month}${calendar.year}${weekday}`));
                                 }) }), jsxRuntime.jsx(react.Grid, { templateColumns: "repeat(7, auto)", justifyContent: "center", children: calendar.weeks.map((week, windex) => week.map((dateObj, index) => {
                                     const key = `${calendar.month}${calendar.year}${windex}${index}`;
                                     if (!dateObj) {
@@ -300,8 +356,17 @@ const Tag = React__namespace.forwardRef(function Tag(props, ref) {
     return (jsxRuntime.jsxs(react.Tag.Root, { ref: ref, ...rest, children: [startElement && (jsxRuntime.jsx(react.Tag.StartElement, { children: startElement })), jsxRuntime.jsx(react.Tag.Label, { children: children }), endElement && (jsxRuntime.jsx(react.Tag.EndElement, { children: endElement })), closable && (jsxRuntime.jsx(react.Tag.EndElement, { children: jsxRuntime.jsx(react.Tag.CloseTrigger, { onClick: onClose }) }))] }));
 });
 
-const TagFilter = ({ availableTags, selectedTags, onTagChange, }) => {
+const TagFilter = ({ availableTags, selectedTags, onTagChange, selectOne = false, }) => {
     const toggleTag = (tag) => {
+        if (selectOne) {
+            if (selectedTags.includes(tag)) {
+                onTagChange([]);
+            }
+            else {
+                onTagChange([tag]);
+            }
+            return;
+        }
         if (selectedTags.includes(tag)) {
             onTagChange(selectedTags.filter((t) => t !== tag));
         }
@@ -309,10 +374,14 @@ const TagFilter = ({ availableTags, selectedTags, onTagChange, }) => {
             onTagChange([...selectedTags, tag]);
         }
     };
-    return (jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", p: "0.5rem", gap: "0.5rem", children: availableTags.map((tag) => (jsxRuntime.jsx(Tag, { variant: selectedTags.includes(tag) ? "solid" : "outline", cursor: "pointer", closable: selectedTags.includes(tag) ? true : undefined, onClick: () => toggleTag(tag), children: tag }))) }));
+    return (jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", p: "0.5rem", gap: "0.5rem", children: availableTags.map((tag) => {
+            const { label, value } = tag;
+            return (jsxRuntime.jsx(Tag, { variant: selectedTags.includes(value) ? "solid" : "outline", cursor: "pointer", closable: selectedTags.includes(value) ? true : undefined, onClick: () => toggleTag(value), children: label ?? value }));
+        }) }));
 };
 
 const Filter = ({ column }) => {
+    const { tableLabel } = useDataTableContext();
     const { filterVariant } = column.columnDef.meta ?? {};
     const displayName = column.columnDef.meta?.displayName ?? column.id;
     const filterOptions = column.columnDef.meta?.filterOptions ?? [];
@@ -327,10 +396,14 @@ const Filter = ({ column }) => {
     if (filterVariant === "select") {
         return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(RadioGroup, { value: column.getFilterValue() ? String(column.getFilterValue()) : "", onValueChange: (details) => {
                         column.setFilterValue(details.value);
-                    }, children: jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", gap: "0.5rem", children: filterOptions.map((item) => (jsxRuntime.jsx(Radio, { value: item, children: item }, item))) }) })] }, column.id));
+                    }, children: jsxRuntime.jsxs(react.Flex, { flexFlow: "wrap", gap: "0.5rem", children: [filterOptions.length === 0 && jsxRuntime.jsx(react.Text, { children: "No filter options" }), filterOptions.length > 0 &&
+                                filterOptions.map((item) => (jsxRuntime.jsx(Radio, { value: item.value, children: item.label }, item.value)))] }) })] }, column.id));
     }
     if (filterVariant === "tag") {
-        return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(TagFilter, { availableTags: filterOptions, selectedTags: (column.getFilterValue() ?? []), onTagChange: (tags) => {
+        return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(TagFilter, { availableTags: filterOptions.map((item) => ({
+                        label: item.label,
+                        value: item.value,
+                    })), selectedTags: (column.getFilterValue() ?? []), onTagChange: (tags) => {
                         if (tags.length === 0) {
                             return column.setFilterValue(undefined);
                         }
@@ -338,7 +411,11 @@ const Filter = ({ column }) => {
                     } })] }, column.id));
     }
     if (filterVariant === "boolean") {
-        return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(TagFilter, { availableTags: ["true", "false"], selectedTags: (column.getFilterValue() ?? []), onTagChange: (tags) => {
+        const { trueLabel, falseLabel } = tableLabel;
+        return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(TagFilter, { availableTags: [
+                        { label: trueLabel, value: "true" },
+                        { label: falseLabel, value: "false" },
+                    ], selectedTags: (column.getFilterValue() ?? []), onTagChange: (tags) => {
                         if (tags.length === 0) {
                             return column.setFilterValue(undefined);
                         }
@@ -393,17 +470,20 @@ const TableFilter = () => {
         }) }));
 };
 
-const ResetFilteringButton = ({ text = "Reset Filtering", }) => {
+const ResetFilteringButton = () => {
     const { table } = useDataTableContext();
+    const { tableLabel } = useDataTableContext();
+    const { filterReset } = tableLabel;
     return (jsxRuntime.jsx(react.Button, { onClick: () => {
             table.resetColumnFilters();
-        }, children: text }));
+        }, children: filterReset }));
 };
 
 const FilterDialog = ({ icon = jsxRuntime.jsx(md.MdFilterAlt, {}), }) => {
     const filterModal = react.useDisclosure();
-    const { translate } = useDataTableContext();
-    return (jsxRuntime.jsxs(DialogRoot, { size: ["full", "full", "md", "md"], open: filterModal.open, children: [jsxRuntime.jsx(DialogTrigger, { asChild: true, children: jsxRuntime.jsxs(react.Button, { as: react.Box, variant: "ghost", onClick: filterModal.onOpen, children: [icon, " ", translate.t("filterDialog.buttonText")] }) }), jsxRuntime.jsxs(DialogContent, { children: [jsxRuntime.jsx(DialogHeader, { children: jsxRuntime.jsx(DialogTitle, { children: translate.t("filterDialog.title") }) }), jsxRuntime.jsx(DialogBody, { display: "flex", flexFlow: "column", children: jsxRuntime.jsx(TableFilter, {}) }), jsxRuntime.jsxs(DialogFooter, { children: [jsxRuntime.jsx(ResetFilteringButton, { text: translate.t("filterDialog.reset") }), jsxRuntime.jsx(react.Button, { onClick: filterModal.onClose, variant: "subtle", children: translate.t("filterDialog.close") })] }), jsxRuntime.jsx(DialogCloseTrigger, { onClick: filterModal.onClose })] })] }));
+    const { tableLabel } = useDataTableContext();
+    const { filterButtonText, filterTitle, filterClose } = tableLabel;
+    return (jsxRuntime.jsxs(DialogRoot, { size: ["full", "full", "md", "md"], open: filterModal.open, children: [jsxRuntime.jsx(DialogTrigger, { asChild: true, children: jsxRuntime.jsxs(react.Button, { as: react.Box, variant: "ghost", onClick: filterModal.onOpen, children: [icon, " ", filterButtonText] }) }), jsxRuntime.jsxs(DialogContent, { children: [jsxRuntime.jsx(DialogHeader, { children: jsxRuntime.jsx(DialogTitle, { children: filterTitle }) }), jsxRuntime.jsx(DialogBody, { display: "flex", flexFlow: "column", children: jsxRuntime.jsx(TableFilter, {}) }), jsxRuntime.jsxs(DialogFooter, { children: [jsxRuntime.jsx(ResetFilteringButton, {}), jsxRuntime.jsx(react.Button, { onClick: filterModal.onClose, variant: "subtle", children: filterClose })] }), jsxRuntime.jsx(DialogCloseTrigger, { onClick: filterModal.onClose })] })] }));
 };
 
 const MenuContent = React__namespace.forwardRef(function MenuContent(props, ref) {
@@ -522,11 +602,13 @@ const Pagination = () => {
         }, children: jsxRuntime.jsxs(react.HStack, { children: [jsxRuntime.jsx(PaginationPrevTrigger, {}), jsxRuntime.jsx(PaginationItems, {}), jsxRuntime.jsx(PaginationNextTrigger, {})] }) }));
 };
 
-const ResetSelectionButton = ({ text = "Reset Selection", }) => {
+const ResetSelectionButton = () => {
     const { table } = useDataTableContext();
+    const { tableLabel } = useDataTableContext();
+    const { resetSelection } = tableLabel;
     return (jsxRuntime.jsx(react.Button, { onClick: () => {
             table.resetRowSelection();
-        }, children: text }));
+        }, children: resetSelection }));
 };
 
 const RowCountText = () => {
@@ -2441,8 +2523,8 @@ react.CheckboxCard.Indicator;
 function ColumnCard({ columnId }) {
     const ref = React.useRef(null);
     const [dragging, setDragging] = React.useState(false); // NEW
-    const { table } = useDataTableContext();
-    const displayName = columnId;
+    const { table, translate } = useDataTableContext();
+    const displayName = translate.t(columnId);
     const column = table.getColumn(columnId);
     invariant(column);
     React.useEffect(() => {
@@ -2457,7 +2539,7 @@ function ColumnCard({ columnId }) {
             onDrop: () => setDragging(false), // NEW
         });
     }, [columnId, table]);
-    return (jsxRuntime.jsxs(react.Grid, { ref: ref, templateColumns: "auto 1fr", gap: "0.5rem", alignItems: "center", style: dragging ? { opacity: 0.4 } : {}, children: [jsxRuntime.jsx(react.Flex, { alignItems: "center", padding: "0", cursor: "grab", children: jsxRuntime.jsx(fa6.FaGripLinesVertical, { color: "gray.400" }) }), jsxRuntime.jsx(react.Flex, { justifyContent: "space-between", alignItems: "center", children: jsxRuntime.jsx(CheckboxCard, { variant: "surface", label: displayName, checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }) })] }));
+    return (jsxRuntime.jsxs(react.Grid, { ref: ref, templateColumns: "auto 1fr", gap: "0.5rem", alignItems: "center", style: dragging ? { opacity: 0.4 } : {}, children: [jsxRuntime.jsx(react.Flex, { alignItems: "center", padding: "0", cursor: "grab", children: jsxRuntime.jsx(fa6.FaGripLinesVertical, { color: "colorPalette.400" }) }), jsxRuntime.jsx(react.Flex, { justifyContent: "space-between", alignItems: "center", children: jsxRuntime.jsx(CheckboxCard, { variant: "surface", label: displayName, checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }) })] }));
 }
 function CardContainer({ location, children }) {
     const ref = React.useRef(null);
@@ -2476,7 +2558,6 @@ function CardContainer({ location, children }) {
             onDrop: () => setIsDraggedOver(false),
         });
     }, [location]);
-    // const isDark = (location + location) % 2 === 1;
     function getColor(isDraggedOver) {
         if (isDraggedOver) {
             return {
@@ -2486,7 +2567,6 @@ function CardContainer({ location, children }) {
                 },
             };
         }
-        // return isDark ? "lightgrey" : "white";
         return {
             backgroundColor: undefined,
             _dark: {
@@ -2537,8 +2617,9 @@ const TableViewer = () => {
 
 const ViewDialog = ({ icon = jsxRuntime.jsx(io.IoMdEye, {}) }) => {
     const viewModel = react.useDisclosure();
-    const { translate } = useDataTableContext();
-    return (jsxRuntime.jsxs(DialogRoot, { children: [jsxRuntime.jsx(react.DialogBackdrop, {}), jsxRuntime.jsx(DialogTrigger, { asChild: true, children: jsxRuntime.jsxs(react.Button, { as: react.Box, variant: "ghost", onClick: viewModel.onOpen, children: [icon, " ", translate.t("viewDialog.buttonText")] }) }), jsxRuntime.jsxs(DialogContent, { children: [jsxRuntime.jsx(DialogCloseTrigger, {}), jsxRuntime.jsx(DialogHeader, { children: jsxRuntime.jsx(DialogTitle, { children: translate.t("viewDialog.title") }) }), jsxRuntime.jsx(DialogBody, { children: jsxRuntime.jsx(TableViewer, {}) }), jsxRuntime.jsx(DialogFooter, {})] })] }));
+    const { tableLabel } = useDataTableContext();
+    const { view } = tableLabel;
+    return (jsxRuntime.jsxs(DialogRoot, { children: [jsxRuntime.jsx(react.DialogBackdrop, {}), jsxRuntime.jsx(DialogTrigger, { asChild: true, children: jsxRuntime.jsxs(react.Button, { as: react.Box, variant: "ghost", onClick: viewModel.onOpen, children: [icon, " ", view] }) }), jsxRuntime.jsxs(DialogContent, { children: [jsxRuntime.jsx(DialogCloseTrigger, {}), jsxRuntime.jsx(DialogHeader, { children: jsxRuntime.jsx(DialogTitle, { children: view }) }), jsxRuntime.jsx(DialogBody, { children: jsxRuntime.jsx(TableViewer, {}) }), jsxRuntime.jsx(DialogFooter, {})] })] }));
 };
 
 const CardHeader = ({ row, imageColumnId = undefined, titleColumnId = undefined, tagColumnId = undefined, tagIcon = undefined, showTag = true, imageProps = {}, }) => {
@@ -2589,7 +2670,7 @@ const RecordDisplay = ({ object, boxProps, translate, prefix = "", }) => {
         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: "gray.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.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));
         }) }));
 };
 
@@ -2639,7 +2720,7 @@ const CellRenderer = ({ cell }) => {
                         paddingY: 2,
                     }, object: value })] }, cell.id));
     }
-    return (jsxRuntime.jsxs(react.Box, { gridColumn, gridRow, children: [jsxRuntime.jsx(react.Box, { color: 'gray.400', children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(react.Box, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
+    return (jsxRuntime.jsxs(react.Box, { gridColumn, gridRow, children: [jsxRuntime.jsx(react.Box, { color: "colorPalette.400", children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(react.Box, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
 };
 const DataDisplay = ({ variant = "" }) => {
     const { table, translate } = useDataTableContext();
@@ -2761,7 +2842,23 @@ const fuzzyFilter = (row, columnId, value, addMeta) => {
  *
  * @link https://tanstack.com/table/latest/docs/guide/column-defs
  */
-function DataTable({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, translate, children, }) {
+function DataTable({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, translate, children, tableLabel = {
+    view: 'View',
+    edit: 'Edit',
+    filterButtonText: 'Filter',
+    filterTitle: 'Filter',
+    filterReset: 'Reset',
+    filterClose: 'Close',
+    reloadTooltip: 'Reload',
+    reloadButtonText: 'Reload',
+    resetSelection: 'Reset Selection',
+    resetSorting: 'Reset Sorting',
+    rowCountText: 'Row Count',
+    hasErrorText: 'Has Error',
+    globalFilterPlaceholder: 'Search',
+    trueLabel: 'True',
+    falseLabel: 'False',
+}, }) {
     const table = reactTable.useReactTable({
         _features: [DensityFeature],
         data: data,
@@ -2779,12 +2876,12 @@ function DataTable({ columns, data, enableRowSelection = true, enableMultiRowSel
         enableRowSelection: enableRowSelection,
         enableMultiRowSelection: enableMultiRowSelection,
         enableSubRowSelection: enableSubRowSelection,
-        columnResizeMode: "onChange",
+        columnResizeMode: 'onChange',
         // global filter start
         filterFns: {
             fuzzy: fuzzyFilter,
         },
-        globalFilterFn: "fuzzy",
+        globalFilterFn: 'fuzzy',
         state: {
             pagination,
             sorting,
@@ -2812,9 +2909,9 @@ function DataTable({ columns, data, enableRowSelection = true, enableMultiRowSel
             table: table,
             globalFilter,
             setGlobalFilter,
-            type: "client",
+            type: 'client',
             translate,
-            columns,
+            columns: columns,
             sorting,
             setSorting,
             columnFilters,
@@ -2829,6 +2926,8 @@ function DataTable({ columns, data, enableRowSelection = true, enableMultiRowSel
             setDensity,
             columnVisibility,
             setColumnVisibility,
+            data,
+            tableLabel,
         }, children: children }));
 }
 
@@ -2843,10 +2942,26 @@ function DataTable({ columns, data, enableRowSelection = true, enableMultiRowSel
  *
  * @link https://tanstack.com/table/latest/docs/guide/column-defs
  */
-function DataTableServer({ columns, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, query, url, translate, children, }) {
+function DataTableServer({ columns, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, query, url, translate, children, tableLabel = {
+    view: "View",
+    edit: "Edit",
+    filterButtonText: "Filter",
+    filterTitle: "Filter",
+    filterReset: "Reset",
+    filterClose: "Close",
+    reloadTooltip: "Reload",
+    reloadButtonText: "Reload",
+    resetSelection: "Reset Selection",
+    resetSorting: "Reset Sorting",
+    rowCountText: "Row Count",
+    hasErrorText: "Has Error",
+    globalFilterPlaceholder: "Search",
+    trueLabel: "True",
+    falseLabel: "False",
+}, }) {
     const table = reactTable.useReactTable({
         _features: [DensityFeature],
-        data: query.data?.data ?? [],
+        data: (query.data?.data ?? []),
         rowCount: query.data?.count ?? 0,
         columns: columns,
         getCoreRowModel: reactTable.getCoreRowModel(),
@@ -2892,12 +3007,12 @@ function DataTableServer({ columns, enableRowSelection = true, enableMultiRowSel
         // for tanstack-table ts bug end
     });
     return (jsxRuntime.jsx(DataTableContext.Provider, { value: {
-            table: { ...table },
+            table: table,
             globalFilter,
             setGlobalFilter,
             type: "server",
             translate,
-            columns,
+            columns: columns,
             sorting,
             setSorting,
             columnFilters,
@@ -2912,15 +3027,108 @@ function DataTableServer({ columns, enableRowSelection = true, enableMultiRowSel
             setDensity,
             columnVisibility,
             setColumnVisibility,
+            data: query.data?.data ?? [],
+            tableLabel,
         }, children: jsxRuntime.jsx(DataTableServerContext.Provider, { value: { url, query }, children: children }) }));
 }
 
+const InputGroup = React__namespace.forwardRef(function InputGroup(props, ref) {
+    const { startElement, startElementProps, endElement, endElementProps, children, startOffset = "6px", endOffset = "6px", ...rest } = props;
+    return (jsxRuntime.jsxs(react.Group, { ref: ref, ...rest, children: [startElement && (jsxRuntime.jsx(react.InputElement, { pointerEvents: "none", ...startElementProps, children: startElement })), React__namespace.cloneElement(children, {
+                ...(startElement && {
+                    ps: `calc(var(--input-height) - ${startOffset})`,
+                }),
+                ...(endElement && { pe: `calc(var(--input-height) - ${endOffset})` }),
+                // @ts-expect-error chakra generated files
+                ...children.props,
+            }), endElement && (jsxRuntime.jsx(react.InputElement, { placement: "end", ...endElementProps, children: endElement }))] }));
+});
+
+const GlobalFilter = () => {
+    const { table, tableLabel } = useDataTableContext();
+    const { globalFilterPlaceholder } = tableLabel;
+    const [searchTerm, setSearchTerm] = React.useState("");
+    const debouncedSearchTerm = usehooks.useDebounce(searchTerm, 500);
+    React.useEffect(() => {
+        const searchHN = async () => {
+            table.setGlobalFilter(debouncedSearchTerm);
+        };
+        searchHN();
+    }, [debouncedSearchTerm]);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(InputGroup, { flex: "1", startElement: jsxRuntime.jsx(md.MdSearch, {}), children: jsxRuntime.jsx(react.Input, { placeholder: globalFilterPlaceholder, variant: "outline", onChange: (e) => {
+                    setSearchTerm(e.target.value);
+                } }) }) }));
+};
+
+const Tooltip = React__namespace.forwardRef(function Tooltip(props, ref) {
+    const { showArrow, children, disabled, portalled, content, contentProps, portalRef, ...rest } = props;
+    if (disabled)
+        return children;
+    return (jsxRuntime.jsxs(react.Tooltip.Root, { ...rest, children: [jsxRuntime.jsx(react.Tooltip.Trigger, { asChild: true, children: children }), jsxRuntime.jsx(react.Portal, { disabled: !portalled, container: portalRef, children: jsxRuntime.jsx(react.Tooltip.Positioner, { children: jsxRuntime.jsxs(react.Tooltip.Content, { ref: ref, ...contentProps, children: [showArrow && (jsxRuntime.jsx(react.Tooltip.Arrow, { children: jsxRuntime.jsx(react.Tooltip.ArrowTip, {}) })), content] }) }) })] }));
+});
+
+const ReloadButton = ({ variant = "icon", }) => {
+    const { url } = useDataTableServerContext();
+    const queryClient = reactQuery.useQueryClient();
+    const { tableLabel } = useDataTableContext();
+    const { reloadTooltip, reloadButtonText } = tableLabel;
+    if (variant === "icon") {
+        return (jsxRuntime.jsx(Tooltip, { showArrow: true, content: reloadTooltip, children: jsxRuntime.jsx(Button, { variant: "ghost", onClick: () => {
+                    queryClient.invalidateQueries({ queryKey: [url] });
+                }, "aria-label": "refresh", children: jsxRuntime.jsx(io5.IoReload, {}) }) }));
+    }
+    return (jsxRuntime.jsxs(Button, { variant: "ghost", onClick: () => {
+            queryClient.invalidateQueries({ queryKey: [url] });
+        }, children: [jsxRuntime.jsx(io5.IoReload, {}), " ", reloadButtonText] }));
+};
+
+const TableFilterTags = () => {
+    const { table } = useDataTableContext();
+    return (jsxRuntime.jsx(react.Flex, { gap: "0.5rem", flexFlow: "wrap", children: table.getState().columnFilters.map(({ id, value }) => {
+            return (jsxRuntime.jsx(Tag, { gap: "0.5rem", closable: true, cursor: "pointer", onClick: () => {
+                    table.setColumnFilters(table.getState().columnFilters.filter((filter) => {
+                        return filter.value != value;
+                    }));
+                }, children: `${id}: ${value}` }, `${id}-${value}`));
+        }) }));
+};
+
+const TableControls = ({ fitTableWidth = false, fitTableHeight = false, children = jsxRuntime.jsx(jsxRuntime.Fragment, {}), showGlobalFilter = false, showFilter = false, showFilterName = false, showFilterTags = false, showReload = false, showPagination = true, showPageSizeControl = true, showPageCountText = true, showView = true, filterTagsOptions = [], extraItems = jsxRuntime.jsx(jsxRuntime.Fragment, {}), loading = false, hasError = false, gridProps = {}, }) => {
+    const { tableLabel, table } = useDataTableContext();
+    const { rowCountText, hasErrorText } = tableLabel;
+    return (jsxRuntime.jsxs(react.Grid, { templateRows: "auto 1fr", width: fitTableWidth ? "fit-content" : "100%", height: fitTableHeight ? "fit-content" : "100%", gap: "0.5rem", ...gridProps, children: [jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: 2, children: [jsxRuntime.jsxs(react.Flex, { justifyContent: "space-between", children: [jsxRuntime.jsx(react.Box, { children: showView && jsxRuntime.jsx(ViewDialog, { icon: jsxRuntime.jsx(md.MdOutlineViewColumn, {}) }) }), jsxRuntime.jsxs(react.Flex, { gap: "0.5rem", alignItems: "center", justifySelf: "end", children: [loading && jsxRuntime.jsx(react.Spinner, { size: "sm" }), hasError && (jsxRuntime.jsx(Tooltip, { content: hasErrorText, children: jsxRuntime.jsx(react.Icon, { as: bs.BsExclamationCircleFill, color: "red.400" }) })), showGlobalFilter && jsxRuntime.jsx(GlobalFilter, {}), showFilter && jsxRuntime.jsx(FilterDialog, {}), showReload && jsxRuntime.jsx(ReloadButton, {}), extraItems] })] }), filterTagsOptions.length > 0 && (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "0.5rem", children: filterTagsOptions.map((option) => {
+                            const { column, options } = option;
+                            const tableColumn = table.getColumn(column);
+                            return (jsxRuntime.jsxs(react.Flex, { alignItems: "center", flexFlow: "wrap", gap: "0.5rem", children: [tableColumn?.columnDef.meta?.displayName && (jsxRuntime.jsx(react.Text, { children: tableColumn?.columnDef.meta?.displayName })), jsxRuntime.jsx(TagFilter, { availableTags: options, selectedTags: tableColumn?.getFilterValue() ?? [], selectOne: true, onTagChange: (tags) => {
+                                            if (tags.length === 0) {
+                                                return tableColumn?.setFilterValue(undefined);
+                                            }
+                                            tableColumn?.setFilterValue(tags);
+                                        } })] }, column));
+                        }) })), showFilterTags && (jsxRuntime.jsx(react.Flex, { children: jsxRuntime.jsx(TableFilterTags, {}) }))] }), jsxRuntime.jsx(react.Grid, { overflow: "auto", bg: { base: "colorPalette.50", _dark: "colorPalette.950" }, children: children }), (showPageSizeControl || showPageCountText || showPagination) && (jsxRuntime.jsxs(react.Flex, { justifyContent: "space-between", children: [jsxRuntime.jsxs(react.Flex, { gap: "1rem", alignItems: "center", children: [showPageSizeControl && jsxRuntime.jsx(PageSizeControl, {}), showPageCountText && (jsxRuntime.jsxs(react.Flex, { children: [jsxRuntime.jsx(react.Text, { paddingRight: "0.5rem", children: rowCountText }), jsxRuntime.jsx(RowCountText, {})] }))] }), jsxRuntime.jsx(react.Box, { justifySelf: "end", children: showPagination && jsxRuntime.jsx(Pagination, {}) })] }))] }));
+};
+
+const EmptyState = React__namespace.forwardRef(function EmptyState(props, ref) {
+    const { title, description, icon, children, ...rest } = props;
+    return (jsxRuntime.jsx(react.EmptyState.Root, { ref: ref, ...rest, children: jsxRuntime.jsxs(react.EmptyState.Content, { children: [icon && (jsxRuntime.jsx(react.EmptyState.Indicator, { children: icon })), description ? (jsxRuntime.jsxs(react.VStack, { textAlign: "center", children: [jsxRuntime.jsx(react.EmptyState.Title, { children: title }), jsxRuntime.jsx(react.EmptyState.Description, { children: description })] })) : (jsxRuntime.jsx(react.EmptyState.Title, { children: title })), children] }) }));
+});
+
+const EmptyResult = (jsxRuntime.jsx(EmptyState, { icon: jsxRuntime.jsx(hi.HiColorSwatch, {}), title: "No results found", description: "Try adjusting your search", children: jsxRuntime.jsxs(react.List.Root, { variant: "marker", children: [jsxRuntime.jsx(react.List.Item, { children: "Try removing filters" }), jsxRuntime.jsx(react.List.Item, { children: "Try different keywords" })] }) }));
+const Table = ({ children, emptyComponent = EmptyResult, canResize = true, showLoading = false, ...props }) => {
+    const { table } = useDataTableContext();
+    // Skip empty check when loading to allow skeleton to render
+    if (!showLoading && table.getRowModel().rows.length <= 0) {
+        return emptyComponent;
+    }
+    return (jsxRuntime.jsx(react.Table.Root, { stickyHeader: true, variant: 'outline', width: canResize ? table.getCenterTotalSize() : undefined, display: 'grid', alignContent: 'start', overflowY: 'auto', bg: { base: 'colorPalette.50', _dark: 'colorPalette.950' }, ...props, children: children }));
+};
+
 const Checkbox = React__namespace.forwardRef(function Checkbox(props, ref) {
     const { icon, children, inputProps, rootRef, ...rest } = props;
     return (jsxRuntime.jsxs(react.Checkbox.Root, { ref: rootRef, ...rest, children: [jsxRuntime.jsx(react.Checkbox.HiddenInput, { ref: ref, ...inputProps }), jsxRuntime.jsx(react.Checkbox.Control, { children: icon || jsxRuntime.jsx(react.Checkbox.Indicator, {}) }), children != null && (jsxRuntime.jsx(react.Checkbox.Label, { children: children }))] }));
 });
 
-const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, showSelector = false, alwaysShowSelector = true, canResize = true, }) => {
+const TableBody = ({ showSelector = false, canResize = true, }) => {
     "use no memo";
     const { table } = useDataTableContext();
     const SELECTION_BOX_WIDTH = 20;
@@ -2934,12 +3142,7 @@ const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, sho
                 left: showSelector
                     ? `${cell.column.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
                     : `${cell.column.getStart("left")}px`,
-                background: pinnedBgColor.light,
-                position: "sticky",
-                zIndex: -1,
-                _dark: {
-                    backgroundColor: pinnedBgColor.dark,
-                },
+                position: "relative",
             }
             : {};
         return tdProps;
@@ -2958,133 +3161,91 @@ const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, sho
         };
     };
     return (jsxRuntime.jsx(react.Table.Body, { children: table.getRowModel().rows.map((row, index) => {
-            return (jsxRuntime.jsxs(react.Table.Row, { display: "flex", zIndex: 1, onMouseEnter: () => handleRowHover(index), onMouseLeave: () => handleRowHover(-1), ...getTrProps({ hoveredRow, index }), children: [showSelector && (jsxRuntime.jsx(TableRowSelector, { index: index, row: row, hoveredRow: hoveredRow, alwaysShowSelector: alwaysShowSelector })), row.getVisibleCells().map((cell, index) => {
+            return (jsxRuntime.jsxs(react.Table.Row, { display: "flex", zIndex: 1, onMouseEnter: () => handleRowHover(index), onMouseLeave: () => handleRowHover(-1), ...getTrProps({ hoveredRow, index }), children: [showSelector && (jsxRuntime.jsx(TableRowSelector, { index: index, row: row, hoveredRow: hoveredRow })), row.getVisibleCells().map((cell, index) => {
                         return (jsxRuntime.jsx(react.Table.Cell, { padding: `${table.getDensityValue()}px`, 
                             // styling resize and pinning start
-                            flex: `${canResize ? "0" : "1"} 0 ${cell.column.getSize()}px`, backgroundColor: "white", ...getTdProps(cell), _dark: {
-                                backgroundColor: "gray.950",
-                            }, children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, `chakra-table-rowcell-${cell.id}-${index}`));
+                            flex: `${canResize ? "0" : "1"} 0 ${cell.column.getSize()}px`, 
+                            // this is to avoid the cell from being too wide
+                            minWidth: `0`, color: {
+                                base: "colorPalette.900",
+                                _dark: "colorPalette.100",
+                            },
+                            bg: { base: "colorPalette.50", _dark: "colorPalette.950" }, ...getTdProps(cell), children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, `chakra-table-rowcell-${cell.id}-${index}`));
                     })] }, `chakra-table-row-${row.id}`));
         }) }));
 };
-const TableRowSelector = ({ index, row, hoveredRow, pinnedBgColor = { light: "gray.50", dark: "gray.700" }, alwaysShowSelector = true, }) => {
+const TableRowSelector = ({ row, }) => {
     const { table } = useDataTableContext();
     const SELECTION_BOX_WIDTH = 20;
-    const isCheckBoxVisible = (current_index, current_row) => {
-        if (alwaysShowSelector) {
-            return true;
-        }
-        if (current_row.getIsSelected()) {
-            return true;
-        }
-        if (hoveredRow == current_index) {
-            return true;
-        }
-        return false;
-    };
-    return (jsxRuntime.jsxs(react.Table.Cell, { padding: `${table.getDensityValue()}px`, ...(table.getIsSomeColumnsPinned("left")
-            ? {
-                left: `0px`,
-                backgroundColor: pinnedBgColor.light,
-                position: "sticky",
-                zIndex: 1,
-                _dark: { backgroundColor: pinnedBgColor.dark },
-            }
-            : {}), 
-        // styling resize and pinning end
-        display: "grid", children: [!isCheckBoxVisible(index, row) && (jsxRuntime.jsx(react.Box, { as: "span", margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px` })), isCheckBoxVisible(index, row) && (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: row.getIsSelected(),
-                    disabled: !row.getCanSelect(),
-                    onChange: row.getToggleSelectedHandler() }) }))] }));
+    return (jsxRuntime.jsx(react.Table.Cell, { padding: `${table.getDensityValue()}px`, display: "grid", color: {
+            base: "colorPalette.900",
+            _dark: "colorPalette.100",
+        },
+        bg: { base: "colorPalette.50", _dark: "colorPalette.950" }, justifyItems: "center", alignItems: "center", children: jsxRuntime.jsx(Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, checked: row.getIsSelected(),
+            disabled: !row.getCanSelect(),
+            onCheckedChange: row.getToggleSelectedHandler() }) }));
 };
 
-const Tooltip = React__namespace.forwardRef(function Tooltip(props, ref) {
-    const { showArrow, children, disabled, portalled, content, contentProps, portalRef, ...rest } = props;
-    if (disabled)
-        return children;
-    return (jsxRuntime.jsxs(react.Tooltip.Root, { ...rest, children: [jsxRuntime.jsx(react.Tooltip.Trigger, { asChild: true, children: children }), jsxRuntime.jsx(react.Portal, { disabled: !portalled, container: portalRef, children: jsxRuntime.jsx(react.Tooltip.Positioner, { children: jsxRuntime.jsxs(react.Tooltip.Content, { ref: ref, ...contentProps, children: [showArrow && (jsxRuntime.jsx(react.Tooltip.Arrow, { children: jsxRuntime.jsx(react.Tooltip.ArrowTip, {}) })), content] }) }) })] }));
-});
-
-const InputGroup = React__namespace.forwardRef(function InputGroup(props, ref) {
-    const { startElement, startElementProps, endElement, endElementProps, children, startOffset = "6px", endOffset = "6px", ...rest } = props;
-    return (jsxRuntime.jsxs(react.Group, { ref: ref, ...rest, children: [startElement && (jsxRuntime.jsx(react.InputElement, { pointerEvents: "none", ...startElementProps, children: startElement })), React__namespace.cloneElement(children, {
-                ...(startElement && {
-                    ps: `calc(var(--input-height) - ${startOffset})`,
-                }),
-                ...(endElement && { pe: `calc(var(--input-height) - ${endOffset})` }),
-                // @ts-expect-error chakra generated files
-                ...children.props,
-            }), endElement && (jsxRuntime.jsx(react.InputElement, { placement: "end", ...endElementProps, children: endElement }))] }));
-});
-
-const GlobalFilter = () => {
+const TableBodySkeleton = ({ showSelector = false, canResize = true, }) => {
+    'use no memo';
     const { table } = useDataTableContext();
-    const [searchTerm, setSearchTerm] = React.useState("");
-    const debouncedSearchTerm = usehooks.useDebounce(searchTerm, 500);
-    React.useEffect(() => {
-        const searchHN = async () => {
-            table.setGlobalFilter(debouncedSearchTerm);
+    const SELECTION_BOX_WIDTH = 20;
+    const [hoveredRow, setHoveredRow] = React.useState(-1);
+    const handleRowHover = (index) => {
+        setHoveredRow(index);
+    };
+    const getTdProps = (column) => {
+        const tdProps = column.getIsPinned()
+            ? {
+                left: showSelector
+                    ? `${column.getStart('left') + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
+                    : `${column.getStart('left')}px`,
+                position: 'relative',
+            }
+            : {};
+        return tdProps;
+    };
+    const getTrProps = ({ hoveredRow, index, }) => {
+        if (hoveredRow === -1) {
+            return {};
+        }
+        if (hoveredRow === index) {
+            return {
+                opacity: '1',
+            };
+        }
+        return {
+            opacity: '0.8',
         };
-        searchHN();
-    }, [debouncedSearchTerm]);
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(InputGroup, { flex: "1", startElement: jsxRuntime.jsx(md.MdSearch, {}), children: jsxRuntime.jsx(react.Input, { placeholder: "Outline", variant: "outline", onChange: (e) => {
-                    setSearchTerm(e.target.value);
-                } }) }) }));
-};
-
-const ReloadButton = ({ text = "Reload", variant = "icon", }) => {
-    const { url } = useDataTableServerContext();
-    const queryClient = reactQuery.useQueryClient();
-    if (variant === "icon") {
-        return (jsxRuntime.jsx(Tooltip, { showArrow: true, content: "This is the tooltip content", children: jsxRuntime.jsx(Button, { variant: "ghost", onClick: () => {
-                    queryClient.invalidateQueries({ queryKey: [url] });
-                }, "aria-label": "refresh", children: jsxRuntime.jsx(io5.IoReload, {}) }) }));
-    }
-    return (jsxRuntime.jsxs(Button, { variant: "ghost", onClick: () => {
-            queryClient.invalidateQueries({ queryKey: [url] });
-        }, children: [jsxRuntime.jsx(io5.IoReload, {}), " ", text] }));
-};
-
-const FilterOptions = ({ column }) => {
-    const { table } = useDataTableContext();
-    const tableColumn = table.getColumn(column);
-    const options = tableColumn?.columnDef.meta?.filterOptions ?? [];
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: options.map((option) => {
-            const selected = table.getColumn(column)?.getFilterValue() === option;
-            return (jsxRuntime.jsxs(react.Button, { size: "sm", onClick: () => {
-                    if (selected) {
-                        table.setColumnFilters((state) => {
-                            return state.filter((filter) => {
-                                return filter.id !== column;
-                            });
-                        });
-                        return;
-                    }
-                    table.getColumn(column)?.setFilterValue(option);
-                }, variant: selected ? "solid" : "outline", display: "flex", gap: "0.25rem", children: [option, selected && jsxRuntime.jsx(md.MdClose, {})] }, option));
+    };
+    // Get the number of skeleton rows based on current pageSize
+    const pageSize = table.getState().pagination.pageSize;
+    const visibleColumns = table.getVisibleLeafColumns();
+    return (jsxRuntime.jsx(react.Table.Body, { children: Array.from({ length: pageSize }).map((_, rowIndex) => {
+            return (jsxRuntime.jsxs(react.Table.Row, { display: 'flex', zIndex: 1, onMouseEnter: () => handleRowHover(rowIndex), onMouseLeave: () => handleRowHover(-1), ...getTrProps({ hoveredRow, index: rowIndex }), children: [showSelector && jsxRuntime.jsx(TableRowSelectorSkeleton, {}), visibleColumns.map((column, colIndex) => {
+                        return (jsxRuntime.jsx(react.Table.Cell, { padding: `${table.getDensityValue()}px`, 
+                            // styling resize and pinning start
+                            flex: `${canResize ? '0' : '1'} 0 ${column.getSize()}px`, 
+                            // this is to avoid the cell from being too wide
+                            minWidth: `0`, color: {
+                                base: 'colorPalette.900',
+                                _dark: 'colorPalette.100',
+                            },
+                            bg: { base: 'colorPalette.50', _dark: 'colorPalette.950' }, ...getTdProps(column), children: jsxRuntime.jsx(react.Skeleton, { height: "20px", width: "80%" }) }, `chakra-table-skeleton-cell-${rowIndex}-${colIndex}`));
+                    })] }, `chakra-table-skeleton-row-${rowIndex}`));
         }) }));
 };
-
-const TableFilterTags = () => {
+const TableRowSelectorSkeleton = () => {
     const { table } = useDataTableContext();
-    return (jsxRuntime.jsx(react.Flex, { gap: "0.5rem", flexFlow: "wrap", children: table.getState().columnFilters.map(({ id, value }) => {
-            return (jsxRuntime.jsx(Tag, { gap: "0.5rem", closable: true, cursor: "pointer", onClick: () => {
-                    table.setColumnFilters(table.getState().columnFilters.filter((filter) => {
-                        return filter.value != value;
-                    }));
-                }, children: `${id}: ${value}` }, `${id}-${value}`));
-        }) }));
-};
-
-const TableControls = ({ fitTableWidth = false, fitTableHeight = false, children = jsxRuntime.jsx(jsxRuntime.Fragment, {}), showGlobalFilter = false, showFilter = false, showFilterName = false, showFilterTags = false, showReload = false, showPagination = true, showPageSizeControl = true, showPageCountText = true, showView = true, filterOptions = [], extraItems = jsxRuntime.jsx(jsxRuntime.Fragment, {}), loading = false, hasError = false, }) => {
-    const { translate } = useDataTableContext();
-    return (jsxRuntime.jsxs(react.Grid, { templateRows: "auto 1fr auto", width: fitTableWidth ? "fit-content" : "100%", height: fitTableHeight ? "fit-content" : "100%", gap: "0.5rem", children: [jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: 2, children: [jsxRuntime.jsxs(react.Flex, { justifyContent: "space-between", children: [jsxRuntime.jsx(react.Box, { children: showView && jsxRuntime.jsx(ViewDialog, { icon: jsxRuntime.jsx(md.MdOutlineViewColumn, {}) }) }), jsxRuntime.jsxs(react.Flex, { gap: "0.5rem", alignItems: "center", justifySelf: "end", children: [loading && jsxRuntime.jsx(react.Spinner, { size: "sm" }), hasError && (jsxRuntime.jsx(Tooltip, { content: translate.t("hasError"), children: jsxRuntime.jsx(react.Icon, { as: bs.BsExclamationCircleFill, color: "red.400" }) })), showGlobalFilter && jsxRuntime.jsx(GlobalFilter, {}), showFilter && jsxRuntime.jsx(FilterDialog, {}), showReload && jsxRuntime.jsx(ReloadButton, {}), extraItems] })] }), filterOptions.length > 0 && (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "0.5rem", children: filterOptions.map((column) => {
-                            return (jsxRuntime.jsxs(react.Flex, { alignItems: "center", flexFlow: "wrap", gap: "0.5rem", children: [showFilterName && jsxRuntime.jsxs(react.Text, { children: [column, ":"] }), jsxRuntime.jsx(FilterOptions, { column: column })] }, column));
-                        }) })), showFilterTags && (jsxRuntime.jsx(react.Flex, { children: jsxRuntime.jsx(TableFilterTags, {}) }))] }), jsxRuntime.jsx(react.Grid, { overflow: "auto", backgroundColor: "gray.50", _dark: {
-                    backgroundColor: "gray.900",
-                }, children: children }), jsxRuntime.jsxs(react.Flex, { justifyContent: "space-between", children: [jsxRuntime.jsxs(react.Flex, { gap: "1rem", alignItems: "center", children: [showPageSizeControl && jsxRuntime.jsx(PageSizeControl, {}), showPageCountText && (jsxRuntime.jsxs(react.Flex, { children: [jsxRuntime.jsx(react.Text, { paddingRight: "0.5rem", children: translate.t("rowcount.total") }), jsxRuntime.jsx(RowCountText, {})] }))] }), jsxRuntime.jsx(react.Box, { justifySelf: "end", children: showPagination && jsxRuntime.jsx(Pagination, {}) })] })] }));
+    const SELECTION_BOX_WIDTH = 20;
+    return (jsxRuntime.jsx(react.Table.Cell, { padding: `${table.getDensityValue()}px`, display: 'grid', color: {
+            base: 'colorPalette.900',
+            _dark: 'colorPalette.100',
+        },
+        bg: { base: 'colorPalette.50', _dark: 'colorPalette.950' }, justifyItems: 'center', alignItems: 'center', children: jsxRuntime.jsx(react.Skeleton, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px` }) }));
 };
 
-const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, showSelector = false, alwaysShowSelector = true, }) => {
+const TableFooter = ({ showSelector = false, alwaysShowSelector = true, }) => {
     const table = useDataTableContext().table;
     const SELECTION_BOX_WIDTH = 20;
     const [hoveredCheckBox, setHoveredCheckBox] = React.useState(false);
@@ -3103,65 +3264,62 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, s
         }
         return false;
     };
-    const getThProps = (header) => {
-        const thProps = header.column.getIsPinned()
-            ? {
-                left: showSelector
-                    ? `${header.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
-                    : `${header.getStart("left") + table.getDensityValue() * 2}px`,
-                background: pinnedBgColor.light,
-                position: "sticky",
-                zIndex: 1,
-                _dark: {
-                    backgroundColor: pinnedBgColor.dark,
-                },
-            }
-            : {};
-        return thProps;
-    };
-    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
-                // styling resize and pinning start
-                , { 
-                    // styling resize and pinning start
-                    padding: `${table.getDensityValue()}px`, ...(table.getIsSomeColumnsPinned("left")
-                        ? {
-                            left: `0px`,
-                            backgroundColor: pinnedBgColor.light,
-                            position: "sticky",
-                            zIndex: 1,
-                            _dark: { backgroundColor: pinnedBgColor.dark },
-                        }
-                        : {}), 
-                    // styling resize and pinning end
-                    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: table.getIsAllRowsSelected(),
+    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: table.getIsAllRowsSelected(),
                                 // indeterminate: table.getIsSomeRowsSelected(),
                                 onChange: table.getToggleAllRowsSelectedHandler() }) })), !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}`, 
                     // styling resize and pinning start
-                    maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, display: "grid", ...getThProps(header), 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", _hover: { backgroundColor: "gray.100" }, children: jsxRuntime.jsxs(react.Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
+                    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
-                                            : reactTable.flexRender(header.column.columnDef.footer, header.getContext()), jsxRuntime.jsx(react.Box, { children: header.column.getCanSort() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [header.column.getIsSorted() === false && (
-                                                    // <UpDownIcon />
-                                                    jsxRuntime.jsx(jsxRuntime.Fragment, {})), header.column.getIsSorted() === "asc" && (jsxRuntime.jsx(bi.BiUpArrow, {})), header.column.getIsSorted() === "desc" && (jsxRuntime.jsx(bi.BiDownArrow, {}))] })) })] }) }) }) }) }, `chakra-table-footer-${header.column.id}-${footerGroup.id}`)))] }, `chakra-table-footergroup-${footerGroup.id}`))) }));
+                                            : reactTable.flexRender(header.column.columnDef.footer, header.getContext()), jsxRuntime.jsx(react.Box, { children: header.column.getCanSort() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [header.column.getIsSorted() === false && jsxRuntime.jsx(jsxRuntime.Fragment, {}), header.column.getIsSorted() === "asc" && (jsxRuntime.jsx(bi.BiUpArrow, {})), header.column.getIsSorted() === "desc" && (jsxRuntime.jsx(bi.BiDownArrow, {}))] })) })] }) }) }) }) }, `chakra-table-footer-${header.column.id}-${footerGroup.id}`)))] }, `chakra-table-footergroup-${footerGroup.id}`))) }));
 };
 
-const TableHeader = ({ canResize = true, pinnedBgColor = { light: "gray.50", dark: "gray.700" }, showSelector = false, isSticky = true, alwaysShowSelector = true, tHeadProps = {}, }) => {
+// Default text values
+const DEFAULT_HEADER_TEXTS = {
+    pinColumn: "Pin Column",
+    cancelPin: "Cancel Pin",
+    sortAscending: "Sort Ascending",
+    sortDescending: "Sort Descending",
+    clearSorting: "Clear Sorting",
+};
+/**
+ * TableHeader component with configurable text strings.
+ *
+ * @example
+ * // Using default texts
+ * <TableHeader />
+ *
+ * @example
+ * // Customizing default texts for all columns
+ * <TableHeader
+ *   defaultTexts={{
+ *     pinColumn: "Pin This Column",
+ *     sortAscending: "Sort A-Z"
+ *   }}
+ * />
+ *
+ * @example
+ * // Customizing texts per column via meta
+ * const columns = [
+ *   columnHelper.accessor("name", {
+ *     header: "Name",
+ *     meta: {
+ *       headerTexts: {
+ *         pinColumn: "Pin Name Column",
+ *         sortAscending: "Sort Names A-Z"
+ *       }
+ *     }
+ *   })
+ * ];
+ */
+const TableHeader = ({ canResize = true, showSelector = false, isSticky = true, tableHeaderProps = {}, tableRowProps = {}, defaultTexts = {}, }) => {
     const { table } = useDataTableContext();
     const SELECTION_BOX_WIDTH = 20;
-    const [hoveredCheckBox, setHoveredCheckBox] = React.useState(false);
-    const handleRowHover = (isHovered) => {
-        setHoveredCheckBox(isHovered);
-    };
-    const isCheckBoxVisible = () => {
-        if (alwaysShowSelector) {
-            return true;
-        }
-        if (table.getIsAllRowsSelected()) {
-            return true;
-        }
-        if (hoveredCheckBox) {
-            return true;
-        }
-        return false;
+    // Merge default texts with provided defaults
+    const mergedDefaultTexts = { ...DEFAULT_HEADER_TEXTS, ...defaultTexts };
+    // Helper function to get text for a specific header
+    const getHeaderText = (header, key) => {
+        const columnMeta = header.column.columnDef.meta;
+        return columnMeta?.headerTexts?.[key] || mergedDefaultTexts[key];
     };
     const getThProps = (header) => {
         const thProps = header.column.getIsPinned()
@@ -3169,12 +3327,8 @@ const TableHeader = ({ canResize = true, pinnedBgColor = { light: "gray.50", dar
                 left: showSelector
                     ? `${header.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
                     : `${header.getStart("left")}px`,
-                background: pinnedBgColor.light,
                 position: "sticky",
                 zIndex: 100 + 1,
-                _dark: {
-                    backgroundColor: pinnedBgColor.dark,
-                },
             }
             : {};
         return thProps;
@@ -3183,21 +3337,13 @@ const TableHeader = ({ canResize = true, pinnedBgColor = { light: "gray.50", dar
         position: "sticky",
         top: 0,
     };
-    return (jsxRuntime.jsx(react.Table.Header, { ...(isSticky ? stickyProps : {}), ...tHeadProps, children: table.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsxs(react.Table.Row, { display: "flex", children: [showSelector && (jsxRuntime.jsxs(react.Table.ColumnHeader
-                // styling resize and pinning start
-                , { ...(table.getIsSomeColumnsPinned("left")
-                        ? {
-                            left: `0px`,
-                            backgroundColor: pinnedBgColor.light,
-                            position: "sticky",
-                            zIndex: 1,
-                            _dark: { backgroundColor: pinnedBgColor.dark },
-                        }
-                        : {}), 
-                    // styling resize and pinning end
-                    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: table.getIsAllRowsSelected(),
-                                // indeterminate: table.getIsSomeRowsSelected(),
-                                onChange: table.getToggleAllRowsSelectedHandler() }) })), !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` }))] })), headerGroup.headers.map((header) => {
+    return (jsxRuntime.jsx(react.Table.Header, { ...(isSticky ? stickyProps : {}), bgColor: "transparent", ...tableHeaderProps, children: table.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsxs(react.Table.Row, { display: "flex", bgColor: "transparent", ...tableRowProps, children: [showSelector && (jsxRuntime.jsx(react.Table.ColumnHeader, { padding: `${table.getDensityValue()}px`, display: "grid", color: {
+                        base: "colorPalette.900",
+                        _dark: "colorPalette.100",
+                    },
+                    bg: { base: "colorPalette.50", _dark: "colorPalette.950" }, justifyItems: "center", alignItems: "center", children: jsxRuntime.jsx(Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, checked: table.getIsAllRowsSelected(),
+                        // indeterminate: table.getIsSomeRowsSelected(),
+                        onChange: table.getToggleAllRowsSelectedHandler() }) })), headerGroup.headers.map((header) => {
                     const resizeProps = {
                         onMouseDown: header.getResizeHandler(),
                         onTouchStart: header.getResizeHandler(),
@@ -3205,18 +3351,32 @@ const TableHeader = ({ canResize = true, pinnedBgColor = { light: "gray.50", dar
                     };
                     return (jsxRuntime.jsxs(react.Table.ColumnHeader, { padding: 0, columnSpan: `${header.colSpan}`, 
                         // styling resize and pinning start
-                        flex: `${canResize ? "0" : "1"} 0 ${header.column.getSize()}px`, display: "grid", gridTemplateColumns: "1fr auto", zIndex: 1500 + header.index, ...getThProps(header), children: [jsxRuntime.jsxs(MenuRoot, { children: [jsxRuntime.jsx(MenuTrigger, { asChild: true, children: jsxRuntime.jsx(react.Flex, { padding: `${table.getDensityValue()}px`, alignItems: "center", justifyContent: "start", borderRadius: "0rem", overflow: "auto", _hover: {
-                                                backgroundColor: "gray.100",
-                                                _dark: {
-                                                    backgroundColor: "gray.700",
+                        flex: `${canResize ? "0" : "1"} 0 ${header.column.getSize()}px`, display: "grid", gridTemplateColumns: "1fr auto", zIndex: 1500 + header.index, color: {
+                            base: "colorPalette.800",
+                            _dark: "colorPalette.200",
+                        },
+                        bg: { base: "colorPalette.100", _dark: "colorPalette.900" }, ...getThProps(header), children: [jsxRuntime.jsxs(MenuRoot, { children: [jsxRuntime.jsx(MenuTrigger, { asChild: true, children: jsxRuntime.jsx(react.Flex, { padding: `${table.getDensityValue()}px`, alignItems: "center", justifyContent: "start", borderRadius: "0rem", overflow: "auto", color: {
+                                                base: "colorPalette.800",
+                                                _dark: "colorPalette.200",
+                                                _hover: {
+                                                    base: "colorPalette.700",
+                                                    _dark: "colorPalette.300",
+                                                },
+                                            },
+                                            bg: {
+                                                base: "colorPalette.100",
+                                                _dark: "colorPalette.900",
+                                                _hover: {
+                                                    base: "colorPalette.200",
+                                                    _dark: "colorPalette.800",
                                                 },
                                             }, children: jsxRuntime.jsxs(react.Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
                                                         ? null
                                                         : reactTable.flexRender(header.column.columnDef.header, header.getContext()), jsxRuntime.jsx(react.Box, { children: header.column.getCanSort() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [header.column.getIsSorted() === false && jsxRuntime.jsx(jsxRuntime.Fragment, {}), header.column.getIsSorted() === "asc" && (jsxRuntime.jsx(bi.BiUpArrow, {})), header.column.getIsSorted() === "desc" && (jsxRuntime.jsx(bi.BiDownArrow, {}))] })) }), jsxRuntime.jsx(react.Box, { children: header.column.getIsFiltered() && jsxRuntime.jsx(md.MdFilterListAlt, {}) })] }) }) }), jsxRuntime.jsxs(MenuContent, { children: [!header.column.getIsPinned() && (jsxRuntime.jsx(MenuItem, { asChild: true, value: "pin-column", children: jsxRuntime.jsxs(Button, { variant: "ghost", onClick: () => {
                                                         header.column.pin("left");
-                                                    }, children: [jsxRuntime.jsx(md.MdPushPin, {}), "Pin Column"] }) })), header.column.getIsPinned() && (jsxRuntime.jsx(MenuItem, { asChild: true, value: "cancel-pin", children: jsxRuntime.jsxs(Button, { variant: "ghost", onClick: () => {
+                                                    }, children: [jsxRuntime.jsx(md.MdPushPin, {}), getHeaderText(header, "pinColumn")] }) })), header.column.getIsPinned() && (jsxRuntime.jsx(MenuItem, { asChild: true, value: "cancel-pin", children: jsxRuntime.jsxs(Button, { variant: "ghost", onClick: () => {
                                                         header.column.pin(false);
-                                                    }, children: [jsxRuntime.jsx(md.MdCancel, {}), "Cancel Pin"] }) })), header.column.getCanSort() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuItem, { asChild: true, value: "sort-ascend", children: jsxRuntime.jsxs(Button, { variant: "ghost", onClick: () => {
+                                                    }, children: [jsxRuntime.jsx(md.MdCancel, {}), getHeaderText(header, "cancelPin")] }) })), header.column.getCanSort() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuItem, { asChild: true, value: "sort-ascend", children: jsxRuntime.jsxs(Button, { variant: "ghost", onClick: () => {
                                                                 table.setSorting((state) => {
                                                                     return [
                                                                         ...state.filter((column) => {
@@ -3225,7 +3385,7 @@ const TableHeader = ({ canResize = true, pinnedBgColor = { light: "gray.50", dar
                                                                         { id: header.id, desc: false },
                                                                     ];
                                                                 });
-                                                            }, children: [jsxRuntime.jsx(gr.GrAscend, {}), "Sort Ascending"] }) }), jsxRuntime.jsx(MenuItem, { asChild: true, value: "sort-descend", children: jsxRuntime.jsxs(Button, { variant: "ghost", onClick: () => {
+                                                            }, children: [jsxRuntime.jsx(gr.GrAscend, {}), getHeaderText(header, "sortAscending")] }) }), jsxRuntime.jsx(MenuItem, { asChild: true, value: "sort-descend", children: jsxRuntime.jsxs(Button, { variant: "ghost", onClick: () => {
                                                                 table.setSorting((state) => {
                                                                     return [
                                                                         ...state.filter((column) => {
@@ -3234,42 +3394,53 @@ const TableHeader = ({ canResize = true, pinnedBgColor = { light: "gray.50", dar
                                                                         { id: header.id, desc: true },
                                                                     ];
                                                                 });
-                                                            }, children: [jsxRuntime.jsx(gr.GrDescend, {}), "Sort Descending"] }) }), header.column.getIsSorted() && (jsxRuntime.jsx(MenuItem, { asChild: true, value: "sort-descend", children: jsxRuntime.jsxs(Button, { variant: "ghost", onClick: () => {
+                                                            }, children: [jsxRuntime.jsx(gr.GrDescend, {}), getHeaderText(header, "sortDescending")] }) }), header.column.getIsSorted() && (jsxRuntime.jsx(MenuItem, { asChild: true, value: "clear-sorting", children: jsxRuntime.jsxs(Button, { variant: "ghost", onClick: () => {
                                                                 header.column.clearSorting();
-                                                            }, children: [jsxRuntime.jsx(md.MdClear, {}), "Clear Sorting"] }) }))] }))] })] }), canResize && (jsxRuntime.jsx(react.Box, { borderRight: "0.2rem solid", borderRightColor: header.column.getIsResizing() ? "gray.700" : "transparent", position: "relative", right: "0.1rem", width: "2px", height: "100%", userSelect: "none", style: { touchAction: "none" }, _hover: {
+                                                            }, children: [jsxRuntime.jsx(md.MdClear, {}), getHeaderText(header, "clearSorting")] }) }))] }))] })] }), canResize && (jsxRuntime.jsx(react.Box, { borderRight: "0.2rem solid", borderRightColor: header.column.getIsResizing()
+                                    ? "colorPalette.700"
+                                    : "transparent", position: "relative", right: "0.1rem", width: "2px", height: "100%", userSelect: "none", style: { touchAction: "none" }, _hover: {
                                     borderRightColor: header.column.getIsResizing()
-                                        ? "gray.700"
-                                        : "gray.400",
+                                        ? "colorPalette.700"
+                                        : "colorPalette.400",
                                 }, ...resizeProps }))] }, `chakra-table-header-${header.id}`));
                 })] }, `chakra-table-headergroup-${headerGroup.id}`))) }));
 };
 
-const EmptyState = React__namespace.forwardRef(function EmptyState(props, ref) {
-    const { title, description, icon, children, ...rest } = props;
-    return (jsxRuntime.jsx(react.EmptyState.Root, { ref: ref, ...rest, children: jsxRuntime.jsxs(react.EmptyState.Content, { children: [icon && (jsxRuntime.jsx(react.EmptyState.Indicator, { children: icon })), description ? (jsxRuntime.jsxs(react.VStack, { textAlign: "center", children: [jsxRuntime.jsx(react.EmptyState.Title, { children: title }), jsxRuntime.jsx(react.EmptyState.Description, { children: description })] })) : (jsxRuntime.jsx(react.EmptyState.Title, { children: title })), children] }) }));
-});
-
-const EmptyResult = (jsxRuntime.jsx(EmptyState, { icon: jsxRuntime.jsx(hi.HiColorSwatch, {}), title: "No results found", description: "Try adjusting your search", children: jsxRuntime.jsxs(react.List.Root, { variant: "marker", children: [jsxRuntime.jsx(react.List.Item, { children: "Try removing filters" }), jsxRuntime.jsx(react.List.Item, { children: "Try different keywords" })] }) }));
-const Table = ({ children, emptyComponent = EmptyResult, canResize = true, ...props }) => {
-    const { table } = useDataTableContext();
-    if (table.getRowModel().rows.length <= 0) {
-        return emptyComponent;
+const DefaultTable = ({ showFooter = false, tableProps = {}, tableHeaderProps = {}, tableBodyProps = {}, tableFooterProps = {}, controlProps = {}, variant = '', isLoading = false, }) => {
+    if (variant === 'greedy') {
+        const bodyComponent = isLoading ? (jsxRuntime.jsx(TableBodySkeleton, { showSelector: tableBodyProps.showSelector, canResize: false })) : (jsxRuntime.jsx(TableBody, { ...tableBodyProps, canResize: false, ...tableBodyProps }));
+        return (jsxRuntime.jsx(TableControls, { ...controlProps, children: jsxRuntime.jsxs(Table, { canResize: false, showLoading: isLoading, ...tableProps, children: [jsxRuntime.jsx(TableHeader, { canResize: false, ...tableHeaderProps }), bodyComponent, showFooter && (jsxRuntime.jsx(TableFooter, { canResize: false, ...tableFooterProps }))] }) }));
     }
-    return (jsxRuntime.jsx(react.Table.Root, { stickyHeader: true, variant: "outline", width: canResize ? table.getCenterTotalSize() : undefined, display: "grid", alignContent: "start", overflowY: "auto", ...props, children: children }));
+    const bodyComponent = isLoading ? (jsxRuntime.jsx(TableBodySkeleton, { showSelector: tableBodyProps.showSelector, canResize: tableBodyProps.canResize })) : (jsxRuntime.jsx(TableBody, { ...tableBodyProps }));
+    return (jsxRuntime.jsx(TableControls, { ...controlProps, children: jsxRuntime.jsxs(Table, { showLoading: isLoading, ...tableProps, children: [jsxRuntime.jsx(TableHeader, { ...tableHeaderProps }), bodyComponent, showFooter && jsxRuntime.jsx(TableFooter, { ...tableFooterProps })] }) }));
 };
 
-const DefaultTable = ({ showFooter = false, tableProps = {}, tableHeaderProps = {}, tableBodyProps = {}, controlProps = {}, tableFooterProps = {}, variant = "", }) => {
-    if (variant === "greedy") {
-        return (jsxRuntime.jsx(TableControls, { ...controlProps, children: jsxRuntime.jsxs(Table, { canResize: false, ...{ ...tableProps }, children: [jsxRuntime.jsx(TableHeader, { canResize: false, ...tableHeaderProps }), jsxRuntime.jsx(TableBody, { canResize: false, ...tableBodyProps }), showFooter && (jsxRuntime.jsx(TableFooter, { canResize: false, ...tableFooterProps }))] }) }));
-    }
-    return (jsxRuntime.jsx(TableControls, { ...controlProps, children: jsxRuntime.jsxs(Table, { ...tableProps, children: [jsxRuntime.jsx(TableHeader, { ...tableHeaderProps }), jsxRuntime.jsx(TableBody, { ...tableBodyProps }), showFooter && jsxRuntime.jsx(TableFooter, { ...tableFooterProps })] }) }));
+/**
+ * DefaultTableServer is a wrapper around DefaultTable that automatically
+ * detects server-side loading state from DataTableServerContext.
+ *
+ * Use this component when working with DataTableServer to automatically
+ * show skeleton loading state during data fetching.
+ *
+ * @example
+ * ```tsx
+ * <DataTableServer columns={columns} {...datatableServer}>
+ *   <DefaultTableServer />
+ * </DataTableServer>
+ * ```
+ */
+const DefaultTableServer = ({ isLoading: isLoadingOverride, ...props }) => {
+    // Automatically detect loading state from server context
+    const serverContext = useDataTableServerContext();
+    const isLoading = isLoadingOverride ?? serverContext?.query?.isLoading ?? false;
+    return jsxRuntime.jsx(DefaultTable, { ...props, isLoading: isLoading });
 };
 
-const TableCardContainer = ({ children, variant = "", ...props }) => {
+const TableCardContainer = ({ children, variant = "", gap = "1rem", gridTemplateColumns = "repeat(auto-fit, minmax(20rem, 1fr))", direction = "row", ...props }) => {
     if (variant === "carousel") {
-        return (jsxRuntime.jsx(react.Flex, { overflow: "scroll", gap: "1rem", children: children }));
+        return (jsxRuntime.jsx(react.Flex, { overflow: "auto", gap: gap, direction: direction, ...props, children: children }));
     }
-    return (jsxRuntime.jsx(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(20rem, 1fr))", gap: "0.5rem", ...props, children: children }));
+    return (jsxRuntime.jsx(react.Grid, { gridTemplateColumns: gridTemplateColumns, gap: gap, ...props, children: children }));
 };
 
 const DefaultCardTitle = () => {
@@ -3298,8 +3469,8 @@ const TableComponent = ({ render = () => {
 };
 
 const TableLoadingComponent = ({ render, }) => {
-    const { loading } = useDataTableContext();
-    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: render(loading) });
+    const { query } = useDataTableServerContext();
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: render(query.isLoading) });
 };
 
 const SelectAllRowsToggle = ({ selectAllIcon = jsxRuntime.jsx(md.MdOutlineChecklist, {}), clearAllIcon = jsxRuntime.jsx(md.MdClear, {}), selectAllText = "", clearAllText = "", }) => {
@@ -3385,50 +3556,43 @@ const useDataTable = ({ default: { sorting: defaultSorting = [], pagination: def
     };
 };
 
-const useDataTableServer = ({ url, default: { sorting: defaultSorting = [], pagination: defaultPagination = {
-    pageIndex: 0, //initial page index
-    pageSize: 10, //default page size
-}, rowSelection: defaultRowSelection = {}, columnFilters: defaultColumnFilters = [], columnOrder: defaultColumnOrder = [], columnVisibility: defaultColumnVisibility = {}, globalFilter: defaultGlobalFilter = "", density: defaultDensity = "sm", } = {
-    sorting: [],
-    pagination: {
+const useDataTableServer = (props) => {
+    const { url, default: defaultProps, keyPrefix, placeholderData, queryFn: customQueryFn, } = props;
+    const { sorting: defaultSorting, pagination: defaultPagination, rowSelection: defaultRowSelection, columnFilters: defaultColumnFilters, columnOrder: defaultColumnOrder, columnVisibility: defaultColumnVisibility, globalFilter: defaultGlobalFilter, density: defaultDensity, } = defaultProps || {};
+    const [sorting, setSorting] = React.useState(defaultSorting || []);
+    const [columnFilters, setColumnFilters] = React.useState(defaultColumnFilters || []); // can set initial column filter state here
+    const [pagination, setPagination] = React.useState(defaultPagination || {
         pageIndex: 0, //initial page index
-        pageSize: 10, //age size
-    },
-    rowSelection: {},
-    columnFilters: [],
-    columnOrder: [],
-    columnVisibility: {},
-    globalFilter: "",
-    density: "sm",
-}, keyPrefix, }) => {
-    const [sorting, setSorting] = React.useState(defaultSorting);
-    const [columnFilters, setColumnFilters] = React.useState(defaultColumnFilters); // can set initial column filter state here
-    const [pagination, setPagination] = React.useState(defaultPagination);
-    const [rowSelection, setRowSelection] = React.useState(defaultRowSelection);
-    const [columnOrder, setColumnOrder] = React.useState(defaultColumnOrder);
-    const [globalFilter, setGlobalFilter] = React.useState(defaultGlobalFilter);
-    const [density, setDensity] = React.useState(defaultDensity);
-    const [columnVisibility, setColumnVisibility] = React.useState(defaultColumnVisibility);
+        pageSize: 10, //default page size
+    });
+    const [rowSelection, setRowSelection] = React.useState(defaultRowSelection || {});
+    const [columnOrder, setColumnOrder] = React.useState(defaultColumnOrder || []);
+    const [globalFilter, setGlobalFilter] = React.useState(defaultGlobalFilter || "");
+    const [density, setDensity] = React.useState(defaultDensity || "sm");
+    const [columnVisibility, setColumnVisibility] = React.useState(defaultColumnVisibility || {});
+    const { pageSize, pageIndex } = pagination;
     const params = {
-        offset: pagination.pageIndex * pagination.pageSize,
-        limit: pagination.pageSize,
+        offset: pageIndex * pageSize,
+        limit: pageSize,
         sorting,
         where: columnFilters,
         searching: globalFilter,
     };
+    const defaultQueryFn = async () => {
+        if (!url) {
+            throw new Error("url is required");
+        }
+        const response = await axios.get(url, {
+            params,
+        });
+        return response.data;
+    };
     const query = reactQuery.useQuery({
         queryKey: [url, JSON.stringify(params)],
-        queryFn: () => {
-            return axios
-                .get(url, {
-                params,
-            })
-                .then((res) => res.data);
-        },
-        placeholderData: {
-            count: 0,
-            data: [],
-        },
+        queryFn: customQueryFn !== undefined
+            ? () => customQueryFn(params)
+            : defaultQueryFn,
+        placeholderData,
     });
     const translate = reactI18next.useTranslation("", { keyPrefix });
     return {
@@ -3518,23 +3682,33 @@ const getColumns = ({ schema, include = [], ignore = [], width = [], meta = {},
     return columns;
 };
 
-const TableDataDisplay = () => {
-    const { table, columns, translate } = useDataTableContext();
-    const { query } = useDataTableServerContext();
-    const { data } = query;
-    const columnDef = table._getColumnDefs();
-    console.log(columnDef, "glp");
-    console.log(columnDef, columns, table.getState().columnOrder, data, "glp");
+const TableDataDisplay = ({ colorPalette, emptyComponent, }) => {
+    const { columns, translate, data } = useDataTableContext();
     const columnsMap = Object.fromEntries(columns.map((def) => {
-        return [def.accessorKey, def];
+        const { accessorKey, id } = def;
+        if (accessorKey) {
+            return [accessorKey, def];
+        }
+        return [id, def];
     }));
     const columnHeaders = Object.keys(columnsMap);
+    const totalWidths = columns
+        .map(({ size }) => {
+        if (!!size === false) {
+            return 0;
+        }
+        if (typeof size === "number") {
+            return size;
+        }
+        return 0;
+    })
+        .reduce((previous, current) => previous + current, 0);
     const columnWidths = columns
         .map(({ size }) => {
         if (!!size === false) {
             return "1fr";
         }
-        return `${size}px`;
+        return `minmax(${size}px, ${(size / totalWidths) * 100}%)`;
     })
         .join(" ");
     console.log({ columnWidths }, "hadfg");
@@ -3543,48 +3717,55 @@ const TableDataDisplay = () => {
         overflow: "auto",
         paddingX: "2",
         py: "1",
+        color: { base: "colorPalette.900", _dark: "colorPalette.100" },
+        bgColor: { base: "colorPalette.50", _dark: "colorPalette.950" },
         borderBottomColor: { base: "colorPalette.200", _dark: "colorPalette.800" },
         borderBottomWidth: "1px",
+        ...{ colorPalette },
     };
-    return (jsxRuntime.jsxs(react.Grid, { templateColumns: `${columnWidths}`, overflow: "auto", borderWidth: "1px", borderColor: { base: "colorPalette.200", _dark: "colorPalette.800" }, children: [jsxRuntime.jsx(react.Grid, { templateColumns: `${columnWidths}`, column: `1/span ${columns.length}`, bg: { base: "colorPalette.200", _dark: "colorPalette.800" }, children: columnHeaders.map((header) => {
-                    return (jsxRuntime.jsx(react.Box, { flex: "1 0 0%", paddingX: "2", py: "1", children: translate.t(`column_header.${header}`) }));
-                }) }), data?.data.map((record) => {
+    if (data.length <= 0) {
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: 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) => {
+                    return (jsxRuntime.jsx(react.Box, { flex: "1 0 0%", paddingX: "2", py: "1", overflow: "auto", textOverflow: "ellipsis", children: translate.t(`column_header.${header}`) }));
+                }) }), data.map((record) => {
                 return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: columnHeaders.map((header) => {
+                        const { cell } = columnsMap[header];
+                        const value = record[header];
                         if (!!record === false) {
                             return (jsxRuntime.jsx(react.Box, { ...cellProps, children: translate.t(`column_cell.placeholder`) }));
                         }
-                        if (!!record[header] === false) {
-                            return (jsxRuntime.jsx(react.Box, { ...cellProps, children: translate.t(`column_cell.placeholder`) }));
+                        if (cell) {
+                            return (jsxRuntime.jsx(react.Box, { ...cellProps, children: cell({ row: { original: record } }) }));
                         }
-                        if (typeof record[header] === "object") {
-                            return (jsxRuntime.jsx(react.Box, { ...cellProps, children: jsxRuntime.jsx(RecordDisplay, { object: record[header] }) }));
+                        if (typeof value === "object") {
+                            return (jsxRuntime.jsx(react.Box, { ...cellProps, children: jsxRuntime.jsx(RecordDisplay, { object: value }) }));
                         }
-                        return jsxRuntime.jsx(react.Box, { ...cellProps, children: record[header] ?? "" });
+                        return jsxRuntime.jsx(react.Box, { ...cellProps, children: value });
                     }) }));
             })] }));
 };
 
-const AccordionItemTrigger = React__namespace.forwardRef(function AccordionItemTrigger(props, ref) {
-    const { children, indicatorPlacement = "end", ...rest } = props;
-    return (jsxRuntime.jsxs(react.Accordion.ItemTrigger, { ...rest, ref: ref, children: [indicatorPlacement === "start" && (jsxRuntime.jsx(react.Accordion.ItemIndicator, { rotate: { base: "-90deg", _open: "0deg" }, children: jsxRuntime.jsx(lu.LuChevronDown, {}) })), jsxRuntime.jsx(react.HStack, { gap: "4", flex: "1", textAlign: "start", width: "full", children: children }), indicatorPlacement === "end" && (jsxRuntime.jsx(react.Accordion.ItemIndicator, { children: jsxRuntime.jsx(lu.LuChevronDown, {}) }))] }));
-});
-const AccordionItemContent = React__namespace.forwardRef(function AccordionItemContent(props, ref) {
-    return (jsxRuntime.jsx(react.Accordion.ItemContent, { children: jsxRuntime.jsx(react.Accordion.ItemBody, { ...props, ref: ref }) }));
-});
-const AccordionRoot = react.Accordion.Root;
-const AccordionItem = react.Accordion.Item;
-
 //@ts-expect-error TODO: find appropriate type
 const SchemaFormContext = React.createContext({
     schema: {},
-    serverUrl: "",
-    requestUrl: "",
+    serverUrl: '',
+    requestUrl: '',
     order: [],
     ignore: [],
     include: [],
     onSubmit: async () => { },
     rowNumber: 0,
     requestOptions: {},
+    timezone: 'Asia/Hong_Kong',
+    displayConfig: {
+        showSubmitButton: true,
+        showResetButton: true,
+        showTitle: true,
+    },
+    requireConfirmation: false,
+    onFormSubmit: async () => { },
+    ajvResolver: async () => ({ values: {}, errors: {} }),
 });
 
 const useSchemaContext = () => {
@@ -3595,6 +3776,202 @@ const clearEmptyString = (object) => {
     return Object.fromEntries(Object.entries(object).filter(([, value]) => value !== ""));
 };
 
+const validateData = (data, schema) => {
+    const ajv = new Ajv({
+        strict: false,
+        allErrors: true,
+    });
+    addFormats(ajv);
+    const validate = ajv.compile(schema);
+    const validationResult = validate(data);
+    const errors = validate.errors;
+    console.log(errors, data);
+    return {
+        isValid: validationResult,
+        validate,
+        errors,
+    };
+};
+
+/**
+ * Gets the schema node for a field by following the path from root schema
+ */
+const getSchemaNodeForField = (schema, fieldPath) => {
+    if (!fieldPath || fieldPath === '') {
+        return schema;
+    }
+    const pathParts = fieldPath.split('.');
+    let currentSchema = schema;
+    for (const part of pathParts) {
+        if (currentSchema &&
+            currentSchema.properties &&
+            currentSchema.properties[part] &&
+            typeof currentSchema.properties[part] === 'object' &&
+            currentSchema.properties[part] !== null) {
+            currentSchema = currentSchema.properties[part];
+        }
+        else {
+            return undefined;
+        }
+    }
+    return currentSchema;
+};
+/**
+ * Converts AJV error objects to react-hook-form field errors format
+ */
+const convertAjvErrorsToFieldErrors = (errors, schema) => {
+    if (!errors || errors.length === 0) {
+        return {};
+    }
+    const fieldErrors = {};
+    errors.forEach((error) => {
+        let fieldName = '';
+        // Special handling for required keyword: map to the specific missing property
+        if (error.keyword === 'required') {
+            const basePath = (error.instancePath || '')
+                .replace(/^\//, '')
+                .replace(/\//g, '.');
+            const missingProperty = (error.params &&
+                error.params.missingProperty);
+            if (missingProperty) {
+                fieldName = basePath
+                    ? `${basePath}.${missingProperty}`
+                    : missingProperty;
+            }
+            else {
+                // Fallback to schemaPath conversion if missingProperty is unavailable
+                fieldName = (error.schemaPath || '')
+                    .replace(/^#\//, '#.')
+                    .replace(/\//g, '.');
+            }
+        }
+        else {
+            const fieldPath = error.instancePath || error.schemaPath;
+            if (fieldPath) {
+                fieldName = fieldPath.replace(/^\//, '').replace(/\//g, '.');
+            }
+        }
+        if (fieldName) {
+            // Get the schema node for this field to check for custom error messages
+            const fieldSchema = getSchemaNodeForField(schema, fieldName);
+            const customMessage = fieldSchema?.errorMessages?.[error.keyword];
+            // Provide helpful fallback message if no custom message is provided
+            const fallbackMessage = customMessage ||
+                `Missing error message for ${error.keyword}. Add errorMessages.${error.keyword} to schema for field '${fieldName}'`;
+            if (error.keyword === 'required') {
+                // Required errors override any existing non-required errors for this field
+                fieldErrors[fieldName] = {
+                    type: 'required',
+                    keyword: error.keyword,
+                    params: error.params,
+                    message: fallbackMessage,
+                };
+            }
+            else {
+                const existing = fieldErrors[fieldName];
+                if (existing) {
+                    // Do not override required errors
+                    if (existing.type === 'required') {
+                        return;
+                    }
+                    // Combine messages if multiple errors for same field
+                    existing.message = existing.message
+                        ? `${existing.message}; ${fallbackMessage}`
+                        : fallbackMessage;
+                }
+                else {
+                    fieldErrors[fieldName] = {
+                        type: error.keyword,
+                        keyword: error.keyword,
+                        params: error.params,
+                        message: fallbackMessage,
+                    };
+                }
+            }
+        }
+    });
+    return fieldErrors;
+};
+/**
+ * AJV resolver for react-hook-form
+ * Integrates AJV validation with react-hook-form's validation system
+ */
+/**
+ * Strips null, undefined, and empty string values from an object
+ */
+const stripEmptyValues = (obj) => {
+    if (obj === null || obj === undefined) {
+        return undefined;
+    }
+    if (typeof obj === 'string' && obj.trim() === '') {
+        return undefined;
+    }
+    if (Array.isArray(obj)) {
+        const filtered = obj
+            .map(stripEmptyValues)
+            .filter((item) => item !== undefined);
+        return filtered.length > 0 ? filtered : undefined;
+    }
+    if (typeof obj === 'object' && obj !== null) {
+        const result = {};
+        let hasValues = false;
+        for (const [key, value] of Object.entries(obj)) {
+            const cleanedValue = stripEmptyValues(value);
+            if (cleanedValue !== undefined) {
+                result[key] = cleanedValue;
+                hasValues = true;
+            }
+        }
+        return hasValues ? result : undefined;
+    }
+    return obj;
+};
+const ajvResolver = (schema) => {
+    return async (values) => {
+        try {
+            // Strip empty values before validation
+            const cleanedValues = stripEmptyValues(values);
+            // Use empty object for validation if all values were stripped
+            const valuesToValidate = cleanedValues === undefined ? {} : cleanedValues;
+            const { isValid, errors } = validateData(valuesToValidate, schema);
+            console.debug('AJV Validation Result:', {
+                isValid,
+                errors,
+                cleanedValues,
+                valuesToValidate,
+            });
+            if (isValid) {
+                return {
+                    values: (cleanedValues || {}),
+                    errors: {},
+                };
+            }
+            const fieldErrors = convertAjvErrorsToFieldErrors(errors, schema);
+            console.debug('AJV Validation Failed:', {
+                errors,
+                fieldErrors,
+                cleanedValues,
+                valuesToValidate,
+            });
+            return {
+                values: {},
+                errors: fieldErrors,
+            };
+        }
+        catch (error) {
+            return {
+                values: {},
+                errors: {
+                    root: {
+                        type: 'validation',
+                        message: error instanceof Error ? error.message : 'Validation failed',
+                    },
+                },
+            };
+        }
+    };
+};
+
 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.`);
@@ -3610,13 +3987,65 @@ const idPickerSanityCheck = (column, foreign_key) => {
         throw new Error(`The key column does not exist in properties of column ${column} when using id-picker.`);
     }
 };
-const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, children, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, getUpdatedData = () => { }, }) => {
+const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, children, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, getUpdatedData = () => { }, customErrorRenderer, customSuccessRenderer, displayConfig = {
+    showSubmitButton: true,
+    showResetButton: true,
+    showTitle: true,
+}, requireConfirmation = false, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, }) => {
     const [isSuccess, setIsSuccess] = React.useState(false);
     const [isError, setIsError] = React.useState(false);
     const [isSubmiting, setIsSubmiting] = React.useState(false);
     const [isConfirming, setIsConfirming] = React.useState(false);
     const [validatedData, setValidatedData] = React.useState();
     const [error, setError] = React.useState();
+    const onBeforeSubmit = () => {
+        setIsSubmiting(true);
+    };
+    const onAfterSubmit = () => {
+        setIsSubmiting(false);
+    };
+    const onSubmitError = (error) => {
+        setIsError(true);
+        setError(error);
+    };
+    const onSubmitSuccess = () => {
+        setIsSuccess(true);
+    };
+    const defaultOnSubmit = async (promise) => {
+        try {
+            console.log('onBeforeSubmit');
+            onBeforeSubmit();
+            await promise;
+            console.log('onSubmitSuccess');
+            onSubmitSuccess();
+        }
+        catch (error) {
+            console.log('onSubmitError', error);
+            onSubmitError(error);
+        }
+        finally {
+            onAfterSubmit();
+        }
+    };
+    const defaultSubmitPromise = (data) => {
+        const options = {
+            method: 'POST',
+            url: `${serverUrl}`,
+            data: clearEmptyString(data),
+            ...requestOptions,
+        };
+        return axios.request(options);
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const onFormSubmit = async (data) => {
+        // AJV validation is now handled by react-hook-form resolver
+        // This function will only be called if validation passes
+        if (onSubmit === undefined) {
+            await defaultOnSubmit(Promise.resolve(defaultSubmitPromise(data)));
+            return;
+        }
+        await defaultOnSubmit(Promise.resolve(onSubmit(data)));
+    };
     return (jsxRuntime.jsx(SchemaFormContext.Provider, { value: {
             schema,
             serverUrl,
@@ -3643,11 +4072,21 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
             error,
             setError,
             getUpdatedData,
+            customErrorRenderer,
+            customSuccessRenderer,
+            displayConfig,
+            requireConfirmation,
+            onFormSubmit,
+            dateTimePickerLabels,
+            idPickerLabels,
+            enumPickerLabels,
+            filePickerLabels,
+            ajvResolver: ajvResolver(schema),
         }, children: jsxRuntime.jsx(reactHookForm.FormProvider, { ...form, children: children }) }));
 };
 
 function removeIndex(str) {
-    return str.replace(/\.\d+\./g, '.');
+    return str.replace(/\.\d+\./g, ".");
 }
 
 const ArrayRenderer = ({ schema, column, prefix, }) => {
@@ -3659,13 +4098,17 @@ const ArrayRenderer = ({ schema, column, prefix, }) => {
     const isRequired = required?.some((columnId) => columnId === column);
     const { formState: { errors }, setValue, watch, } = reactHookForm.useFormContext();
     const fields = (watch(colLabel) ?? []);
-    return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [jsxRuntime.jsxs(react.Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.fieldLabel`))}`, isRequired && jsxRuntime.jsx("span", { children: "*" })] }), fields.map((field, index) => (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", children: [jsxRuntime.jsx(react.Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat("auto-fit", auto)`, children: jsxRuntime.jsx(SchemaRenderer, { column: `${index}`,
-                            prefix: `${colLabel}.`,
-                            schema: items }) }), jsxRuntime.jsx(react.Flex, { justifyContent: "end", children: jsxRuntime.jsx(react.Button, { variant: "ghost", onClick: () => {
-                                setValue(colLabel, fields.filter((_, curIndex) => {
-                                    return curIndex === index;
-                                }));
-                            }, children: translate.t(removeIndex(`${colLabel}.remove`)) }) })] }, `${colLabel}.${index}`))), jsxRuntime.jsx(react.Flex, { children: jsxRuntime.jsx(react.Button, { onClick: () => {
+    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}`,
+                                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: () => {
+                                    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") {
                             setValue(colLabel, [...fields, 0]);
                             return;
@@ -3679,48 +4122,49 @@ const ArrayRenderer = ({ schema, column, prefix, }) => {
                             return;
                         }
                         setValue(colLabel, [...fields, {}]);
-                    }, children: translate.t(removeIndex(`${colLabel}.add`)) }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
+                    }, children: translate.t(removeIndex(`${colLabel}.add`)) }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
 };
 
 const Field = React__namespace.forwardRef(function Field(props, ref) {
     const { label, children, helperText, errorText, optionalText, ...rest } = props;
-    return (jsxRuntime.jsxs(react.Field.Root, { ref: ref, ...rest, children: [label && (jsxRuntime.jsxs(react.Field.Label, { children: [label, jsxRuntime.jsx(react.Field.RequiredIndicator, { fallback: optionalText })] })), children, helperText && (jsxRuntime.jsx(react.Field.HelperText, { children: helperText })), errorText && (jsxRuntime.jsx(react.Field.ErrorText, { children: errorText }))] }));
+    return (jsxRuntime.jsxs(react.Field.Root, { ref: ref, ...rest, children: [label && (jsxRuntime.jsxs(react.Field.Label, { children: [label, jsxRuntime.jsx(react.Field.RequiredIndicator, { color: rest.invalid && rest.required ? 'red.500' : undefined, fallback: optionalText })] })), children, helperText && (jsxRuntime.jsx(react.Field.HelperText, { children: helperText })), !!errorText && (jsxRuntime.jsxs(react.Field.ErrorText, { children: [rest.required && rest.invalid && (jsxRuntime.jsx("span", { style: { color: 'var(--chakra-colors-red-500)' }, children: "* " })), errorText] }))] }));
 });
 
 const BooleanPicker = ({ schema, column, prefix }) => {
     const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn, gridRow } = 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}.fieldLabel`))}`, required: isRequired, alignItems: "stretch", gridColumn,
-        gridRow, children: [jsxRuntime.jsx(CheckboxCard, { checked: value, variant: "surface", onChange: () => {
-                    setValue(colLabel, !value);
-                } }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
+    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: () => {
+                setValue(colLabel, !value);
+            } }) }));
+};
+
+const CustomInput = ({ column, schema, prefix }) => {
+    const formContext = reactHookForm.useFormContext();
+    const { inputRender } = schema;
+    return (inputRender &&
+        inputRender({
+            column,
+            schema,
+            prefix,
+            formContext,
+        }));
 };
 
-const monthNamesShort = [
-    "Jan",
-    "Feb",
-    "Mar",
-    "Apr",
-    "May",
-    "Jun",
-    "Jul",
-    "Aug",
-    "Sep",
-    "Oct",
-    "Nov",
-    "Dec",
-];
-const weekdayNamesShort = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 const Calendar = ({ calendars, getBackProps, getForwardProps, getDateProps, firstDayOfWeek = 0, }) => {
+    const { labels } = React.useContext(DatePickerContext);
+    const { monthNamesShort, weekdayNamesShort, backButtonLabel, forwardButtonLabel } = labels;
     if (calendars.length) {
         return (jsxRuntime.jsxs(react.Grid, { children: [jsxRuntime.jsxs(react.Grid, { templateColumns: "repeat(4, auto)", justifyContent: "center", children: [jsxRuntime.jsx(react.Button, { variant: "ghost", ...getBackProps({
                                 calendars,
                                 offset: 12,
-                            }), children: "<<" }), jsxRuntime.jsx(react.Button, { variant: "ghost", ...getBackProps({ calendars }), children: "Back" }), jsxRuntime.jsx(react.Button, { variant: "ghost", ...getForwardProps({ calendars }), children: "Next" }), jsxRuntime.jsx(react.Button, { variant: "ghost", ...getForwardProps({
+                            }), children: "<<" }), jsxRuntime.jsx(react.Button, { variant: "ghost", ...getBackProps({ calendars }), children: backButtonLabel }), jsxRuntime.jsx(react.Button, { variant: "ghost", ...getForwardProps({ calendars }), children: forwardButtonLabel }), jsxRuntime.jsx(react.Button, { variant: "ghost", ...getForwardProps({
                                 calendars,
                                 offset: 12,
                             }), children: ">>" })] }), jsxRuntime.jsx(react.Grid, { templateColumns: "repeat(2, auto)", justifyContent: "center", children: calendars.map((calendar) => (jsxRuntime.jsxs(react.Grid, { gap: 4, children: [jsxRuntime.jsxs(react.Grid, { justifyContent: "center", children: [monthNamesShort[calendar.month], " ", calendar.year] }), jsxRuntime.jsxs(react.Grid, { templateColumns: "repeat(7, auto)", justifyContent: "center", children: [[0, 1, 2, 3, 4, 5, 6].map((weekdayNum) => {
@@ -3763,9 +4207,52 @@ const Calendar = ({ calendars, getBackProps, getForwardProps, getDateProps, firs
     }
     return null;
 };
+const DatePickerContext = React.createContext({
+    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",
+    },
+});
 let DatePicker$1 = class DatePicker extends React.Component {
     render() {
-        return (jsxRuntime.jsx(Dayzed, { onDateSelected: this.props.onDateSelected, selected: this.props.selected, firstDayOfWeek: this.props.firstDayOfWeek, showOutsideDays: this.props.showOutsideDays, date: this.props.date, minDate: this.props.minDate, maxDate: this.props.maxDate, monthsToDisplay: this.props.monthsToDisplay, render: (dayzedData) => (jsxRuntime.jsx(Calendar, { ...dayzedData, firstDayOfWeek: this.props.firstDayOfWeek })) }));
+        const { 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",
+        }, } = this.props;
+        return (jsxRuntime.jsx(DatePickerContext.Provider, { value: { labels }, children: jsxRuntime.jsx(Dayzed, { onDateSelected: this.props.onDateSelected, selected: this.props.selected, firstDayOfWeek: this.props.firstDayOfWeek, showOutsideDays: this.props.showOutsideDays, date: this.props.date, minDate: this.props.minDate, maxDate: this.props.maxDate, monthsToDisplay: this.props.monthsToDisplay, render: 
+                // @ts-expect-error - Dayzed types need to be fixed
+                (dayzedData) => (jsxRuntime.jsx(Calendar, { ...dayzedData,
+                    firstDayOfWeek: this.props.firstDayOfWeek })) }) }));
     }
 };
 
@@ -3787,28 +4274,270 @@ const PopoverRoot = react.Popover.Root;
 const PopoverBody = react.Popover.Body;
 const PopoverTrigger = react.Popover.Trigger;
 
+/**
+ * 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 { translate } = useSchemaContext();
-    const { required, gridColumn, gridRow } = schema;
+    const { timezone, dateTimePickerLabels } = useSchemaContext();
+    const formI18n = useFormI18n(column, prefix);
+    const { required, gridColumn = 'span 12', gridRow = 'span 1', displayDateFormat = 'YYYY-MM-DD', dateFormat = 'YYYY-MM-DD', } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
-    const colLabel = `${prefix}${column}`;
+    const colLabel = formI18n.colLabel;
     const [open, setOpen] = React.useState(false);
     const selectedDate = watch(colLabel);
-    const formatedDate = dayjs(selectedDate).format("YYYY-MM-DD");
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.fieldLabel`))}`, required: isRequired, alignItems: "stretch", gridColumn,
-        gridRow, children: [jsxRuntime.jsxs(PopoverRoot, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: jsxRuntime.jsx(Button, { size: "sm", variant: "outline", onClick: () => {
-                                setOpen(true);
-                            }, children: selectedDate !== undefined ? `${formatedDate}` : "" }) }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { children: [jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsx(DatePicker$1
-                                // @ts-expect-error TODO: find appropriate types
-                                , { 
-                                    // @ts-expect-error TODO: find appropriate types
-                                    selected: new Date(selectedDate), 
-                                    // @ts-expect-error TODO: find appropriate types
-                                    onDateSelected: ({ date }) => {
-                                        setValue(colLabel, dayjs(date).format("YYYY-MM-DD"));
-                                        setOpen(false);
-                                    } })] }) })] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
+    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]);
+    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(PopoverRoot, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: jsxRuntime.jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
+                            setOpen(true);
+                        }, justifyContent: 'start', children: [jsxRuntime.jsx(md.MdDateRange, {}), selectedDate !== undefined ? `${displayDate}` : ''] }) }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { children: [jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsx(DatePicker$1, { selected: new Date(selectedDate), onDateSelected: ({ date }) => {
+                                    setValue(colLabel, dayjs(date).format(dateFormat));
+                                    setOpen(false);
+                                }, labels: {
+                                    monthNamesShort: dateTimePickerLabels?.monthNamesShort ?? [
+                                        formI18n.translate.t(`common.month_1`, {
+                                            defaultValue: 'January',
+                                        }),
+                                        formI18n.translate.t(`common.month_2`, {
+                                            defaultValue: 'February',
+                                        }),
+                                        formI18n.translate.t(`common.month_3`, {
+                                            defaultValue: 'March',
+                                        }),
+                                        formI18n.translate.t(`common.month_4`, {
+                                            defaultValue: 'April',
+                                        }),
+                                        formI18n.translate.t(`common.month_5`, {
+                                            defaultValue: 'May',
+                                        }),
+                                        formI18n.translate.t(`common.month_6`, {
+                                            defaultValue: 'June',
+                                        }),
+                                        formI18n.translate.t(`common.month_7`, {
+                                            defaultValue: 'July',
+                                        }),
+                                        formI18n.translate.t(`common.month_8`, {
+                                            defaultValue: 'August',
+                                        }),
+                                        formI18n.translate.t(`common.month_9`, {
+                                            defaultValue: 'September',
+                                        }),
+                                        formI18n.translate.t(`common.month_10`, {
+                                            defaultValue: 'October',
+                                        }),
+                                        formI18n.translate.t(`common.month_11`, {
+                                            defaultValue: 'November',
+                                        }),
+                                        formI18n.translate.t(`common.month_12`, {
+                                            defaultValue: 'December',
+                                        }),
+                                    ],
+                                    weekdayNamesShort: dateTimePickerLabels?.weekdayNamesShort ?? [
+                                        formI18n.translate.t(`common.weekday_1`, {
+                                            defaultValue: 'Sun',
+                                        }),
+                                        formI18n.translate.t(`common.weekday_2`, {
+                                            defaultValue: 'Mon',
+                                        }),
+                                        formI18n.translate.t(`common.weekday_3`, {
+                                            defaultValue: 'Tue',
+                                        }),
+                                        formI18n.translate.t(`common.weekday_4`, {
+                                            defaultValue: 'Wed',
+                                        }),
+                                        formI18n.translate.t(`common.weekday_5`, {
+                                            defaultValue: 'Thu',
+                                        }),
+                                        formI18n.translate.t(`common.weekday_6`, {
+                                            defaultValue: 'Fri',
+                                        }),
+                                        formI18n.translate.t(`common.weekday_7`, {
+                                            defaultValue: 'Sat',
+                                        }),
+                                    ],
+                                    backButtonLabel: dateTimePickerLabels?.backButtonLabel ??
+                                        formI18n.translate.t(`common.back_button`, {
+                                            defaultValue: 'Back',
+                                        }),
+                                    forwardButtonLabel: dateTimePickerLabels?.forwardButtonLabel ??
+                                        formI18n.translate.t(`common.forward_button`, {
+                                            defaultValue: 'Forward',
+                                        }),
+                                } })] }) })] }) }));
+};
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+const DateRangePicker = ({ column, schema, prefix, }) => {
+    const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
+    const { timezone, dateTimePickerLabels } = useSchemaContext();
+    const formI18n = useFormI18n(column, prefix);
+    const { required, gridColumn = 'span 12', gridRow = 'span 1', displayDateFormat = 'YYYY-MM-DD', dateFormat = 'YYYY-MM-DD', } = schema;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const colLabel = formI18n.colLabel;
+    const [open, setOpen] = React.useState(false);
+    const selectedDateRange = watch(colLabel);
+    // Convert string[] to Date[] for the picker
+    const selectedDates = (selectedDateRange ?? [])
+        .map((dateStr) => {
+        if (!dateStr)
+            return null;
+        const parsed = dayjs(dateStr).tz(timezone);
+        return parsed.isValid() ? parsed.toDate() : null;
+    })
+        .filter((date) => date !== null);
+    // Format display string
+    const getDisplayText = () => {
+        if (!selectedDateRange || selectedDateRange.length === 0) {
+            return '';
+        }
+        if (selectedDateRange.length === 1) {
+            const date = dayjs(selectedDateRange[0]).tz(timezone);
+            return date.isValid() ? date.format(displayDateFormat) : '';
+        }
+        if (selectedDateRange.length === 2) {
+            const startDate = dayjs(selectedDateRange[0]).tz(timezone);
+            const endDate = dayjs(selectedDateRange[1]).tz(timezone);
+            if (startDate.isValid() && endDate.isValid()) {
+                return `${startDate.format(displayDateFormat)} - ${endDate.format(displayDateFormat)}`;
+            }
+        }
+        return '';
+    };
+    React.useEffect(() => {
+        try {
+            if (selectedDateRange && selectedDateRange.length > 0) {
+                // Format dates according to dateFormat from schema
+                const formatted = selectedDateRange
+                    .map((dateStr) => {
+                    if (!dateStr)
+                        return null;
+                    const parsed = dayjs(dateStr).tz(timezone);
+                    return parsed.isValid() ? parsed.format(dateFormat) : null;
+                })
+                    .filter((date) => date !== null);
+                // Update the form value only if different to avoid loops
+                // Compare arrays element by element
+                const needsUpdate = formatted.length !== selectedDateRange.length ||
+                    formatted.some((val, idx) => val !== selectedDateRange[idx]);
+                if (needsUpdate && formatted.length > 0) {
+                    setValue(colLabel, formatted, {
+                        shouldValidate: true,
+                        shouldDirty: true,
+                    });
+                }
+            }
+        }
+        catch (e) {
+            console.error(e);
+        }
+    }, [selectedDateRange, dateFormat, colLabel, setValue, timezone]);
+    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(PopoverRoot, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: jsxRuntime.jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
+                            setOpen(true);
+                        }, justifyContent: 'start', children: [jsxRuntime.jsx(md.MdDateRange, {}), getDisplayText()] }) }), jsxRuntime.jsx(PopoverContent, { minW: '600px', children: jsxRuntime.jsxs(PopoverBody, { children: [jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsx(RangeDatePicker, { selected: selectedDates, onDateSelected: ({ selected, selectable, date }) => {
+                                    const newDates = getRangeDates({
+                                        selectable,
+                                        date,
+                                        selectedDates,
+                                    }) ?? [];
+                                    // Convert Date[] to string[]
+                                    const formattedDates = newDates
+                                        .map((dateObj) => dayjs(dateObj).tz(timezone).format(dateFormat))
+                                        .filter((dateStr) => dateStr);
+                                    setValue(colLabel, formattedDates, {
+                                        shouldValidate: true,
+                                        shouldDirty: true,
+                                    });
+                                }, monthsToDisplay: 2 })] }) })] }) }));
 };
 
 function filterArray(array, searchTerm) {
@@ -3821,17 +4550,18 @@ function filterArray(array, searchTerm) {
     });
 }
 
-const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
+const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLimit = false, }) => {
     const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
-    const { translate } = useSchemaContext();
-    const { required } = schema;
+    const { enumPickerLabels } = useSchemaContext();
+    const formI18n = useFormI18n(column, prefix);
+    const { required, variant } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
-    const { gridColumn, gridRow, renderDisplay } = schema;
+    const { gridColumn = 'span 12', gridRow = 'span 1', renderDisplay } = schema;
     const [searchText, setSearchText] = React.useState();
     const [limit, setLimit] = React.useState(10);
     const [openSearchResult, setOpenSearchResult] = React.useState();
     const ref = React.useRef(null);
-    const colLabel = `${prefix}${column}`;
+    const colLabel = formI18n.colLabel;
     const watchEnum = watch(colLabel);
     const watchEnums = (watch(colLabel) ?? []);
     const dataList = schema.enum ?? [];
@@ -3841,32 +4571,63 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
         setSearchText(event.target.value);
         setLimit(10);
     };
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${column}.fieldLabel`))}`, required: isRequired, alignItems: "stretch", gridColumn,
-        gridRow, children: [isMultiple && (jsxRuntime.jsxs(react.Flex, { flexFlow: "wrap", gap: 1, children: [watchEnums.map((enumValue) => {
+    if (variant === 'radio') {
+        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(react.RadioGroup.Root, { defaultValue: "1", children: jsxRuntime.jsx(react.HStack, { gap: "6", children: filterArray(dataList, searchText ?? '').map((item) => {
+                        return (jsxRuntime.jsxs(react.RadioGroup.Item, { onClick: () => {
+                                if (!isMultiple) {
+                                    setOpenSearchResult(false);
+                                    setValue(colLabel, item);
+                                    return;
+                                }
+                                const newSet = new Set([...(watchEnums ?? []), item]);
+                                setValue(colLabel, [...newSet]);
+                            }, value: item, children: [jsxRuntime.jsx(react.RadioGroup.ItemHiddenInput, {}), jsxRuntime.jsx(react.RadioGroup.ItemIndicator, {}), jsxRuntime.jsx(react.RadioGroup.ItemText, { children: !!renderDisplay === true
+                                        ? renderDisplay(item)
+                                        : formI18n.t(item) })] }, `${colLabel}-${item}`));
+                    }) }) }) }));
+    }
+    return (jsxRuntime.jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
+        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: [isMultiple && (jsxRuntime.jsxs(react.Flex, { flexFlow: 'wrap', gap: 1, children: [watchEnums.map((enumValue) => {
                         const item = enumValue;
-                        if (item === undefined) {
-                            return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "undefined" });
+                        if (!!item === false) {
+                            return jsxRuntime.jsx(jsxRuntime.Fragment, {});
                         }
-                        return (jsxRuntime.jsx(Tag, { closable: true, onClick: () => {
-                                // setSelectedEnums((state) => state.filter((id) => id != item));
+                        return (jsxRuntime.jsx(Tag, { size: "lg", closable: true, onClick: () => {
                                 setValue(column, watchEnums.filter((id) => id != item));
                             }, children: !!renderDisplay === true
                                 ? renderDisplay(item)
-                                : translate.t(removeIndex(`${colLabel}.${item}`)) }));
-                    }), jsxRuntime.jsx(Tag, { cursor: "pointer", onClick: () => {
+                                : formI18n.t(item) }, item));
+                    }), jsxRuntime.jsx(Tag, { size: "lg", cursor: 'pointer', onClick: () => {
                             setOpenSearchResult(true);
-                        }, children: translate.t(removeIndex(`${colLabel}.addMore`)) })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: () => {
+                        }, children: enumPickerLabels?.addMore ?? formI18n.t('add_more') }, `${colLabel}-add-more-tag`)] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: 'outline', onClick: () => {
                     setOpenSearchResult(true);
-                }, children: watchEnum === undefined
-                    ? ""
-                    : translate.t(removeIndex(`${colLabel}.${watchEnum}`)) })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: translate.t(`${column}.typeToSearch`), onChange: (event) => {
+                }, justifyContent: 'start', children: !!watchEnum === false ? '' : formI18n.t(watchEnum ?? 'null') })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: 'bottom-start' }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { portalled: false, children: jsxRuntime.jsxs(PopoverBody, { display: 'grid', gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: enumPickerLabels?.typeToSearch ?? formI18n.t('type_to_search'), onChange: (event) => {
                                         onSearchChange(event);
                                         setOpenSearchResult(true);
-                                    }, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsx(react.Text, { children: `${translate.t(`${column}.total`)}: ${count}, ${translate.t(`${column}.showing`)} ${limit}` }), jsxRuntime.jsxs(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsxRuntime.jsx(react.Flex, { flexFlow: "column wrap", children: filterArray(dataList, searchText ?? "").map((item) => {
+                                    }, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), showTotalAndLimit && (jsxRuntime.jsx(react.Text, { children: `${enumPickerLabels?.total ?? formI18n.t('total')}: ${count}, ${enumPickerLabels?.showing ?? formI18n.t('showing')} ${limit}` })), jsxRuntime.jsxs(react.Grid, { overflow: 'auto', maxHeight: '20rem', children: [jsxRuntime.jsx(react.Flex, { flexFlow: 'column wrap', children: dataList
+                                                .filter((item) => {
+                                                const searchTerm = (searchText || '').toLowerCase();
+                                                if (!searchTerm)
+                                                    return true;
+                                                // Check if the original enum value contains the search text
+                                                const enumValueMatch = item
+                                                    .toLowerCase()
+                                                    .includes(searchTerm);
+                                                // Check if the display value (translation) contains the search text
+                                                const displayValue = !!renderDisplay === true
+                                                    ? renderDisplay(item)
+                                                    : formI18n.t(item);
+                                                // Convert to string and check if it includes the search term
+                                                const displayValueString = String(displayValue).toLowerCase();
+                                                const displayValueMatch = displayValueString.includes(searchTerm);
+                                                return enumValueMatch || displayValueMatch;
+                                            })
+                                                .map((item) => {
                                                 const selected = isMultiple
                                                     ? watchEnums.some((enumValue) => item === enumValue)
                                                     : watchEnum == item;
-                                                return (jsxRuntime.jsx(react.Box, { cursor: "pointer", onClick: () => {
+                                                return (jsxRuntime.jsx(react.Box, { cursor: 'pointer', onClick: () => {
                                                         if (!isMultiple) {
                                                             setOpenSearchResult(false);
                                                             setValue(colLabel, item);
@@ -3874,10 +4635,11 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
                                                         }
                                                         const newSet = new Set([...(watchEnums ?? []), item]);
                                                         setValue(colLabel, [...newSet]);
-                                                    }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
+                                                    }, ...(selected ? { color: 'colorPalette.400/50' } : {}), children: !!renderDisplay === true
                                                         ? renderDisplay(item)
-                                                        : translate.t(removeIndex(`${colLabel}.${item}`)) }, `${colLabel}-${item}`));
-                                            }) }), isDirty && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: dataList.length <= 0 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: translate.t(removeIndex(`${colLabel}.emptySearchResult`)) })) }))] })] }) })] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
+                                                        : formI18n.t(item) }, `${colLabel}-${item}`));
+                                            }) }), isDirty && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: dataList.length <= 0 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: enumPickerLabels?.emptySearchResult ??
+                                                    formI18n.t('empty_search_result') })) }))] })] }) })] })] }));
 };
 
 function isEnteringWindow(_ref) {
@@ -4183,7 +4945,7 @@ function getText(_ref2) {
   return source.getStringData(textMediaType);
 }
 
-const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }, placeholder = "Drop files here or click to upload", }) => {
+const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }, placeholder = 'Drop files here or click to upload', }) => {
     const ref = React.useRef(null);
     const [isDraggedOver, setIsDraggedOver] = React.useState(false);
     React.useEffect(() => {
@@ -4197,7 +4959,7 @@ const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }
             onDrop: ({ source }) => {
                 const files = getFiles({ source });
                 const text = getText({ source });
-                console.log(files, text, "dfposa");
+                console.log(files, text, 'dfposa');
                 onDrop({ files, text });
             },
         });
@@ -4206,9 +4968,9 @@ const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }
     function getColor(isDraggedOver) {
         if (isDraggedOver) {
             return {
-                backgroundColor: "blue.400",
+                backgroundColor: 'blue.400',
                 _dark: {
-                    backgroundColor: "blue.400",
+                    backgroundColor: 'blue.400',
                 },
             };
         }
@@ -4229,28 +4991,223 @@ const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }
         const filesArray = [...event.target.files];
         onDrop({ files: filesArray });
     };
-    return (jsxRuntime.jsxs(react.Grid, { ...getColor(isDraggedOver), ref: ref, cursor: "pointer", onClick: handleClick, borderStyle: "dashed", borderColor: "gray.400", alignContent: "center", justifyContent: "center", borderWidth: 1, borderRadius: 4, ...gridProps, children: [children, !!children === false && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Flex, { children: placeholder }), jsxRuntime.jsx(react.Input, { type: "file", multiple: true, style: { display: "none" }, ref: fileInput, onChange: handleChange })] }))] }));
+    return (jsxRuntime.jsxs(react.Grid, { ...getColor(isDraggedOver), ref: ref, cursor: 'pointer', onClick: handleClick, borderStyle: 'dashed', borderColor: 'colorPalette.400', alignContent: 'center', justifyContent: 'center', borderWidth: 1, borderRadius: 4, minH: "120px", ...gridProps, children: [children, !!children === false && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Flex, { children: placeholder }), jsxRuntime.jsx(react.Input, { type: "file", multiple: true, style: { display: 'none' }, ref: fileInput, onChange: handleChange })] }))] }));
 };
 
+/**
+ * Format bytes to human-readable string
+ * @param bytes - The number of bytes to format
+ * @returns Formatted string (e.g., "1.5 KB", "2.3 MB")
+ */
+function formatBytes(bytes) {
+    if (bytes === 0)
+        return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}
+
+function FilePickerDialog({ open, onClose, onSelect, title, filterImageOnly = false, onFetchFiles, labels, translate, colLabel, }) {
+    const [searchTerm, setSearchTerm] = React.useState('');
+    const [selectedFileId, setSelectedFileId] = React.useState('');
+    const [failedImageIds, setFailedImageIds] = React.useState(new Set());
+    const { data: filesData, isLoading, isError, } = reactQuery.useQuery({
+        queryKey: ['file-picker-library', searchTerm],
+        queryFn: async () => {
+            if (!onFetchFiles)
+                return { data: [] };
+            const files = await onFetchFiles(searchTerm.trim() || '');
+            return { data: files };
+        },
+        enabled: open && !!onFetchFiles,
+    });
+    const files = (filesData?.data || []);
+    const filteredFiles = filterImageOnly
+        ? files.filter((file) => /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file.name))
+        : files;
+    const handleSelect = () => {
+        if (selectedFileId) {
+            onSelect(selectedFileId);
+            onClose();
+            setSelectedFileId('');
+            setSearchTerm('');
+        }
+    };
+    const handleClose = () => {
+        onClose();
+        setSelectedFileId('');
+        setSearchTerm('');
+        setFailedImageIds(new Set());
+    };
+    const handleImageError = (fileId) => {
+        setFailedImageIds((prev) => new Set(prev).add(fileId));
+    };
+    if (!onFetchFiles)
+        return null;
+    return (jsxRuntime.jsx(DialogRoot, { open: open, onOpenChange: (e) => !e.open && handleClose(), children: jsxRuntime.jsxs(DialogContent, { maxWidth: "800px", maxHeight: "90vh", children: [jsxRuntime.jsxs(DialogHeader, { children: [jsxRuntime.jsx(DialogTitle, { fontSize: "lg", fontWeight: "bold", children: title }), jsxRuntime.jsx(DialogCloseTrigger, {})] }), jsxRuntime.jsx(DialogBody, { children: jsxRuntime.jsxs(react.VStack, { align: "stretch", gap: 4, children: [jsxRuntime.jsxs(react.Box, { position: "relative", children: [jsxRuntime.jsx(react.Input, { placeholder: labels?.searchPlaceholder ??
+                                            translate(removeIndex(`${colLabel}.search_placeholder`)) ??
+                                            'Search files...', value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), bg: "bg.panel", border: "1px solid", borderColor: "border.default", colorPalette: "blue", _focus: {
+                                            borderColor: 'colorPalette.500',
+                                            _dark: {
+                                                borderColor: 'colorPalette.400',
+                                            },
+                                            boxShadow: {
+                                                base: '0 0 0 1px var(--chakra-colors-blue-500)',
+                                                _dark: '0 0 0 1px var(--chakra-colors-blue-400)',
+                                            },
+                                        }, pl: 10 }), jsxRuntime.jsx(react.Icon, { as: lu.LuSearch, position: "absolute", left: 3, top: "50%", transform: "translateY(-50%)", color: "fg.muted", boxSize: 4 })] }), isLoading && (jsxRuntime.jsxs(react.Box, { textAlign: "center", py: 8, children: [jsxRuntime.jsx(react.Spinner, { size: "lg", colorPalette: "blue" }), jsxRuntime.jsx(react.Text, { mt: 4, color: "fg.muted", children: labels?.loading ??
+                                            translate(removeIndex(`${colLabel}.loading`)) ??
+                                            'Loading files...' })] })), isError && (jsxRuntime.jsx(react.Box, { bg: { base: 'colorPalette.50', _dark: 'colorPalette.900/20' }, border: "1px solid", borderColor: {
+                                    base: 'colorPalette.200',
+                                    _dark: 'colorPalette.800',
+                                }, colorPalette: "red", borderRadius: "md", p: 4, children: jsxRuntime.jsx(react.Text, { color: {
+                                        base: 'colorPalette.600',
+                                        _dark: 'colorPalette.300',
+                                    }, children: labels?.loadingFailed ??
+                                        translate(removeIndex(`${colLabel}.error.loading_failed`)) ??
+                                        'Failed to load files' }) })), !isLoading && !isError && (jsxRuntime.jsx(react.Box, { maxHeight: "400px", overflowY: "auto", children: filteredFiles.length === 0 ? (jsxRuntime.jsx(react.Box, { textAlign: "center", py: 8, children: jsxRuntime.jsx(react.Text, { color: "fg.muted", children: labels?.noFilesFound ??
+                                            translate(removeIndex(`${colLabel}.no_files_found`)) ??
+                                            'No files found' }) })) : (jsxRuntime.jsx(react.VStack, { align: "stretch", gap: 2, children: filteredFiles.map((file) => {
+                                        const isImage = /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file.name);
+                                        const isSelected = selectedFileId === file.id;
+                                        const imageFailed = failedImageIds.has(file.id);
+                                        return (jsxRuntime.jsx(react.Box, { p: 3, border: "2px solid", borderColor: isSelected
+                                                ? {
+                                                    base: 'colorPalette.500',
+                                                    _dark: 'colorPalette.400',
+                                                }
+                                                : 'border.default', borderRadius: "md", bg: isSelected
+                                                ? {
+                                                    base: 'colorPalette.50',
+                                                    _dark: 'colorPalette.900/20',
+                                                }
+                                                : 'bg.panel', colorPalette: "blue", cursor: "pointer", onClick: () => setSelectedFileId(file.id), _hover: {
+                                                borderColor: isSelected
+                                                    ? {
+                                                        base: 'colorPalette.600',
+                                                        _dark: 'colorPalette.400',
+                                                    }
+                                                    : {
+                                                        base: 'colorPalette.300',
+                                                        _dark: 'colorPalette.400',
+                                                    },
+                                                bg: isSelected
+                                                    ? {
+                                                        base: 'colorPalette.100',
+                                                        _dark: 'colorPalette.800/30',
+                                                    }
+                                                    : 'bg.muted',
+                                            }, transition: "all 0.2s", children: jsxRuntime.jsxs(react.HStack, { gap: 3, children: [jsxRuntime.jsx(react.Box, { width: "60px", height: "60px", display: "flex", alignItems: "center", justifyContent: "center", bg: "bg.muted", borderRadius: "md", flexShrink: 0, children: isImage && file.url && !imageFailed ? (jsxRuntime.jsx(react.Image, { src: file.url, alt: file.name, boxSize: "60px", objectFit: "cover", borderRadius: "md", onError: () => handleImageError(file.id) })) : isImage && (imageFailed || !file.url) ? (jsxRuntime.jsx(react.Icon, { as: lu.LuImage, boxSize: 6, color: "fg.muted" })) : (jsxRuntime.jsx(react.Icon, { as: lu.LuFile, boxSize: 6, color: "fg.muted" })) }), jsxRuntime.jsxs(react.VStack, { align: "start", flex: 1, gap: 1, children: [jsxRuntime.jsx(react.Text, { fontSize: "sm", fontWeight: "medium", color: "fg.default", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: file.name }), jsxRuntime.jsxs(react.HStack, { gap: 2, children: [file.size && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "fg.muted", children: typeof file.size === 'number'
+                                                                                ? formatBytes(file.size)
+                                                                                : file.size }) })), file.comment && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [file.size && (jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "fg.muted", children: "\u2022" })), jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "fg.muted", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: file.comment })] }))] })] }), isSelected && (jsxRuntime.jsx(react.Box, { width: "24px", height: "24px", borderRadius: "full", bg: {
+                                                            base: 'colorPalette.500',
+                                                            _dark: 'colorPalette.400',
+                                                        }, colorPalette: "blue", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: jsxRuntime.jsx(react.Text, { color: "white", fontSize: "xs", fontWeight: "bold", children: "\u2713" }) }))] }) }, file.id));
+                                    }) })) }))] }) }), jsxRuntime.jsx(DialogFooter, { children: jsxRuntime.jsxs(react.HStack, { gap: 3, justify: "end", children: [jsxRuntime.jsx(react.Button, { variant: "outline", onClick: handleClose, borderColor: "border.default", bg: "bg.panel", _hover: { bg: 'bg.muted' }, children: labels?.cancel ??
+                                    translate(removeIndex(`${colLabel}.cancel`)) ??
+                                    'Cancel' }), jsxRuntime.jsx(react.Button, { colorPalette: "blue", onClick: handleSelect, disabled: !selectedFileId, children: labels?.select ??
+                                    translate(removeIndex(`${colLabel}.select`)) ??
+                                    'Select' })] }) })] }) }));
+}
 const FilePicker = ({ column, schema, prefix }) => {
     const { setValue, formState: { errors }, watch, } = reactHookForm.useFormContext();
-    const { translate } = useSchemaContext();
-    const { required, gridColumn, gridRow } = schema;
+    const { filePickerLabels } = useSchemaContext();
+    const formI18n = useFormI18n(column, prefix);
+    const { required, gridColumn = 'span 12', gridRow = 'span 1', filePicker, } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
-    const currentFiles = (watch(column) ?? []);
-    const colLabel = `${prefix}${column}`;
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(`${colLabel}.fieldLabel`)}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", display: "grid", gridTemplateRows: "auto 1fr auto", alignItems: "stretch", children: [jsxRuntime.jsx(FileDropzone, { onDrop: ({ files }) => {
-                    const newFiles = files.filter(({ name }) => !currentFiles.some((cur) => cur.name === name));
-                    setValue(colLabel, [...currentFiles, ...newFiles]);
-                }, placeholder: translate.t(removeIndex(`${colLabel}.fileDropzone`)) }), 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", cursor: "pointer", onClick: () => {
-                                setValue(column, currentFiles.filter(({ name }) => {
-                                    return name !== file.name;
-                                }));
-                            }, display: "flex", flexFlow: "row", alignItems: "center", padding: "2", children: [jsxRuntime.jsx(react.Box, { children: file.name }), jsxRuntime.jsx(ti.TiDeleteOutline, {})] }) }, file.name));
-                }) }), errors[`${colLabel}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
+    const currentValue = watch(column) ?? [];
+    const currentFiles = Array.isArray(currentValue)
+        ? currentValue
+        : [];
+    const colLabel = formI18n.colLabel;
+    const [dialogOpen, setDialogOpen] = React.useState(false);
+    const [failedImageIds, setFailedImageIds] = React.useState(new Set());
+    const { onFetchFiles, enableMediaLibrary = false, filterImageOnly = false, } = filePicker || {};
+    const showMediaLibrary = enableMediaLibrary && !!onFetchFiles;
+    const handleImageError = (fileIdentifier) => {
+        setFailedImageIds((prev) => new Set(prev).add(fileIdentifier));
+    };
+    const handleMediaLibrarySelect = (fileId) => {
+        const newFiles = [...currentFiles, fileId];
+        setValue(colLabel, newFiles);
+    };
+    const handleRemove = (index) => {
+        const newFiles = currentFiles.filter((_, i) => i !== index);
+        setValue(colLabel, newFiles);
+    };
+    const isFileObject = (value) => {
+        return value instanceof File;
+    };
+    const getFileIdentifier = (file, index) => {
+        if (isFileObject(file)) {
+            return `${file.name}-${file.size}-${index}`;
+        }
+        return file;
+    };
+    const getFileName = (file) => {
+        if (isFileObject(file)) {
+            return file.name;
+        }
+        return typeof file === 'string' ? file : 'Unknown file';
+    };
+    const getFileSize = (file) => {
+        if (isFileObject(file)) {
+            return file.size;
+        }
+        return undefined;
+    };
+    const isImageFile = (file) => {
+        if (isFileObject(file)) {
+            return file.type.startsWith('image/');
+        }
+        if (typeof file === 'string') {
+            return /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file);
+        }
+        return false;
+    };
+    const getImageUrl = (file) => {
+        if (isFileObject(file)) {
+            return URL.createObjectURL(file);
+        }
+        return undefined;
+    };
+    return (jsxRuntime.jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
+        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: [jsxRuntime.jsxs(react.VStack, { align: "stretch", gap: 2, children: [jsxRuntime.jsx(FileDropzone, { onDrop: ({ files }) => {
+                            const newFiles = files.filter(({ name }) => !currentFiles.some((cur) => {
+                                if (isFileObject(cur)) {
+                                    return cur.name === name;
+                                }
+                                return false;
+                            }));
+                            setValue(colLabel, [...currentFiles, ...newFiles]);
+                        }, placeholder: filePickerLabels?.fileDropzone ?? formI18n.t('fileDropzone') }), showMediaLibrary && (jsxRuntime.jsx(react.Button, { variant: "outline", onClick: () => setDialogOpen(true), borderColor: "border.default", bg: "bg.panel", _hover: { bg: 'bg.muted' }, children: filePickerLabels?.browseLibrary ??
+                            formI18n.t('browse_library') ??
+                            'Browse from Library' }))] }), showMediaLibrary && (jsxRuntime.jsx(FilePickerDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSelect: handleMediaLibrarySelect, title: filePickerLabels?.dialogTitle ??
+                    formI18n.t('dialog_title') ??
+                    'Select File', filterImageOnly: filterImageOnly, onFetchFiles: onFetchFiles, labels: filePickerLabels, translate: formI18n.t, colLabel: colLabel })), jsxRuntime.jsx(react.Flex, { flexFlow: 'column', gap: 1, children: currentFiles.map((file, index) => {
+                    const fileIdentifier = getFileIdentifier(file, index);
+                    const fileName = getFileName(file);
+                    const fileSize = getFileSize(file);
+                    const isImage = isImageFile(file);
+                    const imageUrl = getImageUrl(file);
+                    const imageFailed = failedImageIds.has(fileIdentifier);
+                    return (jsxRuntime.jsx(react.Card.Root, { variant: 'subtle', colorPalette: "blue", children: jsxRuntime.jsxs(react.Card.Body, { gap: "2", cursor: 'pointer', onClick: () => handleRemove(index), display: 'flex', flexFlow: 'row', alignItems: 'center', padding: '2', border: "2px solid", borderColor: "border.default", borderRadius: "md", _hover: {
+                                borderColor: 'colorPalette.300',
+                                bg: 'bg.muted',
+                            }, transition: "all 0.2s", children: [jsxRuntime.jsx(react.Box, { width: "60px", height: "60px", display: "flex", alignItems: "center", justifyContent: "center", bg: "bg.muted", borderRadius: "md", flexShrink: 0, marginRight: "2", children: isImage && imageUrl && !imageFailed ? (jsxRuntime.jsx(react.Image, { src: imageUrl, alt: fileName, boxSize: "60px", objectFit: "cover", borderRadius: "md", onError: () => handleImageError(fileIdentifier) })) : isImage && (imageFailed || !imageUrl) ? (jsxRuntime.jsx(react.Icon, { as: lu.LuImage, boxSize: 6, color: "fg.muted" })) : (jsxRuntime.jsx(react.Icon, { as: lu.LuFile, boxSize: 6, color: "fg.muted" })) }), jsxRuntime.jsxs(react.VStack, { align: "start", flex: 1, gap: 1, children: [jsxRuntime.jsx(react.Text, { fontSize: "sm", fontWeight: "medium", color: "fg.default", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName }), fileSize !== undefined && (jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "fg.muted", children: formatBytes(fileSize) }))] }), jsxRuntime.jsx(react.Icon, { as: ti.TiDeleteOutline, boxSize: 5, color: "fg.muted" })] }) }, fileIdentifier));
+                }) })] }));
 };
 
+const ToggleTip = React__namespace.forwardRef(function ToggleTip(props, ref) {
+    const { showArrow, children, portalled = true, content, portalRef, ...rest } = props;
+    return (jsxRuntime.jsxs(react.Popover.Root, { ...rest, positioning: { ...rest.positioning, gutter: 4 }, children: [jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: children }), jsxRuntime.jsx(react.Portal, { disabled: !portalled, container: portalRef, children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsxs(react.Popover.Content, { width: "auto", px: "2", py: "1", textStyle: "xs", rounded: "sm", ref: ref, children: [showArrow && (jsxRuntime.jsx(react.Popover.Arrow, { children: jsxRuntime.jsx(react.Popover.ArrowTip, {}) })), content] }) }) })] }));
+});
+const InfoTip = React__namespace.forwardRef(function InfoTip(props, ref) {
+    const { children, ...rest } = props;
+    return (jsxRuntime.jsx(ToggleTip, { content: children, ...rest, ref: ref, children: jsxRuntime.jsx(react.IconButton, { variant: "ghost", "aria-label": "info", size: "2xs", colorPalette: "colorPalette", children: jsxRuntime.jsx(hi.HiOutlineInformationCircle, {}) }) }));
+});
+
 const getTableData = async ({ serverUrl, in_table, searching = "", where = [], limit = 10, offset = 0, }) => {
     if (serverUrl === undefined || serverUrl.length == 0) {
         throw new Error("The serverUrl is missing");
@@ -4281,25 +5238,40 @@ const getTableData = async ({ serverUrl, in_table, searching = "", where = [], l
 
 const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
     const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
-    const { serverUrl, idMap, setIdMap, translate, schema: parentSchema, } = useSchemaContext();
-    const { required, gridColumn, gridRow, renderDisplay, foreign_key } = schema;
+    const { serverUrl, idMap, setIdMap, schema: parentSchema, idPickerLabels, } = useSchemaContext();
+    const formI18n = useFormI18n(column, prefix);
+    const { required, gridColumn = 'span 12', gridRow = 'span 1', renderDisplay, foreign_key, } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
-    const { table, column: column_ref, display_column, } = foreign_key;
-    const [searchText, setSearchText] = React.useState();
+    const { table, column: column_ref, display_column, customQueryFn, } = foreign_key;
+    const [searchText, setSearchText] = React.useState('');
     const [limit, setLimit] = React.useState(10);
     const [openSearchResult, setOpenSearchResult] = React.useState();
     const [page, setPage] = React.useState(0);
     const ref = React.useRef(null);
-    const colLabel = `${prefix}${column}`;
+    const colLabel = formI18n.colLabel;
+    const watchId = watch(colLabel);
+    const watchIds = isMultiple ? (watch(colLabel) ?? []) : [];
+    // Query for search results
     const query = reactQuery.useQuery({
         queryKey: [`idpicker`, { column, searchText, limit, page }],
         queryFn: async () => {
+            if (customQueryFn) {
+                const { data, idMap } = await customQueryFn({
+                    searching: searchText ?? '',
+                    limit: limit,
+                    offset: page * limit,
+                });
+                setIdMap((state) => {
+                    return { ...state, ...idMap };
+                });
+                return data;
+            }
             const data = await getTableData({
                 serverUrl,
-                searching: searchText ?? "",
+                searching: searchText ?? '',
                 in_table: table,
                 limit: limit,
-                offset: page * 10,
+                offset: page * limit,
             });
             const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
                 return [
@@ -4314,27 +5286,38 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
             });
             return data;
         },
-        enabled: (searchText ?? "")?.length > 0,
+        enabled: openSearchResult === true,
         staleTime: 300000,
     });
-    const { isLoading, isFetching, data, isPending, isError } = query;
-    const dataList = data?.data ?? [];
-    const count = data?.count ?? 0;
-    const isDirty = (searchText?.length ?? 0) > 0;
-    const watchId = watch(colLabel);
-    const watchIds = (watch(colLabel) ?? []);
-    reactQuery.useQuery({
+    // Query for currently selected items (to display them properly)
+    const queryDefault = reactQuery.useQuery({
         queryKey: [
-            `idpicker`,
-            { form: parentSchema.title, column, searchText, limit, page },
+            `idpicker-default`,
+            { form: parentSchema.title, column, id: isMultiple ? watchIds : watchId },
         ],
         queryFn: async () => {
+            if (customQueryFn) {
+                const { data, idMap } = await customQueryFn({
+                    searching: watchIds.join(','),
+                    limit: isMultiple ? watchIds.length : 1,
+                    offset: 0,
+                });
+                setIdMap((state) => {
+                    return { ...state, ...idMap };
+                });
+                return data;
+            }
+            if (!watchId && (!watchIds || watchIds.length === 0)) {
+                return { data: [] };
+            }
+            const searchValue = isMultiple ? watchIds.join(',') : watchId;
             const data = await getTableData({
                 serverUrl,
-                searching: watchId,
+                searching: searchValue,
                 in_table: table,
-                limit: limit,
-                offset: page * 10,
+                where: [{ id: column_ref, value: isMultiple ? watchIds : watchId }],
+                limit: isMultiple ? watchIds.length : 1,
+                offset: 0,
             });
             const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
                 return [
@@ -4349,85 +5332,199 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
             });
             return data;
         },
+        enabled: isMultiple
+            ? Array.isArray(watchIds) && watchIds.length > 0
+            : !!watchId,
     });
+    // Effect to load selected values when component mounts
+    React.useEffect(() => {
+        if (isMultiple ? watchIds.length > 0 : !!watchId) {
+            queryDefault.refetch();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Effect to trigger initial data fetch when popover opens
+    React.useEffect(() => {
+        if (openSearchResult) {
+            // Reset search text when opening the popover
+            setSearchText('');
+            // Reset page to first page
+            setPage(0);
+            // Fetch initial data
+            query.refetch();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [openSearchResult]);
     const onSearchChange = async (event) => {
         setSearchText(event.target.value);
         setPage(0);
-        setLimit(10);
+        query.refetch();
+    };
+    const handleLimitChange = (event) => {
+        const newLimit = Number(event.target.value);
+        setLimit(newLimit);
+        // Reset to first page when changing limit
+        setPage(0);
+        // Trigger a new search with the updated limit
+        query.refetch();
     };
+    const { isLoading, isFetching, data, isPending, isError } = query;
+    const dataList = data?.data ?? [];
+    const count = data?.count ?? 0;
     const getPickedValue = () => {
         if (Object.keys(idMap).length <= 0) {
-            return "";
+            return '';
         }
         const record = idMap[watchId];
         if (record === undefined) {
-            return "";
+            return '';
+        }
+        if (!!renderDisplay === true) {
+            return renderDisplay(record);
         }
         return record[display_column];
     };
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(removeIndex(`${column}.fieldLabel`)))}`, required: isRequired, alignItems: "stretch", gridColumn,
-        gridRow, children: [isMultiple && (jsxRuntime.jsxs(react.Flex, { flexFlow: "wrap", gap: 1, children: [watchIds.map((id) => {
+    return (jsxRuntime.jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
+        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: [isMultiple && (jsxRuntime.jsxs(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(react.Text, { children: idPickerLabels?.undefined ?? formI18n.t('undefined') }, id));
                         }
                         return (jsxRuntime.jsx(Tag, { closable: true, onClick: () => {
-                                setValue(column, watchIds.filter((id) => id != item[column_ref]));
+                                setValue(colLabel, watchIds.filter((itemId) => itemId !== item[column_ref]));
                             }, children: !!renderDisplay === true
                                 ? renderDisplay(item)
                                 : item[display_column] }, id));
-                    }), jsxRuntime.jsx(Tag, { cursor: "pointer", onClick: () => {
+                    }), jsxRuntime.jsx(Tag, { cursor: 'pointer', onClick: () => {
                             setOpenSearchResult(true);
-                        }, children: translate.t(removeIndex(`${colLabel}.addMore`)) })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: () => {
+                        }, children: idPickerLabels?.addMore ?? formI18n.t('add_more') })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: 'outline', onClick: () => {
                     setOpenSearchResult(true);
-                }, children: getPickedValue() })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start", strategy: "fixed" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: translate.t(removeIndex(`${colLabel}.typeToSearch`)), onChange: (event) => {
-                                        onSearchChange(event);
-                                        setOpenSearchResult(true);
-                                    }, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), (searchText?.length ?? 0) > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isFetching && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isFetching" }), isLoading && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isLoading" }), isPending && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isPending" }), (isFetching || isLoading || isPending) && jsxRuntime.jsx(react.Spinner, {}), isError && (jsxRuntime.jsx(react.Icon, { color: "red.400", children: jsxRuntime.jsx(bi.BiError, {}) })), jsxRuntime.jsx(react.Text, { justifySelf: "center", children: `${translate.t(removeIndex(`${colLabel}.total`))} ${count}, ${translate.t(removeIndex(`${colLabel}.showing`))} ${limit}` }), jsxRuntime.jsxs(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsxRuntime.jsx(react.Flex, { flexFlow: "column wrap", children: 
-                                                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                                    dataList.map((item) => {
-                                                        const selected = isMultiple
-                                                            ? watchIds.some((id) => item[column_ref] === id)
-                                                            : watchId === item[column_ref];
-                                                        return (jsxRuntime.jsx(react.Box, { cursor: "pointer", onClick: () => {
-                                                                if (!isMultiple) {
-                                                                    setOpenSearchResult(false);
-                                                                    setValue(colLabel, item[column_ref]);
-                                                                    return;
-                                                                }
-                                                                const newSet = new Set([
-                                                                    ...(watchIds ?? []),
-                                                                    item[column_ref],
-                                                                ]);
-                                                                setValue(colLabel, [...newSet]);
-                                                            }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
-                                                                ? renderDisplay(item)
-                                                                : item[display_column] }, item[column_ref]));
-                                                    }) }), isDirty && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: dataList.length <= 0 && (jsxRuntime.jsx(react.Text, { children: translate.t(removeIndex(`${colLabel}.emptySearchResult`)) })) }))] }), jsxRuntime.jsx(PaginationRoot, { justifySelf: "center", count: count, pageSize: 10, defaultPage: 1, page: page + 1, onPageChange: (e) => setPage(e.page - 1), children: jsxRuntime.jsxs(react.HStack, { gap: "4", children: [jsxRuntime.jsx(PaginationPrevTrigger, {}), count > 0 && jsxRuntime.jsx(PaginationPageText, {}), jsxRuntime.jsx(PaginationNextTrigger, {})] }) })] }))] }) })] }), errors[`${colLabel}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
+                }, justifyContent: 'start', children: queryDefault.isLoading ? jsxRuntime.jsx(react.Spinner, { size: "sm" }) : getPickedValue() })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: 'bottom-start', strategy: 'fixed' }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { portalled: false, children: jsxRuntime.jsxs(PopoverBody, { display: 'grid', gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: idPickerLabels?.typeToSearch ?? formI18n.t('type_to_search'), onChange: onSearchChange, autoComplete: "off", ref: ref, value: searchText }), jsxRuntime.jsx(PopoverTitle, {}), openSearchResult && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(isFetching || isLoading || isPending) && jsxRuntime.jsx(react.Spinner, {}), isError && (jsxRuntime.jsx(react.Icon, { color: 'red.400', children: jsxRuntime.jsx(bi.BiError, {}) })), jsxRuntime.jsxs(react.Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxRuntime.jsxs(react.Flex, { alignItems: "center", gap: "2", children: [jsxRuntime.jsx(InfoTip, { children: `${idPickerLabels?.total ?? formI18n.t('total')} ${count}, ${idPickerLabels?.showing ?? formI18n.t('showing')} ${limit} ${idPickerLabels?.perPage ?? formI18n.t('per_page', { defaultValue: 'per page' })}` }), jsxRuntime.jsxs(react.Text, { fontSize: "sm", fontWeight: "bold", children: [count, jsxRuntime.jsxs(react.Text, { as: "span", fontSize: "xs", ml: "1", color: "gray.500", children: ["/", ' ', count > 0
+                                                                            ? `${page * limit + 1}-${Math.min((page + 1) * limit, count)}`
+                                                                            : '0'] })] })] }), jsxRuntime.jsx(react.Box, { children: jsxRuntime.jsxs("select", { value: limit, onChange: handleLimitChange, style: {
+                                                            padding: '4px 8px',
+                                                            borderRadius: '4px',
+                                                            border: '1px solid #ccc',
+                                                            fontSize: '14px',
+                                                        }, children: [jsxRuntime.jsx("option", { value: "5", children: "5" }), jsxRuntime.jsx("option", { value: "10", children: "10" }), jsxRuntime.jsx("option", { value: "20", children: "20" }), jsxRuntime.jsx("option", { value: "30", children: "30" })] }) })] }), jsxRuntime.jsx(react.Grid, { overflowY: 'auto', children: dataList.length > 0 ? (jsxRuntime.jsx(react.Flex, { flexFlow: 'column wrap', gap: 1, children: dataList.map((item) => {
+                                                    const selected = isMultiple
+                                                        ? watchIds.some((id) => item[column_ref] === id)
+                                                        : watchId === item[column_ref];
+                                                    return (jsxRuntime.jsx(react.Box, { cursor: 'pointer', onClick: () => {
+                                                            if (!isMultiple) {
+                                                                setOpenSearchResult(false);
+                                                                setValue(colLabel, item[column_ref]);
+                                                                return;
+                                                            }
+                                                            // For multiple selection, don't add if already selected
+                                                            if (selected)
+                                                                return;
+                                                            const newSet = new Set([
+                                                                ...(watchIds ?? []),
+                                                                item[column_ref],
+                                                            ]);
+                                                            setValue(colLabel, [...newSet]);
+                                                        }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected
+                                                            ? {
+                                                                color: 'colorPalette.400/50',
+                                                                fontWeight: 'bold',
+                                                            }
+                                                            : {}), children: !!renderDisplay === true
+                                                            ? renderDisplay(item)
+                                                            : item[display_column] }, item[column_ref]));
+                                                }) })) : (jsxRuntime.jsx(react.Text, { children: searchText
+                                                    ? idPickerLabels?.emptySearchResult ??
+                                                        formI18n.t('empty_search_result')
+                                                    : idPickerLabels?.initialResults ??
+                                                        formI18n.t('initial_results') })) }), jsxRuntime.jsx(PaginationRoot, { justifySelf: 'center', count: count, pageSize: limit, defaultPage: 1, page: page + 1, onPageChange: (e) => setPage(e.page - 1), children: jsxRuntime.jsxs(react.HStack, { gap: "4", children: [jsxRuntime.jsx(PaginationPrevTrigger, {}), count > 0 && jsxRuntime.jsx(PaginationPageText, {}), jsxRuntime.jsx(PaginationNextTrigger, {})] }) })] }))] }) })] })] }));
 };
 
 const NumberInputRoot = React__namespace.forwardRef(function NumberInput(props, ref) {
     const { children, ...rest } = props;
-    return (jsxRuntime.jsxs(react.NumberInput.Root, { ref: ref, variant: "outline", ...rest, children: [children, jsxRuntime.jsxs(react.NumberInput.Control, { children: [jsxRuntime.jsx(react.NumberInput.IncrementTrigger, {}), jsxRuntime.jsx(react.NumberInput.DecrementTrigger, {})] })] }));
+    return (jsxRuntime.jsx(react.NumberInput.Root, { ref: ref, variant: "outline", ...rest, children: children }));
 });
 const NumberInputField$1 = react.NumberInput.Input;
 react.NumberInput.Scrubber;
 react.NumberInput.Label;
 
+/**
+ * Gets the error message for a specific field from react-hook-form errors
+ * Prioritizes required errors (#.required) over field-specific validation errors
+ */
+const getFieldError = (errors, fieldName) => {
+    // Check for form-level required errors first (highest priority)
+    const requiredError = errors['#.required'];
+    if (requiredError) {
+        const requiredErrorMessage = extractErrorMessage(requiredError);
+        if (requiredErrorMessage) {
+            return requiredErrorMessage;
+        }
+    }
+    // If no required errors, return field-specific error
+    const fieldError = errors[fieldName];
+    if (fieldError) {
+        const fieldErrorMessage = extractErrorMessage(fieldError);
+        if (fieldErrorMessage) {
+            return fieldErrorMessage;
+        }
+    }
+    return undefined;
+};
+/**
+ * Helper function to extract error message from various error formats
+ * Only returns message if explicitly provided, no fallback text
+ */
+const extractErrorMessage = (error) => {
+    if (!error) {
+        return undefined;
+    }
+    // If it's a simple string error
+    if (typeof error === 'string') {
+        return error;
+    }
+    // If it's an error object with a message property
+    if (error && typeof error === 'object' && 'message' in error) {
+        return error.message;
+    }
+    // If it's an array of errors, get the first one
+    if (Array.isArray(error) && error.length > 0) {
+        const firstError = error[0];
+        if (typeof firstError === 'string') {
+            return firstError;
+        }
+        if (firstError &&
+            typeof firstError === 'object' &&
+            'message' in firstError) {
+            return firstError.message;
+        }
+    }
+    // No fallback - return undefined if no message provided
+    return undefined;
+};
+
 const NumberInputField = ({ schema, column, prefix, }) => {
     const { setValue, formState: { errors }, watch, } = reactHookForm.useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn, gridRow } = schema;
+    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}`);
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.fieldLabel`))}`, required: isRequired, gridColumn, gridRow, children: [jsxRuntime.jsx(NumberInputRoot, { children: jsxRuntime.jsx(NumberInputField$1, { required: isRequired, value: value, onChange: (event) => {
-                        setValue(`${colLabel}`, Number(event.target.value));
-                    } }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
+    const fieldError = getFieldError(errors, colLabel);
+    return (jsxRuntime.jsx(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn, gridRow, errorText: fieldError
+            ? fieldError.includes('required')
+                ? translate.t(removeIndex(`${colLabel}.field_required`))
+                : fieldError
+            : undefined, invalid: !!fieldError, children: jsxRuntime.jsx(NumberInputRoot, { value: value, onValueChange: (details) => {
+                // Store as string or number based on configuration, default to number
+                const value = numberStorageType === 'string'
+                    ? details.value
+                    : details.valueAsNumber;
+                setValue(`${colLabel}`, value);
+            }, min: schema.minimum, max: schema.maximum, step: schema.multipleOf || 0.01, allowOverflow: false, clampValueOnBlur: false, inputMode: "decimal", formatOptions: schema.formatOptions, children: jsxRuntime.jsx(NumberInputField$1, { required: isRequired }) }) }));
 };
 
 const ObjectInput = ({ schema, column, prefix }) => {
-    const { properties, gridRow, gridColumn = "1/span 12", required } = schema;
+    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);
@@ -4435,26 +5532,32 @@ const ObjectInput = ({ schema, column, prefix }) => {
     if (properties === undefined) {
         throw new Error(`properties is undefined when using ObjectInput`);
     }
-    return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [jsxRuntime.jsxs(react.Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.fieldLabel`))}`, isRequired && jsxRuntime.jsx("span", { children: "*" })] }), jsxRuntime.jsx(react.Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat("auto-fit", auto)`, children: Object.keys(properties ?? {}).map((key) => {
+    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: {
+                    base: 'colorPalette.200',
+                    _dark: 'colorPalette.800',
+                }, gap: "4", padding: '4', gridTemplateColumns: 'repeat(12, 1fr)', autoFlow: 'row', children: Object.keys(properties ?? {}).map((key) => {
                     return (
                     // @ts-expect-error find suitable types
                     jsxRuntime.jsx(ColumnRenderer, { column: `${key}`,
                         prefix: `${prefix}${column}.`,
-                        properties }, `form-${colLabel}-${key}`));
-                }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
+                        properties,
+                        parentRequired: required }, `form-${colLabel}-${key}`));
+                }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: 'red.400', children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
 };
 
 const RecordInput$1 = ({ column, schema, prefix }) => {
     const { formState: { errors }, setValue, getValues, } = reactHookForm.useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn, gridRow } = schema;
+    const { required, gridColumn = 'span 12', gridRow = 'span 1' } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const entries = Object.entries(getValues(column) ?? {});
     const [showNewEntries, setShowNewEntries] = React.useState(false);
     const [newKey, setNewKey] = React.useState();
     const [newValue, setNewValue] = React.useState();
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(`${column}.fieldLabel`)}`, 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) => {
+    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]) => {
+                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;
                                 });
@@ -4464,17 +5567,17 @@ const RecordInput$1 = ({ column, schema, prefix }) => {
                                     ...getValues(column),
                                     [key]: e.target.value,
                                 });
-                            }, autoComplete: "off" }), jsxRuntime.jsx(react.IconButton, { variant: "ghost", onClick: () => {
+                            }, 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) => {
+            }), 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: () => {
+                                        }, autoComplete: "off" })] }) }), jsxRuntime.jsxs(react.Card.Footer, { justifyContent: "flex-end", children: [jsxRuntime.jsx(react.IconButton, { variant: 'subtle', onClick: () => {
                                         setShowNewEntries(false);
                                         setNewKey(undefined);
                                         setNewValue(undefined);
@@ -4493,16 +5596,17 @@ const RecordInput$1 = ({ column, schema, prefix }) => {
                     setShowNewEntries(true);
                     setNewKey(undefined);
                     setNewValue(undefined);
-                }, children: translate.t(`${column}.addNew`) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.fieldRequired`) }))] }));
+                }, children: translate.t(`${column}.addNew`) })] }));
 };
 
 const StringInputField = ({ column, schema, prefix, }) => {
     const { register, formState: { errors }, } = reactHookForm.useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn, gridRow } = schema;
+    const { required, gridColumn = 'span 12', gridRow = 'span 1' } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.fieldLabel`))}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsxRuntime.jsx(react.Input, { ...register(`${colLabel}`, { required: isRequired }), autoComplete: "off" }), errors[colLabel] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }) }));
+    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 RadioCardItem = React__namespace.forwardRef(function RadioCardItem(props, ref) {
@@ -4600,145 +5704,796 @@ const TagPicker = ({ column, schema, prefix }) => {
             }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
 };
 
+const Textarea = React.forwardRef(({ value, defaultValue, placeholder, onChange, onFocus, onBlur, disabled = false, readOnly = false, className, rows = 4, maxLength, autoFocus = false, invalid = false, required = false, label, helperText, errorText, ...props }, ref) => {
+    const contentEditableRef = React.useRef(null);
+    const isControlled = value !== undefined;
+    // Handle input changes
+    const handleInput = (e) => {
+        const text = e.currentTarget.textContent || "";
+        // Check maxLength if specified
+        if (maxLength && text.length > maxLength) {
+            e.currentTarget.textContent = text.slice(0, maxLength);
+            // Move cursor to end
+            const selection = window.getSelection();
+            if (selection) {
+                selection.selectAllChildren(e.currentTarget);
+                selection.collapseToEnd();
+            }
+            return;
+        }
+        onChange?.(text);
+    };
+    // Handle paste events to strip formatting and respect maxLength
+    const handlePaste = (e) => {
+        e.preventDefault();
+        const text = e.clipboardData.getData('text/plain');
+        const currentText = e.currentTarget.textContent || "";
+        let pasteText = text;
+        if (maxLength) {
+            const remainingLength = maxLength - currentText.length;
+            pasteText = text.slice(0, remainingLength);
+        }
+        document.execCommand('insertText', false, pasteText);
+    };
+    // Set initial content
+    React.useEffect(() => {
+        if (contentEditableRef.current && !isControlled) {
+            const initialValue = defaultValue || "";
+            if (contentEditableRef.current.textContent !== initialValue) {
+                contentEditableRef.current.textContent = initialValue;
+            }
+        }
+    }, [defaultValue, isControlled]);
+    // Update content when value changes (controlled mode)
+    React.useEffect(() => {
+        if (contentEditableRef.current && isControlled && value !== undefined) {
+            if (contentEditableRef.current.textContent !== value) {
+                contentEditableRef.current.textContent = value;
+            }
+        }
+    }, [value, isControlled]);
+    // Auto focus
+    React.useEffect(() => {
+        if (autoFocus && contentEditableRef.current) {
+            contentEditableRef.current.focus();
+        }
+    }, [autoFocus]);
+    // Forward ref
+    React.useEffect(() => {
+        if (typeof ref === 'function') {
+            ref(contentEditableRef.current);
+        }
+        else if (ref) {
+            ref.current = contentEditableRef.current;
+        }
+    }, [ref]);
+    const textareaElement = (jsxRuntime.jsx(react.Box, { ref: contentEditableRef, contentEditable: !disabled && !readOnly, onInput: handleInput, onPaste: handlePaste, onFocus: onFocus, onBlur: onBlur, className: className, minHeight: `${rows * 1.5}em`, padding: "2", border: "1px solid", borderColor: invalid ? "red.500" : "gray.200", borderRadius: "md", outline: "none", _focus: {
+            borderColor: invalid ? "red.500" : "blue.500",
+            boxShadow: `0 0 0 1px ${invalid ? "red.500" : "blue.500"}`,
+        }, _disabled: {
+            opacity: 0.6,
+            cursor: "not-allowed",
+            bg: "gray.50",
+        }, _empty: {
+            _before: {
+                content: placeholder ? `"${placeholder}"` : undefined,
+                color: "gray.400",
+                pointerEvents: "none",
+            }
+        }, whiteSpace: "pre-wrap", overflowWrap: "break-word", overflow: "auto", maxHeight: `${rows * 4}em`, suppressContentEditableWarning: true, ...props }));
+    // If we have additional field props, wrap in Field component
+    if (label || helperText || errorText || required) {
+        return (jsxRuntime.jsxs(react.Field.Root, { invalid: invalid, required: required, children: [label && (jsxRuntime.jsxs(react.Field.Label, { children: [label, required && jsxRuntime.jsx(react.Field.RequiredIndicator, {})] })), textareaElement, helperText && jsxRuntime.jsx(react.Field.HelperText, { children: helperText }), errorText && jsxRuntime.jsx(react.Field.ErrorText, { children: errorText })] }));
+    }
+    return textareaElement;
+});
+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 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
+                ? fieldError.includes('required')
+                    ? translate.t(removeIndex(`${colLabel}.field_required`))
+                    : fieldError
+                : undefined, invalid: !!fieldError, children: jsxRuntime.jsx(Textarea, { value: watchValue, onChange: (value) => setValue(colLabel, value) }) }) }));
+};
+
+function TimePicker$1({ hour, setHour, minute, setMinute, meridiem, setMeridiem, meridiemLabel = {
+    am: "am",
+    pm: "pm",
+}, onChange = (_newValue) => { }, timezone = "Asia/Hong_Kong", }) {
+    const handleClear = () => {
+        setHour(null);
+        setMinute(null);
+        setMeridiem(null);
+        setInputValue("");
+        setShowInput(false);
+        onChange({ hour: null, minute: null, meridiem: null });
+    };
+    const getTimeString = (hour, minute, meridiem) => {
+        if (hour === null || minute === null || meridiem === null) {
+            return "";
+        }
+        // if the hour is 24, set the hour to 0
+        if (hour === 24) {
+            return dayjs().tz(timezone).hour(0).minute(minute).format("HH:mmZ");
+        }
+        // use dayjs to format the time at current timezone
+        // if meridiem is pm, add 12 hours
+        let newHour = hour;
+        if (meridiem === "pm" && hour !== 12) {
+            newHour = hour + 12;
+        }
+        // if the hour is 12, set the meridiem to am, and set the hour to 0
+        else if (meridiem === "am" && hour === 12) {
+            newHour = 0;
+        }
+        return dayjs().tz(timezone).hour(newHour).minute(minute).format("HH:mmZ");
+    };
+    const stringTime = getTimeString(hour, minute, meridiem);
+    const [inputValue, setInputValue] = React.useState("");
+    const [showInput, setShowInput] = React.useState(false);
+    const handleBlur = (text) => {
+        // ignore all non-numeric characters
+        if (!text) {
+            return;
+        }
+        const value = text.replace(/[^0-9apm]/g, "");
+        if (value === "") {
+            handleClear();
+            return;
+        }
+        // if the value is a valid time, parse it and set the hour, minute, and meridiem
+        // if the value is not a valid time, set the stringTime to the value
+        // first two characters are the hour
+        // next two characters are the minute
+        // final two characters are the meridiem
+        const hour = parseInt(value.slice(0, 2));
+        const minute = parseInt(value.slice(2, 4));
+        const meridiem = value.slice(4, 6);
+        // validate the hour and minute
+        if (isNaN(hour) || isNaN(minute)) {
+            setInputValue("");
+            return;
+        }
+        // if the hour is larger than 24, set the hour to 24
+        if (hour > 24) {
+            setInputValue("");
+            return;
+        }
+        let newHour = hour;
+        let newMinute = minute;
+        let newMeridiem = meridiem;
+        // if the hour is 24, set the meridiem to am, and set the hour to 0
+        if (hour === 24) {
+            newMeridiem = "am";
+            newHour = 0;
+        }
+        // if the hour is greater than 12, set the meridiem to pm, and subtract 12 from the hour
+        else if (hour > 12) {
+            newMeridiem = "pm";
+            newHour = hour - 12;
+        }
+        // if the hour is 12, set the meridiem to pm, and set the hour to 12
+        else if (hour === 12) {
+            newMeridiem = "pm";
+            newHour = 12;
+        }
+        // if the hour is 0, set the meridiem to am, and set the hour to 12
+        else if (hour === 0) {
+            newMeridiem = "am";
+            newHour = 12;
+        }
+        else {
+            newMeridiem = meridiem ?? "am";
+            newHour = hour;
+        }
+        if (minute > 59) {
+            newMinute = 0;
+        }
+        else {
+            newMinute = minute;
+        }
+        onChange({
+            hour: newHour,
+            minute: newMinute,
+            meridiem: newMeridiem,
+        });
+        setShowInput(false);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            handleBlur(e.currentTarget.value);
+        }
+    };
+    const inputRef = React.useRef(null);
+    return (jsxRuntime.jsxs(react.Grid, { justifyContent: "center", alignItems: "center", templateColumns: "200px auto", gap: "2", width: "auto", minWidth: "250px", children: [jsxRuntime.jsx(react.Input, { onKeyDown: handleKeyDown, onChange: (e) => {
+                    setInputValue(e.currentTarget.value);
+                }, onBlur: (e) => {
+                    handleBlur(e.currentTarget.value);
+                }, onFocus: (e) => {
+                    e.currentTarget.select();
+                }, value: inputValue, display: showInput ? undefined : "none", ref: inputRef }), jsxRuntime.jsxs(react.Button, { onClick: () => {
+                    setShowInput(true);
+                    setInputValue(dayjs(`1970-01-01T${getTimeString(hour, minute, meridiem)}`, "hh:mmZ").format("HH:mm"));
+                    inputRef.current?.focus();
+                }, display: showInput ? "none" : "flex", alignItems: "center", justifyContent: "start", variant: "outline", gap: 2, children: [jsxRuntime.jsx(react.Icon, { size: "sm", children: jsxRuntime.jsx(bs.BsClock, {}) }), jsxRuntime.jsx(react.Text, { fontSize: "sm", children: stringTime
+                            ? dayjs(`1970-01-01T${stringTime}`, "hh:mmZ").format("hh:mm a")
+                            : "" })] }), jsxRuntime.jsx(react.Button, { onClick: handleClear, size: "sm", variant: "ghost", children: jsxRuntime.jsx(md.MdCancel, {}) })] }));
+}
+
+dayjs.extend(timezone);
+const TimePicker = ({ column, schema, prefix }) => {
+    const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
+    const { translate, timezone } = 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 [open, setOpen] = React.useState(false);
+    const value = watch(colLabel);
+    const displayedTime = dayjs(`1970-01-01T${value}`).tz(timezone).isValid()
+        ? dayjs(`1970-01-01T${value}`).tz(timezone).format(displayTimeFormat)
+        : '';
+    // Parse the initial time parts from the  time string (HH:mm:ssZ)
+    const parseTime = (time) => {
+        if (!time)
+            return { hour: 12, minute: 0, meridiem: 'am' };
+        const parsed = dayjs(`1970-01-01T${time}`).tz(timezone);
+        if (!parsed.isValid()) {
+            return { hour: 12, minute: 0, meridiem: 'am' };
+        }
+        let hour = parsed.hour();
+        const minute = parsed.minute();
+        const meridiem = hour >= 12 ? 'pm' : 'am';
+        if (hour === 0)
+            hour = 12;
+        else if (hour > 12)
+            hour -= 12;
+        return { hour, minute, meridiem };
+    };
+    const initialTime = parseTime(value);
+    const [hour, setHour] = React.useState(initialTime.hour);
+    const [minute, setMinute] = React.useState(initialTime.minute);
+    const [meridiem, setMeridiem] = React.useState(initialTime.meridiem);
+    React.useEffect(() => {
+        const { hour, minute, meridiem } = parseTime(value);
+        setHour(hour);
+        setMinute(minute);
+        setMeridiem(meridiem);
+    }, [value]);
+    const getTimeString = (hour, minute, meridiem) => {
+        if (hour === null || minute === null || meridiem === null)
+            return null;
+        let newHour = hour;
+        if (meridiem === 'pm' && hour !== 12) {
+            newHour = hour + 12;
+        }
+        return dayjs()
+            .tz(timezone)
+            .hour(newHour)
+            .minute(minute)
+            .second(0)
+            .format(timeFormat);
+    };
+    // Handle changes to time parts
+    const handleTimeChange = ({ hour: newHour, minute: newMinute, meridiem: newMeridiem, }) => {
+        setHour(newHour);
+        setMinute(newMinute);
+        setMeridiem(newMeridiem);
+        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: () => {
+                            setOpen(true);
+                        }, justifyContent: 'start', children: [jsxRuntime.jsx(io.IoMdClock, {}), !!value ? `${displayedTime}` : ''] }) }), jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { children: jsxRuntime.jsx(react.Popover.Body, { 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' }),
+                                    pm: translate.t(`common.pm`, { defaultValue: 'PM' }),
+                                } }) }) }) })] }) }));
+};
+
+function IsoTimePicker({ hour, setHour, minute, setMinute, second, setSecond, onChange = (_newValue) => { }, }) {
+    // Refs for focus management
+    const hourInputRef = React.useRef(null);
+    const minuteInputRef = React.useRef(null);
+    const secondInputRef = React.useRef(null);
+    // Centralized handler for key events, value changes, and focus management
+    const handleKeyDown = (e, field) => {
+        const input = e.target;
+        const value = input.value;
+        // Handle navigation between fields
+        if (e.key === "Tab") {
+            return;
+        }
+        if (e.key === ":" && field === "hour") {
+            e.preventDefault();
+            minuteInputRef.current?.focus();
+            return;
+        }
+        if (e.key === ":" && field === "minute") {
+            e.preventDefault();
+            secondInputRef.current?.focus();
+            return;
+        }
+        if (e.key === "Backspace" && value === "") {
+            e.preventDefault();
+            if (field === "minute") {
+                hourInputRef.current?.focus();
+            }
+            else if (field === "second") {
+                minuteInputRef.current?.focus();
+            }
+            return;
+        }
+        // Handle number inputs
+        if (field === "hour") {
+            if (e.key.match(/^[0-9]$/)) {
+                const newValue = value + e.key;
+                const numValue = parseInt(newValue, 10);
+                if (numValue > 23) {
+                    const digitValue = parseInt(e.key, 10);
+                    setHour(digitValue);
+                    onChange({ hour: digitValue, minute, second });
+                    return;
+                }
+                if (numValue >= 0 && numValue <= 23) {
+                    setHour(numValue);
+                    onChange({ hour: numValue, minute, second });
+                    e.preventDefault();
+                    minuteInputRef.current?.focus();
+                }
+            }
+        }
+        else if (field === "minute") {
+            if (e.key.match(/^[0-9]$/)) {
+                const newValue = value + e.key;
+                const numValue = parseInt(newValue, 10);
+                if (numValue > 59) {
+                    const digitValue = parseInt(e.key, 10);
+                    setMinute(digitValue);
+                    onChange({ hour, minute: digitValue, second });
+                    return;
+                }
+                if (numValue >= 0 && numValue <= 59) {
+                    setMinute(numValue);
+                    onChange({ hour, minute: numValue, second });
+                    e.preventDefault();
+                    secondInputRef.current?.focus();
+                }
+            }
+        }
+        else if (field === "second") {
+            if (e.key.match(/^[0-9]$/)) {
+                const newValue = value + e.key;
+                const numValue = parseInt(newValue, 10);
+                if (numValue > 59) {
+                    const digitValue = parseInt(e.key, 10);
+                    setSecond(digitValue);
+                    onChange({ hour, minute, second: digitValue });
+                    return;
+                }
+                if (numValue >= 0 && numValue <= 59) {
+                    setSecond(numValue);
+                    onChange({ hour, minute, second: numValue });
+                }
+            }
+        }
+    };
+    const handleClear = () => {
+        setHour(null);
+        setMinute(null);
+        setSecond(null);
+        onChange({ hour: null, minute: null, second: null });
+        hourInputRef.current?.focus();
+    };
+    return (jsxRuntime.jsx(react.Flex, { direction: "column", gap: 3, children: jsxRuntime.jsxs(react.Grid, { justifyContent: "center", alignItems: "center", templateColumns: "60px 10px 60px 10px 60px auto", gap: "2", width: "auto", minWidth: "300px", children: [jsxRuntime.jsx(react.Input, { ref: hourInputRef, type: "text", value: hour === null ? "" : hour.toString().padStart(2, "0"), onKeyDown: (e) => handleKeyDown(e, "hour"), placeholder: "HH", maxLength: 2, textAlign: "center" }), jsxRuntime.jsx(react.Text, { children: ":" }), jsxRuntime.jsx(react.Input, { ref: minuteInputRef, type: "text", value: minute === null ? "" : minute.toString().padStart(2, "0"), onKeyDown: (e) => handleKeyDown(e, "minute"), placeholder: "MM", maxLength: 2, textAlign: "center" }), jsxRuntime.jsx(react.Text, { children: ":" }), jsxRuntime.jsx(react.Input, { ref: secondInputRef, type: "text", value: second === null ? "" : second.toString().padStart(2, "0"), onKeyDown: (e) => handleKeyDown(e, "second"), placeholder: "SS", maxLength: 2, textAlign: "center" }), jsxRuntime.jsx(react.Button, { onClick: handleClear, size: "sm", variant: "ghost", children: jsxRuntime.jsx(md.MdCancel, {}) })] }) }));
+}
+
+function DateTimePicker$1({ value, onChange, format = "date-time", showSeconds = false, 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", }) {
+    const [selectedDate, setSelectedDate] = React.useState(value || "");
+    // 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);
+    // Time state for 24-hour format
+    const [hour24, setHour24] = React.useState(value ? dayjs(value).hour() : null);
+    const [second, setSecond] = React.useState(value ? dayjs(value).second() : null);
+    const handleDateChange = (date) => {
+        setSelectedDate(date);
+        updateDateTime(dayjs(date).tz(timezone).toISOString());
+    };
+    const handleTimeChange = (timeData) => {
+        if (format === "iso-date-time") {
+            setHour24(timeData.hour);
+            setMinute(timeData.minute);
+            if (showSeconds)
+                setSecond(timeData.second);
+        }
+        else {
+            setHour12(timeData.hour);
+            setMinute(timeData.minute);
+            setMeridiem(timeData.meridiem);
+        }
+        updateDateTime(dayjs(selectedDate).tz(timezone).toISOString(), timeData);
+    };
+    const updateDateTime = (date, timeData) => {
+        if (!date) {
+            onChange?.(undefined);
+            return;
+        }
+        // use dayjs to convert the date to the timezone
+        const newDate = dayjs(date).tz(timezone).toDate();
+        if (format === "iso-date-time") {
+            const h = timeData?.hour ?? hour24;
+            const m = timeData?.minute ?? minute;
+            const s = showSeconds ? timeData?.second ?? second : 0;
+            if (h !== null)
+                newDate.setHours(h);
+            if (m !== null)
+                newDate.setMinutes(m);
+            if (s !== null)
+                newDate.setSeconds(s);
+        }
+        else {
+            const h = timeData?.hour ?? hour12;
+            const m = timeData?.minute ?? minute;
+            const mer = timeData?.meridiem ?? meridiem;
+            if (h !== null && mer !== null) {
+                let hour24 = h;
+                if (mer === "am" && h === 12)
+                    hour24 = 0;
+                else if (mer === "pm" && h < 12)
+                    hour24 = h + 12;
+                newDate.setHours(hour24);
+            }
+            if (m !== null)
+                newDate.setMinutes(m);
+            newDate.setSeconds(0);
+        }
+        onChange?.(dayjs(newDate).tz(timezone).toISOString());
+    };
+    const handleClear = () => {
+        setSelectedDate("");
+        setHour12(null);
+        setHour24(null);
+        setMinute(null);
+        setSecond(null);
+        setMeridiem(null);
+        onChange?.(undefined);
+    };
+    const isISO = format === "iso-date-time";
+    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 }), 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: second, setSecond: setSecond, onChange: handleTimeChange })) : (jsxRuntime.jsx(TimePicker$1, { hour: hour12, setHour: setHour12, minute: minute, setMinute: setMinute, meridiem: meridiem, setMeridiem: setMeridiem, onChange: handleTimeChange })), 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 })] }))] }));
+}
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+const DateTimePicker = ({ column, schema, prefix, }) => {
+    const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
+    const { timezone, dateTimePickerLabels } = useSchemaContext();
+    const formI18n = useFormI18n(column, prefix);
+    const { required, gridColumn = 'span 12', gridRow = 'span 1', displayDateFormat = 'YYYY-MM-DD HH:mm:ss', 
+    // with timezone
+    dateFormat = 'YYYY-MM-DD[T]HH:mm:ssZ', } = schema;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const colLabel = 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]);
+    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(PopoverRoot, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: jsxRuntime.jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
+                            setOpen(true);
+                        }, justifyContent: 'start', children: [jsxRuntime.jsx(md.MdDateRange, {}), selectedDate !== undefined ? `${displayDate}` : ''] }) }), jsxRuntime.jsx(PopoverContent, { minW: '450px', children: jsxRuntime.jsxs(PopoverBody, { children: [jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsx(DateTimePicker$1, { value: selectedDate, onChange: (date) => {
+                                    setValue(colLabel, dayjs(date).tz(timezone).format(dateFormat));
+                                }, timezone: timezone, labels: {
+                                    monthNamesShort: dateTimePickerLabels?.monthNamesShort ?? [
+                                        formI18n.translate.t(`common.month_1`, {
+                                            defaultValue: 'January',
+                                        }),
+                                        formI18n.translate.t(`common.month_2`, {
+                                            defaultValue: 'February',
+                                        }),
+                                        formI18n.translate.t(`common.month_3`, {
+                                            defaultValue: 'March',
+                                        }),
+                                        formI18n.translate.t(`common.month_4`, {
+                                            defaultValue: 'April',
+                                        }),
+                                        formI18n.translate.t(`common.month_5`, {
+                                            defaultValue: 'May',
+                                        }),
+                                        formI18n.translate.t(`common.month_6`, {
+                                            defaultValue: 'June',
+                                        }),
+                                        formI18n.translate.t(`common.month_7`, {
+                                            defaultValue: 'July',
+                                        }),
+                                        formI18n.translate.t(`common.month_8`, {
+                                            defaultValue: 'August',
+                                        }),
+                                        formI18n.translate.t(`common.month_9`, {
+                                            defaultValue: 'September',
+                                        }),
+                                        formI18n.translate.t(`common.month_10`, {
+                                            defaultValue: 'October',
+                                        }),
+                                        formI18n.translate.t(`common.month_11`, {
+                                            defaultValue: 'November',
+                                        }),
+                                        formI18n.translate.t(`common.month_12`, {
+                                            defaultValue: 'December',
+                                        }),
+                                    ],
+                                    weekdayNamesShort: dateTimePickerLabels?.weekdayNamesShort ?? [
+                                        formI18n.translate.t(`common.weekday_1`, {
+                                            defaultValue: 'Sun',
+                                        }),
+                                        formI18n.translate.t(`common.weekday_2`, {
+                                            defaultValue: 'Mon',
+                                        }),
+                                        formI18n.translate.t(`common.weekday_3`, {
+                                            defaultValue: 'Tue',
+                                        }),
+                                        formI18n.translate.t(`common.weekday_4`, {
+                                            defaultValue: 'Wed',
+                                        }),
+                                        formI18n.translate.t(`common.weekday_5`, {
+                                            defaultValue: 'Thu',
+                                        }),
+                                        formI18n.translate.t(`common.weekday_6`, {
+                                            defaultValue: 'Fri',
+                                        }),
+                                        formI18n.translate.t(`common.weekday_7`, {
+                                            defaultValue: 'Sat',
+                                        }),
+                                    ],
+                                    backButtonLabel: dateTimePickerLabels?.backButtonLabel ??
+                                        formI18n.translate.t(`common.back_button`, {
+                                            defaultValue: 'Back',
+                                        }),
+                                    forwardButtonLabel: dateTimePickerLabels?.forwardButtonLabel ??
+                                        formI18n.translate.t(`common.forward_button`, {
+                                            defaultValue: 'Forward',
+                                        }),
+                                } })] }) })] }) }));
+};
+
 const SchemaRenderer = ({ schema, prefix, column, }) => {
     const colSchema = schema;
-    const { type, variant, properties: innerProperties, foreign_key, items, } = schema;
-    if (type === "string") {
+    const { type, variant, properties: innerProperties, foreign_key, format, items, } = schema;
+    if (variant === 'custom-input') {
+        return jsxRuntime.jsx(CustomInput, { schema: colSchema, prefix, column });
+    }
+    if (type === 'string') {
         if ((schema.enum ?? []).length > 0) {
             return jsxRuntime.jsx(EnumPicker, { schema: colSchema, prefix, column });
         }
-        if (variant === "id-picker") {
+        if (variant === 'id-picker') {
             idPickerSanityCheck(column, foreign_key);
             return jsxRuntime.jsx(IdPicker, { schema: colSchema, prefix, column });
         }
-        if (variant === "date-picker") {
+        if (format === 'date') {
             return jsxRuntime.jsx(DatePicker, { schema: colSchema, prefix, column });
         }
+        if (format === 'time') {
+            return jsxRuntime.jsx(TimePicker, { schema: colSchema, prefix, column });
+        }
+        if (format === 'date-time') {
+            return jsxRuntime.jsx(DateTimePicker, { schema: colSchema, prefix, column });
+        }
+        if (variant === 'text-area') {
+            return jsxRuntime.jsx(TextAreaInput, { schema: colSchema, prefix, column });
+        }
         return jsxRuntime.jsx(StringInputField, { schema: colSchema, prefix, column });
     }
-    if (type === "number" || type === "integer") {
+    if (type === 'number' || type === 'integer') {
         return jsxRuntime.jsx(NumberInputField, { schema: colSchema, prefix, column });
     }
-    if (type === "boolean") {
+    if (type === 'boolean') {
         return jsxRuntime.jsx(BooleanPicker, { schema: colSchema, prefix, column });
     }
-    if (type === "object") {
+    if (type === 'object') {
         if (innerProperties) {
             return jsxRuntime.jsx(ObjectInput, { schema: colSchema, prefix, column });
         }
         return jsxRuntime.jsx(RecordInput$1, { schema: colSchema, prefix, column });
     }
-    if (type === "array") {
-        if (variant === "id-picker") {
+    if (type === 'array') {
+        if (variant === 'id-picker') {
             idPickerSanityCheck(column, foreign_key);
             return (jsxRuntime.jsx(IdPicker, { schema: colSchema, prefix, column, isMultiple: true }));
         }
-        if (variant === "tag-picker") {
+        if (variant === 'tag-picker') {
             return jsxRuntime.jsx(TagPicker, { schema: colSchema, prefix, column });
         }
-        if (variant === "file-picker") {
+        if (variant === 'file-picker') {
             return jsxRuntime.jsx(FilePicker, { schema: colSchema, prefix, column });
         }
+        if (variant === 'date-range') {
+            return jsxRuntime.jsx(DateRangePicker, { schema: colSchema, prefix, column });
+        }
+        if (variant === 'enum-picker') {
+            const { items } = colSchema;
+            const { enum: enumItems } = items;
+            const enumSchema = {
+                type: 'string',
+                enum: enumItems,
+            };
+            return (jsxRuntime.jsx(EnumPicker, { isMultiple: true, schema: enumSchema, prefix, column }));
+        }
         if (items) {
             return jsxRuntime.jsx(ArrayRenderer, { schema: colSchema, prefix, column });
         }
         return jsxRuntime.jsx(react.Text, { children: `array ${column}` });
     }
-    if (type === "null") {
+    if (type === 'null') {
         return jsxRuntime.jsx(react.Text, { children: `null ${column}` });
     }
     return jsxRuntime.jsx(react.Text, { children: "missing type" });
 };
 
-const ColumnRenderer = ({ column, properties, prefix, }) => {
+const ColumnRenderer = ({ column, properties, prefix, parentRequired, }) => {
     const colSchema = properties[column];
     const colLabel = `${prefix}${column}`;
     if (colSchema === undefined) {
         throw new Error(`${colLabel} does not exist when using ColumnRenderer`);
     }
-    return jsxRuntime.jsx(SchemaRenderer, { schema: colSchema, prefix, column });
+    // Merge parent's required array with the schema's required array
+    const schemaWithRequired = {
+        ...colSchema,
+        required: parentRequired || colSchema.required,
+    };
+    return jsxRuntime.jsx(SchemaRenderer, { schema: schemaWithRequired, prefix, column });
 };
 
 const ArrayViewer = ({ schema, column, prefix }) => {
-    const { gridRow, gridColumn = "1/span 12", required, items } = schema;
+    const { gridColumn = "span 12", gridRow = "span 1", required, items, } = schema;
     const { translate } = useSchemaContext();
     const colLabel = `${prefix}${column}`;
     const isRequired = required?.some((columnId) => columnId === column);
     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}.fieldLabel`))}`, isRequired && jsxRuntime.jsx("span", { children: "*" })] }), values.map((field, index) => (jsxRuntime.jsx(react.Flex, { flexFlow: "column", children: jsxRuntime.jsx(react.Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat("auto-fit", auto)`, children: jsxRuntime.jsx(SchemaViewer, { column: `${index}`,
-                        prefix: `${colLabel}.`,
-                        schema: items }) }) }, `form-${prefix}${column}.${index}`))), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
+    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}`,
+                            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`)) }))] }));
 };
 
 const BooleanViewer = ({ schema, column, prefix, }) => {
     const { watch, formState: { errors }, } = reactHookForm.useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn, gridRow } = 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}.fieldLabel`))}`, required: isRequired, alignItems: "stretch", gridColumn,
+    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}.fieldRequired`)) }))] }));
+                    : translate.t(removeIndex(`${colLabel}.false`)) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
+};
+
+const CustomViewer = ({ column, schema, prefix }) => {
+    const formContext = reactHookForm.useFormContext();
+    const { inputViewerRender } = schema;
+    return (inputViewerRender &&
+        inputViewerRender({
+            column,
+            schema,
+            prefix,
+            formContext,
+        }));
 };
 
 const DateViewer = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, } = reactHookForm.useFormContext();
-    const { translate } = useSchemaContext();
-    const { required, gridColumn, gridRow } = schema;
+    const { translate, 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);
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${column}.fieldLabel`))}`, required: isRequired, alignItems: "stretch", gridColumn,
-        gridRow, children: [jsxRuntime.jsxs(react.Text, { children: [" ", selectedDate !== undefined ? selectedDate : ""] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.fieldRequired`) }))] }));
+    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 EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
     const { watch, formState: { errors }, } = reactHookForm.useFormContext();
-    const { translate } = useSchemaContext();
+    const formI18n = useFormI18n(column, prefix);
     const { required } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
-    const { gridColumn, gridRow, renderDisplay } = schema;
-    const colLabel = `${prefix}${column}`;
+    const { gridColumn = "span 12", gridRow = "span 1", renderDisplay } = schema;
+    const colLabel = formI18n.colLabel;
     const watchEnum = watch(colLabel);
     const watchEnums = (watch(colLabel) ?? []);
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${column}.fieldLabel`))}`, required: isRequired, alignItems: "stretch", gridColumn,
+    return (jsxRuntime.jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: "stretch", gridColumn,
         gridRow, children: [isMultiple && (jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", gap: 1, children: watchEnums.map((enumValue) => {
                     const item = enumValue;
                     if (item === undefined) {
                         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "undefined" });
                     }
-                    return (jsxRuntime.jsx(Tag, { closable: true, children: !!renderDisplay === true
+                    return (jsxRuntime.jsx(Tag, { size: "lg", children: !!renderDisplay === true
                             ? renderDisplay(item)
-                            : translate.t(removeIndex(`${colLabel}.${item}`)) }));
-                }) })), !isMultiple && (jsxRuntime.jsx(react.Text, { children: translate.t(removeIndex(`${colLabel}.${watchEnum}`)) })), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
+                            : formI18n.t(item) }, item));
+                }) })), !isMultiple && jsxRuntime.jsx(react.Text, { children: formI18n.t(watchEnum) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: formI18n.required() }))] }));
 };
 
 const FileViewer = ({ column, schema, prefix }) => {
-    const { setValue, formState: { errors }, watch, } = reactHookForm.useFormContext();
+    const { watch } = reactHookForm.useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn, gridRow } = 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.jsxs(Field, { label: `${translate.t(`${colLabel}.fieldLabel`)}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", display: "grid", gridTemplateRows: "auto 1fr auto", alignItems: "stretch", children: [jsxRuntime.jsx(FileDropzone, { onDrop: ({ files }) => {
-                    const newFiles = files.filter(({ name }) => !currentFiles.some((cur) => cur.name === name));
-                    setValue(colLabel, [...currentFiles, ...newFiles]);
-                }, placeholder: translate.t(`${colLabel}.fileDropzone`) }), 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", cursor: "pointer", onClick: () => {
-                                setValue(column, currentFiles.filter(({ name }) => {
-                                    return name !== file.name;
-                                }));
-                            }, display: "flex", flexFlow: "row", alignItems: "center", padding: "2", children: [jsxRuntime.jsx(react.Box, { children: file.name }), jsxRuntime.jsx(ti.TiDeleteOutline, {})] }) }, file.name));
-                }) }), errors[`${colLabel}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
+    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 IdViewer = ({ column, schema, prefix, isMultiple = false, }) => {
     const { watch, formState: { errors }, } = reactHookForm.useFormContext();
     const { idMap, translate } = useSchemaContext();
-    const { required, gridColumn, gridRow, renderDisplay, foreign_key } = schema;
+    const { required, gridColumn = "span 12", gridRow = "span 1", renderDisplay, foreign_key, } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const { display_column } = foreign_key;
     const colLabel = `${prefix}${column}`;
@@ -4754,7 +6509,7 @@ const IdViewer = ({ column, schema, prefix, isMultiple = false, }) => {
         }
         return record[display_column];
     };
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${column}.fieldLabel`))}`, required: isRequired, alignItems: "stretch", gridColumn,
+    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) => {
                     const item = idMap[id];
                     if (item === undefined) {
@@ -4763,21 +6518,39 @@ const IdViewer = ({ column, schema, prefix, isMultiple = false, }) => {
                     return (jsxRuntime.jsx(Tag, { closable: true, children: !!renderDisplay === true
                             ? 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}.fieldRequired`)) }))] }));
+                }) })), !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, gridRow } = 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}.fieldLabel`))}`, required: isRequired, gridColumn, gridRow, children: [jsxRuntime.jsx(react.Text, { children: value }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
+    // Format the value for display if formatOptions are provided
+    const formatValue = (val) => {
+        if (val === undefined || val === null || val === '')
+            return '';
+        const numValue = typeof val === 'string' ? parseFloat(val) : val;
+        if (isNaN(numValue))
+            return String(val);
+        // Use formatOptions if available, otherwise display as-is
+        if (schema.formatOptions) {
+            try {
+                return new Intl.NumberFormat(undefined, schema.formatOptions).format(numValue);
+            }
+            catch {
+                return String(val);
+            }
+        }
+        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`)) }))] }));
 };
 
 const ObjectViewer = ({ schema, column, prefix }) => {
-    const { properties, gridRow, gridColumn = "1/span 12", required } = schema;
+    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);
@@ -4785,25 +6558,28 @@ const ObjectViewer = ({ schema, column, prefix }) => {
     if (properties === undefined) {
         throw new Error(`properties is undefined when using ObjectInput`);
     }
-    return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [jsxRuntime.jsxs(react.Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.fieldLabel`))}`, isRequired && jsxRuntime.jsx("span", { children: "*" })] }), jsxRuntime.jsx(react.Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat("auto-fit", auto)`, children: Object.keys(properties ?? {}).map((key) => {
+    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",
+                }, 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}.fieldRequired`)) }))] }));
+                }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
 };
 
 const RecordInput = ({ column, schema, prefix }) => {
     const { formState: { errors }, setValue, getValues, } = reactHookForm.useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn, gridRow } = schema;
+    const { required, gridColumn = "span 12", gridRow = "span 1" } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const entries = Object.entries(getValues(column) ?? {});
     const [showNewEntries, setShowNewEntries] = React.useState(false);
     const [newKey, setNewKey] = React.useState();
     const [newValue, setNewValue] = React.useState();
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(`${column}.fieldLabel`)}`, required: isRequired, alignItems: "stretch", gridColumn, gridRow, children: [entries.map(([key, value]) => {
+    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;
@@ -4843,7 +6619,17 @@ const RecordInput = ({ column, schema, prefix }) => {
                     setShowNewEntries(true);
                     setNewKey(undefined);
                     setNewValue(undefined);
-                }, children: translate.t(`${column}.addNew`) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.fieldRequired`) }))] }));
+                }, children: translate.t(`${column}.addNew`) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.field_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 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 TagViewer = ({ column, schema, prefix }) => {
@@ -4931,19 +6717,50 @@ const TagViewer = ({ column, schema, prefix }) => {
             }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
 };
 
-const StringViewer = ({ column, schema, prefix, }) => {
+const TextAreaViewer = ({ column, schema, prefix, }) => {
     const { watch, formState: { errors }, } = reactHookForm.useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn, gridRow } = 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}.fieldLabel`))}`, 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}.fieldRequired`)) }))] }) }));
+    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 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 isRequired = required?.some((columnId) => columnId === column);
+    const colLabel = `${prefix}${column}`;
+    const selectedDate = watch(colLabel);
+    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`) }))] }));
+};
+
+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 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 SchemaViewer = ({ schema, prefix, column, }) => {
     const colSchema = schema;
-    const { type, variant, properties: innerProperties, foreign_key, items, } = schema;
+    const { type, variant, properties: innerProperties, foreign_key, items, format, } = schema;
+    if (variant === "custom-input") {
+        return jsxRuntime.jsx(CustomViewer, { schema: colSchema, prefix, column });
+    }
     if (type === "string") {
         if ((schema.enum ?? []).length > 0) {
             return jsxRuntime.jsx(EnumViewer, { schema: colSchema, prefix, column });
@@ -4952,9 +6769,18 @@ const SchemaViewer = ({ schema, prefix, column, }) => {
             idPickerSanityCheck(column, foreign_key);
             return jsxRuntime.jsx(IdViewer, { schema: colSchema, prefix, column });
         }
-        if (variant === "date-picker") {
+        if (format === "time") {
+            return jsxRuntime.jsx(TimeViewer, { schema: colSchema, prefix, column });
+        }
+        if (format === "date") {
             return jsxRuntime.jsx(DateViewer, { schema: colSchema, prefix, column });
         }
+        if (format === "date-time") {
+            return jsxRuntime.jsx(DateTimeViewer, { schema: colSchema, prefix, column });
+        }
+        if (variant === "text-area") {
+            return jsxRuntime.jsx(TextAreaViewer, { schema: colSchema, prefix, column });
+        }
         return jsxRuntime.jsx(StringViewer, { schema: colSchema, prefix, column });
     }
     if (type === "number" || type === "integer") {
@@ -4980,6 +6806,15 @@ const SchemaViewer = ({ schema, prefix, column, }) => {
         if (variant === "file-picker") {
             return jsxRuntime.jsx(FileViewer, { schema: colSchema, prefix, column });
         }
+        if (variant === "enum-picker") {
+            const { items } = schema;
+            const { enum: enumItems } = items;
+            const enumSchema = {
+                type: "string",
+                enum: enumItems,
+            };
+            return (jsxRuntime.jsx(EnumViewer, { isMultiple: true, schema: enumSchema, prefix, column }));
+        }
         if (items) {
             return jsxRuntime.jsx(ArrayViewer, { schema: colSchema, prefix, column });
         }
@@ -5003,66 +6838,43 @@ const ColumnViewer = ({ column, properties, prefix, }) => {
 };
 
 const SubmitButton = () => {
-    const { translate, setValidatedData, setIsError, setIsConfirming } = useSchemaContext();
+    const { translate, setValidatedData, setIsError, setIsConfirming, setError, schema, requireConfirmation, onFormSubmit, } = useSchemaContext();
     const methods = reactHookForm.useFormContext();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const onValid = (data) => {
-        setValidatedData(data);
-        setIsError(false);
-        setIsConfirming(true);
+        // const { isValid, errors } = validateData(data, schema);
+        // if (!isValid) {
+        //   setError({
+        //     type: 'validation',
+        //     errors,
+        //   });
+        //   setIsError(true);
+        //   return;
+        // }
+        // If validation passes, check if confirmation is required
+        if (requireConfirmation) {
+            // Show confirmation (existing behavior)
+            setValidatedData(data);
+            setIsError(false);
+            setIsConfirming(true);
+        }
+        else {
+            // Skip confirmation and submit directly
+            setValidatedData(data);
+            setIsError(false);
+            onFormSubmit(data);
+        }
     };
     return (jsxRuntime.jsx(react.Button, { onClick: () => {
             methods.handleSubmit(onValid)();
-        }, formNoValidate: true, children: translate.t("submit") }));
+        }, formNoValidate: true, children: translate.t('submit') }));
 };
 
 const FormBody = () => {
-    const { schema, requestUrl, order, ignore, include, onSubmit, rowNumber, translate, requestOptions, isSuccess, setIsSuccess, isError, setIsError, isSubmiting, setIsSubmiting, isConfirming, setIsConfirming, validatedData, setValidatedData, error, setError, getUpdatedData, } = useSchemaContext();
+    const { schema, order, ignore, include, translate, isSuccess, setIsSuccess, isError, setIsError, isSubmiting, setIsSubmiting, isConfirming, setIsConfirming, validatedData, setValidatedData, error, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, onFormSubmit, } = useSchemaContext();
+    const { showSubmitButton, showResetButton } = displayConfig;
     const methods = reactHookForm.useFormContext();
     const { properties } = schema;
-    const onBeforeSubmit = () => {
-        setIsSubmiting(true);
-    };
-    const onAfterSubmit = () => {
-        setIsSubmiting(false);
-    };
-    const onSubmitError = (error) => {
-        setIsError(true);
-        setError(error);
-    };
-    const onSubmitSuccess = () => {
-        setIsSuccess(true);
-    };
-    const defaultOnSubmit = async (promise) => {
-        try {
-            onBeforeSubmit();
-            await promise;
-            onSubmitSuccess();
-        }
-        catch (error) {
-            onSubmitError(error);
-        }
-        finally {
-            onAfterSubmit();
-        }
-    };
-    const defaultSubmitPromise = (data) => {
-        const options = {
-            method: "POST",
-            url: `${requestUrl}`,
-            data: clearEmptyString(data),
-            ...requestOptions,
-        };
-        return axios.request(options);
-    };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const onFormSubmit = async (data) => {
-        if (onSubmit === undefined) {
-            await defaultOnSubmit(defaultSubmitPromise(data));
-            return;
-        }
-        await defaultOnSubmit(onSubmit(data));
-    };
     const renderColumns = ({ order, keys, ignore, include, }) => {
         const included = include.length > 0 ? include : keys;
         const not_exist = included.filter((columnA) => !order.some((columnB) => columnA === columnB));
@@ -5077,38 +6889,42 @@ const FormBody = () => {
         include,
     });
     if (isSuccess) {
-        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.Title, { children: translate.t("submitSuccess") })] }), jsxRuntime.jsx(react.Flex, { justifyContent: "end", children: jsxRuntime.jsx(react.Button, { onClick: async () => {
-                            setIsError(false);
-                            setIsSubmiting(false);
-                            setIsSuccess(false);
-                            setIsConfirming(false);
-                            setValidatedData(undefined);
-                            const data = await getUpdatedData();
-                            methods.reset(data);
-                        }, formNoValidate: true, children: translate.t("submitAgain") }) })] }));
+        const resetHandler = async () => {
+            setIsError(false);
+            setIsSubmiting(false);
+            setIsSuccess(false);
+            setIsConfirming(false);
+            setValidatedData(undefined);
+            const data = await getUpdatedData();
+            methods.reset(data);
+        };
+        if (customSuccessRenderer) {
+            return customSuccessRenderer(resetHandler);
+        }
+        return (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') }) })] }));
     }
     if (isConfirming) {
-        return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "2", children: [jsxRuntime.jsx(react.Grid, { gap: 4, gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat(${rowNumber ?? "auto-fit"}, auto)`, children: ordered.map((column) => {
+        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) => {
                         return (jsxRuntime.jsx(ColumnViewer
                         // @ts-expect-error find suitable types
                         , { 
                             // @ts-expect-error find suitable types
                             properties: properties, prefix: ``, column }, `form-viewer-${column}`));
-                    }) }), jsxRuntime.jsxs(react.Flex, { justifyContent: "end", gap: "2", children: [jsxRuntime.jsx(react.Button, { onClick: () => {
+                    }) }), 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: 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 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(react.Alert.Root, { status: "error", children: jsxRuntime.jsx(react.Alert.Title, { children: jsxRuntime.jsx(AccordionRoot, { collapsible: true, defaultValue: [], children: jsxRuntime.jsxs(AccordionItem, { value: "b", children: [jsxRuntime.jsxs(AccordionItemTrigger, { children: [jsxRuntime.jsx(react.Alert.Indicator, {}), `${error}`] }), jsxRuntime.jsx(AccordionItemContent, { children: `${JSON.stringify(error)}` })] }) }) }) }) }))] }));
+                            }, 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)] }));
     }
-    return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "2", children: [jsxRuntime.jsx(react.Grid, { gap: "4", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat(${rowNumber ?? "auto-fit"}, auto)`, children: ordered.map((column) => {
+    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
                     // @ts-expect-error find suitable types
                     , { 
                         // @ts-expect-error find suitable types
-                        properties: properties, prefix: ``, column }, `form-input-${column}`));
-                }) }), jsxRuntime.jsxs(react.Flex, { justifyContent: "end", gap: "2", children: [jsxRuntime.jsx(react.Button, { onClick: () => {
+                        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") }), jsxRuntime.jsx(SubmitButton, {})] })] }));
+                        }, variant: 'subtle', children: translate.t('reset') })), showSubmitButton && jsxRuntime.jsx(SubmitButton, {})] }), isError && customErrorRenderer && customErrorRenderer(error)] }));
 };
 
 const FormTitle = () => {
@@ -5117,15 +6933,19 @@ const FormTitle = () => {
 };
 
 const DefaultForm = ({ formConfig, }) => {
-    return (jsxRuntime.jsx(FormRoot, { ...formConfig, children: jsxRuntime.jsxs(react.Grid, { gap: "2", children: [jsxRuntime.jsx(FormTitle, {}), jsxRuntime.jsx(FormBody, {})] }) }));
+    const { showTitle } = formConfig.displayConfig ?? {};
+    return (jsxRuntime.jsx(FormRoot, { ...formConfig, children: jsxRuntime.jsxs(react.Grid, { gap: "2", children: [showTitle && jsxRuntime.jsx(FormTitle, {}), jsxRuntime.jsx(FormBody, {})] }) }));
 };
 
-const useForm = ({ preLoadedValues, keyPrefix }) => {
+const useForm = ({ preLoadedValues, keyPrefix, namespace, schema, }) => {
     const form = reactHookForm.useForm({
         values: preLoadedValues,
+        resolver: schema ? ajvResolver(schema) : undefined,
+        mode: 'onBlur',
+        reValidateMode: 'onBlur',
     });
     const [idMap, setIdMap] = React.useState({});
-    const translate = reactI18next.useTranslation("", { keyPrefix });
+    const translate = reactI18next.useTranslation(namespace || '', { keyPrefix });
     return {
         form,
         idMap,
@@ -5134,6 +6954,250 @@ const useForm = ({ preLoadedValues, keyPrefix }) => {
     };
 };
 
+/**
+ * Type definitions for error message configuration
+ */
+/**
+ * Schema-level error message builder
+ *
+ * Builds a complete errorMessage object compatible with ajv-errors plugin.
+ * Supports both i18n translation keys and plain string messages.
+ *
+ * @param config - Error message configuration
+ * @returns Complete errorMessage object for JSON Schema
+ *
+ * @example
+ * ```typescript
+ * // Simple required field errors
+ * const errorMessage = buildErrorMessages({
+ *   required: {
+ *     username: "Username is required",
+ *     email: "user.email.field_required" // i18n key
+ *   }
+ * });
+ *
+ * // With validation rules
+ * const errorMessage = buildErrorMessages({
+ *   required: {
+ *     password: "Password is required"
+ *   },
+ *   properties: {
+ *     password: {
+ *       minLength: "Password must be at least 8 characters",
+ *       pattern: "Password must contain letters and numbers"
+ *     },
+ *     age: {
+ *       minimum: "Must be 18 or older",
+ *       maximum: "Must be under 120"
+ *     }
+ *   }
+ * });
+ *
+ * // With global fallbacks
+ * const errorMessage = buildErrorMessages({
+ *   required: {
+ *     email: "Email is required"
+ *   },
+ *   minLength: "This field is too short", // applies to all fields
+ *   minimum: "Value is too small"
+ * });
+ * ```
+ */
+const buildErrorMessages = (config) => {
+    const result = {};
+    // Add required field errors
+    if (config.required && Object.keys(config.required).length > 0) {
+        result.required = config.required;
+    }
+    // Add field-specific validation errors
+    if (config.properties && Object.keys(config.properties).length > 0) {
+        result.properties = config.properties;
+    }
+    // Add global fallback error messages
+    const globalKeys = [
+        'minLength',
+        'maxLength',
+        'pattern',
+        'minimum',
+        'maximum',
+        'multipleOf',
+        'format',
+        'type',
+        'enum',
+    ];
+    globalKeys.forEach((key) => {
+        if (config[key]) {
+            result[key] = config[key];
+        }
+    });
+    return result;
+};
+/**
+ * Converts buildErrorMessages result to ajv-errors compatible format
+ */
+const convertToAjvErrorsFormat = (errorMessages) => {
+    const result = {};
+    // Convert required field errors
+    if (errorMessages.required) {
+        result.required = errorMessages.required;
+    }
+    // Convert properties errors to ajv-errors format
+    if (errorMessages.properties) {
+        result.properties = {};
+        Object.keys(errorMessages.properties).forEach((fieldName) => {
+            const fieldErrors = errorMessages.properties[fieldName];
+            result.properties[fieldName] = {};
+            Object.keys(fieldErrors).forEach((keyword) => {
+                result.properties[fieldName][keyword] =
+                    fieldErrors[keyword];
+            });
+        });
+    }
+    // Add global fallback errors
+    const globalKeys = [
+        'minLength',
+        'maxLength',
+        'pattern',
+        'minimum',
+        'maximum',
+        'multipleOf',
+        'format',
+        'type',
+        'enum',
+    ];
+    globalKeys.forEach((key) => {
+        if (errorMessages[key]) {
+            result[key] = errorMessages[key];
+        }
+    });
+    return result;
+};
+/**
+ * Helper function to build required field errors
+ *
+ * Simplifies creating required field error messages, especially useful
+ * for generating i18n translation keys following a pattern.
+ *
+ * @param fields - Array of required field names
+ * @param messageOrGenerator - Either a string template or function to generate messages
+ * @returns Required field error configuration
+ *
+ * @example
+ * ```typescript
+ * // Plain string messages
+ * const required = buildRequiredErrors(
+ *   ["username", "email", "password"],
+ *   (field) => `${field} is required`
+ * );
+ * // Result: { username: "username is required", email: "email is required", ... }
+ *
+ * // i18n translation keys
+ * const required = buildRequiredErrors(
+ *   ["username", "email"],
+ *   (field) => `user.${field}.field_required`
+ * );
+ * // Result: { username: "user.username.field_required", email: "user.email.field_required" }
+ *
+ * // Same message for all fields
+ * const required = buildRequiredErrors(
+ *   ["username", "email"],
+ *   "This field is required"
+ * );
+ * // Result: { username: "This field is required", email: "This field is required" }
+ *
+ * // With keyPrefix for i18n
+ * const required = buildRequiredErrors(
+ *   ["username", "email"],
+ *   (field) => `${field}.field_required`,
+ *   "user"
+ * );
+ * // Result: { username: "user.username.field_required", email: "user.email.field_required" }
+ * ```
+ */
+const buildRequiredErrors = (fields, messageOrGenerator, keyPrefix = '') => {
+    const result = {};
+    fields.forEach((field) => {
+        if (typeof messageOrGenerator === 'function') {
+            const message = messageOrGenerator(field);
+            result[field] = keyPrefix ? `${keyPrefix}.${message}` : message;
+        }
+        else {
+            result[field] = messageOrGenerator;
+        }
+    });
+    return result;
+};
+/**
+ * Helper function to build field-specific validation errors
+ *
+ * Creates property-specific error messages for multiple fields at once.
+ *
+ * @param config - Maps field names to their validation error configurations
+ * @returns Properties error configuration
+ *
+ * @example
+ * ```typescript
+ * const properties = buildFieldErrors({
+ *   username: {
+ *     minLength: "Username must be at least 3 characters",
+ *     pattern: "Username can only contain letters and numbers"
+ *   },
+ *   age: {
+ *     minimum: "Must be 18 or older",
+ *     maximum: "Must be under 120"
+ *   },
+ *   email: {
+ *     format: "Please enter a valid email address"
+ *   }
+ * });
+ * ```
+ */
+const buildFieldErrors = (config) => {
+    return config;
+};
+/**
+ * Helper function to create a complete error message configuration in one call
+ *
+ * Convenient wrapper that combines required and validation errors.
+ *
+ * @param required - Required field error messages
+ * @param properties - Field-specific validation error messages
+ * @param globalFallbacks - Global fallback error messages
+ * @returns Complete error message configuration
+ *
+ * @example
+ * ```typescript
+ * const errorMessage = createErrorMessage(
+ *   {
+ *     username: "Username is required",
+ *     email: "Email is required"
+ *   },
+ *   {
+ *     username: {
+ *       minLength: "Username must be at least 3 characters"
+ *     },
+ *     email: {
+ *       format: "Please enter a valid email"
+ *     }
+ *   },
+ *   {
+ *     minLength: "This field is too short",
+ *     format: "Invalid format"
+ *   }
+ * );
+ * ```
+ */
+const createErrorMessage = (required, properties, globalFallbacks) => {
+    const config = {
+        required,
+        properties,
+    };
+    if (globalFallbacks) {
+        Object.assign(config, globalFallbacks);
+    }
+    return buildErrorMessages(config);
+};
+
 const getMultiDates = ({ selected, selectedDate, selectedDates, selectable, }) => {
     if (!selectable) {
         return [...selectedDates];
@@ -5157,12 +7221,12 @@ exports.DataTableServer = DataTableServer;
 exports.DefaultCardTitle = DefaultCardTitle;
 exports.DefaultForm = DefaultForm;
 exports.DefaultTable = DefaultTable;
+exports.DefaultTableServer = DefaultTableServer;
 exports.DensityToggleButton = DensityToggleButton;
 exports.EditSortingButton = EditSortingButton;
 exports.EmptyState = EmptyState$1;
 exports.ErrorAlert = ErrorAlert;
 exports.FilterDialog = FilterDialog;
-exports.FilterOptions = FilterOptions;
 exports.FormBody = FormBody;
 exports.FormRoot = FormRoot;
 exports.FormTitle = FormTitle;
@@ -5192,6 +7256,11 @@ exports.TableSorter = TableSorter;
 exports.TableViewer = TableViewer;
 exports.TextCell = TextCell;
 exports.ViewDialog = ViewDialog;
+exports.buildErrorMessages = buildErrorMessages;
+exports.buildFieldErrors = buildFieldErrors;
+exports.buildRequiredErrors = buildRequiredErrors;
+exports.convertToAjvErrorsFormat = convertToAjvErrorsFormat;
+exports.createErrorMessage = createErrorMessage;
 exports.getColumns = getColumns;
 exports.getMultiDates = getMultiDates;
 exports.getRangeDates = getRangeDates;