@raspberrypifoundation/design-system-react 1.1.9 → 1.1.11

package/dist/esm/bundle.js

@@ -1,6 +1,5 @@
-import * as React from 'react';
-import React__default from 'react';
-import 'react-dom';
+import React from 'react';
+import { Link } from 'react-router-dom';
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -1149,15 +1148,15 @@ const Accordion = ({
   id
 }) => {
   const classes = classNames("rpf-accordion", className);
-  return /*#__PURE__*/React__default.createElement("details", {
+  return /*#__PURE__*/React.createElement("details", {
     className: classes,
     id: `${id}`
-  }, /*#__PURE__*/React__default.createElement("summary", {
+  }, /*#__PURE__*/React.createElement("summary", {
     className: "rpf-accordion__title",
     role: "button"
-  }, title, /*#__PURE__*/React__default.createElement("span", {
+  }, title, /*#__PURE__*/React.createElement("span", {
     className: "rpf-accordion__icon"
-  })), /*#__PURE__*/React__default.createElement("p", {
+  })), /*#__PURE__*/React.createElement("p", {
     className: "rpf-accordion__text"
   }, content));
 };
@@ -1171,1316 +1170,25 @@ Accordion.defaultProps = {
   id: "accordion"
 };
 
-/**
- * @remix-run/router v1.16.1
- *
- * 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 _extends$2() {
-  _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$2.apply(this, arguments);
-}
-
-////////////////////////////////////////////////////////////////////////////////
-//#region Types and Constants
-////////////////////////////////////////////////////////////////////////////////
-/**
- * Actions represent the type of change to a location value.
- */
-var Action;
-(function (Action) {
-  /**
-   * A POP indicates a change to an arbitrary index in the history stack, such
-   * as a back or forward navigation. It does not describe the direction of the
-   * navigation, only that the current index changed.
-   *
-   * Note: This is the default action for newly created history objects.
-   */
-  Action["Pop"] = "POP";
-  /**
-   * A PUSH indicates a new entry being added to the history stack, such as when
-   * a link is clicked and a new page loads. When this happens, all subsequent
-   * entries in the stack are lost.
-   */
-  Action["Push"] = "PUSH";
-  /**
-   * A REPLACE indicates the entry at the current index in the history stack
-   * being replaced by a new one.
-   */
-  Action["Replace"] = "REPLACE";
-})(Action || (Action = {}));
-function invariant(value, message) {
-  if (value === false || value === null || typeof value === "undefined") {
-    throw new Error(message);
-  }
-}
-function warning(cond, message) {
-  if (!cond) {
-    // eslint-disable-next-line no-console
-    if (typeof console !== "undefined") console.warn(message);
-    try {
-      // Welcome to debugging history!
-      //
-      // This error is thrown as a convenience, so you can more easily
-      // find the source for a warning that appears in the console by
-      // enabling "pause on exceptions" in your JavaScript debugger.
-      throw new Error(message);
-      // eslint-disable-next-line no-empty
-    } catch (e) {}
-  }
-}
-/**
- * Creates a string URL path from the given pathname, search, and hash components.
- */
-function createPath(_ref) {
-  let {
-    pathname = "/",
-    search = "",
-    hash = ""
-  } = _ref;
-  if (search && search !== "?") pathname += search.charAt(0) === "?" ? search : "?" + search;
-  if (hash && hash !== "#") pathname += hash.charAt(0) === "#" ? hash : "#" + hash;
-  return pathname;
-}
-/**
- * Parses a string URL path into its separate pathname, search, and hash components.
- */
-function parsePath(path) {
-  let parsedPath = {};
-  if (path) {
-    let hashIndex = path.indexOf("#");
-    if (hashIndex >= 0) {
-      parsedPath.hash = path.substr(hashIndex);
-      path = path.substr(0, hashIndex);
-    }
-    let searchIndex = path.indexOf("?");
-    if (searchIndex >= 0) {
-      parsedPath.search = path.substr(searchIndex);
-      path = path.substr(0, searchIndex);
-    }
-    if (path) {
-      parsedPath.pathname = path;
-    }
-  }
-  return parsedPath;
-}
-//#endregion
-
-var ResultType;
-(function (ResultType) {
-  ResultType["data"] = "data";
-  ResultType["deferred"] = "deferred";
-  ResultType["redirect"] = "redirect";
-  ResultType["error"] = "error";
-})(ResultType || (ResultType = {}));
-/**
- * Performs pattern matching on a URL pathname and returns information about
- * the match.
- *
- * @see https://reactrouter.com/utils/match-path
- */
-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((memo, _ref, index) => {
-    let {
-      paramName,
-      isOptional
-    } = _ref;
-    // We need to compute the pathnameBase here using the raw splat value
-    // instead of using params["*"] later because it will be decoded then
-    if (paramName === "*") {
-      let splatValue = captureGroups[index] || "";
-      pathnameBase = matchedPathname.slice(0, matchedPathname.length - splatValue.length).replace(/(.)\/+$/, "$1");
-    }
-    const value = captureGroups[index];
-    if (isOptional && !value) {
-      memo[paramName] = undefined;
-    } else {
-      memo[paramName] = (value || "").replace(/%2F/g, "/");
-    }
-    return memo;
-  }, {});
-  return {
-    params,
-    pathname: matchedPathname,
-    pathnameBase,
-    pattern
-  };
-}
-function compilePath(path, caseSensitive, end) {
-  if (caseSensitive === void 0) {
-    caseSensitive = false;
-  }
-  if (end === void 0) {
-    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(/\/*\*?$/, "") // Ignore trailing / and /*, we'll handle it below
-  .replace(/^\/*/, "/") // Make sure it has a leading /
-  .replace(/[\\.*+^${}|()[\]]/g, "\\$&") // Escape special regex chars
-  .replace(/\/:([\w-]+)(\?)?/g, (_, paramName, isOptional) => {
-    params.push({
-      paramName,
-      isOptional: isOptional != null
-    });
-    return isOptional ? "/?([^\\/]+)?" : "/([^\\/]+)";
-  });
-  if (path.endsWith("*")) {
-    params.push({
-      paramName: "*"
-    });
-    regexpSource += path === "*" || path === "/*" ? "(.*)$" // Already matched the initial /, just match the rest
-    : "(?:\\/(.+)|\\/*)$"; // Don't include the / in params["*"]
-  } else if (end) {
-    // When matching to the end, ignore trailing slashes
-    regexpSource += "\\/*$";
-  } else if (path !== "" && path !== "/") {
-    // If our path is non-empty and contains anything beyond an initial slash,
-    // then we have _some_ form of path in our regex, so we should expect to
-    // match only if we find the end of this path segment.  Look for an optional
-    // non-captured trailing slash (to match a portion of the URL) or the end
-    // of the path (if we've matched to the end).  We used to do this with a
-    // word boundary but that gives false positives on routes like
-    // /user-preferences since `-` counts as a word boundary.
-    regexpSource += "(?:(?=\\/|$))";
-  } else ;
-  let matcher = new RegExp(regexpSource, caseSensitive ? undefined : "i");
-  return [matcher, params];
-}
-/**
- * @private
- */
-function stripBasename(pathname, basename) {
-  if (basename === "/") return pathname;
-  if (!pathname.toLowerCase().startsWith(basename.toLowerCase())) {
-    return null;
-  }
-  // We want to leave trailing slash behavior in the user's control, so if they
-  // specify a basename with a trailing slash, we should support it
-  let startIndex = basename.endsWith("/") ? basename.length - 1 : basename.length;
-  let nextChar = pathname.charAt(startIndex);
-  if (nextChar && nextChar !== "/") {
-    // pathname does not start with basename/
-    return null;
-  }
-  return pathname.slice(startIndex) || "/";
-}
-/**
- * Returns a resolved path object relative to the given pathname.
- *
- * @see https://reactrouter.com/utils/resolve-path
- */
-function resolvePath(to, fromPathname) {
-  if (fromPathname === void 0) {
-    fromPathname = "/";
-  }
-  let {
-    pathname: toPathname,
-    search = "",
-    hash = ""
-  } = typeof to === "string" ? parsePath(to) : to;
-  let pathname = toPathname ? toPathname.startsWith("/") ? toPathname : resolvePathname(toPathname, fromPathname) : 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 === "..") {
-      // Keep the root "" segment so the pathname starts at /
-      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.";
-}
-/**
- * @private
- *
- * When processing relative navigation we want to ignore ancestor routes that
- * do not contribute to the path, such that index/pathless layout routes don't
- * interfere.
- *
- * For example, when moving a route element into an index route and/or a
- * pathless layout route, relative link behavior contained within should stay
- * the same.  Both of the following examples should link back to the root:
- *
- *   <Route path="/">
- *     <Route path="accounts" element={<Link to=".."}>
- *   </Route>
- *
- *   <Route path="/">
- *     <Route path="accounts">
- *       <Route element={<AccountsLayout />}>       // <-- Does not contribute
- *         <Route index element={<Link to=".."} />  // <-- Does not contribute
- *       </Route
- *     </Route>
- *   </Route>
- */
-function getPathContributingMatches(matches) {
-  return matches.filter((match, index) => index === 0 || match.route.path && match.route.path.length > 0);
-}
-// Return the array of pathnames for the current route matches - used to
-// generate the routePathnames input for resolveTo()
-function getResolveToMatches(matches, v7_relativeSplatPath) {
-  let pathMatches = getPathContributingMatches(matches);
-  // When v7_relativeSplatPath is enabled, use the full pathname for the leaf
-  // match so we include splat values for "." links.  See:
-  // https://github.com/remix-run/react-router/issues/11052#issuecomment-1836589329
-  if (v7_relativeSplatPath) {
-    return pathMatches.map((match, idx) => idx === matches.length - 1 ? match.pathname : match.pathnameBase);
-  }
-  return pathMatches.map(match => match.pathnameBase);
-}
-/**
- * @private
- */
-function resolveTo(toArg, routePathnames, locationPathname, isPathRelative) {
-  if (isPathRelative === void 0) {
-    isPathRelative = false;
-  }
-  let to;
-  if (typeof toArg === "string") {
-    to = parsePath(toArg);
-  } else {
-    to = _extends$2({}, 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;
-  // Routing is relative to the current pathname if explicitly requested.
-  //
-  // If a pathname is explicitly provided in `to`, it should be relative to the
-  // route context. This is explained in `Note on `<Link to>` values` in our
-  // migration guide from v5 as a means of disambiguation between `to` values
-  // that begin with `/` and those that do not. However, this is problematic for
-  // `to` values that do not provide a pathname. `to` can simply be a search or
-  // hash string, in which case we should assume that the navigation is relative
-  // to the current location's pathname and *not* the route pathname.
-  if (toPathname == null) {
-    from = locationPathname;
-  } else {
-    let routePathnameIndex = routePathnames.length - 1;
-    // With relative="route" (the default), each leading .. segment means
-    // "go up one route" instead of "go up one URL segment".  This is a key
-    // difference from how <a href> works and a major reason we call this a
-    // "to" value instead of a "href".
-    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);
-  // Ensure the pathname has a trailing slash if the original "to" had one
-  let hasExplicitTrailingSlash = toPathname && toPathname !== "/" && toPathname.endsWith("/");
-  // Or if this was a link to the current path which has a trailing slash
-  let hasCurrentTrailingSlash = (isEmptyPath || toPathname === ".") && locationPathname.endsWith("/");
-  if (!path.pathname.endsWith("/") && (hasExplicitTrailingSlash || hasCurrentTrailingSlash)) {
-    path.pathname += "/";
-  }
-  return path;
-}
-/**
- * @private
- */
-const joinPaths = paths => paths.join("/").replace(/\/\/+/g, "/");
-/**
- * @private
- */
-const normalizeSearch = search => !search || search === "?" ? "" : search.startsWith("?") ? search : "?" + search;
-/**
- * @private
- */
-const normalizeHash = hash => !hash || hash === "#" ? "" : hash.startsWith("#") ? hash : "#" + hash;
-
-const validMutationMethodsArr = ["post", "put", "patch", "delete"];
-new Set(validMutationMethodsArr);
-const validRequestMethodsArr = ["get", ...validMutationMethodsArr];
-new Set(validRequestMethodsArr);
-
-/**
- * React Router v6.23.1
- *
- * 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 _extends$1() {
-  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$1.apply(this, arguments);
-}
-
-// Create react-specific types from the agnostic types in @remix-run/router to
-// export from react-router
-const DataRouterContext = /*#__PURE__*/React.createContext(null);
-{
-  DataRouterContext.displayName = "DataRouter";
-}
-const DataRouterStateContext = /*#__PURE__*/React.createContext(null);
-{
-  DataRouterStateContext.displayName = "DataRouterState";
-}
-const AwaitContext = /*#__PURE__*/React.createContext(null);
-{
-  AwaitContext.displayName = "Await";
-}
-
-/**
- * A Navigator is a "location changer"; it's how you get to different locations.
- *
- * Every history instance conforms to the Navigator interface, but the
- * distinction is useful primarily when it comes to the low-level `<Router>` API
- * where both the location and a navigator must be provided separately in order
- * to avoid "tearing" that may occur in a suspense-enabled app if the action
- * and/or location were to be read directly from the history instance.
- */
-
-const NavigationContext = /*#__PURE__*/React.createContext(null);
-{
-  NavigationContext.displayName = "Navigation";
-}
-const LocationContext = /*#__PURE__*/React.createContext(null);
-{
-  LocationContext.displayName = "Location";
-}
-const RouteContext = /*#__PURE__*/React.createContext({
-  outlet: null,
-  matches: [],
-  isDataRoute: false
-});
-{
-  RouteContext.displayName = "Route";
-}
-const RouteErrorContext = /*#__PURE__*/React.createContext(null);
-{
-  RouteErrorContext.displayName = "RouteError";
-}
-
-/**
- * Returns the full href for the given "to" value. This is useful for building
- * custom links that are also accessible and preserve right-click behavior.
- *
- * @see https://reactrouter.com/hooks/use-href
- */
-function useHref(to, _temp) {
-  let {
-    relative
-  } = _temp === void 0 ? {} : _temp;
-  !useInRouterContext() ? invariant(false, // 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.")  : void 0;
-  let {
-    basename,
-    navigator
-  } = React.useContext(NavigationContext);
-  let {
-    hash,
-    pathname,
-    search
-  } = useResolvedPath(to, {
-    relative
-  });
-  let joinedPathname = pathname;
-
-  // If we're operating within a basename, prepend it to the pathname prior
-  // to creating the href.  If this is a root navigation, then just use the raw
-  // basename which allows the basename to have full control over the presence
-  // of a trailing slash on root links
-  if (basename !== "/") {
-    joinedPathname = pathname === "/" ? basename : joinPaths([basename, pathname]);
-  }
-  return navigator.createHref({
-    pathname: joinedPathname,
-    search,
-    hash
-  });
-}
-
-/**
- * Returns true if this component is a descendant of a `<Router>`.
- *
- * @see https://reactrouter.com/hooks/use-in-router-context
- */
-function useInRouterContext() {
-  return React.useContext(LocationContext) != null;
-}
-
-/**
- * Returns the current location object, which represents the current URL in web
- * browsers.
- *
- * Note: If you're using this it may mean you're doing some of your own
- * "routing" in your app, and we'd like to know what your use case is. We may
- * be able to provide something higher-level to better suit your needs.
- *
- * @see https://reactrouter.com/hooks/use-location
- */
-function useLocation() {
-  !useInRouterContext() ? invariant(false, // 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.")  : void 0;
-  return React.useContext(LocationContext).location;
-}
-
-/**
- * The interface for the navigate() function returned from useNavigate().
- */
-
-const navigateEffectWarning = "You should call navigate() in a React.useEffect(), not when " + "your component is first rendered.";
-
-// Mute warnings for calls to useNavigate in SSR environments
-function useIsomorphicLayoutEffect(cb) {
-  let isStatic = React.useContext(NavigationContext).static;
-  if (!isStatic) {
-    // We should be able to get rid of this once react 18.3 is released
-    // See: https://github.com/facebook/react/pull/26395
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    React.useLayoutEffect(cb);
-  }
-}
-
-/**
- * Returns an imperative method for changing the location. Used by `<Link>`s, but
- * may also be used by other elements to change the location.
- *
- * @see https://reactrouter.com/hooks/use-navigate
- */
-function useNavigate() {
-  let {
-    isDataRoute
-  } = React.useContext(RouteContext);
-  // Conditional usage is OK here because the usage of a data router is static
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  return isDataRoute ? useNavigateStable() : useNavigateUnstable();
-}
-function useNavigateUnstable() {
-  !useInRouterContext() ? invariant(false, // 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.")  : void 0;
-  let dataRouterContext = React.useContext(DataRouterContext);
-  let {
-    basename,
-    future,
-    navigator
-  } = React.useContext(NavigationContext);
-  let {
-    matches
-  } = React.useContext(RouteContext);
-  let {
-    pathname: locationPathname
-  } = useLocation();
-  let routePathnamesJson = JSON.stringify(getResolveToMatches(matches, future.v7_relativeSplatPath));
-  let activeRef = React.useRef(false);
-  useIsomorphicLayoutEffect(() => {
-    activeRef.current = true;
-  });
-  let navigate = React.useCallback(function (to, options) {
-    if (options === void 0) {
-      options = {};
-    }
-    warning(activeRef.current, navigateEffectWarning) ;
-
-    // Short circuit here since if this happens on first render the navigate
-    // is useless because we haven't wired up our history listener yet
-    if (!activeRef.current) return;
-    if (typeof to === "number") {
-      navigator.go(to);
-      return;
-    }
-    let path = resolveTo(to, JSON.parse(routePathnamesJson), locationPathname, options.relative === "path");
-
-    // If we're operating within a basename, prepend it to the pathname prior
-    // to handing off to history (but only if we're not in a data router,
-    // otherwise it'll prepend the basename inside of the router).
-    // If this is a root navigation, then we navigate to the raw basename
-    // which allows the basename to have full control over the presence of a
-    // trailing slash on root links
-    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;
-}
-
-/**
- * Resolves the pathname of the given `to` value against the current location.
- *
- * @see https://reactrouter.com/hooks/use-resolved-path
- */
-function useResolvedPath(to, _temp2) {
-  let {
-    relative
-  } = _temp2 === void 0 ? {} : _temp2;
-  let {
-    future
-  } = React.useContext(NavigationContext);
-  let {
-    matches
-  } = React.useContext(RouteContext);
-  let {
-    pathname: locationPathname
-  } = useLocation();
-  let routePathnamesJson = JSON.stringify(getResolveToMatches(matches, future.v7_relativeSplatPath));
-  return React.useMemo(() => resolveTo(to, JSON.parse(routePathnamesJson), locationPathname, relative === "path"), [to, routePathnamesJson, locationPathname, relative]);
-}
-var DataRouterHook$1 = /*#__PURE__*/function (DataRouterHook) {
-  DataRouterHook["UseBlocker"] = "useBlocker";
-  DataRouterHook["UseRevalidator"] = "useRevalidator";
-  DataRouterHook["UseNavigateStable"] = "useNavigate";
-  return DataRouterHook;
-}(DataRouterHook$1 || {});
-var DataRouterStateHook$1 = /*#__PURE__*/function (DataRouterStateHook) {
-  DataRouterStateHook["UseBlocker"] = "useBlocker";
-  DataRouterStateHook["UseLoaderData"] = "useLoaderData";
-  DataRouterStateHook["UseActionData"] = "useActionData";
-  DataRouterStateHook["UseRouteError"] = "useRouteError";
-  DataRouterStateHook["UseNavigation"] = "useNavigation";
-  DataRouterStateHook["UseRouteLoaderData"] = "useRouteLoaderData";
-  DataRouterStateHook["UseMatches"] = "useMatches";
-  DataRouterStateHook["UseRevalidator"] = "useRevalidator";
-  DataRouterStateHook["UseNavigateStable"] = "useNavigate";
-  DataRouterStateHook["UseRouteId"] = "useRouteId";
-  return DataRouterStateHook;
-}(DataRouterStateHook$1 || {});
-function getDataRouterConsoleError$1(hookName) {
-  return hookName + " must be used within a data router.  See https://reactrouter.com/routers/picking-a-router.";
-}
-function useDataRouterContext$1(hookName) {
-  let ctx = React.useContext(DataRouterContext);
-  !ctx ? invariant(false, getDataRouterConsoleError$1(hookName))  : void 0;
-  return ctx;
-}
-function useRouteContext(hookName) {
-  let route = React.useContext(RouteContext);
-  !route ? invariant(false, getDataRouterConsoleError$1(hookName))  : void 0;
-  return route;
-}
-
-// Internal version with hookName-aware debugging
-function useCurrentRouteId(hookName) {
-  let route = useRouteContext(hookName);
-  let thisRoute = route.matches[route.matches.length - 1];
-  !thisRoute.route.id ? invariant(false, hookName + " can only be used on routes that contain a unique \"id\"")  : void 0;
-  return thisRoute.route.id;
-}
-
-/**
- * Returns the ID for the nearest contextual route
- */
-function useRouteId() {
-  return useCurrentRouteId(DataRouterStateHook$1.UseRouteId);
-}
-
-/**
- * Stable version of useNavigate that is used when we are in the context of
- * a RouterProvider.
- */
-function useNavigateStable() {
-  let {
-    router
-  } = useDataRouterContext$1(DataRouterHook$1.UseNavigateStable);
-  let id = useCurrentRouteId(DataRouterStateHook$1.UseNavigateStable);
-  let activeRef = React.useRef(false);
-  useIsomorphicLayoutEffect(() => {
-    activeRef.current = true;
-  });
-  let navigate = React.useCallback(function (to, options) {
-    if (options === void 0) {
-      options = {};
-    }
-    warning(activeRef.current, navigateEffectWarning) ;
-
-    // Short circuit here since if this happens on first render the navigate
-    // is useless because we haven't wired up our router subscriber yet
-    if (!activeRef.current) return;
-    if (typeof to === "number") {
-      router.navigate(to);
-    } else {
-      router.navigate(to, _extends$1({
-        fromRouteId: id
-      }, options));
-    }
-  }, [router, id]);
-  return navigate;
-}
-new Promise(() => {});
-
-/**
- * React Router DOM v6.23.1
- *
- * 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 _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
-const defaultMethod = "get";
-const defaultEncType = "application/x-www-form-urlencoded";
-function isHtmlElement(object) {
-  return object != null && typeof object.tagName === "string";
-}
-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) // Ignore clicks with modifier keys
-  ;
-}
-// One-time check for submitter support
-let _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;
-}
-const supportedFormEncTypes = 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)) {
-    // When grabbing the action from the element, it will have had the basename
-    // prefixed to ensure non-JS scenarios work, so strip it since we'll
-    // re-prefix in the router
-    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>");
-    }
-    // <button>/<input type="submit"> may override attributes of <form>
-    // When grabbing the action from the element, it will have had the basename
-    // prefixed to ensure non-JS scenarios work, so strip it since we'll
-    // re-prefix in the router
-    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;
-    // Build a FormData object populated from a form and submitter
-    formData = new FormData(form, target);
-    // If this browser doesn't support the `FormData(el, submitter)` format,
-    // then tack on the submitter value at the end.  This is a lightweight
-    // solution that is not 100% spec compliant.  For complete support in older
-    // browsers, consider using the `formdata-submitter-polyfill` package
-    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;
-  }
-  // Send body for <Form encType="text/plain" so we encode it into text
-  if (formData && encType === "text/plain") {
-    body = formData;
-    formData = undefined;
-  }
-  return {
-    action,
-    method: method.toLowerCase(),
-    encType,
-    formData,
-    body
-  };
-}
-
-const _excluded = ["onClick", "relative", "reloadDocument", "replace", "state", "target", "to", "preventScrollReset", "unstable_viewTransition"],
-  _excluded2 = ["aria-current", "caseSensitive", "className", "end", "style", "to", "unstable_viewTransition", "children"],
-  _excluded3 = ["fetcherKey", "navigate", "reloadDocument", "replace", "state", "method", "action", "onSubmit", "relative", "preventScrollReset", "unstable_viewTransition"];
-// HEY YOU! DON'T TOUCH THIS VARIABLE!
-//
-// It is replaced with the proper version at build time via a babel plugin in
-// the rollup config.
-//
-// Export a global property onto the window for React Router detection by the
-// Core Web Vitals Technology Report.  This way they can configure the `wappalyzer`
-// to detect and properly classify live websites as being built with React Router:
-// https://github.com/HTTPArchive/wappalyzer/blob/main/src/technologies/r.json
-const REACT_ROUTER_VERSION = "6";
-try {
-  window.__reactRouterVersion = REACT_ROUTER_VERSION;
-} catch (e) {
-  // no-op
-}
-const ViewTransitionContext = /*#__PURE__*/React.createContext({
-  isTransitioning: false
-});
-{
-  ViewTransitionContext.displayName = "ViewTransition";
-}
-const FetchersContext = /*#__PURE__*/React.createContext(new Map());
-{
-  FetchersContext.displayName = "Fetchers";
-}
-const isBrowser = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
-const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
-/**
- * The public API for rendering a history-aware `<a>`.
- */
-const Link = /*#__PURE__*/React.forwardRef(function LinkWithRef(_ref7, ref) {
-  let {
-      onClick,
-      relative,
-      reloadDocument,
-      replace,
-      state,
-      target,
-      to,
-      preventScrollReset,
-      unstable_viewTransition
-    } = _ref7,
-    rest = _objectWithoutPropertiesLoose(_ref7, _excluded);
-  let {
-    basename
-  } = React.useContext(NavigationContext);
-  // Rendered into <a href> for absolute URLs
-  let absoluteHref;
-  let isExternal = false;
-  if (typeof to === "string" && ABSOLUTE_URL_REGEX.test(to)) {
-    // Render the absolute href server- and client-side
-    absoluteHref = to;
-    // Only check for external origins client-side
-    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) {
-          // Strip the protocol/origin/basename for same-origin absolute URLs
-          to = path + targetUrl.search + targetUrl.hash;
-        } else {
-          isExternal = true;
-        }
-      } catch (e) {
-        // We can't do external URL detection without a valid URL
-        warning(false, "<Link to=\"" + to + "\"> contains an invalid URL which will probably break " + "when clicked - please update to a valid URL path.") ;
-      }
-    }
-  }
-  // Rendered into <a href> for relative URLs
-  let href = useHref(to, {
-    relative
-  });
-  let internalOnClick = useLinkClickHandler(to, {
-    replace,
-    state,
-    target,
-    preventScrollReset,
-    relative,
-    unstable_viewTransition
-  });
-  function handleClick(event) {
-    if (onClick) onClick(event);
-    if (!event.defaultPrevented) {
-      internalOnClick(event);
-    }
-  }
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/anchor-has-content
-    React.createElement("a", _extends({}, rest, {
-      href: absoluteHref || href,
-      onClick: isExternal || reloadDocument ? onClick : handleClick,
-      ref: ref,
-      target: target
-    }))
-  );
-});
-{
-  Link.displayName = "Link";
-}
-/**
- * A `<Link>` wrapper that knows if it's "active" or not.
- */
-const NavLink = /*#__PURE__*/React.forwardRef(function NavLinkWithRef(_ref8, ref) {
-  let {
-      "aria-current": ariaCurrentProp = "page",
-      caseSensitive = false,
-      className: classNameProp = "",
-      end = false,
-      style: styleProp,
-      to,
-      unstable_viewTransition,
-      children
-    } = _ref8,
-    rest = _objectWithoutPropertiesLoose(_ref8, _excluded2);
-  let path = useResolvedPath(to, {
-    relative: rest.relative
-  });
-  let location = useLocation();
-  let routerState = React.useContext(DataRouterStateContext);
-  let {
-    navigator,
-    basename
-  } = React.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) && unstable_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;
-  }
-  // If the `to` has a trailing slash, look at that exact spot.  Otherwise,
-  // we're looking for a slash _after_ what's in `to`.  For example:
-  //
-  // <NavLink to="/users"> and <NavLink to="/users/">
-  // both want to look for a / at index 6 to match URL `/users/matt`
-  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 : undefined;
-  let className;
-  if (typeof classNameProp === "function") {
-    className = classNameProp(renderProps);
-  } else {
-    // If the className prop is not a function, we use a default `active`
-    // class for <NavLink />s that are active. In v5 `active` was the default
-    // value for `activeClassName`, but we are removing that API and can still
-    // use the old default behavior for a cleaner upgrade path and keep the
-    // simple styling rules working as they currently do.
-    className = [classNameProp, isActive ? "active" : null, isPending ? "pending" : null, isTransitioning ? "transitioning" : null].filter(Boolean).join(" ");
-  }
-  let style = typeof styleProp === "function" ? styleProp(renderProps) : styleProp;
-  return /*#__PURE__*/React.createElement(Link, _extends({}, rest, {
-    "aria-current": ariaCurrent,
-    className: className,
-    ref: ref,
-    style: style,
-    to: to,
-    unstable_viewTransition: unstable_viewTransition
-  }), typeof children === "function" ? children(renderProps) : children);
-});
-{
-  NavLink.displayName = "NavLink";
-}
-/**
- * A `@remix-run/router`-aware `<form>`. It behaves like a normal form except
- * that the interaction with the server is with `fetch` instead of new document
- * requests, allowing components to add nicer UX to the page as the form is
- * submitted and returns with data.
- */
-const Form = /*#__PURE__*/React.forwardRef((_ref9, forwardedRef) => {
-  let {
-      fetcherKey,
-      navigate,
-      reloadDocument,
-      replace,
-      state,
-      method = defaultMethod,
-      action,
-      onSubmit,
-      relative,
-      preventScrollReset,
-      unstable_viewTransition
-    } = _ref9,
-    props = _objectWithoutPropertiesLoose(_ref9, _excluded3);
-  let submit = useSubmit();
-  let formAction = useFormAction(action, {
-    relative
-  });
-  let formMethod = method.toLowerCase() === "get" ? "get" : "post";
-  let submitHandler = event => {
-    onSubmit && onSubmit(event);
-    if (event.defaultPrevented) return;
-    event.preventDefault();
-    let submitter = event.nativeEvent.submitter;
-    let submitMethod = (submitter == null ? void 0 : submitter.getAttribute("formmethod")) || method;
-    submit(submitter || event.currentTarget, {
-      fetcherKey,
-      method: submitMethod,
-      navigate,
-      replace,
-      state,
-      relative,
-      preventScrollReset,
-      unstable_viewTransition
-    });
-  };
-  return /*#__PURE__*/React.createElement("form", _extends({
-    ref: forwardedRef,
-    method: formMethod,
-    action: formAction,
-    onSubmit: reloadDocument ? onSubmit : submitHandler
-  }, props));
-});
-{
-  Form.displayName = "Form";
-}
-//#endregion
-////////////////////////////////////////////////////////////////////////////////
-//#region Hooks
-////////////////////////////////////////////////////////////////////////////////
-var DataRouterHook;
-(function (DataRouterHook) {
-  DataRouterHook["UseScrollRestoration"] = "useScrollRestoration";
-  DataRouterHook["UseSubmit"] = "useSubmit";
-  DataRouterHook["UseSubmitFetcher"] = "useSubmitFetcher";
-  DataRouterHook["UseFetcher"] = "useFetcher";
-  DataRouterHook["useViewTransitionState"] = "useViewTransitionState";
-})(DataRouterHook || (DataRouterHook = {}));
-var DataRouterStateHook;
-(function (DataRouterStateHook) {
-  DataRouterStateHook["UseFetcher"] = "useFetcher";
-  DataRouterStateHook["UseFetchers"] = "useFetchers";
-  DataRouterStateHook["UseScrollRestoration"] = "useScrollRestoration";
-})(DataRouterStateHook || (DataRouterStateHook = {}));
-// Internal hooks
-function getDataRouterConsoleError(hookName) {
-  return hookName + " must be used within a data router.  See https://reactrouter.com/routers/picking-a-router.";
-}
-function useDataRouterContext(hookName) {
-  let ctx = React.useContext(DataRouterContext);
-  !ctx ? invariant(false, getDataRouterConsoleError(hookName))  : void 0;
-  return ctx;
-}
-// External hooks
-/**
- * Handles the click behavior for router `<Link>` components. This is useful if
- * you need to create custom `<Link>` components with the same click behavior we
- * use in our exported `<Link>`.
- */
-function useLinkClickHandler(to, _temp) {
-  let {
-    target,
-    replace: replaceProp,
-    state,
-    preventScrollReset,
-    relative,
-    unstable_viewTransition
-  } = _temp === void 0 ? {} : _temp;
-  let navigate = useNavigate();
-  let location = useLocation();
-  let path = useResolvedPath(to, {
-    relative
-  });
-  return React.useCallback(event => {
-    if (shouldProcessLinkClick(event, target)) {
-      event.preventDefault();
-      // If the URL hasn't changed, a regular <a> will do a replace instead of
-      // a push, so do the same here unless the replace prop is explicitly set
-      let replace = replaceProp !== undefined ? replaceProp : createPath(location) === createPath(path);
-      navigate(to, {
-        replace,
-        state,
-        preventScrollReset,
-        relative,
-        unstable_viewTransition
-      });
-    }
-  }, [location, navigate, path, replaceProp, state, target, to, preventScrollReset, relative, unstable_viewTransition]);
-}
-function validateClientSideSubmission() {
-  if (typeof document === "undefined") {
-    throw new Error("You are calling submit during the server render. " + "Try calling submit within a `useEffect` or callback instead.");
-  }
-}
-let fetcherId = 0;
-let getUniqueFetcherId = () => "__" + String(++fetcherId) + "__";
-/**
- * Returns a function that may be used to programmatically submit a form (or
- * some arbitrary data) to the server.
- */
-function useSubmit() {
-  let {
-    router
-  } = useDataRouterContext(DataRouterHook.UseSubmit);
-  let {
-    basename
-  } = React.useContext(NavigationContext);
-  let currentRouteId = useRouteId();
-  return React.useCallback(function (target, options) {
-    if (options === void 0) {
-      options = {};
-    }
-    validateClientSideSubmission();
-    let {
-      action,
-      method,
-      encType,
-      formData,
-      body
-    } = getFormSubmissionInfo(target, basename);
-    if (options.navigate === false) {
-      let key = options.fetcherKey || getUniqueFetcherId();
-      router.fetch(key, currentRouteId, options.action || action, {
-        preventScrollReset: options.preventScrollReset,
-        formData,
-        body,
-        formMethod: options.method || method,
-        formEncType: options.encType || encType,
-        unstable_flushSync: options.unstable_flushSync
-      });
-    } else {
-      router.navigate(options.action || action, {
-        preventScrollReset: options.preventScrollReset,
-        formData,
-        body,
-        formMethod: options.method || method,
-        formEncType: options.encType || encType,
-        replace: options.replace,
-        state: options.state,
-        fromRouteId: currentRouteId,
-        unstable_flushSync: options.unstable_flushSync,
-        unstable_viewTransition: options.unstable_viewTransition
-      });
-    }
-  }, [router, basename, currentRouteId]);
-}
-// v7: Eventually we should deprecate this entirely in favor of using the
-// router method directly?
-function useFormAction(action, _temp2) {
-  let {
-    relative
-  } = _temp2 === void 0 ? {} : _temp2;
-  let {
-    basename
-  } = React.useContext(NavigationContext);
-  let routeContext = React.useContext(RouteContext);
-  !routeContext ? invariant(false, "useFormAction must be used inside a RouteContext")  : void 0;
-  let [match] = routeContext.matches.slice(-1);
-  // Shallow clone path so we can modify it below, otherwise we modify the
-  // object referenced by useMemo inside useResolvedPath
-  let path = _extends({}, useResolvedPath(action ? action : ".", {
-    relative
-  }));
-  // If no action was specified, browsers will persist current search params
-  // when determining the path, so match that behavior
-  // https://github.com/remix-run/remix/issues/927
-  let location = useLocation();
-  if (action == null) {
-    // Safe to write to this directly here since if action was undefined, we
-    // would have called useResolvedPath(".") which will never include a search
-    path.search = location.search;
-    // When grabbing search params from the URL, remove any included ?index param
-    // since it might not apply to our contextual route.  We add it back based
-    // on match.route.index below
-    let params = new URLSearchParams(path.search);
-    if (params.has("index") && params.get("index") === "") {
-      params.delete("index");
-      path.search = params.toString() ? "?" + params.toString() : "";
-    }
-  }
-  if ((!action || action === ".") && match.route.index) {
-    path.search = path.search ? path.search.replace(/^\?/, "?index&") : "?index";
-  }
-  // If we're operating within a basename, prepend it to the pathname prior
-  // to creating the form action.  If this is a root navigation, then just use
-  // the raw basename which allows the basename to have full control over the
-  // presence of a trailing slash on root actions
-  if (basename !== "/") {
-    path.pathname = path.pathname === "/" ? basename : joinPaths([basename, path.pathname]);
-  }
-  return createPath(path);
-}
-/**
- * Return a boolean indicating if there is an active view transition to the
- * given href.  You can use this value to render CSS classes or viewTransitionName
- * styles onto your elements
- *
- * @param href The destination href
- * @param [opts.relative] Relative routing type ("route" | "path")
- */
-function useViewTransitionState(to, opts) {
-  if (opts === void 0) {
-    opts = {};
-  }
-  let vtContext = React.useContext(ViewTransitionContext);
-  !(vtContext != null) ? invariant(false, "`unstable_useViewTransitionState` must be used within `react-router-dom`'s `RouterProvider`.  " + "Did you accidentally import `RouterProvider` from `react-router`?")  : void 0;
-  let {
-    basename
-  } = useDataRouterContext(DataRouterHook.useViewTransitionState);
-  let path = useResolvedPath(to, {
-    relative: opts.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;
-  // Transition is active if we're going to or coming from the indicated
-  // destination.  This ensures that other PUSH navigations that reverse
-  // an indicated transition apply.  I.e., on the list view you have:
-  //
-  //   <NavLink to="/details/1" unstable_viewTransition>
-  //
-  // If you click the breadcrumb back to the list view:
-  //
-  //   <NavLink to="/list" unstable_viewTransition>
-  //
-  // We should apply the transition because it's indicated as active going
-  // from /list -> /details/1 and therefore should be active on the reverse
-  // (even though this isn't strictly a POP reverse)
-  return matchPath(path.pathname, nextPath) != null || matchPath(path.pathname, currentPath) != null;
-}
-
 var css_248z$5 = ":root, :host {\n  --rpf-brand-black: hsla(60, 4%, 11%, 1);\n  --rpf-brand-leaf: hsla(123, 43%, 48%, 1);\n  --rpf-brand-raspberry: hsla(342, 71%, 47%, 1);\n  --rpf-raspberry-50: hsla(338, 57%, 97%, 1);\n  --rpf-raspberry-100: hsla(342, 62%, 96%, 1);\n  --rpf-raspberry-200: hsla(344, 73%, 93%, 1);\n  --rpf-raspberry-400: hsla(341, 63%, 84%, 1);\n  --rpf-raspberry-500: hsla(343, 62%, 68%, 1);\n  --rpf-raspberry-600: hsla(343, 64%, 58%, 1);\n  --rpf-raspberry-800: hsla(342, 71%, 47%, 1);\n  --rpf-raspberry-900: hsla(340, 78%, 36%, 1);\n}\n\n:root, :host {\n  --rpf-red-100: hsla(4, 89%, 96%, 1);\n  --rpf-red-200: hsla(1, 87%, 91%, 1);\n  --rpf-red-400: hsla(1, 87%, 82%, 1);\n  --rpf-red-600: hsla(1, 87%, 72%, 1);\n  --rpf-red-800: hsla(1, 87%, 63%, 1);\n  --rpf-red-900: hsla(1, 52%, 50%, 1);\n  --rpf-green-100: hsla(125, 41%, 95%, 1);\n  --rpf-green-200: hsla(122, 39%, 87%, 1);\n  --rpf-green-400: hsla(123, 40%, 74%, 1);\n  --rpf-green-600: hsla(123, 40%, 61%, 1);\n  --rpf-green-800: hsla(123, 43%, 48%, 1);\n  --rpf-green-900: hsla(123, 43%, 34%, 1);\n  --rpf-teal-100: hsla(176, 55%, 94%, 1);\n  --rpf-teal-200: hsla(174, 55%, 85%, 1);\n  --rpf-teal-400: hsla(174, 55%, 70%, 1);\n  --rpf-teal-600: hsla(174, 56%, 56%, 1);\n  --rpf-teal-800: hsla(174, 81%, 41%, 1);\n  --rpf-teal-900: hsla(174, 81%, 27%, 1);\n  --rpf-orange-100: hsla(31, 100%, 95%, 1);\n  --rpf-orange-200: hsla(32, 100%, 88%, 1);\n  --rpf-orange-400: hsla(31, 100%, 77%, 1);\n  --rpf-orange-600: hsla(31, 99%, 65%, 1);\n  --rpf-orange-800: hsla(31, 99%, 54%, 1);\n  --rpf-orange-900: hsla(31, 85%, 35%, 1);\n  --rpf-yellow-100: hsla(51, 100%, 95%, 1);\n  --rpf-yellow-200: hsla(52, 100%, 87%, 1);\n  --rpf-yellow-400: hsla(51, 100%, 75%, 1);\n  --rpf-yellow-600: hsla(52, 100%, 63%, 1);\n  --rpf-yellow-800: hsla(52, 100%, 50%, 1);\n  --rpf-yellow-900: hsla(52, 100%, 26%, 1);\n  --rpf-purple-100: hsla(282, 36%, 95%, 1);\n  --rpf-purple-200: hsla(279, 38%, 87%, 1);\n  --rpf-purple-400: hsla(279, 38%, 73%, 1);\n  --rpf-purple-600: hsla(279, 37%, 60%, 1);\n  --rpf-purple-800: hsla(279, 43%, 47%, 1);\n  --rpf-purple-900: hsla(280, 43%, 37%, 1);\n  --rpf-navy-100: hsla(235, 38%, 94%, 1);\n  --rpf-navy-200: hsla(234, 38%, 84%, 1);\n  --rpf-navy-400: hsla(235, 38%, 69%, 1);\n  --rpf-navy-600: hsla(235, 38%, 53%, 1);\n  --rpf-navy-800: hsla(235, 63%, 37%, 1);\n  --rpf-navy-900: hsla(234, 63%, 30%, 1);\n  --rpf-blue-100: hsla(203, 86%, 95%, 1);\n  --rpf-blue-200: hsla(204, 88%, 87%, 1);\n  --rpf-blue-400: hsla(204, 88%, 74%, 1);\n  --rpf-blue-600: hsla(204, 89%, 60%, 1);\n  --rpf-blue-800: hsla(204, 100%, 47%, 1);\n  --rpf-blue-900: hsla(204, 99%, 37%, 1);\n}\n\n:root, :host {\n  --rpf-white: hsla(0, 0%, 100%, 1);\n  --rpf-off-white: hsla(225, 25%, 97%, 1);\n  --rpf-grey-50: hsla(210, 8%, 95%, 1);\n  --rpf-grey-100: hsla(228, 10%, 90%, 1);\n  --rpf-grey-150: hsla(223, 9%, 85%, 1);\n  --rpf-grey-200: hsla(228, 10%, 80%, 1);\n  --rpf-grey-300: hsla(229, 9%, 75%, 1);\n  --rpf-grey-400: hsla(229, 8%, 61%, 1);\n  --rpf-grey-500: hsla(229, 9%, 42%, 1);\n  --rpf-grey-600: hsla(228, 9%, 32%, 1);\n  --rpf-grey-700: hsla(228, 9%, 22%, 1);\n  --rpf-grey-800: hsla(232, 9%, 18%, 1);\n  --rpf-grey-850: hsla(228, 9%, 15%, 1);\n  --rpf-grey-900: hsla(228, 9%, 10%, 1);\n  --rpf-grey-950: hsla(228, 8%, 5%, 1);\n  --rpf-black: hsla(0, 0%, 0%, 1);\n}\n\n:root, :host {\n  --rpf-alert-error-highlight: hsla(0, 88%, 99%, 1);\n  --rpf-alert-error: hsla(0, 88%, 33%, 1);\n  --rpf-alert-information-highlight: hsla(225, 64%, 99%, 1);\n  --rpf-alert-information: hsla(225, 64%, 33%, 1);\n  --rpf-alert-success-highlight: hsla(136, 90%, 99%, 1);\n  --rpf-alert-success: hsla(136, 90%, 20%, 1);\n  --rpf-alert-warning-highlight: hsla(26, 70%, 99%, 1);\n  --rpf-alert-warning: hsla(26, 70%, 29%, 1);\n}\n\n:root, :host {\n  --font-size-0-5: 0.5rem;\n  --font-size-0-75: 0.75rem;\n  --font-size-1: 1rem;\n  --font-size-1-5: 1.25rem;\n  --font-size-2: 1.5rem;\n  --font-size-3: 2rem;\n  --font-size-4: 2.5rem;\n  --font-size-5: 3rem;\n  --font-size-6: 3.5rem;\n  --font-size-7: 4rem;\n  --font-size-8: 4.5rem;\n  --font-size-9: 5rem;\n}\n\n:root, :host {\n  --font-weight-regular: 400;\n  --font-weight-bold: 700;\n}\n\n:root, :host {\n  --border-radius: var(--space-1);\n  --border-width-sm: 1px;\n  --border-width-md: 2px;\n  --border-width-lg: 3px;\n  --alert-border-width: var(--border-width-md);\n  --fieldset-border-width: var(--border-width-md);\n  --input-border-width: var(--border-width-md);\n}\n\n:root, :host {\n  --space-0-125: 0.0625rem;\n  --space-0-25: 0.125rem;\n  --space-0-5: 0.25rem;\n  --space-1: 0.5rem;\n  --space-1-5: 0.75rem;\n  --space-2: 1rem;\n  --space-3: 1.5rem;\n  --space-4: 2rem;\n  --space-5: 2.5rem;\n  --space-6: 3rem;\n  --space-7: 3.5rem;\n  --space-8: 4rem;\n  --space-9: 4.5rem;\n  --space-10: 5rem;\n}\n\n.rpf-button {\n  --rpf-button-background-color: var(--rpf-navy-800);\n  --rpf-button-background-color-hover: var(--rpf-navy-900);\n  --rpf-button-background-color-active: var(--rpf-navy-600);\n  --rpf-button-background-color-disabled: var(--rpf-grey-600);\n  --rpf-button-text-color: var(--rpf-white);\n  --rpf-button-border-radius: var(--border-radius);\n  --rpf-button-lg-height: 48px;\n  --rpf-button-sm-height: 32px;\n  /* 44px min-height to meet WCAG AAA target size requirements */\n  --rpf-button-min-target-size: 44px;\n  all: unset;\n  align-items: center;\n  box-sizing: border-box;\n  color: var(--rpf-button-text-color);\n  /*\n   * We've decided to follow the masses on this and have a pointer on buttons.\n   * Google, Facebook, Twitter, Mozilla, and Microsoft amongst many others have a pointer on buttons.\n   */\n  cursor: pointer;\n  display: flex;\n  font-size: var(--font-size-1-5);\n  font-weight: var(--font-weight-bold);\n  gap: var(--space-1);\n  min-block-size: var(--rpf-button-lg-height);\n  padding: var(--space-1) var(--space-2);\n  position: relative;\n  text-align: center;\n  text-decoration: none;\n  /* Fixes a rendering error that sometimes occurs due to negative z-index */\n  transform: scale(1);\n  inline-size: fit-content;\n  /* A bit of a hack to allow for separate visual and target heights */\n}\n.rpf-button::before {\n  background-color: var(--rpf-button-background-color);\n  border-color: var(--rpf-button-background-color);\n  border-radius: var(--rpf-button-border-radius);\n  border-style: solid;\n  border-width: 2px;\n  content: \"\";\n  display: block;\n  inset: 0;\n  position: absolute;\n  /* To ensure it renders under its siblings */\n  z-index: -1;\n}\n.rpf-button:hover::before {\n  background-color: var(--rpf-button-background-color-hover);\n  border-color: var(--rpf-button-background-color-hover);\n}\n.rpf-button:active::before {\n  background-color: var(--rpf-button-background-color-active);\n  border-color: var(--rpf-button-background-color-active);\n}\n.rpf-button:focus-visible::before {\n  outline: 2px solid var(--rpf-button-background-color);\n  outline-offset: 3px;\n}\n.rpf-button:disabled, .rpf-button--disabled {\n  cursor: default;\n}\n.rpf-button:disabled::before, .rpf-button:disabled:hover::before, .rpf-button--disabled::before, .rpf-button--disabled:hover::before {\n  border-color: var(--rpf-button-background-color-disabled);\n  background-color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--secondary {\n  color: var(--rpf-button-background-color);\n}\n.rpf-button--secondary::before {\n  background-color: var(--rpf-button-text-color);\n}\n.rpf-button--secondary:hover {\n  color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--secondary:hover::before {\n  background-color: var(--rpf-button-text-color);\n  border-color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--secondary:active {\n  color: var(--rpf-button-background-color-active);\n}\n.rpf-button--secondary:active::before {\n  background-color: var(--rpf-button-text-color);\n  border-color: var(--rpf-button-background-color-active);\n}\n.rpf-button--secondary:disabled, .rpf-button--secondary.rpf-button--disabled {\n  color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--secondary:disabled:hover::before, .rpf-button--secondary:disabled:before, .rpf-button--secondary.rpf-button--disabled:hover::before, .rpf-button--secondary.rpf-button--disabled:before {\n  background-color: var(--rpf-button-text-color);\n  border-color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--tertiary {\n  color: var(--rpf-button-background-color);\n}\n.rpf-button--tertiary::before {\n  background-color: transparent;\n  border-color: transparent;\n}\n.rpf-button--tertiary:hover {\n  color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--tertiary:hover::before {\n  background-color: transparent;\n  border-color: transparent;\n}\n.rpf-button--tertiary:active {\n  color: var(--rpf-button-background-color-active);\n}\n.rpf-button--tertiary:active::before {\n  background-color: transparent;\n}\n.rpf-button--tertiary:disabled, .rpf-button--tertiary.rpf-button--disabled {\n  color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--tertiary:disabled::before, .rpf-button--tertiary:disabled:hover::before, .rpf-button--tertiary.rpf-button--disabled::before, .rpf-button--tertiary.rpf-button--disabled:hover::before {\n  background-color: transparent;\n  border-color: transparent;\n}\n.rpf-button--danger {\n  --rpf-button-background-color: var(--rpf-alert-error);\n  --rpf-button-background-color-hover: var(--rpf-alert-error);\n  --rpf-button-background-color-active: var(--rpf-red-900);\n}\n.rpf-button--icon-only {\n  block-size: var(--rpf-button-lg-height);\n  line-height: var(--rpf-button-lg-height);\n  padding: 0;\n  text-align: center;\n  inline-size: var(--rpf-button-lg-height);\n}\n.rpf-button--icon-only .rpf-button__icon {\n  margin: 0 auto;\n}\n.rpf-button--sm {\n  font-size: var(--font-size-1);\n  min-block-size: var(--rpf-button-min-target-size);\n  padding: var(--space-1) var(--space-1);\n  /* To account for 32px visual height and 44px target height */\n}\n.rpf-button--sm::before {\n  inset: calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2) 0;\n}\n.rpf-button--sm.rpf-button--icon-only {\n  block-size: var(--rpf-button-min-target-size);\n  line-height: var(--rpf-button-min-target-size);\n  padding: 0;\n  inline-size: var(--rpf-button-min-target-size);\n}\n.rpf-button--sm.rpf-button--icon-only::before {\n  inset: calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2);\n}\n.rpf-button--sm .material-symbols-sharp {\n  font-size: 20px;\n  font-variation-settings: \"OPSZ\" 20;\n}\n.rpf-button--full-width {\n  justify-content: center;\n  inline-size: 100%;\n}\n";
 styleInject(css_248z$5);
 
 /* eslint-disable complexity */
 const Button = ({
   text,
-  type,
-  variant,
-  size,
-  icon,
-  iconOnly,
-  iconPosition,
-  fullWidth,
-  disabled,
   href,
   title,
   className,
-  onClick,
-  "aria-label": ariaLabel
+  ariaLabel = "",
+  type = "primary",
+  variant = "",
+  size = "default",
+  icon = "",
+  iconOnly = false,
+  iconPosition = "left",
+  fullWidth = false,
+  disabled = false,
+  onClick = () => {}
 }) => {
   const iconButton = icon && iconOnly;
   const classes = classNames(
@@ -2496,28 +1204,28 @@ const Button = ({
     disabled
   }, className);
   let iconClasses = "rpf-button__icon";
-  if ( /*#__PURE__*/React__default.isValidElement(icon)) {
+  if ( /*#__PURE__*/React.isValidElement(icon)) {
     iconClasses += " icon";
     console.warn("DEPRECATED: icons as React elements will not be supported in future releases");
   } else {
     iconClasses += " material-symbols-sharp";
   }
-  const renderIcon = position => icon && iconPosition === position && /*#__PURE__*/React__default.createElement("span", {
+  const renderIcon = position => icon && iconPosition === position && /*#__PURE__*/React.createElement("span", {
     className: iconClasses
   }, icon);
-  const renderText = () => text && !iconButton && /*#__PURE__*/React__default.createElement("span", {
+  const renderText = () => text && !iconButton && /*#__PURE__*/React.createElement("span", {
     className: "text"
   }, text);
-  const content = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderIcon("left"), renderText(), renderIcon("right"));
+  const content = /*#__PURE__*/React.createElement(React.Fragment, null, renderIcon("left"), renderText(), renderIcon("right"));
   if (href) {
-    return /*#__PURE__*/React__default.createElement(Link, {
+    return /*#__PURE__*/React.createElement(Link, {
       className: classes,
       "aria-label": ariaLabel,
       to: href,
       onClick: onClick
     }, content);
   }
-  return /*#__PURE__*/React__default.createElement("button", {
+  return /*#__PURE__*/React.createElement("button", {
     className: classes,
     title: title,
     "aria-label": ariaLabel,
@@ -2534,25 +1242,13 @@ Button.propTypes = {
   onClick: PropTypes.func,
   text: PropTypes.string,
   iconOnly: PropTypes.bool,
-  "aria-label": PropTypes.string,
+  ariaLabel: PropTypes.string,
   title: PropTypes.string,
   iconPosition: PropTypes.oneOf(["left", "right"]),
   size: PropTypes.oneOf(["default", "small"]) // added size prop
 };
-Button.defaultProps = {
-  type: "primary",
-  variant: "",
-  size: "default",
-  icon: "",
-  iconOnly: false,
-  iconPosition: "left",
-  fullWidth: false,
-  disabled: false,
-  onClick: () => {},
-  "aria-label": ""
-};
 
-var css_248z$4 = ":root, :host {\n  --rpf-alert-error-highlight: hsla(0, 88%, 99%, 1);\n  --rpf-alert-error: hsla(0, 88%, 33%, 1);\n  --rpf-alert-information-highlight: hsla(225, 64%, 99%, 1);\n  --rpf-alert-information: hsla(225, 64%, 33%, 1);\n  --rpf-alert-success-highlight: hsla(136, 90%, 99%, 1);\n  --rpf-alert-success: hsla(136, 90%, 20%, 1);\n  --rpf-alert-warning-highlight: hsla(26, 70%, 99%, 1);\n  --rpf-alert-warning: hsla(26, 70%, 29%, 1);\n}\n\n:root, :host {\n  --rpf-white: hsla(0, 0%, 100%, 1);\n  --rpf-off-white: hsla(225, 25%, 97%, 1);\n  --rpf-grey-50: hsla(210, 8%, 95%, 1);\n  --rpf-grey-100: hsla(228, 10%, 90%, 1);\n  --rpf-grey-150: hsla(223, 9%, 85%, 1);\n  --rpf-grey-200: hsla(228, 10%, 80%, 1);\n  --rpf-grey-300: hsla(229, 9%, 75%, 1);\n  --rpf-grey-400: hsla(229, 8%, 61%, 1);\n  --rpf-grey-500: hsla(229, 9%, 42%, 1);\n  --rpf-grey-600: hsla(228, 9%, 32%, 1);\n  --rpf-grey-700: hsla(228, 9%, 22%, 1);\n  --rpf-grey-800: hsla(232, 9%, 18%, 1);\n  --rpf-grey-850: hsla(228, 9%, 15%, 1);\n  --rpf-grey-900: hsla(228, 9%, 10%, 1);\n  --rpf-grey-950: hsla(228, 8%, 5%, 1);\n  --rpf-black: hsla(0, 0%, 0%, 1);\n}\n\n:root, :host {\n  --rpf-text-primary: hsla(0, 0%, 13%, 1);\n  --rpf-text-primary-darkmode: var(--rpf-white);\n  --rpf-text-secondary: hsla(200, 9%, 33%, 1);\n  --rpf-text-secondary-darkmode: hsla(0, 0%, 80%, 1);\n}\n\n:root, :host {\n  --font-size-0-5: 0.5rem;\n  --font-size-0-75: 0.75rem;\n  --font-size-1: 1rem;\n  --font-size-1-5: 1.25rem;\n  --font-size-2: 1.5rem;\n  --font-size-3: 2rem;\n  --font-size-4: 2.5rem;\n  --font-size-5: 3rem;\n  --font-size-6: 3.5rem;\n  --font-size-7: 4rem;\n  --font-size-8: 4.5rem;\n  --font-size-9: 5rem;\n}\n\n:root, :host {\n  --font-weight-regular: 400;\n  --font-weight-bold: 700;\n}\n\n:root, :host {\n  --border-radius: var(--space-1);\n  --border-width-sm: 1px;\n  --border-width-md: 2px;\n  --border-width-lg: 3px;\n  --alert-border-width: var(--border-width-md);\n  --fieldset-border-width: var(--border-width-md);\n  --input-border-width: var(--border-width-md);\n}\n\n:root, :host {\n  --space-0-125: 0.0625rem;\n  --space-0-25: 0.125rem;\n  --space-0-5: 0.25rem;\n  --space-1: 0.5rem;\n  --space-1-5: 0.75rem;\n  --space-2: 1rem;\n  --space-3: 1.5rem;\n  --space-4: 2rem;\n  --space-5: 2.5rem;\n  --space-6: 3rem;\n  --space-7: 3.5rem;\n  --space-8: 4rem;\n  --space-9: 4.5rem;\n  --space-10: 5rem;\n}\n\n:root, :host {\n  --font-size-0-5: 0.5rem;\n  --font-size-0-75: 0.75rem;\n  --font-size-1: 1rem;\n  --font-size-1-5: 1.25rem;\n  --font-size-2: 1.5rem;\n  --font-size-3: 2rem;\n  --font-size-4: 2.5rem;\n  --font-size-5: 3rem;\n  --font-size-6: 3.5rem;\n  --font-size-7: 4rem;\n  --font-size-8: 4.5rem;\n  --font-size-9: 5rem;\n}\n\n:root, :host {\n  --font-weight-regular: 400;\n  --font-weight-bold: 700;\n}\n\n:root, :host {\n  --line-height-0-75: 0.75rem;\n  --line-height-1: 1rem;\n  --line-height-1-5: 1.5rem;\n  --line-height-2: 2rem;\n  --line-height-2-5: 2.5rem;\n  --line-height-3: 3rem;\n  --line-height-3-5: 3.5rem;\n  --line-height-4: 4rem;\n  --line-height-4-5: 4.5rem;\n  --line-height-5: 5rem;\n  --line-height-5-5: 5.5rem;\n  --line-height-6: 6rem;\n  --line-height-6-5: 6.5rem;\n}\n\n:root {\n  --rpf-alert-background-color: var(--rpf-alert-information-highlight);\n  --rpf-alert-color: var(--rpf-alert-information);\n}\n\n.rpf-alert {\n  align-items: center;\n  background-color: var(--rpf-alert-background-color);\n  border-color: var(--rpf-alert-color);\n  border-radius: var(--border-radius);\n  border-style: solid;\n  border-width: var(--alert-border-width);\n  color: var(--rpf-text-primary);\n  display: flex;\n  gap: var(--space-2);\n  margin-block-end: var(--space-2);\n  padding-block: var(--space-2);\n  padding-inline: var(--space-2);\n  text-align: center;\n}\n.rpf-alert__icon {\n  align-self: flex-start;\n  color: var(--rpf-alert-color);\n  font-size: var(--font-size-2);\n}\n.rpf-alert__body {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--line-height-1-5);\n  display: flex;\n  flex-direction: column;\n  text-align: start;\n}\n.rpf-alert__title {\n  font-weight: var(--font-weight-bold);\n  margin: 0;\n}\n.rpf-alert__actions {\n  display: flex;\n  flex-direction: row;\n  gap: var(--space-2);\n}\n.rpf-alert__close {\n  align-self: flex-start;\n  background: none;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  font-size: var(--font-size-2);\n  margin-inline-start: auto;\n}\n.rpf-alert--hidden {\n  display: none;\n}\n.rpf-alert--error {\n  --rpf-alert-background-color: var(--rpf-alert-error-highlight);\n  --rpf-alert-color: var(--rpf-alert-error);\n}\n.rpf-alert--error .rpf-alert__icon::after {\n  content: \"error_outline\";\n}\n.rpf-alert--information .rpf-alert__icon::after {\n  content: \"info\";\n}\n.rpf-alert--warning {\n  --rpf-alert-background-color: var(--rpf-alert-warning-highlight);\n  --rpf-alert-color: var(--rpf-alert-warning);\n}\n.rpf-alert--warning .rpf-alert__icon::after {\n  content: \"warning_amber\";\n}\n.rpf-alert--success {\n  --rpf-alert-background-color: var(--rpf-alert-success-highlight);\n  --rpf-alert-color: var(--rpf-alert-success);\n}\n.rpf-alert--success .rpf-alert__icon::after {\n  content: \"check_circle\";\n}\n\n:root, :host {\n  --rpf-brand-black: hsla(60, 4%, 11%, 1);\n  --rpf-brand-leaf: hsla(123, 43%, 48%, 1);\n  --rpf-brand-raspberry: hsla(342, 71%, 47%, 1);\n  --rpf-raspberry-50: hsla(338, 57%, 97%, 1);\n  --rpf-raspberry-100: hsla(342, 62%, 96%, 1);\n  --rpf-raspberry-200: hsla(344, 73%, 93%, 1);\n  --rpf-raspberry-400: hsla(341, 63%, 84%, 1);\n  --rpf-raspberry-500: hsla(343, 62%, 68%, 1);\n  --rpf-raspberry-600: hsla(343, 64%, 58%, 1);\n  --rpf-raspberry-800: hsla(342, 71%, 47%, 1);\n  --rpf-raspberry-900: hsla(340, 78%, 36%, 1);\n}\n\n:root, :host {\n  --rpf-red-100: hsla(4, 89%, 96%, 1);\n  --rpf-red-200: hsla(1, 87%, 91%, 1);\n  --rpf-red-400: hsla(1, 87%, 82%, 1);\n  --rpf-red-600: hsla(1, 87%, 72%, 1);\n  --rpf-red-800: hsla(1, 87%, 63%, 1);\n  --rpf-red-900: hsla(1, 52%, 50%, 1);\n  --rpf-green-100: hsla(125, 41%, 95%, 1);\n  --rpf-green-200: hsla(122, 39%, 87%, 1);\n  --rpf-green-400: hsla(123, 40%, 74%, 1);\n  --rpf-green-600: hsla(123, 40%, 61%, 1);\n  --rpf-green-800: hsla(123, 43%, 48%, 1);\n  --rpf-green-900: hsla(123, 43%, 34%, 1);\n  --rpf-teal-100: hsla(176, 55%, 94%, 1);\n  --rpf-teal-200: hsla(174, 55%, 85%, 1);\n  --rpf-teal-400: hsla(174, 55%, 70%, 1);\n  --rpf-teal-600: hsla(174, 56%, 56%, 1);\n  --rpf-teal-800: hsla(174, 81%, 41%, 1);\n  --rpf-teal-900: hsla(174, 81%, 27%, 1);\n  --rpf-orange-100: hsla(31, 100%, 95%, 1);\n  --rpf-orange-200: hsla(32, 100%, 88%, 1);\n  --rpf-orange-400: hsla(31, 100%, 77%, 1);\n  --rpf-orange-600: hsla(31, 99%, 65%, 1);\n  --rpf-orange-800: hsla(31, 99%, 54%, 1);\n  --rpf-orange-900: hsla(31, 85%, 35%, 1);\n  --rpf-yellow-100: hsla(51, 100%, 95%, 1);\n  --rpf-yellow-200: hsla(52, 100%, 87%, 1);\n  --rpf-yellow-400: hsla(51, 100%, 75%, 1);\n  --rpf-yellow-600: hsla(52, 100%, 63%, 1);\n  --rpf-yellow-800: hsla(52, 100%, 50%, 1);\n  --rpf-yellow-900: hsla(52, 100%, 26%, 1);\n  --rpf-purple-100: hsla(282, 36%, 95%, 1);\n  --rpf-purple-200: hsla(279, 38%, 87%, 1);\n  --rpf-purple-400: hsla(279, 38%, 73%, 1);\n  --rpf-purple-600: hsla(279, 37%, 60%, 1);\n  --rpf-purple-800: hsla(279, 43%, 47%, 1);\n  --rpf-purple-900: hsla(280, 43%, 37%, 1);\n  --rpf-navy-100: hsla(235, 38%, 94%, 1);\n  --rpf-navy-200: hsla(234, 38%, 84%, 1);\n  --rpf-navy-400: hsla(235, 38%, 69%, 1);\n  --rpf-navy-600: hsla(235, 38%, 53%, 1);\n  --rpf-navy-800: hsla(235, 63%, 37%, 1);\n  --rpf-navy-900: hsla(234, 63%, 30%, 1);\n  --rpf-blue-100: hsla(203, 86%, 95%, 1);\n  --rpf-blue-200: hsla(204, 88%, 87%, 1);\n  --rpf-blue-400: hsla(204, 88%, 74%, 1);\n  --rpf-blue-600: hsla(204, 89%, 60%, 1);\n  --rpf-blue-800: hsla(204, 100%, 47%, 1);\n  --rpf-blue-900: hsla(204, 99%, 37%, 1);\n}\n\n.rpf-button {\n  --rpf-button-background-color: var(--rpf-navy-800);\n  --rpf-button-background-color-hover: var(--rpf-navy-900);\n  --rpf-button-background-color-active: var(--rpf-navy-600);\n  --rpf-button-background-color-disabled: var(--rpf-grey-600);\n  --rpf-button-text-color: var(--rpf-white);\n  --rpf-button-border-radius: var(--border-radius);\n  --rpf-button-lg-height: 48px;\n  --rpf-button-sm-height: 32px;\n  /* 44px min-height to meet WCAG AAA target size requirements */\n  --rpf-button-min-target-size: 44px;\n  all: unset;\n  align-items: center;\n  box-sizing: border-box;\n  color: var(--rpf-button-text-color);\n  /*\n   * We've decided to follow the masses on this and have a pointer on buttons.\n   * Google, Facebook, Twitter, Mozilla, and Microsoft amongst many others have a pointer on buttons.\n   */\n  cursor: pointer;\n  display: flex;\n  font-size: var(--font-size-1-5);\n  font-weight: var(--font-weight-bold);\n  gap: var(--space-1);\n  min-block-size: var(--rpf-button-lg-height);\n  padding: var(--space-1) var(--space-2);\n  position: relative;\n  text-align: center;\n  text-decoration: none;\n  /* Fixes a rendering error that sometimes occurs due to negative z-index */\n  transform: scale(1);\n  inline-size: fit-content;\n  /* A bit of a hack to allow for separate visual and target heights */\n}\n.rpf-button::before {\n  background-color: var(--rpf-button-background-color);\n  border-color: var(--rpf-button-background-color);\n  border-radius: var(--rpf-button-border-radius);\n  border-style: solid;\n  border-width: 2px;\n  content: \"\";\n  display: block;\n  inset: 0;\n  position: absolute;\n  /* To ensure it renders under its siblings */\n  z-index: -1;\n}\n.rpf-button:hover::before {\n  background-color: var(--rpf-button-background-color-hover);\n  border-color: var(--rpf-button-background-color-hover);\n}\n.rpf-button:active::before {\n  background-color: var(--rpf-button-background-color-active);\n  border-color: var(--rpf-button-background-color-active);\n}\n.rpf-button:focus-visible::before {\n  outline: 2px solid var(--rpf-button-background-color);\n  outline-offset: 3px;\n}\n.rpf-button:disabled, .rpf-button--disabled {\n  cursor: default;\n}\n.rpf-button:disabled::before, .rpf-button:disabled:hover::before, .rpf-button--disabled::before, .rpf-button--disabled:hover::before {\n  border-color: var(--rpf-button-background-color-disabled);\n  background-color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--secondary {\n  color: var(--rpf-button-background-color);\n}\n.rpf-button--secondary::before {\n  background-color: var(--rpf-button-text-color);\n}\n.rpf-button--secondary:hover {\n  color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--secondary:hover::before {\n  background-color: var(--rpf-button-text-color);\n  border-color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--secondary:active {\n  color: var(--rpf-button-background-color-active);\n}\n.rpf-button--secondary:active::before {\n  background-color: var(--rpf-button-text-color);\n  border-color: var(--rpf-button-background-color-active);\n}\n.rpf-button--secondary:disabled, .rpf-button--secondary.rpf-button--disabled {\n  color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--secondary:disabled:hover::before, .rpf-button--secondary:disabled:before, .rpf-button--secondary.rpf-button--disabled:hover::before, .rpf-button--secondary.rpf-button--disabled:before {\n  background-color: var(--rpf-button-text-color);\n  border-color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--tertiary {\n  color: var(--rpf-button-background-color);\n}\n.rpf-button--tertiary::before {\n  background-color: transparent;\n  border-color: transparent;\n}\n.rpf-button--tertiary:hover {\n  color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--tertiary:hover::before {\n  background-color: transparent;\n  border-color: transparent;\n}\n.rpf-button--tertiary:active {\n  color: var(--rpf-button-background-color-active);\n}\n.rpf-button--tertiary:active::before {\n  background-color: transparent;\n}\n.rpf-button--tertiary:disabled, .rpf-button--tertiary.rpf-button--disabled {\n  color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--tertiary:disabled::before, .rpf-button--tertiary:disabled:hover::before, .rpf-button--tertiary.rpf-button--disabled::before, .rpf-button--tertiary.rpf-button--disabled:hover::before {\n  background-color: transparent;\n  border-color: transparent;\n}\n.rpf-button--danger {\n  --rpf-button-background-color: var(--rpf-alert-error);\n  --rpf-button-background-color-hover: var(--rpf-alert-error);\n  --rpf-button-background-color-active: var(--rpf-red-900);\n}\n.rpf-button--icon-only {\n  block-size: var(--rpf-button-lg-height);\n  line-height: var(--rpf-button-lg-height);\n  padding: 0;\n  text-align: center;\n  inline-size: var(--rpf-button-lg-height);\n}\n.rpf-button--icon-only .rpf-button__icon {\n  margin: 0 auto;\n}\n.rpf-button--sm {\n  font-size: var(--font-size-1);\n  min-block-size: var(--rpf-button-min-target-size);\n  padding: var(--space-1) var(--space-1);\n  /* To account for 32px visual height and 44px target height */\n}\n.rpf-button--sm::before {\n  inset: calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2) 0;\n}\n.rpf-button--sm.rpf-button--icon-only {\n  block-size: var(--rpf-button-min-target-size);\n  line-height: var(--rpf-button-min-target-size);\n  padding: 0;\n  inline-size: var(--rpf-button-min-target-size);\n}\n.rpf-button--sm.rpf-button--icon-only::before {\n  inset: calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2);\n}\n.rpf-button--sm .material-symbols-sharp {\n  font-size: 20px;\n  font-variation-settings: \"OPSZ\" 20;\n}\n.rpf-button--full-width {\n  justify-content: center;\n  inline-size: 100%;\n}\n";
+var css_248z$4 = ":root, :host {\n  --rpf-alert-error-highlight: hsla(0, 88%, 99%, 1);\n  --rpf-alert-error: hsla(0, 88%, 33%, 1);\n  --rpf-alert-information-highlight: hsla(225, 64%, 99%, 1);\n  --rpf-alert-information: hsla(225, 64%, 33%, 1);\n  --rpf-alert-success-highlight: hsla(136, 90%, 99%, 1);\n  --rpf-alert-success: hsla(136, 90%, 20%, 1);\n  --rpf-alert-warning-highlight: hsla(26, 70%, 99%, 1);\n  --rpf-alert-warning: hsla(26, 70%, 29%, 1);\n}\n\n:root, :host {\n  --rpf-white: hsla(0, 0%, 100%, 1);\n  --rpf-off-white: hsla(225, 25%, 97%, 1);\n  --rpf-grey-50: hsla(210, 8%, 95%, 1);\n  --rpf-grey-100: hsla(228, 10%, 90%, 1);\n  --rpf-grey-150: hsla(223, 9%, 85%, 1);\n  --rpf-grey-200: hsla(228, 10%, 80%, 1);\n  --rpf-grey-300: hsla(229, 9%, 75%, 1);\n  --rpf-grey-400: hsla(229, 8%, 61%, 1);\n  --rpf-grey-500: hsla(229, 9%, 42%, 1);\n  --rpf-grey-600: hsla(228, 9%, 32%, 1);\n  --rpf-grey-700: hsla(228, 9%, 22%, 1);\n  --rpf-grey-800: hsla(232, 9%, 18%, 1);\n  --rpf-grey-850: hsla(228, 9%, 15%, 1);\n  --rpf-grey-900: hsla(228, 9%, 10%, 1);\n  --rpf-grey-950: hsla(228, 8%, 5%, 1);\n  --rpf-black: hsla(0, 0%, 0%, 1);\n}\n\n:root, :host {\n  --rpf-text-primary: hsla(0, 0%, 13%, 1);\n  --rpf-text-primary-darkmode: var(--rpf-white);\n  --rpf-text-secondary: hsla(200, 9%, 33%, 1);\n  --rpf-text-secondary-darkmode: hsla(0, 0%, 80%, 1);\n}\n\n:root, :host {\n  --font-size-0-5: 0.5rem;\n  --font-size-0-75: 0.75rem;\n  --font-size-1: 1rem;\n  --font-size-1-5: 1.25rem;\n  --font-size-2: 1.5rem;\n  --font-size-3: 2rem;\n  --font-size-4: 2.5rem;\n  --font-size-5: 3rem;\n  --font-size-6: 3.5rem;\n  --font-size-7: 4rem;\n  --font-size-8: 4.5rem;\n  --font-size-9: 5rem;\n}\n\n:root, :host {\n  --font-weight-regular: 400;\n  --font-weight-bold: 700;\n}\n\n:root, :host {\n  --border-radius: var(--space-1);\n  --border-width-sm: 1px;\n  --border-width-md: 2px;\n  --border-width-lg: 3px;\n  --alert-border-width: var(--border-width-md);\n  --fieldset-border-width: var(--border-width-md);\n  --input-border-width: var(--border-width-md);\n}\n\n:root, :host {\n  --space-0-125: 0.0625rem;\n  --space-0-25: 0.125rem;\n  --space-0-5: 0.25rem;\n  --space-1: 0.5rem;\n  --space-1-5: 0.75rem;\n  --space-2: 1rem;\n  --space-3: 1.5rem;\n  --space-4: 2rem;\n  --space-5: 2.5rem;\n  --space-6: 3rem;\n  --space-7: 3.5rem;\n  --space-8: 4rem;\n  --space-9: 4.5rem;\n  --space-10: 5rem;\n}\n\n:root, :host {\n  --font-size-0-5: 0.5rem;\n  --font-size-0-75: 0.75rem;\n  --font-size-1: 1rem;\n  --font-size-1-5: 1.25rem;\n  --font-size-2: 1.5rem;\n  --font-size-3: 2rem;\n  --font-size-4: 2.5rem;\n  --font-size-5: 3rem;\n  --font-size-6: 3.5rem;\n  --font-size-7: 4rem;\n  --font-size-8: 4.5rem;\n  --font-size-9: 5rem;\n}\n\n:root, :host {\n  --font-weight-regular: 400;\n  --font-weight-bold: 700;\n}\n\n:root, :host {\n  --line-height-0-75: 0.75rem;\n  --line-height-1: 1rem;\n  --line-height-1-5: 1.5rem;\n  --line-height-2: 2rem;\n  --line-height-2-5: 2.5rem;\n  --line-height-3: 3rem;\n  --line-height-3-5: 3.5rem;\n  --line-height-4: 4rem;\n  --line-height-4-5: 4.5rem;\n  --line-height-5: 5rem;\n  --line-height-5-5: 5.5rem;\n  --line-height-6: 6rem;\n  --line-height-6-5: 6.5rem;\n}\n\n:root {\n  --rpf-alert-background-color: var(--rpf-alert-information-highlight);\n  --rpf-alert-color: var(--rpf-alert-information);\n}\n\n.rpf-alert {\n  align-items: center;\n  background-color: var(--rpf-alert-background-color);\n  border-color: var(--rpf-alert-color);\n  border-radius: var(--border-radius);\n  border-style: solid;\n  border-width: var(--alert-border-width);\n  color: var(--rpf-text-primary);\n  display: flex;\n  gap: var(--space-2);\n  margin-block-end: var(--space-2);\n  padding-block: var(--space-2);\n  padding-inline: var(--space-2);\n  text-align: center;\n}\n.rpf-alert__icon {\n  align-self: flex-start;\n  color: var(--rpf-alert-color);\n  font-size: var(--font-size-2);\n}\n.rpf-alert__body {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--line-height-1-5);\n  display: flex;\n  flex-direction: column;\n  text-align: start;\n}\n.rpf-alert__title {\n  font-weight: var(--font-weight-bold);\n  margin: 0;\n}\n.rpf-alert__actions {\n  display: flex;\n  flex-direction: row;\n  gap: var(--space-2);\n}\n.rpf-alert__close {\n  align-self: flex-start;\n  background: none;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  font-size: var(--font-size-2);\n  margin-inline-start: auto;\n}\n.rpf-alert--hidden {\n  display: none;\n}\n.rpf-alert--error {\n  --rpf-alert-background-color: var(--rpf-alert-error-highlight);\n  --rpf-alert-color: var(--rpf-alert-error);\n}\n.rpf-alert--error .rpf-alert__icon::after {\n  content: \"error_outline\";\n}\n.rpf-alert--information .rpf-alert__icon::after {\n  content: \"info\";\n}\n.rpf-alert--warning {\n  --rpf-alert-background-color: var(--rpf-alert-warning-highlight);\n  --rpf-alert-color: var(--rpf-alert-warning);\n}\n.rpf-alert--warning .rpf-alert__icon::after {\n  content: \"warning_amber\";\n}\n.rpf-alert--success {\n  --rpf-alert-background-color: var(--rpf-alert-success-highlight);\n  --rpf-alert-color: var(--rpf-alert-success);\n}\n.rpf-alert--success .rpf-alert__icon::after {\n  content: \"check_circle\";\n}\n\n:root, :host {\n  --rpf-brand-black: hsla(60, 4%, 11%, 1);\n  --rpf-brand-leaf: hsla(123, 43%, 48%, 1);\n  --rpf-brand-raspberry: hsla(342, 71%, 47%, 1);\n  --rpf-raspberry-50: hsla(338, 57%, 97%, 1);\n  --rpf-raspberry-100: hsla(342, 62%, 96%, 1);\n  --rpf-raspberry-200: hsla(344, 73%, 93%, 1);\n  --rpf-raspberry-400: hsla(341, 63%, 84%, 1);\n  --rpf-raspberry-500: hsla(343, 62%, 68%, 1);\n  --rpf-raspberry-600: hsla(343, 64%, 58%, 1);\n  --rpf-raspberry-800: hsla(342, 71%, 47%, 1);\n  --rpf-raspberry-900: hsla(340, 78%, 36%, 1);\n}\n\n:root, :host {\n  --rpf-red-100: hsla(4, 89%, 96%, 1);\n  --rpf-red-200: hsla(1, 87%, 91%, 1);\n  --rpf-red-400: hsla(1, 87%, 82%, 1);\n  --rpf-red-600: hsla(1, 87%, 72%, 1);\n  --rpf-red-800: hsla(1, 87%, 63%, 1);\n  --rpf-red-900: hsla(1, 52%, 50%, 1);\n  --rpf-green-100: hsla(125, 41%, 95%, 1);\n  --rpf-green-200: hsla(122, 39%, 87%, 1);\n  --rpf-green-400: hsla(123, 40%, 74%, 1);\n  --rpf-green-600: hsla(123, 40%, 61%, 1);\n  --rpf-green-800: hsla(123, 43%, 48%, 1);\n  --rpf-green-900: hsla(123, 43%, 34%, 1);\n  --rpf-teal-100: hsla(176, 55%, 94%, 1);\n  --rpf-teal-200: hsla(174, 55%, 85%, 1);\n  --rpf-teal-400: hsla(174, 55%, 70%, 1);\n  --rpf-teal-600: hsla(174, 56%, 56%, 1);\n  --rpf-teal-800: hsla(174, 81%, 41%, 1);\n  --rpf-teal-900: hsla(174, 81%, 27%, 1);\n  --rpf-orange-100: hsla(31, 100%, 95%, 1);\n  --rpf-orange-200: hsla(32, 100%, 88%, 1);\n  --rpf-orange-400: hsla(31, 100%, 77%, 1);\n  --rpf-orange-600: hsla(31, 99%, 65%, 1);\n  --rpf-orange-800: hsla(31, 99%, 54%, 1);\n  --rpf-orange-900: hsla(31, 85%, 35%, 1);\n  --rpf-yellow-100: hsla(51, 100%, 95%, 1);\n  --rpf-yellow-200: hsla(52, 100%, 87%, 1);\n  --rpf-yellow-400: hsla(51, 100%, 75%, 1);\n  --rpf-yellow-600: hsla(52, 100%, 63%, 1);\n  --rpf-yellow-800: hsla(52, 100%, 50%, 1);\n  --rpf-yellow-900: hsla(52, 100%, 26%, 1);\n  --rpf-purple-100: hsla(282, 36%, 95%, 1);\n  --rpf-purple-200: hsla(279, 38%, 87%, 1);\n  --rpf-purple-400: hsla(279, 38%, 73%, 1);\n  --rpf-purple-600: hsla(279, 37%, 60%, 1);\n  --rpf-purple-800: hsla(279, 43%, 47%, 1);\n  --rpf-purple-900: hsla(280, 43%, 37%, 1);\n  --rpf-navy-100: hsla(235, 38%, 94%, 1);\n  --rpf-navy-200: hsla(234, 38%, 84%, 1);\n  --rpf-navy-400: hsla(235, 38%, 69%, 1);\n  --rpf-navy-600: hsla(235, 38%, 53%, 1);\n  --rpf-navy-800: hsla(235, 63%, 37%, 1);\n  --rpf-navy-900: hsla(234, 63%, 30%, 1);\n  --rpf-blue-100: hsla(203, 86%, 95%, 1);\n  --rpf-blue-200: hsla(204, 88%, 87%, 1);\n  --rpf-blue-400: hsla(204, 88%, 74%, 1);\n  --rpf-blue-600: hsla(204, 89%, 60%, 1);\n  --rpf-blue-800: hsla(204, 100%, 47%, 1);\n  --rpf-blue-900: hsla(204, 99%, 37%, 1);\n}\n\n.rpf-button {\n  --rpf-button-background-color: var(--rpf-navy-800);\n  --rpf-button-background-color-hover: var(--rpf-navy-900);\n  --rpf-button-background-color-active: var(--rpf-navy-600);\n  --rpf-button-background-color-disabled: var(--rpf-grey-600);\n  --rpf-button-text-color: var(--rpf-white);\n  --rpf-button-border-radius: var(--border-radius);\n  --rpf-button-lg-height: 48px;\n  --rpf-button-sm-height: 32px;\n  /* 44px min-height to meet WCAG AAA target size requirements */\n  --rpf-button-min-target-size: 44px;\n  all: unset;\n  align-items: center;\n  box-sizing: border-box;\n  color: var(--rpf-button-text-color);\n  /*\n   * We've decided to follow the masses on this and have a pointer on buttons.\n   * Google, Facebook, Twitter, Mozilla, and Microsoft amongst many others have a pointer on buttons.\n   */\n  cursor: pointer;\n  display: flex;\n  font-size: var(--font-size-1-5);\n  font-weight: var(--font-weight-bold);\n  gap: var(--space-1);\n  min-block-size: var(--rpf-button-lg-height);\n  padding: var(--space-1) var(--space-2);\n  position: relative;\n  text-align: center;\n  text-decoration: none;\n  /* Fixes a rendering error that sometimes occurs due to negative z-index */\n  transform: scale(1);\n  inline-size: fit-content;\n  /* A bit of a hack to allow for separate visual and target heights */\n}\n.rpf-button::before {\n  background-color: var(--rpf-button-background-color);\n  border-color: var(--rpf-button-background-color);\n  border-radius: var(--rpf-button-border-radius);\n  border-style: solid;\n  border-width: 2px;\n  content: \"\";\n  display: block;\n  inset: 0;\n  position: absolute;\n  /* To ensure it renders under its siblings */\n  z-index: -1;\n}\n.rpf-button:hover::before {\n  background-color: var(--rpf-button-background-color-hover);\n  border-color: var(--rpf-button-background-color-hover);\n}\n.rpf-button:active::before {\n  background-color: var(--rpf-button-background-color-active);\n  border-color: var(--rpf-button-background-color-active);\n}\n.rpf-button:focus-visible::before {\n  outline: 2px solid var(--rpf-button-background-color);\n  outline-offset: 3px;\n}\n.rpf-button:disabled, .rpf-button--disabled {\n  cursor: default;\n}\n.rpf-button:disabled::before, .rpf-button:disabled:hover::before, .rpf-button--disabled::before, .rpf-button--disabled:hover::before {\n  border-color: var(--rpf-button-background-color-disabled);\n  background-color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--secondary {\n  color: var(--rpf-button-background-color);\n}\n.rpf-button--secondary::before {\n  background-color: var(--rpf-button-text-color);\n}\n.rpf-button--secondary:hover {\n  color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--secondary:hover::before {\n  background-color: var(--rpf-button-text-color);\n  border-color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--secondary:active {\n  color: var(--rpf-button-background-color-active);\n}\n.rpf-button--secondary:active::before {\n  background-color: var(--rpf-button-text-color);\n  border-color: var(--rpf-button-background-color-active);\n}\n.rpf-button--secondary:disabled, .rpf-button--secondary.rpf-button--disabled {\n  color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--secondary:disabled:hover::before, .rpf-button--secondary:disabled:before, .rpf-button--secondary.rpf-button--disabled:hover::before, .rpf-button--secondary.rpf-button--disabled:before {\n  background-color: var(--rpf-button-text-color);\n  border-color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--tertiary {\n  color: var(--rpf-button-background-color);\n}\n.rpf-button--tertiary::before {\n  background-color: transparent;\n  border-color: transparent;\n}\n.rpf-button--tertiary:hover {\n  color: var(--rpf-button-background-color-hover);\n}\n.rpf-button--tertiary:hover::before {\n  background-color: transparent;\n  border-color: transparent;\n}\n.rpf-button--tertiary:active {\n  color: var(--rpf-button-background-color-active);\n}\n.rpf-button--tertiary:active::before {\n  background-color: transparent;\n}\n.rpf-button--tertiary:disabled, .rpf-button--tertiary.rpf-button--disabled {\n  color: var(--rpf-button-background-color-disabled);\n}\n.rpf-button--tertiary:disabled::before, .rpf-button--tertiary:disabled:hover::before, .rpf-button--tertiary.rpf-button--disabled::before, .rpf-button--tertiary.rpf-button--disabled:hover::before {\n  background-color: transparent;\n  border-color: transparent;\n}\n.rpf-button--danger {\n  --rpf-button-background-color: var(--rpf-alert-error);\n  --rpf-button-background-color-hover: var(--rpf-alert-error);\n  --rpf-button-background-color-active: var(--rpf-red-900);\n}\n.rpf-button--icon-only {\n  block-size: var(--rpf-button-lg-height);\n  line-height: var(--rpf-button-lg-height);\n  padding: 0;\n  text-align: center;\n  inline-size: var(--rpf-button-lg-height);\n}\n.rpf-button--icon-only .rpf-button__icon {\n  margin: 0 auto;\n}\n.rpf-button--sm {\n  font-size: var(--font-size-1);\n  min-block-size: var(--rpf-button-min-target-size);\n  padding: var(--space-1) var(--space-1);\n  /* To account for 32px visual height and 44px target height */\n}\n.rpf-button--sm::before {\n  inset: calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2) 0;\n}\n.rpf-button--sm.rpf-button--icon-only {\n  block-size: var(--rpf-button-min-target-size);\n  line-height: var(--rpf-button-min-target-size);\n  padding: 0;\n  inline-size: var(--rpf-button-min-target-size);\n}\n.rpf-button--sm.rpf-button--icon-only::before {\n  inset: calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2);\n}\n.rpf-button--sm .material-symbols-sharp {\n  font-size: 20px;\n  font-variation-settings: \"OPSZ\" 20;\n}\n.rpf-button--full-width {\n  justify-content: center;\n  inline-size: 100%;\n}\n\np {\n  margin-block-end: 0;\n}\n\n.rpf-alert__actions .rpf-button {\n  padding-inline-start: 0;\n  padding-block-end: 0;\n}\n";
 styleInject(css_248z$4);
 
 /* eslint-disable complexity */
@@ -2561,18 +1257,18 @@ const Alert = ({
   text,
   type,
   actions
-}) => /*#__PURE__*/React__default.createElement("div", {
+}) => /*#__PURE__*/React.createElement("div", {
   className: `rpf-alert rpf-alert--${type}`
-}, /*#__PURE__*/React__default.createElement("span", {
+}, /*#__PURE__*/React.createElement("span", {
   className: "rpf-alert__icon material-symbols-sharp"
-}), /*#__PURE__*/React__default.createElement("div", {
+}), /*#__PURE__*/React.createElement("div", {
   className: "rpf-alert__body"
-}, /*#__PURE__*/React__default.createElement("p", {
+}, /*#__PURE__*/React.createElement("p", {
   className: "rpf-alert__title"
-}, title), /*#__PURE__*/React__default.createElement("p", null, text), actions && actions.length > 0 && /*#__PURE__*/React__default.createElement("div", {
+}, title), /*#__PURE__*/React.createElement("p", null, text), actions && actions.length > 0 && /*#__PURE__*/React.createElement("div", {
   className: "rpf-alert__actions"
-}, actions.map(action => /*#__PURE__*/React__default.createElement(Button, {
-  key: action.label,
+}, actions.map(action => /*#__PURE__*/React.createElement(Button, {
+  key: action.key || action.label,
   text: action.label,
   size: "small",
   type: "tertiary",
@@ -2594,15 +1290,15 @@ styleInject(css_248z$3);
 
 /* eslint-disable complexity */
 const ProgressBar = ({
-  text,
+  text = "",
   percent
-}) => /*#__PURE__*/React__default.createElement("div", {
+}) => /*#__PURE__*/React.createElement("div", {
   className: "rpf-progress-bar"
-}, text && /*#__PURE__*/React__default.createElement("div", {
+}, text && /*#__PURE__*/React.createElement("div", {
   className: "rpf-progress-bar__step"
-}, text), /*#__PURE__*/React__default.createElement("div", {
+}, text), /*#__PURE__*/React.createElement("div", {
   className: "rpf-progress-bar__bar"
-}, /*#__PURE__*/React__default.createElement("div", {
+}, /*#__PURE__*/React.createElement("div", {
   className: "rpf-progress-bar__progress",
   style: {
     width: `${percent}%`
@@ -2612,27 +1308,24 @@ ProgressBar.propTypes = {
   text: PropTypes.string,
   percent: PropTypes.number.isRequired
 };
-ProgressBar.defaultProps = {
-  text: ""
-};
 
 var css_248z$2 = ":root, :host {\n  --border-radius: var(--space-1);\n  --border-width-sm: 1px;\n  --border-width-md: 2px;\n  --border-width-lg: 3px;\n  --alert-border-width: var(--border-width-md);\n  --fieldset-border-width: var(--border-width-md);\n  --input-border-width: var(--border-width-md);\n}\n\n:root, :host {\n  --rpf-alert-error-highlight: hsla(0, 88%, 99%, 1);\n  --rpf-alert-error: hsla(0, 88%, 33%, 1);\n  --rpf-alert-information-highlight: hsla(225, 64%, 99%, 1);\n  --rpf-alert-information: hsla(225, 64%, 33%, 1);\n  --rpf-alert-success-highlight: hsla(136, 90%, 99%, 1);\n  --rpf-alert-success: hsla(136, 90%, 20%, 1);\n  --rpf-alert-warning-highlight: hsla(26, 70%, 99%, 1);\n  --rpf-alert-warning: hsla(26, 70%, 29%, 1);\n}\n\n:root, :host {\n  --rpf-white: hsla(0, 0%, 100%, 1);\n  --rpf-off-white: hsla(225, 25%, 97%, 1);\n  --rpf-grey-50: hsla(210, 8%, 95%, 1);\n  --rpf-grey-100: hsla(228, 10%, 90%, 1);\n  --rpf-grey-150: hsla(223, 9%, 85%, 1);\n  --rpf-grey-200: hsla(228, 10%, 80%, 1);\n  --rpf-grey-300: hsla(229, 9%, 75%, 1);\n  --rpf-grey-400: hsla(229, 8%, 61%, 1);\n  --rpf-grey-500: hsla(229, 9%, 42%, 1);\n  --rpf-grey-600: hsla(228, 9%, 32%, 1);\n  --rpf-grey-700: hsla(228, 9%, 22%, 1);\n  --rpf-grey-800: hsla(232, 9%, 18%, 1);\n  --rpf-grey-850: hsla(228, 9%, 15%, 1);\n  --rpf-grey-900: hsla(228, 9%, 10%, 1);\n  --rpf-grey-950: hsla(228, 8%, 5%, 1);\n  --rpf-black: hsla(0, 0%, 0%, 1);\n}\n\n:root, :host {\n  --rpf-red-100: hsla(4, 89%, 96%, 1);\n  --rpf-red-200: hsla(1, 87%, 91%, 1);\n  --rpf-red-400: hsla(1, 87%, 82%, 1);\n  --rpf-red-600: hsla(1, 87%, 72%, 1);\n  --rpf-red-800: hsla(1, 87%, 63%, 1);\n  --rpf-red-900: hsla(1, 52%, 50%, 1);\n  --rpf-green-100: hsla(125, 41%, 95%, 1);\n  --rpf-green-200: hsla(122, 39%, 87%, 1);\n  --rpf-green-400: hsla(123, 40%, 74%, 1);\n  --rpf-green-600: hsla(123, 40%, 61%, 1);\n  --rpf-green-800: hsla(123, 43%, 48%, 1);\n  --rpf-green-900: hsla(123, 43%, 34%, 1);\n  --rpf-teal-100: hsla(176, 55%, 94%, 1);\n  --rpf-teal-200: hsla(174, 55%, 85%, 1);\n  --rpf-teal-400: hsla(174, 55%, 70%, 1);\n  --rpf-teal-600: hsla(174, 56%, 56%, 1);\n  --rpf-teal-800: hsla(174, 81%, 41%, 1);\n  --rpf-teal-900: hsla(174, 81%, 27%, 1);\n  --rpf-orange-100: hsla(31, 100%, 95%, 1);\n  --rpf-orange-200: hsla(32, 100%, 88%, 1);\n  --rpf-orange-400: hsla(31, 100%, 77%, 1);\n  --rpf-orange-600: hsla(31, 99%, 65%, 1);\n  --rpf-orange-800: hsla(31, 99%, 54%, 1);\n  --rpf-orange-900: hsla(31, 85%, 35%, 1);\n  --rpf-yellow-100: hsla(51, 100%, 95%, 1);\n  --rpf-yellow-200: hsla(52, 100%, 87%, 1);\n  --rpf-yellow-400: hsla(51, 100%, 75%, 1);\n  --rpf-yellow-600: hsla(52, 100%, 63%, 1);\n  --rpf-yellow-800: hsla(52, 100%, 50%, 1);\n  --rpf-yellow-900: hsla(52, 100%, 26%, 1);\n  --rpf-purple-100: hsla(282, 36%, 95%, 1);\n  --rpf-purple-200: hsla(279, 38%, 87%, 1);\n  --rpf-purple-400: hsla(279, 38%, 73%, 1);\n  --rpf-purple-600: hsla(279, 37%, 60%, 1);\n  --rpf-purple-800: hsla(279, 43%, 47%, 1);\n  --rpf-purple-900: hsla(280, 43%, 37%, 1);\n  --rpf-navy-100: hsla(235, 38%, 94%, 1);\n  --rpf-navy-200: hsla(234, 38%, 84%, 1);\n  --rpf-navy-400: hsla(235, 38%, 69%, 1);\n  --rpf-navy-600: hsla(235, 38%, 53%, 1);\n  --rpf-navy-800: hsla(235, 63%, 37%, 1);\n  --rpf-navy-900: hsla(234, 63%, 30%, 1);\n  --rpf-blue-100: hsla(203, 86%, 95%, 1);\n  --rpf-blue-200: hsla(204, 88%, 87%, 1);\n  --rpf-blue-400: hsla(204, 88%, 74%, 1);\n  --rpf-blue-600: hsla(204, 89%, 60%, 1);\n  --rpf-blue-800: hsla(204, 100%, 47%, 1);\n  --rpf-blue-900: hsla(204, 99%, 37%, 1);\n}\n\n:root, :host {\n  --rpf-text-primary: hsla(0, 0%, 13%, 1);\n  --rpf-text-primary-darkmode: var(--rpf-white);\n  --rpf-text-secondary: hsla(200, 9%, 33%, 1);\n  --rpf-text-secondary-darkmode: hsla(0, 0%, 80%, 1);\n}\n\n:root, :host {\n  --rpf-input-background-color: var(--rpf-white);\n  --rpf-input-background-color-disabled: var(--rpf-grey-50);\n  --rpf-input-background-color-readonly: var(--rpf-grey-50);\n  --rpf-input-color-error: var(--rpf-alert-error);\n  --rpf-input-color: var(--rpf-text-primary);\n  --rpf-input-outline-color: var(--rpf-blue-800);\n}\n\n:root, :host {\n  --font-size-0-5: 0.5rem;\n  --font-size-0-75: 0.75rem;\n  --font-size-1: 1rem;\n  --font-size-1-5: 1.25rem;\n  --font-size-2: 1.5rem;\n  --font-size-3: 2rem;\n  --font-size-4: 2.5rem;\n  --font-size-5: 3rem;\n  --font-size-6: 3.5rem;\n  --font-size-7: 4rem;\n  --font-size-8: 4.5rem;\n  --font-size-9: 5rem;\n}\n\n:root, :host {\n  --space-0-125: 0.0625rem;\n  --space-0-25: 0.125rem;\n  --space-0-5: 0.25rem;\n  --space-1: 0.5rem;\n  --space-1-5: 0.75rem;\n  --space-2: 1rem;\n  --space-3: 1.5rem;\n  --space-4: 2rem;\n  --space-5: 2.5rem;\n  --space-6: 3rem;\n  --space-7: 3.5rem;\n  --space-8: 4rem;\n  --space-9: 4.5rem;\n  --space-10: 5rem;\n}\n\n.rpf-input-field {\n  margin-block-end: var(--space-3);\n}\n\n.rpf-input {\n  all: unset;\n  background-color: var(--rpf-input-background-color);\n  border: var(--input-border-width) solid var(--rpf-input-color);\n  border-radius: var(--border-radius);\n  box-sizing: border-box;\n  color: var(--rpf-input-color);\n  display: flex;\n  font-size: var(--font-size-1);\n  line-height: var(--line-height-2);\n  padding-block: calc(var(--space-1) - 2px);\n  padding-inline: var(--space-1-5);\n  max-width: 50ch;\n  min-width: 240px;\n  width: 100%;\n}\n.rpf-input:focus-visible {\n  outline: 3px solid var(--rpf-input-outline-color);\n}\n.rpf-input:disabled, .rpf-input--disabled {\n  background-color: var(--rpf-input-background-color-disabled);\n  border-color: var(--rpf-input-background-color-disabled);\n}\n.rpf-input--error {\n  border-color: var(--rpf-input-color-error);\n}\n.rpf-input--full-width {\n  max-width: none;\n}\n\n:root, :host {\n  --font-weight-regular: 400;\n  --font-weight-bold: 700;\n}\n\n:root, :host {\n  --line-height-0-75: 0.75rem;\n  --line-height-1: 1rem;\n  --line-height-1-5: 1.5rem;\n  --line-height-2: 2rem;\n  --line-height-2-5: 2.5rem;\n  --line-height-3: 3rem;\n  --line-height-3-5: 3.5rem;\n  --line-height-4: 4rem;\n  --line-height-4-5: 4.5rem;\n  --line-height-5: 5rem;\n  --line-height-5-5: 5.5rem;\n  --line-height-6: 6rem;\n  --line-height-6-5: 6.5rem;\n}\n\n:root {\n  --rpf-label-hint-color: var(--rpf-text-secondary);\n  --rpf-label-text-color: var(--rpf-text-primary);\n  --rpf-label-text-color-disabled: var(--rpf-grey-500);\n}\n\n.rpf-label {\n  all: unset;\n  color: var(--rpf-label-text-color);\n  display: flex;\n  flex-direction: column;\n  font-weight: var(--font-weight-bold);\n  padding-block-end: var(--space-1);\n  font-size: var(--font-size-1);\n  line-height: var(--line-height-1-5);\n}\n.rpf-label__hint {\n  color: var(--rpf-label-hint-color);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-weight-regular);\n}\n.rpf-label--disabled {\n  color: var(--rpf-label-text-color-disabled);\n}\n.rpf-label--disabled .rpf-label__hint {\n  color: var(--rpf-label-text-color-disabled);\n}\n\n.rpf-input-checkbox {\n  --rpf-input-checkbox-hit-target: 44px;\n  --rpf-input-checkbox-size: var(--space-3);\n  align-items: center;\n  border-radius: var(--space-1);\n  box-sizing: border-box;\n  display: flex;\n  gap: var(--space-1-5);\n  margin-block-end: var(--space-1);\n  max-width: 50ch;\n  min-height: var(--rpf-input-checkbox-hit-target);\n  min-width: 240px;\n  padding-block: calc((var(--rpf-input-checkbox-hit-target) - var(--rpf-input-checkbox-size)) / 2);\n  padding-inline: var(--space-1);\n  width: 100%;\n}\n.rpf-input-checkbox input[type=checkbox] {\n  align-self: flex-start;\n  appearance: none;\n  background: var(--rpf-white);\n  border: var(--space-0-25) solid var(--rpf-grey-850);\n  border-radius: var(--space-0-5);\n  flex-shrink: 0;\n  height: var(--rpf-input-checkbox-size);\n  margin: 0;\n  width: var(--rpf-input-checkbox-size);\n}\n.rpf-input-checkbox input[type=checkbox]:checked {\n  background: var(--rpf-grey-850);\n  background-image: url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.95834 15.0003L3.20834 10.2503L4.39584 9.06283L7.95834 12.6253L15.6042 4.97949L16.7917 6.16699L7.95834 15.0003Z\" fill=\"white\"/></svg>');\n}\n.rpf-input-checkbox input[type=checkbox]:disabled {\n  border-color: var(--rpf-grey-600);\n}\n.rpf-input-checkbox input[type=checkbox]:disabled:checked {\n  background-color: var(--rpf-grey-600);\n}\n.rpf-input-checkbox.rpf-input--full-width {\n  max-width: none;\n}\n.rpf-input-checkbox:has(> input[type=checkbox]:disabled), .rpf-input-checkbox--disabled {\n  background-color: var(--rpf-input-background-color-disabled);\n  color: var(--rpf-grey-400);\n}\n.rpf-input-checkbox:has(> input[type=checkbox]:focus-visible) {\n  outline: 3px solid var(--rpf-input-outline-color);\n}\n.rpf-input-checkbox:has(> input[type=checkbox]:focus-visible) > input[type=checkbox]:focus-visible {\n  outline: none;\n}\n\n:root {\n  --rpf-message-text-color: var(--rpf-alert-error);\n}\n\n.rpf-error-message {\n  all: unset;\n  align-items: center;\n  color: var(--rpf-message-text-color);\n  display: flex;\n  font-weight: var(--font-weight-bold);\n  padding-block-end: var(--space-1);\n}\n.rpf-error-message__icon {\n  margin-inline-end: var(--space-1);\n  padding-block: var(--space-1);\n}\n";
 styleInject(css_248z$2);
 
 const CheckboxInput = ({
-  checked,
-  disabled,
-  error,
   id,
   label,
   name,
-  onChange,
-  value
-}) => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("label", {
+  checked = false,
+  disabled = false,
+  error = "",
+  onChange = () => {},
+  value = ""
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
   className: classNames("rpf-input-checkbox", {
     "rpf-input-checkbox--error": error
   })
-}, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement("input", {
+}, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", {
   checked: !!checked,
   disabled: disabled,
   id: id,
@@ -2640,11 +1333,11 @@ const CheckboxInput = ({
   onChange: onChange,
   type: "checkbox",
   value: value
-})), /*#__PURE__*/React__default.createElement("span", {
+})), /*#__PURE__*/React.createElement("span", {
   className: "checkmark"
-}), label), error && /*#__PURE__*/React__default.createElement("div", {
+}), label), error && /*#__PURE__*/React.createElement("div", {
   className: "rpf-error-message"
-}, /*#__PURE__*/React__default.createElement("span", {
+}, /*#__PURE__*/React.createElement("span", {
   className: "rpf-error-message__icon material-symbols-sharp"
 }, "error"), error));
 CheckboxInput.propTypes = {
@@ -2657,33 +1350,26 @@ CheckboxInput.propTypes = {
   onChange: PropTypes.func,
   value: PropTypes.string
 };
-CheckboxInput.defaultProps = {
-  checked: true,
-  disabled: false,
-  error: "",
-  onChange: () => {},
-  value: "on"
-};
 
 const InputField = ({
-  disabled,
-  error,
-  hint,
   label,
   name,
-  children
-}) => /*#__PURE__*/React__default.createElement("div", {
+  children,
+  disabled = false,
+  error = "",
+  hint = ""
+}) => /*#__PURE__*/React.createElement("div", {
   className: "rpf-input-field"
-}, (label || hint) && /*#__PURE__*/React__default.createElement("label", {
+}, (label || hint) && /*#__PURE__*/React.createElement("label", {
   htmlFor: name,
   className: classNames("rpf-label", {
     "rpf-label--disabled": disabled
   })
-}, label, /*#__PURE__*/React__default.createElement("small", {
+}, label, /*#__PURE__*/React.createElement("small", {
   className: "rpf-label__hint"
-}, hint)), children, error && /*#__PURE__*/React__default.createElement("div", {
+}, hint)), children, error && /*#__PURE__*/React.createElement("div", {
   className: "rpf-error-message"
-}, /*#__PURE__*/React__default.createElement("span", {
+}, /*#__PURE__*/React.createElement("span", {
   className: "rpf-error-message__icon material-symbols-sharp"
 }, "error"), error));
 InputField.propTypes = {
@@ -2693,34 +1379,29 @@ InputField.propTypes = {
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
   name: PropTypes.string.isRequired
 };
-InputField.defaultProps = {
-  disabled: false,
-  error: "",
-  hint: ""
-};
 
 var css_248z$1 = ":root, :host {\n  --rpf-alert-error-highlight: hsla(0, 88%, 99%, 1);\n  --rpf-alert-error: hsla(0, 88%, 33%, 1);\n  --rpf-alert-information-highlight: hsla(225, 64%, 99%, 1);\n  --rpf-alert-information: hsla(225, 64%, 33%, 1);\n  --rpf-alert-success-highlight: hsla(136, 90%, 99%, 1);\n  --rpf-alert-success: hsla(136, 90%, 20%, 1);\n  --rpf-alert-warning-highlight: hsla(26, 70%, 99%, 1);\n  --rpf-alert-warning: hsla(26, 70%, 29%, 1);\n}\n\n:root, :host {\n  --font-weight-regular: 400;\n  --font-weight-bold: 700;\n}\n\n:root, :host {\n  --space-0-125: 0.0625rem;\n  --space-0-25: 0.125rem;\n  --space-0-5: 0.25rem;\n  --space-1: 0.5rem;\n  --space-1-5: 0.75rem;\n  --space-2: 1rem;\n  --space-3: 1.5rem;\n  --space-4: 2rem;\n  --space-5: 2.5rem;\n  --space-6: 3rem;\n  --space-7: 3.5rem;\n  --space-8: 4rem;\n  --space-9: 4.5rem;\n  --space-10: 5rem;\n}\n\n:root {\n  --rpf-message-text-color: var(--rpf-alert-error);\n}\n\n.rpf-error-message {\n  all: unset;\n  align-items: center;\n  color: var(--rpf-message-text-color);\n  display: flex;\n  font-weight: var(--font-weight-bold);\n  padding-block-end: var(--space-1);\n}\n.rpf-error-message__icon {\n  margin-inline-end: var(--space-1);\n  padding-block: var(--space-1);\n}\n\n:root, :host {\n  --rpf-white: hsla(0, 0%, 100%, 1);\n  --rpf-off-white: hsla(225, 25%, 97%, 1);\n  --rpf-grey-50: hsla(210, 8%, 95%, 1);\n  --rpf-grey-100: hsla(228, 10%, 90%, 1);\n  --rpf-grey-150: hsla(223, 9%, 85%, 1);\n  --rpf-grey-200: hsla(228, 10%, 80%, 1);\n  --rpf-grey-300: hsla(229, 9%, 75%, 1);\n  --rpf-grey-400: hsla(229, 8%, 61%, 1);\n  --rpf-grey-500: hsla(229, 9%, 42%, 1);\n  --rpf-grey-600: hsla(228, 9%, 32%, 1);\n  --rpf-grey-700: hsla(228, 9%, 22%, 1);\n  --rpf-grey-800: hsla(232, 9%, 18%, 1);\n  --rpf-grey-850: hsla(228, 9%, 15%, 1);\n  --rpf-grey-900: hsla(228, 9%, 10%, 1);\n  --rpf-grey-950: hsla(228, 8%, 5%, 1);\n  --rpf-black: hsla(0, 0%, 0%, 1);\n}\n\n:root, :host {\n  --rpf-text-primary: hsla(0, 0%, 13%, 1);\n  --rpf-text-primary-darkmode: var(--rpf-white);\n  --rpf-text-secondary: hsla(200, 9%, 33%, 1);\n  --rpf-text-secondary-darkmode: hsla(0, 0%, 80%, 1);\n}\n\n:root, :host {\n  --line-height-0-75: 0.75rem;\n  --line-height-1: 1rem;\n  --line-height-1-5: 1.5rem;\n  --line-height-2: 2rem;\n  --line-height-2-5: 2.5rem;\n  --line-height-3: 3rem;\n  --line-height-3-5: 3.5rem;\n  --line-height-4: 4rem;\n  --line-height-4-5: 4.5rem;\n  --line-height-5: 5rem;\n  --line-height-5-5: 5.5rem;\n  --line-height-6: 6rem;\n  --line-height-6-5: 6.5rem;\n}\n\n:root {\n  --rpf-label-hint-color: var(--rpf-text-secondary);\n  --rpf-label-text-color: var(--rpf-text-primary);\n  --rpf-label-text-color-disabled: var(--rpf-grey-500);\n}\n\n.rpf-label {\n  all: unset;\n  color: var(--rpf-label-text-color);\n  display: flex;\n  flex-direction: column;\n  font-weight: var(--font-weight-bold);\n  padding-block-end: var(--space-1);\n  font-size: var(--font-size-1);\n  line-height: var(--line-height-1-5);\n}\n.rpf-label__hint {\n  color: var(--rpf-label-hint-color);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-weight-regular);\n}\n.rpf-label--disabled {\n  color: var(--rpf-label-text-color-disabled);\n}\n.rpf-label--disabled .rpf-label__hint {\n  color: var(--rpf-label-text-color-disabled);\n}\n\n.rpf-input.rpf-input-select {\n  background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'><path fill='%23212121' d='m12 15.375-6-6 1.4-1.4 4.6 4.6 4.6-4.6 1.4 1.4-6 6Z'/></svg>\");\n  background-repeat: no-repeat;\n  background-position: center right var(--space-1-5);\n}\nhtml[dir=rtl] .rpf-input.rpf-input-select {\n  background-position: center left var(--space-1-5);\n}\n.rpf-input.rpf-input-select:disabled, .rpf-input.rpf-input-select--disabled {\n  background-image: none;\n}\n\n:root, :host {\n  --border-radius: var(--space-1);\n  --border-width-sm: 1px;\n  --border-width-md: 2px;\n  --border-width-lg: 3px;\n  --alert-border-width: var(--border-width-md);\n  --fieldset-border-width: var(--border-width-md);\n  --input-border-width: var(--border-width-md);\n}\n\n:root, :host {\n  --rpf-red-100: hsla(4, 89%, 96%, 1);\n  --rpf-red-200: hsla(1, 87%, 91%, 1);\n  --rpf-red-400: hsla(1, 87%, 82%, 1);\n  --rpf-red-600: hsla(1, 87%, 72%, 1);\n  --rpf-red-800: hsla(1, 87%, 63%, 1);\n  --rpf-red-900: hsla(1, 52%, 50%, 1);\n  --rpf-green-100: hsla(125, 41%, 95%, 1);\n  --rpf-green-200: hsla(122, 39%, 87%, 1);\n  --rpf-green-400: hsla(123, 40%, 74%, 1);\n  --rpf-green-600: hsla(123, 40%, 61%, 1);\n  --rpf-green-800: hsla(123, 43%, 48%, 1);\n  --rpf-green-900: hsla(123, 43%, 34%, 1);\n  --rpf-teal-100: hsla(176, 55%, 94%, 1);\n  --rpf-teal-200: hsla(174, 55%, 85%, 1);\n  --rpf-teal-400: hsla(174, 55%, 70%, 1);\n  --rpf-teal-600: hsla(174, 56%, 56%, 1);\n  --rpf-teal-800: hsla(174, 81%, 41%, 1);\n  --rpf-teal-900: hsla(174, 81%, 27%, 1);\n  --rpf-orange-100: hsla(31, 100%, 95%, 1);\n  --rpf-orange-200: hsla(32, 100%, 88%, 1);\n  --rpf-orange-400: hsla(31, 100%, 77%, 1);\n  --rpf-orange-600: hsla(31, 99%, 65%, 1);\n  --rpf-orange-800: hsla(31, 99%, 54%, 1);\n  --rpf-orange-900: hsla(31, 85%, 35%, 1);\n  --rpf-yellow-100: hsla(51, 100%, 95%, 1);\n  --rpf-yellow-200: hsla(52, 100%, 87%, 1);\n  --rpf-yellow-400: hsla(51, 100%, 75%, 1);\n  --rpf-yellow-600: hsla(52, 100%, 63%, 1);\n  --rpf-yellow-800: hsla(52, 100%, 50%, 1);\n  --rpf-yellow-900: hsla(52, 100%, 26%, 1);\n  --rpf-purple-100: hsla(282, 36%, 95%, 1);\n  --rpf-purple-200: hsla(279, 38%, 87%, 1);\n  --rpf-purple-400: hsla(279, 38%, 73%, 1);\n  --rpf-purple-600: hsla(279, 37%, 60%, 1);\n  --rpf-purple-800: hsla(279, 43%, 47%, 1);\n  --rpf-purple-900: hsla(280, 43%, 37%, 1);\n  --rpf-navy-100: hsla(235, 38%, 94%, 1);\n  --rpf-navy-200: hsla(234, 38%, 84%, 1);\n  --rpf-navy-400: hsla(235, 38%, 69%, 1);\n  --rpf-navy-600: hsla(235, 38%, 53%, 1);\n  --rpf-navy-800: hsla(235, 63%, 37%, 1);\n  --rpf-navy-900: hsla(234, 63%, 30%, 1);\n  --rpf-blue-100: hsla(203, 86%, 95%, 1);\n  --rpf-blue-200: hsla(204, 88%, 87%, 1);\n  --rpf-blue-400: hsla(204, 88%, 74%, 1);\n  --rpf-blue-600: hsla(204, 89%, 60%, 1);\n  --rpf-blue-800: hsla(204, 100%, 47%, 1);\n  --rpf-blue-900: hsla(204, 99%, 37%, 1);\n}\n\n:root, :host {\n  --rpf-input-background-color: var(--rpf-white);\n  --rpf-input-background-color-disabled: var(--rpf-grey-50);\n  --rpf-input-background-color-readonly: var(--rpf-grey-50);\n  --rpf-input-color-error: var(--rpf-alert-error);\n  --rpf-input-color: var(--rpf-text-primary);\n  --rpf-input-outline-color: var(--rpf-blue-800);\n}\n\n:root, :host {\n  --font-size-0-5: 0.5rem;\n  --font-size-0-75: 0.75rem;\n  --font-size-1: 1rem;\n  --font-size-1-5: 1.25rem;\n  --font-size-2: 1.5rem;\n  --font-size-3: 2rem;\n  --font-size-4: 2.5rem;\n  --font-size-5: 3rem;\n  --font-size-6: 3.5rem;\n  --font-size-7: 4rem;\n  --font-size-8: 4.5rem;\n  --font-size-9: 5rem;\n}\n\n.rpf-input-field {\n  margin-block-end: var(--space-3);\n}\n\n.rpf-input {\n  all: unset;\n  background-color: var(--rpf-input-background-color);\n  border: var(--input-border-width) solid var(--rpf-input-color);\n  border-radius: var(--border-radius);\n  box-sizing: border-box;\n  color: var(--rpf-input-color);\n  display: flex;\n  font-size: var(--font-size-1);\n  line-height: var(--line-height-2);\n  padding-block: calc(var(--space-1) - 2px);\n  padding-inline: var(--space-1-5);\n  max-width: 50ch;\n  min-width: 240px;\n  width: 100%;\n}\n.rpf-input:focus-visible {\n  outline: 3px solid var(--rpf-input-outline-color);\n}\n.rpf-input:disabled, .rpf-input--disabled {\n  background-color: var(--rpf-input-background-color-disabled);\n  border-color: var(--rpf-input-background-color-disabled);\n}\n.rpf-input--error {\n  border-color: var(--rpf-input-color-error);\n}\n.rpf-input--full-width {\n  max-width: none;\n}\n";
 styleInject(css_248z$1);
 
 const SelectInput = ({
-  disabled,
-  error,
-  fullWidth,
-  hint,
   id,
   label,
   name,
-  onChange,
   options,
-  placeholder,
-  value
-}) => /*#__PURE__*/React__default.createElement(InputField, {
+  disabled = false,
+  error = "",
+  fullWidth = false,
+  hint = "",
+  onChange = () => {},
+  placeholder = "",
+  value = ""
+}) => /*#__PURE__*/React.createElement(InputField, {
   disabled: disabled,
   error: error,
   hint: hint,
   label: label,
   name: name
-}, /*#__PURE__*/React__default.createElement("select", {
+}, /*#__PURE__*/React.createElement("select", {
   className: classNames("rpf-input rpf-input-select", {
     "rpf-input--error": error,
     "rpf-input--full-width": fullWidth
@@ -2731,10 +1412,10 @@ const SelectInput = ({
   onChange: onChange,
   type: "text",
   value: value
-}, !value && !!placeholder && /*#__PURE__*/React__default.createElement("option", {
+}, !value && !!placeholder && /*#__PURE__*/React.createElement("option", {
   value: "",
   disabled: true
-}, placeholder), options.map(option => /*#__PURE__*/React__default.createElement("option", {
+}, placeholder), options.map(option => /*#__PURE__*/React.createElement("option", {
   value: option.key,
   key: option.key
 }, option.value))));
@@ -2751,36 +1432,27 @@ SelectInput.propTypes = {
   placeholder: PropTypes.string,
   value: PropTypes.string
 };
-SelectInput.defaultProps = {
-  disabled: false,
-  error: "",
-  fullWidth: false,
-  hint: "",
-  onChange: () => {},
-  placeholder: "",
-  value: ""
-};
 
 var css_248z = ":root, :host {\n  --border-radius: var(--space-1);\n  --border-width-sm: 1px;\n  --border-width-md: 2px;\n  --border-width-lg: 3px;\n  --alert-border-width: var(--border-width-md);\n  --fieldset-border-width: var(--border-width-md);\n  --input-border-width: var(--border-width-md);\n}\n\n:root, :host {\n  --rpf-alert-error-highlight: hsla(0, 88%, 99%, 1);\n  --rpf-alert-error: hsla(0, 88%, 33%, 1);\n  --rpf-alert-information-highlight: hsla(225, 64%, 99%, 1);\n  --rpf-alert-information: hsla(225, 64%, 33%, 1);\n  --rpf-alert-success-highlight: hsla(136, 90%, 99%, 1);\n  --rpf-alert-success: hsla(136, 90%, 20%, 1);\n  --rpf-alert-warning-highlight: hsla(26, 70%, 99%, 1);\n  --rpf-alert-warning: hsla(26, 70%, 29%, 1);\n}\n\n:root, :host {\n  --rpf-white: hsla(0, 0%, 100%, 1);\n  --rpf-off-white: hsla(225, 25%, 97%, 1);\n  --rpf-grey-50: hsla(210, 8%, 95%, 1);\n  --rpf-grey-100: hsla(228, 10%, 90%, 1);\n  --rpf-grey-150: hsla(223, 9%, 85%, 1);\n  --rpf-grey-200: hsla(228, 10%, 80%, 1);\n  --rpf-grey-300: hsla(229, 9%, 75%, 1);\n  --rpf-grey-400: hsla(229, 8%, 61%, 1);\n  --rpf-grey-500: hsla(229, 9%, 42%, 1);\n  --rpf-grey-600: hsla(228, 9%, 32%, 1);\n  --rpf-grey-700: hsla(228, 9%, 22%, 1);\n  --rpf-grey-800: hsla(232, 9%, 18%, 1);\n  --rpf-grey-850: hsla(228, 9%, 15%, 1);\n  --rpf-grey-900: hsla(228, 9%, 10%, 1);\n  --rpf-grey-950: hsla(228, 8%, 5%, 1);\n  --rpf-black: hsla(0, 0%, 0%, 1);\n}\n\n:root, :host {\n  --rpf-red-100: hsla(4, 89%, 96%, 1);\n  --rpf-red-200: hsla(1, 87%, 91%, 1);\n  --rpf-red-400: hsla(1, 87%, 82%, 1);\n  --rpf-red-600: hsla(1, 87%, 72%, 1);\n  --rpf-red-800: hsla(1, 87%, 63%, 1);\n  --rpf-red-900: hsla(1, 52%, 50%, 1);\n  --rpf-green-100: hsla(125, 41%, 95%, 1);\n  --rpf-green-200: hsla(122, 39%, 87%, 1);\n  --rpf-green-400: hsla(123, 40%, 74%, 1);\n  --rpf-green-600: hsla(123, 40%, 61%, 1);\n  --rpf-green-800: hsla(123, 43%, 48%, 1);\n  --rpf-green-900: hsla(123, 43%, 34%, 1);\n  --rpf-teal-100: hsla(176, 55%, 94%, 1);\n  --rpf-teal-200: hsla(174, 55%, 85%, 1);\n  --rpf-teal-400: hsla(174, 55%, 70%, 1);\n  --rpf-teal-600: hsla(174, 56%, 56%, 1);\n  --rpf-teal-800: hsla(174, 81%, 41%, 1);\n  --rpf-teal-900: hsla(174, 81%, 27%, 1);\n  --rpf-orange-100: hsla(31, 100%, 95%, 1);\n  --rpf-orange-200: hsla(32, 100%, 88%, 1);\n  --rpf-orange-400: hsla(31, 100%, 77%, 1);\n  --rpf-orange-600: hsla(31, 99%, 65%, 1);\n  --rpf-orange-800: hsla(31, 99%, 54%, 1);\n  --rpf-orange-900: hsla(31, 85%, 35%, 1);\n  --rpf-yellow-100: hsla(51, 100%, 95%, 1);\n  --rpf-yellow-200: hsla(52, 100%, 87%, 1);\n  --rpf-yellow-400: hsla(51, 100%, 75%, 1);\n  --rpf-yellow-600: hsla(52, 100%, 63%, 1);\n  --rpf-yellow-800: hsla(52, 100%, 50%, 1);\n  --rpf-yellow-900: hsla(52, 100%, 26%, 1);\n  --rpf-purple-100: hsla(282, 36%, 95%, 1);\n  --rpf-purple-200: hsla(279, 38%, 87%, 1);\n  --rpf-purple-400: hsla(279, 38%, 73%, 1);\n  --rpf-purple-600: hsla(279, 37%, 60%, 1);\n  --rpf-purple-800: hsla(279, 43%, 47%, 1);\n  --rpf-purple-900: hsla(280, 43%, 37%, 1);\n  --rpf-navy-100: hsla(235, 38%, 94%, 1);\n  --rpf-navy-200: hsla(234, 38%, 84%, 1);\n  --rpf-navy-400: hsla(235, 38%, 69%, 1);\n  --rpf-navy-600: hsla(235, 38%, 53%, 1);\n  --rpf-navy-800: hsla(235, 63%, 37%, 1);\n  --rpf-navy-900: hsla(234, 63%, 30%, 1);\n  --rpf-blue-100: hsla(203, 86%, 95%, 1);\n  --rpf-blue-200: hsla(204, 88%, 87%, 1);\n  --rpf-blue-400: hsla(204, 88%, 74%, 1);\n  --rpf-blue-600: hsla(204, 89%, 60%, 1);\n  --rpf-blue-800: hsla(204, 100%, 47%, 1);\n  --rpf-blue-900: hsla(204, 99%, 37%, 1);\n}\n\n:root, :host {\n  --rpf-text-primary: hsla(0, 0%, 13%, 1);\n  --rpf-text-primary-darkmode: var(--rpf-white);\n  --rpf-text-secondary: hsla(200, 9%, 33%, 1);\n  --rpf-text-secondary-darkmode: hsla(0, 0%, 80%, 1);\n}\n\n:root, :host {\n  --rpf-input-background-color: var(--rpf-white);\n  --rpf-input-background-color-disabled: var(--rpf-grey-50);\n  --rpf-input-background-color-readonly: var(--rpf-grey-50);\n  --rpf-input-color-error: var(--rpf-alert-error);\n  --rpf-input-color: var(--rpf-text-primary);\n  --rpf-input-outline-color: var(--rpf-blue-800);\n}\n\n:root, :host {\n  --font-size-0-5: 0.5rem;\n  --font-size-0-75: 0.75rem;\n  --font-size-1: 1rem;\n  --font-size-1-5: 1.25rem;\n  --font-size-2: 1.5rem;\n  --font-size-3: 2rem;\n  --font-size-4: 2.5rem;\n  --font-size-5: 3rem;\n  --font-size-6: 3.5rem;\n  --font-size-7: 4rem;\n  --font-size-8: 4.5rem;\n  --font-size-9: 5rem;\n}\n\n:root, :host {\n  --space-0-125: 0.0625rem;\n  --space-0-25: 0.125rem;\n  --space-0-5: 0.25rem;\n  --space-1: 0.5rem;\n  --space-1-5: 0.75rem;\n  --space-2: 1rem;\n  --space-3: 1.5rem;\n  --space-4: 2rem;\n  --space-5: 2.5rem;\n  --space-6: 3rem;\n  --space-7: 3.5rem;\n  --space-8: 4rem;\n  --space-9: 4.5rem;\n  --space-10: 5rem;\n}\n\n.rpf-input-field {\n  margin-block-end: var(--space-3);\n}\n\n.rpf-input {\n  all: unset;\n  background-color: var(--rpf-input-background-color);\n  border: var(--input-border-width) solid var(--rpf-input-color);\n  border-radius: var(--border-radius);\n  box-sizing: border-box;\n  color: var(--rpf-input-color);\n  display: flex;\n  font-size: var(--font-size-1);\n  line-height: var(--line-height-2);\n  padding-block: calc(var(--space-1) - 2px);\n  padding-inline: var(--space-1-5);\n  max-width: 50ch;\n  min-width: 240px;\n  width: 100%;\n}\n.rpf-input:focus-visible {\n  outline: 3px solid var(--rpf-input-outline-color);\n}\n.rpf-input:disabled, .rpf-input--disabled {\n  background-color: var(--rpf-input-background-color-disabled);\n  border-color: var(--rpf-input-background-color-disabled);\n}\n.rpf-input--error {\n  border-color: var(--rpf-input-color-error);\n}\n.rpf-input--full-width {\n  max-width: none;\n}\n\n:root, :host {\n  --font-weight-regular: 400;\n  --font-weight-bold: 700;\n}\n\n:root, :host {\n  --line-height-0-75: 0.75rem;\n  --line-height-1: 1rem;\n  --line-height-1-5: 1.5rem;\n  --line-height-2: 2rem;\n  --line-height-2-5: 2.5rem;\n  --line-height-3: 3rem;\n  --line-height-3-5: 3.5rem;\n  --line-height-4: 4rem;\n  --line-height-4-5: 4.5rem;\n  --line-height-5: 5rem;\n  --line-height-5-5: 5.5rem;\n  --line-height-6: 6rem;\n  --line-height-6-5: 6.5rem;\n}\n\n:root {\n  --rpf-label-hint-color: var(--rpf-text-secondary);\n  --rpf-label-text-color: var(--rpf-text-primary);\n  --rpf-label-text-color-disabled: var(--rpf-grey-500);\n}\n\n.rpf-label {\n  all: unset;\n  color: var(--rpf-label-text-color);\n  display: flex;\n  flex-direction: column;\n  font-weight: var(--font-weight-bold);\n  padding-block-end: var(--space-1);\n  font-size: var(--font-size-1);\n  line-height: var(--line-height-1-5);\n}\n.rpf-label__hint {\n  color: var(--rpf-label-hint-color);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-weight-regular);\n}\n.rpf-label--disabled {\n  color: var(--rpf-label-text-color-disabled);\n}\n.rpf-label--disabled .rpf-label__hint {\n  color: var(--rpf-label-text-color-disabled);\n}\n\n:root {\n  --rpf-message-text-color: var(--rpf-alert-error);\n}\n\n.rpf-error-message {\n  all: unset;\n  align-items: center;\n  color: var(--rpf-message-text-color);\n  display: flex;\n  font-weight: var(--font-weight-bold);\n  padding-block-end: var(--space-1);\n}\n.rpf-error-message__icon {\n  margin-inline-end: var(--space-1);\n  padding-block: var(--space-1);\n}\n";
 styleInject(css_248z);
 
 const TextInput = ({
-  disabled,
-  error,
-  fullWidth,
-  hint,
   id,
   label,
   name,
-  onChange,
-  value
-}) => /*#__PURE__*/React__default.createElement(InputField, {
+  value,
+  disabled = false,
+  error = "",
+  fullWidth = false,
+  hint = "",
+  onChange = () => {}
+}) => /*#__PURE__*/React.createElement(InputField, {
   disabled: disabled,
   error: error,
   hint: hint,
   label: label,
   name: name
-}, /*#__PURE__*/React__default.createElement("input", {
+}, /*#__PURE__*/React.createElement("input", {
   className: classNames("rpf-input rpf-input-text", {
     "rpf-input--error": error,
     "rpf-input--full-width": fullWidth
@@ -2803,12 +1475,5 @@ TextInput.propTypes = {
   onChange: PropTypes.func,
   value: PropTypes.string.isRequired
 };
-TextInput.defaultProps = {
-  disabled: false,
-  error: "",
-  fullWidth: false,
-  hint: "",
-  onChange: () => {}
-};
 
 export { Accordion, Alert, Button, CheckboxInput, InputField, ProgressBar, SelectInput, TextInput };