@ably/ui 8.7.0-dev.d70b391 → 8.7.0-dev.d7ea27d

package/README.md

@@ -239,7 +239,14 @@ yarn link @ably/ui
 
 For `ruby`:
 
-In `preview/Gemfile` replace `source: "https://rubygems.pkg.github.com/ably"` with `path: '../'` and run:
+In `preview/Gemfile` replace the Ably UI gem version number with `path: '../'` like this:
+
+```bash
+# in preview
+gem 'ably-ui', path: '../', require: 'ably_ui'
+```
+
+and run:
 
 ```bash
 # in preview
@@ -287,10 +294,14 @@ To deploy a review app with your in-progress code, you can use the `pre-release`
 scripts/pre-release.sh
 ```
 
-This will do a couple of things:
+This script is a combination of two scripts:
+
+1. Pre-Release:
+
+- update your local dependencies for ably-ui and run a production build
+- release a gem and a NPM package with the version built from your current SemVer but adding a pre-release tag based on a short SHA of your HEAD commit
 
-— update your local dependencies for ably-ui and run a production build
-— release a gem and a NPM package with the version built from your current SemVer but adding a pre-release tag based on a short SHA of your HEAD commit
+2. Update Pre-Release Version:
 
 - update the preview app
 - commit all the above and push to origin

package/core/Flash.jsx

@@ -562,9 +562,6 @@ var Flashes = function Flashes(_ref2) {
       })));
     });
   }, [flashes]);
-  console.log({
-    flashesWithIds: flashesWithIds
-  });
   return /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     className: "ui-flash",
     "data-id": FLASH_DATA_ID

package/core/Footer/component.css

@@ -8,7 +8,27 @@
   }
 
   .ui-footer-link {
-    @apply text-gui-default hover:text-gui-hover hover:underline text-menu3 font-light;
+    @apply text-gui-default hover:text-gui-hover text-menu3 font-light;
+  }
+
+  .ui-footer-compliance-text {
+    font-size: 12px;
+  }
+
+  .ui-footer-tick-icon {
+    min-width: 1.5rem;
+  }
+
+  @media (max-width: 1040px) {
+    .ui-footer-bottom-links {
+      @apply pb-40;
+    }
+  }
+
+  @media screen {
+    .ui-footer-glassdoor {
+      display: none;
+    }
   }
 }
 

package/core/Footer.jsx

@@ -191,7 +191,7 @@ function Footer(_ref) {
     className: "bg-light-grey font-sans antialiased",
     "data-id": "footer"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "max-w-screen-xl mx-auto py-32 sm:py-40 lg:py-64 ui-grid-gap ui-grid-px grid grid-cols-6"
+    className: "max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     className: "col-span-full md:col-span-2"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
@@ -203,11 +203,11 @@ function Footer(_ref) {
   }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("h2", {
     className: "text-overline2 col-span-full font-medium uppercase tracking-widen-0.1"
   }, "The Ably Platform")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "grid grid-cols-4"
+    className: "md:col-span-4 md:w-3/4 xs:w-3/5 w-full"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
-    className: "text-p3 py-16 font-medium p-menu-row-snug col-span-3"
+    className: "text-p3 py-16 font-medium p-menu-row-snug"
   }, "Easily power any realtime experience in your application via a simple API that handles everything realtime.")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", {
-    className: "grid gap-x-8 sm:gap-x-16 md:gap-x-24 xl:gap-x-32 sm:grid-cols-2 md:grid-cols-1"
+    className: "grid grid-cols-1"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
     className: "p-menu-row-snug"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
@@ -234,7 +234,7 @@ function Footer(_ref) {
     href: absUrl("/hub"),
     className: "ui-footer-menu-row-link"
   }, "Streaming data sources")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "col-span-full sm:col-span-3 md:col-span-1"
+    className: "col-span-full xs:col-span-3 md:col-span-1"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("h2", {
     className: "ui-footer-col-title"
   }, "Ably is for"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
@@ -293,7 +293,7 @@ function Footer(_ref) {
     href: absUrl("/solutions/iot-and-connected-devices"),
     className: "ui-footer-menu-row-link"
   }, "IoT & Connected Devices")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "col-span-full sm:col-span-3 md:col-span-1"
