@ably/ui 11.7.1-dev.13caf30 → 11.7.1-dev.2e09628

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

@@ -177,7 +177,7 @@ var FeaturedLink = function FeaturedLink(_ref) {
       children = _ref.children;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: url,
-    className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
+    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"), ")")
     }

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

@@ -123,7 +123,7 @@ var FeaturedLink = function FeaturedLink(_ref) {
       children = _ref.children;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: url,
-    className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
+    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"), ")")
     }
@@ -387,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
     }
@@ -1138,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"
     }
@@ -2332,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";
 
 
 
@@ -2397,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

@@ -42,7 +42,7 @@ var FeaturedLink = function FeaturedLink(_ref) {
       children = _ref.children;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: url,
-    className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
+    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"), ")")
     }

package/core/MeganavContentCompany.jsx

@@ -123,7 +123,7 @@ var FeaturedLink = function FeaturedLink(_ref) {
       children = _ref.children;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: url,
-    className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
+    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"), ")")
     }

package/core/MeganavContentProducts.jsx

@@ -42,7 +42,7 @@ var FeaturedLink = function FeaturedLink(_ref) {
       children = _ref.children;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: url,
-    className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
+    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"), ")")
     }
@@ -241,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

@@ -42,7 +42,7 @@ var FeaturedLink = function FeaturedLink(_ref) {
       children = _ref.children;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: url,
-    className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
+    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"), ")")
     }

package/core/MeganavItemsSignedIn.jsx

@@ -42,7 +42,7 @@ var FeaturedLink = function FeaturedLink(_ref) {
       children = _ref.children;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: url,
-    className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
+    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"), ")")
     }

package/core/MeganavSearch.jsx

@@ -42,7 +42,7 @@ var FeaturedLink = function FeaturedLink(_ref) {
       children = _ref.children;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: url,
-    className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
+    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"), ")")
     }

package/core/MeganavSearchPanel.jsx

@@ -42,7 +42,7 @@ var FeaturedLink = function FeaturedLink(_ref) {
       children = _ref.children;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: url,
-    className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
+    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"), ")")
     }

package/core/MeganavSearchSuggestions.jsx

