@hhgtech/hhg-components 1.29.460 → 1.29.461-beta-2

package/build/esm/{index-63c4e371.js → index-2fe1d2b9.js}

@@ -1,48 +1,48 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-55a9975c.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-e38967f1.js';
 import React__default, { useContext, useState, useCallback, useEffect, useMemo, useRef } from 'react';
-import { i as isInternalLink, V as VideoItem, L as LanguageSwitcher } from './index-16e6f0c9.js';
-import { L as LOCALE_SPECS, S as STATIC_PAGES, a as ZINDEX_HEADER, c as VIDEO_LOCALES, d as LOCALE_HAS_COMMUNITY_SITE, e as CARE_LOCALES } from './index-a6f2da39.js';
-import { e as normalizeLink, n as normalizeLinkSlash, g as getCurrentBaseUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain, d as getCareApiDomain } from './normalizeLink-527f8dae.js';
-import { a as formatCommunity, b as formatPost } from './dataTransform-4c8efee1.js';
+import { i as isInternalLink, V as VideoItem, L as LanguageSwitcher } from './index-6c896b67.js';
+import { L as LOCALE_SPECS, S as STATIC_PAGES, a as ZINDEX_HEADER, c as VIDEO_LOCALES, d as LOCALE_HAS_COMMUNITY_SITE, e as CARE_LOCALES } from './index-067486f6.js';
+import { e as normalizeLink, n as normalizeLinkSlash, g as getCurrentBaseUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain, d as getCareApiDomain } from './normalizeLink-5b73b7eb.js';
+import { a as formatCommunity, b as formatPost } from './dataTransform-aa2a7860.js';
 import { Close, Logo } from '@hhgtech/icons/core';
-import './translationsContext-434ee1cb.js';
+import './translationsContext-374ba95c.js';
 import styled from '@emotion/styled';
-import { I as Input } from './index-252f817f.js';
+import { I as Input } from './index-00525a27.js';
 import { theme } from './miscTheme.js';
-import { a as NavigationContext, u as useCSSFocusPopupHelper, N as NavigationProfileButton, b as NavigationProvider } from './index-af6129c1.js';
+import { a as NavigationContext, u as useCSSFocusPopupHelper, N as NavigationProfileButton, b as NavigationProvider } from './index-77cac3a0.js';
 import { ArrowRight, ChatAi } from '@hhgtech/icons/other';
 import { createStyles, Box, Indicator, useMantineTheme, clsx } from '@mantine/core';
-import { L as Logo$1 } from './index-23bbfdc4.js';
+import { L as Logo$1 } from './index-680cfdc2.js';
 import throttle from 'lodash/throttle';
 import '@mantine/dates';
-import { V as VideoType } from './index-8b9d96bf.js';
-import { C as CommonGAssets } from './index-adf0ca02.js';
-import './index-969c4c87.js';
-import { T as Text } from './index-5fc34d92.js';
-import { B as Button } from './index-d67e1ca2.js';
-import './index-d078f707.js';
-import './index.styles-61d9a229.js';
+import { V as VideoType } from './index-d3df0429.js';
+import { C as CommonGAssets } from './index-a1b0dbcb.js';
+import './index-19cdad63.js';
+import { T as Text } from './index-036101ef.js';
+import { B as Button } from './index-0fbbf33d.js';
+import './index-6ec3a41b.js';
+import './index.styles-4d912441.js';
 import '@mantine/hooks';
