@ably/ui 10.1.1 → 10.3.0

package/core/Notice.jsx

@@ -92,22 +92,55 @@ var ConnectStateWrapper = function ConnectStateWrapper(Component, selectors) {
 
 /***/ }),
 
-/***/ 4935:
+/***/ 8696:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "FLASH_DATA_ID": () => (/* binding */ FLASH_DATA_ID)
-/* harmony export */ });
-/* unused harmony exports reducerFlashes, Flashes */
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9281);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var dompurify__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6357);
-/* harmony import */ var dompurify__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(dompurify__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3474);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _remote_data_store__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3511);
-/* harmony import */ var _ConnectStateWrapper_component_jsx__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9787);
-/* harmony import */ var _Icon_component_jsx__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(9008);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "FLASH_DATA_ID": () => (/* binding */ FLASH_DATA_ID)
+});
+
+// UNUSED EXPORTS: Flashes, default, reducerFlashes
+
+// EXTERNAL MODULE: external {"commonjs":"react","commonjs2":"react"}
+var external_commonjs_react_commonjs2_react_ = __webpack_require__(9281);
+var external_commonjs_react_commonjs2_react_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_react_commonjs2_react_);
+// EXTERNAL MODULE: external {"commonjs":"dompurify","commonjs2":"dompurify"}
+var external_commonjs_dompurify_commonjs2_dompurify_ = __webpack_require__(6357);
+var external_commonjs_dompurify_commonjs2_dompurify_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_dompurify_commonjs2_dompurify_);
+// EXTERNAL MODULE: external {"commonjs":"prop-types","commonjs2":"prop-types"}
+var external_commonjs_prop_types_commonjs2_prop_types_ = __webpack_require__(3474);
+var external_commonjs_prop_types_commonjs2_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_prop_types_commonjs2_prop_types_);
+;// CONCATENATED MODULE: ./node_modules/nanoid/non-secure/index.js
+let urlAlphabet =
+  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict'
+let customAlphabet = (alphabet, defaultSize = 21) => {
+  return (size = defaultSize) => {
+    let id = ''
+    let i = size
+    while (i--) {
+      id += alphabet[(Math.random() * alphabet.length) | 0]
+    }
+    return id
+  }
+}
+let nanoid = (size = 21) => {
+  let id = ''
+  let i = size
+  while (i--) {
+    id += urlAlphabet[(Math.random() * 64) | 0]
+  }
+  return id
+}
+
+// EXTERNAL MODULE: ./src/core/remote-data-store.js
+var remote_data_store = __webpack_require__(3511);
+// EXTERNAL MODULE: ./src/core/ConnectStateWrapper/component.jsx
+var component = __webpack_require__(9787);
+// EXTERNAL MODULE: ./src/core/Icon/component.jsx
+var Icon_component = __webpack_require__(9008);
+;// CONCATENATED MODULE: ./src/core/Flash/component.jsx
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -142,6 +175,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
 
 
+
 var REDUCER_KEY = "flashes";
 var FLASH_DATA_ID = "ui-flashes";
 var initialState = {
@@ -171,8 +205,8 @@ var selectFlashes = function selectFlashes(store) {
 };
 
 var FlashT = {
-  type: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(["error", "success", "notice", "info", "alert"]),
-  content: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string)
+  type: external_commonjs_prop_types_commonjs2_prop_types_default().oneOf(["error", "success", "notice", "info", "alert"]),
+  content: (external_commonjs_prop_types_commonjs2_prop_types_default()).string
 };
 var FLASH_BG_COLOR = {
   error: "bg-gui-error",
@@ -191,48 +225,60 @@ var FLASH_TEXT_COLOR = {
 var AUTO_HIDE = ["success", "info", "notice"];
 var AUTO_HIDE_TIME = 8000;
 
+var useAutoHide = function useAutoHide(type, closeFlash) {
+  var timeoutId = (0,external_commonjs_react_commonjs2_react_.useRef)(null);
+  (0,external_commonjs_react_commonjs2_react_.useEffect)(function () {
+    if (AUTO_HIDE.includes(type)) {
+      timeoutId.current = setTimeout(function () {
+        closeFlash();
+      }, AUTO_HIDE_TIME);
+    }
+
+    return function () {
+      if (timeoutId.current) {
+        clearTimeout(timeoutId.current);
+      }
+    };
+  }, []);
+};
+
 var Flash = function Flash(_ref) {
-  var type = _ref.type,
-      content = _ref.content;
-  var ref = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  var id = _ref.id,
+      type = _ref.type,
+      content = _ref.content,
+      removeFlash = _ref.removeFlash;
+  var ref = (0,external_commonjs_react_commonjs2_react_.useRef)(null);
 
-  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
+  var _useState = (0,external_commonjs_react_commonjs2_react_.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
       closed = _useState2[0],
       setClosed = _useState2[1];
 
-  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0),
+  var _useState3 = (0,external_commonjs_react_commonjs2_react_.useState)(0),
       _useState4 = _slicedToArray(_useState3, 2),
       flashHeight = _useState4[0],
       setFlashHeight = _useState4[1];
 
-  var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
+  var _useState5 = (0,external_commonjs_react_commonjs2_react_.useState)(false),
       _useState6 = _slicedToArray(_useState5, 2),
       triggerEntryAnimation = _useState6[0],
       setTriggerEntryAnimation = _useState6[1];
 
-  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-    return setTriggerEntryAnimation(true);
-  }, []);
-  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-    if (AUTO_HIDE.includes(type)) {
-      setTimeout(function () {
-        // closeFlash is idempotent, we can call it even if the flash has been already closed
-        closeFlash();
-      }, AUTO_HIDE_TIME);
-    }
-  }, [closed]);
-
   var closeFlash = function closeFlash() {
     if (ref.current) {
       setFlashHeight(ref.current.getBoundingClientRect().height);
     }
 
+    setClosed(true);
     setTimeout(function () {
-      return setClosed(true);
-    }, 0);
+      removeFlash(id);
+    }, 100);
   };
 