+    className: "col-span-full xs:col-span-3 md:col-span-1"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("h2", {
     className: "ui-footer-col-title"
   }, "Developers"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
@@ -327,18 +327,19 @@ function Footer(_ref) {
     href: absUrl("/download"),
     className: "ui-footer-menu-row-link"
   }, "SDKs")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
-    className: "p-menu-row-snug flex items-center"
+    className: "p-menu-row-snug flex items-center -mt-4"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     className: "pr-8 ui-footer-menu-row-link",
     href: "https://status.ably.com/"
   }, "System status"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("iframe", {
-    className: "w-24 h-24 mt-4",
+    className: "w-20 h-20 mb-2",
     src: "https://status.ably.com/embed/icon",
     allowtransparency: "true",
     frameBorder: "0",
-    scrolling: "no"
+    scrolling: "no",
+    title: "System Status"
   })))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "col-span-full sm:col-span-3 md:col-span-1"
+    className: "col-span-full xs:col-span-3 md:col-span-1"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("h2", {
     className: "ui-footer-col-title"
   }, "WHY ABLY"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
@@ -372,7 +373,7 @@ function Footer(_ref) {
     href: absUrl("/integrations"),
     className: "ui-footer-menu-row-link"
   }, "Third-party integrations")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "col-span-full sm:col-span-3 md:col-span-1"
+    className: "col-span-full xs:col-span-3 md:col-span-1"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("h2", {
     className: "ui-footer-col-title"
   }, "ABOUT"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
@@ -413,56 +414,53 @@ function Footer(_ref) {
   }, "Contact us"))))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     className: "max-w-screen-xl ui-grid-px mx-auto"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("hr", {
-    className: "border-t border-mid-grey"
+    className: "border-t border-mid-grey my-0"
   })), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "max-w-screen-xl mx-auto py-24 md:py-40 lg:py-32 grid ui-grid-gap ui-grid-px grid-cols-2"
+    className: "max-w-screen-xl mx-auto py-16 grid ui-grid-gap ui-grid-px sm:grid-cols-2"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "flex flex-col flex-auto pb-40 ml-8 col-span-full md:col-span-1"
+    className: "md:flex md:items-center"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "inline-flex"
-  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
-    href: absUrl("/privacy"),
-    className: "pr-24 ui-footer-link"
-  }, "Cookies"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
-    href: absUrl("/legals"),
-    className: "pr-24 ui-footer-link"
-  }, "Legals"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
-    href: absUrl("/data-protection"),
-    className: "pr-24 ui-footer-link"
-  }, "Data Protection"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
-    href: absUrl("/privacy"),
-    className: "ui-footer-link"
-  }, "Privacy")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "pt-32 flex items-center"
+    className: "flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md:col-span-2"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: ""
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "flex pb-24"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     className: "h-24 pr-24 text-cool-black hover:text-icon-twitter",
-    href: "https://twitter.com/ablyrealtime"
+    href: "https://twitter.com/ablyrealtime",
+    title: "Ably on Twitter"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
     name: "twitter",
     size: "1.5rem"
   })), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     className: "h-24 pr-24 text-cool-black hover:text-icon-linkedin",
-    href: "https://www.linkedin.com/company/ably-realtime"
+    href: "https://www.linkedin.com/company/ably-realtime",
+    title: "Ably on LinkedIn"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
     name: "linkedin",
     size: "1.5rem"
   })), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     className: "h-24 pr-24 text-cool-black hover:text-icon-github",
-    href: "https://github.com/ably/"
+    href: "https://github.com/ably/",
+    title: "Ably on Github"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
     name: "github",
     size: "1.5rem"
   })), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     className: "h-24 pr-24 text-cool-black hover:text-icon-discord",
-    href: "https://discord.gg/jwBPhEZ9g5"
+    href: "https://discord.gg/jwBPhEZ9g5",
+    title: "Ably on Discord"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
     name: "discord",
     size: "1.5rem"
-  })), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "border-l border-mid-grey h-40"
-  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
-    className: "flex flex-row pl-24 text-cool-black hover:text-icon-glassdoor",
-    href: "https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
+  })))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "xs:hidden sm:block ui-footer-glassdoor"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "flex sm:pt-24 md:pt-0 sm:border-t sm:border-l-0 md:border-t-0 md:border-l sm:border-mid-grey sm:w-3/4 md:w-full md:pl-24"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
+    href: "https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",
+    className: "h-24 text-cool-black hover:text-icon-glassdoor",
+    title: "Ably reviews on glassdoor"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
     name: "glassdoor",
     size: "1.5rem"
