@bigbinary/neeto-filters-frontend 3.2.3 → 3.2.5

package/dist/index.cjs.js

@@ -7,20 +7,22 @@ var classnames = require('classnames');
 var i18next = require('i18next');
 var neetoCist = require('@bigbinary/neeto-cist');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
-var utils = require('@bigbinary/neeto-commons-frontend/utils');
-var neetoui = require('@bigbinary/neetoui');
 var ramda = require('ramda');
+var reactQuery = require('react-query');
+var neetoIcons = require('@bigbinary/neeto-icons');
+var neetoui = require('@bigbinary/neetoui');
+var formik = require('@bigbinary/neetoui/formik');
 var reactI18next = require('react-i18next');
+var reactRouterDom_min = require('react-router-dom/cjs/react-router-dom.min');
+var utils = require('@bigbinary/neeto-commons-frontend/utils');
+var yup = require('yup');
 var reactRouterDom = require('react-router-dom');
 var useHotkeys = require('@bigbinary/neeto-hotkeys');
-var neetoIcons = require('@bigbinary/neeto-icons');
-var formik = require('@bigbinary/neetoui/formik');
-var reactQuery = require('react-query');
 var axios = require('axios');
-var yup = require('yup');
 var Search = require('@bigbinary/neeto-molecules/Search');
 var MenuBar = require('@bigbinary/neeto-molecules/MenuBar');
