@databiosphere/findable-ui 8.0.2 → 9.0.0

package/lib/components/Export/components/ExportToTerra/components/ExportToTerraReady/exportToTerraReady.js

@@ -1,11 +1,11 @@
 import React from "react";
 import { ButtonPrimary } from "../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
 import { FluidPaper } from "../../../../../common/Paper/paper.styles";
-import { ANCHOR_TARGET } from "../../../../../Links/common/entities";
+import { ANCHOR_TARGET, REL_ATTRIBUTE, } from "../../../../../Links/common/entities";
 import { Section, SectionActions, SectionContent, } from "../../../../export.styles";
 export const ExportToTerraReady = ({ ExportToTerraSuccess, exportURL, }) => {
     const onOpenTerra = () => {
-        window.open(exportURL, ANCHOR_TARGET.BLANK, "noopener noreferrer");
+        window.open(exportURL, ANCHOR_TARGET.BLANK, REL_ATTRIBUTE.NO_OPENER_NO_REFERRER);
     };
     return (React.createElement(FluidPaper, null,
         React.createElement(Section, null,

package/lib/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/components/AcceptTerraTOS/acceptTerraTOS.js

@@ -2,7 +2,7 @@ import React from "react";
 import { useAuthentication } from "../../../../../../../../../../hooks/useAuthentication/useAuthentication";
 import { useConfig } from "../../../../../../../../../../hooks/useConfig";
 import { ButtonPrimary } from "../../../../../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
-import { ANCHOR_TARGET } from "../../../../../../../../../Links/common/entities";
+import { ANCHOR_TARGET, REL_ATTRIBUTE, } from "../../../../../../../../../Links/common/entities";
 import { FormStep } from "../../formStep";
 export const AcceptTerraTOS = ({ active, completed, step, }) => {
     const { config } = useConfig();
@@ -11,7 +11,7 @@ export const AcceptTerraTOS = ({ active, completed, step, }) => {
     const isTOSAccepted = isTermsOfServiceAccepted(terraProfileLoginStatus);
     const onOpenTerra = () => {
         if (exportToTerraUrl) {
-            window.open(exportToTerraUrl, ANCHOR_TARGET.BLANK, "noopener noreferrer");
+            window.open(exportToTerraUrl, ANCHOR_TARGET.BLANK, REL_ATTRIBUTE.NO_OPENER_NO_REFERRER);
         }
     };
     return (React.createElement(FormStep, { action: React.createElement(ButtonPrimary, { onClick: onOpenTerra }, "Go to Terra"), active: active, completed: completed, step: step, text: isTOSAccepted ? (React.createElement("p", null, "Terra's terms of service have changed. Please login to Terra to accept the updated terms of service.")) : (React.createElement("p", null, "For full access to the Data Explorer, please sign in to Terra and review and accept the Terra terms of service when prompted.")), title: "Accept the Terra terms of service" }));

package/lib/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/components/ConnectTerraToNIHAccount/connectTerraToNIHAccount.js

@@ -1,10 +1,10 @@
 import React from "react";
 import { ButtonPrimary } from "../../../../../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
-import { ANCHOR_TARGET } from "../../../../../../../../../Links/common/entities";
+import { ANCHOR_TARGET, REL_ATTRIBUTE, } from "../../../../../../../../../Links/common/entities";
 import { FormStep } from "../../formStep";
 export const ConnectTerraToNIHAccount = ({ active, completed, step, }) => {
     const onGotoTutorial = () => {
-        window.open("https://support.terra.bio/hc/en-us/articles/360038086332-Linking-authorization-accessing-controlled-data-on-external-servers", ANCHOR_TARGET.BLANK, "noopener noreferrer");
+        window.open("https://support.terra.bio/hc/en-us/articles/360038086332-Linking-authorization-accessing-controlled-data-on-external-servers", ANCHOR_TARGET.BLANK, REL_ATTRIBUTE.NO_OPENER_NO_REFERRER);
     };
     return (React.createElement(FormStep, { action: React.createElement(ButtonPrimary, { onClick: onGotoTutorial }, "Go to Tutorial"), active: active, completed: completed, step: step, text: React.createElement("p", null, "Next, connect your Terra account to your NIH account by following the tutorial below."), title: "Connect Terra to your NIH account" }));
 };

package/lib/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/components/CreateTerraAccount/createTerraAccount.js

@@ -1,14 +1,14 @@
 import React from "react";
 import { useConfig } from "../../../../../../../../../../hooks/useConfig";
 import { ButtonPrimary } from "../../../../../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
-import { ANCHOR_TARGET } from "../../../../../../../../../Links/common/entities";
+import { ANCHOR_TARGET, REL_ATTRIBUTE, } from "../../../../../../../../../Links/common/entities";
 import { FormStep } from "../../formStep";
 export const CreateTerraAccount = ({ active, completed, step, }) => {
     const { config } = useConfig();
     const { exportToTerraUrl } = config;
     const onOpenTerra = () => {
         if (exportToTerraUrl) {
-            window.open(exportToTerraUrl, ANCHOR_TARGET.BLANK, "noopener noreferrer");
+            window.open(exportToTerraUrl, ANCHOR_TARGET.BLANK, REL_ATTRIBUTE.NO_OPENER_NO_REFERRER);
         }
     };
     return (React.createElement(FormStep, { action: React.createElement(ButtonPrimary, { onClick: onOpenTerra }, "Go to Terra"), active: active, completed: completed, step: step, text: React.createElement("p", null, "Create a Terra account using the same email that you used to log in to data explorer."), title: "Create a Terra account" }));

package/lib/components/Filter/components/Filter/filter.js

@@ -1,11 +1,10 @@
 import { CloseRounded } from "@mui/icons-material";
 import { Grow } from "@mui/material";
 import React, { useState } from "react";
-import { CloseDrawerIconButton } from "../../../common/IconButton/iconButton.styles";
 import { FilterLabel } from "../FilterLabel/filterLabel";
 import { FilterMenu } from "../FilterMenu/filterMenu";
 import { DrawerTransition } from "./components/DrawerTransition/drawerTransition";
-import { FilterPopover } from "./filter.styles";
+import { FilterPopover, IconButton } from "./filter.styles";
 const DEFAULT_POSITION = { left: 0, top: 0 };
 const DEFAULT_SLOT_PROPS = {
     paper: { variant: "menu" },
@@ -51,7 +50,7 @@ export const Filter = ({ categorySection, categoryView, closeAncestor, isFilterD
     return (React.createElement(React.Fragment, null,
         React.createElement(FilterLabel, { count: categoryView.values.length, disabled: categoryView.isDisabled, label: categoryView.label, onClick: onOpenFilter }),
         React.createElement(FilterPopover, { anchorPosition: anchorPosition, anchorReference: "anchorPosition", marginThreshold: 0, onClose: onCloseFilters, open: isOpen, slotProps: slotProps, TransitionComponent: TransitionComponent, transitionDuration: TransitionDuration },
-            isOpen && isFilterDrawer && (React.createElement(CloseDrawerIconButton, { Icon: CloseRounded, onClick: onCloseFilters, size: "medium" })),
+            isOpen && isFilterDrawer && (React.createElement(IconButton, { Icon: CloseRounded, onClick: onCloseFilters, size: "medium" })),
             React.createElement(FilterMenu, { categorySection: categorySection, categoryKey: categoryView.key, categoryLabel: categoryView.label, isFilterDrawer: isFilterDrawer, onFilter: onFilter, onCloseFilter: onCloseFilter, values: categoryView.values })),
         tags));
 };

package/lib/components/Filter/components/Filter/filter.styles.d.ts

@@ -1,3 +1,6 @@
 export declare const FilterPopover: import("@emotion/styled").StyledComponent<import("@mui/material").PopoverProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
+export declare const IconButton: import("@emotion/styled").StyledComponent<import("../../../common/IconButton/iconButton").IconButtonProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/lib/components/Filter/components/Filter/filter.styles.js

@@ -1,7 +1,8 @@
 import styled from "@emotion/styled";
 import { Popover } from "@mui/material";
 import { mediaDesktopSmallDown } from "../../../../styles/common/mixins/breakpoints";
-import { smokeLight } from "../../../../styles/common/mixins/colors";
+import { smokeLight, white } from "../../../../styles/common/mixins/colors";
+import { IconButton as DXIconButton } from "../../../common/IconButton/iconButton";
 export const FilterPopover = styled(Popover) `
   .MuiPaper-menu {
     margin: 0;
@@ -16,3 +17,9 @@ export const FilterPopover = styled(Popover) `
     }
   }
 `;
+export const IconButton = styled(DXIconButton) `
+  color: ${white};
+  left: calc(100% + 4px);
+  position: absolute;
+  top: 4px;
+`;

package/lib/components/Filter/components/FilterLabel/filterLabel.styles.d.ts

@@ -12,7 +12,7 @@ export declare const FilterLabel: import("@emotion/styled").StyledComponent<{
     size?: "large" | "medium" | "small" | undefined;
     startIcon?: import("react").ReactNode;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "nav" | "text" | "outlined" | "contained" | "activeNav" | undefined;
+    variant?: "nav" | "text" | "outlined" | "contained" | "activeNav" | "backNav" | undefined;
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;

package/lib/components/Index/components/AzulFileDownload/azulFileDownload.js

@@ -4,8 +4,8 @@ import { API_FILE_LOCATION_FETCH } from "../../../../apis/azul/common/constants"
 import { useRequestFileLocation } from "../../../../hooks/useRequestFileLocation";
 import { DownloadIcon } from "../../../common/CustomIcon/components/DownloadIcon/downloadIcon";
 import { LoadingIcon } from "../../../common/CustomIcon/components/LoadingIcon/loadingIcon";
-import { LoadingIconButton } from "../../../common/IconButton/components/LoadingIconButton/loadingIconButton";
-import { IconButtonPrimary } from "../../../common/IconButton/iconButton.styles";
+import { IconButton } from "../../../common/IconButton/iconButton";
+import { StyledIconButton } from "./azulFileDownload.styles";
 export const AzulFileDownload = ({ url, }) => {
     const downloadRef = useRef(null);
     // Used to prevent the download button from being clicked twice
@@ -31,10 +31,10 @@ export const AzulFileDownload = ({ url, }) => {
         setIsDownloading(true);
         run();
     };
-    const realButton = (React.createElement(IconButtonPrimary, { disabled: !url, Icon: isLoading ? LoadingIcon : DownloadIcon, onClick: onFileLocationRequested, size: "medium" }));
-    const mockButton = React.createElement(LoadingIconButton, null);
+    if (isDownloading)
+        return (React.createElement(StyledIconButton, { color: "primary", Icon: LoadingIcon, size: "medium" }));
     return (React.createElement(React.Fragment, null,
-        isDownloading ? mockButton : realButton,
+        React.createElement(IconButton, { color: "primary", disabled: !url, Icon: isLoading ? LoadingIcon : DownloadIcon, onClick: onFileLocationRequested, size: "medium" }),
         React.createElement(Box, { component: "a", download: true, ref: downloadRef, sx: { display: "none" } })));
 };
 /**

package/lib/components/Index/components/AzulFileDownload/azulFileDownload.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledIconButton: import("@emotion/styled").StyledComponent<import("../../../common/IconButton/iconButton").IconButtonProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/lib/components/Index/components/AzulFileDownload/azulFileDownload.styles.js

@@ -0,0 +1,5 @@
+import styled from "@emotion/styled";
+import { IconButton as DXIconButton } from "../../../common/IconButton/iconButton";
+export const StyledIconButton = styled(DXIconButton) `
+  pointer-events: none;
+`;

package/lib/components/Layout/components/ContentLayout/contentLayout.js

@@ -1,17 +1,19 @@
 import { useRouter } from "next/router";
 import React from "react";
 import { useLayoutState } from "../../../../hooks/useLayoutState";
-import { Content, ContentGrid, ContentLayout as Layout, Navigation as NavigationPositioner, NavigationGrid, Outline as OutlinePositioner, OutlineGrid, } from "./contentLayout.styles";
+import { Content, ContentGrid, ContentLayout as Layout, Navigation, NavigationGrid, Outline, OutlineGrid, Positioner, } from "./contentLayout.styles";
 export const ContentLayout = ({ className, content, layoutStyle, navigation, outline, }) => {
     const { asPath } = useRouter();
     const { layoutState: { headerHeight }, } = useLayoutState();
     return (React.createElement(Layout, { className: className, panelColor: layoutStyle?.content },
         navigation && (React.createElement(NavigationGrid, { headerHeight: headerHeight, panelColor: layoutStyle?.navigation },
-            React.createElement(NavigationPositioner, null, navigation))),
+            React.createElement(Positioner, { headerHeight: headerHeight },
+                React.createElement(Navigation, null, navigation)))),
         React.createElement(ContentGrid, { headerHeight: headerHeight, panelColor: layoutStyle?.content },
             React.createElement(Content, null, content)),
         outline && (React.createElement(OutlineGrid, { key: getOutlineKey(asPath), headerHeight: headerHeight, panelColor: layoutStyle?.outline },
-            React.createElement(OutlinePositioner, null, outline)))));
+            React.createElement(Positioner, { headerHeight: headerHeight },
+                React.createElement(Outline, null, outline))))));
 };
 /**
  * Returns outline key.

package/lib/components/Layout/components/ContentLayout/contentLayout.styles.d.ts

@@ -23,6 +23,10 @@ export declare const OutlineGrid: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & GridProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Positioner: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GridProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Navigation: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/lib/components/Layout/components/ContentLayout/contentLayout.styles.js

@@ -40,9 +40,11 @@ const content = ({ headerHeight, panelColor, theme, }) => css `
   background-color: ${getPanelBackgroundColor(theme, panelColor)};
   padding-top: ${headerHeight}px;
 `;
-const navigation = ({ headerHeight, panelColor, theme, }) => css `
+const navigation = ({ panelColor, theme }) => css `
   background-color: ${getPanelBackgroundColor(theme, panelColor)};
-  max-height: calc(100vh - ${headerHeight}px);
+`;
+const positioner = ({ headerHeight }) => css `
+  max-height: 100vh;
   overflow: auto;
   padding-top: ${headerHeight}px;
   position: sticky;
@@ -72,6 +74,9 @@ export const OutlineGrid = styled("div") `
     display: block;
   }
 `;
+export const Positioner = styled.div `
+  ${positioner};
+`;
 export const Navigation = styled.div `
   box-sizing: content-box;
   margin-left: auto;

package/lib/components/Layout/components/Footer/footer.js

@@ -1,6 +1,5 @@
 import { Toolbar } from "@mui/material";
 import React from "react";
-import { IconButtonSocialsFooter } from "../../../common/IconButton/iconButton.styles";
 import { ANCHOR_TARGET } from "../../../Links/common/entities";
 import { AppBar, Link, Links, Socials } from "./footer.styles";
 export const Footer = ({ Branding, className, navLinks, socials, }) => {
@@ -10,5 +9,5 @@ export const Footer = ({ Branding, className, navLinks, socials, }) => {
             (navLinks || socials) && (React.createElement(Links, null,
                 navLinks &&
                     navLinks.map(({ label, target = ANCHOR_TARGET.SELF, url }, i) => (React.createElement(Link, { key: `${url}${i}`, label: label, target: target, url: url }))),
-                socials && (React.createElement(Socials, { buttonSize: "small", IconButtonElType: IconButtonSocialsFooter, socials: socials })))))));
+                socials && React.createElement(Socials, { buttonSize: "small", socials: socials }))))));
 };

