@ably/ui 15.7.0-dev.790ab312 → 16.0.0-dev.4ca56ef5

package/core/insights/index.js

@@ -1,2 +1,2 @@
-import{InsightsCommandQueue}from"./command-queue";const insights=new InsightsCommandQueue;export const initInsights=config=>insights.initInsights(config);export const enableDebugMode=()=>insights.enableDebugMode();export const disableDebugMode=()=>insights.disableDebugMode();export const identify=identity=>insights.identify(identity);export const trackPageView=()=>insights.trackPageView();export const track=(event,properties)=>insights.track(event,properties);export const startSessionRecording=()=>insights.startSessionRecording();export const stopSessionRecording=()=>insights.stopSessionRecording();export const setupObserver=()=>insights.setupObserver();
+import*as mixpanel from"./mixpanel";import*as posthog from"./posthog";let debugMode=false;export const initInsights=({mixpanelToken,mixpanelAutoCapture,posthogApiKey,posthogApiHost,debug=false})=>{debugMode=!!debug;try{mixpanel.initMixpanel(mixpanelToken,mixpanelAutoCapture,debugMode)}catch(e){if(debugMode){console.error("Failed to initialize Mixpanel",e)}}try{posthog.initPosthog(posthogApiKey,posthogApiHost)}catch(e){if(debugMode){console.error("Failed to initialize Posthog",e)}}};export const enableDebugMode=()=>{debugMode=true;try{mixpanel.enableDebugMode();posthog.enableDebugMode()}catch(e){console.error("Failed to enable debug mode",e)}};export const disableDebugMode=()=>{debugMode=false;try{mixpanel.disableDebugMode();posthog.disableDebugMode()}catch(e){console.error("Failed to disable debug mode",e)}};export const identify=({userId,accountId,organisationId,email,name})=>{if(!userId){if(debugMode){console.warn("User ID not provided, skipping identify")}return}try{mixpanel.identify({userId,accountId,organisationId,email,name})}catch(e){if(debugMode){console.error("Failed to identify user in Mixpanel",e)}}try{posthog.identify({userId,accountId,organisationId,email,name})}catch(e){if(debugMode){console.error("Failed to identify user in Posthog",e)}}};export const trackPageView=()=>{try{mixpanel.trackPageView()}catch(e){if(debugMode){console.error("Failed to track page view in Mixpanel",e)}}try{posthog.trackPageView()}catch(e){if(debugMode){console.error("Failed to track page view in Posthog",e)}}};export const track=(event,properties)=>{try{mixpanel.track(event,properties)}catch(e){if(debugMode){console.error("Failed to track event in Mixpanel",e)}}try{posthog.track(event,properties)}catch(e){if(debugMode){console.error("Failed to track event in Posthog",e)}}};export const setupObserver=()=>{const getInsightAttributes=element=>{const MAX_ATTRIBUTES=10;let count=0;const attributes={};for(const attr of element.attributes){if(count>=MAX_ATTRIBUTES)break;if(attr.name.startsWith("data-insight-")){if(!/^data-insight-[a-zA-Z0-9-]+$/.test(attr.name))continue;if(typeof attr.value!=="string"||attr.value.length>100)continue;const key=attr.name.replace("data-insight-","").split("-").map((part,index)=>index===0?part:part.charAt(0).toUpperCase()+part.slice(1)).join("");attributes[key]=attr.value;count++}}return attributes};const findClosestElementWithInsights=element=>{let current=element;while(current&&current!==document.body){const insights=getInsightAttributes(current);if(Object.keys(insights).length>0){return insights}current=current.parentElement}return null};const handleClick=event=>{if(!(event.target instanceof HTMLElement))return;const insights=findClosestElementWithInsights(event.target);if(insights){const{event:eventName,...properties}=insights;track(eventName||"element_clicked",properties)}};document.body.addEventListener("click",handleClick);return()=>{document.body.removeEventListener("click",handleClick)}};
 //# sourceMappingURL=index.js.map

