@hhgtech/hhg-components 1.29.463 → 1.29.465-beta-1

package/build/esm/{index-44715829.js → index-23a6c507.js}

@@ -1,51 +1,52 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-336c11ff.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-eb672842.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-408eb64b.js';
+import { R as Radio } from './index-38897e9d.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-d7d6bb19.js';
-import './index-b44ee327.js';
-import { C as CommonGAssets } from './index-1804fda0.js';
-import './index-3d1d9a67.js';
-import { T as Text } from './index-e8740927.js';
-import { B as Button$1 } from './index-cdc9d57c.js';
-import './index-e6806e0f.js';
-import './index.styles-7a9af80f.js';
-import './translationsContext-4b37e197.js';
+import { L as LOCALE_SPECS, F as FAVICONS } from './index-4fa0d037.js';
+import './index-b6fa7bd3.js';
+import { C as CommonGAssets } from './index-b29ead5f.js';
+import './index-a6264391.js';
+import { T as Text } from './index-922016ca.js';
+import { B as Button$1 } from './index-7fc8dbe6.js';
+import './index-d7adaf6b.js';
+import './index.styles-47bf88c8.js';
+import './translationsContext-19e27f99.js';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-8c1fd230.js';
-import './index-ee3a4ef3.js';
-import { i as isInternalLink } from './index-df002263.js';
+import { M as MediaQueries } from './utils-ba7f918b.js';
+import './index-6d743e19.js';
+import { i as isInternalLink } from './index-902a6257.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-7c7fc34e.js';
+import { C as Checkbox, a as PureInput, P as Pagination$1, b as SearchInput, I as ImageWrapV2 } from './index-e039a6cb.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-33972e2f.js';
+import { L as Logo } from './index-bbc2f99a.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-74dca5f8.js';
+import { a as useOutsideClick } from './useOutsideClick-9892af7a.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-a03b87dd.js';
-import { u as useScreenSize, I as ImageWrap } from './index-60ea53a3.js';
-import { u as useTranslations } from './index-35a4c561.js';
-import { D as Dropdown } from './index-a1d2af19.js';
+import { B as Button } from './index-72f8d755.js';
+import { u as useScreenSize, I as ImageWrap } from './index-a15da11a.js';
+import { u as useTranslations } from './index-8cd8f486.js';
+import classNames from 'classnames';
+import { D as Dropdown } from './index-2ff4c163.js';
 import { getSocialList } from './miscGetSocialList.js';
-import { I as Input } from './index-e10d0576.js';
-import { D as Drawer } from './index-238d5e36.js';
+import { I as Input } from './index-7422fa1f.js';
+import { D as Drawer } from './index-5aa884fc.js';
 import { v4 } from 'uuid';
-import { L as LOCALE } from './Locale-8eb1c65d.js';
+import { L as LOCALE } from './Locale-be151480.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-2b3bddfe.js';
-import { L as Loading } from './index-b0615fc2.js';
+import { A as ArrowRightBlue } from './index-c3d4a23f.js';
+import { L as Loading } from './index-6e497722.js';
 import get from 'lodash/get';
 import debounce from 'lodash/debounce';
 
