@mtes-mct/monitor-ui 6.0.0 → 6.0.1

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+# [6.0.0](https://github.com/MTES-MCT/monitor-ui/compare/v5.9.2...v6.0.0) (2023-05-17)
+
+
+### Bug Fixes
+
+* **fields:** fix search component ([8776915](https://github.com/MTES-MCT/monitor-ui/commit/87769151f5152c05810b6849e267d73f9f4eb8d3))
+
+
+* fix(fields)!: format options and create test e2e ([69b3070](https://github.com/MTES-MCT/monitor-ui/commit/69b3070409a3f5c3aa9063b12bf990d6cb92fa65))
+
+
+### BREAKING CHANGES
+
+* - pass option in `onChange` function instead of value
+- rename prop to display search icon
+- replace defaultValue with value
+- add optionValueKey prop
+
 ## [5.9.2](https://github.com/MTES-MCT/monitor-ui/compare/v5.9.1...v5.9.2) (2023-05-10)
 
 

package/components/Dialog/index.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 export type DialogProps = HTMLAttributes<HTMLDivElement> & {
     isAbsolute?: boolean;
 };

package/components/SingleTag.d.ts

@@ -1,6 +1,7 @@
+import { type HTMLAttributes } from 'react';
 import type { Promisable } from 'type-fest';
-export type SingleTagProps = {
+export type SingleTagProps = HTMLAttributes<HTMLDivElement> & {
     children: string;
     onDelete: () => Promisable<void>;
 };
-export declare function SingleTag({ children, onDelete }: SingleTagProps): JSX.Element;
+export declare function SingleTag({ children, className, onDelete, ...nativeProps }: SingleTagProps): JSX.Element;

package/elements/Button.d.ts

@@ -8,7 +8,7 @@ export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'childre
     isFullWidth?: boolean | undefined;
     size?: Size | undefined;
 };
-export declare function Button({ accent, children, Icon, isFullWidth, size, type, ...nativeProps }: ButtonProps): JSX.Element;
+export declare function Button({ accent, children, className, Icon, isFullWidth, size, type, ...nativeProps }: ButtonProps): JSX.Element;
 export declare const PrimaryButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const SecondaryButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const TertiaryButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;

package/elements/Field.d.ts

@@ -1,3 +1,3 @@
 import type { HTMLAttributes } from 'react';
 export type FieldProps = HTMLAttributes<HTMLDivElement>;
-export declare const Field: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Field: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, FieldProps, keyof FieldProps>;

package/elements/FieldError.d.ts

@@ -2,6 +2,6 @@ import type { HTMLAttributes } from 'react';
 export type FieldErrorProps = HTMLAttributes<HTMLParagraphElement> & {
     isDisabled?: boolean | undefined;
 };
-export declare const FieldError: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {
+export declare const FieldError: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, HTMLAttributes<HTMLParagraphElement> & {
     isDisabled?: boolean | undefined;
-}, never>;
+}, keyof HTMLAttributes<HTMLParagraphElement> | "isDisabled">;

package/elements/Fieldset.d.ts

@@ -1,4 +1,4 @@
-import { FieldsetHTMLAttributes } from 'react';
+import { type FieldsetHTMLAttributes } from 'react';
 export type FieldsetProps = Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'defaultValue' | 'onChange' | 'value'> & {
     hasBorder?: boolean | undefined;
     hasError?: boolean | undefined;
@@ -6,4 +6,4 @@ export type FieldsetProps = Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'd
     isLight?: boolean | undefined;
     legend?: string | undefined;
 };
-export declare function Fieldset({ children, hasBorder, hasError, isLegendHidden, isLight, legend, ...nativeProps }: FieldsetProps): JSX.Element;
+export declare function Fieldset({ children, className, hasBorder, hasError, isLegendHidden, isLight, legend, ...nativeProps }: FieldsetProps): JSX.Element;

package/elements/IconBox.d.ts

@@ -1,4 +1,5 @@
-export type IconBoxProps = {
+import type { HTMLAttributes } from 'react';
+export type IconBoxProps = HTMLAttributes<HTMLDivElement> & {
     $color?: string | undefined;
     /** In pixels */
     $size?: number | undefined;
@@ -6,4 +7,8 @@ export type IconBoxProps = {
 /**
  * Internal component used to wrap SVG icon components
  */
-export declare const IconBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IconBoxProps, never>;
+export declare const IconBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, HTMLAttributes<HTMLDivElement> & {
+    $color?: string | undefined;
+    /** In pixels */
+    $size?: number | undefined;
+}, keyof HTMLAttributes<HTMLDivElement> | "$color" | "$size">;

package/elements/IconButton.d.ts

@@ -9,4 +9,4 @@ export type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'chi
     iconSize?: number | undefined;
     size?: Size | undefined;
 };
-export declare function IconButton({ accent, color, Icon, iconSize, size, type, ...nativeProps }: IconButtonProps): JSX.Element;
+export declare function IconButton({ accent, className, color, Icon, iconSize, size, type, ...nativeProps }: IconButtonProps): JSX.Element;

package/elements/Label.d.ts

@@ -4,8 +4,8 @@ export type LabelProps = LabelHTMLAttributes<HTMLLabelElement> & {
     hasError?: boolean | undefined;
     isHidden?: boolean | undefined;
 };
-export declare const Label: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
+export declare const Label: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, LabelHTMLAttributes<HTMLLabelElement> & {
     disabled?: boolean | undefined;
     hasError?: boolean | undefined;
     isHidden?: boolean | undefined;
-}, never>;
+}, "disabled" | keyof LabelHTMLAttributes<HTMLLabelElement> | "hasError" | "isHidden">;

package/elements/Legend.d.ts

@@ -4,4 +4,8 @@ export type LegendProps = HTMLAttributes<HTMLLegendElement> & {
     hasError?: boolean | undefined;
     isHidden?: boolean | undefined;
 };
-export declare function Legend({ disabled, hasError, isHidden, ...nativeProps }: LegendProps): JSX.Element;
+export declare const Legend: import("styled-components").StyledComponent<"legend", import("styled-components").DefaultTheme, HTMLAttributes<HTMLLegendElement> & {
+    disabled?: boolean | undefined;
+    hasError?: boolean | undefined;
+    isHidden?: boolean | undefined;
+}, "disabled" | keyof HTMLAttributes<HTMLLegendElement> | "hasError" | "isHidden">;

package/elements/Tag/index.d.ts

@@ -8,7 +8,7 @@ export type TagProps = HTMLAttributes<HTMLSpanElement> & {
     bulletColor?: string | undefined;
     isLight?: boolean | undefined;
 };
-export declare function Tag({ accent, bullet, bulletColor, children, color, Icon, isLight, ...nativeProps }: TagProps): JSX.Element;
+export declare function Tag({ accent, bullet, bulletColor, children, className, color, Icon, isLight, ...nativeProps }: TagProps): JSX.Element;
 export declare const PrimaryTag: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
     $color?: string | undefined;
     $isLight: boolean;

package/elements/TagGroup.d.ts

@@ -1,3 +1,3 @@
 import type { HTMLAttributes } from 'react';
 export type TagGroupProps = HTMLAttributes<HTMLDivElement>;
-export declare const TagGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const TagGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TagGroupProps, keyof TagGroupProps>;

package/fields/Search.d.ts

@@ -23,4 +23,4 @@ export type SearchProps<OptionValue extends OptionValueType = string> = Omit<Rsu
     throttleDuration?: number;
     value?: OptionValue | undefined;
 };
-export declare function Search<OptionValue extends OptionValueType = string>({ baseContainer, error, isErrorMessageHidden, isLabelHidden, isLight, isSearchIconVisible, label, MenuItem, onChange, onQuery, options, optionValueKey, queryMap, queryUrl, throttleDuration, value, ...originalProps }: SearchProps<OptionValue>): JSX.Element;
+export declare function Search<OptionValue extends OptionValueType = string>({ baseContainer, className, error, isErrorMessageHidden, isLabelHidden, isLight, isSearchIconVisible, label, MenuItem, onChange, onQuery, options, optionValueKey, queryMap, queryUrl, throttleDuration, value, ...originalProps }: SearchProps<OptionValue>): JSX.Element;

package/index.js

@@ -2051,7 +2051,7 @@ function ThemeProvider({ children, theme = {} }) {
     return jsx(UntypedStyledComponentsThemeProvider, { theme: finalTheme, children: children });
 }
 
-var classnames = {exports: {}};
+var classnames$1 = {exports: {}};
 
 /*!
 	Copyright (c) 2018 Jed Watson.
@@ -2108,10 +2108,10 @@ var classnames = {exports: {}};
 			window.classNames = classNames;
 		}
 	}()); 
-} (classnames));
+} (classnames$1));
 
-var classnamesExports = classnames.exports;
-var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
+var classnamesExports = classnames$1.exports;
+var classnames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
 const Action = styled.div `
   background-color: ${p => p.theme.color.white};
@@ -2173,8 +2173,8 @@ function stopMouseEventPropagation(event) {
 }
 
 function RawDialog({ children, className, isAbsolute = false, ...nativeProps }) {
-    const controlledClassName = useMemo(() => classNames('Component-Dialog', className), [className]);
-    return (jsxs(Box$g, { "$isAbsolute": isAbsolute, className: controlledClassName, ...nativeProps, onClick: stopMouseEventPropagation, children: [jsx(Overlay, { "$isAbsolute": isAbsolute }), jsx(Window, { "$isAbsolute": isAbsolute, children: children })] }));
+    const controlledClassName = classnames('Component-Dialog', className);
+    return (jsxs(Box$g, { "$isAbsolute": isAbsolute, className: controlledClassName, onClick: stopMouseEventPropagation, ...nativeProps, children: [jsx(Overlay, { "$isAbsolute": isAbsolute }), jsx(Window, { "$isAbsolute": isAbsolute, children: children })] }));
 }
 const Box$g = styled.div `
   position: ${p => (p.$isAbsolute ? 'absolute' : 'fixed')};
@@ -2242,10 +2242,11 @@ const StyledDropdownItem = styled(Dropdown$1.Item) `
   }
 `;
 
-function RawDropdown({ Icon, ...originalProps }) {
+function RawDropdown({ className, Icon, ...originalProps }) {
+    const controlledClassName = classnames('Component-Dropdow', className);
     const icon = useMemo(() => (Icon ? jsx(Icon, { size: 20 }) : undefined), [Icon]);
     const hasIcon = useMemo(() => Boolean(Icon), [Icon]);
-    return jsx(StyledDropdown, { "$hasIcon": hasIcon, icon: icon, ...originalProps });
+    return jsx(StyledDropdown, { "$hasIcon": hasIcon, className: controlledClassName, icon: icon, ...originalProps });
 }
 // TODO We need to split into multiple styled components as done in `<Button />`.
 const StyledDropdown = styled(Dropdown$1) `
@@ -2597,16 +2598,17 @@ const ICON_SIZE = {
     [Size.NORMAL]: 20,
     [Size.SMALL]: 12
 };
-function Button({ accent = Accent.PRIMARY, children, Icon, isFullWidth = false, size = Size.NORMAL, type = 'button', ...nativeProps }) {
+function Button({ accent = Accent.PRIMARY, children, className, Icon, isFullWidth = false, size = Size.NORMAL, type = 'button', ...nativeProps }) {
     const commonChildren = useMemo(() => (jsxs(Fragment, { children: [Icon && jsx(Icon, { size: ICON_SIZE[size] }), children && jsx(ButtonLabel, { children: children })] })), [children, Icon, size]);
     const commonProps = useMemo(() => ({
         as: StyledButton$1,
         children: commonChildren,
+        className: classnames('Element-Button', className),
         isFullWidth,
         size,
         type,
         ...nativeProps
-    }), [commonChildren, isFullWidth, nativeProps, size, type]);
+    }), [className, commonChildren, isFullWidth, nativeProps, size, type]);
     switch (accent) {
         case Accent.SECONDARY:
             return jsx(SecondaryButton, { ...commonProps });
@@ -2732,14 +2734,15 @@ const ICON_SIZE_IN_PX = {
     [Size.NORMAL]: 20,
     [Size.SMALL]: 14
 };
-function IconButton({ accent = Accent.PRIMARY, color, Icon, iconSize, size = Size.NORMAL, type = 'button', ...nativeProps }) {
+function IconButton({ accent = Accent.PRIMARY, className, color, Icon, iconSize, size = Size.NORMAL, type = 'button', ...nativeProps }) {
     const children = useMemo(() => jsx(Icon, { color: color, size: iconSize || ICON_SIZE_IN_PX[size] }), [color, Icon, iconSize, size]);
     const commonProps = useMemo(() => ({
         children,
+        className: classnames('Element-IconButton', className),
         size,
         type,
         ...nativeProps
-    }), [children, nativeProps, size, type]);
+    }), [children, className, nativeProps, size, type]);
     switch (accent) {
         case Accent.SECONDARY:
             return jsx(SecondaryButton, { as: StyledButton, ...commonProps });
@@ -2790,7 +2793,9 @@ const TertiaryButton = styled.button `
 /**
  * Internal component used to wrap SVG icon components
  */
-const IconBox = styled.div `
+const IconBox = styled.div.attrs(() => ({
+    className: 'Element-IconBox'
+})) `
   display: inline-block;
   color: ${p => p.$color ?? 'inherit'};
 
@@ -3145,13 +3150,14 @@ var index = /*#__PURE__*/Object.freeze({
 	Vms: Vms
 });
 
-function SingleTag({ children, onDelete }) {
+function SingleTag({ children, className, onDelete, ...nativeProps }) {
+    const controlledClassName = classnames('Component-SingleTag', className);
     const handleDelete = useCallback(() => {
         if (onDelete) {
             onDelete();
         }
     }, [onDelete]);
-    return (jsx("div", { children: jsxs(Box$f, { children: [jsx(Text, { children: children }), jsx(StyledIconButton, { accent: Accent.TERTIARY, Icon: Close, iconSize: 10, onClick: handleDelete })] }) }));
+    return (jsxs(Box$f, { className: controlledClassName, ...nativeProps, children: [jsx(Text, { children: children }), jsx(StyledIconButton, { accent: Accent.TERTIARY, Icon: Close, iconSize: 10, onClick: handleDelete })] }));
 }
 const Box$f = styled.div `
   align-items: center;
@@ -3186,14 +3192,16 @@ const StyledIconButton = styled(IconButton) `
 `;
 
 const Field$2 = styled.div.attrs(props => ({
-    className: classNames('Element-Field', props.className)
+    className: classnames('Element-Field', props.className)
 })) `
   align-items: flex-start;
   display: flex;
   flex-direction: column;
 `;
 
-const Label = styled.label `
+const Legend = styled.legend.attrs(props => ({
+    className: classnames('Element-Legend', props.className)
+})) `
   color: ${p => 
 // eslint-disable-next-line no-nested-ternary
 p.disabled ? p.theme.color.lightGray : p.hasError ? p.theme.color.maximumRed : p.theme.color.slateGray};
@@ -3201,25 +3209,22 @@ p.disabled ? p.theme.color.lightGray : p.hasError ? p.theme.color.maximumRed : p
   font-size: 13px;
   line-height: 1.3846;
   margin-bottom: 4px;
-`;
-
-function Legend({ disabled = false, hasError = false, isHidden = false, ...nativeProps }) {
-    return jsx(StyledLabel, { as: "legend", disabled: disabled, hasError: hasError, isHidden: isHidden, ...nativeProps });
-}
-const StyledLabel = styled(Label) `
   padding: 0;
 `;
 
-function Fieldset({ children, hasBorder = false, hasError = false, isLegendHidden = false, isLight = false, legend, ...nativeProps }) {
+function Fieldset({ children, className, hasBorder = false, hasError = false, isLegendHidden = false, isLight = false, legend, ...nativeProps }) {
     const hasLegend = useMemo(() => Boolean(legend), [legend]);
-    return (jsxs(StyledField, { as: "fieldset", ...nativeProps, children: [legend && (jsx(Legend, { disabled: nativeProps.disabled, hasError: hasError, isHidden: isLegendHidden, children: legend })), jsx(Box$e, { "$hasBorder": hasBorder, "$hasLegend": hasLegend, "$isLight": isLight, children: children })] }));
+    return (jsxs(Box$e, { className: classnames('Element-Fieldset', className), ...nativeProps, children: [legend && (jsx(Legend, { disabled: nativeProps.disabled, hasError: hasError, isHidden: isLegendHidden, children: legend })), jsx(InnerBox, { "$hasBorder": hasBorder, "$hasLegend": hasLegend, "$isLight": isLight, children: children })] }));
 }
-const StyledField = styled(Field$2) `
+const Box$e = styled.fieldset `
+  align-items: flex-start;
   border: 0;
+  display: flex;
+  flex-direction: column;
   margin: 0;
   padding: 0;
 `;
-const Box$e = styled.div `
+const InnerBox = styled.div `
   background-color: ${p => (p.$isLight ? p.theme.color.white : 'transparent')};
   padding: ${p => (p.$hasBorder || p.$isLight ? '16px' : 0)};
   width: 100%;
@@ -3230,12 +3235,24 @@ const Box$e = styled.div `
     `}
 `;
 
+const Label = styled.label.attrs(props => ({
+    className: classnames('Element-Label', props.className)
+})) `
+  color: ${p => 
+// eslint-disable-next-line no-nested-ternary
+p.disabled ? 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.3846;
+  margin-bottom: 4px;
+`;
+
 const Disk = styled.span `
   background-color: ${p => p.$color};
   border-radius: 50%;
 `;
 
-function Tag({ accent, bullet, bulletColor, children, color, Icon, isLight = false, ...nativeProps }) {
+function Tag({ accent, bullet, bulletColor, children, className, color, Icon, isLight = false, ...nativeProps }) {
     const commonChildren = useMemo(() => {
         const defaultColor = color || THEME.color.gunMetal;
         const controlledBulletColor = bulletColor ||
@@ -3251,8 +3268,9 @@ function Tag({ accent, bullet, bulletColor, children, color, Icon, isLight = fal
     const commonProps = useMemo(() => ({
         $isLight: isLight,
         children: commonChildren,
+        className: classnames('Element-Tag', className),
         ...nativeProps
-    }), [commonChildren, isLight, nativeProps]);
+    }), [className, commonChildren, isLight, nativeProps]);
     switch (accent) {
         case Accent.PRIMARY:
             return jsx(PrimaryTag, { ...commonProps });
@@ -3300,7 +3318,9 @@ const TertiaryTag = styled(Box$d) `
   color: ${p => p.theme.color.white};
 `;
 
-const TagGroup = styled.div `
+const TagGroup = styled.div.attrs(props => ({
+    className: classnames('Element-TagGroup', props.className)
+})) `
   align-items: center;
   display: flex;
   flex-wrap: wrap;
@@ -3898,7 +3918,9 @@ var ky$1 = ky;
 
 function c(u,e,c){var i=this,a=useRef(null),o=useRef(0),f=useRef(null),l=useRef([]),m=useRef(),v=useRef(),d=useRef(u),p=useRef(!0);useEffect(function(){d.current=u;},[u]);var g=!e&&0!==e&&"undefined"!=typeof window;if("function"!=typeof u)throw new TypeError("Expected a function");e=+e||0;var w=!!(c=c||{}).leading,s=!("trailing"in c)||!!c.trailing,x="maxWait"in c,y=x?Math.max(+c.maxWait||0,e):null;useEffect(function(){return p.current=!0,function(){p.current=!1;}},[]);var h=useMemo(function(){var r=function(r){var n=l.current,t=m.current;return l.current=m.current=null,o.current=r,v.current=d.current.apply(t,n)},n=function(r,n){g&&cancelAnimationFrame(f.current),f.current=g?requestAnimationFrame(r):setTimeout(r,n);},t=function(r){if(!p.current)return !1;var n=r-a.current;return !a.current||n>=e||n<0||x&&r-o.current>=y},u=function(n){return f.current=null,s&&l.current?r(n):(l.current=m.current=null,v.current)},c=function r(){var c=Date.now();if(t(c))return u(c);if(p.current){var i=e-(c-a.current),f=x?Math.min(i,y-(c-o.current)):i;n(r,f);}},h=function(){var u=Date.now(),d=t(u);if(l.current=[].slice.call(arguments),m.current=i,a.current=u,d){if(!f.current&&p.current)return o.current=a.current,n(c,e),w?r(a.current):v.current;if(x)return n(c,e),r(a.current)}return f.current||n(c,e),v.current};return h.cancel=function(){f.current&&(g?cancelAnimationFrame(f.current):clearTimeout(f.current)),o.current=0,l.current=a.current=m.current=f.current=null;},h.isPending=function(){return !!f.current},h.flush=function(){return f.current?u(Date.now()):v.current},h},[w,x,e,y,s,g]);return h}
 
-const FieldError = styled.p `
+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;
@@ -21206,7 +21228,7 @@ function normalizeString(text) {
     return cleanText.length > 0 ? cleanText : undefined;
 }
 
-function Search({ baseContainer, error, isErrorMessageHidden = false, isLabelHidden, isLight = false, isSearchIconVisible = true, label, MenuItem, onChange, onQuery, options = [], optionValueKey, queryMap, queryUrl, throttleDuration = 200, value, ...originalProps }) {
+function Search({ baseContainer, className, error, isErrorMessageHidden = false, isLabelHidden, isLight = false, isSearchIconVisible = true, label, MenuItem, onChange, onQuery, options = [], optionValueKey, queryMap, queryUrl, throttleDuration = 200, value, ...originalProps }) {
     // eslint-disable-next-line no-null/no-null
     const boxRef = useRef(null);
     const queryRef = useRef(undefined);
@@ -21214,6 +21236,7 @@ function Search({ baseContainer, error, isErrorMessageHidden = false, isLabelHid
     const [formattedOptions, setFormattedOptions] = useState(data);
     const [isOpen, setIsOpen] = useState(false);
     const { forceUpdate } = useForceUpdate();
+    const controlledClassName = useMemo(() => classnames('Field-Search', className), [className]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const key = useKey([value, originalProps.disabled, originalProps.name]);
@@ -21265,7 +21288,7 @@ function Search({ baseContainer, error, isErrorMessageHidden = false, isLabelHid
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
-    return (jsxs(Field$2, { className: "Field-Search", children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsxs(Box$c, { ref: boxRef, isLight: isLight, children: [boxRef.current && (jsx(StyledAutoComplete, { "$isLight": isLight, container: boxRef.current, data: formattedOptions, id: originalProps.name, onChange: handleChange, onSelect: handleSelect, open: isOpen, renderMenuItem: (itemLabel, item) => MenuItem ? jsx(MenuItem, { item: item.value }) : itemLabel, value: inputValue, ...originalProps }, key)), inputValue && (jsxs(Fragment, { children: [jsx(StyledCloseButton, { accent: Accent.TERTIARY, color: THEME.color.slateGray, Icon: Close, isSearchIconVisible: isSearchIconVisible, onClick: clean, size: Size.SMALL }), isSearchIconVisible && jsx(Separator, { children: "|" })] })), isSearchIconVisible && jsx(StyledIconSearch, { color: THEME.color.slateGray, size: 20 })] }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
+    return (jsxs(Field$2, { className: controlledClassName, children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsxs(Box$c, { ref: boxRef, isLight: isLight, children: [boxRef.current && (jsx(StyledAutoComplete, { "$isLight": isLight, container: boxRef.current, data: formattedOptions, id: originalProps.name, onChange: handleChange, onSelect: handleSelect, open: isOpen, renderMenuItem: (itemLabel, item) => MenuItem ? jsx(MenuItem, { item: item.value }) : itemLabel, value: inputValue, ...originalProps }, key)), inputValue && (jsxs(Fragment, { children: [jsx(StyledCloseButton, { accent: Accent.TERTIARY, color: THEME.color.slateGray, Icon: Close, isSearchIconVisible: isSearchIconVisible, onClick: clean, size: Size.SMALL }), isSearchIconVisible && jsx(Separator, { children: "|" })] })), isSearchIconVisible && jsx(StyledIconSearch, { color: THEME.color.slateGray, size: 20 })] }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledCloseButton = styled(IconButton) `
   cursor: pointer;
@@ -22191,6 +22214,7 @@ function DatePicker({ baseContainer, className, defaultValue, disabled = false,
     const selectedUtcTimeTupleRef = useRef(getUtcTimeTupleFromDayjs(selectedUtcDateAsDayjsRef.current));
     const previousDefaultValue = usePrevious(defaultValue);
     const { forceUpdate } = useForceUpdate();
+    const controlledClassName = useMemo(() => classnames('Field-DatePicker', className), [className]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const defaultTimeTuple = useMemo(() => (isEndDate ? ['23', '59'] : ['00', '00']), [isEndDate]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
@@ -22316,7 +22340,7 @@ function DatePicker({ baseContainer, className, defaultValue, disabled = false,
         selectedUtcTimeTupleRef.current = getUtcTimeTupleFromDayjs(selectedUtcDateAsDayjsRef.current);
         forceUpdate();
     }, [defaultValue, forceUpdate, previousDefaultValue]);
-    return (jsxs(Fieldset, { className: classNames('Field-DatePicker', className), disabled: disabled, isLegendHidden: isLabelHidden, legend: label, ...nativeProps, children: [jsxs(Box$7, { ref: boxRef, 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, isLegendHidden: isLabelHidden, legend: label, ...nativeProps, children: [jsxs(Box$7, { ref: boxRef, 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$7 = styled.div `
   * {
@@ -22547,7 +22571,7 @@ var DateRangePosition;
     DateRangePosition["START"] = "START";
 })(DateRangePosition || (DateRangePosition = {}));
 
-function DateRangePicker({ baseContainer, 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, withTime = false, ...nativeProps }) {
     /* eslint-disable no-null/no-null */
     const startDateInputRef = useRef(null);
     const startTimeInputRef = useRef(null);
@@ -22564,6 +22588,7 @@ function DateRangePicker({ baseContainer, defaultValue, disabled = false, error,
     const selectedEndTimeTupleRef = useRef(getUtcTimeTupleFromDayjs(selectedEndDateAsDayjsRef.current));
     const previousDefaultValue = usePrevious(defaultValue);
     const { forceUpdate } = useForceUpdate();
+    const controlledClassName = useMemo(() => classnames('Field-DateRangePicker', className), [className]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const rangeCalendarPickerDefaultValue = useMemo(() => selectedStartDateTupleRef.current && selectedEndDateTupleRef.current
@@ -22770,7 +22795,7 @@ function DateRangePicker({ baseContainer, defaultValue, disabled = false, error,
         selectedEndTimeTupleRef.current = getUtcTimeTupleFromDayjs(selectedEndDateAsDayjsRef.current);
         forceUpdate();
     }, [defaultValue, forceUpdate, previousDefaultValue]);
-    return (jsxs(Fieldset, { className: "Field-DateRangePicker", disabled: disabled, isLegendHidden: isLabelHidden, legend: label, ...nativeProps, children: [jsxs(Box$5, { 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, isLegendHidden: isLabelHidden, legend: label, ...nativeProps, children: [jsxs(Box$5, { 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$5 = styled.div `
   * {
@@ -32045,6 +32070,7 @@ const Box$1 = styled.div `
 const noop = () => { };
 
 function CoordinatesInput({ className, coordinatesFormat, defaultValue, error, isLabelHidden = false, isLight = false, label, onChange = noop, ...nativeProps }) {
+    const controlledClassName = classnames('Field-CoordinatesInput', className);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const getCoordinatesInput = useCallback(() => {
@@ -32061,7 +32087,7 @@ function CoordinatesInput({ className, coordinatesFormat, defaultValue, error, i
     }, [defaultValue, nativeProps.disabled, onChange, coordinatesFormat]);
     // TODO We must add a `handleDisable()` callback here to effectively empty the inputs when disabling this field.
     useFieldUndefineEffect(nativeProps.disabled, onChange /* , handleDisable */);
-    return (jsxs(StyledFieldset, { className: classNames('Field-CoordinatesInput', className), isLegendHidden: isLabelHidden, isLight: isLight, legend: label, ...nativeProps, children: [getCoordinatesInput(), hasError && jsx(FieldError, { children: controlledError })] }));
+    return (jsxs(StyledFieldset, { className: controlledClassName, isLegendHidden: isLabelHidden, isLight: isLight, legend: label, ...nativeProps, children: [getCoordinatesInput(), hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledFieldset = styled(Fieldset) `
   input {