'use strict';

var tslib_es6 = require('./tslib.es6-2c2ed574.js');
var React = require('react');
var core = require('@mantine/core');
var index = require('./index-a31ed3e1.js');
var index$1 = require('./index-3d563586.js');
var index$2 = require('./index-3643ff1b.js');
var flattenChildren = require('react-keyed-flatten-children');
var miscTheme = require('./miscTheme.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var flattenChildren__default = /*#__PURE__*/_interopDefault(flattenChildren);

var useStyles$8 = core.createStyles(() => {
    return {
        root: {
            justifyContent: 'flex-start',
        },
        group: {
            display: 'flex',
            alignItems: 'stretch',
            gap: core.rem(8),
        },
        item: {
            flex: '1 1 0px',
        },
        icon: {
            flexShrink: 0,
        },
    };
});

const ChipGroup = (_a) => {
    var { data = [], label, isMobile, layout = 'horizonal', classNames, styles } = _a, props = tslib_es6.__rest(_a, ["data", "label", "isMobile", "layout", "classNames", "styles"]);
    const { classes, theme } = useStyles$8(undefined, {
        name: 'ChipGroup',
        classNames,
        styles,
    });
    const isMarryBaby = theme.other.template === 'mb';
    const iconSize = isMobile
        ? 48
        : isMarryBaby
            ? 32
            : layout === 'vertical'
                ? 32
                : 18;
    return (React__default["default"].createElement(core.Box, null,
        React__default["default"].createElement(core.Input.Wrapper, { label: label && (React__default["default"].createElement(index.Text, { size: "p3", weight: "semiBold" }, label)) },
            React__default["default"].createElement(core.Chip.Group, Object.assign({}, props),
                React__default["default"].createElement(core.Box, { className: classes.group }, data.map((i, idx) => (React__default["default"].createElement(core.Chip, { className: classes.item, key: idx, value: String(i.value), styles: {
                        iconWrapper: {
                            display: 'none',
                        },
                        label: {
                            width: '100%',
                            borderRadius: core.rem(isMarryBaby ? 12 : 8),
                            padding: 0,
                            border: `1px solid ${isMarryBaby ? '#EAEAEC' : theme.colors.neutral[2]}`,
                            height: '100%',
                            '&[data-checked]': {
                                padding: 0,
                                backgroundColor: isMarryBaby
                                    ? '#FFE9F1'
                                    : theme.colors.blue[0],
                                border: `1px solid ${isMarryBaby ? '#F5B4CB' : theme.colors.blue[1]}`,
                            },
                            [theme.fn.smallerThan('sm')]: {
                                alignItems: 'flex-start',
                            },
                        },
                    } },
                    React__default["default"].createElement(core.Box, { sx: Object.assign(Object.assign(Object.assign({ width: '100%', display: 'flex', gap: core.rem(isMarryBaby ? 2 : 8), padding: '8px 16px 8px 12px', justifyContent: 'center', alignItems: 'center' }, (isMarryBaby && {
                            flexDirection: 'column',
                        })), (layout === 'vertical' && {
                            flexDirection: 'column',
                            padding: '16px 8px 8px',
                        })), { [theme.fn.smallerThan('sm')]: {
                                flexDirection: 'column',
                                padding: '16px 8px 8px',
                            } }) },
                        React__default["default"].isValidElement(i.icon)
                            ? React__default["default"].cloneElement(i.icon, {
                                size: iconSize,
                                isMarryBaby,
                                className: classes.icon,
                            })
                            : null,
                        React__default["default"].createElement(index.Text, { size: 'p4', styles: {
                                root: Object.assign(Object.assign({}, (isMarryBaby && {
                                    textAlign: 'center',
                                })), { whiteSpace: 'normal', [theme.fn.smallerThan('sm')]: {
                                        fontSize: core.rem(12),
                                        lineHeight: core.rem(18),
                                        textAlign: 'center',
                                    } }),
                            } }, i.label))))))))));
};

const FormLayoutContext = React.createContext({});

const useStyles$7 = core.createStyles(() => {
    return {
        root: {
            display: 'flex',
            flexDirection: 'column',
            gap: core.rem(8),
            paddingLeft: 16,
            paddingRight: 16,
            '&:last-child': {
                paddingBottom: 16,
            },
        },
    };
});
const FormRow = (_a) => {
    var { styles, classNames, className, children } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames", "className", "children"]);
    const { classes, cx } = useStyles$7(undefined, {
        name: 'HealthToolFormWrapper__FormRow',
        styles,
        classNames,
    });
    return (React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.root) }, props), children));
};

var useStyles$6 = core.createStyles((theme, { formLayout }) => {
    return {
        root: {
            display: 'flex',
            flexDirection: 'column',
            gap: core.rem(formLayout === 'inline' ? 8 : 16),
            borderRadius: 'inherit',
            '.mantine-Input-input::placeholder, .mantine-Input-input[data-invalid]::placeholder': {
                color: '#8C8C8C',
            },
            [theme.fn.smallerThan('sm')]: Object.assign({ 'input, .mantine-DatePickerInput-input': {
                    fontSize: core.rem(14),
                } }, (formLayout === 'default' && {
                gap: 8,
            })),
        },
        control: {
            width: core.rem(180),
            flexShrink: 1,
            '&.error': {
                'button, input': {
                    borderColor: theme.colors.red[7],
                },
            },
        },
    };
});

