'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
require('@emotion/core');
var _tslib = require('./_tslib-9c546438.js');
var jsxRuntime = require('@emotion/react/jsx-runtime');
require('@emotion/styled');
require('@emotion/react');
var css = require('./css-203af057.js');
var autoId_esm = require('./auto-id.esm-f9c7d71b.js');
var utilities = require('./utilities-d51a0c2d.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var RadioGroup = function (_a) {
    var _b = _a.label, label = _b === void 0 ? '' : _b, _c = _a.description, description = _c === void 0 ? '' : _c, _d = _a.wrapperProps, wrapperProps = _d === void 0 ? {} : _d, _e = _a.className, className = _e === void 0 ? '' : _e, _f = _a.valid, valid = _f === void 0 ? null : _f, _g = _a.errorMessage, errorMessage = _g === void 0 ? '' : _g, _h = _a.customCss, customCss = _h === void 0 ? '' : _h, onChange = _a.onChange, _j = _a.options, options = _j === void 0 ? [] : _j, props = _tslib.__rest(_a, ["label", "description", "wrapperProps", "className", "valid", "errorMessage", "customCss", "onChange", "options"]);
    var _k = React__default['default'].useState(props.value), value = _k[0], setValue = _k[1];
    var resolvedCss = utilities.useCustomCss(customCss);
    var id = autoId_esm.useId(props.id);
    var descriptionId = "desc-" + id;
    var errorId = "err-" + id;
    var prevValue = utilities.usePrevious(props.value);
    var handleChange = function (e) {
        setValue(e.target.value);
        if (onChange) {
            onChange(e.target.value, e);
        }
    };
    React__default['default'].useEffect(function () {
        if (props.value !== prevValue && props.value !== value) {
            setValue(props.value);
        }
    }, [value, props.value, prevValue]);
    return (jsxRuntime.jsxs(Wrapper, _tslib.__assign({ css: resolvedCss, className: className, id: id }, wrapperProps, { children: [jsxRuntime.jsxs(FieldSet, _tslib.__assign({ "aria-describedby": descriptionId }, { children: [jsxRuntime.jsx("legend", { children: jsxRuntime.jsx(VisualLabel, { children: label }, void 0) }, void 0),
                    jsxRuntime.jsx(Description, _tslib.__assign({ id: descriptionId }, { children: description }), void 0),
                    options.map(function (option, index) { return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Input, { type: "radio", id: id + "-" + index, name: option.group, value: option.value, "aria-describedby": errorId, "aria-invalid": valid === false, "data-valid": valid, onChange: handleChange, checked: value === option.value }, void 0),
                            jsxRuntime.jsx(RadioLabel, _tslib.__assign({ htmlFor: id + "-" + index }, { children: option.label }), void 0)] }, id + "-" + index)); })] }), void 0),
            jsxRuntime.jsx(ErrorMessage, _tslib.__assign({ "aria-live": "polite", "data-visible": !!errorMessage, id: errorId }, { children: errorMessage }), void 0)] }), void 0));
};
var RadioLabel = css.styled('label')(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  margin-bottom: 2px;\n  font-size: 1em;\n  color: #191919;\n  cursor: pointer;\n  position: relative;\n  &:before {\n    position: relative;\n    top: 4px;\n    margin-right: 5px;\n    box-sizing: border-box;\n    content: '';\n    display: inline-block;\n    cursor: pointer;\n    height: 20px;\n    width: 20px;\n    border: 3px solid;\n    border-radius: 50%;\n    border-color: ", ";\n    background-color: #fff;\n    padding: 2px;\n  }\n  &:after {\n    box-sizing: border-box;\n    content: '';\n    display: inline-block;\n    position: absolute;\n    left: 5px;\n    top: 4px;\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: ", ";\n    transition: all cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;\n    transform: scale(0);\n  }\n"], ["\n  margin-bottom: 2px;\n  font-size: 1em;\n  color: #191919;\n  cursor: pointer;\n  position: relative;\n  &:before {\n    position: relative;\n    top: 4px;\n    margin-right: 5px;\n    box-sizing: border-box;\n    content: '';\n    display: inline-block;\n    cursor: pointer;\n    height: 20px;\n    width: 20px;\n    border: 3px solid;\n    border-radius: 50%;\n    border-color: ", ";\n    background-color: #fff;\n    padding: 2px;\n  }\n  &:after {\n    box-sizing: border-box;\n    content: '';\n    display: inline-block;\n    position: absolute;\n    left: 5px;\n    top: 4px;\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: ", ";\n    transition: all cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;\n    transform: scale(0);\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.neutral;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.primary;
});
var Input = css.styled('input')(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  opacity: 0;\n  width: 20px;\n  height: 20px;\n  position: absolute;\n  &:checked ~ label {\n    border-color: ", ";\n  }\n  &[data-valid='true'] ~ label:before {\n    border-color: ", ";\n  }\n  &[data-valid='false'] ~ label:before {\n    border-color: ", ";\n  }\n  &:focus ~ label:before,\n  &:active ~ label:before {\n    border-color: ", ";\n    outline: none;\n  }\n  &:checked ~ label:after {\n    transform: scale(1);\n  }\n"], ["\n  opacity: 0;\n  width: 20px;\n  height: 20px;\n  position: absolute;\n  &:checked ~ label {\n    border-color: ", ";\n  }\n  &[data-valid='true'] ~ label:before {\n    border-color: ", ";\n  }\n  &[data-valid='false'] ~ label:before {\n    border-color: ", ";\n  }\n  &:focus ~ label:before,\n  &:active ~ label:before {\n    border-color: ", ";\n    outline: none;\n  }\n  &:checked ~ label:after {\n    transform: scale(1);\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.neutral;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.success;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.danger;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.inputFocus;
});
var FieldSet = css.styled('fieldset')(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  border: none;\n  margin-left: 0px;\n  padding-left: 0px;\n  padding-bottom: 1px;\n"], ["\n  border: none;\n  margin-left: 0px;\n  padding-left: 0px;\n  padding-bottom: 1px;\n"])));
var Description = css.styled('div')(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  font-size: 0.85em;\n  font-style: italic;\n"], ["\n  font-size: 0.85em;\n  font-style: italic;\n"])));
var VisualLabel = css.styled('label')(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  margin-bottom: 2px;\n  font-weight: 600;\n  font-size: 1em;\n  color: #191919;\n"], ["\n  margin-bottom: 2px;\n  font-weight: 600;\n  font-size: 1em;\n  color: #191919;\n"])));
var Wrapper = css.styled('div')(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  font-size: 0.9em;\n"], ["\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  font-size: 0.9em;\n"])));
var ErrorMessage = css.styled('p')(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  color: ", ";\n  font-style: italic;\n  font-size: 0.85em;\n  &[data-visible='true'] {\n    margin-top: 3px;\n  }\n  &[data-visible='false'] {\n    margin: 0;\n  }\n"], ["\n  color: ", ";\n  font-style: italic;\n  font-size: 0.85em;\n  &[data-visible='true'] {\n    margin-top: 3px;\n  }\n  &[data-visible='false'] {\n    margin: 0;\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.darken(theme.colors.danger, 5);
});
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

exports.RadioGroup = RadioGroup;
//# sourceMappingURL=RadioGroup.js.map
