@bigbinary/neeto-molecules 1.6.3 → 1.6.5

package/dist/Settings.js

@@ -1,12 +1,14 @@
 import React, { memo, useEffect } from 'react';
-import { joinHyphenCase, getQueryParams } from '@bigbinary/neeto-commons-frontend/utils';
-import { Dropdown as Dropdown$1, Tooltip, Button, Tag, Typography, Spinner, NoData } from '@bigbinary/neetoui';
+import classnames from 'classnames';
+import { useQueryParams } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { Typography, Dropdown as Dropdown$2, Tooltip, Button, Tag, Spinner, NoData } from '@bigbinary/neetoui';
 import { mergeRight, isNotNil, isEmpty } from 'ramda';
 import { useTranslation } from 'react-i18next';
-import { noop, isNotEmpty } from '@bigbinary/neeto-cist';
-import classnames from 'classnames';
-import { MenuVertical, MenuHorizontal, Warning, Check } from '@bigbinary/neeto-icons';
-import { withRouter, Link } from 'react-router-dom';
+import { isNotEmpty, noop, filterBy } from '@bigbinary/neeto-cist';
+import Search from '@bigbinary/neeto-molecules/Search';
+import { Link, withRouter } from 'react-router-dom';
+import { MenuHorizontal, MenuVertical, Warning, Check } from '@bigbinary/neeto-icons';
+import { joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -23,35 +25,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
-
 function _typeof(o) {
   "@babel/helpers - typeof";
 
@@ -93,6 +66,140 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+var css = ":root{--neeto-molecules-main-header-height:98px;--neeto-molecules-main-header-with-breadcrumbs-height:170px}.neeto-molecules-header{align-items:flex-start;background:rgb(var(--neeto-ui-white));display:flex;flex-direction:row;flex-shrink:0;gap:16px;justify-content:space-between;min-height:98px;min-height:var(--neeto-molecules-main-header-height);padding:40px 0 24px;width:100%}@media screen and (max-width:1024px){.neeto-molecules-header{flex-wrap:wrap}}.neeto-molecules-header .neeto-molecules-header__toggle-menubar-btn{margin-right:8px}.neeto-molecules-header .neeto-molecules-header__left{align-items:flex-start;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start}.neeto-molecules-header .neeto-molecules-header__left-data-wrap{display:flex;flex-wrap:wrap}.neeto-molecules-header .neeto-molecules-header__page-title{align-items:center;display:flex;flex-direction:row;gap:12px;margin-top:-12px;width:100%}@media screen and (max-width:1024px){.neeto-molecules-header .neeto-molecules-header__page-title{margin-top:-10px}}@media screen and (max-width:768px){.neeto-molecules-header .neeto-molecules-header__page-title{margin-top:-8px}}@media screen and (max-width:576px){.neeto-molecules-header .neeto-molecules-header__page-title{margin-top:-4px}}.neeto-molecules-header .neeto-molecules-header__page-title h2{font-size:calc(1.375rem + 1.5vw);line-height:var(--neeto-ui-leading-tight)}@media (min-width:1200px){.neeto-molecules-header .neeto-molecules-header__page-title h2{font-size:2.5rem}}.neeto-molecules-header .neeto-molecules-header__breadcrumbs-wrap{display:flex;margin:0 0 40px}@media screen and (max-width:768px){.neeto-molecules-header .neeto-molecules-header__breadcrumbs-wrap{margin:0 0 16px}}.neeto-molecules-header .neeto-molecules-header__breadcrumb{align-items:center;display:flex;flex-direction:row;justify-content:flex-start;line-height:1}.neeto-molecules-header .neeto-molecules-header__breadcrumb a{text-decoration:none;transition:all .3s ease-in-out}.neeto-molecules-header .neeto-molecules-header__breadcrumb a:focus-visible{border-radius:var(--neeto-ui-rounded-sm);outline:3px solid rgba(var(--neeto-ui-primary-500),50%)}.neeto-molecules-header .neeto-molecules-header__breadcrumb-separator{font-size:12px;line-height:16px;margin:0 12px}.neeto-molecules-header .neeto-molecules-header__right{align-items:center;display:flex;gap:12px;justify-content:flex-end}@media screen and (max-width:768px){.neeto-molecules-header .neeto-molecules-header__right{flex-wrap:wrap;justify-content:flex-start}}.neeto-molecules-header .neeto-molecules-header__right .neeto-ui-btn{flex-shrink:0}.neeto-molecules-header .neeto-molecules-header__right .neeto-molecules-header__search-input{flex-grow:0;min-width:104px}.neeto-molecules-header .neeto-molecules-header__right .neeto-molecules-header__action-block{align-items:center;display:flex;flex-shrink:0;gap:12px;justify-content:flex-end}@media screen and (max-width:360px){.neeto-molecules-header .neeto-molecules-header__right .neeto-molecules-header__action-block{flex-shrink:1;flex-wrap:wrap;justify-content:flex-start}}.neeto-molecules-header--has-breadcrumbs{min-height:170px;min-height:var(--neeto-molecules-main-header-with-breadcrumbs-height)}.neeto-molecules-header--has-breadcrumbs .neeto-molecules-header__page-title{margin-top:0}.neeto-molecules-header--nano,.neeto-molecules-header--small{flex-shrink:0;min-height:0}.neeto-molecules-header--nano .neeto-molecules-header__breadcrumbs-wrap,.neeto-molecules-header--small .neeto-molecules-header__breadcrumbs-wrap{margin:0 0 16px}.neeto-molecules-header--small .neeto-molecules-header__page-title{margin-top:-4px}.neeto-molecules-header--small .neeto-molecules-header__page-title h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.neeto-molecules-header--small .neeto-molecules-header__page-title h2{font-size:2rem}}.neeto-molecules-header--nano .neeto-molecules-header__page-title{margin-top:0}.neeto-molecules-header--nano .neeto-molecules-header__page-title h2{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.neeto-molecules-header--nano .neeto-molecules-header__page-title h2{font-size:1.5rem}}";
+n(css,{});
+
+var Breadcrumbs = function Breadcrumbs(_ref) {
+  var breadcrumbs = _ref.breadcrumbs;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-header__breadcrumbs-wrap"
+  }, breadcrumbs.map(function (_ref2, index) {
+    var text = _ref2.text,
+      _ref2$link = _ref2.link,
+      link = _ref2$link === void 0 ? "#" : _ref2$link;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "neeto-molecules-header__breadcrumb",
+      "data-cy": "header-breadcrumb",
+      key: index
+    }, /*#__PURE__*/React.createElement(Link, {
+      to: link
+    }, /*#__PURE__*/React.createElement(Typography, {
+      className: "neeto-ui-text-gray-700 hover:neeto-ui-text-gray-800 neeto-molecules-header__breadcrumb-link",
+      component: "span",
+      "data-cy": text,
+      "data-test-id": text,
+      style: "body2",
+      weight: "normal"
+    }, text)), index !== breadcrumbs.length - 1 && /*#__PURE__*/React.createElement("span", {
+      className: "neeto-molecules-header__breadcrumb-separator neeto-ui-text-black"
+    }, "/"));
+  }));
+};
+var Breadcrumbs$1 = /*#__PURE__*/React.memo(Breadcrumbs);
+
+var SIZES = {
+  nano: "nano",
+  small: "small",
+  large: "large"
+};
+var DROPDOWN_BUTTON_SIZES = {
+  nano: "small",
+  small: "medium",
+  large: "large"
+};
+
+var Dropdown$1 = function Dropdown(props) {
+  return /*#__PURE__*/React.createElement(Dropdown$2, _extends({
+    buttonSize: DROPDOWN_BUTTON_SIZES[props.size],
+    buttonStyle: "secondary",
+    icon: MenuHorizontal,
+    position: "bottom-start",
+    strategy: "fixed"
+  }, props));
+};
+
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Header = function Header(_ref) {
+  var title = _ref.title,
+    searchProps = _ref.searchProps,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    actionBlock = _ref.actionBlock,
+    _ref$breadcrumbs = _ref.breadcrumbs,
+    breadcrumbs = _ref$breadcrumbs === void 0 ? [] : _ref$breadcrumbs,
+    _ref$renderDropdown = _ref.renderDropdown,
+    renderDropdown = _ref$renderDropdown === void 0 ? noop : _ref$renderDropdown,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "large" : _ref$size,
+    _ref$dataTestid = _ref["data-testid"],
+    dataTestId = _ref$dataTestid === void 0 ? "neeto-molecules-header" : _ref$dataTestid;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": dataTestId,
+    className: classnames(["neeto-molecules-header", {
+      "neeto-molecules-header--has-breadcrumbs": isNotEmpty(breadcrumbs),
+      "neeto-molecules-header--large": size === SIZES.large,
+      "neeto-molecules-header--small": size === SIZES.small,
+      "neeto-molecules-header--nano": size === SIZES.nano
+    }, className])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-header__left"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-header__left-data-wrap"
+  }, isNotEmpty(breadcrumbs) && /*#__PURE__*/React.createElement(Breadcrumbs$1, {
+    breadcrumbs: breadcrumbs
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-header__page-title"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    "data-cy": "main-header",
+    "data-test-id": "main-header",
+    lineHeight: "tight",
+    style: "h2",
+    weight: "semibold"
+  }, title), renderDropdown(function (props) {
+    return /*#__PURE__*/React.createElement(Dropdown$1, _objectSpread$3({
+      size: size
+    }, props));
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-header__right"
+  }, searchProps && /*#__PURE__*/React.createElement(Search, _extends({
+    className: classnames(["neeto-molecules-header__search-input", searchProps.className])
+  }, searchProps)), actionBlock && /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-header__action-block"
+  }, actionBlock)));
+};
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+
 var MENU_ITEM_TYPES = {
   menuItem: "menuItem",
   divider: "divider"
@@ -104,13 +211,13 @@ var DEFAULT_TOOLTIP_PROPS = {
 
 var _excluded$4 = ["label", "key"],
   _excluded2 = ["isVisible", "key"];
-var MenuItem$1 = Dropdown$1.MenuItem,
-  Menu$1 = Dropdown$1.Menu;
+var MenuItem$1 = Dropdown$2.MenuItem,
+  Menu$1 = Dropdown$2.Menu;
 var Submenu = function Submenu(_ref) {
   var label = _ref.label,
     key = _ref.key,
     menuItemProps = _objectWithoutProperties(_ref, _excluded$4);
-  return /*#__PURE__*/React.createElement(Dropdown$1, _extends({
+  return /*#__PURE__*/React.createElement(Dropdown$2, _extends({
     customTarget: /*#__PURE__*/React.createElement(MenuItem$1.Button, null, label),
     key: key,
     position: "left",
@@ -128,10 +235,10 @@ var Submenu = function Submenu(_ref) {
 };
 
 var _excluded$3 = ["onClick", "label", "type", "hasSubItems"];
-function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var MenuItem = Dropdown$1.MenuItem,
-  Divider = Dropdown$1.Divider;
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var MenuItem = Dropdown$2.MenuItem,
+  Divider = Dropdown$2.Divider;
 var MoreDropdownMenuItem = function MoreDropdownMenuItem(_ref) {
   var onClick = _ref.onClick,
     label = _ref.label,
@@ -144,19 +251,19 @@ var MoreDropdownMenuItem = function MoreDropdownMenuItem(_ref) {
     return /*#__PURE__*/React.createElement(Divider, null);
   }
   if (hasSubItems) {
-    return /*#__PURE__*/React.createElement(Submenu, _objectSpread$1({
+    return /*#__PURE__*/React.createElement(Submenu, _objectSpread$2({
       label: label
     }, menuItemProps));
   }
-  return /*#__PURE__*/React.createElement(MenuItem.Button, _objectSpread$1({
+  return /*#__PURE__*/React.createElement(MenuItem.Button, _objectSpread$2({
     onClick: onClick
   }, menuItemProps), label);
 };
 
 var _excluded$2 = ["isVisible", "key"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Menu = Dropdown$1.Menu;
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Menu = Dropdown$2.Menu;
 var MoreDropdown = function MoreDropdown(_ref) {
   var _ref$dropdownButtonPr = _ref.dropdownButtonProps,
     dropdownButtonProps = _ref$dropdownButtonPr === void 0 ? {} : _ref$dropdownButtonPr,
@@ -186,12 +293,12 @@ var MoreDropdown = function MoreDropdown(_ref) {
       style: "text"
     }, dropdownButtonProps))));
   }
-  return /*#__PURE__*/React.createElement(Dropdown$1, _extends({
+  return /*#__PURE__*/React.createElement(Dropdown$2, _extends({
     autoWidth: true,
     className: "flex",
     disabled: isDisabled,
     icon: targetIcon,
-    buttonProps: _objectSpread({
+    buttonProps: _objectSpread$1({
       className: "min-h-0 flex-shrink-0",
       style: "text",
       tooltipProps: {
@@ -437,7 +544,7 @@ var Category = function Category(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: "flex flex-col py-6"
-  }, isNotEmpty(items) && /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React.createElement(Typography, {
     className: "mb-6",
     component: "h2",
     "data-cy": "settings-category-heading",
@@ -452,27 +559,74 @@ var Category = function Category(_ref) {
   })));
 };
 
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var isLabelMatching = function isLabelMatching(label, searchTerm) {
+  return label.toLowerCase().includes(searchTerm.trim().toLowerCase());
+};
 var scrollIntoSettingCategory = function scrollIntoSettingCategory(activeCategory) {
   var _document$getElementB;
   (_document$getElementB = document.getElementById(activeCategory)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.scrollIntoView();
 };
+var filterCategories = function filterCategories(_ref) {
+  var _ref$categories = _ref.categories,
+    categories = _ref$categories === void 0 ? [] : _ref$categories,
+    _ref$searchTerm = _ref.searchTerm,
+    searchTerm = _ref$searchTerm === void 0 ? "" : _ref$searchTerm;
+  var isSearchTermBlank = !searchTerm.trim();
+  var filteredCategories = isSearchTermBlank ? categories : categories.map(function (category) {
+    return _objectSpread(_objectSpread({}, category), {}, {
+      items: filterBy({
+        label: function label(_label) {
+          return isLabelMatching(_label, searchTerm);
+        }
+      }, category.items)
+    });
+  });
+  return filterBy({
+    items: isNotEmpty
+  }, filteredCategories);
+};
 
 var Settings = function Settings(_ref) {
-  var _ref$categories = _ref.categories,
+  var _ref$isTitleHidden = _ref.isTitleHidden,
+    isTitleHidden = _ref$isTitleHidden === void 0 ? false : _ref$isTitleHidden,
+    _ref$categories = _ref.categories,
     categories = _ref$categories === void 0 ? [] : _ref$categories;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _getQueryParams = getQueryParams(),
-    categoryParam = _getQueryParams.category;
+  var _useQueryParams = useQueryParams(),
+    categoryParam = _useQueryParams.category,
+    _useQueryParams$searc = _useQueryParams.searchTerm,
+    searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
+  var filteredCategories = filterCategories({
+    categories: categories,
+    searchTerm: searchTerm
+  });
   useEffect(function () {
     scrollIntoSettingCategory(categoryParam === null || categoryParam === void 0 ? void 0 : categoryParam.toUpperCase());
   }, [categoryParam]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isEmpty(categories) ? /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames("neeto-molecules-container", {
+      "h-auto overflow-y-auto": isTitleHidden
+    })
+  }, /*#__PURE__*/React.createElement(Header, {
+    className: classnames({
+      "min-h-0 pb-4 pt-8": isTitleHidden
+    }),
+    title: !isTitleHidden && t("neetoMolecules.settingsPage.title"),
+    searchProps: {
+      className: "w-72",
+      placeholder: t("neetoMolecules.settingsPage.placeholder.search")
+    }
+  }), isEmpty(filteredCategories) ? /*#__PURE__*/React.createElement("div", {
     className: "flex h-full w-full flex-grow items-center justify-center",
     "data-testid": "settings-no-data"
   }, /*#__PURE__*/React.createElement(NoData, {
     title: t("neetoMolecules.settingsPage.noData")
-  })) : categories.map(function (_ref2) {
+  })) : /*#__PURE__*/React.createElement("div", {
+    className: "w-full space-y-12"
+  }, filteredCategories.map(function (_ref2) {
     var id = _ref2.id,
       label = _ref2.label,
       items = _ref2.items,
@@ -484,7 +638,7 @@ var Settings = function Settings(_ref) {
       label: label,
       key: id
     });
-  }));
+  })));
 };
 
 export { Settings as default };