@ably/ui 14.0.0-dev.968e4a2 → 14.0.0-dev.b96df46

package/core/Meganav/component.js

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

package/core/Meganav.js

@@ -1 +1 @@
-import React,{useEffect,useState}from"react";import{connectState}from"../remote-data-store.js";import{selectSessionData}from"../remote-session-data.js";import Logo from"../Logo/component.tsx";import"./component.css";import MeganavScripts from"./component.js";import MeganavItemsDesktop from"../MeganavItemsDesktop/component.tsx";import MeganavItemsSignedIn from"../MeganavItemsSignedIn/component.tsx";import MeganavItemsMobile from"../MeganavItemsMobile/component.tsx";import Notice from"../Notice/component.tsx";import MeganavData from"./component.json";import _absUrl from"../url-base.js";import MeganavContentProducts from"../MeganavContentProducts/component.tsx";import MeganavContentUseCases from"../MeganavContentUseCases/component.tsx";import MeganavContentCompany from"../MeganavContentCompany/component.tsx";import MeganavContentDevelopers from"../MeganavContentDevelopers/component.tsx";import MeganavSearch from"../MeganavSearch/component.tsx";const SignIn=({sessionState,theme,loginLink,absUrl})=>{return sessionState.signedIn?React.createElement(MeganavItemsSignedIn,{absUrl:absUrl,sessionState:sessionState,theme:theme}):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})),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 Meganav=({paths,themeName="white",notice,loginLink="/login",urlBase,addSearchApiKey})=>{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);var _paths_logo;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=paths===null||paths===void 0?void 0:paths.logo)!==null&&_paths_logo!==void 0?_paths_logo:""})),React.createElement(MeganavItemsDesktop,{panels:panels,paths:paths,theme:theme,absUrl:absUrl}),sessionState?React.createElement(SignIn,{sessionState:sessionState,theme:theme,loginLink:loginLink,absUrl:absUrl}):React.createElement(SignInPlaceholder,null),React.createElement(MeganavItemsMobile,{panels:panels,sessionState:sessionState,paths:paths,theme:theme,loginLink:loginLink,absUrl:absUrl})))};export default Meganav;
+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"./Meganav/component.json";import MeganavScripts from"./Meganav/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})=>{return sessionState.signedIn?React.createElement(MeganavItemsSignedIn,{absUrl:absUrl,sessionState:sessionState,theme:theme}):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})),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 Meganav=({paths,themeName="white",notice,loginLink="/login",urlBase,addSearchApiKey})=>{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);var _paths_logo;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=paths===null||paths===void 0?void 0:paths.logo)!==null&&_paths_logo!==void 0?_paths_logo:""})),React.createElement(MeganavItemsDesktop,{panels:panels,paths:paths,theme:theme,absUrl:absUrl}),sessionState?React.createElement(SignIn,{sessionState:sessionState,theme:theme,loginLink:loginLink,absUrl:absUrl}):React.createElement(SignInPlaceholder,null),React.createElement(MeganavItemsMobile,{panels:panels,sessionState:sessionState,paths:paths,theme:theme,loginLink:loginLink,absUrl:absUrl})))};export default Meganav;

package/core/MeganavBlogPostsList.js

@@ -1 +1 @@
-import React from"react";import FeaturedLink from"../FeaturedLink/component.tsx";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;
+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;

package/core/MeganavContentCompany.js

@@ -1 +1 @@
-import React from"react";import MeganavBlogPostsList from"../MeganavBlogPostsList/component.tsx";import ConnectStateWrapper from"../ConnectStateWrapper/component.tsx";import{selectRecentBlogPosts}from"../remote-blogs-posts.js";import Icon from"../Icon/component.tsx";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"},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;
+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"},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;

package/core/MeganavContentDevelopers.js

@@ -1 +1 @@
-import React from"react";import Icon from"../Icon/component.tsx";const MeganavContentDevelopers=({absUrl})=>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-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"},"Status",React.createElement("iframe",{title:"Ably status",src:"https://status.ably.com/embed/icon",style:{backgroundColor:"transparent"},frameBorder:"0",scrolling:"no",className:"w-24 h-24 ml-4 border-none pointer-events-none align-middle"})))),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;
+import React from"react";import Icon from"./Icon";const MeganavContentDevelopers=({absUrl})=>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-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"},"Status",React.createElement("iframe",{title:"Ably status",src:"https://status.ably.com/embed/icon",style:{backgroundColor:"transparent"},frameBorder:"0",scrolling:"no",className:"w-24 h-24 ml-4 border-none pointer-events-none align-middle"})))),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;

package/core/MeganavContentProducts.js

@@ -1 +1 @@
-import React from"react";import FeaturedLink from"../FeaturedLink/component.tsx";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"},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("/solutions/channels"),className:"group ui-meganav-media"},React.createElement("p",{className:"ui-meganav-media-heading"},"Pub/Sub Channels"),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 (Beta)"),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 (Early access)"),React.createElement("p",{className:"ui-meganav-media-copy"},"Keep clients in sync with any relational database."))))),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;
+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"},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("/solutions/channels"),className:"group ui-meganav-media"},React.createElement("p",{className:"ui-meganav-media-heading"},"Pub/Sub Channels"),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 (Beta)"),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 (Early access)"),React.createElement("p",{className:"ui-meganav-media-copy"},"Keep clients in sync with any relational database."))))),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;

package/core/MeganavContentUseCases.js

@@ -1 +1 @@
-import React from"react";import Icon from"../Icon/component.tsx";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("/solutions/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-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 (Beta)"),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/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/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/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/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/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/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/sports-and-media"),className:"ui-meganav-media group"},React.createElement("p",{className:"ui-meganav-media-heading"},"Sports, Media & Audience Engagement"),React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver engaging global realtime experiences."))),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/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;
+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("/solutions/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-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 (Beta)"),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/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/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/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/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/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/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/sports-and-media"),className:"ui-meganav-media group"},React.createElement("p",{className:"ui-meganav-media-heading"},"Sports, Media & Audience Engagement"),React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver engaging global realtime experiences."))),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/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;

package/core/MeganavControl.js

@@ -1 +1 @@
-import React from"react";import Icon from"../Icon/component.tsx";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-disclosure-arrow",color:"text-cool-black",size:"1.5rem",additionalCSS:"transform rotate-90 group-hover:text-gui-hover group-focus:text-gui-focus"}));export default MeganavControl;
+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-disclosure-arrow",color:"text-cool-black",size:"1.5rem",additionalCSS:"transform rotate-90 group-hover:text-gui-hover group-focus:text-gui-focus"}));export default MeganavControl;

package/core/MeganavControlMobileDropdown.js

@@ -1 +1 @@
-import React from"react";import Icon from"../Icon/component.tsx";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-burger-menu",size:"1.5rem",color:theme.mobileMenuColor,additionalCSS:"transition-colors","data-id":"meganav-control-mobile-dropdown-menu"}),React.createElement(Icon,{name:"icon-gui-close",size:"1.5rem",color:theme.mobileMenuColor,additionalCSS:"transition-colors hidden","data-id":"meganav-control-mobile-dropdown-close"}));export default MeganavControlMobileDropdown;
+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-burger-menu",size:"1.5rem",color:theme.mobileMenuColor,additionalCSS:"transition-colors","data-id":"meganav-control-mobile-dropdown-menu"}),React.createElement(Icon,{name:"icon-gui-close",size:"1.5rem",color:theme.mobileMenuColor,additionalCSS:"transition-colors hidden","data-id":"meganav-control-mobile-dropdown-close"}));export default MeganavControlMobileDropdown;

package/core/MeganavControlMobilePanelClose.js

@@ -1 +1 @@
-import React from"react";import Icon from"../Icon/component.tsx";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-disclosure-arrow",color:"text-cool-black",size:"1.5rem",additionalCSS:"relative -top-1 transform rotate-180"}),"Back"),displayHr?React.createElement("hr",{className:"ui-meganav-hr"}):null);export default MeganavControlMobilePanelClose;
+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-disclosure-arrow",color:"text-cool-black",size:"1.5rem",additionalCSS:"relative -top-1 transform rotate-180"}),"Back"),displayHr?React.createElement("hr",{className:"ui-meganav-hr"}):null);export default MeganavControlMobilePanelClose;

