@mtes-mct/monitor-ui 2.0.0 → 2.1.0

package/index.js

@@ -1145,6 +1145,35 @@ _curry2(function reject(pred, filterable) {
   return filter(_complement(pred), filterable);
 });
 
+/**
+ * Removes the sub-list of `list` starting at index `start` and containing
+ * `count` elements. _Note that this is not destructive_: it returns a copy of
+ * the list with the changes.
+ * <small>No lists have been harmed in the application of this function.</small>
+ *
+ * @func
+ * @memberOf R
+ * @since v0.2.2
+ * @category List
+ * @sig Number -> Number -> [a] -> [a]
+ * @param {Number} start The position to start removing elements
+ * @param {Number} count The number of elements to remove
+ * @param {Array} list The list to remove from
+ * @return {Array} A new Array with `count` elements from `start` removed.
+ * @see R.without
+ * @example
+ *
+ *      R.remove(2, 3, [1,2,3,4,5,6,7,8]); //=> [1,2,6,7,8]
+ */
+
+var remove =
+/*#__PURE__*/
+_curry3(function remove(start, count, list) {
+  var result = Array.prototype.slice.call(list, 0);
+  result.splice(start, count);
+  return result;
+});
+
 /**
  * Creates a new object with the own properties of the two provided objects. If
  * a key exists in both objects, the provided function is applied to the key
@@ -1511,15 +1540,38 @@ const Field$2 = styled.div `
   flex-direction: column;
 `;
 
-function Fieldset({ isLight = false, isMulti = false, ...nativeProps }) {
-    return jsx(StyledField, { as: "fieldset", isLight: isLight, isMulti: isMulti, ...nativeProps });
+const Label = styled.label `
+  color: ${p => p.theme.color.slateGray};
+  display: ${p => (p.isHidden ? 'none' : 'table')};
+  font-size: 13px;
+  line-height: 1.4;
+  margin-bottom: 8px;
+`;
+
+function Legend({ isHidden = false, ...nativeProps }) {
+    return jsx(StyledLabel, { as: "legend", isHidden: isHidden, ...nativeProps });
 }
-const StyledField = styled(Field$2) `
-  background-color: ${p => (p.isLight ? 'white' : 'transparent')};
+const StyledLabel = styled(Label) `
+  padding: 0;
+`;
 
+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 })] }));
+}
+const StyledField = styled(Field$2) `
   border: 0;
   margin: 0;
-  padding: ${p => (p.isMulti ? '16px' : 0)};
+  padding: 0;
+`;
+const Box$8 = styled.div `
+  background-color: ${p => (p.$isLight ? p.theme.color.white : 'transparent')};
+  padding: ${p => (p.$hasBorder || p.$isLight ? '16px' : 0)};
+
+  ${p => p.$hasBorder &&
+    css `
+      border: solid 1px ${p.$isLight ? p.theme.color.white : p.theme.color.gainsboro};
+    `}
 `;
 
 const ICON_SIZE_IN_PX = {
@@ -1582,21 +1634,6 @@ const TertiaryButton = styled.button `
   }
 `;
 
-const Label = styled.label `
-  color: ${p => p.theme.color.slateGray};
-  display: ${p => (p.isHidden ? 'none' : 'table')};
-  font-size: 13px;
-  line-height: 1.4;
-  margin-bottom: 8px;
-`;
-
-function Legend({ isHidden = false, ...nativeProps }) {
-    return jsx(StyledLabel, { as: "legend", isHidden: isHidden, ...nativeProps });
-}
-const StyledLabel = styled(Label) `
-  padding: 0;
-`;
-
 var TagBullet;
 (function (TagBullet) {
     TagBullet["DISK"] = "DISK";
@@ -2249,11 +2286,11 @@ const StyledCheckbox = styled(Checkbox$1) `
   > .rs-checkbox-checker {
     min-height: 0;
     padding-left: 28px;
-    padding-top: 2px;
+    padding-top: 0;
 
     .rs-checkbox-wrapper {
       left: 2px;
-      top: 0 !important;
+      top: 2px !important;
     }
   }
 `;
@@ -2841,7 +2878,7 @@ function NumberInputWithRef({ defaultValue, max, min, onBack, onClick, onFilled,
             onBack();
         }
     }, [onBack, onNext, onPrevious]);
-    return (jsx(StyledNumberInput, { ref: inputRef, defaultValue: defaultValue, maxLength: size, onClick: handleClick, onFocus: handleFocus, onInput: handleInput, onKeyDown: handleKeyDown, pattern: "\\d*", placeholder: placeholder, size: size, type: "text", ...nativeProps }, String(defaultValue)));
+    return (jsx(StyledNumberInput, { ref: inputRef, "$size": size, defaultValue: defaultValue, maxLength: size, onClick: handleClick, onFocus: handleFocus, onInput: handleInput, onKeyDown: handleKeyDown, pattern: "\\d*", placeholder: placeholder, type: "text", ...nativeProps }, String(defaultValue)));
 }
 const NumberInput = forwardRef(NumberInputWithRef);
 const StyledNumberInput = styled.input `
@@ -2852,7 +2889,7 @@ const StyledNumberInput = styled.input `
   padding: 0;
   text-align: center;
   /* 1 digit = 8px */
