@form-engine-ts/react 4.8.0 → 5.0.1

package/dist/index.cjs

@@ -23,6 +23,8 @@ __export(index_exports, {
   BUILDER_TRANSLATION_ALIASES: () => BUILDER_TRANSLATION_ALIASES,
   BUILDER_TRANSLATION_KEYS: () => BUILDER_TRANSLATION_KEYS,
   FormBuilder: () => FormBuilder,
+  FormEngineI18nContext: () => FormEngineI18nContext,
+  FormEngineI18nProvider: () => FormEngineI18nProvider,
   FormProvider: () => FormProvider,
   FormRenderer: () => FormRenderer,
   FormSubmissionError: () => FormSubmissionError,
@@ -38,6 +40,7 @@ __export(index_exports, {
   useField: () => useField,
   useForm: () => useForm,
   useFormBuilder: () => useFormBuilder,
+  useFormEngineI18n: () => useFormEngineI18n,
   useSubmissionReceipts: () => useSubmissionReceipts,
   useTranslationWorkspace: () => useTranslationWorkspace,
   validateLocalePipeline: () => validateLocalePipeline
@@ -144,8 +147,8 @@ function createLocalStorageSubmissionAttemptStore(options = {}) {
 }
 
 // src/builder.tsx
-var import_core2 = require("@form-engine-ts/core");
-var import_react2 = require("react");
+var import_core3 = require("@form-engine-ts/core");
+var import_react3 = require("react");
 
 // src/hooks/useFormBuilder.ts
 var import_core = require("@form-engine-ts/core");
@@ -960,8 +963,42 @@ function resolveTranslation(key, aliases, adapter, defaultCatalog, params = {},
   return key;
 }
 
-// src/builder.tsx
+// src/i18n/provider.tsx
+var import_core2 = require("@form-engine-ts/core");
+var import_react2 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
+var defaultTranslator = (0, import_core2.createFormEngineTranslator)({ locale: "ja" });
+var FormEngineI18nContext = (0, import_react2.createContext)({
+  uiLocale: "ja",
+  translator: defaultTranslator
+});
+var FormEngineI18nProviderScopeContext = (0, import_react2.createContext)(false);
+function FormEngineI18nProvider({
+  locale = "ja",
+  fallbackLocale = "en",
+  messages,
+  customCatalogs,
+  translator: customTranslator,
+  children
+}) {
+  const translator = (0, import_react2.useMemo)(() => {
+    if (customTranslator !== void 0) return customTranslator;
+    return (0, import_core2.createFormEngineTranslator)({
+      locale,
+      fallbackLocale,
+      ...messages === void 0 ? {} : { messages },
+      ...customCatalogs === void 0 ? {} : { customCatalogs }
+    });
+  }, [customCatalogs, customTranslator, fallbackLocale, locale, messages]);
+  const value = (0, import_react2.useMemo)(() => ({ uiLocale: locale, translator }), [locale, translator]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormEngineI18nProviderScopeContext.Provider, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormEngineI18nContext.Provider, { value, children }) });
+}
+function useFormEngineI18n() {
+  return (0, import_react2.useContext)(FormEngineI18nContext);
+}
+
+// src/builder.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function DefaultButton({
   id,
   className,
@@ -975,7 +1012,7 @@ function DefaultButton({
   action,
   targetId
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "button",
     {
       id,
@@ -994,7 +1031,7 @@ function DefaultButton({
   );
 }
 function DefaultIconButton(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     DefaultButton,
     {
       ...props.id === void 0 ? {} : { id: props.id },
@@ -1073,10 +1110,10 @@ function DefaultTextInput({
   max,
   step
 }) {
-  const labelElement = label === void 0 ? null : id === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: id, children: label });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  const labelElement = label === void 0 ? null : id === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: id, children: label });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
     labelElement,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "input",
       {
         id,
@@ -1100,7 +1137,7 @@ function DefaultTextInput({
         onChange: (event) => onChange(event.currentTarget.value)
       }
     ),
-    helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { id: ariaDescribedBy, children: helperText })
+    helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("small", { id: ariaDescribedBy, children: helperText })
   ] });
 }
 function DefaultTextArea({
@@ -1122,10 +1159,10 @@ function DefaultTextArea({
   placeholder,
   maxLength
 }) {
-  const labelElement = label === void 0 ? null : id === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: id, children: label });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  const labelElement = label === void 0 ? null : id === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: id, children: label });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
     labelElement,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "textarea",
       {
         id,
@@ -1145,7 +1182,7 @@ function DefaultTextArea({
         onChange: (event) => onChange(event.currentTarget.value)
       }
     ),
-    helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { id: ariaDescribedBy, children: helperText })
+    helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("small", { id: ariaDescribedBy, children: helperText })
   ] });
 }
 function DefaultSelect({
@@ -1171,10 +1208,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__ */ (0, import_jsx_runtime.jsx)("span", { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: id, children: label });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  const labelElement = label === void 0 ? null : id === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: id, children: label });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
     labelElement,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "select",
       {
         id,
@@ -1189,11 +1226,11 @@ function DefaultSelect({
         value,
         onChange: (event) => onChange(event.currentTarget.value),
         onKeyDown,
-        children: normalizedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: option.value, disabled: option.disabled, children: renderOption === void 0 ? option.label : renderOption(option) }, option.value))
+        children: normalizedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: option.value, disabled: option.disabled, children: renderOption === void 0 ? option.label : renderOption(option) }, option.value))
       }
     ),
