@ably/ui 15.5.1-dev.96cb1c5a → 15.5.1-dev.bc6754f

package/core/DropdownMenu.js

@@ -1,2 +1,2 @@
-import React,{createContext,useContext,useState,useEffect,useRef}from"react";import Icon from"./Icon";const DropdownMenuContext=createContext({isOpen:false,setOpen:()=>{}});const DropdownMenu=({children})=>{const[isOpen,setOpen]=useState(false);const ref=useRef(null);useEffect(()=>{const clickHandler=e=>{if(ref.current?.contains(e.target))return;setOpen(false)};document.addEventListener("click",clickHandler);return()=>{document.removeEventListener("click",clickHandler)}},[]);return React.createElement(DropdownMenuContext.Provider,{value:{isOpen,setOpen}},React.createElement("div",{id:"dropdown-menu",className:"relative",ref:ref},children))};const Trigger=({children,additionalTriggerCSS=""})=>{const{isOpen,setOpen}=useContext(DropdownMenuContext);return React.createElement("button",{id:"menu-trigger",onClick:()=>setOpen(!isOpen),className:`${additionalTriggerCSS} flex items-center p-8 ml-8 group hover:text-gui-hover hover:bg-light-grey active:text-gui-active focus:text-gui-focus focus:outline-none rounded-lg`},React.createElement("span",{className:"leading-normal"},children),React.createElement(Icon,{name:"icon-gui-chevron-down-micro",color:"text-cool-black",size:"1.25rem",additionalCSS:"group-hover:text-gui-hover group-active:text-gui-active group-focus:text-gui-focus"}))};const Content=({children,anchorPosition="right",additionalContentCSS})=>{const{isOpen}=useContext(DropdownMenuContext);if(!isOpen){return null}const anchorPositionClasses=anchorPosition==="right"?"right-0":"left-0";return React.createElement("div",{id:"menu-content",className:`${additionalContentCSS} absolute p-8 z-10 border border-mid-grey bg-white rounded shadow-container ${anchorPositionClasses}`,style:{minWidth:275,top:44}},children)};const Link=({url,title,subtitle,iconName,children})=>{return React.createElement("a",{href:url,className:"menu-link group block p-8 hover:bg-light-grey hover:text-cool-black rounded"},React.createElement("p",{className:"mb-4"},title,iconName?React.createElement(Icon,{name:iconName,size:"1rem",color:"text-cool-black",additionalCSS:"align-middle ml-8 relative -top-1 -left-4"}):null),subtitle?React.createElement("p",{className:"ui-text-p3 mb-16"},subtitle):null,children)};DropdownMenu.Trigger=Trigger;DropdownMenu.Content=Content;DropdownMenu.Link=Link;export default DropdownMenu;
+import React,{createContext,useContext,useState,useEffect,useRef}from"react";import Icon from"./Icon";import cn from"./utils/cn";const DropdownMenuContext=createContext({isOpen:false,setOpen:()=>{}});const DropdownMenu=({children})=>{const[isOpen,setOpen]=useState(false);const ref=useRef(null);useEffect(()=>{const clickHandler=e=>{if(ref.current?.contains(e.target))return;setOpen(false)};document.addEventListener("click",clickHandler);return()=>document.removeEventListener("click",clickHandler)},[]);return React.createElement(DropdownMenuContext.Provider,{value:{isOpen,setOpen}},React.createElement("div",{id:"dropdown-menu",className:"relative",ref:ref},children))};const Trigger=({children,triggerClassNames="",description})=>{const{isOpen,setOpen}=useContext(DropdownMenuContext);return React.createElement("button",{id:"menu-trigger","aria-label":description,role:"button",onClick:()=>setOpen(!isOpen),className:cn("flex items-center ui-text-button3 text-neutral-1000 dark:text-neutral-300 focus:outline-none",triggerClassNames)},children,React.createElement(Icon,{name:isOpen?"icon-gui-chevron-up-mini":"icon-gui-chevron-down-mini",size:"1.25rem",additionalCSS:"text-neutral-1300 dark:text-neutral-000"}))};const Content=({children,anchorPosition="right",contentClassNames})=>{const{isOpen}=useContext(DropdownMenuContext);if(!isOpen){return null}return React.createElement("div",{id:"menu-content",role:"menu",className:cn("flex flex-col absolute z-10 border border-neutral-400 dark:border-neutral-900 bg-neutral-000 dark:bg-neutral-1300 rounded-lg ui-shadow-md-soft",anchorPosition==="right"?"right-0":"left-0",contentClassNames)},children)};const Link=({url,title,subtitle,iconName,children})=>{return React.createElement("a",{href:url,className:"menu-link group block p-8 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000"},React.createElement("p",{className:"mb-4"},title,iconName?React.createElement(Icon,{name:iconName,size:"1rem",additionalCSS:"align-middle ml-8 relative -top-1 -left-4 text-neutral-1300 dark:text-neutral-000"}):null),subtitle?React.createElement("p",{className:"ui-text-p3 mb-16"},subtitle):null,children)};DropdownMenu.Trigger=Trigger;DropdownMenu.Content=Content;DropdownMenu.Link=Link;export default DropdownMenu;
 //# sourceMappingURL=DropdownMenu.js.map

package/core/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/DropdownMenu.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useState,\n  useEffect,\n  useRef,\n  ReactNode,\n  Dispatch,\n} from \"react\";\nimport Icon from \"./Icon\";\nimport { IconName } from \"./Icon/types\";\n\nconst DropdownMenuContext = createContext<{\n  isOpen: boolean;\n  setOpen: Dispatch<React.SetStateAction<boolean>>;\n}>({\n  isOpen: false,\n  setOpen: () => {},\n});\n\ntype DropdownMenuProps = {\n  children: ReactNode;\n};\n\ntype TriggerProps = {\n  children: ReactNode;\n  additionalTriggerCSS?: string;\n};\n\ntype ContentProps = {\n  children: ReactNode;\n  anchorPosition?: string;\n  additionalContentCSS?: string;\n};\n\ntype LinkProps = {\n  url: string;\n  title: string;\n  subtitle: string;\n  iconName: IconName;\n  children: ReactNode;\n};\n\nconst DropdownMenu = ({ children }: DropdownMenuProps) => {\n  const [isOpen, setOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const clickHandler = (e: MouseEvent) => {\n      if (ref.current?.contains(e.target as Node)) return;\n      setOpen(false);\n    };\n\n    document.addEventListener(\"click\", clickHandler);\n\n    return () => {\n      document.removeEventListener(\"click\", clickHandler);\n    };\n  }, []);\n\n  return (\n    <DropdownMenuContext.Provider value={{ isOpen, setOpen }}>\n      <div id=\"dropdown-menu\" className=\"relative\" ref={ref}>\n        {children}\n      </div>\n    </DropdownMenuContext.Provider>\n  );\n};\n\nconst Trigger = ({ children, additionalTriggerCSS = \"\" }: TriggerProps) => {\n  const { isOpen, setOpen } = useContext(DropdownMenuContext);\n\n  return (\n    <button\n      id=\"menu-trigger\"\n      onClick={() => setOpen(!isOpen)}\n      className={`${additionalTriggerCSS} flex items-center p-8 ml-8 group hover:text-gui-hover hover:bg-light-grey active:text-gui-active focus:text-gui-focus focus:outline-none rounded-lg`}\n    >\n      <span className=\"leading-normal\">{children}</span>\n      <Icon\n        name=\"icon-gui-chevron-down-micro\"\n        color=\"text-cool-black\"\n        size=\"1.25rem\"\n        additionalCSS=\"group-hover:text-gui-hover group-active:text-gui-active group-focus:text-gui-focus\"\n      />\n    </button>\n  );\n};\n\nconst Content = ({\n  children,\n  anchorPosition = \"right\",\n  additionalContentCSS,\n}: ContentProps) => {\n  const { isOpen } = useContext(DropdownMenuContext);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  const anchorPositionClasses =\n    anchorPosition === \"right\" ? \"right-0\" : \"left-0\";\n\n  return (\n    <div\n      id=\"menu-content\"\n      className={`${additionalContentCSS} absolute p-8 z-10 border border-mid-grey bg-white rounded shadow-container ${anchorPositionClasses}`}\n      style={{ minWidth: 275, top: 44 }}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst Link = ({ url, title, subtitle, iconName, children }: LinkProps) => {\n  return (\n    <a\n      href={url}\n      className=\"menu-link group block p-8 hover:bg-light-grey hover:text-cool-black rounded\"\n    >\n      <p className=\"mb-4\">\n        {title}\n        {iconName ? (\n          <Icon\n            name={iconName}\n            size=\"1rem\"\n            color=\"text-cool-black\"\n            additionalCSS=\"align-middle ml-8 relative -top-1 -left-4\"\n          />\n        ) : null}\n      </p>\n      {subtitle ? <p className=\"ui-text-p3 mb-16\">{subtitle}</p> : null}\n      {children}\n    </a>\n  );\n};\n\nDropdownMenu.Trigger = Trigger;\nDropdownMenu.Content = Content;\nDropdownMenu.Link = Link;\nexport default DropdownMenu;\n"],"names":["React","createContext","useContext","useState","useEffect","useRef","Icon","DropdownMenuContext","isOpen","setOpen","DropdownMenu","children","ref","clickHandler","e","current","contains","target","document","addEventListener","removeEventListener","Provider","value","div","id","className","Trigger","additionalTriggerCSS","button","onClick","span","name","color","size","additionalCSS","Content","anchorPosition","additionalContentCSS","anchorPositionClasses","style","minWidth","top","Link","url","title","subtitle","iconName","a","href","p"],"mappings":"AAAA,OAAOA,OACLC,aAAa,CACbC,UAAU,CACVC,QAAQ,CACRC,SAAS,CACTC,MAAM,KAGD,OAAQ,AACf,QAAOC,SAAU,QAAS,CAG1B,MAAMC,oBAAsBN,cAGzB,CACDO,OAAQ,MACRC,QAAS,KAAO,CAClB,GAyBA,MAAMC,aAAe,CAAC,CAAEC,QAAQ,CAAqB,IACnD,KAAM,CAACH,OAAQC,QAAQ,CAAGN,SAAS,OACnC,MAAMS,IAAMP,OAAuB,MAEnCD,UAAU,KACR,MAAMS,aAAe,AAACC,IACpB,GAAIF,IAAIG,OAAO,EAAEC,SAASF,EAAEG,MAAM,EAAW,OAC7CR,QAAQ,MACV,EAEAS,SAASC,gBAAgB,CAAC,QAASN,cAEnC,MAAO,KACLK,SAASE,mBAAmB,CAAC,QAASP,aACxC,CACF,EAAG,EAAE,EAEL,OACE,oBAACN,oBAAoBc,QAAQ,EAACC,MAAO,CAAEd,OAAQC,OAAQ,GACrD,oBAACc,OAAIC,GAAG,gBAAgBC,UAAU,WAAWb,IAAKA,KAC/CD,UAIT,EAEA,MAAMe,QAAU,CAAC,CAAEf,QAAQ,CAAEgB,qBAAuB,EAAE,CAAgB,IACpE,KAAM,CAAEnB,MAAM,CAAEC,OAAO,CAAE,CAAGP,WAAWK,qBAEvC,OACE,oBAACqB,UACCJ,GAAG,eACHK,QAAS,IAAMpB,QAAQ,CAACD,QACxBiB,UAAW,CAAC,EAAEE,qBAAqB,oJAAoJ,CAAC,EAExL,oBAACG,QAAKL,UAAU,kBAAkBd,UAClC,oBAACL,MACCyB,KAAK,8BACLC,MAAM,kBACNC,KAAK,UACLC,cAAc,uFAItB,EAEA,MAAMC,QAAU,CAAC,CACfxB,QAAQ,CACRyB,eAAiB,OAAO,CACxBC,oBAAoB,CACP,IACb,KAAM,CAAE7B,MAAM,CAAE,CAAGN,WAAWK,qBAE9B,GAAI,CAACC,OAAQ,CACX,OAAO,IACT,CAEA,MAAM8B,sBACJF,iBAAmB,QAAU,UAAY,SAE3C,OACE,oBAACb,OACCC,GAAG,eACHC,UAAW,CAAC,EAAEY,qBAAqB,4EAA4E,EAAEC,sBAAsB,CAAC,CACxIC,MAAO,CAAEC,SAAU,IAAKC,IAAK,EAAG,GAE/B9B,SAGP,EAEA,MAAM+B,KAAO,CAAC,CAAEC,GAAG,CAAEC,KAAK,CAAEC,QAAQ,CAAEC,QAAQ,CAAEnC,QAAQ,CAAa,IACnE,OACE,oBAACoC,KACCC,KAAML,IACNlB,UAAU,+EAEV,oBAACwB,KAAExB,UAAU,QACVmB,MACAE,SACC,oBAACxC,MACCyB,KAAMe,SACNb,KAAK,OACLD,MAAM,kBACNE,cAAc,8CAEd,MAELW,SAAW,oBAACI,KAAExB,UAAU,oBAAoBoB,UAAgB,KAC5DlC,SAGP,CAEAD,CAAAA,aAAagB,OAAO,CAAGA,OACvBhB,CAAAA,aAAayB,OAAO,CAAGA,OACvBzB,CAAAA,aAAagC,IAAI,CAAGA,IACpB,gBAAehC,YAAa"}
+{"version":3,"sources":["../../src/core/DropdownMenu.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  useState,\n  useEffect,\n  useRef,\n  ReactNode,\n  Dispatch,\n} from \"react\";\nimport Icon from \"./Icon\";\nimport { IconName } from \"./Icon/types\";\nimport cn from \"./utils/cn\";\n\nconst DropdownMenuContext = createContext<{\n  isOpen: boolean;\n  setOpen: Dispatch<React.SetStateAction<boolean>>;\n}>({\n  isOpen: false,\n  setOpen: () => {},\n});\n\ntype DropdownMenuProps = {\n  /**\n   * The content to be displayed within the dropdown menu.\n   */\n  children: ReactNode;\n};\n\ntype TriggerProps = {\n  /**\n   * The content to be displayed within the trigger element.\n   */\n  children: ReactNode;\n  /**\n   * Additional class names to apply to the trigger element.\n   */\n  triggerClassNames?: string;\n  /**\n   * A description for the trigger element, used for accessibility purposes.\n   */\n  description?: string;\n};\n\ntype ContentProps = {\n  /**\n   * The content to be displayed within the dropdown menu.\n   */\n  children: ReactNode;\n  /**\n   * The position of the dropdown menu relative to the trigger element.\n   * Defaults to \"right\".\n   */\n  anchorPosition?: string;\n  /**\n   * Additional class names to apply to the content container.\n   */\n  contentClassNames?: string;\n};\n\ntype LinkProps = {\n  url: string;\n  title: string;\n  subtitle?: string;\n  iconName?: IconName;\n  children?: ReactNode;\n};\n\nconst DropdownMenu = ({ children }: DropdownMenuProps) => {\n  const [isOpen, setOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const clickHandler = (e: MouseEvent) => {\n      if (ref.current?.contains(e.target as Node)) return;\n      setOpen(false);\n    };\n    document.addEventListener(\"click\", clickHandler);\n    return () => document.removeEventListener(\"click\", clickHandler);\n  }, []);\n\n  return (\n    <DropdownMenuContext.Provider value={{ isOpen, setOpen }}>\n      <div id=\"dropdown-menu\" className=\"relative\" ref={ref}>\n        {children}\n      </div>\n    </DropdownMenuContext.Provider>\n  );\n};\n\nconst Trigger = ({\n  children,\n  triggerClassNames = \"\",\n  description,\n}: TriggerProps) => {\n  const { isOpen, setOpen } = useContext(DropdownMenuContext);\n\n  return (\n    <button\n      id=\"menu-trigger\"\n      aria-label={description}\n      role=\"button\"\n      onClick={() => setOpen(!isOpen)}\n      className={cn(\n        \"flex items-center ui-text-button3 text-neutral-1000 dark:text-neutral-300 focus:outline-none\",\n        triggerClassNames,\n      )}\n    >\n      {children}\n      <Icon\n        name={\n          isOpen ? \"icon-gui-chevron-up-mini\" : \"icon-gui-chevron-down-mini\"\n        }\n        size=\"1.25rem\"\n        additionalCSS=\"text-neutral-1300 dark:text-neutral-000\"\n      />\n    </button>\n  );\n};\n\nconst Content = ({\n  children,\n  anchorPosition = \"right\",\n  contentClassNames,\n}: ContentProps) => {\n  const { isOpen } = useContext(DropdownMenuContext);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <div\n      id=\"menu-content\"\n      role=\"menu\"\n      className={cn(\n        \"flex flex-col absolute z-10 border border-neutral-400 dark:border-neutral-900 bg-neutral-000 dark:bg-neutral-1300 rounded-lg ui-shadow-md-soft\",\n        anchorPosition === \"right\" ? \"right-0\" : \"left-0\",\n        contentClassNames,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst Link = ({ url, title, subtitle, iconName, children }: LinkProps) => {\n  return (\n    <a\n      href={url}\n      className=\"menu-link group block p-8 rounded-lg\n      hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000\"\n    >\n      <p className=\"mb-4\">\n        {title}\n        {iconName ? (\n          <Icon\n            name={iconName}\n            size=\"1rem\"\n            additionalCSS=\"align-middle ml-8 relative -top-1 -left-4 text-neutral-1300 dark:text-neutral-000\"\n          />\n        ) : null}\n      </p>\n      {subtitle ? <p className=\"ui-text-p3 mb-16\">{subtitle}</p> : null}\n      {children}\n    </a>\n  );\n};\n\nDropdownMenu.Trigger = Trigger;\nDropdownMenu.Content = Content;\nDropdownMenu.Link = Link;\n\nexport default DropdownMenu;\n"],"names":["React","createContext","useContext","useState","useEffect","useRef","Icon","cn","DropdownMenuContext","isOpen","setOpen","DropdownMenu","children","ref","clickHandler","e","current","contains","target","document","addEventListener","removeEventListener","Provider","value","div","id","className","Trigger","triggerClassNames","description","button","aria-label","role","onClick","name","size","additionalCSS","Content","anchorPosition","contentClassNames","Link","url","title","subtitle","iconName","a","href","p"],"mappings":"AAAA,OAAOA,OACLC,aAAa,CACbC,UAAU,CACVC,QAAQ,CACRC,SAAS,CACTC,MAAM,KAGD,OAAQ,AACf,QAAOC,SAAU,QAAS,AAE1B,QAAOC,OAAQ,YAAa,CAE5B,MAAMC,oBAAsBP,cAGzB,CACDQ,OAAQ,MACRC,QAAS,KAAO,CAClB,GAgDA,MAAMC,aAAe,CAAC,CAAEC,QAAQ,CAAqB,IACnD,KAAM,CAACH,OAAQC,QAAQ,CAAGP,SAAS,OACnC,MAAMU,IAAMR,OAAuB,MAEnCD,UAAU,KACR,MAAMU,aAAe,AAACC,IACpB,GAAIF,IAAIG,OAAO,EAAEC,SAASF,EAAEG,MAAM,EAAW,OAC7CR,QAAQ,MACV,EACAS,SAASC,gBAAgB,CAAC,QAASN,cACnC,MAAO,IAAMK,SAASE,mBAAmB,CAAC,QAASP,aACrD,EAAG,EAAE,EAEL,OACE,oBAACN,oBAAoBc,QAAQ,EAACC,MAAO,CAAEd,OAAQC,OAAQ,GACrD,oBAACc,OAAIC,GAAG,gBAAgBC,UAAU,WAAWb,IAAKA,KAC/CD,UAIT,EAEA,MAAMe,QAAU,CAAC,CACff,QAAQ,CACRgB,kBAAoB,EAAE,CACtBC,WAAW,CACE,IACb,KAAM,CAAEpB,MAAM,CAAEC,OAAO,CAAE,CAAGR,WAAWM,qBAEvC,OACE,oBAACsB,UACCL,GAAG,eACHM,aAAYF,YACZG,KAAK,SACLC,QAAS,IAAMvB,QAAQ,CAACD,QACxBiB,UAAWnB,GACT,+FACAqB,oBAGDhB,SACD,oBAACN,MACC4B,KACEzB,OAAS,2BAA6B,6BAExC0B,KAAK,UACLC,cAAc,4CAItB,EAEA,MAAMC,QAAU,CAAC,CACfzB,QAAQ,CACR0B,eAAiB,OAAO,CACxBC,iBAAiB,CACJ,IACb,KAAM,CAAE9B,MAAM,CAAE,CAAGP,WAAWM,qBAE9B,GAAI,CAACC,OAAQ,CACX,OAAO,IACT,CAEA,OACE,oBAACe,OACCC,GAAG,eACHO,KAAK,OACLN,UAAWnB,GACT,iJACA+B,iBAAmB,QAAU,UAAY,SACzCC,oBAGD3B,SAGP,EAEA,MAAM4B,KAAO,CAAC,CAAEC,GAAG,CAAEC,KAAK,CAAEC,QAAQ,CAAEC,QAAQ,CAAEhC,QAAQ,CAAa,IACnE,OACE,oBAACiC,KACCC,KAAML,IACNf,UAAU,sOAGV,oBAACqB,KAAErB,UAAU,QACVgB,MACAE,SACC,oBAACtC,MACC4B,KAAMU,SACNT,KAAK,OACLC,cAAc,sFAEd,MAELO,SAAW,oBAACI,KAAErB,UAAU,oBAAoBiB,UAAgB,KAC5D/B,SAGP,CAEAD,CAAAA,aAAagB,OAAO,CAAGA,OACvBhB,CAAAA,aAAa0B,OAAO,CAAGA,OACvB1B,CAAAA,aAAa6B,IAAI,CAAGA,IAEpB,gBAAe7B,YAAa"}

