@ably/ui 8.2.1-dev.f35b482 → 8.4.0

package/core/Meganav.jsx

@@ -3951,7 +3951,8 @@ var MeganavBlogPostsList = function MeganavBlogPostsList(_ref) {
       className: "ui-meganav-media-copy"
     }, post.pubDate)));
   })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
-    url: absUrl("/blog")
+    url: absUrl("/blog"),
+    textSize: "text-p3"
   }, "More from our Blog")) : null;
 };
 
@@ -4114,11 +4115,11 @@ var MeganavContentCompany = function MeganavContentCompany(_ref) {
     recentBlogPosts: selectRecentBlogPosts
   });
   return /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "flex"
+    className: "flex max-w-screen-xl mx-auto"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     className: "ui-meganav-content-spacer"
   }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("section", {
-    className: "grid grid-cols-12 ui-grid-gap-x"
+    className: "grid grid-cols-12 ui-grid-gap-x w-full"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().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__*/external_commonjs_react_commonjs2_react_default().createElement("h3", {
@@ -4150,7 +4151,7 @@ var MeganavContentCompany = function MeganavContentCompany(_ref) {
     className: "ui-meganav-media-heading"
   }, "Case studies"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Discover how customers are benefitting from Ably.")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
+  }, "Discover how customers are benefiting from Ably.")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     href: absUrl("/compare"),
     className: "ui-meganav-media-with-image group"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(Icon_component.default, {
@@ -4251,11 +4252,11 @@ MeganavContentCompany.propTypes = {
 var MeganavContentDevelopers = function MeganavContentDevelopers(_ref) {
   var absUrl = _ref.absUrl;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "flex"
+    className: "flex max-w-screen-xl mx-auto"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "ui-meganav-content-spacer"
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("section", {
-    className: "grid grid-cols-12 ui-grid-gap-x"
+    className: "grid grid-cols-12 ui-grid-gap-x w-full"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().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__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
@@ -4299,7 +4300,7 @@ var MeganavContentDevelopers = function MeganavContentDevelopers(_ref) {
     className: "ui-meganav-media-heading"
   }, "Quickstart guides"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Documentation to help you get up and running quickly.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  }, "Documentation to help you get started quickly.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().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__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
     className: "md:mt-40",
@@ -4398,13 +4399,13 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
   var paths = _ref.paths,
       absUrl = _ref.absUrl;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "flex"
+    className: "flex max-w-screen-xl mx-auto"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "ui-meganav-content-spacer bg-extra-light-grey"
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("section", {
     className: "grid grid-cols-12 ui-grid-gap-x w-full"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "col-span-full md:col-span-4 bg-extra-light-grey py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24"
+    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__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "flex mb-20"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
@@ -4413,18 +4414,20 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline ml-24"
   }, "The Ably Platform")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
-    className: "text-p2 font-medium text-cool-black mb-8",
+    className: "text-p2 font-medium text-cool-black 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__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
-    url: absUrl("/platform")
+    url: absUrl("/platform"),
+    textSize: "text-p2"
   }, "Explore how it works")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().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"
+    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__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline",
     id: "meganav-platform-panel-list-examples"
   }, "Our Examples"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+    className: "mb-16",
     "aria-labelledby": "meganav-platform-panel-list-examples"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/examples/avatar-stack"),
@@ -4469,14 +4472,15 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
   }, "Typing Indicator"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
   }, "See when a user is typing a message.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
-    url: absUrl("/examples")
+    url: absUrl("/examples"),
+    textSize: "text-p3"
   }, "Explore all live examples")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().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"
+    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__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline",
     id: "meganav-platform-panel-list-our-technology"
   }, "Our technology"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
-    className: "mb-8",
+    className: "mb-16",
     "aria-labelledby": "meganav-platform-panel-list-our-technology"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/four-pillars-of-dependability#performance"),