package/core/MeganavControlMobilePanelOpen.js

@@ -1 +1 @@
-import React from"react";import Icon from"../Icon/component.tsx";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-disclosure-arrow",color:"text-cool-black",size:"1.5rem",additionalCSS:"relative -top-1 ml-auto float-right"}));export default MeganavControlMobilePanelOpen;
+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-disclosure-arrow",color:"text-cool-black",size:"1.5rem",additionalCSS:"relative -top-1 ml-auto float-right"}));export default MeganavControlMobilePanelOpen;

package/core/MeganavItemsDesktop.js

@@ -1 +1 @@
-import React from"react";import MeganavData from"../Meganav/component.json";import MeganavControl from"../MeganavControl/component.tsx";const MeganavDesktopItems=({panels,paths,theme,absUrl})=>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})))}),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);
+import React from"react";import MeganavData from"./Meganav/component.json";import MeganavControl from"./MeganavControl";const MeganavDesktopItems=({panels,paths,theme,absUrl})=>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})))}),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);

package/core/MeganavItemsMobile.js

@@ -1 +1 @@
-import React from"react";import SignOutLink from"../SignOutLink/component.tsx";import MeganavSearchSuggestions from"../MeganavSearchSuggestions/component.tsx";import Icon from"../Icon/component.tsx";import MeganavData from"../Meganav/component.json";import MeganavControlMobileDropdown from"../MeganavControlMobileDropdown/component.tsx";import MeganavControlMobilePanelClose from"../MeganavControlMobilePanelClose/component.tsx";import MeganavControlMobilePanelOpen from"../MeganavControlMobilePanelOpen/component.tsx";import MeganavSearchAutocomplete from"../MeganavSearchAutocomplete/component.tsx";const MeganavItemsMobile=({panels,paths,sessionState,theme,loginLink,absUrl})=>{const classNames=`ui-meganav-link ${theme.textColor}`;return React.createElement("ul",{className:"flex md:hidden","data-id":"meganav-items-mobile"},React.createElement("li",null,(sessionState===null||sessionState===void 0?void 0:sessionState.signedIn)&&(sessionState===null||sessionState===void 0?void 0:sessionState.logOut)?React.createElement(SignOutLink,{absUrl:absUrl,...sessionState.logOut},({text,href,onClick})=>React.createElement("a",{onClick:onClick,href:absUrl(href),className:classNames,"data-id":"meganav-link"},text)):React.createElement("a",{href:absUrl(loginLink),className:classNames,"data-id":"meganav-link"},"Login")),React.createElement("li",{className:"ui-meganav-item"},React.createElement(MeganavControlMobileDropdown,{theme:theme}),React.createElement("div",{className:"ui-meganav-mobile-dropdown invisible",id:"meganav-mobile-dropdown","data-id":"meganav-mobile-dropdown"},React.createElement("div",{className:"pt-24 pb-16 ui-grid-px bg-white"},React.createElement("form",{className:"mb-16",action:absUrl("/search"),method:"get"},React.createElement("div",{className:"relative w-full"},React.createElement(Icon,{name:"icon-gui-search",color:"text-cool-black",size:"1.5rem",additionalCSS:"absolute top-12 left-16 hover:text-gui-hover"}),React.createElement("button",{type:"button",className:"absolute top-12 right-16 p-0 focus:outline-gui-focus m-0 md:hidden invisible","data-id":"meganav-search-input-clear"},React.createElement(Icon,{name:"icon-gui-cross-circled-fill",color:"text-dark-grey",size:"1.5rem",additionalCSS:""})),React.createElement("input",{type:"search",name:"q",className:"ui-input px-48 h-48",style:{maxWidth:"none"},placeholder:"Search",autoComplete:"off","data-id":"meganav-mobile-search-input"}),React.createElement(MeganavSearchAutocomplete,null))),React.createElement("div",{className:"max-h-0 overflow-hidden transition-all","data-id":"meganav-mobile-search-suggestions"},React.createElement(MeganavSearchSuggestions,{absUrl:absUrl,displaySupportLink:false})),React.createElement("ul",{className:"mb-16","data-id":"meganav-mobile-panel-controls"},MeganavData.panels.map(panel=>{const PanelComponent=panels[panel.component];const displayHr=["company-panel","developers-panel"].includes(panel.id);return React.createElement("li",{className:"ui-meganav-mobile-item",key:`${panel.id}-mobile`},React.createElement(MeganavControlMobilePanelOpen,{ariaControls:`${panel.id}-mobile`},panel.label),React.createElement("div",{className:"ui-meganav-panel-mobile hidden",id:`${panel.id}-mobile`,"data-scroll-lock-scrollable":true},React.createElement(MeganavControlMobilePanelClose,{ariaControls:`${panel.id}-mobile`,displayHr:displayHr}),React.createElement(PanelComponent,{paths:paths,absUrl:absUrl})))}),React.createElement("li",null,React.createElement("a",{href:absUrl("/pricing"),className:"ui-meganav-mobile-link"},"Pricing"))),React.createElement("hr",{className:"ui-meganav-hr mb-20"}),React.createElement("div",{className:"flex justify-between items-center mb-16"},React.createElement("a",{href:absUrl("/contact"),className:"text-menu2 font-medium block ml-0 mr-8 lg:mx-12 p-0 hover:text-gui-hover focus:text-gui-focus focus:outline-none"},"Contact us"),(sessionState===null||sessionState===void 0?void 0:sessionState.signedIn)&&(sessionState===null||sessionState===void 0?void 0:sessionState.account)?React.createElement("a",{href:absUrl(sessionState.account.links.dashboard.href),className:"ui-btn-secondary"},"Dashboard"):React.createElement("a",{href:absUrl("/sign-up"),className:"ui-btn"},"Sign up free"))))))};export default React.memo(MeganavItemsMobile,(oldState,newState)=>{const{paths:pathsOld,theme:themeOld}=oldState;const{paths:pathsNew,theme:themeNew}=newState;return pathsOld===pathsNew&&themeOld===themeNew&&Object.keys(newState.sessionState||{}).length===0});
+import React from"react";import SignOutLink from"./SignOutLink";import MeganavSearchSuggestions from"./MeganavSearchSuggestions";import Icon from"./Icon";import MeganavData from"./Meganav/component.json";import MeganavControlMobileDropdown from"./MeganavControlMobileDropdown";import MeganavControlMobilePanelClose from"./MeganavControlMobilePanelClose";import MeganavControlMobilePanelOpen from"./MeganavControlMobilePanelOpen";import MeganavSearchAutocomplete from"./MeganavSearchAutocomplete";const MeganavItemsMobile=({panels,paths,sessionState,theme,loginLink,absUrl})=>{const classNames=`ui-meganav-link ${theme.textColor}`;return React.createElement("ul",{className:"flex md:hidden","data-id":"meganav-items-mobile"},React.createElement("li",null,(sessionState===null||sessionState===void 0?void 0:sessionState.signedIn)&&(sessionState===null||sessionState===void 0?void 0:sessionState.logOut)?React.createElement(SignOutLink,{absUrl:absUrl,...sessionState.logOut},({text,href,onClick})=>React.createElement("a",{onClick:onClick,href:absUrl(href),className:classNames,"data-id":"meganav-link"},text)):React.createElement("a",{href:absUrl(loginLink),className:classNames,"data-id":"meganav-link"},"Login")),React.createElement("li",{className:"ui-meganav-item"},React.createElement(MeganavControlMobileDropdown,{theme:theme}),React.createElement("div",{className:"ui-meganav-mobile-dropdown invisible",id:"meganav-mobile-dropdown","data-id":"meganav-mobile-dropdown"},React.createElement("div",{className:"pt-24 pb-16 ui-grid-px bg-white"},React.createElement("form",{className:"mb-16",action:absUrl("/search"),method:"get"},React.createElement("div",{className:"relative w-full"},React.createElement(Icon,{name:"icon-gui-search",color:"text-cool-black",size:"1.5rem",additionalCSS:"absolute top-12 left-16 hover:text-gui-hover"}),React.createElement("button",{type:"button",className:"absolute top-12 right-16 p-0 focus:outline-gui-focus m-0 md:hidden invisible","data-id":"meganav-search-input-clear"},React.createElement(Icon,{name:"icon-gui-cross-circled-fill",color:"text-dark-grey",size:"1.5rem",additionalCSS:""})),React.createElement("input",{type:"search",name:"q",className:"ui-input px-48 h-48",style:{maxWidth:"none"},placeholder:"Search",autoComplete:"off","data-id":"meganav-mobile-search-input"}),React.createElement(MeganavSearchAutocomplete,null))),React.createElement("div",{className:"max-h-0 overflow-hidden transition-all","data-id":"meganav-mobile-search-suggestions"},React.createElement(MeganavSearchSuggestions,{absUrl:absUrl,displaySupportLink:false})),React.createElement("ul",{className:"mb-16","data-id":"meganav-mobile-panel-controls"},MeganavData.panels.map(panel=>{const PanelComponent=panels[panel.component];const displayHr=["company-panel","developers-panel"].includes(panel.id);return React.createElement("li",{className:"ui-meganav-mobile-item",key:`${panel.id}-mobile`},React.createElement(MeganavControlMobilePanelOpen,{ariaControls:`${panel.id}-mobile`},panel.label),React.createElement("div",{className:"ui-meganav-panel-mobile hidden",id:`${panel.id}-mobile`,"data-scroll-lock-scrollable":true},React.createElement(MeganavControlMobilePanelClose,{ariaControls:`${panel.id}-mobile`,displayHr:displayHr}),React.createElement(PanelComponent,{paths:paths,absUrl:absUrl})))}),React.createElement("li",null,React.createElement("a",{href:absUrl("/pricing"),className:"ui-meganav-mobile-link"},"Pricing"))),React.createElement("hr",{className:"ui-meganav-hr mb-20"}),React.createElement("div",{className:"flex justify-between items-center mb-16"},React.createElement("a",{href:absUrl("/contact"),className:"text-menu2 font-medium block ml-0 mr-8 lg:mx-12 p-0 hover:text-gui-hover focus:text-gui-focus focus:outline-none"},"Contact us"),(sessionState===null||sessionState===void 0?void 0:sessionState.signedIn)&&(sessionState===null||sessionState===void 0?void 0:sessionState.account)?React.createElement("a",{href:absUrl(sessionState.account.links.dashboard.href),className:"ui-btn-secondary"},"Dashboard"):React.createElement("a",{href:absUrl("/sign-up"),className:"ui-btn"},"Sign up free"))))))};export default React.memo(MeganavItemsMobile,(oldState,newState)=>{const{paths:pathsOld,theme:themeOld}=oldState;const{paths:pathsNew,theme:themeNew}=newState;return pathsOld===pathsNew&&themeOld===themeNew&&Object.keys(newState.sessionState||{}).length===0});