package/core/Flyout.js

@@ -1,2 +1,2 @@
-import React,{useState}from"react";import{NavigationMenu,NavigationMenuItem,NavigationMenuList,NavigationMenuTrigger,NavigationMenuContent,NavigationMenuViewport,NavigationMenuLink}from"@radix-ui/react-navigation-menu";import cn from"./utils/cn";import{componentMaxHeight,HEADER_HEIGHT}from"./utils/heights";const DEFAULT_MENU_LINK_STYLING="ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between";const DEFAULT_VIEWPORT_STYLING="relative overflow-hidden w-full h-[var(--radix-navigation-menu-viewport-height)] origin-[top_center] transition-[width,_height] duration-300 data-[state=closed]:animate-scale-out data-[state=open]:animate-scale-in sm:w-[var(--radix-navigation-menu-viewport-width)]";const PANEL_ANIMATION="data-[motion=from-end]:animate-enter-from-right data-[motion=from-start]:animate-enter-from-left data-[motion=to-end]:animate-exit-to-right data-[motion=to-start]:animate-exit-to-left";const FlyOverlay=({className,fadingOut})=>React.createElement("div",{className:cn("absolute left-0 right-0 h-screen w-full opacity-0",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut},className),style:{height:componentMaxHeight(HEADER_HEIGHT)}});const Flyout=({menuItems,className,flyOutClassName,menuLinkClassName,viewPortClassName,hasAnimation})=>{const[isOpen,setIsOpen]=useState(false);const[fadingOut,setFadingOut]=useState(false);const closeMenu=()=>{setFadingOut(true);setTimeout(()=>{setIsOpen(false);setFadingOut(false)},150)};return React.createElement(React.Fragment,null,React.createElement(NavigationMenu,{className:cn(className,"flex w-full"),onValueChange:val=>val?setIsOpen(true):closeMenu(),delayDuration:0},React.createElement(NavigationMenuList,{className:"flex list-none center"},menuItems.map(({label,content,link,panelClassName})=>content?React.createElement(NavigationMenuItem,{key:label},React.createElement(NavigationMenuTrigger,{className:cn("group outline-none focus:outline-none select-none cursor-pointer relative",DEFAULT_MENU_LINK_STYLING,menuLinkClassName)},label),React.createElement(NavigationMenuContent,{className:cn("absolute inset-x-0 top-0 p-24 z-10",hasAnimation&&PANEL_ANIMATION,panelClassName)},content)):React.createElement(NavigationMenuLink,{key:label},React.createElement("a",{href:link,className:cn(DEFAULT_MENU_LINK_STYLING,menuLinkClassName)},label)))),React.createElement("div",{className:cn("absolute left-0 top-full",flyOutClassName)},React.createElement(NavigationMenuViewport,{className:cn(DEFAULT_VIEWPORT_STYLING,viewPortClassName)}))),isOpen?React.createElement(FlyOverlay,{className:"bg-neutral-1300 dark:bg-neutral-000 opacity-10 z-20 h-screen",fadingOut:fadingOut}):null)};export default Flyout;
+import React,{useState}from"react";import{NavigationMenu,NavigationMenuItem,NavigationMenuList,NavigationMenuTrigger,NavigationMenuContent,NavigationMenuViewport,NavigationMenuLink}from"@radix-ui/react-navigation-menu";import cn from"./utils/cn";import{componentMaxHeight,HEADER_HEIGHT}from"./utils/heights";const DEFAULT_MENU_LINK_STYLING="ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-1200 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between";const DEFAULT_VIEWPORT_STYLING="relative overflow-hidden w-full h-[var(--radix-navigation-menu-viewport-height)] origin-[top_center] transition-[width,_height] duration-300 data-[state=closed]:animate-scale-out data-[state=open]:animate-scale-in sm:w-[var(--radix-navigation-menu-viewport-width)]";const PANEL_ANIMATION="data-[motion=from-end]:animate-enter-from-right data-[motion=from-start]:animate-enter-from-left data-[motion=to-end]:animate-exit-to-right data-[motion=to-start]:animate-exit-to-left";const FlyOverlay=({className,fadingOut})=>React.createElement("div",{className:cn("absolute left-0 right-0 h-screen w-full opacity-0",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut},className),style:{height:componentMaxHeight(HEADER_HEIGHT),top:HEADER_HEIGHT}});const Flyout=({menuItems,className,flyOutClassName,menuLinkClassName,viewPortClassName,hasAnimation})=>{const[isOpen,setIsOpen]=useState(false);const[fadingOut,setFadingOut]=useState(false);const closeMenu=()=>{setFadingOut(true);setTimeout(()=>{setIsOpen(false);setFadingOut(false)},150)};return React.createElement(React.Fragment,null,React.createElement(NavigationMenu,{className:cn(className,"flex w-full"),onValueChange:val=>val?setIsOpen(true):closeMenu(),delayDuration:0},React.createElement(NavigationMenuList,{className:"flex list-none center"},menuItems.map(({name,content,link,panelClassName})=>content?React.createElement(NavigationMenuItem,{key:name},React.createElement(NavigationMenuTrigger,{className:cn("group outline-none focus:outline-none select-none cursor-pointer relative",DEFAULT_MENU_LINK_STYLING,menuLinkClassName)},name),React.createElement(NavigationMenuContent,{className:cn("absolute right-0 top-0 p-24 z-10",hasAnimation&&PANEL_ANIMATION,panelClassName)},content)):React.createElement(NavigationMenuLink,{key:name},React.createElement("a",{href:link,className:cn(DEFAULT_MENU_LINK_STYLING,menuLinkClassName)},name)))),React.createElement("div",{className:cn("absolute left-0 top-full",flyOutClassName)},React.createElement(NavigationMenuViewport,{className:cn(DEFAULT_VIEWPORT_STYLING,viewPortClassName)}))),isOpen?React.createElement(FlyOverlay,{className:"bg-neutral-1300 dark:bg-neutral-000 opacity-10 z-20 h-screen",fadingOut:fadingOut}):null)};export default Flyout;
 //# sourceMappingURL=Flyout.js.map