-import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-ee799b8a.js';
-import './index-84fdada4.js';
-import { L as LOCALISED_SLUGS } from './constants-4d005dcf.js';
-import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-ff234e40.js';
-import { L as LOCALIZED_SLUGS } from './constants-b674bf3c.js';
-import { u as useTranslations } from './index-c2136215.js';
-import { H as Heading } from './index-48097de4.js';
-import { I as Indicator$1 } from './index-874d7339.js';
-import { u as useIsInit } from './useIsInit-99490c9c.js';
+import { g as getBoundariesFromMediaQueryKey, M as MediaQueries } from './utils-e621bb20.js';
+import './index-242305da.js';
+import { L as LOCALISED_SLUGS } from './constants-af742196.js';
+import { u as useSSOV2Store, I as IS_SSOV2_ENABLED } from './store-eeca5ea5.js';
+import { L as LOCALIZED_SLUGS } from './constants-1b89951c.js';
+import { u as useTranslations } from './index-cbeddfac.js';
+import { H as Heading } from './index-5aa4f1e0.js';
+import { I as Indicator$1 } from './index-a951d4c9.js';
+import { u as useIsInit } from './useIsInit-ea60c0d2.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
-import { B as Button$1 } from './index-0bc515ca.js';
+import { B as Button$1 } from './index-937f88f6.js';
 import formatString from 'string-format';
 import { domainLocales } from './constantsDomainLocales.js';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { U as UserAvatar } from './index-9ef35f4c.js';
-import { C as Container } from './index-e61f4851.js';
-import { L as LOCALE } from './Locale-36a93bd1.js';
+import { U as UserAvatar } from './index-ec617d0b.js';
+import { C as Container } from './index-e8b7155c.js';
+import { L as LOCALE } from './Locale-b43cce5d.js';
 import debounce from 'lodash/debounce';
