@ably/ui 8.2.1 → 8.5.0

package/core/MeganavContentPlatform.jsx

@@ -321,10 +321,14 @@ __webpack_require__.r(__webpack_exports__);
 var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
   var paths = _ref.paths,
       absUrl = _ref.absUrl;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("section", {
-    className: "ui-meganav-content ui-grid-gap sm:grid-cols-2 md:grid-cols-3"
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "flex max-w-screen-xl mx-auto"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "sm:col-span-full md:col-span-1"
+    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 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", {
@@ -333,13 +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")
-  }, "Explore how it works")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
+    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 bg-white"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline",
     id: "meganav-platform-panel-list-examples"
-  }, "Examples"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+  }, "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"),
@@ -384,12 +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")
-  }, "Explore all live examples")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
+    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 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"),
@@ -398,37 +412,40 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
     className: "ui-meganav-media-heading"
   }, "Predictable performance"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "We provide predictability so you can be confident your realtime application will always perform as expected."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "A low-latency and high-throughput global network."))), /*#__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#integrity"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
   }, "Guaranteed ordering & delivery"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "We guarantee in-order data delivery, even after disconnections."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "Data is delivered - in order - even after disconnections."))), /*#__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#reliability"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
   }, "Fault tolerant infrastructure"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Redundant at regional and global levels with 99.999% uptime SLAs."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "Redundancy is built in at global and regional levels."))), /*#__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#availability"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
   }, "High scalability & availability"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Elastic, battle-tested global infrastructure for massive scale."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "Built for scale with legitimate 99.999% uptime SLAs."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/network"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
   }, "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 200+ PoPs.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
-    url: absUrl("/four-pillars-of-dependability")
-  }, "Explore our technology")));
+  }, "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"),
+    textSize: "text-p3"
+  }, "Explore Four Pillars of Dependability"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "ui-meganav-content-spacer"
+  }));
 };
 
 MeganavContentPlatform.propTypes = {

package/core/MeganavContentUseCases.jsx

@@ -11,6 +11,59 @@
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
+/***/ 9008:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9281);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5697);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
+var _excluded = ["name", "size", "color", "additionalCSS"];
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+
+
+
+var Icon = function Icon(_ref) {
+  var name = _ref.name,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "0.75rem" : _ref$size,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "" : _ref$color,
+      _ref$additionalCSS = _ref.additionalCSS,
+      additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
+      additionalAttributes = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", _extends({
+    className: "".concat(color, " ").concat(additionalCSS),
+    style: {
+      width: size,
+      height: size
+    }
+  }, additionalAttributes), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("use", {
+    xlinkHref: "#sprite-".concat(name)
+  }));
+};
+
+Icon.propTypes = {
+  name: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string.isRequired),
+  size: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  color: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Icon);
+
+/***/ }),
+
 /***/ 2703:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -210,105 +263,144 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5697);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9008);
+
 
 
 
 var MeganavContentUseCases = function MeganavContentUseCases(_ref) {
   var absUrl = _ref.absUrl;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("section", {
-    className: "ui-meganav-content ui-grid-gap md:grid-cols-2 gap-y-0 md:gap-y-32"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    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 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-industry-use-cases"
-  }, "By use case"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+    id: "meganav-use-cases-panel-use-cases"
+  }, "Use cases"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
     "aria-labelledby": "meganav-use-cases-panel-industry-use-cases"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: absUrl("/solutions/edtech"),
-    className: "ui-meganav-media group"
+    href: absUrl("/solutions/chat"),
+    className: "ui-meganav-media-with-image group"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
+    name: "icon-display-chat-stack-col",
+    size: "2.5rem"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "flex flex-col justify-center"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
-  }, "EdTech"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "Chat"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Deliver interactive learning experiences like multi-user classrooms with chat."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "Deliver highly reliable chat experiences at scale. ")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/solutions/virtual-events"),
-    className: "ui-meganav-media group"
+    className: "ui-meganav-media-with-image group"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
+    name: "icon-display-virtual-events-col",
+    size: "2.5rem"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "flex flex-col justify-center"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
   }, "Virtual Events"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Power engaging virtual events with interactive realtime features."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: absUrl("/solutions/sports-and-media"),
+  }, "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 bg-white"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
+    className: "ui-meganav-overline",
+    id: "meganav-use-cases-panel-industry"
+  }, "Industry"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+    "aria-labelledby": "meganav-use-cases-panel-industry"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/solutions/edtech"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
-  }, "Sports & Media"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "EdTech"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Deliver global realtime experiences to keep fans informed, engaged, entertained."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "Deliver interactive learning experiences."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/solutions/fintech"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
   }, "Fintech"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Deliver fast, personalised fintech data in realtime to mobile & web customers."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: absUrl("/solutions/gaming"),