package/core/Flyout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Flyout.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  NavigationMenuContent,\n  NavigationMenuViewport,\n  NavigationMenuLink,\n} from \"@radix-ui/react-navigation-menu\";\nimport cn from \"./utils/cn\";\nimport { componentMaxHeight, HEADER_HEIGHT } from \"./utils/heights\";\n\n/**\n * Props for the Flyout component.\n */\ntype FlyoutProps = {\n  /**\n   * Array of menu items to be displayed in the flyout.\n   */\n  menuItems: {\n    /**\n     * Label for the menu item.\n     */\n    label: string;\n    /**\n     * Optional content to be displayed in the flyout panel.\n     */\n    content?: React.ReactNode;\n    /**\n     * Optional link for the menu item.\n     */\n    link?: string;\n    /**\n     * Optional styling for the flyout panel.\n     */\n    panelClassName?: string;\n  }[];\n  /**\n   * Optional class name for the flyout container.\n   */\n  className?: string;\n  /**\n   * Optional class name for the flyout element.\n   */\n  flyOutClassName?: string;\n  /**\n   * Optional class name for the menu link.\n   */\n  menuLinkClassName?: string;\n  /**\n   * Optional class name for the viewport.\n   */\n  viewPortClassName?: string;\n  /**\n   * Flag to indicate if animation should be applied.\n   */\n  hasAnimation: boolean;\n};\n\nconst DEFAULT_MENU_LINK_STYLING =\n  \"ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between\";\nconst DEFAULT_VIEWPORT_STYLING =\n  \"relative overflow-hidden w-full h-[var(--radix-navigation-menu-viewport-height)] origin-[top_center] transition-[width,_height] duration-300 data-[state=closed]:animate-scale-out data-[state=open]:animate-scale-in sm:w-[var(--radix-navigation-menu-viewport-width)]\";\nconst PANEL_ANIMATION =\n  \"data-[motion=from-end]:animate-enter-from-right data-[motion=from-start]:animate-enter-from-left data-[motion=to-end]:animate-exit-to-right data-[motion=to-start]:animate-exit-to-left\";\n\nconst FlyOverlay = ({\n  className,\n  fadingOut,\n}: {\n  className: string;\n  fadingOut: boolean;\n}) => (\n  <div\n    className={cn(\n      \"absolute left-0 right-0 h-screen w-full opacity-0\",\n      {\n        \"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]\": !fadingOut,\n        \"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]\": fadingOut,\n      },\n      className,\n    )}\n    style={{ height: componentMaxHeight(HEADER_HEIGHT) }}\n  ></div>\n);\n\nconst Flyout = ({\n  menuItems,\n  className,\n  flyOutClassName,\n  menuLinkClassName,\n  viewPortClassName,\n  hasAnimation,\n}: FlyoutProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [fadingOut, setFadingOut] = useState(false);\n\n  const closeMenu = () => {\n    setFadingOut(true);\n\n    setTimeout(() => {\n      setIsOpen(false);\n      setFadingOut(false);\n    }, 150);\n  };\n\n  return (\n    <>\n      <NavigationMenu\n        className={cn(className, \"flex w-full\")}\n        onValueChange={(val) => (val ? setIsOpen(true) : closeMenu())}\n        delayDuration={0}\n      >\n        <NavigationMenuList className=\"flex list-none center\">\n          {menuItems.map(({ label, content, link, panelClassName }) =>\n            content ? (\n              <NavigationMenuItem key={label}>\n                <NavigationMenuTrigger\n                  className={cn(\n                    \"group outline-none focus:outline-none select-none cursor-pointer relative\",\n                    DEFAULT_MENU_LINK_STYLING,\n                    menuLinkClassName,\n                  )}\n                >\n                  {label}\n                </NavigationMenuTrigger>\n                <NavigationMenuContent\n                  className={cn(\n                    \"absolute inset-x-0 top-0 p-24 z-10\",\n                    hasAnimation && PANEL_ANIMATION,\n                    panelClassName,\n                  )}\n                >\n                  {content}\n                </NavigationMenuContent>\n              </NavigationMenuItem>\n            ) : (\n              <NavigationMenuLink key={label}>\n                <a\n                  href={link}\n                  className={cn(DEFAULT_MENU_LINK_STYLING, menuLinkClassName)}\n                >\n                  {label}\n                </a>\n              </NavigationMenuLink>\n            ),\n          )}\n        </NavigationMenuList>\n\n        <div className={cn(\"absolute left-0 top-full\", flyOutClassName)}>\n          <NavigationMenuViewport\n            className={cn(DEFAULT_VIEWPORT_STYLING, viewPortClassName)}\n          />\n        </div>\n      </NavigationMenu>\n      {isOpen ? (\n        <FlyOverlay\n          className=\"bg-neutral-1300 dark:bg-neutral-000 opacity-10 z-20 h-screen\"\n          fadingOut={fadingOut}\n        />\n      ) : null}\n    </>\n  );\n};\n\nexport default Flyout;\n"],"names":["React","useState","NavigationMenu","NavigationMenuItem","NavigationMenuList","NavigationMenuTrigger","NavigationMenuContent","NavigationMenuViewport","NavigationMenuLink","cn","componentMaxHeight","HEADER_HEIGHT","DEFAULT_MENU_LINK_STYLING","DEFAULT_VIEWPORT_STYLING","PANEL_ANIMATION","FlyOverlay","className","fadingOut","div","style","height","Flyout","menuItems","flyOutClassName","menuLinkClassName","viewPortClassName","hasAnimation","isOpen","setIsOpen","setFadingOut","closeMenu","setTimeout","onValueChange","val","delayDuration","map","label","content","link","panelClassName","key","a","href"],"mappings":"AAAA,OAAOA,OAASC,QAAQ,KAAQ,OAAQ,AACxC,QACEC,cAAc,CACdC,kBAAkB,CAClBC,kBAAkB,CAClBC,qBAAqB,CACrBC,qBAAqB,CACrBC,sBAAsB,CACtBC,kBAAkB,KACb,iCAAkC,AACzC,QAAOC,OAAQ,YAAa,AAC5B,QAASC,kBAAkB,CAAEC,aAAa,KAAQ,iBAAkB,CAiDpE,MAAMC,0BACJ,8MACF,MAAMC,yBACJ,2QACF,MAAMC,gBACJ,0LAEF,MAAMC,WAAa,CAAC,CAClBC,SAAS,CACTC,SAAS,CAIV,GACC,oBAACC,OACCF,UAAWP,GACT,oDACA,CACE,2DAA4D,CAACQ,UAC7D,4DAA6DA,SAC/D,EACAD,WAEFG,MAAO,CAAEC,OAAQV,mBAAmBC,cAAe,IAIvD,MAAMU,OAAS,CAAC,CACdC,SAAS,CACTN,SAAS,CACTO,eAAe,CACfC,iBAAiB,CACjBC,iBAAiB,CACjBC,YAAY,CACA,IACZ,KAAM,CAACC,OAAQC,UAAU,CAAG3B,SAAS,OACrC,KAAM,CAACgB,UAAWY,aAAa,CAAG5B,SAAS,OAE3C,MAAM6B,UAAY,KAChBD,aAAa,MAEbE,WAAW,KACTH,UAAU,OACVC,aAAa,MACf,EAAG,IACL,EAEA,OACE,wCACE,oBAAC3B,gBACCc,UAAWP,GAAGO,UAAW,eACzBgB,cAAe,AAACC,KAASA,IAAML,UAAU,MAAQE,YACjDI,cAAe,GAEf,oBAAC9B,oBAAmBY,UAAU,yBAC3BM,UAAUa,GAAG,CAAC,CAAC,CAAEC,KAAK,CAAEC,OAAO,CAAEC,IAAI,CAAEC,cAAc,CAAE,GACtDF,QACE,oBAAClC,oBAAmBqC,IAAKJ,OACvB,oBAAC/B,uBACCW,UAAWP,GACT,4EACAG,0BACAY,oBAGDY,OAEH,oBAAC9B,uBACCU,UAAWP,GACT,qCACAiB,cAAgBZ,gBAChByB,iBAGDF,UAIL,oBAAC7B,oBAAmBgC,IAAKJ,OACvB,oBAACK,KACCC,KAAMJ,KACNtB,UAAWP,GAAGG,0BAA2BY,oBAExCY,UAOX,oBAAClB,OAAIF,UAAWP,GAAG,2BAA4Bc,kBAC7C,oBAAChB,wBACCS,UAAWP,GAAGI,yBAA0BY,uBAI7CE,OACC,oBAACZ,YACCC,UAAU,+DACVC,UAAWA,YAEX,KAGV,CAEA,gBAAeI,MAAO"}
+{"version":3,"sources":["../../src/core/Flyout.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  NavigationMenuContent,\n  NavigationMenuViewport,\n  NavigationMenuLink,\n} from \"@radix-ui/react-navigation-menu\";\nimport cn from \"./utils/cn\";\nimport { componentMaxHeight, HEADER_HEIGHT } from \"./utils/heights\";\n\n/**\n * Props for the Flyout component.\n */\ntype FlyoutProps = {\n  /**\n   * Array of menu items to be displayed in the flyout.\n   */\n  menuItems: {\n    /**\n     * name for the menu item.\n     */\n    name: string;\n    /**\n     * Optional content to be displayed in the flyout panel.\n     */\n    content?: React.ReactNode;\n    /**\n     * Optional link for the menu item.\n     */\n    link?: string;\n    /**\n     * Optional styling for the flyout panel.\n     */\n    panelClassName?: string;\n  }[];\n  /**\n   * Optional class name for the flyout container.\n   */\n  className?: string;\n  /**\n   * Optional class name for the flyout element.\n   */\n  flyOutClassName?: string;\n  /**\n   * Optional class name for the menu link.\n   */\n  menuLinkClassName?: string;\n  /**\n   * Optional class name for the viewport.\n   */\n  viewPortClassName?: string;\n  /**\n   * Flag to indicate if animation should be applied.\n   */\n  hasAnimation: boolean;\n};\n\nconst DEFAULT_MENU_LINK_STYLING =\n  \"ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-1200 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between\";\nconst DEFAULT_VIEWPORT_STYLING =\n  \"relative overflow-hidden w-full h-[var(--radix-navigation-menu-viewport-height)] origin-[top_center] transition-[width,_height] duration-300 data-[state=closed]:animate-scale-out data-[state=open]:animate-scale-in sm:w-[var(--radix-navigation-menu-viewport-width)]\";\nconst PANEL_ANIMATION =\n  \"data-[motion=from-end]:animate-enter-from-right data-[motion=from-start]:animate-enter-from-left data-[motion=to-end]:animate-exit-to-right data-[motion=to-start]:animate-exit-to-left\";\n\nconst FlyOverlay = ({\n  className,\n  fadingOut,\n}: {\n  className: string;\n  fadingOut: boolean;\n}) => (\n  <div\n    className={cn(\n      \"absolute left-0 right-0 h-screen w-full opacity-0\",\n      {\n        \"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]\": !fadingOut,\n        \"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]\": fadingOut,\n      },\n      className,\n    )}\n    style={{ height: componentMaxHeight(HEADER_HEIGHT), top: HEADER_HEIGHT }}\n  ></div>\n);\n\nconst Flyout = ({\n  menuItems,\n  className,\n  flyOutClassName,\n  menuLinkClassName,\n  viewPortClassName,\n  hasAnimation,\n}: FlyoutProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [fadingOut, setFadingOut] = useState(false);\n\n  const closeMenu = () => {\n    setFadingOut(true);\n\n    setTimeout(() => {\n      setIsOpen(false);\n      setFadingOut(false);\n    }, 150);\n  };\n\n  return (\n    <>\n      <NavigationMenu\n        className={cn(className, \"flex w-full\")}\n        onValueChange={(val) => (val ? setIsOpen(true) : closeMenu())}\n        delayDuration={0}\n      >\n        <NavigationMenuList className=\"flex list-none center\">\n          {menuItems.map(({ name, content, link, panelClassName }) =>\n            content ? (\n              <NavigationMenuItem key={name}>\n                <NavigationMenuTrigger\n                  className={cn(\n                    \"group outline-none focus:outline-none select-none cursor-pointer relative\",\n                    DEFAULT_MENU_LINK_STYLING,\n                    menuLinkClassName,\n                  )}\n                >\n                  {name}\n                </NavigationMenuTrigger>\n                <NavigationMenuContent\n                  className={cn(\n                    \"absolute right-0 top-0 p-24 z-10\",\n                    hasAnimation && PANEL_ANIMATION,\n                    panelClassName,\n                  )}\n                >\n                  {content}\n                </NavigationMenuContent>\n              </NavigationMenuItem>\n            ) : (\n              <NavigationMenuLink key={name}>\n                <a\n                  href={link}\n                  className={cn(DEFAULT_MENU_LINK_STYLING, menuLinkClassName)}\n                >\n                  {name}\n                </a>\n              </NavigationMenuLink>\n            ),\n          )}\n        </NavigationMenuList>\n\n        <div className={cn(\"absolute left-0 top-full\", flyOutClassName)}>\n          <NavigationMenuViewport\n            className={cn(DEFAULT_VIEWPORT_STYLING, viewPortClassName)}\n          />\n        </div>\n      </NavigationMenu>\n      {isOpen ? (\n        <FlyOverlay\n          className=\"bg-neutral-1300 dark:bg-neutral-000 opacity-10 z-20 h-screen\"\n          fadingOut={fadingOut}\n        />\n      ) : null}\n    </>\n  );\n};\n\nexport default Flyout;\n"],"names":["React","useState","NavigationMenu","NavigationMenuItem","NavigationMenuList","NavigationMenuTrigger","NavigationMenuContent","NavigationMenuViewport","NavigationMenuLink","cn","componentMaxHeight","HEADER_HEIGHT","DEFAULT_MENU_LINK_STYLING","DEFAULT_VIEWPORT_STYLING","PANEL_ANIMATION","FlyOverlay","className","fadingOut","div","style","height","top","Flyout","menuItems","flyOutClassName","menuLinkClassName","viewPortClassName","hasAnimation","isOpen","setIsOpen","setFadingOut","closeMenu","setTimeout","onValueChange","val","delayDuration","map","name","content","link","panelClassName","key","a","href"],"mappings":"AAAA,OAAOA,OAASC,QAAQ,KAAQ,OAAQ,AACxC,QACEC,cAAc,CACdC,kBAAkB,CAClBC,kBAAkB,CAClBC,qBAAqB,CACrBC,qBAAqB,CACrBC,sBAAsB,CACtBC,kBAAkB,KACb,iCAAkC,AACzC,QAAOC,OAAQ,YAAa,AAC5B,QAASC,kBAAkB,CAAEC,aAAa,KAAQ,iBAAkB,CAiDpE,MAAMC,0BACJ,yNACF,MAAMC,yBACJ,2QACF,MAAMC,gBACJ,0LAEF,MAAMC,WAAa,CAAC,CAClBC,SAAS,CACTC,SAAS,CAIV,GACC,oBAACC,OACCF,UAAWP,GACT,oDACA,CACE,2DAA4D,CAACQ,UAC7D,4DAA6DA,SAC/D,EACAD,WAEFG,MAAO,CAAEC,OAAQV,mBAAmBC,eAAgBU,IAAKV,aAAc,IAI3E,MAAMW,OAAS,CAAC,CACdC,SAAS,CACTP,SAAS,CACTQ,eAAe,CACfC,iBAAiB,CACjBC,iBAAiB,CACjBC,YAAY,CACA,IACZ,KAAM,CAACC,OAAQC,UAAU,CAAG5B,SAAS,OACrC,KAAM,CAACgB,UAAWa,aAAa,CAAG7B,SAAS,OAE3C,MAAM8B,UAAY,KAChBD,aAAa,MAEbE,WAAW,KACTH,UAAU,OACVC,aAAa,MACf,EAAG,IACL,EAEA,OACE,wCACE,oBAAC5B,gBACCc,UAAWP,GAAGO,UAAW,eACzBiB,cAAe,AAACC,KAASA,IAAML,UAAU,MAAQE,YACjDI,cAAe,GAEf,oBAAC/B,oBAAmBY,UAAU,yBAC3BO,UAAUa,GAAG,CAAC,CAAC,CAAEC,IAAI,CAAEC,OAAO,CAAEC,IAAI,CAAEC,cAAc,CAAE,GACrDF,QACE,oBAACnC,oBAAmBsC,IAAKJ,MACvB,oBAAChC,uBACCW,UAAWP,GACT,4EACAG,0BACAa,oBAGDY,MAEH,oBAAC/B,uBACCU,UAAWP,GACT,mCACAkB,cAAgBb,gBAChB0B,iBAGDF,UAIL,oBAAC9B,oBAAmBiC,IAAKJ,MACvB,oBAACK,KACCC,KAAMJ,KACNvB,UAAWP,GAAGG,0BAA2Ba,oBAExCY,SAOX,oBAACnB,OAAIF,UAAWP,GAAG,2BAA4Be,kBAC7C,oBAACjB,wBACCS,UAAWP,GAAGI,yBAA0Ba,uBAI7CE,OACC,oBAACb,YACCC,UAAU,+DACVC,UAAWA,YAEX,KAGV,CAEA,gBAAeK,MAAO"}

package/core/Footer.js