package/core/MeganavItemsSignedIn.js

@@ -1 +1 @@
-import React from"react";import MeganavControl from"../MeganavControl/component.tsx";import SignOutLink from"../SignOutLink/component.tsx";import MeganavSearch from"../MeganavSearch/component.tsx";const truncate=(string,length)=>{return(string===null||string===void 0?void 0:string.length)&&string.length>length?`${string.slice(0,length-1)}…`:string};const MeganavItemsSignedIn=({sessionState,theme,absUrl})=>{const links=sessionState.account?Object.keys(sessionState.account.links).map(key=>sessionState.account.links[key]):[];const accountName=truncate(sessionState.accountName,20);const preferredEmail=truncate(sessionState.preferredEmail,20);return React.createElement("ul",{className:"hidden md:flex items-center"},React.createElement("li",{className:"ui-meganav-item relative"},React.createElement(MeganavControl,{ariaControls:"account-panel",ariaLabel:"Account",theme:theme,additionalCSS:"mr-0"},accountName),React.createElement("div",{className:"ui-meganav-panel-account invisible",id:"account-panel","data-id":"meganav-panel"},sessionState.account&&React.createElement(React.Fragment,null,React.createElement("p",{className:"ui-meganav-overline mt-16 mx-16"},"Your account"),React.createElement("ul",{className:"mb-16 mx-16"},links.map(item=>React.createElement("li",{key:item.href},React.createElement("a",{className:"ui-meganav-account-link",href:absUrl(item.href)},item.text))))),React.createElement("p",{className:"ui-meganav-overline mx-16"},preferredEmail),React.createElement("ul",{className:"mb-8 mx-16"},React.createElement("li",null,React.createElement("a",{href:absUrl(sessionState.mySettings.href),className:"ui-meganav-account-link"},sessionState.mySettings.text)),sessionState.myAccessTokens&&React.createElement("li",null,React.createElement("a",{href:absUrl(sessionState.myAccessTokens.href),className:"ui-meganav-account-link"},sessionState.myAccessTokens.text,React.createElement("span",{className:"ui-version-tag"},"preview")))),React.createElement("hr",{className:"ui-meganav-hr mb-16"}),sessionState.logOut&&React.createElement("div",{className:"mb-16 px-16"},React.createElement(SignOutLink,{absUrl:absUrl,...sessionState.logOut},({text,href,onClick})=>React.createElement("a",{onClick:onClick,href:absUrl(href),className:"ui-meganav-account-link"},text))))),React.createElement("li",null,React.createElement(MeganavSearch,{absUrl:absUrl})),sessionState.account&&React.createElement("li",null,React.createElement("a",{href:absUrl(sessionState.account.links.dashboard.href),className:"ui-btn-secondary p-btn-small"},"Dashboard")))};export default MeganavItemsSignedIn;
+import React from"react";import MeganavControl from"./MeganavControl";import SignOutLink from"./SignOutLink";import MeganavSearch from"./MeganavSearch";const truncate=(string,length)=>{return(string===null||string===void 0?void 0:string.length)&&string.length>length?`${string.slice(0,length-1)}…`:string};const MeganavItemsSignedIn=({sessionState,theme,absUrl})=>{const links=sessionState.account?Object.keys(sessionState.account.links).map(key=>sessionState.account.links[key]):[];const accountName=truncate(sessionState.accountName,20);const preferredEmail=truncate(sessionState.preferredEmail,20);return React.createElement("ul",{className:"hidden md:flex items-center"},React.createElement("li",{className:"ui-meganav-item relative"},React.createElement(MeganavControl,{ariaControls:"account-panel",ariaLabel:"Account",theme:theme,additionalCSS:"mr-0"},accountName),React.createElement("div",{className:"ui-meganav-panel-account invisible",id:"account-panel","data-id":"meganav-panel"},sessionState.account&&React.createElement(React.Fragment,null,React.createElement("p",{className:"ui-meganav-overline mt-16 mx-16"},"Your account"),React.createElement("ul",{className:"mb-16 mx-16"},links.map(item=>React.createElement("li",{key:item.href},React.createElement("a",{className:"ui-meganav-account-link",href:absUrl(item.href)},item.text))))),React.createElement("p",{className:"ui-meganav-overline mx-16"},preferredEmail),React.createElement("ul",{className:"mb-8 mx-16"},React.createElement("li",null,React.createElement("a",{href:absUrl(sessionState.mySettings.href),className:"ui-meganav-account-link"},sessionState.mySettings.text)),sessionState.myAccessTokens&&React.createElement("li",null,React.createElement("a",{href:absUrl(sessionState.myAccessTokens.href),className:"ui-meganav-account-link"},sessionState.myAccessTokens.text,React.createElement("span",{className:"ui-version-tag"},"preview")))),React.createElement("hr",{className:"ui-meganav-hr mb-16"}),sessionState.logOut&&React.createElement("div",{className:"mb-16 px-16"},React.createElement(SignOutLink,{absUrl:absUrl,...sessionState.logOut},({text,href,onClick})=>React.createElement("a",{onClick:onClick,href:absUrl(href),className:"ui-meganav-account-link"},text))))),React.createElement("li",null,React.createElement(MeganavSearch,{absUrl:absUrl})),sessionState.account&&React.createElement("li",null,React.createElement("a",{href:absUrl(sessionState.account.links.dashboard.href),className:"ui-btn-secondary p-btn-small"},"Dashboard")))};export default MeganavItemsSignedIn;

