@hmlr/govuk-react-components-library 1.1.0 → 1.2.1

package/dist/index.cjs.js

@@ -2,8 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var govukFrontend = require('govuk-frontend');
-var reactRouterDom = require('react-router-dom');
-var React = require('react');
+var React3 = require('react');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -22,7 +21,7 @@ function _interopNamespaceDefault(e) {
     return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React3__namespace = /*#__PURE__*/_interopNamespaceDefault(React3);
 
 function ConfigureOverallAccordion($scope, config) {
     if (JSON.stringify(config) === JSON.stringify({})) {
@@ -98,9 +97,1962 @@ const Accordion = ({ headingLevel: HeadingLevel = "h2", items = [], className, i
     return (jsxRuntime.jsx("div", { ...remainingAttributes, id: id, className: `govuk-accordion ${className || ""}`, "data-module": "govuk-accordion", children: items.filter(Boolean).map((item, index) => (jsxRuntime.jsxs("div", { className: `govuk-accordion__section ${item.expanded ? "govuk-accordion__section--expanded" : ""}`, children: [jsxRuntime.jsxs("div", { className: "govuk-accordion__section-header", children: [jsxRuntime.jsx(HeadingLevel, { className: "govuk-accordion__section-heading", children: jsxRuntime.jsx("span", { className: "govuk-accordion__section-button", id: `${id}-heading-${index + 1}`, children: item.heading?.children }) }), item.summary && (jsxRuntime.jsx("div", { className: "govuk-accordion__section-summary govuk-body", id: `${id}-summary-${index + 1}`, children: item.summary.children }))] }), jsxRuntime.jsx("div", { id: `${id}-content-${index + 1}`, className: "govuk-accordion__section-content", "aria-labelledby": `${id}-heading-${index + 1}`, children: item.content?.children })] }, item.reactListKey || index))) }));
 };
 
+/**
+ * react-router v7.13.2
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+function invariant(value, message) {
+  if (value === false || value === null || typeof value === "undefined") {
+    throw new Error(message);
+  }
+}
+function warning(cond, message) {
+  if (!cond) {
+    if (typeof console !== "undefined") console.warn(message);
+    try {
+      throw new Error(message);
+    } catch (e) {
+    }
+  }
+}
+function createPath({
+  pathname = "/",
+  search = "",
+  hash = ""
+}) {
+  if (search && search !== "?")
+    pathname += search.charAt(0) === "?" ? search : "?" + search;
+  if (hash && hash !== "#")
+    pathname += hash.charAt(0) === "#" ? hash : "#" + hash;
+  return pathname;
+}
+function parsePath(path) {
+  let parsedPath = {};
+  if (path) {
+    let hashIndex = path.indexOf("#");
+    if (hashIndex >= 0) {
+      parsedPath.hash = path.substring(hashIndex);
+      path = path.substring(0, hashIndex);
+    }
+    let searchIndex = path.indexOf("?");
+    if (searchIndex >= 0) {
+      parsedPath.search = path.substring(searchIndex);
+      path = path.substring(0, searchIndex);
+    }
+    if (path) {
+      parsedPath.pathname = path;
+    }
+  }
+  return parsedPath;
+}
+function matchRoutes(routes, locationArg, basename = "/") {
+  return matchRoutesImpl(routes, locationArg, basename, false);
+}
+function matchRoutesImpl(routes, locationArg, basename, allowPartial) {
+  let location = typeof locationArg === "string" ? parsePath(locationArg) : locationArg;
+  let pathname = stripBasename(location.pathname || "/", basename);
+  if (pathname == null) {
+    return null;
+  }
+  let branches = flattenRoutes(routes);
+  rankRouteBranches(branches);
+  let matches = null;
+  for (let i = 0; matches == null && i < branches.length; ++i) {
+    let decoded = decodePath(pathname);
+    matches = matchRouteBranch(
+      branches[i],
+      decoded,
+      allowPartial
+    );
+  }
+  return matches;
+}
+function flattenRoutes(routes, branches = [], parentsMeta = [], parentPath = "", _hasParentOptionalSegments = false) {
+  let flattenRoute = (route, index, hasParentOptionalSegments = _hasParentOptionalSegments, relativePath) => {
+    let meta = {
+      relativePath: relativePath === void 0 ? route.path || "" : relativePath,
+      caseSensitive: route.caseSensitive === true,
+      childrenIndex: index,
+      route
+    };
+    if (meta.relativePath.startsWith("/")) {
+      if (!meta.relativePath.startsWith(parentPath) && hasParentOptionalSegments) {
+        return;
+      }
+      invariant(
+        meta.relativePath.startsWith(parentPath),
+        `Absolute route path "${meta.relativePath}" nested under path "${parentPath}" is not valid. An absolute child route path must start with the combined path of all its parent routes.`
+      );
+      meta.relativePath = meta.relativePath.slice(parentPath.length);
+    }
+    let path = joinPaths([parentPath, meta.relativePath]);
+    let routesMeta = parentsMeta.concat(meta);
+    if (route.children && route.children.length > 0) {
+      invariant(
+        // Our types know better, but runtime JS may not!
+        // @ts-expect-error
+        route.index !== true,
+        `Index routes must not have child routes. Please remove all child routes from route path "${path}".`
+      );
+      flattenRoutes(
+        route.children,
+        branches,
+        routesMeta,
+        path,
+        hasParentOptionalSegments
+      );
+    }
+    if (route.path == null && !route.index) {
+      return;
+    }
+    branches.push({
+      path,
+      score: computeScore(path, route.index),
+      routesMeta
+    });
+  };
+  routes.forEach((route, index) => {
+    if (route.path === "" || !route.path?.includes("?")) {
+      flattenRoute(route, index);
+    } else {
+      for (let exploded of explodeOptionalSegments(route.path)) {
+        flattenRoute(route, index, true, exploded);
+      }
+    }
+  });
+  return branches;
+}
+function explodeOptionalSegments(path) {
+  let segments = path.split("/");
+  if (segments.length === 0) return [];
+  let [first, ...rest] = segments;
+  let isOptional = first.endsWith("?");
+  let required = first.replace(/\?$/, "");
+  if (rest.length === 0) {
+    return isOptional ? [required, ""] : [required];
+  }
+  let restExploded = explodeOptionalSegments(rest.join("/"));
+  let result = [];
+  result.push(
+    ...restExploded.map(
+      (subpath) => subpath === "" ? required : [required, subpath].join("/")
+    )
+  );
+  if (isOptional) {
+    result.push(...restExploded);
+  }
+  return result.map(
+    (exploded) => path.startsWith("/") && exploded === "" ? "/" : exploded
+  );
+}
+function rankRouteBranches(branches) {
+  branches.sort(
+    (a, b) => a.score !== b.score ? b.score - a.score : compareIndexes(
+      a.routesMeta.map((meta) => meta.childrenIndex),
+      b.routesMeta.map((meta) => meta.childrenIndex)
+    )
+  );
+}
+var paramRe = /^:[\w-]+$/;
+var dynamicSegmentValue = 3;
+var indexRouteValue = 2;
+var emptySegmentValue = 1;
+var staticSegmentValue = 10;
+var splatPenalty = -2;
+var isSplat = (s) => s === "*";
+function computeScore(path, index) {
+  let segments = path.split("/");
+  let initialScore = segments.length;
+  if (segments.some(isSplat)) {
+    initialScore += splatPenalty;
+  }
+  if (index) {
+    initialScore += indexRouteValue;
+  }
+  return segments.filter((s) => !isSplat(s)).reduce(
+    (score, segment) => score + (paramRe.test(segment) ? dynamicSegmentValue : segment === "" ? emptySegmentValue : staticSegmentValue),
+    initialScore
+  );
+}
+function compareIndexes(a, b) {
+  let siblings = a.length === b.length && a.slice(0, -1).every((n, i) => n === b[i]);
+  return siblings ? (
+    // If two routes are siblings, we should try to match the earlier sibling
+    // first. This allows people to have fine-grained control over the matching
+    // behavior by simply putting routes with identical paths in the order they
+    // want them tried.
+    a[a.length - 1] - b[b.length - 1]
+  ) : (
+    // Otherwise, it doesn't really make sense to rank non-siblings by index,
+    // so they sort equally.
+    0
+  );
+}
+function matchRouteBranch(branch, pathname, allowPartial = false) {
+  let { routesMeta } = branch;
+  let matchedParams = {};
+  let matchedPathname = "/";
+  let matches = [];
+  for (let i = 0; i < routesMeta.length; ++i) {
+    let meta = routesMeta[i];
+    let end = i === routesMeta.length - 1;
+    let remainingPathname = matchedPathname === "/" ? pathname : pathname.slice(matchedPathname.length) || "/";
+    let match = matchPath(
+      { path: meta.relativePath, caseSensitive: meta.caseSensitive, end },
+      remainingPathname
+    );
+    let route = meta.route;
+    if (!match && end && allowPartial && !routesMeta[routesMeta.length - 1].route.index) {
+      match = matchPath(
+        {
+          path: meta.relativePath,
+          caseSensitive: meta.caseSensitive,
+          end: false
+        },
+        remainingPathname
+      );
+    }
+    if (!match) {
+      return null;
+    }
+    Object.assign(matchedParams, match.params);
+    matches.push({
+      // TODO: Can this as be avoided?
+      params: matchedParams,
+      pathname: joinPaths([matchedPathname, match.pathname]),
+      pathnameBase: normalizePathname(
+        joinPaths([matchedPathname, match.pathnameBase])
+      ),
+      route
+    });
+    if (match.pathnameBase !== "/") {
+      matchedPathname = joinPaths([matchedPathname, match.pathnameBase]);
+    }
+  }
+  return matches;
+}
+function matchPath(pattern, pathname) {
+  if (typeof pattern === "string") {
+    pattern = { path: pattern, caseSensitive: false, end: true };
+  }
+  let [matcher, compiledParams] = compilePath(
+    pattern.path,
+    pattern.caseSensitive,
+    pattern.end
+  );
+  let match = pathname.match(matcher);
+  if (!match) return null;
+  let matchedPathname = match[0];
+  let pathnameBase = matchedPathname.replace(/(.)\/+$/, "$1");
+  let captureGroups = match.slice(1);
+  let params = compiledParams.reduce(
+    (memo2, { paramName, isOptional }, index) => {
+      if (paramName === "*") {
+        let splatValue = captureGroups[index] || "";
+        pathnameBase = matchedPathname.slice(0, matchedPathname.length - splatValue.length).replace(/(.)\/+$/, "$1");
+      }
+      const value = captureGroups[index];
+      if (isOptional && !value) {
+        memo2[paramName] = void 0;
+      } else {
+        memo2[paramName] = (value || "").replace(/%2F/g, "/");
+      }
+      return memo2;
+    },
+    {}
+  );
+  return {
+    params,
+    pathname: matchedPathname,
+    pathnameBase,
+    pattern
+  };
+}
+function compilePath(path, caseSensitive = false, end = true) {
+  warning(
+    path === "*" || !path.endsWith("*") || path.endsWith("/*"),
+    `Route path "${path}" will be treated as if it were "${path.replace(/\*$/, "/*")}" because the \`*\` character must always follow a \`/\` in the pattern. To get rid of this warning, please change the route path to "${path.replace(/\*$/, "/*")}".`
+  );
+  let params = [];
+  let regexpSource = "^" + path.replace(/\/*\*?$/, "").replace(/^\/*/, "/").replace(/[\\.*+^${}|()[\]]/g, "\\$&").replace(
+    /\/:([\w-]+)(\?)?/g,
+    (match, paramName, isOptional, index, str) => {
+      params.push({ paramName, isOptional: isOptional != null });
+      if (isOptional) {
+        let nextChar = str.charAt(index + match.length);
+        if (nextChar && nextChar !== "/") {
+          return "/([^\\/]*)";
+        }
+        return "(?:/([^\\/]*))?";
+      }
+      return "/([^\\/]+)";
+    }
+  ).replace(/\/([\w-]+)\?(\/|$)/g, "(/$1)?$2");
+  if (path.endsWith("*")) {
+    params.push({ paramName: "*" });
+    regexpSource += path === "*" || path === "/*" ? "(.*)$" : "(?:\\/(.+)|\\/*)$";
+  } else if (end) {
+    regexpSource += "\\/*$";
+  } else if (path !== "" && path !== "/") {
+    regexpSource += "(?:(?=\\/|$))";
+  } else ;
+  let matcher = new RegExp(regexpSource, caseSensitive ? void 0 : "i");
+  return [matcher, params];
+}
+function decodePath(value) {
+  try {
+    return value.split("/").map((v) => decodeURIComponent(v).replace(/\//g, "%2F")).join("/");
+  } catch (error) {
+    warning(
+      false,
+      `The URL path "${value}" could not be decoded because it is a malformed URL segment. This is probably due to a bad percent encoding (${error}).`
+    );
+    return value;
+  }
+}
+function stripBasename(pathname, basename) {
+  if (basename === "/") return pathname;
+  if (!pathname.toLowerCase().startsWith(basename.toLowerCase())) {
+    return null;
+  }
+  let startIndex = basename.endsWith("/") ? basename.length - 1 : basename.length;
+  let nextChar = pathname.charAt(startIndex);
+  if (nextChar && nextChar !== "/") {
+    return null;
+  }
+  return pathname.slice(startIndex) || "/";
+}
+var ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
+function resolvePath(to, fromPathname = "/") {
+  let {
+    pathname: toPathname,
+    search = "",
+    hash = ""
+  } = typeof to === "string" ? parsePath(to) : to;
+  let pathname;
+  if (toPathname) {
+    toPathname = toPathname.replace(/\/\/+/g, "/");
+    if (toPathname.startsWith("/")) {
+      pathname = resolvePathname(toPathname.substring(1), "/");
+    } else {
+      pathname = resolvePathname(toPathname, fromPathname);
+    }
+  } else {
+    pathname = fromPathname;
+  }
+  return {
+    pathname,
+    search: normalizeSearch(search),
+    hash: normalizeHash(hash)
+  };
+}
+function resolvePathname(relativePath, fromPathname) {
+  let segments = fromPathname.replace(/\/+$/, "").split("/");
+  let relativeSegments = relativePath.split("/");
+  relativeSegments.forEach((segment) => {
+    if (segment === "..") {
+      if (segments.length > 1) segments.pop();
+    } else if (segment !== ".") {
+      segments.push(segment);
+    }
+  });
+  return segments.length > 1 ? segments.join("/") : "/";
+}
+function getInvalidPathError(char, field, dest, path) {
+  return `Cannot include a '${char}' character in a manually specified \`to.${field}\` field [${JSON.stringify(
+    path
+  )}].  Please separate it out to the \`to.${dest}\` field. Alternatively you may provide the full path as a string in <Link to="..."> and the router will parse it for you.`;
+}
+function getPathContributingMatches(matches) {
+  return matches.filter(
+    (match, index) => index === 0 || match.route.path && match.route.path.length > 0
+  );
+}
+function getResolveToMatches(matches) {
+  let pathMatches = getPathContributingMatches(matches);
+  return pathMatches.map(
+    (match, idx) => idx === pathMatches.length - 1 ? match.pathname : match.pathnameBase
+  );
+}
+function resolveTo(toArg, routePathnames, locationPathname, isPathRelative = false) {
+  let to;
+  if (typeof toArg === "string") {
+    to = parsePath(toArg);
+  } else {
+    to = { ...toArg };
+    invariant(
+      !to.pathname || !to.pathname.includes("?"),
+      getInvalidPathError("?", "pathname", "search", to)
+    );
+    invariant(
+      !to.pathname || !to.pathname.includes("#"),
+      getInvalidPathError("#", "pathname", "hash", to)
+    );
+    invariant(
+      !to.search || !to.search.includes("#"),
+      getInvalidPathError("#", "search", "hash", to)
+    );
+  }
+  let isEmptyPath = toArg === "" || to.pathname === "";
+  let toPathname = isEmptyPath ? "/" : to.pathname;
+  let from;
+  if (toPathname == null) {
+    from = locationPathname;
+  } else {
+    let routePathnameIndex = routePathnames.length - 1;
+    if (!isPathRelative && toPathname.startsWith("..")) {
+      let toSegments = toPathname.split("/");
+      while (toSegments[0] === "..") {
+        toSegments.shift();
+        routePathnameIndex -= 1;
+      }
+      to.pathname = toSegments.join("/");
+    }
+    from = routePathnameIndex >= 0 ? routePathnames[routePathnameIndex] : "/";
+  }
+  let path = resolvePath(to, from);
+  let hasExplicitTrailingSlash = toPathname && toPathname !== "/" && toPathname.endsWith("/");
+  let hasCurrentTrailingSlash = (isEmptyPath || toPathname === ".") && locationPathname.endsWith("/");
+  if (!path.pathname.endsWith("/") && (hasExplicitTrailingSlash || hasCurrentTrailingSlash)) {
+    path.pathname += "/";
+  }
+  return path;
+}
+var joinPaths = (paths) => paths.join("/").replace(/\/\/+/g, "/");
+var normalizePathname = (pathname) => pathname.replace(/\/+$/, "").replace(/^\/*/, "/");
+var normalizeSearch = (search) => !search || search === "?" ? "" : search.startsWith("?") ? search : "?" + search;
+var normalizeHash = (hash) => !hash || hash === "#" ? "" : hash.startsWith("#") ? hash : "#" + hash;
+var ErrorResponseImpl = class {
+  constructor(status, statusText, data2, internal = false) {
+    this.status = status;
+    this.statusText = statusText || "";
+    this.internal = internal;
+    if (data2 instanceof Error) {
+      this.data = data2.toString();
+      this.error = data2;
+    } else {
+      this.data = data2;
+    }
+  }
+};
+function isRouteErrorResponse(error) {
+  return error != null && typeof error.status === "number" && typeof error.statusText === "string" && typeof error.internal === "boolean" && "data" in error;
+}
+function getRoutePattern(matches) {
+  return matches.map((m) => m.route.path).filter(Boolean).join("/").replace(/\/\/*/g, "/") || "/";
+}
+var isBrowser = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+function parseToInfo(_to, basename) {
+  let to = _to;
+  if (typeof to !== "string" || !ABSOLUTE_URL_REGEX.test(to)) {
+    return {
+      absoluteURL: void 0,
+      isExternal: false,
+      to
+    };
+  }
+  let absoluteURL = to;
+  let isExternal = false;
+  if (isBrowser) {
+    try {
+      let currentUrl = new URL(window.location.href);
+      let targetUrl = to.startsWith("//") ? new URL(currentUrl.protocol + to) : new URL(to);
+      let path = stripBasename(targetUrl.pathname, basename);
+      if (targetUrl.origin === currentUrl.origin && path != null) {
+        to = path + targetUrl.search + targetUrl.hash;
+      } else {
+        isExternal = true;
+      }
+    } catch (e) {
+      warning(
+        false,
+        `<Link to="${to}"> contains an invalid URL which will probably break when clicked - please update to a valid URL path.`
+      );
+    }
+  }
+  return {
+    absoluteURL,
+    isExternal,
+    to
+  };
+}
+Object.getOwnPropertyNames(Object.prototype).sort().join("\0");
+
+// lib/router/router.ts
+var validMutationMethodsArr = [
+  "POST",
+  "PUT",
+  "PATCH",
+  "DELETE"
+];
+new Set(
+  validMutationMethodsArr
+);
+var validRequestMethodsArr = [
+  "GET",
+  ...validMutationMethodsArr
+];
+new Set(validRequestMethodsArr);
+var DataRouterContext = React3__namespace.createContext(null);
+DataRouterContext.displayName = "DataRouter";
+var DataRouterStateContext = React3__namespace.createContext(null);
+DataRouterStateContext.displayName = "DataRouterState";
+var RSCRouterContext = React3__namespace.createContext(false);
+var ViewTransitionContext = React3__namespace.createContext({
+  isTransitioning: false
+});
+ViewTransitionContext.displayName = "ViewTransition";
+var FetchersContext = React3__namespace.createContext(
+  /* @__PURE__ */ new Map()
+);
+FetchersContext.displayName = "Fetchers";
+var AwaitContext = React3__namespace.createContext(null);
+AwaitContext.displayName = "Await";
+var NavigationContext = React3__namespace.createContext(
+  null
+);
+NavigationContext.displayName = "Navigation";
+var LocationContext = React3__namespace.createContext(
+  null
+);
+LocationContext.displayName = "Location";
+var RouteContext = React3__namespace.createContext({
+  outlet: null,
+  matches: [],
+  isDataRoute: false
+});
+RouteContext.displayName = "Route";
+var RouteErrorContext = React3__namespace.createContext(null);
+RouteErrorContext.displayName = "RouteError";
+
+// lib/errors.ts
+var ERROR_DIGEST_BASE = "REACT_ROUTER_ERROR";
+var ERROR_DIGEST_REDIRECT = "REDIRECT";
+var ERROR_DIGEST_ROUTE_ERROR_RESPONSE = "ROUTE_ERROR_RESPONSE";
+function decodeRedirectErrorDigest(digest) {
+  if (digest.startsWith(`${ERROR_DIGEST_BASE}:${ERROR_DIGEST_REDIRECT}:{`)) {
+    try {
+      let parsed = JSON.parse(digest.slice(28));
+      if (typeof parsed === "object" && parsed && typeof parsed.status === "number" && typeof parsed.statusText === "string" && typeof parsed.location === "string" && typeof parsed.reloadDocument === "boolean" && typeof parsed.replace === "boolean") {
+        return parsed;
+      }
+    } catch {
+    }
+  }
+}
+function decodeRouteErrorResponseDigest(digest) {
+  if (digest.startsWith(
+    `${ERROR_DIGEST_BASE}:${ERROR_DIGEST_ROUTE_ERROR_RESPONSE}:{`
+  )) {
+    try {
+      let parsed = JSON.parse(digest.slice(40));
+      if (typeof parsed === "object" && parsed && typeof parsed.status === "number" && typeof parsed.statusText === "string") {
+        return new ErrorResponseImpl(
+          parsed.status,
+          parsed.statusText,
+          parsed.data
+        );
+      }
+    } catch {
+    }
+  }
+}
+
+// lib/hooks.tsx
+function useHref(to, { relative } = {}) {
+  invariant(
+    useInRouterContext(),
+    // TODO: This error is probably because they somehow have 2 versions of the
+    // router loaded. We can help them understand how to avoid that.
+    `useHref() may be used only in the context of a <Router> component.`
+  );
+  let { basename, navigator } = React3__namespace.useContext(NavigationContext);
+  let { hash, pathname, search } = useResolvedPath(to, { relative });
+  let joinedPathname = pathname;
+  if (basename !== "/") {
+    joinedPathname = pathname === "/" ? basename : joinPaths([basename, pathname]);
+  }
+  return navigator.createHref({ pathname: joinedPathname, search, hash });
+}
+function useInRouterContext() {
+  return React3__namespace.useContext(LocationContext) != null;
+}
+function useLocation() {
+  invariant(
+    useInRouterContext(),
+    // TODO: This error is probably because they somehow have 2 versions of the
+    // router loaded. We can help them understand how to avoid that.
+    `useLocation() may be used only in the context of a <Router> component.`
+  );
+  return React3__namespace.useContext(LocationContext).location;
+}
+var navigateEffectWarning = `You should call navigate() in a React.useEffect(), not when your component is first rendered.`;
+function useIsomorphicLayoutEffect(cb) {
+  let isStatic = React3__namespace.useContext(NavigationContext).static;
+  if (!isStatic) {
+    React3__namespace.useLayoutEffect(cb);
+  }
+}
+function useNavigate() {
+  let { isDataRoute } = React3__namespace.useContext(RouteContext);
+  return isDataRoute ? useNavigateStable() : useNavigateUnstable();
+}
+function useNavigateUnstable() {
+  invariant(
+    useInRouterContext(),
+    // TODO: This error is probably because they somehow have 2 versions of the
+    // router loaded. We can help them understand how to avoid that.
+    `useNavigate() may be used only in the context of a <Router> component.`
+  );
+  let dataRouterContext = React3__namespace.useContext(DataRouterContext);
+  let { basename, navigator } = React3__namespace.useContext(NavigationContext);
+  let { matches } = React3__namespace.useContext(RouteContext);
+  let { pathname: locationPathname } = useLocation();
+  let routePathnamesJson = JSON.stringify(getResolveToMatches(matches));
+  let activeRef = React3__namespace.useRef(false);
+  useIsomorphicLayoutEffect(() => {
+    activeRef.current = true;
+  });
+  let navigate = React3__namespace.useCallback(
+    (to, options = {}) => {
+      warning(activeRef.current, navigateEffectWarning);
+      if (!activeRef.current) return;
+      if (typeof to === "number") {
+        navigator.go(to);
+        return;
+      }
+      let path = resolveTo(
+        to,
+        JSON.parse(routePathnamesJson),
+        locationPathname,
+        options.relative === "path"
+      );
+      if (dataRouterContext == null && basename !== "/") {
+        path.pathname = path.pathname === "/" ? basename : joinPaths([basename, path.pathname]);
+      }
+      (!!options.replace ? navigator.replace : navigator.push)(
+        path,
+        options.state,
+        options
+      );
+    },
+    [
+      basename,
+      navigator,
+      routePathnamesJson,
+      locationPathname,
+      dataRouterContext
+    ]
+  );
+  return navigate;
+}
+React3__namespace.createContext(null);
+function useResolvedPath(to, { relative } = {}) {
+  let { matches } = React3__namespace.useContext(RouteContext);
+  let { pathname: locationPathname } = useLocation();
+  let routePathnamesJson = JSON.stringify(getResolveToMatches(matches));
+  return React3__namespace.useMemo(
+    () => resolveTo(
+      to,
+      JSON.parse(routePathnamesJson),
+      locationPathname,
+      relative === "path"
+    ),
+    [to, routePathnamesJson, locationPathname, relative]
+  );
+}
+function useRoutesImpl(routes, locationArg, dataRouterOpts) {
+  invariant(
+    useInRouterContext(),
+    // TODO: This error is probably because they somehow have 2 versions of the
+    // router loaded. We can help them understand how to avoid that.
+    `useRoutes() may be used only in the context of a <Router> component.`
+  );
+  let { navigator } = React3__namespace.useContext(NavigationContext);
+  let { matches: parentMatches } = React3__namespace.useContext(RouteContext);
+  let routeMatch = parentMatches[parentMatches.length - 1];
+  let parentParams = routeMatch ? routeMatch.params : {};
+  let parentPathname = routeMatch ? routeMatch.pathname : "/";
+  let parentPathnameBase = routeMatch ? routeMatch.pathnameBase : "/";
+  let parentRoute = routeMatch && routeMatch.route;
+  {
+    let parentPath = parentRoute && parentRoute.path || "";
+    warningOnce(
+      parentPathname,
+      !parentRoute || parentPath.endsWith("*") || parentPath.endsWith("*?"),
+      `You rendered descendant <Routes> (or called \`useRoutes()\`) at "${parentPathname}" (under <Route path="${parentPath}">) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render.
+
+Please change the parent <Route path="${parentPath}"> to <Route path="${parentPath === "/" ? "*" : `${parentPath}/*`}">.`
+    );
+  }
+  let locationFromContext = useLocation();
+  let location;
+  {
+    location = locationFromContext;
+  }
+  let pathname = location.pathname || "/";
+  let remainingPathname = pathname;
+  if (parentPathnameBase !== "/") {
+    let parentSegments = parentPathnameBase.replace(/^\//, "").split("/");
+    let segments = pathname.replace(/^\//, "").split("/");
+    remainingPathname = "/" + segments.slice(parentSegments.length).join("/");
+  }
+  let matches = matchRoutes(routes, { pathname: remainingPathname });
+  {
+    warning(
+      parentRoute || matches != null,
+      `No routes matched location "${location.pathname}${location.search}${location.hash}" `
+    );
+    warning(
+      matches == null || matches[matches.length - 1].route.element !== void 0 || matches[matches.length - 1].route.Component !== void 0 || matches[matches.length - 1].route.lazy !== void 0,
+      `Matched leaf route at location "${location.pathname}${location.search}${location.hash}" does not have an element or Component. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.`
+    );
+  }
+  let renderedMatches = _renderMatches(
+    matches && matches.map(
+      (match) => Object.assign({}, match, {
+        params: Object.assign({}, parentParams, match.params),
+        pathname: joinPaths([
+          parentPathnameBase,
+          // Re-encode pathnames that were decoded inside matchRoutes.
+          // Pre-encode `%`, `?` and `#` ahead of `encodeLocation` because it uses
+          // `new URL()` internally and we need to prevent it from treating
+          // them as separators
+          navigator.encodeLocation ? navigator.encodeLocation(
+            match.pathname.replace(/%/g, "%25").replace(/\?/g, "%3F").replace(/#/g, "%23")
+          ).pathname : match.pathname
+        ]),
+        pathnameBase: match.pathnameBase === "/" ? parentPathnameBase : joinPaths([
+          parentPathnameBase,
+          // Re-encode pathnames that were decoded inside matchRoutes
+          // Pre-encode `%`, `?` and `#` ahead of `encodeLocation` because it uses
+          // `new URL()` internally and we need to prevent it from treating
+          // them as separators
+          navigator.encodeLocation ? navigator.encodeLocation(
+            match.pathnameBase.replace(/%/g, "%25").replace(/\?/g, "%3F").replace(/#/g, "%23")
+          ).pathname : match.pathnameBase
+        ])
+      })
+    ),
+    parentMatches,
+    dataRouterOpts
+  );
+  return renderedMatches;
+}
+function DefaultErrorComponent() {
+  let error = useRouteError();
+  let message = isRouteErrorResponse(error) ? `${error.status} ${error.statusText}` : error instanceof Error ? error.message : JSON.stringify(error);
+  let stack = error instanceof Error ? error.stack : null;
+  let lightgrey = "rgba(200,200,200, 0.5)";
+  let preStyles = { padding: "0.5rem", backgroundColor: lightgrey };
+  let codeStyles = { padding: "2px 4px", backgroundColor: lightgrey };
+  let devInfo = null;
+  {
+    console.error(
+      "Error handled by React Router default ErrorBoundary:",
+      error
+    );
+    devInfo = /* @__PURE__ */ React3__namespace.createElement(React3__namespace.Fragment, null, /* @__PURE__ */ React3__namespace.createElement("p", null, "\u{1F4BF} Hey developer \u{1F44B}"), /* @__PURE__ */ React3__namespace.createElement("p", null, "You can provide a way better UX than this when your app throws errors by providing your own ", /* @__PURE__ */ React3__namespace.createElement("code", { style: codeStyles }, "ErrorBoundary"), " or", " ", /* @__PURE__ */ React3__namespace.createElement("code", { style: codeStyles }, "errorElement"), " prop on your route."));
+  }
+  return /* @__PURE__ */ React3__namespace.createElement(React3__namespace.Fragment, null, /* @__PURE__ */ React3__namespace.createElement("h2", null, "Unexpected Application Error!"), /* @__PURE__ */ React3__namespace.createElement("h3", { style: { fontStyle: "italic" } }, message), stack ? /* @__PURE__ */ React3__namespace.createElement("pre", { style: preStyles }, stack) : null, devInfo);
+}
+var defaultErrorElement = /* @__PURE__ */ React3__namespace.createElement(DefaultErrorComponent, null);
+var RenderErrorBoundary = class extends React3__namespace.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      location: props.location,
+      revalidation: props.revalidation,
+      error: props.error
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  static getDerivedStateFromProps(props, state) {
+    if (state.location !== props.location || state.revalidation !== "idle" && props.revalidation === "idle") {
+      return {
+        error: props.error,
+        location: props.location,
+        revalidation: props.revalidation
+      };
+    }
+    return {
+      error: props.error !== void 0 ? props.error : state.error,
+      location: state.location,
+      revalidation: props.revalidation || state.revalidation
+    };
+  }
+  componentDidCatch(error, errorInfo) {
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo);
+    } else {
+      console.error(
+        "React Router caught the following error during render",
+        error
+      );
+    }
+  }
+  render() {
+    let error = this.state.error;
+    if (this.context && typeof error === "object" && error && "digest" in error && typeof error.digest === "string") {
+      const decoded = decodeRouteErrorResponseDigest(error.digest);
+      if (decoded) error = decoded;
+    }
+    let result = error !== void 0 ? /* @__PURE__ */ React3__namespace.createElement(RouteContext.Provider, { value: this.props.routeContext }, /* @__PURE__ */ React3__namespace.createElement(
+      RouteErrorContext.Provider,
+      {
+        value: error,
+        children: this.props.component
+      }
+    )) : this.props.children;
+    if (this.context) {
+      return /* @__PURE__ */ React3__namespace.createElement(RSCErrorHandler, { error }, result);
+    }
+    return result;
+  }
+};
+RenderErrorBoundary.contextType = RSCRouterContext;
+var errorRedirectHandledMap = /* @__PURE__ */ new WeakMap();
+function RSCErrorHandler({
+  children,
+  error
+}) {
+  let { basename } = React3__namespace.useContext(NavigationContext);
+  if (typeof error === "object" && error && "digest" in error && typeof error.digest === "string") {
+    let redirect2 = decodeRedirectErrorDigest(error.digest);
+    if (redirect2) {
+      let existingRedirect = errorRedirectHandledMap.get(error);
+      if (existingRedirect) throw existingRedirect;
+      let parsed = parseToInfo(redirect2.location, basename);
+      if (isBrowser && !errorRedirectHandledMap.get(error)) {
+        if (parsed.isExternal || redirect2.reloadDocument) {
+          window.location.href = parsed.absoluteURL || parsed.to;
+        } else {
+          const redirectPromise = Promise.resolve().then(
+            () => window.__reactRouterDataRouter.navigate(parsed.to, {
+              replace: redirect2.replace
+            })
+          );
+          errorRedirectHandledMap.set(error, redirectPromise);
+          throw redirectPromise;
+        }
+      }
+      return /* @__PURE__ */ React3__namespace.createElement(
+        "meta",
+        {
+          httpEquiv: "refresh",
+          content: `0;url=${parsed.absoluteURL || parsed.to}`
+        }
+      );
+    }
+  }
+  return children;
+}
+function RenderedRoute({ routeContext, match, children }) {
+  let dataRouterContext = React3__namespace.useContext(DataRouterContext);
+  if (dataRouterContext && dataRouterContext.static && dataRouterContext.staticContext && (match.route.errorElement || match.route.ErrorBoundary)) {
+    dataRouterContext.staticContext._deepestRenderedBoundaryId = match.route.id;
+  }
+  return /* @__PURE__ */ React3__namespace.createElement(RouteContext.Provider, { value: routeContext }, children);
+}
+function _renderMatches(matches, parentMatches = [], dataRouterOpts) {
+  let dataRouterState = dataRouterOpts?.state;
+  if (matches == null) {
+    if (!dataRouterState) {
+      return null;
+    }
+    if (dataRouterState.errors) {
+      matches = dataRouterState.matches;
+    } else if (parentMatches.length === 0 && !dataRouterState.initialized && dataRouterState.matches.length > 0) {
+      matches = dataRouterState.matches;
+    } else {
+      return null;
+    }
+  }
+  let renderedMatches = matches;
+  let errors = dataRouterState?.errors;
+  if (errors != null) {
+    let errorIndex = renderedMatches.findIndex(
+      (m) => m.route.id && errors?.[m.route.id] !== void 0
+    );
+    invariant(
+      errorIndex >= 0,
+      `Could not find a matching route for errors on route IDs: ${Object.keys(
+        errors
+      ).join(",")}`
+    );
+    renderedMatches = renderedMatches.slice(
+      0,
+      Math.min(renderedMatches.length, errorIndex + 1)
+    );
+  }
+  let renderFallback = false;
+  let fallbackIndex = -1;
+  if (dataRouterOpts && dataRouterState) {
+    renderFallback = dataRouterState.renderFallback;
+    for (let i = 0; i < renderedMatches.length; i++) {
+      let match = renderedMatches[i];
+      if (match.route.HydrateFallback || match.route.hydrateFallbackElement) {
+        fallbackIndex = i;
+      }
+      if (match.route.id) {
+        let { loaderData, errors: errors2 } = dataRouterState;
+        let needsToRunLoader = match.route.loader && !loaderData.hasOwnProperty(match.route.id) && (!errors2 || errors2[match.route.id] === void 0);
+        if (match.route.lazy || needsToRunLoader) {
+          if (dataRouterOpts.isStatic) {
+            renderFallback = true;
+          }
+          if (fallbackIndex >= 0) {
+            renderedMatches = renderedMatches.slice(0, fallbackIndex + 1);
+          } else {
+            renderedMatches = [renderedMatches[0]];
+          }
+          break;
+        }
+      }
+    }
+  }
+  let onErrorHandler = dataRouterOpts?.onError;
+  let onError = dataRouterState && onErrorHandler ? (error, errorInfo) => {
+    onErrorHandler(error, {
+      location: dataRouterState.location,
+      params: dataRouterState.matches?.[0]?.params ?? {},
+      unstable_pattern: getRoutePattern(dataRouterState.matches),
+      errorInfo
+    });
+  } : void 0;
+  return renderedMatches.reduceRight(
+    (outlet, match, index) => {
+      let error;
+      let shouldRenderHydrateFallback = false;
+      let errorElement = null;
+      let hydrateFallbackElement = null;
+      if (dataRouterState) {
+        error = errors && match.route.id ? errors[match.route.id] : void 0;
+        errorElement = match.route.errorElement || defaultErrorElement;
+        if (renderFallback) {
+          if (fallbackIndex < 0 && index === 0) {
+            warningOnce(
+              "route-fallback",
+              false,
+              "No `HydrateFallback` element provided to render during initial hydration"
+            );
+            shouldRenderHydrateFallback = true;
+            hydrateFallbackElement = null;
+          } else if (fallbackIndex === index) {
+            shouldRenderHydrateFallback = true;
+            hydrateFallbackElement = match.route.hydrateFallbackElement || null;
+          }
+        }
+      }
+      let matches2 = parentMatches.concat(renderedMatches.slice(0, index + 1));
+      let getChildren = () => {
+        let children;
+        if (error) {
+          children = errorElement;
+        } else if (shouldRenderHydrateFallback) {
+          children = hydrateFallbackElement;
+        } else if (match.route.Component) {
+          children = /* @__PURE__ */ React3__namespace.createElement(match.route.Component, null);
+        } else if (match.route.element) {
+          children = match.route.element;
+        } else {
+          children = outlet;
+        }
+        return /* @__PURE__ */ React3__namespace.createElement(
+          RenderedRoute,
+          {
+            match,
+            routeContext: {
+              outlet,
+              matches: matches2,
+              isDataRoute: dataRouterState != null
+            },
+            children
+          }
+        );
+      };
+      return dataRouterState && (match.route.ErrorBoundary || match.route.errorElement || index === 0) ? /* @__PURE__ */ React3__namespace.createElement(
+        RenderErrorBoundary,
+        {
+          location: dataRouterState.location,
+          revalidation: dataRouterState.revalidation,
+          component: errorElement,
+          error,
+          children: getChildren(),
+          routeContext: { outlet: null, matches: matches2, isDataRoute: true },
+          onError
+        }
+      ) : getChildren();
+    },
+    null
+  );
+}
+function getDataRouterConsoleError(hookName) {
+  return `${hookName} must be used within a data router.  See https://reactrouter.com/en/main/routers/picking-a-router.`;
+}
+function useDataRouterContext(hookName) {
+  let ctx = React3__namespace.useContext(DataRouterContext);
+  invariant(ctx, getDataRouterConsoleError(hookName));
+  return ctx;
+}
+function useDataRouterState(hookName) {
+  let state = React3__namespace.useContext(DataRouterStateContext);
+  invariant(state, getDataRouterConsoleError(hookName));
+  return state;
+}
+function useRouteContext(hookName) {
+  let route = React3__namespace.useContext(RouteContext);
+  invariant(route, getDataRouterConsoleError(hookName));
+  return route;
+}
+function useCurrentRouteId(hookName) {
+  let route = useRouteContext(hookName);
+  let thisRoute = route.matches[route.matches.length - 1];
+  invariant(
+    thisRoute.route.id,
+    `${hookName} can only be used on routes that contain a unique "id"`
+  );
+  return thisRoute.route.id;
+}
+function useRouteId() {
+  return useCurrentRouteId("useRouteId" /* UseRouteId */);
+}
+function useRouteError() {
+  let error = React3__namespace.useContext(RouteErrorContext);
+  let state = useDataRouterState("useRouteError" /* UseRouteError */);
+  let routeId = useCurrentRouteId("useRouteError" /* UseRouteError */);
+  if (error !== void 0) {
+    return error;
+  }
+  return state.errors?.[routeId];
+}
+function useNavigateStable() {
+  let { router } = useDataRouterContext("useNavigate" /* UseNavigateStable */);
+  let id = useCurrentRouteId("useNavigate" /* UseNavigateStable */);
+  let activeRef = React3__namespace.useRef(false);
+  useIsomorphicLayoutEffect(() => {
+    activeRef.current = true;
+  });
+  let navigate = React3__namespace.useCallback(
+    async (to, options = {}) => {
+      warning(activeRef.current, navigateEffectWarning);
+      if (!activeRef.current) return;
+      if (typeof to === "number") {
+        await router.navigate(to);
+      } else {
+        await router.navigate(to, { fromRouteId: id, ...options });
+      }
+    },
+    [router, id]
+  );
+  return navigate;
+}
+var alreadyWarned = {};
+function warningOnce(key, cond, message) {
+  if (!cond && !alreadyWarned[key]) {
+    alreadyWarned[key] = true;
+    warning(false, message);
+  }
+}
+React3__namespace.memo(DataRoutes);
+function DataRoutes({
+  routes,
+  future,
+  state,
+  isStatic,
+  onError
+}) {
+  return useRoutesImpl(routes, void 0, { state, isStatic, onError});
+}
+
+// lib/dom/dom.ts
+var defaultMethod = "get";
+var defaultEncType = "application/x-www-form-urlencoded";
+function isHtmlElement(object) {
+  return typeof HTMLElement !== "undefined" && object instanceof HTMLElement;
+}
+function isButtonElement(object) {
+  return isHtmlElement(object) && object.tagName.toLowerCase() === "button";
+}
+function isFormElement(object) {
+  return isHtmlElement(object) && object.tagName.toLowerCase() === "form";
+}
+function isInputElement(object) {
+  return isHtmlElement(object) && object.tagName.toLowerCase() === "input";
+}
+function isModifiedEvent(event) {
+  return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+}
+function shouldProcessLinkClick(event, target) {
+  return event.button === 0 && // Ignore everything but left clicks
+  (!target || target === "_self") && // Let browser handle "target=_blank" etc.
+  !isModifiedEvent(event);
+}
+var _formDataSupportsSubmitter = null;
+function isFormDataSubmitterSupported() {
+  if (_formDataSupportsSubmitter === null) {
+    try {
+      new FormData(
+        document.createElement("form"),
+        // @ts-expect-error if FormData supports the submitter parameter, this will throw
+        0
+      );
+      _formDataSupportsSubmitter = false;
+    } catch (e) {
+      _formDataSupportsSubmitter = true;
+    }
+  }
+  return _formDataSupportsSubmitter;
+}
+var supportedFormEncTypes = /* @__PURE__ */ new Set([
+  "application/x-www-form-urlencoded",
+  "multipart/form-data",
+  "text/plain"
+]);
+function getFormEncType(encType) {
+  if (encType != null && !supportedFormEncTypes.has(encType)) {
+    warning(
+      false,
+      `"${encType}" is not a valid \`encType\` for \`<Form>\`/\`<fetcher.Form>\` and will default to "${defaultEncType}"`
+    );
+    return null;
+  }
+  return encType;
+}
+function getFormSubmissionInfo(target, basename) {
+  let method;
+  let action;
+  let encType;
+  let formData;
+  let body;
+  if (isFormElement(target)) {
+    let attr = target.getAttribute("action");
+    action = attr ? stripBasename(attr, basename) : null;
+    method = target.getAttribute("method") || defaultMethod;
+    encType = getFormEncType(target.getAttribute("enctype")) || defaultEncType;
+    formData = new FormData(target);
+  } else if (isButtonElement(target) || isInputElement(target) && (target.type === "submit" || target.type === "image")) {
+    let form = target.form;
+    if (form == null) {
+      throw new Error(
+        `Cannot submit a <button> or <input type="submit"> without a <form>`
+      );
+    }
+    let attr = target.getAttribute("formaction") || form.getAttribute("action");
+    action = attr ? stripBasename(attr, basename) : null;
+    method = target.getAttribute("formmethod") || form.getAttribute("method") || defaultMethod;
+    encType = getFormEncType(target.getAttribute("formenctype")) || getFormEncType(form.getAttribute("enctype")) || defaultEncType;
+    formData = new FormData(form, target);
+    if (!isFormDataSubmitterSupported()) {
+      let { name, type, value } = target;
+      if (type === "image") {
+        let prefix = name ? `${name}.` : "";
+        formData.append(`${prefix}x`, "0");
+        formData.append(`${prefix}y`, "0");
+      } else if (name) {
+        formData.append(name, value);
+      }
+    }
+  } else if (isHtmlElement(target)) {
+    throw new Error(
+      `Cannot submit element that is not <form>, <button>, or <input type="submit|image">`
+    );
+  } else {
+    method = defaultMethod;
+    action = null;
+    encType = defaultEncType;
+    body = target;
+  }
+  if (formData && encType === "text/plain") {
+    body = formData;
+    formData = void 0;
+  }
+  return { action, method: method.toLowerCase(), encType, formData, body };
+}
+Object.getOwnPropertyNames(Object.prototype).sort().join("\0");
+
+// lib/dom/ssr/invariant.ts
+function invariant2(value, message) {
+  if (value === false || value === null || typeof value === "undefined") {
+    throw new Error(message);
+  }
+}
+function singleFetchUrl(reqUrl, basename, trailingSlashAware, extension) {
+  let url = typeof reqUrl === "string" ? new URL(
+    reqUrl,
+    // This can be called during the SSR flow via PrefetchPageLinksImpl so
+    // don't assume window is available
+    typeof window === "undefined" ? "server://singlefetch/" : window.location.origin
+  ) : reqUrl;
+  if (trailingSlashAware) {
+    if (url.pathname.endsWith("/")) {
+      url.pathname = `${url.pathname}_.${extension}`;
+    } else {
+      url.pathname = `${url.pathname}.${extension}`;
+    }
+  } else {
+    if (url.pathname === "/") {
+      url.pathname = `_root.${extension}`;
+    } else if (basename && stripBasename(url.pathname, basename) === "/") {
+      url.pathname = `${basename.replace(/\/$/, "")}/_root.${extension}`;
+    } else {
+      url.pathname = `${url.pathname.replace(/\/$/, "")}.${extension}`;
+    }
+  }
+  return url;
+}
+
+// lib/dom/ssr/routeModules.ts
+async function loadRouteModule(route, routeModulesCache) {
+  if (route.id in routeModulesCache) {
+    return routeModulesCache[route.id];
+  }
+  try {
+    let routeModule = await import(
+      /* @vite-ignore */
+      /* webpackIgnore: true */
+      route.module
+    );
+    routeModulesCache[route.id] = routeModule;
+    return routeModule;
+  } catch (error) {
+    console.error(
+      `Error loading route module \`${route.module}\`, reloading page...`
+    );
+    console.error(error);
+    if (window.__reactRouterContext && window.__reactRouterContext.isSpaMode && // @ts-expect-error
+    undefined) {
+      throw error;
+    }
+    window.location.reload();
+    return new Promise(() => {
+    });
+  }
+}
+function isHtmlLinkDescriptor(object) {
+  if (object == null) {
+    return false;
+  }
+  if (object.href == null) {
+    return object.rel === "preload" && typeof object.imageSrcSet === "string" && typeof object.imageSizes === "string";
+  }
+  return typeof object.rel === "string" && typeof object.href === "string";
+}
+async function getKeyedPrefetchLinks(matches, manifest, routeModules) {
+  let links = await Promise.all(
+    matches.map(async (match) => {
+      let route = manifest.routes[match.route.id];
+      if (route) {
+        let mod = await loadRouteModule(route, routeModules);
+        return mod.links ? mod.links() : [];
+      }
+      return [];
+    })
+  );
+  return dedupeLinkDescriptors(
+    links.flat(1).filter(isHtmlLinkDescriptor).filter((link) => link.rel === "stylesheet" || link.rel === "preload").map(
+      (link) => link.rel === "stylesheet" ? { ...link, rel: "prefetch", as: "style" } : { ...link, rel: "prefetch" }
+    )
+  );
+}
+function getNewMatchesForLinks(page, nextMatches, currentMatches, manifest, location, mode) {
+  let isNew = (match, index) => {
+    if (!currentMatches[index]) return true;
+    return match.route.id !== currentMatches[index].route.id;
+  };
+  let matchPathChanged = (match, index) => {
+    return (
+      // param change, /users/123 -> /users/456
+      currentMatches[index].pathname !== match.pathname || // splat param changed, which is not present in match.path
+      // e.g. /files/images/avatar.jpg -> files/finances.xls
+      currentMatches[index].route.path?.endsWith("*") && currentMatches[index].params["*"] !== match.params["*"]
+    );
+  };
+  if (mode === "assets") {
+    return nextMatches.filter(
+      (match, index) => isNew(match, index) || matchPathChanged(match, index)
+    );
+  }
+  if (mode === "data") {
+    return nextMatches.filter((match, index) => {
+      let manifestRoute = manifest.routes[match.route.id];
+      if (!manifestRoute || !manifestRoute.hasLoader) {
+        return false;
+      }
+      if (isNew(match, index) || matchPathChanged(match, index)) {
+        return true;
+      }
+      if (match.route.shouldRevalidate) {
+        let routeChoice = match.route.shouldRevalidate({
+          currentUrl: new URL(
+            location.pathname + location.search + location.hash,
+            window.origin
+          ),
+          currentParams: currentMatches[0]?.params || {},
+          nextUrl: new URL(page, window.origin),
+          nextParams: match.params,
+          defaultShouldRevalidate: true
+        });
+        if (typeof routeChoice === "boolean") {
+          return routeChoice;
+        }
+      }
+      return true;
+    });
+  }
+  return [];
+}
+function getModuleLinkHrefs(matches, manifest, { includeHydrateFallback } = {}) {
+  return dedupeHrefs(
+    matches.map((match) => {
+      let route = manifest.routes[match.route.id];
+      if (!route) return [];
+      let hrefs = [route.module];
+      if (route.clientActionModule) {
+        hrefs = hrefs.concat(route.clientActionModule);
+      }
+      if (route.clientLoaderModule) {
+        hrefs = hrefs.concat(route.clientLoaderModule);
+      }
+      if (includeHydrateFallback && route.hydrateFallbackModule) {
+        hrefs = hrefs.concat(route.hydrateFallbackModule);
+      }
+      if (route.imports) {
+        hrefs = hrefs.concat(route.imports);
+      }
+      return hrefs;
+    }).flat(1)
+  );
+}
+function dedupeHrefs(hrefs) {
+  return [...new Set(hrefs)];
+}
+function sortKeys(obj) {
+  let sorted = {};
+  let keys = Object.keys(obj).sort();
+  for (let key of keys) {
+    sorted[key] = obj[key];
+  }
+  return sorted;
+}
+function dedupeLinkDescriptors(descriptors, preloads) {
+  let set = /* @__PURE__ */ new Set();
+  new Set(preloads);
+  return descriptors.reduce((deduped, descriptor) => {
+    let key = JSON.stringify(sortKeys(descriptor));
+    if (!set.has(key)) {
+      set.add(key);
+      deduped.push({ key, link: descriptor });
+    }
+    return deduped;
+  }, []);
+}
+
+// lib/dom/ssr/components.tsx
+function useDataRouterContext2() {
+  let context = React3__namespace.useContext(DataRouterContext);
+  invariant2(
+    context,
+    "You must render this element inside a <DataRouterContext.Provider> element"
+  );
+  return context;
+}
+function useDataRouterStateContext() {
+  let context = React3__namespace.useContext(DataRouterStateContext);
+  invariant2(
+    context,
+    "You must render this element inside a <DataRouterStateContext.Provider> element"
+  );
+  return context;
+}
+var FrameworkContext = React3__namespace.createContext(void 0);
+FrameworkContext.displayName = "FrameworkContext";
+function useFrameworkContext() {
+  let context = React3__namespace.useContext(FrameworkContext);
+  invariant2(
+    context,
+    "You must render this element inside a <HydratedRouter> element"
+  );
+  return context;
+}
+function usePrefetchBehavior(prefetch, theirElementProps) {
+  let frameworkContext = React3__namespace.useContext(FrameworkContext);
+  let [maybePrefetch, setMaybePrefetch] = React3__namespace.useState(false);
+  let [shouldPrefetch, setShouldPrefetch] = React3__namespace.useState(false);
+  let { onFocus, onBlur, onMouseEnter, onMouseLeave, onTouchStart } = theirElementProps;
+  let ref = React3__namespace.useRef(null);
+  React3__namespace.useEffect(() => {
+    if (prefetch === "render") {
+      setShouldPrefetch(true);
+    }
+    if (prefetch === "viewport") {
+      let callback = (entries) => {
+        entries.forEach((entry) => {
+          setShouldPrefetch(entry.isIntersecting);
+        });
+      };
+      let observer = new IntersectionObserver(callback, { threshold: 0.5 });
+      if (ref.current) observer.observe(ref.current);
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, [prefetch]);
+  React3__namespace.useEffect(() => {
+    if (maybePrefetch) {
+      let id = setTimeout(() => {
+        setShouldPrefetch(true);
+      }, 100);
+      return () => {
+        clearTimeout(id);
+      };
+    }
+  }, [maybePrefetch]);
+  let setIntent = () => {
+    setMaybePrefetch(true);
+  };
+  let cancelIntent = () => {
+    setMaybePrefetch(false);
+    setShouldPrefetch(false);
+  };
+  if (!frameworkContext) {
+    return [false, ref, {}];
+  }
+  if (prefetch !== "intent") {
+    return [shouldPrefetch, ref, {}];
+  }
+  return [
+    shouldPrefetch,
+    ref,
+    {
+      onFocus: composeEventHandlers(onFocus, setIntent),
+      onBlur: composeEventHandlers(onBlur, cancelIntent),
+      onMouseEnter: composeEventHandlers(onMouseEnter, setIntent),
+      onMouseLeave: composeEventHandlers(onMouseLeave, cancelIntent),
+      onTouchStart: composeEventHandlers(onTouchStart, setIntent)
+    }
+  ];
+}
+function composeEventHandlers(theirHandler, ourHandler) {
+  return (event) => {
+    theirHandler && theirHandler(event);
+    if (!event.defaultPrevented) {
+      ourHandler(event);
+    }
+  };
+}
+function PrefetchPageLinks({ page, ...linkProps }) {
+  let { router } = useDataRouterContext2();
+  let matches = React3__namespace.useMemo(
+    () => matchRoutes(router.routes, page, router.basename),
+    [router.routes, page, router.basename]
+  );
+  if (!matches) {
+    return null;
+  }
+  return /* @__PURE__ */ React3__namespace.createElement(PrefetchPageLinksImpl, { page, matches, ...linkProps });
+}
+function useKeyedPrefetchLinks(matches) {
+  let { manifest, routeModules } = useFrameworkContext();
+  let [keyedPrefetchLinks, setKeyedPrefetchLinks] = React3__namespace.useState([]);
+  React3__namespace.useEffect(() => {
+    let interrupted = false;
+    void getKeyedPrefetchLinks(matches, manifest, routeModules).then(
+      (links) => {
+        if (!interrupted) {
+          setKeyedPrefetchLinks(links);
+        }
+      }
+    );
+    return () => {
+      interrupted = true;
+    };
+  }, [matches, manifest, routeModules]);
+  return keyedPrefetchLinks;
+}
+function PrefetchPageLinksImpl({
+  page,
+  matches: nextMatches,
+  ...linkProps
+}) {
+  let location = useLocation();
+  let { future, manifest, routeModules } = useFrameworkContext();
+  let { basename } = useDataRouterContext2();
+  let { loaderData, matches } = useDataRouterStateContext();
+  let newMatchesForData = React3__namespace.useMemo(
+    () => getNewMatchesForLinks(
+      page,
+      nextMatches,
+      matches,
+      manifest,
+      location,
+      "data"
+    ),
+    [page, nextMatches, matches, manifest, location]
+  );
+  let newMatchesForAssets = React3__namespace.useMemo(
+    () => getNewMatchesForLinks(
+      page,
+      nextMatches,
+      matches,
+      manifest,
+      location,
+      "assets"
+    ),
+    [page, nextMatches, matches, manifest, location]
+  );
+  let dataHrefs = React3__namespace.useMemo(() => {
+    if (page === location.pathname + location.search + location.hash) {
+      return [];
+    }
+    let routesParams = /* @__PURE__ */ new Set();
+    let foundOptOutRoute = false;
+    nextMatches.forEach((m) => {
+      let manifestRoute = manifest.routes[m.route.id];
+      if (!manifestRoute || !manifestRoute.hasLoader) {
+        return;
+      }
+      if (!newMatchesForData.some((m2) => m2.route.id === m.route.id) && m.route.id in loaderData && routeModules[m.route.id]?.shouldRevalidate) {
+        foundOptOutRoute = true;
+      } else if (manifestRoute.hasClientLoader) {
+        foundOptOutRoute = true;
+      } else {
+        routesParams.add(m.route.id);
+      }
+    });
+    if (routesParams.size === 0) {
+      return [];
+    }
+    let url = singleFetchUrl(
+      page,
+      basename,
+      future.unstable_trailingSlashAwareDataRequests,
+      "data"
+    );
+    if (foundOptOutRoute && routesParams.size > 0) {
+      url.searchParams.set(
+        "_routes",
+        nextMatches.filter((m) => routesParams.has(m.route.id)).map((m) => m.route.id).join(",")
+      );
+    }
+    return [url.pathname + url.search];
+  }, [
+    basename,
+    future.unstable_trailingSlashAwareDataRequests,
+    loaderData,
+    location,
+    manifest,
+    newMatchesForData,
+    nextMatches,
+    page,
+    routeModules
+  ]);
+  let moduleHrefs = React3__namespace.useMemo(
+    () => getModuleLinkHrefs(newMatchesForAssets, manifest),
+    [newMatchesForAssets, manifest]
+  );
+  let keyedPrefetchLinks = useKeyedPrefetchLinks(newMatchesForAssets);
+  return /* @__PURE__ */ React3__namespace.createElement(React3__namespace.Fragment, null, dataHrefs.map((href) => /* @__PURE__ */ React3__namespace.createElement("link", { key: href, rel: "prefetch", as: "fetch", href, ...linkProps })), moduleHrefs.map((href) => /* @__PURE__ */ React3__namespace.createElement("link", { key: href, rel: "modulepreload", href, ...linkProps })), keyedPrefetchLinks.map(({ key, link }) => (
+    // these don't spread `linkProps` because they are full link descriptors
+    // already with their own props
+    /* @__PURE__ */ React3__namespace.createElement(
+      "link",
+      {
+        key,
+        nonce: linkProps.nonce,
+        ...link,
+        crossOrigin: link.crossOrigin ?? linkProps.crossOrigin
+      }
+    )
+  )));
+}
+function mergeRefs(...refs) {
+  return (value) => {
+    refs.forEach((ref) => {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref != null) {
+        ref.current = value;
+      }
+    });
+  };
+}
+var isBrowser2 = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+try {
+  if (isBrowser2) {
+    window.__reactRouterVersion = // @ts-expect-error
+    "7.13.2";
+  }
+} catch (e) {
+}
+var ABSOLUTE_URL_REGEX2 = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
+var Link = React3__namespace.forwardRef(
+  function LinkWithRef({
+    onClick,
+    discover = "render",
+    prefetch = "none",
+    relative,
+    reloadDocument,
+    replace: replace2,
+    unstable_mask,
+    state,
+    target,
+    to,
+    preventScrollReset,
+    viewTransition,
+    unstable_defaultShouldRevalidate,
+    ...rest
+  }, forwardedRef) {
+    let { basename, navigator, unstable_useTransitions } = React3__namespace.useContext(NavigationContext);
+    let isAbsolute = typeof to === "string" && ABSOLUTE_URL_REGEX2.test(to);
+    let parsed = parseToInfo(to, basename);
+    to = parsed.to;
+    let href = useHref(to, { relative });
+    let location = useLocation();
+    let maskedHref = null;
+    if (unstable_mask) {
+      let resolved = resolveTo(
+        unstable_mask,
+        [],
+        location.unstable_mask ? location.unstable_mask.pathname : "/",
+        true
+      );
+      if (basename !== "/") {
+        resolved.pathname = resolved.pathname === "/" ? basename : joinPaths([basename, resolved.pathname]);
+      }
+      maskedHref = navigator.createHref(resolved);
+    }
+    let [shouldPrefetch, prefetchRef, prefetchHandlers] = usePrefetchBehavior(
+      prefetch,
+      rest
+    );
+    let internalOnClick = useLinkClickHandler(to, {
+      replace: replace2,
+      unstable_mask,
+      state,
+      target,
+      preventScrollReset,
+      relative,
+      viewTransition,
+      unstable_defaultShouldRevalidate,
+      unstable_useTransitions
+    });
+    function handleClick(event) {
+      if (onClick) onClick(event);
+      if (!event.defaultPrevented) {
+        internalOnClick(event);
+      }
+    }
+    let isSpaLink = !(parsed.isExternal || reloadDocument);
+    let link = (
+      // eslint-disable-next-line jsx-a11y/anchor-has-content
+      /* @__PURE__ */ React3__namespace.createElement(
+        "a",
+        {
+          ...rest,
+          ...prefetchHandlers,
+          href: (isSpaLink ? maskedHref : void 0) || parsed.absoluteURL || href,
+          onClick: isSpaLink ? handleClick : onClick,
+          ref: mergeRefs(forwardedRef, prefetchRef),
+          target,
+          "data-discover": !isAbsolute && discover === "render" ? "true" : void 0
+        }
+      )
+    );
+    return shouldPrefetch && !isAbsolute ? /* @__PURE__ */ React3__namespace.createElement(React3__namespace.Fragment, null, link, /* @__PURE__ */ React3__namespace.createElement(PrefetchPageLinks, { page: href })) : link;
+  }
+);
+Link.displayName = "Link";
+var NavLink = React3__namespace.forwardRef(
+  function NavLinkWithRef({
+    "aria-current": ariaCurrentProp = "page",
+    caseSensitive = false,
+    className: classNameProp = "",
+    end = false,
+    style: styleProp,
+    to,
+    viewTransition,
+    children,
+    ...rest
+  }, ref) {
+    let path = useResolvedPath(to, { relative: rest.relative });
+    let location = useLocation();
+    let routerState = React3__namespace.useContext(DataRouterStateContext);
+    let { navigator, basename } = React3__namespace.useContext(NavigationContext);
+    let isTransitioning = routerState != null && // Conditional usage is OK here because the usage of a data router is static
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useViewTransitionState(path) && viewTransition === true;
+    let toPathname = navigator.encodeLocation ? navigator.encodeLocation(path).pathname : path.pathname;
+    let locationPathname = location.pathname;
+    let nextLocationPathname = routerState && routerState.navigation && routerState.navigation.location ? routerState.navigation.location.pathname : null;
+    if (!caseSensitive) {
+      locationPathname = locationPathname.toLowerCase();
+      nextLocationPathname = nextLocationPathname ? nextLocationPathname.toLowerCase() : null;
+      toPathname = toPathname.toLowerCase();
+    }
+    if (nextLocationPathname && basename) {
+      nextLocationPathname = stripBasename(nextLocationPathname, basename) || nextLocationPathname;
+    }
+    const endSlashPosition = toPathname !== "/" && toPathname.endsWith("/") ? toPathname.length - 1 : toPathname.length;
+    let isActive = locationPathname === toPathname || !end && locationPathname.startsWith(toPathname) && locationPathname.charAt(endSlashPosition) === "/";
+    let isPending = nextLocationPathname != null && (nextLocationPathname === toPathname || !end && nextLocationPathname.startsWith(toPathname) && nextLocationPathname.charAt(toPathname.length) === "/");
+    let renderProps = {
+      isActive,
+      isPending,
+      isTransitioning
+    };
+    let ariaCurrent = isActive ? ariaCurrentProp : void 0;
+    let className;
+    if (typeof classNameProp === "function") {
+      className = classNameProp(renderProps);
+    } else {
+      className = [
+        classNameProp,
+        isActive ? "active" : null,
+        isPending ? "pending" : null,
+        isTransitioning ? "transitioning" : null
+      ].filter(Boolean).join(" ");
+    }
+    let style = typeof styleProp === "function" ? styleProp(renderProps) : styleProp;
+    return /* @__PURE__ */ React3__namespace.createElement(
+      Link,
+      {
+        ...rest,
+        "aria-current": ariaCurrent,
+        className,
+        ref,
+        style,
+        to,
+        viewTransition
+      },
+      typeof children === "function" ? children(renderProps) : children
+    );
+  }
+);
+NavLink.displayName = "NavLink";
+var Form = React3__namespace.forwardRef(
+  ({
+    discover = "render",
+    fetcherKey,
+    navigate,
+    reloadDocument,
+    replace: replace2,
+    state,
+    method = defaultMethod,
+    action,
+    onSubmit,
+    relative,
+    preventScrollReset,
+    viewTransition,
+    unstable_defaultShouldRevalidate,
+    ...props
+  }, forwardedRef) => {
+    let { unstable_useTransitions } = React3__namespace.useContext(NavigationContext);
+    let submit = useSubmit();
+    let formAction = useFormAction(action, { relative });
+    let formMethod = method.toLowerCase() === "get" ? "get" : "post";
+    let isAbsolute = typeof action === "string" && ABSOLUTE_URL_REGEX2.test(action);
+    let submitHandler = (event) => {
+      onSubmit && onSubmit(event);
+      if (event.defaultPrevented) return;
+      event.preventDefault();
+      let submitter = event.nativeEvent.submitter;
+      let submitMethod = submitter?.getAttribute("formmethod") || method;
+      let doSubmit = () => submit(submitter || event.currentTarget, {
+        fetcherKey,
+        method: submitMethod,
+        navigate,
+        replace: replace2,
+        state,
+        relative,
+        preventScrollReset,
+        viewTransition,
+        unstable_defaultShouldRevalidate
+      });
+      if (unstable_useTransitions && navigate !== false) {
+        React3__namespace.startTransition(() => doSubmit());
+      } else {
+        doSubmit();
+      }
+    };
+    return /* @__PURE__ */ React3__namespace.createElement(
+      "form",
+      {
+        ref: forwardedRef,
+        method: formMethod,
+        action: formAction,
+        onSubmit: reloadDocument ? onSubmit : submitHandler,
+        ...props,
+        "data-discover": !isAbsolute && discover === "render" ? "true" : void 0
+      }
+    );
+  }
+);
+Form.displayName = "Form";
+function getDataRouterConsoleError2(hookName) {
+  return `${hookName} must be used within a data router.  See https://reactrouter.com/en/main/routers/picking-a-router.`;
+}
+function useDataRouterContext3(hookName) {
+  let ctx = React3__namespace.useContext(DataRouterContext);
+  invariant(ctx, getDataRouterConsoleError2(hookName));
+  return ctx;
+}
+function useLinkClickHandler(to, {
+  target,
+  replace: replaceProp,
+  unstable_mask,
+  state,
+  preventScrollReset,
+  relative,
+  viewTransition,
+  unstable_defaultShouldRevalidate,
+  unstable_useTransitions
+} = {}) {
+  let navigate = useNavigate();
+  let location = useLocation();
+  let path = useResolvedPath(to, { relative });
+  return React3__namespace.useCallback(
+    (event) => {
+      if (shouldProcessLinkClick(event, target)) {
+        event.preventDefault();
+        let replace2 = replaceProp !== void 0 ? replaceProp : createPath(location) === createPath(path);
+        let doNavigate = () => navigate(to, {
+          replace: replace2,
+          unstable_mask,
+          state,
+          preventScrollReset,
+          relative,
+          viewTransition,
+          unstable_defaultShouldRevalidate
+        });
+        if (unstable_useTransitions) {
+          React3__namespace.startTransition(() => doNavigate());
+        } else {
+          doNavigate();
+        }
+      }
+    },
+    [
+      location,
+      navigate,
+      path,
+      replaceProp,
+      unstable_mask,
+      state,
+      target,
+      to,
+      preventScrollReset,
+      relative,
+      viewTransition,
+      unstable_defaultShouldRevalidate,
+      unstable_useTransitions
+    ]
+  );
+}
+var fetcherId = 0;
+var getUniqueFetcherId = () => `__${String(++fetcherId)}__`;
+function useSubmit() {
+  let { router } = useDataRouterContext3("useSubmit" /* UseSubmit */);
+  let { basename } = React3__namespace.useContext(NavigationContext);
+  let currentRouteId = useRouteId();
+  let routerFetch = router.fetch;
+  let routerNavigate = router.navigate;
+  return React3__namespace.useCallback(
+    async (target, options = {}) => {
+      let { action, method, encType, formData, body } = getFormSubmissionInfo(
+        target,
+        basename
+      );
+      if (options.navigate === false) {
+        let key = options.fetcherKey || getUniqueFetcherId();
+        await routerFetch(key, currentRouteId, options.action || action, {
+          unstable_defaultShouldRevalidate: options.unstable_defaultShouldRevalidate,
+          preventScrollReset: options.preventScrollReset,
+          formData,
+          body,
+          formMethod: options.method || method,
+          formEncType: options.encType || encType,
+          flushSync: options.flushSync
+        });
+      } else {
+        await routerNavigate(options.action || action, {
+          unstable_defaultShouldRevalidate: options.unstable_defaultShouldRevalidate,
+          preventScrollReset: options.preventScrollReset,
+          formData,
+          body,
+          formMethod: options.method || method,
+          formEncType: options.encType || encType,
+          replace: options.replace,
+          state: options.state,
+          fromRouteId: currentRouteId,
+          flushSync: options.flushSync,
+          viewTransition: options.viewTransition
+        });
+      }
+    },
+    [routerFetch, routerNavigate, basename, currentRouteId]
+  );
+}
+function useFormAction(action, { relative } = {}) {
+  let { basename } = React3__namespace.useContext(NavigationContext);
+  let routeContext = React3__namespace.useContext(RouteContext);
+  invariant(routeContext, "useFormAction must be used inside a RouteContext");
+  let [match] = routeContext.matches.slice(-1);
+  let path = { ...useResolvedPath(action ? action : ".", { relative }) };
+  let location = useLocation();
+  if (action == null) {
+    path.search = location.search;
+    let params = new URLSearchParams(path.search);
+    let indexValues = params.getAll("index");
+    let hasNakedIndexParam = indexValues.some((v) => v === "");
+    if (hasNakedIndexParam) {
+      params.delete("index");
+      indexValues.filter((v) => v).forEach((v) => params.append("index", v));
+      let qs = params.toString();
+      path.search = qs ? `?${qs}` : "";
+    }
+  }
+  if ((!action || action === ".") && match.route.index) {
+    path.search = path.search ? path.search.replace(/^\?/, "?index&") : "?index";
+  }
+  if (basename !== "/") {
+    path.pathname = path.pathname === "/" ? basename : joinPaths([basename, path.pathname]);
+  }
+  return createPath(path);
+}
+function useViewTransitionState(to, { relative } = {}) {
+  let vtContext = React3__namespace.useContext(ViewTransitionContext);
+  invariant(
+    vtContext != null,
+    "`useViewTransitionState` must be used within `react-router-dom`'s `RouterProvider`.  Did you accidentally import `RouterProvider` from `react-router`?"
+  );
+  let { basename } = useDataRouterContext3(
+    "useViewTransitionState" /* useViewTransitionState */
+  );
+  let path = useResolvedPath(to, { relative });
+  if (!vtContext.isTransitioning) {
+    return false;
+  }
+  let currentPath = stripBasename(vtContext.currentLocation.pathname, basename) || vtContext.currentLocation.pathname;
+  let nextPath = stripBasename(vtContext.nextLocation.pathname, basename) || vtContext.nextLocation.pathname;
+  return matchPath(path.pathname, nextPath) != null || matchPath(path.pathname, currentPath) != null;
+}
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
 const LinkWithRef = ({ children, to, href, forwardedRef = null, ...attributes }) => {
     if (to) {
-        return (jsxRuntime.jsx(reactRouterDom.Link, { ref: forwardedRef, to: to, ...attributes, children: children }));
+        return (jsxRuntime.jsx(Link, { ref: forwardedRef, to: to, ...attributes, children: children }));
     }
     return (jsxRuntime.jsx("a", { ref: forwardedRef, href: href || "#", ...attributes, children: children }));
 };
@@ -178,40 +2130,39 @@ const Boolean$1 = ({ className, errorMessage, fieldset, formGroup, hint, idPrefi
         return null;
     };
     const hasFieldset = !!fieldset;
-    const innerHtml = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [getHintComponent(), getErrorMessageComponent(), jsxRuntime.jsx("div", { className: `govuk-${controlType} ${className || ""}`, ...attributes, "data-module": `govuk-${controlType}`, children: items &&
-                    items.map((item, index) => {
-                        if (!item) {
-                            return null;
-                        }
-                        if (item.behaviour === "exclusive") {
-                            delete item.behaviour;
-                        }
-                        const { id, children, hint: itemHint, conditional: itemConditional, behaviour, label, reactListKey, ...itemAttributes } = item;
-                        const idSuffix = `-${index + 1}`;
-                        const idValue = id || `${idPrefixValue}${index === 0 ? "" : idSuffix}`;
-                        const nameValue = item.name ? item.name : name;
-                        const conditionalId = itemConditional?.children
-                            ? `conditional-${idValue}`
-                            : undefined;
-                        const itemHintId = `${idValue}-item-hint`;
-                        let itemDescribedBy = "";
-                        if (controlType === "checkboxes" && !hasFieldset) {
-                            itemDescribedBy = describedBy;
-                        }
-                        if (itemHint) {
-                            itemDescribedBy += ` ${itemHintId}`;
-                        }
-                        if (item.divider) {
-                            return (jsxRuntime.jsx("div", { className: `govuk-${controlType}__divider`, children: item.divider }, reactListKey || index));
-                        }
-                        return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { className: `govuk-${controlType}__item`, children: [jsxRuntime.jsx("input", { className: `govuk-${controlType}__input`, id: idValue, name: nameValue, type: controlType === "radios" ? "radio" : "checkbox", "data-aria-controls": conditionalId, "aria-describedby": itemDescribedBy || undefined, onChange: onChange, onBlur: onBlur, "data-behaviour": behaviour, ...itemAttributes }), jsxRuntime.jsx(Label, { ...label,
-                                            className: `govuk-${controlType}__label ${label?.className || ""}`,
-                                            htmlFor: idValue,
-                                            isPageHeading: false, children: children }), itemHint ? (jsxRuntime.jsx(Hint, { ...itemHint,
-                                            className: `govuk-${controlType}__hint ${itemHint.className || ""}`, id: itemHintId })) : ("")] }), itemConditional?.children ? (jsxRuntime.jsx("div", { className: `govuk-${controlType}__conditional ${item.checked
-                                        ? ""
-                                        : `govuk-${controlType}__conditional--hidden`}`, id: conditionalId, children: itemConditional.children })) : ("")] }, reactListKey || index));
-                    }) })] }));
+    const innerHtml = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [getHintComponent(), getErrorMessageComponent(), jsxRuntime.jsx("div", { className: `govuk-${controlType} ${className || ""}`, ...attributes, "data-module": `govuk-${controlType}`, children: items?.map((item, index) => {
+                    if (!item) {
+                        return null;
+                    }
+                    if (item.behaviour === "exclusive") {
+                        delete item.behaviour;
+                    }
+                    const { id, children, hint: itemHint, conditional: itemConditional, behaviour, label, reactListKey, ...itemAttributes } = item;
+                    const idSuffix = `-${index + 1}`;
+                    const idValue = id || `${idPrefixValue}${index === 0 ? "" : idSuffix}`;
+                    const nameValue = item.name ? item.name : name;
+                    const conditionalId = itemConditional?.children
+                        ? `conditional-${idValue}`
+                        : undefined;
+                    const itemHintId = `${idValue}-item-hint`;
+                    let itemDescribedBy = "";
+                    if (controlType === "checkboxes" && !hasFieldset) {
+                        itemDescribedBy = describedBy;
+                    }
+                    if (itemHint) {
+                        itemDescribedBy += ` ${itemHintId}`;
+                    }
+                    if (item.divider) {
+                        return (jsxRuntime.jsx("div", { className: `govuk-${controlType}__divider`, children: item.divider }, reactListKey || index));
+                    }
+                    return (jsxRuntime.jsxs(React3.Fragment, { children: [jsxRuntime.jsxs("div", { className: `govuk-${controlType}__item`, children: [jsxRuntime.jsx("input", { className: `govuk-${controlType}__input`, id: idValue, name: nameValue, type: controlType === "radios" ? "radio" : "checkbox", "data-aria-controls": conditionalId, "aria-describedby": itemDescribedBy || undefined, onChange: onChange, onBlur: onBlur, "data-behaviour": behaviour, ...itemAttributes }), jsxRuntime.jsx(Label, { ...label,
+                                        className: `govuk-${controlType}__label ${label?.className || ""}`,
+                                        htmlFor: idValue,
+                                        isPageHeading: false, children: children }), itemHint ? (jsxRuntime.jsx(Hint, { ...itemHint,
+                                        className: `govuk-${controlType}__hint ${itemHint.className || ""}`, id: itemHintId })) : ("")] }), itemConditional?.children ? (jsxRuntime.jsx("div", { className: `govuk-${controlType}__conditional ${item.checked
+                                    ? ""
+                                    : `govuk-${controlType}__conditional--hidden`}`, id: conditionalId, children: itemConditional.children })) : ("")] }, reactListKey || index));
+                }) })] }));
     return (jsxRuntime.jsx("div", { className: `govuk-form-group${errorMessage ? " govuk-form-group--error" : ""} ${formGroup?.className || ""}`, children: hasFieldset ? (jsxRuntime.jsx(Fieldset, { ...omit(fieldset, "role"), "aria-describedby": describedBy.trim() || undefined, children: innerHtml })) : (innerHtml) }));
 };
 