-    renderValue === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("output", { children: renderValue(selectedOption) }),
-    helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { id: ariaDescribedBy, children: helperText })
+    renderValue === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("output", { children: renderValue(selectedOption) }),
+    helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("small", { id: ariaDescribedBy, children: helperText })
   ] });
 }
 function DefaultCheckbox({
@@ -1212,9 +1249,9 @@ function DefaultCheckbox({
   onChange,
   label
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "input",
         {
           id,
@@ -1232,7 +1269,7 @@ function DefaultCheckbox({
       ),
       label
     ] }),
-    helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { id: ariaDescribedBy, children: helperText })
+    helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("small", { id: ariaDescribedBy, children: helperText })
   ] });
 }
 function DefaultSection({
@@ -1245,7 +1282,7 @@ function DefaultSection({
   onClickCapture,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "section",
     {
       id,
@@ -1254,21 +1291,21 @@ function DefaultSection({
       "aria-labelledby": title === void 0 ? void 0 : headingId,
       onClickCapture,
       children: [
-        title === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { id: headingId, children: title }),
-        description === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: description }),
+        title === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { id: headingId, children: title }),
+        description === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: description }),
         children
       ]
     }
   );
 }
 function DefaultFieldset({ className, legend, disabled, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", { className, disabled, children: [
-    legend === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("legend", { children: legend }),
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("fieldset", { className, disabled, children: [
+    legend === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("legend", { children: legend }),
     children
   ] });
 }
 function DefaultErrorMessage({ className, message }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className, children: message });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className, children: message });
 }
 var DEFAULT_COMPONENTS = {
   Button: DefaultButton,
@@ -1283,7 +1320,7 @@ var DEFAULT_COMPONENTS = {
   renderIcon: defaultIconFor,
   renderFieldTypeIcon: defaultFieldTypeIcon
 };
-var BuilderPrimitiveContext = (0, import_react2.createContext)({
+var BuilderPrimitiveContext = (0, import_react3.createContext)({
   components: DEFAULT_COMPONENTS,
   readOnly: false,
   unstyled: false
@@ -1297,9 +1334,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 = (0, import_react2.useContext)(BuilderPrimitiveContext);
+  const context = (0, import_react3.useContext)(BuilderPrimitiveContext);
   const Component = context.components.Button;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Component,
     {
       ...props,
@@ -1310,10 +1347,10 @@ function BuilderButton(props) {
   );
 }
 function BuilderIconButton(props) {
-  const context = (0, import_react2.useContext)(BuilderPrimitiveContext);
+  const context = (0, import_react3.useContext)(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__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Component,
     {
       ...props,
@@ -1325,9 +1362,9 @@ function BuilderIconButton(props) {
   );
 }
 function BuilderTextInput(props) {
-  const context = (0, import_react2.useContext)(BuilderPrimitiveContext);
+  const context = (0, import_react3.useContext)(BuilderPrimitiveContext);
   const Component = context.components.TextInput;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Component,
     {
       ...props,
@@ -1338,9 +1375,9 @@ function BuilderTextInput(props) {
   );
 }
 function BuilderTextArea(props) {
-  const context = (0, import_react2.useContext)(BuilderPrimitiveContext);
+  const context = (0, import_react3.useContext)(BuilderPrimitiveContext);
   const Component = context.components.TextArea;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Component,
     {
       ...props,
@@ -1351,9 +1388,9 @@ function BuilderTextArea(props) {
   );
 }
 function BuilderSelect(props) {
-  const context = (0, import_react2.useContext)(BuilderPrimitiveContext);
+  const context = (0, import_react3.useContext)(BuilderPrimitiveContext);
   const Component = context.components.Select;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Component,
     {
       ...props,
@@ -1364,9 +1401,9 @@ function BuilderSelect(props) {
   );
 }
 function BuilderCheckbox(props) {
-  const context = (0, import_react2.useContext)(BuilderPrimitiveContext);
+  const context = (0, import_react3.useContext)(BuilderPrimitiveContext);
   const Component = context.components.Checkbox;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Component,
     {
       ...props,
@@ -1377,18 +1414,18 @@ function BuilderCheckbox(props) {
   );
 }
 function BuilderSection(props) {
-  const Component = (0, import_react2.useContext)(BuilderPrimitiveContext).components.Section;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props });
+  const Component = (0, import_react3.useContext)(BuilderPrimitiveContext).components.Section;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ...props });
 }
 function BuilderFieldset(props) {
-  const context = (0, import_react2.useContext)(BuilderPrimitiveContext);
+  const context = (0, import_react3.useContext)(BuilderPrimitiveContext);
   const Component = context.components.Fieldset;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props, disabled: context.readOnly || props.disabled === true });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ...props, disabled: context.readOnly || props.disabled === true });
 }
 function BuilderErrorMessage(props) {
-  const context = (0, import_react2.useContext)(BuilderPrimitiveContext);
+  const context = (0, import_react3.useContext)(BuilderPrimitiveContext);
   const Component = context.components.ErrorMessage;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: primitiveClassName(props.className, "form-engine-builder__error", context.unstyled), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { message: props.message }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: primitiveClassName(props.className, "form-engine-builder__error", context.unstyled), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { message: props.message }) });
 }
 var GUARDED_COMPONENTS = {
   Button: BuilderButton,
@@ -1556,7 +1593,7 @@ function BuilderSectionGroup({ children }) {
   return children;
 }
 function sectionGroupName(node) {
-  if (!(0, import_react2.isValidElement)(node) || node.type !== BuilderSectionGroup) return void 0;
+  if (!(0, import_react3.isValidElement)(node) || node.type !== BuilderSectionGroup) return void 0;
   return node.props.name;
 }
 function OrderedBuilderSections({
@@ -1565,11 +1602,11 @@ function OrderedBuilderSections({
 }) {
   if (order === void 0) return children;
   const ranks = new Map(order.map((name, index) => [name, index]));
-  const groups = import_react2.Children.toArray(children);
+  const groups = import_react3.Children.toArray(children);
   return groups.map((group, index) => ({ group, index, rank: ranks.get(sectionGroupName(group) ?? "questions") ?? order.length })).sort((left, right) => left.rank - right.rank || left.index - right.index).map(({ group }) => group);
 }
 function fieldTypeKey(type) {
-  return import_core2.DEFAULT_FIELD_TYPE_DEFINITIONS.find((definition) => definition.type === type)?.labelKey ?? `builder.fieldType.${type}`;
+  return import_core3.DEFAULT_FIELD_TYPE_DEFINITIONS.find((definition) => definition.type === type)?.labelKey ?? `builder.fieldType.${type}`;
 }
 function operatorKey(operator) {
   return `builder.operator.${operator}`;
@@ -1654,7 +1691,7 @@ function ConditionValueEditor({
   if (condition.operator === "not_empty") return null;
   const update = (value) => onChange({ ...condition, value });
   if (source.type === "checkbox") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       Select,
       {
         value: String(condition.value),
@@ -1667,7 +1704,7 @@ function ConditionValueEditor({
     );
   }
   if (source.type === "number" || source.type === "rating") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       TextInput,
       {
         "aria-label": translate("builder.conditionValue"),
@@ -1678,7 +1715,7 @@ function ConditionValueEditor({
     );
   }
   if ("options" in source) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       Select,
       {
         value: String(condition.value ?? ""),
@@ -1687,7 +1724,7 @@ function ConditionValueEditor({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     TextInput,
     {
       "aria-label": translate("builder.conditionValue"),
@@ -1707,7 +1744,7 @@ function resolveInitialFieldType(defaultType, allowedTypes) {
 function FormBuilder({
   schema,
   onChange,
-  locale = "en",
+  locale: explicitLocale,
   translator,
   translationAdapter,
   translationOptions,
@@ -1734,6 +1771,12 @@ function FormBuilder({
   onActiveFieldChange,
   submissionSettingsOptions
 }) {
+  const i18n = useFormEngineI18n();
+  const isProviderValue = (0, import_react3.useContext)(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,
@@ -1761,16 +1804,16 @@ function FormBuilder({
     ...defaultActiveFieldId === void 0 ? {} : { defaultActiveFieldId },
     ...onActiveFieldChange === void 0 ? {} : { onActiveFieldChange }
   });
-  const [newPageQuestionId, setNewPageQuestionId] = (0, import_react2.useState)("");
-  const [newLocale, setNewLocale] = (0, import_react2.useState)("");
-  const [editingLocale, setEditingLocale] = (0, import_react2.useState)("");
-  const [isTranslating, setIsTranslating] = (0, import_react2.useState)(false);
-  const [translationError, setTranslationError] = (0, import_react2.useState)(null);
-  const [translationReport, setTranslationReport] = (0, import_react2.useState)();
+  const [newPageQuestionId, setNewPageQuestionId] = (0, import_react3.useState)("");
+  const [newLocale, setNewLocale] = (0, import_react3.useState)("");
+  const [editingLocale, setEditingLocale] = (0, import_react3.useState)("");
+  const [isTranslating, setIsTranslating] = (0, import_react3.useState)(false);
+  const [translationError, setTranslationError] = (0, import_react3.useState)(null);
+  const [translationReport, setTranslationReport] = (0, import_react3.useState)();
   const translate = (key, params = {}) => resolveTranslation(
     key,
     BUILDER_TRANSLATION_ALIASES[key] === void 0 ? [] : [BUILDER_TRANSLATION_ALIASES[key]],
-    translator,
+    resolvedTranslator,
     BUILDER_DEFAULTS,
     params,
     locale
@@ -1882,7 +1925,7 @@ function FormBuilder({
     setTranslationError(null);
     try {
       const translationPolicy = policy ?? translationOptions?.policy;
-      const populated = await (0, import_core2.populateSchemaTranslations)(schema, [editingLocale], translationAdapter, {
+      const populated = await (0, import_core3.populateSchemaTranslations)(schema, [editingLocale], translationAdapter, {
         overwrite: "missing-only",
         ...translationOptions,
         ...translationPolicy === void 0 ? {} : { policy: translationPolicy }
@@ -2039,11 +2082,11 @@ function FormBuilder({
       params: { locale: targetLocale }
     })
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     BuilderPrimitiveContext.Provider,
     {
       value: { components: resolvedComponents, readOnly, unstyled: defaultStylesDisabled },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         Section,
         {
           className: defaultStylesDisabled ? className || void 0 : `form-engine-builder ${className}`.trim(),
@@ -2063,15 +2106,15 @@ function FormBuilder({
               addOption(fieldId);
             }
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Fieldset, { className: builderClass("form-engine-builder__controls"), disabled: readOnly, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(OrderedBuilderSections, { ...resolvedSectionOrder === void 0 ? {} : { order: resolvedSectionOrder }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BuilderSectionGroup, { name: "basicSettings", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Fieldset, { className: builderClass("form-engine-builder__controls"), disabled: readOnly, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(OrderedBuilderSections, { ...resolvedSectionOrder === void 0 ? {} : { order: resolvedSectionOrder }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BuilderSectionGroup, { name: "basicSettings", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               Section,
               {
                 className: builderClass("form-engine-builder__basic-settings"),
                 headingId: "builder-basic-settings-heading",
                 title: translate("builder.basicSettings"),
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: builderClass("form-engine-builder__grid"), children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: builderClass("form-engine-builder__grid"), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     TextInput,
                     {
                       id: "builder-form-title",
@@ -2085,7 +2128,7 @@ function FormBuilder({
                       onChange: (value) => setSourceText({ kind: "form" }, "title", value)
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     TextArea,
                     {
                       id: "builder-form-description",
@@ -2099,13 +2142,13 @@ function FormBuilder({
                 ] })
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BuilderSectionGroup, { name: "submissionSettings", children: submissionSettingsOptions?.enabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BuilderSectionGroup, { name: "submissionSettings", children: submissionSettingsOptions?.enabled ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
               Section,
               {
                 className: builderClass("form-engine-builder__submission-settings"),
                 title: translate("builder.submissionSettings"),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     Checkbox,
                     {
                       id: "builder-show-confirmation",
@@ -2117,7 +2160,7 @@ function FormBuilder({
                       })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     Select,
                     {
                       id: "builder-confirmation-render-mode",
@@ -2140,7 +2183,7 @@ function FormBuilder({
                 ]
               }
             ) : null }),
-            resolvedSectionOrder === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BuilderSectionGroup, { name: "completionMessage", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, { headingId: "builder-completion-message-heading", title: translate("builder.completionMessage"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            resolvedSectionOrder === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BuilderSectionGroup, { name: "completionMessage", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Section, { headingId: "builder-completion-message-heading", title: translate("builder.completionMessage"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               TextInput,
               {
                 id: "builder-completion-message",
@@ -2149,27 +2192,27 @@ function FormBuilder({
                 onChange: (value) => setSourceText({ kind: "form" }, "completionMessage", value)
               }
             ) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BuilderSectionGroup, { name: "questions", children: pagesEnabled ? PagesSlot === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BuilderSectionGroup, { name: "questions", children: pagesEnabled ? PagesSlot === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               Section,
               {
                 className: builderClass("form-engine-builder__pages"),
                 headingId: "builder-pages-heading",
                 title: translate("builder.pages"),
-                children: schema.pages === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { onClick: enablePages, children: translate("builder.enablePages") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                children: schema.pages === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Button, { onClick: enablePages, children: translate("builder.enablePages") }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
                   schema.pages.map((page, pageIndex) => {
                     const priorQuestionIds = new Set(
                       schema.pages?.slice(0, pageIndex).flatMap((item) => item.questionIds)
                     );
                     const availableSources = schema.fields.filter((field) => priorQuestionIds.has(field.id));
                     const source = schema.fields.find((field) => field.id === page.displayCondition?.questionId);
-                    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                       Fieldset,
                       {
                         className: builderClass("form-engine-builder__page"),
                         legend: page.title ?? `${translate("builder.newPage")} ${pageIndex + 1}`,
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__toolbar"), children: ToolbarSlot === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__toolbar"), children: ToolbarSlot === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                               IconButton,
                               {
                                 actionType: "moveUp",
@@ -2178,7 +2221,7 @@ function FormBuilder({
                                 onClick: () => movePage(pageIndex, -1)
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                               IconButton,
                               {
                                 actionType: "moveDown",
@@ -2187,7 +2230,7 @@ function FormBuilder({
                                 onClick: () => movePage(pageIndex, 1)
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                               IconButton,
                               {
                                 actionType: "delete",
@@ -2195,7 +2238,7 @@ function FormBuilder({
                                 onClick: () => removePage(pageIndex)
                               }
                             )
-                          ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                             ToolbarSlot,
                             {
                               schema,
@@ -2213,8 +2256,8 @@ function FormBuilder({
                               components
                             }
                           ) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: builderClass("form-engine-builder__grid"), children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: builderClass("form-engine-builder__grid"), children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                               TextInput,
                               {
                                 id: `builder-page-${page.id}-title`,
@@ -2229,7 +2272,7 @@ function FormBuilder({
                                 }
                               }
                             ) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                               TextInput,
                               {
                                 id: `builder-page-${page.id}-description`,
@@ -2245,10 +2288,10 @@ function FormBuilder({
                               }
                             ) })
                           ] }),
-                          !localizationEnabled || editingLocale.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: builderClass("form-engine-builder__translation-editor"), children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: editingLocale }),
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: builderClass("form-engine-builder__grid"), children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          !localizationEnabled || editingLocale.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: builderClass("form-engine-builder__translation-editor"), children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: editingLocale }),
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: builderClass("form-engine-builder__grid"), children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                 TextInput,
                                 {
                                   id: `builder-page-${page.id}-${editingLocale}-title`,
@@ -2267,7 +2310,7 @@ function FormBuilder({
                                   })
                                 }
                               ) }),
-                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                 TextInput,
                                 {
                                   id: `builder-page-${page.id}-${editingLocale}-description`,
@@ -2288,8 +2331,8 @@ function FormBuilder({
                               ) })
                             ] })
                           ] }),
-                          conditionsEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: builderClass("form-engine-builder__condition"), children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          conditionsEnabled ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: builderClass("form-engine-builder__condition"), children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                               Select,
                               {
                                 id: `builder-page-${page.id}-condition`,
@@ -2318,8 +2361,8 @@ function FormBuilder({
                                 ]
                               }
                             ) }),
-                            page.displayCondition !== void 0 && source !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            page.displayCondition !== void 0 && source !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                 Select,
                                 {
                                   "aria-label": translate("builder.conditionOperator"),
@@ -2341,7 +2384,7 @@ function FormBuilder({
                                   }))
                                 }
                               ),
-                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                 ConditionValueEditor,
                                 {
                                   source,
@@ -2361,8 +2404,8 @@ function FormBuilder({
                       page.id
                     );
                   }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: builderClass("form-engine-builder__page-add"), children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: builderClass("form-engine-builder__page-add"), children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                       Select,
                       {
                         id: "builder-page-question",
@@ -2376,11 +2419,11 @@ function FormBuilder({
                         ]
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { disabled: movablePageQuestions.length === 0, onClick: addPage, children: translate("builder.addPage") })
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Button, { disabled: movablePageQuestions.length === 0, onClick: addPage, children: translate("builder.addPage") })
                   ] })
                 ] })
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               PagesSlot,
               {
                 schema,
@@ -2392,14 +2435,14 @@ function FormBuilder({
                 components
               }
             ) : null }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BuilderSectionGroup, { name: "localization", children: localizationEnabled ? LocalizationSlot === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BuilderSectionGroup, { name: "localization", children: localizationEnabled ? LocalizationSlot === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
               Section,
               {
                 className: builderClass("form-engine-builder__localization"),
                 headingId: "builder-localization-heading",
                 title: translate("builder.localization"),
                 children: [
-                  resolvedSectionOrder === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  resolvedSectionOrder === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     TextInput,
                     {
                       id: "builder-completion-message",
@@ -2408,8 +2451,8 @@ function FormBuilder({
                       onChange: (value) => setSourceText({ kind: "form" }, "completionMessage", value)
                     }
                   ) }) : null,
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: builderClass("form-engine-builder__grid"), children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: builderClass("form-engine-builder__grid"), children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                       TextInput,
                       {
                         id: "builder-default-locale",
@@ -2418,7 +2461,7 @@ function FormBuilder({
                         onChange: setDefaultLocale
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: availableAllowedLocales === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: availableAllowedLocales === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                       TextInput,
                       {
                         id: "builder-new-locale",
@@ -2426,7 +2469,7 @@ function FormBuilder({
                         value: newLocale,
                         onChange: setNewLocale
                       }
-                    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                       Select,
                       {
                         id: "builder-new-locale",
@@ -2439,7 +2482,7 @@ function FormBuilder({
                         ]
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                       Button,
                       {
                         action: "addLocale",
@@ -2448,7 +2491,7 @@ function FormBuilder({
                         children: translate("builder.addLocale")
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                       Select,
                       {
                         id: "builder-edit-locale",
@@ -2461,14 +2504,14 @@ function FormBuilder({
                         ]
                       }
                     ) }),
-                    TranslationActionsSlot === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    TranslationActionsSlot === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                       Button,
                       {
                         disabled: translationAdapter === void 0 || editingLocale.length === 0 || isTranslating,
                         onClick: () => void translateAll(),
                         children: translate("builder.autoTranslate")
                       }
-                    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                       TranslationActionsSlot,
                       {
                         schema,
@@ -2486,10 +2529,10 @@ function FormBuilder({
                       }
                     )
                   ] }),
-                  translationAdapter === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: translate("builder.translationUnavailable") }) : null,
-                  translationError === null ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorMessage, { message: translationError }),
-                  editingLocale.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: builderClass("form-engine-builder__grid"), children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  translationAdapter === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: translate("builder.translationUnavailable") }) : null,
+                  translationError === null ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ErrorMessage, { message: translationError }),
+                  editingLocale.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: builderClass("form-engine-builder__grid"), children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                       TextInput,
                       {
                         id: `builder-${editingLocale}-form-title`,
@@ -2498,7 +2541,7 @@ function FormBuilder({
                         onChange: (value) => updateFormTranslation("title", value)
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                       TextInput,
                       {
                         id: `builder-${editingLocale}-form-description`,
@@ -2507,7 +2550,7 @@ function FormBuilder({
                         onChange: (value) => updateFormTranslation("description", value)
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                       TextInput,
                       {
                         id: `builder-${editingLocale}-completion-message`,
@@ -2519,7 +2562,7 @@ function FormBuilder({
                   ] })
                 ]
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               LocalizationSlot,
               {
                 schema,
@@ -2536,7 +2579,7 @@ function FormBuilder({
                 components
               }
             ) : null }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BuilderSectionGroup, { name: "questions", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__list"), children: schema.fields.map((field, index) => {
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BuilderSectionGroup, { name: "questions", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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,
@@ -2547,18 +2590,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__ */ (0, import_jsx_runtime.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   "div",
                   {
                     className: builderClass("form-engine-builder__question-preview"),
                     "data-field-id": field.id,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: editorState.onSelect, children: field.title })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", onClick: editorState.onSelect, children: field.title })
                   },
                   field.id
                 );
               }
               if (FieldEditorSlot !== void 0) {
-                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   FieldEditorSlot,
                   {
                     schema,
@@ -2578,14 +2621,14 @@ function FormBuilder({
                   field.id
                 );
               }
-              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                 Fieldset,
                 {
                   className: builderClass("form-engine-builder__question"),
                   legend: field.title,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__toolbar"), children: ToolbarSlot === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__toolbar"), children: ToolbarSlot === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         IconButton,
                         {
                           actionType: "moveUp",
@@ -2594,7 +2637,7 @@ function FormBuilder({
                           onClick: () => moveField(index, -1)
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         IconButton,
                         {
                           actionType: "moveDown",
@@ -2603,7 +2646,7 @@ function FormBuilder({
                           onClick: () => moveField(index, 1)
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         IconButton,
                         {
                           actionType: "delete",
@@ -2613,7 +2656,7 @@ function FormBuilder({
                           title: translate("builder.delete", { title: field.title })
                         }
                       )
-                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                       ToolbarSlot,
                       {
                         schema,
@@ -2631,8 +2674,8 @@ function FormBuilder({
                         components
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: builderClass("form-engine-builder__grid"), children: [
-                      controls.title === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: builderClass("form-engine-builder__grid"), children: [
+                      controls.title === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         TextInput,
                         {
                           id: `builder-field-${field.id}-title`,
@@ -2651,7 +2694,7 @@ function FormBuilder({
                           }))
                         }
                       ) }),
-                      controls.typeSelect === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      controls.typeSelect === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         Select,
                         {
                           id: `builder-field-${field.id}-type`,
@@ -2668,7 +2711,7 @@ function FormBuilder({
                           )
                         }
                       ) }),
-                      controls.required === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      controls.required === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         Checkbox,
                         {
                           className: builderClass("form-engine-builder__check"),
@@ -2679,7 +2722,7 @@ function FormBuilder({
                         }
                       )
                     ] }),
-                    controls.description === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    controls.description === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                       TextArea,
                       {
                         id: `builder-field-${field.id}-description`,
@@ -2694,7 +2737,7 @@ function FormBuilder({
                         })
                       }
                     ) }),
-                    !pagesEnabled || schema.pages === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    !pagesEnabled || schema.pages === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                       Select,
                       {
                         id: `builder-field-${field.id}-page`,
@@ -2707,10 +2750,10 @@ function FormBuilder({
                         }))
                       }
                     ) }),
-                    !localizationEnabled || editingLocale.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: builderClass("form-engine-builder__translation-editor"), children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: editingLocale }),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: builderClass("form-engine-builder__grid"), children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    !localizationEnabled || editingLocale.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: builderClass("form-engine-builder__translation-editor"), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: editingLocale }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: builderClass("form-engine-builder__grid"), children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                           TextInput,
                           {
                             id: `builder-field-${field.id}-${editingLocale}-title`,
@@ -2729,7 +2772,7 @@ function FormBuilder({
                             })
                           }
                         ) }),
-                        controls.description === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        controls.description === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                           TextInput,
                           {
                             id: `builder-field-${field.id}-${editingLocale}-description`,
@@ -2750,7 +2793,7 @@ function FormBuilder({
                           }
                         ) })
                       ] }),
-                      "options" in field ? field.options.map((option, optionIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "options" in field ? field.options.map((option, optionIndex) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         TextInput,
                         {
                           id: `builder-option-${option.id}-${editingLocale}`,
@@ -2770,8 +2813,8 @@ function FormBuilder({
                         }
                       ) }, option.id)) : null
                     ] }),
-                    field.type === "rating" && controls.ratingBounds !== "hidden" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: builderClass("form-engine-builder__grid"), children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    field.type === "rating" && controls.ratingBounds !== "hidden" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: builderClass("form-engine-builder__grid"), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         TextInput,
                         {
                           id: `builder-field-${field.id}-minimum`,
@@ -2789,7 +2832,7 @@ function FormBuilder({
                           }
                         }
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         TextInput,
                         {
                           id: `builder-field-${field.id}-maximum`,
@@ -2808,8 +2851,8 @@ function FormBuilder({
                         }
                       ) })
                     ] }) : null,
-                    (field.type === "text" || field.type === "textarea") && controls.textLimits !== "hidden" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: builderClass("form-engine-builder__grid"), children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    (field.type === "text" || field.type === "textarea") && controls.textLimits !== "hidden" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: builderClass("form-engine-builder__grid"), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         TextInput,
                         {
                           id: `builder-field-${field.id}-min-length`,
@@ -2824,7 +2867,7 @@ function FormBuilder({
                           })
                         }
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         TextInput,
                         {
                           id: `builder-field-${field.id}-max-length`,
@@ -2839,7 +2882,7 @@ function FormBuilder({
                           })
                         }
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         TextInput,
                         {
                           id: `builder-field-${field.id}-pattern`,
@@ -2853,7 +2896,7 @@ function FormBuilder({
                         }
                       ) })
                     ] }) : null,
-                    field.type === "number" && controls.numberLimits !== "hidden" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__grid"), children: ["min", "max", "step"].map((property) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    field.type === "number" && controls.numberLimits !== "hidden" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__grid"), children: ["min", "max", "step"].map((property) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                       TextInput,
                       {
                         id: `builder-field-${field.id}-${property}`,
@@ -2874,11 +2917,11 @@ function FormBuilder({
                         })
                       }
                     ) }, property)) }) : null,
-                    "options" in field && controls.options !== "hidden" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: builderClass("form-engine-builder__options"), children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: translate("builder.options") }),
+                    "options" in field && controls.options !== "hidden" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: builderClass("form-engine-builder__options"), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: translate("builder.options") }),
                       field.options.map(
-                        (option, optionIndex) => OptionEditorSlot === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: builderClass("form-engine-builder__option"), children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        (option, optionIndex) => OptionEditorSlot === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: builderClass("form-engine-builder__option"), children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                             TextInput,
                             {
                               id: `builder-option-${option.id}`,
@@ -2889,8 +2932,8 @@ function FormBuilder({
                               onChange: (value) => value.trim().length === 0 ? void 0 : updateOption(field.id, option.id, value)
                             }
                           ),
-                          ToolbarSlot === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          ToolbarSlot === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                               IconButton,
                               {
                                 actionType: "moveUp",
@@ -2899,7 +2942,7 @@ function FormBuilder({
                                 onClick: () => moveOption(field.id, option.id, optionIndex - 1)
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                               IconButton,
                               {
                                 actionType: "moveDown",
@@ -2908,7 +2951,7 @@ function FormBuilder({
                                 onClick: () => moveOption(field.id, option.id, optionIndex + 1)
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                               IconButton,
                               {
                                 actionType: "delete",
@@ -2917,7 +2960,7 @@ function FormBuilder({
                                 title: translate("builder.remove")
                               }
                             )
-                          ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                             ToolbarSlot,
                             {
                               schema,
@@ -2935,7 +2978,7 @@ function FormBuilder({
                               components
                             }
                           )
-                        ] }, option.id) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        ] }, option.id) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                           OptionEditorSlot,
                           {
                             schema,
@@ -2951,7 +2994,7 @@ function FormBuilder({
                           option.id
                         )
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         Button,
                         {
                           action: "addOption",
@@ -2962,8 +3005,8 @@ function FormBuilder({
                         }
                       )
                     ] }) : null,
-                    conditionsEnabled && controls.displayConditions !== "hidden" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: builderClass("form-engine-builder__condition"), children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    conditionsEnabled && controls.displayConditions !== "hidden" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: builderClass("form-engine-builder__condition"), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         Select,
                         {
                           id: `builder-field-${field.id}-condition`,
@@ -2989,8 +3032,8 @@ function FormBuilder({
                           ]
                         }
                       ) }),
-                      condition !== void 0 && source !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      condition !== void 0 && source !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                           Select,
                           {
                             "aria-label": translate("builder.conditionOperator"),
@@ -3008,7 +3051,7 @@ function FormBuilder({
                             }))
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                           ConditionValueEditor,
                           {
                             source,
@@ -3025,7 +3068,7 @@ function FormBuilder({
                 field.id
               );
             }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BuilderSectionGroup, { name: "addQuestion", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BuilderSectionGroup, { name: "addQuestion", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               Button,
               {
                 className: builderClass("form-engine-builder__add"),
@@ -3043,8 +3086,8 @@ function FormBuilder({
 }
 
 // src/context.tsx
-var import_core3 = require("@form-engine-ts/core");
-var import_react3 = require("react");
+var import_core4 = require("@form-engine-ts/core");
+var import_react4 = require("react");
 
 // src/types.ts
 var FormSubmissionError = class extends Error {
@@ -3057,8 +3100,8 @@ var FormSubmissionError = class extends Error {
 };
 
 // src/context.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var FormContext = (0, import_react3.createContext)(null);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var FormContext = (0, import_react4.createContext)(null);
 function issuesByField(issues) {
   const result = {};
   for (const issue of issues) result[issue.fieldId] ??= issue;
@@ -3085,31 +3128,31 @@ function FormProvider({
   onSubmit,
   children
 }) {
-  const validSchema = (0, import_react3.useMemo)(() => {
-    (0, import_core3.assertValidFormSchema)(schema);
-    const localized = (0, import_core3.resolveLocalizedSchema)(schema, locale);
-    (0, import_core3.assertValidFormSchema)(localized);
+  const validSchema = (0, import_react4.useMemo)(() => {
+    (0, import_core4.assertValidFormSchema)(schema);
+    const localized = (0, import_core4.resolveLocalizedSchema)(schema, locale);
+    (0, import_core4.assertValidFormSchema)(localized);
     return localized;
   }, [locale, schema]);
-  const [values, setValues] = (0, import_react3.useState)(() => ({ ...initialValues }));
-  const [errors, setErrors] = (0, import_react3.useState)({});
-  const [submitStatus, setSubmitStatus] = (0, import_react3.useState)("idle");
-  const [submitError, setSubmitError] = (0, import_react3.useState)(null);
-  const [validationPageIndex, setValidationPageIndex] = (0, import_react3.useState)(null);
-  const submissionInFlight = (0, import_react3.useRef)(false);
-  const visibility = (0, import_react3.useMemo)(() => (0, import_core3.calculateFieldVisibility)(validSchema, values), [validSchema, values]);
-  const pageVisibility = (0, import_react3.useMemo)(() => (0, import_core3.calculatePageVisibility)(validSchema, values), [validSchema, values]);
-  (0, import_react3.useEffect)(() => {
+  const [values, setValues] = (0, import_react4.useState)(() => ({ ...initialValues }));
+  const [errors, setErrors] = (0, import_react4.useState)({});
+  const [submitStatus, setSubmitStatus] = (0, import_react4.useState)("idle");
+  const [submitError, setSubmitError] = (0, import_react4.useState)(null);
+  const [validationPageIndex, setValidationPageIndex] = (0, import_react4.useState)(null);
+  const submissionInFlight = (0, import_react4.useRef)(false);
+  const visibility = (0, import_react4.useMemo)(() => (0, import_core4.calculateFieldVisibility)(validSchema, values), [validSchema, values]);
+  const pageVisibility = (0, import_react4.useMemo)(() => (0, import_core4.calculatePageVisibility)(validSchema, values), [validSchema, values]);
+  (0, import_react4.useEffect)(() => {
     const fieldIds = new Set(validSchema.fields.map((field) => field.id));
     setValues((current) => Object.fromEntries(Object.entries(current).filter(([fieldId]) => fieldIds.has(fieldId))));
   }, [validSchema]);
-  const setValue = (0, import_react3.useCallback)(
+  const setValue = (0, import_react4.useCallback)(
     (fieldId, value) => {
       setValues((current) => {
         const next = { ...current, [fieldId]: value };
         setErrors((currentErrors) => {
           if (Object.keys(currentErrors).length === 0) return currentErrors;
-          const result = validationPageIndex === null ? (0, import_core3.validateAnswers)(validSchema, next) : (0, import_core3.validatePageAnswers)(validSchema, validationPageIndex, next);
+          const result = validationPageIndex === null ? (0, import_core4.validateAnswers)(validSchema, next) : (0, import_core4.validatePageAnswers)(validSchema, validationPageIndex, next);
           return issuesByField(result.issues);
         });
         return next;
@@ -3119,7 +3162,7 @@ function FormProvider({
     },
     [validSchema, validationPageIndex]
   );
-  const setServerErrors = (0, import_react3.useCallback)((fieldErrors) => {
+  const setServerErrors = (0, import_react4.useCallback)((fieldErrors) => {
     setErrors(
       Object.fromEntries(
         Object.entries(fieldErrors).map(([fieldId, message]) => [
@@ -3130,7 +3173,7 @@ function FormProvider({
     );
     setValidationPageIndex(null);
   }, []);
-  const restoreValues = (0, import_react3.useCallback)(
+  const restoreValues = (0, import_react4.useCallback)(
     (restoredValues) => {
       const fieldIds = new Set(validSchema.fields.map((field) => field.id));
       setValues(Object.fromEntries(Object.entries(restoredValues).filter(([fieldId]) => fieldIds.has(fieldId))));
@@ -3141,9 +3184,9 @@ function FormProvider({
     },
     [validSchema]
   );
-  const validatePage = (0, import_react3.useCallback)(
+  const validatePage = (0, import_react4.useCallback)(
     (pageIndex) => {
-      const result = (0, import_core3.validatePageAnswers)(validSchema, pageIndex, values);
+      const result = (0, import_core4.validatePageAnswers)(validSchema, pageIndex, values);
       setErrors(issuesByField(result.issues));
       setValidationPageIndex(result.valid ? null : pageIndex);
       setSubmitStatus("idle");
@@ -3152,17 +3195,17 @@ function FormProvider({
     },
     [validSchema, values]
   );
-  const reset = (0, import_react3.useCallback)(() => {
+  const reset = (0, import_react4.useCallback)(() => {
     setValues({ ...initialValues });
     setErrors({});
     setValidationPageIndex(null);
     setSubmitStatus("idle");
     setSubmitError(null);
   }, [initialValues]);
-  const submit = (0, import_react3.useCallback)(
+  const submit = (0, import_react4.useCallback)(
     async (beforeSubmit, submitContext) => {
       if (submissionInFlight.current) return { status: "cancelled" };
-      const validation = (0, import_core3.validateAnswers)(validSchema, values);
+      const validation = (0, import_core4.validateAnswers)(validSchema, values);
       if (!validation.valid) {
         setErrors(issuesByField(validation.issues));
         setValidationPageIndex(null);
@@ -3173,7 +3216,7 @@ function FormProvider({
       setErrors({});
       setValidationPageIndex(null);
       setSubmitError(null);
-      const visibleValues = (0, import_core3.selectVisibleAnswers)(validSchema, values);
+      const visibleValues = (0, import_core4.selectVisibleAnswers)(validSchema, values);
       submissionInFlight.current = true;
       try {
         setSubmitStatus("submitting");
@@ -3206,11 +3249,11 @@ function FormProvider({
     },
     [initialValues, locale, onSubmit, resetOnSuccess, validSchema, values]
   );
-  const translate = (0, import_react3.useCallback)(
+  const translate = (0, import_react4.useCallback)(
     (key, params) => translator.translate(key, locale, params) ?? key,
     [locale, translator]
   );
-  const contextValue = (0, import_react3.useMemo)(
+  const contextValue = (0, import_react4.useMemo)(
     () => ({
       schema: validSchema,
       locale,
@@ -3249,10 +3292,10 @@ function FormProvider({
       visibility
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FormContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FormContext.Provider, { value: contextValue, children });
 }
 function useForm() {
-  const context = (0, import_react3.useContext)(FormContext);
+  const context = (0, import_react4.useContext)(FormContext);
   if (context === null) throw new Error("useForm must be called inside a FormProvider.");
   return context;
 }
@@ -3260,13 +3303,13 @@ function useField(fieldId) {
   const form = useForm();
   const field = form.schema.fields.find((item) => item.id === fieldId);
   if (field === void 0) throw new Error(`Unknown form field: ${fieldId}`);
-  const setValue = (0, import_react3.useCallback)((value) => form.setValue(fieldId, value), [fieldId, form]);
+  const setValue = (0, import_react4.useCallback)((value) => form.setValue(fieldId, value), [fieldId, form]);
   return { field, value: form.values[fieldId], error: form.errors[fieldId], setValue };
 }
 
 // src/hooks/useTranslationWorkspace.ts
-var import_core4 = require("@form-engine-ts/core");
-var import_react4 = require("react");
+var import_core5 = require("@form-engine-ts/core");
+var import_react5 = require("react");
 function updateTranslationMap(translations, locale, property, text) {
   if (property === "label") return translations ?? {};
   const current = translations?.[locale];
@@ -3283,7 +3326,7 @@ function asAsyncAdapter(adapter) {
   };
 }
 var validateLocalePipeline = (locale, schema, policy, customValidator) => {
-  const canonicalLocale = (0, import_core4.normalizeLocale)(locale);
+  const canonicalLocale = (0, import_core5.normalizeLocale)(locale);
   if (canonicalLocale === null) {
     return {
       valid: false,
@@ -3293,8 +3336,8 @@ var validateLocalePipeline = (locale, schema, policy, customValidator) => {
       }
     };
   }
-  const currentLocales = (schema.supportedLocales ?? []).map((candidate) => (0, import_core4.normalizeLocale)(candidate) ?? candidate);
-  const defaultLocale = schema.defaultLocale === void 0 ? "" : (0, import_core4.normalizeLocale)(schema.defaultLocale) ?? schema.defaultLocale;
+  const currentLocales = (schema.supportedLocales ?? []).map((candidate) => (0, import_core5.normalizeLocale)(candidate) ?? candidate);
+  const defaultLocale = schema.defaultLocale === void 0 ? "" : (0, import_core5.normalizeLocale)(schema.defaultLocale) ?? schema.defaultLocale;
   if (canonicalLocale === defaultLocale || currentLocales.includes(canonicalLocale)) {
     return {
       valid: false,
@@ -3304,7 +3347,7 @@ var validateLocalePipeline = (locale, schema, policy, customValidator) => {
       }
     };
   }
-  if (policy?.allowedLocales !== void 0 && !policy.allowedLocales.some((candidate) => (0, import_core4.normalizeLocale)(candidate) === canonicalLocale)) {
+  if (policy?.allowedLocales !== void 0 && !policy.allowedLocales.some((candidate) => (0, import_core5.normalizeLocale)(candidate) === canonicalLocale)) {
     return {
       valid: false,
       error: {
@@ -3350,20 +3393,26 @@ 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 (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 === "invalid_locale_format") {
+    return { type: "invalid_locale_format", locale: requestedLocale };
   }
-  return validation.error?.message ?? "Locale is not valid.";
+  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 { type: "custom_validation_failed", message: error.message };
 }
 function manualMetadata(sourceText, sourceLocale) {
   return {
     sourceLocale,
-    sourceTextHash: (0, import_core4.computeSourceTextHash)(sourceText),
+    sourceTextHash: (0, import_core5.computeSourceTextHash)(sourceText),
     translationSource: "manual",
     editedAt: (/* @__PURE__ */ new Date()).toISOString()
   };
@@ -3429,25 +3478,26 @@ function useTranslationWorkspace({
   translationAdapter,
   readOnly = false,
   policy,
+  beforeRemoveLocale,
   validateLocale
 }) {
-  const [draftSchema, setDraftSchema] = (0, import_react4.useState)(schema);
-  const [selectedLocale, setSelectedLocale] = (0, import_react4.useState)(targetLocale ?? "");
-  const [isTranslating, setIsTranslating] = (0, import_react4.useState)(false);
-  const [error, setError] = (0, import_react4.useState)();
+  const [draftSchema, setDraftSchema] = (0, import_react5.useState)(schema);
+  const [selectedLocale, setSelectedLocale] = (0, import_react5.useState)(targetLocale ?? "");
+  const [isTranslating, setIsTranslating] = (0, import_react5.useState)(false);
+  const [error, setError] = (0, import_react5.useState)();
   const currentSchema = onChange === void 0 ? draftSchema : schema;
-  const targetLocales = (0, import_react4.useMemo)(() => {
-    const locales = (0, import_core4.collectSchemaLocales)(currentSchema).allUniqueLocales;
+  const targetLocales = (0, import_react5.useMemo)(() => {
+    const locales = (0, import_core5.collectSchemaLocales)(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 = (0, import_react4.useMemo)(
-    () => activeLocale.length === 0 ? [] : (0, import_core4.collectTranslationSlots)(currentSchema, activeLocale),
+  const slots = (0, import_react5.useMemo)(
+    () => activeLocale.length === 0 ? [] : (0, import_core5.collectTranslationSlots)(currentSchema, activeLocale),
     [activeLocale, currentSchema]
   );
-  const summary = (0, import_react4.useMemo)(() => {
+  const summary = (0, import_react5.useMemo)(() => {
     const counts = {
       missing: 0,
       translated: 0,
@@ -3466,32 +3516,48 @@ function useTranslationWorkspace({
       completionPercentage: slots.length === 0 ? 100 : Math.round(complete / slots.length * 100)
     };
   }, [slots]);
-  const commit = (0, import_react4.useCallback)(
+  const commit = (0, import_react5.useCallback)(
     (next) => {
       setDraftSchema(next);
       onChange?.(next);
     },
     [onChange]
   );
-  const setTranslation = (0, import_react4.useCallback)(
+  const setTranslation = (0, import_react5.useCallback)(
     (slot, text) => {
       if (readOnly) return;
       commit(updateSchemaTranslation(currentSchema, slot, text, sourceLocale));
     },
     [commit, currentSchema, readOnly, sourceLocale]
   );
-  const addLocale = (0, import_react4.useCallback)(
+  const addLocale = (0, import_react5.useCallback)(
     (locale) => {
-      if (readOnly) return { success: false, error: "Workspace is read-only." };
-      const normalized = (0, import_core4.normalizeLocale)(locale);
+      if (readOnly) {
+        const workspaceError = { type: "read_only_mode" };
+        setError(workspaceError);
+        return { success: false, error: workspaceError };
+      }
+      const normalized = (0, import_core5.normalizeLocale)(locale);
       if (normalized === null) {
-        return {
-          success: false,
-          error: workspaceLocaleValidationMessage(validateLocalePipeline(locale, currentSchema, policy, validateLocale))
-        };
+        const workspaceError = workspaceLocaleValidationError(
+          validateLocalePipeline(locale, currentSchema, policy, validateLocale),
+          (0, import_core5.collectSchemaLocales)(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,
+          (0, import_core5.collectSchemaLocales)(currentSchema).allUniqueLocales.size,
+          normalized
+        );
+        setError(workspaceError);
+        return { success: false, error: workspaceError };
+      }
+      setError(void 0);
       commit({
         ...currentSchema,
         supportedLocales: [.../* @__PURE__ */ new Set([...currentSchema.supportedLocales ?? [], normalized])]
@@ -3501,31 +3567,72 @@ function useTranslationWorkspace({
     },
     [commit, currentSchema, policy, readOnly, validateLocale]
   );
-  const isAddLocaleAllowed = (0, import_react4.useCallback)(
+  const isAddLocaleAllowed = (0, import_react5.useCallback)(
     (locale) => {
       if (readOnly) return false;
-      const normalized = (0, import_core4.normalizeLocale)(locale);
+      const normalized = (0, import_core5.normalizeLocale)(locale);
       if (normalized === null) return false;
       return validateLocalePipeline(normalized, currentSchema, policy, validateLocale).valid;
     },
     [currentSchema, policy, readOnly, validateLocale]
   );
-  const removeLocale = (0, import_react4.useCallback)(
+  const removeLocale = (0, import_react5.useCallback)(
     (locale) => {
-      if (readOnly || locale === sourceLocale || locale === currentSchema.defaultLocale) return;
-      commit((0, import_core4.removeLocaleFromSchema)(currentSchema, locale));
-      if (activeLocale === locale) setSelectedLocale("");
+      if (readOnly || locale === sourceLocale || locale === currentSchema.defaultLocale) return false;
+      const remove = () => {
+        commit((0, import_core5.removeLocaleFromSchema)(currentSchema, locale));
+        if (activeLocale === locale) setSelectedLocale("");
+      };
+      const slotCount = (0, import_core5.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 = (0, import_react4.useCallback)(
+  const translateAll = (0, import_react5.useCallback)(
     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 {
-        const populated = await (0, import_core4.populateSchemaTranslations)(
+        const populated = await (0, import_core5.populateSchemaTranslations)(
           currentSchema,
           [activeLocale],
           asAsyncAdapter(translationAdapter),
@@ -3536,30 +3643,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 = (0, import_react4.useCallback)(
+  const translateSlot = (0, import_react5.useCallback)(
     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);
       }
@@ -3585,7 +3709,7 @@ function useTranslationWorkspace({
 }
 
 // src/receipt.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 function submissionReceiptQueryKey(formId, formVersion) {
   return `${formId}:v${formVersion}`;
 }
@@ -3656,19 +3780,19 @@ function createLocalStorageSubmissionReceiptStore(options = {}) {
 }
 function useSubmissionReceipts(store, queries) {
   const querySignature = JSON.stringify(queries.map(({ formId, formVersion }) => [formId, formVersion]));
-  const stableQueries = (0, import_react5.useMemo)(() => {
+  const stableQueries = (0, import_react6.useMemo)(() => {
     const parsed = JSON.parse(querySignature);
     if (!Array.isArray(parsed)) return [];
     return parsed.flatMap(
       (entry) => Array.isArray(entry) && typeof entry[0] === "string" && typeof entry[1] === "number" && Number.isSafeInteger(entry[1]) ? [{ formId: entry[0], formVersion: entry[1] }] : []
     );
   }, [querySignature]);
-  const [state, setState] = (0, import_react5.useState)({
+  const [state, setState] = (0, import_react6.useState)({
     receipts: /* @__PURE__ */ new Map(),
     isLoading: stableQueries.length > 0,
     error: null
   });
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     let active = true;
     if (stableQueries.length === 0) {
       setState({ receipts: /* @__PURE__ */ new Map(), isLoading: false, error: null });
@@ -3702,9 +3826,9 @@ function useSubmissionReceipts(store, queries) {
 }
 
 // src/renderer.tsx
-var import_core5 = require("@form-engine-ts/core");
-var import_react6 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_core6 = require("@form-engine-ts/core");
+var import_react7 = require("react");
+var import_jsx_runtime4 = require("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";
@@ -3723,22 +3847,22 @@ function RequiredMark({
   required,
   className = "fe-required"
 }) {
-  return required ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className, "aria-hidden": "true", children: [
+  return required ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className, "aria-hidden": "true", children: [
     " ",
     "*"
   ] }) : null;
 }
 function FieldMessage({ props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    props.field.description === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: props.helpId, className: "fe-help", children: props.field.description }),
-    props.error === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: props.errorId, className: "fe-error", children: props.translate(props.error.messageKey, props.error.params) })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    props.field.description === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { id: props.helpId, className: "fe-help", children: props.field.description }),
+    props.error === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("div", { id: props.helpId, className: "fe-field-description", children: props.field.description });
+  return props.field.description === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { id: props.helpId, className: "fe-field-description", children: props.field.description });
 }
 function GroupedChoiceError({ props }) {
-  return props.error === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime4.jsx)("div", { id: props.errorId, className: "fe-field-error", role: "alert", children: props.translate(props.error.messageKey, props.error.params) });
 }
 function ChoiceGroupFrame({
   props,
@@ -3762,10 +3886,10 @@ function ChoiceGroupFrame({
     children,
     className
   };
-  if (renderChoiceGroup !== void 0) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: renderChoiceGroup(groupProps) });
+  if (renderChoiceGroup !== void 0) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: renderChoiceGroup(groupProps) });
   return (
     // biome-ignore lint/a11y/useAriaPropsSupportedByRole: The grouped fieldset exposes the required state for the complete choice question.
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "fieldset",
       {
         className,
@@ -3776,13 +3900,13 @@ function ChoiceGroupFrame({
         "aria-required": field.required,
         style: slotProps?.style,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("legend", { className: "fe-choice-legend", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("legend", { className: "fe-choice-legend", children: [
             field.title,
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RequiredMark, { required: field.required, className: "fe-required-badge" })
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RequiredMark, { required: field.required, className: "fe-required-badge" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GroupedChoiceDescription, { props }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GroupedChoiceDescription, { props }),
           children,
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GroupedChoiceError, { props })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GroupedChoiceError, { props })
         ]
       }
     )
@@ -3806,7 +3930,7 @@ function DefaultField({
   };
   if (field.type === "checkbox") {
     if (isGroupedChoiceField) {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         ChoiceGroupFrame,
         {
           props,
@@ -3815,8 +3939,8 @@ function DefaultField({
           renderChoiceGroup,
           disabled,
           readOnly,
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fe-choice-options", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "fe-choice-option", htmlFor: inputId, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "fe-choice-options", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "fe-choice-option", htmlFor: inputId, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "input",
               {
                 id: inputId,
@@ -3829,14 +3953,14 @@ function DefaultField({
                 onChange: (event) => setValue(event.currentTarget.checked)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: field.title })
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: field.title })
           ] }) })
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-field fe-field--checkbox", "data-field-id": field.id, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "fe-check-label", htmlFor: inputId, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fe-field fe-field--checkbox", "data-field-id": field.id, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "fe-check-label", htmlFor: inputId, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "input",
           {
             ...ariaProps,
@@ -3847,19 +3971,19 @@ function DefaultField({
             onChange: (event) => setValue(event.currentTarget.checked)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
           field.title,
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RequiredMark, { required: field.required })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RequiredMark, { required: field.required })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldMessage, { props })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(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__ */ (0, import_jsx_runtime3.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         ChoiceGroupFrame,
         {
           props,
@@ -3868,11 +3992,11 @@ function DefaultField({
           renderChoiceGroup,
           disabled,
           readOnly,
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fe-choice-options", children: field.options.map((option, index) => {
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "fe-choice-option", htmlFor: optionId, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "fe-choice-option", htmlFor: optionId, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "input",
                 {
                   id: optionId,
@@ -3902,22 +4026,22 @@ function DefaultField({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: option.label })
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: option.label })
             ] }, option.id);
           }) })
         }
       );
     }
     if (field.type === "radio") {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-field fe-field--radio", "data-field-id": field.id, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-label", children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fe-field fe-field--radio", "data-field-id": field.id, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fe-label", children: [
           field.title,
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RequiredMark, { required: field.required })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RequiredMark, { required: field.required })
         ] }),
         field.options.map((option, index) => {
           const optionId = `${inputId}-${index}`;
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "fe-check-label", htmlFor: optionId, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "fe-check-label", htmlFor: optionId, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "input",
               {
                 ...ariaProps,
@@ -3929,22 +4053,22 @@ function DefaultField({
                 onChange: () => setValue(option.id)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: option.label })
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: option.label })
           ] }, option.id);
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldMessage, { props })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldMessage, { props })
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("fieldset", { className: `fe-field fe-field--${field.type}`, "data-field-id": field.id, ...ariaProps, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("legend", { className: "fe-label", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("fieldset", { className: `fe-field fe-field--${field.type}`, "data-field-id": field.id, ...ariaProps, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("legend", { className: "fe-label", children: [
         field.title,
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RequiredMark, { required: field.required })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(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__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "fe-check-label", htmlFor: optionId, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "fe-check-label", htmlFor: optionId, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "input",
             {
               id: optionId,
@@ -3961,24 +4085,24 @@ function DefaultField({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: option.label })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: option.label })
         ] }, option.id);
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldMessage, { props })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldMessage, { props })
     ] });
   }
   if (field.type === "rating") {
     const min = field.min ?? 1;
     const max = field.max ?? 5;
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("fieldset", { className: "fe-field fe-field--rating", "data-field-id": field.id, ...ariaProps, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("legend", { className: "fe-label", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("fieldset", { className: "fe-field fe-field--rating", "data-field-id": field.id, ...ariaProps, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("legend", { className: "fe-label", children: [
         field.title,
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RequiredMark, { required: field.required })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RequiredMark, { required: field.required })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fe-rating-options", children: Array.from({ length: max - min + 1 }, (_, index) => min + index).map((rating) => {
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "fe-rating-options", children: Array.from({ length: max - min + 1 }, (_, index) => min + index).map((rating) => {
         const optionId = `${inputId}-${rating}`;
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "fe-rating-label", htmlFor: optionId, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "fe-rating-label", htmlFor: optionId, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "input",
             {
               id: optionId,
@@ -3989,15 +4113,15 @@ function DefaultField({
               onChange: () => setValue(rating)
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: rating })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: rating })
         ] }, rating);
       }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldMessage, { props })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldMessage, { props })
     ] });
   }
-  const label = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "fe-label", htmlFor: inputId, children: [
+  const label = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "fe-label", htmlFor: inputId, children: [
     field.title,
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RequiredMark, { required: field.required })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RequiredMark, { required: field.required })
   ] });
   let control;
   const textConstraints = field.type === "text" || field.type === "textarea" ? {
@@ -4006,7 +4130,7 @@ function DefaultField({
     ...field.pattern === void 0 ? {} : { pattern: field.pattern }
   } : {};
   if (field.type === "textarea") {
-    control = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    control = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "textarea",
       {
         ...ariaProps,
@@ -4019,7 +4143,7 @@ function DefaultField({
       }
     );
   } else if (field.type === "number") {
-    control = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    control = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "input",
       {
         ...ariaProps,
@@ -4036,7 +4160,7 @@ function DefaultField({
       }
     );
   } else if (field.type === "select") {
-    control = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    control = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "select",
       {
         ...ariaProps,
@@ -4046,14 +4170,14 @@ function DefaultField({
         value: typeof value === "string" ? value : "",
         onChange: (event) => setValue(event.currentTarget.value || void 0),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "", children: "\u2014" }),
-          field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: option.id, children: option.label }, option.id))
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "", children: "\u2014" }),
+          field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: option.id, children: option.label }, option.id))
         ]
       }
     );
   } else {
     const placeholderKey = "placeholderKey" in field ? field.placeholderKey : void 0;
-    control = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    control = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "input",
       {
         ...ariaProps,
@@ -4067,7 +4191,7 @@ function DefaultField({
     );
   }
   if (isGroupedChoiceField) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       ChoiceGroupFrame,
       {
         props,
@@ -4076,23 +4200,23 @@ function DefaultField({
         renderChoiceGroup,
         disabled,
         readOnly,
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fe-choice-options", children: control })
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "fe-choice-options", children: control })
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `fe-field fe-field--${field.type}`, "data-field-id": field.id, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `fe-field fe-field--${field.type}`, "data-field-id": field.id, children: [
     label,
     control,
     (field.type === "text" || field.type === "textarea") && field.maxLength !== void 0 ? props.renderCharacterCount?.({
       fieldId: field.id,
       current: typeof value === "string" ? value.length : 0,
       max: field.maxLength
-    }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-character-count", "aria-live": "polite", children: [
+    }) ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fe-character-count", "aria-live": "polite", children: [
       typeof value === "string" ? value.length : 0,
       " / ",
       field.maxLength
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldMessage, { props })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldMessage, { props })
   ] });
 }
 function isRecord(value) {
@@ -4214,32 +4338,34 @@ function ContextFormRenderer({
   slots = {}
 }) {
   const form = useForm();
-  const prefix = (0, import_react6.useId)().replace(/:/g, "");
-  const formRef = (0, import_react6.useRef)(null);
-  const loadedDraftKey = (0, import_react6.useRef)(null);
-  const [draftRestored, setDraftRestored] = (0, import_react6.useState)(false);
-  const [currentPageIndex, setCurrentPageIndex] = (0, import_react6.useState)(0);
-  const [focusFieldId, setFocusFieldId] = (0, import_react6.useState)(null);
-  const [confirmation, setConfirmation] = (0, import_react6.useState)(null);
-  const [guardMessage, setGuardMessage] = (0, import_react6.useState)(null);
-  const [guardsPending, setGuardsPending] = (0, import_react6.useState)(false);
-  const [receipt, setReceipt] = (0, import_react6.useState)(null);
-  const [completionData, setCompletionData] = (0, import_react6.useState)(null);
-  const [receiptLoaded, setReceiptLoaded] = (0, import_react6.useState)(receiptStore === void 0);
-  const rendererSubmissionInFlight = (0, import_react6.useRef)(false);
-  const fallbackAttemptId = (0, import_react6.useRef)(null);
-  const completionRef = (0, import_react6.useRef)(null);
-  const confirmationRef = (0, import_react6.useRef)(null);
+  const i18n = useFormEngineI18n();
+  const isProviderValue = (0, import_react7.useContext)(FormEngineI18nProviderScopeContext);
+  const prefix = (0, import_react7.useId)().replace(/:/g, "");
+  const formRef = (0, import_react7.useRef)(null);
+  const loadedDraftKey = (0, import_react7.useRef)(null);
+  const [draftRestored, setDraftRestored] = (0, import_react7.useState)(false);
+  const [currentPageIndex, setCurrentPageIndex] = (0, import_react7.useState)(0);
+  const [focusFieldId, setFocusFieldId] = (0, import_react7.useState)(null);
+  const [confirmation, setConfirmation] = (0, import_react7.useState)(null);
+  const [guardMessage, setGuardMessage] = (0, import_react7.useState)(null);
+  const [guardsPending, setGuardsPending] = (0, import_react7.useState)(false);
+  const [receipt, setReceipt] = (0, import_react7.useState)(null);
+  const [completionData, setCompletionData] = (0, import_react7.useState)(null);
+  const [receiptLoaded, setReceiptLoaded] = (0, import_react7.useState)(receiptStore === void 0);
+  const rendererSubmissionInFlight = (0, import_react7.useRef)(false);
+  const fallbackAttemptId = (0, import_react7.useRef)(null);
+  const completionRef = (0, import_react7.useRef)(null);
+  const confirmationRef = (0, import_react7.useRef)(null);
   const pages = form.schema.pages;
-  const visiblePageIndexes = (0, import_react6.useMemo)(
+  const visiblePageIndexes = (0, import_react7.useMemo)(
     () => 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 = (0, import_react6.useMemo)(() => (0, import_core5.selectVisibleAnswers)(form.schema, form.values), [form.schema, form.values]);
-  const visibleItems = (0, import_react6.useMemo)(
+  const visibleValues = (0, import_react7.useMemo)(() => (0, import_core6.selectVisibleAnswers)(form.schema, form.values), [form.schema, form.values]);
+  const visibleItems = (0, import_react7.useMemo)(
     () => buildSubmittedItems(form.schema, form.values, form.visibility, (key) => form.translate(key), false),
     [form.schema, form.translate, form.values, form.visibility]
   );
@@ -4248,23 +4374,24 @@ function ContextFormRenderer({
   const submitState = confirmation === null && !guardsPending ? form.submitStatus : "confirming";
   const interactionLocked = submitState === "confirming" || submitState === "submitting";
   const isReplaceMode = successRenderMode === "replace" || hideFormOnSuccess;
-  const resolveMessage = (0, import_react6.useCallback)(
+  const resolveMessage = (0, import_react7.useCallback)(
     (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 = (0, import_react6.useCallback)(
+  const fieldTranslate = (0, import_react7.useCallback)(
     (key, params) => key === "validation.required" && (messages.requiredField !== void 0 || messageResolver !== void 0) ? resolveMessage("requiredField") : form.translate(key, params),
     [form.translate, messageResolver, messages.requiredField, resolveMessage]
   );
-  const focusSubmitButton = (0, import_react6.useCallback)(() => {
+  const focusSubmitButton = (0, import_react7.useCallback)(() => {
     const button = formRef.current?.querySelector(".fe-submit, button[type='submit'], button");
     button?.focus();
   }, []);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     let active = true;
     if (receiptStore === void 0) {
       setReceipt(null);
@@ -4285,14 +4412,14 @@ function ContextFormRenderer({
       active = false;
     };
   }, [form.schema.id, form.schema.version, receiptStore]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (pages === void 0 || visiblePageIndexes.length === 0) {
       setCurrentPageIndex(0);
       return;
     }
     if (!visiblePageIndexes.includes(currentPageIndex)) setCurrentPageIndex(visiblePageIndexes[0] ?? 0);
   }, [currentPageIndex, pages, visiblePageIndexes]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (focusFieldId === null) return;
     const fieldContainer = [...formRef.current?.querySelectorAll("[data-field-id]") ?? []].find(
       (element) => element.dataset.fieldId === focusFieldId
@@ -4304,11 +4431,11 @@ function ContextFormRenderer({
       setFocusFieldId(null);
     }
   }, [focusFieldId]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!isReplaceMode || form.submitStatus !== "success") return;
     completionRef.current?.focus();
   }, [form.submitStatus, isReplaceMode]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (confirmation === null) return;
     const confirmButton = confirmationRef.current?.querySelector("[data-fe-confirm], button");
     confirmButton?.focus();
@@ -4340,7 +4467,7 @@ function ContextFormRenderer({
     globalThis.addEventListener("keydown", onKeyDown);
     return () => globalThis.removeEventListener("keydown", onKeyDown);
   }, [confirmation, confirmationRenderMode, focusSubmitButton]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (autoSaveKey === void 0 || typeof globalThis.localStorage === "undefined") return;
     const loadIdentity = `${autoSaveKey}:${form.schema.id}:${form.schema.version}`;
     if (loadedDraftKey.current === loadIdentity) return;
@@ -4352,7 +4479,7 @@ function ContextFormRenderer({
     form.restoreValues(draft.values);
     setDraftRestored(true);
   }, [autoSaveKey, form.restoreValues, form.schema.id, form.schema.version]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (form.submitStatus === "success") return;
     const timeout = globalThis.setTimeout(() => {
       onDraftSave?.(form.values);
@@ -4408,7 +4535,7 @@ function ContextFormRenderer({
     if (rendererSubmissionInFlight.current || submitState === "submitting" || submitState === "success" || confirmation !== null && !guardsConfirmed) {
       return { status: "cancelled" };
     }
-    const validation = (0, import_core5.validateAnswers)(form.schema, form.values);
+    const validation = (0, import_core6.validateAnswers)(form.schema, form.values);
     const firstInvalidFieldId = validation.issues[0]?.fieldId;
     if (validation.valid && !guardsConfirmed) {
       rendererSubmissionInFlight.current = true;
@@ -4562,8 +4689,8 @@ function ContextFormRenderer({
       disabled: interactionLocked || submitState === "success",
       onSubmit: () => void submitValues()
     };
-    return slots.renderSubmitButton?.(submitButtonProps) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { className: "fe-submit", type: "submit", disabled: submitButtonProps.disabled, children: [
-      submitState === "submitting" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fe-spinner", "aria-hidden": "true" }) : null,
+    return slots.renderSubmitButton?.(submitButtonProps) ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("button", { className: "fe-submit", type: "submit", disabled: submitButtonProps.disabled, children: [
+      submitState === "submitting" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fe-spinner", "aria-hidden": "true" }) : null,
       submitState === "submitting" ? resolveMessage("submittingButton") : resolveMessage("submitButton", form.translate(form.schema.submitLabelKey ?? "form.submit"))
     ] });
   };
@@ -4586,11 +4713,11 @@ function ContextFormRenderer({
     ...activeCompletionData.response === void 0 ? {} : { response: activeCompletionData.response },
     onReset: form.reset
   };
-  const completionRegion = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ref: completionRef, className: "fe-completion", role: "status", "aria-live": "polite", tabIndex: -1, children: [
-    slots.renderCompletion?.(completionProps) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: completionMessage }),
+  const completionRegion = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref: completionRef, className: "fe-completion", role: "status", "aria-live": "polite", tabIndex: -1, children: [
+    slots.renderCompletion?.(completionProps) ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: completionMessage }),
     slots.renderSubmittedValues?.({ items: activeCompletionData.submittedItems, schema: form.schema })
   ] });
-  const confirmationContent = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  const confirmationContent = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
       ref: confirmationRef,
@@ -4604,53 +4731,53 @@ function ContextFormRenderer({
         visibleItems,
         onConfirm: confirmSubmission,
         onCancel: cancelSubmission
-      }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { children: confirmation?.generic === true ? form.locale.toLowerCase().startsWith("ja") ? "\u56DE\u7B54\u5185\u5BB9\u306E\u78BA\u8A8D" : "Review your answers" : resolveMessage("confirmSensitiveDataTitle") }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("ul", { children: (confirmation?.findings ?? []).map((finding, index) => {
+      }) ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { children: confirmation?.generic === true ? form.locale.toLowerCase().startsWith("ja") ? "\u56DE\u7B54\u5185\u5BB9\u306E\u78BA\u8A8D" : "Review your answers" : resolveMessage("confirmSensitiveDataTitle") }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime3.jsxs)("li", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: finding.fieldTitle ?? field?.title ?? finding.fieldId }),
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("li", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: finding.fieldTitle ?? field?.title ?? finding.fieldId }),
             " ",
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fe-sensitive-type", children: typeLabel }),
-            value === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "fe-sensitive-value", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fe-sensitive-type", children: typeLabel }),
+            value === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "fe-sensitive-value", children: [
               " ",
               value
             ] })
           ] }, `${finding.fieldId}-${finding.type}-${finding.start ?? index}`);
         }) }),
-        confirmation?.generic === true ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "fe-submission-summary", children: visibleItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("li", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: item.title }),
+        confirmation?.generic === true ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "fe-submission-summary", children: visibleItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("li", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: item.title }),
           ": ",
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: item.displayValue })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: item.displayValue })
         ] }, item.fieldId)) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", "data-fe-confirm": "true", onClick: confirmSubmission, children: resolveMessage("confirmButton", form.translate("form.confirmSubmission")) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: cancelSubmission, children: resolveMessage("cancelButton", form.translate("form.cancelSubmission")) })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", "data-fe-confirm": "true", onClick: confirmSubmission, children: resolveMessage("confirmButton", form.translate("form.confirmSubmission")) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", onClick: cancelSubmission, children: resolveMessage("cancelButton", form.translate("form.cancelSubmission")) })
       ] })
     }
   );
   if (!receiptLoaded) return null;
   if (receipt !== null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `fe-form fe-already-submitted ${className}`.trim(), children: slots.renderAlreadySubmitted?.({
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `fe-form fe-already-submitted ${className}`.trim(), children: slots.renderAlreadySubmitted?.({
       receipt,
       ...receiptStore === void 0 ? {} : { onReset: () => void resetReceipt() }
-    }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "status", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { children: resolveMessage("alreadySubmittedTitle") }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: resolveMessage("alreadySubmittedMessage", form.translate("form.alreadySubmitted")) }),
-      receiptStore === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: () => void resetReceipt(), children: resolveMessage("submitButton", form.translate("form.submitAnother")) })
+    }) ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { role: "status", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { children: resolveMessage("alreadySubmittedTitle") }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: resolveMessage("alreadySubmittedMessage", form.translate("form.alreadySubmitted")) }),
+      receiptStore === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", onClick: () => void resetReceipt(), children: resolveMessage("submitButton", form.translate("form.submitAnother")) })
     ] }) });
   }
   if (form.submitStatus === "success" && isReplaceMode) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `fe-form ${className}`.trim(), children: completionRegion });
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `fe-form ${className}`.trim(), children: completionRegion });
   }
   if (confirmation !== null && confirmationRenderMode === "replace") {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `fe-form ${className}`.trim(), children: confirmationContent });
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `fe-form ${className}`.trim(), children: confirmationContent });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "form",
       {
         ref: formRef,
@@ -4662,11 +4789,11 @@ function ContextFormRenderer({
           slots.renderHeader?.({
             title: form.schema.title,
             ...form.schema.description === void 0 ? {} : { description: form.schema.description }
-          }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("header", { className: "fe-header", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h1", { children: form.schema.title }),
-            form.schema.description === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: form.schema.description }),
-            pages === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-progress", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          }) ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("header", { className: "fe-header", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h1", { children: form.schema.title }),
+            form.schema.description === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: form.schema.description }),
+            pages === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fe-progress", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "div",
                 {
                   className: "form-progress-bar",
@@ -4674,7 +4801,7 @@ function ContextFormRenderer({
                   "aria-valuemin": 1,
                   "aria-valuemax": visiblePageIndexes.length,
                   "aria-valuenow": activeVisibleIndex + 1,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                     "div",
                     {
                       className: "form-progress-fill",
@@ -4683,17 +4810,17 @@ function ContextFormRenderer({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: form.translate("form.step", { current: activeVisibleIndex + 1, total: visiblePageIndexes.length }) })
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: form.translate("form.step", { current: activeVisibleIndex + 1, total: visiblePageIndexes.length }) })
             ] }),
-            draftRestored ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "form-draft-badge", children: form.translate("form.draftRestored") }) : null
+            draftRestored ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-page-header", children: [
-            activePage.title === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: "fe-page-title", children: activePage.title }),
-            activePage.description === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "fe-page-description", children: activePage.description })
+          }) ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fe-page-header", children: [
+            activePage.title === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { className: "fe-page-title", children: activePage.title }),
+            activePage.description === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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) => {
@@ -4710,7 +4837,7 @@ function ContextFormRenderer({
                 ...slots.renderCharacterCount === void 0 ? {} : { renderCharacterCount: slots.renderCharacterCount }
               };
               if (slots.renderField !== void 0) {
-                return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react6.Fragment, { children: slots.renderField({
+                return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react7.Fragment, { children: slots.renderField({
                   question: field,
                   value: form.values[field.id],
                   onChange: (value) => {
@@ -4720,7 +4847,7 @@ function ContextFormRenderer({
                 }) }, field.id);
               }
               const Component = components[field.type];
-              return Component === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              return Component === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 DefaultField,
                 {
                   ...props,
@@ -4731,20 +4858,20 @@ function ContextFormRenderer({
                   disabled: interactionLocked
                 },
                 field.id
-              ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ...props }, field.id);
+              ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, { ...props }, field.id);
             });
             const fieldClassName = `fe-fields${fieldsClassName === void 0 ? "" : ` ${fieldsClassName}`}`;
-            return slots.renderFields?.({ children: fieldChildren, className: fieldClassName }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: fieldClassName, children: fieldChildren });
+            return slots.renderFields?.({ children: fieldChildren, className: fieldClassName }) ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: fieldClassName, children: fieldChildren });
           })(),
-          guardMessage === null ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "alert", children: guardMessage }),
+          guardMessage === null ? null : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { role: "alert", children: guardMessage }),
           confirmation !== null && confirmationRenderMode === "inline" ? confirmationContent : null,
-          validationIssues.length === 0 ? null : slots.renderValidationSummary?.({ issues: validationIssues }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-validation-summary", role: "alert", children: [
+          validationIssues.length === 0 ? null : slots.renderValidationSummary?.({ issues: validationIssues }) ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fe-validation-summary", role: "alert", children: [
             validationIssues.length,
             " validation error",
             validationIssues.length === 1 ? "" : "s",
             "."
           ] }),
-          pages === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+          pages === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
             slots.renderNavigation?.({
               currentPage: 0,
               totalPages: 1,
@@ -4754,7 +4881,7 @@ function ContextFormRenderer({
               onNext: () => void 0
             }),
             renderSubmitButton()
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "form-step-navigation", children: [
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "form-step-navigation", children: [
             slots.renderNavigation?.({
               currentPage: activeVisibleIndex,
               totalPages: visiblePageIndexes.length,
@@ -4764,8 +4891,8 @@ function ContextFormRenderer({
                 if (!interactionLocked) setCurrentPageIndex(visiblePageIndexes[activeVisibleIndex - 1] ?? 0);
               },
               onNext: handleNext
-            }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-              canPrev ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            }) ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+              canPrev ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "button",
                 {
                   className: "btn-prev",
@@ -4775,24 +4902,24 @@ function ContextFormRenderer({
                   children: form.translate("form.back")
                 }
               ) : null,
-              canNext ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "btn-next", type: "button", disabled: interactionLocked, onClick: handleNext, children: form.translate("form.next") }) : null
+              canNext ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "btn-next", type: "button", disabled: interactionLocked, onClick: handleNext, children: form.translate("form.next") }) : null
             ] }),
             canNext ? null : renderSubmitButton()
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-status", "aria-live": "polite", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fe-status", "aria-live": "polite", children: [
             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__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "alert", children: [
+            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__ */ (0, import_jsx_runtime4.jsxs)("div", { role: "alert", children: [
               form.submitError.payload.formError,
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: () => void submitValues(), children: resolveMessage("retryButton") })
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "alert", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", onClick: () => void submitValues(), children: resolveMessage("retryButton") })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { role: "alert", children: [
               errorMessageKey === void 0 ? resolveMessage("serverErrorSummary") : form.translate(errorMessageKey),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: () => void submitValues(), children: resolveMessage("retryButton") })
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", onClick: () => void submitValues(), children: resolveMessage("retryButton") })
             ] })) : null
           ] })
         ]
       }
     ),
-    confirmation !== null && confirmationRenderMode === "dialog" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fe-confirmation-dialog-backdrop", role: "dialog", "aria-modal": "true", children: confirmationContent }) : null
+    confirmation !== null && confirmationRenderMode === "dialog" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "fe-confirmation-dialog-backdrop", role: "dialog", "aria-modal": "true", children: confirmationContent }) : null
   ] });
 }
 var RENDERER_MESSAGES = {
@@ -4837,17 +4964,22 @@ var defaultRendererTranslator = {
   }
 };
 function FormRenderer(props) {
-  if (!("schema" in props)) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ContextFormRenderer, { ...props });
+  const i18n = useFormEngineI18n();
+  const isProviderValue = (0, import_react7.useContext)(FormEngineI18nProviderScopeContext);
+  if (!("schema" in props)) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ContextFormRenderer, { ...props });
   const {
     schema,
     locale = schema.defaultLocale ?? "en",
-    translator = defaultRendererTranslator,
+    translator: explicitTranslator,
     initialValues,
     resetOnSuccess,
     onSubmit,
     ...rendererProps
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  const translator = explicitTranslator ?? (isProviderValue ? {
+    translate: (key, _locale, params) => params === void 0 ? i18n.translator(key) : i18n.translator(key, { ...params })
+  } : defaultRendererTranslator);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     FormProvider,
     {
       schema,
@@ -4856,7 +4988,7 @@ function FormRenderer(props) {
       onSubmit,
       ...initialValues === void 0 ? {} : { initialValues },
       ...resetOnSuccess === void 0 ? {} : { resetOnSuccess },
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ContextFormRenderer, { ...rendererProps })
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ContextFormRenderer, { ...rendererProps })
     }
   );
 }
@@ -4865,6 +4997,8 @@ function FormRenderer(props) {
   BUILDER_TRANSLATION_ALIASES,
   BUILDER_TRANSLATION_KEYS,
   FormBuilder,
+  FormEngineI18nContext,
+  FormEngineI18nProvider,
   FormProvider,
   FormRenderer,
   FormSubmissionError,
@@ -4880,6 +5014,7 @@ function FormRenderer(props) {
   useField,
   useForm,
   useFormBuilder,
+  useFormEngineI18n,
   useSubmissionReceipts,
   useTranslationWorkspace,
   validateLocalePipeline