@bpmn-io/form-js-editor 1.25.0 → 1.26.0

package/dist/index.es.js

@@ -23,6 +23,46 @@ import dragula from '@bpmn-io/draggle';
 import { arrayMoveMutable } from 'array-move';
 import Big from 'big.js';
 
+/**
+ * @typedef { {
+ *   [key: string]: string;
+ * } } TranslateReplacements
+ */
+
+/**
+ * A simple translation stub to be used for multi-language support
+ * in diagrams. Can be easily replaced with a more sophisticated
+ * solution.
+ *
+ * @example
+ *
+ * ```javascript
+ * // use it inside any diagram component by injecting `translate`.
+ *
+ * function MyService(translate) {
+ *   alert(translate('HELLO {you}', { you: 'You!' }));
+ * }
+ * ```
+ *
+ * @param {string} template to interpolate
+ * @param {TranslateReplacements} [replacements] a map with substitutes
+ *
+ * @return {string} the translated string
+ */
+function translate(template, replacements) {
+  replacements = replacements || {};
+  return template.replace(/{([^}]+)}/g, function (_, key) {
+    return replacements[key] || '{' + key + '}';
+  });
+}
+
+/**
+ * @type { import('didi').ModuleDeclaration }
+ */
+var TranslateModule = {
+  translate: ['value', translate]
+};
+
 var FN_REF = '__fn';
 var DEFAULT_PRIORITY$4 = 1000;
 var slice = Array.prototype.slice;
@@ -617,6 +657,10 @@ class FormFieldRegistry extends FormFieldRegistry$1 {
   }
 }
 
+/**
+ * @typedef { import('diagram-js/lib/i18n/translate/translate').default } Translate
+ */
+
 const MAX_COLUMNS_PER_ROW = 16;
 const MAX_COLUMNS = 16;
 const MIN_COLUMNS = 2;
@@ -627,22 +671,28 @@ class FormLayoutValidator {
    *
    * @param { import('./FormLayouter').FormLayouter } formLayouter
    * @param { import('./FormFieldRegistry').FormFieldRegistry } formFieldRegistry
+   * @param {Translate} translate
    */
-  constructor(formLayouter, formFieldRegistry) {
+  constructor(formLayouter, formFieldRegistry, translate) {
     this._formLayouter = formLayouter;
     this._formFieldRegistry = formFieldRegistry;
+    this._translate = translate;
   }
   validateField(field = {}, columns, row) {
     // allow empty (auto columns)
     if (Number.isInteger(columns)) {
       // allow minimum cols
       if (columns < MIN_COLUMNS) {
-        return `Minimum ${MIN_COLUMNS} columns are allowed`;
+        return this._translate('Minimum {value} columns are allowed', {
+          value: MIN_COLUMNS.toString()
+        });
       }
 
       // allow maximum cols
       if (columns > MAX_COLUMNS) {
-        return `Maximum ${MAX_COLUMNS} columns are allowed`;
+        return this._translate('Maximum {value} columns are allowed', {
+          value: MAX_COLUMNS.toString()
+        });
       }
     }
     if (!row) {
@@ -668,15 +718,19 @@ class FormLayoutValidator {
 
     // do not allow overflows
     if (sumColumns > MAX_COLUMNS_PER_ROW || sumAutoCols > 0 && sumColumns > calculateMaxColumnsWithAuto(sumAutoCols) || columns === MAX_COLUMNS_PER_ROW && sumFields > 1) {
-      return `New value exceeds the maximum of ${MAX_COLUMNS_PER_ROW} columns per row`;
+      return this._translate('New value exceeds the maximum of {value} columns per row', {
+        value: MAX_COLUMNS_PER_ROW.toString()
+      });
     }
     if (sumFields > MAX_FIELDS_PER_ROW) {
-      return `Maximum ${MAX_FIELDS_PER_ROW} fields per row are allowed`;
+      return this._translate('Maximum {value} fields per row are allowed', {
+        value: MAX_FIELDS_PER_ROW.toString()
+      });
     }
     return null;
   }
 }
-FormLayoutValidator.$inject = ['formLayouter', 'formFieldRegistry'];
+FormLayoutValidator.$inject = ['formLayouter', 'formFieldRegistry', 'translate'];
 
 // helper //////////////////////
 
@@ -1006,6 +1060,7 @@ function EditorText(props) {
   const Icon = iconsByType('text');
   const templating = useService('templating');
   const expressionLanguage = useService('expressionLanguage');
+  const translate = useService('translate');
   if (!text || !text.trim()) {
     return jsx("div", {
       class: editorFormFieldClasses(type),
@@ -1013,7 +1068,7 @@ function EditorText(props) {
         class: "fjs-form-field-placeholder",
         children: [jsx(Icon, {
           viewBox: "0 0 54 54"
-        }), "Text view is empty"]
+        }), translate('Text view is empty')]
       })
     });
   }
@@ -1024,7 +1079,7 @@ function EditorText(props) {
         class: "fjs-form-field-placeholder",
         children: [jsx(Icon, {
           viewBox: "0 0 54 54"
-        }), "Text view is populated by an expression"]
+        }), translate('Text view is populated by an expression')]
       })
     });
   }
@@ -1035,7 +1090,7 @@ function EditorText(props) {
         class: "fjs-form-field-placeholder",
         children: [jsx(Icon, {
           viewBox: "0 0 54 54"
-        }), "Text view is templated"]
+        }), translate('Text view is templated')]
       })
     });
   }
@@ -1054,6 +1109,7 @@ function EditorHtml(props) {
   const Icon = iconsByType(type);
   const templating = useService('templating');
   const expressionLanguage = useService('expressionLanguage');
+  const translate = useService('translate');
   if (!content || !content.trim()) {
     return jsx("div", {
       class: editorFormFieldClasses(type),
@@ -1061,7 +1117,7 @@ function EditorHtml(props) {
         class: "fjs-form-field-placeholder",
         children: [jsx(Icon, {
           viewBox: "0 0 54 54"
-        }), "Html view is empty"]
+        }), translate('Html view is empty')]
       })
     });
   }
@@ -1072,7 +1128,7 @@ function EditorHtml(props) {
         class: "fjs-form-field-placeholder",
         children: [jsx(Icon, {
           viewBox: "0 0 54 54"
-        }), "Html view is populated by an expression"]
+        }), translate('Html view is populated by an expression')]
       })
     });
   }
@@ -1083,7 +1139,7 @@ function EditorHtml(props) {
         class: "fjs-form-field-placeholder",
         children: [jsx(Icon, {
           viewBox: "0 0 54 54"
-        }), "Html view is templated"]
+        }), translate('Html view is templated')]
       })
     });
   }
@@ -1101,16 +1157,23 @@ function EditorTable(props) {
     id,
     label
   } = props.field;
+  const translate = useService('translate');
   const shouldUseMockColumns = typeof columnsExpression === 'string' && columnsExpression.length > 0 || Array.isArray(columns) && columns.length === 0;
   const editorColumns = shouldUseMockColumns ? [{
     key: '1',
-    label: 'Column 1'
+    label: translate('Column {index}', {
+      index: '1'
+    })
   }, {
     key: '2',
-    label: 'Column 2'
+    label: translate('Column {index}', {
+      index: '2'
+    })
   }, {
     key: '3',
-    label: 'Column 3'
+    label: translate('Column {index}', {
+      index: '3'
+    })
   }] : columns;
   const prefixId = `fjs-form-${id}`;
   return jsxs("div", {
@@ -1193,6 +1256,7 @@ function EditorDocumentPreview(props) {
     field,
     domId
   } = props;
+  const translate = useService('translate');
   const {
     label
   } = field;
@@ -1211,7 +1275,7 @@ function EditorDocumentPreview(props) {
           width: "32",
           height: "24",
           viewBox: "0 0 56 56"
-        }), "Document preview"]
+        }), translate('Document preview')]
       })
     })]
   });
@@ -1510,6 +1574,7 @@ function PaletteEntry(props) {
   } = props;
   const modeling = useService('modeling');
   const formEditor = useService('formEditor');