@@ -4514,7 +4518,8 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
   }, "Global edge network"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
   }, "An edge network of 15 core routing datacenters and 205+ PoPs.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
-    url: absUrl("/four-pillars-of-dependability")
+    url: absUrl("/four-pillars-of-dependability"),
+    textSize: "text-p3"
   }, "Explore Four Pillars of Dependability"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "ui-meganav-content-spacer"
   }));
@@ -4550,13 +4555,13 @@ MeganavContentPlatform.propTypes = {
 var MeganavContentUseCases = function MeganavContentUseCases(_ref) {
   var absUrl = _ref.absUrl;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "flex"
+    className: "flex max-w-screen-xl mx-auto"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "ui-meganav-content-spacer bg-extra-light-grey"
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("section", {
     className: "grid grid-cols-12 ui-grid-gap-x w-full"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "col-span-full md:col-span-4 bg-extra-light-grey py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24"
+    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__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline",
     id: "meganav-use-cases-panel-use-cases"
@@ -4587,7 +4592,7 @@ var MeganavContentUseCases = function MeganavContentUseCases(_ref) {
   }, "Virtual Events"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
   }, "Power engaging virtual events with realtime features.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().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"
+    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__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline",
     id: "meganav-use-cases-panel-industry"
@@ -4657,7 +4662,7 @@ var MeganavContentUseCases = function MeganavContentUseCases(_ref) {
   }, "IoT & Connected Devices"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
   }, "Monitor and control global IoT deployments in realtime."))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().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"
+    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__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline",
     id: "meganav-use-cases-panel-solutions"
@@ -4707,6 +4712,7 @@ MeganavContentUseCases.propTypes = {
 
 var MeganavControl = function MeganavControl(_ref) {
   var ariaControls = _ref.ariaControls,
+      ariaLabel = _ref.ariaLabel,
       children = _ref.children,
       theme = _ref.theme,
       additionalCSS = _ref.additionalCSS;
@@ -4716,7 +4722,7 @@ var MeganavControl = function MeganavControl(_ref) {
     className: "ui-meganav-link h-64 flex items-center group ".concat(additionalCSS, " ").concat(theme.textColor),
     "aria-expanded": "false",
     "aria-controls": ariaControls,
-    "aria-label": "Show ".concat(children)
+    "aria-label": "Show ".concat(ariaLabel, " panel")
   }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
     name: "icon-gui-disclosure-arrow",
     color: "text-cool-black",
@@ -4727,6 +4733,7 @@ var MeganavControl = function MeganavControl(_ref) {
 
 MeganavControl.propTypes = {
   ariaControls: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  ariaLabel: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
   theme: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object),
   additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
@@ -4898,18 +4905,20 @@ var MeganavDesktopItems = function MeganavDesktopItems(_ref) {
     "data-id": "meganav-items-desktop"
   }, _Meganav_component_json__WEBPACK_IMPORTED_MODULE_2__/* .panels.map */ .h.map(function (panel) {
     var PanelComponent = panels[panel.component];
+    var bgCSS = ["platform-panel", "use-cases-panel"].includes(panel.id) ? "ui-meganav-panel-split-bg" : "";
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
       className: "ui-meganav-item",
       key: panel.id
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MeganavControl_component_jsx__WEBPACK_IMPORTED_MODULE_3__.default, {
       theme: theme,
-      ariaControls: panel.id
+      ariaControls: panel.id,
+      ariaLabel: panel.label
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
       className: "hidden lg:inline"
     }, panel.label), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
       className: "lg:hidden"
     }, panel.shortLabel)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-      className: "ui-meganav-panel invisible",
+      className: "ui-meganav-panel invisible ".concat(bgCSS),
       id: panel.id,
       "data-id": "meganav-panel"
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(PanelComponent, {
@@ -5154,6 +5163,7 @@ var MeganavItemsSignedIn = function MeganavItemsSignedIn(_ref) {
     className: "ui-meganav-item relative"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MeganavControl_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
     ariaControls: "account-panel",
+    ariaLabel: "Account",
     theme: theme,
     additionalCSS: "mr-0"
   }, accountName), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
@@ -10921,6 +10931,7 @@ var MeganavControl = function MeganavControl() {
       (_panel$classList = panel.classList).replace.apply(_panel$classList, _toConsumableArray(open ? classes : classes.reverse()));
 
       control.setAttribute("aria-expanded", open);
+      control.dataset.hover = open;
     }
   };
 
@@ -10944,9 +10955,11 @@ var MeganavControl = function MeganavControl() {
       panels.forEach(function (node) {
         return node !== panel && node.classList.replace("visible", "invisible");
       });
-      var ariaExpanded = control.getAttribute("aria-expanded");
+      var ariaExpanded = control.getAttribute("aria-expanded"); // Prevent closing of the panel if it was already opened by hovering
 
-      if (ariaExpanded === "true") {
+      var openedByHover = control.dataset.hover === "true";
+
+      if (ariaExpanded === "true" && !openedByHover) {
         control.setAttribute("aria-expanded", false);
         panel.classList.replace("visible", "invisible");
       } else {
@@ -10954,6 +10967,10 @@ var MeganavControl = function MeganavControl() {
         panel.classList.replace("invisible", "visible");
       }
 
+      if (openedByHover) {
+        control.dataset.hover = false;
+      }
+
       if (isSearchControl(control)) {
         var searchInput = (0,dom_query/* queryId */.A)("meganav-search-input", panel);
         if (!searchInput) return;

package/core/MeganavBlogPostsList.jsx

@@ -341,7 +341,8 @@ var MeganavBlogPostsList = function MeganavBlogPostsList(_ref) {
       className: "ui-meganav-media-copy"
     }, post.pubDate)));
   })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
-    url: absUrl("/blog")
+    url: absUrl("/blog"),
+    textSize: "text-p3"
   }, "More from our Blog")) : null;
 };
 