package/lib/components/Layout/components/Footer/footer.styles.js

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 import { AppBar as MAppBar } from "@mui/material";
 import { mediaTabletUp } from "../../../../styles/common/mixins/breakpoints";
-import { inkMain } from "../../../../styles/common/mixins/colors";
+import { inkMain, smokeMain } from "../../../../styles/common/mixins/colors";
 import { textBodySmall400 } from "../../../../styles/common/mixins/fonts";
 import { Socials as DXSocials } from "../../../common/Socials/socials";
 import { Link as DXLink } from "../../../Links/components/Link/link";
@@ -46,4 +46,9 @@ export const Link = styled(DXLink) `
 `;
 export const Socials = styled(DXSocials) `
   gap: 8px;
+  .MuiIconButton-root {
+    &:hover {
+      background-color: ${smokeMain};
+    }
+  }
 `;

package/lib/components/Layout/components/Header/common/entities.d.ts

@@ -6,6 +6,10 @@ export declare type Navigation = [
     NavLinkItem[] | undefined,
     NavLinkItem[] | undefined
 ];
+export declare enum SELECTED_MATCH {
+    EQUALS = "EQUALS",
+    STARTS_WITH = "STARTS_WITH"
+}
 export interface SocialMedia {
     label: ReactNode;
     socials: Social[];

package/lib/components/Layout/components/Header/common/entities.js

@@ -1 +1,5 @@
-export {};
+export var SELECTED_MATCH;
+(function (SELECTED_MATCH) {
+    SELECTED_MATCH["EQUALS"] = "EQUALS";
+    SELECTED_MATCH["STARTS_WITH"] = "STARTS_WITH";
+})(SELECTED_MATCH || (SELECTED_MATCH = {}));

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/RequestAuthentication/requestAuthentication.styles.d.ts

@@ -12,7 +12,7 @@ export declare const Button: import("@emotion/styled").StyledComponent<{
     size?: "large" | "medium" | "small" | undefined;
     startIcon?: import("react").ReactNode;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "nav" | "text" | "outlined" | "contained" | "activeNav" | undefined;
+    variant?: "nav" | "text" | "outlined" | "contained" | "activeNav" | "backNav" | undefined;
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Toolbar/toolbar.js

@@ -1,6 +1,7 @@
 import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
 import { IconButton, Toolbar as MToolbar } from "@mui/material";
 import React, { Fragment } from "react";
+import { Left, Right } from "../../../../../../../../header.styles";
 import { Announcements } from "../../../../../../../Announcements/announcements";
 import { Actions } from "../../../../actions";
 import { Authentication } from "../../../Authentication/authentication";
@@ -9,11 +10,12 @@ export const Toolbar = ({ actions, announcements, authenticationEnabled, logo, o
     return (React.createElement(Fragment, null,
         React.createElement(Announcements, { announcements: announcements }),
         React.createElement(MToolbar, null,
-            logo,
-            React.createElement(Actions, null,
-                React.createElement(Search, { closeMenu: onClose, searchEnabled: searchEnabled, searchURL: searchURL }),
-                React.createElement(Authentication, { authenticationEnabled: authenticationEnabled, closeMenu: onClose }),
-                actions,
-                React.createElement(IconButton, { color: "ink", onClick: onClose },
-                    React.createElement(CloseRoundedIcon, null))))));
+            React.createElement(Left, null, logo),
+            React.createElement(Right, null,
+                React.createElement(Actions, null,
+                    React.createElement(Search, { closeMenu: onClose, searchEnabled: searchEnabled, searchURL: searchURL }),
+                    React.createElement(Authentication, { authenticationEnabled: authenticationEnabled, closeMenu: onClose }),
+                    actions,
+                    React.createElement(IconButton, { color: "ink", onClick: onClose },
+                        React.createElement(CloseRoundedIcon, null)))))));
 };

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/common/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const SEARCH_PARAMETERS: {
+    CATEGORY: string;
+    QUERY: string;
+};

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/common/constants.js

