@mtes-mct/monitor-ui 2.5.1 → 2.7.0

package/index.js

@@ -1,6 +1,6 @@
 import styled, { createGlobalStyle, ThemeProvider as ThemeProvider$1, css } from 'styled-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useMemo, useRef, useState, useCallback, useEffect, useReducer, forwardRef, useImperativeHandle } from 'react';
+import { useMemo, useCallback, useEffect, useReducer, useRef, useState, forwardRef, useImperativeHandle } from 'react';
 import { Dropdown as Dropdown$1, AutoComplete as AutoComplete$1, Checkbox as Checkbox$1, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, TagPicker, Radio, Input, SelectPicker } from 'rsuite';
 import { useField, useFormikContext } from 'formik';
 
@@ -89,7 +89,7 @@ const GlobalStyle = createGlobalStyle `
   body {
     font-family: Marianne, sans-serif;
     font-size: 16px;
-    line-height: 1.4;
+    line-height: 1.3846;
   }
 `;
 
@@ -333,6 +333,100 @@ function _arity(n, fn) {
   }
 }
 
+/**
+ * Internal curryN function.
+ *
+ * @private
+ * @category Function
+ * @param {Number} length The arity of the curried function.
+ * @param {Array} received An array of arguments received thus far.
+ * @param {Function} fn The function to curry.
+ * @return {Function} The curried function.
+ */
+
+function _curryN(length, received, fn) {
+  return function () {
+    var combined = [];
+    var argsIdx = 0;
+    var left = length;
+    var combinedIdx = 0;
+
+    while (combinedIdx < received.length || argsIdx < arguments.length) {
+      var result;
+
+      if (combinedIdx < received.length && (!_isPlaceholder(received[combinedIdx]) || argsIdx >= arguments.length)) {
+        result = received[combinedIdx];
+      } else {
+        result = arguments[argsIdx];
+        argsIdx += 1;
+      }
+
+      combined[combinedIdx] = result;
+
+      if (!_isPlaceholder(result)) {
+        left -= 1;
+      }
+
+      combinedIdx += 1;
+    }
+
+    return left <= 0 ? fn.apply(this, combined) : _arity(left, _curryN(length, combined, fn));
+  };
+}
+
+/**
+ * Returns a curried equivalent of the provided function, with the specified
+ * arity. The curried function has two unusual capabilities. First, its
+ * arguments needn't be provided one at a time. If `g` is `R.curryN(3, f)`, the
+ * following are equivalent:
+ *
+ *   - `g(1)(2)(3)`
+ *   - `g(1)(2, 3)`
+ *   - `g(1, 2)(3)`
+ *   - `g(1, 2, 3)`
+ *
+ * Secondly, the special placeholder value [`R.__`](#__) may be used to specify
+ * "gaps", allowing partial application of any combination of arguments,
+ * regardless of their positions. If `g` is as above and `_` is [`R.__`](#__),
+ * the following are equivalent:
+ *
+ *   - `g(1, 2, 3)`
+ *   - `g(_, 2, 3)(1)`
+ *   - `g(_, _, 3)(1)(2)`
+ *   - `g(_, _, 3)(1, 2)`
+ *   - `g(_, 2)(1)(3)`
+ *   - `g(_, 2)(1, 3)`
+ *   - `g(_, 2)(_, 3)(1)`
+ *
+ * @func
+ * @memberOf R
+ * @since v0.5.0
+ * @category Function
+ * @sig Number -> (* -> a) -> (* -> a)
+ * @param {Number} length The arity for the returned function.
+ * @param {Function} fn The function to curry.
+ * @return {Function} A new, curried function.
+ * @see R.curry
+ * @example
+ *
+ *      const sumArgs = (...args) => R.sum(args);
+ *
+ *      const curriedAddFourNumbers = R.curryN(4, sumArgs);
+ *      const f = curriedAddFourNumbers(1, 2);
+ *      const g = f(3);
+ *      g(4); //=> 10
+ */
+
+var curryN =
+/*#__PURE__*/
+_curry2(function curryN(length, fn) {
+  if (length === 1) {
+    return _curry1(fn);
+  }
+
+  return _arity(length, _curryN(length, [], fn));
+});
+
 /**
  * Optimized internal three-arity curry function.
  *
@@ -445,6 +539,13 @@ function _dispatchable(methodNames, transducerCreator, fn) {
   };
 }
 
+function _reduced(x) {
+  return x && x['@@transducer/reduced'] ? x : {
+    '@@transducer/value': x,
+    '@@transducer/reduced': true
+  };
+}
+
 var _xfBase = {
   init: function () {
     return this.xf['@@transducer/init']();
@@ -454,6 +555,19 @@ var _xfBase = {
   }
 };
 
+function _map(fn, functor) {
+  var idx = 0;
+  var len = functor.length;
+  var result = Array(len);
+
+  while (idx < len) {
+    result[idx] = fn(functor[idx]);
+    idx += 1;
+  }
+
+  return result;
+}
+
 function _isString(x) {
   return Object.prototype.toString.call(x) === '[object String]';
 }
@@ -632,6 +746,30 @@ function _reduce(fn, acc, list) {
   throw new TypeError('reduce: list must be array or iterable');
 }
 
+var XMap =
+/*#__PURE__*/
+function () {
+  function XMap(f, xf) {
+    this.xf = xf;
+    this.f = f;
+  }
+
+  XMap.prototype['@@transducer/init'] = _xfBase.init;
+  XMap.prototype['@@transducer/result'] = _xfBase.result;
+
+  XMap.prototype['@@transducer/step'] = function (result, input) {
+    return this.xf['@@transducer/step'](result, this.f(input));
+  };
+
+  return XMap;
+}();
+
+var _xmap =
+/*#__PURE__*/
+_curry2(function _xmap(f, xf) {
+  return new XMap(f, xf);
+});
+
 function _has(prop, obj) {
   return Object.prototype.hasOwnProperty.call(obj, prop);
 }
@@ -734,6 +872,64 @@ _curry1(function keys(obj) {
   return ks;
 });
 