package/core/insights/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/insights/index.ts"],"sourcesContent":["import { InsightsConfig, InsightsIdentity } from \"./types\";\nimport { InsightsCommandQueue } from \"./command-queue\";\nexport type { InsightsConfig };\n\n// Hi and welcome 👋\n//\n// The insights code is written using a Command Queue, or Deferred Execution pattern.\n// This pattern is useful when you need to queue up actions that should wait until\n// some initialization is complete. In this case, we want to queue up all the analytics\n// commands until the analytics service is initialized. This way, we can ensure that\n// no analytics events are lost during the initialization process. It looks wildly\n// different than other parts of Ably UI, but if you squint you realise it looks very\n// much like the services it's wrapping.\n//\n// There are three pieces working together here:\n// - The `AnalyticsService` interface, which defines the public methods that the insights\n//   service will expose.\n// - The `InsightsCommandQueue` class, which is the main entry point for the insights\n//   service. It acts as a proxy that will either queue up commands or execute\n//   them directly on the real implementation.\n// - The `InsightsService` class, which is the real implementation that will be used\n//   after initialization. It's responsible for initializing the underlying analytics\n//   services (Mixpanel, Posthog & the data layer) and executing the queued commands.\n\n// Create the singleton instance with the command queue pattern\nconst insights = new InsightsCommandQueue();\n\n// Export the methods with the same interface as before\nexport const initInsights = (config: InsightsConfig) =>\n  insights.initInsights(config);\nexport const enableDebugMode = () => insights.enableDebugMode();\nexport const disableDebugMode = () => insights.disableDebugMode();\nexport const identify = (identity: InsightsIdentity) =>\n  insights.identify(identity);\nexport const trackPageView = () => insights.trackPageView();\nexport const track = (event: string, properties?: Record<string, unknown>) =>\n  insights.track(event, properties);\nexport const startSessionRecording = () => insights.startSessionRecording();\nexport const stopSessionRecording = () => insights.stopSessionRecording();\nexport const setupObserver = () => insights.setupObserver();\n"],"names":["InsightsCommandQueue","insights","initInsights","config","enableDebugMode","disableDebugMode","identify","identity","trackPageView","track","event","properties","startSessionRecording","stopSessionRecording","setupObserver"],"mappings":"AACA,OAASA,oBAAoB,KAAQ,iBAAkB,CAwBvD,MAAMC,SAAW,IAAID,oBAGrB,QAAO,MAAME,aAAe,AAACC,QAC3BF,SAASC,YAAY,CAACC,OAAQ,AAChC,QAAO,MAAMC,gBAAkB,IAAMH,SAASG,eAAe,EAAG,AAChE,QAAO,MAAMC,iBAAmB,IAAMJ,SAASI,gBAAgB,EAAG,AAClE,QAAO,MAAMC,SAAW,AAACC,UACvBN,SAASK,QAAQ,CAACC,SAAU,AAC9B,QAAO,MAAMC,cAAgB,IAAMP,SAASO,aAAa,EAAG,AAC5D,QAAO,MAAMC,MAAQ,CAACC,MAAeC,aACnCV,SAASQ,KAAK,CAACC,MAAOC,WAAY,AACpC,QAAO,MAAMC,sBAAwB,IAAMX,SAASW,qBAAqB,EAAG,AAC5E,QAAO,MAAMC,qBAAuB,IAAMZ,SAASY,oBAAoB,EAAG,AAC1E,QAAO,MAAMC,cAAgB,IAAMb,SAASa,aAAa,EAAG"}
+{"version":3,"sources":["../../../src/core/insights/index.ts"],"sourcesContent":["import * as mixpanel from \"./mixpanel\";\nimport * as posthog from \"./posthog\";\nimport { InsightsIdentity } from \"./types\";\n\nexport type InsightsConfig = {\n  debug: boolean;\n  mixpanelToken: string;\n  mixpanelAutoCapture: boolean;\n  posthogApiKey: string;\n  posthogApiHost: string;\n};\n\nlet debugMode = false;\n\nexport const initInsights = ({\n  mixpanelToken,\n  mixpanelAutoCapture,\n  posthogApiKey,\n  posthogApiHost,\n  debug = false,\n}: InsightsConfig) => {\n  debugMode = !!debug;\n\n  try {\n    mixpanel.initMixpanel(mixpanelToken, mixpanelAutoCapture, debugMode);\n  } catch (e) {\n    if (debugMode) {\n      console.error(\"Failed to initialize Mixpanel\", e);\n    }\n  }\n\n  try {\n    posthog.initPosthog(posthogApiKey, posthogApiHost);\n  } catch (e) {\n    if (debugMode) {\n      console.error(\"Failed to initialize Posthog\", e);\n    }\n  }\n};\n\nexport const enableDebugMode = () => {\n  debugMode = true;\n  try {\n    mixpanel.enableDebugMode();\n    posthog.enableDebugMode();\n  } catch (e) {\n    console.error(\"Failed to enable debug mode\", e);\n  }\n};\n\nexport const disableDebugMode = () => {\n  debugMode = false;\n  try {\n    mixpanel.disableDebugMode();\n    posthog.disableDebugMode();\n  } catch (e) {\n    console.error(\"Failed to disable debug mode\", e);\n  }\n};\n\nexport const identify = ({\n  userId,\n  accountId,\n  organisationId,\n  email,\n  name,\n}: InsightsIdentity) => {\n  // In very rare cases we might have a user without an account, so we'll\n  // let null/undefined/blank strings through on that one\n  if (!userId) {\n    if (debugMode) {\n      console.warn(\"User ID not provided, skipping identify\");\n    }\n    return;\n  }\n\n  try {\n    mixpanel.identify({ userId, accountId, organisationId, email, name });\n  } catch (e) {\n    if (debugMode) {\n      console.error(\"Failed to identify user in Mixpanel\", e);\n    }\n  }\n\n  try {\n    posthog.identify({ userId, accountId, organisationId, email, name });\n  } catch (e) {\n    if (debugMode) {\n      console.error(\"Failed to identify user in Posthog\", e);\n    }\n  }\n};\n\nexport const trackPageView = () => {\n  try {\n    mixpanel.trackPageView();\n  } catch (e) {\n    if (debugMode) {\n      console.error(\"Failed to track page view in Mixpanel\", e);\n    }\n  }\n\n  try {\n    posthog.trackPageView();\n  } catch (e) {\n    if (debugMode) {\n      console.error(\"Failed to track page view in Posthog\", e);\n    }\n  }\n};\n\nexport const track = (event: string, properties?: Record<string, unknown>) => {\n  try {\n    mixpanel.track(event, properties);\n  } catch (e) {\n    if (debugMode) {\n      console.error(\"Failed to track event in Mixpanel\", e);\n    }\n  }\n\n  try {\n    posthog.track(event, properties);\n  } catch (e) {\n    if (debugMode) {\n      console.error(\"Failed to track event in Posthog\", e);\n    }\n  }\n};\n\ntype InsightAttributes = {\n  event?: string;\n  [key: string]: string | undefined;\n};\n\nexport const setupObserver = () => {\n  // Helper to get all data-insight-* attributes from an element\n  const getInsightAttributes = (element): InsightAttributes => {\n    // limit how many data attributes we'll process\n    const MAX_ATTRIBUTES = 10;\n    let count = 0;\n\n    const attributes: InsightAttributes = {};\n\n    for (const attr of element.attributes) {\n      if (count >= MAX_ATTRIBUTES) break;\n      if (attr.name.startsWith(\"data-insight-\")) {\n        // Validate attribute name format\n        if (!/^data-insight-[a-zA-Z0-9-]+$/.test(attr.name)) continue;\n\n        // Sanitize attribute value\n        if (typeof attr.value !== \"string\" || attr.value.length > 100) continue;\n\n        // Convert data-insight-event-name to eventName\n        const key = attr.name\n          .replace(\"data-insight-\", \"\")\n          .split(\"-\")\n          .map((part, index) =>\n            index === 0 ? part : part.charAt(0).toUpperCase() + part.slice(1),\n          )\n          .join(\"\");\n        attributes[key] = attr.value;\n        count++;\n      }\n    }\n    return attributes;\n  };\n\n  // Helper to find closest element with data-insight attributes\n  const findClosestElementWithInsights = (element) => {\n    let current = element;\n    while (current && current !== document.body) {\n      const insights = getInsightAttributes(current);\n      if (Object.keys(insights).length > 0) {\n        return insights;\n      }\n      current = current.parentElement;\n    }\n    return null;\n  };\n\n  // Global click handler\n  const handleClick = (event: MouseEvent): void => {\n    if (!(event.target instanceof HTMLElement)) return;\n    const insights = findClosestElementWithInsights(event.target);\n    if (insights) {\n      // Extract special properties if they exist\n      const { event: eventName, ...properties } = insights;\n      track(eventName || \"element_clicked\", properties);\n    }\n  };\n\n  // Add listener to document body to catch all clicks\n  document.body.addEventListener(\"click\", handleClick);\n\n  // Return cleanup function in case it's needed\n  return () => {\n    document.body.removeEventListener(\"click\", handleClick);\n  };\n};\n"],"names":["mixpanel","posthog","debugMode","initInsights","mixpanelToken","mixpanelAutoCapture","posthogApiKey","posthogApiHost","debug","initMixpanel","e","console","error","initPosthog","enableDebugMode","disableDebugMode","identify","userId","accountId","organisationId","email","name","warn","trackPageView","track","event","properties","setupObserver","getInsightAttributes","element","MAX_ATTRIBUTES","count","attributes","attr","startsWith","test","value","length","key","replace","split","map","part","index","charAt","toUpperCase","slice","join","findClosestElementWithInsights","current","document","body","insights","Object","keys","parentElement","handleClick","target","HTMLElement","eventName","addEventListener","removeEventListener"],"mappings":"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"}

package/core/insights/mixpanel.js

