@ably/ui 16.0.0-dev.937d7376 → 16.0.0-dev.fc84d6ff

package/core/FeaturedLink.js

@@ -1,2 +1,2 @@
-import React from"react";import Icon from"./Icon";import cn from"./utils/cn";const buildTargetAndRel=(url,newWindow)=>{const props={};if(newWindow){props.target="_blank";if(url.startsWith("/")&&!url.startsWith("//")){props.rel="noopener"}else{props.rel="noopenner noreferrer"}}return props};const FeaturedLink=({url,textSize="text-p2",iconColor,flush=false,reverse=false,additionalCSS="",newWindow=false,onClick=undefined,children,disabled=false})=>{const targetAndRel=buildTargetAndRel(url,newWindow);return React.createElement("a",{...onClick?{}:{href:url},className:cn("font-sans font-bold block group/featured-link",{"text-gui-unavailable pointer-events-none":disabled},{"text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus":!disabled},{"py-8":!flush},`ui-${textSize}`,additionalCSS),style:{"--featured-link-icon-size":`var(${textSize.replace("text","--fs")})`},...targetAndRel,onClick:onClick},reverse?React.createElement(React.Fragment,null,React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:cn("align-middle mr-8 relative -top-1 -right-4 transition-[right] transform rotate-180",{"group-hover/featured-link:right-0":!disabled})}),children):React.createElement(React.Fragment,null,children,React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:cn("align-middle ml-8 relative -top-1 -left-4 transition-[left]",{"group-hover/featured-link:left-0":!disabled})})))};export default FeaturedLink;
+import React from"react";import Icon from"./Icon";import cn from"./utils/cn";const buildTargetAndRel=(url,newWindow)=>{const props={};if(newWindow){props.target="_blank";if(url.startsWith("/")&&!url.startsWith("//")){props.rel="noopener"}else{props.rel="noopenner noreferrer"}}return props};const FeaturedLink=({url,textSize="text-p2",iconColor,flush=false,reverse=false,additionalCSS="",newWindow=false,onClick=undefined,children,disabled=false,groupHoverClassName=""})=>{const targetAndRel=buildTargetAndRel(url,newWindow);return React.createElement("a",{...onClick?{}:{href:url},className:cn("font-sans font-bold block group/featured-link",{"text-gui-unavailable pointer-events-none":disabled},{"text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus":!disabled},{"py-8":!flush},`ui-${textSize}`,additionalCSS),style:{"--featured-link-icon-size":`var(${textSize.replace("text","--fs")})`},...targetAndRel,onClick:onClick},reverse?React.createElement(React.Fragment,null,React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:cn("align-middle mr-8 relative -top-1 -right-4 transition-[right] transform rotate-180",{"group-hover/featured-link:right-0":!disabled},groupHoverClassName)}),children):React.createElement(React.Fragment,null,children,React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:cn("align-middle ml-8 relative -top-1 -left-4 transition-[left]",{"group-hover/featured-link:left-0":!disabled},groupHoverClassName)})))};export default FeaturedLink;
 //# sourceMappingURL=FeaturedLink.js.map

package/core/FeaturedLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/FeaturedLink.tsx"],"sourcesContent":["import React, { CSSProperties, ReactNode } from \"react\";\n\nimport Icon from \"./Icon\";\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport cn from \"./utils/cn\";\n\ntype FeaturedLinkProps = {\n  url: string;\n  children: ReactNode;\n  textSize?: string;\n  iconColor?: ColorClass | ColorThemeSet;\n  flush?: boolean;\n  reverse?: boolean;\n  additionalCSS?: string;\n  newWindow?: boolean;\n  onClick?: () => void;\n  disabled?: boolean;\n};\n\ntype TargetProps = { target?: string; rel?: string };\n\n// When generating links with target=_blank, we only add `noreferrer` to\n// links that don't start with `/`, so we can continue tracking referrers\n// across our own domains\nconst buildTargetAndRel = (url: string, newWindow: boolean) => {\n  const props: TargetProps = {};\n\n  if (newWindow) {\n    props.target = \"_blank\";\n\n    if (url.startsWith(\"/\") && !url.startsWith(\"//\")) {\n      props.rel = \"noopener\";\n    } else {\n      props.rel = \"noopenner noreferrer\";\n    }\n  }\n\n  return props;\n};\n\nconst FeaturedLink = ({\n  url,\n  textSize = \"text-p2\",\n  iconColor,\n  flush = false,\n  reverse = false,\n  additionalCSS = \"\",\n  newWindow = false,\n  onClick = undefined,\n  children,\n  disabled = false,\n}: FeaturedLinkProps) => {\n  const targetAndRel = buildTargetAndRel(url, newWindow);\n\n  return (\n    <a\n      {...(onClick ? {} : { href: url })}\n      className={cn(\n        \"font-sans font-bold block group/featured-link\",\n        { \"text-gui-unavailable pointer-events-none\": disabled },\n        {\n          \"text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus\":\n            !disabled,\n        },\n        { \"py-8\": !flush },\n        `ui-${textSize}`,\n        additionalCSS,\n      )}\n      style={\n        {\n          \"--featured-link-icon-size\": `var(${textSize.replace(\n            \"text\",\n            \"--fs\",\n          )})`,\n        } as CSSProperties\n      }\n      {...targetAndRel}\n      onClick={onClick}\n    >\n      {reverse ? (\n        <>\n          <Icon\n            name=\"icon-gui-arrow-long-right-outline\"\n            size={`calc(var(--featured-link-icon-size) * 1.25)`}\n            color={iconColor}\n            additionalCSS={cn(\n              \"align-middle mr-8 relative -top-1 -right-4 transition-[right] transform rotate-180\",\n              { \"group-hover/featured-link:right-0\": !disabled },\n            )}\n          />\n          {children}\n        </>\n      ) : (\n        <>\n          {children}\n          <Icon\n            name=\"icon-gui-arrow-long-right-outline\"\n            size={`calc(var(--featured-link-icon-size) * 1.25)`}\n            color={iconColor}\n            additionalCSS={cn(\n              \"align-middle ml-8 relative -top-1 -left-4 transition-[left]\",\n              { \"group-hover/featured-link:left-0\": !disabled },\n            )}\n          />\n        </>\n      )}\n    </a>\n  );\n};\n\nexport default FeaturedLink;\n"],"names":["React","Icon","cn","buildTargetAndRel","url","newWindow","props","target","startsWith","rel","FeaturedLink","textSize","iconColor","flush","reverse","additionalCSS","onClick","undefined","children","disabled","targetAndRel","a","href","className","style","replace","name","size","color"],"mappings":"AAAA,OAAOA,UAAyC,OAAQ,AAExD,QAAOC,SAAU,QAAS,AAE1B,QAAOC,OAAQ,YAAa,CAoB5B,MAAMC,kBAAoB,CAACC,IAAaC,aACtC,MAAMC,MAAqB,CAAC,EAE5B,GAAID,UAAW,CACbC,MAAMC,MAAM,CAAG,SAEf,GAAIH,IAAII,UAAU,CAAC,MAAQ,CAACJ,IAAII,UAAU,CAAC,MAAO,CAChDF,MAAMG,GAAG,CAAG,UACd,KAAO,CACLH,MAAMG,GAAG,CAAG,sBACd,CACF,CAEA,OAAOH,KACT,EAEA,MAAMI,aAAe,CAAC,CACpBN,GAAG,CACHO,SAAW,SAAS,CACpBC,SAAS,CACTC,MAAQ,KAAK,CACbC,QAAU,KAAK,CACfC,cAAgB,EAAE,CAClBV,UAAY,KAAK,CACjBW,QAAUC,SAAS,CACnBC,QAAQ,CACRC,SAAW,KAAK,CACE,IAClB,MAAMC,aAAejB,kBAAkBC,IAAKC,WAE5C,OACE,oBAACgB,KACE,GAAIL,QAAU,CAAC,EAAI,CAAEM,KAAMlB,GAAI,CAAC,CACjCmB,UAAWrB,GACT,gDACA,CAAE,2CAA4CiB,QAAS,EACvD,CACE,gHACE,CAACA,QACL,EACA,CAAE,OAAQ,CAACN,KAAM,EACjB,CAAC,GAAG,EAAEF,SAAS,CAAC,CAChBI,eAEFS,MACE,CACE,4BAA6B,CAAC,IAAI,EAAEb,SAASc,OAAO,CAClD,OACA,QACA,CAAC,CAAC,AACN,EAED,GAAGL,YAAY,CAChBJ,QAASA,SAERF,QACC,wCACE,oBAACb,MACCyB,KAAK,oCACLC,KAAM,CAAC,2CAA2C,CAAC,CACnDC,MAAOhB,UACPG,cAAeb,GACb,qFACA,CAAE,oCAAqC,CAACiB,QAAS,KAGpDD,UAGH,wCACGA,SACD,oBAACjB,MACCyB,KAAK,oCACLC,KAAM,CAAC,2CAA2C,CAAC,CACnDC,MAAOhB,UACPG,cAAeb,GACb,8DACA,CAAE,mCAAoC,CAACiB,QAAS,MAO9D,CAEA,gBAAeT,YAAa"}
+{"version":3,"sources":["../../src/core/FeaturedLink.tsx"],"sourcesContent":["import React, { CSSProperties, ReactNode } from \"react\";\n\nimport Icon from \"./Icon\";\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport cn from \"./utils/cn\";\n\ntype FeaturedLinkProps = {\n  url: string;\n  children: ReactNode;\n  textSize?: string;\n  iconColor?: ColorClass | ColorThemeSet;\n  flush?: boolean;\n  reverse?: boolean;\n  additionalCSS?: string;\n  newWindow?: boolean;\n  onClick?: () => void;\n  disabled?: boolean;\n  /**\n   * Optional class name for group hover state.\n   */\n  groupHoverClassName?: string;\n};\n\ntype TargetProps = { target?: string; rel?: string };\n\n// When generating links with target=_blank, we only add `noreferrer` to\n// links that don't start with `/`, so we can continue tracking referrers\n// across our own domains\nconst buildTargetAndRel = (url: string, newWindow: boolean) => {\n  const props: TargetProps = {};\n\n  if (newWindow) {\n    props.target = \"_blank\";\n\n    if (url.startsWith(\"/\") && !url.startsWith(\"//\")) {\n      props.rel = \"noopener\";\n    } else {\n      props.rel = \"noopenner noreferrer\";\n    }\n  }\n\n  return props;\n};\n\nconst FeaturedLink = ({\n  url,\n  textSize = \"text-p2\",\n  iconColor,\n  flush = false,\n  reverse = false,\n  additionalCSS = \"\",\n  newWindow = false,\n  onClick = undefined,\n  children,\n  disabled = false,\n  groupHoverClassName = \"\",\n}: FeaturedLinkProps) => {\n  const targetAndRel = buildTargetAndRel(url, newWindow);\n\n  return (\n    <a\n      {...(onClick ? {} : { href: url })}\n      className={cn(\n        \"font-sans font-bold block group/featured-link\",\n        { \"text-gui-unavailable pointer-events-none\": disabled },\n        {\n          \"text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus\":\n            !disabled,\n        },\n        { \"py-8\": !flush },\n        `ui-${textSize}`,\n        additionalCSS,\n      )}\n      style={\n        {\n          \"--featured-link-icon-size\": `var(${textSize.replace(\n            \"text\",\n            \"--fs\",\n          )})`,\n        } as CSSProperties\n      }\n      {...targetAndRel}\n      onClick={onClick}\n    >\n      {reverse ? (\n        <>\n          <Icon\n            name=\"icon-gui-arrow-long-right-outline\"\n            size={`calc(var(--featured-link-icon-size) * 1.25)`}\n            color={iconColor}\n            additionalCSS={cn(\n              \"align-middle mr-8 relative -top-1 -right-4 transition-[right] transform rotate-180\",\n              { \"group-hover/featured-link:right-0\": !disabled },\n              groupHoverClassName,\n            )}\n          />\n          {children}\n        </>\n      ) : (\n        <>\n          {children}\n          <Icon\n            name=\"icon-gui-arrow-long-right-outline\"\n            size={`calc(var(--featured-link-icon-size) * 1.25)`}\n            color={iconColor}\n            additionalCSS={cn(\n              \"align-middle ml-8 relative -top-1 -left-4 transition-[left]\",\n              {\n                \"group-hover/featured-link:left-0\": !disabled,\n              },\n              groupHoverClassName,\n            )}\n          />\n        </>\n      )}\n    </a>\n  );\n};\n\nexport default FeaturedLink;\n"],"names":["React","Icon","cn","buildTargetAndRel","url","newWindow","props","target","startsWith","rel","FeaturedLink","textSize","iconColor","flush","reverse","additionalCSS","onClick","undefined","children","disabled","groupHoverClassName","targetAndRel","a","href","className","style","replace","name","size","color"],"mappings":"AAAA,OAAOA,UAAyC,OAAQ,AAExD,QAAOC,SAAU,QAAS,AAE1B,QAAOC,OAAQ,YAAa,CAwB5B,MAAMC,kBAAoB,CAACC,IAAaC,aACtC,MAAMC,MAAqB,CAAC,EAE5B,GAAID,UAAW,CACbC,MAAMC,MAAM,CAAG,SAEf,GAAIH,IAAII,UAAU,CAAC,MAAQ,CAACJ,IAAII,UAAU,CAAC,MAAO,CAChDF,MAAMG,GAAG,CAAG,UACd,KAAO,CACLH,MAAMG,GAAG,CAAG,sBACd,CACF,CAEA,OAAOH,KACT,EAEA,MAAMI,aAAe,CAAC,CACpBN,GAAG,CACHO,SAAW,SAAS,CACpBC,SAAS,CACTC,MAAQ,KAAK,CACbC,QAAU,KAAK,CACfC,cAAgB,EAAE,CAClBV,UAAY,KAAK,CACjBW,QAAUC,SAAS,CACnBC,QAAQ,CACRC,SAAW,KAAK,CAChBC,oBAAsB,EAAE,CACN,IAClB,MAAMC,aAAelB,kBAAkBC,IAAKC,WAE5C,OACE,oBAACiB,KACE,GAAIN,QAAU,CAAC,EAAI,CAAEO,KAAMnB,GAAI,CAAC,CACjCoB,UAAWtB,GACT,gDACA,CAAE,2CAA4CiB,QAAS,EACvD,CACE,gHACE,CAACA,QACL,EACA,CAAE,OAAQ,CAACN,KAAM,EACjB,CAAC,GAAG,EAAEF,SAAS,CAAC,CAChBI,eAEFU,MACE,CACE,4BAA6B,CAAC,IAAI,EAAEd,SAASe,OAAO,CAClD,OACA,QACA,CAAC,CAAC,AACN,EAED,GAAGL,YAAY,CAChBL,QAASA,SAERF,QACC,wCACE,oBAACb,MACC0B,KAAK,oCACLC,KAAM,CAAC,2CAA2C,CAAC,CACnDC,MAAOjB,UACPG,cAAeb,GACb,qFACA,CAAE,oCAAqC,CAACiB,QAAS,EACjDC,uBAGHF,UAGH,wCACGA,SACD,oBAACjB,MACC0B,KAAK,oCACLC,KAAM,CAAC,2CAA2C,CAAC,CACnDC,MAAOjB,UACPG,cAAeb,GACb,8DACA,CACE,mCAAoC,CAACiB,QACvC,EACAC,wBAOd,CAEA,gBAAeV,YAAa"}