+/**
+ * Takes a function and
+ * a [functor](https://github.com/fantasyland/fantasy-land#functor),
+ * applies the function to each of the functor's values, and returns
+ * a functor of the same shape.
+ *
+ * Ramda provides suitable `map` implementations for `Array` and `Object`,
+ * so this function may be applied to `[1, 2, 3]` or `{x: 1, y: 2, z: 3}`.
+ *
+ * Dispatches to the `map` method of the second argument, if present.
+ *
+ * Acts as a transducer if a transformer is given in list position.
+ *
+ * Also treats functions as functors and will compose them together.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.1.0
+ * @category List
+ * @sig Functor f => (a -> b) -> f a -> f b
+ * @param {Function} fn The function to be called on every element of the input `list`.
+ * @param {Array} list The list to be iterated over.
+ * @return {Array} The new list.
+ * @see R.transduce, R.addIndex, R.pluck, R.project
+ * @example
+ *
+ *      const double = x => x * 2;
+ *
+ *      R.map(double, [1, 2, 3]); //=> [2, 4, 6]
+ *
+ *      R.map(double, {x: 1, y: 2, z: 3}); //=> {x: 2, y: 4, z: 6}
+ * @symb R.map(f, [a, b]) = [f(a), f(b)]
+ * @symb R.map(f, { x: a, y: b }) = { x: f(a), y: f(b) }
+ * @symb R.map(f, functor_o) = functor_o.map(f)
+ */
+
+var map =
+/*#__PURE__*/
+_curry2(
+/*#__PURE__*/
+_dispatchable(['fantasy-land/map', 'map'], _xmap, function map(fn, functor) {
+  switch (Object.prototype.toString.call(functor)) {
+    case '[object Function]':
+      return curryN(functor.length, function () {
+        return fn.call(this, functor.apply(this, arguments));
+      });
+
+    case '[object Object]':
+      return _reduce(function (acc, key) {
+        acc[key] = fn(functor[key]);
+        return acc;
+      }, {}, keys(functor));
+
+    default:
+      return _map(fn, functor);
+  }
+}));
+
 /**
  * Determine if the passed argument is an integer.
  *
@@ -812,6 +1008,138 @@ _curry2(function prop(p, obj) {
   return _isInteger(p) ? nth(p, obj) : obj[p];
 });
 
+/**
+ * Returns a single item by iterating through the list, successively calling
+ * the iterator function and passing it an accumulator value and the current
+ * value from the array, and then passing the result to the next call.
+ *
+ * The iterator function receives two values: *(acc, value)*. It may use
+ * [`R.reduced`](#reduced) to shortcut the iteration.
+ *
+ * The arguments' order of [`reduceRight`](#reduceRight)'s iterator function
+ * is *(value, acc)*.
+ *
+ * Note: `R.reduce` does not skip deleted or unassigned indices (sparse
+ * arrays), unlike the native `Array.prototype.reduce` method. For more details
+ * on this behavior, see:
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce#Description
+ *
+ * Dispatches to the `reduce` method of the third argument, if present. When
+ * doing so, it is up to the user to handle the [`R.reduced`](#reduced)
+ * shortcuting, as this is not implemented by `reduce`.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.1.0
+ * @category List
+ * @sig ((a, b) -> a) -> a -> [b] -> a
+ * @param {Function} fn The iterator function. Receives two values, the accumulator and the
+ *        current element from the array.
+ * @param {*} acc The accumulator value.
+ * @param {Array} list The list to iterate over.
+ * @return {*} The final, accumulated value.
+ * @see R.reduced, R.addIndex, R.reduceRight
+ * @example
+ *
+ *      R.reduce(R.subtract, 0, [1, 2, 3, 4]) // => ((((0 - 1) - 2) - 3) - 4) = -10
+ *      //          -               -10
+ *      //         / \              / \
+ *      //        -   4           -6   4
+ *      //       / \              / \
+ *      //      -   3   ==>     -3   3
+ *      //     / \              / \
+ *      //    -   2           -1   2
+ *      //   / \              / \
+ *      //  0   1            0   1
+ *
+ * @symb R.reduce(f, a, [b, c, d]) = f(f(f(a, b), c), d)
+ */
+
+var reduce =
+/*#__PURE__*/
+_curry3(_reduce);
+
+var XAny =
+/*#__PURE__*/
+function () {
+  function XAny(f, xf) {
+    this.xf = xf;
+    this.f = f;
+    this.any = false;
+  }
+
+  XAny.prototype['@@transducer/init'] = _xfBase.init;
+
+  XAny.prototype['@@transducer/result'] = function (result) {
+    if (!this.any) {
+      result = this.xf['@@transducer/step'](result, false);
+    }
+
+    return this.xf['@@transducer/result'](result);
+  };
+
+  XAny.prototype['@@transducer/step'] = function (result, input) {
+    if (this.f(input)) {
+      this.any = true;
+      result = _reduced(this.xf['@@transducer/step'](result, true));
+    }
+
+    return result;
+  };
+
+  return XAny;
+}();
+
+var _xany =
+/*#__PURE__*/
+_curry2(function _xany(f, xf) {
+  return new XAny(f, xf);
+});
+
+/**
+ * Returns `true` if at least one of the elements of the list match the predicate,
+ * `false` otherwise.
+ *
+ * Dispatches to the `any` method of the second argument, if present.
+ *
+ * Acts as a transducer if a transformer is given in list position.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.1.0
+ * @category List
+ * @sig (a -> Boolean) -> [a] -> Boolean
+ * @param {Function} fn The predicate function.
+ * @param {Array} list The array to consider.
+ * @return {Boolean} `true` if the predicate is satisfied by at least one element, `false`
+ *         otherwise.
+ * @see R.all, R.none, R.transduce
+ * @example
+ *
+ *      const lessThan0 = R.flip(R.lt)(0);
+ *      const lessThan2 = R.flip(R.lt)(2);
+ *      R.any(lessThan0)([1, 2]); //=> false
+ *      R.any(lessThan2)([1, 2]); //=> true
+ */
+
+var any =
+/*#__PURE__*/
+_curry2(
+/*#__PURE__*/
+_dispatchable(['any'], _xany, function any(fn, list) {
+  var idx = 0;
+
+  while (idx < list.length) {
+    if (fn(list[idx])) {
+      return true;
+    }
+
+    idx += 1;
+  }
+
+  return false;
+}));
+
 /**
  * Gives a single-word string description of the (native) type of a value,
  * returning such answers as 'Object', 'Number', 'Array', or 'Null'. Does not
@@ -844,6 +1172,166 @@ _curry1(function type(val) {
   return val === null ? 'Null' : val === undefined ? 'Undefined' : Object.prototype.toString.call(val).slice(8, -1);
 });
 
+function _pipe(f, g) {
+  return function () {
+    return g.call(this, f.apply(this, arguments));
+  };
+}
+
+/**
+ * This checks whether a function has a [methodname] function. If it isn't an
+ * array it will execute that function otherwise it will default to the ramda
+ * implementation.
+ *
+ * @private
+ * @param {Function} fn ramda implementation
+ * @param {String} methodname property to check for a custom implementation
+ * @return {Object} Whatever the return value of the method is.
+ */
+
+function _checkForMethod(methodname, fn) {
+  return function () {
+    var length = arguments.length;
+
+    if (length === 0) {
+      return fn();
+    }
+
+    var obj = arguments[length - 1];
+    return _isArray(obj) || typeof obj[methodname] !== 'function' ? fn.apply(this, arguments) : obj[methodname].apply(obj, Array.prototype.slice.call(arguments, 0, length - 1));
+  };
+}
+
+/**
+ * Returns the elements of the given list or string (or object with a `slice`
+ * method) from `fromIndex` (inclusive) to `toIndex` (exclusive).
+ *
+ * Dispatches to the `slice` method of the third argument, if present.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.1.4
+ * @category List
+ * @sig Number -> Number -> [a] -> [a]
+ * @sig Number -> Number -> String -> String
+ * @param {Number} fromIndex The start index (inclusive).
+ * @param {Number} toIndex The end index (exclusive).
+ * @param {*} list
+ * @return {*}
+ * @example
+ *
+ *      R.slice(1, 3, ['a', 'b', 'c', 'd']);        //=> ['b', 'c']
+ *      R.slice(1, Infinity, ['a', 'b', 'c', 'd']); //=> ['b', 'c', 'd']
+ *      R.slice(0, -1, ['a', 'b', 'c', 'd']);       //=> ['a', 'b', 'c']
+ *      R.slice(-3, -1, ['a', 'b', 'c', 'd']);      //=> ['b', 'c']
+ *      R.slice(0, 3, 'ramda');                     //=> 'ram'
+ */
+
+var slice =
+/*#__PURE__*/
+_curry3(
+/*#__PURE__*/
+_checkForMethod('slice', function slice(fromIndex, toIndex, list) {
+  return Array.prototype.slice.call(list, fromIndex, toIndex);
+}));
+
+/**
+ * Returns all but the first element of the given list or string (or object
+ * with a `tail` method).
+ *
+ * Dispatches to the `slice` method of the first argument, if present.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.1.0
+ * @category List
+ * @sig [a] -> [a]
+ * @sig String -> String
+ * @param {*} list
+ * @return {*}
+ * @see R.head, R.init, R.last
+ * @example
+ *
+ *      R.tail([1, 2, 3]);  //=> [2, 3]
+ *      R.tail([1, 2]);     //=> [2]
+ *      R.tail([1]);        //=> []
+ *      R.tail([]);         //=> []
+ *
+ *      R.tail('abc');  //=> 'bc'
+ *      R.tail('ab');   //=> 'b'
+ *      R.tail('a');    //=> ''
+ *      R.tail('');     //=> ''
+ */
+
+var tail =
+/*#__PURE__*/
+_curry1(
+/*#__PURE__*/
+_checkForMethod('tail',
+/*#__PURE__*/
+slice(1, Infinity)));
+
+/**
+ * Performs left-to-right function composition. The first argument may have
+ * any arity; the remaining arguments must be unary.
+ *
+ * In some libraries this function is named `sequence`.
+ *
+ * **Note:** The result of pipe is not automatically curried.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.1.0
+ * @category Function
+ * @sig (((a, b, ..., n) -> o), (o -> p), ..., (x -> y), (y -> z)) -> ((a, b, ..., n) -> z)
+ * @param {...Function} functions
+ * @return {Function}
+ * @see R.compose
+ * @example
+ *
+ *      const f = R.pipe(Math.pow, R.negate, R.inc);
+ *
+ *      f(3, 4); // -(3^4) + 1
+ * @symb R.pipe(f, g, h)(a, b) = h(g(f(a, b)))
+ * @symb R.pipe(f, g, h)(a)(b) = h(g(f(a)))(b)
+ */
+
+function pipe() {
+  if (arguments.length === 0) {
+    throw new Error('pipe requires at least one argument');
+  }
+
+  return _arity(arguments[0].length, reduce(_pipe, arguments[0], tail(arguments)));
+}
+
+function _identity(x) {
+  return x;
+}
+
+/**
+ * A function that does nothing but return the parameter supplied to it. Good
+ * as a default or placeholder function.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.1.0
+ * @category Function
+ * @sig a -> a
+ * @param {*} x The value to return.
+ * @return {*} The input value, `x`.
+ * @example
+ *
+ *      R.identity(1); //=> 1
+ *
+ *      const obj = {};
+ *      R.identity(obj) === obj; //=> true
+ * @symb R.identity(a) = a
+ */
+
+var identity =
+/*#__PURE__*/
+_curry1(_identity);
+
 function _arrayFromIterator(iter) {
   var list = [];
   var next;
@@ -1594,15 +2082,18 @@ const TertiaryButton$1 = styled.button `
 `;
 
 const Field$2 = styled.div `
+  align-items: flex-start;
   display: flex;
   flex-direction: column;
 `;
 
 const Label = styled.label `
-  color: ${p => (p.isDisabled ? p.theme.color.lightGray : p.theme.color.slateGray)};
-  display: ${p => (p.isHidden ? 'none' : 'table')};
+  color: ${p => 
+// eslint-disable-next-line no-nested-ternary
+p.isDisabled ? p.theme.color.lightGray : p.hasError ? p.theme.color.maximumRed : p.theme.color.slateGray};
+  display: ${p => (p.isHidden ? 'none' : 'block')};
   font-size: 13px;
-  line-height: 1.4;
+  line-height: 1.3846;
   margin-bottom: 4px;
 `;
 
@@ -1615,14 +2106,14 @@ const StyledLabel = styled(Label) `
 
 function Fieldset({ children, hasBorder = false, isHidden = false, isLight = false, legend, ...nativeProps }) {
     const hasLegend = useMemo(() => Boolean(legend), [legend]);
-    return (jsxs(StyledField, { as: "fieldset", ...nativeProps, children: [legend && jsx(Legend, { isHidden: isHidden, children: legend }), jsx(Box$8, { "$hasBorder": hasBorder, "$hasLegend": hasLegend, "$isLight": isLight, children: children })] }));
+    return (jsxs(StyledField, { as: "fieldset", ...nativeProps, children: [legend && jsx(Legend, { isHidden: isHidden, children: legend }), jsx(Box$b, { "$hasBorder": hasBorder, "$hasLegend": hasLegend, "$isLight": isLight, children: children })] }));
 }
 const StyledField = styled(Field$2) `
   border: 0;
   margin: 0;
   padding: 0;
 `;
-const Box$8 = styled.div `
+const Box$b = styled.div `
   background-color: ${p => (p.$isLight ? p.theme.color.white : 'transparent')};
   padding: ${p => (p.$hasBorder || p.$isLight ? '16px' : 0)};
 
@@ -1727,17 +2218,17 @@ function Tag$1({ accent, bullet, children, color, Icon, isLight = false, ...nati
         case Accent.TERTIARY:
             return jsx(TertiaryTag, { ...commonProps });
         default:
-            return jsx(Box$7, { "$color": color, ...commonProps });
+            return jsx(Box$a, { "$color": color, ...commonProps });
     }
 }
-const Box$7 = styled.span `
+const Box$a = styled.span `
   align-items: center;
   background-color: ${p => (p.$isLight ? p.theme.color.white : 'transparent')};
   border-radius: 11px;
   color: ${p => (p.$color ? p.$color : p.theme.color.gunMetal)};
   display: inline-flex;
   font-size: 13px;
-  line-height: 1.4;
+  line-height: 1.3846;
   padding: 1px 8px 3px 8px;
 
   /* Bullet components are a span */
@@ -1752,16 +2243,16 @@ const Box$7 = styled.span `
     margin-right: 4px;
   }
 `;
-const PrimaryTag = styled(Box$7) `
+const PrimaryTag = styled(Box$a) `
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
   color: ${p => p.theme.color.gunMetal};
 `;
 // TODO Fix this color.
