@bigbinary/neeto-molecules 1.1.78 → 1.2.0-beta2

package/dist/Settings.js

@@ -1,388 +1,30 @@
-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 { mergeRight, isNotNil, isEmpty } from 'ramda';
-import { useTranslation } from 'react-i18next';
-import { noop, isNotEmpty } from '@bigbinary/neeto-cist';
+import React__default, { memo, useEffect } from 'react';
 import classnames from 'classnames';
-import { MenuVertical, MenuHorizontal, Warning, Check } from '@bigbinary/neeto-icons';
+import useQueryParams from '@bigbinary/neeto-commons-frontend/react-utils/useQueryParams';
+import { Typography, Tag, NoData } from '@bigbinary/neetoui';
+import { omit, isEmpty } from 'ramda';
+import { useTranslation } from 'react-i18next';
+import Header from './Header.js';
+import _extends from '@babel/runtime/helpers/extends';
+import { hyphenate, isPresent, filterBy, isNotEmpty } from '@bigbinary/neeto-cist';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { Check } from '@bigbinary/neeto-icons';
+import { joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils/general';
 import { withRouter, Link } from 'react-router-dom';
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : 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 _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";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof o;
-  } : function (o) {
-    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, _typeof(o);
-}
-
-function _toPrimitive(input, hint) {
-  if (_typeof(input) !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (_typeof(res) !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
-}
-
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-
-var MENU_ITEM_TYPES = {
-  menuItem: "menuItem",
-  divider: "divider"
-};
-var DEFAULT_TOOLTIP_PROPS = {
-  disabled: true,
-  position: "bottom"
-};
-
-var _excluded$4 = ["label", "key"],
-  _excluded2 = ["isVisible", "key"];
-var MenuItem$1 = Dropdown$1.MenuItem,
-  Menu$1 = Dropdown$1.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({
-    customTarget: /*#__PURE__*/React.createElement(MenuItem$1.Button, null, label),
-    key: key,
-    position: "left",
-    trigger: "hover"
-  }, menuItemProps.dropdownProps), /*#__PURE__*/React.createElement(Menu$1, null, menuItemProps.menuItems.map(function (_ref2) {
-    var _ref2$isVisible = _ref2.isVisible,
-      isVisible = _ref2$isVisible === void 0 ? true : _ref2$isVisible,
-      key = _ref2.key,
-      menuItemProps = _objectWithoutProperties(_ref2, _excluded2);
-    if (!isVisible) return null;
-    return /*#__PURE__*/React.createElement(MoreDropdownMenuItem, _extends({
-      key: key
-    }, menuItemProps));
-  })));
-};
-
-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;
-var MoreDropdownMenuItem = function MoreDropdownMenuItem(_ref) {
-  var onClick = _ref.onClick,
-    label = _ref.label,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? MENU_ITEM_TYPES.menuItem : _ref$type,
-    _ref$hasSubItems = _ref.hasSubItems,
-    hasSubItems = _ref$hasSubItems === void 0 ? false : _ref$hasSubItems,
-    menuItemProps = _objectWithoutProperties(_ref, _excluded$3);
-  if (type === MENU_ITEM_TYPES.divider) {
-    return /*#__PURE__*/React.createElement(Divider, null);
-  }
-  if (hasSubItems) {
-    return /*#__PURE__*/React.createElement(Submenu, _objectSpread$1({
-      label: label
-    }, menuItemProps));
-  }
-  return /*#__PURE__*/React.createElement(MenuItem.Button, _objectSpread$1({
-    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;
-var MoreDropdown = function MoreDropdown(_ref) {
-  var _ref$dropdownButtonPr = _ref.dropdownButtonProps,
-    dropdownButtonProps = _ref$dropdownButtonPr === void 0 ? {} : _ref$dropdownButtonPr,
-    _ref$isVertical = _ref.isVertical,
-    isVertical = _ref$isVertical === void 0 ? false : _ref$isVertical,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    _ref$dropdownProps = _ref.dropdownProps,
-    dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
-    menuTopChildren = _ref.menuTopChildren,
-    menuBottomChildren = _ref.menuBottomChildren,
-    _ref$menuItems = _ref.menuItems,
-    menuItems = _ref$menuItems === void 0 ? [] : _ref$menuItems;
-  var tooltipProps = mergeRight(DEFAULT_TOOLTIP_PROPS, dropdownButtonProps.tooltipProps);
-  var targetIcon = isVertical ? MenuVertical : MenuHorizontal;
-  var isDropdownDisabled = isDisabled || dropdownProps.disabled;
-  if (isDropdownDisabled && !tooltipProps.disabled) {
-    return /*#__PURE__*/React.createElement(Tooltip, tooltipProps, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Button, _extends({
-      disabled: true,
-      "data-cy": "more-dropdown-button",
-      "data-testid": "nui-dropdown-button",
-      icon: targetIcon,
-      iconPosition: "right",
-      size: "medium",
-      style: "text"
-    }, dropdownButtonProps))));
-  }
-  return /*#__PURE__*/React.createElement(Dropdown$1, _extends({
-    autoWidth: true,
-    className: "flex",
-    disabled: isDisabled,
-    icon: targetIcon,
-    buttonProps: _objectSpread({
-      className: "min-h-0 flex-shrink-0",
-      style: "text"
-    }, dropdownButtonProps)
-  }, dropdownProps), /*#__PURE__*/React.createElement(Menu, null, menuTopChildren, menuItems.map(function (_ref2) {
-    var _ref2$isVisible = _ref2.isVisible,
-      isVisible = _ref2$isVisible === void 0 ? true : _ref2$isVisible,
-      key = _ref2.key,
-      menuItemProps = _objectWithoutProperties(_ref2, _excluded$2);
-    if (!isVisible) return null;
-    return /*#__PURE__*/React.createElement(MoreDropdownMenuItem, _extends({
-      key: key
-    }, menuItemProps));
-  }), menuBottomChildren));
-};
-
-var Dropdown = function Dropdown(_ref) {
-  var customDropdown = _ref.customDropdown,
-    _ref$handleManage = _ref.handleManage,
-    handleManage = _ref$handleManage === void 0 ? noop : _ref$handleManage,
-    _ref$hideDisconnect = _ref.hideDisconnect,
-    hideDisconnect = _ref$hideDisconnect === void 0 ? false : _ref$hideDisconnect,
-    _ref$onDisconnect = _ref.onDisconnect,
-    onDisconnect = _ref$onDisconnect === void 0 ? noop : _ref$onDisconnect;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  if (isNotNil(customDropdown)) {
-    return /*#__PURE__*/React.createElement("div", {
-      onClick: function onClick(e) {
-        return e.stopPropagation();
-      }
-    }, customDropdown);
-  }
-  var isManageable = isNotNil(handleManage);
-  if (!isManageable && hideDisconnect) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    }
-  }, /*#__PURE__*/React.createElement(MoreDropdown, {
-    menuItems: [{
-      isVisible: isManageable,
-      onClick: handleManage,
-      label: t("neetoMolecules.integrationCard.manage"),
-      key: "integration-card-manage-integration"
-    }, {
-      isVisible: !hideDisconnect,
-      onClick: onDisconnect,
-      label: t("neetoMolecules.integrationCard.disconnect"),
-      key: "integration-card-manage-disconnection"
-    }]
-  }));
-};
-
-var Status = function Status(_ref) {
-  var isExpired = _ref.isExpired;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var tagProps = isExpired ? {
-    icon: Warning,
-    label: t("neetoMolecules.integrationCard.tags.expired"),
-    style: "warning"
-  } : {
-    icon: Check,
-    label: t("neetoMolecules.integrationCard.tags.connected"),
-    style: "success"
-  };
-  return /*#__PURE__*/React.createElement(Tag, _extends({
-    className: "flex-row-reverse"
-  }, tagProps, {
-    "data-testid": "integration-status"
-  }));
-};
-
-var _excluded$1 = ["icon", "subIcons", "label", "description", "className", "onConnect", "onDisconnect", "onManage", "isLoading", "isConnected", "isFailed", "isExpired", "disabled", "hidden", "hideDisconnect", "onClick", "tooltipProps", "customDropdown", "dataCy", "children"];
-var IntegrationCard = function IntegrationCard(_ref) {
-  var Icon = _ref.icon,
-    _ref$subIcons = _ref.subIcons,
-    subIcons = _ref$subIcons === void 0 ? [] : _ref$subIcons,
-    _ref$label = _ref.label,
-    label = _ref$label === void 0 ? "" : _ref$label,
-    _ref$description = _ref.description,
-    description = _ref$description === void 0 ? "" : _ref$description,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? "" : _ref$className,
-    _ref$onConnect = _ref.onConnect,
-    onConnect = _ref$onConnect === void 0 ? noop : _ref$onConnect,
-    _ref$onDisconnect = _ref.onDisconnect,
-    onDisconnect = _ref$onDisconnect === void 0 ? noop : _ref$onDisconnect,
-    _ref$onManage = _ref.onManage,
-    onManage = _ref$onManage === void 0 ? undefined : _ref$onManage,
-    _ref$isLoading = _ref.isLoading,
-    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-    _ref$isConnected = _ref.isConnected,
-    isConnected = _ref$isConnected === void 0 ? false : _ref$isConnected,
-    _ref$isFailed = _ref.isFailed,
-    isFailed = _ref$isFailed === void 0 ? false : _ref$isFailed,
-    _ref$isExpired = _ref.isExpired,
-    isExpired = _ref$isExpired === void 0 ? false : _ref$isExpired,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$hidden = _ref.hidden,
-    hidden = _ref$hidden === void 0 ? false : _ref$hidden,
-    _ref$hideDisconnect = _ref.hideDisconnect,
-    hideDisconnect = _ref$hideDisconnect === void 0 ? false : _ref$hideDisconnect,
-    _ref$onClick = _ref.onClick,
-    onCardClick = _ref$onClick === void 0 ? undefined : _ref$onClick,
-    _ref$tooltipProps = _ref.tooltipProps,
-    tooltipProps = _ref$tooltipProps === void 0 ? {} : _ref$tooltipProps,
-    _ref$customDropdown = _ref.customDropdown,
-    customDropdown = _ref$customDropdown === void 0 ? null : _ref$customDropdown,
-    _ref$dataCy = _ref.dataCy,
-    dataCy = _ref$dataCy === void 0 ? "" : _ref$dataCy,
-    children = _ref.children,
-    otherProps = _objectWithoutProperties(_ref, _excluded$1);
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  if (hidden) return null;
-  var isCardClickable = isConnected && isNotNil(onCardClick);
-  var cardProps = isCardClickable ? {
-    onClick: onCardClick
-  } : {};
-  return /*#__PURE__*/React.createElement(Tooltip, _extends({
-    disabled: !disabled,
-    position: "top",
-    content: disabled && t("neetoMolecules.integrationCard.tooltip.integrationNotAvailable")
-  }, tooltipProps), /*#__PURE__*/React.createElement("div", _extends({
-    "data-cy": dataCy,
-    "data-testid": "integration-card",
-    className: classnames("outline-none neeto-ui-border-gray-300 neeto-ui-shadow-xs hover:neeto-ui-border-gray-500 focus:neeto-ui-border-gray-500 neeto-ui-rounded-lg flex flex-col border p-6 no-underline transition-colors", {
-      "hover:neeto-ui-bg-100 cursor-not-allowed opacity-50": disabled,
-      "cursor-pointer": isCardClickable
-    }, className)
-  }, cardProps, otherProps), /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-grow justify-between",
-    "data-cy": "integration-tabs"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex min-w-0 flex-col justify-end"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "relative mb-4 flex h-8"
-  }, Icon && /*#__PURE__*/React.createElement(Icon, {
-    size: 32
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "my-auto"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    className: "mb-2",
-    "data-cy": "integration-card-label",
-    style: "h4",
-    weight: "semibold"
-  }, label), /*#__PURE__*/React.createElement(Typography, {
-    className: "break-words",
-    "data-cy": "".concat(joinHyphenCase(label), "-integration-description"),
-    style: "body2"
-  }, description), children)), isNotEmpty(subIcons) && /*#__PURE__*/React.createElement("div", {
-    className: "flex h-24 flex-col gap-2"
-  }, subIcons.map(function (Icon, index) {
-    return /*#__PURE__*/React.createElement(Icon, {
-      className: "neeto-ui-text-gray-600",
-      key: index,
-      size: 24
-    });
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-border-gray-300 mt-4 w-full border-t pt-2"
-  }, isLoading ? /*#__PURE__*/React.createElement("div", {
-    className: "mt-3 flex items-center justify-start"
-  }, /*#__PURE__*/React.createElement(Spinner, null)) : /*#__PURE__*/React.createElement("div", {
-    className: "flex h-8 items-center justify-between"
-  }, isConnected && /*#__PURE__*/React.createElement(Status, {
-    isExpired: isExpired
-  }), isFailed && /*#__PURE__*/React.createElement(Button, {
-    className: "neeto-ui-text-warning-500",
-    "data-cy": "connect-button",
-    disabled: disabled || isLoading,
-    label: t("neetoMolecules.integrationCard.tryAgain"),
-    style: "link",
-    onClick: onConnect
-  }), !isConnected && !isFailed && /*#__PURE__*/React.createElement(Button, {
-    "data-cy": "connect-button",
-    "data-testid": "integraiton-card-connect-button",
-    disabled: disabled || isLoading,
-    label: t("neetoMolecules.integrationCard.connect"),
-    style: "link",
-    onClick: onConnect
-  }), (isConnected || isFailed) && /*#__PURE__*/React.createElement(Dropdown, {
-    customDropdown: customDropdown,
-    hideDisconnect: hideDisconnect,
-    onDisconnect: onDisconnect,
-    handleManage: onManage
-  })))));
-};
-
-var _excluded = ["label", "description", "icon", "path", "dataCy", "className"];
+import './Breadcrumbs.js';
+import './inject-css-c86de496.js';
+import './MoreDropdown.js';
+import './Search.js';
+import '@babel/runtime/helpers/slicedToArray';
+import '@bigbinary/neeto-commons-frontend/react-utils/useFuncDebounce';
+import '@bigbinary/neeto-commons-frontend/react-utils/useUpdateEffect';
+import '@bigbinary/neeto-commons-frontend/utils';
+
+var UNSUPPORTED_LINK_PROPS = ["staticContext", "tReady"];
+
+var _excluded$1 = ["label", "description", "icon", "path", "dataCy", "className", "children"];
 var Item = function Item(_ref) {
   var label = _ref.label,
     description = _ref.description,
@@ -392,85 +34,172 @@ var Item = function Item(_ref) {
     dataCy = _ref.dataCy,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
-    otherProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Link, _extends({
+    children = _ref.children,
+    otherProps = _objectWithoutProperties(_ref, _excluded$1);
+  return /*#__PURE__*/React__default.createElement(Link, _extends({
     "data-cy": dataCy,
     to: path,
-    className: classnames("outline-none neeto-ui-border-gray-300 neeto-ui-shadow-xs hover:neeto-ui-border-gray-500 focus:neeto-ui-border-gray-500 neeto-ui-rounded-lg flex cursor-pointer flex-col border p-6 no-underline transition-colors", className)
-  }, otherProps), /*#__PURE__*/React.createElement("div", {
+    className: classnames("neeto-ui-rounded-lg delay-220 neeto-ui-shadow-sm translate flex cursor-pointer flex-col space-y-4 border p-6 no-underline outline-none transition-transform duration-300 ease-in-out hover:-translate-y-1", className)
+  }, omit(UNSUPPORTED_LINK_PROPS, otherProps)), /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "settings-item-".concat(joinHyphenCase(label))
-  }, Icon && /*#__PURE__*/React.createElement(Icon, {
-    className: "neeto-ui-text-gray-600 mb-4",
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-2 flex items-center gap-4"
+  }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
+    className: "neeto-ui-text-gray-600",
     size: 32
-  }), /*#__PURE__*/React.createElement(Typography, {
-    className: "mb-2",
+  }), /*#__PURE__*/React__default.createElement(Typography, {
     "data-cy": "settings-item-heading",
     style: "h4",
     weight: "semibold"
-  }, label), /*#__PURE__*/React.createElement(Typography, {
+  }, label)), /*#__PURE__*/React__default.createElement(Typography, {
     "data-cy": "settings-item-description",
     style: "body2"
-  }, description)));
+  }, description)), children && /*#__PURE__*/React__default.createElement("div", {
+    className: "neeto-ui-border-gray-300 border-t pt-3"
+  }, children));
 };
 var Item$1 = /*#__PURE__*/memo(withRouter(Item));
 
