@mtes-mct/monitor-ui 22.1.0 → 23.1.0

package/CHANGELOG.md

@@ -1,3 +1,34 @@
+## [23.0.0](https://github.com/MTES-MCT/monitor-ui/compare/v22.1.0...v23.0.0) (2024-09-12)
+
+
+### ⚠ BREAKING CHANGES
+
+* **elements:** - `disabled` is renamed `$isDisabled` in `Legend` props.
+- `hasError` is renamed `$hasError` in `Legend` props.
+- `isHidden` is renamed `$isHidden` in `Legend` props.
+
+### Bug Fixes
+
+* **elements:** prefix styled component props in Legend ([ef4284a](https://github.com/MTES-MCT/monitor-ui/commit/ef4284a50dee68cdb6c65308d2ae42da2798efdf))
+* **fields:** prefix styled components props in DateRangePicker ([3572267](https://github.com/MTES-MCT/monitor-ui/commit/3572267c6e285d87f7c9efd006bf7c0daf592a5e))
+
+
+### Buid System & Dependencies
+
+* **deps:** bump express from 4.19.2 to 4.21.0 ([46d1134](https://github.com/MTES-MCT/monitor-ui/commit/46d113401e48191f59f9c8e309761ba2e44ccbb0))
+
+## [22.1.0](https://github.com/MTES-MCT/monitor-ui/compare/v22.0.1...v22.1.0) (2024-09-12)
+
+
+### Features
+
+* **icons:** add bullseye icon ([1f76116](https://github.com/MTES-MCT/monitor-ui/commit/1f76116bf996528e4d548479996cf47e78d2453d))
+
+
+### Buid System & Dependencies
+
+* **dev-deps:** bump the all-non-major-dependencies group across 1 directory with 5 updates ([52dabbf](https://github.com/MTES-MCT/monitor-ui/commit/52dabbfed940b787a9fb1490f0696595291d5f6e))
+
 ## [22.0.1](https://github.com/MTES-MCT/monitor-ui/compare/v22.0.0...v22.0.1) (2024-09-09)
 
 

package/components/Dialog/Body.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Body.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI;aAAyB,MAAM;SAiB/C,CAAA"}
+{"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Body.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI;aACN,MAAM;SAkBhB,CAAA"}

package/elements/Fieldset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Fieldset.d.ts","sourceRoot":"","sources":["../../src/elements/Fieldset.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,sBAAsB,EAAW,MAAM,OAAO,CAAA;AAK5D,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,cAAc,GAAG,UAAU,GAAG,OAAO,CAAC,GAAG;IACrH,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC/B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACpC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAChC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC5B,CAAA;AACD,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,SAAiB,EACjB,QAAgB,EAChB,cAAsB,EACtB,OAAe,EACf,UAAkB,EAClB,MAAM,EACN,GAAG,WAAW,EACf,EAAE,aAAa,2CAgBf"}
+{"version":3,"file":"Fieldset.d.ts","sourceRoot":"","sources":["../../src/elements/Fieldset.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,sBAAsB,EAAW,MAAM,OAAO,CAAA;AAK5D,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,cAAc,GAAG,UAAU,GAAG,OAAO,CAAC,GAAG;IACrH,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC/B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACpC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAChC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC5B,CAAA;AACD,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,SAAiB,EACjB,QAAgB,EAChB,cAAsB,EACtB,OAAe,EACf,UAAkB,EAClB,MAAM,EACN,GAAG,WAAW,EACf,EAAE,aAAa,2CAqBf"}

package/elements/Label.d.ts

@@ -10,5 +10,5 @@ export declare const Label: import("styled-components").StyledComponent<"label",
     $idDisabled?: boolean | undefined;
     $isHidden?: boolean | undefined;
     $isRequired?: boolean | undefined;
-}, keyof LabelHTMLAttributes<HTMLLabelElement> | "$isHidden" | "$isRequired" | "$hasError" | "$idDisabled">;
+}, keyof LabelHTMLAttributes<HTMLLabelElement> | "$isHidden" | "$hasError" | "$isRequired" | "$idDisabled">;
 //# sourceMappingURL=Label.d.ts.map

package/elements/Legend.d.ts

@@ -1,14 +1,14 @@
 import type { HTMLAttributes } from 'react';
 export type LegendProps = HTMLAttributes<HTMLLegendElement> & {
+    $disabled?: boolean | undefined;
+    $hasError?: boolean | undefined;
+    $isHidden?: boolean | undefined;
     $isRequired?: boolean | undefined;
-    disabled?: boolean | undefined;
-    hasError?: boolean | undefined;
-    isHidden?: boolean | undefined;
 };
 export declare const Legend: import("styled-components").StyledComponent<"legend", import("styled-components").DefaultTheme, HTMLAttributes<HTMLLegendElement> & {
+    $disabled?: boolean | undefined;
+    $hasError?: boolean | undefined;
+    $isHidden?: boolean | undefined;
     $isRequired?: boolean | undefined;
-    disabled?: boolean | undefined;
-    hasError?: boolean | undefined;
-    isHidden?: boolean | undefined;
-}, "disabled" | keyof HTMLAttributes<HTMLLegendElement> | "isHidden" | "$isRequired" | "hasError">;
+}, keyof HTMLAttributes<HTMLLegendElement> | "$isHidden" | "$disabled" | "$hasError" | "$isRequired">;
 //# sourceMappingURL=Legend.d.ts.map

package/elements/Legend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../src/elements/Legend.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IAC5D,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACjC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC/B,CAAA;AACD,eAAO,MAAM,MAAM;kBALH,OAAO,GAAG,SAAS;eACtB,OAAO,GAAG,SAAS;eACnB,OAAO,GAAG,SAAS;eACnB,OAAO,GAAG,SAAS;kGAoB/B,CAAA"}
+{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../src/elements/Legend.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IAC5D,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC/B,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC/B,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC/B,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAClC,CAAA;AACD,eAAO,MAAM,MAAM;gBALL,OAAO,GAAG,SAAS;gBACnB,OAAO,GAAG,SAAS;gBACnB,OAAO,GAAG,SAAS;kBACjB,OAAO,GAAG,SAAS;qGAoBlC,CAAA"}

package/fields/NumberInput.d.ts

@@ -14,7 +14,8 @@ export type NumberInputProps = Omit<InputProps, 'as' | 'defaultValue' | 'id' | '
     name: string;
     onChange?: (nextValue: number | undefined) => Promisable<void>;
     readOnly?: boolean | undefined;
+    unit?: string | undefined;
     value?: number | undefined;
 };
-export declare function NumberInput({ areArrowsHidden, className, disabled, error, isErrorMessageHidden, isLabelHidden, isLight, isRequired, isTransparent, isUndefinedWhenDisabled, label, name, onBlur, onChange, onFocus, readOnly, style, value, ...originalProps }: NumberInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function NumberInput({ areArrowsHidden, className, disabled, error, isErrorMessageHidden, isLabelHidden, isLight, isRequired, isTransparent, isUndefinedWhenDisabled, label, name, onBlur, onChange, onFocus, readOnly, style, unit, value, ...originalProps }: NumberInputProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=NumberInput.d.ts.map

package/fields/NumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/fields/NumberInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,QAAQ,CAAA;AAiB/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAE3C,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,cAAc,GAAG,IAAI,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC,GAAG;IAC9G,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACrC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,oBAAoB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC1C,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACnC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAChC,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACnC,uBAAuB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7C,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,KAAK,UAAU,CAAC,IAAI,CAAC,CAAA;IAC9D,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC3B,CAAA;AACD,wBAAgB,WAAW,CAAC,EAC1B,eAAuB,EACvB,SAAS,EACT,QAAgB,EAChB,KAAK,EACL,oBAA4B,EAC5B,aAAqB,EACrB,OAAe,EACf,UAAkB,EAClB,aAAqB,EACrB,uBAA+B,EAC/B,KAAK,EACL,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,KAAK,EACL,KAAK,EACL,GAAG,aAAa,EACjB,EAAE,gBAAgB,2CA+ElB"}
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/fields/NumberInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,QAAQ,CAAA;AAiB/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAE3C,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,cAAc,GAAG,IAAI,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC,GAAG;IAC9G,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACrC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,oBAAoB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC1C,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACnC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAChC,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACnC,uBAAuB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7C,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,KAAK,UAAU,CAAC,IAAI,CAAC,CAAA;IAC9D,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC3B,CAAA;AACD,wBAAgB,WAAW,CAAC,EAC1B,eAAuB,EACvB,SAAS,EACT,QAAgB,EAChB,KAAK,EACL,oBAA4B,EAC5B,aAAqB,EACrB,OAAe,EACf,UAAkB,EAClB,aAAqB,EACrB,uBAA+B,EAC/B,KAAK,EACL,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,KAAK,EACL,IAAI,EACJ,KAAK,EACL,GAAG,aAAa,EACjB,EAAE,gBAAgB,2CA6FlB"}

package/index.js

@@ -54394,8 +54394,8 @@ 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};
-  display: ${(p)=>p.isHidden ? 'none' : 'block'};
+    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;
@@ -54416,10 +54416,10 @@ function Fieldset({ children, className, hasBorder = false, hasError = false, is
         ...nativeProps,
         children: [
             legend && /*#__PURE__*/ jsx(Legend, {
+                $disabled: nativeProps.disabled,
+                $hasError: hasError,
+                $isHidden: isLegendHidden,
                 $isRequired: isRequired,
-                disabled: nativeProps.disabled,
-                hasError: hasError,
-                isHidden: isLegendHidden,
                 children: legend
             }),
             /*#__PURE__*/ jsx(InnerBox, {
@@ -66674,9 +66674,9 @@ function RangedTimePicker({ filter, minutesRange, onChange }) {
         onClick: stopMouseEventPropagation,
         role: "listbox",
         children: filteredRangedTimeOptions.map(({ label, value }, index)=>/*#__PURE__*/ jsx(Option, {
+                $isSelected: index === selectedOptionIndex,
                 "aria-selected": false,
                 className: "js-ranged-time-picker-option",
-                isSelected: index === selectedOptionIndex,
                 onClick: ()=>onChange(value),
                 role: "option",
                 tabIndex: -1,
@@ -66715,14 +66715,14 @@ const Box$5 = styled.div`
   }
 `;
 const Option = styled.div`
-  background-color: ${(p)=>p.isSelected ? p.theme.color.blueGray : 'transparent'};
-  color: ${(p)=>p.isSelected ? p.theme.color.white : p.theme.color.gunMetal};
+  background-color: ${(p)=>p.$isSelected ? p.theme.color.blueGray : 'transparent'};
+  color: ${(p)=>p.$isSelected ? p.theme.color.white : p.theme.color.gunMetal};
   cursor: pointer;
   line-height: 1;
   padding: 8.5px 0 10.5px 8px;
 
   &:hover {
-    background-color: ${(p)=>p.isSelected ? p.theme.color.blueGray : p.theme.color.blueYonder25};
+    background-color: ${(p)=>p.$isSelected ? p.theme.color.blueGray : p.theme.color.blueYonder25};
   }
 
   > span {
@@ -67602,7 +67602,7 @@ readOnly = false, style, withTime = false, ...nativeProps }) {
                         })
                     }),
                     withTime && /*#__PURE__*/ jsx(Field, {
-                        isTimeField: true,
+                        $isTimeField: true,
                         children: /*#__PURE__*/ jsx(TimeInput, {
                             ref: startTimeInputRef,
                             baseContainer: baseContainer ?? undefined,
@@ -67624,7 +67624,7 @@ readOnly = false, style, withTime = false, ...nativeProps }) {
                         })
                     }),
                     /*#__PURE__*/ jsx(Field, {
-                        isEndDateField: true,
+                        $isEndDateField: true,
                         children: /*#__PURE__*/ jsx(DateInput, {
                             ref: endDateInputRef,
                             baseContainer: baseContainer ?? undefined,
@@ -67647,7 +67647,7 @@ readOnly = false, style, withTime = false, ...nativeProps }) {
                         })
                     }),
                     withTime && /*#__PURE__*/ jsx(Field, {
-                        isTimeField: true,
+                        $isTimeField: true,
                         children: /*#__PURE__*/ jsx(TimeInput, {
                             ref: endTimeInputRef,
                             baseContainer: baseContainer ?? undefined,
@@ -67706,10 +67706,10 @@ const Box$2 = styled.div`
 const Field = styled.span`
   font-size: inherit;
   margin-left: ${(p)=>{
-    if (p.isEndDateField) {
+    if (p.$isEndDateField) {
         return '10px';
     }
-    return p.isTimeField ? '2px' : 0;
+    return p.$isTimeField ? '2px' : 0;
 }} !important;
 `;
 
@@ -68598,7 +68598,7 @@ const Link = styled.a`
   }
 `;
 
-function NumberInput({ areArrowsHidden = false, className, disabled = false, error, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isRequired = false, isTransparent = false, isUndefinedWhenDisabled = false, label, name, onBlur, onChange, onFocus, readOnly = false, style, value, ...originalProps }) {
+function NumberInput({ areArrowsHidden = false, className, disabled = false, error, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isRequired = false, isTransparent = false, isUndefinedWhenDisabled = false, label, name, onBlur, onChange, onFocus, readOnly = false, style, unit, value, ...originalProps }) {
     // eslint-disable-next-line no-null/no-null
     const inputRef = useRef(null);
     const controlledClassname = useMemo(()=>classnames('Field-NumberInput', className), [
@@ -68645,6 +68645,24 @@ function NumberInput({ areArrowsHidden = false, className, disabled = false, err
         preventWheelEvent
     ]);
     useFieldUndefineEffect(isUndefinedWhenDisabled && !!disabled, onChange);
+    const commonInputProps = {
+        $areArrowsHidden: areArrowsHidden,
+        $hasError: hasError,
+        $isDisabled: disabled,
+        $isLight: isLight,
+        $isReadOnly: readOnly,
+        $isTransparent: isTransparent,
+        disabled,
+        id: name,
+        onBlur: handleBlur,
+        onChange: handleChange,
+        onFocus: handleFocus,
+        readOnly,
+        ref: inputRef,
+        type: 'number',
+        value: value ?? '',
+        ...originalProps
+    };
     return /*#__PURE__*/ jsxs(Field$2, {
         className: controlledClassname,
         style: style,
@@ -68656,23 +68674,21 @@ function NumberInput({ areArrowsHidden = false, className, disabled = false, err
                 htmlFor: name,
                 children: label
             }),
-            /*#__PURE__*/ jsx(StyledInput, {
-                ref: inputRef,
-                $areArrowsHidden: areArrowsHidden,
+            !unit && /*#__PURE__*/ jsx(InputWithoutUnit, {
+                ...commonInputProps
+            }, key),
+            !!unit && /*#__PURE__*/ jsxs(InputBoxWithUnit, {
                 $hasError: hasError,
                 $isDisabled: disabled,
                 $isLight: isLight,
                 $isReadOnly: readOnly,
                 $isTransparent: isTransparent,
-                disabled: disabled,
-                id: name,
-                onBlur: handleBlur,
-                onChange: handleChange,
-                onFocus: handleFocus,
-                readOnly: readOnly,
-                type: "number",
-                value: value ?? '',
-                ...originalProps
+                children: [
+                    /*#__PURE__*/ jsx(InputWithUnit, {
+                        ...commonInputProps
+                    }),
+                    unit
+                ]
             }, key),
             !isErrorMessageHidden && hasError && /*#__PURE__*/ jsx(FieldError, {
                 children: controlledError
@@ -68680,9 +68696,7 @@ function NumberInput({ areArrowsHidden = false, className, disabled = false, err
         ]
     });
 }
-const StyledInput = styled(Input)`
-  background-color: ${getFieldBackgroundColorFactory()};
-  border: solid 1px ${getFieldBorderColorFactoryForState('default')};
+const BaseInput = styled(Input)`
   border-radius: 0;
   color: ${(p)=>p.theme.color.gunMetal};
   ${(p)=>p.$isReadOnly && `cursor: default;`}
@@ -68707,9 +68721,6 @@ const StyledInput = styled(Input)`
   }
 
   &:hover {
-    background-color: ${getFieldBackgroundColorFactory()};
-    border: solid 1px ${getFieldBorderColorFactoryForState('hover')} !important;
-
     &::placeholder {
       color: ${getFieldPlaceholderColorFactoryForState('hover')};
     }
@@ -68717,8 +68728,6 @@ const StyledInput = styled(Input)`
 
   &:active,
   &:focus {
-    background-color: ${getFieldBackgroundColorFactory()};
-    border: solid 1px ${getFieldBorderColorFactoryForState('focus')} !important;
     outline: 0;
 
     &::placeholder {
@@ -68726,6 +68735,49 @@ const StyledInput = styled(Input)`
     }
   }
 `;
+const InputWithoutUnit = styled(BaseInput)`
+  background-color: ${getFieldBackgroundColorFactory()};
+  border: solid 1px ${getFieldBorderColorFactoryForState('default')};
+
+  &:hover {
+    background-color: ${getFieldBackgroundColorFactory()};
+    border: solid 1px ${getFieldBorderColorFactoryForState('hover')} !important;
+  }
+
+  &:active,
+  &:focus {
+    background-color: ${getFieldBackgroundColorFactory()};
+    border: solid 1px ${getFieldBorderColorFactoryForState('focus')} !important;
+  }
+`;
+const InputBoxWithUnit = styled.div`
+  align-items: center;
+  background-color: ${getFieldBackgroundColorFactory()};
+  border: solid 1px ${getFieldBorderColorFactoryForState('default')};
+  color: ${(p)=>p.theme.color.slateGray};
+  display: flex;
+  font-size: 13px;
+  line-height: 19px;
+  padding-right: 8px;
+  user-select: none;
+  width: 100%;
+
+  &:hover {
+    background-color: ${getFieldBackgroundColorFactory()};
+    border: solid 1px ${getFieldBorderColorFactoryForState('hover')} !important;
+  }
+
+  &:active,
+  &:focus {
+    background-color: ${getFieldBackgroundColorFactory()};
+    border: solid 1px ${getFieldBorderColorFactoryForState('focus')} !important;
+  }
+`;
+const InputWithUnit = styled(BaseInput)`
+  background-color: transparent;
+  border: none;
+  flex-grow: 1;
+`;
 
 const PADDING = {
     [Size.LARGE]: '8px 16px 10px',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mtes-mct/monitor-ui",
   "description": "Common React components, hooks, utilities and CSS stylesheets for MonitorFish, MonitorEnv and RapportNav.",
-  "version": "22.1.0",
+  "version": "23.1.0",
   "license": "AGPL-3.0",
   "type": "module",
   "engines": {