@@ -473,23 +471,116 @@ function Footer(_ref) {
   }, "We're hiring!"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     href: "https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",
     className: "ui-footer-link"
-  }, "Learn more"), "\xA0at Glassdoor"))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "md:text-right col-span-full md:col-span-1 ml-8 inline-flex md:ml-auto"
+  }, "Learn more at Glassdoor"))))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "xs:block sm:hidden"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "border-t border-mid-grey w-full"
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "flex py-24"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
+    className: "h-24 pr-16 text-cool-black hover:text-icon-glassdoor",
+    href: "https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",
+    title: "Ably reviews on glassdoor"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
+    name: "glassdoor",
+    size: "1.5rem"
+  })), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "text-menu3 font-light"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("strong", {
+    className: "block font-medium"
+  }, "We're hiring!"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
+    href: "https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",
+    className: "ui-footer-link"
+  }, "Learn more at Glassdoor"))))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("img", {
-    className: "mr-24 w-96 h-96",
-    src: paths.rocketList,
-    alt: "Rocket List 2021"
+    className: "mr-24 h-80",
+    src: paths.highestUserAdoption,
+    alt: "Highest User Adoption 2022"
   }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("img", {
-    className: "w-96 h-96",
-    src: paths.flexibleCompanies,
-    alt: "Flexible Companies 2021"
-  }))));
+    className: "mr-24 h-80",
+    src: paths.usersLoveUs,
+    alt: "Users Love Us"
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("img", {
+    className: "mr-24 h-80",
+    src: paths.highestPerformer,
+    alt: "High Performer 2022"
+  }))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "max-w-screen-xl ui-grid-px mx-auto"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("hr", {
+    className: "border-t border-mid-grey my-0"
+  })), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "max-w-screen-xl mx-auto py-24 sm:py-40 md:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "flex ml-8 col-span-full sm:col-span-1 md:pb-16 items-center ui-footer-bottom-links"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "flex"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
+    href: absUrl("/privacy"),
+    className: "pr-24 ui-footer-link"
+  }, "Cookies"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
+    href: absUrl("/legals"),
+    className: "pr-24 ui-footer-link"
+  }, "Legals"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
+    href: absUrl("/data-protection"),
+    className: "pr-24 ui-footer-link"
+  }, "Data Protection"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
+    href: absUrl("/privacy"),
+    className: "ui-footer-link"
+  }, "Privacy"))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-8 md:justify-items-end"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "flex mr-24"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
+    name: "icon-gui-tick",
+    color: "text-active-orange",
+    size: "1.5rem",
+    additionalCSS: "bg-white rounded-full mr-12 ui-footer-tick-icon"
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-footer-compliance-text font-medium whitespace-nowrap"
+  }, "SOC 2 Type 2"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-footer-compliance-text font-light mb-24"
+  }, "Certified"))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "flex mr-24 md:col-start-2"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
+    name: "icon-gui-tick",
+    color: "text-active-orange",
+    size: "1.5rem",
+    additionalCSS: "bg-white rounded-full mr-12 ui-footer-tick-icon"
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-footer-compliance-text font-medium whitespace-nowrap"
+  }, "HIPAA"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-footer-compliance-text font-light mb-24"
+  }, "Compliant"))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "flex mr-24 md:col-start-3"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
+    name: "icon-gui-tick",
+    color: "text-active-orange",
+    size: "1.5rem",
+    additionalCSS: "bg-white rounded-full mr-12  ui-footer-tick-icon"
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-footer-compliance-text font-medium whitespace-nowrap"
+  }, "EU GDPR"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-footer-compliance-text font-light mb-24"
+  }, "Certified"))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
+    className: "flex mr-24 md:col-start-4"
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
+    name: "icon-gui-tick",
+    color: "text-active-orange",
+    size: "1.5rem",
+    additionalCSS: "bg-white rounded-full mr-12  ui-footer-tick-icon"
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-footer-compliance-text font-medium whitespace-nowrap"
+  }, "256-bit AES"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
+    className: "ui-footer-compliance-text font-light mb-24"
+  }, "Encryption"))))));
 }
 Footer.propTypes = {
   paths: external_commonjs_prop_types_commonjs2_prop_types_default().shape({
     ablyStack: (external_commonjs_prop_types_commonjs2_prop_types_default()).string,
-    rocketList: (external_commonjs_prop_types_commonjs2_prop_types_default()).string,
-    flexibleCompanies: (external_commonjs_prop_types_commonjs2_prop_types_default()).string
+    highestPerformer: (external_commonjs_prop_types_commonjs2_prop_types_default()).string,
+    highestUserAdoption: (external_commonjs_prop_types_commonjs2_prop_types_default()).string,
+    usersLoveUs: (external_commonjs_prop_types_commonjs2_prop_types_default()).string
   }),
   urlBase: (external_commonjs_prop_types_commonjs2_prop_types_default()).string
 };