-import { g as getDataWithCache } from './core-d189c41f.js';
+import { g as getDataWithCache } from './core-8e143d6e.js';
 
 const StyleInput = styled(Input) `
   .mantine-Input-input {

package/build/esm/{index-885fa2e5.js → index-2ff24c04.js}

@@ -1,12 +1,12 @@
 import React__default, { useState, useEffect, useContext, useRef } from 'react';
-import { H as Heading } from './index-48097de4.js';
-import { M as MediaQueries, t as toggleNoScroll } from './utils-ee799b8a.js';
-import { u as useTranslations } from './index-c2136215.js';
-import { T as TogetherComponentGlobalContext } from './utils-490086f3.js';
+import { H as Heading } from './index-5aa4f1e0.js';
+import { M as MediaQueries, t as toggleNoScroll } from './utils-e621bb20.js';
+import { u as useTranslations } from './index-cbeddfac.js';
+import { T as TogetherComponentGlobalContext } from './utils-fa34fa4d.js';
 import { Portal } from '@mantine/core';
-import { T as Text } from './index-5fc34d92.js';
+import { T as Text } from './index-036101ef.js';
 import styled from '@emotion/styled';
-import { _ as __rest } from './tslib.es6-55a9975c.js';
+import { _ as __rest } from './tslib.es6-e38967f1.js';
 import { theme } from './miscTheme.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 

package/build/esm/{index-2dd17abc.js → index-317af026.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
-import { B as Button } from './index-0bc515ca.js';
-import { u as useTranslations } from './index-c2136215.js';
+import { B as Button } from './index-937f88f6.js';
+import { u as useTranslations } from './index-cbeddfac.js';
 import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';

package/build/esm/{index-d8d498c2.js → index-3433a666.js}

@@ -1,25 +1,25 @@
-import { _ as __rest } from './tslib.es6-55a9975c.js';
+import { _ as __rest } from './tslib.es6-e38967f1.js';
 import React__default, { createContext, useContext, useRef, useMemo, useState, useEffect } from 'react';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { u as useHealthToolsCache } from './useHealthToolCache-69c70c5e.js';
-import { u as useTranslations } from './index-c2136215.js';
-import { C as CommonGAssets } from './index-adf0ca02.js';
-import { H as HEALTH_TOOL_TYPE } from './constants-5a44eb8b.js';
-import { G as GenderOptionControl } from './index-3805ffaa.js';
-import { I as Input, S as Select } from './index-252f817f.js';
-import { D as DatePicker } from './index-7712c77c.js';
-import './index-5fc34d92.js';
-import './index-d67e1ca2.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-82475da3.js';
+import { u as useTranslations } from './index-cbeddfac.js';
+import { C as CommonGAssets } from './index-a1b0dbcb.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-0fc46527.js';
+import { G as GenderOptionControl } from './index-18119d96.js';
+import { I as Input, S as Select } from './index-00525a27.js';
+import { D as DatePicker } from './index-e2b1743f.js';
+import './index-036101ef.js';
+import './index-0fbbf33d.js';
 import '@mantine/core';
-import './index-d078f707.js';
-import './index.styles-61d9a229.js';
+import './index-6ec3a41b.js';
+import './index.styles-4d912441.js';
 import '@mantine/hooks';
-import './index-969c4c87.js';
-import './utils-ee799b8a.js';
-import './index-84fdada4.js';
-import './index-a6f2da39.js';
-import { C as CardWrapperContext } from './context-24db2ac0.js';
-import { H as HealthToolFormWrapper } from './index-418b0547.js';
+import './index-19cdad63.js';
+import './utils-e621bb20.js';
+import './index-242305da.js';
+import './index-067486f6.js';
+import { C as CardWrapperContext } from './context-cce613d9.js';
+import { H as HealthToolFormWrapper } from './index-a51877c3.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 const ThrFormContext = createContext({});

package/build/esm/{index-51dcd1f7.js → index-345efbfe.js}

@@ -1,27 +1,27 @@
 import React__default from 'react';
-import { C as Container } from './index-e61f4851.js';
+import { C as Container } from './index-e8b7155c.js';
 import dayjs from 'dayjs';
-import './index-a6f2da39.js';
-import './index-252f817f.js';
+import './index-067486f6.js';
+import './index-00525a27.js';
 import { Flex, Stack, Box } from '@mantine/core';
 import '@mantine/dates';
-import './index-8b9d96bf.js';
-import './index-adf0ca02.js';
-import './index-969c4c87.js';
-import { T as Text } from './index-5fc34d92.js';
-import './index-d67e1ca2.js';
-import './index-d078f707.js';
-import './index.styles-61d9a229.js';
-import './translationsContext-434ee1cb.js';
+import './index-d3df0429.js';
+import './index-a1b0dbcb.js';
+import './index-19cdad63.js';
+import { T as Text } from './index-036101ef.js';
+import './index-0fbbf33d.js';
+import './index-6ec3a41b.js';
+import './index.styles-4d912441.js';
+import './translationsContext-374ba95c.js';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-ee799b8a.js';
-import './index-84fdada4.js';
-import { u as useScreenSize } from './index-c1eae0d9.js';
+import { M as MediaQueries } from './utils-e621bb20.js';
+import './index-242305da.js';
+import { u as useScreenSize } from './index-65efb21a.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 import { domainLocales } from './constantsDomainLocales.js';
-import { L as Logo } from './index-23bbfdc4.js';
-import { M as MarryBabyText } from './index-0d0ce4ba.js';
+import { L as Logo } from './index-680cfdc2.js';
+import { M as MarryBabyText } from './index-9e61ebc6.js';
 
 const StyledFooter$1 = styled.footer `
   background-color: #1b3250;

package/build/esm/{index-32791761.js → index-3dc67ab3.js}

@@ -1,6 +1,6 @@
-import { c as cookie } from './index-150a83d9.js';
-import { B as BEARER_TOKEN_COOKIE } from './index-a6f2da39.js';
-import { N as NodeIntentType } from './index-8b9d96bf.js';
+import { c as cookie } from './index-9fb57d2d.js';
+import { B as BEARER_TOKEN_COOKIE } from './index-067486f6.js';
+import { N as NodeIntentType } from './index-d3df0429.js';
 import Cookies from 'js-cookie';
 import { v4 } from 'uuid';
 import { isProduction } from './constantsIsProduction.js';

package/build/esm/{index-adbe427d.js → index-434333bb.js}