package/core/Flyout.js

@@ -1,2 +1,2 @@
-import React,{useState}from"react";import{NavigationMenu,NavigationMenuItem,NavigationMenuList,NavigationMenuTrigger,NavigationMenuContent,NavigationMenuViewport,NavigationMenuLink}from"@radix-ui/react-navigation-menu";import cn from"./utils/cn";import{componentMaxHeight,HEADER_HEIGHT}from"./utils/heights";const DEFAULT_MENU_LINK_STYLING="ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-1200 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between";const DEFAULT_VIEWPORT_STYLING="relative overflow-hidden w-full h-[var(--radix-navigation-menu-viewport-height)] origin-[top_center] transition-[width,_height] duration-300 data-[state=closed]:animate-scale-out data-[state=open]:animate-scale-in sm:w-[var(--radix-navigation-menu-viewport-width)]";const PANEL_ANIMATION="data-[motion=from-end]:animate-enter-from-right data-[motion=from-start]:animate-enter-from-left data-[motion=to-end]:animate-exit-to-right data-[motion=to-start]:animate-exit-to-left";const FlyOverlay=({className,fadingOut})=>React.createElement("div",{className:cn("absolute left-0 right-0 h-screen w-full opacity-0",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut},className),style:{height:componentMaxHeight(HEADER_HEIGHT),top:HEADER_HEIGHT}});const Flyout=({menuItems,className,flyOutClassName,menuLinkClassName,viewPortClassName,hasAnimation})=>{const[isOpen,setIsOpen]=useState(false);const[fadingOut,setFadingOut]=useState(false);const closeMenu=()=>{setFadingOut(true);setTimeout(()=>{setIsOpen(false);setFadingOut(false)},150)};return React.createElement(React.Fragment,null,React.createElement(NavigationMenu,{className:cn(className,"flex w-full"),onValueChange:val=>val?setIsOpen(true):closeMenu(),delayDuration:0},React.createElement(NavigationMenuList,{className:"flex list-none center"},menuItems.map(({name,content,link,panelClassName})=>content?React.createElement(NavigationMenuItem,{key:name},React.createElement(NavigationMenuTrigger,{className:cn("group outline-none focus:outline-none select-none cursor-pointer relative",DEFAULT_MENU_LINK_STYLING,menuLinkClassName)},name),React.createElement(NavigationMenuContent,{className:cn("absolute right-0 top-0 p-24 z-10",hasAnimation&&PANEL_ANIMATION,panelClassName)},content)):React.createElement(NavigationMenuLink,{key:name},React.createElement("a",{href:link,className:cn(DEFAULT_MENU_LINK_STYLING,menuLinkClassName)},name)))),React.createElement("div",{className:cn("absolute left-0 top-full",flyOutClassName)},React.createElement(NavigationMenuViewport,{className:cn(DEFAULT_VIEWPORT_STYLING,viewPortClassName)}))),isOpen?React.createElement(FlyOverlay,{className:"bg-neutral-1300 dark:bg-neutral-000 opacity-10 z-20 h-screen",fadingOut:fadingOut}):null)};export default Flyout;
+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: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","rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-1200",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,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 opacity-10 z-20 h-screen mix-blend-multiply",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 left-0 top-full\", flyOutClassName)}>\n          <NavigationMenuViewport\n            className={cn(DEFAULT_VIEWPORT_STYLING, viewPortClassName)}\n          />\n        </div>\n      </NavigationMenu>\n      {isOpen ? (\n        <FlyOverlay\n          className=\"bg-neutral-1300 dark:bg-neutral-000 opacity-10 z-20 h-screen\"\n          fadingOut={fadingOut}\n        />\n      ) : null}\n    </>\n  );\n};\n\nexport default Flyout;\n"],"names":["React","useState","NavigationMenu","NavigationMenuItem","NavigationMenuList","NavigationMenuTrigger","NavigationMenuContent","NavigationMenuViewport","NavigationMenuLink","cn","componentMaxHeight","HEADER_HEIGHT","DEFAULT_MENU_LINK_STYLING","DEFAULT_VIEWPORT_STYLING","PANEL_ANIMATION","FlyOverlay","className","fadingOut","div","style","height","top","Flyout","menuItems","flyOutClassName","menuLinkClassName","viewPortClassName","hasAnimation","isOpen","setIsOpen","setFadingOut","closeMenu","setTimeout","onValueChange","val","delayDuration","map","name","content","link","panelClassName","key","a","href"],"mappings":"AAAA,OAAOA,OAASC,QAAQ,KAAQ,OAAQ,AACxC,QACEC,cAAc,CACdC,kBAAkB,CAClBC,kBAAkB,CAClBC,qBAAqB,CACrBC,qBAAqB,CACrBC,sBAAsB,CACtBC,kBAAkB,KACb,iCAAkC,AACzC,QAAOC,OAAQ,YAAa,AAC5B,QAASC,kBAAkB,CAAEC,aAAa,KAAQ,iBAAkB,CAiDpE,MAAMC,0BACJ,yNACF,MAAMC,yBACJ,2QACF,MAAMC,gBACJ,0LAEF,MAAMC,WAAa,CAAC,CAClBC,SAAS,CACTC,SAAS,CAIV,GACC,oBAACC,OACCF,UAAWP,GACT,oDACA,CACE,2DAA4D,CAACQ,UAC7D,4DAA6DA,SAC/D,EACAD,WAEFG,MAAO,CAAEC,OAAQV,mBAAmBC,eAAgBU,IAAKV,aAAc,IAI3E,MAAMW,OAAS,CAAC,CACdC,SAAS,CACTP,SAAS,CACTQ,eAAe,CACfC,iBAAiB,CACjBC,iBAAiB,CACjBC,YAAY,CACA,IACZ,KAAM,CAACC,OAAQC,UAAU,CAAG5B,SAAS,OACrC,KAAM,CAACgB,UAAWa,aAAa,CAAG7B,SAAS,OAE3C,MAAM8B,UAAY,KAChBD,aAAa,MAEbE,WAAW,KACTH,UAAU,OACVC,aAAa,MACf,EAAG,IACL,EAEA,OACE,wCACE,oBAAC5B,gBACCc,UAAWP,GAAGO,UAAW,eACzBiB,cAAe,AAACC,KAASA,IAAML,UAAU,MAAQE,YACjDI,cAAe,GAEf,oBAAC/B,oBAAmBY,UAAU,yBAC3BO,UAAUa,GAAG,CAAC,CAAC,CAAEC,IAAI,CAAEC,OAAO,CAAEC,IAAI,CAAEC,cAAc,CAAE,GACrDF,QACE,oBAACnC,oBAAmBsC,IAAKJ,MACvB,oBAAChC,uBACCW,UAAWP,GACT,4EACAG,0BACAa,oBAGDY,MAEH,oBAAC/B,uBACCU,UAAWP,GACT,mCACAkB,cAAgBb,gBAChB0B,iBAGDF,UAIL,oBAAC9B,oBAAmBiC,IAAKJ,MACvB,oBAACK,KACCC,KAAMJ,KACNvB,UAAWP,GAAGG,0BAA2Ba,oBAExCY,SAOX,oBAACnB,OAAIF,UAAWP,GAAG,2BAA4Be,kBAC7C,oBAACjB,wBACCS,UAAWP,GAAGI,yBAA0Ba,uBAI7CE,OACC,oBAACb,YACCC,UAAU,+DACVC,UAAWA,YAEX,KAGV,CAEA,gBAAeK,MAAO"}
+{"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 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                    \"rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-1200\",\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\n                key={name}\n                href={link}\n                className={cn(DEFAULT_MENU_LINK_STYLING, menuLinkClassName)}\n              >\n                {name}\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 opacity-10 z-20 h-screen mix-blend-multiply\"\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","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,8JACF,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,4EACA,6DACAG,0BACAa,oBAGDY,MAEH,oBAAC/B,uBACCU,UAAWP,GACT,mCACAkB,cAAgBb,gBAChB0B,iBAGDF,UAIL,oBAAC9B,oBACCiC,IAAKJ,KACLK,KAAMH,KACNvB,UAAWP,GAAGG,0BAA2Ba,oBAExCY,QAMT,oBAACnB,OAAIF,UAAWP,GAAG,oBAAqBe,kBACtC,oBAACjB,wBACCS,UAAWP,GAAGI,yBAA0Ba,uBAI7CE,OACC,oBAACb,YACCC,UAAU,8DACVC,UAAWA,YAEX,KAGV,CAEA,gBAAeK,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\" | \"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"}
+{"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"}

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

package/core/LegacyMeganav/LegacyMeganav.js

@@ -0,0 +1,2 @@
+import React,{useEffect,useState}from"react";import{connectState}from"../remote-data-store.js";import{selectSessionData}from"../remote-session-data.js";import Logo from"../Logo";import MeganavData from"./component.json";import MeganavScripts from"./component.js";import MeganavItemsDesktop from"./MeganavItemsDesktop";import MeganavItemsSignedIn from"./MeganavItemsSignedIn";import MeganavItemsMobile from"./MeganavItemsMobile";import Notice from"../Notice";import _absUrl from"../url-base.js";import MeganavContentProducts from"./MeganavContentProducts";import MeganavContentUseCases from"./MeganavContentUseCases";import MeganavContentCompany from"./MeganavContentCompany";import MeganavContentDevelopers from"./MeganavContentDevelopers";import MeganavSearch from"./MeganavSearch";const SignIn=({sessionState,theme,loginLink,absUrl,searchDataId})=>{return sessionState.signedIn?React.createElement(MeganavItemsSignedIn,{absUrl:absUrl,sessionState:sessionState,theme:theme,searchDataId:searchDataId}):React.createElement("ul",{className:"hidden md:flex items-center"},React.createElement("li",{className:"ui-meganav-item"},React.createElement("a",{href:absUrl("/contact"),className:`ui-meganav-link ${theme.textColor}`,"data-id":"meganav-link"},"Contact us")),React.createElement("li",{className:"ui-meganav-item"},React.createElement("a",{href:absUrl(loginLink),className:`ui-meganav-link mr-0 ${theme.textColor}`,"data-id":"meganav-link"},"Login")),React.createElement("li",{className:"ui-meganav-item"},React.createElement(MeganavSearch,{absUrl:absUrl,dataId:searchDataId})),React.createElement("li",{className:"ui-meganav-item"},React.createElement("a",{href:absUrl("/sign-up"),"data-id":"meganav-sign-up-btn",className:`ui-btn p-btn-small ${theme.buttonBackgroundColor} ${theme.buttonTextColor}`},"Sign up free")))};const SignInPlaceholder=()=>React.createElement("div",null);const panels={MeganavContentProducts,MeganavContentUseCases,MeganavContentCompany,MeganavContentDevelopers};const LegacyMeganav=({paths,themeName="white",notice,loginLink="/login",urlBase,addSearchApiKey,statusUrl,searchDataId})=>{const[sessionState,setSessionState]=useState();useEffect(()=>{connectState(selectSessionData,setSessionState)},[]);useEffect(()=>{const teardown=MeganavScripts({themeName,addSearchApiKey});return()=>teardown()},[sessionState]);const theme=MeganavData.themes[themeName];const absUrl=path=>_absUrl(path,urlBase);return React.createElement("nav",{className:`ui-meganav-wrapper ${theme.backgroundColor} ${theme.barShadow}`,"data-id":"meganav","aria-label":"Main"},notice&&React.createElement(Notice,{...notice.props,config:notice.config}),React.createElement("div",{className:"ui-meganav ui-grid-px"},React.createElement("div",{className:"mr-24"},React.createElement(Logo,{dataId:"meganav-logo",href:urlBase,logoUrl:paths?.logo})),React.createElement(MeganavItemsDesktop,{panels:panels,paths:paths,theme:theme,absUrl:absUrl,statusUrl:statusUrl}),sessionState?React.createElement(SignIn,{sessionState:sessionState,theme:theme,loginLink:loginLink,absUrl:absUrl,searchDataId:searchDataId}):React.createElement(SignInPlaceholder,null),React.createElement(MeganavItemsMobile,{panels:panels,sessionState:sessionState,paths:paths,theme:theme,loginLink:loginLink,absUrl:absUrl,statusUrl:statusUrl,searchDataId:searchDataId})))};export default LegacyMeganav;
+//# sourceMappingURL=LegacyMeganav.js.map

