trotl-filter 1.0.4 → 1.0.5

package/dist/index.esm.js

@@ -202,14 +202,14 @@ function useStateManager(_ref) {
   });
 }
 
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+function _extends$1() {
+  return _extends$1 = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
       var t = arguments[e];
       for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
     return n;
-  }, _extends.apply(null, arguments);
+  }, _extends$1.apply(null, arguments);
 }
 
 function _classCallCheck(a, n) {
@@ -1548,6 +1548,10 @@ var createCache = function createCache(options) {
   return cache;
 };
 
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
 var reactIs = {exports: {}};
 
 var reactIs_production_min = {};
@@ -3437,7 +3441,7 @@ var Menu = function Menu(props) {
   var children = props.children,
     innerRef = props.innerRef,
     innerProps = props.innerProps;
-  return jsx("div", _extends({}, getStyleProps(props, 'menu', {
+  return jsx("div", _extends$1({}, getStyleProps(props, 'menu', {
     menu: true
   }), {
     ref: innerRef
@@ -3468,7 +3472,7 @@ var MenuList = function MenuList(props) {
     innerProps = props.innerProps,
     innerRef = props.innerRef,
     isMulti = props.isMulti;
-  return jsx("div", _extends({}, getStyleProps(props, 'menuList', {
+  return jsx("div", _extends$1({}, getStyleProps(props, 'menuList', {
     'menu-list': true,
     'menu-list--is-multi': isMulti
   }), {
@@ -3498,7 +3502,7 @@ var NoOptionsMessage = function NoOptionsMessage(_ref6) {
     children = _ref6$children === void 0 ? 'No options' : _ref6$children,
     innerProps = _ref6.innerProps,
     restProps = _objectWithoutProperties(_ref6, _excluded$3);
-  return jsx("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx("div", _extends$1({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     children: children,
     innerProps: innerProps
   }), 'noOptionsMessage', {
@@ -3511,7 +3515,7 @@ var LoadingMessage = function LoadingMessage(_ref7) {
     children = _ref7$children === void 0 ? 'Loading...' : _ref7$children,
     innerProps = _ref7.innerProps,
     restProps = _objectWithoutProperties(_ref7, _excluded2$1);
-  return jsx("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx("div", _extends$1({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     children: children,
     innerProps: innerProps
   }), 'loadingMessage', {
@@ -3596,7 +3600,7 @@ var MenuPortal = function MenuPortal(props) {
   if (!appendTo && menuPosition !== 'fixed' || !computedPosition) return null;
 
   // same wrapper element whether fixed or portalled
-  var menuWrapper = jsx("div", _extends({
+  var menuWrapper = jsx("div", _extends$1({
     ref: setMenuPortalElement
   }, getStyleProps(_objectSpread2(_objectSpread2({}, props), {}, {
     offset: computedPosition.offset,
@@ -3630,7 +3634,7 @@ var SelectContainer = function SelectContainer(props) {
     innerProps = props.innerProps,
     isDisabled = props.isDisabled,
     isRtl = props.isRtl;
-  return jsx("div", _extends({}, getStyleProps(props, 'container', {
+  return jsx("div", _extends$1({}, getStyleProps(props, 'container', {
     '--is-disabled': isDisabled,
     '--is-rtl': isRtl
   }), innerProps), children);
@@ -3662,7 +3666,7 @@ var ValueContainer = function ValueContainer(props) {
     innerProps = props.innerProps,
     isMulti = props.isMulti,
     hasValue = props.hasValue;
-  return jsx("div", _extends({}, getStyleProps(props, 'valueContainer', {
+  return jsx("div", _extends$1({}, getStyleProps(props, 'valueContainer', {
     'value-container': true,
     'value-container--is-multi': isMulti,
     'value-container--has-value': hasValue
@@ -3684,7 +3688,7 @@ var indicatorsContainerCSS = function indicatorsContainerCSS() {
 var IndicatorsContainer = function IndicatorsContainer(props) {
   var children = props.children,
     innerProps = props.innerProps;
-  return jsx("div", _extends({}, getStyleProps(props, 'indicatorsContainer', {
+  return jsx("div", _extends$1({}, getStyleProps(props, 'indicatorsContainer', {
     indicators: true
   }), innerProps), children);
 };
@@ -3709,7 +3713,7 @@ var _ref2$2 = process.env.NODE_ENV === "production" ? {
 var Svg = function Svg(_ref) {
   var size = _ref.size,
     props = _objectWithoutProperties(_ref, _excluded$2);
-  return jsx("svg", _extends({
+  return jsx("svg", _extends$1({
     height: size,
     width: size,
     viewBox: "0 0 20 20",
@@ -3719,14 +3723,14 @@ var Svg = function Svg(_ref) {
   }, props));
 };
 var CrossIcon = function CrossIcon(props) {
-  return jsx(Svg, _extends({
+  return jsx(Svg, _extends$1({
     size: 20
   }, props), jsx("path", {
     d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
   }));
 };
 var DownChevron = function DownChevron(props) {
-  return jsx(Svg, _extends({
+  return jsx(Svg, _extends$1({
     size: 20
   }, props), jsx("path", {
     d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
@@ -3758,7 +3762,7 @@ var dropdownIndicatorCSS = baseCSS;
 var DropdownIndicator = function DropdownIndicator(props) {
   var children = props.children,
     innerProps = props.innerProps;
-  return jsx("div", _extends({}, getStyleProps(props, 'dropdownIndicator', {
+  return jsx("div", _extends$1({}, getStyleProps(props, 'dropdownIndicator', {
     indicator: true,
     'dropdown-indicator': true
   }), innerProps), children || jsx(DownChevron, null));
@@ -3767,7 +3771,7 @@ var clearIndicatorCSS = baseCSS;
 var ClearIndicator = function ClearIndicator(props) {
   var children = props.children,
     innerProps = props.innerProps;
-  return jsx("div", _extends({}, getStyleProps(props, 'clearIndicator', {
+  return jsx("div", _extends$1({}, getStyleProps(props, 'clearIndicator', {
     indicator: true,
     'clear-indicator': true
   }), innerProps), children || jsx(CrossIcon, null));
@@ -3794,7 +3798,7 @@ var indicatorSeparatorCSS = function indicatorSeparatorCSS(_ref4, unstyled) {
 };
 var IndicatorSeparator = function IndicatorSeparator(props) {
   var innerProps = props.innerProps;
-  return jsx("span", _extends({}, innerProps, getStyleProps(props, 'indicatorSeparator', {
+  return jsx("span", _extends$1({}, innerProps, getStyleProps(props, 'indicatorSeparator', {
     'indicator-separator': true
   })));
 };
@@ -3847,7 +3851,7 @@ var LoadingIndicator = function LoadingIndicator(_ref7) {
     _ref7$size = _ref7.size,
     size = _ref7$size === void 0 ? 4 : _ref7$size,
     restProps = _objectWithoutProperties(_ref7, _excluded2);
-  return jsx("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx("div", _extends$1({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     innerProps: innerProps,
     isRtl: isRtl,
     size: size
@@ -3903,7 +3907,7 @@ var Control = function Control(props) {
     innerRef = props.innerRef,
     innerProps = props.innerProps,
     menuIsOpen = props.menuIsOpen;
-  return jsx("div", _extends({
+  return jsx("div", _extends$1({
     ref: innerRef
   }, getStyleProps(props, 'control', {
     control: true,
@@ -3935,9 +3939,9 @@ var Group = function Group(props) {
     label = props.label,
     theme = props.theme,
     selectProps = props.selectProps;
-  return jsx("div", _extends({}, getStyleProps(props, 'group', {
+  return jsx("div", _extends$1({}, getStyleProps(props, 'group', {
     group: true
-  }), innerProps), jsx(Heading, _extends({}, headingProps, {
+  }), innerProps), jsx(Heading, _extends$1({}, headingProps, {
     selectProps: selectProps,
     theme: theme,
     getStyles: getStyles,
@@ -3967,7 +3971,7 @@ var GroupHeading = function GroupHeading(props) {
   var _cleanCommonProps = cleanCommonProps(props);
     _cleanCommonProps.data;
     var innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$1);
-  return jsx("div", _extends({}, getStyleProps(props, 'groupHeading', {
+  return jsx("div", _extends$1({}, getStyleProps(props, 'groupHeading', {
     'group-heading': true
   }), innerProps));
 };
@@ -4030,11 +4034,11 @@ var Input = function Input(props) {
     isHidden = _cleanCommonProps.isHidden,
     inputClassName = _cleanCommonProps.inputClassName,
     innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$5);
-  return jsx("div", _extends({}, getStyleProps(props, 'input', {
+  return jsx("div", _extends$1({}, getStyleProps(props, 'input', {
     'input-container': true
   }), {
     "data-value": value || ''
-  }), jsx("input", _extends({
+  }), jsx("input", _extends$1({
     className: cx({
       input: true
     }, inputClassName),
@@ -4107,7 +4111,7 @@ var MultiValueLabel = MultiValueGeneric;
 function MultiValueRemove(_ref5) {
   var children = _ref5.children,
     innerProps = _ref5.innerProps;
-  return jsx("div", _extends({
+  return jsx("div", _extends$1({
     role: "button"
   }, innerProps), children || jsx(CrossIcon, {
     size: 14
@@ -4181,7 +4185,7 @@ var Option = function Option(props) {
     isSelected = props.isSelected,
     innerRef = props.innerRef,
     innerProps = props.innerProps;
-  return jsx("div", _extends({}, getStyleProps(props, 'option', {
+  return jsx("div", _extends$1({}, getStyleProps(props, 'option', {
     option: true,
     'option--is-disabled': isDisabled,
     'option--is-focused': isFocused,
@@ -4209,7 +4213,7 @@ var placeholderCSS = function placeholderCSS(_ref, unstyled) {
 var Placeholder = function Placeholder(props) {
   var children = props.children,
     innerProps = props.innerProps;
-  return jsx("div", _extends({}, getStyleProps(props, 'placeholder', {
+  return jsx("div", _extends$1({}, getStyleProps(props, 'placeholder', {
     placeholder: true
   }), innerProps), children);
 };
@@ -4237,7 +4241,7 @@ var SingleValue = function SingleValue(props) {
   var children = props.children,
     isDisabled = props.isDisabled,
     innerProps = props.innerProps;
-  return jsx("div", _extends({}, getStyleProps(props, 'singleValue', {
+  return jsx("div", _extends$1({}, getStyleProps(props, 'singleValue', {
     'single-value': true,
     'single-value--is-disabled': isDisabled
   }), innerProps), children);
@@ -4338,7 +4342,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
 };
 var A11yText = function A11yText(props) {
-  return jsx("span", _extends({
+  return jsx("span", _extends$1({
     css: _ref
   }, props));
 };
@@ -4855,7 +4859,7 @@ function DummyInput(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   // Remove animation props not meant for HTML elements
   var filteredProps = removeProps(props, 'onExited', 'in', 'enter', 'exit', 'appear');
-  return jsx("input", _extends({
+  return jsx("input", _extends$1({
     ref: innerRef
   }, filteredProps, {
     css: /*#__PURE__*/css$2({
@@ -6437,7 +6441,7 @@ var Select = /*#__PURE__*/function (_Component) {
       });
       if (!isSearchable) {
         // use a dummy input to maintain focus/blur functionality
-        return /*#__PURE__*/React.createElement(DummyInput, _extends({
+        return /*#__PURE__*/React.createElement(DummyInput, _extends$1({
           id: id,
           innerRef: this.getInputRef,
           onBlur: this.onInputBlur,
@@ -6450,7 +6454,7 @@ var Select = /*#__PURE__*/function (_Component) {
           value: ""
         }, ariaAttributes));
       }
-      return /*#__PURE__*/React.createElement(Input, _extends({}, commonProps, {
+      return /*#__PURE__*/React.createElement(Input, _extends$1({}, commonProps, {
         autoCapitalize: "none",
         autoComplete: "off",
         autoCorrect: "off",
@@ -6491,7 +6495,7 @@ var Select = /*#__PURE__*/function (_Component) {
         focusedValue = _this$state5.focusedValue,
         isFocused = _this$state5.isFocused;
       if (!this.hasValue() || !controlShouldRenderValue) {
-        return inputValue ? null : /*#__PURE__*/React.createElement(Placeholder, _extends({}, commonProps, {
+        return inputValue ? null : /*#__PURE__*/React.createElement(Placeholder, _extends$1({}, commonProps, {
           key: "placeholder",
           isDisabled: isDisabled,
           isFocused: isFocused,
@@ -6504,7 +6508,7 @@ var Select = /*#__PURE__*/function (_Component) {
         return selectValue.map(function (opt, index) {
           var isOptionFocused = opt === focusedValue;
           var key = "".concat(_this3.getOptionLabel(opt), "-").concat(_this3.getOptionValue(opt));
-          return /*#__PURE__*/React.createElement(MultiValue, _extends({}, commonProps, {
+          return /*#__PURE__*/React.createElement(MultiValue, _extends$1({}, commonProps, {
             components: {
               Container: MultiValueContainer,
               Label: MultiValueLabel,
@@ -6533,7 +6537,7 @@ var Select = /*#__PURE__*/function (_Component) {
         return null;
       }
       var singleValue = selectValue[0];
-      return /*#__PURE__*/React.createElement(SingleValue, _extends({}, commonProps, {
+      return /*#__PURE__*/React.createElement(SingleValue, _extends$1({}, commonProps, {
         data: singleValue,
         isDisabled: isDisabled
       }), this.formatOptionLabel(singleValue, 'value'));
@@ -6556,7 +6560,7 @@ var Select = /*#__PURE__*/function (_Component) {
         onTouchEnd: this.onClearIndicatorTouchEnd,
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React.createElement(ClearIndicator, _extends({}, commonProps, {
+      return /*#__PURE__*/React.createElement(ClearIndicator, _extends$1({}, commonProps, {
         innerProps: innerProps,
         isFocused: isFocused
       }));
@@ -6575,7 +6579,7 @@ var Select = /*#__PURE__*/function (_Component) {
       var innerProps = {
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React.createElement(LoadingIndicator, _extends({}, commonProps, {
+      return /*#__PURE__*/React.createElement(LoadingIndicator, _extends$1({}, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
         isFocused: isFocused
@@ -6593,7 +6597,7 @@ var Select = /*#__PURE__*/function (_Component) {
       var commonProps = this.commonProps;
       var isDisabled = this.props.isDisabled;
       var isFocused = this.state.isFocused;
-      return /*#__PURE__*/React.createElement(IndicatorSeparator, _extends({}, commonProps, {
+      return /*#__PURE__*/React.createElement(IndicatorSeparator, _extends$1({}, commonProps, {
         isDisabled: isDisabled,
         isFocused: isFocused
       }));
@@ -6612,7 +6616,7 @@ var Select = /*#__PURE__*/function (_Component) {
         onTouchEnd: this.onDropdownIndicatorTouchEnd,
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React.createElement(DropdownIndicator, _extends({}, commonProps, {
+      return /*#__PURE__*/React.createElement(DropdownIndicator, _extends$1({}, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
         isFocused: isFocused
@@ -6677,7 +6681,7 @@ var Select = /*#__PURE__*/function (_Component) {
           'aria-selected': _this4.state.isAppleDevice ? undefined : isSelected // is not supported on Apple devices
         };
 
-        return /*#__PURE__*/React.createElement(Option, _extends({}, commonProps, {
+        return /*#__PURE__*/React.createElement(Option, _extends$1({}, commonProps, {
           innerProps: innerProps,
           data: data,
           isDisabled: isDisabled,
@@ -6699,7 +6703,7 @@ var Select = /*#__PURE__*/function (_Component) {
               groupIndex = item.index;
             var groupId = "".concat(_this4.getElementId('group'), "-").concat(groupIndex);
             var headingId = "".concat(groupId, "-heading");
-            return /*#__PURE__*/React.createElement(Group, _extends({}, commonProps, {
+            return /*#__PURE__*/React.createElement(Group, _extends$1({}, commonProps, {
               key: groupId,
               data: _data,
               options: options,
@@ -6736,12 +6740,12 @@ var Select = /*#__PURE__*/function (_Component) {
         menuPosition: menuPosition,
         menuShouldScrollIntoView: menuShouldScrollIntoView
       };
-      var menuElement = /*#__PURE__*/React.createElement(MenuPlacer, _extends({}, commonProps, menuPlacementProps), function (_ref4) {
+      var menuElement = /*#__PURE__*/React.createElement(MenuPlacer, _extends$1({}, commonProps, menuPlacementProps), function (_ref4) {
         var ref = _ref4.ref,
           _ref4$placerProps = _ref4.placerProps,
           placement = _ref4$placerProps.placement,
           maxHeight = _ref4$placerProps.maxHeight;
-        return /*#__PURE__*/React.createElement(Menu, _extends({}, commonProps, menuPlacementProps, {
+        return /*#__PURE__*/React.createElement(Menu, _extends$1({}, commonProps, menuPlacementProps, {
           innerRef: ref,
           innerProps: {
             onMouseDown: _this4.onMenuMouseDown,
@@ -6755,7 +6759,7 @@ var Select = /*#__PURE__*/function (_Component) {
           onBottomArrive: onMenuScrollToBottom,
           lockEnabled: menuShouldBlockScroll
         }, function (scrollTargetRef) {
-          return /*#__PURE__*/React.createElement(MenuList, _extends({}, commonProps, {
+          return /*#__PURE__*/React.createElement(MenuList, _extends$1({}, commonProps, {
             innerRef: function innerRef(instance) {
               _this4.getMenuListRef(instance);
               scrollTargetRef(instance);
@@ -6775,7 +6779,7 @@ var Select = /*#__PURE__*/function (_Component) {
       // positioning behaviour is almost identical for portalled and fixed,
       // so we use the same component. the actual portalling logic is forked
       // within the component based on `menuPosition`
-      return menuPortalTarget || menuPosition === 'fixed' ? /*#__PURE__*/React.createElement(MenuPortal, _extends({}, commonProps, {
+      return menuPortalTarget || menuPosition === 'fixed' ? /*#__PURE__*/React.createElement(MenuPortal, _extends$1({}, commonProps, {
         appendTo: menuPortalTarget,
         controlElement: this.controlRef,
         menuPlacement: menuPlacement,
@@ -6845,7 +6849,7 @@ var Select = /*#__PURE__*/function (_Component) {
         isFocused = _this$state6.isFocused,
         selectValue = _this$state6.selectValue;
       var focusableOptions = this.getFocusableOptions();
-      return /*#__PURE__*/React.createElement(LiveRegion$1, _extends({}, commonProps, {
+      return /*#__PURE__*/React.createElement(LiveRegion$1, _extends$1({}, commonProps, {
         id: this.getElementId('live-region'),
         ariaSelection: ariaSelection,
         focusedOption: focusedOption,
@@ -6871,7 +6875,7 @@ var Select = /*#__PURE__*/function (_Component) {
         menuIsOpen = _this$props14.menuIsOpen;
       var isFocused = this.state.isFocused;
       var commonProps = this.commonProps = this.getCommonProps();
-      return /*#__PURE__*/React.createElement(SelectContainer, _extends({}, commonProps, {
+      return /*#__PURE__*/React.createElement(SelectContainer, _extends$1({}, commonProps, {
         className: className,
         innerProps: {
           id: id,
@@ -6879,7 +6883,7 @@ var Select = /*#__PURE__*/function (_Component) {
         },
         isDisabled: isDisabled,
         isFocused: isFocused
-      }), this.renderLiveRegion(), /*#__PURE__*/React.createElement(Control, _extends({}, commonProps, {
+      }), this.renderLiveRegion(), /*#__PURE__*/React.createElement(Control, _extends$1({}, commonProps, {
         innerRef: this.getControlRef,
         innerProps: {
           onMouseDown: this.onControlMouseDown,
@@ -6888,9 +6892,9 @@ var Select = /*#__PURE__*/function (_Component) {
         isDisabled: isDisabled,
         isFocused: isFocused,
         menuIsOpen: menuIsOpen
-      }), /*#__PURE__*/React.createElement(ValueContainer, _extends({}, commonProps, {
+      }), /*#__PURE__*/React.createElement(ValueContainer, _extends$1({}, commonProps, {
         isDisabled: isDisabled
-      }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React.createElement(IndicatorsContainer, _extends({}, commonProps, {
+      }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React.createElement(IndicatorsContainer, _extends$1({}, commonProps, {
         isDisabled: isDisabled
       }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderIndicatorSeparator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());
     }
@@ -6962,7 +6966,7 @@ Select.defaultProps = defaultProps;
 
 var StateManagedSelect = /*#__PURE__*/forwardRef(function (props, ref) {
   var baseSelectProps = useStateManager(props);
-  return /*#__PURE__*/React.createElement(Select, _extends({
+  return /*#__PURE__*/React.createElement(Select, _extends$1({
     ref: ref
   }, baseSelectProps));
 });
@@ -6975,11 +6979,73 @@ const MultiSelectDropdown = ({
   onChange,
   theme = "light",
   placeholder = "Select...",
-  maxVisible = 1,
   required = false,
-  closeMenuOnSelect = false
+  closeMenuOnSelect = false,
+  pushUrlParamObj = false // pushUrlParamObj={"ids"}
 }) => {
   const containerRef = useRef(null);
+  const [maxVisible, setMaxVisible] = useState(1);
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const containerWidth = containerRef.current.offsetWidth || 200;
+    // Estimate average tag width (adjust as needed for your style)
+    const avgTagWidth = 90; // px, tweak for your font/size
+    const calculated = Math.max(1, Math.floor((containerWidth - 40) / avgTagWidth));
+    setMaxVisible(calculated);
+    // Optionally, recalculate on window resize:
+    const handleResize = () => {
+      const w = containerRef.current.offsetWidth || 200;
+      setMaxVisible(Math.max(1, Math.floor((w - 40) / avgTagWidth)));
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  // On mount, read from URL param if present and set values by matching with options
+  useEffect(() => {
+    if (!pushUrlParamObj || !options || options.length === 0) return;
+    const readFromUrl = () => {
+      const params = new URLSearchParams(window.location.search);
+      const urlVal = params.get(pushUrlParamObj);
+      if (urlVal) {
+        if (isMulti) {
+          const urlValues = urlVal.split(",").filter(Boolean);
+          const matchedValues = urlValues.map(v => {
+            const found = options.find(opt => String(opt.value) === String(v));
+            return found ? found.value : null;
+          }).filter(v => v !== null);
+          if (matchedValues.length > 0 && JSON.stringify(matchedValues) !== JSON.stringify(selected)) {
+            onChange?.(matchedValues);
+          }
+        } else {
+          const found = options.find(opt => String(opt.value) === String(urlVal));
+          if (found && (!selected || selected[0] !== found.value)) {
+            onChange?.([found.value]);
+          }
+        }
+      }
+    };
+    readFromUrl();
+    window.addEventListener("popstate", readFromUrl);
+    // Listen for pushState/replaceState (programmatic changes)
+    const patchHistory = type => {
+      const orig = window.history[type];
+      window.history[type] = function () {
+        const rv = orig.apply(this, arguments);
+        window.dispatchEvent(new Event(type));
+        return rv;
+      };
+    };
+    patchHistory('pushState');
+    patchHistory('replaceState');
+    window.addEventListener('pushState', readFromUrl);
+    window.addEventListener('replaceState', readFromUrl);
+    return () => {
+      window.removeEventListener("popstate", readFromUrl);
+      window.removeEventListener('pushState', readFromUrl);
+      window.removeEventListener('replaceState', readFromUrl);
+    };
+  }, [pushUrlParamObj, isMulti, options, selected, onChange]);
   const selectedOptions = useMemo(() => {
     if (isMulti) {
       return options.filter(opt => selected.includes(opt.value));
@@ -6987,13 +7053,29 @@ const MultiSelectDropdown = ({
       return options.find(opt => opt.value === selected[0]) || null;
     }
   }, [selected, options, isMulti]);
+  const setUrlParam = value => {
+    if (!pushUrlParamObj) return;
+    const url = new URL(window.location);
+    if (!value) {
+      url.searchParams.delete(pushUrlParamObj);
+    } else {
+      url.searchParams.set(pushUrlParamObj, value);
+    }
+    window.history.replaceState({}, "", url);
+  };
   const handleChange = selectedItems => {
     if (isMulti) {
       const values = selectedItems ? selectedItems.map(item => item.value) : [];
       onChange(values);
+      if (pushUrlParamObj) {
+        setUrlParam(values.length ? values.join(",") : "");
+      }
     } else {
       const value = selectedItems ? [selectedItems.value] : [];
       onChange(value);
+      if (pushUrlParamObj) {
+        setUrlParam(value.length ? value[0] : "");
+      }
     }
   };
   const MultiValue = props => {
@@ -7003,9 +7085,13 @@ const MultiSelectDropdown = ({
     } = props;
     const allSelected = getValue();
     const hiddenCount = allSelected.length - maxVisible;
+
+    // Only render visible tags
     if (index < maxVisible) {
       return /*#__PURE__*/React__default.createElement(components.MultiValue, props);
     }
+
+    // Only render +N for the first hidden slot
     if (index === maxVisible && hiddenCount > 0) {
       const hiddenLabels = allSelected.slice(maxVisible).map(opt => opt.label).join(", ");
       return /*#__PURE__*/React__default.createElement("div", {
@@ -7015,13 +7101,17 @@ const MultiSelectDropdown = ({
           backgroundColor: theme === "dark" ? "#333" : "#e0e0e0",
           color: theme === "dark" ? "#eee" : "#333",
           borderRadius: 4,
-          padding: "0 6px",
-          fontSize: "0.8em",
-          alignSelf: "center",
+          padding: "2px 8px",
+          fontSize: "0.85em",
+          display: "inline-flex",
+          alignItems: "center",
+          marginLeft: 4,
           cursor: "default"
         }
       }, "+", hiddenCount);
     }
+
+    // Don't render anything for other hidden tags
     return null;
   };
   const selectStyle = {
@@ -7083,6 +7173,11 @@ const MultiSelectDropdown = ({
     menuPortal: base => ({
       ...base,
       zIndex: 999999
+    }),
+    valueContainer: base => ({
+      ...base,
+      flexWrap: "nowrap",
+      overflow: "hidden"
     })
   };
   const showRequiredError = required && (!selected || selected.length === 0);
@@ -7104,406 +7199,2884 @@ const MultiSelectDropdown = ({
     },
     menuPortalTarget: document.body,
     closeMenuOnSelect: closeMenuOnSelect,
-    "aria-required": required // ✅ Accessibility hint
+    "aria-required": required
   }), showRequiredError && /*#__PURE__*/React__default.createElement("div", {
     className: "error-text"
   }, "This field is required."));
 };
 
-const Modal = ({
-  isOpen,
-  title = 'Confirm',
-  children,
-  onConfirm,
-  onCancel,
-  confirmLabel = 'Confirm',
-  cancelLabel = 'Cancel',
-  showCancel = false,
-  showConfirm = false,
-  closeOnEscape = true,
-  closeOnOutsideClick = true
+// import "src/style/DebounceSelect.css";
+
+const DebounceSelect = ({
+  label,
+  fetchOptions,
+  onSelect,
+  placeholder = "Type to search...",
+  debounceDelay = 300,
+  required = false,
+  disabled = false,
+  objValue,
+  style,
+  isMulti = false,
+  pushUrlParamObj = false
 }) => {
+  const [input, setInput] = useState("");
+  const [options, setOptions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [selectedItems, setSelectedItems] = useState(isMulti ? objValue ?? [] : objValue ? [objValue] : []);
+
+  // Auto-update selectedItems when URL param changes
+  // useEffect(() => {
+  //   if (!pushUrlParamObj) return;
+  //   const syncFromUrl = () => {
+  //     const params = new URLSearchParams(window.location.search);
+  //     const urlVal = params.get(pushUrlParamObj);
+  //     if (urlVal) {
+  //       if (isMulti) {
+  //         const urlValues = urlVal.split(",").filter(Boolean);
+  //         // Only update if different
+  //         if (JSON.stringify(urlValues) !== JSON.stringify(selectedItems.map(i => i.value))) {
+  //           // We don't have labels, so just update values
+  //           setSelectedItems(urlValues.map(v => ({ value: v, label: v })));
+  //           onSelect?.(urlValues.map(v => ({ value: v, label: v })));
+  //         }
+  //       } else {
+  //         if (!selectedItems[0] || selectedItems[0].value !== urlVal) {
+  //           setSelectedItems([{ value: urlVal, label: urlVal }]);
+  //           onSelect?.({ value: urlVal, label: urlVal });
+  //         }
+  //       }
+  //     } else {
+  //       if (selectedItems.length > 0) {
+  //         setSelectedItems([]);
+  //         onSelect?.(isMulti ? [] : null);
+  //       }
+  //     }
+  //   };
+  //   syncFromUrl();
+  //   window.addEventListener("popstate", syncFromUrl);
+  //   // Listen for pushState/replaceState (programmatic changes)
+  //   const patchHistory = (type) => {
+  //     const orig = window.history[type];
+  //     window.history[type] = function() {
+  //       const rv = orig.apply(this, arguments);
+  //       window.dispatchEvent(new Event(type));
+  //       return rv;
+  //     };
+  //   };
+  //   patchHistory('pushState');
+  //   patchHistory('replaceState');
+  //   window.addEventListener('pushState', syncFromUrl);
+  //   window.addEventListener('replaceState', syncFromUrl);
+  //   return () => {
+  //     window.removeEventListener("popstate", syncFromUrl);
+  //     window.removeEventListener('pushState', syncFromUrl);
+  //     window.removeEventListener('replaceState', syncFromUrl);
+  //   };
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [pushUrlParamObj, isMulti, selectedItems, onSelect]);
+
+  const timeoutRef = useRef(null);
   useEffect(() => {
-    const handleKey = e => {
-      if (e.key === 'Escape' && closeOnEscape) {
-        onCancel?.();
+    if (!input) {
+      setOptions([]);
+      return;
+    }
+    setLoading(true);
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(async () => {
+      try {
+        // If input is '...', fetch all options
+        const query = input === "..." ? "" : input;
+        const results = await fetchOptions(query);
+        setOptions(results);
+      } catch (err) {
+        console.error("Failed to fetch options", err);
+        setOptions([]);
+      } finally {
+        setLoading(false);
       }
-    };
-    document.addEventListener('keydown', handleKey);
-    return () => document.removeEventListener('keydown', handleKey);
-  }, [closeOnEscape, onCancel]);
-  if (!isOpen) return null;
+    }, debounceDelay);
+    return () => clearTimeout(timeoutRef.current);
+  }, [input, fetchOptions, debounceDelay]);
+  const setUrlParam = value => {
+    const url = new URL(window.location);
+    if (value === null || value === undefined || value === "") {
+      url.searchParams.delete(pushUrlParamObj);
+    } else {
+      url.searchParams.set(pushUrlParamObj, value);
+    }
+    window.history.replaceState({}, "", url);
+  };
+  const handleSelect = (value, labelValue) => {
+    if (isMulti) {
+      const newItem = {
+        value,
+        label: labelValue
+      };
+      const updated = selectedItems.some(item => item.value === value) ? selectedItems : [...selectedItems, newItem];
+      setSelectedItems(updated);
+      onSelect(updated);
+      setInput("");
+      if (pushUrlParamObj) {
+        setUrlParam(updated.map(item => item.value).join(","));
+      }
+    } else {
+      const single = {
+        value,
+        label: labelValue
+      };
+      setSelectedItems([single]);
+      onSelect(single);
+      setInput(labelValue);
+      if (pushUrlParamObj) {
+        setUrlParam(value);
+      }
+    }
+    setOpen(false);
+  };
+  const removeItem = value => {
+    const updated = selectedItems.filter(item => item.value !== value);
+    setSelectedItems(updated);
+    onSelect(updated);
+    if (pushUrlParamObj) {
+      setUrlParam(updated.length ? updated.map(item => item.value).join(",") : "");
+    }
+  };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "modal-overlay",
-    onClick: closeOnOutsideClick ? onCancel : undefined
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "modal-box",
-    onClick: e => e.stopPropagation()
-  }, /*#__PURE__*/React__default.createElement("h3", {
-    className: "modal-title"
-  }, title), /*#__PURE__*/React__default.createElement("div", {
-    className: "modal-content"
-  }, children), /*#__PURE__*/React__default.createElement("div", {
-    className: "modal-actions"
-  }, showCancel && /*#__PURE__*/React__default.createElement("button", {
-    className: "basic-button cancel",
-    onClick: onCancel
-  }, cancelLabel), showConfirm && /*#__PURE__*/React__default.createElement("button", {
-    className: "basic-button confirm",
-    onClick: onConfirm
-  }, confirmLabel))));
+    style: {
+      position: 'relative'
+    }
+  }, label && /*#__PURE__*/React__default.createElement("label", null, label, required && ' *'), isMulti && /*#__PURE__*/React__default.createElement("div", {
+    className: "multi-selected-tags"
+  }, selectedItems.map(({
+    label,
+    value
+  }) => /*#__PURE__*/React__default.createElement("span", {
+    key: value,
+    className: "tag"
+  }, label, /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    onClick: () => removeItem(value)
+  }, "\xD7")))), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React__default.createElement("input", {
+    className: "basic-input",
+    type: "text",
+    value: isMulti ? input : open ? input : selectedItems.length > 0 ? selectedItems[0].label : input,
+    onChange: e => {
+      setInput(e.target.value);
+      setOpen(true);
+    },
+    placeholder: placeholder,
+    onFocus: () => setOpen(true),
+    onBlur: () => setTimeout(() => setOpen(false), 200),
+    disabled: disabled,
+    style: style
+  }), (input || !isMulti && selectedItems.length > 0) && !disabled && /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    "aria-label": "Clear",
+    style: {
+      position: 'absolute',
+      right: 6,
+      background: 'none',
+      border: 'none',
+      cursor: 'pointer',
+      fontSize: '1.2em',
+      color: '#888',
+      padding: 0,
+      lineHeight: 1
+    },
+    onMouseDown: e => {
+      e.preventDefault();
+      setInput("");
+      if (isMulti) ; else {
+        setSelectedItems([]);
+        onSelect(null);
+        if (pushUrlParamObj) setUrlParam("");
+      }
+    },
+    tabIndex: -1
+  }, "\xD7")), open && /*#__PURE__*/React__default.createElement("div", {
+    className: "basic-input-dropdown-menu"
+  }, loading ? /*#__PURE__*/React__default.createElement("div", {
+    className: "loading-dropdown-item"
+  }, "Loading...") : options?.length > 0 ? options.map(({
+    label,
+    value
+  }) => /*#__PURE__*/React__default.createElement("div", {
+    key: value,
+    className: "basic-input-dropdown-item",
+    onMouseDown: () => handleSelect(value, label)
+  }, label)) : /*#__PURE__*/React__default.createElement("div", {
+    className: "no-results-dropdown-item"
+  }, "No results")));
 };
 
-const Filters = ({
-  title,
-  config = [],
-  onChange,
-  onAction,
-  userRole = [],
-  onExport,
-  hideResetSearchButton,
-  urSearchParams = false,
-  extraSearchTerm,
-  theme = "light"
-}) => {
-  // const { theme, internalSort, context } = useAuth();
-
-  // console.log(extraSearchTerm)
-  // Simple translation stub: return mapped key or the key itself.
-  const _translations = {
-    showFilters: 'showFilters',
-    hideFilters: 'hideFilters',
-    resetSorting: 'resetSorting',
-    resetSearching: 'resetSearching',
-    role: 'role',
-    confirmTitle: 'confirmTitle',
-    confirm: 'confirm',
-    cancel: 'cancel',
-    confirmUnknown: 'confirmUnknown'
-  };
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
 
-  // t(key) returns the translation (here same as key). Calling t() with no args
-  // returns an empty string to avoid accidentally rendering the translations object.
-  const t = key => {
-    if (typeof key === 'undefined' || key === null) return '';
-    return _translations[key] ?? key;
-  };
-  const [sorting, setSorting] = useState(null);
-  const [collapsed, setCollapsed] = useState(() => {
-    const stored = localStorage.getItem('filtersCollapsed');
-    return stored === 'true';
-  });
-  const [modalState, setModalState] = useState({
-    isOpen: false,
-    label: '',
-    key: '',
-    onConfirm: null
-  });
-  useEffect(() => {
-    localStorage.setItem('filtersCollapsed', collapsed);
-  }, [collapsed]);
+function SearchInput({
+  pushUrlParamObj = null,
+  ...props
+}) {
+  const key = pushUrlParamObj || "search";
+  const [value, setValue] = React__default.useState("");
 
-  // useEffect(() => {
-  //   setSorting(internalSort)
-  // }, [internalSort]);
+  // On mount, read the URL param and set value
+  React__default.useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const urlValue = params.get(key) || "";
+    setValue(urlValue);
 
-  const handleReset = () => {
-    config.forEach(item => {
-      if (item.type !== 'button' && item.type !== 'icon') {
-        onChange?.(item.key, item.defaultValue || '');
-      }
-    });
-    localStorage.removeItem('adminFilters');
-    window.history.replaceState({}, '', window.location.pathname);
+    // Listen for popstate (browser navigation)
+    const onPopState = () => {
+      const params = new URLSearchParams(window.location.search);
+      setValue(params.get(key) || "");
+    };
+    window.addEventListener("popstate", onPopState);
+    return () => window.removeEventListener("popstate", onPopState);
+  }, [key]);
+  const setUrlParam = val => {
+    const params = new URLSearchParams(window.location.search);
+    if (val && val.length > 0) {
+      params.set(key, val);
+    } else {
+      params.delete(key);
+    }
+    const newUrl = window.location.pathname + (params.toString() ? "?" + params.toString() : "");
+    window.history.replaceState({}, "", newUrl);
+  };
+  const handleChange = e => {
+    const newValue = e.target.value;
+    setValue(newValue);
+    setUrlParam(newValue);
+  };
+  const handleClear = () => {
+    setValue("");
+    setUrlParam("");
   };
+  return /*#__PURE__*/React__default.createElement("div", {
+    title: "tooltip",
+    style: {
+      position: "relative",
+      display: "inline-block",
+      height: "34px",
+      verticalAlign: "middle"
+    }
+  }, /*#__PURE__*/React__default.createElement("input", _extends({
+    className: "basic-input",
+    value: value,
+    style: {
+      marginBottom: "10px",
+      padding: "5px",
+      width: "200px",
+      paddingRight: value ? "24px" : undefined,
+      height: "100%",
+      boxSizing: "border-box"
+    },
+    onChange: handleChange
+  }, props)), value && /*#__PURE__*/React__default.createElement("span", {
+    onClick: handleClear,
+    title: "Clear search",
+    style: {
+      position: "absolute",
+      right: "10px",
+      top: "50%",
+      transform: "translateY(-50%)",
+      cursor: "pointer",
+      fontSize: "14px",
+      color: "#000000ff",
+      lineHeight: "1"
+    }
+  }, "\u2716"));
+}
+
+/*
+Reusable IconInput component
+Props:
+  icon: ReactNode or string to render
+  title: tooltip text
+  ariaLabel: accessible label (falls back to title or stringified icon)
+  onClick: callback fired after internal URL logic (receives event & active state)
+  size: number (px) for square hit area
+  disabled: boolean
+  className, style: customization
+  pushUrlParamObj: string | false -> if provided, component will write to that URL param
+  pushValue: value written to param when activated (default '1')
+  toggle: boolean -> if true acts like a toggle, else just sets param
+  multiUrlList: boolean -> if true treats param as comma-separated list; clicking toggles pushValue in list
+  activeColor: color when active
+  inactiveColor: color when inactive
+*/
+
+function IconInput({
+  icon,
+  title,
+  ariaLabel,
+  onClick,
+  size = 32,
+  disabled = false,
+  className = "",
+  style = {},
+  pushUrlParamObj = false,
+  pushValue = "1",
+  toggle = true,
+  multiUrlList = false,
+  activeColor = "#1d4ed8",
+  inactiveColor = "#555",
+  onAction = null
+}) {
+  const paramKey = pushUrlParamObj || null;
+  const [active, setActive] = useState(() => {
+    if (!paramKey) return false;
+    const params = new URLSearchParams(typeof window !== 'undefined' ? window.location.search : '');
+    const raw = params.get(paramKey);
+    if (!raw) return false;
+    if (multiUrlList) {
+      const arr = raw.split(',').filter(Boolean);
+      return arr.includes(String(pushValue));
+    }
+    return raw === String(pushValue);
+  });
+
+  // Auto-update active state when URL param changes
   useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const savedFilters = localStorage.getItem('adminFilters');
-    const initial = savedFilters ? JSON.parse(savedFilters) : {};
-    urlParams.forEach((value, key) => {
-      if (key === 'roles') {
-        initial[key] = urlParams.getAll('roles');
+    if (!paramKey) return;
+    const syncFromUrl = () => {
+      const params = new URLSearchParams(window.location.search);
+      const raw = params.get(paramKey);
+      let nextActive = false;
+      if (raw) {
+        if (multiUrlList) {
+          const arr = raw.split(',').filter(Boolean);
+          nextActive = arr.includes(String(pushValue));
+        } else {
+          nextActive = raw === String(pushValue);
+        }
+      }
+      setActive(nextActive);
+    };
+    syncFromUrl();
+    window.addEventListener("popstate", syncFromUrl);
+    // Listen for pushState/replaceState (programmatic changes)
+    const patchHistory = type => {
+      const orig = window.history[type];
+      window.history[type] = function () {
+        const rv = orig.apply(this, arguments);
+        window.dispatchEvent(new Event(type));
+        return rv;
+      };
+    };
+    patchHistory('pushState');
+    patchHistory('replaceState');
+    window.addEventListener('pushState', syncFromUrl);
+    window.addEventListener('replaceState', syncFromUrl);
+    return () => {
+      window.removeEventListener("popstate", syncFromUrl);
+      window.removeEventListener('pushState', syncFromUrl);
+      window.removeEventListener('replaceState', syncFromUrl);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [paramKey, multiUrlList, pushValue]);
+
+  // (Removed effect-based initialization; using lazy useState instead to satisfy lint rule.)
+
+  const updateUrl = useCallback(nextActive => {
+    if (!paramKey) return;
+    const params = new URLSearchParams(window.location.search);
+    const current = params.get(paramKey);
+    if (multiUrlList) {
+      let list = current ? current.split(",").filter(Boolean) : [];
+      const idx = list.indexOf(String(pushValue));
+      if (nextActive) {
+        if (idx === -1) list.push(String(pushValue));
       } else {
-        initial[key] = value;
+        if (idx !== -1) list.splice(idx, 1);
       }
-    });
-    Object.entries(initial).forEach(([key, value]) => {
-      onChange?.(key, value);
-    });
-  }, []);
-  useEffect(() => {
-    const savedFilters = localStorage.getItem('adminFilters');
-    if (savedFilters) {
-      const parsed = JSON.parse(savedFilters);
-      Object.entries(parsed).forEach(([key, value]) => {
-        onChange?.(key, value);
-      });
-    }
-  }, []);
-  useEffect(() => {
-    const currentValues = {};
-    config.forEach(item => {
-      if (item.type !== 'button' && item.type !== 'icon') {
-        currentValues[item.key] = item.value;
+      if (list.length === 0) {
+        params.delete(paramKey);
+      } else {
+        params.set(paramKey, list.join(","));
       }
-    });
-    localStorage.setItem('adminFilters', JSON.stringify(currentValues));
-  }, [config]);
-  const openConfirmModal = (label, key, actionFn) => {
-    setModalState({
-      isOpen: true,
-      label,
-      key,
-      onConfirm: () => {
-        actionFn(key);
-        setModalState({
-          isOpen: false,
-          label: '',
-          key: '',
-          onConfirm: null
-        });
+    } else {
+      if (nextActive) {
+        params.set(paramKey, String(pushValue));
+      } else {
+        if (toggle) {
+          params.delete(paramKey);
+        } else {
+          // If not toggle, leave value as-is (or could clear)
+          params.delete(paramKey);
+        }
       }
-    });
+    }
+    const newUrl = window.location.pathname + (params.toString() ? `?${params.toString()}` : "");
+    window.history.replaceState({}, "", newUrl);
+  }, [paramKey, multiUrlList, pushValue, toggle]);
+  const handleActivate = e => {
+    if (disabled) return;
+    let nextActive = active;
+    if (toggle || multiUrlList) {
+      nextActive = !active;
+    } else {
+      nextActive = true; // one-shot set
+    }
+    setActive(nextActive);
+    updateUrl(nextActive);
+    onClick?.(e, nextActive);
   };
-  const closeModal = () => {
-    setModalState({
-      isOpen: false,
-      label: '',
-      key: '',
-      onConfirm: null
-    });
+  const handleKey = e => {
+    if (disabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleActivate(e);
+    }
+  };
+  const label = ariaLabel || title || (typeof icon === "string" ? icon : "icon button");
+  const baseStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: size,
+    height: size,
+    fontSize: Math.floor(size * 0.6),
+    lineHeight: 1,
+    cursor: disabled ? "not-allowed" : "pointer",
+    userSelect: "none",
+    borderRadius: 6,
+    border: "1px solid #ccc",
+    background: active ? "#e0f2fe" : "#f5f5f5",
+    color: active ? activeColor : inactiveColor,
+    transition: "background 120ms, color 120ms, box-shadow 120ms",
+    boxShadow: active ? "0 0 0 2px rgba(29,78,216,0.3)" : "none",
+    ...style
   };
-  const sortingLocalStorage = localStorage.getItem("tableSort");
+  return /*#__PURE__*/React__default.createElement("span", {
+    role: "button",
+    "aria-label": label,
+    "aria-pressed": toggle || multiUrlList ? active : undefined,
+    tabIndex: disabled ? -1 : 0,
+    title: title,
+    onClick: onAction,
+    onKeyDown: handleKey,
+    className: `icon-input ${className}`.trim(),
+    style: baseStyle,
+    "data-active": active ? "true" : "false"
+  }, icon);
+}
+
+var propTypes = {exports: {}};
 
-  // When urSearchParams is enabled, keep the URL search param `search`
-  // in sync with the extraSearchTerm prop without reloading the page.
-  // When urSearchParams is enabled, keep the URL search param `search`
-  // in sync with the extraSearchTerm prop without reloading the page.
-  useEffect(() => {
-    if (!urSearchParams) return;
-    try {
-      const url = new URL(window.location.href);
-      if (extraSearchTerm && String(extraSearchTerm).length > 0) {
-        url.searchParams.set('search', String(extraSearchTerm));
-      } else {
-        url.searchParams.delete('search');
-      }
-      window.history.replaceState({}, '', url.toString());
-    } catch (e) {
-      // fallback: do nothing if URL constructor fails (very unlikely in browsers)
-    }
-  }, [urSearchParams, extraSearchTerm]);
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
 
-  // Clear MultiSelectDropdown values if extraSearchTerm is set (input search used)
-  useEffect(() => {
-    if (!extraSearchTerm || !urSearchParams) return;
-    // Find all multiselect filters and clear them
-    config.forEach(item => {
-      if (item.type === 'multiselect' && item.value && item.value.length > 0) {
-        onChange?.(item.key, item.isMulti ? [] : '');
-      }
-    });
-  }, [extraSearchTerm, urSearchParams]);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "filters-wrapper"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "filters-header"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "filters-title"
-  }, title), /*#__PURE__*/React__default.createElement("button", {
-    className: "basic-button",
-    onClick: () => setCollapsed(prev => !prev)
-  }, collapsed ? ' ' + t("showFilters") : ' ' + t("hideFilters")), sortingLocalStorage && /*#__PURE__*/React__default.createElement("button", {
-    className: "basic-button confirm",
-    onClick: () => {
-      setSorting(false);
-      context("resetSortingTrigger", true);
-      localStorage.removeItem("tableSort");
-      window.dispatchEvent(new Event("storageUpdated"));
-    }
-  }, t("resetSorting") + " " + (sorting || "")), !hideResetSearchButton && /*#__PURE__*/React__default.createElement("button", {
-    className: "basic-button",
-    onClick: handleReset
-  }, t("resetSearching"))), !collapsed && /*#__PURE__*/React__default.createElement("div", {
-    className: "filters-container"
-  }, config.map((item, index) => {
-    const tooltip = item.tooltip || '';
-    const roleAllowed = !item.role || userRole.some(r => item.role.includes(r));
-    if (!roleAllowed) return null;
-    switch (item.type) {
-      case 'group':
-        return /*#__PURE__*/React__default.createElement("div", {
-          key: index,
-          className: "button-group",
-          title: item.label
-        }, item.buttons.map((btn, i) => {
-          const actionFn = btn.onAction || onAction;
-          if (!actionFn) return null;
-          const handleClick = () => {
-            if (btn.confirm) {
-              openConfirmModal(btn.label, btn.key, actionFn);
-            } else {
-              actionFn(btn.key);
-            }
-          };
-          return /*#__PURE__*/React__default.createElement("button", {
-            className: "basic-button",
-            key: i,
-            onClick: handleClick,
-            title: btn.tooltip || btn.label
-          }, t(btn.label));
-        }));
-      case 'input':
-        return /*#__PURE__*/React__default.createElement("div", {
-          key: index,
-          className: "filter-input-wrapper",
-          title: tooltip
-        }, /*#__PURE__*/React__default.createElement("input", {
-          className: "basic-input",
-          type: "search",
-          placeholder: item.placeholder || '',
-          value: item.value || '',
-          onChange: e => {
-            // If input search is used, clear all multiselects
-            if (urSearchParams && e.target.value) {
-              config.forEach(f => {
-                if (f.type === 'multiselect' && f.value && f.value.length > 0) {
-                  onChange?.(f.key, f.isMulti ? [] : '');
-                }
-              });
-            }
-            onChange?.(item.key, e.target.value);
-          }
-        }));
-      case 'select':
-        return /*#__PURE__*/React__default.createElement("select", {
-          key: index,
-          value: item.value || '',
-          onChange: e => onChange?.(item.key, e.target.value),
-          className: "filter-select",
-          title: tooltip
-        }, item.options?.map((opt, i) => /*#__PURE__*/React__default.createElement("option", {
-          key: i,
-          value: opt.value
-        }, opt.label)));
-      case 'multiselect':
-        return /*#__PURE__*/React__default.createElement("div", {
-          key: index,
-          className: "filter-multiselect",
-          title: tooltip
-        }, /*#__PURE__*/React__default.createElement(MultiSelectDropdown, {
-          label: item.label || t("role"),
-          selected: Array.isArray(item.value) ? item.value : item.value ? [item.value] : [],
-          onChange: newValues => {
-            // If multiselect is used, clear all input search fields
-            if (urSearchParams && newValues && newValues.length > 0) {
-              config.forEach(f => {
-                if (f.type === 'input' && f.value && f.value.length > 0) {
-                  onChange?.(f.key, '');
-                }
-              });
-            }
-            onChange?.(item.key, item.isMulti ? newValues : newValues[0] || "");
-            if (urSearchParams) {
-              try {
-                const url = new URL(window.location.href);
-                // Combine all selected values from all MultiSelectDropdowns
-                let allSelected = [];
-                config.forEach(f => {
-                  if (f.type === 'multiselect') {
-                    // Skip the current item being changed, we'll use newValues for it
-                    if (f.key === item.key) {
-                      if (Array.isArray(newValues) && newValues.length > 0) {
-                        allSelected = allSelected.concat(newValues);
-                      } else if (newValues && !Array.isArray(newValues)) {
-                        allSelected.push(newValues);
-                      }
-                    } else if (f.value) {
-                      // For other multiselects, use their current value
-                      if (Array.isArray(f.value)) {
-                        allSelected = allSelected.concat(f.value);
-                      } else if (f.value) {
-                        allSelected.push(f.value);
-                      }
-                    }
-                  }
-                });
-                // Filter out empty/null/undefined values
-                allSelected = allSelected.filter(v => v !== undefined && v !== null && v !== '');
-                const joined = allSelected.join(",");
-                if (joined && joined.length > 0) {
-                  url.searchParams.set('search', joined);
-                } else {
-                  url.searchParams.delete('search');
-                }
-                window.history.replaceState({}, '', url.toString());
-              } catch (e) {
-                // ignore
-              }
-            }
-          },
-          required: item.required,
-          isMulti: item.isMulti,
-          theme: theme,
-          fetchOptions: item.fetchOptions,
-          options: item.options
-        }));
-      case 'date':
-        return /*#__PURE__*/React__default.createElement("div", {
-          key: index,
-          className: "filter-date",
-          title: tooltip
-        }, /*#__PURE__*/React__default.createElement("input", {
-          className: "basic-input",
-          type: item.addTime ? 'datetime-local' : 'date',
-          value: item.value || '',
-          onChange: e => onChange?.(item.key, e.target.value)
-        }), item.value && /*#__PURE__*/React__default.createElement("span", {
-          className: "date-clear",
-          onClick: () => onChange?.(item.key, ''),
-          title: "Clear date"
-        }, "\u2716\uFE0F"));
-      case 'button':
-        return /*#__PURE__*/React__default.createElement("button", {
-          style: item?.style,
-          className: "basic-button",
-          key: index,
-          onClick: () => {
-            const actionFn = item.onAction || onAction;
-            if (!actionFn) return;
-            if (item.confirm) {
-              openConfirmModal(item.label, item.key, actionFn);
-            } else {
-              actionFn(item.key);
-            }
-          },
-          title: tooltip
-        }, t(item.label));
-      case 'icon':
-        return /*#__PURE__*/React__default.createElement("span", {
-          key: index,
-          className: `filter-icon ${item.className || ''}`,
-          style: item.style,
-          onClick: () => onAction?.(item.key),
-          title: tooltip
-        }, item.icon);
-      default:
-        return null;
-    }
-  }))), /*#__PURE__*/React__default.createElement(Modal, {
-    isOpen: modalState.isOpen,
-    title: t("confirmTitle") || "Confirm",
-    onCancel: closeModal,
-    onConfirm: modalState.onConfirm,
-    showCancel: true,
-    showConfirm: true,
-    confirmLabel: t("confirm") || "Confirm",
-    cancelLabel: t("cancel") || "Cancel"
-  }, t("confirmUnknown"), " ", modalState.label, "?"));
-};
+var objectAssign;
+var hasRequiredObjectAssign;
+
+function requireObjectAssign () {
+	if (hasRequiredObjectAssign) return objectAssign;
+	hasRequiredObjectAssign = 1;
+	/* eslint-disable no-unused-vars */
+	var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+	var hasOwnProperty = Object.prototype.hasOwnProperty;
+	var propIsEnumerable = Object.prototype.propertyIsEnumerable;
+
+	function toObject(val) {
+		if (val === null || val === undefined) {
+			throw new TypeError('Object.assign cannot be called with null or undefined');
+		}
+
+		return Object(val);
+	}
+
+	function shouldUseNative() {
+		try {
+			if (!Object.assign) {
+				return false;
+			}
+
+			// Detect buggy property enumeration order in older V8 versions.
+
+			// https://bugs.chromium.org/p/v8/issues/detail?id=4118
+			var test1 = new String('abc');  // eslint-disable-line no-new-wrappers
+			test1[5] = 'de';
+			if (Object.getOwnPropertyNames(test1)[0] === '5') {
+				return false;
+			}
+
+			// https://bugs.chromium.org/p/v8/issues/detail?id=3056
+			var test2 = {};
+			for (var i = 0; i < 10; i++) {
+				test2['_' + String.fromCharCode(i)] = i;
+			}
+			var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
+				return test2[n];
+			});
+			if (order2.join('') !== '0123456789') {
+				return false;
+			}
+
+			// https://bugs.chromium.org/p/v8/issues/detail?id=3056
+			var test3 = {};
+			'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
+				test3[letter] = letter;
+			});
+			if (Object.keys(Object.assign({}, test3)).join('') !==
+					'abcdefghijklmnopqrst') {
+				return false;
+			}
+
+			return true;
+		} catch (err) {
+			// We don't expect any of the above to throw, but better to be safe.
+			return false;
+		}
+	}
+
+	objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
+		var from;
+		var to = toObject(target);
+		var symbols;
+
+		for (var s = 1; s < arguments.length; s++) {
+			from = Object(arguments[s]);
+
+			for (var key in from) {
+				if (hasOwnProperty.call(from, key)) {
+					to[key] = from[key];
+				}
+			}
+
+			if (getOwnPropertySymbols) {
+				symbols = getOwnPropertySymbols(from);
+				for (var i = 0; i < symbols.length; i++) {
+					if (propIsEnumerable.call(from, symbols[i])) {
+						to[symbols[i]] = from[symbols[i]];
+					}
+				}
+			}
+		}
+
+		return to;
+	};
+	return objectAssign;
+}
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var ReactPropTypesSecret_1;
+var hasRequiredReactPropTypesSecret;
+
+function requireReactPropTypesSecret () {
+	if (hasRequiredReactPropTypesSecret) return ReactPropTypesSecret_1;
+	hasRequiredReactPropTypesSecret = 1;
+
+	var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
+
+	ReactPropTypesSecret_1 = ReactPropTypesSecret;
+	return ReactPropTypesSecret_1;
+}
+
+var has;
+var hasRequiredHas;
+
+function requireHas () {
+	if (hasRequiredHas) return has;
+	hasRequiredHas = 1;
+	has = Function.call.bind(Object.prototype.hasOwnProperty);
+	return has;
+}
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var checkPropTypes_1;
+var hasRequiredCheckPropTypes;
+
+function requireCheckPropTypes () {
+	if (hasRequiredCheckPropTypes) return checkPropTypes_1;
+	hasRequiredCheckPropTypes = 1;
+
+	var printWarning = function() {};
+
+	if (process.env.NODE_ENV !== 'production') {
+	  var ReactPropTypesSecret = /*@__PURE__*/ requireReactPropTypesSecret();
+	  var loggedTypeFailures = {};
+	  var has = /*@__PURE__*/ requireHas();
+
+	  printWarning = function(text) {
+	    var message = 'Warning: ' + text;
+	    if (typeof console !== 'undefined') {
+	      console.error(message);
+	    }
+	    try {
+	      // --- Welcome to debugging React ---
+	      // This error was thrown as a convenience so that you can use this stack
+	      // to find the callsite that caused this warning to fire.
+	      throw new Error(message);
+	    } catch (x) { /**/ }
+	  };
+	}
+
+	/**
+	 * Assert that the values match with the type specs.
+	 * Error messages are memorized and will only be shown once.
+	 *
+	 * @param {object} typeSpecs Map of name to a ReactPropType
+	 * @param {object} values Runtime values that need to be type-checked
+	 * @param {string} location e.g. "prop", "context", "child context"
+	 * @param {string} componentName Name of the component for error messages.
+	 * @param {?Function} getStack Returns the component stack.
+	 * @private
+	 */
+	function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
+	  if (process.env.NODE_ENV !== 'production') {
+	    for (var typeSpecName in typeSpecs) {
+	      if (has(typeSpecs, typeSpecName)) {
+	        var error;
+	        // Prop type validation may throw. In case they do, we don't want to
+	        // fail the render phase where it didn't fail before. So we log it.
+	        // After these have been cleaned up, we'll let them throw.
+	        try {
+	          // This is intentionally an invariant that gets caught. It's the same
+	          // behavior as without this statement except with a better message.
+	          if (typeof typeSpecs[typeSpecName] !== 'function') {
+	            var err = Error(
+	              (componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +
+	              'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' +
+	              'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.'
+	            );
+	            err.name = 'Invariant Violation';
+	            throw err;
+	          }
+	          error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret);
+	        } catch (ex) {
+	          error = ex;
+	        }
+	        if (error && !(error instanceof Error)) {
+	          printWarning(
+	            (componentName || 'React class') + ': type specification of ' +
+	            location + ' `' + typeSpecName + '` is invalid; the type checker ' +
+	            'function must return `null` or an `Error` but returned a ' + typeof error + '. ' +
+	            'You may have forgotten to pass an argument to the type checker ' +
+	            'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' +
+	            'shape all require an argument).'
+	          );
+	        }
+	        if (error instanceof Error && !(error.message in loggedTypeFailures)) {
+	          // Only monitor this failure once because there tends to be a lot of the
+	          // same error.
+	          loggedTypeFailures[error.message] = true;
+
+	          var stack = getStack ? getStack() : '';
+
+	          printWarning(
+	            'Failed ' + location + ' type: ' + error.message + (stack != null ? stack : '')
+	          );
+	        }
+	      }
+	    }
+	  }
+	}
+
+	/**
+	 * Resets warning cache when testing.
+	 *
+	 * @private
+	 */
+	checkPropTypes.resetWarningCache = function() {
+	  if (process.env.NODE_ENV !== 'production') {
+	    loggedTypeFailures = {};
+	  }
+	};
+
+	checkPropTypes_1 = checkPropTypes;
+	return checkPropTypes_1;
+}
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var factoryWithTypeCheckers;
+var hasRequiredFactoryWithTypeCheckers;
+
+function requireFactoryWithTypeCheckers () {
+	if (hasRequiredFactoryWithTypeCheckers) return factoryWithTypeCheckers;
+	hasRequiredFactoryWithTypeCheckers = 1;
+
+	var ReactIs = requireReactIs();
+	var assign = requireObjectAssign();
+
+	var ReactPropTypesSecret = /*@__PURE__*/ requireReactPropTypesSecret();
+	var has = /*@__PURE__*/ requireHas();
+	var checkPropTypes = /*@__PURE__*/ requireCheckPropTypes();
+
+	var printWarning = function() {};
+
+	if (process.env.NODE_ENV !== 'production') {
+	  printWarning = function(text) {
+	    var message = 'Warning: ' + text;
+	    if (typeof console !== 'undefined') {
+	      console.error(message);
+	    }
+	    try {
+	      // --- Welcome to debugging React ---
+	      // This error was thrown as a convenience so that you can use this stack
+	      // to find the callsite that caused this warning to fire.
+	      throw new Error(message);
+	    } catch (x) {}
+	  };
+	}
+
+	function emptyFunctionThatReturnsNull() {
+	  return null;
+	}
+
+	factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
+	  /* global Symbol */
+	  var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
+	  var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
+
+	  /**
+	   * Returns the iterator method function contained on the iterable object.
+	   *
+	   * Be sure to invoke the function with the iterable as context:
+	   *
+	   *     var iteratorFn = getIteratorFn(myIterable);
+	   *     if (iteratorFn) {
+	   *       var iterator = iteratorFn.call(myIterable);
+	   *       ...
+	   *     }
+	   *
+	   * @param {?object} maybeIterable
+	   * @return {?function}
+	   */
+	  function getIteratorFn(maybeIterable) {
+	    var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);
+	    if (typeof iteratorFn === 'function') {
+	      return iteratorFn;
+	    }
+	  }
 
-// src/index.js
- // if you want named import
+	  /**
+	   * Collection of methods that allow declaration and validation of props that are
+	   * supplied to React components. Example usage:
+	   *
+	   *   var Props = require('ReactPropTypes');
+	   *   var MyArticle = React.createClass({
+	   *     propTypes: {
+	   *       // An optional string prop named "description".
+	   *       description: Props.string,
+	   *
+	   *       // A required enum prop named "category".
+	   *       category: Props.oneOf(['News','Photos']).isRequired,
+	   *
+	   *       // A prop named "dialog" that requires an instance of Dialog.
+	   *       dialog: Props.instanceOf(Dialog).isRequired
+	   *     },
+	   *     render: function() { ... }
+	   *   });
+	   *
+	   * A more formal specification of how these methods are used:
+	   *
+	   *   type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...)
+	   *   decl := ReactPropTypes.{type}(.isRequired)?
+	   *
+	   * Each and every declaration produces a function with the same signature. This
+	   * allows the creation of custom validation functions. For example:
+	   *
+	   *  var MyLink = React.createClass({
+	   *    propTypes: {
+	   *      // An optional string or URI prop named "href".
+	   *      href: function(props, propName, componentName) {
+	   *        var propValue = props[propName];
+	   *        if (propValue != null && typeof propValue !== 'string' &&
+	   *            !(propValue instanceof URI)) {
+	   *          return new Error(
+	   *            'Expected a string or an URI for ' + propName + ' in ' +
+	   *            componentName
+	   *          );
+	   *        }
+	   *      }
+	   *    },
+	   *    render: function() {...}
+	   *  });
+	   *
+	   * @internal
+	   */
+
+	  var ANONYMOUS = '<<anonymous>>';
+
+	  // Important!
+	  // Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
+	  var ReactPropTypes = {
+	    array: createPrimitiveTypeChecker('array'),
+	    bigint: createPrimitiveTypeChecker('bigint'),
+	    bool: createPrimitiveTypeChecker('boolean'),
+	    func: createPrimitiveTypeChecker('function'),
+	    number: createPrimitiveTypeChecker('number'),
+	    object: createPrimitiveTypeChecker('object'),
+	    string: createPrimitiveTypeChecker('string'),
+	    symbol: createPrimitiveTypeChecker('symbol'),
+
+	    any: createAnyTypeChecker(),
+	    arrayOf: createArrayOfTypeChecker,
+	    element: createElementTypeChecker(),
+	    elementType: createElementTypeTypeChecker(),
+	    instanceOf: createInstanceTypeChecker,
+	    node: createNodeChecker(),
+	    objectOf: createObjectOfTypeChecker,
+	    oneOf: createEnumTypeChecker,
+	    oneOfType: createUnionTypeChecker,
+	    shape: createShapeTypeChecker,
+	    exact: createStrictShapeTypeChecker,
+	  };
+
+	  /**
+	   * inlined Object.is polyfill to avoid requiring consumers ship their own
+	   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+	   */
+	  /*eslint-disable no-self-compare*/
+	  function is(x, y) {
+	    // SameValue algorithm
+	    if (x === y) {
+	      // Steps 1-5, 7-10
+	      // Steps 6.b-6.e: +0 != -0
+	      return x !== 0 || 1 / x === 1 / y;
+	    } else {
+	      // Step 6.a: NaN == NaN
+	      return x !== x && y !== y;
+	    }
+	  }
+	  /*eslint-enable no-self-compare*/
+
+	  /**
+	   * We use an Error-like object for backward compatibility as people may call
+	   * PropTypes directly and inspect their output. However, we don't use real
+	   * Errors anymore. We don't inspect their stack anyway, and creating them
+	   * is prohibitively expensive if they are created too often, such as what
+	   * happens in oneOfType() for any type before the one that matched.
+	   */
+	  function PropTypeError(message, data) {
+	    this.message = message;
+	    this.data = data && typeof data === 'object' ? data: {};
+	    this.stack = '';
+	  }
+	  // Make `instanceof Error` still work for returned errors.
+	  PropTypeError.prototype = Error.prototype;
+
+	  function createChainableTypeChecker(validate) {
+	    if (process.env.NODE_ENV !== 'production') {
+	      var manualPropTypeCallCache = {};
+	      var manualPropTypeWarningCount = 0;
+	    }
+	    function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {
+	      componentName = componentName || ANONYMOUS;
+	      propFullName = propFullName || propName;
+
+	      if (secret !== ReactPropTypesSecret) {
+	        if (throwOnDirectAccess) {
+	          // New behavior only for users of `prop-types` package
+	          var err = new Error(
+	            'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
+	            'Use `PropTypes.checkPropTypes()` to call them. ' +
+	            'Read more at http://fb.me/use-check-prop-types'
+	          );
+	          err.name = 'Invariant Violation';
+	          throw err;
+	        } else if (process.env.NODE_ENV !== 'production' && typeof console !== 'undefined') {
+	          // Old behavior for people using React.PropTypes
+	          var cacheKey = componentName + ':' + propName;
+	          if (
+	            !manualPropTypeCallCache[cacheKey] &&
+	            // Avoid spamming the console because they are often not actionable except for lib authors
+	            manualPropTypeWarningCount < 3
+	          ) {
+	            printWarning(
+	              'You are manually calling a React.PropTypes validation ' +
+	              'function for the `' + propFullName + '` prop on `' + componentName + '`. This is deprecated ' +
+	              'and will throw in the standalone `prop-types` package. ' +
+	              'You may be seeing this warning due to a third-party PropTypes ' +
+	              'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.'
+	            );
+	            manualPropTypeCallCache[cacheKey] = true;
+	            manualPropTypeWarningCount++;
+	          }
+	        }
+	      }
+	      if (props[propName] == null) {
+	        if (isRequired) {
+	          if (props[propName] === null) {
+	            return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.'));
+	          }
+	          return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.'));
+	        }
+	        return null;
+	      } else {
+	        return validate(props, propName, componentName, location, propFullName);
+	      }
+	    }
+
+	    var chainedCheckType = checkType.bind(null, false);
+	    chainedCheckType.isRequired = checkType.bind(null, true);
+
+	    return chainedCheckType;
+	  }
+
+	  function createPrimitiveTypeChecker(expectedType) {
+	    function validate(props, propName, componentName, location, propFullName, secret) {
+	      var propValue = props[propName];
+	      var propType = getPropType(propValue);
+	      if (propType !== expectedType) {
+	        // `propValue` being instance of, say, date/regexp, pass the 'object'
+	        // check, but we can offer a more precise error message here rather than
+	        // 'of type `object`'.
+	        var preciseType = getPreciseType(propValue);
+
+	        return new PropTypeError(
+	          'Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'),
+	          {expectedType: expectedType}
+	        );
+	      }
+	      return null;
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+
+	  function createAnyTypeChecker() {
+	    return createChainableTypeChecker(emptyFunctionThatReturnsNull);
+	  }
+
+	  function createArrayOfTypeChecker(typeChecker) {
+	    function validate(props, propName, componentName, location, propFullName) {
+	      if (typeof typeChecker !== 'function') {
+	        return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside arrayOf.');
+	      }
+	      var propValue = props[propName];
+	      if (!Array.isArray(propValue)) {
+	        var propType = getPropType(propValue);
+	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.'));
+	      }
+	      for (var i = 0; i < propValue.length; i++) {
+	        var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret);
+	        if (error instanceof Error) {
+	          return error;
+	        }
+	      }
+	      return null;
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+
+	  function createElementTypeChecker() {
+	    function validate(props, propName, componentName, location, propFullName) {
+	      var propValue = props[propName];
+	      if (!isValidElement(propValue)) {
+	        var propType = getPropType(propValue);
+	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement.'));
+	      }
+	      return null;
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+
+	  function createElementTypeTypeChecker() {
+	    function validate(props, propName, componentName, location, propFullName) {
+	      var propValue = props[propName];
+	      if (!ReactIs.isValidElementType(propValue)) {
+	        var propType = getPropType(propValue);
+	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement type.'));
+	      }
+	      return null;
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+
+	  function createInstanceTypeChecker(expectedClass) {
+	    function validate(props, propName, componentName, location, propFullName) {
+	      if (!(props[propName] instanceof expectedClass)) {
+	        var expectedClassName = expectedClass.name || ANONYMOUS;
+	        var actualClassName = getClassName(props[propName]);
+	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + actualClassName + '` supplied to `' + componentName + '`, expected ') + ('instance of `' + expectedClassName + '`.'));
+	      }
+	      return null;
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+
+	  function createEnumTypeChecker(expectedValues) {
+	    if (!Array.isArray(expectedValues)) {
+	      if (process.env.NODE_ENV !== 'production') {
+	        if (arguments.length > 1) {
+	          printWarning(
+	            'Invalid arguments supplied to oneOf, expected an array, got ' + arguments.length + ' arguments. ' +
+	            'A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).'
+	          );
+	        } else {
+	          printWarning('Invalid argument supplied to oneOf, expected an array.');
+	        }
+	      }
+	      return emptyFunctionThatReturnsNull;
+	    }
+
+	    function validate(props, propName, componentName, location, propFullName) {
+	      var propValue = props[propName];
+	      for (var i = 0; i < expectedValues.length; i++) {
+	        if (is(propValue, expectedValues[i])) {
+	          return null;
+	        }
+	      }
+
+	      var valuesString = JSON.stringify(expectedValues, function replacer(key, value) {
+	        var type = getPreciseType(value);
+	        if (type === 'symbol') {
+	          return String(value);
+	        }
+	        return value;
+	      });
+	      return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + String(propValue) + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.'));
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+
+	  function createObjectOfTypeChecker(typeChecker) {
+	    function validate(props, propName, componentName, location, propFullName) {
+	      if (typeof typeChecker !== 'function') {
+	        return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside objectOf.');
+	      }
+	      var propValue = props[propName];
+	      var propType = getPropType(propValue);
+	      if (propType !== 'object') {
+	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.'));
+	      }
+	      for (var key in propValue) {
+	        if (has(propValue, key)) {
+	          var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
+	          if (error instanceof Error) {
+	            return error;
+	          }
+	        }
+	      }
+	      return null;
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+
+	  function createUnionTypeChecker(arrayOfTypeCheckers) {
+	    if (!Array.isArray(arrayOfTypeCheckers)) {
+	      process.env.NODE_ENV !== 'production' ? printWarning('Invalid argument supplied to oneOfType, expected an instance of array.') : void 0;
+	      return emptyFunctionThatReturnsNull;
+	    }
+
+	    for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
+	      var checker = arrayOfTypeCheckers[i];
+	      if (typeof checker !== 'function') {
+	        printWarning(
+	          'Invalid argument supplied to oneOfType. Expected an array of check functions, but ' +
+	          'received ' + getPostfixForTypeWarning(checker) + ' at index ' + i + '.'
+	        );
+	        return emptyFunctionThatReturnsNull;
+	      }
+	    }
+
+	    function validate(props, propName, componentName, location, propFullName) {
+	      var expectedTypes = [];
+	      for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
+	        var checker = arrayOfTypeCheckers[i];
+	        var checkerResult = checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret);
+	        if (checkerResult == null) {
+	          return null;
+	        }
+	        if (checkerResult.data && has(checkerResult.data, 'expectedType')) {
+	          expectedTypes.push(checkerResult.data.expectedType);
+	        }
+	      }
+	      var expectedTypesMessage = (expectedTypes.length > 0) ? ', expected one of type [' + expectedTypes.join(', ') + ']': '';
+	      return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`' + expectedTypesMessage + '.'));
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+
+	  function createNodeChecker() {
+	    function validate(props, propName, componentName, location, propFullName) {
+	      if (!isNode(props[propName])) {
+	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a ReactNode.'));
+	      }
+	      return null;
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+
+	  function invalidValidatorError(componentName, location, propFullName, key, type) {
+	    return new PropTypeError(
+	      (componentName || 'React class') + ': ' + location + ' type `' + propFullName + '.' + key + '` is invalid; ' +
+	      'it must be a function, usually from the `prop-types` package, but received `' + type + '`.'
+	    );
+	  }
+
+	  function createShapeTypeChecker(shapeTypes) {
+	    function validate(props, propName, componentName, location, propFullName) {
+	      var propValue = props[propName];
+	      var propType = getPropType(propValue);
+	      if (propType !== 'object') {
+	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
+	      }
+	      for (var key in shapeTypes) {
+	        var checker = shapeTypes[key];
+	        if (typeof checker !== 'function') {
+	          return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
+	        }
+	        var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
+	        if (error) {
+	          return error;
+	        }
+	      }
+	      return null;
+	    }
+	    return createChainableTypeChecker(validate);
+	  }
+
+	  function createStrictShapeTypeChecker(shapeTypes) {
+	    function validate(props, propName, componentName, location, propFullName) {
+	      var propValue = props[propName];
+	      var propType = getPropType(propValue);
+	      if (propType !== 'object') {
+	        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
+	      }
+	      // We need to check all keys in case some are required but missing from props.
+	      var allKeys = assign({}, props[propName], shapeTypes);
+	      for (var key in allKeys) {
+	        var checker = shapeTypes[key];
+	        if (has(shapeTypes, key) && typeof checker !== 'function') {
+	          return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
+	        }
+	        if (!checker) {
+	          return new PropTypeError(
+	            'Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' +
+	            '\nBad object: ' + JSON.stringify(props[propName], null, '  ') +
+	            '\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, '  ')
+	          );
+	        }
+	        var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
+	        if (error) {
+	          return error;
+	        }
+	      }
+	      return null;
+	    }
+
+	    return createChainableTypeChecker(validate);
+	  }
+
+	  function isNode(propValue) {
+	    switch (typeof propValue) {
+	      case 'number':
+	      case 'string':
+	      case 'undefined':
+	        return true;
+	      case 'boolean':
+	        return !propValue;
+	      case 'object':
+	        if (Array.isArray(propValue)) {
+	          return propValue.every(isNode);
+	        }
+	        if (propValue === null || isValidElement(propValue)) {
+	          return true;
+	        }
+
+	        var iteratorFn = getIteratorFn(propValue);
+	        if (iteratorFn) {
+	          var iterator = iteratorFn.call(propValue);
+	          var step;
+	          if (iteratorFn !== propValue.entries) {
+	            while (!(step = iterator.next()).done) {
+	              if (!isNode(step.value)) {
+	                return false;
+	              }
+	            }
+	          } else {
+	            // Iterator will provide entry [k,v] tuples rather than values.
+	            while (!(step = iterator.next()).done) {
+	              var entry = step.value;
+	              if (entry) {
+	                if (!isNode(entry[1])) {
+	                  return false;
+	                }
+	              }
+	            }
+	          }
+	        } else {
+	          return false;
+	        }
+
+	        return true;
+	      default:
+	        return false;
+	    }
+	  }
+
+	  function isSymbol(propType, propValue) {
+	    // Native Symbol.
+	    if (propType === 'symbol') {
+	      return true;
+	    }
+
+	    // falsy value can't be a Symbol
+	    if (!propValue) {
+	      return false;
+	    }
+
+	    // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
+	    if (propValue['@@toStringTag'] === 'Symbol') {
+	      return true;
+	    }
+
+	    // Fallback for non-spec compliant Symbols which are polyfilled.
+	    if (typeof Symbol === 'function' && propValue instanceof Symbol) {
+	      return true;
+	    }
+
+	    return false;
+	  }
+
+	  // Equivalent of `typeof` but with special handling for array and regexp.
+	  function getPropType(propValue) {
+	    var propType = typeof propValue;
+	    if (Array.isArray(propValue)) {
+	      return 'array';
+	    }
+	    if (propValue instanceof RegExp) {
+	      // Old webkits (at least until Android 4.0) return 'function' rather than
+	      // 'object' for typeof a RegExp. We'll normalize this here so that /bla/
+	      // passes PropTypes.object.
+	      return 'object';
+	    }
+	    if (isSymbol(propType, propValue)) {
+	      return 'symbol';
+	    }
+	    return propType;
+	  }
+
+	  // This handles more types than `getPropType`. Only used for error messages.
+	  // See `createPrimitiveTypeChecker`.
+	  function getPreciseType(propValue) {
+	    if (typeof propValue === 'undefined' || propValue === null) {
+	      return '' + propValue;
+	    }
+	    var propType = getPropType(propValue);
+	    if (propType === 'object') {
+	      if (propValue instanceof Date) {
+	        return 'date';
+	      } else if (propValue instanceof RegExp) {
+	        return 'regexp';
+	      }
+	    }
+	    return propType;
+	  }
+
+	  // Returns a string that is postfixed to a warning about an invalid type.
+	  // For example, "undefined" or "of type array"
+	  function getPostfixForTypeWarning(value) {
+	    var type = getPreciseType(value);
+	    switch (type) {
+	      case 'array':
+	      case 'object':
+	        return 'an ' + type;
+	      case 'boolean':
+	      case 'date':
+	      case 'regexp':
+	        return 'a ' + type;
+	      default:
+	        return type;
+	    }
+	  }
+
+	  // Returns class name of the object, if any.
+	  function getClassName(propValue) {
+	    if (!propValue.constructor || !propValue.constructor.name) {
+	      return ANONYMOUS;
+	    }
+	    return propValue.constructor.name;
+	  }
+
+	  ReactPropTypes.checkPropTypes = checkPropTypes;
+	  ReactPropTypes.resetWarningCache = checkPropTypes.resetWarningCache;
+	  ReactPropTypes.PropTypes = ReactPropTypes;
+
+	  return ReactPropTypes;
+	};
+	return factoryWithTypeCheckers;
+}
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var factoryWithThrowingShims;
+var hasRequiredFactoryWithThrowingShims;
+
+function requireFactoryWithThrowingShims () {
+	if (hasRequiredFactoryWithThrowingShims) return factoryWithThrowingShims;
+	hasRequiredFactoryWithThrowingShims = 1;
+
+	var ReactPropTypesSecret = /*@__PURE__*/ requireReactPropTypesSecret();
+
+	function emptyFunction() {}
+	function emptyFunctionWithReset() {}
+	emptyFunctionWithReset.resetWarningCache = emptyFunction;
+
+	factoryWithThrowingShims = function() {
+	  function shim(props, propName, componentName, location, propFullName, secret) {
+	    if (secret === ReactPropTypesSecret) {
+	      // It is still safe when called from React.
+	      return;
+	    }
+	    var err = new Error(
+	      'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
+	      'Use PropTypes.checkPropTypes() to call them. ' +
+	      'Read more at http://fb.me/use-check-prop-types'
+	    );
+	    err.name = 'Invariant Violation';
+	    throw err;
+	  }	  shim.isRequired = shim;
+	  function getShim() {
+	    return shim;
+	  }	  // Important!
+	  // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
+	  var ReactPropTypes = {
+	    array: shim,
+	    bigint: shim,
+	    bool: shim,
+	    func: shim,
+	    number: shim,
+	    object: shim,
+	    string: shim,
+	    symbol: shim,
+
+	    any: shim,
+	    arrayOf: getShim,
+	    element: shim,
+	    elementType: shim,
+	    instanceOf: getShim,
+	    node: shim,
+	    objectOf: getShim,
+	    oneOf: getShim,
+	    oneOfType: getShim,
+	    shape: getShim,
+	    exact: getShim,
+
+	    checkPropTypes: emptyFunctionWithReset,
+	    resetWarningCache: emptyFunction
+	  };
+
+	  ReactPropTypes.PropTypes = ReactPropTypes;
+
+	  return ReactPropTypes;
+	};
+	return factoryWithThrowingShims;
+}
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredPropTypes;
+
+function requirePropTypes () {
+	if (hasRequiredPropTypes) return propTypes.exports;
+	hasRequiredPropTypes = 1;
+	if (process.env.NODE_ENV !== 'production') {
+	  var ReactIs = requireReactIs();
+
+	  // By explicitly using `prop-types` you are opting into new development behavior.
+	  // http://fb.me/prop-types-in-prod
+	  var throwOnDirectAccess = true;
+	  propTypes.exports = /*@__PURE__*/ requireFactoryWithTypeCheckers()(ReactIs.isElement, throwOnDirectAccess);
+	} else {
+	  // By explicitly using `prop-types` you are opting into new production behavior.
+	  // http://fb.me/prop-types-in-prod
+	  propTypes.exports = /*@__PURE__*/ requireFactoryWithThrowingShims()();
+	}
+	return propTypes.exports;
+}
+
+var propTypesExports = /*@__PURE__*/ requirePropTypes();
+var PropTypes = /*@__PURE__*/getDefaultExportFromCjs(propTypesExports);
+
+/**
+ * DateTimeInput (redesigned) - matches RangePicker visual style with dropdown panel.
+ * Features:
+ *  - Single date (and optional time) selection via custom calendar popup
+ *  - URL param sync (stores timestamp) same as RangePicker
+ *  - Dynamic dropdown positioning (prevents overflow like RangePicker)
+ *  - Clear & OK footer actions
+ */
+function DateTimeInput({
+  pushUrlParamObj = false,
+  value: controlledValue,
+  onChange,
+  time = false,
+  timeStart,
+  timezone,
+  timeFormat,
+  dateFormat,
+  placeholder = "Select date",
+  disabled = false,
+  className = "",
+  style = {},
+  predefinedRanges = ["today", "yesterday"],
+  ...rest
+}) {
+  const paramKey = pushUrlParamObj || null;
+
+  // Helper: convert timestamp (number|string) to internal input string
+  const toInputString = useCallback(ts => {
+    if (!ts) return "";
+    const d = new Date(Number(ts));
+    if (isNaN(d.getTime())) return "";
+    const yyyy = d.getFullYear();
+    const mm = String(d.getMonth() + 1).padStart(2, '0');
+    const dd = String(d.getDate()).padStart(2, '0');
+    if (time) {
+      const hh = String(d.getHours()).padStart(2, '0');
+      const min = String(d.getMinutes()).padStart(2, '0');
+      return `${yyyy}-${mm}-${dd}T${hh}:${min}`;
+    }
+    return `${yyyy}-${mm}-${dd}`;
+  }, [time]);
+
+  // Initial value
+  const [value, setValue] = useState(() => {
+    if (typeof controlledValue !== "undefined") return controlledValue;
+    if (!paramKey) {
+      let d = new Date();
+      if (time && timeStart) {
+        const [h, m] = timeStart.split(":");
+        d.setHours(Number(h), Number(m), 0, 0);
+      }
+      return toInputString(d.getTime());
+    }
+    const params = new URLSearchParams(typeof window !== 'undefined' ? window.location.search : '');
+    const urlVal = params.get(paramKey);
+    if (urlVal) return toInputString(urlVal);
+    let d = new Date();
+    if (time && timeStart) {
+      const [h, m] = timeStart.split(":");
+      d.setHours(Number(h), Number(m), 0, 0);
+    }
+    return toInputString(d.getTime());
+  });
+
+  // Dropdown state & positioning
+  const [open, setOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  const [dropdownPosition, setDropdownPosition] = useState({
+    left: 0,
+    top: "110%"
+  });
+
+  // Predefined single-date shortcuts
+  const normalizeLabel = lbl => String(lbl).toLowerCase();
+  const createPredefinedItem = useCallback(item => {
+    if (typeof item === 'number') {
+      // number => N days ago
+      return {
+        key: `daysago_${item}`,
+        label: `-${item}d`,
+        getDate: () => {
+          const d = new Date();
+          d.setHours(0, 0, 0, 0);
+          d.setDate(d.getDate() - item);
+          return d;
+        }
+      };
+    }
+    const str = normalizeLabel(item);
+    if (str === 'today') {
+      return {
+        key: 'today',
+        label: 'Today',
+        getDate: () => {
+          const d = new Date();
+          d.setHours(0, 0, 0, 0);
+          return d;
+        }
+      };
+    }
+    if (str === 'yesterday') {
+      return {
+        key: 'yesterday',
+        label: 'Yesterday',
+        getDate: () => {
+          const d = new Date();
+          d.setHours(0, 0, 0, 0);
+          d.setDate(d.getDate() - 1);
+          return d;
+        }
+      };
+    }
+    if (str === 'lastweek') {
+      return {
+        key: 'lastweek',
+        label: 'Last week (Mon)',
+        getDate: () => {
+          // Monday of previous week
+          const d = new Date();
+          d.setHours(0, 0, 0, 0);
+          const day = d.getDay(); // 0 Sun..6 Sat
+          const mondayOffset = day === 0 ? -6 : 1 - day; // days to monday this week
+          d.setDate(d.getDate() + mondayOffset - 7); // previous week's Monday
+          return d;
+        }
+      };
+    }
+    if (str === 'lastmonth') {
+      return {
+        key: 'lastmonth',
+        label: 'First day last month',
+        getDate: () => {
+          const d = new Date();
+          d.setHours(0, 0, 0, 0);
+          d.setMonth(d.getMonth() - 1, 1);
+          return d;
+        }
+      };
+    }
+    if (str === 'thismonth') {
+      return {
+        key: 'thismonth',
+        label: 'First day this month',
+        getDate: () => {
+          const d = new Date();
+          d.setHours(0, 0, 0, 0);
+          d.setDate(1);
+          return d;
+        }
+      };
+    }
+    if (str === 'lastyear') {
+      return {
+        key: 'lastyear',
+        label: 'Jan 1 last year',
+        getDate: () => {
+          const d = new Date();
+          d.setHours(0, 0, 0, 0);
+          d.setFullYear(d.getFullYear() - 1, 0, 1);
+          return d;
+        }
+      };
+    }
+    return {
+      key: str,
+      label: item,
+      getDate: () => {
+        const d = new Date();
+        d.setHours(0, 0, 0, 0);
+        return d;
+      }
+    };
+  }, []);
+  const PREDEFINED = useMemo(() => predefinedRanges.map(createPredefinedItem), [predefinedRanges, createPredefinedItem]);
+  const [selectedPredefined, setSelectedPredefined] = useState("");
+  useEffect(() => {
+    if (open && dropdownRef.current) {
+      const rect = dropdownRef.current.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const newPosition = {
+        left: '0',
+        top: '110%'
+      };
+      if (rect.right > viewportWidth - 10) newPosition.right = 0, delete newPosition.left; // align right
+      if (rect.bottom > viewportHeight - 10) newPosition.top = 'auto', newPosition.bottom = '110%';
+      setDropdownPosition(newPosition);
+    }
+  }, [open]);
+
+  // Calendar month state (always show month of selected value; allow navigation)
+  const selectedDate = useMemo(() => value ? new Date(value) : null, [value]);
+  const [monthCursor, setMonthCursor] = useState(() => {
+    const d = selectedDate || new Date();
+    return new Date(d.getFullYear(), d.getMonth(), 1, 0, 0, 0, 0);
+  });
+  // Keep monthCursor in sync when selected date changes externally
+  useEffect(() => {
+    if (selectedDate) {
+      setMonthCursor(new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1));
+    }
+    // Match predefined
+    if (selectedDate) {
+      const ts = selectedDate.getTime();
+      for (let i = 0; i < PREDEFINED.length; i++) {
+        const d = PREDEFINED[i].getDate();
+        if (d.getTime() === ts) {
+          setSelectedPredefined(String(i));
+          return;
+        }
+      }
+      setSelectedPredefined("");
+    } else {
+      setSelectedPredefined("");
+    }
+  }, [value, selectedDate, PREDEFINED]);
+
+  // Build calendar days (6 weeks grid)
+  const buildDays = () => {
+    const startOfMonth = new Date(monthCursor.getFullYear(), monthCursor.getMonth(), 1);
+    const dayOfWeek = startOfMonth.getDay(); // 0 Sun ... 6 Sat
+    // We start at Sunday of the week containing the 1st
+    const firstGridDate = new Date(startOfMonth);
+    firstGridDate.setDate(startOfMonth.getDate() - dayOfWeek);
+    const days = [];
+    for (let i = 0; i < 42; i++) {
+      // 6 weeks
+      const d = new Date(firstGridDate);
+      d.setDate(firstGridDate.getDate() + i);
+      days.push(d);
+    }
+    return days;
+  };
+  const days = buildDays();
+
+  // Update URL param
+  const setUrlParam = useCallback(val => {
+    if (!paramKey) return;
+    const params = new URLSearchParams(window.location.search);
+    let ts = val;
+    if (val && typeof val === "string" && !/^[0-9]+$/.test(val)) {
+      const d = new Date(val);
+      ts = d.getTime();
+    }
+    if (ts && String(ts).length > 0 && !isNaN(Number(ts))) params.set(paramKey, String(ts));else params.delete(paramKey);
+    const newUrl = window.location.pathname + (params.toString() ? `?${params.toString()}` : "");
+    window.history.replaceState({}, "", newUrl);
+  }, [paramKey]);
+
+  // Sync from URL
+  useEffect(() => {
+    if (!paramKey || typeof controlledValue !== 'undefined') return;
+    const syncFromUrl = () => {
+      const params = new URLSearchParams(window.location.search);
+      const urlVal = params.get(paramKey);
+      if (urlVal) {
+        const str = toInputString(urlVal);
+        setValue(prev => prev !== str ? str : prev);
+        if (onChange && str !== controlledValue) onChange(urlVal);
+      }
+    };
+    syncFromUrl();
+    window.addEventListener('popstate', syncFromUrl);
+    const patchHistory = type => {
+      const orig = window.history[type];
+      window.history[type] = function () {
+        const rv = orig.apply(this, arguments);
+        window.dispatchEvent(new Event(type));
+        return rv;
+      };
+    };
+    patchHistory('pushState');
+    patchHistory('replaceState');
+    window.addEventListener('pushState', syncFromUrl);
+    window.addEventListener('replaceState', syncFromUrl);
+    return () => {
+      window.removeEventListener('popstate', syncFromUrl);
+      window.removeEventListener('pushState', syncFromUrl);
+      window.removeEventListener('replaceState', syncFromUrl);
+    };
+  }, [paramKey, controlledValue, onChange, toInputString]);
+
+  // Controlled value sync
+  useEffect(() => {
+    if (typeof controlledValue !== 'undefined') setValue(controlledValue);
+  }, [controlledValue]);
+
+  // Formatting display (similar to RangePicker)
+  const formatDisplay = () => {
+    if (!value) return "";
+    const d = new Date(value);
+    if (isNaN(d.getTime())) return "";
+    const actualDateFormat = dateFormat || (time ? "YYYY-MM-DD" : "DD-MM-YYYY");
+    const yyyy = d.getFullYear();
+    const mm = String(d.getMonth() + 1).padStart(2, '0');
+    const dd = String(d.getDate()).padStart(2, '0');
+    let dateStr = actualDateFormat.replace('YYYY', yyyy).replace('MM', mm).replace('DD', dd);
+    if (time) {
+      const actualTimeFormat = timeFormat || 'HH:mm';
+      const hh = String(d.getHours()).padStart(2, '0');
+      const min = String(d.getMinutes()).padStart(2, '0');
+      const timeStr = actualTimeFormat.replace('HH', hh).replace('mm', min);
+      return `${dateStr} ${timeStr}`;
+    }
+    return dateStr;
+  };
+  const applySelection = d => {
+    const dt = new Date(d);
+    if (time && timeStart && !value) {
+      // apply timeStart if initial selection
+      const [h, m] = timeStart.split(":");
+      dt.setHours(Number(h), Number(m), 0, 0);
+    }
+    const str = toInputString(dt.getTime());
+    if (typeof controlledValue === 'undefined') setValue(str);
+    setUrlParam(str);
+    onChange?.(str);
+  };
+  const handlePredefinedClick = idx => {
+    const item = PREDEFINED[idx];
+    const d = item.getDate();
+    if (time && timeStart) {
+      const [h, m] = (timeStart || "00:00").split(":");
+      d.setHours(Number(h), Number(m), 0, 0);
+    }
+    applySelection(d);
+    setSelectedPredefined(String(idx));
+  };
+  const handleDayClick = day => {
+    applySelection(day);
+  };
+  const handleTimeChange = e => {
+    const t = e.target.value; // HH:mm
+    if (!value) return;
+    const d = new Date(value);
+    const [h, m] = t.split(":");
+    d.setHours(Number(h), Number(m), 0, 0);
+    const str = toInputString(d.getTime());
+    if (typeof controlledValue === 'undefined') setValue(str);
+    setUrlParam(str);
+    onChange?.(str);
+  };
+  const handleClear = () => {
+    if (typeof controlledValue === 'undefined') setValue("");
+    setUrlParam("");
+    onChange?.("");
+  };
+
+  // Outside click close
+  useEffect(() => {
+    if (!open) return;
+    const onClick = e => {
+      if (!e.target.closest('.datetime-input-dropdown')) setOpen(false);
+    };
+    window.addEventListener('mousedown', onClick);
+    return () => window.removeEventListener('mousedown', onClick);
+  }, [open]);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: `datetime-input-wrapper ${className}`,
+    style: {
+      position: 'relative',
+      display: 'inline-block',
+      ...style
+    }
+  }, rest), /*#__PURE__*/React__default.createElement("div", {
+    className: "basic-input",
+    onClick: () => !disabled && setOpen(o => !o),
+    style: {
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      padding: '6px 8px',
+      minWidth: 180,
+      userSelect: 'none',
+      position: 'relative'
+    },
+    "data-timestart": timeStart || undefined,
+    "data-timezone": timezone || undefined,
+    "data-timeformat": timeFormat || undefined,
+    "data-dateformat": dateFormat || undefined
+  }, formatDisplay() || placeholder, value && /*#__PURE__*/React__default.createElement("span", {
+    onClick: e => {
+      e.stopPropagation();
+      handleClear();
+    },
+    title: "Clear date",
+    style: {
+      position: 'absolute',
+      right: 8,
+      top: '50%',
+      transform: 'translateY(-50%)',
+      fontSize: 12,
+      cursor: 'pointer'
+    }
+  }, "\u2716")), open && /*#__PURE__*/React__default.createElement("div", {
+    ref: dropdownRef,
+    className: "datetime-input-dropdown range-picker-dropdown" // reuse class for styling consistency
+    ,
+    style: {
+      position: 'absolute',
+      zIndex: 50,
+      background: '#fff',
+      border: '1px solid #d9d9d9',
+      borderRadius: 4,
+      boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+      padding: 12,
+      width: 320,
+      ...dropdownPosition
+    }
+  }, PREDEFINED.length > 0 && /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      gap: 6,
+      marginBottom: 8
+    }
+  }, PREDEFINED.map((p, i) => {
+    const active = selectedPredefined === String(i);
+    return /*#__PURE__*/React__default.createElement("button", {
+      key: p.key,
+      type: "button",
+      onClick: () => handlePredefinedClick(i),
+      className: "basic-btn",
+      style: {
+        padding: '4px 8px',
+        fontSize: 12,
+        background: active ? '#1677ff' : '#fff',
+        color: active ? '#fff' : '#000',
+        border: active ? '1px solid #1677ff' : '1px solid #d9d9d9'
+      }
+    }, p.label);
+  })), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: 8
+    }
+  }, /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    className: "basic-btn",
+    onClick: () => setMonthCursor(new Date(monthCursor.getFullYear(), monthCursor.getMonth() - 1, 1))
+  }, "\u2039"), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      fontWeight: 600
+    }
+  }, monthCursor.toLocaleString(undefined, {
+    month: 'long'
+  }), " ", monthCursor.getFullYear()), /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    className: "basic-btn",
+    onClick: () => setMonthCursor(new Date(monthCursor.getFullYear(), monthCursor.getMonth() + 1, 1))
+  }, "\u203A")), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(7, 1fr)',
+      fontSize: 12,
+      marginBottom: 4,
+      opacity: 0.8
+    }
+  }, ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map(d => /*#__PURE__*/React__default.createElement("div", {
+    key: d,
+    style: {
+      textAlign: 'center'
+    }
+  }, d))), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(7, 1fr)',
+      gap: 2
+    }
+  }, days.map(d => {
+    const isCurrentMonth = d.getMonth() === monthCursor.getMonth();
+    const isSelected = selectedDate && d.getFullYear() === selectedDate.getFullYear() && d.getMonth() === selectedDate.getMonth() && d.getDate() === selectedDate.getDate();
+    const isToday = (() => {
+      const t = new Date();
+      return t.getFullYear() === d.getFullYear() && t.getMonth() === d.getMonth() && t.getDate() === d.getDate();
+    })();
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: d.toISOString(),
+      onClick: () => handleDayClick(d),
+      style: {
+        textAlign: 'center',
+        padding: '6px 0',
+        cursor: 'pointer',
+        fontSize: 12,
+        borderRadius: 4,
+        background: isSelected ? '#1677ff' : isToday ? '#e6f4ff' : 'transparent',
+        color: isSelected ? '#fff' : isCurrentMonth ? '#000' : '#aaa',
+        border: isSelected ? '1px solid #1677ff' : '1px solid transparent'
+      }
+    }, d.getDate());
+  })), time && /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      marginTop: 10
+    }
+  }, /*#__PURE__*/React__default.createElement("label", {
+    style: {
+      fontSize: 12,
+      display: 'block',
+      marginBottom: 4
+    }
+  }, "Time:"), /*#__PURE__*/React__default.createElement("input", {
+    type: "time",
+    value: (() => {
+      if (!value) return '';
+      const d = new Date(value);
+      const hh = String(d.getHours()).padStart(2, '0');
+      const mm = String(d.getMinutes()).padStart(2, '0');
+      return `${hh}:${mm}`;
+    })(),
+    onChange: handleTimeChange,
+    className: "basic-input",
+    style: {
+      width: '100%'
+    }
+  })), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginTop: 12
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 8
+    }
+  }, /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    className: "basic-btn",
+    onClick: () => {
+      handleClear();
+    }
+  }, "Clear"), /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    className: "basic-btn",
+    onClick: () => {
+      setOpen(false);
+    }
+  }, "OK")), /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    className: "basic-btn",
+    onClick: () => {
+      handlePredefinedClick(PREDEFINED.findIndex(p => p.key === 'today'));
+    }
+  }, "Today"))));
+}
+DateTimeInput.propTypes = {
+  pushUrlParamObj: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  time: PropTypes.bool,
+  timeStart: PropTypes.string,
+  timezone: PropTypes.string,
+  timeFormat: PropTypes.string,
+  dateFormat: PropTypes.string,
+  placeholder: PropTypes.string,
+  disabled: PropTypes.bool,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  predefinedRanges: PropTypes.array
+};
+
+/**
+ * CalendarRangePicker - Custom calendar UI for selecting date ranges
+ * Props:
+ *   startDate: Date | null
+ *   endDate: Date | null
+ *   onChange: (startDate, endDate) => void
+ *   time: boolean - if true, show time selectors
+ *   timeStart, timeEnd: default times for start/end
+ */
+function CalendarRangePicker({
+  startDate,
+  endDate,
+  onChange,
+  time = false,
+  timeStart = "00:00",
+  timeEnd = "23:59"
+}) {
+  // Current view months (show 2 months)
+  const [leftMonth, setLeftMonth] = useState(() => {
+    const d = startDate ? new Date(startDate) : new Date();
+    return new Date(d.getFullYear(), d.getMonth(), 1);
+  });
+  const rightMonth = new Date(leftMonth.getFullYear(), leftMonth.getMonth() + 1, 1);
+
+  // Update leftMonth when startDate changes (e.g., when selecting predefined ranges)
+  React__default.useEffect(() => {
+    if (startDate) {
+      const d = new Date(startDate);
+      setLeftMonth(new Date(d.getFullYear(), d.getMonth(), 1));
+    }
+  }, [startDate]);
+
+  // Hover state for preview
+  const [hoverDate, setHoverDate] = useState(null);
+
+  // Navigate months
+  const prevMonth = () => setLeftMonth(new Date(leftMonth.getFullYear(), leftMonth.getMonth() - 1, 1));
+  const nextMonth = () => setLeftMonth(new Date(leftMonth.getFullYear(), leftMonth.getMonth() + 1, 1));
+
+  // Handle date click
+  const handleDateClick = date => {
+    const d = new Date(date);
+    if (time && startDate && timeStart) {
+      const [h, m] = timeStart.split(":");
+      d.setHours(Number(h), Number(m), 0, 0);
+    }
+    if (!startDate || startDate && endDate) {
+      // Start new range
+      onChange(d, null);
+    } else {
+      // Complete range
+      if (d < startDate) {
+        onChange(d, startDate);
+      } else {
+        const endD = new Date(d);
+        if (time && timeEnd) {
+          const [h, m] = timeEnd.split(":");
+          endD.setHours(Number(h), Number(m), 59, 999);
+        }
+        onChange(startDate, endD);
+      }
+    }
+  };
+
+  // Check if date is in range
+  const isInRange = date => {
+    if (!startDate) return false;
+    const check = endDate || hoverDate;
+    if (!check) return false;
+    const d = new Date(date).setHours(0, 0, 0, 0);
+    const s = new Date(startDate).setHours(0, 0, 0, 0);
+    const e = new Date(check).setHours(0, 0, 0, 0);
+    return d >= Math.min(s, e) && d <= Math.max(s, e);
+  };
+  const isStartDate = date => {
+    if (!startDate) return false;
+    return new Date(date).setHours(0, 0, 0, 0) === new Date(startDate).setHours(0, 0, 0, 0);
+  };
+  const isEndDate = date => {
+    if (!endDate) return false;
+    return new Date(date).setHours(0, 0, 0, 0) === new Date(endDate).setHours(0, 0, 0, 0);
+  };
+  const isToday = date => {
+    const today = new Date();
+    return date.getDate() === today.getDate() && date.getMonth() === today.getMonth() && date.getFullYear() === today.getFullYear();
+  };
+
+  // Render a single month
+  const renderMonth = month => {
+    const year = month.getFullYear();
+    const monthIdx = month.getMonth();
+    const firstDay = new Date(year, monthIdx, 1);
+    const lastDay = new Date(year, monthIdx + 1, 0);
+    const startWeekday = firstDay.getDay(); // 0 = Sunday
+    const daysInMonth = lastDay.getDate();
+    const days = [];
+    // Padding days from previous month
+    const prevMonthLastDay = new Date(year, monthIdx, 0).getDate();
+    for (let i = startWeekday - 1; i >= 0; i--) {
+      days.push({
+        date: new Date(year, monthIdx - 1, prevMonthLastDay - i),
+        otherMonth: true
+      });
+    }
+    // Current month days
+    for (let d = 1; d <= daysInMonth; d++) {
+      days.push({
+        date: new Date(year, monthIdx, d),
+        otherMonth: false
+      });
+    }
+    // Padding days from next month
+    const remaining = 42 - days.length; // 6 rows * 7 days
+    for (let d = 1; d <= remaining; d++) {
+      days.push({
+        date: new Date(year, monthIdx + 1, d),
+        otherMonth: true
+      });
+    }
+    return /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        flex: 1,
+        padding: "0 8px"
+      }
+    }, /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        textAlign: "center",
+        fontWeight: "bold",
+        marginBottom: 12,
+        fontSize: 14
+      }
+    }, month.toLocaleDateString("en-US", {
+      month: "short",
+      year: "numeric"
+    })), /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(7, 1fr)",
+        gap: 2
+      }
+    }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(day => /*#__PURE__*/React__default.createElement("div", {
+      key: day,
+      style: {
+        textAlign: "center",
+        fontSize: 11,
+        color: "#666",
+        fontWeight: 600,
+        padding: "4px 0"
+      }
+    }, day)), days.map(({
+      date,
+      otherMonth
+    }, idx) => {
+      const inRange = isInRange(date);
+      const isStart = isStartDate(date);
+      const isEnd = isEndDate(date);
+      const isCurrentDay = isToday(date);
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: idx,
+        onClick: () => !otherMonth && handleDateClick(date),
+        onMouseEnter: () => !otherMonth && setHoverDate(date),
+        style: {
+          textAlign: "center",
+          padding: "8px 4px",
+          fontSize: 13,
+          cursor: otherMonth ? "default" : "pointer",
+          color: otherMonth ? "#ccc" : isStart || isEnd ? "#fff" : isCurrentDay ? "#1d4ed8" : "#333",
+          fontWeight: isStart || isEnd || isCurrentDay ? "600" : "normal",
+          background: isStart || isEnd ? "#1d4ed8" : inRange ? "#e0f2fe" : "transparent",
+          borderRadius: isStart || isEnd ? "50%" : inRange ? 0 : 4,
+          border: isCurrentDay && !isStart && !isEnd ? "1px solid #1d4ed8" : "none",
+          userSelect: "none",
+          transition: "all 0.15s ease"
+        },
+        onMouseOver: e => {
+          if (!otherMonth && !isStart && !isEnd) {
+            e.currentTarget.style.background = inRange ? "#bfdbfe" : "#f3f4f6";
+          }
+        },
+        onMouseOut: e => {
+          if (!otherMonth && !isStart && !isEnd) {
+            e.currentTarget.style.background = inRange ? "#e0f2fe" : "transparent";
+          }
+        }
+      }, date.getDate());
+    })));
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      minWidth: 560
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginBottom: 16
+    }
+  }, /*#__PURE__*/React__default.createElement("button", {
+    onClick: prevMonth,
+    style: {
+      background: "none",
+      border: "none",
+      fontSize: 20,
+      cursor: "pointer",
+      padding: "4px 8px",
+      color: "#333"
+    }
+  }, "\u2039\u2039"), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      fontWeight: "600",
+      fontSize: 14,
+      color: "#333"
+    }
+  }, leftMonth.toLocaleDateString("en-US", {
+    month: "long",
+    year: "numeric"
+  }), " \u2013 ", rightMonth.toLocaleDateString("en-US", {
+    month: "long",
+    year: "numeric"
+  })), /*#__PURE__*/React__default.createElement("button", {
+    onClick: nextMonth,
+    style: {
+      background: "none",
+      border: "none",
+      fontSize: 20,
+      cursor: "pointer",
+      padding: "4px 8px",
+      color: "#333"
+    }
+  }, "\u203A\u203A")), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: "flex",
+      gap: 16
+    },
+    onMouseLeave: () => setHoverDate(null)
+  }, renderMonth(leftMonth), renderMonth(rightMonth)));
+}
+CalendarRangePicker.propTypes = {
+  startDate: PropTypes.instanceOf(Date),
+  endDate: PropTypes.instanceOf(Date),
+  onChange: PropTypes.func.isRequired,
+  time: PropTypes.bool,
+  timeStart: PropTypes.string,
+  timeEnd: PropTypes.string
+};
+
+/**
+ * RangePicker - a reusable date or datetime-local range picker with URL param sync
+ * Props:
+ *   pushUrlParamObj: string | false - URL param key to sync value (will store as start~end)
+ *   value: [start, end] controlled value (optional)
+ *   onChange: ([start, end]) => void (optional)
+ *   time: boolean - if true, use datetime-local, else date
+ *   timeStart: string (for default start time, e.g. "00:00")
+ *   timeEnd: string (for default end time, e.g. "23:59")
+ *   timezone, timeFormat, dateFormat, placeholder, required, disabled, className, style, min, max, ...rest
+ */
+// Helper to get date string in yyyy-MM-dd or yyyy-MM-ddTHH:mm
+function formatDate(date, time = false) {
+  const yyyy = date.getFullYear();
+  const mm = String(date.getMonth() + 1).padStart(2, '0');
+  const dd = String(date.getDate()).padStart(2, '0');
+  if (time) {
+    const hh = String(date.getHours()).padStart(2, '0');
+    const min = String(date.getMinutes()).padStart(2, '0');
+    return `${yyyy}-${mm}-${dd}T${hh}:${min}`;
+  }
+  return `${yyyy}-${mm}-${dd}`;
+}
+const PREDEFINED_RANGES = [{
+  label: 'Today',
+  getRange: time => {
+    const now = new Date();
+    const start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);
+    const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999);
+    return [formatDate(start, time), formatDate(end, time)];
+  }
+}, {
+  label: 'This week',
+  getRange: time => {
+    const now = new Date();
+    const day = now.getDay() || 7;
+    const start = new Date(now);
+    start.setDate(now.getDate() - day + 1);
+    start.setHours(0, 0, 0, 0);
+    const end = new Date(start);
+    end.setDate(start.getDate() + 6);
+    end.setHours(23, 59, 59, 999);
+    return [formatDate(start, time), formatDate(end, time)];
+  }
+}, {
+  label: 'Last 7 days',
+  getRange: time => {
+    const now = new Date();
+    const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999);
+    const start = new Date(end);
+    start.setDate(end.getDate() - 6);
+    start.setHours(0, 0, 0, 0);
+    return [formatDate(start, time), formatDate(end, time)];
+  }
+}, {
+  label: 'This month',
+  getRange: time => {
+    const now = new Date();
+    const start = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0, 0);
+    const end = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59, 999);
+    return [formatDate(start, time), formatDate(end, time)];
+  }
+}, {
+  label: 'Last 30 days',
+  getRange: time => {
+    const now = new Date();
+    const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999);
+    const start = new Date(end);
+    start.setDate(end.getDate() - 29);
+    start.setHours(0, 0, 0, 0);
+    return [formatDate(start, time), formatDate(end, time)];
+  }
+}];
+
+// Helper to create predefined range from simple format
+const createRangeFromSimple = (item, time) => {
+  // If it's a number, treat as "last N days"
+  if (typeof item === 'number') {
+    return {
+      label: `Last ${item} days`,
+      getRange: time => {
+        const now = new Date();
+        const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999);
+        const start = new Date(end);
+        start.setDate(end.getDate() - (item - 1));
+        start.setHours(0, 0, 0, 0);
+        return [formatDate(start, time), formatDate(end, time)];
+      }
+    };
+  }
+
+  // If it's a string, map to predefined functions
+  const lowerItem = item.toLowerCase();
+  const rangeMap = {
+    'today': {
+      label: 'Today',
+      getRange: time => {
+        const now = new Date();
+        const start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);
+        const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999);
+        return [formatDate(start, time), formatDate(end, time)];
+      }
+    },
+    'yesterday': {
+      label: 'Yesterday',
+      getRange: time => {
+        const now = new Date();
+        const start = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1, 0, 0, 0, 0);
+        const end = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1, 23, 59, 59, 999);
+        return [formatDate(start, time), formatDate(end, time)];
+      }
+    },
+    'thisweek': {
+      label: 'This week',
+      getRange: time => {
+        const now = new Date();
+        const day = now.getDay() || 7;
+        const start = new Date(now);
+        start.setDate(now.getDate() - day + 1);
+        start.setHours(0, 0, 0, 0);
+        const end = new Date(start);
+        end.setDate(start.getDate() + 6);
+        end.setHours(23, 59, 59, 999);
+        return [formatDate(start, time), formatDate(end, time)];
+      }
+    },
+    'lastweek': {
+      label: 'Last week',
+      getRange: time => {
+        const now = new Date();
+        const day = now.getDay() || 7;
+        const start = new Date(now);
+        start.setDate(now.getDate() - day - 6);
+        start.setHours(0, 0, 0, 0);
+        const end = new Date(start);
+        end.setDate(start.getDate() + 6);
+        end.setHours(23, 59, 59, 999);
+        return [formatDate(start, time), formatDate(end, time)];
+      }
+    },
+    'thismonth': {
+      label: 'This month',
+      getRange: time => {
+        const now = new Date();
+        const start = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0, 0);
+        const end = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59, 999);
+        return [formatDate(start, time), formatDate(end, time)];
+      }
+    },
+    'lastmonth': {
+      label: 'Last month',
+      getRange: time => {
+        const now = new Date();
+        const start = new Date(now.getFullYear(), now.getMonth() - 1, 1, 0, 0, 0, 0);
+        const end = new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59, 999);
+        return [formatDate(start, time), formatDate(end, time)];
+      }
+    },
+    'thisyear': {
+      label: 'This year',
+      getRange: time => {
+        const now = new Date();
+        const start = new Date(now.getFullYear(), 0, 1, 0, 0, 0, 0);
+        const end = new Date(now.getFullYear(), 11, 31, 23, 59, 59, 999);
+        return [formatDate(start, time), formatDate(end, time)];
+      }
+    },
+    'lastyear': {
+      label: 'Last year',
+      getRange: time => {
+        const now = new Date();
+        const start = new Date(now.getFullYear() - 1, 0, 1, 0, 0, 0, 0);
+        const end = new Date(now.getFullYear() - 1, 11, 31, 23, 59, 59, 999);
+        return [formatDate(start, time), formatDate(end, time)];
+      }
+    }
+  };
+  return rangeMap[lowerItem] || null;
+};
+function RangePicker({
+  pushUrlParamObj = false,
+  value: controlledValue,
+  onChange,
+  time = false,
+  timeStart,
+  timeEnd,
+  timezone,
+  timeFormat,
+  dateFormat,
+  placeholder = "",
+  required = false,
+  disabled = false,
+  className = "",
+  style = {},
+  min,
+  max,
+  predefinedRanges = PREDEFINED_RANGES,
+  ...rest
+}) {
+  const paramKey = pushUrlParamObj || null;
+
+  // Convert simple predefinedRanges to full format
+  const processedRanges = Array.isArray(predefinedRanges) ? predefinedRanges.map(item => {
+    // If it's already an object with label and getRange, use it as-is
+    if (typeof item === 'object' && item.label && item.getRange) {
+      return item;
+    }
+    // Otherwise, convert from simple format
+    return createRangeFromSimple(item);
+  }).filter(Boolean) : [];
+
+  // Helper to format default value
+  const getDefault = which => {
+    if (time) {
+      const today = new Date();
+      const yyyy = today.getFullYear();
+      const mm = String(today.getMonth() + 1).padStart(2, '0');
+      const dd = String(today.getDate()).padStart(2, '0');
+      if (which === 'start' && timeStart) return `${yyyy}-${mm}-${dd}T${timeStart}`;
+      if (which === 'end' && timeEnd) return `${yyyy}-${mm}-${dd}T${timeEnd}`;
+      // fallback to now
+      const now = new Date();
+      const hh = String(now.getHours()).padStart(2, '0');
+      const min = String(now.getMinutes()).padStart(2, '0');
+      return `${yyyy}-${mm}-${dd}T${hh}:${min}`;
+    }
+    return "";
+  };
+  // Initial state
+  const toInputString = ts => {
+    if (!ts) return "";
+    const d = new Date(Number(ts));
+    if (isNaN(d.getTime())) return "";
+    if (time) {
+      const yyyy = d.getFullYear();
+      const mm = String(d.getMonth() + 1).padStart(2, '0');
+      const dd = String(d.getDate()).padStart(2, '0');
+      const hh = String(d.getHours()).padStart(2, '0');
+      const min = String(d.getMinutes()).padStart(2, '0');
+      return `${yyyy}-${mm}-${dd}T${hh}:${min}`;
+    } else {
+      const yyyy = d.getFullYear();
+      const mm = String(d.getMonth() + 1).padStart(2, '0');
+      const dd = String(d.getDate()).padStart(2, '0');
+      return `${yyyy}-${mm}-${dd}`;
+    }
+  };
+  const [range, setRange] = useState(() => {
+    if (controlledValue && Array.isArray(controlledValue)) return controlledValue;
+    if (!paramKey) return [getDefault('start'), getDefault('end')];
+    const params = new URLSearchParams(typeof window !== 'undefined' ? window.location.search : '');
+    const urlVal = params.get(paramKey);
+    if (urlVal && urlVal.includes('~')) {
+      const [start, end] = urlVal.split('~');
+      return [toInputString(start), toInputString(end)];
+    }
+    return [getDefault('start'), getDefault('end')];
+  });
+  // Track selected predefined range
+  const [selectedRange, setSelectedRange] = useState(() => {
+    // Initialize with matching predefined range if any
+    if (!paramKey) return "";
+    const params = new URLSearchParams(typeof window !== 'undefined' ? window.location.search : '');
+    const urlVal = params.get(paramKey);
+    if (urlVal && urlVal.includes('~')) {
+      const [start, end] = urlVal.split('~');
+      // Check if this matches any predefined range
+      for (let i = 0; i < PREDEFINED_RANGES.length; ++i) {
+        const [pStart, pEnd] = PREDEFINED_RANGES[i].getRange(time);
+        if (new Date(pStart).getTime() === Number(start) && new Date(pEnd).getTime() === Number(end)) {
+          return String(i);
+        }
+      }
+    }
+    return "";
+  });
+
+  // Helper to check if a range matches a predefined range
+  const findMatchingPredefined = (start, end) => {
+    for (let i = 0; i < PREDEFINED_RANGES.length; ++i) {
+      const [pStart, pEnd] = PREDEFINED_RANGES[i].getRange(time);
+      // Compare as timestamps for precision
+      if (new Date(pStart).getTime() === new Date(start).getTime() && new Date(pEnd).getTime() === new Date(end).getTime()) {
+        return String(i);
+      }
+    }
+    return "";
+  };
+
+  // Sync with URL param on mount and popstate
+  useEffect(() => {
+    if (!paramKey || controlledValue && Array.isArray(controlledValue)) return;
+    const syncFromUrl = () => {
+      const params = new URLSearchParams(window.location.search);
+      const urlVal = params.get(paramKey);
+      if (urlVal && urlVal.includes('~')) {
+        const [start, end] = urlVal.split('~');
+        setRange(prev => prev[0] !== toInputString(start) || prev[1] !== toInputString(end) ? [toInputString(start), toInputString(end)] : prev);
+        if (onChange && (range[0] !== toInputString(start) || range[1] !== toInputString(end))) onChange([start, end]);
+        // Set dropdown if matches predefined
+        const matchIdx = findMatchingPredefined(Number(start), Number(end));
+        setSelectedRange(matchIdx);
+      } else {
+        setSelectedRange("");
+      }
+    };
+    syncFromUrl();
+    window.addEventListener("popstate", syncFromUrl);
+    // Listen for pushState/replaceState (programmatic changes)
+    const patchHistory = type => {
+      const orig = window.history[type];
+      window.history[type] = function () {
+        const rv = orig.apply(this, arguments);
+        window.dispatchEvent(new Event(type));
+        return rv;
+      };
+    };
+    patchHistory('pushState');
+    patchHistory('replaceState');
+    window.addEventListener('pushState', syncFromUrl);
+    window.addEventListener('replaceState', syncFromUrl);
+    return () => {
+      window.removeEventListener("popstate", syncFromUrl);
+      window.removeEventListener('pushState', syncFromUrl);
+      window.removeEventListener('replaceState', syncFromUrl);
+    };
+  }, [paramKey, onChange]);
+
+  // If controlled, update local value when prop changes
+  useEffect(() => {
+    if (controlledValue && Array.isArray(controlledValue)) setRange(controlledValue);
+  }, [controlledValue]);
+
+  // Update URL param
+  const setUrlParam = useCallback(vals => {
+    if (!paramKey) return;
+    const params = new URLSearchParams(window.location.search);
+    // Convert input strings to timestamps
+    const toTs = v => {
+      if (!v) return "";
+      if (/^[0-9]+$/.test(v)) return v;
+      const d = new Date(v);
+      return d.getTime();
+    };
+    if (vals[0] && vals[1]) {
+      params.set(paramKey, `${toTs(vals[0])}~${toTs(vals[1])}`);
+    } else {
+      params.delete(paramKey);
+    }
+    const newUrl = window.location.pathname + (params.toString() ? `?${params.toString()}` : "");
+    window.history.replaceState({}, "", newUrl);
+  }, [paramKey]);
+  const handleClear = () => {
+    if (!controlledValue) setRange(["", ""]);
+    setUrlParam(["", ""]);
+    onChange?.(["", ""]);
+  };
+
+  // Show/hide dropdown for range selection
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [dropdownPosition, setDropdownPosition] = useState({
+    top: "110%",
+    left: 0,
+    right: 'auto'
+  });
+
+  // Calculate dropdown position to prevent overflow
+  const dropdownRef = React__default.useRef(null);
+  React__default.useEffect(() => {
+    if (!dropdownOpen || !dropdownRef.current) return;
+    const dropdown = dropdownRef.current;
+    const rect = dropdown.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    let newPosition = {
+      top: "110%",
+      left: 0,
+      right: 'auto'
+    };
+
+    // Check if dropdown goes beyond right edge
+    if (rect.right > viewportWidth - 10) {
+      newPosition.right = 0;
+      newPosition.left = 'auto';
+    }
+
+    // Check if dropdown goes beyond bottom edge
+    if (rect.bottom > viewportHeight - 10) {
+      newPosition.top = 'auto';
+      newPosition.bottom = "110%";
+    }
+    setDropdownPosition(newPosition);
+  }, [dropdownOpen]);
+
+  // Format range for display using dateFormat and timeFormat props
+  const formatDisplay = () => {
+    if (!range[0] && !range[1]) return {
+      start: "",
+      end: ""
+    };
+    const fmt = v => {
+      if (!v) return "";
+      const d = new Date(v);
+      if (isNaN(d.getTime())) return "";
+
+      // Parse dateFormat (default: DD-MM-YYYY)
+      const actualDateFormat = dateFormat || (time ? "YYYY-MM-DD" : "DD-MM-YYYY");
+      const yyyy = d.getFullYear();
+      const mm = String(d.getMonth() + 1).padStart(2, '0');
+      const dd = String(d.getDate()).padStart(2, '0');
+      let dateStr = actualDateFormat.replace('YYYY', yyyy).replace('MM', mm).replace('DD', dd);
+      if (time) {
+        // Parse timeFormat (default: HH:mm)
+        const actualTimeFormat = timeFormat || "HH:mm";
+        const hh = String(d.getHours()).padStart(2, '0');
+        const min = String(d.getMinutes()).padStart(2, '0');
+        const timeStr = actualTimeFormat.replace('HH', hh).replace('mm', min);
+        return `${dateStr} ${timeStr}`;
+      }
+      return dateStr;
+    };
+    return {
+      start: fmt(range[0]),
+      end: fmt(range[1])
+    };
+  };
+  // Close dropdown on outside click
+  useEffect(() => {
+    if (!dropdownOpen) return;
+    const onClick = e => {
+      if (!e.target.closest('.range-picker-dropdown')) setDropdownOpen(false);
+    };
+    window.addEventListener('mousedown', onClick);
+    return () => window.removeEventListener('mousedown', onClick);
+  }, [dropdownOpen]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      position: "relative",
+      display: "inline-flex",
+      gap: 4,
+      ...style
+    },
+    className: className
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      position: "relative",
+      flex: 1
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "basic-input",
+    onClick: () => setDropdownOpen(!dropdownOpen),
+    style: {
+      cursor: "pointer",
+      background: dropdownOpen ? "#f0f8ff" : "#fff",
+      height: 34,
+      minHeight: 34,
+      width: 280,
+      border: '1px solid #ccc',
+      borderRadius: 2,
+      display: 'flex',
+      alignItems: 'center',
+      padding: '0 32px 0 8px',
+      position: 'relative',
+      fontSize: 14
+    }
+  }, /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      color: formatDisplay().start ? '#333' : '#999',
+      flex: 1
+    }
+  }, formatDisplay().start || 'Start date'), /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      padding: '0 8px',
+      color: '#999'
+    }
+  }, "\u2192"), /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      color: formatDisplay().end ? '#333' : '#999',
+      flex: 1
+    }
+  }, formatDisplay().end || 'End date'), /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      position: 'absolute',
+      right: 8,
+      top: '50%',
+      transform: 'translateY(-51%)',
+      fontSize: 16,
+      color: '#666'
+    }
+  }, "\uD83D\uDCC5")), dropdownOpen && /*#__PURE__*/React__default.createElement("div", {
+    ref: dropdownRef,
+    className: "range-picker-dropdown",
+    style: {
+      position: "absolute",
+      ...dropdownPosition,
+      background: "#fff",
+      border: "1px solid #ccc",
+      borderRadius: 4,
+      boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
+      padding: 12,
+      zIndex: 1000,
+      minWidth: 260
+    }
+  }, /*#__PURE__*/React__default.createElement(CalendarRangePicker, {
+    startDate: range[0] ? new Date(range[0]) : null,
+    endDate: range[1] ? new Date(range[1]) : null,
+    onChange: (start, end) => {
+      const toStr = d => {
+        if (!d) return "";
+        if (time) {
+          const yyyy = d.getFullYear();
+          const mm = String(d.getMonth() + 1).padStart(2, '0');
+          const dd = String(d.getDate()).padStart(2, '0');
+          const hh = String(d.getHours()).padStart(2, '0');
+          const min = String(d.getMinutes()).padStart(2, '0');
+          return `${yyyy}-${mm}-${dd}T${hh}:${min}`;
+        } else {
+          const yyyy = d.getFullYear();
+          const mm = String(d.getMonth() + 1).padStart(2, '0');
+          const dd = String(d.getDate()).padStart(2, '0');
+          return `${yyyy}-${mm}-${dd}`;
+        }
+      };
+      const newRange = [toStr(start), toStr(end)];
+      if (!controlledValue) setRange(newRange);
+      setUrlParam(newRange);
+      onChange?.(newRange);
+    },
+    time: time,
+    timeStart: timeStart,
+    timeEnd: timeEnd
+  }), processedRanges && processedRanges.length > 0 && /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      marginTop: 12,
+      paddingTop: 12,
+      borderTop: '1px solid #e5e7eb',
+      display: 'flex',
+      gap: 6,
+      flexWrap: 'wrap'
+    }
+  }, processedRanges.map((r, i) => {
+    const isActive = selectedRange === String(i);
+    return /*#__PURE__*/React__default.createElement("button", {
+      key: r.label,
+      type: "button",
+      onClick: () => {
+        const {
+          getRange
+        } = r;
+        const newRange = getRange(time);
+        if (!controlledValue) setRange(newRange);
+        setUrlParam(newRange);
+        setSelectedRange(String(i));
+        onChange?.(newRange);
+      },
+      style: {
+        padding: '4px 12px',
+        border: isActive ? '1px solid #1d4ed8' : '1px solid #d1d5db',
+        background: isActive ? '#e0f2fe' : '#fff',
+        color: isActive ? '#1d4ed8' : '#333',
+        borderRadius: 4,
+        cursor: 'pointer',
+        fontSize: 12,
+        fontWeight: isActive ? 500 : 400,
+        transition: 'all 0.15s ease'
+      }
+    }, r.label);
+  })), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      marginTop: 12,
+      textAlign: 'right',
+      borderTop: '1px solid #e5e7eb',
+      paddingTop: 12
+    }
+  }, /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    onClick: handleClear,
+    style: {
+      marginRight: 8,
+      padding: '6px 16px',
+      border: '1px solid #d1d5db',
+      background: '#fff',
+      borderRadius: 4,
+      cursor: 'pointer',
+      fontSize: 13
+    }
+  }, "Clear"), /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    onClick: () => setDropdownOpen(false),
+    style: {
+      padding: '6px 16px',
+      border: 'none',
+      background: '#1d4ed8',
+      color: '#fff',
+      borderRadius: 4,
+      cursor: 'pointer',
+      fontSize: 13,
+      fontWeight: 500
+    }
+  }, "OK")))));
+}
+RangePicker.propTypes = {
+  pushUrlParamObj: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  value: PropTypes.arrayOf(PropTypes.string),
+  onChange: PropTypes.func,
+  time: PropTypes.bool,
+  timeStart: PropTypes.string,
+  timeEnd: PropTypes.string,
+  timezone: PropTypes.string,
+  timeFormat: PropTypes.string,
+  dateFormat: PropTypes.string,
+  placeholder: PropTypes.string,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  min: PropTypes.string,
+  max: PropTypes.string,
+  predefinedRanges: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string,
+  // e.g., "today", "yesterday", "lastweek"
+  PropTypes.number,
+  // e.g., 7, 30 (last N days)
+  PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    getRange: PropTypes.func.isRequired
+  })])), PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    getRange: PropTypes.func.isRequired
+  }))])
+};
 
-export { Filters as Filter, Filters as default };
+export { CalendarRangePicker, DateTimeInput, DebounceSelect, IconInput, MultiSelectDropdown, RangePicker, SearchInput };
 //# sourceMappingURL=index.esm.js.map