@ostack.tech/ui-kform 0.1.2 → 0.2.1

package/dist/ostack-ui-kform.js

@@ -1,21 +1,28 @@
-import { usePrefix as usePrefix$1, ptPT as ptPT$1, useErrorReporter, useConstant, EMPTY_STORE, Field, Feedback, FeedbackList, useLatestValues, useSpacing, useCssVars, NATIVE_CONTROLS, useIsInRoot, warnOnce, useResponsiveValues, useCombinedRef, cx, PrefixProvider, LocalizationProvider as LocalizationProvider$1, Root, useToastManager, Tabs, computed, TabContent, ErrorBoundary, DocumentTitle, Spinner, useControllableState, FeedbackPopover, combineEventHandlers, useMediaBreakpointUp, DropdownMenu, DropdownMenuTrigger, Button, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuGroup, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuItem, useAlertDialog, DropdownMenuRadioItem, controlStatusToAccent, VisuallyHidden, IconButton, Tab, boolDataAttr, TabList, useIsInTableCell, useDataTableColumnLabel, useOnFieldLabelChange, useDateTransformer, DateRangeInput, Input, Dialog, Tooltip, DialogTrigger, ControlAddon, Icon, DialogContent, DialogHeader, DialogTitle, DialogBody, Alert, Stack, Popover, PopoverTrigger, PopoverContent, useMeasure, Container, Option, Select, MenuListItem, MenuList, CloseButton, useScrollPosition, setBoolDataAttr, Card, CardHeader, CardTitle, CardBody, useIntersectionObserver, useKeyboardShortcut, ButtonGroup, AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogBody, AlertDialogDescription, Checkbox, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Slot, DataTableCell, DataTableRow, useDataTableApiRef, DataTable, DataTableContent, DataTablePagination, DataTableRowsPerPage, enGB as enGB$1, enUS as enUS$1, frFR as frFR$1, OptionsGroup, CheckboxGroup, DateInput, Stepper, StepContent, Step, StepList, NumericInput, Link, RadioGroup, Radio, TextArea, PortalContext } from "@ostack.tech/ui";
+import { ValidationFailure, Path, AbsolutePathFragment, PathMultimap, AbsolutePath, sliceTable, listableSize, nullableSchemaInnerSchema, compareSchemaPaths, PromiseCancellationException, arrayToTable, indexOfTableRowId, isComputedSchema } from "@ostack.tech/kform";
+import { usePrefix as usePrefix$1, useErrorReporter, useConstant, EMPTY_STORE, Field, Feedback, FeedbackList, useLatestValues, useSpacing, useCssVars, NATIVE_CONTROLS, useResponsiveValues, useCombinedRef, cx, useIsInRoot, warnOnce, PrefixProvider, Root, useToastManager, Tabs, computed, TabContent, ErrorBoundary, DocumentTitle, Spinner, useControllableState, FeedbackPopover, combineEventHandlers, useMediaBreakpointUp, DropdownMenu, DropdownMenuTrigger, Button, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuGroup, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuItem, useAlertDialog, DropdownMenuRadioItem, controlStatusToAccent, VisuallyHidden, IconButton, Tab, boolDataAttr, TabList, useIsInTableCell, useDataTableColumnLabel, useOnFieldLabelChange, useDateTransformer, DateRangeInput, Input, Dialog, Tooltip, DialogTrigger, ControlAddon, Icon, DialogContent, DialogHeader, DialogTitle, DialogBody, Alert, Stack, Popover, PopoverTrigger, PopoverContent, useMeasure, Container, Option, Select, MenuListItem, MenuList, CloseButton, useScrollPosition, setBoolDataAttr, Card, CardHeader, CardTitle, CardBody, useIntersectionObserver, useKeyboardShortcut, ButtonGroup, AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogBody, AlertDialogDescription, Checkbox, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Slot, DataTableCell, DataTableRow, useDataTableApiRef, DataTable, DataTableContent, DataTablePagination, DataTableRowsPerPage, LocalizationProvider as LocalizationProvider$1, OptionsGroup, CheckboxGroup, DateInput, Stepper, StepContent, Step, StepList, NumericInput, Link, RadioGroup, Radio, TextArea, PortalContext } from "@ostack.tech/ui";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { AbsolutePathFragment, ValidationFailure, Path, PathMultimap, AbsolutePath, sliceTable, listableSize, nullableSchemaInnerSchema, compareSchemaPaths, PromiseCancellationException, arrayToTable, indexOfTableRowId, isComputedSchema } from "@ostack.tech/kform";
-import { AtPathError, useFormManager, CurrentPath, useResolvedPath, useIssuesTracker, equals, useForm, FormContext, useFormController, useFormattedValue, InvalidPathError, useCurrentPath, useFormContext, formatTemporalAsString, useTemporalInput, useFileInput, useController, useFormatter, useInput, useListableInput, useNumericInput, formatNumericAsString } from "@ostack.tech/kform-react";
-import * as React from "react";
-import { Suspense, createElement } from "react";
+import { createContext, useContext, useCallback, useEffect, forwardRef, useMemo, useDeferredValue, useRef, useState, useImperativeHandle, startTransition, Suspense, memo, createElement } from "react";
+import { AtPathError, useFormManager, CurrentPath, useResolvedPath, useIssuesTracker, equals, useFormController, useForm, FormContext, useFormattedValue, InvalidPathError, useCurrentPath, useFormContext, formatTemporalAsString, useTemporalInput, useFileInput, useController, useFormatter, useInput, useListableInput, useNumericInput, formatNumericAsString } from "@ostack.tech/kform-react";
 import { createStore, useStore } from "zustand";
+import { subscribeWithSelector } from "zustand/middleware";
 import { useShallow } from "zustand/react/shallow";
 import { shallow } from "zustand/shallow";
 import { supported, fileOpen, fileSave } from "browser-fs-access";