+var _excluded = ["t", "isConnected", "icon", "description", "label", "path"];
+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 IntegrationItem = withT(function (_ref) {
+  var t = _ref.t,
+    isConnected = _ref.isConnected,
+    icon = _ref.icon,
+    description = _ref.description,
+    label = _ref.label,
+    path = _ref.path,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default.createElement(Item$1, _extends({}, _objectSpread$1({
+    description: description,
+    icon: icon,
+    label: label,
+    path: path
+  }, otherProps), {
+    dataCy: "".concat(hyphenate(label).replace(/\./g, "-"), "-integration-card")
+  }), isConnected && /*#__PURE__*/React__default.createElement(Tag, {
+    className: "flex-row-reverse",
+    "data-cy": "integration-status-tag",
+    icon: Check,
+    label: t("neetoMolecules.integrationCard.connected"),
+    style: "success"
+  }));
+});
+var IntegrationItem$1 = /*#__PURE__*/React__default.memo(IntegrationItem);
+
 var Category = function Category(_ref) {
   var items = _ref.items,
     label = _ref.label,
     id = _ref.id,
     isIntegration = _ref.isIntegration;
-  var SettingsCard = isIntegration ? IntegrationCard : Item$1;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col py-6",
-    id: id
-  }, isNotEmpty(items) && /*#__PURE__*/React.createElement(Typography, {
-    className: "mb-6",
+  var SettingsCard = isIntegration ? IntegrationItem$1 : Item$1;
+  var isLabelPresent = isPresent(label);
+  return /*#__PURE__*/React__default.createElement("div", {
+    id: id,
+    className: classnames("flex flex-col", {
+      "mb-7": isLabelPresent
+    })
+  }, isLabelPresent && /*#__PURE__*/React__default.createElement(Typography, {
+    className: "mb-6 mt-2",
     component: "h2",
     "data-cy": "settings-category-heading",
     style: "h2",
     weight: "semibold"
-  }, label), /*#__PURE__*/React.createElement("div", {
-    className: "grid grid-cols-1 gap-3 lg:grid-cols-2 lg:gap-6 xl:grid-cols-3 2xl:grid-cols-4"
+  }, label), /*#__PURE__*/React__default.createElement("div", {
+    className: "grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-2 lg:gap-6 xl:grid-cols-3 2xl:grid-cols-4"
   }, items.map(function (item) {
-    return /*#__PURE__*/React.createElement(SettingsCard, _extends({
+    return /*#__PURE__*/React__default.createElement(SettingsCard, _extends({
       key: item.label
     }, item));
   })));
 };
 
+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 isTextMatching = function isTextMatching(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();
+  (_document$getElementB = document.getElementById(activeCategory)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.scrollIntoView({
+    behavior: "smooth"
+  });
+};
+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(function (_ref2) {
+        var label = _ref2.label,
+          description = _ref2.description;
+        return isTextMatching(label, searchTerm) || isTextMatching(description, 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$isSearchHidden = _ref.isSearchHidden,
+    isSearchHidden = _ref$isSearchHidden === void 0 ? false : _ref$isSearchHidden,
+    _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
+  });
+  var isHeaderVisible = !isSearchHidden || !isTitleHidden;
   useEffect(function () {
-    scrollIntoSettingCategory(categoryParam === null || categoryParam === void 0 ? void 0 : categoryParam.toUpperCase());
+    scrollIntoSettingCategory(categoryParam);
   }, [categoryParam]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isEmpty(categories) ? /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classnames("neeto-molecules-container", {
+      "h-auto overflow-y-auto": isTitleHidden
+    })
+  }, isHeaderVisible && /*#__PURE__*/React__default.createElement(Header, {
+    className: classnames({
+      "min-h-0 pb-4 pt-8": isTitleHidden
+    }),
+    title: !isTitleHidden && t("neetoMolecules.settingsPage.title"),
+    searchProps: isSearchHidden ? null : {
+      className: "w-72",
+      placeholder: t("neetoMolecules.settingsPage.placeholder.search")
+    }
+  }), isEmpty(filteredCategories) ? /*#__PURE__*/React__default.createElement("div", {
     className: "flex h-full w-full flex-grow items-center justify-center",
     "data-testid": "settings-no-data"
-  }, /*#__PURE__*/React.createElement(NoData, {
+  }, /*#__PURE__*/React__default.createElement(NoData, {
     title: t("neetoMolecules.settingsPage.noData")
-  })) : categories.map(function (_ref2) {
+  })) : /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full"
+  }, filteredCategories.map(function (_ref2) {
     var id = _ref2.id,
       label = _ref2.label,
       items = _ref2.items,
       isIntegration = _ref2.isIntegration;
-    return /*#__PURE__*/React.createElement(Category, {
+    return /*#__PURE__*/React__default.createElement(Category, {
       id: id,
       isIntegration: isIntegration,
       items: items,
       label: label,
       key: id
     });
-  }));
+  })));
 };
 
 export { Settings as default };