@hhgtech/hhg-components
Version:
Hello Health Group common components
637 lines (608 loc) • 91.1 kB
JavaScript
import React__default, { useMemo, useRef, useState, useEffect } from 'react';
import { BabyBoyMB, GenderChooseBoy, BabyGirlMB, GenderChooseGirl, Boy, Girl, CheckActiveMB, GenderBoy, GenderGirl, CalendarMB, Calendar } from '@hhgtech/icons/other';
import { u as useTranslations } from './index-09d9e570.js';
import { G as Gender, B as BabyGrowthChartType, a as BabyGrowthChartDuration } from './index-fe4471f4.js';
import { a as MarryBabyHeading, M as MarryBabyText } from './index-de3a12d3.js';
import { T as Text } from './index-0b67696c.js';
import { theme } from './miscTheme.js';
import styled from '@emotion/styled';
import { M as MediaQueries, s as startCase } from './utils-538169b3.js';
import { R as RadioImageGroup } from './index-dd00819b.js';
import { L as LOCALE } from './Locale-dc1237b9.js';
import { B as Button } from './index-67429eb2.js';
import dayjs from 'dayjs';
import { a as ageGenerate } from './ageGenerate-86d86154.js';
import { l as localizeNumberFormat } from './localizeNumberFormat-977a7b73.js';
import { Kebab } from '@hhgtech/icons/core';
import { H as Heading } from './index-e348d0b2.js';
import { _ as __rest, a as __awaiter } from './tslib.es6-00ab44b2.js';
import { a as useOutsideClick } from './useOutsideClick-5ac585f9.js';
import { T as Text$1 } from './index-546ca9b5.js';
import { D as Drawer } from './index-b0feae54.js';
import { M as Modal } from './index-19cbafd1.js';
import { I as Input } from './index-5e2dff13.js';
import { ResponsiveContainer, LineChart, CartesianGrid, Tooltip, XAxis, YAxis, Line, ReferenceDot } from 'recharts';
import { C as CustomReferenceDot } from './index-57322550.js';
import chunk from 'lodash/chunk';
export { B as BabyGrowthForm } from './index-cd8d64cb.js';
import './translationsContext-18f7b7e0.js';
import '@mantine/core';
import './index-17c85f76.js';
import './index-2d25b0f0.js';
import './shared-b07d1eb2.js';
import 'react-phone-number-input';
import './index-bd44bcb2.js';
import '@mantine/hooks';
import './index-7adf994c.js';
import './constantsDomainLocales.js';
import './constantsIsProduction.js';
import './index-50aea2c8.js';
import '@mantine/carousel';
import './index-3f09210d.js';
import '@mantine/notifications';
import './index-8c40504a.js';
import 'date-fns/locale';
import './constantsSite.js';
import './constantsRiskScreener.js';
import 'classnames';
import 'uuid';
import './useUniqueId-38cdf062.js';
import '@emotion/react';
import '@mantine/dates';
import './index.styles-3adef5f6.js';
import './index-04505e35.js';
import './animation-6f4b6cee.js';
import './useScrollbarSize-02a27e38.js';
import 'lodash/debounce';
import 'react-dom';
import './miscDefaultClassWrapper.js';
import '@mantine/form';
import './index-0861b084.js';
import './context-41a96757.js';
import './constants-34703dc5.js';
import './index-c6190f14.js';
import 'react-keyed-flatten-children';
import './index-a002ff96.js';
const StyledBabyGrowthGender = styled.div `
& > :not(:last-child) {
margin-bottom: 8px;
}
.gender-selector {
& > :not(:last-child) {
margin-right: 16px;
}
& > div {
width: calc(50% - 8px);
${MediaQueries.mbUp} {
justify-self: left;
}
}
}
`;
const StyledBabyGrowthGenderOption = styled(RadioImageGroup) `
& > div > div {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
gap: 8px;
padding-block: 5px;
}
.radio-group-item-heading {
margin-top: 0;
}
`;
const BabyGrowthGender = ({ value, onChange, siteType, }) => {
const { t } = useTranslations();
const isMarryBaby = siteType == 'marryBaby';
return (React__default.createElement(StyledBabyGrowthGender, { "data-is-marryBaby": isMarryBaby },
isMarryBaby ? (React__default.createElement(MarryBabyHeading, { type: "h4", color: theme.mbColors.dark }, t('tools.selectBabyGender'))) : (React__default.createElement(Text, { size: "label2", weight: "bold", style: { marginBottom: '0.5rem' } }, t('tools.selectBabyGender'))),
React__default.createElement(StyledBabyGrowthGenderOption, { siteType: siteType, options: [
{
value: Gender.Boy,
label: t('gender.male'),
content: isMarryBaby ? React__default.createElement(BabyBoyMB, null) : React__default.createElement(GenderChooseBoy, null),
},
{
value: Gender.Girl,
label: t('gender.female'),
content: isMarryBaby ? React__default.createElement(BabyGirlMB, null) : React__default.createElement(GenderChooseGirl, null),
},
], value: value, onChange: onChange, className: "gender-selector" })));
};
const StyledBabyGrowthLegend = styled.div `
display: flex;
justify-content: center;
gap: 16px;
`;
const StyledLegend = styled.div `
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
.dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
`;
const BabyGrowthLegend = ({ legends, locale, }) => {
return (React__default.createElement(StyledBabyGrowthLegend, null, legends.map((legend, index) => (React__default.createElement(StyledLegend, { key: index },
React__default.createElement("span", { className: "dot", style: { backgroundColor: legend.color } }),
React__default.createElement(Text, { size: "n1", color: theme.colors.gray800 }, locale === LOCALE.Indonesia ? legend['z-score'] : legend.text))))));
};
const StyledBabyGrowthSwitch = styled.div `
display: flex;
justify-content: center;
.switch {
border: 1px solid ${theme.colors.neutral200};
padding: 6px 12px;
font-weight: 600;
font-size: 11px;
&:nth-child(2n + 1) {
border-radius: ${theme.borderRadius} 0px 0px 6px;
border-right: none;
}
&:nth-child(2n) {
border-radius: 0px 6px 6px 0px;
border-left: none;
}
}
`;
var BabyGrowthSwitchChart;
(function (BabyGrowthSwitchChart) {
BabyGrowthSwitchChart[BabyGrowthSwitchChart["WHO"] = 0] = "WHO";
BabyGrowthSwitchChart[BabyGrowthSwitchChart["CDC"] = 1] = "CDC";
})(BabyGrowthSwitchChart || (BabyGrowthSwitchChart = {}));
const BabyGrowthSwitch = ({ switchType, onTypeChange, }) => {
return (React__default.createElement(StyledBabyGrowthSwitch, null,
React__default.createElement(Button, { className: "switch", size: "sm", color: switchType === BabyGrowthSwitchChart.WHO ? 'primary' : 'ghost', onClick: () => onTypeChange(BabyGrowthSwitchChart.WHO) }, "WHO"),
React__default.createElement(Button, { className: "switch", size: "sm", isDisabled: true, color: switchType === BabyGrowthSwitchChart.CDC ? 'primary' : 'ghost', onClick: () => onTypeChange(BabyGrowthSwitchChart.CDC) }, "CDC")));
};
const StyledBabyGrowthTooltip = styled.div `
/* position: absolute; */
display: flex;
align-items: stretch;
justify-content: space-around;
padding: 8px;
gap: 14px;
min-width: 145px;
max-width: 220px;
min-height: 50px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
.risk {
display: flex;
align-items: center;
padding: 4px 8px;
background: ${theme.colors.yellow600};
border-radius: 3px;
}
.tooltip {
text-align: left;
}
`;
const LABELS_COLOR = [
{
name: ['3rd', '-3SD', '97th', '3SD'],
color: theme.colors.red600,
},
{
name: ['15rd', '-2SD', '85th', '2SD'],
color: theme.colors.yellow600,
},
{
name: ['50th', '0Median'],
color: theme.colors.green600,
},
];
const MAPPED_RISK_LEVEL = {
'3rd': '-3SD',
'15th': '-2SD',
'50th': 'Median',
'85th': '2SD',
'97th': '3SD',
};
const BabyGrowthTooltip = (props) => {
var _a;
const { payload, locale, active } = props;
const currentPayload = (_a = payload === null || payload === void 0 ? void 0 : payload[0]) === null || _a === void 0 ? void 0 : _a.payload;
if (!currentPayload ||
!currentPayload.history ||
!currentPayload.name ||
!currentPayload.risk ||
!currentPayload.toolTipLabel ||
!active)
return null;
const riskColor = useMemo(() => {
var _a;
return (_a = LABELS_COLOR.find((per) => per.name.includes(currentPayload.risk || ''))) === null || _a === void 0 ? void 0 : _a.color;
}, [currentPayload.risk]);
const mappedRiskLevel = useMemo(() => {
if (locale === LOCALE.Indonesia) {
return currentPayload.risk ? MAPPED_RISK_LEVEL[currentPayload.risk] : '';
}
return currentPayload.risk;
}, [locale, currentPayload.risk]);
return (React__default.createElement(StyledBabyGrowthTooltip, null,
React__default.createElement("div", { className: "risk", style: {
backgroundColor: riskColor,
} },
React__default.createElement(Text, { size: "s3", color: theme.colors.white, weight: "semiBold" }, mappedRiskLevel)),
React__default.createElement("div", { className: "tooltip" }, (currentPayload.toolTipLabel || []).map((tooltip, index) => (React__default.createElement(Text, { key: index, size: "n1", color: theme.colors.gray600 }, tooltip))))));
};
const ACTIVE_DURATION$1 = '300ms';
const StyledBabyGrowthProfileRadio = styled.div `
background: ${theme.colors.gray50};
border-radius: ${theme.borderRadius};
padding: 16px 20px;
display: flex;
justify-content: space-between;
align-items: center;
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
&[data-is-mb='true'] {
background: #ffffff;
border: 1px solid #e0e9fb;
border-radius: 16px;
}
&[data-isActive='true'] {
border: 1px solid #2661ad;
}
.baby {
display: flex;
align-items: center;
gap: 8px;
svg {
min-width: 24px;
}
}
&[data-is-mb='false'] .radio {
cursor: pointer;
position: relative;
min-width: 22px;
width: 22px;
height: 22px;
background: #ffffff;
border: 2px solid ${theme.colors.gray600};
border-radius: 50%;
transition: all ${ACTIVE_DURATION$1} ease-in-out;
&.active {
border-color: ${theme.colors.primaryBase};
&::before {
content: '';
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-color: ${theme.colors.primaryBase};
background-clip: content-box;
padding: 5px;
border-radius: 50%;
animation: fadeIn ${ACTIVE_DURATION$1} ease-in-out forwards;
}
}
}
&[data-is-mb='true'] .radio {
cursor: pointer;
position: relative;
min-width: 22px;
width: 22px;
height: 22px;
background: #ffffff;
border: 1.3px solid #9495a0;
border-radius: 10px;
transition: all ${ACTIVE_DURATION$1} ease-in-out;
&.active {
border: none;
&::before {
content: '';
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: 0;
border-radius: 10px;
animation: fadeIn ${ACTIVE_DURATION$1} ease-in-out forwards;
}
}
}
`;
const BabyGrowthProfileRadio = ({ profile, onChange, isActive, siteType, }) => {
const isMarryBaby = siteType === 'marryBaby';
return (React__default.createElement(StyledBabyGrowthProfileRadio, { onClick: () => onChange(String(profile.id)), "data-is-mb": isMarryBaby, "data-isActive": isMarryBaby && isActive }, !isMarryBaby ? (React__default.createElement(React__default.Fragment, null,
React__default.createElement("div", { className: "baby" },
//@ts-ignore
profile.gender === 'male' ? React__default.createElement(Boy, { size: 24 }) : React__default.createElement(Girl, { size: 24 }),
React__default.createElement(Text, { size: "p2", color: theme.colors.gray800 }, profile.name)),
React__default.createElement("div", { className: isActive ? 'radio active' : 'radio' }))) : (React__default.createElement(React__default.Fragment, null,
React__default.createElement("div", { className: "baby" },
React__default.createElement(MarryBabyText, { type: "bodytext-1", color: theme.colors.gray800 }, profile.name)),
React__default.createElement("div", { className: isActive ? 'radio active' : 'radio' }, isActive && React__default.createElement(CheckActiveMB, { size: 26 }))))));
};
const StyledBabyGrowthRecord = styled.div `
cursor: pointer;
position: relative;
padding: 20px 2px;
border-bottom: 1px solid ${theme.colors.gray100};
.time {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.edit-button {
margin-left: auto;
justify-self: end;
}
.record {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 30px;
grid-row-gap: 0px;
}
.record-item {
display: flex;
align-items: center;
gap: 8px;
}
`;
const StyledMenu = styled.div `
min-width: 212px;
width: ${(props) => props.width + 'px'};
background-color: #ffffff;
border-radius: ${theme.borderRadius};
overflow: hidden;
filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04))
drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.04))
drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.04));
ul {
list-style: none;
}
`;
const StyledMenuItem = styled.li `
background-color: inherit;
display: flex;
align-items: center;
justify-content: left;
gap: 10px;
padding: 10px 16px;
cursor: pointer;
transition: background-color 200ms ease-in-out;
&:hover {
background-color: ${theme.colors.neutral50};
}
.icon {
width: 16px;
height: 16px;
}
`;
const MenuItem = (_a) => {
var { icon, children } = _a, rest = __rest(_a, ["icon", "children"]);
return (React__default.createElement(StyledMenuItem, Object.assign({}, rest),
icon && React__default.createElement("div", { className: "icon" }, icon),
children));
};
const MenuWrapper = (_a) => {
var { children, width = 300 } = _a, rest = __rest(_a, ["children", "width"]);
return (React__default.createElement(StyledMenu, Object.assign({}, rest, { width: width }),
React__default.createElement("ul", null, children)));
};
const Menu = MenuWrapper;
Menu.Item = MenuItem;
const StyledChildCard = styled.div `
/* Auto layout */
position: relative;
display: flex;
align-items: flex-start;
padding: 16px;
gap: 16px;
background: ${theme.colors.white};
border: 1px solid ${theme.colors.gray100};
border-radius: ${theme.borderRadius};
&[data-theme='marryBaby'] {
border: 1px solid #f3f3f3;
border-radius: 16px;
padding: 19px 16px;
}
&[data-theme='marryBaby'] .information {
gap: 4px;
}
.information {
display: flex;
flex-direction: column;
gap: 8px;
h5:first-letter {
text-transform: uppercase;
}
.detail {
display: flex;
gap: 16px;
div {
display: flex;
align-items: center;
gap: 6px;
}
}
}
`;
const StyledOption = styled.div `
position: absolute;
top: 18px;
right: 16px;
cursor: pointer;
`;
const StyledChildCardMenu = styled(Menu) `
position: absolute;
right: 0;
z-index: 1;
&[data-site='marryBaby'] {
border-radius: 12px;
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
li {
display: flex;
gap: 16px;
align-items: center;
:hover {
background-color: ${theme.mbColors.tonePink};
}
}
}
`;
const ChildCardMenu = ({ name, onClose, onEdit, onSwitch, onAdd, onRemove, siteType, }) => {
const { t } = useTranslations();
const isMarryBaby = siteType === 'marryBaby';
const ref = useRef();
useOutsideClick(ref, onClose);
return (React__default.createElement("div", { ref: ref }, isMarryBaby ? (React__default.createElement(StyledChildCardMenu, { width: 250, "data-site": siteType },
React__default.createElement(Menu.Item, { onClick: onEdit, icon: React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.1512 4.29354C13.7553 3.68946 14.5746 3.3501 15.4289 3.3501C17.2078 3.3501 18.65 4.79223 18.65 6.5712C18.65 7.42549 18.3106 8.24479 17.7065 8.84886L16.9689 9.58652C16.9626 9.59307 16.9562 9.5995 16.9496 9.6058L13.7897 12.7657C12.0036 14.5518 9.76564 15.8189 7.31513 16.4315L6.55809 16.6208C5.84616 16.7988 5.20129 16.1539 5.37927 15.442L5.56853 14.6849C6.18116 12.2344 7.44827 9.99647 9.23437 8.21036L12.3943 5.0504C12.4006 5.04388 12.407 5.0375 12.4135 5.03127L13.1512 4.29354ZM12.2667 7.01649L10.1536 9.1296C8.53411 10.7491 7.3852 12.7783 6.82972 15.0002L6.77301 15.227L6.99983 15.1703C9.22177 14.6149 11.251 13.4659 12.8705 11.8464L14.9836 9.73334C14.3478 9.52953 13.7639 9.13743 13.3133 8.68678C12.8626 8.23613 12.4705 7.65226 12.2667 7.01649ZM16.1622 8.55469C15.5984 8.66895 14.8552 8.39025 14.2325 7.76754C13.6098 7.14483 13.3311 6.40165 13.4454 5.83784L14.0704 5.21278C14.4307 4.8525 14.9193 4.6501 15.4289 4.6501C16.4899 4.6501 17.35 5.5102 17.35 6.5712C17.35 7.08071 17.1476 7.56935 16.7873 7.92962L16.1622 8.55469Z", fill: "#3E3F58" }),
React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.34998 20.0001C4.34998 19.6411 4.64099 19.3501 4.99998 19.3501H19C19.359 19.3501 19.65 19.6411 19.65 20.0001C19.65 20.3591 19.359 20.6501 19 20.6501H4.99998C4.64099 20.6501 4.34998 20.3591 4.34998 20.0001Z", fill: "#3E3F58" })) },
React__default.createElement(MarryBabyText, { type: "bodytext-2", color: theme.mbColors.gray }, t('childCard.menu.edit', { name }))),
React__default.createElement(Menu.Item, { onClick: onSwitch, icon: React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.5951 4.50716C12.8673 4.19494 13.3411 4.16249 13.6533 4.43468L19.4929 9.52559C19.7286 9.73108 19.812 10.0613 19.7023 10.3541C19.5926 10.6469 19.3127 10.8409 19 10.8409H5C4.58579 10.8409 4.25 10.5051 4.25 10.0909C4.25 9.67671 4.58579 9.34092 5 9.34092H16.9984L12.6676 5.56534C12.3554 5.29315 12.3229 4.81938 12.5951 4.50716Z", fill: "#3E3F58" }),
React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.4049 19.4928C11.1327 19.8051 10.6589 19.8375 10.3467 19.5653L4.50715 14.4744C4.27144 14.2689 4.18796 13.9387 4.29768 13.6459C4.40741 13.3531 4.68729 13.1591 5 13.1591L19 13.1591C19.4142 13.1591 19.75 13.4949 19.75 13.9091C19.75 14.3233 19.4142 14.6591 19 14.6591L7.00161 14.6591L11.3324 18.4347C11.6446 18.7069 11.6771 19.1806 11.4049 19.4928Z", fill: "#3E3F58" })) },
React__default.createElement(MarryBabyText, { type: "bodytext-2", color: theme.mbColors.gray }, t('childCard.menu.switch'))),
React__default.createElement(Menu.Item, { onClick: onAdd, icon: React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
React__default.createElement("path", { d: "M11.8123 22.1251C8.24982 22.1251 5.15607 19.837 4.10577 16.4444C4.01202 16.1441 4.18048 15.8248 4.48077 15.731C4.78107 15.6373 5.1004 15.8057 5.19415 16.106C6.09357 19.0313 8.75665 20.981 11.8123 20.981C14.868 20.981 17.5311 19.0123 18.4305 16.106C18.5242 15.8057 18.8436 15.6373 19.1439 15.731C19.4442 15.8248 19.6126 16.1441 19.5189 16.4444C18.4686 19.837 15.3748 22.1251 11.8123 22.1251Z", fill: "#3E3F58" }),
React__default.createElement("path", { d: "M4.3125 16.875C2.75684 16.875 1.5 15.6182 1.5 14.0625C1.5 12.5244 2.73779 11.2881 4.25684 11.25C4.96875 9.33691 6.41309 7.72559 8.26904 6.82471C8.55029 6.69434 8.88721 6.80566 9.01904 7.08691C9.14941 7.36816 9.03809 7.70654 8.75684 7.83691C7.05029 8.66309 5.73779 10.1997 5.19434 12C5.11816 12.2622 4.85596 12.4307 4.57471 12.394C4.46191 12.375 4.38721 12.375 4.3125 12.375C3.375 12.375 2.625 13.125 2.625 14.0625C2.625 15 3.375 15.75 4.3125 15.75C4.38721 15.75 4.46191 15.75 4.55566 15.731C4.85596 15.6943 5.15625 15.8994 5.19434 16.1997C5.23096 16.5 5.02441 16.8003 4.72559 16.8369C4.57471 16.856 4.44434 16.875 4.3125 16.875ZM19.3125 16.875C19.1807 16.875 19.0503 16.856 18.8994 16.8369C18.6006 16.8003 18.375 16.5 18.4307 16.1997C18.4688 15.8994 18.769 15.6753 19.0693 15.731C19.1631 15.75 19.2378 15.75 19.3125 15.75C20.25 15.75 21 15 21 14.0625C21 13.125 20.25 12.375 19.3125 12.375C19.2378 12.375 19.1631 12.375 19.0693 12.394C18.7881 12.4307 18.5244 12.2622 18.4497 12C17.5503 9.07471 14.8872 7.125 11.8315 7.125C10.856 7.125 9.39404 6.46875 9.39404 4.6875C9.39404 4.36816 9.63721 4.125 9.95654 4.125C10.2744 4.125 10.519 4.36816 10.519 4.6875C10.519 5.96191 11.6997 6 11.8315 6C15.2432 6 18.2256 8.10059 19.3872 11.25C20.9062 11.2881 22.144 12.5244 22.144 14.0625C22.125 15.6182 20.8682 16.875 19.3125 16.875Z", fill: "#3E3F58" }),
React__default.createElement("circle", { cx: "11.8125", cy: "17.8125", r: "0.9375", fill: "#3E3F58" }),
React__default.createElement("path", { d: "M16.0938 13.1694C15.897 13.0702 15.6596 13.1484 15.5592 13.343C15.5561 13.3488 15.2533 13.9219 14.7187 13.9219C14.1841 13.9219 13.8814 13.3488 13.8799 13.3453C13.781 13.148 13.5421 13.069 13.3452 13.1671C13.1483 13.2655 13.0689 13.5048 13.167 13.7017C13.188 13.7434 13.6876 14.7188 14.7187 14.7188C15.7499 14.7188 16.2495 13.7433 16.2705 13.7017C16.3685 13.5056 16.2892 13.2686 16.0938 13.1694Z", fill: "#3E3F58" }),
React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.1344 13.0892L16.1346 13.0893C16.3737 13.2108 16.4714 13.5014 16.351 13.7421L16.3509 13.7425C16.3382 13.7675 16.2027 14.0317 15.9361 14.2906C15.6691 14.55 15.2651 14.809 14.7188 14.809C14.1725 14.809 13.7685 14.55 13.5014 14.2906C13.2349 14.0317 13.0994 13.7675 13.0867 13.7424L13.0865 13.742L13.0865 13.742C12.9664 13.5009 13.0635 13.2075 13.305 13.0867L13.3051 13.0867C13.5463 12.9666 13.8392 13.0633 13.9604 13.3051L13.9625 13.3094L13.9625 13.3094C13.9628 13.31 13.9635 13.3112 13.9646 13.313C13.9776 13.3355 14.0457 13.4532 14.1633 13.5717C14.2976 13.707 14.4853 13.8321 14.7188 13.8321C14.9522 13.8321 15.1399 13.707 15.2744 13.5714C15.3411 13.5042 15.3925 13.4366 15.4274 13.3854C15.4448 13.3598 15.458 13.3386 15.4667 13.3238C15.4711 13.3164 15.4744 13.3106 15.4766 13.3068L15.4797 13.3011C15.6028 13.0634 15.8935 12.9678 16.1344 13.0892ZM13.8799 13.3455C13.8814 13.349 14.1841 13.9221 14.7188 13.9221C15.2517 13.9221 15.5543 13.3525 15.5592 13.3432L15.5592 13.3431C15.6597 13.1486 15.897 13.0704 16.0939 13.1696C16.2892 13.2688 16.3686 13.5058 16.2705 13.7019C16.2495 13.7435 15.7499 14.719 14.7188 14.719C13.6877 14.719 13.1881 13.7435 13.167 13.7019C13.069 13.505 13.1484 13.2657 13.3453 13.1672C13.5422 13.0692 13.7811 13.1482 13.8799 13.3455Z", fill: "#3E3F58" }),
React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.5094 13.0893L10.5091 13.0892C10.2682 12.9678 9.97759 13.0634 9.85442 13.3011L9.85131 13.3068C9.84916 13.3106 9.84588 13.3164 9.8415 13.3238C9.83273 13.3386 9.81958 13.3598 9.80218 13.3854C9.76727 13.4366 9.71585 13.5042 9.6492 13.5714C9.51469 13.707 9.327 13.8321 9.09355 13.8321C8.86008 13.8321 8.67238 13.707 8.53807 13.5717C8.47152 13.5047 8.42025 13.4372 8.38558 13.3864C8.35996 13.3488 8.34478 13.3223 8.33921 13.3126L8.33682 13.3085L8.33512 13.3051C8.21396 13.0633 7.92186 12.9667 7.68003 13.0866L7.67978 13.0867C7.43828 13.2075 7.34115 13.5009 7.46124 13.742L7.46147 13.7424C7.47414 13.7675 7.60963 14.0317 7.87619 14.2906C8.14326 14.55 8.54722 14.809 9.09355 14.809C9.63987 14.809 10.0438 14.55 10.3109 14.2906C10.5775 14.0317 10.713 13.7675 10.7256 13.7425L10.7258 13.7421C10.8462 13.5014 10.7484 13.2108 10.5094 13.0893ZM9.93396 13.3432L9.934 13.3431C10.0062 13.2033 10.1491 13.1235 10.297 13.1266C10.1492 13.1236 10.0064 13.2033 9.93422 13.3431L9.93419 13.3432C9.92921 13.3526 9.62669 13.9221 9.09377 13.9221C9.08851 13.9221 9.08327 13.9221 9.07806 13.922C9.0832 13.9221 9.08836 13.9221 9.09355 13.9221C9.62649 13.9221 9.92901 13.3525 9.93396 13.3432ZM9.06061 14.7186C8.0518 14.6982 7.56261 13.7431 7.5418 13.7019C7.44375 13.505 7.52313 13.2657 7.72002 13.1672C7.7803 13.1373 7.84434 13.1239 7.90705 13.1253C7.84441 13.1239 7.78045 13.1374 7.72024 13.1672C7.52335 13.2657 7.44397 13.505 7.54203 13.7019C7.56283 13.7431 8.05195 14.6981 9.06061 14.7186Z", fill: "#3E3F58" }),
React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.8 2.3999C19.9144 2.3999 20.0071 2.49262 20.0071 2.60698V3.99282H21.3929C21.5073 3.99282 21.6 4.08554 21.6 4.1999C21.6 4.31427 21.5073 4.40698 21.3929 4.40698H20.0071V5.79282C20.0071 5.90719 19.9144 5.9999 19.8 5.9999C19.6856 5.9999 19.5929 5.90719 19.5929 5.79282V4.40698H18.2071C18.0927 4.40698 18 4.31427 18 4.1999C18 4.08554 18.0927 3.99282 18.2071 3.99282H19.5929V2.60698C19.5929 2.49262 19.6856 2.3999 19.8 2.3999Z", fill: "#3E3F58" }),
React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.2929 2.60718C19.2929 2.32712 19.5199 2.1001 19.8 2.1001C20.08 2.1001 20.307 2.32712 20.307 2.60718V3.69302H21.3929C21.6729 3.69302 21.9 3.92005 21.9 4.2001C21.9 4.48015 21.6729 4.70718 21.3929 4.70718H20.307V5.79302C20.307 6.07307 20.08 6.3001 19.8 6.3001C19.5199 6.3001 19.2929 6.07307 19.2929 5.79302V4.70718H18.207C17.927 4.70718 17.7 4.48015 17.7 4.2001C17.7 3.92005 17.927 3.69302 18.207 3.69302H19.2929V2.60718Z", fill: "#3E3F58" })) },
React__default.createElement(MarryBabyText, { type: "bodytext-2", color: theme.mbColors.gray }, t('childCard.menu.add'))),
React__default.createElement(Menu.Item, { onClick: onRemove, icon: React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.6094 2.61873C11.0508 2.44123 11.5233 2.3501 12 2.3501C12.4767 2.3501 12.9491 2.44123 13.3905 2.61873C13.832 2.79625 14.2343 3.05692 14.5741 3.38678C14.9139 3.71668 15.1845 4.10937 15.3695 4.54295C15.4685 4.77508 15.5419 5.01633 15.5887 5.2626H16.9895C18.4406 5.2626 19.65 6.40947 19.65 7.86442V8.01078C19.65 8.89985 19.1605 9.68128 18.4237 10.1037C18.884 10.8243 19.2029 11.64 19.3437 12.5139L19.3813 12.7472C19.5681 13.9067 19.4973 15.0915 19.1738 16.2218L19.0562 16.6329C18.3288 19.1745 16.1665 21.0699 13.5141 21.522C12.5123 21.6928 11.4876 21.6928 10.4858 21.522C7.83339 21.0699 5.67109 19.1745 4.94377 16.6329L4.82611 16.2218C4.50265 15.0915 4.43185 13.9067 4.61867 12.7472L4.65627 12.5139C4.79707 11.64 5.11599 10.8243 5.57625 10.1037C4.83944 9.68128 4.34998 8.89985 4.34998 8.01078V7.86442C4.34998 6.40947 5.55937 5.2626 7.01043 5.2626H8.41124C8.45805 5.01633 8.53144 4.77508 8.63048 4.54295C8.81547 4.10937 9.08608 3.71668 9.42589 3.38678C9.76565 3.05692 10.168 2.79625 10.6094 2.61873ZM9.74907 5.2626L14.2509 5.2626C14.2288 5.19175 14.2031 5.12183 14.1738 5.05312C14.0572 4.77998 13.8859 4.53053 13.6685 4.31952C13.4511 4.10848 13.192 3.94008 12.9055 3.82486C12.619 3.70963 12.3112 3.6501 12 3.6501C11.6887 3.6501 11.381 3.70963 11.0944 3.82486C10.8079 3.94008 10.5488 4.10848 10.3314 4.31952C10.1141 4.53053 9.94273 4.77998 9.8262 5.05311C9.79688 5.12183 9.77115 5.19175 9.74907 5.2626ZM7.01043 6.5626C6.2408 6.5626 5.64998 7.16345 5.64998 7.86442V8.01078C5.64998 8.53694 6.03782 9.01141 6.60612 9.11574C6.65027 9.12384 6.69443 9.13185 6.73861 9.13975C6.73934 9.13988 6.74007 9.14001 6.7408 9.14014C6.9188 9.17198 7.09704 9.20218 7.27549 9.23076C10.5824 9.76029 13.9603 9.73008 17.2592 9.14014C17.2597 9.14004 17.2603 9.13994 17.2608 9.13984C17.3052 9.13191 17.3495 9.12388 17.3938 9.11574C17.9621 9.01141 18.35 8.53694 18.35 8.01078V7.86442C18.35 7.16345 17.7591 6.5626 16.9895 6.5626H7.01043ZM6.89224 10.4854C6.40537 11.1346 6.07257 11.8962 5.93971 12.7207L5.90212 12.954C5.74569 13.9249 5.80489 14.917 6.07594 15.8642L6.19359 16.2753C6.77869 18.3198 8.5277 19.8695 10.7042 20.2405C11.5615 20.3866 12.4385 20.3866 13.2957 20.2405C15.4722 19.8695 17.2212 18.3198 17.8063 16.2753L17.924 15.8642C18.1951 14.917 18.2543 13.9249 18.0978 12.954L18.0602 12.7207C17.9274 11.8962 17.5946 11.1346 17.1077 10.4854C17.0485 10.4953 16.9893 10.5049 16.93 10.5144C13.6061 11.0467 10.2137 11.037 6.89224 10.4854ZM9.34998 16.5918V12.7084C9.34998 12.3495 9.64099 12.0584 9.99998 12.0584C10.359 12.0584 10.65 12.3495 10.65 12.7084V16.5918C10.65 16.9508 10.359 17.2418 9.99998 17.2418C9.64099 17.2418 9.34998 16.9508 9.34998 16.5918ZM14 12.0584C14.359 12.0584 14.65 12.3495 14.65 12.7084V16.5918C14.65 16.9508 14.359 17.2418 14 17.2418C13.641 17.2418 13.35 16.9508 13.35 16.5918V12.7084C13.35 12.3495 13.641 12.0584 14 12.0584Z", fill: "#3E3F58" })) },
React__default.createElement(MarryBabyText, { type: "bodytext-2", color: theme.mbColors.red }, t('childCard.menu.remove', { name }))))) : (React__default.createElement(StyledChildCardMenu, { width: 250 },
React__default.createElement(Menu.Item, { onClick: onEdit, icon: React__default.createElement("svg", { width: "16", height: "17", viewBox: "0 0 16 17", fill: "none" },
React__default.createElement("path", { d: "M12.7812 1.83301C12.2987 1.83301 11.8162 2.01676 11.4479 2.38509L10.6667 3.16634L13.3333 5.83301L14.1146 5.05176C14.8506 4.31576 14.8506 3.12176 14.1146 2.38509C13.7463 2.01676 13.2638 1.83301 12.7812 1.83301ZM9.66667 4.16634L2 11.833V14.4997H4.66667L12.3333 6.83301L9.66667 4.16634Z", fill: "#595959" })) },
React__default.createElement(Text$1, { size: "p2", color: theme.colors.gray800 }, t('childCard.menu.edit', { name }))),
React__default.createElement(Menu.Item, { onClick: onSwitch, icon: React__default.createElement("svg", { width: "16", height: "17", viewBox: "0 0 16 17", fill: "none" },
React__default.createElement("path", { d: "M8 2.5C4.9478 2.5 2.4204 4.79359 2.05078 7.7513C2.03763 7.83928 2.04222 7.929 2.06428 8.01518C2.08634 8.10136 2.12542 8.18226 2.17922 8.2531C2.23303 8.32394 2.30046 8.3833 2.37756 8.42768C2.45465 8.47206 2.53985 8.50057 2.62813 8.51152C2.71642 8.52247 2.806 8.51564 2.8916 8.49143C2.9772 8.46723 3.05709 8.42614 3.12657 8.37059C3.19605 8.31503 3.2537 8.24613 3.29615 8.16795C3.33859 8.08978 3.36496 8.00389 3.3737 7.91536C3.66141 5.61307 5.61354 3.83333 8 3.83333C9.34288 3.83333 10.5434 4.39987 11.3919 5.30339L10.0977 6.59766C9.96766 6.72766 9.96766 6.93901 10.0977 7.06901C10.1623 7.13434 10.248 7.16667 10.3333 7.16667H13.3333C13.5101 7.16667 13.6797 7.09643 13.8047 6.9714C13.9298 6.84638 14 6.67681 14 6.5V3.5C14 3.41467 13.967 3.32966 13.9023 3.26432C13.7723 3.13432 13.561 3.13432 13.431 3.26432L12.3359 4.35938C11.2437 3.21415 9.7037 2.5 8 2.5ZM13.2943 8.49089C13.1292 8.48959 12.9695 8.54959 12.8461 8.65928C12.7227 8.76896 12.6444 8.92053 12.6263 9.08464C12.3386 11.3869 10.3865 13.1667 8 13.1667C6.65713 13.1667 5.45884 12.5994 4.60938 11.6953L5.90234 10.4023C6.03234 10.2723 6.03234 10.061 5.90234 9.93099C5.83768 9.86566 5.752 9.83333 5.66667 9.83333H2.66667C2.48986 9.83333 2.32029 9.90357 2.19526 10.0286C2.07024 10.1536 2 10.3232 2 10.5V13.5C2 13.5853 2.03299 13.6703 2.09766 13.7357C2.22766 13.8657 2.43901 13.8657 2.56901 13.7357L3.66536 12.6393C4.75711 13.7836 6.29696 14.5 8 14.5C11.0522 14.5 13.5796 12.2064 13.9492 9.2487C13.9622 9.1548 13.955 9.05922 13.928 8.96833C13.9011 8.87745 13.8552 8.79334 13.7932 8.72163C13.7312 8.64991 13.6546 8.59224 13.5686 8.55245C13.4826 8.51266 13.3891 8.49167 13.2943 8.49089Z", fill: "#595959" })) },
React__default.createElement(Text$1, { size: "p2", color: theme.colors.gray800 }, t('childCard.menu.switch'))),
React__default.createElement(Menu.Item, { onClick: onAdd, icon: React__default.createElement("svg", { width: "16", height: "17", viewBox: "0 0 16 17", fill: "none" },
React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.9564 8.56545C15.7745 7.46727 14.9673 6.57273 13.9127 6.26C13.5273 5.44545 12.9818 4.73273 12.32 4.14364C11.1709 3.11818 9.65818 2.5 8 2.5C6.34182 2.5 4.82909 3.11818 3.68 4.14364C3.01091 4.73273 2.46545 5.45273 2.08727 6.26C1.03273 6.57273 0.225455 7.46 0.0436364 8.56545C0.0145455 8.71818 0 8.87818 0 9.04545C0 9.21273 0.0145455 9.37273 0.0436364 9.52545C0.225455 10.6236 1.03273 11.5182 2.08727 11.8309C2.46545 12.6382 3.01091 13.3509 3.66545 13.9327C4.81455 14.9655 6.33455 15.5909 8 15.5909C9.66545 15.5909 11.1855 14.9655 12.3418 13.9327C12.9964 13.3509 13.5418 12.6309 13.92 11.8309C14.9673 11.5182 15.7745 10.6309 15.9564 9.52545C15.9855 9.37273 16 9.21273 16 9.04545C16 8.87818 15.9855 8.71818 15.9564 8.56545ZM6.18182 7.04545C5.67974 7.04545 5.27273 7.45247 5.27273 7.95455C5.27273 8.45662 5.67974 8.86364 6.18182 8.86364C6.6839 8.86364 7.09091 8.45662 7.09091 7.95455C7.09091 7.45247 6.6839 7.04545 6.18182 7.04545ZM9.81818 7.04545C9.3161 7.04545 8.90909 7.45247 8.90909 7.95455C8.90909 8.45662 9.3161 8.86364 9.81818 8.86364C10.3203 8.86364 10.7273 8.45662 10.7273 7.95455C10.7273 7.45247 10.3203 7.04545 9.81818 7.04545ZM5.01821 10.5H10.9818C11.1128 10.5 11.2073 10.6455 11.1491 10.7691C10.5455 11.9109 9.36002 12.6818 8.00002 12.6818C6.64002 12.6818 5.45457 11.9109 4.85093 10.7691C4.78548 10.6455 4.88002 10.5 5.01821 10.5ZM12.9538 10.4875C12.9991 10.4938 13.0435 10.5 13.0909 10.5C13.8909 10.5 14.5455 9.84545 14.5455 9.04545C14.5455 8.24545 13.8909 7.59091 13.0909 7.59091C13.0435 7.59091 12.9991 7.5971 12.9538 7.60343C12.9297 7.60679 12.9053 7.6102 12.88 7.61273C12.7345 7.12545 12.5236 6.67455 12.2545 6.26C11.3455 4.87091 9.78182 3.95455 8 3.95455C6.21818 3.95455 4.65455 4.87091 3.74545 6.26C3.47636 6.67455 3.26545 7.12545 3.12 7.61273C3.09473 7.6102 3.07033 7.60679 3.0462 7.60343C3.0009 7.5971 2.95654 7.59091 2.90909 7.59091C2.10909 7.59091 1.45455 8.24545 1.45455 9.04545C1.45455 9.84545 2.10909 10.5 2.90909 10.5C2.95654 10.5 3.0009 10.4938 3.0462 10.4875C3.07033 10.4841 3.09473 10.4807 3.12 10.4782C3.26545 10.9655 3.47636 11.4164 3.74545 11.8309C4.65455 13.22 6.21818 14.1364 8 14.1364C9.78182 14.1364 11.3455 13.22 12.2545 11.8309C12.5236 11.4164 12.7345 10.9655 12.88 10.4782C12.9053 10.4807 12.9297 10.4841 12.9538 10.4875Z", fill: "#595959" }),
React__default.createElement("path", { d: "M2.5 2V1C2.5 0.725 2.275 0.5 2 0.5C1.725 0.5 1.5 0.725 1.5 1V2H0.5C0.225 2 0 2.225 0 2.5C0 2.775 0.225 3 0.5 3H1.5V4C1.5 4.275 1.725 4.5 2 4.5C2.275 4.5 2.5 4.275 2.5 4V3H3.5C3.775 3 4 2.775 4 2.5C4 2.225 3.775 2 3.5 2H2.5Z", fill: "#595959" })) },
React__default.createElement(Text$1, { size: "p2", color: theme.colors.gray800 }, t('childCard.menu.add'))),
React__default.createElement(Menu.Item, { onClick: onRemove, icon: React__default.createElement("svg", { width: "16", height: "17", viewBox: "0 0 16 17", fill: "none" },
React__default.createElement("path", { d: "M6.66699 1.83301L6.00033 2.49967H3.33366C2.93366 2.49967 2.66699 2.76634 2.66699 3.16634C2.66699 3.56634 2.93366 3.83301 3.33366 3.83301H4.66699H11.3337H12.667C13.067 3.83301 13.3337 3.56634 13.3337 3.16634C13.3337 2.76634 13.067 2.49967 12.667 2.49967H10.0003L9.33366 1.83301H6.66699ZM3.33366 5.16634V13.833C3.33366 14.5663 3.93366 15.1663 4.66699 15.1663H11.3337C12.067 15.1663 12.667 14.5663 12.667 13.833V5.16634H3.33366ZM6.00033 6.49967C6.40033 6.49967 6.66699 6.76634 6.66699 7.16634V13.1663C6.66699 13.5663 6.40033 13.833 6.00033 13.833C5.60033 13.833 5.33366 13.5663 5.33366 13.1663V7.16634C5.33366 6.76634 5.60033 6.49967 6.00033 6.49967ZM10.0003 6.49967C10.4003 6.49967 10.667 6.76634 10.667 7.16634V13.1663C10.667 13.5663 10.4003 13.833 10.0003 13.833C9.60033 13.833 9.33366 13.5663 9.33366 13.1663V7.16634C9.33366 6.76634 9.60033 6.49967 10.0003 6.49967Z", fill: "#F44D2C" })) },
React__default.createElement(Text$1, { size: "p2", color: theme.colors.red600 }, t('childCard.menu.remove', { name })))))));
};
const renderChildAge = (age, t) => {
if (age) {
if (age.year < 1) {
if (age.month === 0) {
switch (age.week) {
case 0:
return t('childCard.age.oneWeek');
case 1:
return t('childCard.age.oneWeek');
default:
return t('childCard.age.week', { weeks: age.week });
}
}
if (age.month === 1) {
return t('childCard.age.oneMonth');
}
if (age.month > 1) {
return t('childCard.age.months', { month: age.month });
}
}
else if (age.year === 1) {
return t('childCard.age.months', { month: age.year * 12 + age.month });
}
else {
if (age.month === 0) {
return t('childCard.age.yearNoMonth', { year: age.year });
}
if (age.month > 0) {
return t('childCard.age.yearMonth', {
year: age.year,
month: age.month,
});
}
}
}
};
const ChildCard = ({ name, gender, age, isLoggedIn = false, showMenu = false, onEdit, onSwitch, onAdd, onRemove, className, siteType, }) => {
const { t } = useTranslations();
const [isMenuOpen, setIsMenuOpen] = useState(false);
const isMarryBaby = siteType === 'marryBaby';
return (React__default.createElement(StyledChildCard, { className: className, "data-theme": siteType },
isMarryBaby ? (React__default.createElement(React__default.Fragment, null,
React__default.createElement("div", { "data-testid": "gender" }, gender === Gender.Boy ? (React__default.createElement(BabyBoyMB, { "data-testid": "boy", id: "boy", size: 48 })) : (React__default.createElement(BabyGirlMB, { "data-testid": "girl", id: "girl", size: 48 }))),
React__default.createElement("div", { className: "information" },
React__default.createElement(MarryBabyText, { type: "subtitle-1", color: theme.mbColors.dark }, startCase(name) || t('childCard.noName')),
React__default.createElement("div", { className: "detail" },
React__default.createElement("div", null,
gender === Gender.Boy ? (React__default.createElement(GenderBoy, { size: 14 })) : (React__default.createElement(GenderGirl, { size: 14 })),
React__default.createElement(MarryBabyText, { type: "bodytext-2", color: theme.mbColors.gray }, t(gender === Gender.Girl ? 'childCard.girl' : 'childCard.boy'))),
React__default.createElement("div", null,
React__default.createElement(CalendarMB, { size: 20 }),
age && (React__default.createElement(MarryBabyText, { type: "bodytext-2", color: theme.mbColors.gray }, renderChildAge(age, t)))))))) : (React__default.createElement(React__default.Fragment, null,
React__default.createElement("div", { "data-testid": "gender" }, gender === Gender.Boy ? (React__default.createElement(Boy, { "data-testid": "boy", id: "boy" })) : (React__default.createElement(Girl, { "data-testid": "girl", id: "girl" }))),
React__default.createElement("div", { className: "information" },
React__default.createElement(Heading, { tag: "h5", fontWeight: "bold", color: theme.colors.gray800 }, startCase(name) || t('childCard.noName')),
React__default.createElement("div", { className: "detail" },
React__default.createElement("div", null,
gender === Gender.Boy ? React__default.createElement(GenderBoy, null) : React__default.createElement(GenderGirl, null),
React__default.createElement(Text, { size: "p3", color: theme.colors.gray800, style: { textTransform: 'capitalize' } }, t(gender === Gender.Girl ? 'childCard.girl' : 'childCard.boy'))),
React__default.createElement("div", null,
React__default.createElement(Calendar, { size: 16 }),
age && (React__default.createElement(Text, { size: "p3", color: theme.colors.gray800 }, renderChildAge(age, t)))))))),
showMenu && isLoggedIn && (React__default.createElement(StyledOption, null,
React__default.createElement(Kebab, { onClick: () => setIsMenuOpen((v) => !v) }),
isMenuOpen && (React__default.createElement(ChildCardMenu, { siteType: siteType, name: name, onClose: () => setIsMenuOpen(false), onEdit: () => {
setIsMenuOpen(false);
onEdit();
}, onSwitch: () => {
setIsMenuOpen(false);
onSwitch();
}, onAdd: () => {
setIsMenuOpen(false);
onAdd();
}, onRemove: () => {
setIsMenuOpen(false);
onRemove();
} }))))));
};
const emptyValue = (value, suffix) => {
return value && value !== 'NaN' ? value + ' ' + (suffix || '') : '--';
};
const BabyGrowthRecord = ({ measurementDate = new Date(), weight, height, head, onEdit, birthday, dateFormat = 'DD/MM/YYYY', siteType, }) => {
const { t } = useTranslations();
const isMarryBaby = siteType === 'marryBaby';
return (React__default.createElement(StyledBabyGrowthRecord, { onClick: onEdit },
React__default.createElement("div", { className: "time" },
isMarryBaby ? (React__default.createElement("svg", { width: "14", height: "16", viewBox: "0 0 14 16", fill: "none" },
React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.05257 0.762695C4.32181 0.762695 4.54007 0.980956 4.54007 1.2502V1.53122C4.60167 1.51424 4.66369 1.49824 4.72611 1.48326C6.2217 1.12422 7.77833 1.12422 9.27392 1.48326C9.33634 1.49824 9.39836 1.51424 9.45995 1.53122V1.2502C9.45995 0.980956 9.67821 0.762695 9.94745 0.762695C10.2167 0.762695 10.435 0.980956 10.435 1.2502V1.89841C12.0148 2.66392 13.1931 4.12969 13.6002 5.90621C13.9499 7.43197 13.9499 9.01971 13.6002 10.5455C13.0985 12.7345 11.426 14.4518 9.27392 14.9684C7.77833 15.3275 6.2217 15.3275 4.72611 14.9684C2.57399 14.4518 0.901521 12.7345 0.399789 10.5455C0.0500868 9.01971 0.0500868 7.43197 0.399789 5.90621C0.806964 4.12969 1.98518 2.66392 3.56507 1.89841V1.2502C3.56507 0.980956 3.78333 0.762695 4.05257 0.762695ZM3.56507 3.00938C2.88276 3.4302 2.31064 4.01866 1.90229 4.72184H12.0977C11.6894 4.01865 11.1173 3.4302 10.435 3.00938V3.1355C10.435 3.40474 10.2167 3.623 9.94745 3.623C9.67821 3.623 9.45995 3.40474 9.45995 3.1355V2.55069C9.32464 2.5049 9.18667 2.46501 9.04633 2.43132C7.70034 2.1082 6.29969 2.1082 4.9537 2.43132C4.81336 2.46501 4.67538 2.5049 4.54007 2.55069V3.1355C4.54007 3.40474 4.32181 3.623 4.05257 3.623C3.78333 3.623 3.56507 3.40474 3.56507 3.1355V3.00938ZM12.5322 5.69684H1.46788C1.42273 5.83649 1.38339 5.97898 1.35015 6.12403C1.0333 7.50643 1.0333 8.94525 1.35015 10.3277C1.77137 12.1654 3.17113 13.5924 4.9537 14.0204C6.29969 14.3435 7.70034 14.3435 9.04632 14.0204C10.8289 13.5924 12.2287 12.1654 12.6499 10.3276C12.9667 8.94525 12.9667 7.50643 12.6499 6.12403C12.6166 5.97898 12.5773 5.83649 12.5322 5.69684Z", fill: "#3E3F58" }))) : (React__default.createElement("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none" },
React__default.createElement("path", { d: "M5.64421 0.666016C5.27621 0.666016 4.97754 0.964682 4.97754 1.33268V1.99935H4.31087C3.57754 1.99935 2.97754 2.59935 2.97754 3.33268V12.666C2.97754 13.3993 3.57754 13.9993 4.31087 13.9993H13.6442C14.3775 13.9993 14.9775 13.3993 14.9775 12.666V3.33268C14.9775 2.59935 14.3775 1.99935 13.6442 1.99935H12.9775V1.33268C12.9775 0.964682 12.6789 0.666016 12.3109 0.666016C11.9429 0.666016 11.6442 0.964682 11.6442 1.33268V1.99935H6.31087V1.33268C6.31087 0.964682 6.01221 0.666016 5.64421 0.666016ZM4.31087 5.33268H13.6442V11.9993C13.6442 12.3673 13.3455 12.666 12.9775 12.666H4.97754C4.60954 12.666 4.31087 12.3673 4.31087 11.9993V5.33268Z", fill: "#8C8C8C" }))),
React__default.createElement(Text, { size: "p3", color: theme.colors.gray600 }, `${dayjs(measurementDate).format(dateFormat)} (${renderChildAge(ageGenerate(birthday, measurementDate), t)})`),
isMarryBaby ? (React__default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" },
React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.15119 1.29354C8.75527 0.689463 9.57457 0.350098 10.4289 0.350098C12.2078 0.350098 13.65 1.79223 13.65 3.5712C13.65 4.42549 13.3106 5.24479 12.7065 5.84886L11.9689 6.58652C11.9626 6.59307 11.9562 6.5995 11.9496 6.6058L8.78969 9.76569C7.00359 11.5518 4.76564 12.8189 2.31513 13.4315L1.55809 13.6208C0.846159 13.7988 0.201291 13.1539 0.379274 12.442L0.568533 11.6849C1.18116 9.23441 2.44827 6.99647 4.23437 5.21036L7.39433 2.0504C7.40058 2.04388 7.40696 2.0375 7.41346 2.03127L8.15119 1.29354ZM7.26672 4.01649L5.15361 6.1296C3.53411 7.7491 2.3852 9.77829 1.82972 12.0002L1.77301 12.227L1.99983 12.1703C4.22177 11.6149 6.25096 10.4659 7.87045 8.84645L9.98356 6.73334C9.34779 6.52953 8.76392 6.13743 8.31328 5.68678C7.86263 5.23613 7.47052 4.65226 7.26672 4.01649ZM11.1622 5.55469C10.5984 5.66895 9.85522 5.39025 9.23251 4.76754C8.6098 4.14483 8.3311 3.40165 8.44536 2.83784L9.07043 2.21278C9.43071 1.8525 9.91935 1.6501 10.4289 1.6501C11.4899 1.6501 12.35 2.5102 12.35 3.5712C12.35 4.08071 12.1476 4.56935 11.7873 4.92962L11.1622 5.55469Z", fill: "#3E3F58" }))) : (React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "edit-button" },
React__default.createElement("path", { d: "M12.7721 1.33398C12.2911 1.33398 11.8102 1.51773 11.443 1.88607L10.6643 2.66732L13.3224 5.33398L14.1011 4.55273C14.8348 3.81673 14.8348 2.62273 14.1011 1.88607C13.734 1.51773 13.253 1.33398 12.7721 1.33398ZM9.66748 3.66732L2.02539 11.334V14.0007H4.68351L12.3256 6.33398L9.66748 3.66732Z", fill: "#8C8C8C" })))),
React__default.createElement("div", { className: "record" },
React__default.createElement("div", { className: "record-item" },
isMarryBaby ? (React__default.createElement(MarryBabyText, { type: "bodytext-2", color: theme.mbColors.gray }, t('babyGrowth.weight'))) : (React__default.createElement("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none" },
React__default.createElement("path", { d: "M8.44401 9.86602C8.44401 9.57146 8.68279 9.33268 8.97734 9.33268C9.2719 9.33268 9.51068 9.57146 9.51068 9.86602V11.466C9.51068 11.7606 9.2719 11.9993 8.97734 11.9993C8.68279 11.9993 8.44401 11.7606 8.44401 11.466V9.86602Z", fill: "#8C8C8C" }),
React__default.createElement("path", { d: "M8.17595 3.05319C7.96767 3.26147 7.96767 3.59916 8.17595 3.80744L8.83592 4.46741C9.0442 4.67569 9.38189 4.67569 9.59017 4.46741C9.79844 4.25913 9.79844 3.92144 9.59017 3.71316L8.9302 3.05319C8.72192 2.84491 8.38423 2.84492 8.17595 3.05319Z", fill: "#8C8C8C" }),
React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.2941 3.66435C12.1261 1.98071 10.7053 0.666016 8.97738 0.666016C7.2495 0.666016 5.82868 1.9807 5.66067 3.66434L3.67054 3.86336C2.92499 3.93791 2.38724 4.61197 2.48017 5.35545L3.498 13.4981C3.5814 14.1653 4.1486 14.666 4.82104 14.666H13.1336C13.806 14.666 14.3732 14.1653 14.4567 13.4981L15.4745 5.35545C15.5674 4.61197 15.0297 3.93791 14.2841 3.86336L12.2941 3.66435ZM12.1607 4.991C11.7386 6.34768 10.473 7.33268 8.97738 7.33268C7.48176 7.33268 6.2162 6.34767 5.79403 4.99099L3.80321 5.19007L4.82104 13.3327L13.1336 13.3327L14.1514 5.19007L12.1607 4.991ZM10.9774 3.99935C10.9774 5.10392 10.0819 5.99935 8.97738 5.99935C7.87281 5.99935 6.97738 5.10392 6.97738 3.99935C6.97738 2.89478 7.87281 1.99935 8.97738 1.99935C10.0819 1.99935 10.9774 2.89478 10.9774 3.99935Z", fill: "#8C8C8C" }))),
React__default.createElement(Text, { size: "s3", color: theme.colors.gray800, weight: "semiBold" }, emptyValue(localizeNumberFormat(weight), 'kg'))),
React__default.createElement("div", { className: "record-item" },
isMarryBaby ? (React__default.createElement(MarryBabyText, { type: "bodytext-2", color: theme.mbColors.gray }, t('babyGrowth.height'))) : (React__default.createElement("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none" },
React__default.createElement("g", { clipPath: "url(#clip0_855_82991)" },
React__default.createElement("path", { d: "M12.6055 13.9993L12.6055 1.99935C12.6055 1.26602 12.0055 0.666016 11.2721 0.666016L5.9388 0.666015C5.20547 0.666015 4.60547 1.26602 4.60547 1.99935L4.60547 13.9993C4.60547 14.7327 5.20547 15.3327 5.9388 15.3327L11.2721 15.3327C12.0055 15.3327 12.6055 14.7327 12.6055 13.9993ZM5.9388 13.9993L5.9388 1.99935L11.2721 1.99935L11.2721 3.33268L8.60547 3.33268L8.60547 4.66602L11.2721 4.66602L11.2721 5.99935L8.60547 5.99935L8.60547 7.33268L11.2721 7.33268L11.2721 8.66602L8.60547 8.66601L8.60547 9.99935L11.2721 9.99935L11.2721 11.3327L8.60547 11.3327L8.60547 12.666L11.2721 12.666L11.2721 13.9993L5.9388 13.9993Z", fill: "#8C8C8C" })),
React__default.createEle