@mtes-mct/monitor-ui 6.5.0 → 6.5.2

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [6.5.1](https://github.com/MTES-MCT/monitor-ui/compare/v6.5.0...v6.5.1) (2023-05-26)
+
+
+### Bug Fixes
+
+* **fields:** add missing onBlur & onFocus props passing in NumberInput ([25c210e](https://github.com/MTES-MCT/monitor-ui/commit/25c210e498c37f275aa32dc5104e0c2824eb4a64))
+* **fields:** prevent wheel event in NumberInput, DatePicker & DateRangePicker ([21a1c20](https://github.com/MTES-MCT/monitor-ui/commit/21a1c205620e977b411e755793ff92dfc17da20b))
+
+# [6.5.0](https://github.com/MTES-MCT/monitor-ui/compare/v6.4.1...v6.5.0) (2023-05-25)
+
+
+### Features
+
+* **cypress:** extend retries to caught errors in fill command ([6ea6839](https://github.com/MTES-MCT/monitor-ui/commit/6ea6839c489b83c3807f5779ece254d9652dc95e))
+
 ## [6.4.1](https://github.com/MTES-MCT/monitor-ui/compare/v6.4.0...v6.4.1) (2023-05-25)
 
 

package/fields/NumberInput.d.ts

@@ -1,4 +1,4 @@
-import type { InputProps } from 'rsuite';
+import { type InputProps } from 'rsuite';
 import type { Promisable } from 'type-fest';
 export type NumberInputProps = Omit<InputProps, 'as' | 'defaultValue' | 'id' | 'onChange' | 'type' | 'value'> & {
     error?: string | undefined;
@@ -11,4 +11,4 @@ export type NumberInputProps = Omit<InputProps, 'as' | 'defaultValue' | 'id' | '
     onChange?: ((nextValue: number | undefined) => Promisable<void>) | undefined;
     value?: number | undefined;
 };
-export declare function NumberInput({ className, error, isErrorMessageHidden, isLabelHidden, isLight, isUndefinedWhenDisabled, label, onChange, style, value, ...originalProps }: NumberInputProps): JSX.Element;
+export declare function NumberInput({ className, error, isErrorMessageHidden, isLabelHidden, isLight, isUndefinedWhenDisabled, label, onBlur, onChange, onFocus, style, value, ...originalProps }: NumberInputProps): JSX.Element;

package/hooks/usePreventWheelEvent.d.ts

@@ -0,0 +1,2 @@
+import { type RefObject } from 'react';
+export declare function usePreventWheelEvent(inputRef: RefObject<HTMLInputElement | null>): (event: WheelEvent) => void;

package/index.js

@@ -2174,9 +2174,9 @@ function stopMouseEventPropagation(event) {
 
 function RawDialog({ children, className, isAbsolute = false, ...nativeProps }) {
     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 })] }));
+    return (jsxs(Box$h, { "$isAbsolute": isAbsolute, className: controlledClassName, onClick: stopMouseEventPropagation, ...nativeProps, children: [jsx(Overlay, { "$isAbsolute": isAbsolute }), jsx(Window, { "$isAbsolute": isAbsolute, children: children })] }));
 }
-const Box$g = styled.div `
+const Box$h = styled.div `
   position: ${p => (p.$isAbsolute ? 'absolute' : 'fixed')};
   top: 0;
   bottom: 0;
@@ -3185,9 +3185,9 @@ function SingleTag({ children, className, onDelete, ...nativeProps }) {
             onDelete();
         }
     }, [onDelete]);
-    return (jsxs(Box$f, { className: controlledClassName, ...nativeProps, children: [jsx(Text, { children: children }), jsx(StyledIconButton, { accent: Accent.TERTIARY, Icon: Close, iconSize: 10, onClick: handleDelete })] }));
+    return (jsxs(Box$g, { className: controlledClassName, ...nativeProps, children: [jsx(Text, { children: children }), jsx(StyledIconButton, { accent: Accent.TERTIARY, Icon: Close, iconSize: 10, onClick: handleDelete })] }));
 }