package/core/Meganav/component.json

@@ -30,7 +30,7 @@
   },
   "panels": [
     { "label": "Platform", "shortLabel": "Platform", "id": "platform-panel", "component": "MeganavContentPlatform" },
-    { "label": "Use Cases & Solutions", "shortLabel": "Use Cases", "id": "use-cases-panel", "component": "MeganavContentUseCases" },
+    { "label": "Solutions", "shortLabel": "Solutions", "id": "use-cases-panel", "component": "MeganavContentUseCases" },
     { "label": "Company", "shortLabel": "Company", "id": "company-panel", "component": "MeganavContentCompany" },
     { "label": "Developers", "shortLabel": "Developers", "id": "developers-panel", "component": "MeganavContentDevelopers" }
   ]

package/core/Meganav.jsx

@@ -428,9 +428,6 @@ var Flashes = function Flashes(_ref2) {
       })));
     });
   }, [flashes]);
-  console.log({
-    flashesWithIds: flashesWithIds
-  });
   return /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     className: "ui-flash",
     "data-id": FLASH_DATA_ID
@@ -1138,13 +1135,6 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
   }, "Activity Feed"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
   }, "Display a list of user actions in realtime."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: absUrl("/examples/live-charts"),
-    className: "ui-meganav-media group"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
-    className: "ui-meganav-media-heading"
-  }, "Live Charts"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
-    className: "ui-meganav-media-copy"
-  }, "Visualise live metrics and data in a chart."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/examples/live-cursors"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
@@ -1158,7 +1148,14 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
     className: "ui-meganav-media-heading"
   }, "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, {
+  }, "See when a user is typing a message."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/examples/chat-admin-privileges"),
+    className: "ui-meganav-media group"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "ui-meganav-media-heading"
+  }, "Chat Admin Privileges"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "ui-meganav-media-copy"
+  }, "Control who can take admin actions in a digital space.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
     url: absUrl("/examples"),
     textSize: "text-p3"
   }, "Explore all live examples")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
