@ably/ui 14.3.4 → 14.4.0-dev.1b6b1db

package/core/Flash.js

@@ -1 +1 @@
-import React,{useEffect,useState,useRef}from"react";import DOMPurify from"dompurify";import{getRemoteDataStore}from"./remote-data-store.js";import ConnectStateWrapper from"./ConnectStateWrapper";import Icon from"./Icon";const REDUCER_KEY="flashes";const FLASH_DATA_ID="ui-flashes";const initialState={items:[]};const reducerFlashes={[REDUCER_KEY]:(state=initialState,action)=>{switch(action.type){case"flash/push":{const flashes=Array.isArray(action.payload)?action.payload:[action.payload];return{items:[...state.items,...flashes]}}default:return state}}};const selectFlashes=store=>store.getState()[REDUCER_KEY];const FLASH_BG_COLOR={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"};const FLASH_TEXT_COLOR={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"};const AUTO_HIDE=["success","info","notice"];const AUTO_HIDE_TIME=8e3;const useAutoHide=(type,closeFlash)=>{const timeoutId=useRef(null);useEffect(()=>{if(AUTO_HIDE.includes(type)){timeoutId.current=setTimeout(()=>{closeFlash()},AUTO_HIDE_TIME)}return()=>{if(timeoutId.current){clearTimeout(timeoutId.current)}}},[])};const Flash=({id,type,content,removeFlash})=>{const ref=useRef(null);const[closed,setClosed]=useState(false);const[flashHeight,setFlashHeight]=useState(0);const[triggerEntryAnimation,setTriggerEntryAnimation]=useState(false);const closeFlash=()=>{if(ref.current){setFlashHeight(ref.current.getBoundingClientRect().height)}setClosed(true);setTimeout(()=>{id&&removeFlash(id)},100)};useEffect(()=>setTriggerEntryAnimation(true),[]);useAutoHide(type,closeFlash);const animateEntry=triggerEntryAnimation&&!closed;let style;if(flashHeight&&!closed){style={height:`${flashHeight}px`}}else if(closed){style={height:0,marginTop:0,zIndex:-1}}else{style={}}const safeContent=DOMPurify.sanitize(content,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method","rel"]});const withIcons={notice:"icon-gui-ably-badge",success:"icon-gui-tick",error:"icon-gui-warning",alert:"icon-gui-warning"};const iconColor={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white"};return /*#__PURE__*/React.createElement("div",{className:`ui-flash-message ui-grid-px ${animateEntry?"ui-flash-message-enter":""}`,style:style,ref:ref,"data-id":"ui-flash"},/*#__PURE__*/React.createElement("div",{className:`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`},withIcons[type]&&/*#__PURE__*/React.createElement(Icon,{name:withIcons[type],color:iconColor[type],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),/*#__PURE__*/React.createElement("p",{className:`ui-text-p1 mr-16 ${FLASH_TEXT_COLOR[type]}`,dangerouslySetInnerHTML:{__html:safeContent}}),/*#__PURE__*/React.createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:closeFlash},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-close",color:iconColor[type],size:"1.5rem",additionalCSS:"transition-colors"}))))};const Flashes=({flashes})=>{const[flashesWithIds,setFlashesWithIds]=useState([]);const removeFlash=flashId=>setFlashesWithIds(items=>items.filter(item=>item.id!==flashId));useEffect(()=>{setFlashesWithIds(state=>{return[...state,...(flashes?.items??[]).map(flash=>({...flash,id:Math.random().toString(36).slice(2),removed:false}))]})},[flashes]);return /*#__PURE__*/React.createElement("div",{className:"ui-flash","data-id":FLASH_DATA_ID},flashesWithIds.filter(item=>!item.removed).map(flash=>/*#__PURE__*/React.createElement(Flash,{key:flash.id,...flash,removeFlash:removeFlash})))};const BackendFlashes=({flashes})=>{useEffect(()=>{const transformedFlashes=flashes.map(flash=>{const[type,content]=flash;return{type,content}})||[];if(transformedFlashes.length>0){const store=getRemoteDataStore();store.dispatch({type:"flash/push",payload:transformedFlashes})}},[]);const WrappedFlashes=ConnectStateWrapper(Flashes,{flashes:selectFlashes});return /*#__PURE__*/React.createElement(WrappedFlashes,null)};export{reducerFlashes,FLASH_DATA_ID,Flashes};export default BackendFlashes;
+import React,{useEffect,useState,useRef}from"react";import DOMPurify from"dompurify";import{getRemoteDataStore}from"./remote-data-store.js";import ConnectStateWrapper from"./ConnectStateWrapper";import Icon from"./Icon";const REDUCER_KEY="flashes";const FLASH_DATA_ID="ui-flashes";const initialState={items:[]};const reducerFlashes={[REDUCER_KEY]:(state=initialState,action)=>{switch(action.type){case"flash/push":{const flashes=Array.isArray(action.payload)?action.payload:[action.payload];return{items:[...state.items,...flashes]}}default:return state}}};const selectFlashes=store=>store.getState()[REDUCER_KEY];const FLASH_BG_COLOR={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"};const FLASH_TEXT_COLOR={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"};const AUTO_HIDE=["success","info","notice"];const AUTO_HIDE_TIME=8e3;const useAutoHide=(type,closeFlash)=>{const timeoutId=useRef(null);useEffect(()=>{if(AUTO_HIDE.includes(type)){timeoutId.current=setTimeout(()=>{closeFlash()},AUTO_HIDE_TIME)}return()=>{if(timeoutId.current){clearTimeout(timeoutId.current)}}},[])};const Flash=({id,type,content,removeFlash})=>{const ref=useRef(null);const[closed,setClosed]=useState(false);const[flashHeight,setFlashHeight]=useState(0);const[triggerEntryAnimation,setTriggerEntryAnimation]=useState(false);const closeFlash=()=>{if(ref.current){setFlashHeight(ref.current.getBoundingClientRect().height)}setClosed(true);setTimeout(()=>{id&&removeFlash(id)},100)};useEffect(()=>setTriggerEntryAnimation(true),[]);useAutoHide(type,closeFlash);const animateEntry=triggerEntryAnimation&&!closed;let style;if(flashHeight&&!closed){style={height:`${flashHeight}px`}}else if(closed){style={height:0,marginTop:0,zIndex:-1}}else{style={}}const safeContent=DOMPurify.sanitize(content,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method","rel"]});const withIcons={notice:"icon-gui-ably-badge",success:"icon-gui-tick",error:"icon-gui-warning",alert:"icon-gui-warning",info:""};const iconColor={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white",info:""};return /*#__PURE__*/React.createElement("div",{className:`ui-flash-message ui-grid-px ${animateEntry?"ui-flash-message-enter":""}`,style:style,ref:ref,"data-id":"ui-flash"},/*#__PURE__*/React.createElement("div",{className:`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`},withIcons[type]&&/*#__PURE__*/React.createElement(Icon,{name:withIcons[type],color:iconColor[type],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),/*#__PURE__*/React.createElement("p",{className:`ui-text-p1 mr-16 ${FLASH_TEXT_COLOR[type]}`,dangerouslySetInnerHTML:{__html:safeContent}}),/*#__PURE__*/React.createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:closeFlash},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-close",color:iconColor[type],size:"1.5rem",additionalCSS:"transition-colors"}))))};const Flashes=({flashes})=>{const[flashesWithIds,setFlashesWithIds]=useState([]);const removeFlash=flashId=>setFlashesWithIds(items=>items.filter(item=>item.id!==flashId));useEffect(()=>{setFlashesWithIds(state=>{return[...state,...(flashes?.items??[]).map(flash=>({...flash,id:Math.random().toString(36).slice(2),removed:false}))]})},[flashes]);return /*#__PURE__*/React.createElement("div",{className:"ui-flash","data-id":FLASH_DATA_ID},flashesWithIds.filter(item=>!item.removed).map(flash=>/*#__PURE__*/React.createElement(Flash,{key:flash.id,...flash,removeFlash:removeFlash})))};const BackendFlashes=({flashes})=>{useEffect(()=>{const transformedFlashes=flashes.map(flash=>{const[type,content]=flash;return{type,content}})||[];if(transformedFlashes.length>0){const store=getRemoteDataStore();store.dispatch({type:"flash/push",payload:transformedFlashes})}},[]);const WrappedFlashes=ConnectStateWrapper(Flashes,{flashes:selectFlashes});return /*#__PURE__*/React.createElement(WrappedFlashes,null)};export{reducerFlashes,FLASH_DATA_ID,Flashes};export default BackendFlashes;

package/core/Meganav/component.js

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

package/core/MeganavContentCompany.js

@@ -1 +1 @@
-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 /*#__PURE__*/React.createElement("div",{className:"flex max-w-screen-xl mx-auto"},/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}),/*#__PURE__*/React.createElement("section",{className:"grid grid-cols-12 ui-grid-gap-x w-full"},/*#__PURE__*/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"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-company-panel-list-why-companies"},"Why companies choose Ably"),/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-company-panel-list-why-companies"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/customers"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-customers-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Customers"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Ably supports customers across multiple industries.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/case-studies"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-case-studies-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Case studies"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Discover how customers are benefiting from Ably.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/compare"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-compare-tech-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Compare our tech"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Choose the right realtime service.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/aws"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement("img",{src:paths.awsLogo,alt:"AWS logo"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Partners"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Ably collaborates and integrates with AWS.")))))),/*#__PURE__*/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"},/*#__PURE__*/React.createElement("ul",{className:"md:mt-40","aria-labelledby":"meganav-company-panel-list-why-companies"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/resources"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-resources-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Resources"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Learn more about realtime with our handy resources.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/about"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-about-ably-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"About Ably"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Find out more about Ably’s mission.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/careers"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-careers-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Careers"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Discover our open roles and core Ably values.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/events"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-events-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Events"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Join Ably at upcoming events.")))))),/*#__PURE__*/React.createElement(BlogPostsList,{absUrl:absUrl})),/*#__PURE__*/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 /*#__PURE__*/React.createElement("div",{className:"flex max-w-screen-xl mx-auto"},/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}),/*#__PURE__*/React.createElement("section",{className:"grid grid-cols-12 ui-grid-gap-x w-full"},/*#__PURE__*/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"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-company-panel-list-why-companies"},"Why companies choose Ably"),/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-company-panel-list-why-companies"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/customers"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-customers-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Customers"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Ably supports customers across multiple industries.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/case-studies"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-case-studies-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Case studies"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Discover how customers are benefiting from Ably.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/compare"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-compare-tech-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Compare our tech"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Choose the right realtime service.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/aws"),className:"ui-meganav-media-with-image group"},paths&&/*#__PURE__*/React.createElement("img",{src:paths.awsLogo,alt:"AWS logo"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Partners"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Ably collaborates and integrates with AWS.")))))),/*#__PURE__*/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"},/*#__PURE__*/React.createElement("ul",{className:"md:mt-40","aria-labelledby":"meganav-company-panel-list-why-companies"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/resources"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-resources-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Resources"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Learn more about realtime with our handy resources.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/about"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-about-ably-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"About Ably"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Find out more about Ably’s mission.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/careers"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-careers-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Careers"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Discover our open roles and core Ably values.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/events"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-events-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Events"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Join Ably at upcoming events.")))))),/*#__PURE__*/React.createElement(BlogPostsList,{absUrl:absUrl})),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}))};export default MeganavContentCompany;