package/core/MeganavSearch.js

@@ -1 +1 @@
-import React from"react";import Icon from"../Icon/component.tsx";import MeganavSearchPanel from"../MeganavSearchPanel/component.tsx";const MeganavSearch=({absUrl})=>React.createElement(React.Fragment,null,React.createElement("button",{type:"button","data-id":"meganav-control","data-control":"search",className:"h-64 w-24 px-24 pr-48 py-20 group focus:outline-none","aria-expanded":"false","aria-controls":"panel-search","aria-label":`Show Search Panel`},React.createElement(Icon,{name:"icon-gui-search",color:"text-cool-black",size:"1.5rem",additionalCSS:"group-hover:text-gui-hover group-focus:text-gui-focus"})),React.createElement("div",{className:"ui-meganav-panel invisible",id:"panel-search","data-id":"meganav-panel"},React.createElement(MeganavSearchPanel,{absUrl:absUrl})));export default MeganavSearch;
+import React from"react";import Icon from"./Icon";import MeganavSearchPanel from"./MeganavSearchPanel";const MeganavSearch=({absUrl})=>React.createElement(React.Fragment,null,React.createElement("button",{type:"button","data-id":"meganav-control","data-control":"search",className:"h-64 w-24 px-24 pr-48 py-20 group focus:outline-none","aria-expanded":"false","aria-controls":"panel-search","aria-label":`Show Search Panel`},React.createElement(Icon,{name:"icon-gui-search",color:"text-cool-black",size:"1.5rem",additionalCSS:"group-hover:text-gui-hover group-focus:text-gui-focus"})),React.createElement("div",{className:"ui-meganav-panel invisible",id:"panel-search","data-id":"meganav-panel"},React.createElement(MeganavSearchPanel,{absUrl:absUrl})));export default MeganavSearch;

package/core/MeganavSearchPanel.js

@@ -1 +1 @@
-import React from"react";import Icon from"../Icon/component.tsx";import MeganavSearchSuggestions from"../MeganavSearchSuggestions/component.tsx";import MeganavSearchAutocomplete from"../MeganavSearchAutocomplete/component.tsx";const MeganavSearchPanel=({absUrl})=>React.createElement("section",{className:"ui-meganav-content grid-cols-12"},React.createElement("div",{className:"col-span-8"},React.createElement("div",{className:"mb-32"},React.createElement("form",{className:"flex items-start",action:absUrl("/search"),method:"get"},React.createElement("div",{className:"relative w-full"},React.createElement(Icon,{name:"icon-gui-search",color:"text-cool-black",size:"1.5rem",additionalCSS:"absolute top-12 left-16"}),React.createElement("input",{type:"search",name:"q",className:"ui-input pl-48 h-48",placeholder:"Search",autoComplete:"off","data-id":"meganav-search-input"}),React.createElement(MeganavSearchAutocomplete,null)),React.createElement("button",{type:"submit",className:"ui-btn-secondary flex-shrink-0 ml-8 sm:ml-16 md:ml-24 xl:ml-32"},"Search")))),React.createElement("div",{className:"col-span-12"},React.createElement(MeganavSearchSuggestions,{displaySupportLink:true,absUrl:absUrl})));export default MeganavSearchPanel;
+import React from"react";import Icon from"./Icon";import MeganavSearchSuggestions from"./MeganavSearchSuggestions";import MeganavSearchAutocomplete from"./MeganavSearchAutocomplete";const MeganavSearchPanel=({absUrl})=>React.createElement("section",{className:"ui-meganav-content grid-cols-12"},React.createElement("div",{className:"col-span-8"},React.createElement("div",{className:"mb-32"},React.createElement("form",{className:"flex items-start",action:absUrl("/search"),method:"get"},React.createElement("div",{className:"relative w-full"},React.createElement(Icon,{name:"icon-gui-search",color:"text-cool-black",size:"1.5rem",additionalCSS:"absolute top-12 left-16"}),React.createElement("input",{type:"search",name:"q",className:"ui-input pl-48 h-48",placeholder:"Search",autoComplete:"off","data-id":"meganav-search-input"}),React.createElement(MeganavSearchAutocomplete,null)),React.createElement("button",{type:"submit",className:"ui-btn-secondary flex-shrink-0 ml-8 sm:ml-16 md:ml-24 xl:ml-32"},"Search")))),React.createElement("div",{className:"col-span-12"},React.createElement(MeganavSearchSuggestions,{displaySupportLink:true,absUrl:absUrl})));export default MeganavSearchPanel;

package/core/MeganavSearchSuggestions.js

@@ -1 +1 @@
-import React from"react";import FeaturedLink from"../FeaturedLink/component.tsx";const MeganavSearchSuggestions=({absUrl,displaySupportLink})=>React.createElement(React.Fragment,null,React.createElement("p",{className:"ui-text-overline2 text-cool-black py-12"},"Popular pages"),React.createElement("div",{className:"flex justify-between items-center overflow-hidden"},React.createElement("ul",{className:"flex transition-transform"},React.createElement("li",{className:"py-12 pr-8 flex-shrink-0"},React.createElement("a",{href:absUrl("/docs/how-ably-works"),className:"ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"},"How does Ably work?")),React.createElement("li",{className:"py-12 px-8 flex-shrink-0"},React.createElement("a",{href:absUrl("/docs/quick-start-guide"),className:"ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"},"Quickstart guide")),React.createElement("li",{className:"py-12 px-8 flex-shrink-0"},React.createElement("a",{href:absUrl("/docs/core-features/pubsub"),className:"ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"},"Publish/Subscribe Messaging")),React.createElement("li",{className:"py-12 pl-8 flex-shrink-0"},React.createElement("a",{href:absUrl("/platform"),className:"ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"},"Platform"))),displaySupportLink?React.createElement(FeaturedLink,{url:absUrl("/support"),textSize:"text-p2"},"Support"):null));export default MeganavSearchSuggestions;
+import React from"react";import FeaturedLink from"./FeaturedLink";const MeganavSearchSuggestions=({absUrl,displaySupportLink})=>React.createElement(React.Fragment,null,React.createElement("p",{className:"ui-text-overline2 text-cool-black py-12"},"Popular pages"),React.createElement("div",{className:"flex justify-between items-center overflow-hidden"},React.createElement("ul",{className:"flex transition-transform"},React.createElement("li",{className:"py-12 pr-8 flex-shrink-0"},React.createElement("a",{href:absUrl("/docs/how-ably-works"),className:"ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"},"How does Ably work?")),React.createElement("li",{className:"py-12 px-8 flex-shrink-0"},React.createElement("a",{href:absUrl("/docs/quick-start-guide"),className:"ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"},"Quickstart guide")),React.createElement("li",{className:"py-12 px-8 flex-shrink-0"},React.createElement("a",{href:absUrl("/docs/core-features/pubsub"),className:"ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"},"Publish/Subscribe Messaging")),React.createElement("li",{className:"py-12 pl-8 flex-shrink-0"},React.createElement("a",{href:absUrl("/platform"),className:"ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"},"Platform"))),displaySupportLink?React.createElement(FeaturedLink,{url:absUrl("/support"),textSize:"text-p2"},"Support"):null));export default MeganavSearchSuggestions;

package/core/Notice/component.css

