@hhgtech/hhg-components 1.29.448 → 1.29.449-beta-2

package/build/{index-378ce6d8.js → index-102ab10c.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var styled = require('@emotion/styled');
-var index = require('./index-d395161d.js');
+var index = require('./index-e6d4dc90.js');
 var miscTheme = require('./miscTheme.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/index-14e6837a.js

@@ -0,0 +1,308 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-e25c8d1c.js');
+var React = require('react');
+var core = require('@mantine/core');
+var other = require('@hhgtech/icons/other');
+require('./index-2d074d2e.js');
+require('@mantine/dates');
+require('./index-c81f3722.js');
+require('./index-17ae9969.js');
+require('./index-584516cc.js');
+require('./index-a779e325.js');
+var index$1 = require('./index-e55b34fa.js');
+require('./index-ecc141b9.js');
+var index$2 = require('./index-54f85690.js');
+require('./index.styles-96a814d0.js');
+var index = require('./index-dac13ed8.js');
+require('@mantine/hooks');
+var utils = require('./utils-d873e1b3.js');
+require('./index-27b83fe5.js');
+var context = require('./context-d9f513d2.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const StyledIconContainerClass = 'hhgcomp-toolbanner-iconcontainer';
+const StyledInnerClass = 'hhgcomp-toolbanner-inner';
+const StyledWrapperClass = 'hhgcomp-toolbanner-wrapper';
+const useStyles$3 = core.createStyles((theme, { isRevamp, isPregTool, bannerColor, isMarryBaby }) => ({
+    wrapper: {
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        gap: core.rem(24),
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: core.rem(16),
+    },
+    container: {
+        width: '100%',
+        backgroundColor: bannerColor ||
+            (isMarryBaby
+                ? theme.colors.mb[1]
+                : isPregTool
+                    ? theme.colors.pink[1]
+                    : theme.colors.blue[1]),
+        position: 'relative',
+        display: 'flex',
+        gap: 24,
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: core.rem(16),
+        a: {
+            textDecoration: 'none',
+            color: 'inherit',
+        },
+        '&[data-site="marryBaby"]': {
+            a: {
+                textDecoration: 'underline',
+            },
+            [utils.MediaQueries.mbDown]: {
+                paddingBottom: 0,
+            },
+        },
+        [utils.MediaQueries.tdDown]: {
+            height: 'auto',
+            [`.${StyledWrapperClass}`]: {
+                [`.${StyledInnerClass}`]: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    [utils.MediaQueries.mbDown]: {
+                        justifyContent: 'space-between',
+                    },
+                    [`.${StyledIconContainerClass}`]: {
+                        position: 'relative',
+                        right: core.rem(-50),
+                        bottom: core.rem(-20),
+                        width: core.rem(110),
+                        minWidth: 0,
+                        height: 'auto',
+                        minHeight: 0,
+                        alignSelf: 'flex-end',
+                        marginBottom: core.rem(-20),
+                        [utils.MediaQueries.mbDown]: {
+                            right: 'unset',
+                        },
+                    },
+                },
+            },
+        },
+        '.embedded-review': {
+            gap: core.rem(12),
+            display: 'flex',
+            alignItems: 'center',
+        },
+        '.embedded-review__avatar': {
+            position: 'relative',
+            minWidth: core.rem(32),
+            img: {
+                width: core.rem(32),
+                height: core.rem(32),
+                display: 'block',
+                borderRadius: '100%',
+            },
+            svg: {
+                bottom: 0,
+                right: 0,
+                position: 'absolute',
+            },
+        },
+    },
+    headingWrapper: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: isRevamp ? core.rem(8) : 0,
+    },
+    avatarWrapper: {
+        position: 'relative',
+        img: {
+            maxWidth: core.rem(48),
+            maxHeight: core.rem(48),
+        },
+        '.embedded-review__avatar': {
+            position: 'relative',
+        },
+    },
+    reviewText: {
+        a: {
+            textDecoration: 'underline',
+            textUnderlineOffset: '2px',
+        },
+    },
+    iconWrapper: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: core.rem(80),
+        height: core.rem(80),
+        borderRadius: '50%',
+        backgroundColor: '#fff',
+        flexShrink: 0,
+        img: {
+            maxWidth: core.rem(48),
+            maxHeight: core.rem(48),
+        },
+        [theme.fn.smallerThan('sm')]: {
+            width: core.rem(64),
+            height: core.rem(64),
+            img: {
+                maxWidth: core.rem(40),
+                maxHeight: core.rem(40),
+            },
+        },
+    },
+    heading: {},
+}));
+
+const ToolsBannerCard = (_a) => {
+    var { className, classNames, heading, bannerColor, medicalReview = { link: '#', reviewer: '', date: '' }, icon, style, isPregTool, isRevamp, styles } = _a, rest = tslib_es6.__rest(_a, ["className", "classNames", "heading", "bannerColor", "medicalReview", "icon", "style", "isPregTool", "isRevamp", "styles"]);
+    const { t } = index.useTranslations();
+    const theme = core.useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    const siteType = isMarryBaby ? 'marryBaby' : 'helloSites';
+    const headingAs = 'h2';
+    const { classes, cx } = useStyles$3({ isRevamp, isPregTool, bannerColor, isMarryBaby }, {
+        name: 'ToolsBannerCard',
+        styles,
+        classNames,
+    });
+    const medicalReviewEle = (medicalReview === null || medicalReview === void 0 ? void 0 : medicalReview.reviewer) ? (React__default["default"].createElement(index$1.Text, { size: "label2", as: "div", className: classes.reviewText },
+        medicalReview.avatar && (React__default["default"].createElement("div", { className: "embedded-review__avatar" },
+            React__default["default"].createElement(core.Box, { className: classes.avatarWrapper },
+                React__default["default"].createElement("img", { src: medicalReview.avatar, alt: medicalReview.reviewer, loading: "lazy" }),
+                React__default["default"].createElement(other.RedCross, { size: 14 })))),
+        React__default["default"].createElement("div", { dangerouslySetInnerHTML: {
+                __html: t('toolPage.toolReviewer', {
+                    expert_name: `<a href="${medicalReview.link}">${medicalReview.reviewer.trim()}</a>`,
+                    date: medicalReview.date,
+                }),
+            } }))) : null;
+    return (React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.container), style: style, "data-site": siteType }, rest),
+        React__default["default"].createElement(core.Flex, { className: classes.headingWrapper },
+            React__default["default"].createElement(index$1.Text, { className: cx(classes.heading, 'heading'), size: isMarryBaby ? 'h4' : 'h3', as: headingAs }, heading),
+            medicalReview && React__default["default"].createElement(index$1.Text, { size: "n1" }, medicalReviewEle)),
+        React__default["default"].createElement(core.Flex, { className: classes.iconWrapper }, icon)));
+};
+
+var useStyles$2 = core.createStyles(() => {
+    return {
+        root: {
+            borderTopLeftRadius: 'inherit',
+            borderTopRightRadius: 'inherit',
+        },
+    };
+});
+
+const Banner = (_a) => {
+    var { className, classNames, styles } = _a, rest = tslib_es6.__rest(_a, ["className", "classNames", "styles"]);
+    const { classes: wrapperClasses } = React.useContext(context.CardWrapperContext);
+    const { isPregTool } = React.useContext(context.CardWrapperContext);
+    const { classes, cx } = useStyles$2(undefined, {
+        name: 'HealthToolCardWrapper__Banner',
+        classNames,
+        styles,
+    });
+    return (React__default["default"].createElement(ToolsBannerCard, Object.assign({ isPregTool: isPregTool, classNames: {
+            container: wrapperClasses.bannerWrapper,
+            heading: wrapperClasses.bannerHeading,
+            reviewText: wrapperClasses.bannerReviewText,
+        }, className: cx(className, classes.root) }, rest)));
+};
+
+var useStyles$1 = core.createStyles(() => {
+    return {
+        root: {
+            paddingTop: 16,
+            borderRadius: 'inherit',
+        },
+    };
+});
+
+const Body = (_a) => {
+    var { children, className, styles, classNames } = _a, rest = tslib_es6.__rest(_a, ["children", "className", "styles", "classNames"]);
+    const { classes: wrapperClasses, hasBodyScroll } = React.useContext(context.CardWrapperContext);
+    const { classes, cx } = useStyles$1(undefined, {
+        name: 'HealthToolCardWrapper__Body',
+        styles,
+        classNames,
+    });
+    return (React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.root, wrapperClasses.bodyWrapper) }, rest), hasBodyScroll ? (React__default["default"].createElement(core.ScrollArea, { h: "100%", type: "auto", scrollbarSize: 8, className: wrapperClasses.scrollAreaWrapper }, children)) : (children)));
+};
+
+var useStyles = core.createStyles((theme, { isPregTool, variant }) => {
+    const isMarryBaby = theme.other.template === 'mb';
+    return {
+        root: Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', borderRadius: core.rem(isMarryBaby ? 16 : 8) }, (variant === 'default' && {
+            backgroundColor: '#fff',
+            border: `1px solid ${isMarryBaby
+                ? theme.colors.mb[2]
+                : isPregTool
+                    ? theme.colors.pink[1]
+                    : theme.colors.blue[2]}`,
+        })), (variant === 'gray' && {
+            backgroundColor: theme.colors.neutral[0],
+        })),
+        submitBtn: {},
+        bodyWrapper: {},
+        scrollAreaWrapper: {},
+        bannerWrapper: Object.assign({}, (variant === 'gray' && {
+            backgroundColor: 'transparent',
+            padding: `${core.rem(16)} ${core.rem(16)} 0`,
+        })),
+        bannerHeading: Object.assign({}, (variant === 'gray' && {
+            fontSize: core.rem(20),
+            lineHeight: core.rem(28),
+            fontWeight: index$2.FontWeight.semiBold,
+            [theme.fn.smallerThan('sm')]: {
+                fontSize: core.rem(17),
+                lineHeight: core.rem(24),
+            },
+        })),
+        bannerReviewText: Object.assign({}, (variant === 'gray' && {
+            fontSize: core.rem(14),
+            lineHeight: core.rem(22),
+            [theme.fn.smallerThan('sm')]: {
+                fontSize: core.rem(12),
+                lineHeight: core.rem(18),
+            },
+        })),
+        submitWrapper: Object.assign({ [theme.fn.smallerThan('sm')]: {
+                button: {
+                    width: '100%',
+                },
+            }, [theme.fn.largerThan('sm')]: {
+                textAlign: 'right',
+            } }, (variant === 'gray' && {
+            backgroundColor: theme.colors.neutral[0],
+            button: {
+                marginTop: 10,
+            },
+        })),
+        newsletterBlock: {},
+    };
+});
+
+const _HealthToolCardWrapper = (_a) => {
+    var { children, styles, classNames, className, isPregTool, variant = 'default', hasBodyScroll } = _a, rest = tslib_es6.__rest(_a, ["children", "styles", "classNames", "className", "isPregTool", "variant", "hasBodyScroll"]);
+    const { classes, cx } = useStyles({ isPregTool, variant }, {
+        name: 'HealthToolCardWrapper',
+        styles,
+        classNames,
+    });
+    return (React__default["default"].createElement(context.CardWrapperContext.Provider, { value: {
+            isPregTool,
+            classes,
+            variant,
+            hasBodyScroll,
+        } },
+        React__default["default"].createElement(core.Box, Object.assign({ className: cx(className, classes.root) }, rest), children)));
+};
+const HealthToolCardWrapper = _HealthToolCardWrapper;
+HealthToolCardWrapper.Body = Body;
+HealthToolCardWrapper.Banner = Banner;
+
+exports.HealthToolCardWrapper = HealthToolCardWrapper;
+exports.ToolsBannerCard = ToolsBannerCard;

