import * as __WEBPACK_EXTERNAL_MODULE__chakra_ui_icons__ from "@chakra-ui/icons";
import * as __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__ from "@chakra-ui/react";
const NumberInput = ({ placeholder, name, step, showIconButtons = true, ...props })=>{
    const { getInputProps, getIncrementButtonProps, getDecrementButtonProps } = (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.useNumberInput)({
        step,
        ...props
    });
    const color = (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.useColorModeValue)('gray.300', 'whiteAlpha.500');
    const increment = getIncrementButtonProps();
    const decrement = getDecrementButtonProps();
    const input = getInputProps();
    return /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.NumberInput, {
        ...props,
        name: name,
        step: step
    }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.HStack, {
        maxW: "320px"
    }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Input, {
        ...input,
        "data-testid": `${name}_field`,
        placeholder: placeholder,
        type: step ? 'decimal' : 'numeric'
    }), showIconButtons && /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.ButtonGroup, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.IconButton, {
        ...increment,
        "aria-label": "number-input-add-icon",
        "data-testid": "number-input-add-icon",
        icon: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_icons__.AddIcon, {
            color: color
        }),
        variant: "inputOutline",
        size: "xs",
        p: 0,
        color: color
    }), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.IconButton, {
        ...decrement,
        "aria-label": "number-input-minus-icon",
        "data-testid": "number-input-minus-icon",
        icon: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_icons__.MinusIcon, {
            color: color
        }),
        variant: "inputOutline",
        size: "xs",
        p: 0,
        color: color
    }))));
};
/* ESM default export */ const NumberInput_rslib_entry_ = NumberInput;
export { NumberInput_rslib_entry_ as default };