+  (0,external_commonjs_react_commonjs2_react_.useEffect)(function () {
+    return setTriggerEntryAnimation(true);
+  }, []);
+  useAutoHide(type, closeFlash);
   var animateEntry = triggerEntryAnimation && !closed;
   var style;
 
@@ -250,7 +296,7 @@ var Flash = function Flash(_ref) {
     style = {};
   }
 
-  var safeContent = dompurify__WEBPACK_IMPORTED_MODULE_1___default().sanitize(content, {
+  var safeContent = external_commonjs_dompurify_commonjs2_dompurify_default().sanitize(content, {
     ALLOWED_TAGS: ["a"],
     ALLOWED_ATTR: ["href", "data-method", "rel"]
   });
@@ -266,28 +312,28 @@ var Flash = function Flash(_ref) {
     error: "text-white",
     alert: "text-white"
   };
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  return /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     className: "ui-flash-message ui-grid-px ".concat(animateEntry ? "ui-flash-message-enter" : ""),
     style: style,
     ref: ref,
     "data-id": "ui-flash"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     className: "".concat(FLASH_BG_COLOR[type], " p-32 flex align-center rounded shadow-container-subtle")
-  }, withIcons[type] && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_5__.default, {
+  }, withIcons[type] && /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(Icon_component.default, {
     name: withIcons[type],
     color: iconColor[type],
     size: "1.5rem",
     additionalCSS: "mr-16 self-baseline"
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
     className: "ui-flash-text ".concat(FLASH_TEXT_COLOR[type]),
     dangerouslySetInnerHTML: {
       __html: safeContent
     }
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("button", {
     type: "button",
     className: "p-0 ml-auto self-start focus:outline-none",
     onClick: closeFlash
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_5__.default, {
+  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(Icon_component.default, {
     name: "icon-gui-close",
     color: iconColor[type],
     size: "1.5rem",
@@ -299,26 +345,55 @@ Flash.propTypes = _objectSpread({}, FlashT);
 
 var Flashes = function Flashes(_ref2) {
   var flashes = _ref2.flashes;
-  var items = (flashes === null || flashes === void 0 ? void 0 : flashes.items) || [];
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+
+  var _useState7 = (0,external_commonjs_react_commonjs2_react_.useState)([]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      flashesWithIds = _useState8[0],
+      setFlashesWithIds = _useState8[1];
+
+  var removeFlash = function removeFlash(flashId) {
+    return setFlashesWithIds(function (items) {
+      return items.filter(function (item) {
+        return item.id !== flashId;
+      });
+    });
+  };
+
+  (0,external_commonjs_react_commonjs2_react_.useEffect)(function () {
+    setFlashesWithIds(function (state) {
+      return [].concat(_toConsumableArray(state), _toConsumableArray(((flashes === null || flashes === void 0 ? void 0 : flashes.items) || []).map(function (flash) {
+        return _objectSpread(_objectSpread({}, flash), {}, {
+          id: nanoid(),
+          removed: false
+        });
+      })));
+    });
+  }, [flashes]);
+  console.log({
+    flashesWithIds: flashesWithIds
+  });
+  return /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
     className: "ui-flash",
     "data-id": FLASH_DATA_ID
-  }, items.map(function (flash) {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(Flash, _extends({
-      key: flash.type
+  }, flashesWithIds.filter(function (item) {
+    return !item.removed;
+  }).map(function (flash) {
+    return /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(Flash, _extends({
+      removeFlash: removeFlash,
+      key: flash.id
     }, flash));
   }));
 };
 
 Flashes.propTypes = {
-  flashes: prop_types__WEBPACK_IMPORTED_MODULE_2___default().shape({
-    items: prop_types__WEBPACK_IMPORTED_MODULE_2___default().arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_2___default().shape(FlashT))
+  flashes: external_commonjs_prop_types_commonjs2_prop_types_default().shape({
+    items: external_commonjs_prop_types_commonjs2_prop_types_default().arrayOf(external_commonjs_prop_types_commonjs2_prop_types_default().shape(FlashT))
   })
 };
 
 var BackendFlashes = function BackendFlashes(_ref3) {
   var flashes = _ref3.flashes;
-  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+  (0,external_commonjs_react_commonjs2_react_.useEffect)(function () {
     var transformedFlashes = flashes.map(function (flash) {
       var _flash = _slicedToArray(flash, 2),
           type = _flash[0],
@@ -331,24 +406,24 @@ var BackendFlashes = function BackendFlashes(_ref3) {
     }) || [];
 
     if (transformedFlashes.length > 0) {
-      var store = (0,_remote_data_store__WEBPACK_IMPORTED_MODULE_3__/* .getRemoteDataStore */ .cO)();
+      var store = (0,remote_data_store/* getRemoteDataStore */.cO)();
       store.dispatch({
         type: "flash/push",
         payload: transformedFlashes
       });
     }
   }, []);
-  var WrappedFlashes = (0,_ConnectStateWrapper_component_jsx__WEBPACK_IMPORTED_MODULE_4__.default)(Flashes, {
+  var WrappedFlashes = (0,component.default)(Flashes, {
     flashes: selectFlashes
   });
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(WrappedFlashes, null);
+  return /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(WrappedFlashes, null);
 };
 
 BackendFlashes.propTypes = {
-  flashes: prop_types__WEBPACK_IMPORTED_MODULE_2___default().arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_2___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_2___default().string)))
+  flashes: external_commonjs_prop_types_commonjs2_prop_types_default().arrayOf(external_commonjs_prop_types_commonjs2_prop_types_default().arrayOf((external_commonjs_prop_types_commonjs2_prop_types_default()).string))
 };
 
-/* unused harmony default export */ var __WEBPACK_DEFAULT_EXPORT__ = ((/* unused pure expression or super */ null && (BackendFlashes)));
+/* harmony default export */ const Flash_component = ((/* unused pure expression or super */ null && (BackendFlashes)));
 
 /***/ }),
 
@@ -599,8 +674,8 @@ var external_commonjs_lodash_throttle_commonjs2_lodash_throttle_ = __webpack_req
 var external_commonjs_lodash_throttle_commonjs2_lodash_throttle_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_lodash_throttle_commonjs2_lodash_throttle_);
 // EXTERNAL MODULE: ./src/core/dom-query.js
 var dom_query = __webpack_require__(9581);
-// EXTERNAL MODULE: ./src/core/Flash/component.jsx
-var component = __webpack_require__(4935);
+// EXTERNAL MODULE: ./src/core/Flash/component.jsx + 1 modules
+var component = __webpack_require__(8696);
 ;// CONCATENATED MODULE: ./src/core/Notice/component.js
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 

package/core/sprites.svg

@@ -320,6 +320,18 @@
   <path fill-rule="evenodd" clip-rule="evenodd" d="M17 10.5C17 14.0899 14.0899 17 10.5 17C6.91015 17 4 14.0899 4 10.5C4 6.91015 6.91015 4 10.5 4C14.0899 4 17 6.91015 17 10.5ZM15.7618 17.1761C14.3145 18.3183 12.4869 19 10.5 19C5.80558 19 2 15.1944 2 10.5C2 5.80558 5.80558 2 10.5 2C15.1944 2 19 5.80558 19 10.5C19 12.4869 18.3183 14.3146 17.176 15.7619L22.7071 21.293L21.2929 22.7072L15.7618 17.1761ZM9.5 9.5V6.5H11.5V9.5H14.5V11.5H11.5V14.5H9.5V11.5H6.5V9.5H9.5Z" fill="currentColor"/>
 </symbol><symbol fill="none" id="sprite-icon-gui-external-link" viewBox="0 0 24 24"><title>sprite-icon-gui-external-link</title>
 	<path fill-rule="evenodd" clip-rule="evenodd" d="M3 4C3 3.44772 3.44772 3 4 3H12V1H4C2.34315 1 1 2.34315 1 4V20C1 21.6569 2.34315 23 4 23H20C21.6569 23 23 21.6569 23 20V12.4762H21V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4ZM15 3H19.6707L11.775 11.3113L13.225 12.6888L21 4.50456V10H23V2L22 1H15V3Z" fill="currentColor"/>
+</symbol><symbol fill="none" id="sprite-icon-gui-filter-flow-step-1" viewBox="0 0 24 24"><title>sprite-icon-gui-filter-flow-step-1</title>
+  <path d="M1.68174 2.24805H22.3939C22.6536 2.24792 22.904 2.32367 23.1187 2.46046C23.3329 2.59689 23.5017 2.78725 23.6159 3.00505C23.7296 3.22241 23.7879 3.46429 23.7888 3.70656C23.7898 3.94884 23.7336 4.1907 23.6217 4.40889L23.618 4.41617L21.547 8.34759C21.4172 8.59388 21.1618 8.74805 20.8834 8.74805H3.19524C2.91687 8.74805 2.66141 8.59388 2.53167 8.34759L0.458326 4.41162C0.345422 4.19369 0.288491 3.95179 0.288818 3.70936C0.289149 3.46693 0.346753 3.22517 0.460294 3.00753C0.573964 2.78964 0.74233 2.59905 0.95601 2.46221C1.17049 2.32486 1.42057 2.24847 1.68052 2.24805H1.68174Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.56484 10.248H20.511C20.5111 10.248 20.5109 10.248 20.511 10.248C20.7467 10.2479 20.9747 10.3151 21.171 10.4374C21.367 10.5595 21.5228 10.7307 21.6285 10.9279C21.7338 11.1246 21.7879 11.3441 21.7888 11.5642C21.7897 11.7844 21.7375 12.0038 21.6339 12.2013L21.63 12.2086L19.9356 15.3538C19.8047 15.5966 19.5512 15.748 19.2753 15.748H4.80316C4.52731 15.748 4.27372 15.5966 4.14289 15.3538L2.446 12.204C2.34146 12.0067 2.28851 11.7872 2.28882 11.5669C2.28913 11.3465 2.3427 11.1271 2.44783 10.9301C2.55309 10.7328 2.70836 10.5615 2.90396 10.439C3.10014 10.3161 3.32782 10.2484 3.56365 10.248L3.56484 10.248ZM20.1743 11.748L18.8274 14.248H5.25102L3.90417 11.748H20.1743ZM20.5122 11.748C20.5125 11.748 20.5119 11.748 20.5122 11.748Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.4468 17.248L5.44795 17.248L18.6282 17.248C18.6283 17.248 18.6281 17.248 18.6282 17.248C18.8377 17.248 19.0419 17.3055 19.2194 17.4121C19.3969 17.5187 19.5404 17.6697 19.6388 17.8468C19.7369 18.0234 19.788 18.2218 19.7888 18.4218C19.7896 18.6218 19.7404 18.8202 19.6439 18.9976L19.6399 19.005L18.3219 21.3638C18.1894 21.6011 17.9389 21.748 17.6672 21.748H6.41109C6.13935 21.748 5.88888 21.6011 5.75634 21.3638L4.43588 19.0004C4.33849 18.8231 4.28853 18.6246 4.28882 18.4244C4.28911 18.2241 4.33965 18.0258 4.43757 17.8488C4.5356 17.6716 4.67873 17.5204 4.85584 17.4135C5.03324 17.3063 5.23713 17.2484 5.4468 17.248ZM18.0651 18.748H6.01314L6.85118 20.248H17.2271L18.0651 18.748Z" fill="currentColor"/>
+</symbol><symbol fill="none" id="sprite-icon-gui-filter-flow-step-2" viewBox="0 0 24 24"><title>sprite-icon-gui-filter-flow-step-2</title>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M22.3939 2.24805H1.68174ZM1.68174 2.24805L1.68052 2.24805ZM22.3939 2.24805C22.6536 2.24792 22.904 2.32367 23.1187 2.46046C23.3329 2.59689 23.5017 2.78725 23.6159 3.00505C23.7296 3.22241 23.7879 3.46429 23.7888 3.70656C23.7898 3.94884 23.7336 4.1907 23.6217 4.40889L23.618 4.41617L21.547 8.34759C21.4172 8.59388 21.1618 8.74805 20.8834 8.74805H3.19524C2.91687 8.74805 2.66141 8.59388 2.53167 8.34759L0.458326 4.41162C0.345422 4.19369 0.288491 3.95179 0.28882 3.70936C0.289149 3.46693 0.346753 3.22517 0.460294 3.00753C0.573964 2.78964 0.74233 2.59905 0.95601 2.46221C1.17049 2.32486 1.42057 2.24847 1.68052 2.24805M22.2745 3.74805H1.80416L3.64786 7.24805H20.4308L22.2745 3.74805ZM22.395 3.74805C22.3953 3.74805 22.3947 3.74805 22.395 3.74805Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.56484 10.248H20.511C20.7467 10.2479 20.9747 10.3151 21.171 10.4374C21.367 10.5595 21.5228 10.7307 21.6285 10.9279C21.7338 11.1246 21.7879 11.3441 21.7888 11.5642C21.7897 11.7844 21.7375 12.0038 21.6339 12.2013L21.63 12.2086L19.9356 15.3538C19.8047 15.5966 19.5512 15.748 19.2753 15.748H4.80316C4.52731 15.748 4.27372 15.5966 4.14289 15.3538L2.446 12.204C2.34146 12.0067 2.28851 11.7872 2.28882 11.5669C2.28913 11.3465 2.3427 11.1271 2.44783 10.9301C2.55309 10.7328 2.70836 10.5615 2.90396 10.439C3.10014 10.3161 3.32782 10.2484 3.56365 10.248L3.56484 10.248Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.4468 17.248L5.44795 17.248L18.6282 17.248C18.6283 17.248 18.6281 17.248 18.6282 17.248C18.8377 17.248 19.0419 17.3055 19.2194 17.4121C19.3969 17.5187 19.5404 17.6697 19.6388 17.8468C19.7369 18.0234 19.788 18.2218 19.7888 18.4218C19.7896 18.6218 19.7404 18.8202 19.6439 18.9976L19.6399 19.005L18.3219 21.3638C18.1894 21.6011 17.9389 21.748 17.6672 21.748H6.41109C6.13935 21.748 5.88888 21.6011 5.75634 21.3638L4.43588 19.0004C4.33849 18.8231 4.28853 18.6246 4.28882 18.4244C4.28911 18.2241 4.33965 18.0258 4.43757 17.8488C4.5356 17.6716 4.67873 17.5204 4.85584 17.4135C5.03324 17.3063 5.23713 17.2484 5.4468 17.248ZM18.0651 18.748H6.01314L6.85118 20.248H17.2271L18.0651 18.748Z" fill="currentColor"/>
+</symbol><symbol fill="none" id="sprite-icon-gui-filter-flow-step-3" viewBox="0 0 24 24"><title>sprite-icon-gui-filter-flow-step-3</title>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M22.3939 2.24805H1.68174ZM1.68174 2.24805L1.68052 2.24805ZM22.3939 2.24805C22.6536 2.24792 22.904 2.32367 23.1187 2.46046C23.3329 2.59689 23.5017 2.78725 23.6159 3.00505C23.7296 3.22241 23.7879 3.46429 23.7888 3.70656C23.7898 3.94884 23.7336 4.1907 23.6217 4.40889L23.618 4.41617L21.547 8.34759C21.4172 8.59388 21.1618 8.74805 20.8834 8.74805H3.19524C2.91687 8.74805 2.66141 8.59388 2.53167 8.34759L0.458326 4.41162C0.345422 4.19369 0.288491 3.95179 0.28882 3.70936C0.289149 3.46693 0.346753 3.22517 0.460294 3.00753C0.573964 2.78964 0.74233 2.59905 0.95601 2.46221C1.17049 2.32486 1.42057 2.24847 1.68052 2.24805M22.2745 3.74805H1.80416L3.64786 7.24805H20.4308L22.2745 3.74805ZM22.395 3.74805C22.3953 3.74805 22.3947 3.74805 22.395 3.74805Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.56484 10.248H20.511C20.5111 10.248 20.5109 10.248 20.511 10.248C20.7467 10.2479 20.9747 10.3151 21.171 10.4374C21.367 10.5595 21.5228 10.7307 21.6285 10.9279C21.7338 11.1246 21.7879 11.3441 21.7888 11.5642C21.7897 11.7844 21.7375 12.0038 21.6339 12.2013L21.63 12.2086L19.9356 15.3538C19.8047 15.5966 19.5512 15.748 19.2753 15.748H4.80316C4.52731 15.748 4.27372 15.5966 4.14289 15.3538L2.446 12.204C2.34146 12.0067 2.28851 11.7872 2.28882 11.5669C2.28913 11.3465 2.3427 11.1271 2.44783 10.9301C2.55309 10.7328 2.70836 10.5615 2.90396 10.439C3.10014 10.3161 3.32782 10.2484 3.56365 10.248L3.56484 10.248ZM20.1743 11.748L18.8274 14.248H5.25102L3.90417 11.748H20.1743ZM20.5122 11.748C20.5125 11.748 20.5119 11.748 20.5122 11.748Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.4468 17.248L5.44795 17.248L18.6282 17.248C18.8377 17.248 19.0419 17.3055 19.2194 17.4121C19.3969 17.5187 19.5404 17.6697 19.6388 17.8468C19.7369 18.0234 19.788 18.2218 19.7888 18.4218C19.7896 18.6218 19.7404 18.8202 19.6439 18.9976L19.6399 19.005L18.3219 21.3638C18.1894 21.6011 17.9389 21.748 17.6672 21.748H6.41109C6.13935 21.748 5.88888 21.6011 5.75634 21.3638L4.43588 19.0004C4.33849 18.8231 4.28853 18.6246 4.28882 18.4244C4.28911 18.2241 4.33965 18.0258 4.43757 17.8488C4.5356 17.6716 4.67873 17.5204 4.85584 17.4135C5.03324 17.3063 5.23713 17.2484 5.4468 17.248Z" fill="currentColor"/>
 </symbol><symbol fill="none" id="sprite-icon-gui-history" viewBox="0 0 24 24"><title>sprite-icon-gui-history</title>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 11.4477 22.4477 11 23 11C23.5523 11 24 11.4477 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C12.5523 0 13 0.447715 13 1C13 1.55228 12.5523 2 12 2ZM12 4C12.5523 4 13 4.44772 13 5V11.0801C13 11.3721 13.1276 11.6494 13.3492 11.8394L16.1508 14.2407C16.5701 14.6002 16.6187 15.2315 16.2593 15.6508C15.8998 16.0701 15.2685 16.1187 14.8492 15.7593L12.0476 13.3579C11.3827 12.788 11 11.9559 11 11.0801V5C11 4.44772 11.4477 4 12 4ZM19.75 5.25C20.3023 5.25 20.75 4.80228 20.75 4.25C20.75 3.69772 20.3023 3.25 19.75 3.25C19.1977 3.25 18.75 3.69772 18.75 4.25C18.75 4.80228 19.1977 5.25 19.75 5.25ZM17.5 2C17.5 2.55228 17.0523 3 16.5 3C15.9477 3 15.5 2.55228 15.5 2C15.5 1.44772 15.9477 1 16.5 1C17.0523 1 17.5 1.44772 17.5 2ZM22 8.5C22.5523 8.5 23 8.05229 23 7.5C23 6.94772 22.5523 6.5 22 6.5C21.4477 6.5 21 6.94772 21 7.5C21 8.05229 21.4477 8.5 22 8.5Z" fill="currentColor"/>
 </symbol><symbol fill="none" id="sprite-icon-gui-info" viewBox="0 0 24 24"><title>sprite-icon-gui-info</title>
@@ -346,6 +358,8 @@
 <rect width="24" height="24" fill="currentColor"/>
 </clipPath>
 </defs>
+</symbol><symbol fill="none" id="sprite-icon-gui-resources" viewBox="0 0 24 24"><title>sprite-icon-gui-resources</title>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5 1.5C4.30964 1.5 3.75 2.05964 3.75 2.75V3.75H5C5.41421 3.75 5.75 4.08579 5.75 4.5C5.75 4.91421 5.41421 5.25 5 5.25H3.75V6.75H5C5.41421 6.75 5.75 7.08579 5.75 7.5C5.75 7.91421 5.41421 8.25 5 8.25H3.75V9.75H5C5.41421 9.75 5.75 10.0858 5.75 10.5C5.75 10.9142 5.41421 11.25 5 11.25H3.75V12.75H5C5.41421 12.75 5.75 13.0858 5.75 13.5C5.75 13.9142 5.41421 14.25 5 14.25H3.75V15.75H5C5.41421 15.75 5.75 16.0858 5.75 16.5C5.75 16.9142 5.41421 17.25 5 17.25H3.75V18.75H5C5.41421 18.75 5.75 19.0858 5.75 19.5C5.75 19.9142 5.41421 20.25 5 20.25H3.75V21.25C3.75 21.9404 4.30964 22.5 5 22.5H18.5C19.1904 22.5 19.75 21.9404 19.75 21.25V19.75H12C10.4812 19.75 9.25 18.5188 9.25 17V12C9.25 10.4812 10.4812 9.25 12 9.25H19.75V3.75C19.75 2.50736 18.7426 1.5 17.5 1.5H5ZM2.25 2.75V3.75H1C0.585786 3.75 0.25 4.08579 0.25 4.5C0.25 4.91421 0.585786 5.25 1 5.25H2.25V6.75H1C0.585786 6.75 0.25 7.08579 0.25 7.5C0.25 7.91421 0.585786 8.25 1 8.25H2.25V9.75H1C0.585786 9.75 0.25 10.0858 0.25 10.5C0.25 10.9142 0.585786 11.25 1 11.25H2.25V12.75H1C0.585786 12.75 0.25 13.0858 0.25 13.5C0.25 13.9142 0.585786 14.25 1 14.25H2.25V15.75H1C0.585786 15.75 0.25 16.0858 0.25 16.5C0.25 16.9142 0.585786 17.25 1 17.25H2.25V18.75H1C0.585786 18.75 0.25 19.0858 0.25 19.5C0.25 19.9142 0.585786 20.25 1 20.25H2.25V21.25C2.25 22.7688 3.48122 24 5 24H18.5C20.0188 24 21.25 22.7688 21.25 21.25V19.7388C22.6516 19.6125 23.75 18.4345 23.75 17V12C23.75 10.5655 22.6516 9.38752 21.25 9.26121V3.75C21.25 1.67893 19.5711 0 17.5 0H5C3.48122 0 2.25 1.23122 2.25 2.75ZM20.5 10.75H12C11.3096 10.75 10.75 11.3096 10.75 12V17C10.75 17.6904 11.3096 18.25 12 18.25H20.5H21C21.6904 18.25 22.25 17.6904 22.25 17V12C22.25 11.3096 21.6904 10.75 21 10.75H20.5ZM12.5 4.25C12.5 3.42157 13.1716 2.75 14 2.75H17C17.8284 2.75 18.5 3.42157 18.5 4.25V5.25C18.5 6.07843 17.8284 6.75 17 6.75H14C13.1716 6.75 12.5 6.07843 12.5 5.25V4.25ZM14 3.75C13.7239 3.75 13.5 3.97386 13.5 4.25V5.25C13.5 5.52614 13.7239 5.75 14 5.75H17C17.2761 5.75 17.5 5.52614 17.5 5.25V4.25C17.5 3.97386 17.2761 3.75 17 3.75H14ZM15.5 13.2582L17.4746 14.4992L15.5 15.7402V13.2582ZM18.0421 15.3236C18.6526 14.9399 18.6526 14.0585 18.0421 13.6747L16.0176 12.4024C15.377 11.9998 14.5 12.4363 14.5 13.2268V15.7716C14.5 16.5621 15.377 16.9986 16.0176 16.596L18.0421 15.3236Z" fill="currentColor"/>
 </symbol><symbol fill="none" id="sprite-icon-gui-search" viewBox="0 0 24 24"><title>sprite-icon-gui-search</title>
 	<path fill-rule="evenodd" clip-rule="evenodd" d="M17 10.5C17 14.0899 14.0899 17 10.5 17C6.91015 17 4 14.0899 4 10.5C4 6.91015 6.91015 4 10.5 4C14.0899 4 17 6.91015 17 10.5ZM15.7618 17.176C14.3145 18.3183 12.4869 19 10.5 19C5.80558 19 2 15.1944 2 10.5C2 5.80558 5.80558 2 10.5 2C15.1944 2 19 5.80558 19 10.5C19 12.4869 18.3183 14.3145 17.176 15.7618L22.7071 21.2929L21.2929 22.7071L15.7618 17.176Z" fill="currentColor"/>
 </symbol><symbol fill="none" id="sprite-icon-gui-tick" viewBox="0 0 24 24"><title>sprite-icon-gui-tick</title>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "10.1.1",
+  "version": "10.3.0",
   "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/DropdownMenu/component.jsx

@@ -54,8 +54,6 @@ const Trigger = ({ children, additionalTriggerCSS = "" }) => {
   );
 };
 
-<DropdownMenu.Trigger className="list of names">Click me</DropdownMenu.Trigger>;
-
 Trigger.propTypes = {
   children: T.node,
   additionalTriggerCSS: T.string,

package/src/core/Flash/component.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useRef } from "react";
 import DOMPurify from "dompurify";
 import T from "prop-types";
+import { nanoid } from "nanoid/non-secure";
 
 import { getRemoteDataStore } from "../remote-data-store";
 import ConnectStateWrapper from "../ConnectStateWrapper/component.jsx";
@@ -50,30 +51,45 @@ const FLASH_TEXT_COLOR = {
 const AUTO_HIDE = ["success", "info", "notice"];
 const AUTO_HIDE_TIME = 8000;
 
-const Flash = ({ type, content }) => {
-  const ref = useRef(null);
-  const [closed, setClosed] = useState(false);
-  const [flashHeight, setFlashHeight] = useState(0);
-  const [triggerEntryAnimation, setTriggerEntryAnimation] = useState(false);
+const useAutoHide = (type, closeFlash) => {
+  const timeoutId = useRef(null);
 
-  useEffect(() => setTriggerEntryAnimation(true), []);
   useEffect(() => {
     if (AUTO_HIDE.includes(type)) {
-      setTimeout(() => {
-        // closeFlash is idempotent, we can call it even if the flash has been already closed
+      timeoutId.current = setTimeout(() => {
         closeFlash();
       }, AUTO_HIDE_TIME);
     }
-  }, [closed]);
+
+    return () => {
+      if (timeoutId.current) {
+        clearTimeout(timeoutId.current);
+      }
+    };
+  }, []);
+};
+
+const Flash = ({ id, type, content, removeFlash }) => {
+  const ref = useRef(null);
+  const [closed, setClosed] = useState(false);
+  const [flashHeight, setFlashHeight] = useState(0);
+  const [triggerEntryAnimation, setTriggerEntryAnimation] = useState(false);
 
   const closeFlash = () => {
     if (ref.current) {
       setFlashHeight(ref.current.getBoundingClientRect().height);
     }
 
-    setTimeout(() => setClosed(true), 0);
+    setClosed(true);
+
+    setTimeout(() => {
+      removeFlash(id);
+    }, 100);
   };
 
+  useEffect(() => setTriggerEntryAnimation(true), []);
+  useAutoHide(type, closeFlash);
+
   const animateEntry = triggerEntryAnimation && !closed;
 
   let style;
@@ -123,13 +139,25 @@ Flash.propTypes = {
 };
 
 const Flashes = ({ flashes }) => {
-  const items = flashes?.items || [];
+  const [flashesWithIds, setFlashesWithIds] = useState([]);
+
+  const removeFlash = (flashId) => setFlashesWithIds((items) => items.filter((item) => item.id !== flashId));
+
+  useEffect(() => {
+    setFlashesWithIds((state) => {
+      return [...state, ...(flashes?.items || []).map((flash) => ({ ...flash, id: nanoid(), removed: false }))];
+    });
+  }, [flashes]);
+
+  console.log({ flashesWithIds });
 
   return (
     <div className="ui-flash" data-id={FLASH_DATA_ID}>
-      {items.map((flash) => (
-        <Flash key={flash.type} {...flash} />
-      ))}
+      {flashesWithIds
+        .filter((item) => !item.removed)
+        .map((flash) => (
+          <Flash removeFlash={removeFlash} key={flash.id} {...flash} />
+        ))}
     </div>
   );
 };

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

@@ -1,28 +1,3 @@
-<%= link_to logo_href, class: 'h-32' do %>
-  <%= tag.svg class: ["transition-colors", "text-cool-black"], data: { id: data_id }, width: "108", height: "32", viewBox: "0 0 108 32", xmlns: "http://www.w3.org/2000/svg" do %>
-    <path
-      d="M62.922 24.9786V4.08813H66.6933V11.6512C67.9709 10.435 69.6164 9.76044 71.3538 9.76044C75.4318 9.76044 79.0498 12.8674 79.0498 17.5484C79.0498 22.2293 75.4318 25.3465 71.3538 25.3465C69.5244 25.3465 67.7971 24.6209 66.5094 23.3024V24.9786H62.922ZM75.2785 17.5484C75.2785 14.932 73.4183 13.1025 70.9859 13.1025C68.6148 13.1025 66.7853 14.84 66.6933 17.3644V17.5484C66.6933 20.1648 68.5534 21.9942 70.9859 21.9942C73.4183 21.9942 75.2785 20.1648 75.2785 17.5484ZM80.7975 24.9786V4.08813H84.5688V24.9786H80.7975ZM89.8425 30.3954L92.0399 25.1523L86.0712 10.1284H90.1491L93.9511 20.6247L97.8144 10.1284H101.954L93.8591 30.4056H89.8425V30.3954ZM56.9329 10.1284V12.0191C55.6247 10.5883 53.7952 9.77066 51.9147 9.77066C47.8367 9.77066 44.2187 12.8777 44.2187 17.5586C44.2187 22.2497 47.8367 25.3465 51.9147 25.3465C53.8668 25.3465 55.7166 24.4982 57.0555 22.9754V24.9888H60.3465V10.1284H56.9329ZM56.5649 17.5484C56.5649 20.1341 54.7048 21.9942 52.2724 21.9942C49.8399 21.9942 47.9798 20.1341 47.9798 17.5484C47.9798 14.9626 49.8399 13.1025 52.2724 13.1025C54.6435 13.1025 56.473 14.8706 56.5649 17.3644V17.5484Z"
-      fill="currentColor"
-    />
-    <path d="M19.2858 0L3.14788 29.5369L0 27.3293L14.932 0H19.2858ZM19.5107 0L35.6487 29.5369L38.7965 27.3293L23.8646 0H19.5107Z" fill="url(#<%= gradient_id_0 %>)" />
-    <path d="M35.4238 29.7107L19.3983 17.16L3.37271 29.7107L6.64323 32L19.3983 22.0147L32.1533 32L35.4238 29.7107Z" fill="url(#<%= gradient_id_1 %>)" />
-    <defs>
-      <linearGradient id="<%= gradient_id_0 %>" x1="5.47361" y1="37.4219" x2="32.4603" y2="7.45023" gradientUnits="userSpaceOnUse">
-        <stop stop-color="#FF5416" />
-        <stop offset="0.2535" stop-color="#FF5115" />
-        <stop offset="0.461" stop-color="#FF4712" />
-        <stop offset="0.6523" stop-color="#FF350E" />
-        <stop offset="0.8327" stop-color="#FF1E08" />
-        <stop offset="1" stop-color="#FF0000" />
-      </linearGradient>
-      <linearGradient id="<%= gradient_id_1 %>" x1="10.7084" y1="39.3593" x2="26.6583" y2="21.6452" gradientUnits="userSpaceOnUse">
-        <stop stop-color="#FF5416" />
-        <stop offset="0.2535" stop-color="#FF5115" />
-        <stop offset="0.461" stop-color="#FF4712" />
-        <stop offset="0.6523" stop-color="#FF350E" />
-        <stop offset="0.8327" stop-color="#FF1E08" />
-        <stop offset="1" stop-color="#FF0000" />
-      </linearGradient>
-    </defs>
-  <% end %>
+<%= link_to logo_href, class: 'block', style: "height: 2.125rem", data: { id: data_id }, **additional_link_attrs do %>
+  <%= tag.img src: logo_url, width: "108px", alt: "Ably logo", **additional_img_attrs %>
 <% end %>

package/src/core/Logo/component.jsx

@@ -1,46 +1,10 @@
-import React, { useMemo } from "react";
+import React from "react";
 import T from "prop-types";
-import { nanoid } from "nanoid/non-secure";
-
-const Logo = ({ dataId, href = "/" }) => {
-  // This fixes a bug where if the logo is rendered more than once on the page, and one of the instances
-  // if it is hidden, the other instance will not show the ably shape from the logo.
-
-  // This is because the defs in this SVG reference ids that need to be unique ids. The browser discards the "newer"
-  // linearGradients defined in the other logo, and inherits the `hidden` style from the first.
-  const gradientIds = useMemo(() => [nanoid(), nanoid()], []);
 
+const Logo = ({ dataId, logoUrl, href = "/", additionalImgAttrs, additionalLinkAttrs }) => {
   return (
-    <a href={href} className="h-32">
-      <svg data-id={dataId} className="text-cool-black transition-colors" width="108" height="32" viewBox="0 0 108 32" xmlns="http://www.w3.org/2000/svg">
-        <path
-          d="M62.922 24.9786V4.08813H66.6933V11.6512C67.9709 10.435 69.6164 9.76044 71.3538 9.76044C75.4318 9.76044 79.0498 12.8674 79.0498 17.5484C79.0498 22.2293 75.4318 25.3465 71.3538 25.3465C69.5244 25.3465 67.7971 24.6209 66.5094 23.3024V24.9786H62.922ZM75.2785 17.5484C75.2785 14.932 73.4183 13.1025 70.9859 13.1025C68.6148 13.1025 66.7853 14.84 66.6933 17.3644V17.5484C66.6933 20.1648 68.5534 21.9942 70.9859 21.9942C73.4183 21.9942 75.2785 20.1648 75.2785 17.5484ZM80.7975 24.9786V4.08813H84.5688V24.9786H80.7975ZM89.8425 30.3954L92.0399 25.1523L86.0712 10.1284H90.1491L93.9511 20.6247L97.8144 10.1284H101.954L93.8591 30.4056H89.8425V30.3954ZM56.9329 10.1284V12.0191C55.6247 10.5883 53.7952 9.77066 51.9147 9.77066C47.8367 9.77066 44.2187 12.8777 44.2187 17.5586C44.2187 22.2497 47.8367 25.3465 51.9147 25.3465C53.8668 25.3465 55.7166 24.4982 57.0555 22.9754V24.9888H60.3465V10.1284H56.9329ZM56.5649 17.5484C56.5649 20.1341 54.7048 21.9942 52.2724 21.9942C49.8399 21.9942 47.9798 20.1341 47.9798 17.5484C47.9798 14.9626 49.8399 13.1025 52.2724 13.1025C54.6435 13.1025 56.473 14.8706 56.5649 17.3644V17.5484Z"
-          fill="currentColor"
-        />
-        <path
-          d="M19.2858 0L3.14788 29.5369L0 27.3293L14.932 0H19.2858ZM19.5107 0L35.6487 29.5369L38.7965 27.3293L23.8646 0H19.5107Z"
-          fill={`url(#${gradientIds[0]})`}
-        />
-        <path d="M35.4238 29.7107L19.3983 17.16L3.37271 29.7107L6.64323 32L19.3983 22.0147L32.1533 32L35.4238 29.7107Z" fill={`url(#${gradientIds[1]})`} />
-        <defs>
-          <linearGradient id={gradientIds[0]} x1="5.47361" y1="37.4219" x2="32.4603" y2="7.45023" gradientUnits="userSpaceOnUse">
-            <stop stopColor="#FF5416" />
-            <stop offset="0.2535" stopColor="#FF5115" />
-            <stop offset="0.461" stopColor="#FF4712" />
-            <stop offset="0.6523" stopColor="#FF350E" />
-            <stop offset="0.8327" stopColor="#FF1E08" />
-            <stop offset="1" stopColor="#FF0000" />
-          </linearGradient>
-          <linearGradient id={gradientIds[1]} x1="10.7084" y1="39.3593" x2="26.6583" y2="21.6452" gradientUnits="userSpaceOnUse">
-            <stop stopColor="#FF5416" />
-            <stop offset="0.2535" stopColor="#FF5115" />
-            <stop offset="0.461" stopColor="#FF4712" />
-            <stop offset="0.6523" stopColor="#FF350E" />
-            <stop offset="0.8327" stopColor="#FF1E08" />
-            <stop offset="1" stopColor="#FF0000" />
-          </linearGradient>
-        </defs>
-      </svg>
+    <a href={href} data-id={dataId} className="block" style={{ height: "2.125rem" }} {...additionalLinkAttrs}>
+      <img src={logoUrl} width="108px" alt="Ably logo" {...additionalImgAttrs} />
     </a>
   );
 };
@@ -48,6 +12,9 @@ const Logo = ({ dataId, href = "/" }) => {
 Logo.propTypes = {
   dataId: T.string,
   href: T.string,
+  logoUrl: T.string,
+  additionalImgAttrs: T.object,
+  additionalLinkAttrs: T.object,
 };
 
 export default React.memo(Logo);

package/src/core/Logo/component.rb

@@ -1,17 +1,26 @@
-require 'securerandom'
-
 module AblyUi
   module Core
     class Logo < ViewComponent::Base
       include AblyUi::Core::MeganavConfig
 
-      attr_reader :href, :data_id, :gradient_id_0, :gradient_id_1
+      attr_reader :href,
+                  :logo_url,
+                  :data_id,
+                  :additional_img_attrs,
+                  :additional_link_attrs
 
-      def initialize(data_id: '', href:)
+      def initialize(
+        href:,
+        logo_url:,
+        data_id: '',
+        additional_img_attrs: {},
+        additional_link_attrs: {}
+      )
         @data_id = data_id
         @href = href
-        @gradient_id_0 = "paint_linear_#{SecureRandom.uuid}"
-        @gradient_id_1 = "paint_linear_#{SecureRandom.uuid}"
+        @logo_url = logo_url
+        @additional_img_attrs = additional_img_attrs
+        @additional_link_attrs = additional_link_attrs
       end
 
       def logo_href

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

@@ -3,7 +3,7 @@
 
   <div class="ui-meganav ui-grid-px">
     <div className="mr-24">
-      <%= render(AblyUi::Core::Logo.new(data_id: "meganav-logo", href: logo_link)) %>
+      <%= render(AblyUi::Core::Logo.new(data_id: "meganav-logo", href: logo_link, logo_url: ably_logo)) %>
     </div>
     <%= render(AblyUi::Core::MeganavItemsDesktop.new(theme_name: @theme_name, url_base: url_base)) %>
 

package/src/core/Meganav/component.jsx

@@ -86,7 +86,7 @@ export default function Meganav({ paths, themeName = "white", notice, loginLink
       {notice && <Notice {...notice.props} config={notice.config} />}
       <div className="ui-meganav ui-grid-px">
         <div className="mr-24">
-          <Logo dataId="meganav-logo" href={urlBase} />
+          <Logo dataId="meganav-logo" href={urlBase} logoUrl={paths.logo} />
         </div>
 
         <MeganavItemsDesktop panels={panels} paths={paths} theme={theme} absUrl={absUrl} />

package/src/core/Meganav/component.rb

@@ -6,6 +6,7 @@ module AblyUi
     class Meganav < ViewComponent::Base
       include MeganavConfig
       include Util
+      include SharedAssets
       attr_reader :options, :login_link, :logo_link, :url_base
 
       renders_one :notice, AblyUi::Core::Notice