@hhgtech/hhg-components 1.29.434-beta-2 → 1.29.434-beta-4

package/build/esm/{RatingStarsInput-c6e4eda1.js → RatingStarsInput-bf4ba810.js}

@@ -1,51 +1,51 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-65d85c84.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-a7817116.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-f8edffe6.js';
-import { Stack, Group, createStyles, getStylesRef, Box, Badge, Divider, clsx, rem, Button as Button$2, AspectRatio, Grid, Image } from '@mantine/core';
+import { R as Radio } from './index-0e3f1dcf.js';
+import { Stack, Group, createStyles, getStylesRef, Box, Badge, rem, Divider, clsx, Button as Button$2, AspectRatio, Grid, Image } from '@mantine/core';
 import '@mantine/dates';
-import { L as LOCALE_SPECS, F as FAVICONS } from './index-f748978d.js';
-import './index-7c9ba229.js';
-import { C as CommonGAssets } from './index-43415278.js';
-import './index-6dbe6ca9.js';
-import { T as Text } from './index-f65c7844.js';
-import { B as Button$1 } from './index-d08cba80.js';
-import './index.styles-b5076e77.js';
-import './translationsContext-556588ce.js';
+import { L as LOCALE_SPECS, F as FAVICONS } from './index-4c2735ea.js';
+import './index-e2b89a93.js';
+import { C as CommonGAssets } from './index-d7fb6458.js';
+import './index-b047de66.js';
+import { T as Text } from './index-974e0ffa.js';
+import { B as Button$1 } from './index-9c2e66c9.js';
+import './index.styles-cfb146b7.js';
+import './translationsContext-4d1ba4ab.js';
 import '@mantine/hooks';
-import './text-a32c4810.js';
-import { M as MediaQueries } from './utils-4eaa39a7.js';
-import './index-634afcf6.js';
-import { i as isInternalLink } from './index-c48e6649.js';
+import './text-b00b11d4.js';
+import { M as MediaQueries } from './utils-82d6bb5f.js';
+import './index-06d2d1e1.js';
+import { i as isInternalLink } from './index-d383205e.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 } from './index-d59f2b69.js';
+import { C as Checkbox, a as PureInput, P as Pagination$1, b as SearchInput } from './index-8011fbb0.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-112446ca.js';
+import { L as Logo } from './index-352bc57a.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-9875cba3.js';
+import { a as useOutsideClick } from './useOutsideClick-83cd3f43.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-742fa807.js';
-import { u as useScreenSize, I as ImageWrap } from './index-878e373b.js';
-import { u as useTranslations } from './index-36d282ab.js';
-import { D as Dropdown } from './index-115f78bb.js';
+import { B as Button } from './index-1f55e511.js';
+import { u as useScreenSize, I as ImageWrap } from './index-c59af7b0.js';
+import { u as useTranslations } from './index-1306e7eb.js';
+import { D as Dropdown } from './index-f1226ecb.js';
 import { getSocialList } from './miscGetSocialList.js';
-import { I as Input } from './index-04333161.js';
-import { D as Drawer } from './index-ba26c1ee.js';
+import { I as Input } from './index-707d80b5.js';
+import { D as Drawer } from './index-7ce20b7c.js';
 import { v4 } from 'uuid';
-import { L as LOCALE } from './Locale-6fb06008.js';
+import { L as LOCALE } from './Locale-04c23ae5.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-c1bac064.js';
-import { L as Loading } from './index-f9c0353f.js';
+import { A as ArrowRightBlue } from './index-cb8c5b43.js';
+import { L as Loading } from './index-14d7570a.js';
 import get from 'lodash/get';
 import debounce from 'lodash/debounce';
 
@@ -2039,7 +2039,7 @@ const StyledTitleSection = styled.p `
     }
   }
 `;
-const StyledDescription$3 = styled.p `
+const StyledDescription$1 = styled.p `
   margin-top: 2px;
   color: ${theme.colors.white};
   font-size: 12px;