-import { subscribeWithSelector } from "zustand/middleware";
+import { enGB } from "./locales/en-GB.js";
+import { enUS } from "./locales/en-US.js";
+import { fr } from "./locales/fr.js";
+import { pt } from "./locales/pt.js";
 import { faChevronUp, faChevronDown, faTrash, faFileLines, faDownload, faCircleQuestion, faArrowsToDot, faAnglesLeft, faAngleLeft, faAngleRight, faAnglesRight, faCircleCheck, faCircleExclamation, faTriangleExclamation, faFolderOpen, faFloppyDisk, faCaretDown, faArrowRight, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { faCircleCheck as faCircleCheck$1 } from "@fortawesome/free-regular-svg-icons";
 import { addDays, min, max, parseISO, format } from "date-fns";
+import { faCircleCheck as faCircleCheck$1 } from "@fortawesome/free-regular-svg-icons";
 const DEFAULT_PREFIX_SUFFIX = "kform-";
-const PrefixSuffixContext = React.createContext(
-  DEFAULT_PREFIX_SUFFIX
-);
+const defaultPrefixSuffixStore = createStore(() => ({
+  defaultPrefixSuffix: DEFAULT_PREFIX_SUFFIX
+}));
+function setDefaultPrefixSuffix(defaultPrefixSuffix) {
+  defaultPrefixSuffixStore.setState({ defaultPrefixSuffix });
+}
+const PrefixSuffixContext = createContext(null);
 function PrefixSuffixProvider({
   prefixSuffix,
   children
@@ -24,187 +31,16 @@ function PrefixSuffixProvider({
 }
 function usePrefix() {
   const prefix = usePrefix$1();
-  const prefixSuffix = React.useContext(PrefixSuffixContext);
-  return React.useCallback(
-    (toPrefix) => prefix(`${prefixSuffix}${toPrefix}`),
+  const defaultPrefixSuffix = useStore(
+    defaultPrefixSuffixStore,
+    ({ defaultPrefixSuffix: defaultPrefixSuffix2 }) => defaultPrefixSuffix2
+  );
+  const prefixSuffix = useContext(PrefixSuffixContext) ?? defaultPrefixSuffix;
+  return useCallback(
+    (toPrefix = "") => prefix(`${prefixSuffix}${toPrefix}`),
     [prefix, prefixSuffix]
   );
 }
-const ptPT = {
-  uiLocale: ptPT$1,
-  languageTag: "pt-PT",
-  AnnexesManager: {
-    "aria-label": "Anexos do formulário",
-    menuButtonText: "Anexos",
-    addAnnexText: "Adicionar anexo",
-    removeAnnexButtonLabel: "Remover anexo",
-    removeAnnexKeyboardHint: "Pressione a tecla “Delete” para remover o anexo",
-    removeAnnexConfirmDialogTitle: "Remover anexo",
-    removeAnnexConfirmDialogMessage: (annexName) => /* @__PURE__ */ jsxs(Fragment, { children: [
-      "Tem a certeza que pretende remover o anexo ",
-      annexName,
-      "?"
-    ] }),
-    removeAnnexConfirmDialogOkText: "Remover"
-  },
-  DateRangeControl: {
-    issuesPanelStartLabelSuffix: " (data de início)",
-    issuesPanelEndLabelSuffix: " (data de fim)"
-  },
-  FileControl: {
-    viewFileButtonLabel: "Visualizar ficheiro",
-    downloadFileButtonLabel: "Descarregar ficheiro",
-    fallbackText: /* @__PURE__ */ jsxs(Fragment, { children: [
-      "O ficheiro selecionado não pode ser visualizado neste navegador.",
-      /* @__PURE__ */ jsx("br", {}),
-      "Por favor use o botão acima para descarregar o ficheiro. Pode depois abri-lo utilizando uma aplicação externa."
-    ] })
-  },
-  FormApp: {
-    issuesPanelLabel: "Formulário",
-    issueMessages: {
-      "/**": {
-        valueMissing: "Campo de preenchimento obrigatório.",
-        valueDisallowed: "Valor indicado não permitido.",
-        rangeUnderflow: "Valor inferior ao mínimo permitido.",
-        rangeOverflow: "Valor excede o máximo permitido.",
-        lengthMismatch: (_data, { typeInfo: { name, restrictions } }) => name === "String" && typeof restrictions.minLength === "number" && restrictions.minLength === restrictions.maxLength ? `Valor deve ter ${restrictions.minLength} ${restrictions.minLength === 1 ? "carácter" : "caracteres"}.` : "Valor tem comprimento inválido.",
-        tooShort: (_data, { typeInfo: { name, restrictions } }) => name === "String" && typeof restrictions.minLength === "number" ? `Valor não deve ter menos de ${restrictions.minLength} ${restrictions.minLength === 1 ? "caractér" : "caracteres"}.` : "Valor demasiado curto.",
-        tooLong: (_data, { typeInfo: { name, restrictions } }) => name === "String" && typeof restrictions.maxLength === "number" ? `Valor não deve ter mais de ${restrictions.maxLength} ${restrictions.maxLength === 1 ? "caractér" : "caracteres"}.` : "Valor demasiado longo.",
-        sizeMismatch: (_data, { typeInfo: { restrictions } }) => typeof restrictions.minSize === "number" && restrictions.minSize === restrictions.maxSize ? `Campo deve ter ${restrictions.minSize} ${restrictions.minSize === 1 ? "item" : "itens"}.` : "Campo tem número inválido de itens.",
-        tooSmall: (_data, { typeInfo: { restrictions } }) => typeof restrictions.minLength === "number" ? `Campo não deve ter menos de ${restrictions.minLength} ${restrictions.minLength === 1 ? "item" : "itens"}.` : "Número de itens do campo não é suficiente.",
-        tooLarge: (_data, { typeInfo: { restrictions } }) => typeof restrictions.maxLength === "number" ? `Campo não deve ter mais de ${restrictions.maxLength} ${restrictions.maxLength === 1 ? "item" : "itens"}.` : "Número de itens do campo excede o limite permitido.",
-        scaleMismatch: (_data, { typeInfo: { restrictions } }) => typeof restrictions.scale === "number" ? `Valor deve ter ${restrictions.scale} ${restrictions.scale === 1 ? "casa decimal" : "casas decimais"}.` : "Valor tem número inválido de casas decimais.",
-        patternMismatch: "Valor não segue o padrão permitido.",
-        emailPatternMismatch: "Endereço de correio eletrónico inválido.",
-        fileTypeMismatch: (_data, { typeInfo: { restrictions } }) => Array.isArray(restrictions.acceptedFileTypes) ? `Apenas os seguintes tipos de ficheiro são permitidos: ${restrictions.acceptedFileTypes.join(", ")}.` : "Tipo do ficheiro indicado não é permitido.",
-        itemsRepeated: ({ firstIndex, secondIndex }) => firstIndex != null && secondIndex != null ? `Itens ${+firstIndex + 1} e ${+secondIndex + 1} encontram-se repetidos.` : "Campo contém itens repetidos.",
-        computedValueMismatch: "O valor difere do valor calculado.",
-        validationFailed: (data) => process.env.NODE_ENV !== "production" ? data.exception : "Algo correu mal ao validar este campo. Por favor volte a tentar mais tarde."
-      }
-    },
-    confirmUnloadMessage: "Tem a certeza que pretende sair da página? Alterações que fez ao formulário podem não ter sido guardadas."
-  },
-  FormPagesNavigation: {
-    "aria-label": "Páginas do formulário"
-  },
-  FormPage: {
-    helperButtonLabel: "Mostrar ajuda"
-  },
-  IssueMessages: {
-    unknownErrorMessage: "Campo com erro desconhecido.",
-    unknownWarningMessage: "Campo com alerta desconhecido."
-  },
-  IssuesPanel: {
-    errorsLabel: (errors) => errors === void 0 ? "Erros" : /* @__PURE__ */ jsxs(Fragment, { children: [
-      errors,
-      " ",
-      errors === 1 ? "Erro" : "Erros"
-    ] }),
-    warningsLabel: (warnings) => warnings === void 0 ? "Alertas" : /* @__PURE__ */ jsxs(Fragment, { children: [
-      warnings,
-      " ",
-      warnings === 1 ? "Alerta" : "Alertas"
-    ] }),
-    focusButtonLabel: "Focar campo",
-    previousIssueButtonLabel: "Campo com problemas anterior",
-    nextIssueButtonLabel: "Próximo campo com problemas",
-    firstIssueButtonLabel: "Primeiro campo com problemas",
-    lastIssueButtonLabel: "Último campo com problemas",
-    paginationLabel: (currentPage, totalPages) => `Campo com problemas ${currentPage} de ${totalPages}.`,
-    noIssuesMessage: "Nenhum problema a reportar.",
-    resolvedTitle: "Resolvido",
-    resolvedMessage: "Problemas foram resolvidos. Por favor avance para o próximo campo com problemas."
-  },
-  IssuesPopover: {
-    label: "Mostrar problemas"
-  },
-  LoadAction: {
-    label: "Abrir",
-    keybinds: "$mod+O",
-    successMessage: (file) => `Ficheiro “${file.name}” carregado com sucesso.`,
-    errorMessage: (file) => file ? `Não foi possível carregar o ficheiro “${file.name}”. Por favor confirme que o ficheiro indicado é um ficheiro válido do formulário.` : "Não foi possível abrir o ficheiro indicado. Por favor confirme que tem as permissões devidas para efetuar a operação."
-  },
-  SaveAction: {
-    label: "Gravar",
-    keybinds: "$mod+S",
-    saveOptionsLabel: "Opções de gravação",
-    saveAsLabel: "Gravar como…",
-    saveAsKeybinds: "$mod+Shift+S",
-    successMessage: (fileHandle) => `Ficheiro “${fileHandle.name}” gravado com sucesso.`,
-    errorMessage: (fileHandle) => fileHandle ? `Não foi possível gravar o ficheiro “${fileHandle.name}”. Por favor confirme que tem as permissões devidas para efetuar a operação.` : "Não foi possível gravar o ficheiro indicado. Por favor confirme que tem as permissões devidas para efetuar a operação."
-  },
-  SubmitAction: {
-    label: "Entregar",
-    keybinds: "$mod+Enter",
-    dialogTitle: "Entregar declaração",
-    dialogDescription: "Por favor confirme que pretende continuar com a entrega da declaração.",
-    dialogCancelText: "Cancelar",
-    confirmWarningsCheckboxLabel: "Declaro que tomei conhecimento dos alertas gerados pelos dados desta declaração e que desejo continuar sem alterar os respetivos dados.",
-    successMessage: () => "Declaração entregue com sucesso.",
-    errorMessage: () => "Algo correu mal ao entregar a declaração. Por favor volte a tentar mais tarde."
-  },
-  TableControlAddRowTrigger: {
-    defaultButtonText: "Adicionar linha"
-  },
-  TableControlRemoveRowTrigger: {
-    defaultButtonLabel: "Remover linha",
-    confirmDialogTitle: "Remover linha",
-    confirmDialogMessage: (index) => /* @__PURE__ */ jsxs(Fragment, { children: [
-      "Tem a certeza que pretende remover a linha #",
-      index + 1,
-      "?"
-    ] }),
-    confirmDialogOkText: "Remover"
-  },
-  ValidateAction: {
-    label: "Validar",
-    keybinds: "F7"
-  }
-};
-const defaultLocale = ptPT;
-const LocalizationContext = React.createContext(defaultLocale);
-function LocalizationProvider({
-  locale,
-  children
-}) {
-  return locale === void 0 ? children : /* @__PURE__ */ jsx(LocalizationContext.Provider, { value: locale, children });
-}
-function useLocale() {
-  return React.useContext(LocalizationContext);
-}
-function comparePathsBySpecificity(path1, path2) {
-  const [ids1, wildcards1, recursiveWildcards1] = pathSpecificity(path1);
-  const [ids2, wildcards2, recursiveWildcards2] = pathSpecificity(path2);
-  if (recursiveWildcards1 === 0 && recursiveWildcards2 === 0) {
-    return wildcards2 - wildcards1;
-  }
-  if (recursiveWildcards1 === 0 || recursiveWildcards2 === 0) {
-    return recursiveWildcards2 - recursiveWildcards1;
-  }
-  return ids1 - ids2 || wildcards1 - wildcards2;
-}
-function pathSpecificity(path) {
-  const specificity = [0, 0, 0];
-  for (const fragment of path.fragments) {
-    if (fragment instanceof AbsolutePathFragment.Id) {
-      ++specificity[0];
-    } else if (fragment === AbsolutePathFragment.Wildcard) {
-      ++specificity[1];
-    } else if (fragment === AbsolutePathFragment.RecursiveWildcard) {
-      ++specificity[2];
-    }
-  }
-  return specificity;
-}
-const INITIAL = Symbol();
-function useEqualityFn(selector, equalityFn = Object.is) {
-  const latest = React.useRef(INITIAL);
-  return (state) => {
-    const next = selector(state);
-    return latest.current !== INITIAL && equalityFn(latest.current, next) ? latest.current : latest.current = next;
-  };
-}
 class ValidationFailureError extends AtPathError {
   constructor(path, issue) {
     super(path, `Failed to run validation '${issue.validation}'`);
@@ -215,7 +51,7 @@ Caused by: ${issue.stackTrace}`;
 }
 function useReportValidationFailures(info) {
   const reportError = useErrorReporter();
-  React.useEffect(() => {
+  useEffect(() => {
     if (info) {
       for (const { path, issues } of info) {
         for (const issue of issues) {
@@ -227,7 +63,7 @@ function useReportValidationFailures(info) {
     }
   }, [info, reportError]);
 }
-const ControlFieldContext = React.createContext(null);
+const ControlFieldContext = createContext(null);
 function useCreateControlFieldContext() {
   return useConstant(
     () => createStore(() => ({
@@ -236,7 +72,7 @@ function useCreateControlFieldContext() {
   );
 }
 function useControlFieldContext() {
-  return React.useContext(ControlFieldContext);
+  return useContext(ControlFieldContext);
 }
 function useControlFieldStore(selector) {
   return useStore(useControlFieldContext() ?? EMPTY_STORE, selector);
@@ -252,7 +88,7 @@ function useRegisterControllerWithinControlField(controller, deferredIssuesToDis
   const exists = controller.useState(
     (state) => state.initialized && state.exists
   );
-  React.useEffect(() => {
+  useEffect(() => {
     if (store) {
       const pathStr = path.toString();
       store.setState((state) => ({
@@ -277,7 +113,7 @@ function useRegisterControllerWithinControlField(controller, deferredIssuesToDis
     }
   }, [deferredIssuesToDisplay, exists, formManager, path, schema, store]);
 }
-const ControlField = React.forwardRef(function ControlField2({
+const ControlField = forwardRef(function ControlField2({
   path = Path.CURRENT,
   shown = true,
   resetOnHide = true,
@@ -288,7 +124,7 @@ const ControlField = React.forwardRef(function ControlField2({
   const formManager = useFormManager();
   const store = useCreateControlFieldContext();
   const controlStates = useStore(store, (state) => state.controlStates);
-  React.useEffect(() => {
+  useEffect(() => {
     if (!shown) {
       for (const controlState of Object.values(controlStates)) {
         const { formManager: formManager2, path: path2, exists } = controlState;
@@ -325,7 +161,7 @@ function IssueMessage({
   unknownWarningMessage,
   issueCodeProps
 }) {
-  const locale = useLocale();
+  const [locale] = useLocale();
   unknownErrorMessage ??= locale.IssueMessages.unknownErrorMessage;
   unknownWarningMessage ??= locale.IssueMessages.unknownWarningMessage;
   let message = useRegisteredIssueMessage(path, issue.code);
@@ -344,7 +180,7 @@ function IssueMessage({
     ] })
   ] });
 }
-const IssueMessages = React.forwardRef(function IssueMessages2({
+const IssueMessages = forwardRef(function IssueMessages2({
   path,
   issues,
   messages,
@@ -361,17 +197,17 @@ const IssueMessages = React.forwardRef(function IssueMessages2({
   const { info } = useIssuesTracker(absolutePath, {
     enabled: !issues && !isInControlField
   });
-  const messagesToRegister = React.useMemo(
+  const messagesToRegister = useMemo(
     () => messages && { [absolutePath.toString()]: messages },
     [absolutePath, messages]
   );
   const relevantControlState = useControlFieldStore(
     (state) => isInControlField ? state.controlStates?.[absolutePath.toString()] : null
   );
-  const deferredTrackedIssues = React.useDeferredValue(
-    React.useMemo(() => info?.flatMap((info2) => info2.issues) ?? [], [info])
+  const deferredTrackedIssues = useDeferredValue(
+    useMemo(() => info?.flatMap((info2) => info2.issues) ?? [], [info])
   );
-  const deferredIssuesToDisplay = React.useMemo(
+  const deferredIssuesToDisplay = useMemo(
     () => issues ?? (isInControlField ? relevantControlState?.deferredIssuesToDisplay ?? [] : deferredTrackedIssues),
     [
       deferredTrackedIssues,
@@ -381,16 +217,16 @@ const IssueMessages = React.forwardRef(function IssueMessages2({
     ]
   );
   useReportValidationFailures(
-    React.useMemo(
+    useMemo(
       () => [{ path: absolutePath, issues: deferredIssuesToDisplay }],
       [absolutePath, deferredIssuesToDisplay]
     )
   );
-  const schema = React.useMemo(
+  const schema = useMemo(
     () => relevantControlState?.schema ?? formManager.schema(absolutePath),
     [absolutePath, formManager, relevantControlState?.schema]
   );
-  const feedbackNodes = React.useMemo(
+  const feedbackNodes = useMemo(
     () => deferredIssuesToDisplay.map((issue, i) => /* @__PURE__ */ jsx(Feedback, { type: issue.severity, children: /* @__PURE__ */ jsx(
       IssueMessage,
       {
@@ -415,9 +251,39 @@ const IssueMessages = React.forwardRef(function IssueMessages2({
   );
   return /* @__PURE__ */ jsx(FormAppIssueMessages, { issueMessages: messagesToRegister, children: unwrapped ? feedbackNodes : /* @__PURE__ */ jsx(FeedbackList, { ...otherProps, ref: forwardedRef, children: feedbackNodes }) });
 });
-const FormAppContext = React.createContext(
-  null
-);
+function comparePathsBySpecificity(path1, path2) {
+  const [ids1, wildcards1, recursiveWildcards1] = pathSpecificity(path1);
+  const [ids2, wildcards2, recursiveWildcards2] = pathSpecificity(path2);
+  if (recursiveWildcards1 === 0 && recursiveWildcards2 === 0) {
+    return wildcards2 - wildcards1;
+  }
+  if (recursiveWildcards1 === 0 || recursiveWildcards2 === 0) {
+    return recursiveWildcards2 - recursiveWildcards1;
+  }
+  return ids1 - ids2 || wildcards1 - wildcards2;
+}
+function pathSpecificity(path) {
+  const specificity = [0, 0, 0];
+  for (const fragment of path.fragments) {
+    if (fragment instanceof AbsolutePathFragment.Id) {
+      ++specificity[0];
+    } else if (fragment === AbsolutePathFragment.Wildcard) {
+      ++specificity[1];
+    } else if (fragment === AbsolutePathFragment.RecursiveWildcard) {
+      ++specificity[2];
+    }
+  }
+  return specificity;
+}
+const INITIAL = Symbol();
+function useEqualityFn(selector, equalityFn = Object.is) {
+  const latest = useRef(INITIAL);
+  return (state) => {
+    const next = selector(state);
+    return latest.current !== INITIAL && equalityFn(latest.current, next) ? latest.current : latest.current = next;
+  };
+}
+const FormAppContext = createContext(null);
 function useCreateFormAppContext({
   controller,
   disabled,
@@ -620,10 +486,10 @@ function useCreateFormAppContext({
       }))
     )
   );
-  React.useEffect(() => {
+  useEffect(() => {
     store.setState({ controller });
   }, [controller, store]);
-  return React.useMemo(
+  return useMemo(
     () => ({
       disabled,
       readOnly,
@@ -643,7 +509,7 @@ function useCreateFormAppContext({
   );
 }
 function useFormAppContext() {
-  const formAppContext = React.useContext(FormAppContext);
+  const formAppContext = useContext(FormAppContext);
   if (!formAppContext) {
     throw new Error("Form app context not in scope.");
   }
@@ -666,21 +532,21 @@ function useFormAppElement() {
 }
 function useSetTopBarHeight() {
   const { store } = useFormAppContext();
-  return React.useCallback(
+  return useCallback(
     (height) => store.setState({ topBarHeight: height ?? 0 }),
     [store]
   );
 }
 function useSetLeftSidebarWidth() {
   const { store } = useFormAppContext();
-  return React.useCallback(
+  return useCallback(
     (width) => store.setState({ leftSidebarWidth: width ?? 0 }),
     [store]
   );
 }
 function useSetBottomPanelHeight() {
   const { store } = useFormAppContext();
-  return React.useCallback(
+  return useCallback(
     (height) => store.setState({ bottomPanelHeight: height ?? 0 }),
     [store]
   );
@@ -706,7 +572,7 @@ function useResetFocus() {
 function useRegisterController(controller) {
   const store = useFormAppContext().store;
   const path = controller.usePath();
-  React.useEffect(
+  useEffect(
     () => store.getState().actions.registerController(path, controller),
     [store, controller, path]
   );
@@ -728,7 +594,7 @@ function useSetActivePath() {
 }
 function useRegisterIssueMessages(path, issueMessages, priority) {
   const store = useFormAppContext().store;
-  React.useEffect(() => {
+  useEffect(() => {
     if (path != null) {
       return store.getState().actions.registerIssueMessages(path, issueMessages, priority);
     }
@@ -742,7 +608,7 @@ function useRegisteredIssueMessage(path, code) {
 }
 function useRegisterLabel(path, label, priority = 0) {
   const store = useFormAppContext().store;
-  React.useEffect(() => {
+  useEffect(() => {
     if (path != null) {
       return store.getState().actions.registerLabel(path, label, priority);
     }
@@ -774,7 +640,7 @@ function useStartIssuesNavigation() {
 }
 function useOnPathFocus(cb, { fireImmediately = true } = {}) {
   const { store } = useFormAppContext();
-  React.useEffect(
+  useEffect(
     () => store.subscribe(
       ({ focusedPath, focusCounter }) => ({ focusedPath, focusCounter }),
       ({ focusedPath }) => focusedPath && cb(focusedPath),
@@ -785,21 +651,21 @@ function useOnPathFocus(cb, { fireImmediately = true } = {}) {
 }
 function useSetStartIssuesNavigation(fn) {
   const { store } = useFormAppContext();
-  React.useEffect(() => {
+  useEffect(() => {
     store.setState({ startIssuesNavigation: fn });
     return () => store.setState({ startIssuesNavigation: void 0 });
   }, [fn, store]);
 }
 const FOCUSABLE_ELEMENTS = ["INPUT", "SELECT", "TEXTAREA"];
 function useControlAutofocus({ usePath, useExists }, enabled = true) {
-  const controlRef = React.useRef(null);
+  const controlRef = useRef(null);
   const path = usePath();
   const exists = useExists();
   const resetFocus = useResetFocus();
   const scrollIntoView = useScrollIntoView();
-  const timeoutId = React.useRef(void 0);
+  const timeoutId = useRef(void 0);
   useOnPathFocus(
-    React.useCallback(
+    useCallback(
       (focusedPath) => {
         const control = controlRef.current;
         if (enabled && control && exists && path.equals(focusedPath)) {
@@ -837,7 +703,7 @@ function useScrollIntoView() {
   const prefix = usePrefix();
   const spacing = useSpacing();
   const { cssVar } = useCssVars({ prefix });
-  return React.useCallback(
+  return useCallback(
     (el, options) => {
       const scrollableParent = getScrollableParent(el);
       const scrollMarginBlockStart = el.style.scrollMarginBlockStart;
@@ -872,6 +738,96 @@ function getScrollableParent(el) {
   }
   return document.scrollingElement ?? document.documentElement;
 }
+function FormAppAutoFocus() {
+  const initialized = useFormController().useInitialized();
+  const formAppEl = useFormAppElement();
+  const scrollIntoView = useScrollIntoView();
+  const issuesDisplayMode = useIssuesDisplayMode();
+  const resetFocus = useResetFocus();
+  useOnPathFocus(
+    useCallback(
+      (focusedPath) => {
+        if (initialized && focusedPath.isRoot) {
+          if (issuesDisplayMode === "panel") {
+            scrollIntoView(formAppEl);
+            visiblyFocus(formAppEl);
+          }
+          resetFocus();
+        }
+      },
+      [initialized, issuesDisplayMode, resetFocus, scrollIntoView, formAppEl]
+    )
+  );
+  return null;
+}
+const FormAppElement = forwardRef(function FormAppElement2({
+  formAppElement,
+  setFormAppElement,
+  minHeight,
+  className,
+  style,
+  children,
+  ...otherProps
+}, forwardedRef) {
+  const prefix = usePrefix();
+  const { cssVarName } = useCssVars({ prefix });
+  const { responsiveValueToCssVarsAndDataAttrs } = useResponsiveValues({
+    prefix
+  });
+  const { store } = useFormAppContext();
+  useEffect(
+    () => store.subscribe(
+      (state) => state.topBarHeight,
+      (height) => formAppElement?.style.setProperty(
+        cssVarName("top-bar-height"),
+        `${height}px`
+      ),
+      { fireImmediately: true }
+    ),
+    [cssVarName, formAppElement, store]
+  );
+  useEffect(
+    () => store.subscribe(
+      (state) => state.leftSidebarWidth,
+      (width) => formAppElement?.style.setProperty(
+        cssVarName("left-sidebar-width"),
+        `${width}px`
+      ),
+      { fireImmediately: true }
+    ),
+    [cssVarName, formAppElement, store]
+  );
+  useEffect(
+    () => store.subscribe(
+      (state) => state.bottomPanelHeight,
+      (height) => formAppElement?.style.setProperty(
+        cssVarName("bottom-panel-height"),
+        `${height}px`
+      ),
+      { fireImmediately: true }
+    ),
+    [cssVarName, formAppElement, store]
+  );
+  const { cssVars, dataAttrs } = responsiveValueToCssVarsAndDataAttrs(
+    "form-app",
+    "min-height",
+    minHeight,
+    (v) => typeof v === "number" ? `${v}px` : v
+  );
+  const combinedFormAppRef = useCombinedRef(setFormAppElement, forwardedRef);
+  return /* @__PURE__ */ jsx(
+    "form",
+    {
+      className: cx(prefix("form-app"), className),
+      style: { ...cssVars, ...style },
+      tabIndex: 0,
+      ...dataAttrs,
+      ...otherProps,
+      ref: combinedFormAppRef,
+      children
+    }
+  );
+});
 function FormAppIssueMessages({
   path,
   issueMessages,
@@ -882,7 +838,7 @@ function FormAppIssueMessages({
   useRegisterIssueMessages(absolutePath, issueMessages, priority);
   return children;
 }
-const FormApp = React.forwardRef(function FormApp2({
+const FormApp = forwardRef(function FormApp2({
   enableErrorReporting,
   reportError,
   errorReportingUrl,
@@ -912,7 +868,9 @@ const FormApp = React.forwardRef(function FormApp2({
   readOnly = false,
   prefix: newPrefix,
   prefixSuffix,
-  locale: newLocale,
+  defaultLocale,
+  locale: controlledLocale,
+  onLocaleChange,
   issueMessages,
   issuesDisplayMode = "inline",
   displayIssueCodes = false,
@@ -940,9 +898,6 @@ const FormApp = React.forwardRef(function FormApp2({
   onDisplayStatusChange,
   onDirtyStatusChange,
   onTouchedStatusChange,
-  className,
-  style,
-  children,
   ...otherProps
 }, forwardedRef) {
   const isInRoot = useIsInRoot();
@@ -975,20 +930,13 @@ const FormApp = React.forwardRef(function FormApp2({
       `FormApp: Properties ${Object.keys(rootProps).map((prop) => `\`${prop}\``).join(", ")} have no effect when the \`FormApp\` is already inside an ostack/UI's \`Root\` component. Please set any of these properties on the \`Root\` component directly instead.`
     );
   }
-  const contextPrefix = usePrefix$1();
-  const prefix = React.useCallback(
-    (toPrefix) => {
-      const uiPrefix = newPrefix !== void 0 && !isInRoot ? (toPrefix2) => `${newPrefix}${toPrefix2}` : contextPrefix;
-      return uiPrefix(`${prefixSuffix ?? DEFAULT_PREFIX_SUFFIX}${toPrefix}`);
-    },
-    [newPrefix, contextPrefix, isInRoot, prefixSuffix]
-  );
-  const { cssVarName } = useCssVars({ prefix });
-  const { responsiveValueToCssVarsAndDataAttrs } = useResponsiveValues({
-    prefix
-  });
-  const contextLocale = useLocale();
-  const locale = newLocale ?? contextLocale;
+  const contextLocale = useContext(LocalizationContext)?.locale;
+  const locale = controlledLocale ?? defaultLocale ?? contextLocale;
+  if (locale == null) {
+    throw new Error(
+      "FormApp: No locale has been provided. Either provide a `defaultLocale`/`locale` property or wrap the component in a `LocalizationProvider`."
+    );
+  }
   issuesPanelLabel ??= locale.FormApp.issuesPanelLabel;
   confirmUnloadMessage ??= locale.FormApp.confirmUnloadMessage;
   const controller = useForm(schema, {
@@ -1016,11 +964,11 @@ const FormApp = React.forwardRef(function FormApp2({
     onTouchedStatusChange
   });
   const { formProps } = controller;
-  const [formAppEl, setFormAppEl] = React.useState(
+  const [formAppElement, setFormAppElement] = useState(
     null
   );
   const formManager = controller.useFormManager();
-  const formContext = React.useMemo(
+  const formContext = useMemo(
     () => ({
       formManager,
       currentPath: AbsolutePath.ROOT,
@@ -1036,15 +984,15 @@ const FormApp = React.forwardRef(function FormApp2({
     displayIssueCodes,
     controller,
     onPathFocus,
-    formAppElement: formAppEl
+    formAppElement
   });
   const { store } = formAppContextValue;
-  React.useEffect(
+  useEffect(
     () => store.getState().actions.registerController(AbsolutePath.ROOT, controller),
     [controller, store]
   );
   const absolutePath = controller.usePath();
-  React.useEffect(
+  useEffect(
     () => store.getState().actions.registerLabel(absolutePath, issuesPanelLabel),
     [absolutePath, issuesPanelLabel, store]
   );
@@ -1052,7 +1000,7 @@ const FormApp = React.forwardRef(function FormApp2({
     store,
     (state) => state.actions
   );
-  React.useImperativeHandle(
+  useImperativeHandle(
     apiRef,
     () => ({
       ...controller,
@@ -1061,93 +1009,37 @@ const FormApp = React.forwardRef(function FormApp2({
     }),
     [focus, controller, startIssuesNavigation]
   );
-  React.useEffect(
-    () => store.subscribe(
-      (state) => state.topBarHeight,
-      (height) => formAppEl?.style.setProperty(
-        cssVarName("top-bar-height"),
-        `${height}px`
-      ),
-      { fireImmediately: true }
-    ),
-    [cssVarName, formAppEl, store]
-  );
-  React.useEffect(
-    () => store.subscribe(
-      (state) => state.leftSidebarWidth,
-      (width) => formAppEl?.style.setProperty(
-        cssVarName("left-sidebar-width"),
-        `${width}px`
-      ),
-      { fireImmediately: true }
-    ),
-    [cssVarName, formAppEl, store]
-  );
-  React.useEffect(
-    () => store.subscribe(
-      (state) => state.bottomPanelHeight,
-      (height) => formAppEl?.style.setProperty(
-        cssVarName("bottom-panel-height"),
-        `${height}px`
-      ),
-      { fireImmediately: true }
-    ),
-    [cssVarName, formAppEl, store]
-  );
-  const { cssVars, dataAttrs } = responsiveValueToCssVarsAndDataAttrs(
-    "form-app",
-    "min-height",
-    minHeight,
-    (v) => typeof v === "number" ? `${v}px` : v
-  );
-  const combinedFormAppRef = useCombinedRef(setFormAppEl, forwardedRef);
-  const formApp = /* @__PURE__ */ jsx(
-    "form",
+  const formAppEl = /* @__PURE__ */ jsx(
+    FormAppElement,
     {
-      className: cx(prefix("form-app"), className),
-      style: { ...cssVars, ...style },
-      tabIndex: 0,
-      ...dataAttrs,
+      minHeight,
+      formAppElement,
+      setFormAppElement,
       ...formProps,
       ...otherProps,
-      ref: combinedFormAppRef,
-      children: /* @__PURE__ */ jsx(PrefixProvider, { prefix: newPrefix, children: /* @__PURE__ */ jsx(PrefixSuffixProvider, { prefixSuffix, children: /* @__PURE__ */ jsx(LocalizationProvider$1, { locale: locale.uiLocale, children: /* @__PURE__ */ jsx(LocalizationProvider, { locale, children: /* @__PURE__ */ jsx(FormContext.Provider, { value: formContext, children: /* @__PURE__ */ jsx(FormAppContext.Provider, { value: formAppContextValue, children: /* @__PURE__ */ jsx(
+      ref: forwardedRef
+    }
+  );
+  return /* @__PURE__ */ jsx(PrefixProvider, { prefix: newPrefix, children: /* @__PURE__ */ jsx(PrefixSuffixProvider, { prefixSuffix, children: /* @__PURE__ */ jsx(
+    LocalizationProvider,
+    {
+      defaultLocale,
+      locale: controlledLocale,
+      onLocaleChange,
+      children: /* @__PURE__ */ jsx(FormContext.Provider, { value: formContext, children: /* @__PURE__ */ jsx(FormAppContext.Provider, { value: formAppContextValue, children: /* @__PURE__ */ jsx(
         FormAppIssueMessages,
         {
           issueMessages: locale.FormApp.issueMessages,
           priority: -1,
           children: /* @__PURE__ */ jsxs(FormAppIssueMessages, { issueMessages, children: [
             /* @__PURE__ */ jsx(FormAppAutoFocus, {}),
-            children
+            isInRoot ? formAppEl : /* @__PURE__ */ jsx(Root, { asChild: true, ...rootProps, children: formAppEl })
           ] })
         }
-      ) }) }) }) }) }) })
+      ) }) })
     }
-  );
-  return isInRoot ? formApp : /* @__PURE__ */ jsx(Root, { asChild: true, ...rootProps, prefix: newPrefix, locale: locale.uiLocale, children: formApp });
+  ) }) });
 });
-function FormAppAutoFocus() {
-  const initialized = useFormController().useInitialized();
-  const formAppEl = useFormAppElement();
-  const scrollIntoView = useScrollIntoView();
-  const issuesDisplayMode = useIssuesDisplayMode();
-  const resetFocus = useResetFocus();
-  useOnPathFocus(
-    React.useCallback(
-      (focusedPath) => {
-        if (initialized && focusedPath.isRoot) {
-          if (issuesDisplayMode === "panel") {
-            scrollIntoView(formAppEl);
-            visiblyFocus(formAppEl);
-          }
-          resetFocus();
-        }
-      },
-      [initialized, issuesDisplayMode, resetFocus, scrollIntoView, formAppEl]
-    )
-  );
-  return null;
-}
 function FormAppStatus({
   disabled = false,
   readOnly = false,
@@ -1157,7 +1049,7 @@ function FormAppStatus({
   return /* @__PURE__ */ jsx(
     FormAppContext.Provider,
     {
-      value: React.useMemo(
+      value: useMemo(
         () => ({
           ...formAppContext,
           disabled: formAppContext.disabled || disabled,
@@ -1203,12 +1095,12 @@ function useFormLoader({
   successMessage,
   errorMessage
 } = {}) {
-  const locale = useLocale();
+  const [locale] = useLocale();
   const formManager = useFormManager();
   const { _setState } = useFormController();
   const { addToast } = useToastManager();
   const startIssuesNavigation = useStartIssuesNavigation();
-  return React.useMemo(() => {
+  return useMemo(() => {
     async function load({
       decode: decode2,
       path: path2 = AbsolutePath.ROOT,
@@ -1316,84 +1208,92 @@ function useFormLoader({
 function useFormIsLoading() {
   return useFormController().useState((state) => state.loading);
 }
-const Annexes = React.forwardRef(function Annexes2({
-  path,
-  annexes,
-  defaultActiveAnnex,
-  activeAnnex,
-  onActiveAnnexChange,
-  onAnnexAdd,
-  onAnnexRemove,
-  variant = "annexes",
-  className,
-  ...otherProps
-}, forwardedRef) {
-  const prefix = usePrefix();
-  const formManager = useFormManager();
-  const absolutePath = useResolvedPath(path);
-  const resolvedAnnexes = React.useMemo(
-    () => annexes.map((annex) => ({
-      ...annex,
-      path: absolutePath.resolve(annex.path)
-    })),
-    [absolutePath, annexes]
-  );
-  if (!formManager.isValidPath(absolutePath)) {
-    throw new Error(`Invalid path: '${absolutePath.toString()}'`);
-  }
-  if (absolutePath.fragments.some(
-    (frag) => !(frag instanceof AbsolutePathFragment.Id)
-  )) {
-    throw new Error("Annexes base path must only contain ids.");
-  }
-  for (const annex of resolvedAnnexes) {
-    if (!formManager.isValidPath(annex.path)) {
-      throw new Error(`Invalid path: '${annex.path.toString()}'`);
-    }
-    if (annex.path.fragments.some(
-      (frag, i, { length }) => !(frag instanceof AbsolutePathFragment.Id) && (frag !== AbsolutePathFragment.Wildcard || i !== length - 1)
-    )) {
-      throw new Error(
-        "Annex path must either only contain ids, or ids followed by a single wildcard at the end."
-      );
-    }
-  }
-  const store = useCreateAnnexesContext({
-    formManager,
-    basePath: absolutePath,
-    resolvedAnnexes,
+const Annexes = forwardRef(
+  function Annexes2({
+    path,
+    annexes,
     defaultActiveAnnex,
     activeAnnex,
     onActiveAnnexChange,
     onAnnexAdd,
-    onAnnexRemove
-  });
-  const activeAnnexString = useStore(
-    store,
-    (state) => state.activeAnnex?.toString() ?? ""
-  );
-  const handleValueChange = React.useCallback(
-    (value) => store.getState().actions.setActiveAnnex(value),
-    [store]
-  );
-  return /* @__PURE__ */ jsx(CurrentPath, { path: absolutePath, children: /* @__PURE__ */ jsxs(AnnexesContext.Provider, { value: store, children: [
-    resolvedAnnexes.map(
-      (annex) => annex.path.lastFragment === AbsolutePathFragment.Wildcard ? /* @__PURE__ */ jsx(RepetitiveAnnexRegistrar, { ...annex }, annex.path.toString()) : /* @__PURE__ */ jsx(AnnexRegistrar, { ...annex }, annex.path.toString())
-    ),
-    /* @__PURE__ */ jsx(
-      Tabs,
-      {
-        className: cx(prefix("annexes"), className),
-        variant,
-        activationMode: "manual",
-        value: activeAnnexString,
-        onValueChange: handleValueChange,
-        ...otherProps,
-        ref: forwardedRef
+    onAnnexRemove,
+    variant = "annexes",
+    className,
+    ...otherProps
+  }, forwardedRef) {
+    const prefix = usePrefix();
+    const formManager = useFormManager();
+    const absolutePath = useResolvedPath(path);
+    const resolvedAnnexes = useMemo(
+      () => annexes.map((annex) => ({
+        ...annex,
+        path: absolutePath.resolve(annex.path)
+      })),
+      [absolutePath, annexes]
+    );
+    if (!formManager.isValidPath(absolutePath)) {
+      throw new Error(`Invalid path: '${absolutePath.toString()}'`);
+    }
+    if (absolutePath.fragments.some(
+      (frag) => !(frag instanceof AbsolutePathFragment.Id)
+    )) {
+      throw new Error("Annexes base path must only contain ids.");
+    }
+    for (const annex of resolvedAnnexes) {
+      if (!formManager.isValidPath(annex.path)) {
+        throw new Error(`Invalid path: '${annex.path.toString()}'`);
       }
-    )
-  ] }) });
-});
+      if (annex.path.fragments.some(
+        (frag, i, { length }) => !(frag instanceof AbsolutePathFragment.Id) && (frag !== AbsolutePathFragment.Wildcard || i !== length - 1)
+      )) {
+        throw new Error(
+          "Annex path must either only contain ids, or ids followed by a single wildcard at the end."
+        );
+      }
+    }
+    const store = useCreateAnnexesContext({
+      formManager,
+      basePath: absolutePath,
+      resolvedAnnexes,
+      defaultActiveAnnex,
+      activeAnnex,
+      onActiveAnnexChange,
+      onAnnexAdd,
+      onAnnexRemove
+    });
+    const activeAnnexString = useStore(
+      store,
+      (state) => state.activeAnnex?.toString() ?? ""
+    );
+    const handleValueChange = useCallback(
+      (value) => store.getState().actions.setActiveAnnex(value),
+      [store]
+    );
+    return /* @__PURE__ */ jsx(CurrentPath, { path: absolutePath, children: /* @__PURE__ */ jsxs(AnnexesContext.Provider, { value: store, children: [
+      resolvedAnnexes.map(
+        (annex) => annex.path.lastFragment === AbsolutePathFragment.Wildcard ? /* @__PURE__ */ jsx(
+          RepetitiveAnnexRegistrar,
+          {
+            ...annex
+          },
+          annex.path.toString()
+        ) : /* @__PURE__ */ jsx(AnnexRegistrar, { ...annex }, annex.path.toString())
+      ),
+      /* @__PURE__ */ jsx(
+        Tabs,
+        {
+          className: cx(prefix("annexes"), className),
+          variant,
+          activationMode: "manual",
+          value: activeAnnexString,
+          onValueChange: handleValueChange,
+          ...otherProps,
+          ref: forwardedRef
+        }
+      )
+    ] }) });
+  }
+);
 function AnnexRegistrar({
   path,
   title,
@@ -1410,7 +1310,7 @@ function AnnexRegistrar({
     path.append(AbsolutePathFragment.RecursiveWildcard),
     {
       enabled: !useFormIsLoading(),
-      format: React.useCallback((value) => value === null, [])
+      format: useCallback((value) => value === null, [])
     }
   );
   const isRepetitive = index != null;
@@ -1420,19 +1320,17 @@ function AnnexRegistrar({
     (state) => state.initialized && state.exists
   );
   const dirty = controller.useDirty();
-  const deferredValue = React.useDeferredValue(controller.useValue());
-  const deferredIssuesToDisplay = React.useDeferredValue(
+  const deferredValue = useDeferredValue(controller.useValue());
+  const deferredIssuesToDisplay = useDeferredValue(
     controller.useState((state) => state.touched ? state.issues : [], {
       equalityFn: shallow
     })
   );
-  const deferredDisplayStatus = React.useDeferredValue(
-    controller.useDisplayStatus()
-  );
+  const deferredDisplayStatus = useDeferredValue(controller.useDisplayStatus());
   const actualTitle = isRepetitive ? typeof itemTitle === "function" ? deferredValue === void 0 ? null : itemTitle(deferredValue, index) : itemTitle === void 0 ? title : itemTitle : typeof title === "function" ? deferredValue === void 0 ? null : title(deferredValue) : title;
   const actualSubtitle = typeof subtitle === "function" ? deferredValue === void 0 ? null : subtitle(deferredValue, index) : subtitle;
   const actualDocumentTitle = typeof documentTitle === "function" ? deferredValue === void 0 ? null : documentTitle(deferredValue, index) : documentTitle === void 0 ? (actualTitle === null || typeof actualTitle === "string") && (actualSubtitle == null || typeof actualSubtitle === "string") ? [actualTitle, actualSubtitle].filter((s) => s).join(" — ") : void 0 : documentTitle;
-  React.useEffect(() => {
+  useEffect(() => {
     if (exists) {
       const { registerAnnexState } = store.getState().actions;
       registerAnnexState(absolutePath, {
@@ -1487,28 +1385,26 @@ function RepetitiveAnnexRegistrar({
   const store = useAnnexesContext();
   const [rowIds, controller] = useFormattedValue(path.parent(), {
     enabled: !useFormIsLoading(),
-    format: React.useCallback(
+    format: useCallback(
       (value) => value == null ? [] : sliceTable(value).map(([id]) => id),
       []
     )
   });
   const schema = controller.useSchema();
   const absolutePath = controller.usePath();
-  const deferredIssuesToDisplay = React.useDeferredValue(
+  const deferredIssuesToDisplay = useDeferredValue(
     controller.useState((state) => state.touched ? state.issues : [], {
       equalityFn: shallow
     })
   );
-  const deferredDisplayStatus = React.useDeferredValue(
-    controller.useDisplayStatus()
-  );
+  const deferredDisplayStatus = useDeferredValue(controller.useDisplayStatus());
   if (schema.typeInfo.name !== "Table") {
     throw new InvalidPathError(
       absolutePath,
       `Unsupported schema: Expected (possibly nullable) table schema, but got schema representing values of type '${schema.typeInfo.toString()}'.`
     );
   }
-  React.useEffect(() => {
+  useEffect(() => {
     const { registerRepetitiveAnnexState } = store.getState().actions;
     registerRepetitiveAnnexState(absolutePath, {
       rowIds,
@@ -1547,9 +1443,7 @@ function RepetitiveAnnexRegistrar({
     rowId
   ));
 }
-const AnnexesContext = React.createContext(
-  null
-);
+const AnnexesContext = createContext(null);
 function useCreateAnnexesContext({
   formManager,
   basePath,
@@ -1707,7 +1601,7 @@ function useCreateAnnexesContext({
             const newActiveAnnex = path === null || path instanceof AbsolutePath ? path : new AbsolutePath(path);
             const oldActiveAnnex = get().activeAnnex;
             if (!oldActiveAnnex?.equals(newActiveAnnex)) {
-              React.startTransition(() => {
+              startTransition(() => {
                 set({ activeAnnex: newActiveAnnex });
                 if (newActiveAnnex != null) {
                   setActivePath(newActiveAnnex);
@@ -1785,7 +1679,7 @@ function useCreateAnnexesContext({
       }))
     )
   );
-  React.useEffect(() => {
+  useEffect(() => {
     store.getState().actions.setAnnexes(resolvedAnnexes);
     if (activeAnnex !== void 0) {
       const {
@@ -1802,7 +1696,7 @@ function useCreateAnnexesContext({
     }
   }, [resolvedAnnexes, activeAnnex, basePath, store]);
   useOnPathFocus(
-    React.useCallback(
+    useCallback(
       (focusedPath) => {
         const { activeAnnex: activeAnnex2, tabStates, waitingRegistration, actions } = store.getState();
         actions.setActiveAnnex(
@@ -1819,7 +1713,7 @@ function useCreateAnnexesContext({
   return store;
 }
 function useAnnexesContext() {
-  const annexesContext = React.useContext(AnnexesContext);
+  const annexesContext = useContext(AnnexesContext);
   if (!annexesContext) {
     throw new Error("Annexes context not in scope.");
   }
@@ -1831,59 +1725,63 @@ function useAnnexState(path, selector) {
     (state) => selector(state.actions.getAnnexState(path))
   );
 }
-const Annex = React.forwardRef(function Annex2({ path, ...otherProps }, forwardedRef) {
-  const annexPath = useResolvedPath(path);
-  const store = useAnnexesContext();
-  const activeAnnex = useStore(store, (state) => state.activeAnnex);
-  const tabStates = useStore(
-    store,
-    useShallow(
-      (state) => state.tabStates().filter((state2) => annexPath.contains(state2.path))
-    )
-  );
-  return tabStates.map((state) => {
-    const pathStr = state.path.toString();
-    return /* @__PURE__ */ jsx(CurrentPath, { path: state.path, children: /* @__PURE__ */ jsx(
-      AnnexTabContent,
+const Annex = forwardRef(
+  function Annex2({ path, ...otherProps }, forwardedRef) {
+    const annexPath = useResolvedPath(path);
+    const store = useAnnexesContext();
+    const activeAnnex = useStore(store, (state) => state.activeAnnex);
+    const tabStates = useStore(
+      store,
+      useShallow(
+        (state) => state.tabStates().filter((state2) => annexPath.contains(state2.path))
+      )
+    );
+    return tabStates.map((state) => {
+      const pathStr = state.path.toString();
+      return /* @__PURE__ */ jsx(CurrentPath, { path: state.path, children: /* @__PURE__ */ jsx(
+        AnnexTabContent,
+        {
+          ...otherProps,
+          ref: state.path.equals(activeAnnex) ? forwardedRef : void 0
+        }
+      ) }, pathStr);
+    });
+  }
+);
+const AnnexTabContent = forwardRef(
+  function AnnexTabContent2({
+    disabled = false,
+    readOnly = false,
+    issueMessages,
+    children,
+    className,
+    errorBoundaryProps,
+    ...otherProps
+  }, forwardedRef) {
+    const prefix = usePrefix();
+    const annexPath = useCurrentPath();
+    const documentTitle = useAnnexState(
+      annexPath,
+      (state) => state === null ? null : state.documentTitle
+    );
+    if (documentTitle === void 0) {
+      warnOnce(
+        `Annex: At '${annexPath.toString()}': \`documentTitle\` should be set manually since either \`title\` or \`subtitle\` is not a string.`
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      TabContent,
       {
+        className: cx(prefix("annexes__annex"), className),
+        value: annexPath.toString(),
         ...otherProps,
-        ref: state.path.equals(activeAnnex) ? forwardedRef : void 0
+        ref: forwardedRef,
+        children: /* @__PURE__ */ jsx(ErrorBoundary, { ...errorBoundaryProps, children: /* @__PURE__ */ jsx(DocumentTitle, { title: documentTitle ?? void 0, children: /* @__PURE__ */ jsx(FormAppStatus, { disabled, readOnly, children: /* @__PURE__ */ jsx(FormAppIssueMessages, { issueMessages, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Spinner, { size: "xl", color: "primary" }), children }) }) }) }) })
       }
-    ) }, pathStr);
-  });
-});
-const AnnexTabContent = React.forwardRef(function AnnexTabContent2({
-  disabled = false,
-  readOnly = false,
-  issueMessages,
-  children,
-  className,
-  errorBoundaryProps,
-  ...otherProps
-}, forwardedRef) {
-  const prefix = usePrefix();
-  const annexPath = useCurrentPath();
-  const documentTitle = useAnnexState(
-    annexPath,
-    (state) => state === null ? null : state.documentTitle
-  );
-  if (documentTitle === void 0) {
-    warnOnce(
-      `Annex: At '${annexPath.toString()}': \`documentTitle\` should be set manually since either \`title\` or \`subtitle\` is not a string.`
     );
   }
-  return /* @__PURE__ */ jsx(
-    TabContent,
-    {
-      className: cx(prefix("annexes__annex"), className),
-      value: annexPath.toString(),
-      ...otherProps,
-      ref: forwardedRef,
-      children: /* @__PURE__ */ jsx(ErrorBoundary, { ...errorBoundaryProps, children: /* @__PURE__ */ jsx(DocumentTitle, { title: documentTitle ?? void 0, children: /* @__PURE__ */ jsx(FormAppStatus, { disabled, readOnly, children: /* @__PURE__ */ jsx(FormAppIssueMessages, { issueMessages, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Spinner, { size: "xl", color: "primary" }), children }) }) }) }) })
-    }
-  );
-});
-const IssuesPopover = React.forwardRef(function IssuesPopover2({
+);
+const IssuesPopover = forwardRef(function IssuesPopover2({
   path,
   relevantPaths,
   defaultOpen,
@@ -1892,13 +1790,13 @@ const IssuesPopover = React.forwardRef(function IssuesPopover2({
   label,
   ...otherProps
 }, forwardedRef) {
-  const locale = useLocale();
+  const [locale] = useLocale();
   label ??= locale.IssuesPopover.label;
   const absolutePath = useResolvedPath(path);
   const [open, setOpen] = useControllableState(defaultOpen, controlledOpen);
   const isInControlField = useIsInControlField();
   useOnPathFocus(
-    React.useCallback(
+    useCallback(
       (focusedPath) => {
         if (!isInControlField && (relevantPaths ?? [absolutePath]).some(
           (path2) => focusedPath.equals(new AbsolutePath(path2))
@@ -1962,14 +1860,14 @@ function AnnexesMenu({
   const isLargeScreen = useMediaBreakpointUp("sm");
   const issuesDisplayMode = useIssuesDisplayMode();
   const [open, setOpen] = useControllableState(defaultOpen, controlledOpen);
-  const menuTriggerRef = React.useRef(null);
+  const menuTriggerRef = useRef(null);
   const activeAnnex = useStore(store, (state) => state.activeAnnex);
-  const handleRadioGroupValueChange = React.useCallback(
+  const handleRadioGroupValueChange = useCallback(
     (value) => store.getState().actions.setActiveAnnex(new AbsolutePath(value)),
     [store]
   );
   const annexes = useStore(store, (state) => state.annexes);
-  const newItems = React.useMemo(
+  const newItems = useMemo(
     () => annexes.map((annex) => /* @__PURE__ */ jsx(AnnexesMenuNewItem, { annex }, annex.path.toString())),
     [annexes]
   );
@@ -1979,7 +1877,7 @@ function AnnexesMenu({
   );
   const resetFocus = useResetFocus();
   useOnPathFocus(
-    React.useCallback(
+    useCallback(
       (focusedPath) => {
         if (issuesDisplayMode === "panel" && menuTriggerRef.current && store.getState().tablessStates().some((state) => state.path.equals(focusedPath))) {
           visiblyFocus(menuTriggerRef.current);
@@ -2216,8 +2114,8 @@ function AnnexesMenuNewItem({ annex }) {
     }
     return canBeAdded2;
   });
-  const [gettingValue, setGettingValue] = React.useState(false);
-  const handleItemSelect = React.useCallback(async () => {
+  const [gettingValue, setGettingValue] = useState(false);
+  const handleItemSelect = useCallback(async () => {
     const schema = formManager.schema(annex.path);
     const initialValue = schema.typeInfo.nullable ? nullableSchemaInnerSchema(schema).initialValue : schema.initialValue;
     let toAdd = initialValue;
@@ -2266,10 +2164,10 @@ function AnnexTab({ path }) {
   );
   const title = useAnnexState(path, (state) => state?.title);
   const subtitle = useAnnexState(path, (state) => state?.subtitle);
-  const tabRef = React.useRef(null);
+  const tabRef = useRef(null);
   const resetFocus = useResetFocus();
   useOnPathFocus(
-    React.useCallback(
+    useCallback(
       (focusedPath) => {
         if (tabRef.current && path.equals(focusedPath)) {
           if (issuesDisplayMode === "panel") {
@@ -2312,7 +2210,7 @@ function AnnexTab({ path }) {
     )
   ] });
 }
-const AnnexesTabList = React.forwardRef(function AnnexManager({ hideNonActiveOnSmallScreens, rootProps, className, ...otherProps }, forwardedRef) {
+const AnnexesTabList = forwardRef(function AnnexManager({ hideNonActiveOnSmallScreens, rootProps, className, ...otherProps }, forwardedRef) {
   const prefix = usePrefix();
   const store = useAnnexesContext();
   const activeAnnex = useStore(store, (state) => state.activeAnnex);
@@ -2337,7 +2235,7 @@ const AnnexesTabList = React.forwardRef(function AnnexManager({ hideNonActiveOnS
     }
   );
 });
-const AnnexesManager = React.forwardRef(function AnnexManager2({
+const AnnexesManager = forwardRef(function AnnexManager2({
   menuButtonText,
   addAnnexText,
   removeAnnexButtonLabel,
@@ -2357,7 +2255,7 @@ const AnnexesManager = React.forwardRef(function AnnexManager2({
   ...otherProps
 }, forwardedRef) {
   const prefix = usePrefix();
-  const locale = useLocale();
+  const [locale] = useLocale();
   ariaLabel ??= locale.AnnexesManager["aria-label"];
   menuButtonText ??= locale.AnnexesManager.menuButtonText;
   addAnnexText ??= locale.AnnexesManager.addAnnexText;
@@ -2375,11 +2273,11 @@ const AnnexesManager = React.forwardRef(function AnnexManager2({
       (state) => issuesDisplayMode === "inline" ? state.tablessStates() : []
     )
   );
-  const tablessPaths = React.useMemo(
+  const tablessPaths = useMemo(
     () => tablessStates.map((state) => state.path),
     [tablessStates]
   );
-  const deferredTablessIssuesToDisplay = React.useMemo(
+  const deferredTablessIssuesToDisplay = useMemo(
     () => tablessStates.map((state) => state.deferredIssuesToDisplay || []),
     [tablessStates]
   );
@@ -2529,18 +2427,18 @@ function useRegisterControl({
   preventAutoFocus,
   apiRef
 }) {
-  const { useState, usePath, useInitialized, useDisplayStatus } = controller;
+  const { useState: useState2, usePath, useInitialized, useDisplayStatus } = controller;
   const path = usePath();
   const formIsDisabled = useFormIsDisabled();
-  const displayDisabled = useState((state) => !state.initialized || !state.exists) || formIsDisabled;
+  const displayDisabled = useState2((state) => !state.initialized || !state.exists) || formIsDisabled;
   const displayReadOnly = useFormIsReadOnly();
-  const deferredIsValidating = React.useDeferredValue(
-    useState((state) => state.validationStatus === "validating")
+  const deferredIsValidating = useDeferredValue(
+    useState2((state) => state.validationStatus === "validating")
   );
   const displayLoading = !useInitialized() || deferredIsValidating;
-  const displayStatusToDisplay = React.useDeferredValue(useDisplayStatus());
-  const issuesToDisplay = React.useDeferredValue(
-    useState((state) => state.touched ? state.issues : [], {
+  const displayStatusToDisplay = useDeferredValue(useDisplayStatus());
+  const issuesToDisplay = useDeferredValue(
+    useState2((state) => state.touched ? state.issues : [], {
       equalityFn: shallow
     })
   );
@@ -2553,13 +2451,13 @@ function useRegisterControl({
   useRegisterFieldLabel(path, issuesPanelLabelSuffix);
   useRegisterControllerWithinControlField(controller, issuesToDisplay);
   useRegisterController(controller);
-  React.useImperativeHandle(apiRef, () => controller, [controller]);
+  useImperativeHandle(apiRef, () => controller, [controller]);
   const autofocusRef = useControlAutofocus(
     controller,
     !preventAutoFocus
   );
   const setActivePath = useSetActivePath();
-  const handleFocus = React.useCallback(
+  const handleFocus = useCallback(
     (event) => {
       if (event.target === event.currentTarget && !event.defaultPrevented) {
         setActivePath(controller.getState().path);
@@ -2567,7 +2465,7 @@ function useRegisterControl({
     },
     [controller, setActivePath]
   );
-  return React.useMemo(
+  return useMemo(
     () => ({
       displayLoading,
       displayDisabled,
@@ -2591,7 +2489,7 @@ function useRegisterControl({
 function useRegisterFieldLabel(path, issuesPanelLabelSuffix) {
   const { store: formAppStore } = useFormAppContext();
   useOnFieldLabelChange(
-    React.useCallback(
+    useCallback(
       (label) => formAppStore.getState().actions.registerLabel(
         path,
         label && issuesPanelLabelSuffix ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -2605,7 +2503,7 @@ function useRegisterFieldLabel(path, issuesPanelLabelSuffix) {
 }
 function useTemporalStringTransformer(dateTransformerOptions) {
   const { format: format$1, parse } = useDateTransformer(dateTransformerOptions);
-  return React.useMemo(
+  return useMemo(
     () => ({
       parse: (formattedDate, schema, options) => {
         const date = parse(formattedDate, options);
@@ -2627,7 +2525,7 @@ function useTemporalStringTransformer(dateTransformerOptions) {
     [format$1, parse]
   );
 }
-const DateRangeControl = React.forwardRef(function DateRangeControl2({
+const DateRangeControl = forwardRef(function DateRangeControl2({
   startPath,
   endPath,
   startIssueMessages,
@@ -2671,7 +2569,7 @@ const DateRangeControl = React.forwardRef(function DateRangeControl2({
   endAdornment,
   ...otherProps
 }, forwardedRef) {
-  const locale = useLocale();
+  const [locale] = useLocale();
   issuesPanelStartLabelSuffix ??= locale.DateRangeControl.issuesPanelStartLabelSuffix;
   issuesPanelEndLabelSuffix ??= locale.DateRangeControl.issuesPanelEndLabelSuffix;
   const { format: format2, parse } = useTemporalStringTransformer({
@@ -2679,15 +2577,15 @@ const DateRangeControl = React.forwardRef(function DateRangeControl2({
     shortFormat,
     fullFormat
   });
-  const [formattedValue, setFormattedValue] = React.useState({
+  const [formattedValue, setFormattedValue] = useState({
     start: "",
     end: ""
   });
-  const parseToString = React.useCallback(
+  const parseToString = useCallback(
     (formattedValue2, state) => parse(formattedValue2, state.schema),
     [parse]
   );
-  const formatFromString = React.useCallback(
+  const formatFromString = useCallback(
     (stringValue, state) => format2(stringValue, state.schema),
     [format2]
   );
@@ -2696,7 +2594,7 @@ const DateRangeControl = React.forwardRef(function DateRangeControl2({
     enabled: !formIsLoading,
     parseToString,
     formatFromString,
-    setFormattedValue: React.useCallback(
+    setFormattedValue: useCallback(
       (formattedValue2) => setFormattedValue(({ end }) => ({ start: formattedValue2, end })),
       []
     ),
@@ -2714,7 +2612,7 @@ const DateRangeControl = React.forwardRef(function DateRangeControl2({
       enabled: !formIsLoading,
       parseToString,
       formatFromString,
-      setFormattedValue: React.useCallback(
+      setFormattedValue: useCallback(
         (formattedValue2) => setFormattedValue(({ start }) => ({ start, end: formattedValue2 })),
         []
       ),
@@ -2767,7 +2665,7 @@ const DateRangeControl = React.forwardRef(function DateRangeControl2({
     preventAutoFocus,
     apiRef: endApiRef
   });
-  const handleValueChange = React.useCallback(
+  const handleValueChange = useCallback(
     ({ formattedValue: newFormattedValue }) => {
       setFormattedValue(newFormattedValue);
       if (newFormattedValue.start !== formattedValue.start) {
@@ -2856,7 +2754,7 @@ const DateRangeControl = React.forwardRef(function DateRangeControl2({
     inlineIssues
   ] });
 });
-const FileControl = React.forwardRef(function FileControl2({
+const FileControl = forwardRef(function FileControl2({
   path,
   issueMessages,
   issuesPanelLabel,
@@ -2891,28 +2789,31 @@ const FileControl = React.forwardRef(function FileControl2({
   ...otherProps
 }, forwardedRef) {
   const prefix = usePrefix();
-  const locale = useLocale();
+  const [locale] = useLocale();
   viewFileButtonLabel ??= locale.FileControl.viewFileButtonLabel;
   downloadFileButtonLabel ??= locale.FileControl.downloadFileButtonLabel;
   fallbackText ??= locale.FileControl.fallbackText;
-  const latestFileList = React.useRef(null);
-  const [file, setFile] = React.useState(null);
-  const controller = useFileInput(path, {
-    enabled: !useFormIsLoading(),
-    formManager,
-    formatFromFileList: React.useCallback((fileList) => {
-      setFile(fileList.length === 0 ? null : fileList[0]);
-      latestFileList.current = fileList;
-      return fileList;
-    }, []),
-    onInitialized,
-    onFormManagerEvent,
-    onValueChange,
-    onValidationStatusChange,
-    onDisplayStatusChange,
-    onDirtyStatusChange,
-    onTouchedStatusChange
-  });
+  const latestFileList = useRef(null);
+  const [file, setFile] = useState(null);
+  const controller = useFileInput(
+    path,
+    {
+      enabled: !useFormIsLoading(),
+      formManager,
+      formatFromFileList: useCallback((fileList) => {
+        setFile(fileList.length === 0 ? null : fileList[0]);
+        latestFileList.current = fileList;
+        return fileList;
+      }, []),
+      onInitialized,
+      onFormManagerEvent,
+      onValueChange,
+      onValidationStatusChange,
+      onDisplayStatusChange,
+      onDirtyStatusChange,
+      onTouchedStatusChange
+    }
+  );
   const { useSchema, usePath, inputProps } = controller;
   const { nullable, restrictions } = useSchema().typeInfo;
   const absolutePath = usePath();
@@ -2932,11 +2833,11 @@ const FileControl = React.forwardRef(function FileControl2({
     apiRef
   });
   showClearButton ??= nullable ? "auto" : false;
-  const isClearing = React.useRef(false);
-  const handleClearButtonClick = React.useCallback(() => {
+  const isClearing = useRef(false);
+  const handleClearButtonClick = useCallback(() => {
     isClearing.current = true;
   }, []);
-  const handleChange = React.useCallback(
+  const handleChange = useCallback(
     (evt) => {
       if (evt.target.files.length > 0 || isClearing.current) {
         isClearing.current = false;
@@ -2948,13 +2849,13 @@ const FileControl = React.forwardRef(function FileControl2({
     },
     [inputProps, onChange]
   );
-  const clearButtonRef = React.useRef(null);
-  const handleKeyDown = React.useCallback((evt) => {
+  const clearButtonRef = useRef(null);
+  const handleKeyDown = useCallback((evt) => {
     if (evt.code === "Delete" || evt.code === "Backspace") {
       clearButtonRef.current?.click();
     }
   }, []);
-  const dataURL = React.useMemo(
+  const dataURL = useMemo(
     () => fileInteraction !== "none" && file ? URL.createObjectURL(file) : null,
     [file, fileInteraction]
   );
@@ -3069,89 +2970,91 @@ const FileControl = React.forwardRef(function FileControl2({
     inlineIssues
   ] });
 });
-const FormPages = React.forwardRef(function FormPages2({
-  path,
-  pages,
-  defaultActivePage,
-  activePage,
-  onActivePageChange,
-  className,
-  ...otherProps
-}, forwardedRef) {
-  const prefix = usePrefix();
-  const { cssVarName } = useCssVars({ prefix });
-  const formManager = useFormManager();
-  const absolutePath = useResolvedPath(path);
-  const isLargeScreen = useMediaBreakpointUp("sm");
-  const resolvedPages = React.useMemo(
-    () => pages.map((page) => ({
-      ...page,
-      path: absolutePath.resolve(page.path ?? Path.CURRENT)
-    })),
-    [absolutePath, pages]
-  );
-  if (!formManager.isValidPath(absolutePath)) {
-    throw new Error(`Invalid path: '${absolutePath.toString()}'`);
-  }
-  if (absolutePath.fragments.some(
-    (frag) => !(frag instanceof AbsolutePathFragment.Id)
-  )) {
-    throw new Error("Form pages base path must only contain ids.");
-  }
-  for (const page of resolvedPages) {
-    if (!formManager.isValidPath(page.path)) {
-      throw new Error(`Invalid path: '${page.path.toString()}'`);
+const FormPages = forwardRef(
+  function FormPages2({
+    path,
+    pages,
+    defaultActivePage,
+    activePage,
+    onActivePageChange,
+    className,
+    ...otherProps
+  }, forwardedRef) {
+    const prefix = usePrefix();
+    const { cssVarName } = useCssVars({ prefix });
+    const formManager = useFormManager();
+    const absolutePath = useResolvedPath(path);
+    const isLargeScreen = useMediaBreakpointUp("sm");
+    const resolvedPages = useMemo(
+      () => pages.map((page) => ({
+        ...page,
+        path: absolutePath.resolve(page.path ?? Path.CURRENT)
+      })),
+      [absolutePath, pages]
+    );
+    if (!formManager.isValidPath(absolutePath)) {
+      throw new Error(`Invalid path: '${absolutePath.toString()}'`);
     }
-    if (page.path.fragments.some(
+    if (absolutePath.fragments.some(
       (frag) => !(frag instanceof AbsolutePathFragment.Id)
     )) {
-      throw new Error("Form page path must only contain ids.");
+      throw new Error("Form pages base path must only contain ids.");
     }
-  }
-  const store = useCreateFormPagesContext({
-    basePath: absolutePath,
-    resolvedPages,
-    defaultActivePage,
-    activePage,
-    onActivePageChange
-  });
-  const formPagesRef = React.useRef(null);
-  React.useEffect(
-    () => store.subscribe(
-      ({ activePage: activePage2, pageHeaderHeights: [pageHeaderHeights] }) => (activePage2 && pageHeaderHeights.get(activePage2.toString())) ?? 0,
-      (height) => formPagesRef.current?.style.setProperty(
-        cssVarName("form-pages-page-header-height"),
-        `${height}px`
+    for (const page of resolvedPages) {
+      if (!formManager.isValidPath(page.path)) {
+        throw new Error(`Invalid path: '${page.path.toString()}'`);
+      }
+      if (page.path.fragments.some(
+        (frag) => !(frag instanceof AbsolutePathFragment.Id)
+      )) {
+        throw new Error("Form page path must only contain ids.");
+      }
+    }
+    const store = useCreateFormPagesContext({
+      basePath: absolutePath,
+      resolvedPages,
+      defaultActivePage,
+      activePage,
+      onActivePageChange
+    });
+    const formPagesRef = useRef(null);
+    useEffect(
+      () => store.subscribe(
+        ({ activePage: activePage2, pageHeaderHeights: [pageHeaderHeights] }) => (activePage2 && pageHeaderHeights.get(activePage2.toString())) ?? 0,
+        (height) => formPagesRef.current?.style.setProperty(
+          cssVarName("form-pages-page-header-height"),
+          `${height}px`
+        ),
+        { fireImmediately: true }
       ),
-      { fireImmediately: true }
-    ),
-    [cssVarName, prefix, store]
-  );
-  React.useEffect(
-    () => store.subscribe(
-      (state) => state.navigationSelectHeight,
-      (height) => formPagesRef.current?.style.setProperty(
-        cssVarName("form-pages-navigation-select-height"),
-        `${height}px`
+      [cssVarName, prefix, store]
+    );
+    useEffect(
+      () => store.subscribe(
+        (state) => state.navigationSelectHeight,
+        (height) => formPagesRef.current?.style.setProperty(
+          cssVarName("form-pages-navigation-select-height"),
+          `${height}px`
+        ),
+        { fireImmediately: true }
       ),
-      { fireImmediately: true }
-    ),
-    [cssVarName, prefix, store]
-  );
-  const combinedFormPagesRef = useCombinedRef(formPagesRef, forwardedRef);
-  return /* @__PURE__ */ jsx(CurrentPath, { path: absolutePath, children: /* @__PURE__ */ jsxs(FormPagesContext.Provider, { value: store, children: [
-    resolvedPages.map((page) => /* @__PURE__ */ jsx(FormPageRegistrar, { ...page }, page.path.toString())),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cx(prefix("form-pages"), className),
-        "data-navigation-mode": isLargeScreen ? "sidebar" : "select",
-        ...otherProps,
-        ref: combinedFormPagesRef
-      }
-    )
-  ] }) });
-});
+      [cssVarName, prefix, store]
+    );
+    const combinedFormPagesRef = useCombinedRef(formPagesRef, forwardedRef);
+    return /* @__PURE__ */ jsx(CurrentPath, { path: absolutePath, children: /* @__PURE__ */ jsxs(FormPagesContext.Provider, { value: store, children: [
+      resolvedPages.map((page) => /* @__PURE__ */ jsx(FormPageRegistrar, { ...page }, page.path.toString())),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cx(prefix("form-pages"), className),
+          "data-navigation-mode": isLargeScreen ? "sidebar" : "select",
+          ...otherProps,
+          ref: combinedFormPagesRef
+        }
+      )
+    ] }) });
+  }
+);
 function FormPageRegistrar({
   path,
   title,
@@ -3168,18 +3071,16 @@ function FormPageRegistrar({
   const exists = controller.useState(
     (state) => state.initialized && state.exists
   );
-  const deferredValue = React.useDeferredValue(controller.useValue());
-  const deferredIssuesToDisplay = React.useDeferredValue(
+  const deferredValue = useDeferredValue(controller.useValue());
+  const deferredIssuesToDisplay = useDeferredValue(
     controller.useState((state) => state.touched ? state.issues : [], {
       equalityFn: shallow
     })
   );
-  const deferredDisplayStatus = React.useDeferredValue(
-    controller.useDisplayStatus()
-  );
+  const deferredDisplayStatus = useDeferredValue(controller.useDisplayStatus());
   const actualTitle = typeof title === "function" ? deferredValue === void 0 ? null : title(deferredValue) : title;
   const actualDocumentTitle = typeof documentTitle === "function" ? deferredValue === void 0 ? null : documentTitle(deferredValue) : documentTitle === void 0 ? actualTitle === null || typeof actualTitle === "string" ? actualTitle : void 0 : documentTitle;
-  React.useEffect(() => {
+  useEffect(() => {
     const { registerPageState } = store.getState().actions;
     registerPageState(absolutePath, {
       exists,
@@ -3208,7 +3109,9 @@ function FormPageRegistrar({
   );
   return null;
 }
-const FormPagesContext = React.createContext(null);
+const FormPagesContext = createContext(
+  null
+);
 function useCreateFormPagesContext({
   basePath,
   resolvedPages,
@@ -3247,7 +3150,7 @@ function useCreateFormPagesContext({
             const newActivePage = path === null || path instanceof AbsolutePath ? path : new AbsolutePath(path);
             const oldActivePage = get().activePage;
             if (!oldActivePage?.equals(newActivePage)) {
-              React.startTransition(() => {
+              startTransition(() => {
                 set({ activePage: newActivePage });
                 if (newActivePage != null) {
                   setActivePath(newActivePage);
@@ -3289,7 +3192,7 @@ function useCreateFormPagesContext({
       }))
     )
   );
-  React.useEffect(() => {
+  useEffect(() => {
     store.getState().actions.setPages(resolvedPages);
     if (activePage !== void 0) {
       const { pages, activePage: oldActivePage } = store.getState();
@@ -3303,7 +3206,7 @@ function useCreateFormPagesContext({
     }
   }, [resolvedPages, activePage, basePath, store]);
   useOnPathFocus(
-    React.useCallback(
+    useCallback(
       (focusedPath) => {
         const { pages, activePage: activePage2, actions } = store.getState();
         actions.setActivePage(
@@ -3320,7 +3223,7 @@ function useCreateFormPagesContext({
   return store;
 }
 function useFormPagesContext() {
-  const formPagesContext = React.useContext(FormPagesContext);
+  const formPagesContext = useContext(FormPagesContext);
   if (!formPagesContext) {
     throw new Error("Form pages context not in scope.");
   }
@@ -3332,7 +3235,7 @@ function useFormPageState(path, selector) {
     (state) => selector(state.actions.getPageState(path))
   );
 }
-const FormPageHeader = React.forwardRef(function FormPageHeader2({
+const FormPageHeader = forwardRef(function FormPageHeader2({
   helperText,
   helperButtonLabel,
   ownIssueMessages,
@@ -3464,111 +3367,119 @@ const FormPageHeader = React.forwardRef(function FormPageHeader2({
     }
   );
 });
-const FormPage = React.forwardRef(function FormPage2({
-  path,
-  disabled = false,
-  readOnly = false,
-  className,
-  helperText,
-  helperButtonLabel,
-  issueMessages,
-  ownIssueMessages,
-  headerProps,
-  codeProps,
-  titleProps,
-  headerPopoverContainerProps,
-  issuesPopoverProps,
-  issueMessagesProps,
-  contentProps,
-  containerProps,
-  errorBoundaryProps,
-  helperButtonProps,
-  helperPopoverProps,
-  helperPopoverContentProps,
-  children,
-  ...otherProps
-}, forwardedRef) {
-  const prefix = usePrefix();
-  const locale = useLocale();
-  helperButtonLabel ??= locale.FormPage.helperButtonLabel;
-  const store = useFormPagesContext();
-  const pagePath = useResolvedPath(path);
-  const activePage = useStore(store, (state) => state.activePage);
-  const shouldDisplay = useFormPageState(
-    pagePath,
-    (state) => state?.path.equals(activePage)
-  );
-  const documentTitle = useFormPageState(
-    pagePath,
-    (state) => state === null ? null : state.documentTitle
-  );
-  if (documentTitle === void 0) {
-    warnOnce(
-      `FormPage: At '${pagePath.toString()}': \`documentTitle\` should be set manually since the form page's \`title\` is not a string.`
+const FormPage = forwardRef(
+  function FormPage2({
+    path,
+    disabled = false,
+    readOnly = false,
+    className,
+    helperText,
+    helperButtonLabel,
+    issueMessages,
+    ownIssueMessages,
+    headerProps,
+    codeProps,
+    titleProps,
+    headerPopoverContainerProps,
+    issuesPopoverProps,
+    issueMessagesProps,
+    contentProps,
+    containerProps,
+    errorBoundaryProps,
+    helperButtonProps,
+    helperPopoverProps,
+    helperPopoverContentProps,
+    children,
+    ...otherProps
+  }, forwardedRef) {
+    const prefix = usePrefix();
+    const [locale] = useLocale();
+    helperButtonLabel ??= locale.FormPage.helperButtonLabel;
+    const store = useFormPagesContext();
+    const pagePath = useResolvedPath(path);
+    const activePage = useStore(store, (state) => state.activePage);
+    const shouldDisplay = useFormPageState(
+      pagePath,
+      (state) => state?.path.equals(activePage)
     );
-  }
-  const [headerEl, setHeaderEl] = React.useState(null);
-  useMeasure(
-    headerEl,
-    React.useCallback(
-      (measurement) => {
-        store.getState().actions.setPageHeaderHeight(pagePath, measurement?.height ?? null);
-      },
-      [pagePath, store]
-    )
-  );
-  const formAppEl = useFormAppElement();
-  const isFirstDisplay = React.useRef(true);
-  React.useEffect(() => {
-    if (shouldDisplay && isFirstDisplay.current) {
-      formAppEl.scrollIntoView(true);
-      isFirstDisplay.current = false;
-      return () => {
-        isFirstDisplay.current = true;
-      };
+    const documentTitle = useFormPageState(
+      pagePath,
+      (state) => state === null ? null : state.documentTitle
+    );
+    if (documentTitle === void 0) {
+      warnOnce(
+        `FormPage: At '${pagePath.toString()}': \`documentTitle\` should be set manually since the form page's \`title\` is not a string.`
+      );
     }
-  }, [formAppEl, shouldDisplay]);
-  const combinedHeaderRef = useCombinedRef(setHeaderEl, headerProps?.ref);
-  return shouldDisplay ? /* @__PURE__ */ jsx(CurrentPath, { path: pagePath, children: /* @__PURE__ */ jsx(DocumentTitle, { title: documentTitle ?? void 0, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cx(prefix("form-pages__page"), className),
-      ...otherProps,
-      ref: forwardedRef,
-      children: /* @__PURE__ */ jsx(FormAppStatus, { disabled, readOnly, children: /* @__PURE__ */ jsxs(FormAppIssueMessages, { issueMessages, children: [
-        /* @__PURE__ */ jsx(
-          FormPageHeader,
-          {
-            helperText,
-            helperButtonLabel,
-            ownIssueMessages,
-            codeProps,
-            titleProps,
-            headerPopoverContainerProps,
-            issuesPopoverProps,
-            issueMessagesProps,
-            helperButtonProps,
-            helperPopoverProps,
-            helperPopoverContentProps,
-            ...headerProps,
-            ref: combinedHeaderRef
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ...contentProps,
-            className: cx(
-              prefix("form-pages__page-content"),
-              contentProps?.className
-            ),
-            children: /* @__PURE__ */ jsx(Container, { fluid: "md", gutter: 0, ...containerProps, children: /* @__PURE__ */ jsx(ErrorBoundary, { ...errorBoundaryProps, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Spinner, { size: "xl", color: "primary" }), children }) }) })
-          }
-        )
-      ] }) })
-    }
-  ) }) }) : null;
-});
+    const [headerEl, setHeaderEl] = useState(null);
+    useMeasure(
+      headerEl,
+      useCallback(
+        (measurement) => {
+          store.getState().actions.setPageHeaderHeight(pagePath, measurement?.height ?? null);
+        },
+        [pagePath, store]
+      )
+    );
+    const formAppEl = useFormAppElement();
+    const isFirstDisplay = useRef(true);
+    useEffect(() => {
+      if (shouldDisplay && isFirstDisplay.current) {
+        formAppEl.scrollIntoView(true);
+        isFirstDisplay.current = false;
+        return () => {
+          isFirstDisplay.current = true;
+        };
+      }
+    }, [formAppEl, shouldDisplay]);
+    const combinedHeaderRef = useCombinedRef(setHeaderEl, headerProps?.ref);
+    return shouldDisplay ? /* @__PURE__ */ jsx(CurrentPath, { path: pagePath, children: /* @__PURE__ */ jsx(DocumentTitle, { title: documentTitle ?? void 0, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx(prefix("form-pages__page"), className),
+        ...otherProps,
+        ref: forwardedRef,
+        children: /* @__PURE__ */ jsx(FormAppStatus, { disabled, readOnly, children: /* @__PURE__ */ jsxs(FormAppIssueMessages, { issueMessages, children: [
+          /* @__PURE__ */ jsx(
+            FormPageHeader,
+            {
+              helperText,
+              helperButtonLabel,
+              ownIssueMessages,
+              codeProps,
+              titleProps,
+              headerPopoverContainerProps,
+              issuesPopoverProps,
+              issueMessagesProps,
+              helperButtonProps,
+              helperPopoverProps,
+              helperPopoverContentProps,
+              ...headerProps,
+              ref: combinedHeaderRef
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ...contentProps,
+              className: cx(
+                prefix("form-pages__page-content"),
+                contentProps?.className
+              ),
+              children: /* @__PURE__ */ jsx(Container, { fluid: "md", gutter: 0, ...containerProps, children: /* @__PURE__ */ jsx(ErrorBoundary, { ...errorBoundaryProps, children: /* @__PURE__ */ jsx(
+                Suspense,
+                {
+                  fallback: /* @__PURE__ */ jsx(Spinner, { size: "xl", color: "primary" }),
+                  children
+                }
+              ) }) })
+            }
+          )
+        ] }) })
+      }
+    ) }) }) : null;
+  }
+);
 function FormPagesSelectOption({ path }) {
   const prefix = usePrefix();
   const disabled = useFormPageState(path, (state) => !state?.exists);
@@ -3609,7 +3520,7 @@ function FormPagesSelectOption({ path }) {
     }
   ) });
 }
-const FormPagesSelect = React.forwardRef(function FormPagesSelect2({
+const FormPagesSelect = forwardRef(function FormPagesSelect2({
   rootProps,
   containerProps,
   valueProps,
@@ -3622,19 +3533,17 @@ const FormPagesSelect = React.forwardRef(function FormPagesSelect2({
   const prefix = usePrefix();
   const store = useFormPagesContext();
   const activePage = useStore(store, (state) => state.activePage);
-  const [selectRootEl, setSelectRootEl] = React.useState(
-    null
-  );
+  const [selectRootEl, setSelectRootEl] = useState(null);
   useMeasure(
     selectRootEl,
-    React.useCallback(
+    useCallback(
       (measurement) => {
         store.setState({ navigationSelectHeight: measurement?.height ?? 0 });
       },
       [store]
     )
   );
-  const handleValueChange = React.useCallback(
+  const handleValueChange = useCallback(
     (value) => value && store.getState().actions.setActivePage(new AbsolutePath(value)),
     [store]
   );
@@ -3701,10 +3610,10 @@ function FormPageSidebarItem({ path }) {
   const code = useFormPageState(path, (state) => state?.code);
   const title = useFormPageState(path, (state) => state?.title);
   const issuesDisplayMode = useIssuesDisplayMode();
-  const itemActionRef = React.useRef(null);
+  const itemActionRef = useRef(null);
   const resetFocus = useResetFocus();
   useOnPathFocus(
-    React.useCallback(
+    useCallback(
       (focusedPath) => {
         if (itemActionRef.current && path.equals(focusedPath)) {
           if (issuesDisplayMode === "panel") {
@@ -3745,16 +3654,16 @@ function FormPageSidebarItem({ path }) {
     }
   );
 }
-const FormPagesSidebar = React.forwardRef(function FormPagesSidebar2({ className, ...otherProps }, forwardedRef) {
+const FormPagesSidebar = forwardRef(function FormPagesSidebar2({ className, ...otherProps }, forwardedRef) {
   const prefix = usePrefix();
   const store = useFormPagesContext();
   const { currentPath } = useFormContext();
   const activePage = useStore(store, (state) => state.activePage);
   const setLeftSidebarWidth = useSetLeftSidebarWidth();
-  const [sidebarEl, setSidebarEl] = React.useState(null);
+  const [sidebarEl, setSidebarEl] = useState(null);
   useMeasure(
     sidebarEl,
-    React.useCallback(
+    useCallback(
       (measurement) => {
         if (activePage && currentPath.append(AbsolutePathFragment.RecursiveWildcard).contains(activePage)) {
           setLeftSidebarWidth(measurement?.width);
@@ -3775,7 +3684,7 @@ const FormPagesSidebar = React.forwardRef(function FormPagesSidebar2({ className
     }
   );
 });
-const FormPagesNavigation = React.forwardRef(function FormPagesNavigation2({
+const FormPagesNavigation = forwardRef(function FormPagesNavigation2({
   sidebarProps,
   selectProps,
   className,
@@ -3783,7 +3692,7 @@ const FormPagesNavigation = React.forwardRef(function FormPagesNavigation2({
   ...otherProps
 }, forwardedRef) {
   const prefix = usePrefix();
-  const locale = useLocale();
+  const [locale] = useLocale();
   ariaLabel ??= locale.FormPagesNavigation["aria-label"];
   const isLargeScreen = useMediaBreakpointUp("sm");
   return /* @__PURE__ */ jsx(
@@ -3801,7 +3710,7 @@ const FormPagesNavigation = React.forwardRef(function FormPagesNavigation2({
 function useFormValidator() {
   const startIssuesNavigation = useStartIssuesNavigation();
   const { _setState } = useFormController();
-  const validate = React.useCallback(async () => {
+  const validate = useCallback(async () => {
     _setState({ validating: true });
     try {
       await startIssuesNavigation();
@@ -3809,14 +3718,14 @@ function useFormValidator() {
       _setState({ validating: false });
     }
   }, [_setState, startIssuesNavigation]);
-  return React.useMemo(() => ({ validate }), [validate]);
+  return useMemo(() => ({ validate }), [validate]);
 }
 function useFormIsValidating() {
   const validatingAutomatically = useFormController().useAutoValidationStatus() === "activeRunning";
   const validatingManually = useFormController().useState(
     (state) => state.validating
   );
-  return React.useMemo(
+  return useMemo(
     () => ({
       validatingAutomatically,
       validatingManually,
@@ -3853,7 +3762,7 @@ function IssuesPanelControls({
 }) {
   const prefix = usePrefix();
   const { validating } = useFormIsValidating();
-  const deferredValidating = React.useDeferredValue(validating);
+  const deferredValidating = useDeferredValue(validating);
   const currentPageInitialized = currentPageController.useInitialized();
   const currentPageExists = currentPageController.useExists();
   const focus = useFocus();
@@ -4002,7 +3911,7 @@ function IssuesPanelControls({
     )
   ] });
 }
-const IssuesPanelMessagesCard = React.forwardRef(function IssuesPanelMessagesCard2({
+const IssuesPanelMessagesCard = forwardRef(function IssuesPanelMessagesCard2({
   currentPagePath,
   currentPageController,
   issuesTrackerResult,
@@ -4034,21 +3943,21 @@ const IssuesPanelMessagesCard = React.forwardRef(function IssuesPanelMessagesCar
   const hasErrors = currentInfo?.localDisplayStatus === "error";
   const hasWarnings = currentInfo?.localDisplayStatus === "warning" || currentInfo?.localDisplayStatus === "error" && currentInfo.issues.some((issue) => issue.severity === "warning");
   const formManager = useFormManager();
-  const schema = React.useMemo(
+  const schema = useMemo(
     () => currentInfo && formManager.schema(currentInfo.path),
     [currentInfo, formManager]
   );
   const isRegistered = useIsRegistered(currentPagePath);
-  const lastRegisteredPath = React.useRef(null);
+  const lastRegisteredPath = useRef(null);
   if (isRegistered) {
     lastRegisteredPath.current = currentPagePath;
   }
   const hasBeenRegistered = isRegistered || lastRegisteredPath?.current?.equals(currentPagePath);
-  const [cardEl, setCardEl] = React.useState(null);
-  const headerRef = React.useRef(null);
+  const [cardEl, setCardEl] = useState(null);
+  const headerRef = useRef(null);
   useScrollPosition(
     cardEl,
-    React.useCallback(
+    useCallback(
       (scrollPosition) => setBoolDataAttr(
         headerRef.current,
         "stuck",
@@ -4178,7 +4087,7 @@ function Breadcrumb() {
     ({ path, label }) => /* @__PURE__ */ jsx(CurrentPath, { path, children: /* @__PURE__ */ jsx("span", { className: prefix("issues-panel__breadcrumb-item"), children: label }) }, path.toString())
   );
 }
-const IssuesPanelSummaryCard = React.forwardRef(function IssuesPanelSummaryCard2({
+const IssuesPanelSummaryCard = forwardRef(function IssuesPanelSummaryCard2({
   issuesTrackerResult,
   errorsLabel,
   warningsLabel,
@@ -4265,7 +4174,7 @@ const IssuesPanelSummaryCard = React.forwardRef(function IssuesPanelSummaryCard2
     }
   );
 });
-const IssuesPanel = React.forwardRef(function ValidationPanel({
+const IssuesPanel = forwardRef(function ValidationPanel({
   defaultOpen = false,
   open: controlledOpen,
   onOpenChange,
@@ -4301,7 +4210,7 @@ const IssuesPanel = React.forwardRef(function ValidationPanel({
   ...otherProps
 }, forwardedRef) {
   const prefix = usePrefix();
-  const locale = useLocale();
+  const [locale] = useLocale();
   errorsLabel ??= locale.IssuesPanel.errorsLabel;
   warningsLabel ??= locale.IssuesPanel.warningsLabel;
   focusButtonLabel ??= locale.IssuesPanel.focusButtonLabel;
@@ -4321,7 +4230,7 @@ const IssuesPanel = React.forwardRef(function ValidationPanel({
   });
   useReportValidationFailures(issuesTrackerResult.info);
   const activePath = useActivePath();
-  const deferredIssuesTrackerResult = React.useDeferredValue(issuesTrackerResult);
+  const deferredIssuesTrackerResult = useDeferredValue(issuesTrackerResult);
   const { info } = deferredIssuesTrackerResult;
   const nPages = info?.length ?? 0;
   const [currentPagePath, setCurrentPagePath] = useIssuesPanelPath();
@@ -4329,8 +4238,8 @@ const IssuesPanel = React.forwardRef(function ValidationPanel({
     currentPagePath ?? AbsolutePath.ROOT,
     { enabled: open && !formIsLoading && currentPagePath !== null }
   );
-  const lastExistingPageIndex = React.useRef(null);
-  const currentPageIndex = React.useMemo(() => {
+  const lastExistingPageIndex = useRef(null);
+  const currentPageIndex = useMemo(() => {
     const idx = currentPagePath ? info?.findIndex(({ path }) => currentPagePath.equals(path)) ?? -1 : -1;
     if (idx !== -1) {
       lastExistingPageIndex.current = idx;
@@ -4338,7 +4247,7 @@ const IssuesPanel = React.forwardRef(function ValidationPanel({
     return idx;
   }, [currentPagePath, info]);
   const focus = useFocus();
-  const goToPath = React.useCallback(
+  const goToPath = useCallback(
     (path) => {
       setCurrentPagePath(path);
       if (path) {
@@ -4347,7 +4256,7 @@ const IssuesPanel = React.forwardRef(function ValidationPanel({
     },
     [focus, setCurrentPagePath]
   );
-  const goToPage = React.useCallback(
+  const goToPage = useCallback(
     (page) => {
       if (nPages > 0) {
         const clampedPage = Math.max(0, Math.min(page, nPages - 1));
@@ -4357,31 +4266,31 @@ const IssuesPanel = React.forwardRef(function ValidationPanel({
     },
     [goToPath, info, nPages]
   );
-  const goToPreviousPage = React.useCallback(() => {
+  const goToPreviousPage = useCallback(() => {
     if (currentPageIndex !== -1) {
       goToPage(currentPageIndex - 1);
     } else {
       goToPage((lastExistingPageIndex.current ?? 1) - 1);
     }
   }, [currentPageIndex, goToPage]);
-  const goToNextPage = React.useCallback(() => {
+  const goToNextPage = useCallback(() => {
     if (currentPageIndex !== -1) {
       goToPage(currentPageIndex + 1);
     } else {
       goToPage(lastExistingPageIndex.current ?? 0);
     }
   }, [currentPageIndex, goToPage]);
-  const goToFirstPage = React.useCallback(() => goToPage(0), [goToPage]);
-  const goToLastPage = React.useCallback(
+  const goToFirstPage = useCallback(() => goToPage(0), [goToPage]);
+  const goToLastPage = useCallback(
     () => goToPage(nPages - 1),
     [goToPage, nPages]
   );
   const formManager = useFormManager();
-  const formSchema = React.useMemo(() => formManager.schema(), [formManager]);
-  const issuesOrderCompareFnRef = React.useRef(issuesOrderCompareFn);
+  const formSchema = useMemo(() => formManager.schema(), [formManager]);
+  const issuesOrderCompareFnRef = useRef(issuesOrderCompareFn);
   issuesOrderCompareFnRef.current = issuesOrderCompareFn;
-  const [starting, setStarting] = React.useState(false);
-  React.useEffect(() => {
+  const [starting, setStarting] = useState(false);
+  useEffect(() => {
     if (issuesTrackerResult.initialized && starting) {
       if (issuesTrackerResult.info.length > 0) {
         goToPath(
@@ -4404,7 +4313,7 @@ const IssuesPanel = React.forwardRef(function ValidationPanel({
     starting
   ]);
   const listeners = useLatestValues({ onOpenChange });
-  const start = React.useCallback(() => {
+  const start = useCallback(() => {
     if (!open) {
       setOpen(true);
       listeners.onOpenChange?.(true);
@@ -4414,13 +4323,11 @@ const IssuesPanel = React.forwardRef(function ValidationPanel({
     lastExistingPageIndex.current = null;
   }, [listeners, open, setCurrentPagePath, setOpen]);
   useSetStartIssuesNavigation(start);
-  const [containerEl, setContainerEl] = React.useState(
-    null
-  );
+  const [containerEl, setContainerEl] = useState(null);
   const setBottomPanelHeight = useSetBottomPanelHeight();
   useMeasure(
     containerEl,
-    React.useCallback(
+    useCallback(
       (measurement) => setBottomPanelHeight(measurement?.height),
       [setBottomPanelHeight]
     )
@@ -4428,11 +4335,11 @@ const IssuesPanel = React.forwardRef(function ValidationPanel({
   const formAppEl = useFormAppElement();
   useIntersectionObserver(
     containerEl,
-    React.useCallback(
+    useCallback(
       (e) => setBoolDataAttr(containerEl, "stuck", e.intersectionRatio === 1),
       [containerEl]
     ),
-    React.useMemo(
+    useMemo(
       () => ({
         root: formAppEl,
         rootMargin: `0px 0px -1px 0px`,
@@ -4441,7 +4348,7 @@ const IssuesPanel = React.forwardRef(function ValidationPanel({
       [formAppEl]
     )
   );
-  const close = React.useCallback(() => {
+  const close = useCallback(() => {
     if (open) {
       setOpen(false);
       listeners.onOpenChange?.(false);
@@ -4585,7 +4492,7 @@ function LoadAction({
   errorMessage,
   ...otherProps
 }) {
-  const locale = useLocale();
+  const [locale] = useLocale();
   label ??= locale.LoadAction.label;
   keybinds ??= locale.LoadAction.keybinds;
   const { load } = useFormLoader({
@@ -4637,11 +4544,11 @@ function useFormSaver({
   successMessage,
   errorMessage
 } = {}) {
-  const locale = useLocale();
+  const [locale] = useLocale();
   const formManager = useFormManager();
   const { getState, _setState } = useFormController();
   const { addToast } = useToastManager();
-  return React.useMemo(() => {
+  return useMemo(() => {
     async function save({
       overwrite: overwrite2,
       path: path2 = AbsolutePath.ROOT,
@@ -4785,7 +4692,7 @@ function SaveAction({
   dropdownMenuProps,
   ...otherProps
 }) {
-  const locale = useLocale();
+  const [locale] = useLocale();
   label ??= locale.SaveAction.label;
   keybinds ??= locale.SaveAction.keybinds;
   saveOptionsLabel ??= locale.SaveAction.saveOptionsLabel;
@@ -4894,7 +4801,7 @@ function SubmitAction({
   ...otherProps
 }) {
   const prefix = usePrefix();
-  const locale = useLocale();
+  const [locale] = useLocale();
   label ??= locale.SubmitAction.label;
   keybinds ??= locale.SubmitAction.keybinds;
   dialogTitle ??= locale.SubmitAction.dialogTitle;
@@ -4905,17 +4812,17 @@ function SubmitAction({
   dialogCancelText ??= locale.SubmitAction.dialogCancelText;
   successMessage ??= locale.SubmitAction.successMessage;
   errorMessage ??= locale.SubmitAction.errorMessage;
-  const [confirmingSubmission, setConfirmingSubmission] = React.useState(false);
+  const [confirmingSubmission, setConfirmingSubmission] = useState(false);
   const startIssuesNavigation = useStartIssuesNavigation();
   const { addToast } = useToastManager();
   const { submit, useSubmitting } = useFormController();
   const submitting = useSubmitting();
-  const [runningOnSubmit, setRunningOnSubmit] = React.useState(false);
+  const [runningOnSubmit, setRunningOnSubmit] = useState(false);
   const formIsLoading = useFormIsLoading();
   const formIsDisabled = useFormIsDisabled();
   const formAppEl = useFormAppElement();
-  const [submissionInfo, setSubmissionInfo] = React.useState(null);
-  const [checkedWarnings, setCheckedWarnings] = React.useState([]);
+  const [submissionInfo, setSubmissionInfo] = useState(null);
+  const [checkedWarnings, setCheckedWarnings] = useState([]);
   const allWarningsChecked = !submissionInfo?.warnings || submissionInfo.warnings.every(
     (warning) => checkedWarnings.some((checkedWarning) => warning.equals(checkedWarning))
   );
@@ -5081,9 +4988,9 @@ function SubmitAction({
   ] });
 }
 function useTableControlApiRef() {
-  return React.useRef(null);
+  return useRef(null);
 }
-const TableControlRemoveRowTrigger = React.forwardRef(function TableControlRemoveRowTrigger2({
+const TableControlRemoveRowTrigger = forwardRef(function TableControlRemoveRowTrigger2({
   showConfirmation,
   onConfirmRowRemoval,
   onRowRemoved,
@@ -5098,7 +5005,7 @@ const TableControlRemoveRowTrigger = React.forwardRef(function TableControlRemov
   children,
   ...otherProps
 }, forwardedRef) {
-  const locale = useLocale();
+  const [locale] = useLocale();
   defaultButtonLabel ??= locale.TableControlRemoveRowTrigger.defaultButtonLabel;
   confirmDialogTitle ??= locale.TableControlRemoveRowTrigger.confirmDialogTitle;
   confirmDialogMessage ??= locale.TableControlRemoveRowTrigger.confirmDialogMessage;
@@ -5112,7 +5019,7 @@ const TableControlRemoveRowTrigger = React.forwardRef(function TableControlRemov
   const initialized = useInitialized();
   const exists = useExists();
   const setActivePath = useSetActivePath();
-  const [removing, setRemoving] = React.useState(false);
+  const [removing, setRemoving] = useState(false);
   const handleClick = async () => {
     const { path, dirty } = getState();
     if (removing || showConfirmation && dirty && !await confirm(confirmDialogMessage(index), {
@@ -5177,25 +5084,25 @@ function tableControlActionsColumn({
     ...columnOverrides
   };
 }
-const TableControlContext = React.createContext(null);
+const TableControlContext = createContext(null);
 function useTableControlContext() {
-  const tableControlContext = React.useContext(TableControlContext);
+  const tableControlContext = useContext(TableControlContext);
   if (!tableControlContext) {
     throw new Error("Table control context not in scope.");
   }
   return tableControlContext;
 }
-const TableControlRowContext = React.createContext(null);
+const TableControlRowContext = createContext(null);
 function useTableControlRowContext() {
-  const tableControlRowContext = React.useContext(TableControlRowContext);
+  const tableControlRowContext = useContext(TableControlRowContext);
   if (!tableControlRowContext) {
     throw new Error("Table control row context not in scope.");
   }
   return tableControlRowContext;
 }
-const TableControlCell = React.forwardRef(function TableControlCell2({ variant, ...otherProps }, forwardedRef) {
+const TableControlCell = forwardRef(function TableControlCell2({ variant, ...otherProps }, forwardedRef) {
   const { useDisplayStatus } = useTableControlRowContext();
-  const deferredDisplayStatus = React.useDeferredValue(useDisplayStatus());
+  const deferredDisplayStatus = useDeferredValue(useDisplayStatus());
   return /* @__PURE__ */ jsx(
     DataTableCell,
     {
@@ -5206,35 +5113,37 @@ const TableControlCell = React.forwardRef(function TableControlCell2({ variant,
     }
   );
 });
-const TableControlRow = React.memo(
-  React.forwardRef(function TableControlRow2({ row, index, ...otherProps }, forwardedRef) {
-    const controller = useController(row, {
-      enabled: !useFormIsLoading() && row != null
-    });
-    const path = controller.usePath();
-    useRegisterController(controller);
-    useRegisterLabel(path, row == null ? null : index + 1);
-    return /* @__PURE__ */ jsx(CurrentPath, { path, children: /* @__PURE__ */ jsx(
-      TableControlRowContext.Provider,
-      {
-        value: React.useMemo(
-          () => ({ index, ...controller }),
-          [controller, index]
-        ),
-        children: /* @__PURE__ */ jsx(
-          DataTableRow,
-          {
-            row,
-            index,
-            ...otherProps,
-            ref: forwardedRef
-          }
-        )
-      }
-    ) });
-  })
+const TableControlRow = memo(
+  forwardRef(
+    function TableControlRow2({ row, index, ...otherProps }, forwardedRef) {
+      const controller = useController(row, {
+        enabled: !useFormIsLoading() && row != null
+      });
+      const path = controller.usePath();
+      useRegisterController(controller);
+      useRegisterLabel(path, row == null ? null : index + 1);
+      return /* @__PURE__ */ jsx(CurrentPath, { path, children: /* @__PURE__ */ jsx(
+        TableControlRowContext.Provider,
+        {
+          value: useMemo(
+            () => ({ index, ...controller }),
+            [controller, index]
+          ),
+          children: /* @__PURE__ */ jsx(
+            DataTableRow,
+            {
+              row,
+              index,
+              ...otherProps,
+              ref: forwardedRef
+            }
+          )
+        }
+      ) });
+    }
+  )
 );
-const TableControl = React.forwardRef(function TableControl2({
+const TableControl = forwardRef(function TableControl2({
   path,
   issueMessages,
   issuesPanelLabel,
@@ -5258,12 +5167,12 @@ const TableControl = React.forwardRef(function TableControl2({
   ...otherProps
 }, forwardedRef) {
   const prefix = usePrefix();
-  const [ids, setIds] = React.useState(void 0);
+  const [ids, setIds] = useState(void 0);
   const size = ids?.length;
   const dataTableApiRef = useDataTableApiRef();
   const controller = useFormatter(path, {
     enabled: !useFormIsLoading(),
-    format: React.useCallback(
+    format: useCallback(
       (value) => value ? sliceTable(value).map(([id]) => id) : [],
       []
     ),
@@ -5292,7 +5201,7 @@ const TableControl = React.forwardRef(function TableControl2({
       `Unsupported schema: Expected (possibly nullable) table schema, but got schema representing values of type '${schema.typeInfo.toString()}'.`
     );
   }
-  const ownController = React.useMemo(
+  const ownController = useMemo(
     () => ({
       addRow: async () => {
         const { schema: schema2, initialized: initialized2, exists: exists2, touched, dirty } = controller.getState();
@@ -5337,13 +5246,13 @@ const TableControl = React.forwardRef(function TableControl2({
       size
     ]
   );
-  const goToIndex = React.useCallback(
+  const goToIndex = useCallback(
     (index, scrollOptions) => {
       dataTableApiRef.current?.goTo(index, scrollOptions);
     },
     [dataTableApiRef]
   );
-  const goToId = React.useCallback(
+  const goToId = useCallback(
     (id, scrollOptions) => {
       const { initialized: initialized2, exists: exists2 } = controller.getState();
       if (initialized2 && exists2) {
@@ -5373,7 +5282,7 @@ const TableControl = React.forwardRef(function TableControl2({
   });
   const controlIsDisabled = displayDisabled || disabled;
   const controlIsReadOnly = displayReadOnly || readOnly || isComputedSchema(schema);
-  React.useImperativeHandle(
+  useImperativeHandle(
     apiRef,
     () => ({
       ...controller,
@@ -5383,7 +5292,7 @@ const TableControl = React.forwardRef(function TableControl2({
     [controller, goToId, goToIndex]
   );
   useOnPathFocus(
-    React.useCallback(
+    useCallback(
       (focusedPath) => {
         if (exists && focusedPath && absolutePath.resolve(AbsolutePath.DESCENDANTS).contains(focusedPath)) {
           const rowId = focusedPath.fragments[absolutePath.size];
@@ -5395,14 +5304,14 @@ const TableControl = React.forwardRef(function TableControl2({
       [absolutePath, exists, goToId]
     )
   );
-  const dataTableColumns = React.useMemo(
+  const dataTableColumns = useMemo(
     () => tableControlToDataTableColumns(columns, {
       disabled: controlIsDisabled,
       readOnly: controlIsReadOnly
     }),
     [columns, controlIsDisabled, controlIsReadOnly]
   );
-  const tableControlController = React.useMemo(
+  const tableControlController = useMemo(
     () => ({ ...controller, ...ownController }),
     [controller, ownController]
   );
@@ -5475,7 +5384,7 @@ function TableControlCellRenderer({
   const controller = useTableControlRowContext();
   return render(controller);
 }
-const TableControlAddRowTrigger = React.forwardRef(function TableControlAddRowTrigger2({
+const TableControlAddRowTrigger = forwardRef(function TableControlAddRowTrigger2({
   defaultButtonText,
   onRowAdded,
   showWhenReadOnly,
@@ -5486,7 +5395,7 @@ const TableControlAddRowTrigger = React.forwardRef(function TableControlAddRowTr
   ...otherProps
 }, forwardedRef) {
   const prefix = usePrefix();
-  const locale = useLocale();
+  const [locale] = useLocale();
   defaultButtonText ??= locale.TableControlAddRowTrigger.defaultButtonText;
   const { controller, size, maxRows } = useTableControlContext();
   const controlIsDisabled = useFormIsDisabled();
@@ -5515,18 +5424,16 @@ const TableControlAddRowTrigger = React.forwardRef(function TableControlAddRowTr
     }
   );
 });
-const TableControlContent = React.forwardRef(function TableControlContent2({ containerProps, ...otherProps }, forwardedRef) {
+const TableControlContent = forwardRef(function TableControlContent2({ containerProps, ...otherProps }, forwardedRef) {
   const prefix = usePrefix();
   const { autofocusRef, handleFocus, controller } = useTableControlContext();
-  const handleContainerOnBlur = React.useCallback(() => {
+  const handleContainerOnBlur = useCallback(() => {
     const { initialized, exists, touched } = controller.getState();
     if (initialized && exists && touched) {
       void controller.setTouched();
     }
   }, [controller]);
-  const deferredDisplayStatus = React.useDeferredValue(
-    controller.useDisplayStatus()
-  );
+  const deferredDisplayStatus = useDeferredValue(controller.useDisplayStatus());
   return /* @__PURE__ */ jsx(
     DataTableContent,
     {
@@ -5561,12 +5468,12 @@ function ValidateAction({
   onClick,
   ...otherProps
 }) {
-  const locale = useLocale();
+  const [locale] = useLocale();
   label ??= locale.ValidateAction.label;
   keybinds ??= locale.ValidateAction.keybinds;
   const { validate } = useFormValidator();
   const { validatingAutomatically, validating } = useFormIsValidating();
-  const deferredValidating = React.useDeferredValue(validating);
+  const deferredValidating = useDeferredValue(validating);
   const formIsLoading = useFormIsLoading();
   const formAppEl = useFormAppElement();
   useKeyboardShortcut(keybinds, validate, {
@@ -5588,279 +5495,40 @@ function ValidateAction({
     }
   );
 }
-const en = {
-  AnnexesManager: {
-    "aria-label": "Form annexes",
-    menuButtonText: "Annexes",
-    addAnnexText: "Add annex",
-    removeAnnexButtonLabel: "Remove annex",
-    removeAnnexKeyboardHint: "Press the “Delete” key to remove the annex",
-    removeAnnexConfirmDialogTitle: "Remove annex",
-    removeAnnexConfirmDialogMessage: (annexName) => /* @__PURE__ */ jsxs(Fragment, { children: [
-      "Are you sure you want to remove annex ",
-      annexName,
-      "?"
-    ] }),
-    removeAnnexConfirmDialogOkText: "Remove"
-  },
-  DateRangeControl: {
-    issuesPanelStartLabelSuffix: " (start date)",
-    issuesPanelEndLabelSuffix: " (end date)"
-  },
-  FileControl: {
-    viewFileButtonLabel: "View file",
-    downloadFileButtonLabel: "Download file",
-    fallbackText: /* @__PURE__ */ jsxs(Fragment, { children: [
-      "The selected file cannot be viewed in this browser.",
-      /* @__PURE__ */ jsx("br", {}),
-      "Please use the button above to download the file. You can then open it using an external application."
-    ] })
-  },
-  FormApp: {
-    issuesPanelLabel: "Form",
-    issueMessages: {
-      "/**": {
-        valueMissing: "Field is required.",
-        valueDisallowed: "Indicated value is not allowed.",
-        rangeUnderflow: "Value is under the minimum allowed.",
-        rangeOverflow: "Value exceeds the maximum allowed.",
-        lengthMismatch: (_data, { typeInfo: { name, restrictions } }) => name === "String" && typeof restrictions.minLength === "number" && restrictions.minLength === restrictions.maxLength ? `Value must have ${restrictions.minLength} character${restrictions.minLength === 1 ? "" : "s"}.` : "Value has an invalid length.",
-        tooShort: (_data, { typeInfo: { name, restrictions } }) => name === "String" && typeof restrictions.minLength === "number" ? `Value must not have under ${restrictions.minLength} character${restrictions.minLength === 1 ? "" : "s"}.` : "Value is too short.",
-        tooLong: (_data, { typeInfo: { name, restrictions } }) => name === "String" && typeof restrictions.maxLength === "number" ? `Value must not have over ${restrictions.maxLength} character${restrictions.maxLength === 1 ? "" : "s"}.` : "Value is too long.",
-        sizeMismatch: (_data, { typeInfo: { restrictions } }) => typeof restrictions.minSize === "number" && restrictions.minSize === restrictions.maxSize ? `Field must have ${restrictions.minSize} item${restrictions.minSize === 1 ? "" : "s"}.` : "Field has an invalid number of items.",
-        tooSmall: (_data, { typeInfo: { restrictions } }) => typeof restrictions.minLength === "number" ? `Field must not have under ${restrictions.minLength} item${restrictions.minLength === 1 ? "" : "s"}.` : "Field does not have enough items.",
-        tooLarge: (_data, { typeInfo: { restrictions } }) => typeof restrictions.maxLength === "number" ? `Field must not have over ${restrictions.maxLength} item${restrictions.maxLength === 1 ? "" : "s"}.` : "Number of items of field exceeds allowed limit.",
-        scaleMismatch: (_data, { typeInfo: { restrictions } }) => typeof restrictions.scale === "number" ? `Value must have ${restrictions.scale} decimal place${restrictions.scale === 1 ? "" : "s"}.` : "Value has invalid number of decimal places.",
-        patternMismatch: "Value does not follow required pattern.",
-        emailPatternMismatch: "Invalid email address.",
-        fileTypeMismatch: (_data, { typeInfo: { restrictions } }) => Array.isArray(restrictions.acceptedFileTypes) ? `Only the following file types are allowed: ${restrictions.acceptedFileTypes.join(", ")}.` : "Indicated file’s type is not allowed.",
-        itemsRepeated: ({ firstIndex, secondIndex }) => firstIndex != null && secondIndex != null ? `Items ${+firstIndex + 1} and ${+secondIndex + 1} are repeated.` : "Field contains repeated items.",
-        computedValueMismatch: "Value differs from the computed value.",
-        validationFailed: (data) => process.env.NODE_ENV !== "production" ? data.exception : "Something went wrong validating this field. Please try again later."
-      }
-    },
-    confirmUnloadMessage: "Are you sure you want to leave the page? Changes you made to the form may not have been saved."
-  },
-  FormPagesNavigation: {
-    "aria-label": "Form pages"
-  },
-  FormPage: {
-    helperButtonLabel: "Show help"
-  },
-  IssueMessages: {
-    unknownErrorMessage: "Field with unknown error.",
-    unknownWarningMessage: "Field with unknown warning."
-  },
-  IssuesPanel: {
-    errorsLabel: (errors) => errors === void 0 ? "Errors" : /* @__PURE__ */ jsxs(Fragment, { children: [
-      errors,
-      " ",
-      errors === 1 ? "Error" : "Errors"
-    ] }),
-    warningsLabel: (warnings) => warnings === void 0 ? "Warnings" : /* @__PURE__ */ jsxs(Fragment, { children: [
-      warnings,
-      " ",
-      warnings === 1 ? "Warning" : "Warnings"
-    ] }),
-    focusButtonLabel: "Focus field",
-    previousIssueButtonLabel: "Previous field with issues",
-    nextIssueButtonLabel: "Next field with issues",
-    firstIssueButtonLabel: "First field with issues",
-    lastIssueButtonLabel: "Last field with issues",
-    paginationLabel: (currentPage, totalPages) => `Field with issues ${currentPage} of ${totalPages}.`,
-    noIssuesMessage: "No issues to report.",
-    resolvedTitle: "Resolved",
-    resolvedMessage: "Issues have been resolved. Please advance to the next field with issues."
-  },
-  IssuesPopover: {
-    label: "Show issues"
-  },
-  LoadAction: {
-    label: "Load",
-    keybinds: "$mod+O",
-    successMessage: (file) => `File “${file.name}” loaded successfully.`,
-    errorMessage: (file) => file ? `Unable to load file “${file.name}”. Please confirm that the indicated file is a valid file of the form.` : "Unable to load the indicated file. Please confirm that you have the appropriate permissions to perform the operation."
-  },
-  SaveAction: {
-    label: "Save",
-    keybinds: "$mod+S",
-    saveOptionsLabel: "Save options",
-    saveAsLabel: "Save as…",
-    saveAsKeybinds: "$mod+Shift+S",
-    successMessage: (fileHandle) => `File “${fileHandle.name}” saved successfully.`,
-    errorMessage: (fileHandle) => fileHandle ? `Unable to save file “${fileHandle.name}”. Please confirm that you have the appropriate permissions to perform the operation.` : "Unable to save the indicated file. Please confirm that you have the appropriate permissions to perform the operation."
-  },
-  SubmitAction: {
-    label: "Submit",
-    keybinds: "$mod+Enter",
-    dialogTitle: "Submit form",
-    dialogDescription: "Please confirm that you wish to proceed with the form submission.",
-    dialogCancelText: "Cancel",
-    confirmWarningsCheckboxLabel: "I declare that I have been informed of the warnings generated by the data in this form and that I wish to proceed without changing said data.",
-    successMessage: () => "Form submitted successfully.",
-    errorMessage: () => "Something went wrong while submitting the form. Please try again later."
-  },
-  TableControlAddRowTrigger: {
-    defaultButtonText: "Add row"
-  },
-  TableControlRemoveRowTrigger: {
-    defaultButtonLabel: "Remove row",
-    confirmDialogTitle: "Remove row",
-    confirmDialogMessage: (index) => /* @__PURE__ */ jsxs(Fragment, { children: [
-      "Are you sure you want to remove line #",
-      index + 1,
-      "?"
-    ] }),
-    confirmDialogOkText: "Remove"
-  },
-  ValidateAction: {
-    label: "Validate",
-    keybinds: "F7"
-  }
-};
-const enGB = {
-  ...en,
-  languageTag: "en-GB",
-  uiLocale: enGB$1
-};
-const enUS = {
-  ...en,
-  languageTag: "en-US",
-  uiLocale: enUS$1
-};
-const frFR = {
-  uiLocale: frFR$1,
-  languageTag: "fr-FR",
-  AnnexesManager: {
-    "aria-label": "Annexes du formulaire",
-    menuButtonText: "Annexes",
-    addAnnexText: "Ajouter une annexe",
-    removeAnnexButtonLabel: "Supprimer une annexe",
-    removeAnnexKeyboardHint: "Appuyez sur la touche « Supprimer » pour supprimer la annexe",
-    removeAnnexConfirmDialogTitle: "Supprimer la annexe",
-    removeAnnexConfirmDialogMessage: (annexName) => /* @__PURE__ */ jsxs(Fragment, { children: [
-      "Êtes-vous sûr de vouloir supprimer la annexe ",
-      annexName,
-      " ?"
-    ] }),
-    removeAnnexConfirmDialogOkText: "Supprimer"
-  },
-  DateRangeControl: {
-    issuesPanelStartLabelSuffix: " (date de début)",
-    issuesPanelEndLabelSuffix: " (date de fin)"
-  },
-  FileControl: {
-    viewFileButtonLabel: "Afficher le fichier",
-    downloadFileButtonLabel: "Télécharger le fichier",
-    fallbackText: /* @__PURE__ */ jsxs(Fragment, { children: [
-      "Le fichier sélectionné ne peut pas être affiché dans ce navigateur.",
-      /* @__PURE__ */ jsx("br", {}),
-      "Veuillez utiliser le bouton ci-dessus pour télécharger le fichier. Vous pourrez ensuite l’ouvrir à l’aide d’une application externe."
-    ] })
-  },
-  FormApp: {
-    issuesPanelLabel: "Formulaire",
-    issueMessages: {
-      "/**": {
-        valueMissing: "Champ obligatoire.",
-        valueDisallowed: "Valeur indiquée non autorisée.",
-        rangeUnderflow: "Valeur inférieure au minimum autorisé.",
-        rangeOverflow: "Valeur supérieure au maximum autorisé.",
-        lengthMismatch: (_data, { typeInfo: { name, restrictions } }) => name === "String" && typeof restrictions.minLength === "number" && restrictions.minLength === restrictions.maxLength ? `La valeur doit comporter ${restrictions.minLength} ${restrictions.minLength === 1 ? "caractère" : "caractères"}.` : "La valeur a une longueur invalide.",
-        tooShort: (_data, { typeInfo: { name, restrictions } }) => name === "String" && typeof restrictions.minLength === "number" ? `La valeur ne doit pas être inférieure à ${restrictions.minLength} ${restrictions.minLength === 1 ? "caractère" : "caractères"}.` : "Valeur trop courte.",
-        tooLong: (_data, { typeInfo: { name, restrictions } }) => name === "String" && typeof restrictions.maxLength === "number" ? `La valeur ne doit pas dépasser ${restrictions.maxLength} ${restrictions.maxLength === 1 ? "caractère" : "caractères"}.` : "Valeur trop longue.",
-        sizeMismatch: (_data, { typeInfo: { restrictions } }) => typeof restrictions.minSize === "number" && restrictions.minSize === restrictions.maxSize ? `Le champ doit contenir ${restrictions.minSize} ${restrictions.minSize === 1 ? "élément" : "éléments"}.` : "Le champ contient un nombre d’éléments non valide.",
-        tooSmall: (_data, { typeInfo: { restrictions } }) => typeof restrictions.minLength === "number" ? `Le champ ne doit pas contenir moins de ${restrictions.minLength} ${restrictions.minLength === 1 ? "élément" : "éléments"}.` : "Le nombre d’éléments du champ n’est pas suffisant.",
-        tooLarge: (_data, { typeInfo: { restrictions } }) => typeof restrictions.maxLength === "number" ? `Le champ ne doit pas contenir plus de ${restrictions.maxLength} ${restrictions.maxLength === 1 ? "élément" : "éléments"}.` : "Le nombre d’éléments du champ dépasse la limite autorisée.",
-        scaleMismatch: (_data, { typeInfo: { restrictions } }) => typeof restrictions.scale === "number" ? `La valeur doit comporter ${restrictions.scale} ${restrictions.scale === 1 ? "décimale" : "décimales"}.` : "La valeur comporte un nombre invalide de décimales.",
-        patternMismatch: "La valeur ne respecte pas le modèle requis.",
-        emailPatternMismatch: "Adresse e-mail non valide.",
-        fileTypeMismatch: (_data, { typeInfo: { restrictions } }) => Array.isArray(restrictions.acceptedFileTypes) ? `Seuls les types de fichiers suivants sont autorisés : ${restrictions.acceptedFileTypes.join(", ")}.` : "Le type de fichier indiqué n’est pas autorisé.",
-        itemsRepeated: ({ firstIndex, secondIndex }) => firstIndex != null && secondIndex != null ? `Les éléments ${+firstIndex + 1} et ${+secondIndex + 1} sont répétés.` : "Le champ contient des éléments répétés.",
-        computedValueMismatch: "La valeur diffère de la valeur calculée.",
-        validationFailed: (data) => process.env.NODE_ENV !== "production" ? data.exception : "Une erreur s’est produite lors de la validation de ce champ. Veuillez réessayer plus tard."
-      }
-    },
-    confirmUnloadMessage: "Êtes-tu sûr de vouloir quitter cette page ? Les modifications que tu as apportées au formulaire n’ont peut-être pas été enregistrées."
-  },
-  FormPagesNavigation: {
-    "aria-label": "Pages du formulaire"
-  },
-  FormPage: {
-    helperButtonLabel: "Afficher l’aide"
-  },
-  IssueMessages: {
-    unknownErrorMessage: "Champ avec erreur inconnue.",
-    unknownWarningMessage: "Champ avec alerte inconnue."
-  },
-  IssuesPanel: {
-    errorsLabel: (errors) => errors === void 0 ? "Erreurs" : /* @__PURE__ */ jsxs(Fragment, { children: [
-      errors,
-      " ",
-      errors === 1 ? "Erreur" : "Erreurs"
-    ] }),
-    warningsLabel: (warnings) => warnings === void 0 ? "Alertes" : /* @__PURE__ */ jsxs(Fragment, { children: [
-      warnings,
-      " ",
-      warnings === 1 ? "Alerte" : "Alertes"
-    ] }),
-    focusButtonLabel: "Focaliser le champ",
-    previousIssueButtonLabel: "Champ précédent avec problèmes",
-    nextIssueButtonLabel: "Champ suivant avec problèmes",
-    firstIssueButtonLabel: "Premier champ avec problèmes",
-    lastIssueButtonLabel: "Dernier champ avec problèmes",
-    paginationLabel: (currentPage, totalPages) => `Champ avec problèmes ${currentPage} sur ${totalPages}.`,
-    noIssuesMessage: "Aucun problème à signaler.",
-    resolvedTitle: "Résolu",
-    resolvedMessage: "Les problèmes ont été résolus. Veuillez passer au champ suivant avec des problèmes."
-  },
-  IssuesPopover: {
-    label: "Afficher les problèmes"
-  },
-  LoadAction: {
-    label: "Ouvrir",
-    keybinds: "$mod+O",
-    successMessage: (file) => `Fichier « ${file.name} » chargé avec succès.`,
-    errorMessage: (file) => file ? `Impossible de charger le fichier « ${file.name} ». Veuillez confirmer que le fichier indiqué est un fichier valide du formulaire.` : "Impossible d’ouvrir le fichier indiqué. Veuillez vérifier que vous disposez des autorisations nécessaires pour effectuer cette opération."
-  },
-  SaveAction: {
-    label: "Enregistrer",
-    keybinds: "$mod+S",
-    saveOptionsLabel: "Options d’enregistrement",
-    saveAsLabel: "Enregistrer sous…",
-    saveAsKeybinds: "$mod+Shift+S",
-    successMessage: (fileHandle) => `Fichier « ${fileHandle.name} » enregistré avec succès.`,
-    errorMessage: (fileHandle) => fileHandle ? `Impossible d’enregistrer le fichier « ${fileHandle.name} ». Veuillez vérifier que vous disposez des autorisations nécessaires pour effectuer cette opération.` : "Impossible d’enregistrer le fichier indiqué. Veuillez vérifier que vous disposez des autorisations nécessaires pour effectuer cette opération."
-  },
-  SubmitAction: {
-    label: "Déposer",
-    keybinds: "$mod+Enter",
-    dialogTitle: "Déposer la déclaration",
-    dialogDescription: "Veuillez confirmer que vous souhaitez poursuivre le dépôt de la déclaration.",
-    dialogCancelText: "Annuler",
-    confirmWarningsCheckboxLabel: "Je déclare avoir pris connaissance des alertes générées par les données de cette déclaration et souhaiter continuer sans modifier les données correspondantes.",
-    successMessage: () => "Déclaration déposée avec succès.",
-    errorMessage: () => "Une erreur s’est produite lors du dépôt de la déclaration. Veuillez réessayer plus tard."
-  },
-  TableControlAddRowTrigger: {
-    defaultButtonText: "Ajouter une ligne"
-  },
-  TableControlRemoveRowTrigger: {
-    defaultButtonLabel: "Supprimer une ligne",
-    confirmDialogTitle: "Supprimer une ligne",
-    confirmDialogMessage: (index) => /* @__PURE__ */ jsxs(Fragment, { children: [
-      "Êtes-vous sûr de vouloir supprimer la ligne #",
-      index + 1,
-      " ?"
-    ] }),
-    confirmDialogOkText: "Supprimer"
-  },
-  ValidateAction: {
-    label: "Valider",
-    keybinds: "F7"
-  }
-};
-const CheckboxControl = React.forwardRef(function CheckboxControl2({
+const LocalizationContext = createContext(null);
+function LocalizationProvider({
+  defaultLocale,
+  locale: controlledLocale,
+  onLocaleChange,
+  children
+}) {
+  const [locale, setLocale] = useControllableState(
+    defaultLocale,
+    controlledLocale
+  );
+  return locale === void 0 ? children : /* @__PURE__ */ jsx(
+    LocalizationContext.Provider,
+    {
+      value: {
+        locale,
+        setLocale: combineEventHandlers(setLocale, onLocaleChange)
+      },
+      children: /* @__PURE__ */ jsx(LocalizationProvider$1, { locale: locale.baseLocale, children })
+    }
+  );
+}
+function useLocale() {
+  const localizationContext = useContext(LocalizationContext);
+  if (localizationContext === null)
+    throw new Error(
+      "No locale has been provided. Please provide a locale via the `FormApp` or `LocalizationProvider` components."
+    );
+  return useMemo(
+    () => [localizationContext.locale, localizationContext.setLocale],
+    [localizationContext.locale, localizationContext.setLocale]
+  );
+}
+const CheckboxControl = forwardRef(function CheckboxControl2({
   path,
   issueMessages,
   issuesPanelLabel,
@@ -5885,7 +5553,7 @@ const CheckboxControl = React.forwardRef(function CheckboxControl2({
   onBlurToOutside,
   ...otherProps
 }, forwardedRef) {
-  const [formattedValue, setFormattedValue] = React.useState(false);
+  const [formattedValue, setFormattedValue] = useState(false);
   const controller = useInput(path, {
     enabled: !useFormIsLoading(),
     parse: parseCheckboxValue,
@@ -6005,16 +5673,60 @@ function optionObjectsToNodes(options) {
     ) }, key ?? i) : /* @__PURE__ */ jsx(Option, { ...optionOrGroup, value: optionIndex++, children: optionOrGroup.text ?? optionOrGroup.value?.toString() ?? "" }, key ?? i)
   );
 }
-const CheckboxGroupControl = React.forwardRef(
-  function CheckboxGroupControl2({
-    path,
-    options,
-    issueMessages,
-    issuesPanelLabel,
-    displayIssues = true,
-    preventAutoFocus,
-    apiRef,
-    issueMessagesProps,
+const CheckboxGroupControl = forwardRef(function CheckboxGroupControl2({
+  path,
+  options,
+  issueMessages,
+  issuesPanelLabel,
+  displayIssues = true,
+  preventAutoFocus,
+  apiRef,
+  issueMessagesProps,
+  formManager,
+  onInitialized,
+  onFormManagerEvent,
+  onValueChange,
+  onValidationStatusChange,
+  onDisplayStatusChange,
+  onDirtyStatusChange,
+  onTouchedStatusChange,
+  required,
+  loading,
+  disabled,
+  readOnly,
+  onFocus,
+  onBlurToOutside,
+  ...otherProps
+}, forwardedRef) {
+  const [arrayValue, setArrayValue] = useState(null);
+  const formattedValue = useMemo(
+    () => formatSelectionValuesAsOptionIndices(arrayValue, options),
+    [options, arrayValue]
+  );
+  const controller = useListableInput(path, {
+    enabled: !useFormIsLoading(),
+    parseToArray: useCallback(
+      (formattedValue2, state) => parseSelectionValuesFromOptionIndices(
+        formattedValue2,
+        state.schema,
+        options
+      ),
+      [options]
+    ),
+    formatFromArray: useCallback(
+      (arrayValue2) => formatSelectionValuesAsOptionIndices(arrayValue2, options),
+      [options]
+    ),
+    setFormattedValue: useCallback(
+      (formattedValue2, state) => setArrayValue(
+        parseSelectionValuesFromOptionIndices(
+          formattedValue2,
+          state.schema,
+          options
+        )
+      ),
+      [options]
+    ),
     formManager,
     onInitialized,
     onFormManagerEvent,
@@ -6022,125 +5734,79 @@ const CheckboxGroupControl = React.forwardRef(
     onValidationStatusChange,
     onDisplayStatusChange,
     onDirtyStatusChange,
-    onTouchedStatusChange,
-    required,
-    loading,
-    disabled,
-    readOnly,
-    onFocus,
-    onBlurToOutside,
-    ...otherProps
-  }, forwardedRef) {
-    const [arrayValue, setArrayValue] = React.useState(null);
-    const formattedValue = React.useMemo(
-      () => formatSelectionValuesAsOptionIndices(arrayValue, options),
-      [options, arrayValue]
-    );
-    const controller = useListableInput(path, {
-      enabled: !useFormIsLoading(),
-      parseToArray: React.useCallback(
-        (formattedValue2, state) => parseSelectionValuesFromOptionIndices(
-          formattedValue2,
-          state.schema,
-          options
+    onTouchedStatusChange
+  });
+  const { getState, useSchema, usePath, inputProps } = controller;
+  const { restrictions } = useSchema().typeInfo;
+  const absolutePath = usePath();
+  const {
+    displayLoading,
+    displayDisabled,
+    displayReadOnly,
+    displayStatusToDisplay,
+    issuesToDisplay,
+    autofocusRef,
+    handleFocus
+  } = useRegisterControl({
+    controller,
+    issuesPanelLabel,
+    ariaLabel: otherProps["aria-label"],
+    preventAutoFocus,
+    apiRef
+  });
+  const handleValueChange = useCallback(
+    (formattedValue2) => setArrayValue(
+      parseSelectionValuesFromOptionIndices(
+        formattedValue2,
+        getState().schema,
+        options
+      )
+    ),
+    [getState, options]
+  );
+  const [inlineIssues, popoverIssues] = useControlIssues({
+    issuesToDisplay: {
+      [absolutePath.toString()]: issuesToDisplay
+    },
+    issueMessages: { [absolutePath.toString()]: issueMessages },
+    displayIssues,
+    issueMessagesProps
+  });
+  const combinedCheckboxGroupRef = useCombinedRef(
+    inputProps.ref,
+    autofocusRef,
+    forwardedRef
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      CheckboxGroup,
+      {
+        value: formattedValue,
+        name: inputProps.name,
+        required: required ?? restrictions.required === true,
+        loading: displayLoading || loading,
+        disabled: displayDisabled || disabled,
+        readOnly: displayReadOnly || readOnly || inputProps.readOnly,
+        status: displayStatusToControlStatus(displayStatusToDisplay),
+        onValueChange: combineEventHandlers(
+          inputProps.onChange,
+          handleValueChange
         ),
-        [options]
-      ),
-      formatFromArray: React.useCallback(
-        (arrayValue2) => formatSelectionValuesAsOptionIndices(arrayValue2, options),
-        [options]
-      ),
-      setFormattedValue: React.useCallback(
-        (formattedValue2, state) => setArrayValue(
-          parseSelectionValuesFromOptionIndices(
-            formattedValue2,
-            state.schema,
-            options
-          )
+        onFocus: combineEventHandlers(onFocus, handleFocus),
+        onBlurToOutside: combineEventHandlers(
+          onBlurToOutside,
+          inputProps.onBlur
         ),
-        [options]
-      ),
-      formManager,
-      onInitialized,
-      onFormManagerEvent,
-      onValueChange,
-      onValidationStatusChange,
-      onDisplayStatusChange,
-      onDirtyStatusChange,
-      onTouchedStatusChange
-    });
-    const { getState, useSchema, usePath, inputProps } = controller;
-    const { restrictions } = useSchema().typeInfo;
-    const absolutePath = usePath();
-    const {
-      displayLoading,
-      displayDisabled,
-      displayReadOnly,
-      displayStatusToDisplay,
-      issuesToDisplay,
-      autofocusRef,
-      handleFocus
-    } = useRegisterControl({
-      controller,
-      issuesPanelLabel,
-      ariaLabel: otherProps["aria-label"],
-      preventAutoFocus,
-      apiRef
-    });
-    const handleValueChange = React.useCallback(
-      (formattedValue2) => setArrayValue(
-        parseSelectionValuesFromOptionIndices(
-          formattedValue2,
-          getState().schema,
-          options
-        )
-      ),
-      [getState, options]
-    );
-    const [inlineIssues, popoverIssues] = useControlIssues({
-      issuesToDisplay: {
-        [absolutePath.toString()]: issuesToDisplay
-      },
-      issueMessages: { [absolutePath.toString()]: issueMessages },
-      displayIssues,
-      issueMessagesProps
-    });
-    const combinedCheckboxGroupRef = useCombinedRef(
-      inputProps.ref,
-      autofocusRef,
-      forwardedRef
-    );
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        CheckboxGroup,
-        {
-          value: formattedValue,
-          name: inputProps.name,
-          required: required ?? restrictions.required === true,
-          loading: displayLoading || loading,
-          disabled: displayDisabled || disabled,
-          readOnly: displayReadOnly || readOnly || inputProps.readOnly,
-          status: displayStatusToControlStatus(displayStatusToDisplay),
-          onValueChange: combineEventHandlers(
-            inputProps.onChange,
-            handleValueChange
-          ),
-          onFocus: combineEventHandlers(onFocus, handleFocus),
-          onBlurToOutside: combineEventHandlers(
-            onBlurToOutside,
-            inputProps.onBlur
-          ),
-          ...otherProps,
-          ref: combinedCheckboxGroupRef,
-          children: options.map(({ value, text, key, ...checkboxProps }, i) => /* @__PURE__ */ jsx(Checkbox, { value: i, ...checkboxProps, children: text ?? value?.toString() ?? "" }, key ?? i))
-        }
-      ),
-      inlineIssues,
-      popoverIssues
-    ] });
-  }
-);
-const DateControl = React.forwardRef(function DateControl2({
+        ...otherProps,
+        ref: combinedCheckboxGroupRef,
+        children: options.map(({ value, text, key, ...checkboxProps }, i) => /* @__PURE__ */ jsx(Checkbox, { value: i, ...checkboxProps, children: text ?? value?.toString() ?? "" }, key ?? i))
+      }
+    ),
+    inlineIssues,
+    popoverIssues
+  ] });
+});
+const DateControl = forwardRef(function DateControl2({
   path,
   issueMessages,
   issuesPanelLabel,
@@ -6175,14 +5841,14 @@ const DateControl = React.forwardRef(function DateControl2({
     shortFormat,
     fullFormat
   });
-  const [formattedValue, setFormattedValue] = React.useState("");
+  const [formattedValue, setFormattedValue] = useState("");
   const controller = useTemporalInput(path, {
     enabled: !useFormIsLoading(),
-    parseToString: React.useCallback(
+    parseToString: useCallback(
       (formattedValue2, state) => parse(formattedValue2, state.schema),
       [parse]
     ),
-    formatFromString: React.useCallback(
+    formatFromString: useCallback(
       (temporalString, state) => format2(temporalString, state.schema),
       [format2]
     ),
@@ -6215,7 +5881,7 @@ const DateControl = React.forwardRef(function DateControl2({
     preventAutoFocus,
     apiRef
   });
-  const handleValueChange = React.useCallback(
+  const handleValueChange = useCallback(
     ({ formattedValue: formattedValue2 }) => {
       setFormattedValue(formattedValue2);
       inputProps.onChange(formattedValue2);
@@ -6268,7 +5934,7 @@ const DateControl = React.forwardRef(function DateControl2({
     inlineIssues
   ] });
 });
-const FormStepper = React.forwardRef(function FormStepper2({
+const FormStepper = forwardRef(function FormStepper2({
   path,
   steps,
   defaultActiveStep,
@@ -6284,7 +5950,7 @@ const FormStepper = React.forwardRef(function FormStepper2({
   const prefix = usePrefix();
   const formManager = useFormManager();
   const absolutePath = useResolvedPath(path);
-  const resolvedSteps = React.useMemo(
+  const resolvedSteps = useMemo(
     () => steps.map((step, i) => ({
       ...step,
       index: i,
@@ -6351,13 +6017,11 @@ function FormStepRegistrar({
   const exists = controller.useState(
     (state) => state.initialized && state.exists
   );
-  const deferredValue = React.useDeferredValue(controller.useValue());
-  const deferredDisplayStatus = React.useDeferredValue(
-    controller.useDisplayStatus()
-  );
+  const deferredValue = useDeferredValue(controller.useValue());
+  const deferredDisplayStatus = useDeferredValue(controller.useDisplayStatus());
   const actualTitle = typeof title === "function" ? deferredValue === void 0 ? null : title(deferredValue) : title;
   const actualDocumentTitle = typeof documentTitle === "function" ? deferredValue === void 0 ? null : documentTitle(deferredValue) : documentTitle === void 0 ? actualTitle === null || typeof actualTitle === "string" ? actualTitle : void 0 : documentTitle;
-  React.useEffect(() => {
+  useEffect(() => {
     const { registerStepState } = store.getState().actions;
     registerStepState(absolutePath, {
       exists,
@@ -6384,7 +6048,9 @@ function FormStepRegistrar({
   );
   return null;
 }
-const FormStepperContext = React.createContext(null);
+const FormStepperContext = createContext(
+  null
+);
 function useCreateFormStepperContext({
   formManager,
   basePath,
@@ -6435,7 +6101,7 @@ function useCreateFormStepperContext({
           setActiveStep: (step, callListener = true) => {
             const oldActiveStep = get().activeStep;
             if (!oldActiveStep?.path.equals(step?.path) || oldActiveStep?.index !== step?.index) {
-              React.startTransition(() => {
+              startTransition(() => {
                 set({ activeStep: step });
                 if (step != null) {
                   setActivePath(step.path);
@@ -6513,7 +6179,7 @@ function useCreateFormStepperContext({
       }))
     )
   );
-  React.useEffect(() => {
+  useEffect(() => {
     store.getState().actions.setSteps(resolvedSteps);
     if (activeStep !== void 0) {
       const { steps, activeStep: oldActiveStep } = store.getState();
@@ -6529,7 +6195,7 @@ function useCreateFormStepperContext({
     }
   }, [resolvedSteps, activeStep, basePath, store]);
   useOnPathFocus(
-    React.useCallback(
+    useCallback(
       (focusedPath) => {
         const { steps, activeStep: activeStep2, actions } = store.getState();
         const specificPath = mostSpecificPath(
@@ -6547,7 +6213,7 @@ function useCreateFormStepperContext({
   return store;
 }
 function useFormStepperContext() {
-  const formStepperContext = React.useContext(FormStepperContext);
+  const formStepperContext = useContext(FormStepperContext);
   if (!formStepperContext) {
     throw new Error("Form stepper context not in scope.");
   }
@@ -6559,7 +6225,7 @@ function useFormStepState(path, selector) {
     (state) => selector(state.actions.getStepState(path))
   );
 }
-const FormStepContent = React.forwardRef(function FormStepContent2({
+const FormStepContent = forwardRef(function FormStepContent2({
   path,
   disabled = false,
   readOnly = false,
@@ -6610,7 +6276,7 @@ function FormStep({ path, index }) {
     }
   );
 }
-const FormStepList = React.forwardRef(function FormStepperSidebar({ className, ...otherProps }, forwardedRef) {
+const FormStepList = forwardRef(function FormStepperSidebar({ className, ...otherProps }, forwardedRef) {
   const prefix = usePrefix();
   const steps = useStore(useFormStepperContext(), (state) => state.steps);
   return /* @__PURE__ */ jsx(
@@ -6630,7 +6296,7 @@ const FormStepList = React.forwardRef(function FormStepperSidebar({ className, .
     }
   );
 });
-const IssueAlert = React.forwardRef(function IssueMessage2({ path, code, children, ...otherProps }, forwardedRef) {
+const IssueAlert = forwardRef(function IssueMessage2({ path, code, children, ...otherProps }, forwardedRef) {
   const { info } = useIssuesTracker(path);
   const relevantIssues = (info?.flatMap((info2) => info2.issues) ?? []).filter(
     (issue) => issue.code === code
@@ -6647,7 +6313,7 @@ const IssueAlert = React.forwardRef(function IssueMessage2({ path, code, childre
   )) });
 });
 const INTEGER_TYPES = ["Byte", "Char", "Short", "Int", "Long", "BigInteger"];
-const NumericControl = React.forwardRef(function NumericControl2({
+const NumericControl = forwardRef(function NumericControl2({
   path,
   issueMessages,
   issuesPanelLabel,
@@ -6678,7 +6344,7 @@ const NumericControl = React.forwardRef(function NumericControl2({
   onBlurToOutside,
   ...otherProps
 }, forwardedRef) {
-  const [stringValue, setStringValue] = React.useState("");
+  const [stringValue, setStringValue] = useState("");
   const controller = useNumericInput(path, {
     enabled: !useFormIsLoading(),
     setFormattedValue: setStringValue,
@@ -6710,9 +6376,9 @@ const NumericControl = React.forwardRef(function NumericControl2({
     preventAutoFocus,
     apiRef
   });
-  const latestStringValueRef = React.useRef(stringValue);
+  const latestStringValueRef = useRef(stringValue);
   latestStringValueRef.current = stringValue;
-  const handleValueChange = React.useCallback(
+  const handleValueChange = useCallback(
     ({ stringValue: stringValue2 }) => {
       if (stringValue2 !== latestStringValueRef.current) {
         inputProps.onChange(stringValue2);
@@ -6799,7 +6465,7 @@ function PathLink({
     }
   );
 }
-const RadioGroupControl = React.forwardRef(function RadioGroupControl2({
+const RadioGroupControl = forwardRef(function RadioGroupControl2({
   path,
   options,
   issueMessages,
@@ -6825,8 +6491,8 @@ const RadioGroupControl = React.forwardRef(function RadioGroupControl2({
   onBlurToOutside,
   ...otherProps
 }, forwardedRef) {
-  const [value, setValue] = React.useState();
-  const formattedValue = React.useMemo(
+  const [value, setValue] = useState();
+  const formattedValue = useMemo(
     () => formatSelectionValueAsOptionIndex(value, options),
     [options, value]
   );
@@ -6834,7 +6500,7 @@ const RadioGroupControl = React.forwardRef(function RadioGroupControl2({
     path,
     {
       enabled: !useFormIsLoading(),
-      parse: React.useCallback(
+      parse: useCallback(
         (formattedValue2, state) => parseSelectionValueFromOptionIndex(
           formattedValue2,
           state.schema,
@@ -6842,11 +6508,11 @@ const RadioGroupControl = React.forwardRef(function RadioGroupControl2({
         ),
         [options]
       ),
-      format: React.useCallback(
+      format: useCallback(
         (value2) => formatSelectionValueAsOptionIndex(value2, options),
         [options]
       ),
-      setFormattedValue: React.useCallback(
+      setFormattedValue: useCallback(
         (formattedValue2, state) => setValue(
           parseSelectionValueFromOptionIndex(
             formattedValue2,
@@ -6885,14 +6551,14 @@ const RadioGroupControl = React.forwardRef(function RadioGroupControl2({
     preventAutoFocus,
     apiRef
   });
-  const handleValueChange = React.useCallback(
+  const handleValueChange = useCallback(
     (formattedValue2) => setValue(
       parseSelectionValueFromOptionIndex(formattedValue2, schema, options)
     ),
     [options, schema]
   );
   const clearedValue = nullable ? null : schema.initialValue;
-  const clearedIdx = React.useMemo(
+  const clearedIdx = useMemo(
     () => options.findIndex((option) => equals(option.value, clearedValue)),
     [clearedValue, options]
   );
@@ -6940,7 +6606,7 @@ const RadioGroupControl = React.forwardRef(function RadioGroupControl2({
     popoverIssues
   ] });
 });
-const SelectControl = React.forwardRef(function SelectControl2({
+const SelectControl = forwardRef(function SelectControl2({
   path,
   options: groupedOptions,
   issueMessages,
@@ -6967,7 +6633,7 @@ const SelectControl = React.forwardRef(function SelectControl2({
   onBlurToOutside,
   ...otherProps
 }, forwardedRef) {
-  const options = React.useMemo(
+  const options = useMemo(
     () => groupedOptions.reduce((options2, optionOrGroup) => {
       if ("options" in optionOrGroup) {
         options2.push(...optionOrGroup.options);
@@ -6978,47 +6644,44 @@ const SelectControl = React.forwardRef(function SelectControl2({
     }, []),
     [groupedOptions]
   );
-  const [value, setValue] = React.useState();
-  const formattedValue = React.useMemo(
+  const [value, setValue] = useState();
+  const formattedValue = useMemo(
     () => formatSelectionValueAsOptionIndex(value, options),
     [options, value]
   );
-  const controller = useInput(
-    path,
-    {
-      enabled: !useFormIsLoading(),
-      parse: React.useCallback(
-        (formattedValue2, state) => parseSelectionValueFromOptionIndex(
+  const controller = useInput(path, {
+    enabled: !useFormIsLoading(),
+    parse: useCallback(
+      (formattedValue2, state) => parseSelectionValueFromOptionIndex(
+        formattedValue2,
+        state.schema,
+        options
+      ),
+      [options]
+    ),
+    format: useCallback(
+      (value2) => formatSelectionValueAsOptionIndex(value2, options),
+      [options]
+    ),
+    setFormattedValue: useCallback(
+      (formattedValue2, state) => setValue(
+        parseSelectionValueFromOptionIndex(
           formattedValue2,
           state.schema,
           options
-        ),
-        [options]
-      ),
-      format: React.useCallback(
-        (value2) => formatSelectionValueAsOptionIndex(value2, options),
-        [options]
-      ),
-      setFormattedValue: React.useCallback(
-        (formattedValue2, state) => setValue(
-          parseSelectionValueFromOptionIndex(
-            formattedValue2,
-            state.schema,
-            options
-          )
-        ),
-        [options]
+        )
       ),
-      formManager,
-      onInitialized,
-      onFormManagerEvent,
-      onValueChange,
-      onValidationStatusChange,
-      onDisplayStatusChange,
-      onDirtyStatusChange,
-      onTouchedStatusChange
-    }
-  );
+      [options]
+    ),
+    formManager,
+    onInitialized,
+    onFormManagerEvent,
+    onValueChange,
+    onValidationStatusChange,
+    onDisplayStatusChange,
+    onDirtyStatusChange,
+    onTouchedStatusChange
+  });
   const { getState, useSchema, usePath, inputProps } = controller;
   const schema = useSchema();
   const absolutePath = usePath();
@@ -7038,7 +6701,7 @@ const SelectControl = React.forwardRef(function SelectControl2({
     preventAutoFocus,
     apiRef
   });
-  const handleValueChange = React.useCallback(
+  const handleValueChange = useCallback(
     (formattedValue2) => setValue(
       parseSelectionValueFromOptionIndex(
         formattedValue2,
@@ -7050,12 +6713,12 @@ const SelectControl = React.forwardRef(function SelectControl2({
   );
   showClearButton ??= nullable ? "auto" : false;
   const clearedValue = nullable ? null : schema.initialValue;
-  const clearedIdx = React.useMemo(
+  const clearedIdx = useMemo(
     () => options.findIndex((option) => equals(option.value, clearedValue)),
     [clearedValue, options]
   );
   const clearedFormattedValue = clearedIdx === -1 ? "" : clearedIdx.toString();
-  const optionNodes = React.useMemo(
+  const optionNodes = useMemo(
     () => optionObjectsToNodes(groupedOptions),
     [groupedOptions]
   );
@@ -7105,16 +6768,72 @@ const SelectControl = React.forwardRef(function SelectControl2({
     inlineIssues
   ] });
 });
-const SelectMultipleControl = React.forwardRef(
-  function SelectMultipleControl2({
-    path,
-    issueMessages,
-    issuesPanelLabel,
-    displayIssues = true,
-    options: groupedOptions,
-    preventAutoFocus,
-    apiRef,
-    issueMessagesProps,
+const SelectMultipleControl = forwardRef(function SelectMultipleControl2({
+  path,
+  issueMessages,
+  issuesPanelLabel,
+  displayIssues = true,
+  options: groupedOptions,
+  preventAutoFocus,
+  apiRef,
+  issueMessagesProps,
+  formManager,
+  onInitialized,
+  onFormManagerEvent,
+  onValueChange,
+  onValidationStatusChange,
+  onDisplayStatusChange,
+  onDirtyStatusChange,
+  onTouchedStatusChange,
+  required,
+  loading,
+  disabled,
+  readOnly,
+  endAdornment,
+  onFocus,
+  onBlurToOutside,
+  ...otherProps
+}, forwardedRef) {
+  const options = useMemo(
+    () => groupedOptions.reduce((options2, optionOrGroup) => {
+      if ("options" in optionOrGroup) {
+        options2.push(...optionOrGroup.options);
+      } else {
+        options2.push(optionOrGroup);
+      }
+      return options2;
+    }, []),
+    [groupedOptions]
+  );
+  const [arrayValue, setArrayValue] = useState(null);
+  const formattedValue = useMemo(
+    () => formatSelectionValuesAsOptionIndices(arrayValue, options),
+    [options, arrayValue]
+  );
+  const controller = useListableInput(path, {
+    enabled: !useFormIsLoading(),
+    parseToArray: useCallback(
+      (formattedValue2, state) => parseSelectionValuesFromOptionIndices(
+        formattedValue2,
+        state.schema,
+        options
+      ),
+      [options]
+    ),
+    formatFromArray: useCallback(
+      (arrayValue2) => formatSelectionValuesAsOptionIndices(arrayValue2, options),
+      [options]
+    ),
+    setFormattedValue: useCallback(
+      (formattedValue2, state) => setArrayValue(
+        parseSelectionValuesFromOptionIndices(
+          formattedValue2,
+          state.schema,
+          options
+        )
+      ),
+      [options]
+    ),
     formManager,
     onInitialized,
     onFormManagerEvent,
@@ -7122,145 +6841,87 @@ const SelectMultipleControl = React.forwardRef(
     onValidationStatusChange,
     onDisplayStatusChange,
     onDirtyStatusChange,
-    onTouchedStatusChange,
-    required,
-    loading,
-    disabled,
-    readOnly,
-    endAdornment,
-    onFocus,
-    onBlurToOutside,
-    ...otherProps
-  }, forwardedRef) {
-    const options = React.useMemo(
-      () => groupedOptions.reduce((options2, optionOrGroup) => {
-        if ("options" in optionOrGroup) {
-          options2.push(...optionOrGroup.options);
-        } else {
-          options2.push(optionOrGroup);
-        }
-        return options2;
-      }, []),
-      [groupedOptions]
-    );
-    const [arrayValue, setArrayValue] = React.useState(null);
-    const formattedValue = React.useMemo(
-      () => formatSelectionValuesAsOptionIndices(arrayValue, options),
-      [options, arrayValue]
-    );
-    const controller = useListableInput(path, {
-      enabled: !useFormIsLoading(),
-      parseToArray: React.useCallback(
-        (formattedValue2, state) => parseSelectionValuesFromOptionIndices(
-          formattedValue2,
-          state.schema,
-          options
+    onTouchedStatusChange
+  });
+  const { getState, useSchema, usePath, inputProps } = controller;
+  const { restrictions } = useSchema().typeInfo;
+  const absolutePath = usePath();
+  const {
+    displayLoading,
+    displayDisabled,
+    displayReadOnly,
+    displayStatusToDisplay,
+    issuesToDisplay,
+    autofocusRef,
+    handleFocus
+  } = useRegisterControl({
+    controller,
+    issuesPanelLabel,
+    ariaLabel: otherProps["aria-label"],
+    preventAutoFocus,
+    apiRef
+  });
+  const handleValueChange = useCallback(
+    (formattedValue2) => setArrayValue(
+      parseSelectionValuesFromOptionIndices(
+        formattedValue2,
+        getState().schema,
+        options
+      )
+    ),
+    [getState, options]
+  );
+  const optionNodes = useMemo(
+    () => optionObjectsToNodes(groupedOptions),
+    [groupedOptions]
+  );
+  const [inlineIssues, popoverIssues] = useControlIssues({
+    issuesToDisplay: {
+      [absolutePath.toString()]: issuesToDisplay
+    },
+    issueMessages: { [absolutePath.toString()]: issueMessages },
+    displayIssues,
+    issueMessagesProps
+  });
+  const combinedSelectRef = useCombinedRef(
+    inputProps.ref,
+    autofocusRef,
+    forwardedRef
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        multiple: true,
+        value: formattedValue,
+        name: inputProps.name,
+        required: required ?? restrictions.required === true,
+        loading: displayLoading || loading,
+        disabled: displayDisabled || disabled,
+        readOnly: displayReadOnly || readOnly || inputProps.readOnly,
+        status: displayStatusToControlStatus(displayStatusToDisplay),
+        endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
+          popoverIssues,
+          endAdornment
+        ] }),
+        onValueChange: combineEventHandlers(
+          inputProps.onChange,
+          handleValueChange
         ),
-        [options]
-      ),
-      formatFromArray: React.useCallback(
-        (arrayValue2) => formatSelectionValuesAsOptionIndices(arrayValue2, options),
-        [options]
-      ),
-      setFormattedValue: React.useCallback(
-        (formattedValue2, state) => setArrayValue(
-          parseSelectionValuesFromOptionIndices(
-            formattedValue2,
-            state.schema,
-            options
-          )
+        onFocus: combineEventHandlers(onFocus, handleFocus),
+        onBlurToOutside: combineEventHandlers(
+          onBlurToOutside,
+          inputProps.onBlur
         ),
-        [options]
-      ),
-      formManager,
-      onInitialized,
-      onFormManagerEvent,
-      onValueChange,
-      onValidationStatusChange,
-      onDisplayStatusChange,
-      onDirtyStatusChange,
-      onTouchedStatusChange
-    });
-    const { getState, useSchema, usePath, inputProps } = controller;
-    const { restrictions } = useSchema().typeInfo;
-    const absolutePath = usePath();
-    const {
-      displayLoading,
-      displayDisabled,
-      displayReadOnly,
-      displayStatusToDisplay,
-      issuesToDisplay,
-      autofocusRef,
-      handleFocus
-    } = useRegisterControl({
-      controller,
-      issuesPanelLabel,
-      ariaLabel: otherProps["aria-label"],
-      preventAutoFocus,
-      apiRef
-    });
-    const handleValueChange = React.useCallback(
-      (formattedValue2) => setArrayValue(
-        parseSelectionValuesFromOptionIndices(
-          formattedValue2,
-          getState().schema,
-          options
-        )
-      ),
-      [getState, options]
-    );
-    const optionNodes = React.useMemo(
-      () => optionObjectsToNodes(groupedOptions),
-      [groupedOptions]
-    );
-    const [inlineIssues, popoverIssues] = useControlIssues({
-      issuesToDisplay: {
-        [absolutePath.toString()]: issuesToDisplay
-      },
-      issueMessages: { [absolutePath.toString()]: issueMessages },
-      displayIssues,
-      issueMessagesProps
-    });
-    const combinedSelectRef = useCombinedRef(
-      inputProps.ref,
-      autofocusRef,
-      forwardedRef
-    );
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        Select,
-        {
-          multiple: true,
-          value: formattedValue,
-          name: inputProps.name,
-          required: required ?? restrictions.required === true,
-          loading: displayLoading || loading,
-          disabled: displayDisabled || disabled,
-          readOnly: displayReadOnly || readOnly || inputProps.readOnly,
-          status: displayStatusToControlStatus(displayStatusToDisplay),
-          endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
-            popoverIssues,
-            endAdornment
-          ] }),
-          onValueChange: combineEventHandlers(
-            inputProps.onChange,
-            handleValueChange
-          ),
-          onFocus: combineEventHandlers(onFocus, handleFocus),
-          onBlurToOutside: combineEventHandlers(
-            onBlurToOutside,
-            inputProps.onBlur
-          ),
-          ...otherProps,
-          ref: combinedSelectRef,
-          children: optionNodes
-        }
-      ),
-      inlineIssues
-    ] });
-  }
-);
-const TextControl = React.forwardRef(function TextControl2({
+        ...otherProps,
+        ref: combinedSelectRef,
+        children: optionNodes
+      }
+    ),
+    inlineIssues
+  ] });
+});
+const TextControl = forwardRef(function TextControl2({
   path,
   issueMessages,
   issuesPanelLabel,
@@ -7290,21 +6951,18 @@ const TextControl = React.forwardRef(function TextControl2({
   onBlurToOutside,
   ...otherProps
 }, forwardedRef) {
-  const controller = useInput(
-    path,
-    {
-      enabled: !useFormIsLoading(),
-      parse: parseText,
-      formManager,
-      onInitialized,
-      onFormManagerEvent,
-      onValueChange,
-      onValidationStatusChange,
-      onDisplayStatusChange,
-      onDirtyStatusChange,
-      onTouchedStatusChange
-    }
-  );
+  const controller = useInput(path, {
+    enabled: !useFormIsLoading(),
+    parse: parseText,
+    formManager,
+    onInitialized,
+    onFormManagerEvent,
+    onValueChange,
+    onValidationStatusChange,
+    onDisplayStatusChange,
+    onDirtyStatusChange,
+    onTouchedStatusChange
+  });
   const { useSchema, usePath, inputProps } = controller;
   const schema = useSchema();
   const absolutePath = usePath();
@@ -7330,8 +6988,8 @@ const TextControl = React.forwardRef(function TextControl2({
     preventAutoFocus,
     apiRef
   });
-  const prevMultiline = React.useRef(multiline);
-  React.useEffect(() => {
+  const prevMultiline = useRef(multiline);
+  useEffect(() => {
     if (prevMultiline.current !== multiline) {
       throw new Error(
         "The `multiline` property cannot not be changed at runtime."
@@ -7391,14 +7049,14 @@ const TextControl = React.forwardRef(function TextControl2({
 function parseText(formattedValue, state) {
   return state.schema.typeInfo.nullable ? formattedValue || null : formattedValue;
 }
-const TopBar = React.forwardRef(
+const TopBar = forwardRef(
   function TopBar2({ className, ...otherProps }, forwardedRef) {
     const prefix = usePrefix();
     const setTopBarHeight = useSetTopBarHeight();
-    const [topBarEl, setTopBarEl] = React.useState(null);
+    const [topBarEl, setTopBarEl] = useState(null);
     useMeasure(
       topBarEl,
-      React.useCallback(
+      useCallback(
         (measurement) => setTopBarHeight(measurement?.height),
         [setTopBarHeight]
       )
@@ -7414,7 +7072,7 @@ const TopBar = React.forwardRef(
     ) });
   }
 );
-const TopBarActions = React.forwardRef(function TopBarActions2({ className, ...otherProps }, forwardedRef) {
+const TopBarActions = forwardRef(function TopBarActions2({ className, ...otherProps }, forwardedRef) {
   const prefix = usePrefix();
   return /* @__PURE__ */ jsx(
     Stack,
@@ -7435,7 +7093,6 @@ export {
   CheckboxControl,
   CheckboxGroupControl,
   ControlField,
-  DEFAULT_PREFIX_SUFFIX,
   DateControl,
   DateRangeControl,
   FileControl,
@@ -7475,13 +7132,13 @@ export {
   TopBar,
   TopBarActions,
   ValidateAction,
-  defaultLocale,
   displayStatusToColor,
   displayStatusToControlStatus,
   enGB,
   enUS,
-  frFR,
-  ptPT,
+  fr,
+  pt,
+  setDefaultPrefixSuffix,
   tableControlActionsColumn,
   tableControlIndexColumn,
   useActiveIssuesPanelBreadcrumb,