import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react';
import { checkboxAnatomy } from '@chakra-ui/anatomy';
import { fontWeights } from '../shared/fontWeights.js';

var _a = createMultiStyleConfigHelpers(checkboxAnatomy.keys), definePartsStyle = _a.definePartsStyle, defineMultiStyleConfig = _a.defineMultiStyleConfig;
var baseStyleControl = defineStyle({
    width: 'xs',
    height: 'xs',
    border: '1px',
    borderRadius: 'sm',
    borderColor: 'gray.400',
    _hover: {
        borderColor: 'gray.900',
        outline: '2px solid',
        outlineColor: 'blue.100',
    },
    _focusVisible: {
        outline: '2px solid',
        outlineColor: 'blue.300',
        borderColor: 'gray.900',
    },
    _checked: {
        borderColor: 'gray.900',
        backgroundColor: 'gray.900',
        color: 'white',
        _disabled: {
            backgroundColor: 'gray.400',
            color: 'white',
        },
    },
    _disabled: {
        borderColor: 'gray.400',
        color: 'gray.400',
        outline: 'none',
    },
    _invalid: {
        borderColor: 'red.500',
        _hover: {
            outline: 'none',
        },
    },
    _indeterminate: {
        borderColor: 'gray.900',
        backgroundColor: 'gray.900',
        color: 'white',
    },
});
var baseStyleContainer = defineStyle({
    _disabled: {
        cursor: 'not-allowed',
    },
});
var baseStyleIcon = defineStyle({
    padding: 'xs',
});
var baseStyleLabel = defineStyle({
    width: 'full',
    textStyle: 'body',
    fontWeight: {
        bold: fontWeights.bold,
        regular: fontWeights.regular,
    },
    color: 'gray.900',
    _disabled: {
        color: 'gray.500',
    },
});
var alignCenter = {
    container: {
        alignItems: 'center',
    },
};
var alignTop = {
    container: {
        alignItems: 'flex-start',
    },
    control: {
        marginTop: 'xs',
    },
};
var alignTopForSmallSize = {
    container: {
        alignItems: 'flex-start',
    },
    control: {
        marginTop: 'xxs',
    },
};
var baseStyle = definePartsStyle({
    control: baseStyleControl,
    container: baseStyleContainer,
    icon: baseStyleIcon,
    label: baseStyleLabel,
});
var variants = {
    alignTop: alignTop,
    alignCenter: alignCenter,
    alignTopForSmallSize: alignTopForSmallSize,
};
var Checkbox = defineMultiStyleConfig({
    baseStyle: baseStyle,
    variants: variants,
    defaultProps: {
        variant: 'alignCenter',
    },
});

export { Checkbox as default };
//# sourceMappingURL=checkbox.js.map