package/build/{index-35041282.js → index-15e2a0e8.js}

@@ -1,34 +1,34 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-aaf078ac.js');
+var index = require('./index-dac13ed8.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var index$2 = require('./index-7fd03876.js');
-var normalizeLink = require('./normalizeLink-25e0ec54.js');
+var index$2 = require('./index-584516cc.js');
+var normalizeLink = require('./normalizeLink-ff879800.js');
 var miscTheme = require('./miscTheme.js');
-var index$1 = require('./index-a608d70c.js');
-var index$3 = require('./index-d5e59cc1.js');
-var index$4 = require('./index-75bb7acd.js');
-var types = require('./types-3d622f17.js');
+var index$1 = require('./index-40209cc1.js');
+var index$3 = require('./index-9898d5e0.js');
+var index$4 = require('./index-dd93ef14.js');
+var types = require('./types-363667a0.js');
 var styled = require('@emotion/styled');
 var api = require('@react-google-maps/api');
 var cn = require('classnames');
-var index$5 = require('./index-d8b7b7c8.js');
-var constants = require('./constants-2d7796a3.js');
-var index$6 = require('./index-26a35ab3.js');
-var localizeNumberFormat = require('./localizeNumberFormat-660b2913.js');
-var tslib_es6 = require('./tslib.es6-a0b3636d.js');
+var index$5 = require('./index-c81f3722.js');
+var constants = require('./constants-361f4405.js');
+var index$6 = require('./index-f8dfe69c.js');
+var localizeNumberFormat = require('./localizeNumberFormat-ebfda71f.js');
+var tslib_es6 = require('./tslib.es6-e25c8d1c.js');
 var hooks = require('@mantine/hooks');
 var core = require('@mantine/core');
-var index$9 = require('./index-f9082c79.js');
+var index$9 = require('./index-605a6925.js');
 var PhoneInputBase = require('react-phone-number-input');
-var index$8 = require('./index-8128ad91.js');
-var text = require('./text-4cc51fce.js');
-var index$7 = require('./index-edff4458.js');
-var index$b = require('./index-cb14a9dc.js');
-var index$a = require('./index-4ecc708d.js');
-var index$c = require('./index-515ec2da.js');
-var index$d = require('./index-f8bcbae7.js');
+var index$8 = require('./index-2d074d2e.js');
+var index$b = require('./index-54f85690.js');
+var index$7 = require('./index-ecc141b9.js');
+var index$c = require('./index-a779e325.js');
+var index$a = require('./index-e55b34fa.js');
+var index$d = require('./index-0b97e7cc.js');
+var index$e = require('./index-c9e3efe6.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -1000,9 +1000,9 @@ function CollectPhoneForm({ onSubmit, title, formType = formPhoneType.ZALO, isLo
                         React__namespace["default"].createElement(index$8.ErrorIcon, { size: 12 }),
                         React__namespace["default"].createElement(index$a.Text, { size: "c1", variant: "error" }, errorMessage))) },
                     React__namespace["default"].createElement(core.Box, { className: "mantine-Input-wrapper", sx: (theme) => ({
-                            '.PhoneInput .PhoneInputInput': Object.assign(Object.assign({}, text.GlobalTextStyleNew(theme)[text.CustomStylesType.LEADGEN].p2), { fontWeight: text.FontWeight.halfBold }),
+                            '.PhoneInput .PhoneInputInput': Object.assign(Object.assign({}, index$b.GlobalTextStyleNew(theme)[index$b.CustomStylesType.LEADGEN].p2), { fontWeight: index$b.FontWeight.halfBold }),
                         }) },
-                        React__namespace["default"].createElement(StyledPhone, { inputId: "collection_phone_input", onChange: handleChange, className: `mantine-Input-input ${classes.p2}`, name: "phoneNumber", spellCheck: false, placeholder: " ", defaultCountry: (locale ? index$b.MAPPED_LOCALE[locale] || 'VN' : 'VN'), type: "text", value: phone, "data-control": "tel", countries: [DEFAULT_COUNTRY_CODE], arrowComponent: () => React__namespace["default"].createElement(React__namespace["default"].Fragment, null) }))))))),
+                        React__namespace["default"].createElement(StyledPhone, { inputId: "collection_phone_input", onChange: handleChange, className: `mantine-Input-input ${classes.p2}`, name: "phoneNumber", spellCheck: false, placeholder: " ", defaultCountry: (locale ? index$c.MAPPED_LOCALE[locale] || 'VN' : 'VN'), type: "text", value: phone, "data-control": "tel", countries: [DEFAULT_COUNTRY_CODE], arrowComponent: () => React__namespace["default"].createElement(React__namespace["default"].Fragment, null) }))))))),
         React__namespace["default"].createElement("div", { className: "action actionBox" },
             React__namespace["default"].createElement(StyledButton, { variant: "primary", onClick: handleSubmit, fullWidth: true, size: "lg", loading: isLoading },
                 React__namespace["default"].createElement("div", null, t('collectPhoneNumber.action')),
@@ -1106,7 +1106,7 @@ const StyledHospitalInfo = styled__default["default"].div `
     flex: 1 1 0%;
   }
 `;
-const StyledImageWrap = styled__default["default"](index$c.ImageWrap) `
+const StyledImageWrap = styled__default["default"](index$d.ImageWrap) `
   /* object-contain object-center aspect-square  */
   width: 44px;
   height: 44px;
@@ -1209,7 +1209,7 @@ const StyledInsuranceContainer = styled__default["default"].div `
     padding: 1rem 0;
   }
 `;
-const StyledInsuranceList = styled__default["default"](index$d.InsuranceList) `
+const StyledInsuranceList = styled__default["default"](index$e.InsuranceList) `
   gap: 8px;
   margin-top: 1rem;
   & .insuranceItem > .insuranceLogo {
@@ -1233,7 +1233,7 @@ function ProductInsuranceInfo({ hospitalInfo, isMobile = false, }) {
             React__namespace["default"].createElement(StyledInsuranceList, { insurances: hospitalInfo.insurances, isName: false })),
         isSupportPayment && (React__namespace["default"].createElement("div", null,
             React__namespace["default"].createElement("h3", { className: "txt-body-2" }, t('common.paymentMethods')),
-            React__namespace["default"].createElement(index$d.PaymentList, { payments: hospitalInfo.accepted_payments, isMobile: isMobile })))));
+            React__namespace["default"].createElement(index$e.PaymentList, { payments: hospitalInfo.accepted_payments, isMobile: isMobile })))));
 }
 
 /* eslint-disable prettier/prettier */