-var InlineInput = require('@bigbinary/neeto-molecules/InlineInput');
+var dnd = require('@hello-pangea/dnd');
+var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -45,42 +47,12 @@ function _interopNamespace(e) {
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var i18next__default = /*#__PURE__*/_interopDefaultLegacy(i18next);
+var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 var useHotkeys__default = /*#__PURE__*/_interopDefaultLegacy(useHotkeys);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
-var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 var Search__default = /*#__PURE__*/_interopDefaultLegacy(Search);
 var MenuBar__default = /*#__PURE__*/_interopDefaultLegacy(MenuBar);
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
+var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
 
 function _typeof(o) {
   "@babel/helpers - typeof";
@@ -123,6 +95,92 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+
+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 _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
 var SEGMENTS_BASE_URL = "/neeto_filters/segments";
 var DATE_OPTIONS = [{
   label: "Today",
@@ -205,21 +263,6 @@ var DATE_RULES = {
 var SEARCH_TERM_KEY = "search_term";
 var SEGMENT_ID_KEY = "segment_id";
 
-var SHORTCUTS = {
-  closePane: {
-    sequence: "escape",
-    description: i18next.t("neetoFilters.shortcuts.closePane")
-  },
-  deleteBlock: {
-    sequence: "backspace",
-    description: i18next.t("neetoFilters.shortcuts.deleteBlock")
-  },
-  openFilterPane: {
-    sequence: "enter",
-    description: i18next.t("neetoFilters.shortcuts.openFilterPane")
-  }
-};
-
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -237,6 +280,44 @@ dayjs_min.exports;
 var dayjs_minExports = dayjs_min.exports;
 var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
 
+var timezone$1 = {exports: {}};
+
+timezone$1.exports;
+
+(function (module, exports) {
+	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t={year:0,month:1,day:2,hour:3,minute:4,second:5},e={};return function(n,i,o){var r,a=function(t,n,i){void 0===i&&(i={});var o=new Date(t),r=function(t,n){void 0===n&&(n={});var i=n.timeZoneName||"short",o=t+"|"+i,r=e[o];return r||(r=new Intl.DateTimeFormat("en-US",{hour12:!1,timeZone:t,year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit",timeZoneName:i}),e[o]=r),r}(n,i);return r.formatToParts(o)},u=function(e,n){for(var i=a(e,n),r=[],u=0;u<i.length;u+=1){var f=i[u],s=f.type,m=f.value,c=t[s];c>=0&&(r[c]=parseInt(m,10));}var d=r[3],l=24===d?0:d,v=r[0]+"-"+r[1]+"-"+r[2]+" "+l+":"+r[4]+":"+r[5]+":000",h=+e;return (o.utc(v).valueOf()-(h-=h%1e3))/6e4},f=i.prototype;f.tz=function(t,e){void 0===t&&(t=r);var n=this.utcOffset(),i=this.toDate(),a=i.toLocaleString("en-US",{timeZone:t}),u=Math.round((i-new Date(a))/1e3/60),f=o(a).$set("millisecond",this.$ms).utcOffset(15*-Math.round(i.getTimezoneOffset()/15)-u,!0);if(e){var s=f.utcOffset();f=f.add(n-s,"minute");}return f.$x.$timezone=t,f},f.offsetName=function(t){var e=this.$x.$timezone||o.tz.guess(),n=a(this.valueOf(),e,{timeZoneName:t}).find((function(t){return "timezonename"===t.type.toLowerCase()}));return n&&n.value};var s=f.startOf;f.startOf=function(t,e){if(!this.$x||!this.$x.$timezone)return s.call(this,t,e);var n=o(this.format("YYYY-MM-DD HH:mm:ss:SSS"));return s.call(n,t,e).tz(this.$x.$timezone,!0)},o.tz=function(t,e,n){var i=n&&e,a=n||e||r,f=u(+o(),a);if("string"!=typeof t)return o(t).tz(a);var s=function(t,e,n){var i=t-60*e*1e3,o=u(i,n);if(e===o)return [i,e];var r=u(i-=60*(o-e)*1e3,n);return o===r?[i,o]:[t-60*Math.min(o,r)*1e3,Math.max(o,r)]}(o.utc(t,i).valueOf(),f,a),m=s[0],c=s[1],d=o(m).utcOffset(c);return d.$x.$timezone=a,d},o.tz.guess=function(){return Intl.DateTimeFormat().resolvedOptions().timeZone},o.tz.setDefault=function(t){r=t;};}})); 
+} (timezone$1, timezone$1.exports));
+
+var timezoneExports = timezone$1.exports;
+var timezone = /*@__PURE__*/getDefaultExportFromCjs(timezoneExports);
+
+var utc$1 = {exports: {}};
+
+utc$1.exports;
+
+(function (module, exports) {
+	!function(t,i){module.exports=i();}(commonjsGlobal,(function(){var t="minute",i=/[+-]\d\d(?::?\d\d)?/g,e=/([+-]|\d\d)/g;return function(s,f,n){var u=f.prototype;n.utc=function(t){var i={date:t,utc:!0,args:arguments};return new f(i)},u.utc=function(i){var e=n(this.toDate(),{locale:this.$L,utc:!0});return i?e.add(this.utcOffset(),t):e},u.local=function(){return n(this.toDate(),{locale:this.$L,utc:!1})};var o=u.parse;u.parse=function(t){t.utc&&(this.$u=!0),this.$utils().u(t.$offset)||(this.$offset=t.$offset),o.call(this,t);};var r=u.init;u.init=function(){if(this.$u){var t=this.$d;this.$y=t.getUTCFullYear(),this.$M=t.getUTCMonth(),this.$D=t.getUTCDate(),this.$W=t.getUTCDay(),this.$H=t.getUTCHours(),this.$m=t.getUTCMinutes(),this.$s=t.getUTCSeconds(),this.$ms=t.getUTCMilliseconds();}else r.call(this);};var a=u.utcOffset;u.utcOffset=function(s,f){var n=this.$utils().u;if(n(s))return this.$u?0:n(this.$offset)?a.call(this):this.$offset;if("string"==typeof s&&(s=function(t){void 0===t&&(t="");var s=t.match(i);if(!s)return null;var f=(""+s[0]).match(e)||["-",0,0],n=f[0],u=60*+f[1]+ +f[2];return 0===u?0:"+"===n?u:-u}(s),null===s))return this;var u=Math.abs(s)<=16?60*s:s,o=this;if(f)return o.$offset=u,o.$u=0===s,o;if(0!==s){var r=this.$u?this.toDate().getTimezoneOffset():-1*this.utcOffset();(o=this.local().add(u+r,t)).$offset=u,o.$x.$localOffset=r;}else o=this.utc();return o};var h=u.format;u.format=function(t){var i=t||(this.$u?"YYYY-MM-DDTHH:mm:ss[Z]":"");return h.call(this,i)},u.valueOf=function(){var t=this.$utils().u(this.$offset)?0:this.$offset+(this.$x.$localOffset||(new Date).getTimezoneOffset());return this.$d.valueOf()-6e4*t},u.isUTC=function(){return !!this.$u},u.toISOString=function(){return this.toDate().toISOString()},u.toString=function(){return this.toDate().toUTCString()};var l=u.toDate;u.toDate=function(t){return "s"===t&&this.$offset?n(this.format("YYYY-MM-DD HH:mm:ss:SSS")).toDate():l.call(this)};var c=u.diff;u.diff=function(t,i,e){if(t&&this.$u===t.$u)return c.call(this,t,i,e);var s=this.local(),f=n(t).local();return c.call(s,f,i,e)};}})); 
+} (utc$1, utc$1.exports));
+
+var utcExports = utc$1.exports;
+var utc = /*@__PURE__*/getDefaultExportFromCjs(utcExports);
+
+var weekday$1 = {exports: {}};
+
+weekday$1.exports;
+
+(function (module, exports) {
+	!function(e,t){module.exports=t();}(commonjsGlobal,(function(){return function(e,t){t.prototype.weekday=function(e){var t=this.$locale().weekStart||0,i=this.$W,n=(i<t?i+7:i)-t;return this.$utils().u(e)?n:this.subtract(n,"day").add(e,"day")};}})); 
+} (weekday$1, weekday$1.exports));
+
+var weekdayExports = weekday$1.exports;
+var weekday = /*@__PURE__*/getDefaultExportFromCjs(weekdayExports);
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(weekday);
+dayjs.Ls.en.weekStart = 1;
+
 var NUMBER_RULES = [{
   label: i18next.t("neetoFilters.rules.is"),
   value: "is"
@@ -275,6 +356,26 @@ var TEXT_RULES = [{
   label: i18next.t("neetoFilters.rules.doesNotEndWith"),
   value: "does_not_end_with"
 }];
+var MULTI_DROPDOWN_RULES = [{
+  label: i18next.t("neetoFilters.rules.in"),
+  value: "in"
+}, {
+  label: i18next.t("neetoFilters.rules.notIn"),
+  value: "not_in"
+}, {
+  label: i18next.t("neetoFilters.rules.isEmpty"),
+  value: "is_unknown"
+}];
+var SINGLE_DROPDOWN_RULES = [{
+  label: i18next.t("neetoFilters.rules.is"),
+  value: "is"
+}, {
+  label: i18next.t("neetoFilters.rules.isNot"),
+  value: "is_not"
+}, {
+  label: i18next.t("neetoFilters.rules.isEmpty"),
+  value: "is_unknown"
+}];
 var DEFAULT_BOOLEAN_OPTIONS = [{
   label: i18next.t("neetoFilters.common.yes"),
   value: "true"
@@ -289,94 +390,16 @@ var DEFAULT_HELP_ICON_PROPS = {
   }
 };
 
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(r, l) {
-  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (null != t) {
-    var e,
-      n,
-      i,
-      u,
-      a = [],
-      f = !0,
-      o = !1;
-    try {
-      if (i = (t = t.call(r)).next, 0 === l) {
-        if (Object(t) !== t) return;
-        f = !1;
-      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
-    } catch (r) {
-      o = !0, n = r;
-    } finally {
-      try {
-        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
-      } finally {
-        if (o) throw n;
-      }
-    }
-    return a;
-  }
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-var timezone$1 = {exports: {}};
-
-timezone$1.exports;
-
-(function (module, exports) {
-	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t={year:0,month:1,day:2,hour:3,minute:4,second:5},e={};return function(n,i,o){var r,a=function(t,n,i){void 0===i&&(i={});var o=new Date(t),r=function(t,n){void 0===n&&(n={});var i=n.timeZoneName||"short",o=t+"|"+i,r=e[o];return r||(r=new Intl.DateTimeFormat("en-US",{hour12:!1,timeZone:t,year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit",timeZoneName:i}),e[o]=r),r}(n,i);return r.formatToParts(o)},u=function(e,n){for(var i=a(e,n),r=[],u=0;u<i.length;u+=1){var f=i[u],s=f.type,m=f.value,c=t[s];c>=0&&(r[c]=parseInt(m,10));}var d=r[3],l=24===d?0:d,v=r[0]+"-"+r[1]+"-"+r[2]+" "+l+":"+r[4]+":"+r[5]+":000",h=+e;return (o.utc(v).valueOf()-(h-=h%1e3))/6e4},f=i.prototype;f.tz=function(t,e){void 0===t&&(t=r);var n=this.utcOffset(),i=this.toDate(),a=i.toLocaleString("en-US",{timeZone:t}),u=Math.round((i-new Date(a))/1e3/60),f=o(a).$set("millisecond",this.$ms).utcOffset(15*-Math.round(i.getTimezoneOffset()/15)-u,!0);if(e){var s=f.utcOffset();f=f.add(n-s,"minute");}return f.$x.$timezone=t,f},f.offsetName=function(t){var e=this.$x.$timezone||o.tz.guess(),n=a(this.valueOf(),e,{timeZoneName:t}).find((function(t){return "timezonename"===t.type.toLowerCase()}));return n&&n.value};var s=f.startOf;f.startOf=function(t,e){if(!this.$x||!this.$x.$timezone)return s.call(this,t,e);var n=o(this.format("YYYY-MM-DD HH:mm:ss:SSS"));return s.call(n,t,e).tz(this.$x.$timezone,!0)},o.tz=function(t,e,n){var i=n&&e,a=n||e||r,f=u(+o(),a);if("string"!=typeof t)return o(t).tz(a);var s=function(t,e,n){var i=t-60*e*1e3,o=u(i,n);if(e===o)return [i,e];var r=u(i-=60*(o-e)*1e3,n);return o===r?[i,o]:[t-60*Math.min(o,r)*1e3,Math.max(o,r)]}(o.utc(t,i).valueOf(),f,a),m=s[0],c=s[1],d=o(m).utcOffset(c);return d.$x.$timezone=a,d},o.tz.guess=function(){return Intl.DateTimeFormat().resolvedOptions().timeZone},o.tz.setDefault=function(t){r=t;};}})); 
-} (timezone$1, timezone$1.exports));
-
-var timezoneExports = timezone$1.exports;
-var timezone = /*@__PURE__*/getDefaultExportFromCjs(timezoneExports);
-
-var utc$1 = {exports: {}};
-
-utc$1.exports;
-
-(function (module, exports) {
-	!function(t,i){module.exports=i();}(commonjsGlobal,(function(){var t="minute",i=/[+-]\d\d(?::?\d\d)?/g,e=/([+-]|\d\d)/g;return function(s,f,n){var u=f.prototype;n.utc=function(t){var i={date:t,utc:!0,args:arguments};return new f(i)},u.utc=function(i){var e=n(this.toDate(),{locale:this.$L,utc:!0});return i?e.add(this.utcOffset(),t):e},u.local=function(){return n(this.toDate(),{locale:this.$L,utc:!1})};var o=u.parse;u.parse=function(t){t.utc&&(this.$u=!0),this.$utils().u(t.$offset)||(this.$offset=t.$offset),o.call(this,t);};var r=u.init;u.init=function(){if(this.$u){var t=this.$d;this.$y=t.getUTCFullYear(),this.$M=t.getUTCMonth(),this.$D=t.getUTCDate(),this.$W=t.getUTCDay(),this.$H=t.getUTCHours(),this.$m=t.getUTCMinutes(),this.$s=t.getUTCSeconds(),this.$ms=t.getUTCMilliseconds();}else r.call(this);};var a=u.utcOffset;u.utcOffset=function(s,f){var n=this.$utils().u;if(n(s))return this.$u?0:n(this.$offset)?a.call(this):this.$offset;if("string"==typeof s&&(s=function(t){void 0===t&&(t="");var s=t.match(i);if(!s)return null;var f=(""+s[0]).match(e)||["-",0,0],n=f[0],u=60*+f[1]+ +f[2];return 0===u?0:"+"===n?u:-u}(s),null===s))return this;var u=Math.abs(s)<=16?60*s:s,o=this;if(f)return o.$offset=u,o.$u=0===s,o;if(0!==s){var r=this.$u?this.toDate().getTimezoneOffset():-1*this.utcOffset();(o=this.local().add(u+r,t)).$offset=u,o.$x.$localOffset=r;}else o=this.utc();return o};var h=u.format;u.format=function(t){var i=t||(this.$u?"YYYY-MM-DDTHH:mm:ss[Z]":"");return h.call(this,i)},u.valueOf=function(){var t=this.$utils().u(this.$offset)?0:this.$offset+(this.$x.$localOffset||(new Date).getTimezoneOffset());return this.$d.valueOf()-6e4*t},u.isUTC=function(){return !!this.$u},u.toISOString=function(){return this.toDate().toISOString()},u.toString=function(){return this.toDate().toUTCString()};var l=u.toDate;u.toDate=function(t){return "s"===t&&this.$offset?n(this.format("YYYY-MM-DD HH:mm:ss:SSS")).toDate():l.call(this)};var c=u.diff;u.diff=function(t,i,e){if(t&&this.$u===t.$u)return c.call(this,t,i,e);var s=this.local(),f=n(t).local();return c.call(s,f,i,e)};}})); 
-} (utc$1, utc$1.exports));
-
-var utcExports = utc$1.exports;
-var utc = /*@__PURE__*/getDefaultExportFromCjs(utcExports);
-
-var weekday$1 = {exports: {}};
-
-weekday$1.exports;
-
-(function (module, exports) {
-	!function(e,t){module.exports=t();}(commonjsGlobal,(function(){return function(e,t){t.prototype.weekday=function(e){var t=this.$locale().weekStart||0,i=this.$W,n=(i<t?i+7:i)-t;return this.$utils().u(e)?n:this.subtract(n,"day").add(e,"day")};}})); 
-} (weekday$1, weekday$1.exports));
-
-var weekdayExports = weekday$1.exports;
-var weekday = /*@__PURE__*/getDefaultExportFromCjs(weekdayExports);
-
-dayjs.extend(utc);
-dayjs.extend(timezone);
-dayjs.extend(weekday);
-dayjs.Ls.en.weekStart = 1;
-
-function ownKeys$4(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$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var groupByGroup = ramda.groupBy(function (_ref) {
-  var group = _ref.group;
-  return group || "individual";
-});
-var standardizeColumnType = function standardizeColumnType(kind) {
-  // neeto-fields-nano supports `monetary` and `number` as type of fields, which will be acting as `decimal` in action.
-  if (["custom.monetary", "custom.number"].includes(kind)) {
-    return "custom.decimal";
+function ownKeys$5(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$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var groupByGroup = ramda.groupBy(function (_ref) {
+  var group = _ref.group;
+  return group || "individual";
+});
+var standardizeColumnType = function standardizeColumnType(kind) {
+  // neeto-fields-nano supports `monetary` and `number` as type of fields, which will be acting as `decimal` in action.
+  if (["custom.monetary", "custom.number"].includes(kind)) {
+    return "custom.decimal";
   }
   return kind;
 };
@@ -406,6 +429,9 @@ var isTime = function isTime(type) {
 var isMulti = function isMulti(type) {
   return type === "multi_option" || type === "custom.multi_option";
 };
+var isSingle = function isSingle(type) {
+  return type === "single_option" || type === "custom.single_option";
+};
 var isText = function isText(type) {
   return type === "text" || type === "custom.text";
 };
@@ -498,7 +524,7 @@ var buildUpdatedFilter = function buildUpdatedFilter(_ref8) {
   if (isMulti(defaultType)) {
     return ramda.mergeLeft(filter, {
       value: ramda.pluck("value", option),
-      rule: "in"
+      rule: rule
     });
   } else if (isDate(defaultType)) {
     return ramda.mergeLeft(filter, buildDateValue(option));
@@ -521,6 +547,11 @@ var buildUpdatedFilter = function buildUpdatedFilter(_ref8) {
     });
   } else if (isTime(defaultType)) {
     return ramda.mergeLeft(filter, buildTimeValue(option));
+  } else if (isSingle(defaultType)) {
+    return ramda.mergeLeft(filter, {
+      value: option.value,
+      rule: rule
+    });
   }
   return ramda.mergeLeft(filter, {
     value: option.value,
@@ -551,40 +582,53 @@ var buildFiltersFromSearchParams = function buildFiltersFromSearchParams(columns
         value: value
       }, column);
     } else if (isMulti(defaultType)) {
-      return ramda.mergeLeft({
-        rule: "in",
-        value: value.split("|")
-      }, column);
-    } else if (isDigit(defaultType) || isText(defaultType)) {
       var _value$split = value.split("+rule-"),
         _value$split2 = _slicedToArray(_value$split, 2),
         filterValue = _value$split2[0],
         rule = _value$split2[1];
       return ramda.mergeLeft({
         rule: rule,
-        value: filterValue
-      }, column);
-    } else if (isTime(defaultType) && isCustomTimeRange(value)) {
-      return ramda.mergeLeft({
-        value: value.split(",")
+        value: filterValue.split("|")
       }, column);
-    } else if (isSingleDate(defaultType)) {
+    } else if (isSingle(defaultType)) {
       var _value$split3 = value.split("+rule-"),
         _value$split4 = _slicedToArray(_value$split3, 2),
         _filterValue = _value$split4[0],
         _rule = _value$split4[1];
       return ramda.mergeLeft({
         rule: _rule,
-        value: _rule === "between" ? _filterValue.split(",") : _filterValue
+        value: _filterValue
       }, column);
-    } else if (isSingleTime(defaultType)) {
+    } else if (isDigit(defaultType) || isText(defaultType)) {
       var _value$split5 = value.split("+rule-"),
         _value$split6 = _slicedToArray(_value$split5, 2),
         _filterValue2 = _value$split6[0],
         _rule2 = _value$split6[1];
       return ramda.mergeLeft({
         rule: _rule2,
-        value: _rule2 === "between" ? _filterValue2.split(",") : _filterValue2
+        value: _filterValue2
+      }, column);
+    } else if (isTime(defaultType) && isCustomTimeRange(value)) {
+      return ramda.mergeLeft({
+        value: value
+      }, column);
+    } else if (isSingleDate(defaultType)) {
+      var _value$split7 = value.split("+rule-"),
+        _value$split8 = _slicedToArray(_value$split7, 2),
+        _filterValue3 = _value$split8[0],
+        _rule3 = _value$split8[1];
+      return ramda.mergeLeft({
+        rule: _rule3,
+        value: _rule3 === "between" ? _filterValue3.split(",") : _filterValue3
+      }, column);
+    } else if (isSingleTime(defaultType)) {
+      var _value$split9 = value.split("+rule-"),
+        _value$split10 = _slicedToArray(_value$split9, 2),
+        _filterValue4 = _value$split10[0],
+        _rule4 = _value$split10[1];
+      return ramda.mergeLeft({
+        rule: _rule4,
+        value: _rule4 === "between" ? _filterValue4.split(",") : _filterValue4
       }, column);
     } else if (isBoolean(defaultType)) {
       return ramda.mergeLeft({
@@ -667,7 +711,7 @@ var buildDatePayload = function buildDatePayload(value) {
 var buildSingleDatePayload = function buildSingleDatePayload(filter) {
   var value = filter.value;
   var filterValue = Array.isArray(value) ? value.join(",") : value;
-  return _objectSpread$4(_objectSpread$4({}, filter), {}, {
+  return _objectSpread$5(_objectSpread$5({}, filter), {}, {
     value: filterValue,
     type: "date"
   });
@@ -675,7 +719,7 @@ var buildSingleDatePayload = function buildSingleDatePayload(filter) {
 var buildSingleTimePayload = function buildSingleTimePayload(filter) {
   var value = filter.value;
   var filterValue = Array.isArray(value) ? value.join(",") : value;
-  return _objectSpread$4(_objectSpread$4({}, filter), {}, {
+  return _objectSpread$5(_objectSpread$5({}, filter), {}, {
     value: filterValue,
     type: "time"
   });
@@ -847,7 +891,9 @@ var createUrlParamString = function createUrlParamString(_ref15) {
   } else if (isSingleDate(defaultType) || isSingleTime(defaultType)) {
     return value && "".concat(value, "+rule-").concat(rule) || value;
   } else if (isMulti(defaultType)) {
-    return value.join("|");
+    return "".concat(value.join("|"), "+rule-").concat(rule);
+  } else if (isSingle(defaultType)) {
+    return "".concat(value, "+rule-").concat(rule);
   } else if (isBoolean(defaultType)) {
     return getLabelFromBool({
       value: value,
@@ -943,7 +989,7 @@ var buildFilterColumnsFromFields = function buildFilterColumnsFromFields(_ref22)
       var id = field.id,
         name = field.name,
         kind = field.kind;
-      var column = _objectSpread$4({
+      var column = _objectSpread$5({
         key: ramda.toLower(name),
         node: "".concat(name, ":").concat(id),
         label: neetoCist.capitalize(name),
@@ -967,7 +1013,7 @@ var buildFilterColumnsFromFields = function buildFilterColumnsFromFields(_ref22)
 };
 var getColumnsWithStandardizedType = function getColumnsWithStandardizedType(columns) {
   return columns.map(function (column) {
-    return _objectSpread$4(_objectSpread$4({}, column), {}, {
+    return _objectSpread$5(_objectSpread$5({}, column), {}, {
       type: standardizeColumnType(column.type)
     });
   });
@@ -975,272 +1021,923 @@ var getColumnsWithStandardizedType = function getColumnsWithStandardizedType(col
 var isKeywordFilterPresent = function isKeywordFilterPresent(keyworFilter) {
   return ramda.not(ramda.isEmpty(keyworFilter.node));
 };
+var isNilOrEmpty = function isNilOrEmpty(param) {
+  return ramda.isNil(param) || ramda.isEmpty(param);
+};
 
-var buildCustomDateValue = function buildCustomDateValue(value) {
-  var isBeforeOrAfter = Math.abs(dayjs(value[1]).diff(dayjs(value[0]), "year")) >= 90;
-  if (isBeforeOrAfter) {
-    var currentMoment = dayjs();
-    var diffWithStart = Math.abs(currentMoment.diff(dayjs(value[0]), "year"));
-    var diffWithEnd = Math.abs(currentMoment.diff(dayjs(value[1]), "year"));
-    return diffWithStart < diffWithEnd ? "after-".concat(utils.dateFormat.date(dayjs(value[0]).subtract(1, "day"))) : "before-".concat(utils.dateFormat.date(dayjs(value[1]).add(1, "day")));
+var buildDropdownValue = function buildDropdownValue(_ref) {
+  var defaultType = _ref.defaultType,
+    filter = _ref.filter,
+    options = _ref.options;
+  if (!filter) return null;
+  if (isMulti(defaultType)) {
+    return options.filter(function (_ref2) {
+      var value = _ref2.value;
+      return filter.value.includes(value);
+    });
   }
-  return value.map(utils.dateFormat.date).join(" - ");
+  return neetoCist.findBy({
+    value: filter.value
+  }, options);
 };
-var buildFilterValue = function buildFilterValue(filter) {
+var buildSingleTimeValue = function buildSingleTimeValue(filter) {
   var _findBy2;
-  var _filter$defaultType = filter.defaultType,
-    defaultType = _filter$defaultType === void 0 ? filter.type : _filter$defaultType,
-    value = filter.value,
-    rule = filter.rule,
-    _filter$values = filter.values,
-    initialValues = _filter$values === void 0 ? [] : _filter$values;
-  var values = initialValues.map(ramda.modify("value", function (value) {
-    return value.toString();
+  if (!filter) return null;
+  return (_findBy2 = neetoCist.findBy({
+    value: filter.value
+  }, TIME_OPTIONS)) !== null && _findBy2 !== void 0 ? _findBy2 : ramda.last(TIME_OPTIONS);
+};
+var getOtherProps = function getOtherProps(props) {
+  return ramda.omit(["key", "node", "label", "type", "values", "model", "showRuleSelector"], props);
+};
+var buildDropdownOptions = function buildDropdownOptions(_ref3) {
+  var defaultType = _ref3.defaultType,
+    filter = _ref3.filter,
+    options = _ref3.options;
+  options = options.map(ramda.modify("value", function (value) {
+    return value === null || value === void 0 ? void 0 : value.toString();
   }));
-  if (isDate(defaultType) && isCustomDateRange(value)) {
-    return buildCustomDateValue(value);
-  } else if (isTime(defaultType) && isCustomTimeRange(value)) {
-    return value.map(utils.dateFormat.time).join(" - ");
-  } else if (isDate(defaultType) || isTime(defaultType)) {
-    return neetoCist.humanize(value);
-  } else if (isMulti(defaultType)) {
-    return value.map(function (value) {
-      var _findBy;
-      return ((_findBy = neetoCist.findBy({
+  if (!filter) return options;
+  if (isMulti(defaultType)) {
+    var selectedOptions = filter.value.map(function (value) {
+      return neetoCist.findBy({
         value: value
-      }, values)) === null || _findBy === void 0 ? void 0 : _findBy.label) || value;
-    }).join(", ");
-  } else if (isSingleDate(defaultType)) {
-    return rule === "between" ? value.map(utils.dateFormat.date).join(" - ") : utils.dateFormat.date(value);
-  } else if (isSingleTime(defaultType)) {
-    return rule === "between" ? value.map(utils.dateFormat.time).join(" - ") : utils.dateFormat.time(value);
-  } else if (isBoolean(defaultType)) {
-    return getLabelFromBool({
-      value: value,
-      values: values
+      }, options) || neetoCist.toLabelAndValue(value);
+    });
+    var nonSelectedOptions = options.filter(function (option) {
+      return !filter.value.includes(option.value);
     });
+    return ramda.concat(selectedOptions, nonSelectedOptions);
   }
-  return ((_findBy2 = neetoCist.findBy({
-    value: value
-  }, values)) === null || _findBy2 === void 0 ? void 0 : _findBy2.label) || value;
+  if (!neetoCist.findBy({
+    value: filter.value
+  }, options)) {
+    return ramda.append(neetoCist.toLabelAndValue(filter.value), options);
+  }
+  return options;
 };
-var buildRuleValue = function buildRuleValue(_ref) {
-  var rule = _ref.rule,
-    defaultType = _ref.defaultType;
-  if (isText(defaultType)) {
-    return neetoCist.findBy({
-      value: rule
-    }, TEXT_RULES).label;
-  } else if (isDigit(defaultType)) {
-    return neetoCist.findBy({
-      value: rule
-    }, NUMBER_RULES).label;
-  } else if (isSingleDate(defaultType)) {
-    return neetoCist.findBy({
-      value: rule
-    }, SINGLE_DATE_OPTIONS).label;
-  } else if (isSingleTime(defaultType)) {
-    return neetoCist.findBy({
-      value: rule
-    }, SINGLE_TIME_OPTIONS).label;
+var initializeDateRule = function initializeDateRule(filter) {
+  return filter ? neetoCist.findBy({
+    value: filter === null || filter === void 0 ? void 0 : filter.value
+  }, DATE_OPTIONS) || findDateOption(filter, DATE_OPTIONS) : {};
+};
+var getDateValue = function getDateValue(value, rule) {
+  if (ramda.isEmpty(value) || ramda.isNil(value)) {
+    return null;
   }
-  return "";
+  if (rule.value === "custom-date-range") {
+    return value;
+  }
+  return rule.value === "before" ? dayjs(value[1]).add(1, "day") : dayjs(value[0]).subtract(1, "day");
 };
-var hasOnlyKeywordFilter = function hasOnlyKeywordFilter(filters) {
-  return filters.length === 1 && filters[0].key === SEARCH_TERM_KEY;
+var findDateOption = function findDateOption(filter, options) {
+  var value = filter.value;
+  var isBeforeOrAfter = dayjs(value[1]).diff(dayjs(value[0]), "year") >= 90;
+  if (ramda.not(isBeforeOrAfter)) {
+    return ramda.last(options);
+  }
+  var currentMoment = dayjs();
+  var diffWithStart = Math.abs(currentMoment.diff(dayjs(value[0]), "year"));
+  var diffWithEnd = Math.abs(currentMoment.diff(dayjs(value[1]), "year"));
+  return diffWithStart < diffWithEnd ? neetoCist.findBy({
+    value: "after"
+  }, options) : neetoCist.findBy({
+    value: "before"
+  }, options);
 };
-
-var Block = function Block(_ref) {
-  var filter = _ref.filter,
-    handleDelete = _ref.handleDelete,
-    setIsPaneOpen = _ref.setIsPaneOpen;
-  var key = filter.key,
-    _filter$defaultType = filter.defaultType,
-    defaultType = _filter$defaultType === void 0 ? filter.type : _filter$defaultType,
-    label = filter.label,
-    rule = filter.rule,
-    defaultValue = filter.defaultValue;
-  var filterValue = buildFilterValue(filter);
-  var ruleContent = buildRuleValue({
-    rule: rule,
-    defaultType: defaultType
-  });
-  var blockLength = label.length + ruleContent.length + filterValue.length;
-  var toolTipDisabled = blockLength <= 50;
-  var blockContent = !toolTipDisabled ? "".concat(filterValue.slice(0, 50 - blockLength), "...") : filterValue;
-  var deleteBlockHotKeyRef = useHotkeys__default["default"](SHORTCUTS.deleteBlock.sequence, function () {
-    return handleDelete(key);
-  }, {
-    mode: "scoped"
+var buildDateValues = function buildDateValues(dates, selectedRule) {
+  if (selectedRule.value === "after") {
+    return [dates.add(1, "day"), dates.add(100, "year")];
+  } else if (selectedRule.value === "before") {
+    return [dates.subtract(100, "year"), dates.subtract(1, "day")];
+  }
+  return dates;
+};
+var buildHelpIconProps = function buildHelpIconProps(helpIconProps) {
+  return ramda.mergeDeepRight(DEFAULT_HELP_ICON_PROPS, helpIconProps);
+};
+var hasInvalidTimes = function hasInvalidTimes(times) {
+  if (Array.isArray(times)) {
+    return times.some(function (time) {
+      return time.isValid();
+    }) === false;
+  }
+  return !times.isValid();
+};
+var areCustomTimeRangeValuesNotValid = function areCustomTimeRangeValuesNotValid(times) {
+  return !times.every(function (time) {
+    return time.isValid();
   });
-  var openFilterPaneHotKeyRef = useHotkeys__default["default"](SHORTCUTS.openFilterPane.sequence, function () {
-    return setIsPaneOpen(key);
-  }, {
-    mode: "scoped"
+};
+
+// eslint-disable-next-line @bigbinary/neeto/use-standard-date-time-formats
+var formatSingleTime = function formatSingleTime(time) {
+  return dayjs(time).format("HH:mm:ss");
+};
+var formatTime = function formatTime(value, timePickerType) {
+  if (isNilOrEmpty(value)) return null;
+  if (timePickerType === "range") {
+    return value.map(formatSingleTime);
+  }
+  return formatSingleTime(value);
+};
+var isRuleEmpty = function isRuleEmpty(rule) {
+  return ramda.equals(rule, "is_unknown");
+};
+
+var Boolean = function Boolean(_ref) {
+  var column = _ref.column,
+    filter = _ref.filter,
+    handleApplyFilter = _ref.handleApplyFilter,
+    autoFocus = _ref.autoFocus;
+  var key = column.key,
+    _column$defaultType = column.defaultType,
+    defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
+    label = column.label,
+    values = column.values,
+    _column$helpIconProps = column.helpIconProps,
+    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
+  var options = ramda.isNil(values) || ramda.isEmpty(values) ? DEFAULT_BOOLEAN_OPTIONS : values;
+  var otherProps = getOtherProps(column);
+  var value = buildDropdownValue({
+    defaultType: defaultType,
+    filter: filter,
+    options: options
   });
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
-    content: filterValue,
-    disabled: toolTipDisabled,
-    position: "bottom",
-    theme: "light"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-filters-bar__block",
-    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-block"),
-    tabIndex: 0,
-    ref: function ref(node) {
-      deleteBlockHotKeyRef.current = node;
-      openFilterPaneHotKeyRef.current = node;
-    },
-    onClick: function onClick() {
-      return setIsPaneOpen(key);
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var handleChange = function handleChange(option) {
+    if (ramda.isEmpty(option) || ramda.isNil(option)) {
+      handleApplyFilter({
+        _delete: true
+      });
+      return;
     }
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    style: "body2"
-  }, label, ":"), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "neeto-ui-text-gray-600",
-    style: "body2"
-  }, ruleContent), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    style: "body2"
-  }, blockContent), !defaultValue && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-filters-bar__block-close"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoIcons.Close, {
-    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-block-close-btn"),
-    size: 16,
-    strokeWidth: 2,
-    onClick: function onClick(event) {
-      event.stopPropagation();
-      handleDelete(key);
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      option: option
+    });
+    handleApplyFilter(updatedFilter);
+  };
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-filters-pane-filter__item-wrapper"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
+    autoFocus: autoFocus,
+    label: label,
+    options: options,
+    value: value,
+    isClearable: true
+  }, neetoCist.isNotEmpty(helpIconProps) && {
+    labelProps: {
+      helpIconProps: buildHelpIconProps(helpIconProps)
     }
-  }))));
+  }, {
+    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-filter"),
+    strategy: "fixed",
+    placeholder: t("neetoFilters.messages.selectOption", {
+      resource: label
+    }),
+    onChange: handleChange
+  }, otherProps)));
 };
+var Boolean$1 = /*#__PURE__*/React__default["default"].memo(Boolean);
 
-var ChildBlock = function ChildBlock(_ref) {
-  var childKey = _ref.childKey,
-    setIsPaneOpen = _ref.setIsPaneOpen,
-    handleDelete = _ref.handleDelete;
-  var deleteBlockHotKeyRef = useHotkeys__default["default"](SHORTCUTS.deleteBlock.sequence, function () {
-    return handleDelete(childKey);
+var Datetime = function Datetime(_ref) {
+  var column = _ref.column,
+    filter = _ref.filter,
+    handleApplyFilter = _ref.handleApplyFilter,
+    autoFocus = _ref.autoFocus;
+  var _useState = React.useState(initializeDateRule(filter)),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedRule = _useState2[0],
+    setSelectedRule = _useState2[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var key = column.key,
+    _column$defaultType = column.defaultType,
+    defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
+    label = column.label,
+    _column$helpIconProps = column.helpIconProps,
+    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
+  var isDatePickerShown = filter && isCustomDateRange(filter.value);
+  var otherProps = getOtherProps(column);
+  var handleChange = function handleChange(option) {
+    if (ramda.isEmpty(option) || ramda.isNil(option)) {
+      handleApplyFilter({
+        _delete: true
+      });
+      setSelectedRule({});
+      return;
+    }
+    setSelectedRule(option);
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      option: option
+    });
+    handleApplyFilter(updatedFilter);
+  };
+  var handleDateRangeChange = function handleDateRangeChange(dates) {
+    if (ramda.isEmpty(dates) || ramda.isNil(dates)) {
+      handleApplyFilter({
+        _delete: true
+      });
+      setSelectedRule({});
+      return;
+    }
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      option: {
+        value: ramda.pluck("$d", buildDateValues(dates, selectedRule)).map(function (date) {
+          return date.toISOString();
+        })
+      }
+    });
+    handleApplyFilter(updatedFilter);
+  };
+  React.useEffect(function () {
+    ramda.isNil(filter) && setSelectedRule({});
+  }, [filter]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-filters-pane-filter__item-wrapper"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
+    autoFocus: autoFocus,
+    label: label,
+    isClearable: true,
+    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-filter"),
+    options: DATE_OPTIONS,
+    strategy: "fixed",
+    value: selectedRule,
+    placeholder: t("neetoFilters.messages.selectResource", {
+      resource: label
+    })
+  }, neetoCist.isNotEmpty(helpIconProps) && {
+    labelProps: {
+      helpIconProps: buildHelpIconProps(helpIconProps)
+    }
   }, {
-    mode: "scoped"
+    onChange: handleChange
+  })), isDatePickerShown && /*#__PURE__*/React__default["default"].createElement(neetoui.DatePicker, _extends({
+    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-date-range"),
+    getPopupContainer: ramda.prop("parentNode"),
+    type: (selectedRule === null || selectedRule === void 0 ? void 0 : selectedRule.value) === "custom-date-range" ? "range" : "date",
+    value: getDateValue(filter === null || filter === void 0 ? void 0 : filter.value, selectedRule),
+    onChange: handleDateRangeChange
+  }, otherProps)));
+};
+var Datetime$1 = /*#__PURE__*/React__default["default"].memo(Datetime);
+
+var Dropdown = function Dropdown(_ref) {
+  var column = _ref.column,
+    filter = _ref.filter,
+    handleApplyFilter = _ref.handleApplyFilter,
+    autoFocus = _ref.autoFocus,
+    filters = _ref.filters;
+  var key = column.key,
+    label = column.label,
+    values = column.values,
+    defaultValue = column.defaultValue,
+    _column$defaultType = column.defaultType,
+    defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
+    _column$showRuleSelec = column.showRuleSelector,
+    showRuleSelector = _column$showRuleSelec === void 0 ? false : _column$showRuleSelec,
+    _column$isClearable = column.isClearable,
+    isClearable = _column$isClearable === void 0 ? true : _column$isClearable,
+    _column$helpIconProps = column.helpIconProps,
+    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
+  var otherProps = getOtherProps(column);
+  var options = buildDropdownOptions({
+    defaultType: defaultType,
+    filter: filter,
+    options: values
   });
-  var openFilterPaneHotKeyRef = useHotkeys__default["default"](SHORTCUTS.openFilterPane.sequence, function () {
-    return setIsPaneOpen(childKey);
-  }, {
-    mode: "scoped"
+  var dropdownRules = isMulti(defaultType) ? MULTI_DROPDOWN_RULES : SINGLE_DROPDOWN_RULES;
+  var value = buildDropdownValue({
+    defaultType: defaultType,
+    filter: filter,
+    options: options
   });
+  var _useState = React.useState(neetoCist.findBy({
+      value: filter === null || filter === void 0 ? void 0 : filter.rule
+    }, dropdownRules) || dropdownRules[0]),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedRule = _useState2[0],
+    setSelectedRule = _useState2[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var getOption = function getOption(isSelectedRuleEmpty, options, value) {
+    if (isSelectedRuleEmpty) {
+      return isMulti(defaultType) ? [options[0]] : options[0];
+    }
+    return value;
+  };
+  var handleRuleChange = function handleRuleChange(rule) {
+    var isPreviousRuleEmpty = isRuleEmpty(selectedRule.value);
+    var isNewRuleEmpty = isRuleEmpty(rule.value);
+    setSelectedRule(rule);
+    if (isPreviousRuleEmpty || !isNewRuleEmpty && neetoCist.isNotPresent(filter === null || filter === void 0 ? void 0 : filter.value)) {
+      handleApplyFilter({
+        _delete: true
+      });
+      return;
+    }
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      rule: rule.value,
+      option: getOption(isNewRuleEmpty, options, value)
+    });
+    handleApplyFilter(updatedFilter);
+  };
+  var handleChange = function handleChange(option) {
+    if (ramda.isEmpty(option) || ramda.isNil(option)) {
+      handleApplyFilter({
+        _delete: true
+      });
+      return;
+    }
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      option: option,
+      rule: selectedRule.value
+    });
+    handleApplyFilter(updatedFilter);
+  };
+  React.useEffect(function () {
+    if (!ramda.isEmpty(filters)) return;
+    setSelectedRule(dropdownRules[0]);
+  }, [filters]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-filters-bar__block",
-    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(childKey), "-block"),
-    tabIndex: 0,
-    ref: function ref(node) {
-      deleteBlockHotKeyRef.current = node;
-      openFilterPaneHotKeyRef.current = node;
-    },
-    onClick: function onClick() {
-      return setIsPaneOpen(childKey);
+    className: "neeto-filters-pane-filter__item-wrapper"
+  }, showRuleSelector && /*#__PURE__*/React__default["default"].createElement(neetoui.Select, {
+    label: label,
+    defaultValue: dropdownRules[0],
+    options: dropdownRules,
+    value: selectedRule,
+    onChange: handleRuleChange
+  }), !isRuleEmpty(selectedRule.value) && /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
+    autoFocus: autoFocus,
+    options: options,
+    value: value,
+    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-filter"),
+    isClearable: !defaultValue && isClearable,
+    isMulti: isMulti(defaultType),
+    label: !showRuleSelector && label,
+    strategy: "fixed",
+    placeholder: t("neetoFilters.messages.selectResource", {
+      resource: label
+    })
+  }, neetoCist.isNotEmpty(helpIconProps) && {
+    labelProps: {
+      helpIconProps: buildHelpIconProps(helpIconProps)
     }
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    style: "body2",
-    weight: "medium"
-  }, childKey), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-filters-bar__block-close"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoIcons.Close, {
-    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(childKey), "-block-close-btn"),
-    size: 16,
-    strokeWidth: 2,
-    onClick: function onClick(event) {
-      event.stopPropagation();
-      handleDelete(childKey);
+  }, {
+    onChange: handleChange
+  }, otherProps)));
+};
+var Dropdown$1 = /*#__PURE__*/React__default["default"].memo(Dropdown);
+
+var SingleDatetime = function SingleDatetime(_ref) {
+  var column = _ref.column,
+    filter = _ref.filter,
+    filters = _ref.filters,
+    handleApplyFilter = _ref.handleApplyFilter,
+    autoFocus = _ref.autoFocus;
+  var _useState = React.useState(function () {
+      return neetoCist.findBy({
+        value: filter === null || filter === void 0 ? void 0 : filter.rule
+      }, SINGLE_DATE_OPTIONS) || SINGLE_DATE_OPTIONS[0];
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedRule = _useState2[0],
+    setSelectedRule = _useState2[1];
+  var key = column.key,
+    _column$defaultType = column.defaultType,
+    defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
+    label = column.label,
+    _column$helpIconProps = column.helpIconProps,
+    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
+  var otherProps = getOtherProps(column);
+  var datePickerType = selectedRule.value === "between" ? "range" : "date";
+  var value = filter === null || filter === void 0 ? void 0 : filter.value;
+
+  // Reset states when "Clear filters" button is clicked.
+  React.useEffect(function () {
+    if (!ramda.isEmpty(filters)) return;
+    setSelectedRule(SINGLE_DATE_OPTIONS[0]);
+  }, [filters]);
+  var handleRuleChange = function handleRuleChange(ruleOption) {
+    setSelectedRule(ruleOption);
+
+    // Clear value if switched between incompatable types
+    var updateValue = value;
+    if (datePickerType === "range" && ruleOption.value !== "between" || datePickerType === "date" && ruleOption.value === "between") {
+      updateValue = "";
+    }
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      option: {},
+      rule: ruleOption.value,
+      value: updateValue
+    });
+    handleApplyFilter(updatedFilter);
+  };
+  var handleChange = function handleChange(dates) {
+    if (ramda.isEmpty(dates) || ramda.isNil(dates)) {
+      handleApplyFilter({
+        _delete: true
+      });
+      return;
+    }
+    var value = datePickerType === "range" ? ramda.pluck("$d", dates).map(function (date) {
+      return date.toISOString();
+    }) : dates["$d"];
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      option: {},
+      rule: selectedRule.value,
+      value: value
+    });
+    handleApplyFilter(updatedFilter);
+  };
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-filters-pane-filter__item-wrapper"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
+    label: label,
+    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-filter-rule"),
+    defaultValue: SINGLE_DATE_OPTIONS[0],
+    options: SINGLE_DATE_OPTIONS,
+    strategy: "fixed",
+    value: selectedRule
+  }, neetoCist.isNotEmpty(helpIconProps) && {
+    labelProps: {
+      helpIconProps: buildHelpIconProps(helpIconProps)
+    }
+  }, {
+    onChange: handleRuleChange
+  })), /*#__PURE__*/React__default["default"].createElement(neetoui.DatePicker, _extends({
+    autoFocus: autoFocus,
+    value: value,
+    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-filter"),
+    getPopupContainer: ramda.prop("parentNode"),
+    type: datePickerType,
+    onChange: handleChange
+  }, otherProps)));
+};
+
+var SingleTime = function SingleTime(_ref) {
+  var column = _ref.column,
+    filter = _ref.filter,
+    filters = _ref.filters,
+    handleApplyFilter = _ref.handleApplyFilter,
+    autoFocus = _ref.autoFocus;
+  var _useState = React.useState(function () {
+      return neetoCist.findBy({
+        value: filter === null || filter === void 0 ? void 0 : filter.rule
+      }, SINGLE_TIME_OPTIONS) || SINGLE_TIME_OPTIONS[0];
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedRule = _useState2[0],
+    setSelectedRule = _useState2[1];
+  var key = column.key,
+    _column$defaultType = column.defaultType,
+    defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
+    label = column.label,
+    _column$helpIconProps = column.helpIconProps,
+    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
+  var otherProps = getOtherProps(column);
+  var timePickerType = selectedRule.value === "between" ? "range" : "time";
+  var value = filter === null || filter === void 0 ? void 0 : filter.value;
+  React.useEffect(function () {
+    if (!ramda.isEmpty(filters)) return;
+    setSelectedRule(SINGLE_TIME_OPTIONS[0]);
+  }, [filters]);
+  var handleRuleChange = function handleRuleChange(ruleOption) {
+    setSelectedRule(ruleOption);
+
+    // Clear value if switched between incompatible types
+    var updateValue = value;
+    if (timePickerType === "range" && ruleOption.value !== "between" || timePickerType === "time" && ruleOption.value === "between") {
+      updateValue = "";
+    }
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      option: {},
+      rule: ruleOption.value,
+      value: updateValue
+    });
+    handleApplyFilter(updatedFilter);
+  };
+  var handleChange = function handleChange(times) {
+    if (hasInvalidTimes(times)) {
+      handleApplyFilter({
+        _delete: true
+      });
+      return;
+    }
+    if (timePickerType === "range" && areCustomTimeRangeValuesNotValid(times)) {
+      return;
+    }
+    var value = timePickerType === "range" ? ramda.pluck("$d", times).map(function (time) {
+      return time.toISOString();
+    }) : times["$d"].toISOString();
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      option: {},
+      rule: selectedRule.value,
+      value: value
+    });
+    handleApplyFilter(updatedFilter);
+  };
+  var formattedTime = formatTime(value, timePickerType);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-filters-pane-filter__item-wrapper"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
+    label: label,
+    defaultValue: SINGLE_TIME_OPTIONS[0],
+    options: SINGLE_TIME_OPTIONS,
+    strategy: "fixed",
+    value: selectedRule
+  }, neetoCist.isNotEmpty(helpIconProps) && {
+    labelProps: {
+      helpIconProps: buildHelpIconProps(helpIconProps)
+    }
+  }, {
+    onChange: handleRuleChange
+  })), /*#__PURE__*/React__default["default"].createElement(neetoui.TimePickerInput, _extends({
+    autoFocus: autoFocus,
+    className: "w-full",
+    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-filter"),
+    type: timePickerType,
+    value: formattedTime,
+    onChange: handleChange
+  }, otherProps)));
+};
+
+var Text = function Text(_ref) {
+  var column = _ref.column,
+    filter = _ref.filter,
+    filters = _ref.filters,
+    handleApplyFilter = _ref.handleApplyFilter,
+    autoFocus = _ref.autoFocus,
+    onClose = _ref.onClose;
+  var key = column.key,
+    _column$defaultType = column.defaultType,
+    defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
+    label = column.label,
+    _column$showRuleSelec = column.showRuleSelector,
+    showRuleSelector = _column$showRuleSelec === void 0 ? false : _column$showRuleSelec,
+    _column$helpIconProps = column.helpIconProps,
+    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
+  var otherProps = getOtherProps(column);
+  var ruleOptions = buildRuleOptions({
+    defaultType: defaultType
+  });
+  var inputType = defaultType === "text" || defaultType === "custom.text" ? "text" : "number";
+  var _useState = React.useState(filter === null || filter === void 0 ? void 0 : filter.value),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var _useState3 = React.useState(function () {
+      return neetoCist.findBy({
+        value: filter === null || filter === void 0 ? void 0 : filter.rule
+      }, ruleOptions) || ruleOptions[0];
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedRule = _useState4[0],
+    setSelectedRule = _useState4[1];
+  var debouncedInputValue = reactUtils.useDebounce(inputValue);
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var handleUpdateAndApplyFilter = function handleUpdateAndApplyFilter() {
+    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : debouncedInputValue;
+    var rule = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : selectedRule;
+    if (ramda.equals(filter === null || filter === void 0 ? void 0 : filter.value, value) && ramda.equals(selectedRule, rule)) return;
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      option: {},
+      rule: rule.value,
+      value: value.trim()
+    });
+    handleApplyFilter(updatedFilter);
+  };
+  var handleKeydown = function handleKeydown(e) {
+    if (!(e.key === "Enter")) return;
+    handleUpdateAndApplyFilter(inputValue);
+    onClose();
+  };
+  var handleRuleChange = function handleRuleChange(ruleOption) {
+    setSelectedRule(ruleOption);
+    if (!debouncedInputValue) return;
+    handleUpdateAndApplyFilter(debouncedInputValue, ruleOption);
+  };
+
+  // Reset states when "Clear filters" button is clicked.
+  React.useEffect(function () {
+    (ramda.isEmpty(filters) || ramda.isNil(filter)) && setInputValue("");
+  }, [filter]);
+  React.useEffect(function () {
+    if (!debouncedInputValue) {
+      !isUndefinedOrEmpty(filter) && handleApplyFilter({
+        _delete: true
+      });
+      return;
+    }
+    handleUpdateAndApplyFilter();
+  }, [debouncedInputValue]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-filters-pane-filter__item-wrapper"
+  }, showRuleSelector && /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
+    label: label,
+    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-filter-rule"),
+    defaultValue: ruleOptions[0],
+    options: ruleOptions,
+    strategy: "fixed",
+    value: selectedRule,
+    onChange: handleRuleChange
+  }, neetoCist.isNotEmpty(helpIconProps) && {
+    labelProps: {
+      helpIconProps: buildHelpIconProps(helpIconProps)
+    }
+  })), /*#__PURE__*/React__default["default"].createElement(neetoui.Input, _extends({
+    autoFocus: autoFocus,
+    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-filter"),
+    label: !showRuleSelector && label,
+    type: inputType,
+    value: inputValue
+  }, neetoCist.isNotEmpty(helpIconProps) && {
+    labelProps: {
+      helpIconProps: buildHelpIconProps(helpIconProps)
+    }
+  }, {
+    placeholder: t("neetoFilters.messages.enterResource", {
+      resource: label
+    }),
+    onChange: function onChange(event) {
+      return setInputValue(event.target.value);
+    },
+    onKeyDown: handleKeydown
+  }, otherProps)));
+};
+
+var Time = function Time(_ref) {
+  var column = _ref.column,
+    filter = _ref.filter,
+    handleApplyFilter = _ref.handleApplyFilter,
+    autoFocus = _ref.autoFocus;
+  var key = column.key,
+    _column$defaultType = column.defaultType,
+    defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
+    label = column.label,
+    _column$helpIconProps = column.helpIconProps,
+    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
+  var otherProps = getOtherProps(column);
+  var value = buildSingleTimeValue(filter);
+  var isCustomTimeRangeShown = filter && isCustomTimeRange(filter.value);
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var handleChange = function handleChange(option) {
+    if (ramda.isEmpty(option) || ramda.isNil(option)) {
+      handleApplyFilter({
+        _delete: true
+      });
+      return;
+    }
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      option: option
+    });
+    handleApplyFilter(updatedFilter);
+  };
+  var handleTimeRangeChange = function handleTimeRangeChange(times) {
+    if (hasInvalidTimes(times)) {
+      handleApplyFilter({
+        _delete: true
+      });
+      return;
+    }
+    if (isCustomTimeRangeShown && areCustomTimeRangeValuesNotValid(times)) {
+      return;
+    }
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      option: {
+        value: ramda.pluck("$d", times).map(function (time) {
+          return time.toISOString();
+        })
+      }
+    });
+    handleApplyFilter(updatedFilter);
+  };
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-filters-pane-filter__item-wrapper"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
+    autoFocus: autoFocus,
+    label: label,
+    value: value,
+    isClearable: true,
+    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-filter"),
+    options: TIME_OPTIONS,
+    strategy: "fixed",
+    placeholder: t("neetoFilters.messages.selectResource", {
+      resource: label
+    })
+  }, neetoCist.isNotEmpty(helpIconProps) && {
+    labelProps: {
+      helpIconProps: buildHelpIconProps(helpIconProps)
     }
-  })));
+  }, {
+    onChange: handleChange
+  })), isCustomTimeRangeShown && /*#__PURE__*/React__default["default"].createElement(neetoui.TimePickerInput, _extends({
+    className: "w-full",
+    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-date-range"),
+    type: "range",
+    value: formatTime(filter.value, "range"),
+    onChange: handleTimeRangeChange
+  }, otherProps)));
 };
+var Time$1 = /*#__PURE__*/React__default["default"].memo(Time);
 
-var fetch = function fetch(params) {
-  return axios__default["default"].get(SEGMENTS_BASE_URL, {
-    params: params
-  });
-};
-var show = function show(id) {
-  return axios__default["default"].get("".concat(SEGMENTS_BASE_URL, "/").concat(id), {
-    transformResponseCase: false
-  });
-};
-var create = function create(payload) {
-  return axios__default["default"].post(SEGMENTS_BASE_URL, {
-    segment: payload
-  });
-};
-var update = function update(_ref) {
-  var id = _ref.id,
-    payload = _ref.payload,
-    _ref$showToastr = _ref.showToastr,
-    showToastr = _ref$showToastr === void 0 ? true : _ref$showToastr;
-  return axios__default["default"].put("".concat(SEGMENTS_BASE_URL, "/").concat(id), payload, {
-    showToastr: showToastr
+var Item = function Item(_ref) {
+  var column = _ref.column,
+    filters = _ref.filters,
+    onChange = _ref.onChange,
+    autoFocus = _ref.autoFocus,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? neetoCist.noop : _ref$onClose;
+  var key = column.key,
+    _column$defaultType = column.defaultType,
+    defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType;
+  var filter = React.useMemo(function () {
+    return neetoCist.findBy({
+      key: key
+    }, filters);
+  }, [filters, key]);
+  var handleApplyFilter = function handleApplyFilter(updatedFilter) {
+    if (updatedFilter._delete) onChange(neetoCist.removeBy({
+      key: key
+    }, filters));else if (!filter) onChange(ramda.append(updatedFilter, filters));else onChange(neetoCist.replaceBy({
+      key: key
+    }, updatedFilter, filters));
+  };
+  if (isText(defaultType) || isDigit(defaultType)) {
+    return /*#__PURE__*/React__default["default"].createElement(Text, {
+      autoFocus: autoFocus,
+      column: column,
+      filter: filter,
+      filters: filters,
+      handleApplyFilter: handleApplyFilter,
+      onClose: onClose
+    });
+  }
+  if (isDate(defaultType)) {
+    return /*#__PURE__*/React__default["default"].createElement(Datetime$1, {
+      autoFocus: autoFocus,
+      column: column,
+      filter: filter,
+      handleApplyFilter: handleApplyFilter
+    });
+  }
+  if (isTime(defaultType)) {
+    return /*#__PURE__*/React__default["default"].createElement(Time$1, {
+      autoFocus: autoFocus,
+      column: column,
+      filter: filter,
+      handleApplyFilter: handleApplyFilter
+    });
+  }
+  if (isSingleDate(defaultType)) {
+    return /*#__PURE__*/React__default["default"].createElement(SingleDatetime, {
+      autoFocus: autoFocus,
+      column: column,
+      filter: filter,
+      filters: filters,
+      handleApplyFilter: handleApplyFilter
+    });
+  }
+  if (isSingleTime(defaultType)) {
+    return /*#__PURE__*/React__default["default"].createElement(SingleTime, {
+      autoFocus: autoFocus,
+      column: column,
+      filter: filter,
+      filters: filters,
+      handleApplyFilter: handleApplyFilter
+    });
+  }
+  if (isBoolean(defaultType) || isCheckbox(defaultType)) {
+    return /*#__PURE__*/React__default["default"].createElement(Boolean$1, {
+      autoFocus: autoFocus,
+      column: column,
+      filter: filter,
+      handleApplyFilter: handleApplyFilter
+    });
+  }
+  return /*#__PURE__*/React__default["default"].createElement(Dropdown$1, {
+    autoFocus: autoFocus,
+    column: column,
+    filter: filter,
+    filters: filters,
+    handleApplyFilter: handleApplyFilter
   });
 };
-var destroy = function destroy(id) {
-  return axios__default["default"]["delete"]("".concat(SEGMENTS_BASE_URL, "/").concat(id));
-};
-var segmentsApi = {
-  fetch: fetch,
-  show: show,
-  create: create,
-  update: update,
-  destroy: destroy
-};
 
-var QUERY_KEYS = {
-  SEGMENTS_LIST: "segments-list"
+var STEPS = {
+  ADD: "add",
+  COLUMN: "column",
+  VALUE: "value"
 };
-var SEGMENTS_STALE_TIME = 900000; // 15 mins
 
-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 SEGMENTS_LIST = QUERY_KEYS.SEGMENTS_LIST;
-var useFetchSegments = function useFetchSegments(_ref) {
-  var entity = _ref.entity,
-    _ref$searchTerm = _ref.searchTerm,
-    searchTerm = _ref$searchTerm === void 0 ? "" : _ref$searchTerm;
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return reactQuery.useQuery([SEGMENTS_LIST, entity, searchTerm], function () {
-    return segmentsApi.fetch({
-      entity: entity,
-      searchTerm: searchTerm
-    });
-  }, ramda.mergeRight({
-    staleTime: SEGMENTS_STALE_TIME,
-    select: ramda.prop("segments")
-  }, options));
-};
-var useShowSegment = function useShowSegment(id) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return reactQuery.useQuery([SEGMENTS_LIST, id], function () {
-    return segmentsApi.show(id);
-  }, ramda.mergeRight({
-    staleTime: SEGMENTS_STALE_TIME,
-    select: ramda.prop("segment")
-  }, options));
-};
-var useCreateSegment = function useCreateSegment(options) {
-  return reactUtils.useMutationWithInvalidation(segmentsApi.create, _objectSpread$3({
-    keysToInvalidate: [SEGMENTS_LIST]
-  }, options));
-};
-var useUpdateSegment = function useUpdateSegment(options) {
-  return reactUtils.useMutationWithInvalidation(segmentsApi.update, _objectSpread$3({
-    keysToInvalidate: [SEGMENTS_LIST]
-  }, options));
-};
-var useDestroySegment = function useDestroySegment(options) {
-  return reactUtils.useMutationWithInvalidation(segmentsApi.destroy, _objectSpread$3({
-    keysToInvalidate: [SEGMENTS_LIST]
-  }, options));
+var AddFilter = function AddFilter(_ref) {
+  var _findBy;
+  var columns = _ref.columns,
+    filters = _ref.filters,
+    handleChange = _ref.handleChange,
+    handleClearFilter = _ref.handleClearFilter,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = React.useState({
+      step: STEPS.ADD,
+      column: {}
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedColumn = _useState2[0],
+    setSelectedColumn = _useState2[1];
+
+  // Disable the add button when
+  // 1. No value is entered for previous filter
+  // 2. There are no more columns
+  var disableAddButton = selectedColumn.step !== STEPS.ADD && neetoCist.isNotPresent((_findBy = neetoCist.findBy({
+    key: selectedColumn.column.key
+  }, filters)) === null || _findBy === void 0 ? void 0 : _findBy.value) || ramda.isEmpty(columns);
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, selectedColumn.step !== STEPS.ADD ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex w-full gap-4"
+  }, selectedColumn.step === STEPS.COLUMN && /*#__PURE__*/React__default["default"].createElement(neetoui.Select, {
+    isSearchable: true,
+    label: t("neetoFilters.segments.newFilter"),
+    optionRemapping: {
+      label: "label",
+      value: "key"
+    },
+    options: columns,
+    placeholder: t("neetoFilters.segments.selectFilter"),
+    onChange: function onChange(column) {
+      return setSelectedColumn({
+        step: STEPS.VALUE,
+        column: column
+      });
+    }
+  }), selectedColumn.step === STEPS.VALUE && /*#__PURE__*/React__default["default"].createElement(Item, {
+    filters: filters,
+    autoFocus: true,
+    column: selectedColumn.column,
+    onChange: handleChange
+  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    className: "mt-6 self-center",
+    icon: neetoIcons.Delete,
+    style: "text",
+    onClick: function onClick() {
+      handleClearFilter(selectedColumn.column);
+      setSelectedColumn(ramda.assoc("step", STEPS.ADD));
+    }
+  })), /*#__PURE__*/React__default["default"].createElement(AddFilter, {
+    filters: filters,
+    handleChange: handleChange,
+    handleClearFilter: handleClearFilter,
+    columns: columns.filter(function (_ref2) {
+      var key = _ref2.key;
+      return !neetoCist.existsBy({
+        key: key
+      }, filters);
+    }),
+    disabled: disableAddButton
+  })) : /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    disabled: disabled,
+    className: "self-start",
+    icon: neetoIcons.Plus,
+    iconPosition: "left",
+    label: t("neetoFilters.segments.addFilter"),
+    style: "link",
+    onClick: function onClick() {
+      return setSelectedColumn(ramda.assoc("step", STEPS.COLUMN));
+    }
+  }));
 };
 
 var buildSegmentsValidationSchema = function buildSegmentsValidationSchema(defaultSegmentName) {
   return yup__namespace.object({
-    name: yup__namespace.string().trim().required().test({
+    name: yup__namespace.string().trim().required(i18next.t("neetoFilters.segments.nameIsRequired")).test({
       name: "not-default-segment-name",
       test: function test(value) {
         return (value === null || value === void 0 ? void 0 : value.toLocaleLowerCase()) !== defaultSegmentName.toLocaleLowerCase();
@@ -1250,1151 +1947,907 @@ var buildSegmentsValidationSchema = function buildSegmentsValidationSchema(defau
   });
 };
 
-var Menu = neetoui.Dropdown.Menu,
-  MenuItem = neetoui.Dropdown.MenuItem;
-var Segment = function Segment(_ref) {
-  var entity = _ref.entity,
-    filters = _ref.filters,
+function ownKeys$4(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$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SegmentForm = function SegmentForm(_ref) {
+  var _ref$isEdit = _ref.isEdit,
+    isEdit = _ref$isEdit === void 0 ? false : _ref$isEdit,
+    segmentFormInitialRef = _ref.segmentFormInitialRef,
+    isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    isSubmitting = _ref.isSubmitting,
+    handleSubmit = _ref.handleSubmit,
+    defaultSegmentName = _ref.defaultSegmentName,
+    initialValues = _ref.initialValues,
+    customFilters = _ref.customFilters,
     columns = _ref.columns,
-    childrenKeys = _ref.childrenKeys,
-    setIsFilterPaneOpen = _ref.setIsFilterPaneOpen,
-    defaultSegmentName = _ref.defaultSegmentName;
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isSavePaneOpen = _useState2[0],
-    setIsSavePaneOpen = _useState2[1];
-  var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isUpdateAlertOpen = _useState4[0],
-    setIsUpdateAlertOpen = _useState4[1];
-  var inputRef = React.useRef(null);
+    filters = _ref.filters,
+    childrenKeys = _ref.childrenKeys;
+  var history = reactRouterDom_min.useHistory();
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var history = reactRouterDom.useHistory();
-  var filtersPayload = buildSegmentsPayload(filters, childrenKeys);
-  var _getQueryParams = utils.getQueryParams(),
-    segmentId = _getQueryParams.segmentId;
-  var _useShowSegment = useShowSegment(segmentId, {
-      enabled: ramda.isNotNil(segmentId)
+  var _buildFilteredColumns = buildFilteredColumns({
+      searchTerm: "",
+      columns: columns
     }),
-    _useShowSegment$data = _useShowSegment.data,
-    selectedSegment = _useShowSegment$data === void 0 ? {} : _useShowSegment$data;
-  var _useCreateSegment = useCreateSegment(),
-    createSegment = _useCreateSegment.mutate,
-    isCreating = _useCreateSegment.isLoading;
-  var _useUpdateSegment = useUpdateSegment(),
-    updateSegment = _useUpdateSegment.mutate,
-    isUpdating = _useUpdateSegment.isLoading;
-  var isSubmitting = isCreating || isUpdating;
-  var handleUpdate = function handleUpdate() {
-    return updateSegment({
-      id: segmentId,
-      payload: {
-        filters: filtersPayload
-      }
-    }, {
-      onSuccess: function onSuccess() {
-        return setIsUpdateAlertOpen(false);
-      }
-    });
-  };
-  var handleCreateSuccess = function handleCreateSuccess(_ref2) {
-    var _filters$;
-    var _ref2$segment = _ref2.segment,
-      id = _ref2$segment.id,
-      filters = _ref2$segment.filters;
-    history.push({
-      search: buildUrlFromSegment({
-        columns: columns,
-        filters: (_filters$ = filters[0]) === null || _filters$ === void 0 ? void 0 : _filters$.conditions,
-        id: id
-      })
-    });
-    setIsSavePaneOpen(false);
-  };
-  var handleSubmit = function handleSubmit(_ref3) {
-    var name = _ref3.name;
-    return createSegment({
-      name: name,
-      entity: entity,
-      filters: filtersPayload
-    }, {
-      onSuccess: handleCreateSuccess
+    _buildFilteredColumns2 = _buildFilteredColumns.groupedColumns,
+    groupedColumns = _buildFilteredColumns2 === void 0 ? [] : _buildFilteredColumns2,
+    _buildFilteredColumns3 = _buildFilteredColumns.ungroupedColumns,
+    ungroupedColumns = _buildFilteredColumns3 === void 0 ? [] : _buildFilteredColumns3;
+  var handleChange = function handleChange(newFilters) {
+    var isClearAll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var params = buildUrlFromFilters(_objectSpread$4({
+      columns: columns,
+      filters: newFilters
+    }, isClearAll && {
+      isClearAll: true,
+      childrenKeys: childrenKeys
+    }));
+    history.push({
+      search: params
     });
   };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, ramda.isNil(segmentId) ? /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    disabled: hasOnlyKeywordFilter(filters),
-    label: t("neetoFilters.segments.saveAsSegment"),
-    style: "secondary",
-    onClick: function onClick() {
-      setIsFilterPaneOpen(false);
-      setIsSavePaneOpen(true);
-    }
-  }) : /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
-    buttonStyle: "secondary",
-    label: t("neetoFilters.segments.saveSegment")
-  }, /*#__PURE__*/React__default["default"].createElement(Menu, null, /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
-    isDisabled: ramda.equals(filtersPayload, selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.filters),
-    onClick: setIsUpdateAlertOpen
-  }, t("neetoFilters.segments.saveSegment")), /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
-    onClick: function onClick() {
-      setIsFilterPaneOpen(false);
-      setIsSavePaneOpen(true);
-    }
-  }, t("neetoFilters.segments.saveAsNewSegment")))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
-    initialFocusRef: inputRef,
-    isOpen: isSavePaneOpen,
-    onClose: function onClose() {
-      return setIsSavePaneOpen(false);
-    }
+  var handleClearFilter = function handleClearFilter(column, values, setFieldValue) {
+    var formState = [{
+      conditions: neetoCist.removeBy({
+        key: column.key
+      }, values.filters[0].conditions)
+    }];
+    var globalState = neetoCist.removeBy({
+      key: column.key
+    }, filters);
+    setFieldValue("filters", formState);
+    handleChange(globalState);
+  };
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
+    isOpen: isOpen,
+    onClose: onClose,
+    initialFocusRef: segmentFormInitialRef
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     style: "h2",
     weight: "semibold"
-  }, t("neetoFilters.segments.addNewSegment"))), /*#__PURE__*/React__default["default"].createElement(formik.Form, {
+  }, isEdit ? t("neetoFilters.segments.editSegment") : t("neetoFilters.segments.addNewSegment"))), /*#__PURE__*/React__default["default"].createElement(formik.Form, {
     className: "w-full",
     formProps: {
       noValidate: true
     },
     formikProps: {
-      initialValues: {
-        name: ""
-      },
+      initialValues: initialValues,
       validateOnChange: true,
       validateOnBlur: true,
       validationSchema: buildSegmentsValidationSchema(defaultSegmentName),
       onSubmit: handleSubmit
     }
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement(formik.Input, {
-    className: "w-full",
-    label: t("neetoFilters.segments.name"),
-    name: "name",
-    placeholder: t("neetoFilters.segments.segmentName"),
-    ref: inputRef
-  })), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(formik.ActionBlock, {
-    cancelButtonProps: {
-      onClick: function onClick() {
-        return setIsSavePaneOpen(false);
-      },
-      disabled: false
-    },
-    submitButtonProps: {
-      disabled: isSubmitting,
-      loading: isSubmitting
-    }
-  })))), /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
-    isOpen: isUpdateAlertOpen,
-    isSubmitting: isUpdating,
-    submitButtonLabel: t("neetoFilters.common.update"),
-    title: t("neetoFilters.segments.updateSegment"),
-    message: /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
-      i18nKey: "neetoFilters.segments.updateSegmentMessage",
-      values: {
-        entity: selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.name
-      }
-    }),
-    onClose: function onClose() {
-      return setIsUpdateAlertOpen(false);
-    },
-    onSubmit: handleUpdate
-  }));
-};
-
-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 Bar = function Bar(_ref) {
-  var entity = _ref.entity,
-    className = _ref.className,
-    _ref$columns = _ref.columns,
-    columns = _ref$columns === void 0 ? [] : _ref$columns,
-    _ref$keyword = _ref.keyword,
-    keyword = _ref$keyword === void 0 ? {
-      node: "",
-      value: "",
-      setValue: neetoCist.noop
-    } : _ref$keyword,
-    _ref$setIsPaneOpen = _ref.setIsPaneOpen,
-    setIsPaneOpen = _ref$setIsPaneOpen === void 0 ? ramda.identity : _ref$setIsPaneOpen,
-    _ref$childrenKeys = _ref.childrenKeys,
-    childrenKeys = _ref$childrenKeys === void 0 ? [] : _ref$childrenKeys,
-    _ref$defaultSegmentNa = _ref.defaultSegmentName,
-    defaultSegmentName = _ref$defaultSegmentNa === void 0 ? i18next.t("neetoFilters.common.allResults") : _ref$defaultSegmentNa;
-  return function () {
-    var _useTranslation = reactI18next.useTranslation(),
-      t = _useTranslation.t;
-    var initialRenderRef = React.useRef(true);
-    var searchParams = reactUtils.useQueryParams({
-      toCamelCase: false
-    });
-    var keywordValue = searchParams[SEARCH_TERM_KEY] || "";
-    var keywordFilter = _objectSpread$2(_objectSpread$2({
-      type: "text",
-      rule: "contains",
-      label: t("neetoFilters.common.searchTerm")
-    }, keyword), {}, {
-      key: SEARCH_TERM_KEY,
-      value: keywordValue
-    });
-    var filters = buildFiltersFromSearchParams(isKeywordFilterPresent(keywordFilter) && neetoCist.isNotEmpty(keywordValue) ? [keywordFilter].concat(_toConsumableArray(columns)) : columns);
-    var nonHiddenFilters = neetoCist.removeBy({
-      hidden: true
-    }, filters);
-    var history = reactRouterDom.useHistory();
-    var handleSubmit = function handleSubmit(newFilters, isClearAll) {
-      var params = buildUrlFromFilters(_objectSpread$2({
-        columns: columns,
-        filters: isKeywordFilterPresent(keywordFilter) && neetoCist.isNotEmpty(getSearchTermFromUrl()) ? [].concat(_toConsumableArray(newFilters), [keywordFilter]) : newFilters
-      }, isClearAll && {
-        isClearAll: true,
-        childrenKeys: childrenKeys
-      }));
-      history.push({
-        search: params
-      });
-    };
-    var handleDelete = function handleDelete(key) {
-      if (key === SEARCH_TERM_KEY) {
-        var params = ramda.omit([SEARCH_TERM_KEY], getSnakeCasedQueryParams());
-        var pathname = window.location.pathname;
-        history.push(utils.buildUrl(pathname, params));
-        return;
-      }
-      if (childrenKeys.includes(key)) {
-        var _params = ramda.omit([key], getSnakeCasedQueryParams());
-        var _pathname = window.location.pathname;
-        history.push(utils.buildUrl(_pathname, _params));
-      }
-      var newFilters = neetoCist.removeBy({
+  }, function (_ref2) {
+    var errors = _ref2.errors,
+      values = _ref2.values,
+      setFieldValue = _ref2.setFieldValue;
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement(formik.Input, {
+      className: "w-full flex-grow-0",
+      error: errors.name,
+      label: t("neetoFilters.segments.name"),
+      name: "name",
+      placeholder: t("neetoFilters.segments.segmentName"),
+      ref: segmentFormInitialRef
+    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      className: "mb-2 mt-4",
+      style: "h4"
+    }, t("neetoFilters.common.filters")), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "neeto-filters-pane-filter__body flex w-full flex-col gap-5"
+    }, ungroupedColumns.filter(function (_ref3) {
+      var key = _ref3.key;
+      return neetoCist._existsBy({
         key: key
-      }, filters);
-      handleSubmit(newFilters);
-    };
-    var handleClearAll = function handleClearAll() {
-      var params = isKeywordFilterPresent(keywordFilter) ? ramda.omit([SEARCH_TERM_KEY], getSnakeCasedQueryParams()) : getSnakeCasedQueryParams();
-      var pathname = window.location.pathname;
-      history.push(utils.buildUrl(pathname, params));
-      handleSubmit([], true);
-    };
-    var childrenFiltersApplied = childrenKeys.some(function (key) {
-      return ramda.has(key, searchParams);
-    });
-    var hideClearButton = nonHiddenFilters.every(function (_ref2) {
-      var defaultValue = _ref2.defaultValue,
-        isClearable = _ref2.isClearable;
-      return defaultValue && !isClearable;
-    }) && !childrenFiltersApplied;
-    React.useEffect(function () {
-      if (initialRenderRef.current) {
-        initialRenderRef.current = false;
-        return neetoCist.noop;
-      }
-      var handler = setTimeout(function () {
-        handleSubmit(filters);
-      }, 500);
-      return function () {
-        return clearTimeout(handler);
-      };
-    }, [keywordValue]);
-    if (ramda.isEmpty(nonHiddenFilters) && !childrenFiltersApplied) return null;
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classnames__default["default"]("neeto-filters-bar", _defineProperty({}, className, className))
-    }, nonHiddenFilters.map(function (filter) {
-      var _filter$suffixCompone;
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
-        key: filter.key
-      }, /*#__PURE__*/React__default["default"].createElement(Block, {
-        filter: filter,
-        handleDelete: handleDelete,
-        setIsPaneOpen: setIsPaneOpen
-      }), (_filter$suffixCompone = filter.suffixComponent) === null || _filter$suffixCompone === void 0 ? void 0 : _filter$suffixCompone.call(filter), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "neeto-filters-bar--separator"
+      }, values.filters[0].conditions);
+    }).map(function (column) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "flex w-full gap-4",
+        key: column.key
+      }, /*#__PURE__*/React__default["default"].createElement(Item, {
+        column: column,
+        filters: filters,
+        autoFocus: column.key === isOpen,
+        onChange: function onChange(filters) {
+          setFieldValue("filters", [{
+            conditions: filters
+          }]);
+          handleChange(filters);
+        }
+      }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+        className: "mt-6 self-center",
+        icon: neetoIcons.Delete,
+        style: "text",
+        onClick: function onClick() {
+          return handleClearFilter(column, values, setFieldValue);
+        }
       }));
-    }), childrenKeys.filter(function (childKey) {
-      return ramda.has(childKey, searchParams);
-    }).map(function (childKey) {
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
-        key: childKey
-      }, /*#__PURE__*/React__default["default"].createElement(ChildBlock, {
-        childKey: childKey,
-        handleDelete: handleDelete,
-        setIsPaneOpen: setIsPaneOpen
-      }), /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "neeto-filters-bar--separator"
+    }), neetoCist.isPresent(groupedColumns) && /*#__PURE__*/React__default["default"].createElement(neetoui.Accordion, null, groupedColumns.map(function (_ref4) {
+      var group = _ref4.group,
+        columns = _ref4.columns;
+      return /*#__PURE__*/React__default["default"].createElement(neetoui.Accordion.Item, {
+        className: "accordion_item",
+        key: group,
+        title: group
+      }, columns.map(function (column) {
+        return /*#__PURE__*/React__default["default"].createElement(Item, {
+          column: column,
+          filters: filters,
+          autoFocus: column.key === isOpen,
+          key: column.key,
+          onChange: handleChange
+        });
       }));
-    }), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "flex items-center gap-x-2"
-    }, ramda.isNotNil(entity) && /*#__PURE__*/React__default["default"].createElement(Segment, {
-      childrenKeys: childrenKeys,
-      columns: columns,
-      defaultSegmentName: defaultSegmentName,
-      entity: entity,
+    })), ramda.isEmpty([].concat(_toConsumableArray(groupedColumns), _toConsumableArray(ungroupedColumns))) && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      style: "body2"
+    }, t("neetoFilters.messages.noResourcesFound", {
+      resources: t("neetoFilters.common.columns")
+    })), customFilters, /*#__PURE__*/React__default["default"].createElement(AddFilter, {
       filters: filters,
-      setIsFilterPaneOpen: setIsPaneOpen
-    }), !hideClearButton && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      "data-cy": "neeto-filters-bar-clear-btn",
-      label: t("neetoFilters.common.clearFilters"),
-      style: "text",
-      onClick: handleClearAll
+      handleChange: handleChange,
+      columns: ungroupedColumns.filter(function (_ref5) {
+        var key = _ref5.key;
+        return !neetoCist.existsBy({
+          key: key
+        }, filters);
+      }),
+      handleClearFilter: function handleClearFilter(_ref6) {
+        var key = _ref6.key;
+        return handleChange(neetoCist.removeBy({
+          key: key
+        }, filters));
+      }
+    }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
+      className: "flex items-center space-x-2"
+    }, /*#__PURE__*/React__default["default"].createElement(formik.ActionBlock, {
+      cancelButtonProps: {
+        onClick: onClose,
+        disabled: false
+      },
+      submitButtonProps: {
+        disabled: isSubmitting || ramda.isEmpty(filters),
+        loading: isSubmitting
+      }
     })));