const useStyles$5 = core.createStyles((theme, { formLayout }) => {
    const isMarryBaby = theme.other.template === 'mb';
    return {
        root: Object.assign(Object.assign({ minWidth: core.rem(180) }, (formLayout === 'inline' && {
            alignSelf: 'flex-end',
            marginTop: core.rem(16),
        })), (formLayout === 'default' && Object.assign({}, (isMarryBaby && {
            alignSelf: 'center',
        })))),
    };
});
const SubmitBtn = (_a) => {
    var { styles, classNames, className } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames", "className"]);
    const { formLayout } = React.useContext(FormLayoutContext);
    const { classes, cx } = useStyles$5({ formLayout }, {
        name: 'HealthToolFormWrapper__SubmitBtn',
        styles,
        classNames,
    });
    return (React__default["default"].createElement(index$1.Button, Object.assign({ className: cx('submit-btn', className, classes.root) }, props, { variant: "primary", size: "md" })));
};

const Switching = (_a) => {
    var { label } = _a, props = tslib_es6.__rest(_a, ["label"]);
    const { t } = index$2.useTranslations();
    const theme = core.useMantineTheme();
    const isMarryBaby = theme.other.template === 'mb';
    return (React__default["default"].createElement(core.Flex, { gap: core.rem(4), sx: () => ({
            justifyContent: 'space-between',
            alignItems: 'center',
        }) },
        label && (React__default["default"].createElement(index.Text, { size: isMarryBaby ? 'p4' : 's4', color: "gray.6" }, label)),
        React__default["default"].createElement(core.Switch, Object.assign({ labelPosition: "left", onLabel: t('switchBtn.yes'), offLabel: t('switchBtn.no') }, props, { styles: (theme) => ({
                trackLabel: {
                    fontSize: core.rem(12),
                },
                track: {
                    cursor: 'pointer',
                },
                body: {
                    [theme.fn.largerThan('sm')]: {
                        flexDirection: 'column',
                        alignItems: 'flex-start',
                    },
                    [theme.fn.smallerThan('sm')]: {
                        justifyContent: 'space-between',
                    },
                },
                labelWrapper: {
                    [theme.fn.smallerThan('sm')]: {
                        display: 'flex',
                        justifyContent: 'center',
                    },
                },
            }) }))));
};

const useStyles$4 = core.createStyles((theme) => {
    return {
        root: {
            color: theme.colors.gray[6],
            whiteSpace: 'nowrap',
            paddingRight: core.rem(16),
        },
    };
});
const Unit = (_a) => {
    var { styles, classNames, className } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames", "className"]);
    const { classes, cx } = useStyles$4(undefined, {
        name: 'HealthToolFormWrapper__UnitText',
        styles,
        classNames,
    });
    return React__default["default"].createElement(index.Text, Object.assign({ size: "p4", className: cx(className, classes.root) }, props));
};

var useStyles$3 = core.createStyles(() => {
    return {
        root: {
            display: 'flex',
            gap: core.rem(8),
            border: '1px solid #EAEAEC',
            borderRadius: core.rem(16),
            padding: '10px 16px 12px 16px',
            flex: '1 1 0px',
            '.mantine-Input-input': {
                border: 0,
                paddingLeft: 0,
                height: '22px',
                borderRadius: 0,
                '&:focus': {
                    outline: 0,
                    boxShadow: 'none',
                },
            },
        },
        info: {
            display: 'flex',
            flexDirection: 'column',
            gap: 0,
            flex: '1 1 0px',
        },
        label: {
            color: '#7C7C8F',
            fontWeight: 'normal',
        },
        content: {},
        rightSection: {
            display: 'flex',
            alignItems: 'center',
            textTransform: 'lowercase',
            color: '#3E3F58',
        },
    };
});

const BorderBoxControl = (_a) => {
    var { label, rightSection, children, styles, className, classNames } = _a, props = tslib_es6.__rest(_a, ["label", "rightSection", "children", "styles", "className", "classNames"]);
    const { classes, cx } = useStyles$3(undefined, {
        name: 'HealthToolFormWrapper__BorderBoxControl',
        styles,
        classNames,
    });
    return (React__default["default"].createElement(core.Box, Object.assign({ className: cx(classes.root, className) }, props),
        React__default["default"].createElement(core.Box, { className: classes.info },
            label && (React__default["default"].createElement(index.Text, { size: "n1", as: "label", className: classes.label }, label)),
            React__default["default"].createElement(core.Box, { className: classes.content }, React__default["default"].isValidElement(children)
                ? React__default["default"].cloneElement(children, Object.assign(Object.assign({}, children.props), { size: 'sm', error: null }))
                : null)),
        rightSection && (React__default["default"].createElement(core.Box, { className: classes.rightSection }, typeof rightSection === 'string' ? (React__default["default"].createElement(index.Text, { size: "p4" }, rightSection)) : React__default["default"].isValidElement(rightSection) ? (React__default["default"].cloneElement(rightSection, {
            size: 24,
        })) : null))));
};