@@ -1,2 +1,2 @@
-import mixpanel from"mixpanel-browser";export const initMixpanel=(token,autoCapture=false,debug=false,recordSessionsPercent=1)=>{const blockSelectors=["[ph-no-capture]",'[data-sl="mask"]'];if(!token){console.warn("Mixpanel token not provided, skipping initialization");return}mixpanel.init(token,{debug:debug,persistence:"localStorage",autocapture:autoCapture?{block_selectors:blockSelectors,capture_text_content:true}:false,track_pageview:false,record_sessions_percent:recordSessionsPercent})};export const enableDebugMode=()=>{mixpanel.set_config({debug:true})};export const disableDebugMode=()=>{mixpanel.set_config({debug:false})};export const identify=({userId,accountId,organisationId,email,name})=>{if(!userId){return}mixpanel.identify(userId.toString());if(email||name){mixpanel.people.set({$email:email,$name:name})}if(accountId){mixpanel.people.union({accounts:[accountId.toString()]})}if(organisationId){mixpanel.people.set({organization_id:[organisationId.toString()]})}};const redactUrlSegments=()=>{const pathSegments=window.location.pathname.split("/");const redactedSegments=pathSegments.map(segment=>{return/^\d+$/.test(segment)?"{redacted}":segment});const url=new URL(window.location.href);url.pathname=redactedSegments.join("/");return decodeURI(url.toString()).toLowerCase()};export const trackPageView=()=>{mixpanel.track_pageview({redacted_path:redactUrlSegments()})};export const track=(event,properties)=>{mixpanel.track(event,properties)};export const startSessionRecording=()=>{mixpanel.start_session_recording()};export const stopSessionRecording=()=>{mixpanel.stop_session_recording()};
+import mixpanel from"mixpanel-browser";export const initMixpanel=(token,autoCapture=false,debug=false)=>{const blockSelectors=["[ph-no-capture]",'[data-sl="mask"]'];if(!token){console.warn("Mixpanel token not provided, skipping initialization");return}mixpanel.init(token,{debug:debug,persistence:"localStorage",autocapture:autoCapture?{block_selectors:blockSelectors}:false,track_pageview:false})};export const enableDebugMode=()=>{mixpanel.set_config({debug:true})};export const disableDebugMode=()=>{mixpanel.set_config({debug:false})};export const identify=({userId,accountId,organisationId,email,name})=>{if(!userId){return}mixpanel.identify(userId);if(email||name){mixpanel.people.set({$email:email,$name:name})}if(accountId){mixpanel.people.union({account_id:[accountId]})}if(organisationId){mixpanel.people.set({organisation_id:[organisationId]})}};export const trackPageView=mixpanel.track_pageview;export const track=mixpanel.track;
 //# sourceMappingURL=mixpanel.js.map

