@hhgtech/hhg-components 1.29.45 → 1.29.46

package/build/{index-e94d8fc3.js → index-862b85ee.js}

@@ -2,36 +2,36 @@
 
 var React = require('react');
 var core = require('@mantine/core');
-var utils = require('./utils-552ff173.js');
-var index_styles = require('./index.styles-3003e63e.js');
-var index = require('./index-2dd59c7f.js');
-var theme = require('./theme-c301ffa8.js');
-var index$1 = require('./index-5efe02fe.js');
-var index$2 = require('./index-c363f6b0.js');
-var useScrollbarSize = require('./useScrollbarSize-8b676ee5.js');
+var utils = require('./utils-19821978.js');
+var index_styles = require('./index.styles-dccb467a.js');
+var index = require('./index-5dd6ca2b.js');
+var theme = require('./theme-3d64c4bb.js');
+var index$1 = require('./index-3164239a.js');
+var index$2 = require('./index-7fdcece5.js');
+var useScrollbarSize = require('./useScrollbarSize-d5111bfe.js');
 var ReactDOM = require('react-dom');
 var styled = require('@emotion/styled');
-var utils$1 = require('./utils-f0f0e055.js');
-var tslib_es6 = require('./tslib.es6-deb50113.js');
+var utils$1 = require('./utils-c0969c6d.js');
+var tslib_es6 = require('./tslib.es6-e9ceb687.js');
 var yup = require('@hookform/resolvers/yup');
-var index$7 = require('./index-811930df.js');
+var index$7 = require('./index-a42fdce3.js');
 var reactHookForm = require('react-hook-form');
 var other = require('@hhgtech/icons/other');
-var index$4 = require('./index-c4e64941.js');
-var index$3 = require('./index-599b38dd.js');
-var index$5 = require('./index-f43223d7.js');
-require('./utils-3aa45436.js');
-var index$6 = require('./index-f1afe37f.js');
-var useTranslations = require('./useTranslations-0d5204fb.js');
+var index$4 = require('./index-c698c565.js');
+var index$3 = require('./index-28e41405.js');
+var index$5 = require('./index-59a03ee5.js');
+require('./utils-a06b2158.js');
+var index$6 = require('./index-0ef5fb7b.js');
+var useTranslations = require('./useTranslations-88508475.js');
 require('@mantine/hooks');
-require('./useMantineLocale-71cf4d6c.js');
-require('./index-840d7784.js');
-require('./WhatsApp-b5951003.js');
-require('./index.styled-76b0da80.js');
-require('./index-96d1c81a.js');
-var constants = require('./constants-ce8caeb2.js');
+require('./useMantineLocale-36d8cc0e.js');
+require('./index-5f79500b.js');
+require('./WhatsApp-4bf1be49.js');
+require('./index.styled-3d074d06.js');
+require('./index-eef67236.js');
+var constants = require('./constants-113796d0.js');
 require('@mantine/dates');
-var dateFns = require('date-fns');
+require('date-fns');
 var flattenChildren = require('react-keyed-flatten-children');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -393,168 +393,100 @@ const Modal = ({ type = 'lead', closeIcon, isOpen = true, onClose, children, cla
                 children))), elRef.current);
 };
 