@@ -1,53 +1,53 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-55a9975c.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-e38967f1.js';
 import React__default, { createContext, useState, useContext, useEffect } from 'react';
-import { T as Tabs } from './index-84fdada4.js';
-import { L as Loading } from './index-dbf6ff4d.js';
-import './index-8b9d96bf.js';
-import { g as formatArticle } from './dataTransform-4c8efee1.js';
+import { T as Tabs } from './index-242305da.js';
+import { L as Loading } from './index-c998e131.js';
+import './index-d3df0429.js';
+import { g as formatArticle } from './dataTransform-aa2a7860.js';
 import { PATHS } from './togetherApiPaths.js';
-import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath } from './utils-490086f3.js';
+import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath } from './utils-fa34fa4d.js';
 import { Minus, Plus } from '@hhgtech/icons/core';
 import { Collapse } from '@mantine/core';
-import { C as CardAuthor } from './index-4a89e722.js';
-import { L as LOCALE } from './Locale-36a93bd1.js';
+import { C as CardAuthor } from './index-ecff4c1e.js';
+import { L as LOCALE } from './Locale-b43cce5d.js';
 import '@hhgtech/icons/other';
-import './index-d67e1ca2.js';
-import './shared-02299712.js';
-import './index-d078f707.js';
-import './index-5fc34d92.js';
-import './index-c2136215.js';
-import './translationsContext-434ee1cb.js';
-import './index-0bc515ca.js';
-import './index-150a83d9.js';
+import './index-0fbbf33d.js';
+import './shared-6745a9d5.js';
+import './index-6ec3a41b.js';
+import './index-036101ef.js';
+import './index-cbeddfac.js';
+import './translationsContext-374ba95c.js';
+import './index-937f88f6.js';
+import './index-9fb57d2d.js';
 import './miscCookieHelper.js';
 import 'slugify';
 import './constantsIsProduction.js';
 import 'string-format';
-import './constants-5a44eb8b.js';
+import './constants-0fc46527.js';
 import 'dayjs';
 import 'dayjs/plugin/relativeTime';
-import './utils-ee799b8a.js';
-import './index-6c4b5d5f.js';
-import './paths-00dce142.js';
-import './constants-b674bf3c.js';
-import './index-a6f2da39.js';
+import './utils-e621bb20.js';
+import './index-01d00259.js';
+import './paths-0a225375.js';
+import './constants-1b89951c.js';
+import './index-067486f6.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsDomainLocales.js';
 import './constantsRiskScreener.js';
-import './index-993ebad1.js';
+import './index-6a5de9eb.js';
 import './miscTheme.js';
-import './WhatsApp-ce906b27.js';
-import './Spinner-c5448552.js';
-import './index-9ef35f4c.js';
+import './WhatsApp-0fa99201.js';
+import './Spinner-01f8f8c2.js';
+import './index-ec617d0b.js';
 import '@emotion/styled';
-import './index-c1eae0d9.js';
-import './index-adf0ca02.js';
-import './index-2dd17abc.js';
+import './index-65efb21a.js';
+import './index-a1b0dbcb.js';
+import './index-317af026.js';
 import '@emotion/react';
-import './index-48097de4.js';
-import './index-e7da8887.js';
-import './index.styles-61d9a229.js';
+import './index-5aa4f1e0.js';
+import './index-b2bee8a1.js';
+import './index.styles-4d912441.js';
 
 const ProfileDetailContext = createContext({});
 

package/build/esm/{index-19bf7633.js → index-4930efeb.js}

@@ -1,51 +1,52 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-55a9975c.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-e38967f1.js';
 import * as React from 'react';
 import React__default, { useRef, useState, useEffect, useImperativeHandle, useMemo, Fragment, useCallback, forwardRef, memo, createContext, useContext } from 'react';