package/core/insights/mixpanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/insights/mixpanel.ts"],"sourcesContent":["import mixpanel from \"mixpanel-browser\";\n\nimport { InsightsIdentity } from \"./types\";\n\nexport const initMixpanel = (\n  token: string,\n  autoCapture: boolean = false,\n  debug: boolean = false,\n  recordSessionsPercent: number = 1,\n) => {\n  const blockSelectors = [\"[ph-no-capture]\", '[data-sl=\"mask\"]'];\n  if (!token) {\n    console.warn(\"Mixpanel token not provided, skipping initialization\");\n    return;\n  }\n\n  mixpanel.init(token, {\n    debug: debug,\n    persistence: \"localStorage\",\n    autocapture: autoCapture\n      ? {\n          block_selectors: blockSelectors,\n          capture_text_content: true,\n        }\n      : false,\n    track_pageview: false, // We'll track page views manually\n    record_sessions_percent: recordSessionsPercent,\n  });\n};\n\nexport const enableDebugMode = () => {\n  mixpanel.set_config({ debug: true });\n};\n\nexport const disableDebugMode = () => {\n  mixpanel.set_config({ debug: false });\n};\n\nexport const identify = ({\n  userId,\n  accountId,\n  organisationId,\n  email,\n  name,\n}: InsightsIdentity) => {\n  // In very rare cases we might have a user without an account, so we'll\n  // let null/undefined/blank strings through on that one\n  if (!userId) {\n    return;\n  }\n\n  mixpanel.identify(userId.toString());\n\n  if (email || name) {\n    mixpanel.people.set({ $email: email, $name: name });\n  }\n\n  if (accountId) {\n    mixpanel.people.union({ accounts: [accountId.toString()] });\n  }\n\n  if (organisationId) {\n    mixpanel.people.set({ organization_id: [organisationId.toString()] });\n  }\n};\n\n// Simple function to replace all digits in a URL path with {redacted},\n// purely to make reporting based on aggregates easier\nconst redactUrlSegments = () => {\n  const pathSegments = window.location.pathname.split(\"/\");\n\n  const redactedSegments = pathSegments.map((segment) => {\n    // Check if the segment contains only digits\n    return /^\\d+$/.test(segment) ? \"{redacted}\" : segment;\n  });\n\n  // Join the segments back together\n  const url = new URL(window.location.href);\n  url.pathname = redactedSegments.join(\"/\");\n\n  return decodeURI(url.toString()).toLowerCase();\n};\n\nexport const trackPageView = () => {\n  // Add the redacted URL to the page view event for reporting\n  mixpanel.track_pageview({\n    redacted_path: redactUrlSegments(),\n  });\n};\n\nexport const track = (event: string, properties?: Record<string, unknown>) => {\n  mixpanel.track(event, properties);\n};\n\nexport const startSessionRecording = () => {\n  mixpanel.start_session_recording();\n};\n\nexport const stopSessionRecording = () => {\n  mixpanel.stop_session_recording();\n};\n"],"names":["mixpanel","initMixpanel","token","autoCapture","debug","recordSessionsPercent","blockSelectors","console","warn","init","persistence","autocapture","block_selectors","capture_text_content","track_pageview","record_sessions_percent","enableDebugMode","set_config","disableDebugMode","identify","userId","accountId","organisationId","email","name","toString","people","set","$email","$name","union","accounts","organization_id","redactUrlSegments","pathSegments","window","location","pathname","split","redactedSegments","map","segment","test","url","URL","href","join","decodeURI","toLowerCase","trackPageView","redacted_path","track","event","properties","startSessionRecording","start_session_recording","stopSessionRecording","stop_session_recording"],"mappings":"AAAA,OAAOA,aAAc,kBAAmB,AAIxC,QAAO,MAAMC,aAAe,CAC1BC,MACAC,YAAuB,KAAK,CAC5BC,MAAiB,KAAK,CACtBC,sBAAgC,CAAC,IAEjC,MAAMC,eAAiB,CAAC,kBAAmB,mBAAmB,CAC9D,GAAI,CAACJ,MAAO,CACVK,QAAQC,IAAI,CAAC,wDACb,MACF,CAEAR,SAASS,IAAI,CAACP,MAAO,CACnBE,MAAOA,MACPM,YAAa,eACbC,YAAaR,YACT,CACES,gBAAiBN,eACjBO,qBAAsB,IACxB,EACA,MACJC,eAAgB,MAChBC,wBAAyBV,qBAC3B,EACF,CAAE,AAEF,QAAO,MAAMW,gBAAkB,KAC7BhB,SAASiB,UAAU,CAAC,CAAEb,MAAO,IAAK,EACpC,CAAE,AAEF,QAAO,MAAMc,iBAAmB,KAC9BlB,SAASiB,UAAU,CAAC,CAAEb,MAAO,KAAM,EACrC,CAAE,AAEF,QAAO,MAAMe,SAAW,CAAC,CACvBC,MAAM,CACNC,SAAS,CACTC,cAAc,CACdC,KAAK,CACLC,IAAI,CACa,IAGjB,GAAI,CAACJ,OAAQ,CACX,MACF,CAEApB,SAASmB,QAAQ,CAACC,OAAOK,QAAQ,IAEjC,GAAIF,OAASC,KAAM,CACjBxB,SAAS0B,MAAM,CAACC,GAAG,CAAC,CAAEC,OAAQL,MAAOM,MAAOL,IAAK,EACnD,CAEA,GAAIH,UAAW,CACbrB,SAAS0B,MAAM,CAACI,KAAK,CAAC,CAAEC,SAAU,CAACV,UAAUI,QAAQ,GAAG,AAAC,EAC3D,CAEA,GAAIH,eAAgB,CAClBtB,SAAS0B,MAAM,CAACC,GAAG,CAAC,CAAEK,gBAAiB,CAACV,eAAeG,QAAQ,GAAG,AAAC,EACrE,CACF,CAAE,CAIF,MAAMQ,kBAAoB,KACxB,MAAMC,aAAeC,OAAOC,QAAQ,CAACC,QAAQ,CAACC,KAAK,CAAC,KAEpD,MAAMC,iBAAmBL,aAAaM,GAAG,CAAC,AAACC,UAEzC,MAAO,QAAQC,IAAI,CAACD,SAAW,aAAeA,OAChD,GAGA,MAAME,IAAM,IAAIC,IAAIT,OAAOC,QAAQ,CAACS,IAAI,CACxCF,CAAAA,IAAIN,QAAQ,CAAGE,iBAAiBO,IAAI,CAAC,KAErC,OAAOC,UAAUJ,IAAIlB,QAAQ,IAAIuB,WAAW,EAC9C,CAEA,QAAO,MAAMC,cAAgB,KAE3BjD,SAASc,cAAc,CAAC,CACtBoC,cAAejB,mBACjB,EACF,CAAE,AAEF,QAAO,MAAMkB,MAAQ,CAACC,MAAeC,cACnCrD,SAASmD,KAAK,CAACC,MAAOC,WACxB,CAAE,AAEF,QAAO,MAAMC,sBAAwB,KACnCtD,SAASuD,uBAAuB,EAClC,CAAE,AAEF,QAAO,MAAMC,qBAAuB,KAClCxD,SAASyD,sBAAsB,EACjC,CAAE"}
+{"version":3,"sources":["../../../src/core/insights/mixpanel.ts"],"sourcesContent":["import mixpanel from \"mixpanel-browser\";\n\nimport { InsightsIdentity } from \"./types\";\n\nexport const initMixpanel = (\n  token: string,\n  autoCapture: boolean = false,\n  debug: boolean = false,\n) => {\n  const blockSelectors = [\"[ph-no-capture]\", '[data-sl=\"mask\"]'];\n  if (!token) {\n    console.warn(\"Mixpanel token not provided, skipping initialization\");\n    return;\n  }\n\n  mixpanel.init(token, {\n    debug: debug,\n    persistence: \"localStorage\",\n    autocapture: autoCapture\n      ? {\n          block_selectors: blockSelectors,\n        }\n      : false,\n    track_pageview: false, // We'll track page views manually\n  });\n};\n\nexport const enableDebugMode = () => {\n  mixpanel.set_config({ debug: true });\n};\n\nexport const disableDebugMode = () => {\n  mixpanel.set_config({ debug: false });\n};\n\nexport const identify = ({\n  userId,\n  accountId,\n  organisationId,\n  email,\n  name,\n}: InsightsIdentity) => {\n  // In very rare cases we might have a user without an account, so we'll\n  // let null/undefined/blank strings through on that one\n  if (!userId) {\n    return;\n  }\n\n  mixpanel.identify(userId);\n\n  if (email || name) {\n    mixpanel.people.set({ $email: email, $name: name });\n  }\n\n  if (accountId) {\n    mixpanel.people.union({ account_id: [accountId] });\n  }\n\n  if (organisationId) {\n    mixpanel.people.set({ organisation_id: [organisationId] });\n  }\n};\n\nexport const trackPageView = mixpanel.track_pageview;\n\nexport const track = mixpanel.track;\n"],"names":["mixpanel","initMixpanel","token","autoCapture","debug","blockSelectors","console","warn","init","persistence","autocapture","block_selectors","track_pageview","enableDebugMode","set_config","disableDebugMode","identify","userId","accountId","organisationId","email","name","people","set","$email","$name","union","account_id","organisation_id","trackPageView","track"],"mappings":"AAAA,OAAOA,aAAc,kBAAmB,AAIxC,QAAO,MAAMC,aAAe,CAC1BC,MACAC,YAAuB,KAAK,CAC5BC,MAAiB,KAAK,IAEtB,MAAMC,eAAiB,CAAC,kBAAmB,mBAAmB,CAC9D,GAAI,CAACH,MAAO,CACVI,QAAQC,IAAI,CAAC,wDACb,MACF,CAEAP,SAASQ,IAAI,CAACN,MAAO,CACnBE,MAAOA,MACPK,YAAa,eACbC,YAAaP,YACT,CACEQ,gBAAiBN,cACnB,EACA,MACJO,eAAgB,KAClB,EACF,CAAE,AAEF,QAAO,MAAMC,gBAAkB,KAC7Bb,SAASc,UAAU,CAAC,CAAEV,MAAO,IAAK,EACpC,CAAE,AAEF,QAAO,MAAMW,iBAAmB,KAC9Bf,SAASc,UAAU,CAAC,CAAEV,MAAO,KAAM,EACrC,CAAE,AAEF,QAAO,MAAMY,SAAW,CAAC,CACvBC,MAAM,CACNC,SAAS,CACTC,cAAc,CACdC,KAAK,CACLC,IAAI,CACa,IAGjB,GAAI,CAACJ,OAAQ,CACX,MACF,CAEAjB,SAASgB,QAAQ,CAACC,QAElB,GAAIG,OAASC,KAAM,CACjBrB,SAASsB,MAAM,CAACC,GAAG,CAAC,CAAEC,OAAQJ,MAAOK,MAAOJ,IAAK,EACnD,CAEA,GAAIH,UAAW,CACblB,SAASsB,MAAM,CAACI,KAAK,CAAC,CAAEC,WAAY,CAACT,UAAU,AAAC,EAClD,CAEA,GAAIC,eAAgB,CAClBnB,SAASsB,MAAM,CAACC,GAAG,CAAC,CAAEK,gBAAiB,CAACT,eAAe,AAAC,EAC1D,CACF,CAAE,AAEF,QAAO,MAAMU,cAAgB7B,SAASY,cAAc,AAAC,AAErD,QAAO,MAAMkB,MAAQ9B,SAAS8B,KAAK,AAAC"}