-styled__default["default"](index_styles.PureInput) `
-  & input,
-  .mantine-Input-input {
-    border-color: ${theme.theme.mbColors.lightGray};
-    background-color: ${theme.theme.colors.white};
-    border-radius: 16px;
-    transition: all 0.2s ease;
-    &:focus,
-    &:hover {
-      border-color: ${theme.theme.mbColors.pink};
-      box-shadow: none;
-    }
-  }
-
-  & .displayIcon {
-    pointer-events: none;
-  }
-`;
-const StyledTextField = styled__default["default"](index$5.Input) `
-  & label {
-    position: absolute;
-    z-index: 1;
-    top: 16px;
-
-    left: 16px;
-    color: ${theme.theme.mbColors.midGray};
-    pointer-events: none;
-    transition: all 0.2s ease;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 240px;
-
-    &[data-size='label2'] {
-      font-size: 12px;
-    }
-
-    ${utils.MediaQueries.tdDown} {
-      max-width: 220px;
-    }
-  }
-  & input,
-  .mantine-Input-input {
-    ::placeholder {
-      color: ${theme.theme.mbColors.gray};
-      font-size: 14px;
-    }
-
-    ::-webkit-input-placeholder {
-      /* Chrome/Opera/Safari */
-      color: ${theme.theme.mbColors.gray};
-      font-size: 14px;
-    }
-    ::-moz-placeholder {
-      /* Firefox 19+ */
-      color: ${theme.theme.mbColors.gray};
-      font-size: 14px;
-    }
-    :-ms-input-placeholder {
-      /* IE 10+ */
-      color: ${theme.theme.mbColors.gray};
-      font-size: 14px;
-    }
-    :-moz-placeholder {
-      /* Firefox 18- */
-      color: ${theme.theme.mbColors.gray};
-      font-size: 14px;
-    }
-    height: ${(props) => (props.size === 'sm' ? 48 : 72)}px !important;
-    padding-top: 27px !important;
-    border-color: ${theme.theme.mbColors.lightGray} !important;
-    background-color: ${theme.theme.colors.white};
-    border-radius: 16px !important;
-    transition: all 0.2s ease;
-    padding-top: ${(props) => (props.value ? '38px' : '27px')} !important;
-
-    &:focus,
-    &:hover {
-      border-color: ${theme.theme.mbColors.pink};
-      box-shadow: none;
-    }
-  }
-  .mantine-Input-rightSection,
-  .mantine-Input-leftSection {
-    padding-top: 20px;
-  }
-
-  &[data-has-action-icon] {
-    input,
-    .mantine-Input-input {
-      padding-top: ${(props) => (props.value ? '38px' : '27px')} !important;
-      padding-bottom: ${(props) => (props.value ? '16px' : '27px')} !important;
-      height: unset !important;
-    }
-
-    label {
-      position: absolute;
-      z-index: 1;
-      top: 16px;
-      padding-right: 46px;
-    }
-  }
-`;
-
 exports.DueDateCalculatorType = void 0;
 (function (DueDateCalculatorType) {
     DueDateCalculatorType[DueDateCalculatorType["lastPeriod"] = 0] = "lastPeriod";
     DueDateCalculatorType[DueDateCalculatorType["conception"] = 1] = "conception";
     DueDateCalculatorType[DueDateCalculatorType["IVF"] = 2] = "IVF";
 })(exports.DueDateCalculatorType || (exports.DueDateCalculatorType = {}));