-import { R as Radio } from './index-252f817f.js';
+import { R as Radio } from './index-00525a27.js';
 import { Stack, Group, createStyles, getStylesRef, Box, Badge, rem, Divider, clsx, Button as Button$2, AspectRatio, Grid } from '@mantine/core';
 import '@mantine/dates';
-import { L as LOCALE_SPECS, F as FAVICONS } from './index-a6f2da39.js';
-import './index-8b9d96bf.js';
-import { C as CommonGAssets } from './index-adf0ca02.js';
-import './index-969c4c87.js';
-import { T as Text } from './index-5fc34d92.js';
-import { B as Button$1 } from './index-d67e1ca2.js';
-import './index-d078f707.js';
-import './index.styles-61d9a229.js';
-import './translationsContext-434ee1cb.js';
+import { L as LOCALE_SPECS, F as FAVICONS } from './index-067486f6.js';
+import './index-d3df0429.js';
+import { C as CommonGAssets } from './index-a1b0dbcb.js';
+import './index-19cdad63.js';
+import { T as Text } from './index-036101ef.js';
+import { B as Button$1 } from './index-0fbbf33d.js';
+import './index-6ec3a41b.js';
+import './index.styles-4d912441.js';
+import './translationsContext-374ba95c.js';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-ee799b8a.js';
-import './index-84fdada4.js';
-import { i as isInternalLink } from './index-16e6f0c9.js';
+import { M as MediaQueries } from './utils-e621bb20.js';
+import './index-242305da.js';
+import { i as isInternalLink } from './index-6c896b67.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { C as Checkbox, a as PureInput, P as Pagination$1, b as SearchInput, I as ImageWrapV2 } from './index-a6ae2448.js';
+import { C as Checkbox, a as PureInput, P as Pagination$1, b as SearchInput, I as ImageWrapV2 } from './index-6d0dd379.js';
 import { format, isBefore, startOfMonth, addMonths, subMonths, getDaysInMonth, isToday, isSameDay, isWithinInterval, isAfter, isPast } from 'date-fns';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
-import { L as Logo } from './index-23bbfdc4.js';
+import { L as Logo } from './index-680cfdc2.js';
 import throttle from 'lodash/throttle';
 import parse from 'html-react-parser';
 import { domainLocales } from './constantsDomainLocales.js';
 import { isProduction } from './constantsIsProduction.js';
-import { a as useOutsideClick } from './useOutsideClick-522ebd17.js';
+import { a as useOutsideClick } from './useOutsideClick-208e83a8.js';
 import enUS from 'date-fns/locale/en-US';
 import id from 'date-fns/locale/id';
 import vi from 'date-fns/locale/vi';
 import zhTW from 'date-fns/locale/zh-TW';
-import { B as Button } from './index-0bc515ca.js';
-import { u as useScreenSize, I as ImageWrap } from './index-c1eae0d9.js';
-import { u as useTranslations } from './index-c2136215.js';
-import { D as Dropdown } from './index-6f12416b.js';
+import { B as Button } from './index-937f88f6.js';
+import { u as useScreenSize, I as ImageWrap } from './index-65efb21a.js';
+import { u as useTranslations } from './index-cbeddfac.js';
+import { D as Dropdown } from './index-223f07b0.js';
 import { getSocialList } from './miscGetSocialList.js';
-import { I as Input } from './index-01c16218.js';
-import { D as Drawer } from './index-b18fd09c.js';
+import { I as Input } from './index-8df09952.js';
+import { D as Drawer } from './index-e9434d51.js';
 import { v4 } from 'uuid';
-import { L as LOCALE } from './Locale-36a93bd1.js';
+import { L as LOCALE } from './Locale-b43cce5d.js';
 import { ArrowRight } from '@hhgtech/icons/arrow';
 import { MultiStar, Question } from '@hhgtech/icons/other';
 import Lottie from 'lottie-light-react';