@@ -292,10 +2243,6 @@ function ConfigureOverallButton($scope, config) {
     govukFrontend.createAll(govukFrontend.Button, config, $scope);
 }
 
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
 var classnames = {exports: {}};
 
 /*!
@@ -385,7 +2332,7 @@ var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
 const DEFAULT_BREAKPOINTS = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
 const DEFAULT_MIN_BREAKPOINT = 'xs';
-const ThemeContext = /*#__PURE__*/React__namespace.createContext({
+const ThemeContext = /*#__PURE__*/React3__namespace.createContext({
   prefixes: {},
   breakpoints: DEFAULT_BREAKPOINTS,
   minBreakpoint: DEFAULT_MIN_BREAKPOINT
@@ -397,11 +2344,11 @@ const {
 function useBootstrapPrefix(prefix, defaultPrefix) {
   const {
     prefixes
-  } = React.useContext(ThemeContext);
+  } = React3.useContext(ThemeContext);
   return prefix || prefixes[defaultPrefix] || defaultPrefix;
 }
 
-const CardBody = /*#__PURE__*/React__namespace.forwardRef(({
+const CardBody = /*#__PURE__*/React3__namespace.forwardRef(({
   className,
   bsPrefix,
   as: Component = 'div',
@@ -416,7 +2363,7 @@ const CardBody = /*#__PURE__*/React__namespace.forwardRef(({
 });
 CardBody.displayName = 'CardBody';
 
-const CardFooter = /*#__PURE__*/React__namespace.forwardRef(({
+const CardFooter = /*#__PURE__*/React3__namespace.forwardRef(({
   className,
   bsPrefix,
   as: Component = 'div',
@@ -431,10 +2378,10 @@ const CardFooter = /*#__PURE__*/React__namespace.forwardRef(({
 });
 CardFooter.displayName = 'CardFooter';
 
-const context = /*#__PURE__*/React__namespace.createContext(null);
+const context = /*#__PURE__*/React3__namespace.createContext(null);
 context.displayName = 'CardHeaderContext';
 
-const CardHeader = /*#__PURE__*/React__namespace.forwardRef(({
+const CardHeader = /*#__PURE__*/React3__namespace.forwardRef(({
   bsPrefix,
   className,
   // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
@@ -442,7 +2389,7 @@ const CardHeader = /*#__PURE__*/React__namespace.forwardRef(({
   ...props
 }, ref) => {
   const prefix = useBootstrapPrefix(bsPrefix, 'card-header');
-  const contextValue = React.useMemo(() => ({
+  const contextValue = React3.useMemo(() => ({
     cardHeaderBsPrefix: prefix
   }), [prefix]);
   return /*#__PURE__*/jsxRuntime.jsx(context.Provider, {
@@ -456,7 +2403,7 @@ const CardHeader = /*#__PURE__*/React__namespace.forwardRef(({
 });
 CardHeader.displayName = 'CardHeader';
 
-const CardImg = /*#__PURE__*/React__namespace.forwardRef(
+const CardImg = /*#__PURE__*/React3__namespace.forwardRef(
 // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
 ({
   bsPrefix,
@@ -474,7 +2421,7 @@ const CardImg = /*#__PURE__*/React__namespace.forwardRef(
 });
 CardImg.displayName = 'CardImg';
 
-const CardImgOverlay = /*#__PURE__*/React__namespace.forwardRef(({
+const CardImgOverlay = /*#__PURE__*/React3__namespace.forwardRef(({
   className,
   bsPrefix,
   as: Component = 'div',
@@ -489,7 +2436,7 @@ const CardImgOverlay = /*#__PURE__*/React__namespace.forwardRef(({
 });
 CardImgOverlay.displayName = 'CardImgOverlay';
 
-const CardLink = /*#__PURE__*/React__namespace.forwardRef(({
+const CardLink = /*#__PURE__*/React3__namespace.forwardRef(({
   className,
   bsPrefix,
   as: Component = 'a',
@@ -507,14 +2454,14 @@ CardLink.displayName = 'CardLink';
 var divWithClassName = (className =>
 /*#__PURE__*/
 // eslint-disable-next-line react/display-name
-React__namespace.forwardRef((p, ref) => /*#__PURE__*/jsxRuntime.jsx("div", {
+React3__namespace.forwardRef((p, ref) => /*#__PURE__*/jsxRuntime.jsx("div", {
   ...p,
   ref: ref,
   className: classNames(p.className, className)
 })));
 
 const DivStyledAsH6 = divWithClassName('h6');
-const CardSubtitle = /*#__PURE__*/React__namespace.forwardRef(({
+const CardSubtitle = /*#__PURE__*/React3__namespace.forwardRef(({
   className,
   bsPrefix,
   as: Component = DivStyledAsH6,
@@ -529,7 +2476,7 @@ const CardSubtitle = /*#__PURE__*/React__namespace.forwardRef(({
 });
 CardSubtitle.displayName = 'CardSubtitle';
 
-const CardText = /*#__PURE__*/React__namespace.forwardRef(({
+const CardText = /*#__PURE__*/React3__namespace.forwardRef(({
   className,
   bsPrefix,
   as: Component = 'p',
@@ -545,7 +2492,7 @@ const CardText = /*#__PURE__*/React__namespace.forwardRef(({
 CardText.displayName = 'CardText';
 
 const DivStyledAsH5 = divWithClassName('h5');
-const CardTitle = /*#__PURE__*/React__namespace.forwardRef(({
+const CardTitle = /*#__PURE__*/React3__namespace.forwardRef(({
   className,
   bsPrefix,
   as: Component = DivStyledAsH5,
@@ -560,7 +2507,7 @@ const CardTitle = /*#__PURE__*/React__namespace.forwardRef(({
 });
 CardTitle.displayName = 'CardTitle';
 
-const Card = /*#__PURE__*/React__namespace.forwardRef(({
+const Card = /*#__PURE__*/React3__namespace.forwardRef(({
   bsPrefix,
   className,
   bg,
@@ -595,9 +2542,19 @@ var Card$1 = Object.assign(Card, {
   ImgOverlay: CardImgOverlay
 });
 
+// The default colours come from the SCSS via govuk-functional-colour(), which
+// resolves the govuk-frontend CSS custom properties (--govuk-colour-brand,
+// --govuk-colour-header-background). We only need to set inline CSS variables
+// here when the consumer explicitly overrides them via props.
 const CardColumn = (props) => {
-    const { body, header, link } = props;
-    return (jsxRuntime.jsx("div", { className: "col", children: jsxRuntime.jsxs(Card$1, { className: "card-styles", children: [jsxRuntime.jsx(reactRouterDom.Link, { to: link, children: jsxRuntime.jsx(Card$1.Header, { className: "card-header govuk-!-font-size-27 govuk-!-font-weight-bold", children: header }) }), jsxRuntime.jsx(Card$1.Body, { className: "govuk-!-font-size-19", children: body })] }) }));
+    const { body, header, link, textColor, hoverColor } = props;
+    const inlineVars = textColor || hoverColor
+        ? {
+            ...(textColor && { "--card-text-color": textColor }),
+            ...(hoverColor && { "--card-hover-color": hoverColor }),
+        }
+        : undefined;
+    return (jsxRuntime.jsx("div", { className: "col", children: jsxRuntime.jsxs(Card$1, { className: "card-styles", style: inlineVars, children: [jsxRuntime.jsx(Link, { to: link, children: jsxRuntime.jsx(Card$1.Header, { className: "card-header govuk-!-font-size-27 govuk-!-font-weight-bold", children: header }) }), jsxRuntime.jsx(Card$1.Body, { className: "govuk-!-font-size-19", children: body })] }) }));
 };
 
 const CardLayout = (props) => {
@@ -605,7 +2562,7 @@ const CardLayout = (props) => {
     const divideByColumn = [];
     let accumulator = [];
     children.map((child, index) => {
-        accumulator.push(React.createElement(CardColumn, { ...child, key: `card-column-${index}` }));
+        accumulator.push(React3.createElement(CardColumn, { ...child, key: `card-column-${index}` }));
         if (index % numberOfGridColumns === numberOfGridColumns - 1) {
             divideByColumn.push(jsxRuntime.jsx("div", { className: `row row-cols-1 row-cols-md-${numberOfGridColumns} govuk-!-margin-bottom-8`, children: accumulator }, `card-layout-${index}`));
             accumulator = [];
@@ -623,7 +2580,7 @@ const defaultProps$1 = {
     id: "",
     name: "",
 };
-const Textarea = React.forwardRef((props = defaultProps$1, ref) => {
+const Textarea = React3.forwardRef((props = defaultProps$1, ref) => {
     const { className, "aria-describedby": describedBy, errorMessage, formGroup, hint, label, id, ...attributes } = props;
     let describedByValue = describedBy || "";
     let hintComponent = null;
@@ -664,16 +2621,34 @@ const CookieActions = ({ actions }) => (jsxRuntime.jsx("div", { className: "govu
 const CookieMessage = ({ headingChildren, children, className, actions, }) => (jsxRuntime.jsxs("div", { className: `govuk-cookie-banner__message govuk-width-container ${className || ""}`, children: [jsxRuntime.jsx("div", { className: "govuk-grid-row", children: jsxRuntime.jsxs("div", { className: "govuk-grid-column-two-thirds", children: [headingChildren && (jsxRuntime.jsx("h2", { className: "govuk-cookie-banner__heading govuk-heading-m", children: headingChildren })), jsxRuntime.jsx("div", { className: "govuk-cookie-banner__content", children: typeof children === "string" ? (jsxRuntime.jsx("p", { className: "govuk-body", children: children })) : (children) })] }) }), actions && jsxRuntime.jsx(CookieActions, { actions: actions })] }));
 const CookieBanner = ({ className, messages, "aria-label": ariaLabel = "Cookie banner", ...attributes }) => (jsxRuntime.jsx("div", { className: `govuk-cookie-banner ${className || ""}`, "data-nosnippet": true, role: "region", "aria-label": ariaLabel, ...attributes, children: messages.map((message, index) => (jsxRuntime.jsx(CookieMessage, { headingChildren: message.headingChildren, className: message.className, actions: message.actions, ...message, children: message.children }, index))) }));
 
-const DataNavigation = ({ dataId, setDataFocus, previousText = "Previous", previousCondition, nextText = "Next", nextCondition, dataDescription, }) => {
-    // Helper to render the navigation buttons
-    const renderNavButton = (id, onClick, disabled, content) => (jsxRuntime.jsx(Button, { id: id, onClick: onClick, "data-testid": id, disabled: disabled, children: content }));
+const DataNavigation = ({ dataId, setDataFocus, previousText = "Previous", previousCondition, nextText = "Next", nextCondition, dataDescription, buttonColour, buttonTextColour, buttonShadowColour, buttonHoverColour, buttonHoverTextColour, }) => {
+    // CSS custom properties set directly on each <button> element via Button's
+    // ...attributes spread, so they sit on the same element that
+    // .app-data-navigation-button targets — no inheritance from a parent div needed.
+    const inlineVars = {
+        ...(buttonColour && { "--data-nav-button-colour": buttonColour }),
+        ...(buttonTextColour && {
+            "--data-nav-button-text-colour": buttonTextColour,
+        }),
+        ...(buttonShadowColour && {
+            "--data-nav-button-shadow-colour": buttonShadowColour,
+        }),
+        ...(buttonHoverColour && {
+            "--data-nav-button-hover-colour": buttonHoverColour,
+        }),
+        ...(buttonHoverTextColour && {
+            "--data-nav-button-hover-text-colour": buttonHoverTextColour,
+        }),
+    };
+    const hasInlineVars = Object.keys(inlineVars).length > 0;
+    const renderNavButton = (id, onClick, disabled, content) => (jsxRuntime.jsx(Button, { id: id, onClick: onClick, "data-testid": id, disabled: disabled, className: "app-data-navigation-button", ...(hasInlineVars && { style: inlineVars }), children: content }));
     return (jsxRuntime.jsxs("div", { className: "govuk-grid-row", children: [jsxRuntime.jsx("div", { className: "govuk-grid-column-one-third govuk-!-text-align-left", children: renderNavButton("previous-data", () => setDataFocus(dataId - 1), previousCondition, jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("svg", { className: "govuk-button__start-icon back-button", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", transform: "rotate(180)", children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z" }) }), "\u00A0", previousText] })) }), jsxRuntime.jsx("div", { className: "govuk-grid-column-one-third govuk-!-text-align-centre", children: jsxRuntime.jsx(Label, { children: dataDescription }) }), jsxRuntime.jsx("div", { className: "govuk-grid-column-one-third govuk-!-text-align-right", children: renderNavButton("next-data", () => setDataFocus(dataId + 1), nextCondition, jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [nextText, jsxRuntime.jsx("svg", { className: "govuk-button__start-icon", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z" }) })] })) })] }));
 };
 
 const defaultProps = {
     type: "text",
 };
-const Input = React.forwardRef((props = defaultProps, ref) => {
+const Input = React3.forwardRef((props = defaultProps, ref) => {
     const { className, "aria-describedby": describedBy, errorMessage, formGroup, hint, label, name, id, prefix, suffix, ...attributes } = props;
     let describedByValue = describedBy || "";
     let hintComponent = null;
@@ -761,20 +2736,40 @@ function titleCase(str) {
         .join(" ");
 }
 
-const DifferenceNavigation = ({ differenceId, setDifferenceFocus, totalDifferences, keyword = "variation", plural = "variations", }) => {
+const DifferenceNavigation = ({ differenceId, setDifferenceFocus, totalDifferences, keyword = "variation", plural = "variations", buttonColour, buttonTextColour, buttonShadowColour, buttonHoverColour, buttonHoverTextColour, }) => {
     if (totalDifferences === 0) {
         return (jsxRuntime.jsxs("p", { className: "govuk-body govuk-!-font-size-20 govuk-!-text-align-centre", children: ["No ", `${plural}`, " found"] }));
     }
+    // CSS custom properties set directly on each <button> element via Button's
+    // ...attributes spread, so they sit on the same element that
+    // .app-difference-navigation-button targets — no inheritance from a parent
+    // div needed. Only written when a prop is explicitly provided.
+    const inlineVars = {
+        ...(buttonColour && { "--diff-nav-button-colour": buttonColour }),
+        ...(buttonTextColour && {
+            "--diff-nav-button-text-colour": buttonTextColour,
+        }),
+        ...(buttonShadowColour && {
+            "--diff-nav-button-shadow-colour": buttonShadowColour,
+        }),
+        ...(buttonHoverColour && {
+            "--diff-nav-button-hover-colour": buttonHoverColour,
+        }),
+        ...(buttonHoverTextColour && {
+            "--diff-nav-button-hover-text-colour": buttonHoverTextColour,
+        }),
+    };
+    const hasInlineVars = Object.keys(inlineVars).length > 0;
     const isPreviousDisabled = differenceId <= 1;
     const isNextDisabled = differenceId === totalDifferences;
-    const renderButton = (id, onClick, disabled, content) => (jsxRuntime.jsx(Button, { id: id, onClick: onClick, "data-testid": id, disabled: disabled, children: content }));
+    const renderButton = (id, onClick, disabled, content) => (jsxRuntime.jsx(Button, { id: id, onClick: onClick, "data-testid": id, disabled: disabled, className: "app-difference-navigation-button", ...(hasInlineVars && { style: inlineVars }), children: content }));
     return (jsxRuntime.jsxs("div", { className: "govuk-grid-row", children: [jsxRuntime.jsx("div", { className: "govuk-grid-column-one-third", children: jsxRuntime.jsx("div", { className: "govuk-!-text-align-left", children: renderButton(`previous-${keyword}`, () => setDifferenceFocus(differenceId - 1), isPreviousDisabled, jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" ", jsxRuntime.jsx("svg", { className: "govuk-button__start-icon back-button", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", transform: "rotate(180)", children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z" }) }), "\u00A0Previous", " "] })) }) }), jsxRuntime.jsx("div", { className: "govuk-grid-column-one-third", children: jsxRuntime.jsxs(Label, { className: "govuk-!-text-align-centre", children: [titleCase(keyword), " ", differenceId, " of ", totalDifferences] }) }), jsxRuntime.jsx("div", { className: "govuk-grid-column-one-third", children: jsxRuntime.jsx("div", { className: "govuk-!-text-align-right", children: renderButton(`next-${keyword}`, () => setDifferenceFocus(differenceId + 1), isNextDisabled, jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" ", "Next", jsxRuntime.jsx("svg", { className: "govuk-button__start-icon back-button", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z" }) })] })) }) })] }));
 };
 
 const Main = ({ children, backLink = "", backLinkState = null, }) => (jsxRuntime.jsx("div", { className: "govuk-width-container", children: jsxRuntime.jsxs("main", { className: "govuk-main-wrapper", id: "main-content", "data-testid": "main-content", children: [backLink && (jsxRuntime.jsx("div", { className: "govuk-grid-row", children: jsxRuntime.jsx("div", { className: "govuk-grid-column-two-thirds", children: jsxRuntime.jsx(BackLink, { to: { pathname: backLink }, state: backLinkState }) }) })), children && jsxRuntime.jsx("div", { children: children })] }) }));
 
 const ProblemWithService = ({ message = "", applicationName = "Document and plan retrieval system", applicationRoute = "/", reportingLink = "http://marval-live/MSMselfservice/AutoGen.aspx?page=1268", basePageName = "dashboard", }) => {
-    const { state } = reactRouterDom.useLocation();
+    const { state } = useLocation();
     const determineMessage = state?.message || message;
     const determineApplicationName = state?.applicationName || applicationName;
     const refreshPage = () => {
@@ -785,7 +2780,7 @@ const ProblemWithService = ({ message = "", applicationName = "Document and plan
     return (jsxRuntime.jsxs(Main, { children: [jsxRuntime.jsx("h1", { className: "govuk-heading-xl", children: "Sorry, there is a problem with the service" }), hasMessage() && (jsxRuntime.jsx("div", { className: "govuk-error-summary", "aria-labelledby": "error-summary-title", role: "alert", tabIndex: -1, "data-module": "govuk-error-summary", children: jsxRuntime.jsx("div", { className: "govuk-error-summary__body", children: jsxRuntime.jsx("p", { children: determineMessage }) }) })), jsxRuntime.jsx("p", { className: "govuk-body", children: "Try again later." }), jsxRuntime.jsxs("p", { className: "govuk-body", children: ["You can go back to", " ", jsxRuntime.jsx(LinkWithRef, { className: "govuk-link", to: applicationRoute, onClick: refreshPage, children: determineApplicationName }), " ", basePageName, "."] }), jsxRuntime.jsxs("p", { className: "govuk-body", children: ["If the problem continues\u00A0", jsxRuntime.jsxs("a", { href: reportingLink, className: "govuk-link", target: "_blank", rel: "noreferrer", children: ["contact support", jsxRuntime.jsx("span", { className: "nav-panel__text opens-in-new-window" }), jsxRuntime.jsx("span", { className: "visually-hidden", children: "(Opens in a new window or tab)" })] }), "."] })] }));
 };
 
-class ErrorBoundary extends React.Component {
+class ErrorBoundary extends React3.Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -869,70 +2864,70 @@ const FileUpload = (props) => {
 FileUpload.displayName = "FileUpload";
 
 const Footer = (props) => {
-    const { className, containerClassName, meta, navigation, ...attributes } = props;
+    const { className, containerClassName, meta, navigation, contentLicence, ...attributes } = props;
     let navigationComponent;
     let metaComponent;
+    let contentLicenceComponent;
     if (navigation && navigation.length > 0) {
         navigationComponent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "govuk-footer__navigation", children: navigation.map((nav, navIndex) => (jsxRuntime.jsxs("div", { className: `govuk-footer__section govuk-grid-column-${nav.width ? nav.width : "full"}`, children: [jsxRuntime.jsx("h2", { className: "govuk-footer__heading govuk-heading-m", children: nav.title }), nav.items && nav.items.length > 0 ? (jsxRuntime.jsx("ul", { className: `govuk-footer__list ${nav.columns ? `govuk-footer__list--columns-${nav.columns}` : ""}`, children: nav.items.map((item, index) => {
                                     const { className: itemClassName, children: itemChildren, reactListKey, ...itemAttributes } = item;
-                                    return (jsxRuntime.jsx(React.Fragment, { children: (item.href || item.to) && itemChildren && (jsxRuntime.jsx("li", { className: "govuk-footer__list-item", children: jsxRuntime.jsx(LinkWithRef, { className: `govuk-footer__link ${itemClassName || ""}`, ...itemAttributes, children: itemChildren }) })) }, reactListKey || index));
+                                    return (jsxRuntime.jsx(React3.Fragment, { children: (item.href || item.to) && itemChildren && (jsxRuntime.jsx("li", { className: "govuk-footer__list-item", children: jsxRuntime.jsx(LinkWithRef, { className: `govuk-footer__link ${itemClassName || ""}`, ...itemAttributes, children: itemChildren }) })) }, reactListKey || index));
                                 }) })) : null] }, nav.reactListKey || navIndex))) }), jsxRuntime.jsx("hr", { className: "govuk-footer__section-break" })] }));
     }
     if (meta) {
         metaComponent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("h2", { className: "govuk-visually-hidden", children: meta.visuallyHiddenTitle
                         ? meta.visuallyHiddenTitle
-                        : "Support links" }), meta.items && meta.items.length > 0 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("ul", { className: "govuk-footer__inline-list", children: meta.items.map((item, index) => {
-                            const { className: itemClassName, children: itemChildren, reactListKey, ...itemAttributes } = item;
-                            return (jsxRuntime.jsx("li", { className: "govuk-footer__inline-list-item", children: jsxRuntime.jsx(LinkWithRef, { className: `govuk-footer__link ${itemClassName || ""}`, ...itemAttributes, children: itemChildren }) }, reactListKey || index));
-                        }) }) })) : null, meta.children ? (jsxRuntime.jsx("div", { className: "govuk-footer__meta-custom", children: meta.children })) : null] }));
+                        : "Support links" }), meta.items && meta.items.length > 0 ? (jsxRuntime.jsx("ul", { className: "govuk-footer__inline-list", children: meta.items.map((item, index) => {
+                        const { className: itemClassName, children: itemChildren, reactListKey, ...itemAttributes } = item;
+                        return (jsxRuntime.jsx("li", { className: "govuk-footer__inline-list-item", children: jsxRuntime.jsx(LinkWithRef, { className: `govuk-footer__link ${itemClassName || ""}`, ...itemAttributes, children: itemChildren }) }, reactListKey || index));
+                    }) })) : null, meta.children ? (jsxRuntime.jsx("div", { className: "govuk-footer__meta-custom", children: meta.children })) : null] }));
+    }
+    if (contentLicence) {
+        const { className: contentLicenceClassName, children: contentLicenceChildren, ...contentLicenceAttributes } = contentLicence;
+        contentLicenceComponent = (jsxRuntime.jsx("div", { className: contentLicenceClassName, ...contentLicenceAttributes, children: contentLicenceChildren }));
+    }
+    else if (contentLicence === undefined) {
+        contentLicenceComponent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("svg", { "aria-hidden": "true", focusable: "false", className: "govuk-footer__licence-logo", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 483.2 195.7", height: "17", width: "41", children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" }) }), jsxRuntime.jsxs("span", { className: "govuk-footer__licence-description", children: ["All content is available under the", jsxRuntime.jsx("a", { className: "govuk-footer__link", href: "https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/", rel: "license", children: "Open Government Licence v3.0" }), ", except where otherwise stated"] })] }));
     }
-    return (jsxRuntime.jsx("footer", { className: `govuk-footer ${className || ""}`, role: "contentinfo", ...attributes, children: jsxRuntime.jsxs("div", { className: `govuk-width-container ${containerClassName || ""}`, children: [navigationComponent, jsxRuntime.jsxs("div", { className: "govuk-footer__meta", children: [jsxRuntime.jsxs("div", { className: "govuk-footer__meta-item govuk-footer__meta-item--grow", children: [metaComponent, jsxRuntime.jsx("svg", { "aria-hidden": "true", focusable: "false", className: "govuk-footer__licence-logo", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 483.2 195.7", height: "17", width: "41", children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" }) }), jsxRuntime.jsxs("span", { className: "govuk-footer__licence-description", children: ["All content is available under the", " ", jsxRuntime.jsx("a", { className: "govuk-footer__link", href: "https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/", rel: "license", children: "Open Government Licence v3.0" }), ", except where otherwise stated"] })] }), jsxRuntime.jsx("div", { className: "govuk-footer__meta-item", children: jsxRuntime.jsx("a", { className: "govuk-footer__link govuk-footer__copyright-logo", href: "https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/", children: "\u00A9 Crown copyright" }) })] })] }) }));
+    else {
+        contentLicenceComponent = jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    }
+    return (jsxRuntime.jsx("footer", { className: `govuk-footer ${className || ""}`, role: "contentinfo", ...attributes, children: jsxRuntime.jsxs("div", { className: `govuk-width-container ${containerClassName || ""}`, children: [jsxRuntime.jsx("svg", { focusable: "false", role: "presentation", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 60", height: "30", width: "32", fill: "currentcolor", className: "govuk-footer__crown", children: jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("circle", { cx: "20", cy: "17.6", r: "3.7" }), jsxRuntime.jsx("circle", { cx: "10.2", cy: "23.5", r: "3.7" }), jsxRuntime.jsx("circle", { cx: "3.7", cy: "33.2", r: "3.7" }), jsxRuntime.jsx("circle", { cx: "31.7", cy: "30.6", r: "3.7" }), jsxRuntime.jsx("circle", { cx: "43.3", cy: "17.6", r: "3.7" }), jsxRuntime.jsx("circle", { cx: "53.2", cy: "23.5", r: "3.7" }), jsxRuntime.jsx("circle", { cx: "59.7", cy: "33.2", r: "3.7" }), jsxRuntime.jsx("circle", { cx: "31.7", cy: "30.6", r: "3.7" }), jsxRuntime.jsx("path", { d: "M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z" })] }) }), navigationComponent, jsxRuntime.jsxs("div", { className: "govuk-footer__meta", children: [jsxRuntime.jsxs("div", { className: "govuk-footer__meta-item govuk-footer__meta-item--grow", children: [metaComponent, contentLicenceComponent] }), jsxRuntime.jsx("div", { className: "govuk-footer__meta-item", children: jsxRuntime.jsx("a", { className: "govuk-footer__link govuk-footer__copyright-logo", href: "https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/", children: "\u00A9 Crown copyright" }) })] })] }) }));
 };
 
+// Tudor Crown SVG — govuk-frontend v5+ (replaces old St. Edward's Crown)
+const GovUKLogotype = () => (jsxRuntime.jsxs("svg", { focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 324 60", height: "30", width: "162", fill: "currentcolor", className: "govuk-header__logotype", "aria-label": "GOV.UK", children: [jsxRuntime.jsx("title", { children: "GOV.UK" }), jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("circle", { cx: "20", cy: "17.6", r: "3.7" }), jsxRuntime.jsx("circle", { cx: "10.2", cy: "23.5", r: "3.7" }), jsxRuntime.jsx("circle", { cx: "3.7", cy: "33.2", r: "3.7" }), jsxRuntime.jsx("circle", { cx: "31.7", cy: "30.6", r: "3.7" }), jsxRuntime.jsx("circle", { cx: "43.3", cy: "17.6", r: "3.7" }), jsxRuntime.jsx("circle", { cx: "53.2", cy: "23.5", r: "3.7" }), jsxRuntime.jsx("circle", { cx: "59.7", cy: "33.2", r: "3.7" }), jsxRuntime.jsx("circle", { cx: "31.7", cy: "30.6", r: "3.7" }), jsxRuntime.jsx("path", { d: "M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z" })] }), jsxRuntime.jsx("circle", { className: "govuk-logo-dot", cx: "226", cy: "36", r: "7.3" }), jsxRuntime.jsx("path", { d: "M93.94 41.25c.4 1.81 1.2 3.21 2.21 4.62 1 1.4 2.21 2.41 3.61 3.21s3.21 1.2 5.22 1.2 3.61-.4 4.82-1c1.4-.6 2.41-1.4 3.21-2.41.8-1 1.4-2.01 1.61-3.01s.4-2.01.4-3.01v.14h-10.86v-7.02h20.07v24.08h-8.03v-5.56c-.6.8-1.38 1.61-2.19 2.41-.8.8-1.81 1.2-2.81 1.81-1 .4-2.21.8-3.41 1.2s-2.41.4-3.81.4a18.56 18.56 0 0 1-14.65-6.63c-1.6-2.01-3.01-4.41-3.81-7.02s-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83a20.45 20.45 0 0 1 19.46-13.65c3.21 0 4.01.2 5.82.8 1.81.4 3.61 1.2 5.02 2.01 1.61.8 2.81 2.01 4.01 3.21s2.21 2.61 2.81 4.21l-7.63 4.41c-.4-1-1-1.81-1.61-2.61-.6-.8-1.4-1.4-2.21-2.01-.8-.6-1.81-1-2.81-1.4-1-.4-2.21-.4-3.61-.4-2.01 0-3.81.4-5.22 1.2-1.4.8-2.61 1.81-3.61 3.21s-1.61 2.81-2.21 4.62c-.4 1.81-.6 3.71-.6 5.42s.8 5.22.8 5.22Zm57.8-27.9c3.21 0 6.22.6 8.63 1.81 2.41 1.2 4.82 2.81 6.62 4.82S170.2 24.39 171 27s1.4 5.62 1.4 8.83-.4 6.02-1.4 8.83-2.41 5.02-4.01 7.02-4.01 3.61-6.62 4.82-5.42 1.81-8.63 1.81-6.22-.6-8.63-1.81-4.82-2.81-6.42-4.82-3.21-4.41-4.01-7.02-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83 2.41-5.02 4.01-7.02 4.01-3.61 6.42-4.82 5.42-1.81 8.63-1.81Zm0 36.73c1.81 0 3.61-.4 5.02-1s2.61-1.81 3.61-3.01 1.81-2.81 2.21-4.41c.4-1.81.8-3.61.8-5.62 0-2.21-.2-4.21-.8-6.02s-1.2-3.21-2.21-4.62c-1-1.2-2.21-2.21-3.61-3.01s-3.21-1-5.02-1-3.61.4-5.02 1c-1.4.8-2.61 1.81-3.61 3.01s-1.81 2.81-2.21 4.62c-.4 1.81-.8 3.61-.8 5.62 0 2.41.2 4.21.8 6.02.4 1.81 1.2 3.21 2.21 4.41s2.21 2.21 3.61 3.01c1.4.8 3.21 1 5.02 1Zm36.32 7.96-12.24-44.15h9.83l8.43 32.77h.4l8.23-32.77h9.83L200.3 58.04h-12.24Zm74.14-7.96c2.18 0 3.51-.6 3.51-.6 1.2-.6 2.01-1 2.81-1.81s1.4-1.81 1.81-2.81a13 13 0 0 0 .8-4.01V13.9h8.63v28.15c0 2.41-.4 4.62-1.4 6.62-.8 2.01-2.21 3.61-3.61 5.02s-3.41 2.41-5.62 3.21-4.62 1.2-7.02 1.2-5.02-.4-7.02-1.2c-2.21-.8-4.01-1.81-5.62-3.21s-2.81-3.01-3.61-5.02-1.4-4.21-1.4-6.62V13.9h8.63v26.95c0 1.61.2 3.01.8 4.01.4 1.2 1.2 2.21 2.01 2.81.8.8 1.81 1.4 2.81 1.81 0 0 1.34.6 3.51.6Zm34.22-36.18v18.92l15.65-18.92h10.82l-15.03 17.32 16.03 26.83h-10.21l-11.44-20.21-5.62 6.22v13.99h-8.83V13.9" })] }));
 const Header = (props) => {
-    const { className, containerClassName = "govuk-width-container", homepageUrlHref = "/", homepageUrlTo, navigation, navigationClassName, productName, serviceName, serviceUrlHref, serviceUrlTo, navigationLabel = "Menu", menuButtonLabel = "Show or hide menu", removeGovUKHeader = null, logo, ...attributes } = props;
+    const { className, containerClassName = "govuk-width-container", homepageUrlHref = "/", homepageUrlTo, navigation, navigationClassName, productName, serviceName, serviceUrlHref, serviceUrlTo, navigationLabel = "Menu", menuButtonLabel = "Show or hide menu", removeGovUKHeader = null, ...attributes } = props;
     let productNameComponent = null;
     let navigationComponent = null;
     if (productName) {
         productNameComponent = (jsxRuntime.jsx("span", { className: "govuk-header__product-name", children: productName }));
     }
     if (serviceName || navigation) {
-        navigationComponent = (jsxRuntime.jsxs("div", { className: "govuk-header__content", children: [serviceName ? (jsxRuntime.jsx(LinkWithRef, { href: serviceUrlHref, to: serviceUrlTo, className: "govuk-header__link govuk-header__link--service-name", children: serviceName })) : null, navigation ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("nav", { className: `govuk-header__navigation ${navigationClassName || ""}`, "aria-label": navigationLabel, children: [jsxRuntime.jsx("button", { type: "button", className: "govuk-header__menu-button govuk-js-header-toggle", "aria-controls": "navigation", "aria-label": menuButtonLabel, children: "Menu" }), jsxRuntime.jsx("ul", { id: "navigation", className: "govuk-header__navigation-list", children: navigation.map((item, index) => {
-                                    const { active: itemActive, className: itemClassName, children: itemChildren, reactListKey, ...itemAttributes } = item;
-                                    return itemChildren ? (jsxRuntime.jsx("li", { className: `govuk-header__navigation-item${itemActive
-                                            ? " govuk-header__navigation-item--active"
-                                            : ""}`, children: item.href || item.to ? (jsxRuntime.jsx(LinkWithRef, { className: `govuk-header__link ${itemClassName || ""}`, ...itemAttributes, children: itemChildren })) : (itemChildren) }, reactListKey || index)) : null;
-                                }) })] }) })) : null] }));
-    }
-    return (jsxRuntime.jsx("header", { className: `govuk-header ${className || ""}`, role: "banner", "data-module": "govuk-header", ...attributes, children: jsxRuntime.jsxs("div", { className: `govuk-header__container ${containerClassName}`, children: [jsxRuntime.jsx("div", { className: "govuk-header__logo", children: jsxRuntime.jsxs(LinkWithRef, { to: homepageUrlTo, href: homepageUrlHref, className: "govuk-header__link govuk-header__link--homepage", children: [!removeGovUKHeader && (jsxRuntime.jsx("span", { className: "govuk-header__logotype", dangerouslySetInnerHTML: {
-                                    __html: `
-                  <!--[if gt IE 8]><!-->
-                    <svg
-                      aria-hidden="true"
-                      focusable="false"
-                      class="govuk-header__logotype-crown"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 132 97"
-                      height="30"
-                      width="36"
-                    >
-                      <path
-                        fill="currentColor"
-                        fillRule="evenodd"
-                        d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"
-                      />
-                    </svg>
-                  <!--<![endif]-->
-                  <!--[if IE 8]>
-                    <img src="${logo}" class="govuk-header__logotype-crown-fallback-image" width="36" height="32" />
-                  <![endif]-->
-                  <span class="govuk-header__logotype-text">GOV.UK</span>
-              `,
-                                } })), productNameComponent] }) }), navigationComponent] }) }));
+        navigationComponent = (jsxRuntime.jsxs("div", { className: "govuk-header__content", children: [serviceName ? (jsxRuntime.jsx(LinkWithRef, { href: serviceUrlHref, to: serviceUrlTo, className: "govuk-header__link govuk-header__link--service-name", children: serviceName })) : null, navigation ? (jsxRuntime.jsxs("nav", { className: `govuk-header__navigation ${navigationClassName || ""}`, "aria-label": navigationLabel, children: [jsxRuntime.jsx("button", { type: "button", className: "govuk-header__menu-button govuk-js-header-toggle", "aria-controls": "navigation", "aria-label": menuButtonLabel, children: "Menu" }), jsxRuntime.jsx("ul", { id: "navigation", className: "govuk-header__navigation-list", children: navigation.map((item, index) => {
+                                const { active: itemActive, className: itemClassName, children: itemChildren, reactListKey, ...itemAttributes } = item;
+                                return itemChildren ? (jsxRuntime.jsx("li", { className: `govuk-header__navigation-item${itemActive ? " govuk-header__navigation-item--active" : ""}`, children: item.href || item.to ? (jsxRuntime.jsx(LinkWithRef, { className: `govuk-header__link ${itemClassName || ""}`, ...itemAttributes, children: itemChildren })) : (itemChildren) }, reactListKey || index)) : null;
+                            }) })] })) : null] }));
+    }
+    return (jsxRuntime.jsx("header", { className: `govuk-header ${className || ""}`, role: "banner", "data-module": "govuk-header", ...attributes, children: jsxRuntime.jsxs("div", { className: `govuk-header__container ${containerClassName}`, children: [jsxRuntime.jsx("div", { className: "govuk-header__logo", children: jsxRuntime.jsxs(LinkWithRef, { to: homepageUrlTo, href: homepageUrlHref, className: "govuk-header__homepage-link", children: [!removeGovUKHeader && jsxRuntime.jsx(GovUKLogotype, {}), productNameComponent] }) }), navigationComponent] }) }));
 };
 
-function ConfigureOverallHeader($scope) {
-    govukFrontend.createAll(govukFrontend.Header, undefined, $scope);
+// src/components/Header/Header.config.tsx
+async function ConfigureOverallHeader($scope) {
+    const govukFrontend = await import('govuk-frontend');
+    if ("Header" in govukFrontend) {
+        const { createAll } = govukFrontend;
+        const { Header } = govukFrontend;
+        createAll(Header, undefined, $scope);
+    }
+    else {
+        if (process.env.NODE_ENV !== "production") {
+            console.warn("ConfigureOverallHeader is a no-op in govuk-frontend v5+. " +
+                "The Header menu toggle no longer requires JavaScript initialisation. " +
+                "This call can be safely removed.");
+        }
+    }
 }
 
 const InsetText = ({ className, children, ...attributes }) => {
@@ -941,7 +2936,7 @@ const InsetText = ({ className, children, ...attributes }) => {
 
 const Landing = (props) => {
     const { to = "/" } = props;
-    return (jsxRuntime.jsx(Main, { children: jsxRuntime.jsx("div", { className: "govuk-grid-row", children: jsxRuntime.jsx("div", { className: "govuk-hint govuk-grid-column-full", children: jsxRuntime.jsx("div", { className: "centered-wheel", children: jsxRuntime.jsx("h2", { className: "govuk-heading-m", children: jsxRuntime.jsx(reactRouterDom.Link, { to: to, children: "Single sign on" }) }) }) }) }) }));
+    return (jsxRuntime.jsx(Main, { children: jsxRuntime.jsx("div", { className: "govuk-grid-row", children: jsxRuntime.jsx("div", { className: "govuk-hint govuk-grid-column-full", children: jsxRuntime.jsx("div", { className: "centered-wheel", children: jsxRuntime.jsx("h2", { className: "govuk-heading-m", children: jsxRuntime.jsx(Link, { to: to, children: "Single sign on" }) }) }) }) }) }));
 };
 
 const Loading = ({ message = null, html = null }) => {
@@ -989,7 +2984,7 @@ const UsePagination = ({ totalCount, pageSize, siblingCount = 1, currentPage, })
     const range = (start, end) => {
         return Array.from({ length: end - start + 1 }, (_, idx) => idx + start);
     };
-    const paginationRange = React.useMemo(() => {
+    const paginationRange = React3.useMemo(() => {
         const totalPages = Math.ceil(totalCount / pageSize);
         const visiblePages = siblingCount + 10;
         // Case 1: Show all pages when total pages is less than the number of visible pages
@@ -1034,7 +3029,7 @@ const Panel = (props) => {
     return (jsxRuntime.jsxs("div", { className: `govuk-panel govuk-panel--confirmation ${className || ""}`, ...attributes, children: [jsxRuntime.jsx(HeadingLevel, { className: "govuk-panel__title", children: titleChildren }), innerHtml] }));
 };
 
-const PasswordInput = React.forwardRef((props, ref) => {
+const PasswordInput = React3.forwardRef((props, ref) => {
     const { className, "aria-describedby": describedBy, errorMessage, formGroup, hint, label, name, id, autoComplete = "current-password", showPasswordText = "Show", hidePasswordText = "Hide", showPasswordAriaLabelText = "Show password", hidePasswordAriaLabelText = "Hide password", passwordShownAnnouncementText, passwordHiddenAnnouncementText, ...attributes } = props;
     let describedByValue = describedBy || "";
     let hintComponent = null;
@@ -1193,24 +3188,24 @@ const ResolvePDFSource = (source) => {
 };
 
 const PDFViewer = (props) => {
-    const viewerRef = React.useRef(null);
+    const viewerRef = React3.useRef(null);
     const { iframeId, src, viewerLocation, documentName, documentNameColour, backend, toolbar = "minimal", additionalBackendAttributes, 
     // optional: lets callers skip client-side fetch for remote resources
     disableClientFetch = false, ...attributes } = props;
-    const [loading, setLoading] = React.useState(false);
+    const [loading, setLoading] = React3.useState(false);
     // ref for object URL (either created by ResolvePDFSource or by us after fetching)
-    const objectUrlRef = React.useRef(null);
+    const objectUrlRef = React3.useRef(null);
     // did ResolvePDFSource create the object URL? (helps understanding where to revoke)
-    const createdByResolveRef = React.useRef(false);
+    const createdByResolveRef = React3.useRef(false);
     // fetch abort controller for cross-origin remote fetches
-    const fetchControllerRef = React.useRef(null);
+    const fetchControllerRef = React3.useRef(null);
     const isRemoteUrl = (url) => {
         if (!url)
             return false;
         // Check if it's an HTTP(S) URL
         return /^https?:\/\//i.test(url);
     };
-    React.useEffect(() => {
+    React3.useEffect(() => {
         let mounted = true;
         setLoading(true);
         const element = viewerRef.current;
@@ -1464,7 +3459,7 @@ const Select = (props) => {
             .filter((item) => item)
             .map((option, index) => {
             const { reactListKey, children, ...optionAttributes } = option;
-            return (React.createElement("option", { ...optionAttributes, key: reactListKey || index }, children));
+            return (React3.createElement("option", { ...optionAttributes, key: reactListKey || index }, children));
         })
         : null;
     return (jsxRuntime.jsxs("div", { className: `govuk-form-group${errorMessage ? " govuk-form-group--error" : ""} ${formGroup?.className || ""}`, children: [jsxRuntime.jsx(Label, { ...label, htmlFor: id }), hintComponent, errorMessageComponent, jsxRuntime.jsx("select", { className: `govuk-select ${className || ""}${errorMessage ? " govuk-select--error" : ""}`, id: id, "aria-describedby": describedByValue || undefined, ...attributes, children: options })] }));
@@ -1510,11 +3505,11 @@ const SummaryList = (props) => {
 
 const Table = ({ caption, captionClassName, className, firstCellIsHeader, head, rows, footer, ...attributes }) => {
     // Memoize caption component to avoid re-renders if it doesn't change
-    const captionComponent = React.useMemo(() => caption && (jsxRuntime.jsx("caption", { className: `govuk-table__caption ${captionClassName || ""}`, children: caption })), [caption, captionClassName]);
+    const captionComponent = React3.useMemo(() => caption && (jsxRuntime.jsx("caption", { className: `govuk-table__caption ${captionClassName || ""}`, children: caption })), [caption, captionClassName]);
     // Memoize head component
-    const headComponent = React.useMemo(() => head && (jsxRuntime.jsx("thead", { className: "govuk-table__head", children: jsxRuntime.jsx("tr", { className: "govuk-table__row", children: head.map(({ className, format, children, reactListKey, ...itemAttributes }, index) => (jsxRuntime.jsx("th", { scope: "col", className: `govuk-table__header ${format ? `govuk-table__header--${format}` : ""} ${className || ""}`, ...itemAttributes, children: children }, reactListKey || index))) }) })), [head]);
+    const headComponent = React3.useMemo(() => head && (jsxRuntime.jsx("thead", { className: "govuk-table__head", children: jsxRuntime.jsx("tr", { className: "govuk-table__row", children: head.map(({ className, format, children, reactListKey, ...itemAttributes }, index) => (jsxRuntime.jsx("th", { scope: "col", className: `govuk-table__header ${format ? `govuk-table__header--${format}` : ""} ${className || ""}`, ...itemAttributes, children: children }, reactListKey || index))) }) })), [head]);
     // Memoize footer component
-    const footerComponent = React.useMemo(() => footer && (jsxRuntime.jsx("tfoot", { className: "govuk-table__head", children: jsxRuntime.jsx("tr", { className: "govuk-table__row", children: footer.map(({ className, format, children, reactListKey, ...itemAttributes }, index) => (jsxRuntime.jsx("th", { scope: "col", className: `govuk-table__header ${format ? `govuk-table__header--${format}` : ""} ${className || ""}`, ...itemAttributes, children: children }, reactListKey || index))) }) })), [footer]);
+    const footerComponent = React3.useMemo(() => footer && (jsxRuntime.jsx("tfoot", { className: "govuk-table__head", children: jsxRuntime.jsx("tr", { className: "govuk-table__row", children: footer.map(({ className, format, children, reactListKey, ...itemAttributes }, index) => (jsxRuntime.jsx("th", { scope: "col", className: `govuk-table__header ${format ? `govuk-table__header--${format}` : ""} ${className || ""}`, ...itemAttributes, children: children }, reactListKey || index))) }) })), [footer]);
     // Filter rows that contain cells
     const filteredRows = rows?.filter((row) => row.cells) || [];
     return (jsxRuntime.jsxs("table", { className: `govuk-table ${className}`, ...attributes, children: [captionComponent, headComponent, jsxRuntime.jsx("tbody", { className: "govuk-table__body", children: filteredRows.map(({ cells, reactListKey }, rowIndex) => (jsxRuntime.jsx("tr", { className: "govuk-table__row", children: cells.map(({ className, children, format, reactListKey, ...cellAttributes }, cellIndex) => {
@@ -1559,7 +3554,7 @@ const TaskList = (props) => {
 
 const WarningInfo = ({ messageHeading = "Warning or Info Heading", message = "Warning or Info Heading message", advice = "Try again later.", applicationName = "Document and plan retrieval system", applicationRoute = "/", basePageName = "dashboard", }) => {
     let determineMessage;
-    const { state } = reactRouterDom.useLocation();
+    const { state } = useLocation();
     if (state && state.message) {
         determineMessage = state.message;
     }