-  width: ${p => p.size * 0.5}rem;
+  width: ${p => p.$size * 0.5}rem;
 
   ::placeholder {
     color: ${p => p.theme.color.slateGray};
@@ -2927,7 +2964,7 @@ function getTimeTupleFromDate(date) {
     return [formatNumberAsDoubleDigit(date.getHours()), formatNumberAsDoubleDigit(date.getMinutes())];
 }
 
-function DateInputWithRef({ defaultValue, isEndDate = false, isForcedFocused, isStartDate = false, onBack, onChange, onClick, onNext, onPrevious }, ref) {
+function DateInputWithRef({ defaultValue, isEndDate = false, isForcedFocused, isLight, isStartDate = false, onBack, onChange, onClick, onNext, onPrevious }, ref) {
     const boxSpanRef = useRef();
     const dayInputRef = useRef();
     const monthInputRef = useRef();
@@ -2983,13 +3020,13 @@ function DateInputWithRef({ defaultValue, isEndDate = false, isForcedFocused, is
         ];
         onChange(nextDateTuple);
     }, [onChange]);
-    return (jsxs(Box$6, { ref: boxSpanRef, hasError: hasFormatError || hasValidationError, isFocused: isForcedFocused || isFocused, children: [isStartDate && 'Du ', isEndDate && 'Au ', jsx(NumberInput, { ref: dayInputRef, "data-cy": `date-range-picker-${isStartDate ? 'start' : 'end'}-day`, defaultValue: defaultValue && formatNumberAsDoubleDigit(defaultValue[2]), 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, { ref: monthInputRef, "data-cy": `date-range-picker-${isStartDate ? 'start' : 'end'}-month`, defaultValue: defaultValue && formatNumberAsDoubleDigit(defaultValue[1]), 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, { ref: yearInputRef, "data-cy": `date-range-picker-${isStartDate ? 'start' : 'end'}-year`, defaultValue: defaultValue && defaultValue[0], max: currentUtcYear, min: 2020, onBack: () => monthInputRef.current.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: onNext, onPrevious: () => monthInputRef.current.focus(), size: 4 })] }));
+    return (jsxs(Box$6, { ref: boxSpanRef, "$hasError": hasFormatError || hasValidationError, "$isFocused": isForcedFocused || isFocused, "$isLight": isLight, children: [isStartDate && 'Du ', isEndDate && 'Au ', jsx(NumberInput, { ref: dayInputRef, "data-cy": `date-range-picker-${isStartDate ? 'start' : 'end'}-day`, defaultValue: defaultValue && formatNumberAsDoubleDigit(defaultValue[2]), 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, { ref: monthInputRef, "data-cy": `date-range-picker-${isStartDate ? 'start' : 'end'}-month`, defaultValue: defaultValue && formatNumberAsDoubleDigit(defaultValue[1]), 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, { ref: yearInputRef, "data-cy": `date-range-picker-${isStartDate ? 'start' : 'end'}-year`, defaultValue: defaultValue && defaultValue[0], max: currentUtcYear, min: 2020, onBack: () => monthInputRef.current.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: onNext, onPrevious: () => monthInputRef.current.focus(), size: 4 })] }));
 }
 const DateInput = forwardRef(DateInputWithRef);
 const Box$6 = styled.span `
-  background-color: ${p => 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]}`
+  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]}`
     : 'none'};
   color: ${p => p.theme.color.slateGray};
   display: inline-block;
@@ -3719,7 +3756,7 @@ const Option = styled.div `
   }
 `;
 
-function TimeInputWithRef({ defaultValue, isStartDate = false, minutesRange = 15, onBack, onChange, onFocus, onNext, onPrevious }, ref) {
+function TimeInputWithRef({ defaultValue, isLight, isStartDate = false, minutesRange = 15, onBack, onChange, onFocus, onNext, onPrevious }, ref) {
     const boxSpanRef = useRef();
     const hourInputRef = useRef();
     const minuteInputRef = useRef();
@@ -3806,13 +3843,13 @@ function TimeInputWithRef({ defaultValue, isStartDate = false, minutesRange = 15
         const nextTimeTuple = [hourInputRef.current.value, minuteInputRef.current.value];
         onChange(nextTimeTuple);
     }, [closeRangedTimePicker, onChange]);
-    return (jsxs(Box$3, { ref: boxSpanRef, hasError: hasFormatError || hasValidationError, isFocused: isFocused, children: [jsxs(Fragment, { children: [jsx(NumberInput, { ref: hourInputRef, "data-cy": `date-range-picker-${isStartDate ? 'start' : 'end'}-hour`, defaultValue: controlledDefaultValue && controlledDefaultValue[0], 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, { ref: minuteInputRef, "data-cy": `date-range-picker-${isStartDate ? 'start' : 'end'}-minute`, defaultValue: controlledDefaultValue && controlledDefaultValue[1], 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 })] }), isRangedTimePickerOpenRef.current && (jsx(RangedTimePicker, { filter: rangedTimePickerFilter, minutesRange: minutesRange, onChange: handleRangedTimePickedChange }))] }));
+    return (jsxs(Box$3, { ref: boxSpanRef, "$hasError": hasFormatError || hasValidationError, "$isFocused": isFocused, "$isLight": isLight, children: [jsxs(Fragment, { children: [jsx(NumberInput, { ref: hourInputRef, "data-cy": `date-range-picker-${isStartDate ? 'start' : 'end'}-hour`, defaultValue: controlledDefaultValue && controlledDefaultValue[0], 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, { ref: minuteInputRef, "data-cy": `date-range-picker-${isStartDate ? 'start' : 'end'}-minute`, defaultValue: controlledDefaultValue && controlledDefaultValue[1], 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 })] }), isRangedTimePickerOpenRef.current && (jsx(RangedTimePicker, { filter: rangedTimePickerFilter, minutesRange: minutesRange, onChange: handleRangedTimePickedChange }))] }));
 }
 const TimeInput = forwardRef(TimeInputWithRef);
 const Box$3 = styled.span `
-  background-color: ${p => 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]}`
+  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]}`
     : 'none'};
   color: ${p => p.theme.color.slateGray};
   display: inline-block;