@@ -1,5 +1,7 @@
-.ui-announcement {
-  @apply font-sans;
-  max-height: 37.5rem;
-  transition: max-height 300ms;
+@layer components {
+  .ui-announcement {
+    @apply font-sans;
+    max-height: 37.5rem;
+    transition: max-height 300ms;
+  }
 }

package/core/Notice/component.js

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

package/core/Notice.js

@@ -1 +1 @@
-import React,{useEffect}from"react";import NoticeScripts from"./component.js";import"./component.css";import Icon from"../Icon/component.tsx";const contentWrapperClasses="w-full pr-8 ui-text-p3 self-center";const ContentWrapper=({buttonLink,children})=>buttonLink?React.createElement("a",{href:buttonLink,className:contentWrapperClasses},children):React.createElement("div",{className:contentWrapperClasses},children);const Notice=({buttonLink,buttonLabel,bodyText,title,config,closeBtn,bgColor="bg-gradient-active-orange",textColor="text-white"})=>{useEffect(()=>{NoticeScripts({bannerContainer:document.querySelector('[data-id="ui-notice"]'),cookieId:config===null||config===void 0?void 0:config.cookieId,noticeId:config===null||config===void 0?void 0:config.noticeId,options:{collapse:(config===null||config===void 0?void 0:config.collapse)||false}})},[]);const wrapperClasses=["ui-announcement",bgColor,textColor].join(" ");return React.createElement("div",{className:wrapperClasses,"data-id":"ui-notice",style:{maxHeight:0,overflow:"hidden"}},React.createElement("div",{className:"ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start"},React.createElement(ContentWrapper,{buttonLink:buttonLink!==null&&buttonLink!==void 0?buttonLink:"#"},React.createElement("strong",{className:"font-bold whitespace-nowrap pr-4"},title),React.createElement("span",{className:"pr-4"},bodyText),buttonLabel&&React.createElement("span",{className:"underline cursor-pointer whitespace-nowrap"},buttonLabel)),closeBtn&&React.createElement("button",{type:"button",className:"ml-auto h-20 w-20 border-none bg-none self-baseline"},React.createElement(Icon,{name:"icon-gui-close",size:"1.25rem",color:"text-cool-black"}))))};export default Notice;
+import React,{useEffect}from"react";import NoticeScripts from"./Notice/component.js";import Icon from"./Icon";const contentWrapperClasses="w-full pr-8 ui-text-p3 self-center";const ContentWrapper=({buttonLink,children})=>buttonLink?React.createElement("a",{href:buttonLink,className:contentWrapperClasses},children):React.createElement("div",{className:contentWrapperClasses},children);const Notice=({buttonLink,buttonLabel,bodyText,title,config,closeBtn,bgColor="bg-gradient-active-orange",textColor="text-white"})=>{useEffect(()=>{NoticeScripts({bannerContainer:document.querySelector('[data-id="ui-notice"]'),cookieId:config===null||config===void 0?void 0:config.cookieId,noticeId:config===null||config===void 0?void 0:config.noticeId,options:{collapse:(config===null||config===void 0?void 0:config.collapse)||false}})},[]);const wrapperClasses=["ui-announcement",bgColor,textColor].join(" ");return React.createElement("div",{className:wrapperClasses,"data-id":"ui-notice",style:{maxHeight:0,overflow:"hidden"}},React.createElement("div",{className:"ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start"},React.createElement(ContentWrapper,{buttonLink:buttonLink!==null&&buttonLink!==void 0?buttonLink:"#"},React.createElement("strong",{className:"font-bold whitespace-nowrap pr-4"},title),React.createElement("span",{className:"pr-4"},bodyText),buttonLabel&&React.createElement("span",{className:"underline cursor-pointer whitespace-nowrap"},buttonLabel)),closeBtn&&React.createElement("button",{type:"button",className:"ml-auto h-20 w-20 border-none bg-none self-baseline"},React.createElement(Icon,{name:"icon-gui-close",size:"1.25rem",color:"text-cool-black"}))))};export default Notice;

package/core/Slider/component.css

@@ -1,6 +1,40 @@
-.ui-slider-marker {
-  font-size: 0.5rem;
-  top: -1px;
+@layer components {
+  .ui-slider-marker {
+    font-size: 0.5rem;
+    top: -1px;
 
-  @apply leading-none px-4 relative;
+    @apply leading-none px-4 relative;
+  }
+
+  @keyframes fillAnimation {
+    0% {
+      width: 0%;
+    }
+    100% {
+      width: 100%;
+    }
+  }
+
+  .ui-icon-cta {
+    @apply cursor-pointer overflow-hidden;
+    @apply rounded border-2 border-mid-grey hover:border-active-orange;
+    transition: all 0.4s;
+  }
+
+  @screen sm {
+    .ui-icon-cta-left:hover .ui-icon-cta-holder {
+      transform: translateX(-120%);
+    }
+    .ui-icon-cta-right .ui-icon-cta-holder {
+      transform: translateX(-120%);
+    }
+    .ui-icon-cta-right:hover .ui-icon-cta-holder {
+      transform: translateX(0%);
+    }
+  }
+
+  .ui-icon-cta-holder {
+    @apply w-full h-full;
+    transition: all 0.4s;
+  }
 }

package/core/Slider/component.js

@@ -1 +1 @@
-import"./component.css";import throttle from"lodash.throttle";import{queryId,queryIdAll}from"../dom-query";const mdBreakpoint=()=>window.matchMedia("(min-width: 48rem)").matches;const DRAG_BUFFER=20;const init=slidesContainer=>{const transformContainer=queryId("slider-strip",slidesContainer);const slides=Array.from(queryIdAll("slider-slide",slidesContainer));const slideLeftChevron=queryId("slider-previous",slidesContainer);const slideRightChevron=queryId("slider-next",slidesContainer);const slideMarkers=Array.from(queryIdAll("slider-marker",slidesContainer));const sliderControls=queryId("slider-controls",slidesContainer);sliderControls.classList.replace("hidden","flex");const slidesLength=slides.length;const slidesWidth=slidesContainer.getBoundingClientRect().width;const{width:slideWidth,left:slideLeftDistance}=slides[0].getBoundingClientRect();const{left:slideLeftDistanceSecond}=slides[1].getBoundingClientRect();const slideGap=slideLeftDistanceSecond-slideLeftDistance-slideWidth;const adjustment=(slidesWidth-slideWidth)/2;let currentIndex=0;let touchStartX=0;const calculateTransform=index=>index*-slideWidth+adjustment+index*-slideGap;const updateSlide=index=>transformContainer.style.transform=`translateX(${calculateTransform(index)}px)`;const updateMarkers=index=>{slideMarkers.forEach(marker=>marker.classList.remove("text-active-orange"));slideMarkers[index].classList.remove("text-cool-black");slideMarkers[index].classList.add("text-active-orange")};const slideLeft=()=>{currentIndex=currentIndex-1<=0?0:currentIndex-1;updateSlide(currentIndex);updateMarkers(currentIndex)};const slideRight=()=>{currentIndex=currentIndex+1>=slidesLength?currentIndex:currentIndex+1;updateSlide(currentIndex);updateMarkers(currentIndex)};updateSlide(0);updateMarkers(0);slideLeftChevron.addEventListener("click",slideLeft);transformContainer.addEventListener("touchstart",e=>{var _e_touches_;touchStartX=(_e_touches_=e.touches[0])===null||_e_touches_===void 0?void 0:_e_touches_.clientX});transformContainer.addEventListener("touchend",e=>{var _e_changedTouches_;const distance=((_e_changedTouches_=e.changedTouches[0])===null||_e_changedTouches_===void 0?void 0:_e_changedTouches_.clientX)-touchStartX;if(Math.abs(distance)<DRAG_BUFFER)return;const direction=distance>0?slideLeft:slideRight;direction()});slideRightChevron.addEventListener("click",slideRight);return()=>{transformContainer.style.transform=null;sliderControls.classList.replace("flex","hidden")}};const Slider=({container,mqEnableThreshold})=>{if(!container)return;const breakpointCheck=mqEnableThreshold||(()=>!mdBreakpoint());let unmount=()=>{};if(breakpointCheck())unmount=init(container);window.addEventListener("resize",throttle(()=>{if(breakpointCheck()){unmount=init(container)}else{unmount()}},100))};export default Slider;
+import throttle from"lodash.throttle";import{queryId,queryIdAll}from"../dom-query";const mdBreakpoint=()=>window.matchMedia("(min-width: 48rem)").matches;const DRAG_BUFFER=20;const init=slidesContainer=>{const transformContainer=queryId("slider-strip",slidesContainer);const slides=Array.from(queryIdAll("slider-slide",slidesContainer));const slideLeftChevron=queryId("slider-previous",slidesContainer);const slideRightChevron=queryId("slider-next",slidesContainer);const slideMarkers=Array.from(queryIdAll("slider-marker",slidesContainer));const sliderControls=queryId("slider-controls",slidesContainer);sliderControls.classList.replace("hidden","flex");const slidesLength=slides.length;const slidesWidth=slidesContainer.getBoundingClientRect().width;const{width:slideWidth,left:slideLeftDistance}=slides[0].getBoundingClientRect();const{left:slideLeftDistanceSecond}=slides[1].getBoundingClientRect();const slideGap=slideLeftDistanceSecond-slideLeftDistance-slideWidth;const adjustment=(slidesWidth-slideWidth)/2;let currentIndex=0;let touchStartX=0;const calculateTransform=index=>index*-slideWidth+adjustment+index*-slideGap;const updateSlide=index=>transformContainer.style.transform=`translateX(${calculateTransform(index)}px)`;const updateMarkers=index=>{slideMarkers.forEach(marker=>marker.classList.remove("text-active-orange"));slideMarkers[index].classList.remove("text-cool-black");slideMarkers[index].classList.add("text-active-orange")};const slideLeft=()=>{currentIndex=currentIndex-1<=0?0:currentIndex-1;updateSlide(currentIndex);updateMarkers(currentIndex)};const slideRight=()=>{currentIndex=currentIndex+1>=slidesLength?currentIndex:currentIndex+1;updateSlide(currentIndex);updateMarkers(currentIndex)};updateSlide(0);updateMarkers(0);slideLeftChevron.addEventListener("click",slideLeft);transformContainer.addEventListener("touchstart",e=>{var _e_touches_;touchStartX=(_e_touches_=e.touches[0])===null||_e_touches_===void 0?void 0:_e_touches_.clientX});transformContainer.addEventListener("touchend",e=>{var _e_changedTouches_;const distance=((_e_changedTouches_=e.changedTouches[0])===null||_e_changedTouches_===void 0?void 0:_e_changedTouches_.clientX)-touchStartX;if(Math.abs(distance)<DRAG_BUFFER)return;const direction=distance>0?slideLeft:slideRight;direction()});slideRightChevron.addEventListener("click",slideRight);return()=>{transformContainer.style.transform=null;sliderControls.classList.replace("flex","hidden")}};const Slider=({container,mqEnableThreshold})=>{if(!container)return;const breakpointCheck=mqEnableThreshold||(()=>!mdBreakpoint());let unmount=()=>{};if(breakpointCheck())unmount=init(container);window.addEventListener("resize",throttle(()=>{if(breakpointCheck()){unmount=init(container)}else{unmount()}},100))};export default Slider;

package/core/Slider.js

@@ -1 +1 @@
-import React,{useEffect,useRef}from"react";import Icon from"../Icon/component.tsx";import SliderScripts from"./component.js";import"./component.css";const Slider=({slides=[],classes="",slideClasses="",slideMinWidth="16.875rem",slideMaxWidth="1fr",mqEnableThreshold=()=>true,...props})=>{const containerRef=useRef(null);useEffect(()=>{SliderScripts({container:containerRef.current,mqEnableThreshold})},[]);if(slides.length===0)return;return React.createElement("div",{className:"w-full overflow-x-hidden","data-id":"slider",style:{"--dynamic-grid-columns-count":slides.length,"--dynamic-grid-column-min-width":slideMinWidth,"--dynamic-grid-column-max-width":slideMaxWidth},ref:containerRef},React.createElement("ol",{className:`grid ui-grid-gap grid-cols-dynamic transform transition-transform ${classes}`,"data-id":"slider-strip",...props},slides.map((slide,i)=>React.createElement("li",{key:i,className:slideClasses,"data-id":"slider-slide"},slide))),React.createElement("div",{className:"justify-center items-center my-24 hidden","data-id":"slider-controls"},React.createElement("button",{type:"button",className:"p-0 w-24 h-24 flex items-center focus:outline-gui-focus","data-id":"slider-previous"},React.createElement(Icon,{name:"icon-gui-disclosure-arrow",size:"1.5rem",color:"text-cool-black",additionalCSS:"transform rotate-180","data-id":"meganav-control-mobile-dropdown-menu"})),React.createElement("ul",{className:"flex justify-center items-center mx-32 relative h-24"},slides.map((_,i)=>React.createElement("li",{key:i},React.createElement("span",{className:"ui-slider-marker text-cool-black","data-id":"slider-marker"},"⬤")," "))),React.createElement("button",{type:"button",className:"p-0 w-24 h-24 flex items-center focus:outline-gui-focus","data-id":"slider-next"},React.createElement(Icon,{name:"icon-gui-disclosure-arrow",size:"1.5rem",color:"text-cool-black","data-id":"meganav-control-mobile-dropdown-menu"}))))};export default Slider;
+import React,{useState,useEffect,useRef}from"react";import Icon from"./Icon";const SlideIndicator=({numSlides,activeIndex,interval,intervalIndicator,isInline})=>{return React.createElement("ul",{className:`flex gap-4 left-1/2 ${isInline?"bottom-0":"absolute -bottom-40 transform -translate-x-1/2"}`},Array.from({length:numSlides},(_,i)=>intervalIndicator?React.createElement("li",{key:i,className:"relative w-40 h-4 mx-1 rounded-full bg-neutral-500"},i===activeIndex&&React.createElement("span",{className:"absolute inset-0 rounded-full bg-active-orange",style:{animation:`fillAnimation ${interval}ms linear`}})):React.createElement("li",{key:i},React.createElement("span",{className:`ui-slider-marker ${i===activeIndex?"text-active-orange":"text-cool-black"}`,"data-id":"slider-marker"},"⬤"))))};const Slider=({children,options})=>{const[activeIndex,setActiveIndex]=useState(0);const[touchStartX,setTouchStartX]=useState(0);const[touchEndX,setTouchEndX]=useState(0);const timerRef=useRef(null);const isInline=(options===null||options===void 0?void 0:options.controlPosition)==="inline";const next=()=>{setActiveIndex(prevIndex=>(prevIndex+1)%children.length);resetInterval()};const prev=()=>{setActiveIndex(prevIndex=>prevIndex>0?prevIndex-1:children.length-1);resetInterval()};const resetInterval=()=>{if(timerRef.current)clearInterval(timerRef.current);var _options_interval;timerRef.current=setInterval(next,(_options_interval=options===null||options===void 0?void 0:options.interval)!==null&&_options_interval!==void 0?_options_interval:1e4)};const handleTouchStart=e=>{setTouchStartX(e.touches[0].clientX)};const handleTouchMove=e=>{setTouchEndX(e.touches[0].clientX)};const handleTouchEnd=()=>{if(touchStartX-touchEndX>50){next()}if(touchStartX-touchEndX<-50){prev()}};useEffect(()=>{resetInterval();return()=>{if(timerRef.current)clearInterval(timerRef.current)}},[children.length,options===null||options===void 0?void 0:options.interval]);var _options_interval;return React.createElement("div",{className:"relative",onTouchStart:handleTouchStart,onTouchMove:handleTouchMove,onTouchEnd:handleTouchEnd},React.createElement("div",{className:"overflow-y-visible overflow-x-clip w-full py-40"},React.createElement("div",{className:"flex items-center transition-transform ease-in-out duration-500",style:{transform:`translateX(-${activeIndex*100}%)`}},children.map((child,index)=>React.createElement("div",{key:index,className:"w-full flex-shrink-0 flex justify-center sm:px-60 transition-opacity ease-in delay-500 duration-500",style:{opacity:activeIndex===index?1:.1}},child)))),React.createElement("div",{className:`flex items-center pointer-events-none ${isInline?"ui-standard-container justify-center gap-24":"sm:flex sm:absolute inset-0 justify-between"}`},React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`,onClick:prev},React.createElement("div",{className:"ui-icon-cta-holder flex gap-4"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-left",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-left",size:"1.5rem"})))),React.createElement(SlideIndicator,{numSlides:children.length,activeIndex:activeIndex,interval:(_options_interval=options===null||options===void 0?void 0:options.interval)!==null&&_options_interval!==void 0?_options_interval:1e4,intervalIndicator:options===null||options===void 0?void 0:options.intervalIndicator,isInline:isInline}),React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`,onClick:next},React.createElement("div",{className:"ui-icon-cta-holder flex gap-4"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-right",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-right",size:"1.5rem"}))))))};export default Slider;