var useStyles$2 = core.createStyles((theme, { width, direction }) => {
    const isMarryBaby = theme.other.template === 'mb';
    return {
        root: {
            display: 'flex',
            flexDirection: 'column',
            gap: core.rem(8),
        },
        row: {
            display: 'flex',
            flexDirection: direction,
            alignItems: 'stretch',
            justifyContent: 'space-between',
            gap: core.rem(16),
            minHeight: core.rem(40),
        },
        labelWrapper: Object.assign({ flex: '1 1 0px', display: 'flex', alignItems: 'center' }, (direction === 'row' && {
            borderBottom: `1px solid ${theme.colors.neutral[1]}`,
        })),
        label: {
            fontSize: core.rem(14),
            lineHeight: core.rem(22),
            color: theme.colors.gray[6],
        },
        content: {
            display: 'flex',
            alignItems: 'center',
            gap: core.rem(8),
            input: {
                backgroundColor: '#fff',
            },
        },
        control: {
            width: typeof width === 'number' ? core.rem(width) : width,
            flexShrink: 1,
            input: Object.assign({}, (isMarryBaby && {
                borderRadius: core.rem(12),
            })),
            '&.error': {
                'button, input': {
                    borderColor: theme.colors.red[7],
                },
            },
        },
        error: {
            color: 'red',
            textAlign: 'right',
        },
    };
});

const BorderInlineControl = ({ label, children, styles, classNames, direction = 'row', width = 180, errorMess, }) => {
    const { classes } = useStyles$2({ width, direction }, {
        name: 'HealthToolFormWrapper__BorderInlineControl',
        styles,
        classNames,
    });
    return (React__default["default"].createElement(core.Box, { className: classes.root },
        React__default["default"].createElement(core.Box, { className: classes.row },
            React__default["default"].createElement(core.Box, { className: classes.labelWrapper }, label && (React__default["default"].createElement("label", { className: classes.label, htmlFor: "gender" }, label))),
            React__default["default"].createElement(core.Box, { className: classes.content }, flattenChildren__default["default"](children).map((i, idx) => (React__default["default"].createElement(core.Box, { key: idx, className: classes.control }, i))))),
        errorMess && (React__default["default"].createElement(index.Text, { size: "p4", className: classes.error }, errorMess))));
};

const useStyles$1 = core.createStyles(() => {
    return {
        root: {
            color: 'red',
            textAlign: 'right',
            width: 'auto',
        },
    };
});
const Error = (_a) => {
    var { styles, classNames, className } = _a, props = tslib_es6.__rest(_a, ["styles", "classNames", "className"]);
    const { classes, cx } = useStyles$1(undefined, {
        name: 'HealthToolFormWrapper__UnitText',
        styles,
        classNames,
    });
    return React__default["default"].createElement(index.Text, Object.assign({ size: "p4", className: cx(className, classes.root) }, props));
};

var useStyles = core.createStyles((theme) => {
    const isMarryBaby = theme.other.template === 'mb';
    return {
        root: {
            label: Object.assign({}, (isMarryBaby && {
                color: miscTheme.theme.mbColors.midGray,
                fontSize: core.rem(12),
                fontWeight: 'normal',
            })),
        },
    };
});

const Control = (_a) => {
    var { className, styles, classNames } = _a, rest = tslib_es6.__rest(_a, ["className", "styles", "classNames"]);
    const { classes, cx } = useStyles(undefined, {
        name: 'HealthToolFormWrapper__Control',
        styles,
        classNames,
    });
    return React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.root) }, rest));
};

const _HealthToolFormWrapper = (_a) => {
    var { children, formLayout: formLayoutProp, styles, classNames, className, component = 'form' } = _a, rest = tslib_es6.__rest(_a, ["children", "formLayout", "styles", "classNames", "className", "component"]);
    const formLayout = formLayoutProp || 'default';
    const { classes, cx } = useStyles$6({ formLayout }, {
        name: 'HealthToolFormWrapper',
        styles,
        classNames,
    });
    return (React__default["default"].createElement(FormLayoutContext.Provider, { value: {
            formLayout,
        } },
        React__default["default"].createElement(core.Box, Object.assign({ component: component, className: cx(className, classes.root) }, rest), children)));
};
const HealthToolFormWrapper = _HealthToolFormWrapper;
HealthToolFormWrapper.Control = Control;
HealthToolFormWrapper.BorderInlineControl = BorderInlineControl;
HealthToolFormWrapper.BorderBoxControl = BorderBoxControl;
HealthToolFormWrapper.Error = Error;
HealthToolFormWrapper.FormRow = FormRow;
HealthToolFormWrapper.Submit = SubmitBtn;
HealthToolFormWrapper.Unit = Unit;
HealthToolFormWrapper.Switching = Switching;
HealthToolFormWrapper.ChipGroup = ChipGroup;

exports.HealthToolFormWrapper = HealthToolFormWrapper;