-    className: "ui-meganav-media group"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
-    className: "ui-meganav-media-heading"
-  }, "Gaming"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
-    className: "ui-meganav-media-copy"
-  }, "Power interactive gaming experiences that are wicked fast and utterly reliable."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "Deliver personalised financial data in realtime."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/solutions/automotive-logistics-and-mobility"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
   }, "Automotive, Logistics, & Mobility"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Power asset tracking, live transit updates, race-critical diagnostics, and more."))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
-    className: "md:mt-40"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "Power diagnostics, order tracking and more."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/solutions/b2b-platforms"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
   }, "B2B Platforms"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Empower customers with realtime technology that gives them a competitive edge."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "Empower your customers with realtime solutions."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/solutions/healthcare"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
-  }, "Healthcare"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "Healthcare (HIPAA)"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Provide HIPAA-compliant realtime apps healthcare professionals can depend on."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "Provide trustworthy, HIPAA-compliant realtime apps."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/solutions/ecommerce-and-retail"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
   }, "eCommerce & Retail"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Enable realtime pricing, inventory, and transactions to enrich user experiences."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: absUrl("/solutions/iot-and-connected-devices"),
+  }, "Enrich customer experiences with realtime updates."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/solutions/sports-and-media"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
-  }, "IoT & Connected Devices"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "Sports, Media & Audience Engagement"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Monitor and control global IoT deployments of any kind in realtime."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: absUrl("/solutions/asset-tracking"),
+  }, "Deliver engaging global realtime experiences."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/solutions/gaming"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
-  }, "Asset Tracking"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "Gaming"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "ui-meganav-media-copy"
+  }, "Power ultra fast and reliable gaming experiences."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/solutions/iot-and-connected-devices"),
+    className: "ui-meganav-media group"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "ui-meganav-media-heading"
+  }, "IoT & Connected Devices"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Track assets in realtime with a solution optimized for last mile logistics, food delivery applications, and urban mobility services."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+  }, "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 bg-white"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
+    className: "ui-meganav-overline",
+    id: "meganav-use-cases-panel-solutions"
+  }, "Solutions"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+    "aria-labelledby": "meganav-use-cases-panel-solutions"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/solutions/extend-kafka-to-the-edge"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
   }, "Extend Kafka to the edge"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Enhance and reliably expand Kafka's event streaming capabilities beyond your private network."))))));
+  }, "Reliably expand Kafka\u2019s event streaming beyond your private network."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/solutions/asset-tracking"),
+    className: "ui-meganav-media group"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "ui-meganav-media-heading"
+  }, "Asset Tracking"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "ui-meganav-media-copy"
+  }, "Track assets in realtime with a solution optimised for last mile logistics.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "ui-meganav-content-spacer"
+  }));
 };
 
 MeganavContentUseCases.propTypes = {

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/MeganavControlMobilePanelClose.jsx

@@ -269,7 +269,9 @@ __webpack_require__.r(__webpack_exports__);
 
 
 var MeganavControlMobilePanelClose = function MeganavControlMobilePanelClose(_ref) {
-  var ariaControls = _ref.ariaControls;
+  var ariaControls = _ref.ariaControls,
+      _ref$displayHr = _ref.displayHr,
+      displayHr = _ref$displayHr === void 0 ? true : _ref$displayHr;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "mx-24 md:mx-32"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
@@ -284,13 +286,14 @@ var MeganavControlMobilePanelClose = function MeganavControlMobilePanelClose(_re
     color: "text-cool-black",
     size: "1.5rem",
     additionalCSS: "relative -top-1 transform rotate-180"
-  }), "Back"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("hr", {
+  }), "Back"), displayHr ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("hr", {
     className: "ui-meganav-hr"
-  }));
+  }) : null);
 };
 
 MeganavControlMobilePanelClose.propTypes = {
-  ariaControls: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
+  ariaControls: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  displayHr: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MeganavControlMobilePanelClose);
 })();

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)
@@ -225,7 +227,7 @@ module.exports = ReactPropTypesSecret;
 /***/ ((module) => {
 
 "use strict";
-module.exports = JSON.parse('{"h":[{"label":"Platform","id":"platform-panel","component":"MeganavContentPlatform"},{"label":"Use Cases","id":"use-cases-panel","component":"MeganavContentUseCases"},{"label":"Why Ably","id":"why-ably-panel","component":"MeganavContentWhyAbly"},{"label":"Developers","id":"developers-panel","component":"MeganavContentDevelopers"}]}');
+module.exports = JSON.parse('{"h":[{"label":"Platform","shortLabel":"Platform","id":"platform-panel","component":"MeganavContentPlatform"},{"label":"Use Cases & Solutions","shortLabel":"Use Cases","id":"use-cases-panel","component":"MeganavContentUseCases"},{"label":"Company","shortLabel":"Company","id":"company-panel","component":"MeganavContentCompany"},{"label":"Developers","shortLabel":"Developers","id":"developers-panel","component":"MeganavContentDevelopers"}]}');
 
 /***/ }),
 