@@ -1,2 +1,2 @@
-import React from"react";import Icon from"./Icon";import _absUrl from"./url-base.js";import{StatusIcon}from"./Status";const Footer=({paths,urlBase,statusUrl})=>{const absUrl=path=>_absUrl(path,urlBase);return React.createElement("footer",{className:"bg-light-grey font-sans antialiased leading-normal","data-id":"footer"},React.createElement("div",{className:"max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6"},React.createElement("div",{className:"col-span-full md:col-span-2"},React.createElement("div",{className:"flex flex-row p-menu-row-snug"},React.createElement("img",{className:"mr-24 -mt-16",src:paths.ablyStack,alt:"Ably homepage"}),React.createElement("h2",{className:"ui-text-overline2 col-span-full"},"The Ably Platform")),React.createElement("div",{className:"md:col-span-4 md:w-3/4 xs:w-3/5 w-full"},React.createElement("p",{className:"ui-text-p3 font-bold py-16 p-menu-row-snug"},"Easily power any realtime experience in your application via a simple API that handles everything realtime.")),React.createElement("ul",{className:"grid grid-cols-1"},React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/pubsub"),className:"ui-footer-menu-row-link"},"Pub/sub messaging")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/push-notifications"),className:"ui-footer-menu-row-link"},"Push notifications")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/integrations"),className:"ui-footer-menu-row-link"},"Third-party integrations")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/protocols"),className:"ui-footer-menu-row-link"},"Multiple protocol messaging")))),React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},React.createElement("h2",{className:"ui-footer-col-title"},"Ably is for"),React.createElement("ul",null,React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/asset-tracking"),className:"ui-footer-menu-row-link"},"Ably Asset Tracking")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/extend-kafka-to-the-edge"),className:"ui-footer-menu-row-link"},"Extend Kafka to the edge")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/edtech"),className:"ui-footer-menu-row-link"},"EdTech")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/automotive-logistics-and-mobility"),className:"ui-footer-menu-row-link"},"Automotive, Logistics, & Mobility")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/b2b-platforms"),className:"ui-footer-menu-row-link"},"B2B Platforms")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/healthcare"),className:"ui-footer-menu-row-link"},"Healthcare")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/ecommerce-and-retail"),className:"ui-footer-menu-row-link"},"eCommerce & Retail")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/sports-and-media"),className:"ui-footer-menu-row-link"},"Sports & Media")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/gaming"),className:"ui-footer-menu-row-link"},"Gaming")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/iot-and-connected-devices"),className:"ui-footer-menu-row-link"},"IoT & Connected Devices")))),React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},React.createElement("h2",{className:"ui-footer-col-title"},"Developers"),React.createElement("ul",null,React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/docs/quick-start-guide"),className:"ui-footer-menu-row-link"},"Start in 5 minutes")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/docs/"),className:"ui-footer-menu-row-link"},"Documentation")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/tutorials"),className:"ui-footer-menu-row-link"},"Tutorials")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:"https://changelog.ably.com/",className:"ui-footer-menu-row-link"},"Changelog")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/support"),className:"ui-footer-menu-row-link"},"Support & FAQs")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/docs/sdks"),className:"ui-footer-menu-row-link"},"SDKs")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{className:"ui-footer-menu-row-link flex items-center gap-4",href:"https://status.ably.com/",target:"_blank",rel:"noreferrer"},"System status",React.createElement(StatusIcon,{statusUrl:statusUrl}))))),React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},React.createElement("h2",{className:"ui-footer-col-title"},"WHY ABLY"),React.createElement("ul",null,React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/customers"),className:"ui-footer-menu-row-link"},"Customers")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/case-studies"),className:"ui-footer-menu-row-link"},"Case Studies")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/four-pillars-of-dependability"),className:"ui-footer-menu-row-link"},"Four Pillars of Dependability")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/compare"),className:"ui-footer-menu-row-link"},"Compare our tech")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/protocols"),className:"ui-footer-menu-row-link"},"Multi protocol support")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/integrations"),className:"ui-footer-menu-row-link"},"Third-party integrations")))),React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},React.createElement("h2",{className:"ui-footer-col-title"},"ABOUT"),React.createElement("ul",null,React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/about"),className:"ui-footer-menu-row-link"},"About Ably")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/pricing"),className:"ui-footer-menu-row-link"},"Pricing")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/blog"),className:"ui-footer-menu-row-link"},"Blog")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/careers"),className:"ui-footer-menu-row-link"},"Careers")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/open-policy"),className:"ui-footer-menu-row-link"},"Open protocol policy")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/press-center"),className:"ui-footer-menu-row-link"},"Press & Media")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/contact"),className:"ui-footer-menu-row-link"},"Contact us"))))),React.createElement("div",{className:"max-w-screen-xl ui-grid-px mx-auto"},React.createElement("hr",{className:"border-t border-mid-grey my-0"})),React.createElement("div",{className:"max-w-screen-xl mx-auto py-16 grid ui-grid-gap ui-grid-px sm:grid-cols-2"},React.createElement("div",{className:"md:flex md:items-center"},React.createElement("div",{className:"flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md:col-span-2"},React.createElement("div",{className:""},React.createElement("div",{className:"flex pb-24"},React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-twitter",href:"https://twitter.com/ablyrealtime",title:"Ably on X"},React.createElement(Icon,{name:"icon-social-x",size:"1.5rem"})),React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-linkedin",href:"https://www.linkedin.com/company/ably-realtime",title:"Ably on LinkedIn"},React.createElement(Icon,{name:"icon-social-linkedin",size:"1.5rem"})),React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-github",href:"https://github.com/ably/",title:"Ably on Github"},React.createElement(Icon,{name:"icon-social-github",size:"1.5rem"})),React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-discord",href:"https://discord.gg/jwBPhEZ9g5",title:"Ably on Discord"},React.createElement(Icon,{name:"icon-social-discord",size:"1.5rem"})))),React.createElement("div",{className:"xs:hidden sm:block ui-footer-glassdoor"},React.createElement("div",{className:"flex sm:pt-24 md:pt-0 sm:border-t sm:border-l-0 md:border-t-0 md:border-l sm:border-mid-grey sm:w-3/4 md:w-full md:pl-24"},React.createElement("a",{href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",className:"h-24 text-cool-black hover:text-icon-glassdoor",title:"Ably reviews on glassdoor"},React.createElement(Icon,{name:"icon-social-glassdoor",size:"1.5rem"})),React.createElement("div",{className:"pl-16 text-menu3 font-sans font-medium"},React.createElement("strong",{className:"block font-medium"},"We're hiring!"),React.createElement("a",{href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",className:"ui-footer-link"},"Learn more at Glassdoor"))))),React.createElement("div",{className:"xs:block sm:hidden"},React.createElement("div",{className:"border-t border-mid-grey w-full"}),React.createElement("div",{className:"flex py-24"},React.createElement("a",{className:"h-24 pr-16 text-cool-black hover:text-icon-glassdoor",href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",title:"Ably reviews on glassdoor"},React.createElement(Icon,{name:"icon-social-glassdoor",size:"1.5rem"})),React.createElement("div",{className:"text-menu3 font-sans font-medium"},React.createElement("strong",{className:"block font-medium"},"We're hiring!"),React.createElement("a",{href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",className:"ui-footer-link"},"Learn more at Glassdoor"))))),React.createElement("div",{className:"col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center"},React.createElement("img",{className:"mr-24 h-80",src:paths.highestUserAdoption,alt:"Highest User Adoption 2023"}),React.createElement("img",{className:"mr-24 h-80",src:paths.bestSupport,alt:"Best Support 2023"}),React.createElement("img",{className:"mr-24 h-80",src:paths.fastestImplementation,alt:"Fastest Implementation 2023"}),React.createElement("img",{className:"mr-24 h-80",src:paths.highestPerformer,alt:"High Performer 2023"}))),React.createElement("div",{className:"max-w-screen-xl ui-grid-px mx-auto"},React.createElement("hr",{className:"border-t border-mid-grey my-0"})),React.createElement("div",{className:"max-w-screen-xl mx-auto py-24 sm:py-40 md:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px"},React.createElement("div",{className:"flex ml-8 col-span-full sm:col-span-1 md:pb-16 items-center ui-footer-bottom-links"},React.createElement("div",{className:"flex"},React.createElement("a",{href:absUrl("/privacy"),className:"pr-24 ui-footer-link"},"Cookies"),React.createElement("a",{href:absUrl("/legals"),className:"pr-24 ui-footer-link"},"Legals"),React.createElement("a",{href:absUrl("/data-protection"),className:"pr-24 ui-footer-link"},"Data Protection"),React.createElement("a",{href:absUrl("/privacy"),className:"ui-footer-link"},"Privacy"))),React.createElement("div",{className:"xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-8 md:justify-items-end"},React.createElement("div",{className:"flex mr-24"},React.createElement(Icon,{name:"icon-gui-check-outline",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12 ui-footer-tick-icon"}),React.createElement("div",null,React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"SOC 2 Type 2"),React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Certified"))),React.createElement("div",{className:"flex mr-24 md:col-start-2"},React.createElement(Icon,{name:"icon-gui-check-outline",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12 ui-footer-tick-icon"}),React.createElement("div",null,React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"HIPAA"),React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Compliant"))),React.createElement("div",{className:"flex mr-24 md:col-start-3"},React.createElement(Icon,{name:"icon-gui-check-outline",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12  ui-footer-tick-icon"}),React.createElement("div",null,React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"EU GDPR"),React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Certified"))),React.createElement("div",{className:"flex mr-24 md:col-start-4"},React.createElement(Icon,{name:"icon-gui-check-outline",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12  ui-footer-tick-icon"}),React.createElement("div",null,React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"256-bit AES"),React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Encryption"))))))};export default Footer;
+import React from"react";import Icon from"./Icon";import _absUrl from"./url-base.js";import{StatusIcon}from"./Status";const Footer=({paths,urlBase,statusUrl})=>{const absUrl=path=>_absUrl(path,urlBase);return React.createElement("footer",{className:"bg-light-grey font-sans antialiased leading-normal","data-id":"footer"},React.createElement("div",{className:"max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6"},React.createElement("div",{className:"col-span-full md:col-span-2"},React.createElement("div",{className:"flex flex-row p-menu-row-snug"},React.createElement("img",{className:"mr-24 -mt-16",src:paths.ablyStack,alt:"Ably homepage"}),React.createElement("h2",{className:"ui-text-overline2 col-span-full"},"The Ably Platform")),React.createElement("div",{className:"md:col-span-4 md:w-3/4 xs:w-3/5 w-full"},React.createElement("p",{className:"ui-text-p3 font-bold py-16 p-menu-row-snug"},"Easily power any realtime experience in your application via a simple API that handles everything realtime.")),React.createElement("ul",{className:"grid grid-cols-1"},React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/pubsub"),className:"ui-footer-menu-row-link"},"Pub/sub messaging")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/push-notifications"),className:"ui-footer-menu-row-link"},"Push notifications")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/integrations"),className:"ui-footer-menu-row-link"},"Third-party integrations")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/protocols"),className:"ui-footer-menu-row-link"},"Multiple protocol messaging")))),React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},React.createElement("h2",{className:"ui-footer-col-title"},"Ably is for"),React.createElement("ul",null,React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/asset-tracking"),className:"ui-footer-menu-row-link"},"Ably Asset Tracking")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/extend-kafka-to-the-edge"),className:"ui-footer-menu-row-link"},"Extend Kafka to the edge")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/edtech"),className:"ui-footer-menu-row-link"},"EdTech")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/automotive-logistics-and-mobility"),className:"ui-footer-menu-row-link"},"Automotive, Logistics, & Mobility")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/b2b-platforms"),className:"ui-footer-menu-row-link"},"B2B Platforms")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/healthcare"),className:"ui-footer-menu-row-link"},"Healthcare")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/ecommerce-and-retail"),className:"ui-footer-menu-row-link"},"eCommerce & Retail")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/sports-and-media"),className:"ui-footer-menu-row-link"},"Sports & Media")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/gaming"),className:"ui-footer-menu-row-link"},"Gaming")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/solutions/iot-and-connected-devices"),className:"ui-footer-menu-row-link"},"IoT & Connected Devices")))),React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},React.createElement("h2",{className:"ui-footer-col-title"},"Developers"),React.createElement("ul",null,React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/docs/quick-start-guide"),className:"ui-footer-menu-row-link"},"Start in 5 minutes")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/docs/"),className:"ui-footer-menu-row-link"},"Documentation")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/tutorials"),className:"ui-footer-menu-row-link"},"Tutorials")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:"https://changelog.ably.com/",className:"ui-footer-menu-row-link"},"Changelog")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/support"),className:"ui-footer-menu-row-link"},"Support & FAQs")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/docs/sdks"),className:"ui-footer-menu-row-link"},"SDKs")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{className:"ui-footer-menu-row-link flex items-center gap-4",href:"https://status.ably.com/",target:"_blank",rel:"noreferrer"},"System status",React.createElement(StatusIcon,{statusUrl:statusUrl}))))),React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},React.createElement("h2",{className:"ui-footer-col-title"},"WHY ABLY"),React.createElement("ul",null,React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/customers"),className:"ui-footer-menu-row-link"},"Customers")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/case-studies"),className:"ui-footer-menu-row-link"},"Case Studies")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/four-pillars-of-dependability"),className:"ui-footer-menu-row-link"},"Four Pillars of Dependability")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/compare"),className:"ui-footer-menu-row-link"},"Compare our tech")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/protocols"),className:"ui-footer-menu-row-link"},"Multi protocol support")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/integrations"),className:"ui-footer-menu-row-link"},"Third-party integrations")))),React.createElement("div",{className:"col-span-full xs:col-span-3 md:col-span-1"},React.createElement("h2",{className:"ui-footer-col-title"},"ABOUT"),React.createElement("ul",null,React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/about"),className:"ui-footer-menu-row-link"},"About Ably")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/pricing"),className:"ui-footer-menu-row-link"},"Pricing")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/blog"),className:"ui-footer-menu-row-link"},"Blog")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/careers"),className:"ui-footer-menu-row-link"},"Careers")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/open-policy"),className:"ui-footer-menu-row-link"},"Open protocol policy")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/press-center"),className:"ui-footer-menu-row-link"},"Press & Media")),React.createElement("li",{className:"p-menu-row-snug"},React.createElement("a",{href:absUrl("/contact"),className:"ui-footer-menu-row-link"},"Contact us"))))),React.createElement("div",{className:"max-w-screen-xl ui-grid-px mx-auto"},React.createElement("hr",{className:"border-t border-mid-grey my-0"})),React.createElement("div",{className:"max-w-screen-xl mx-auto py-16 grid ui-grid-gap ui-grid-px sm:grid-cols-2"},React.createElement("div",{className:"md:flex md:items-center"},React.createElement("div",{className:"flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md:col-span-2"},React.createElement("div",{className:""},React.createElement("div",{className:"flex pb-24"},React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-twitter",href:"https://twitter.com/ablyrealtime",title:"Ably on X"},React.createElement(Icon,{name:"icon-social-x",size:"1.5rem"})),React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-linkedin",href:"https://www.linkedin.com/company/ably-realtime",title:"Ably on LinkedIn"},React.createElement(Icon,{name:"icon-social-linkedin",size:"1.5rem"})),React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-github",href:"https://github.com/ably/",title:"Ably on Github"},React.createElement(Icon,{name:"icon-social-github",size:"1.5rem"})),React.createElement("a",{className:"h-24 pr-24 text-cool-black hover:text-icon-discord",href:"https://discord.gg/jwBPhEZ9g5",title:"Ably on Discord"},React.createElement(Icon,{name:"icon-social-discord",size:"1.5rem"})))),React.createElement("div",{className:"xs:hidden sm:block ui-footer-glassdoor"},React.createElement("div",{className:"flex sm:pt-24 md:pt-0 sm:border-t sm:border-l-0 md:border-t-0 md:border-l sm:border-mid-grey sm:w-3/4 md:w-full md:pl-24"},React.createElement("a",{href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",className:"h-24 text-cool-black hover:text-icon-glassdoor",title:"Ably reviews on glassdoor"},React.createElement(Icon,{name:"icon-social-glassdoor",size:"1.5rem"})),React.createElement("div",{className:"pl-16 text-menu3 font-sans font-medium"},React.createElement("strong",{className:"block font-medium"},"We're hiring!"),React.createElement("a",{href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",className:"ui-footer-link"},"Learn more at Glassdoor"))))),React.createElement("div",{className:"xs:block sm:hidden"},React.createElement("div",{className:"border-t border-mid-grey w-full"}),React.createElement("div",{className:"flex py-24"},React.createElement("a",{className:"h-24 pr-16 text-cool-black hover:text-icon-glassdoor",href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",title:"Ably reviews on glassdoor"},React.createElement(Icon,{name:"icon-social-glassdoor",size:"1.5rem"})),React.createElement("div",{className:"text-menu3 font-sans font-medium"},React.createElement("strong",{className:"block font-medium"},"We're hiring!"),React.createElement("a",{href:"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",className:"ui-footer-link"},"Learn more at Glassdoor"))))),React.createElement("div",{className:"col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center"},React.createElement("img",{className:"mr-24 h-80",src:paths.bestSupport,alt:"Best Support 2025"}),React.createElement("img",{className:"mr-24 h-80",src:paths.highPerformer,alt:"High Performer 2025"}),React.createElement("img",{className:"mr-24 h-80",src:paths.usersMostLikely,alt:"Users Most Likely To Recommend 2025"}),React.createElement("img",{className:"mr-24 h-80",src:paths.bestMeetsRequirements,alt:"Best Meets Requirements 2025"}))),React.createElement("div",{className:"max-w-screen-xl ui-grid-px mx-auto"},React.createElement("hr",{className:"border-t border-mid-grey my-0"})),React.createElement("div",{className:"max-w-screen-xl mx-auto py-24 sm:py-40 md:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px"},React.createElement("div",{className:"flex ml-8 col-span-full sm:col-span-1 md:pb-16 items-center ui-footer-bottom-links"},React.createElement("div",{className:"flex"},React.createElement("a",{href:absUrl("/privacy"),className:"pr-24 ui-footer-link"},"Cookies"),React.createElement("a",{href:absUrl("/legals"),className:"pr-24 ui-footer-link"},"Legals"),React.createElement("a",{href:absUrl("/data-protection"),className:"pr-24 ui-footer-link"},"Data Protection"),React.createElement("a",{href:absUrl("/privacy"),className:"ui-footer-link"},"Privacy"))),React.createElement("div",{className:"xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-8 md:justify-items-end"},React.createElement("div",{className:"flex mr-24"},React.createElement(Icon,{name:"icon-gui-check-outline",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12 ui-footer-tick-icon"}),React.createElement("div",null,React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"SOC 2 Type 2"),React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Certified"))),React.createElement("div",{className:"flex mr-24 md:col-start-2"},React.createElement(Icon,{name:"icon-gui-check-outline",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12 ui-footer-tick-icon"}),React.createElement("div",null,React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"HIPAA"),React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Compliant"))),React.createElement("div",{className:"flex mr-24 md:col-start-3"},React.createElement(Icon,{name:"icon-gui-check-outline",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12  ui-footer-tick-icon"}),React.createElement("div",null,React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"EU GDPR"),React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Certified"))),React.createElement("div",{className:"flex mr-24 md:col-start-4"},React.createElement(Icon,{name:"icon-gui-check-outline",color:"text-active-orange",size:"1.5rem",additionalCSS:"bg-white rounded-full mr-12  ui-footer-tick-icon"}),React.createElement("div",null,React.createElement("p",{className:"ui-footer-compliance-text font-bold whitespace-nowrap"},"256-bit AES"),React.createElement("p",{className:"ui-footer-compliance-text font-medium mb-24"},"Encryption"))))))};export default Footer;
 //# sourceMappingURL=Footer.js.map

