import { createMultiStyleConfigHelpers, cssVar, defineStyle } from '@chakra-ui/styled-system';
import { inputAnatomy } from '@chakra-ui/anatomy';

var _a, _b;
var definePartsStyle = createMultiStyleConfigHelpers(inputAnatomy.keys).definePartsStyle;
var $height = cssVar('input-height');
var $paddingX = cssVar('input-padding-x');
var $paddingY = cssVar('input-padding-y');
var baseStyle = definePartsStyle({
    field: {
        width: 'full',
        height: $height.reference,
        px: $paddingX.reference,
        py: $paddingY.reference,
        minWidth: 0,
        outline: 0,
        position: 'relative',
        appearance: 'none',
        transitionProperty: 'common',
        transitionDuration: 'normal',
    },
});
var size = {
    lg: defineStyle((_a = {
            textStyle: 'body'
        },
        _a[$paddingX.variable] = 'space.md',
        _a[$paddingY.variable] = 'space.xs',
        _a[$height.variable] = 'sizes.lg',
        _a)),
    md: defineStyle((_b = {
            textStyle: 'body'
        },
        _b[$paddingX.variable] = 'space.md',
        _b[$paddingY.variable] = 'space.xs',
        _b[$height.variable] = 'sizes.md',
        _b)),
};
var sizes = {
    lg: definePartsStyle({
        field: size.lg,
        group: size.lg,
    }),
    md: definePartsStyle({
        field: size.md,
        group: size.md,
    }),
};
var variantOutline = definePartsStyle({
    field: {
        border: '1px solid',
        borderColor: 'gray.400',
        borderRadius: 'sm',
        bg: 'inherit',
        color: 'gray.900',
        _placeholder: {
            color: 'gray.400',
        },
        _hover: {
            borderColor: 'gray.900',
        },
        _focus: {
            backgroundColor: 'blue.50',
        },
        _active: {},
        _invalid: {
            borderColor: 'red.500',
        },
        _disabled: {
            cursor: 'not-allowed',
            color: 'gray.300',
            borderColor: 'gray.200',
        },
    },
});
var variants = {
    outline: variantOutline,
};
var Input = {
    parts: inputAnatomy.keys,
    baseStyle: baseStyle,
    sizes: sizes,
    variants: variants,
    defaultProps: {
        size: 'md',
        variant: 'outline',
    },
};

export { Input as default };
//# sourceMappingURL=input.js.map
