@hhgtech/hhg-components 1.29.461-beta-4 → 1.29.461

package/build/esm/{index-f302d058.js → index-eef7c032.js}

@@ -1,21 +1,21 @@
-import { _ as __rest } from './tslib.es6-21e9e32d.js';
+import { _ as __rest } from './tslib.es6-40dce05c.js';
 import React__default, { createContext, useContext } from 'react';
 import { clsx, useMantineTheme } from '@mantine/core';
 import { useForm, isNotEmpty } from '@mantine/form';
-import './index-a09ac164.js';
-import { D as DatePicker } from './index-1f5decd3.js';
-import './index-16fa72dc.js';
-import './index-e3fd1e86.js';
-import './index-46f3697d.js';
-import './index.styles-a830c7d9.js';
-import { u as useTranslations } from './index-51c24ac3.js';
+import './index-108b6241.js';
+import { D as DatePicker } from './index-7c313719.js';
+import './index-33f2ee75.js';
+import './index-c58ed57d.js';
+import './index-d6fce961.js';
+import './index.styles-10f9a566.js';
+import { u as useTranslations } from './index-39bab8a2.js';
 import '@mantine/hooks';
-import './index-3a4de8f9.js';
-import './utils-4a5a1483.js';
-import './index-a25b6fc7.js';
-import { C as CardWrapperContext } from './context-0018c9fa.js';
-import { H as HealthToolFormWrapper } from './index-a5faa1c2.js';
-import { G as GenderOptionControl } from './index-bff307ba.js';
+import './index-d4d5ceab.js';
+import './utils-1e8933ea.js';
+import './index-c020fa56.js';
+import { C as CardWrapperContext } from './context-612b8f2f.js';
+import { H as HealthToolFormWrapper } from './index-f066e7a1.js';
+import { G as GenderOptionControl } from './index-72cb3e2a.js';
 import { CalendarMB } from '@hhgtech/icons/other';
 
 const BabyVaccineFormContext = createContext({});