@@ -2599,12 +2600,12 @@ function DateRangePicker({ inputSize = 'md', name = 'date-range-picker', value,
 
 var styles = {"breadcrumb":"WUqzfRb","separator":"MnVGtSY","textLink":"NclbhXQ"};
 
-const BreadcrumbItem = ({ LinkComponent, page, isLast, onChangePage, }) => {
+const BreadcrumbItem = ({ LinkComponent, page, isLast, onChangePage, className, }) => {
     const { label, value, isDropdown, dropdownItems, dataEventCategory, dataEventAction, dataEventLabel, } = page;
     if (isDropdown) {
         return (React__default.createElement(Dropdown, { options: dropdownItems, placeholder: "...", id: "", placeholderIcon: null, onChange: onChangePage, className: "collapsed-breadcrumb" }));
     }
-    return (React__default.createElement("div", { className: styles.textLink, title: typeof label !== 'string' ? value : label, "data-last": isLast }, LinkComponent && (React__default.createElement(LinkComponent, { "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel, href: value || '#' }, label))));
+    return (React__default.createElement("div", { className: classNames(styles.textLink, className), title: typeof label !== 'string' ? value : label, "data-last": isLast }, LinkComponent && (React__default.createElement(LinkComponent, { "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel, href: value || '#' }, label))));
 };
 /**
  * @deprecated
@@ -2623,12 +2624,12 @@ const Breadcrumbs = ({ className, pages, size, LinkComponent = 'a', onChangePage
         return item;
     })
         .filter(Boolean), [pages]);
-    return (React__default.createElement("div", { "data-size": size, className: `${styles.breadcrumb} ${className || ''}` }, mappedList.map((page, index) => {
+    return (React__default.createElement("div", { "data-size": size, className: classNames(`${styles.breadcrumb} ${className || ''}`, 'breadcrumbs') }, mappedList.map((page, index) => {
         const isLast = index + 1 === mappedList.length;
         return (React__default.createElement(Fragment, { key: index },
             React__default.createElement(BreadcrumbItem, { LinkComponent: LinkComponent, page: page, isLast: isLast, onChangePage: onChangePage }),
             !isLast &&
-                (page.separator || separator || (React__default.createElement("div", { className: styles.separator, "data-size": size })))));
+                (page.separator || separator || (React__default.createElement("div", { className: classNames(styles.separator, 'breadcrumbs-separator'), "data-size": size })))));
     })));
 };
 
@@ -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,16 @@ const StyledVerticalContainer = styled.div `
     grid-column: 1 / span 2;
   }
 `;
+const StyledHorizontalContainer = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+`;
 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 +4817,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', }) => {
+    const StyledContainer = useMemo(() => {
+        if (layout === 'two-item-horizontal') {
+            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: classNames(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',
@@ -5349,10 +5354,29 @@ styled.div `
   }
 `;
 const GeneralInfoContainer = styled.div `
-  background-color: #fff;
-`;
+  ${MediaQueries.mbUp} {
+    display: flex;
+    gap: 1.5rem;
+    border-radius: 0.75rem;
+    padding: 1.5rem;
+    overflow: hidden;
+  }
 
+  #product-image-section {
+    ${MediaQueries.mbUp} {
+      width: 336px;
+    }
+  }
+  background-color: #fff;
+`;
 const ProductImage = styled(ImageWrapV2) `
+  ${MediaQueries.mbUp} {
+    width: 336px;
+    aspect-ratio: 1/1;
+    object-fit: cover;
+    border-radius: 0.5rem;
+  }
+
   width: 100%;
   object-fit: contain;
   object-position: center;
@@ -5360,37 +5384,35 @@ const ProductImage = styled(ImageWrapV2) `
 `;
 const ProductContent = styled.div `
   padding: 1.5rem 1rem;
+  ${MediaQueries.mbUp} {
+    padding: 0;
+    flex: 1;
+    overflow: hidden;
+  }
 
   .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 +5563,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-b2197392.js → index-2423cb9d.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-336c11ff.js';
+import { _ as __rest } from './tslib.es6-eb672842.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-e8740927.js';
-import { B as Button } from './index-cdc9d57c.js';
-import { u as useTranslations } from './index-35a4c561.js';
+import { T as Text } from './index-922016ca.js';
+import { B as Button } from './index-7fc8dbe6.js';
+import { u as useTranslations } from './index-8cd8f486.js';
 import flattenChildren from 'react-keyed-flatten-children';
 import { theme } from './miscTheme.js';
 

package/build/esm/{index-c7ad037b.js → index-2736d117.js}

@@ -1,9 +1,9 @@
-import { a as __awaiter } from './tslib.es6-336c11ff.js';
+import { a as __awaiter } from './tslib.es6-eb672842.js';
 import { isProduction } from './constantsIsProduction.js';
-import { n as normalizeLinkSlash, a as getCurrentSsoUrl } from './normalizeLink-0d04e918.js';
-import { L as LOCALE_SPECS, h as BEARER_REFRESH_TOKEN_COOKIE } from './index-d7d6bb19.js';
+import { n as normalizeLinkSlash, a as getCurrentSsoUrl } from './normalizeLink-b02abfb7.js';
+import { L as LOCALE_SPECS, h as BEARER_REFRESH_TOKEN_COOKIE } from './index-4fa0d037.js';
 import { getCookie, setCookie } from './miscCookieHelper.js';
-import { L as LOCALE } from './Locale-8eb1c65d.js';
+import { L as LOCALE } from './Locale-be151480.js';
 import { domainLocales } from './constantsDomainLocales.js';
 
 const SSO_V2_PATHS = {

package/build/esm/{index-3e065993.js → index-278f6368.js}

@@ -1,13 +1,13 @@
-import { a as __awaiter } from './tslib.es6-336c11ff.js';
+import { a as __awaiter } from './tslib.es6-eb672842.js';
 import React__default, { useState, useEffect, useRef, useContext, useMemo } from 'react';
 import { Box, useMantineTheme } from '@mantine/core';
-import { I as ImageWrap } from './index-60ea53a3.js';
-import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath } from './utils-affa7e64.js';
+import { I as ImageWrap } from './index-a15da11a.js';
+import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath } from './utils-5699841e.js';
 import styled from '@emotion/styled';
 import { PATHS } from './togetherApiPaths.js';
-import { D as DEFAULT_IMG } from './constants-8ff167e7.js';
-import { y as youtubeVidIdGetter } from './post-65c6c3dc.js';
-import { L as Loading } from './index-4ddbc4f3.js';
+import { D as DEFAULT_IMG } from './constants-22e10d18.js';
+import { y as youtubeVidIdGetter } from './post-3fab9643.js';
+import { L as Loading } from './index-0790b9d0.js';
 
 const StyledSocialLinkPreview = styled.div `
   .link-info-container {

package/build/esm/{index-9e4b1f35.js → index-29388758.js}

@@ -1,12 +1,12 @@
 import React__default, { useState, useEffect, useContext, useRef } from 'react';
-import { H as Heading } from './index-57dd6bf1.js';
-import { M as MediaQueries, t as toggleNoScroll } from './utils-8c1fd230.js';
-import { u as useTranslations } from './index-35a4c561.js';
-import { T as TogetherComponentGlobalContext } from './utils-affa7e64.js';
+import { H as Heading } from './index-a48b576d.js';
+import { M as MediaQueries, t as toggleNoScroll } from './utils-ba7f918b.js';
+import { u as useTranslations } from './index-8cd8f486.js';
+import { T as TogetherComponentGlobalContext } from './utils-5699841e.js';
 import { Portal } from '@mantine/core';
-import { T as Text } from './index-e8740927.js';
+import { T as Text } from './index-922016ca.js';
 import styled from '@emotion/styled';
-import { _ as __rest } from './tslib.es6-336c11ff.js';
+import { _ as __rest } from './tslib.es6-eb672842.js';
 import { theme } from './miscTheme.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 

package/build/esm/{index-78fa74ed.js → index-387fa1b4.js}

@@ -1,6 +1,6 @@
-import { c as cookie } from './index-02837c37.js';
-import { B as BEARER_TOKEN_COOKIE } from './index-d7d6bb19.js';
-import { N as NodeIntentType } from './index-b44ee327.js';
+import { c as cookie } from './index-5199cd15.js';
+import { B as BEARER_TOKEN_COOKIE } from './index-4fa0d037.js';
+import { N as NodeIntentType } from './index-b6fa7bd3.js';
 import Cookies from 'js-cookie';
 import { v4 } from 'uuid';
 import { isProduction } from './constantsIsProduction.js';

package/build/esm/{index-408eb64b.js → index-38897e9d.js}

@@ -1,24 +1,24 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-336c11ff.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-eb672842.js';
 import * as React from 'react';
 import React__default, { forwardRef, Component, useState, useCallback, useEffect, createContext, useContext, useRef, useMemo, useImperativeHandle } from 'react';
 import { ArrowDown } from '@hhgtech/icons/other';
 import { createStyles, rem, Autocomplete, Image, ActionIcon, Select as Select$1, AspectRatio as AspectRatio$1, useMantineTheme, Box, Breadcrumbs as Breadcrumbs$1, Accordion as Accordion$1, Indicator, Avatar as Avatar$1, FileInput as FileInput$1, createEmotionCache, NumberInput as NumberInput$1, PasswordInput as PasswordInput$1, Flex, clsx, TextInput, Input as Input$1, Checkbox as Checkbox$1, Slider, Radio as Radio$1, Popover as Popover$1, Chip } from '@mantine/core';
 import { useUncontrolled, useDebouncedValue, useClickOutside, useViewportSize, useResizeObserver, useDisclosure } from '@mantine/hooks';
-import { C as CommonGAssets } from './index-1804fda0.js';
-import { C as CustomStylesType, u as useTemplateVariant, G as GlobalTextStyleNew, F as FontWeight } from './index-e6806e0f.js';
-import { u as useScreenSize, I as ImageWrap } from './index-60ea53a3.js';
+import { C as CommonGAssets } from './index-b29ead5f.js';
+import { C as CustomStylesType, u as useTemplateVariant, G as GlobalTextStyleNew, F as FontWeight } from './index-d7adaf6b.js';
+import { u as useScreenSize, I as ImageWrap } from './index-a15da11a.js';
 import styled from '@emotion/styled';
 import { Carousel as Carousel$1 } from '@mantine/carousel';
-import { T as Text } from './index-e8740927.js';
-import { t as themeColors } from './index-3d1d9a67.js';
+import { T as Text } from './index-922016ca.js';
+import { t as themeColors } from './index-a6264391.js';
 import { theme } from './miscTheme.js';
-import cn from 'classnames';
+import classNames from 'classnames';
 import { v1 } from 'uuid';
-import { a as useUniqueId } from './useUniqueId-da163a46.js';
+import { a as useUniqueId } from './useUniqueId-adb01a18.js';
 import { siteOptions } from './constantsSite.js';
 import { css } from '@emotion/react';
 import { Check, Plus } from '@hhgtech/icons/core';
-import { B as Button } from './index-cdc9d57c.js';
+import { B as Button } from './index-7fc8dbe6.js';
 
 var useStyles$4 = createStyles((theme, { variantStyle }) => {
     const isLeadgenStyle = variantStyle === CustomStylesType.LEADGEN;
@@ -1220,7 +1220,7 @@ const DELETE = 46;
 const SPACEBAR = 32;
 const OTPInputFunction = (props, ref) => {
     const { maxLength = 1, placeholder, className } = props, restProps = __rest(props, ["maxLength", "placeholder", "className"]);
-    return (React__default.createElement("input", Object.assign({ maxLength: maxLength, className: cn(styles$2.otpInput, 'otpInput', className), placeholder: placeholder, type: "number" }, restProps, { ref: ref })));
+    return (React__default.createElement("input", Object.assign({ maxLength: maxLength, className: classNames(styles$2.otpInput, 'otpInput', className), placeholder: placeholder, type: "number" }, restProps, { ref: ref })));
 };
 const OTPInput = forwardRef(OTPInputFunction);
 const OTPFowardRef = (props, ref) => {
@@ -1335,7 +1335,7 @@ const OTPFowardRef = (props, ref) => {
         setOtp(() => transferValueToOtp(valueProps, valueLength));
         setValue(valueProps);
     }, [valueLength, valueProps]);
-    return (React__default.createElement(Flex, { justify: "center", columnGap: 8, className: cn(styles$2.otpContainer, 'otpContainer') }, otp.map((val, index) => {
+    return (React__default.createElement(Flex, { justify: "center", columnGap: 8, className: classNames(styles$2.otpContainer, 'otpContainer') }, otp.map((val, index) => {
         return (React__default.createElement(OTPInput, Object.assign({}, otpShareProps, { ref: (iRef) => {
                 inputRef.current[index] = iRef;
             }, key: '' + index, value: val, type: type, onChange: inputOnChange, onFocus: inputOnFocus, onKeyDown: inputOnKeyDown, onPaste: inputOnPaste, onBlur: onBlur, placeholder: placeholder })));
@@ -1666,13 +1666,13 @@ const PhoneForwardRef = (props, ref) => {
             : '';
         return (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(Flag, Object.assign({ country: country, title: countryName }, restProps)),
-            React__default.createElement(Text, { size: "p2", variant: "primary", className: cn(styles.callingCode, 'PhoneInputCountryIconCallingCode') }, callingCode)));
+            React__default.createElement(Text, { size: "p2", variant: "primary", className: classNames(styles.callingCode, 'PhoneInputCountryIconCallingCode') }, callingCode)));
     }, [flagComponentProps, PhoneInputUtils]);
     const arrowComponent = useCallback(() => {
         if (arrowComponentProps) {
             return arrowComponentProps();
         }
-        return (React__default.createElement("div", { className: cn(styles.arrowSelect, 'PhoneInputArrowContainer') },
+        return (React__default.createElement("div", { className: classNames(styles.arrowSelect, 'PhoneInputArrowContainer') },
             React__default.createElement(CaretDown, null)));
     }, [arrowComponentProps]);
     const onChange = (val) => {
@@ -1695,7 +1695,7 @@ const PhoneForwardRef = (props, ref) => {
         label,
         value,
         onChange,
-        countries, defaultCountry: defaultCountry || selectedCountry, countryCallingCodeEditable, displayInitialValueAsLocalNumber: true, className: cn(styles.phoneInput, {
+        countries, defaultCountry: defaultCountry || selectedCountry, countryCallingCodeEditable, displayInitialValueAsLocalNumber: true, className: classNames(styles.phoneInput, {
             isError,
             [styles.error]: isError,
             [styles.selectedCountry]: selectedCountry,

package/build/esm/{index-9ec5bd06.js → index-3e24c341.js}

@@ -1,48 +1,48 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-336c11ff.js';
+import { a as __awaiter, _ as __rest } from './tslib.es6-eb672842.js';
 import React__default, { useState, useRef, useEffect, useCallback, useContext, useMemo } from 'react';
 import { Info, Ask } from '@hhgtech/icons/other';
-import { D as Dropdown } from './index-a1d2af19.js';
-import { u as useTranslations } from './index-35a4c561.js';
+import { D as Dropdown } from './index-2ff4c163.js';
+import { u as useTranslations } from './index-8cd8f486.js';
 import innertext from 'innertext';
 import { theme } from './miscTheme.js';
-import { I as Input$1 } from './index-408eb64b.js';
+import { I as Input$1 } from './index-38897e9d.js';
 import { useMantineTheme, SegmentedControl, Popover } from '@mantine/core';
 import '@mantine/dates';
-import './index-d7d6bb19.js';
-import './index-b44ee327.js';
-import './index-1804fda0.js';
-import './index-3d1d9a67.js';
-import { T as Text } from './index-e8740927.js';
-import { B as Button } from './index-cdc9d57c.js';
-import './index-e6806e0f.js';
-import './index.styles-7a9af80f.js';
+import './index-4fa0d037.js';
+import './index-b6fa7bd3.js';
+import './index-b29ead5f.js';
+import './index-a6264391.js';
+import { T as Text } from './index-922016ca.js';
+import { B as Button } from './index-7fc8dbe6.js';
+import './index-d7adaf6b.js';
+import './index.styles-47bf88c8.js';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-8c1fd230.js';
-import './index-ee3a4ef3.js';
-import { u as useImagePicker, a as PopupFrame, c as IconCloseCircle, g as getDefaultFailNoti, d as getPostFormData, e as editPost, f as createPost } from './index-6ccb4a31.js';
-import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath, p as getCurrentHref, b as callApiWithAuth, q as callApiWithAdminAuth, r as getChatbotAiApiPath } from './utils-affa7e64.js';
+import { M as MediaQueries } from './utils-ba7f918b.js';
+import './index-6d743e19.js';
+import { u as useImagePicker, a as PopupFrame, c as IconCloseCircle, g as getDefaultFailNoti, d as getPostFormData, e as editPost, f as createPost } from './index-ffc786cd.js';
+import { T as TogetherComponentGlobalContext, c as callApi, d as getApiPath, p as getCurrentHref, b as callApiWithAuth, q as callApiWithAdminAuth, r as getChatbotAiApiPath } from './utils-5699841e.js';
 import styled from '@emotion/styled';
-import { b as formatPost, a as formatCommunity, c as formatTopic } from './dataTransform-807b917c.js';
-import { M as MAX_IMAGE_UPLOADS, B as BEARER_TOKEN_COOKIE } from './constants-8ff167e7.js';
-import { h as highlightBadWords, f as fixMalformedMention, r as removeFontFormat, a as removeEdittedBannedWord, w as wrapAnchorAroundUrls, g as getUrlsFromEditorString, A as ALLOW_DOMAIN_URL, e as escapeRegExp, d as decodeMention, b as decodePostUrl, c as reformatUrl, i as getMentionIdsFromString, L as LIMIT_MENTION } from './post-65c6c3dc.js';
-import { C as CardAuthor } from './index-7b1ee0c1.js';
-import { S as StyledCreatePostDescription$1, R as RichTextEditor$1, I as IconLink } from './editor-2b1ca2da.js';
-import { I as Input } from './index-e10d0576.js';
+import { b as formatPost, a as formatCommunity, c as formatTopic } from './dataTransform-e0d09e84.js';
+import { M as MAX_IMAGE_UPLOADS, B as BEARER_TOKEN_COOKIE } from './constants-22e10d18.js';
+import { h as highlightBadWords, f as fixMalformedMention, r as removeFontFormat, a as removeEdittedBannedWord, w as wrapAnchorAroundUrls, g as getUrlsFromEditorString, A as ALLOW_DOMAIN_URL, e as escapeRegExp, d as decodeMention, b as decodePostUrl, c as reformatUrl, i as getMentionIdsFromString, L as LIMIT_MENTION } from './post-3fab9643.js';
+import { C as CardAuthor } from './index-c356d652.js';
+import { S as StyledCreatePostDescription$1, R as RichTextEditor$1, I as IconLink } from './editor-09f19b54.js';
+import { I as Input } from './index-7422fa1f.js';
 import debounce from 'lodash/debounce';
 import ContentEditable from 'react-contenteditable';
 import { PATHS, ADMIN_PATHS } from './togetherApiPaths.js';
-import { L as Loading } from './index-b0615fc2.js';
-import { C as CardLink } from './index-79e4af59.js';
-import { B as BtnChoice } from './index-b594c492.js';
-import { L as LOCALE } from './Locale-8eb1c65d.js';
+import { L as Loading } from './index-6e497722.js';
+import { C as CardLink } from './index-a7a0dccc.js';
+import { B as BtnChoice } from './index-0c1c95cf.js';
+import { L as LOCALE } from './Locale-be151480.js';
 import * as ReactDOM from 'react-dom';
-import { L as Loading$1 } from './index-4ddbc4f3.js';
-import { b as IconArrowLeft } from './index-9e4b1f35.js';
-import { B as Button$1 } from './index-a03b87dd.js';
+import { L as Loading$1 } from './index-0790b9d0.js';
+import { b as IconArrowLeft } from './index-29388758.js';
+import { B as Button$1 } from './index-72f8d755.js';
 import { getCookie } from './miscCookieHelper.js';
-import { a as useUniqueId } from './useUniqueId-da163a46.js';
-import { U as UserAvatar } from './index-a4334a93.js';
-import { P as PopoverMenu } from './index-b17b26b7.js';
+import { a as useUniqueId } from './useUniqueId-adb01a18.js';
+import { U as UserAvatar } from './index-cb4baa10.js';
+import { P as PopoverMenu } from './index-d6f58db2.js';
 import { Close, Check } from '@hhgtech/icons/core';
 
 const StyledCreateNewPost$1 = styled.div `

package/build/esm/{index-a9279468.js → index-418565e9.js}

@@ -1,9 +1,9 @@
-import { _ as __rest } from './tslib.es6-336c11ff.js';
+import { _ as __rest } from './tslib.es6-eb672842.js';
 import React__default, { useState, useCallback, useMemo, useEffect } from 'react';
 import { clsx } from '@mantine/core';
 import { Drawer } from 'vaul';
 import styled from '@emotion/styled';
-import { Z as ZINDEX_SSO } from './index-d7d6bb19.js';
+import { Z as ZINDEX_SSO } from './index-4fa0d037.js';
 
 const TIME_FOR_MOTION = 300;
 const useDrawerDrag = (motionDelay = TIME_FOR_MOTION) => {

package/build/esm/{index-e5c54f6f.js → index-4db4d3a9.js}

@@ -1,4 +1,4 @@
-import { _ as __rest } from './tslib.es6-336c11ff.js';
+import { _ as __rest } from './tslib.es6-eb672842.js';
 import React__default from 'react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';

package/build/esm/{index-3946fb14.js → index-4f178fa1.js}

@@ -1,28 +1,28 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-336c11ff.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-eb672842.js';
 import React__default, { createContext, useContext, useState, useMemo, useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { u as useHealthToolsCache } from './useHealthToolCache-baebd28b.js';
-import { H as HEALTH_TOOL_TYPE } from './constants-8ff167e7.js';
+import { u as useHealthToolsCache } from './useHealthToolCache-3b08aad3.js';
+import { H as HEALTH_TOOL_TYPE } from './constants-22e10d18.js';
 import { Flex, rem, Stack, clsx, createStyles, Box } from '@mantine/core';
-import { G as GenderOptionControl } from './index-da45ab02.js';
-import { I as Input, R as Radio, c as ErrorLabel, d as Checkbox } from './index-408eb64b.js';
+import { G as GenderOptionControl } from './index-ef7e8051.js';
+import { I as Input, R as Radio, c as ErrorLabel, d as Checkbox } from './index-38897e9d.js';
 import '@mantine/dates';
-import './index-d7d6bb19.js';
-import './index-b44ee327.js';
-import './index-1804fda0.js';
-import './index-3d1d9a67.js';
-import { T as Text } from './index-e8740927.js';
-import './index-cdc9d57c.js';
+import './index-4fa0d037.js';
+import './index-b6fa7bd3.js';
+import './index-b29ead5f.js';
+import './index-a6264391.js';
+import { T as Text } from './index-922016ca.js';
+import './index-7fc8dbe6.js';
 import { theme } from './miscTheme.js';
-import './index-e6806e0f.js';
-import './index.styles-7a9af80f.js';
-import { u as useTranslations } from './index-35a4c561.js';
+import './index-d7adaf6b.js';
+import './index.styles-47bf88c8.js';
+import { u as useTranslations } from './index-8cd8f486.js';
 import '@mantine/hooks';
-import './utils-8c1fd230.js';
-import './index-ee3a4ef3.js';
-import { H as HealthToolFormWrapper } from './index-b2197392.js';
-import { C as CardWrapperContext } from './context-bace72c1.js';
-import { L as LOCALE } from './Locale-8eb1c65d.js';
+import './utils-ba7f918b.js';
+import './index-6d743e19.js';
+import { H as HealthToolFormWrapper } from './index-2423cb9d.js';
+import { C as CardWrapperContext } from './context-8a6301d3.js';
+import { L as LOCALE } from './Locale-be151480.js';
 import { domainLocales } from './constantsDomainLocales.js';
 import { getBmi } from './embeddedHeathToolCards_helpers.js';
 

package/build/esm/{index-d7d6bb19.js → index-4fa0d037.js}

@@ -1,10 +1,10 @@
 import { enUS, vi, km, hi, id, ms, th, zhTW } from 'date-fns/locale';
-import './index-b44ee327.js';
+import './index-b6fa7bd3.js';
 import { siteHost, siteOptions, COUNTRY_CURRENCY_SYMBOL } from './constantsSite.js';
 import { domainLocales, MAP_DOMAIN_BY_LOCALE } from './constantsDomainLocales.js';
 import { RISK_SCREENER_NAME, RISK_SCREENER_SLUG } from './constantsRiskScreener.js';
 import { isProduction } from './constantsIsProduction.js';
-import { L as LOCALE } from './Locale-8eb1c65d.js';
+import { L as LOCALE } from './Locale-be151480.js';
 
 const basePath = process.env.NEXT_PUBLIC_DEPLOY_LOCALE === 'tl-PH' ? '/fil' : '';
 const SSO_URL = process.env.NEXT_PUBLIC_SSO;