-import { A as ArrowRightBlue } from './index-84235599.js';
-import { L as Loading } from './index-52d38408.js';
+import { A as ArrowRightBlue } from './index-9a715ed3.js';
+import cn from 'classnames';
+import { L as Loading } from './index-748561be.js';
 import get from 'lodash/get';
 import debounce from 'lodash/debounce';
 
@@ -4778,7 +4779,7 @@ const HPVScreener = ({ onClick, className, style, image, }) => {
                     React__default.createElement(ArrowRightBlue, { style: { width: '0.5rem', height: '0.5rem' } }))))));
 };
 
-const StyledHorizontalContainer = styled.div `
+const StyledTwoItemHorizontalContainer = styled.div `
   display: grid;
   grid-template-columns: 1fr 2px 1fr;
   column-gap: ${rem(16)};
@@ -4792,11 +4793,15 @@ const StyledVerticalContainer = styled.div `
     grid-column: 1 / span 2;
   }
 `;
+const StyledHorizontalContainer = styled.div `
+  display: flex;
+  align-items: center;
+`;
 const StyledVerticalContent = styled.div `
   display: flex;
   flex-direction: column;
   gap: ${rem(2)};
-  align-items: ${({ layout }) => (layout === 'vertical' ? 'left' : 'center')};
+  align-items: ${({ align }) => align};
 `;
 const StyledTitle$1 = styled.div `
   font-size: ${rem(15)};
@@ -4811,23 +4816,22 @@ const StyledDescription$1 = styled.div `
   font-size: ${rem(13)};
 `;
 
-const SummaryInfo = ({ infoItems, className, layout = 'vertical', }) => {
-    const isHorizontalLayout = layout === 'horizontal';
-    const StyledContainer = isHorizontalLayout
-        ? StyledHorizontalContainer
-        : StyledVerticalContainer;
-    return (React__default.createElement(StyledContainer, { className: className }, infoItems.map((item) => {
-        const lenOfInfoItems = infoItems.length;
-        if (lenOfInfoItems > 2 &&
-            lenOfInfoItems % 2 !== 0 &&
-            item.id === infoItems[lenOfInfoItems - 1].id) {
-            item.cssItem = 'span-2';
+const SummaryInfo = ({ infoItems, className, layout = 'vertical', align = 'start', isMobile = false, }) => {
+    const StyledContainer = useMemo(() => {
+        if (layout === 'two-item-horizontal' && isMobile) {
+            return StyledTwoItemHorizontalContainer;
+        }
+        if (layout === 'horizontal') {
+            return StyledHorizontalContainer;
         }
+        return StyledVerticalContainer;
+    }, [layout]);
+    return (React__default.createElement(StyledContainer, { className: className }, infoItems.map((item) => {
         return (React__default.createElement(React__default.Fragment, { key: item.id },
-            React__default.createElement(StyledVerticalContent, { layout: layout, className: item.cssItem },
-                React__default.createElement(StyledTitle$1, null, item.title),
-                React__default.createElement(StyledDescription$1, null, item.description)),
-            isHorizontalLayout && (React__default.createElement(Divider, { className: item.cssItem, sx: {
+            React__default.createElement(StyledVerticalContent, { align: align, className: cn(item.cssItem, 'flex-1') },
+                React__default.createElement(StyledTitle$1, { className: 'summary-title' }, item.title),
+                React__default.createElement(StyledDescription$1, { className: 'summary-description' }, item.description)),
+            layout === 'two-item-horizontal' && (React__default.createElement(Divider, { className: item.cssItem, sx: {
                     borderColor: '#0000001a',
                     height: '75%',
                     alignSelf: 'center',
@@ -5350,8 +5354,7 @@ styled.div `
 `;
 const GeneralInfoContainer = styled.div `
   background-color: #fff;
-`;
-
+`;
 const ProductImage = styled(ImageWrapV2) `
   width: 100%;
   object-fit: contain;
@@ -5364,33 +5367,26 @@ const ProductContent = styled.div `
   .description {
     margin-top: 0.5rem;
   }
