@ably/ui 11.7.1 → 12.0.0-dev.31bc8d9

package/README.md

@@ -1,5 +1,3 @@
-**_Note:_** some features are still in development and their documentation might be incomplete. Lookout for the ⚠️ icon.
-
 # ably-ui
 
 `ably-ui` is the of home of the Ably design system library ([https://ably-ui.herokuapp.com/](https://ably-ui.herokuapp.com/)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.
@@ -75,12 +73,11 @@ Currently, AblyUI CSS is built to work with TailwindCSS. To integrate it into yo
 1. Add AblyUI to your project
 2. Add TailwindCSS to your project
    1. By project type:
-       1. In [HTML](https://tailwindcss.com/docs/installation#installing-tailwind-css-as-a-post-css-plugin)
-       2. In [Gatsby](https://tailwindcss.com/docs/guides/gatsby)
-          1. Add postCSS import with `npm install postcss-import`
-    1. Further to the instructions, if installation is hanging for over 5 minutes or otherwise problematic, try installing the libraries one at a time
-    2. Make sure you are installing v2 with `npm install -D tailwindcss@2.X`
-    3. Make sure that tailwindcss-filters is also set to v2 in your package.json: otherwise `npm install -D tailwindcss-filters@2.X`
+      1. In [HTML](https://tailwindcss.com/docs/installation#installing-tailwind-css-as-a-post-css-plugin)
+      2. In [Gatsby](https://tailwindcss.com/docs/guides/gatsby)
+         1. Add postCSS import with `npm install postcss-import`
+   1. Further to the instructions, if installation is hanging for over 5 minutes or otherwise problematic, try installing the libraries one at a time
+   1. Make sure you are installing v2 with `npm install -D tailwindcss@2.X`
 3. Make sure you are using the format `@import 'tailwindcss/base';...` in your `global.css` file rather than the `@tailwind/base` format from Tailwind v3
 4. Add the following to your `tailwind.config.js`. Note how different config properties are always extended by the `ablyUIConfig`:
 
@@ -233,7 +230,7 @@ For `npm`:
 ```bash
 # in the root directory
 yarn link
-# in the the "preview" directory
+# in the "preview" directory
 yarn link @ably/ui
 ```
 

package/core/Code/component.css

@@ -1,5 +1,7 @@
 @layer base {
   @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,600;0,700;1,600;1,700&display=swap");
+  @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap");
+  @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
 }
 
 @layer components {

package/core/ContactFooter.jsx

@@ -286,9 +286,9 @@ function ContactFooter(_ref) {
     size: "3rem",
     additionalCSS: "block mb-16"
   }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "text-h3 mb-24"
+    className: "ui-text-h3 mb-24"
   }, "Live Chat"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
-    className: "text-p1 font-light"
+    className: "ui-text-p1"
   }, "Reach out team of experts over chat powered by Ably.")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("button", {
     type: "button",
     className: "ui-btn-secondary self-start mt-16",
@@ -305,17 +305,17 @@ function ContactFooter(_ref) {
   }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     className: "flex-grow"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "text-h3 mb-24"
+    className: "ui-text-h3 mb-24"
   }, "Call us"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
-    className: "text-p1 font-light"
+    className: "ui-text-p1"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("span", {
     className: "block"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("strong", {
-    className: "text-p1 font-medium"
+    className: "font-bold"
   }, "+1 877 434 5287"), " (USA, toll free)"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("span", {
     className: "block"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("strong", {
-    className: "text-p1 font-medium"
+    className: "font-bold"
   }, "+44 20 3318 4689"), " (UK)")))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     className: "ui-contact-footer-box"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component["default"], {
@@ -323,9 +323,9 @@ function ContactFooter(_ref) {
     size: "3rem",
     additionalCSS: "block mb-16"
   }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "text-h3 mb-24"
+    className: "ui-text-h3 mb-24"
   }, "Technical and account support"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
-    className: "text-p1 font-light"
+    className: "ui-text-p1"
   }, "We're standing by to help with any questions or code.")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
     className: "ui-btn-secondary self-start p-btn mt-16",
     href: absUrl("/support")

package/core/DropdownMenu.jsx

@@ -290,7 +290,7 @@ var Link = function Link(_ref4) {
     color: "text-cool-black",
     additionalCSS: "align-middle ml-8 relative -top-1 -left-4"
   }) : null), subtitle ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
-    className: "text-p3 mb-16 text-dark-grey"
+    className: "ui-text-p3 mb-16"
   }, subtitle) : null, children);
 };
 

