@hhgtech/hhg-components 1.29.79 → 1.29.81

package/build/constants-dd16fb4d.js

@@ -0,0 +1,425 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-7e140b89.js');
+var React = require('react');
+var core = require('@mantine/core');
+var index = require('./index-d34cd464.js');
+var index$1 = require('./index-a7de42d1.js');
+var useTranslations = require('./useTranslations-200168a3.js');
+var flattenChildren = require('react-keyed-flatten-children');
+var theme = require('./theme-e4f7f487.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(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),
+        },
+    };
+});
+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),
+            '.mantine-Input-input::placeholder, .mantine-Input-input[data-invalid]::placeholder': {
+                color: '#8C8C8C',
+            },
+        },
+        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 } = useTranslations.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),
+            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$1) => {
+    const isMarryBaby = theme$1.other.template === 'mb';
+    return {
+        root: {
+            label: Object.assign({}, (isMarryBaby && {
+                color: theme.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;
+
+const INPUT_RANGE = {
+    height: {
+        min: 1,
+        max: 300,
+    },
+    weight: {
+        min: 1,
+        max: 200,
+    },
+    pregnantWeek: {
+        min: 1,
+        max: 40,
+    },
+};
+
+exports.HealthToolFormWrapper = HealthToolFormWrapper;
+exports.INPUT_RANGE = INPUT_RANGE;

package/build/constants.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-517f6538.js');
-var isProduction = require('./isProduction-7f7f09ad.js');
+var index = require('./index-a86ea1b6.js');
+var isProduction = require('./isProduction-aa963bf9.js');
 require('date-fns/locale');
-require('./index-0b957c10.js');
+require('./index-df5cd44b.js');
 
 
 

package/build/{core-279a7b4f.js → core-9e44ee99.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-dd1fc8f2.js');
-var isProduction = require('./isProduction-7f7f09ad.js');
+var tslib_es6 = require('./tslib.es6-7e140b89.js');
+var isProduction = require('./isProduction-aa963bf9.js');
 
 const ServerCache = {};
 const getCachedItem = (key) => {