import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useTranslation } from 'react-i18next';
import { Typography } from 'antd';
import { ColorPicker } from '../../../../components';
import { SettingsFieldStyled, SettingsLabelCSS, SettingsInputCSS, } from './grid.style';
export const ColorField = ({ value, onChange }) => {
    const { t } = useTranslation();
    return (_jsxs(SettingsFieldStyled, { children: [_jsx(Typography.Text, { css: SettingsLabelCSS, children: t('settings.grid.modal.field.color.label') }), _jsx(ColorPicker, { css: SettingsInputCSS, value: value, onChange: onChange, disabledAlpha: true })] }));
};