@@ -1252,57 +1249,69 @@ var MeganavContentUseCases = function MeganavContentUseCases(_ref) {
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline",
     id: "meganav-use-cases-panel-use-cases"
-  }, "Use cases"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+  }, "Solutions"), /*#__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/live-updates-results-metrics"),
+    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-live-updates-results-metrics-col",
+    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"
-  }, "Live updates, results & metrics"), /*#__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 live updates to keep users informed.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: absUrl("/solutions/chat"),
+  }, "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/multiplayer-collaboration"),
     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",
+    name: "icon-multi-user-spaces-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"
-  }, "Chat"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "Multiplayer Collaboration"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "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"),
+  }, "Bring collaborative multiplayer experiences to your users.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/solutions/data-broadcast"),
     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",
+    name: "icon-live-updates-results-metrics-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", {
+  }, "Data Broadcast"), /*#__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("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: absUrl("/solutions/multi-user-virtual-spaces"),
+  }, "Broadcast realtime event data to millions of devices around the globe.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/solutions/data-synchronization"),
     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-multi-user-spaces-col",
+    name: "icon-display-virtual-events",
     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"
-  }, "Multi-user virtual spaces"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "Data Synchronization"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Build live and interactive multi-user applications.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  }, "Keep your frontend and backend in realtime sync, at global scale.")))), /*#__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-with-image group"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
+    name: "icon-tech-apachekafka",
+    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"
+  }, "Extend Kafka to the edge"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "ui-meganav-media-copy"
+  }, "Reliably expand Kafka\u2019s event streaming beyond your private network.")))))), /*#__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",
@@ -1344,7 +1353,14 @@ var MeganavContentUseCases = function MeganavContentUseCases(_ref) {
     className: "ui-meganav-media-heading"
   }, "Healthcare (HIPAA)"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "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", {
+  }, "Provide trustworthy, HIPAA-compliant realtime apps."))))), /*#__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"
+  }, "\xA0"), /*#__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/ecommerce-and-retail"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
@@ -1372,28 +1388,7 @@ var MeganavContentUseCases = function MeganavContentUseCases(_ref) {
     className: "ui-meganav-media-heading"
   }, "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 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"
-  }, "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", {
+  }, "Monitor and control global IoT deployments in realtime.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "ui-meganav-content-spacer"
   }));
 };
@@ -3277,7 +3272,7 @@ try {
 /***/ ((module) => {
 
 "use strict";
-module.exports = JSON.parse('{"n":{"white":{"backgroundColor":"bg-white","textColor":"text-cool-black","buttonBackgroundColor":"","buttonTextColor":"","mobileMenuColor":"text-cool-black","logoTextColor":"text-cool-black","barShadow":"shadow-subtle"},"black":{"backgroundColor":"bg-cool-black","textColor":"text-white","buttonBackgroundColor":"bg-white","buttonTextColor":"text-cool-black","mobileMenuColor":"text-white","logoTextColor":"text-white","barShadow":""},"transparentToWhite":{"backgroundColor":"bg-transparent","textColor":"text-white","buttonBackgroundColor":"bg-white","buttonTextColor":"text-cool-black","mobileMenuColor":"text-white","logoTextColor":"text-white","barShadow":""}},"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"}]}');
+module.exports = JSON.parse('{"n":{"white":{"backgroundColor":"bg-white","textColor":"text-cool-black","buttonBackgroundColor":"","buttonTextColor":"","mobileMenuColor":"text-cool-black","logoTextColor":"text-cool-black","barShadow":"shadow-subtle"},"black":{"backgroundColor":"bg-cool-black","textColor":"text-white","buttonBackgroundColor":"bg-white","buttonTextColor":"text-cool-black","mobileMenuColor":"text-white","logoTextColor":"text-white","barShadow":""},"transparentToWhite":{"backgroundColor":"bg-transparent","textColor":"text-white","buttonBackgroundColor":"bg-white","buttonTextColor":"text-cool-black","mobileMenuColor":"text-white","logoTextColor":"text-white","barShadow":""}},"h":[{"label":"Platform","shortLabel":"Platform","id":"platform-panel","component":"MeganavContentPlatform"},{"label":"Solutions","shortLabel":"Solutions","id":"use-cases-panel","component":"MeganavContentUseCases"},{"label":"Company","shortLabel":"Company","id":"company-panel","component":"MeganavContentCompany"},{"label":"Developers","shortLabel":"Developers","id":"developers-panel","component":"MeganavContentDevelopers"}]}');
 
 /***/ }),
 

package/core/MeganavContentPlatform.jsx

@@ -267,13 +267,6 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
   }, "Activity Feed"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
   }, "Display a list of user actions in realtime."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: absUrl("/examples/live-charts"),
-    className: "ui-meganav-media group"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
-    className: "ui-meganav-media-heading"
-  }, "Live Charts"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
-    className: "ui-meganav-media-copy"
-  }, "Visualise live metrics and data in a chart."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: absUrl("/examples/live-cursors"),
     className: "ui-meganav-media group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
@@ -287,7 +280,14 @@ var MeganavContentPlatform = function MeganavContentPlatform(_ref) {
     className: "ui-meganav-media-heading"
   }, "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, {
+  }, "See when a user is typing a message."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/examples/chat-admin-privileges"),
+    className: "ui-meganav-media group"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "ui-meganav-media-heading"
+  }, "Chat Admin Privileges"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "ui-meganav-media-copy"
+  }, "Control who can take admin actions in a digital space.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
     url: absUrl("/examples"),
     textSize: "text-p3"
   }, "Explore all live examples")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {