@ably/ui 16.0.0-dev.f34cb058 → 16.1.0-dev.d9810f04

package/README.md

@@ -108,7 +108,7 @@ module.exports = extendConfig((ablyUIConfig) => ({
 @import "@ably/ui/reset/styles.css"; /* needed as we disable the default Tailwind reset */
 @import "@ably/ui/core/styles.css"; /* styles for core module components and more */
 @import "@ably/ui/core/Meganav/component.css";
-@import "@ably/ui/core/ContactFooter/component.css";
+@import "@ably/ui/core/Flash/component.css";
 ```
 
 #### Importing React components

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 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 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 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;
 //# 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     * 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 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,oBAAqBe,kBACtC,oBAACjB,wBACCS,UAAWP,GAAGI,yBAA0Ba,uBAI7CE,OACC,oBAACb,YACCC,UAAU,+DACVC,UAAWA,YAEX,KAGV,CAEA,gBAAeK,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     * 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"}

package/core/Footer/data.js

@@ -0,0 +1,2 @@
+import BestRequirementsWinter2025 from"../images/g2-best-meets-requirements-2025.svg";import BestSupportWinter2025 from"../images/g2-best-support-2025.svg";import HighPerformerWinter2025 from"../images/g2-high-performer-2025.svg";import UsersMostLikelyToRecommend from"../images/g2-users-most-likely-to-recommend-2025.svg";export const footerLinks=[{title:"Products",links:[{label:"Ably Pub/Sub",link:"/pubsub"},{label:"Ably LiveSync",link:"/livesync"},{label:"Ably Chat",link:"/chat"},{label:"Ably Spaces",link:"/spaces"},{label:"Ably Asset Tracking",link:"/docs/asset-tracking"},{label:"Compare our tech",link:"/compare"}]},{title:"Platform",links:[{label:"Infrastructure",link:"/four-pillars-of-dependability"},{label:"Integrations",link:"/integrations"},{label:"SDKs",link:"/docs/sdks"},{label:"Changelog",link:"https://changelog.ably.com/"},{label:"Security & Compliance",link:"/"}]},{title:"Get started",links:[{label:"Documentation",link:"/docs"},{label:"Examples",link:"/examples"},{label:"Pricing",link:"/pricing"},{label:"Realtime A-Z",link:"/topics"},{label:"Support",link:"/support"}]},{title:"Company",links:[{label:"About Ably",link:"/about"},{label:"Blog",link:"/blog"},{label:"Careers",link:"/careers",badge:"WE’RE HIRING"},{label:"Contact us",link:"/contact"}]}];export const bottomFooterLinks=[{label:"Data protection",link:"/data-protection"},{label:"Privacy",link:"/privacy"},{label:"Legals",link:"/legals"},{label:"Cookies",link:"/privacy"}];export const socialLinks=[{key:"x",colorIcon:"icon-social-x",monoIcon:"icon-social-x-mono",link:"https://x.com/ablyrealtime"},{key:"linkedin",colorIcon:"icon-social-linkedin",monoIcon:"icon-social-linkedin-mono",link:"https://www.linkedin.com/company/ably-realtime"},{key:"github",colorIcon:"icon-social-github",monoIcon:"icon-social-github-mono",link:"https://github.com/ably/"},{key:"discord",colorIcon:"icon-social-discord",monoIcon:"icon-social-discord-mono",link:"https://discord.gg/g8yqePUVDn"},{key:"youtube",colorIcon:"icon-social-youtube",monoIcon:"icon-social-youtube-mono",link:"https://www.youtube.com/c/AblyRealtime"}];export const ablyAwards=[{image:BestRequirementsWinter2025,desc:"G2 Best Requirements Winter 2025"},{image:BestSupportWinter2025,desc:"G2 Best Support Winter 2025"},{image:HighPerformerWinter2025,desc:"G2 High Performer Winter 2025"},{image:UsersMostLikelyToRecommend,desc:"G2 Users Most Likely to Recommend Winter 2025"}];
+//# sourceMappingURL=data.js.map

package/core/Footer/data.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/Footer/data.ts"],"sourcesContent":["import { IconName } from \"../Icon/types\";\nimport BestRequirementsWinter2025 from \"../images/g2-best-meets-requirements-2025.svg\";\nimport BestSupportWinter2025 from \"../images/g2-best-support-2025.svg\";\nimport HighPerformerWinter2025 from \"../images/g2-high-performer-2025.svg\";\nimport UsersMostLikelyToRecommend from \"../images/g2-users-most-likely-to-recommend-2025.svg\";\n\ntype FooterLinksProps = {\n  title: string;\n  links: {\n    label: string;\n    link: string;\n    badge?: string;\n  }[];\n};\n\nexport const footerLinks: FooterLinksProps[] = [\n  {\n    title: \"Products\",\n    links: [\n      { label: \"Ably Pub/Sub\", link: \"/pubsub\" },\n      { label: \"Ably LiveSync\", link: \"/livesync\" },\n      { label: \"Ably Chat\", link: \"/chat\" },\n      { label: \"Ably Spaces\", link: \"/spaces\" },\n      { label: \"Ably Asset Tracking\", link: \"/docs/asset-tracking\" },\n      { label: \"Compare our tech\", link: \"/compare\" },\n    ],\n  },\n  {\n    title: \"Platform\",\n    links: [\n      { label: \"Infrastructure\", link: \"/four-pillars-of-dependability\" },\n      { label: \"Integrations\", link: \"/integrations\" },\n      { label: \"SDKs\", link: \"/docs/sdks\" },\n      { label: \"Changelog\", link: \"https://changelog.ably.com/\" },\n      { label: \"Security & Compliance\", link: \"/\" },\n    ],\n  },\n  {\n    title: \"Get started\",\n    links: [\n      { label: \"Documentation\", link: \"/docs\" },\n      { label: \"Examples\", link: \"/examples\" },\n      { label: \"Pricing\", link: \"/pricing\" },\n      { label: \"Realtime A-Z\", link: \"/topics\" },\n      { label: \"Support\", link: \"/support\" },\n    ],\n  },\n  {\n    title: \"Company\",\n    links: [\n      { label: \"About Ably\", link: \"/about\" },\n      { label: \"Blog\", link: \"/blog\" },\n      { label: \"Careers\", link: \"/careers\", badge: \"WE’RE HIRING\" },\n      { label: \"Contact us\", link: \"/contact\" },\n    ],\n  },\n];\n\nexport const bottomFooterLinks = [\n  { label: \"Data protection\", link: \"/data-protection\" },\n  { label: \"Privacy\", link: \"/privacy\" },\n  { label: \"Legals\", link: \"/legals\" },\n  { label: \"Cookies\", link: \"/privacy\" },\n];\n\nexport const socialLinks: {\n  key: string;\n  colorIcon: IconName;\n  monoIcon: IconName;\n  link: string;\n}[] = [\n  {\n    key: \"x\",\n    colorIcon: \"icon-social-x\",\n    monoIcon: \"icon-social-x-mono\",\n    link: \"https://x.com/ablyrealtime\",\n  },\n  {\n    key: \"linkedin\",\n    colorIcon: \"icon-social-linkedin\",\n    monoIcon: \"icon-social-linkedin-mono\",\n    link: \"https://www.linkedin.com/company/ably-realtime\",\n  },\n  {\n    key: \"github\",\n    colorIcon: \"icon-social-github\",\n    monoIcon: \"icon-social-github-mono\",\n    link: \"https://github.com/ably/\",\n  },\n  {\n    key: \"discord\",\n    colorIcon: \"icon-social-discord\",\n    monoIcon: \"icon-social-discord-mono\",\n    link: \"https://discord.gg/g8yqePUVDn\",\n  },\n  {\n    key: \"youtube\",\n    colorIcon: \"icon-social-youtube\",\n    monoIcon: \"icon-social-youtube-mono\",\n    link: \"https://www.youtube.com/c/AblyRealtime\",\n  },\n];\n\nexport const ablyAwards = [\n  {\n    image: BestRequirementsWinter2025,\n    desc: \"G2 Best Requirements Winter 2025\",\n  },\n  {\n    image: BestSupportWinter2025,\n    desc: \"G2 Best Support Winter 2025\",\n  },\n  {\n    image: HighPerformerWinter2025,\n    desc: \"G2 High Performer Winter 2025\",\n  },\n  {\n    image: UsersMostLikelyToRecommend,\n    desc: \"G2 Users Most Likely to Recommend Winter 2025\",\n  },\n];\n"],"names":["BestRequirementsWinter2025","BestSupportWinter2025","HighPerformerWinter2025","UsersMostLikelyToRecommend","footerLinks","title","links","label","link","badge","bottomFooterLinks","socialLinks","key","colorIcon","monoIcon","ablyAwards","image","desc"],"mappings":"AACA,OAAOA,+BAAgC,+CAAgD,AACvF,QAAOC,0BAA2B,oCAAqC,AACvE,QAAOC,4BAA6B,sCAAuC,AAC3E,QAAOC,+BAAgC,sDAAuD,AAW9F,QAAO,MAAMC,YAAkC,CAC7C,CACEC,MAAO,WACPC,MAAO,CACL,CAAEC,MAAO,eAAgBC,KAAM,SAAU,EACzC,CAAED,MAAO,gBAAiBC,KAAM,WAAY,EAC5C,CAAED,MAAO,YAAaC,KAAM,OAAQ,EACpC,CAAED,MAAO,cAAeC,KAAM,SAAU,EACxC,CAAED,MAAO,sBAAuBC,KAAM,sBAAuB,EAC7D,CAAED,MAAO,mBAAoBC,KAAM,UAAW,EAC/C,AACH,EACA,CACEH,MAAO,WACPC,MAAO,CACL,CAAEC,MAAO,iBAAkBC,KAAM,gCAAiC,EAClE,CAAED,MAAO,eAAgBC,KAAM,eAAgB,EAC/C,CAAED,MAAO,OAAQC,KAAM,YAAa,EACpC,CAAED,MAAO,YAAaC,KAAM,6BAA8B,EAC1D,CAAED,MAAO,wBAAyBC,KAAM,GAAI,EAC7C,AACH,EACA,CACEH,MAAO,cACPC,MAAO,CACL,CAAEC,MAAO,gBAAiBC,KAAM,OAAQ,EACxC,CAAED,MAAO,WAAYC,KAAM,WAAY,EACvC,CAAED,MAAO,UAAWC,KAAM,UAAW,EACrC,CAAED,MAAO,eAAgBC,KAAM,SAAU,EACzC,CAAED,MAAO,UAAWC,KAAM,UAAW,EACtC,AACH,EACA,CACEH,MAAO,UACPC,MAAO,CACL,CAAEC,MAAO,aAAcC,KAAM,QAAS,EACtC,CAAED,MAAO,OAAQC,KAAM,OAAQ,EAC/B,CAAED,MAAO,UAAWC,KAAM,WAAYC,MAAO,cAAe,EAC5D,CAAEF,MAAO,aAAcC,KAAM,UAAW,EACzC,AACH,EACD,AAAC,AAEF,QAAO,MAAME,kBAAoB,CAC/B,CAAEH,MAAO,kBAAmBC,KAAM,kBAAmB,EACrD,CAAED,MAAO,UAAWC,KAAM,UAAW,EACrC,CAAED,MAAO,SAAUC,KAAM,SAAU,EACnC,CAAED,MAAO,UAAWC,KAAM,UAAW,EACtC,AAAC,AAEF,QAAO,MAAMG,YAKP,CACJ,CACEC,IAAK,IACLC,UAAW,gBACXC,SAAU,qBACVN,KAAM,4BACR,EACA,CACEI,IAAK,WACLC,UAAW,uBACXC,SAAU,4BACVN,KAAM,gDACR,EACA,CACEI,IAAK,SACLC,UAAW,qBACXC,SAAU,0BACVN,KAAM,0BACR,EACA,CACEI,IAAK,UACLC,UAAW,sBACXC,SAAU,2BACVN,KAAM,+BACR,EACA,CACEI,IAAK,UACLC,UAAW,sBACXC,SAAU,2BACVN,KAAM,wCACR,EACD,AAAC,AAEF,QAAO,MAAMO,WAAa,CACxB,CACEC,MAAOhB,2BACPiB,KAAM,kCACR,EACA,CACED,MAAOf,sBACPgB,KAAM,6BACR,EACA,CACED,MAAOd,wBACPe,KAAM,+BACR,EACA,CACED,MAAOb,2BACPc,KAAM,+CACR,EACD,AAAC"}

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.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;
+import React from"react";import cn from"./utils/cn";import Icon from"./Icon";import Status,{StatusUrl}from"./Status";import Logo from"./Logo";import Badge from"./Badge";import{ablyAwards,bottomFooterLinks,footerLinks,socialLinks}from"./Footer/data";const Footer=()=>{const textColorClassnames="ui-text-menu3 font-medium transition-colors text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000 active:text-neutral-800 active:dark:text-neutral-400 focus:outline focus:outline-gui-focus";return React.createElement("footer",{className:"max-w-screen-xl mx-auto ui-grid-px pt-40 sm:pt-48 md:pt-64 pb-40"},React.createElement("div",{className:"flex flex-col sm:flex-row gap-x-24 gap-y-48 mb-64 justify-between"},React.createElement("div",{className:"flex-1 flex flex-col gap-24"},["light","dark"].map(theme=>React.createElement(Logo,{key:theme,href:"/",theme:theme,additionalLinkAttrs:{className:cn(" focus-base rounded w-[102px]",{"flex dark:hidden":theme==="light","hidden dark:flex":theme==="dark"})}})),React.createElement(Status,{statusUrl:StatusUrl,showDescription:true,additionalCSS:"border border-neutral-300 dark:border-neutral-1000 py-12 px-16 rounded-lg relative w-[fit-content]"}),React.createElement("div",{className:"flex gap-x-24"},socialLinks.map(link=>React.createElement("a",{key:link.key,href:link.link,target:"_blank",rel:"noreferrer noopener","aria-label":`Visit Ably on ${link.key}`,className:"w-20 h-20 group/social-icon"},React.createElement(Icon,{name:link.monoIcon,size:"20px",additionalCSS:"text-neutral-1000 dark:text-neutral-300 group-hover/social-icon:hidden"}),React.createElement(Icon,{name:link.colorIcon,size:"20px",additionalCSS:"hidden group-hover/social-icon:flex"})))),React.createElement("div",{className:"flex gap-8 mt-16"},ablyAwards.map(award=>React.createElement("img",{key:award.desc,src:award.image,alt:award.desc,width:"57",height:"64"})))),React.createElement("div",{className:"flex-1 md:flex-[2] flex flex-row flex-wrap gap-x-24 gap-y-48"},footerLinks.map(({title,links})=>React.createElement("div",{key:title,className:"flex-1 basis-1/3 md:basis-1"},React.createElement("h3",{className:"ui-text-overline2 text-neutral-700 dark:text-neutral-600 mb-16"},title),React.createElement("ul",{className:"flex flex-col gap-y-12"},links.map(({label,link,badge})=>React.createElement("li",{key:label,className:"flex gap-x-8"},React.createElement("a",{href:link,className:textColorClassnames,"aria-label":`Visit ${label}`},label),badge&&React.createElement(Badge,{size:"xs"},badge)))))))),React.createElement("div",{className:"pt-24 border-t border-neutral-300 dark:border-neutral-1000"},[bottomFooterLinks].map((links,index)=>React.createElement("div",{key:`link-set-${index}`,className:"flex gap-24"},links.map(link=>React.createElement("a",{key:link.label,href:link.link,className:textColorClassnames,"aria-label":`Visit ${link.label}`},link.label))))))};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    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":"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"}
+{"version":3,"sources":["../../src/core/Footer.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\nimport Status, { StatusUrl } from \"./Status\";\nimport { Theme } from \"./styles/colors/types\";\nimport Logo from \"./Logo\";\nimport Badge from \"./Badge\";\nimport {\n  ablyAwards,\n  bottomFooterLinks,\n  footerLinks,\n  socialLinks,\n} from \"./Footer/data\";\n\nconst Footer = () => {\n  const textColorClassnames =\n    \"ui-text-menu3 font-medium transition-colors text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000 active:text-neutral-800 active:dark:text-neutral-400 focus:outline focus:outline-gui-focus\";\n  return (\n    <footer className=\"max-w-screen-xl mx-auto ui-grid-px pt-40 sm:pt-48 md:pt-64 pb-40\">\n      <div className=\"flex flex-col sm:flex-row gap-x-24 gap-y-48 mb-64 justify-between\">\n        <div className=\"flex-1 flex flex-col gap-24\">\n          {([\"light\", \"dark\"] as Theme[]).map((theme) => (\n            <Logo\n              key={theme}\n              href=\"/\"\n              theme={theme}\n              additionalLinkAttrs={{\n                className: cn(\" focus-base rounded w-[102px]\", {\n                  \"flex dark:hidden\": theme === \"light\",\n                  \"hidden dark:flex\": theme === \"dark\",\n                }),\n              }}\n            />\n          ))}\n\n          <Status\n            statusUrl={StatusUrl}\n            showDescription\n            additionalCSS=\"border border-neutral-300 dark:border-neutral-1000 py-12 px-16 rounded-lg relative w-[fit-content]\"\n          />\n\n          <div className=\"flex gap-x-24\">\n            {socialLinks.map((link) => (\n              <a\n                key={link.key}\n                href={link.link}\n                target=\"_blank\"\n                rel=\"noreferrer noopener\"\n                aria-label={`Visit Ably on ${link.key}`}\n                className=\"w-20 h-20 group/social-icon\"\n              >\n                <Icon\n                  name={link.monoIcon}\n                  size=\"20px\"\n                  additionalCSS=\"text-neutral-1000 dark:text-neutral-300 group-hover/social-icon:hidden\"\n                />\n                <Icon\n                  name={link.colorIcon}\n                  size=\"20px\"\n                  additionalCSS=\"hidden group-hover/social-icon:flex\"\n                />\n              </a>\n            ))}\n          </div>\n          <div className=\"flex gap-8 mt-16\">\n            {ablyAwards.map((award) => (\n              <img\n                key={award.desc}\n                src={award.image}\n                alt={award.desc}\n                width=\"57\"\n                height=\"64\"\n              />\n            ))}\n          </div>\n        </div>\n        <div className=\"flex-1 md:flex-[2] flex flex-row flex-wrap gap-x-24 gap-y-48\">\n          {footerLinks.map(({ title, links }) => (\n            <div key={title} className=\"flex-1 basis-1/3 md:basis-1\">\n              <h3 className=\"ui-text-overline2 text-neutral-700 dark:text-neutral-600 mb-16\">\n                {title}\n              </h3>\n              <ul className=\"flex flex-col gap-y-12\">\n                {links.map(({ label, link, badge }) => (\n                  <li key={label} className=\"flex gap-x-8\">\n                    <a\n                      href={link}\n                      className={textColorClassnames}\n                      aria-label={`Visit ${label}`}\n                    >\n                      {label}\n                    </a>\n                    {badge && <Badge size=\"xs\">{badge}</Badge>}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      <div className=\"pt-24 border-t border-neutral-300 dark:border-neutral-1000\">\n        {[bottomFooterLinks].map((links, index) => (\n          <div key={`link-set-${index}`} className=\"flex gap-24\">\n            {links.map((link) => (\n              <a\n                key={link.label}\n                href={link.link}\n                className={textColorClassnames}\n                aria-label={`Visit ${link.label}`}\n              >\n                {link.label}\n              </a>\n            ))}\n          </div>\n        ))}\n      </div>\n    </footer>\n  );\n};\n\nexport default Footer;\n"],"names":["React","cn","Icon","Status","StatusUrl","Logo","Badge","ablyAwards","bottomFooterLinks","footerLinks","socialLinks","Footer","textColorClassnames","footer","className","div","map","theme","key","href","additionalLinkAttrs","statusUrl","showDescription","additionalCSS","link","a","target","rel","aria-label","name","monoIcon","size","colorIcon","award","img","desc","src","image","alt","width","height","title","links","h3","ul","label","badge","li","index"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,SAAU,QAAS,AAC1B,QAAOC,QAAUC,SAAS,KAAQ,UAAW,AAE7C,QAAOC,SAAU,QAAS,AAC1B,QAAOC,UAAW,SAAU,AAC5B,QACEC,UAAU,CACVC,iBAAiB,CACjBC,WAAW,CACXC,WAAW,KACN,eAAgB,CAEvB,MAAMC,OAAS,KACb,MAAMC,oBACJ,qOACF,OACE,oBAACC,UAAOC,UAAU,oEAChB,oBAACC,OAAID,UAAU,qEACb,oBAACC,OAAID,UAAU,+BACZ,AAAC,CAAC,QAAS,OAAO,CAAaE,GAAG,CAAC,AAACC,OACnC,oBAACZ,MACCa,IAAKD,MACLE,KAAK,IACLF,MAAOA,MACPG,oBAAqB,CACnBN,UAAWb,GAAG,gCAAiC,CAC7C,mBAAoBgB,QAAU,QAC9B,mBAAoBA,QAAU,MAChC,EACF,KAIJ,oBAACd,QACCkB,UAAWjB,UACXkB,gBAAAA,KACAC,cAAc,uGAGhB,oBAACR,OAAID,UAAU,iBACZJ,YAAYM,GAAG,CAAC,AAACQ,MAChB,oBAACC,KACCP,IAAKM,KAAKN,GAAG,CACbC,KAAMK,KAAKA,IAAI,CACfE,OAAO,SACPC,IAAI,sBACJC,aAAY,CAAC,cAAc,EAAEJ,KAAKN,GAAG,CAAC,CAAC,CACvCJ,UAAU,+BAEV,oBAACZ,MACC2B,KAAML,KAAKM,QAAQ,CACnBC,KAAK,OACLR,cAAc,2EAEhB,oBAACrB,MACC2B,KAAML,KAAKQ,SAAS,CACpBD,KAAK,OACLR,cAAc,2CAKtB,oBAACR,OAAID,UAAU,oBACZP,WAAWS,GAAG,CAAC,AAACiB,OACf,oBAACC,OACChB,IAAKe,MAAME,IAAI,CACfC,IAAKH,MAAMI,KAAK,CAChBC,IAAKL,MAAME,IAAI,CACfI,MAAM,KACNC,OAAO,UAKf,oBAACzB,OAAID,UAAU,gEACZL,YAAYO,GAAG,CAAC,CAAC,CAAEyB,KAAK,CAAEC,KAAK,CAAE,GAChC,oBAAC3B,OAAIG,IAAKuB,MAAO3B,UAAU,+BACzB,oBAAC6B,MAAG7B,UAAU,kEACX2B,OAEH,oBAACG,MAAG9B,UAAU,0BACX4B,MAAM1B,GAAG,CAAC,CAAC,CAAE6B,KAAK,CAAErB,IAAI,CAAEsB,KAAK,CAAE,GAChC,oBAACC,MAAG7B,IAAK2B,MAAO/B,UAAU,gBACxB,oBAACW,KACCN,KAAMK,KACNV,UAAWF,oBACXgB,aAAY,CAAC,MAAM,EAAEiB,MAAM,CAAC,EAE3BA,OAEFC,OAAS,oBAACxC,OAAMyB,KAAK,MAAMe,cAS1C,oBAAC/B,OAAID,UAAU,8DACZ,CAACN,kBAAkB,CAACQ,GAAG,CAAC,CAAC0B,MAAOM,QAC/B,oBAACjC,OAAIG,IAAK,CAAC,SAAS,EAAE8B,MAAM,CAAC,CAAElC,UAAU,eACtC4B,MAAM1B,GAAG,CAAC,AAACQ,MACV,oBAACC,KACCP,IAAKM,KAAKqB,KAAK,CACf1B,KAAMK,KAAKA,IAAI,CACfV,UAAWF,oBACXgB,aAAY,CAAC,MAAM,EAAEJ,KAAKqB,KAAK,CAAC,CAAC,EAEhCrB,KAAKqB,KAAK,MAQ3B,CAEA,gBAAelC,MAAO"}

package/core/Header/HeaderLinks.js.map

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

@@ -0,0 +1,2 @@
+import React from"react";import Icon from"../Icon";import _absUrl from"../url-base.js";import{StatusIcon}from"../Status";const LegacyFooter=({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 LegacyFooter;
+//# sourceMappingURL=LegacyFooter.js.map

package/core/LegacyFooter/LegacyFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/LegacyFooter/LegacyFooter.tsx"],"sourcesContent":["import React from \"react\";\n\nimport Icon from \"../Icon\";\nimport _absUrl from \"../url-base.js\";\nimport { StatusIcon } from \"../Status\";\n\ntype LegacyFooterProps = {\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 LegacyFooter = ({ paths, urlBase, statusUrl }: LegacyFooterProps) => {\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 LegacyFooter;\n"],"names":["React","Icon","_absUrl","StatusIcon","LegacyFooter","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":"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"}

package/core/Meganav/component.js

@@ -0,0 +1,2 @@
+import throttle from"lodash.throttle";import{queryId,queryIdAll}from"../dom-query";import MeganavControl from"../MeganavControl/component.js";import MeganavControlMobileDropdown from"../MeganavControlMobileDropdown/component.js";import MobilePanelOpenClick from"../MeganavControlMobilePanelOpen/component.js";import MobilePanelCloseClick from"../MeganavControlMobilePanelClose/component.js";import MeganavSearchAutocomplete from"../MeganavSearchAutocomplete/component.js";import MeganavSearchSuggestions from"../MeganavSearchSuggestions/component.js";const windowOnBlur=closeAll=>{window.onblur=()=>closeAll();return{teardown:()=>window.onblur=null}};const documentClick=closeAll=>{const meganav=queryId("meganav");const clickHandler=e=>{if(meganav.contains(e.target))return;closeAll()};document.addEventListener("click",clickHandler);return{teardown:()=>document.removeEventListener("click",clickHandler)}};const documentScroll=themeName=>{if(themeName!=="transparentToWhite")return{teardown:()=>{}};const meganav=queryId("meganav");const navItems=queryIdAll("meganav-link");const controlMobileDropdownMenu=queryId("meganav-control-mobile-dropdown-menu");const controlMobileDropdownClose=queryId("meganav-control-mobile-dropdown-close");const controls=queryIdAll("meganav-control");const signUpBtn=queryId("meganav-sign-up-btn");const invertTextCollection=[...Array.from(controls),...Array.from(navItems),queryId("meganav-logo")];const invertMobleDropdownColor=invert=>{const whiteToBlack=["ui-icon-white","ui-icon-cool-black"];const blackToWhite=[...whiteToBlack].reverse();if(invert){controlMobileDropdownMenu?.classList.replace(...whiteToBlack);controlMobileDropdownClose?.classList.replace(...whiteToBlack)}else{controlMobileDropdownMenu?.classList.replace(...blackToWhite);controlMobileDropdownClose?.classList.replace(...blackToWhite)}};const inverSignupBtnColors=invert=>{if(invert){signUpBtn?.classList.replace("bg-white","bg-cool-black");signUpBtn?.classList.replace("text-cool-black","text-white")}else{signUpBtn?.classList.replace("bg-cool-black","bg-white");signUpBtn?.classList.replace("text-white","text-cool-black")}};const scrollHandler=throttle(()=>{if(window.scrollY>5){meganav.classList.replace("bg-transparent","bg-white");inverSignupBtnColors(true);invertMobleDropdownColor(true);invertTextCollection.forEach(n=>n.classList.replace("text-white","text-cool-black"))}else{meganav.classList.replace("bg-white","bg-transparent");inverSignupBtnColors(false);invertMobleDropdownColor(false);invertTextCollection.forEach(n=>n.classList.replace("text-cool-black","text-white"))}},150);document.addEventListener("scroll",scrollHandler);return{teardown:()=>document.removeEventListener("scroll",scrollHandler)}};export default function Meganav({themeName,addSearchApiKey}){const controls=MeganavControl();const panelOpenControls=MobilePanelOpenClick();const panelCloseControls=MobilePanelCloseClick();const search=MeganavSearchAutocomplete(addSearchApiKey);const searchSuggestions=MeganavSearchSuggestions();const mobileDropdownControl=MeganavControlMobileDropdown({clearPanels:()=>[...panelOpenControls,...panelCloseControls].forEach(i=>i.clear())});const closeAll=()=>[mobileDropdownControl,searchSuggestions,...panelOpenControls,...panelCloseControls,...controls,...search].forEach(i=>i.clear());const teardowns=[documentScroll(themeName??null),documentClick(closeAll),windowOnBlur(closeAll),mobileDropdownControl,searchSuggestions,...controls,...panelOpenControls,...panelCloseControls,...search].map(i=>i.teardown);return()=>teardowns.forEach(teardown=>teardown())}
+//# sourceMappingURL=component.js.map

package/core/{LegacyMeganav → Meganav}/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/LegacyMeganav/component.js"],"sourcesContent":["import throttle from \"lodash.throttle\";\n\n// Glossary:\n// item - is the element which contains both the control and the panel - these are adjacent\n// control - interactive element that controls showing and hiding of dropdown or panel\n// panel - container for meganav content\n// dropdown - container for top level items on mobile\n// clear - return to initial state\n// teardown - remove all event listeners (for example when removing nodes)\n\nimport { queryId, queryIdAll } from \"../dom-query\";\n\nimport MeganavControl from \"./MeganavControl/component.js\";\nimport MeganavControlMobileDropdown from \"./MeganavControlMobileDropdown/component.js\";\nimport MobilePanelOpenClick from \"./MeganavControlMobilePanelOpen/component.js\";\nimport MobilePanelCloseClick from \"./MeganavControlMobilePanelClose/component.js\";\nimport MeganavSearchAutocomplete from \"./MeganavSearchAutocomplete/component.js\";\nimport MeganavSearchSuggestions from \"./MeganavSearchSuggestions/component.js\";\n\n// Close menu when user clicks outside of viewport\nconst windowOnBlur = (closeAll) => {\n  window.onblur = () => closeAll();\n  return { teardown: () => (window.onblur = null) };\n};\n\n// Close menu when click/tap outside of nav\nconst documentClick = (closeAll) => {\n  const meganav = queryId(\"meganav\");\n\n  const clickHandler = (e) => {\n    if (meganav.contains(e.target)) return;\n    closeAll();\n  };\n\n  document.addEventListener(\"click\", clickHandler);\n\n  return {\n    teardown: () => document.removeEventListener(\"click\", clickHandler),\n  };\n};\n\n// Invert from transparent to white\nconst documentScroll = (themeName) => {\n  if (themeName !== \"transparentToWhite\") return { teardown: () => {} };\n\n  const meganav = queryId(\"meganav\");\n  const navItems = queryIdAll(\"meganav-link\");\n  const controlMobileDropdownMenu = queryId(\n    \"meganav-control-mobile-dropdown-menu\",\n  );\n  const controlMobileDropdownClose = queryId(\n    \"meganav-control-mobile-dropdown-close\",\n  );\n  const controls = queryIdAll(\"meganav-control\");\n  const signUpBtn = queryId(\"meganav-sign-up-btn\");\n\n  const invertTextCollection = [\n    ...Array.from(controls),\n    ...Array.from(navItems),\n    queryId(\"meganav-logo\"),\n  ];\n\n  const invertMobleDropdownColor = (invert) => {\n    const whiteToBlack = [\"ui-icon-white\", \"ui-icon-cool-black\"];\n    const blackToWhite = [...whiteToBlack].reverse();\n\n    if (invert) {\n      controlMobileDropdownMenu?.classList.replace(...whiteToBlack);\n      controlMobileDropdownClose?.classList.replace(...whiteToBlack);\n    } else {\n      controlMobileDropdownMenu?.classList.replace(...blackToWhite);\n      controlMobileDropdownClose?.classList.replace(...blackToWhite);\n    }\n  };\n\n  const inverSignupBtnColors = (invert) => {\n    if (invert) {\n      signUpBtn?.classList.replace(\"bg-white\", \"bg-cool-black\");\n      signUpBtn?.classList.replace(\"text-cool-black\", \"text-white\");\n    } else {\n      signUpBtn?.classList.replace(\"bg-cool-black\", \"bg-white\");\n      signUpBtn?.classList.replace(\"text-white\", \"text-cool-black\");\n    }\n  };\n\n  const scrollHandler = throttle(() => {\n    if (window.scrollY > 5) {\n      meganav.classList.replace(\"bg-transparent\", \"bg-white\");\n      inverSignupBtnColors(true);\n      invertMobleDropdownColor(true);\n\n      invertTextCollection.forEach((n) =>\n        n.classList.replace(\"text-white\", \"text-cool-black\"),\n      );\n    } else {\n      meganav.classList.replace(\"bg-white\", \"bg-transparent\");\n      inverSignupBtnColors(false);\n      invertMobleDropdownColor(false);\n\n      invertTextCollection.forEach((n) =>\n        n.classList.replace(\"text-cool-black\", \"text-white\"),\n      );\n    }\n  }, 150);\n\n  document.addEventListener(\"scroll\", scrollHandler);\n\n  return {\n    teardown: () => document.removeEventListener(\"scroll\", scrollHandler),\n  };\n};\n\nexport default function Meganav({ themeName, addSearchApiKey }) {\n  const controls = MeganavControl();\n  const panelOpenControls = MobilePanelOpenClick();\n  const panelCloseControls = MobilePanelCloseClick();\n  const search = MeganavSearchAutocomplete(addSearchApiKey);\n  const searchSuggestions = MeganavSearchSuggestions();\n\n  const mobileDropdownControl = MeganavControlMobileDropdown({\n    clearPanels: () =>\n      [...panelOpenControls, ...panelCloseControls].forEach((i) => i.clear()),\n  });\n\n  const closeAll = () =>\n    [\n      mobileDropdownControl,\n      searchSuggestions,\n      ...panelOpenControls,\n      ...panelCloseControls,\n      ...controls,\n      ...search,\n    ].forEach((i) => i.clear());\n\n  const teardowns = [\n    documentScroll(themeName ?? null),\n    documentClick(closeAll),\n    windowOnBlur(closeAll),\n    mobileDropdownControl,\n    searchSuggestions,\n    ...controls,\n    ...panelOpenControls,\n    ...panelCloseControls,\n    ...search,\n  ].map((i) => i.teardown);\n\n  return () => teardowns.forEach((teardown) => teardown());\n}\n"],"names":["throttle","queryId","queryIdAll","MeganavControl","MeganavControlMobileDropdown","MobilePanelOpenClick","MobilePanelCloseClick","MeganavSearchAutocomplete","MeganavSearchSuggestions","windowOnBlur","closeAll","window","onblur","teardown","documentClick","meganav","clickHandler","e","contains","target","document","addEventListener","removeEventListener","documentScroll","themeName","navItems","controlMobileDropdownMenu","controlMobileDropdownClose","controls","signUpBtn","invertTextCollection","Array","from","invertMobleDropdownColor","invert","whiteToBlack","blackToWhite","reverse","classList","replace","inverSignupBtnColors","scrollHandler","scrollY","forEach","n","Meganav","addSearchApiKey","panelOpenControls","panelCloseControls","search","searchSuggestions","mobileDropdownControl","clearPanels","i","clear","teardowns","map"],"mappings":"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"}
+{"version":3,"sources":["../../../src/core/Meganav/component.js"],"sourcesContent":["import throttle from \"lodash.throttle\";\n\n// Glossary:\n// item - is the element which contains both the control and the panel - these are adjacent\n// control - interactive element that controls showing and hiding of dropdown or panel\n// panel - container for meganav content\n// dropdown - container for top level items on mobile\n// clear - return to initial state\n// teardown - remove all event listeners (for example when removing nodes)\n\nimport { queryId, queryIdAll } from \"../dom-query\";\n\nimport MeganavControl from \"../MeganavControl/component.js\";\nimport MeganavControlMobileDropdown from \"../MeganavControlMobileDropdown/component.js\";\nimport MobilePanelOpenClick from \"../MeganavControlMobilePanelOpen/component.js\";\nimport MobilePanelCloseClick from \"../MeganavControlMobilePanelClose/component.js\";\nimport MeganavSearchAutocomplete from \"../MeganavSearchAutocomplete/component.js\";\nimport MeganavSearchSuggestions from \"../MeganavSearchSuggestions/component.js\";\n\n// Close menu when user clicks outside of viewport\nconst windowOnBlur = (closeAll) => {\n  window.onblur = () => closeAll();\n  return { teardown: () => (window.onblur = null) };\n};\n\n// Close menu when click/tap outside of nav\nconst documentClick = (closeAll) => {\n  const meganav = queryId(\"meganav\");\n\n  const clickHandler = (e) => {\n    if (meganav.contains(e.target)) return;\n    closeAll();\n  };\n\n  document.addEventListener(\"click\", clickHandler);\n\n  return {\n    teardown: () => document.removeEventListener(\"click\", clickHandler),\n  };\n};\n\n// Invert from transparent to white\nconst documentScroll = (themeName) => {\n  if (themeName !== \"transparentToWhite\") return { teardown: () => {} };\n\n  const meganav = queryId(\"meganav\");\n  const navItems = queryIdAll(\"meganav-link\");\n  const controlMobileDropdownMenu = queryId(\n    \"meganav-control-mobile-dropdown-menu\",\n  );\n  const controlMobileDropdownClose = queryId(\n    \"meganav-control-mobile-dropdown-close\",\n  );\n  const controls = queryIdAll(\"meganav-control\");\n  const signUpBtn = queryId(\"meganav-sign-up-btn\");\n\n  const invertTextCollection = [\n    ...Array.from(controls),\n    ...Array.from(navItems),\n    queryId(\"meganav-logo\"),\n  ];\n\n  const invertMobleDropdownColor = (invert) => {\n    const whiteToBlack = [\"ui-icon-white\", \"ui-icon-cool-black\"];\n    const blackToWhite = [...whiteToBlack].reverse();\n\n    if (invert) {\n      controlMobileDropdownMenu?.classList.replace(...whiteToBlack);\n      controlMobileDropdownClose?.classList.replace(...whiteToBlack);\n    } else {\n      controlMobileDropdownMenu?.classList.replace(...blackToWhite);\n      controlMobileDropdownClose?.classList.replace(...blackToWhite);\n    }\n  };\n\n  const inverSignupBtnColors = (invert) => {\n    if (invert) {\n      signUpBtn?.classList.replace(\"bg-white\", \"bg-cool-black\");\n      signUpBtn?.classList.replace(\"text-cool-black\", \"text-white\");\n    } else {\n      signUpBtn?.classList.replace(\"bg-cool-black\", \"bg-white\");\n      signUpBtn?.classList.replace(\"text-white\", \"text-cool-black\");\n    }\n  };\n\n  const scrollHandler = throttle(() => {\n    if (window.scrollY > 5) {\n      meganav.classList.replace(\"bg-transparent\", \"bg-white\");\n      inverSignupBtnColors(true);\n      invertMobleDropdownColor(true);\n\n      invertTextCollection.forEach((n) =>\n        n.classList.replace(\"text-white\", \"text-cool-black\"),\n      );\n    } else {\n      meganav.classList.replace(\"bg-white\", \"bg-transparent\");\n      inverSignupBtnColors(false);\n      invertMobleDropdownColor(false);\n\n      invertTextCollection.forEach((n) =>\n        n.classList.replace(\"text-cool-black\", \"text-white\"),\n      );\n    }\n  }, 150);\n\n  document.addEventListener(\"scroll\", scrollHandler);\n\n  return {\n    teardown: () => document.removeEventListener(\"scroll\", scrollHandler),\n  };\n};\n\nexport default function Meganav({ themeName, addSearchApiKey }) {\n  const controls = MeganavControl();\n  const panelOpenControls = MobilePanelOpenClick();\n  const panelCloseControls = MobilePanelCloseClick();\n  const search = MeganavSearchAutocomplete(addSearchApiKey);\n  const searchSuggestions = MeganavSearchSuggestions();\n\n  const mobileDropdownControl = MeganavControlMobileDropdown({\n    clearPanels: () =>\n      [...panelOpenControls, ...panelCloseControls].forEach((i) => i.clear()),\n  });\n\n  const closeAll = () =>\n    [\n      mobileDropdownControl,\n      searchSuggestions,\n      ...panelOpenControls,\n      ...panelCloseControls,\n      ...controls,\n      ...search,\n    ].forEach((i) => i.clear());\n\n  const teardowns = [\n    documentScroll(themeName ?? null),\n    documentClick(closeAll),\n    windowOnBlur(closeAll),\n    mobileDropdownControl,\n    searchSuggestions,\n    ...controls,\n    ...panelOpenControls,\n    ...panelCloseControls,\n    ...search,\n  ].map((i) => i.teardown);\n\n  return () => teardowns.forEach((teardown) => teardown());\n}\n"],"names":["throttle","queryId","queryIdAll","MeganavControl","MeganavControlMobileDropdown","MobilePanelOpenClick","MobilePanelCloseClick","MeganavSearchAutocomplete","MeganavSearchSuggestions","windowOnBlur","closeAll","window","onblur","teardown","documentClick","meganav","clickHandler","e","contains","target","document","addEventListener","removeEventListener","documentScroll","themeName","navItems","controlMobileDropdownMenu","controlMobileDropdownClose","controls","signUpBtn","invertTextCollection","Array","from","invertMobleDropdownColor","invert","whiteToBlack","blackToWhite","reverse","classList","replace","inverSignupBtnColors","scrollHandler","scrollY","forEach","n","Meganav","addSearchApiKey","panelOpenControls","panelCloseControls","search","searchSuggestions","mobileDropdownControl","clearPanels","i","clear","teardowns","map"],"mappings":"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"}