package/core/MeganavContentCompany.jsx

@@ -242,7 +242,8 @@ var MeganavBlogPostsList = function MeganavBlogPostsList(_ref) {
       className: "ui-meganav-media-copy"
     }, post.pubDate)));
   })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
-    url: absUrl("/blog")
+    url: absUrl("/blog"),
+    textSize: "text-p3"
   }, "More from our Blog")) : null;
 };
 
@@ -1390,11 +1391,11 @@ var MeganavContentCompany = function MeganavContentCompany(_ref) {
     recentBlogPosts: selectRecentBlogPosts
   });
   return /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "flex"
+    className: "flex max-w-screen-xl mx-auto"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     className: "ui-meganav-content-spacer"
   }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("section", {
-    className: "grid grid-cols-12 ui-grid-gap-x"
+    className: "grid grid-cols-12 ui-grid-gap-x w-full"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().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__*/external_commonjs_react_commonjs2_react_default().createElement("h3", {
@@ -1426,7 +1427,7 @@ var MeganavContentCompany = function MeganavContentCompany(_ref) {
     className: "ui-meganav-media-heading"
   }, "Case studies"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Discover how customers are benefitting from Ably.")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
+  }, "Discover how customers are benefiting from Ably.")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     href: absUrl("/compare"),
     className: "ui-meganav-media-with-image group"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(Icon_component.default, {

package/core/MeganavContentDevelopers.jsx

@@ -271,11 +271,11 @@ __webpack_require__.r(__webpack_exports__);
 var MeganavContentDevelopers = function MeganavContentDevelopers(_ref) {
   var absUrl = _ref.absUrl;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "flex"
+    className: "flex max-w-screen-xl mx-auto"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "ui-meganav-content-spacer"
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("section", {
-    className: "grid grid-cols-12 ui-grid-gap-x"
+    className: "grid grid-cols-12 ui-grid-gap-x w-full"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().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__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
@@ -319,7 +319,7 @@ var MeganavContentDevelopers = function MeganavContentDevelopers(_ref) {
     className: "ui-meganav-media-heading"
   }, "Quickstart guides"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Documentation to help you get up and running quickly.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  }, "Documentation to help you get started quickly.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().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__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
     className: "md:mt-40",

package/core/MeganavContentPlatform.jsx

@@ -322,13 +322,13 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
   var paths = _ref.paths,
       absUrl = _ref.absUrl;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "flex"
+    className: "flex max-w-screen-xl mx-auto"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "ui-meganav-content-spacer bg-extra-light-grey"
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("section", {
     className: "grid grid-cols-12 ui-grid-gap-x w-full"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "col-span-full md:col-span-4 bg-extra-light-grey py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24"
+    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__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "flex mb-20"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
@@ -337,18 +337,20 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline ml-24"
   }, "The Ably Platform")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
-    className: "text-p2 font-medium text-cool-black mb-8",
+    className: "text-p2 font-medium text-cool-black 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__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
-    url: absUrl("/platform")
+    url: absUrl("/platform"),
+    textSize: "text-p2"
   }, "Explore how it works")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().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"
+    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__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline",
     id: "meganav-platform-panel-list-examples"
   }, "Our Examples"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+    className: "mb-16",
     "aria-labelledby": "meganav-platform-panel-list-examples"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/examples/avatar-stack"),
@@ -393,14 +395,15 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
   }, "Typing Indicator"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
   }, "See when a user is typing a message.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
-    url: absUrl("/examples")
+    url: absUrl("/examples"),
+    textSize: "text-p3"
   }, "Explore all live examples")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().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"