-  }();
+  }));
 };
 
-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;
-}
-
-var useFilters = function useFilters(_ref) {
-  var onFiltersChange = _ref.onFiltersChange,
-    columns = _ref.columns,
-    keywordFilter = _ref.keywordFilter,
-    onSelectorsChange = _ref.onSelectorsChange;
-  var _useTransition = React.useTransition(),
-    _useTransition2 = _slicedToArray(_useTransition, 2);
-    _useTransition2[0];
-    var startTransition = _useTransition2[1];
-  var initialRender = React.useRef(true);
-  var prevFilters = React.useRef([]);
-  var location = reactRouterDom.useLocation();
-  var filters = buildFiltersFromSearchParams(columns, false);
-  var history = reactRouterDom.useHistory();
-  var defaultValuesOfColumns = JSON.stringify(ramda.pluck("defaultValue", columns));
-  var handlePrecenseOfDefaultFilters = function handlePrecenseOfDefaultFilters(defaultFilters) {
-    var params = buildUrlFromFilters({
-      columns: columns,
-      filters: isKeywordFilterPresent(keywordFilter) && neetoCist.isNotEmpty(getSearchTermFromUrl()) ? [].concat(_toConsumableArray(defaultFilters), [keywordFilter]) : defaultFilters
-    });
-    history.replace({
-      search: params
-    });
-  };
-  var handleFiltersChange = function handleFiltersChange(filtersPayload) {
-    startTransition(function () {
-      onFiltersChange(buildFiltersPayload(filtersPayload.filter(function (filter) {
-        return !ramda.isNil(filter.node);
-      })));
-    });
-  };
-
-  //This function sends the updated filters to host via callbacks.
-  var sendUpdatedFilters = function sendUpdatedFilters() {
-    if (compareFilters(ramda.append(keywordFilter, filters), prevFilters.current)) {
-      return;
-    }
-    var newFilters = buildFiltersFromSearchParams(columns);
-    var filtersPayload = isKeywordFilterPresent(keywordFilter) && neetoCist.isNotEmpty(getSearchTermFromUrl()) ? ramda.append(keywordFilter, newFilters) : newFilters;
-    handleFiltersChange(filtersPayload);
-    onSelectorsChange(buildSelectorsFromURL(columns));
-  };
-  var handleChangesInURL = function handleChangesInURL() {
-    var defaultFilters = buildDefaultFilters(columns, filters);
-    var searchParams = getSnakeCasedQueryParams();
-    var keys = ramda.pluck("key", ramda.append(keywordFilter, columns));
-    if (keys.every(function (key) {
-      return ramda.isNil(searchParams[key]);
-    }) && !ramda.isEmpty(defaultFilters)) {
-      history.replace({
-        search: buildUrlFromFilters({
-          columns: columns,
-          filters: ramda.concat(defaultFilters, filters)
-        })
-      });
-      filters = buildFiltersFromSearchParams(columns, false);
-    }
-  };
-  React.useEffect(function () {
-    if (initialRender.current) {
-      initialRender.current = false;
-      var keywordValue = getSearchTermFromUrl();
-      var defaultFilters = buildDefaultFilters(columns, filters);
-      neetoCist.isNotEmpty(defaultFilters) && handlePrecenseOfDefaultFilters(defaultFilters);
-      prevFilters.current = ramda.append(ramda.mergeRight(keywordFilter, {
-        value: keywordValue
-      }), filters);
-    } else {
-      handleChangesInURL();
-      sendUpdatedFilters();
-      prevFilters.current = ramda.append(keywordFilter, filters);
-    }
-  }, [location.search, defaultValuesOfColumns]);
-  return filters;
+var QUERY_KEYS = {
+  SEGMENTS_LIST: "segments-list"
 };
+var SEGMENTS_STALE_TIME = 900000; // 15 mins
 
-var buildDropdownValue = function buildDropdownValue(_ref) {
-  var defaultType = _ref.defaultType,
-    filter = _ref.filter,
-    options = _ref.options;
-  if (!filter) return null;
-  if (isMulti(defaultType)) {
-    return options.filter(function (_ref2) {
-      var value = _ref2.value;
-      return filter.value.includes(value);
-    });
-  }
-  return neetoCist.findBy({
-    value: filter.value
-  }, options);
-};
-var buildSingleTimeValue = function buildSingleTimeValue(filter) {
-  var _findBy2;
-  if (!filter) return null;
-  return (_findBy2 = neetoCist.findBy({
-    value: filter.value
-  }, TIME_OPTIONS)) !== null && _findBy2 !== void 0 ? _findBy2 : ramda.last(TIME_OPTIONS);
-};
-var getOtherProps = function getOtherProps(props) {
-  return ramda.omit(["key", "node", "label", "type", "values", "model", "showRuleSelector"], props);
-};
-var buildDropdownOptions = function buildDropdownOptions(_ref3) {
-  var defaultType = _ref3.defaultType,
-    filter = _ref3.filter,
-    options = _ref3.options;
-  options = options.map(ramda.modify("value", function (value) {
-    return value === null || value === void 0 ? void 0 : value.toString();
-  }));
-  if (!filter) return options;
-  if (isMulti(defaultType)) {
-    var selectedOptions = filter.value.map(function (value) {
-      return neetoCist.findBy({
-        value: value
-      }, options) || neetoCist.toLabelAndValue(value);
-    });
-    var nonSelectedOptions = options.filter(function (option) {
-      return !filter.value.includes(option.value);
-    });
-    return ramda.concat(selectedOptions, nonSelectedOptions);
-  }
-  if (!neetoCist.findBy({
-    value: filter.value
-  }, options)) {
-    return ramda.append(neetoCist.toLabelAndValue(filter.value), options);
-  }
-  return options;
+var DEFAULT_SEGMENTS_CACHE = {
+  segments: []
 };
-var initializeDateRule = function initializeDateRule(filter) {
-  return filter ? neetoCist.findBy({
-    value: filter === null || filter === void 0 ? void 0 : filter.value
-  }, DATE_OPTIONS) || findDateOption(filter, DATE_OPTIONS) : {};
+var SEGMENT_ACTIONS$1 = {
+  EDIT: "edit",
+  CREATE: "create"
 };
-var getDateValue = function getDateValue(value, rule) {
-  if (ramda.isEmpty(value) || ramda.isNil(value)) {
-    return null;
+
+var SHORTCUTS = {
+  closePane: {
+    sequence: "escape",
+    description: i18next.t("neetoFilters.shortcuts.closePane")
+  },
+  deleteBlock: {
+    sequence: "backspace",
+    description: i18next.t("neetoFilters.shortcuts.deleteBlock")
+  },
+  openFilterPane: {
+    sequence: "enter",
+    description: i18next.t("neetoFilters.shortcuts.openFilterPane")
   }
-  if (rule.value === "custom-date-range") {
-    return value;
+};
+
+var buildCustomDateValue = function buildCustomDateValue(value) {
+  var isBeforeOrAfter = Math.abs(dayjs(value[1]).diff(dayjs(value[0]), "year")) >= 90;
+  if (isBeforeOrAfter) {
+    var currentMoment = dayjs();
+    var diffWithStart = Math.abs(currentMoment.diff(dayjs(value[0]), "year"));
+    var diffWithEnd = Math.abs(currentMoment.diff(dayjs(value[1]), "year"));
+    return diffWithStart < diffWithEnd ? "after-".concat(utils.dateFormat.date(dayjs(value[0]).subtract(1, "day"))) : "before-".concat(utils.dateFormat.date(dayjs(value[1]).add(1, "day")));
   }
-  return rule.value === "before" ? dayjs(value[1]).add(1, "day") : dayjs(value[0]).subtract(1, "day");
+  return value.map(utils.dateFormat.date).join(" - ");
 };
-var findDateOption = function findDateOption(filter, options) {
-  var value = filter.value;
-  var isBeforeOrAfter = dayjs(value[1]).diff(dayjs(value[0]), "year") >= 90;
-  if (ramda.not(isBeforeOrAfter)) {
-    return ramda.last(options);
+var buildFilterValue = function buildFilterValue(filter) {
+  var _findBy2;
+  var _filter$defaultType = filter.defaultType,
+    defaultType = _filter$defaultType === void 0 ? filter.type : _filter$defaultType,
+    value = filter.value,
+    rule = filter.rule,
+    _filter$values = filter.values,
+    initialValues = _filter$values === void 0 ? [] : _filter$values;
+  var values = initialValues.map(ramda.modify("value", function (value) {
+    return value.toString();
+  }));
+  if (isDate(defaultType) && isCustomDateRange(value)) {
+    return buildCustomDateValue(value);
+  } else if (isTime(defaultType) && isCustomTimeRange(value)) {
+    return value.map(utils.dateFormat.time).join(" - ");
+  } else if (isDate(defaultType) || isTime(defaultType)) {
+    return neetoCist.humanize(value);
+  } else if (isMulti(defaultType)) {
+    return value.map(function (value) {
+      var _findBy;
+      return ((_findBy = neetoCist.findBy({
+        value: value
+      }, values)) === null || _findBy === void 0 ? void 0 : _findBy.label) || value;
+    }).join(", ");
+  } else if (isSingleDate(defaultType)) {
+    return rule === "between" ? value.map(utils.dateFormat.date).join(" - ") : utils.dateFormat.date(value);
+  } else if (isSingleTime(defaultType)) {
+    return rule === "between" ? value.map(utils.dateFormat.time).join(" - ") : utils.dateFormat.time(value);
+  } else if (isBoolean(defaultType)) {
+    return getLabelFromBool({
+      value: value,
+      values: values
+    });
   }
-  var currentMoment = dayjs();
-  var diffWithStart = Math.abs(currentMoment.diff(dayjs(value[0]), "year"));
-  var diffWithEnd = Math.abs(currentMoment.diff(dayjs(value[1]), "year"));
-  return diffWithStart < diffWithEnd ? neetoCist.findBy({
-    value: "after"
-  }, options) : neetoCist.findBy({
-    value: "before"
-  }, options);
+  return ((_findBy2 = neetoCist.findBy({
+    value: value
+  }, values)) === null || _findBy2 === void 0 ? void 0 : _findBy2.label) || value;
 };
-var buildDateValues = function buildDateValues(dates, selectedRule) {
-  if (selectedRule.value === "after") {
-    return [dates.add(1, "day"), dates.add(100, "year")];
-  } else if (selectedRule.value === "before") {
-    return [dates.subtract(100, "year"), dates.subtract(1, "day")];
+var buildRuleValue = function buildRuleValue(_ref) {
+  var rule = _ref.rule,
+    defaultType = _ref.defaultType;
+  if (isText(defaultType)) {
+    return neetoCist.findBy({
+      value: rule
+    }, TEXT_RULES).label;
+  } else if (isDigit(defaultType)) {
+    return neetoCist.findBy({
+      value: rule
+    }, NUMBER_RULES).label;
+  } else if (isSingleDate(defaultType)) {
+    return neetoCist.findBy({
+      value: rule
+    }, SINGLE_DATE_OPTIONS).label;
+  } else if (isSingleTime(defaultType)) {
+    return neetoCist.findBy({
+      value: rule
+    }, SINGLE_TIME_OPTIONS).label;
+  } else if (isMulti(defaultType) || isSingle(defaultType)) {
+    return isRuleEmpty(rule) ? i18next.t("neetoFilters.rules.isEmpty") : "";
   }
-  return dates;
+  return "";
 };
-var buildHelpIconProps = function buildHelpIconProps(helpIconProps) {
-  return ramda.mergeDeepRight(DEFAULT_HELP_ICON_PROPS, helpIconProps);
+var hasOnlyKeywordFilter = function hasOnlyKeywordFilter(filters) {
+  return filters.length === 1 && filters[0].key === SEARCH_TERM_KEY;
 };
-
-var Boolean = function Boolean(_ref) {
-  var column = _ref.column,
-    filter = _ref.filter,
-    handleApplyFilter = _ref.handleApplyFilter,
-    autoFocus = _ref.autoFocus;
-  var key = column.key,
-    _column$defaultType = column.defaultType,
-    defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
-    label = column.label,
-    values = column.values,
-    _column$helpIconProps = column.helpIconProps,
-    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
-  var options = ramda.isNil(values) || ramda.isEmpty(values) ? DEFAULT_BOOLEAN_OPTIONS : values;
-  var otherProps = getOtherProps(column);
-  var value = buildDropdownValue({
-    defaultType: defaultType,
-    filter: filter,
-    options: options
-  });
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var handleChange = function handleChange(option) {
-    if (ramda.isEmpty(option) || ramda.isNil(option)) {
-      handleApplyFilter({
-        _delete: true
-      });
-      return;
-    }
-    var updatedFilter = buildUpdatedFilter({
-      column: column,
-      defaultType: defaultType,
-      option: option
-    });
-    handleApplyFilter(updatedFilter);
+var deepCompare = function deepCompare(filters1, filters2) {
+  var comparisonHelper = function comparisonHelper(filters) {
+    return ramda.sortBy(ramda.prop("key"), neetoCist.removeBy({
+      key: SEARCH_TERM_KEY
+    }, ramda.project(["key", "rule", "value"], filters)));
   };
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-filters-pane-filter__item-wrapper"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
-    autoFocus: autoFocus,
-    label: label,
-    options: options,
-    value: value,
-    isClearable: true
-  }, neetoCist.isNotEmpty(helpIconProps) && {
-    labelProps: {
-      helpIconProps: buildHelpIconProps(helpIconProps)
-    }
-  }, {
-    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-filter"),
-    strategy: "fixed",
-    placeholder: t("neetoFilters.messages.selectOption", {
-      resource: label
-    }),
-    onChange: handleChange
-  }, otherProps)));
+  return neetoCist.notEqualsDeep(comparisonHelper(filters1), comparisonHelper(filters2));
 };
-var Boolean$1 = /*#__PURE__*/React__default["default"].memo(Boolean);
 
-var Datetime = function Datetime(_ref) {
-  var column = _ref.column,
-    filter = _ref.filter,
-    handleApplyFilter = _ref.handleApplyFilter,
-    autoFocus = _ref.autoFocus;
-  var _useState = React.useState(initializeDateRule(filter)),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedRule = _useState2[0],
-    setSelectedRule = _useState2[1];
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var key = column.key,
-    _column$defaultType = column.defaultType,
-    defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
-    label = column.label,
-    _column$helpIconProps = column.helpIconProps,
-    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
-  var isDatePickerShown = filter && isCustomDateRange(filter.value);
-  var otherProps = getOtherProps(column);
-  var handleChange = function handleChange(option) {
-    if (ramda.isEmpty(option) || ramda.isNil(option)) {
-      handleApplyFilter({
-        _delete: true
-      });
-      setSelectedRule({});
-      return;
-    }
-    setSelectedRule(option);
-    var updatedFilter = buildUpdatedFilter({
-      column: column,
-      defaultType: defaultType,
-      option: option
-    });
-    handleApplyFilter(updatedFilter);
-  };
-  var handleDateRangeChange = function handleDateRangeChange(dates) {
-    if (ramda.isEmpty(dates) || ramda.isNil(dates)) {
-      handleApplyFilter({
-        _delete: true
-      });
-      setSelectedRule({});
-      return;
-    }
-    var updatedFilter = buildUpdatedFilter({
-      column: column,
-      defaultType: defaultType,
-      option: {
-        value: ramda.pluck("$d", buildDateValues(dates, selectedRule)).map(function (date) {
-          return date.toISOString();
-        })
-      }
-    });
-    handleApplyFilter(updatedFilter);
-  };
-  React.useEffect(function () {
-    ramda.isNil(filter) && setSelectedRule({});
-  }, [filter]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-filters-pane-filter__item-wrapper"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
-    autoFocus: autoFocus,
-    label: label,
-    isClearable: true,
-    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-filter"),
-    options: DATE_OPTIONS,
-    strategy: "fixed",
-    value: selectedRule,
-    placeholder: t("neetoFilters.messages.selectResource", {
-      resource: label
-    })
-  }, neetoCist.isNotEmpty(helpIconProps) && {
-    labelProps: {
-      helpIconProps: buildHelpIconProps(helpIconProps)
-    }
+var Block = function Block(_ref) {
+  var filter = _ref.filter,
+    handleDelete = _ref.handleDelete,
+    setIsPaneOpen = _ref.setIsPaneOpen;
+  var key = filter.key,
+    _filter$defaultType = filter.defaultType,
+    defaultType = _filter$defaultType === void 0 ? filter.type : _filter$defaultType,
+    label = filter.label,
+    rule = filter.rule,
+    defaultValue = filter.defaultValue;
+  var filterValue = buildFilterValue(filter);
+  var ruleContent = buildRuleValue({
+    rule: rule,
+    defaultType: defaultType
+  });
+  var blockLength = label.length + ruleContent.length + filterValue.length;
+  var toolTipDisabled = blockLength <= 50;
+  var blockContent = !toolTipDisabled ? "".concat(filterValue.slice(0, 50 - blockLength), "...") : filterValue;
+  var deleteBlockHotKeyRef = useHotkeys__default["default"](SHORTCUTS.deleteBlock.sequence, function () {
+    return handleDelete(key);
   }, {
-    onChange: handleChange
-  })), isDatePickerShown && /*#__PURE__*/React__default["default"].createElement(neetoui.DatePicker, _extends({
-    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-date-range"),
-    getPopupContainer: ramda.prop("parentNode"),
-    type: (selectedRule === null || selectedRule === void 0 ? void 0 : selectedRule.value) === "custom-date-range" ? "range" : "date",
-    value: getDateValue(filter === null || filter === void 0 ? void 0 : filter.value, selectedRule),
-    onChange: handleDateRangeChange
-  }, otherProps)));
+    mode: "scoped"
+  });
+  var openFilterPaneHotKeyRef = useHotkeys__default["default"](SHORTCUTS.openFilterPane.sequence, function () {
+    return setIsPaneOpen(key);
+  }, {
+    mode: "scoped"
+  });
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
+    content: filterValue,
+    disabled: toolTipDisabled,
+    position: "bottom",
+    theme: "light"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-filters-bar__block",
+    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-block"),
+    tabIndex: 0,
+    ref: function ref(node) {
+      deleteBlockHotKeyRef.current = node;
+      openFilterPaneHotKeyRef.current = node;
+    },
+    onClick: function onClick() {
+      return setIsPaneOpen(key);
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    style: "body2"
+  }, label, ":"), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "neeto-ui-text-gray-600",
+    style: "body2"
+  }, ruleContent), !isRuleEmpty(rule) && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    style: "body2"
+  }, blockContent), !defaultValue && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-filters-bar__block-close"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoIcons.Close, {
+    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-block-close-btn"),
+    size: 16,
+    strokeWidth: 2,
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      handleDelete(key);
+    }
+  }))));
 };