package/core/Footer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Footer.tsx"],"sourcesContent":["import React from \"react\";\n\nimport Icon from \"./Icon\";\nimport _absUrl from \"./url-base.js\";\nimport { StatusIcon } from \"./Status\";\n\ntype FooterProps = {\n  paths: {\n    ablyStack: string;\n    highestPerformer: string;\n    highestUserAdoption: string;\n    bestSupport: string;\n    fastestImplementation: string;\n  };\n  urlBase: string;\n  statusUrl: string;\n};\n\nconst Footer = ({ paths, urlBase, statusUrl }: FooterProps) => {\n  const absUrl = (path: string) => _absUrl(path, urlBase);\n\n  // create a react hook that calls the statusUrl and returns the status of the system every minute\n\n  return (\n    <footer\n      className=\"bg-light-grey font-sans antialiased leading-normal\"\n      data-id=\"footer\"\n    >\n      <div className=\"max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6\">\n        <div className=\"col-span-full md:col-span-2\">\n          <div className=\"flex flex-row p-menu-row-snug\">\n            <img\n              className=\"mr-24 -mt-16\"\n              src={paths.ablyStack}\n              alt=\"Ably homepage\"\n            />\n            <h2 className=\"ui-text-overline2 col-span-full\">\n              The Ably Platform\n            </h2>\n          </div>\n          <div className=\"md:col-span-4 md:w-3/4 xs:w-3/5 w-full\">\n            <p className=\"ui-text-p3 font-bold py-16 p-menu-row-snug\">\n              Easily power any realtime experience in your application via a\n              simple API that handles everything realtime.\n            </p>\n          </div>\n\n          <ul className=\"grid grid-cols-1\">\n            <li className=\"p-menu-row-snug\">\n              <a href={absUrl(\"/pubsub\")} className=\"ui-footer-menu-row-link\">\n                Pub/sub messaging\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/push-notifications\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Push notifications\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/integrations\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Third-party integrations\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/protocols\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Multiple protocol messaging\n              </a>\n            </li>\n          </ul>\n        </div>\n\n        <div className=\"col-span-full xs:col-span-3 md:col-span-1\">\n          <h2 className=\"ui-footer-col-title\">Ably is for</h2>\n          <ul>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/solutions/asset-tracking\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Ably Asset Tracking\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/solutions/extend-kafka-to-the-edge\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Extend Kafka to the edge\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/solutions/edtech\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                EdTech\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/solutions/automotive-logistics-and-mobility\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Automotive, Logistics, &amp; Mobility\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/solutions/b2b-platforms\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                B2B Platforms\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/solutions/healthcare\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Healthcare\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/solutions/ecommerce-and-retail\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                eCommerce &amp; Retail\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/solutions/sports-and-media\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Sports &amp; Media\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/solutions/gaming\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Gaming\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/solutions/iot-and-connected-devices\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                IoT &amp; Connected Devices\n              </a>\n            </li>\n          </ul>\n        </div>\n\n        <div className=\"col-span-full xs:col-span-3 md:col-span-1\">\n          <h2 className=\"ui-footer-col-title\">Developers</h2>\n          <ul>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/docs/quick-start-guide\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Start in 5 minutes\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a href={absUrl(\"/docs/\")} className=\"ui-footer-menu-row-link\">\n                Documentation\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/tutorials\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Tutorials\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href=\"https://changelog.ably.com/\"\n                className=\"ui-footer-menu-row-link\"\n              >\n                Changelog\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a href={absUrl(\"/support\")} className=\"ui-footer-menu-row-link\">\n                Support &amp; FAQs\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/docs/sdks\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                SDKs\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                className=\"ui-footer-menu-row-link flex items-center gap-4\"\n                href=\"https://status.ably.com/\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                System status\n                <StatusIcon statusUrl={statusUrl} />\n              </a>\n            </li>\n          </ul>\n        </div>\n\n        <div className=\"col-span-full xs:col-span-3 md:col-span-1\">\n          <h2 className=\"ui-footer-col-title\">WHY ABLY</h2>\n          <ul>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/customers\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Customers\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/case-studies\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Case Studies\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/four-pillars-of-dependability\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Four Pillars of Dependability\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a href={absUrl(\"/compare\")} className=\"ui-footer-menu-row-link\">\n                Compare our tech\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/protocols\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Multi protocol support\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/integrations\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Third-party integrations\n              </a>\n            </li>\n          </ul>\n        </div>\n\n        <div className=\"col-span-full xs:col-span-3 md:col-span-1\">\n          <h2 className=\"ui-footer-col-title\">ABOUT</h2>\n          <ul>\n            <li className=\"p-menu-row-snug\">\n              <a href={absUrl(\"/about\")} className=\"ui-footer-menu-row-link\">\n                About Ably\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a href={absUrl(\"/pricing\")} className=\"ui-footer-menu-row-link\">\n                Pricing\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a href={absUrl(\"/blog\")} className=\"ui-footer-menu-row-link\">\n                Blog\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a href={absUrl(\"/careers\")} className=\"ui-footer-menu-row-link\">\n                Careers\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/open-policy\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Open protocol policy\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/press-center\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Press & Media\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a href={absUrl(\"/contact\")} className=\"ui-footer-menu-row-link\">\n                Contact us\n              </a>\n            </li>\n          </ul>\n        </div>\n      </div>\n      <div className=\"max-w-screen-xl ui-grid-px mx-auto\">\n        <hr className=\"border-t border-mid-grey my-0\" />\n      </div>\n      {/* Twitter + Glassdoor SM & above + Glassdoor XS  + Badges*/}\n      <div className=\"max-w-screen-xl mx-auto py-16 grid ui-grid-gap ui-grid-px sm:grid-cols-2\">\n        <div className=\"md:flex md:items-center\">\n          <div className=\"flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md:col-span-2\">\n            <div className=\"\">\n              <div className=\"flex pb-24\">\n                <a\n                  className=\"h-24 pr-24 text-cool-black hover:text-icon-twitter\"\n                  href=\"https://twitter.com/ablyrealtime\"\n                  title=\"Ably on X\"\n                >\n                  <Icon name=\"icon-social-x\" size=\"1.5rem\" />\n                </a>\n                <a\n                  className=\"h-24 pr-24 text-cool-black hover:text-icon-linkedin\"\n                  href=\"https://www.linkedin.com/company/ably-realtime\"\n                  title=\"Ably on LinkedIn\"\n                >\n                  <Icon name=\"icon-social-linkedin\" size=\"1.5rem\" />\n                </a>\n                <a\n                  className=\"h-24 pr-24 text-cool-black hover:text-icon-github\"\n                  href=\"https://github.com/ably/\"\n                  title=\"Ably on Github\"\n                >\n                  <Icon name=\"icon-social-github\" size=\"1.5rem\" />\n                </a>\n                <a\n                  className=\"h-24 pr-24 text-cool-black hover:text-icon-discord\"\n                  href=\"https://discord.gg/jwBPhEZ9g5\"\n                  title=\"Ably on Discord\"\n                >\n                  <Icon name=\"icon-social-discord\" size=\"1.5rem\" />\n                </a>\n              </div>\n            </div>\n            {/* GLASSDOOR on SM and Above */}\n            <div className=\"xs:hidden sm:block ui-footer-glassdoor\">\n              <div className=\"flex sm:pt-24 md:pt-0 sm:border-t sm:border-l-0 md:border-t-0 md:border-l sm:border-mid-grey sm:w-3/4 md:w-full md:pl-24\">\n                <a\n                  href=\"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm\"\n                  className=\"h-24 text-cool-black hover:text-icon-glassdoor\"\n                  title=\"Ably reviews on glassdoor\"\n                >\n                  <Icon name=\"icon-social-glassdoor\" size=\"1.5rem\" />\n                </a>\n                <div className=\"pl-16 text-menu3 font-sans font-medium\">\n                  <strong className=\"block font-medium\">\n                    We&apos;re hiring!\n                  </strong>\n                  <a\n                    href=\"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm\"\n                    className=\"ui-footer-link\"\n                  >\n                    Learn more at Glassdoor\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n          {/* GlassDoor on XS ONLY */}\n          <div className=\"xs:block sm:hidden\">\n            <div className=\"border-t border-mid-grey w-full\"></div>\n            <div className=\"flex py-24\">\n              <a\n                className=\"h-24 pr-16 text-cool-black hover:text-icon-glassdoor\"\n                href=\"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm\"\n                title=\"Ably reviews on glassdoor\"\n              >\n                <Icon name=\"icon-social-glassdoor\" size=\"1.5rem\" />\n              </a>\n              <div className=\"text-menu3 font-sans font-medium\">\n                <strong className=\"block font-medium\">\n                  We&apos;re hiring!\n                </strong>\n                <a\n                  href=\"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm\"\n                  className=\"ui-footer-link\"\n                >\n                  Learn more at Glassdoor\n                </a>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center\">\n          <img\n            className=\"mr-24 h-80\"\n            src={paths.highestUserAdoption}\n            alt=\"Highest User Adoption 2023\"\n          />\n          <img\n            className=\"mr-24 h-80\"\n            src={paths.bestSupport}\n            alt=\"Best Support 2023\"\n          />\n          <img\n            className=\"mr-24 h-80\"\n            src={paths.fastestImplementation}\n            alt=\"Fastest Implementation 2023\"\n          />\n          <img\n            className=\"mr-24 h-80\"\n            src={paths.highestPerformer}\n            alt=\"High Performer 2023\"\n          />\n        </div>\n      </div>\n\n      <div className=\"max-w-screen-xl ui-grid-px mx-auto\">\n        <hr className=\"border-t border-mid-grey my-0\" />\n      </div>\n      <div className=\"max-w-screen-xl mx-auto py-24 sm:py-40 md:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px\">\n        <div className=\"flex ml-8 col-span-full sm:col-span-1 md:pb-16 items-center ui-footer-bottom-links\">\n          <div className=\"flex\">\n            <a href={absUrl(\"/privacy\")} className=\"pr-24 ui-footer-link\">\n              Cookies\n            </a>\n            <a href={absUrl(\"/legals\")} className=\"pr-24 ui-footer-link\">\n              Legals\n            </a>\n            <a\n              href={absUrl(\"/data-protection\")}\n              className=\"pr-24 ui-footer-link\"\n            >\n              Data Protection\n            </a>\n            <a href={absUrl(\"/privacy\")} className=\"ui-footer-link\">\n              Privacy\n            </a>\n          </div>\n        </div>\n        <div className=\"xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-8 md:justify-items-end\">\n          <div className=\"flex mr-24\">\n            <Icon\n              name=\"icon-gui-check-outline\"\n              color=\"text-active-orange\"\n              size=\"1.5rem\"\n              additionalCSS=\"bg-white rounded-full mr-12 ui-footer-tick-icon\"\n            />\n            <div>\n              <p className=\"ui-footer-compliance-text font-bold whitespace-nowrap\">\n                SOC 2 Type 2\n              </p>\n              <p className=\"ui-footer-compliance-text font-medium mb-24\">\n                Certified\n              </p>\n            </div>\n          </div>\n          <div className=\"flex mr-24 md:col-start-2\">\n            <Icon\n              name=\"icon-gui-check-outline\"\n              color=\"text-active-orange\"\n              size=\"1.5rem\"\n              additionalCSS=\"bg-white rounded-full mr-12 ui-footer-tick-icon\"\n            />\n            <div>\n              <p className=\"ui-footer-compliance-text font-bold whitespace-nowrap\">\n                HIPAA\n              </p>\n              <p className=\"ui-footer-compliance-text font-medium mb-24\">\n                Compliant\n              </p>\n            </div>\n          </div>\n          <div className=\"flex mr-24 md:col-start-3\">\n            <Icon\n              name=\"icon-gui-check-outline\"\n              color=\"text-active-orange\"\n              size=\"1.5rem\"\n              additionalCSS=\"bg-white rounded-full mr-12  ui-footer-tick-icon\"\n            />\n            <div>\n              <p className=\"ui-footer-compliance-text font-bold whitespace-nowrap\">\n                EU GDPR\n              </p>\n              <p className=\"ui-footer-compliance-text font-medium mb-24\">\n                Certified\n              </p>\n            </div>\n          </div>\n          <div className=\"flex mr-24 md:col-start-4\">\n            <Icon\n              name=\"icon-gui-check-outline\"\n              color=\"text-active-orange\"\n              size=\"1.5rem\"\n              additionalCSS=\"bg-white rounded-full mr-12  ui-footer-tick-icon\"\n            />\n            <div>\n              <p className=\"ui-footer-compliance-text font-bold whitespace-nowrap\">\n                256-bit AES\n              </p>\n              <p className=\"ui-footer-compliance-text font-medium mb-24\">\n                Encryption\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </footer>\n  );\n};\n\nexport default Footer;\n"],"names":["React","Icon","_absUrl","StatusIcon","Footer","paths","urlBase","statusUrl","absUrl","path","footer","className","data-id","div","img","src","ablyStack","alt","h2","p","ul","li","a","href","target","rel","hr","title","name","size","strong","highestUserAdoption","bestSupport","fastestImplementation","highestPerformer","color","additionalCSS"],"mappings":"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"}
+{"version":3,"sources":["../../src/core/Footer.tsx"],"sourcesContent":["import React from \"react\";\n\nimport Icon from \"./Icon\";\nimport _absUrl from \"./url-base.js\";\nimport { StatusIcon } from \"./Status\";\n\ntype FooterProps = {\n  paths: {\n    ablyStack: string;\n    bestSupport: string;\n    highPerformer: string;\n    usersMostLikely: string;\n    bestMeetsRequirements: string;\n  };\n  urlBase: string;\n  statusUrl: string;\n};\n\nconst Footer = ({ paths, urlBase, statusUrl }: FooterProps) => {\n  const absUrl = (path: string) => _absUrl(path, urlBase);\n\n  // create a react hook that calls the statusUrl and returns the status of the system every minute\n\n  return (\n    <footer\n      className=\"bg-light-grey font-sans antialiased leading-normal\"\n      data-id=\"footer\"\n    >\n      <div className=\"max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6\">\n        <div className=\"col-span-full md:col-span-2\">\n          <div className=\"flex flex-row p-menu-row-snug\">\n            <img\n              className=\"mr-24 -mt-16\"\n              src={paths.ablyStack}\n              alt=\"Ably homepage\"\n            />\n            <h2 className=\"ui-text-overline2 col-span-full\">\n              The Ably Platform\n            </h2>\n          </div>\n          <div className=\"md:col-span-4 md:w-3/4 xs:w-3/5 w-full\">\n            <p className=\"ui-text-p3 font-bold py-16 p-menu-row-snug\">\n              Easily power any realtime experience in your application via a\n              simple API that handles everything realtime.\n            </p>\n          </div>\n\n          <ul className=\"grid grid-cols-1\">\n            <li className=\"p-menu-row-snug\">\n              <a href={absUrl(\"/pubsub\")} className=\"ui-footer-menu-row-link\">\n                Pub/sub messaging\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/push-notifications\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Push notifications\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/integrations\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Third-party integrations\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/protocols\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Multiple protocol messaging\n              </a>\n            </li>\n          </ul>\n        </div>\n\n        <div className=\"col-span-full xs:col-span-3 md:col-span-1\">\n          <h2 className=\"ui-footer-col-title\">Ably is for</h2>\n          <ul>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/solutions/asset-tracking\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Ably Asset Tracking\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/solutions/extend-kafka-to-the-edge\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Extend Kafka to the edge\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/solutions/edtech\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                EdTech\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/solutions/automotive-logistics-and-mobility\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Automotive, Logistics, &amp; Mobility\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/solutions/b2b-platforms\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                B2B Platforms\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/solutions/healthcare\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Healthcare\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/solutions/ecommerce-and-retail\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                eCommerce &amp; Retail\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/solutions/sports-and-media\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Sports &amp; Media\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/solutions/gaming\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Gaming\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/solutions/iot-and-connected-devices\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                IoT &amp; Connected Devices\n              </a>\n            </li>\n          </ul>\n        </div>\n\n        <div className=\"col-span-full xs:col-span-3 md:col-span-1\">\n          <h2 className=\"ui-footer-col-title\">Developers</h2>\n          <ul>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/docs/quick-start-guide\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Start in 5 minutes\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a href={absUrl(\"/docs/\")} className=\"ui-footer-menu-row-link\">\n                Documentation\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/tutorials\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Tutorials\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href=\"https://changelog.ably.com/\"\n                className=\"ui-footer-menu-row-link\"\n              >\n                Changelog\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a href={absUrl(\"/support\")} className=\"ui-footer-menu-row-link\">\n                Support &amp; FAQs\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/docs/sdks\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                SDKs\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                className=\"ui-footer-menu-row-link flex items-center gap-4\"\n                href=\"https://status.ably.com/\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                System status\n                <StatusIcon statusUrl={statusUrl} />\n              </a>\n            </li>\n          </ul>\n        </div>\n\n        <div className=\"col-span-full xs:col-span-3 md:col-span-1\">\n          <h2 className=\"ui-footer-col-title\">WHY ABLY</h2>\n          <ul>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/customers\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Customers\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/case-studies\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Case Studies\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/four-pillars-of-dependability\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Four Pillars of Dependability\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a href={absUrl(\"/compare\")} className=\"ui-footer-menu-row-link\">\n                Compare our tech\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/protocols\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Multi protocol support\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/integrations\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Third-party integrations\n              </a>\n            </li>\n          </ul>\n        </div>\n\n        <div className=\"col-span-full xs:col-span-3 md:col-span-1\">\n          <h2 className=\"ui-footer-col-title\">ABOUT</h2>\n          <ul>\n            <li className=\"p-menu-row-snug\">\n              <a href={absUrl(\"/about\")} className=\"ui-footer-menu-row-link\">\n                About Ably\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a href={absUrl(\"/pricing\")} className=\"ui-footer-menu-row-link\">\n                Pricing\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a href={absUrl(\"/blog\")} className=\"ui-footer-menu-row-link\">\n                Blog\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a href={absUrl(\"/careers\")} className=\"ui-footer-menu-row-link\">\n                Careers\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/open-policy\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Open protocol policy\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a\n                href={absUrl(\"/press-center\")}\n                className=\"ui-footer-menu-row-link\"\n              >\n                Press & Media\n              </a>\n            </li>\n            <li className=\"p-menu-row-snug\">\n              <a href={absUrl(\"/contact\")} className=\"ui-footer-menu-row-link\">\n                Contact us\n              </a>\n            </li>\n          </ul>\n        </div>\n      </div>\n      <div className=\"max-w-screen-xl ui-grid-px mx-auto\">\n        <hr className=\"border-t border-mid-grey my-0\" />\n      </div>\n      {/* Twitter + Glassdoor SM & above + Glassdoor XS  + Badges*/}\n      <div className=\"max-w-screen-xl mx-auto py-16 grid ui-grid-gap ui-grid-px sm:grid-cols-2\">\n        <div className=\"md:flex md:items-center\">\n          <div className=\"flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md:col-span-2\">\n            <div className=\"\">\n              <div className=\"flex pb-24\">\n                <a\n                  className=\"h-24 pr-24 text-cool-black hover:text-icon-twitter\"\n                  href=\"https://twitter.com/ablyrealtime\"\n                  title=\"Ably on X\"\n                >\n                  <Icon name=\"icon-social-x\" size=\"1.5rem\" />\n                </a>\n                <a\n                  className=\"h-24 pr-24 text-cool-black hover:text-icon-linkedin\"\n                  href=\"https://www.linkedin.com/company/ably-realtime\"\n                  title=\"Ably on LinkedIn\"\n                >\n                  <Icon name=\"icon-social-linkedin\" size=\"1.5rem\" />\n                </a>\n                <a\n                  className=\"h-24 pr-24 text-cool-black hover:text-icon-github\"\n                  href=\"https://github.com/ably/\"\n                  title=\"Ably on Github\"\n                >\n                  <Icon name=\"icon-social-github\" size=\"1.5rem\" />\n                </a>\n                <a\n                  className=\"h-24 pr-24 text-cool-black hover:text-icon-discord\"\n                  href=\"https://discord.gg/jwBPhEZ9g5\"\n                  title=\"Ably on Discord\"\n                >\n                  <Icon name=\"icon-social-discord\" size=\"1.5rem\" />\n                </a>\n              </div>\n            </div>\n            {/* GLASSDOOR on SM and Above */}\n            <div className=\"xs:hidden sm:block ui-footer-glassdoor\">\n              <div className=\"flex sm:pt-24 md:pt-0 sm:border-t sm:border-l-0 md:border-t-0 md:border-l sm:border-mid-grey sm:w-3/4 md:w-full md:pl-24\">\n                <a\n                  href=\"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm\"\n                  className=\"h-24 text-cool-black hover:text-icon-glassdoor\"\n                  title=\"Ably reviews on glassdoor\"\n                >\n                  <Icon name=\"icon-social-glassdoor\" size=\"1.5rem\" />\n                </a>\n                <div className=\"pl-16 text-menu3 font-sans font-medium\">\n                  <strong className=\"block font-medium\">\n                    We&apos;re hiring!\n                  </strong>\n                  <a\n                    href=\"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm\"\n                    className=\"ui-footer-link\"\n                  >\n                    Learn more at Glassdoor\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n          {/* GlassDoor on XS ONLY */}\n          <div className=\"xs:block sm:hidden\">\n            <div className=\"border-t border-mid-grey w-full\"></div>\n            <div className=\"flex py-24\">\n              <a\n                className=\"h-24 pr-16 text-cool-black hover:text-icon-glassdoor\"\n                href=\"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm\"\n                title=\"Ably reviews on glassdoor\"\n              >\n                <Icon name=\"icon-social-glassdoor\" size=\"1.5rem\" />\n              </a>\n              <div className=\"text-menu3 font-sans font-medium\">\n                <strong className=\"block font-medium\">\n                  We&apos;re hiring!\n                </strong>\n                <a\n                  href=\"https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm\"\n                  className=\"ui-footer-link\"\n                >\n                  Learn more at Glassdoor\n                </a>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center\">\n          <img\n            className=\"mr-24 h-80\"\n            src={paths.bestSupport}\n            alt=\"Best Support 2025\"\n          />\n          <img\n            className=\"mr-24 h-80\"\n            src={paths.highPerformer}\n            alt=\"High Performer 2025\"\n          />\n          <img\n            className=\"mr-24 h-80\"\n            src={paths.usersMostLikely}\n            alt=\"Users Most Likely To Recommend 2025\"\n          />\n          <img\n            className=\"mr-24 h-80\"\n            src={paths.bestMeetsRequirements}\n            alt=\"Best Meets Requirements 2025\"\n          />\n        </div>\n      </div>\n\n      <div className=\"max-w-screen-xl ui-grid-px mx-auto\">\n        <hr className=\"border-t border-mid-grey my-0\" />\n      </div>\n      <div className=\"max-w-screen-xl mx-auto py-24 sm:py-40 md:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px\">\n        <div className=\"flex ml-8 col-span-full sm:col-span-1 md:pb-16 items-center ui-footer-bottom-links\">\n          <div className=\"flex\">\n            <a href={absUrl(\"/privacy\")} className=\"pr-24 ui-footer-link\">\n              Cookies\n            </a>\n            <a href={absUrl(\"/legals\")} className=\"pr-24 ui-footer-link\">\n              Legals\n            </a>\n            <a\n              href={absUrl(\"/data-protection\")}\n              className=\"pr-24 ui-footer-link\"\n            >\n              Data Protection\n            </a>\n            <a href={absUrl(\"/privacy\")} className=\"ui-footer-link\">\n              Privacy\n            </a>\n          </div>\n        </div>\n        <div className=\"xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-8 md:justify-items-end\">\n          <div className=\"flex mr-24\">\n            <Icon\n              name=\"icon-gui-check-outline\"\n              color=\"text-active-orange\"\n              size=\"1.5rem\"\n              additionalCSS=\"bg-white rounded-full mr-12 ui-footer-tick-icon\"\n            />\n            <div>\n              <p className=\"ui-footer-compliance-text font-bold whitespace-nowrap\">\n                SOC 2 Type 2\n              </p>\n              <p className=\"ui-footer-compliance-text font-medium mb-24\">\n                Certified\n              </p>\n            </div>\n          </div>\n          <div className=\"flex mr-24 md:col-start-2\">\n            <Icon\n              name=\"icon-gui-check-outline\"\n              color=\"text-active-orange\"\n              size=\"1.5rem\"\n              additionalCSS=\"bg-white rounded-full mr-12 ui-footer-tick-icon\"\n            />\n            <div>\n              <p className=\"ui-footer-compliance-text font-bold whitespace-nowrap\">\n                HIPAA\n              </p>\n              <p className=\"ui-footer-compliance-text font-medium mb-24\">\n                Compliant\n              </p>\n            </div>\n          </div>\n          <div className=\"flex mr-24 md:col-start-3\">\n            <Icon\n              name=\"icon-gui-check-outline\"\n              color=\"text-active-orange\"\n              size=\"1.5rem\"\n              additionalCSS=\"bg-white rounded-full mr-12  ui-footer-tick-icon\"\n            />\n            <div>\n              <p className=\"ui-footer-compliance-text font-bold whitespace-nowrap\">\n                EU GDPR\n              </p>\n              <p className=\"ui-footer-compliance-text font-medium mb-24\">\n                Certified\n              </p>\n            </div>\n          </div>\n          <div className=\"flex mr-24 md:col-start-4\">\n            <Icon\n              name=\"icon-gui-check-outline\"\n              color=\"text-active-orange\"\n              size=\"1.5rem\"\n              additionalCSS=\"bg-white rounded-full mr-12  ui-footer-tick-icon\"\n            />\n            <div>\n              <p className=\"ui-footer-compliance-text font-bold whitespace-nowrap\">\n                256-bit AES\n              </p>\n              <p className=\"ui-footer-compliance-text font-medium mb-24\">\n                Encryption\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </footer>\n  );\n};\n\nexport default Footer;\n"],"names":["React","Icon","_absUrl","StatusIcon","Footer","paths","urlBase","statusUrl","absUrl","path","footer","className","data-id","div","img","src","ablyStack","alt","h2","p","ul","li","a","href","target","rel","hr","title","name","size","strong","bestSupport","highPerformer","usersMostLikely","bestMeetsRequirements","color","additionalCSS"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAE1B,QAAOC,SAAU,QAAS,AAC1B,QAAOC,YAAa,eAAgB,AACpC,QAASC,UAAU,KAAQ,UAAW,CActC,MAAMC,OAAS,CAAC,CAAEC,KAAK,CAAEC,OAAO,CAAEC,SAAS,CAAe,IACxD,MAAMC,OAAS,AAACC,MAAiBP,QAAQO,KAAMH,SAI/C,OACE,oBAACI,UACCC,UAAU,qDACVC,UAAQ,UAER,oBAACC,OAAIF,UAAU,2FACb,oBAACE,OAAIF,UAAU,+BACb,oBAACE,OAAIF,UAAU,iCACb,oBAACG,OACCH,UAAU,eACVI,IAAKV,MAAMW,SAAS,CACpBC,IAAI,kBAEN,oBAACC,MAAGP,UAAU,mCAAkC,sBAIlD,oBAACE,OAAIF,UAAU,0CACb,oBAACQ,KAAER,UAAU,8CAA6C,gHAM5D,oBAACS,MAAGT,UAAU,oBACZ,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KAAEC,KAAMf,OAAO,WAAYG,UAAU,2BAA0B,sBAIlE,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KACCC,KAAMf,OAAO,uBACbG,UAAU,2BACX,uBAIH,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KACCC,KAAMf,OAAO,iBACbG,UAAU,2BACX,6BAIH,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KACCC,KAAMf,OAAO,cACbG,UAAU,2BACX,kCAOP,oBAACE,OAAIF,UAAU,6CACb,oBAACO,MAAGP,UAAU,uBAAsB,eACpC,oBAACS,UACC,oBAACC,MAAGV,UAAU,mBACZ,oBAACW,KACCC,KAAMf,OAAO,6BACbG,UAAU,2BACX,wBAIH,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KACCC,KAAMf,OAAO,uCACbG,UAAU,2BACX,6BAIH,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KACCC,KAAMf,OAAO,qBACbG,UAAU,2BACX,WAIH,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KACCC,KAAMf,OAAO,gDACbG,UAAU,2BACX,sCAIH,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KACCC,KAAMf,OAAO,4BACbG,UAAU,2BACX,kBAIH,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KACCC,KAAMf,OAAO,yBACbG,UAAU,2BACX,eAIH,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KACCC,KAAMf,OAAO,mCACbG,UAAU,2BACX,uBAIH,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KACCC,KAAMf,OAAO,+BACbG,UAAU,2BACX,mBAIH,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KACCC,KAAMf,OAAO,qBACbG,UAAU,2BACX,WAIH,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KACCC,KAAMf,OAAO,wCACbG,UAAU,2BACX,8BAOP,oBAACE,OAAIF,UAAU,6CACb,oBAACO,MAAGP,UAAU,uBAAsB,cACpC,oBAACS,UACC,oBAACC,MAAGV,UAAU,mBACZ,oBAACW,KACCC,KAAMf,OAAO,2BACbG,UAAU,2BACX,uBAIH,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KAAEC,KAAMf,OAAO,UAAWG,UAAU,2BAA0B,kBAIjE,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KACCC,KAAMf,OAAO,cACbG,UAAU,2BACX,cAIH,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KACCC,KAAK,8BACLZ,UAAU,2BACX,cAIH,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KAAEC,KAAMf,OAAO,YAAaG,UAAU,2BAA0B,mBAInE,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KACCC,KAAMf,OAAO,cACbG,UAAU,2BACX,SAIH,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KACCX,UAAU,kDACVY,KAAK,2BACLC,OAAO,SACPC,IAAI,cACL,gBAEC,oBAACtB,YAAWI,UAAWA,gBAM/B,oBAACM,OAAIF,UAAU,6CACb,oBAACO,MAAGP,UAAU,uBAAsB,YACpC,oBAACS,UACC,oBAACC,MAAGV,UAAU,mBACZ,oBAACW,KACCC,KAAMf,OAAO,cACbG,UAAU,2BACX,cAIH,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KACCC,KAAMf,OAAO,iBACbG,UAAU,2BACX,iBAIH,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KACCC,KAAMf,OAAO,kCACbG,UAAU,2BACX,kCAIH,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KAAEC,KAAMf,OAAO,YAAaG,UAAU,2BAA0B,qBAInE,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KACCC,KAAMf,OAAO,cACbG,UAAU,2BACX,2BAIH,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KACCC,KAAMf,OAAO,iBACbG,UAAU,2BACX,+BAOP,oBAACE,OAAIF,UAAU,6CACb,oBAACO,MAAGP,UAAU,uBAAsB,SACpC,oBAACS,UACC,oBAACC,MAAGV,UAAU,mBACZ,oBAACW,KAAEC,KAAMf,OAAO,UAAWG,UAAU,2BAA0B,eAIjE,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KAAEC,KAAMf,OAAO,YAAaG,UAAU,2BAA0B,YAInE,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KAAEC,KAAMf,OAAO,SAAUG,UAAU,2BAA0B,SAIhE,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KAAEC,KAAMf,OAAO,YAAaG,UAAU,2BAA0B,YAInE,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KACCC,KAAMf,OAAO,gBACbG,UAAU,2BACX,yBAIH,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KACCC,KAAMf,OAAO,iBACbG,UAAU,2BACX,kBAIH,oBAACU,MAAGV,UAAU,mBACZ,oBAACW,KAAEC,KAAMf,OAAO,YAAaG,UAAU,2BAA0B,kBAOzE,oBAACE,OAAIF,UAAU,sCACb,oBAACe,MAAGf,UAAU,mCAGhB,oBAACE,OAAIF,UAAU,4EACb,oBAACE,OAAIF,UAAU,2BACb,oBAACE,OAAIF,UAAU,wEACb,oBAACE,OAAIF,UAAU,IACb,oBAACE,OAAIF,UAAU,cACb,oBAACW,KACCX,UAAU,qDACVY,KAAK,mCACLI,MAAM,aAEN,oBAAC1B,MAAK2B,KAAK,gBAAgBC,KAAK,YAElC,oBAACP,KACCX,UAAU,sDACVY,KAAK,iDACLI,MAAM,oBAEN,oBAAC1B,MAAK2B,KAAK,uBAAuBC,KAAK,YAEzC,oBAACP,KACCX,UAAU,oDACVY,KAAK,2BACLI,MAAM,kBAEN,oBAAC1B,MAAK2B,KAAK,qBAAqBC,KAAK,YAEvC,oBAACP,KACCX,UAAU,qDACVY,KAAK,gCACLI,MAAM,mBAEN,oBAAC1B,MAAK2B,KAAK,sBAAsBC,KAAK,cAK5C,oBAAChB,OAAIF,UAAU,0CACb,oBAACE,OAAIF,UAAU,4HACb,oBAACW,KACCC,KAAK,8EACLZ,UAAU,iDACVgB,MAAM,6BAEN,oBAAC1B,MAAK2B,KAAK,wBAAwBC,KAAK,YAE1C,oBAAChB,OAAIF,UAAU,0CACb,oBAACmB,UAAOnB,UAAU,qBAAoB,iBAGtC,oBAACW,KACCC,KAAK,8EACLZ,UAAU,kBACX,+BAQT,oBAACE,OAAIF,UAAU,sBACb,oBAACE,OAAIF,UAAU,oCACf,oBAACE,OAAIF,UAAU,cACb,oBAACW,KACCX,UAAU,uDACVY,KAAK,8EACLI,MAAM,6BAEN,oBAAC1B,MAAK2B,KAAK,wBAAwBC,KAAK,YAE1C,oBAAChB,OAAIF,UAAU,oCACb,oBAACmB,UAAOnB,UAAU,qBAAoB,iBAGtC,oBAACW,KACCC,KAAK,8EACLZ,UAAU,kBACX,+BAQT,oBAACE,OAAIF,UAAU,sEACb,oBAACG,OACCH,UAAU,aACVI,IAAKV,MAAM0B,WAAW,CACtBd,IAAI,sBAEN,oBAACH,OACCH,UAAU,aACVI,IAAKV,MAAM2B,aAAa,CACxBf,IAAI,wBAEN,oBAACH,OACCH,UAAU,aACVI,IAAKV,MAAM4B,eAAe,CAC1BhB,IAAI,wCAEN,oBAACH,OACCH,UAAU,aACVI,IAAKV,MAAM6B,qBAAqB,CAChCjB,IAAI,mCAKV,oBAACJ,OAAIF,UAAU,sCACb,oBAACe,MAAGf,UAAU,mCAEhB,oBAACE,OAAIF,UAAU,iGACb,oBAACE,OAAIF,UAAU,sFACb,oBAACE,OAAIF,UAAU,QACb,oBAACW,KAAEC,KAAMf,OAAO,YAAaG,UAAU,wBAAuB,WAG9D,oBAACW,KAAEC,KAAMf,OAAO,WAAYG,UAAU,wBAAuB,UAG7D,oBAACW,KACCC,KAAMf,OAAO,oBACbG,UAAU,wBACX,mBAGD,oBAACW,KAAEC,KAAMf,OAAO,YAAaG,UAAU,kBAAiB,aAK5D,oBAACE,OAAIF,UAAU,+EACb,oBAACE,OAAIF,UAAU,cACb,oBAACV,MACC2B,KAAK,yBACLO,MAAM,qBACNN,KAAK,SACLO,cAAc,oDAEhB,oBAACvB,WACC,oBAACM,KAAER,UAAU,yDAAwD,gBAGrE,oBAACQ,KAAER,UAAU,+CAA8C,eAK/D,oBAACE,OAAIF,UAAU,6BACb,oBAACV,MACC2B,KAAK,yBACLO,MAAM,qBACNN,KAAK,SACLO,cAAc,oDAEhB,oBAACvB,WACC,oBAACM,KAAER,UAAU,yDAAwD,SAGrE,oBAACQ,KAAER,UAAU,+CAA8C,eAK/D,oBAACE,OAAIF,UAAU,6BACb,oBAACV,MACC2B,KAAK,yBACLO,MAAM,qBACNN,KAAK,SACLO,cAAc,qDAEhB,oBAACvB,WACC,oBAACM,KAAER,UAAU,yDAAwD,WAGrE,oBAACQ,KAAER,UAAU,+CAA8C,eAK/D,oBAACE,OAAIF,UAAU,6BACb,oBAACV,MACC2B,KAAK,yBACLO,MAAM,qBACNN,KAAK,SACLO,cAAc,qDAEhB,oBAACvB,WACC,oBAACM,KAAER,UAAU,yDAAwD,eAGrE,oBAACQ,KAAER,UAAU,+CAA8C,kBASzE,CAEA,gBAAeP,MAAO"}

package/core/Header/HeaderLinks.js

@@ -1,2 +1,2 @@
-import React from"react";import Icon from"../Icon";import LinkButton from"../LinkButton";import cn from"../utils/cn";const testSessionState={signedIn:false,account:{links:{dashboard:{href:"/dashboard"}}}};export const HeaderLinks=({sessionState=testSessionState,headerLinks,searchButtonVisibility,searchButton,className})=>{const signedIn=sessionState.signedIn;const headerLinkClasses="ui-text-menu2 md:ui-text-menu3 !font-bold py-16 text-neutral-1300 dark:text-neutral-000 md:text-neutral-1000 dark:md:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1300 dark:active:text-neutral-000 transition-colors";return React.createElement("nav",{className:cn("flex md:flex-1 md:items-center md:justify-end flex-col md:flex-row border-t-[1px] border-neutral-300 md:border-t-0 p-12 md:p-0 gap-12",className)},headerLinks?.map(({href,label,external})=>React.createElement("a",{key:href,className:cn(headerLinkClasses,"flex items-center gap-4 mt-8 md:mt-0"),href:href,target:external?"_blank":undefined,rel:external?"noreferrer noopener":undefined},label,external&&React.createElement(Icon,{name:"icon-gui-arrow-top-right-on-square-outline"}))),searchButtonVisibility!=="mobile"?searchButton:null,signedIn&&sessionState.account?React.createElement(LinkButton,{href:sessionState.account.links?.dashboard.href,variant:"secondary",className:"md:ui-button-secondary-xs","aria-label":"Access your dashboard"},"Dashboard"):React.createElement("div",{className:"flex gap-12"},React.createElement(LinkButton,{href:"/login",variant:"secondary",className:"flex-1 md:flex-none md:ui-button-secondary-xs"},"Login"),React.createElement(LinkButton,{href:"/sign-up",variant:"primary",className:"flex-1 md:flex-none md:ui-button-primary-xs"},"Start free")))};
+import React,{useRef}from"react";import Icon from"../Icon";import LinkButton from"../LinkButton";import cn from"../utils/cn";import DropdownMenu from"../DropdownMenu";const testSessionState={signedIn:false,logOut:{token:"0000",href:"accounts/sign_out"},accountName:"Ably"};export const HeaderLinks=({sessionState=testSessionState,headerLinks,searchButtonVisibility,searchButton,className})=>{const{signedIn,logOut}=sessionState;const formRef=useRef(null);const headerLinkClasses="ui-text-menu2 md:ui-text-menu3 !font-bold py-16 text-neutral-1300 dark:text-neutral-000 md:text-neutral-1000 dark:md:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1300 dark:active:text-neutral-000 transition-colors";const dropdownMenuLinkClasses="block p-8 ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 rounded-lg";const onClickLogout=e=>{e.preventDefault();formRef.current?.submit()};const DashboardLink=({className})=>React.createElement("a",{href:"/dashboard",className:className},"Dashboard");const LogoutForm=React.createElement("form",{ref:formRef,method:"post",action:logOut.href,className:"hidden"},React.createElement("input",{name:"_method",value:"delete",type:"hidden"}),React.createElement("input",{name:"authenticity_token",value:logOut.token,type:"hidden"}));return React.createElement("nav",{className:cn("flex md:flex-1 md:items-center md:justify-end flex-col md:flex-row border-t-[1px] border-neutral-300 md:border-t-0 md:gap-12 py-12 md:py-0",className)},signedIn&&React.createElement(React.Fragment,null,LogoutForm,React.createElement("div",{className:"block md:hidden"},React.createElement("div",{className:"flex flex-col border-b-[1px] border-neutral-300 px-16 pb-12 mb-12"},React.createElement("span",{className:"py-12 ui-text-sub-header text-[18px] text-neutral-700 dark:text-neutral-600 font-bold"},sessionState.accountName),React.createElement(DashboardLink,{className:headerLinkClasses})))),headerLinks?.map(({href,label,external})=>React.createElement("a",{key:href,className:cn(headerLinkClasses,"flex items-center gap-4 px-16 md:px-0"),href:href,target:external?"_blank":undefined,rel:external?"noreferrer noopener":undefined},label,external&&React.createElement(Icon,{name:"icon-gui-arrow-top-right-on-square-outline"}))),searchButtonVisibility!=="mobile"?searchButton:null,signedIn?React.createElement(React.Fragment,null,React.createElement("div",{className:"hidden md:block relative"},React.createElement(DropdownMenu,null,React.createElement(DropdownMenu.Trigger,{description:`Account menu for ${sessionState.accountName}`},React.createElement("span",{className:"block text-ellipsis overflow-hidden whitespace-nowrap w-full max-w-[150px] leading-normal"},sessionState.accountName)),React.createElement(DropdownMenu.Content,{anchorPosition:"right",contentClassNames:"w-[240px] mt-[12px]"},React.createElement("div",{className:"p-8"},React.createElement(DashboardLink,{className:dropdownMenuLinkClasses}),React.createElement("a",{onClick:onClickLogout,href:"#",className:dropdownMenuLinkClasses},"Logout"))))),React.createElement("div",{className:"block md:hidden p-16"},React.createElement(LinkButton,{onClick:onClickLogout,variant:"secondary",className:"w-full md:ui-button-secondary-xs","aria-label":"Logout",rightIcon:"icon-gui-arrow-right-end-on-rectangle-outline"},"Logout"))):React.createElement("div",{className:"flex gap-12 py-12 md:py-0 px-16 md:px-0"},React.createElement(LinkButton,{href:"/login",variant:"secondary",className:"flex-1 md:flex-none md:ui-button-secondary-xs"},"Login"),React.createElement(LinkButton,{href:"/sign-up",variant:"primary",className:"flex-1 md:flex-none md:ui-button-primary-xs"},"Start free")))};
 //# sourceMappingURL=HeaderLinks.js.map

package/core/Header/HeaderLinks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/Header/HeaderLinks.tsx"],"sourcesContent":["import React from \"react\";\nimport { HeaderProps } from \"../Header\";\nimport Icon from \"../Icon\";\nimport LinkButton from \"../LinkButton\";\nimport cn from \"../utils/cn\";\n\nconst testSessionState = {\n  signedIn: false,\n  account: {\n    links: {\n      dashboard: {\n        href: \"/dashboard\",\n      },\n    },\n  },\n};\n\nexport const HeaderLinks: React.FC<\n  Pick<\n    HeaderProps,\n    \"sessionState\" | \"headerLinks\" | \"searchButtonVisibility\" | \"searchButton\"\n  > & {\n    className?: string;\n  }\n> = ({\n  sessionState = testSessionState,\n  headerLinks,\n  searchButtonVisibility,\n  searchButton,\n  className,\n}) => {\n  const signedIn = sessionState.signedIn;\n  const headerLinkClasses =\n    \"ui-text-menu2 md:ui-text-menu3 !font-bold py-16 text-neutral-1300 dark:text-neutral-000 md:text-neutral-1000 dark:md:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1300 dark:active:text-neutral-000 transition-colors\";\n\n  return (\n    <nav\n      className={cn(\n        \"flex md:flex-1 md:items-center md:justify-end flex-col md:flex-row border-t-[1px] border-neutral-300 md:border-t-0 p-12 md:p-0 gap-12\",\n        className,\n      )}\n    >\n      {headerLinks?.map(({ href, label, external }) => (\n        <a\n          key={href}\n          className={cn(\n            headerLinkClasses,\n            \"flex items-center gap-4 mt-8 md:mt-0\",\n          )}\n          href={href}\n          target={external ? \"_blank\" : undefined}\n          rel={external ? \"noreferrer noopener\" : undefined}\n        >\n          {label}\n          {external && (\n            <Icon name=\"icon-gui-arrow-top-right-on-square-outline\" />\n          )}\n        </a>\n      ))}\n      {searchButtonVisibility !== \"mobile\" ? searchButton : null}\n      {signedIn && sessionState.account ? (\n        <LinkButton\n          href={sessionState.account.links?.dashboard.href}\n          variant=\"secondary\"\n          className=\"md:ui-button-secondary-xs\"\n          aria-label=\"Access your dashboard\"\n        >\n          Dashboard\n        </LinkButton>\n      ) : (\n        <div className=\"flex gap-12\">\n          <LinkButton\n            href=\"/login\"\n            variant=\"secondary\"\n            className=\"flex-1 md:flex-none md:ui-button-secondary-xs\"\n          >\n            Login\n          </LinkButton>\n          <LinkButton\n            href=\"/sign-up\"\n            variant=\"primary\"\n            className=\"flex-1 md:flex-none md:ui-button-primary-xs\"\n          >\n            Start free\n          </LinkButton>\n        </div>\n      )}\n    </nav>\n  );\n};\n"],"names":["React","Icon","LinkButton","cn","testSessionState","signedIn","account","links","dashboard","href","HeaderLinks","sessionState","headerLinks","searchButtonVisibility","searchButton","className","headerLinkClasses","nav","map","label","external","a","key","target","undefined","rel","name","variant","aria-label","div"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAE1B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,eAAgB,eAAgB,AACvC,QAAOC,OAAQ,aAAc,CAE7B,MAAMC,iBAAmB,CACvBC,SAAU,MACVC,QAAS,CACPC,MAAO,CACLC,UAAW,CACTC,KAAM,YACR,CACF,CACF,CACF,CAEA,QAAO,MAAMC,YAOT,CAAC,CACHC,aAAeP,gBAAgB,CAC/BQ,WAAW,CACXC,sBAAsB,CACtBC,YAAY,CACZC,SAAS,CACV,IACC,MAAMV,SAAWM,aAAaN,QAAQ,CACtC,MAAMW,kBACJ,oQAEF,OACE,oBAACC,OACCF,UAAWZ,GACT,wIACAY,YAGDH,aAAaM,IAAI,CAAC,CAAET,IAAI,CAAEU,KAAK,CAAEC,QAAQ,CAAE,GAC1C,oBAACC,KACCC,IAAKb,KACLM,UAAWZ,GACTa,kBACA,wCAEFP,KAAMA,KACNc,OAAQH,SAAW,SAAWI,UAC9BC,IAAKL,SAAW,sBAAwBI,WAEvCL,MACAC,UACC,oBAACnB,MAAKyB,KAAK,iDAIhBb,yBAA2B,SAAWC,aAAe,KACrDT,UAAYM,aAAaL,OAAO,CAC/B,oBAACJ,YACCO,KAAME,aAAaL,OAAO,CAACC,KAAK,EAAEC,UAAUC,KAC5CkB,QAAQ,YACRZ,UAAU,4BACVa,aAAW,yBACZ,aAID,oBAACC,OAAId,UAAU,eACb,oBAACb,YACCO,KAAK,SACLkB,QAAQ,YACRZ,UAAU,iDACX,SAGD,oBAACb,YACCO,KAAK,WACLkB,QAAQ,UACRZ,UAAU,+CACX,eAOX,CAAE"}
+{"version":3,"sources":["../../../src/core/Header/HeaderLinks.tsx"],"sourcesContent":["import React, { MouseEvent, useRef } from \"react\";\nimport { HeaderProps } from \"../Header\";\nimport Icon from \"../Icon\";\nimport LinkButton from \"../LinkButton\";\nimport cn from \"../utils/cn\";\nimport DropdownMenu from \"../DropdownMenu\";\n\nconst testSessionState = {\n  signedIn: false,\n  logOut: {\n    token: \"0000\",\n    href: \"accounts/sign_out\",\n  },\n  accountName: \"Ably\",\n};\n\nexport const HeaderLinks: React.FC<\n  Pick<\n    HeaderProps,\n    \"sessionState\" | \"headerLinks\" | \"searchButtonVisibility\" | \"searchButton\"\n  > & {\n    className?: string;\n  }\n> = ({\n  sessionState = testSessionState,\n  headerLinks,\n  searchButtonVisibility,\n  searchButton,\n  className,\n}) => {\n  const { signedIn, logOut } = sessionState;\n  const formRef = useRef<HTMLFormElement>(null);\n\n  const headerLinkClasses =\n    \"ui-text-menu2 md:ui-text-menu3 !font-bold py-16 text-neutral-1300 dark:text-neutral-000 md:text-neutral-1000 dark:md:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1300 dark:active:text-neutral-000 transition-colors\";\n\n  const dropdownMenuLinkClasses =\n    \"block p-8 ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 rounded-lg\";\n\n  const onClickLogout = (e: MouseEvent) => {\n    e.preventDefault();\n    formRef.current?.submit();\n  };\n\n  const DashboardLink = ({ className }: { className: string }) => (\n    <a href=\"/dashboard\" className={className}>\n      Dashboard\n    </a>\n  );\n\n  const LogoutForm = (\n    <form ref={formRef} method=\"post\" action={logOut.href} className=\"hidden\">\n      <input name=\"_method\" value=\"delete\" type=\"hidden\" />\n      <input name=\"authenticity_token\" value={logOut.token} type=\"hidden\" />\n    </form>\n  );\n\n  return (\n    <nav\n      className={cn(\n        \"flex md:flex-1 md:items-center md:justify-end flex-col md:flex-row border-t-[1px] border-neutral-300 md:border-t-0 md:gap-12 py-12 md:py-0\",\n        className,\n      )}\n    >\n      {signedIn && (\n        <>\n          {LogoutForm}\n          <div className=\"block md:hidden\">\n            <div className=\"flex flex-col border-b-[1px] border-neutral-300 px-16 pb-12 mb-12\">\n              <span className=\"py-12 ui-text-sub-header text-[18px] text-neutral-700 dark:text-neutral-600 font-bold\">\n                {sessionState.accountName}\n              </span>\n              {<DashboardLink className={headerLinkClasses} />}\n            </div>\n          </div>\n        </>\n      )}\n\n      {headerLinks?.map(({ href, label, external }) => (\n        <a\n          key={href}\n          className={cn(\n            headerLinkClasses,\n            \"flex items-center gap-4 px-16 md:px-0\",\n          )}\n          href={href}\n          target={external ? \"_blank\" : undefined}\n          rel={external ? \"noreferrer noopener\" : undefined}\n        >\n          {label}\n          {external && (\n            <Icon name=\"icon-gui-arrow-top-right-on-square-outline\" />\n          )}\n        </a>\n      ))}\n\n      {searchButtonVisibility !== \"mobile\" ? searchButton : null}\n      {signedIn ? (\n        <>\n          <div className=\"hidden md:block relative\">\n            <DropdownMenu>\n              <DropdownMenu.Trigger\n                description={`Account menu for ${sessionState.accountName}`}\n              >\n                <span className=\"block text-ellipsis overflow-hidden whitespace-nowrap w-full max-w-[150px] leading-normal\">\n                  {sessionState.accountName}\n                </span>\n              </DropdownMenu.Trigger>\n              <DropdownMenu.Content\n                anchorPosition=\"right\"\n                contentClassNames=\"w-[240px] mt-[12px]\"\n              >\n                <div className=\"p-8\">\n                  {<DashboardLink className={dropdownMenuLinkClasses} />}\n                  <a\n                    onClick={onClickLogout}\n                    href=\"#\"\n                    className={dropdownMenuLinkClasses}\n                  >\n                    Logout\n                  </a>\n                </div>\n              </DropdownMenu.Content>\n            </DropdownMenu>\n          </div>\n          <div className=\"block md:hidden p-16\">\n            <LinkButton\n              onClick={onClickLogout}\n              variant=\"secondary\"\n              className=\"w-full md:ui-button-secondary-xs\"\n              aria-label=\"Logout\"\n              rightIcon=\"icon-gui-arrow-right-end-on-rectangle-outline\"\n            >\n              Logout\n            </LinkButton>\n          </div>\n        </>\n      ) : (\n        <div className=\"flex gap-12 py-12 md:py-0 px-16 md:px-0\">\n          <LinkButton\n            href=\"/login\"\n            variant=\"secondary\"\n            className=\"flex-1 md:flex-none md:ui-button-secondary-xs\"\n          >\n            Login\n          </LinkButton>\n          <LinkButton\n            href=\"/sign-up\"\n            variant=\"primary\"\n            className=\"flex-1 md:flex-none md:ui-button-primary-xs\"\n          >\n            Start free\n          </LinkButton>\n        </div>\n      )}\n    </nav>\n  );\n};\n"],"names":["React","useRef","Icon","LinkButton","cn","DropdownMenu","testSessionState","signedIn","logOut","token","href","accountName","HeaderLinks","sessionState","headerLinks","searchButtonVisibility","searchButton","className","formRef","headerLinkClasses","dropdownMenuLinkClasses","onClickLogout","e","preventDefault","current","submit","DashboardLink","a","LogoutForm","form","ref","method","action","input","name","value","type","nav","div","span","map","label","external","key","target","undefined","rel","Trigger","description","Content","anchorPosition","contentClassNames","onClick","variant","aria-label","rightIcon"],"mappings":"AAAA,OAAOA,OAAqBC,MAAM,KAAQ,OAAQ,AAElD,QAAOC,SAAU,SAAU,AAC3B,QAAOC,eAAgB,eAAgB,AACvC,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,iBAAkB,iBAAkB,CAE3C,MAAMC,iBAAmB,CACvBC,SAAU,MACVC,OAAQ,CACNC,MAAO,OACPC,KAAM,mBACR,EACAC,YAAa,MACf,CAEA,QAAO,MAAMC,YAOT,CAAC,CACHC,aAAeP,gBAAgB,CAC/BQ,WAAW,CACXC,sBAAsB,CACtBC,YAAY,CACZC,SAAS,CACV,IACC,KAAM,CAAEV,QAAQ,CAAEC,MAAM,CAAE,CAAGK,aAC7B,MAAMK,QAAUjB,OAAwB,MAExC,MAAMkB,kBACJ,oQAEF,MAAMC,wBACJ,6LAEF,MAAMC,cAAgB,AAACC,IACrBA,EAAEC,cAAc,EAChBL,CAAAA,QAAQM,OAAO,EAAEC,QACnB,EAEA,MAAMC,cAAgB,CAAC,CAAET,SAAS,CAAyB,GACzD,oBAACU,KAAEjB,KAAK,aAAaO,UAAWA,WAAW,aAK7C,MAAMW,WACJ,oBAACC,QAAKC,IAAKZ,QAASa,OAAO,OAAOC,OAAQxB,OAAOE,IAAI,CAAEO,UAAU,UAC/D,oBAACgB,SAAMC,KAAK,UAAUC,MAAM,SAASC,KAAK,WAC1C,oBAACH,SAAMC,KAAK,qBAAqBC,MAAO3B,OAAOC,KAAK,CAAE2B,KAAK,YAI/D,OACE,oBAACC,OACCpB,UAAWb,GACT,6IACAa,YAGDV,UACC,wCACGqB,WACD,oBAACU,OAAIrB,UAAU,mBACb,oBAACqB,OAAIrB,UAAU,qEACb,oBAACsB,QAAKtB,UAAU,yFACbJ,aAAaF,WAAW,EAE1B,oBAACe,eAAcT,UAAWE,uBAMlCL,aAAa0B,IAAI,CAAC,CAAE9B,IAAI,CAAE+B,KAAK,CAAEC,QAAQ,CAAE,GAC1C,oBAACf,KACCgB,IAAKjC,KACLO,UAAWb,GACTe,kBACA,yCAEFT,KAAMA,KACNkC,OAAQF,SAAW,SAAWG,UAC9BC,IAAKJ,SAAW,sBAAwBG,WAEvCJ,MACAC,UACC,oBAACxC,MAAKgC,KAAK,iDAKhBnB,yBAA2B,SAAWC,aAAe,KACrDT,SACC,wCACE,oBAAC+B,OAAIrB,UAAU,4BACb,oBAACZ,kBACC,oBAACA,aAAa0C,OAAO,EACnBC,YAAa,CAAC,iBAAiB,EAAEnC,aAAaF,WAAW,CAAC,CAAC,EAE3D,oBAAC4B,QAAKtB,UAAU,6FACbJ,aAAaF,WAAW,GAG7B,oBAACN,aAAa4C,OAAO,EACnBC,eAAe,QACfC,kBAAkB,uBAElB,oBAACb,OAAIrB,UAAU,OACZ,oBAACS,eAAcT,UAAWG,0BAC3B,oBAACO,KACCyB,QAAS/B,cACTX,KAAK,IACLO,UAAWG,yBACZ,cAOT,oBAACkB,OAAIrB,UAAU,wBACb,oBAACd,YACCiD,QAAS/B,cACTgC,QAAQ,YACRpC,UAAU,mCACVqC,aAAW,SACXC,UAAU,iDACX,YAML,oBAACjB,OAAIrB,UAAU,2CACb,oBAACd,YACCO,KAAK,SACL2C,QAAQ,YACRpC,UAAU,iDACX,SAGD,oBAACd,YACCO,KAAK,WACL2C,QAAQ,UACRpC,UAAU,+CACX,eAOX,CAAE"}

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 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";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;
 //# 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 * 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?: {\n    /**\n     * Indicates if the user is signed in.\n     */\n    signedIn: boolean;\n\n    /**\n     * Account information.\n     */\n    account: {\n      /**\n       * Links related to the account.\n       */\n      links: {\n        /**\n         * Dashboard link information.\n         */\n        dashboard: {\n          /**\n           * URL for the dashboard link.\n           */\n          href: string;\n        };\n      };\n    };\n  };\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 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\";\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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"}

package/core/LegacyMeganav/MeganavBlogPostsList/component.js

@@ -0,0 +1,2 @@
+import{queryIdAll}from"../../dom-query";import{selectRecentBlogPosts}from"../../remote-blogs-posts";import{connectState}from"../../remote-data-store";const template=({link,title,pubDate})=>{const[li,a,heading,copy]=["li","a","p","p"].map(el=>document.createElement(el));a.href=link;a.classList.add("ui-meganav-media","group");heading.textContent=title;heading.classList.add("ui-meganav-media-heading");copy.textContent=pubDate;copy.classList.add("ui-meganav-media-copy");a.appendChild(heading);a.appendChild(copy);li.appendChild(a);return li};export default(()=>{connectState(selectRecentBlogPosts,recentBlogPosts=>{if(Array.isArray(recentBlogPosts)&&recentBlogPosts.length>0){const sections=queryIdAll("meganav-company-panel-blog-section");const containers=queryIdAll("meganav-company-panel-recent-blog-posts");Array.from(containers).forEach(container=>{const fragment=document.createDocumentFragment();recentBlogPosts.forEach(post=>fragment.appendChild(template(post)));container.appendChild(fragment)});Array.from(sections).forEach(section=>section.classList.remove("hidden"))}})});
+//# sourceMappingURL=component.js.map

package/core/LegacyMeganav/MeganavBlogPostsList/component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/core/LegacyMeganav/MeganavBlogPostsList/component.js"],"sourcesContent":["import { queryIdAll } from \"../../dom-query\";\nimport { selectRecentBlogPosts } from \"../../remote-blogs-posts\";\nimport { connectState } from \"../../remote-data-store\";\n\nconst template = ({ link, title, pubDate }) => {\n  const [li, a, heading, copy] = [\"li\", \"a\", \"p\", \"p\"].map((el) =>\n    document.createElement(el),\n  );\n\n  a.href = link;\n  a.classList.add(\"ui-meganav-media\", \"group\");\n\n  heading.textContent = title;\n  heading.classList.add(\"ui-meganav-media-heading\");\n\n  copy.textContent = pubDate;\n  copy.classList.add(\"ui-meganav-media-copy\");\n\n  a.appendChild(heading);\n  a.appendChild(copy);\n  li.appendChild(a);\n\n  return li;\n};\n\nexport default () => {\n  connectState(selectRecentBlogPosts, (recentBlogPosts) => {\n    if (Array.isArray(recentBlogPosts) && recentBlogPosts.length > 0) {\n      const sections = queryIdAll(\"meganav-company-panel-blog-section\");\n      const containers = queryIdAll(\"meganav-company-panel-recent-blog-posts\");\n\n      Array.from(containers).forEach((container) => {\n        const fragment = document.createDocumentFragment();\n        recentBlogPosts.forEach((post) => fragment.appendChild(template(post)));\n        container.appendChild(fragment);\n      });\n\n      Array.from(sections).forEach((section) =>\n        section.classList.remove(\"hidden\"),\n      );\n    }\n  });\n};\n"],"names":["queryIdAll","selectRecentBlogPosts","connectState","template","link","title","pubDate","li","a","heading","copy","map","el","document","createElement","href","classList","add","textContent","appendChild","recentBlogPosts","Array","isArray","length","sections","containers","from","forEach","container","fragment","createDocumentFragment","post","section","remove"],"mappings":"AAAA,OAASA,UAAU,KAAQ,iBAAkB,AAC7C,QAASC,qBAAqB,KAAQ,0BAA2B,AACjE,QAASC,YAAY,KAAQ,yBAA0B,CAEvD,MAAMC,SAAW,CAAC,CAAEC,IAAI,CAAEC,KAAK,CAAEC,OAAO,CAAE,IACxC,KAAM,CAACC,GAAIC,EAAGC,QAASC,KAAK,CAAG,CAAC,KAAM,IAAK,IAAK,IAAI,CAACC,GAAG,CAAC,AAACC,IACxDC,SAASC,aAAa,CAACF,IAGzBJ,CAAAA,EAAEO,IAAI,CAAGX,KACTI,EAAEQ,SAAS,CAACC,GAAG,CAAC,mBAAoB,QAEpCR,CAAAA,QAAQS,WAAW,CAAGb,MACtBI,QAAQO,SAAS,CAACC,GAAG,CAAC,2BAEtBP,CAAAA,KAAKQ,WAAW,CAAGZ,QACnBI,KAAKM,SAAS,CAACC,GAAG,CAAC,yBAEnBT,EAAEW,WAAW,CAACV,SACdD,EAAEW,WAAW,CAACT,MACdH,GAAGY,WAAW,CAACX,GAEf,OAAOD,EACT,CAEA,eAAe,CAAA,KACbL,aAAaD,sBAAuB,AAACmB,kBACnC,GAAIC,MAAMC,OAAO,CAACF,kBAAoBA,gBAAgBG,MAAM,CAAG,EAAG,CAChE,MAAMC,SAAWxB,WAAW,sCAC5B,MAAMyB,WAAazB,WAAW,2CAE9BqB,MAAMK,IAAI,CAACD,YAAYE,OAAO,CAAC,AAACC,YAC9B,MAAMC,SAAWhB,SAASiB,sBAAsB,GAChDV,gBAAgBO,OAAO,CAAC,AAACI,MAASF,SAASV,WAAW,CAAChB,SAAS4B,QAChEH,UAAUT,WAAW,CAACU,SACxB,GAEAR,MAAMK,IAAI,CAACF,UAAUG,OAAO,CAAC,AAACK,SAC5BA,QAAQhB,SAAS,CAACiB,MAAM,CAAC,UAE7B,CACF,EACF,CAAA,CAAE"}