-const Box$f = styled.div `
+const Box$g = styled.div `
   align-items: center;
   display: inline-flex;
 `;
@@ -3242,9 +3242,9 @@ p.disabled ? p.theme.color.lightGray : p.hasError ? p.theme.color.maximumRed : p
 
 function Fieldset({ children, className, hasBorder = false, hasError = false, isLegendHidden = false, isLight = false, legend, ...nativeProps }) {
     const hasLegend = useMemo(() => Boolean(legend), [legend]);
-    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 })] }));
+    return (jsxs(Box$f, { 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 Box$e = styled.fieldset `
+const Box$f = styled.fieldset `
   align-items: flex-start;
   border: 0;
   display: flex;
@@ -3307,10 +3307,10 @@ function Tag({ accent, bullet, bulletColor, children, className, color, Icon, is
         case Accent.TERTIARY:
             return jsx(TertiaryTag, { ...commonProps });
         default:
-            return jsx(Box$d, { "$color": color, ...commonProps });
+            return jsx(Box$e, { "$color": color, ...commonProps });
     }
 }
-const Box$d = styled.span `
+const Box$e = styled.span `
   align-items: center;
   background-color: ${p => (p.$isLight ? p.theme.color.white : 'transparent')};
   border-radius: 11px;
@@ -3332,16 +3332,16 @@ const Box$d = styled.span `
     margin-right: 4px;
   }
 `;
-const PrimaryTag = styled(Box$d) `
+const PrimaryTag = styled(Box$e) `
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
   color: ${p => p.theme.color.gunMetal};
 `;
 // TODO Fix this color.
-const SecondaryTag = styled(Box$d) `
+const SecondaryTag = styled(Box$e) `
   background-color: ${p => (p.$isLight ? '#f6d012' : '#f6d012')};
   color: ${p => p.theme.color.gunMetal};
 `;
-const TertiaryTag = styled(Box$d) `
+const TertiaryTag = styled(Box$e) `
   background-color: ${p => (p.$isLight ? p.theme.color.charcoal : p.theme.color.charcoal)};
   color: ${p => p.theme.color.white};
 `;