-var Datetime$1 = /*#__PURE__*/React__default["default"].memo(Datetime);
 
-var Dropdown = function Dropdown(_ref) {
-  var column = _ref.column,
-    filter = _ref.filter,
-    handleApplyFilter = _ref.handleApplyFilter,
-    autoFocus = _ref.autoFocus;
-  var key = column.key,
-    label = column.label,
-    values = column.values,
-    defaultValue = column.defaultValue,
-    _column$defaultType = column.defaultType,
-    defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
-    _column$isClearable = column.isClearable,
-    isClearable = _column$isClearable === void 0 ? true : _column$isClearable,
-    _column$helpIconProps = column.helpIconProps,
-    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
-  var otherProps = getOtherProps(column);
-  var options = buildDropdownOptions({
-    defaultType: defaultType,
-    filter: filter,
-    options: values
+var ChildBlock = function ChildBlock(_ref) {
+  var childKey = _ref.childKey,
+    setIsPaneOpen = _ref.setIsPaneOpen,
+    handleDelete = _ref.handleDelete;
+  var deleteBlockHotKeyRef = useHotkeys__default["default"](SHORTCUTS.deleteBlock.sequence, function () {
+    return handleDelete(childKey);
+  }, {
+    mode: "scoped"
   });
-  var value = buildDropdownValue({
-    defaultType: defaultType,
-    filter: filter,
-    options: options
+  var openFilterPaneHotKeyRef = useHotkeys__default["default"](SHORTCUTS.openFilterPane.sequence, function () {
+    return setIsPaneOpen(childKey);
+  }, {
+    mode: "scoped"
   });
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var handleChange = function handleChange(option) {
-    if (ramda.isEmpty(option) || ramda.isNil(option)) {
-      handleApplyFilter({
-        _delete: true
-      });
-      return;
-    }
-    var updatedFilter = buildUpdatedFilter({
-      column: column,
-      defaultType: defaultType,
-      option: option
-    });
-    handleApplyFilter(updatedFilter);
-  };
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-filters-pane-filter__item-wrapper"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
-    autoFocus: autoFocus,
-    label: label,
-    options: options,
-    value: value,
-    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-filter"),
-    isClearable: !defaultValue && isClearable,
-    isMulti: isMulti(defaultType),
-    strategy: "fixed",
-    placeholder: t("neetoFilters.messages.selectResource", {
-      resource: label
-    })
-  }, neetoCist.isNotEmpty(helpIconProps) && {
-    labelProps: {
-      helpIconProps: buildHelpIconProps(helpIconProps)
+    className: "neeto-filters-bar__block",
+    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(childKey), "-block"),
+    tabIndex: 0,
+    ref: function ref(node) {
+      deleteBlockHotKeyRef.current = node;
+      openFilterPaneHotKeyRef.current = node;
+    },
+    onClick: function onClick() {
+      return setIsPaneOpen(childKey);
     }
-  }, {
-    onChange: handleChange
-  }, otherProps)));
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    style: "body2",
+    weight: "medium"
+  }, childKey), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-filters-bar__block-close"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoIcons.Close, {
+    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(childKey), "-block-close-btn"),
+    size: 16,
+    strokeWidth: 2,
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      handleDelete(childKey);
+    }
+  })));
 };