-const SecondaryTag = styled(Box$7) `
+const SecondaryTag = styled(Box$a) `
   background-color: ${p => (p.$isLight ? '#f6d012' : '#f6d012')};
   color: ${p => p.theme.color.gunMetal};
 `;
-const TertiaryTag = styled(Box$7) `
+const TertiaryTag = styled(Box$a) `
   background-color: ${p => (p.$isLight ? p.theme.color.charcoal : p.theme.color.charcoal)};
   color: ${p => p.theme.color.white};
 `;
@@ -2288,78 +2779,33 @@ const createInstance = (defaults) => {
 const ky = createInstance();
 var ky$1 = ky;
 
-function AutoComplete({ defaultValue, isLabelHidden, isLight = false, label, onChange, onQuery, options, queryMap, queryUrl, ...originalProps }) {
-    const prevDefaultValuePropRef = useRef(defaultValue);
-    const [controlledDefaultValue, setDefaultControlledValue] = useState(defaultValue);
-    const [autoGeneratedOptions, setAutoGeneratedOptions] = useState([]);
-    const controlledOptions = useMemo(() => options ?? autoGeneratedOptions, [autoGeneratedOptions, options]);
-    const controlledValueAsLabel = useMemo(() => {
-        const foundOption = controlledOptions.find(propEq('value', controlledDefaultValue));
-        return foundOption ? foundOption.label : undefined;
-    }, [controlledDefaultValue, controlledOptions]);
-    const key = useMemo(() => `${originalProps.name}-${JSON.stringify(controlledDefaultValue)}`, [controlledDefaultValue, originalProps.name]);
-    const handleChange = useCallback(async (nextQuery) => {
-        if (queryUrl && queryMap) {
-            const url = queryUrl.replace('%s', nextQuery);
-            const rawData = await ky$1.get(url).json();
-            const nextData = rawData.map(queryMap);
-            setAutoGeneratedOptions(nextData);
-        }
-        const normalizedNextQuery = nextQuery && nextQuery.trim().length ? nextQuery : undefined;
-        if (onChange && !normalizedNextQuery) {
-            onChange(undefined);
-        }
-        if (onQuery) {
-            onQuery(normalizedNextQuery);
-        }
-    }, [onChange, onQuery, queryMap, queryUrl]);
-    const handleSelect = useCallback((nextValue) => {
-        if (onChange) {
-            onChange(nextValue);
-        }
-        setDefaultControlledValue(nextValue);
-    }, [onChange]);
-    useEffect(() => {
-        if (defaultValue === prevDefaultValuePropRef.current) {
-            return;
-        }
-        setDefaultControlledValue(defaultValue);
-    }, [defaultValue]);
-    return (jsxs(Field$2, { children: [jsx(Label, { htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledAutoComplete, { "$isLight": isLight, data: controlledOptions, defaultValue: controlledValueAsLabel, id: originalProps.name, onChange: handleChange, onSelect: handleSelect, ...originalProps }, key)] }));
-}
-const StyledAutoComplete = styled(AutoComplete$1) `
+const FieldError = styled.p `
+  color: ${p => p.theme.color.maximumRed};
+  display: ${p => (p.isDisabled ? 'none' : 'block')};
   font-size: 13px;
-
-  > input {
-    background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
-    border: 0;
-    font-size: 13px;
-    width: 100%;
-  }
+  font-weight: 700;
+  line-height: 1.3846;
+  margin-top: 4px;
 `;
 
-function Checkbox({ label, onChange, ...originalProps }) {
-    const key = useMemo(() => `${originalProps.name}-${String(originalProps.defaultChecked)}`, [originalProps.defaultChecked, originalProps.name]);
-    const handleChange = useCallback((_, isChecked) => {
-        if (!onChange) {
+const useClickOutside = (zoneRefOrzoneRefs, action, baseContainer) => {
+    const handleClickOutside = useCallback((event) => {
+        const eventTarget = event.target;
+        const zoneRefs = Array.isArray(zoneRefOrzoneRefs) ? zoneRefOrzoneRefs : [zoneRefOrzoneRefs];
+        const isEventTargetInZones = pipe(map((zoneRef) => zoneRef.current.contains(eventTarget)), any(identity))(zoneRefs);
+        if (isEventTargetInZones) {
             return;
         }
-        onChange(isChecked);
-    }, [onChange]);
-    return (jsx(StyledCheckbox, { id: originalProps.name, onChange: handleChange, ...originalProps, children: label }, key));
-}
-const StyledCheckbox = styled(Checkbox$1) `
-  > .rs-checkbox-checker {
-    min-height: 0;
-    padding-left: 28px;
-    padding-top: 0;
-
-    .rs-checkbox-wrapper {
-      left: 2px;
-      top: 2px !important;
-    }
-  }
-`;
+        action();
+    }, [action, zoneRefOrzoneRefs]);
+    useEffect(() => {
+        const globalContainer = baseContainer ?? window.document;
+        globalContainer.addEventListener('click', handleClickOutside);
+        return () => {
+            globalContainer.removeEventListener('click', handleClickOutside);
+        };
+    }, [baseContainer, handleClickOutside]);
+};
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -2815,6 +3261,135 @@ function useForceUpdate() {
     return { forceDebouncedUpdate, forceUpdate };
 }
 
+/**
+ * Trim and single-space a string
+ */
+function cleanString(text) {
+    return text.replace(/\s+/g, ' ').trim();
+}
+
+/**
+ * Normalize a string, making them undefined if empty-ish
+ */
+function normalizeString(text) {
+    if (!text) {
+        return undefined;
+    }
+    const cleanText = cleanString(text);
+    return cleanText.length > 0 ? cleanText : undefined;
+}
+
+function AutoComplete({ baseContainer, defaultValue, error, isLabelHidden, isLight = false, label, onChange, onQuery, options, queryMap, queryUrl, ...originalProps }) {
+    // eslint-disable-next-line no-null/no-null
+    const boxRef = useRef(null);
+    const queryRef = useRef(undefined);
+    const prevDefaultValuePropRef = useRef(defaultValue);
+    const [autoGeneratedOptions, setAutoGeneratedOptions] = useState([]);
+    const [controlledDefaultValue, setDefaultControlledValue] = useState(defaultValue);
+    const [isOpen, setIsOpen] = useState(false);
+    const { forceUpdate } = useForceUpdate();
+    const controlledError = useMemo(() => normalizeString(error), [error]);
+    const controlledOptions = useMemo(() => options ?? autoGeneratedOptions, [autoGeneratedOptions, options]);
+    const controlledValueAsLabel = useMemo(() => {
+        const foundOption = controlledOptions.find(propEq('value', controlledDefaultValue));
+        return foundOption ? foundOption.label : undefined;
+    }, [controlledDefaultValue, controlledOptions]);
+    const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
+    const key = useMemo(() => `${originalProps.name}-${JSON.stringify(controlledDefaultValue)}`, [controlledDefaultValue, originalProps.name]);
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+    const handleChange = useCallback(async (nextQuery) => {
+        queryRef.current = normalizeString(nextQuery);
+        if (queryUrl && queryMap && queryRef.current) {
+            const url = queryUrl.replace('%s', queryRef.current);
+            const rawData = await ky$1.get(url).json();
+            const nextData = rawData.map(queryMap);
+            setAutoGeneratedOptions(nextData);
+        }
+        setIsOpen(Boolean(queryRef.current));
+        if (onChange && !queryRef.current) {
+            onChange(undefined);
+        }
+        if (onQuery) {
+            onQuery(queryRef.current);
+        }
+    }, [onChange, onQuery, queryMap, queryUrl]);
+    const handleSelect = useCallback((nextValue) => {
+        if (onChange) {
+            onChange(nextValue);
+        }
+        setDefaultControlledValue(nextValue);
+    }, [onChange]);
+    const open = useCallback(() => {
+        if (!queryRef.current) {
+            return;
+        }
+        setIsOpen(true);
+    }, []);
+    useEffect(() => {
+        if (defaultValue === prevDefaultValuePropRef.current) {
+            return;
+        }
+        setDefaultControlledValue(defaultValue);
+    }, [defaultValue]);
+    useClickOutside(boxRef, close, baseContainer);
+    useEffect(() => {
+        forceUpdate();
+    }, [forceUpdate]);
+    return (jsxs(Field$2, { children: [jsx(Label, { hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box$9, { ref: boxRef, onClick: open, children: boxRef.current && (jsx(StyledAutoComplete, { "$isLight": isLight, container: boxRef.current, data: controlledOptions, defaultValue: controlledValueAsLabel, id: originalProps.name, onChange: handleChange, onSelect: handleSelect, open: isOpen, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
+}
+const StyledAutoComplete = styled(AutoComplete$1) `
+  font-size: 13px;
+
+  > input {
+    background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
+    border: 0;
+    font-size: 13px;
+    width: 100%;
+  }
+`;
+const Box$9 = styled.div `
+  position: relative;
+
+  > .rs-picker-select {
+    > .rs-picker-toggle {
+      font-size: 13px;
+
+      > .rs-stack {
+        > .rs-stack-item {
+          > .rs-picker-toggle-placeholder {
+            font-size: 13px;
+          }
+        }
+      }
+    }
+  }
+`;
+
+function Checkbox({ label, onChange, ...originalProps }) {
+    const key = useMemo(() => `${originalProps.name}-${String(originalProps.defaultChecked)}`, [originalProps.defaultChecked, originalProps.name]);
+    const handleChange = useCallback((_, isChecked) => {
+        if (!onChange) {
+            return;
+        }
+        onChange(isChecked);
+    }, [onChange]);
+    return (jsx(StyledCheckbox, { id: originalProps.name, onChange: handleChange, ...originalProps, children: label }, key));
+}
+const StyledCheckbox = styled(Checkbox$1) `
+  > .rs-checkbox-checker {
+    min-height: 0;
+    padding-left: 28px;
+    padding-top: 0;
+
+    .rs-checkbox-wrapper {
+      left: 2px;
+      top: 2px !important;
+    }
+  }
+`;
+
 var dayjs_min = {exports: {}};
 
 var hasRequiredDayjs_min;
@@ -3391,6 +3966,7 @@ disabled = false, isCompact, isEndDate = false, isForcedFocused, isLight, isStar
     const [isFocused, setIsFocused] = useState(false);
     useImperativeHandle(ref, () => ({
         box: boxRef.current,
+        contains: boxRef.current.contains.bind(boxRef.current),
         focus: (isInLastInputOfTheGroup = false) => {
             if (isInLastInputOfTheGroup) {
                 yearInputRef.current.focus();
@@ -3437,10 +4013,10 @@ disabled = false, isCompact, isEndDate = false, isForcedFocused, isLight, isStar
         ];
         onChange(nextDateTuple, isFilled);
     }, [onChange]);
-    return (jsxs(Box$6, { ref: boxRef, "$hasError": hasFormatError || hasValidationError, "$isCompact": isCompact, "$isDisabled": disabled, "$isFocused": isForcedFocused || isFocused, "$isLight": isLight, children: [jsxs("div", { children: [isStartDate && jsx("span", { children: "Du " }), isEndDate && jsx("span", { children: "Au " }), jsx(NumberInput$1, { ref: dayInputRef, "aria-label": `Jour${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: defaultValue && formatNumberAsDoubleDigit(defaultValue[2]), disabled: disabled, isLight: isLight, max: 31, min: 1, onBack: onBack, onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: () => monthInputRef.current.focus(), onPrevious: onPrevious, size: 2 }), "/", jsx(NumberInput$1, { ref: monthInputRef, "aria-label": `Mois${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: defaultValue && formatNumberAsDoubleDigit(defaultValue[1]), disabled: disabled, isLight: isLight, max: 12, min: 1, onBack: () => dayInputRef.current.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: () => yearInputRef.current.focus(), onPrevious: () => dayInputRef.current.focus(), size: 2 }), "/", jsx(NumberInput$1, { ref: yearInputRef, "aria-label": `Année${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: defaultValue && defaultValue[0], disabled: disabled, isLight: isLight, max: 2030, min: 2020, onBack: () => monthInputRef.current.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: onNext, onPrevious: () => monthInputRef.current.focus(), size: 4 })] }), !isCompact && jsx(Calendar, {})] }));
+    return (jsxs(Box$8, { ref: boxRef, "$hasError": hasFormatError || hasValidationError, "$isCompact": isCompact, "$isDisabled": disabled, "$isFocused": isForcedFocused || isFocused, "$isLight": isLight, children: [jsxs("div", { children: [isStartDate && jsx("span", { children: "Du " }), isEndDate && jsx("span", { children: "Au " }), jsx(NumberInput$1, { ref: dayInputRef, "aria-label": `Jour${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: defaultValue && formatNumberAsDoubleDigit(defaultValue[2]), disabled: disabled, isLight: isLight, max: 31, min: 1, onBack: onBack, onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: () => monthInputRef.current.focus(), onPrevious: onPrevious, size: 2 }), "/", jsx(NumberInput$1, { ref: monthInputRef, "aria-label": `Mois${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: defaultValue && formatNumberAsDoubleDigit(defaultValue[1]), disabled: disabled, isLight: isLight, max: 12, min: 1, onBack: () => dayInputRef.current.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: () => yearInputRef.current.focus(), onPrevious: () => dayInputRef.current.focus(), size: 2 }), "/", jsx(NumberInput$1, { ref: yearInputRef, "aria-label": `Année${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: defaultValue && defaultValue[0], disabled: disabled, isLight: isLight, max: 2030, min: 2020, onBack: () => monthInputRef.current.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: onNext, onPrevious: () => monthInputRef.current.focus(), size: 4 })] }), !isCompact && jsx(Calendar, {})] }));
 }
 const DateInput = forwardRef(DateInputWithRef);
-const Box$6 = styled.div `
+const Box$8 = styled.div `
   align-items: center;
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
   box-shadow: ${p => p.$hasError || p.$isFocused
@@ -3517,9 +4093,9 @@ function RangedTimePicker({ filter, minutesRange, onChange }) {
     if (!filteredRangedTimeOptions.length) {
         return jsx(Fragment, {});
     }
-    return (jsx(Box$5, { onClick: stopMouseEventPropagation, role: "listbox", children: filteredRangedTimeOptions.map(({ label, value }, index) => (jsx(Option, { "aria-selected": false, className: "js-ranged-time-picker-option", isSelected: index === selectedOptionIndex, onClick: () => onChange(value), role: "option", tabIndex: -1, children: spannedLabels[index] }, label))) }));
+    return (jsx(Box$7, { onClick: stopMouseEventPropagation, role: "listbox", children: filteredRangedTimeOptions.map(({ label, value }, index) => (jsx(Option, { "aria-selected": false, className: "js-ranged-time-picker-option", isSelected: index === selectedOptionIndex, onClick: () => onChange(value), role: "option", tabIndex: -1, children: spannedLabels[index] }, label))) }));
 }
-const Box$5 = styled.div `
+const Box$7 = styled.div `
   background-color: ${p => p.theme.color.white};
   box-shadow: inset 0px 0px 0px 1px ${p => p.theme.color.lightGray};
   display: flex;
@@ -3656,10 +4232,10 @@ disabled = false, isCompact, isEndDate = false, isLight, isStartDate = false, mi
         const nextTimeTuple = [hourInputRef.current.value, minuteInputRef.current.value];
         onChange(nextTimeTuple);
     }, [closeRangedTimePicker, onChange]);
-    return (jsxs(Box$4, { ref: boxRef, "$hasError": hasFormatError || hasValidationError, "$isCompact": isCompact, "$isDisabled": disabled, "$isFocused": isFocused, "$isLight": isLight, children: [jsxs(InputGroup, { children: [jsxs("div", { children: [jsx(NumberInput$1, { ref: hourInputRef, "aria-label": `Heure${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: controlledDefaultValue && controlledDefaultValue[0], disabled: disabled, isLight: isLight, max: 23, min: 0, onBack: handleBack, onBlur: handleBlur, onClick: openRangedTimePicker, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: handleHourInput, onNext: () => minuteInputRef.current.focus(), onPrevious: onPrevious, size: 2 }), ":", jsx(NumberInput$1, { ref: minuteInputRef, "aria-label": `Minute${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: controlledDefaultValue && controlledDefaultValue[1], disabled: disabled, isLight: isLight, max: 59, min: 0, onBack: () => hourInputRef.current.focus(), onBlur: handleBlur, onClick: openRangedTimePicker, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: onNext, onPrevious: () => hourInputRef.current.focus(), size: 2 })] }), !isCompact && jsx(Clock, {})] }), isRangedTimePickerOpenRef.current && (jsx(RangedTimePicker, { filter: rangedTimePickerFilter, minutesRange: minutesRange, onChange: handleRangedTimePickedChange }))] }));
+    return (jsxs(Box$6, { ref: boxRef, "$hasError": hasFormatError || hasValidationError, "$isCompact": isCompact, "$isDisabled": disabled, "$isFocused": isFocused, "$isLight": isLight, children: [jsxs(InputGroup, { children: [jsxs("div", { children: [jsx(NumberInput$1, { ref: hourInputRef, "aria-label": `Heure${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: controlledDefaultValue && controlledDefaultValue[0], disabled: disabled, isLight: isLight, max: 23, min: 0, onBack: handleBack, onBlur: handleBlur, onClick: openRangedTimePicker, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: handleHourInput, onNext: () => minuteInputRef.current.focus(), onPrevious: onPrevious, size: 2 }), ":", jsx(NumberInput$1, { ref: minuteInputRef, "aria-label": `Minute${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: controlledDefaultValue && controlledDefaultValue[1], disabled: disabled, isLight: isLight, max: 59, min: 0, onBack: () => hourInputRef.current.focus(), onBlur: handleBlur, onClick: openRangedTimePicker, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: onNext, onPrevious: () => hourInputRef.current.focus(), size: 2 })] }), !isCompact && jsx(Clock, {})] }), isRangedTimePickerOpenRef.current && (jsx(RangedTimePicker, { filter: rangedTimePickerFilter, minutesRange: minutesRange, onChange: handleRangedTimePickedChange }))] }));
 }
 const TimeInput = forwardRef(TimeInputWithRef);
-const Box$4 = styled.div `
+const Box$6 = styled.div `
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
   box-shadow: ${p => p.$hasError || p.$isFocused
     ? `inset 0px 0px 0px 1px ${p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100]}`
@@ -3738,11 +4314,11 @@ function CalendarPicker({ defaultValue, isHistorical, isOpen, onChange }) {
         // and can be used as a container for <RsuiteDatePicker />
         forceUpdate();
     }, [forceUpdate]);
-    return (jsx(Box$3, { ref: boxRef, onClick: stopMouseEventPropagation, children: boxRef.current && (jsx(DatePicker$1, { container: boxRef.current, disabledDate: disabledDate, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, oneTap: true, onSelect: handleSelect, open: isOpen, 
+    return (jsx(Box$5, { ref: boxRef, onClick: stopMouseEventPropagation, children: boxRef.current && (jsx(DatePicker$1, { container: boxRef.current, disabledDate: disabledDate, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, oneTap: true, onSelect: handleSelect, open: isOpen, 
             // `defaultValue` seems to be immediatly cancelled so we come down to using a controlled `value`
             ranges: [], value: defaultValue })) }));
 }
-const Box$3 = styled.div `
+const Box$5 = styled.div `
   height: 0;
   position: relative;
   user-select: none;
@@ -3780,7 +4356,7 @@ const Box$3 = styled.div `
       border: 0;
       font-size: 13px;
       height: auto !important;
-      line-height: 1.4;
+      line-height: 1.3846;
       padding: 0;
 
       > .rs-calendar-header {
@@ -3897,7 +4473,7 @@ const Box$3 = styled.div `
   }
 `;
 
-function DatePicker({ defaultValue, 
+function DatePicker({ baseContainer, defaultValue, 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false, isLight = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
     const boxRef = useRef();
@@ -3924,13 +4500,6 @@ disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false
         isCalendarPickerOpenRef.current = false;
         forceUpdate();
     }, [forceUpdate]);
-    const handleClickOutside = useCallback((event) => {
-        const target = event.target;
-        if (dateInputRef.current.box.contains(target)) {
-            return;
-        }
-        closeCalendarPicker();
-    }, [closeCalendarPicker]);
     const handleDateInputNext = useCallback(() => {
         if (!withTime) {
             return;
@@ -3988,15 +4557,10 @@ disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false
         isCalendarPickerOpenRef.current = true;
         forceUpdate();
     }, [forceUpdate]);
-    useEffect(() => {
-        window.document.addEventListener('click', handleClickOutside);
-        return () => {
-            window.document.removeEventListener('click', handleClickOutside);
-        };
-    }, [handleClickOutside]);
-    return (jsxs(Fieldset, { disabled: disabled, ...nativeProps, children: [jsx(Legend, { isDisabled: disabled, isHidden: isLabelHidden, children: label }), jsxs(Box$2, { ref: boxRef, children: [jsx(Field$1, { children: jsx(DateInput, { ref: dateInputRef, defaultValue: selectedDateTupleRef.current, disabled: disabled, isCompact: isCompact, isForcedFocused: isCalendarPickerOpenRef.current, isLight: isLight, onChange: handleDateInputChange, onClick: openCalendarPicker, onNext: handleDateInputNext }) }), withTime && (jsx(Field$1, { "$isTimeField": true, children: jsx(TimeInput, { ref: timeInputRef, defaultValue: selectedTimeTupleRef.current, disabled: disabled, isCompact: isCompact, isLight: isLight, minutesRange: minutesRange, onBack: () => dateInputRef.current.focus(true), onChange: handleTimeInputFilled, onFocus: closeCalendarPicker, onPrevious: () => dateInputRef.current.focus(true) }) }))] }), jsx(CalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, isOpen: isCalendarPickerOpenRef.current, onChange: handleCalendarPickerChange })] }));
+    useClickOutside(boxRef, closeCalendarPicker, baseContainer);
+    return (jsxs(Fieldset, { disabled: disabled, ...nativeProps, children: [jsx(Legend, { isDisabled: disabled, isHidden: isLabelHidden, children: label }), jsxs(Box$4, { ref: boxRef, children: [jsx(Field$1, { children: jsx(DateInput, { ref: dateInputRef, defaultValue: selectedDateTupleRef.current, disabled: disabled, isCompact: isCompact, isForcedFocused: isCalendarPickerOpenRef.current, isLight: isLight, onChange: handleDateInputChange, onClick: openCalendarPicker, onNext: handleDateInputNext }) }), withTime && (jsx(Field$1, { "$isTimeField": true, children: jsx(TimeInput, { ref: timeInputRef, defaultValue: selectedTimeTupleRef.current, disabled: disabled, isCompact: isCompact, isLight: isLight, minutesRange: minutesRange, onBack: () => dateInputRef.current.focus(true), onChange: handleTimeInputFilled, onFocus: closeCalendarPicker, onPrevious: () => dateInputRef.current.focus(true) }) }))] }), jsx(CalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, isOpen: isCalendarPickerOpenRef.current, onChange: handleCalendarPickerChange })] }));
 }
-const Box$2 = styled.div `
+const Box$4 = styled.div `
   * {
     font-weight: 500;
     line-height: 1;
@@ -4042,11 +4606,11 @@ function RangeCalendarPicker({ defaultValue, isHistorical, isOpen, onChange }) {
         // and can be used as a container for <RsuiteDateRangePicker />
         forceUpdate();
     }, [forceUpdate]);
-    return (jsx(Box$1, { ref: boxRef, onClick: stopMouseEventPropagation, children: boxRef.current && (jsx(DateRangePicker$1, { container: boxRef.current, disabledDate: disabledDate, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, onSelect: handleSelect, open: isOpen, ranges: [], 
+    return (jsx(Box$3, { ref: boxRef, onClick: stopMouseEventPropagation, children: boxRef.current && (jsx(DateRangePicker$1, { container: boxRef.current, disabledDate: disabledDate, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, onSelect: handleSelect, open: isOpen, ranges: [], 
             // `defaultValue` seems to be immediatly cancelled so we come down to using a controlled `value`
             value: controlledValue })) }));
 }
-const Box$1 = styled.div `
+const Box$3 = styled.div `
   height: 0;
   position: relative;
   user-select: none;
@@ -4087,7 +4651,7 @@ const Box$1 = styled.div `
       > .rs-calendar {
         font-size: 13px;
         height: auto !important;
-        line-height: 1.4;
+        line-height: 1.3846;
         padding: 0;
 
         &:first-child {
@@ -4215,7 +4779,7 @@ var DateRangePosition;
     DateRangePosition["START"] = "START";
 })(DateRangePosition || (DateRangePosition = {}));
 
-function DateRangePicker({ defaultValue, 
+function DateRangePicker({ baseContainer, defaultValue, 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false, isLight = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
     const startDateInputRef = useRef();
@@ -4251,13 +4815,6 @@ disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false
         isRangeCalendarPickerOpenRef.current = false;
         forceUpdate();
     }, [forceUpdate]);
-    const handleClickOutside = useCallback((event) => {
-        const target = event.target;
-        if (startDateInputRef.current.box.contains(target) || endDateInputRef.current.box.contains(target)) {
-            return;
-        }
-        closeRangeCalendarPicker();
-    }, [closeRangeCalendarPicker]);
     const handleEndDateInputNext = useCallback(() => {
         if (!withTime) {
             return;
@@ -4364,15 +4921,10 @@ disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false
         isRangeCalendarPickerOpenRef.current = true;
         forceUpdate();
     }, [forceUpdate]);
-    useEffect(() => {
-        window.document.addEventListener('click', handleClickOutside);
-        return () => {
-            window.document.removeEventListener('click', handleClickOutside);
-        };
-    }, [handleClickOutside]);
-    return (jsxs(Fieldset, { ...nativeProps, children: [jsx(Legend, { isDisabled: disabled, isHidden: isLabelHidden, children: label }), jsxs(Box, { isDisabled: disabled, children: [jsx(Field, { children: jsx(DateInput, { ref: startDateInputRef, defaultValue: selectedStartDateTupleRef.current, disabled: disabled, isCompact: isCompact, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, isStartDate: true, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.START, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onNext: handleStartDateInputNext }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: startTimeInputRef, defaultValue: selectedStartTimeTupleRef.current, disabled: disabled, isCompact: isCompact, isLight: isLight, isStartDate: true, minutesRange: minutesRange, onBack: () => startDateInputRef.current.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.START, nextTimeTuple), onFocus: closeRangeCalendarPicker, onNext: () => endDateInputRef.current.focus(), onPrevious: () => startDateInputRef.current.focus(true) }) })), jsx(Field, { isEndDateField: true, children: jsx(DateInput, { ref: endDateInputRef, defaultValue: selectedEndDateTupleRef.current, disabled: disabled, isCompact: isCompact, isEndDate: true, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, onBack: handleEndDateInputPrevious, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.END, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onNext: handleEndDateInputNext, onPrevious: handleEndDateInputPrevious }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: endTimeInputRef, defaultValue: selectedEndTimeTupleRef.current, disabled: disabled, isCompact: isCompact, isEndDate: true, isLight: isLight, minutesRange: minutesRange, onBack: () => endDateInputRef.current.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.END, nextTimeTuple), onFocus: closeRangeCalendarPicker, onPrevious: () => endDateInputRef.current.focus(true) }) }))] }), jsx(RangeCalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, isOpen: isRangeCalendarPickerOpenRef.current, onChange: handleRangeCalendarPickerChange })] }));
+    useClickOutside([endDateInputRef, startDateInputRef], closeRangeCalendarPicker, baseContainer);
+    return (jsxs(Fieldset, { ...nativeProps, children: [jsx(Legend, { isDisabled: disabled, isHidden: isLabelHidden, children: label }), jsxs(Box$2, { isDisabled: disabled, children: [jsx(Field, { children: jsx(DateInput, { ref: startDateInputRef, defaultValue: selectedStartDateTupleRef.current, disabled: disabled, isCompact: isCompact, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, isStartDate: true, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.START, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onNext: handleStartDateInputNext }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: startTimeInputRef, defaultValue: selectedStartTimeTupleRef.current, disabled: disabled, isCompact: isCompact, isLight: isLight, isStartDate: true, minutesRange: minutesRange, onBack: () => startDateInputRef.current.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.START, nextTimeTuple), onFocus: closeRangeCalendarPicker, onNext: () => endDateInputRef.current.focus(), onPrevious: () => startDateInputRef.current.focus(true) }) })), jsx(Field, { isEndDateField: true, children: jsx(DateInput, { ref: endDateInputRef, defaultValue: selectedEndDateTupleRef.current, disabled: disabled, isCompact: isCompact, isEndDate: true, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, onBack: handleEndDateInputPrevious, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.END, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onNext: handleEndDateInputNext, onPrevious: handleEndDateInputPrevious }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: endTimeInputRef, defaultValue: selectedEndTimeTupleRef.current, disabled: disabled, isCompact: isCompact, isEndDate: true, isLight: isLight, minutesRange: minutesRange, onBack: () => endDateInputRef.current.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.END, nextTimeTuple), onFocus: closeRangeCalendarPicker, onPrevious: () => endDateInputRef.current.focus(true) }) }))] }), jsx(RangeCalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, isOpen: isRangeCalendarPickerOpenRef.current, onChange: handleRangeCalendarPickerChange })] }));
 }
-const Box = styled.div `
+const Box$2 = styled.div `
   * {
     font-weight: 500;
     line-height: 1;
@@ -4438,10 +4990,19 @@ const ChecboxesBox$1 = styled.div `
     `}
 `;
 
-function MultiSelect({ fixedWidth = 5, isLabelHidden = false, isLight = false, label, onChange, options, 
+function MultiSelect({ baseContainer, error, fixedWidth = 5, isLabelHidden = false, isLight = false, label, onChange, options, 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 searchable = false, ...originalProps }) {
+    // eslint-disable-next-line no-null/no-null
+    const boxRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const { forceUpdate } = useForceUpdate();
+    const controlledError = useMemo(() => normalizeString(error), [error]);
+    const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, []);
     const handleChange = useCallback((nextValue) => {
         if (!onChange) {
             return;
@@ -4449,7 +5010,14 @@ searchable = false, ...originalProps }) {
         const normalizedNextValue = !nextValue || !nextValue.length ? undefined : nextValue;
         onChange(normalizedNextValue);
     }, [onChange]);
-    return (jsxs(Field$2, { children: [jsx(Label, { htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledTagPicker, { "$fixedWidth": fixedWidth, "$isLight": isLight, data: options, id: originalProps.name, onChange: handleChange, searchable: searchable, ...originalProps }, key)] }));
+    const open = useCallback(() => {
+        setIsOpen(true);
+    }, []);
+    useClickOutside(boxRef, close, baseContainer);
+    useEffect(() => {
+        forceUpdate();
+    }, [forceUpdate]);
+    return (jsxs(Field$2, { children: [jsx(Label, { hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box$1, { ref: boxRef, onClick: open, children: boxRef.current && (jsx(StyledTagPicker, { "$fixedWidth": fixedWidth, "$isLight": isLight, container: boxRef.current, data: options, id: originalProps.name, onChange: handleChange, open: isOpen, searchable: searchable, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
 }
 // TODO A width seems to be mandatory in rsuite which is a very dirty behavior.
 // We should hack that.
@@ -4463,6 +5031,54 @@ const StyledTagPicker = styled(TagPicker) `
     cursor: inherit;
   }
 `;
+const Box$1 = styled.div `
+  position: relative;
+
+  > .rs-picker-input {
+    > .rs-picker-toggle {
+      border: solid 1px ${p => p.theme.color.gainsboro} !important;
+      font-size: 13px;
+      line-height: 1.3846;
+      padding: 5px 40px 5px 8px !important;
+
+      :hover {
+        border: solid 1px ${p => p.theme.color.blueYonder[100]} !important;
+      }
+
+      :active,
+      :focus {
+        border: solid 1px ${p => p.theme.color.blueGray[100]} !important;
+      }
+
+      > .rs-stack {
+        > .rs-stack-item {
+          > .rs-picker-toggle-placeholder {
+            font-size: 13px;
+            line-height: 1.3846;
+          }
+
+          > svg {
+            height: 18px;
+            /* margin-top: -2px; */
+          }
+        }
+      }
+    }
+
+    > .rs-picker-tag-wrapper {
+      .rs-picker-search {
+        .rs-picker-search-input {
+          padding: 0 8px !important;
+
+          input {
+            font-size: 13px;
+            line-height: 1.3846;
+          }
+        }
+      }
+    }
+  }
+`;
 
 function MultiRadio({ defaultValue, isInline = false, isLabelHidden = false, isLight = false, label, name, onChange, options }) {
     const [checkedOptionValue, setCheckedOptionValue] = useState(undefined);
@@ -4596,10 +5212,19 @@ const StyledInput$2 = styled(Input) `
   width: 100%;
 `;
 
-function Select({ isLabelHidden = false, isLight = false, label, onChange, options, 
+function Select({ baseContainer, error, isLabelHidden = false, isLight = false, label, onChange, options, 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 searchable = false, ...originalProps }) {
+    // eslint-disable-next-line no-null/no-null
+    const boxRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const { forceUpdate } = useForceUpdate();
+    const controlledError = useMemo(() => normalizeString(error), [error]);
+    const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, []);
     const handleChange = useCallback((nextValue) => {
         if (!onChange) {
             return;
@@ -4607,10 +5232,17 @@ searchable = false, ...originalProps }) {
         const normalizedNextValue = nextValue ?? undefined;
         onChange(normalizedNextValue);
     }, [onChange]);
-    return (jsxs(Field$2, { children: [jsx(Label, { htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledSelectPicker, { "$isLight": isLight, data: options, id: originalProps.name, 
-                // The `unknown` type from Rsuite library is wrong. It should be inferred from `data` prop type.
-                // `onChange: ((value: unknown, event: React.SyntheticEvent<Element, Event>) => void) | undefined`
-                onChange: handleChange, searchable: searchable, ...originalProps }, key)] }));
+    const open = useCallback(() => {
+        setIsOpen(true);
+    }, []);
+    useClickOutside(boxRef, close, baseContainer);
+    useEffect(() => {
+        forceUpdate();
+    }, [forceUpdate]);
+    return (jsxs(Field$2, { children: [jsx(Label, { hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box, { ref: boxRef, onClick: open, children: boxRef.current && (jsx(StyledSelectPicker, { "$isLight": isLight, container: boxRef.current, data: options, id: originalProps.name, 
+                    // The `unknown` type from Rsuite library is wrong. It should be inferred from `data` prop type.
+                    // `onChange: ((value: unknown, event: React.SyntheticEvent<Element, Event>) => void) | undefined`
+                    onChange: handleChange, open: isOpen, searchable: searchable, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledSelectPicker = styled(SelectPicker) `
   > .rs-picker-toggle {
@@ -4618,6 +5250,41 @@ const StyledSelectPicker = styled(SelectPicker) `
     border: 0;
   }
 `;
+const Box = styled.div `
+  position: relative;
+
+  > .rs-picker-select {
+    > .rs-picker-toggle {
+      border: solid 1px ${p => p.theme.color.gainsboro} !important;
+      font-size: 13px;
+      line-height: 1.3846;
+      padding: 4px 40px 6px 8px;
+
+      :hover {
+        border: solid 1px ${p => p.theme.color.blueYonder[100]} !important;
+      }
+
+      :active,
+      :focus {
+        border: solid 1px ${p => p.theme.color.blueGray[100]} !important;
+      }
+
+      > .rs-stack {
+        > .rs-stack-item {
+          > .rs-picker-toggle-placeholder {
+            font-size: 13px;
+            line-height: 1.3846;
+          }
+
+          > svg {
+            height: 18px;
+            margin-top: -2px;
+          }
+        }
+      }
+    }
+  }
+`;
 
 function Textarea({ isLabelHidden = false, isLight = false, label, onChange, rows = 3, ...originalProps }) {
     const inputRef = useRef();
@@ -4731,10 +5398,11 @@ function FormikNumberInput({ name, ...originalProps }) {
 }
 
 function FormikSelect({ name, ...originalProps }) {
-    const [field, , helpers] = useField(name);
+    const [field, meta, helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const defaultValue = useMemo(() => field.value, []);
-    return jsx(Select, { defaultValue: defaultValue, name: name, onChange: helpers.setValue, ...originalProps });
+    const error = useMemo(() => (meta.initialTouched ? meta.error : undefined), [meta.error, meta.initialTouched]);
+    return jsx(Select, { defaultValue: defaultValue, error: error, name: name, onChange: helpers.setValue, ...originalProps });
 }
 
 function FormikTextarea({ name, ...originalProps }) {
@@ -4751,5 +5419,5 @@ function FormikTextInput({ name, ...originalProps }) {
     return jsx(TextInput, { defaultValue: defaultValue, name: name, onChange: helpers.setValue, ...originalProps });
 }
 
-export { Accent, AutoComplete, Button, Checkbox, DatePicker, DateRangePicker, Dropdown, Field$2 as Field, Fieldset, FormikAutoComplete, FormikCheckbox, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NumberInput, OnlyFontGlobalStyle, Select, Size, THEME, Tag$1 as Tag, TagGroup, TextInput, Textarea, ThemeProvider };
+export { Accent, AutoComplete, Button, Checkbox, DatePicker, DateRangePicker, Dropdown, Field$2 as Field, Fieldset, FormikAutoComplete, FormikCheckbox, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NumberInput, OnlyFontGlobalStyle, Select, Size, THEME, Tag$1 as Tag, TagGroup, TextInput, Textarea, ThemeProvider, useClickOutside, useForceUpdate };
 //# sourceMappingURL=index.js.map