package/core/insights/posthog.js

@@ -1,2 +1,2 @@
-import posthog from"posthog-js";export const initPosthog=(apiKey,apiHost)=>{posthog.init(apiKey,{api_host:apiHost,capture_pageview:false})};export const enableDebugMode=()=>{posthog.debug()};export const disableDebugMode=()=>{posthog.debug(false)};export const identify=({userId,accountId,organisationId,email,name})=>{if(!userId){return}if(userId!==posthog.get_distinct_id()){posthog.identify(userId,{email,name})}if(accountId){posthog.group("account",accountId)}if(organisationId){posthog.group("organisation",organisationId)}};export const trackPageView=()=>{posthog.capture("$pageview")};export const track=(event,properties)=>{posthog.capture(event,properties)};export const startSessionRecording=()=>{posthog.startSessionRecording()};export const stopSessionRecording=()=>{posthog.stopSessionRecording()};
+import posthog from"posthog-js";export const initPosthog=(apiKey,apiHost)=>{posthog.init(apiKey,{api_host:apiHost,capture_pageview:false})};export const enableDebugMode=()=>{posthog.debug()};export const disableDebugMode=()=>{posthog.debug(false)};export const identify=({userId,accountId,organisationId,email,name})=>{if(!userId){return}if(userId!==posthog.get_distinct_id()){posthog.identify(userId,{email,name})}if(accountId){posthog.group("account",accountId)}if(organisationId){posthog.group("organisation",organisationId)}};export const trackPageView=()=>{posthog.capture("$pageview")};export const track=(event,properties)=>{posthog.capture(event,properties)};
 //# sourceMappingURL=posthog.js.map

package/core/insights/posthog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/insights/posthog.ts"],"sourcesContent":["import posthog from \"posthog-js\";\n\nimport { InsightsIdentity } from \"./types\";\n\nexport const initPosthog = (apiKey: string, apiHost: string) => {\n  posthog.init(apiKey, {\n    api_host: apiHost,\n    capture_pageview: false,\n  });\n};\n\nexport const enableDebugMode = () => {\n  posthog.debug();\n};\n\nexport const disableDebugMode = () => {\n  posthog.debug(false);\n};\n\nexport const identify = ({\n  userId,\n  accountId,\n  organisationId,\n  email,\n  name,\n}: InsightsIdentity) => {\n  // In very rare cases we might have a user without an account, so we'll\n  // let null/undefined/blank strings through on that one\n  if (!userId) {\n    return;\n  }\n\n  if (userId !== posthog.get_distinct_id()) {\n    posthog.identify(userId, { email, name });\n  }\n\n  // Associate all events in this session with this account\n  if (accountId) {\n    posthog.group(\"account\", accountId);\n  }\n\n  // Associate all events in this session with this organisation (if available)\n  if (organisationId) {\n    posthog.group(\"organisation\", organisationId);\n  }\n};\n\nexport const trackPageView = () => {\n  posthog.capture(\"$pageview\");\n};\n\nexport const track = (event: string, properties?: Record<string, unknown>) => {\n  posthog.capture(event, properties);\n};\n\nexport const startSessionRecording = () => {\n  posthog.startSessionRecording();\n};\n\nexport const stopSessionRecording = () => {\n  posthog.stopSessionRecording();\n};\n"],"names":["posthog","initPosthog","apiKey","apiHost","init","api_host","capture_pageview","enableDebugMode","debug","disableDebugMode","identify","userId","accountId","organisationId","email","name","get_distinct_id","group","trackPageView","capture","track","event","properties","startSessionRecording","stopSessionRecording"],"mappings":"AAAA,OAAOA,YAAa,YAAa,AAIjC,QAAO,MAAMC,YAAc,CAACC,OAAgBC,WAC1CH,QAAQI,IAAI,CAACF,OAAQ,CACnBG,SAAUF,QACVG,iBAAkB,KACpB,EACF,CAAE,AAEF,QAAO,MAAMC,gBAAkB,KAC7BP,QAAQQ,KAAK,EACf,CAAE,AAEF,QAAO,MAAMC,iBAAmB,KAC9BT,QAAQQ,KAAK,CAAC,MAChB,CAAE,AAEF,QAAO,MAAME,SAAW,CAAC,CACvBC,MAAM,CACNC,SAAS,CACTC,cAAc,CACdC,KAAK,CACLC,IAAI,CACa,IAGjB,GAAI,CAACJ,OAAQ,CACX,MACF,CAEA,GAAIA,SAAWX,QAAQgB,eAAe,GAAI,CACxChB,QAAQU,QAAQ,CAACC,OAAQ,CAAEG,MAAOC,IAAK,EACzC,CAGA,GAAIH,UAAW,CACbZ,QAAQiB,KAAK,CAAC,UAAWL,UAC3B,CAGA,GAAIC,eAAgB,CAClBb,QAAQiB,KAAK,CAAC,eAAgBJ,eAChC,CACF,CAAE,AAEF,QAAO,MAAMK,cAAgB,KAC3BlB,QAAQmB,OAAO,CAAC,YAClB,CAAE,AAEF,QAAO,MAAMC,MAAQ,CAACC,MAAeC,cACnCtB,QAAQmB,OAAO,CAACE,MAAOC,WACzB,CAAE,AAEF,QAAO,MAAMC,sBAAwB,KACnCvB,QAAQuB,qBAAqB,EAC/B,CAAE,AAEF,QAAO,MAAMC,qBAAuB,KAClCxB,QAAQwB,oBAAoB,EAC9B,CAAE"}
+{"version":3,"sources":["../../../src/core/insights/posthog.ts"],"sourcesContent":["import posthog from \"posthog-js\";\n\nimport { InsightsIdentity } from \"./types\";\n\nexport const initPosthog = (apiKey: string, apiHost: string) => {\n  posthog.init(apiKey, {\n    api_host: apiHost,\n    capture_pageview: false,\n  });\n};\n\nexport const enableDebugMode = () => {\n  posthog.debug();\n};\n\nexport const disableDebugMode = () => {\n  posthog.debug(false);\n};\n\nexport const identify = ({\n  userId,\n  accountId,\n  organisationId,\n  email,\n  name,\n}: InsightsIdentity) => {\n  // In very rare cases we might have a user without an account, so we'll\n  // let null/undefined/blank strings through on that one\n  if (!userId) {\n    return;\n  }\n\n  if (userId !== posthog.get_distinct_id()) {\n    posthog.identify(userId, { email, name });\n  }\n\n  // Associate all events in this session with this account\n  if (accountId) {\n    posthog.group(\"account\", accountId);\n  }\n\n  // Associate all events in this session with this organisation (if available)\n  if (organisationId) {\n    posthog.group(\"organisation\", organisationId);\n  }\n};\n\nexport const trackPageView = () => {\n  posthog.capture(\"$pageview\");\n};\n\nexport const track = (event: string, properties?: Record<string, unknown>) => {\n  posthog.capture(event, properties);\n};\n"],"names":["posthog","initPosthog","apiKey","apiHost","init","api_host","capture_pageview","enableDebugMode","debug","disableDebugMode","identify","userId","accountId","organisationId","email","name","get_distinct_id","group","trackPageView","capture","track","event","properties"],"mappings":"AAAA,OAAOA,YAAa,YAAa,AAIjC,QAAO,MAAMC,YAAc,CAACC,OAAgBC,WAC1CH,QAAQI,IAAI,CAACF,OAAQ,CACnBG,SAAUF,QACVG,iBAAkB,KACpB,EACF,CAAE,AAEF,QAAO,MAAMC,gBAAkB,KAC7BP,QAAQQ,KAAK,EACf,CAAE,AAEF,QAAO,MAAMC,iBAAmB,KAC9BT,QAAQQ,KAAK,CAAC,MAChB,CAAE,AAEF,QAAO,MAAME,SAAW,CAAC,CACvBC,MAAM,CACNC,SAAS,CACTC,cAAc,CACdC,KAAK,CACLC,IAAI,CACa,IAGjB,GAAI,CAACJ,OAAQ,CACX,MACF,CAEA,GAAIA,SAAWX,QAAQgB,eAAe,GAAI,CACxChB,QAAQU,QAAQ,CAACC,OAAQ,CAAEG,MAAOC,IAAK,EACzC,CAGA,GAAIH,UAAW,CACbZ,QAAQiB,KAAK,CAAC,UAAWL,UAC3B,CAGA,GAAIC,eAAgB,CAClBb,QAAQiB,KAAK,CAAC,eAAgBJ,eAChC,CACF,CAAE,AAEF,QAAO,MAAMK,cAAgB,KAC3BlB,QAAQmB,OAAO,CAAC,YAClB,CAAE,AAEF,QAAO,MAAMC,MAAQ,CAACC,MAAeC,cACnCtB,QAAQmB,OAAO,CAACE,MAAOC,WACzB,CAAE"}