-var Dropdown$1 = /*#__PURE__*/React__default["default"].memo(Dropdown);
 
-var SingleDatetime = function SingleDatetime(_ref) {
-  var column = _ref.column,
-    filter = _ref.filter,
+var FilterBar = function FilterBar(_ref) {
+  var entity = _ref.entity,
     filters = _ref.filters,
-    handleApplyFilter = _ref.handleApplyFilter,
-    autoFocus = _ref.autoFocus;
-  var _useState = React.useState(function () {
-      return neetoCist.findBy({
-        value: filter === null || filter === void 0 ? void 0 : filter.rule
-      }, SINGLE_DATE_OPTIONS) || SINGLE_DATE_OPTIONS[0];
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedRule = _useState2[0],
-    setSelectedRule = _useState2[1];
-  var key = column.key,
-    _column$defaultType = column.defaultType,
-    defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
-    label = column.label,
-    _column$helpIconProps = column.helpIconProps,
-    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
-  var otherProps = getOtherProps(column);
-  var datePickerType = selectedRule.value === "between" ? "range" : "date";
-  var value = filter === null || filter === void 0 ? void 0 : filter.value;
-
-  // Reset states when "Clear filters" button is clicked.
-  React.useEffect(function () {
-    if (!ramda.isEmpty(filters)) return;
-    setSelectedRule(SINGLE_DATE_OPTIONS[0]);
-  }, [filters]);
-  var handleRuleChange = function handleRuleChange(ruleOption) {
-    setSelectedRule(ruleOption);
-
-    // Clear value if switched between incompatable types
-    var updateValue = value;
-    if (datePickerType === "range" && ruleOption.value !== "between" || datePickerType === "date" && ruleOption.value === "between") {
-      updateValue = "";
-    }
-    var updatedFilter = buildUpdatedFilter({
-      column: column,
-      defaultType: defaultType,
-      option: {},
-      rule: ruleOption.value,
-      value: updateValue
-    });
-    handleApplyFilter(updatedFilter);
-  };
-  var handleChange = function handleChange(dates) {
-    if (ramda.isEmpty(dates) || ramda.isNil(dates)) {
-      handleApplyFilter({
-        _delete: true
-      });
+    setIsSavePaneOpen = _ref.setIsSavePaneOpen,
+    setIsPaneOpen = _ref.setIsPaneOpen,
+    childrenKeys = _ref.childrenKeys,
+    nonHiddenFilters = _ref.nonHiddenFilters,
+    childrenFiltersApplied = _ref.childrenFiltersApplied,
+    keywordFilter = _ref.keywordFilter,
+    handleApplyFilters = _ref.handleApplyFilters;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var history = reactRouterDom.useHistory();
+  var searchParams = reactUtils.useQueryParams({
+    toCamelCase: false
+  });
+  var handleDelete = function handleDelete(key) {
+    if (key === SEARCH_TERM_KEY) {
+      var params = ramda.omit([SEARCH_TERM_KEY], getSnakeCasedQueryParams());
+      var pathname = window.location.pathname;
+      history.push(utils.buildUrl(pathname, params));
       return;
     }
-    var value = datePickerType === "range" ? ramda.pluck("$d", dates).map(function (date) {
-      return date.toISOString();
-    }) : dates["$d"];
-    var updatedFilter = buildUpdatedFilter({
-      column: column,
-      defaultType: defaultType,
-      option: {},
-      rule: selectedRule.value,
-      value: value
-    });
-    handleApplyFilter(updatedFilter);
+    if (childrenKeys.includes(key)) {
+      var _params = ramda.omit([key], getSnakeCasedQueryParams());
+      var _pathname = window.location.pathname;
+      history.push(utils.buildUrl(_pathname, _params));
+    }
+    var newFilters = neetoCist.removeBy({
+      key: key
+    }, filters);
+    handleApplyFilters(newFilters);
   };
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-filters-pane-filter__item-wrapper"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
-    label: label,
-    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-filter-rule"),
-    defaultValue: SINGLE_DATE_OPTIONS[0],
-    options: SINGLE_DATE_OPTIONS,
-    strategy: "fixed",
-    value: selectedRule
-  }, neetoCist.isNotEmpty(helpIconProps) && {
-    labelProps: {
-      helpIconProps: buildHelpIconProps(helpIconProps)
+  var handleClearAll = function handleClearAll() {
+    var params = isKeywordFilterPresent(keywordFilter) ? ramda.omit([SEARCH_TERM_KEY], getSnakeCasedQueryParams()) : getSnakeCasedQueryParams();
+    var pathname = window.location.pathname;
+    history.push(utils.buildUrl(pathname, params));
+    handleApplyFilters([], true);
+  };
+  var hideClearButton = nonHiddenFilters.every(function (_ref2) {
+    var defaultValue = _ref2.defaultValue,
+      isClearable = _ref2.isClearable;
+    return defaultValue && !isClearable;
+  }) && !childrenFiltersApplied;
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, nonHiddenFilters.map(function (filter) {
+    var _filter$suffixCompone;
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+      key: filter.key
+    }, /*#__PURE__*/React__default["default"].createElement(Block, {
+      filter: filter,
+      handleDelete: handleDelete,
+      setIsPaneOpen: setIsPaneOpen
+    }), (_filter$suffixCompone = filter.suffixComponent) === null || _filter$suffixCompone === void 0 ? void 0 : _filter$suffixCompone.call(filter), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "neeto-filters-bar--separator"
+    }));
+  }), childrenKeys.filter(function (childKey) {
+    return ramda.has(childKey, searchParams);
+  }).map(function (childKey) {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+      key: childKey
+    }, /*#__PURE__*/React__default["default"].createElement(ChildBlock, {
+      childKey: childKey,
+      handleDelete: handleDelete,
+      setIsPaneOpen: setIsPaneOpen
+    }), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "neeto-filters-bar--separator"
+    }));
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex items-center gap-x-2"
+  }, neetoCist.isPresent(entity) && !hasOnlyKeywordFilter(filters) && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    "data-cy": "save-segment-button",
+    label: t("neetoFilters.segments.saveAsNewSegment"),
+    style: "secondary",
+    onClick: function onClick() {
+      setIsPaneOpen(false);
+      setIsSavePaneOpen({
+        action: SEGMENT_ACTIONS$1.CREATE
+      });
     }
+  }), !hideClearButton && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    "data-cy": "neeto-filters-bar-clear-btn",
+    label: t("neetoFilters.common.clearFilters"),
+    style: "text",
+    onClick: handleClearAll
+  })));
+};
+
+var fetch = function fetch(params) {
+  return axios__default["default"].get(SEGMENTS_BASE_URL, {
+    params: params
+  });
+};
+var show = function show(id) {
+  return axios__default["default"].get("".concat(SEGMENTS_BASE_URL, "/").concat(id), {
+    transformResponseCase: false
+  });
+};
+var create = function create(payload) {
+  return axios__default["default"].post(SEGMENTS_BASE_URL, {
+    segment: payload
   }, {
-    onChange: handleRuleChange
-  })), /*#__PURE__*/React__default["default"].createElement(neetoui.DatePicker, _extends({
-    autoFocus: autoFocus,
-    value: value,
-    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-filter"),
-    getPopupContainer: ramda.prop("parentNode"),
-    type: datePickerType,
-    onChange: handleChange
-  }, otherProps)));
+    showToastr: false
+  });
+};
+var update = function update(_ref) {
+  var id = _ref.id,
+    payload = _ref.payload,
+    _ref$showToastr = _ref.showToastr,
+    showToastr = _ref$showToastr === void 0 ? true : _ref$showToastr;
+  return axios__default["default"].put("".concat(SEGMENTS_BASE_URL, "/").concat(id), payload, {
+    showToastr: showToastr
+  });
+};
+var destroy = function destroy(id) {
+  return axios__default["default"]["delete"]("".concat(SEGMENTS_BASE_URL, "/").concat(id));
+};
+var segmentsApi = {
+  fetch: fetch,
+  show: show,
+  create: create,
+  update: update,
+  destroy: destroy
 };
 
-var SingleTime = function SingleTime(_ref) {
-  var column = _ref.column,
-    filter = _ref.filter,
-    filters = _ref.filters,
-    handleApplyFilter = _ref.handleApplyFilter,
-    autoFocus = _ref.autoFocus;
-  var _useState = React.useState(function () {
-      return neetoCist.findBy({
-        value: filter === null || filter === void 0 ? void 0 : filter.rule
-      }, SINGLE_TIME_OPTIONS) || SINGLE_TIME_OPTIONS[0];
+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 SEGMENTS_LIST = QUERY_KEYS.SEGMENTS_LIST;
+var useFetchSegments = function useFetchSegments(_ref) {
+  var entity = _ref.entity,
+    _ref$searchTerm = _ref.searchTerm,
+    searchTerm = _ref$searchTerm === void 0 ? "" : _ref$searchTerm;
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return reactQuery.useQuery([SEGMENTS_LIST, entity, searchTerm], function () {
+    return segmentsApi.fetch({
+      entity: entity,
+      searchTerm: searchTerm
+    });
+  }, ramda.mergeRight({
+    staleTime: SEGMENTS_STALE_TIME,
+    select: ramda.prop("segments")
+  }, options));
+};
+var useCreateSegment = function useCreateSegment(options) {
+  return reactUtils.useMutationWithInvalidation(segmentsApi.create, _objectSpread$3({
+    keysToInvalidate: [SEGMENTS_LIST]
+  }, options));
+};
+var useUpdateSegment = function useUpdateSegment(options) {
+  return reactUtils.useMutationWithInvalidation(segmentsApi.update, _objectSpread$3({
+    keysToInvalidate: [SEGMENTS_LIST]
+  }, options));
+};
+var useDestroySegment = function useDestroySegment(options) {
+  return reactUtils.useMutationWithInvalidation(segmentsApi.destroy, _objectSpread$3({
+    keysToInvalidate: [SEGMENTS_LIST]
+  }, options));
+};
+
+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 useSegment = function useSegment(_ref) {
+  var entity = _ref.entity,
+    keyword = _ref.keyword,
+    columns = _ref.columns,
+    childrenKeys = _ref.childrenKeys;
+  var history = reactRouterDom.useHistory();
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var initialRenderRef = React.useRef(true);
+  var _useQueryParams = reactUtils.useQueryParams(),
+    segmentId = _useQueryParams.segmentId;
+  var _useState = React.useState({
+      action: undefined
     }),
     _useState2 = _slicedToArray(_useState, 2),
-    selectedRule = _useState2[0],
-    setSelectedRule = _useState2[1];
-  var key = column.key,
-    _column$defaultType = column.defaultType,
-    defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
-    label = column.label,
-    _column$helpIconProps = column.helpIconProps,
-    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
-  var otherProps = getOtherProps(column);
-  var timePickerType = selectedRule.value === "between" ? "range" : "time";
-  var value = filter === null || filter === void 0 ? void 0 : filter.value;
+    isSavePaneOpen = _useState2[0],
+    setIsSavePaneOpen = _useState2[1];
+  var _useCreateSegment = useCreateSegment(),
+    createSegment = _useCreateSegment.mutate,
+    isCreating = _useCreateSegment.isLoading;
+  var _useUpdateSegment = useUpdateSegment(),
+    updateSegment = _useUpdateSegment.mutate,
+    isUpdating = _useUpdateSegment.isLoading;
+  var isSubmitting = isCreating || isUpdating;
+  var searchParams = reactUtils.useQueryParams({
+    toCamelCase: false
+  });
+  var keywordValue = searchParams[SEARCH_TERM_KEY] || "";
+  var isEdit = isSavePaneOpen.action === SEGMENT_ACTIONS$1.EDIT;
+  var keywordFilter = _objectSpread$2(_objectSpread$2({
+    type: "text",
+    rule: "contains",
+    label: t("neetoFilters.common.searchTerm")
+  }, keyword), {}, {
+    key: SEARCH_TERM_KEY,
+    value: keywordValue
+  });
+  var filters = buildFiltersFromSearchParams(isKeywordFilterPresent(keywordFilter) && neetoCist.isNotEmpty(keywordValue) ? [keywordFilter].concat(_toConsumableArray(columns)) : columns);
+  var nonHiddenFilters = neetoCist.removeBy({
+    hidden: true
+  }, filters);
+  var handleApplyFilters = function handleApplyFilters(newFilters, isClearAll) {
+    var params = buildUrlFromFilters(_objectSpread$2({
+      columns: columns,
+      filters: isKeywordFilterPresent(keywordFilter) && neetoCist.isNotEmpty(getSearchTermFromUrl()) ? [].concat(_toConsumableArray(newFilters), [keywordFilter]) : newFilters
+    }, isClearAll && {
+      isClearAll: true,
+      childrenKeys: childrenKeys
+    }));
+    history.push({
+      search: params
+    });
+  };
+  var childrenFiltersApplied = childrenKeys.some(function (key) {
+    return ramda.has(key, searchParams);
+  });
   React.useEffect(function () {
-    if (!ramda.isEmpty(filters)) return;
-    setSelectedRule(SINGLE_TIME_OPTIONS[0]);
-  }, [filters]);
-  var handleRuleChange = function handleRuleChange(ruleOption) {
-    setSelectedRule(ruleOption);
-
-    // Clear value if switched between incompatible types
-    var updateValue = value;
-    if (timePickerType === "range" && ruleOption.value !== "between" || timePickerType === "time" && ruleOption.value === "between") {
-      updateValue = "";
+    if (initialRenderRef.current) {
+      initialRenderRef.current = false;
+      return neetoCist.noop;
     }
-    var updatedFilter = buildUpdatedFilter({
-      column: column,
-      defaultType: defaultType,
-      option: {},
-      rule: ruleOption.value,
-      value: updateValue
+    var handler = setTimeout(function () {
+      handleApplyFilters(filters);
+    }, 500);
+    return function () {
+      return clearTimeout(handler);
+    };
+  }, [keywordValue]);
+  var handleCreateSuccess = function handleCreateSuccess(_ref2) {
+    var _filters$;
+    var _ref2$segment = _ref2.segment,
+      id = _ref2$segment.id,
+      filters = _ref2$segment.filters;
+    history.push({
+      search: buildUrlFromSegment({
+        columns: columns,
+        filters: (_filters$ = filters[0]) === null || _filters$ === void 0 ? void 0 : _filters$.conditions,
+        id: id
+      })
     });
-    handleApplyFilter(updatedFilter);
+    setIsSavePaneOpen({
+      action: undefined
+    });
+    utils.showThumbsUpToastr();
   };
-  var handleChange = function handleChange(times) {
-    var value = timePickerType === "range" ? ramda.pluck("$d", times).map(function (time) {
-      return time.toISOString();
-    }) : times["$d"].toISOString();
-    var updatedFilter = buildUpdatedFilter({
-      column: column,
-      defaultType: defaultType,
-      option: {},
-      rule: selectedRule.value,
-      value: value
+  var handleCreate = function handleCreate(_ref3, _ref4) {
+    var name = _ref3.name;
+    var setFieldError = _ref4.setFieldError;
+    var filtersPayload = buildSegmentsPayload(filters, childrenKeys);
+    createSegment({
+      name: name,
+      entity: entity,
+      filters: filtersPayload
+    }, {
+      onSuccess: handleCreateSuccess,
+      onError: function onError(error) {
+        return setFieldError("name", error.response.data.error);
+      }
     });
-    handleApplyFilter(updatedFilter);
   };
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-filters-pane-filter__item-wrapper"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
-    label: label,
-    defaultValue: SINGLE_TIME_OPTIONS[0],
-    options: SINGLE_TIME_OPTIONS,
-    strategy: "fixed",
-    value: selectedRule
-  }, neetoCist.isNotEmpty(helpIconProps) && {
-    labelProps: {
-      helpIconProps: buildHelpIconProps(helpIconProps)
-    }
-  }, {
-    onChange: handleRuleChange
-  })), /*#__PURE__*/React__default["default"].createElement(neetoui.TimePicker, _extends({
-    autoFocus: autoFocus,
-    value: value,
-    use12Hours: true,
-    className: "w-full",
-    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-filter"),
-    format: "h:mm A",
-    getPopupContainer: ramda.prop("parentNode"),
-    type: timePickerType,
-    onChange: handleChange
-  }, otherProps)));
-};
-
-var Text = function Text(_ref) {
-  var column = _ref.column,
-    filter = _ref.filter,
-    filters = _ref.filters,
-    handleApplyFilter = _ref.handleApplyFilter,
-    autoFocus = _ref.autoFocus,
-    onClose = _ref.onClose;
-  var key = column.key,
-    _column$defaultType = column.defaultType,
-    defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
-    label = column.label,
-    _column$showRuleSelec = column.showRuleSelector,
-    showRuleSelector = _column$showRuleSelec === void 0 ? false : _column$showRuleSelec,
-    _column$helpIconProps = column.helpIconProps,
-    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
-  var otherProps = getOtherProps(column);
-  var ruleOptions = buildRuleOptions({
-    defaultType: defaultType
-  });
-  var inputType = defaultType === "text" || defaultType === "custom.text" ? "text" : "number";
-  var _useState = React.useState(filter === null || filter === void 0 ? void 0 : filter.value),
-    _useState2 = _slicedToArray(_useState, 2),
-    inputValue = _useState2[0],
-    setInputValue = _useState2[1];
-  var _useState3 = React.useState(function () {
-      return neetoCist.findBy({
-        value: filter === null || filter === void 0 ? void 0 : filter.rule
-      }, ruleOptions) || ruleOptions[0];
-    }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectedRule = _useState4[0],
-    setSelectedRule = _useState4[1];
-  var debouncedInputValue = reactUtils.useDebounce(inputValue);
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var handleUpdateAndApplyFilter = function handleUpdateAndApplyFilter() {
-    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : debouncedInputValue;
-    var rule = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : selectedRule;
-    if (ramda.equals(filter === null || filter === void 0 ? void 0 : filter.value, value) && ramda.equals(selectedRule, rule)) return;
-    var updatedFilter = buildUpdatedFilter({
-      column: column,
-      defaultType: defaultType,
-      option: {},
-      rule: rule.value,
-      value: value.trim()
+  var handleUpdate = function handleUpdate(_ref5, _ref6) {
+    var name = _ref5.name;
+    var setFieldError = _ref6.setFieldError;
+    var filtersPayload = buildSegmentsPayload(filters, childrenKeys);
+    updateSegment({
+      id: segmentId,
+      payload: {
+        name: name,
+        filters: filtersPayload
+      }
+    }, {
+      onSuccess: function onSuccess() {
+        setIsSavePaneOpen({
+          action: undefined
+        });
+        utils.showThumbsUpToastr();
+      },
+      onError: function onError(error) {
+        return setFieldError("name", error.response.data.error);
+      }
     });
-    handleApplyFilter(updatedFilter);
-  };
-  var handleKeydown = function handleKeydown(e) {
-    if (!(e.key === "Enter")) return;
-    handleUpdateAndApplyFilter(inputValue);
-    onClose();
   };
-  var handleRuleChange = function handleRuleChange(ruleOption) {
-    setSelectedRule(ruleOption);
-    if (!debouncedInputValue) return;
-    handleUpdateAndApplyFilter(debouncedInputValue, ruleOption);
+  return {
+    isEdit: isEdit,
+    filters: filters,
+    keywordFilter: keywordFilter,
+    isSubmitting: isSubmitting,
+    nonHiddenFilters: nonHiddenFilters,
+    isSavePaneOpen: isSavePaneOpen,
+    setIsSavePaneOpen: setIsSavePaneOpen,
+    handleApplyFilters: handleApplyFilters,
+    childrenFiltersApplied: childrenFiltersApplied,
+    handleSubmit: isEdit ? handleUpdate : handleCreate
   };
+};
 
-  // Reset states when "Clear filters" button is clicked.
-  React.useEffect(function () {
-    (ramda.isEmpty(filters) || ramda.isNil(filter)) && setInputValue("");
-  }, [filter]);
-  React.useEffect(function () {
-    if (!debouncedInputValue) {
-      !isUndefinedOrEmpty(filter) && handleApplyFilter({
-        _delete: true
+var Menu = neetoui.Dropdown.Menu,
+  MenuItem = neetoui.Dropdown.MenuItem;
+var SegmentBar = function SegmentBar(_ref) {
+  var entity = _ref.entity,
+    filters = _ref.filters,
+    setIsSavePaneOpen = _ref.setIsSavePaneOpen,
+    setIsPaneOpen = _ref.setIsPaneOpen;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useQueryParams = reactUtils.useQueryParams(),
+    segmentId = _useQueryParams.segmentId;
+  var queryClient = reactQuery.useQueryClient();
+  var cachedSegments = queryClient.getQueryData([QUERY_KEYS.SEGMENTS_LIST, entity, ""]) || DEFAULT_SEGMENTS_CACHE;
+  var segment = neetoCist.findById(segmentId, cachedSegments.segments);
+  if (neetoCist.isNotPresent(segment)) return null;
+  var newChangesExists = deepCompare(segment.filters[0].conditions, filters);
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "neeto-ui-text-gray-600 mr-4",
+    "data-cy": "neeto-filters-segment-name",
+    style: "h4"
+  }, segment.name), newChangesExists && /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
+    buttonStyle: "secondary",
+    label: t("neetoFilters.segments.updateSegment")
+  }, /*#__PURE__*/React__default["default"].createElement(Menu, null, /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
+    onClick: function onClick() {
+      return setIsSavePaneOpen({
+        action: SEGMENT_ACTIONS$1.EDIT
       });
-      return;
-    }
-    handleUpdateAndApplyFilter();
-  }, [debouncedInputValue]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-filters-pane-filter__item-wrapper"
-  }, showRuleSelector && /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
-    label: label,
-    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-filter-rule"),
-    defaultValue: ruleOptions[0],
-    options: ruleOptions,
-    strategy: "fixed",
-    value: selectedRule,
-    onChange: handleRuleChange
-  }, neetoCist.isNotEmpty(helpIconProps) && {
-    labelProps: {
-      helpIconProps: buildHelpIconProps(helpIconProps)
     }
-  })), /*#__PURE__*/React__default["default"].createElement(neetoui.Input, _extends({
-    autoFocus: autoFocus,
-    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-filter"),
-    label: !showRuleSelector && label,
-    type: inputType,
-    value: inputValue
-  }, neetoCist.isNotEmpty(helpIconProps) && {
-    labelProps: {
-      helpIconProps: buildHelpIconProps(helpIconProps)
+  }, t("neetoFilters.segments.updateSegment")), /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
+    onClick: function onClick() {
+      setIsPaneOpen(false);
+      setIsSavePaneOpen({
+        action: SEGMENT_ACTIONS$1.CREATE
+      });
     }
-  }, {
-    placeholder: t("neetoFilters.messages.enterResource", {
-      resource: label
-    }),
-    onChange: function onChange(event) {
-      return setInputValue(event.target.value);
-    },
-    onKeyDown: handleKeydown
-  }, otherProps)));
+  }, t("neetoFilters.segments.saveAsNewSegment")))));
 };
 