package/core/LegacyMeganav/MeganavControl/component.js

@@ -0,0 +1,2 @@
+import{queryId,queryIdAll}from"../../dom-query";const MeganavControl=()=>{const controls=Array.from(queryIdAll("meganav-control"));const panels=Array.from(queryIdAll("meganav-panel"));const mdBreakpoint=getComputedStyle(document.documentElement).getPropertyValue("--bp-md");const hoverEnabled=()=>window.matchMedia(`(hover: hover) and (pointer: fine) and (min-width: ${mdBreakpoint})`).matches;const isSearchControl=node=>node.dataset.control==="search";const isSearchPanelOpen=()=>{const searchPanel=document.querySelector('[data-id="meganav-panel"]#panel-search');if(!searchPanel)return;return!searchPanel.classList.contains("invisible")};const controlsHaveFocus=()=>controls.some(control=>control===document.activeElement);const hover=(control,panel,open)=>{if(hoverEnabled()&&!controlsHaveFocus()&&!isSearchPanelOpen()){const classes=["invisible","visible"];panel.classList.replace(...open?classes:classes.reverse());control.setAttribute("aria-expanded",open);control.dataset.hover=open}};const mouseenterHandler=(control,panel)=>()=>hover(control,panel,true);const mouseleaveHandler=(control,panel)=>()=>hover(control,panel,false);const clickHandler=(control,panel)=>()=>{controls.forEach(node=>node!==control&&node.setAttribute("aria-expanded",false));panels.forEach(node=>node!==panel&&node.classList.replace("visible","invisible"));const ariaExpanded=control.getAttribute("aria-expanded");const openedByHover=control.dataset.hover==="true";if(ariaExpanded==="true"&&!openedByHover){control.setAttribute("aria-expanded",false);panel.classList.replace("visible","invisible")}else{control.setAttribute("aria-expanded",true);panel.classList.replace("invisible","visible")}if(openedByHover){control.dataset.hover=false}if(isSearchControl(control)){const searchInput=queryId("meganav-search-input",panel);if(!searchInput)return;searchInput.focus()}else{control.focus()}};return controls.map(control=>{const item=control.parentNode;const panel=document.querySelector(`#${control.getAttribute("aria-controls")}`);const click=clickHandler(control,panel);control.addEventListener("click",click);let mouseenter,mouseleave;if(!isSearchControl(control)){mouseenter=mouseenterHandler(control,panel);mouseleave=mouseleaveHandler(control,panel);item.addEventListener("mouseenter",mouseenter);item.addEventListener("mouseleave",mouseleave)}return[{teardown:()=>{if(mouseenter&&mouseleave){item.removeEventListener("mouseenter",mouseenter);item.removeEventListener("mouseleave",mouseleave)}control.removeEventListener("click",click)},clear:()=>{control.setAttribute("aria-expanded",false);panel.classList.replace("visible","invisible")}}]}).flat()};export default MeganavControl;
+//# sourceMappingURL=component.js.map