package/core/LegacyMeganav/LegacyMeganav.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/LegacyMeganav/LegacyMeganav.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useState } from \"react\";\nimport { connectState } from \"../remote-data-store.js\";\nimport { selectSessionData } from \"../remote-session-data.js\";\nimport Logo from \"../Logo\";\nimport MeganavData from \"./component.json\";\nimport MeganavScripts from \"./component.js\";\nimport MeganavItemsDesktop from \"./MeganavItemsDesktop\";\nimport MeganavItemsSignedIn from \"./MeganavItemsSignedIn\";\nimport MeganavItemsMobile from \"./MeganavItemsMobile\";\nimport Notice from \"../Notice\";\nimport _absUrl from \"../url-base.js\";\nimport MeganavContentProducts from \"./MeganavContentProducts\";\nimport MeganavContentUseCases from \"./MeganavContentUseCases\";\nimport MeganavContentCompany from \"./MeganavContentCompany\";\nimport MeganavContentDevelopers from \"./MeganavContentDevelopers\";\nimport MeganavSearch from \"./MeganavSearch\";\nimport { ColorClass } from \"../styles/colors/types\";\n\nexport type MeganavTheme = {\n  backgroundColor?: ColorClass;\n  textColor?: ColorClass;\n  buttonBackgroundColor?: ColorClass;\n  buttonTextColor?: ColorClass;\n  mobileMenuColor: ColorClass;\n  logoTextColor?: ColorClass;\n  barShadow?: string;\n};\n\nexport type AbsUrl = (path: string) => string;\n\nexport type MeganavPaths = {\n  logo?: string;\n  iconSprites: string;\n  ablyStack: string;\n  blogThumb1: string;\n  blogThumb2: string;\n  blogThumb3: string;\n  awsLogo?: string;\n};\n\nexport type MeganavPanels = {\n  [index: string]: ({\n    paths,\n    absUrl,\n    statusUrl,\n  }: {\n    paths?: MeganavPaths;\n    absUrl: (path: string) => string;\n    statusUrl: string;\n  }) => ReactNode;\n};\n\nexport type MeganavSessionState = {\n  signedIn: boolean;\n  logOut: {\n    token: string;\n    href: string;\n    text: string;\n  };\n  accountName: string;\n  preferredEmail: string;\n  account: {\n    links: {\n      dashboard: {\n        href: string;\n      };\n    };\n  };\n  mySettings: {\n    text: string;\n    href: string;\n  };\n  myAccessTokens: {\n    text: string;\n    href: string;\n  };\n};\n\ntype SignInProps = {\n  sessionState: MeganavSessionState;\n  theme: MeganavTheme;\n  loginLink: string;\n  absUrl: AbsUrl;\n  searchDataId?: string;\n};\n\n// This type is based on the API response from the notice API and the data\n// passed into the Meganav component, which then turns it into something\n// the Notice component can use. The type is exported for the benefit of\n// Voltaire\nexport type MeganavNoticeProps = {\n  props: {\n    title: string;\n    bodyText: string;\n    buttonLink: string;\n    buttonLabel: string;\n    closeBtn: boolean;\n  };\n  config: {\n    cookieId: string;\n    noticeId: string | number;\n    options: {\n      collapse: boolean;\n    };\n  };\n};\n\ntype MeganavProps = {\n  paths?: MeganavPaths;\n  themeName: \"white\" | \"black\" | \"transparentToWhite\";\n  notice?: MeganavNoticeProps;\n  loginLink?: string;\n  urlBase?: string;\n  addSearchApiKey: string;\n  statusUrl: string;\n  searchDataId?: string;\n};\n\nconst SignIn = ({\n  sessionState,\n  theme,\n  loginLink,\n  absUrl,\n  searchDataId,\n}: SignInProps) => {\n  return sessionState.signedIn ? (\n    <MeganavItemsSignedIn\n      absUrl={absUrl}\n      sessionState={sessionState}\n      theme={theme}\n      searchDataId={searchDataId}\n    />\n  ) : (\n    <ul className=\"hidden md:flex items-center\">\n      <li className=\"ui-meganav-item\">\n        <a\n          href={absUrl(\"/contact\")}\n          className={`ui-meganav-link ${theme.textColor}`}\n          data-id=\"meganav-link\"\n        >\n          Contact us\n        </a>\n      </li>\n      <li className=\"ui-meganav-item\">\n        <a\n          href={absUrl(loginLink)}\n          className={`ui-meganav-link mr-0 ${theme.textColor}`}\n          data-id=\"meganav-link\"\n        >\n          Login\n        </a>\n      </li>\n      <li className=\"ui-meganav-item\">\n        <MeganavSearch absUrl={absUrl} dataId={searchDataId} />\n      </li>\n      <li className=\"ui-meganav-item\">\n        <a\n          href={absUrl(\"/sign-up\")}\n          data-id=\"meganav-sign-up-btn\"\n          className={`ui-btn p-btn-small ${theme.buttonBackgroundColor} ${theme.buttonTextColor}`}\n        >\n          Sign up free\n        </a>\n      </li>\n    </ul>\n  );\n};\n\nconst SignInPlaceholder = () => <div />;\n\nconst panels = {\n  MeganavContentProducts,\n  MeganavContentUseCases,\n  MeganavContentCompany,\n  MeganavContentDevelopers,\n};\n\nconst LegacyMeganav = ({\n  paths,\n  themeName = \"white\",\n  notice,\n  loginLink = \"/login\",\n  urlBase,\n  addSearchApiKey,\n  statusUrl,\n  searchDataId,\n}: MeganavProps) => {\n  const [sessionState, setSessionState] = useState<MeganavSessionState>();\n\n  useEffect(() => {\n    // Note if state is never updated, sessionState stays null and never removes the placeholder.\n    // This makes SSR consistent (ie. we always show the placeholder)\n    connectState(selectSessionData, setSessionState);\n  }, []);\n\n  useEffect(() => {\n    const teardown = MeganavScripts({ themeName, addSearchApiKey });\n    return () => teardown();\n  }, [sessionState]);\n\n  const theme = MeganavData.themes[themeName] as MeganavTheme;\n  const absUrl = (path: string) => _absUrl(path, urlBase);\n\n  return (\n    <nav\n      className={`ui-meganav-wrapper ${theme.backgroundColor} ${theme.barShadow}`}\n      data-id=\"meganav\"\n      aria-label=\"Main\"\n    >\n      {notice && <Notice {...notice.props} config={notice.config} />}\n      <div className=\"ui-meganav ui-grid-px\">\n        <div className=\"mr-24\">\n          <Logo dataId=\"meganav-logo\" href={urlBase} logoUrl={paths?.logo} />\n        </div>\n\n        <MeganavItemsDesktop\n          panels={panels}\n          paths={paths}\n          theme={theme}\n          absUrl={absUrl}\n          statusUrl={statusUrl}\n        />\n\n        {/* Because we load the session state through fetch, we display a placeholder until fetch returns */}\n        {sessionState ? (\n          <SignIn\n            sessionState={sessionState}\n            theme={theme}\n            loginLink={loginLink}\n            absUrl={absUrl}\n            searchDataId={searchDataId}\n          />\n        ) : (\n          <SignInPlaceholder />\n        )}\n\n        <MeganavItemsMobile\n          panels={panels}\n          sessionState={sessionState}\n          paths={paths}\n          theme={theme}\n          loginLink={loginLink}\n          absUrl={absUrl}\n          statusUrl={statusUrl}\n          searchDataId={searchDataId}\n        />\n      </div>\n    </nav>\n  );\n};\n\nexport default LegacyMeganav;\n"],"names":["React","useEffect","useState","connectState","selectSessionData","Logo","MeganavData","MeganavScripts","MeganavItemsDesktop","MeganavItemsSignedIn","MeganavItemsMobile","Notice","_absUrl","MeganavContentProducts","MeganavContentUseCases","MeganavContentCompany","MeganavContentDevelopers","MeganavSearch","SignIn","sessionState","theme","loginLink","absUrl","searchDataId","signedIn","ul","className","li","a","href","textColor","data-id","dataId","buttonBackgroundColor","buttonTextColor","SignInPlaceholder","div","panels","LegacyMeganav","paths","themeName","notice","urlBase","addSearchApiKey","statusUrl","setSessionState","teardown","themes","path","nav","backgroundColor","barShadow","aria-label","props","config","logoUrl","logo"],"mappings":"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"}

package/core/LegacyMeganav/MeganavBlogPostsList.js

