@ably/ui 15.6.0-dev.bdcefb0 → 15.6.0-dev.eb9980fc

package/core/Header.js

@@ -1,2 +1,2 @@
-import React,{useState,useEffect,useRef,useMemo}from"react";import Icon from"./Icon";import cn from"./utils/cn";import Logo from"./Logo";import{componentMaxHeight,HEADER_BOTTOM_MARGIN,HEADER_HEIGHT}from"./utils/heights";import{HeaderLinks}from"./Header/HeaderLinks";import throttle from"lodash.throttle";const FLEXIBLE_DESKTOP_CLASSES="hidden md:flex flex-1 items-center h-full";const MAX_MOBILE_MENU_WIDTH="560px";const Header=({searchBar,searchButton,logoHref,headerLinks,nav,mobileNav,sessionState,themedScrollpoints=[],searchButtonVisibility="all"})=>{const[showMenu,setShowMenu]=useState(false);const[fadingOut,setFadingOut]=useState(false);const[scrollpointClasses,setScrollpointClasses]=useState("");const menuRef=useRef(null);const closeMenu=()=>{setFadingOut(true);setTimeout(()=>{setShowMenu(false);setFadingOut(false)},150)};useEffect(()=>{const handleResize=()=>{if(window.innerWidth>=1040){setShowMenu(false)}};window.addEventListener("resize",handleResize);return()=>window.removeEventListener("resize",handleResize)},[]);useEffect(()=>{if(showMenu){document.body.classList.add("overflow-hidden")}else{document.body.classList.remove("overflow-hidden")}return()=>{document.body.classList.remove("overflow-hidden")}},[showMenu]);useEffect(()=>{const handleScroll=()=>{for(const scrollpoint of themedScrollpoints){const element=document.getElementById(scrollpoint.id);if(element){const rect=element.getBoundingClientRect();if(rect.top<=HEADER_HEIGHT&&rect.bottom>=HEADER_HEIGHT){setScrollpointClasses(scrollpoint.className);return}}}};const throttledHandleScroll=throttle(handleScroll,150);handleScroll();window.addEventListener("scroll",throttledHandleScroll);return()=>window.removeEventListener("scroll",throttledHandleScroll)},[themedScrollpoints]);const wrappedSearchButton=useMemo(()=>searchButton?React.createElement("div",{className:"text-neutral-1300 dark:text-neutral-000 flex items-center p-6"},searchButton):null,[searchButton]);return React.createElement(React.Fragment,null,React.createElement("header",{role:"banner",className:cn("fixed top-0 left-0 w-full z-10 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-colors px-24 md:px-64",scrollpointClasses),style:{height:HEADER_HEIGHT}},React.createElement("div",{className:"flex items-center h-full"},React.createElement("nav",{className:"flex flex-1 h-full items-center"},["light","dark"].map(theme=>React.createElement(Logo,{key:theme,href:logoHref,theme:theme,additionalLinkAttrs:{className:cn("h-full focus-base rounded mr-32 w-[108px]",{"flex dark:hidden":theme==="light","hidden dark:flex":theme==="dark"})}})),React.createElement("div",{className:FLEXIBLE_DESKTOP_CLASSES},nav)),React.createElement("div",{className:"flex md:hidden flex-1 items-center justify-end gap-24 h-full"},searchButtonVisibility!=="desktop"?wrappedSearchButton:null,React.createElement("button",{className:"cursor-pointer focus-base rounded flex items-center",onClick:()=>setShowMenu(!showMenu),"aria-expanded":showMenu,"aria-controls":"mobile-menu","aria-label":"Toggle menu"},React.createElement(Icon,{name:showMenu?"icon-gui-x-mark-outline":"icon-gui-bars-3-outline",additionalCSS:"text-neutral-1300 dark:text-neutral-000",size:"1.5rem"}))),searchBar?React.createElement("div",{className:cn(FLEXIBLE_DESKTOP_CLASSES,"justify-center")},searchBar):null,React.createElement(HeaderLinks,{className:FLEXIBLE_DESKTOP_CLASSES,headerLinks:headerLinks,sessionState:sessionState,searchButton:wrappedSearchButton,searchButtonVisibility:searchButtonVisibility}))),showMenu?React.createElement(React.Fragment,null,React.createElement("div",{className:cn("fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut}),onClick:closeMenu,onKeyDown:e=>e.key==="Escape"&&closeMenu(),role:"presentation"}),React.createElement("div",{id:"mobile-menu",className:"md:hidden fixed flex flex-col top-[76px] overflow-y-hidden mx-12 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-20",style:{maxWidth:MAX_MOBILE_MENU_WIDTH,maxHeight:componentMaxHeight(HEADER_HEIGHT,HEADER_BOTTOM_MARGIN)},ref:menuRef,role:"navigation"},mobileNav,React.createElement(HeaderLinks,{headerLinks:headerLinks,sessionState:sessionState}))):null)};export default Header;
+import React,{useState,useEffect,useRef,useMemo}from"react";import Icon from"./Icon";import cn from"./utils/cn";import Logo from"./Logo";import{componentMaxHeight,HEADER_BOTTOM_MARGIN,HEADER_HEIGHT}from"./utils/heights";import{HeaderLinks}from"./Header/HeaderLinks";import throttle from"lodash.throttle";import{COLLAPSE_TRIGGER_DISTANCE}from"./Notice/component";const FLEXIBLE_DESKTOP_CLASSES="hidden md:flex flex-1 items-center h-full";const MAX_MOBILE_MENU_WIDTH="560px";const Header=({headerClassName,searchBar,searchButton,logoHref,headerLinks,nav,mobileNav,sessionState,themedScrollpoints=[],searchButtonVisibility="all"})=>{const[showMenu,setShowMenu]=useState(false);const[fadingOut,setFadingOut]=useState(false);const[scrollpointClasses,setScrollpointClasses]=useState("");const[bannerVisible,setBannerVisible]=useState(true);const menuRef=useRef(null);const closeMenu=()=>{setFadingOut(true);setTimeout(()=>{setShowMenu(false);setFadingOut(false)},150)};useEffect(()=>{const handleResize=()=>{if(window.innerWidth>=1040){setShowMenu(false)}};window.addEventListener("resize",handleResize);return()=>window.removeEventListener("resize",handleResize)},[]);useEffect(()=>{if(showMenu){document.body.classList.add("overflow-hidden")}else{document.body.classList.remove("overflow-hidden")}return()=>{document.body.classList.remove("overflow-hidden")}},[showMenu]);useEffect(()=>{const handleScroll=()=>{for(const scrollpoint of themedScrollpoints){const element=document.getElementById(scrollpoint.id);if(element){const rect=element.getBoundingClientRect();if(rect.top<=HEADER_HEIGHT&&rect.bottom>=HEADER_HEIGHT){setScrollpointClasses(scrollpoint.className);return}}}if(window.scrollY>COLLAPSE_TRIGGER_DISTANCE){setBannerVisible(false)}else{setBannerVisible(true)}};const throttledHandleScroll=throttle(handleScroll,150);handleScroll();window.addEventListener("scroll",throttledHandleScroll);return()=>window.removeEventListener("scroll",throttledHandleScroll)},[themedScrollpoints]);const wrappedSearchButton=useMemo(()=>searchButton?React.createElement("div",{className:"text-neutral-1300 dark:text-neutral-000 flex items-center p-6"},searchButton):null,[searchButton]);return React.createElement(React.Fragment,null,React.createElement("header",{role:"banner",className:cn("fixed left-0 w-full z-10 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-colors px-24 md:px-64",scrollpointClasses,{"md:top-0 transition-transform duration-300 ease-in-out":!bannerVisible}),style:{height:HEADER_HEIGHT}},React.createElement("div",{className:cn("flex items-center h-full",headerClassName)},React.createElement("nav",{className:"flex flex-1 h-full items-center"},["light","dark"].map(theme=>React.createElement(Logo,{key:theme,href:logoHref,theme:theme,additionalLinkAttrs:{className:cn("h-full focus-base rounded mr-32 w-[108px]",{"flex dark:hidden":theme==="light","hidden dark:flex":theme==="dark"})}})),React.createElement("div",{className:FLEXIBLE_DESKTOP_CLASSES},nav)),React.createElement("div",{className:"flex md:hidden flex-1 items-center justify-end gap-24 h-full"},searchButtonVisibility!=="desktop"?wrappedSearchButton:null,React.createElement("button",{className:"cursor-pointer focus-base rounded flex items-center",onClick:()=>setShowMenu(!showMenu),"aria-expanded":showMenu,"aria-controls":"mobile-menu","aria-label":"Toggle menu"},React.createElement(Icon,{name:showMenu?"icon-gui-x-mark-outline":"icon-gui-bars-3-outline",additionalCSS:"text-neutral-1300 dark:text-neutral-000",size:"1.5rem"}))),searchBar?React.createElement("div",{className:cn(FLEXIBLE_DESKTOP_CLASSES,"justify-center")},searchBar):null,React.createElement(HeaderLinks,{className:FLEXIBLE_DESKTOP_CLASSES,headerLinks:headerLinks,sessionState:sessionState,searchButton:wrappedSearchButton,searchButtonVisibility:searchButtonVisibility}))),showMenu?React.createElement(React.Fragment,null,React.createElement("div",{className:cn("fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut}),onClick:closeMenu,onKeyDown:e=>e.key==="Escape"&&closeMenu(),role:"presentation"}),React.createElement("div",{id:"mobile-menu",className:"md:hidden fixed flex flex-col top-[76px] overflow-y-hidden mx-12 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-20",style:{maxWidth:MAX_MOBILE_MENU_WIDTH,maxHeight:componentMaxHeight(HEADER_HEIGHT,HEADER_BOTTOM_MARGIN)},ref:menuRef,role:"navigation"},mobileNav,React.createElement(HeaderLinks,{headerLinks:headerLinks,sessionState:sessionState}))):null)};export default Header;
 //# sourceMappingURL=Header.js.map

package/core/Header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Header.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, ReactNode, useMemo } from \"react\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport Logo from \"./Logo\";\nimport {\n  componentMaxHeight,\n  HEADER_BOTTOM_MARGIN,\n  HEADER_HEIGHT,\n} from \"./utils/heights\";\nimport { HeaderLinks } from \"./Header/HeaderLinks\";\nimport throttle from \"lodash.throttle\";\nimport { Theme } from \"./styles/colors/types\";\n\nexport type ThemedScrollpoint = {\n  id: string;\n  className: string;\n};\n\n/**\n * Represents the state of the user session in the header.\n */\nexport type HeaderSessionState = {\n  /**\n   * Indicates if the user is signed in.\n   */\n  signedIn: boolean;\n\n  /**\n   * Information required to log out the user.\n   */\n  logOut: {\n    /**\n     * Token used for logging out.\n     */\n    token: string;\n\n    /**\n     * URL to log out the user.\n     */\n    href: string;\n  };\n\n  /**\n   * Name of the user's account.\n   */\n  accountName: string;\n};\n\n/**\n * Props for the Header component.\n */\nexport type HeaderProps = {\n  /**\n   * Optional search bar element.\n   */\n  searchBar?: ReactNode;\n\n  /**\n   * Optional search button element.\n   */\n  searchButton?: ReactNode;\n\n  /**\n   * URL for the logo link.\n   */\n  logoHref?: string;\n\n  /**\n   * Array of header links.\n   */\n  headerLinks?: {\n    /**\n     * URL for the link.\n     */\n    href: string;\n\n    /**\n     * Label for the link.\n     */\n    label: string;\n\n    /**\n     * Indicates if the link should open in a new tab.\n     */\n    external?: boolean;\n  }[];\n\n  /**\n   * Optional desktop navigation element.\n   */\n  nav?: ReactNode;\n\n  /**\n   * Optional mobile navigation element.\n   */\n  mobileNav?: ReactNode;\n\n  /**\n   * State of the user session.\n   */\n  sessionState?: HeaderSessionState;\n\n  /**\n   * Array of themed scrollpoints. The header will change its appearance based on the scrollpoint in view.\n   */\n  themedScrollpoints?: ThemedScrollpoint[];\n\n  /**\n   * Visibility setting for the search button.\n   * - \"all\": Visible on all devices.\n   * - \"desktop\": Visible only on desktop devices.\n   * - \"mobile\": Visible only on mobile devices.\n   */\n  searchButtonVisibility?: \"all\" | \"desktop\" | \"mobile\";\n};\n\nconst FLEXIBLE_DESKTOP_CLASSES = \"hidden md:flex flex-1 items-center h-full\";\n\n/**\n * Maximum width before the menu expanded into full width\n */\nconst MAX_MOBILE_MENU_WIDTH = \"560px\";\n\nconst Header: React.FC<HeaderProps> = ({\n  searchBar,\n  searchButton,\n  logoHref,\n  headerLinks,\n  nav,\n  mobileNav,\n  sessionState,\n  themedScrollpoints = [],\n  searchButtonVisibility = \"all\",\n}) => {\n  const [showMenu, setShowMenu] = useState(false);\n  const [fadingOut, setFadingOut] = useState(false);\n  const [scrollpointClasses, setScrollpointClasses] = useState<string>(\"\");\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  const closeMenu = () => {\n    setFadingOut(true);\n\n    setTimeout(() => {\n      setShowMenu(false);\n      setFadingOut(false);\n    }, 150);\n  };\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (window.innerWidth >= 1040) {\n        setShowMenu(false);\n      }\n    };\n\n    window.addEventListener(\"resize\", handleResize);\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []);\n\n  useEffect(() => {\n    if (showMenu) {\n      document.body.classList.add(\"overflow-hidden\");\n    } else {\n      document.body.classList.remove(\"overflow-hidden\");\n    }\n\n    // Cleanup on unmount\n    return () => {\n      document.body.classList.remove(\"overflow-hidden\");\n    };\n  }, [showMenu]);\n\n  useEffect(() => {\n    const handleScroll = () => {\n      for (const scrollpoint of themedScrollpoints) {\n        const element = document.getElementById(scrollpoint.id);\n        if (element) {\n          const rect = element.getBoundingClientRect();\n          if (rect.top <= HEADER_HEIGHT && rect.bottom >= HEADER_HEIGHT) {\n            setScrollpointClasses(scrollpoint.className);\n            return;\n          }\n        }\n      }\n    };\n\n    const throttledHandleScroll = throttle(handleScroll, 150);\n\n    handleScroll();\n\n    window.addEventListener(\"scroll\", throttledHandleScroll);\n    return () => window.removeEventListener(\"scroll\", throttledHandleScroll);\n  }, [themedScrollpoints]);\n\n  const wrappedSearchButton = useMemo(\n    () =>\n      searchButton ? (\n        <div className=\"text-neutral-1300 dark:text-neutral-000 flex items-center p-6\">\n          {searchButton}\n        </div>\n      ) : null,\n    [searchButton],\n  );\n\n  return (\n    <>\n      <header\n        role=\"banner\"\n        className={cn(\n          \"fixed top-0 left-0 w-full z-10 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-colors px-24 md:px-64\",\n          scrollpointClasses,\n        )}\n        style={{ height: HEADER_HEIGHT }}\n      >\n        <div className=\"flex items-center h-full\">\n          <nav className=\"flex flex-1 h-full items-center\">\n            {([\"light\", \"dark\"] as Theme[]).map((theme) => (\n              <Logo\n                key={theme}\n                href={logoHref}\n                theme={theme}\n                additionalLinkAttrs={{\n                  className: cn(\"h-full focus-base rounded mr-32 w-[108px]\", {\n                    \"flex dark:hidden\": theme === \"light\",\n                    \"hidden dark:flex\": theme === \"dark\",\n                  }),\n                }}\n              />\n            ))}\n            <div className={FLEXIBLE_DESKTOP_CLASSES}>{nav}</div>\n          </nav>\n          <div className=\"flex md:hidden flex-1 items-center justify-end gap-24 h-full\">\n            {searchButtonVisibility !== \"desktop\" ? wrappedSearchButton : null}\n            <button\n              className=\"cursor-pointer focus-base rounded flex items-center\"\n              onClick={() => setShowMenu(!showMenu)}\n              aria-expanded={showMenu}\n              aria-controls=\"mobile-menu\"\n              aria-label=\"Toggle menu\"\n            >\n              <Icon\n                name={\n                  showMenu\n                    ? \"icon-gui-x-mark-outline\"\n                    : \"icon-gui-bars-3-outline\"\n                }\n                additionalCSS=\"text-neutral-1300 dark:text-neutral-000\"\n                size=\"1.5rem\"\n              />\n            </button>\n          </div>\n          {searchBar ? (\n            <div className={cn(FLEXIBLE_DESKTOP_CLASSES, \"justify-center\")}>\n              {searchBar}\n            </div>\n          ) : null}\n          <HeaderLinks\n            className={FLEXIBLE_DESKTOP_CLASSES}\n            headerLinks={headerLinks}\n            sessionState={sessionState}\n            searchButton={wrappedSearchButton}\n            searchButtonVisibility={searchButtonVisibility}\n          />\n        </div>\n      </header>\n      {showMenu ? (\n        <>\n          <div\n            className={cn(\n              \"fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300\",\n              {\n                \"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]\":\n                  !fadingOut,\n                \"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]\":\n                  fadingOut,\n              },\n            )}\n            onClick={closeMenu}\n            onKeyDown={(e) => e.key === \"Escape\" && closeMenu()}\n            role=\"presentation\"\n          />\n          <div\n            id=\"mobile-menu\"\n            className=\"md:hidden fixed flex flex-col top-[76px] overflow-y-hidden mx-12 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-20\"\n            style={{\n              maxWidth: MAX_MOBILE_MENU_WIDTH,\n              maxHeight: componentMaxHeight(\n                HEADER_HEIGHT,\n                HEADER_BOTTOM_MARGIN,\n              ),\n            }}\n            ref={menuRef}\n            role=\"navigation\"\n          >\n            {mobileNav}\n            <HeaderLinks\n              headerLinks={headerLinks}\n              sessionState={sessionState}\n            />\n          </div>\n        </>\n      ) : null}\n    </>\n  );\n};\n\nexport default Header;\n"],"names":["React","useState","useEffect","useRef","useMemo","Icon","cn","Logo","componentMaxHeight","HEADER_BOTTOM_MARGIN","HEADER_HEIGHT","HeaderLinks","throttle","FLEXIBLE_DESKTOP_CLASSES","MAX_MOBILE_MENU_WIDTH","Header","searchBar","searchButton","logoHref","headerLinks","nav","mobileNav","sessionState","themedScrollpoints","searchButtonVisibility","showMenu","setShowMenu","fadingOut","setFadingOut","scrollpointClasses","setScrollpointClasses","menuRef","closeMenu","setTimeout","handleResize","window","innerWidth","addEventListener","removeEventListener","document","body","classList","add","remove","handleScroll","scrollpoint","element","getElementById","id","rect","getBoundingClientRect","top","bottom","className","throttledHandleScroll","wrappedSearchButton","div","header","role","style","height","map","theme","key","href","additionalLinkAttrs","button","onClick","aria-expanded","aria-controls","aria-label","name","additionalCSS","size","onKeyDown","e","maxWidth","maxHeight","ref"],"mappings":"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"}
+{"version":3,"sources":["../../src/core/Header.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, ReactNode, useMemo } from \"react\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport Logo from \"./Logo\";\nimport {\n  componentMaxHeight,\n  HEADER_BOTTOM_MARGIN,\n  HEADER_HEIGHT,\n} from \"./utils/heights\";\nimport { HeaderLinks } from \"./Header/HeaderLinks\";\nimport throttle from \"lodash.throttle\";\nimport { Theme } from \"./styles/colors/types\";\nimport { COLLAPSE_TRIGGER_DISTANCE } from \"./Notice/component\";\n\nexport type ThemedScrollpoint = {\n  id: string;\n  className: string;\n};\n\n/**\n * Represents the state of the user session in the header.\n */\nexport type HeaderSessionState = {\n  /**\n   * Indicates if the user is signed in.\n   */\n  signedIn: boolean;\n\n  /**\n   * Information required to log out the user.\n   */\n  logOut: {\n    /**\n     * Token used for logging out.\n     */\n    token: string;\n\n    /**\n     * URL to log out the user.\n     */\n    href: string;\n  };\n\n  /**\n   * Name of the user's account.\n   */\n  accountName: string;\n};\n\n/**\n * Props for the Header component.\n */\nexport type HeaderProps = {\n  headerClassName?: string;\n  /**\n   * Optional search bar element.\n   */\n  searchBar?: ReactNode;\n\n  /**\n   * Optional search button element.\n   */\n  searchButton?: ReactNode;\n\n  /**\n   * URL for the logo link.\n   */\n  logoHref?: string;\n\n  /**\n   * Array of header links.\n   */\n  headerLinks?: {\n    /**\n     * URL for the link.\n     */\n    href: string;\n\n    /**\n     * Label for the link.\n     */\n    label: string;\n\n    /**\n     * Indicates if the link should open in a new tab.\n     */\n    external?: boolean;\n  }[];\n\n  /**\n   * Optional desktop navigation element.\n   */\n  nav?: ReactNode;\n\n  /**\n   * Optional mobile navigation element.\n   */\n  mobileNav?: ReactNode;\n\n  /**\n   * State of the user session.\n   */\n  sessionState?: HeaderSessionState;\n\n  /**\n   * Array of themed scrollpoints. The header will change its appearance based on the scrollpoint in view.\n   */\n  themedScrollpoints?: ThemedScrollpoint[];\n\n  /**\n   * Visibility setting for the search button.\n   * - \"all\": Visible on all devices.\n   * - \"desktop\": Visible only on desktop devices.\n   * - \"mobile\": Visible only on mobile devices.\n   */\n  searchButtonVisibility?: \"all\" | \"desktop\" | \"mobile\";\n};\n\nconst FLEXIBLE_DESKTOP_CLASSES = \"hidden md:flex flex-1 items-center h-full\";\n\n/**\n * Maximum width before the menu expanded into full width\n */\nconst MAX_MOBILE_MENU_WIDTH = \"560px\";\n\nconst Header: React.FC<HeaderProps> = ({\n  headerClassName,\n  searchBar,\n  searchButton,\n  logoHref,\n  headerLinks,\n  nav,\n  mobileNav,\n  sessionState,\n  themedScrollpoints = [],\n  searchButtonVisibility = \"all\",\n}) => {\n  const [showMenu, setShowMenu] = useState(false);\n  const [fadingOut, setFadingOut] = useState(false);\n  const [scrollpointClasses, setScrollpointClasses] = useState<string>(\"\");\n  const [bannerVisible, setBannerVisible] = useState(true);\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  const closeMenu = () => {\n    setFadingOut(true);\n\n    setTimeout(() => {\n      setShowMenu(false);\n      setFadingOut(false);\n    }, 150);\n  };\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (window.innerWidth >= 1040) {\n        setShowMenu(false);\n      }\n    };\n    window.addEventListener(\"resize\", handleResize);\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []);\n\n  useEffect(() => {\n    if (showMenu) {\n      document.body.classList.add(\"overflow-hidden\");\n    } else {\n      document.body.classList.remove(\"overflow-hidden\");\n    }\n\n    // Cleanup on unmount\n    return () => {\n      document.body.classList.remove(\"overflow-hidden\");\n    };\n  }, [showMenu]);\n\n  useEffect(() => {\n    const handleScroll = () => {\n      for (const scrollpoint of themedScrollpoints) {\n        const element = document.getElementById(scrollpoint.id);\n        if (element) {\n          const rect = element.getBoundingClientRect();\n          if (rect.top <= HEADER_HEIGHT && rect.bottom >= HEADER_HEIGHT) {\n            setScrollpointClasses(scrollpoint.className);\n            return;\n          }\n        }\n      }\n      if (window.scrollY > COLLAPSE_TRIGGER_DISTANCE) {\n        setBannerVisible(false);\n      } else {\n        setBannerVisible(true);\n      }\n    };\n\n    const throttledHandleScroll = throttle(handleScroll, 150);\n\n    handleScroll();\n\n    window.addEventListener(\"scroll\", throttledHandleScroll);\n    return () => window.removeEventListener(\"scroll\", throttledHandleScroll);\n  }, [themedScrollpoints]);\n\n  const wrappedSearchButton = useMemo(\n    () =>\n      searchButton ? (\n        <div className=\"text-neutral-1300 dark:text-neutral-000 flex items-center p-6\">\n          {searchButton}\n        </div>\n      ) : null,\n    [searchButton],\n  );\n\n  return (\n    <>\n      <header\n        role=\"banner\"\n        className={cn(\n          \"fixed left-0 w-full z-10 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-colors px-24 md:px-64\",\n          scrollpointClasses,\n          {\n            \"md:top-0 transition-transform duration-300 ease-in-out\":\n              !bannerVisible,\n          },\n        )}\n        style={{ height: HEADER_HEIGHT }}\n      >\n        <div className={cn(\"flex items-center h-full\", headerClassName)}>\n          <nav className=\"flex flex-1 h-full items-center\">\n            {([\"light\", \"dark\"] as Theme[]).map((theme) => (\n              <Logo\n                key={theme}\n                href={logoHref}\n                theme={theme}\n                additionalLinkAttrs={{\n                  className: cn(\"h-full focus-base rounded mr-32 w-[108px]\", {\n                    \"flex dark:hidden\": theme === \"light\",\n                    \"hidden dark:flex\": theme === \"dark\",\n                  }),\n                }}\n              />\n            ))}\n            <div className={FLEXIBLE_DESKTOP_CLASSES}>{nav}</div>\n          </nav>\n          <div className=\"flex md:hidden flex-1 items-center justify-end gap-24 h-full\">\n            {searchButtonVisibility !== \"desktop\" ? wrappedSearchButton : null}\n            <button\n              className=\"cursor-pointer focus-base rounded flex items-center\"\n              onClick={() => setShowMenu(!showMenu)}\n              aria-expanded={showMenu}\n              aria-controls=\"mobile-menu\"\n              aria-label=\"Toggle menu\"\n            >\n              <Icon\n                name={\n                  showMenu\n                    ? \"icon-gui-x-mark-outline\"\n                    : \"icon-gui-bars-3-outline\"\n                }\n                additionalCSS=\"text-neutral-1300 dark:text-neutral-000\"\n                size=\"1.5rem\"\n              />\n            </button>\n          </div>\n          {searchBar ? (\n            <div className={cn(FLEXIBLE_DESKTOP_CLASSES, \"justify-center\")}>\n              {searchBar}\n            </div>\n          ) : null}\n          <HeaderLinks\n            className={FLEXIBLE_DESKTOP_CLASSES}\n            headerLinks={headerLinks}\n            sessionState={sessionState}\n            searchButton={wrappedSearchButton}\n            searchButtonVisibility={searchButtonVisibility}\n          />\n        </div>\n      </header>\n      {showMenu ? (\n        <>\n          <div\n            className={cn(\n              \"fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300\",\n              {\n                \"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]\":\n                  !fadingOut,\n                \"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]\":\n                  fadingOut,\n              },\n            )}\n            onClick={closeMenu}\n            onKeyDown={(e) => e.key === \"Escape\" && closeMenu()}\n            role=\"presentation\"\n          />\n          <div\n            id=\"mobile-menu\"\n            className=\"md:hidden fixed flex flex-col top-[76px] overflow-y-hidden mx-12 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-20\"\n            style={{\n              maxWidth: MAX_MOBILE_MENU_WIDTH,\n              maxHeight: componentMaxHeight(\n                HEADER_HEIGHT,\n                HEADER_BOTTOM_MARGIN,\n              ),\n            }}\n            ref={menuRef}\n            role=\"navigation\"\n          >\n            {mobileNav}\n            <HeaderLinks\n              headerLinks={headerLinks}\n              sessionState={sessionState}\n            />\n          </div>\n        </>\n      ) : null}\n    </>\n  );\n};\n\nexport default Header;\n"],"names":["React","useState","useEffect","useRef","useMemo","Icon","cn","Logo","componentMaxHeight","HEADER_BOTTOM_MARGIN","HEADER_HEIGHT","HeaderLinks","throttle","COLLAPSE_TRIGGER_DISTANCE","FLEXIBLE_DESKTOP_CLASSES","MAX_MOBILE_MENU_WIDTH","Header","headerClassName","searchBar","searchButton","logoHref","headerLinks","nav","mobileNav","sessionState","themedScrollpoints","searchButtonVisibility","showMenu","setShowMenu","fadingOut","setFadingOut","scrollpointClasses","setScrollpointClasses","bannerVisible","setBannerVisible","menuRef","closeMenu","setTimeout","handleResize","window","innerWidth","addEventListener","removeEventListener","document","body","classList","add","remove","handleScroll","scrollpoint","element","getElementById","id","rect","getBoundingClientRect","top","bottom","className","scrollY","throttledHandleScroll","wrappedSearchButton","div","header","role","style","height","map","theme","key","href","additionalLinkAttrs","button","onClick","aria-expanded","aria-controls","aria-label","name","additionalCSS","size","onKeyDown","e","maxWidth","maxHeight","ref"],"mappings":"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"}

package/core/Meganav/Meganav.js

@@ -1,2 +1,2 @@
-import React from"react";import Header from"../Header";import Icon from"../Icon";import Flyout from"../Flyout";import{menuItemsForHeader}from"./data";import{MeganavMobile}from"./MeganavMobile";const Meganav=({sessionState,searchDataId})=>{const mobileNavItems=menuItemsForHeader.filter(item=>!item.isHiddenMobile).map(({name,link,content})=>({name,link,content}));return React.createElement(Header,{nav:React.createElement(Flyout,{menuItems:menuItemsForHeader,className:"justify-left z-40",flyOutClassName:"flex justify-left",viewPortClassName:"ui-shadow-lg-medium border border-neutral-000 dark:border-neutral-1300 rounded-2xl mt-8 ml-64 bg-neutral-000 dark:bg-neutral-1300",hasAnimation:true}),mobileNav:React.createElement(MeganavMobile,{mobileNavItems:mobileNavItems}),searchButton:React.createElement("button",{type:"button","data-control":"search","data-id":searchDataId,className:"cursor-pointer h-24 w-24 group focus:outline-none","aria-expanded":"false","aria-controls":"panel-search","aria-label":"Ask AI"},React.createElement(Icon,{name:"icon-gui-magnifying-glass-outline",color:"text-neutral-1300",size:"24px"})),headerLinks:[{href:"/contact",label:"Help"}],sessionState:sessionState})};export default Meganav;
+import React from"react";import Header from"../Header";import Icon from"../Icon";import Flyout from"../Flyout";import{menuItemsForHeader}from"./data";import{MeganavMobile}from"./MeganavMobile";import Notice from"../Notice";const Meganav=({sessionState,searchDataId,notice})=>{const mobileNavItems=menuItemsForHeader.filter(item=>!item.isHiddenMobile).map(({name,link,content})=>({name,link,content}));return React.createElement("div",{className:"absolute inset-0 w-full z-50 "},notice&&React.createElement(Notice,{...notice.props,config:notice.config}),React.createElement(Header,{headerClassName:"max-w-screen-xl mx-auto ui-grid-px",nav:React.createElement(Flyout,{menuItems:menuItemsForHeader,className:"justify-left z-40",flyOutClassName:"flex justify-left",viewPortClassName:"ui-shadow-lg-medium border border-neutral-000 dark:border-neutral-1300 rounded-2xl mt-8 ml-128 bg-neutral-000 dark:bg-neutral-1300",hasAnimation:true}),mobileNav:React.createElement(MeganavMobile,{mobileNavItems:mobileNavItems}),searchButton:React.createElement("button",{type:"button","data-control":"search","data-id":searchDataId,className:"cursor-pointer h-24 w-24 group focus:outline-none","aria-expanded":"false","aria-controls":"panel-search","aria-label":"Ask AI"},React.createElement(Icon,{name:"icon-gui-magnifying-glass-outline",color:"text-neutral-1300",size:"24px"})),headerLinks:[{href:"/contact",label:"Help"}],sessionState:sessionState}))};export default Meganav;
 //# sourceMappingURL=Meganav.js.map

package/core/Meganav/Meganav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/Meganav/Meganav.tsx"],"sourcesContent":["import React from \"react\";\nimport Header, { HeaderSessionState } from \"../Header\";\nimport Icon from \"../Icon\";\nimport Flyout from \"../Flyout\";\nimport { menuItemsForHeader } from \"./data\";\nimport { MeganavMobile } from \"./MeganavMobile\";\n\nexport type MeganavProps = {\n  sessionState: HeaderSessionState;\n  searchDataId: string;\n};\n\nconst Meganav = ({ sessionState, searchDataId }: MeganavProps) => {\n  const mobileNavItems = menuItemsForHeader\n    .filter((item) => !item.isHiddenMobile)\n    .map(({ name, link, content }) => ({ name, link, content }));\n\n  return (\n    <Header\n      nav={\n        <Flyout\n          menuItems={menuItemsForHeader}\n          className=\"justify-left z-40\"\n          flyOutClassName=\"flex justify-left\"\n          viewPortClassName=\"ui-shadow-lg-medium border border-neutral-000 dark:border-neutral-1300 rounded-2xl mt-8 ml-64 bg-neutral-000 dark:bg-neutral-1300\"\n          hasAnimation={true}\n        />\n      }\n      mobileNav={<MeganavMobile mobileNavItems={mobileNavItems} />}\n      searchButton={\n        <button\n          type=\"button\"\n          data-control=\"search\"\n          data-id={searchDataId}\n          className=\"cursor-pointer h-24 w-24 group focus:outline-none\"\n          aria-expanded=\"false\"\n          aria-controls=\"panel-search\"\n          aria-label=\"Ask AI\"\n        >\n          <Icon\n            name=\"icon-gui-magnifying-glass-outline\"\n            color=\"text-neutral-1300\"\n            size=\"24px\"\n          />\n        </button>\n      }\n      headerLinks={[{ href: \"/contact\", label: \"Help\" }]}\n      sessionState={sessionState}\n    />\n  );\n};\n\nexport default Meganav;\n"],"names":["React","Header","Icon","Flyout","menuItemsForHeader","MeganavMobile","Meganav","sessionState","searchDataId","mobileNavItems","filter","item","isHiddenMobile","map","name","link","content","nav","menuItems","className","flyOutClassName","viewPortClassName","hasAnimation","mobileNav","searchButton","button","type","data-control","data-id","aria-expanded","aria-controls","aria-label","color","size","headerLinks","href","label"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,WAAoC,WAAY,AACvD,QAAOC,SAAU,SAAU,AAC3B,QAAOC,WAAY,WAAY,AAC/B,QAASC,kBAAkB,KAAQ,QAAS,AAC5C,QAASC,aAAa,KAAQ,iBAAkB,CAOhD,MAAMC,QAAU,CAAC,CAAEC,YAAY,CAAEC,YAAY,CAAgB,IAC3D,MAAMC,eAAiBL,mBACpBM,MAAM,CAAC,AAACC,MAAS,CAACA,KAAKC,cAAc,EACrCC,GAAG,CAAC,CAAC,CAAEC,IAAI,CAAEC,IAAI,CAAEC,OAAO,CAAE,GAAM,CAAA,CAAEF,KAAMC,KAAMC,OAAQ,CAAA,GAE3D,OACE,oBAACf,QACCgB,IACE,oBAACd,QACCe,UAAWd,mBACXe,UAAU,oBACVC,gBAAgB,oBAChBC,kBAAkB,oIAClBC,aAAc,OAGlBC,UAAW,oBAAClB,eAAcI,eAAgBA,iBAC1Ce,aACE,oBAACC,UACCC,KAAK,SACLC,eAAa,SACbC,UAASpB,aACTW,UAAU,oDACVU,gBAAc,QACdC,gBAAc,eACdC,aAAW,UAEX,oBAAC7B,MACCY,KAAK,oCACLkB,MAAM,oBACNC,KAAK,UAIXC,YAAa,CAAC,CAAEC,KAAM,WAAYC,MAAO,MAAO,EAAE,CAClD7B,aAAcA,cAGpB,CAEA,gBAAeD,OAAQ"}
+{"version":3,"sources":["../../../src/core/Meganav/Meganav.tsx"],"sourcesContent":["import React from \"react\";\nimport Header, { HeaderSessionState } from \"../Header\";\nimport Icon from \"../Icon\";\nimport Flyout from \"../Flyout\";\nimport { menuItemsForHeader } from \"./data\";\nimport { MeganavMobile } from \"./MeganavMobile\";\nimport Notice from \"../Notice\";\nimport { MeganavNoticeProps } from \"../LegacyMeganav\";\n\nexport type MeganavProps = {\n  sessionState: HeaderSessionState;\n  searchDataId: string;\n  notice?: MeganavNoticeProps;\n};\n\nconst Meganav = ({ sessionState, searchDataId, notice }: MeganavProps) => {\n  const mobileNavItems = menuItemsForHeader\n    .filter((item) => !item.isHiddenMobile)\n    .map(({ name, link, content }) => ({ name, link, content }));\n\n  return (\n    <div className=\"absolute inset-0 w-full z-50 \">\n      {notice && <Notice {...notice.props} config={notice.config} />}\n      <Header\n        headerClassName=\"max-w-screen-xl mx-auto ui-grid-px\"\n        nav={\n          <Flyout\n            menuItems={menuItemsForHeader}\n            className=\"justify-left z-40\"\n            flyOutClassName=\"flex justify-left\"\n            viewPortClassName=\"ui-shadow-lg-medium border border-neutral-000 dark:border-neutral-1300 rounded-2xl mt-8 ml-128 bg-neutral-000 dark:bg-neutral-1300\"\n            hasAnimation={true}\n          />\n        }\n        mobileNav={<MeganavMobile mobileNavItems={mobileNavItems} />}\n        searchButton={\n          <button\n            type=\"button\"\n            data-control=\"search\"\n            data-id={searchDataId}\n            className=\"cursor-pointer h-24 w-24 group focus:outline-none\"\n            aria-expanded=\"false\"\n            aria-controls=\"panel-search\"\n            aria-label=\"Ask AI\"\n          >\n            <Icon\n              name=\"icon-gui-magnifying-glass-outline\"\n              color=\"text-neutral-1300\"\n              size=\"24px\"\n            />\n          </button>\n        }\n        headerLinks={[{ href: \"/contact\", label: \"Help\" }]}\n        sessionState={sessionState}\n      />\n    </div>\n  );\n};\n\nexport default Meganav;\n"],"names":["React","Header","Icon","Flyout","menuItemsForHeader","MeganavMobile","Notice","Meganav","sessionState","searchDataId","notice","mobileNavItems","filter","item","isHiddenMobile","map","name","link","content","div","className","props","config","headerClassName","nav","menuItems","flyOutClassName","viewPortClassName","hasAnimation","mobileNav","searchButton","button","type","data-control","data-id","aria-expanded","aria-controls","aria-label","color","size","headerLinks","href","label"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,WAAoC,WAAY,AACvD,QAAOC,SAAU,SAAU,AAC3B,QAAOC,WAAY,WAAY,AAC/B,QAASC,kBAAkB,KAAQ,QAAS,AAC5C,QAASC,aAAa,KAAQ,iBAAkB,AAChD,QAAOC,WAAY,WAAY,CAS/B,MAAMC,QAAU,CAAC,CAAEC,YAAY,CAAEC,YAAY,CAAEC,MAAM,CAAgB,IACnE,MAAMC,eAAiBP,mBACpBQ,MAAM,CAAC,AAACC,MAAS,CAACA,KAAKC,cAAc,EACrCC,GAAG,CAAC,CAAC,CAAEC,IAAI,CAAEC,IAAI,CAAEC,OAAO,CAAE,GAAM,CAAA,CAAEF,KAAMC,KAAMC,OAAQ,CAAA,GAE3D,OACE,oBAACC,OAAIC,UAAU,iCACZV,QAAU,oBAACJ,QAAQ,GAAGI,OAAOW,KAAK,CAAEC,OAAQZ,OAAOY,MAAM,GAC1D,oBAACrB,QACCsB,gBAAgB,qCAChBC,IACE,oBAACrB,QACCsB,UAAWrB,mBACXgB,UAAU,oBACVM,gBAAgB,oBAChBC,kBAAkB,qIAClBC,aAAc,OAGlBC,UAAW,oBAACxB,eAAcM,eAAgBA,iBAC1CmB,aACE,oBAACC,UACCC,KAAK,SACLC,eAAa,SACbC,UAASzB,aACTW,UAAU,oDACVe,gBAAc,QACdC,gBAAc,eACdC,aAAW,UAEX,oBAACnC,MACCc,KAAK,oCACLsB,MAAM,oBACNC,KAAK,UAIXC,YAAa,CAAC,CAAEC,KAAM,WAAYC,MAAO,MAAO,EAAE,CAClDlC,aAAcA,eAItB,CAEA,gBAAeD,OAAQ"}

package/core/Meganav/MeganavPanel.js

@@ -1,2 +1,2 @@
-import React from"react";import cn from"../utils/cn";import Icon from"../Icon";import FeaturedLink from"../FeaturedLink";import{products}from"../ProductTile/data";import ProductTile from"../ProductTile";export const MeganavPanel=({displayProductTile,panelLeft,panelLeftClassName,panelRightHeading,panelRightItems,panelRightBottom})=>{return React.createElement("div",{className:"flex flex-col md:flex-row gap-x-24 bg-neutral-000 dark:bg-neutral-1300"},React.createElement("div",{className:cn("flex-[7] flex-shrink-0 grid-cols-1 xs:grid-cols-2",panelLeftClassName)},displayProductTile?Object.keys(products).map(product=>React.createElement(ProductTile,{name:product,key:product,selected:false,onClick:()=>window.location.href=products[product]?.link,animateIcons:true})):panelLeft&&React.createElement(React.Fragment,null,React.createElement("div",{className:"w-full p-24"},React.createElement("h4",{className:"ui-text-h4 text-neutral-1300 dark:text-neutral-000"},panelLeft.heading),React.createElement("p",{className:"ui-text-p3 text-neutral-800 dark:text-neutral-500 mt-8"},panelLeft.content),React.createElement(FeaturedLink,{url:panelLeft.url,additionalCSS:"text-neutral-1300 dark:text-neutral-000 mt-16 ui-text-p3",iconColor:"text-orange-600"},panelLeft.labelLink)),React.createElement("div",{className:"flex justify-end"},React.createElement("img",{src:panelLeft.image,alt:panelLeft.heading,className:"w-full z-10 rounded-lg"})))),React.createElement("div",{className:"mt-12 md:mt-0 flex-[3] flex-shrink-0 flex flex-col justify-between"},React.createElement("ul",null,panelRightHeading&&React.createElement("p",{className:"ui-text-overline2 text-neutral-700 dark:text-neutral-600 my-12"},"platform"),panelRightItems&&panelRightItems.map(item=>React.createElement("li",{className:cn("list-none py-[10px] md:py-8 my-0 flex gap-x-[10px] hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100",item.isMobile?"md:hidden":"md:flex"),key:item.label},React.createElement(Icon,{name:item.icon,size:"1.25rem",additionalCSS:"text-neutral-1000 dark:text-neutral-300"}),React.createElement("a",{className:"ui-text-menu2 md:ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300",href:item.link},item.label)))),panelRightBottom&&React.createElement("div",{className:"items-end mt-16 md:mt-0"},panelRightBottom)))};
+import React from"react";import cn from"../utils/cn";import Icon from"../Icon";import FeaturedLink from"../FeaturedLink";import{products}from"../ProductTile/data";import ProductTile from"../ProductTile";export const MeganavPanel=({displayProductTile,panelLeft,panelLeftClassName,panelRightHeading,panelRightItems,panelRightBottom})=>{return React.createElement("div",{className:"flex flex-col md:flex-row gap-x-24 bg-neutral-000 dark:bg-neutral-1300"},React.createElement("div",{className:cn("flex-[7] flex-shrink-0 grid-cols-1 xs:grid-cols-2",panelLeftClassName)},displayProductTile?Object.keys(products).map(product=>React.createElement(ProductTile,{name:product,key:product,selected:false,onClick:()=>window.location.href=products[product]?.link,animateIcons:true})):panelLeft&&React.createElement(React.Fragment,null,React.createElement("div",{className:"w-full p-24"},React.createElement("h4",{className:"ui-text-h4 text-neutral-1300 dark:text-neutral-000"},panelLeft.heading),React.createElement("p",{className:"ui-text-p3 text-neutral-800 dark:text-neutral-500 mt-8"},panelLeft.content),React.createElement(FeaturedLink,{url:panelLeft.url,additionalCSS:"text-neutral-1300 dark:text-neutral-000 mt-16 ui-text-p3",iconColor:"text-orange-600"},panelLeft.labelLink)),React.createElement("div",{className:"flex justify-end"},React.createElement("img",{src:panelLeft.image,alt:panelLeft.heading,className:"w-full z-10 rounded-lg"})))),React.createElement("div",{className:"mt-12 md:mt-0 flex-[3] flex-shrink-0 flex flex-col justify-between"},React.createElement("ul",null,panelRightHeading&&React.createElement("p",{className:"ui-text-overline2 text-neutral-700 dark:text-neutral-600 my-12"},"platform"),panelRightItems&&panelRightItems.map(item=>React.createElement("li",{className:cn("list-none py-12 my-0 flex gap-x-[10px] group hover:cursor-pointer",item.isMobile?"md:hidden":"md:flex"),key:item.label},React.createElement(Icon,{name:item.icon,size:"1.25rem",additionalCSS:"text-neutral-1000 dark:text-neutral-300"}),React.createElement("a",{className:"ui-text-menu2 md:ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 group-hover:text-neutral-1300 dark:group-hover:text-neutral-000",href:item.link},item.label)))),panelRightBottom&&React.createElement("div",{className:"items-end mt-16 md:mt-0"},panelRightBottom)))};
 //# sourceMappingURL=MeganavPanel.js.map

package/core/Meganav/MeganavPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/Meganav/MeganavPanel.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\nimport Icon from \"../Icon\";\nimport { FlyoutPanelHighlight, FlyoutPanelList } from \"./data\";\nimport FeaturedLink from \"../FeaturedLink\";\nimport { ProductName, products } from \"../ProductTile/data\";\nimport ProductTile from \"../ProductTile\";\n\nexport const MeganavPanel = ({\n  displayProductTile,\n  panelLeft,\n  panelLeftClassName,\n  panelRightHeading,\n  panelRightItems,\n  panelRightBottom,\n}: {\n  displayProductTile?: boolean;\n  panelLeft?: FlyoutPanelHighlight;\n  panelLeftClassName?: string;\n  panelRightHeading?: string;\n  panelRightItems: FlyoutPanelList[];\n  panelRightBottom?: React.ReactNode;\n}) => {\n  return (\n    <div className=\"flex flex-col md:flex-row gap-x-24 bg-neutral-000 dark:bg-neutral-1300\">\n      <div\n        className={cn(\n          \"flex-[7] flex-shrink-0 grid-cols-1 xs:grid-cols-2\",\n          panelLeftClassName,\n        )}\n      >\n        {displayProductTile\n          ? Object.keys(products).map((product) => (\n              <ProductTile\n                name={product as ProductName}\n                key={product}\n                selected={false}\n                onClick={() =>\n                  (window.location.href = products[product as ProductName]\n                    ?.link as string)\n                }\n                animateIcons={true}\n              />\n            ))\n          : panelLeft && (\n              <>\n                <div className=\"w-full p-24\">\n                  <h4 className=\"ui-text-h4 text-neutral-1300 dark:text-neutral-000\">\n                    {panelLeft.heading}\n                  </h4>\n                  <p className=\"ui-text-p3 text-neutral-800 dark:text-neutral-500 mt-8\">\n                    {panelLeft.content}\n                  </p>\n                  <FeaturedLink\n                    url={panelLeft.url}\n                    additionalCSS=\"text-neutral-1300 dark:text-neutral-000 mt-16 ui-text-p3\"\n                    iconColor=\"text-orange-600\"\n                  >\n                    {panelLeft.labelLink}\n                  </FeaturedLink>\n                </div>\n                <div className=\"flex justify-end\">\n                  <img\n                    src={panelLeft.image}\n                    alt={panelLeft.heading}\n                    className=\"w-full z-10 rounded-lg\"\n                  />\n                </div>\n              </>\n            )}\n      </div>\n      <div className=\"mt-12 md:mt-0 flex-[3] flex-shrink-0 flex flex-col justify-between\">\n        <ul>\n          {panelRightHeading && (\n            <p className=\"ui-text-overline2 text-neutral-700 dark:text-neutral-600 my-12\">\n              platform\n            </p>\n          )}\n\n          {panelRightItems &&\n            panelRightItems.map((item) => (\n              <li\n                className={cn(\n                  \"list-none py-[10px] md:py-8 my-0 flex gap-x-[10px] hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100\",\n                  item.isMobile ? \"md:hidden\" : \"md:flex\",\n                )}\n                key={item.label}\n              >\n                <Icon\n                  name={item.icon}\n                  size=\"1.25rem\"\n                  additionalCSS=\"text-neutral-1000 dark:text-neutral-300\"\n                />\n                <a\n                  className=\"ui-text-menu2 md:ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300\"\n                  href={item.link}\n                >\n                  {item.label}\n                </a>\n              </li>\n            ))}\n        </ul>\n        {panelRightBottom && (\n          <div className=\"items-end mt-16 md:mt-0\">{panelRightBottom}</div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","cn","Icon","FeaturedLink","products","ProductTile","MeganavPanel","displayProductTile","panelLeft","panelLeftClassName","panelRightHeading","panelRightItems","panelRightBottom","div","className","Object","keys","map","product","name","key","selected","onClick","window","location","href","link","animateIcons","h4","heading","p","content","url","additionalCSS","iconColor","labelLink","img","src","image","alt","ul","item","li","isMobile","label","icon","size","a"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,SAAU,SAAU,AAE3B,QAAOC,iBAAkB,iBAAkB,AAC3C,QAAsBC,QAAQ,KAAQ,qBAAsB,AAC5D,QAAOC,gBAAiB,gBAAiB,AAEzC,QAAO,MAAMC,aAAe,CAAC,CAC3BC,kBAAkB,CAClBC,SAAS,CACTC,kBAAkB,CAClBC,iBAAiB,CACjBC,eAAe,CACfC,gBAAgB,CAQjB,IACC,OACE,oBAACC,OAAIC,UAAU,0EACb,oBAACD,OACCC,UAAWb,GACT,oDACAQ,qBAGDF,mBACGQ,OAAOC,IAAI,CAACZ,UAAUa,GAAG,CAAC,AAACC,SACzB,oBAACb,aACCc,KAAMD,QACNE,IAAKF,QACLG,SAAU,MACVC,QAAS,IACNC,OAAOC,QAAQ,CAACC,IAAI,CAAGrB,QAAQ,CAACc,QAAuB,EACpDQ,KAENC,aAAc,QAGlBnB,WACE,wCACE,oBAACK,OAAIC,UAAU,eACb,oBAACc,MAAGd,UAAU,sDACXN,UAAUqB,OAAO,EAEpB,oBAACC,KAAEhB,UAAU,0DACVN,UAAUuB,OAAO,EAEpB,oBAAC5B,cACC6B,IAAKxB,UAAUwB,GAAG,CAClBC,cAAc,2DACdC,UAAU,mBAET1B,UAAU2B,SAAS,GAGxB,oBAACtB,OAAIC,UAAU,oBACb,oBAACsB,OACCC,IAAK7B,UAAU8B,KAAK,CACpBC,IAAK/B,UAAUqB,OAAO,CACtBf,UAAU,8BAMxB,oBAACD,OAAIC,UAAU,sEACb,oBAAC0B,UACE9B,mBACC,oBAACoB,KAAEhB,UAAU,kEAAiE,YAK/EH,iBACCA,gBAAgBM,GAAG,CAAC,AAACwB,MACnB,oBAACC,MACC5B,UAAWb,GACT,uJACAwC,KAAKE,QAAQ,CAAG,YAAc,WAEhCvB,IAAKqB,KAAKG,KAAK,EAEf,oBAAC1C,MACCiB,KAAMsB,KAAKI,IAAI,CACfC,KAAK,UACLb,cAAc,4CAEhB,oBAACc,KACCjC,UAAU,uFACVW,KAAMgB,KAAKf,IAAI,EAEde,KAAKG,KAAK,KAKpBhC,kBACC,oBAACC,OAAIC,UAAU,2BAA2BF,mBAKpD,CAAE"}
+{"version":3,"sources":["../../../src/core/Meganav/MeganavPanel.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\nimport Icon from \"../Icon\";\nimport { FlyoutPanelHighlight, FlyoutPanelList } from \"./data\";\nimport FeaturedLink from \"../FeaturedLink\";\nimport { ProductName, products } from \"../ProductTile/data\";\nimport ProductTile from \"../ProductTile\";\n\nexport const MeganavPanel = ({\n  displayProductTile,\n  panelLeft,\n  panelLeftClassName,\n  panelRightHeading,\n  panelRightItems,\n  panelRightBottom,\n}: {\n  displayProductTile?: boolean;\n  panelLeft?: FlyoutPanelHighlight;\n  panelLeftClassName?: string;\n  panelRightHeading?: string;\n  panelRightItems: FlyoutPanelList[];\n  panelRightBottom?: React.ReactNode;\n}) => {\n  return (\n    <div className=\"flex flex-col md:flex-row gap-x-24 bg-neutral-000 dark:bg-neutral-1300\">\n      <div\n        className={cn(\n          \"flex-[7] flex-shrink-0 grid-cols-1 xs:grid-cols-2\",\n          panelLeftClassName,\n        )}\n      >\n        {displayProductTile\n          ? Object.keys(products).map((product) => (\n              <ProductTile\n                name={product as ProductName}\n                key={product}\n                selected={false}\n                onClick={() =>\n                  (window.location.href = products[product as ProductName]\n                    ?.link as string)\n                }\n                animateIcons={true}\n              />\n            ))\n          : panelLeft && (\n              <>\n                <div className=\"w-full p-24\">\n                  <h4 className=\"ui-text-h4 text-neutral-1300 dark:text-neutral-000\">\n                    {panelLeft.heading}\n                  </h4>\n                  <p className=\"ui-text-p3 text-neutral-800 dark:text-neutral-500 mt-8\">\n                    {panelLeft.content}\n                  </p>\n                  <FeaturedLink\n                    url={panelLeft.url}\n                    additionalCSS=\"text-neutral-1300 dark:text-neutral-000 mt-16 ui-text-p3\"\n                    iconColor=\"text-orange-600\"\n                  >\n                    {panelLeft.labelLink}\n                  </FeaturedLink>\n                </div>\n                <div className=\"flex justify-end\">\n                  <img\n                    src={panelLeft.image}\n                    alt={panelLeft.heading}\n                    className=\"w-full z-10 rounded-lg\"\n                  />\n                </div>\n              </>\n            )}\n      </div>\n      <div className=\"mt-12 md:mt-0 flex-[3] flex-shrink-0 flex flex-col justify-between\">\n        <ul>\n          {panelRightHeading && (\n            <p className=\"ui-text-overline2 text-neutral-700 dark:text-neutral-600 my-12\">\n              platform\n            </p>\n          )}\n\n          {panelRightItems &&\n            panelRightItems.map((item) => (\n              <li\n                className={cn(\n                  \"list-none py-12 my-0 flex gap-x-[10px] group hover:cursor-pointer\",\n                  item.isMobile ? \"md:hidden\" : \"md:flex\",\n                )}\n                key={item.label}\n              >\n                <Icon\n                  name={item.icon}\n                  size=\"1.25rem\"\n                  additionalCSS=\"text-neutral-1000 dark:text-neutral-300\"\n                />\n                <a\n                  className=\"ui-text-menu2 md:ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 group-hover:text-neutral-1300 dark:group-hover:text-neutral-000\"\n                  href={item.link}\n                >\n                  {item.label}\n                </a>\n              </li>\n            ))}\n        </ul>\n        {panelRightBottom && (\n          <div className=\"items-end mt-16 md:mt-0\">{panelRightBottom}</div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","cn","Icon","FeaturedLink","products","ProductTile","MeganavPanel","displayProductTile","panelLeft","panelLeftClassName","panelRightHeading","panelRightItems","panelRightBottom","div","className","Object","keys","map","product","name","key","selected","onClick","window","location","href","link","animateIcons","h4","heading","p","content","url","additionalCSS","iconColor","labelLink","img","src","image","alt","ul","item","li","isMobile","label","icon","size","a"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,SAAU,SAAU,AAE3B,QAAOC,iBAAkB,iBAAkB,AAC3C,QAAsBC,QAAQ,KAAQ,qBAAsB,AAC5D,QAAOC,gBAAiB,gBAAiB,AAEzC,QAAO,MAAMC,aAAe,CAAC,CAC3BC,kBAAkB,CAClBC,SAAS,CACTC,kBAAkB,CAClBC,iBAAiB,CACjBC,eAAe,CACfC,gBAAgB,CAQjB,IACC,OACE,oBAACC,OAAIC,UAAU,0EACb,oBAACD,OACCC,UAAWb,GACT,oDACAQ,qBAGDF,mBACGQ,OAAOC,IAAI,CAACZ,UAAUa,GAAG,CAAC,AAACC,SACzB,oBAACb,aACCc,KAAMD,QACNE,IAAKF,QACLG,SAAU,MACVC,QAAS,IACNC,OAAOC,QAAQ,CAACC,IAAI,CAAGrB,QAAQ,CAACc,QAAuB,EACpDQ,KAENC,aAAc,QAGlBnB,WACE,wCACE,oBAACK,OAAIC,UAAU,eACb,oBAACc,MAAGd,UAAU,sDACXN,UAAUqB,OAAO,EAEpB,oBAACC,KAAEhB,UAAU,0DACVN,UAAUuB,OAAO,EAEpB,oBAAC5B,cACC6B,IAAKxB,UAAUwB,GAAG,CAClBC,cAAc,2DACdC,UAAU,mBAET1B,UAAU2B,SAAS,GAGxB,oBAACtB,OAAIC,UAAU,oBACb,oBAACsB,OACCC,IAAK7B,UAAU8B,KAAK,CACpBC,IAAK/B,UAAUqB,OAAO,CACtBf,UAAU,8BAMxB,oBAACD,OAAIC,UAAU,sEACb,oBAAC0B,UACE9B,mBACC,oBAACoB,KAAEhB,UAAU,kEAAiE,YAK/EH,iBACCA,gBAAgBM,GAAG,CAAC,AAACwB,MACnB,oBAACC,MACC5B,UAAWb,GACT,oEACAwC,KAAKE,QAAQ,CAAG,YAAc,WAEhCvB,IAAKqB,KAAKG,KAAK,EAEf,oBAAC1C,MACCiB,KAAMsB,KAAKI,IAAI,CACfC,KAAK,UACLb,cAAc,4CAEhB,oBAACc,KACCjC,UAAU,uJACVW,KAAMgB,KAAKf,IAAI,EAEde,KAAKG,KAAK,KAKpBhC,kBACC,oBAACC,OAAIC,UAAU,2BAA2BF,mBAKpD,CAAE"}

package/core/Notice/component.js

@@ -1,2 +1,2 @@
-import Cookie from"js-cookie";import throttle from"lodash.throttle";import{queryId}from"../dom-query";import{FLASH_DATA_ID}from"../Flash";const COOKIE_EXPIRY=90;const COLLAPSE_TRIGGER_DISTANCE=5;const SCROLL_LISTENER_THROTTLE=100;const RESIZE_LISTENER_THROTTLE=100;const isMdViewport=()=>!window.matchMedia(`(min-width: 65rem)`).matches;const adjustFlashMargin=open=>{const flash=queryId(FLASH_DATA_ID);if(flash){flash.style.marginTop=open?`4rem`:null}};const hideOnMobile=bannerContainer=>{if(isMdViewport()){bannerContainer.style.display="none"}else{bannerContainer.style.display=null}};const hideNotice=bannerContainer=>{bannerContainer.style.maxHeight=0;bannerContainer.style.overflow="hidden";adjustFlashMargin(false)};const showNotice=bannerContainer=>{bannerContainer.style.maxHeight=null;bannerContainer.style.overflow=null;adjustFlashMargin(true)};const setupRememberClosed=(cookieId,noticeId)=>{const cookie=Cookie.get(cookieId)||"";Cookie.set(cookieId,`${cookie.replace(`${noticeId},`,"")+noticeId},`,{expires:COOKIE_EXPIRY})};const hasBeenClosedBefore=(cookieId,noticeId)=>(Cookie.get(cookieId)||"").includes(noticeId);const setupNoticeCollapse=bannerContainer=>{const scrollTop=window.scrollY;if(scrollTop>COLLAPSE_TRIGGER_DISTANCE){hideNotice(bannerContainer)}const listener=throttle(()=>{const scrollTop=window.scrollY;if(scrollTop>COLLAPSE_TRIGGER_DISTANCE){hideNotice(bannerContainer)}else if(bannerContainer.style.overflow){showNotice(bannerContainer)}},SCROLL_LISTENER_THROTTLE);document.addEventListener("scroll",listener);return()=>document.removeEventListener("scroll",listener)};const setupCloseBtn=(bannerContainer,cookieId,noticeId,collapseUnmountListeners)=>{const closeBtn=bannerContainer.querySelector("button");if(!closeBtn)return()=>{};const listener=()=>{if(cookieId&&noticeId)setupRememberClosed(cookieId,noticeId);hideNotice(bannerContainer);collapseUnmountListeners()};closeBtn.addEventListener("click",listener);return()=>document.removeEventListener("click",listener)};const resizeHandler=bannerContainer=>{const handler=throttle(()=>{hideOnMobile(bannerContainer)},RESIZE_LISTENER_THROTTLE);window.addEventListener("resize",handler);return()=>window.removeEventListener("resize",handler)};const Notice=({bannerContainer,cookieId,noticeId,options})=>{if(typeof window==="undefined")return()=>{};if(!bannerContainer){console.warn("A Notice component was initited but no notice container was found.");return()=>{}}if(hasBeenClosedBefore(cookieId,noticeId))return()=>{};hideOnMobile(bannerContainer);showNotice(bannerContainer);const opts={collapse:true,...options};const collapseUnmountListeners=opts.collapse?setupNoticeCollapse(bannerContainer):()=>{};const closeBtnUnmountListeners=setupCloseBtn(bannerContainer,cookieId,noticeId,collapseUnmountListeners);const resizeUnmountListener=resizeHandler(bannerContainer);return()=>{[closeBtnUnmountListeners,collapseUnmountListeners,resizeUnmountListener].forEach(unmount=>unmount())}};export default Notice;
+import Cookie from"js-cookie";import throttle from"lodash.throttle";import{queryId}from"../dom-query";import{FLASH_DATA_ID}from"../Flash";const COOKIE_EXPIRY=90;export const COLLAPSE_TRIGGER_DISTANCE=5;const SCROLL_LISTENER_THROTTLE=100;const RESIZE_LISTENER_THROTTLE=100;const isMdViewport=()=>!window.matchMedia(`(min-width: 65rem)`).matches;const adjustFlashMargin=open=>{const flash=queryId(FLASH_DATA_ID);if(flash){flash.style.marginTop=open?`4rem`:null}};const hideOnMobile=bannerContainer=>{if(isMdViewport()){bannerContainer.style.display="none"}else{bannerContainer.style.display=null}};const hideNotice=bannerContainer=>{bannerContainer.style.maxHeight=0;bannerContainer.style.overflow="hidden";adjustFlashMargin(false)};const showNotice=bannerContainer=>{bannerContainer.style.maxHeight=null;bannerContainer.style.overflow=null;adjustFlashMargin(true)};const setupRememberClosed=(cookieId,noticeId)=>{const cookie=Cookie.get(cookieId)||"";Cookie.set(cookieId,`${cookie.replace(`${noticeId},`,"")+noticeId},`,{expires:COOKIE_EXPIRY})};const hasBeenClosedBefore=(cookieId,noticeId)=>(Cookie.get(cookieId)||"").includes(noticeId);const setupNoticeCollapse=bannerContainer=>{const scrollTop=window.scrollY;if(scrollTop>COLLAPSE_TRIGGER_DISTANCE){hideNotice(bannerContainer)}const listener=throttle(()=>{const scrollTop=window.scrollY;if(scrollTop>COLLAPSE_TRIGGER_DISTANCE){hideNotice(bannerContainer)}else if(bannerContainer.style.overflow){showNotice(bannerContainer)}},SCROLL_LISTENER_THROTTLE);document.addEventListener("scroll",listener);return()=>document.removeEventListener("scroll",listener)};const setupCloseBtn=(bannerContainer,cookieId,noticeId,collapseUnmountListeners)=>{const closeBtn=bannerContainer.querySelector("button");if(!closeBtn)return()=>{};const listener=()=>{if(cookieId&&noticeId)setupRememberClosed(cookieId,noticeId);hideNotice(bannerContainer);collapseUnmountListeners()};closeBtn.addEventListener("click",listener);return()=>document.removeEventListener("click",listener)};const resizeHandler=bannerContainer=>{const handler=throttle(()=>{hideOnMobile(bannerContainer)},RESIZE_LISTENER_THROTTLE);window.addEventListener("resize",handler);return()=>window.removeEventListener("resize",handler)};const Notice=({bannerContainer,cookieId,noticeId,options})=>{if(typeof window==="undefined")return()=>{};if(!bannerContainer){console.warn("A Notice component was initited but no notice container was found.");return()=>{}}if(hasBeenClosedBefore(cookieId,noticeId))return()=>{};hideOnMobile(bannerContainer);showNotice(bannerContainer);const opts={collapse:true,...options};const collapseUnmountListeners=opts.collapse?setupNoticeCollapse(bannerContainer):()=>{};const closeBtnUnmountListeners=setupCloseBtn(bannerContainer,cookieId,noticeId,collapseUnmountListeners);const resizeUnmountListener=resizeHandler(bannerContainer);return()=>{[closeBtnUnmountListeners,collapseUnmountListeners,resizeUnmountListener].forEach(unmount=>unmount())}};export default Notice;
 //# sourceMappingURL=component.js.map

package/core/Notice/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/Notice/component.js"],"sourcesContent":["import Cookie from \"js-cookie\";\nimport throttle from \"lodash.throttle\";\n\nimport { queryId } from \"../dom-query\";\nimport { FLASH_DATA_ID } from \"../Flash\";\n\nconst COOKIE_EXPIRY = 90;\nconst COLLAPSE_TRIGGER_DISTANCE = 5;\nconst SCROLL_LISTENER_THROTTLE = 100;\nconst RESIZE_LISTENER_THROTTLE = 100;\n\nconst isMdViewport = () => !window.matchMedia(`(min-width: 65rem)`).matches;\n\nconst adjustFlashMargin = (open) => {\n  // HACK ALERT\n  // Add margin to flashes when opening the notice.\n  // Flashes are react components and this notice needs to work as a view-component and react component.\n  // We could do this with redux but then we potentially update state on every scroll event, which\n  // even with debounce will deplate our frame budget.\n\n  const flash = queryId(FLASH_DATA_ID);\n\n  if (flash) {\n    flash.style.marginTop = open ? `4rem` : null;\n  }\n};\n\nconst hideOnMobile = (bannerContainer) => {\n  if (isMdViewport()) {\n    bannerContainer.style.display = \"none\";\n  } else {\n    bannerContainer.style.display = null;\n  }\n};\n\nconst hideNotice = (bannerContainer) => {\n  bannerContainer.style.maxHeight = 0;\n  bannerContainer.style.overflow = \"hidden\";\n\n  adjustFlashMargin(false);\n};\n\nconst showNotice = (bannerContainer) => {\n  bannerContainer.style.maxHeight = null;\n  bannerContainer.style.overflow = null;\n\n  adjustFlashMargin(true);\n};\n\nconst setupRememberClosed = (cookieId, noticeId) => {\n  const cookie = Cookie.get(cookieId) || \"\";\n\n  Cookie.set(cookieId, `${cookie.replace(`${noticeId},`, \"\") + noticeId},`, {\n    expires: COOKIE_EXPIRY,\n  });\n};\n\nconst hasBeenClosedBefore = (cookieId, noticeId) =>\n  (Cookie.get(cookieId) || \"\").includes(noticeId);\n\nconst setupNoticeCollapse = (bannerContainer) => {\n  const scrollTop = window.scrollY;\n\n  if (scrollTop > COLLAPSE_TRIGGER_DISTANCE) {\n    hideNotice(bannerContainer);\n  }\n\n  const listener = throttle(() => {\n    const scrollTop = window.scrollY;\n\n    if (scrollTop > COLLAPSE_TRIGGER_DISTANCE) {\n      hideNotice(bannerContainer);\n    } else if (bannerContainer.style.overflow) {\n      showNotice(bannerContainer);\n    }\n  }, SCROLL_LISTENER_THROTTLE);\n\n  document.addEventListener(\"scroll\", listener);\n\n  return () => document.removeEventListener(\"scroll\", listener);\n};\n\nconst setupCloseBtn = (\n  bannerContainer,\n  cookieId,\n  noticeId,\n  collapseUnmountListeners,\n) => {\n  const closeBtn = bannerContainer.querySelector(\"button\");\n\n  if (!closeBtn) return () => {};\n\n  const listener = () => {\n    if (cookieId && noticeId) setupRememberClosed(cookieId, noticeId);\n\n    hideNotice(bannerContainer);\n    collapseUnmountListeners();\n  };\n\n  closeBtn.addEventListener(\"click\", listener);\n\n  return () => document.removeEventListener(\"click\", listener);\n};\n\nconst resizeHandler = (bannerContainer) => {\n  const handler = throttle(() => {\n    hideOnMobile(bannerContainer);\n  }, RESIZE_LISTENER_THROTTLE);\n\n  window.addEventListener(\"resize\", handler);\n\n  return () => window.removeEventListener(\"resize\", handler);\n};\n\nconst Notice = ({ bannerContainer, cookieId, noticeId, options }) => {\n  if (typeof window === \"undefined\") return () => {};\n\n  if (!bannerContainer) {\n    console.warn(\n      \"A Notice component was initited but no notice container was found.\",\n    );\n    return () => {};\n  }\n\n  if (hasBeenClosedBefore(cookieId, noticeId)) return () => {};\n\n  hideOnMobile(bannerContainer);\n  showNotice(bannerContainer);\n\n  const opts = { collapse: true, ...options };\n\n  const collapseUnmountListeners = opts.collapse\n    ? setupNoticeCollapse(bannerContainer)\n    : () => {};\n\n  const closeBtnUnmountListeners = setupCloseBtn(\n    bannerContainer,\n    cookieId,\n    noticeId,\n    collapseUnmountListeners,\n  );\n\n  const resizeUnmountListener = resizeHandler(bannerContainer);\n\n  return () => {\n    [\n      closeBtnUnmountListeners,\n      collapseUnmountListeners,\n      resizeUnmountListener,\n    ].forEach((unmount) => unmount());\n  };\n};\n\nexport default Notice;\n"],"names":["Cookie","throttle","queryId","FLASH_DATA_ID","COOKIE_EXPIRY","COLLAPSE_TRIGGER_DISTANCE","SCROLL_LISTENER_THROTTLE","RESIZE_LISTENER_THROTTLE","isMdViewport","window","matchMedia","matches","adjustFlashMargin","open","flash","style","marginTop","hideOnMobile","bannerContainer","display","hideNotice","maxHeight","overflow","showNotice","setupRememberClosed","cookieId","noticeId","cookie","get","set","replace","expires","hasBeenClosedBefore","includes","setupNoticeCollapse","scrollTop","scrollY","listener","document","addEventListener","removeEventListener","setupCloseBtn","collapseUnmountListeners","closeBtn","querySelector","resizeHandler","handler","Notice","options","console","warn","opts","collapse","closeBtnUnmountListeners","resizeUnmountListener","forEach","unmount"],"mappings":"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"}
+{"version":3,"sources":["../../../src/core/Notice/component.js"],"sourcesContent":["import Cookie from \"js-cookie\";\nimport throttle from \"lodash.throttle\";\n\nimport { queryId } from \"../dom-query\";\nimport { FLASH_DATA_ID } from \"../Flash\";\n\nconst COOKIE_EXPIRY = 90;\nexport const COLLAPSE_TRIGGER_DISTANCE = 5;\nconst SCROLL_LISTENER_THROTTLE = 100;\nconst RESIZE_LISTENER_THROTTLE = 100;\n\nconst isMdViewport = () => !window.matchMedia(`(min-width: 65rem)`).matches;\n\nconst adjustFlashMargin = (open) => {\n  // HACK ALERT\n  // Add margin to flashes when opening the notice.\n  // Flashes are react components and this notice needs to work as a view-component and react component.\n  // We could do this with redux but then we potentially update state on every scroll event, which\n  // even with debounce will deplate our frame budget.\n\n  const flash = queryId(FLASH_DATA_ID);\n\n  if (flash) {\n    flash.style.marginTop = open ? `4rem` : null;\n  }\n};\n\nconst hideOnMobile = (bannerContainer) => {\n  if (isMdViewport()) {\n    bannerContainer.style.display = \"none\";\n  } else {\n    bannerContainer.style.display = null;\n  }\n};\n\nconst hideNotice = (bannerContainer) => {\n  bannerContainer.style.maxHeight = 0;\n  bannerContainer.style.overflow = \"hidden\";\n\n  adjustFlashMargin(false);\n};\n\nconst showNotice = (bannerContainer) => {\n  bannerContainer.style.maxHeight = null;\n  bannerContainer.style.overflow = null;\n\n  adjustFlashMargin(true);\n};\n\nconst setupRememberClosed = (cookieId, noticeId) => {\n  const cookie = Cookie.get(cookieId) || \"\";\n\n  Cookie.set(cookieId, `${cookie.replace(`${noticeId},`, \"\") + noticeId},`, {\n    expires: COOKIE_EXPIRY,\n  });\n};\n\nconst hasBeenClosedBefore = (cookieId, noticeId) =>\n  (Cookie.get(cookieId) || \"\").includes(noticeId);\n\nconst setupNoticeCollapse = (bannerContainer) => {\n  const scrollTop = window.scrollY;\n\n  if (scrollTop > COLLAPSE_TRIGGER_DISTANCE) {\n    hideNotice(bannerContainer);\n  }\n\n  const listener = throttle(() => {\n    const scrollTop = window.scrollY;\n\n    if (scrollTop > COLLAPSE_TRIGGER_DISTANCE) {\n      hideNotice(bannerContainer);\n    } else if (bannerContainer.style.overflow) {\n      showNotice(bannerContainer);\n    }\n  }, SCROLL_LISTENER_THROTTLE);\n\n  document.addEventListener(\"scroll\", listener);\n\n  return () => document.removeEventListener(\"scroll\", listener);\n};\n\nconst setupCloseBtn = (\n  bannerContainer,\n  cookieId,\n  noticeId,\n  collapseUnmountListeners,\n) => {\n  const closeBtn = bannerContainer.querySelector(\"button\");\n\n  if (!closeBtn) return () => {};\n\n  const listener = () => {\n    if (cookieId && noticeId) setupRememberClosed(cookieId, noticeId);\n\n    hideNotice(bannerContainer);\n    collapseUnmountListeners();\n  };\n\n  closeBtn.addEventListener(\"click\", listener);\n\n  return () => document.removeEventListener(\"click\", listener);\n};\n\nconst resizeHandler = (bannerContainer) => {\n  const handler = throttle(() => {\n    hideOnMobile(bannerContainer);\n  }, RESIZE_LISTENER_THROTTLE);\n\n  window.addEventListener(\"resize\", handler);\n\n  return () => window.removeEventListener(\"resize\", handler);\n};\n\nconst Notice = ({ bannerContainer, cookieId, noticeId, options }) => {\n  if (typeof window === \"undefined\") return () => {};\n\n  if (!bannerContainer) {\n    console.warn(\n      \"A Notice component was initited but no notice container was found.\",\n    );\n    return () => {};\n  }\n\n  if (hasBeenClosedBefore(cookieId, noticeId)) return () => {};\n\n  hideOnMobile(bannerContainer);\n  showNotice(bannerContainer);\n\n  const opts = { collapse: true, ...options };\n\n  const collapseUnmountListeners = opts.collapse\n    ? setupNoticeCollapse(bannerContainer)\n    : () => {};\n\n  const closeBtnUnmountListeners = setupCloseBtn(\n    bannerContainer,\n    cookieId,\n    noticeId,\n    collapseUnmountListeners,\n  );\n\n  const resizeUnmountListener = resizeHandler(bannerContainer);\n\n  return () => {\n    [\n      closeBtnUnmountListeners,\n      collapseUnmountListeners,\n      resizeUnmountListener,\n    ].forEach((unmount) => unmount());\n  };\n};\n\nexport default Notice;\n"],"names":["Cookie","throttle","queryId","FLASH_DATA_ID","COOKIE_EXPIRY","COLLAPSE_TRIGGER_DISTANCE","SCROLL_LISTENER_THROTTLE","RESIZE_LISTENER_THROTTLE","isMdViewport","window","matchMedia","matches","adjustFlashMargin","open","flash","style","marginTop","hideOnMobile","bannerContainer","display","hideNotice","maxHeight","overflow","showNotice","setupRememberClosed","cookieId","noticeId","cookie","get","set","replace","expires","hasBeenClosedBefore","includes","setupNoticeCollapse","scrollTop","scrollY","listener","document","addEventListener","removeEventListener","setupCloseBtn","collapseUnmountListeners","closeBtn","querySelector","resizeHandler","handler","Notice","options","console","warn","opts","collapse","closeBtnUnmountListeners","resizeUnmountListener","forEach","unmount"],"mappings":"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"}

package/index.d.ts

@@ -579,6 +579,7 @@ export type HeaderSessionState = {
  * Props for the Header component.
  */
 export type HeaderProps = {
+    headerClassName?: string;
     /**
      * Optional search bar element.
      */
@@ -877,11 +878,13 @@ export default _default;
 
 declare module '@ably/ui/core/Meganav/Meganav' {
 import { HeaderSessionState } from ".@ably/ui/core/Header";
+import { MeganavNoticeProps } from ".@ably/ui/core/LegacyMeganav";
 export type MeganavProps = {
     sessionState: HeaderSessionState;
     searchDataId: string;
+    notice?: MeganavNoticeProps;
 };
-const Meganav: ({ sessionState, searchDataId }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
+const Meganav: ({ sessionState, searchDataId, notice }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
 export default Meganav;
 //# sourceMappingURL=Meganav.d.ts.map
 }
@@ -1125,6 +1128,7 @@ export default MeganavSearchSuggestions;
 }
 
 declare module '@ably/ui/core/Notice/component' {
+export const COLLAPSE_TRIGGER_DISTANCE: 5;
 export default Notice;
 function Notice({ bannerContainer, cookieId, noticeId, options }: {
     bannerContainer: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "15.6.0-dev.bdcefb0",
+  "version": "15.6.0-dev.eb9980fc",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
@@ -19,19 +19,17 @@
     "workerDirectory": "./public"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^8.6.0",
-    "@storybook/addon-essentials": "^8.6.0",
-    "@storybook/addon-interactions": "^8.6.0",
-    "@storybook/addon-links": "^8.6.0",
-    "@storybook/blocks": "^8.6.0",
-    "@storybook/react-vite": "^8.6.0",
-    "@storybook/test": "^8.6.0",
-    "@storybook/test-runner": "^0.21.3",
+    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/react-vite": "^8.6.4",
+    "@storybook/test": "^8.6.4",
+    "@storybook/test-runner": "^0.22.0",
     "@swc/cli": "^0.6.0",
     "@swc/core": "^1.4.11",
     "@tailwindcss/container-queries": "^0.1.1",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash.throttle": "^4.1.9",
+    "@types/node": "^20",
+    "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@types/svg-sprite": "^0.0.39",
     "@typescript-eslint/eslint-plugin": "^8.25.0",
@@ -42,7 +40,7 @@
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-react": "^7.34.3",
-    "eslint-plugin-storybook": "^0.11.3",
+    "eslint-plugin-storybook": "^0.11.4",
     "heroicons": "^2.2.0",
     "http-server": "14.1.1",
     "mixpanel-browser": "^2.60.0",
@@ -52,7 +50,7 @@
     "posthog-js": "^1.217.4",
     "prettier": "^3.2.5",
     "react-syntax-highlighter": "^15.6.1",
-    "storybook": "^8.6.0",
+    "storybook": "^8.6.4",
     "storybook-dark-mode": "^4.0.2",
     "svg-sprite": "^2.0.4",
     "tailwindcss": "^3.3.6",