package/core/Table/Table.js

@@ -1 +1 @@
-import React,{cloneElement}from"react";export const Table=({id,children})=>React.createElement("table",{id:id,className:"ui-standard-container mb-4 sm:table-fixed"},children);export const TableBody=({children})=>React.createElement("tbody",null,children);export const TableHeader=({children})=>React.createElement("thead",{className:"sticky bg-white z-10 top-0",key:"sticky-block"},cloneElement(children,{isHeader:true}));export const TableRowHeader=({children})=>React.createElement("tr",{className:"-ml-24 mt-8 sm:ml-0 sm:mt-0 ui-text-overline1 !text-cool-black  bg-light-grey sm:sticky z-10",style:{top:"4rem"}},cloneElement(children,{isRowHeader:true}));
+import React,{cloneElement}from"react";export const Table=({id,children,...rest})=>{var _rest_className;return React.createElement("table",{id:id,...rest,className:`ui-standard-container mb-4 sm:table-fixed ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},children)};export const TableBody=({children,...rest})=>React.createElement("tbody",rest,children);export const TableHeader=({children,...rest})=>{var _rest_className;return React.createElement("thead",{...rest,className:`sticky bg-white z-10 top-0 ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},cloneElement(children,{isHeader:true}))};export const TableRowHeader=({children,...rest})=>{var _rest_className;return React.createElement("tr",{className:`-ml-24 mt-8 sm:ml-0 sm:mt-0 bg-light-grey sm:sticky z-10 ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`,style:{top:"4rem"}},cloneElement(children,{isRowHeader:true}))};

