@ably/ui 17.10.0 → 17.10.1-dev.26bd7a31

package/index.d.ts

@@ -2105,6 +2105,28 @@ export default ForwardRef;
 //# sourceMappingURL=icon-gui-glasses.d.ts.map
 }
 
+declare module '@ably/ui/core/Icon/components/icon-gui-heartbeat-outline' {
+import * as React from "react";
+interface SVGRProps {
+    title?: string;
+    titleId?: string;
+}
+const ForwardRef: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default ForwardRef;
+//# sourceMappingURL=icon-gui-heartbeat-outline.d.ts.map
+}
+
+declare module '@ably/ui/core/Icon/components/icon-gui-heartbeat-solid' {
+import * as React from "react";
+interface SVGRProps {
+    title?: string;
+    titleId?: string;
+}
+const ForwardRef: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default ForwardRef;
+//# sourceMappingURL=icon-gui-heartbeat-solid.d.ts.map
+}
+
 declare module '@ably/ui/core/Icon/components/icon-gui-history' {
 import * as React from "react";
 interface SVGRProps {
@@ -2369,6 +2391,17 @@ export default ForwardRef;
 //# sourceMappingURL=icon-gui-spinner-light.d.ts.map
 }
 
+declare module '@ably/ui/core/Icon/components/icon-gui-square-3-stack-3d' {
+import * as React from "react";
+interface SVGRProps {
+    title?: string;
+    titleId?: string;
+}
+const ForwardRef: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default ForwardRef;
+//# sourceMappingURL=icon-gui-square-3-stack-3d.d.ts.map
+}
+
 declare module '@ably/ui/core/Icon/components/icon-product-ai-transport-mono' {
 import * as React from "react";
 interface SVGRProps {
@@ -5011,6 +5044,8 @@ import IconGuiFilterFlowStep3 from "@ably/ui/core/icon-gui-filter-flow-step-3";
 import IconGuiFlowerGrowth from "@ably/ui/core/icon-gui-flower-growth";
 import IconGuiFurtherReading from "@ably/ui/core/icon-gui-further-reading";
 import IconGuiGlasses from "@ably/ui/core/icon-gui-glasses";
+import IconGuiHeartbeatOutline from "@ably/ui/core/icon-gui-heartbeat-outline";
+import IconGuiHeartbeatSolid from "@ably/ui/core/icon-gui-heartbeat-solid";
 import IconGuiHistory from "@ably/ui/core/icon-gui-history";
 import IconGuiLiveChat from "@ably/ui/core/icon-gui-live-chat";
 import IconGuiMouse from "@ably/ui/core/icon-gui-mouse";
@@ -5035,7 +5070,7 @@ import IconGuiRefresh from "@ably/ui/core/icon-gui-refresh";
 import IconGuiResources from "@ably/ui/core/icon-gui-resources";
 import IconGuiSpinnerDark from "@ably/ui/core/icon-gui-spinner-dark";
 import IconGuiSpinnerLight from "@ably/ui/core/icon-gui-spinner-light";
-export { IconGuiAblyBadge, IconGuiCheckCircledFill, IconGuiCheckLotusCircled, IconGuiChecklistChecked, IconGuiCodeDoc, IconGuiCursor, IconGuiExpand, IconGuiFilterFlowStep0, IconGuiFilterFlowStep1, IconGuiFilterFlowStep2, IconGuiFilterFlowStep3, IconGuiFlowerGrowth, IconGuiFurtherReading, IconGuiGlasses, IconGuiHistory, IconGuiLiveChat, IconGuiMouse, IconGuiPartial, IconGuiPitfall, IconGuiProdAiTransportOutline, IconGuiProdAiTransportSolid, IconGuiProdAssetTrackingOutline, IconGuiProdAssetTrackingSolid, IconGuiProdChatOutline, IconGuiProdChatSolid, IconGuiProdLiveobjectsOutline, IconGuiProdLiveobjectsSolid, IconGuiProdLivesyncOutline, IconGuiProdLivesyncSolid, IconGuiProdPubsubOutline, IconGuiProdPubsubSolid, IconGuiProdSpacesOutline, IconGuiProdSpacesSolid, IconGuiQuoteMarksFill, IconGuiRefresh, IconGuiResources, IconGuiSpinnerDark, IconGuiSpinnerLight, };
+export { IconGuiAblyBadge, IconGuiCheckCircledFill, IconGuiCheckLotusCircled, IconGuiChecklistChecked, IconGuiCodeDoc, IconGuiCursor, IconGuiExpand, IconGuiFilterFlowStep0, IconGuiFilterFlowStep1, IconGuiFilterFlowStep2, IconGuiFilterFlowStep3, IconGuiFlowerGrowth, IconGuiFurtherReading, IconGuiGlasses, IconGuiHeartbeatOutline, IconGuiHeartbeatSolid, IconGuiHistory, IconGuiLiveChat, IconGuiMouse, IconGuiPartial, IconGuiPitfall, IconGuiProdAiTransportOutline, IconGuiProdAiTransportSolid, IconGuiProdAssetTrackingOutline, IconGuiProdAssetTrackingSolid, IconGuiProdChatOutline, IconGuiProdChatSolid, IconGuiProdLiveobjectsOutline, IconGuiProdLiveobjectsSolid, IconGuiProdLivesyncOutline, IconGuiProdLivesyncSolid, IconGuiProdPubsubOutline, IconGuiProdPubsubSolid, IconGuiProdSpacesOutline, IconGuiProdSpacesSolid, IconGuiQuoteMarksFill, IconGuiRefresh, IconGuiResources, IconGuiSpinnerDark, IconGuiSpinnerLight, };
 import IconProductAiTransportMono from "@ably/ui/core/icon-product-ai-transport-mono";
 import IconProductAiTransport from "@ably/ui/core/icon-product-ai-transport";
 import IconProductAssetTrackingMono from "@ably/ui/core/icon-product-asset-tracking-mono";
@@ -5278,7 +5313,7 @@ export const displayIcons: readonly ["icon-display-48hrs", "icon-display-ably-ch
 }
 
 declare module '@ably/ui/core/Icon/computed-icons/gui-icons' {
-export const guiIcons: readonly ["icon-gui-ably-badge", "icon-gui-check-circled-fill", "icon-gui-check-lotus-circled", "icon-gui-checklist-checked", "icon-gui-code-doc", "icon-gui-cursor", "icon-gui-expand", "icon-gui-filter-flow-step-0", "icon-gui-filter-flow-step-1", "icon-gui-filter-flow-step-2", "icon-gui-filter-flow-step-3", "icon-gui-flower-growth", "icon-gui-further-reading", "icon-gui-glasses", "icon-gui-history", "icon-gui-live-chat", "icon-gui-mouse", "icon-gui-partial", "icon-gui-pitfall", "icon-gui-prod-ai-transport-outline", "icon-gui-prod-ai-transport-solid", "icon-gui-prod-asset-tracking-outline", "icon-gui-prod-asset-tracking-solid", "icon-gui-prod-chat-outline", "icon-gui-prod-chat-solid", "icon-gui-prod-liveobjects-outline", "icon-gui-prod-liveobjects-solid", "icon-gui-prod-livesync-outline", "icon-gui-prod-livesync-solid", "icon-gui-prod-pubsub-outline", "icon-gui-prod-pubsub-solid", "icon-gui-prod-spaces-outline", "icon-gui-prod-spaces-solid", "icon-gui-quote-marks-fill", "icon-gui-refresh", "icon-gui-resources", "icon-gui-spinner-dark", "icon-gui-spinner-light"];
+export const guiIcons: readonly ["icon-gui-ably-badge", "icon-gui-check-circled-fill", "icon-gui-check-lotus-circled", "icon-gui-checklist-checked", "icon-gui-code-doc", "icon-gui-cursor", "icon-gui-expand", "icon-gui-filter-flow-step-0", "icon-gui-filter-flow-step-1", "icon-gui-filter-flow-step-2", "icon-gui-filter-flow-step-3", "icon-gui-flower-growth", "icon-gui-further-reading", "icon-gui-glasses", "icon-gui-heartbeat-outline", "icon-gui-heartbeat-solid", "icon-gui-history", "icon-gui-live-chat", "icon-gui-mouse", "icon-gui-partial", "icon-gui-pitfall", "icon-gui-prod-ai-transport-outline", "icon-gui-prod-ai-transport-solid", "icon-gui-prod-asset-tracking-outline", "icon-gui-prod-asset-tracking-solid", "icon-gui-prod-chat-outline", "icon-gui-prod-chat-solid", "icon-gui-prod-liveobjects-outline", "icon-gui-prod-liveobjects-solid", "icon-gui-prod-livesync-outline", "icon-gui-prod-livesync-solid", "icon-gui-prod-pubsub-outline", "icon-gui-prod-pubsub-solid", "icon-gui-prod-spaces-outline", "icon-gui-prod-spaces-solid", "icon-gui-quote-marks-fill", "icon-gui-refresh", "icon-gui-resources", "icon-gui-spinner-dark", "icon-gui-spinner-light"];
 //# sourceMappingURL=gui-icons.d.ts.map
 }
 
@@ -5299,7 +5334,7 @@ export const techIcons: readonly ["icon-tech-ably", "icon-tech-ably-api-streamer
 
 declare module '@ably/ui/core/Icon/types' {
 export const iconNames: {
-    gui: readonly ["icon-gui-ably-badge", "icon-gui-check-circled-fill", "icon-gui-check-lotus-circled", "icon-gui-checklist-checked", "icon-gui-code-doc", "icon-gui-cursor", "icon-gui-expand", "icon-gui-filter-flow-step-0", "icon-gui-filter-flow-step-1", "icon-gui-filter-flow-step-2", "icon-gui-filter-flow-step-3", "icon-gui-flower-growth", "icon-gui-further-reading", "icon-gui-glasses", "icon-gui-history", "icon-gui-live-chat", "icon-gui-mouse", "icon-gui-partial", "icon-gui-pitfall", "icon-gui-prod-ai-transport-outline", "icon-gui-prod-ai-transport-solid", "icon-gui-prod-asset-tracking-outline", "icon-gui-prod-asset-tracking-solid", "icon-gui-prod-chat-outline", "icon-gui-prod-chat-solid", "icon-gui-prod-liveobjects-outline", "icon-gui-prod-liveobjects-solid", "icon-gui-prod-livesync-outline", "icon-gui-prod-livesync-solid", "icon-gui-prod-pubsub-outline", "icon-gui-prod-pubsub-solid", "icon-gui-prod-spaces-outline", "icon-gui-prod-spaces-solid", "icon-gui-quote-marks-fill", "icon-gui-refresh", "icon-gui-resources", "icon-gui-spinner-dark", "icon-gui-spinner-light"];
+    gui: readonly ["icon-gui-ably-badge", "icon-gui-check-circled-fill", "icon-gui-check-lotus-circled", "icon-gui-checklist-checked", "icon-gui-code-doc", "icon-gui-cursor", "icon-gui-expand", "icon-gui-filter-flow-step-0", "icon-gui-filter-flow-step-1", "icon-gui-filter-flow-step-2", "icon-gui-filter-flow-step-3", "icon-gui-flower-growth", "icon-gui-further-reading", "icon-gui-glasses", "icon-gui-heartbeat-outline", "icon-gui-heartbeat-solid", "icon-gui-history", "icon-gui-live-chat", "icon-gui-mouse", "icon-gui-partial", "icon-gui-pitfall", "icon-gui-prod-ai-transport-outline", "icon-gui-prod-ai-transport-solid", "icon-gui-prod-asset-tracking-outline", "icon-gui-prod-asset-tracking-solid", "icon-gui-prod-chat-outline", "icon-gui-prod-chat-solid", "icon-gui-prod-liveobjects-outline", "icon-gui-prod-liveobjects-solid", "icon-gui-prod-livesync-outline", "icon-gui-prod-livesync-solid", "icon-gui-prod-pubsub-outline", "icon-gui-prod-pubsub-solid", "icon-gui-prod-spaces-outline", "icon-gui-prod-spaces-solid", "icon-gui-quote-marks-fill", "icon-gui-refresh", "icon-gui-resources", "icon-gui-spinner-dark", "icon-gui-spinner-light"];
     display: readonly ["icon-display-48hrs", "icon-display-ably-channels", "icon-display-about-ably-col", "icon-display-api", "icon-display-api-keys", "icon-display-architectural-guidance", "icon-display-asset-tracking-col", "icon-display-authentication", "icon-display-avatar-stack", "icon-display-browser", "icon-display-calendar", "icon-display-call-mobile", "icon-display-careers-col", "icon-display-case-studies-col", "icon-display-chat-col", "icon-display-chat-mono", "icon-display-chat-stack", "icon-display-chat-stack-col", "icon-display-cloud-servers", "icon-display-compare-tech-col", "icon-display-connection-state-recovery", "icon-display-consumer-groups", "icon-display-custom", "icon-display-custom-cname", "icon-display-customers-col", "icon-display-data-broadcast-col", "icon-display-data-broadcast-mono", "icon-display-data-synchronization-col", "icon-display-dedicated-cluster", "icon-display-deltas", "icon-display-docs-col", "icon-display-documentation", "icon-display-dynamic-channel-groups", "icon-display-edge-network", "icon-display-elasticity", "icon-display-equalisers-mono", "icon-display-events-col", "icon-display-exactly-once-delivery", "icon-display-examples-col", "icon-display-fan-out", "icon-display-firehose", "icon-display-gdpr", "icon-display-general-comms", "icon-display-granular-permissions", "icon-display-hipaa", "icon-display-hipaa-mono", "icon-display-history", "icon-display-integrations", "icon-display-integrations-col", "icon-display-it-support-access", "icon-display-it-support-helpdesk", "icon-display-kafka-at-the-edge-col", "icon-display-laptop", "icon-display-last-seen", "icon-display-lightbulb-col", "icon-display-live-chat", "icon-display-live-updates-results-metrics-col", "icon-display-map-pin", "icon-display-message", "icon-display-message-batching", "icon-display-message-persistence", "icon-display-message-queues", "icon-display-multi-user-spaces-col", "icon-display-observe-analytics", "icon-display-padlock-closed", "icon-display-platform", "icon-display-play", "icon-display-premium-support", "icon-display-privacy-shield-framework", "icon-display-private-link", "icon-display-push-notifications", "icon-display-push-notifications-col", "icon-display-push-notifications-mono", "icon-display-quickstart-guides-col", "icon-display-reactions", "icon-display-read-receipts", "icon-display-resources-col", "icon-display-rewind", "icon-display-sdks-col", "icon-display-send-received-messages", "icon-display-servers", "icon-display-shopping-cart", "icon-display-sla", "icon-display-soc2-type2", "icon-display-soc2-type2-mono", "icon-display-something-else", "icon-display-something-else-mono", "icon-display-subscription-filters", "icon-display-support-chat-mono", "icon-display-system-metadata", "icon-display-tech-account-comms", "icon-display-tutorials-demos-col", "icon-display-ui", "icon-display-ui-mono", "icon-display-virtual-events", "icon-display-virtual-events-col"];
     social: readonly ["icon-social-discord", "icon-social-discord-mono", "icon-social-facebook", "icon-social-facebook-mono", "icon-social-github", "icon-social-github-mono", "icon-social-glassdoor", "icon-social-glassdoor-mono", "icon-social-google", "icon-social-google-mono", "icon-social-linkedin", "icon-social-linkedin-mono", "icon-social-slack", "icon-social-slack-mono", "icon-social-stackoverflow", "icon-social-stackoverflow-mono", "icon-social-twitter", "icon-social-twitter-mono", "icon-social-x", "icon-social-x-mono", "icon-social-youtube", "icon-social-youtube-mono"];
     tech: readonly ["icon-tech-ably", "icon-tech-ably-api-streamer", "icon-tech-ably-firehose", "icon-tech-ably-native", "icon-tech-activemq", "icon-tech-activitypub", "icon-tech-aerospike", "icon-tech-akka", "icon-tech-amazon-ec2", "icon-tech-amazon-event-bridge", "icon-tech-amqp091", "icon-tech-amqp10", "icon-tech-android-full", "icon-tech-android-head", "icon-tech-angular", "icon-tech-anycable", "icon-tech-apache-cassandra", "icon-tech-apache-cordova", "icon-tech-apache-kafka", "icon-tech-apache-spark", "icon-tech-apachepulsar", "icon-tech-apachestorm", "icon-tech-apns", "icon-tech-assemblyai", "icon-tech-atmosphere", "icon-tech-aws", "icon-tech-aws-app-sync", "icon-tech-aws-aurora", "icon-tech-aws-gateway-websockets", "icon-tech-aws-sns", "icon-tech-aws-sqs", "icon-tech-awsiot", "icon-tech-awskinesis", "icon-tech-awslambda", "icon-tech-awssqs", "icon-tech-azure-api", "icon-tech-azure-archive-api", "icon-tech-azure-bus", "icon-tech-azure-cosmos", "icon-tech-azure-event-hub", "icon-tech-azure-functions", "icon-tech-azure-search", "icon-tech-azure-static-web-app", "icon-tech-azure-static-web-apps", "icon-tech-azure-storage", "icon-tech-azure-web-pubsub", "icon-tech-azurefunctions", "icon-tech-azureservicebus", "icon-tech-azuresignalR", "icon-tech-bayeux", "icon-tech-c++", "icon-tech-centrifugo", "icon-tech-claude", "icon-tech-claude-mono", "icon-tech-client-side-frameworks", "icon-tech-clojure", "icon-tech-cloudflare-durable-objects", "icon-tech-cloudflareworkers", "icon-tech-cocoa", "icon-tech-confluent", "icon-tech-cord", "icon-tech-csharp", "icon-tech-curl", "icon-tech-customwebhooks", "icon-tech-datadog", "icon-tech-design-patterns", "icon-tech-devplatforms", "icon-tech-diffusion-data", "icon-tech-django", "icon-tech-engineio", "icon-tech-event-driven-servers", "icon-tech-fanout-io", "icon-tech-fast-api", "icon-tech-fauna", "icon-tech-featherjs", "icon-tech-firebase", "icon-tech-firebase-cloud-messaging", "icon-tech-flutter", "icon-tech-gcloudbigquery", "icon-tech-gclouddataflow", "icon-tech-gcloudfunctions", "icon-tech-gcloudpubsub", "icon-tech-go", "icon-tech-grpc", "icon-tech-hivemq", "icon-tech-http2", "icon-tech-http3", "icon-tech-httprest", "icon-tech-idempotency", "icon-tech-ifttt", "icon-tech-integrations", "icon-tech-ios", "icon-tech-ios-generic", "icon-tech-ipados", "icon-tech-ipfs", "icon-tech-ironmq", "icon-tech-java", "icon-tech-javascript", "icon-tech-jms", "icon-tech-json", "icon-tech-json-web-tokens", "icon-tech-kaazing", "icon-tech-kotlin", "icon-tech-ksql-db", "icon-tech-kubernetes", "icon-tech-laravel-broadcast", "icon-tech-laravel-echo", "icon-tech-lightstreamer", "icon-tech-liveblocks", "icon-tech-longpolling", "icon-tech-macos", "icon-tech-matrix", "icon-tech-meteor", "icon-tech-mongo-db", "icon-tech-mono", "icon-tech-mqtt", "icon-tech-mysql", "icon-tech-native-script", "icon-tech-net", "icon-tech-netlify", "icon-tech-nextjs", "icon-tech-nkn", "icon-tech-nodejs", "icon-tech-objectivec", "icon-tech-openai", "icon-tech-parse-server", "icon-tech-php", "icon-tech-planetscale", "icon-tech-postgres", "icon-tech-prisma", "icon-tech-programminglanguages", "icon-tech-protcol-adaptors", "icon-tech-protocols", "icon-tech-pub-sub", "icon-tech-pubnub", "icon-tech-push-technology", "icon-tech-pusher", "icon-tech-python", "icon-tech-quic", "icon-tech-rabbitMQ", "icon-tech-railsactioncable", "icon-tech-react", "icon-tech-react-app", "icon-tech-reactnative", "icon-tech-redis", "icon-tech-redpanda", "icon-tech-replicache", "icon-tech-rethinkdb", "icon-tech-rocketmq", "icon-tech-ruby", "icon-tech-scala", "icon-tech-scaledrone", "icon-tech-serversentevents", "icon-tech-serversideframeworks", "icon-tech-signalR", "icon-tech-snowflake", "icon-tech-socketio", "icon-tech-sockjs", "icon-tech-solace", "icon-tech-spring", "icon-tech-stomp", "icon-tech-streamdata-io", "icon-tech-streamr", "icon-tech-swift", "icon-tech-symfony", "icon-tech-symfony-mercure", "icon-tech-tcp-ip", "icon-tech-tenefit", "icon-tech-terraform", "icon-tech-terraform-outline", "icon-tech-tvos", "icon-tech-twilio", "icon-tech-typescript", "icon-tech-udp-protocol", "icon-tech-unity", "icon-tech-vercel", "icon-tech-vscode", "icon-tech-vuejs", "icon-tech-wamp", "icon-tech-watchos", "icon-tech-web", "icon-tech-web-push", "icon-tech-webhooks", "icon-tech-webrtc", "icon-tech-websockets", "icon-tech-websub", "icon-tech-xamarin", "icon-tech-xhr-streaming", "icon-tech-xmpp", "icon-tech-zapier", "icon-tech-zeromq"];
@@ -5384,6 +5419,40 @@ export default _default;
 //# sourceMappingURL=Logo.d.ts.map
 }
 
+declare module '@ably/ui/core/Meganav/MeganavBlog' {
+export type BlogPost = {
+    title: string;
+    link: string;
+    categories: string[];
+    pubDate: string;
+};
+export type MeganavBlogProps = {
+    title: string;
+    link: string;
+    posts: BlogPost[];
+};
+const MeganavBlog: ({ title, link, posts }: MeganavBlogProps) => import("react/jsx-runtime").JSX.Element;
+export default MeganavBlog;
+//# sourceMappingURL=MeganavBlog.d.ts.map
+}
+
+declare module '@ably/ui/core/Meganav/MeganavCustomerStories' {
+export type CustomerStoryHighlight = {
+    companyName: string;
+    companyDesc: string;
+    companyLink: string;
+    companyLogo: string;
+    companyLogoDark?: string;
+};
+const MeganavCustomerStories: ({ customerStoriesHighlight, title, link, }: {
+    customerStoriesHighlight: CustomerStoryHighlight;
+    title: string;
+    link: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MeganavCustomerStories;
+//# sourceMappingURL=MeganavCustomerStories.d.ts.map
+}
+
 declare module '@ably/ui/core/Meganav/MeganavMobile' {
 import { AccordionData } from ".@ably/ui/core/Accordion/types";
 export const MeganavMobile: ({ navItems }: {
@@ -5394,42 +5463,69 @@ export const MeganavMobile: ({ navItems }: {
 
 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, }: {
+import { FlyoutPanelList } from "@ably/ui/core/data";
+import { MeganavPanelItemLink } from "@ably/ui/core/MeganavPanelItemLinks";
+type MeganavPanelProps = {
     displayProductTile?: boolean;
-    panelLeft?: FlyoutPanelHighlight;
-    panelLeftClassName?: string;
-    panelRightHeading?: string;
-    panelRightItems: FlyoutPanelList[];
+    panelLeft?: React.ReactNode;
+    panelMiddleItems?: React.ReactNode;
+    panelRightItems?: MeganavPanelItemLink[];
     panelRightBottom?: React.ReactNode;
+};
+export const MeganavPanel: ({ displayProductTile, panelLeft, panelMiddleItems, panelRightItems, panelRightBottom, }: MeganavPanelProps) => import("react/jsx-runtime").JSX.Element;
+export const MeganavPanelFullwidth: ({ panelItems, }: {
+    panelItems: FlyoutPanelList[];
 }) => import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=MeganavPanel.d.ts.map
 }
 
-declare module '@ably/ui/core/Meganav/MeganavProductTile' {
-import { ProductTileProps } from ".@ably/ui/core/ProductTile";
-const MeganavProductTile: ({ name, productLink, showDescription, showLabel, size, animateIcons, }: ProductTileProps & {
-    productLink?: string;
-}) => import("react/jsx-runtime").JSX.Element;
-export default MeganavProductTile;
-//# sourceMappingURL=MeganavProductTile.d.ts.map
+declare module '@ably/ui/core/Meganav/MeganavPanelItemLinks' {
+import { IconName } from ".@ably/ui/core/Icon/types";
+import { FlyoutPanelList } from "@ably/ui/core/data";
+export type MeganavPanelItemLink = {
+    label?: string;
+    listItems: FlyoutPanelList[];
+    icon?: IconName;
+    link?: {
+        label: string;
+        link: string;
+    };
+};
+const MeganavPanelItemLinks: ({ label, listItems, link, }: MeganavPanelItemLink) => import("react/jsx-runtime").JSX.Element;
+export default MeganavPanelItemLinks;
+//# sourceMappingURL=MeganavPanelItemLinks.d.ts.map
+}
+
+declare module '@ably/ui/core/Meganav/MeganavTile' {
+import { ProductName } from ".@ably/ui/core/ProductTile/data";
+import { IconName } from ".@ably/ui/core/Icon/types";
+export type MeganavTileProps = {
+    link: string;
+    productName?: ProductName;
+    navLabel?: string;
+    navIcon?: IconName;
+    navDescription?: string;
+    animateIcons?: boolean;
+    showAblyText?: boolean;
+};
+const MeganavTile: ({ productName, navLabel, navIcon, navDescription, link, animateIcons, showAblyText, }: MeganavTileProps) => import("react/jsx-runtime").JSX.Element;
+export default MeganavTile;
+//# sourceMappingURL=MeganavTile.d.ts.map
 }
 
 declare module '@ably/ui/core/Meganav/data' {
 import React from "react";
 import { IconName } from ".@ably/ui/core/Icon/types";
+import { CustomerStoryHighlight } from "@ably/ui/core/MeganavCustomerStories";
+import { BlogPost } from "@ably/ui/core/MeganavBlog";
 export type FlyoutPanelList = {
     label: string;
-    icon: IconName;
+    icon?: IconName;
     link: string;
     isMobile?: boolean;
-};
-export type FlyoutPanelHighlight = {
-    heading: string;
-    content: string;
-    labelLink: string;
-    url: string;
-    image: string;
+    description?: string;
+    badge?: string;
 };
 export type MenuItem = {
     name: string;
@@ -5438,6 +5534,11 @@ export type MenuItem = {
     content?: React.ReactNode;
     panelClassName?: string;
 };
+export const productsMenu: FlyoutPanelList[];
+export const compareMenu: FlyoutPanelList[];
+export const solutionsMenu: FlyoutPanelList[];
+export const customerStoriesHighlight: CustomerStoryHighlight;
+export const companyMenu: FlyoutPanelList[];
 export const ablyAwards: {
     image: string;
     desc: string;
@@ -5447,7 +5548,7 @@ export const menuItemLinks: {
     link: string;
     isHiddenMobile: boolean;
 }[];
-export const menuItemsForHeader: MenuItem[];
+export const defaultBlogPosts: BlogPost[];
 export const productsForNav: {
     pubsub: {
         link: string;
@@ -5501,8 +5602,24 @@ export const productsForNav: {
 //# sourceMappingURL=data.d.ts.map
 }
 
+declare module '@ably/ui/core/Meganav/utils/getMenuItemsForHeader' {
+import { BlogPost } from ".@ably/ui/core/MeganavBlog";
+import { MenuItem } from ".@ably/ui/core/data";
+export const getMenuItemsForHeader: (blogPosts: BlogPost[]) => MenuItem[];
+//# sourceMappingURL=getMenuItemsForHeader.d.ts.map
+}
+
+declare module '@ably/ui/core/Meganav/utils' {
+export const PanelTitle: ({ title, link, }: {
+    title: string;
+    link?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=utils.d.ts.map
+}
+
 declare module '@ably/ui/core/Meganav' {
 import { HeaderSessionState, ThemedScrollpoint } from "@ably/ui/core/Header";
+import { BlogPost } from "@ably/ui/core/Meganav/MeganavBlog";
 export type MeganavNoticeBannerProps = {
     props: {
         title: string;
@@ -5521,12 +5638,13 @@ export type MeganavNoticeBannerProps = {
 };
 export type MeganavProps = {
     sessionState: HeaderSessionState;
+    blogPosts: BlogPost[];
     notice?: MeganavNoticeBannerProps;
     theme?: string;
     themedScrollpoints?: ThemedScrollpoint[];
     onNoticeClose?: () => void;
 };
-const Meganav: ({ sessionState, notice, theme, themedScrollpoints, onNoticeClose, }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
+const Meganav: ({ sessionState, notice, theme, themedScrollpoints, onNoticeClose, blogPosts, }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
 export default Meganav;
 //# sourceMappingURL=Meganav.d.ts.map
 }
@@ -5674,9 +5792,10 @@ type ProductLabelProps = {
     selected?: boolean;
     numericalSize: number;
     showLabel?: boolean;
+    showAblyText?: boolean;
     className?: string;
 };
-const ProductLabel: ({ label, unavailable, selected, numericalSize, showLabel, className, }: ProductLabelProps) => import("react/jsx-runtime").JSX.Element | null;
+const ProductLabel: ({ label, unavailable, selected, numericalSize, showLabel, showAblyText, className, }: ProductLabelProps) => import("react/jsx-runtime").JSX.Element | null;
 export default ProductLabel;
 //# sourceMappingURL=ProductLabel.d.ts.map
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "17.10.0",
+  "version": "17.10.1-dev.26bd7a31",
   "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",
@@ -12,9 +12,7 @@
     "reset",
     "tailwind.config.js",
     "tailwind.extend.js",
-    "index.d.ts",
-    "AGENTS.md",
-    "CLAUDE.md"
+    "index.d.ts"
   ],
   "types": "index.d.ts",
   "msw": {

package/AGENTS.md

@@ -1,197 +0,0 @@
-# Agent Development Guide
-
-This file is not necessarily for people, the intended audience is automated agents.
-
-## Other references
-
-Consider the content of `README.md` as well, it contains technical information
-used by contributors to this project, as well as consumers of this project
-
-## Consumers
-
-This project is intended to primarily be consumed by the Ably website, voltaire
-& docs projects. It is distributed via NPM as the `@ably/ui` package.
-
-## Build & Test Commands
-
-- `pnpm build` - Build the library (prebuild, icons, swc, tsc, cleanup)
-- `pnpm test` - Run all tests with Vitest
-- `pnpm test -- src/core/insights/index.test.ts` - Run a single test file
-- `pnpm lint` - Run ESLint on all files
-- `pnpm format:check` - Check formatting with Prettier
-- `pnpm format:write` - Auto-format all files with Prettier
-- `pnpm storybook` - Start Storybook dev server on port 6006
-- `pnpm start` - Start Vite dev server on port 5000
-
-## Code Style
-
-- **Language**: TypeScript with strict mode enabled
-- **React**: Use functional components with hooks; React 18.x
-- **Imports**: Default export for main component, named exports for types/utils
-- **Naming**: PascalCase for components/types, camelCase for functions/variables,
-  kebab-case for files
-- **Types**: Define prop types as `ComponentNameProps`, use `PropsWithChildren<T>`
-  when needed
-- **Styling**: Tailwind 3.4.
-- **Utility**: Use `cn()` from `./src/core/utils/cn` for className merging (clsx
-  & tailwind-merge)
-- **Formatting**: Prettier defaults (no config = defaults), 2-space indent
-- **Error Handling**: Wrap external service calls in try-catch, log with logger module
-- **Comments**: JSDoc for props, inline comments for complex logic
-
-Keep emojis in the code to a minimum, only introduce them if there is precedent
-in the file you're working on.
-
-Comments and commit messages should not include statements like "local tests pass",
-this is a given for how we work.
-
-## Development
-
-- Run `pnpm lint` & `pnpm format:write` on files after making changes, we lint
-  files in CI and don't want preventable failures. `pnpm lint:fix` should also
-  apply our formatting rules while trying to fix most things for you
-- Run tests with `pnpm test` after making file changes
-
-## Styling Guide
-
-### Color Palettes
-
-The design system uses semantic color palettes defined in `src/core/styles/properties.css`
-and configured for Tailwind in `tailwind.config.js`. Each palette has a different
-number of color values:
-
-- **Neutral**: 000, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300 (14 values)
-- **Orange**: 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100 (11 values)
-- **Yellow**: 100, 200, 300, 400, 500, 600, 700, 800, 900 (9 values)
-- **Green**: 100, 200, 300, 400, 500, 600, 700, 800, 900 (9 values)
-- **Blue**: 100, 200, 300, 400, 500, 600, 700, 800, 900 (9 values)
-- **Violet**: 100, 200, 300, 400, 500, 600, 700, 800, 900 (9 values)
-- **Pink**: 100, 200, 300, 400, 500, 600, 700, 800, 900 (9 values)
-
-### Interactive Element Styling Patterns
-
-When developing components with @ably/ui, **always** use Tailwind classes following
-these established patterns to ensure consistent interactive behavior across light
-and dark modes:
-
-#### Dark Mode Mirroring
-
-For any given color, add a dark mode class that mirrors it across the palette.
-Lower values (lighter colors) in light mode should map to higher values (darker
-colors) in dark mode, and vice versa.
-
-**Examples:**
-
-- `bg-neutral-100` pairs with `dark:bg-neutral-1200`
-- `bg-neutral-200` pairs with `dark:bg-neutral-1100`
-- `bg-neutral-1200` pairs with `dark:bg-neutral-100`
-- `text-neutral-1300` pairs with `dark:text-neutral-000`
-- `bg-orange-200` pairs with `dark:bg-orange-900` (orange has 11 values: 200 + 900 = 1100)
-- `bg-blue-300` pairs with `dark:bg-blue-700` (blue has 9 values: 300 + 700 = 1000)
-
-The sum of mirrored color numbers should equal the total palette range. Different
-palettes have different ranges, so calculate mirrors accordingly:
-
-- Neutral (000-1300): `light + dark = 1300`
-- Orange (100-1100): `light + dark = 1200`
-- Secondary colors (100-900): `light + dark = 1000`
-
-#### Hover States
-
-Use the **next color value** along the palette for hover states:
-
-- `bg-neutral-100` → `hover:bg-neutral-200`
-- `bg-neutral-200` → `hover:bg-neutral-300`
-- `bg-orange-600` → `hover:bg-orange-700`
-
-Apply this pattern to both light and dark mode classes:
-
-```
-bg-neutral-200 hover:bg-neutral-300
-dark:bg-neutral-1100 dark:hover:bg-neutral-1000
-```
-
-#### Active States
-
-Use **two color values** along the palette for active/pressed states:
-
-- `bg-neutral-100` → `active:bg-neutral-300`
-- `bg-neutral-200` → `active:bg-neutral-400`
-- `bg-orange-600` → `active:bg-orange-800`
-
-Apply to both modes:
-
-```
-bg-neutral-200 hover:bg-neutral-300 active:bg-neutral-400
-dark:bg-neutral-1100 dark:hover:bg-neutral-1000 dark:active:bg-neutral-900
-```
-
-#### Focus Styles
-
-Add the `focus-base` class to all interactive elements (buttons, links, inputs,
-selects, etc.). This class is defined in `src/core/styles/utils.css` and provides
-consistent focus styling with an accessible outline:
-
-```css
-.focus-base {
-  @apply focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-gui-focus;
-}
-```
-
-#### Transitions
-
-Add `transition-colors` to interactive elements unless a higher-specificity
-`transition` class is already present (e.g., `transition-all`, `transition-transform`).
-This ensures smooth visual feedback for state changes.
-
-### Complete Example
-
-Here's a complete button component demonstrating all patterns:
-
-```tsx
-<button
-  className={cn(
-    "px-4 py-2 rounded",
-    "bg-neutral-200 hover:bg-neutral-300 active:bg-neutral-400",
-    "dark:bg-neutral-1100 dark:hover:bg-neutral-1000 dark:active:bg-neutral-900",
-    "text-neutral-1300 dark:text-neutral-000",
-    "focus-base transition-colors",
-  )}
->
-  Click me
-</button>
-```
-
-### Additional Examples
-
-**Select dropdown:**
-
-```tsx
-<Select.Trigger
-  className="bg-neutral-200 hover:bg-neutral-300 active:bg-neutral-400 dark:bg-neutral-1100 dark:hover:bg-neutral-1000 dark:active:bg-neutral-900 focus-base transition-colors border border-neutral-300 dark:border-neutral-1000"
->
-```
-
-**Badge with orange:**
-
-```tsx
-<span
-  className="bg-orange-200 hover:bg-orange-300 active:bg-orange-400 dark:bg-orange-900 dark:hover:bg-orange-800 dark:active:bg-orange-700 focus-base transition-colors"
->
-```
-
-**Toggle/Switch:**
-
-```tsx
-<Switch
-  className="bg-neutral-600 hover:bg-neutral-700 active:bg-neutral-800 data-[state=checked]:bg-orange-600 data-[state=checked]:hover:bg-orange-700 data-[state=checked]:active:bg-orange-800 focus-base transition-colors"
->
-```
-
-## Git workflow
-
-- Always do work on a new branch, start the branch on the HEAD of `origin/main`
-- Before pushing the branch run the tests and linters to ensure they are happy
-- When updating a branch, rebase on `origin/main` and force-push (with lease)
-- Use our PR template in the `.github` folder as a reference for the pull request
-- Keep commit messages concise

package/core/Meganav/MeganavProductTile.js

@@ -1,2 +0,0 @@
-import React from"react";import cn from"../utils/cn";import{products}from"../ProductTile/data";import ProductIcon from"../ProductTile/ProductIcon";import ProductLabel from"../ProductTile/ProductLabel";import ProductDescription from"../ProductTile/ProductDescription";const CONTAINER_GAP_RATIO=3;const MeganavProductTile=({name,productLink,showDescription=true,showLabel=true,size="40px",animateIcons=false})=>{const{icon,hoverIcon,label,unavailable,description}=products[name]??{};const numericalSize=parseInt(size,10);return React.createElement("a",{href:productLink?productLink:"#",className:cn("transition-colors group/product-tile","flex flex-col p-3 rounded-lg gap-2","bg-neutral-000 dark:bg-neutral-1300",{"hover:bg-neutral-100 dark:hover:bg-neutral-1200":!unavailable},{"pointer-events-auto":!unavailable},{"pointer-events-none":unavailable}),"aria-hidden":unavailable},React.createElement("span",{className:cn("items-center flex"),style:{gap:numericalSize/CONTAINER_GAP_RATIO}},React.createElement(ProductIcon,{size:numericalSize,name:icon,hoverName:animateIcons?hoverIcon:undefined,unavailable:!!unavailable,selected:false}),React.createElement(ProductLabel,{label:label,unavailable:!!unavailable,numericalSize:numericalSize,showLabel:showLabel,selected:false})),React.createElement(ProductDescription,{description:description,unavailable:!!unavailable,showDescription:showDescription,selected:false}))};export default MeganavProductTile;
-//# sourceMappingURL=MeganavProductTile.js.map

package/core/Meganav/MeganavProductTile.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/core/Meganav/MeganavProductTile.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\nimport { products } from \"../ProductTile/data\";\nimport ProductIcon from \"../ProductTile/ProductIcon\";\nimport ProductLabel from \"../ProductTile/ProductLabel\";\nimport ProductDescription from \"../ProductTile/ProductDescription\";\nimport { ProductTileProps } from \"../ProductTile\";\n\nconst CONTAINER_GAP_RATIO = 3;\n\nconst MeganavProductTile = ({\n  name,\n  productLink,\n  showDescription = true,\n  showLabel = true,\n  size = \"40px\",\n  animateIcons = false,\n}: ProductTileProps & { productLink?: string }) => {\n  const { icon, hoverIcon, label, unavailable, description } =\n    products[name] ?? {};\n  const numericalSize = parseInt(size, 10);\n\n  return (\n    <a\n      href={productLink ? productLink : \"#\"}\n      className={cn(\n        \"transition-colors group/product-tile\",\n        \"flex flex-col p-3 rounded-lg gap-2\",\n        \"bg-neutral-000 dark:bg-neutral-1300\",\n        {\n          \"hover:bg-neutral-100 dark:hover:bg-neutral-1200\": !unavailable,\n        },\n        { \"pointer-events-auto\": !unavailable },\n        { \"pointer-events-none\": unavailable },\n      )}\n      aria-hidden={unavailable}\n    >\n      <span\n        className={cn(\"items-center flex\")}\n        style={{\n          gap: numericalSize / CONTAINER_GAP_RATIO,\n        }}\n      >\n        <ProductIcon\n          size={numericalSize}\n          name={icon}\n          hoverName={animateIcons ? hoverIcon : undefined}\n          unavailable={!!unavailable}\n          selected={false}\n        />\n        <ProductLabel\n          label={label}\n          unavailable={!!unavailable}\n          numericalSize={numericalSize}\n          showLabel={showLabel}\n          selected={false}\n        />\n      </span>\n      <ProductDescription\n        description={description}\n        unavailable={!!unavailable}\n        showDescription={showDescription}\n        selected={false}\n      />\n    </a>\n  );\n};\n\nexport default MeganavProductTile;\n"],"names":["React","cn","products","ProductIcon","ProductLabel","ProductDescription","CONTAINER_GAP_RATIO","MeganavProductTile","name","productLink","showDescription","showLabel","size","animateIcons","icon","hoverIcon","label","unavailable","description","numericalSize","parseInt","a","href","className","aria-hidden","span","style","gap","hoverName","undefined","selected"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,AAC7B,QAASC,QAAQ,KAAQ,qBAAsB,AAC/C,QAAOC,gBAAiB,4BAA6B,AACrD,QAAOC,iBAAkB,6BAA8B,AACvD,QAAOC,uBAAwB,mCAAoC,CAGnE,MAAMC,oBAAsB,EAE5B,MAAMC,mBAAqB,CAAC,CAC1BC,IAAI,CACJC,WAAW,CACXC,gBAAkB,IAAI,CACtBC,UAAY,IAAI,CAChBC,KAAO,MAAM,CACbC,aAAe,KAAK,CACwB,IAC5C,KAAM,CAAEC,IAAI,CAAEC,SAAS,CAAEC,KAAK,CAAEC,WAAW,CAAEC,WAAW,CAAE,CACxDhB,QAAQ,CAACM,KAAK,EAAI,CAAC,EACrB,MAAMW,cAAgBC,SAASR,KAAM,IAErC,OACE,oBAACS,KACCC,KAAMb,YAAcA,YAAc,IAClCc,UAAWtB,GACT,uCACA,qCACA,sCACA,CACE,kDAAmD,CAACgB,WACtD,EACA,CAAE,sBAAuB,CAACA,WAAY,EACtC,CAAE,sBAAuBA,WAAY,GAEvCO,cAAaP,aAEb,oBAACQ,QACCF,UAAWtB,GAAG,qBACdyB,MAAO,CACLC,IAAKR,cAAgBb,mBACvB,GAEA,oBAACH,aACCS,KAAMO,cACNX,KAAMM,KACNc,UAAWf,aAAeE,UAAYc,UACtCZ,YAAa,CAAC,CAACA,YACfa,SAAU,QAEZ,oBAAC1B,cACCY,MAAOA,MACPC,YAAa,CAAC,CAACA,YACfE,cAAeA,cACfR,UAAWA,UACXmB,SAAU,SAGd,oBAACzB,oBACCa,YAAaA,YACbD,YAAa,CAAC,CAACA,YACfP,gBAAiBA,gBACjBoB,SAAU,QAIlB,CAEA,gBAAevB,kBAAmB"}