@@ -1317,7 +1317,7 @@ const StyledPositionOfButton = styled__default["default"].div `
   display: flex;
   justify-content: flex-end;
 `;
-const StyledArrowRightBlue = styled__default["default"](index$d.ArrowRightBlue) `
+const StyledArrowRightBlue = styled__default["default"](index$e.ArrowRightBlue) `
   width: 0.65rem;
   height: 0.65rem;
   & > path {
@@ -1335,11 +1335,11 @@ const DoctorExpertise = (props) => {
         isShowReadMoreButton;
     return (React__namespace["default"].createElement(DoctorExpertiseProvider, { value: doctorInformation },
         React__namespace["default"].createElement(StyledCard, { className: className, style: style },
-            React__namespace["default"].createElement(index$d.DoctorInfoExpertise, { name: doctorInformation.name, specialty: doctorInformation.specialty, experience: doctorInformation.experience, profileImage: doctorInformation.profileImage || defaultProfileImage }),
+            React__namespace["default"].createElement(index$e.DoctorInfoExpertise, { name: doctorInformation.name, specialty: doctorInformation.specialty, experience: doctorInformation.experience, profileImage: doctorInformation.profileImage || defaultProfileImage }),
             isShowBodySection && (React__namespace["default"].createElement(StyledBodySection, { className: "body-section" },
                 React__namespace["default"].createElement("div", { className: "flex-item-doctor-info" },
-                    ((_c = doctorInformation === null || doctorInformation === void 0 ? void 0 : doctorInformation.clinics) === null || _c === void 0 ? void 0 : _c.length) > 0 && (React__namespace["default"].createElement(index$d.DoctorExpertiseItem, { doctorInfo: doctorInformation.clinics, Icon: index$d.Clinic, title: t('common.clinicHospital') })),
-                    ((_d = doctorInformation === null || doctorInformation === void 0 ? void 0 : doctorInformation.educations) === null || _d === void 0 ? void 0 : _d.length) > 0 && (React__namespace["default"].createElement(index$d.DoctorExpertiseItem, { doctorInfo: doctorInformation.educations, Icon: Education, title: t('common.education') })),
+                    ((_c = doctorInformation === null || doctorInformation === void 0 ? void 0 : doctorInformation.clinics) === null || _c === void 0 ? void 0 : _c.length) > 0 && (React__namespace["default"].createElement(index$e.DoctorExpertiseItem, { doctorInfo: doctorInformation.clinics, Icon: index$e.Clinic, title: t('common.clinicHospital') })),
+                    ((_d = doctorInformation === null || doctorInformation === void 0 ? void 0 : doctorInformation.educations) === null || _d === void 0 ? void 0 : _d.length) > 0 && (React__namespace["default"].createElement(index$e.DoctorExpertiseItem, { doctorInfo: doctorInformation.educations, Icon: Education, title: t('common.education') })),
                     children),
                 isShowReadMoreButton && (React__namespace["default"].createElement(StyledPositionOfButton, null,
                     React__namespace["default"].createElement(StyledReadMore, { onClick: onClickReadMore },
@@ -1351,14 +1351,14 @@ DoctorExpertise.Expertise = () => {
     const { t } = index.useTranslations();
     if (!expertise)
         return null;
-    return (React__namespace["default"].createElement(index$d.DoctorExpertiseItem, { doctorInfo: expertise, Icon: Credential, title: t('common.expertiseCredentials') }));
+    return (React__namespace["default"].createElement(index$e.DoctorExpertiseItem, { doctorInfo: expertise, Icon: Credential, title: t('common.expertiseCredentials') }));
 };
 DoctorExpertise.OtherHighlights = () => {
     const { otherHighlights } = React.useContext(DoctorExpertiseContext);
     const { t } = index.useTranslations();
     if (!otherHighlights)
         return null;
-    return (React__namespace["default"].createElement(index$d.DoctorExpertiseItem, { doctorInfo: otherHighlights, Icon: Highlight, title: t('common.otherHighlights') }));
+    return (React__namespace["default"].createElement(index$e.DoctorExpertiseItem, { doctorInfo: otherHighlights, Icon: Highlight, title: t('common.otherHighlights') }));
 };
 
 const ArticleCardStyled = styled__default["default"].div `
@@ -1391,7 +1391,7 @@ const ArticleDetailCard = (props) => {
     const { doctorName, doctorAvatar, defaultDoctorAvatar } = doctor || {};
     const { t } = index.useTranslations();
     return (React__namespace["default"].createElement(ArticleCardStyled, { className: className, style: style, onClick: handleClick },
-        React__namespace["default"].createElement(index$c.ImageWrap, { alt: 'article-image', src: image || defaultImage, style: {
+        React__namespace["default"].createElement(index$d.ImageWrap, { alt: 'article-image', src: image || defaultImage, style: {
                 width: '100%',
                 height: core.rem(143.5),
                 objectFit: 'cover',
@@ -1402,7 +1402,7 @@ const ArticleDetailCard = (props) => {
                 React__namespace["default"].createElement(index$a.Text, { color: articleTypeColor || miscTheme.theme.colors.green600, size: "c1", weight: "halfBold" }, articleType),
                 React__namespace["default"].createElement(index$a.Text, { size: "p2", weight: "semiBold", color: miscTheme.theme.colors.gray800, lineClamp: 2 }, articleTitle)),
             React__namespace["default"].createElement(ArticleDoctorStyled, null,
-                React__namespace["default"].createElement(index$c.ImageWrap, { alt: 'doctor-avatar', src: doctorAvatar || defaultDoctorAvatar, style: {
+                React__namespace["default"].createElement(index$d.ImageWrap, { alt: 'doctor-avatar', src: doctorAvatar || defaultDoctorAvatar, style: {
                         width: core.rem(20),
                         height: core.rem(20),
                         borderRadius: '50%',