package/core/FeaturedLink/component.css

@@ -1,16 +1 @@
-@layer components {
-  .ui-featured-link {
-    @apply font-sans font-medium block;
-    @apply text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus;
-  }
-
-  .ui-featured-link:hover svg {
-    @apply left-0;
-  }
-
-  .ui-featured-link-icon {
-    transition: left 100ms ease-in-out;
-    @apply align-middle ml-8 relative -top-1 -left-4;
-  }
-}
 

package/core/FeaturedLink/component.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.FeaturedLink=t())}(this,(()=>(()=>{"use strict";var e={};return e.default})()));
+!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.AblyUi=o():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.FeaturedLink=o())}(this,(()=>({}.default)));

package/core/FeaturedLink.jsx

@@ -165,24 +165,33 @@ __webpack_require__.r(__webpack_exports__);
 var FeaturedLink = function FeaturedLink(_ref) {
   var url = _ref.url,
       _ref$textSize = _ref.textSize,
-      textSize = _ref$textSize === void 0 ? "text-menu3" : _ref$textSize,
+      textSize = _ref$textSize === void 0 ? "text-p2" : _ref$textSize,
       _ref$iconColor = _ref.iconColor,
       iconColor = _ref$iconColor === void 0 ? "text-cool-black" : _ref$iconColor,
       _ref$flush = _ref.flush,
       flush = _ref$flush === void 0 ? false : _ref$flush,
+      _ref$reverse = _ref.reverse,
+      reverse = _ref$reverse === void 0 ? false : _ref$reverse,
+      _ref$additionalCSS = _ref.additionalCSS,
+      additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
       children = _ref.children;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: url,
-    className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
+    className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
     style: {
       "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
     }
-  }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
+  }, reverse ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
     name: "icon-gui-link-arrow",
     size: "calc(var(--featured-link-icon-size) * 1.25)",
     color: iconColor,
-    additionalCSS: "ui-featured-link-icon"
-  }));
+    additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
+  }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
+    name: "icon-gui-link-arrow",
+    size: "calc(var(--featured-link-icon-size) * 1.25)",
+    color: iconColor,
+    additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+  })));
 };
 
 FeaturedLink.propTypes = {
@@ -190,7 +199,9 @@ FeaturedLink.propTypes = {
   children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
   textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
-  flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
+  flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
 })();

package/core/Flash/component.css

@@ -13,10 +13,6 @@
     transform: translateY(-200%) rotateX(-90deg);
   }
 