-`;
-const ProductTitle = styled.h1 `
-  font-size: 1.375rem;
-  font-weight: 600;
-  line-height: 1.75rem;
-  color: #111111;
-`;
-const ProductDescription = styled.p `
-  font-size: 0.8125rem;
-  line-height: 1.25rem;
-  font-weight: 400;
-  color: ${theme.colors.gray700};
-`;
-function GeneralInfo({ generalInfo, backupSrc, className, contentClassName, bannerProps = {}, children, }) {
+
+  .product-info {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+`;
+
+function GeneralInfo({ generalInfo, backupSrc, className, contentClassName, bannerProps = {}, imagesSelect, children, isMobile = false, }) {
     return (React__default.createElement(GeneralInfoContainer, { className: className },
-        React__default.createElement(ProductImage, Object.assign({ backupSrc: backupSrc, src: generalInfo.banner || generalInfo.logo, alt: "product" }, bannerProps)),
+        React__default.createElement("div", { id: "product-image-section" }, imagesSelect ? (imagesSelect) : (React__default.createElement(ProductImage, Object.assign({ backupSrc: backupSrc, src: generalInfo.banner || generalInfo.logo, alt: "product" }, bannerProps)))),
         React__default.createElement(ProductContent, { className: contentClassName },
-            React__default.createElement("div", null,
-                React__default.createElement(ProductTitle, null, generalInfo.name),
-                generalInfo.description && (React__default.createElement(ProductDescription, { className: "description" }, generalInfo.description))),
+            React__default.createElement("div", { className: "product-info" },
+                React__default.createElement(Text, { size: "h3", fw: 600, color: "gray1000" }, generalInfo.name),
+                generalInfo.description && (React__default.createElement(Text, { size: isMobile ? 'p3' : 'p1', color: "gray700" }, generalInfo.description))),
             children)));
 }
 GeneralInfo.Container = GeneralInfoContainer;
 GeneralInfo.Image = ProductImage;
-GeneralInfo.Content = ProductContent;
-GeneralInfo.Title = ProductTitle;
-GeneralInfo.Description = ProductDescription;
+GeneralInfo.Content = ProductContent;
 
 const StyledContainer$2 = styled.div `
   border-radius: 12px;
@@ -5541,7 +5537,8 @@ const RatingStars = ({ value, max = MAX_RATING, onChange, readOnly = false, }) =
             return starComponent(starValue, true);
         }
         if (diff >= HALF_STAR_THRESHOLD) {
-            return React__default.createElement(StarHalf, { key: `star-${index}` });
+            return (React__default.createElement("div", { key: `star-${index}` },
+                React__default.createElement(StarHalf, null)));
         }
         return starComponent(starValue, false);
     })));

package/build/esm/{index-4401cd88.js → index-4ad917fe.js}

@@ -1,23 +1,23 @@
-import { _ as __rest } from './tslib.es6-55a9975c.js';
+import { _ as __rest } from './tslib.es6-e38967f1.js';
 import React__default, { createContext, useContext } from 'react';
 import { createStyles, rem, useMantineTheme, clsx } from '@mantine/core';
 import { useForm, isNotEmpty } from '@mantine/form';
-import { I as Input } from './index-252f817f.js';
-import { D as DatePicker } from './index-7712c77c.js';
-import { T as Text } from './index-5fc34d92.js';
-import './index-d67e1ca2.js';
-import './index-d078f707.js';
-import './index.styles-61d9a229.js';
-import { u as useTranslations } from './index-c2136215.js';
+import { I as Input } from './index-00525a27.js';
+import { D as DatePicker } from './index-e2b1743f.js';
+import { T as Text } from './index-036101ef.js';
+import './index-0fbbf33d.js';
+import './index-6ec3a41b.js';
+import './index.styles-4d912441.js';
+import { u as useTranslations } from './index-cbeddfac.js';
 import '@mantine/hooks';
-import './index-969c4c87.js';
-import './utils-ee799b8a.js';
-import './index-84fdada4.js';
-import { C as CardWrapperContext } from './context-24db2ac0.js';
-import { I as INPUT_RANGE } from './constants-93e1f46c.js';
-import { H as HealthToolFormWrapper } from './index-418b0547.js';
-import { G as GenderOptionControl } from './index-3805ffaa.js';
-import { L as LOCALE } from './Locale-36a93bd1.js';
+import './index-19cdad63.js';
+import './utils-e621bb20.js';
+import './index-242305da.js';
+import { C as CardWrapperContext } from './context-cce613d9.js';
+import { I as INPUT_RANGE } from './constants-01b8dc52.js';
+import { H as HealthToolFormWrapper } from './index-a51877c3.js';
+import { G as GenderOptionControl } from './index-18119d96.js';
+import { L as LOCALE } from './Locale-b43cce5d.js';
 import { CalendarMB } from '@hhgtech/icons/other';
 
 const BabyGrowthFormContext = createContext({});

package/build/esm/{index-f6ab6193.js → index-502a7b07.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import styled from '@emotion/styled';
-import { L as Label } from './index-01c16218.js';
+import { L as Label } from './index-8df09952.js';
 import { theme } from './miscTheme.js';
 
 const StyledTextArea = styled.div `

