'use strict';

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

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 utilities = require('./utilities-d51a0c2d.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 = utilities.useCustomCss(customCss);
    return (jsxRuntime.jsxs(Wrapper, _tslib.__assign({ css: resolvedCss }, { children: [childLabel || (jsxRuntime.jsx(Label, _tslib.__assign({ htmlFor: id }, labelProps, { children: label }), void 0)),
            childDescription || (jsxRuntime.jsx(jsxRuntime.Fragment, { children: description ? (jsxRuntime.jsx(Description, _tslib.__assign({ id: descriptionId }, { children: description }), void 0)) : null }, void 0)), children, jsxRuntime.jsx(ErrorMessage, _tslib.__assign({ "aria-live": "polite", "data-visible": !!errorMessage, id: errorId }, errorMessageProps, { children: errorMessage }), void 0)] }), void 0));
};
var Wrapper = css.styled('div')(templateObject_1 || (templateObject_1 = _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 Description = css.styled('div')(templateObject_2 || (templateObject_2 = _tslib.__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 = css.styled('label')(templateObject_3 || (templateObject_3 = _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 ErrorMessage = css.styled('p')(templateObject_4 || (templateObject_4 = _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;

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