@ably/ui 7.10.0 → 8.0.0-dev.1715d4e

package/core/MeganavContentWhyAbly.jsx

@@ -1294,7 +1294,7 @@ var fetchBlogPosts = /*#__PURE__*/(/* unused pure expression or super */ null &&
               break;
             }
 
-            console.warn("Skipping fetching blog posts, invalid blogUrl: \"".concat(blogUrl, "\""));
+            console.log("Skipping fetching blog posts, invalid blogUrl: \"".concat(blogUrl, "\""));
             return _context.abrupt("return");
 
           case 4:

package/core/MeganavControl/component.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.MeganavControl=t())}(this,(function(){return(()=>{"use strict";var e={9581:(e,t,r)=>{r.d(t,{n:()=>n});var n=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return t.querySelectorAll("[data-id=".concat(e,"]"))}}},t={};function r(n){var i=t[n];if(void 0!==i)return i.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,r),o.exports}r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var n={};return(()=>{r.d(n,{default:()=>i});var e=r(9581);function t(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}const i=function(){var r=Array.from((0,e.n)("meganav-control")),n=Array.from((0,e.n)("meganav-panel")),i=getComputedStyle(document.documentElement).getPropertyValue("--bp-md"),o=function(e,n,o){if(window.matchMedia("(hover: hover) and (pointer: fine) and (min-width: ".concat(i,")")).matches&&!r.some((function(e){return e===document.activeElement}))){var a,u=["invisible","visible"];(a=n.classList).replace.apply(a,function(e){if(Array.isArray(e))return t(e)}(c=o?u:u.reverse())||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(c)||function(e,r){if(e){if("string"==typeof e)return t(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?t(e,r):void 0}}(c)||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.")}()),e.setAttribute("aria-expanded",o)}var c};return r.map((function(e){var t=e.parentNode,i=document.querySelector("#".concat(e.getAttribute("aria-controls"))),a=function(e,t){return function(){r.forEach((function(t){return t!==e&&t.setAttribute("aria-expanded",!1)})),n.forEach((function(e){return e!==t&&e.classList.replace("visible","invisible")})),e.getAttribute("aria-expanded")?(e.setAttribute("aria-expanded",!0),t.classList.replace("invisible","visible")):(e.setAttribute("aria-expanded",!1),t.classList.replace("visible","invisible"))}}(e,i),u=function(e,t){return function(){return o(e,t,!0)}}(e,i),c=function(e,t){return function(){return o(e,t,!1)}}(e,i);return t.addEventListener("mouseenter",u),t.addEventListener("mouseleave",c),e.addEventListener("click",a),[{teardown:function(){t.removeEventListener("mouseenter",u),t.removeEventListener("mouseleave",c),e.removeEventListener("click",a)},clear:function(){e.setAttribute("aria-expanded",!1),i.classList.replace("visible","invisible")}}]})).flat()}})(),n.default})()}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.MeganavControl=t())}(this,(function(){return(()=>{"use strict";var e={9581:(e,t,r)=>{r.d(t,{A:()=>n,n:()=>i});var n=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return t.querySelector("[data-id=".concat(e,"]"))},i=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return t.querySelectorAll("[data-id=".concat(e,"]"))}}},t={};function r(n){var i=t[n];if(void 0!==i)return i.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,r),o.exports}r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var n={};return(()=>{r.d(n,{default:()=>i});var e=r(9581);function t(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}const i=function(){var r=Array.from((0,e.n)("meganav-control")),n=Array.from((0,e.n)("meganav-panel")),i=getComputedStyle(document.documentElement).getPropertyValue("--bp-md"),o=function(e){return"search"===e.dataset.control},a=function(e,n,o){if(window.matchMedia("(hover: hover) and (pointer: fine) and (min-width: ".concat(i,")")).matches&&!r.some((function(e){return e===document.activeElement}))&&!function(){var e=document.querySelector('[data-id="meganav-panel"]#panel-search');if(e)return!e.classList.contains("invisible")}()){var a,c=["invisible","visible"];(a=n.classList).replace.apply(a,function(e){if(Array.isArray(e))return t(e)}(u=o?c:c.reverse())||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(u)||function(e,r){if(e){if("string"==typeof e)return t(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?t(e,r):void 0}}(u)||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.")}()),e.setAttribute("aria-expanded",o)}var u};return r.map((function(t){var i,c,u=t.parentNode,l=document.querySelector("#".concat(t.getAttribute("aria-controls"))),s=function(t,i){return function(){if(r.forEach((function(e){return e!==t&&e.setAttribute("aria-expanded",!1)})),n.forEach((function(e){return e!==i&&e.classList.replace("visible","invisible")})),"true"===t.getAttribute("aria-expanded")?(t.setAttribute("aria-expanded",!1),i.classList.replace("visible","invisible")):(t.setAttribute("aria-expanded",!0),i.classList.replace("invisible","visible")),o(t)){var a=(0,e.A)("meganav-search-input",i);if(!a)return;a.focus()}else t.focus()}}(t,l);return t.addEventListener("click",s),o(t)||(i=function(e,t){return function(){return a(e,t,!0)}}(t,l),c=function(e,t){return function(){return a(e,t,!1)}}(t,l),u.addEventListener("mouseenter",i),u.addEventListener("mouseleave",c)),[{teardown:function(){i&&c&&(u.removeEventListener("mouseenter",i),u.removeEventListener("mouseleave",c)),t.removeEventListener("click",s)},clear:function(){t.setAttribute("aria-expanded",!1),l.classList.replace("visible","invisible")}}]})).flat()}})(),n.default})()}));

package/core/MeganavControl.jsx

@@ -271,11 +271,12 @@ __webpack_require__.r(__webpack_exports__);
 var MeganavControl = function MeganavControl(_ref) {
   var ariaControls = _ref.ariaControls,
       children = _ref.children,
-      theme = _ref.theme;
+      theme = _ref.theme,
+      additionalCSS = _ref.additionalCSS;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
     type: "button",
     "data-id": "meganav-control",
-    className: "ui-meganav-link h-64 flex items-center group ".concat(theme.textColor),
+    className: "ui-meganav-link h-64 flex items-center group ".concat(additionalCSS, " ").concat(theme.textColor),
     "aria-expanded": "false",
     "aria-controls": ariaControls,
     "aria-label": "Show ".concat(children)
@@ -290,7 +291,8 @@ var MeganavControl = function MeganavControl(_ref) {
 MeganavControl.propTypes = {
   ariaControls: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
-  theme: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object)
+  theme: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object),
+  additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MeganavControl);
 })();

package/core/MeganavItemsDesktop.jsx

@@ -83,11 +83,12 @@ Icon.propTypes = {
 var MeganavControl = function MeganavControl(_ref) {
   var ariaControls = _ref.ariaControls,
       children = _ref.children,
-      theme = _ref.theme;
+      theme = _ref.theme,
+      additionalCSS = _ref.additionalCSS;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
     type: "button",
     "data-id": "meganav-control",
-    className: "ui-meganav-link h-64 flex items-center group ".concat(theme.textColor),
+    className: "ui-meganav-link h-64 flex items-center group ".concat(additionalCSS, " ").concat(theme.textColor),
     "aria-expanded": "false",
     "aria-controls": ariaControls,
     "aria-label": "Show ".concat(children)
@@ -102,7 +103,8 @@ var MeganavControl = function MeganavControl(_ref) {
 MeganavControl.propTypes = {
   ariaControls: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
   children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
-  theme: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object)
+  theme: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().object),
+  additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MeganavControl);
 

package/core/MeganavItemsMobile.jsx

@@ -11,6 +11,56 @@
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
+/***/ 5751:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* 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 prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5697);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9008);
+
+
+
+
+var FeaturedLink = function FeaturedLink(_ref) {
+  var url = _ref.url,
+      _ref$textSize = _ref.textSize,
+      textSize = _ref$textSize === void 0 ? "text-menu3" : _ref$textSize,
+      _ref$iconColor = _ref.iconColor,
+      iconColor = _ref$iconColor === void 0 ? "text-cool-black" : _ref$iconColor,
+      _ref$flush = _ref.flush,
+      flush = _ref$flush === void 0 ? false : _ref$flush,
+      children = _ref.children;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: url,
+    className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
+    style: {
+      "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
+    }
+  }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
+    name: "icon-gui-link-arrow",
+    size: "calc(var(--featured-link-icon-size) * 1.25)",
+    color: iconColor,
+    additionalCSS: "ui-featured-link-icon"
+  }));
+};
+
+FeaturedLink.propTypes = {
+  url: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
+  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
+  flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
+
+/***/ }),
+
 /***/ 9008:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -196,6 +246,90 @@ MeganavControlMobilePanelOpen.propTypes = {
 
 /***/ }),
 
+/***/ 3833:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* 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__);
+
+
+var MeganavSearchAutocomplete = function MeganavSearchAutocomplete() {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "absolute w-full mt-8 z-10 hidden shadow-container rounded-lg bg-white border border-mid-grey",
+    "data-id": "meganav-search-autocomplete-container"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ol", {
+    className: "m-16",
+    "data-id": "meganav-search-autocomplete-list"
+  }));
+};
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MeganavSearchAutocomplete);
+
+/***/ }),
+
+/***/ 8926:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* 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 prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5697);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5751);
+
+
+
+
+var MeganavSearchSuggestions = function MeganavSearchSuggestions(_ref) {
+  var absUrl = _ref.absUrl,
+      displaySupportLink = _ref.displaySupportLink;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "ui-text-overline2 text-cool-black py-12"
+  }, "Popular pages"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "flex justify-between items-center overflow-hidden"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+    className: "flex transition-transform"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
+    className: "py-12 pr-8 flex-shrink-0"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/docs/how-ably-works"),
+    className: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"
+  }, "How does Ably work?")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
+    className: "py-12 px-8 flex-shrink-0"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/docs/quick-start-guide"),
+    className: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"
+  }, "Quickstart guide")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
+    className: "py-12 px-8 flex-shrink-0"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/docs/core-features/pubsub"),
+    className: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"
+  }, "Publish/Subscribe Messaging")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
+    className: "py-12 pl-8 flex-shrink-0"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/platform"),
+    className: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"
+  }, "Platform"))), displaySupportLink ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
+    url: absUrl("/support"),
+    textSize: "text-p2"
+  }, "Support") : null));
+};
+
+MeganavSearchSuggestions.propTypes = {
+  absUrl: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().func),
+  displaySupportLink: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MeganavSearchSuggestions);
+
+/***/ }),
+
 /***/ 1866:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -462,10 +596,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5697);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _SignOutLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1866);