@@ -2082,7 +2082,7 @@ const CookieAcceptConfirm = ({ className, policiesUrl, onAcceptClick, translatio
 }, title = '', description = '', theme = 'helloSites', isOpen = true, useDefaultPosition = true, trackingAttributes, }) => {
     return (React__default.createElement(StyledAcceptCardContainer, { className: className, "data-theme": theme, "data-is-open": isOpen, "data-default-position": useDefaultPosition },
         React__default.createElement(StyledTitleSection, { "data-has-content": !!title }, title),
-        React__default.createElement(StyledDescription$3, { dangerouslySetInnerHTML: {
+        React__default.createElement(StyledDescription$1, { dangerouslySetInnerHTML: {
                 __html: description,
             } }),
         React__default.createElement(StyledButtonGroup, null,
@@ -4751,7 +4751,7 @@ const StyledTextContent = styled.div `
   font-size: 0.9375rem;
   line-height: 1.5rem;
 `;
-const StyledTitle$3 = styled.span `
+const StyledTitle$1 = styled.span `
   font-weight: 600;
 `;
 const StyledSubTitle = styled.span `
@@ -4783,7 +4783,7 @@ const HPVScreener = ({ onClick, className }) => {
                                 "1.2M ",
                                 t('detail.screened')))),
                     React__default.createElement(StyledTextContent, null,
-                        React__default.createElement(StyledTitle$3, null, t('detail.hpvScreenerTitle')),
+                        React__default.createElement(StyledTitle$1, null, t('detail.hpvScreenerTitle')),
                         ' ',
                         React__default.createElement(StyledSubTitle, null, t('detail.hpvScreenerSubtitle')))),
                 React__default.createElement("div", { style: { alignSelf: 'flex-start' } },
@@ -4797,33 +4797,26 @@ const HPVScreener = ({ onClick, className }) => {
 const StyledHorizontalContainer = styled.div `
   display: grid;
   grid-template-columns: 1fr 2px 1fr;
-  column-gap: 10px;
+  column-gap: ${rem(16)};
 `;
 const StyledVerticalContainer = styled.div `
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  row-gap: 1.5rem;
+  row-gap: ${rem(24)};
 
   .span-2 {
     grid-column: 1 / span 2;
   }
 `;
 const StyledVerticalContent = styled.div `
-  position: relative;
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  justify-content: center;
+  gap: ${rem(2)};
   align-items: ${({ layout }) => (layout === 'vertical' ? 'left' : 'center')};
 `;
-const StyledTitle$2 = styled.div `
+styled.div `
   font-size: 15px;
   font-weight: 600;
-`;
-const StyledDescription$2 = styled.div `
-  font-size: 13px;
-  font-weight: 400;
-  color: ${theme.colors.gray700};
 `;
 
 const SummaryInfo = ({ infoItems, className, layout = 'vertical', }) => {
@@ -4840,11 +4833,11 @@ const SummaryInfo = ({ infoItems, className, layout = 'vertical', }) => {
         }
         return (React__default.createElement(React__default.Fragment, { key: item.id },
             React__default.createElement(StyledVerticalContent, { layout: layout, className: item.cssItem },
-                React__default.createElement(StyledTitle$2, null, item.title),
-                React__default.createElement(StyledDescription$2, null, item.description)),
+                React__default.createElement(Text, { size: "p2", weight: "semiBold", color: "#111111" }, item.title),
+                React__default.createElement(Text, { size: "p3", weight: "regular", align: isHorizontalLayout ? 'center' : 'left', color: "#111111" }, item.description)),
             isHorizontalLayout && (React__default.createElement(Divider, { className: item.cssItem, sx: {
                     borderColor: '#0000001a',
-                    height: '80%',
+                    height: '75%',
                     alignSelf: 'center',
                 }, orientation: "vertical" }))));
     })));
@@ -5177,7 +5170,7 @@ function CardListItem({ title, href, description, logo, defaultImage, LinkCompon
     return (React__default.createElement(StyleCardItem, { className: className },
         React__default.createElement("div", { className: "info" },
             React__default.createElement(LinkComponent, { href: href },
-                React__default.createElement("h5", { className: "title" }, title)),
+                React__default.createElement(Text, { size: "title2", color: "#111111", weight: "semiBold" }, title)),
             typeof description === 'string' ? (React__default.createElement(LinkComponent, { href: href },
                 React__default.createElement("p", { className: "description" }, description))) : (description),
             contentInfo),
@@ -5290,20 +5283,16 @@ const StyledFlex = styled.div `
   justify-content: space-between;
   height: 100%;
 `;
-const StyledTitle$1 = styled.div `
+const StyledTitle = styled(Text) `
   width: 100%;
-  font-size: 0.8125rem;
-  font-weight: 500;
   display: -webkit-box;
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
 `;
-const StyledDescription$1 = styled.div `
-  font-size: 0.6875rem;
-  font-weight: 500;
-  color: ${theme.colors.gray700};
+const StyledDescription = styled(Text) `
+  font-size: ${rem(11)};
 `;
 const Center = styled.div `
   display: flex;
@@ -5324,36 +5313,19 @@ const VoucherItem = ({ image, title, description, onClick, className, }) => {
                         } }))),
             React__default.createElement(Grid.Col, { span: "auto" },
                 React__default.createElement(StyledFlex, null,
-                    React__default.createElement(StyledTitle$1, null, title),
-                    React__default.createElement(StyledDescription$1, null, description))))));
+                    React__default.createElement(StyledTitle, { size: "p3", weight: "halfBold", color: "#111111" }, title),
+                    React__default.createElement(StyledDescription, { size: "c2", weight: "halfBold" }, description))))));
 };
 
 const StyledContainer = styled.div `
   display: flex;
   flex-direction: column;
-  justify-content: centr;
   align-items: center;
   border-radius: 12px;
   background-color: ${theme.colors.neutral50};
   padding: 16px 8px;
   gap: 8px;
 `;
-const StyledTitle = styled.div `
-  font-size: 13px;
-  font-weight: 600;
-  text-align: center;
-`;
-const StyledDescription = styled.div `
-  font-size: 13px;
-  font-weight: 400;
-  color: ${theme.colors.gray700};
-  text-align: center;
-  display: -webkit-box;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 4;
-`;
 const StyledTextContainer = styled.div `
   display: flex;
   flex-direction: column;
@@ -5363,12 +5335,12 @@ const StyledTextContainer = styled.div `
 const CertificateItem = ({ image, description, title, className, }) => {
     return (React__default.createElement(StyledContainer, { className: className },
         React__default.createElement(Image, { src: image, style: {
-                width: '7.5rem',
-                height: '7.5rem',
+                width: rem(120),
+                height: rem(120),
             } }),
         React__default.createElement(StyledTextContainer, null,
-            React__default.createElement(StyledTitle, null, title),
-            React__default.createElement(StyledDescription, null, description))));
+            React__default.createElement(Text, { size: "p3", weight: "semiBold", color: "#111111", align: "center" }, title),
+            React__default.createElement(Text, { size: "p3", weight: "regular", align: "center" }, description))));
 };
 
 const MAX_RATING = 5;

package/build/esm/{Spinner-7f6cebcb.js → Spinner-e27a8d00.js}