@@ -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$c, { ref: boxRef, isLight: isLight, children: [boxRef.current && (jsx(StyledAutoComplete, { "$isLight": isLight, container: boxRef.current, 
+    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, 
                         // 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, 
@@ -20848,7 +20848,7 @@ const StyledAutoComplete = styled(AutoComplete) `
     }
   }
 `;
-const Box$c = styled.div `
+const Box$d = styled.div `
   background-color: ${p => (p.isLight ? p.theme.color.white : p.theme.color.gainsboro)};
   position: relative;
   width: 100%;
@@ -21149,11 +21149,11 @@ function CalendarPicker({ isHistorical, isOpen, onChange, value }) {
         // and can be used as a container for <RsuiteDatePicker />
         forceUpdate();
     }, [forceUpdate]);
-    return (jsx(Box$b, { ref: boxRef, onClick: stopMouseEventPropagation, children: boxRef.current && (jsx(DatePicker$1, { container: boxRef.current, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, oneTap: true, onSelect: handleSelect, open: isOpen, ranges: [], shouldDisableDate: shouldDisableDate, 
+    return (jsx(Box$c, { ref: boxRef, onClick: stopMouseEventPropagation, children: boxRef.current && (jsx(DatePicker$1, { container: boxRef.current, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, oneTap: true, onSelect: handleSelect, open: isOpen, ranges: [], shouldDisableDate: shouldDisableDate, 
             // eslint-disable-next-line no-null/no-null
             value: controlledValue ?? null })) }));
 }
-const Box$b = styled.div `
+const Box$c = styled.div `
   height: 0;
   position: relative;
   user-select: none;
@@ -21309,26 +21309,58 @@ const Box$b = styled.div `
   }
 `;
 
-function NumberInputWithRef({ isLight, max, min, onBack, onClick, onFilled, onFocus, onFormatError, onInput, onNext, onPrevious, size, value, ...nativeProps }, ref) {
+function usePreventWheelEvent(inputRef) {
+    /**
+     * Prevent any wheel event from emitting while allowing page scroll when focused.
+     *
+     * @description
+     * We want to prevent the number input from changing when the user accidentally scrolls up or down.
+     * That's why we prevent the default behavior of wheel events when it is focused.
+     *
+     * We also want to allow the user to be able to scroll the page while focused on a number input,
+     * That's why we blur this input when a "wheel" (=> "scroll") event happens.
+     *
+     * Because React uses passive event handler by default,
+     * we can't just call `preventDefault` in the `onWheel` event target.
+     * We thus have to use the input reference and add our event handler manually.
+     *
+     * @see https://github.com/facebook/react/pull/19654
+     */
+    const preventWheelEvent = useCallback((event) => {
+        if (!inputRef.current) {
+            return;
+        }
+        event.preventDefault();
+        inputRef.current.blur();
+    }, 
+    // We don't want to pass a reference as a hook dependency since it can't shallow-equal and `.current` is a pointer.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    return preventWheelEvent;
+}
+
+function NumberInputWithRef({ isLight, max, min, onBack, onBlur, onFilled, onFocus, onFormatError, onInput, onNext, onPrevious, size, value, ...nativeProps }, ref) {
     // eslint-disable-next-line no-null/no-null
     const inputRef = useRef(null);
     const placeholder = useMemo(() => '-'.repeat(size), [size]);
     useImperativeHandle(ref, () => inputRef.current);
-    const handleClick = useCallback((event) => {
-        // event.stopPropagation()
-        if (onClick) {
-            onClick(event);
+    const preventWheelEvent = usePreventWheelEvent(inputRef);
+    const handleBlur = useCallback((event) => {
+        event.target.removeEventListener('wheel', preventWheelEvent);
+        if (onBlur) {
+            onBlur(event);
         }
-    }, [onClick]);
+    }, [onBlur, preventWheelEvent]);
     const handleFocus = useCallback((event) => {
         if (!inputRef.current) {
             return;
         }
+        event.target.addEventListener('wheel', preventWheelEvent);
         inputRef.current.select();
         if (onFocus) {
             onFocus(event);
         }
-    }, [onFocus]);
+    }, [onFocus, preventWheelEvent]);
     const handleInput = useCallback(() => {
         if (!inputRef.current) {
             return;
@@ -21376,7 +21408,7 @@ function NumberInputWithRef({ isLight, max, min, onBack, onClick, onFilled, onFo
             onBack();
         }
     }, [onBack, onNext, onPrevious]);
-    return (jsx(StyledNumberInput, { ref: inputRef, "$isLight": isLight, "$size": size, defaultValue: value, maxLength: size, onClick: handleClick, onFocus: handleFocus, onInput: handleInput, onKeyDown: handleKeyDown, pattern: "\\d*", placeholder: placeholder, type: "text", ...nativeProps }, String(value)));
+    return (jsx(StyledNumberInput, { ref: inputRef, "$isLight": isLight, "$size": size, defaultValue: value, maxLength: size, onBlur: handleBlur, onFocus: handleFocus, onInput: handleInput, onKeyDown: handleKeyDown, pattern: "\\d*", placeholder: placeholder, type: "text", ...nativeProps }, String(value)));
 }
 const NumberInput$1 = forwardRef(NumberInputWithRef);
 const StyledNumberInput = styled.input `
@@ -21470,10 +21502,10 @@ function DateInputWithRef({ baseContainer, disabled = false, isCompact, isEndDat
         ];
         onChange(nextDateTuple, isFilled);
     }, [baseDocument, onChange]);
-    return (jsxs(Box$a, { ref: boxRef, "$hasError": hasFormatError || hasValidationError, "$isCompact": isCompact, "$isDisabled": disabled, "$isFocused": isForcedFocused || isFocused, "$isLight": isLight, children: [jsxs("div", { children: [isRange && isStartDate && jsx("span", { children: "Du " }), isRange && isEndDate && jsx("span", { children: "Au " }), jsx(NumberInput$1, { ref: dayInputRef, "aria-label": `Jour${isRange && isStartDate ? ' de début' : ''}${isRange && isEndDate ? ' de fin' : ''}`, disabled: disabled, isLight: isLight, max: 31, min: 1, onBack: onBack, onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: onInput, onNext: () => monthInputRef.current?.focus(), onPrevious: onPrevious, size: 2, value: controlledValue && controlledValue[2] }), "/", jsx(NumberInput$1, { ref: monthInputRef, "aria-label": `Mois${isRange && isStartDate ? ' de début' : ''}${isRange && isEndDate ? ' de fin' : ''}`, disabled: disabled, isLight: isLight, max: 12, min: 1, onBack: () => dayInputRef.current?.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: onInput, onNext: () => yearInputRef.current?.focus(), onPrevious: () => dayInputRef.current?.focus(), size: 2, value: controlledValue && controlledValue[1] }), "/", jsx(NumberInput$1, { ref: yearInputRef, "aria-label": `Année${isRange && isStartDate ? ' de début' : ''}${isRange && isEndDate ? ' de fin' : ''}`, disabled: disabled, isLight: isLight, max: 2030, min: 2020, onBack: () => monthInputRef.current?.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: onInput, onNext: onNext, onPrevious: () => monthInputRef.current?.focus(), size: 4, value: controlledValue && controlledValue[0] })] }), !isCompact && jsx(Calendar, {})] }));
+    return (jsxs(Box$b, { ref: boxRef, "$hasError": hasFormatError || hasValidationError, "$isCompact": isCompact, "$isDisabled": disabled, "$isFocused": isForcedFocused || isFocused, "$isLight": isLight, children: [jsxs("div", { children: [isRange && isStartDate && jsx("span", { children: "Du " }), isRange && isEndDate && jsx("span", { children: "Au " }), jsx(NumberInput$1, { ref: dayInputRef, "aria-label": `Jour${isRange && isStartDate ? ' de début' : ''}${isRange && isEndDate ? ' de fin' : ''}`, disabled: disabled, isLight: isLight, max: 31, min: 1, onBack: onBack, onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: onInput, onNext: () => monthInputRef.current?.focus(), onPrevious: onPrevious, size: 2, value: controlledValue && controlledValue[2] }), "/", jsx(NumberInput$1, { ref: monthInputRef, "aria-label": `Mois${isRange && isStartDate ? ' de début' : ''}${isRange && isEndDate ? ' de fin' : ''}`, disabled: disabled, isLight: isLight, max: 12, min: 1, onBack: () => dayInputRef.current?.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: onInput, onNext: () => yearInputRef.current?.focus(), onPrevious: () => dayInputRef.current?.focus(), size: 2, value: controlledValue && controlledValue[1] }), "/", jsx(NumberInput$1, { ref: yearInputRef, "aria-label": `Année${isRange && isStartDate ? ' de début' : ''}${isRange && isEndDate ? ' de fin' : ''}`, disabled: disabled, isLight: isLight, max: 2030, min: 2020, onBack: () => monthInputRef.current?.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: onInput, onNext: onNext, onPrevious: () => monthInputRef.current?.focus(), size: 4, value: controlledValue && controlledValue[0] })] }), !isCompact && jsx(Calendar, {})] }));
 }
 const DateInput = forwardRef(DateInputWithRef);
-const Box$a = styled.div `
+const Box$b = styled.div `
   align-items: center;
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
   box-shadow: ${p => p.$hasError || p.$isFocused
@@ -21546,9 +21578,9 @@ function RangedTimePicker({ filter, minutesRange, onChange }) {
     if (!filteredRangedTimeOptions.length) {
         return jsx(Fragment, {});
     }
-    return (jsx(Box$9, { onClick: stopMouseEventPropagation, role: "listbox", children: filteredRangedTimeOptions.map(({ label, value }, index) => (jsx(Option, { "aria-selected": false, className: "js-ranged-time-picker-option", isSelected: index === selectedOptionIndex, onClick: () => onChange(value), role: "option", tabIndex: -1, children: spannedLabels[index] }, label))) }));
+    return (jsx(Box$a, { onClick: stopMouseEventPropagation, role: "listbox", children: filteredRangedTimeOptions.map(({ label, value }, index) => (jsx(Option, { "aria-selected": false, className: "js-ranged-time-picker-option", isSelected: index === selectedOptionIndex, onClick: () => onChange(value), role: "option", tabIndex: -1, children: spannedLabels[index] }, label))) }));
 }
-const Box$9 = styled.div `
+const Box$a = styled.div `
   background-color: ${p => p.theme.color.white};
   box-shadow: inset 0px 0px 0px 1px ${p => p.theme.color.lightGray};
   display: flex;
@@ -21686,10 +21718,10 @@ function TimeInputWithRef({ baseContainer, disabled = false, isCompact, isEndDat
         }
         setControlledValue(value);
     }, [isFocused, previousValue, value]);
-    return (jsxs(Box$8, { ref: boxRef, "$hasError": hasFormatError || hasValidationError, "$isCompact": isCompact, "$isDisabled": disabled, "$isFocused": isFocused, "$isLight": isLight, children: [jsxs(InputGroup, { children: [jsxs("div", { children: [jsx(NumberInput$1, { ref: hourInputRef, "aria-label": `Heure${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, disabled: disabled, isLight: isLight, max: 23, min: 0, onBack: handleBack, onBlur: handleBlur, onClick: openRangedTimePicker, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: handleHourInput, onNext: () => minuteInputRef.current?.focus(), onPrevious: onPrevious, size: 2, value: controlledValue && controlledValue[0] }), ":", jsx(NumberInput$1, { ref: minuteInputRef, "aria-label": `Minute${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, disabled: disabled, isLight: isLight, max: 59, min: 0, onBack: () => hourInputRef.current?.focus(), onBlur: handleBlur, onClick: openRangedTimePicker, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: onInput, onNext: onNext, onPrevious: () => hourInputRef.current?.focus(), size: 2, value: controlledValue && controlledValue[1] })] }), !isCompact && jsx(Clock, {})] }), isTimePickerOpen && (jsx(RangedTimePicker, { filter: timePickerFilter, minutesRange: minutesRange, onChange: handleTimePickerChange }))] }));
+    return (jsxs(Box$9, { ref: boxRef, "$hasError": hasFormatError || hasValidationError, "$isCompact": isCompact, "$isDisabled": disabled, "$isFocused": isFocused, "$isLight": isLight, children: [jsxs(InputGroup, { children: [jsxs("div", { children: [jsx(NumberInput$1, { ref: hourInputRef, "aria-label": `Heure${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, disabled: disabled, isLight: isLight, max: 23, min: 0, onBack: handleBack, onBlur: handleBlur, onClick: openRangedTimePicker, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: handleHourInput, onNext: () => minuteInputRef.current?.focus(), onPrevious: onPrevious, size: 2, value: controlledValue && controlledValue[0] }), ":", jsx(NumberInput$1, { ref: minuteInputRef, "aria-label": `Minute${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, disabled: disabled, isLight: isLight, max: 59, min: 0, onBack: () => hourInputRef.current?.focus(), onBlur: handleBlur, onClick: openRangedTimePicker, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: onInput, onNext: onNext, onPrevious: () => hourInputRef.current?.focus(), size: 2, value: controlledValue && controlledValue[1] })] }), !isCompact && jsx(Clock, {})] }), isTimePickerOpen && (jsx(RangedTimePicker, { filter: timePickerFilter, minutesRange: minutesRange, onChange: handleTimePickerChange }))] }));
 }
 const TimeInput = forwardRef(TimeInputWithRef);
-const Box$8 = styled.div `
+const Box$9 = styled.div `
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
   box-shadow: ${p => p.$hasError || p.$isFocused
     ? `inset 0px 0px 0px 1px ${p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100]}`
@@ -21861,17 +21893,28 @@ function DatePicker({ baseContainer, className, defaultValue, disabled = false,
         selectedUtcTimeTupleRef.current = getUtcTimeTupleFromDayjs(selectedUtcDateAsDayjsRef.current);
         forceUpdate();
     }, [defaultValue, forceUpdate, previousDefaultValue]);
-    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 })] }));
+    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 })] }));
 }
-const Box$7 = styled.div `
+const Box$8 = styled.div `
   * {
     font-weight: 500;
     line-height: 1;
   }
 
   color: ${p => p.theme.color.gunMetal};
+  display: inline-flex;
   font-size: 13px;
+  outline: ${p => (p.$hasError ? `1px solid ${p.theme.color.maximumRed}` : 0)};
   position: relative;
+
+  ${p => p.$isDisabled &&
+    css `
+      * {
+        background-color: ${p.theme.color.cultured} !important;
+        color: ${p.theme.color.lightGray} !important;
+        cursor: not-allowed;
+      }
+    `}
 `;
 const Field$1 = styled.span `
   font-size: inherit;
@@ -21917,12 +21960,12 @@ function RangeCalendarPicker({ defaultValue, isHistorical, isOpen, onChange }) {
         // and can be used as a container for <RsuiteDateRangePicker />
         forceUpdate();
     }, [forceUpdate]);
-    return (jsx(Box$6, { ref: boxRef, onClick: stopMouseEventPropagation, children: boxRef.current && (jsx(DateRangePicker$1, { container: boxRef.current, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, onSelect: handleSelect, open: isOpen, ranges: [], shouldDisableDate: shouldDisableDate, 
+    return (jsx(Box$7, { ref: boxRef, onClick: stopMouseEventPropagation, children: boxRef.current && (jsx(DateRangePicker$1, { container: boxRef.current, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, onSelect: handleSelect, open: isOpen, ranges: [], shouldDisableDate: shouldDisableDate, 
             // `defaultValue` seems to be immediatly cancelled so we come down to using a controlled `value`
             // eslint-disable-next-line no-null/no-null
             value: controlledValue ?? null })) }));
 }
-const Box$6 = styled.div `
+const Box$7 = styled.div `
   height: 0;
   position: relative;
   user-select: none;
@@ -22316,19 +22359,21 @@ function DateRangePicker({ baseContainer, className, defaultValue, disabled = fa
         selectedEndTimeTupleRef.current = getUtcTimeTupleFromDayjs(selectedEndDateAsDayjsRef.current);
         forceUpdate();
     }, [defaultValue, forceUpdate, previousDefaultValue]);
-    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 })] }));
+    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 })] }));
 }
-const Box$5 = styled.div `
+const Box$6 = styled.div `
   * {
     font-weight: 500;
     line-height: 1;
   }
 
   color: ${p => p.theme.color.gunMetal};
+  display: inline-flex;
   font-size: 13px;
+  outline: ${p => (p.$hasError ? `1px solid ${p.theme.color.maximumRed}` : 0)};
   position: relative;
 
-  ${p => p.isDisabled &&
+  ${p => p.$isDisabled &&
     css `
       * {
         background-color: ${p.theme.color.cultured} !important;
@@ -25761,7 +25806,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$4, { ref: boxRef, "$hasError": hasError, "$isActive": isOpen, "$isLight": isLight, onClick: toggle, children: boxRef.current && (jsx(TagPicker, { container: boxRef.current, 
+    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, 
                     // 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, 
@@ -25769,7 +25814,7 @@ function MultiSelect({ baseContainer, customSearch, customSearchMinQueryLength =
                     // that's why we send this "always true" filter to disable Rsuite TagPicker internal search filtering
                     searchBy: (customSearch ? () => true : undefined), value: selectedRsuiteValue, ...originalProps }, key)) }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
 }
-const Box$4 = styled.div `
+const Box$5 = styled.div `
   position: relative;
   user-select: none;
   width: 100%;
@@ -25795,7 +25840,7 @@ const Box$4 = styled.div `
 
     :active,
     :focus {
-      border: solid 1px ${p => p.theme.color.blueGray[100]} !important;
+      border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100])} !important;
     }
 
     > .rs-picker-toggle {
@@ -25903,13 +25948,14 @@ 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(CheckboxesBox, { "$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: "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 })] }));
 }
-const CheckboxesBox = styled.div `
+const Box$4 = styled.div `
   color: ${p => p.theme.color.gunMetal};
   display: flex;
   flex-direction: ${p => (p.$isInline ? 'row' : 'column')};
   font-weight: 500;
+  outline: ${p => (p.$hasError ? `1px solid ${p.theme.color.maximumRed}` : 0)};
 
   > .rs-radio {
     * {
@@ -26015,11 +26061,14 @@ const Link = styled.a `
   }
 `;
 
-function NumberInput({ className, error, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, style, value, ...originalProps }) {
+function NumberInput({ className, error, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onBlur, onChange, onFocus, style, value, ...originalProps }) {
+    // eslint-disable-next-line no-null/no-null
+    const inputRef = useRef(null);
     const controlledClassname = useMemo(() => classnames('Field-NumberInput', className), [className]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const key = useKey([originalProps.disabled, originalProps.name]);
+    const preventWheelEvent = usePreventWheelEvent(inputRef);
     const handleChange = useCallback((nextValue) => {
         if (!onChange) {
             return;
@@ -26029,24 +26078,40 @@ function NumberInput({ className, error, isErrorMessageHidden = false, isLabelHi
         const normalizedNextValue = !Number.isNaN(nextValueAsNumber) ? nextValueAsNumber : undefined;
         onChange(normalizedNextValue);
     }, [onChange]);
+    const handleBlur = useCallback((event) => {
+        event.target.removeEventListener('wheel', preventWheelEvent);
+        if (onBlur) {
+            onBlur(event);
+        }
+    }, [onBlur, preventWheelEvent]);
+    const handleFocus = useCallback((event) => {
+        event.target.addEventListener('wheel', preventWheelEvent);
+        if (onFocus) {
+            onFocus(event);
+        }
+    }, [onFocus, preventWheelEvent]);
     useFieldUndefineEffect(isUndefinedWhenDisabled && originalProps.disabled, onChange);
-    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$2, { "$hasError": hasError, "$isLight": isLight, id: originalProps.name, onChange: handleChange, type: "number", 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$2, { ref: inputRef, "$hasError": hasError, "$isLight": isLight, id: originalProps.name, onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus, type: "number", value: value || '', ...originalProps }, key), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledInput$2 = styled(Input) `
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
-  border: solid 1px ${p => p.theme.color.blueYonder[100]};
+  border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.gainsboro)};
   border-radius: 0;
   font-size: 13px;
   /* TODO It should be 18px but computed line-height is stuck to min. 18.5px. Investigate that. */
   line-height: 19px;
-  outline: ${p => (p.$hasError ? `1px solid ${p.theme.color.maximumRed}` : 0)};
   padding: 3px 8px 6px;
   vertical-align: center;
   width: 100%;
 
+  :hover {
+    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueYonder[100])} !important;
+  }
+
+  :active,
   :focus {
-    outline-width: 1px;
-    outline-color: ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray)};
+    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100])} !important;
+    outline: 0;
   }
 `;
 
@@ -35010,7 +35075,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, onClick: toggle, children: boxRef.current && (jsx(StyledSelectPicker, { "$isLight": isLight, cleanable: isCleanable, container: boxRef.current, 
+    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, 
                     // 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, 
@@ -35036,18 +35101,18 @@ const Box = styled.div `
     width: 100%;
 
     > .rs-picker-toggle {
-      border: solid 1px ${p => p.theme.color.gainsboro} !important;
+      border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.gainsboro)} !important;
       font-size: 13px;
       line-height: 1.3846;
       padding: 4px 40px 6px 8px;
 
       :hover {
-        border: solid 1px ${p => p.theme.color.blueYonder[100]} !important;
+        border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueYonder[100])} !important;
       }
 
       :active,
       :focus {
-        border: solid 1px ${p => p.theme.color.blueGray[100]} !important;
+        border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100])} !important;
       }
 
       > .rs-stack {
@@ -35117,11 +35182,11 @@ 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, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput$1, { ref: inputRef, "$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: "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 })] }));
 }
 const StyledInput$1 = styled(Input) `
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
-  border: 0;
+  border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.gainsboro)};
   font-size: 13px;
   padding: 7px 11px;
   width: 100%;
@@ -35129,6 +35194,16 @@ const StyledInput$1 = styled(Input) `
   ::placeholder {
     color: ${p => (p.$isLight ? p.theme.color.slateGray : p.theme.color.slateGray)};
   }