package/core/LegacyMeganav/MeganavControl/component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/core/LegacyMeganav/MeganavControl/component.js"],"sourcesContent":["import { queryId, queryIdAll } from \"../../dom-query\";\n\nconst MeganavControl = () => {\n  const controls = Array.from(queryIdAll(\"meganav-control\"));\n  const panels = Array.from(queryIdAll(\"meganav-panel\"));\n  const mdBreakpoint = getComputedStyle(\n    document.documentElement,\n  ).getPropertyValue(\"--bp-md\");\n\n  const hoverEnabled = () =>\n    window.matchMedia(\n      `(hover: hover) and (pointer: fine) and (min-width: ${mdBreakpoint})`,\n    ).matches;\n\n  const isSearchControl = (node) => node.dataset.control === \"search\";\n\n  const isSearchPanelOpen = () => {\n    const searchPanel = document.querySelector(\n      '[data-id=\"meganav-panel\"]#panel-search',\n    );\n    if (!searchPanel) return;\n    return !searchPanel.classList.contains(\"invisible\");\n  };\n\n  const controlsHaveFocus = () =>\n    controls.some((control) => control === document.activeElement);\n\n  const hover = (control, panel, open) => {\n    if (hoverEnabled() && !controlsHaveFocus() && !isSearchPanelOpen()) {\n      const classes = [\"invisible\", \"visible\"];\n      panel.classList.replace(...(open ? classes : classes.reverse()));\n      control.setAttribute(\"aria-expanded\", open);\n      control.dataset.hover = open;\n    }\n  };\n\n  const mouseenterHandler = (control, panel) => () =>\n    hover(control, panel, true);\n\n  const mouseleaveHandler = (control, panel) => () =>\n    hover(control, panel, false);\n\n  const clickHandler = (control, panel) => () => {\n    controls.forEach(\n      (node) => node !== control && node.setAttribute(\"aria-expanded\", false),\n    );\n\n    panels.forEach(\n      (node) =>\n        node !== panel && node.classList.replace(\"visible\", \"invisible\"),\n    );\n\n    const ariaExpanded = control.getAttribute(\"aria-expanded\");\n\n    // Prevent closing of the panel if it was already opened by hovering\n    const openedByHover = control.dataset.hover === \"true\";\n\n    if (ariaExpanded === \"true\" && !openedByHover) {\n      control.setAttribute(\"aria-expanded\", false);\n      panel.classList.replace(\"visible\", \"invisible\");\n    } else {\n      control.setAttribute(\"aria-expanded\", true);\n      panel.classList.replace(\"invisible\", \"visible\");\n    }\n\n    if (openedByHover) {\n      control.dataset.hover = false;\n    }\n\n    if (isSearchControl(control)) {\n      const searchInput = queryId(\"meganav-search-input\", panel);\n      if (!searchInput) return;\n      searchInput.focus();\n    } else {\n      control.focus();\n    }\n  };\n\n  return controls\n    .map((control) => {\n      const item = control.parentNode;\n      const panel = document.querySelector(\n        `#${control.getAttribute(\"aria-controls\")}`,\n      );\n      const click = clickHandler(control, panel);\n      control.addEventListener(\"click\", click);\n      let mouseenter, mouseleave;\n\n      if (!isSearchControl(control)) {\n        mouseenter = mouseenterHandler(control, panel);\n        mouseleave = mouseleaveHandler(control, panel);\n\n        item.addEventListener(\"mouseenter\", mouseenter);\n        item.addEventListener(\"mouseleave\", mouseleave);\n      }\n\n      return [\n        {\n          teardown: () => {\n            if (mouseenter && mouseleave) {\n              item.removeEventListener(\"mouseenter\", mouseenter);\n              item.removeEventListener(\"mouseleave\", mouseleave);\n            }\n\n            control.removeEventListener(\"click\", click);\n          },\n          clear: () => {\n            control.setAttribute(\"aria-expanded\", false);\n            panel.classList.replace(\"visible\", \"invisible\");\n          },\n        },\n      ];\n    })\n    .flat();\n};\n\nexport default MeganavControl;\n"],"names":["queryId","queryIdAll","MeganavControl","controls","Array","from","panels","mdBreakpoint","getComputedStyle","document","documentElement","getPropertyValue","hoverEnabled","window","matchMedia","matches","isSearchControl","node","dataset","control","isSearchPanelOpen","searchPanel","querySelector","classList","contains","controlsHaveFocus","some","activeElement","hover","panel","open","classes","replace","reverse","setAttribute","mouseenterHandler","mouseleaveHandler","clickHandler","forEach","ariaExpanded","getAttribute","openedByHover","searchInput","focus","map","item","parentNode","click","addEventListener","mouseenter","mouseleave","teardown","removeEventListener","clear","flat"],"mappings":"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"}

