import 'react';
import '@emotion/core';
import { a as __assign, b as __makeTemplateObject } from './_tslib-5c49bd3f.js';
import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
import '@emotion/styled';
import '@emotion/react';
import { s as styled } from './css-efbd0d2d.js';
import { u as useCustomCss } from './utilities-357c56e6.js';

var InputWrapper = function (_a) {
    var _b = _a.label, label = _b === void 0 ? '' : _b, _c = _a.description, description = _c === void 0 ? '' : _c, _d = _a.labelProps, labelProps = _d === void 0 ? {} : _d, _e = _a.errorMessageProps, errorMessageProps = _e === void 0 ? {} : _e, _f = _a.errorMessage, errorMessage = _f === void 0 ? '' : _f, descriptionId = _a.descriptionId, errorId = _a.errorId, id = _a.id, childLabel = _a.childLabel, childDescription = _a.childDescription, customCss = _a.customCss, children = _a.children;
    var resolvedCss = useCustomCss(customCss);
    return (jsxs(Wrapper, __assign({ css: resolvedCss }, { children: [childLabel || (jsx(Label, __assign({ htmlFor: id }, labelProps, { children: label }), void 0)),
            childDescription || (jsx(Fragment, { children: description ? (jsx(Description, __assign({ id: descriptionId }, { children: description }), void 0)) : null }, void 0)), children, jsx(ErrorMessage, __assign({ "aria-live": "polite", "data-visible": !!errorMessage, id: errorId }, errorMessageProps, { children: errorMessage }), void 0)] }), void 0));
};
var Wrapper = styled('div')(templateObject_1 || (templateObject_1 = __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 Description = styled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 0.85em;\n  margin: 0px;\n  margin-bottom: 3px;\n  font-style: italic;\n"], ["\n  font-size: 0.85em;\n  margin: 0px;\n  margin-bottom: 3px;\n  font-style: italic;\n"])));
var Label = styled('label')(templateObject_3 || (templateObject_3 = __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 ErrorMessage = styled('p')(templateObject_4 || (templateObject_4 = __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;

export { InputWrapper };
//# sourceMappingURL=InputWrapper.js.map