+    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__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline",
     id: "meganav-platform-panel-list-our-technology"
   }, "Our technology"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
-    className: "mb-8",
+    className: "mb-16",
     "aria-labelledby": "meganav-platform-panel-list-our-technology"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/four-pillars-of-dependability#performance"),
@@ -438,7 +441,8 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
   }, "Global edge network"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
   }, "An edge network of 15 core routing datacenters and 205+ PoPs.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
-    url: absUrl("/four-pillars-of-dependability")
+    url: absUrl("/four-pillars-of-dependability"),
+    textSize: "text-p3"
   }, "Explore Four Pillars of Dependability"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "ui-meganav-content-spacer"
   }));

package/core/MeganavContentUseCases.jsx

@@ -271,13 +271,13 @@ __webpack_require__.r(__webpack_exports__);
 var MeganavContentUseCases = function MeganavContentUseCases(_ref) {
   var absUrl = _ref.absUrl;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "flex"
+    className: "flex max-w-screen-xl mx-auto"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "ui-meganav-content-spacer bg-extra-light-grey"
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("section", {
     className: "grid grid-cols-12 ui-grid-gap-x w-full"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "col-span-full md:col-span-4 bg-extra-light-grey py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24"
+    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__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline",
     id: "meganav-use-cases-panel-use-cases"
@@ -308,7 +308,7 @@ var MeganavContentUseCases = function MeganavContentUseCases(_ref) {
   }, "Virtual Events"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
   }, "Power engaging virtual events with realtime features.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().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"
+    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__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline",
     id: "meganav-use-cases-panel-industry"
@@ -378,7 +378,7 @@ var MeganavContentUseCases = function MeganavContentUseCases(_ref) {
   }, "IoT & Connected Devices"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
   }, "Monitor and control global IoT deployments in realtime."))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().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"
+    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__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline",
     id: "meganav-use-cases-panel-solutions"