package/core/Table/TableCell.js

@@ -1,7 +1,7 @@
-import React from"react";import Icon from"../Icon/component.tsx";const Supported=()=>React.createElement(Icon,{name:"icon-gui-check-circled-fill",size:"1.5rem",color:"text-gui-success",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"supported-icon"});const Unsupported=()=>React.createElement(Icon,{name:"icon-gui-cross-circled-fill",size:"1.5rem",color:"text-gui-error",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"unsupported-icon"});const LabelCell=({children,...rest})=>{var _rest_className;const classes=`
-    ui-text-p1 !font-bold pt-24 pb-8 border-light-grey sm:p-24 sm:relative sm:top-2 flex sm:table-cell ${(_rest_className=rest.className)!==null&&_rest_className!==void 0?_rest_className:""}
+import React from"react";import Icon from"../Icon";const Supported=()=>React.createElement(Icon,{name:"icon-gui-check-circled-fill",size:"1.5rem",color:"text-gui-success",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"supported-icon"});const Unsupported=()=>React.createElement(Icon,{name:"icon-gui-cross-circled-fill",size:"1.5rem",color:"text-gui-error",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"unsupported-icon"});const Partial=()=>React.createElement(Icon,{name:"icon-gui-partial",size:"1.5rem",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"partial-icon"});const LabelCell=({children,...rest})=>{var _rest_className;const classes=`
+    ui-text-p1 !font-bold pt-24 pb-8 border-light-grey sm:p-24 sm:relative sm:top-2 flex sm:table-cell ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}
   `;return React.createElement("td",{...rest,className:classes},children)};const TableCell=({children,isRowHeader,...rest})=>{var _rest_className;return React.createElement("td",{...rest,className:`
         border-light-grey sm:p-24 leading-none flex sm:table-cell
         ${isRowHeader?"rounded-l-none rounded-r sm:rounded-lg py-20 px-24":"py-6"}
-        ${(_rest_className=rest.className)!==null&&_rest_className!==void 0?_rest_className:""}
-      `},children)};const HeaderCell=({children,...rest})=>React.createElement("td",{...rest,className:"ui-text-h3 px-24 py-24 hidden sm:table-cell"},children);const CtaCell=({children,...rest})=>React.createElement("td",{...rest,className:"pt-24 hidden sm:table-cell"},children);export{TableCell,LabelCell,HeaderCell,CtaCell,Supported,Unsupported};
+        ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}
+      `},children)};const HeaderCell=({children,...rest})=>{var _rest_className;return React.createElement("td",{...rest,className:`ui-text-h3 px-24 py-24 hidden sm:table-cell ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},children)};const CtaCell=({children,...rest})=>{var _rest_className;return React.createElement("td",{...rest,className:`pt-24 hidden sm:table-cell ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},children)};export{TableCell,LabelCell,HeaderCell,CtaCell,Supported,Unsupported,Partial};

package/core/Table/data.js

@@ -1 +1 @@
-import React,{Fragment}from"react";import Tooltip from"../../Tooltip/component";import{Supported,Unsupported}from"../TableCell";import Table from"..";const testRow=index=>({label:`Label ${index+1}`,cells:[{label:"text",content:"Cell content",column:"Free"},{label:"yes",content:React.createElement("div",{className:"flex items-center sm:flex-col sm:items-start"},React.createElement("span",{className:"sm:order-1 px-6 sm:py-6 sm:px-0"},"Supported"),React.createElement("span",{className:"sm:order-0"},React.createElement(Supported,null))),column:"PAYG"},{label:"no",content:React.createElement("div",{className:"flex items-center  sm:flex-col sm:items-start"},React.createElement("span",{className:"sm:order-1 px-6 sm:py-6 sm:px-0"},"Unsupported"),React.createElement("span",{className:"sm:order-0"},React.createElement(Unsupported,null))),column:"Custom"}]});const sections=["Features","Support","Technical Support"].map(label=>({label,rows:[...Array(5)].map((_,i)=>testRow(i))}));export const PricingPageTable=()=>{return React.createElement("div",{className:"ui-standard-container"},React.createElement("h2",{className:"ui-text-h2 text-center m-32"},"Pricing Page Table"),React.createElement("p",{className:"text-center m-32"},"Example content"),React.createElement(Table.Root,null,React.createElement(Table.Header,null,React.createElement(Table.Row,null,React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"Free")),React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"PAYG")),React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"Custom")))),React.createElement(Table.Body,null,sections.map(section=>React.createElement(Fragment,{key:section.label},React.createElement(Table.RowHeader,null,React.createElement(Table.Cell,{colSpan:4},section.label)),section.rows.map(row=>React.createElement(Table.Row,{key:row.label},React.createElement(Table.LabelCell,{key:row.label,className:"border-t border-light-grey"},React.createElement("a",{className:"ui-link",href:"#"},row.label),React.createElement(Tooltip,null,"Example tooltip")),row.cells.map(cell=>React.createElement(Table.Cell,{key:cell.label,className:"last:mb-16 sm:mb-0"},React.createElement("div",{className:"flex-1 sm:hidden !text-dark-grey ui-text-overline2"},cell.column),cell.content)))))),React.createElement(Table.Row,null,React.createElement(Table.Cell,null),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn-secondary"},"Get started")),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn-secondary"},"Get started")),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn"},"Contact sales"))))))};
+import React,{Fragment}from"react";import Tooltip from"../Tooltip";import{Supported,Unsupported}from"./TableCell";import Table from"../Table";const testRow=index=>({label:`Label ${index+1}`,cells:[{label:"text",content:"Cell content",column:"Free"},{label:"yes",content:React.createElement("div",{className:"flex items-center sm:flex-col sm:items-start"},React.createElement("span",{className:"sm:order-1 px-6 sm:py-6 sm:px-0"},"Supported"),React.createElement("span",{className:"sm:order-0"},React.createElement(Supported,null))),column:"PAYG"},{label:"no",content:React.createElement("div",{className:"flex items-center  sm:flex-col sm:items-start"},React.createElement("span",{className:"sm:order-1 px-6 sm:py-6 sm:px-0"},"Unsupported"),React.createElement("span",{className:"sm:order-0"},React.createElement(Unsupported,null))),column:"Custom"}]});const sections=["Features","Support","Technical Support"].map(label=>({label,rows:[...Array(5)].map((_,i)=>testRow(i))}));export const PricingPageTable=()=>{return React.createElement("div",{className:"ui-standard-container"},React.createElement("h2",{className:"ui-text-h2 text-center m-32"},"Pricing Page Table"),React.createElement("p",{className:"text-center m-32"},"Example content"),React.createElement(Table.Root,null,React.createElement(Table.Header,null,React.createElement(Table.Row,null,React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"Free")),React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"PAYG")),React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"Custom")))),React.createElement(Table.Body,null,sections.map(section=>React.createElement(Fragment,{key:section.label},React.createElement(Table.RowHeader,null,React.createElement(Table.Cell,{colSpan:4},section.label)),section.rows.map(row=>React.createElement(Table.Row,{key:row.label},React.createElement(Table.LabelCell,{key:row.label,className:"border-t border-light-grey"},React.createElement("a",{className:"ui-link",href:"#"},row.label),React.createElement(Tooltip,null,"Example tooltip")),row.cells.map(cell=>React.createElement(Table.Cell,{key:cell.label,className:"last:mb-16 sm:mb-0"},React.createElement("div",{className:"flex-1 sm:hidden !text-dark-grey ui-text-overline2"},cell.column),cell.content)))))),React.createElement(Table.Row,null,React.createElement(Table.Cell,null),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn-secondary"},"Get started")),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn-secondary"},"Get started")),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn"},"Contact sales"))))))};