@@ -3832,7 +3869,7 @@ var DateRangePosition;
     DateRangePosition["START"] = "START";
 })(DateRangePosition || (DateRangePosition = {}));
 
-function DateRangePicker({ defaultValue, isHistorical = false, isLabelHidden = false, label, minutesRange = 15, onChange, withTime = false }) {
+function DateRangePicker({ defaultValue, isHistorical = false, isLabelHidden = false, isLight = false, label, minutesRange = 15, onChange, withTime = false }) {
     const startDateInputRef = useRef();
     const startTimeInputRef = useRef();
     const endDateInputRef = useRef();
@@ -3981,7 +4018,7 @@ function DateRangePicker({ defaultValue, isHistorical = false, isLabelHidden = f
             window.document.removeEventListener('click', handleClickOutside);
         };
     }, [handleClickOutside]);
-    return (jsxs(Fieldset, { className: "DateRangePicker", children: [jsx(Legend, { isHidden: isLabelHidden, children: label }), jsxs(Box$2, { children: [jsx(Field$1, { children: jsx(DateInput, { ref: startDateInputRef, defaultValue: selectedStartDateTupleRef.current, isForcedFocused: isRangeCalendarPickerOpenRef.current, isStartDate: true, onChange: nextDateTuple => handleDateInputFilled(DateRangePosition.START, nextDateTuple), onClick: openRangeCalendarPicker, onNext: handleStartDateInputNext }) }), withTime && (jsx(Field$1, { isTimeField: true, children: jsx(TimeInput, { ref: startTimeInputRef, defaultValue: selectedStartTimeTupleRef.current, 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$1, { isEndDateField: true, children: jsx(DateInput, { ref: endDateInputRef, defaultValue: selectedEndDateTupleRef.current, isEndDate: true, isForcedFocused: isRangeCalendarPickerOpenRef.current, onBack: handleEndDateInputPrevious, onChange: nextDateTuple => handleDateInputFilled(DateRangePosition.END, nextDateTuple), onClick: openRangeCalendarPicker, onNext: handleEndDateInputNext, onPrevious: handleEndDateInputPrevious }) }), withTime && (jsx(Field$1, { isTimeField: true, children: jsx(TimeInput, { ref: endTimeInputRef, defaultValue: selectedEndTimeTupleRef.current, minutesRange: minutesRange, onBack: () => endDateInputRef.current.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.END, nextTimeTuple), onFocus: closeRangeCalendarPicker, onPrevious: () => endDateInputRef.current.focus(true) }) }))] }), isRangeCalendarPickerOpenRef.current && (jsx(RangeCalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, onChange: handleRangeCalendarPickerChange }))] }));
+    return (jsxs(Fieldset, { className: "DateRangePicker", children: [jsx(Legend, { isHidden: isLabelHidden, children: label }), jsxs(Box$2, { children: [jsx(Field$1, { children: jsx(DateInput, { ref: startDateInputRef, defaultValue: selectedStartDateTupleRef.current, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, isStartDate: true, onChange: nextDateTuple => handleDateInputFilled(DateRangePosition.START, nextDateTuple), onClick: openRangeCalendarPicker, onNext: handleStartDateInputNext }) }), withTime && (jsx(Field$1, { isTimeField: true, children: jsx(TimeInput, { ref: startTimeInputRef, defaultValue: selectedStartTimeTupleRef.current, 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$1, { isEndDateField: true, children: jsx(DateInput, { ref: endDateInputRef, defaultValue: selectedEndDateTupleRef.current, isEndDate: true, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, onBack: handleEndDateInputPrevious, onChange: nextDateTuple => handleDateInputFilled(DateRangePosition.END, nextDateTuple), onClick: openRangeCalendarPicker, onNext: handleEndDateInputNext, onPrevious: handleEndDateInputPrevious }) }), withTime && (jsx(Field$1, { isTimeField: true, children: jsx(TimeInput, { ref: endTimeInputRef, defaultValue: selectedEndTimeTupleRef.current, isLight: isLight, minutesRange: minutesRange, onBack: () => endDateInputRef.current.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.END, nextTimeTuple), onFocus: closeRangeCalendarPicker, onPrevious: () => endDateInputRef.current.focus(true) }) }))] }), isRangeCalendarPickerOpenRef.current && (jsx(RangeCalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, onChange: handleRangeCalendarPickerChange }))] }));
 }
 const Box$2 = styled.div `
   * {
@@ -4129,7 +4166,7 @@ const Box$1 = styled.div `
   }
 `;
 
-function DatePicker({ defaultValue, isHistorical = false, isLabelHidden = false, label, minutesRange = 15, onChange, withTime = false }) {
+function DatePicker({ defaultValue, isHistorical = false, isLabelHidden = false, isLight = false, label, minutesRange = 15, onChange, withTime = false }) {
     const dateInputRef = useRef();
     const timeInputRef = useRef();
     const isCalendarPickerOpenRef = useRef(false);
@@ -4218,7 +4255,7 @@ function DatePicker({ defaultValue, isHistorical = false, isLabelHidden = false,
             window.document.removeEventListener('click', handleClickOutside);
         };
     }, [handleClickOutside]);
-    return (jsxs(Fieldset, { className: "DateRangePicker", children: [jsx(Legend, { isHidden: isLabelHidden, children: label }), jsxs(Box, { children: [jsx(Field, { children: jsx(DateInput, { ref: dateInputRef, defaultValue: selectedDateTupleRef.current, isForcedFocused: isCalendarPickerOpenRef.current, onChange: handleDateInputFilled, onClick: openCalendarPicker, onNext: handleDateInputNext }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: timeInputRef, defaultValue: selectedTimeTupleRef.current, minutesRange: minutesRange, onBack: () => dateInputRef.current.focus(true), onChange: handleTimeInputFilled, onFocus: closeCalendarPicker, onPrevious: () => dateInputRef.current.focus(true) }) }))] }), isCalendarPickerOpenRef.current && (jsx(CalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, onChange: handleCalendarPickerChange }))] }));
+    return (jsxs(Fieldset, { className: "DateRangePicker", children: [jsx(Legend, { isHidden: isLabelHidden, children: label }), jsxs(Box, { children: [jsx(Field, { children: jsx(DateInput, { ref: dateInputRef, defaultValue: selectedDateTupleRef.current, isForcedFocused: isCalendarPickerOpenRef.current, isLight: isLight, onChange: handleDateInputFilled, onClick: openCalendarPicker, onNext: handleDateInputNext }) }), withTime && (jsx(Field, { "$isTimeField": true, children: jsx(TimeInput, { ref: timeInputRef, defaultValue: selectedTimeTupleRef.current, isLight: isLight, minutesRange: minutesRange, onBack: () => dateInputRef.current.focus(true), onChange: handleTimeInputFilled, onFocus: closeCalendarPicker, onPrevious: () => dateInputRef.current.focus(true) }) }))] }), isCalendarPickerOpenRef.current && (jsx(CalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, onChange: handleCalendarPickerChange }))] }));
 }
 const Box = styled.div `
   * {
@@ -4232,15 +4269,10 @@ const Box = styled.div `
 `;
 const Field = styled.span `
   font-size: inherit;
-  margin-left: ${p => {
-    if (p.isEndDateField) {
-        return '10px';
-    }
-    return p.isTimeField ? '2px' : 0;
-}};
+  margin-left: ${p => (p.$isTimeField ? '2px' : 0)};
 `;
 
-function MultiCheckbox({ defaultValue = [], isInline = false, isLabelHidden = false, label, name, onChange, options }) {
+function MultiCheckbox({ defaultValue = [], isInline = false, isLabelHidden = false, isLight = false, label, name, onChange, options }) {
     const checkedOptionValues = useRef(defaultValue);
     const key = useMemo(() => `${name}-${JSON.stringify(defaultValue)}`, [defaultValue, name]);
     const handleChange = useCallback((nextOptionValue, isChecked) => {
@@ -4253,9 +4285,9 @@ function MultiCheckbox({ defaultValue = [], isInline = false, isLabelHidden = fa
             onChange(normalizedNextValue);
         }
     }, [onChange]);
-    return (jsxs(Fieldset, { children: [jsx(Legend, { isHidden: isLabelHidden, children: label }), jsx(ChecboxesBox$1, { "$isInline": isInline, children: options.map((option, index) => (jsx(Checkbox
-                // eslint-disable-next-line react/no-array-index-key
-                , { defaultChecked: defaultValue.includes(option.value), label: option.label, name: `${name}${index}`, onChange: (isChecked) => handleChange(option.value, isChecked) }, `${name}-${index}`))) })] }, key));
+    return (jsx(Fieldset, { isHidden: isLabelHidden, isLight: isLight, legend: label, children: jsx(ChecboxesBox$1, { "$isInline": isInline, children: options.map((option, index) => (jsx(Checkbox
+            // eslint-disable-next-line react/no-array-index-key
+            , { defaultChecked: defaultValue.includes(option.value), label: option.label, name: `${name}${index}`, onChange: (isChecked) => handleChange(option.value, isChecked) }, `${name}-${index}`))) }) }, key));
 }
 const ChecboxesBox$1 = styled.div `
   color: ${p => p.theme.color.gunMetal};
@@ -4303,7 +4335,7 @@ const StyledTagPicker = styled(TagPicker) `
   }
 `;
 
-function MultiRadio({ defaultValue, isInline = false, isLabelHidden = false, label, name, onChange, options }) {
+function MultiRadio({ defaultValue, isInline = false, isLabelHidden = false, isLight = false, label, name, onChange, options }) {
     const [checkedOptionValue, setCheckedOptionValue] = useState(undefined);
     const key = useMemo(() => `${name}-${String(checkedOptionValue)}}`, [checkedOptionValue, name]);
     const handleChange = useCallback((nextOptionValue, isChecked) => {
@@ -4320,9 +4352,9 @@ function MultiRadio({ defaultValue, isInline = false, isLabelHidden = false, lab
     useEffect(() => {
         setCheckedOptionValue(defaultValue);
     }, [defaultValue]);
-    return (jsxs(Fieldset, { children: [jsx(Legend, { isHidden: isLabelHidden, children: label }), jsx(ChecboxesBox, { "$isInline": isInline, children: options.map((option, index) => (jsx(Radio
-                // eslint-disable-next-line react/no-array-index-key
-                , { defaultChecked: option.value === checkedOptionValue, name: name, onChange: (_, isChecked) => handleChange(option.value, isChecked), children: option.label }, `${name}-${index}`))) })] }, key));
+    return (jsx(Fieldset, { isHidden: isLabelHidden, isLight: isLight, legend: label, children: jsx(ChecboxesBox, { "$isInline": isInline, children: options.map((option, index) => (jsx(Radio
+            // eslint-disable-next-line react/no-array-index-key
+            , { defaultChecked: option.value === checkedOptionValue, name: name, onChange: (_, isChecked) => handleChange(option.value, isChecked), children: option.label }, `${name}-${index}`))) }) }, key));
 }
 const ChecboxesBox = styled.div `
   color: ${p => p.theme.color.gunMetal};
@@ -4333,7 +4365,7 @@ const ChecboxesBox = styled.div `
   > .rs-radio {
     > .rs-radio-checker {
       min-height: 0;
-      padding: 2px 0 0 28px;
+      padding: 0 0 0 28px;
 
       .rs-radio-wrapper {
         left: 2px;
@@ -4357,206 +4389,6 @@ const ChecboxesBox = styled.div `
     `}
 `;
 
-function Select({ isLabelHidden = false, isLight = false, label, onChange, options, 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-searchable = false, ...originalProps }) {
-    const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
-    const handleChange = useCallback((nextValue) => {
-        if (!onChange) {
-            return;
-        }
-        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 StyledSelectPicker = styled(SelectPicker) `
-  > .rs-picker-toggle {
-    background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)} !important;
-    border: 0;
-  }
-`;
-
-function Textarea({ isLabelHidden = false, isLight = false, label, onChange, rows = 3, ...originalProps }) {
-    const inputRef = useRef();
-    const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
-    const handleChange = useCallback(() => {
-        if (!onChange) {
-            return;
-        }
-        const nextValue = inputRef.current.value.trim();
-        const normalizedNextValue = nextValue.length ? nextValue : undefined;
-        onChange(normalizedNextValue);
-    }, [onChange]);
-    return (jsxs(Field$2, { children: [jsx(Label, { htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput$1, { ref: inputRef, "$isLight": isLight, as: "textarea", id: originalProps.name, onChange: handleChange, rows: rows, ...originalProps }, key)] }));
-}
-const StyledInput$1 = styled(Input) `
-  background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
-  border: 0;
-  font-size: 13px;
-  padding: 7px 11px;
-  width: 100%;
-`;
-
-function TextInput({ isLabelHidden = false, isLight = false, label, onChange, ...originalProps }) {
-    const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
-    const handleChange = useCallback((nextValue) => {
-        if (!onChange) {
-            return;
-        }
-        const normalizedNextValue = nextValue && nextValue.trim().length ? nextValue : undefined;
-        onChange(normalizedNextValue);
-    }, [onChange]);
-    return (jsxs(Field$2, { children: [jsx(Label, { htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput, { "$isLight": isLight, id: originalProps.name, onChange: handleChange, ...originalProps }, key)] }));
-}
-const StyledInput = styled(Input) `
-  background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
-  border: 0;
-  font-size: 13px;
-  width: 100%;
-`;
-
-function FormikAutoComplete({ name, ...originalProps }) {
-    const [field, , helpers] = useField(name);
-    // eslint-disable-next-line react-hooks/exhaustive-deps, @typescript-eslint/naming-convention
-    const defaultValue = useMemo(() => field.value, []);
-    const handleChange = useCallback((nextValue) => {
-        helpers.setValue(nextValue);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(() => () => helpers.setValue(undefined), []);
-    return jsx(AutoComplete, { defaultValue: defaultValue, name: name, onChange: handleChange, ...originalProps });
-}
-
-function FormikCheckbox({ name, ...originalProps }) {
-    const [field, , helpers] = useField(name);
-    // eslint-disable-next-line react-hooks/exhaustive-deps, @typescript-eslint/naming-convention
-    const defaultChecked = useMemo(() => Boolean(field.value), []);
-    const handleChange = useCallback((isChecked) => {
-        helpers.setValue(isChecked);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(() => () => helpers.setValue(undefined), []);
-    return jsx(Checkbox, { defaultChecked: defaultChecked, name: name, onChange: handleChange, ...originalProps });
-}
-
-function FormikDatePicker({ name, ...originalProps }) {
-    const [field, , helpers] = useField(name);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const defaultValue = useMemo(() => field.value, []);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(() => () => helpers.setValue(undefined), []);
-    return jsx(DatePicker, { defaultValue: defaultValue, onChange: helpers.setValue, ...originalProps });
-}
-
-function FormikDateRangePicker({ name, ...originalProps }) {
-    const [field, , helpers] = useField(name);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const defaultValue = useMemo(() => field.value, []);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(() => () => helpers.setValue(undefined), []);
-    return jsx(DateRangePicker, { defaultValue: defaultValue, onChange: helpers.setValue, ...originalProps });
-}
-
-function FormikEffect({ onChange }) {
-    const { values } = useFormikContext();
-    useEffect(() => {
-        onChange(values);
-    }, [onChange, values]);
-    return jsx(Fragment, {});
-}
-
-function FormikMultiCheckbox({ name, ...originalProps }) {
-    const [field, , helpers] = useField(name);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const defaultValue = useMemo(() => field.value, []);
-    const handleChange = useCallback((nextValue) => {
-        helpers.setValue(nextValue);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(() => () => helpers.setValue(undefined), []);
-    return jsx(MultiCheckbox, { defaultValue: defaultValue, name: name, onChange: handleChange, ...originalProps });
-}
-
-function FormikMultiSelect({ name, ...originalProps }) {
-    const [field, , helpers] = useField(name);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const defaultValue = useMemo(() => field.value, []);
-    const handleChange = useCallback((nextValue) => {
-        helpers.setValue(nextValue);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(() => () => helpers.setValue(undefined), []);
-    return jsx(MultiSelect, { defaultValue: defaultValue, name: name, onChange: handleChange, ...originalProps });
-}
-
-function FormikMultiRadio({ name, ...originalProps }) {
-    const [field, , helpers] = useField(name);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const defaultValue = useMemo(() => field.value, []);
-    const handleChange = useCallback((nextValue) => {
-        helpers.setValue(nextValue);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(() => () => helpers.setValue(undefined), []);
-    return jsx(MultiRadio, { defaultValue: defaultValue, name: name, onChange: handleChange, ...originalProps });
-}
-
-function FormikSelect({ name, ...originalProps }) {
-    const [field, , helpers] = useField(name);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const defaultValue = useMemo(() => field.value, []);
-    const handleChange = useCallback((nextValue) => {
-        helpers.setValue(nextValue);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(() => () => helpers.setValue(undefined), []);
-    return jsx(Select, { defaultValue: defaultValue, name: name, onChange: handleChange, ...originalProps });
-}
-
-function FormikTextarea({ name, ...originalProps }) {
-    const [field, , helpers] = useField(name);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const defaultValue = useMemo(() => field.value, []);
-    const handleChange = useCallback((nextValue) => {
-        helpers.setValue(nextValue);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(() => () => helpers.setValue(undefined), []);
-    return jsx(Textarea, { defaultValue: defaultValue, name: name, onChange: handleChange, ...originalProps });
-}
-
-function FormikTextInput({ name, ...originalProps }) {
-    const [field, , helpers] = useField(name);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const defaultValue = useMemo(() => field.value, []);
-    const handleChange = useCallback((nextValue) => {
-        helpers.setValue(nextValue);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(() => () => helpers.setValue(undefined), []);
-    return jsx(TextInput, { defaultValue: defaultValue, name: name, onChange: handleChange, ...originalProps });
-}
-
 /**
  * Internal component used to wrap SVG icon components
  */
@@ -4895,5 +4727,263 @@ var index = /*#__PURE__*/Object.freeze({
     ViewOnMap: ViewOnMap
 });
 
-export { Accent, AutoComplete, Button, Checkbox, DatePicker, DateRangePicker, Dropdown, Field$2 as Field, Fieldset, FormikAutoComplete, FormikCheckbox, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, Select, Size, THEME, Tag$1 as Tag, TextInput, Textarea, ThemeProvider };
+function MultiZoneEditor({ addButtonLabel, defaultValue = [], initialZone, isLabelHidden = false, isLight = false, label, labelPropName, onAdd, onCenter, onDelete, onEdit }) {
+    const prevDefaultValueRef = useRef(defaultValue);
+    const [zones, setZones] = useState(defaultValue);
+    const addZone = useCallback(() => {
+        const nextZones = [...zones, initialZone];
+        if (onAdd) {
+            onAdd(nextZones, nextZones.length);
+        }
+        setZones(nextZones);
+    }, [initialZone, onAdd, zones]);
+    const centerZone = useCallback((zone) => {
+        if (onCenter) {
+            onCenter(zone);
+        }
+    }, [onCenter]);
+    const deleteZone = useCallback((index) => {
+        const nextZones = remove(index, 1, zones);
+        setZones(nextZones);
+        if (onDelete) {
+            onDelete(nextZones);
+        }
+    }, [onDelete, zones]);
+    const editZone = useCallback((index, zone) => {
+        if (onEdit) {
+            onEdit(zone, index);
+        }
+    }, [onEdit]);
+    useEffect(() => {
+        if (equals(defaultValue, prevDefaultValueRef.current)) {
+            return;
+        }
+        setZones(defaultValue);
+    }, [defaultValue]);
+    return (jsxs(Fieldset, { isHidden: isLabelHidden, isLight: isLight, legend: label, children: [jsx(Button, { accent: Accent.SECONDARY, Icon: Plus, isFullWidth: true, onClick: addZone, children: addButtonLabel }), jsx(Fragment, { children: zones.map((zone, index) => (
+                // eslint-disable-next-line react/no-array-index-key
+                jsxs(Row, { children: [jsxs(ZoneWrapper, { children: [zone[labelPropName], jsxs("a", { onClick: () => centerZone(zone), style: {
+                                        cursor: 'pointer'
+                                    }, children: [jsx(SelectRectangle, {}), " Centrer sur la carte"] })] }), jsx(IconButton, { accent: Accent.SECONDARY, Icon: Edit, onClick: () => editZone(index, zone) }), jsx(IconButton, { accent: Accent.SECONDARY, "aria-label": "Supprimer cette zone", Icon: Delete, onClick: () => deleteZone(index) })] }, `zone-${index}`))) })] }));
+}
+const Row = styled.div `
+  align-items: center;
+  display: flex;
+  margin: 8px 0 0;
+
+  > button {
+    margin: 0 0 0 8px;
+  }
+`;
+const ZoneWrapper = styled.div `
+  background-color: ${p => p.theme.color.gainsboro};
+  display: flex;
+  flex-grow: 1;
+  font-size: 13px;
+  line-height: 1.5;
+  justify-content: space-between;
+  padding: 6px 12px 6px;
+`;
+
+function Select({ isLabelHidden = false, isLight = false, label, onChange, options, 
+// eslint-disable-next-line @typescript-eslint/naming-convention
+searchable = false, ...originalProps }) {
+    const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
+    const handleChange = useCallback((nextValue) => {
+        if (!onChange) {
+            return;
+        }
+        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 StyledSelectPicker = styled(SelectPicker) `
+  > .rs-picker-toggle {
+    background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)} !important;
+    border: 0;
+  }
+`;
+
+function Textarea({ isLabelHidden = false, isLight = false, label, onChange, rows = 3, ...originalProps }) {
+    const inputRef = useRef();
+    const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
+    const handleChange = useCallback(() => {
+        if (!onChange) {
+            return;
+        }
+        const nextValue = inputRef.current.value.trim();
+        const normalizedNextValue = nextValue.length ? nextValue : undefined;
+        onChange(normalizedNextValue);
+    }, [onChange]);
+    return (jsxs(Field$2, { children: [jsx(Label, { htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput$1, { ref: inputRef, "$isLight": isLight, as: "textarea", id: originalProps.name, onChange: handleChange, rows: rows, ...originalProps }, key)] }));
+}
+const StyledInput$1 = styled(Input) `
+  background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
+  border: 0;
+  font-size: 13px;
+  padding: 7px 11px;
+  width: 100%;
+`;
+
+function TextInput({ isLabelHidden = false, isLight = false, label, onChange, ...originalProps }) {
+    const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
+    const handleChange = useCallback((nextValue) => {
+        if (!onChange) {
+            return;
+        }
+        const normalizedNextValue = nextValue && nextValue.trim().length ? nextValue : undefined;
+        onChange(normalizedNextValue);
+    }, [onChange]);
+    return (jsxs(Field$2, { children: [jsx(Label, { htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput, { "$isLight": isLight, id: originalProps.name, onChange: handleChange, ...originalProps }, key)] }));
+}
+const StyledInput = styled(Input) `
+  background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
+  border: 0;
+  font-size: 13px;
+  width: 100%;
+`;
+
+function FormikAutoComplete({ name, ...originalProps }) {
+    const [field, , helpers] = useField(name);
+    // eslint-disable-next-line react-hooks/exhaustive-deps, @typescript-eslint/naming-convention
+    const defaultValue = useMemo(() => field.value, []);
+    const handleChange = useCallback((nextValue) => {
+        helpers.setValue(nextValue);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => () => helpers.setValue(undefined), []);
+    return jsx(AutoComplete, { defaultValue: defaultValue, name: name, onChange: handleChange, ...originalProps });
+}
+
+function FormikCheckbox({ name, ...originalProps }) {
+    const [field, , helpers] = useField(name);
+    // eslint-disable-next-line react-hooks/exhaustive-deps, @typescript-eslint/naming-convention
+    const defaultChecked = useMemo(() => Boolean(field.value), []);
+    const handleChange = useCallback((isChecked) => {
+        helpers.setValue(isChecked);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => () => helpers.setValue(undefined), []);
+    return jsx(Checkbox, { defaultChecked: defaultChecked, name: name, onChange: handleChange, ...originalProps });
+}
+
+function FormikDatePicker({ name, ...originalProps }) {
+    const [field, , helpers] = useField(name);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const defaultValue = useMemo(() => field.value, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => () => helpers.setValue(undefined), []);
+    return jsx(DatePicker, { defaultValue: defaultValue, onChange: helpers.setValue, ...originalProps });
+}
+
+function FormikDateRangePicker({ name, ...originalProps }) {
+    const [field, , helpers] = useField(name);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const defaultValue = useMemo(() => field.value, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => () => helpers.setValue(undefined), []);
+    return jsx(DateRangePicker, { defaultValue: defaultValue, onChange: helpers.setValue, ...originalProps });
+}
+
+function FormikEffect({ onChange }) {
+    const { values } = useFormikContext();
+    useEffect(() => {
+        onChange(values);
+    }, [onChange, values]);
+    return jsx(Fragment, {});
+}
+
+function FormikMultiCheckbox({ name, ...originalProps }) {
+    const [field, , helpers] = useField(name);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const defaultValue = useMemo(() => field.value, []);
+    const handleChange = useCallback((nextValue) => {
+        helpers.setValue(nextValue);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => () => helpers.setValue(undefined), []);
+    return jsx(MultiCheckbox, { defaultValue: defaultValue, name: name, onChange: handleChange, ...originalProps });
+}
+
+function FormikMultiSelect({ name, ...originalProps }) {
+    const [field, , helpers] = useField(name);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const defaultValue = useMemo(() => field.value, []);
+    const handleChange = useCallback((nextValue) => {
+        helpers.setValue(nextValue);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => () => helpers.setValue(undefined), []);
+    return jsx(MultiSelect, { defaultValue: defaultValue, name: name, onChange: handleChange, ...originalProps });
+}
+
+function FormikMultiRadio({ name, ...originalProps }) {
+    const [field, , helpers] = useField(name);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const defaultValue = useMemo(() => field.value, []);
+    const handleChange = useCallback((nextValue) => {
+        helpers.setValue(nextValue);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => () => helpers.setValue(undefined), []);
+    return jsx(MultiRadio, { defaultValue: defaultValue, name: name, onChange: handleChange, ...originalProps });
+}
+
+function FormikSelect({ name, ...originalProps }) {
+    const [field, , helpers] = useField(name);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const defaultValue = useMemo(() => field.value, []);
+    const handleChange = useCallback((nextValue) => {
+        helpers.setValue(nextValue);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => () => helpers.setValue(undefined), []);
+    return jsx(Select, { defaultValue: defaultValue, name: name, onChange: handleChange, ...originalProps });
+}
+
+function FormikTextarea({ name, ...originalProps }) {
+    const [field, , helpers] = useField(name);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const defaultValue = useMemo(() => field.value, []);
+    const handleChange = useCallback((nextValue) => {
+        helpers.setValue(nextValue);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => () => helpers.setValue(undefined), []);
+    return jsx(Textarea, { defaultValue: defaultValue, name: name, onChange: handleChange, ...originalProps });
+}
+
+function FormikTextInput({ name, ...originalProps }) {
+    const [field, , helpers] = useField(name);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const defaultValue = useMemo(() => field.value, []);
+    const handleChange = useCallback((nextValue) => {
+        helpers.setValue(nextValue);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => () => helpers.setValue(undefined), []);
+    return jsx(TextInput, { defaultValue: defaultValue, name: name, onChange: handleChange, ...originalProps });
+}
+
+export { Accent, AutoComplete, Button, Checkbox, DatePicker, DateRangePicker, Dropdown, Field$2 as Field, Fieldset, FormikAutoComplete, FormikCheckbox, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, Select, Size, THEME, Tag$1 as Tag, TextInput, Textarea, ThemeProvider };
 //# sourceMappingURL=index.js.map