+  const translate = useService('translate');
   const Icon = getPaletteIcon({
     icon,
     iconUrl,
@@ -1535,7 +1600,9 @@ function PaletteEntry(props) {
     type: "button",
     class: "fjs-palette-field fjs-drag-copy fjs-no-drop",
     "data-field-type": type,
-    title: `Create ${getIndefiniteArticle(type)} ${label} element`,
+    title: translate('Create {label} element', {
+      label: translate(label)
+    }),
     onKeyDown: onKeyDown,
     children: [Icon ? jsx(Icon, {
       class: "fjs-palette-field-icon",
@@ -1544,20 +1611,11 @@ function PaletteEntry(props) {
       viewBox: "0 0 54 54"
     }) : null, jsx("span", {
       class: "fjs-palette-field-text",
-      children: label
+      children: translate(label)
     })]
   });
 }
 
-// helpers ///////////
-
-function getIndefiniteArticle(type) {
-  if (['image'].includes(type)) {
-    return 'an';
-  }
-  return 'a';
-}
-
 const PALETTE_GROUPS = [{
   label: 'Input',
   id: 'basic-input'
@@ -1576,6 +1634,7 @@ const PALETTE_GROUPS = [{
 }];
 function Palette(props) {
   const formFields = useService('formFields');
+  const translate = useService('translate');
   const initialPaletteEntries = useRef(collectPaletteEntries(formFields));
   const [paletteEntries, setPaletteEntries] = useState(initialPaletteEntries.current);
   const [searchTerm, setSearchTerm] = useState('');
@@ -1591,10 +1650,10 @@ function Palette(props) {
     if (!simplifiedSearchTerm) {
       return true;
     }
-    const simplifiedEntryLabel = simplifyString(entry.label);
+    const simplifiedEntryLabel = simplifyString(translate(entry.label));
     const simplifiedEntryType = simplifyString(entry.type);
     return simplifiedEntryLabel.includes(simplifiedSearchTerm) || simplifiedEntryType.includes(simplifiedSearchTerm);
-  }, [searchTerm, simplifyString]);
+  }, [searchTerm, simplifyString, translate]);
 
   // filter entries on search change
   useEffect(() => {
@@ -1612,8 +1671,8 @@ function Palette(props) {
     class: "fjs-palette",
     children: [jsx("div", {
       class: "fjs-palette-header",
-      title: "Components",
-      children: "Components"
+      title: translate('Components'),
+      children: translate('Components')
     }), jsxs("div", {
       class: "fjs-palette-search-container",
       children: [jsx("span", {
@@ -1623,12 +1682,12 @@ function Palette(props) {
         class: "fjs-palette-search",
         ref: inputRef,
         type: "text",
-        placeholder: "Search components",
+        placeholder: translate('Search components'),
         value: searchTerm,
         onInput: handleInput
       }), searchTerm && jsx("button", {
         type: "button",
-        title: "Clear content",
+        title: translate('Clear content'),
         class: "fjs-palette-search-clear",
         onClick: handleClear,
         children: jsx(SvgClose, {})
@@ -1644,7 +1703,7 @@ function Palette(props) {
         "data-group-id": id,
         children: [jsx("span", {
           class: "fjs-palette-group-title",
-          children: label
+          children: translate(label)
         }), jsx("div", {
           class: "fjs-palette-fields fjs-drag-container fjs-no-drop",
           children: entries.map(entry => {
@@ -1656,7 +1715,7 @@ function Palette(props) {
         })]
       }, id)), groups.length == 0 && jsx("div", {
         class: "fjs-palette-no-entries",
-        children: "No components found."
+        children: translate('No components found.')
       })]
     }), jsx("div", {
       class: "fjs-palette-footer",
@@ -5960,7 +6019,8 @@ var index = {
 function getPropertiesPanelHeaderProvider(options = {}) {
   const {
     getDocumentationRef,
-    formFields
+    formFields,
+    translate
   } = options;
   return {
     getElementLabel: field => {
@@ -5996,10 +6056,10 @@ function getPropertiesPanelHeaderProvider(options = {}) {
         type
       } = field;
       if (type === 'default') {
-        return 'Form';
+        return translate('Form');
       }
       const fieldDefinition = formFields.get(type).config;
-      return fieldDefinition.name || fieldDefinition.label || type;
+      return translate(fieldDefinition.name || fieldDefinition.label || type);
     },
     getDocumentationRef
   };
@@ -6041,6 +6101,7 @@ function PropertiesPanel() {
   const formFields = useService('formFields');
   const propertiesPanel = useService('propertiesPanel');
   const propertiesPanelConfig = useService('config.propertiesPanel') || EMPTY;
+  const translate = useService('translate');
   const {
     feelPopupContainer
   } = propertiesPanelConfig;
@@ -6092,8 +6153,9 @@ function PropertiesPanel() {
   }, [providers, selectedFormField, editField]);
   const PropertiesPanelHeaderProvider = useMemo(() => getPropertiesPanelHeaderProvider({
     getDocumentationRef: propertiesPanelConfig.getDocumentationRef,
-    formFields
-  }), [formFields, propertiesPanelConfig]);
+    formFields,
+    translate
+  }), [formFields, propertiesPanelConfig, translate]);
   return (
     // eslint-disable-next-line react/no-unknown-property
     jsx("div", {
@@ -6650,26 +6712,29 @@ function ContextPadContent(props) {
     }, entryId))
   });
 }
-function EmptyGroup() {
+function EmptyGroup({
+  translate
+}) {
   return jsx("div", {
     class: "fjs-empty-component",
     children: jsx("span", {
       class: "fjs-empty-component-text",
-      children: "Drag and drop components here."
+      children: translate('Drag and drop components here.')
     })
   });
 }
 function EmptyForm() {
+  const translate = useService('translate');
   return jsx("div", {
     class: "fjs-empty-editor",
     children: jsxs("div", {
       class: "fjs-empty-editor-card",
       children: [jsx(SvgEmptyForm, {}), jsx("h2", {
-        children: "Build your form"
+        children: translate('Build your form')
       }), jsx("span", {
-        children: "Drag and drop components here to start designing."
+        children: translate('Drag and drop components here to start designing.')
       }), jsx("span", {
-        children: "Use the preview window to test your form."
+        children: translate('Use the preview window to test your form.')
       }), jsx(Slot, {
         name: "editor-empty-state__footer"
       })]
@@ -6677,8 +6742,11 @@ function EmptyForm() {
   });
 }
 function Empty(props) {
+  const translate = useService('translate');
   if (['group', 'dynamiclist'].includes(props.field.type)) {
-    return jsx(EmptyGroup, {});
+    return jsx(EmptyGroup, {
+      translate: translate
+    });
   }
   if (props.field.type === 'default') {
     return jsx(EmptyForm, {});
@@ -7261,10 +7329,11 @@ FormFieldContextActions.$inject = ['eventBus'];
  * @param {import('../../render/EditorFormFields').EditorFormFields} formFields
  */
 class DeleteActionProvider {
-  constructor(formFieldContextActions, modeling, formFieldRegistry, formFields) {
+  constructor(formFieldContextActions, modeling, formFieldRegistry, formFields, translate) {
     this._modeling = modeling;
     this._formFieldRegistry = formFieldRegistry;
     this._formFields = formFields;
+    this._translate = translate;
     formFieldContextActions.registerProvider(500, this);
   }
 
@@ -7279,6 +7348,7 @@ class DeleteActionProvider {
     const modeling = this._modeling;
     const formFieldRegistry = this._formFieldRegistry;
     const formFields = this._formFields;
+    const translate = this._translate;
     return {
       delete: {
         action: event => {
@@ -7287,14 +7357,14 @@ class DeleteActionProvider {
           const index = getFormFieldIndex(parentField, formField);
           modeling.removeFormField(formField, parentField, index);
         },
-        title: getRemoveButtonTitle(formField, formFields),
+        title: getRemoveButtonTitle(formField, formFields, translate),
         icon: 'delete',
         group: 'actions'
       }
     };
   }
 }
-DeleteActionProvider.$inject = ['formFieldContextActions', 'modeling', 'formFieldRegistry', 'formFields'];
+DeleteActionProvider.$inject = ['formFieldContextActions', 'modeling', 'formFieldRegistry', 'formFields', 'translate'];
 
 // helpers //////////
 
@@ -7312,12 +7382,14 @@ function getFormFieldIndex(parent, formField) {
 function findPaletteEntry(type, formFields) {
   return collectPaletteEntries(formFields).find(entry => entry.type === type);
 }
-function getRemoveButtonTitle(formField, formFields) {
+function getRemoveButtonTitle(formField, formFields, translate) {
   const entry = findPaletteEntry(formField.type, formFields);
   if (!entry) {
-    return 'Remove form field';
+    return translate('Remove form field');
   }
-  return `Remove ${entry.label}`;
+  return translate('Remove {label}', {
+    label: translate(entry.label)
+  });
 }
 
 const ContextPadModule = {
@@ -9996,6 +10068,7 @@ function Action(props) {
     id
   } = props;
   const path = ['action'];
+  const translate = useService('translate');
   const getValue = () => {
     return get(field, path, '');
   };
@@ -10003,10 +10076,10 @@ function Action(props) {
     return editField(field, path, value);
   };
   const getOptions = () => [{
-    label: 'Submit',
+    label: translate('Submit'),
     value: 'submit'
   }, {
-    label: 'Reset',
+    label: translate('Reset'),
     value: 'reset'
   }];
   return SelectEntry({
@@ -10014,7 +10087,7 @@ function Action(props) {
     getOptions,
     getValue,
     id,
-    label: 'Action',
+    label: translate('Action'),
     setValue
   });
 }
@@ -10042,6 +10115,7 @@ function AltText(props) {
     id
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const variables = useVariables().map(name => ({
     name
   }));
@@ -10058,8 +10132,8 @@ function AltText(props) {
     feel: 'optional',
     getValue,
     id,
-    label: 'Alternative text',
-    tooltip: 'Descriptive text for screen reader accessibility.',
+    label: translate('Alternative text'),
+    tooltip: translate('Descriptive text for screen reader accessibility.'),
     setValue,
     singleLine: true,
     variables
@@ -10088,6 +10162,7 @@ function Columns(props) {
     id
   } = props;
   useService('debounce');
+  const translate = useService('translate');
   const formLayoutValidator = useService('formLayoutValidator');
   const validate = useCallback(value => {
     return formLayoutValidator.validateField(field, value ? parseInt(value) : null);
@@ -10105,7 +10180,7 @@ function Columns(props) {
   };
   const getOptions = () => {
     return [{
-      label: 'Auto',
+      label: translate('Auto'),
       value: AUTO_OPTION_VALUE
     },
     // todo(pinussilvestrus): make options dependant on field type
@@ -10115,7 +10190,7 @@ function Columns(props) {
   return SelectEntry({
     element: field,
     id,
-    label: 'Columns',
+    label: translate('Columns'),
     getOptions,
     getValue,
     setValue,
@@ -10252,6 +10327,7 @@ function Description(props) {
     id
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const variables = useVariables().map(name => ({
     name
   }));
@@ -10267,7 +10343,7 @@ function Description(props) {
     element: field,
     getValue,
     id,
-    label: 'Field description',
+    label: translate('Field description'),
     singleLine: true,
     setValue,
     variables
@@ -10278,8 +10354,10 @@ const EMPTY_OPTION = '';
 function DefaultValueEntry(props) {
   const {
     editField,
-    field
+    field,
+    getService
   } = props;
+  const translate = getService('translate');
   const {
     type
   } = field;
@@ -10297,7 +10375,7 @@ function DefaultValueEntry(props) {
     editField,
     field,
     id: 'defaultValue',
-    label: 'Default value'
+    label: translate('Default value')
   };
   entries.push({
     ...defaultValueBase,
@@ -10341,16 +10419,17 @@ function DefaultValueCheckbox(props) {
     id,
     label
   } = props;
+  const translate = useService('translate');
   const {
     defaultValue
   } = field;
   const path = ['defaultValue'];
   const getOptions = () => {
     return [{
-      label: 'Checked',
+      label: translate('Checked'),
       value: 'true'
     }, {
-      label: 'Not checked',
+      label: translate('Not checked'),
       value: 'false'
     }];
   };
@@ -10381,6 +10460,7 @@ function DefaultValueNumber(props) {
     serializeToString = false
   } = field;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const path = ['defaultValue'];
   const getValue = e => {
     let value = get(field, path);
@@ -10405,12 +10485,14 @@ function DefaultValueNumber(props) {
       return;
     }
     if (!isValidNumber(value)) {
-      return 'Should be a valid number';
+      return translate('Should be a valid number.');
     }
     if (decimalDigitsSet && countDecimals(value) > decimalDigits) {
-      return `Should not contain more than ${decimalDigits} decimal digits`;
+      return translate('Should not contain more than {value} decimal digits.', {
+        value: decimalDigits.toString()
+      });
     }
-  }, [decimalDigitsSet, decimalDigits]);
+  }, [decimalDigitsSet, decimalDigits, translate]);
   return TextfieldEntry({
     debounce,
     label,
@@ -10432,10 +10514,11 @@ function DefaultValueSingleSelect(props) {
     defaultValue = EMPTY_OPTION,
     values = []
   } = field;
+  const translate = useService('translate');
   const path = ['defaultValue'];
   const getOptions = () => {
     return [{
-      label: '<none>',
+      label: translate('<none>'),
       value: EMPTY_OPTION
     }, ...values];
   };
@@ -10521,16 +10604,19 @@ function parseBooleanToString(value) {
 function DisabledEntry(props) {
   const {
     editField,
-    field
+    field,
+    getService
   } = props;
   const entries = [];
+  const translate = getService('translate');
   entries.push({
     id: 'disabled',
     component: Disabled,
     editField: editField,
     field: field,
     isEdited: isEdited$7,
-    isDefaultVisible: field => INPUTS.includes(field.type)
+    isDefaultVisible: field => INPUTS.includes(field.type),
+    translate: translate
   });
   return entries;
 }
@@ -10538,7 +10624,8 @@ function Disabled(props) {
   const {
     editField,
     field,
-    id
+    id,
+    translate
   } = props;
   const path = ['disabled'];
   const getValue = () => {
@@ -10551,8 +10638,8 @@ function Disabled(props) {
     element: field,
     getValue,
     id,
-    label: 'Disabled',
-    tooltip: 'Disable this field when it should not be interactive for end-users. Its data will not be submitted. This setting takes precedence over read-only.',
+    label: translate('Disabled'),
+    tooltip: translate('Disable this field when it should not be interactive for end-users. Its data will not be submitted. This setting takes precedence over read-only.'),
     inline: true,
     setValue
   });
@@ -10582,6 +10669,7 @@ function Id(props) {
   } = props;
   const formFieldRegistry = useService('formFieldRegistry');
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const path = ['id'];
   const getValue = () => {
     return get(field, path, '');
@@ -10594,20 +10682,20 @@ function Id(props) {
   };
   const validate = useCallback(value => {
     if (typeof value !== 'string' || value.length === 0) {
-      return 'Must not be empty.';
+      return translate('Must not be empty.');
     }
     const assigned = formFieldRegistry._ids.assigned(value);
     if (assigned && assigned !== field) {
-      return 'Must be unique.';
+      return translate('Must be unique.');
     }
-    return validateId(value) || null;
-  }, [formFieldRegistry, field]);
+    return validateId(value, translate) || null;
+  }, [formFieldRegistry, field, translate]);
   return TextfieldEntry({
     debounce,
     element: field,
     getValue,
     id,
-    label: 'ID',
+    label: translate('ID'),
     setValue,
     validate
   });
@@ -10622,15 +10710,15 @@ const QNAME_REGEX = /^([a-z][\w-.]*:)?[a-z_][\w-.]*$/i;
 
 // for ID validation as per BPMN Schema (QName - Namespace)
 const ID_REGEX = /^[a-z_][\w-.]*$/i;
-function validateId(idValue) {
+function validateId(idValue, translate) {
   if (containsSpace(idValue)) {
-    return 'Must not contain spaces.';
+    return translate('Must not contain spaces.');
   }
   if (!ID_REGEX.test(idValue)) {
     if (QNAME_REGEX.test(idValue)) {
-      return 'Must not contain prefix.';
+      return translate('Must not contain prefix.');
     }
-    return 'Must be a valid QName.';
+    return translate('Must be a valid QName.');
   }
 }
 function containsSpace(value) {
@@ -10668,6 +10756,7 @@ function Key$2(props) {
   } = props;
   const pathRegistry = useService('pathRegistry');
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const path = ['key'];
   const getValue = () => {
     return get(field, path, '');
@@ -10683,16 +10772,16 @@ function Key$2(props) {
       return null;
     }
     if (!isString(value) || value.length === 0) {
-      return 'Must not be empty.';
+      return translate('Must not be empty.');
     }
     if (!isValidDotPath(value)) {
-      return 'Must be a variable or a dot separated path.';
+      return translate('Must be a variable or a dot separated path.');
     }
     if (hasIntegerPathSegment(value)) {
-      return 'Must not contain numerical path segments.';
+      return translate('Must not contain numerical path segments.');
     }
     if (isProhibitedPath(value)) {
-      return 'Must not be a prohibited path.';
+      return translate('Must not be a prohibited path.');
     }
     const replacements = {
       [field.id]: value.split('.')
@@ -10712,16 +10801,16 @@ function Key$2(props) {
       isClosed: true,
       claimerId: field.id
     });
-    return canClaim ? null : 'Must not conflict with other key/path assignments.';
-  }, [field, pathRegistry]);
+    return canClaim ? null : translate('Must not conflict with other key/path assignments.');
+  }, [field, pathRegistry, translate]);
   return TextfieldEntry({
     debounce,
-    description: 'Binds to a form variable',
+    description: translate('Binds to a form variable'),
     element: field,
     getValue,
     id,
-    label: 'Key',
-    tooltip: 'Use a unique "key" to link the form element and the related input/output data. When dealing with nested data, break it down in the user task\'s input mapping before using it.',
+    label: translate('Key'),
+    tooltip: translate('Use a unique "key" to link the form element and the related input/output data. When dealing with nested data, break it down in the user task\'s input mapping before using it.'),
     setValue,
     validate
   });
@@ -10760,6 +10849,7 @@ function Path(props) {
   const fieldConfig = useService('formFields').get(field.type).config;
   const isRepeating = fieldConfig.repeatable && field.isRepeating;
   const path = ['path'];
+  const translate = useService('translate');
   const getValue = () => {
     return get(field, path, '');
   };
@@ -10771,7 +10861,7 @@ function Path(props) {
   };
   const validate = useCallback(value => {
     if (!value && isRepeating) {
-      return 'Must not be empty';
+      return translate('Must not be empty');
     }
 
     // Early return for empty value in non-repeating cases or if the field path hasn't changed
@@ -10781,18 +10871,18 @@ function Path(props) {
 
     // Validate dot-separated path format
     if (!isValidDotPath(value)) {
-      const msg = isRepeating ? 'Must be a variable or a dot-separated path' : 'Must be empty, a variable or a dot-separated path';
+      const msg = isRepeating ? translate('Must be a variable or a dot-separated path.') : translate('Must be empty, a variable or a dot-separated path.');
       return msg;
     }
 
     // Check for integer segments in the path
     if (hasIntegerPathSegment(value)) {
-      return 'Must not contain numerical path segments.';
+      return translate('Must not contain numerical path segments.');
     }
 
     // Check for special prohibited paths
     if (isProhibitedPath(value)) {
-      return 'Must not be a prohibited path.';
+      return translate('Must not be a prohibited path.');
     }
 
     // Check for path collisions
@@ -10814,20 +10904,20 @@ function Path(props) {
       });
     });
     if (!canClaim) {
-      return 'Must not cause two binding paths to collide';
+      return translate('Must not cause two binding paths to collide');
     }
 
     // If all checks pass
     return null;
-  }, [field, isRepeating, pathRegistry]);
-  const tooltip = isRepeating ? 'Routes the children of this component into a form variable, may be left empty to route at the root level.' : 'Routes the children of this component into a form variable.';
+  }, [field, isRepeating, pathRegistry, translate]);
+  const tooltip = isRepeating ? translate('Routes the children of this component into a form variable, may be left empty to route at the root level.') : translate('Routes the children of this component into a form variable.');
   return TextfieldEntry({
     debounce,
-    description: 'Where the child variables of this component are pathed to.',
+    description: translate('Where the child variables of this component are pathed to.'),
     element: field,
     getValue,
     id,
-    label: 'Path',
+    label: translate('Path'),
     tooltip,
     setValue,
     validate
@@ -10967,6 +11057,7 @@ const SimpleRangeIntegerEntry = props => {
     max = Number.MAX_SAFE_INTEGER
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const getValue = () => {
     const value = get(field, path);
     const isValid = isValidNumber(value) && Number.isInteger(value);
@@ -10983,15 +11074,19 @@ const SimpleRangeIntegerEntry = props => {
       return;
     }
     if (!Number.isInteger(Number(value))) {
-      return 'Should be an integer.';
+      return translate('Should be an integer.');
     }
     if (Big(value).cmp(min) < 0) {
-      return `Should be at least ${min}.`;
+      return translate('Should be at least {value}.', {
+        value: min.toString()
+      });
     }
     if (Big(value).cmp(max) > 0) {
-      return `Should be at most ${max}.`;
+      return translate('Should be at most {value}.', {
+        value: max.toString()
+      });
     }
-  }, [min, max]);
+  }, [min, max, translate]);
   return TextfieldEntry({
     debounce,
     label,
@@ -11005,7 +11100,8 @@ const SimpleRangeIntegerEntry = props => {
 
 function GroupAppearanceEntry(props) {
   const {
-    field
+    field,
+    translate
   } = props;
   const {
     type
@@ -11016,7 +11112,7 @@ function GroupAppearanceEntry(props) {
   const entries = [simpleBoolEntryFactory({
     id: 'showOutline',
     path: ['showOutline'],
-    label: 'Show outline',
+    label: translate('Show outline'),
     isTrueDefault: true,
     props
   })];
@@ -11069,6 +11165,7 @@ function Label$2(props) {
     id
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const variables = useVariables().map(name => ({
     name
   }));
@@ -11079,7 +11176,7 @@ function Label$2(props) {
   const setValue = value => {
     return editField(field, path, value || '');
   };
-  const label = getLabelText(field.type);
+  const label = translate(getLabelText(field.type));
   return FeelTemplatingEntry({
     debounce,
     element: field,
@@ -11098,6 +11195,7 @@ function DateLabel(props) {
     id
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const variables = useVariables().map(name => ({
     name
   }));
@@ -11113,7 +11211,7 @@ function DateLabel(props) {
     element: field,
     getValue,
     id,
-    label: 'Date label',
+    label: translate('Date label'),
     singleLine: true,
     setValue,
     variables
@@ -11126,6 +11224,7 @@ function TimeLabel(props) {
     id
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const variables = useVariables().map(name => ({
     name
   }));
@@ -11141,7 +11240,7 @@ function TimeLabel(props) {
     element: field,
     getValue,
     id,
-    label: 'Time label',
+    label: translate('Time label'),
     singleLine: true,
     setValue,
     variables
@@ -11169,6 +11268,10 @@ function getLabelText(type) {
   }
 }
 
+/**
+ * @typedef { import('diagram-js/lib/i18n/translate/translate').default } Translate
+ */
+
 function HeightEntry(props) {
   const {
     editField,
@@ -11204,6 +11307,7 @@ function Height(props) {
     id
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const getValue = e => get(field, ['height'], null);
   const setValue = (value, error) => {
     if (error) {
@@ -11214,12 +11318,12 @@ function Height(props) {
   return NumberFieldEntry({
     debounce,
     description,
-    label: 'Height',
+    label: translate('Height'),
     element: field,
     id,
     getValue,
     setValue,
-    validate: validate$9
+    validate: useCallback(value => validate$9(value, translate), [translate])
   });
 }
 
@@ -11227,24 +11331,26 @@ function Height(props) {
 
 /**
  * @param {number|void} value
+ * @param {Translate} translate
  * @returns {string|null}
  */
-const validate$9 = value => {
+const validate$9 = (value, translate) => {
   if (typeof value !== 'number') {
-    return 'A number is required.';
+    return translate('A number is required.');
   }
   if (!Number.isInteger(value)) {
-    return 'Should be an integer.';
+    return translate('Should be an integer.');
   }
   if (value < 1) {
-    return 'Should be greater than zero.';
+    return translate('Should be greater than zero.');
   }
 };
 
 function IFrameHeightEntry(props) {
+  const translate = props.getService('translate');
   return [...HeightEntry({
     ...props,
-    description: 'Height of the container in pixels.',
+    description: translate('Height of the container in pixels.'),
     isDefaultVisible: field => field.type === 'iframe'
   })];
 }
@@ -11273,6 +11379,7 @@ function Url(props) {
     id
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const variables = useVariables().map(name => ({
     name
   }));
@@ -11289,29 +11396,29 @@ function Url(props) {
     feel: 'optional',
     getValue,
     id,
-    label: 'URL',
+    label: translate('URL'),
     setValue,
     singleLine: true,
-    tooltip: getTooltip$1(),
-    validate: validate$8,
+    tooltip: getTooltip$1(translate),
+    validate: useCallback(value => validate$8(value, translate), [translate]),
     variables
   });
 }
 
 // helper //////////////////////
 
-function getTooltip$1() {
+function getTooltip$1(translate) {
   return jsxs(Fragment$1, {
     children: [jsx("p", {
-      children: "Enter a HTTPS URL to a source or populate it dynamically via a template or an expression (e.g., to pass a value from the variable)."
+      children: translate('Enter a HTTPS URL to a source or populate it dynamically via a template or an expression (e.g., to pass a value from the variable).')
     }), jsx("p", {
-      children: "Please make sure that the URL is safe as it might impose security risks."
+      children: translate('Please make sure that the URL is safe as it might impose security risks.')
     }), jsxs("p", {
-      children: ["Not all external sources can be displayed in the iFrame. Read more about it in the", ' ', jsx("a", {
+      children: [translate('Not all external sources can be displayed in the iFrame. Read more about it in the'), ' ', jsx("a", {
         target: "_blank",
         href: "https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options",
         rel: "noreferrer",
-        children: "X-FRAME-OPTIONS documentation"
+        children: translate('X-FRAME-OPTIONS documentation')
       }), "."]
     })]
   });
@@ -11319,14 +11426,15 @@ function getTooltip$1() {
 
 /**
  * @param {string|void} value
+ * @param {Translate} translate
  * @returns {string|null}
  */
-const validate$8 = value => {
+const validate$8 = (value, translate) => {
   if (!value || value.startsWith('=')) {
     return;
   }
   if (!HTTPS_PATTERN.test(value)) {
-    return 'For security reasons the URL must start with "https".';
+    return translate('For security reasons the URL must start with "https".');
   }
 };
 
@@ -11353,6 +11461,7 @@ function Source$1(props) {
     id
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const variables = useVariables().map(name => ({
     name
   }));
@@ -11365,13 +11474,13 @@ function Source$1(props) {
   };
   return FeelTemplatingEntry({
     debounce,
-    description: 'Expression or static value (link/data URI)',
+    description: translate('Expression or static value (link/data URI)'),
     element: field,
     feel: 'optional',
     getValue,
     id,
-    label: 'Image source',
-    tooltip: 'Link referring to a hosted image, or use a data URI directly to embed image data into the form.',
+    label: translate('Image source'),
+    tooltip: translate('Link referring to a hosted image, or use a data URI directly to embed image data into the form.'),
     setValue,
     singleLine: true,
     variables
@@ -11401,6 +11510,7 @@ function Text(props) {
     id
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const variables = useVariables().map(name => ({
     name
   }));
@@ -11413,24 +11523,31 @@ function Text(props) {
   };
   return FeelTemplatingEntry({
     debounce,
-    description: description$2,
+    description: description$2(translate),
     element: field,
     getValue,
     id,
-    label: 'Text',
+    label: translate('Text'),
     hostLanguage: 'markdown',
     setValue,
     variables
   });
 }
-const description$2 = jsxs(Fragment$1, {
-  children: ["Supports markdown and templating.", ' ', jsx("a", {
-    href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-text/",
-    target: "_blank",
-    rel: "noreferrer",
-    children: "Learn more"
-  })]
-});
+
+/**
+ * @param {Translate} translate
+ * @returns An Element with the description
+ */
+const description$2 = translate => {
+  return jsxs(Fragment$1, {
+    children: [translate('Supports markdown and templating.'), ' ', jsx("a", {
+      href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-text/",
+      target: "_blank",
+      rel: "noreferrer",
+      children: translate('Learn more')
+    })]
+  });
+};
 
 function HtmlEntry(props) {
   const {
@@ -11454,6 +11571,7 @@ function Content(props) {
     id
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const variables = useVariables().map(name => ({
     name
   }));
@@ -11466,11 +11584,11 @@ function Content(props) {
   };
   return FeelTemplatingEntry({
     debounce,
-    description: description$1,
+    description: description$1(translate),
     element: field,
     getValue,
     id,
-    label: 'Content',
+    label: translate('Content'),
     hostLanguage: 'html',
     validate: validate$7,
     setValue,
@@ -11480,14 +11598,16 @@ function Content(props) {
 
 // helpers //////////
 
-const description$1 = jsxs(Fragment$1, {
-  children: ["Supports HTML, styling, and templating. Styles are automatically scoped to the HTML component.", ' ', jsx("a", {
-    href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-html/",
-    target: "_blank",
-    rel: "noreferrer",
-    children: "Learn more"
-  })]
-});
+const description$1 = translate => {
+  return jsxs(Fragment$1, {
+    children: [translate('Supports HTML, styling, and templating. Styles are automatically scoped to the HTML component.'), ' ', jsx("a", {
+      href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-html/",
+      target: "_blank",
+      rel: "noreferrer",
+      children: translate('Learn more')
+    })]
+  });
+};
 
 /**
  * @param {string|void} value
@@ -11505,6 +11625,10 @@ const validate$7 = value => {
   }
 };
 
+/**
+ * @typedef { import('diagram-js/lib/i18n/translate/translate').default } Translate
+ */
+
 function NumberEntries(props) {
   const {
     editField,
@@ -11537,6 +11661,7 @@ function NumberDecimalDigits(props) {
     id
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const getValue = e => get(field, ['decimalDigits']);
   const setValue = (value, error) => {
     if (error) {
@@ -11546,13 +11671,13 @@ function NumberDecimalDigits(props) {
   };
   return NumberFieldEntry({
     debounce,
-    label: 'Decimal digits',
+    label: translate('Decimal digits'),
     element: field,
     step: 'any',
     getValue,
     id,
     setValue,
-    validate: validateNumberEntries
+    validate: useCallback(value => validateNumberEntries(value, translate), [translate])
   });
 }
 function NumberArrowStep(props) {
@@ -11565,6 +11690,7 @@ function NumberArrowStep(props) {
     decimalDigits
   } = field;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const getValue = e => {
     let value = get(field, ['increment']);
     if (!isValidNumber(value)) return null;
@@ -11587,24 +11713,28 @@ function NumberArrowStep(props) {
       return;
     }
     if (!isValidNumber(value)) {
-      return 'Should be a valid number.';
+      return translate('Should be a valid number.');
     }
     if (Big(value).cmp(0) <= 0) {
-      return 'Should be greater than zero.';
+      return translate('Should be greater than zero.');
     }
     if (decimalDigitsSet) {
       const minimumValue = Big(`1e-${decimalDigits}`);
       if (Big(value).cmp(minimumValue) < 0) {
-        return `Should be at least ${minimumValue.toString()}.`;
+        return translate('Should be at least {value}.', {
+          value: minimumValue.toString()
+        });
       }
       if (countDecimals(value) > decimalDigits) {
-        return `Should not contain more than ${decimalDigits} decimal digits.`;
+        return translate('Should not contain more than {value} decimal digits.', {
+          value: decimalDigits.toString()
+        });
       }
     }
-  }, [decimalDigitsSet, decimalDigits]);
+  }, [decimalDigitsSet, decimalDigits, translate]);
   return TextfieldEntry({
     debounce,
-    label: 'Increment',
+    label: translate('Increment'),
     element: field,
     getValue,
     id,
@@ -11617,17 +11747,18 @@ function NumberArrowStep(props) {
 
 /**
  * @param {number|void} value
+ * @param {Translate} translate
  * @returns {string|void}
  */
-const validateNumberEntries = value => {
+const validateNumberEntries = (value, translate) => {
   if (typeof value !== 'number') {
     return;
   }
   if (!Number.isInteger(value)) {
-    return 'Should be an integer.';
+    return translate('Should be an integer.');
   }
   if (value < 0) {
-    return 'Should be greater than or equal to zero.';
+    return translate('Should be greater than or equal to zero.');
   }
 };
 
@@ -11663,6 +11794,7 @@ function ExpressionFieldExpression(props) {
     id
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const variables = useVariables().map(name => ({
     name
   }));
@@ -11672,12 +11804,12 @@ function ExpressionFieldExpression(props) {
   };
   return FeelEntry({
     debounce,
-    description: 'Define an expression to calculate the value of this field',
+    description: translate('Define an expression to calculate the value of this field'),
     element: field,
     feel: 'required',
     getValue,
     id,
-    label: 'Target value',
+    label: translate('Target value'),
     setValue,
     variables
   });
@@ -11688,20 +11820,21 @@ function ExpressionFieldComputeOn(props) {
     field,
     id
   } = props;
+  const translate = useService('translate');
   const getValue = () => field.computeOn || '';
   const setValue = value => {
     editField(field, ['computeOn'], value);
   };
   const getOptions = () => [{
     value: 'change',
-    label: 'Value changes'
+    label: translate('Value changes')
   }, {
     value: 'presubmit',
-    label: 'Form submission'
+    label: translate('Form submission')
   }];
   return SelectEntry({
     id,
-    label: 'Compute on',
+    label: translate('Compute on'),
     getValue,
     setValue,
     getOptions
@@ -11733,6 +11866,7 @@ function SerializeToString(props) {
   const {
     defaultValue
   } = field;
+  const translate = useService('translate');
   const path = ['serializeToString'];
   const getValue = () => {
     return get(field, path, '');
@@ -11748,8 +11882,8 @@ function SerializeToString(props) {
     element: field,
     getValue,
     id,
-    label: 'Output as string',
-    description: 'Allows arbitrary precision values',
+    label: translate('Output as string'),
+    description: translate('Allows arbitrary precision values'),
     setValue
   });
 }
@@ -11757,15 +11891,18 @@ function SerializeToString(props) {
 function DateTimeEntry(props) {
   const {
     editField,
-    field
+    field,
+    getService
   } = props;
+  const translate = getService('translate');
   const entries = [{
     id: 'subtype',
     component: DateTimeSubtypeSelect,
     isEdited: isEdited$3,
     editField,
     field,
-    isDefaultVisible: field => field.type === 'datetime'
+    isDefaultVisible: field => field.type === 'datetime',
+    translate
   }];
   entries.push({
     id: 'use24h',
@@ -11773,7 +11910,8 @@ function DateTimeEntry(props) {
     isEdited: isEdited$9,
     editField,
     field,
-    isDefaultVisible: field => field.type === 'datetime' && (field.subtype === DATETIME_SUBTYPES.TIME || field.subtype === DATETIME_SUBTYPES.DATETIME)
+    isDefaultVisible: field => field.type === 'datetime' && (field.subtype === DATETIME_SUBTYPES.TIME || field.subtype === DATETIME_SUBTYPES.DATETIME),
+    translate
   });
   return entries;
 }
@@ -11781,7 +11919,8 @@ function DateTimeSubtypeSelect(props) {
   const {
     editField,
     field,
-    id
+    id,
+    translate
   } = props;
   const getValue = e => get(field, DATETIME_SUBTYPE_PATH);
   const clearTimeConfig = () => {
@@ -11821,12 +11960,12 @@ function DateTimeSubtypeSelect(props) {
   };
   const getDatetimeSubtypes = () => {
     return Object.values(DATETIME_SUBTYPES).map(subtype => ({
-      label: DATETIME_SUBTYPES_LABELS[subtype],
+      label: translate(DATETIME_SUBTYPES_LABELS[subtype]),
       value: subtype
     }));
   };
   return SelectEntry({
-    label: 'Subtype',
+    label: translate('Subtype'),
     element: field,
     getOptions: getDatetimeSubtypes,
     getValue,
@@ -11838,7 +11977,8 @@ function Use24h(props) {
   const {
     editField,
     field,
-    id
+    id,
+    translate
   } = props;
   const path = TIME_USE24H_PATH;
   const getValue = () => {
@@ -11851,7 +11991,7 @@ function Use24h(props) {
     element: field,
     getValue,
     id,
-    label: 'Use 24h',
+    label: translate('Use 24h'),
     setValue
   });
 }
@@ -11897,6 +12037,7 @@ function DisallowPassedDates(props) {
     id
   } = props;
   const path = DATE_DISALLOW_PAST_PATH;
+  const translate = useService('translate');
   const getValue = () => {
     return get(field, path, '');
   };
@@ -11907,7 +12048,7 @@ function DisallowPassedDates(props) {
     element: field,
     getValue,
     id,
-    label: 'Disallow past dates',
+    label: translate('Disallow past dates'),
     setValue
   });
 }
@@ -11918,6 +12059,7 @@ function TimeIntervalSelect(props) {
     id
   } = props;
   const timeIntervals = [1, 5, 10, 15, 30, 60];
+  const translate = useService('translate');
   const getValue = e => get(field, TIME_INTERVAL_PATH);
   const setValue = value => editField(field, TIME_INTERVAL_PATH, parseInt(value));
   const getTimeIntervals = () => {
@@ -11927,7 +12069,7 @@ function TimeIntervalSelect(props) {
     }));
   };
   return SelectEntry({
-    label: 'Time interval',
+    label: translate('Time interval'),
     element: field,
     getOptions: getTimeIntervals,
     getValue,
@@ -11959,16 +12101,17 @@ function TimeFormatSelect(props) {
     field,
     id
   } = props;
+  const translate = useService('translate');
   const getValue = e => get(field, TIME_SERIALISING_FORMAT_PATH);
   const setValue = value => editField(field, TIME_SERIALISING_FORMAT_PATH, value);
   const getTimeSerialisingFormats = () => {
     return Object.values(TIME_SERIALISING_FORMATS).map(format => ({
-      label: TIME_SERIALISINGFORMAT_LABELS[format],
+      label: translate(TIME_SERIALISINGFORMAT_LABELS[format]),
       value: format
     }));
   };
   return SelectEntry({
-    label: 'Time format',
+    label: translate('Time format'),
     element: field,
     getOptions: getTimeSerialisingFormats,
     getValue,
@@ -11978,10 +12121,11 @@ function TimeFormatSelect(props) {
 }
 
 function SelectEntries(props) {
+  const translate = props.getService('translate');
   const entries = [simpleBoolEntryFactory({
     id: 'searchable',
     path: ['searchable'],
-    label: 'Searchable',
+    label: translate('Searchable'),
     props,
     isDefaultVisible: field => field.type === 'select'
   })];
@@ -12024,6 +12168,7 @@ function Label$1(props) {
     validateFactory
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const setValue = (value, error) => {
     if (error) {
       return;
@@ -12040,7 +12185,7 @@ function Label$1(props) {
     element: field,
     getValue,
     id,
-    label: 'Label',
+    label: translate('Label'),
     setValue,
     validate
   });
@@ -12054,6 +12199,7 @@ function Value$1(props) {
     validateFactory
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const setValue = (value, error) => {
     if (error) {
       return;
@@ -12077,7 +12223,7 @@ function Value$1(props) {
     element: field,
     getValue,
     id,
-    label: 'Value',
+    label: translate('Value'),
     setValue,
     validate
   });
@@ -12119,6 +12265,7 @@ function Key$1(props) {
     validateFactory
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const setValue = (value, error) => {
     if (error) {
       return;
@@ -12136,7 +12283,7 @@ function Key$1(props) {
     element: field,
     getValue,
     id,
-    label: 'Key',
+    label: translate('Key'),
     setValue,
     validate
   });
@@ -12150,6 +12297,7 @@ function Value(props) {
     validateFactory
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const setValue = value => {
     const properties = get(field, ['properties']);
     const key = Object.keys(properties)[index];
@@ -12165,7 +12313,7 @@ function Value(props) {
     element: field,
     getValue,
     id,
-    label: 'Value',
+    label: translate('Value'),
     setValue,
     validate: validateFactory(getValue())
   });
@@ -12241,21 +12389,24 @@ function OptionsSourceSelectEntry(props) {
   const {
     editField,
     field,
-    id
+    id,
+    translate
   } = props;
   return [{
     id: id + '-select',
     component: ValuesSourceSelect,
     isEdited: isOptionsSourceEdited,
     editField,
-    field
+    field,
+    translate
   }];
 }
 function ValuesSourceSelect(props) {
   const {
     editField,
     field,
-    id
+    id,
+    translate
   } = props;
   const getValue = getOptionsSource;
   const setValue = value => {
@@ -12267,13 +12418,13 @@ function ValuesSourceSelect(props) {
   };
   const getOptionsSourceOptions = () => {
     return Object.values(OPTIONS_SOURCES).map(valueSource => ({
-      label: OPTIONS_SOURCES_LABELS[valueSource],
+      label: translate(OPTIONS_SOURCES_LABELS[valueSource]),
       value: valueSource
     }));
   };
   return AutoFocusSelectEntry({
     autoFocusEntry: getAutoFocusEntryId$1(field),
-    label: 'Type',
+    label: translate('Type'),
     element: field,
     getOptions: getOptionsSourceOptions,
     getValue,
@@ -12317,10 +12468,11 @@ function InputValuesKey(props) {
     id
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const path = OPTIONS_SOURCES_PATHS[OPTIONS_SOURCES.INPUT];
   const schema = '[\n  {\n    "label": "dollar",\n    "value": "$"\n  }\n]';
   const tooltip = jsxs("div", {
-    children: ["The input property may be an array of simple values or alternatively follow this schema:", jsx("pre", {
+    children: [translate('The input property may be an array of simple values or alternatively follow this schema:'), jsx("pre", {
       children: jsx("code", {
         children: schema
       })
@@ -12335,14 +12487,14 @@ function InputValuesKey(props) {
   };
   return TextfieldEntry({
     debounce,
-    description: 'Define which input property to populate the values from',
+    description: translate('Define which input property to populate the values from'),
     tooltip,
     element: field,
     getValue,
     id,
-    label: 'Input values key',
+    label: translate('Input values key'),
     setValue,
-    validate: validate$6
+    validate: useCallback(value => validate$6(value, translate), [translate])
   });
 }
 
@@ -12350,14 +12502,15 @@ function InputValuesKey(props) {
 
 /**
  * @param {string|void} value
+ * @param {Translate} translate
  * @returns {string|null}
  */
-const validate$6 = value => {
+const validate$6 = (value, translate) => {
   if (typeof value !== 'string' || value.length === 0) {
-    return 'Must not be empty.';
+    return translate('Must not be empty.');
   }
   if (/\s/.test(value)) {
-    return 'Must not contain spaces.';
+    return translate('Must not contain spaces.');
   }
   return null;
 };
@@ -12366,7 +12519,8 @@ function StaticOptionsSourceEntry(props) {
   const {
     editField,
     field,
-    id: idPrefix
+    id: idPrefix,
+    translate
   } = props;
   const {
     values
@@ -12374,7 +12528,7 @@ function StaticOptionsSourceEntry(props) {
   const addEntry = e => {
     e.stopPropagation();
     const index = values.length + 1;
-    const entry = getIndexedEntry(index, values);
+    const entry = getIndexedEntry(index, values, translate);
     editField(field, OPTIONS_SOURCES_PATHS[OPTIONS_SOURCES.STATIC], arrayAdd(values, values.length, entry));
   };
   const removeEntry = entry => {
@@ -12393,11 +12547,11 @@ function StaticOptionsSourceEntry(props) {
         return;
       }
       if (typeof value !== 'string' || value.length === 0) {
-        return 'Must not be empty.';
+        return translate('Must not be empty.');
       }
       const isValueAssigned = values.find(entry => getValue(entry) === value);
       if (isValueAssigned) {
-        return 'Must be unique.';
+        return translate('Must be unique.');
       }
     };
   };
@@ -12425,9 +12579,9 @@ function StaticOptionsSourceEntry(props) {
 
 // helper
 
-function getIndexedEntry(index, values) {
+function getIndexedEntry(index, values, translate) {
   const entry = {
-    label: 'Value',
+    label: translate('Value'),
     value: 'value'
   };
   while (labelOrValueIsAlreadyAssignedForIndex(index, values)) {
@@ -12490,6 +12644,7 @@ function PrefixAdorner(props) {
     getValue
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const variables = useVariables().map(name => ({
     name
   }));
@@ -12499,7 +12654,7 @@ function PrefixAdorner(props) {
     feel: 'optional',
     getValue: getValue('prefixAdorner'),
     id,
-    label: 'Prefix',
+    label: translate('Prefix'),
     setValue: onChange('prefixAdorner'),
     singleLine: true,
     variables
@@ -12513,6 +12668,7 @@ function SuffixAdorner(props) {
     getValue
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const variables = useVariables().map(name => ({
     name
   }));
@@ -12521,7 +12677,7 @@ function SuffixAdorner(props) {
     element: field,
     getValue: getValue('suffixAdorner'),
     id,
-    label: 'Suffix',
+    label: translate('Suffix'),
     setValue: onChange('suffixAdorner'),
     singleLine: true,
     variables
@@ -12556,6 +12712,7 @@ function Readonly(props) {
     id
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const variables = useVariables().map(name => ({
     name
   }));
@@ -12572,8 +12729,8 @@ function Readonly(props) {
     feel: 'optional',
     getValue,
     id,
-    label: 'Read only',
-    tooltip: 'Make this field read-only when it cannot be edited by the end-user, but its content is important for them to see. Its data will still be submitted.',
+    label: translate('Read only'),
+    tooltip: translate('Make this field read-only when it cannot be edited by the end-user, but its content is important for them to see. Its data will still be submitted.'),
     setValue,
     variables
   });
@@ -12583,22 +12740,23 @@ function LayouterAppearanceEntry(props) {
   const {
     field
   } = props;
+  const translate = props.translate;
   if (!['group', 'dynamiclist'].includes(field.type)) {
     return [];
   }
   const entries = [simpleSelectEntryFactory({
     id: 'verticalAlignment',
     path: ['verticalAlignment'],
-    label: 'Vertical alignment',
+    label: translate('Vertical alignment'),
     optionsArray: [{
       value: 'start',
-      label: 'Top'
+      label: translate('Top')
     }, {
       value: 'center',
-      label: 'Center'
+      label: translate('Center')
     }, {
       value: 'end',
-      label: 'Bottom'
+      label: translate('Bottom')
     }],
     props
   })];
@@ -12614,32 +12772,33 @@ function RepeatableEntry(props) {
     type
   } = field;
   const formFieldDefinition = getService('formFields').get(type);
+  const translate = getService('translate');
   if (!formFieldDefinition || !formFieldDefinition.config.repeatable) {
     return [];
   }
   const entries = [simpleRangeIntegerEntryFactory({
     id: 'defaultRepetitions',
     path: ['defaultRepetitions'],
-    label: 'Default number of items',
+    label: translate('Default number of items'),
     min: 1,
     max: 100,
     props
   }), simpleBoolEntryFactory({
     id: 'allowAddRemove',
     path: ['allowAddRemove'],
-    label: 'Allow add/delete items',
+    label: translate('Allow add/delete items'),
     props
   }), simpleBoolEntryFactory({
     id: 'disableCollapse',
     path: ['disableCollapse'],
-    label: 'Disable collapse',
+    label: translate('Disable collapse'),
     props
   })];
   if (!field.disableCollapse) {
     const nonCollapseItemsEntry = simpleRangeIntegerEntryFactory({
       id: 'nonCollapsedItems',
       path: ['nonCollapsedItems'],
-      label: 'Number of non-collapsing items',
+      label: translate('Number of non-collapsing items'),
       min: 1,
       props
     });
@@ -12668,6 +12827,7 @@ function Condition(props) {
     id
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const variables = useVariables().map(name => ({
     name
   }));
@@ -12683,13 +12843,13 @@ function Condition(props) {
       hide: value
     });
   };
-  let label = 'Hide if';
-  let description = 'Condition under which the field is hidden';
+  let label = translate('Hide if');
+  let description = translate('Condition under which the field is hidden');
 
   // special case for expression fields which do not render
   if (field.type === 'expression') {
-    label = 'Deactivate if';
-    description = 'Condition under which the field is deactivated';
+    label = translate('Deactivate if');
+    description = translate('Condition under which the field is deactivated');
   }
   return FeelEntry({
     debounce,
@@ -12725,13 +12885,14 @@ function OptionsExpression(props) {
     id
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const variables = useVariables().map(name => ({
     name
   }));
   const path = OPTIONS_SOURCES_PATHS[OPTIONS_SOURCES.EXPRESSION];
   const schema = '[\n  {\n    "label": "dollar",\n    "value": "$"\n  }\n]';
   const tooltip = jsxs("div", {
-    children: ["The expression may result in an array of simple values or alternatively follow this schema:", jsx("pre", {
+    children: [translate('The expression may result in an array of simple values or alternatively follow this schema:'), jsx("pre", {
       children: jsx("code", {
         children: schema
       })
@@ -12741,18 +12902,22 @@ function OptionsExpression(props) {
   const setValue = value => editField(field, path, value || '');
   return FeelEntry({
     debounce,
-    description: 'Define an expression to populate the options from.',
+    description: translate('Define an expression to populate the options from.'),
     tooltip,
     element: field,
     feel: 'required',
     getValue,
     id,
-    label: 'Options expression',
+    label: translate('Options expression'),
     setValue,
     variables
   });
 }
 
+/**
+ * @typedef { import('diagram-js/lib/i18n/translate/translate').default } Translate
+ */
+
 function TableDataSourceEntry(props) {
   const {
     editField,
@@ -12776,6 +12941,7 @@ function Source(props) {
     id
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const variables = useVariables().map(name => ({
     name
   }));
@@ -12791,17 +12957,17 @@ function Source(props) {
   };
   return FeelTemplatingEntry({
     debounce,
-    description: 'Specify the source from which to populate the table',
+    description: translate('Specify the source from which to populate the table'),
     element: field,
     feel: 'required',
     getValue,
     id,
-    label: 'Data source',
-    tooltip: 'Enter a form input variable that contains the data for the table or define an expression to populate the data dynamically.',
+    label: translate('Data source'),
+    tooltip: translate('Enter a form input variable that contains the data for the table or define an expression to populate the data dynamically.'),
     setValue,
     singleLine: true,
     variables,
-    validate: validate$5
+    validate: useCallback(value => validate$5(value, translate), [translate])
   });
 }
 
@@ -12809,20 +12975,21 @@ function Source(props) {
 
 /**
  * @param {string|void} value
+ * @param {Translate} translate
  * @returns {string|null}
  */
-const validate$5 = value => {
+const validate$5 = (value, translate) => {
   if (!isString(value) || value.length === 0) {
-    return 'Must not be empty.';
+    return translate('Must not be empty.');
   }
   if (value.startsWith('=')) {
     return null;
   }
   if (!isValidDotPath(value)) {
-    return 'Must be a variable or a dot separated path.';
+    return translate('Must be a variable or a dot separated path.');
   }
   if (hasIntegerPathSegment(value)) {
-    return 'Must not contain numerical path segments.';
+    return translate('Must not contain numerical path segments.');
   }
   return null;
 };
@@ -12830,8 +12997,10 @@ const validate$5 = value => {
 function PaginationEntry(props) {
   const {
     editField,
-    field
+    field,
+    getService
   } = props;
+  const translate = getService('translate');
   const entries = [];
   entries.push({
     id: 'pagination',
@@ -12839,7 +13008,8 @@ function PaginationEntry(props) {
     editField: editField,
     field: field,
     isEdited: isEdited$7,
-    isDefaultVisible: field => field.type === 'table'
+    isDefaultVisible: field => field.type === 'table',
+    translate
   });
   return entries;
 }
@@ -12847,7 +13017,8 @@ function Pagination(props) {
   const {
     editField,
     field,
-    id
+    id,
+    translate
   } = props;
   const defaultRowCount = 10;
   const path = ['rowCount'];
@@ -12865,12 +13036,16 @@ function Pagination(props) {
     element: field,
     getValue,
     id,
-    label: 'Pagination',
+    label: translate('Pagination'),
     inline: true,
     setValue
   });
 }
 
+/**
+ * @typedef { import('diagram-js/lib/i18n/translate/translate').default } Translate
+ */
+
 const path$2 = ['rowCount'];
 function RowCountEntry(props) {
   const {
@@ -12895,6 +13070,7 @@ function RowCount(props) {
     id
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const getValue = () => get(field, path$2);
 
   /**
@@ -12910,33 +13086,31 @@ function RowCount(props) {
   };
   return NumberFieldEntry({
     debounce,
-    label: 'Number of rows per page',
+    label: translate('Number of rows per page'),
     element: field,
     id,
     getValue,
     setValue,
-    validate: validate$4
+    validate: useCallback(value => validate$4(value, translate), [translate])
   });
 }
 
 // helpers //////////
 
 /**
- * @param {string|void} value
+ * @param {number|undefined} value
+ * @param {Translate} translate
  * @returns {string|null}
  */
-const validate$4 = value => {
+const validate$4 = (value, translate) => {
   if (isNil(value)) {
     return null;
   }
-  if (!isNumber(value)) {
-    return 'Must be number';
-  }
   if (!Number.isInteger(value)) {
-    return 'Should be an integer.';
+    return translate('Should be an integer.');
   }
   if (value < 1) {
-    return 'Should be greater than zero.';
+    return translate('Should be greater than zero.');
   }
   return null;
 };
@@ -12951,7 +13125,6 @@ const OPTIONS = {
     value: 'expression'
   }
 };
-const SELECT_OPTIONS = Object.values(OPTIONS);
 const COLUMNS_PATH = ['columns'];
 const COLUMNS_EXPRESSION_PATH = ['columnsExpression'];
 const isHeadersSourceEdited = isEditedFromDefaultFactory(OPTIONS.static.value);
@@ -12959,22 +13132,32 @@ function HeadersSourceSelectEntry(props) {
   const {
     editField,
     field,
-    id
+    id,
+    translate
   } = props;
   return [{
     id: id + '-select',
     component: HeadersSourceSelect,
     isEdited: isHeadersSourceEdited,
     editField,
-    field
+    field,
+    translate
   }];
 }
 function HeadersSourceSelect(props) {
   const {
     editField,
     field,
-    id
+    id,
+    translate
   } = props;
+  const selectOptions = Object.values(OPTIONS).map(({
+    label,
+    value
+  }) => ({
+    label: translate(label),
+    value
+  }));
 
   /**
    * @returns {string|void}
@@ -13011,11 +13194,11 @@ function HeadersSourceSelect(props) {
     }
   };
   const getValuesSourceOptions = () => {
-    return SELECT_OPTIONS;
+    return selectOptions;
   };
   return AutoFocusSelectEntry({
     autoFocusEntry: getAutoFocusEntryId(field),
-    label: 'Type',
+    label: translate('Type'),
     element: field,
     getOptions: getValuesSourceOptions,
     getValue,
@@ -13062,6 +13245,7 @@ function ColumnsExpression(props) {
     id
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const variables = useVariables().map(name => ({
     name
   }));
@@ -13082,7 +13266,7 @@ function ColumnsExpression(props) {
   };
   const schema = '[\n  {\n    "key": "column_1",\n    "label": "Column 1"\n  }\n]';
   const tooltip = jsxs("div", {
-    children: ["The expression may result in an array of simple values or alternatively follow this schema:", jsx("pre", {
+    children: [translate('The expression may result in an array of simple values or alternatively follow this schema:'), jsx("pre", {
       children: jsx("code", {
         children: schema
       })
@@ -13090,17 +13274,17 @@ function ColumnsExpression(props) {
   });
   return FeelTemplatingEntry({
     debounce,
-    description: 'Specify an expression to populate column items',
+    description: translate('Specify an expression to populate column items'),
     element: field,
     feel: 'required',
     getValue,
     id,
-    label: 'Expression',
+    label: translate('Expression'),
     tooltip,
     setValue,
     singleLine: true,
     variables,
-    validate: validate$3
+    validate: useCallback(value => validate$3(value, translate), [translate])
   });
 }
 
@@ -13108,15 +13292,20 @@ function ColumnsExpression(props) {
 
 /**
  * @param {string|void} value
+ * @param {Translate} translate
  * @returns {string|null}
  */
-const validate$3 = value => {
+const validate$3 = (value, translate) => {
   if (!isString(value) || value.length === 0 || value === '=') {
-    return 'Must not be empty.';
+    return translate('Must not be empty.');
   }
   return null;
 };
 
+/**
+ * @typedef { import('diagram-js/lib/i18n/translate/translate').default } Translate
+ */
+
 const path$1 = 'columns';
 const labelPath = 'label';
 const keyPath = 'key';
@@ -13152,6 +13341,7 @@ function Label(props) {
     index
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
 
   /**
    * @param {string|void} value
@@ -13173,7 +13363,7 @@ function Label(props) {
     element: field,
     getValue,
     id,
-    label: 'Label',
+    label: translate('Label'),
     setValue
   });
 }
@@ -13185,6 +13375,7 @@ function Key(props) {
     index
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
 
   /**
    * @param {string|void} value
@@ -13206,9 +13397,9 @@ function Key(props) {
     element: field,
     getValue,
     id,
-    label: 'Key',
+    label: translate('Key'),
     setValue,
-    validate: validate$2
+    validate: useCallback(value => validate$2(value, translate), [translate])
   });
 }
 
@@ -13216,11 +13407,12 @@ function Key(props) {
 
 /**
  * @param {string|void} value
+ * @param {Translate} translate
  * @returns {string|null}
  */
-function validate$2(value) {
+function validate$2(value, translate) {
   if (!isString(value) || value.length === 0) {
-    return 'Must not be empty.';
+    return translate('Must not be empty.');
   }
   return null;
 }
@@ -13290,6 +13482,7 @@ function VersionTag(props) {
     id
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const path = ['versionTag'];
   const getValue = () => {
     return get(field, path, '');
@@ -13301,14 +13494,14 @@ function VersionTag(props) {
     return editField(field, path, value);
   };
   const tooltip = jsx("div", {
-    children: "Version tag by which this form can be referenced."
+    children: translate('Version tag by which this form can be referenced.')
   });
   return TextfieldEntry({
     debounce,
     element: field,
     getValue,
     id,
-    label: 'Version tag',
+    label: translate('Version tag'),
     setValue,
     tooltip
   });
@@ -13336,6 +13529,7 @@ function Accept(props) {
     field,
     id
   } = props;
+  const translate = useService('translate');
   const debounce = useService('debounce');
   const variables = useVariables().map(name => ({
     name
@@ -13352,24 +13546,29 @@ function Accept(props) {
     element: field,
     getValue,
     id,
-    label: 'Supported file formats',
+    label: translate('Supported file formats'),
     singleLine: true,
     setValue,
     variables,
-    description
+    description: description(translate)
   });
 }
 
 // helpers //////////
-
-const description = jsxs(Fragment$1, {
-  children: ["A comma-separated list of", ' ', jsx("a", {
-    href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers",
-    target: "_blank",
-    rel: "noreferrer",
-    children: "file type specifiers"
-  })]
-});
+/**
+ * @param {Translate} translate
+ * @returns Description Element
+ */
+const description = translate => {
+  return jsxs(Fragment$1, {
+    children: [translate('A comma-separated list of'), ' ', jsx("a", {
+      href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers",
+      target: "_blank",
+      rel: "noreferrer",
+      children: translate('file type specifiers')
+    })]
+  });
+};
 
 function MultipleEntry(props) {
   const {
@@ -13394,6 +13593,7 @@ function Multiple(props) {
     id
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const variables = useVariables().map(name => ({
     name
   }));
@@ -13410,7 +13610,7 @@ function Multiple(props) {
     feel: 'optional',
     getValue,
     id,
-    label: 'Upload multiple files',
+    label: translate('Upload multiple files'),
     inline: true,
     setValue,
     variables
@@ -13440,6 +13640,7 @@ function DocumentsDataSource(props) {
     id
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const variables = useVariables().map(name => ({
     name
   }));
@@ -13462,23 +13663,23 @@ function DocumentsDataSource(props) {
 ]`;
   const tooltip = jsxs("div", {
     children: [jsx("p", {
-      children: "A source is a JSON object containing metadata for a document or an array of documents."
+      children: translate('A source is a JSON object containing metadata for a document or an array of documents.')
     }), jsx("p", {
-      children: "Each entry must include a document ID, name, and MIME type."
+      children: translate('Each entry must include a document ID, name, and MIME type.')
     }), jsx("p", {
-      children: "Additional details are optional. The expected format is as follows:"
+      children: translate('Additional details are optional. The expected format is as follows:')
     }), jsx("pre", {
       children: jsx("code", {
         children: schema
       })
     }), jsx("p", {
-      children: "When using Camunda Tasklist UI, additional document reference attributes are automatically handled. Modifying the document reference may affect the document preview functionality."
+      children: translate('When using Camunda Tasklist UI, additional document reference attributes are automatically handled. Modifying the document reference may affect the document preview functionality.')
     }), jsxs("p", {
-      children: ["Learn more in our", ' ', jsx("a", {
+      children: [translate('Learn more in our'), ' ', jsx("a", {
         href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-document-preview/",
         target: "_blank",
         rel: "noopener noreferrer",
-        children: "documentation"
+        children: translate('documentation')
       }), "."]
     })]
   });
@@ -13487,13 +13688,13 @@ function DocumentsDataSource(props) {
     element: field,
     getValue,
     id,
-    label: 'Document reference',
+    label: translate('Document reference'),
     feel: 'required',
     singleLine: true,
     setValue,
     variables,
     tooltip,
-    validate: validate$1
+    validate: useCallback(value => validate$1(value, translate), [translate])
   });
 }
 
@@ -13501,14 +13702,19 @@ function DocumentsDataSource(props) {
 
 /**
  * @param {string|undefined} value
+ * @param {Translate} translate
  * @returns {string|null}
  */
-const validate$1 = value => {
+const validate$1 = (value, translate) => {
   if (typeof value !== 'string' || value.length === 0) {
-    return 'The document data source is required.';
+    return translate('The document data source is required.');
   }
 };
 
+/**
+ * @typedef { import('diagram-js/lib/i18n/translate/translate').default } Translate
+ */
+
 function MaxHeightEntry(props) {
   const {
     editField,
@@ -13532,43 +13738,42 @@ function MaxHeight(props) {
     id
   } = props;
   const debounce = useService('debounce');
+  const translate = useService('translate');
   const path = ['maxHeight'];
   const getValue = () => {
-    return get(field, path, '');
+    return get(field, path);
   };
   const setValue = value => {
     return editField(field, path, value);
   };
   return NumberFieldEntry({
     debounce,
-    label: 'Max height of preview container',
+    label: translate('Max height of preview container'),
     element: field,
     id,
     getValue,
     setValue,
-    validate,
-    tooltip
+    validate: useCallback(value => validate(value, translate), [translate]),
+    description: translate(tooltip)
   });
 }
 
 // helpers //////////
 
 /**
- * @param {string|number|undefined} value
+ * @param {number|undefined} value
+ * @param {Translate} translate
  * @returns {string|null}
  */
-const validate = value => {
-  if (value === undefined || value === '') {
+const validate = (value, translate) => {
+  if (isNil(value)) {
     return null;
   }
-  if (typeof value === 'string') {
-    return 'Value must be a number.';
-  }
   if (!Number.isInteger(value)) {
-    return 'Should be an integer.';
+    return translate('Should be an integer.');
   }
   if (value < 1) {
-    return 'Should be greater than zero.';
+    return translate('Should be greater than zero.');
   }
 };
 const tooltip = 'Documents whose height exceeds the defined value in pixels will be vertically scrollable';
@@ -13600,13 +13805,15 @@ function GeneralGroup(field, editField, getService) {
     getService
   }), ...DefaultValueEntry({
     field,
-    editField
+    editField,
+    getService
   }), ...ActionEntry({
     field,
     editField
   }), ...DateTimeEntry({
     field,
-    editField
+    editField,
+    getService
   }), ...TextEntry({
     field,
     editField}), ...HtmlEntry({
@@ -13616,7 +13823,8 @@ function GeneralGroup(field, editField, getService) {
     editField
   }), ...IFrameHeightEntry({
     field,
-    editField
+    editField,
+    getService
   }), ...HeightEntry({
     field,
     editField
@@ -13634,7 +13842,8 @@ function GeneralGroup(field, editField, getService) {
     editField
   }), ...SelectEntries({
     field,
-    editField
+    editField,
+    getService
   }), ...AcceptEntry({
     field,
     editField
@@ -13643,7 +13852,8 @@ function GeneralGroup(field, editField, getService) {
     editField
   }), ...DisabledEntry({
     field,
-    editField
+    editField,
+    getService
   }), ...ReadonlyEntry({
     field,
     editField
@@ -13652,7 +13862,8 @@ function GeneralGroup(field, editField, getService) {
     editField
   }), ...PaginationEntry({
     field,
-    editField
+    editField,
+    getService
   }), ...RowCountEntry({
     field,
     editField
@@ -13663,14 +13874,15 @@ function GeneralGroup(field, editField, getService) {
   if (entries.length === 0) {
     return null;
   }
+  const translate = getService('translate');
   return {
     id: 'general',
-    label: 'General',
+    label: translate('General'),
     entries
   };
 }
 
-function SerializationGroup(field, editField) {
+function SerializationGroup(field, editField, getService) {
   const entries = [...NumberSerializationEntry({
     field,
     editField
@@ -13678,51 +13890,56 @@ function SerializationGroup(field, editField) {
     field,
     editField
   })];
+  const translate = getService('translate');
   if (!entries.length) {
     return null;
   }
   return {
     id: 'serialization',
-    label: 'Serialization',
+    label: translate('Serialization'),
     entries
   };
 }
 
-function ConstraintsGroup(field, editField) {
+function ConstraintsGroup(field, editField, getService) {
   const entries = [...DateTimeConstraintsEntry({
     field,
     editField
   })];
+  const translate = getService('translate');
   if (!entries.length) {
     return null;
   }
   return {
     id: 'constraints',
-    label: 'Constraints',
+    label: translate('Constraints'),
     entries
   };
 }
 
-const VALIDATION_TYPE_OPTIONS = {
-  custom: {
-    value: '',
-    label: 'Custom'
-  },
-  email: {
-    value: 'email',
-    label: 'Email'
-  },
-  phone: {
-    value: 'phone',
-    label: 'Phone'
-  }
+const VALIDATION_TYPE_OPTIONS = translate => {
+  return {
+    custom: {
+      value: '',
+      label: translate('Custom')
+    },
+    email: {
+      value: 'email',
+      label: translate('Email')
+    },
+    phone: {
+      value: 'phone',
+      label: translate('Phone')
+    }
+  };
 };
-function ValidationGroup(field, editField) {
+function ValidationGroup(field, editField, getService) {
   const {
     type
   } = field;
   const validate = get(field, ['validate'], {});
-  const isCustomValidation = [undefined, VALIDATION_TYPE_OPTIONS.custom.value].includes(validate.validationType);
+  const translate = getService('translate');
+  const isCustomValidation = [undefined, VALIDATION_TYPE_OPTIONS(translate).custom.value].includes(validate.validationType);
   const hasPattern = !!get(field, ['validate', 'pattern']);
   const onChange = key => {
     return value => {
@@ -13742,7 +13959,8 @@ function ValidationGroup(field, editField) {
     field,
     isEdited: isEdited$9,
     onChange,
-    isDefaultVisible: field => INPUTS.includes(field.type)
+    isDefaultVisible: field => INPUTS.includes(field.type),
+    translate
   }];
   entries.push({
     id: 'validationType',
@@ -13752,7 +13970,8 @@ function ValidationGroup(field, editField) {
     editField,
     isEdited: isEdited,
     onChange,
-    isDefaultVisible: field => field.type === 'textfield'
+    isDefaultVisible: field => field.type === 'textfield',
+    translate
   });
   entries.push({
     id: 'minLength',
@@ -13761,7 +13980,8 @@ function ValidationGroup(field, editField) {
     field,
     isEdited: isEdited$5,
     onChange,
-    isDefaultVisible: field => INPUTS.includes(field.type) && (type === 'textarea' || type === 'textfield' && isCustomValidation)
+    isDefaultVisible: field => INPUTS.includes(field.type) && (type === 'textarea' || type === 'textfield' && isCustomValidation),
+    translate
   }, {
     id: 'maxLength',
     component: MaxLength,
@@ -13769,7 +13989,8 @@ function ValidationGroup(field, editField) {
     field,
     isEdited: isEdited$5,
     onChange,
-    isDefaultVisible: field => INPUTS.includes(field.type) && (type === 'textarea' || type === 'textfield' && isCustomValidation)
+    isDefaultVisible: field => INPUTS.includes(field.type) && (type === 'textarea' || type === 'textfield' && isCustomValidation),
+    translate
   });
   entries.push({
     id: 'pattern',
@@ -13778,7 +13999,8 @@ function ValidationGroup(field, editField) {
     field,
     isEdited: isEdited,
     onChange,
-    isDefaultVisible: field => INPUTS.includes(field.type) && type === 'textfield' && isCustomValidation
+    isDefaultVisible: field => INPUTS.includes(field.type) && type === 'textfield' && isCustomValidation,
+    translate
   });
   entries.push({
     id: 'patternErrorMessage',
@@ -13787,7 +14009,8 @@ function ValidationGroup(field, editField) {
     field,
     isEdited: isEdited,
     onChange,
-    isDefaultVisible: field => INPUTS.includes(field.type) && type === 'textfield' && isCustomValidation && hasPattern
+    isDefaultVisible: field => INPUTS.includes(field.type) && type === 'textfield' && isCustomValidation && hasPattern,
+    translate
   });
   entries.push({
     id: 'min',
@@ -13796,7 +14019,8 @@ function ValidationGroup(field, editField) {
     field,
     isEdited: isEdited$5,
     onChange,
-    isDefaultVisible: field => field.type === 'number'
+    isDefaultVisible: field => field.type === 'number',
+    translate
   }, {
     id: 'max',
     component: Max,
@@ -13804,11 +14028,12 @@ function ValidationGroup(field, editField) {
     field,
     isEdited: isEdited$5,
     onChange,
-    isDefaultVisible: field => field.type === 'number'
+    isDefaultVisible: field => field.type === 'number',
+    translate
   });
   return {
     id: 'validation',
-    label: 'Validation',
+    label: translate('Validation'),
     entries
   };
 }
@@ -13817,13 +14042,14 @@ function Required(props) {
     field,
     getValue,
     id,
-    onChange
+    onChange,
+    translate
   } = props;
   return CheckboxEntry({
     element: field,
     getValue: getValue('required'),
     id,
-    label: 'Required',
+    label: translate('Required'),
     setValue: onChange('required')
   });
 }
@@ -13832,7 +14058,8 @@ function MinLength(props) {
     field,
     getValue,
     id,
-    onChange
+    onChange,
+    translate
   } = props;
   const debounce = useService('debounce');
   const variables = useVariables().map(name => ({
@@ -13844,7 +14071,7 @@ function MinLength(props) {
     feel: 'optional',
     getValue: getValue('minLength'),
     id,
-    label: 'Minimum length',
+    label: translate('Minimum length'),
     min: 0,
     setValue: onChange('minLength'),
     variables
@@ -13855,7 +14082,8 @@ function MaxLength(props) {
     field,
     getValue,
     id,
-    onChange
+    onChange,
+    translate
   } = props;
   const debounce = useService('debounce');
   const variables = useVariables().map(name => ({
@@ -13867,7 +14095,7 @@ function MaxLength(props) {
     feel: 'optional',
     getValue: getValue('maxLength'),
     id,
-    label: 'Maximum length',
+    label: translate('Maximum length'),
     min: 0,
     setValue: onChange('maxLength'),
     variables
@@ -13878,7 +14106,8 @@ function Pattern(props) {
     field,
     getValue,
     id,
-    onChange
+    onChange,
+    translate
   } = props;
   const debounce = useService('debounce');
   return TextfieldEntry({
@@ -13886,7 +14115,7 @@ function Pattern(props) {
     element: field,
     getValue: getValue('pattern'),
     id,
-    label: 'Custom regular expression',
+    label: translate('Custom regular expression'),
     setValue: onChange('pattern')
   });
 }
@@ -13895,7 +14124,8 @@ function PatternErrorMessage(props) {
     field,
     getValue,
     id,
-    onChange
+    onChange,
+    translate
   } = props;
   const debounce = useService('debounce');
   return TextfieldEntry({
@@ -13903,8 +14133,8 @@ function PatternErrorMessage(props) {
     element: field,
     getValue: getValue('patternErrorMessage'),
     id,
-    label: 'Custom error message',
-    tooltip: 'The error message to display when the input does not match the regular expression.',
+    label: translate('Custom error message'),
+    tooltip: translate('The error message to display when the input does not match the regular expression.'),
     setValue: onChange('patternErrorMessage')
   });
 }
@@ -13913,7 +14143,8 @@ function Min(props) {
     field,
     getValue,
     id,
-    onChange
+    onChange,
+    translate
   } = props;
   const debounce = useService('debounce');
   const variables = useVariables().map(name => ({
@@ -13924,7 +14155,7 @@ function Min(props) {
     element: field,
     feel: 'optional',
     id,
-    label: 'Minimum',
+    label: translate('Minimum'),
     step: 'any',
     getValue: getValue('min'),
     setValue: onChange('min'),
@@ -13936,7 +14167,8 @@ function Max(props) {
     field,
     getValue,
     id,
-    onChange
+    onChange,
+    translate
   } = props;
   const debounce = useService('debounce');
   const variables = useVariables().map(name => ({
@@ -13947,7 +14179,7 @@ function Max(props) {
     element: field,
     feel: 'optional',
     id,
-    label: 'Maximum',
+    label: translate('Maximum'),
     step: 'any',
     getValue: getValue('max'),
     setValue: onChange('max'),
@@ -13959,7 +14191,8 @@ function ValidationType(props) {
     field,
     getValue,
     id,
-    onChange
+    onChange,
+    translate
   } = props;
   useService('debounce');
   const setValue = validationType => {
@@ -13969,10 +14202,10 @@ function ValidationType(props) {
     element: field,
     getValue: getValue('validationType'),
     id,
-    label: 'Validation pattern',
+    label: translate('Validation pattern'),
     setValue,
-    getOptions: () => Object.values(VALIDATION_TYPE_OPTIONS),
-    tooltip: getValue('validationType')() === VALIDATION_TYPE_OPTIONS.phone.value ? 'The built-in phone validation pattern is based on the E.164 standard with no spaces. Ex: +491234567890' : undefined
+    getOptions: () => Object.values(VALIDATION_TYPE_OPTIONS(translate)),
+    tooltip: getValue('validationType')() === VALIDATION_TYPE_OPTIONS(translate).phone.value ? translate('The built-in phone validation pattern is based on the E.164 standard with no spaces. Ex: +491234567890') : undefined
   });
 }
 
@@ -13981,6 +14214,7 @@ function OptionsGroups(field, editField, getService) {
     type
   } = field;
   const formFields = getService('formFields');
+  const translate = getService('translate');
   const fieldDefinition = formFields.get(type).config;
   if (!OPTIONS_INPUTS.includes(type) && !hasOptionsGroupsConfigured(fieldDefinition)) {
     return [];
@@ -13996,12 +14230,13 @@ function OptionsGroups(field, editField, getService) {
    */
   const groups = [{
     id,
-    label: 'Options source',
-    tooltip: getValuesTooltip(),
+    label: translate('Options source'),
+    tooltip: getValuesTooltip(translate),
     component: Group,
     entries: OptionsSourceSelectEntry({
       ...context,
-      id
+      id,
+      translate
     })
   }];
   const valuesSource = getOptionsSource(field);
@@ -14009,7 +14244,7 @@ function OptionsGroups(field, editField, getService) {
     const id = 'dynamicOptions';
     groups.push({
       id,
-      label: 'Dynamic options',
+      label: translate('Dynamic options'),
       component: Group,
       entries: InputKeyOptionsSourceEntry({
         ...context,
@@ -14020,18 +14255,22 @@ function OptionsGroups(field, editField, getService) {
     const id = 'staticOptions';
     groups.push({
       id,
-      label: 'Static options',
-      component: ListGroup,
+      label: translate('Static options'),
+      component: props => ListGroup({
+        ...props,
+        translate
+      }),
       ...StaticOptionsSourceEntry({
         ...context,
-        id
+        id,
+        translate
       })
     });
   } else if (valuesSource === OPTIONS_SOURCES.EXPRESSION) {
     const id = 'optionsExpression';
     groups.push({
       id,
-      label: 'Options expression',
+      label: translate('Options expression'),
       component: Group,
       entries: OptionsExpressionEntry({
         ...context,
@@ -14044,15 +14283,16 @@ function OptionsGroups(field, editField, getService) {
 
 // helpers //////////
 
-function getValuesTooltip() {
-  return '"Static" defines a constant, predefined set of form options.\n\n' + '"Input data" defines options that are populated dynamically, adjusting based on variable data for flexible responses to different conditions or inputs.\n\n' + '"Expression" defines options that are populated from a FEEL expression.';
+function getValuesTooltip(translate) {
+  return translate('"Static" defines a constant, predefined set of form options.') + '\n\n' + translate('"Input data" defines options that are populated dynamically, adjusting based on variable data for flexible responses to different conditions or inputs.') + '\n\n' + translate('"Expression" defines options that are populated from a FEEL expression.');
 }
 
-function CustomPropertiesGroup(field, editField) {
+function CustomPropertiesGroup(field, editField, getService) {
   const {
     properties = {},
     type
   } = field;
+  const translate = getService('translate');
   if (type === 'default') {
     return null;
   }
@@ -14073,10 +14313,10 @@ function CustomPropertiesGroup(field, editField) {
         return;
       }
       if (typeof value !== 'string' || value.length === 0) {
-        return 'Must not be empty.';
+        return translate('Must not be empty.');
       }
       if (has(properties, value)) {
-        return 'Must be unique.';
+        return translate('Must be unique.');
       }
     };
   };
@@ -14102,11 +14342,14 @@ function CustomPropertiesGroup(field, editField) {
   });
   return {
     add: addEntry,
-    component: ListGroup,
+    component: props => ListGroup({
+      ...props,
+      translate
+    }),
     id: 'custom-values',
     items,
-    label: 'Custom properties',
-    tooltip: 'Add properties directly to the form schema, useful to configure functionality in custom-built task applications and form renderers.'
+    label: translate('Custom properties'),
+    tooltip: translate('Add properties directly to the form schema, useful to configure functionality in custom-built task applications and form renderers.')
   };
 }
 
@@ -14134,15 +14377,18 @@ function removeKey(properties, oldKey) {
 }
 
 function AppearanceGroup(field, editField, getService) {
+  const translate = getService('translate');
   const entries = [...AdornerEntry({
     field,
     editField
   }), ...GroupAppearanceEntry({
     field,
-    editField
+    editField,
+    translate
   }), ...LayouterAppearanceEntry({
     field,
-    editField
+    editField,
+    translate
   }), ...MaxHeightEntry({
     field,
     editField
@@ -14152,15 +14398,16 @@ function AppearanceGroup(field, editField, getService) {
   }
   return {
     id: 'appearance',
-    label: 'Appearance',
+    label: translate('Appearance'),
     entries
   };
 }
 
-function LayoutGroup(field, editField) {
+function LayoutGroup(field, editField, getService) {
   const {
     type
   } = field;
+  const translate = getService('translate');
   if (type === 'default') {
     return null;
   }
@@ -14173,36 +14420,39 @@ function LayoutGroup(field, editField) {
   }
   return {
     id: 'layout',
-    label: 'Layout',
+    label: translate('Layout'),
     entries
   };
 }
 
-function SecurityAttributesGroup(field, editField) {
+function SecurityAttributesGroup(field, editField, getService) {
   const {
     type
   } = field;
+  const translate = getService('translate');
   if (type !== 'iframe') {
     return null;
   }
   const entries = createEntries({
     field,
-    editField
+    editField,
+    translate
   });
   if (!entries.length) {
     return null;
   }
   return {
     id: 'securityAttributes',
-    label: 'Security attributes',
+    label: translate('Security attributes'),
     entries,
-    tooltip: getTooltip()
+    tooltip: getTooltip(translate)
   };
 }
 function createEntries(props) {
   const {
     editField,
-    field
+    field,
+    translate
   } = props;
   const securityEntries = SECURITY_ATTRIBUTES_DEFINITIONS.map(definition => {
     const {
@@ -14211,7 +14461,7 @@ function createEntries(props) {
     } = definition;
     return simpleBoolEntryFactory({
       id: property,
-      label: label,
+      label: translate(label),
       isDefaultVisible: field => field.type === 'iframe',
       path: ['security', property],
       props,
@@ -14223,32 +14473,37 @@ function createEntries(props) {
     });
   });
   return [{
-    component: Advisory
+    component: () => Advisory({
+      translate
+    })
   }, ...securityEntries];
 }
 const Advisory = props => {
+  const {
+    translate
+  } = props;
   return jsx("div", {
     class: "bio-properties-panel-description fjs-properties-panel-detached-description",
-    children: "These options can incur security risks, especially if used in combination with dynamic links. Ensure that you are aware of them, that you trust the source url and only enable what your use case requires."
+    children: translate('These options can incur security risks, especially if used in combination with dynamic links. Ensure that you are aware of them, that you trust the source url and only enable what your use case requires.')
   });
 };
 
 // helpers //////////
 
-function getTooltip() {
+function getTooltip(translate) {
   return jsx(Fragment$1, {
     children: jsxs("p", {
-      children: ["Allow the iframe to access more functionality of your browser, details regarding the various options can be found in the", ' ', jsx("a", {
+      children: [translate('Allow the iframe to access more functionality of your browser, details regarding the various options can be found in the'), ' ', jsx("a", {
         target: "_blank",
         href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe",
         rel: "noreferrer",
-        children: "MDN iFrame documentation."
+        children: translate('MDN iFrame documentation.')
       })]
     })
   });
 }
 
-function ConditionGroup(field, editField) {
+function ConditionGroup(field, editField, getService) {
   const {
     type
   } = field;
@@ -14259,18 +14514,20 @@ function ConditionGroup(field, editField) {
     field,
     editField
   })];
+  const translate = getService('translate');
   return {
     id: 'condition',
-    label: 'Condition',
+    label: translate('Condition'),
     entries
   };
 }
 
-function TableHeaderGroups(field, editField) {
+function TableHeaderGroups(field, editField, getService) {
   const {
     type,
     id: fieldId
   } = field;
+  const translate = getService('translate');
   if (type !== 'table') {
     return [];
   }
@@ -14281,12 +14538,13 @@ function TableHeaderGroups(field, editField) {
    */
   const groups = [{
     id: `${fieldId}-columnsSource`,
-    label: 'Headers source',
-    tooltip: TOOLTIP_TEXT,
+    label: translate('Headers source'),
+    tooltip: translate('"List of items" defines a constant, predefined set of form options.') + '\n\n' + translate('"Expression" defines options that are populated from a FEEL expression.') + '\n',
     component: Group,
     entries: [...HeadersSourceSelectEntry({
       field,
-      editField
+      editField,
+      translate
     }), ...ColumnsExpressionEntry({
       field,
       editField
@@ -14296,8 +14554,11 @@ function TableHeaderGroups(field, editField) {
     const id = `${fieldId}-columns`;
     groups.push({
       id,
-      label: 'Header items',
-      component: ListGroup,
+      label: translate('Header items'),
+      component: props => ListGroup({
+        ...props,
+        translate
+      }),
       ...StaticColumnsSourceEntry({
         field,
         editField,
@@ -14308,13 +14569,6 @@ function TableHeaderGroups(field, editField) {
   return groups;
 }
 
-// helpers //////////
-
-const TOOLTIP_TEXT = `"List of items" defines a constant, predefined set of form options.
-
-"Expression" defines options that are populated from a FEEL expression.
-`;
-
 class PropertiesProvider {
   constructor(propertiesPanel, injector) {
     this._injector = injector;
@@ -14350,7 +14604,7 @@ class PropertiesProvider {
         return groups;
       }
       const getService = (type, strict = true) => this._injector.get(type, strict);
-      groups = [...groups, GeneralGroup(field, editField, getService), ...OptionsGroups(field, editField, getService), ...TableHeaderGroups(field, editField), SecurityAttributesGroup(field, editField), ConditionGroup(field, editField), LayoutGroup(field, editField), AppearanceGroup(field, editField), SerializationGroup(field, editField), ConstraintsGroup(field, editField), ValidationGroup(field, editField), CustomPropertiesGroup(field, editField)].filter(group => group != null);
+      groups = [...groups, GeneralGroup(field, editField, getService), ...OptionsGroups(field, editField, getService), ...TableHeaderGroups(field, editField, getService), SecurityAttributesGroup(field, editField, getService), ConditionGroup(field, editField, getService), LayoutGroup(field, editField, getService), AppearanceGroup(field, editField, getService), SerializationGroup(field, editField, getService), ConstraintsGroup(field, editField, getService), ValidationGroup(field, editField, getService), CustomPropertiesGroup(field, editField, getService)].filter(group => group != null);
       this._filterVisibleEntries(groups, field, getService);
 
       // contract: if a group has no entries or items, it should not be displayed at all
@@ -14584,9 +14838,10 @@ var SvgRepeat = function SvgRepeat(props) {
 };
 
 class EditorRepeatRenderManager {
-  constructor(formFields, formFieldRegistry) {
+  constructor(formFields, formFieldRegistry, translate) {
     this._formFields = formFields;
     this._formFieldRegistry = formFieldRegistry;
+    this._translate = translate;
     this.RepeatFooter = this.RepeatFooter.bind(this);
   }
 
@@ -14608,12 +14863,12 @@ class EditorRepeatRenderManager {
     return jsxs("div", {
       className: "fjs-repeat-render-footer",
       children: [jsx(SvgRepeat, {}), jsx("span", {
-        children: "Repeatable"
+        children: this._translate('Repeatable')
       })]
     });
   }
 }
-EditorRepeatRenderManager.$inject = ['formFields', 'formFieldRegistry'];
+EditorRepeatRenderManager.$inject = ['formFields', 'formFieldRegistry', 'translate'];
 
 const RepeatRenderModule = {
   __init__: ['repeatRenderManager'],
@@ -14841,7 +15096,7 @@ class FormEditor {
       config: ['value', enrichedConfig]
     }, {
       formEditor: ['value', this]
-    }, CoreModule, ...modules, ...additionalModules]);
+    }, TranslateModule, CoreModule, ...modules, ...additionalModules]);
   }
 
   /**