-var Time = function Time(_ref) {
-  var column = _ref.column,
-    filter = _ref.filter,
-    handleApplyFilter = _ref.handleApplyFilter,
-    autoFocus = _ref.autoFocus;
-  var key = column.key,
-    _column$defaultType = column.defaultType,
-    defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
-    label = column.label,
-    _column$helpIconProps = column.helpIconProps,
-    helpIconProps = _column$helpIconProps === void 0 ? {} : _column$helpIconProps;
-  var otherProps = getOtherProps(column);
-  var value = buildSingleTimeValue(filter);
-  var isCustomTimeRangeShown = filter && isCustomTimeRange(filter.value);
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var handleChange = function handleChange(option) {
-    if (ramda.isEmpty(option) || ramda.isNil(option)) {
-      handleApplyFilter({
-        _delete: true
+var Bar = function Bar(_ref) {
+  var entity = _ref.entity,
+    className = _ref.className,
+    _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? [] : _ref$columns,
+    _ref$keyword = _ref.keyword,
+    keyword = _ref$keyword === void 0 ? {
+      node: "",
+      value: "",
+      setValue: neetoCist.noop
+    } : _ref$keyword,
+    _ref$setIsPaneOpen = _ref.setIsPaneOpen,
+    setIsPaneOpen = _ref$setIsPaneOpen === void 0 ? ramda.identity : _ref$setIsPaneOpen,
+    _ref$childrenKeys = _ref.childrenKeys,
+    childrenKeys = _ref$childrenKeys === void 0 ? [] : _ref$childrenKeys,
+    _ref$defaultSegmentNa = _ref.defaultSegmentName,
+    defaultSegmentName = _ref$defaultSegmentNa === void 0 ? i18next.t("neetoFilters.common.allResults") : _ref$defaultSegmentNa,
+    customFilters = _ref.customFilters;
+  var queryClient = reactQuery.useQueryClient();
+  var _useQueryParams = reactUtils.useQueryParams(),
+    segmentId = _useQueryParams.segmentId;
+  var segmentFormInitialRef = React.useRef(null);
+  var _useSegment = useSegment({
+      entity: entity,
+      keyword: keyword,
+      columns: columns,
+      childrenKeys: childrenKeys
+    }),
+    isEdit = _useSegment.isEdit,
+    filters = _useSegment.filters,
+    handleSubmit = _useSegment.handleSubmit,
+    isSubmitting = _useSegment.isSubmitting,
+    keywordFilter = _useSegment.keywordFilter,
+    isSavePaneOpen = _useSegment.isSavePaneOpen,
+    nonHiddenFilters = _useSegment.nonHiddenFilters,
+    setIsSavePaneOpen = _useSegment.setIsSavePaneOpen,
+    handleApplyFilters = _useSegment.handleApplyFilters,
+    childrenFiltersApplied = _useSegment.childrenFiltersApplied;
+  var BarComponent = segmentId ? SegmentBar : FilterBar;
+  var cachedSegments = queryClient.getQueryData([QUERY_KEYS.SEGMENTS_LIST, entity, ""]) || DEFAULT_SEGMENTS_CACHE;
+  var segment = neetoCist.findById(segmentId, cachedSegments.segments);
+  if (ramda.isEmpty(nonHiddenFilters) && !childrenFiltersApplied) return null;
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classnames__default["default"]("neeto-filters-bar", _defineProperty({}, className, className))
+  }, /*#__PURE__*/React__default["default"].createElement(BarComponent, {
+    childrenFiltersApplied: childrenFiltersApplied,
+    childrenKeys: childrenKeys,
+    entity: entity,
+    filters: filters,
+    handleApplyFilters: handleApplyFilters,
+    keywordFilter: keywordFilter,
+    nonHiddenFilters: nonHiddenFilters,
+    setIsPaneOpen: setIsPaneOpen,
+    setIsSavePaneOpen: setIsSavePaneOpen
+  })), /*#__PURE__*/React__default["default"].createElement(SegmentForm, {
+    childrenKeys: childrenKeys,
+    columns: columns,
+    customFilters: customFilters,
+    defaultSegmentName: defaultSegmentName,
+    filters: filters,
+    handleSubmit: handleSubmit,
+    isEdit: isEdit,
+    isSubmitting: isSubmitting,
+    keywordFilter: keywordFilter,
+    segmentFormInitialRef: segmentFormInitialRef,
+    isOpen: neetoCist.isPresent(isSavePaneOpen.action),
+    initialValues: isEdit ? ramda.assoc("filters", [{
+      conditions: filters
+    }], segment) : {
+      name: "",
+      filters: [{
+        conditions: filters
+      }]
+    },
+    onClose: function onClose() {
+      return setIsSavePaneOpen({
+        action: undefined
       });
-      return;
-    }
-    var updatedFilter = buildUpdatedFilter({
-      column: column,
-      defaultType: defaultType,
-      option: option
-    });
-    handleApplyFilter(updatedFilter);
-  };
-  var handleTimeRangeChange = function handleTimeRangeChange(times) {
-    var updatedFilter = buildUpdatedFilter({
-      column: column,
-      defaultType: defaultType,
-      option: {
-        value: ramda.pluck("$d", times).map(function (time) {
-          return time.toISOString();
-        })
-      }
-    });
-    handleApplyFilter(updatedFilter);
-  };
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-filters-pane-filter__item-wrapper"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
-    autoFocus: autoFocus,
-    label: label,
-    value: value,
-    isClearable: true,
-    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-filter"),
-    options: TIME_OPTIONS,
-    strategy: "fixed",
-    placeholder: t("neetoFilters.messages.selectResource", {
-      resource: label
-    })
-  }, neetoCist.isNotEmpty(helpIconProps) && {
-    labelProps: {
-      helpIconProps: buildHelpIconProps(helpIconProps)
     }
-  }, {
-    onChange: handleChange
-  })), isCustomTimeRangeShown && /*#__PURE__*/React__default["default"].createElement(neetoui.TimePicker, _extends({
-    use12Hours: true,
-    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-date-range"),
-    format: "h:mm A",
-    getPopupContainer: ramda.prop("parentNode"),
-    type: "range",
-    value: filter.value,
-    onChange: handleTimeRangeChange
-  }, otherProps)));
+  }));
 };
-var Time$1 = /*#__PURE__*/React__default["default"].memo(Time);
 
-var Item = function Item(_ref) {
-  var column = _ref.column,
-    filters = _ref.filters,
-    onChange = _ref.onChange,
-    autoFocus = _ref.autoFocus,
-    onClose = _ref.onClose;
-  var key = column.key,
-    _column$defaultType = column.defaultType,
-    defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType;
-  var filter = React.useMemo(function () {
-    return neetoCist.findBy({
-      key: key
-    }, filters);
-  }, [filters, key]);
-  var handleApplyFilter = function handleApplyFilter(updatedFilter) {
-    if (updatedFilter._delete) onChange(neetoCist.removeBy({
-      key: key
-    }, filters));else if (!filter) onChange(ramda.append(updatedFilter, filters));else onChange(neetoCist.replaceBy({
-      key: key
-    }, updatedFilter, filters));
-  };
-  if (isText(defaultType) || isDigit(defaultType)) {
-    return /*#__PURE__*/React__default["default"].createElement(Text, {
-      autoFocus: autoFocus,
-      column: column,
-      filter: filter,
-      filters: filters,
-      handleApplyFilter: handleApplyFilter,
-      onClose: onClose
-    });
-  }
-  if (isDate(defaultType)) {
-    return /*#__PURE__*/React__default["default"].createElement(Datetime$1, {
-      autoFocus: autoFocus,
-      column: column,
-      filter: filter,
-      handleApplyFilter: handleApplyFilter
-    });
+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];
   }
-  if (isTime(defaultType)) {
-    return /*#__PURE__*/React__default["default"].createElement(Time$1, {
-      autoFocus: autoFocus,
-      column: column,
-      filter: filter,
-      handleApplyFilter: handleApplyFilter
-    });
+  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];
+    }
   }