@@ -0,0 +1,2 @@
+import React from"react";import FeaturedLink from"../FeaturedLink";const MeganavBlogPostsList=({recentBlogPosts,absUrl})=>recentBlogPosts?React.createElement("div",{className:"col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0"},React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-company-panel-list-blog"},"Blog"),React.createElement("ul",{className:"mb-8","aria-labelledby":"meganav-company-panel-list-blog"},recentBlogPosts.map(post=>React.createElement("li",{key:post.link},React.createElement("a",{href:post.link,className:"ui-meganav-media group"},React.createElement("p",{className:"ui-meganav-media-heading"},post.title),React.createElement("p",{className:"ui-meganav-media-copy"},post.pubDate))))),React.createElement(FeaturedLink,{url:absUrl("/blog"),textSize:"text-p3"},"More from our Blog")):null;export default MeganavBlogPostsList;
+//# sourceMappingURL=MeganavBlogPostsList.js.map

package/core/LegacyMeganav/MeganavBlogPostsList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/LegacyMeganav/MeganavBlogPostsList.tsx"],"sourcesContent":["import React from \"react\";\n\nimport FeaturedLink from \"../FeaturedLink\";\nimport { AbsUrl } from \"./LegacyMeganav\";\n\ntype MeganavBlogPostsListProps = {\n  recentBlogPosts: {\n    link: string;\n    title: string;\n    pubDate: string;\n  }[];\n  absUrl: AbsUrl;\n};\n\nconst MeganavBlogPostsList = ({\n  recentBlogPosts,\n  absUrl,\n}: MeganavBlogPostsListProps) =>\n  recentBlogPosts ? (\n    <div className=\"col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0\">\n      <h3 className=\"ui-meganav-overline\" id=\"meganav-company-panel-list-blog\">\n        Blog\n      </h3>\n      <ul className=\"mb-8\" aria-labelledby=\"meganav-company-panel-list-blog\">\n        {recentBlogPosts.map((post) => (\n          <li key={post.link}>\n            <a href={post.link} className=\"ui-meganav-media group\">\n              <p className=\"ui-meganav-media-heading\">{post.title}</p>\n              <p className=\"ui-meganav-media-copy\">{post.pubDate}</p>\n            </a>\n          </li>\n        ))}\n      </ul>\n\n      <FeaturedLink url={absUrl(\"/blog\")} textSize=\"text-p3\">\n        More from our Blog\n      </FeaturedLink>\n    </div>\n  ) : null;\n\nexport default MeganavBlogPostsList;\n"],"names":["React","FeaturedLink","MeganavBlogPostsList","recentBlogPosts","absUrl","div","className","h3","id","ul","aria-labelledby","map","post","li","key","link","a","href","p","title","pubDate","url","textSize"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAE1B,QAAOC,iBAAkB,iBAAkB,CAY3C,MAAMC,qBAAuB,CAAC,CAC5BC,eAAe,CACfC,MAAM,CACoB,GAC1BD,gBACE,oBAACE,OAAIC,UAAU,mFACb,oBAACC,MAAGD,UAAU,sBAAsBE,GAAG,mCAAkC,QAGzE,oBAACC,MAAGH,UAAU,OAAOI,kBAAgB,mCAClCP,gBAAgBQ,GAAG,CAAC,AAACC,MACpB,oBAACC,MAAGC,IAAKF,KAAKG,IAAI,EAChB,oBAACC,KAAEC,KAAML,KAAKG,IAAI,CAAET,UAAU,0BAC5B,oBAACY,KAAEZ,UAAU,4BAA4BM,KAAKO,KAAK,EACnD,oBAACD,KAAEZ,UAAU,yBAAyBM,KAAKQ,OAAO,MAM1D,oBAACnB,cAAaoB,IAAKjB,OAAO,SAAUkB,SAAS,WAAU,uBAIvD,IAEN,gBAAepB,oBAAqB"}

package/core/LegacyMeganav/MeganavContentCompany.js

@@ -0,0 +1,2 @@
+import React from"react";import MeganavBlogPostsList from"./MeganavBlogPostsList";import ConnectStateWrapper from"../ConnectStateWrapper";import{selectRecentBlogPosts}from"../remote-blogs-posts.js";import Icon from"../Icon";const MeganavContentCompany=({paths,absUrl})=>{const BlogPostsList=ConnectStateWrapper(MeganavBlogPostsList,{recentBlogPosts:selectRecentBlogPosts});return React.createElement("div",{className:"flex max-w-screen-xl mx-auto"},React.createElement("div",{className:"ui-meganav-content-spacer"}),React.createElement("section",{className:"grid grid-cols-12 ui-grid-gap-x w-full"},React.createElement("div",{className:"col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24"},React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-company-panel-list-why-companies"},"Why companies choose Ably"),React.createElement("ul",{"aria-labelledby":"meganav-company-panel-list-why-companies"},React.createElement("li",null,React.createElement("a",{href:absUrl("/customers"),className:"ui-meganav-media-with-image group"},React.createElement(Icon,{name:"icon-display-customers-col",size:"2.5rem"}),React.createElement("div",{className:"flex flex-col justify-center"},React.createElement("p",{className:"ui-meganav-media-heading"},"Customers"),React.createElement("p",{className:"ui-meganav-media-copy"},"Ably supports customers across multiple industries.")))),React.createElement("li",null,React.createElement("a",{href:absUrl("/case-studies"),className:"ui-meganav-media-with-image group"},React.createElement(Icon,{name:"icon-display-case-studies-col",size:"2.5rem"}),React.createElement("div",{className:"flex flex-col justify-center"},React.createElement("p",{className:"ui-meganav-media-heading"},"Case studies"),React.createElement("p",{className:"ui-meganav-media-copy"},"Discover how customers are benefiting from Ably.")))),React.createElement("li",null,React.createElement("a",{href:absUrl("/compare"),className:"ui-meganav-media-with-image group"},React.createElement(Icon,{name:"icon-display-compare-tech-col",size:"2.5rem"}),React.createElement("div",{className:"flex flex-col justify-center"},React.createElement("p",{className:"ui-meganav-media-heading"},"Compare our tech"),React.createElement("p",{className:"ui-meganav-media-copy"},"Choose the right realtime service.")))),React.createElement("li",null,React.createElement("a",{href:absUrl("/aws"),className:"ui-meganav-media-with-image group"},paths&&React.createElement("img",{src:paths.awsLogo,alt:"AWS logo"}),React.createElement("div",{className:"flex flex-col justify-center"},React.createElement("p",{className:"ui-meganav-media-heading"},"Partners"),React.createElement("p",{className:"ui-meganav-media-copy"},"Ably collaborates and integrates with AWS.")))))),React.createElement("div",{className:"col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0"},React.createElement("ul",{className:"md:mt-40","aria-labelledby":"meganav-company-panel-list-why-companies"},React.createElement("li",null,React.createElement("a",{href:absUrl("/resources"),className:"ui-meganav-media-with-image group"},React.createElement(Icon,{name:"icon-display-resources-col",size:"2.5rem"}),React.createElement("div",{className:"flex flex-col justify-center"},React.createElement("p",{className:"ui-meganav-media-heading"},"Resources"),React.createElement("p",{className:"ui-meganav-media-copy"},"Learn more about realtime with our handy resources.")))),React.createElement("li",null,React.createElement("a",{href:absUrl("/about"),className:"ui-meganav-media-with-image group"},React.createElement(Icon,{name:"icon-display-about-ably-col",size:"2.5rem"}),React.createElement("div",{className:"flex flex-col justify-center"},React.createElement("p",{className:"ui-meganav-media-heading"},"About Ably"),React.createElement("p",{className:"ui-meganav-media-copy"},"Find out more about Ably’s mission.")))),React.createElement("li",null,React.createElement("a",{href:absUrl("/careers"),className:"ui-meganav-media-with-image group"},React.createElement(Icon,{name:"icon-display-careers-col",size:"2.5rem"}),React.createElement("div",{className:"flex flex-col justify-center"},React.createElement("p",{className:"ui-meganav-media-heading"},"Careers"),React.createElement("p",{className:"ui-meganav-media-copy"},"Discover our open roles and core Ably values.")))),React.createElement("li",null,React.createElement("a",{href:absUrl("/events"),className:"ui-meganav-media-with-image group"},React.createElement(Icon,{name:"icon-display-events-col",size:"2.5rem"}),React.createElement("div",{className:"flex flex-col justify-center"},React.createElement("p",{className:"ui-meganav-media-heading"},"Events"),React.createElement("p",{className:"ui-meganav-media-copy"},"Join Ably at upcoming events.")))))),React.createElement(BlogPostsList,{absUrl:absUrl})),React.createElement("div",{className:"ui-meganav-content-spacer"}))};export default MeganavContentCompany;
+//# sourceMappingURL=MeganavContentCompany.js.map

package/core/LegacyMeganav/MeganavContentCompany.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/LegacyMeganav/MeganavContentCompany.tsx"],"sourcesContent":["import React from \"react\";\n\nimport MeganavBlogPostsList from \"./MeganavBlogPostsList\";\nimport ConnectStateWrapper from \"../ConnectStateWrapper\";\nimport { selectRecentBlogPosts } from \"../remote-blogs-posts.js\";\nimport Icon from \"../Icon\";\nimport { AbsUrl, MeganavPaths } from \"./LegacyMeganav\";\n\ntype MeganavContentCompanyProps = {\n  absUrl: AbsUrl;\n  paths?: MeganavPaths;\n};\n\nconst MeganavContentCompany = ({\n  paths,\n  absUrl,\n}: MeganavContentCompanyProps) => {\n  const BlogPostsList = ConnectStateWrapper(MeganavBlogPostsList, {\n    recentBlogPosts: selectRecentBlogPosts,\n  });\n\n  return (\n    <div className=\"flex max-w-screen-xl mx-auto\">\n      <div className=\"ui-meganav-content-spacer\"></div>\n      <section className=\"grid grid-cols-12 ui-grid-gap-x w-full\">\n        <div className=\"col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24\">\n          <h3\n            className=\"ui-meganav-overline\"\n            id=\"meganav-company-panel-list-why-companies\"\n          >\n            Why companies choose Ably\n          </h3>\n          <ul aria-labelledby=\"meganav-company-panel-list-why-companies\">\n            <li>\n              <a\n                href={absUrl(\"/customers\")}\n                className=\"ui-meganav-media-with-image group\"\n              >\n                <Icon name=\"icon-display-customers-col\" size=\"2.5rem\" />\n                <div className=\"flex flex-col justify-center\">\n                  <p className=\"ui-meganav-media-heading\">Customers</p>\n                  <p className=\"ui-meganav-media-copy\">\n                    Ably supports customers across multiple industries.\n                  </p>\n                </div>\n              </a>\n            </li>\n            <li>\n              <a\n                href={absUrl(\"/case-studies\")}\n                className=\"ui-meganav-media-with-image group\"\n              >\n                <Icon name=\"icon-display-case-studies-col\" size=\"2.5rem\" />\n                <div className=\"flex flex-col justify-center\">\n                  <p className=\"ui-meganav-media-heading\">Case studies</p>\n                  <p className=\"ui-meganav-media-copy\">\n                    Discover how customers are benefiting from Ably.\n                  </p>\n                </div>\n              </a>\n            </li>\n            <li>\n              <a\n                href={absUrl(\"/compare\")}\n                className=\"ui-meganav-media-with-image group\"\n              >\n                <Icon name=\"icon-display-compare-tech-col\" size=\"2.5rem\" />\n                <div className=\"flex flex-col justify-center\">\n                  <p className=\"ui-meganav-media-heading\">Compare our tech</p>\n                  <p className=\"ui-meganav-media-copy\">\n                    Choose the right realtime service.\n                  </p>\n                </div>\n              </a>\n            </li>\n            <li>\n              <a\n                href={absUrl(\"/aws\")}\n                className=\"ui-meganav-media-with-image group\"\n              >\n                {paths && <img src={paths.awsLogo} alt=\"AWS logo\" />}\n                <div className=\"flex flex-col justify-center\">\n                  <p className=\"ui-meganav-media-heading\">Partners</p>\n                  <p className=\"ui-meganav-media-copy\">\n                    Ably collaborates and integrates with AWS.\n                  </p>\n                </div>\n              </a>\n            </li>\n          </ul>\n        </div>\n\n        <div className=\"col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0\">\n          <ul\n            className=\"md:mt-40\"\n            aria-labelledby=\"meganav-company-panel-list-why-companies\"\n          >\n            <li>\n              <a\n                href={absUrl(\"/resources\")}\n                className=\"ui-meganav-media-with-image group\"\n              >\n                <Icon name=\"icon-display-resources-col\" size=\"2.5rem\" />\n                <div className=\"flex flex-col justify-center\">\n                  <p className=\"ui-meganav-media-heading\">Resources</p>\n                  <p className=\"ui-meganav-media-copy\">\n                    Learn more about realtime with our handy resources.\n                  </p>\n                </div>\n              </a>\n            </li>\n            <li>\n              <a\n                href={absUrl(\"/about\")}\n                className=\"ui-meganav-media-with-image group\"\n              >\n                <Icon name=\"icon-display-about-ably-col\" size=\"2.5rem\" />\n                <div className=\"flex flex-col justify-center\">\n                  <p className=\"ui-meganav-media-heading\">About Ably</p>\n                  <p className=\"ui-meganav-media-copy\">\n                    Find out more about Ably’s mission.\n                  </p>\n                </div>\n              </a>\n            </li>\n            <li>\n              <a\n                href={absUrl(\"/careers\")}\n                className=\"ui-meganav-media-with-image group\"\n              >\n                <Icon name=\"icon-display-careers-col\" size=\"2.5rem\" />\n                <div className=\"flex flex-col justify-center\">\n                  <p className=\"ui-meganav-media-heading\">Careers</p>\n                  <p className=\"ui-meganav-media-copy\">\n                    Discover our open roles and core Ably values.\n                  </p>\n                </div>\n              </a>\n            </li>\n            <li>\n              <a\n                href={absUrl(\"/events\")}\n                className=\"ui-meganav-media-with-image group\"\n              >\n                <Icon name=\"icon-display-events-col\" size=\"2.5rem\" />\n                <div className=\"flex flex-col justify-center\">\n                  <p className=\"ui-meganav-media-heading\">Events</p>\n                  <p className=\"ui-meganav-media-copy\">\n                    Join Ably at upcoming events.\n                  </p>\n                </div>\n              </a>\n            </li>\n          </ul>\n        </div>\n\n        <BlogPostsList absUrl={absUrl} />\n      </section>\n      <div className=\"ui-meganav-content-spacer\"></div>\n    </div>\n  );\n};\n\nexport default MeganavContentCompany;\n"],"names":["React","MeganavBlogPostsList","ConnectStateWrapper","selectRecentBlogPosts","Icon","MeganavContentCompany","paths","absUrl","BlogPostsList","recentBlogPosts","div","className","section","h3","id","ul","aria-labelledby","li","a","href","name","size","p","img","src","awsLogo","alt"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAE1B,QAAOC,yBAA0B,wBAAyB,AAC1D,QAAOC,wBAAyB,wBAAyB,AACzD,QAASC,qBAAqB,KAAQ,0BAA2B,AACjE,QAAOC,SAAU,SAAU,CAQ3B,MAAMC,sBAAwB,CAAC,CAC7BC,KAAK,CACLC,MAAM,CACqB,IAC3B,MAAMC,cAAgBN,oBAAoBD,qBAAsB,CAC9DQ,gBAAiBN,qBACnB,GAEA,OACE,oBAACO,OAAIC,UAAU,gCACb,oBAACD,OAAIC,UAAU,8BACf,oBAACC,WAAQD,UAAU,0CACjB,oBAACD,OAAIC,UAAU,uFACb,oBAACE,MACCF,UAAU,sBACVG,GAAG,4CACJ,6BAGD,oBAACC,MAAGC,kBAAgB,4CAClB,oBAACC,UACC,oBAACC,KACCC,KAAMZ,OAAO,cACbI,UAAU,qCAEV,oBAACP,MAAKgB,KAAK,6BAA6BC,KAAK,WAC7C,oBAACX,OAAIC,UAAU,gCACb,oBAACW,KAAEX,UAAU,4BAA2B,aACxC,oBAACW,KAAEX,UAAU,yBAAwB,0DAM3C,oBAACM,UACC,oBAACC,KACCC,KAAMZ,OAAO,iBACbI,UAAU,qCAEV,oBAACP,MAAKgB,KAAK,gCAAgCC,KAAK,WAChD,oBAACX,OAAIC,UAAU,gCACb,oBAACW,KAAEX,UAAU,4BAA2B,gBACxC,oBAACW,KAAEX,UAAU,yBAAwB,uDAM3C,oBAACM,UACC,oBAACC,KACCC,KAAMZ,OAAO,YACbI,UAAU,qCAEV,oBAACP,MAAKgB,KAAK,gCAAgCC,KAAK,WAChD,oBAACX,OAAIC,UAAU,gCACb,oBAACW,KAAEX,UAAU,4BAA2B,oBACxC,oBAACW,KAAEX,UAAU,yBAAwB,yCAM3C,oBAACM,UACC,oBAACC,KACCC,KAAMZ,OAAO,QACbI,UAAU,qCAETL,OAAS,oBAACiB,OAAIC,IAAKlB,MAAMmB,OAAO,CAAEC,IAAI,aACvC,oBAAChB,OAAIC,UAAU,gCACb,oBAACW,KAAEX,UAAU,4BAA2B,YACxC,oBAACW,KAAEX,UAAU,yBAAwB,mDAS/C,oBAACD,OAAIC,UAAU,6EACb,oBAACI,MACCJ,UAAU,WACVK,kBAAgB,4CAEhB,oBAACC,UACC,oBAACC,KACCC,KAAMZ,OAAO,cACbI,UAAU,qCAEV,oBAACP,MAAKgB,KAAK,6BAA6BC,KAAK,WAC7C,oBAACX,OAAIC,UAAU,gCACb,oBAACW,KAAEX,UAAU,4BAA2B,aACxC,oBAACW,KAAEX,UAAU,yBAAwB,0DAM3C,oBAACM,UACC,oBAACC,KACCC,KAAMZ,OAAO,UACbI,UAAU,qCAEV,oBAACP,MAAKgB,KAAK,8BAA8BC,KAAK,WAC9C,oBAACX,OAAIC,UAAU,gCACb,oBAACW,KAAEX,UAAU,4BAA2B,cACxC,oBAACW,KAAEX,UAAU,yBAAwB,0CAM3C,oBAACM,UACC,oBAACC,KACCC,KAAMZ,OAAO,YACbI,UAAU,qCAEV,oBAACP,MAAKgB,KAAK,2BAA2BC,KAAK,WAC3C,oBAACX,OAAIC,UAAU,gCACb,oBAACW,KAAEX,UAAU,4BAA2B,WACxC,oBAACW,KAAEX,UAAU,yBAAwB,oDAM3C,oBAACM,UACC,oBAACC,KACCC,KAAMZ,OAAO,WACbI,UAAU,qCAEV,oBAACP,MAAKgB,KAAK,0BAA0BC,KAAK,WAC1C,oBAACX,OAAIC,UAAU,gCACb,oBAACW,KAAEX,UAAU,4BAA2B,UACxC,oBAACW,KAAEX,UAAU,yBAAwB,sCAS/C,oBAACH,eAAcD,OAAQA,UAEzB,oBAACG,OAAIC,UAAU,8BAGrB,CAEA,gBAAeN,qBAAsB"}

package/core/LegacyMeganav/MeganavContentDevelopers.js

@@ -0,0 +1,2 @@
+import React from"react";import Icon from"../Icon";import{StatusIcon}from"../Status";const MeganavContentDevelopers=({absUrl,statusUrl})=>React.createElement("div",{className:"flex max-w-screen-xl mx-auto"},React.createElement("div",{className:"ui-meganav-content-spacer"}),React.createElement("section",{className:"grid grid-cols-12 ui-grid-gap-x w-full"},React.createElement("div",{className:"col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24"},React.createElement("h3",{className:"ui-meganav-overline uppercase",id:"meganav-developers-panel-explore"},"Explore"),React.createElement("ul",{"aria-labelledby":"meganav-developers-panel-explore"},React.createElement("li",null,React.createElement("a",{href:absUrl("/docs"),className:"ui-meganav-media-with-image group"},React.createElement(Icon,{name:"icon-display-docs-col",size:"2.5rem"}),React.createElement("div",{className:"flex flex-col justify-center"},React.createElement("p",{className:"ui-meganav-media-heading"},"Documentation"),React.createElement("p",{className:"ui-meganav-media-copy"},"Technical guides to help you build with Ably.")))),React.createElement("li",null,React.createElement("a",{href:absUrl("/docs/quick-start-guide"),className:"ui-meganav-media-with-image group"},React.createElement(Icon,{name:"icon-display-quickstart-guides-col",size:"2.5rem"}),React.createElement("div",{className:"flex flex-col justify-center"},React.createElement("p",{className:"ui-meganav-media-heading"},"Quickstart guides"),React.createElement("p",{className:"ui-meganav-media-copy"},"Documentation to help you get started quickly.")))),React.createElement("li",null,React.createElement("a",{href:absUrl("/integrations"),className:"ui-meganav-media-with-image group"},React.createElement(Icon,{name:"icon-display-integrations-col",size:"2.5rem"}),React.createElement("div",{className:"flex flex-col justify-center"},React.createElement("p",{className:"ui-meganav-media-heading"},"Integrations"),React.createElement("p",{className:"ui-meganav-media-copy"},"Find out more about Ably integrations."," ")))),React.createElement("li",null,React.createElement("a",{href:absUrl("/examples"),className:"ui-meganav-media-with-image group"},React.createElement(Icon,{name:"icon-display-examples-col",size:"2.5rem"}),React.createElement("div",{className:"flex flex-col justify-center"},React.createElement("p",{className:"ui-meganav-media-heading"},"Live examples"),React.createElement("p",{className:"ui-meganav-media-copy"},"Discover our features and their use cases.")))))),React.createElement("div",{className:"col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0"},React.createElement("ul",{className:"md:mt-40","aria-labelledby":"meganav-developers-panel-explore"},React.createElement("li",null,React.createElement("a",{href:absUrl("/docs/sdks"),className:"ui-meganav-media-with-image group"},React.createElement(Icon,{name:"icon-display-sdks-col",size:"2.5rem"}),React.createElement("div",{className:"flex flex-col justify-center"},React.createElement("p",{className:"ui-meganav-media-heading"},"SDKs"),React.createElement("p",{className:"ui-meganav-media-copy"},"Download an SDK to help you build realtime apps faster.")))),React.createElement("li",null,React.createElement("a",{href:absUrl("/tutorials"),className:"ui-meganav-media-with-image group"},React.createElement(Icon,{name:"icon-display-tutorials-demos-col",size:"2.5rem"}),React.createElement("div",{className:"flex flex-col justify-center"},React.createElement("p",{className:"ui-meganav-media-heading"},"Tutorials & Demos"),React.createElement("p",{className:"ui-meganav-media-copy"},"Get stuck in with our hands-on resources.")))),React.createElement("li",null,React.createElement("a",{href:absUrl("/reference-guide-chat"),className:"ui-meganav-media-with-image group"},React.createElement(Icon,{name:"icon-display-chat-col",size:"2.5rem"}),React.createElement("div",{className:"flex flex-col justify-center"},React.createElement("p",{className:"ui-meganav-media-heading"},"Chat apps reference guide"),React.createElement("p",{className:"ui-meganav-media-copy"},"Learn how to build chat apps with Ably.")))),React.createElement("li",null,React.createElement("a",{href:absUrl("/reference-guide-multiplayer"),className:"ui-meganav-media-with-image group"},React.createElement(Icon,{name:"icon-display-multi-user-spaces-col",size:"2.5rem"}),React.createElement("div",{className:"flex flex-col justify-center"},React.createElement("p",{className:"ui-meganav-media-heading"},"Multiplayer reference guide"),React.createElement("p",{className:"ui-meganav-media-copy"},"Learn how to build collaborative features with Ably.")))))),React.createElement("div",{className:"col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0"},React.createElement("h3",{className:"ui-meganav-overline uppercase",id:"meganav-developers-panel-quick-links"},"Quick links"),React.createElement("ul",{"aria-labelledby":"meganav-developers-panel-quick-links"},React.createElement("li",null,React.createElement("a",{href:"https://discord.gg/jwBPhEZ9g5",className:"group ui-meganav-media py-12"},React.createElement("p",{className:"ui-meganav-media-heading"},"Discord"))),React.createElement("li",null,React.createElement("a",{href:"https://github.com/ably",className:"group ui-meganav-media py-12"},React.createElement("p",{className:"ui-meganav-media-heading"},"GitHub"))),React.createElement("li",null,React.createElement("a",{href:"https://changelog.ably.com/",className:"group ui-meganav-media py-12"},React.createElement("p",{className:"ui-meganav-media-heading"},"Changelog"))),React.createElement("li",null,React.createElement("a",{href:"https://status.ably.com/",className:"group ui-meganav-media py-12"},React.createElement("p",{className:"ui-meganav-media-heading flex items-center gap-4"},"Status",React.createElement(StatusIcon,{statusUrl:statusUrl})))),React.createElement("li",null,React.createElement("a",{href:absUrl("/support"),className:"group ui-meganav-media py-12"},React.createElement("p",{className:"ui-meganav-media-heading"},"Support & FAQs")))))),React.createElement("div",{className:"ui-meganav-content-spacer"}));export default MeganavContentDevelopers;
+//# sourceMappingURL=MeganavContentDevelopers.js.map

package/core/LegacyMeganav/MeganavContentDevelopers.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/LegacyMeganav/MeganavContentDevelopers.tsx"],"sourcesContent":["import React from \"react\";\n\nimport Icon from \"../Icon\";\nimport { AbsUrl } from \"./LegacyMeganav\";\nimport { StatusIcon } from \"../Status\";\n\nconst MeganavContentDevelopers = ({\n  absUrl,\n  statusUrl,\n}: {\n  absUrl: AbsUrl;\n  statusUrl: string;\n}) => (\n  <div className=\"flex max-w-screen-xl mx-auto\">\n    <div className=\"ui-meganav-content-spacer\"></div>\n    <section className=\"grid grid-cols-12 ui-grid-gap-x w-full\">\n      <div className=\"col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24\">\n        <h3\n          className=\"ui-meganav-overline uppercase\"\n          id=\"meganav-developers-panel-explore\"\n        >\n          Explore\n        </h3>\n        <ul aria-labelledby=\"meganav-developers-panel-explore\">\n          <li>\n            <a\n              href={absUrl(\"/docs\")}\n              className=\"ui-meganav-media-with-image group\"\n            >\n              <Icon name=\"icon-display-docs-col\" size=\"2.5rem\" />\n              <div className=\"flex flex-col justify-center\">\n                <p className=\"ui-meganav-media-heading\">Documentation</p>\n                <p className=\"ui-meganav-media-copy\">\n                  Technical guides to help you build with Ably.\n                </p>\n              </div>\n            </a>\n          </li>\n          <li>\n            <a\n              href={absUrl(\"/docs/quick-start-guide\")}\n              className=\"ui-meganav-media-with-image group\"\n            >\n              <Icon name=\"icon-display-quickstart-guides-col\" size=\"2.5rem\" />\n              <div className=\"flex flex-col justify-center\">\n                <p className=\"ui-meganav-media-heading\">Quickstart guides</p>\n                <p className=\"ui-meganav-media-copy\">\n                  Documentation to help you get started quickly.\n                </p>\n              </div>\n            </a>\n          </li>\n          <li>\n            <a\n              href={absUrl(\"/integrations\")}\n              className=\"ui-meganav-media-with-image group\"\n            >\n              <Icon name=\"icon-display-integrations-col\" size=\"2.5rem\" />\n              <div className=\"flex flex-col justify-center\">\n                <p className=\"ui-meganav-media-heading\">Integrations</p>\n                <p className=\"ui-meganav-media-copy\">\n                  Find out more about Ably integrations.{\" \"}\n                </p>\n              </div>\n            </a>\n          </li>\n          <li>\n            <a\n              href={absUrl(\"/examples\")}\n              className=\"ui-meganav-media-with-image group\"\n            >\n              <Icon name=\"icon-display-examples-col\" size=\"2.5rem\" />\n              <div className=\"flex flex-col justify-center\">\n                <p className=\"ui-meganav-media-heading\">Live examples</p>\n                <p className=\"ui-meganav-media-copy\">\n                  Discover our features and their use cases.\n                </p>\n              </div>\n            </a>\n          </li>\n        </ul>\n      </div>\n\n      <div className=\"col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0\">\n        <ul\n          className=\"md:mt-40\"\n          aria-labelledby=\"meganav-developers-panel-explore\"\n        >\n          <li>\n            <a\n              href={absUrl(\"/docs/sdks\")}\n              className=\"ui-meganav-media-with-image group\"\n            >\n              <Icon name=\"icon-display-sdks-col\" size=\"2.5rem\" />\n              <div className=\"flex flex-col justify-center\">\n                <p className=\"ui-meganav-media-heading\">SDKs</p>\n                <p className=\"ui-meganav-media-copy\">\n                  Download an SDK to help you build realtime apps faster.\n                </p>\n              </div>\n            </a>\n          </li>\n          <li>\n            <a\n              href={absUrl(\"/tutorials\")}\n              className=\"ui-meganav-media-with-image group\"\n            >\n              <Icon name=\"icon-display-tutorials-demos-col\" size=\"2.5rem\" />\n              <div className=\"flex flex-col justify-center\">\n                <p className=\"ui-meganav-media-heading\">Tutorials & Demos</p>\n                <p className=\"ui-meganav-media-copy\">\n                  Get stuck in with our hands-on resources.\n                </p>\n              </div>\n            </a>\n          </li>\n          <li>\n            <a\n              href={absUrl(\"/reference-guide-chat\")}\n              className=\"ui-meganav-media-with-image group\"\n            >\n              <Icon name=\"icon-display-chat-col\" size=\"2.5rem\" />\n              <div className=\"flex flex-col justify-center\">\n                <p className=\"ui-meganav-media-heading\">\n                  Chat apps reference guide\n                </p>\n                <p className=\"ui-meganav-media-copy\">\n                  Learn how to build chat apps with Ably.\n                </p>\n              </div>\n            </a>\n          </li>\n          <li>\n            <a\n              href={absUrl(\"/reference-guide-multiplayer\")}\n              className=\"ui-meganav-media-with-image group\"\n            >\n              <Icon name=\"icon-display-multi-user-spaces-col\" size=\"2.5rem\" />\n              <div className=\"flex flex-col justify-center\">\n                <p className=\"ui-meganav-media-heading\">\n                  Multiplayer reference guide\n                </p>\n                <p className=\"ui-meganav-media-copy\">\n                  Learn how to build collaborative features with Ably.\n                </p>\n              </div>\n            </a>\n          </li>\n        </ul>\n      </div>\n\n      <div className=\"col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0\">\n        <h3\n          className=\"ui-meganav-overline uppercase\"\n          id=\"meganav-developers-panel-quick-links\"\n        >\n          Quick links\n        </h3>\n        <ul aria-labelledby=\"meganav-developers-panel-quick-links\">\n          <li>\n            <a\n              href=\"https://discord.gg/jwBPhEZ9g5\"\n              className=\"group ui-meganav-media py-12\"\n            >\n              <p className=\"ui-meganav-media-heading\">Discord</p>\n            </a>\n          </li>\n          <li>\n            <a\n              href=\"https://github.com/ably\"\n              className=\"group ui-meganav-media py-12\"\n            >\n              <p className=\"ui-meganav-media-heading\">GitHub</p>\n            </a>\n          </li>\n          <li>\n            <a\n              href=\"https://changelog.ably.com/\"\n              className=\"group ui-meganav-media py-12\"\n            >\n              <p className=\"ui-meganav-media-heading\">Changelog</p>\n            </a>\n          </li>\n          <li>\n            <a\n              href=\"https://status.ably.com/\"\n              className=\"group ui-meganav-media py-12\"\n            >\n              <p className=\"ui-meganav-media-heading flex items-center gap-4\">\n                Status\n                <StatusIcon statusUrl={statusUrl} />\n              </p>\n            </a>\n          </li>\n          <li>\n            <a\n              href={absUrl(\"/support\")}\n              className=\"group ui-meganav-media py-12\"\n            >\n              <p className=\"ui-meganav-media-heading\">Support & FAQs</p>\n            </a>\n          </li>\n        </ul>\n      </div>\n    </section>\n    <div className=\"ui-meganav-content-spacer\"></div>\n  </div>\n);\n\nexport default MeganavContentDevelopers;\n"],"names":["React","Icon","StatusIcon","MeganavContentDevelopers","absUrl","statusUrl","div","className","section","h3","id","ul","aria-labelledby","li","a","href","name","size","p"],"mappings":"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"}

package/core/LegacyMeganav/MeganavContentProducts.js

@@ -0,0 +1,2 @@
+import React from"react";import FeaturedLink from"../FeaturedLink";const MeganavContentProducts=({paths,absUrl})=>React.createElement("div",{className:"flex max-w-screen-xl mx-auto"},React.createElement("div",{className:"ui-meganav-content-spacer bg-extra-light-grey"}),React.createElement("section",{className:"grid grid-cols-12 ui-grid-gap-x w-full"},React.createElement("div",{className:"col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey"},React.createElement("div",{className:"flex mb-20"},paths&&React.createElement("img",{src:paths?.ablyStack,alt:"Ably homepage"}),React.createElement("h3",{className:"ui-meganav-overline ml-24"},"The Ably Platform")),React.createElement("p",{className:"ui-text-p2 font-bold mb-24",style:{maxWidth:"330px"}},"Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything realtime, and lets you focus on your code."),React.createElement(FeaturedLink,{url:absUrl("/platform"),textSize:"text-p2"},"Explore how it works")),React.createElement("div",{className:"col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"},React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-products-panel-list-examples"},"Products"),React.createElement("ul",{className:"mb-16","aria-labelledby":"meganav-products-panel-list-examples"},React.createElement("li",null,React.createElement("a",{href:absUrl("/pubsub"),className:"group ui-meganav-media"},React.createElement("p",{className:"ui-meganav-media-heading"},"Pub/Sub"),React.createElement("p",{className:"ui-meganav-media-copy"},"Build infinitely scalable realtime applications."))),React.createElement("li",null,React.createElement("a",{href:absUrl("/spaces"),className:"group ui-meganav-media"},React.createElement("p",{className:"ui-meganav-media-heading"},"Spaces"),React.createElement("p",{className:"ui-meganav-media-copy"},"Create multi-user collaborative environments."))),React.createElement("li",null,React.createElement("a",{href:absUrl("/livesync"),className:"group ui-meganav-media"},React.createElement("p",{className:"ui-meganav-media-heading"},"LiveSync"),React.createElement("p",{className:"ui-meganav-media-copy"},"Seamlessly sync database changes with frontend clients at scale."))),React.createElement("li",null,React.createElement("a",{href:absUrl("/chat"),className:"group ui-meganav-media"},React.createElement("p",{className:"ui-meganav-media-heading"},"Chat"),React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver highly reliable chat experiences at scale."))))),React.createElement("div",{className:"col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"},React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-products-panel-list-our-technology"},"Technology"),React.createElement("ul",{className:"mb-16","aria-labelledby":"meganav-products-panel-list-our-technology"},React.createElement("li",null,React.createElement("a",{href:absUrl("/four-pillars-of-dependability#performance"),className:"ui-meganav-media group"},React.createElement("p",{className:"ui-meganav-media-heading"},"Predictable performance"),React.createElement("p",{className:"ui-meganav-media-copy"},"A low-latency and high-throughput global network."))),React.createElement("li",null,React.createElement("a",{href:absUrl("/four-pillars-of-dependability#integrity"),className:"ui-meganav-media group"},React.createElement("p",{className:"ui-meganav-media-heading"},"Guaranteed ordering & delivery"),React.createElement("p",{className:"ui-meganav-media-copy"},"Data is delivered - in order - even after disconnections."))),React.createElement("li",null,React.createElement("a",{href:absUrl("/four-pillars-of-dependability#reliability"),className:"ui-meganav-media group"},React.createElement("p",{className:"ui-meganav-media-heading"},"Fault tolerant infrastructure"),React.createElement("p",{className:"ui-meganav-media-copy"},"Redundancy is built in at global and regional levels."))),React.createElement("li",null,React.createElement("a",{href:absUrl("/four-pillars-of-dependability#availability"),className:"ui-meganav-media group"},React.createElement("p",{className:"ui-meganav-media-heading"},"High scalability & availability"),React.createElement("p",{className:"ui-meganav-media-copy"},"Built for scale with legitimate 99.999% uptime SLAs."))),React.createElement("li",null,React.createElement("a",{href:absUrl("/network"),className:"ui-meganav-media group"},React.createElement("p",{className:"ui-meganav-media-heading"},"Global edge network"),React.createElement("p",{className:"ui-meganav-media-copy"},"An edge network of 15 core routing datacenters and 205+ PoPs.")))),React.createElement(FeaturedLink,{url:absUrl("/four-pillars-of-dependability"),textSize:"text-p3"},"Explore Four Pillars of Dependability"))),React.createElement("div",{className:"ui-meganav-content-spacer"}));export default MeganavContentProducts;
+//# sourceMappingURL=MeganavContentProducts.js.map

package/core/LegacyMeganav/MeganavContentProducts.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/LegacyMeganav/MeganavContentProducts.tsx"],"sourcesContent":["import React from \"react\";\n\nimport FeaturedLink from \"../FeaturedLink\";\nimport { AbsUrl, MeganavPaths } from \"./LegacyMeganav\";\n\ntype MeganavContentProductsProps = {\n  paths?: MeganavPaths;\n  absUrl: AbsUrl;\n};\n\nconst MeganavContentProducts = ({\n  paths,\n  absUrl,\n}: MeganavContentProductsProps) => (\n  <div className=\"flex max-w-screen-xl mx-auto\">\n    <div className=\"ui-meganav-content-spacer bg-extra-light-grey\"></div>\n    <section className=\"grid grid-cols-12 ui-grid-gap-x w-full\">\n      <div className=\"col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey\">\n        <div className=\"flex mb-20\">\n          {paths && <img src={paths?.ablyStack} alt=\"Ably homepage\" />}\n          <h3 className=\"ui-meganav-overline ml-24\">The Ably Platform</h3>\n        </div>\n        <p className=\"ui-text-p2 font-bold mb-24\" style={{ maxWidth: \"330px\" }}>\n          Easily power any realtime experience in your application. No complex\n          infrastructure to manage or provision. Just a simple API that handles\n          everything realtime, and lets you focus on your code.\n        </p>\n\n        <FeaturedLink url={absUrl(\"/platform\")} textSize=\"text-p2\">\n          Explore how it works\n        </FeaturedLink>\n      </div>\n\n      <div className=\"col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white\">\n        <h3\n          className=\"ui-meganav-overline\"\n          id=\"meganav-products-panel-list-examples\"\n        >\n          Products\n        </h3>\n        <ul\n          className=\"mb-16\"\n          aria-labelledby=\"meganav-products-panel-list-examples\"\n        >\n          <li>\n            <a href={absUrl(\"/pubsub\")} className=\"group ui-meganav-media\">\n              <p className=\"ui-meganav-media-heading\">Pub/Sub</p>\n              <p className=\"ui-meganav-media-copy\">\n                Build infinitely scalable realtime applications.\n              </p>\n            </a>\n          </li>\n          <li>\n            <a href={absUrl(\"/spaces\")} className=\"group ui-meganav-media\">\n              <p className=\"ui-meganav-media-heading\">Spaces</p>\n              <p className=\"ui-meganav-media-copy\">\n                Create multi-user collaborative environments.\n              </p>\n            </a>\n          </li>\n          <li>\n            <a href={absUrl(\"/livesync\")} className=\"group ui-meganav-media\">\n              <p className=\"ui-meganav-media-heading\">LiveSync</p>\n              <p className=\"ui-meganav-media-copy\">\n                Seamlessly sync database changes with frontend clients at scale.\n              </p>\n            </a>\n          </li>\n          <li>\n            <a href={absUrl(\"/chat\")} className=\"group ui-meganav-media\">\n              <p className=\"ui-meganav-media-heading\">Chat</p>\n              <p className=\"ui-meganav-media-copy\">\n                Deliver highly reliable chat experiences at scale.\n              </p>\n            </a>\n          </li>\n        </ul>\n      </div>\n\n      <div className=\"col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white\">\n        <h3\n          className=\"ui-meganav-overline\"\n          id=\"meganav-products-panel-list-our-technology\"\n        >\n          Technology\n        </h3>\n        <ul\n          className=\"mb-16\"\n          aria-labelledby=\"meganav-products-panel-list-our-technology\"\n        >\n          <li>\n            <a\n              href={absUrl(\"/four-pillars-of-dependability#performance\")}\n              className=\"ui-meganav-media group\"\n            >\n              <p className=\"ui-meganav-media-heading\">\n                Predictable performance\n              </p>\n              <p className=\"ui-meganav-media-copy\">\n                A low-latency and high-throughput global network.\n              </p>\n            </a>\n          </li>\n          <li>\n            <a\n              href={absUrl(\"/four-pillars-of-dependability#integrity\")}\n              className=\"ui-meganav-media group\"\n            >\n              <p className=\"ui-meganav-media-heading\">\n                Guaranteed ordering & delivery\n              </p>\n              <p className=\"ui-meganav-media-copy\">\n                Data is delivered - in order - even after disconnections.\n              </p>\n            </a>\n          </li>\n          <li>\n            <a\n              href={absUrl(\"/four-pillars-of-dependability#reliability\")}\n              className=\"ui-meganav-media group\"\n            >\n              <p className=\"ui-meganav-media-heading\">\n                Fault tolerant infrastructure\n              </p>\n              <p className=\"ui-meganav-media-copy\">\n                Redundancy is built in at global and regional levels.\n              </p>\n            </a>\n          </li>\n          <li>\n            <a\n              href={absUrl(\"/four-pillars-of-dependability#availability\")}\n              className=\"ui-meganav-media group\"\n            >\n              <p className=\"ui-meganav-media-heading\">\n                High scalability & availability\n              </p>\n              <p className=\"ui-meganav-media-copy\">\n                Built for scale with legitimate 99.999% uptime SLAs.\n              </p>\n            </a>\n          </li>\n          <li>\n            <a href={absUrl(\"/network\")} className=\"ui-meganav-media group\">\n              <p className=\"ui-meganav-media-heading\">Global edge network</p>\n              <p className=\"ui-meganav-media-copy\">\n                An edge network of 15 core routing datacenters and 205+ PoPs.\n              </p>\n            </a>\n          </li>\n        </ul>\n\n        <FeaturedLink\n          url={absUrl(\"/four-pillars-of-dependability\")}\n          textSize=\"text-p3\"\n        >\n          Explore Four Pillars of Dependability\n        </FeaturedLink>\n      </div>\n    </section>\n    <div className=\"ui-meganav-content-spacer\"></div>\n  </div>\n);\n\nexport default MeganavContentProducts;\n"],"names":["React","FeaturedLink","MeganavContentProducts","paths","absUrl","div","className","section","img","src","ablyStack","alt","h3","p","style","maxWidth","url","textSize","id","ul","aria-labelledby","li","a","href"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAE1B,QAAOC,iBAAkB,iBAAkB,CAQ3C,MAAMC,uBAAyB,CAAC,CAC9BC,KAAK,CACLC,MAAM,CACsB,GAC5B,oBAACC,OAAIC,UAAU,gCACb,oBAACD,OAAIC,UAAU,kDACf,oBAACC,WAAQD,UAAU,0CACjB,oBAACD,OAAIC,UAAU,kGACb,oBAACD,OAAIC,UAAU,cACZH,OAAS,oBAACK,OAAIC,IAAKN,OAAOO,UAAWC,IAAI,kBAC1C,oBAACC,MAAGN,UAAU,6BAA4B,sBAE5C,oBAACO,KAAEP,UAAU,6BAA6BQ,MAAO,CAAEC,SAAU,OAAQ,GAAG,oMAMxE,oBAACd,cAAae,IAAKZ,OAAO,aAAca,SAAS,WAAU,yBAK7D,oBAACZ,OAAIC,UAAU,4FACb,oBAACM,MACCN,UAAU,sBACVY,GAAG,wCACJ,YAGD,oBAACC,MACCb,UAAU,QACVc,kBAAgB,wCAEhB,oBAACC,UACC,oBAACC,KAAEC,KAAMnB,OAAO,WAAYE,UAAU,0BACpC,oBAACO,KAAEP,UAAU,4BAA2B,WACxC,oBAACO,KAAEP,UAAU,yBAAwB,sDAKzC,oBAACe,UACC,oBAACC,KAAEC,KAAMnB,OAAO,WAAYE,UAAU,0BACpC,oBAACO,KAAEP,UAAU,4BAA2B,UACxC,oBAACO,KAAEP,UAAU,yBAAwB,mDAKzC,oBAACe,UACC,oBAACC,KAAEC,KAAMnB,OAAO,aAAcE,UAAU,0BACtC,oBAACO,KAAEP,UAAU,4BAA2B,YACxC,oBAACO,KAAEP,UAAU,yBAAwB,sEAKzC,oBAACe,UACC,oBAACC,KAAEC,KAAMnB,OAAO,SAAUE,UAAU,0BAClC,oBAACO,KAAEP,UAAU,4BAA2B,QACxC,oBAACO,KAAEP,UAAU,yBAAwB,0DAQ7C,oBAACD,OAAIC,UAAU,4FACb,oBAACM,MACCN,UAAU,sBACVY,GAAG,8CACJ,cAGD,oBAACC,MACCb,UAAU,QACVc,kBAAgB,8CAEhB,oBAACC,UACC,oBAACC,KACCC,KAAMnB,OAAO,8CACbE,UAAU,0BAEV,oBAACO,KAAEP,UAAU,4BAA2B,2BAGxC,oBAACO,KAAEP,UAAU,yBAAwB,uDAKzC,oBAACe,UACC,oBAACC,KACCC,KAAMnB,OAAO,4CACbE,UAAU,0BAEV,oBAACO,KAAEP,UAAU,4BAA2B,kCAGxC,oBAACO,KAAEP,UAAU,yBAAwB,+DAKzC,oBAACe,UACC,oBAACC,KACCC,KAAMnB,OAAO,8CACbE,UAAU,0BAEV,oBAACO,KAAEP,UAAU,4BAA2B,iCAGxC,oBAACO,KAAEP,UAAU,yBAAwB,2DAKzC,oBAACe,UACC,oBAACC,KACCC,KAAMnB,OAAO,+CACbE,UAAU,0BAEV,oBAACO,KAAEP,UAAU,4BAA2B,mCAGxC,oBAACO,KAAEP,UAAU,yBAAwB,0DAKzC,oBAACe,UACC,oBAACC,KAAEC,KAAMnB,OAAO,YAAaE,UAAU,0BACrC,oBAACO,KAAEP,UAAU,4BAA2B,uBACxC,oBAACO,KAAEP,UAAU,yBAAwB,oEAO3C,oBAACL,cACCe,IAAKZ,OAAO,kCACZa,SAAS,WACV,2CAKL,oBAACZ,OAAIC,UAAU,8BAInB,gBAAeJ,sBAAuB"}

package/core/LegacyMeganav/MeganavContentUseCases.js

@@ -0,0 +1,2 @@
+import React from"react";import Icon from"../Icon";const MeganavContentUseCases=({absUrl})=>React.createElement("div",{className:"flex max-w-screen-xl mx-auto"},React.createElement("div",{className:"ui-meganav-content-spacer bg-extra-light-grey"}),React.createElement("section",{className:"grid grid-cols-12 ui-grid-gap-x w-full"},React.createElement("div",{className:"col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey"},React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-use-cases-panel-use-cases"},"Solutions"),React.createElement("ul",{"aria-labelledby":"meganav-use-cases-panel-industry-use-cases"},React.createElement("li",null,React.createElement("a",{href:absUrl("/chat"),className:"ui-meganav-media-with-image group"},React.createElement(Icon,{name:"icon-display-chat-stack-col",size:"2.5rem"}),React.createElement("div",{className:"flex flex-col justify-center"},React.createElement("p",{className:"ui-meganav-media-heading"},"Live Chat"),React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver highly reliable chat experiences at scale.")))),React.createElement("li",null,React.createElement("a",{href:absUrl("/solutions/multiplayer-collaboration"),className:"ui-meganav-media-with-image group"},React.createElement(Icon,{name:"icon-display-multi-user-spaces-col",size:"2.5rem"}),React.createElement("div",{className:"flex flex-col justify-center"},React.createElement("p",{className:"ui-meganav-media-heading"},"Multiplayer Collaboration"),React.createElement("p",{className:"ui-meganav-media-copy"},"Bring collaborative multiplayer experiences to your users.")))),React.createElement("li",null,React.createElement("a",{href:absUrl("/solutions/data-broadcast"),className:"ui-meganav-media-with-image group"},React.createElement(Icon,{name:"icon-display-data-broadcast-col",size:"2.5rem"}),React.createElement("div",{className:"flex flex-col justify-center"},React.createElement("p",{className:"ui-meganav-media-heading"},"Data Broadcast"),React.createElement("p",{className:"ui-meganav-media-copy"},"Broadcast realtime event data to millions of devices around the globe.")))),React.createElement("li",null,React.createElement("a",{href:absUrl("/solutions/data-synchronization"),className:"ui-meganav-media-with-image group"},React.createElement(Icon,{name:"icon-display-data-synchronization-col",size:"2.5rem"}),React.createElement("div",{className:"flex flex-col justify-center"},React.createElement("p",{className:"ui-meganav-media-heading"},"Data Synchronization"),React.createElement("p",{className:"ui-meganav-media-copy"},"Keep your frontend and backend in realtime sync, at global scale.")))),React.createElement("li",null,React.createElement("a",{href:absUrl("/push-notifications"),className:"ui-meganav-media-with-image group"},React.createElement(Icon,{name:"icon-display-push-notifications-col",size:"2.5rem"}),React.createElement("div",{className:"flex flex-col justify-center"},React.createElement("p",{className:"ui-meganav-media-heading"},"Notifications"),React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver cross-platform push notifications with a simple unified API.")))),React.createElement("li",null,React.createElement("a",{href:absUrl("/solutions/asset-tracking"),className:"ui-meganav-media-with-image group"},React.createElement(Icon,{name:"icon-display-asset-tracking-col",size:"2.5rem"}),React.createElement("div",{className:"flex flex-col justify-center"},React.createElement("p",{className:"ui-meganav-media-heading"},"Asset Tracking"),React.createElement("p",{className:"ui-meganav-media-copy"},"Track assets in realtime with a solution optimised for last mile logistics.")))))),React.createElement("div",{className:"col-span-full md:col-span-4 pt-24 pb-0 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"},React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-use-cases-panel-industry"},"Industry"),React.createElement("ul",{"aria-labelledby":"meganav-use-cases-panel-industry"},React.createElement("li",null,React.createElement("a",{href:absUrl("/solutions/sports-and-media"),className:"ui-meganav-media group"},React.createElement("p",{className:"ui-meganav-media-heading"},"Sports, Media & Fan Engagement"),React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver engaging global realtime experiences."))),React.createElement("li",null,React.createElement("a",{href:absUrl("/solutions/b2b-platforms"),className:"ui-meganav-media group"},React.createElement("p",{className:"ui-meganav-media-heading"},"B2B Platforms"),React.createElement("p",{className:"ui-meganav-media-copy"},"Empower your customers with realtime solutions."))),React.createElement("li",null,React.createElement("a",{href:absUrl("/solutions/fintech"),className:"ui-meganav-media group"},React.createElement("p",{className:"ui-meganav-media-heading"},"FinTech"),React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver personalised financial data in realtime."))),React.createElement("li",null,React.createElement("a",{href:absUrl("/solutions/edtech"),className:"ui-meganav-media group"},React.createElement("p",{className:"ui-meganav-media-heading"},"EdTech"),React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver interactive learning experiences."))),React.createElement("li",null,React.createElement("a",{href:absUrl("/solutions/healthcare"),className:"ui-meganav-media group"},React.createElement("p",{className:"ui-meganav-media-heading"},"Healthcare (HIPAA)"),React.createElement("p",{className:"ui-meganav-media-copy"},"Provide trustworthy, HIPAA-compliant realtime apps."))))),React.createElement("div",{className:"col-span-full md:col-span-4 pt-0 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"},React.createElement("ul",{"aria-labelledby":"meganav-use-cases-panel-solutions",className:"mt-0 md:mt-40"},React.createElement("li",null,React.createElement("a",{href:absUrl("/solutions/gaming"),className:"ui-meganav-media group"},React.createElement("p",{className:"ui-meganav-media-heading"},"Gaming"),React.createElement("p",{className:"ui-meganav-media-copy"},"Power ultra fast and reliable gaming experiences."))),React.createElement("li",null,React.createElement("a",{href:absUrl("/solutions/automotive-logistics-and-mobility"),className:"ui-meganav-media group"},React.createElement("p",{className:"ui-meganav-media-heading"},"Automotive, Logistics, & Mobility"),React.createElement("p",{className:"ui-meganav-media-copy"},"Power diagnostics, order tracking and more."))),React.createElement("li",null,React.createElement("a",{href:absUrl("/solutions/ecommerce-and-retail"),className:"ui-meganav-media group"},React.createElement("p",{className:"ui-meganav-media-heading"},"eCommerce & Retail"),React.createElement("p",{className:"ui-meganav-media-copy"},"Enrich customer experiences with realtime updates."))),React.createElement("li",null,React.createElement("a",{href:absUrl("/solutions/iot-and-connected-devices"),className:"ui-meganav-media group"},React.createElement("p",{className:"ui-meganav-media-heading"},"IoT & Connected Devices"),React.createElement("p",{className:"ui-meganav-media-copy"},"Monitor and control global IoT deployments in realtime.")))))),React.createElement("div",{className:"ui-meganav-content-spacer"}));export default MeganavContentUseCases;
+//# sourceMappingURL=MeganavContentUseCases.js.map

package/core/LegacyMeganav/MeganavContentUseCases.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/LegacyMeganav/MeganavContentUseCases.tsx"],"sourcesContent":["import React from \"react\";\n\nimport Icon from \"../Icon\";\nimport { AbsUrl } from \"./LegacyMeganav\";\n\nconst MeganavContentUseCases = ({ absUrl }: { absUrl: AbsUrl }) => (\n  <div className=\"flex max-w-screen-xl mx-auto\">\n    <div className=\"ui-meganav-content-spacer bg-extra-light-grey\"></div>\n    <section className=\"grid grid-cols-12 ui-grid-gap-x w-full\">\n      <div className=\"col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey\">\n        <h3\n          className=\"ui-meganav-overline\"\n          id=\"meganav-use-cases-panel-use-cases\"\n        >\n          Solutions\n        </h3>\n        <ul aria-labelledby=\"meganav-use-cases-panel-industry-use-cases\">\n          <li>\n            <a\n              href={absUrl(\"/chat\")}\n              className=\"ui-meganav-media-with-image group\"\n            >\n              <Icon name=\"icon-display-chat-stack-col\" size=\"2.5rem\" />\n              <div className=\"flex flex-col justify-center\">\n                <p className=\"ui-meganav-media-heading\">Live Chat</p>\n                <p className=\"ui-meganav-media-copy\">\n                  Deliver highly reliable chat experiences at scale.\n                </p>\n              </div>\n            </a>\n          </li>\n          <li>\n            <a\n              href={absUrl(\"/solutions/multiplayer-collaboration\")}\n              className=\"ui-meganav-media-with-image group\"\n            >\n              <Icon name=\"icon-display-multi-user-spaces-col\" size=\"2.5rem\" />\n              <div className=\"flex flex-col justify-center\">\n                <p className=\"ui-meganav-media-heading\">\n                  Multiplayer Collaboration\n                </p>\n                <p className=\"ui-meganav-media-copy\">\n                  Bring collaborative multiplayer experiences to your users.\n                </p>\n              </div>\n            </a>\n          </li>\n          <li>\n            <a\n              href={absUrl(\"/solutions/data-broadcast\")}\n              className=\"ui-meganav-media-with-image group\"\n            >\n              <Icon name=\"icon-display-data-broadcast-col\" size=\"2.5rem\" />\n              <div className=\"flex flex-col justify-center\">\n                <p className=\"ui-meganav-media-heading\">Data Broadcast</p>\n                <p className=\"ui-meganav-media-copy\">\n                  Broadcast realtime event data to millions of devices around\n                  the globe.\n                </p>\n              </div>\n            </a>\n          </li>\n          <li>\n            <a\n              href={absUrl(\"/solutions/data-synchronization\")}\n              className=\"ui-meganav-media-with-image group\"\n            >\n              <Icon\n                name=\"icon-display-data-synchronization-col\"\n                size=\"2.5rem\"\n              />\n              <div className=\"flex flex-col justify-center\">\n                <p className=\"ui-meganav-media-heading\">Data Synchronization</p>\n                <p className=\"ui-meganav-media-copy\">\n                  Keep your frontend and backend in realtime sync, at global\n                  scale.\n                </p>\n              </div>\n            </a>\n          </li>\n          <li>\n            <a\n              href={absUrl(\"/push-notifications\")}\n              className=\"ui-meganav-media-with-image group\"\n            >\n              <Icon name=\"icon-display-push-notifications-col\" size=\"2.5rem\" />\n              <div className=\"flex flex-col justify-center\">\n                <p className=\"ui-meganav-media-heading\">Notifications</p>\n                <p className=\"ui-meganav-media-copy\">\n                  Deliver cross-platform push notifications with a simple\n                  unified API.\n                </p>\n              </div>\n            </a>\n          </li>\n          <li>\n            <a\n              href={absUrl(\"/solutions/asset-tracking\")}\n              className=\"ui-meganav-media-with-image group\"\n            >\n              <Icon name=\"icon-display-asset-tracking-col\" size=\"2.5rem\" />\n              <div className=\"flex flex-col justify-center\">\n                <p className=\"ui-meganav-media-heading\">Asset Tracking</p>\n                <p className=\"ui-meganav-media-copy\">\n                  Track assets in realtime with a solution optimised for last\n                  mile logistics.\n                </p>\n              </div>\n            </a>\n          </li>\n        </ul>\n      </div>\n\n      <div className=\"col-span-full md:col-span-4 pt-24 pb-0 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white\">\n        <h3\n          className=\"ui-meganav-overline\"\n          id=\"meganav-use-cases-panel-industry\"\n        >\n          Industry\n        </h3>\n        <ul aria-labelledby=\"meganav-use-cases-panel-industry\">\n          <li>\n            <a\n              href={absUrl(\"/solutions/sports-and-media\")}\n              className=\"ui-meganav-media group\"\n            >\n              <p className=\"ui-meganav-media-heading\">\n                Sports, Media & Fan Engagement\n              </p>\n              <p className=\"ui-meganav-media-copy\">\n                Deliver engaging global realtime experiences.\n              </p>\n            </a>\n          </li>\n          <li>\n            <a\n              href={absUrl(\"/solutions/b2b-platforms\")}\n              className=\"ui-meganav-media group\"\n            >\n              <p className=\"ui-meganav-media-heading\">B2B Platforms</p>\n              <p className=\"ui-meganav-media-copy\">\n                Empower your customers with realtime solutions.\n              </p>\n            </a>\n          </li>\n          <li>\n            <a\n              href={absUrl(\"/solutions/fintech\")}\n              className=\"ui-meganav-media group\"\n            >\n              <p className=\"ui-meganav-media-heading\">FinTech</p>\n              <p className=\"ui-meganav-media-copy\">\n                Deliver personalised financial data in realtime.\n              </p>\n            </a>\n          </li>\n          <li>\n            <a\n              href={absUrl(\"/solutions/edtech\")}\n              className=\"ui-meganav-media group\"\n            >\n              <p className=\"ui-meganav-media-heading\">EdTech</p>\n              <p className=\"ui-meganav-media-copy\">\n                Deliver interactive learning experiences.\n              </p>\n            </a>\n          </li>\n          <li>\n            <a\n              href={absUrl(\"/solutions/healthcare\")}\n              className=\"ui-meganav-media group\"\n            >\n              <p className=\"ui-meganav-media-heading\">Healthcare (HIPAA)</p>\n              <p className=\"ui-meganav-media-copy\">\n                Provide trustworthy, HIPAA-compliant realtime apps.\n              </p>\n            </a>\n          </li>\n        </ul>\n      </div>\n\n      <div className=\"col-span-full md:col-span-4 pt-0 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white\">\n        <ul\n          aria-labelledby=\"meganav-use-cases-panel-solutions\"\n          className=\"mt-0 md:mt-40\"\n        >\n          <li>\n            <a\n              href={absUrl(\"/solutions/gaming\")}\n              className=\"ui-meganav-media group\"\n            >\n              <p className=\"ui-meganav-media-heading\">Gaming</p>\n              <p className=\"ui-meganav-media-copy\">\n                Power ultra fast and reliable gaming experiences.\n              </p>\n            </a>\n          </li>\n          <li>\n            <a\n              href={absUrl(\"/solutions/automotive-logistics-and-mobility\")}\n              className=\"ui-meganav-media group\"\n            >\n              <p className=\"ui-meganav-media-heading\">\n                Automotive, Logistics, & Mobility\n              </p>\n              <p className=\"ui-meganav-media-copy\">\n                Power diagnostics, order tracking and more.\n              </p>\n            </a>\n          </li>\n          <li>\n            <a\n              href={absUrl(\"/solutions/ecommerce-and-retail\")}\n              className=\"ui-meganav-media group\"\n            >\n              <p className=\"ui-meganav-media-heading\">eCommerce & Retail</p>\n              <p className=\"ui-meganav-media-copy\">\n                Enrich customer experiences with realtime updates.\n              </p>\n            </a>\n          </li>\n          <li>\n            <a\n              href={absUrl(\"/solutions/iot-and-connected-devices\")}\n              className=\"ui-meganav-media group\"\n            >\n              <p className=\"ui-meganav-media-heading\">\n                IoT & Connected Devices\n              </p>\n              <p className=\"ui-meganav-media-copy\">\n                Monitor and control global IoT deployments in realtime.\n              </p>\n            </a>\n          </li>\n        </ul>\n      </div>\n    </section>\n    <div className=\"ui-meganav-content-spacer\"></div>\n  </div>\n);\n\nexport default MeganavContentUseCases;\n"],"names":["React","Icon","MeganavContentUseCases","absUrl","div","className","section","h3","id","ul","aria-labelledby","li","a","href","name","size","p"],"mappings":"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"}

package/core/LegacyMeganav/MeganavControl.js

@@ -0,0 +1,2 @@
+import React from"react";import Icon from"../Icon";const MeganavControl=({ariaControls,ariaLabel,children,theme,additionalCSS})=>React.createElement("button",{type:"button","data-id":"meganav-control",className:`ui-meganav-link h-64 flex items-center group ${additionalCSS} ${theme.textColor}`,"aria-expanded":"false","aria-controls":ariaControls,"aria-label":`Show ${ariaLabel} panel`},children,React.createElement(Icon,{name:"icon-gui-chevron-down-micro",color:"text-cool-black",size:"1.5rem",additionalCSS:"group-hover:text-gui-hover group-focus:text-gui-focus"}));export default MeganavControl;
+//# sourceMappingURL=MeganavControl.js.map

package/core/LegacyMeganav/MeganavControl.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/LegacyMeganav/MeganavControl.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\n\nimport Icon from \"../Icon\";\nimport { MeganavTheme } from \"./LegacyMeganav\";\n\ntype MeganavControlProps = {\n  ariaControls: string;\n  ariaLabel: string;\n  children: ReactNode;\n  theme: MeganavTheme;\n  additionalCSS?: string;\n};\n\nconst MeganavControl = ({\n  ariaControls,\n  ariaLabel,\n  children,\n  theme,\n  additionalCSS,\n}: MeganavControlProps) => (\n  <button\n    type=\"button\"\n    data-id=\"meganav-control\"\n    className={`ui-meganav-link h-64 flex items-center group ${additionalCSS} ${theme.textColor}`}\n    aria-expanded=\"false\"\n    aria-controls={ariaControls}\n    aria-label={`Show ${ariaLabel} panel`}\n  >\n    {children}\n    <Icon\n      name=\"icon-gui-chevron-down-micro\"\n      color=\"text-cool-black\"\n      size=\"1.5rem\"\n      additionalCSS=\"group-hover:text-gui-hover group-focus:text-gui-focus\"\n    />\n  </button>\n);\n\nexport default MeganavControl;\n"],"names":["React","Icon","MeganavControl","ariaControls","ariaLabel","children","theme","additionalCSS","button","type","data-id","className","textColor","aria-expanded","aria-controls","aria-label","name","color","size"],"mappings":"AAAA,OAAOA,UAA0B,OAAQ,AAEzC,QAAOC,SAAU,SAAU,CAW3B,MAAMC,eAAiB,CAAC,CACtBC,YAAY,CACZC,SAAS,CACTC,QAAQ,CACRC,KAAK,CACLC,aAAa,CACO,GACpB,oBAACC,UACCC,KAAK,SACLC,UAAQ,kBACRC,UAAW,CAAC,6CAA6C,EAAEJ,cAAc,CAAC,EAAED,MAAMM,SAAS,CAAC,CAAC,CAC7FC,gBAAc,QACdC,gBAAeX,aACfY,aAAY,CAAC,KAAK,EAAEX,UAAU,MAAM,CAAC,EAEpCC,SACD,oBAACJ,MACCe,KAAK,8BACLC,MAAM,kBACNC,KAAK,SACLX,cAAc,0DAKpB,gBAAeL,cAAe"}

