colibri-ui 0.8.71 → 0.8.72

package/Menu/components/MenuItem/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var tslib = require('tslib');
 var React = require('react');
@@ -45,4 +43,4 @@ var MenuItem = function MenuItem(_a) {
   }, props), children);
 };
 
-exports.default = MenuItem;
+exports.MenuItem = MenuItem;

package/Menu/index.d.ts

@@ -1,4 +1,3 @@
 import React from "react";
 import type { Props } from "./index.props";
-declare const Menu: ({ selected, variant, className, onClick, children, ref, }: Props) => React.JSX.Element;
-export default Menu;
+export declare const Menu: ({ selected, variant, className, onClick, children, ref, }: Props) => React.JSX.Element;

package/Menu/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var clsx = require('clsx');
 var styles = require('./Menu.module.css');
@@ -43,4 +41,4 @@ var Menu = function Menu(_ref) {
   }, renderChild);
 };
 
-exports.default = Menu;
+exports.Menu = Menu;

package/Modal/components/Close/index.d.ts

@@ -1,7 +1,3 @@
 import type { FC } from "react";
-type CloseButtonProps = {
-    onClick?: () => void;
-    "aria-label"?: string;
-};
-declare const Close: FC<CloseButtonProps>;
-export default Close;
+import type { CloseButtonProps } from "./index.props";
+export declare const Close: FC<CloseButtonProps>;

package/Modal/components/Close/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 require('../../../Icons/index.js');
 var styles = require('./Close.module.css');
@@ -20,10 +18,10 @@ var Close = function Close(_ref) {
     onClick: onClick,
     "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Close",
     className: styles__default.default["close-button"]
-  }, /*#__PURE__*/React__default.default.createElement(Close$1.default, {
+  }, /*#__PURE__*/React__default.default.createElement(Close$1.Close, {
     width: 18,
     height: 18
   }));
 };
 
-exports.default = Close;
+exports.Close = Close;

package/Modal/components/Close/index.props.d.ts

@@ -0,0 +1,4 @@
+export type CloseButtonProps = {
+    onClick?: () => void;
+    "aria-label"?: string;
+};

package/Modal/components/Content/index.d.ts

@@ -1,3 +1,3 @@
-import type { FC, PropsWithChildren } from "react";
-declare const Content: FC<PropsWithChildren>;
-export default Content;
+import type { FC } from "react";
+import type { ContentProps } from "./index.props";
+export declare const Content: FC<ContentProps>;

package/Modal/components/Content/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var styles = require('./Content.module.css');
 
@@ -17,4 +15,4 @@ var Content = function Content(_ref) {
   }, children);
 };
 
-exports.default = Content;
+exports.Content = Content;

package/Modal/components/Content/index.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropsWithChildren } from "react";
+export type ContentProps = PropsWithChildren;

package/Modal/components/Title/index.d.ts

@@ -1,3 +1,3 @@
-import type { FC, PropsWithChildren } from "react";
-declare const Title: FC<PropsWithChildren>;
-export default Title;
+import type { FC } from "react";
+import type { TitleProps } from "./index.props";
+export declare const Title: FC<TitleProps>;

package/Modal/components/Title/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var index = require('../../../Typography/index.js');
 var styles = require('./Title.module.css');