-  if (isSingleDate(defaultType)) {
-    return /*#__PURE__*/React__default["default"].createElement(SingleDatetime, {
-      autoFocus: autoFocus,
-      column: column,
-      filter: filter,
-      filters: filters,
-      handleApplyFilter: handleApplyFilter
+  return target;
+}
+
+var useFilters = function useFilters(_ref) {
+  var onFiltersChange = _ref.onFiltersChange,
+    columns = _ref.columns,
+    keywordFilter = _ref.keywordFilter,
+    onSelectorsChange = _ref.onSelectorsChange;
+  var _useTransition = React.useTransition(),
+    _useTransition2 = _slicedToArray(_useTransition, 2);
+    _useTransition2[0];
+    var startTransition = _useTransition2[1];
+  var initialRender = React.useRef(true);
+  var prevFilters = React.useRef([]);
+  var location = reactRouterDom.useLocation();
+  var filters = buildFiltersFromSearchParams(columns, false);
+  var history = reactRouterDom.useHistory();
+  var defaultValuesOfColumns = JSON.stringify(ramda.pluck("defaultValue", columns));
+  var handlePrecenseOfDefaultFilters = function handlePrecenseOfDefaultFilters(defaultFilters) {
+    var params = buildUrlFromFilters({
+      columns: columns,
+      filters: isKeywordFilterPresent(keywordFilter) && neetoCist.isNotEmpty(getSearchTermFromUrl()) ? [].concat(_toConsumableArray(defaultFilters), [keywordFilter]) : defaultFilters
     });
-  }
-  if (isSingleTime(defaultType)) {
-    return /*#__PURE__*/React__default["default"].createElement(SingleTime, {
-      autoFocus: autoFocus,
-      column: column,
-      filter: filter,
-      filters: filters,
-      handleApplyFilter: handleApplyFilter
+    history.replace({
+      search: params
     });
-  }
-  if (isBoolean(defaultType) || isCheckbox(defaultType)) {
-    return /*#__PURE__*/React__default["default"].createElement(Boolean$1, {
-      autoFocus: autoFocus,
-      column: column,
-      filter: filter,
-      handleApplyFilter: handleApplyFilter
+  };
+  var handleFiltersChange = function handleFiltersChange(filtersPayload) {
+    startTransition(function () {
+      onFiltersChange(buildFiltersPayload(filtersPayload.filter(function (filter) {
+        return !ramda.isNil(filter.node);
+      })));
     });
-  }
-  return /*#__PURE__*/React__default["default"].createElement(Dropdown$1, {
-    autoFocus: autoFocus,
-    column: column,
-    filter: filter,
-    handleApplyFilter: handleApplyFilter
-  });
+  };
+
+  //This function sends the updated filters to host via callbacks.
+  var sendUpdatedFilters = function sendUpdatedFilters() {
+    if (compareFilters(ramda.append(keywordFilter, filters), prevFilters.current)) {
+      return;
+    }
+    var newFilters = buildFiltersFromSearchParams(columns);
+    var filtersPayload = isKeywordFilterPresent(keywordFilter) && neetoCist.isNotEmpty(getSearchTermFromUrl()) ? ramda.append(keywordFilter, newFilters) : newFilters;
+    handleFiltersChange(filtersPayload);
+    onSelectorsChange(buildSelectorsFromURL(columns));
+  };
+  var handleChangesInURL = function handleChangesInURL() {
+    var defaultFilters = buildDefaultFilters(columns, filters);
+    var searchParams = getSnakeCasedQueryParams();
+    var keys = ramda.pluck("key", ramda.append(keywordFilter, columns));
+    if (keys.every(function (key) {
+      return ramda.isNil(searchParams[key]);
+    }) && !ramda.isEmpty(defaultFilters)) {
+      history.replace({
+        search: buildUrlFromFilters({
+          columns: columns,
+          filters: ramda.concat(defaultFilters, filters)
+        })
+      });
+      filters = buildFiltersFromSearchParams(columns, false);
+    }
+  };
+  React.useEffect(function () {
+    if (initialRender.current) {
+      initialRender.current = false;
+      var keywordValue = getSearchTermFromUrl();
+      var defaultFilters = buildDefaultFilters(columns, filters);
+      neetoCist.isNotEmpty(defaultFilters) && handlePrecenseOfDefaultFilters(defaultFilters);
+      prevFilters.current = ramda.append(ramda.mergeRight(keywordFilter, {
+        value: keywordValue
+      }), filters);
+    } else {
+      handleChangesInURL();
+      sendUpdatedFilters();
+      prevFilters.current = ramda.append(keywordFilter, filters);
+    }
+  }, [location.search, defaultValuesOfColumns]);
+  return filters;
 };
 
 var _excluded = ["isOpen", "onClose", "columns", "onChange", "isSearchable", "keyword", "onSelectorsChange", "childrenKeys", "children", "className"];
@@ -2562,7 +3015,7 @@ var Pane = function Pane(_ref) {
 
 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 = ".neeto-filters-bar{align-items:center;display:flex;flex-wrap:wrap}.neeto-filters-bar__block{border-radius:var(--neeto-ui-rounded);display:flex;gap:4px;margin:4px 0;max-width:384px;overflow:hidden;padding:4px 8px;position:relative;transition:var(--neeto-ui-transition);white-space:nowrap}.neeto-filters-bar__block p:first-child{color:rgb(var(--neeto-ui-gray-700))}.neeto-filters-bar__block-close{background-image:linear-gradient(90deg,rgba(var(--neeto-ui-gray-200),.5) 0,rgba(var(--neeto-ui-gray-200),1) 25%);color:rgb(var(--neeto-ui-gray-800));opacity:0;padding:8px;position:absolute;right:0;top:0;transition:var(--neeto-ui-transition)}.neeto-filters-bar__block:active,.neeto-filters-bar__block:hover{background-color:rgb(var(--neeto-ui-gray-200));cursor:pointer}.neeto-filters-bar__block:active .neeto-filters-bar__block-close,.neeto-filters-bar__block:hover .neeto-filters-bar__block-close{border-radius:var(--neeto-ui-rounded);color:rgb(var(--neeto-ui-black));opacity:1}.neeto-filters-bar__block:focus{box-shadow:0 0 0 3px rgba(var(--neeto-ui-gray-800),15%);outline:none}.neeto-filters-bar--separator{align-self:stretch;border-left:1px solid rgb(var(--neeto-ui-gray-400));margin:12px 8px}.neeto-filters-pane-filter{overflow:visible;width:360px}.neeto-filters-pane-filter__body{align-items:stretch!important;gap:20px}.neeto-filters-pane-filter__body>*{flex-grow:0!important}.neeto-filters-pane-filter__body p{text-align:center}.neeto-filters-pane-filter__body .neeto-filters-pane-filter__item-wrapper{display:flex;flex-direction:column;gap:8px}.neeto-filters-pane-filter__body .accordion_item .neeto-filters-pane-filter__item-wrapper{margin-top:16px}.neeto-filters-pane-filter__body .accordion_item .neeto-filters-pane-filter__item-wrapper:first-of-type{margin-top:0}.neeto-filters-pane-filter__body .accordion_item:first-of-type .neeto-ui-accordion__item{padding-top:0}.neeto-filters-pane-filter__body .neeto-ui-accordion__wrapper--last-item{border-bottom:thin solid rgb(var(--neeto-ui-gray-300))}@media screen and (max-width:767px){.neeto-filters-pane-filter{width:100vw}}.neeto-filters-pane-backdrop{-webkit-backdrop-filter:blur(0)!important;backdrop-filter:blur(0)!important;background-color:rgba(var(--neeto-ui-gray-700),.2)}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9jb21wb25lbnRzL19iYXIuc2NzcyIsImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9pbmRleC5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3JjL3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX2ZpbHRlcnMuc2NzcyIsImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9hYnN0cmFjdHMvX21peGlucy5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG1CQUdFLGtCQUFBLENBRkEsWUFBQSxDQUNBLGNDRUYsQ0RDRSwwQkFLRSxxQ0FBQSxDQUhBLFlBQUEsQ0FFQSxPQUFBLENBR0EsWUFBQSxDQUNBLGVBQUEsQ0FFQSxlQUFBLENBVEEsZUFBQSxDQUVBLGlCQUFBLENBR0EscUNBQUEsQ0FHQSxrQkNFSixDRENJLHdDQUNFLG1DQ0NOLENERUksZ0NBUUUsZ0hBQUEsQ0FGQSxtQ0FBQSxDQURBLFNBQUEsQ0FEQSxXQUFBLENBSEEsaUJBQUEsQ0FFQSxPQUFBLENBREEsS0FBQSxDQUtBLHFDQ0NOLENET0ksaUVBRUUsOENBQUEsQ0FDQSxjQ05OLENEUU0saUlBR0UscUNBQUEsQ0FEQSxnQ0FBQSxDQURBLFNDSlIsQ0RVSSxnQ0FFRSx1REFBQSxDQURBLFlDUE4sQ0RZRSw4QkFHRSxrQkFBQSxDQUZBLG1EQUFBLENBQ0EsZUNUSixDQy9DQSwyQkFFRSxnQkFBQSxDQURBLFdEbURGLENDaERFLGlDQUNFLDZCQUFBLENBQ0EsUURrREosQ0NoREksbUNBQ0UscUJEa0ROLENDL0NJLG1DQUNFLGlCRGlETixDQzlDSSwwRUFDRSxZQUFBLENBQ0EscUJBQUEsQ0FDQSxPRGdETixDQzVDTSwwRkFDRSxlRDhDUixDQzVDUSx3R0FDRSxZRDhDVixDQzFDUSx5RkFDRSxhRDRDVixDQ3hDSSx5RUFDRSxzREQwQ04sQ0VqRUksb0NEZEosMkJBMENJLFdEeUNGLENBQ0YsQ0N0Q0EsNkJBQ0UseUNBQUEsQ0FBQSxpQ0FBQSxDQUNBLGtERHlDRiIsInNvdXJjZXNDb250ZW50IjpbIi5uZWV0by1maWx0ZXJzLWJhciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtd3JhcDogd3JhcDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAmX19ibG9jayB7XG4gICAgcGFkZGluZzogNHB4IDhweDtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBnYXA6IDRweDtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1uZWV0by11aS1yb3VuZGVkKTtcbiAgICB0cmFuc2l0aW9uOiB2YXIoLS1uZWV0by11aS10cmFuc2l0aW9uKTtcbiAgICBtYXJnaW46IDRweCAwO1xuICAgIG1heC13aWR0aDogMzg0cHg7XG4gICAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuXG4gICAgcDpmaXJzdC1jaGlsZCB7XG4gICAgICBjb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktNzAwKSk7XG4gICAgfVxuXG4gICAgJi1jbG9zZSB7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICB0b3A6IDA7XG4gICAgICByaWdodDogMDtcbiAgICAgIHBhZGRpbmc6IDhweDtcbiAgICAgIG9wYWNpdHk6IDA7XG4gICAgICBjb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktODAwKSk7XG4gICAgICB0cmFuc2l0aW9uOiB2YXIoLS1uZWV0by11aS10cmFuc2l0aW9uKTtcbiAgICAgIGJhY2tncm91bmQtaW1hZ2U6IGxpbmVhci1ncmFkaWVudChcbiAgICAgICAgOTBkZWcsXG4gICAgICAgIHJnYmEodmFyKC0tbmVldG8tdWktZ3JheS0yMDApLCAwLjUpIDAlLFxuICAgICAgICByZ2JhKHZhcigtLW5lZXRvLXVpLWdyYXktMjAwKSwgMSkgMjUlXG4gICAgICApO1xuICAgIH1cblxuICAgICY6aG92ZXIsXG4gICAgJjphY3RpdmUge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktMjAwKSk7XG4gICAgICBjdXJzb3I6IHBvaW50ZXI7XG5cbiAgICAgIC5uZWV0by1maWx0ZXJzLWJhcl9fYmxvY2stY2xvc2Uge1xuICAgICAgICBvcGFjaXR5OiAxO1xuICAgICAgICBjb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWJsYWNrKSk7XG4gICAgICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLW5lZXRvLXVpLXJvdW5kZWQpO1xuICAgICAgfVxuICAgIH1cblxuICAgICY6Zm9jdXMge1xuICAgICAgb3V0bGluZTogbm9uZTtcbiAgICAgIGJveC1zaGFkb3c6IDAgMCAwIDNweCByZ2JhKHZhcigtLW5lZXRvLXVpLWdyYXktODAwKSwgMTUlKTtcbiAgICB9XG4gIH1cblxuICAmLS1zZXBhcmF0b3Ige1xuICAgIGJvcmRlci1sZWZ0OiAxcHggc29saWQgcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktNDAwKSk7XG4gICAgbWFyZ2luOiAxMnB4IDhweDtcbiAgICBhbGlnbi1zZWxmOiBzdHJldGNoO1xuICB9XG59XG4iLCIubmVldG8tZmlsdGVycy1iYXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LXdyYXA6IHdyYXA7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG59XG4ubmVldG8tZmlsdGVycy1iYXJfX2Jsb2NrIHtcbiAgcGFkZGluZzogNHB4IDhweDtcbiAgZGlzcGxheTogZmxleDtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBnYXA6IDRweDtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tbmVldG8tdWktcm91bmRlZCk7XG4gIHRyYW5zaXRpb246IHZhcigtLW5lZXRvLXVpLXRyYW5zaXRpb24pO1xuICBtYXJnaW46IDRweCAwO1xuICBtYXgtd2lkdGg6IDM4NHB4O1xuICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICBvdmVyZmxvdzogaGlkZGVuO1xufVxuLm5lZXRvLWZpbHRlcnMtYmFyX19ibG9jayBwOmZpcnN0LWNoaWxkIHtcbiAgY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTcwMCkpO1xufVxuLm5lZXRvLWZpbHRlcnMtYmFyX19ibG9jay1jbG9zZSB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAwO1xuICByaWdodDogMDtcbiAgcGFkZGluZzogOHB4O1xuICBvcGFjaXR5OiAwO1xuICBjb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktODAwKSk7XG4gIHRyYW5zaXRpb246IHZhcigtLW5lZXRvLXVpLXRyYW5zaXRpb24pO1xuICBiYWNrZ3JvdW5kLWltYWdlOiBsaW5lYXItZ3JhZGllbnQoOTBkZWcsIHJnYmEodmFyKC0tbmVldG8tdWktZ3JheS0yMDApLCAwLjUpIDAlLCByZ2JhKHZhcigtLW5lZXRvLXVpLWdyYXktMjAwKSwgMSkgMjUlKTtcbn1cbi5uZWV0by1maWx0ZXJzLWJhcl9fYmxvY2s6aG92ZXIsIC5uZWV0by1maWx0ZXJzLWJhcl9fYmxvY2s6YWN0aXZlIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktMjAwKSk7XG4gIGN1cnNvcjogcG9pbnRlcjtcbn1cbi5uZWV0by1maWx0ZXJzLWJhcl9fYmxvY2s6aG92ZXIgLm5lZXRvLWZpbHRlcnMtYmFyX19ibG9jay1jbG9zZSwgLm5lZXRvLWZpbHRlcnMtYmFyX19ibG9jazphY3RpdmUgLm5lZXRvLWZpbHRlcnMtYmFyX19ibG9jay1jbG9zZSB7XG4gIG9wYWNpdHk6IDE7XG4gIGNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktYmxhY2spKTtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tbmVldG8tdWktcm91bmRlZCk7XG59XG4ubmVldG8tZmlsdGVycy1iYXJfX2Jsb2NrOmZvY3VzIHtcbiAgb3V0bGluZTogbm9uZTtcbiAgYm94LXNoYWRvdzogMCAwIDAgM3B4IHJnYmEodmFyKC0tbmVldG8tdWktZ3JheS04MDApLCAxNSUpO1xufVxuLm5lZXRvLWZpbHRlcnMtYmFyLS1zZXBhcmF0b3Ige1xuICBib3JkZXItbGVmdDogMXB4IHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTQwMCkpO1xuICBtYXJnaW46IDEycHggOHB4O1xuICBhbGlnbi1zZWxmOiBzdHJldGNoO1xufVxuXG4ubmVldG8tZmlsdGVycy1wYW5lLWZpbHRlciB7XG4gIHdpZHRoOiAzNjBweDtcbiAgb3ZlcmZsb3c6IHZpc2libGU7XG59XG4ubmVldG8tZmlsdGVycy1wYW5lLWZpbHRlcl9fYm9keSB7XG4gIGFsaWduLWl0ZW1zOiBzdHJldGNoICFpbXBvcnRhbnQ7XG4gIGdhcDogMjBweDtcbn1cbi5uZWV0by1maWx0ZXJzLXBhbmUtZmlsdGVyX19ib2R5ID4gKiB7XG4gIGZsZXgtZ3JvdzogMCAhaW1wb3J0YW50O1xufVxuLm5lZXRvLWZpbHRlcnMtcGFuZS1maWx0ZXJfX2JvZHkgcCB7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbn1cbi5uZWV0by1maWx0ZXJzLXBhbmUtZmlsdGVyX19ib2R5IC5uZWV0by1maWx0ZXJzLXBhbmUtZmlsdGVyX19pdGVtLXdyYXBwZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBnYXA6IDhweDtcbn1cbi5uZWV0by1maWx0ZXJzLXBhbmUtZmlsdGVyX19ib2R5IC5hY2NvcmRpb25faXRlbSAubmVldG8tZmlsdGVycy1wYW5lLWZpbHRlcl9faXRlbS13cmFwcGVyIHtcbiAgbWFyZ2luLXRvcDogMTZweDtcbn1cbi5uZWV0by1maWx0ZXJzLXBhbmUtZmlsdGVyX19ib2R5IC5hY2NvcmRpb25faXRlbSAubmVldG8tZmlsdGVycy1wYW5lLWZpbHRlcl9faXRlbS13cmFwcGVyOmZpcnN0LW9mLXR5cGUge1xuICBtYXJnaW4tdG9wOiAwO1xufVxuLm5lZXRvLWZpbHRlcnMtcGFuZS1maWx0ZXJfX2JvZHkgLmFjY29yZGlvbl9pdGVtOmZpcnN0LW9mLXR5cGUgLm5lZXRvLXVpLWFjY29yZGlvbl9faXRlbSB7XG4gIHBhZGRpbmctdG9wOiAwO1xufVxuLm5lZXRvLWZpbHRlcnMtcGFuZS1maWx0ZXJfX2JvZHkgLm5lZXRvLXVpLWFjY29yZGlvbl9fd3JhcHBlci0tbGFzdC1pdGVtIHtcbiAgYm9yZGVyLWJvdHRvbTogdGhpbiBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktZ3JheS0zMDApKTtcbn1cbkBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDc2N3B4KSB7XG4gIC5uZWV0by1maWx0ZXJzLXBhbmUtZmlsdGVyIHtcbiAgICB3aWR0aDogMTAwdnc7XG4gIH1cbn1cblxuLm5lZXRvLWZpbHRlcnMtcGFuZS1iYWNrZHJvcCB7XG4gIGJhY2tkcm9wLWZpbHRlcjogYmx1cigwcHgpICFpbXBvcnRhbnQ7XG4gIGJhY2tncm91bmQtY29sb3I6IHJnYmEodmFyKC0tbmVldG8tdWktZ3JheS03MDApLCAwLjIpO1xufSIsIi5uZWV0by1maWx0ZXJzLXBhbmUtZmlsdGVyIHtcbiAgd2lkdGg6IDM2MHB4O1xuICBvdmVyZmxvdzogdmlzaWJsZTtcblxuICAmX19ib2R5IHtcbiAgICBhbGlnbi1pdGVtczogc3RyZXRjaCAhaW1wb3J0YW50O1xuICAgIGdhcDogMjBweDtcblxuICAgID4gKiB7XG4gICAgICBmbGV4LWdyb3c6IDAgIWltcG9ydGFudDtcbiAgICB9XG5cbiAgICBwIHtcbiAgICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgICB9XG5cbiAgICAubmVldG8tZmlsdGVycy1wYW5lLWZpbHRlcl9faXRlbS13cmFwcGVyIHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgICAgZ2FwOiA4cHg7XG4gICAgfVxuXG4gICAgLmFjY29yZGlvbl9pdGVtIHtcbiAgICAgIC5uZWV0by1maWx0ZXJzLXBhbmUtZmlsdGVyX19pdGVtLXdyYXBwZXIge1xuICAgICAgICBtYXJnaW4tdG9wOiAxNnB4O1xuXG4gICAgICAgICY6Zmlyc3Qtb2YtdHlwZSB7XG4gICAgICAgICAgbWFyZ2luLXRvcDogMDtcbiAgICAgICAgfVxuICAgICAgfVxuICAgICAgJjpmaXJzdC1vZi10eXBlIHtcbiAgICAgICAgLm5lZXRvLXVpLWFjY29yZGlvbl9faXRlbSB7XG4gICAgICAgICAgcGFkZGluZy10b3A6IDA7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG4gICAgLm5lZXRvLXVpLWFjY29yZGlvbl9fd3JhcHBlci0tbGFzdC1pdGVtIHtcbiAgICAgIGJvcmRlci1ib3R0b206IHRoaW4gc29saWQgcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktMzAwKSk7XG4gICAgfVxuICB9XG5cbiAgQGluY2x1ZGUgdmlld3BvcnQobW9iKSB7XG4gICAgd2lkdGg6IDEwMHZ3O1xuICB9XG59XG5cbi5uZWV0by1maWx0ZXJzLXBhbmUtYmFja2Ryb3Age1xuICBiYWNrZHJvcC1maWx0ZXI6IGJsdXIoMHB4KSAhaW1wb3J0YW50O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKHZhcigtLW5lZXRvLXVpLWdyYXktNzAwKSwgMC4yKTtcbn1cbiIsIkBtaXhpbiB2aWV3cG9ydCgkbWVkaWEpIHtcbiAgQGlmICRtZWRpYT09ZGVzayB7XG4gICAgQG1lZGlhIHNjcmVlbiBhbmQgKG1pbi13aWR0aDogMTIwMHB4KSB7XG4gICAgICBAY29udGVudDtcbiAgICB9XG4gIH0gQGVsc2UgaWYgJG1lZGlhPT10YWItbWluIHtcbiAgICBAbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiAxMDI0cHgpIHtcbiAgICAgIEBjb250ZW50O1xuICAgIH1cbiAgfSBAZWxzZSBpZiAkbWVkaWE9PXRhYi1vbmx5IHtcbiAgICBAbWVkaWEgc2NyZWVuIGFuZCAobWluLXdpZHRoOiA3NjhweCkgYW5kIChtYXgtd2lkdGg6IDEwMjNweCkge1xuICAgICAgQGNvbnRlbnQ7XG4gICAgfVxuICB9IEBlbHNlIGlmICRtZWRpYT09bW9iIHtcbiAgICBAbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA3NjdweCkge1xuICAgICAgQGNvbnRlbnQ7XG4gICAgfVxuICB9IEBlbHNlIGlmICRtZWRpYT09eHMtbW9iIHtcbiAgICBAbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA0NzlweCkge1xuICAgICAgQGNvbnRlbnQ7XG4gICAgfVxuICB9XG59XG4iXX0= */";
+var css = ".neeto-filters-bar{align-items:center;display:flex;flex-wrap:wrap}.neeto-filters-bar__block{border-radius:var(--neeto-ui-rounded);display:flex;gap:4px;margin:4px 0;max-width:384px;overflow:hidden;padding:4px 8px;position:relative;transition:var(--neeto-ui-transition);white-space:nowrap}.neeto-filters-bar__block p:first-child{color:rgb(var(--neeto-ui-gray-700))}.neeto-filters-bar__block-close{background-image:linear-gradient(90deg,rgba(var(--neeto-ui-gray-200),.5) 0,rgba(var(--neeto-ui-gray-200),1) 25%);color:rgb(var(--neeto-ui-gray-800));opacity:0;padding:8px;position:absolute;right:0;top:0;transition:var(--neeto-ui-transition)}.neeto-filters-bar__block:active,.neeto-filters-bar__block:hover{background-color:rgb(var(--neeto-ui-gray-200));cursor:pointer}.neeto-filters-bar__block:active .neeto-filters-bar__block-close,.neeto-filters-bar__block:hover .neeto-filters-bar__block-close{border-radius:var(--neeto-ui-rounded);color:rgb(var(--neeto-ui-black));opacity:1}.neeto-filters-bar__block:focus{box-shadow:0 0 0 3px rgba(var(--neeto-ui-gray-800),15%);outline:none}.neeto-filters-bar--separator{align-self:stretch;border-left:1px solid rgb(var(--neeto-ui-gray-400));margin:12px 8px}.neeto-filters-pane-filter{overflow:visible;width:360px}.neeto-filters-pane-filter__body{align-items:stretch!important;gap:20px}.neeto-filters-pane-filter__body>*{flex-grow:0!important}.neeto-filters-pane-filter__body p{text-align:center}.neeto-filters-pane-filter__body .neeto-filters-pane-filter__item-wrapper{display:flex;flex:1;flex-direction:column;gap:8px}.neeto-filters-pane-filter__body .accordion_item .neeto-filters-pane-filter__item-wrapper{flex:1;margin-top:16px}.neeto-filters-pane-filter__body .accordion_item .neeto-filters-pane-filter__item-wrapper:first-of-type{margin-top:0}.neeto-filters-pane-filter__body .accordion_item:first-of-type .neeto-ui-accordion__item{padding-top:0}.neeto-filters-pane-filter__body .neeto-ui-accordion__wrapper--last-item{border-bottom:thin solid rgb(var(--neeto-ui-gray-300))}@media screen and (max-width:767px){.neeto-filters-pane-filter{width:100vw}}.neeto-filters-pane-backdrop{-webkit-backdrop-filter:blur(0)!important;backdrop-filter:blur(0)!important;background-color:rgba(var(--neeto-ui-gray-700),.2)}.neeto-filters-segment--active{border-color:rgb(var(--neeto-ui-primary-500))!important;box-shadow:0 0 0 1px rgb(var(--neeto-ui-primary-500))!important}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9jb21wb25lbnRzL19iYXIuc2NzcyIsImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9pbmRleC5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3JjL3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX2ZpbHRlcnMuc2NzcyIsImFwcC9qYXZhc2NyaXB0L3NyYy9zdHlsZXNoZWV0cy9hYnN0cmFjdHMvX21peGlucy5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3JjL3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX3NlZ21lbnRzLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsbUJBR0Usa0JBQUEsQ0FGQSxZQUFBLENBQ0EsY0NFRixDRENFLDBCQUtFLHFDQUFBLENBSEEsWUFBQSxDQUVBLE9BQUEsQ0FHQSxZQUFBLENBQ0EsZUFBQSxDQUVBLGVBQUEsQ0FUQSxlQUFBLENBRUEsaUJBQUEsQ0FHQSxxQ0FBQSxDQUdBLGtCQ0VKLENEQ0ksd0NBQ0UsbUNDQ04sQ0RFSSxnQ0FRRSxnSEFBQSxDQUZBLG1DQUFBLENBREEsU0FBQSxDQURBLFdBQUEsQ0FIQSxpQkFBQSxDQUVBLE9BQUEsQ0FEQSxLQUFBLENBS0EscUNDQ04sQ0RPSSxpRUFFRSw4Q0FBQSxDQUNBLGNDTk4sQ0RRTSxpSUFHRSxxQ0FBQSxDQURBLGdDQUFBLENBREEsU0NKUixDRFVJLGdDQUVFLHVEQUFBLENBREEsWUNQTixDRFlFLDhCQUdFLGtCQUFBLENBRkEsbURBQUEsQ0FDQSxlQ1RKLENDL0NBLDJCQUVFLGdCQUFBLENBREEsV0RtREYsQ0NoREUsaUNBQ0UsNkJBQUEsQ0FDQSxRRGtESixDQ2hESSxtQ0FDRSxxQkRrRE4sQ0MvQ0ksbUNBQ0UsaUJEaUROLENDOUNJLDBFQUNFLFlBQUEsQ0FHQSxNQUFBLENBRkEscUJBQUEsQ0FDQSxPRGlETixDQzVDTSwwRkFFRSxNQUFBLENBREEsZUQrQ1IsQ0M1Q1Esd0dBQ0UsWUQ4Q1YsQ0MxQ1EseUZBQ0UsYUQ0Q1YsQ0N4Q0kseUVBQ0Usc0REMENOLENFbkVJLG9DRGRKLDJCQTRDSSxXRHlDRixDQUNGLENDdENBLDZCQUNFLHlDQUFBLENBQUEsaUNBQUEsQ0FDQSxrRER5Q0YsQ0czRkEsK0JBQ0UsdURBQUEsQ0FDQSwrREg4RkYiLCJzb3VyY2VzQ29udGVudCI6WyIubmVldG8tZmlsdGVycy1iYXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LXdyYXA6IHdyYXA7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cbiAgJl9fYmxvY2sge1xuICAgIHBhZGRpbmc6IDRweCA4cHg7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgZ2FwOiA0cHg7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKC0tbmVldG8tdWktcm91bmRlZCk7XG4gICAgdHJhbnNpdGlvbjogdmFyKC0tbmVldG8tdWktdHJhbnNpdGlvbik7XG4gICAgbWFyZ2luOiA0cHggMDtcbiAgICBtYXgtd2lkdGg6IDM4NHB4O1xuICAgIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcblxuICAgIHA6Zmlyc3QtY2hpbGQge1xuICAgICAgY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTcwMCkpO1xuICAgIH1cblxuICAgICYtY2xvc2Uge1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgdG9wOiAwO1xuICAgICAgcmlnaHQ6IDA7XG4gICAgICBwYWRkaW5nOiA4cHg7XG4gICAgICBvcGFjaXR5OiAwO1xuICAgICAgY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTgwMCkpO1xuICAgICAgdHJhbnNpdGlvbjogdmFyKC0tbmVldG8tdWktdHJhbnNpdGlvbik7XG4gICAgICBiYWNrZ3JvdW5kLWltYWdlOiBsaW5lYXItZ3JhZGllbnQoXG4gICAgICAgIDkwZGVnLFxuICAgICAgICByZ2JhKHZhcigtLW5lZXRvLXVpLWdyYXktMjAwKSwgMC41KSAwJSxcbiAgICAgICAgcmdiYSh2YXIoLS1uZWV0by11aS1ncmF5LTIwMCksIDEpIDI1JVxuICAgICAgKTtcbiAgICB9XG5cbiAgICAmOmhvdmVyLFxuICAgICY6YWN0aXZlIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTIwMCkpO1xuICAgICAgY3Vyc29yOiBwb2ludGVyO1xuXG4gICAgICAubmVldG8tZmlsdGVycy1iYXJfX2Jsb2NrLWNsb3NlIHtcbiAgICAgICAgb3BhY2l0eTogMTtcbiAgICAgICAgY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ibGFjaykpO1xuICAgICAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1uZWV0by11aS1yb3VuZGVkKTtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAmOmZvY3VzIHtcbiAgICAgIG91dGxpbmU6IG5vbmU7XG4gICAgICBib3gtc2hhZG93OiAwIDAgMCAzcHggcmdiYSh2YXIoLS1uZWV0by11aS1ncmF5LTgwMCksIDE1JSk7XG4gICAgfVxuICB9XG5cbiAgJi0tc2VwYXJhdG9yIHtcbiAgICBib3JkZXItbGVmdDogMXB4IHNvbGlkIHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTQwMCkpO1xuICAgIG1hcmdpbjogMTJweCA4cHg7XG4gICAgYWxpZ24tc2VsZjogc3RyZXRjaDtcbiAgfVxufVxuIiwiLm5lZXRvLWZpbHRlcnMtYmFyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC13cmFwOiB3cmFwO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xufVxuLm5lZXRvLWZpbHRlcnMtYmFyX19ibG9jayB7XG4gIHBhZGRpbmc6IDRweCA4cHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgZ2FwOiA0cHg7XG4gIGJvcmRlci1yYWRpdXM6IHZhcigtLW5lZXRvLXVpLXJvdW5kZWQpO1xuICB0cmFuc2l0aW9uOiB2YXIoLS1uZWV0by11aS10cmFuc2l0aW9uKTtcbiAgbWFyZ2luOiA0cHggMDtcbiAgbWF4LXdpZHRoOiAzODRweDtcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbn1cbi5uZWV0by1maWx0ZXJzLWJhcl9fYmxvY2sgcDpmaXJzdC1jaGlsZCB7XG4gIGNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktZ3JheS03MDApKTtcbn1cbi5uZWV0by1maWx0ZXJzLWJhcl9fYmxvY2stY2xvc2Uge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogMDtcbiAgcmlnaHQ6IDA7XG4gIHBhZGRpbmc6IDhweDtcbiAgb3BhY2l0eTogMDtcbiAgY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTgwMCkpO1xuICB0cmFuc2l0aW9uOiB2YXIoLS1uZWV0by11aS10cmFuc2l0aW9uKTtcbiAgYmFja2dyb3VuZC1pbWFnZTogbGluZWFyLWdyYWRpZW50KDkwZGVnLCByZ2JhKHZhcigtLW5lZXRvLXVpLWdyYXktMjAwKSwgMC41KSAwJSwgcmdiYSh2YXIoLS1uZWV0by11aS1ncmF5LTIwMCksIDEpIDI1JSk7XG59XG4ubmVldG8tZmlsdGVycy1iYXJfX2Jsb2NrOmhvdmVyLCAubmVldG8tZmlsdGVycy1iYXJfX2Jsb2NrOmFjdGl2ZSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1ncmF5LTIwMCkpO1xuICBjdXJzb3I6IHBvaW50ZXI7XG59XG4ubmVldG8tZmlsdGVycy1iYXJfX2Jsb2NrOmhvdmVyIC5uZWV0by1maWx0ZXJzLWJhcl9fYmxvY2stY2xvc2UsIC5uZWV0by1maWx0ZXJzLWJhcl9fYmxvY2s6YWN0aXZlIC5uZWV0by1maWx0ZXJzLWJhcl9fYmxvY2stY2xvc2Uge1xuICBvcGFjaXR5OiAxO1xuICBjb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWJsYWNrKSk7XG4gIGJvcmRlci1yYWRpdXM6IHZhcigtLW5lZXRvLXVpLXJvdW5kZWQpO1xufVxuLm5lZXRvLWZpbHRlcnMtYmFyX19ibG9jazpmb2N1cyB7XG4gIG91dGxpbmU6IG5vbmU7XG4gIGJveC1zaGFkb3c6IDAgMCAwIDNweCByZ2JhKHZhcigtLW5lZXRvLXVpLWdyYXktODAwKSwgMTUlKTtcbn1cbi5uZWV0by1maWx0ZXJzLWJhci0tc2VwYXJhdG9yIHtcbiAgYm9yZGVyLWxlZnQ6IDFweCBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktZ3JheS00MDApKTtcbiAgbWFyZ2luOiAxMnB4IDhweDtcbiAgYWxpZ24tc2VsZjogc3RyZXRjaDtcbn1cblxuLm5lZXRvLWZpbHRlcnMtcGFuZS1maWx0ZXIge1xuICB3aWR0aDogMzYwcHg7XG4gIG92ZXJmbG93OiB2aXNpYmxlO1xufVxuLm5lZXRvLWZpbHRlcnMtcGFuZS1maWx0ZXJfX2JvZHkge1xuICBhbGlnbi1pdGVtczogc3RyZXRjaCAhaW1wb3J0YW50O1xuICBnYXA6IDIwcHg7XG59XG4ubmVldG8tZmlsdGVycy1wYW5lLWZpbHRlcl9fYm9keSA+ICoge1xuICBmbGV4LWdyb3c6IDAgIWltcG9ydGFudDtcbn1cbi5uZWV0by1maWx0ZXJzLXBhbmUtZmlsdGVyX19ib2R5IHAge1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG59XG4ubmVldG8tZmlsdGVycy1wYW5lLWZpbHRlcl9fYm9keSAubmVldG8tZmlsdGVycy1wYW5lLWZpbHRlcl9faXRlbS13cmFwcGVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgZ2FwOiA4cHg7XG4gIGZsZXg6IDE7XG59XG4ubmVldG8tZmlsdGVycy1wYW5lLWZpbHRlcl9fYm9keSAuYWNjb3JkaW9uX2l0ZW0gLm5lZXRvLWZpbHRlcnMtcGFuZS1maWx0ZXJfX2l0ZW0td3JhcHBlciB7XG4gIG1hcmdpbi10b3A6IDE2cHg7XG4gIGZsZXg6IDE7XG59XG4ubmVldG8tZmlsdGVycy1wYW5lLWZpbHRlcl9fYm9keSAuYWNjb3JkaW9uX2l0ZW0gLm5lZXRvLWZpbHRlcnMtcGFuZS1maWx0ZXJfX2l0ZW0td3JhcHBlcjpmaXJzdC1vZi10eXBlIHtcbiAgbWFyZ2luLXRvcDogMDtcbn1cbi5uZWV0by1maWx0ZXJzLXBhbmUtZmlsdGVyX19ib2R5IC5hY2NvcmRpb25faXRlbTpmaXJzdC1vZi10eXBlIC5uZWV0by11aS1hY2NvcmRpb25fX2l0ZW0ge1xuICBwYWRkaW5nLXRvcDogMDtcbn1cbi5uZWV0by1maWx0ZXJzLXBhbmUtZmlsdGVyX19ib2R5IC5uZWV0by11aS1hY2NvcmRpb25fX3dyYXBwZXItLWxhc3QtaXRlbSB7XG4gIGJvcmRlci1ib3R0b206IHRoaW4gc29saWQgcmdiKHZhcigtLW5lZXRvLXVpLWdyYXktMzAwKSk7XG59XG5AbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA3NjdweCkge1xuICAubmVldG8tZmlsdGVycy1wYW5lLWZpbHRlciB7XG4gICAgd2lkdGg6IDEwMHZ3O1xuICB9XG59XG5cbi5uZWV0by1maWx0ZXJzLXBhbmUtYmFja2Ryb3Age1xuICBiYWNrZHJvcC1maWx0ZXI6IGJsdXIoMHB4KSAhaW1wb3J0YW50O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKHZhcigtLW5lZXRvLXVpLWdyYXktNzAwKSwgMC4yKTtcbn1cblxuLm5lZXRvLWZpbHRlcnMtc2VnbWVudC0tYWN0aXZlIHtcbiAgYm9yZGVyLWNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktcHJpbWFyeS01MDApKSAhaW1wb3J0YW50O1xuICBib3gtc2hhZG93OiAwIDAgMCAxcHggcmdiKHZhcigtLW5lZXRvLXVpLXByaW1hcnktNTAwKSkgIWltcG9ydGFudDtcbn0iLCIubmVldG8tZmlsdGVycy1wYW5lLWZpbHRlciB7XG4gIHdpZHRoOiAzNjBweDtcbiAgb3ZlcmZsb3c6IHZpc2libGU7XG5cbiAgJl9fYm9keSB7XG4gICAgYWxpZ24taXRlbXM6IHN0cmV0Y2ggIWltcG9ydGFudDtcbiAgICBnYXA6IDIwcHg7XG5cbiAgICA+ICoge1xuICAgICAgZmxleC1ncm93OiAwICFpbXBvcnRhbnQ7XG4gICAgfVxuXG4gICAgcCB7XG4gICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gICAgfVxuXG4gICAgLm5lZXRvLWZpbHRlcnMtcGFuZS1maWx0ZXJfX2l0ZW0td3JhcHBlciB7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICAgIGdhcDogOHB4O1xuICAgICAgZmxleDogMTtcbiAgICB9XG5cbiAgICAuYWNjb3JkaW9uX2l0ZW0ge1xuICAgICAgLm5lZXRvLWZpbHRlcnMtcGFuZS1maWx0ZXJfX2l0ZW0td3JhcHBlciB7XG4gICAgICAgIG1hcmdpbi10b3A6IDE2cHg7XG4gICAgICAgIGZsZXg6IDE7XG5cbiAgICAgICAgJjpmaXJzdC1vZi10eXBlIHtcbiAgICAgICAgICBtYXJnaW4tdG9wOiAwO1xuICAgICAgICB9XG4gICAgICB9XG4gICAgICAmOmZpcnN0LW9mLXR5cGUge1xuICAgICAgICAubmVldG8tdWktYWNjb3JkaW9uX19pdGVtIHtcbiAgICAgICAgICBwYWRkaW5nLXRvcDogMDtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH1cbiAgICAubmVldG8tdWktYWNjb3JkaW9uX193cmFwcGVyLS1sYXN0LWl0ZW0ge1xuICAgICAgYm9yZGVyLWJvdHRvbTogdGhpbiBzb2xpZCByZ2IodmFyKC0tbmVldG8tdWktZ3JheS0zMDApKTtcbiAgICB9XG4gIH1cblxuICBAaW5jbHVkZSB2aWV3cG9ydChtb2IpIHtcbiAgICB3aWR0aDogMTAwdnc7XG4gIH1cbn1cblxuLm5lZXRvLWZpbHRlcnMtcGFuZS1iYWNrZHJvcCB7XG4gIGJhY2tkcm9wLWZpbHRlcjogYmx1cigwcHgpICFpbXBvcnRhbnQ7XG4gIGJhY2tncm91bmQtY29sb3I6IHJnYmEodmFyKC0tbmVldG8tdWktZ3JheS03MDApLCAwLjIpO1xufVxuIiwiQG1peGluIHZpZXdwb3J0KCRtZWRpYSkge1xuICBAaWYgJG1lZGlhPT1kZXNrIHtcbiAgICBAbWVkaWEgc2NyZWVuIGFuZCAobWluLXdpZHRoOiAxMjAwcHgpIHtcbiAgICAgIEBjb250ZW50O1xuICAgIH1cbiAgfSBAZWxzZSBpZiAkbWVkaWE9PXRhYi1taW4ge1xuICAgIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDEwMjRweCkge1xuICAgICAgQGNvbnRlbnQ7XG4gICAgfVxuICB9IEBlbHNlIGlmICRtZWRpYT09dGFiLW9ubHkge1xuICAgIEBtZWRpYSBzY3JlZW4gYW5kIChtaW4td2lkdGg6IDc2OHB4KSBhbmQgKG1heC13aWR0aDogMTAyM3B4KSB7XG4gICAgICBAY29udGVudDtcbiAgICB9XG4gIH0gQGVsc2UgaWYgJG1lZGlhPT1tb2Ige1xuICAgIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDc2N3B4KSB7XG4gICAgICBAY29udGVudDtcbiAgICB9XG4gIH0gQGVsc2UgaWYgJG1lZGlhPT14cy1tb2Ige1xuICAgIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDQ3OXB4KSB7XG4gICAgICBAY29udGVudDtcbiAgICB9XG4gIH1cbn1cbiIsIi5uZWV0by1maWx0ZXJzLXNlZ21lbnQtLWFjdGl2ZSB7XG4gIGJvcmRlci1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLXByaW1hcnktNTAwKSkgIWltcG9ydGFudDtcbiAgYm94LXNoYWRvdzogMCAwIDAgMXB4IHJnYih2YXIoLS1uZWV0by11aS1wcmltYXJ5LTUwMCkpICFpbXBvcnRhbnQ7XG59XG4iXX0= */";
 n(css,{});
 
 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; }
@@ -2618,11 +3071,19 @@ var Filters = reactUtils.withT(function (_ref) {
   }, paneProps)), children));
 });
 
