hs-uix 1.0.3 → 1.1.0

package/dist/index.js

@@ -162,12 +162,16 @@ var DataTable = ({
   // enable fuzzy matching via Fuse.js
   fuzzyOptions,
   // custom Fuse.js options (threshold, distance, etc.)
+  showSearch = true,
+  // show the SearchInput in the toolbar
   // Filters
   filters = [],
   showFilterBadges = true,
   // show active filter chips/badges
   showClearFiltersButton = true,
   // show "Clear all" filters reset button
+  filterInlineLimit = 2,
+  // number of filters shown inline before overflow
   // Pagination
   pageSize = 10,
   maxVisiblePageButtons,
@@ -249,6 +253,8 @@ var DataTable = ({
   // optional key to force clear uncontrolled selection memory
   resetSelectionOnQueryChange = true,
   // clear uncontrolled selection on search/filter/sort changes
+  showSelectionBar = true,
+  // show the selection action bar when rows are selected
   recordLabel,
   // { singular: "Contact", plural: "Contacts" } — defaults to Record/Records
   // -----------------------------------------------------------------------
@@ -269,11 +275,31 @@ var DataTable = ({
   // (row, field, newValue) => void
   onRowEditInput,
   // optional live-input callback: (row, field, inputValue) => void
+  onEditStart,
+  // (row, field, currentValue) => void — fires when editing begins
+  onEditCancel,
+  // (row, field) => void — fires when editing is cancelled without commit
   // -----------------------------------------------------------------------
   // Auto-width
   // -----------------------------------------------------------------------
-  autoWidth = true
+  autoWidth = true,
   // auto-compute column widths from content analysis
+  // -----------------------------------------------------------------------
+  // Labels / i18n
+  // -----------------------------------------------------------------------
+  labels,
+  // override hardcoded UI strings for i18n
+  // -----------------------------------------------------------------------
+  // Render overrides (Phase 3 — full replacement escape hatches)
+  // -----------------------------------------------------------------------
+  renderSelectionBar,
+  // ({ selectedIds, selectedCount, displayCount, countLabel, onSelectAll, onDeselectAll, selectionActions }) => ReactNode
+  renderEmptyState,
+  // ({ title, message }) => ReactNode
+  renderLoadingState,
+  // ({ label }) => ReactNode
+  renderErrorState
+  // ({ error, title, message }) => ReactNode
 }) => {
   const initialSortState = (0, import_react.useMemo)(() => {
     return normalizeSortState(columns, defaultSort);
@@ -507,11 +533,11 @@ var DataTable = ({
       const type = filter.type || "select";
       const prefix = filter.chipLabel || filter.placeholder || filter.name;
       if (type === "multiselect") {
-        const labels = value.map((v) => {
+        const labels2 = value.map((v) => {
           var _a;
           return ((_a = filter.options.find((o) => o.value === v)) == null ? void 0 : _a.label) || v;
         }).join(", ");
-        chips.push({ key: filter.name, label: `${prefix}: ${labels}` });
+        chips.push({ key: filter.name, label: `${prefix}: ${labels2}` });
       } else if (type === "dateRange") {
         const parts = [];
         if (value.from) parts.push(`from ${formatDateChip(value.from)}`);
@@ -552,7 +578,17 @@ var DataTable = ({
   const countLabel = (n) => n === 1 ? singularLabel : pluralLabel;
   const resolvedEmptyTitle = emptyTitle || "No results found";
   const resolvedEmptyMessage = emptyMessage || `No ${pluralLabel} match your search or filter criteria.`;
-  const resolvedLoadingLabel = `Loading ${pluralLabel}...`;
+  const resolvedSelectedLabel = (labels == null ? void 0 : labels.selected) || ((count, label) => `${count}\xA0${label}\xA0selected`);
+  const resolvedSelectAllLabel = (labels == null ? void 0 : labels.selectAll) || ((count, label) => `Select all ${count} ${label}`);
+  const resolvedDeselectAllLabel = (labels == null ? void 0 : labels.deselectAll) || "Deselect all";
+  const resolvedFiltersButtonLabel = (labels == null ? void 0 : labels.filtersButton) || "Filters";
+  const resolvedClearAllLabel = (labels == null ? void 0 : labels.clearAll) || "Clear all";
+  const resolvedDateFromLabel = (labels == null ? void 0 : labels.dateFrom) || "From";
+  const resolvedDateToLabel = (labels == null ? void 0 : labels.dateTo) || "To";
+  const resolvedLoadingLabel = (labels == null ? void 0 : labels.loading) || `Loading ${pluralLabel}...`;
+  const resolvedErrorTitle = (labels == null ? void 0 : labels.errorTitle) || "Something went wrong.";
+  const resolvedErrorMessage = (labels == null ? void 0 : labels.errorMessage) || "An error occurred while loading data.";
+  const resolvedRetryMessage = (labels == null ? void 0 : labels.retryMessage) || "Please try again.";
   const recordCountLabel = rowCountText ? rowCountText(shownOnPageCount, displayCount) : displayCount === totalDataCount ? `${totalDataCount} ${countLabel(totalDataCount)}` : `${displayCount} of ${totalDataCount} ${countLabel(totalDataCount)}`;
   const [internalSelectedIds, setInternalSelectedIds] = (0, import_react.useState)(/* @__PURE__ */ new Set());
   const selectionResetRef = (0, import_react.useRef)("");
@@ -641,7 +677,11 @@ var DataTable = ({
     setEditingCell({ rowId, field });
     setEditValue(currentValue);
     setEditError(null);
-  }, []);
+    if (onEditStart) {
+      const row = data.find((r) => r[rowIdField] === rowId);
+      if (row) onEditStart(row, field, currentValue);
+    }
+  }, [onEditStart, data, rowIdField]);
   const commitEdit = (0, import_react.useCallback)((row, field, value) => {
     const col = columns.find((c) => c.field === field);
     if (col == null ? void 0 : col.editValidate) {
@@ -663,6 +703,7 @@ var DataTable = ({
     const commit = (val) => commitEdit(row, col.field, val);
     const exitEdit = () => {
       if (editError) return;
+      if (onEditCancel) onEditCancel(row, col.field);
       setEditingCell(null);
       setEditValue(null);
     };
@@ -882,7 +923,7 @@ var DataTable = ({
         {
           name: `filter-${filter.name}-from`,
           label: "",
-          placeholder: "From",
+          placeholder: resolvedDateFromLabel,
           format: "medium",
           value: rangeVal.from,
           onChange: (val) => handleFilterChange(filter.name, { ...rangeVal, from: val })
@@ -893,7 +934,7 @@ var DataTable = ({
           size: "sm",
           name: `filter-${filter.name}-to`,
           label: "",
-          placeholder: "To",
+          placeholder: resolvedDateToLabel,
           format: "medium",
           value: rangeVal.to,
           onChange: (val) => handleFilterChange(filter.name, { ...rangeVal, to: val })
@@ -916,7 +957,7 @@ var DataTable = ({
       }
     );
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "xs" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 3 }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, searchFields.length > 0 && /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "xs" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 3 }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ import_react.default.createElement(
     import_ui_extensions.SearchInput,
     {
       name: "datatable-search",
@@ -924,7 +965,7 @@ var DataTable = ({
       value: searchTerm,
       onChange: handleSearchChange
     }
-  ), filters.slice(0, 2).map(renderFilterControl), filters.length > 2 && /* @__PURE__ */ import_react.default.createElement(
+  ), filters.slice(0, filterInlineLimit).map(renderFilterControl), filters.length > filterInlineLimit && /* @__PURE__ */ import_react.default.createElement(
     import_ui_extensions.Button,
     {
       variant: "transparent",
@@ -932,16 +973,25 @@ var DataTable = ({
       onClick: () => setShowMoreFilters((prev) => !prev)
     },
     /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Icon, { name: "filter", size: "sm" }),
-    " Filters"
-  )), showMoreFilters && filters.length > 2 && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "end", gap: "sm", wrap: "wrap" }, filters.slice(2).map(renderFilterControl)), activeChips.length > 0 && (showFilterBadges || showClearFiltersButton) && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showFilterBadges && activeChips.map((chip) => /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Tag, { key: chip.key, variant: "default", onDelete: () => handleFilterRemove(chip.key) }, chip.label)), showClearFiltersButton && /* @__PURE__ */ import_react.default.createElement(
+    " ",
+    resolvedFiltersButtonLabel
+  )), showMoreFilters && filters.length > filterInlineLimit && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "end", gap: "sm", wrap: "wrap" }, filters.slice(filterInlineLimit).map(renderFilterControl)), activeChips.length > 0 && (showFilterBadges || showClearFiltersButton) && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showFilterBadges && activeChips.map((chip) => /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Tag, { key: chip.key, variant: "default", onDelete: () => handleFilterRemove(chip.key) }, chip.label)), showClearFiltersButton && /* @__PURE__ */ import_react.default.createElement(
     import_ui_extensions.Button,
     {
       variant: "transparent",
       size: "extra-small",
       onClick: () => handleFilterRemove("all")
     },
-    "Clear all"
-  )))), showRowCount && displayCount > 0 && !(selectable && selectedIds.size > 0) && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 1, alignSelf: "end" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)))), selectable && selectedIds.size > 0 && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 3 }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "sm", wrap: "nowrap" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { inline: true, format: { fontWeight: "demibold" } }, selectedIds.size, "\xA0", countLabel(selectedIds.size), "\xA0selected"), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "transparent", size: "extra-small", onClick: handleSelectAllRows }, "Select all ", displayCount, " ", countLabel(displayCount)), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "transparent", size: "extra-small", onClick: handleDeselectAll }, "Deselect all"), selectionActions.map((action, i) => /* @__PURE__ */ import_react.default.createElement(
+    resolvedClearAllLabel
+  )))), showRowCount && displayCount > 0 && !(showSelectionBar && selectable && selectedIds.size > 0) && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 1, alignSelf: "end" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)))), showSelectionBar && selectable && selectedIds.size > 0 && (renderSelectionBar ? renderSelectionBar({
+    selectedIds,
+    selectedCount: selectedIds.size,
+    displayCount,
+    countLabel,
+    onSelectAll: handleSelectAllRows,
+    onDeselectAll: handleDeselectAll,
+    selectionActions
+  }) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 3 }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "sm", wrap: "nowrap" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { inline: true, format: { fontWeight: "demibold" } }, typeof resolvedSelectedLabel === "function" ? resolvedSelectedLabel(selectedIds.size, countLabel(selectedIds.size)) : resolvedSelectedLabel), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "transparent", size: "extra-small", onClick: handleSelectAllRows }, typeof resolvedSelectAllLabel === "function" ? resolvedSelectAllLabel(displayCount, countLabel(displayCount)) : resolvedSelectAllLabel), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "transparent", size: "extra-small", onClick: handleDeselectAll }, resolvedDeselectAllLabel), selectionActions.map((action, i) => /* @__PURE__ */ import_react.default.createElement(
     import_ui_extensions.Button,
     {
       key: i,
@@ -952,7 +1002,11 @@ var DataTable = ({
     action.icon && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Icon, { name: action.icon, size: "sm" }),
     " ",
     action.label
-  )))), showRowCount && displayCount > 0 && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 1, alignSelf: "center" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)))), loading ? /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.LoadingSpinner, { label: resolvedLoadingLabel, layout: "centered" }) : error ? /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.ErrorState, { title: typeof error === "string" ? error : "Something went wrong." }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, null, typeof error === "string" ? "Please try again." : "An error occurred while loading data.")) : displayRows.length === 0 ? /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.EmptyState, { title: resolvedEmptyTitle, layout: "vertical" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, null, resolvedEmptyMessage))) : /* @__PURE__ */ import_react.default.createElement(
+  )))), showRowCount && displayCount > 0 && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 1, alignSelf: "center" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel))))), loading ? renderLoadingState ? renderLoadingState({ label: resolvedLoadingLabel }) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.LoadingSpinner, { label: resolvedLoadingLabel, layout: "centered" }) : error ? renderErrorState ? renderErrorState({
+    error,
+    title: typeof error === "string" ? error : resolvedErrorTitle,
+    message: typeof error === "string" ? resolvedRetryMessage : resolvedErrorMessage
+  }) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.ErrorState, { title: typeof error === "string" ? error : resolvedErrorTitle }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, null, typeof error === "string" ? resolvedRetryMessage : resolvedErrorMessage)) : displayRows.length === 0 ? renderEmptyState ? renderEmptyState({ title: resolvedEmptyTitle, message: resolvedEmptyMessage }) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.EmptyState, { title: resolvedEmptyTitle, layout: "vertical" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, null, resolvedEmptyMessage))) : /* @__PURE__ */ import_react.default.createElement(
     import_ui_extensions.Table,
     {
       bordered,
@@ -1201,12 +1255,14 @@ var collectAsyncValidatorPromises = (value, field, allValues, context) => {
 };
 var runValidators = (value, field, allValues, fieldTypes, options = {}) => {
   const includeCustomValidators = options.includeCustomValidators !== false;
+  const msg = options.messages || {};
   if (field.type === "display" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList") return null;
   const isRequired = resolveRequired(field, allValues);
   const plugin = fieldTypes && fieldTypes[field.type];
   const empty = plugin && plugin.isEmpty ? plugin.isEmpty(value) : isValueEmpty(value, field);
   if (isRequired && empty) {
-    return `${field.label} is required`;
+    const fn = msg.required || ((label) => `${label} is required`);
+    return typeof fn === "function" ? fn(field.label) : fn;
   }
   if (empty) return null;
   if (field.useDefaultValidators !== false) {
@@ -1215,23 +1271,27 @@ var runValidators = (value, field, allValues, fieldTypes, options = {}) => {
   }
   if (field.pattern && typeof value === "string") {
     if (!field.pattern.test(value)) {
-      return field.patternMessage || "Invalid format";
+      return field.patternMessage || msg.invalidFormat || "Invalid format";
     }
   }
   if (typeof value === "string") {
     if (field.minLength != null && value.length < field.minLength) {
-      return `Must be at least ${field.minLength} characters`;
+      const fn = msg.minLength || ((min) => `Must be at least ${min} characters`);
+      return typeof fn === "function" ? fn(field.minLength) : fn;
     }
     if (field.maxLength != null && value.length > field.maxLength) {
-      return `Must be no more than ${field.maxLength} characters`;
+      const fn = msg.maxLength || ((max) => `Must be no more than ${max} characters`);
+      return typeof fn === "function" ? fn(field.maxLength) : fn;
     }
   }
   if (typeof value === "number") {
     if (field.min != null && value < field.min) {
-      return `Must be at least ${field.min}`;
+      const fn = msg.minValue || ((min) => `Must be at least ${min}`);
+      return typeof fn === "function" ? fn(field.min) : fn;
     }
     if (field.max != null && value > field.max) {
-      return `Must be no more than ${field.max}`;
+      const fn = msg.maxValue || ((max) => `Must be no more than ${max}`);
+      return typeof fn === "function" ? fn(field.max) : fn;
     }
   }
   if (field.type === "date" && isDateValueObject(value)) {
@@ -1437,8 +1497,18 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     // string — warning alert when readOnly
     alerts,
     // { addAlert, readOnlyTitle, errorTitle, successTitle }
-    errors: controlledErrors
+    errors: controlledErrors,
     // controlled validation errors
+    showReadOnlyAlert = true,
+    // show warning Alert when readOnly is true
+    showInlineAlerts = true,
+    // show inline form-level error/success Alerts
+    renderReadOnlyAlert,
+    // (context: { title, message }) => ReactNode — custom readOnly alert renderer
+    renderFieldError,
+    // (error: string, field: object) => ReactNode — custom field error renderer
+    defaultCurrency = "USD"
+    // form-level default ISO 4217 currency code for currency fields
   } = props;
   const {
     onDirtyChange,
@@ -1450,6 +1520,23 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
   const cancelButtonLabel = (labels == null ? void 0 : labels.cancel) || "Cancel";
   const backButtonLabel = (labels == null ? void 0 : labels.back) || "Back";
   const nextButtonLabel = (labels == null ? void 0 : labels.next) || "Next";
+  const requiredMessage = (labels == null ? void 0 : labels.required) || ((label) => `${label} is required`);
+  const invalidFormatMessage = (labels == null ? void 0 : labels.invalidFormat) || "Invalid format";
+  const minLengthMessage = (labels == null ? void 0 : labels.minLength) || ((min) => `Must be at least ${min} characters`);
+  const maxLengthMessage = (labels == null ? void 0 : labels.maxLength) || ((max) => `Must be no more than ${max} characters`);
+  const minValueMessage = (labels == null ? void 0 : labels.minValue) || ((min) => `Must be at least ${min}`);
+  const maxValueMessage = (labels == null ? void 0 : labels.maxValue) || ((max) => `Must be no more than ${max}`);
+  const dependentPropertiesLabel = (labels == null ? void 0 : labels.dependentProperties) || "Dependent properties";
+  const repeaterAddLabel = (labels == null ? void 0 : labels.repeaterAdd) || "Add";
+  const repeaterRemoveLabel = (labels == null ? void 0 : labels.repeaterRemove) || "Remove";
+  const validationMessages = labels ? {
+    required: requiredMessage,
+    invalidFormat: invalidFormatMessage,
+    minLength: minLengthMessage,
+    maxLength: maxLengthMessage,
+    minValue: minValueMessage,
+    maxValue: maxValueMessage
+  } : void 0;
   const addAlert = alerts == null ? void 0 : alerts.addAlert;
   const readOnlyTitle = (alerts == null ? void 0 : alerts.readOnlyTitle) || "Read Only";
   const errorTitle = (alerts == null ? void 0 : alerts.errorTitle) || "Error";
@@ -1688,7 +1775,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
         const rowValues = { ...allValues, [field.name]: rows };
         subFields.forEach((subField) => {
           if (subField.visible && !subField.visible(rowValues)) return;
-          const err = runValidators(row == null ? void 0 : row[subField.name], subField, rowValues, fieldTypes);
+          const err = runValidators(row == null ? void 0 : row[subField.name], subField, rowValues, fieldTypes, { messages: validationMessages });
           if (!err) return;
           const key = getRepeaterErrorKey(field.name, rowIdx, subField.name);
           errors[key] = err;
@@ -1715,9 +1802,9 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
         );
         return repeaterResult.errors[name] || null;
       }
-      return runValidators(value != null ? value : formValues[name], field, formValues, fieldTypes);
+      return runValidators(value != null ? value : formValues[name], field, formValues, fieldTypes, { messages: validationMessages });
     },
-    [fieldByName, formValues, validateRepeaterField, fieldTypes]
+    [fieldByName, formValues, validateRepeaterField, fieldTypes, validationMessages]
   );
   const validateVisibleFields = (0, import_react2.useCallback)(
     (fieldSubset) => {
@@ -1733,7 +1820,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
           }
           continue;
         }
-        const err = runValidators(formValues[field.name], field, formValues, fieldTypes);
+        const err = runValidators(formValues[field.name], field, formValues, fieldTypes, { messages: validationMessages });
         if (err) {
           errors[field.name] = err;
           hasErrors = true;
@@ -1741,14 +1828,14 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
       }
       return { errors, hasErrors };
     },
-    [visibleFields, formValues, validateRepeaterField, fieldTypes]
+    [visibleFields, formValues, validateRepeaterField, fieldTypes, validationMessages]
   );
   const runAsyncValidation = (0, import_react2.useCallback)(
     (name, value) => {
       const field = fieldByName.get(name);
       if (!field || field.type === "repeater") return null;
       const val = value != null ? value : formValues[name];
-      const syncError = runValidators(val, field, formValues, fieldTypes, { includeCustomValidators: false });
+      const syncError = runValidators(val, field, formValues, fieldTypes, { includeCustomValidators: false, messages: validationMessages });
       const prevController = asyncAbortRef.current.get(name);
       if (prevController) prevController.abort();
       asyncAbortRef.current.delete(name);
@@ -2117,6 +2204,12 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     [replaceErrors]
   );
   const renderField = (field) => {
+    const fieldError = formErrors[field.name] || null;
+    const rendered = renderFieldInner(field);
+    if (!renderFieldError || !fieldError) return rendered;
+    return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, rendered, renderFieldError(fieldError, field));
+  };
+  const renderFieldInner = (field) => {
     const fieldValue = formValues[field.name];
     const fieldError = formErrors[field.name] || null;
     const hasError = !!fieldError;
@@ -2183,7 +2276,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
       readOnly: isReadOnly,
       disabled: isDisabled,
       error: hasError,
-      validationMessage: fieldError || void 0,
+      validationMessage: renderFieldError ? void 0 : fieldError || void 0,
       ...field.loading || validatingFields[field.name] ? { loading: true } : {},
       ...field.fieldProps || {}
     };
@@ -2253,7 +2346,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
           import_ui_extensions2.CurrencyInput,
           {
             ...commonProps,
-            currency: field.currency || "USD",
+            currency: field.currency || defaultCurrency,
             value: fieldValue,
             min: field.min,
             max: field.max,
@@ -2431,8 +2524,8 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
         const renderRemoveControl = repeaterProps.renderRemove;
         const renderMoveUpControl = repeaterProps.renderMoveUp;
         const renderMoveDownControl = repeaterProps.renderMoveDown;
-        const addLabel = repeaterProps.addLabel || "Add";
-        const removeLabel = repeaterProps.removeLabel || "Remove";
+        const addLabel = repeaterProps.addLabel || repeaterAddLabel;
+        const removeLabel = repeaterProps.removeLabel || repeaterRemoveLabel;
         const moveUpLabel = repeaterProps.moveUpLabel || "Up";
         const moveDownLabel = repeaterProps.moveDownLabel || "Down";
         const canEditRows = !isReadOnly && !isDisabled;
@@ -2466,7 +2559,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
         };
         const validateSubField = (rowIdx, subField, subValue, nextRows) => {
           const rowValues = { ...formValues, [field.name]: nextRows };
-          const err = runValidators(subValue, subField, rowValues, fieldTypes);
+          const err = runValidators(subValue, subField, rowValues, fieldTypes, { messages: validationMessages });
           setRepeaterSubFieldError(field.name, rowIdx, subField.name, err);
         };
         const handleSubFieldChange = (rowIdx, subField, subValue) => {
@@ -2584,7 +2677,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
   const renderDependentGroup = (parentField, dependents) => {
     const firstWithLabel = dependents.find((f) => getDependsOnLabel(f)) || dependents[0];
     const firstWithMessage = dependents.find((f) => getDependsOnMessage(f)) || dependents[0];
-    const groupLabel = getDependsOnLabel(firstWithLabel) || "Dependent properties";
+    const groupLabel = getDependsOnLabel(firstWithLabel) || dependentPropertiesLabel;
     const rawMessage = getDependsOnMessage(firstWithMessage);
     const tooltipMessage = typeof rawMessage === "function" ? rawMessage(parentField.label) : rawMessage || "";
     return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Tile, { key: `dep-${parentField.name}`, compact: true }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "column", gap }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, { format: { fontWeight: "demibold" } }, groupLabel, " ", tooltipMessage && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Link, { inline: true, variant: "dark", overlay: /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Tooltip, null, tooltipMessage) }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Icon, { name: "info" })))), renderFieldSubset(dependents)));
@@ -2884,7 +2977,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
       currentStep,
       stepNames: steps.map((s) => s.title)
     }
-  ), formReadOnly && readOnlyMessage && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Alert, { title: readOnlyTitle, variant: "warning" }, readOnlyMessage), !addAlert && formError && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Alert, { title: errorTitle, variant: "danger" }, typeof formError === "string" ? formError : void 0), !addAlert && formSuccess && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Alert, { title: successTitle, variant: "success" }, formSuccess), isMultiStep && steps[currentStep] && steps[currentStep].render ? steps[currentStep].render({
+  ), showReadOnlyAlert && formReadOnly && readOnlyMessage && (renderReadOnlyAlert ? renderReadOnlyAlert({ title: readOnlyTitle, message: readOnlyMessage }) : /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Alert, { title: readOnlyTitle, variant: "warning" }, readOnlyMessage)), showInlineAlerts && !addAlert && formError && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Alert, { title: errorTitle, variant: "danger" }, typeof formError === "string" ? formError : void 0), showInlineAlerts && !addAlert && formSuccess && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Alert, { title: successTitle, variant: "success" }, formSuccess), isMultiStep && steps[currentStep] && steps[currentStep].render ? steps[currentStep].render({
     values: formValues,
     goNext: handleNext,
     goBack: handleBack,