-  .ui-flash-text {
-    @apply mr-16 text-p1;
-  }
-
   /* dynamic content inside flash, can't add classes */
   .ui-flash-text a {
     @apply underline;

package/core/Flash.jsx

@@ -518,7 +518,7 @@ var Flash = function Flash(_ref) {
     size: "1.5rem",
     additionalCSS: "mr-16 self-baseline"
   }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
-    className: "ui-flash-text ".concat(FLASH_TEXT_COLOR[type]),
+    className: "ui-text-p1 mr-16 ".concat(FLASH_TEXT_COLOR[type]),
     dangerouslySetInnerHTML: {
       __html: safeContent
     }

package/core/Footer/component.css

@@ -1,14 +1,14 @@
 @layer components {
   .ui-footer-col-title {
-    @apply text-overline2 p-menu-row-title font-normal uppercase tracking-widen-0.1;
+    @apply font-mono text-overline2 p-menu-row-title font-medium uppercase tracking-widen-0.16;
   }
 
   .ui-footer-menu-row-link {
-    @apply text-menu3 text-cool-black font-light hover:text-gui-hover block;
+    @apply text-menu3 text-cool-black font-sans font-medium hover:text-gui-hover block;
   }
 
   .ui-footer-link {
-    @apply text-gui-default hover:text-gui-hover text-menu3 font-light;
+    @apply text-gui-default hover:text-gui-hover text-menu3 font-sans font-medium;
   }
 
   .ui-footer-compliance-text {

package/core/Footer.jsx

@@ -188,7 +188,7 @@ function Footer(_ref) {
   };
 
   return /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("footer", {
-    className: "bg-light-grey font-sans antialiased",
+    className: "bg-light-grey font-sans antialiased leading-normal",
     "data-id": "footer"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     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"
@@ -201,11 +201,11 @@ function Footer(_ref) {
     src: paths.ablyStack,
     alt: "Ably homepage"
   }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("h2", {
-    className: "text-overline2 col-span-full font-medium uppercase tracking-widen-0.1"
+    className: "ui-text-overline2 col-span-full"
   }, "The Ably Platform")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     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"
+    className: "ui-text-p3 font-bold py-16 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 grid-cols-1"
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
@@ -324,7 +324,7 @@ function Footer(_ref) {
   }, "System status"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("iframe", {
     className: "w-20 h-20 mb-2",
     src: "https://status.ably.com/embed/icon",
-    allowtransparency: "true",
+    allowTransparency: true,
     frameBorder: "0",
     scrolling: "no",
     title: "System Status"
@@ -455,7 +455,7 @@ function Footer(_ref) {
     name: "glassdoor",
     size: "1.5rem"
   })), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "pl-16 text-menu3 font-light"
+    className: "pl-16 text-menu3 font-sans font-medium"
   }, /*#__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", {
@@ -475,7 +475,7 @@ function Footer(_ref) {
     name: "glassdoor",
     size: "1.5rem"
   })), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
-    className: "text-menu3 font-light"
+    className: "text-menu3 font-sans font-medium"
   }, /*#__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", {
@@ -531,9 +531,9 @@ function Footer(_ref) {
     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"
+    className: "ui-footer-compliance-text font-bold whitespace-nowrap"
   }, "SOC 2 Type 2"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
-    className: "ui-footer-compliance-text font-light mb-24"
+    className: "ui-footer-compliance-text font-medium 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"], {
@@ -542,9 +542,9 @@ function Footer(_ref) {
     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"
+    className: "ui-footer-compliance-text font-bold whitespace-nowrap"
   }, "HIPAA"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
-    className: "ui-footer-compliance-text font-light mb-24"
+    className: "ui-footer-compliance-text font-medium 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"], {
@@ -553,9 +553,9 @@ function Footer(_ref) {
     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"
+    className: "ui-footer-compliance-text font-bold whitespace-nowrap"
   }, "EU GDPR"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
-    className: "ui-footer-compliance-text font-light mb-24"
+    className: "ui-footer-compliance-text font-medium 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"], {
@@ -564,9 +564,9 @@ function Footer(_ref) {
     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"
+    className: "ui-footer-compliance-text font-bold whitespace-nowrap"
   }, "256-bit AES"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
-    className: "ui-footer-compliance-text font-light mb-24"
+    className: "ui-footer-compliance-text font-medium mb-24"
   }, "Encryption"))))));
 }
 Footer.propTypes = {

package/core/Meganav/component.css

@@ -51,7 +51,7 @@
   }
 
   .ui-meganav-link {
-    @apply text-menu2 font-medium block;
+    @apply text-menu2 font-bold block font-sans;
     @apply mr-12 lg:mr-24 px-0 py-20;
     @apply hover:text-gui-hover focus:text-gui-focus focus:outline-none;
     @apply transition-colors;
@@ -63,13 +63,13 @@
 
   .ui-meganav-mobile-link {
     @apply p-menu-row relative -left-8 w-extend-8;
-    @apply text-menu2 font-medium block text-cool-black text-left;
+    @apply text-menu2  font-bold font-mono font-medium block text-cool-black text-left;
     @apply flex items-center;
     @apply focus:text-gui-focus focus:outline-none;
   }
 
   .ui-meganav-account-link {
-    @apply block px-8 py-8 hover:bg-light-grey hover:text-gui-hover rounded relative -left-8 text-menu3 w-extend-8 font-light;
+    @apply block px-8 py-8 hover:bg-light-grey hover:text-gui-hover rounded relative -left-8 text-menu3 w-extend-8 font-bold font-mono;
   }
 
   .ui-meganav-content {
@@ -97,15 +97,15 @@
   }
 
   .ui-meganav-media-heading {
-    @apply text-menu3 text-cool-black font-medium group-hover:text-gui-hover group-focus:text-gui-focus;
+    @apply text-menu3 text-cool-black font-bold font-sans group-hover:text-gui-hover group-focus:text-gui-focus leading-normal;
   }
 
   .ui-meganav-media-copy {
-    @apply text-p3 text-dark-grey font-light;
+    @apply text-p3 font-sans font-medium text-dark-grey leading-normal;
   }
 
   .ui-meganav-overline {
-    @apply text-overline2 text-cool-black uppercase font-medium tracking-widen-0.15 p-overline;
+    @apply text-overline2 text-cool-black uppercase font-medium font-mono tracking-widen-0.16 p-overline;
   }
 
   .ui-meganav-hr {

package/core/Meganav.jsx

@@ -111,24 +111,33 @@ var ConnectStateWrapper = function ConnectStateWrapper(Component, selectors) {
 var FeaturedLink = function FeaturedLink(_ref) {
   var url = _ref.url,
       _ref$textSize = _ref.textSize,
-      textSize = _ref$textSize === void 0 ? "text-menu3" : _ref$textSize,
+      textSize = _ref$textSize === void 0 ? "text-p2" : _ref$textSize,
       _ref$iconColor = _ref.iconColor,
       iconColor = _ref$iconColor === void 0 ? "text-cool-black" : _ref$iconColor,
       _ref$flush = _ref.flush,
       flush = _ref$flush === void 0 ? false : _ref$flush,
+      _ref$reverse = _ref.reverse,
+      reverse = _ref$reverse === void 0 ? false : _ref$reverse,
+      _ref$additionalCSS = _ref.additionalCSS,
+      additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
       children = _ref.children;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: url,
-    className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
+    className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
     style: {
       "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
     }
-  }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
+  }, reverse ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
     name: "icon-gui-link-arrow",
     size: "calc(var(--featured-link-icon-size) * 1.25)",
     color: iconColor,
-    additionalCSS: "ui-featured-link-icon"
-  }));
+    additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
+  }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
+    name: "icon-gui-link-arrow",
+    size: "calc(var(--featured-link-icon-size) * 1.25)",
+    color: iconColor,
+    additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+  })));
 };
 
 FeaturedLink.propTypes = {
@@ -136,7 +145,9 @@ FeaturedLink.propTypes = {
   children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
   textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
-  flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
+  flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
 
@@ -376,7 +387,7 @@ var Flash = function Flash(_ref) {
     size: "1.5rem",
     additionalCSS: "mr-16 self-baseline"
   }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
-    className: "ui-flash-text ".concat(FLASH_TEXT_COLOR[type]),
+    className: "ui-text-p1 mr-16 ".concat(FLASH_TEXT_COLOR[type]),
     dangerouslySetInnerHTML: {
       __html: safeContent
     }
@@ -1127,7 +1138,7 @@ var MeganavContentProducts = function MeganavContentProducts(_ref) {
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline ml-24"
   }, "The Ably Platform")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
-    className: "text-p2 font-medium text-cool-black mb-24",
+    className: "ui-text-p2 font-bold mb-24",
     style: {
       maxWidth: "330px"
     }
@@ -1161,7 +1172,7 @@ var MeganavContentProducts = function MeganavContentProducts(_ref) {
     className: "group ui-meganav-media"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-heading"
-  }, "LiveSync (Pre release)"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }, "LiveSync (Early access)"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
   }, "Keep clients in sync with any relational database."))))), /*#__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"
@@ -2321,7 +2332,7 @@ var Icon_component = __webpack_require__(9008);
 ;// CONCATENATED MODULE: ./src/core/Notice/component.jsx
 
 
-var contentWrapperClasses = "font-light w-full pr-8 text-p3 self-center";
+var contentWrapperClasses = "w-full pr-8 ui-text-p3 self-center";
 
 
 
@@ -2375,7 +2386,7 @@ var component_Notice = function Notice(_ref2) {
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(ContentWrapper, {
     buttonLink: buttonLink
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("strong", {
-    className: "font-medium whitespace-nowrap pr-4"
+    className: "font-bold whitespace-nowrap pr-4"
   }, title), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("span", {
     className: "pr-4"
   }, bodyText), buttonLabel && /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("span", {
@@ -2386,7 +2397,7 @@ var component_Notice = function Notice(_ref2) {
   }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(Icon_component["default"], {
     name: "icon-gui-close",
     size: "1.25rem",
-    color: "text-white"
+    color: "text-cool-black"
   }))));
 };
 

package/core/MeganavBlogPostsList.jsx

@@ -30,24 +30,33 @@ return /******/ (() => { // webpackBootstrap
 var FeaturedLink = function FeaturedLink(_ref) {
   var url = _ref.url,
       _ref$textSize = _ref.textSize,
-      textSize = _ref$textSize === void 0 ? "text-menu3" : _ref$textSize,
+      textSize = _ref$textSize === void 0 ? "text-p2" : _ref$textSize,
       _ref$iconColor = _ref.iconColor,
       iconColor = _ref$iconColor === void 0 ? "text-cool-black" : _ref$iconColor,
       _ref$flush = _ref.flush,
       flush = _ref$flush === void 0 ? false : _ref$flush,
+      _ref$reverse = _ref.reverse,
+      reverse = _ref$reverse === void 0 ? false : _ref$reverse,
+      _ref$additionalCSS = _ref.additionalCSS,
+      additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
       children = _ref.children;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: url,
-    className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
+    className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
     style: {
       "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
     }
-  }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
+  }, reverse ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
     name: "icon-gui-link-arrow",
     size: "calc(var(--featured-link-icon-size) * 1.25)",
     color: iconColor,
-    additionalCSS: "ui-featured-link-icon"
-  }));
+    additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
+  }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
+    name: "icon-gui-link-arrow",
+    size: "calc(var(--featured-link-icon-size) * 1.25)",
+    color: iconColor,
+    additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+  })));
 };
 
 FeaturedLink.propTypes = {
@@ -55,7 +64,9 @@ FeaturedLink.propTypes = {
   children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
   textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
-  flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
+  flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
 

package/core/MeganavContentCompany.jsx

@@ -111,24 +111,33 @@ var ConnectStateWrapper = function ConnectStateWrapper(Component, selectors) {
 var FeaturedLink = function FeaturedLink(_ref) {
   var url = _ref.url,
       _ref$textSize = _ref.textSize,
-      textSize = _ref$textSize === void 0 ? "text-menu3" : _ref$textSize,
+      textSize = _ref$textSize === void 0 ? "text-p2" : _ref$textSize,
       _ref$iconColor = _ref.iconColor,
       iconColor = _ref$iconColor === void 0 ? "text-cool-black" : _ref$iconColor,
       _ref$flush = _ref.flush,
       flush = _ref$flush === void 0 ? false : _ref$flush,
+      _ref$reverse = _ref.reverse,
+      reverse = _ref$reverse === void 0 ? false : _ref$reverse,
+      _ref$additionalCSS = _ref.additionalCSS,
+      additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
       children = _ref.children;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: url,
-    className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
+    className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
     style: {
       "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
     }
-  }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
+  }, reverse ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
     name: "icon-gui-link-arrow",
     size: "calc(var(--featured-link-icon-size) * 1.25)",
     color: iconColor,
-    additionalCSS: "ui-featured-link-icon"
-  }));
+    additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
+  }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
+    name: "icon-gui-link-arrow",
+    size: "calc(var(--featured-link-icon-size) * 1.25)",
+    color: iconColor,
+    additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+  })));
 };
 
 FeaturedLink.propTypes = {
@@ -136,7 +145,9 @@ FeaturedLink.propTypes = {
   children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
   textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
-  flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
+  flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
+  additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);