@mtes-mct/monitor-ui 6.6.0 → 7.1.0

package/icons/MissionAction.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function MissionAction({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function MissionAction({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/icons/More.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function More({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function More({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/icons/Note.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function Note({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function Note({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/icons/Observation.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function Observation({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function Observation({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/icons/Pin.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function Pin({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function Pin({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/icons/Pinpoint.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function Pinpoint({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function Pinpoint({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/icons/PinpointHide.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function PinpointHide({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function PinpointHide({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/icons/Plane.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function Plane({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function Plane({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/icons/Plus.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function Plus({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function Plus({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/icons/Reject.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function Reject({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function Reject({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/icons/Report.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function Report({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function Report({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/icons/Save.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function Save({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function Save({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/icons/Search.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function Search({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function Search({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/icons/SelectCircle.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function SelectCircle({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function SelectCircle({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/icons/SelectPolygon.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function SelectPolygon({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function SelectPolygon({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/icons/SelectRectangle.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function SelectRectangle({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function SelectRectangle({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/icons/SelectZone.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function SelectZone({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function SelectZone({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/icons/Semaphore.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function Semaphore({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function Semaphore({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/icons/ShowErsMessages.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function ShowErsMessages({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function ShowErsMessages({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/icons/ShowXml.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function ShowXml({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function ShowXml({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/icons/SortingArrows.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function SortingArrows({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function SortingArrows({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/icons/Summary.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function Summary({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function Summary({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/icons/Tag.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function Tag({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function Tag({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/icons/Target.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function Target({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function Target({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/icons/Unlock.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function Unlock({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function Unlock({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/icons/Vessel.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function Vessel({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function Vessel({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/icons/ViewOnMap.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function ViewOnMap({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function ViewOnMap({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/icons/Vms.d.ts

@@ -1,2 +1,2 @@
 import type { IconProps } from '../types';
-export declare function Vms({ color, size, ...nativeProps }: IconProps): JSX.Element;
+export declare function Vms({ color, size, ...nativeProps }: IconProps): import("react/jsx-runtime").JSX.Element;

package/index.d.ts

@@ -17,6 +17,7 @@ export { SingleTag } from './components/SingleTag';
 export { Button } from './elements/Button';
 export { Field } from './elements/Field';
 export { Fieldset } from './elements/Fieldset';
+export { FieldError } from './elements/FieldError';
 export { IconButton } from './elements/IconButton';
 export { Label } from './elements/Label';
 export { Legend } from './elements/Legend';
@@ -73,6 +74,7 @@ export type { SingleTagProps } from './components/SingleTag';
 export type { ButtonProps } from './elements/Button';
 export type { FieldProps } from './elements/Field';
 export type { FieldsetProps } from './elements/Fieldset';
+export type { FieldErrorProps } from './elements/FieldError';
 export type { IconButtonProps } from './elements/IconButton';
 export type { LabelProps } from './elements/Label';
 export type { LegendProps } from './elements/Legend';

package/index.js

@@ -3263,6 +3263,17 @@ const InnerBox = styled.div `
     `}
 `;
 
+const FieldError = styled.p.attrs(props => ({
+    className: classnames('Element-FieldError', props.className)
+})) `
+  color: ${p => p.theme.color.maximumRed};
+  display: ${p => (p.isDisabled ? 'none' : 'block')};
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.3846;
+  margin: 4px 0 0 0;
+`;
+
 const Label = styled.label.attrs(props => ({
     className: classnames('Element-Label', props.className)
 })) `
@@ -3429,17 +3440,6 @@ const SimpleTable = {
     Th
 };
 
-const FieldError = styled.p.attrs(props => ({
-    className: classnames('Element-FieldError', props.className)
-})) `
-  color: ${p => p.theme.color.maximumRed};
-  display: ${p => (p.isDisabled ? 'none' : 'block')};
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 1.3846;
-  margin: 4px 0 0 0;
-`;
-
 const useClickOutsideEffect = (zoneRefOrzoneRefs, action, baseContainer) => {
     const handleClickOutside = useCallback((event) => {
         const eventTarget = event.target;
@@ -20739,7 +20739,7 @@ function normalizeString(text) {
     return cleanText.length > 0 ? cleanText : undefined;
 }
 
-function Search({ baseContainer, className, customSearch = undefined, customSearchMinQueryLength = 1, error, isErrorMessageHidden = false, isLabelHidden, isLight = false, isSearchIconVisible = true, label, MenuItem, onChange, onQuery, options = [], optionValueKey, value, ...originalProps }) {
+function Search({ baseContainer, className, customSearch = undefined, customSearchMinQueryLength = 1, error, isErrorMessageHidden = false, isLabelHidden, isLight = false, isSearchIconVisible = true, label, MenuItem, onChange, onQuery, options = [], optionValueKey, style, value, ...originalProps }) {
     // eslint-disable-next-line no-null/no-null
     const boxRef = useRef(null);
     /** Instance of `CustomSearch` */
@@ -20799,7 +20799,7 @@ function Search({ baseContainer, className, customSearch = undefined, customSear
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
-    return (jsxs(Field$2, { className: controlledClassName, children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsxs(Box$d, { ref: boxRef, isLight: isLight, children: [boxRef.current && (jsx(StyledAutoComplete, { "$isLight": isLight, container: boxRef.current, 
+    return (jsxs(Field$2, { className: controlledClassName, style: style, children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsxs(Box$d, { ref: boxRef, isLight: isLight, children: [boxRef.current && (jsx(StyledAutoComplete, { "$isLight": isLight, container: boxRef.current, 
                         // When we use a custom search, we use `controlledRsuiteData` to provide the matching options (data),
                         // when we don't, we don't need to control that and just pass the non-internally-controlled `rsuiteData`
                         data: controlledRsuiteData || data, 
@@ -20869,7 +20869,8 @@ const Box$d = styled.div `
   }
 `;
 
-function Checkbox({ checked = false, error, isErrorMessageHidden = false, isUndefinedWhenDisabled = false, label, onChange, ...originalProps }) {
+function Checkbox({ checked = false, className, error, isErrorMessageHidden = false, isUndefinedWhenDisabled = false, label, onChange, style, ...originalProps }) {
+    const controlledClassName = useMemo(() => classnames('Field-Checkbox', className), [className]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const key = getPseudoRandomString();
@@ -20880,7 +20881,7 @@ function Checkbox({ checked = false, error, isErrorMessageHidden = false, isUnde
         onChange(isChecked);
     }, [onChange]);
     useFieldUndefineEffect(isUndefinedWhenDisabled && originalProps.disabled, onChange);
-    return (jsxs(Field$2, { className: "Field-Checkbox", children: [jsx(StyledCheckbox, { checked: checked, id: originalProps.name, onChange: handleChange, ...originalProps, children: label }, key), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
+    return (jsxs(Field$2, { className: controlledClassName, style: style, children: [jsx(StyledCheckbox, { checked: checked, id: originalProps.name, onChange: handleChange, ...originalProps, children: label }, key), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledCheckbox = styled(Checkbox$1) `
   > .rs-checkbox-checker {
@@ -21754,7 +21755,7 @@ const InputGroup = styled.div `
   }
 `;
 
-function DatePicker({ baseContainer, className, defaultValue, disabled = false, error, isCompact = false, isEndDate = false, isErrorMessageHidden = false, isHistorical = false, isLabelHidden = false, isLight = false, isStringDate = false, isUndefinedWhenDisabled = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
+function DatePicker({ baseContainer, className, defaultValue, disabled = false, error, isCompact = false, isEndDate = false, isErrorMessageHidden = false, isHistorical = false, isLabelHidden = false, isLight = false, isStringDate = false, isUndefinedWhenDisabled = false, label, minutesRange = 15, onChange, style, withTime = false, ...nativeProps }) {
     /* eslint-disable no-null/no-null */
     const boxRef = useRef(null);
     const dateInputRef = useRef(null);
@@ -21893,7 +21894,7 @@ function DatePicker({ baseContainer, className, defaultValue, disabled = false,
         selectedUtcTimeTupleRef.current = getUtcTimeTupleFromDayjs(selectedUtcDateAsDayjsRef.current);
         forceUpdate();
     }, [defaultValue, forceUpdate, previousDefaultValue]);
-    return (jsxs(Fieldset, { className: controlledClassName, disabled: disabled, hasError: hasError, isLegendHidden: isLabelHidden, legend: label, ...nativeProps, children: [jsxs(Box$8, { ref: boxRef, "$hasError": hasError, "$isDisabled": disabled, children: [jsx(Field$1, { children: jsx(DateInput, { ref: dateInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isEndDate: isEndDate, isForcedFocused: isCalendarPickerOpenRef.current, isLight: isLight, onChange: handleDateInputChange, onClick: openCalendarPicker, onInput: handleDateOrTimeInputInput, onNext: handleDateInputNext, value: selectedUtcDateTupleRef.current }) }), withTime && (jsx(Field$1, { "$isTimeField": true, children: jsx(TimeInput, { ref: timeInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isLight: isLight, minutesRange: minutesRange, onBack: () => dateInputRef.current?.focus(true), onChange: handleTimeInputFilled, onFocus: closeCalendarPicker, onInput: handleDateOrTimeInputInput, onPrevious: () => dateInputRef.current?.focus(true), value: selectedUtcTimeTupleRef.current }, JSON.stringify(selectedUtcTimeTupleRef.current)) }))] }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError }), jsx(CalendarPicker, { isHistorical: isHistorical, isOpen: isCalendarPickerOpenRef.current, onChange: handleCalendarPickerChange, value: calendarPickerDefaultValue })] }));
+    return (jsxs(Fieldset, { className: controlledClassName, disabled: disabled, hasError: hasError, isLegendHidden: isLabelHidden, legend: label, style: style, ...nativeProps, children: [jsxs(Box$8, { ref: boxRef, "$hasError": hasError, "$isDisabled": disabled, children: [jsx(Field$1, { children: jsx(DateInput, { ref: dateInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isEndDate: isEndDate, isForcedFocused: isCalendarPickerOpenRef.current, isLight: isLight, onChange: handleDateInputChange, onClick: openCalendarPicker, onInput: handleDateOrTimeInputInput, onNext: handleDateInputNext, value: selectedUtcDateTupleRef.current }) }), withTime && (jsx(Field$1, { "$isTimeField": true, children: jsx(TimeInput, { ref: timeInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isLight: isLight, minutesRange: minutesRange, onBack: () => dateInputRef.current?.focus(true), onChange: handleTimeInputFilled, onFocus: closeCalendarPicker, onInput: handleDateOrTimeInputInput, onPrevious: () => dateInputRef.current?.focus(true), value: selectedUtcTimeTupleRef.current }, JSON.stringify(selectedUtcTimeTupleRef.current)) }))] }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError }), jsx(CalendarPicker, { isHistorical: isHistorical, isOpen: isCalendarPickerOpenRef.current, onChange: handleCalendarPickerChange, value: calendarPickerDefaultValue })] }));
 }
 const Box$8 = styled.div `
   * {
@@ -22135,7 +22136,7 @@ var DateRangePosition;
     DateRangePosition["START"] = "START";
 })(DateRangePosition || (DateRangePosition = {}));
 
-function DateRangePicker({ baseContainer, className, defaultValue, disabled = false, error, isCompact = false, isErrorMessageHidden = false, isHistorical = false, isLabelHidden = false, isLight = false, isStringDate = false, isUndefinedWhenDisabled = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
+function DateRangePicker({ baseContainer, className, defaultValue, disabled = false, error, isCompact = false, isErrorMessageHidden = false, isHistorical = false, isLabelHidden = false, isLight = false, isStringDate = false, isUndefinedWhenDisabled = false, label, minutesRange = 15, onChange, style, withTime = false, ...nativeProps }) {
     /* eslint-disable no-null/no-null */
     const startDateInputRef = useRef(null);
     const startTimeInputRef = useRef(null);
@@ -22359,7 +22360,7 @@ function DateRangePicker({ baseContainer, className, defaultValue, disabled = fa
         selectedEndTimeTupleRef.current = getUtcTimeTupleFromDayjs(selectedEndDateAsDayjsRef.current);
         forceUpdate();
     }, [defaultValue, forceUpdate, previousDefaultValue]);
-    return (jsxs(Fieldset, { className: controlledClassName, disabled: disabled, hasError: hasError, isLegendHidden: isLabelHidden, legend: label, ...nativeProps, children: [jsxs(Box$6, { "$hasError": hasError, "$isDisabled": disabled, children: [jsx(Field, { children: jsx(DateInput, { ref: startDateInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, isRange: true, isStartDate: true, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.START, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onInput: handleDateOrTimeInputInput, onNext: handleStartDateInputNext, value: selectedStartDateTupleRef.current }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: startTimeInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isLight: isLight, isStartDate: true, minutesRange: minutesRange, onBack: () => startDateInputRef.current?.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.START, nextTimeTuple), onFocus: closeRangeCalendarPicker, onInput: handleDateOrTimeInputInput, onNext: () => endDateInputRef.current?.focus(), onPrevious: () => startDateInputRef.current?.focus(true), value: selectedStartTimeTupleRef.current }) })), jsx(Field, { isEndDateField: true, children: jsx(DateInput, { ref: endDateInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isEndDate: true, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, isRange: true, onBack: handleEndDateInputPrevious, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.END, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onInput: handleDateOrTimeInputInput, onNext: handleEndDateInputNext, onPrevious: handleEndDateInputPrevious, value: selectedEndDateTupleRef.current }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: endTimeInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isEndDate: true, isLight: isLight, minutesRange: minutesRange, onBack: () => endDateInputRef.current?.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.END, nextTimeTuple), onFocus: closeRangeCalendarPicker, onInput: handleDateOrTimeInputInput, onPrevious: () => endDateInputRef.current?.focus(true), value: selectedEndTimeTupleRef.current }) }))] }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError }), jsx(RangeCalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, isOpen: isRangeCalendarPickerOpenRef.current, onChange: handleRangeCalendarPickerChange })] }));
+    return (jsxs(Fieldset, { className: controlledClassName, disabled: disabled, hasError: hasError, isLegendHidden: isLabelHidden, legend: label, style: style, ...nativeProps, children: [jsxs(Box$6, { "$hasError": hasError, "$isDisabled": disabled, children: [jsx(Field, { children: jsx(DateInput, { ref: startDateInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, isRange: true, isStartDate: true, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.START, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onInput: handleDateOrTimeInputInput, onNext: handleStartDateInputNext, value: selectedStartDateTupleRef.current }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: startTimeInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isLight: isLight, isStartDate: true, minutesRange: minutesRange, onBack: () => startDateInputRef.current?.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.START, nextTimeTuple), onFocus: closeRangeCalendarPicker, onInput: handleDateOrTimeInputInput, onNext: () => endDateInputRef.current?.focus(), onPrevious: () => startDateInputRef.current?.focus(true), value: selectedStartTimeTupleRef.current }) })), jsx(Field, { isEndDateField: true, children: jsx(DateInput, { ref: endDateInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isEndDate: true, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, isRange: true, onBack: handleEndDateInputPrevious, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.END, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onInput: handleDateOrTimeInputInput, onNext: handleEndDateInputNext, onPrevious: handleEndDateInputPrevious, value: selectedEndDateTupleRef.current }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: endTimeInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isEndDate: true, isLight: isLight, minutesRange: minutesRange, onBack: () => endDateInputRef.current?.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.END, nextTimeTuple), onFocus: closeRangeCalendarPicker, onInput: handleDateOrTimeInputInput, onPrevious: () => endDateInputRef.current?.focus(true), value: selectedEndTimeTupleRef.current }) }))] }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError }), jsx(RangeCalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, isOpen: isRangeCalendarPickerOpenRef.current, onChange: handleRangeCalendarPickerChange })] }));
 }
 const Box$6 = styled.div `
   * {
@@ -22392,7 +22393,8 @@ const Field = styled.span `
 }};
 `;
 
-function MultiCheckbox({ disabled = false, error, isErrorMessageHidden = false, isInline = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, name, onChange, options, value }) {
+function MultiCheckbox({ className, disabled = false, error, isErrorMessageHidden = false, isInline = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, name, onChange, options, style, value }) {
+    const controlledClassName = useMemo(() => classnames('Field-MultiCheckbox', className), [className]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const key = useKey([value, disabled, name]);
@@ -22407,7 +22409,7 @@ function MultiCheckbox({ disabled = false, error, isErrorMessageHidden = false,
         onChange(normalizedNextValue);
     }, [onChange, value]);
     useFieldUndefineEffect(isUndefinedWhenDisabled && disabled, onChange);
-    return (jsxs(Fieldset, { className: "Field-MultiCheckbox", disabled: disabled, hasError: hasError, isLegendHidden: isLabelHidden, isLight: isLight, legend: label, children: [jsx(ChecboxesBox, { "$hasError": hasError, "$isInline": isInline, children: options.map((option, index) => (jsx(Checkbox, { checked: includes$1(option.value, value || []), disabled: disabled, label: option.label, name: `${name}${index}`, onChange: (isChecked) => handleChange(option.value, isChecked) }, JSON.stringify(option.value)))) }, key), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
+    return (jsxs(Fieldset, { className: controlledClassName, disabled: disabled, hasError: hasError, isLegendHidden: isLabelHidden, isLight: isLight, legend: label, style: style, children: [jsx(ChecboxesBox, { "$hasError": hasError, "$isInline": isInline, children: options.map((option, index) => (jsx(Checkbox, { checked: includes$1(option.value, value || []), disabled: disabled, label: option.label, name: `${name}${index}`, onChange: (isChecked) => handleChange(option.value, isChecked) }, JSON.stringify(option.value)))) }, key), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const ChecboxesBox = styled.div `
   color: ${p => p.theme.color.gunMetal};
@@ -25746,11 +25748,12 @@ class CustomSearch {
     }
 }
 
-function MultiSelect({ baseContainer, customSearch, customSearchMinQueryLength = 1, disabled = false, error, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, options, optionValueKey, searchable = false, value, ...originalProps }) {
+function MultiSelect({ baseContainer, className, customSearch, customSearchMinQueryLength = 1, disabled = false, error, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, options, optionValueKey, searchable = false, style, value, ...originalProps }) {
     // eslint-disable-next-line no-null/no-null
     const boxRef = useRef(null);
     /** Instance of `CustomSearch` */
     const customSearchRef = useRef(customSearch);
+    const controlledClassName = useMemo(() => classnames('Field-MultiSelect', className), [className]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const rsuiteData = useMemo(() => getRsuiteDataFromOptions(options, optionValueKey), [options, optionValueKey]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
@@ -25806,7 +25809,7 @@ function MultiSelect({ baseContainer, customSearch, customSearchMinQueryLength =
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
-    return (jsxs(Field$2, { className: "Field-MultiSelect", children: [jsx(Label, { disabled: disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box$5, { ref: boxRef, "$hasError": hasError, "$isActive": isOpen, "$isLight": isLight, onClick: toggle, children: boxRef.current && (jsx(TagPicker, { container: boxRef.current, 
+    return (jsxs(Field$2, { className: controlledClassName, style: style, children: [jsx(Label, { disabled: disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box$5, { ref: boxRef, "$hasError": hasError, "$isActive": isOpen, "$isLight": isLight, onClick: toggle, children: boxRef.current && (jsx(TagPicker, { container: boxRef.current, 
                     // When we use a custom search, we use `controlledRsuiteData` to provide the matching options (data),
                     // when we don't, we don't need to control that and just pass the non-internally-controlled `rsuiteData`
                     data: controlledRsuiteData || rsuiteData, disabled: disabled, id: originalProps.name, onChange: handleChange, onClick: toggle, onSearch: handleSearch, open: isOpen, renderMenuItem: renderMenuItem, searchable: !!customSearch || searchable, 
@@ -25936,7 +25939,8 @@ const Box$5 = styled.div `
   }
 `;
 
-function MultiRadio({ disabled = false, error, isErrorMessageHidden = false, isInline = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, name, onChange, options, value }) {
+function MultiRadio({ className, disabled = false, error, isErrorMessageHidden = false, isInline = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, name, onChange, options, style, value }) {
+    const controlledClassName = useMemo(() => classnames('Field-MultiRadio', className), [className]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const key = useKey([value, disabled, name]);
@@ -25948,7 +25952,7 @@ function MultiRadio({ disabled = false, error, isErrorMessageHidden = false, isI
         onChange(nextCheckedOptionValue);
     }, [onChange]);
     useFieldUndefineEffect(isUndefinedWhenDisabled && disabled, onChange);
-    return (jsxs(Fieldset, { className: "Field-MultiRadio", disabled: disabled, hasError: hasError, isLegendHidden: isLabelHidden, isLight: isLight, legend: label, children: [jsx(Box$4, { "$hasError": hasError, "$isInline": isInline, children: options.map(option => (jsx(Radio, { checked: equals$1(option.value, value), disabled: disabled, name: name, onChange: (_, isChecked) => handleChange(option.value, isChecked), children: option.label }, JSON.stringify(option.value)))) }, key), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
+    return (jsxs(Fieldset, { className: controlledClassName, disabled: disabled, hasError: hasError, isLegendHidden: isLabelHidden, isLight: isLight, legend: label, style: style, children: [jsx(Box$4, { "$hasError": hasError, "$isInline": isInline, children: options.map(option => (jsx(Radio, { checked: equals$1(option.value, value), disabled: disabled, name: name, onChange: (_, isChecked) => handleChange(option.value, isChecked), children: option.label }, JSON.stringify(option.value)))) }, key), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const Box$4 = styled.div `
   color: ${p => p.theme.color.gunMetal};
@@ -25989,9 +25993,10 @@ const Box$4 = styled.div `
     `}
 `;
 
-function MultiZoneEditor({ addButtonLabel, defaultValue = [], disabled = false, error, initialZone, isAddButtonDisabled = false, isLabelHidden = false, isLight = false, label, labelPropName, onAdd, onCenter, onChange, onDelete, onEdit }) {
+function MultiZoneEditor({ addButtonLabel, className, defaultValue = [], disabled = false, error, initialZone, isAddButtonDisabled = false, isLabelHidden = false, isLight = false, label, labelPropName, onAdd, onCenter, onChange, onDelete, onEdit, style }) {
     const prevDefaultValueRef = useRef(defaultValue);
     const [zones, setZones] = useState(defaultValue);
+    const controlledClassName = useMemo(() => classnames('Field-MultiZoneEditor', className), [className]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const addZone = useCallback(() => {
@@ -26028,7 +26033,7 @@ function MultiZoneEditor({ addButtonLabel, defaultValue = [], disabled = false,
         setZones(defaultValue);
     }, [defaultValue]);
     useFieldUndefineEffect(disabled, onChange, handleDisable);
-    return (jsxs(Fieldset, { className: "Field-MultiZoneEditor", disabled: disabled, isLegendHidden: isLabelHidden, legend: label, children: [jsx(Button, { accent: Accent.SECONDARY, disabled: disabled || isAddButtonDisabled, Icon: Plus, isFullWidth: true, onClick: addZone, children: addButtonLabel }), jsx(Fragment, { children: zones.map((zone, index) => (
+    return (jsxs(Fieldset, { className: controlledClassName, disabled: disabled, isLegendHidden: isLabelHidden, legend: label, style: style, children: [jsx(Button, { accent: Accent.SECONDARY, disabled: disabled || isAddButtonDisabled, 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(ZoneBox, { "$isLight": isLight, children: [zone[labelPropName], jsxs(Link, { onClick: () => centerZone(zone), children: [jsx(SelectRectangle, {}), jsx("span", { children: "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}`))) }), hasError && jsx(FieldError, { children: controlledError })] }));
 }
@@ -35014,12 +35019,13 @@ const StyledFieldset = styled(Fieldset) `
   }
 `;
 
-function Select({ baseContainer, customSearch, customSearchMinQueryLength = 1, disabled = false, error, isCleanable = true, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, options, optionValueKey, searchable = false, value, ...originalProps }) {
+function Select({ baseContainer, className, customSearch, customSearchMinQueryLength = 1, disabled = false, error, isCleanable = true, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, options, optionValueKey, searchable = false, style, value, ...originalProps }) {
     // eslint-disable-next-line no-null/no-null
     const boxRef = useRef(null);
     /** Instance of `CustomSearch` */
     const customSearchRef = useRef(customSearch);
     const { forceUpdate } = useForceUpdate();
+    const controlledClassname = useMemo(() => classnames('Field-Select', className), [className]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const rsuiteData = useMemo(() => getRsuiteDataFromOptions(options, optionValueKey), [options, optionValueKey]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
@@ -35073,7 +35079,7 @@ function Select({ baseContainer, customSearch, customSearchMinQueryLength = 1, d
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
-    return (jsxs(Field$2, { className: "Field-Select", children: [jsx(Label, { disabled: disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box, { ref: boxRef, "$hasError": hasError, onClick: toggle, children: boxRef.current && (jsx(StyledSelectPicker, { "$isLight": isLight, cleanable: isCleanable, container: boxRef.current, 
+    return (jsxs(Field$2, { className: controlledClassname, style: style, children: [jsx(Label, { disabled: disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box, { ref: boxRef, "$hasError": hasError, onClick: toggle, children: boxRef.current && (jsx(StyledSelectPicker, { "$isLight": isLight, cleanable: isCleanable, container: boxRef.current, 
                     // When we use a custom search, we use `controlledRsuiteData` to provide the matching options (data),
                     // when we don't, we don't need to control that and just pass the non-internally-controlled `rsuiteData`
                     data: controlledRsuiteData || rsuiteData, disabled: disabled, id: originalProps.name, onClean: handleClean, onSearch: handleSearch, 
@@ -35166,8 +35172,9 @@ const Box = styled.div `
   }
 `;
 
-function Textarea({ error, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, rows = 3, value, ...originalProps }) {
+function Textarea({ className, error, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, rows = 3, style, value, ...originalProps }) {
     const inputRef = useRef();
+    const controlledClassname = useMemo(() => classnames('Field-Textarea', className), [className]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const key = useKey([originalProps.disabled, originalProps.name]);
@@ -35180,7 +35187,7 @@ function Textarea({ error, isErrorMessageHidden = false, isLabelHidden = false,
         onChange(normalizedNextValue);
     }, [onChange]);
     useFieldUndefineEffect(isUndefinedWhenDisabled && originalProps.disabled, onChange);
-    return (jsxs(Field$2, { className: "Field-Textarea", children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput$1, { ref: inputRef, "$hasError": hasError, "$isLight": isLight, as: "textarea", id: originalProps.name, onChange: handleChange, rows: rows, value: value || '', ...originalProps }, key), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
+    return (jsxs(Field$2, { className: controlledClassname, style: style, children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput$1, { ref: inputRef, "$hasError": hasError, "$isLight": isLight, as: "textarea", id: originalProps.name, onChange: handleChange, rows: rows, value: value || '', ...originalProps }, key), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledInput$1 = styled(Input) `
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
@@ -35458,5 +35465,5 @@ function useNewWindow() {
     return contextValue;
 }
 
-export { Accent, Button, Checkbox, CoordinatesFormat, CoordinatesInput, CustomSearch, DatePicker, DateRangePicker, Dialog, Dropdown, Field$2 as Field, Fieldset, FormikCheckbox, FormikCoordinatesInput, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSearch, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NewWindow, NewWindowContext, NumberInput, OPENLAYERS_PROJECTION, OnlyFontGlobalStyle, Search, Select, SimpleTable, SingleTag, Size, THEME, Tag, TagBullet, TagGroup, TextInput, Textarea, ThemeProvider, WSG84_PROJECTION, coordinatesAreDistinct, customDayjs, getCoordinates, getLocalizedDayjs, getPseudoRandomString, getUtcizedDayjs, isNumeric, stopMouseEventPropagation, useClickOutsideEffect, useFieldControl, useForceUpdate, useKey, useNewWindow, usePrevious };
+export { Accent, Button, Checkbox, CoordinatesFormat, CoordinatesInput, CustomSearch, DatePicker, DateRangePicker, Dialog, Dropdown, Field$2 as Field, FieldError, Fieldset, FormikCheckbox, FormikCoordinatesInput, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSearch, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NewWindow, NewWindowContext, NumberInput, OPENLAYERS_PROJECTION, OnlyFontGlobalStyle, Search, Select, SimpleTable, SingleTag, Size, THEME, Tag, TagBullet, TagGroup, TextInput, Textarea, ThemeProvider, WSG84_PROJECTION, coordinatesAreDistinct, customDayjs, getCoordinates, getLocalizedDayjs, getPseudoRandomString, getUtcizedDayjs, isNumeric, stopMouseEventPropagation, useClickOutsideEffect, useFieldControl, useForceUpdate, useKey, useNewWindow, usePrevious };
 //# sourceMappingURL=index.js.map