@synerise/ds-input-number 1.2.48 → 1.2.50

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.50](https://github.com/Synerise/synerise-design/compare/@synerise/ds-input-number@1.2.49...@synerise/ds-input-number@1.2.50) (2026-07-23)
+
+**Note:** Version bump only for package @synerise/ds-input-number
+
+## [1.2.49](https://github.com/Synerise/synerise-design/compare/@synerise/ds-input-number@1.2.48...@synerise/ds-input-number@1.2.49) (2026-07-09)
+
+**Note:** Version bump only for package @synerise/ds-input-number
+
 ## [1.2.48](https://github.com/Synerise/synerise-design/compare/@synerise/ds-input-number@1.2.47...@synerise/ds-input-number@1.2.48) (2026-06-17)
 
 **Note:** Version bump only for package @synerise/ds-input-number

package/CLAUDE.md

@@ -0,0 +1,149 @@
+# InputNumber (`@synerise/ds-input-number`)
+
+> Locale-aware numeric input, **DS-native** (no Ant Design). Renders a styled `<input>` with custom
+> up/down steppers, form-field layout (label, tooltip, description, error text), autosize support,
+> and locale-driven thousand/decimal formatting.
+
+## Package structure
+
+```
+src/
+ InputNumber.tsx — main component (value flow, steppers, autosize wiring)
+ InputNumber.types.ts — InputNumberProps (explicit, hand-written), deprecated Props alias
+ InputNumber.styles.tsx — DS-native styled-components (InputNumberRoot, HandlerWrap, HandlerUp/Down, InputField, Addon, …)
+ index.ts — public exports
+ hooks/
+ useStepper.ts — float-safe increment/decrement, clamp, precision, press-and-hold + Shift×10
+ constants/
+ inputNumber.constants.ts — MAXIMUM_FRACTION_DIGITS (20), MAXIMUM_NUMBER_DIGITS (15), NUMBER_DELIMITER ('.'), ANGLE_UP_SVG / ANGLE_DOWN_SVG (stepper glyphs)
+ utils/
+ inputNumber.utils.ts — formatNumber, parseFormattedNumber helpers
+ __specs__/
+ InputNumber.spec.tsx — Vitest tests (component + steppers + value flow)
+ inputNumber.utils.spec.tsx — Vitest tests (utils)
+```
+
+There is **no `style/` LESS** — all styling is in `InputNumber.styles.tsx`.
+
+## Public exports
+
+### `InputNumber` (default export)
+
+Functional component. Not a forwardRef — no ref forwarding.
+
+Props = explicit `InputNumberOwnProps` + `FormFieldCommonProps` + `PassthroughAttributes` (`data-*`/`aria-*`)
++ standard input HTML attributes via `Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'onBlur' | 'size' | 'min' | 'max' | 'type'>` (antd-parity forwarding of `maxLength`, `onFocus`, `tabIndex`, `inputMode`, `onKeyDown`, …). The omitted keys are owned explicitly by the component (different types/behavior). Two have special wiring: `onKeyDown` and `onKeyPress` are composed with the internal arrow-stepping / numeric-filter handlers (consumer called first), and `inputMode` defaults to `'decimal'` but a consumer value overrides it:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `number \| null` | `undefined` | Controlled value |
+| `defaultValue` | `number \| null` | `undefined` | Uncontrolled initial value |
+| `onChange` | `(value: number \| null) => void` | `undefined` | Called with parsed numeric value on every change |
+| `onBlur` | `(event: FocusEvent<HTMLInputElement>) => void` | `undefined` | Native input blur, invoked **after** the on-blur min/max re-align (consumers read `event.target.value`) |
+| `onKeyPress` | `(event: KeyboardEvent<HTMLInputElement>) => void` | `undefined` | Forwarded the input's `keypress` event (fired before the internal numeric-key filter) |
+| `onStep` | `(value: number, info: { offset: number; type: 'up' \| 'down' }) => void` | `undefined` | Fires on a stepper interaction (up/down button or ArrowUp/ArrowDown). antd parity — fires alongside `onChange`; `offset` is the applied step magnitude (incl. Shift×10) |
+| `min` / `max` | `number` | `undefined` | Stepper bounds (clamped on step) |
+| `step` | `number \| string` | `1` | Stepper increment |
+| `disabled` / `readOnly` | `boolean` | `undefined` | Disable input; steppers are not rendered |
+| `autoFocus` | `boolean` | `undefined` | Focus the input on mount |
+| `tabIndex` | `number` | `undefined` | Forwarded to the underlying `<input>` (focus order) |
+| `placeholder` | `string` | `undefined` | Input placeholder |
+| `size` | `'small' \| 'middle' \| 'large'` | `undefined` | `'large'` → 48px tall |
+| `error` | `boolean` | `undefined` | Triggers error state (red inset border + background) |
+| `errorText` | `ReactNode` | `undefined` | Error message shown below input; also triggers error state |
+| `label` / `description` / `tooltip` / `tooltipConfig` | from `FormFieldCommonProps` | `undefined` | Form-field layout |
+| `prefixel` / `suffixel` | `ReactNode` | `undefined` | Content in the left / right addon slot |
+| `raw` | `boolean` | `undefined` | When `true`, renders bare input without FormField wrapper |
+| `valueFormatOptions` | `NumberToFormatOptions` | `undefined` | Override formatting options (e.g. `{ maximumFractionDigits: 2 }`) |
+| `autoResize` | `AutoResizeProp` | `undefined` | Enable autosize: `true` or `{ minWidth, maxWidth?, stretchToFit? }` |
+| `autoResizeProps` | `Partial<Pick<AutosizeInputProps, 'placeholderIsMinWidth' \| 'wrapperClassName' \| 'wrapperStyle' \| 'extraWidth'>>` | `undefined` | Extra props passed to `AutosizeWrapper` |
+| `style` / `className` | `CSSProperties` / `string` | `undefined` | Applied to the inner `InputNumberWrapper` |
+
+> **Removed in the antd-removal migration (STOR-2334) — BREAKING.** The antd-only props are gone:
+> `formatter`, `parser` (formatting is always locale-driven via `useDataFormat` + `valueFormatOptions`),
+> `decimalSeparator` (superseded by the locale `decimalDelimiter`), `controls`, `keyboard`, `stringMode`,
+> `bordered`, `status`, `prefix`, `onPressEnter`, and `addonBefore`/`addonAfter` (use `prefixel`/`suffixel`).
+> Also removed: `precision` — the stepped value is now rounded to
+> `max(decimals(step), valueFormatOptions?.maximumFractionDigits ?? 0)`, so express decimal precision
+> via `step` and/or `valueFormatOptions` instead.
+
+### `InputNumberProps` (type export)
+
+The full props type. `Props` is also exported from the types file as a `@deprecated` alias but is **not**
+re-exported from `index.ts`.
+
+## Usage patterns
+
+```tsx
+import InputNumber from '@synerise/ds-input-number';
+
+// Basic with form field
+<InputNumber label="Quantity" min={1} max={100} defaultValue={10} onChange={(v) => console.log(v)} />
+
+// Error state
+<InputNumber label="Price" error errorText="Must be positive" value={price} onChange={setPrice} />
+
+// With prefix/suffix
+<InputNumber prefixel="$" suffixel="USD" min={0} step={0.01} />
+
+// Raw (no form field wrapper)
+<InputNumber raw value={qty} onChange={setQty} />
+
+// Autosize
+<InputNumber autoResize={{ minWidth: '60px', maxWidth: '200px', stretchToFit: true }} value={val} onChange={setVal} />
+```
+
+## Styling
+
+All styling lives in `InputNumber.styles.tsx` as DS-native styled-components driven by transient
+`$`-props and `:focus-within` (no antd LESS, no `.ant-*`/`.ds-*` styling selectors). The
+`ant-input-number-*` and `ds-input-number-*` class names are kept on the elements as hooks only
+(ui-tests / interim external CSS). Theme tokens used: `grey-700` (text), `grey-300` (idle border),
+`blue-600` (focus border), `red-600`/`red-050` (error), `grey-500` (placeholder), `grey-050` (addon).
+
+> **Deep import**: `InputNumber.styles.tsx` imports `autoresizeConfObjToCss` from
+> `@synerise/ds-input/dist/Input.styles` — a fragile internal path (pre-existing; flagged as an
+> eslint warning until ds-input exposes it from the root).
+
+## Key dependencies
+
+- `@synerise/ds-form-field` — `FormField` wrapper providing label, tooltip, description, error layout
+- `@synerise/ds-input` — `AutosizeWrapper` + `AutoResizeProp` type
+- `@synerise/ds-core` — `useDataFormat` hook (locale-aware number formatting), `NumberToFormatOptions`, `ThemeProps`
+- `@synerise/ds-utils` — `useResizeObserver` (for `stretchToFit` autosize) + `PassthroughAttributes` type
+- `uuid` — generates stable `id` for label `htmlFor` association
+
+## Implementation notes
+
+- **Steppers (`useStepper`)**: float-safe arithmetic (integer scaling, so `0.1 + 0.2 === 0.3`), clamp to
+  `min`/`max`, then round to `max(decimals(step), valueFormatOptions?.maximumFractionDigits ?? 0)` — so a
+  fractional `step` (e.g. `0.01`) keeps its decimals without any extra config, and `maximumFractionDigits`
+  raises the rounding floor. Mouse press-and-hold auto-repeats (600ms delay → 200ms interval);
+  `Shift` multiplies the step by ten; ArrowUp/ArrowDown step from the keyboard (a consumer `onKeyDown`
+  is invoked first, then the stepping runs). Steppers are not rendered when `disabled` or `readOnly`.
+- **Value flow**: a controlled `<input type="text">`. Typed input is parsed locale→number string first
+  (`parseFormattedNumber`) then re-formatted for display (`formatNumber`) — preserving a lone `-`, a
+  trailing decimal and trailing zeros while typing. `onChange` always emits `number | null` (emits `0`,
+  not `null`). `aria-valuenow` carries the raw numeric value.
+- **On-blur min/max re-align (antd parity)**: typing is never clamped (rc-input-number's
+  `userTyping=true` path), so a value can exceed `min`/`max` mid-edit. On blur, an out-of-range value is
+  re-aligned to the nearest bound (`> max ⇒ max`, `< min ⇒ min`) — mirroring rc-input-number's
+  `flushInputValue(false)` → `triggerValueUpdate(…, userTyping=false)` → `getRangeValue`. When it clamps
+  it updates the display and fires `onChange(clamped)`; an in-range value is left untouched (no
+  `onChange`). Empty / `NaN` values are not clamped. Steppers clamp independently in `useStepper`.
+- **Numeric key filter**: lives on the input's `onKeyPress` — the native `keypress` event does not fire
+  for Backspace / arrows / Delete, so editing keys are never blocked. A consumer-supplied `onKeyPress`
+  prop is invoked first (so it can inspect / `preventDefault`), then the numeric filter runs.
+- **Locale-aware formatting**: `useDataFormat()` returns `formatValue`, `thousandDelimiter`,
+  `decimalDelimiter` based on the active `DataFormatNotationType` (`'EU'` or `'US'`).
+- **Controlled/uncontrolled hybrid**: keeps `localValue`/`displayValue` state; `value` prop changes sync
+  via `useEffect` (only when `value !== localValue`).
+- **Error state**: `error={true}` or a non-empty `errorText` adds the `error` class to the root and the
+  red inset border + `red-050` background via `$error`.
+- **`raw` mode**: skips the `FormField` wrapper — `label`/`description`/`errorText`/`tooltip` have no effect.
+- **`autoResize` + `stretchToFit`**: `useResizeObserver` on a wrapper ref dynamically sets `max-width`;
+  `AUTOSIZE_EXTRA_WIDTH = 45` accommodates the stepper buttons.
+- **Maximum digits**: `parseFormattedNumber` truncates to `MAXIMUM_NUMBER_DIGITS = 15` to avoid
+  floating-point precision issues near `Number.MAX_SAFE_INTEGER`.
+- **Uses Vitest** for testing.
+```

package/README.md

@@ -24,12 +24,13 @@ Input-Number UI Component
 | label               | Input label                                                                                                        | ReactNode                                                               | -         |
 | max                 | Max value                                                                                                          | number                                                                  | Infinity  |
 | min                 | Min value                                                                                                          | number                                                                  | -Infinity |
+| onBlur              | Native input blur handler (consumers read `event.target.value`)                                                    | (e: FocusEvent<HTMLInputElement>) => void                               | -         |
 | onChange            | Called with the parsed numeric value on change. Returns `null` when input is cleared.                              | (value: number \| null) => void                                         | -         |
-| onPressEnter        | Callback triggered when Enter key is pressed                                                                       | (e: Event) => void                                                      | -         |
 | precision           | Precision of input value                                                                                           | number                                                                  | -         |
 | prefixel            | ReactNode to render in the left addon slot                                                                         | ReactNode                                                               | -         |
 | raw                 | Render bare input without FormField wrapper (no label / tooltip / description / errorText)                         | boolean                                                                 | -         |
-| size                | Height of input box                                                                                                | string                                                                  | -         |
+| readOnly            | Read-only input (steppers are not rendered)                                                                        | boolean                                                                 | `false`   |
+| size                | Height of input box (`'large'` → 48px)                                                                              | 'small' \| 'middle' \| 'large'                                          | -         |
 | step                | The number by which the current value is increased or decreased                                                    | number \| string                                                        | 1         |
 | suffixel            | ReactNode to render in the right addon slot                                                                        | ReactNode                                                               | -         |
 | tooltip             | Tooltip content shown next to the label                                                                            | ReactNode                                                               | -         |
@@ -39,11 +40,7 @@ Input-Number UI Component
 | autoResize          | Enable autosize: `true` or `{ minWidth, maxWidth?, stretchToFit? }`                                               | boolean \| object                                                       | -         |
 | autoResizeProps     | Extra props for the autosize wrapper (`placeholderIsMinWidth`, `wrapperClassName`, `wrapperStyle`, `extraWidth`)   | object                                                                  | -         |
 
-> **Note**: `formatter` and `parser` props from Ant Design cannot be customised — they are always overridden internally by the locale-aware formatting logic.
-
-### Methods
-
-| Name    | Description  |
-| ------- | ------------ |
-| blur()  | remove focus |
-| focus() | get focus    |
+> **Note**: this component is DS-native (no Ant Design). The former antd-only props were removed —
+> `formatter`/`parser`/`decimalSeparator` (formatting is always locale-driven via `valueFormatOptions`),
+> `controls`, `keyboard`, `stringMode`, `bordered`, `status`, `prefix`, `onPressEnter`, and
+> `addonBefore`/`addonAfter` (use `prefixel`/`suffixel`).

package/dist/InputNumber.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { InputNumberProps } from './InputNumber.types';
-declare const InputNumber: ({ label, description, errorText, raw, error, prefixel, suffixel, style, tooltip, tooltipConfig, value, defaultValue, valueFormatOptions, onChange, autoResize, autoResizeProps, ...antdProps }: InputNumberProps) => React.JSX.Element;
+declare const InputNumber: ({ label, description, errorText, raw, error, prefixel, suffixel, style, className, tooltip, tooltipConfig, value, defaultValue, valueFormatOptions, onChange, onBlur, onKeyPress, onKeyDown, onStep, autoResize, autoResizeProps, min, max, step, disabled, readOnly, autoFocus, inputMode, placeholder, size, name, id: idProp, ...rest }: InputNumberProps) => React.JSX.Element;
 export default InputNumber;

package/dist/InputNumber.js

@@ -1,14 +1,15 @@
-import { jsx } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useCallback, useState, useRef, useMemo, useEffect } from "react";
 import { v4 } from "uuid";
 import { useDataFormat } from "@synerise/ds-core";
 import FormField from "@synerise/ds-form-field";
-import { AutosizeWrapper } from "@synerise/ds-input";
-import { useResizeObserver } from "@synerise/ds-utils";
-import { InputNumberWrapper, AntdInputNumber, InputNumberAutosize, InputNumberContainer } from "./InputNumber.styles.js";
+import { useAutosizeWidth, useStretchToFit, SIZER_STYLE } from "@synerise/ds-input";
+import { InputNumberRoot, HandlerWrap, HandlerUp, HandlerDown, InputFieldWrap, InputField, InputNumberAutosize, InputNumberContainer, InputNumberWrapper, GroupWrapper, Group, Addon } from "./InputNumber.styles.js";
+import { useStepper } from "./hooks/useStepper.js";
 import { formatNumber, parseFormattedNumber } from "./utils/inputNumber.utils.js";
-import "./style/index.css";
 const AUTOSIZE_EXTRA_WIDTH = 45;
+const NUMERIC_KEY = /^-?\d*(\.|,)?\d*$/i;
+const cx = (...classes) => classes.filter(Boolean).join(" ");
 const InputNumber = ({
   label,
   description,
@@ -18,94 +19,173 @@ const InputNumber = ({
   prefixel,
   suffixel,
   style,
+  className,
   tooltip,
   tooltipConfig,
   value,
   defaultValue,
   valueFormatOptions,
   onChange,
+  onBlur,
+  onKeyPress,
+  onKeyDown,
+  onStep,
   autoResize,
   autoResizeProps,
-  ...antdProps
+  min,
+  max,
+  step,
+  disabled,
+  readOnly,
+  autoFocus,
+  inputMode,
+  placeholder,
+  size,
+  name,
+  id: idProp,
+  // forward remaining standard input attributes (maxLength, onFocus, tabIndex, data-*/aria-*, …)
+  // to the input, as antd's rc-input-number did
+  ...rest
 }) => {
   const {
     formatValue,
     thousandDelimiter,
     decimalDelimiter
   } = useDataFormat();
-  const [displayValue, setDisplayValue] = useState("");
+  const formatter = useCallback((inputValue) => formatNumber(inputValue, formatValue, thousandDelimiter, decimalDelimiter, valueFormatOptions), [formatValue, valueFormatOptions, thousandDelimiter, decimalDelimiter]);
   const [localValue, setLocalValue] = useState(value ?? defaultValue);
-  const antdInputRef = useRef(null);
+  const [displayValue, setDisplayValue] = useState(() => formatter(value ?? defaultValue));
   const inputRef = useRef(null);
-  const inputNumberRef = useRef(null);
-  const elementRef = useRef(null);
   const scrollLeftRef = useRef(0);
+  const id = useMemo(() => idProp ?? v4(), [idProp]);
+  const showError = Boolean(error || errorText);
   useEffect(() => {
     if (value !== void 0 && value !== localValue) {
       setLocalValue(value);
+      setDisplayValue(formatter(value));
     }
   }, [value]);
-  const id = useMemo(() => v4(), []);
-  const showError = Boolean(error || errorText);
-  const formatter = useCallback((inputValue) => {
-    const formatted = formatNumber(inputValue, formatValue, thousandDelimiter, decimalDelimiter, valueFormatOptions);
-    return formatted;
-  }, [formatValue, valueFormatOptions, thousandDelimiter, decimalDelimiter]);
-  const parser = useCallback((inputValue) => {
-    return parseFloat(`${parseFormattedNumber(inputValue, formatValue, thousandDelimiter, decimalDelimiter)}`);
-  }, [formatValue, thousandDelimiter, decimalDelimiter]);
-  const handleOnChange = useCallback((changedValue) => {
-    const formattedValue = formatter(changedValue);
-    const parsedFormattedValue = parser(formattedValue);
-    const valueAsNumber = typeof parsedFormattedValue === "string" ? parseFloat(parsedFormattedValue) : parsedFormattedValue;
+  const handleInputChange = useCallback((rawValue) => {
+    const jsString = `${parseFormattedNumber(rawValue, formatValue, thousandDelimiter, decimalDelimiter)}`;
+    const formattedValue = formatNumber(jsString, formatValue, thousandDelimiter, decimalDelimiter, valueFormatOptions);
+    const valueAsNumber = parseFloat(jsString);
     const resultValue = Number.isNaN(valueAsNumber) ? defaultValue : valueAsNumber;
     setDisplayValue(formattedValue);
     setLocalValue(resultValue);
     onChange && onChange(resultValue ?? null);
-  }, [formatter, parser, defaultValue, onChange]);
-  useEffect(() => {
-    const input = antdInputRef.current;
-    const cancelNonNumeric = (event) => {
-      if (!/^-?\d*(\.|,)?\d*$/i.test(event.key)) {
-        event.preventDefault();
-      }
-    };
-    if (input) {
-      input.addEventListener("keypress", cancelNonNumeric);
+  }, [formatValue, thousandDelimiter, decimalDelimiter, valueFormatOptions, defaultValue, onChange]);
+  const commitStep = useCallback((next, info) => {
+    setDisplayValue(formatter(next));
+    setLocalValue(next);
+    onChange && onChange(next);
+    onStep && onStep(next, info);
+  }, [formatter, onChange, onStep]);
+  const precision = valueFormatOptions?.maximumFractionDigits;
+  const {
+    step: stepOnce,
+    startStep,
+    stopStep,
+    upDisabled,
+    downDisabled
+  } = useStepper({
+    value: localValue,
+    step,
+    min,
+    max,
+    precision,
+    disabled,
+    readOnly,
+    onStep: commitStep
+  });
+  const handleKeyDown = useCallback((event) => {
+    onKeyDown && onKeyDown(event);
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      stepOnce(1, event.shiftKey);
+    } else if (event.key === "ArrowDown") {
+      event.preventDefault();
+      stepOnce(-1, event.shiftKey);
+    }
+  }, [stepOnce, onKeyDown]);
+  const handleKeyPress = useCallback((event) => {
+    onKeyPress && onKeyPress(event);
+    if (!NUMERIC_KEY.test(event.key)) {
+      event.preventDefault();
     }
-    return () => {
-      if (input) {
-        input.removeEventListener("keypress", cancelNonNumeric);
+  }, [onKeyPress]);
+  const handleBlur = useCallback((event) => {
+    if (typeof localValue === "number" && Number.isFinite(localValue)) {
+      let clamped = localValue;
+      if (max !== void 0 && clamped > max) {
+        clamped = max;
       }
-    };
-  });
+      if (min !== void 0 && clamped < min) {
+        clamped = min;
+      }
+      if (clamped !== localValue) {
+        setLocalValue(clamped);
+        setDisplayValue(formatter(clamped));
+        onChange && onChange(clamped);
+      }
+    }
+    onBlur && onBlur(event);
+  }, [localValue, min, max, formatter, onChange, onBlur]);
   const stretchToFit = autoResize && autoResize !== true && Boolean(autoResize.stretchToFit);
-  const handlePreAutosize = useCallback(() => {
+  const {
+    sizerRef,
+    containerRef
+  } = useAutosizeWidth({
+    value: displayValue,
+    placeholder,
+    extraWidth: AUTOSIZE_EXTRA_WIDTH,
+    placeholderIsMinWidth: autoResizeProps?.placeholderIsMinWidth,
+    inputRef
+  });
+  const handleStretchBefore = useCallback(() => {
     scrollLeftRef.current = inputRef.current?.scrollLeft || 0;
-    inputNumberRef.current && inputNumberRef.current.style.removeProperty("max-width");
   }, []);
-  const handleAutosize = useCallback(() => {
-    const parentRect = elementRef.current && elementRef.current.getBoundingClientRect();
-    if (stretchToFit && inputNumberRef.current && parentRect?.width) {
-      inputNumberRef.current.style.maxWidth = `${parentRect?.width}px`;
-      inputRef.current && inputRef.current.scrollTo(scrollLeftRef.current, 0);
-    }
-  }, [stretchToFit]);
-  const handleWrapperToResize = useCallback(() => {
-    handlePreAutosize();
-    handleAutosize();
-  }, [handleAutosize, handlePreAutosize]);
-  const transformRef = useCallback((element) => {
-    inputNumberRef.current = element;
-    return element.querySelector("input");
+  const handleStretchAfter = useCallback(() => {
+    inputRef.current && inputRef.current.scrollTo(scrollLeftRef.current, 0);
   }, []);
-  useResizeObserver(elementRef, handleWrapperToResize);
-  const rawInput = /* @__PURE__ */ jsx(InputNumberWrapper, { style, children: /* @__PURE__ */ jsx(AntdInputNumber, { ...antdProps, ref: antdInputRef, onChange: handleOnChange, addonBefore: prefixel, addonAfter: suffixel, id, error: showError, className: showError ? "error" : void 0, autoComplete: "off", formatter, parser, defaultValue, value: localValue, decimalSeparator: decimalDelimiter }) });
-  const autoSizeInput = /* @__PURE__ */ jsx(InputNumberAutosize, { ref: elementRef, autoResize, children: /* @__PURE__ */ jsx(AutosizeWrapper, { ...autoResizeProps, extraWidth: AUTOSIZE_EXTRA_WIDTH, autoResize: !!autoResize, value: displayValue, transformRef, preAutosize: handlePreAutosize, onAutosize: handleAutosize, children: rawInput }) });
+  const {
+    outerRef
+  } = useStretchToFit({
+    enabled: !!stretchToFit,
+    targetRef: containerRef,
+    onBeforeResize: handleStretchBefore,
+    onAfterResize: handleStretchAfter
+  });
+  const showHandlers = !disabled && !readOnly;
+  const isLarge = size === "large";
+  const hasPrefix = prefixel !== void 0 && prefixel !== null;
+  const hasSuffix = suffixel !== void 0 && suffixel !== null;
+  const numberCore = /* @__PURE__ */ jsxs(InputNumberRoot, { className: cx("ds-input-number", isLarge && "ds-input-number-lg", showError && "error"), $error: showError, $disabled: disabled, $size: size, $hasPrefix: hasPrefix, $hasSuffix: hasSuffix, children: [
+    showHandlers && /* @__PURE__ */ jsxs(HandlerWrap, { className: "ds-input-number-handler-wrap", children: [
+      /* @__PURE__ */ jsx(HandlerUp, { role: "button", "aria-label": "Increase Value", className: "ds-input-number-handler ds-input-number-handler-up", $disabled: upDisabled, onMouseDown: (event) => {
+        event.preventDefault();
+        startStep(1, event.shiftKey);
+      }, onMouseUp: stopStep, onMouseLeave: stopStep }),
+      /* @__PURE__ */ jsx(HandlerDown, { role: "button", "aria-label": "Decrease Value", className: "ds-input-number-handler ds-input-number-handler-down", $disabled: downDisabled, onMouseDown: (event) => {
+        event.preventDefault();
+        startStep(-1, event.shiftKey);
+      }, onMouseUp: stopStep, onMouseLeave: stopStep })
+    ] }),
+    /* @__PURE__ */ jsx(InputFieldWrap, { className: "ds-input-number-input-wrap", $size: size, children: /* @__PURE__ */ jsx(InputField, { ...rest, ref: inputRef, type: "text", inputMode: inputMode ?? "decimal", role: "spinbutton", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": localValue ?? void 0, id, name, className: "ds-input-number-input", autoComplete: "off", placeholder, disabled, readOnly, autoFocus, value: displayValue, $autoResize: autoResize, onChange: (event) => handleInputChange(event.target.value), onKeyDown: handleKeyDown, onKeyPress: handleKeyPress, onBlur: handleBlur }) })
+  ] });
+  const withAddons = hasPrefix || hasSuffix ? /* @__PURE__ */ jsx(GroupWrapper, { className: "ds-input-number-group-wrapper", children: /* @__PURE__ */ jsxs(Group, { className: "ds-input-number-group", children: [
+    hasPrefix && /* @__PURE__ */ jsx(Addon, { className: "ds-input-number-group-addon", children: prefixel }),
+    numberCore,
+    hasSuffix && /* @__PURE__ */ jsx(Addon, { className: "ds-input-number-group-addon", children: suffixel })
+  ] }) }) : numberCore;
+  const rawInput = /* @__PURE__ */ jsx(InputNumberWrapper, { ref: containerRef, style, className, children: withAddons });
+  const autoSizeInput = /* @__PURE__ */ jsxs(InputNumberAutosize, { ref: outerRef, $autoResize: autoResize, className: autoResizeProps?.wrapperClassName, style: autoResizeProps?.wrapperStyle, children: [
+    rawInput,
+    /* @__PURE__ */ jsx("span", { ref: sizerRef, style: SIZER_STYLE, "aria-hidden": true })
+  ] });
   if (raw) {
     return /* @__PURE__ */ jsx(InputNumberContainer, { children: rawInput });
   }
-  return /* @__PURE__ */ jsx(InputNumberContainer, { autoResize, children: /* @__PURE__ */ jsx(FormField, { id, label, tooltip, tooltipConfig, description, errorText, children: autoResize ? autoSizeInput : rawInput }) });
+  return /* @__PURE__ */ jsx(InputNumberContainer, { children: /* @__PURE__ */ jsx(FormField, { id, label, tooltip, tooltipConfig, description, errorText, children: autoResize ? autoSizeInput : rawInput }) });
 };
 export {
   InputNumber as default

package/dist/InputNumber.styles.d.ts

@@ -1,16 +1,32 @@
-import { InputNumberProps } from 'antd';
-import { default as React } from 'react';
 import { ThemeProps } from '@synerise/ds-core';
 import { AutoResizeProp } from '@synerise/ds-input';
-export declare const InputNumberContainer: import('styled-components').StyledComponent<"div", any, {
-    autoResize?: AutoResizeProp;
-}, never>;
-export declare const InputNumberAutosize: import('styled-components').StyledComponent<"div", any, {
-    autoResize?: AutoResizeProp;
+type SizeProp = 'small' | 'middle' | 'large';
+export declare const HandlerUp: import('styled-components').StyledComponent<"span", any, {
+    $disabled?: boolean;
+} & ThemeProps, never>;
+export declare const HandlerDown: import('styled-components').StyledComponent<"span", any, {
+    $disabled?: boolean;
+} & ThemeProps, never>;
+export declare const HandlerWrap: import('styled-components').StyledComponent<"div", any, ThemeProps, never>;
+export declare const InputField: import('styled-components').StyledComponent<"input", any, {
+    $autoResize?: AutoResizeProp;
+} & ThemeProps, never>;
+export declare const InputFieldWrap: import('styled-components').StyledComponent<"div", any, {
+    $size?: SizeProp;
 }, never>;
-export declare const AntdInputNumber: import('styled-components').StyledComponent<React.ForwardRefExoticComponent<InputNumberProps<number> & React.RefAttributes<HTMLInputElement>>, any, {
-    error: boolean;
+export declare const Addon: import('styled-components').StyledComponent<"div", any, ThemeProps, never>;
+export declare const Group: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const GroupWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const InputNumberRoot: import('styled-components').StyledComponent<"div", any, {
+    $error?: boolean;
+    $disabled?: boolean;
+    $size?: SizeProp;
+    $hasPrefix?: boolean;
+    $hasSuffix?: boolean;
 } & ThemeProps, never>;
-export declare const Prefixel: import('styled-components').StyledComponent<"div", any, ThemeProps, never>;
-export declare const Suffixel: import('styled-components').StyledComponent<"div", any, ThemeProps, never>;
 export declare const InputNumberWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const InputNumberContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const InputNumberAutosize: import('styled-components').StyledComponent<"div", any, {
+    $autoResize?: AutoResizeProp;
+}, never>;
+export {};

package/dist/InputNumber.styles.js

@@ -1,44 +1,69 @@
-import { jsx } from "react/jsx-runtime";
-import { InputNumber } from "antd";
-import { forwardRef } from "react";
-import styled from "styled-components";
-import { autoresizeConfObjToCss } from "@synerise/ds-input/dist/Input.styles";
-const InputNumberContainer = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "InputNumberstyles__InputNumberContainer",
+import styled, { css } from "styled-components";
+import { autoresizeConfObjToCss } from "@synerise/ds-input";
+import { ANGLE_DOWN_SVG, ANGLE_UP_SVG } from "./constants/inputNumber.constants.js";
+const handlerGlyph = /* @__PURE__ */ css(["position:relative;flex:1 1 50%;min-height:0;cursor:pointer;user-select:none;&::before{content:'';position:absolute;inset:0;background-color:", ";mask-repeat:no-repeat;mask-position:center;mask-size:16px 16px;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:16px 16px;}& > svg,& > i{display:none;}"], (props) => props.theme.palette["grey-600"]);
+const HandlerUp = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "InputNumberstyles__HandlerUp",
   componentId: "sc-abrul0-0"
-})(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;&&& .ant-input-number-input{padding:", ";}"], (props) => props.autoResize ? "0" : "6px 11px");
-const InputNumberAutosize = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "InputNumberstyles__InputNumberAutosize",
+})(["", " &::before{mask-image:url('", "');-webkit-mask-image:url('", "');}", ""], handlerGlyph, ANGLE_UP_SVG, ANGLE_UP_SVG, (props) => props.$disabled && css(["cursor:not-allowed;opacity:0.4;"]));
+const HandlerDown = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "InputNumberstyles__HandlerDown",
   componentId: "sc-abrul0-1"
-})(["&&& .ant-input-number{width:", ";", ";grid-area:1 / 1;}input{text-indent:4px;}input.ant-input-number-input{letter-spacing:normal;font-feature-settings:'tnum' 0;font-variant-numeric:proportional-nums;}"], (props) => props.autoResize ? "100%" : "200px", (props) => autoresizeConfObjToCss({
-  ...props,
-  boxSizing: "border-box"
-}));
-const NumberOnlyBaseAntInputNumber = forwardRef((props, ref) => /* @__PURE__ */ jsx(InputNumber, { ...props, ref }));
-const AntdInputNumber = /* @__PURE__ */ styled(NumberOnlyBaseAntInputNumber).withConfig({
-  displayName: "InputNumberstyles__AntdInputNumber",
+})(["", " &::before{mask-image:url('", "');-webkit-mask-image:url('", "');}border-top:1px solid ", ";", ""], handlerGlyph, ANGLE_DOWN_SVG, ANGLE_DOWN_SVG, (props) => props.theme.palette["grey-300"], (props) => props.$disabled && css(["cursor:not-allowed;opacity:0.4;"]));
+const HandlerWrap = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "InputNumberstyles__HandlerWrap",
   componentId: "sc-abrul0-2"
-})(["color:", ";input,input:focus{", ";}.ant-input-number-group-addon{background-color:", ";padding:0 12px;}"], (props) => props.theme.palette["grey-700"], (props) => !!props.error && `
-      background: ${props.theme.palette["red-050"]};
-      border: 0;
-    `, (props) => props.theme.palette["grey-050"]);
-const Prefixel = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "InputNumberstyles__Prefixel",
+})(["position:absolute;z-index:3;top:1px;right:1px;width:22px;height:30px;display:flex;flex-direction:column;border-left:1px solid ", ";opacity:0;transition:opacity 0.24s linear 0.1s;"], (props) => props.theme.palette["grey-300"]);
+const InputField = /* @__PURE__ */ styled.input.withConfig({
+  displayName: "InputNumberstyles__InputField",
   componentId: "sc-abrul0-3"
-})(["border:1px solid ", ";border-radius:3px 0 0 3px;border-right-width:0;"], (props) => props.theme.palette["grey-300"]);
-const Suffixel = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "InputNumberstyles__Suffixel",
+})(["box-sizing:border-box;display:block;width:100%;height:100%;text-align:left;&&{height:100%;padding:", ";line-height:1;}color:inherit;font-family:inherit;font-size:13px;font-variant-numeric:tabular-nums;background:transparent;border:0;outline:0;transition:unset;&::placeholder{color:", ";}&:focus{box-shadow:unset;}"], (props) => props.$autoResize ? "0" : "7px 11px", (props) => props.theme.palette["grey-500"]);
+const InputFieldWrap = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "InputNumberstyles__InputFieldWrap",
   componentId: "sc-abrul0-4"
-})(["border:1px solid ", ";border-radius:0 3px 3px 0;border-left-width:0;"], (props) => props.theme.palette["grey-300"]);
+})(["height:100%;margin:0 2px;"]);
+const Addon = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "InputNumberstyles__Addon",
+  componentId: "sc-abrul0-5"
+})(["display:flex;align-items:center;padding:0 12px;background-color:", ";border:1px solid ", ";&:first-child{border-radius:3px 0 0 3px;border-right-width:0;}&:last-child{border-radius:0 3px 3px 0;border-left-width:0;}"], (props) => props.theme.palette["grey-050"], (props) => props.theme.palette["grey-300"]);
+const Group = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "InputNumberstyles__Group",
+  componentId: "sc-abrul0-6"
+})(["display:inline-flex;width:100%;vertical-align:top;"]);
+const GroupWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "InputNumberstyles__GroupWrapper",
+  componentId: "sc-abrul0-7"
+})(["display:inline-block;"]);
+const InputNumberRoot = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "InputNumberstyles__InputNumberRoot",
+  componentId: "sc-abrul0-8"
+})(["position:relative;box-sizing:border-box;width:100%;height:", ";line-height:1.38;color:", ";background:", ";border:0;border-radius:", ";box-shadow:", ";&:focus-within{box-shadow:", ";background:", ";}", " &:hover ", ",&:focus-within ", "{opacity:1;}&:focus-within ", "{width:21px;height:28px;top:2px;right:2px;}", " ", " ", ""], (props) => props.$size === "large" ? "48px" : "32px", (props) => props.theme.palette["grey-700"], (props) => props.$error ? props.theme.palette["red-050"] : props.theme.palette.white, (props) => `${props.$hasPrefix ? "0" : "3px"} ${props.$hasSuffix ? "0" : "3px"} ${props.$hasSuffix ? "0" : "3px"} ${props.$hasPrefix ? "0" : "3px"}`, (props) => props.$error ? `inset 0px 0px 0px 2px ${props.theme.palette["red-600"]}` : `inset 0px 0px 0px 1px ${props.theme.palette["grey-300"]}`, (props) => props.$error ? `inset 0px 0px 0px 2px ${props.theme.palette["red-600"]}` : `inset 0px 0px 0px 2px ${props.theme.palette["blue-600"]}`, (props) => props.$error ? props.theme.palette["red-050"] : props.theme.palette["blue-050"], (props) => !props.$error && !props.$disabled && css(["&:hover:not(:focus-within){box-shadow:inset 0px 0px 0px 1px ", ";}"], props.theme.palette["grey-400"]), HandlerWrap, HandlerWrap, HandlerWrap, (props) => props.$error && css(["", "{width:21px;height:28px;top:2px;right:2px;}"], HandlerWrap), (props) => props.$size === "large" && css(["", "{width:24px;height:44px;}&:focus-within ", "{height:44px;}"], HandlerWrap, HandlerWrap), (props) => props.$disabled && css(["cursor:not-allowed;background:", ";", "{cursor:not-allowed;color:", ";}"], props.theme.palette["grey-050"], InputField, props.theme.palette["grey-400"]));
 const InputNumberWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "InputNumberstyles__InputNumberWrapper",
-  componentId: "sc-abrul0-5"
-})([""]);
+  componentId: "sc-abrul0-9"
+})(["display:block;"]);
+const InputNumberContainer = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "InputNumberstyles__InputNumberContainer",
+  componentId: "sc-abrul0-10"
+})(["display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;"]);
+const InputNumberAutosize = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "InputNumberstyles__InputNumberAutosize",
+  componentId: "sc-abrul0-11"
+})(["", " ", "{text-indent:4px;letter-spacing:normal;font-variant-numeric:tabular-nums;}"], (props) => css(["", "{width:", ";", ";grid-area:1 / 1;}"], InputNumberRoot, props.$autoResize ? "100%" : "200px", autoresizeConfObjToCss({
+  autoResize: props.$autoResize,
+  boxSizing: "border-box"
+})), InputField);
 export {
-  AntdInputNumber,
+  Addon,
+  Group,
+  GroupWrapper,
+  HandlerDown,
+  HandlerUp,
+  HandlerWrap,
+  InputField,
+  InputFieldWrap,
   InputNumberAutosize,
   InputNumberContainer,
-  InputNumberWrapper,
-  Prefixel,
-  Suffixel
+  InputNumberRoot,
+  InputNumberWrapper
 };

package/dist/InputNumber.types.d.ts

@@ -1,10 +1,29 @@
-import { InputNumberProps as AntdInputNumberProps } from 'antd';
-import { ReactNode } from 'react';
+import { CSSProperties, FocusEvent, InputHTMLAttributes, KeyboardEvent, ReactNode } from 'react';
 import { NumberToFormatOptions } from '@synerise/ds-core';
 import { FormFieldCommonProps } from '@synerise/ds-form-field';
 import { AutoResizeProp, AutosizeInputProps } from '@synerise/ds-input';
-export type InputNumberProps = AntdInputNumberProps<number> & {
+import { PassthroughAttributes } from '@synerise/ds-utils';
+type InputNumberOwnProps = {
+    value?: number | null;
     defaultValue?: number | null;
+    onChange?: (value: number | null) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    onKeyPress?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onStep?: (value: number, info: {
+        offset: number;
+        type: 'up' | 'down';
+    }) => void;
+    min?: number;
+    max?: number;
+    step?: number | string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    autoFocus?: boolean;
+    tabIndex?: number;
+    placeholder?: string;
+    size?: 'small' | 'middle' | 'large';
+    name?: string;
+    id?: string;
     error?: boolean;
     prefixel?: ReactNode;
     suffixel?: ReactNode;
@@ -12,8 +31,12 @@ export type InputNumberProps = AntdInputNumberProps<number> & {
     valueFormatOptions?: NumberToFormatOptions;
     autoResize?: AutoResizeProp;
     autoResizeProps?: Partial<Pick<AutosizeInputProps, 'placeholderIsMinWidth' | 'wrapperClassName' | 'wrapperStyle' | 'extraWidth'>>;
-} & FormFieldCommonProps;
+    style?: CSSProperties;
+    className?: string;
+};
+export type InputNumberProps = InputNumberOwnProps & FormFieldCommonProps & PassthroughAttributes & Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'onBlur' | 'size' | 'min' | 'max' | 'type'>;
 /**
  * @deprecated - use InputNumberProps
  */
 export type Props = InputNumberProps;
+export {};

package/dist/constants/inputNumber.constants.d.ts

@@ -2,3 +2,5 @@ import { Delimiter } from '@synerise/ds-core';
 export declare const MAXIMUM_FRACTION_DIGITS = 20;
 export declare const NUMBER_DELIMITER: Delimiter;
 export declare const MAXIMUM_NUMBER_DIGITS = 15;
+export declare const ANGLE_UP_SVG = "data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbnMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6bm9uZTt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPjAxLTAxLWFuZ2xlLXVwLXM8L3RpdGxlPjxyZWN0IGlkPSJjYW52YXMiIGNsYXNzPSJjbHMtMSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMTUuMjUsMTQuMzhhLjc5Ljc5LDAsMCwxLS41My0uMjJMMTIsMTEuNDQsOS4yOCwxNC4xNmEuNzUuNzUsMCwwLDEtMS4wNiwwLC43Ny43NywwLDAsMSwwLTEuMDdsMy4yNS0zLjI1YS43NS43NSwwLDAsMSwxLjA2LDBsMy4yNSwzLjI1YS43Ny43NywwLDAsMSwwLDEuMDdBLjc5Ljc5LDAsMCwxLDE1LjI1LDE0LjM4WiIvPjwvc3ZnPg==";
+export declare const ANGLE_DOWN_SVG = "data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbnMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6bm9uZTt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPjAxLTAzLWFuZ2xlLWRvd24tczwvdGl0bGU+PHJlY3QgaWQ9ImNhbnZhcyIgY2xhc3M9ImNscy0xIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xMiwxNC4zOGEuNzkuNzksMCwwLDEtLjUzLS4yMkw4LjIyLDEwLjkxYS43Ny43NywwLDAsMSwwLTEuMDcuNzUuNzUsMCwwLDEsMS4wNiwwTDEyLDEyLjU2bDIuNzItMi43MmEuNzUuNzUsMCwwLDEsMS4wNiwwLC43Ny43NywwLDAsMSwwLDEuMDdsLTMuMjUsMy4yNUEuNzkuNzksMCwwLDEsMTIsMTQuMzhaIi8+PC9zdmc+";

package/dist/constants/inputNumber.constants.js

@@ -1,7 +1,11 @@
 const MAXIMUM_FRACTION_DIGITS = 20;
 const NUMBER_DELIMITER = ".";
 const MAXIMUM_NUMBER_DIGITS = 15;
+const ANGLE_UP_SVG = "data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbnMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6bm9uZTt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPjAxLTAxLWFuZ2xlLXVwLXM8L3RpdGxlPjxyZWN0IGlkPSJjYW52YXMiIGNsYXNzPSJjbHMtMSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMTUuMjUsMTQuMzhhLjc5Ljc5LDAsMCwxLS41My0uMjJMMTIsMTEuNDQsOS4yOCwxNC4xNmEuNzUuNzUsMCwwLDEtMS4wNiwwLC43Ny43NywwLDAsMSwwLTEuMDdsMy4yNS0zLjI1YS43NS43NSwwLDAsMSwxLjA2LDBsMy4yNSwzLjI1YS43Ny43NywwLDAsMSwwLDEuMDdBLjc5Ljc5LDAsMCwxLDE1LjI1LDE0LjM4WiIvPjwvc3ZnPg==";
+const ANGLE_DOWN_SVG = "data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbnMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6bm9uZTt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPjAxLTAzLWFuZ2xlLWRvd24tczwvdGl0bGU+PHJlY3QgaWQ9ImNhbnZhcyIgY2xhc3M9ImNscy0xIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xMiwxNC4zOGEuNzkuNzksMCwwLDEtLjUzLS4yMkw4LjIyLDEwLjkxYS43Ny43NywwLDAsMSwwLTEuMDcuNzUuNzUsMCwwLDEsMS4wNiwwTDEyLDEyLjU2bDIuNzItMi43MmEuNzUuNzUsMCwwLDEsMS4wNiwwLC43Ny43NywwLDAsMSwwLDEuMDdsLTMuMjUsMy4yNUEuNzkuNzksMCwwLDEsMTIsMTQuMzhaIi8+PC9zdmc+";
 export {
+  ANGLE_DOWN_SVG,
+  ANGLE_UP_SVG,
   MAXIMUM_FRACTION_DIGITS,
   MAXIMUM_NUMBER_DIGITS,
   NUMBER_DELIMITER

package/dist/hooks/useStepper.d.ts

@@ -0,0 +1,25 @@
+type UseStepperArgs = {
+    value: number | null | undefined;
+    step?: number | string;
+    min?: number;
+    max?: number;
+    /** Display precision floor (from valueFormatOptions); the step's own decimals are added on top. */
+    precision?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+    onStep: (next: number, info: {
+        offset: number;
+        type: 'up' | 'down';
+    }) => void;
+};
+type UseStepperResult = {
+    /** Single step — used for keyboard (the OS repeats key-down events itself). */
+    step: (direction: 1 | -1, decuple?: boolean) => void;
+    /** Press-and-hold: immediate step, then auto-repeat — used for the mouse handlers. */
+    startStep: (direction: 1 | -1, decuple?: boolean) => void;
+    stopStep: () => void;
+    upDisabled: boolean;
+    downDisabled: boolean;
+};
+export declare const useStepper: ({ value, step, min, max, precision, disabled, readOnly, onStep, }: UseStepperArgs) => UseStepperResult;
+export {};

package/dist/hooks/useStepper.js

@@ -0,0 +1,108 @@
+import { useRef, useCallback, useEffect } from "react";
+const STEP_DELAY = 600;
+const STEP_INTERVAL = 200;
+const DECUPLE = 10;
+const countDecimals = (value) => {
+  if (!Number.isFinite(value)) {
+    return 0;
+  }
+  const text = String(value);
+  if (text.includes("e-")) {
+    return Number(text.split("e-")[1]);
+  }
+  return text.includes(".") ? text.split(".")[1].length : 0;
+};
+const scaledAdd = (a, b) => {
+  const factor = Math.pow(10, Math.max(countDecimals(a), countDecimals(b)));
+  return (Math.round(a * factor) + Math.round(b * factor)) / factor;
+};
+const clamp = (value, min, max) => {
+  let next = value;
+  if (max !== void 0 && next > max) {
+    next = max;
+  }
+  if (min !== void 0 && next < min) {
+    next = min;
+  }
+  return next;
+};
+const applyPrecision = (value, precision) => precision === void 0 ? value : Number(value.toFixed(precision));
+const useStepper = ({
+  value,
+  step = 1,
+  min,
+  max,
+  precision,
+  disabled,
+  readOnly,
+  onStep
+}) => {
+  const timerRef = useRef(null);
+  const latest = useRef({
+    value,
+    step,
+    min,
+    max,
+    precision,
+    disabled,
+    readOnly,
+    onStep
+  });
+  latest.current = {
+    value,
+    step,
+    min,
+    max,
+    precision,
+    disabled,
+    readOnly,
+    onStep
+  };
+  const base = value ?? 0;
+  const locked = Boolean(disabled || readOnly);
+  const upDisabled = locked || max !== void 0 && base >= max;
+  const downDisabled = locked || min !== void 0 && base <= min;
+  const stepOnce = useCallback((direction, decuple = false) => {
+    const args = latest.current;
+    if (args.disabled || args.readOnly) {
+      return;
+    }
+    const rawStep = typeof args.step === "string" ? parseFloat(args.step) || 1 : args.step ?? 1;
+    const delta = rawStep * (decuple ? DECUPLE : 1) * direction;
+    const effectivePrecision = Math.max(countDecimals(rawStep), args.precision ?? 0);
+    const next = applyPrecision(clamp(scaledAdd(args.value ?? 0, delta), args.min, args.max), effectivePrecision);
+    args.onStep(next, {
+      offset: Math.abs(delta),
+      type: direction === 1 ? "up" : "down"
+    });
+  }, []);
+  const clearTimer = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+  const startStep = useCallback((direction, decuple = false) => {
+    clearTimer();
+    if (latest.current.disabled || latest.current.readOnly) {
+      return;
+    }
+    stepOnce(direction, decuple);
+    const loop = () => {
+      stepOnce(direction, decuple);
+      timerRef.current = setTimeout(loop, STEP_INTERVAL);
+    };
+    timerRef.current = setTimeout(loop, STEP_DELAY);
+  }, [clearTimer, stepOnce]);
+  useEffect(() => clearTimer, [clearTimer]);
+  return {
+    step: stepOnce,
+    startStep,
+    stopStep: clearTimer,
+    upDisabled,
+    downDisabled
+  };
+};
+export {
+  useStepper
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-input-number",
-  "version": "1.2.48",
+  "version": "1.2.50",
   "description": "Input-Number UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -17,6 +17,7 @@
   "files": [
     "/dist",
     "CHANGELOG.md",
+    "CLAUDE.md",
     "README.md",
     "package.json",
     "LICENSE.md"
@@ -35,23 +36,19 @@
     "check:circular-dependencies": "madge --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json src/ --exclude '/dist/'",
     "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
   },
-  "sideEffects": [
-    "dist/style/*",
-    "*.less"
-  ],
+  "sideEffects": false,
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-form-field": "^1.3.23",
-    "@synerise/ds-input": "^1.7.11",
-    "@synerise/ds-utils": "^1.10.1",
+    "@synerise/ds-form-field": "^1.3.24",
+    "@synerise/ds-input": "^1.7.13",
+    "@synerise/ds-utils": "^1.10.2",
     "uuid": "^8.3.2"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
-    "antd": "4.24.16",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "d8c64070f58f14e3fb1bfbcbf00d1e3b8fd51eb8"
+  "gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
 }

package/dist/style/index.css

@@ -1 +0,0 @@
-.ant-input-number-affix-wrapper{display:inline-block;width:100%;min-width:0;padding:4px 15px;color:#6a7580;font-size:13px;line-height:1.38;background-color:#fff;background-image:none;border:1px solid #dbe0e3;border-radius:3px;transition:all .3s;position:relative;display:inline-flex;width:90px;padding:0;padding-inline-start:15px}.ant-input-number-affix-wrapper::placeholder{color:#b5bdc3;user-select:none}.ant-input-number-affix-wrapper:placeholder-shown{text-overflow:ellipsis}.ant-input-number-affix-wrapper:hover{border-color:#b5bdc3;border-right-width:1px}.ant-input-number-affix-wrapper-focused,.ant-input-number-affix-wrapper:focus{border-color:#38f;box-shadow:0 0 0 0 rgba(11,104,255,.2);border-right-width:1px;outline:0}.ant-input-number-affix-wrapper-disabled{color:#b5bdc3;background-color:#f9fafb;border-color:#dbe0e3;box-shadow:none;cursor:not-allowed;opacity:1}.ant-input-number-affix-wrapper-disabled:hover{border-color:#dbe0e3;border-right-width:1px}.ant-input-number-affix-wrapper[disabled]{color:#b5bdc3;background-color:#f9fafb;border-color:#dbe0e3;box-shadow:none;cursor:not-allowed;opacity:1}.ant-input-number-affix-wrapper[disabled]:hover{border-color:#dbe0e3;border-right-width:1px}.ant-input-number-affix-wrapper-borderless,.ant-input-number-affix-wrapper-borderless-disabled,.ant-input-number-affix-wrapper-borderless-focused,.ant-input-number-affix-wrapper-borderless:focus,.ant-input-number-affix-wrapper-borderless:hover,.ant-input-number-affix-wrapper-borderless[disabled]{background-color:transparent;border:none;box-shadow:none}textarea.ant-input-number-affix-wrapper{max-width:100%;height:auto;min-height:32px;line-height:1.38;vertical-align:bottom;transition:all .3s,height 0s}.ant-input-number-affix-wrapper-lg{padding:6px 15px;font-size:13px}.ant-input-number-affix-wrapper-sm{padding:1px 7px}.ant-input-number-affix-wrapper:not(.ant-input-number-affix-wrapper-disabled):hover{border-color:#b5bdc3;border-right-width:1px;z-index:1}.ant-input-number-affix-wrapper-focused,.ant-input-number-affix-wrapper:focus{z-index:1}.ant-input-number-affix-wrapper-disabled .ant-input-number[disabled]{background:0 0}.ant-input-number-affix-wrapper>div.ant-input-number{width:100%;border:none;outline:0}.ant-input-number-affix-wrapper>div.ant-input-number.ant-input-number-focused{box-shadow:none!important}.ant-input-number-affix-wrapper input.ant-input-number-input{padding:0}.ant-input-number-affix-wrapper::before{display:inline-block;width:0;visibility:hidden;content:'\a0'}.ant-input-number-affix-wrapper .ant-input-number-handler-wrap{z-index:2}.ant-input-number-prefix,.ant-input-number-suffix{display:flex;flex:none;align-items:center;pointer-events:none}.ant-input-number-prefix{margin-inline-end:4px}.ant-input-number-suffix{position:absolute;top:0;right:0;z-index:1;height:100%;margin-right:15px;margin-left:4px}.ant-input-number-group-wrapper .ant-input-number-affix-wrapper{width:100%}.ant-input-number-status-error:not(.ant-input-number-disabled):not(.ant-input-number-borderless).ant-input-number,.ant-input-number-status-error:not(.ant-input-number-disabled):not(.ant-input-number-borderless).ant-input-number:hover{background:#fff;border-color:#f52922}.ant-input-number-status-error:not(.ant-input-number-disabled):not(.ant-input-number-borderless).ant-input-number-focused,.ant-input-number-status-error:not(.ant-input-number-disabled):not(.ant-input-number-borderless).ant-input-number:focus{border-color:#ff584d;box-shadow:0 0 0 0 rgba(245,41,34,.2);border-right-width:1px;outline:0}.ant-input-number-status-error .ant-input-number-prefix{color:#f52922}.ant-input-number-status-warning:not(.ant-input-number-disabled):not(.ant-input-number-borderless).ant-input-number,.ant-input-number-status-warning:not(.ant-input-number-disabled):not(.ant-input-number-borderless).ant-input-number:hover{background:#fff;border-color:#fab700}.ant-input-number-status-warning:not(.ant-input-number-disabled):not(.ant-input-number-borderless).ant-input-number-focused,.ant-input-number-status-warning:not(.ant-input-number-disabled):not(.ant-input-number-borderless).ant-input-number:focus{border-color:#ffcd29;box-shadow:0 0 0 0 rgba(250,183,0,.2);border-right-width:1px;outline:0}.ant-input-number-status-warning .ant-input-number-prefix{color:#fab700}.ant-input-number-affix-wrapper-status-error:not(.ant-input-number-affix-wrapper-disabled):not(.ant-input-number-affix-wrapper-borderless).ant-input-number-affix-wrapper,.ant-input-number-affix-wrapper-status-error:not(.ant-input-number-affix-wrapper-disabled):not(.ant-input-number-affix-wrapper-borderless).ant-input-number-affix-wrapper:hover{background:#fff;border-color:#f52922}.ant-input-number-affix-wrapper-status-error:not(.ant-input-number-affix-wrapper-disabled):not(.ant-input-number-affix-wrapper-borderless).ant-input-number-affix-wrapper-focused,.ant-input-number-affix-wrapper-status-error:not(.ant-input-number-affix-wrapper-disabled):not(.ant-input-number-affix-wrapper-borderless).ant-input-number-affix-wrapper:focus{border-color:#ff584d;box-shadow:0 0 0 0 rgba(245,41,34,.2);border-right-width:1px;outline:0}.ant-input-number-affix-wrapper-status-error .ant-input-number-prefix{color:#f52922}.ant-input-number-affix-wrapper-status-warning:not(.ant-input-number-affix-wrapper-disabled):not(.ant-input-number-affix-wrapper-borderless).ant-input-number-affix-wrapper,.ant-input-number-affix-wrapper-status-warning:not(.ant-input-number-affix-wrapper-disabled):not(.ant-input-number-affix-wrapper-borderless).ant-input-number-affix-wrapper:hover{background:#fff;border-color:#fab700}.ant-input-number-affix-wrapper-status-warning:not(.ant-input-number-affix-wrapper-disabled):not(.ant-input-number-affix-wrapper-borderless).ant-input-number-affix-wrapper-focused,.ant-input-number-affix-wrapper-status-warning:not(.ant-input-number-affix-wrapper-disabled):not(.ant-input-number-affix-wrapper-borderless).ant-input-number-affix-wrapper:focus{border-color:#ffcd29;box-shadow:0 0 0 0 rgba(250,183,0,.2);border-right-width:1px;outline:0}.ant-input-number-affix-wrapper-status-warning .ant-input-number-prefix{color:#fab700}.ant-input-number-group-wrapper-status-error .ant-input-number-group-addon{color:#f52922;border-color:#f52922}.ant-input-number-group-wrapper-status-warning .ant-input-number-group-addon{color:#fab700;border-color:#fab700}.ant-input-number{box-sizing:border-box;font-variant:tabular-nums;list-style:none;font-feature-settings:'tnum';position:relative;width:100%;min-width:0;padding:4px 15px;color:#6a7580;font-size:13px;line-height:1.38;background-color:#fff;background-image:none;transition:all .3s;display:inline-block;width:90px;margin:0;padding:0;border:1px solid #dbe0e3;border-radius:3px}.ant-input-number::placeholder{color:#b5bdc3;user-select:none}.ant-input-number:placeholder-shown{text-overflow:ellipsis}.ant-input-number:hover{border-color:#b5bdc3;border-right-width:1px}.ant-input-number-focused,.ant-input-number:focus{border-color:#38f;box-shadow:0 0 0 0 rgba(11,104,255,.2);border-right-width:1px;outline:0}.ant-input-number-disabled{color:#b5bdc3;background-color:#f9fafb;border-color:#dbe0e3;box-shadow:none;cursor:not-allowed;opacity:1}.ant-input-number-disabled:hover{border-color:#dbe0e3;border-right-width:1px}.ant-input-number[disabled]{color:#b5bdc3;background-color:#f9fafb;border-color:#dbe0e3;box-shadow:none;cursor:not-allowed;opacity:1}.ant-input-number[disabled]:hover{border-color:#dbe0e3;border-right-width:1px}.ant-input-number-borderless,.ant-input-number-borderless-disabled,.ant-input-number-borderless-focused,.ant-input-number-borderless:focus,.ant-input-number-borderless:hover,.ant-input-number-borderless[disabled]{background-color:transparent;border:none;box-shadow:none}textarea.ant-input-number{max-width:100%;height:auto;min-height:32px;line-height:1.38;vertical-align:bottom;transition:all .3s,height 0s}.ant-input-number-lg{padding:6px 15px;font-size:13px}.ant-input-number-sm{padding:1px 7px}.ant-input-number-group{box-sizing:border-box;margin:0;padding:0;color:#6a7580;font-size:13px;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum';position:relative;display:table;width:100%;border-collapse:separate;border-spacing:0}.ant-input-number-group[class*=col-]{float:none;padding-right:0;padding-left:0}.ant-input-number-group>[class*=col-]{padding-right:8px}.ant-input-number-group>[class*=col-]:last-child{padding-right:0}.ant-input-number-group-addon,.ant-input-number-group-wrap,.ant-input-number-group>.ant-input-number{display:table-cell}.ant-input-number-group-addon:not(:first-child):not(:last-child),.ant-input-number-group-wrap:not(:first-child):not(:last-child),.ant-input-number-group>.ant-input-number:not(:first-child):not(:last-child){border-radius:0}.ant-input-number-group-addon,.ant-input-number-group-wrap{width:1px;white-space:nowrap;vertical-align:middle}.ant-input-number-group-wrap>*{display:block!important}.ant-input-number-group .ant-input-number{float:left;width:100%;margin-bottom:0;text-align:inherit}.ant-input-number-group .ant-input-number:focus{z-index:1;border-right-width:1px}.ant-input-number-group .ant-input-number:hover{z-index:1;border-right-width:1px}.ant-input-search-with-button .ant-input-number-group .ant-input-number:hover{z-index:0}.ant-input-number-group-addon{position:relative;padding:0 15px;color:#6a7580;font-weight:400;font-size:13px;text-align:center;background-color:#e9edee;border:1px solid #dbe0e3;border-radius:3px;transition:all .3s}.ant-input-number-group-addon .ant-select{margin:-5px -15px}.ant-input-number-group-addon .ant-select.ant-select-single:not(.ant-select-customize-input) .ant-select-selector{background-color:inherit;border:1px solid transparent;box-shadow:none}.ant-input-number-group-addon .ant-select-focused .ant-select-selector,.ant-input-number-group-addon .ant-select-open .ant-select-selector{color:#0b68ff}.ant-input-number-group-addon .ant-cascader-picker{margin:-9px -16px;background-color:transparent}.ant-input-number-group-addon .ant-cascader-picker .ant-cascader-input{text-align:left;border:0;box-shadow:none}.ant-input-number-group-addon:first-child,.ant-input-number-group>.ant-input-number:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.ant-input-number-group-addon:first-child .ant-select .ant-select-selector,.ant-input-number-group>.ant-input-number:first-child .ant-select .ant-select-selector{border-top-right-radius:0;border-bottom-right-radius:0}.ant-input-number-group>.ant-input-number-affix-wrapper:not(:first-child) .ant-input-number{border-top-left-radius:0;border-bottom-left-radius:0}.ant-input-number-group>.ant-input-number-affix-wrapper:not(:last-child) .ant-input-number{border-top-right-radius:0;border-bottom-right-radius:0}.ant-input-number-group-addon:first-child{border-right:0}.ant-input-number-group-addon:last-child{border-left:0}.ant-input-number-group-addon:last-child,.ant-input-number-group>.ant-input-number:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.ant-input-number-group-addon:last-child .ant-select .ant-select-selector,.ant-input-number-group>.ant-input-number:last-child .ant-select .ant-select-selector{border-top-left-radius:0;border-bottom-left-radius:0}.ant-input-number-group-lg .ant-input-number,.ant-input-number-group-lg>.ant-input-number-group-addon{padding:6px 15px;font-size:13px}.ant-input-number-group-sm .ant-input-number,.ant-input-number-group-sm>.ant-input-number-group-addon{padding:1px 7px}.ant-input-number-group-lg .ant-select-single .ant-select-selector{height:48px}.ant-input-number-group-sm .ant-select-single .ant-select-selector{height:24px}.ant-input-number-group .ant-input-number-affix-wrapper:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.ant-input-search .ant-input-number-group .ant-input-number-affix-wrapper:not(:last-child){border-top-left-radius:3px;border-bottom-left-radius:3px}.ant-input-number-group .ant-input-number-affix-wrapper:not(:first-child),.ant-input-search .ant-input-number-group .ant-input-number-affix-wrapper:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.ant-input-number-group.ant-input-number-group-compact{display:block}.ant-input-number-group.ant-input-number-group-compact::before{display:table;content:''}.ant-input-number-group.ant-input-number-group-compact::after{display:table;clear:both;content:''}.ant-input-number-group.ant-input-number-group-compact-addon:not(:first-child):not(:last-child),.ant-input-number-group.ant-input-number-group-compact-wrap:not(:first-child):not(:last-child),.ant-input-number-group.ant-input-number-group-compact>.ant-input-number:not(:first-child):not(:last-child){border-right-width:1px}.ant-input-number-group.ant-input-number-group-compact-addon:not(:first-child):not(:last-child):hover,.ant-input-number-group.ant-input-number-group-compact-wrap:not(:first-child):not(:last-child):hover,.ant-input-number-group.ant-input-number-group-compact>.ant-input-number:not(:first-child):not(:last-child):hover{z-index:1}.ant-input-number-group.ant-input-number-group-compact-addon:not(:first-child):not(:last-child):focus,.ant-input-number-group.ant-input-number-group-compact-wrap:not(:first-child):not(:last-child):focus,.ant-input-number-group.ant-input-number-group-compact>.ant-input-number:not(:first-child):not(:last-child):focus{z-index:1}.ant-input-number-group.ant-input-number-group-compact>*{display:inline-block;float:none;vertical-align:top;border-radius:0}.ant-input-number-group.ant-input-number-group-compact>.ant-input-number-affix-wrapper,.ant-input-number-group.ant-input-number-group-compact>.ant-input-number-number-affix-wrapper,.ant-input-number-group.ant-input-number-group-compact>.ant-picker-range{display:inline-flex}.ant-input-number-group.ant-input-number-group-compact>:not(:last-child){margin-right:-1px;border-right-width:1px}.ant-input-number-group.ant-input-number-group-compact .ant-input-number{float:none}.ant-input-number-group.ant-input-number-group-compact>.ant-cascader-picker .ant-input,.ant-input-number-group.ant-input-number-group-compact>.ant-input-group-wrapper .ant-input,.ant-input-number-group.ant-input-number-group-compact>.ant-select-auto-complete .ant-input,.ant-input-number-group.ant-input-number-group-compact>.ant-select>.ant-select-selector{border-right-width:1px;border-radius:0}.ant-input-number-group.ant-input-number-group-compact>.ant-cascader-picker .ant-input:hover,.ant-input-number-group.ant-input-number-group-compact>.ant-input-group-wrapper .ant-input:hover,.ant-input-number-group.ant-input-number-group-compact>.ant-select-auto-complete .ant-input:hover,.ant-input-number-group.ant-input-number-group-compact>.ant-select>.ant-select-selector:hover{z-index:1}.ant-input-number-group.ant-input-number-group-compact>.ant-cascader-picker .ant-input:focus,.ant-input-number-group.ant-input-number-group-compact>.ant-input-group-wrapper .ant-input:focus,.ant-input-number-group.ant-input-number-group-compact>.ant-select-auto-complete .ant-input:focus,.ant-input-number-group.ant-input-number-group-compact>.ant-select>.ant-select-selector:focus{z-index:1}.ant-input-number-group.ant-input-number-group-compact>.ant-select-focused{z-index:1}.ant-input-number-group.ant-input-number-group-compact>.ant-select>.ant-select-arrow{z-index:1}.ant-input-number-group.ant-input-number-group-compact>.ant-cascader-picker:first-child .ant-input,.ant-input-number-group.ant-input-number-group-compact>.ant-select-auto-complete:first-child .ant-input,.ant-input-number-group.ant-input-number-group-compact>.ant-select:first-child>.ant-select-selector,.ant-input-number-group.ant-input-number-group-compact>:first-child{border-top-left-radius:3px;border-bottom-left-radius:3px}.ant-input-number-group.ant-input-number-group-compact>.ant-cascader-picker-focused:last-child .ant-input,.ant-input-number-group.ant-input-number-group-compact>.ant-cascader-picker:last-child .ant-input,.ant-input-number-group.ant-input-number-group-compact>.ant-select:last-child>.ant-select-selector,.ant-input-number-group.ant-input-number-group-compact>:last-child{border-right-width:1px;border-top-right-radius:3px;border-bottom-right-radius:3px}.ant-input-number-group.ant-input-number-group-compact>.ant-select-auto-complete .ant-input{vertical-align:top}.ant-input-number-group.ant-input-number-group-compact .ant-input-group-wrapper+.ant-input-group-wrapper{margin-left:-1px}.ant-input-number-group.ant-input-number-group-compact .ant-input-group-wrapper+.ant-input-group-wrapper .ant-input-affix-wrapper{border-radius:0}.ant-input-number-group.ant-input-number-group-compact .ant-input-group-wrapper:not(:last-child).ant-input-search>.ant-input-group>.ant-input-group-addon>.ant-input-search-button{border-radius:0}.ant-input-number-group.ant-input-number-group-compact .ant-input-group-wrapper:not(:last-child).ant-input-search>.ant-input-group>.ant-input{border-radius:3px 0 0 3px}.ant-input-number-group>.ant-input-number-rtl:first-child{border-radius:0 3px 3px 0}.ant-input-number-group>.ant-input-number-rtl:last-child{border-radius:3px 0 0 3px}.ant-input-number-group-rtl .ant-input-number-group-addon:first-child{border-right:1px solid #dbe0e3;border-left:0;border-radius:0 3px 3px 0}.ant-input-number-group-rtl .ant-input-number-group-addon:last-child{border-right:0;border-left:1px solid #dbe0e3;border-radius:3px 0 0 3px}.ant-input-number-group-wrapper{display:inline-block;text-align:start;vertical-align:top}.ant-input-number-handler{position:relative;display:block;width:100%;height:50%;overflow:hidden;color:#232936;font-weight:700;line-height:0;text-align:center;border-left:1px solid #dbe0e3;transition:all .1s linear}.ant-input-number-handler:active{background:#f4f4f4}.ant-input-number-handler:hover .ant-input-number-handler-down-inner,.ant-input-number-handler:hover .ant-input-number-handler-up-inner{color:#38f}.ant-input-number-handler-down-inner,.ant-input-number-handler-up-inner{display:inline-flex;align-items:center;color:inherit;font-style:normal;line-height:0;text-align:center;text-transform:none;vertical-align:-.125em;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:absolute;right:4px;width:12px;height:12px;color:#232936;line-height:12px;transition:all .1s linear;user-select:none}.ant-input-number-handler-down-inner>*,.ant-input-number-handler-up-inner>*{line-height:1}.ant-input-number-handler-down-inner svg,.ant-input-number-handler-up-inner svg{display:inline-block}.ant-input-number-handler-down-inner::before,.ant-input-number-handler-up-inner::before{display:none}.ant-input-number-handler-down-inner .ant-input-number-handler-down-inner-icon,.ant-input-number-handler-down-inner .ant-input-number-handler-up-inner-icon,.ant-input-number-handler-up-inner .ant-input-number-handler-down-inner-icon,.ant-input-number-handler-up-inner .ant-input-number-handler-up-inner-icon{display:block}.ant-input-number:hover{border-color:#b5bdc3;border-right-width:1px}.ant-input-number:hover+.ant-form-item-children-icon{opacity:0;transition:opacity .24s linear .24s}.ant-input-number-focused{border-color:#38f;box-shadow:0 0 0 0 rgba(11,104,255,.2);border-right-width:1px;outline:0}.ant-input-number-disabled{color:#b5bdc3;background-color:#f9fafb;border-color:#dbe0e3;box-shadow:none;cursor:not-allowed;opacity:1}.ant-input-number-disabled:hover{border-color:#dbe0e3;border-right-width:1px}.ant-input-number-disabled .ant-input-number-input{cursor:not-allowed}.ant-input-number-disabled .ant-input-number-handler-wrap{display:none}.ant-input-number-readonly .ant-input-number-handler-wrap{display:none}.ant-input-number-input{width:100%;height:30px;padding:0 15px;text-align:left;background-color:transparent;border:0;border-radius:3px;outline:0;transition:all .3s linear;appearance:textfield!important}.ant-input-number-input::placeholder{color:#b5bdc3;user-select:none}.ant-input-number-input:placeholder-shown{text-overflow:ellipsis}.ant-input-number-input[type=number]::-webkit-inner-spin-button,.ant-input-number-input[type=number]::-webkit-outer-spin-button{margin:0;-webkit-appearance:none;appearance:none}.ant-input-number-lg{padding:0;font-size:13px}.ant-input-number-lg input{height:46px}.ant-input-number-sm{padding:0}.ant-input-number-sm input{height:22px;padding:0 7px}.ant-input-number-handler-wrap{position:absolute;top:0;right:0;width:22px;height:100%;background:#fff;border-radius:0 3px 3px 0;opacity:0;transition:opacity .24s linear .1s}.ant-input-number-handler-wrap .ant-input-number-handler .ant-input-number-handler-down-inner,.ant-input-number-handler-wrap .ant-input-number-handler .ant-input-number-handler-up-inner{display:flex;align-items:center;justify-content:center;min-width:auto;margin-right:0;font-size:7px}.ant-input-number-borderless .ant-input-number-handler-wrap{border-left-width:0}.ant-input-number-handler-wrap:hover .ant-input-number-handler{height:40%}.ant-input-number-focused .ant-input-number-handler-wrap,.ant-input-number:hover .ant-input-number-handler-wrap{opacity:1}.ant-input-number-handler-up{border-top-right-radius:3px;cursor:pointer}.ant-input-number-handler-up-inner{top:50%;margin-top:-5px;text-align:center}.ant-input-number-handler-up:hover{height:60%!important}.ant-input-number-handler-down{top:0;border-top:1px solid #dbe0e3;border-bottom-right-radius:3px;cursor:pointer}.ant-input-number-handler-down-inner{top:50%;text-align:center;transform:translateY(-50%)}.ant-input-number-handler-down:hover{height:60%!important}.ant-input-number-borderless .ant-input-number-handler-down{border-top-width:0}.ant-input-number-focused:not(.ant-input-number-borderless) .ant-input-number-handler-down,.ant-input-number:hover:not(.ant-input-number-borderless) .ant-input-number-handler-down{border-top:1px solid #dbe0e3}.ant-input-number-handler-down-disabled,.ant-input-number-handler-up-disabled{cursor:not-allowed}.ant-input-number-handler-down-disabled:hover .ant-input-number-handler-down-inner,.ant-input-number-handler-up-disabled:hover .ant-input-number-handler-up-inner{color:#b5bdc3}.ant-input-number-borderless{box-shadow:none}.ant-input-number-out-of-range input{color:#f52922}.ant-input-number-compact-item:not(.ant-input-number-compact-last-item):not(.ant-input-number-compact-item-rtl){margin-right:-1px}.ant-input-number-compact-item:not(.ant-input-number-compact-last-item).ant-input-number-compact-item-rtl{margin-left:-1px}.ant-input-number-compact-item:active,.ant-input-number-compact-item:focus,.ant-input-number-compact-item:hover{z-index:2}.ant-input-number-compact-item.ant-input-number-focused{z-index:2}.ant-input-number-compact-item[disabled]{z-index:0}.ant-input-number-compact-item:not(.ant-input-number-compact-first-item):not(.ant-input-number-compact-last-item).ant-input-number{border-radius:0}.ant-input-number-compact-item.ant-input-number.ant-input-number-compact-first-item:not(.ant-input-number-compact-last-item):not(.ant-input-number-compact-item-rtl){border-top-right-radius:0;border-bottom-right-radius:0}.ant-input-number-compact-item.ant-input-number.ant-input-number-compact-last-item:not(.ant-input-number-compact-first-item):not(.ant-input-number-compact-item-rtl){border-top-left-radius:0;border-bottom-left-radius:0}.ant-input-number-compact-item.ant-input-number.ant-input-number-compact-item-rtl.ant-input-number-compact-first-item:not(.ant-input-number-compact-last-item){border-top-left-radius:0;border-bottom-left-radius:0}.ant-input-number-compact-item.ant-input-number.ant-input-number-compact-item-rtl.ant-input-number-compact-last-item:not(.ant-input-number-compact-first-item){border-top-right-radius:0;border-bottom-right-radius:0}.ant-input-number-rtl{direction:rtl}.ant-input-number-rtl .ant-input-number-handler{border-right:1px solid #dbe0e3;border-left:0}.ant-input-number-rtl .ant-input-number-handler-wrap{right:auto;left:0}.ant-input-number-rtl.ant-input-number-borderless .ant-input-number-handler-wrap{border-right-width:0}.ant-input-number-rtl .ant-input-number-handler-up{border-top-right-radius:0}.ant-input-number-rtl .ant-input-number-handler-down{border-bottom-right-radius:0}.ant-input-number-rtl .ant-input-number-input{direction:ltr;text-align:right}.ant-input-number-input{height:32px;border:0;outline:0;transition:unset}.ant-input-number-input *{transition:unset}.ant-input-number{width:100%}.ant-input-number-input:focus{box-shadow:unset}.ant-input-number{border:0}.ant-input-number.ant-input-number{line-height:1.38;height:32px;box-shadow:inset 0 0 0 1px #dbe0e3}.ant-input-number.ant-input-number input::placeholder{color:#949ea6}.ant-input-number.ant-input-number.ant-input-number-focused{box-shadow:inset 0 0 0 2px #0b68ff;border:0!important}.ant-input-number.ant-input-number.ant-input-number-lg{height:48px}.ant-input-number.ant-input-number.ant-input-number-lg .ant-input-number-input-wrap{height:44px}.ant-input-number .ant-input-number-handler svg{display:none}.ant-input-number.ant-input-number.ant-input-number-focused .ant-input-number-handler-wrap{width:21px;height:28px;top:2px;right:2px}.ant-input-number.ant-input-number.ant-input-number-lg.ant-input-number-focused .ant-input-number-handler-wrap{height:44px}.ant-input-number.ant-input-number.ant-input-number-lg .ant-input-number-handler-wrap{width:24px;height:44px}.ant-input-number .ant-input-number-handler-wrap{z-index:3;height:30px;top:1px;right:1px}.ant-input-number .ant-input-number-handler-wrap .ant-input-number-handler-down,.ant-input-number .ant-input-number-handler-wrap .ant-input-number-handler-up{background-repeat:no-repeat;background-size:cover;background-position:center}.ant-input-number .ant-input-number-handler-wrap .ant-input-number-handler-down i,.ant-input-number .ant-input-number-handler-wrap .ant-input-number-handler-up i{display:none}.ant-input-number .ant-input-number-handler-wrap .ant-input-number-handler-up{background-image:url('data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbnMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6bm9uZTt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPjAxLTAxLWFuZ2xlLXVwLXM8L3RpdGxlPjxyZWN0IGlkPSJjYW52YXMiIGNsYXNzPSJjbHMtMSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+PHBhdGggZmlsbD0iIzZhNzU4MCIgZD0iTTE1LjI1LDE0LjM4YS43OS43OSwwLDAsMS0uNTMtLjIyTDEyLDExLjQ0LDkuMjgsMTQuMTZhLjc1Ljc1LDAsMCwxLTEuMDYsMCwuNzcuNzcsMCwwLDEsMC0xLjA3bDMuMjUtMy4yNWEuNzUuNzUsMCwwLDEsMS4wNiwwbDMuMjUsMy4yNWEuNzcuNzcsMCwwLDEsMCwxLjA3QS43OS43OSwwLDAsMSwxNS4yNSwxNC4zOFoiLz48L3N2Zz4=')}.ant-input-number .ant-input-number-handler-wrap .ant-input-number-handler-down{background-image:url('data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbnMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6bm9uZTt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPjAxLTAzLWFuZ2xlLWRvd24tczwvdGl0bGU+PHJlY3QgaWQ9ImNhbnZhcyIgY2xhc3M9ImNscy0xIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz48cGF0aCBmaWxsPSIjNmE3NTgwIiBkPSJNMTIsMTQuMzhhLjc5Ljc5LDAsMCwxLS41My0uMjJMOC4yMiwxMC45MWEuNzcuNzcsMCwwLDEsMC0xLjA3Ljc1Ljc1LDAsMCwxLDEuMDYsMEwxMiwxMi41NmwyLjcyLTIuNzJhLjc1Ljc1LDAsMCwxLDEuMDYsMCwuNzcuNzcsMCwwLDEsMCwxLjA3bC0zLjI1LDMuMjVBLjc5Ljc5LDAsMCwxLDEyLDE0LjM4WiIvPjwvc3ZnPg==')}.ant-input-number .ant-input-number-input-wrap{height:28px;margin-top:2px;margin:2px}.ant-input-number .ant-input-number-input{position:relative;top:0;height:inherit}.ant-input-number.ant-input-number-focused .ant-input-number-input{top:0;box-shadow:unset}.ant-input-number.error.ant-input-number.error{box-shadow:inset 0 0 0 2px #f52922}.ant-input-number.error .ant-input-number-handler-wrap{z-index:3;width:21px;height:28px;top:2px;right:2px}.ant-input-group.ant-input-group-compact>:not(:first-child).ant-input-number.error{margin-left:-2px}.ant-input-group.ant-input-group-compact>:not(:last-child).ant-input-number.error{margin-right:-2px}