package/core/insights/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/insights/types.ts"],"sourcesContent":["export type InsightsConfig = {\n  debug: boolean;\n  mixpanelToken: string;\n  mixpanelAutoCapture: boolean;\n  mixpanelRecordSessionsPercent: number;\n  posthogApiKey: string;\n  posthogApiHost: string;\n};\n\n// Define the interface for our analytics service\nexport interface AnalyticsService {\n  initInsights: (config: InsightsConfig) => void;\n  enableDebugMode: () => void;\n  disableDebugMode: () => void;\n  identify: (identity: InsightsIdentity) => void;\n  trackPageView: () => void;\n  track: (event: string, properties?: Record<string, unknown>) => void;\n  startSessionRecording: () => void;\n  stopSessionRecording: () => void;\n  setupObserver: () => () => void;\n}\n\n// Command type for our queue\nexport type Command = {\n  methodName: keyof AnalyticsService;\n  args: unknown[];\n};\n\nexport type InsightsIdentity = {\n  userId: string;\n  accountId: string;\n  organisationId?: string;\n  email?: string;\n  name?: string;\n};\n"],"names":[],"mappings":"AA4BA,QAME"}
+{"version":3,"sources":["../../../src/core/insights/types.ts"],"sourcesContent":["export type InsightsIdentity = {\n  userId: string;\n  accountId: string;\n  organisationId?: string;\n  email?: string;\n  name?: string;\n};\n"],"names":[],"mappings":"AAAA,QAME"}

package/index.d.ts