@@ -13,7 +11,7 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var Title = function Title(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/React__default.default.createElement(index.default, {
+  return /*#__PURE__*/React__default.default.createElement(index.Typography, {
     tag: "h3",
     size: "h3",
     className: styles__default.default.title
@@ -22,4 +20,4 @@ var Title = function Title(_ref) {
   }, children));
 };
 
-exports.default = Title;
+exports.Title = Title;

package/Modal/components/Title/index.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropsWithChildren } from "react";
+export type TitleProps = PropsWithChildren;

package/Modal/index.d.ts

@@ -1,4 +1,3 @@
 import type { FC, PropsWithChildren } from "react";
 import type { ModalProps } from "./index.props";
-declare const Modal: FC<PropsWithChildren<ModalProps>>;
-export default Modal;
+export declare const Modal: FC<PropsWithChildren<ModalProps>>;

package/Modal/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var clsx = require('clsx');
@@ -27,11 +25,11 @@ var Modal = function Modal(_ref) {
     onClose = _ref.onClose,
     title = _ref.title;
   var modalRef = React.useRef(null);
-  var isDesktop = index.default(function (bp) {
+  var isDesktop = index.useMediaSizes(function (bp) {
     return bp.up("md");
   });
-  index$1.default();
-  index$2.default(modalRef);
+  index$1.useScrollLock();
+  index$2.useTrapFocus(modalRef);
   var handleClose = React.useCallback(function () {
     onClose === null || onClose === void 0 ? void 0 : onClose();
   }, [onClose]);
@@ -51,7 +49,7 @@ var Modal = function Modal(_ref) {
       return document.removeEventListener("keydown", handleEscape);
     };
   }, [handleClose]);
-  return /*#__PURE__*/React__default.default.createElement(index$3.default, null, /*#__PURE__*/React__default.default.createElement("div", {
+  return /*#__PURE__*/React__default.default.createElement(index$3.Portal, null, /*#__PURE__*/React__default.default.createElement("div", {
     className: styles__default.default.root,
     role: "dialog",
     "aria-modal": "true",
@@ -65,15 +63,15 @@ var Modal = function Modal(_ref) {
     ref: modalRef
   }, title ? (/*#__PURE__*/React__default.default.createElement("div", {
     className: styles__default.default["title-wrapper"]
-  }, /*#__PURE__*/React__default.default.createElement(index$4.default, null, title), /*#__PURE__*/React__default.default.createElement(index$5.default, {
+  }, /*#__PURE__*/React__default.default.createElement(index$4.Title, null, title), /*#__PURE__*/React__default.default.createElement(index$5.Close, {
     onClick: handleClose,
     "aria-label": "Close modal"
   }))) : (/*#__PURE__*/React__default.default.createElement("div", {
     className: styles__default.default["close-wrapper"]
-  }, /*#__PURE__*/React__default.default.createElement(index$5.default, {
+  }, /*#__PURE__*/React__default.default.createElement(index$5.Close, {
     onClick: handleClose,
     "aria-label": "Close modal"
-  }))), /*#__PURE__*/React__default.default.createElement(index$6.default, null, children))));
+  }))), /*#__PURE__*/React__default.default.createElement(index$6.Content, null, children))));
 };
 
-exports.default = Modal;
+exports.Modal = Modal;

package/MultiSelect/components/MenuOverlay/index.d.ts

@@ -1,19 +1,3 @@
 import React from "react";
-import type { ReactNode } from "react";
-import type { GroupProps } from "../../index.props";
-export interface IOption {
-    selected: boolean;
-    value: string;
-    label: ReactNode;
-    disabled?: boolean;
-}
-type MenuOverlayGroup = Omit<GroupProps, "options" | "value"> & {
-    options: IOption[];
-    value: string;
-};
-type MenuOverlayProps = {
-    groups: MenuOverlayGroup[];
-    onChange: (key: string) => void;
-};
-declare const _default: React.MemoExoticComponent<({ groups, onChange }: MenuOverlayProps) => React.JSX.Element>;
-export default _default;
+import type { MenuOverlayProps } from "./index.props";
+export declare const MenuOverlay: React.MemoExoticComponent<({ groups, onChange }: MenuOverlayProps) => React.JSX.Element>;