+
+  :hover {
+    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueYonder[100])} !important;
+  }
+
+  :active,
+  :focus {
+    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100])} !important;
+    outline: 0;
+  }
 `;
 
 function TextInput({ className, error, Icon, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, size = Size.NORMAL, style, value, ...originalProps }) {
@@ -35158,12 +35233,11 @@ const PADDING_WITH_ICON = {
 };
 const StyledInput = styled(Input) `
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
-  border: solid 1px ${p => p.theme.color.blueYonder[100]};
+  border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.gainsboro)};
   border-radius: 0;
   font-size: 13px;
   /* TODO It should be 18px but computed line-height is stuck to min. 18.5px. Investigate that. */
   line-height: 19px;
-  outline: ${p => (p.$hasError ? `1px solid ${p.theme.color.maximumRed}` : 0)};
   padding: ${p => (p.$hasIcon ? PADDING_WITH_ICON[p.$size] : PADDING[p.$size])};
   vertical-align: center;
   width: 100%;
@@ -35171,6 +35245,16 @@ const StyledInput = styled(Input) `
   ::placeholder {
     color: ${p => (p.$isLight ? p.theme.color.slateGray : p.theme.color.slateGray)};
   }
+
+  :hover {
+    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueYonder[100])} !important;
+  }
+
+  :active,
+  :focus {
+    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100])} !important;
+    outline: 0;
+  }
 `;
 const InputBox = styled.div `
   position: relative;