package/core/MeganavControl/component.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.MeganavControl=t())}(this,(function(){return(()=>{"use strict";var e={9581:(e,t,r)=>{r.d(t,{A:()=>n,n:()=>i});var n=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return t.querySelector("[data-id=".concat(e,"]"))},i=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return t.querySelectorAll("[data-id=".concat(e,"]"))}}},t={};function r(n){var i=t[n];if(void 0!==i)return i.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,r),o.exports}r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var n={};return(()=>{r.d(n,{default:()=>i});var e=r(9581);function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}const i=function(){var r=Array.from((0,e.n)("meganav-control")),n=Array.from((0,e.n)("meganav-panel")),i=getComputedStyle(document.documentElement).getPropertyValue("--bp-md"),o=function(e){return"search"===e.dataset.control},a=function(e,n,o){if(window.matchMedia("(hover: hover) and (pointer: fine) and (min-width: ".concat(i,")")).matches&&!r.some((function(e){return e===document.activeElement}))&&!function(){var e=document.querySelector('[data-id="meganav-panel"]#panel-search');if(e)return!e.classList.contains("invisible")}()){var a,c=["invisible","visible"];(a=n.classList).replace.apply(a,function(e){if(Array.isArray(e))return t(e)}(u=o?c:c.reverse())||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(u)||function(e,r){if(e){if("string"==typeof e)return t(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?t(e,r):void 0}}(u)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),e.setAttribute("aria-expanded",o)}var u};return r.map((function(t){var i,c,u=t.parentNode,l=document.querySelector("#".concat(t.getAttribute("aria-controls"))),s=function(t,i){return function(){if(r.forEach((function(e){return e!==t&&e.setAttribute("aria-expanded",!1)})),n.forEach((function(e){return e!==i&&e.classList.replace("visible","invisible")})),"true"===t.getAttribute("aria-expanded")?(t.setAttribute("aria-expanded",!1),i.classList.replace("visible","invisible")):(t.setAttribute("aria-expanded",!0),i.classList.replace("invisible","visible")),o(t)){var a=(0,e.A)("meganav-search-input",i);if(!a)return;a.focus()}else t.focus()}}(t,l);return t.addEventListener("click",s),o(t)||(i=function(e,t){return function(){return a(e,t,!0)}}(t,l),c=function(e,t){return function(){return a(e,t,!1)}}(t,l),u.addEventListener("mouseenter",i),u.addEventListener("mouseleave",c)),[{teardown:function(){i&&c&&(u.removeEventListener("mouseenter",i),u.removeEventListener("mouseleave",c)),t.removeEventListener("click",s)},clear:function(){t.setAttribute("aria-expanded",!1),l.classList.replace("visible","invisible")}}]})).flat()}})(),n.default})()}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.MeganavControl=t())}(this,(function(){return(()=>{"use strict";var e={9581:(e,t,r)=>{r.d(t,{A:()=>n,n:()=>o});var n=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return t.querySelector("[data-id=".concat(e,"]"))},o=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return t.querySelectorAll("[data-id=".concat(e,"]"))}}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var a=t[n]={exports:{}};return e[n](a,a.exports,r),a.exports}r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var n={};return(()=>{r.d(n,{default:()=>o});var e=r(9581);function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}const o=function(){var r=Array.from((0,e.n)("meganav-control")),n=Array.from((0,e.n)("meganav-panel")),o=getComputedStyle(document.documentElement).getPropertyValue("--bp-md"),a=function(e){return"search"===e.dataset.control},i=function(e,n,a){if(window.matchMedia("(hover: hover) and (pointer: fine) and (min-width: ".concat(o,")")).matches&&!r.some((function(e){return e===document.activeElement}))&&!function(){var e=document.querySelector('[data-id="meganav-panel"]#panel-search');if(e)return!e.classList.contains("invisible")}()){var i,c=["invisible","visible"];(i=n.classList).replace.apply(i,function(e){if(Array.isArray(e))return t(e)}(u=a?c:c.reverse())||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(u)||function(e,r){if(e){if("string"==typeof e)return t(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?t(e,r):void 0}}(u)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),e.setAttribute("aria-expanded",a),e.dataset.hover=a}var u};return r.map((function(t){var o,c,u=t.parentNode,s=document.querySelector("#".concat(t.getAttribute("aria-controls"))),l=function(t,o){return function(){r.forEach((function(e){return e!==t&&e.setAttribute("aria-expanded",!1)})),n.forEach((function(e){return e!==o&&e.classList.replace("visible","invisible")}));var i=t.getAttribute("aria-expanded"),c="true"===t.dataset.hover;if("true"!==i||c?(t.setAttribute("aria-expanded",!0),o.classList.replace("invisible","visible")):(t.setAttribute("aria-expanded",!1),o.classList.replace("visible","invisible")),c&&(t.dataset.hover=!1),a(t)){var u=(0,e.A)("meganav-search-input",o);if(!u)return;u.focus()}else t.focus()}}(t,s);return t.addEventListener("click",l),a(t)||(o=function(e,t){return function(){return i(e,t,!0)}}(t,s),c=function(e,t){return function(){return i(e,t,!1)}}(t,s),u.addEventListener("mouseenter",o),u.addEventListener("mouseleave",c)),[{teardown:function(){o&&c&&(u.removeEventListener("mouseenter",o),u.removeEventListener("mouseleave",c)),t.removeEventListener("click",l)},clear:function(){t.setAttribute("aria-expanded",!1),s.classList.replace("visible","invisible")}}]})).flat()}})(),n.default})()}));