package/core/MeganavContentProducts.js

@@ -1 +1 @@
-import React from"react";import FeaturedLink from"./FeaturedLink";const MeganavContentProducts=({paths,absUrl})=>/*#__PURE__*/React.createElement("div",{className:"flex max-w-screen-xl mx-auto"},/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer bg-extra-light-grey"}),/*#__PURE__*/React.createElement("section",{className:"grid grid-cols-12 ui-grid-gap-x w-full"},/*#__PURE__*/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"},/*#__PURE__*/React.createElement("div",{className:"flex mb-20"},/*#__PURE__*/React.createElement("img",{src:paths.ablyStack,alt:"Ably homepage"}),/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline ml-24"},"The Ably Platform")),/*#__PURE__*/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."),/*#__PURE__*/React.createElement(FeaturedLink,{url:absUrl("/platform"),textSize:"text-p2"},"Explore how it works")),/*#__PURE__*/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"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-products-panel-list-examples"},"Products"),/*#__PURE__*/React.createElement("ul",{className:"mb-16","aria-labelledby":"meganav-products-panel-list-examples"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/pubsub"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Pub/Sub Channels"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Build infinitely scalable realtime applications."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/spaces"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Spaces (Beta)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Create multi-user collaborative environments."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/livesync"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"LiveSync (Alpha)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Seamlessly sync database changes with frontend clients at scale."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/chat"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Chat (Beta)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver highly reliable chat experiences at scale."))))),/*#__PURE__*/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"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-products-panel-list-our-technology"},"Technology"),/*#__PURE__*/React.createElement("ul",{className:"mb-16","aria-labelledby":"meganav-products-panel-list-our-technology"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#performance"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Predictable performance"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"A low-latency and high-throughput global network."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#integrity"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Guaranteed ordering & delivery"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Data is delivered - in order - even after disconnections."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#reliability"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Fault tolerant infrastructure"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Redundancy is built in at global and regional levels."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#availability"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"High scalability & availability"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Built for scale with legitimate 99.999% uptime SLAs."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/network"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Global edge network"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"An edge network of 15 core routing datacenters and 205+ PoPs.")))),/*#__PURE__*/React.createElement(FeaturedLink,{url:absUrl("/four-pillars-of-dependability"),textSize:"text-p3"},"Explore Four Pillars of Dependability"))),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}));export default MeganavContentProducts;
+import React from"react";import FeaturedLink from"./FeaturedLink";const MeganavContentProducts=({paths,absUrl})=>/*#__PURE__*/React.createElement("div",{className:"flex max-w-screen-xl mx-auto"},/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer bg-extra-light-grey"}),/*#__PURE__*/React.createElement("section",{className:"grid grid-cols-12 ui-grid-gap-x w-full"},/*#__PURE__*/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"},/*#__PURE__*/React.createElement("div",{className:"flex mb-20"},paths&&/*#__PURE__*/React.createElement("img",{src:paths?.ablyStack,alt:"Ably homepage"}),/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline ml-24"},"The Ably Platform")),/*#__PURE__*/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."),/*#__PURE__*/React.createElement(FeaturedLink,{url:absUrl("/platform"),textSize:"text-p2"},"Explore how it works")),/*#__PURE__*/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"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-products-panel-list-examples"},"Products"),/*#__PURE__*/React.createElement("ul",{className:"mb-16","aria-labelledby":"meganav-products-panel-list-examples"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/pubsub"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Pub/Sub Channels"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Build infinitely scalable realtime applications."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/spaces"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Spaces (Beta)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Create multi-user collaborative environments."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/livesync"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"LiveSync (Alpha)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Seamlessly sync database changes with frontend clients at scale."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/chat"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Chat (Beta)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver highly reliable chat experiences at scale."))))),/*#__PURE__*/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"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-products-panel-list-our-technology"},"Technology"),/*#__PURE__*/React.createElement("ul",{className:"mb-16","aria-labelledby":"meganav-products-panel-list-our-technology"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#performance"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Predictable performance"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"A low-latency and high-throughput global network."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#integrity"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Guaranteed ordering & delivery"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Data is delivered - in order - even after disconnections."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#reliability"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Fault tolerant infrastructure"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Redundancy is built in at global and regional levels."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#availability"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"High scalability & availability"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Built for scale with legitimate 99.999% uptime SLAs."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/network"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Global edge network"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"An edge network of 15 core routing datacenters and 205+ PoPs.")))),/*#__PURE__*/React.createElement(FeaturedLink,{url:absUrl("/four-pillars-of-dependability"),textSize:"text-p3"},"Explore Four Pillars of Dependability"))),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}));export default MeganavContentProducts;

package/core/hubspot-chat-toggle.js

@@ -1 +1 @@
-import{queryId}from"./dom-query";function enableBtn(el,text){el.disabled=false;el.innerText=text}function disableBtn(el,text){el.disabled=true;el.innerText=text}const WAIT_BETWEEN_RETRIES_MS=100;let MAX_RETRY_COUNT=30;export default function toggleChatWidget(params={}){const{dataId}=params;const container=queryId(dataId);const chatButton=queryId("open-chat-widget",container);const textEnabled=chatButton.dataset.enabledLabel;const textDisabled=chatButton.dataset.disabledLabel;if(!dataId||!container)return;const trigger=queryId("open-chat-widget",container);let clickHandler;const waitForScript=delay=>{const widget=window?.HubSpotConversations?.widget;const iframe=document.querySelector("#hubspot-messages-iframe-container");clickHandler=e=>{e.preventDefault();widget.open()};if(widget&&iframe){trigger.addEventListener("click",clickHandler);enableBtn(trigger,textEnabled)}else if(--MAX_RETRY_COUNT){setTimeout(()=>waitForScript(WAIT_BETWEEN_RETRIES_MS),delay)}};disableBtn(trigger,textDisabled);waitForScript(0);return()=>{disableBtn(trigger,textDisabled);trigger.removeEventListener("click",clickHandler)}}
+import{queryId}from"./dom-query";function enableBtn(el,text){el.disabled=false;el.innerText=text}function disableBtn(el,text){el.disabled=true;el.innerText=text}const WAIT_BETWEEN_RETRIES_MS=100;let MAX_RETRY_COUNT=30;export default function toggleChatWidget(params){const{dataId}=params??{};const container=queryId(dataId);const chatButton=queryId("open-chat-widget",container);const textEnabled=chatButton.dataset.enabledLabel;const textDisabled=chatButton.dataset.disabledLabel;if(!dataId||!container)return;const trigger=queryId("open-chat-widget",container);let clickHandler;const waitForScript=delay=>{const widget=window?.HubSpotConversations?.widget;const iframe=document.querySelector("#hubspot-messages-iframe-container");clickHandler=e=>{e.preventDefault();widget.open()};if(widget&&iframe){trigger.addEventListener("click",clickHandler);enableBtn(trigger,textEnabled)}else if(--MAX_RETRY_COUNT){setTimeout(()=>waitForScript(WAIT_BETWEEN_RETRIES_MS),delay)}};disableBtn(trigger,textDisabled);waitForScript(0);return()=>{disableBtn(trigger,textDisabled);trigger.removeEventListener("click",clickHandler)}}

package/index.d.ts

@@ -0,0 +1,785 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+declare module '@ably/ui/core/Accordion' {
+import { ReactNode } from "react";
+type AccordionData = {
+    name: string;
+    content: ReactNode;
+};
+export type AccordionProps = {
+    data: AccordionData[];
+    arrowIcon?: boolean;
+    topBorder?: boolean;
+    bottomBorder?: boolean;
+    id?: string;
+    autoClose?: boolean;
+    className?: string;
+};
+const Accordion: ({ data, id, topBorder, bottomBorder, arrowIcon, autoClose, className, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export default Accordion;
+//# sourceMappingURL=Accordion.d.ts.map
+}
+
+declare module '@ably/ui/core/Code' {
+type CodeProps = {
+    language: string;
+    snippet: string;
+    textSize?: string;
+    padding?: string;
+    additionalCSS?: string;
+};
+const Code: ({ language, snippet, textSize, padding, additionalCSS, }: CodeProps) => import("react/jsx-runtime").JSX.Element;
+export default Code;
+//# sourceMappingURL=Code.d.ts.map
+}
+
+declare module '@ably/ui/core/ConnectStateWrapper' {
+const ConnectStateWrapper: (Component: any, selectors: any) => (props: any) => import("react/jsx-runtime").JSX.Element;
+export default ConnectStateWrapper;
+//# sourceMappingURL=ConnectStateWrapper.d.ts.map
+}
+
+declare module '@ably/ui/core/ContactFooter' {
+type ContactFooterProps = {
+    urlBase: string;
+};
+const ContactFooter: ({ urlBase }: ContactFooterProps) => import("react/jsx-runtime").JSX.Element;
+export default ContactFooter;
+//# sourceMappingURL=ContactFooter.d.ts.map
+}
+
+declare module '@ably/ui/core/CookieMessage' {
+type CookieMessageProps = {
+    cookieId: string;
+    urlBase: string;
+};
+const CookieMessage: ({ cookieId, urlBase }: CookieMessageProps) => import("react/jsx-runtime").JSX.Element | null;
+export default CookieMessage;
+//# sourceMappingURL=CookieMessage.d.ts.map
+}
+
+declare module '@ably/ui/core/CustomerLogos' {
+type CompanyEntity = {
+    label: string;
+    logo: string;
+};
+type CustomerLogosProps = {
+    companies: CompanyEntity[];
+    additionalCss?: string;
+};
+const CustomerLogos: ({ companies, additionalCss, }: CustomerLogosProps) => import("react/jsx-runtime").JSX.Element;
+export default CustomerLogos;
+//# sourceMappingURL=CustomerLogos.d.ts.map
+}
+
+declare module '@ably/ui/core/DropdownMenu' {
+import { ReactNode } from "react";
+type DropdownMenuProps = {
+    children: ReactNode;
+};
+type TriggerProps = {
+    children: ReactNode;
+    additionalTriggerCSS?: string;
+};
+type ContentProps = {
+    children: ReactNode;
+    anchorPosition?: string;
+    additionalContentCSS?: string;
+};
+type LinkProps = {
+    url: string;
+    title: string;
+    subtitle: string;
+    iconName: string;
+    children: ReactNode;
+};
+const DropdownMenu: {
+    ({ children }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ children, additionalTriggerCSS }: TriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, anchorPosition, additionalContentCSS, }: ContentProps) => import("react/jsx-runtime").JSX.Element | null;
+    Link: ({ url, title, subtitle, iconName, children }: LinkProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default DropdownMenu;
+//# sourceMappingURL=DropdownMenu.d.ts.map
+}
+
+declare module '@ably/ui/core/Expander' {
+import { PropsWithChildren } from "react";
+type ExpanderProps = {
+    heightThreshold?: number;
+    className?: string;
+    fadeClassName?: string;
+    controlsClassName?: string;
+    controlsOpenedLabel?: string;
+    controlsClosedLabel?: string;
+};
+const Expander: ({ heightThreshold, className, fadeClassName, controlsClassName, controlsOpenedLabel, controlsClosedLabel, children, }: PropsWithChildren<ExpanderProps>) => import("react/jsx-runtime").JSX.Element;
+export default Expander;
+//# sourceMappingURL=Expander.d.ts.map
+}
+
+declare module '@ably/ui/core/FeaturedLink' {
+import { ReactNode } from "react";
+type FeaturedLinkProps = {
+    url: string;
+    children: ReactNode;
+    textSize?: string;
+    iconColor?: string;
+    flush?: boolean;
+    reverse?: boolean;
+    additionalCSS?: string;
+    newWindow?: boolean;
+    onClick?: () => void;
+};
+const FeaturedLink: ({ url, textSize, iconColor, flush, reverse, additionalCSS, newWindow, onClick, children, }: FeaturedLinkProps) => import("react/jsx-runtime").JSX.Element;
+export default FeaturedLink;
+//# sourceMappingURL=FeaturedLink.d.ts.map
+}
+
+declare module '@ably/ui/core/Flash' {
+type FlashPropsType = "error" | "success" | "notice" | "info" | "alert";
+type FlashProps = {
+    id: string;
+    removed: boolean;
+    type: FlashPropsType;
+    content: string;
+    removeFlash: (id: string) => void;
+};
+type FlashesProps = {
+    flashes: {
+        items: FlashProps[];
+    };
+};
+type BackendFlashesProps = {
+    flashes: string[][];
+};
+const FLASH_DATA_ID = "ui-flashes";
+const reducerFlashes: {
+    flashes: (state: {
+        items: FlashProps[];
+    } | undefined, action: {
+        type: string;
+        payload: FlashProps | FlashProps[];
+    }) => {
+        items: FlashProps[];
+    };
+};
+const Flashes: ({ flashes }: FlashesProps) => import("react/jsx-runtime").JSX.Element;
+const BackendFlashes: ({ flashes }: BackendFlashesProps) => import("react/jsx-runtime").JSX.Element;
+export { reducerFlashes, FLASH_DATA_ID, Flashes };
+export default BackendFlashes;
+//# sourceMappingURL=Flash.d.ts.map
+}
+
+declare module '@ably/ui/core/Footer' {
+type FooterProps = {
+    paths: {
+        ablyStack: string;
+        highestPerformer: string;
+        highestUserAdoption: string;
+        bestSupport: string;
+        fastestImplementation: string;
+    };
+    urlBase: string;
+    statusUrl: string;
+};
+const Footer: ({ paths, urlBase, statusUrl }: FooterProps) => import("react/jsx-runtime").JSX.Element;
+export default Footer;
+//# sourceMappingURL=Footer.d.ts.map
+}
+
+declare module '@ably/ui/core/Icon' {
+type IconProps = {
+    name: string;
+    size?: string;
+    color?: string;
+    additionalCSS?: string;
+};
+const Icon: ({ name, size, color, additionalCSS, ...additionalAttributes }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default Icon;
+//# sourceMappingURL=Icon.d.ts.map
+}
+
+declare module '@ably/ui/core/Loader' {
+type LoaderProps = {
+    size?: string;
+    ringColor?: string;
+    additionalCSS?: string;
+};
+const Loader: ({ ringColor, size, additionalCSS, }: LoaderProps) => import("react/jsx-runtime").JSX.Element;
+export default Loader;
+//# sourceMappingURL=Loader.d.ts.map
+}
+
+declare module '@ably/ui/core/Logo' {
+import React from "react";
+type LogoProps = {
+    dataId: string;
+    logoUrl: string;
+    href?: string;
+    additionalImgAttrs?: object;
+    additionalLinkAttrs?: object;
+};
+const _default: React.MemoExoticComponent<({ dataId, logoUrl, href, additionalImgAttrs, additionalLinkAttrs, }: LogoProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;
+//# sourceMappingURL=Logo.d.ts.map
+}
+
+declare module '@ably/ui/core/Meganav/component' {
+export default function Meganav({ themeName, addSearchApiKey }: {
+    themeName: any;
+    addSearchApiKey: any;
+}): () => void;
+//# sourceMappingURL=component.d.ts.map
+}
+
+declare module '@ably/ui/core/Meganav' {
+import { ReactNode } from "react";
+export type MeganavTheme = {
+    backgroundColor?: string;
+    textColor?: string;
+    buttonBackgroundColor?: string;
+    buttonTextColor?: string;
+    mobileMenuColor?: string;
+    logoTextColor?: string;
+    barShadow?: string;
+};
+export type AbsUrl = (path: string) => string;
+export type MeganavPaths = {
+    logo: string;
+    iconSprites: string;
+    ablyStack: string;
+    blogThumb1: string;
+    blogThumb2: string;
+    blogThumb3: string;
+    awsLogo?: string;
+};
+export type MeganavPanels = {
+    [index: string]: ({ paths, absUrl, statusUrl, }: {
+        paths?: MeganavPaths;
+        absUrl: (path: string) => string;
+        statusUrl: string;
+    }) => ReactNode;
+};
+export type MeganavSessionState = {
+    signedIn: boolean;
+    logOut: {
+        token: string;
+        href: string;
+        text: string;
+    };
+    accountName: string;
+    preferredEmail: string;
+    account: {
+        links: {
+            dashboard: {
+                href: string;
+            };
+        };
+    };
+    mySettings: {
+        text: string;
+        href: string;
+    };
+    myAccessTokens: {
+        text: string;
+        href: string;
+    };
+};
+type MeganavProps = {
+    paths?: MeganavPaths;
+    themeName: "white" | "black" | "transparentToWhite";
+    notice?: {
+        props: {
+            title: string;
+            bodyText: string;
+            buttonLink: string;
+            buttonLabel: string;
+            closeBtn: boolean;
+        };
+        config: {
+            cookieId: string;
+            noticeId: string;
+            collapse: boolean;
+        };
+    };
+    loginLink?: string;
+    urlBase?: string;
+    addSearchApiKey: string;
+    statusUrl: string;
+};
+const Meganav: ({ paths, themeName, notice, loginLink, urlBase, addSearchApiKey, statusUrl, }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
+export default Meganav;
+//# sourceMappingURL=Meganav.d.ts.map
+}
+
+declare module '@ably/ui/core/MeganavBlogPostsList' {
+import { AbsUrl } from "@ably/ui/core/Meganav";
+type MeganavBlogPostsListProps = {
+    recentBlogPosts: {
+        link: string;
+        title: string;
+        pubDate: string;
+    }[];
+    absUrl: AbsUrl;
+};
+const MeganavBlogPostsList: ({ recentBlogPosts, absUrl, }: MeganavBlogPostsListProps) => import("react/jsx-runtime").JSX.Element | null;
+export default MeganavBlogPostsList;
+//# sourceMappingURL=MeganavBlogPostsList.d.ts.map
+}
+
+declare module '@ably/ui/core/MeganavContentCompany' {
+import { AbsUrl, MeganavPaths } from "@ably/ui/core/Meganav";
+type MeganavContentCompanyProps = {
+    absUrl: AbsUrl;
+    paths?: MeganavPaths;
+};
+const MeganavContentCompany: ({ paths, absUrl, }: MeganavContentCompanyProps) => import("react/jsx-runtime").JSX.Element;
+export default MeganavContentCompany;
+//# sourceMappingURL=MeganavContentCompany.d.ts.map
+}
+
+declare module '@ably/ui/core/MeganavContentDevelopers' {
+import { AbsUrl } from "@ably/ui/core/Meganav";
+const MeganavContentDevelopers: ({ absUrl, statusUrl, }: {
+    absUrl: AbsUrl;
+    statusUrl: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MeganavContentDevelopers;
+//# sourceMappingURL=MeganavContentDevelopers.d.ts.map
+}
+
+declare module '@ably/ui/core/MeganavContentProducts' {
+import { AbsUrl, MeganavPaths } from "@ably/ui/core/Meganav";
+type MeganavContentProductsProps = {
+    paths?: MeganavPaths;
+    absUrl: AbsUrl;
+};
+const MeganavContentProducts: ({ paths, absUrl, }: MeganavContentProductsProps) => import("react/jsx-runtime").JSX.Element;
+export default MeganavContentProducts;
+//# sourceMappingURL=MeganavContentProducts.d.ts.map
+}
+
+declare module '@ably/ui/core/MeganavContentUseCases' {
+import { AbsUrl } from "@ably/ui/core/Meganav";
+const MeganavContentUseCases: ({ absUrl }: {
+    absUrl: AbsUrl;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MeganavContentUseCases;
+//# sourceMappingURL=MeganavContentUseCases.d.ts.map
+}
+
+declare module '@ably/ui/core/MeganavControl/component' {
+export default MeganavControl;
+function MeganavControl(): {
+    teardown: () => void;
+    clear: () => void;
+}[];
+//# sourceMappingURL=component.d.ts.map
+}
+
+declare module '@ably/ui/core/MeganavControl' {
+import { ReactNode } from "react";
+import { MeganavTheme } from "@ably/ui/core/Meganav";
+type MeganavControlProps = {
+    ariaControls: string;
+    ariaLabel: string;
+    children: ReactNode;
+    theme: MeganavTheme;
+    additionalCSS?: string;
+};
+const MeganavControl: ({ ariaControls, ariaLabel, children, theme, additionalCSS, }: MeganavControlProps) => import("react/jsx-runtime").JSX.Element;
+export default MeganavControl;
+//# sourceMappingURL=MeganavControl.d.ts.map
+}
+
+declare module '@ably/ui/core/MeganavControlMobileDropdown/component' {
+export default MeganavControlMobileDropdown;
+function MeganavControlMobileDropdown({ clearPanels }: {
+    clearPanels: any;
+}): {
+    teardown: () => void;
+    clear: () => void;
+};
+//# sourceMappingURL=component.d.ts.map
+}
+
+declare module '@ably/ui/core/MeganavControlMobileDropdown' {
+import { MeganavTheme } from "@ably/ui/core/Meganav";
+const MeganavControlMobileDropdown: ({ theme }: {
+    theme: MeganavTheme;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MeganavControlMobileDropdown;
+//# sourceMappingURL=MeganavControlMobileDropdown.d.ts.map
+}
+
+declare module '@ably/ui/core/MeganavControlMobilePanelClose/component' {
+function _default(): {
+    teardown: () => void;
+    clear: () => void;
+}[];
+export default _default;
+//# sourceMappingURL=component.d.ts.map
+}
+
+declare module '@ably/ui/core/MeganavControlMobilePanelClose' {
+type MeganavControlMobilePanelCloseProps = {
+    ariaControls: string;
+    displayHr?: boolean;
+};
+const MeganavControlMobilePanelClose: ({ ariaControls, displayHr, }: MeganavControlMobilePanelCloseProps) => import("react/jsx-runtime").JSX.Element;
+export default MeganavControlMobilePanelClose;
+//# sourceMappingURL=MeganavControlMobilePanelClose.d.ts.map
+}
+
+declare module '@ably/ui/core/MeganavControlMobilePanelOpen/component' {
+function _default(): {
+    teardown: () => void;
+    clear: () => void;
+}[];
+export default _default;
+//# sourceMappingURL=component.d.ts.map
+}
+
+declare module '@ably/ui/core/MeganavControlMobilePanelOpen' {
+import { ReactNode } from "react";
+type MeganavControlMobilePanelOpenProps = {
+    ariaControls: string;
+    children: ReactNode;
+};
+const MeganavControlMobilePanelOpen: ({ ariaControls, children, }: MeganavControlMobilePanelOpenProps) => import("react/jsx-runtime").JSX.Element;
+export default MeganavControlMobilePanelOpen;
+//# sourceMappingURL=MeganavControlMobilePanelOpen.d.ts.map
+}
+
+declare module '@ably/ui/core/MeganavItemsDesktop' {
+import React from "react";
+import { AbsUrl, MeganavPanels, MeganavPaths, MeganavTheme } from "@ably/ui/core/Meganav";
+type MeganavDesktopItems = {
+    panels: MeganavPanels;
+    paths?: MeganavPaths;
+    theme: MeganavTheme;
+    absUrl: AbsUrl;
+    statusUrl: string;
+};
+const MeganavDesktopItems: ({ panels, paths, theme, absUrl, statusUrl, }: MeganavDesktopItems) => import("react/jsx-runtime").JSX.Element;
+const _default: React.MemoExoticComponent<({ panels, paths, theme, absUrl, statusUrl, }: MeganavDesktopItems) => import("react/jsx-runtime").JSX.Element>;
+export default _default;
+//# sourceMappingURL=MeganavItemsDesktop.d.ts.map
+}
+
+declare module '@ably/ui/core/MeganavItemsMobile' {
+import React from "react";
+import { AbsUrl, MeganavPanels, MeganavPaths, MeganavSessionState, MeganavTheme } from "@ably/ui/core/Meganav";
+type MeganavItemsMobileProps = {
+    panels: MeganavPanels;
+    paths?: MeganavPaths;
+    sessionState?: MeganavSessionState;
+    theme: MeganavTheme;
+    loginLink: string;
+    absUrl: AbsUrl;
+    statusUrl: string;
+};
+const _default: React.MemoExoticComponent<({ panels, paths, sessionState, theme, loginLink, absUrl, statusUrl, }: MeganavItemsMobileProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;
+//# sourceMappingURL=MeganavItemsMobile.d.ts.map
+}
+
+declare module '@ably/ui/core/MeganavItemsSignedIn' {
+import { AbsUrl, MeganavSessionState, MeganavTheme } from "@ably/ui/core/Meganav";
+type MeganavItemsSignedIn = {
+    sessionState: MeganavSessionState;
+    theme: MeganavTheme;
+    absUrl: AbsUrl;
+};
+const MeganavItemsSignedIn: ({ sessionState, absUrl, }: MeganavItemsSignedIn) => import("react/jsx-runtime").JSX.Element;
+export default MeganavItemsSignedIn;
+//# sourceMappingURL=MeganavItemsSignedIn.d.ts.map
+}
+
+declare module '@ably/ui/core/MeganavSearch' {
+import { AbsUrl } from "@ably/ui/core/Meganav";
+const MeganavSearch: ({ absUrl }: {
+    absUrl: AbsUrl;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MeganavSearch;
+//# sourceMappingURL=MeganavSearch.d.ts.map
+}
+
+declare module '@ably/ui/core/MeganavSearchAutocomplete/component' {
+function _default(apiKey: any): {
+    teardown: () => void;
+    clear: () => void;
+}[];
+export default _default;
+//# sourceMappingURL=component.d.ts.map
+}
+
+declare module '@ably/ui/core/MeganavSearchAutocomplete' {
+const MeganavSearchAutocomplete: () => import("react/jsx-runtime").JSX.Element;
+export default MeganavSearchAutocomplete;
+//# sourceMappingURL=MeganavSearchAutocomplete.d.ts.map
+}
+
+declare module '@ably/ui/core/MeganavSearchPanel' {
+import { AbsUrl } from "@ably/ui/core/Meganav";
+const MeganavSearchPanel: ({ absUrl }: {
+    absUrl: AbsUrl;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MeganavSearchPanel;
+//# sourceMappingURL=MeganavSearchPanel.d.ts.map
+}
+
+declare module '@ably/ui/core/MeganavSearchSuggestions/component' {
+export default MeganavSearchSuggestions;
+function MeganavSearchSuggestions(): {
+    teardown: () => void;
+    clear: () => void;
+};
+//# sourceMappingURL=component.d.ts.map
+}
+
+declare module '@ably/ui/core/MeganavSearchSuggestions' {
+import { AbsUrl } from "@ably/ui/core/Meganav";
+type MeganavSearchSuggestionsProps = {
+    absUrl: AbsUrl;
+    displaySupportLink: boolean;
+};
+const MeganavSearchSuggestions: ({ absUrl, displaySupportLink, }: MeganavSearchSuggestionsProps) => import("react/jsx-runtime").JSX.Element;
+export default MeganavSearchSuggestions;
+//# sourceMappingURL=MeganavSearchSuggestions.d.ts.map
+}
+
+declare module '@ably/ui/core/Notice/component' {
+export default Notice;
+function Notice({ bannerContainer, cookieId, noticeId, options }: {
+    bannerContainer: any;
+    cookieId: any;
+    noticeId: any;
+    options: any;
+}): () => void;
+//# sourceMappingURL=component.d.ts.map
+}
+
+declare module '@ably/ui/core/Notice' {
+type NoticeProps = {
+    buttonLink?: string;
+    buttonLabel?: string;
+    bodyText?: string;
+    title?: string;
+    closeBtn?: boolean;
+    config?: {
+        collapse: boolean;
+        noticeId: string;
+        cookieId: string;
+    };
+    bgColor?: string;
+    textColor?: string;
+    bannerContainer?: Element | null;
+    cookieId?: string;
+    noticeId?: string;
+    options?: {
+        collapse: boolean;
+    };
+};
+const Notice: ({ buttonLink, buttonLabel, bodyText, title, config, closeBtn, bgColor, textColor, }: NoticeProps) => import("react/jsx-runtime").JSX.Element;
+export default Notice;
+//# sourceMappingURL=Notice.d.ts.map
+}
+
+declare module '@ably/ui/core/SignOutLink' {
+import { MouseEventHandler, ReactNode } from "react";
+import { AbsUrl } from "@ably/ui/core/Meganav";
+type SignOutLinkProps = {
+    token: string;
+    href: string;
+    text: string;
+    children: ({ href, text, onClick, }: {
+        href: string;
+        text: string;
+        onClick: MouseEventHandler<HTMLAnchorElement>;
+    }) => ReactNode;
+    absUrl: AbsUrl;
+};
+const SignOutLink: ({ token, href, text, children, absUrl, }: SignOutLinkProps) => import("react/jsx-runtime").JSX.Element;
+export default SignOutLink;
+//# sourceMappingURL=SignOutLink.d.ts.map
+}
+
+declare module '@ably/ui/core/Slider' {
+import { ReactNode } from "react";
+interface SliderProps {
+    children: ReactNode[];
+    options?: {
+        interval?: number;
+        controlPosition?: "inline" | "floating";
+        intervalIndicator?: boolean;
+    };
+}
+const Slider: ({ children, options }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+export default Slider;
+//# sourceMappingURL=Slider.d.ts.map
+}
+
+declare module '@ably/ui/core/Status' {
+const Status: ({ statusUrl, additionalCSS, }: {
+    statusUrl: string;
+    additionalCSS?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Status;
+//# sourceMappingURL=Status.d.ts.map
+}
+
+declare module '@ably/ui/core/Table/Table' {
+import { PropsWithChildren, TableHTMLAttributes } from "react";
+type TableProps = {
+    id?: string;
+};
+export const Table: ({ id, children, ...rest }: PropsWithChildren<TableProps & TableHTMLAttributes<HTMLTableElement>>) => import("react/jsx-runtime").JSX.Element;
+export const TableBody: ({ children, ...rest }: PropsWithChildren<TableHTMLAttributes<HTMLTableSectionElement>>) => import("react/jsx-runtime").JSX.Element;
+export const TableHeader: ({ children, ...rest }: PropsWithChildren<TableHTMLAttributes<HTMLTableSectionElement>>) => import("react/jsx-runtime").JSX.Element;
+export const TableRowHeader: ({ children, ...rest }: PropsWithChildren<TableHTMLAttributes<HTMLTableRowElement>>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Table.d.ts.map
+}
+
+declare module '@ably/ui/core/Table/TableCell' {
+import React, { PropsWithChildren } from "react";
+type TableCellProps = {
+    isRowHeader?: boolean;
+} & React.TdHTMLAttributes<HTMLTableCellElement>;
+const LabelCell: ({ children, ...rest }: PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) => import("react/jsx-runtime").JSX.Element;
+const TableCell: ({ children, isRowHeader, ...rest }: PropsWithChildren<TableCellProps>) => import("react/jsx-runtime").JSX.Element;
+const HeaderCell: ({ children, ...rest }: PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) => import("react/jsx-runtime").JSX.Element;
+const CtaCell: ({ children, ...rest }: PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) => import("react/jsx-runtime").JSX.Element;
+export { TableCell, LabelCell, HeaderCell, CtaCell };
+//# sourceMappingURL=TableCell.d.ts.map
+}
+
+declare module '@ably/ui/core/Table/TableRow' {
+import React, { PropsWithChildren } from "react";
+const CtaRow: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+type RowProps = {
+    isHeader?: boolean;
+} & React.HTMLAttributes<HTMLTableRowElement>;
+const TableRow: ({ children, isHeader, ...rest }: PropsWithChildren<RowProps>) => import("react/jsx-runtime").JSX.Element;
+export { TableRow, CtaRow };
+//# sourceMappingURL=TableRow.d.ts.map
+}
+
+declare module '@ably/ui/core/Table/data' {
+export const PricingPageTable: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=data.d.ts.map
+}
+
+declare module '@ably/ui/core/Table' {
+const _default: {
+    Root: ({ id, children, ...rest }: import("react").PropsWithChildren<{
+        id?: string;
+    } & import("react").TableHTMLAttributes<HTMLTableElement>>) => import("react/jsx-runtime").JSX.Element;
+    Row: ({ children, isHeader, ...rest }: import("react").PropsWithChildren<{
+        isHeader?: boolean;
+    } & import("react").HTMLAttributes<HTMLTableRowElement>>) => import("react/jsx-runtime").JSX.Element;
+    Cell: ({ children, isRowHeader, ...rest }: import("react").PropsWithChildren<{
+        isRowHeader?: boolean;
+    } & import("react").TdHTMLAttributes<HTMLTableCellElement>>) => import("react/jsx-runtime").JSX.Element;
+    LabelCell: ({ children, ...rest }: import("react").PropsWithChildren<import("react").TdHTMLAttributes<HTMLTableCellElement>>) => import("react/jsx-runtime").JSX.Element;
+    HeaderCell: ({ children, ...rest }: import("react").PropsWithChildren<import("react").TdHTMLAttributes<HTMLTableCellElement>>) => import("react/jsx-runtime").JSX.Element;
+    CtaCell: ({ children, ...rest }: import("react").PropsWithChildren<import("react").TdHTMLAttributes<HTMLTableCellElement>>) => import("react/jsx-runtime").JSX.Element;
+    RowHeader: ({ children, ...rest }: import("react").PropsWithChildren<import("react").TableHTMLAttributes<HTMLTableRowElement>>) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ children, ...rest }: import("react").PropsWithChildren<import("react").TableHTMLAttributes<HTMLTableSectionElement>>) => import("react/jsx-runtime").JSX.Element;
+    Header: ({ children, ...rest }: import("react").PropsWithChildren<import("react").TableHTMLAttributes<HTMLTableSectionElement>>) => import("react/jsx-runtime").JSX.Element;
+};
+export default _default;
+//# sourceMappingURL=Table.d.ts.map
+}
+
+declare module '@ably/ui/core/Tooltip' {
+import { ButtonHTMLAttributes, HTMLAttributes, PropsWithChildren } from "react";
+type TooltipProps = {
+    triggerProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+    tooltipProps?: HTMLAttributes<HTMLDivElement>;
+} & HTMLAttributes<HTMLDivElement>;
+const Tooltip: ({ children, triggerProps, tooltipProps, ...rest }: PropsWithChildren<TooltipProps>) => import("react/jsx-runtime").JSX.Element;
+export default Tooltip;
+//# sourceMappingURL=Tooltip.d.ts.map
+}
+
+declare module '@ably/ui/core/css' {
+export function remsToPixelValue(remString: any): number;
+//# sourceMappingURL=css.d.ts.map
+}
+
+declare module '@ably/ui/core/dom-query' {
+export function queryId(val: any, root?: Document): Element | null;
+export function queryIdAll(val: any, root?: Document): NodeListOf<Element>;
+//# sourceMappingURL=dom-query.d.ts.map
+}
+
+declare module '@ably/ui/core/hubspot-chat-toggle' {
+export default function toggleChatWidget(params: any): (() => void) | undefined;
+//# sourceMappingURL=hubspot-chat-toggle.d.ts.map
+}
+
+declare module '@ably/ui/core/remote-blogs-posts' {
+export function fetchBlogPosts(store: any, blogUrl: any): Promise<void>;
+export namespace reducerBlogPosts {
+    function blogPosts(state: {
+        recent: null;
+    } | undefined, action: any): {
+        recent: any;
+    };
+}
+export function selectRecentBlogPosts(store: any): any;
+//# sourceMappingURL=remote-blogs-posts.d.ts.map
+}
+
+declare module '@ably/ui/core/remote-data-store' {
+export function attachStoreToWindow(store: any): void;
+export function getRemoteDataStore(): any;
+export function connectState(selector: any, setState: any): void;
+export function createRemoteDataStore(reducers: any): any;
+//# sourceMappingURL=remote-data-store.d.ts.map
+}
+
+declare module '@ably/ui/core/remote-data-util' {
+export function isJsonResponse(contentType: any): any;
+//# sourceMappingURL=remote-data-util.d.ts.map
+}
+
+declare module '@ably/ui/core/remote-session-data' {
+export function fetchSessionData(store: any, sessionUrl: any): Promise<void>;
+export namespace reducerSessionData {
+    function session(state: {
+        data: null;
+    } | undefined, action: any): {
+        data: any;
+    };
+}
+export function selectSessionData(store: any): any;
+//# sourceMappingURL=remote-session-data.d.ts.map
+}
+
+declare module '@ably/ui/core/url-base' {
+export default absUrl;
+function absUrl(path: any, urlBase?: string): string;
+//# sourceMappingURL=url-base.d.ts.map
+}
+
+declare module '@ably/ui/core/utils/syntax-highlighter-registry' {
+export default registry;
+const registry: {
+    label: string;
+    key: string;
+    module: any;
+}[];
+//# sourceMappingURL=syntax-highlighter-registry.d.ts.map
+}
+
+declare module '@ably/ui/core/utils/syntax-highlighter' {
+export function highlightSnippet(languageKeyword: any, snippet: any): string | undefined;
+export function languageToHighlightKey(lang: any): any;
+export function registerDefaultLanguages(register: any): void;
+//# sourceMappingURL=syntax-highlighter.d.ts.map
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.3.4",
+  "version": "14.4.0-dev.1b6b1db",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
@@ -11,30 +11,36 @@
     "core",
     "reset",
     "tailwind.config.js",
-    "tailwind.extend.js"
+    "tailwind.extend.js",
+    "index.d.ts"
   ],
+  "types": "index.d.ts",
   "devDependencies": {
     "@storybook/addon-a11y": "^8.2.9",
     "@storybook/addon-essentials": "^8.2.9",
     "@storybook/addon-interactions": "^8.2.9",
     "@storybook/addon-links": "^8.2.9",
     "@storybook/blocks": "^8.2.9",
-    "@storybook/react-vite": "^8.2.9",
     "@storybook/react": "^8.2.9",
-    "@storybook/test-runner": "^0.19.1",
+    "@storybook/react-vite": "^8.2.9",
     "@storybook/test": "^8.2.9",
+    "@storybook/test-runner": "^0.19.1",
     "@swc/cli": "^0.4.0",
     "@swc/core": "^1.4.11",
+    "@types/dompurify": "^3.0.5",
+    "@types/js-cookie": "^3.0.6",
+    "@types/lodash.throttle": "^4.1.9",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.0.2",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint": "^8.57.0",
-    "msw-storybook-addon": "^2.0.2",
+    "http-server": "14.1.1",
     "msw": "2.3.5",
+    "msw-storybook-addon": "^2.0.2",
     "prettier": "^3.2.5",
     "storybook": "^8.2.9",
     "svg-sprite": "^2.0.4",
@@ -44,9 +50,10 @@
   },
   "scripts": {
     "build:prebuild": "rm -rf core reset",
-    "build:swc": "swc src/core src/reset -d dist --quiet --copy-files --include-dotfiles --strip-leading-paths --config-file .swc --ignore **/*.stories.tsx,**/*.snap" ,
+    "build:swc": "swc src/core src/reset -d dist --copy-files --include-dotfiles --strip-leading-paths --config-file .swc --ignore **/*.stories.tsx,**/*.snap",
+    "build:tsc": "tsc && node tsc.js && rm -r types",
     "build:cleanup": "mv dist/* . && rm -r dist",
-    "build": "yarn build:prebuild && yarn build:swc && node sprites.js && yarn build:cleanup",
+    "build": "yarn build:prebuild && yarn build:swc && node sprites.js && yarn build:tsc && yarn build:cleanup",
     "watch": "yarn build:swc -w",
     "format:check": "prettier -c *.{js,ts} src/**/*.{js,ts,tsx}",
     "format:write": "prettier -w *.{js,ts} src/**/*.{js,ts,tsx}",
@@ -57,9 +64,8 @@
     "start": "vite --port 5000",
     "storybook": "yarn build && storybook dev -p 6006",
     "build-storybook": "yarn build && storybook build --quiet -o preview",
-    "test": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook && npx http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook --url http://127.0.0.1:6007\"",
-    "test:update-snapshots": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook && npx http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook -u --url http://127.0.0.1:6007\""
-
+    "test": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook && yarn http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook --url http://127.0.0.1:6007\"",
+    "test:update-snapshots": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook && yarn http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook -u --url http://127.0.0.1:6007\""
   },
   "dependencies": {
     "addsearch-js-client": "^0.8.11",
@@ -69,8 +75,8 @@
     "highlightjs-curl": "^1.3.0",
     "js-cookie": "^3.0.5",
     "lodash.throttle": "^4.1.1",
-    "react-dom": "^18.2.0",
     "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "redux": "^4.0.5",
     "scroll-lock": "^2.1.4"
   },