@form-engine-ts/react 4.7.0 → 5.0.0

package/dist/index.js

@@ -102,7 +102,7 @@ import {
   DEFAULT_FIELD_TYPE_DEFINITIONS,
   populateSchemaTranslations
 } from "@form-engine-ts/core";
-import { Children, createContext, isValidElement, useContext, useState as useState2 } from "react";
+import { Children, createContext as createContext2, isValidElement, useContext as useContext2, useState as useState2 } from "react";
 
 // src/hooks/useFormBuilder.ts
 import {
@@ -921,8 +921,42 @@ function resolveTranslation(key, aliases, adapter, defaultCatalog, params = {},
   return key;
 }
 
+// src/i18n/provider.tsx
+import { createFormEngineTranslator } from "@form-engine-ts/core";
+import { createContext, useContext, useMemo as useMemo2 } from "react";
+import { jsx } from "react/jsx-runtime";
+var defaultTranslator = createFormEngineTranslator({ locale: "ja" });
+var FormEngineI18nContext = createContext({
+  uiLocale: "ja",
+  translator: defaultTranslator
+});
+var FormEngineI18nProviderScopeContext = createContext(false);
+function FormEngineI18nProvider({
+  locale = "ja",
+  fallbackLocale = "en",
+  messages,
+  customCatalogs,
+  translator: customTranslator,
+  children
+}) {
+  const translator = useMemo2(() => {
+    if (customTranslator !== void 0) return customTranslator;
+    return createFormEngineTranslator({
+      locale,
+      fallbackLocale,
+      ...messages === void 0 ? {} : { messages },
+      ...customCatalogs === void 0 ? {} : { customCatalogs }
+    });
+  }, [customCatalogs, customTranslator, fallbackLocale, locale, messages]);
+  const value = useMemo2(() => ({ uiLocale: locale, translator }), [locale, translator]);
+  return /* @__PURE__ */ jsx(FormEngineI18nProviderScopeContext.Provider, { value: true, children: /* @__PURE__ */ jsx(FormEngineI18nContext.Provider, { value, children }) });
+}
+function useFormEngineI18n() {
+  return useContext(FormEngineI18nContext);
+}
+
 // src/builder.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 function DefaultButton({
   id,
   className,
@@ -936,7 +970,7 @@ function DefaultButton({
   action,
   targetId
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "button",
     {
       id,
@@ -955,7 +989,7 @@ function DefaultButton({
   );
 }
 function DefaultIconButton(props) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     DefaultButton,
     {
       ...props.id === void 0 ? {} : { id: props.id },
@@ -1034,10 +1068,10 @@ function DefaultTextInput({
   max,
   step
 }) {
-  const labelElement = label === void 0 ? null : id === void 0 ? /* @__PURE__ */ jsx("span", { children: label }) : /* @__PURE__ */ jsx("label", { htmlFor: id, children: label });
+  const labelElement = label === void 0 ? null : id === void 0 ? /* @__PURE__ */ jsx2("span", { children: label }) : /* @__PURE__ */ jsx2("label", { htmlFor: id, children: label });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     labelElement,
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx2(
       "input",
       {
         id,
@@ -1061,7 +1095,7 @@ function DefaultTextInput({
         onChange: (event) => onChange(event.currentTarget.value)
       }
     ),
-    helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx("small", { id: ariaDescribedBy, children: helperText })
+    helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx2("small", { id: ariaDescribedBy, children: helperText })
   ] });
 }
 function DefaultTextArea({
@@ -1083,10 +1117,10 @@ function DefaultTextArea({
   placeholder,
   maxLength
 }) {
-  const labelElement = label === void 0 ? null : id === void 0 ? /* @__PURE__ */ jsx("span", { children: label }) : /* @__PURE__ */ jsx("label", { htmlFor: id, children: label });
+  const labelElement = label === void 0 ? null : id === void 0 ? /* @__PURE__ */ jsx2("span", { children: label }) : /* @__PURE__ */ jsx2("label", { htmlFor: id, children: label });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     labelElement,
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx2(
       "textarea",
       {
         id,
@@ -1106,7 +1140,7 @@ function DefaultTextArea({
         onChange: (event) => onChange(event.currentTarget.value)
       }
     ),
-    helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx("small", { id: ariaDescribedBy, children: helperText })
+    helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx2("small", { id: ariaDescribedBy, children: helperText })
   ] });
 }
 function DefaultSelect({
@@ -1132,10 +1166,10 @@ function DefaultSelect({
     (option) => typeof option === "string" ? { value: option, label: option } : option
   );
   const selectedOption = normalizedOptions.find((option) => option.value === value);
-  const labelElement = label === void 0 ? null : id === void 0 ? /* @__PURE__ */ jsx("span", { children: label }) : /* @__PURE__ */ jsx("label", { htmlFor: id, children: label });
+  const labelElement = label === void 0 ? null : id === void 0 ? /* @__PURE__ */ jsx2("span", { children: label }) : /* @__PURE__ */ jsx2("label", { htmlFor: id, children: label });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     labelElement,
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx2(
       "select",
       {
         id,
@@ -1150,11 +1184,11 @@ function DefaultSelect({
         value,
         onChange: (event) => onChange(event.currentTarget.value),
         onKeyDown,
-        children: normalizedOptions.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, disabled: option.disabled, children: renderOption === void 0 ? option.label : renderOption(option) }, option.value))
+        children: normalizedOptions.map((option) => /* @__PURE__ */ jsx2("option", { value: option.value, disabled: option.disabled, children: renderOption === void 0 ? option.label : renderOption(option) }, option.value))
       }
     ),
-    renderValue === void 0 ? null : /* @__PURE__ */ jsx("output", { children: renderValue(selectedOption) }),
-    helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx("small", { id: ariaDescribedBy, children: helperText })
+    renderValue === void 0 ? null : /* @__PURE__ */ jsx2("output", { children: renderValue(selectedOption) }),
+    helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx2("small", { id: ariaDescribedBy, children: helperText })
   ] });
 }
 function DefaultCheckbox({
@@ -1175,7 +1209,7 @@ function DefaultCheckbox({
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("label", { className, children: [
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx2(
         "input",
         {
           id,
@@ -1193,7 +1227,7 @@ function DefaultCheckbox({
       ),
       label
     ] }),
-    helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx("small", { id: ariaDescribedBy, children: helperText })
+    helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx2("small", { id: ariaDescribedBy, children: helperText })
   ] });
 }
 function DefaultSection({
@@ -1215,8 +1249,8 @@ function DefaultSection({
       "aria-labelledby": title === void 0 ? void 0 : headingId,
       onClickCapture,
       children: [
-        title === void 0 ? null : /* @__PURE__ */ jsx("h2", { id: headingId, children: title }),
-        description === void 0 ? null : /* @__PURE__ */ jsx("p", { children: description }),
+        title === void 0 ? null : /* @__PURE__ */ jsx2("h2", { id: headingId, children: title }),
+        description === void 0 ? null : /* @__PURE__ */ jsx2("p", { children: description }),
         children
       ]
     }
@@ -1224,12 +1258,12 @@ function DefaultSection({
 }
 function DefaultFieldset({ className, legend, disabled, children }) {
   return /* @__PURE__ */ jsxs("fieldset", { className, disabled, children: [
-    legend === void 0 ? null : /* @__PURE__ */ jsx("legend", { children: legend }),
+    legend === void 0 ? null : /* @__PURE__ */ jsx2("legend", { children: legend }),
     children
   ] });
 }
 function DefaultErrorMessage({ className, message }) {
-  return /* @__PURE__ */ jsx("p", { className, children: message });
+  return /* @__PURE__ */ jsx2("p", { className, children: message });
 }
 var DEFAULT_COMPONENTS = {
   Button: DefaultButton,
@@ -1244,7 +1278,7 @@ var DEFAULT_COMPONENTS = {
   renderIcon: defaultIconFor,
   renderFieldTypeIcon: defaultFieldTypeIcon
 };
-var BuilderPrimitiveContext = createContext({
+var BuilderPrimitiveContext = createContext2({
   components: DEFAULT_COMPONENTS,
   readOnly: false,
   unstyled: false
@@ -1258,9 +1292,9 @@ function primitiveClassName(className, defaultClassName, unstyled) {
   return [unstyled ? void 0 : defaultClassName, userClassName].filter((value) => value !== void 0).join(" ") || void 0;
 }
 function BuilderButton(props) {
-  const context = useContext(BuilderPrimitiveContext);
+  const context = useContext2(BuilderPrimitiveContext);
   const Component = context.components.Button;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     Component,
     {
       ...props,
@@ -1271,10 +1305,10 @@ function BuilderButton(props) {
   );
 }
 function BuilderIconButton(props) {
-  const context = useContext(BuilderPrimitiveContext);
+  const context = useContext2(BuilderPrimitiveContext);
   const Component = context.components.IconButton;
   const icon = props.actionType === void 0 ? props.icon ?? void 0 : context.components.renderIcon(props.actionType) ?? props.icon ?? defaultIconFor(props.actionType);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     Component,
     {
       ...props,
@@ -1286,9 +1320,9 @@ function BuilderIconButton(props) {
   );
 }
 function BuilderTextInput(props) {
-  const context = useContext(BuilderPrimitiveContext);
+  const context = useContext2(BuilderPrimitiveContext);
   const Component = context.components.TextInput;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     Component,
     {
       ...props,
@@ -1299,9 +1333,9 @@ function BuilderTextInput(props) {
   );
 }
 function BuilderTextArea(props) {
-  const context = useContext(BuilderPrimitiveContext);
+  const context = useContext2(BuilderPrimitiveContext);
   const Component = context.components.TextArea;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     Component,
     {
       ...props,
@@ -1312,9 +1346,9 @@ function BuilderTextArea(props) {
   );
 }
 function BuilderSelect(props) {
-  const context = useContext(BuilderPrimitiveContext);
+  const context = useContext2(BuilderPrimitiveContext);
   const Component = context.components.Select;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     Component,
     {
       ...props,
@@ -1325,9 +1359,9 @@ function BuilderSelect(props) {
   );
 }
 function BuilderCheckbox(props) {
-  const context = useContext(BuilderPrimitiveContext);
+  const context = useContext2(BuilderPrimitiveContext);
   const Component = context.components.Checkbox;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     Component,
     {
       ...props,
@@ -1338,18 +1372,18 @@ function BuilderCheckbox(props) {
   );
 }
 function BuilderSection(props) {
-  const Component = useContext(BuilderPrimitiveContext).components.Section;
-  return /* @__PURE__ */ jsx(Component, { ...props });
+  const Component = useContext2(BuilderPrimitiveContext).components.Section;
+  return /* @__PURE__ */ jsx2(Component, { ...props });
 }
 function BuilderFieldset(props) {
-  const context = useContext(BuilderPrimitiveContext);
+  const context = useContext2(BuilderPrimitiveContext);
   const Component = context.components.Fieldset;
-  return /* @__PURE__ */ jsx(Component, { ...props, disabled: context.readOnly || props.disabled === true });
+  return /* @__PURE__ */ jsx2(Component, { ...props, disabled: context.readOnly || props.disabled === true });
 }
 function BuilderErrorMessage(props) {
-  const context = useContext(BuilderPrimitiveContext);
+  const context = useContext2(BuilderPrimitiveContext);
   const Component = context.components.ErrorMessage;
-  return /* @__PURE__ */ jsx("div", { className: primitiveClassName(props.className, "form-engine-builder__error", context.unstyled), children: /* @__PURE__ */ jsx(Component, { message: props.message }) });
+  return /* @__PURE__ */ jsx2("div", { className: primitiveClassName(props.className, "form-engine-builder__error", context.unstyled), children: /* @__PURE__ */ jsx2(Component, { message: props.message }) });
 }
 var GUARDED_COMPONENTS = {
   Button: BuilderButton,
@@ -1615,7 +1649,7 @@ function ConditionValueEditor({
   if (condition.operator === "not_empty") return null;
   const update = (value) => onChange({ ...condition, value });
   if (source.type === "checkbox") {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx2(
       Select,
       {
         value: String(condition.value),
@@ -1628,7 +1662,7 @@ function ConditionValueEditor({
     );
   }
   if (source.type === "number" || source.type === "rating") {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx2(
       TextInput,
       {
         "aria-label": translate("builder.conditionValue"),
@@ -1639,7 +1673,7 @@ function ConditionValueEditor({
     );
   }
   if ("options" in source) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx2(
       Select,
       {
         value: String(condition.value ?? ""),
@@ -1648,7 +1682,7 @@ function ConditionValueEditor({
       }
     );
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     TextInput,
     {
       "aria-label": translate("builder.conditionValue"),
@@ -1668,7 +1702,7 @@ function resolveInitialFieldType(defaultType, allowedTypes) {
 function FormBuilder({
   schema,
   onChange,
-  locale = "en",
+  locale: explicitLocale,
   translator,
   translationAdapter,
   translationOptions,
@@ -1695,6 +1729,12 @@ function FormBuilder({
   onActiveFieldChange,
   submissionSettingsOptions
 }) {
+  const i18n = useFormEngineI18n();
+  const isProviderValue = useContext2(FormEngineI18nProviderScopeContext);
+  const locale = explicitLocale ?? (isProviderValue ? i18n.uiLocale : "en");
+  const resolvedTranslator = translator ?? (isProviderValue ? {
+    translate: (key, _locale, params) => params === void 0 ? i18n.translator(key) : i18n.translator(key, { ...params })
+  } : void 0);
   const resolvedComponents = { ...DEFAULT_COMPONENTS, ...componentOverrides };
   const components = {
     ...GUARDED_COMPONENTS,
@@ -1731,7 +1771,7 @@ function FormBuilder({
   const translate = (key, params = {}) => resolveTranslation(
     key,
     BUILDER_TRANSLATION_ALIASES[key] === void 0 ? [] : [BUILDER_TRANSLATION_ALIASES[key]],
-    translator,
+    resolvedTranslator,
     BUILDER_DEFAULTS,
     params,
     locale
@@ -2000,11 +2040,11 @@ function FormBuilder({
       params: { locale: targetLocale }
     })
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     BuilderPrimitiveContext.Provider,
     {
       value: { components: resolvedComponents, readOnly, unstyled: defaultStylesDisabled },
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx2(
         Section,
         {
           className: defaultStylesDisabled ? className || void 0 : `form-engine-builder ${className}`.trim(),
@@ -2024,15 +2064,15 @@ function FormBuilder({
               addOption(fieldId);
             }
           },
-          children: /* @__PURE__ */ jsx(Fieldset, { className: builderClass("form-engine-builder__controls"), disabled: readOnly, children: /* @__PURE__ */ jsxs(OrderedBuilderSections, { ...resolvedSectionOrder === void 0 ? {} : { order: resolvedSectionOrder }, children: [
-            /* @__PURE__ */ jsx(BuilderSectionGroup, { name: "basicSettings", children: /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsx2(Fieldset, { className: builderClass("form-engine-builder__controls"), disabled: readOnly, children: /* @__PURE__ */ jsxs(OrderedBuilderSections, { ...resolvedSectionOrder === void 0 ? {} : { order: resolvedSectionOrder }, children: [
+            /* @__PURE__ */ jsx2(BuilderSectionGroup, { name: "basicSettings", children: /* @__PURE__ */ jsx2(
               Section,
               {
                 className: builderClass("form-engine-builder__basic-settings"),
                 headingId: "builder-basic-settings-heading",
                 title: translate("builder.basicSettings"),
                 children: /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
-                  /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                     TextInput,
                     {
                       id: "builder-form-title",
@@ -2046,7 +2086,7 @@ function FormBuilder({
                       onChange: (value) => setSourceText({ kind: "form" }, "title", value)
                     }
                   ) }),
-                  /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                     TextArea,
                     {
                       id: "builder-form-description",
@@ -2060,13 +2100,13 @@ function FormBuilder({
                 ] })
               }
             ) }),
-            /* @__PURE__ */ jsx(BuilderSectionGroup, { name: "submissionSettings", children: submissionSettingsOptions?.enabled ? /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx2(BuilderSectionGroup, { name: "submissionSettings", children: submissionSettingsOptions?.enabled ? /* @__PURE__ */ jsxs(
               Section,
               {
                 className: builderClass("form-engine-builder__submission-settings"),
                 title: translate("builder.submissionSettings"),
                 children: [
-                  /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsx2(
                     Checkbox,
                     {
                       id: "builder-show-confirmation",
@@ -2078,7 +2118,7 @@ function FormBuilder({
                       })
                     }
                   ),
-                  /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsx2(
                     Select,
                     {
                       id: "builder-confirmation-render-mode",
@@ -2101,7 +2141,7 @@ function FormBuilder({
                 ]
               }
             ) : null }),
-            resolvedSectionOrder === void 0 ? null : /* @__PURE__ */ jsx(BuilderSectionGroup, { name: "completionMessage", children: /* @__PURE__ */ jsx(Section, { headingId: "builder-completion-message-heading", title: translate("builder.completionMessage"), children: /* @__PURE__ */ jsx(
+            resolvedSectionOrder === void 0 ? null : /* @__PURE__ */ jsx2(BuilderSectionGroup, { name: "completionMessage", children: /* @__PURE__ */ jsx2(Section, { headingId: "builder-completion-message-heading", title: translate("builder.completionMessage"), children: /* @__PURE__ */ jsx2(
               TextInput,
               {
                 id: "builder-completion-message",
@@ -2110,13 +2150,13 @@ function FormBuilder({
                 onChange: (value) => setSourceText({ kind: "form" }, "completionMessage", value)
               }
             ) }) }),
-            /* @__PURE__ */ jsx(BuilderSectionGroup, { name: "questions", children: pagesEnabled ? PagesSlot === void 0 ? /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(BuilderSectionGroup, { name: "questions", children: pagesEnabled ? PagesSlot === void 0 ? /* @__PURE__ */ jsx2(
               Section,
               {
                 className: builderClass("form-engine-builder__pages"),
                 headingId: "builder-pages-heading",
                 title: translate("builder.pages"),
-                children: schema.pages === void 0 ? /* @__PURE__ */ jsx(Button, { onClick: enablePages, children: translate("builder.enablePages") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                children: schema.pages === void 0 ? /* @__PURE__ */ jsx2(Button, { onClick: enablePages, children: translate("builder.enablePages") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                   schema.pages.map((page, pageIndex) => {
                     const priorQuestionIds = new Set(
                       schema.pages?.slice(0, pageIndex).flatMap((item) => item.questionIds)
@@ -2129,8 +2169,8 @@ function FormBuilder({
                         className: builderClass("form-engine-builder__page"),
                         legend: page.title ?? `${translate("builder.newPage")} ${pageIndex + 1}`,
                         children: [
-                          /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__toolbar"), children: ToolbarSlot === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                            /* @__PURE__ */ jsx(
+                          /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__toolbar"), children: ToolbarSlot === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsx2(
                               IconButton,
                               {
                                 actionType: "moveUp",
@@ -2139,7 +2179,7 @@ function FormBuilder({
                                 onClick: () => movePage(pageIndex, -1)
                               }
                             ),
-                            /* @__PURE__ */ jsx(
+                            /* @__PURE__ */ jsx2(
                               IconButton,
                               {
                                 actionType: "moveDown",
@@ -2148,7 +2188,7 @@ function FormBuilder({
                                 onClick: () => movePage(pageIndex, 1)
                               }
                             ),
-                            /* @__PURE__ */ jsx(
+                            /* @__PURE__ */ jsx2(
                               IconButton,
                               {
                                 actionType: "delete",
@@ -2156,7 +2196,7 @@ function FormBuilder({
                                 onClick: () => removePage(pageIndex)
                               }
                             )
-                          ] }) : /* @__PURE__ */ jsx(
+                          ] }) : /* @__PURE__ */ jsx2(
                             ToolbarSlot,
                             {
                               schema,
@@ -2175,7 +2215,7 @@ function FormBuilder({
                             }
                           ) }),
                           /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
-                            /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                            /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                               TextInput,
                               {
                                 id: `builder-page-${page.id}-title`,
@@ -2190,7 +2230,7 @@ function FormBuilder({
                                 }
                               }
                             ) }),
-                            /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                            /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                               TextInput,
                               {
                                 id: `builder-page-${page.id}-description`,
@@ -2207,9 +2247,9 @@ function FormBuilder({
                             ) })
                           ] }),
                           !localizationEnabled || editingLocale.length === 0 ? null : /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__translation-editor"), children: [
-                            /* @__PURE__ */ jsx("strong", { children: editingLocale }),
+                            /* @__PURE__ */ jsx2("strong", { children: editingLocale }),
                             /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
-                              /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                              /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                                 TextInput,
                                 {
                                   id: `builder-page-${page.id}-${editingLocale}-title`,
@@ -2228,7 +2268,7 @@ function FormBuilder({
                                   })
                                 }
                               ) }),
-                              /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                              /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                                 TextInput,
                                 {
                                   id: `builder-page-${page.id}-${editingLocale}-description`,
@@ -2250,7 +2290,7 @@ function FormBuilder({
                             ] })
                           ] }),
                           conditionsEnabled ? /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__condition"), children: [
-                            /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                            /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                               Select,
                               {
                                 id: `builder-page-${page.id}-condition`,
@@ -2280,7 +2320,7 @@ function FormBuilder({
                               }
                             ) }),
                             page.displayCondition !== void 0 && source !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                              /* @__PURE__ */ jsx(
+                              /* @__PURE__ */ jsx2(
                                 Select,
                                 {
                                   "aria-label": translate("builder.conditionOperator"),
@@ -2302,7 +2342,7 @@ function FormBuilder({
                                   }))
                                 }
                               ),
-                              /* @__PURE__ */ jsx(
+                              /* @__PURE__ */ jsx2(
                                 ConditionValueEditor,
                                 {
                                   source,
@@ -2323,7 +2363,7 @@ function FormBuilder({
                     );
                   }),
                   /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__page-add"), children: [
-                    /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                       Select,
                       {
                         id: "builder-page-question",
@@ -2337,11 +2377,11 @@ function FormBuilder({
                         ]
                       }
                     ) }),
-                    /* @__PURE__ */ jsx(Button, { disabled: movablePageQuestions.length === 0, onClick: addPage, children: translate("builder.addPage") })
+                    /* @__PURE__ */ jsx2(Button, { disabled: movablePageQuestions.length === 0, onClick: addPage, children: translate("builder.addPage") })
                   ] })
                 ] })
               }
-            ) : /* @__PURE__ */ jsx(
+            ) : /* @__PURE__ */ jsx2(
               PagesSlot,
               {
                 schema,
@@ -2353,14 +2393,14 @@ function FormBuilder({
                 components
               }
             ) : null }),
-            /* @__PURE__ */ jsx(BuilderSectionGroup, { name: "localization", children: localizationEnabled ? LocalizationSlot === void 0 ? /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx2(BuilderSectionGroup, { name: "localization", children: localizationEnabled ? LocalizationSlot === void 0 ? /* @__PURE__ */ jsxs(
               Section,
               {
                 className: builderClass("form-engine-builder__localization"),
                 headingId: "builder-localization-heading",
                 title: translate("builder.localization"),
                 children: [
-                  resolvedSectionOrder === void 0 ? /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                  resolvedSectionOrder === void 0 ? /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                     TextInput,
                     {
                       id: "builder-completion-message",
@@ -2370,7 +2410,7 @@ function FormBuilder({
                     }
                   ) }) : null,
                   /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
-                    /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                       TextInput,
                       {
                         id: "builder-default-locale",
@@ -2379,7 +2419,7 @@ function FormBuilder({
                         onChange: setDefaultLocale
                       }
                     ) }),
-                    /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: availableAllowedLocales === void 0 ? /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: availableAllowedLocales === void 0 ? /* @__PURE__ */ jsx2(
                       TextInput,
                       {
                         id: "builder-new-locale",
@@ -2387,7 +2427,7 @@ function FormBuilder({
                         value: newLocale,
                         onChange: setNewLocale
                       }
-                    ) : /* @__PURE__ */ jsx(
+                    ) : /* @__PURE__ */ jsx2(
                       Select,
                       {
                         id: "builder-new-locale",
@@ -2400,7 +2440,7 @@ function FormBuilder({
                         ]
                       }
                     ) }),
-                    /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx2(
                       Button,
                       {
                         action: "addLocale",
@@ -2409,7 +2449,7 @@ function FormBuilder({
                         children: translate("builder.addLocale")
                       }
                     ),
-                    /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                       Select,
                       {
                         id: "builder-edit-locale",
@@ -2422,14 +2462,14 @@ function FormBuilder({
                         ]
                       }
                     ) }),
-                    TranslationActionsSlot === void 0 ? /* @__PURE__ */ jsx(
+                    TranslationActionsSlot === void 0 ? /* @__PURE__ */ jsx2(
                       Button,
                       {
                         disabled: translationAdapter === void 0 || editingLocale.length === 0 || isTranslating,
                         onClick: () => void translateAll(),
                         children: translate("builder.autoTranslate")
                       }
-                    ) : /* @__PURE__ */ jsx(
+                    ) : /* @__PURE__ */ jsx2(
                       TranslationActionsSlot,
                       {
                         schema,
@@ -2447,10 +2487,10 @@ function FormBuilder({
                       }
                     )
                   ] }),
-                  translationAdapter === void 0 ? /* @__PURE__ */ jsx("p", { children: translate("builder.translationUnavailable") }) : null,
-                  translationError === null ? null : /* @__PURE__ */ jsx(ErrorMessage, { message: translationError }),
+                  translationAdapter === void 0 ? /* @__PURE__ */ jsx2("p", { children: translate("builder.translationUnavailable") }) : null,
+                  translationError === null ? null : /* @__PURE__ */ jsx2(ErrorMessage, { message: translationError }),
                   editingLocale.length === 0 ? null : /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
-                    /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                       TextInput,
                       {
                         id: `builder-${editingLocale}-form-title`,
@@ -2459,7 +2499,7 @@ function FormBuilder({
                         onChange: (value) => updateFormTranslation("title", value)
                       }
                     ) }),
-                    /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                       TextInput,
                       {
                         id: `builder-${editingLocale}-form-description`,
@@ -2468,7 +2508,7 @@ function FormBuilder({
                         onChange: (value) => updateFormTranslation("description", value)
                       }
                     ) }),
-                    /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                       TextInput,
                       {
                         id: `builder-${editingLocale}-completion-message`,
@@ -2480,7 +2520,7 @@ function FormBuilder({
                   ] })
                 ]
               }
-            ) : /* @__PURE__ */ jsx(
+            ) : /* @__PURE__ */ jsx2(
               LocalizationSlot,
               {
                 schema,
@@ -2497,7 +2537,7 @@ function FormBuilder({
                 components
               }
             ) : null }),
-            /* @__PURE__ */ jsx(BuilderSectionGroup, { name: "questions", children: /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__list"), children: schema.fields.map((field, index) => {
+            /* @__PURE__ */ jsx2(BuilderSectionGroup, { name: "questions", children: /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__list"), children: schema.fields.map((field, index) => {
               const controls = resolveFieldEditorControls(fieldEditorControls);
               const editorState = headless.getFieldEditorProps?.(field.id) ?? {
                 isActive: true,
@@ -2508,18 +2548,18 @@ function FormBuilder({
               const source = condition === void 0 ? void 0 : schema.fields.find((item) => item.id === condition.questionId);
               const availableSources = schema.fields.slice(0, index);
               if (!editorState.isVisible) {
-                return /* @__PURE__ */ jsx(
+                return /* @__PURE__ */ jsx2(
                   "div",
                   {
                     className: builderClass("form-engine-builder__question-preview"),
                     "data-field-id": field.id,
-                    children: /* @__PURE__ */ jsx("button", { type: "button", onClick: editorState.onSelect, children: field.title })
+                    children: /* @__PURE__ */ jsx2("button", { type: "button", onClick: editorState.onSelect, children: field.title })
                   },
                   field.id
                 );
               }
               if (FieldEditorSlot !== void 0) {
-                return /* @__PURE__ */ jsx(
+                return /* @__PURE__ */ jsx2(
                   FieldEditorSlot,
                   {
                     schema,
@@ -2545,8 +2585,8 @@ function FormBuilder({
                   className: builderClass("form-engine-builder__question"),
                   legend: field.title,
                   children: [
-                    /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__toolbar"), children: ToolbarSlot === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__toolbar"), children: ToolbarSlot === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx2(
                         IconButton,
                         {
                           actionType: "moveUp",
@@ -2555,7 +2595,7 @@ function FormBuilder({
                           onClick: () => moveField(index, -1)
                         }
                       ),
-                      /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx2(
                         IconButton,
                         {
                           actionType: "moveDown",
@@ -2564,7 +2604,7 @@ function FormBuilder({
                           onClick: () => moveField(index, 1)
                         }
                       ),
-                      /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx2(
                         IconButton,
                         {
                           actionType: "delete",
@@ -2574,7 +2614,7 @@ function FormBuilder({
                           title: translate("builder.delete", { title: field.title })
                         }
                       )
-                    ] }) : /* @__PURE__ */ jsx(
+                    ] }) : /* @__PURE__ */ jsx2(
                       ToolbarSlot,
                       {
                         schema,
@@ -2593,7 +2633,7 @@ function FormBuilder({
                       }
                     ) }),
                     /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
-                      controls.title === "hidden" ? null : /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                      controls.title === "hidden" ? null : /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                         TextInput,
                         {
                           id: `builder-field-${field.id}-title`,
@@ -2612,7 +2652,7 @@ function FormBuilder({
                           }))
                         }
                       ) }),
-                      controls.typeSelect === "hidden" ? null : /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                      controls.typeSelect === "hidden" ? null : /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                         Select,
                         {
                           id: `builder-field-${field.id}-type`,
@@ -2629,7 +2669,7 @@ function FormBuilder({
                           )
                         }
                       ) }),
-                      controls.required === "hidden" ? null : /* @__PURE__ */ jsx(
+                      controls.required === "hidden" ? null : /* @__PURE__ */ jsx2(
                         Checkbox,
                         {
                           className: builderClass("form-engine-builder__check"),
@@ -2640,7 +2680,7 @@ function FormBuilder({
                         }
                       )
                     ] }),
-                    controls.description === "hidden" ? null : /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                    controls.description === "hidden" ? null : /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                       TextArea,
                       {
                         id: `builder-field-${field.id}-description`,
@@ -2655,7 +2695,7 @@ function FormBuilder({
                         })
                       }
                     ) }),
-                    !pagesEnabled || schema.pages === void 0 ? null : /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                    !pagesEnabled || schema.pages === void 0 ? null : /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                       Select,
                       {
                         id: `builder-field-${field.id}-page`,
@@ -2669,9 +2709,9 @@ function FormBuilder({
                       }
                     ) }),
                     !localizationEnabled || editingLocale.length === 0 ? null : /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__translation-editor"), children: [
-                      /* @__PURE__ */ jsx("strong", { children: editingLocale }),
+                      /* @__PURE__ */ jsx2("strong", { children: editingLocale }),
                       /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
-                        /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                        /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                           TextInput,
                           {
                             id: `builder-field-${field.id}-${editingLocale}-title`,
@@ -2690,7 +2730,7 @@ function FormBuilder({
                             })
                           }
                         ) }),
-                        controls.description === "hidden" ? null : /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                        controls.description === "hidden" ? null : /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                           TextInput,
                           {
                             id: `builder-field-${field.id}-${editingLocale}-description`,
@@ -2711,7 +2751,7 @@ function FormBuilder({
                           }
                         ) })
                       ] }),
-                      "options" in field ? field.options.map((option, optionIndex) => /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                      "options" in field ? field.options.map((option, optionIndex) => /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                         TextInput,
                         {
                           id: `builder-option-${option.id}-${editingLocale}`,
@@ -2732,7 +2772,7 @@ function FormBuilder({
                       ) }, option.id)) : null
                     ] }),
                     field.type === "rating" && controls.ratingBounds !== "hidden" ? /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
-                      /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                         TextInput,
                         {
                           id: `builder-field-${field.id}-minimum`,
@@ -2750,7 +2790,7 @@ function FormBuilder({
                           }
                         }
                       ) }),
-                      /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                         TextInput,
                         {
                           id: `builder-field-${field.id}-maximum`,
@@ -2770,7 +2810,7 @@ function FormBuilder({
                       ) })
                     ] }) : null,
                     (field.type === "text" || field.type === "textarea") && controls.textLimits !== "hidden" ? /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
-                      /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                         TextInput,
                         {
                           id: `builder-field-${field.id}-min-length`,
@@ -2785,7 +2825,7 @@ function FormBuilder({
                           })
                         }
                       ) }),
-                      /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                         TextInput,
                         {
                           id: `builder-field-${field.id}-max-length`,
@@ -2800,7 +2840,7 @@ function FormBuilder({
                           })
                         }
                       ) }),
-                      /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                         TextInput,
                         {
                           id: `builder-field-${field.id}-pattern`,
@@ -2814,7 +2854,7 @@ function FormBuilder({
                         }
                       ) })
                     ] }) : null,
-                    field.type === "number" && controls.numberLimits !== "hidden" ? /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__grid"), children: ["min", "max", "step"].map((property) => /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                    field.type === "number" && controls.numberLimits !== "hidden" ? /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__grid"), children: ["min", "max", "step"].map((property) => /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                       TextInput,
                       {
                         id: `builder-field-${field.id}-${property}`,
@@ -2836,10 +2876,10 @@ function FormBuilder({
                       }
                     ) }, property)) }) : null,
                     "options" in field && controls.options !== "hidden" ? /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__options"), children: [
-                      /* @__PURE__ */ jsx("strong", { children: translate("builder.options") }),
+                      /* @__PURE__ */ jsx2("strong", { children: translate("builder.options") }),
                       field.options.map(
                         (option, optionIndex) => OptionEditorSlot === void 0 ? /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__option"), children: [
-                          /* @__PURE__ */ jsx(
+                          /* @__PURE__ */ jsx2(
                             TextInput,
                             {
                               id: `builder-option-${option.id}`,
@@ -2851,7 +2891,7 @@ function FormBuilder({
                             }
                           ),
                           ToolbarSlot === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                            /* @__PURE__ */ jsx(
+                            /* @__PURE__ */ jsx2(
                               IconButton,
                               {
                                 actionType: "moveUp",
@@ -2860,7 +2900,7 @@ function FormBuilder({
                                 onClick: () => moveOption(field.id, option.id, optionIndex - 1)
                               }
                             ),
-                            /* @__PURE__ */ jsx(
+                            /* @__PURE__ */ jsx2(
                               IconButton,
                               {
                                 actionType: "moveDown",
@@ -2869,7 +2909,7 @@ function FormBuilder({
                                 onClick: () => moveOption(field.id, option.id, optionIndex + 1)
                               }
                             ),
-                            /* @__PURE__ */ jsx(
+                            /* @__PURE__ */ jsx2(
                               IconButton,
                               {
                                 actionType: "delete",
@@ -2878,7 +2918,7 @@ function FormBuilder({
                                 title: translate("builder.remove")
                               }
                             )
-                          ] }) : /* @__PURE__ */ jsx(
+                          ] }) : /* @__PURE__ */ jsx2(
                             ToolbarSlot,
                             {
                               schema,
@@ -2896,7 +2936,7 @@ function FormBuilder({
                               components
                             }
                           )
-                        ] }, option.id) : /* @__PURE__ */ jsx(
+                        ] }, option.id) : /* @__PURE__ */ jsx2(
                           OptionEditorSlot,
                           {
                             schema,
@@ -2912,7 +2952,7 @@ function FormBuilder({
                           option.id
                         )
                       ),
-                      /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx2(
                         Button,
                         {
                           action: "addOption",
@@ -2924,7 +2964,7 @@ function FormBuilder({
                       )
                     ] }) : null,
                     conditionsEnabled && controls.displayConditions !== "hidden" ? /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__condition"), children: [
-                      /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx2("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx2(
                         Select,
                         {
                           id: `builder-field-${field.id}-condition`,
@@ -2951,7 +2991,7 @@ function FormBuilder({
                         }
                       ) }),
                       condition !== void 0 && source !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx(
+                        /* @__PURE__ */ jsx2(
                           Select,
                           {
                             "aria-label": translate("builder.conditionOperator"),
@@ -2969,7 +3009,7 @@ function FormBuilder({
                             }))
                           }
                         ),
-                        /* @__PURE__ */ jsx(
+                        /* @__PURE__ */ jsx2(
                           ConditionValueEditor,
                           {
                             source,
@@ -2986,7 +3026,7 @@ function FormBuilder({
                 field.id
               );
             }) }) }),
-            /* @__PURE__ */ jsx(BuilderSectionGroup, { name: "addQuestion", children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(BuilderSectionGroup, { name: "addQuestion", children: /* @__PURE__ */ jsx2(
               Button,
               {
                 className: builderClass("form-engine-builder__add"),
@@ -3013,7 +3053,7 @@ import {
   validateAnswers,
   validatePageAnswers
 } from "@form-engine-ts/core";
-import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useEffect, useMemo as useMemo2, useRef, useState as useState3 } from "react";
+import { createContext as createContext3, useCallback as useCallback2, useContext as useContext3, useEffect, useMemo as useMemo3, useRef, useState as useState3 } from "react";
 
 // src/types.ts
 var FormSubmissionError = class extends Error {
@@ -3026,8 +3066,8 @@ var FormSubmissionError = class extends Error {
 };
 
 // src/context.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var FormContext = createContext2(null);
+import { jsx as jsx3 } from "react/jsx-runtime";
+var FormContext = createContext3(null);
 function issuesByField(issues) {
   const result = {};
   for (const issue of issues) result[issue.fieldId] ??= issue;
@@ -3054,7 +3094,7 @@ function FormProvider({
   onSubmit,
   children
 }) {
-  const validSchema = useMemo2(() => {
+  const validSchema = useMemo3(() => {
     assertValidFormSchema(schema);
     const localized = resolveLocalizedSchema(schema, locale);
     assertValidFormSchema(localized);
@@ -3066,8 +3106,8 @@ function FormProvider({
   const [submitError, setSubmitError] = useState3(null);
   const [validationPageIndex, setValidationPageIndex] = useState3(null);
   const submissionInFlight = useRef(false);
-  const visibility = useMemo2(() => calculateFieldVisibility(validSchema, values), [validSchema, values]);
-  const pageVisibility = useMemo2(() => calculatePageVisibility(validSchema, values), [validSchema, values]);
+  const visibility = useMemo3(() => calculateFieldVisibility(validSchema, values), [validSchema, values]);
+  const pageVisibility = useMemo3(() => calculatePageVisibility(validSchema, values), [validSchema, values]);
   useEffect(() => {
     const fieldIds = new Set(validSchema.fields.map((field) => field.id));
     setValues((current) => Object.fromEntries(Object.entries(current).filter(([fieldId]) => fieldIds.has(fieldId))));
@@ -3179,7 +3219,7 @@ function FormProvider({
     (key, params) => translator.translate(key, locale, params) ?? key,
     [locale, translator]
   );
-  const contextValue = useMemo2(
+  const contextValue = useMemo3(
     () => ({
       schema: validSchema,
       locale,
@@ -3218,10 +3258,10 @@ function FormProvider({
       visibility
     ]
   );
-  return /* @__PURE__ */ jsx2(FormContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx3(FormContext.Provider, { value: contextValue, children });
 }
 function useForm() {
-  const context = useContext2(FormContext);
+  const context = useContext3(FormContext);
   if (context === null) throw new Error("useForm must be called inside a FormProvider.");
   return context;
 }
@@ -3238,10 +3278,11 @@ import {
   collectSchemaLocales as collectSchemaLocales2,
   collectTranslationSlots,
   computeSourceTextHash,
+  normalizeLocale,
   populateSchemaTranslations as populateSchemaTranslations2,
   removeLocaleFromSchema
 } from "@form-engine-ts/core";
-import { useCallback as useCallback3, useMemo as useMemo3, useState as useState4 } from "react";
+import { useCallback as useCallback3, useMemo as useMemo4, useState as useState4 } from "react";
 function updateTranslationMap(translations, locale, property, text) {
   if (property === "label") return translations ?? {};
   const current = translations?.[locale];
@@ -3257,20 +3298,9 @@ function asAsyncAdapter(adapter) {
     )
   };
 }
-function isValidBcp47Locale(locale) {
-  const language = locale.split("-")[0];
-  if (language === void 0 || !/^[a-z]{2,3}$/iu.test(language)) return false;
-  try {
-    Intl.getCanonicalLocales(locale);
-    return true;
-  } catch {
-    return false;
-  }
-}
 var validateLocalePipeline = (locale, schema, policy, customValidator) => {
-  const currentLocales = schema.supportedLocales ?? [];
-  const defaultLocale = schema.defaultLocale ?? "";
-  if (!isValidBcp47Locale(locale)) {
+  const canonicalLocale = normalizeLocale(locale);
+  if (canonicalLocale === null) {
     return {
       valid: false,
       error: {
@@ -3279,21 +3309,23 @@ var validateLocalePipeline = (locale, schema, policy, customValidator) => {
       }
     };
   }
-  if (locale === defaultLocale || currentLocales.includes(locale)) {
+  const currentLocales = (schema.supportedLocales ?? []).map((candidate) => normalizeLocale(candidate) ?? candidate);
+  const defaultLocale = schema.defaultLocale === void 0 ? "" : normalizeLocale(schema.defaultLocale) ?? schema.defaultLocale;
+  if (canonicalLocale === defaultLocale || currentLocales.includes(canonicalLocale)) {
     return {
       valid: false,
       error: {
         type: "locale_already_exists",
-        message: `Locale "${locale}" is already registered.`
+        message: `Locale "${canonicalLocale}" is already registered.`
       }
     };
   }
-  if (policy?.allowedLocales !== void 0 && !policy.allowedLocales.includes(locale)) {
+  if (policy?.allowedLocales !== void 0 && !policy.allowedLocales.some((candidate) => normalizeLocale(candidate) === canonicalLocale)) {
     return {
       valid: false,
       error: {
         type: "locale_not_allowed",
-        message: `Locale "${locale}" is not allowed by policy.`
+        message: `Locale "${canonicalLocale}" is not allowed by policy.`
       }
     };
   }
@@ -3308,8 +3340,13 @@ var validateLocalePipeline = (locale, schema, policy, customValidator) => {
     };
   }
   if (customValidator !== void 0) {
-    const customContext = policy === void 0 ? Object.assign([...currentLocales], { locale, defaultLocale, currentLocales }) : Object.assign([...currentLocales], { locale, defaultLocale, currentLocales, policy });
-    const customResult = customValidator(locale, customContext);
+    const context = {
+      locale: canonicalLocale,
+      defaultLocale,
+      currentLocales: Object.freeze([...currentLocales]),
+      ...policy === void 0 ? {} : { policy }
+    };
+    const customResult = Reflect.apply(customValidator, void 0, [canonicalLocale, context]);
     if (customResult === false) {
       return {
         valid: false,
@@ -3329,15 +3366,21 @@ var validateLocalePipeline = (locale, schema, policy, customValidator) => {
   }
   return { valid: true };
 };
-function workspaceLocaleValidationMessage(validation) {
-  if (validation.error?.type === "locale_not_allowed") {
-    return validation.error.message.replace(" is not allowed by policy.", " is not allowed by the form policy.");
+function workspaceLocaleValidationError(validation, currentLocales, requestedLocale) {
+  const error = validation.error;
+  if (error === void 0) return { type: "invalid_locale_format", locale: requestedLocale };
+  if (error.type === "locale_not_allowed") return { type: "locale_not_allowed", locale: requestedLocale };
+  if (error.type === "locale_already_exists") {
+    return { type: "locale_already_exists", locale: requestedLocale };
+  }
+  if (error.type === "invalid_locale_format") {
+    return { type: "invalid_locale_format", locale: requestedLocale };
   }
-  if (validation.error?.type === "max_locales_exceeded") {
-    const maximum = validation.error.message.match(/\((\d+)\)/u)?.[1];
-    return maximum === void 0 ? validation.error.message : `At most ${maximum} locales are allowed by the form policy.`;
+  if (error.type === "max_locales_exceeded") {
+    const max = Number(error.message.match(/\((\d+)\)/u)?.[1] ?? 0);
+    return { type: "max_locales_exceeded", max, current: currentLocales };
   }
-  return validation.error?.message ?? "Locale is not valid.";
+  return { type: "custom_validation_failed", message: error.message };
 }
 function manualMetadata(sourceText, sourceLocale) {
   return {
@@ -3408,6 +3451,7 @@ function useTranslationWorkspace({
   translationAdapter,
   readOnly = false,
   policy,
+  beforeRemoveLocale,
   validateLocale
 }) {
   const [draftSchema, setDraftSchema] = useState4(schema);
@@ -3415,18 +3459,18 @@ function useTranslationWorkspace({
   const [isTranslating, setIsTranslating] = useState4(false);
   const [error, setError] = useState4();
   const currentSchema = onChange === void 0 ? draftSchema : schema;
-  const targetLocales = useMemo3(() => {
+  const targetLocales = useMemo4(() => {
     const locales = collectSchemaLocales2(currentSchema).allUniqueLocales;
     return [.../* @__PURE__ */ new Set([...currentSchema.supportedLocales ?? [], ...locales])].filter(
       (locale) => locale !== sourceLocale
     );
   }, [currentSchema, sourceLocale]);
   const activeLocale = selectedLocale.length > 0 ? selectedLocale : targetLocales[0] ?? "";
-  const slots = useMemo3(
+  const slots = useMemo4(
     () => activeLocale.length === 0 ? [] : collectTranslationSlots(currentSchema, activeLocale),
     [activeLocale, currentSchema]
   );
-  const summary = useMemo3(() => {
+  const summary = useMemo4(() => {
     const counts = {
       missing: 0,
       translated: 0,
@@ -3461,10 +3505,32 @@ function useTranslationWorkspace({
   );
   const addLocale = useCallback3(
     (locale) => {
-      if (readOnly) return { success: false, error: "Workspace is read-only." };
-      const normalized = locale.trim();
+      if (readOnly) {
+        const workspaceError = { type: "read_only_mode" };
+        setError(workspaceError);
+        return { success: false, error: workspaceError };
+      }
+      const normalized = normalizeLocale(locale);
+      if (normalized === null) {
+        const workspaceError = workspaceLocaleValidationError(
+          validateLocalePipeline(locale, currentSchema, policy, validateLocale),
+          collectSchemaLocales2(currentSchema).allUniqueLocales.size,
+          locale
+        );
+        setError(workspaceError);
+        return { success: false, error: workspaceError };
+      }
       const validation = validateLocalePipeline(normalized, currentSchema, policy, validateLocale);
-      if (!validation.valid) return { success: false, error: workspaceLocaleValidationMessage(validation) };
+      if (!validation.valid) {
+        const workspaceError = workspaceLocaleValidationError(
+          validation,
+          collectSchemaLocales2(currentSchema).allUniqueLocales.size,
+          normalized
+        );
+        setError(workspaceError);
+        return { success: false, error: workspaceError };
+      }
+      setError(void 0);
       commit({
         ...currentSchema,
         supportedLocales: [.../* @__PURE__ */ new Set([...currentSchema.supportedLocales ?? [], normalized])]
@@ -3477,23 +3543,65 @@ function useTranslationWorkspace({
   const isAddLocaleAllowed = useCallback3(
     (locale) => {
       if (readOnly) return false;
-      const normalized = locale.trim();
+      const normalized = normalizeLocale(locale);
+      if (normalized === null) return false;
       return validateLocalePipeline(normalized, currentSchema, policy, validateLocale).valid;
     },
     [currentSchema, policy, readOnly, validateLocale]
   );
   const removeLocale = useCallback3(
     (locale) => {
-      if (readOnly || locale === sourceLocale || locale === currentSchema.defaultLocale) return;
-      commit(removeLocaleFromSchema(currentSchema, locale));
-      if (activeLocale === locale) setSelectedLocale("");
+      if (readOnly || locale === sourceLocale || locale === currentSchema.defaultLocale) return false;
+      const remove = () => {
+        commit(removeLocaleFromSchema(currentSchema, locale));
+        if (activeLocale === locale) setSelectedLocale("");
+      };
+      const slotCount = collectTranslationSlots(currentSchema, locale).length;
+      if (beforeRemoveLocale === void 0) {
+        remove();
+        return true;
+      }
+      try {
+        const decision = beforeRemoveLocale(locale, { slotCount });
+        if (typeof decision === "boolean") {
+          if (!decision) return false;
+          remove();
+          return true;
+        }
+        return decision.then((allowed) => {
+          if (!allowed) return false;
+          remove();
+          return true;
+        });
+      } catch (cause) {
+        const workspaceError = {
+          type: "translation_failed",
+          message: cause instanceof Error ? cause.message : String(cause),
+          cause
+        };
+        setError(workspaceError);
+        return Promise.reject(cause);
+      }
     },
-    [activeLocale, commit, currentSchema, readOnly, sourceLocale]
+    [activeLocale, beforeRemoveLocale, commit, currentSchema, readOnly, sourceLocale]
   );
   const translateAll = useCallback3(
     async (options = {}) => {
-      if (translationAdapter === void 0) throw new Error("A translation adapter is required.");
-      if (activeLocale.length === 0) throw new Error("A target locale is required.");
+      if (readOnly) {
+        const workspaceError = { type: "read_only_mode" };
+        setError(workspaceError);
+        return { success: false, error: workspaceError };
+      }
+      if (translationAdapter === void 0) {
+        const workspaceError = { type: "adapter_not_configured" };
+        setError(workspaceError);
+        return { success: false, error: workspaceError };
+      }
+      if (activeLocale.length === 0) {
+        const workspaceError = { type: "target_locale_missing" };
+        setError(workspaceError);
+        return { success: false, error: workspaceError };
+      }
       setIsTranslating(true);
       setError(void 0);
       try {
@@ -3508,30 +3616,47 @@ function useTranslationWorkspace({
           }
         );
         commit(populated.schema);
-        return populated.report;
+        return { success: true, report: populated.report };
       } catch (cause) {
-        const message = cause instanceof Error ? cause.message : String(cause);
-        setError(message);
-        throw cause;
+        const workspaceError = {
+          type: "translation_failed",
+          message: cause instanceof Error ? cause.message : String(cause),
+          cause
+        };
+        setError(workspaceError);
+        return { success: false, error: workspaceError };
       } finally {
         setIsTranslating(false);
       }
     },
-    [activeLocale, commit, currentSchema, translationAdapter]
+    [activeLocale, commit, currentSchema, readOnly, translationAdapter]
   );
   const translateSlot = useCallback3(
     async (slot) => {
-      if (translationAdapter === void 0) throw new Error("A translation adapter is required.");
-      if (readOnly) return;
+      if (translationAdapter === void 0) {
+        const workspaceError = { type: "adapter_not_configured" };
+        setError(workspaceError);
+        return { success: false, error: workspaceError };
+      }
+      if (readOnly) {
+        const workspaceError = { type: "read_only_mode" };
+        setError(workspaceError);
+        return { success: false, error: workspaceError };
+      }
       setIsTranslating(true);
       setError(void 0);
       try {
         const text = await asAsyncAdapter(translationAdapter).translateText(slot.sourceText, slot.locale, sourceLocale);
         commit(updateSchemaTranslation(currentSchema, slot, text, sourceLocale));
+        return { success: true };
       } catch (cause) {
-        const message = cause instanceof Error ? cause.message : String(cause);
-        setError(message);
-        throw cause;
+        const workspaceError = {
+          type: "translation_failed",
+          message: cause instanceof Error ? cause.message : String(cause),
+          cause
+        };
+        setError(workspaceError);
+        return { success: false, error: workspaceError };
       } finally {
         setIsTranslating(false);
       }
@@ -3557,7 +3682,7 @@ function useTranslationWorkspace({
 }
 
 // src/receipt.ts
-import { useEffect as useEffect2, useMemo as useMemo4, useState as useState5 } from "react";
+import { useEffect as useEffect2, useMemo as useMemo5, useState as useState5 } from "react";
 function submissionReceiptQueryKey(formId, formVersion) {
   return `${formId}:v${formVersion}`;
 }
@@ -3628,7 +3753,7 @@ function createLocalStorageSubmissionReceiptStore(options = {}) {
 }
 function useSubmissionReceipts(store, queries) {
   const querySignature = JSON.stringify(queries.map(({ formId, formVersion }) => [formId, formVersion]));
-  const stableQueries = useMemo4(() => {
+  const stableQueries = useMemo5(() => {
     const parsed = JSON.parse(querySignature);
     if (!Array.isArray(parsed)) return [];
     return parsed.flatMap(
@@ -3681,13 +3806,14 @@ import {
 import {
   Fragment as Fragment2,
   useCallback as useCallback4,
+  useContext as useContext4,
   useEffect as useEffect3,
   useId,
-  useMemo as useMemo5,
+  useMemo as useMemo6,
   useRef as useRef2,
   useState as useState6
 } from "react";
-import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var isChoiceFieldType = (type) => type === "radio" || type === "checkbox" || type === "multi-select" || type === "select";
 function resolveChoiceFieldLayout(type, appearance, groupedChoiceFieldsLegacy = false) {
   if (groupedChoiceFieldsLegacy) return "grouped";
@@ -3713,15 +3839,15 @@ function RequiredMark({
 }
 function FieldMessage({ props }) {
   return /* @__PURE__ */ jsxs2(Fragment3, { children: [
-    props.field.description === void 0 ? null : /* @__PURE__ */ jsx3("div", { id: props.helpId, className: "fe-help", children: props.field.description }),
-    props.error === void 0 ? null : /* @__PURE__ */ jsx3("div", { id: props.errorId, className: "fe-error", children: props.translate(props.error.messageKey, props.error.params) })
+    props.field.description === void 0 ? null : /* @__PURE__ */ jsx4("div", { id: props.helpId, className: "fe-help", children: props.field.description }),
+    props.error === void 0 ? null : /* @__PURE__ */ jsx4("div", { id: props.errorId, className: "fe-error", children: props.translate(props.error.messageKey, props.error.params) })
   ] });
 }
 function GroupedChoiceDescription({ props }) {
-  return props.field.description === void 0 ? null : /* @__PURE__ */ jsx3("div", { id: props.helpId, className: "fe-field-description", children: props.field.description });
+  return props.field.description === void 0 ? null : /* @__PURE__ */ jsx4("div", { id: props.helpId, className: "fe-field-description", children: props.field.description });
 }
 function GroupedChoiceError({ props }) {
-  return props.error === void 0 ? null : /* @__PURE__ */ jsx3("div", { id: props.errorId, className: "fe-field-error", role: "alert", children: props.translate(props.error.messageKey, props.error.params) });
+  return props.error === void 0 ? null : /* @__PURE__ */ jsx4("div", { id: props.errorId, className: "fe-field-error", role: "alert", children: props.translate(props.error.messageKey, props.error.params) });
 }
 function ChoiceGroupFrame({
   props,
@@ -3745,7 +3871,7 @@ function ChoiceGroupFrame({
     children,
     className
   };
-  if (renderChoiceGroup !== void 0) return /* @__PURE__ */ jsx3(Fragment3, { children: renderChoiceGroup(groupProps) });
+  if (renderChoiceGroup !== void 0) return /* @__PURE__ */ jsx4(Fragment3, { children: renderChoiceGroup(groupProps) });
   return (
     // biome-ignore lint/a11y/useAriaPropsSupportedByRole: The grouped fieldset exposes the required state for the complete choice question.
     /* @__PURE__ */ jsxs2(
@@ -3761,11 +3887,11 @@ function ChoiceGroupFrame({
         children: [
           /* @__PURE__ */ jsxs2("legend", { className: "fe-choice-legend", children: [
             field.title,
-            /* @__PURE__ */ jsx3(RequiredMark, { required: field.required, className: "fe-required-badge" })
+            /* @__PURE__ */ jsx4(RequiredMark, { required: field.required, className: "fe-required-badge" })
           ] }),
-          /* @__PURE__ */ jsx3(GroupedChoiceDescription, { props }),
+          /* @__PURE__ */ jsx4(GroupedChoiceDescription, { props }),
           children,
-          /* @__PURE__ */ jsx3(GroupedChoiceError, { props })
+          /* @__PURE__ */ jsx4(GroupedChoiceError, { props })
         ]
       }
     )
@@ -3789,7 +3915,7 @@ function DefaultField({
   };
   if (field.type === "checkbox") {
     if (isGroupedChoiceField) {
-      return /* @__PURE__ */ jsx3(
+      return /* @__PURE__ */ jsx4(
         ChoiceGroupFrame,
         {
           props,
@@ -3798,8 +3924,8 @@ function DefaultField({
           renderChoiceGroup,
           disabled,
           readOnly,
-          children: /* @__PURE__ */ jsx3("div", { className: "fe-choice-options", children: /* @__PURE__ */ jsxs2("label", { className: "fe-choice-option", htmlFor: inputId, children: [
-            /* @__PURE__ */ jsx3(
+          children: /* @__PURE__ */ jsx4("div", { className: "fe-choice-options", children: /* @__PURE__ */ jsxs2("label", { className: "fe-choice-option", htmlFor: inputId, children: [
+            /* @__PURE__ */ jsx4(
               "input",
               {
                 id: inputId,
@@ -3812,14 +3938,14 @@ function DefaultField({
                 onChange: (event) => setValue(event.currentTarget.checked)
               }
             ),
-            /* @__PURE__ */ jsx3("span", { children: field.title })
+            /* @__PURE__ */ jsx4("span", { children: field.title })
           ] }) })
         }
       );
     }
     return /* @__PURE__ */ jsxs2("div", { className: "fe-field fe-field--checkbox", "data-field-id": field.id, children: [
       /* @__PURE__ */ jsxs2("label", { className: "fe-check-label", htmlFor: inputId, children: [
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "input",
           {
             ...ariaProps,
@@ -3832,17 +3958,17 @@ function DefaultField({
         ),
         /* @__PURE__ */ jsxs2("span", { children: [
           field.title,
-          /* @__PURE__ */ jsx3(RequiredMark, { required: field.required })
+          /* @__PURE__ */ jsx4(RequiredMark, { required: field.required })
         ] })
       ] }),
-      /* @__PURE__ */ jsx3(FieldMessage, { props })
+      /* @__PURE__ */ jsx4(FieldMessage, { props })
     ] });
   }
   if (field.type === "radio" || field.type === "multi-select") {
     const selected = Array.isArray(value) ? value : [];
     if (isGroupedChoiceField) {
       const isRadio = field.type === "radio";
-      return /* @__PURE__ */ jsx3(
+      return /* @__PURE__ */ jsx4(
         ChoiceGroupFrame,
         {
           props,
@@ -3851,11 +3977,11 @@ function DefaultField({
           renderChoiceGroup,
           disabled,
           readOnly,
-          children: /* @__PURE__ */ jsx3("div", { className: "fe-choice-options", children: field.options.map((option, index) => {
+          children: /* @__PURE__ */ jsx4("div", { className: "fe-choice-options", children: field.options.map((option, index) => {
             const optionId = `${inputId}-${index}`;
             const checked = isRadio ? value === option.id : selected.includes(option.id);
             return /* @__PURE__ */ jsxs2("label", { className: "fe-choice-option", htmlFor: optionId, children: [
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4(
                 "input",
                 {
                   id: optionId,
@@ -3885,7 +4011,7 @@ function DefaultField({
                   }
                 }
               ),
-              /* @__PURE__ */ jsx3("span", { children: option.label })
+              /* @__PURE__ */ jsx4("span", { children: option.label })
             ] }, option.id);
           }) })
         }
@@ -3895,12 +4021,12 @@ function DefaultField({
       return /* @__PURE__ */ jsxs2("div", { className: "fe-field fe-field--radio", "data-field-id": field.id, children: [
         /* @__PURE__ */ jsxs2("div", { className: "fe-label", children: [
           field.title,
-          /* @__PURE__ */ jsx3(RequiredMark, { required: field.required })
+          /* @__PURE__ */ jsx4(RequiredMark, { required: field.required })
         ] }),
         field.options.map((option, index) => {
           const optionId = `${inputId}-${index}`;
           return /* @__PURE__ */ jsxs2("label", { className: "fe-check-label", htmlFor: optionId, children: [
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx4(
               "input",
               {
                 ...ariaProps,
@@ -3912,22 +4038,22 @@ function DefaultField({
                 onChange: () => setValue(option.id)
               }
             ),
-            /* @__PURE__ */ jsx3("span", { children: option.label })
+            /* @__PURE__ */ jsx4("span", { children: option.label })
           ] }, option.id);
         }),
-        /* @__PURE__ */ jsx3(FieldMessage, { props })
+        /* @__PURE__ */ jsx4(FieldMessage, { props })
       ] });
     }
     return /* @__PURE__ */ jsxs2("fieldset", { className: `fe-field fe-field--${field.type}`, "data-field-id": field.id, ...ariaProps, children: [
       /* @__PURE__ */ jsxs2("legend", { className: "fe-label", children: [
         field.title,
-        /* @__PURE__ */ jsx3(RequiredMark, { required: field.required })
+        /* @__PURE__ */ jsx4(RequiredMark, { required: field.required })
       ] }),
       field.options.map((option, index) => {
         const optionId = `${inputId}-${index}`;
         const checked = field.type === "radio" ? value === option.id : selected.includes(option.id);
         return /* @__PURE__ */ jsxs2("label", { className: "fe-check-label", htmlFor: optionId, children: [
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(
             "input",
             {
               id: optionId,
@@ -3944,10 +4070,10 @@ function DefaultField({
               }
             }
           ),
-          /* @__PURE__ */ jsx3("span", { children: option.label })
+          /* @__PURE__ */ jsx4("span", { children: option.label })
         ] }, option.id);
       }),
-      /* @__PURE__ */ jsx3(FieldMessage, { props })
+      /* @__PURE__ */ jsx4(FieldMessage, { props })
     ] });
   }
   if (field.type === "rating") {
@@ -3956,12 +4082,12 @@ function DefaultField({
     return /* @__PURE__ */ jsxs2("fieldset", { className: "fe-field fe-field--rating", "data-field-id": field.id, ...ariaProps, children: [
       /* @__PURE__ */ jsxs2("legend", { className: "fe-label", children: [
         field.title,
-        /* @__PURE__ */ jsx3(RequiredMark, { required: field.required })
+        /* @__PURE__ */ jsx4(RequiredMark, { required: field.required })
       ] }),
-      /* @__PURE__ */ jsx3("div", { className: "fe-rating-options", children: Array.from({ length: max - min + 1 }, (_, index) => min + index).map((rating) => {
+      /* @__PURE__ */ jsx4("div", { className: "fe-rating-options", children: Array.from({ length: max - min + 1 }, (_, index) => min + index).map((rating) => {
         const optionId = `${inputId}-${rating}`;
         return /* @__PURE__ */ jsxs2("label", { className: "fe-rating-label", htmlFor: optionId, children: [
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(
             "input",
             {
               id: optionId,
@@ -3972,15 +4098,15 @@ function DefaultField({
               onChange: () => setValue(rating)
             }
           ),
-          /* @__PURE__ */ jsx3("span", { children: rating })
+          /* @__PURE__ */ jsx4("span", { children: rating })
         ] }, rating);
       }) }),
-      /* @__PURE__ */ jsx3(FieldMessage, { props })
+      /* @__PURE__ */ jsx4(FieldMessage, { props })
     ] });
   }
   const label = /* @__PURE__ */ jsxs2("label", { className: "fe-label", htmlFor: inputId, children: [
     field.title,
-    /* @__PURE__ */ jsx3(RequiredMark, { required: field.required })
+    /* @__PURE__ */ jsx4(RequiredMark, { required: field.required })
   ] });
   let control;
   const textConstraints = field.type === "text" || field.type === "textarea" ? {
@@ -3989,7 +4115,7 @@ function DefaultField({
     ...field.pattern === void 0 ? {} : { pattern: field.pattern }
   } : {};
   if (field.type === "textarea") {
-    control = /* @__PURE__ */ jsx3(
+    control = /* @__PURE__ */ jsx4(
       "textarea",
       {
         ...ariaProps,
@@ -4002,7 +4128,7 @@ function DefaultField({
       }
     );
   } else if (field.type === "number") {
-    control = /* @__PURE__ */ jsx3(
+    control = /* @__PURE__ */ jsx4(
       "input",
       {
         ...ariaProps,
@@ -4029,14 +4155,14 @@ function DefaultField({
         value: typeof value === "string" ? value : "",
         onChange: (event) => setValue(event.currentTarget.value || void 0),
         children: [
-          /* @__PURE__ */ jsx3("option", { value: "", children: "\u2014" }),
-          field.options.map((option) => /* @__PURE__ */ jsx3("option", { value: option.id, children: option.label }, option.id))
+          /* @__PURE__ */ jsx4("option", { value: "", children: "\u2014" }),
+          field.options.map((option) => /* @__PURE__ */ jsx4("option", { value: option.id, children: option.label }, option.id))
         ]
       }
     );
   } else {
     const placeholderKey = "placeholderKey" in field ? field.placeholderKey : void 0;
-    control = /* @__PURE__ */ jsx3(
+    control = /* @__PURE__ */ jsx4(
       "input",
       {
         ...ariaProps,
@@ -4050,7 +4176,7 @@ function DefaultField({
     );
   }
   if (isGroupedChoiceField) {
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx4(
       ChoiceGroupFrame,
       {
         props,
@@ -4059,7 +4185,7 @@ function DefaultField({
         renderChoiceGroup,
         disabled,
         readOnly,
-        children: /* @__PURE__ */ jsx3("div", { className: "fe-choice-options", children: control })
+        children: /* @__PURE__ */ jsx4("div", { className: "fe-choice-options", children: control })
       }
     );
   }
@@ -4075,7 +4201,7 @@ function DefaultField({
       " / ",
       field.maxLength
     ] }) : null,
-    /* @__PURE__ */ jsx3(FieldMessage, { props })
+    /* @__PURE__ */ jsx4(FieldMessage, { props })
   ] });
 }
 function isRecord(value) {
@@ -4197,6 +4323,8 @@ function ContextFormRenderer({
   slots = {}
 }) {
   const form = useForm();
+  const i18n = useFormEngineI18n();
+  const isProviderValue = useContext4(FormEngineI18nProviderScopeContext);
   const prefix = useId().replace(/:/g, "");
   const formRef = useRef2(null);
   const loadedDraftKey = useRef2(null);
@@ -4214,15 +4342,15 @@ function ContextFormRenderer({
   const completionRef = useRef2(null);
   const confirmationRef = useRef2(null);
   const pages = form.schema.pages;
-  const visiblePageIndexes = useMemo5(
+  const visiblePageIndexes = useMemo6(
     () => pages === void 0 ? [] : pages.flatMap((page, index) => form.pageVisibility[page.id] === true ? [index] : []),
     [form.pageVisibility, pages]
   );
   const activePage = pages?.[currentPageIndex];
   const activeVisibleIndex = visiblePageIndexes.indexOf(currentPageIndex);
   const fieldIds = activePage === void 0 ? void 0 : new Set(activePage.questionIds);
-  const visibleValues = useMemo5(() => selectVisibleAnswers2(form.schema, form.values), [form.schema, form.values]);
-  const visibleItems = useMemo5(
+  const visibleValues = useMemo6(() => selectVisibleAnswers2(form.schema, form.values), [form.schema, form.values]);
+  const visibleItems = useMemo6(
     () => buildSubmittedItems(form.schema, form.values, form.visibility, (key) => form.translate(key), false),
     [form.schema, form.translate, form.values, form.visibility]
   );
@@ -4233,11 +4361,12 @@ function ContextFormRenderer({
   const isReplaceMode = successRenderMode === "replace" || hideFormOnSuccess;
   const resolveMessage = useCallback4(
     (key, fallback) => {
-      const defaultText = fallback ?? DEFAULT_RENDERER_MESSAGES[form.locale.toLowerCase().startsWith("ja") ? "ja" : "en"][key] ?? key;
+      const providerDefault = isProviderValue ? i18n.translator(`renderer.${key}`) : void 0;
+      const defaultText = fallback ?? (providerDefault === "" ? void 0 : providerDefault) ?? DEFAULT_RENDERER_MESSAGES[form.locale.toLowerCase().startsWith("ja") ? "ja" : "en"][key] ?? key;
       const configured = messages[key];
       return messageResolver?.(key, configured ?? defaultText) ?? configured ?? defaultText;
     },
-    [form.locale, messageResolver, messages]
+    [form.locale, i18n, isProviderValue, messageResolver, messages]
   );
   const fieldTranslate = useCallback4(
     (key, params) => key === "validation.required" && (messages.requiredField !== void 0 || messageResolver !== void 0) ? resolveMessage("requiredField") : form.translate(key, params),
@@ -4546,7 +4675,7 @@ function ContextFormRenderer({
       onSubmit: () => void submitValues()
     };
     return slots.renderSubmitButton?.(submitButtonProps) ?? /* @__PURE__ */ jsxs2("button", { className: "fe-submit", type: "submit", disabled: submitButtonProps.disabled, children: [
-      submitState === "submitting" ? /* @__PURE__ */ jsx3("span", { className: "fe-spinner", "aria-hidden": "true" }) : null,
+      submitState === "submitting" ? /* @__PURE__ */ jsx4("span", { className: "fe-spinner", "aria-hidden": "true" }) : null,
       submitState === "submitting" ? resolveMessage("submittingButton") : resolveMessage("submitButton", form.translate(form.schema.submitLabelKey ?? "form.submit"))
     ] });
   };
@@ -4570,10 +4699,10 @@ function ContextFormRenderer({
     onReset: form.reset
   };
   const completionRegion = /* @__PURE__ */ jsxs2("div", { ref: completionRef, className: "fe-completion", role: "status", "aria-live": "polite", tabIndex: -1, children: [
-    slots.renderCompletion?.(completionProps) ?? /* @__PURE__ */ jsx3("div", { children: completionMessage }),
+    slots.renderCompletion?.(completionProps) ?? /* @__PURE__ */ jsx4("div", { children: completionMessage }),
     slots.renderSubmittedValues?.({ items: activeCompletionData.submittedItems, schema: form.schema })
   ] });
-  const confirmationContent = /* @__PURE__ */ jsx3(
+  const confirmationContent = /* @__PURE__ */ jsx4(
     "div",
     {
       ref: confirmationRef,
@@ -4588,49 +4717,49 @@ function ContextFormRenderer({
         onConfirm: confirmSubmission,
         onCancel: cancelSubmission
       }) ?? /* @__PURE__ */ jsxs2(Fragment3, { children: [
-        /* @__PURE__ */ jsx3("h2", { children: confirmation?.generic === true ? form.locale.toLowerCase().startsWith("ja") ? "\u56DE\u7B54\u5185\u5BB9\u306E\u78BA\u8A8D" : "Review your answers" : resolveMessage("confirmSensitiveDataTitle") }),
-        /* @__PURE__ */ jsx3("p", { children: confirmation?.message ?? (confirmation?.generic === true ? form.locale.toLowerCase().startsWith("ja") ? "\u56DE\u7B54\u5185\u5BB9\u3092\u3054\u78BA\u8A8D\u306E\u3046\u3048\u3001\u9001\u4FE1\u3057\u3066\u304F\u3060\u3055\u3044\u3002" : "Please review your answers before submitting." : resolveMessage("confirmSensitiveDataMessage", form.translate("form.confirmSensitiveData"))) }),
-        (confirmation?.findings ?? []).length === 0 ? null : /* @__PURE__ */ jsx3("ul", { children: (confirmation?.findings ?? []).map((finding, index) => {
+        /* @__PURE__ */ jsx4("h2", { children: confirmation?.generic === true ? form.locale.toLowerCase().startsWith("ja") ? "\u56DE\u7B54\u5185\u5BB9\u306E\u78BA\u8A8D" : "Review your answers" : resolveMessage("confirmSensitiveDataTitle") }),
+        /* @__PURE__ */ jsx4("p", { children: confirmation?.message ?? (confirmation?.generic === true ? form.locale.toLowerCase().startsWith("ja") ? "\u56DE\u7B54\u5185\u5BB9\u3092\u3054\u78BA\u8A8D\u306E\u3046\u3048\u3001\u9001\u4FE1\u3057\u3066\u304F\u3060\u3055\u3044\u3002" : "Please review your answers before submitting." : resolveMessage("confirmSensitiveDataMessage", form.translate("form.confirmSensitiveData"))) }),
+        (confirmation?.findings ?? []).length === 0 ? null : /* @__PURE__ */ jsx4("ul", { children: (confirmation?.findings ?? []).map((finding, index) => {
           const field = form.schema.fields.find((candidate) => candidate.id === finding.fieldId);
           const typeLabels = form.locale.toLowerCase().startsWith("ja") ? { email: "\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9", phone: "\u96FB\u8A71\u756A\u53F7", url: "URL", postal_code: "\u90F5\u4FBF\u756A\u53F7" } : { email: "Email address", phone: "Phone number", url: "URL", postal_code: "Postal code" };
           const typeLabel = finding.typeLabel ?? typeLabels[finding.type] ?? finding.type;
           const value = maskSensitiveValue(finding);
           return /* @__PURE__ */ jsxs2("li", { children: [
-            /* @__PURE__ */ jsx3("span", { children: finding.fieldTitle ?? field?.title ?? finding.fieldId }),
+            /* @__PURE__ */ jsx4("span", { children: finding.fieldTitle ?? field?.title ?? finding.fieldId }),
             " ",
-            /* @__PURE__ */ jsx3("span", { className: "fe-sensitive-type", children: typeLabel }),
+            /* @__PURE__ */ jsx4("span", { className: "fe-sensitive-type", children: typeLabel }),
             value === void 0 ? null : /* @__PURE__ */ jsxs2("span", { className: "fe-sensitive-value", children: [
               " ",
               value
             ] })
           ] }, `${finding.fieldId}-${finding.type}-${finding.start ?? index}`);
         }) }),
-        confirmation?.generic === true ? /* @__PURE__ */ jsx3("ul", { className: "fe-submission-summary", children: visibleItems.map((item) => /* @__PURE__ */ jsxs2("li", { children: [
-          /* @__PURE__ */ jsx3("span", { children: item.title }),
+        confirmation?.generic === true ? /* @__PURE__ */ jsx4("ul", { className: "fe-submission-summary", children: visibleItems.map((item) => /* @__PURE__ */ jsxs2("li", { children: [
+          /* @__PURE__ */ jsx4("span", { children: item.title }),
           ": ",
-          /* @__PURE__ */ jsx3("span", { children: item.displayValue })
+          /* @__PURE__ */ jsx4("span", { children: item.displayValue })
         ] }, item.fieldId)) }) : null,
-        /* @__PURE__ */ jsx3("button", { type: "button", "data-fe-confirm": "true", onClick: confirmSubmission, children: resolveMessage("confirmButton", form.translate("form.confirmSubmission")) }),
-        /* @__PURE__ */ jsx3("button", { type: "button", onClick: cancelSubmission, children: resolveMessage("cancelButton", form.translate("form.cancelSubmission")) })
+        /* @__PURE__ */ jsx4("button", { type: "button", "data-fe-confirm": "true", onClick: confirmSubmission, children: resolveMessage("confirmButton", form.translate("form.confirmSubmission")) }),
+        /* @__PURE__ */ jsx4("button", { type: "button", onClick: cancelSubmission, children: resolveMessage("cancelButton", form.translate("form.cancelSubmission")) })
       ] })
     }
   );
   if (!receiptLoaded) return null;
   if (receipt !== null) {
-    return /* @__PURE__ */ jsx3("div", { className: `fe-form fe-already-submitted ${className}`.trim(), children: slots.renderAlreadySubmitted?.({
+    return /* @__PURE__ */ jsx4("div", { className: `fe-form fe-already-submitted ${className}`.trim(), children: slots.renderAlreadySubmitted?.({
       receipt,
       ...receiptStore === void 0 ? {} : { onReset: () => void resetReceipt() }
     }) ?? /* @__PURE__ */ jsxs2("div", { role: "status", children: [
-      /* @__PURE__ */ jsx3("h2", { children: resolveMessage("alreadySubmittedTitle") }),
-      /* @__PURE__ */ jsx3("p", { children: resolveMessage("alreadySubmittedMessage", form.translate("form.alreadySubmitted")) }),
-      receiptStore === void 0 ? null : /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => void resetReceipt(), children: resolveMessage("submitButton", form.translate("form.submitAnother")) })
+      /* @__PURE__ */ jsx4("h2", { children: resolveMessage("alreadySubmittedTitle") }),
+      /* @__PURE__ */ jsx4("p", { children: resolveMessage("alreadySubmittedMessage", form.translate("form.alreadySubmitted")) }),
+      receiptStore === void 0 ? null : /* @__PURE__ */ jsx4("button", { type: "button", onClick: () => void resetReceipt(), children: resolveMessage("submitButton", form.translate("form.submitAnother")) })
     ] }) });
   }
   if (form.submitStatus === "success" && isReplaceMode) {
-    return /* @__PURE__ */ jsx3("div", { className: `fe-form ${className}`.trim(), children: completionRegion });
+    return /* @__PURE__ */ jsx4("div", { className: `fe-form ${className}`.trim(), children: completionRegion });
   }
   if (confirmation !== null && confirmationRenderMode === "replace") {
-    return /* @__PURE__ */ jsx3("div", { className: `fe-form ${className}`.trim(), children: confirmationContent });
+    return /* @__PURE__ */ jsx4("div", { className: `fe-form ${className}`.trim(), children: confirmationContent });
   }
   return /* @__PURE__ */ jsxs2(Fragment3, { children: [
     /* @__PURE__ */ jsxs2(
@@ -4646,10 +4775,10 @@ function ContextFormRenderer({
             title: form.schema.title,
             ...form.schema.description === void 0 ? {} : { description: form.schema.description }
           }) ?? /* @__PURE__ */ jsxs2("header", { className: "fe-header", children: [
-            /* @__PURE__ */ jsx3("h1", { children: form.schema.title }),
-            form.schema.description === void 0 ? null : /* @__PURE__ */ jsx3("p", { children: form.schema.description }),
+            /* @__PURE__ */ jsx4("h1", { children: form.schema.title }),
+            form.schema.description === void 0 ? null : /* @__PURE__ */ jsx4("p", { children: form.schema.description }),
             pages === void 0 ? null : /* @__PURE__ */ jsxs2("div", { className: "fe-progress", children: [
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4(
                 "div",
                 {
                   className: "form-progress-bar",
@@ -4657,7 +4786,7 @@ function ContextFormRenderer({
                   "aria-valuemin": 1,
                   "aria-valuemax": visiblePageIndexes.length,
                   "aria-valuenow": activeVisibleIndex + 1,
-                  children: /* @__PURE__ */ jsx3(
+                  children: /* @__PURE__ */ jsx4(
                     "div",
                     {
                       className: "form-progress-fill",
@@ -4666,17 +4795,17 @@ function ContextFormRenderer({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx3("span", { children: form.translate("form.step", { current: activeVisibleIndex + 1, total: visiblePageIndexes.length }) })
+              /* @__PURE__ */ jsx4("span", { children: form.translate("form.step", { current: activeVisibleIndex + 1, total: visiblePageIndexes.length }) })
             ] }),
-            draftRestored ? /* @__PURE__ */ jsx3("span", { className: "form-draft-badge", children: form.translate("form.draftRestored") }) : null
+            draftRestored ? /* @__PURE__ */ jsx4("span", { className: "form-draft-badge", children: form.translate("form.draftRestored") }) : null
           ] }),
           activePage === void 0 ? null : slots.renderPageHeader?.({
             page: activePage,
             pageIndex: activeVisibleIndex,
             totalPages: visiblePageIndexes.length
           }) ?? /* @__PURE__ */ jsxs2("div", { className: "fe-page-header", children: [
-            activePage.title === void 0 ? null : /* @__PURE__ */ jsx3("h2", { className: "fe-page-title", children: activePage.title }),
-            activePage.description === void 0 ? null : /* @__PURE__ */ jsx3("p", { className: "fe-page-description", children: activePage.description })
+            activePage.title === void 0 ? null : /* @__PURE__ */ jsx4("h2", { className: "fe-page-title", children: activePage.title }),
+            activePage.description === void 0 ? null : /* @__PURE__ */ jsx4("p", { className: "fe-page-description", children: activePage.description })
           ] }),
           (() => {
             const fieldChildren = form.schema.fields.filter((field) => form.visibility[field.id] === true && (fieldIds === void 0 || fieldIds.has(field.id))).map((field) => {
@@ -4693,7 +4822,7 @@ function ContextFormRenderer({
                 ...slots.renderCharacterCount === void 0 ? {} : { renderCharacterCount: slots.renderCharacterCount }
               };
               if (slots.renderField !== void 0) {
-                return /* @__PURE__ */ jsx3(Fragment2, { children: slots.renderField({
+                return /* @__PURE__ */ jsx4(Fragment2, { children: slots.renderField({
                   question: field,
                   value: form.values[field.id],
                   onChange: (value) => {
@@ -4703,7 +4832,7 @@ function ContextFormRenderer({
                 }) }, field.id);
               }
               const Component = components[field.type];
-              return Component === void 0 ? /* @__PURE__ */ jsx3(
+              return Component === void 0 ? /* @__PURE__ */ jsx4(
                 DefaultField,
                 {
                   ...props,
@@ -4714,12 +4843,12 @@ function ContextFormRenderer({
                   disabled: interactionLocked
                 },
                 field.id
-              ) : /* @__PURE__ */ jsx3(Component, { ...props }, field.id);
+              ) : /* @__PURE__ */ jsx4(Component, { ...props }, field.id);
             });
             const fieldClassName = `fe-fields${fieldsClassName === void 0 ? "" : ` ${fieldsClassName}`}`;
-            return slots.renderFields?.({ children: fieldChildren, className: fieldClassName }) ?? /* @__PURE__ */ jsx3("div", { className: fieldClassName, children: fieldChildren });
+            return slots.renderFields?.({ children: fieldChildren, className: fieldClassName }) ?? /* @__PURE__ */ jsx4("div", { className: fieldClassName, children: fieldChildren });
           })(),
-          guardMessage === null ? null : /* @__PURE__ */ jsx3("div", { role: "alert", children: guardMessage }),
+          guardMessage === null ? null : /* @__PURE__ */ jsx4("div", { role: "alert", children: guardMessage }),
           confirmation !== null && confirmationRenderMode === "inline" ? confirmationContent : null,
           validationIssues.length === 0 ? null : slots.renderValidationSummary?.({ issues: validationIssues }) ?? /* @__PURE__ */ jsxs2("div", { className: "fe-validation-summary", role: "alert", children: [
             validationIssues.length,
@@ -4748,7 +4877,7 @@ function ContextFormRenderer({
               },
               onNext: handleNext
             }) ?? /* @__PURE__ */ jsxs2(Fragment3, { children: [
-              canPrev ? /* @__PURE__ */ jsx3(
+              canPrev ? /* @__PURE__ */ jsx4(
                 "button",
                 {
                   className: "btn-prev",
@@ -4758,7 +4887,7 @@ function ContextFormRenderer({
                   children: form.translate("form.back")
                 }
               ) : null,
-              canNext ? /* @__PURE__ */ jsx3("button", { className: "btn-next", type: "button", disabled: interactionLocked, onClick: handleNext, children: form.translate("form.next") }) : null
+              canNext ? /* @__PURE__ */ jsx4("button", { className: "btn-next", type: "button", disabled: interactionLocked, onClick: handleNext, children: form.translate("form.next") }) : null
             ] }),
             canNext ? null : renderSubmitButton()
           ] }),
@@ -4766,16 +4895,16 @@ function ContextFormRenderer({
             form.submitStatus === "success" ? completionRegion : null,
             form.submitStatus === "error" && form.submitError !== null ? slots.renderSubmitError?.({ error: form.submitError, onRetry: () => void submitValues() }) ?? (form.submitError instanceof FormSubmissionError && form.submitError.payload.formError !== void 0 ? /* @__PURE__ */ jsxs2("div", { role: "alert", children: [
               form.submitError.payload.formError,
-              /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => void submitValues(), children: resolveMessage("retryButton") })
+              /* @__PURE__ */ jsx4("button", { type: "button", onClick: () => void submitValues(), children: resolveMessage("retryButton") })
             ] }) : /* @__PURE__ */ jsxs2("div", { role: "alert", children: [
               errorMessageKey === void 0 ? resolveMessage("serverErrorSummary") : form.translate(errorMessageKey),
-              /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => void submitValues(), children: resolveMessage("retryButton") })
+              /* @__PURE__ */ jsx4("button", { type: "button", onClick: () => void submitValues(), children: resolveMessage("retryButton") })
             ] })) : null
           ] })
         ]
       }
     ),
-    confirmation !== null && confirmationRenderMode === "dialog" ? /* @__PURE__ */ jsx3("div", { className: "fe-confirmation-dialog-backdrop", role: "dialog", "aria-modal": "true", children: confirmationContent }) : null
+    confirmation !== null && confirmationRenderMode === "dialog" ? /* @__PURE__ */ jsx4("div", { className: "fe-confirmation-dialog-backdrop", role: "dialog", "aria-modal": "true", children: confirmationContent }) : null
   ] });
 }
 var RENDERER_MESSAGES = {
@@ -4820,17 +4949,22 @@ var defaultRendererTranslator = {
   }
 };
 function FormRenderer(props) {
-  if (!("schema" in props)) return /* @__PURE__ */ jsx3(ContextFormRenderer, { ...props });
+  const i18n = useFormEngineI18n();
+  const isProviderValue = useContext4(FormEngineI18nProviderScopeContext);
+  if (!("schema" in props)) return /* @__PURE__ */ jsx4(ContextFormRenderer, { ...props });
   const {
     schema,
     locale = schema.defaultLocale ?? "en",
-    translator = defaultRendererTranslator,
+    translator: explicitTranslator,
     initialValues,
     resetOnSuccess,
     onSubmit,
     ...rendererProps
   } = props;
-  return /* @__PURE__ */ jsx3(
+  const translator = explicitTranslator ?? (isProviderValue ? {
+    translate: (key, _locale, params) => params === void 0 ? i18n.translator(key) : i18n.translator(key, { ...params })
+  } : defaultRendererTranslator);
+  return /* @__PURE__ */ jsx4(
     FormProvider,
     {
       schema,
@@ -4839,7 +4973,7 @@ function FormRenderer(props) {
       onSubmit,
       ...initialValues === void 0 ? {} : { initialValues },
       ...resetOnSuccess === void 0 ? {} : { resetOnSuccess },
-      children: /* @__PURE__ */ jsx3(ContextFormRenderer, { ...rendererProps })
+      children: /* @__PURE__ */ jsx4(ContextFormRenderer, { ...rendererProps })
     }
   );
 }
@@ -4847,6 +4981,8 @@ export {
   BUILDER_TRANSLATION_ALIASES,
   BUILDER_TRANSLATION_KEYS,
   FormBuilder,
+  FormEngineI18nContext,
+  FormEngineI18nProvider,
   FormProvider,
   FormRenderer,
   FormSubmissionError,
@@ -4862,6 +4998,7 @@ export {
   useField,
   useForm,
   useFormBuilder,
+  useFormEngineI18n,
   useSubmissionReceipts,
   useTranslationWorkspace,
   validateLocalePipeline