package/core/MeganavControl.jsx

@@ -270,6 +270,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var MeganavControl = function MeganavControl(_ref) {
   var ariaControls = _ref.ariaControls,
+      ariaLabel = _ref.ariaLabel,
       children = _ref.children,
       theme = _ref.theme,
       additionalCSS = _ref.additionalCSS;
@@ -279,7 +280,7 @@ var MeganavControl = function MeganavControl(_ref) {
     className: "ui-meganav-link h-64 flex items-center group ".concat(additionalCSS, " ").concat(theme.textColor),
     "aria-expanded": "false",
     "aria-controls": ariaControls,
-    "aria-label": "Show ".concat(children)
+    "aria-label": "Show ".concat(ariaLabel, " panel")
   }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
     name: "icon-gui-disclosure-arrow",
     color: "text-cool-black",
@@ -290,6 +291,7 @@ var MeganavControl = function MeganavControl(_ref) {
 
 MeganavControl.propTypes = {
   ariaControls: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  ariaLabel: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
   theme: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object),
   additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)

package/core/MeganavItemsDesktop.jsx

@@ -82,6 +82,7 @@ Icon.propTypes = {
 
 var MeganavControl = function MeganavControl(_ref) {
   var ariaControls = _ref.ariaControls,
+      ariaLabel = _ref.ariaLabel,
       children = _ref.children,
       theme = _ref.theme,
       additionalCSS = _ref.additionalCSS;
@@ -91,7 +92,7 @@ var MeganavControl = function MeganavControl(_ref) {
     className: "ui-meganav-link h-64 flex items-center group ".concat(additionalCSS, " ").concat(theme.textColor),
     "aria-expanded": "false",
     "aria-controls": ariaControls,
-    "aria-label": "Show ".concat(children)
+    "aria-label": "Show ".concat(ariaLabel, " panel")
   }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
     name: "icon-gui-disclosure-arrow",
     color: "text-cool-black",
@@ -102,6 +103,7 @@ var MeganavControl = function MeganavControl(_ref) {
 
 MeganavControl.propTypes = {
   ariaControls: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  ariaLabel: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
   theme: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object),
   additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
@@ -334,18 +336,20 @@ var MeganavDesktopItems = function MeganavDesktopItems(_ref) {
     "data-id": "meganav-items-desktop"
   }, _Meganav_component_json__WEBPACK_IMPORTED_MODULE_2__/* .panels.map */ .h.map(function (panel) {
     var PanelComponent = panels[panel.component];
+    var bgCSS = ["platform-panel", "use-cases-panel"].includes(panel.id) ? "ui-meganav-panel-split-bg" : "";
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
       className: "ui-meganav-item",
       key: panel.id
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MeganavControl_component_jsx__WEBPACK_IMPORTED_MODULE_3__.default, {
       theme: theme,
-      ariaControls: panel.id
+      ariaControls: panel.id,
+      ariaLabel: panel.label
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
       className: "hidden lg:inline"
     }, panel.label), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
       className: "lg:hidden"
     }, panel.shortLabel)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-      className: "ui-meganav-panel invisible",
+      className: "ui-meganav-panel invisible ".concat(bgCSS),
       id: panel.id,
       "data-id": "meganav-panel"
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(PanelComponent, {

package/core/MeganavItemsSignedIn.jsx

@@ -132,6 +132,7 @@ Icon.propTypes = {
 
 var MeganavControl = function MeganavControl(_ref) {
   var ariaControls = _ref.ariaControls,
+      ariaLabel = _ref.ariaLabel,
       children = _ref.children,
       theme = _ref.theme,
       additionalCSS = _ref.additionalCSS;
@@ -141,7 +142,7 @@ var MeganavControl = function MeganavControl(_ref) {
     className: "ui-meganav-link h-64 flex items-center group ".concat(additionalCSS, " ").concat(theme.textColor),
     "aria-expanded": "false",
     "aria-controls": ariaControls,
-    "aria-label": "Show ".concat(children)
+    "aria-label": "Show ".concat(ariaLabel, " panel")
   }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
     name: "icon-gui-disclosure-arrow",
     color: "text-cool-black",
@@ -152,6 +153,7 @@ var MeganavControl = function MeganavControl(_ref) {
 
 MeganavControl.propTypes = {
   ariaControls: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  ariaLabel: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
   theme: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object),
   additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
@@ -644,6 +646,7 @@ var MeganavItemsSignedIn = function MeganavItemsSignedIn(_ref) {
     className: "ui-meganav-item relative"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MeganavControl_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
     ariaControls: "account-panel",
+    ariaLabel: "Account",
     theme: theme,
     additionalCSS: "mr-0"
   }, accountName), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {

package/core/sprites.svg

@@ -287,6 +287,15 @@
 <path fill-rule="evenodd" clip-rule="evenodd" d="M1.33333 8C1.33333 4.3181 4.3181 1.33333 8 1.33333C11.6819 1.33333 14.6667 4.3181 14.6667 8C14.6667 11.6819 11.6819 14.6667 8 14.6667C4.3181 14.6667 1.33333 11.6819 1.33333 8ZM8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0ZM8.66667 3.33333C8.66667 2.96514 8.36819 2.66667 8 2.66667C7.63181 2.66667 7.33333 2.96514 7.33333 3.33333V7.38675C7.33333 7.9706 7.58846 8.5253 8.03175 8.90527L9.89947 10.5062C10.179 10.7458 10.5999 10.7134 10.8395 10.4339C11.0791 10.1543 11.0467 9.73344 10.7672 9.49383L8.89947 7.89292C8.75171 7.76627 8.66667 7.58137 8.66667 7.38675V3.33333Z" fill="currentColor"/>
 </symbol><symbol fill="none" id="sprite-icon-gui-close" viewBox="0 0 24 24"><title>sprite-icon-gui-close</title>
 	<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4142 12L22.7071 21.2929L21.2929 22.7071L12 13.4142L2.70711 22.7071L1.29289 21.2929L10.5858 12L1.29289 2.70712L2.70711 1.29291L12 10.5858L21.2929 1.29291L22.7071 2.70712L13.4142 12Z" fill="currentColor"/>
+</symbol><symbol fill="none" id="sprite-icon-gui-copy" viewBox="0 0 16 16"><title>sprite-icon-gui-copy</title>
+<g clip-path="url(#clip0_222_232)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.66634 0.835938C1.65382 0.835938 0.833008 1.65675 0.833008 2.66927V9.33594C0.833008 10.3485 1.65382 11.1693 2.66634 11.1693H3.33301C3.60915 11.1693 3.83301 10.9454 3.83301 10.6693C3.83301 10.3931 3.60915 10.1693 3.33301 10.1693H2.66634C2.2061 10.1693 1.83301 9.79618 1.83301 9.33594V2.66927C1.83301 2.20903 2.2061 1.83594 2.66634 1.83594H9.33301C9.79325 1.83594 10.1663 2.20903 10.1663 2.66927V3.33594C10.1663 3.61208 10.3902 3.83594 10.6663 3.83594C10.9425 3.83594 11.1663 3.61208 11.1663 3.33594V2.66927C11.1663 1.65675 10.3455 0.835938 9.33301 0.835938H2.66634ZM6.66634 4.83594C5.65382 4.83594 4.83301 5.65675 4.83301 6.66927V13.3359C4.83301 14.3485 5.65382 15.1693 6.66634 15.1693H13.333C14.3455 15.1693 15.1663 14.3485 15.1663 13.3359V6.66927C15.1663 5.65675 14.3455 4.83594 13.333 4.83594H6.66634ZM5.83301 6.66927C5.83301 6.20903 6.2061 5.83594 6.66634 5.83594H13.333C13.7932 5.83594 14.1663 6.20903 14.1663 6.66927V13.3359C14.1663 13.7962 13.7932 14.1693 13.333 14.1693H6.66634C6.2061 14.1693 5.83301 13.7962 5.83301 13.3359V6.66927Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_222_232">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
 </symbol><symbol fill="none" id="sprite-icon-gui-cross-circled-fill" viewBox="0 0 24 24"><title>sprite-icon-gui-cross-circled-fill</title>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z" fill="currentColor"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M13.4142 12L17.7071 16.2928L16.2929 17.7071L12 13.4142L7.70711 17.7071L6.29289 16.2928L10.5858 12L6.29289 7.70706L7.70711 6.29285L12 10.5857L16.2929 6.29285L17.7071 7.70706L13.4142 12Z" fill="white"/>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "8.2.1-dev.f35b482",
+  "version": "8.4.0",
   "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",

package/src/core/Footer/component.html.erb

@@ -141,7 +141,7 @@
           <%= link_to 'Open protocol policy', abs_url("/open-policy"), class: "ui-footer-menu-row-link" %>
         </li>
         <li class="p-menu-row-snug">
-          <a href="https://www.notion.so/ably/Ably-Press-Center-551152f5be724d4495a7c2e29d9f51c7" target="_blank" rel="noopener" class="ui-footer-menu-row-link">Press & Media</a>
+         <%= link_to 'Press & Media', abs_url("/press-center"), class: "ui-footer-menu-row-link" %>
         </li>
         <li class="p-menu-row-snug">
           <%= link_to 'Contact us', abs_url("/contact"), class: "ui-footer-menu-row-link" %>

package/src/core/Footer/component.jsx

@@ -219,12 +219,7 @@ export default function Footer({ paths, urlBase }) {
               </a>
             </li>
             <li className="p-menu-row-snug">
-              <a
-                href="https://www.notion.so/ably/Ably-Press-Center-551152f5be724d4495a7c2e29d9f51c7"
-                rel="noopener noreferrer"
-                target="_blank"
-                className="ui-footer-menu-row-link"
-              >
+              <a href={absUrl("/press-center")} className="ui-footer-menu-row-link">
                 Press & Media
               </a>
             </li>

package/src/core/Meganav/component.css

@@ -46,6 +46,10 @@
     @apply bg-white rounded-t-none;
   }
 
+  .ui-meganav-panel-split-bg {
+    background: linear-gradient(to right, #fafafb 33%, white 33%, white 100%);
+  }
+
   .ui-meganav-link {
     @apply text-menu2 font-medium block;
     @apply mr-12 lg:mr-24 px-0 py-20;