-/* harmony import */ var _Meganav_component_json__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3379);
-/* harmony import */ var _MeganavControlMobileDropdown_component_jsx__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(8746);
-/* harmony import */ var _MeganavControlMobilePanelClose_component_jsx__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5598);
-/* harmony import */ var _MeganavControlMobilePanelOpen_component_jsx__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(7806);
+/* harmony import */ var _MeganavSearchSuggestions_component_jsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(8926);
+/* harmony import */ var _Icon_component_jsx__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9008);
+/* harmony import */ var _Meganav_component_json__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(3379);
+/* harmony import */ var _MeganavControlMobileDropdown_component_jsx__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(8746);
+/* harmony import */ var _MeganavControlMobilePanelClose_component_jsx__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(5598);
+/* harmony import */ var _MeganavControlMobilePanelOpen_component_jsx__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(7806);
+/* harmony import */ var _MeganavSearchAutocomplete_component_jsx__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(3833);
 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); }
 
 
@@ -476,6 +613,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 
 
+
+
+
 var MeganavItemsMobile = function MeganavItemsMobile(_ref) {
   var panels = _ref.panels,
       paths = _ref.paths,
@@ -505,28 +645,65 @@ var MeganavItemsMobile = function MeganavItemsMobile(_ref) {
     "data-id": "meganav-link"
   }, "Login")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
     className: "ui-meganav-item"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MeganavControlMobileDropdown_component_jsx__WEBPACK_IMPORTED_MODULE_4__.default, {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MeganavControlMobileDropdown_component_jsx__WEBPACK_IMPORTED_MODULE_6__.default, {
     theme: theme
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "ui-meganav-mobile-dropdown invisible",
     id: "meganav-mobile-dropdown",
     "data-id": "meganav-mobile-dropdown"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "py-16 ui-grid-px bg-white"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
-    className: "mb-16"
-  }, _Meganav_component_json__WEBPACK_IMPORTED_MODULE_3__/* .panels.map */ .h.map(function (panel) {
+    className: "pt-24 pb-16 ui-grid-px bg-white"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("form", {
+    className: "mb-16",
+    action: absUrl("/search"),
+    method: "get"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "relative w-full"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_4__.default, {
+    name: "icon-gui-search",
+    color: "text-cool-black",
+    size: "1.5rem",
+    additionalCSS: "absolute top-12 left-16 hover:text-gui-hover"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
+    type: "button",
+    className: "absolute top-12 right-16 p-0 focus:outline-gui-focus m-0 md:hidden invisible",
+    "data-id": "meganav-search-input-clear"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_4__.default, {
+    name: "icon-gui-cross-circled-fill",
+    color: "text-dark-grey",
+    size: "1.5rem",
+    additionalCSS: ""
+  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
+    type: "search",
+    name: "q",
+    className: "ui-input px-48 h-48",
+    style: {
+      maxWidth: "none"
+    },
+    placeholder: "Search",
+    autoComplete: "off",
+    "data-id": "meganav-mobile-search-input"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MeganavSearchAutocomplete_component_jsx__WEBPACK_IMPORTED_MODULE_9__.default, null))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "max-h-0 overflow-hidden transition-all",
+    "data-id": "meganav-mobile-search-suggestions"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MeganavSearchSuggestions_component_jsx__WEBPACK_IMPORTED_MODULE_3__.default, {
+    absUrl: absUrl,
+    displaySupportLink: false
+  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+    className: "mb-16",
+    "data-id": "meganav-mobile-panel-controls"
+  }, _Meganav_component_json__WEBPACK_IMPORTED_MODULE_5__/* .panels.map */ .h.map(function (panel) {
     var PanelComponent = panels[panel.component];
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
       className: "ui-meganav-mobile-item",
       key: "".concat(panel.id, "-mobile")
-    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MeganavControlMobilePanelOpen_component_jsx__WEBPACK_IMPORTED_MODULE_6__.default, {
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MeganavControlMobilePanelOpen_component_jsx__WEBPACK_IMPORTED_MODULE_8__.default, {
       ariaControls: "".concat(panel.id, "-mobile")
     }, panel.label), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "ui-meganav-panel-mobile hidden",
       id: "".concat(panel.id, "-mobile"),
       "data-scroll-lock-scrollable": true
-    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MeganavControlMobilePanelClose_component_jsx__WEBPACK_IMPORTED_MODULE_5__.default, {
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MeganavControlMobilePanelClose_component_jsx__WEBPACK_IMPORTED_MODULE_7__.default, {
       ariaControls: "".concat(panel.id, "-mobile")
     }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(PanelComponent, {
       paths: paths,