@ably/ui 8.7.0-dev.7021bee → 8.7.0-dev.7456b53

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

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

@@ -10,5 +10,25 @@
   .ui-footer-link {
     @apply text-gui-default hover:text-gui-hover hover:underline 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", {
@@ -336,9 +336,10 @@ function Footer(_ref) {
     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-32 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-24 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"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("img", {
     className: "mr-24 w-96 h-96",
-    src: paths.rocketList,
-    alt: "Rocket List 2021"
+    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 w-96 h-96",
+    src: paths.usersLoveUs,
+    alt: "Users Love Us"
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("img", {
+    className: "mr-24 w-96 h-96",
+    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 md:pl-0 "
+  }, /*#__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"
+  }), /*#__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"
+  }, "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"
+  }), /*#__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"
+  }, "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"
+  }), /*#__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"
+  }, "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
@@ -952,30 +949,30 @@ var MeganavContentDevelopers = function MeganavContentDevelopers(_ref) {
   }, "Documentation"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
   }, "Technical guides to help you build with Ably.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: absUrl("/docs/key-concepts"),
+    href: absUrl("/docs/quick-start-guide"),
     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-lightbulb-col",
+    name: "icon-display-quickstart-guides-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"
-  }, "Concepts"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "Quickstart guides"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Read about core Ably platform concepts.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: absUrl("/docs/quick-start-guide"),
+  }, "Documentation to help you get started quickly.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/integrations"),
     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-quickstart-guides-col",
+    name: "icon-display-integrations-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"
-  }, "Quickstart guides"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "Integrations"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Documentation to help you get started quickly.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  }, "Find out more about Ably integrations. ")))))), /*#__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",
@@ -1005,18 +1002,18 @@ var MeganavContentDevelopers = function MeganavContentDevelopers(_ref) {
   }, "Tutorials & Demos"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
   }, "Get stuck in with our hands-on resources. ")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: absUrl("/integrations"),
+    href: absUrl("/reference-guide-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-integrations-col",
+    name: "icon-display-chat-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"
-  }, "Integrations"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "Chat apps reference guide"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Find out more about Ably integrations. ")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  }, "Learn how to build chat apps with Ably.")))))), /*#__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"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline uppercase",
@@ -3277,7 +3274,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/MeganavContentDevelopers.jsx

@@ -190,30 +190,30 @@ var MeganavContentDevelopers = function MeganavContentDevelopers(_ref) {
   }, "Documentation"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
   }, "Technical guides to help you build with Ably.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: absUrl("/docs/key-concepts"),
+    href: absUrl("/docs/quick-start-guide"),
     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-lightbulb-col",
+    name: "icon-display-quickstart-guides-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"
-  }, "Concepts"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "Quickstart guides"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Read about core Ably platform concepts.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: absUrl("/docs/quick-start-guide"),
+  }, "Documentation to help you get started quickly.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/integrations"),
     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-quickstart-guides-col",
+    name: "icon-display-integrations-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"
-  }, "Quickstart guides"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "Integrations"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Documentation to help you get started quickly.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  }, "Find out more about Ably integrations. ")))))), /*#__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",
@@ -243,18 +243,18 @@ var MeganavContentDevelopers = function MeganavContentDevelopers(_ref) {
   }, "Tutorials & Demos"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
   }, "Get stuck in with our hands-on resources. ")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-    href: absUrl("/integrations"),
+    href: absUrl("/reference-guide-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-integrations-col",
+    name: "icon-display-chat-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"
-  }, "Integrations"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "Chat apps reference guide"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Find out more about Ably integrations. ")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  }, "Learn how to build chat apps with Ably.")))))), /*#__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"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline uppercase",

package/core/MeganavItemsDesktop.jsx

@@ -114,7 +114,7 @@ MeganavControl.propTypes = {
 /***/ 3379:
 /***/ ((module) => {
 
-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"}]}');
+module.exports = JSON.parse('{"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/MeganavItemsMobile.jsx

@@ -387,7 +387,7 @@ SignOutLink.propTypes = {
 /***/ 3379:
 /***/ ((module) => {
 
-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"}]}');
+module.exports = JSON.parse('{"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/Notice/component.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("dompurify"),require("js-cookie"),require("lodash.throttle"),require("prop-types"),require("react"),require("redux")):"function"==typeof define&&define.amd?define([,,,,,],t):"object"==typeof exports?exports.AblyUi=t(require("dompurify"),require("js-cookie"),require("lodash.throttle"),require("prop-types"),require("react"),require("redux")):(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Notice=t(e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0]))}(this,(function(e,t,r,n,o,i){return(()=>{"use strict";var c={6357:t=>{t.exports=e},9349:e=>{e.exports=t},2040:e=>{e.exports=r},3474:e=>{e.exports=n},9281:e=>{e.exports=o},5044:e=>{e.exports=i}},a={};function u(e){var t=a[e];if(void 0!==t)return t.exports;var r=a[e]={exports:{}};return c[e](r,r.exports,u),r.exports}u.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return u.d(t,{a:t}),t},u.d=(e,t)=>{for(var r in t)u.o(t,r)&&!u.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},u.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var l={};return(()=>{u.d(l,{default:()=>M});var e=u(9349),t=u.n(e),r=u(2040),n=u.n(r),o=u(9281),i=u.n(o),c=u(6357),a=u.n(c),s=u(3474),f=u.n(s);let d=(e=21)=>{let t="",r=e;for(;r--;)t+="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict"[64*Math.random()|0];return t};u(5044);var p=["name","size","color","additionalCSS"];function y(){return y=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},y.apply(this,arguments)}var m=function(e){var t=e.name,r=e.size,n=void 0===r?"0.75rem":r,o=e.color,c=void 0===o?"":o,a=e.additionalCSS,u=void 0===a?"":a,l=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(e,p);return i().createElement("svg",y({className:"".concat(c," ").concat(u),style:{width:n,height:n}},l),i().createElement("use",{xlinkHref:"#sprite-".concat(t)}))};m.propTypes={name:f().string.isRequired,size:f().string,color:f().string,additionalCSS:f().string};const b=m;function v(){return v=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},v.apply(this,arguments)}function h(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function g(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?h(Object(r),!0).forEach((function(t){w(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):h(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function O(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null!=r){var n,o,i=[],c=!0,a=!1;try{for(r=r.call(e);!(c=(n=r.next()).done)&&(i.push(n.value),!t||i.length!==t);c=!0);}catch(e){a=!0,o=e}finally{try{c||null==r.return||r.return()}finally{if(a)throw o}}return i}}(e,t)||x(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function w(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function j(e){return function(e){if(Array.isArray(e))return S(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||x(e)||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.")}()}function x(e,t){if(e){if("string"==typeof e)return S(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?S(e,t):void 0}}function S(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}var E="ui-flashes",P={items:[]},A=(w({},"flashes",(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:P,t=arguments.length>1?arguments[1]:void 0;if("flash/push"===t.type){var r=Array.isArray(t.payload)?t.payload:[t.payload];return{items:[].concat(j(e.items),j(r))}}return e})),{type:f().oneOf(["error","success","notice","info","alert"]),content:f().string}),k={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"},q={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"},T=["success","info","notice"],C=function(e){var t=e.id,r=e.type,n=e.content,c=e.removeFlash,u=(0,o.useRef)(null),l=O((0,o.useState)(!1),2),s=l[0],f=l[1],d=O((0,o.useState)(0),2),p=d[0],y=d[1],m=O((0,o.useState)(!1),2),v=m[0],h=m[1],g=function(){u.current&&y(u.current.getBoundingClientRect().height),f(!0),setTimeout((function(){c(t)}),100)};(0,o.useEffect)((function(){return h(!0)}),[]),function(e,t){var r=(0,o.useRef)(null);(0,o.useEffect)((function(){return T.includes(e)&&(r.current=setTimeout((function(){t()}),8e3)),function(){r.current&&clearTimeout(r.current)}}),[])}(r,g);var w,j=v&&!s;w=p&&!s?{height:"".concat(p,"px")}:s?{height:0,marginTop:0,zIndex:-1}:{};var x=a().sanitize(n,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method","rel"]}),S={notice:"icon-gui-ably-badge",success:"icon-gui-tick",error:"icon-gui-warning",alert:"icon-gui-warning"},E={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white"};return i().createElement("div",{className:"ui-flash-message ui-grid-px ".concat(j?"ui-flash-message-enter":""),style:w,ref:u,"data-id":"ui-flash"},i().createElement("div",{className:"".concat(k[r]," p-32 flex align-center rounded shadow-container-subtle")},S[r]&&i().createElement(b,{name:S[r],color:E[r],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),i().createElement("p",{className:"ui-flash-text ".concat(q[r]),dangerouslySetInnerHTML:{__html:x}}),i().createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:g},i().createElement(b,{name:"icon-gui-close",color:E[r],size:"1.5rem",additionalCSS:"transition-colors"}))))};C.propTypes=g({},A);var I=function(e){var t=e.flashes,r=O((0,o.useState)([]),2),n=r[0],c=r[1],a=function(e){return c((function(t){return t.filter((function(t){return t.id!==e}))}))};return(0,o.useEffect)((function(){c((function(e){return[].concat(j(e),j(((null==t?void 0:t.items)||[]).map((function(e){return g(g({},e),{},{id:d(),removed:!1})}))))}))}),[t]),console.log({flashesWithIds:n}),i().createElement("div",{className:"ui-flash","data-id":E},n.filter((function(e){return!e.removed})).map((function(e){return i().createElement(C,v({removeFlash:a,key:e.id},e))})))};I.propTypes={flashes:f().shape({items:f().arrayOf(f().shape(A))})};function L(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function z(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}f().arrayOf(f().arrayOf(f().string));var D=function(e){var t=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))}(E);t&&(t.style.marginTop=e?"4rem":null)},N=function(e){window.matchMedia("(min-width: 65rem)").matches?e.style.display=null:e.style.display="none"},U=function(e){e.style.maxHeight=0,e.style.overflow="hidden",D(!1)},_=function(e){e.style.maxHeight=null,e.style.overflow=null,D(!0)};const M=function(e){var r=e.bannerContainer,o=e.cookieId,i=e.noticeId,c=e.options;if("undefined"==typeof window)return function(){};if(!r)return console.warn("A Notice component was initited but no notice container was found."),function(){};if(function(e,r){return(t().get(e)||"").includes(r)}(o,i))return function(){};N(r),_(r);var a=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?L(Object(r),!0).forEach((function(t){z(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):L(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({collapse:!0},c),u=a.collapse?function(e){window.scrollY>5&&U(e);var t=n()((function(){window.scrollY>5?U(e):e.style.overflow&&_(e)}),100);return document.addEventListener("scroll",t),function(){return document.removeEventListener("scroll",t)}}(r):function(){},l=function(e,r,n,o){var i=e.querySelector("button");if(!i)return function(){};var c=function(){r&&n&&function(e,r){var n=t().get(e)||"";t().set(e,"".concat(n.replace("".concat(r,","),"")+r,","),{expires:90})}(r,n),U(e),o()};return i.addEventListener("click",c),function(){return document.removeEventListener("click",c)}}(r,o,i,u),s=function(e){var t=n()((function(){N(e)}),100);return window.addEventListener("resize",t),function(){return window.removeEventListener("resize",t)}}(r);return function(){[l,u,s].forEach((function(e){return e()}))}}})(),l.default})()}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("dompurify"),require("js-cookie"),require("lodash.throttle"),require("prop-types"),require("react"),require("redux")):"function"==typeof define&&define.amd?define([,,,,,],t):"object"==typeof exports?exports.AblyUi=t(require("dompurify"),require("js-cookie"),require("lodash.throttle"),require("prop-types"),require("react"),require("redux")):(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Notice=t(e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0]))}(this,(function(e,t,r,n,o,i){return(()=>{"use strict";var c={6357:t=>{t.exports=e},9349:e=>{e.exports=t},2040:e=>{e.exports=r},3474:e=>{e.exports=n},9281:e=>{e.exports=o},5044:e=>{e.exports=i}},a={};function u(e){var t=a[e];if(void 0!==t)return t.exports;var r=a[e]={exports:{}};return c[e](r,r.exports,u),r.exports}u.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return u.d(t,{a:t}),t},u.d=(e,t)=>{for(var r in t)u.o(t,r)&&!u.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},u.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var l={};return(()=>{u.d(l,{default:()=>M});var e=u(9349),t=u.n(e),r=u(2040),n=u.n(r),o=u(9281),i=u.n(o),c=u(6357),a=u.n(c),s=u(3474),f=u.n(s);let p=(e=21)=>{let t="",r=e;for(;r--;)t+="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict"[64*Math.random()|0];return t};u(5044);var d=["name","size","color","additionalCSS"];function y(){return y=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},y.apply(this,arguments)}var m=function(e){var t=e.name,r=e.size,n=void 0===r?"0.75rem":r,o=e.color,c=void 0===o?"":o,a=e.additionalCSS,u=void 0===a?"":a,l=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(e,d);return i().createElement("svg",y({className:"".concat(c," ").concat(u),style:{width:n,height:n}},l),i().createElement("use",{xlinkHref:"#sprite-".concat(t)}))};m.propTypes={name:f().string.isRequired,size:f().string,color:f().string,additionalCSS:f().string};const b=m;function v(){return v=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},v.apply(this,arguments)}function h(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function g(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?h(Object(r),!0).forEach((function(t){w(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):h(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function O(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null!=r){var n,o,i=[],c=!0,a=!1;try{for(r=r.call(e);!(c=(n=r.next()).done)&&(i.push(n.value),!t||i.length!==t);c=!0);}catch(e){a=!0,o=e}finally{try{c||null==r.return||r.return()}finally{if(a)throw o}}return i}}(e,t)||x(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function w(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function j(e){return function(e){if(Array.isArray(e))return S(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||x(e)||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.")}()}function x(e,t){if(e){if("string"==typeof e)return S(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?S(e,t):void 0}}function S(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}var E="ui-flashes",P={items:[]},A=(w({},"flashes",(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:P,t=arguments.length>1?arguments[1]:void 0;if("flash/push"===t.type){var r=Array.isArray(t.payload)?t.payload:[t.payload];return{items:[].concat(j(e.items),j(r))}}return e})),{type:f().oneOf(["error","success","notice","info","alert"]),content:f().string}),k={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"},q={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"},T=["success","info","notice"],C=function(e){var t=e.id,r=e.type,n=e.content,c=e.removeFlash,u=(0,o.useRef)(null),l=O((0,o.useState)(!1),2),s=l[0],f=l[1],p=O((0,o.useState)(0),2),d=p[0],y=p[1],m=O((0,o.useState)(!1),2),v=m[0],h=m[1],g=function(){u.current&&y(u.current.getBoundingClientRect().height),f(!0),setTimeout((function(){c(t)}),100)};(0,o.useEffect)((function(){return h(!0)}),[]),function(e,t){var r=(0,o.useRef)(null);(0,o.useEffect)((function(){return T.includes(e)&&(r.current=setTimeout((function(){t()}),8e3)),function(){r.current&&clearTimeout(r.current)}}),[])}(r,g);var w,j=v&&!s;w=d&&!s?{height:"".concat(d,"px")}:s?{height:0,marginTop:0,zIndex:-1}:{};var x=a().sanitize(n,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method","rel"]}),S={notice:"icon-gui-ably-badge",success:"icon-gui-tick",error:"icon-gui-warning",alert:"icon-gui-warning"},E={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white"};return i().createElement("div",{className:"ui-flash-message ui-grid-px ".concat(j?"ui-flash-message-enter":""),style:w,ref:u,"data-id":"ui-flash"},i().createElement("div",{className:"".concat(k[r]," p-32 flex align-center rounded shadow-container-subtle")},S[r]&&i().createElement(b,{name:S[r],color:E[r],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),i().createElement("p",{className:"ui-flash-text ".concat(q[r]),dangerouslySetInnerHTML:{__html:x}}),i().createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:g},i().createElement(b,{name:"icon-gui-close",color:E[r],size:"1.5rem",additionalCSS:"transition-colors"}))))};C.propTypes=g({},A);var L=function(e){var t=e.flashes,r=O((0,o.useState)([]),2),n=r[0],c=r[1],a=function(e){return c((function(t){return t.filter((function(t){return t.id!==e}))}))};return(0,o.useEffect)((function(){c((function(e){return[].concat(j(e),j(((null==t?void 0:t.items)||[]).map((function(e){return g(g({},e),{},{id:p(),removed:!1})}))))}))}),[t]),i().createElement("div",{className:"ui-flash","data-id":E},n.filter((function(e){return!e.removed})).map((function(e){return i().createElement(C,v({removeFlash:a,key:e.id},e))})))};L.propTypes={flashes:f().shape({items:f().arrayOf(f().shape(A))})};function z(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function D(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}f().arrayOf(f().arrayOf(f().string));var I=function(e){var t=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))}(E);t&&(t.style.marginTop=e?"4rem":null)},N=function(e){window.matchMedia("(min-width: 65rem)").matches?e.style.display=null:e.style.display="none"},U=function(e){e.style.maxHeight=0,e.style.overflow="hidden",I(!1)},_=function(e){e.style.maxHeight=null,e.style.overflow=null,I(!0)};const M=function(e){var r=e.bannerContainer,o=e.cookieId,i=e.noticeId,c=e.options;if("undefined"==typeof window)return function(){};if(!r)return console.warn("A Notice component was initited but no notice container was found."),function(){};if(function(e,r){return(t().get(e)||"").includes(r)}(o,i))return function(){};N(r),_(r);var a=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?z(Object(r),!0).forEach((function(t){D(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):z(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({collapse:!0},c),u=a.collapse?function(e){window.scrollY>5&&U(e);var t=n()((function(){window.scrollY>5?U(e):e.style.overflow&&_(e)}),100);return document.addEventListener("scroll",t),function(){return document.removeEventListener("scroll",t)}}(r):function(){},l=function(e,r,n,o){var i=e.querySelector("button");if(!i)return function(){};var c=function(){r&&n&&function(e,r){var n=t().get(e)||"";t().set(e,"".concat(n.replace("".concat(r,","),"")+r,","),{expires:90})}(r,n),U(e),o()};return i.addEventListener("click",c),function(){return document.removeEventListener("click",c)}}(r,o,i,u),s=function(e){var t=n()((function(){N(e)}),100);return window.addEventListener("resize",t),function(){return window.removeEventListener("resize",t)}}(r);return function(){[l,u,s].forEach((function(e){return e()}))}}})(),l.default})()}));

package/core/Notice.jsx

@@ -369,9 +369,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