package/build/esm/{index-a5faa1c2.js → index-f066e7a1.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-21e9e32d.js';
+import { _ as __rest } from './tslib.es6-40dce05c.js';
 import React__default, { createContext, useContext } from 'react';
 import { createStyles, rem, Box, Input, Chip, useMantineTheme, Flex, Switch } from '@mantine/core';
-import { T as Text } from './index-16fa72dc.js';
-import { B as Button } from './index-e3fd1e86.js';
-import { u as useTranslations } from './index-51c24ac3.js';
+import { T as Text } from './index-33f2ee75.js';
+import { B as Button } from './index-c58ed57d.js';
+import { u as useTranslations } from './index-39bab8a2.js';
 import flattenChildren from 'react-keyed-flatten-children';
 import { theme } from './miscTheme.js';
 

package/build/esm/{index-645efb95.js → index-f0d1a991.js}

@@ -1,6 +1,6 @@
-import { _ as __rest } from './tslib.es6-21e9e32d.js';
+import { _ as __rest } from './tslib.es6-40dce05c.js';
 import React__default from 'react';
-import { B as Button$1 } from './index-e3fd1e86.js';
+import { B as Button$1 } from './index-c58ed57d.js';
 
 /**
  * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'

package/build/esm/{index-120671df.js → index-f1bc0131.js}

@@ -1,23 +1,23 @@
-import { _ as __rest } from './tslib.es6-21e9e32d.js';
+import { _ as __rest } from './tslib.es6-40dce05c.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-a09ac164.js';
-import { D as DatePicker } from './index-1f5decd3.js';
-import { T as Text } from './index-16fa72dc.js';
-import './index-e3fd1e86.js';
-import './index-46f3697d.js';
-import './index.styles-a830c7d9.js';
-import { u as useTranslations } from './index-51c24ac3.js';
+import { I as Input } from './index-108b6241.js';
+import { D as DatePicker } from './index-7c313719.js';
+import { T as Text } from './index-33f2ee75.js';
+import './index-c58ed57d.js';
+import './index-d6fce961.js';
+import './index.styles-10f9a566.js';
+import { u as useTranslations } from './index-39bab8a2.js';
 import '@mantine/hooks';
-import './index-3a4de8f9.js';
-import './utils-4a5a1483.js';
-import './index-a25b6fc7.js';
-import { C as CardWrapperContext } from './context-0018c9fa.js';
-import { I as INPUT_RANGE } from './constants-790107e4.js';
-import { H as HealthToolFormWrapper } from './index-a5faa1c2.js';
-import { G as GenderOptionControl } from './index-bff307ba.js';
-import { L as LOCALE } from './Locale-6dc250d9.js';
+import './index-d4d5ceab.js';
+import './utils-1e8933ea.js';
+import './index-c020fa56.js';
+import { C as CardWrapperContext } from './context-612b8f2f.js';
+import { I as INPUT_RANGE } from './constants-06d2f55a.js';
+import { H as HealthToolFormWrapper } from './index-f066e7a1.js';
+import { G as GenderOptionControl } from './index-72cb3e2a.js';
+import { L as LOCALE } from './Locale-eb7724ec.js';
 import { CalendarMB } from '@hhgtech/icons/other';
 
 const BabyGrowthFormContext = createContext({});

package/build/esm/{index-ea7197a2.js → index-f448d07f.js}

@@ -3,24 +3,24 @@ import { CrossLogo, ShieldCheck } from '@hhgtech/icons/other';
 import { createStyles, Box, Flex, Button as Button$1, rem } from '@mantine/core';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { u as useTranslations } from './index-51c24ac3.js';
-import { M as MediaQueries, t as toggleNoScroll } from './utils-4a5a1483.js';
-import { A as AuthorBadge, B as BookingBtn } from './index-137ca60c.js';
-import { I as Icon } from './index-6ebf2330.js';
-import { _ as __rest } from './tslib.es6-21e9e32d.js';
-import { U as UserAvatar } from './index-b37efd5e.js';
-import { I as ImageWrap, u as useScreenSize } from './index-28c3c1d7.js';
-import './index-37605813.js';
-import { C as CommonGAssets } from './index-2cb9491d.js';
-import { c as callApi, g as getCarePath, l as domainLocales, m as getCareHospitalUrl, n as getCareDoctorUrl, k as getCurrentBaseUrl, o as getDiscoverApiPath, T as TogetherComponentGlobalContext } from './utils-68b5cd57.js';
-import { B as Button } from './index-645efb95.js';
-import { T as Text } from './index-16fa72dc.js';
+import { u as useTranslations } from './index-39bab8a2.js';
+import { M as MediaQueries, t as toggleNoScroll } from './utils-1e8933ea.js';
+import { A as AuthorBadge, B as BookingBtn } from './index-1b7a4d10.js';
+import { I as Icon } from './index-adddba92.js';
+import { _ as __rest } from './tslib.es6-40dce05c.js';
+import { U as UserAvatar } from './index-82bd3a8c.js';
+import { I as ImageWrap, u as useScreenSize } from './index-f6a9bd4f.js';
+import './index-a1302da4.js';
+import { C as CommonGAssets } from './index-92e483c9.js';
+import { c as callApi, g as getCarePath, l as domainLocales, m as getCareHospitalUrl, n as getCareDoctorUrl, k as getCurrentBaseUrl, o as getDiscoverApiPath, T as TogetherComponentGlobalContext } from './utils-7f3ff270.js';
+import { B as Button } from './index-f0d1a991.js';
+import { T as Text } from './index-33f2ee75.js';
 import { theme } from './miscTheme.js';
 import styled from '@emotion/styled';
 import { CARE_PATHS, DISCOVER_PATHS } from './togetherApiPaths.js';
-import { L as Loading } from './index-2b2696b2.js';
-import { H as Heading } from './index-c01921ed.js';
-import { M as Modal } from './index-80692d8b.js';
+import { L as Loading } from './index-3a4ecbfb.js';
+import { H as Heading } from './index-760a8462.js';
+import { M as Modal } from './index-a555da01.js';
 import { domainLocales as domainLocales$1 } from './constantsDomainLocales.js';
 
 var styles$2 = {"row":"dZWeHns","flex":"_8z2nszB","mainTxt":"tMiOKib","subTxt":"uDcqD-2","subTxtRow":"pDlsows","subDivider":"m-HVXw1"};
@@ -911,7 +911,7 @@ const _CardAuthor = (props) => {
     useEffect(() => {
         if (open && !ProfileDetail) {
             if (userType === 'chatbot') {
-                import('./index-6abfa538.js').then((module) => {
+                import('./index-538cf382.js').then((module) => {
                     setProfileDetail(() => module.ProfileChatbot);
                 });
             }

package/build/esm/{index-ba43c8f8.js → index-f5b1d8c0.js}

@@ -1,34 +1,34 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-21e9e32d.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-40dce05c.js';
 import React__default, { useContext, useState, useEffect, useMemo } from 'react';
-import { B as Button } from './index-645efb95.js';
-import { H as Heading } from './index-c01921ed.js';
-import { u as useTranslations } from './index-51c24ac3.js';
+import { B as Button } from './index-f0d1a991.js';
+import { H as Heading } from './index-760a8462.js';
+import { u as useTranslations } from './index-39bab8a2.js';
 import innertext from 'innertext';
-import { S as SharePopup, P as PopupDanger, h as deletePost, i as IconAlertCircle, b as SubmitReportForm, j as deleteComment, k as decodeCommentBody, l as likeUnlikeComment, I as InputCommentBar, m as likeUnlikePost, g as getDefaultFailNoti } from './index-76f31b16.js';
-import { C as CommonGAssets } from './index-2cb9491d.js';
-import { R as REPORT_REASON_MAP, D as DEFAULT_IMG } from './constants-49b494af.js';
+import { S as SharePopup, P as PopupDanger, h as deletePost, i as IconAlertCircle, b as SubmitReportForm, j as deleteComment, k as decodeCommentBody, l as likeUnlikeComment, I as InputCommentBar, m as likeUnlikePost, g as getDefaultFailNoti } from './index-7291ca97.js';
+import { C as CommonGAssets } from './index-92e483c9.js';
+import { R as REPORT_REASON_MAP, D as DEFAULT_IMG } from './constants-5063a766.js';
 import { useTogetherAuthRequiredAction, TogetherAuthConfigContextProvider } from './useTogetherAuthRequiredAction.js';
-import { T as TogetherComponentGlobalContext, c as callApi, s as getMarryBabyApiPath, o as getDiscoverApiPath, g as getCarePath, k as getCurrentBaseUrl$1, b as callApiWithAuth, d as getApiPath, t as callApiWithOptionalAuth, l as domainLocales$1 } from './utils-68b5cd57.js';
-import { b as TreePopoverMenu, C as CardReactions, c as CardReactionType, a as LabelPin, T as TagTopic } from './treePopoverMenu-cecb3a9d.js';
+import { T as TogetherComponentGlobalContext, c as callApi, s as getMarryBabyApiPath, o as getDiscoverApiPath, g as getCarePath, k as getCurrentBaseUrl$1, b as callApiWithAuth, d as getApiPath, t as callApiWithOptionalAuth, l as domainLocales$1 } from './utils-7f3ff270.js';
+import { b as TreePopoverMenu, C as CardReactions, c as CardReactionType, a as LabelPin, T as TagTopic } from './treePopoverMenu-9572b96c.js';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-4a5a1483.js';
+import { M as MediaQueries } from './utils-1e8933ea.js';
 import { theme } from './miscTheme.js';
-import { g as formatArticle, h as formatCategory, e as formatComment } from './dataTransform-3f432b25.js';
+import { g as formatArticle, h as formatCategory, e as formatComment } from './dataTransform-44850a40.js';
 import { DISCOVER_PATHS, CARE_PATHS, PATHS } from './togetherApiPaths.js';
-import { C as CardLink } from './index-15cedd55.js';
-import { C as CardAuthor, c as ProfileDetailModal } from './index-ea7197a2.js';
-import { a as ProfileDetail, P as PostContent } from './index-d5ebd2b4.js';
-import { a as PostImagePreview } from './index-b8522d73.js';
-import { S as SocialLinkPreview } from './index-04305c42.js';
-import { D as Divider } from './index-48a83b30.js';
-import './index-37605813.js';
+import { C as CardLink } from './index-ebb55e47.js';
+import { C as CardAuthor, c as ProfileDetailModal } from './index-f448d07f.js';
+import { a as ProfileDetail, P as PostContent } from './index-02c155e1.js';
+import { a as PostImagePreview } from './index-5f395337.js';
+import { S as SocialLinkPreview } from './index-5056a6eb.js';
+import { D as Divider } from './index-700ce01e.js';
+import './index-a1302da4.js';
 import { Plus } from '@hhgtech/icons/core';
 import { ArrowRight, ArrowDown, Trash, Endorse } from '@hhgtech/icons/other';
 import { Accordion } from '@mantine/core';
-import { I as Input } from './index-1096d5cc.js';
-import { T as Text } from './index-16fa72dc.js';
-import { L as Loading } from './index-2b2696b2.js';
-import { g as getCurrentBaseUrl } from './normalizeLink-8eabf1eb.js';
+import { I as Input } from './index-397219ac.js';
+import { T as Text } from './index-33f2ee75.js';
+import { L as Loading } from './index-3a4ecbfb.js';
+import { g as getCurrentBaseUrl } from './normalizeLink-ffd26e02.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 var img$7 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3e%3cpath fill='%233E3F58' d='M5 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2M19 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2'/%3e%3c/svg%3e";

package/build/esm/{index-28c3c1d7.js → index-f6a9bd4f.js}

@@ -1,6 +1,6 @@
 import React__default, { useState, useEffect } from 'react';
-import { B as Breakpoints } from './utils-4a5a1483.js';
-import { _ as __rest } from './tslib.es6-21e9e32d.js';
+import { B as Breakpoints } from './utils-1e8933ea.js';
+import { _ as __rest } from './tslib.es6-40dce05c.js';
 import styled from '@emotion/styled';
 
 const getIsMobile = () => {

package/build/esm/{index-bf0d44d2.js → index-ffecdc7d.js}

@@ -1,52 +1,51 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-21e9e32d.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-40dce05c.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-a09ac164.js';
+import { R as Radio } from './index-108b6241.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-37605813.js';
-import './index-e2739fdc.js';
-import { C as CommonGAssets } from './index-2cb9491d.js';
-import './index-3a4de8f9.js';
-import { T as Text } from './index-16fa72dc.js';
-import { B as Button$1 } from './index-e3fd1e86.js';
-import './index-46f3697d.js';
-import './index.styles-a830c7d9.js';
-import './translationsContext-56bc7e07.js';
+import { L as LOCALE_SPECS, F as FAVICONS } from './index-a1302da4.js';
+import './index-0b74cbe4.js';
+import { C as CommonGAssets } from './index-92e483c9.js';
+import './index-d4d5ceab.js';
+import { T as Text } from './index-33f2ee75.js';
+import { B as Button$1 } from './index-c58ed57d.js';
+import './index-d6fce961.js';
+import './index.styles-10f9a566.js';
+import './translationsContext-3bf4887b.js';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-4a5a1483.js';
-import './index-a25b6fc7.js';
-import { i as isInternalLink } from './index-15678f5d.js';
+import { M as MediaQueries } from './utils-1e8933ea.js';
+import './index-c020fa56.js';
+import { i as isInternalLink } from './index-e994e570.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-ab1903d5.js';
+import { C as Checkbox, a as PureInput, P as Pagination$1, b as SearchInput, I as ImageWrapV2 } from './index-bc3b8a94.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-6fe0ad33.js';
+import { L as Logo } from './index-35b2b27d.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-22c2602b.js';
+import { a as useOutsideClick } from './useOutsideClick-9a70d97a.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-645efb95.js';
-import { u as useScreenSize, I as ImageWrap } from './index-28c3c1d7.js';
-import { u as useTranslations } from './index-51c24ac3.js';
-import { D as Dropdown } from './index-6a92ee6a.js';
+import { B as Button } from './index-f0d1a991.js';
+import { u as useScreenSize, I as ImageWrap } from './index-f6a9bd4f.js';
+import { u as useTranslations } from './index-39bab8a2.js';
+import { D as Dropdown } from './index-7cd7ab8c.js';
 import { getSocialList } from './miscGetSocialList.js';
-import { I as Input } from './index-1096d5cc.js';
-import { D as Drawer } from './index-c2cc8889.js';
+import { I as Input } from './index-397219ac.js';
+import { D as Drawer } from './index-3958180b.js';
 import { v4 } from 'uuid';
-import { L as LOCALE } from './Locale-6dc250d9.js';
+import { L as LOCALE } from './Locale-eb7724ec.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-cf351d1f.js';
-import cn from 'classnames';
-import { L as Loading } from './index-630feb5b.js';
+import { A as ArrowRightBlue } from './index-d00a05e8.js';
+import { L as Loading } from './index-5658b41f.js';
 import get from 'lodash/get';
 import debounce from 'lodash/debounce';
 
@@ -4779,7 +4778,7 @@ const HPVScreener = ({ onClick, className, style, image, }) => {
                     React__default.createElement(ArrowRightBlue, { style: { width: '0.5rem', height: '0.5rem' } }))))));
 };
 
-const StyledTwoItemHorizontalContainer = styled.div `
+const StyledHorizontalContainer = styled.div `
   display: grid;
   grid-template-columns: 1fr 2px 1fr;
   column-gap: ${rem(16)};
@@ -4793,15 +4792,11 @@ 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: ${({ align }) => align};
+  align-items: ${({ layout }) => (layout === 'vertical' ? 'left' : 'center')};
 `;
 const StyledTitle$1 = styled.div `
   font-size: ${rem(15)};
@@ -4816,22 +4811,23 @@ const StyledDescription$1 = styled.div `
   font-size: ${rem(13)};
 `;
 
-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]);
+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';
+        }
         return (React__default.createElement(React__default.Fragment, { key: item.id },
-            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: {
+            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: {
                     borderColor: '#0000001a',
                     height: '75%',
                     alignSelf: 'center',
@@ -5354,7 +5350,8 @@ styled.div `
 `;
 const GeneralInfoContainer = styled.div `
   background-color: #fff;
-`;
+`;
+
 const ProductImage = styled(ImageWrapV2) `
   width: 100%;
   object-fit: contain;
@@ -5367,26 +5364,33 @@ const ProductContent = styled.div `
   .description {
     margin-top: 0.5rem;
   }
-
-  .product-info {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-`;
-
-function GeneralInfo({ generalInfo, backupSrc, className, contentClassName, bannerProps = {}, imagesSelect, children, isMobile = false, }) {
+`;
+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, }) {
     return (React__default.createElement(GeneralInfoContainer, { className: className },
-        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(ProductImage, Object.assign({ backupSrc: backupSrc, src: generalInfo.banner || generalInfo.logo, alt: "product" }, bannerProps)),
         React__default.createElement(ProductContent, { className: contentClassName },
-            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))),
+            React__default.createElement("div", null,
+                React__default.createElement(ProductTitle, null, generalInfo.name),
+                generalInfo.description && (React__default.createElement(ProductDescription, { className: "description" }, generalInfo.description))),
             children)));
 }
 GeneralInfo.Container = GeneralInfoContainer;
 GeneralInfo.Image = ProductImage;
-GeneralInfo.Content = ProductContent;
+GeneralInfo.Content = ProductContent;
+GeneralInfo.Title = ProductTitle;
+GeneralInfo.Description = ProductDescription;
 
 const StyledContainer$2 = styled.div `
   border-radius: 12px;
@@ -5537,8 +5541,7 @@ const RatingStars = ({ value, max = MAX_RATING, onChange, readOnly = false, }) =
             return starComponent(starValue, true);
         }
         if (diff >= HALF_STAR_THRESHOLD) {
-            return (React__default.createElement("div", { key: `star-${index}` },
-                React__default.createElement(StarHalf, null)));
+            return React__default.createElement(StarHalf, { key: `star-${index}` });
         }
         return starComponent(starValue, false);
     })));