@hhgtech/hhg-components 1.29.80 → 1.29.81

package/build/index-7da7b531.js

@@ -0,0 +1,107 @@
+'use strict';
+
+var React = require('react');
+var theme = require('./theme-e4f7f487.js');
+var styled = require('@emotion/styled');
+var index = require('./index-fe7345fa.js');
+var index$1 = require('./index-def9867a.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const StyledRadioImageGroup = styled__default["default"].div `
+  display: flex;
+  width: 100%;
+
+  &[data-direction='vertical'] {
+    flex-direction: column;
+  }
+
+  &[data-direction='horizontal'] {
+    flex-wrap: wrap;
+  }
+`;
+const StyledRadioImageItem = styled__default["default"].div `
+  display: flex;
+
+  padding: 8px;
+
+  border-radius: ${theme.theme.borderRadius};
+  cursor: pointer;
+
+  & > div {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  &[data-is-mb='false'] {
+    &[data-selected='true'] {
+      border: 1px solid #2d87f3;
+      background: white;
+    }
+    &[data-selected='false'] {
+      border: 1px solid #f2f2f2;
+      box-shadow: 0px 5px 12px rgba(40, 74, 117, 0.08);
+    }
+  }
+
+  &[data-is-mb='true'] {
+    border-radius: 16px;
+    background: white;
+    padding: 16px auto;
+
+    &[data-selected='true'] {
+      border: 1px solid ${theme.theme.mbColors.mint};
+      box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.06);
+    }
+    &[data-selected='false'] {
+      border: none;
+    }
+  }
+
+  &[data-disabled='true'] {
+    cursor: auto;
+  }
+
+  .radio-group-item-heading {
+    margin-top: 8px;
+    //height: 48px;
+    text-align: center;
+  }
+
+  .gender-image {
+    width: 70px;
+    height: 70px;
+    &[data-is-mobile='true'] {
+      width: 40px;
+      height: 40px;
+    }
+  }
+`;
+
+const RadioImageGroup = ({ value, options, className, direction = 'horizontal', onChange, isDisabled, siteType, }) => {
+    const [check, setCheck] = React.useState(value);
+    const handleOnChange = (v) => {
+        if (isDisabled)
+            return;
+        setCheck(v);
+        onChange && onChange(v);
+    };
+    const isMarryBaby = siteType === 'marryBaby';
+    return (React__default["default"].createElement(StyledRadioImageGroup, { className: className, "data-direction": direction }, options.map((option, index$2) => (React__default["default"].createElement(StyledRadioImageItem, { "data-selected": (value || check) === option.value, "data-is-mb": isMarryBaby, "data-disabled": isDisabled, key: index$2, onClick: () => {
+            handleOnChange(option.value);
+        } },
+        React__default["default"].createElement("div", null,
+            option.content,
+            option.label && (React__default["default"].createElement(React__default["default"].Fragment, null, isMarryBaby ? (React__default["default"].createElement(index.MarryBabyText, { type: "subtitle-2", color: (value || check) === option.value
+                    ? theme.theme.mbColors.dark
+                    : theme.theme.mbColors.midGray }, option.label)) : (React__default["default"].createElement(index$1.Text, { type: "bold", color: (value || check) === option.value ? '#2D87F3' : 'black', className: "radio-group-item-heading", size: "label1" }, option.label))))))))));
+};
+
+exports.RadioImageGroup = RadioImageGroup;

package/build/{index-f0a532c7.js → index-838b0f95.js}

@@ -1,13 +1,13 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-4bc45883.js');
+var tslib_es6 = require('./tslib.es6-7e140b89.js');
 var React = require('react');
-var index = require('./index-18ddaa1b.js');
+var index = require('./index-df5cd44b.js');
 var styled = require('@emotion/styled');
-var index$2 = require('./index-858f60e0.js');
-var theme = require('./theme-f410baf6.js');
-var index$1 = require('./index-94fd9ea6.js');
-var index$3 = require('./index-ed587907.js');
+var index$2 = require('./index-1efa7d84.js');
+var theme = require('./theme-e4f7f487.js');
+var index$1 = require('./index-05f106c2.js');
+var index$3 = require('./index-def9867a.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/index-a7de42d1.js

@@ -0,0 +1,202 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-7e140b89.js');
+var React = require('react');
+var core = require('@mantine/core');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const ANIMATION_DURATION = '100ms';
+
+var useStyles = core.createStyles((_theme, _params) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { other } = _theme;
+    const { template } = other;
+    const { size, variant, skipHover, isError, isSuccess, color, children, theme: themeProp, } = _params;
+    const isMb = template === 'mb' || themeProp === 'marryBaby';
+    const finalColor = color || (themeProp && isMb ? 'mb' : _theme.primaryColor);
+    const isHexColor = finalColor.startsWith('#');
+    const hexColor50 = isHexColor
+        ? _theme.fn.lighten(color, 0.9)
+        : ((_b = (_a = _theme.colors) === null || _a === void 0 ? void 0 : _a[finalColor]) === null || _b === void 0 ? void 0 : _b[0]) || '';
+    const hexColor = isHexColor
+        ? finalColor
+        : (_d = (_c = _theme.colors) === null || _c === void 0 ? void 0 : _c[finalColor]) === null || _d === void 0 ? void 0 : _d[_theme.fn.primaryShade()];
+    const hoverHexColor = isHexColor
+        ? _theme.fn.darken(color, 0.05)
+        : (_f = (_e = _theme.colors) === null || _e === void 0 ? void 0 : _e[finalColor]) === null || _f === void 0 ? void 0 : _f[_theme.fn.primaryShade() + 1];
+    return {
+        root: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ transition: `all ${ANIMATION_DURATION} ease-in-out`, '&:focus': {
+                outline: 'none',
+            } }, (!children && {
+            paddingLeft: '10px',
+            paddingRight: '10px',
+            '.mantine-Button-icon': {
+                margin: 0,
+            },
+        })), (() => {
+            switch (size) {
+                case 'xl':
+                    return {
+                        height: 56,
+                        fontWeight: 600,
+                        fontSize: isMb ? '14px' : '16px',
+                        lineHeight: '24px',
+                    };
+                case 'lg':
+                    return {
+                        height: 48,
+                        fontWeight: 600,
+                        fontSize: isMb ? '14px' : '16px',
+                        lineHeight: '24px',
+                    };
+                case 'md':
+                    return {
+                        height: 40,
+                        fontWeight: 600,
+                        fontSize: '14px',
+                        lineHeight: '22px',
+                    };
+                case 'sm':
+                    return {
+                        height: 32,
+                        fontWeight: 600,
+                        fontSize: isMb ? '12px' : '14px',
+                        lineHeight: '22px',
+                        paddingLeft: '16px',
+                        paddingRight: '16px',
+                    };
+                case 'xs':
+                    return {
+                        height: 24,
+                        fontWeight: 600,
+                        fontSize: '12px',
+                        lineHeight: '18px',
+                        paddingLeft: '8px',
+                        paddingRight: '8px',
+                    };
+            }
+        })()), (() => {
+            switch (variant) {
+                case 'primary': {
+                    return Object.assign({ color: _theme.white, backgroundColor: hexColor }, (!skipHover && {
+                        '&:hover': {
+                            backgroundColor: hoverHexColor,
+                        },
+                    }));
+                }
+                case 'secondary':
+                    return Object.assign({ color: hexColor, backgroundColor: 'transparent', border: `1px solid ${hexColor}` }, (!skipHover && {
+                        '&:hover': {
+                            backgroundColor: hexColor50,
+                            border: `1px solid ${hexColor}`,
+                        },
+                    }));
+                case 'white':
+                    return {
+                        color: hexColor,
+                        backgroundColor: 'transparent',
+                        border: `1px solid transparent`,
+                        '&:hover': {
+                            backgroundColor: 'transparent',
+                            borderColor: `transparent`,
+                        },
+                    };
+                case 'tertiary':
+                    return {
+                        color: _theme.colors.gray[8],
+                        backgroundColor: _theme.white,
+                        border: `1px solid ${_theme.colors.neutral[2]}`,
+                        '&:hover': Object.assign({}, (!skipHover
+                            ? {
+                                backgroundColor: _theme.colors.neutral[0],
+                                border: `1px solid ${_theme.colors.neutral[0]}`,
+                            }
+                            : {
+                                backgroundColor: _theme.white,
+                                border: `1px solid ${_theme.colors.neutral[2]}`,
+                            })),
+                    };
+                case 'light': {
+                    return {
+                        color: hexColor,
+                        backgroundColor: hexColor50,
+                        border: `1px solid transparent`,
+                        '&:hover': Object.assign({}, (!skipHover
+                            ? {
+                                backgroundColor: _theme.white,
+                                border: `1px solid ${hexColor50}`,
+                            }
+                            : {
+                                backgroundColor: hexColor50,
+                                border: `1px solid transparent`,
+                            })),
+                    };
+                }
+                case 'ghost':
+                    return Object.assign({ color: hexColor, backgroundColor: 'transparent', border: `1px solid transparent` }, (!skipHover && {
+                        '&:hover': {
+                            backgroundColor: hexColor50,
+                            border: `1px solid transparent`,
+                        },
+                    }));
+            }
+        })()), { '&[data-disabled]': {
+                backgroundColor: _theme.colors.gray[1],
+                color: _theme.colors.gray[4],
+            } }), (isError
+            ? Object.assign({ color: _theme.colors.red[6], backgroundColor: _theme.white, border: `1px solid ${_theme.colors.red[6]}` }, (!skipHover && {
+                '&:hover': {
+                    backgroundColor: _theme.colors.red[0],
+                    border: `1px solid ${_theme.colors.red[6]}`,
+                },
+            })) : {})), (isSuccess
+            ? Object.assign({ color: _theme.colors.green[8], backgroundColor: _theme.colors.green[0] }, (!skipHover && {
+                '&:hover': {
+                    backgroundColor: _theme.colors.green[0],
+                },
+            })) : {})),
+    };
+});
+
+const MAPPED_VARIANT = {
+    primary: 'filled',
+    secondary: 'outline',
+    tertiary: 'default',
+    light: 'light',
+    ghost: 'subtle',
+    error: 'outline',
+    white: 'white',
+    success: 'subtle',
+};
+function filterObject(obj) {
+    const ret = {};
+    Object.keys(obj)
+        .filter((key) => obj[key] !== undefined)
+        .forEach((key) => (ret[key] = obj[key]));
+    return ret;
+}
+const Button = (props) => {
+    var _a, _b;
+    const theme = core.useMantineTheme();
+    const _c = Object.assign(Object.assign({}, (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.Button) === null || _b === void 0 ? void 0 : _b.defaultProps), filterObject(props)), { variant, size, color, skipHover, className, dataEventCategory, dataEventAction, dataEventLabel, children, theme: themeProp } = _c, rest = tslib_es6.__rest(_c, ["variant", "size", "color", "skipHover", "className", "dataEventCategory", "dataEventAction", "dataEventLabel", "children", "theme"]);
+    const isError = variant === 'error';
+    const { classes, cx } = useStyles({
+        variant,
+        size,
+        color,
+        skipHover,
+        isError,
+        isSuccess: variant === 'success',
+        children,
+        theme: themeProp,
+    });
+    return (React__default["default"].createElement(core.Button, Object.assign({ className: cx(className, variant), classNames: {
+            root: classes.root,
+        }, variant: MAPPED_VARIANT[variant], "data-variant": variant, "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }, rest), children));
+};
+
+exports.ANIMATION_DURATION = ANIMATION_DURATION;
+exports.Button = Button;

package/build/{index-3a03bb34.js → index-a86ea1b6.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var locale = require('date-fns/locale');
-var index$1 = require('./index-18ddaa1b.js');
-var isProduction = require('./isProduction-2e55aee3.js');
+var index$1 = require('./index-df5cd44b.js');
+var isProduction = require('./isProduction-aa963bf9.js');
 
 const siteHost = {
     HELLO_HEALTH_GROUP: 'hellohealthgroup.com',

package/build/index-aa818139.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var React = require('react');
+var styled = require('@emotion/styled');
+var index = require('./index-dd1392e3.js');
+var theme = require('./theme-e4f7f487.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const StyledTextArea = styled__default["default"].div `
+  textarea {
+    width: 100%;
+    height: var(--textarea-height, 116px);
+    padding: 1rem;
+    border: 1px solid ${theme.theme.colors.gray200};
+    border-radius: 6px;
+    color: ${theme.theme.colors.gray800};
+    font-size: 14px;
+    resize: none;
+
+    &:focus {
+      box-shadow: 0px 0px 2px 2px #91caff;
+    }
+
+    &::placeholder {
+      color: ${theme.theme.colors.gray500};
+    }
+
+    &:disabled {
+      background-color: ${theme.theme.colors.neutral50};
+      cursor: not-allowed;
+    }
+  }
+`;
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const TextArea = React__default["default"].forwardRef(({ height, placeholder, labelText, labelColor, id, name, onChange, value, className, onKeyPress, disabled = false, }, ref) => {
+    return (React__default["default"].createElement(StyledTextArea, { className: className, style: { ['--textarea-height']: height || '116px' } },
+        labelText && (React__default["default"].createElement(index.Label, { size: "label2", style: { color: labelColor || '#595959' }, htmlFor: id }, labelText)),
+        React__default["default"].createElement("textarea", { name: name, ref: ref, placeholder: placeholder, id: id, onChange: (e) => onChange && onChange(e.target.value), 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onKeyPress: (e) => onKeyPress && onKeyPress(e), value: value, disabled: disabled })));
+});
+
+exports.TextArea = TextArea;

package/build/{index-61ef343d.js → index-b773bc3d.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var index$1 = require('./index-1250dd06.js');
-var index$2 = require('./index-3a03bb34.js');
-var index = require('./index-18ddaa1b.js');
+var index$1 = require('./index-e0bf03ac.js');
+var index$2 = require('./index-a86ea1b6.js');
+var index = require('./index-df5cd44b.js');
 var Cookies = require('js-cookie');
 var uuid = require('uuid');
-var isProduction = require('./isProduction-2e55aee3.js');
+var isProduction = require('./isProduction-aa963bf9.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/index-bef2bc73.js

@@ -0,0 +1,136 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-7e140b89.js');
+var React = require('react');
+var other = require('@hhgtech/icons/other');
+var core = require('@mantine/core');
+var index$1 = require('./index-05f106c2.js');
+require('@mantine/dates');
+require('./index-a86ea1b6.js');
+require('./index-df5cd44b.js');
+var index = require('./index-1efa7d84.js');
+require('./useMantineLocale-a4f0c61d.js');
+var index$2 = require('./index-d34cd464.js');
+require('./index-a7de42d1.js');
+require('./theme-e4f7f487.js');
+var useTranslations = require('./useTranslations-200168a3.js');
+require('@mantine/hooks');
+require('./utils-524bda7c.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var useStyles = core.createStyles((theme, { type }) => {
+    const isMarryBaby = theme.other.template === 'mb';
+    return {
+        root: {},
+        wrapper: Object.assign({ gap: core.rem(8) }, (type === 'radio' && {
+            justifyContent: 'flex-end',
+            gap: core.rem(24),
+        })),
+        groupErr: {
+            fontSize: core.rem(14),
+        },
+        itemRoot: Object.assign({}, (type === 'button'
+            ? {
+                flexGrow: 1,
+                width: '50%',
+                '&[data-checked="true"]': {
+                    '.mantine-Radio-label': {
+                        borderColor: theme.fn.primaryColor(),
+                    },
+                },
+            }
+            : type === 'radio'
+                ? { padding: `${core.rem(10)} 0`, margin: 0 }
+                : {})),
+        itemLabelWrapper: {
+            padding: 0,
+            width: '100%',
+        },
+        itemLabel: Object.assign({ whiteSpace: 'nowrap' }, (type === 'button'
+            ? {
+                position: 'relative',
+                padding: `${core.rem(6)} ${core.rem(16)}`,
+                border: `1px solid ${isMarryBaby ? '#EAEAEC' : theme.colors.gray[2]}`,
+                borderRadius: core.rem(isMarryBaby ? 16 : 4),
+                cursor: 'pointer',
+                '&[data-disabled="true"]': {
+                    background: theme.colors.gray[1],
+                    color: `${theme.colors.gray[4]} !important`,
+                    img: {
+                        opacity: 0.5,
+                    },
+                },
+                img: {
+                    height: core.rem(26),
+                },
+            }
+            : type === 'radio'
+                ? { fontSize: core.rem(14) }
+                : {})),
+        itemInner: Object.assign(Object.assign({}, (type === 'button' && {
+            display: 'none',
+        })), (type === 'radio' && {
+            alignSelf: 'center',
+        })),
+        itemBody: Object.assign({}, (type === 'radio' && {
+            alignItems: 'center',
+        })),
+    };
+});
+
+const GenderOptionControl = (_a) => {
+    var { label, availableValue: availableValueInit, styles, isBaby, genderValue = {
+        male: 'male',
+        female: 'female',
+    }, type = 'button', hideLabel } = _a, radioProps = tslib_es6.__rest(_a, ["label", "availableValue", "styles", "isBaby", "genderValue", "type", "hideLabel"]);
+    const { t } = useTranslations.useTranslations();
+    const { classes, cx, theme } = useStyles({ type }, {
+        name: 'GenderOptionControl',
+        styles,
+    });
+    const isMarryBaby = theme.other.template === 'mb';
+    const [availableValue, setAvailableValue] = React.useState();
+    const ref = React.useRef(null);
+    const genderOptions = React.useMemo(() => [
+        {
+            value: genderValue.male,
+            label: isBaby ? t('gender.boy') : t('gender.male'),
+            icon: isBaby ? (isMarryBaby ? (React__default["default"].createElement(other.BabyBoyMB, null)) : (index.CommonGAssets.getAssetPath('health-tools/boy-icon.svg'))) : (index.CommonGAssets.getAssetPath('health-tools/male-icon.svg')),
+        },
+        {
+            value: genderValue.female,
+            label: isBaby ? t('gender.girl') : t('gender.female'),
+            icon: isBaby ? (isMarryBaby ? (React__default["default"].createElement(other.BabyGirlMB, null)) : (index.CommonGAssets.getAssetPath('health-tools/girl-icon.svg'))) : (index.CommonGAssets.getAssetPath('health-tools/female-icon.svg')),
+        },
+    ], []);
+    React.useEffect(() => {
+        setAvailableValue(availableValueInit);
+    }, [availableValueInit]);
+    return (React__default["default"].createElement(core.Box, { ref: ref, className: classes.root },
+        React__default["default"].createElement(index$1.Radio.Group, Object.assign({ className: "radio-group", label: !hideLabel ? (React__default["default"].createElement(index$2.Text, { as: "label", size: "s4", weight: "semiBold" }, label ||
+                (isBaby
+                    ? t('tools.selectBabyGender')
+                    : t('tools.selectGender')))) : undefined, size: "lg" }, radioProps, { classNames: {
+                error: classes.groupErr,
+            } }, (type === 'radio' && {
+            error: null,
+        })),
+            React__default["default"].createElement(core.Flex, { className: cx(classes.wrapper) }, genderOptions.map((i) => (React__default["default"].createElement(index$1.Radio, Object.assign({ className: "gender-item", size: "sm", classNames: {
+                    root: classes.itemRoot,
+                    labelWrapper: classes.itemLabelWrapper,
+                    label: classes.itemLabel,
+                    inner: classes.itemInner,
+                    body: classes.itemBody,
+                }, key: i.value, value: i.value }, (availableValue &&
+                i.value !== availableValue && {
+                disabled: true,
+            }), { label: React__default["default"].createElement(core.Flex, { gap: core.rem(8), align: 'center', justify: 'center', sx: { zIndex: 0 } },
+                    type === 'button' &&
+                        (typeof i.icon === 'string' ? (React__default["default"].createElement("img", { src: i.icon, className: "gender-image", alt: "female", loading: "lazy" })) : (i.icon)),
+                    React__default["default"].createElement(index$2.Text, { size: "p3" }, i.label)) }))))))));
+};
+
+exports.GenderOptionControl = GenderOptionControl;