@@ -1,4 +1,4 @@
-import { _ as __rest } from './tslib.es6-65d85c84.js';
+import { _ as __rest } from './tslib.es6-a7817116.js';
 import React__default from 'react';
 
 const Spinner = (_a) => {

package/build/esm/{WhatsApp-34af4f81.js → WhatsApp-1d142a1c.js}

@@ -1,4 +1,4 @@
-import { _ as __rest } from './tslib.es6-65d85c84.js';
+import { _ as __rest } from './tslib.es6-a7817116.js';
 import React__default from 'react';
 
 const Instagram = (_a) => {

package/build/esm/adapters.js

@@ -1,38 +1,38 @@
-export { B as Button } from './index-742fa807.js';
-export { T as Text } from './index-d1892b36.js';
-export { H as Heading } from './index-ef671917.js';
-import './tslib.es6-65d85c84.js';
+export { B as Button } from './index-1f55e511.js';
+export { T as Text } from './index-bbe5956f.js';
+export { H as Heading } from './index-5fbb867d.js';
+import './tslib.es6-a7817116.js';
 import 'react';
-import './index-d08cba80.js';
+import './index-9c2e66c9.js';
 import '@mantine/core';
-import './shared-d91a726c.js';
-import './text-a32c4810.js';
-import './index-f8edffe6.js';
+import './shared-e0758d62.js';
+import './text-b00b11d4.js';
+import './index-0e3f1dcf.js';
 import '@hhgtech/icons/other';
 import '@mantine/hooks';
-import './index-43415278.js';
+import './index-d7fb6458.js';
 import './constantsDomainLocales.js';
-import './Locale-6fb06008.js';
+import './Locale-04c23ae5.js';
 import './constantsIsProduction.js';
-import './index-878e373b.js';
-import './utils-4eaa39a7.js';
+import './index-c59af7b0.js';
+import './utils-82d6bb5f.js';
 import '@emotion/styled';
 import '@mantine/carousel';
-import './index-f65c7844.js';
-import './index-6dbe6ca9.js';
+import './index-974e0ffa.js';
+import './index-b047de66.js';
 import 'dayjs';
-import './index-7c9ba229.js';
+import './index-e2b89a93.js';
 import '@mantine/notifications';
-import './index-f748978d.js';
+import './index-4c2735ea.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
 import './miscTheme.js';
 import 'classnames';
 import 'uuid';
-import './useUniqueId-0627fd52.js';
+import './useUniqueId-08605ab3.js';
 import '@hhgtech/icons/core';
 import '@mantine/dates';
-import './index.styles-b5076e77.js';
-import './translationsContext-556588ce.js';
-import './index-634afcf6.js';
+import './index.styles-cfb146b7.js';
+import './translationsContext-4d1ba4ab.js';
+import './index-06d2d1e1.js';

package/build/esm/atoms.js

@@ -1,76 +1,76 @@
-export { A as Alert, B as Badge, a as BorderHeading, C as CardCollapse, D as DragFreeCarousel, f as FILE_UPLOAD_ACCEPTED_RATIOS, g as FILE_UPLOAD_ACCEPTED_TYPES, F as FileDropdown, G as Grid, H as HtmlContent, I as IconHeading, e as ImageUpload, R as Radio, b as RateStars, S as StepRenderer, d as StepRendererContext, T as Tag, c as Toggle } from './index-10392644.js';
-export { A as Avatar, D as DistanceTag, I as IconWrapper } from './index-e3748cc0.js';
-export { B as Button } from './index-742fa807.js';
-export { C as Checkbox, P as Pagination, a as PureInput, b as SearchInput, S as StyledSearchIcon } from './index-d59f2b69.js';
-export { C as Container } from './index-381d23c2.js';
-export { D as Divider } from './index-ef508c9b.js';
-export { D as Drawer } from './index-ba26c1ee.js';
-export { F as Flag } from './index-f8edffe6.js';
-export { H as Heading } from './index-ef671917.js';
-export { I as Icon } from './index-89cdb982.js';
-export { I as Input, L as Label } from './index-04333161.js';
-export { L as Logo } from './index-112446ca.js';
-export { R as RadioImageGroup } from './index-7043b411.js';
-export { T as Text } from './index-d1892b36.js';
-export { T as TextArea } from './index-2f19848f.js';
-export { A as AuthorBadge, B as BookingBtn } from './index-37439923.js';
-export { B as BtnChoice } from './index-305eca69.js';
-export { C as CustomReferenceDot } from './index-15eac9ad.js';
-export { I as ImageWrap } from './index-878e373b.js';
-export { L as LogoIcon } from './logoIcon-0121b5c4.js';
-export { G as GenderOptionControl } from './index-8c703476.js';
-export { L as Loading } from './index-f9c0353f.js';
-export { D as DrawerComponent } from './index-c091deec.js';
-export { I as InputDate } from './InputDate-55e5af78.js';
+export { A as Alert, B as Badge, a as BorderHeading, C as CardCollapse, D as DragFreeCarousel, f as FILE_UPLOAD_ACCEPTED_RATIOS, g as FILE_UPLOAD_ACCEPTED_TYPES, F as FileDropdown, G as Grid, H as HtmlContent, I as IconHeading, e as ImageUpload, R as Radio, b as RateStars, S as StepRenderer, d as StepRendererContext, T as Tag, c as Toggle } from './index-fa2d2619.js';
+export { A as Avatar, D as DistanceTag, I as IconWrapper } from './index-bc86af7d.js';
+export { B as Button } from './index-1f55e511.js';
+export { C as Checkbox, P as Pagination, a as PureInput, b as SearchInput, S as StyledSearchIcon } from './index-8011fbb0.js';
+export { C as Container } from './index-89cb0608.js';
+export { D as Divider } from './index-1f1d1cb3.js';
+export { D as Drawer } from './index-7ce20b7c.js';
+export { F as Flag } from './index-0e3f1dcf.js';
+export { H as Heading } from './index-5fbb867d.js';
+export { I as Icon } from './index-d2d155a9.js';
+export { I as Input, L as Label } from './index-707d80b5.js';
+export { L as Logo } from './index-352bc57a.js';
+export { R as RadioImageGroup } from './index-ef1391d1.js';
+export { T as Text } from './index-bbe5956f.js';
+export { T as TextArea } from './index-2fdbcb46.js';
+export { A as AuthorBadge, B as BookingBtn } from './index-8829a813.js';
+export { B as BtnChoice } from './index-18276834.js';
+export { C as CustomReferenceDot } from './index-193554ed.js';
+export { I as ImageWrap } from './index-c59af7b0.js';
+export { L as LogoIcon } from './logoIcon-ceb27e06.js';
+export { G as GenderOptionControl } from './index-b9c5e21d.js';
+export { L as Loading } from './index-14d7570a.js';
+export { D as DrawerComponent } from './index-75a49462.js';
+export { I as InputDate } from './InputDate-6e83d949.js';
 import 'react';
-import './index-f65c7844.js';
-import './tslib.es6-65d85c84.js';
+import './index-974e0ffa.js';
+import './tslib.es6-a7817116.js';
 import '@mantine/core';
-import './text-a32c4810.js';
+import './text-b00b11d4.js';
 import '@emotion/styled';
 import './miscTheme.js';
-import './utils-4eaa39a7.js';
+import './utils-82d6bb5f.js';
 import '@mantine/hooks';
 import './miscDefaultClassWrapper.js';
 import 'react-keyed-flatten-children';
-import './Close-e8f81044.js';
+import './Close-61f078d6.js';
 import '@mantine/carousel';
-import './index-d08cba80.js';
-import './shared-d91a726c.js';
+import './index-9c2e66c9.js';
+import './shared-e0758d62.js';
 import '@mantine/dates';
-import './index-f748978d.js';
+import './index-4c2735ea.js';
 import 'date-fns/locale';
-import './index-7c9ba229.js';
-import './Locale-6fb06008.js';
+import './index-e2b89a93.js';
+import './Locale-04c23ae5.js';
 import './constantsSite.js';
 import './constantsDomainLocales.js';
 import './constantsRiskScreener.js';
 import './constantsIsProduction.js';
-import './index-43415278.js';
-import './index-6dbe6ca9.js';
+import './index-d7fb6458.js';
+import './index-b047de66.js';
 import 'dayjs';
 import '@mantine/notifications';
-import './index.styles-b5076e77.js';
-import './translationsContext-556588ce.js';
-import './index-634afcf6.js';
+import './index.styles-cfb146b7.js';
+import './translationsContext-4d1ba4ab.js';
+import './index-06d2d1e1.js';
 import '@hhgtech/icons/other';
 import '@emotion/react';
-import './animation-4a311324.js';
+import './animation-3d304872.js';
 import 'classnames';
 import 'uuid';
-import './useUniqueId-0627fd52.js';
+import './useUniqueId-08605ab3.js';
 import '@hhgtech/icons/core';
-import './WhatsApp-34af4f81.js';
-import './Spinner-7f6cebcb.js';
-import './index-93d224c5.js';
-import './index-36d282ab.js';
-import './paths-1e24cbf5.js';
-import './constants-d0421596.js';
-import './utils-46309e29.js';
-import './index-f35e5b1b.js';
+import './WhatsApp-1d142a1c.js';
+import './Spinner-e27a8d00.js';
+import './index-8ce473f2.js';
+import './index-1306e7eb.js';
+import './paths-2408baf9.js';
+import './constants-e1658b4f.js';
+import './utils-3dd23a03.js';
+import './index-f6814608.js';
 import './miscCookieHelper.js';
 import 'slugify';
 import 'string-format';
 import './togetherApiPaths.js';
-import './constants-72403ae4.js';
+import './constants-deb5d21c.js';
 import 'vaul';