@@ -42,7 +42,7 @@ var FeaturedLink = function FeaturedLink(_ref) {
       children = _ref.children;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: url,
-    className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
+    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"), ")")
     }

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,((e,t,r,n,o,i)=>(()=>{"use strict";var c={710:t=>{t.exports=e},4360:e=>{e.exports=t},7326:e=>{e.exports=r},6073:e=>{e.exports=n},5225:e=>{e.exports=o},5293: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:()=>R});var e=u(4360),t=u.n(e),r=u(7326),n=u.n(r),o=u(5225),i=u.n(o),c=u(710),a=u.n(c),s=u(6073),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(5293);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="flashes",P="ui-flashes",A={items:[]},k=(w({},E,(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:A,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}),q={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"},T={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"},C=["success","info","notice"],L=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 C.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(q[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(T[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"}))))};L.propTypes=g({},k);var z=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":P},n.filter((function(e){return!e.removed})).map((function(e){return i().createElement(L,v({removeFlash:a,key:e.id},e))})))};z.propTypes={flashes:f().shape({items:f().arrayOf(f().shape(k))})};function D(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 I(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 N=function(e){var t=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))}(P);t&&(t.style.marginTop=e?"4rem":null)},U=function(e){window.matchMedia("(min-width: 65rem)").matches?e.style.display=null:e.style.display="none"},_=function(e){e.style.maxHeight=0,e.style.overflow="hidden",N(!1)},M=function(e){e.style.maxHeight=null,e.style.overflow=null,N(!0)};const R=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(){};U(r),M(r);var a=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?D(Object(r),!0).forEach((function(t){I(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):D(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&&_(e);var t=n()((function(){window.scrollY>5?_(e):e.style.overflow&&M(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),_(e),o()};return i.addEventListener("click",c),function(){return document.removeEventListener("click",c)}}(r,o,i,u),s=function(e){var t=n()((function(){U(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,((e,t,r,n,o,i)=>(()=>{"use strict";var c={710:t=>{t.exports=e},4360:e=>{e.exports=t},7326:e=>{e.exports=r},6073:e=>{e.exports=n},5225:e=>{e.exports=o},5293: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:()=>R});var e=u(4360),t=u.n(e),r=u(7326),n=u.n(r),o=u(5225),i=u.n(o),c=u(710),a=u.n(c),s=u(6073),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(5293);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="flashes",P="ui-flashes",A={items:[]},k=(w({},E,(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:A,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}),q={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"},T={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"},C=["success","info","notice"],L=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 C.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(q[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-text-p1 mr-16 ".concat(T[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"}))))};L.propTypes=g({},k);var z=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":P},n.filter((function(e){return!e.removed})).map((function(e){return i().createElement(L,v({removeFlash:a,key:e.id},e))})))};z.propTypes={flashes:f().shape({items:f().arrayOf(f().shape(k))})};function D(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 I(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 N=function(e){var t=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))}(P);t&&(t.style.marginTop=e?"4rem":null)},U=function(e){window.matchMedia("(min-width: 65rem)").matches?e.style.display=null:e.style.display="none"},_=function(e){e.style.maxHeight=0,e.style.overflow="hidden",N(!1)},M=function(e){e.style.maxHeight=null,e.style.overflow=null,N(!0)};const R=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(){};U(r),M(r);var a=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?D(Object(r),!0).forEach((function(t){I(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):D(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&&_(e);var t=n()((function(){window.scrollY>5?_(e):e.style.overflow&&M(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),_(e),o()};return i.addEventListener("click",c),function(){return document.removeEventListener("click",c)}}(r,o,i,u),s=function(e){var t=n()((function(){U(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

@@ -325,7 +325,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
     }
@@ -822,7 +822,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";
 
 
 
@@ -887,7 +887,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/Uptime/component.css

@@ -86,7 +86,7 @@
   .ui-uptime-key {
     @apply block mt-16 mr-20 bg-transparent;
     @apply sm:inline-block sm:mt-0;
-    @apply font-light text-p2 text-white block sm:inline-flex items-center;
+    @apply font-medium text-p2 text-white block sm:inline-flex items-center;
   }
 
   .ui-uptime-key:first-child {

package/core/Uptime.jsx

@@ -42,7 +42,7 @@ var FeaturedLink = function FeaturedLink(_ref) {
       children = _ref.children;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: url,
-    className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
+    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"), ")")
     }
@@ -821,7 +821,7 @@ function Uptime(_ref8) {
 
   if (data && data.error) {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", {
-      className: "flex sm:flex-row justify-center items-center p-24 border rounded font-sans font-light text-p2 ".concat(themes[theme].text),
+      className: "flex sm:flex-row justify-center items-center p-24 border rounded ui-text-p2 ".concat(themes[theme].text),
       "data-id": "uptime-error"
     }, "Sorry, we can\u2019t retrieve uptime data right now.");
   }

package/core/styles.css

@@ -525,25 +525,32 @@
   }
 
   .ui-text-code {
-    @apply font-mono font-medium text-code;
+    @apply font-mono font-normal text-code;
   }
 
   .ui-text-code2 {
-    @apply font-mono font-medium text-code2;
+    @apply font-mono font-normal text-code2;
   }
 
   .ui-text-code-inline {
-    @apply font-mono font-medium text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
+    @apply font-mono font-normal text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
   }
 
   .ui-unordered-list {
-    @apply text-p1 font-medium text-cool-black;
-    @apply list-disc ml-32 my-16;
+    @apply text-p1 font-medium text-charcoal-grey;
+    @apply ml-32 my-16;
+    @apply list-disc;
   }
 
   .ui-ordered-list {
     @apply text-p1 font-medium text-charcoal-grey;
-    @apply ml-32 my-16 list-decimal;
+    @apply ml-32 my-16;
+    @apply list-decimal;
+  }
+
+  .ui-ordered-list li,
+  .ui-unordered-list li {
+    @apply mb-8;
   }
 
   .ui-unordered-list li > *:last-of-type:not(ul):not(ol),
@@ -552,11 +559,11 @@
   }
 
   .ui-unordered-list ul {
-    @apply ml-24 mt-16 list-circle;
+    @apply ml-24 my-8 list-circle;
   }
 
   .ui-ordered-list ol {
-    @apply ml-24 mt-16 list-decimal;
+    @apply ml-24 my-16 list-decimal;
   }
 
   .ui-unordered-list ul ul {
@@ -567,34 +574,6 @@
     @apply my-8;
   }
 
-  .ui-ordered-list li,
-  .ui-unordered-list li {
-    @apply font-medium font-sans tracking-widen-0;
-    line-height: var(--lh-extra-relaxed);
-  }
-
-  .ui-unordered-list-with-emphasis {
-    @apply text-p1 font-medium text-cool-black;
-    @apply list-disc ml-32 mt-32 -mb-12;
-  }
-
-  .ui-unordered-list-with-emphasis li div {
-    @apply relative -top-12;
-  }
-
-  .ui-unordered-list-with-emphasis li div > strong {
-    @apply block;
-  }
-
-  .ui-unordered-list-with-emphasis ul {
-    margin-top: calc(var(--spacing-16) + var(--spacing-8));
-    @apply ml-24 list-circle;
-  }
-
-  .ui-unordered-list-with-emphasis ul ul {
-    @apply list-square;
-  }
-
   .ui-link {
     @apply text-gui-default;
     @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
@@ -684,7 +663,7 @@
 }
 @layer components {
   .ui-input {
-    @apply text-p2 font-light bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
+    @apply text-p2 font-medium bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
     @apply hover:bg-white hover:shadow-input hover:border-transparent;
     @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
     @apply max-w-screen-sm;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "11.7.1-dev.13caf30",
+  "version": "11.7.1-dev.2e09628",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

package/src/core/ContactFooter/component.html.erb

@@ -3,8 +3,8 @@
     <div class="ui-contact-footer-box">
       <%= render(AblyUi::Core::Icon.new(name: "icon-display-live-chat", size: "3rem", additional_css: "block mb-16")) %>
       <div>
-        <div class="text-h3 mb-24">Live Chat</div>
-        <p class="text-p1 font-light">Reach out team of experts over chat powered by Ably.</p>
+        <div class="ui-text-h3 mb-24">Live Chat</div>
+        <p class="ui-text-p1">Reach out team of experts over chat powered by Ably.</p>
       </div>
       <%= tag.button type: "button", class: "ui-btn-secondary self-start mt-16", data: { id: "open-chat-widget", enabled_label: "Start a live chat", disabled_label: "Live chat unavailable" }, disabled: true do %>
         Live chat unavailable
@@ -13,18 +13,18 @@
     <div class="ui-contact-footer-box">
       <%= render(AblyUi::Core::Icon.new(name: "icon-display-call-mobile", size: "3rem", additional_css: "block mb-16")) %>
       <div class="flex-grow">
-        <div class="text-h3 mb-24">Call us</div>
-        <p class="text-p1 font-light">
-          <span class="block"><strong class="text-p1 font-medium">+1 877 434 5287</strong> (USA, toll free) </span>
-          <span class="block"><strong class="text-p1 font-medium">+44 20 3318 4689</strong> (UK) </span>
+        <div class="ui-text-h3 mb-24">Call us</div>
+        <p class="ui-text-p1">
+          <span class="block"><strong class="font-bold">+1 877 434 5287</strong> (USA, toll free) </span>
+          <span class="block"><strong class="font-bold">+44 20 3318 4689</strong> (UK) </span>
         </p>
       </div>
     </div>
     <div class="ui-contact-footer-box">
       <%= render(AblyUi::Core::Icon.new(name: "icon-display-tech-account-comms", size: "3rem", additional_css: "block mb-16")) %>
       <div>
-        <div class="text-h3 mb-24">Technical and account support</div>
-        <p class="text-p1 font-light">We&apos;re standing by to help with any questions or code.</p>
+        <div class="ui-text-h3 mb-24">Technical and account support</div>
+        <p class="ui-text-p1">We&apos;re standing by to help with any questions or code.</p>
       </div>
       <%= link_to 'Get support now', abs_url("/support"), class: "ui-btn-secondary self-start p-btn mt-16" %>
     </div>

package/src/core/ContactFooter/component.jsx

@@ -16,8 +16,8 @@ export default function ContactFooter({ urlBase }) {
         <div className="ui-contact-footer-box">
           <Icon name="icon-display-live-chat" size="3rem" additionalCSS="block mb-16" />
           <div>
-            <div className="text-h3 mb-24">Live Chat</div>
-            <p className="text-p1 font-light">Reach out team of experts over chat powered by Ably.</p>
+            <div className="ui-text-h3 mb-24">Live Chat</div>
+            <p className="ui-text-p1">Reach out team of experts over chat powered by Ably.</p>
           </div>
           <button
             type="button"
@@ -34,13 +34,13 @@ export default function ContactFooter({ urlBase }) {
         <div className="ui-contact-footer-box">
           <Icon name="icon-display-call-mobile" size="3rem" additionalCSS="block mb-16" />
           <div className="flex-grow">
-            <div className="text-h3 mb-24">Call us</div>
-            <p className="text-p1 font-light">
+            <div className="ui-text-h3 mb-24">Call us</div>
+            <p className="ui-text-p1">
               <span className="block">
-                <strong className="text-p1 font-medium">+1 877 434 5287</strong> (USA, toll free)
+                <strong className="font-bold">+1 877 434 5287</strong> (USA, toll free)
               </span>
               <span className="block">
-                <strong className="text-p1 font-medium">+44 20 3318 4689</strong> (UK)
+                <strong className="font-bold">+44 20 3318 4689</strong> (UK)
               </span>
             </p>
           </div>
@@ -49,8 +49,8 @@ export default function ContactFooter({ urlBase }) {
         <div className="ui-contact-footer-box">
           <Icon name="icon-display-tech-account-comms" size="3rem" additionalCSS="block mb-16" />
           <div>
-            <div className="text-h3 mb-24">Technical and account support</div>
-            <p className="text-p1 font-light">We&apos;re standing by to help with any questions or code.</p>
+            <div className="ui-text-h3 mb-24">Technical and account support</div>
+            <p className="ui-text-p1">We&apos;re standing by to help with any questions or code.</p>
           </div>
           <a className="ui-btn-secondary self-start p-btn mt-16" href={absUrl("/support")}>
             Get support now

package/src/core/DropdownMenu/component.jsx

@@ -92,7 +92,7 @@ const Link = ({ url, title, subtitle, iconName, children }) => {
         {title}
         {iconName ? <Icon name={iconName} size="1rem" color="text-cool-black" additionalCSS="align-middle ml-8 relative -top-1 -left-4" /> : null}
       </p>
-      {subtitle ? <p className="text-p3 mb-16 text-dark-grey">{subtitle}</p> : null}
+      {subtitle ? <p className="ui-text-p3 mb-16">{subtitle}</p> : null}
       {children}
     </a>
   );

package/src/core/FeatureFooter/component.html.erb

@@ -6,14 +6,14 @@
       <div class="p-24 sm:p-32 flex-1 h-full">
         <div class="flex flex-col h-full space-between">
           <span class="flex-1">
-            <div class="text-h3 mb-24 flex-1"><%= @title %> </div>
-            <p class="text-p1 font-light"><%= @subtitle %></p>
+            <div class="ui-text-h3 text-white mb-24 flex-1"><%= @title %> </div>
+            <p class="ui-text-p1 text-white"><%= @subtitle %></p>
             <%= tag.button type: "button", class: "ui-btn-secondary-invert self-start mt-24", data: { id: "open-chat-widget", enabled_label: live_chat_label, disabled_label: live_chat_disabled_label }, disabled: true do %>
               <%= live_chat_disabled_label %>
             <% end %>
           </span>
           <span class="flex-0 mt-24 md:mt-0">
-            <p class="text-p1 font-light">
+            <p class="ui-text-p1 text-white">
               Don’t want to chat?
               <%= link_to 'Get in touch via our contact page', abs_url("/contact"), class: "text-white underline font-medium hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus" %>
             </p>
@@ -24,9 +24,9 @@
     <div class="bg-white rounded-lg p-24 sm:p-32 w-auto">
       <div class="flex flex-col h-full space-between">
         <span class="flex-1">
-          <div class="text-h3 mb-24">Try our APIs for free</div>
-          <p class="text-p1 font-medium mb-16">Our free plan includes</p>
-          <ul class="relative ml-24 text-p1 font-light leading-8">
+          <div class="ui-text-h3 mb-24">Try our APIs for free</div>
+          <p class="ui-text-p1 mb-16">Our free plan includes</p>
+          <ul class="relative ml-24 ui-text-p1">
             <li>
               <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", size: "1.5rem", additional_css: "align-text-bottom")) %>
               6m messages per month

package/src/core/FeaturedLink/component.html.erb

@@ -1,4 +1,4 @@
-<%= link_to(@url, class: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group #{@text_size} #{@flush ? '' : 'py-8'}  #{@additional_css}", style: "--featured-link-icon-size: var(#{@text_size.gsub("text", "--fs")})") do %>
+<%= link_to(@url, class: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-#{@text_size} #{@flush ? '' : 'py-8'}  #{@additional_css}", style: "--featured-link-icon-size: var(#{@text_size.gsub("text", "--fs")})") do %>
   <% if @reverse %>
     <%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
                                       size: "calc(var(--featured-link-icon-size) * 1.25)",

package/src/core/FeaturedLink/component.jsx

@@ -6,7 +6,7 @@ import Icon from "../Icon/component.jsx";
 const FeaturedLink = ({ url, textSize = "text-p2", iconColor = "text-cool-black", flush = false, reverse = false, additionalCSS = "", children }) => (
   <a
     href={url}
-    className={`font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ${textSize} ${
+    className={`font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-${textSize} ${
       flush ? "" : "py-8"
     } ${additionalCSS}`}
     style={{ "--featured-link-icon-size": `var(${textSize.replace("text", "--fs")})` }}

package/src/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/src/core/Flash/component.jsx

@@ -125,7 +125,7 @@ const Flash = ({ id, type, content, removeFlash }) => {
     <div className={`ui-flash-message ui-grid-px ${animateEntry ? "ui-flash-message-enter" : ""}`} style={style} ref={ref} data-id="ui-flash">
       <div className={`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`}>
         {withIcons[type] && <Icon name={withIcons[type]} color={iconColor[type]} size="1.5rem" additionalCSS="mr-16 self-baseline" />}
-        <p className={`ui-flash-text ${FLASH_TEXT_COLOR[type]}`} dangerouslySetInnerHTML={{ __html: safeContent }} />
+        <p className={`ui-text-p1 mr-16 ${FLASH_TEXT_COLOR[type]}`} dangerouslySetInnerHTML={{ __html: safeContent }} />
         <button type="button" className="p-0 ml-auto self-start focus:outline-none" onClick={closeFlash}>
           <Icon name="icon-gui-close" color={iconColor[type]} size="1.5rem" additionalCSS="transition-colors" />
         </button>

package/src/core/Footer/component.html.erb

@@ -3,10 +3,10 @@
     <div class="col-span-full md:col-span-2">
       <div class="flex flex-row p-menu-row-snug">
         <%= image_tag(ably_stack_path, alt: "Ably homepage", class: "mr-24 -mt-16") %>
-        <h2 class="text-overline2 col-span-full font-mono font-bold uppercase tracking-widen-0.16">The Ably Platform</h2>
+        <h2 class="ui-text-overline2 col-span-full font-mono uppercase tracking-widen-0.16">The Ably Platform</h2>
       </div>
       <div class="md:col-span-4 md:w-3/4 xs:w-3/5 w-full">
-        <p class="font-sans text-p3 py-16 font-bold p-menu-row-snug">
+        <p class="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.
         </p>
       </div>

package/src/core/Footer/component.jsx

@@ -13,10 +13,10 @@ export default function Footer({ paths, urlBase }) {
         <div className="col-span-full md:col-span-2">
           <div className="flex flex-row p-menu-row-snug">
             <img className="mr-24 -mt-16" src={paths.ablyStack} alt="Ably homepage" />
-            <h2 className="text-overline2 font-mono font-bold col-span-full uppercase tracking-widen-0.16">The Ably Platform</h2>
+            <h2 className="ui-text-overline2 col-span-full">The Ably Platform</h2>
           </div>
           <div className="md:col-span-4 md:w-3/4 xs:w-3/5 w-full">
-            <p className="font-sans text-p3 py-16 font-bold p-menu-row-snug">
+            <p 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.
             </p>
           </div>

package/src/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/src/core/MeganavContentProducts/component.html.erb

@@ -7,7 +7,7 @@
         <h3 class="ui-meganav-overline ml-24">The Ably Platform</h3>
       </div>
 
-      <p class="text-p2 font-bold text-cool-black mb-24 leading-normal" style="max-width: 330px">
+      <p class="ui-text-p2 font-bold mb-24" style="max-width: 330px">
         Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything
         realtime, and lets you focus on your code.
       </p>

package/src/core/MeganavContentProducts/component.jsx

@@ -12,7 +12,7 @@ const MeganavContentProducts = ({ paths, absUrl }) => (
           <img src={paths.ablyStack} alt="Ably homepage" />
           <h3 className="ui-meganav-overline ml-24">The Ably Platform</h3>
         </div>
-        <p className="text-p2 font-bold text-cool-black mb-24 leading-normal" style={{ maxWidth: "330px" }}>
+        <p className="ui-text-p2 font-bold mb-24" style={{ maxWidth: "330px" }}>
           Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything
           realtime, and lets you focus on your code.
         </p>

package/src/core/Notice/component.html.erb

@@ -1,7 +1,7 @@
 <%# Note the style attribute is used for entry animation %>
 <%= tag.div class: "ui-announcement #{bg_color} #{text_color}", data: { id: "ui-notice" }, style: "max-height: 0; overflow: hidden" do %>
   <div class="ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start">
-    <%= content_wrapper class: "font-medium w-full pr-8 text-p3 self-center" do %>
+    <%= content_wrapper class: "w-full pr-8 ui-text-p3 self-center" do %>
       <strong class="font-bold whitespace-nowrap pr-4"><%= @contents[:title] %></strong>
       <span class="pr-4"><%= @contents[:body_text] %></span>
       <span class="underline cursor-pointer whitespace-nowrap"><%= @contents[:button_label] %></span>
@@ -9,7 +9,7 @@
 
     <% if close_btn? %>
       <%= button_tag type: 'button', class: 'h-20 w-20 mt-4 ml-auto border-none bg-none self-baseline' do %>
-        <%= render(AblyUi::Core::Icon.new(name: "icon-gui-close", size: "1.25rem", color: "text-white")) %>
+        <%= render(AblyUi::Core::Icon.new(name: "icon-gui-close", size: "1.25rem", color: "text-cool-black")) %>
       <% end %>
     <% end %>
   </div>

package/src/core/Notice/component.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import T from "prop-types";
 
-const contentWrapperClasses = "font-medium w-full pr-8 text-p3 self-center";
+const contentWrapperClasses = "w-full pr-8 ui-text-p3 self-center";
 
 import NoticeScripts from "./component.js";
 import Icon from "../Icon/component.jsx";
@@ -45,7 +45,7 @@ const Notice = ({ buttonLink, buttonLabel, bodyText, title, config, closeBtn, bg
 
         {closeBtn && (
           <button type="button" className="ml-auto h-20 w-20 border-none bg-none self-baseline">
-            <Icon name="icon-gui-close" size="1.25rem" color="text-white" />
+            <Icon name="icon-gui-close" size="1.25rem" color="text-cool-black" />
           </button>
         )}
       </div>

package/src/core/Showcase/component.html.erb

@@ -36,15 +36,15 @@
           <% if company[:layout] == "quotes" %>
             <%= render(AblyUi::Core::Icon.new(name: "quote", size: "1.25rem", color: "text-cool-black")) %>
 
-            <p class="text-quote font-light mb-24"><%= company[:quote] %></p>
+            <p class="ui-text-quote mb-24"><%= company[:quote] %></p>
 
             <div class="flex items-center">
               <div class="flex-shrink-0 flex-grow-0 mr-16 overflow-hidden rounded-full flex align-center justify-center w-48 h-48">
                 <%= image_tag company[:author][:thumbnail], alt: "Picture of #{company[:author][:name]}, #{company[:author][:title]}", class: "w-48 h-48 filter-grayscale" %>
               </div>
               <div>
-                <p class="text-p2 font-medium"><%= company[:author][:name] %></p>
-                <p class="text-p3 font-light"><%= company[:author][:title] %></p>
+                <p class="ui-text-p2"><%= company[:author][:name] %></p>
+                <p class="ui-text-p3"><%= company[:author][:title] %></p>
               </div>
             </div>
           <% end %>
@@ -54,16 +54,16 @@
               <% company[:columns].each_with_index do |col, n| %>
                 <% if company[:columns].last == col %>
                   <div class="flex-1 mt-40 sm:mt-0 <%= col[:classname] %>" data-id="casestudy-column">
-                    <p class="text-h4 pb-24"><%= col[:heading] %></p>
-                    <p class="text-p1 font-light"><%= col[:text] %></p>
+                    <p class="ui-text-h4 pb-24"><%= col[:heading] %></p>
+                    <p class="ui-text-p1"><%= col[:text] %></p>
                     <%- if col[:button] %>
                       <a class="ui-btn self-start p-btn mt-24" href="<%= col[:button][:href] %>"><%= col[:button][:label] %></a>
                     <% end %>
                   </div>
                 <% else %>
                   <div class="flex-1 mt-40 sm:mt-0 mr-24 sm:mr-32 xl:mr-64 <%= col[:classname] %>" data-id="casestudy-column">
-                    <p class="text-title-xl font-extra-large"><%= col[:heading] %></p>
-                    <p class="text-p1 font-light mb-0 sm:mb-32"><%= col[:text] %></p>
+                    <p class="ui-text-title-xl"><%= col[:heading] %></p>
+                    <p class="ui-text-p1 mb-0 sm:mb-32"><%= col[:text] %></p>
                   </div>
                 <% end %>
               <% end %>

package/src/core/Uptime/component.css

@@ -86,7 +86,7 @@
   .ui-uptime-key {
     @apply block mt-16 mr-20 bg-transparent;
     @apply sm:inline-block sm:mt-0;
-    @apply font-light text-p2 text-white block sm:inline-flex items-center;
+    @apply font-medium text-p2 text-white block sm:inline-flex items-center;
   }
 
   .ui-uptime-key:first-child {

package/src/core/Uptime/component.jsx

@@ -139,10 +139,7 @@ export default function Uptime({ serverUrl, linkTo = null, theme = "light" }) {
 
   if (data && data.error) {
     return (
-      <div
-        className={`flex sm:flex-row justify-center items-center p-24 border rounded font-sans font-light text-p2 ${themes[theme].text}`}
-        data-id="uptime-error"
-      >
+      <div className={`flex sm:flex-row justify-center items-center p-24 border rounded ui-text-p2 ${themes[theme].text}`} data-id="uptime-error">
         Sorry, we can’t retrieve uptime data right now.
       </div>
     );

package/src/core/styles/text.css

@@ -95,25 +95,32 @@
   }
 
   .ui-text-code {
-    @apply font-mono font-medium text-code;
+    @apply font-mono font-normal text-code;
   }
 
   .ui-text-code2 {
-    @apply font-mono font-medium text-code2;
+    @apply font-mono font-normal text-code2;
   }
 
   .ui-text-code-inline {
-    @apply font-mono font-medium text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
+    @apply font-mono font-normal text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
   }
 
   .ui-unordered-list {
-    @apply text-p1 font-medium text-cool-black;
-    @apply list-disc ml-32 my-16;
+    @apply text-p1 font-medium text-charcoal-grey;
+    @apply ml-32 my-16;
+    @apply list-disc;
   }
 
   .ui-ordered-list {
     @apply text-p1 font-medium text-charcoal-grey;
-    @apply ml-32 my-16 list-decimal;
+    @apply ml-32 my-16;
+    @apply list-decimal;
+  }
+
+  .ui-ordered-list li,
+  .ui-unordered-list li {
+    @apply mb-8;
   }
 
   .ui-unordered-list li > *:last-of-type:not(ul):not(ol),
@@ -122,11 +129,11 @@
   }
 
   .ui-unordered-list ul {
-    @apply ml-24 mt-16 list-circle;
+    @apply ml-24 my-8 list-circle;
   }
 
   .ui-ordered-list ol {
-    @apply ml-24 mt-16 list-decimal;
+    @apply ml-24 my-16 list-decimal;
   }
 
   .ui-unordered-list ul ul {
@@ -137,34 +144,6 @@
     @apply my-8;
   }
 
-  .ui-ordered-list li,
-  .ui-unordered-list li {
-    @apply font-medium font-sans tracking-widen-0;
-    line-height: var(--lh-extra-relaxed);
-  }
-
-  .ui-unordered-list-with-emphasis {
-    @apply text-p1 font-medium text-cool-black;
-    @apply list-disc ml-32 mt-32 -mb-12;
-  }
-
-  .ui-unordered-list-with-emphasis li div {
-    @apply relative -top-12;
-  }
-
-  .ui-unordered-list-with-emphasis li div > strong {
-    @apply block;
-  }
-
-  .ui-unordered-list-with-emphasis ul {
-    margin-top: calc(var(--spacing-16) + var(--spacing-8));
-    @apply ml-24 list-circle;
-  }
-
-  .ui-unordered-list-with-emphasis ul ul {
-    @apply list-square;
-  }
-
   .ui-link {
     @apply text-gui-default;
     @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;

package/src/core/styles.components.css

@@ -5,7 +5,7 @@
 
 @layer components {
   .ui-input {
-    @apply text-p2 font-light bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
+    @apply text-p2 font-medium bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
     @apply hover:bg-white hover:shadow-input hover:border-transparent;
     @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
     @apply max-w-screen-sm;