package/core/LegacyMeganav/MeganavControlMobileDropdown/component.js

@@ -0,0 +1,2 @@
+import scrollLock from"scroll-lock";import{queryId}from"../../dom-query";const MeganavControlMobileDropdown=({clearPanels})=>{const control=queryId("meganav-control-mobile-dropdown");const dropdown=queryId("meganav-mobile-dropdown");const menuIcon=queryId("meganav-control-mobile-dropdown-menu");const closeIcon=queryId("meganav-control-mobile-dropdown-close");const clickHandler=()=>{const ariaExpanded=control.getAttribute("aria-expanded");if(ariaExpanded==="false"){dropdown.classList.replace("invisible","visible");control.setAttribute("aria-expanded",true);scrollLock.disablePageScroll()}else{dropdown.classList.replace("visible","invisible");control.setAttribute("aria-expanded",false);scrollLock.enablePageScroll();clearPanels()}menuIcon.classList.toggle("hidden");closeIcon.classList.toggle("hidden")};control.addEventListener("click",clickHandler);return{teardown:()=>{control.removeEventListener("click",clickHandler);scrollLock.enablePageScroll()},clear:()=>{dropdown.classList.replace("visible","invisible");control.setAttribute("aria-expanded",false);menuIcon.classList.remove("hidden");closeIcon.classList.add("hidden");scrollLock.enablePageScroll()}}};export default MeganavControlMobileDropdown;
+//# sourceMappingURL=component.js.map