@@ -0,0 +1,4 @@
+export const SEARCH_PARAMETERS = {
+    CATEGORY: "category",
+    QUERY: "q",
+};

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/common/utils.d.ts

@@ -0,0 +1,8 @@
+import { ReadonlyURLSearchParams } from "next/navigation";
+/**
+ * Return the search params, for the given search string.
+ * @param searchParams - Current search params.
+ * @param searchStr - Search string.
+ * @returns updated search params.
+ */
+export declare function getSearchParams(searchParams: ReadonlyURLSearchParams, searchStr: string): URLSearchParams;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/common/utils.js

@@ -0,0 +1,12 @@
+import { SEARCH_PARAMETERS } from "./constants";
+/**
+ * Return the search params, for the given search string.
+ * @param searchParams - Current search params.
+ * @param searchStr - Search string.
+ * @returns updated search params.
+ */
+export function getSearchParams(searchParams, searchStr) {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set(SEARCH_PARAMETERS.QUERY, searchStr);
+    return params;
+}

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/searchBar.js

@@ -1,10 +1,16 @@
 import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
-import React, { useRef, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import Router from "next/router";
+import React, { useCallback, useRef, useState, } from "react";
+import { isValidUrl } from "../../../../../../../../../../../../common/utils";
 import { ButtonPrimary } from "../../../../../../../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
 import { SearchIcon } from "../../../../../../../../../../../common/CustomIcon/components/SearchIcon/searchIcon";
+import { isClientSideNavigation } from "../../../../../../../../../../../Links/common/utils";
+import { getSearchParams } from "./common/utils";
 import { ClearButton, SearchBar as SearchDialog, SearchForm, SearchInput, } from "./searchBar.styles";
 export default function SearchBar({ closeMenu, closeSearch, searchOpen, searchURL, }) {
     const inputRef = useRef(null);
+    const searchParams = useSearchParams();
     const [searchTerm, setSearchTerm] = useState("");
     /**
      * Clears search term and refocuses input.
@@ -34,17 +40,27 @@ export default function SearchBar({ closeMenu, closeSearch, searchOpen, searchUR
      * @param searchStr - Current search string.
      * @param url - Current configured search path.
      */
-    const handleSubmit = (formEvent, searchStr, url) => {
+    const handleSubmit = useCallback((formEvent, searchStr, url) => {
         formEvent.preventDefault();
         if (searchStr && url) {
             closeMenu();
             closeSearch();
-            // Build search URL and redirect to it.
-            const location = new URL(url);
-            location.searchParams.set("q", searchStr);
-            window.location.href = location.href;
+            if (isClientSideNavigation(url)) {
+                Router.push({
+                    pathname: url,
+                    search: getSearchParams(searchParams, searchStr).toString(),
+                });
+                return;
+            }
+            if (isValidUrl(url)) {
+                // Build search URL and redirect to it.
+                const location = new URL(url);
+                location.search = getSearchParams(searchParams, searchStr).toString();
+                window.location.href = location.href;
+            }
+            throw new Error("Invalid search URL.");
         }
-    };
+    }, [closeMenu, closeSearch, searchParams]);
     return (React.createElement(SearchDialog, { fullWidth: true, hideBackdrop: true, maxWidth: false, onClose: closeSearch, open: searchOpen, PaperProps: { variant: "searchbar" }, TransitionProps: { onExited: handleExited } },
         React.createElement(SearchForm, { onSubmit: (e) => handleSubmit(e, searchTerm, searchURL) },
             React.createElement(SearchIcon, { fontSize: "small" }),

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/searchBar.styles.js

@@ -1,5 +1,6 @@
 import styled from "@emotion/styled";
 import { Dialog, Input } from "@mui/material";
+import { inkLight, smokeMain, } from "../../../../../../../../../../../../styles/common/mixins/colors";
 import { IconButton } from "../../../../../../../../../../../common/IconButton/iconButton";
 import { HEADER_HEIGHT } from "../../../../../../../../common/constants";
 export const SearchBar = styled(Dialog) `
@@ -19,15 +20,15 @@ export const SearchForm = styled.form `
   padding: 12px 16px;
 `;
 export const SearchInput = styled(Input) `
-  border-bottom: 1px solid ${({ theme }) => theme.palette.smoke.main};
+  border-bottom: 1px solid ${smokeMain};
   height: 40px;
   padding: 0;
 
   &&.Mui-focused ::placeholder {
-    color: ${({ theme }) => theme.palette.ink.light};
+    color: ${inkLight};
     opacity: 1;
   }
 `;
 export const ClearButton = styled(IconButton) `
-  color: ${({ theme }) => theme.palette.ink.light};
+  color: ${inkLight};
 `;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchButton/searchButton.styles.d.ts

@@ -12,7 +12,7 @@ export declare const Button: import("@emotion/styled").StyledComponent<{
     size?: "large" | "medium" | "small" | undefined;
     startIcon?: import("react").ReactNode;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "nav" | "text" | "outlined" | "contained" | "activeNav" | undefined;
+    variant?: "nav" | "text" | "outlined" | "contained" | "activeNav" | "backNav" | undefined;
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;

package/lib/components/Layout/components/Header/components/Content/components/Logo/logo.js

@@ -1,10 +1,7 @@
-import Link from "next/link";
 import React from "react";
 import { StaticImage, } from "../../../../../../../common/StaticImage/staticImage";
 import { ANCHOR_TARGET } from "../../../../../../../Links/common/entities";
-import { isClientSideNavigation } from "../../../../../../../Links/common/utils";
+import { StyledLink } from "./logo.styles";
 export const Logo = ({ alt, className, height, link, src, target = ANCHOR_TARGET.SELF, width, }) => {
-    const logo = (React.createElement(StaticImage, { alt: alt, height: height, src: src, width: width }));
-    return isClientSideNavigation(link) ? (React.createElement(Link, { href: link, legacyBehavior: true, passHref: true },
-        React.createElement("a", { className: className, href: "passHref", rel: "noopener", target: target }, logo))) : (React.createElement("a", { className: className, href: link, rel: "noopener noreferrer", target: target }, logo));
+    return (React.createElement(StyledLink, { className: className, label: React.createElement(StaticImage, { alt: alt, height: height, src: src, width: width }), target: target, url: link }));
 };

package/lib/components/Layout/components/Header/components/Content/components/Logo/logo.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledLink: import("@emotion/styled").StyledComponent<import("../../../../../../../Links/components/Link/link").LinkProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Logo/logo.styles.js

@@ -0,0 +1,11 @@
+import styled from "@emotion/styled";
+import { Link } from "../../../../../../../Links/components/Link/link";
+export const StyledLink = styled(Link) `
+  &.MuiLink-root {
+    flex: none;
+    text-decoration: none !important;
+    img {
+      margin: 0;
+    }
+  }
+`;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/common/utils.d.ts

@@ -0,0 +1,15 @@
+import { SELECTED_MATCH } from "../../../../../common/entities";
+/**
+ * Returns true if the navigation link is selected.
+ * @param url - The URL of the navigation link.
+ * @param pathname - The current pathname.
+ * @param selectedMatch - The selected match type.
+ * @returns true if the navigation link is selected.
+ */
+export declare function isNavigationLinkSelected(url: string, pathname?: string, selectedMatch?: SELECTED_MATCH): boolean;
+/**
+ * Returns true if the selected match type is "EQUAL".
+ * @param selectedMatch - The selected match type.
+ * @returns True if the selected match type is "EQUAL".
+ */
+export declare function isSelectedMatchEqual(selectedMatch: SELECTED_MATCH): boolean;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/common/utils.js

@@ -0,0 +1,23 @@
+import { SELECTED_MATCH } from "../../../../../common/entities";
+/**
+ * Returns true if the navigation link is selected.
+ * @param url - The URL of the navigation link.
+ * @param pathname - The current pathname.
+ * @param selectedMatch - The selected match type.
+ * @returns true if the navigation link is selected.
+ */
+export function isNavigationLinkSelected(url, pathname, selectedMatch = SELECTED_MATCH.STARTS_WITH) {
+    if (!pathname)
+        return false;
+    if (isSelectedMatchEqual(selectedMatch))
+        return url === pathname;
+    return pathname.startsWith(url);
+}
+/**
+ * Returns true if the selected match type is "EQUAL".
+ * @param selectedMatch - The selected match type.
+ * @returns True if the selected match type is "EQUAL".
+ */
+export function isSelectedMatchEqual(selectedMatch) {
+    return selectedMatch === SELECTED_MATCH.EQUALS;
+}

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationButtonLabel/navigationButtonLabel.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+export interface NavigationButtonLabelProps {
+    label: ReactNode;
+}
+export declare const NavigationButtonLabel: ({ label, }: NavigationButtonLabelProps) => JSX.Element;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationButtonLabel/navigationButtonLabel.js

@@ -0,0 +1,5 @@
+import { Typography } from "@mui/material";
+import React, { Fragment } from "react";
+export const NavigationButtonLabel = ({ label, }) => {
+    return (React.createElement(Fragment, null, typeof label === "string" ? (React.createElement(Typography, { component: "span", noWrap: true }, label)) : (label)));
+};

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/navigationDrawer.js

@@ -1,5 +1,4 @@
 import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
-import { Dialog as MDialog } from "@mui/material";
 import React, { useState } from "react";
 import { Button } from "../../../../../../../../../common/Button/button";
 import { BackArrowIcon } from "../../../../../../../../../common/CustomIcon/components/BackArrowIcon/backArrowIcon";
@@ -7,7 +6,7 @@ import { AppBar } from "../../../../../../header.styles";
 import { DrawerNavigation as Navigation } from "../../../Actions/components/Menu/components/Content/components/Navigation/navigation.styles";
 import { Toolbar } from "../../../Actions/components/Menu/components/Toolbar/toolbar";
 import { Slide } from "./components/Slide/slide";
-import { Button as BackButton, Content } from "./navigationDrawer.styles";
+import { Button as BackButton, Content, Dialog, } from "./navigationDrawer.styles";
 export const NavigationDrawer = ({ closeAncestor, headerProps, menuItems, menuLabel, pathname, }) => {
     const [drawerOpen, setDrawerOpen] = useState(false);
     const openDrawer = () => {
@@ -22,10 +21,10 @@ export const NavigationDrawer = ({ closeAncestor, headerProps, menuItems, menuLa
     };
     return (React.createElement(React.Fragment, null,
         React.createElement(Button, { EndIcon: ArrowDropDownRoundedIcon, onClick: openDrawer, variant: "nav" }, menuLabel),
-        React.createElement(MDialog, { disableScrollLock: true, fullScreen: true, hideBackdrop: true, keepMounted: false, onClose: closeDrawers, open: drawerOpen, PaperProps: { elevation: 0 }, TransitionComponent: Slide, transitionDuration: 300 },
+        React.createElement(Dialog, { disableScrollLock: true, fullScreen: true, hideBackdrop: true, keepMounted: false, onClose: closeDrawers, open: drawerOpen, PaperProps: { elevation: 0 }, TransitionComponent: Slide, transitionDuration: 300 },
             React.createElement(AppBar, { component: "div", elevation: 1 },
                 React.createElement(Toolbar, { onClose: closeDrawers, ...headerProps })),
             React.createElement(Content, null,
-                React.createElement(BackButton, { fullWidth: true, onClick: closeDrawer, StartIcon: BackArrowIcon, variant: "nav" }, menuLabel),
+                React.createElement(BackButton, { fullWidth: true, onClick: closeDrawer, StartIcon: BackArrowIcon, variant: "backNav" }, menuLabel),
                 React.createElement(Navigation, { closeAncestor: closeDrawers, headerProps: headerProps, links: menuItems, pathname: pathname })))));
 };

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/navigationDrawer.styles.d.ts

@@ -1,4 +1,7 @@
 /// <reference types="react" />
+export declare const Dialog: import("@emotion/styled").StyledComponent<import("@mui/material").DialogProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
 export declare const Content: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;