@equinor/amplify-component-lib 9.15.0-beta.0 → 9.15.1

package/dist/index.js

@@ -363,8 +363,7 @@ var require_lodash = __commonJS((exports, module) => {
           return types;
         }
         return freeProcess && freeProcess.binding && freeProcess.binding("util");
-      } catch (e) {
-      }
+      } catch (e) {}
     }();
     var nodeIsArrayBuffer = nodeUtil && nodeUtil.isArrayBuffer, nodeIsDate = nodeUtil && nodeUtil.isDate, nodeIsMap = nodeUtil && nodeUtil.isMap, nodeIsRegExp = nodeUtil && nodeUtil.isRegExp, nodeIsSet = nodeUtil && nodeUtil.isSet, nodeIsTypedArray = nodeUtil && nodeUtil.isTypedArray;
     function apply(func, thisArg, args) {
@@ -590,14 +589,12 @@ var require_lodash = __commonJS((exports, module) => {
     }
     function charsStartIndex(strSymbols, chrSymbols) {
       var index = -1, length = strSymbols.length;
-      while (++index < length && baseIndexOf(chrSymbols, strSymbols[index], 0) > -1) {
-      }
+      while (++index < length && baseIndexOf(chrSymbols, strSymbols[index], 0) > -1) {}
       return index;
     }
     function charsEndIndex(strSymbols, chrSymbols) {
       var index = strSymbols.length;
-      while (index-- && baseIndexOf(chrSymbols, strSymbols[index], 0) > -1) {
-      }
+      while (index-- && baseIndexOf(chrSymbols, strSymbols[index], 0) > -1) {}
       return index;
     }
     function countHolders(array, placeholder) {
@@ -693,8 +690,7 @@ var require_lodash = __commonJS((exports, module) => {
     }
     function trimmedEndIndex(string) {
       var index = string.length;
-      while (index-- && reWhitespace.test(string.charAt(index))) {
-      }
+      while (index-- && reWhitespace.test(string.charAt(index))) {}
       return index;
     }
     var unescapeHtmlChar = basePropertyOf(htmlUnescapes);
@@ -733,8 +729,7 @@ var require_lodash = __commonJS((exports, module) => {
           var func = getNative(Object2, "defineProperty");
           func({}, "", {});
           return func;
-        } catch (e) {
-        }
+        } catch (e) {}
       }();
       var ctxClearTimeout = context.clearTimeout !== root.clearTimeout && context.clearTimeout, ctxNow = Date2 && Date2.now !== root.Date.now && Date2.now, ctxSetTimeout = context.setTimeout !== root.setTimeout && context.setTimeout;
       var { ceil: nativeCeil, floor: nativeFloor } = Math2, nativeGetSymbols = Object2.getOwnPropertySymbols, nativeIsBuffer = Buffer ? Buffer.isBuffer : undefined2, nativeIsFinite = context.isFinite, nativeJoin = arrayProto.join, nativeKeys = overArg(Object2.keys, Object2), nativeMax = Math2.max, nativeMin = Math2.min, nativeNow = Date2.now, nativeParseInt = context.parseInt, nativeRandom = Math2.random, nativeReverse = arrayProto.reverse;
@@ -755,8 +750,7 @@ var require_lodash = __commonJS((exports, module) => {
         return new LodashWrapper(value);
       }
       var baseCreate = function() {
-        function object() {
-        }
+        function object() {}
         return function(proto) {
           if (!isObject(proto)) {
             return {};
@@ -770,8 +764,7 @@ var require_lodash = __commonJS((exports, module) => {
           return result2;
         };
       }();
-      function baseLodash() {
-      }
+      function baseLodash() {}
       function LodashWrapper(value, chainAll) {
         this.__wrapped__ = value;
         this.__actions__ = [];
@@ -1921,8 +1914,7 @@ var require_lodash = __commonJS((exports, module) => {
       }
       function baseWhile(array, predicate, isDrop, fromRight) {
         var length = array.length, index = fromRight ? length : -1;
-        while ((fromRight ? index-- : ++index < length) && predicate(array[index], index, array)) {
-        }
+        while ((fromRight ? index-- : ++index < length) && predicate(array[index], index, array)) {}
         return isDrop ? baseSlice(array, fromRight ? 0 : index, fromRight ? index + 1 : length) : baseSlice(array, fromRight ? index + 1 : 0, fromRight ? length : index);
       }
       function baseWrapperValue(value, actions) {
@@ -2703,8 +2695,7 @@ var require_lodash = __commonJS((exports, module) => {
         try {
           value[symToStringTag] = undefined2;
           var unmasked = true;
-        } catch (e) {
-        }
+        } catch (e) {}
         var result2 = nativeObjectToString.call(value);
         if (unmasked) {
           if (isOwn) {
@@ -3062,12 +3053,10 @@ var require_lodash = __commonJS((exports, module) => {
         if (func != null) {
           try {
             return funcToString.call(func);
-          } catch (e) {
-          }
+          } catch (e) {}
           try {
             return func + "";
-          } catch (e) {
-          }
+          } catch (e) {}
         }
         return "";
       }
@@ -4864,8 +4853,7 @@ __p += '`;
         }
         return this;
       }
-      function noop() {
-      }
+      function noop() {}
       function nthArg(n) {
         n = toInteger(n);
         return baseRest(function(args) {
@@ -8251,7 +8239,7 @@ import {
   useRef as useRef2,
   useState as useState5
 } from "react";
-import { useLocation, useNavigate } from "@tanstack/react-router";
+import { useLocation, useNavigate } from "react-router";
 
 // src/atoms/hooks/useOnScreenMultiple.ts
 import { useEffect as useEffect2, useState as useState4 } from "react";
@@ -8316,6 +8304,7 @@ var TableOfContentsProvider = ({
   const { hash } = useLocation();
   const [selected, setSelected] = useState5(items[0]?.value);
   const [elements, setElements] = useState5([]);
+  const [shouldInstantlyJump, setShouldInstantlyJump] = useState5(hash !== "");
   const initHashStateRef = useRef2(false);
   const values = useMemo3(() => items.flatMap((item) => getValues([], item)), [items]);
   useEffect3(() => {
@@ -8339,19 +8328,9 @@ var TableOfContentsProvider = ({
   const isScrollingTo = useRef2(-1);
   const handleSetSelected = useCallback2((value, options) => {
     const selectedIndex = values.findIndex((itemValue) => itemValue === value);
-    if (hashNavigation) {
-      setSelected(values[selectedIndex]);
-      navigate({
-        to: ".",
-        hash: `#${values[selectedIndex]}`,
-        hashScrollIntoView: false,
-        replace: true
-      });
-      return;
-    }
     const element = elements[selectedIndex];
     if (element) {
-      const behavior = options?.behavior ?? "smooth";
+      const behavior = options?.shouldInstantlyJumpOnMount && shouldInstantlyJump ? "instant" : options?.behavior ?? "smooth";
       element.scrollIntoView({
         block: "start",
         behavior
@@ -8365,6 +8344,10 @@ var TableOfContentsProvider = ({
           same += 1;
           if (same > 1) {
             setSelected(values[selectedIndex]);
+            if (hashNavigation) {
+              navigate(`#${values[selectedIndex]}`, { replace: true });
+              setShouldInstantlyJump(false);
+            }
             isScrollingTo.current = -1;
             return;
           }
@@ -8376,28 +8359,9 @@ var TableOfContentsProvider = ({
       };
       requestAnimationFrame(checkScrollDone);
     }
-  }, [elements, hashNavigation, navigate, values]);
-  useEffect3(() => {
-    if (hash && !initHashStateRef.current) {
-      initHashStateRef.current = true;
-      const targetValue = decodeURIComponent(hash.replace("#", ""));
-      if (!targetValue.length || !values.includes(targetValue)) {
-        return;
-      }
-      setSelected(targetValue);
-      navigate({
-        to: ".",
-        hash: `#${targetValue}`,
-        hashScrollIntoView: {
-          block: "start",
-          behavior: "instant"
-        },
-        replace: true
-      });
-    }
-  }, [hash, navigate, values]);
+  }, [elements, hashNavigation, navigate, shouldInstantlyJump, values]);
   useEffect3(() => {
-    if (visible.length === 0 || visible.length !== values.length || isScrollingTo.current !== -1 || !initHashStateRef.current)
+    if (visible.length === 0 || visible.length !== values.length || isScrollingTo.current !== -1)
       return;
     let newSelectedIndex = -1;
     for (let index = visible.length - 1;index >= 0; index--) {
@@ -8407,16 +8371,20 @@ var TableOfContentsProvider = ({
     }
     if (newSelectedIndex === -1 || values.at(newSelectedIndex) === undefined)
       return;
+    const targetValue = hash.replace("#", "");
+    if (!initHashStateRef.current && targetValue.length && values.includes(targetValue)) {
+      handleSetSelected(targetValue, {
+        behavior: "instant",
+        shouldInstantlyJumpOnMount: true
+      });
+      initHashStateRef.current = true;
+      return;
+    }
     setSelected(values[newSelectedIndex]);
     if (hashNavigation) {
-      navigate({
-        to: ".",
-        hash: `#${values[newSelectedIndex]}`,
-        hashScrollIntoView: false,
-        replace: true
-      });
+      navigate(`#${values[newSelectedIndex]}`, { replace: true });
     }
-  }, [handleSetSelected, hashNavigation, navigate, values, visible]);
+  }, [hashNavigation, navigate, values, visible]);
   return /* @__PURE__ */ jsxDEV13(TableOfContentsContext.Provider, {
     value: {
       items,
@@ -9090,7 +9058,7 @@ import {
   useContext as useContext6,
   useState as useState11
 } from "react";
-import { useLocation as useLocation2, useNavigate as useNavigate2, useParams } from "@tanstack/react-router";
+import { useLocation as useLocation2, useNavigate as useNavigate2, useParams } from "react-router";
 import { jsxDEV as jsxDEV17 } from "react/jsx-dev-runtime";
 var StepperContext = createContext6(undefined);
 function useStepper() {
@@ -9101,7 +9069,7 @@ function useStepper() {
   return context;
 }
 var StepperProvider = ({ steps, children, isStepDisabled, ...rest }) => {
-  const { step } = useParams({ strict: false });
+  const { step } = useParams();
   const navigate = useNavigate2();
   const pathWithoutStep = useLocation2().pathname.split("/").slice(0, -1).join("/");
   const usingInitialStep = rest.syncToURLParam ? Number(step) : rest?.initialStep ?? 0;
@@ -9119,7 +9087,7 @@ var StepperProvider = ({ steps, children, isStepDisabled, ...rest }) => {
   }
   const handleOnSetStep = (value) => {
     if (rest.syncToURLParam) {
-      navigate({ to: `${pathWithoutStep}/${value}` });
+      navigate(`${pathWithoutStep}/${value}`);
     } else {
       setCurrentStep(value);
     }
@@ -9210,16 +9178,49 @@ var ThemeProvider = ({ children }) => {
     children
   }, undefined, false, undefined, this);
 };
+// src/atoms/hooks/useSearchParameter.ts
+import { useRef as useRef7 } from "react";
+import { useSearchParams } from "react-router-dom";
+function useSearchParameter({
+  key,
+  initialValue,
+  parser
+}) {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const usedInitialValue = useRef7(false);
+  const stringValue = searchParams.get(key) ?? undefined;
+  const parsedValue = parser && stringValue ? parser(stringValue) : stringValue;
+  const value = !usedInitialValue.current && parsedValue === undefined ? initialValue : parsedValue;
+  const handleSetValue = (action) => {
+    if (!usedInitialValue.current) {
+      usedInitialValue.current = true;
+    }
+    if (action instanceof Function) {
+      const newValue = action(value);
+      handleSetValue(newValue);
+    } else {
+      const newSearchParams = new URLSearchParams(searchParams);
+      const stringify = typeof action === "string" ? action : JSON.stringify(action);
+      if (stringify === undefined || stringify === "" || stringify === "null" || stringify === "[]" || stringify === "{}") {
+        newSearchParams.delete(key);
+      } else {
+        newSearchParams.set(key, stringify);
+      }
+      setSearchParams(newSearchParams);
+    }
+  };
+  return [value, handleSetValue];
+}
 // src/atoms/hooks/usePrefetchRichTextImages.ts
-import { useEffect as useEffect10, useRef as useRef7 } from "react";
+import { useEffect as useEffect10, useRef as useRef8 } from "react";
 import { useIsFetching, useQueryClient } from "@tanstack/react-query";
 function usePrefetchRichTextImages({
   richTextValues,
   onImageRead
 }) {
   const queryClient = useQueryClient();
-  const startedPrefetch = useRef7([]);
-  const prefetched = useRef7([]);
+  const startedPrefetch = useRef8([]);
+  const prefetched = useRef8([]);
   const paths = richTextValues.flatMap((value) => getImagesFromRichText(value));
   const isPrefetching = useIsFetching({
     predicate: (query) => startedPrefetch.current.some((path) => query.queryKey[0] === path && !prefetched.current.includes(path))
@@ -11729,7 +11730,7 @@ var ContentMenu = ({
   }, undefined, false, undefined, this);
 };
 // src/molecules/DatePicker/DatePicker.tsx
-import { forwardRef as forwardRef28, useRef as useRef8 } from "react";
+import { forwardRef as forwardRef28, useRef as useRef9 } from "react";
 import {
   DatePicker as EDSDatePicker,
   Icon as Icon9,
@@ -11864,7 +11865,7 @@ var DatePicker = forwardRef28((props, ref) => {
     helperText: props.helperProps?.text,
     helperIcon: props.helperProps?.icon
   });
-  const skeletonWidth = useRef8(`${Math.max(40, Math.random() * 80)}%`);
+  const skeletonWidth = useRef9(`${Math.max(40, Math.random() * 80)}%`);
   const usingDisabled = props.loading || props.disabled;
   return /* @__PURE__ */ jsxDEV52(DatePickerWrapper, {
     $variant: props.variant,
@@ -11901,7 +11902,7 @@ var DatePicker = forwardRef28((props, ref) => {
 });
 DatePicker.displayName = "DatePicker";
 // src/molecules/DateRangePicker/DateRangePicker.tsx
-import { forwardRef as forwardRef29, useRef as useRef9 } from "react";
+import { forwardRef as forwardRef29, useRef as useRef10 } from "react";
 import {
   DateRangePicker as Base,
   Icon as Icon10,
@@ -11927,7 +11928,7 @@ var DateRangePicker = forwardRef29((props, ref) => {
     helperText: props.helperProps?.text,
     helperIcon: props.helperProps?.icon
   });
-  const skeletonWidth = useRef9(`${Math.max(40, Math.random() * 80)}%`);
+  const skeletonWidth = useRef10(`${Math.max(40, Math.random() * 80)}%`);
   const usingDisabled = props.disabled || props.loading;
   return /* @__PURE__ */ jsxDEV53(DatePickerWrapper, {
     $variant: props.variant,
@@ -13163,7 +13164,7 @@ import { forwardRef as forwardRef33 } from "react";
 import { Typography as Typography18 } from "@equinor/eds-core-react";
 
 // src/molecules/InfoElement/CopyText.tsx
-import { useEffect as useEffect16, useRef as useRef10, useState as useState20 } from "react";
+import { useEffect as useEffect16, useRef as useRef11, useState as useState20 } from "react";
 import { Icon as Icon16, Typography as Typography17 } from "@equinor/eds-core-react";
 import { copy } from "@equinor/eds-icons";
 import styled24, { keyframes as keyframes3 } from "styled-components";
@@ -13212,7 +13213,7 @@ var CopyIcon = styled24.div`
   align-items: center;
 `;
 var CopyText = ({ children, textToCopy }) => {
-  const isMounted = useRef10(false);
+  const isMounted = useRef11(false);
   const [hovering, setHovering] = useState20(false);
   const [iconText, setIconText] = useState20("Copy");
   const handleCopy = () => {
@@ -13426,7 +13427,7 @@ var ProfileAvatar = forwardRef34(({ url, name, size = "medium", disabled = false
 });
 ProfileAvatar.displayName = "ProfileAvatar";
 // src/molecules/RichTextDisplay/RichTextDisplay.tsx
-import { useEffect as useEffect17, useRef as useRef11 } from "react";
+import { useEffect as useEffect17, useRef as useRef12 } from "react";
 import { useEditor } from "@tiptap/react";
 
 // src/molecules/RichTextEditor/RichTextEditor.styles.ts
@@ -13625,7 +13626,7 @@ var RichTextDisplay = ({
     content: imgReadToken ? value?.replaceAll(/(<img src=")(.+)("\/>)/g, `$1$2?${imgReadToken}$3`) : value,
     editable: false
   });
-  const previousValue = useRef11(value);
+  const previousValue = useRef12(value);
   useEffect17(() => {
     if (editor && value && value !== previousValue.current) {
       editor.commands.setContent(value);
@@ -13929,7 +13930,7 @@ var TextTable2 = {
 };
 
 // src/molecules/RichTextEditor/MenuBar/AddImageButton.tsx
-import { useRef as useRef12 } from "react";
+import { useRef as useRef13 } from "react";
 import { camera_add_photo } from "@equinor/eds-icons";
 import { jsxDEV as jsxDEV75, Fragment as Fragment7 } from "react/jsx-dev-runtime";
 var AddImageButton = ({
@@ -13937,7 +13938,7 @@ var AddImageButton = ({
   editor,
   features
 }) => {
-  const inputRef = useRef12(null);
+  const inputRef = useRef13(null);
   if (features && !features.includes("images" /* IMAGES */))
     return null;
   const showFileDialog = () => {
@@ -14243,12 +14244,12 @@ var TextHistory = ({ editor, features }) => {
 };
 
 // src/molecules/RichTextEditor/MenuBar/TextLinks.tsx
-import { useRef as useRef14, useState as useState21 } from "react";
+import { useRef as useRef15, useState as useState21 } from "react";
 import { Button as Button8, Icon as Icon20, Popover } from "@equinor/eds-core-react";
 import { link, link_off } from "@equinor/eds-icons";
 
 // src/molecules/TextField/TextField.tsx
-import { useRef as useRef13 } from "react";
+import { useRef as useRef14 } from "react";
 import {
   TextField as Base2
 } from "@equinor/eds-core-react";
@@ -14345,7 +14346,7 @@ var TextField = (props) => {
   const usingVariant = props.loading ? undefined : props.variant;
   const skeletonTop = getSkeletonTop(props);
   const skeletonHeight = getSkeletonHeight(props);
-  const skeletonWidth = useRef13(`${Math.max(20, Math.random() * 80)}%`);
+  const skeletonWidth = useRef14(`${Math.max(20, Math.random() * 80)}%`);
   return /* @__PURE__ */ jsxDEV84(Wrapper3, {
     $variant: usingVariant,
     $disabled: props.loading ? false : props.disabled,
@@ -14379,8 +14380,8 @@ var Container12 = styled31.div`
 `;
 var TextLinks = ({ editor, features }) => {
   const [open, setOpen] = useState21(false);
-  const buttonRef = useRef14(null);
-  const linkText = useRef14("");
+  const buttonRef = useRef15(null);
+  const linkText = useRef15("");
   const [failedToSave, setFailedToSave] = useState21(false);
   const handleOnToggleOpen = () => {
     setOpen((prev) => !prev);
@@ -14601,7 +14602,7 @@ var EditorText = {
 };
 
 // src/molecules/RichTextEditor/EditorProvider.tsx
-import { useEffect as useEffect18, useRef as useRef15 } from "react";
+import { useEffect as useEffect18, useRef as useRef16 } from "react";
 import { useQueryClient as useQueryClient2 } from "@tanstack/react-query";
 import { useEditor as useEditor2 } from "@tiptap/react";
 var EditorProvider = ({
@@ -14623,9 +14624,9 @@ var EditorProvider = ({
     onImageRead
   });
   const queryClient = useQueryClient2();
-  const addedImages = useRef15([]);
-  const deletedImages = useRef15([]);
-  const previousRemovedImages = useRef15([]);
+  const addedImages = useRef16([]);
+  const deletedImages = useRef16([]);
+  const previousRemovedImages = useRef16([]);
   const handleImageCheck = (editor2) => {
     const currentImages = [];
     editor2.getJSON().content?.forEach((item) => {
@@ -14797,7 +14798,7 @@ var RichText = {
   Bar: AmplifyBar
 };
 // src/molecules/Tabs/Tabs.tsx
-import { useEffect as useEffect19, useRef as useRef16, useState as useState22 } from "react";
+import { useEffect as useEffect19, useRef as useRef17, useState as useState22 } from "react";
 import { Button as Button10, Icon as Icon23 } from "@equinor/eds-core-react";
 import { chevron_left, chevron_right } from "@equinor/eds-icons";
 
@@ -15004,7 +15005,7 @@ function Tabs({
   ref,
   ...rest
 }) {
-  const tabContainer = useRef16(null);
+  const tabContainer = useRef17(null);
   const [showScrollButtons, setShowScrollButtons] = useState22(false);
   const [containerWidth, setContainerWidth] = useState22(0);
   const [scrollLeftDisabled, setScrollLeftDisabled] = useState22(true);
@@ -15131,10 +15132,16 @@ var Search = forwardRef36((props, ref) => /* @__PURE__ */ jsxDEV91(StyledBase, {
 }, undefined, false, undefined, this));
 Search.displayName = "HeaderDrawer";
 // src/molecules/Sieve/Sieve.tsx
-import { useCallback as useCallback6, useRef as useRef19, useState as useState25 } from "react";
+import {
+  useCallback as useCallback6,
+  useEffect as useEffect21,
+  useRef as useRef20,
+  useState as useState25
+} from "react";
+import { useSearchParams as useSearchParams2 } from "react-router-dom";
 
 // src/molecules/Sieve/Filter.tsx
-import { useRef as useRef17, useState as useState23 } from "react";
+import { useRef as useRef18, useState as useState23 } from "react";
 import { Icon as Icon24, Menu as Menu2 } from "@equinor/eds-core-react";
 import {
   arrow_drop_right,
@@ -15222,10 +15229,10 @@ var Filter = ({
   filterValues,
   setFilterValues
 }) => {
-  const anchorRef = useRef17(null);
+  const anchorRef = useRef18(null);
   const [subMenuAnchor, setSubMenuAnchor] = useState23(null);
-  const menuRef = useRef17(null);
-  const subMenuRef = useRef17(null);
+  const menuRef = useRef18(null);
+  const subMenuRef = useRef18(null);
   const [subMenuIndex, setSubMenuIndex] = useState23(-1);
   const [open, setOpen] = useState23(false);
   useOutsideClick(anchorRef.current, (event) => {
@@ -15328,7 +15335,7 @@ var Filter = ({
 var Filter_default = Filter;
 
 // src/molecules/Sieve/Sort.tsx
-import { useRef as useRef18, useState as useState24 } from "react";
+import { useRef as useRef19, useState as useState24 } from "react";
 import { Icon as Icon25, Menu as Menu3 } from "@equinor/eds-core-react";
 import {
   radio_button_selected,
@@ -15341,7 +15348,7 @@ var Sort = ({
   selectedOption,
   setSelectedOption
 }) => {
-  const anchorRef = useRef18(null);
+  const anchorRef = useRef19(null);
   const [open, setOpen] = useState24(false);
   const handleChipClick = () => {
     setOpen(!open);
@@ -15401,11 +15408,74 @@ var Sieve = ({
   onUpdate,
   showChips = true,
   minSearchWidth = "24rem",
+  syncWithSearchParams = false,
+  isLoadingOptions = false,
   debounceSearchValue = false,
   onIsTyping
 }) => {
   const [localSearchString, setLocalSearchString] = useState25(sieveValue.searchValue ?? "");
-  const previousOnIsTyping = useRef19(false);
+  const previousOnIsTyping = useRef20(false);
+  const [searchParams, setSearchParams] = useSearchParams2();
+  const initializedSearchParams = useRef20(false);
+  useEffect21(() => {
+    if (!initializedSearchParams.current && syncWithSearchParams && !isLoadingOptions) {
+      const search = searchParams.get("search") ?? undefined;
+      const parents = filterOptions?.map((filterOption) => filterOption.label) ?? [];
+      const filterValues = {};
+      for (const parent of parents) {
+        const parentOptions = filterOptions?.find((filterOption) => filterOption.label === parent)?.options;
+        const labels = JSON.parse(searchParams.get(parent.toLowerCase()) ?? "[]");
+        if (parentOptions !== undefined) {
+          filterValues[parent] = parentOptions.filter((option) => labels.includes(option.label));
+        }
+      }
+      onUpdate({
+        searchValue: search,
+        filterValues,
+        sortValue: sieveValue.sortValue
+      });
+      initializedSearchParams.current = true;
+    }
+  }, [
+    filterOptions,
+    initializedSearchParams,
+    isLoadingOptions,
+    onUpdate,
+    searchParams,
+    sieveValue.sortValue,
+    syncWithSearchParams
+  ]);
+  const previousSieveValue = useRef20("{}");
+  useEffect21(() => {
+    if (syncWithSearchParams && initializedSearchParams.current && !isLoadingOptions && JSON.stringify(sieveValue) !== previousSieveValue.current) {
+      if (sieveValue.searchValue === undefined) {
+        searchParams.delete("search");
+      } else {
+        searchParams.set("search", sieveValue.searchValue);
+      }
+      const parents = filterOptions?.map((filterOption) => filterOption.label) ?? [];
+      const filterValues = sieveValue.filterValues;
+      for (const parent of parents) {
+        if (filterValues?.[parent] && filterValues[parent].length > 0) {
+          searchParams.set(parent.toLowerCase(), JSON.stringify(filterValues[parent].map((option) => option.label)));
+        } else {
+          searchParams.delete(parent.toLowerCase());
+        }
+      }
+      previousSieveValue.current = JSON.stringify(sieveValue);
+      setSearchParams(searchParams);
+      onUpdate(sieveValue);
+    }
+  }, [
+    filterOptions,
+    initializedSearchParams,
+    isLoadingOptions,
+    onUpdate,
+    searchParams,
+    setSearchParams,
+    sieveValue,
+    syncWithSearchParams
+  ]);
   const handleUpdateSieveValue = useCallback6((key, value) => {
     const newSieveValue = {
       ...sieveValue,
@@ -15931,7 +16001,7 @@ var Stepper = ({
   }, undefined, true, undefined, this);
 };
 // src/molecules/OptionDrawer/OptionDrawer.tsx
-import { useEffect as useEffect21, useState as useState27 } from "react";
+import { useEffect as useEffect22, useState as useState27 } from "react";
 import { Button as Button12, Checkbox, Icon as Icon28 } from "@equinor/eds-core-react";
 import { chevron_down as chevron_down2, chevron_right as chevron_right2 } from "@equinor/eds-icons";
 
@@ -16017,10 +16087,10 @@ var OptionDrawer = ({
 }) => {
   const [open, setOpen] = useState27(false);
   const [status, setStatus] = useState27(getStatus(item, selectedItems, singleSelect, showIntermediateParent));
-  useEffect21(() => {
+  useEffect22(() => {
     setStatus(getStatus(item, selectedItems, singleSelect, showIntermediateParent));
   }, [item, selectedItems, singleSelect, showIntermediateParent]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (openAll) {
       setOpen(true);
     } else {
@@ -16091,7 +16161,7 @@ var OptionDrawer = ({
 };
 OptionDrawer.displayName = "OptionDrawer";
 // src/molecules/Select/Select.tsx
-import { useMemo as useMemo19, useRef as useRef21 } from "react";
+import { useMemo as useMemo19, useRef as useRef22 } from "react";
 import { Icon as Icon31, Label } from "@equinor/eds-core-react";
 import { arrow_drop_down, arrow_drop_up, clear as clear2 } from "@equinor/eds-icons";
 
@@ -16348,7 +16418,7 @@ var SmallButton = styled45(Button13)`
 `;
 
 // src/molecules/Select/SelectMenuItem.tsx
-import { useMemo as useMemo16, useRef as useRef20, useState as useState28 } from "react";
+import { useMemo as useMemo16, useRef as useRef21, useState as useState28 } from "react";
 import { Icon as Icon29 } from "@equinor/eds-core-react";
 import {
   checkbox as checkbox3,
@@ -16402,8 +16472,8 @@ var SelectMenuItem = (props) => {
     CustomMenuItemComponent
   } = props;
   const [openParent, setOpenParent] = useState28(false);
-  const focusingChildIndex = useRef20(-1);
-  const childRefs = useRef20([]);
+  const focusingChildIndex = useRef21(-1);
+  const childRefs = useRef21([]);
   const selectedValues = "values" in props ? props.values.map(({ value }) => value) : [];
   const isSelected = selectedValues.includes(item.value);
   const parentIcon = useMemo16(() => {
@@ -16797,9 +16867,9 @@ var Select = (props) => {
     sortValues,
     placeholder
   });
-  const skeletonWidth = useRef21(`${Math.max(40, Math.random() * 80)}%`);
-  const anchorRef = useRef21(null);
-  const menuRef = useRef21(null);
+  const skeletonWidth = useRef22(`${Math.max(40, Math.random() * 80)}%`);
+  const anchorRef = useRef22(null);
+  const menuRef = useRef22(null);
   const shouldShowLabel = useMemo19(() => {
     return !!label || !!meta;
   }, [label, meta]);
@@ -17460,7 +17530,7 @@ var Switch = forwardRef40((props, ref) => {
 });
 Switch.displayName = "Switch";
 // src/molecules/Waves/Waves.tsx
-import { useEffect as useEffect22, useRef as useRef22, useState as useState29 } from "react";
+import { useEffect as useEffect23, useRef as useRef23, useState as useState29 } from "react";
 
 // src/molecules/Waves/Waves.styles.ts
 import { motion as motion5 } from "framer-motion";
@@ -17688,7 +17758,7 @@ var WaveStatic = ({
 import { useScroll as useScroll2 } from "framer-motion";
 import { jsxDEV as jsxDEV124 } from "react/jsx-dev-runtime";
 var Waves = ({ gradientColors }) => {
-  const containerRef = useRef22(null);
+  const containerRef = useRef23(null);
   const [width, setWidth] = useState29(containerRef.current?.clientWidth ?? 0);
   const [height, setHeight] = useState29(containerRef.current?.clientHeight ?? 0);
   const { scrollY } = useScroll2({
@@ -17701,7 +17771,7 @@ var Waves = ({ gradientColors }) => {
     setWidth(containerRef.current.clientWidth);
     setHeight(containerRef.current.clientHeight);
   };
-  useEffect22(() => {
+  useEffect23(() => {
     const resizeHandler = () => {
       if (!containerRef.current)
         return;
@@ -17795,7 +17865,7 @@ var DataGrid = (props) => {
   }, undefined, false, undefined, this);
 };
 // src/organisms/FieldSelector/FieldSelector.tsx
-import { useRef as useRef23, useState as useState31 } from "react";
+import { useRef as useRef24, useState as useState31 } from "react";
 
 // src/atoms/style/darkTokens.ts
 import { css as css16 } from "styled-components";
@@ -18621,7 +18691,7 @@ var FieldSelector = ({
   itemNameSingular = "field"
 }) => {
   const [isChangingField, setIsChangingField] = useState31(false);
-  const fieldName = useRef23("");
+  const fieldName = useRef24("");
   const handleClick = (field) => {
     if (field.name && field.uuid) {
       setField({
@@ -18656,7 +18726,7 @@ var FieldSelector = ({
   }, undefined, true, undefined, this);
 };
 // src/organisms/Filter/Filter.tsx
-import { useRef as useRef25, useState as useState33 } from "react";
+import { useRef as useRef26, useState as useState33 } from "react";
 import { Button as Button15, Icon as Icon35, Typography as Typography32 } from "@equinor/eds-core-react";
 import {
   arrow_drop_down as arrow_drop_down2,
@@ -18791,7 +18861,7 @@ var SearchFieldWrapper = styled55.section`
 `;
 
 // src/organisms/Filter/AutoCompleteMenu.tsx
-import { useEffect as useEffect23, useRef as useRef24, useState as useState32 } from "react";
+import { useEffect as useEffect24, useRef as useRef25, useState as useState32 } from "react";
 import { Menu as Menu8, Typography as Typography30 } from "@equinor/eds-core-react";
 
 // src/organisms/Filter/Filter.utils.ts
@@ -18857,8 +18927,8 @@ function AutoCompleteMenu({
   onAutoComplete
 }) {
   const [open, setOpen] = useState32(false);
-  const previousSearch = useRef24("");
-  useEffect23(() => {
+  const previousSearch = useRef25("");
+  useEffect24(() => {
     if (!open && search !== previousSearch.current) {
       previousSearch.current = search;
       setOpen(true);
@@ -18973,11 +19043,11 @@ function Filter2({
   id,
   ...rest
 }) {
-  const searchRef = useRef25(null);
-  const sectionRef = useRef25(null);
+  const searchRef = useRef26(null);
+  const sectionRef = useRef26(null);
   const [open, setOpen] = useState33(initialOpen);
   const [attemptingToRemove, setAttemptingToRemove] = useState33(undefined);
-  const initialHeight = useRef25(initialOpen ? "auto" : 0);
+  const initialHeight = useRef26(initialOpen ? "auto" : 0);
   const handleOnToggleOpen = () => {
     setOpen((prev) => !prev);
     if (initialHeight.current === "auto") {
@@ -19139,7 +19209,7 @@ import { Icon as Icon36, Menu as Menu10, Typography as Typography33 } from "@equ
 import { arrow_drop_down as arrow_drop_down3, arrow_drop_up as arrow_drop_up3 } from "@equinor/eds-icons";
 
 // src/organisms/Filter/ButtonWithMenu.tsx
-import { useRef as useRef26, useState as useState34 } from "react";
+import { useRef as useRef27, useState as useState34 } from "react";
 import { Menu as Menu9 } from "@equinor/eds-core-react";
 import { jsxDEV as jsxDEV133, Fragment as Fragment17 } from "react/jsx-dev-runtime";
 var ButtonWithMenu = ({
@@ -19148,7 +19218,7 @@ var ButtonWithMenu = ({
   children
 }) => {
   const [open, setOpen] = useState34(false);
-  const buttonRef = useRef26(null);
+  const buttonRef = useRef27(null);
   const handleOnToggleOpen = () => {
     setOpen(!open);
     onOpenChange?.(!open);
@@ -19259,18 +19329,18 @@ Filter3.QuickFilter = QuickFilter;
 Filter3.SortMenu = SortMenu;
 // src/organisms/SideBar/MenuItem/BasicMenuItem.tsx
 import { useCallback as useCallback7, useMemo as useMemo21 } from "react";
+import { useLocation as useLocation3 } from "react-router-dom";
 import { Icon as Icon38 } from "@equinor/eds-core-react";
 import { Feature } from "@equinor/subsurface-app-management";
-import { useLocation as useLocation3 } from "@tanstack/react-router";
 
 // src/organisms/SideBar/MenuItem/MenuItem.styles.ts
+import { Link as ReactRouterDomLink } from "react-router-dom";
 import { Typography as Typography35 } from "@equinor/eds-core-react";
-import { Link as TanstackLink } from "@tanstack/react-router";
 import styled59 from "styled-components";
 var MenuItemWrapper2 = styled59.span`
   width: 100%;
 `;
-var Link2 = styled59(TanstackLink)`
+var Link2 = styled59(ReactRouterDomLink)`
   display: flex;
   align-self: stretch;
   align-items: center;
@@ -19416,10 +19486,10 @@ var BasicMenuItem = ({
 };
 
 // src/organisms/SideBar/MenuItem/CollapsableMenuItem.tsx
-import { useEffect as useEffect24, useMemo as useMemo22, useRef as useRef27, useState as useState36 } from "react";
+import { useEffect as useEffect25, useMemo as useMemo22, useRef as useRef28, useState as useState36 } from "react";
+import { Link as ReactRouterLink, useLocation as useLocation4 } from "react-router-dom";
 import { Icon as Icon39, Menu as Menu12 } from "@equinor/eds-core-react";
 import { chevron_down as chevron_down4, chevron_up as chevron_up2 } from "@equinor/eds-icons";
-import { Link as TanstackLink2, useLocation as useLocation4 } from "@tanstack/react-router";
 import styled60, { css as css20 } from "styled-components";
 import { jsxDEV as jsxDEV137, Fragment as Fragment18 } from "react/jsx-dev-runtime";
 var Parent = styled60.button`
@@ -19494,10 +19564,10 @@ var CollapsableMenuItem = ({
   const { isOpen } = useSideBar();
   const previousIsOpen = usePrevious(isOpen);
   const isActive = items.some((item) => isCurrentUrl({ currentUrl: pathname, link: item.link }));
-  const parentRef = useRef27(null);
+  const parentRef = useRef28(null);
   const [expanded, setExpanded] = useState36(false);
   const handleOnToggleExpanded = () => setExpanded((prev) => !prev);
-  useEffect24(() => {
+  useEffect25(() => {
     if (previousIsOpen && !isOpen && expanded || previousPathname !== pathname && expanded && !isOpen) {
       setExpanded(false);
     }
@@ -19573,7 +19643,7 @@ var CollapsableMenuItem = ({
           placement: "right-start",
           onClose: handleOnToggleExpanded,
           children: items.map((item) => /* @__PURE__ */ jsxDEV137(Menu12.Item, {
-            as: TanstackLink2,
+            as: ReactRouterLink,
             active: isCurrentUrl({ currentUrl: pathname, link: item.link }),
             style: { width: "256px" },
             to: item.link,
@@ -19835,16 +19905,16 @@ SideBar2.Item = MenuItem4;
 // src/organisms/TopBar/Account/Account.tsx
 import {
   useCallback as useCallback8,
-  useEffect as useEffect28,
+  useEffect as useEffect29,
   useMemo as useMemo25,
-  useRef as useRef30,
+  useRef as useRef31,
   useState as useState40
 } from "react";
 import { Icon as Icon48, Typography as Typography47 } from "@equinor/eds-core-react";
 import { log_out } from "@equinor/eds-icons";
 
 // src/organisms/TopBar/TopBarMenu.tsx
-import { forwardRef as forwardRef42, useEffect as useEffect25 } from "react";
+import { forwardRef as forwardRef42, useEffect as useEffect26 } from "react";
 import { Menu as Menu13 } from "@equinor/eds-core-react";
 import styled64 from "styled-components";
 import { jsxDEV as jsxDEV142 } from "react/jsx-dev-runtime";
@@ -19860,7 +19930,7 @@ var MenuWrapper = styled64(Menu13)`
   `}
 `;
 var TopBarMenu = forwardRef42(({ open, onClose, children, anchorEl, isNotification, withGap = false }, ref) => {
-  useEffect25(() => {
+  useEffect26(() => {
     const handleResize = () => {
       if (open) {
         onClose();
@@ -20000,11 +20070,11 @@ function useStopImpersonation() {
 }
 
 // src/organisms/TopBar/Account/ImpersonateMenu/ImpersonateMenu.tsx
-import { useEffect as useEffect27, useState as useState39 } from "react";
+import { useEffect as useEffect28, useState as useState39 } from "react";
 import { Menu as Menu15, Typography as Typography43 } from "@equinor/eds-core-react";
 
 // src/organisms/TopBar/Account/ImpersonateMenu/CreateOrEditUser/CreateOrEditUser.tsx
-import { useEffect as useEffect26, useMemo as useMemo24, useRef as useRef28, useState as useState37 } from "react";
+import { useEffect as useEffect27, useMemo as useMemo24, useRef as useRef29, useState as useState37 } from "react";
 import { Button as Button17, DotProgress as DotProgress3, Icon as Icon42, Typography as Typography37 } from "@equinor/eds-core-react";
 import { arrow_back } from "@equinor/eds-icons";
 
@@ -20092,7 +20162,7 @@ var CreateOrEditUser = ({
   availableFields,
   availableWells
 }) => {
-  const initializedEditUser = useRef28(false);
+  const initializedEditUser = useRef29(false);
   const [roles, setRoles] = useState37([]);
   const [firstName, setFirstName] = useState37("");
   const [lastName, setLastName] = useState37("");
@@ -20100,7 +20170,7 @@ var CreateOrEditUser = ({
   const [field, setField] = useState37(undefined);
   const [well, setWell] = useState37(undefined);
   const { data, isLoading: isLoadingRoles } = useAllAppRoles();
-  useEffect26(() => {
+  useEffect27(() => {
     if (editingUser && data && !initializedEditUser.current) {
       initializedEditUser.current = true;
       setRoles(editingUser.roles.map((role) => {
@@ -20665,7 +20735,7 @@ var NoUsersText = styled72(Typography41)`
 `;
 
 // src/organisms/TopBar/Account/ImpersonateMenu/UserImpersonation.tsx
-import { useRef as useRef29, useState as useState38 } from "react";
+import { useRef as useRef30, useState as useState38 } from "react";
 import { Button as Button19, Icon as Icon45, Menu as Menu14, Typography as Typography42 } from "@equinor/eds-core-react";
 import {
   account_circle,
@@ -20771,7 +20841,7 @@ var UserImpersonation = ({
   onDelete
 }) => {
   const [open, setOpen] = useState38(false);
-  const buttonRef = useRef29(null);
+  const buttonRef = useRef30(null);
   const fullName = impersonateUserDtoToFullName({ firstName, lastName });
   const activeRoles = useMappedRoles(roles);
   const handleOnToggleMenu = () => setOpen((prev) => !prev);
@@ -20885,7 +20955,7 @@ var ImpersonateMenu = ({
   const { data: availableUsers } = useGetAllImpersonationUsersForApp();
   const { data: activeImpersonationUser } = useActiveImpersonationUser();
   const filteredUsers = availableUsers?.filter((user) => impersonateUserDtoToFullName(user).toLowerCase().includes(search.toLowerCase()));
-  useEffect27(() => {
+  useEffect28(() => {
     if (!open && activeImpersonationUser && selectedUniqueName !== activeImpersonationUser.uniqueName) {
       setSelectedUniqueName(activeImpersonationUser.uniqueName);
     } else if (!open && !activeImpersonationUser && selectedUniqueName !== "") {
@@ -21260,7 +21330,7 @@ var Account = ({
   const { account, roles, logout } = useAuth();
   const [isOpen, setIsOpen] = useState40(false);
   const [openImpersonate, setOpenImpersonate] = useState40(false);
-  const buttonRef = useRef30(null);
+  const buttonRef = useRef31(null);
   const { data: canImpersonate = true } = useCanImpersonate();
   const { data: activeImpersonationUser } = useActiveImpersonationUser();
   const { mutate: endImpersonation } = useStopImpersonation();
@@ -21277,7 +21347,7 @@ var Account = ({
     setIsOpen(false);
   };
   const handleOnCloseImpersonate = () => setOpenImpersonate(false);
-  useEffect28(() => {
+  useEffect29(() => {
     if (activeImpersonationUser && activeImpersonationUser.appName != null && activeImpersonationUser.appName.toUpperCase() != APPLICATION_NAME.toUpperCase()) {
       endImpersonation();
     }
@@ -21358,7 +21428,7 @@ var Account = ({
 Account.displayName = "TopBar.Account";
 
 // src/organisms/TopBar/ApplicationDrawer/ApplicationDrawer.tsx
-import { useRef as useRef31, useState as useState41 } from "react";
+import { useRef as useRef32, useState as useState41 } from "react";
 import { DotProgress as DotProgress7, Icon as Icon50, Typography as Typography50 } from "@equinor/eds-core-react";
 import { apps as apps2, exit_to_app as exit_to_app2 } from "@equinor/eds-icons";
 import {
@@ -21367,13 +21437,13 @@ import {
 import { useQuery as useQuery7 } from "@tanstack/react-query";
 
 // src/organisms/TopBar/TopBar.styles.ts
+import { Link as Link3 } from "react-router-dom";
 import { Button as Button20 } from "@equinor/eds-core-react";
 import {
   CircularProgress as EDSCircularProgress2,
   TopBar as EDSTopBar,
   Typography as Typography48
 } from "@equinor/eds-core-react";
-import { Link as Link3 } from "@tanstack/react-router";
 import styled80, { css as css22 } from "styled-components";
 var Bar = styled80(EDSTopBar)`
   border-bottom: 1px solid ${colors2.ui.background__medium.rgba};
@@ -21671,7 +21741,7 @@ var ApplicationDrawer = () => {
     queryKey: [`userApplications`],
     queryFn: () => AmplifyApplicationService2.userApplications()
   });
-  const buttonRef = useRef31(null);
+  const buttonRef = useRef32(null);
   const toggleMenu = () => setIsOpen(!isOpen);
   const closeMenu = () => {
     setIsOpen(false);
@@ -21822,7 +21892,7 @@ var ApplicationDrawer = () => {
 };
 
 // src/organisms/TopBar/FieldMenu/FieldMenu.tsx
-import { forwardRef as forwardRef44, useMemo as useMemo26, useRef as useRef32, useState as useState42 } from "react";
+import { forwardRef as forwardRef44, useMemo as useMemo26, useRef as useRef33, useState as useState42 } from "react";
 import { Icon as Icon51, Search as Search3, Typography as Typography52 } from "@equinor/eds-core-react";
 import {
   arrow_drop_down as arrow_drop_down4,
@@ -21933,8 +22003,8 @@ var FieldMenu = forwardRef44(({
   showAccessITLink = true
 }, ref) => {
   const [isOpen, setIsOpen] = useState42(false);
-  const menuRef = useRef32(null);
-  const buttonRef = useRef32(null);
+  const menuRef = useRef33(null);
+  const buttonRef = useRef33(null);
   const [searchValue, setSearchValue] = useState42("");
   const closeMenu = () => setIsOpen(false);
   const toggleMenu = () => setIsOpen(!isOpen);
@@ -22087,7 +22157,7 @@ var FieldMenu = forwardRef44(({
 FieldMenu.displayName = "FieldSelector";
 
 // src/organisms/TopBar/Notifications/NotificationsInner.tsx
-import { useMemo as useMemo28, useRef as useRef34, useState as useState44 } from "react";
+import { useMemo as useMemo28, useRef as useRef35, useState as useState44 } from "react";
 import { Icon as Icon54 } from "@equinor/eds-core-react";
 import { notifications as notificationIcon } from "@equinor/eds-icons";
 
@@ -22711,7 +22781,7 @@ var NotificationTemplate = (props) => {
 };
 
 // src/organisms/TopBar/Notifications/FilterOptions.tsx
-import { useRef as useRef33, useState as useState43 } from "react";
+import { useRef as useRef34, useState as useState43 } from "react";
 import { Icon as Icon53, Menu as Menu16, Typography as Typography63 } from "@equinor/eds-core-react";
 import {
   checkbox as checkbox4,
@@ -22770,8 +22840,8 @@ var FilterOptions = ({
 }) => {
   const [openFilter, setOpenFilter] = useState43(false);
   const [openSort, setOpenSort] = useState43(false);
-  const filterRef = useRef33(null);
-  const sortRef = useRef33(null);
+  const filterRef = useRef34(null);
+  const sortRef = useRef34(null);
   const [selectedSort, setSelectedSort] = useState43({
     ["unread" /* UNREAD */]: false,
     ["oldtonew" /* OLD_NEWEST */]: false,
@@ -22975,9 +23045,9 @@ var NotificationsInner = ({
   showFilterOptions = false,
   notifications
 }) => {
-  const buttonRef = useRef34(null);
-  const filterMenuRef = useRef34(null);
-  const sortMenuRef = useRef34(null);
+  const buttonRef = useRef35(null);
+  const filterMenuRef = useRef35(null);
+  const sortMenuRef = useRef35(null);
   const { isOpen, setIsOpen } = useNotification();
   const [filteringOn, setFilteringOn] = useState44([]);
   const [sortingOn, setSortingOn] = useState44([]);
@@ -23083,7 +23153,7 @@ var Notifications = (props) => {
 // src/organisms/TopBar/Resources/Resources.tsx
 import {
   useMemo as useMemo36,
-  useRef as useRef37,
+  useRef as useRef38,
   useState as useState51
 } from "react";
 import { Button as Button27, Dialog as Dialog5, Divider as Divider5, Icon as Icon62 } from "@equinor/eds-core-react";
@@ -23099,7 +23169,7 @@ import {
 import {
   createContext as createContext10,
   useCallback as useCallback9,
-  useEffect as useEffect29,
+  useEffect as useEffect30,
   useMemo as useMemo29,
   useState as useState45
 } from "react";
@@ -23516,7 +23586,7 @@ var FeedbackContextProvider = ({
     setSlackRequestResponse({ status: "idle" /* idle */ });
     setSlackAttachmentRequestResponse([]);
   }, [setFeedbackLocalStorage]);
-  useEffect29(() => {
+  useEffect30(() => {
     return () => {
       if (serviceNowRequestResponse.status === "success" /* success */ && allSlackRequestStatus === "success" /* success */) {
         setTimeout(() => {
@@ -23529,19 +23599,19 @@ var FeedbackContextProvider = ({
     serviceNowRequestResponse.status,
     setFeedbackLocalStorage
   ]);
-  useEffect29(() => {
+  useEffect30(() => {
     if (slackAttachmentsRequestResponse.length !== feedbackAttachments.length) {
       setSlackAttachmentRequestResponse(feedbackAttachments.map((attachment) => {
         return { status: "idle" /* idle */, fileName: attachment.name };
       }));
     }
   }, [feedbackAttachments, slackAttachmentsRequestResponse.length]);
-  useEffect29(() => {
+  useEffect30(() => {
     if (serviceNowRequestResponse.serviceNowId && serviceNowRequestResponse.serviceNowId.length !== 0) {
       setServiceNowUrl(createServiceNowUrl(serviceNowRequestResponse.serviceNowId, true));
     }
   }, [serviceNowRequestResponse.serviceNowId]);
-  useEffect29(() => {
+  useEffect30(() => {
     if (selectedType === "suggestion" /* SUGGESTION */ && allSlackRequestStatus === "success" /* success */) {
       setRelevantRequestsHaveBeenSuccess(true);
     } else if (serviceNowRequestResponse.status === "success" /* success */ && allSlackRequestStatus === "success" /* success */) {
@@ -23597,7 +23667,7 @@ function useFeedbackContext() {
 import { useState as useState47 } from "react";
 
 // src/organisms/TopBar/Resources/Feedback/FeedbackForm/UploadFile/ImageFile.tsx
-import { useEffect as useEffect30, useMemo as useMemo30, useState as useState46 } from "react";
+import { useEffect as useEffect31, useMemo as useMemo30, useState as useState46 } from "react";
 import { Icon as Icon55 } from "@equinor/eds-core-react";
 import { clear as clear4, error_outlined as error_outlined5 } from "@equinor/eds-icons";
 
@@ -23737,7 +23807,7 @@ ${message}`;
     }
     return "Error";
   }, [error, props]);
-  useEffect30(() => {
+  useEffect31(() => {
     const getSrc = async (file) => {
       const src2 = await readUploadedFileAsText2(file);
       setSrc(src2);
@@ -24208,11 +24278,11 @@ var FeedbackForm = () => {
 };
 
 // src/organisms/TopBar/Resources/Feedback/ResponsePage/ResponsePage.tsx
-import { useEffect as useEffect32, useState as useState49 } from "react";
+import { useEffect as useEffect33, useState as useState49 } from "react";
 import { Button as Button25 } from "@equinor/eds-core-react";
 
 // src/organisms/TopBar/Resources/Feedback/ResponsePage/AnimateChangeInHeight.tsx
-import { useEffect as useEffect31, useRef as useRef35, useState as useState48 } from "react";
+import { useEffect as useEffect32, useRef as useRef36, useState as useState48 } from "react";
 import { motion as motion8 } from "framer-motion";
 import styled105 from "styled-components";
 import { jsxDEV as jsxDEV182 } from "react/jsx-dev-runtime";
@@ -24226,9 +24296,9 @@ var AnimationWrapper = styled105(motion8.div)`
 var AnimateChangeInHeight = ({
   children
 }) => {
-  const containerRef = useRef35(null);
+  const containerRef = useRef36(null);
   const [height, setHeight] = useState48("auto");
-  useEffect31(() => {
+  useEffect32(() => {
     if (containerRef.current) {
       const resizeObserver = new ResizeObserver((entries) => {
         const observedHeight = entries[0].contentRect.height;
@@ -24448,7 +24518,7 @@ var ResponsePage = () => {
     requestHasError,
     relevantRequestsHaveBeenSuccess
   } = useFeedbackContext();
-  useEffect32(() => {
+  useEffect33(() => {
     if (!showSuccessPage && relevantRequestsHaveBeenSuccess) {
       setTimeout(() => {
         setShowSuccessPage(true);
@@ -24652,7 +24722,7 @@ var AllReleaseNotesWrapper = styled113.div`
 `;
 
 // src/organisms/ReleaseNote/ReleaseNote.tsx
-import { forwardRef as forwardRef46, useRef as useRef36, useState as useState50 } from "react";
+import { forwardRef as forwardRef46, useRef as useRef37, useState as useState50 } from "react";
 import { Typography as Typography73 } from "@equinor/eds-core-react";
 import {
   ReleaseNotesService
@@ -24793,10 +24863,10 @@ var ReleaseNote3 = forwardRef46(({
   expanded = false
 }, ref) => {
   const usingDate = usingReleaseNoteDate({ releaseDate, createdDate });
-  const initialHeight = useRef36(expanded ? "auto" : RELEASE_NOTE_RICH_TEXT_COLLAPSED_HEIGHT);
+  const initialHeight = useRef37(expanded ? "auto" : RELEASE_NOTE_RICH_TEXT_COLLAPSED_HEIGHT);
   const [isExpanded, setIsExpanded] = useState50(expanded);
   const [needsShowMore, setNeedsShowMore] = useState50(getImagesFromRichText(body).length > 0);
-  const resizeObserver = useRef36(new ResizeObserver((entries) => {
+  const resizeObserver = useRef37(new ResizeObserver((entries) => {
     if (entries.at(0) && entries[0].target.scrollHeight > RELEASE_NOTE_RICH_TEXT_COLLAPSED_HEIGHT) {
       setNeedsShowMore(true);
     }
@@ -24943,7 +25013,7 @@ var Resources = ({
   const [showFeedbackDialog, setShowFeedbackDialog] = useState51(false);
   const [openPortal, setOpenPortal] = useState51(false);
   const [showingResourceSection, setShowingResourceSection] = useState51(undefined);
-  const buttonRef = useRef37(null);
+  const buttonRef = useRef38(null);
   const [feedbackType, setFeedbackType] = useState51(undefined);
   const closeMenu = () => {
     setShowingResourceSection(undefined);
@@ -25081,7 +25151,7 @@ var Resources = ({
 };
 
 // src/organisms/TopBar/Tutorials/Tutorials.tsx
-import { useRef as useRef38, useState as useState52 } from "react";
+import { useRef as useRef39, useState as useState52 } from "react";
 import { Divider as Divider6, Icon as Icon64, Typography as Typography75 } from "@equinor/eds-core-react";
 import { youtube_alt } from "@equinor/eds-icons";
 import {
@@ -25189,7 +25259,7 @@ var Tutorials = ({
 }) => {
   const { allTutorials, tutorialsOnThisPage } = useTutorials5();
   const [open, setOpen] = useState52(false);
-  const buttonRef = useRef38(null);
+  const buttonRef = useRef39(null);
   const filteredAllTutorials = filterTutorials ? allTutorials.filter(filterTutorials) : allTutorials;
   const filteredTutorialsOnThisPage = filterTutorials ? tutorialsOnThisPage.filter(filterTutorials) : tutorialsOnThisPage;
   const tutorialsOnOtherPages = filteredAllTutorials.filter((tutorial) => filteredTutorialsOnThisPage.findIndex((t) => t.id === tutorial.id) === -1);
@@ -25281,7 +25351,7 @@ var Colorbox = styled121.div`
 `;
 
 // src/organisms/TopBar/Guidelines/Guidelines.tsx
-import { isValidElement as isValidElement2, useRef as useRef39, useState as useState53 } from "react";
+import { isValidElement as isValidElement2, useRef as useRef40, useState as useState53 } from "react";
 import { Icon as Icon65 } from "@equinor/eds-core-react";
 import { info_circle as info_circle9 } from "@equinor/eds-icons";
 
@@ -25345,7 +25415,7 @@ var Section5 = ({ title, children }) => /* @__PURE__ */ jsxDEV201(Container63, {
 import { jsxDEV as jsxDEV202, Fragment as Fragment31 } from "react/jsx-dev-runtime";
 var Guidelines = ({ sections }) => {
   const [isOpen, setIsOpen] = useState53(false);
-  const buttonRef = useRef39(null);
+  const buttonRef = useRef40(null);
   const handleButtonClick = () => {
     if (isOpen) {
       setIsOpen(false);
@@ -25410,7 +25480,7 @@ var Guidelines2 = Guidelines;
 Guidelines2.Colorbox = Colorbox;
 
 // src/organisms/TopBar/Settings.tsx
-import { useContext as useContext11, useMemo as useMemo37, useRef as useRef40, useState as useState54 } from "react";
+import { useContext as useContext11, useMemo as useMemo37, useRef as useRef41, useState as useState54 } from "react";
 import { Icon as Icon66, Radio as Radio2, Typography as Typography78 } from "@equinor/eds-core-react";
 import { settings } from "@equinor/eds-icons";
 import styled124 from "styled-components";
@@ -25443,7 +25513,7 @@ var SettingsItems = styled124.div`
   }
 `;
 var Settings = ({ allSettings, children }) => {
-  const buttonRef = useRef40(null);
+  const buttonRef = useRef41(null);
   const [isOpen, setIsOpen] = useState54(false);
   const themeContext = useContext11(ThemeProviderContext);
   const closeMenu = () => setIsOpen(false);
@@ -25613,12 +25683,12 @@ TopBar2.Resources = Resources;
 TopBar2.ApplicationDrawer = ApplicationDrawer;
 TopBar2.Tutorials = Tutorials;
 // src/organisms/Status/collections/BadRequest.tsx
-import { useRouter } from "@tanstack/react-router";
+import { useNavigate as useNavigate3 } from "react-router";
 import { jsxDEV as jsxDEV205 } from "react/jsx-dev-runtime";
 var BadRequest = () => {
-  const { history } = useRouter();
+  const navigate = useNavigate3();
   const handleOnClick = () => {
-    history.go(-1);
+    navigate(-1);
   };
   return /* @__PURE__ */ jsxDEV205(Status2, {
     color: "#AB9067",
@@ -25638,12 +25708,12 @@ var BadRequest = () => {
   }, undefined, true, undefined, this);
 };
 // src/organisms/Status/collections/GenericError.tsx
-import { useRouter as useRouter2 } from "@tanstack/react-router";
+import { useNavigate as useNavigate4 } from "react-router";
 import { jsxDEV as jsxDEV206 } from "react/jsx-dev-runtime";
 var GenericError = () => {
-  const { history } = useRouter2();
+  const navigate = useNavigate4();
   const handleOnClick = () => {
-    history.go(-1);
+    navigate(-1);
   };
   return /* @__PURE__ */ jsxDEV206(Status2, {
     children: [
@@ -25656,12 +25726,12 @@ var GenericError = () => {
   }, undefined, true, undefined, this);
 };
 // src/organisms/Status/collections/MissingPermissions.tsx
-import { useRouter as useRouter3 } from "@tanstack/react-router";
+import { useNavigate as useNavigate5 } from "react-router";
 import { jsxDEV as jsxDEV207 } from "react/jsx-dev-runtime";
 var MissingPermissions = () => {
-  const { history } = useRouter3();
+  const navigate = useNavigate5();
   const handleOnClick = () => {
-    history.go(-1);
+    navigate(-1);
   };
   return /* @__PURE__ */ jsxDEV207(Status2, {
     children: [
@@ -25675,12 +25745,12 @@ var MissingPermissions = () => {
   }, undefined, true, undefined, this);
 };
 // src/organisms/Status/collections/PageNotFound.tsx
-import { useRouter as useRouter4 } from "@tanstack/react-router";
+import { useNavigate as useNavigate6 } from "react-router";
 import { jsxDEV as jsxDEV208 } from "react/jsx-dev-runtime";
 var PageNotFound = () => {
-  const { history } = useRouter4();
+  const navigate = useNavigate6();
   const handleOnClick = () => {
-    history.go(-1);
+    navigate(-1);
   };
   return /* @__PURE__ */ jsxDEV208(Status2, {
     center: false,
@@ -25699,12 +25769,12 @@ var PageNotFound = () => {
   }, undefined, true, undefined, this);
 };
 // src/organisms/Status/collections/ServerError.tsx
-import { useRouter as useRouter5 } from "@tanstack/react-router";
+import { useNavigate as useNavigate7 } from "react-router";
 import { jsxDEV as jsxDEV209 } from "react/jsx-dev-runtime";
 var ServerError = () => {
-  const { history } = useRouter5();
+  const navigate = useNavigate7();
   const handleOnClick = () => {
-    history.go(-1);
+    navigate(-1);
   };
   return /* @__PURE__ */ jsxDEV209(Status2, {
     color: "#C47E84",
@@ -25750,7 +25820,7 @@ var ApiResponseError = ({ statusCode }) => {
 import { useMemo as useMemo39 } from "react";
 
 // src/organisms/TableOfContents/TableOfContents.styles.ts
-import { Link as TanstackLink3 } from "@tanstack/react-router";
+import { Link as ReactLink } from "react-router-dom";
 
 // src/organisms/TableOfContents/TableOfContents.constants.ts
 var HEIGHT = {
@@ -25832,7 +25902,7 @@ var Button28 = styled125.button`
       }
     `}
 `;
-var Link4 = styled125(TanstackLink3)`
+var Link4 = styled125(ReactLink)`
   text-decoration: none;
   &:focus,
   &:hover,
@@ -26003,7 +26073,7 @@ var ChildContainer = styled125(motion11.div)`
 `;
 
 // src/organisms/TableOfContents/TableOfContentsItem.tsx
-import { useEffect as useEffect33, useMemo as useMemo38, useRef as useRef41 } from "react";
+import { useEffect as useEffect34, useMemo as useMemo38, useRef as useRef42 } from "react";
 import { jsxDEV as jsxDEV211 } from "react/jsx-dev-runtime";
 var TableOfContentsItem = ({
   label,
@@ -26016,8 +26086,8 @@ var TableOfContentsItem = ({
   isLink = false
 }) => {
   const { isActive, selected, setSelected } = useTableOfContents();
-  const initialHeight = useRef41(undefined);
-  useEffect33(() => {
+  const initialHeight = useRef42(undefined);
+  useEffect34(() => {
     if (initialHeight.current === undefined) {
       initialHeight.current = 0;
     }
@@ -26160,10 +26230,10 @@ var TableOfContents = ({
   }, undefined, false, undefined, this);
 };
 // src/organisms/PageTitle/PageTitle.tsx
-import { useEffect as useEffect34 } from "react";
+import { useEffect as useEffect35 } from "react";
 var APP_NAME = environment.getAppName(import.meta.env.VITE_NAME);
 var PageTitle = ({ title, children }) => {
-  useEffect34(() => {
+  useEffect35(() => {
     if (document.title !== title) {
       document.title = `${APP_NAME} - ${title}`;
     }
@@ -26325,7 +26395,7 @@ ToggleGroup.displayName = "ToggleGroup";
 var ToggleGroup2 = ToggleGroup;
 ToggleGroup2.Option = ToggleGroupOption;
 // src/organisms/Faq/Faq.tsx
-import { useMemo as useMemo42, useState as useState58 } from "react";
+import { useMemo as useMemo42 } from "react";
 import { Typography as Typography83 } from "@equinor/eds-core-react";
 
 // src/organisms/Faq/Faq.styles.ts
@@ -26340,7 +26410,7 @@ var Container64 = styled128.div`
 `;
 
 // src/organisms/Faq/Header.tsx
-import { useMemo as useMemo40, useState as useState55 } from "react";
+import { useMemo as useMemo40 } from "react";
 import { Search as Search4 } from "@equinor/eds-core-react";
 import styled129 from "styled-components";
 import { jsxDEV as jsxDEV215 } from "react/jsx-dev-runtime";
@@ -26360,8 +26430,12 @@ var Container65 = styled129.div`
 `;
 var Header5 = () => {
   const { data } = useFaqsInApplication();
-  const [selectedTab, setSelectedTab] = useState55(undefined);
-  const [search, setSearch] = useState55("");
+  const [selectedTab, setSelectedTab] = useSearchParameter({
+    key: "category"
+  });
+  const [search, setSearch] = useSearchParameter({
+    key: "search"
+  });
   const tabOptions = useMemo40(() => {
     if (!data)
       return [
@@ -26409,11 +26483,11 @@ var Header5 = () => {
 };
 
 // src/organisms/Faq/Category/Category.tsx
-import { useMemo as useMemo41, useState as useState57 } from "react";
+import { useMemo as useMemo41 } from "react";
 import { Typography as Typography82 } from "@equinor/eds-core-react";
 
 // src/organisms/Faq/Category/Question.tsx
-import { useState as useState56 } from "react";
+import { useState as useState55 } from "react";
 import { Icon as Icon68, Typography as Typography81 } from "@equinor/eds-core-react";
 import { chevron_down as chevron_down5, chevron_up as chevron_up3 } from "@equinor/eds-icons";
 import { FaqService as FaqService2 } from "@equinor/subsurface-app-management";
@@ -26443,7 +26517,7 @@ var Container66 = styled130.div`
   }
 `;
 var Question = ({ question, answer, createdDate }) => {
-  const [open, setOpen] = useState56(false);
+  const [open, setOpen] = useState55(false);
   const handleOnToggleOpen = () => setOpen((prev) => !prev);
   return /* @__PURE__ */ jsxDEV216(Container66, {
     onClick: handleOnToggleOpen,
@@ -26491,8 +26565,12 @@ var Container67 = styled131.div`
   }
 `;
 var Category = ({ categoryName, faqs }) => {
-  const [search] = useState57(undefined);
-  const [selectedTab] = useState57(undefined);
+  const [search] = useSearchParameter({
+    key: "search"
+  });
+  const [selectedTab] = useSearchParameter({
+    key: "category"
+  });
   const sortedFaqs = useMemo41(() => {
     return faqs.toSorted((a, b) => {
       const usingA = a.orderBy ?? 0;
@@ -26599,7 +26677,9 @@ var CategorySkeleton = () => /* @__PURE__ */ jsxDEV218(Container68, {
 import { jsxDEV as jsxDEV219, Fragment as Fragment33 } from "react/jsx-dev-runtime";
 var Faq2 = () => {
   const { data, isLoading } = useFaqsInApplication();
-  const [selectedTab] = useState58(undefined);
+  const [selectedTab] = useSearchParameter({
+    key: "category"
+  });
   const filteredCategories = useMemo42(() => {
     if (!data)
       return;
@@ -26758,11 +26838,11 @@ var ExpandingIconButton = forwardRef51(({ text, icon, onClick, className, iconPo
 });
 ExpandingIconButton.displayName = "ExpandingIconButton";
 // src/deprecated/IconToggleButton.tsx
-import { forwardRef as forwardRef52, useState as useState59 } from "react";
+import { forwardRef as forwardRef52, useState as useState56 } from "react";
 import { Button as Button30, Icon as Icon71 } from "@equinor/eds-core-react";
 import { jsxDEV as jsxDEV221 } from "react/jsx-dev-runtime";
 var IconToggleButton = forwardRef52(({ initialState = false, toggleOn, toggleOff, onClick }, ref) => {
-  const [toggle, setToggle] = useState59(initialState);
+  const [toggle, setToggle] = useState56(initialState);
   const handleToggleOff = () => {
     setToggle(false);
     onClick?.(toggle);
@@ -26805,7 +26885,7 @@ var IconToggleButton_default = IconToggleButton;
 import { useMemo as useMemo45 } from "react";
 
 // src/deprecated/OldStepper/OldStep.tsx
-import { useMemo as useMemo43, useState as useState60 } from "react";
+import { useMemo as useMemo43, useState as useState57 } from "react";
 import { Icon as Icon72, Typography as Typography85 } from "@equinor/eds-core-react";
 import { check as check5 } from "@equinor/eds-icons";
 import styled134 from "styled-components";
@@ -26848,7 +26928,7 @@ var OldStep = ({
   onlyShowCurrentStepLabel = false,
   children
 }) => {
-  const [containerRef, setContainerRef] = useState60(null);
+  const [containerRef, setContainerRef] = useState57(null);
   const StepIcon2 = useMemo43(() => {
     if (index >= currentIndex) {
       return /* @__PURE__ */ jsxDEV222(IconWrapper3, {
@@ -26983,6 +27063,7 @@ export {
   useSnackbar,
   useSideBar,
   useSelect,
+  useSearchParameter,
   useReleaseNotes,
   usePrevious,
   usePrefetchRichTextImages,