@@ -334,14 +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
-    }, panel.label), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-      className: "ui-meganav-panel invisible",
+      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 ".concat(bgCSS),
       id: panel.id,
       "data-id": "meganav-panel"
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(PanelComponent, {

package/core/MeganavItemsMobile.jsx

@@ -177,7 +177,9 @@ MeganavControlMobileDropdown.propTypes = {
 
 
 var MeganavControlMobilePanelClose = function MeganavControlMobilePanelClose(_ref) {
-  var ariaControls = _ref.ariaControls;
+  var ariaControls = _ref.ariaControls,
+      _ref$displayHr = _ref.displayHr,
+      displayHr = _ref$displayHr === void 0 ? true : _ref$displayHr;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "mx-24 md:mx-32"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
@@ -192,13 +194,14 @@ var MeganavControlMobilePanelClose = function MeganavControlMobilePanelClose(_re
     color: "text-cool-black",
     size: "1.5rem",
     additionalCSS: "relative -top-1 transform rotate-180"
-  }), "Back"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("hr", {
+  }), "Back"), displayHr ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("hr", {
     className: "ui-meganav-hr"
-  }));
+  }) : null);
 };
 
 MeganavControlMobilePanelClose.propTypes = {
-  ariaControls: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
+  ariaControls: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  displayHr: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MeganavControlMobilePanelClose);
 
@@ -503,7 +506,7 @@ module.exports = ReactPropTypesSecret;
 /***/ ((module) => {
 
 "use strict";
-module.exports = JSON.parse('{"h":[{"label":"Platform","id":"platform-panel","component":"MeganavContentPlatform"},{"label":"Use Cases","id":"use-cases-panel","component":"MeganavContentUseCases"},{"label":"Why Ably","id":"why-ably-panel","component":"MeganavContentWhyAbly"},{"label":"Developers","id":"developers-panel","component":"MeganavContentDevelopers"}]}');
+module.exports = JSON.parse('{"h":[{"label":"Platform","shortLabel":"Platform","id":"platform-panel","component":"MeganavContentPlatform"},{"label":"Use Cases & Solutions","shortLabel":"Use Cases","id":"use-cases-panel","component":"MeganavContentUseCases"},{"label":"Company","shortLabel":"Company","id":"company-panel","component":"MeganavContentCompany"},{"label":"Developers","shortLabel":"Developers","id":"developers-panel","component":"MeganavContentDevelopers"}]}');
 
 /***/ }),
 
@@ -694,6 +697,7 @@ var MeganavItemsMobile = function MeganavItemsMobile(_ref) {
     "data-id": "meganav-mobile-panel-controls"
   }, _Meganav_component_json__WEBPACK_IMPORTED_MODULE_5__/* .panels.map */ .h.map(function (panel) {
     var PanelComponent = panels[panel.component];
+    var displayHr = ["company-panel", "developers-panel"].includes(panel.id);
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
       className: "ui-meganav-mobile-item",
       key: "".concat(panel.id, "-mobile")
@@ -704,7 +708,8 @@ var MeganavItemsMobile = function MeganavItemsMobile(_ref) {
       id: "".concat(panel.id, "-mobile"),
       "data-scroll-lock-scrollable": true
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MeganavControlMobilePanelClose_component_jsx__WEBPACK_IMPORTED_MODULE_7__.default, {
-      ariaControls: "".concat(panel.id, "-mobile")
+      ariaControls: "".concat(panel.id, "-mobile"),
+      displayHr: displayHr
     }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(PanelComponent, {
       paths: paths,
       absUrl: absUrl

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/Notice.jsx

@@ -99,7 +99,7 @@ var ConnectStateWrapper = function ConnectStateWrapper(Component, selectors) {
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "FLASH_DATA_ID": () => (/* binding */ FLASH_DATA_ID)
 /* harmony export */ });
-/* unused harmony export reducerFlashes */
+/* unused harmony exports reducerFlashes, Flashes */
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9281);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var dompurify__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7856);