@windstream/react-shared-components 0.1.71 → 0.1.72

package/src/contentful/blocks/navigation/index.tsx

@@ -1,462 +1,462 @@
-import React, { FormEvent } from "react";
-import { DesktopLinkGroups } from "./desktop-link-groups.tsx";
-import { MobileLinkGroups } from "./mobile-link-groups.tsx";
-import { NavigationProps } from "./types";
-
-import { CallButton } from "@shared/components/call-button";
-import { Input } from "@shared/components/input";
-import { Link } from "@shared/components/link";
-import { MaterialIcon } from "@shared/components/material-icon";
-import { NextImage } from "@shared/components/next-image";
-import { Text } from "@shared/components/text";
-import { Button as ContentfulButton } from "@shared/contentful/blocks/button";
-import { cx } from "@shared/utils";
-
-export const Navigation: React.FC<NavigationProps> = props => {
-  const {
-    primaryNavigationLinks,
-    utilityNavigationLinks,
-    checkPlansJSX,
-    primaryNavigationLogo,
-    accountNavigationLinks,
-    supportNavigationLinks,
-    searchBarIcon,
-    invocaPhoneNumberLink,
-    invocaPhoneNumberDisplayText,
-    callNowCtaText,
-    displayCartIcon,
-    cartHref,
-    cartHasRetention,
-    cartIconAriaLabel = "Cart",
-    onCallClickDesktop,
-    onCallClickMobile,
-    onCartClick,
-    onSearch = () => {},
-    utilityNavActiveIndex,
-    primaryNavigationLogoWidth = 76.5,
-    primaryNavigationLogoHeight = 24,
-    hideMobileCallButton = false,
-  } = props;
-  return (
-    <div className="component-container">
-      <nav className={`menu-container z-[1000]`}>
-        <div className="utility-container hidden lg:block lg:border-b lg:px-2">
-          <div className="mx-auto flex max-w-120 justify-between">
-            <ul className="flex gap-5" aria-label="Utility Navigation">
-              {utilityNavigationLinks?.map((links, index) => {
-                return (
-                  <li key={`main-menu-items-${index}`}>
-                    <ContentfulButton
-                      linkClassName={cx(
-                        "footnote flex items-center w-full h-11 text-text",
-                        // If utilityNavActiveIndex is not provided, default to making the second link active (for existing business app). If utilityNavActiveIndex is provided, use it to determine which link is active.
-                        typeof utilityNavActiveIndex !== "number"
-                          ? index === 1 && "label4"
-                          : utilityNavActiveIndex === index && "label4"
-                      )}
-                      linkVariant="unstyled"
-                      {...(Object.fromEntries(
-                        Object.entries(links).filter(([_, v]) => v !== null)
-                      ) as any)}
-                    />
-                  </li>
-                );
-              })}
-            </ul>
-            <div className="flex items-center gap-10">
-              <CallButton
-                className="border-none"
-                href={invocaPhoneNumberLink}
-                prefix={callNowCtaText}
-                onClick={onCallClickDesktop}
-              >
-                <Text className="body3 text-text">
-                  {invocaPhoneNumberDisplayText}
-                </Text>
-              </CallButton>
-              {displayCartIcon ? (
-                <Link
-                  href={cartHref || "#"}
-                  className="relative inline-flex cursor-pointer"
-                  aria-label={cartIconAriaLabel}
-                  onClick={onCartClick}
-                >
-                  <MaterialIcon name="shopping_cart" />
-                  {cartHasRetention ? (
-                    <span className="absolute -right-2 -top-1 h-2.5 w-2.5 rounded-full bg-icon-brand" />
-                  ) : null}
-                </Link>
-              ) : null}
-              {accountNavigationLinks?.map((links, index) => {
-                return (
-                  <DesktopLinkGroups
-                    key={`my-account-${index}`}
-                    anchorName={`my-account-${index}`}
-                    link={links}
-                  />
-                );
-              })}
-            </div>
-          </div>
-        </div>
-        <div className="main-nav-container" aria-label="Main Navigation">
-          <div className="mobile-nav-section flex h-14 items-center justify-between border border-b px-5 py-[10px] lg:hidden">
-            <div>
-              <Link href="/" className="flex">
-                <NextImage
-                  src={
-                    typeof primaryNavigationLogo === "string"
-                      ? primaryNavigationLogo
-                      : primaryNavigationLogo?.url || ""
-                  }
-                  alt="Kinetic business logo"
-                  width={primaryNavigationLogoWidth}
-                  height={primaryNavigationLogoHeight}
-                />
-              </Link>
-            </div>
-            <div className="flex items-center gap-6">
-              {hideMobileCallButton ? null : (
-                <CallButton
-                  href={invocaPhoneNumberLink}
-                  onClick={onCallClickMobile}
-                >
-                  <Text as="span" className="footnote">
-                    {invocaPhoneNumberDisplayText}
-                  </Text>
-                </CallButton>
-              )}
-              {displayCartIcon ? (
-                <Link
-                  href={cartHref || "#"}
-                  className="relative inline-flex cursor-pointer"
-                  aria-label={cartIconAriaLabel}
-                  onClick={onCartClick}
-                >
-                  <MaterialIcon name="shopping_cart" />
-                  {cartHasRetention ? (
-                    <span className="absolute -right-2 -top-1 h-2.5 w-2.5 rounded-full bg-icon-brand" />
-                  ) : null}
-                </Link>
-              ) : null}
-              <MobileMenu {...props} />
-            </div>
-          </div>
-
-          <div className="desktop-nav-section hidden lg:block lg:border-b lg:px-2">
-            <div className="mx-auto flex h-14 max-w-120 items-center justify-between">
-              <div className="flex h-full">
-                <Link href="/" className="flex">
-                  <NextImage
-                    src={
-                      typeof primaryNavigationLogo === "string"
-                        ? primaryNavigationLogo
-                        : primaryNavigationLogo?.url || ""
-                    }
-                    alt="Kinetic business logo"
-                    width={primaryNavigationLogoWidth}
-                    height={primaryNavigationLogoHeight}
-                    className="mr-[64px]"
-                  />
-                </Link>
-
-                <div className="flex h-full items-center gap-5">
-                  {primaryNavigationLinks?.map((links, index) => {
-                    return (
-                      <DesktopLinkGroups
-                        key={`main-menu-${index}`}
-                        anchorName={`main-menu-${index}`}
-                        link={links}
-                      />
-                    );
-                  })}
-                </div>
-              </div>
-              <div className="flex h-full items-center gap-10">
-                <DesktopSearchInput
-                  searchBarIconURL={
-                    typeof searchBarIcon === "string"
-                      ? searchBarIcon
-                      : searchBarIcon?.url || ""
-                  }
-                  onSearch={onSearch}
-                />
-                {supportNavigationLinks?.map((links, index) => {
-                  return (
-                    <DesktopLinkGroups
-                      key={`support-menu-${index}`}
-                      anchorName={`support-menu-${index}`}
-                      link={links}
-                    />
-                  );
-                })}
-              </div>
-            </div>
-          </div>
-        </div>
-      </nav>
-
-      {checkPlansJSX && <div className="md:hidden">{checkPlansJSX}</div>}
-    </div>
-  );
-};
-
-const MobileMenu = (props: NavigationProps) => {
-  const {
-    primaryNavigationLinks,
-    utilityNavigationLinks,
-    supportNavigationLinks,
-    accountNavigationLinks,
-  } = props;
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  React.useEffect(() => {
-    if (typeof window === "undefined") return;
-
-    if (isOpen) document.body.style.overflowY = "hidden";
-    else document.body.style.overflowY = "unset";
-
-    const element = document.getElementById("drawer-items");
-    if (!element) return;
-
-    const focusableEls = element.querySelectorAll(".focus-item");
-    const firstFocusableEl = focusableEls[0];
-    const lastFocusableEl = focusableEls[focusableEls.length - 1];
-
-    const handleKeyDown = (e: {
-      key: string;
-      keyCode: number;
-      shiftKey: any;
-      preventDefault: () => void;
-    }) => {
-      const isTabPressed = e.key === "Tab" || e.keyCode === 9;
-
-      if (!isTabPressed) return;
-
-      if (e.shiftKey) {
-        if (document.activeElement === firstFocusableEl) {
-          (lastFocusableEl as HTMLButtonElement).focus?.();
-          e.preventDefault();
-        }
-      } else {
-        if (document.activeElement === lastFocusableEl) {
-          (firstFocusableEl as HTMLButtonElement).focus?.();
-          e.preventDefault();
-        }
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-
-    return () => {
-      document.body.style.overflowY = "unset";
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [isOpen]);
-
-  const closeMenu = () => {
-    setIsOpen(false);
-  };
-
-  return (
-    <div>
-      <ContentfulButton
-        showButtonAs="unstyled"
-        buttonClassName="flex"
-        onClick={() => setIsOpen(true)}
-      >
-        <MaterialIcon name="menu" />
-      </ContentfulButton>
-      {isOpen ? (
-        <div className="fixed bottom-0 left-0 right-0 top-0 z-[90] h-full w-full bg-scrim-bg-modal"></div>
-      ) : null}
-
-      <div
-        className={cx(
-          "fixed bottom-0 right-0 top-0",
-          "z-[100] h-full bg-bg px-0 py-4",
-          "transition-all duration-300 ease-in-out",
-          "block",
-          isOpen ? "right-0" : "-right-96"
-        )}
-        id="mobile-menu-overlay"
-      >
-        <div id="drawer-items" className="flex h-full flex-col gap-3">
-          <div className="flex items-center justify-between px-4">
-            <div>
-              <CallButton
-                className="border-none"
-                href={props.invocaPhoneNumberLink}
-                onClick={props.onCallClickMobile}
-              >
-                {props.invocaPhoneNumberDisplayText}
-              </CallButton>
-            </div>
-            <div>
-              <ContentfulButton
-                showButtonAs="unstyled"
-                buttonClassName="focus-item flex"
-                onClick={closeMenu}
-              >
-                <MaterialIcon name="close" />
-              </ContentfulButton>
-            </div>
-          </div>
-          <MobileSearchInput
-            closeMenu={closeMenu}
-            isMenuOpen={isOpen}
-            searchBarIconURL={
-              typeof props.searchBarIcon === "string"
-                ? props.searchBarIcon
-                : props.searchBarIcon?.url || ""
-            }
-            onSearch={props.onSearch || (() => {})}
-          />
-          <div
-            className="flex-grow overflow-y-auto"
-            onClick={event => {
-              // Close the drawer when a link (anchor) is clicked.
-              // Group-toggle buttons render as <button> and won't match,
-              // so they continue to expand/collapse normally.
-              // Required for Pages Router where MobileMenu persists across
-              // client-side navigations and its local `isOpen` state would
-              // otherwise stay true on the new route.
-              const target = event.target as HTMLElement | null;
-              if (target?.closest("a")) {
-                closeMenu();
-              }
-            }}
-          >
-            <ul className="mt-2 flex flex-col gap-2">
-              {[
-                ...(primaryNavigationLinks || []),
-                ...(supportNavigationLinks || []),
-                ...(accountNavigationLinks || []),
-              ].map((links, index) => (
-                <li key={`main-menu-items-${index}`}>
-                  <MobileLinkGroups link={links} />
-                </li>
-              ))}
-            </ul>
-
-            <ul className="mt-2 flex gap-5 bg-bg-fill-info px-4">
-              {utilityNavigationLinks?.map((link, index) => {
-                return (
-                  <li key={`utility-menu-items-${index}`}>
-                    <ContentfulButton
-                      key={`utility-submenu-link-btn-${link.anchorId}`}
-                      {...(Object.fromEntries(
-                        Object.entries(link).filter(([_, v]) => v !== null)
-                      ) as any)}
-                      linkClassName={cx(
-                        "footnote flex items-center w-full h-11 text-text-link",
-                        typeof props.utilityNavActiveIndex !== "number"
-                          ? index === 1 && "label4"
-                          : props.utilityNavActiveIndex === index && "label4"
-                      )}
-                      linkVariant="unstyled"
-                    />
-                  </li>
-                );
-              })}
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const MobileSearchInput = (props: {
-  closeMenu: () => void;
-  onSearch: (query: string) => void;
-  isMenuOpen: boolean;
-  searchBarIconURL: string;
-}) => {
-  const { closeMenu, onSearch, isMenuOpen, searchBarIconURL } = props;
-  const [searchValue, setSearchValue] = React.useState("");
-  const searchInputRef = React.useRef<HTMLInputElement>(null);
-
-  const redirectToSearchResults = (e: FormEvent<HTMLFormElement> | any) => {
-    closeMenu();
-    e.preventDefault();
-    onSearch(searchValue);
-  };
-
-  React.useEffect(() => {
-    if (!isMenuOpen) {
-      setSearchValue("");
-    }
-  }, [isMenuOpen]);
-
-  return (
-    <form
-      name="searchForm"
-      className="flex border-b border-t transition-colors focus-within:border-border-focus"
-      onSubmit={redirectToSearchResults}
-    >
-      <NextImage
-        src={searchBarIconURL}
-        width={32}
-        height={32}
-        alt="Search icon"
-        role="button"
-        className="ml-2"
-        onClick={redirectToSearchResults}
-      />
-      <div className="flex-grow">
-        <Input
-          ref={searchInputRef}
-          className={"body3 h-[34px] rounded-none px-3 text-text"}
-          name="search"
-          placeholder="Search..."
-          value={searchValue}
-          onChange={e => setSearchValue(e.target.value)}
-          autoComplete="off"
-          containerClassName="h-[46px] px-4 pl-0 rounded-none flex-grow border-none"
-        />
-      </div>
-    </form>
-  );
-};
-
-const DesktopSearchInput = (props: {
-  searchBarIconURL: string;
-  onSearch: (query: string) => void;
-}) => {
-  const { searchBarIconURL, onSearch } = props;
-  const [searchValue, setSearchValue] = React.useState("");
-  const searchInputRef = React.useRef<HTMLInputElement>(null);
-
-  const redirectToSearchResults = (e: FormEvent<HTMLFormElement> | any) => {
-    e.preventDefault();
-    onSearch(searchValue);
-  };
-
-  return (
-    <form
-      name="searchForm"
-      className="flex h-9 w-60 rounded-input-xl border px-1 transition-colors focus-within:border-border-focus"
-      onSubmit={redirectToSearchResults}
-    >
-      <NextImage
-        src={searchBarIconURL}
-        width={32}
-        height={32}
-        alt="Search icon"
-        role="button"
-        onClick={redirectToSearchResults}
-      />
-      <Input
-        ref={searchInputRef}
-        className={"body3 rounded-full px-3 text-text"}
-        name="search"
-        placeholder="Search..."
-        value={searchValue}
-        onChange={e => setSearchValue(e.target.value)}
-        autoComplete="off"
-        containerClassName="px-0 h-full border-none rounded-full"
-      />
-    </form>
-  );
-};
+import React, { FormEvent } from "react";
+import { DesktopLinkGroups } from "./desktop-link-groups.tsx";
+import { MobileLinkGroups } from "./mobile-link-groups.tsx";
+import { NavigationProps } from "./types";
+
+import { CallButton } from "@shared/components/call-button";
+import { Input } from "@shared/components/input";
+import { Link } from "@shared/components/link";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { NextImage } from "@shared/components/next-image";
+import { Text } from "@shared/components/text";
+import { Button as ContentfulButton } from "@shared/contentful/blocks/button";
+import { cx } from "@shared/utils";
+
+export const Navigation: React.FC<NavigationProps> = props => {
+  const {
+    primaryNavigationLinks,
+    utilityNavigationLinks,
+    checkPlansJSX,
+    primaryNavigationLogo,
+    accountNavigationLinks,
+    supportNavigationLinks,
+    searchBarIcon,
+    invocaPhoneNumberLink,
+    invocaPhoneNumberDisplayText,
+    callNowCtaText,
+    displayCartIcon,
+    cartHref,
+    cartHasRetention,
+    cartIconAriaLabel = "Cart",
+    onCallClickDesktop,
+    onCallClickMobile,
+    onCartClick,
+    onSearch = () => {},
+    utilityNavActiveIndex,
+    primaryNavigationLogoWidth = 76.5,
+    primaryNavigationLogoHeight = 24,
+    hideMobileCallButton = false,
+  } = props;
+  return (
+    <div className="component-container">
+      <nav className={`menu-container z-[1000]`}>
+        <div className="utility-container hidden lg:block lg:border-b lg:px-2">
+          <div className="mx-auto flex max-w-120 justify-between">
+            <ul className="flex gap-5" aria-label="Utility Navigation">
+              {utilityNavigationLinks?.map((links, index) => {
+                return (
+                  <li key={`main-menu-items-${index}`}>
+                    <ContentfulButton
+                      linkClassName={cx(
+                        "footnote flex items-center w-full h-11 text-text",
+                        // If utilityNavActiveIndex is not provided, default to making the second link active (for existing business app). If utilityNavActiveIndex is provided, use it to determine which link is active.
+                        typeof utilityNavActiveIndex !== "number"
+                          ? index === 1 && "label4"
+                          : utilityNavActiveIndex === index && "label4"
+                      )}
+                      linkVariant="unstyled"
+                      {...(Object.fromEntries(
+                        Object.entries(links).filter(([_, v]) => v !== null)
+                      ) as any)}
+                    />
+                  </li>
+                );
+              })}
+            </ul>
+            <div className="flex items-center gap-10">
+              <CallButton
+                className="border-none"
+                href={invocaPhoneNumberLink}
+                prefix={callNowCtaText}
+                onClick={onCallClickDesktop}
+              >
+                <Text className="body3 text-text">
+                  {invocaPhoneNumberDisplayText}
+                </Text>
+              </CallButton>
+              {displayCartIcon ? (
+                <Link
+                  href={cartHref || "#"}
+                  className="relative inline-flex cursor-pointer"
+                  aria-label={cartIconAriaLabel}
+                  onClick={onCartClick}
+                >
+                  <MaterialIcon name="shopping_cart" />
+                  {cartHasRetention ? (
+                    <span className="absolute -right-2 -top-1 h-2.5 w-2.5 rounded-full bg-icon-brand" />
+                  ) : null}
+                </Link>
+              ) : null}
+              {accountNavigationLinks?.map((links, index) => {
+                return (
+                  <DesktopLinkGroups
+                    key={`my-account-${index}`}
+                    anchorName={`my-account-${index}`}
+                    link={links}
+                  />
+                );
+              })}
+            </div>
+          </div>
+        </div>
+        <div className="main-nav-container" aria-label="Main Navigation">
+          <div className="mobile-nav-section flex h-14 items-center justify-between border border-b px-5 py-[10px] lg:hidden">
+            <div>
+              <Link href="/" className="flex">
+                <NextImage
+                  src={
+                    typeof primaryNavigationLogo === "string"
+                      ? primaryNavigationLogo
+                      : primaryNavigationLogo?.url || ""
+                  }
+                  alt="Kinetic business logo"
+                  width={primaryNavigationLogoWidth}
+                  height={primaryNavigationLogoHeight}
+                />
+              </Link>
+            </div>
+            <div className="flex items-center gap-6">
+              {hideMobileCallButton ? null : (
+                <CallButton
+                  href={invocaPhoneNumberLink}
+                  onClick={onCallClickMobile}
+                >
+                  <Text as="span" className="footnote">
+                    {invocaPhoneNumberDisplayText}
+                  </Text>
+                </CallButton>
+              )}
+              {displayCartIcon ? (
+                <Link
+                  href={cartHref || "#"}
+                  className="relative inline-flex cursor-pointer"
+                  aria-label={cartIconAriaLabel}
+                  onClick={onCartClick}
+                >
+                  <MaterialIcon name="shopping_cart" />
+                  {cartHasRetention ? (
+                    <span className="absolute -right-2 -top-1 h-2.5 w-2.5 rounded-full bg-icon-brand" />
+                  ) : null}
+                </Link>
+              ) : null}
+              <MobileMenu {...props} />
+            </div>
+          </div>
+
+          <div className="desktop-nav-section hidden lg:block lg:border-b lg:px-2">
+            <div className="mx-auto flex h-14 max-w-120 items-center justify-between">
+              <div className="flex h-full">
+                <Link href="/" className="flex">
+                  <NextImage
+                    src={
+                      typeof primaryNavigationLogo === "string"
+                        ? primaryNavigationLogo
+                        : primaryNavigationLogo?.url || ""
+                    }
+                    alt="Kinetic business logo"
+                    width={primaryNavigationLogoWidth}
+                    height={primaryNavigationLogoHeight}
+                    className="mr-[64px]"
+                  />
+                </Link>
+
+                <div className="flex h-full items-center gap-5">
+                  {primaryNavigationLinks?.map((links, index) => {
+                    return (
+                      <DesktopLinkGroups
+                        key={`main-menu-${index}`}
+                        anchorName={`main-menu-${index}`}
+                        link={links}
+                      />
+                    );
+                  })}
+                </div>
+              </div>
+              <div className="flex h-full items-center gap-10">
+                <DesktopSearchInput
+                  searchBarIconURL={
+                    typeof searchBarIcon === "string"
+                      ? searchBarIcon
+                      : searchBarIcon?.url || ""
+                  }
+                  onSearch={onSearch}
+                />
+                {supportNavigationLinks?.map((links, index) => {
+                  return (
+                    <DesktopLinkGroups
+                      key={`support-menu-${index}`}
+                      anchorName={`support-menu-${index}`}
+                      link={links}
+                    />
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      {checkPlansJSX && <div className="md:hidden">{checkPlansJSX}</div>}
+    </div>
+  );
+};
+
+const MobileMenu = (props: NavigationProps) => {
+  const {
+    primaryNavigationLinks,
+    utilityNavigationLinks,
+    supportNavigationLinks,
+    accountNavigationLinks,
+  } = props;
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    if (isOpen) document.body.style.overflowY = "hidden";
+    else document.body.style.overflowY = "unset";
+
+    const element = document.getElementById("drawer-items");
+    if (!element) return;
+
+    const focusableEls = element.querySelectorAll(".focus-item");
+    const firstFocusableEl = focusableEls[0];
+    const lastFocusableEl = focusableEls[focusableEls.length - 1];
+
+    const handleKeyDown = (e: {
+      key: string;
+      keyCode: number;
+      shiftKey: any;
+      preventDefault: () => void;
+    }) => {
+      const isTabPressed = e.key === "Tab" || e.keyCode === 9;
+
+      if (!isTabPressed) return;
+
+      if (e.shiftKey) {
+        if (document.activeElement === firstFocusableEl) {
+          (lastFocusableEl as HTMLButtonElement).focus?.();
+          e.preventDefault();
+        }
+      } else {
+        if (document.activeElement === lastFocusableEl) {
+          (firstFocusableEl as HTMLButtonElement).focus?.();
+          e.preventDefault();
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.body.style.overflowY = "unset";
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen]);
+
+  const closeMenu = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <div>
+      <ContentfulButton
+        showButtonAs="unstyled"
+        buttonClassName="flex"
+        onClick={() => setIsOpen(true)}
+      >
+        <MaterialIcon name="menu" />
+      </ContentfulButton>
+      {isOpen ? (
+        <div className="fixed bottom-0 left-0 right-0 top-0 z-[90] h-full w-full bg-scrim-bg-modal"></div>
+      ) : null}
+
+      <div
+        className={cx(
+          "fixed bottom-0 right-0 top-0",
+          "z-[100] h-full bg-bg px-0 py-4",
+          "transition-all duration-300 ease-in-out",
+          "block",
+          isOpen ? "right-0" : "-right-96"
+        )}
+        id="mobile-menu-overlay"
+      >
+        <div id="drawer-items" className="flex h-full flex-col gap-3">
+          <div className="flex items-center justify-between px-4">
+            <div>
+              <CallButton
+                className="border-none"
+                href={props.invocaPhoneNumberLink}
+                onClick={props.onCallClickMobile}
+              >
+                {props.invocaPhoneNumberDisplayText}
+              </CallButton>
+            </div>
+            <div>
+              <ContentfulButton
+                showButtonAs="unstyled"
+                buttonClassName="focus-item flex"
+                onClick={closeMenu}
+              >
+                <MaterialIcon name="close" />
+              </ContentfulButton>
+            </div>
+          </div>
+          <MobileSearchInput
+            closeMenu={closeMenu}
+            isMenuOpen={isOpen}
+            searchBarIconURL={
+              typeof props.searchBarIcon === "string"
+                ? props.searchBarIcon
+                : props.searchBarIcon?.url || ""
+            }
+            onSearch={props.onSearch || (() => {})}
+          />
+          <div
+            className="flex-grow overflow-y-auto"
+            onClick={event => {
+              // Close the drawer when a link (anchor) is clicked.
+              // Group-toggle buttons render as <button> and won't match,
+              // so they continue to expand/collapse normally.
+              // Required for Pages Router where MobileMenu persists across
+              // client-side navigations and its local `isOpen` state would
+              // otherwise stay true on the new route.
+              const target = event.target as HTMLElement | null;
+              if (target?.closest("a")) {
+                closeMenu();
+              }
+            }}
+          >
+            <ul className="mt-2 flex flex-col gap-2">
+              {[
+                ...(primaryNavigationLinks || []),
+                ...(supportNavigationLinks || []),
+                ...(accountNavigationLinks || []),
+              ].map((links, index) => (
+                <li key={`main-menu-items-${index}`}>
+                  <MobileLinkGroups link={links} />
+                </li>
+              ))}
+            </ul>
+
+            <ul className="mt-2 flex gap-5 bg-bg-fill-info px-4">
+              {utilityNavigationLinks?.map((link, index) => {
+                return (
+                  <li key={`utility-menu-items-${index}`}>
+                    <ContentfulButton
+                      key={`utility-submenu-link-btn-${link.anchorId}`}
+                      {...(Object.fromEntries(
+                        Object.entries(link).filter(([_, v]) => v !== null)
+                      ) as any)}
+                      linkClassName={cx(
+                        "footnote flex items-center w-full h-11 text-text-link",
+                        typeof props.utilityNavActiveIndex !== "number"
+                          ? index === 1 && "label4"
+                          : props.utilityNavActiveIndex === index && "label4"
+                      )}
+                      linkVariant="unstyled"
+                    />
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const MobileSearchInput = (props: {
+  closeMenu: () => void;
+  onSearch: (query: string) => void;
+  isMenuOpen: boolean;
+  searchBarIconURL: string;
+}) => {
+  const { closeMenu, onSearch, isMenuOpen, searchBarIconURL } = props;
+  const [searchValue, setSearchValue] = React.useState("");
+  const searchInputRef = React.useRef<HTMLInputElement>(null);
+
+  const redirectToSearchResults = (e: FormEvent<HTMLFormElement> | any) => {
+    closeMenu();
+    e.preventDefault();
+    onSearch(searchValue);
+  };
+
+  React.useEffect(() => {
+    if (!isMenuOpen) {
+      setSearchValue("");
+    }
+  }, [isMenuOpen]);
+
+  return (
+    <form
+      name="searchForm"
+      className="flex border-b border-t transition-colors focus-within:border-border-focus"
+      onSubmit={redirectToSearchResults}
+    >
+      <NextImage
+        src={searchBarIconURL}
+        width={32}
+        height={32}
+        alt="Search icon"
+        role="button"
+        className="ml-2"
+        onClick={redirectToSearchResults}
+      />
+      <div className="flex-grow">
+        <Input
+          ref={searchInputRef}
+          className={"body3 h-[34px] rounded-none px-3 text-text"}
+          name="search"
+          placeholder="Search..."
+          value={searchValue}
+          onChange={e => setSearchValue(e.target.value)}
+          autoComplete="off"
+          containerClassName="h-[46px] px-4 pl-0 rounded-none flex-grow border-none"
+        />
+      </div>
+    </form>
+  );
+};
+
+const DesktopSearchInput = (props: {
+  searchBarIconURL: string;
+  onSearch: (query: string) => void;
+}) => {
+  const { searchBarIconURL, onSearch } = props;
+  const [searchValue, setSearchValue] = React.useState("");
+  const searchInputRef = React.useRef<HTMLInputElement>(null);
+
+  const redirectToSearchResults = (e: FormEvent<HTMLFormElement> | any) => {
+    e.preventDefault();
+    onSearch(searchValue);
+  };
+
+  return (
+    <form
+      name="searchForm"
+      className="flex h-9 w-60 rounded-input-xl border px-1 transition-colors focus-within:border-border-focus"
+      onSubmit={redirectToSearchResults}
+    >
+      <NextImage
+        src={searchBarIconURL}
+        width={32}
+        height={32}
+        alt="Search icon"
+        role="button"
+        onClick={redirectToSearchResults}
+      />
+      <Input
+        ref={searchInputRef}
+        className={"body3 rounded-full px-3 text-text"}
+        name="search"
+        placeholder="Search..."
+        value={searchValue}
+        onChange={e => setSearchValue(e.target.value)}
+        autoComplete="off"
+        containerClassName="px-0 h-full border-none rounded-full"
+      />
+    </form>
+  );
+};