-const API_DATE_FORMAT = 'yyyy-MM-dd';
-const getDueDateLastPeriod = (lastPeriodDate, periodLength) => {
-    const pregnancyLength = 272 + (periodLength - 21);
-    const dueDate = new Date(lastPeriodDate);
-    dueDate.setDate(dueDate.getDate() + pregnancyLength);
+const DateToInputValue = (date) => {
+    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+};
+
+var useStyles$9 = core.createStyles(() => {
     return {
-        startDate: lastPeriodDate,
-        dueDate,
-        otherInfo: {
-            method: exports.DueDateCalculatorType.lastPeriod + 1,
-            first_day: dateFns.format(lastPeriodDate, API_DATE_FORMAT),
-            cycle_length_days: periodLength,
-            conception_date: null,
-            ivf_transfer_date: null,
-            days_transfer: null,
+        root: {
+            justifyContent: 'flex-start',
         },
-    };
-};
-const getDueDateConception = (conceptionDate) => {
-    const dueDate = new Date(conceptionDate);
-    dueDate.setDate(dueDate.getDate() + 265);
-    return {
-        startDate: conceptionDate,
-        dueDate,
-        otherInfo: {
-            method: exports.DueDateCalculatorType.conception + 1,
-            conception_date: dateFns.format(conceptionDate, API_DATE_FORMAT),
-            first_day: null,
-            cycle_length_days: null,
-            ivf_transfer_date: null,
-            days_transfer: null,
+        group: {
+            display: 'flex',
+            alignItems: 'stretch',
+            gap: core.rem(8),
         },
-    };
-};
-const getDueDateIVF = (IVFDate, numDayTransfer) => {
-    const dueDate = new Date(IVFDate);
-    dueDate.setDate(dueDate.getDate() + 265 - numDayTransfer);
-    return {
-        startDate: IVFDate,
-        dueDate,
-        otherInfo: {
-            method: exports.DueDateCalculatorType.IVF + 1,
-            ivf_transfer_date: dateFns.format(IVFDate, API_DATE_FORMAT),
-            days_transfer: numDayTransfer,
-            conception_date: null,
-            first_day: null,
-            cycle_length_days: null,
+        item: {
+            flex: '1 1 0px',
+        },
+        icon: {
+            flexShrink: 0,
         },
     };
-};
-const DateToInputValue = (date) => {
-    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '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$9(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({});
@@ -820,7 +752,7 @@ const Control = (_a) => {
 };
 
 const _HealthToolFormWrapper = (_a) => {
-    var { children, formLayout: formLayoutProp, styles, classNames, className } = _a, rest = tslib_es6.__rest(_a, ["children", "formLayout", "styles", "classNames", "className"]);
+    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$7({ formLayout }, {
         name: 'HealthToolFormWrapper',
@@ -830,7 +762,7 @@ const _HealthToolFormWrapper = (_a) => {
     return (React__default["default"].createElement(FormLayoutContext.Provider, { value: {
             formLayout,
         } },
-        React__default["default"].createElement(core.Box, Object.assign({ component: "form", className: cx(className, classes.root) }, rest), children)));
+        React__default["default"].createElement(core.Box, Object.assign({ component: component, className: cx(className, classes.root) }, rest), children)));
 };
 const HealthToolFormWrapper = _HealthToolFormWrapper;
 HealthToolFormWrapper.Control = Control;
@@ -840,10 +772,115 @@ HealthToolFormWrapper.Error = Error;
 HealthToolFormWrapper.FormRow = FormRow;
 HealthToolFormWrapper.Submit = SubmitBtn;
 HealthToolFormWrapper.Unit = Unit;
-HealthToolFormWrapper.Switching = Switching;
+HealthToolFormWrapper.Switching = Switching;
+HealthToolFormWrapper.ChipGroup = ChipGroup;
 
 const BabyGrowthFormContext = React.createContext({});
 
+styled__default["default"](index_styles.PureInput) `
+  & input,
+  .mantine-Input-input {
+    border-color: ${theme.theme.mbColors.lightGray};
+    background-color: ${theme.theme.colors.white};
+    border-radius: 16px;
+    transition: all 0.2s ease;
+    &:focus,
+    &:hover {
+      border-color: ${theme.theme.mbColors.pink};
+      box-shadow: none;
+    }
+  }
+
+  & .displayIcon {
+    pointer-events: none;
+  }
+`;
+const StyledTextField = styled__default["default"](index$5.Input) `
+  & label {
+    position: absolute;
+    z-index: 1;
+    top: 16px;
+
+    left: 16px;
+    color: ${theme.theme.mbColors.midGray};
+    pointer-events: none;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 240px;
+
+    &[data-size='label2'] {
+      font-size: 12px;
+    }
+
+    ${utils.MediaQueries.tdDown} {
+      max-width: 220px;
+    }
+  }
+  & input,
+  .mantine-Input-input {
+    ::placeholder {
+      color: ${theme.theme.mbColors.gray};
+      font-size: 14px;
+    }
+
+    ::-webkit-input-placeholder {
+      /* Chrome/Opera/Safari */
+      color: ${theme.theme.mbColors.gray};
+      font-size: 14px;
+    }
+    ::-moz-placeholder {
+      /* Firefox 19+ */
+      color: ${theme.theme.mbColors.gray};
+      font-size: 14px;
+    }
+    :-ms-input-placeholder {
+      /* IE 10+ */
+      color: ${theme.theme.mbColors.gray};
+      font-size: 14px;
+    }
+    :-moz-placeholder {
+      /* Firefox 18- */
+      color: ${theme.theme.mbColors.gray};
+      font-size: 14px;
+    }
+    height: ${(props) => (props.size === 'sm' ? 48 : 72)}px !important;
+    padding-top: 27px !important;
+    border-color: ${theme.theme.mbColors.lightGray} !important;
+    background-color: ${theme.theme.colors.white};
+    border-radius: 16px !important;
+    transition: all 0.2s ease;
+    padding-top: ${(props) => (props.value ? '38px' : '27px')} !important;
+
+    &:focus,
+    &:hover {
+      border-color: ${theme.theme.mbColors.pink};
+      box-shadow: none;
+    }
+  }
+  .mantine-Input-rightSection,
+  .mantine-Input-leftSection {
+    padding-top: 20px;
+  }
+
+  &[data-has-action-icon] {
+    input,
+    .mantine-Input-input {
+      padding-top: ${(props) => (props.value ? '38px' : '27px')} !important;
+      padding-bottom: ${(props) => (props.value ? '16px' : '27px')} !important;
+      height: unset !important;
+    }
+
+    label {
+      position: absolute;
+      z-index: 1;
+      top: 16px;
+      padding-right: 46px;
+    }
+  }
+`;
+
 styled__default["default"].div `
   display: flex;
   flex-direction: column;
@@ -1091,15 +1128,9 @@ const BabyGrowthForm = (_a) => {
         } }, formLayout === 'default' ? (React__default["default"].createElement(DefaultForm, Object.assign({}, commonProps))) : (React__default["default"].createElement(InlineForm, Object.assign({}, commonProps)))));
 };
 
-exports.API_DATE_FORMAT = API_DATE_FORMAT;
 exports.BabyGrowthForm = BabyGrowthForm;
-exports.DateToInputValue = DateToInputValue;
 exports.Drawer = Drawer;
 exports.GenderOptionControl = GenderOptionControl;
 exports.HealthToolFormWrapper = HealthToolFormWrapper;
 exports.Modal = Modal;
 exports.RadioImageGroup = RadioImageGroup;
-exports.StyledTextField = StyledTextField;
-exports.getDueDateConception = getDueDateConception;
-exports.getDueDateIVF = getDueDateIVF;
-exports.getDueDateLastPeriod = getDueDateLastPeriod;

package/build/{index-c3f73a4d.js → index-8fde4d03.js}

@@ -1,24 +1,24 @@
 'use strict';
 
 var React = require('react');
-var index$1 = require('./index-38c9426b.js');
+var index$1 = require('./index-e124055f.js');
 var dayjs = require('dayjs');
-var index$3 = require('./index-840d7784.js');
-var index = require('./index-c4e64941.js');
+var index$3 = require('./index-5f79500b.js');
+var index = require('./index-c698c565.js');
 var core = require('@mantine/core');
 require('@mantine/dates');
-require('./index-811930df.js');
-require('./index-599b38dd.js');
-require('./useMantineLocale-71cf4d6c.js');
-var index$2 = require('./index-2dd59c7f.js');
-var theme = require('./theme-c301ffa8.js');
-require('./translationsContext-59e2a34f.js');
+require('./index-a42fdce3.js');
+require('./index-28e41405.js');
+require('./useMantineLocale-36d8cc0e.js');
+var index$2 = require('./index-5dd6ca2b.js');
+var theme = require('./theme-3d64c4bb.js');
+require('./translationsContext-c38c15c8.js');
 require('string-format');
 require('@mantine/hooks');
-var utils = require('./utils-552ff173.js');
+var utils = require('./utils-19821978.js');
 var styled = require('@emotion/styled');
-var index$5 = require('./index-6a930317.js');
-var index$4 = require('./index-5efe02fe.js');
+var index$5 = require('./index-d8d1a000.js');
+var index$4 = require('./index-3164239a.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-c95ec192.js → index-a1c28eba.js}

@@ -3,7 +3,7 @@
 var React = require('react');
 var core = require('@mantine/core');
 var styled = require('@emotion/styled');
-var theme = require('./theme-c301ffa8.js');
+var theme = require('./theme-3d64c4bb.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-2faf9fb0.js → index-a8450c08.js}

@@ -1,20 +1,20 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-deb50113.js');
+var tslib_es6 = require('./tslib.es6-e9ceb687.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index$2 = require('./index-c4e64941.js');
+var index$2 = require('./index-c698c565.js');
 require('@mantine/dates');
-var index = require('./index-840d7784.js');
-var index$1 = require('./index-811930df.js');
-require('./index-599b38dd.js');
-require('./useMantineLocale-71cf4d6c.js');
-require('./index-2dd59c7f.js');
-require('./theme-c301ffa8.js');
-var useTranslations = require('./useTranslations-0d5204fb.js');
+var index = require('./index-5f79500b.js');
+var index$1 = require('./index-a42fdce3.js');
+require('./index-28e41405.js');
+require('./useMantineLocale-36d8cc0e.js');
+require('./index-5dd6ca2b.js');
+require('./theme-3d64c4bb.js');
+var useTranslations = require('./useTranslations-88508475.js');
 require('@mantine/hooks');
-require('./utils-552ff173.js');
-var utils = require('./utils-5366ac41.js');
+require('./utils-19821978.js');
+var utils = require('./utils-5fb09c5a.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }