hs-uix 1.0.3 → 1.1.0

package/dist/form.js

@@ -198,12 +198,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) {
@@ -212,23 +214,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)) {
@@ -434,8 +440,18 @@ var FormBuilder = (0, import_react.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,
@@ -447,6 +463,23 @@ var FormBuilder = (0, import_react.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";
@@ -685,7 +718,7 @@ var FormBuilder = (0, import_react.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;
@@ -712,9 +745,9 @@ var FormBuilder = (0, import_react.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_react.useCallback)(
     (fieldSubset) => {
@@ -730,7 +763,7 @@ var FormBuilder = (0, import_react.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;
@@ -738,14 +771,14 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
       }
       return { errors, hasErrors };
     },
-    [visibleFields, formValues, validateRepeaterField, fieldTypes]
+    [visibleFields, formValues, validateRepeaterField, fieldTypes, validationMessages]
   );
   const runAsyncValidation = (0, import_react.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);
@@ -1114,6 +1147,12 @@ var FormBuilder = (0, import_react.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_react.default.createElement(import_react.default.Fragment, null, rendered, renderFieldError(fieldError, field));
+  };
+  const renderFieldInner = (field) => {
     const fieldValue = formValues[field.name];
     const fieldError = formErrors[field.name] || null;
     const hasError = !!fieldError;
@@ -1180,7 +1219,7 @@ var FormBuilder = (0, import_react.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 || {}
     };
@@ -1250,7 +1289,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
           import_ui_extensions.CurrencyInput,
           {
             ...commonProps,
-            currency: field.currency || "USD",
+            currency: field.currency || defaultCurrency,
             value: fieldValue,
             min: field.min,
             max: field.max,
@@ -1428,8 +1467,8 @@ var FormBuilder = (0, import_react.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;
@@ -1463,7 +1502,7 @@ var FormBuilder = (0, import_react.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) => {
@@ -1581,7 +1620,7 @@ var FormBuilder = (0, import_react.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_react.default.createElement(import_ui_extensions.Tile, { key: `dep-${parentField.name}`, compact: true }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { format: { fontWeight: "demibold" } }, groupLabel, " ", tooltipMessage && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Link, { inline: true, variant: "dark", overlay: /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Tooltip, null, tooltipMessage) }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Icon, { name: "info" })))), renderFieldSubset(dependents)));
@@ -1881,7 +1920,7 @@ var FormBuilder = (0, import_react.forwardRef)(function FormBuilder2(props, ref)
       currentStep,
       stepNames: steps.map((s) => s.title)
     }
-  ), formReadOnly && readOnlyMessage && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Alert, { title: readOnlyTitle, variant: "warning" }, readOnlyMessage), !addAlert && formError && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Alert, { title: errorTitle, variant: "danger" }, typeof formError === "string" ? formError : void 0), !addAlert && formSuccess && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.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_react.default.createElement(import_ui_extensions.Alert, { title: readOnlyTitle, variant: "warning" }, readOnlyMessage)), showInlineAlerts && !addAlert && formError && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Alert, { title: errorTitle, variant: "danger" }, typeof formError === "string" ? formError : void 0), showInlineAlerts && !addAlert && formSuccess && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Alert, { title: successTitle, variant: "success" }, formSuccess), isMultiStep && steps[currentStep] && steps[currentStep].render ? steps[currentStep].render({
     values: formValues,
     goNext: handleNext,
     goBack: handleBack,

package/dist/form.mjs

@@ -202,12 +202,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) {
@@ -216,23 +218,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)) {
@@ -438,8 +444,18 @@ var FormBuilder = 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,
@@ -451,6 +467,23 @@ var FormBuilder = 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";
@@ -689,7 +722,7 @@ var FormBuilder = 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;
@@ -716,9 +749,9 @@ var FormBuilder = 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 = useCallback(
     (fieldSubset) => {
@@ -734,7 +767,7 @@ var FormBuilder = 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;
@@ -742,14 +775,14 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       }
       return { errors, hasErrors };
     },
-    [visibleFields, formValues, validateRepeaterField, fieldTypes]
+    [visibleFields, formValues, validateRepeaterField, fieldTypes, validationMessages]
   );
   const runAsyncValidation = 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);
@@ -1118,6 +1151,12 @@ var FormBuilder = 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__ */ React.createElement(React.Fragment, null, rendered, renderFieldError(fieldError, field));
+  };
+  const renderFieldInner = (field) => {
     const fieldValue = formValues[field.name];
     const fieldError = formErrors[field.name] || null;
     const hasError = !!fieldError;
@@ -1184,7 +1223,7 @@ var FormBuilder = 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 || {}
     };
@@ -1254,7 +1293,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
           CurrencyInput,
           {
             ...commonProps,
-            currency: field.currency || "USD",
+            currency: field.currency || defaultCurrency,
             value: fieldValue,
             min: field.min,
             max: field.max,
@@ -1432,8 +1471,8 @@ var FormBuilder = 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;
@@ -1467,7 +1506,7 @@ var FormBuilder = 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) => {
@@ -1585,7 +1624,7 @@ var FormBuilder = 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__ */ React.createElement(Tile, { key: `dep-${parentField.name}`, compact: true }, /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ React.createElement(Text, { format: { fontWeight: "demibold" } }, groupLabel, " ", tooltipMessage && /* @__PURE__ */ React.createElement(Link, { inline: true, variant: "dark", overlay: /* @__PURE__ */ React.createElement(Tooltip, null, tooltipMessage) }, /* @__PURE__ */ React.createElement(Icon, { name: "info" })))), renderFieldSubset(dependents)));
@@ -1885,7 +1924,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       currentStep,
       stepNames: steps.map((s) => s.title)
     }
-  ), formReadOnly && readOnlyMessage && /* @__PURE__ */ React.createElement(Alert, { title: readOnlyTitle, variant: "warning" }, readOnlyMessage), !addAlert && formError && /* @__PURE__ */ React.createElement(Alert, { title: errorTitle, variant: "danger" }, typeof formError === "string" ? formError : void 0), !addAlert && formSuccess && /* @__PURE__ */ React.createElement(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__ */ React.createElement(Alert, { title: readOnlyTitle, variant: "warning" }, readOnlyMessage)), showInlineAlerts && !addAlert && formError && /* @__PURE__ */ React.createElement(Alert, { title: errorTitle, variant: "danger" }, typeof formError === "string" ? formError : void 0), showInlineAlerts && !addAlert && formSuccess && /* @__PURE__ */ React.createElement(Alert, { title: successTitle, variant: "success" }, formSuccess), isMultiStep && steps[currentStep] && steps[currentStep].render ? steps[currentStep].render({
     values: formValues,
     goNext: handleNext,
     goBack: handleBack,