@ably/ui 11.7.1-dev.d65c98c → 12.0.0-dev.77b7db9

package/README.md

@@ -80,7 +80,6 @@ Currently, AblyUI CSS is built to work with TailwindCSS. To integrate it into yo
          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`
-   1. Make sure that tailwindcss-filters is also set to v2 in your package.json: otherwise `npm install -D tailwindcss-filters@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`:
 

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,7 +1 @@
-@layer components {
-  .ui-featured-link {
-    @apply font-sans font-bold block;
-    @apply text-neutral-500 hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus;
-  }
-}
 

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

@@ -172,10 +172,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
       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 group ".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"), ")")
     }
@@ -183,12 +185,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
     name: "icon-gui-link-arrow",
     size: "calc(var(--featured-link-icon-size) * 1.25)",
     color: iconColor,
-    additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
+    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: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+    additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
   })));
 };
 
@@ -197,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.jsx

@@ -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 font-mono font-bold col-span-full uppercase tracking-widen-0.16"
+    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: "font-sans text-p3 py-16 font-bold 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", {

package/core/Meganav/component.css

@@ -105,7 +105,7 @@
   }
 
   .ui-meganav-overline {
-    @apply text-overline2 text-cool-black uppercase font-bold font-mono tracking-widen-0.16 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

@@ -118,10 +118,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
       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 group ".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"), ")")
     }
@@ -129,12 +131,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
     name: "icon-gui-link-arrow",
     size: "calc(var(--featured-link-icon-size) * 1.25)",
     color: iconColor,
-    additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
+    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: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+    additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
   })));
 };
 
@@ -143,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);
 
@@ -383,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
     }
@@ -1134,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-bold text-cool-black mb-24 leading-normal",
+    className: "ui-text-p2 font-bold mb-24",
     style: {
       maxWidth: "330px"
     }
@@ -2328,7 +2332,7 @@ var Icon_component = __webpack_require__(9008);
 ;// CONCATENATED MODULE: ./src/core/Notice/component.jsx
 
 
-var contentWrapperClasses = "font-medium w-full pr-8 text-p3 self-center";
+var contentWrapperClasses = "w-full pr-8 ui-text-p3 self-center";
 
 
 
@@ -2393,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

@@ -37,10 +37,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
       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 group ".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"), ")")
     }
@@ -48,12 +50,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
     name: "icon-gui-link-arrow",
     size: "calc(var(--featured-link-icon-size) * 1.25)",
     color: iconColor,
-    additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
+    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: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+    additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
   })));
 };
 
@@ -62,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

@@ -118,10 +118,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
       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 group ".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"), ")")
     }
@@ -129,12 +131,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
     name: "icon-gui-link-arrow",
     size: "calc(var(--featured-link-icon-size) * 1.25)",
     color: iconColor,
-    additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
+    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: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+    additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
   })));
 };
 
@@ -143,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);
 

package/core/MeganavContentProducts.jsx

@@ -37,10 +37,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
       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 group ".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"), ")")
     }
@@ -48,12 +50,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
     name: "icon-gui-link-arrow",
     size: "calc(var(--featured-link-icon-size) * 1.25)",
     color: iconColor,
-    additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
+    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: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+    additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
   })));
 };
 
@@ -62,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);
 
@@ -237,7 +241,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-bold text-cool-black mb-24 leading-normal",
+    className: "ui-text-p2 font-bold mb-24",
     style: {
       maxWidth: "330px"
     }

package/core/MeganavItemsMobile.jsx

@@ -37,10 +37,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
       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 group ".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"), ")")
     }
@@ -48,12 +50,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
     name: "icon-gui-link-arrow",
     size: "calc(var(--featured-link-icon-size) * 1.25)",
     color: iconColor,
-    additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
+    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: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+    additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
   })));
 };
 
@@ -62,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/MeganavItemsSignedIn.jsx

@@ -37,10 +37,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
       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 group ".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"), ")")
     }
@@ -48,12 +50,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
     name: "icon-gui-link-arrow",
     size: "calc(var(--featured-link-icon-size) * 1.25)",
     color: iconColor,
-    additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
+    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: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+    additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
   })));
 };
 
@@ -62,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/MeganavSearch.jsx

@@ -37,10 +37,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
       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 group ".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"), ")")
     }
@@ -48,12 +50,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
     name: "icon-gui-link-arrow",
     size: "calc(var(--featured-link-icon-size) * 1.25)",
     color: iconColor,
-    additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
+    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: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+    additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
   })));
 };
 
@@ -62,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/MeganavSearchPanel.jsx

@@ -37,10 +37,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
       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 group ".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"), ")")
     }
@@ -48,12 +50,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
     name: "icon-gui-link-arrow",
     size: "calc(var(--featured-link-icon-size) * 1.25)",
     color: iconColor,
-    additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
+    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: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+    additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
   })));
 };
 
@@ -62,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/MeganavSearchSuggestions.jsx

@@ -37,10 +37,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
       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 group ".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"), ")")
     }
@@ -48,12 +50,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
     name: "icon-gui-link-arrow",
     size: "calc(var(--featured-link-icon-size) * 1.25)",
     color: iconColor,
-    additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
+    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: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
+    additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
   })));
 };
 
@@ -62,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);