package/MultiSelect/components/MenuOverlay/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var index$2 = require('../../../Menu/index.js');
@@ -18,7 +16,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var OFFSET_ITEMS_COUNT = 2;
-var MenuOverlay = function MenuOverlay(_ref) {
+var MenuOverlayBase = function MenuOverlayBase(_ref) {
   var groups = _ref.groups,
     onChange = _ref.onChange;
   var refs = React.useRef({});
@@ -79,11 +77,11 @@ var MenuOverlay = function MenuOverlay(_ref) {
       key: "item-".concat(index$5)
     }, /*#__PURE__*/React__default.default.createElement("div", {
       className: styles__default.default.title
-    }, /*#__PURE__*/React__default.default.createElement(index.default, {
+    }, /*#__PURE__*/React__default.default.createElement(index.Typography, {
       size: "s",
       variant: "secondary"
-    }, group.title)), /*#__PURE__*/React__default.default.createElement(index$1.default, null), /*#__PURE__*/React__default.default.createElement(index$2.default, null, group.options.map(function (option, optionIndex) {
-      return /*#__PURE__*/React__default.default.createElement(index$3.default, {
+    }, group.title)), /*#__PURE__*/React__default.default.createElement(index$1.Separator, null), /*#__PURE__*/React__default.default.createElement(index$2.Menu, null, group.options.map(function (option, optionIndex) {
+      return /*#__PURE__*/React__default.default.createElement(index$3.SelectItem, {
         ref: function ref(_ref3) {
           var key = "group-".concat(group.value, "-option-").concat(option.value);
           refs.current[key] = _ref3;
@@ -103,6 +101,6 @@ var MenuOverlay = function MenuOverlay(_ref) {
     })));
   }));
 };
-var MenuOverlay$1 = /*#__PURE__*/React.memo(MenuOverlay);
+var MenuOverlay = /*#__PURE__*/React.memo(MenuOverlayBase);
 
-exports.default = MenuOverlay$1;
+exports.MenuOverlay = MenuOverlay;

package/MultiSelect/components/MenuOverlay/index.props.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import type { GroupProps } from "../../index.props";
+export interface IOption {
+    selected: boolean;
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export type MenuOverlayGroup = Omit<GroupProps, "options" | "value"> & {
+    options: IOption[];
+    value: string;
+};
+export type MenuOverlayProps = {
+    groups: MenuOverlayGroup[];
+    onChange: (key: string) => void;
+};

package/MultiSelect/components/MenuOverlayItem/index.d.ts

@@ -1,13 +1,3 @@
 import React from "react";
-type SelectItemProps = {
-    option: {
-        value: string;
-        label: React.ReactNode;
-        selected: boolean;
-        disabled?: boolean;
-    };
-    onClick?: () => void;
-    ref?: React.Ref<HTMLLIElement>;
-};
-declare const SelectItem: ({ option, onClick, ref }: SelectItemProps) => React.JSX.Element;
-export default SelectItem;
+import type { SelectItemProps } from "./index.props";
+export declare const SelectItem: ({ option, onClick, ref }: SelectItemProps) => React.JSX.Element;

package/MultiSelect/components/MenuOverlayItem/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var index = require('../../../Menu/components/MenuItem/index.js');
 var Check = require('../../../Icons/Check.js');
@@ -14,15 +12,15 @@ var SelectItem = function SelectItem(_ref) {
   var option = _ref.option,
     onClick = _ref.onClick,
     ref = _ref.ref;
-  return /*#__PURE__*/React__default.default.createElement(index.default, {
+  return /*#__PURE__*/React__default.default.createElement(index.MenuItem, {
     ref: ref,
     onClick: onClick,
     isSelected: option.selected,
     disabled: option.disabled
-  }, option.label, option.selected && /*#__PURE__*/React__default.default.createElement(Check.default, {
+  }, option.label, option.selected && /*#__PURE__*/React__default.default.createElement(Check.Check, {
     width: 16,
     height: 16
   }));
 };
 
-exports.default = SelectItem;
+exports.SelectItem = SelectItem;

package/MultiSelect/components/MenuOverlayItem/index.props.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode, Ref } from "react";
+export type SelectItemProps = {
+    option: {
+        value: string;
+        label: ReactNode;
+        selected: boolean;
+        disabled?: boolean;
+    };
+    onClick?: () => void;
+    ref?: Ref<HTMLLIElement>;
+};

package/MultiSelect/index.d.ts

@@ -1,4 +1,3 @@
 import React from "react";
 import type { MultiSelectProps } from "./index.props";
-declare const MultiSelect: React.FC<MultiSelectProps>;
-export default MultiSelect;
+export declare const MultiSelect: React.FC<MultiSelectProps>;

package/MultiSelect/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
@@ -107,13 +105,13 @@ var MultiSelect = function MultiSelect(_ref2) {
       });
     });
   }, [preparedGroups]);
-  return /*#__PURE__*/React__default.default.createElement(index$1.default, {
+  return /*#__PURE__*/React__default.default.createElement(index$1.FormField, {
     className: clsx__default.default(styles__default.default["form-field"], _defineProperty__default.default({}, styles__default.default["full-width"], Boolean(fullWidth)), className),
     required: required,
     label: label,
     hint: hint,
     hasError: hasError
-  }, /*#__PURE__*/React__default.default.createElement(index$2.default, {
+  }, /*#__PURE__*/React__default.default.createElement(index$2.Dropdown, {
     placement: "bottom-start",
     preventOverflow: true,
     onVisibleChange: setIsOpen,
@@ -121,7 +119,7 @@ var MultiSelect = function MultiSelect(_ref2) {
     zIndex: zIndex,
     fontSize: fontSize,
     disabled: disabled,
-    overlay: /*#__PURE__*/React__default.default.createElement(index$3.default, {
+    overlay: /*#__PURE__*/React__default.default.createElement(index$3.MenuOverlay, {
       groups: preparedGroups,
       onChange: handleChange
     }),
@@ -132,7 +130,7 @@ var MultiSelect = function MultiSelect(_ref2) {
     style: {
       width: fullWidth ? "100%" : "fit-content"
     }
-  }, /*#__PURE__*/React__default.default.createElement(index$4.default, {
+  }, /*#__PURE__*/React__default.default.createElement(index$4.InputRoot, {
     hasError: hasError,
     size: size,
     active: isOpen && Boolean(!disabled),
@@ -140,7 +138,7 @@ var MultiSelect = function MultiSelect(_ref2) {
       width: fullWidth ? "100%" : ""
     }),
     className: clsx__default.default(styles__default.default.root, _defineProperty__default.default({}, styles__default.default["root_auto"], preparedLabel.length)),
-    endIcon: /*#__PURE__*/React__default.default.createElement(Chevron.default, {
+    endIcon: /*#__PURE__*/React__default.default.createElement(Chevron.Chevron, {
       className: clsx__default.default(styles__default.default.icon, _defineProperty__default.default({}, styles__default.default["icon_isOpen"], isOpen && Boolean(!disabled)))
     }),
     disabled: Boolean(disabled)
@@ -151,10 +149,10 @@ var MultiSelect = function MultiSelect(_ref2) {
   preparedLabel.map(function (_ref6) {
     var label = _ref6.label,
       key = _ref6.key;
-    return /*#__PURE__*/React__default.default.createElement(index$5.default, {
+    return /*#__PURE__*/React__default.default.createElement(index$5.Chip, {
       key: key,
       size: "s",
-      iconEnd: /*#__PURE__*/React__default.default.createElement(CrossFill.default, null),
+      iconEnd: /*#__PURE__*/React__default.default.createElement(CrossFill.CrossFill, null),
       "data-ignore-click": true,
       onClickIcon: function onClickIcon() {
         return handleChange(key);
@@ -170,4 +168,4 @@ var MultiSelect = function MultiSelect(_ref2) {
   })))));
 };
 
-exports.default = MultiSelect;
+exports.MultiSelect = MultiSelect;

package/NumberInput/NumberInput.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { NumberInputProps } from "./index.props";
+export declare const NumberInput: React.ForwardRefExoticComponent<Omit<NumberInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/NumberInput/NumberInput.js

@@ -0,0 +1,188 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var tslib = require('tslib');
+var React = require('react');
+var clsx = require('clsx');
+var Cross = require('../Icons/Cross.js');
+var index = require('../Input/index.js');
+var styles = require('./NumberInput.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var groupInteger = function groupInteger(integer, separator, style) {
+  if (!separator || style === "none") return integer;
+  var group = style === "wan" ? 4 : 3;
+  if (style !== "lakh") {
+    return integer.replace(new RegExp("\\B(?=(\\d{".concat(group, "})+(?!\\d))"), "g"), separator);
+  }
+  if (integer.length <= 3) return integer;
+  var tail = integer.slice(-3);
+  var head = integer.slice(0, -3).replace(/\B(?=(\d{2})+(?!\d))/g, separator);
+  return "".concat(head).concat(separator).concat(tail);
+};
+var normalize = function normalize(input, decimalSeparator, decimalScale, allowNegative, allowLeadingZeros) {
+  var negative = allowNegative && input.replace(/^\s+/, "").startsWith("-");
+  var escapedSeparator = decimalSeparator.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  var cleaned = input.replace(new RegExp("[^0-9".concat(escapedSeparator, "]"), "g"), "");
+  var separatorIndex = cleaned.indexOf(decimalSeparator);
+  var rawInteger = (separatorIndex < 0 ? cleaned : cleaned.slice(0, separatorIndex)) || (separatorIndex >= 0 ? "0" : "");
+  var fraction = separatorIndex < 0 ? "" : cleaned.slice(separatorIndex + decimalSeparator.length).replace(/\D/g, "").slice(0, decimalScale);
+  var integer = allowLeadingZeros ? rawInteger : rawInteger.replace(/^0+(?=\d)/, "");
+  var decimalEntered = separatorIndex >= 0 && decimalScale > 0;
+  return "".concat(negative ? "-" : "").concat(integer).concat(decimalEntered ? ".".concat(fraction) : "");
+};
+var format = function format(raw, thousandSeparator, decimalSeparator, groupStyle, decimalScale, fixedDecimalScale, prefix, suffix) {
+  if (!raw) return "";
+  var negative = raw.startsWith("-");
+  var unsigned = negative ? raw.slice(1) : raw;
+  var _unsigned$split = unsigned.split("."),
+    _unsigned$split2 = _slicedToArray__default.default(_unsigned$split, 2),
+    _unsigned$split2$ = _unsigned$split2[0],
+    integer = _unsigned$split2$ === void 0 ? "" : _unsigned$split2$,
+    _unsigned$split2$2 = _unsigned$split2[1],
+    fraction = _unsigned$split2$2 === void 0 ? "" : _unsigned$split2$2;
+  var shouldShowDecimal = decimalScale > 0 && (raw.includes(".") || fixedDecimalScale);
+  var decimals = fixedDecimalScale ? fraction.padEnd(decimalScale, "0").slice(0, decimalScale) : fraction.slice(0, decimalScale);
+  return "".concat(negative ? "-" : "").concat(prefix).concat(groupInteger(integer || "0", thousandSeparator, groupStyle)).concat(shouldShowDecimal ? decimalSeparator : "").concat(decimals).concat(suffix);
+};
+var NumberInput = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
+  var value = props.value,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? "" : _props$defaultValue,
+    onValueChange = props.onValueChange,
+    _props$thousandSepara = props.thousandSeparator,
+    thousandSeparator = _props$thousandSepara === void 0 ? " " : _props$thousandSepara,
+    _props$decimalSeparat = props.decimalSeparator,
+    decimalSeparator = _props$decimalSeparat === void 0 ? "." : _props$decimalSeparat,
+    _props$thousandsGroup = props.thousandsGroupStyle,
+    thousandsGroupStyle = _props$thousandsGroup === void 0 ? "thousand" : _props$thousandsGroup,
+    _props$decimalScale = props.decimalScale,
+    decimalScale = _props$decimalScale === void 0 ? 3 : _props$decimalScale,
+    _props$fixedDecimalSc = props.fixedDecimalScale,
+    fixedDecimalScale = _props$fixedDecimalSc === void 0 ? false : _props$fixedDecimalSc,
+    _props$allowNegative = props.allowNegative,
+    allowNegative = _props$allowNegative === void 0 ? false : _props$allowNegative,
+    _props$allowLeadingZe = props.allowLeadingZeros,
+    allowLeadingZeros = _props$allowLeadingZe === void 0 ? false : _props$allowLeadingZe,
+    _props$prefix = props.prefix,
+    prefix = _props$prefix === void 0 ? "" : _props$prefix,
+    _props$suffix = props.suffix,
+    suffix = _props$suffix === void 0 ? "" : _props$suffix,
+    min = props.min,
+    max = props.max,
+    isAllowed = props.isAllowed,
+    _props$clearable = props.clearable,
+    clearable = _props$clearable === void 0 ? false : _props$clearable,
+    _props$clearLabel = props.clearLabel,
+    clearLabel = _props$clearLabel === void 0 ? "Clear" : _props$clearLabel,
+    className = props.className,
+    disabled = props.disabled,
+    readOnly = props.readOnly,
+    id = props.id,
+    inputRef = props.inputRef,
+    endIcon = props.endIcon,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    inputProps = tslib.__rest(props, ["value", "defaultValue", "onValueChange", "thousandSeparator", "decimalSeparator", "thousandsGroupStyle", "decimalScale", "fixedDecimalScale", "allowNegative", "allowLeadingZeros", "prefix", "suffix", "min", "max", "isAllowed", "clearable", "clearLabel", "className", "disabled", "readOnly", "id", "inputRef", "endIcon", "onFocus", "onBlur"]);
+  var generatedId = React.useId();
+  var inputId = id !== null && id !== void 0 ? id : generatedId;
+  var controlled = value !== undefined;
+  var options = {
+    decimalSeparator: decimalSeparator,
+    decimalScale: Math.max(0, decimalScale),
+    allowNegative: allowNegative,
+    allowLeadingZeros: allowLeadingZeros
+  };
+  var normalizeValue = function normalizeValue(next) {
+    return normalize(next.replace(".", decimalSeparator), options.decimalSeparator, options.decimalScale, options.allowNegative, options.allowLeadingZeros);
+  };
+  var _useState = React.useState(function () {
+      return normalizeValue(defaultValue);
+    }),
+    _useState2 = _slicedToArray__default.default(_useState, 2),
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
+  var rawValue = controlled ? normalizeValue(value) : internalValue;
+  var localInputRef = React.useRef(null);
+  var setRef = function setRef(node) {
+    localInputRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);else if (forwardedRef) forwardedRef.current = node;
+    if (typeof inputRef === "function") inputRef(node);else if (inputRef) inputRef.current = node;
+  };
+  var formattedValue = React.useMemo(function () {
+    return format(rawValue, thousandSeparator, decimalSeparator, thousandsGroupStyle, options.decimalScale, fixedDecimalScale, prefix, suffix);
+  }, [rawValue, thousandSeparator, decimalSeparator, thousandsGroupStyle, options.decimalScale, fixedDecimalScale, prefix, suffix]);
+  var emit = function emit(nextRaw) {
+    var nextFormatted = format(nextRaw, thousandSeparator, decimalSeparator, thousandsGroupStyle, options.decimalScale, fixedDecimalScale, prefix, suffix);
+    var numeric = nextRaw === "" || nextRaw === "-" || nextRaw.endsWith(".") ? Number(nextRaw.slice(0, -1)) : Number(nextRaw);
+    var values = {
+      value: nextRaw,
+      formattedValue: nextFormatted,
+      floatValue: nextRaw !== "" && nextRaw !== "-" && Number.isFinite(numeric) ? numeric : undefined
+    };
+    if (min !== undefined && values.floatValue !== undefined && values.floatValue < min || max !== undefined && values.floatValue !== undefined && values.floatValue > max || (isAllowed === null || isAllowed === void 0 ? void 0 : isAllowed(values)) === false) {
+      return;
+    }
+    if (!controlled) setInternalValue(nextRaw);
+    onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(values);
+  };
+  var handleChange = function handleChange(text, caret) {
+    var _a;
+    var beforeCaret = text.slice(0, caret !== null && caret !== void 0 ? caret : text.length);
+    var digitsBeforeCaret = ((_a = beforeCaret.match(/\d/g)) !== null && _a !== void 0 ? _a : []).length;
+    emit(normalize(text, decimalSeparator, options.decimalScale, allowNegative, allowLeadingZeros));
+    requestAnimationFrame(function () {
+      var node = localInputRef.current;
+      if (!node || document.activeElement !== node) return;
+      var digits = 0;
+      var position = prefix.length + (node.value.startsWith("-") ? 1 : 0);
+      for (; position < node.value.length && digits < digitsBeforeCaret; position += 1) {
+        if (/\d/.test(node.value[position])) digits += 1;
+      }
+      node.setSelectionRange(position, position);
+    });
+  };
+  var clearButton = clearable && rawValue && !disabled && !readOnly && (/*#__PURE__*/React__default.default.createElement("button", {
+    type: "button",
+    className: styles__default.default.clear,
+    "aria-label": clearLabel,
+    onMouseDown: function onMouseDown(event) {
+      return event.preventDefault();
+    },
+    onClick: function onClick() {
+      return emit("");
+    }
+  }, /*#__PURE__*/React__default.default.createElement(Cross.Cross, {
+    width: 20,
+    height: 20,
+    "aria-hidden": "true"
+  })));
+  var composedEndIcon = endIcon || clearButton ? (/*#__PURE__*/React__default.default.createElement("span", {
+    className: styles__default.default.end_content
+  }, endIcon, clearButton)) : undefined;
+  return /*#__PURE__*/React__default.default.createElement(index.Input, Object.assign({}, inputProps, {
+    id: inputId,
+    className: clsx__default.default(styles__default.default.field, className),
+    type: "text",
+    inputMode: options.decimalScale > 0 ? "decimal" : "numeric",
+    value: formattedValue,
+    disabled: disabled,
+    readOnly: readOnly,
+    inputRef: setRef,
+    endIcon: composedEndIcon,
+    onChange: function onChange(event) {
+      return handleChange(event.target.value, event.target.selectionStart);
+    },
+    onFocus: onFocus,
+    onBlur: onBlur
+  }));
+});
+NumberInput.displayName = "NumberInput";
+
+exports.NumberInput = NumberInput;

package/NumberInput/NumberInput.module.css

@@ -0,0 +1,31 @@
+.field {
+  width: 20rem;
+}
+
+.end_content {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-1);
+}
+
+.clear {
+  align-items: center;
+  background: transparent;
+  border: var(--space-0);
+  border-radius: var(--radius-xs);
+  color: var(--color-icon-secondary);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--font-family-ui);
+  font-size: var(--font-size-text-md);
+  height: var(--component-input-icon-size);
+  justify-content: center;
+  line-height: var(--line-height-text-sm);
+  padding: var(--space-0);
+  transition: color 0.15s ease, background-color 0.15s ease;
+  width: var(--component-input-icon-size);
+}
+
+.clear:hover {
+  color: var(--color-icon-primary);
+}

package/NumberInput/index.d.ts

@@ -0,0 +1,2 @@
+export { NumberInput } from "./NumberInput";
+export type { NumberInputGroupStyle, NumberInputProps, NumberInputSize, NumberInputValues, } from "./index.props";

package/NumberInput/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var NumberInput = require('./NumberInput.js');
+
+
+
+exports.NumberInput = NumberInput.NumberInput;