package/core/LegacyMeganav/MeganavControlMobileDropdown.js

@@ -0,0 +1,2 @@
+import React from"react";import Icon from"../Icon";const MeganavControlMobileDropdown=({theme})=>React.createElement("button",{type:"button",className:"block ml-24 mr-0 px-0 py-16 hover:text-gui-hover focus:text-gui-focus focus:outline-none","data-id":"meganav-control-mobile-dropdown","aria-expanded":"false","aria-controls":"meganav-mobile-dropdown"},React.createElement(Icon,{name:"icon-gui-bars-3-outline",size:"1.5rem",color:theme.mobileMenuColor,additionalCSS:"transition-colors","data-id":"meganav-control-mobile-dropdown-menu"}),React.createElement(Icon,{name:"icon-gui-x-mark-outline",size:"1.5rem",color:theme.mobileMenuColor,additionalCSS:"transition-colors hidden","data-id":"meganav-control-mobile-dropdown-close"}));export default MeganavControlMobileDropdown;
+//# sourceMappingURL=MeganavControlMobileDropdown.js.map

package/core/LegacyMeganav/MeganavControlMobileDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/LegacyMeganav/MeganavControlMobileDropdown.tsx"],"sourcesContent":["import React from \"react\";\n\nimport Icon from \"../Icon\";\nimport { MeganavTheme } from \"./LegacyMeganav\";\n\nconst MeganavControlMobileDropdown = ({ theme }: { theme: MeganavTheme }) => (\n  <button\n    type=\"button\"\n    className=\"block ml-24 mr-0 px-0 py-16 hover:text-gui-hover focus:text-gui-focus focus:outline-none\"\n    data-id=\"meganav-control-mobile-dropdown\"\n    aria-expanded=\"false\"\n    aria-controls=\"meganav-mobile-dropdown\"\n  >\n    <Icon\n      name=\"icon-gui-bars-3-outline\"\n      size=\"1.5rem\"\n      color={theme.mobileMenuColor}\n      additionalCSS=\"transition-colors\"\n      data-id=\"meganav-control-mobile-dropdown-menu\"\n    />\n    <Icon\n      name=\"icon-gui-x-mark-outline\"\n      size=\"1.5rem\"\n      color={theme.mobileMenuColor}\n      additionalCSS=\"transition-colors hidden\"\n      data-id=\"meganav-control-mobile-dropdown-close\"\n    />\n  </button>\n);\n\nexport default MeganavControlMobileDropdown;\n"],"names":["React","Icon","MeganavControlMobileDropdown","theme","button","type","className","data-id","aria-expanded","aria-controls","name","size","color","mobileMenuColor","additionalCSS"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAE1B,QAAOC,SAAU,SAAU,CAG3B,MAAMC,6BAA+B,CAAC,CAAEC,KAAK,CAA2B,GACtE,oBAACC,UACCC,KAAK,SACLC,UAAU,2FACVC,UAAQ,kCACRC,gBAAc,QACdC,gBAAc,2BAEd,oBAACR,MACCS,KAAK,0BACLC,KAAK,SACLC,MAAOT,MAAMU,eAAe,CAC5BC,cAAc,oBACdP,UAAQ,yCAEV,oBAACN,MACCS,KAAK,0BACLC,KAAK,SACLC,MAAOT,MAAMU,eAAe,CAC5BC,cAAc,2BACdP,UAAQ,0CAKd,gBAAeL,4BAA6B"}

package/core/LegacyMeganav/MeganavControlMobilePanelClose.js

@@ -0,0 +1,2 @@
+import React from"react";import Icon from"../Icon";const MeganavControlMobilePanelClose=({ariaControls,displayHr=true})=>React.createElement("div",{className:"mx-24 md:mx-32"},React.createElement("button",{type:"button",className:"ui-meganav-mobile-link text-gui-default mb-16","data-id":"meganav-control-mobile-panel-close","aria-expanded":"false","aria-controls":ariaControls,"aria-label":"Hide panel"},React.createElement(Icon,{name:"icon-gui-chevron-left-micro",color:"text-cool-black",size:"1.5rem",additionalCSS:"relative -top-1"}),"Back"),displayHr?React.createElement("hr",{className:"ui-meganav-hr"}):null);export default MeganavControlMobilePanelClose;
+//# sourceMappingURL=MeganavControlMobilePanelClose.js.map

package/core/LegacyMeganav/MeganavControlMobilePanelClose.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/LegacyMeganav/MeganavControlMobilePanelClose.tsx"],"sourcesContent":["import React from \"react\";\n\nimport Icon from \"../Icon\";\ntype MeganavControlMobilePanelCloseProps = {\n  ariaControls: string;\n  displayHr?: boolean;\n};\n\nconst MeganavControlMobilePanelClose = ({\n  ariaControls,\n  displayHr = true,\n}: MeganavControlMobilePanelCloseProps) => (\n  <div className=\"mx-24 md:mx-32\">\n    <button\n      type=\"button\"\n      className=\"ui-meganav-mobile-link text-gui-default mb-16\"\n      data-id=\"meganav-control-mobile-panel-close\"\n      aria-expanded=\"false\"\n      aria-controls={ariaControls}\n      aria-label=\"Hide panel\"\n    >\n      <Icon\n        name=\"icon-gui-chevron-left-micro\"\n        color=\"text-cool-black\"\n        size=\"1.5rem\"\n        additionalCSS=\"relative -top-1\"\n      />\n      Back\n    </button>\n    {displayHr ? <hr className=\"ui-meganav-hr\" /> : null}\n  </div>\n);\n\nexport default MeganavControlMobilePanelClose;\n"],"names":["React","Icon","MeganavControlMobilePanelClose","ariaControls","displayHr","div","className","button","type","data-id","aria-expanded","aria-controls","aria-label","name","color","size","additionalCSS","hr"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAE1B,QAAOC,SAAU,SAAU,CAM3B,MAAMC,+BAAiC,CAAC,CACtCC,YAAY,CACZC,UAAY,IAAI,CACoB,GACpC,oBAACC,OAAIC,UAAU,kBACb,oBAACC,UACCC,KAAK,SACLF,UAAU,gDACVG,UAAQ,qCACRC,gBAAc,QACdC,gBAAeR,aACfS,aAAW,cAEX,oBAACX,MACCY,KAAK,8BACLC,MAAM,kBACNC,KAAK,SACLC,cAAc,oBACd,QAGHZ,UAAY,oBAACa,MAAGX,UAAU,kBAAqB,KAIpD,gBAAeJ,8BAA+B"}

package/core/LegacyMeganav/MeganavControlMobilePanelOpen.js

@@ -0,0 +1,2 @@
+import React from"react";import Icon from"../Icon";const MeganavControlMobilePanelOpen=({ariaControls,children})=>React.createElement("button",{type:"button",className:"ui-meganav-mobile-link","data-id":"meganav-control-mobile-panel-open","aria-expanded":"false","aria-controls":ariaControls,"aria-label":`Show ${children}`},children,React.createElement(Icon,{name:"icon-gui-chevron-right-micro",color:"text-cool-black",size:"1.5rem",additionalCSS:"relative -top-1 ml-auto float-right"}));export default MeganavControlMobilePanelOpen;
+//# sourceMappingURL=MeganavControlMobilePanelOpen.js.map

package/core/LegacyMeganav/MeganavControlMobilePanelOpen.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/LegacyMeganav/MeganavControlMobilePanelOpen.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\n\nimport Icon from \"../Icon\";\ntype MeganavControlMobilePanelOpenProps = {\n  ariaControls: string;\n  children: ReactNode;\n};\n\nconst MeganavControlMobilePanelOpen = ({\n  ariaControls,\n  children,\n}: MeganavControlMobilePanelOpenProps) => (\n  <button\n    type=\"button\"\n    className=\"ui-meganav-mobile-link\"\n    data-id=\"meganav-control-mobile-panel-open\"\n    aria-expanded=\"false\"\n    aria-controls={ariaControls}\n    aria-label={`Show ${children}`}\n  >\n    {children}\n    <Icon\n      name=\"icon-gui-chevron-right-micro\"\n      color=\"text-cool-black\"\n      size=\"1.5rem\"\n      additionalCSS=\"relative -top-1 ml-auto float-right\"\n    />\n  </button>\n);\n\nexport default MeganavControlMobilePanelOpen;\n"],"names":["React","Icon","MeganavControlMobilePanelOpen","ariaControls","children","button","type","className","data-id","aria-expanded","aria-controls","aria-label","name","color","size","additionalCSS"],"mappings":"AAAA,OAAOA,UAA0B,OAAQ,AAEzC,QAAOC,SAAU,SAAU,CAM3B,MAAMC,8BAAgC,CAAC,CACrCC,YAAY,CACZC,QAAQ,CAC2B,GACnC,oBAACC,UACCC,KAAK,SACLC,UAAU,yBACVC,UAAQ,oCACRC,gBAAc,QACdC,gBAAeP,aACfQ,aAAY,CAAC,KAAK,EAAEP,SAAS,CAAC,EAE7BA,SACD,oBAACH,MACCW,KAAK,+BACLC,MAAM,kBACNC,KAAK,SACLC,cAAc,wCAKpB,gBAAeb,6BAA8B"}