@@ -475,9 +475,9 @@ type FlyoutProps = {
      */
     menuItems: {
         /**
-         * Label for the menu item.
+         * Name for the menu item.
          */
-        label: string;
+        name: string;
         /**
          * Optional content to be displayed in the flyout panel.
          */
@@ -537,9 +537,7 @@ export default Footer;
 declare module '@ably/ui/core/Header/HeaderLinks' {
 import React from "react";
 import { HeaderProps } from ".@ably/ui/core/Header";
-export const HeaderLinks: React.FC<Pick<HeaderProps, "sessionState" | "headerLinks" | "searchButtonVisibility" | "searchButton"> & {
-    className?: string;
-}>;
+export const HeaderLinks: React.FC<Pick<HeaderProps, "sessionState" | "headerLinks" | "searchButtonVisibility" | "searchButton" | "className">>;
 //# sourceMappingURL=HeaderLinks.d.ts.map
 }
 
@@ -579,6 +577,10 @@ export type HeaderSessionState = {
  * Props for the Header component.
  */
 export type HeaderProps = {
+    /**
+     * Optional classnames to add to the header
+     */
+    className?: string;
     /**
      * Optional search bar element.
      */
@@ -683,60 +685,9 @@ export default Icon;
 //# sourceMappingURL=Icon.d.ts.map
 }
 
-declare module '@ably/ui/core/LinkButton' {
-import React from "react";
-import { ButtonPropsBase } from "@ably/ui/core/Button";
-import { ColorClass, ColorThemeSet } from "@ably/ui/core/styles/colors/types";
-export type LinkButtonProps = ButtonPropsBase & {
-    disabled?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
-    iconColor?: ColorClass | ColorThemeSet;
-} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
-const LinkButton: React.FC<LinkButtonProps>;
-export default LinkButton;
-//# sourceMappingURL=LinkButton.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;
-    logoAlt?: string;
-    href?: string;
-    additionalImgAttrs?: object;
-    additionalLinkAttrs?: object;
-    theme?: "light" | "dark";
-    variant?: "default" | "mono";
-    orientation?: "default" | "stacked";
-};
-const _default: React.MemoExoticComponent<({ dataId, href, additionalImgAttrs, additionalLinkAttrs, theme, variant, orientation, logoUrl, logoAlt, }: 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' {
+declare module '@ably/ui/core/LegacyMeganav/LegacyMeganav' {
 import { ReactNode } from "react";
-import { ColorClass } from "@ably/ui/core/styles/colors/types";
+import { ColorClass } from ".@ably/ui/core/styles/colors/types";
 export type MeganavTheme = {
     backgroundColor?: ColorClass;
     textColor?: ColorClass;
@@ -814,13 +765,13 @@ type MeganavProps = {
     statusUrl: string;
     searchDataId?: string;
 };
-const Meganav: ({ paths, themeName, notice, loginLink, urlBase, addSearchApiKey, statusUrl, searchDataId, }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
-export default Meganav;
-//# sourceMappingURL=Meganav.d.ts.map
+const LegacyMeganav: ({ paths, themeName, notice, loginLink, urlBase, addSearchApiKey, statusUrl, searchDataId, }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
+export default LegacyMeganav;
+//# sourceMappingURL=LegacyMeganav.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavBlogPostsList' {
-import { AbsUrl } from "@ably/ui/core/Meganav";
+declare module '@ably/ui/core/LegacyMeganav/MeganavBlogPostsList' {
+import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
 type MeganavBlogPostsListProps = {
     recentBlogPosts: {
         link: string;
@@ -834,8 +785,8 @@ export default MeganavBlogPostsList;
 //# sourceMappingURL=MeganavBlogPostsList.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavContentCompany' {
-import { AbsUrl, MeganavPaths } from "@ably/ui/core/Meganav";
+declare module '@ably/ui/core/LegacyMeganav/MeganavContentCompany' {
+import { AbsUrl, MeganavPaths } from "@ably/ui/core/LegacyMeganav";
 type MeganavContentCompanyProps = {
     absUrl: AbsUrl;
     paths?: MeganavPaths;
@@ -845,8 +796,8 @@ export default MeganavContentCompany;
 //# sourceMappingURL=MeganavContentCompany.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavContentDevelopers' {
-import { AbsUrl } from "@ably/ui/core/Meganav";
+declare module '@ably/ui/core/LegacyMeganav/MeganavContentDevelopers' {
+import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
 const MeganavContentDevelopers: ({ absUrl, statusUrl, }: {
     absUrl: AbsUrl;
     statusUrl: string;
@@ -855,8 +806,8 @@ export default MeganavContentDevelopers;
 //# sourceMappingURL=MeganavContentDevelopers.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavContentProducts' {
-import { AbsUrl, MeganavPaths } from "@ably/ui/core/Meganav";
+declare module '@ably/ui/core/LegacyMeganav/MeganavContentProducts' {
+import { AbsUrl, MeganavPaths } from "@ably/ui/core/LegacyMeganav";
 type MeganavContentProductsProps = {
     paths?: MeganavPaths;
     absUrl: AbsUrl;
@@ -866,8 +817,8 @@ export default MeganavContentProducts;
 //# sourceMappingURL=MeganavContentProducts.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavContentUseCases' {
-import { AbsUrl } from "@ably/ui/core/Meganav";
+declare module '@ably/ui/core/LegacyMeganav/MeganavContentUseCases' {
+import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
 const MeganavContentUseCases: ({ absUrl }: {
     absUrl: AbsUrl;
 }) => import("react/jsx-runtime").JSX.Element;
@@ -875,7 +826,7 @@ export default MeganavContentUseCases;
 //# sourceMappingURL=MeganavContentUseCases.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavControl/component' {
+declare module '@ably/ui/core/LegacyMeganav/MeganavControl/component' {
 export default MeganavControl;
 function MeganavControl(): {
     teardown: () => void;
@@ -884,9 +835,9 @@ function MeganavControl(): {
 //# sourceMappingURL=component.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavControl' {
+declare module '@ably/ui/core/LegacyMeganav/MeganavControl' {
 import { ReactNode } from "react";
-import { MeganavTheme } from "@ably/ui/core/Meganav";
+import { MeganavTheme } from "@ably/ui/core/LegacyMeganav";
 type MeganavControlProps = {
     ariaControls: string;
     ariaLabel: string;
@@ -899,7 +850,7 @@ export default MeganavControl;
 //# sourceMappingURL=MeganavControl.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavControlMobileDropdown/component' {
+declare module '@ably/ui/core/LegacyMeganav/MeganavControlMobileDropdown/component' {
 export default MeganavControlMobileDropdown;
 function MeganavControlMobileDropdown({ clearPanels }: {
     clearPanels: any;
@@ -910,8 +861,8 @@ function MeganavControlMobileDropdown({ clearPanels }: {
 //# sourceMappingURL=component.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavControlMobileDropdown' {
-import { MeganavTheme } from "@ably/ui/core/Meganav";
+declare module '@ably/ui/core/LegacyMeganav/MeganavControlMobileDropdown' {
+import { MeganavTheme } from "@ably/ui/core/LegacyMeganav";
 const MeganavControlMobileDropdown: ({ theme }: {
     theme: MeganavTheme;
 }) => import("react/jsx-runtime").JSX.Element;
@@ -919,7 +870,7 @@ export default MeganavControlMobileDropdown;
 //# sourceMappingURL=MeganavControlMobileDropdown.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavControlMobilePanelClose/component' {
+declare module '@ably/ui/core/LegacyMeganav/MeganavControlMobilePanelClose/component' {
 function _default(): {
     teardown: () => void;
     clear: () => void;
@@ -928,7 +879,7 @@ export default _default;
 //# sourceMappingURL=component.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavControlMobilePanelClose' {
+declare module '@ably/ui/core/LegacyMeganav/MeganavControlMobilePanelClose' {
 type MeganavControlMobilePanelCloseProps = {
     ariaControls: string;
     displayHr?: boolean;
@@ -938,7 +889,7 @@ export default MeganavControlMobilePanelClose;
 //# sourceMappingURL=MeganavControlMobilePanelClose.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavControlMobilePanelOpen/component' {
+declare module '@ably/ui/core/LegacyMeganav/MeganavControlMobilePanelOpen/component' {
 function _default(): {
     teardown: () => void;
     clear: () => void;
@@ -947,7 +898,7 @@ export default _default;
 //# sourceMappingURL=component.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavControlMobilePanelOpen' {
+declare module '@ably/ui/core/LegacyMeganav/MeganavControlMobilePanelOpen' {
 import { ReactNode } from "react";
 type MeganavControlMobilePanelOpenProps = {
     ariaControls: string;
@@ -958,9 +909,9 @@ export default MeganavControlMobilePanelOpen;
 //# sourceMappingURL=MeganavControlMobilePanelOpen.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavItemsDesktop' {
+declare module '@ably/ui/core/LegacyMeganav/MeganavItemsDesktop' {
 import React from "react";
-import { AbsUrl, MeganavPanels, MeganavPaths, MeganavTheme } from "@ably/ui/core/Meganav";
+import { AbsUrl, MeganavPanels, MeganavPaths, MeganavTheme } from "@ably/ui/core/LegacyMeganav";
 type MeganavDesktopItems = {
     panels: MeganavPanels;
     paths?: MeganavPaths;
@@ -974,9 +925,9 @@ export default _default;
 //# sourceMappingURL=MeganavItemsDesktop.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavItemsMobile' {
+declare module '@ably/ui/core/LegacyMeganav/MeganavItemsMobile' {
 import React from "react";
-import { AbsUrl, MeganavPanels, MeganavPaths, MeganavSessionState, MeganavTheme } from "@ably/ui/core/Meganav";
+import { AbsUrl, MeganavPanels, MeganavPaths, MeganavSessionState, MeganavTheme } from "@ably/ui/core/LegacyMeganav";
 type MeganavItemsMobileProps = {
     panels: MeganavPanels;
     paths?: MeganavPaths;
@@ -992,8 +943,8 @@ export default _default;
 //# sourceMappingURL=MeganavItemsMobile.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavItemsSignedIn' {
-import { AbsUrl, MeganavSessionState, MeganavTheme } from "@ably/ui/core/Meganav";
+declare module '@ably/ui/core/LegacyMeganav/MeganavItemsSignedIn' {
+import { AbsUrl, MeganavSessionState, MeganavTheme } from "@ably/ui/core/LegacyMeganav";
 type MeganavItemsSignedIn = {
     sessionState: MeganavSessionState;
     theme: MeganavTheme;
@@ -1005,8 +956,8 @@ export default MeganavItemsSignedIn;
 //# sourceMappingURL=MeganavItemsSignedIn.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavSearch' {
-import { AbsUrl } from "@ably/ui/core/Meganav";
+declare module '@ably/ui/core/LegacyMeganav/MeganavSearch' {
+import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
 const MeganavSearch: ({ absUrl, dataId, }: {
     absUrl: AbsUrl;
     dataId?: string;
@@ -1015,7 +966,7 @@ export default MeganavSearch;
 //# sourceMappingURL=MeganavSearch.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavSearchAutocomplete/component' {
+declare module '@ably/ui/core/LegacyMeganav/MeganavSearchAutocomplete/component' {
 function _default(apiKey: any): {
     teardown: () => void;
     clear: () => void;
@@ -1024,14 +975,14 @@ export default _default;
 //# sourceMappingURL=component.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavSearchAutocomplete' {
+declare module '@ably/ui/core/LegacyMeganav/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";
+declare module '@ably/ui/core/LegacyMeganav/MeganavSearchPanel' {
+import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
 const MeganavSearchPanel: ({ absUrl }: {
     absUrl: AbsUrl;
 }) => import("react/jsx-runtime").JSX.Element;
@@ -1039,7 +990,7 @@ export default MeganavSearchPanel;
 //# sourceMappingURL=MeganavSearchPanel.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavSearchSuggestions/component' {
+declare module '@ably/ui/core/LegacyMeganav/MeganavSearchSuggestions/component' {
 export default MeganavSearchSuggestions;
 function MeganavSearchSuggestions(): {
     teardown: () => void;
@@ -1048,8 +999,8 @@ function MeganavSearchSuggestions(): {
 //# sourceMappingURL=component.d.ts.map
 }
 
-declare module '@ably/ui/core/MeganavSearchSuggestions' {
-import { AbsUrl } from "@ably/ui/core/Meganav";
+declare module '@ably/ui/core/LegacyMeganav/MeganavSearchSuggestions' {
+import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
 type MeganavSearchSuggestionsProps = {
     absUrl: AbsUrl;
     displaySupportLink: boolean;
@@ -1059,7 +1010,160 @@ export default MeganavSearchSuggestions;
 //# sourceMappingURL=MeganavSearchSuggestions.d.ts.map
 }
 
+declare module '@ably/ui/core/LegacyMeganav/SignOutLink' {
+import { MouseEventHandler, ReactNode } from "react";
+import { AbsUrl } from "@ably/ui/core/LegacyMeganav";
+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/LegacyMeganav/component' {
+export default function Meganav({ themeName, addSearchApiKey }: {
+    themeName: any;
+    addSearchApiKey: any;
+}): () => void;
+//# sourceMappingURL=component.d.ts.map
+}
+
+declare module '@ably/ui/core/LinkButton' {
+import React from "react";
+import { ButtonPropsBase } from "@ably/ui/core/Button";
+import { ColorClass, ColorThemeSet } from "@ably/ui/core/styles/colors/types";
+export type LinkButtonProps = ButtonPropsBase & {
+    disabled?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    iconColor?: ColorClass | ColorThemeSet;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+const LinkButton: React.FC<LinkButtonProps>;
+export default LinkButton;
+//# sourceMappingURL=LinkButton.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;
+    logoAlt?: string;
+    href?: string;
+    additionalImgAttrs?: object;
+    additionalLinkAttrs?: object;
+    theme?: "light" | "dark";
+    variant?: "default" | "mono";
+    orientation?: "default" | "stacked";
+};
+const _default: React.MemoExoticComponent<({ dataId, href, additionalImgAttrs, additionalLinkAttrs, theme, variant, orientation, logoUrl, logoAlt, }: LogoProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;
+//# sourceMappingURL=Logo.d.ts.map
+}
+
+declare module '@ably/ui/core/Meganav/MeganavMobile' {
+import { AccordionData } from ".@ably/ui/core/Accordion/types";
+export const MeganavMobile: ({ mobileNavItems, }: {
+    mobileNavItems: AccordionData[];
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MeganavMobile.d.ts.map
+}
+
+declare module '@ably/ui/core/Meganav/MeganavPanel' {
+import React from "react";
+import { FlyoutPanelHighlight, FlyoutPanelList } from "@ably/ui/core/data";
+export const MeganavPanel: ({ displayProductTile, panelLeft, panelLeftClassName, panelRightHeading, panelRightItems, panelRightBottom, }: {
+    displayProductTile?: boolean;
+    panelLeft?: FlyoutPanelHighlight;
+    panelLeftClassName?: string;
+    panelRightHeading?: string;
+    panelRightItems: FlyoutPanelList[];
+    panelRightBottom?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MeganavPanel.d.ts.map
+}
+
+declare module '@ably/ui/core/Meganav/data' {
+import React from "react";
+import { IconName } from ".@ably/ui/core/Icon/types";
+export type FlyoutPanelList = {
+    label: string;
+    icon: IconName;
+    link: string;
+    isMobile?: boolean;
+};
+export type FlyoutPanelHighlight = {
+    heading: string;
+    content: string;
+    labelLink: string;
+    url: string;
+    image: string;
+};
+export type MenuItem = {
+    name: string;
+    link?: string;
+    isHiddenMobile?: boolean;
+    content?: React.ReactNode;
+    panelClassName?: string;
+};
+export const menuItemLinks: {
+    name: string;
+    link: string;
+    isHiddenMobile: boolean;
+}[];
+export const menuItemsForHeader: MenuItem[];
+//# sourceMappingURL=data.d.ts.map
+}
+
+declare module '@ably/ui/core/Meganav' {
+import { HeaderSessionState } from "@ably/ui/core/Header";
+export type MeganavNoticeBannerProps = {
+    props: {
+        title: string;
+        bodyText: string;
+        buttonLink: string;
+        buttonLabel: string;
+        closeBtn: boolean;
+    };
+    config: {
+        cookieId: string;
+        noticeId: string | number;
+        options: {
+            collapse: boolean;
+        };
+    };
+};
+export type MeganavProps = {
+    sessionState: HeaderSessionState;
+    searchDataId: string;
+    notice?: MeganavNoticeBannerProps;
+};
+const Meganav: ({ sessionState, searchDataId, notice }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
+export default Meganav;
+//# sourceMappingURL=Meganav.d.ts.map
+}
+
 declare module '@ably/ui/core/Notice/component' {
+export const COLLAPSE_TRIGGER_DISTANCE: 5;
 export default Notice;
 function Notice({ bannerContainer, cookieId, noticeId, options }: {
     bannerContainer: any;
@@ -1274,25 +1378,6 @@ export default ProductTile;
 //# sourceMappingURL=ProductTile.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 {