package/build/esm/{index-4f2db69c.js → index-544db0f2.js}

@@ -1,26 +1,26 @@
-import { _ as __rest } from './tslib.es6-55a9975c.js';
+import { _ as __rest } from './tslib.es6-e38967f1.js';
 import React__default, { createContext, useContext, useMemo, forwardRef, useState } from 'react';
 import { useMantineTheme, clsx, Group, Flex, Tooltip, Box } from '@mantine/core';
 import { format } from 'date-fns';
-import { L as LastPeriod } from './LastPeriod-9a98e959.js';
-import { L as LOCALE } from './Locale-36a93bd1.js';
+import { L as LastPeriod } from './LastPeriod-4b4ce151.js';
+import { L as LOCALE } from './Locale-b43cce5d.js';
 import { useForm, isNotEmpty } from '@mantine/form';
 import dayjs from 'dayjs';
-import { R as Radio, I as Input, S as Select } from './index-252f817f.js';
-import { D as DatePicker } from './index-7712c77c.js';
-import { T as Text } from './index-5fc34d92.js';
-import './index-d67e1ca2.js';
-import './index-d078f707.js';
-import './index.styles-61d9a229.js';
-import { u as useTranslations } from './index-c2136215.js';
+import { R as Radio, I as Input, S as Select } from './index-00525a27.js';
+import { D as DatePicker } from './index-e2b1743f.js';
+import { T as Text } from './index-036101ef.js';
+import './index-0fbbf33d.js';
+import './index-6ec3a41b.js';
+import './index.styles-4d912441.js';
+import { u as useTranslations } from './index-cbeddfac.js';
 import '@mantine/hooks';
-import './index-969c4c87.js';
-import './utils-ee799b8a.js';
-import './index-84fdada4.js';
-import { H as HealthToolFormWrapper } from './index-418b0547.js';
+import './index-19cdad63.js';
+import './utils-e621bb20.js';
+import './index-242305da.js';
+import { H as HealthToolFormWrapper } from './index-a51877c3.js';
 import { CalendarMB } from '@hhgtech/icons/other';
-import { C as CardWrapperContext } from './context-24db2ac0.js';
-import { Q as QUERY_HEALTH_TOOL, A as API_DATE_FORMAT$1 } from './index-a6f2da39.js';
+import { C as CardWrapperContext } from './context-cce613d9.js';
+import { Q as QUERY_HEALTH_TOOL, A as API_DATE_FORMAT$1 } from './index-067486f6.js';
 import { theme } from './miscTheme.js';
 
 const ConceptionDate = (_a) => {