-var DeleteAlert = function DeleteAlert(_ref) {
+var ITEMS_MAX_COUNT = 20;
+var SEGMENT_ACTIONS = {
+  EDIT: "edit",
+  DELETE: "delete"
+};
+
+var Delete = function Delete(_ref) {
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
-    segment = _ref.segment,
-    columns = _ref.columns;
+    _ref$segment = _ref.segment,
+    segment = _ref$segment === void 0 ? {} : _ref$segment,
+    _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? [] : _ref$columns;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var history = reactRouterDom.useHistory();
@@ -2663,162 +3124,56 @@ var DeleteAlert = function DeleteAlert(_ref) {
   });
 };
 
-var Card = function Card(_ref) {
-  var segment = _ref.segment,
-    columns = _ref.columns,
-    defaultSegmentName = _ref.defaultSegmentName;
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isEditing = _useState2[0],
-    setIsEditing = _useState2[1];
-  var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isDeleteAlertOpen = _useState4[0],
-    setIsDeleteAlertOpen = _useState4[1];
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var Menu = neetoui.Dropdown.Menu,
-    MenuItem = neetoui.Dropdown.MenuItem;
-  var _useUpdateSegment = useUpdateSegment(),
-    updateSegment = _useUpdateSegment.mutate;
-  var handleRename = function handleRename(values) {
-    return updateSegment({
-      id: segment.id,
-      payload: values
-    }, {
-      onSuccess: function onSuccess() {
-        return setIsEditing(false);
-      }
-    });
-  };
-  return /*#__PURE__*/React__default["default"].createElement(formik.Form, {
-    className: "neeto-ui-rounded-md flex w-full items-center justify-between border p-2",
-    formProps: {
-      noValidate: true
-    },
-    formikProps: {
-      initialValues: segment,
-      validateOnChange: true,
-      validateOnBlur: true,
-      validationSchema: buildSegmentsValidationSchema(defaultSegmentName),
-      onSubmit: handleRename,
-      enableReinitialize: true
-    }
-  }, function (_ref2) {
-    var resetForm = _ref2.resetForm;
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isEditing ? /*#__PURE__*/React__default["default"].createElement(InlineInput.FormikInlineInput, {
-      autoFocus: true,
-      nakedInput: true,
-      handleCancel: function handleCancel() {
-        return setIsEditing(false);
-      },
-      name: "name",
-      placeholder: t("neetoFilters.segments.name")
-    }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-      style: "body2"
-    }, segment.name), /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
-      buttonStyle: "text",
-      disabled: neetoCist.isNotPresent(segment.id),
-      icon: neetoIcons.MenuHorizontal,
-      size: "small"
-    }, /*#__PURE__*/React__default["default"].createElement(Menu, null, /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
-      onClick: function onClick() {
-        setIsEditing(true);
-        resetForm();
-      }
-    }, t("neetoFilters.common.rename")), /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
-      onClick: function onClick() {
-        return setIsDeleteAlertOpen(true);
-      }
-    }, t("neetoFilters.common.delete"))))), /*#__PURE__*/React__default["default"].createElement(DeleteAlert, {
-      columns: columns,
-      segment: segment,
-      isOpen: isDeleteAlertOpen,
-      onClose: function onClose() {
-        return setIsDeleteAlertOpen(false);
-      }
-    }));
-  });
-};
-var Card$1 = /*#__PURE__*/React__default["default"].memo(Card);
-
-var ManagePane = function ManagePane(_ref) {
-  var isOpen = _ref.isOpen,
-    onClose = _ref.onClose,
-    entity = _ref.entity,
-    columns = _ref.columns,
-    defaultSegmentName = _ref.defaultSegmentName;
-  var _useState = React.useState(""),
-    _useState2 = _slicedToArray(_useState, 2),
-    searchTerm = _useState2[0],
-    setSearchTerm = _useState2[1];
-  var inputRef = React.useRef(null);
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var debouncedSearchTerm = reactUtils.useDebounce(searchTerm);
-  var _useFetchSegments = useFetchSegments({
-      entity: entity,
-      searchTerm: debouncedSearchTerm
-    }),
-    _useFetchSegments$dat = _useFetchSegments.data,
-    segments = _useFetchSegments$dat === void 0 ? [] : _useFetchSegments$dat,
-    isLoading = _useFetchSegments.isLoading;
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
-    isOpen: isOpen,
-    onClose: onClose,
-    initialFocusRef: inputRef
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    style: "h2"
-  }, t("neetoFilters.segments.manageSegments"))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, {
-    className: "max-h-full gap-4 overflow-scroll"
-  }, /*#__PURE__*/React__default["default"].createElement(Search__default["default"], {
-    className: "w-full flex-grow-0",
-    placeholder: t("neetoFilters.segments.searchSegments"),
-    ref: inputRef,
-    onSearch: function onSearch(value) {
-      return setSearchTerm(value);
-    }
-  }), isLoading ? /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, {
-    className: "mx-auto mt-4"
-  }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Card$1, {
-    segment: {
-      name: defaultSegmentName
-    }
-  }), ramda.isEmpty(segments) ? /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "mx-auto",
-    style: "body2"
-  }, t("neetoFilters.segments.noSegmentsFound")) : segments.map(function (segment) {
-    return /*#__PURE__*/React__default["default"].createElement(Card$1, {
-      columns: columns,
-      defaultSegmentName: defaultSegmentName,
-      segment: segment,
-      key: segment.id
-    });
-  }))));
+var reorderList = function reorderList(list, startIndex, endIndex) {
+  var result = Array.from(list);
+  var _result$splice = result.splice(startIndex, 1),
+    _result$splice2 = _slicedToArray(_result$splice, 1),
+    removed = _result$splice2[0];
+  result.splice(endIndex, 0, removed);
+  return result;
 };
 
-var ITEMS_MAX_COUNT = 20;
-
-var MenuBlocks = function MenuBlocks(_ref) {
+var useSegments = function useSegments(_ref) {
   var entity = _ref.entity,
     columns = _ref.columns,
-    defaultSegmentName = _ref.defaultSegmentName;
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showAll = _useState2[0],
-    setShowAll = _useState2[1];
-  var history = reactRouterDom.useHistory();
+    appliedFilters = _ref.appliedFilters,
+    childrenKeys = _ref.childrenKeys;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var _getQueryParams = utils.getQueryParams(),
-    segmentId = _getQueryParams.segmentId;
-  var appliedFilters = buildFiltersFromURL(columns);
+  var history = reactRouterDom.useHistory();
+  var _useState = React.useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    segments = _useState2[0],
+    setSegments = _useState2[1];
   var _useFetchSegments = useFetchSegments({
       entity: entity
     }),
-    _useFetchSegments$dat = _useFetchSegments.data,
-    segments = _useFetchSegments$dat === void 0 ? [] : _useFetchSegments$dat,
+    fetchedSegments = _useFetchSegments.data,
     isLoading = _useFetchSegments.isLoading;
+  var _useUpdateSegment = useUpdateSegment(),
+    updateSegment = _useUpdateSegment.mutate,
+    isUpdating = _useUpdateSegment.isLoading;
+  var _useState3 = React.useState({
+      action: "",
+      segment: undefined
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    confirmAction = _useState4[0],
+    setConfirmAction = _useState4[1];
+  var handleSegmentsReorder = function handleSegmentsReorder(_ref2) {
+    var source = _ref2.source,
+      destination = _ref2.destination;
+    if (!destination || source.index === destination.index) return;
+    var reorderedSegments = reorderList(segments, source.index, destination.index);
+    updateSegment({
+      id: segments[source.index].id,
+      payload: {
+        position: destination.index + 1
+      },
+      showToastr: false
+    });
+    setSegments(reorderedSegments);
+  };
   var clearAppliedFilters = function clearAppliedFilters() {
     var _filters$, _filters$2;
     var filters = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : appliedFilters;
@@ -2833,10 +3188,10 @@ var MenuBlocks = function MenuBlocks(_ref) {
       })
     });
   };
-  var applySelectedSegment = function applySelectedSegment(_ref2) {
+  var handleSelectSegment = function handleSelectSegment(_ref3) {
     var _filters$3;
-    var id = _ref2.id,
-      filters = _ref2.filters;
+    var id = _ref3.id,
+      filters = _ref3.filters;
     history.push({
       search: buildUrlFromSegment({
         columns: columns,
@@ -2845,14 +3200,9 @@ var MenuBlocks = function MenuBlocks(_ref) {
       })
     });
   };
-  var handleSelectSegment = function handleSelectSegment(_ref3) {
-    var id = _ref3.id,
-      filters = _ref3.filters;
-    return ramda.equals(id, segmentId) ? clearAppliedFilters(filters) : applySelectedSegment({
-      id: id,
-      filters: filters
-    });
-  };
+  React.useEffect(function () {
+    setSegments(fetchedSegments);
+  }, [fetchedSegments]);
   if (isLoading) {
     return /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null);
   }
@@ -2861,6 +3211,139 @@ var MenuBlocks = function MenuBlocks(_ref) {
       style: "body2"
     }, t("neetoFilters.segments.noSegmentsFound"));
   }
+  var handleUpdate = function handleUpdate(_ref4, _ref5) {
+    var name = _ref4.name;
+    var setFieldError = _ref5.setFieldError;
+    var filtersPayload = buildSegmentsPayload(filters, childrenKeys);
+    updateSegment({
+      id: confirmAction.segment.id,
+      payload: {
+        name: name,
+        filters: filtersPayload
+      },
+      showToastr: false
+    }, {
+      onSuccess: function onSuccess() {
+        utils.showThumbsUpToastr();
+        setConfirmAction({
+          action: "",
+          segment: undefined
+        });
+      },
+      onError: function onError(error) {
+        return setFieldError("name", error.response.data.error);
+      }
+    });
+  };
+  var filters = buildFiltersFromSearchParams(columns);
+  return {
+    segments: segments,
+    clearAppliedFilters: clearAppliedFilters,
+    handleSelectSegment: handleSelectSegment,
+    handleSegmentsReorder: handleSegmentsReorder,
+    setConfirmAction: setConfirmAction,
+    isUpdating: isUpdating,
+    handleUpdate: handleUpdate,
+    filters: filters,
+    onClose: function onClose() {
+      return setConfirmAction({
+        action: "",
+        segment: undefined
+      });
+    },
+    selectedSegment: confirmAction.segment,
+    isDeleteAlertOpen: confirmAction.action === SEGMENT_ACTIONS.DELETE,
+    isEditPaneOpen: confirmAction.action === SEGMENT_ACTIONS.EDIT
+  };
+};
+
+var Segment = function Segment(_ref) {
+  var id = _ref.id,
+    isActive = _ref.isActive,
+    label = _ref.label,
+    onClick = _ref.onClick,
+    _ref$shouldShowDropdo = _ref.shouldShowDropdown,
+    shouldShowDropdown = _ref$shouldShowDropdo === void 0 ? false : _ref$shouldShowDropdo,
+    segments = _ref.segments,
+    setConfirmAction = _ref.setConfirmAction;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var menuItems = [{
+    key: "edit",
+    label: t("neetoFilters.common.edit"),
+    onClick: function onClick() {
+      return setConfirmAction({
+        action: SEGMENT_ACTIONS.EDIT,
+        segment: neetoCist.findById(id, segments)
+      });
+    }
+  }, {
+    key: "delete",
+    label: t("neetoFilters.common.delete"),
+    onClick: function onClick() {
+      return setConfirmAction({
+        action: SEGMENT_ACTIONS.DELETE,
+        segment: neetoCist.findById(id, segments)
+      });
+    }
+  }];
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    onClick: onClick,
+    "data-cy": "neeto-filters-segment-block-".concat(neetoCist.hyphenate(label)),
+    className: classnames__default["default"]("neeto-ui-border-gray-400 neeto-ui-bg-white hover:neeto-ui-bg-gray-200 neeto-ui-rounded-lg mb-2 flex h-10 cursor-pointer items-center gap-2 border p-3 transition-all duration-300 ease-in-out", {
+      "neeto-filters-segment--active": isActive
+    })
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex flex-grow items-center gap-2 overflow-hidden",
+    "data-cy": "new-element-field"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "truncate leading-snug",
+    "data-cy": neetoCist.hyphenate(label),
+    style: "body2"
+  }, label)), shouldShowDropdown && /*#__PURE__*/React__default["default"].createElement(MoreDropdown__default["default"], {
+    menuItems: menuItems,
+    dropdownButtonProps: {
+      className: "min-h-0 flex-shrink-0",
+      "data-cy": "".concat(neetoCist.hyphenate(label), "-more-dropdown")
+    }
+  }));
+};
+
+var MenuBlocks = function MenuBlocks(_ref) {
+  var entity = _ref.entity,
+    columns = _ref.columns,
+    defaultSegmentName = _ref.defaultSegmentName,
+    childrenKeys = _ref.childrenKeys,
+    customFilters = _ref.customFilters;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var segmentFormInitialRef = React.useRef(null);
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showAll = _useState2[0],
+    setShowAll = _useState2[1];
+  var _getQueryParams = utils.getQueryParams(),
+    segmentId = _getQueryParams.segmentId;
+  var appliedFilters = buildFiltersFromURL(columns);
+  var _useSegments = useSegments({
+      entity: entity,
+      columns: columns,
+      appliedFilters: appliedFilters,
+      childrenKeys: childrenKeys
+    }),
+    _useSegments$segments = _useSegments.segments,
+    segments = _useSegments$segments === void 0 ? [] : _useSegments$segments,
+    clearAppliedFilters = _useSegments.clearAppliedFilters,
+    handleSelectSegment = _useSegments.handleSelectSegment,
+    handleSegmentsReorder = _useSegments.handleSegmentsReorder,
+    onClose = _useSegments.onClose,
+    setConfirmAction = _useSegments.setConfirmAction,
+    selectedSegment = _useSegments.selectedSegment,
+    isDeleteAlertOpen = _useSegments.isDeleteAlertOpen,
+    isEditPaneOpen = _useSegments.isEditPaneOpen,
+    isUpdating = _useSegments.isUpdating,
+    handleUpdate = _useSegments.handleUpdate,
+    filters = _useSegments.filters;
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, segments.length > ITEMS_MAX_COUNT && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
     icon: neetoIcons.Down,
     style: "link",
@@ -2872,71 +3355,90 @@ var MenuBlocks = function MenuBlocks(_ref) {
         return !open;
       });
     }
-  }), /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"].Block, {
-    active: ramda.isEmpty(appliedFilters),
+  }), /*#__PURE__*/React__default["default"].createElement(Segment, {
+    isActive: ramda.isEmpty(appliedFilters),
     label: defaultSegmentName,
     onClick: clearAppliedFilters
-  }), segments.slice(0, showAll ? segments.length : ITEMS_MAX_COUNT).map(function (segment) {
-    return /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"].Block, {
-      active: segment.id === segmentId,
-      count: segment.count,
-      key: segment.id,
-      label: segment.name,
-      onClick: function onClick() {
-        return handleSelectSegment(segment);
-      }
-    });
+  }), /*#__PURE__*/React__default["default"].createElement(dnd.DragDropContext, {
+    onDragEnd: handleSegmentsReorder
+  }, /*#__PURE__*/React__default["default"].createElement(dnd.Droppable, {
+    droppableId: "neeto-filters-segments-".concat(entity)
+  }, function (_ref2) {
+    var innerRef = _ref2.innerRef,
+      droppableProps = _ref2.droppableProps,
+      placeholder = _ref2.placeholder;
+    return /*#__PURE__*/React__default["default"].createElement("div", _extends({
+      ref: innerRef
+    }, droppableProps), segments.slice(0, showAll ? segments.length : ITEMS_MAX_COUNT).map(function (segment, index) {
+      return /*#__PURE__*/React__default["default"].createElement(dnd.Draggable, {
+        index: index,
+        draggableId: segment.id.toString(),
+        isDragDisabled: isUpdating,
+        key: segment.id.toString()
+      }, function (_ref3) {
+        var innerRef = _ref3.innerRef,
+          draggableProps = _ref3.draggableProps,
+          dragHandleProps = _ref3.dragHandleProps;
+        return /*#__PURE__*/React__default["default"].createElement("div", _extends({
+          ref: innerRef
+        }, draggableProps, dragHandleProps), /*#__PURE__*/React__default["default"].createElement(Segment, {
+          segments: segments,
+          setConfirmAction: setConfirmAction,
+          shouldShowDropdown: true,
+          id: segment.id,
+          isActive: segment.id === segmentId,
+          key: segment.id,
+          label: segment.name,
+          onClick: function onClick() {
+            return handleSelectSegment(segment);
+          }
+        }));
+      });
+    }), placeholder);
+  })), /*#__PURE__*/React__default["default"].createElement(SegmentForm, {
+    childrenKeys: childrenKeys,
+    columns: columns,
+    customFilters: customFilters,
+    defaultSegmentName: defaultSegmentName,
+    filters: filters,
+    onClose: onClose,
+    segmentFormInitialRef: segmentFormInitialRef,
+    isEdit: true,
+    handleSubmit: handleUpdate,
+    initialValues: selectedSegment,
+    isOpen: isEditPaneOpen,
+    isSubmitting: isUpdating
+  }), /*#__PURE__*/React__default["default"].createElement(Delete, {
+    columns: columns,
+    onClose: onClose,
+    isOpen: isDeleteAlertOpen,
+    segment: selectedSegment
   }));
 };
 var MenuBlocks$1 = /*#__PURE__*/React__default["default"].memo(MenuBlocks);
 
-var Segments = function Segments(_ref) {
-  var entity = _ref.entity,
+var Segments = reactUtils.withT(function (_ref) {
+  var t = _ref.t,
+    entity = _ref.entity,
     columns = _ref.columns,
-    _ref$setIsFilterPaneO = _ref.setIsFilterPaneOpen,
-    setIsFilterPaneOpen = _ref$setIsFilterPaneO === void 0 ? neetoCist.noop : _ref$setIsFilterPaneO,
     _ref$defaultSegmentNa = _ref.defaultSegmentName,
-    defaultSegmentName = _ref$defaultSegmentNa === void 0 ? i18next.t("neetoFilters.common.allResults") : _ref$defaultSegmentNa;
-  return function () {
-    var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isSegmentsPaneOpen = _useState2[0],
-      setIsSegmentsPaneOpen = _useState2[1];
-    var _useTranslation = reactI18next.useTranslation(),
-      t = _useTranslation.t;
-    var iconProps = [{
-      icon: neetoIcons.Settings,
-      onClick: function onClick() {
-        setIsFilterPaneOpen(false);
-        setIsSegmentsPaneOpen(true);
-      },
-      tooltipProps: {
-        content: t("neetoFilters.segments.manageSegments"),
-        position: "top"
-      }
-    }];
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"].SubTitle, {
-      iconProps: iconProps
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-      component: "h4",
-      style: "h5",
-      textTransform: "uppercase",
-      weight: "bold"
-    }, t("neetoFilters.common.segments"))), /*#__PURE__*/React__default["default"].createElement(MenuBlocks$1, {
-      columns: columns,
-      defaultSegmentName: defaultSegmentName,
-      entity: entity
-    }), /*#__PURE__*/React__default["default"].createElement(ManagePane, {
-      columns: columns,
-      defaultSegmentName: defaultSegmentName,
-      entity: entity,
-      isOpen: isSegmentsPaneOpen,
-      onClose: function onClose() {
-        return setIsSegmentsPaneOpen(false);
-      }
-    }));
-  }();
-};
+    defaultSegmentName = _ref$defaultSegmentNa === void 0 ? t("neetoFilters.common.allResults") : _ref$defaultSegmentNa,
+    customFilters = _ref.customFilters,
+    _ref$childrenKeys = _ref.childrenKeys,
+    childrenKeys = _ref$childrenKeys === void 0 ? [] : _ref$childrenKeys;
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(MenuBar__default["default"].SubTitle, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    component: "h4",
+    style: "h5",
+    textTransform: "uppercase",
+    weight: "bold"
+  }, t("neetoFilters.common.segments"))), /*#__PURE__*/React__default["default"].createElement(MenuBlocks$1, {
+    childrenKeys: childrenKeys,
+    columns: columns,
+    customFilters: customFilters,
+    defaultSegmentName: defaultSegmentName,
+    entity: entity
+  }));
+});
 var index = /*#__PURE__*/React__default["default"].memo(Segments);
 
 exports.Bar = Bar;