@hhgtech/hhg-components 1.29.80 → 1.29.82

package/build/esm/constants-fa475b0f.js

@@ -0,0 +1,417 @@
+import { _ as __rest } from './tslib.es6-06ba3978.js';
+import React__default, { createContext, useContext } from 'react';
+import { createStyles, rem, Box, Input, Chip, useMantineTheme, Flex, Switch } from '@mantine/core';
+import { T as Text } from './index-5723381f.js';
+import { B as Button } from './index-1d3c6ce7.js';
+import { u as useTranslations } from './useTranslations-b970f667.js';
+import flattenChildren from 'react-keyed-flatten-children';
+import { t as theme } from './theme-7dadf4a1.js';
+
+var useStyles$8 = createStyles(() => {
+    return {
+        root: {
+            justifyContent: 'flex-start',
+        },
+        group: {
+            display: 'flex',
+            alignItems: 'stretch',
+            gap: rem(8),
+        },
+        item: {
+            flex: '1 1 0px',
+        },
+        icon: {
+            flexShrink: 0,
+        },
+    };
+});
+
+const ChipGroup = (_a) => {
+    var { data = [], label, isMobile, layout = 'horizonal', classNames, styles } = _a, props = __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.createElement(Box, null,
+        React__default.createElement(Input.Wrapper, { label: label },
+            React__default.createElement(Chip.Group, Object.assign({}, props),
+                React__default.createElement(Box, { className: classes.group }, data.map((i, idx) => (React__default.createElement(Chip, { className: classes.item, key: idx, value: String(i.value), styles: {
+                        iconWrapper: {
+                            display: 'none',
+                        },
+                        label: {
+                            width: '100%',
+                            borderRadius: 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.createElement(Box, { sx: Object.assign(Object.assign(Object.assign({ width: '100%', display: 'flex', gap: 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.isValidElement(i.icon)
+                            ? React__default.cloneElement(i.icon, {
+                                size: iconSize,
+                                isMarryBaby,
+                                className: classes.icon,
+                            })
+                            : null,
+                        React__default.createElement(Text, { size: 'p4', styles: {
+                                root: Object.assign(Object.assign({}, (isMarryBaby && {
+                                    textAlign: 'center',
+                                })), { whiteSpace: 'normal', [theme.fn.smallerThan('sm')]: {
+                                        fontSize: rem(12),
+                                        lineHeight: rem(18),
+                                        textAlign: 'center',
+                                    } }),
+                            } }, i.label))))))))));
+};
+
+const FormLayoutContext = createContext({});
+
+const useStyles$7 = createStyles(() => {
+    return {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: rem(8),
+        },
+    };
+});
+const FormRow = (_a) => {
+    var { styles, classNames, className, children } = _a, props = __rest(_a, ["styles", "classNames", "className", "children"]);
+    const { classes, cx } = useStyles$7(undefined, {
+        name: 'HealthToolFormWrapper__FormRow',
+        styles,
+        classNames,
+    });
+    return (React__default.createElement(Box, Object.assign({ className: cx(className, classes.root) }, props), children));
+};
+
+var useStyles$6 = createStyles((theme, { formLayout }) => {
+    return {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: rem(formLayout === 'inline' ? 8 : 16),
+            '.mantine-Input-input::placeholder, .mantine-Input-input[data-invalid]::placeholder': {
+                color: '#8C8C8C',
+            },
+        },
+        control: {
+            width: rem(180),
+            flexShrink: 1,
+            '&.error': {
+                'button, input': {
+                    borderColor: theme.colors.red[7],
+                },
+            },
+        },
+    };
+});
+
+const useStyles$5 = createStyles((theme, { formLayout }) => {
+    const isMarryBaby = theme.other.template === 'mb';
+    return {
+        root: Object.assign(Object.assign({ minWidth: rem(180) }, (formLayout === 'inline' && {
+            alignSelf: 'flex-end',
+            marginTop: rem(16),
+        })), (formLayout === 'default' && Object.assign({}, (isMarryBaby && {
+            alignSelf: 'center',
+        })))),
+    };
+});
+const SubmitBtn = (_a) => {
+    var { styles, classNames, className } = _a, props = __rest(_a, ["styles", "classNames", "className"]);
+    const { formLayout } = useContext(FormLayoutContext);
+    const { classes, cx } = useStyles$5({ formLayout }, {
+        name: 'HealthToolFormWrapper__SubmitBtn',
+        styles,
+        classNames,
+    });
+    return (React__default.createElement(Button, Object.assign({ className: cx('submit-btn', className, classes.root) }, props, { variant: "primary", size: "md" })));
+};
+
+const Switching = (_a) => {
+    var { label } = _a, props = __rest(_a, ["label"]);
+    const { t } = useTranslations();
+    const theme = useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    return (React__default.createElement(Flex, { gap: rem(4), sx: () => ({
+            justifyContent: 'space-between',
+            alignItems: 'center',
+        }) },
+        label && (React__default.createElement(Text, { size: isMarryBaby ? 'p4' : 's4', color: "gray.6" }, label)),
+        React__default.createElement(Switch, Object.assign({ labelPosition: "left", onLabel: t('switchBtn.yes'), offLabel: t('switchBtn.no') }, props, { styles: (theme) => ({
+                trackLabel: {
+                    fontSize: 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 = createStyles((theme) => {
+    return {
+        root: {
+            color: theme.colors.gray[6],
+            whiteSpace: 'nowrap',
+            paddingRight: rem(16),
+        },
+    };
+});
+const Unit = (_a) => {
+    var { styles, classNames, className } = _a, props = __rest(_a, ["styles", "classNames", "className"]);
+    const { classes, cx } = useStyles$4(undefined, {
+        name: 'HealthToolFormWrapper__UnitText',
+        styles,
+        classNames,
+    });
+    return React__default.createElement(Text, Object.assign({ size: "p4", className: cx(className, classes.root) }, props));
+};
+
+var useStyles$3 = createStyles(() => {
+    return {
+        root: {
+            display: 'flex',
+            gap: rem(8),
+            border: '1px solid #EAEAEC',
+            borderRadius: 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 = __rest(_a, ["label", "rightSection", "children", "styles", "className", "classNames"]);
+    const { classes, cx } = useStyles$3(undefined, {
+        name: 'HealthToolFormWrapper__BorderBoxControl',
+        styles,
+        classNames,
+    });
+    return (React__default.createElement(Box, Object.assign({ className: cx(classes.root, className) }, props),
+        React__default.createElement(Box, { className: classes.info },
+            label && (React__default.createElement(Text, { size: "n1", as: "label", className: classes.label }, label)),
+            React__default.createElement(Box, { className: classes.content }, React__default.isValidElement(children)
+                ? React__default.cloneElement(children, Object.assign(Object.assign({}, children.props), { size: 'sm', error: null }))
+                : null)),
+        rightSection && (React__default.createElement(Box, { className: classes.rightSection }, typeof rightSection === 'string' ? (React__default.createElement(Text, { size: "p4" }, rightSection)) : React__default.isValidElement(rightSection) ? (React__default.cloneElement(rightSection, {
+            size: 24,
+        })) : null))));
+};
+
+var useStyles$2 = createStyles((theme, { width, direction }) => {
+    const isMarryBaby = theme.other.template === 'mb';
+    return {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: rem(8),
+        },
+        row: {
+            display: 'flex',
+            flexDirection: direction,
+            alignItems: 'stretch',
+            justifyContent: 'space-between',
+            gap: rem(16),
+            minHeight: rem(40),
+        },
+        labelWrapper: Object.assign({ flex: '1 1 0px', display: 'flex', alignItems: 'center' }, (direction === 'row' && {
+            borderBottom: `1px solid ${theme.colors.neutral[1]}`,
+        })),
+        label: {
+            fontSize: rem(14),
+            color: theme.colors.gray[6],
+        },
+        content: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: rem(8),
+            input: {
+                backgroundColor: '#fff',
+            },
+        },
+        control: {
+            width: typeof width === 'number' ? rem(width) : width,
+            flexShrink: 1,
+            input: Object.assign({}, (isMarryBaby && {
+                borderRadius: 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.createElement(Box, { className: classes.root },
+        React__default.createElement(Box, { className: classes.row },
+            React__default.createElement(Box, { className: classes.labelWrapper }, label && (React__default.createElement("label", { className: classes.label, htmlFor: "gender" }, label))),
+            React__default.createElement(Box, { className: classes.content }, flattenChildren(children).map((i, idx) => (React__default.createElement(Box, { key: idx, className: classes.control }, i))))),
+        errorMess && (React__default.createElement(Text, { size: "p4", className: classes.error }, errorMess))));
+};
+
+const useStyles$1 = createStyles(() => {
+    return {
+        root: {
+            color: 'red',
+            textAlign: 'right',
+            width: 'auto',
+        },
+    };
+});
+const Error = (_a) => {
+    var { styles, classNames, className } = _a, props = __rest(_a, ["styles", "classNames", "className"]);
+    const { classes, cx } = useStyles$1(undefined, {
+        name: 'HealthToolFormWrapper__UnitText',
+        styles,
+        classNames,
+    });
+    return React__default.createElement(Text, Object.assign({ size: "p4", className: cx(className, classes.root) }, props));
+};
+
+var useStyles = createStyles((theme$1) => {
+    const isMarryBaby = theme$1.other.template === 'mb';
+    return {
+        root: {
+            label: Object.assign({}, (isMarryBaby && {
+                color: theme.mbColors.midGray,
+                fontSize: rem(12),
+                fontWeight: 'normal',
+            })),
+        },
+    };
+});
+
+const Control = (_a) => {
+    var { className, styles, classNames } = _a, rest = __rest(_a, ["className", "styles", "classNames"]);
+    const { classes, cx } = useStyles(undefined, {
+        name: 'HealthToolFormWrapper__Control',
+        styles,
+        classNames,
+    });
+    return React__default.createElement(Box, Object.assign({ className: cx(className, classes.root) }, rest));
+};
+
+const _HealthToolFormWrapper = (_a) => {
+    var { children, formLayout: formLayoutProp, styles, classNames, className, component = 'form' } = _a, rest = __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.createElement(FormLayoutContext.Provider, { value: {
+            formLayout,
+        } },
+        React__default.createElement(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,
+    },
+};
+
+export { HealthToolFormWrapper as H, INPUT_RANGE as I };

package/build/esm/constants.js

@@ -1,4 +1,4 @@
-export { A as API_DATE_FORMAT, B as BEARER_TOKEN_COOKIE, b as CARE_BOOKING_LOCALES, C as CARE_LOCALES, c as CDN_ADDRESS, h as DATE_FNS_DATE_FORMAT, D as DATE_FNS_LOCALE, E as ECOM_LOCALES, F as FAVICONS, G as GA_TOKEN_COOKIE, I as ISO_FORMAT, L as LOCALE_SPECS, M as MAP_DOMAIN_BY_LOCALE, Q as QUERY_HEALTH_TOOL, R as RISK_SCREENER_NAME, a as RISK_SCREENER_SLUG, f as SSO_URL, S as STATIC_PAGES, T as TOGETHER_LOCALES, g as UP_BASEPATH, U as USER_GEOLOCATION_COORDINATES_COOKIE, e as basePath, d as domainLocales, j as siteHost, s as siteOptions } from './index-c807ef87.js';
-export { i as isProduction } from './isProduction-2838b9ae.js';
+export { A as API_DATE_FORMAT, B as BEARER_TOKEN_COOKIE, c as CARE_BOOKING_LOCALES, b as CARE_LOCALES, C as CDN_ADDRESS, h as DATE_FNS_DATE_FORMAT, D as DATE_FNS_LOCALE, E as ECOM_LOCALES, F as FAVICONS, G as GA_TOKEN_COOKIE, I as ISO_FORMAT, L as LOCALE_SPECS, M as MAP_DOMAIN_BY_LOCALE, Q as QUERY_HEALTH_TOOL, R as RISK_SCREENER_NAME, a as RISK_SCREENER_SLUG, f as SSO_URL, S as STATIC_PAGES, T as TOGETHER_LOCALES, g as UP_BASEPATH, U as USER_GEOLOCATION_COORDINATES_COOKIE, e as basePath, d as domainLocales, j as siteHost, s as siteOptions } from './index-6210f454.js';
+export { i as isProduction } from './isProduction-1937d355.js';
 import 'date-fns/locale';
-import './index-eeedf0f0.js';
+import './index-189d7601.js';

package/build/esm/{core-5a22b83e.js → core-80bfe8b7.js}

@@ -1,5 +1,5 @@
-import { a as __awaiter } from './tslib.es6-2673b49d.js';
-import { i as isProduction } from './isProduction-2838b9ae.js';
+import { a as __awaiter } from './tslib.es6-06ba3978.js';
+import { i as isProduction } from './isProduction-1937d355.js';
 
 const ServerCache = {};
 const getCachedItem = (key) => {

package/build/esm/{dataTransform-f5db5afb.js → dataTransform-55f67eed.js}

@@ -1,6 +1,6 @@
 import React__default, { createContext, useState, useEffect, useMemo } from 'react';
 import throttle from 'lodash/throttle';
-import { B as Breakpoints } from './utils-511a24f4.js';
+import { B as Breakpoints } from './utils-d7bbdb52.js';
 
 const ScreenSizeContext = createContext({
     isInit: true,

package/build/esm/{index-9b54376f.js → dataTransform-623716c3.js}

@@ -1,9 +1,8 @@
-import React__default, { useContext, useState } from 'react';
+import React__default from 'react';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-511a24f4.js';
-import { t as theme } from './theme-0af1cc3d.js';
-import { _ as __rest } from './tslib.es6-2673b49d.js';
-import { T as TogetherComponentGlobalContext } from './utils-dee27bfd.js';
+import { M as MediaQueries } from './utils-d7bbdb52.js';
+import { t as theme } from './theme-7dadf4a1.js';
+import { _ as __rest } from './tslib.es6-06ba3978.js';
 
 const StyledPopup = styled.div `
   position: fixed;
@@ -787,51 +786,4 @@ var dataTransform = /*#__PURE__*/Object.freeze({
   formatBabyGrowthContent: formatBabyGrowthContent
 });
 
-const StyledUserAvatar = styled.div `
-  width: ${(props) => props.size || 40}px;
-  height: ${(props) => props.size || 40}px;
-  flex-shrink: 0;
-  cursor: pointer;
-
-  img {
-    border-radius: 50%;
-  }
-
-  .avatar {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  .avatar-default {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: ${theme.colors.secondaryBase};
-    border-radius: 50%;
-    color: white;
-    font-size: 1em;
-    font-weight: bold;
-    line-height: 1;
-  }
-
-  &[data-is-marrybaby='true'] {
-    .avatar-default {
-      background-color: ${theme.mbColors.pink};
-    }
-  }
-`;
-
-const UserAvatar = (_a) => {
-    var { className, isMarryBaby: isMarryBabyProp, style, avatar, username, size } = _a, rest = __rest(_a, ["className", "isMarryBaby", "style", "avatar", "username", "size"]);
-    const { data: { env: { isMarryBaby: isMarryBabyContext }, }, } = useContext(TogetherComponentGlobalContext);
-    const isMarryBaby = typeof isMarryBabyProp === 'boolean' ? isMarryBabyProp : isMarryBabyContext;
-    const [tempAvatar, setTempAvatar] = useState(false);
-    return (React__default.createElement(StyledUserAvatar, Object.assign({ "data-is-marrybaby": isMarryBaby, className: className, style: style, size: size }, rest), avatar && !tempAvatar ? (React__default.createElement("img", { loading: "lazy", src: avatar, className: `avatar`, alt: "avatar", onError: () => {
-            // e.currentTarget.onerror = null
-            if (!tempAvatar)
-                setTempAvatar(true);
-        } })) : (React__default.createElement("div", { className: "avatar avatar-default" }, username && (username === null || username === void 0 ? void 0 : username.length) > 0 ? username[0].toUpperCase() : 'A'))));
-};
-
-export { Popup as P, UserAvatar as U, formatCommunity as a, formatPost as b, formatTopic as c, dataTransform as d, formatComment as e, formatUserProfileUrl as f, formatArticle as g, formatCategory as h };
+export { Popup as P, formatCommunity as a, formatPost as b, formatComment as c, dataTransform as d, formatArticle as e, formatUserProfileUrl as f, formatTopic as g, formatCategory as h };

package/build/esm/defaultClassWrapper-00903c00.js

@@ -0,0 +1,15 @@
+import React__default, { forwardRef } from 'react';
+
+/* eslint-disable @typescript-eslint/ban-types */
+function setDefaultClass(Component, defaultClass) {
+    const Comp = forwardRef((props, ref) => {
+        return (React__default.createElement(Component, Object.assign({}, props, { 
+            // @ts-ignore
+            className: `${defaultClass} ${props.className || ''}`, ref: ref })));
+    });
+    // @ts-ignore
+    Comp.classSelector = `.${defaultClass}`;
+    return Comp;
+}
+
+export { setDefaultClass as s };

package/build/esm/ecom.js

@@ -1,9 +1,9 @@
-import { t as theme } from './theme-0af1cc3d.js';
-export { c as Constants } from './constants-7661ce64.js';
-import './index-c807ef87.js';
+import { t as theme } from './theme-7dadf4a1.js';
+export { c as Constants } from './constants-bb470362.js';
+import './index-6210f454.js';
 import 'date-fns/locale';
-import './index-eeedf0f0.js';
-import './isProduction-2838b9ae.js';
+import './index-189d7601.js';
+import './isProduction-1937d355.js';
 
 // ===== CART END =====