package/core/Table.js

@@ -1 +1 @@
-import{Table,TableRowHeader,TableHeader,TableBody}from"./Table";import{TableRow}from"./TableRow";import{TableCell,LabelCell,HeaderCell,CtaCell,Supported,Unsupported}from"./TableCell";export default{Root:Table,Row:TableRow,Cell:TableCell,LabelCell,HeaderCell,CtaCell,RowHeader:TableRowHeader,Body:TableBody,Header:TableHeader,Supported,Unsupported};
+import{Table,TableRowHeader,TableHeader,TableBody}from"./Table/Table";import{TableRow}from"./Table/TableRow";import{TableCell,LabelCell,HeaderCell,CtaCell,Supported,Unsupported,Partial}from"./Table/TableCell";export default{Root:Table,Row:TableRow,Cell:TableCell,LabelCell,HeaderCell,CtaCell,RowHeader:TableRowHeader,Body:TableBody,Header:TableHeader,Supported,Unsupported,Partial};

package/core/Tooltip.js

@@ -1 +1 @@
-import React,{useEffect,useRef,useState}from"react";import Icon from"../Icon/component.tsx";const Tooltip=({children})=>{const[open,setOpen]=useState(false);const[position,setPosition]=useState({x:0,y:0});const offset=8;const reference=useRef(null);const floating=useRef(null);useEffect(()=>{if(open){var _floating_current,_reference_current;const floatingRect=(_floating_current=floating.current)===null||_floating_current===void 0?void 0:_floating_current.getBoundingClientRect();const referenceRect=(_reference_current=reference.current)===null||_reference_current===void 0?void 0:_reference_current.getBoundingClientRect();if(floatingRect&&referenceRect){setPosition({x:Math.min(floatingRect.width/2,floatingRect.left)-referenceRect.width/2,y:Math.min(floatingRect.height,floatingRect.top)+offset})}}else{setPosition({x:0,y:0})}},[open]);return React.createElement("div",{className:"relative inline-block align-top h-16"},React.createElement("button",{onMouseEnter:()=>setOpen(true),onMouseLeave:()=>setOpen(false),className:"ml-8 p-0 relative top-1 focus:outline-none",type:"button",ref:reference,"aria-describedby":"tooltip"},React.createElement(Icon,{name:"icon-gui-info",size:"1rem"})),open?React.createElement("div",{className:"bg-light-grey p-12 rounded pointer-events-none absolute z-20",role:"tooltip",ref:floating,style:{top:-position.y,left:-position.x,boxShadow:"4px 4px 15px rgba(0, 0, 0, 0.2)"}},React.createElement("div",{className:"w-256"},children)):null)};export default Tooltip;
+import React,{useEffect,useRef,useState}from"react";import Icon from"./Icon";const Tooltip=({children,triggerProps,tooltipProps,...rest})=>{const[open,setOpen]=useState(false);const[position,setPosition]=useState({x:0,y:0});const offset=8;const reference=useRef(null);const floating=useRef(null);useEffect(()=>{if(open){var _floating_current,_reference_current;const floatingRect=(_floating_current=floating.current)===null||_floating_current===void 0?void 0:_floating_current.getBoundingClientRect();const referenceRect=(_reference_current=reference.current)===null||_reference_current===void 0?void 0:_reference_current.getBoundingClientRect();if(floatingRect&&referenceRect){setPosition({x:Math.min(floatingRect.width/2,floatingRect.left)-referenceRect.width/2,y:Math.min(floatingRect.height,floatingRect.top)+offset})}}else{setPosition({x:0,y:0})}},[open]);var _rest_className,_triggerProps_className,_tooltipProps_className;return React.createElement("div",{...rest,className:`relative inline-block align-top h-16 ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},React.createElement("button",{onMouseEnter:()=>setOpen(true),onMouseLeave:()=>setOpen(false),type:"button",ref:reference,"aria-describedby":"tooltip",...triggerProps,className:`ml-8 p-0 relative top-1 focus:outline-none ${(_triggerProps_className=triggerProps===null||triggerProps===void 0?void 0:triggerProps.className)!==null&&_triggerProps_className!==void 0?_triggerProps_className:""}`},React.createElement(Icon,{name:"icon-gui-info",size:"1rem"})),open?React.createElement("div",{role:"tooltip",ref:floating,style:{top:-position.y,left:-position.x,boxShadow:"4px 4px 15px rgba(0, 0, 0, 0.2)"},...tooltipProps,className:`bg-light-grey p-12 rounded pointer-events-none absolute z-20 ${(_tooltipProps_className=tooltipProps===null||tooltipProps===void 0?void 0:tooltipProps.className)!==null&&_tooltipProps_className!==void 0?_tooltipProps_className:""}`},React.createElement("div",{className:"w-256"},children)):null)};export default Tooltip;

package/core/icons/icon-gui-partial.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 12C1.5 17.799 6.20101 22.5 12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12ZM1.2779e-06 12C9.30272e-07 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 -1.95703e-07 12 -4.37114e-07C5.37259 -6.78525e-07 1.62554e-06 5.37258 1.2779e-06 12Z" fill="#03020D"/>
+<path d="M11.5833 23.576C5.37903 23.3566 0.416667 18.2578 0.416667 12C0.416668 5.74218 5.37903 0.643381 11.5833 0.424021L11.5833 23.576Z" fill="#03020D" stroke="#03020D" stroke-width="0.833333"/>
+</svg>

package/core/scripts.js

@@ -1 +1 @@
-import"array-flat-polyfill";import"./styles.css";export{default as reactRenderer,renderComponent}from"./react-renderer";export{default as loadSprites}from"./load-sprites";export{default as toggleChatWidget}from"./hubspot-chat-toggle";export*from"./remote-data-store";export*from"./remote-blogs-posts";export*from"./remote-session-data";export*from"./dom-query";
+import"array-flat-polyfill";export{default as reactRenderer,renderComponent}from"./react-renderer";export{default as loadSprites}from"./load-sprites";export{default as toggleChatWidget}from"./hubspot-chat-toggle";export*from"./remote-data-store";export*from"./remote-blogs-posts";export*from"./remote-session-data";export*from"./dom-query";