package/core/LegacyMeganav/MeganavItemsDesktop.js

@@ -0,0 +1,2 @@
+import React from"react";import MeganavData from"./component.json";import MeganavControl from"./MeganavControl";const MeganavDesktopItems=({panels,paths,theme,absUrl,statusUrl})=>React.createElement("ul",{className:"hidden md:flex","data-id":"meganav-items-desktop"},MeganavData.panels.map(panel=>{const PanelComponent=panels[panel.component];const bgCSS=["products-panel","use-cases-panel"].includes(panel.id)?"ui-meganav-panel-split-bg":"";return React.createElement("li",{className:"ui-meganav-item",key:panel.id},React.createElement(MeganavControl,{theme:theme,ariaControls:panel.id,ariaLabel:panel.label},React.createElement("span",{className:"hidden lg:inline"},panel.label),React.createElement("span",{className:"lg:hidden"},panel.shortLabel)),React.createElement("div",{className:`ui-meganav-panel invisible ${bgCSS}`,id:panel.id,"data-id":"meganav-panel"},React.createElement(PanelComponent,{paths:paths,absUrl:absUrl,statusUrl:statusUrl})))}),React.createElement("li",{className:"ui-meganav-item"},React.createElement("a",{href:absUrl("/pricing"),"data-id":"meganav-link",className:`ui-meganav-link h-64 items-center flex ${theme.textColor}`},"Pricing")));export default React.memo(MeganavDesktopItems);
+//# sourceMappingURL=MeganavItemsDesktop.js.map